/* === HEADER === */ .home .site-header { position: absolute!important; z-index: 20!important; width: 100%!important; left: 0!important; right: 0!important; } /* === FIBOSEARCH EN HEADER === */ /* === Contenedor de búsqueda ===*/ .dgwt-wcas-search-wrapp { display: flex !important; align-items: center !important; position: relative !important; } /* Columna derecha */ .dgwt-wcas-details-outside.dgwt-wcas-is-details .dgwt-wcas-suggestions-wrapp { width: auto; min-width: 350px !important; } .dgwt-wcas-details-wrapp { min-width: 400px; } /* ====* Input de búsqueda (Header) === */ header .dgwt-wcas-search-input { background-color: #001322 !important; color: #ffffff !important; padding: 12px 20px !important; border: 2.5px solid #0091cb !important; border-radius: 50px !important; font-size: 1rem !important; width: calc(100% - 40px) !important; /* Ajusta ancho para dejar espacio para la lupa */ position: relative !important; z-index: 1 !important; } /* Placeholder del input */ .dgwt-wcas-search-input::placeholder { color: #ffffff !important; opacity: 0.7; transition: opacity 0.3s ease !important; } .dgwt-wcas-search-input:focus::placeholder { opacity: 0.9 !important; } /* ========================= */ /* Resultados de búsqueda */ /* ======================= */ /* Contenedor general de detalles de producto */ .dgwt-wcas-product-details { background-color: #001322 !important; border-radius: 8px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; } .dgwt-wcas-product-details:hover { background-color: #001322 !important; } /* Título del producto */ .dgwt-wcas-details-product-title { color: #ffffff !important; font-size: 1.2rem !important; font-weight: 600 !important; margin: 10px 0 !important; transition: color 0.3s ease !important; } .dgwt-wcas-details-product-title:hover { color: #007CAD !important; } /* Precio */ .woocommerce-Price-amount.amount { color: #0091cb; font-size: 1.3rem; font-weight: 700; display: flex; gap: 3px; align-items: baseline; justify-content: center; } .woocommerce-price-suffix { color: #fff !important; font-size: 0.8rem !important; margin-left: 5px !important; } /* SKU */ .dgwt-wcas-details-product-sku { color: #fff !important; font-size: 0.7rem !important; margin: 5px 0 !important; } /* Descripción */ .dgwt-wcas-details-desc, .dgwt-wcas-details-desc strong { color: #ffffff !important; font-size: 0.9rem !important; line-height: 1.5 !important; margin: 10px 0 !important; } /* Imagen principal del detalle */ .dgwt-wcas-details-main-image img { width: 100% !important; height: auto !important; object-fit: contain !important; background-color: #ffffff; } /* ==================== */ /* Selector de cantidad */ /* ====================== */ /* Botones de incremento y decremento */ .prod-li-minus, .prod-li-plus { margin: 0 5px !important; /* Espaciado entre botones */ } /* ======================= */ /* Otras configuraciones */ /* ==================== */ /* Quitar bordes y márgenes de contenedores externos */ .dgwt-wcas-sf-wrapp { border: none !important; margin: 0 !important; } .dgwt-wcas-preloader { background-color: transparent; } /* ====================== */ /* Contenedor principal AddTC */ /* ====================== */ /* Contenedor para la cantidad + botón */ .dgwt-wcas-pd-addtc { display: flex !important; align-items: center !important; gap: 10px !important; /* Espacio horizontal entre cantidad y botón */ margin-top: 5px !important; /* reducir espacio vertical */ flex-wrap: nowrap; } /* Formulario interno (apilado) */ .dgwt-wcas-pd-addtc-form { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px; /* Espacio interno */ margin-top: 10px !important; } /* Alineación de los elementos de cantidad y botón */ .prod-li-minus, .prod-li-plus, .qty.text, .button.product_type_simple.add_to_cart_button { display: inline-block; /* Para ajustar ancho y alto */ vertical-align: middle; /* Alinea verticalmente todos los elementos */ } /* Aqui puedes ver mas */ .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more { justify-content: center; color: #283346; font-size: 1rem; } /* Precios OFERTA EN FIBO */ /* Nuevo */ body > div.dgwt-wcas-details-wrapp.woocommerce.js-dgwt-wcas-initialized > div.dgwt-wcas-details-inner.dgwt-wcas-details-inner-product.dgwt-wcas-details-inner-active > div > div > div.dgwt-wcas-pd-price > ins > span { color: #ff0000 !important; background: transparent !important; background-color: transparent !important; font-weight: 800 !important; font-size: 20px !important; border: none !important; text-decoration: none !important; border-bottom: none!important; border-bottom-color: transparent !important; } /* Tachado/Viejo */ body > div.dgwt-wcas-details-wrapp.woocommerce.js-dgwt-wcas-initialized > div.dgwt-wcas-details-inner.dgwt-wcas-details-inner-product.dgwt-wcas-details-inner-active > div > div > div.dgwt-wcas-pd-price > del > span { color: #FFFFFF !important; text-decoration: line-through !important; text-decoration-color: #ffffff !important; font-size: 15px !important; font-weight: 600 !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* ======= SECCIONES/ELEMENTOS OCULTOS ======= */ .single_variation_wrap .woocommerce-variation-availability p.stock.out-of-stock:first-of-type, .prod-col-wrap > p:nth-child(1), .prod-qnt-wrap > p:nth-child(1), h2.yikes-custom-woo-tab-title, ul.cont-sections, :is(.e-loop-item .elementor-widget-woocommerce-product-add-to-cart,.woocommerce div.product .e-loop-item .elementor-widget-woocommerce-product-add-to-cart) .added_to_cart, .maincont-line1, .maincont-line2, body .section-top .section-view, .prod-items .prod-i .prod-i-actions, .woof_redraw_zone, .prod .prod-props, .prod-price-wrap > p:first-child, a#prod-showdesc, .prod-li-compare, .prod-compare, .woocommerce-checkout .cont-sections.sections-show, .prod-items .prod-i .prod-i-categ, .prod-info2-stock-label, .stock.in-stock, .prod-info2-qty-label, .prod-li-infobtn, .post-tags, .prod-li-quick-view { display: none !important; } /* Márgenes para títulos */ .page-styling h1, .page-styling h2, .page-styling h3, .page-styling h4, .page-styling h5, .page-styling h6 { margin-bottom: 10px; } /*========================== */ /* ESTILOS BASE PARA FORMULARIOS */ /* ========================= */ /* --- Labels Generales --- */ /* Aplica a labels dentro de formularios comunes (WooCommerce, por defecto) */ /* Añade selectores para otros plugins si es necesario (ej: .wpcf7-form label) */ .woocommerce form label:not(.woocommerce-form-login__rememberme):not([class*="button"]), /* Excluir checkbox y botones */ form label:not(.woocommerce-form-login__rememberme):not([class*="button"]) { /* Un selector más general con exclusiones */ display: block !important; /* Asegurar bloque */ margin-bottom: 5px !important; /* Espacio bajo label */ font-weight: 600 !important; font-size: 0.9em !important; color: #333 !important; text-align: left !important; /* Asegurar alineación */ } /* --- Campos de Input, Select, Textarea (Altura Uniforme) --- */ /* Aplica a campos comunes (WooCommerce, por defecto) */ /* Añade selectores para otros plugins si es necesario (ej: .wpcf7-form-control-wrap input, ...) */ .woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea, form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="password"], /* Input real, no el span */ form select, form textarea, .e-search-form input[type="search"] { width: 100% !important; padding: 10px 12px !important; border: 1px solid #ccc !important; border-radius: 4px !important; box-sizing: border-box !important; font-size: 1rem !important; line-height: 1.5 !important; background-color: #fff !important; color: #333 !important; margin: 0 !important; /* Sin margen propio */ height: 3rem !important; /* ALTURA CONSISTENTE */ appearance: none !important; /* Resetear estilos navegador */ -webkit-appearance: none !important; -moz-appearance: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transición suave para foco */ } /* Ajuste específico para Textarea (puede necesitar altura auto) */ .woocommerce form textarea, form textarea, e-search-input-wrapper { height: auto !important; /* Permitir que crezca */ min-height: 6rem !important; /* Altura mínima (ej: 2 * altura input) */ line-height: 1.5 !important; /* Asegurar line-height */ } /* --- Estilos Base para Contenedor Contraseña (SPAN) --- */ /* Selector general para el span, asume estructura HTML consistente */ form span.password-input { display: flex !important; align-items: center !important; position: relative; border: 1px solid #ccc !important; border-radius: 4px !important; background-color: #fff !important; height: 3rem !important; /* ALTURA CONSISTENTE */ box-sizing: border-box !important; padding: 0 !important; width: 100% !important; /* Ancho completo */ margin: 0 !important; /* Sin margen propio */ transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transición foco */ } /* --- Input Interno de Contraseña --- */ form span.password-input input[type="password"] { flex-grow: 1; border: none !important; /* Sin borde propio */ box-shadow: none !important; outline: none !important; background: transparent !important; color: #333 !important; padding: 0 12px !important; /* Padding horizontal */ margin: 0 !important; height: 100% !important; /* Ocupar altura span */ font-size: 1rem !important; /* Mismo tamaño fuente */ line-height: normal !important; /* Resetear line-height */ appearance: none !important; /* Resetear estilos navegador */ -webkit-appearance: none !important; -moz-appearance: none !important; } /* --- Botón Mostrar/Ocultar Contraseña (OJO) --- */ form button.show-password-input { border: none !important; background: transparent !important; cursor: pointer; padding: 0 10px !important; /* Padding lateral icono */ margin: 0 !important; /* Sin márgenes propios */ opacity: 0.6; /* flex-shrink: 0; */ /* QUITADO - Causaba problemas */ font-size: 1.1em !important; /* Tamaño icono */ color: #666 !important; /* Color explícito */ margin-left: auto !important; /* Empujar a la derecha */ height: 100% !important; /* Ocupar altura span */ display: flex !important; /* Usar flex para centrar */ align-items: center !important; /* Centrar icono verticalmente */ line-height: 1 !important; /* Ajustar línea icono */ } form button.show-password-input:hover { opacity: 1 !important; /* Opacidad hover explícita */ color: #000 !important; /* Color hover explícito */ } /* --- Estilos Base para Filas (Opcional) --- */ /* Define margen inferior entre filas */ .woocommerce form .form-row, form .form-row { /* Aplica a clases .form-row genéricas */ margin-bottom: 15px; padding: 0; /* Clearfix básico por si se usa float interno */ /* &::after { content: ""; display: table; clear: both; } */ } /* --- Estilos para el botón de búsqueda (Opcional) --- */ /* Si quieres que el botón también siga un estilo más uniforme */ /* Puedes añadir estilos aquí. Por ejemplo: */ .e-search-form .e-search-submit { padding: 10px 15px !important; /* Ajustar padding */ border: 1px solid #555 !important; /* Ejemplo de borde */ border-radius: 4px !important; cursor: pointer; font-size: 1rem !important; margin-left: 5px !important; /* Espacio entre input y botón */ transition: background-color 0.2s ease, border-color 0.2s ease; } /* --- Asegurar que el wrapper del input y el botón se alineen bien --- */ /* Elementor a veces usa flex para el .e-search-form */ .e-search-form { display: flex; align-items: stretch; /* Asegura que los items se estiren a la misma altura */ } .e-search-input-wrapper { flex-grow: 1; /* Hace que el contenedor del input ocupe el espacio disponible */ } /* ========================= FIN ESTILOS BASE FORMULARIOS ====================== */ /* ==================== Menú desplegable "CATEGORIAS" ==================== */ .section-menu-wrap > ul > li ul li a { color: #007CAD; transition: all 0.2s; border-bottom: 1px solid transparent!important; display: inline-block; margin: 0 0 10px; position: relative; line-height: 1; } /* Botón de menú "CATEGORIAS" - Color de fondo */ .section-top .section-menu-btn.opened, .section-top .section-menu-btn { background-color: #007CAD !important; } /* Hover para botón de menú y otros elementos */ .section-top .section-menu-btn:hover { background-color: #007CAD !important; } /* Hover para título de productos por página / ordenar / vista */ .section-top .section-view .section-view-ttl:hover, .section-top .products-per-page .products-per-page-ttl:hover, .section-top .section-sort .section-sort-ttl:hover { color: #007CAD; } /* Hover para título del producto */ .prod-items .prod-i-link:hover h3 { color: #007CAD; } /* Hover para menús (categorias y subs) y enlaces */ .section-menu-wrap > ul > li > a:hover, .section-top .section-sort ul li.active a, .section-top .section-sort ul li a:hover, .section-top .products-per-page ul li.active, a:hover, .section-top .products-per-page ul li:hover, .blog-i p a, .blog-i h3 a:hover, .prod-litems .prod-li-ttl-wrap h3 a:hover, .prod-litems .prod-li-add .button:hover, .el-menu > ul > li ul.sub-menu li:hover > a, .el-menu > ul > li ul.sub-menu > li.current-menu-item > a { color: #007CAD; } /* ==================== PADDING INFERIOR PARA CONTENEDOR PRINCIPAL "AL PIE" ==================== */ .maincont { padding-bottom: 2rem; } /* Estilos para "Por página", "Ordenar" y "Vista" */ .section-top .products-per-page { float: right; font-size: 0.9em; color: #001322; } .section-top .section-sort { float: right; position: relative; font-size: 0.9em; color: #001322; } /* ==================== PRECIO GENERAL ==================== */ .woocommerce-Price-amount.amount { color: #007CAD !important; font-size: 20px !important; font-weight: 700 !important; } /* ==================== PRECIO VIEJO (TACHADO) ==================== */ .custom-price-container .prod-i-price del .woocommerce-Price-amount.amount, .custom-price-container .prod-i-price del bdi, .prod-price del .woocommerce-Price-amount.amount, p > span.prod-i-price > del > span > bdi, .prod-price del .woocommerce-Price-amount.amount { color: #001322 !important; text-decoration: line-through !important; text-decoration-color: #001322 !important; font-size: 15px !important; font-weight: 600 !important; border: none !important; padding: 0 !important; margin: 0 !important; } del { text-decoration: none !important; } /* ==================== PRECIO NUEVO ==================== */ .custom-price-container .prod-i-price ins .woocommerce-Price-amount.amount, .custom-price-container .prod-i-price ins bdi, body .woocommerce .prod-price ins, .prod-price ins .woocommerce-Price-amount.amount, p > span.prod-i-price > ins > span > bdi, .prod-price ins .woocommerce-Price-amount.amount { color: #ff0000 !important; background: transparent !important; background-color: transparent !important; font-weight: 800 !important; font-size: 20px !important; border: none !important; text-decoration: none !important; border-bottom: none!important; border-bottom-color: transparent !important; } ins { text-decoration: none !important; } /* ==================== QUITAR BORDES/SUBRAYADO EN PRECIOS ==================== */ .prod-items .prod-i .prod-i-info .button, a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart, .prod-items .prod-i .prod-i-price del, .prod-items .prod-i .prod-i-price ins, .prod-items .prod-i .prod-i-price .amount { border-bottom: none !important; } /* ==================== ESTILO PARA "IVA INCLUIDO" ==================== */ .woocommerce-price-suffix, .prod-price .woocommerce-price-suffix { color: #001322 !important; font-size: 0.9em; /* Opcional: reduce el tamaño del texto */ font-weight: 500; display: inline-flex !important; } /* ==================== TEXTO DE DISPONIBLE PARA RESERVA EN FICHA DE PRODUCTO ==================== */ .woocommerce .product .stock.available-on-backorder { color: #007CAD !important; font-size: 14px !important; font-weight: bold !important; padding: 10px 10px !important; } /* ==================== DESDE Y TU SELECCIÓN EN PRODUCTO ==================== */ /* Estilo para el estado inicial "ficha de producto" */ .single-product .custom-price-container { margin: 5px 0; padding: 10px; background-color: #f8f8f8; border-radius: 5px; } span.from-text, .from-text { color: #007CAD; font-weight: normal; font-size: 16px; } /* Estilo cuando hay selección "ficha de producto" */ .single-product .prod-price, .custom-variation-price, .woocommerce-variation-price { margin: 15px 0; padding: 10px; background-color: #f8f8f8; border-left: 3px solid #007CAD !important; display: flex; align-items: baseline; justify-content: flex-start; gap: 5px; border-radius: 0px 8px 8px 0px; border: 1px solid #eee; } .tu-seleccion { color: #007CAD; font-weight:normal !important; font-size: 16px; display: ruby; } .variation-price { font-size: 18px; font-weight: bold; color: #333; } .prod-info { margin-bottom: 10px; } div.prod-info > div.prod-col-wrap.prod-var-wrap > p, div.prod-info > div.prod-qnt-wrap > p:nth-child(1) { margin-bottom: 10px; } /* ======== ESTILO BASE BOTONES =========== */ body .edit-account button.button, body .woocommerce-address-fields button.button, button.woocommerce-button.woocommerce-form-login__submit, .woocommerce-Button.woocommerce-form-register__submit, .woocommerce div.product form.cart .button, .prod-i .prod-i-info .button, .prod-i .prod-i-info a.button, #place_order, .page-styling .wpcf7 input[type=submit], body a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart, body .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button, .single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed, body a.button, body .woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart, .cr-qna-block .cr-qna-search-block .cr-qna-ask-button, .cr-review-form-submit, .cr-review-form-cancel, p.form-row.form-row-last > button, .elementor-widget-woocommerce-checkout-page .woocommerce button.woocommerce-button, .woocommerce-Button, .wc-block-cart__submit-button, button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained, #shipping-calculator-form-wrapper > form > button, .wc-block-components-button:not(.is-link) { background-color: #007CAD !important; color: #fff !important; box-sizing: border-box !important; border-radius: 50px !important; display: flex !important; align-items: center !important; text-align: center !important; justify-content: center !important; height: 3rem !important; width: auto !important; /* Ancho dinámico */ min-width: 150px !important; /* Ancho mínimo */ font-weight: 600 !important; font-size: 0.9rem !important; text-transform: uppercase !important; padding-left: 1.5em !important; padding-right: 1.5em !important; font-size: clamp(0.7rem, calc(0.75rem + 0.25vw), 0.9rem) !important; } /* === MEDIA QUERIES DE ESTILOS BASE BOTONES === */ @media (max-width: 767px) { body .edit-account button.button, body .woocommerce-address-fields button.button, button.woocommerce-button.woocommerce-form-login__submit, .woocommerce-Button.woocommerce-form-register__submit, .woocommerce div.product form.cart .button, .prod-i .prod-i-info .button, .prod-i .prod-i-info a.button, #place_order, .page-styling .wpcf7 input[type=submit], body a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart, body .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button, .single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed, body a.button, body .woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart { /* --- Sobrescribimos las dimensiones para móvil --- */ height: 2.5rem !important; /* Altura reducida */ min-height: 2.5rem !important; /* Altura mínima reducida */ padding: 0 0.8em !important; /* Menos padding horizontal */ min-width: 140px !important; /* Ancho mínimo reducido (ajusta si es necesario) */ max-width: 90% !important; /* --- Otros estilos base como background, color, border-radius, display, etc. se heredan --- */ margin-bottom: 12px !important; } /* Ajuste adicional específico para botones DENTRO de la galería si necesitan algo distinto */ /* Por ejemplo, si SÓLO los de la galería deben ocupar el ancho completo */ .prod-items .prod-i .prod-i-info .button, .prod-items .prod-i .prod-i-info a.button { width: calc(100% - 10px) !important; /* Ocupar ancho - padding contenedor */ margin-left: 0px !important; margin-right: 0px !important; margin-bottom: 10px !important; /* Espacio inferior */ } } /* ---- FIN ESTILOS BASE BOTONES MÓVIL ---- */ /* =========================================== */ /* ESTILOS BOTONES ELEMENTOR (BASE + RESPONSIVE) */ /* =========================================== */ /* --- Estilo Base para Botones Elementor --- */ /* Aplicamos fuera de @media query */ .elementor-widget-button .elementor-button, .elementor-button { /* Selector principal */ border-radius: 50px !important; /* Redondeado base */ /* --- Layout y Dimensiones (Ajustado para Elementor) --- */ display: inline-flex !important; /* CLAVE: Usar inline-flex */ align-items: center !important; /* Centrar contenido verticalmente */ justify-content: center !important; /* Centrar contenido horizontalmente */ text-align: center !important; height: 3rem !important; /* Altura base */ width: auto !important; /* Ancho automático según contenido */ /* min-width: 200px !important; */ /* QUITAMOS min-width fijo por defecto */ padding: 0 1.5em !important; /* Padding horizontal base */ box-sizing: border-box !important; text-decoration: none !important; transition: background-color 0.2s ease; /* --- Tipografía --- */ line-height: normal !important; /* Resetear para inline-flex */ font-size: clamp(0.7rem, calc(0.75rem + 0.25vw), 0.9rem) !important; } /* Ajustes para wrappers internos de Elementor si fueran necesarios */ .elementor-button .elementor-button-content-wrapper { display: inherit; align-items: inherit; justify-content: inherit; } .elementor-button .elementor-button-text { color: #fff !important; /* Asegurar color texto interno */ margin: 0; /* Resetear margen */ padding: 0; /* Resetear padding */ } /* --- Efecto Hover para Botones Elementor --- */ .elementor-button:hover { background-color: #005F85 !important; /* Color hover (ajusta si es otro) */ color: #fff !important; } /* --- Estilos Móviles para Botones Elementor --- */ @media (max-width: 767px) { .elementor-button { height: 2.8rem !important; /* Altura móvil (un poco más que 2.5) */ min-height: auto !important; /* Sin altura mínima */ padding: 0 1.2em !important; /* Padding horizontal móvil */ min-width: auto !important; /* Sin ancho mínimo */ /* max-width: 90% !important; */ /* Opcional: limitar ancho */ } } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button { margin-top: 10px !important; } /* ============================================================== */ /* === AJUSTES BOTONES PARA MÓVILES MUY PEQUEÑOS (S) ~360px === */ /* ============================================================== */ @media (max-width: 375px) { /* Aplicamos a 375px o menos */ /* --- Ajustes para Botones Base (WooCommerce, Forms, etc.) --- */ body .edit-account button.button, body .woocommerce-address-fields button.button, button.woocommerce-button.woocommerce-form-login__submit, .woocommerce-Button.woocommerce-form-register__submit, .woocommerce div.product form.cart .button, .prod-i .prod-i-info .button, .prod-i .prod-i-info a.button, #place_order, .page-styling .wpcf7 input[type=submit], body a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart, body .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button, .single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed, body a.button, body .woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart { min-width: 0 !important; /* CLAVE: Eliminar el ancho mínimo */ width: auto !important; /* Asegurar ancho automático */ max-width: 100% !important; /* Asegurar que no se desborde (mejor que 90%) */ height: 2.1rem !important; /* Altura ligeramente más reducida */ min-height: auto !important; /* Sin altura mínima fija */ font-size: 0.65rem !important; /* Fuente un poco más pequeña */ padding: 0 0.8em !important; /* Padding horizontal (ajusta si necesitas menos) */ margin-bottom: 10px !important; /* Ajustar margen inferior si es necesario */ } /* --- Ajustes para Botones Elementor (Móvil S) --- */ .elementor-button { height: 2.6rem !important; /* Altura móvil reducida */ font-size: 0.75rem !important; /* Fuente móvil reducida */ padding: 0 1em !important; /* Padding horizontal móvil reducido */ /* min-width: auto !important; (ya estaba en 767px, así que no hace falta repetirlo) */ /* max-width: 100% !important; */ /* Opcional: si ves que se salen */ } } /* ---- FIN AJUSTES BOTONES MÓVILES S ---- */ /* ==================== HOVER PARA ENLACES ==================== */ .page-styling a, .page-styling a:hover { border-color: #007CAD !important; text-decoration: none !important; border-bottom: none !important; } /* ==================== COLOR TEXTO DESCRIPCION PRODUCTO ==================== */ .prod-tab-desc { padding: 11px 0 0; color: #283346 !important; font-size: 1rem; line-height: 180%; } /* ==================== OCULTAR SVG DEL BOTÓN EN FICHA DE PRODUCTO ==================== */ button.single_add_to_cart_button svg { display: none !important; } /* ==================== AJUSTES DE CANTIDAD INPUT, PLUS Y LESS FICHA DE PRODUCTO ==================== */ /* CONTENEDOR PRINCIPAL (Mismo diseño) */ .prod .prod-info2 .prod-li-qnt, .qnt-wrap.prod-li-qnt { height: 3rem; border: 1px solid #007CAD !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; padding: 0.4rem !important; background-color: white !important; transition: all 0.3s ease !important; /*width: 140px !important;*/ margin-bottom: 10px; } /* SOLUCIÓN SÍMBOLOS DUPLICADOS */ .qnt-wrap.prod-li-qnt a.qnt-minus, .qnt-wrap.prod-li-qnt a.qnt-plus { position: relative; text-indent: -9999px; /* Oculta texto original */ overflow: hidden; } .qnt-wrap.prod-li-qnt a.qnt-minus:before, .qnt-wrap.prod-li-qnt a.qnt-plus:before { content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-indent: 0; font-weight: 700; } .qnt-wrap.prod-li-qnt a.qnt-minus:before { content: "-"; } /* INPUT (Manteniendo estilo) */ .qnt-wrap.prod-li-qnt input.input-text.qty.text { border: none !important; background: transparent !important; color: #283346 !important; font-weight: 600 !important; font-size: clamp(14px, 1.25vw, 16px); /* Escala responsiva */ width: 2.2rem !important; /* Unidad relativa */ padding: 0 !important; margin: 0 !important; text-align: center; } /* BOTONES (Escala responsiva) */ .qnt-wrap.prod-li-qnt a.qnt-minus, .qnt-wrap.prod-li-qnt a.qnt-plus { background: #007CAD !important; color: white !important; border-radius: 50% !important; width: 2.2rem; height: 2.2rem; font-size: clamp(1.2rem, 2vw, 1rem); /* Tamaño máximo fuente 18px → 16px */ display: flex !important; align-items: center; justify-content: center; transition: transform 0.2s ease !important; border: #007CAD !important; } /* === BLOQUE CORREGIDO: Eliminar flechas del input number (WebKit y Firefox) === */ .qnt-wrap.prod-li-qnt input[type=number] { -moz-appearance: textfield !important; /* Firefox */ appearance: textfield !important; /* Futuro estándar si se adopta */ } /* Webkit (Chrome, Safari, Edge, Opera) */ .qnt-wrap.prod-li-qnt input[type=number]::-webkit-outer-spin-button, .qnt-wrap.prod-li-qnt input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* RESPONSIVE CON MEDIA QUERIES (Para ajustes específicos) */ @media (max-width: 768px) { .qnt-wrap.prod-li-qnt { padding: 0.1rem !important; min-width: 120px !important; height: 2.5rem !important; } .qnt-wrap.prod-li-qnt input.input-text.qty.text { width: 2rem !important; } .qnt-wrap.prod-li-qnt a.qnt-minus, .qnt-wrap.prod-li-qnt a.qnt-plus { width: 2rem !important; height: 2rem !important; } } /* ==================== CARTEL OFERTA (CORREGIDO) ==================== */ .onsale { background: linear-gradient(145deg, #ff4b2b, #ff416c); color: white; font-weight: 700 !important; padding: 5px 5px !important; position: absolute; z-index: 10; top: 15px; left: 15px; /* CORREGIDO: !important va UNA SOLA VEZ al final */ box-shadow: 0 0 5px rgba(255, 105, 97, 0.4), 0 0 10px rgba(255, 105, 97, 0.4), 0 4px 8px rgba(0,0,0,0.15) !important; letter-spacing: 0.3px; font-size: 1.1rem !important; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Añadido !important para consistencia */ outline: 1px solid white; /* Considera si necesitas este outline */ animation: pulse 3s infinite ease-in-out; text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; /* Añadido !important para consistencia */ /* 'transform' lo aplica la animación 'pulse', no es necesario aquí */ } /* Definición de la animación de pulso */ @keyframes pulse { 0% { transform: scale(1) rotate(-3deg); /* Rotación más sutil */ box-shadow: 0 4px 8px rgba(0,0,0,0.15); } 50% { transform: scale(1.03) rotate(-3deg); /* Escala ajustada */ box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Sombra más pronunciada */ } 100% { transform: scale(1) rotate(-3deg); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } } /* Media query para responsividad */ @media (max-width: 768px) { .onsale { font-size: 0.7rem !important; /* Tamaño reducido para móviles */ padding: 8px 12px; /* Espaciado ajustado */ top: 10px; left: 10px; } } /* -------- NUMERACION PIE DE PAGINA PRODUCTOS --------- */ /* Contenedor de la paginación */ #content > div.cont.maincont > ul.page-numbers { display: flex; justify-content: center; list-style: none; padding: 0; margin: 20px 0; } /* Espaciado entre elementos de la paginación */ #content > div.cont.maincont > ul.page-numbers > li { margin: 0 5px; } /* Estilos comunes para enlaces y span (estado actual) */ #content > div.cont.maincont > ul.page-numbers > li a, #content > div.cont.maincont > ul.page-numbers > li span { display: inline-block; padding: 8px 12px; font-size: 16px; color: #007CAD; border: 1px solid #007CAD; border-radius: 4px; text-decoration: none; transition: background-color 0.3s, color 0.3s; } /* Estado hover para enlaces */ #content > div.cont.maincont > ul.page-numbers > li a:hover { background-color: #007CAD; color: #ffffff; } /* Estado activo: página actual */ #content > div.cont.maincont > ul.page-numbers > li span.current { background-color: #007CAD; color: #ffffff; } /* === Paginación en Móviles (Revisión) === */ /* Aplicamos a partir de 767px para consistencia con galería */ @media (max-width: 767px) { /* Contenedor (opcional: reducir margen si ocupa mucho) */ #content > div.cont.maincont > ul.page-numbers { margin: 20px 0 15px 0 !important; /* Reducir margen vertical */ padding: 0 5px !important; /* Añadir padding lateral si se acerca a bordes */ flex-wrap: wrap; /* Permitir que los números bajen de línea si no caben */ justify-content: center; /* Asegurar centrado */ } /* Botones de paginación más pequeños */ #content > div.cont.maincont > ul.page-numbers > li { margin: 3px 3px !important; /* Ajustar margen entre botones */ } #content > div.cont.maincont > ul.page-numbers > li a, #content > div.cont.maincont > ul.page-numbers > li span { padding: 5px 9px !important; /* Reducir padding */ font-size: 13px !important; /* Reducir fuente */ /* Hereda colores y bordes base, pero forzamos tamaño */ } /* Ocultar '...' en pantallas muy pequeñas si molestan (opcional) */ /* Si descomentas esto, asegúrate de que esté DENTRO de la media query de 767px o en una propia de 400px */ /* @media (max-width: 400px) { #content > div.cont.maincont > ul.page-numbers > li span.dots { display: none !important; } #content > div.cont.maincont > ul.page-numbers > li a, #content > div.cont.maincont > ul.page-numbers > li span { padding: 4px 7px !important; // Aún más pequeños font-size: 12px !important; } } */ } /* ---- FIN PAGINACIÓN MÓVILES ---- */ /* =========================================== */ /* CSS PERSONALIZADO PARA LA GALERÍA DE PRODUCTOS */ /* =========================================== */ /* Contenedor General de Items */ .prod-items .prod-i { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; min-height: 400px !important; /* Altura mínima tarjeta completa */ position: relative; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; box-sizing: border-box; } /* Imagen IMG */ .prod-items .prod-i p.prod-i-img .image-wrap img { /* Asume estructura con .image-wrap */ width: 100% !important; height: 100% !important; /* Llenar contenedor */ object-fit: contain !important; /* Ajuste de imagen */ max-width: 100% !important; background-color: #ffffff; } /* --- Título del Producto --- */ .prod-i-link h3 { font-size: 1rem !important; font-weight: 600 !important; color: #001322 !important; padding-bottom: 1rem !important; width: 95% !important; margin-left: auto !important; margin-right: auto !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; margin-bottom: 0 !important; position: relative; z-index: 2; pointer-events: auto !important; } .prod-i-link:hover h3 { color: #007CAD !important; } /* --- Contenedor del Precio --- */ .prod-items .prod-i .custom-price-container { font-size: 1rem !important; opacity: 1 !important; visibility: visible !important; position: static !important; display: flex !important; flex-wrap: nowrap; /* Opcional: El valor por defecto ya es nowrap */ width: 100%; box-sizing: border-box; height: 4.5rem !important; /* altura FIJA */ min-height: unset !important; justify-content: center !important; /* Mantenemos alineación inferior */ align-items: center !important; } .prod-items .prod-i .custom-price-container .woocommerce-price-suffix { display: none !important; } /* --- Ocultar elementos innecesarios / Limpieza --- */ .prod-i .prod-i-wrap .prod-i-info-wrap .prod-i-info .prod-addtocart { display: none !important; } .prod-items .prod-i:hover .prod-i-price { opacity: 1 !important; visibility: visible !important; } .prod-items .prod-i .added_to_cart.wc-forward { display: none !important; } /* Zoom Sutil en Imagen */ .prod-items .prod-i .prod-i-link .prod-i-img img { transition: transform 0.3s ease; /* Transición suave */ } .prod-items .prod-i .prod-i-link:hover .prod-i-img img { transform: scale(1.05); /* Aumenta un 5% el tamaño */ } .prod-items .prod-i .prod-i-img { line-height: 200px !important; } /* =========================================== */ /* GALERÍA PRODUCTOS - VISTA MÓVIL (2 COLUMNAS) - V1 (Basado en Nuevo Base Limpio) */ /* =========================================== */ @media (max-width: 767px) { /* 1. Contenedor Principal: Activar Flexbox */ .prod-items { display: flex !important; flex-wrap: wrap !important; margin-left: -5px !important; margin-right: -5px !important; align-items: stretch !important; /* Intentar que tarjetas en misma fila tengan igual altura */ } /* 2. Cada Tarjeta de Producto */ .prod-items .prod-i { width: calc(50% - 10px) !important; /* Ancho para 2 columnas */ margin-left: 5px !important; margin-right: 5px !important; margin-bottom: 20px !important; /* Espacio vertical entre filas */ min-height: 150px !important; /* QUITAR altura mínima de escritorio */ padding: 0 !important; /* Reset padding base */ display: flex !important; /* Mantener flex column interno */ flex-direction: column !important; background-color: #fff !important; /* Asegurar por si acaso */ border: 1px solid #eee !important; border-radius: 5px !important; overflow: hidden !important; } /* --- ESTILOS IMAGEN MÓVIL (Altura Fija) --- */ /* Contenedor P de la imagen */ .prod-items .prod-i a.prod-i-link p.prod-i-img { display: block !important; padding: 0 !important; margin: 0 !important; position: relative !important; width: 100% !important; height: 180px !important; /* *** AJUSTA ESTA ALTURA PARA MÓVIL *** */ overflow: hidden !important; flex-shrink: 0; /* No encoger verticalmente */ background-color: #ffffff; /* Fondo mientras carga */ } /* Contenedor interno .image-wrap (si existe) */ .prod-items .prod-i p.prod-i-img .image-wrap { display: block !important; width: 100% !important; height: 100% !important; /* Llenar altura fija del padre */ overflow: hidden !important; position: relative !important; } /* Imagen IMG */ .prod-items .prod-i p.prod-i-img .image-wrap img { /* Asume estructura con .image-wrap */ display: block !important; width: 100% !important; height: 100% !important; /* Llenar contenedor */ object-fit: contain !important; /* Ajuste de imagen */ max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; border: none !important; background-color: #ffffff; } /* --- FIN ESTILOS IMAGEN --- */ /* Contenedor Info (Título, Precio, Botón) */ .prod-items .prod-i .prod-i-info { /* Asumiendo que sigue siendo la clase */ display: flex !important; flex-direction: column !important; flex-grow: 1 !important; /* Ocupa espacio vertical restante */ padding: 5px 8px 8px 8px !important; /* Padding interno móvil */ width: 100% !important; box-sizing: border-box !important; text-align: center !important; justify-content: center !important; /* Empujar botón abajo */ } /* 3. Título: Limitar a 2 líneas */ .prod-items .prod-i .prod-i-link h3 { font-size: 0.8rem !important; max-height: 2.5em !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; width: 90% !important; /* Ocupar ancho contenedor info */ padding: 0 !important; flex-shrink: 0; /* No encoger */ margin-top: 0.3rem !important; /* Hereda fuente, color, peso de la base */ margin-bottom: 0.2rem !important; } /* 4. Contenedor de precio: Ajustar altura/tamaño */ .prod-items .prod-i .custom-price-container { height: 15px !important; /* Quitar altura fija escritorio */ margin-top: 0.3rem !important; margin-bottom: 0.6rem !important; /* Espacio antes del botón */ font-size: 0.9rem !important; /* Tamaño fuente base precio móvil */ /* Hereda display:flex, justify/align:center de base */ flex-wrap: nowrap !important; line-height: 1.2 !important; height: 2.8rem !important; /* altura FIJA */ } /* Precio Amount móvil */ .prod-items .prod-i .custom-price-container .woocommerce-Price-amount { font-size: 1.2em !important; /* Heredar 0.9rem */ /* Hereda inline-block, v-align de base */ } /* Desde móvil */ .prod-items .prod-i.product-type-variable .custom-price-container .from-text { font-size: 0.9em !important; /* Relativo a 0.9rem */ } } /* ---- FIN VISTA MÓVIL (2 COLUMNAS) - V1 (Nuevo Base) ---- */ /* =========================================== */ /* ESTILOS PARA PÁGINA "MI CUENTA" */ /* USA ESTILOS BASE PARA BOTONES Y FORMULARIOS */ /* =========================================== */ /* --- Navegación Lateral --- */ .woocommerce-account .woocommerce-MyAccount-navigation { border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; background-color: #fff; width: 100%; box-sizing: border-box; margin-bottom: 30px; float: none; } @media (min-width: 768px) { .woocommerce-account .woocommerce-MyAccount-navigation { width: 240px; float: left; margin-bottom: 0; margin-right: 30px; } } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding-left: 0; margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin-bottom: 4px; position: relative; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 10px 15px; text-decoration: none !important; color: #333; font-weight: 500; font-size: clamp(0.7rem, 1vw + 0.4rem, 0.9rem); transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease; border-left: 4px solid transparent; } .woocommerce-account .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover { background-color: #f5f5f5; color: #007CAD; border-left-color: #ddd; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background-color: #e7f5fc; color: #007CAD; font-weight: 700; border-left-color: #007CAD; } /* --- Área de Contenido --- */ .woocommerce-account .woocommerce-MyAccount-content { border: 1px solid #e0e0e0; border-radius: 5px; padding: 30px; background-color: #fff; box-sizing: border-box; overflow: hidden; text-align: left; /* Asegurar alineación */ margin-right: 2em; } .woocommerce-account .woocommerce-MyAccount-content p { line-height: 1.7; margin-bottom: 1.2em; color: #333; text-align: left !important; } .woocommerce-account .woocommerce-MyAccount-content p:last-child { margin-bottom: 0; } .woocommerce-account .woocommerce-MyAccount-content strong { font-weight: 600; color: #001322; } .woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: #007CAD; text-decoration: none; font-weight: 500; border-bottom: 1px dotted #007CAD; transition: color 0.2s ease, border-bottom-color 0.2s ease; } .woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover { color: #005a87; border-bottom-color: #005a87; } /* --- Formularios (Detalles Cuenta, Direcciones, etc.) --- */ .woocommerce-account .woocommerce-MyAccount-content form { margin-top: 20px; text-align: left; } /* Filas y Labels heredan de BASE */ /* Layout específico 2 columnas */ .woocommerce-account .woocommerce-MyAccount-content form .form-row-first { width: 48%; float: left; margin-right: 4%; } .woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: 48%; float: right; margin-right: 0; } .woocommerce-account .woocommerce-MyAccount-content form::after, .woocommerce-account .woocommerce-MyAccount-content form .clear { content: ""; display: table; clear: both; } @media (max-width: 767px) { .woocommerce-account .woocommerce-MyAccount-content form .form-row-first, .woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: 100%; float: none; margin-right: 0; } } .woocommerce-Address-title h2 { font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem); /* Mín: 1.125rem (18px), Ideal: 2vw + 0.5rem (crece con el viewport), Máx: 1.5rem (24px) */ } .woocommerce-Address address { font-size: clamp(0.875rem, 1.5vw + 0.25rem, 1rem); /* Mín: 0.875rem (14px), Ideal: adaptable al ancho, Máx: 1rem (16px) */ line-height: 1.6; } .woocommerce-Address-title .edit { font-size: clamp(0.75rem, 1vw + 0.5rem, 0.875rem); /* Mín: 0.75rem (12px), Ideal: adaptable, Máx: 0.875rem (14px) */ } .woocommerce-account .woocommerce-MyAccount-content p { font-size: clamp(0.7rem, 1vw + 0.5rem, 1rem); } /* Inputs, Contraseña, Ojo heredan de BASE */ /* Fieldset y Legend (Específico Mi Cuenta) */ .woocommerce-account .woocommerce-MyAccount-content form fieldset { border: 1px solid #e0e0e0; padding: 15px 20px; margin-top: 20px; margin-bottom: 10px; border-radius: 5px; text-align: left; } .woocommerce-account .woocommerce-MyAccount-content form legend { font-weight: 600; padding: 0 10px; font-size: 1.1em; width: auto; margin-bottom: 15px; /* Aumentar espacio bajo leyenda */ } /* Notas descriptivas bajo campos */ .woocommerce-account .woocommerce-MyAccount-content form span em, .woocommerce-account .woocommerce-MyAccount-content form p em { font-size: 0.85em; color: #666; display: block; margin-top: 5px; text-align: left !important; line-height: 1.4; } /* Botón Guardar Cambios (Solo márgenes) */ .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"].button { margin-top: 20px !important; margin-right: 10px !important; margin-bottom: 10px !important; /* Apariencia viene de BASE */ } /* =========================================== */ /* ESTILOS PARA SUBMENU ICONO USUARIO HEADER (OSCURO) */ /* =========================================== */ /* Posicionamiento Relativo del Contenedor del Icono */ li.el-header-icon-profile { position: relative !important; } /* Estilo y Posicionamiento del Submenu Desplegable */ ul.el-header-icons-submenu { position: absolute !important; top: 100% !important; right: 0 !important; /* Alineado a la derecha del icono */ left: auto !important; margin: 5px 0 0 0 !important; padding: 10px 0 !important; /* Padding vertical */ min-width: 200px; width: max-content; max-width: 250px; list-style: none !important; /* Quitar puntos lista */ z-index: 1000 !important; border-radius: 4px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s ease; pointer-events: none; /* --- Estilo Oscuro --- */ background-color: #001322 !important; /* Fondo oscuro */ border: 1px solid #334 !important; /* Borde oscuro */ } /* Estado visible */ li.el-header-icon-profile:hover > ul.el-header-icons-submenu { /* Asume hover en LI padre */ opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; } /* Items del Submenu */ ul.el-header-icons-submenu li { margin: 0 !important; padding: 0 !important; border: none !important; /* Asegurar sin bordes internos */ } /* Enlaces dentro del submenu */ ul.el-header-icons-submenu li a { display: block !important; padding: 8px 20px !important; /* Padding interno */ font-size: 0.9rem !important; text-decoration: none !important; white-space: nowrap !important; transition: background-color 0.2s ease, color 0.2s ease !important; border-bottom: none !important; /* Sin subrayado/borde */ /* --- Estilo Oscuro --- */ color: #ffffff !important; /* Texto blanco */ } /* Hover en enlaces del submenu */ ul.el-header-icons-submenu li a:hover { background-color: #007CAD !important; /* Fondo azul principal */ color: #ffffff !important; /* Mantener texto blanco */ } /* Estilo específico para 'Salir' (si es el último) */ ul.el-header-icons-submenu li:last-child { border-top: 1px solid #334 !important; /* Separador oscuro */ margin-top: 5px !important; padding-top: 5px !important; } /* =========================================== */ /* ESTILOS PARA LOGIN/REGISTRO (DESCONECTADO) */ /* USA ESTILOS BASE PARA BOTONES Y FORMULARIOS */ /* =========================================== */ /* --- Contenedores de Columna --- */ #customer_login .u-column1, #customer_login .u-column2 { border: 1px solid #e0e0e0; border-radius: 5px; padding: 30px; background-color: #fff; box-sizing: border-box; margin-bottom: 30px; width: 100%; float: none; } /* --- Layout Escritorio --- */ @media (min-width: 768px) { #customer_login { display: flex; gap: 30px; } #customer_login .u-column1, #customer_login .u-column2 { flex: 1; margin-bottom: 0; } } /* --- Títulos H2 --- */ #customer_login h2 { font-size: 1.5em; margin-bottom: 20px; font-weight: 600; color: #001322; text-align: left; } /* --- Forzar Alineación Izquierda Columna Acceder --- */ #customer_login .u-column1, #customer_login .u-column1 form label, #customer_login .u-column1 form p, #customer_login .u-column1 .woocommerce-LostPassword.lost_password { text-align: left !important; } /* --- Formularios y Inputs heredan de BASE --- */ #customer_login form { margin-top: 20px; } /* --- Layout Fila Checkbox/Botón en Login (Flujo Normal) --- */ #customer_login .u-column1 form p.form-row:has(button.woocommerce-form-login__submit) { margin-top: 20px; margin-bottom: 0px; padding: 0; } #customer_login .u-column1 form p.form-row .woocommerce-form-login__rememberme { display: block; margin-bottom: 15px; padding-top: 0; font-weight: normal; font-size: 0.9em; } #customer_login .u-column1 form p.form-row .woocommerce-form-login__rememberme input { margin-right: 5px; vertical-align: middle; } /* Posicionamiento Botón LOGIN (Solo márgenes) */ #customer_login .u-column1 form p.form-row button.woocommerce-button.woocommerce-form-login__submit { margin-top: 0; margin-bottom: 10px; /* Apariencia/Alineación de BASE */ } /* --- Párrafo enlace "¿Olvidaste contraseña?" --- */ #customer_login .u-column1 .woocommerce-LostPassword.lost_password { margin-top: 5px; margin-bottom: 1.5em; width: 100%; text-align: left !important; clear: both; padding: 0; font-size: 0.9em; } #customer_login .u-column1 .woocommerce-LostPassword.lost_password a { border-bottom: 1px dotted #007CAD; font-weight: 500; /* Hereda color/hover base */ } /* --- Limpiar floats --- */ #customer_login .u-column1::after, #customer_login .u-column2::after { content: ""; display: table; clear: both; } /* ========================= */ /* ELEMENTOR SLIDER CONSISTENCIA (Loop Item 18744) NOVEDADES */ /* ============================= */ /* Contenedor principal del contenido dentro del slide */ /* Hacemos que sea una columna flex que ocupe toda la altura */ .elementor-18744 .elementor-widget-wrap { display: flex !important; flex-direction: column !important; height: 100% !important; /* Asegurar que ocupa la altura del slide */ justify-content: space-between; /* Separa elementos, ayuda a empujar botón abajo */ } /* Aplicar borde, sombra, redondeo al item */ .elementor-18744 .elementor-widget-wrap { background-color: #ffffff !important; /* Fondo blanco */ border: 1px solid #e9e9e9 !important; /* Borde gris suave */ border-radius: 12px !important; /* Bordes redondeados (ajusta si quieres) */ margin-top: 25px !important; } /* --- Ajustes Widgets Internos --- */ /* Widget Imagen Destacada */ .elementor-18744 .elementor-element.elementor-element-34cb80d { /* Contenedor widget imagen */ order: 1; /* Orden: Imagen primero */ flex-shrink: 0; /* No encoger */ margin-bottom: 0.75rem !important; /* Espacio bajo imagen */ } .elementor-18744 .elementor-element.elementor-element-34cb80d img { object-fit: contain; /* Rellenar espacio */ background-color: #ffffff; max-width: 99% !important; } .elementor-18744 .elementor-element.elementor-element-34cb80d>.elementor-widget-container { height: 234px !important; width: 100% !important; overflow: hidden !important; } /* Widget Título del Producto */ .elementor-18744 .elementor-element.elementor-element-6a05f90 { /* Contenedor widget título */ order: 2; /* Orden: Título segundo */ flex-shrink: 0; /* No encoger */ margin-bottom: 0.5rem !important; /* Espacio bajo título */ } /* Texto del Título (Párrafo) - Limitar a 2 líneas */ .elementor-18744 .elementor-element-6a05f90 p.product_title { font-size: 0.9rem !important; /* Tamaño ajustado */ line-height: 1.5 !important; /* Altura línea */ height: 3em !important; /* ALTURA FIJA para 2 LÍNEAS */ max-height: 3em !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; /* Técnica line-clamp */ -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; margin: 0 !important; /* Resetear márgenes */ padding: 0 5px !important; /* Pequeño padding lateral */ box-sizing: border-box; /* Hereda color/fuente base */ font-weight: 500 !important; color: #001322!important; } /* Widget Precio del Producto */ .elementor-18744 .elementor-element.elementor-element-ce6a70d { /* Contenedor widget precio */ order: 3; /* Orden: Precio tercero */ flex-shrink: 0; /* No encoger */ height: 2rem; /* altura FIJA */ margin-top: 10px; } /* Texto del Precio */ .elementor-18744 .elementor-element-ce6a70d p.prod-price { line-height: 1.3 !important; margin: 0 !important; display: grid; } #loop-novedades .elementor-widget-woocommerce-product-price .prod-price, .elementor-18744 .elementor-element-ce6a70d .amount { font-size: 1.1em !important; /* Tamaño precio */ font-weight: 600 !important; color: #007CAD !important; /* Asegurar color azul */ /* Otros ajustes si es necesario */ } /* Ocultar IVA Incluido si no lo hiciste en Elementor */ .elementor-18744 .elementor-element-ce6a70d .woocommerce-price-suffix { display: none !important; } /* Widget Botón Añadir al Carrito */ .elementor-18744 .elementor-element.elementor-element-b149744 { /* Contenedor widget botón */ order: 4; /* Orden: Botón al final */ margin-top: auto !important; /* *** CLAVE: Empujar al fondo *** */ padding-top: 0.5rem; /* Espacio sobre el botón */ flex-shrink: 0; /* No encoger */ } /* Botón en sí */ .elementor-18744 .elementor-element-b149744 .button { /* Aplicar estilos del botón móvil que definimos antes */ height: 2.5rem !important; min-height: 2.5rem !important; font-size: 0.8rem !important; padding: 0 0.8em !important; min-width: auto !important; /* Quitar min-width grande */ max-width: 100%; width: auto; /* Ancho según contenido */ display: inline-flex !important; /* Asegurar inline-flex */ /* Hereda color, background, border-radius de estilos base */ } /* =========================================== */ /* BADGES PRODUCTOS ("AGOTADO" Y "OFERTA") */ /* =========================================== */ /* --- Base Posicionamiento Contenedor --- */ .prod-items .prod-i .prod-i-link, .prod-items article.prod-i.sale .prod-i-link { /* Asegurar ambos casos */ position: relative; display: block; } /* =========================================== */ /* BADGE "AGOTADO" (::after) */ /* =========================================== */ /* --- Estilo Base Badge "Agotado" --- */ .prod-items .prod-i.outofstock .prod-i-link::after { content: "Agotado"; display: inline-block; position: absolute; z-index: 10; top: 10px; /* Base Y */ right: 10px; /* Base X */ background-color: #283346 !important; color: #ffffff !important; border-radius: 50px !important; padding: 5px 15px !important; /* Base padding */ font-size: clamp(0.75rem, calc(0.75rem + 0.04242vw), 1.1rem) !important; /* Base font size */ font-weight: 500 !important; text-transform: uppercase !important; line-height: 1.4 !important; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); border: none; box-sizing: border-box; } /* --- Atenuar Imagen Agotado --- */ .prod-items .prod-i.outofstock .prod-i-link .prod-i-img img { opacity: 0.6 !important; transition: opacity 0.3s ease; } .prod-items .prod-i.outofstock .prod-i-link:hover .prod-i-img img { transform: none !important; } /* ========================================================= */ /* BADGE "OFERTA" (::before) */ /* ========================================================= */ /* --- Estilo Base Badge "Oferta" --- */ .prod-items article.prod-i.sale .prod-i-link::before { content: "¡Oferta!"; display: inline-block !important; position: absolute !important; z-index: 10 !important; top: 2px !important; /* Base Y */ left: 1px !important; /* Base X */ box-sizing: border-box; background: linear-gradient(145deg, #ff4b2b, #ff416c) !important; color: white !important; font-weight: 700 !important; padding: 5px 5px !important; /* Base padding */ box-shadow: 0 0 5px rgba(255, 105, 97, 0.4), 0 0 10px rgba(255, 105, 97, 0.4), 0 4px 8px rgba(0,0,0,0.15) !important; letter-spacing: 0.3px; /* font-size: 1.1rem !important; */ /* Duplicado abajo, usamos el 0.9rem */ text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.5) !important; outline: 1px solid white; font-size: clamp(0.7rem, calc(0.7rem + 0.04242vw), 1rem) !important; transform: rotate(-7deg) !important; border-radius:100% !important; /* Ajuste forma redondeada */ line-height: 3.236; text-align: center; } /* =========================================== */ /* AJUSTES RESPONSIVE BADGES */ /* =========================================== */ /* --- Ajustes para Móvil General (< 768px) --- */ @media (max-width: 768px) { /* -- Badge Oferta (::before) -- */ .prod-items article.prod-i.sale .prod-i-link::before { padding: 12px 10px !important; /* Padding móvil */ top: 1px !important; left: 1px !important; line-height: normal !important; /* Resetear para que se centre mejor */ } /* -- Badge Agotado (::after) -- */ .prod-items .prod-i.outofstock .prod-i-link::after { padding: 12px 10px !important; /* Padding reducido */ top: 8px !important; /* Acercar a esquina */ right: 8px !important; /* Acercar a esquina */ line-height: normal !important; /* Resetear para centrar mejor */ } /* -- Conflicto: Agotado + Oferta en Móvil -- */ .prod-items article.prod-i.on-sale.outofstock .prod-i-link::after { /* Agotado */ top: 8px !important; /* Mantenemos la Y del Agotado en 768px */ right: 8px !important; /* Mantenemos la X del Agotado en 768px */ left: auto !important; } } /* --- Ajustes para Móvil Muy Pequeño (< 375px) --- */ @media (max-width: 375px) { /* O el breakpoint que uses para Móvil S */ /* -- Badge Oferta (::before) -- */ .prod-items article.prod-i.sale .prod-i-link::before { padding: 8px 8px !important; /* Padding más reducido */ /* top: 1px !important; (mantenemos) */ /* left: 1px !important; (mantenemos) */ } /* -- Badge Agotado (::after) -- */ .prod-items .prod-i.outofstock .prod-i-link::after { padding: 8px 8px !important; /* Padding más reducido */ top: 5px !important; /* Acercar más a esquina */ right: 5px !important; /* Acercar más a esquina */ } /* -- Conflicto: Agotado + Oferta en Móvil S -- */ .prod-items article.prod-i.on-sale.outofstock .prod-i-link::after { /* Agotado */ top: 5px !important; /* Usamos la nueva Y del Agotado en 375px */ right: 5px !important; /* Usamos la nueva X del Agotado en 375px */ left: auto !important; } } /* ============================= ESPACIO DEBAJO DESCRIPCION CATEGORIA ============================= */ div.term-description { margin-bottom: 15px; } /* ================================================================= */ /* RESPONSIVE BARRA SUPERIOR TIENDA (.section-top) - SOLO MOVILES */ /* ================================================================= */ /* Aplicar SOLO hasta 650px de ancho */ @media (max-width: 650px) { .section-top { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 5px !important; border-bottom: 1px solid #eee; margin-bottom: 15px !important; } .section-top > *:not(:last-child) { margin-bottom: 10px !important; } /* Botón Categorías al 100% en móvil */ .section-top .section-menu-btn { width: 100% !important; text-align: center !important; margin-bottom: 0 !important; /* Controlado por :not(:last-child) */ order: -1; } /* Filas de Dropdowns (Vista, Ordenar, Mostrar) */ .section-top .section-view, .section-top .section-sort, .section-top form.products-per-page { width: 100% !important; display: flex !important; justify-content: space-between !important; /* O flex-start si funcionaba */ align-items: center !important; border-bottom: 1px solid #eee; padding-bottom: 8px !important; float: none !important; } /* Quitar borde y padding extra al último elemento (el form) */ .section-top form.products-per-page { border-bottom: none; padding-bottom: 0; margin-bottom: 0 !important; /* Asegurar sin margen inferior */ } /* Párrafos de Título ('Vista', 'Ordenar', 'Mostrar') */ .section-top .section-view > p:first-child, .section-top .section-sort > p:first-child, .section-top form.products-per-page > p:first-child { margin: 0; font-weight: 600; color: #333; font-size: 0.9em; flex-shrink: 0; padding-right: 10px; } /* Contenedor .dropdown-wrap */ .section-top .dropdown-wrap { position: relative; flex-grow: 1; text-align: right; } /* Título visible del dropdown (ej: 'Galería') */ .section-top .dropdown-title { margin: 0; padding: 5px 0px; /* ... otros estilos del dropdown title ... */ } /* Ocultar el select HTML original dentro del formulario */ .section-top form.products-per-page select.wppp-select { display: none !important; } } /* Fin de @media (max-width: 650px) */ /* =========================================== */ /* TÍTULO H1 RESPONSIVO (Tienda/Categorías) */ /* =========================================== */ @media (max-width: 767px) { .archive.woocommerce-page .maincont h1 > span, .archive.woocommerce-page h1.page-title, .archive.woocommerce-page .maincont h1, .woocommerce-products-header__title /* Otro selector común */ { font-size: 1.5rem !important; line-height: 1.3 !important; margin-bottom: 15px !important; } /* Asegurar que el SPAN dentro del H1 herede el tamaño */ .archive.woocommerce-page h1.page-title span, .archive.woocommerce-page .maincont h1 span, .woocommerce-products-header__title span { font-size: 1.5rem !important; } } /* ======================================================= */ /* TAMAÑOS RESPONSIVE TÍTULOS Y TEXTO (H1-H6) - MÓVIL */ /* (Aplicado SOLO DENTRO del área #content) - VERSIÓN FINAL */ /* ======================================================= */ @media (max-width: 767px) { /* --- Títulos H1 (Páginas Archivo - Dentro de #content) --- */ #content .archive.woocommerce-page h1.page-title, #content .archive.woocommerce-page .maincont h1, #content .woocommerce-products-header__title { font-size: 1.5rem !important; line-height: 1.3 !important; } #content .archive.woocommerce-page h1.page-title span, #content .archive.woocommerce-page .maincont h1 span, #content .woocommerce-products-header__title span { font-size: inherit !important; } /* --- Títulos H2-H6 de Elementor DENTRO de #content --- */ #content .elementor-widget-heading h2.elementor-heading-title { font-size: 1.4rem !important; line-height: 1.4 !important; margin-bottom: 10px !important; } #content .elementor-widget-heading h3.elementor-heading-title { font-size: 1.2rem !important; line-height: 1.4 !important; margin-bottom: 8px !important; } #content .elementor-widget-heading h4.elementor-heading-title { font-size: 1.1rem !important; line-height: 1.4 !important; margin-bottom: 6px !important; } #content .elementor-widget-heading h5.elementor-heading-title { font-size: 1.0rem !important; line-height: 1.4 !important; margin-bottom: 5px !important; } #content .elementor-widget-heading h6.elementor-heading-title { font-size: 0.9rem !important; line-height: 1.4 !important; margin-bottom: 5px !important; } /* --- Reset Específico para H6 en Top Bar del Header (FUERA de #content) --- */ .elementor-element-beaf500 h6.elementor-heading-title { font-size: 0.75rem !important; /* Ajusta si es necesario */ line-height: 1.2 !important; margin-bottom: 0 !important; font-weight: normal !important; text-transform: none !important; } /* --- Ajuste Texto Widgets "Editor de Texto" DENTRO de #content --- */ /* CORREGIDO: Añadido #content para limitar alcance */ #content .elementor-widget-text-editor, #content .elementor-widget-text-editor p, #content .elementor-widget-text-editor div { font-size: 0.95rem !important; /* Tamaño reducido para párrafos */ line-height: 1.6 !important; } } /* Fin @media */ /* =========================================== */ /* AJUSTES RESPONSIVE FOOTER ELEMENTOR (MÓVIL) */ /* =========================================== */ @media (max-width: 767px) { /* Breakpoint Móvil (ajusta si usas otro) */ /* --- Alineación General --- */ /* Intenta centrar el contenido de las columnas */ .elementor-section.elementor-element-56311461 .elementor-column .elementor-widget-wrap { align-items: center; /* Centra widgets verticalmente si la columna es flex */ text-align: center; /* Centra el texto dentro de los widgets */ } /* Forzar centrado en widgets específicos si lo anterior no basta */ .elementor-section-56311461 .elementor-widget-heading .elementor-heading-title, .elementor-section-56311461 .elementor-widget-text-editor, .elementor-section-56311461 .elementor-widget-image { text-align: center; } /* --- Reducción Tamaños de Fuente --- */ /* Títulos H2 (Síguenos, Conoce equipo, Forma pago) */ .elementor-element-5a986efb .elementor-heading-title, .elementor-element-6c875ae2 .elementor-heading-title, .elementor-element-69315e6 .elementor-heading-title { font-size: 1rem !important; /* Reducir tamaño */ margin-bottom: 10px !important; } /* Título H1 (EMMEX: Maquinaria...) */ .elementor-element-ebddf30 h1.small-title { font-size: 1.2rem !important; /* Reducir tamaño */ line-height: 1.2 !important; /* Ajustar interlínea */ margin-bottom: 15px !important; } /* Texto general (Horario, Dirección) */ .elementor-element-e8f3bc7 .elementor-widget-container p { font-size: 1rem !important; /* Reducir tamaño */ line-height: 1.6 !important; margin-bottom: 0.8em !important; } /* --- Iconos Sociales --- */ /* Centrar los iconos */ .elementor-element-d8a04f6 .elementor-social-icons-wrapper.elementor-grid { justify-content: center !important; /* Centra los iconos si es flex */ } /* Ajustar tamaño/espacio si es necesario */ .elementor-element-d8a04f6 .elementor-icon.elementor-social-icon { margin: 0 10px 0px 0px !important; } /* --- Imagen Equipo (Maldonado Sport) --- */ /* Centrar el contenedor del enlace */ .elementor-element-23da5a7 .elementor-widget-container a { display: inline-block; } .elementor-element-23da5a7 .elementor-image img { max-width: 200px !important; /* Limitar ancho máximo */ height: auto !important; display: block; margin-left: auto; /* Centrar */ margin-right: auto; } /* --- Espaciado Vertical entre Widgets --- */ /* Añadir margen inferior a la mayoría de widgets para separarlos */ .elementor-section-56311461 .elementor-widget:not(:last-child) { margin-bottom: 25px !important; } /* Quitar margen extra al spacer si no se necesita tanto */ .elementor-element-a752106 { /* Spacer */ margin-bottom: 10px !important; } /* Quitar margen extra al último widget de cada columna si lo añade */ .elementor-section-56311461 .elementor-column > .elementor-widget-wrap > .elementor-widget:last-child { margin-bottom: 0 !important; } } /* Fin @media */ /* === BOTON BACK TO TOP === */ .back-to-top-button { position: fixed; /* Fijo en la pantalla */ bottom: 100px; /* Distancia desde abajo */ right: 30px; /* Distancia desde la derecha */ z-index: 999; /* Encima de otros elementos */ /* Apariencia (Usa tus colores!) */ background-color: #007CAD; color: white !important; border: 2px solid #fff; border-radius: 50%; /* Circular */ width: 50px; /* Ancho */ height: 50px; /* Alto */ padding: 0; /* Centrar icono SVG */ display: flex; align-items: center; justify-content: center; /* Transiciones y estado inicial */ cursor: pointer; opacity: 0; /* Oculto inicialmente */ visibility: hidden; /* Oculto inicialmente */ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background-color 0.2s ease; text-decoration: none !important; /* Quitar subrayado */ user-select: none; /* Evitar selección */ } /* Clase que añadirá el JS para mostrarlo */ .back-to-top-button.visible { opacity: 0.8; /* Opacidad al mostrarse (puedes poner 1) */ visibility: visible; } /* Efecto Hover */ .back-to-top-button:hover { background-color: #005F85; opacity: 1; color: white !important; } /* Estilo del icono SVG */ .back-to-top-button svg { width: 24px; height: 24px; fill: currentColor; /* Hereda color (blanco) */ } /* Ocultar texto para lectores de pantalla */ .back-to-top-button .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* Aplicar estos estilos en pantallas hasta 767px de ancho */ @media (max-width: 767px) { .back-to-top-button { right: 20px !important; bottom: 100px !important; width: 45px !important; height: 45px !important; } /* Ajustar tamaño del icono si se reduce el botón */ .back-to-top-button svg { width: 20px !important; height: 20px !important; } } /* === Fin de la Media Query === */ /* =========================================== */ /* AJUSTE FOOTER EN PÁGINAS CON POCO CONTENIDO (Ej: Blog) */ /* =========================================== */ /* Aplica solo a la página del blog usando la clase del body */ body.blog #page { display: flex; /* Convertir #page en contenedor flex */ flex-direction: column; /* Apilar hijos (header, content, footer) verticalmente */ min-height: 100vh; /* Asegurar que #page ocupe AL MENOS el alto de la ventana */ } body.blog #content { flex-grow: 1; /* Hacer que el área de contenido principal crezca para llenar el espacio sobrante */ /* Resetear márgenes/paddings inferiores por si acaso */ /* margin-bottom: 0 !important; */ /* padding-bottom: 0 !important; */ } /* Opcional: Resetear margen inferior del último elemento DENTRO del contenido principal */ /* A veces, el último bloque de posts tiene un margen que crea espacio extra */ /* body.blog #main > *:last-child { margin-bottom: 0 !important; } */ /* =========================================== */ /* ESTILO TARJETA CARRUSEL MARCAS (#loop-marcas) */ /* =========================================== */ /* --- Contenedor Principal --- */ #loop-marcas .swiper-wrapper { display: flex !important; align-items: center !important; /* Centrar verticalmente las tarjetas */ margin-top: 15px; margin-bottom: 15px; } /* --- Cada Slide/Tarjeta --- */ #loop-marcas .swiper-slide { height: auto !important; /* Altura automática */ display: flex !important; justify-content: center; align-items: center; } #loop-marcas .e-loop-item { /* El contenedor de la plantilla dentro del slide */ display: flex !important; align-items: center; justify-content: center; background-color: #ffffff !important; /* Fondo blanco */ border: 1px solid #f0f0f0 !important; /* Borde muy suave */ border-radius: 12px !important; /* Redondeo */ box-shadow: 0 2px 5px rgba(0,0,0,0.06) !important; /* Sombra muy sutil */ box-sizing: border-box !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Efecto Hover */ #loop-marcas .e-loop-item:hover { transform: scale(0.95); /* Agrandar ligeramente */ box-shadow: 0 5px 5px rgba(0,0,0,0.03) !important; /* Sombra más marcada */ } #loop-marcas .e-loop-item img { /* O un selector más específico si la imagen está dentro de más divs */ max-width: 100%; /* Asegura que la imagen no sea más ancha que su contenedor */ height: auto; /* Mantiene la proporción de la imagen */ display: block; /* Evita espacio extra debajo de la imagen (opcional) */ /* Puede que necesites ajustar el padding/margin si la imagen queda muy pegada */ /* padding: 10px; */ border-radius: 12px!important; } /* ========================================================== */ /* ESTILO SCROLLBAR CARRITO OFFCANVAS (COLORES DE MARCA) */ /* ========================================================== */ /* Añadir padding a la derecha al contenedor de productos para dejar espacio a la barra de scroll */ .elementor-menu-cart__products { padding-right: 15px !important; /* Ajusta este valor si es necesario (un poco más que el ancho de tu scrollbar) */ box-sizing: border-box; /* Asegura que el padding se incluya correctamente */ } /* --- Selector Confirmado (Ajustar si es necesario) --- */ .elementor-menu-cart__products { /* --- Para Firefox --- */ scrollbar-width: thin; /* Barra delgada */ /* [Pulgar] [Track/Fondo] */ scrollbar-color: var(--e-global-color-84e56f9, #007CAD) var(--e-global-color-text, #283346); } /* --- Para Webkit (Chrome, Safari, Edge, Opera, etc.) --- */ .elementor-menu-cart__products::-webkit-scrollbar { width: 8px; /* Un poco más ancha (8px) para que el color se aprecie */ } .elementor-menu-cart__products::-webkit-scrollbar-track { background: var(--e-global-color-text, #283346); /* Color oscuro del fondo del panel */ border-radius: 4px; /* Bordes redondeados */ } .elementor-menu-cart__products::-webkit-scrollbar-thumb { background-color: var(--e-global-color-84e56f9, #007CAD); /* Azul principal de la marca */ border-radius: 4px; /* Bordes redondeados */ } .elementor-menu-cart__products::-webkit-scrollbar-thumb:hover { background-color: var(--e-global-color-b856fc3, #005F85); /* Azul hover de la marca */ } /* ========================================================== */ /* AJUSTE HOVER BOTÓN CERRAR (OFFCANVAS ELEMENTOR) - CORREGIDO */ /* ========================================================== */ /* Estilo base (asegurar transición para opacidad) */ .elementor-menu-cart__close-button::before, .elementor-menu-cart__close-button::after { background: var(--cart-close-button-color, #69727d); /* Color base */ transition: opacity 0.3s ease; /* Transición para opacidad */ } /* Estilo Hover (Bajar opacidad) */ .elementor-menu-cart__close-button:hover::before, .elementor-menu-cart__close-button:hover::after { opacity: 0.95 !important; /* Hacemos la X ligeramente transparente */ } /* --- AJUSTE RESPONSIVE FUENTE WIDGET ANIMATED HEADLINE (MÓVIL) --- */ @media (max-width: 767px) { /* Aplicar tamaño de fuente a ambas partes: fija y animada */ /* Usamos el ID del widget para alta especificidad */ .elementor-element-ab65d4f .elementor-headline-plain-text, .elementor-element-ab65d4f .elementor-headline-dynamic-text { /* Introduce aquí el tamaño de fuente deseado para móvil */ font-size: 1.4rem !important; /* line-height: 1.4em !important; */ } /* NUEVO: Forzar a una línea */ .elementor-element-ab65d4f .elementor-headline { white-space: nowrap; /* Evita el salto de línea */ font-size: 1.5rem; /* Opcional: Si se desbordara, podrías ocultar el exceso */ /* overflow: hidden; */ /* text-overflow: ellipsis; */ } /* Asegurar que los spans internos se comporten bien en línea */ .elementor-element-ab65d4f .elementor-headline-text-wrapper { display: inline-block; } /* Opcional: Si la parte animada necesita un tamaño diferente */ /* .elementor-element-ab65d4f .elementor-headline-dynamic-text { font-size: 20px !important; } */ } /* Opcional: Puedes añadir otro @media para pantallas aún más pequeñas */ /* @media (max-width: 480px) { .elementor-element-ab65d4f .elementor-headline-plain-text, .elementor-element-ab65d4f .elementor-headline-dynamic-text { font-size: 18px !important; } } */ /* ============================================================ */ /* CONSISTENCIA ELEMENTOR LOOP BLOG (CLASE REUTILIZABLE) */ /* ============================================================ */ /* --- Contenedor Principal del Widget --- */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .elementor-loop-container, /* Para Grid */ .emmex-post-grid .swiper-wrapper /* Para Carrusel */ { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: flex-start; gap: 20px !important; box-sizing: border-box; margin-bottom: 20px !important; margin-top: 20px !important; } /* --- Cada Item Individual (Slide o Grid Item) --- */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .e-loop-item, .emmex-post-grid .swiper-slide { /* --- CONTROL DE ANCHO (para 3 columnas con 20px gap) --- */ width: calc(33.333% - 13.33px) !important; /* CORREGIDO para 3 columnas */ flex-grow: 0 !important; flex-shrink: 0 !important; margin: 0 !important; /* Usamos GAP */ /* --- FIN CONTROL ANCHO --- */ height: auto !important; display: flex !important; flex-direction: column !important; border: 1px solid #eee !important; border-radius: 20px !important; overflow: hidden !important; background-color: #fff !important; box-sizing: border-box !important; } /* Ajuste para item dentro de slide de carrusel */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .swiper-slide > .e-loop-item { width: 100% !important; height: 100% !important; margin: 0 !important; flex-grow: 1; flex-shrink: 1; } /* Contenedor de widgets DENTRO del item */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .e-loop-item .elementor-widget-wrap { display: flex !important; flex-direction: column !important; flex-grow: 1; justify-content: flex-start; } /* --- Widget Imagen Destacada --- */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .e-loop-item .elementor-widget-theme-post-featured-image { order: 1; flex-shrink: 0; margin-bottom: 15px !important; line-height: 0; } .emmex-post-grid .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container, .emmex-post-grid .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container a { display: block; height: 180px !important; /* *** ALTURA FIJA IMAGEN - AJUSTA *** */ overflow: hidden; } .emmex-post-grid .e-loop-item .elementor-widget-theme-post-featured-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; /* CAMBIADO A CONTAIN (PREVIAMENTE ERA COVER?) */ object-position: center center !important; transition: transform 0.3s ease; background-color: #ffffff; /* Fondo blanco para 'contain' */ } .emmex-post-grid .e-loop-item .elementor-widget-theme-post-featured-image a:hover img { transform: scale(1.05); } /* --- Widget Título del Post --- */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .e-loop-item .elementor-widget-theme-post-title { order: 2; padding: 0 15px !important; margin-bottom: 15px !important; flex-grow: 0; flex-shrink: 0; } .emmex-post-grid .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title { font-size: 1rem !important; font-weight: 600 !important; line-height: 1.4 !important; color: #283346 !important; margin: 0 !important; height: 2.8em !important; max-height: 2.8em !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .emmex-post-grid .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title a { color: inherit !important; text-decoration: none !important; } .emmex-post-grid .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title a:hover { color: #007CAD !important; } /* ====================================================== */ /* RESPONSIVE ELEMENTOR LOOP BLOG (CLASE REUTILIZABLE) */ /* ====================================================== */ @media (max-width: 767px) { /* Contenedor Principal */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .elementor-loop-container, .emmex-post-grid .swiper-wrapper { gap: 25px !important; align-items: normal !important; } /* Cada Item Individual */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .e-loop-item, .emmex-post-grid .swiper-slide { width: 100% !important; flex-basis: auto !important; margin: 0 !important; } /* Imagen Destacada */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container, .emmex-post-grid .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container a { height: 160px !important; } /* Título del Post */ /* AHORA USAMOS LA CLASE .emmex-post-grid */ .emmex-post-grid .e-loop-item .elementor-widget-theme-post-title { padding: 0 10px !important; margin-bottom: 10px !important; } .emmex-post-grid .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title { font-size: 0.9rem !important; height: 2.8em !important; max-height: 2.8em !important; } } /* ==== RESTAURAR estilos de lista dentro de widgets de Editor de Texto ===== */ .elementor-widget-text-editor ul { list-style: disc !important; /* Viñeta redonda */ padding-left: 25px !important; /* Sangría (ajusta el valor) */ margin-left: 0 !important; /* O ajusta si es necesario */ margin-bottom: 1em !important; /* Espacio debajo de la lista */ } .elementor-widget-text-editor ol { list-style: decimal !important; /* Números */ padding-left: 25px !important; /* Sangría (ajusta el valor) */ margin-left: 0 !important; margin-bottom: 1em !important; } .elementor-widget-text-editor ul li, .elementor-widget-text-editor ol li { list-style-position: outside !important; /* Viñeta/número fuera del texto */ margin-bottom: 1.5em !important; /* Espacio entre items */ /* display: list-item !important; */ /* Solo si display fue modificado */ } /* Fuerza un margen inferior a los párrafos DENTRO del widget de contenido */ .elementor-widget-theme-post-content p { margin-bottom: 1.8em; } /* Asegúrate también de que tengan altura de línea normal si se viera afectada */ .elementor-widget-theme-post-content p { line-height: 1.8 !important; /* O tu valor de interlineado normal */ } /* Aumentar interlineado dentro de los elementos de lista en el contenido del post */ .elementor-widget-theme-post-content .wp-block-list li { line-height: 1.7; margin-bottom: 1.2em !important; } /* Asegurar que párrafos DENTRO de LI también hereden o tengan buen interlineado */ /* Puede no ser necesario si el estilo en LI es suficiente */ .elementor-widget-theme-post-content .wp-block-list li p { line-height: inherit; /* Hereda el 1.7 de LI */ /* O define uno específico si es necesario */ margin-bottom: 1.5em !important; } /* ===== CAJA FINAL ARTICULOS BLOG ===== */ /* Estilo para caja de artículos relacionados / TOC */ .caja-articulos-blog { background-color: #e7f5fc !important; /* Azul muy claro (Recomendado) */ /* background-color: #f8f9fa; */ /* Alternativa: Gris muy claro */ border: 1px solid #cae6f7; /* Borde azul pálido acorde */ padding: 20px; margin-bottom: 25px; border-radius: 12px; /* Redondeo suave */ } .caja-articulos-blog p:first-of-type { margin-top: 0; margin-bottom: 15px; font-weight: 600; font-size: 1.1em; color: #005F85; /* Azul oscuro para título */ } .caja-articulos-blog ul { margin-bottom: 0; padding-left: 20px; list-style: disc; /* Puedes cambiar a 'none' o 'decimal' */ } .caja-articulos-blog ul li { margin-bottom: 8px; } .caja-articulos-blog ul li a { text-decoration: none; color: #007CAD; /* Azul primario enlaces */ } .caja-articulos-blog ul li a:hover { text-decoration: underline; color: #005F85; /* Azul oscuro hover */ } .caja-articulos-blog ul li strong { color: #283346; /* Color de texto normal */ } /* ======================= */ /* ESTILOS CONSISTENTES BLOG (PÁGINA /blog/) - INTENTO #2 */ /* Mayor especificidad y !important*/ /* === */ /* --- Contenedor Rejilla Blog --- */ /* Añadimos #page y #content para máxima especificidad */ #page #content .blog-cont #blog-grid { display: flex !important; flex-wrap: wrap !important; gap: 25px !important; position: relative !important; /* Mantenemos relative, pero anulamos hijos absolutos */ height: auto !important; /* Dejar que el contenido determine la altura */ margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; /* Asegurar ancho completo */ } /* --- Tarjeta Individual Blog (article.blog-grid-i) --- */ #page #content .blog-cont #blog-grid article.blog-grid-i { /* 1. ANULAR ESTILOS INLINE DEL TEMA/JS (CRUCIAL) */ position: static !important; /* ¡La clave para anular position: absolute! */ left: auto !important; top: auto !important; width: calc(33.333% - (25px * 2 / 3)) !important; /* 3 cols con gap 25px */ float: none !important; /* Anular float si existe */ margin: 0 !important; /* Espacio gestionado por 'gap' */ padding: 0 !important; /* Padding gestionado internamente */ /* 2. Layout y Estilo de la Tarjeta */ box-sizing: border-box !important; display: flex !important; flex-direction: column !important; height: auto !important; min-height: 400px; /* Altura mínima opcional */ background-color: #fff !important; border: 1px solid #eee !important; border-radius: 12px !important; overflow: hidden !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Contenedor Interno .blog-i */ #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i { display: flex !important; flex-direction: column !important; flex-grow: 1; height: 100%; } /* --- Imagen Destacada --- */ #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i a.blog-img { display: block; order: 1; height: 200px !important; /* ALTURA FIJA - AJUSTA SI QUIERES */ overflow: hidden; line-height: 0; background-color: #ffffff; } #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i a.blog-img img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center center !important; transition: transform 0.3s ease; } #page #content .blog-cont #blog-grid article.blog-grid-i:hover a.blog-img img { transform: scale(1.05); } /* --- Información Meta (Categoría y Fecha) --- */ #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i p.blog-info { order: 2; font-size: 1.5rem !important; color: #777 !important; padding: 15px 15px 0 15px !important; margin: 0 !important; line-height: 1.5; } #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i p.blog-info a { color: #007CAD; text-decoration: none; margin-right: 10px; } #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i p.blog-info a:hover { text-decoration: underline; } /* --- Título del Post (H3) --- */ #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i h3 { order: 3; font-size: 1.1rem !important; font-weight: 600 !important; line-height: 1.4 !important; color: #283346 !important; margin: 8px 0 10px 0 !important; padding: 0 15px !important; height: 4.2em !important; /* 2 líneas */ max-height: 4.2em !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; } #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i h3 a { color: inherit !important; text-decoration: none !important; transition: color 0.2s ease; } #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i h3 a:hover { color: #007CAD !important; } /* --- Extracto del Post (Párrafo) --- */ #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i p:not(.blog-info) { order: 4; font-size: 0.9rem !important; line-height: 1.6 !important; color: #555 !important; padding: 0 15px 15px 15px !important; margin: 0 0 15px 0 !important; /* Añadido margen inferior */ flex-grow: 1; } /* --- Enlace "Leer más" --- */ #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i p:not(.blog-info) a { font-weight: 600; color: #007CAD; text-decoration: underline; display: inline; } #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i p:not(.blog-info) a:hover { text-decoration: none; color: #005F85; } /* --- Responsive --- */ @media (max-width: 991px) { #page #content .blog-cont #blog-grid article.blog-grid-i { width: calc(50% - (25px / 2)) !important; /* 2 columnas */ min-height: 380px; } } @media (max-width: 650px) { #page #content .blog-cont #blog-grid { gap: 20px !important; } #page #content .blog-cont #blog-grid article.blog-grid-i { width: 100% !important; /* 1 columna */ min-height: auto; } /* ... (resto de ajustes responsive con #page #content ... ) ... */ #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i h3 { font-size: 1rem !important; height: 2.8em !important; max-height: 2.8em !important; padding: 0 10px !important; margin: 5px 0 8px 0 !important; } #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i p.blog-info { padding: 10px 10px 0 10px !important; font-size: 0.75rem !important; line-height: 4 !important; } #page #content .blog-cont #blog-grid article.blog-grid-i .blog-i p:not(.blog-info) { font-size: 0.85rem !important; padding: 0 10px 10px 10px !important; margin-bottom: 10px !important; } } /* =========================================== */ /* === FIX ESPACIADO SHARE BUTTONS (#compartir-social-blog) === */ /* =========================================== */ /* Contenedor principal (asegurar que permita wrap) */ #compartir-social-blog .elementor-grid { display: flex !important; /* Usar flex es más moderno que inline-block */ flex-wrap: wrap !important; justify-content: var(--alignment, center) !important; /* Heredar o forzar alineación (center, left, right) */ /* Quitamos word-spacing si usamos flex/grid */ word-spacing: normal !important; /* Quitamos gap por si usamos margen */ gap: 0 !important; margin-bottom: 0 !important; /* Resetear margen inferior del contenedor */ } /* Items individuales */ #compartir-social-blog .elementor-grid-item { display: inline-block !important; vertical-align: top; /* Alinear verticalmente */ /* Aplicar margen derecho a todos EXCEPTO al último de la fila */ /* Ajusta '1rem' al espacio deseado (equivale a 16px por defecto) */ margin-right: var(--grid-column-gap, 0.5rem) !important; margin-bottom: var(--grid-row-gap, 16px) !important; /* Espacio vertical */ padding: 0 !important; /* Resetear padding */ } /* === ESTILOS NOTIFICACIONES WOOCOMMERCE === */ /* Estilo base para TODOS los avisos (mensaje, error, info) */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background-color: #e7f5fc !important; /* Fondo azul muy claro */ color: #005F85 !important; /* Texto azul oscuro */ border: 1px solid #bde0f5 !important; /* Borde azul claro */ border-left-width: 5px !important; /* Borde izquierdo más grueso */ padding: 1em 1.5em !important; /* Padding interno */ margin: 0 0 0 0 !important; /* Margen inferior */ list-style: none outside !important; /* Quitar viñetas si es lista */ width: auto !important; /* Ancho automático */ clear: both; /* Limpiar floats */ position: relative; /* Para posibles pseudo-elementos */ box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Sombra sutil */ display: flex; /* Usar flex para alinear icono y texto */ align-items: center; /* Centrar verticalmente */ justify-content: center !important; /* Centrado horizontal */ } /* Colores específicos para cada tipo de aviso */ .woocommerce-message { border-left-color: #007CAD !important; /* Borde izquierdo AZUL (Éxito/Mensaje) */ } .woocommerce-info { border-left-color: #ffba4f !important; /* Borde izquierdo AMARILLO (Info) */ background-color: #fff8e1 !important; color: #856404 !important; border-color: #ffecb3 !important; } .woocommerce-error { border-left-color: #dc3545 !important; /* Borde izquierdo ROJO (Error) */ background-color: #f8d7da !important; color: #721c24 !important; border-color: #f5c6cb !important; } /* Icono antes del texto (Font Awesome) */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; /* Solid */ font-size: 1.2em; margin-right: 1em; /* Espacio entre icono y texto */ flex-shrink: 0; /* Que el icono no se encoja */ } /* Icono específico para cada tipo */ .woocommerce-message::before { content: '\f058'; /* fas fa-check-circle (Éxito) */ color: #007CAD !important; } .woocommerce-info::before { content: '\f05a'; /* fas fa-info-circle (Info) */ color: #ffba4f !important; } .woocommerce-error::before { content: '\f071'; /* fas fa-exclamation-triangle (Error) */ color: #dc3545 !important; } /* Caso especial: lista de errores (UL dentro de .woocommerce-error) */ .woocommerce-error li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; color: inherit !important; /* Heredar color rojo */ } .woocommerce-error ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ================================================== */ /* ESTILOS PESTAÑAS FICHA DE PRODUCTO (Alt: Border) */ /* ================================================== */ /* Contenedor UL */ body.single-product ul.prod-tabs { list-style: none !important; padding: 0 !important; /* Sin padding */ margin: 0 0 15px 0 !important; /* Margen inferior antes del contenido */ display: flex !important; flex-wrap: wrap; gap: 10px 20px; /* Espacio vertical y horizontal entre pestañas */ } /* Cada Pestaña LI */ body.single-product ul.prod-tabs li { margin: 0 !important; padding: 0 !important; list-style: none !important; border: none !important; /* Sin borde en el LI */ background: none !important; /* Sin fondo en el LI */ position: relative; } /* Enlace A dentro de LI */ body.single-product ul.prod-tabs li a { display: block !important; padding: 5px 5px !important; /* Padding vertical, mínimo horizontal */ margin-bottom: -1px; /* Solapar línea inferior del UL */ font-weight: 500 !important; /* Peso normal inactivas */ font-size: 1rem !important; color: #555 !important; /* Gris oscuro para inactivas */ text-decoration: none !important; border: none !important; border-bottom: 3px solid transparent !important; /* Borde inferior transparente como base */ transition: color 0.2s ease, border-color 0.2s ease; text-align: center; } /* Enlace/Pestaña ACTIVA A */ body.single-product ul.prod-tabs li.active a { color: #007CAD !important; /* Azul primario */ font-weight: 700 !important; /* Negrita */ border-bottom-color: #007CAD !important; /* Borde inferior azul */ cursor: default; } /* Hover en Enlace/Pestaña INACTIVA A */ body.single-product ul.prod-tabs li:not(.active) a:hover { color: #283346 !important; /* Texto oscuro en hover */ border-bottom-color: #bdc3c7 !important; /* Borde gris claro en hover */ } /* Contenedor del contenido */ body.single-product .prod-tab-cont { border: none; padding: 20px 0 0 0; /* Solo padding superior */ background-color: transparent; clear: both; margin-top: 0; } /* --- Responsive Móvil (Estilo Acordeón) --- */ /* (Mantenemos el mismo estilo de acordeón que antes) */ @media (max-width: 767px) { body.single-product ul.prod-tabs { display: none !important; } .prod-tabs-wrap { padding: 5px 5px; } .prod-tabs-wrap { box-shadow: none; background: transparent; } body.single-product p.prod-tab-mob { display: block !important; background-color: #007CAD; border: 1px solid #ddd; padding: 12px 15px; margin: 0 0 5px 0; font-weight: 600 !important; cursor: pointer; border-radius: 8px; position: relative; color: #ffffff; } body.single-product p.prod-tab-mob::after { content: '+'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-weight: bold; font-size: 1.2em; } body.single-product p.prod-tab-mob.active { background-color: #001322; opacity: 0.9; } body.single-product p.prod-tab-mob.active::after { content: '-'; } body.single-product .prod-tab-cont { border: none; padding: 0; background-color: transparent; border-radius: 0; margin-top: 5px; } body.single-product .prod-tab { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px; background-color: #ffffff; } } /* =========================================== */ /* VÍDEOS RESPONSIVE (Ficha Producto Tabs) */ /* (Método aspect-ratio) */ /* =========================================== */ /* Apuntar a iframes dentro del contenido de las pestañas */ body.single-product .prod-tab-cont iframe, body.single-product .prod-tab iframe { /* Cubrir posibles contenedores */ display: block; /* Importante */ width: 100% !important; /* Ocupar todo el ancho */ max-width: 100% !important; /* Evitar desbordamiento */ height: auto !important; /* Altura automática basada en ratio */ aspect-ratio: 16 / 9 !important; /* <<-- RATIO 16:9 (Cambia a 4/3 si tus vídeos son 4:3) */ margin: 10px auto 20px auto !important; /* Margen superior/inferior y centrado */ border: none; /* Sin borde */ } /* Opcional: Limitar el ancho máximo en escritorio si se ven demasiado grandes */ @media (min-width: 768px) { body.single-product .prod-tab-cont iframe, body.single-product .prod-tab iframe { max-width: 720px; /* <<-- AJUSTA Ancho máximo en escritorio */ } } /* Ocultar el widget 'Precio del producto' standalone SOLO en páginas de producto variable */ div.product-type-variable .elementor-element-40c6bbe { display: none !important; } /* === ESTILOS SELECTOR PROD.VARIABLE (Chosen) === */ .chosen-single { display: flex !important; align-items: center; justify-content: flex-start; line-height: normal !important; padding: 10px 20px !important; background-color: #007CAD !important; color: #fff !important; border: none !important; border-radius: 50px !important; font-size: 14px !important; font-weight: bold !important; text-align: center !important; cursor: pointer !important; height: 2.5rem !important; width: auto !important; min-width: fit-content !important; } .chosen-single span { display: inline-block !important; } .chosen-single div { display: inline-block !important; vertical-align: middle !important; } .chosen-single div b::before { content: '▾' !important; font-size: 14px !important; color: inherit !important; } .chosen-container { width: auto !important; max-width: 100% !important; background-color: #fff !important; border: 1px solid #ccc !important; border-radius: 5px !important; } .chosen-container .chosen-single span { margin-right: 10px !important; } .chosen-container .chosen-drop { position: absolute; z-index: 1000; margin-top: 2px; padding: 5px 0; background-color: #fff !important; border: 1px solid #ccc !important; border-radius: 5px !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); width: auto; min-width: 100%; max-width: 300px; box-sizing: border-box; } .chosen-container .chosen-results li.active-result { background-color: transparent !important; color: #333 !important; } .chosen-container .chosen-results li.result-selected { background-color: #007CAD !important; color: #fff !important; } .chosen-container { border: none !important; box-shadow: none !important; background-color: transparent !important; } .chosen-container .chosen-results li:hover { background-color: #007CAD !important; color: #fff !important; } /* === ESTILOS BOTON CLEAR/LIMPIAR ===== */ #prod-showdesc, /* Este ID parece personalizado, ¿aún se usa? */ body .reset_variations { background-color: #f5f5f5 !important; color: #333 !important; padding: 8px 15px !important; border-radius: 50px !important; font-size: 14px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #ddd !important; height: 2.5rem !important; min-width: fit-content; vertical-align: top !important; } #prod-showdesc:hover, body .reset_variations:hover { background-color: #e0e0e0 !important; color: #333 !important; } /* === OTROS ESTILOS (Layout Variaciones, Mensaje Envío) === */ .prod-var-wrap .value { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; } .prod-info { margin-bottom: 10px; } div.prod-info > div.prod-col-wrap.prod-var-wrap > p, div.prod-info > div.prod-qnt-wrap > p:nth-child(1) { margin-bottom: 10px; } .mensaje-tiempo-envio { display: block; margin-top: 5px; padding: 0px; border-radius: 5px; font-size: 1.2rem; } /* ORDEN EN FICHA DE PRODUCTO VARIABLE */ /* Aplica estos estilos SOLAMENTE en páginas de producto (body.single-product) y DENTRO del widget de Elementor de Añadir al Carrito */ /* 1. Convierte el contenedor .prod-info en flex vertical */ body.single-product .elementor-widget-woocommerce-product-add-to-cart .prod-info { display: flex; flex-direction: column; /* gap: 15px; */ /* Opcional: Espacio entre elementos */ } /* 2. Asigna el orden dentro de ese contexto específico */ /* Precio / Tu selección - Primero */ body.single-product .elementor-widget-woocommerce-product-add-to-cart .prod-info > .prod-price-wrap { order: 1; } /* Opciones / Talla - Segundo */ body.single-product .elementor-widget-woocommerce-product-add-to-cart .prod-info > .prod-col-wrap { order: 2; } /* Cantidad - Tercero */ body.single-product .elementor-widget-woocommerce-product-add-to-cart .prod-info > .prod-qnt-wrap { order: 3; } /* === FIBOSEARCH EN PAGINA 404 (Estilo igual al Header) === */ /* === Contenedor de búsqueda (404) ===*/ body.error404 .dgwt-wcas-search-wrapp { display: flex !important; align-items: center !important; position: relative !important; /* Puedes añadir aquí más estilos si el contenedor necesita ajustes */ /* por ejemplo, un margin o max-width si es necesario en la 404 */ max-width: 600px; /* Ejemplo: Limitar el ancho en la 404 */ margin: 20px auto; /* Ejemplo: Centrar y añadir espacio vertical */ } /* === Input de búsqueda (404) === */ body.error404 .dgwt-wcas-search-input { background-color: #001322 !important; color: #ffffff !important; padding: 12px 20px 12px 50px !important; /* Ajusta padding izquierdo para icono lupa si es necesario */ border: 2.5px solid #0091cb !important; border-radius: 50px !important; font-size: 1rem !important; width: 100% !important; /* Ancho completo dentro de su contenedor */ position: relative !important; z-index: 1 !important; box-sizing: border-box !important; /* Asegurar que padding/border se incluyen en el width */ } /* Placeholder del input (404) */ body.error404 .dgwt-wcas-search-input::placeholder { color: #ffffff !important; opacity: 0.7; /* La transición ya debería aplicarse por los estilos generales del plugin o del header */ } body.error404 .dgwt-wcas-search-input:focus::placeholder { opacity: 0.9 !important; } /* Ajuste para el icono de la lupa DENTRO del input (si FiboSearch lo coloca ahí) */ body.error404 .dgwt-wcas-sf-wrapp svg.dgwt-wcas-ico-magnifier { position: absolute; left: 15px; /* Ajusta según el padding que necesites */ top: 50%; transform: translateY(-50%); width: 20px; /* Tamaño del icono */ height: 20px; fill: #0091cb; /* Color del icono */ z-index: 2; /* Por encima del input */ } /* Asegurarse de que el wrapper interno no tenga bordes (ya estaba en tu CSS header) */ body.error404 .dgwt-wcas-sf-wrapp { border: none !important; margin: 0 !important; /* Añadir position relative para que el icono SVG se posicione correctamente */ position: relative; } /* === FIN ESTILOS FIBOSEARCH 404 === */ /* ESTILOS PAGINA DE MARCA */ /* Estilos base compartidos */ .cabecera-marca-estilo { background-color: #ffffff; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); margin-bottom: 15px; overflow: hidden; border: 1px solid #eaeaea; } .cabecera-marca-estilo .e-con-inner { padding: 1rem; /* Padding base, puede ser ajustado por media query */ display: flex; align-items: center; /* Alineación vertical base */ gap: 1rem; /* Espacio base entre elementos */ } /* Estilo para el logo (dentro del shortcode) */ .cabecera-marca-estilo .brand-archive-logo-widget { display: block; /* Para asegurar que ocupa su espacio correctamente */ height: auto; object-fit: contain; } /* Estilo para el título */ .cabecera-marca-estilo .elementor-heading-title { font-weight: 600; color: #333; margin: 0; } /* Estilo para la descripción (contenedor) */ .cabecera-marca-estilo .term-description p { color: #555; line-height: 1.6; margin: 0 0 0.75rem 0; /* Margen inferior antes del botón */ } /* Estilo para el botón "Leer más" */ .cabecera-marca-estilo .read-more-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: 50px; box-sizing: border-box; height: 2.2rem; min-width: 100px; padding: 0 1.2em; font-weight: 600; text-transform: uppercase; text-decoration: none; background-color: #f5f5f5; color: #007CAD; border: 1px solid #007CAD; transition: all 0.2s ease; /* margin-top: 1rem; Se controlará por el p o el gap general */ } .cabecera-marca-estilo .read-more-btn:hover { background-color: #007CAD; color: #fff; } /* ========================================================================== ESTILOS PARA MÓVIL Y TABLET PEQUEÑA (hasta 767px) ========================================================================== */ @media (max-width: 767px) { .cabecera-marca-estilo { border-radius: 6px; margin-bottom: 5px; } .cabecera-marca-estilo .e-con-inner { flex-wrap: wrap; /* Permite que los elementos se envuelvan */ align-items: center; /* Alinea verticalmente el logo y el título si están en la misma línea */ gap: 0rem; /* Espacio entre filas y entre logo/título */ } /* Logo */ .cabecera-marca-estilo .elementor-element-0b486f0 { width: auto; /* Permite que el logo tome su tamaño natural */ flex-shrink: 0; /* Evita que el logo se encoja */ } .cabecera-marca-estilo .brand-archive-logo-widget { max-width: 80px; margin-left: 1em; } /* Título */ .cabecera-marca-estilo .elementor-element-894e028 { flex-grow: 1; /* El título toma el espacio restante al lado del logo */ min-width: 150px; /* Evita que el título se comprima demasiado y cause un salto feo */ } .cabecera-marca-estilo .elementor-heading-title { font-size: 1.375rem; /* ~22px */ margin-left: 1em; } /* Contenedor de descripción y botón */ .cabecera-marca-estilo .elementor-element-4e9c31b { width: 100%; /* Ocupa toda la línea, forzando a estar debajo de logo/título */ flex-basis: 100%; /* Importante para el wrap */ /* margin-top: 0.5rem; El gap del contenedor padre (.e-con-inner) ya debería dar espacio */ } .cabecera-marca-estilo .term-description p { font-size: 0.875rem; /* ~14px */ line-height: 1.5; } .cabecera-marca-estilo .read-more-btn { height: 2.3rem; /* Podrías usar !important si Elementor lo sobreescribe mucho */ min-width: 110px; font-size: 0.75rem; /* margin-top: 0.8rem; Controlado por el margen inferior del párrafo o el gap */ } /* Ajustes para móviles muy pequeños */ @media (max-width: 420px) { /* Ajustado el breakpoint para ser más específico */ .cabecera-marca-estilo .e-con-inner { padding: 0.75rem; gap: 0.6rem; /* Considera apilar logo y título si no caben bien */ /* flex-direction: column; */ /* align-items: flex-start; */ } /* Si decides apilar logo y título: */ /* .cabecera-marca-estilo .elementor-element-0b486f0, .cabecera-marca-estilo .elementor-element-894e028 { width: 100%; flex-grow: 0; } */ .cabecera-marca-estilo .brand-archive-logo-widget { max-width: 60px; } .cabecera-marca-estilo .elementor-heading-title { font-size: 1.25rem; /* ~20px, un poco más grande que antes */ } .cabecera-marca-estilo .term-description p { font-size: 0.8125rem; /* ~13px */ } .cabecera-marca-estilo .read-more-btn { height: 2.1rem; font-size: 0.7rem; padding: 0 1em; min-width: 100px; } } } /* ========================================================================== ESTILOS PARA TABLET (Paisaje) Y ESCRITORIO (a partir de 768px) ========================================================================== */ @media (min-width: 768px) { .cabecera-marca-estilo .e-con-inner { flex-wrap: nowrap; /* Asegura que los 3 elementos principales estén en una línea */ align-items: flex-start; /* Alinea los elementos al inicio de su eje transversal (arriba) */ /* O usa 'center' si prefieres alineación vertical al centro */ padding: 1.5rem; /* Un poco más de padding para pantallas grandes */ gap: 1.5rem; /* Espacio entre logo, título y descripción */ } /* Logo - Widget Shortcode */ .cabecera-marca-estilo .elementor-element-0b486f0 { flex: 0 0 auto; /* No crece, no se encoge, su base es su contenido */ width: 140px; /* Ancho fijo para el contenedor del logo */ /* margin-right: 0; /* No necesario por 'gap' */ } .cabecera-marca-estilo .brand-archive-logo-widget { max-width: 100%; /* El logo ocupa el 100% de su contenedor .elementor-element-0b486f0 */ } /* Título - Widget Archive Title */ .cabecera-marca-estilo .elementor-element-894e028 { flex: 0 1 auto; /* No crece, puede encogerse, su base es su contenido */ /* Opcional: si quieres que el título ocupe más espacio si está disponible antes que la descripción: */ /* flex: 1 1 auto; */ /* margin-left: 0; No necesario por 'gap' */ } .cabecera-marca-estilo .elementor-heading-title { font-size: 2rem; /* Tamaño original para escritorio */ } /* Descripción y Botón - Widget Archive Description */ .cabecera-marca-estilo .elementor-element-4e9c31b { flex: 1 1 50%; /* Crece, puede encogerse, y su base ideal es el 50% del espacio restante (ajustar) */ /* margin-left: 0; No necesario por 'gap' */ } .cabecera-marca-estilo .term-description p { font-size: 1rem; /* ~16px */ margin-top: 0; /* El título y la descripción deberían alinearse bien gracias a align-items: flex-start o center */ } .cabecera-marca-estilo .read-more-btn { /* Los estilos base del botón deberían ser suficientes, ajusta si es necesario para escritorio */ /* margin-top: 1rem; /* Si el párrafo no tiene margen inferior y quieres espacio */ } } /* -------- NUMERACIÓN ESPECÍFICA PÁGINA DE MARCA (tax-product_brand) --------- */ /* Aplicando los mismos estilos de la paginación general de productos, */ /* Contenedor de la paginación */ body.tax-product_brand ul.page-numbers { /* Selector específico para marca */ display: flex; justify-content: center; list-style: none; padding: 0; margin: 20px 0; /* Original: 20px 0 */ } /* Espaciado entre elementos de la paginación */ body.tax-product_brand ul.page-numbers > li { /* Selector específico para marca */ margin: 0 5px; /* Original: 0 5px */ } /* Estilos comunes para enlaces y span (estado actual) */ body.tax-product_brand ul.page-numbers > li a, body.tax-product_brand ul.page-numbers > li span.page-numbers.current { /* Selector específico para marca y clase .current para el span */ display: inline-block; padding: 8px 12px; /* Original: 8px 12px */ font-size: 16px; /* Original: 16px */ color: #007CAD; /* Original: #007CAD */ border: 1px solid #007CAD; /* Original: 1px solid #007CAD */ border-radius: 4px; /* Original: 4px */ text-decoration: none; transition: background-color 0.3s, color 0.3s; /* Original: transition */ /* line-height: 1.2; (Añadido anteriormente por mí, puedes quitarlo si no estaba en el original) */ } /* Estado hover para enlaces */ body.tax-product_brand ul.page-numbers > li a:hover { /* Selector específico para marca */ background-color: #007CAD; /* Original: #007CAD */ color: #ffffff; /* Original: #ffffff */ } /* Estado activo: página actual */ body.tax-product_brand ul.page-numbers > li span.page-numbers.current { /* Selector específico para marca y clase .current */ background-color: #007CAD; /* Original: #007CAD */ color: #ffffff; /* Original: #ffffff */ /* border-color: #007CAD; (Añadido anteriormente por mí, puedes quitarlo si no estaba y depende solo del background) */ /* font-weight: 600; (Añadido anteriormente por mí, puedes quitarlo si no estaba) */ } /* === Paginación en Móviles (Revisión para Marca - aplicando estilos originales de móvil) === */ @media (max-width: 767px) { body.tax-product_brand ul.page-numbers { /* Selector específico para marca */ margin: 20px 0 15px 0 !important; /* Original móvil: 20px 0 15px 0 !important */ padding: 0 5px !important; /* Original móvil: 0 5px !important */ flex-wrap: wrap; /* Original móvil: flex-wrap: wrap */ justify-content: center; /* Original móvil: justify-content: center */ } body.tax-product_brand ul.page-numbers > li { /* Selector específico para marca */ margin: 3px 3px !important; /* Original móvil: 3px 3px !important */ } body.tax-product_brand ul.page-numbers > li a, body.tax-product_brand ul.page-numbers > li span.page-numbers.current { /* Selector específico para marca y clase .current */ padding: 5px 9px !important; /* Original móvil: 5px 9px !important */ font-size: 13px !important; /* Original móvil: 13px !important */ } } /* ---- FIN PAGINACIÓN ESPECÍFICA PÁGINA DE MARCA ---- */ /* MENSAJE SIN EXISTENCIA EN PRODUCTO VARIABLE */ .woocommerce div.product p.stock { margin-bottom: 20px; margin-top: 20px; } /* SECCION FICHA PRODUCTO MENSAJE ENVIO + PAGO SEGURO */ .elementor-18204 .elementor-element.elementor-element-48f1b26:not(.elementor-motion-effects-element-type-background), .elementor-18204 .elementor-element.elementor-element-48f1b26 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: var(--e-global-color-4b443c5); border-radius: 8px; border: 1px solid #eee; } /* --- Estilos para WPC Product Bundles --- */ /* Contenedor principal del bundle */ .elementor-product-woosb .woosb-wrap { margin-bottom: 10px; /* Espacio debajo de la lista */ margin-top: 0px; /* Espacio encima de la lista */ border: 1px solid #eee; /* Borde general */ border-radius: 8px; /* Bordes redondeados (solo derecho/inferior) */ padding: 15px; /* Relleno interior aumentado para aire */ background-color: #f9f9f9; /* Fondo ligero */ } /* Estilo para cada producto dentro del bundle */ .woosb-wrap .woosb-products .woosb-item-product { display: flex; /* Alinea imagen, título y precio horizontalmente */ align-items: center; /* Centra verticalmente los elementos */ padding-top: 5px; /* Espaciado superior */ margin-top: 10px; /* Margen superior */ border-top: none; border-bottom: none; } /* Quita el borde superior y márgenes/paddings del PRIMER elemento */ .woosb-wrap .woosb-products .woosb-item-product:first-child { border-top: none; margin-top: 0; padding-top: 0; } /* Miniatura del producto en el bundle (Oculta según tu CSS) */ .woosb-item-product .woosb-thumb { flex: 0 0 50px; margin-right: 10px; display: none; /* Mantenemos tu preferencia de ocultarla */ } /* Imagen dentro de la miniatura (si se mostrara) */ .woosb-item-product .woosb-thumb img { max-width: 100%; height: auto; border-radius: 3px; } .woosb-item-product .woosb-title .woosb-name { font-size: 1rem; font-weight: normal; } .woosb-item-product .woosb-title .woosb-name a { color: #333; text-decoration: none; } .woosb-item-product .woosb-title .woosb-name a:hover { color: #007CAD; } /* Precio del producto en el bundle */ .woosb-item-product .woosb-price { flex: 0 0 100px; /* Ancho fijo para el precio */ text-align: right; /* Alinea el precio a la derecha */ font-size: 1.2rem; /* Tamaño del precio individual */ } /* Ocultar el texto "IVA Incluido" (o similar) de los precios individuales si es necesario */ div.woosb-price > div.woosb-price-ori > small.woocommerce-price-suffix { display: none !important; /* Oculta el sufijo del precio individual */ } /* Estilo del Precio Principal del Bundle */ .single-product.postid-24948 .elementor-element-40c6bbe .prod-price { /* font-size: 1.8rem; */ /* Comentamos o eliminamos la línea original */ font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); /* Ajuste responsivo con clamp() */ color: #ff0000; /* Color rojo */ font-weight: 600; /* Peso de fuente */ margin-bottom: 10px; /* Espacio debajo del precio principal */ } /* --- AÑADIR ANTES DEL PRECIO PRINCIPAL --- */ .single-product.postid-24948 .elementor-element-40c6bbe .prod-price::before { content: " KIT completo:"; font-weight: 600; font-size: clamp(1.1rem, 1rem + 1vw, 1.5rem); color: #007CAD; padding-right: 5px; } /* Ajustes generales de margen (si son necesarios) */ .woosb-wrap .woosb-text, .woosb-wrap .woosb-products, .woosb-bundles .woosb-text, .woosb-bundles .woosb-products { margin: 0; } .woosb-products { border-width: 0px !important; padding: 5px; } /* --- Restaurar Estilos de Lista (Bullets) en Descripción Corta --- */ /* Selecciona la lista UL dentro del widget de descripción corta */ .elementor-widget-woocommerce-product-short-description .elementor-widget-container ul { list-style: disc !important; list-style-position: outside-shape !important; padding-left: 11px !important; margin-left: 0px !important; font-size: clamp(0.7rem, 0.9rem + 1vw, 1rem) !important; } /* Selecciona cada elemento LI dentro de esa lista */ .elementor-widget-woocommerce-product-short-description .elementor-widget-container li { display: list-item !important; /* Asegura que se comporte como un elemento de lista */ margin-bottom: 0.4em; /* Espacio vertical entre cada punto de la lista. Ajusta si es necesario */ padding-left: 0px; /* Espacio pequeño entre la viñeta y el texto, si está muy pegado */ } /* Opcional: Ocultar los li vacíos */ .elementor-widget-woocommerce-product-short-description .elementor-widget-container li:empty { display: none !important; /* Oculta los elementos de lista que no tienen contenido */ } /* =========================================== */ /* ESTILOS FAQ (PÁGINA PREGUNTAS FRECUENTES) */ /* =========================================== */ /* --- Títulos de Sección H2 (ej. "Sobre EMMEX...", "Envíos") --- */ /* Usar un ID específico para la página FAQ si es posible, o la clase del contenedor principal de la página */ .page-id-25045 .elementor-widget-heading h2.elementor-heading-title { /* Asumiendo ID de página 25045 */ font-size: 1.8rem !important; /* Un poco más grande */ color: #001322 !important; /* Azul oscuro */ margin-top: 30px !important; /* Más espacio arriba */ margin-bottom: 15px !important; padding-bottom: 10px !important; border-bottom: 1px solid #e0e0e0; /* Línea separadora sutil */ } /* --- Contenedor General del Widget Acordeón --- */ .elementor-widget-n-accordion .e-n-accordion { border: 1px solid #e0e0e0; /* Borde general para el bloque de acordeón */ border-radius: 8px; /* Redondeo general */ overflow: hidden; /* Para que el redondeo afecte a los items */ box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra muy sutil */ } /* --- Cada Item del Acordeón (Pregunta + Respuesta) --- */ .elementor-widget-n-accordion .e-n-accordion-item { border-bottom: 1px solid #e0e0e0; /* Línea separadora entre preguntas */ background-color: #ffffff; /* Fondo blanco para cada item */ } .elementor-widget-n-accordion .e-n-accordion-item:last-child { border-bottom: none; /* Sin borde en el último item */ } /* --- Título de la Pregunta (summary) --- */ .elementor-widget-n-accordion .e-n-accordion-item-title { padding: 18px 20px !important; /* Más padding */ background-color: #f8f9fa; /* Fondo gris muy claro para la pregunta */ transition: background-color 0.2s ease; cursor: pointer; } .elementor-widget-n-accordion .e-n-accordion-item-title:hover { background-color: #e9ecef; /* Gris un poco más oscuro en hover */ } .elementor-widget-n-accordion .e-n-accordion-item[open] > summary.e-n-accordion-item-title { background-color: #007CAD !important; /* Fondo azul cuando está abierto */ color: #ffffff !important; /* Texto blanco cuando está abierto */ border-bottom: 1px solid #005F85; /* Borde más oscuro */ } /* Texto del Título de la Pregunta */ .elementor-widget-n-accordion .e-n-accordion-item-title-text { font-weight: 600 !important; font-size: 1rem !important; /* Tamaño ajustado */ color: #283346; /* Color texto oscuro */ transition: color 0.2s ease; } .elementor-widget-n-accordion .e-n-accordion-item[open] > summary.e-n-accordion-item-title .e-n-accordion-item-title-text { color: #ffffff !important; /* Texto blanco cuando está abierto */ } /* Icono (+/-) de la Pregunta */ .elementor-widget-n-accordion .e-n-accordion-item-title-icon svg { fill: #007CAD !important; /* Icono azul */ width: 1em; /* Tamaño icono */ height: 1em; transition: fill 0.2s ease; } .elementor-widget-n-accordion .e-n-accordion-item[open] > summary.e-n-accordion-item-title .e-n-accordion-item-title-icon svg { fill: #ffffff !important; /* Icono blanco cuando está abierto */ } /* --- Contenido de la Respuesta --- */ /* El div que contiene el texto de la respuesta (hijo de details) */ .elementor-widget-n-accordion .e-n-accordion-item > div[role="region"] { padding: 10px !important; /* Padding interno */ background-color: #ffffff; /* Fondo blanco */ } .elementor-widget-n-accordion .e-n-accordion-item > div[role="region"] p { font-size: 0.95rem !important; /* Ajusta tamaño texto respuesta */ line-height: 1.7 !important; color: #333; /* Color texto respuesta */ margin-bottom: 1em; } .elementor-widget-n-accordion .e-n-accordion-item > div[role="region"] p:last-child { margin-bottom: 0; } .elementor-widget-n-accordion .e-n-accordion-item > div[role="region"] a { color: #007CAD; /* Enlaces dentro de la respuesta */ text-decoration: underline; } .elementor-widget-n-accordion .e-n-accordion-item > div[role="region"] a:hover { color: #005F85; } /* ======================================================= */ /* ESTILOS LISTAS UL DENTRO DE CONTENIDO ACORDEÓN FAQ */ /* (Aplicado solo a la página de FAQ con ID 25045) */ /* ======================================================= */ /* Estilo para cada item LI de la lista */ .page-id-25045 .elementor-widget-n-accordion .e-n-accordion-item > div[role="region"] ul li { padding-left: 0; /* Resetear padding si lo tuviera */ margin-bottom: 0.6em !important; /* Espacio entre ítems de la lista */ font-size: 0.95rem; /* Tamaño de fuente (ajusta) */ line-height: 1.5; /* Interlineado */ color: #333; /* Color de texto (heredado de .prod-tab-desc p) */ /* list-style-position: outside !important; */ /* Viñeta fuera del flujo de texto (suele ser por defecto) */ } /* Si quieres un estilo diferente para los enlaces dentro de estas listas */ .page-id-25045 .elementor-widget-n-accordion .e-n-accordion-item > div[role="region"] ul li a { color: #007CAD; /* Azul primario para enlaces */ text-decoration: underline; } .page-id-25045 .elementor-widget-n-accordion .e-n-accordion-item > div[role="region"] ul li a:hover { color: #005F85; /* Azul oscuro hover */ } /* Preguntas y respuesta ficha de producto */ /* Lupa */ #reviews.cr-reviews-ajax-reviews .cr-qna-search-icon, .cr-all-reviews-shortcode .cr-qna-search-icon, .cr-qna-block .cr-qna-search-block .cr-qna-search-icon { fill: #007CAD !important; } #cr_qna > h2 { margin-bottom: 1em; display: none; } .cr-review-form-txt, .cr-review-form-txt, .cr-review-form-comment-txt { border-radius: 8px; } /* Borde inferior titulo producto */ .cr-review-form-item { border-bottom: none !important; } /* Imagen junto al titulo producto */ #cr_qna > div.cr-qna-new-q-form > div.cr-review-form-item > img { display: none; } /* Bloque botones */ .cr-review-form-buttons { justify-content: space-evenly; } #cr_qna div.cr-review-form-lbl { display: none; } /* Cantidad + precio carrito lateral */ .elementor-menu-cart__products span.quantity { display: inline-flex ; flex-direction: row; align-items: center; gap: 5px; } p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received { margin: 2em !important; } /* =========================================== */ /* ESTILOS PARA LA TABLA DE ARTÍCULOS DEL CARRITO (WOOCOMMERCE BLOCKS) */ /* =========================================== */ /* Contenedor principal de la tabla del carrito */ .wc-block-cart__main.wp-block-woocommerce-cart-items-block { padding: 0px !important; /* Elimina padding si el bloque lo añade por defecto */ margin-bottom: 20px; /* Espacio debajo de la tabla */ background-color: #ffffff; /* Fondo blanco */ border: 1px solid #e0e0e0; border-radius: 8px 0px 0px 8px; /* Bordes redondeados */ box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Sombra sutil */ overflow: hidden; /* Asegura que el border-radius se aplique al contenido */ } /* Estilo de la tabla de artículos en sí */ table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block { width: 100% !important; /* Asegura que ocupe todo el ancho */ border-collapse: collapse !important; /* Bordes colapsados */ margin: 0 !important; /* Elimina márgenes por defecto */ } /* Encabezados de la tabla (Producto, Details, Total) */ .wc-block-cart-items__header { font-weight: 600; font-size: 0.9rem !important; text-transform: uppercase; letter-spacing: 0.3px; } .wc-block-cart-items__header th { padding: 14px 18px !important; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Borde blanco sutil */ } /* Tercer encabezado (Total) */ .wc-block-cart-items__header-total { width: 150px; /* Ancho fijo para el total por producto */ text-align: center !important; /* Alinea el texto a la derecha */ } /* Filas de artículos del carrito */ .wc-block-cart-items__row { border-bottom: 1px solid #e8eef0; /* Separador entre filas */ transition: background-color 0.2s ease; } .wc-block-cart-items__row:last-child { border-bottom: none !important; /* Sin borde en la última fila */ } .wc-block-cart-items__row:hover { background-color: #f0f8ff; /* Fondo al pasar el ratón */ } /* Celdas individuales de cada fila */ .wc-block-cart-items__row td { padding: 10px 10px !important; vertical-align: middle !important; } /* Celda de la imagen del producto */ .wc-block-cart-item__image { width: 100px !important; } .wc-block-cart-item__image img { width: 100px !important; /* Tamaño de la imagen */ height: auto; border-radius: 8px; /* Bordes redondeados para las imágenes */ box-shadow: 0 1px 3px rgba(0,0,0,0.1); object-fit: contain; /* Asegura que la imagen se vea completa */ } /* Celda de detalles del producto (nombre, precio, cantidad) */ .wc-block-cart-item__product { text-align: left; } .wc-block-cart-item__wrap { display: flex; flex-direction: column; gap: 8px; /* Espacio entre los elementos dentro de los detalles */ margin: 5px; } /* Nombre del producto */ .wc-block-components-product-name { font-weight: 600; color: #283346; text-decoration: none; font-size: 0.9rem !important; line-height: 1.3 !important; } .wc-block-components-product-name:hover { color: #007CAD; /* Color de tu marca al pasar el ratón */ } /* Precios del producto (precio regular y descuento) */ .wc-block-cart-item__prices { display: flex; align-items: baseline; /* Alinea los precios por su base */ gap: 8px; font-size: 0.95rem !important; } .wc-block-components-product-price__regular { color: #858DAA; /* Color gris para el precio tachado */ text-decoration: line-through !important; } .wc-block-components-product-price__value { color: #ff0000; /* Color rojo para el precio de oferta/descuento */ font-weight: 700; font-size: 1.1rem !important; } /* Ocultar texto para lectores de pantalla que duplica info visualmente */ .wc-block-components-product-price .screen-reader-text { display: none !important; /* Oculta textos como "Previous price:", "Discounted price:" */ } /* Descripción corta del producto */ .wc-block-components-product-metadata__description p { font-size: 1rem; color: #555; margin: 0; line-height: 1.4; display: none !important; } /* Selector de cantidad */ .wc-block-cart-item__quantity .wc-block-components-quantity-selector { height: 2rem; border: 1px solid #007CAD !important; border-radius: 50px !important; align-items: center !important; padding: 0.4rem !important; background-color: white !important; transition: all 0.3s ease !important; /*width: 140px !important;*/ margin-bottom: 20px !important; } /* Ocultar flechas de input type="number" en Webkit */ .wc-block-components-quantity-selector__input::-webkit-outer-spin-button, .wc-block-components-quantity-selector__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Botones de cantidad (+ y -) */ .wc-block-components-quantity-selector__button { background: #007CAD !important; color: white !important; border-radius: 50% !important; width: 2.2rem; height: 2.2rem; font-size: clamp(1.2rem, 2vw, 1rem) !important; /* Tamaño máximo fuente 18px → 16px */ display: flex !important; align-items: center; justify-content: center; transition: transform 0.2s ease !important; border: #007CAD !important; opacity: 1 !important; } .wc-block-components-quantity-selector__button:hover { background-color: #005F85; } .wc-block-components-quantity-selector:after { border: none !important; } /* Botón "Eliminar artículo" */ .wc-block-cart-item__remove-link { background: none; border: none !important; color: #dc3545 !important; /* Rojo para eliminar */ font-size: 0.7rem !important; text-decoration: none !important; cursor: pointer !important; padding: 5px 0 !important; transition: color 0.2s ease !important; } .wc-block-cart-item__remove-link:hover { color: #bd2130 !important; text-decoration: underline !important; } /* Celda del total por producto */ .wc-block-cart-item__total { text-align: center !important; font-weight: 700; color: #283346; font-size: 1rem !important; border-left: 1px solid #e0e0e0 !important; } .wc-block-cart-item__total .wc-block-formatted-money-amount { font-weight: 600; color: #283346; font-size: 1rem !important; } .wc-block-cart-item__total-price-and-sale-badge-wrapper { padding-right: 10px !important; } .wc-block-components-sale-badge .wc-block-formatted-money-amount.wc-block-components-formatted-money-amount { color: #ff0000; font-size: 0.9rem !important; } /* Badges de oferta (Save XX.XX€) */ .wc-block-components-product-badge.wc-block-components-sale-badge { background-color: #fff; color: #ff0000 !important; padding: 8px 12px !important; border-radius: 50px; font-size: 0.8rem; font-weight: 600; width: fit-content !important; /* Se ajusta al contenido */ border: solid 1px #ff0000; } /* Separador horizontal (HR) */ hr.wp-block-separator.has-alpha-channel-opacity { margin-top: 20px !important; margin-bottom: 20px !important; border: none; border-top: none; height: 1px; background: none !important; /* Asegura que no tenga fondo */ clear: both !important; /* Limpia floats alrededor */ } .paypal-button.paypal-button-border-radius, .paypal-button.paypal-button-border-radius { border-radius: 50px !important; } .wc-block-components-sidebar-layout.wc-block-cart.wp-block-woocommerce-filled-cart-block.is-large { margin: 0.8em !important; margin-bottom: 3em !important; } form label:not(.woocommerce-form-login__rememberme):not([class*="button"]) { display: none !important; } /* MEDIA QUERIES */ @media screen and (max-width: 768px) { .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity, .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity, .is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity { align-self: flex-start !important; } .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex !important; justify-content: flex-start !important; flex-direction: row !important; align-items: flex-start !important; margin-left: 10px !important; } span.wc-block-formatted-money-amount.wc-block-components-formatted-money-amount.wc-block-components-product-price__value { font-size: 1.3rem !important; } .wc-block-cart table.wc-block-cart-items, .wc-block-cart table.wc-block-cart-items td, .wc-block-cart table.wc-block-cart-items th { margin: 0px !important; } } /* =========================================== */ /* ESTILOS PARA LA BARRA LATERAL DEL CARRITO (TOTALES Y PAGO) */ /* (WOOCOMMERCE BLOCKS) */ /* =========================================== */ /* Contenedor principal de la barra lateral (Totales del carrito) */ .wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block { background-color: #ffffff; /* Fondo blanco */ border: none; border-radius: 0px 8px 8px 0px; /* Bordes redondeados */ box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Sombra */ padding: 10px; /* Relleno interior */ box-sizing: border-box; /* Asegura que padding y borde se incluyan en el tamaño */ border: 1px solid #e0e0e0; } /* Título "Totales del carrito" */ .wc-block-cart__totals-title { font-size: 1.2em !important; font-weight: 700 !important; color: #001322 !important; /* Azul oscuro */ border-bottom: 1px solid #e0e0e0; /* Separador */ text-align: center !important; } .wc-block-components-totals-shipping-address-summary strong { color: #007CAD; } /* Descripción del método de envío (Gratis, 8.75€, o Entrega en 24-48h) */ .wc-block-components-radio-control__description { font-size: 1.1rem !important; font-weight: 600; color: #007CAD; /* Color para los precios de envío */ text-align: right; /* Asegurar alineación a la derecha */ } .wc-block-components-radio-control__description-group--column { font-size: 1.1rem !important; } /* Texto "Including X in taxes" */ .wc-block-components-totals-footer-item-tax { font-size: 0.9em !important; font-weight: normal !important; color: #555 !important; display: block; /* Asegura que esté en su propia línea */ text-align: right; margin-top: 5px; } .wc-block-components-totals-footer-item-tax-value { font-size: inherit; /* Hereda el tamaño del padre */ color: inherit; /* Hereda el color del padre */ } /* 3. Opciones de envío (radio buttons) */ .wc-block-components-radio-control__option { background-color: #f8f9fa; border: 2px solid #e9ecef; border-radius: 8px; padding: 12px 15px !important; margin-top: 8px !important; /* Espacio superior */ margin-bottom: 8px !important; /* Espacio inferior */ cursor: pointer !important; transition: all 0.2s ease !important; box-sizing: border-box !important; } .wc-block-components-radio-control__option:hover { border-color: #007CAD !important; background-color: #f0f8ff !important; } /* Estilo para la opción de envío seleccionada */ .wc-block-components-radio-control__option-checked { border-color: #007CAD !important; background-color: #e8f4f8 !important; } /* Layout del contenido dentro de la opción de radio (label) */ .wc-block-components-radio-control__option-layout { display: flex !important; width: calc(100% - 25px) !important; flex-direction: row !important; flex-wrap: wrap !important; align-content: space-between !important; align-items: baseline !important; justify-content: space-evenly !important; } .is-large.wc-block-cart .wc-block-components-radio-control__input { outline: none !important; margin-left: 5px !important; } /* Texto de la etiqueta del método de envío (Recogida local, Envío Almería) */ .wc-block-components-radio-control__label { font-weight: 500 !important; color: #001322 !important; font-size: 0.8rem !important; } /* Descripción del método de envío (Gratis, 8.75€, o Entrega en 24-48h) */ .wc-block-components-radio-control__description { font-size: 0.95em !important; font-weight: 600 !important; color: #007CAD !important; /* Color para los precios de envío */ text-align: right !important; /* Asegurar alineación a la derecha */ } /* Texto "Gratis" en la descripción */ .wc-block-components-radio-control__description span:contains("Gratis") { color: #008000 !important; } /* Tiempo de entrega (Entrega en 24-48 horas laborables) */ .wc-block-components-shipping-rates-control__package__delivery_time { display: block !important; /* Asegura que esté en una línea separada si se añade con JS */ font-size: 0.8em !important; color: #666 !important; font-style: italic !important; font-weight: normal !important; margin-top: 3px !important; } .wc-block-components-button:not(.is-link).outlined:not(:focus) { box-shadow: none !important; border: none !important; } body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus { border: none !important; box-shadow: none !important; } /* 6. Responsive para la barra lateral */ @media (max-width: 768px) { .wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block { padding: 15px; margin-top: 15px; } .wc-block-cart__totals-title { font-size: 1.1em; margin-bottom: 15px; } .wc-block-components-totals-coupon-link { padding: 10px 12px; font-size: 0.9em; } .wc-block-components-totals-coupon-form__input, .wc-block-components-totals-coupon-form__button { height: 2.8rem; font-size: 0.85rem; } .wc-block-components-totals-item { font-size: 0.95em; } .wc-block-components-totals-item--total { font-size: 1.1em; } .wc-block-components-totals-item--total .wc-block-components-totals-item__value { font-size: 1.3em; } .wc-block-cart__payment-options { margin-top: 15px; } .wc-block-cart__submit-button { min-height: 3rem; font-size: 1em; } } @media (max-width: 768px) { .wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block { padding: 15px !important; margin-top: 15px; } } /* Texto input en fibosearch */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input, .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:hover, .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus { color: #fff; } .dgwt-wcas-no-submit .dgwt-wcas-ico-magnifier { fill: #fff; } .dgwt-wcas-om-bar button.dgwt-wcas-om-return { background: #007CAD; }