/* * Desvelo: CSS propio de la web. * * Se carga al final del , justo antes del «CSS adicional» del Personalizador, así que manda * sobre el CSS de Astra, Elementor y los plugins igual que antes. Para un retoque rápido se puede * seguir usando Apariencia > Personalizar > CSS adicional (va después y gana a este fichero); * cuando haya varios, mejor pasarlos aquí. * * Índice: * 1. Cabecera en móvil: se oculta al bajar y vuelve al subir * 2. Global (antes «CSS adicional» del Personalizador) * 3. Menú en móvil (antes Código personalizado de Elementor «Popup Header State») * 4. Carrito vacío (antes snippet «Cart Vacío») * 5. Textos legales, cuenta y ficha (revisión de errores e incongruencias) */ /* ========================================================================= 1. Cabecera en móvil: se oculta al bajar y vuelve al subir (JS en desvelo.js) ========================================================================= */ @media (max-width: 1024px) { .elementor-location-header { transition: transform .25s ease, background-color .2s ease !important; } /* -100% de su altura y 60 px más por la barra de admin de WordPress (46 px) */ body.desvelo-header-hidden:not(.desvelo-menu-open):not(.desvelo-cart-open) .elementor-location-header { transform: translateY(calc(-100% - 60px)) !important; } /* Al volver a mitad de página: barra blanca, texto y logo en el color principal, sin inversión */ body.desvelo-header-solid:not(.desvelo-menu-open):not(.desvelo-cart-open) .elementor-location-header { background-color: #fff !important; mix-blend-mode: normal !important; padding-bottom: 12px !important; /* el logo llega al borde inferior de la cabecera */ } body.desvelo-header-solid:not(.desvelo-menu-open):not(.desvelo-cart-open) .elementor-location-header .elementor-heading-title, body.desvelo-header-solid:not(.desvelo-menu-open):not(.desvelo-cart-open) .elementor-location-header .elementor-heading-title::before, body.desvelo-header-solid:not(.desvelo-menu-open):not(.desvelo-cart-open) #cart-heading .elementor-heading-title::after, body.desvelo-header-solid:not(.desvelo-menu-open):not(.desvelo-cart-open) #menu-button .elementor-heading-title::after { color: var(--e-global-color-primary) !important; -webkit-text-fill-color: var(--e-global-color-primary) !important; } /* El texto real de #menu-button es transparente: lo que se ve es el ::after ("Menu") */ body.desvelo-header-solid:not(.desvelo-menu-open):not(.desvelo-cart-open) #menu-button .elementor-heading-title { color: transparent !important; -webkit-text-fill-color: transparent !important; } body.desvelo-header-solid:not(.desvelo-menu-open):not(.desvelo-cart-open) .elementor-location-header .elementor-widget-theme-site-logo img { filter: brightness(0) !important; } } /* ========================================================================= 2. Global (antes «CSS adicional» del Personalizador) ========================================================================= */ /* ========================================================= DESVELO GLOBAL CSS — OPTIMIZED STRUCTURE Source: current Additional CSS supplied by Jaime. Goal: same rules/properties, reorganized by area for maintenance. Important states: - body.desvelo-menu-open → mobile menu popup open - body.desvelo-cart-open → mini cart popup open - body.woocommerce-checkout → checkout mode header ========================================================= */ /* ========================================================= 01. HEADER BASE / FIXED / BLEND ========================================================= */ /* AÑADE ESTO PARA ASEGURAR QUE LA CABECERA NO DESAPAREZCA */ .elementor-location-header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 9999 !important; } /* AJUSTE PARA QUE LA CABECERA NO SE ESCONDA BAJO EL MENÚ DE WORDPRESS */ .admin-bar .elementor-location-header { top: 32px !important; } /* Ajuste para pantallas pequeñas (la barra de WP mide 46px en móvil) */ @media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px !important; } } /* 1. ACTIVAR LA INVERSIÓN DINÁMICA EN EL HEADER */ .elementor-location-header { mix-blend-mode: difference !important; } /* 2. FORZAR COLOR BLANCO DE BASE (Imprescindible para que funcione) */ /* Todos los elementos deben ser blancos para que el navegador pueda calcular la 'diferencia' */ .elementor-location-header .elementor-heading-title, .elementor-location-header .elementor-nav-menu .menu-item a, .elementor-location-header .elementor-menu-cart__toggle i, .elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon, .elementor-location-header .elementor-menu-cart__toggle .count { color: #ffffff !important; fill: #ffffff !important; } /* 3. AJUSTE ESPECIAL PARA EL LOGO SVG */ /* Si tu logo original es negro, necesitamos que sea blanco para que la inversión funcione */ .elementor-location-header .elementor-widget-theme-site-logo img { filter: brightness(0) invert(1) !important; } /* ========================================================= 02. HEADER MENU BUTTON BASE ========================================================= */ /* MENU → CLOSE */ #menu-button { cursor: pointer; } #menu-button .elementor-heading-title { position: relative; color: transparent !important; -webkit-text-fill-color: transparent !important; min-width: 42px; min-height: 20px; } #menu-button .elementor-heading-title::after { content: "Menu"; position: absolute; left: 0; top: 0; font-size: 16px !important; line-height: 1 !important; transform: translateY(0.2em); font-family: inherit; font-weight: inherit; letter-spacing: -0.05em; color: var(--e-global-color-secondary); -webkit-text-fill-color: var(--e-global-color-secondary); pointer-events: none; } body.desvelo-menu-open #menu-button .elementor-heading-title::after { content: "Close"; color: var(--e-global-color-primary); -webkit-text-fill-color: var(--e-global-color-primary); } /* ========================================================= 03. POPUP FOCUS RESET ========================================================= */ .elementor-popup-modal a:focus, .elementor-popup-modal a:focus-visible, .elementor-popup-modal .elementor-item:focus, .elementor-popup-modal .elementor-item:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; } /* ========================================================= 04. HEADER STATE — MENU OPEN ========================================================= */ /* Sin scroll de fondo con el menú abierto (solo en body: con html también, la página saltaba al pie) */ body.desvelo-menu-open { overflow: hidden !important; } /* ========================================== HEADER → PRIMARY CUANDO POPUP ABIERTO ========================================== */ body.desvelo-menu-open #menu-button { color: var(--e-global-color-primary) !important; } body.desvelo-menu-open #menu-button .elementor-heading-title { color: transparent !important; -webkit-text-fill-color: transparent !important; } body.desvelo-menu-open .elementor-menu-cart__toggle, body.desvelo-menu-open .elementor-menu-cart__toggle *, body.desvelo-menu-open .elementor-menu-cart__toggle .elementor-button, body.desvelo-menu-open .elementor-menu-cart__toggle .elementor-button::before, body.desvelo-menu-open .elementor-menu-cart__toggle .elementor-button::after, body.desvelo-menu-open .elementor-menu-cart__toggle .elementor-button-text, body.desvelo-menu-open .elementor-menu-cart__toggle .elementor-button-text::before, body.desvelo-menu-open .elementor-menu-cart__toggle .elementor-button-text .count { color: var(--e-global-color-primary) !important; fill: var(--e-global-color-primary) !important; } body.desvelo-menu-open .elementor-widget-theme-site-logo img { filter: brightness(0) !important; } /* ========================================== RESPONSIVE POPUP MENU — HEADER ABOVE POPUP ========================================== */ @media (max-width: 1024px) { body.desvelo-menu-open .elementor-location-header { position: fixed !important; z-index: 2147483647 !important; mix-blend-mode: normal !important; pointer-events: auto !important; } body.desvelo-menu-open #desvelo-header { position: relative !important; z-index: 2147483647 !important; mix-blend-mode: normal !important; } body.desvelo-menu-open #menu-button .elementor-heading-title { color: transparent !important; -webkit-text-fill-color: transparent !important; } body.desvelo-menu-open #menu-button .elementor-heading-title::after { content: "Close" !important; color: var(--e-global-color-primary) !important; -webkit-text-fill-color: var(--e-global-color-primary) !important; } body.desvelo-menu-open .elementor-widget-theme-site-logo img { opacity: 1 !important; visibility: visible !important; filter: brightness(0) !important; } body.desvelo-menu-open .elementor-menu-cart__toggle, body.desvelo-menu-open .elementor-menu-cart__toggle *, body.desvelo-menu-open .elementor-menu-cart__toggle .elementor-button, body.desvelo-menu-open .elementor-menu-cart__toggle .elementor-button-text, body.desvelo-menu-open .elementor-menu-cart__toggle .count { color: var(--e-global-color-primary) !important; fill: var(--e-global-color-primary) !important; -webkit-text-fill-color: var(--e-global-color-primary) !important; } body.desvelo-menu-open #cart-heading, body.desvelo-menu-open #cart-heading *, body.desvelo-menu-open #cart-heading .elementor-heading-title, body.desvelo-menu-open #cart-heading .elementor-heading-title::before, body.desvelo-menu-open #cart-heading .elementor-heading-title::after { color: var(--e-global-color-primary) !important; -webkit-text-fill-color: var(--e-global-color-primary) !important; fill: var(--e-global-color-primary) !important; } } /* ========================================================= 05. HEADER STATE — CART OPEN MOBILE ========================================================= */ /* ========================================== CART OPEN MOBILE — HIDE HEADER MENU/CART ========================================== */ @media (max-width: 1024px) { body.desvelo-cart-open #menu-button, body.desvelo-cart-open #menu-button *, body.desvelo-cart-open #menu-button .elementor-heading-title, body.desvelo-cart-open #menu-button .elementor-heading-title::before, body.desvelo-cart-open #menu-button .elementor-heading-title::after, body.desvelo-cart-open #cart-heading, body.desvelo-cart-open #cart-heading *, body.desvelo-cart-open #cart-heading .elementor-heading-title, body.desvelo-cart-open #cart-heading .elementor-heading-title::before, body.desvelo-cart-open #cart-heading .elementor-heading-title::after { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* ========================================================= 06. PRODUCT PAGE — DESKTOP STICKY BUY PANEL ========================================================= */ @media (min-width: 1025px) { /* PANEL DERECHO STICKY */ body.single-product #desvelo-side-fixed { position: sticky !important; top: 96px !important; height: calc(100dvh - 128px) !important; max-height: calc(100dvh - 128px) !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-self: flex-start !important; overflow: visible !important; } /* BLOQUE SUPERIOR: info de producto */ body.single-product #desvelo-info-panel { flex: 0 1 auto !important; min-height: 0 !important; overflow-y: auto !important; } /* BLOQUE INFERIOR: acordeón + add to cart abajo */ body.single-product #desvelo-buy-panel { margin-top: auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; flex: 0 0 auto !important; overflow: visible !important; } /* ACORDEÓN encima del bloque de compra */ body.single-product #desvelo-buy-panel .elementor-widget-n-accordion, body.single-product #desvelo-buy-panel .elementor-widget-accordion, body.single-product #desvelo-buy-panel .elementor-accordion { margin-bottom: 20px !important; } /* FORMULARIO COMPRA siempre abajo */ body.single-product #desvelo-buy-panel form.cart, body.single-product #desvelo-buy-panel .variations_form, body.single-product #desvelo-buy-panel .woocommerce-variation-add-to-cart { margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ========================================================= 07. PRODUCT PAGE — MOBILE GALLERY (Revisión oct. 2026) Aquí había reglas para una galería móvil de Elementor (#desvelo-mobile-gallery .e-gallery-*) que ya no existe: la galería de la ficha es el shortcode [desvelo_mobile_product_gallery] (snippet 9). Además terminaba con una llave «}» de más, que anulaba el bloque siguiente. ========================================================= */ /* ========================================================= 08. PRODUCT GRID / SHOP GRID ========================================================= */ /* ========================================== DESVELO PRODUCT GRID — GLOBAL Usar clase en Loop Grid: desvelo-product-grid ========================================== */ /* (Revisión oct. 2026) Aquí había un bloque @media (max-width: 1024px) con los huecos del mosaico en móvil y tablet (gap 32px 12px y sin padding lateral en los productos). Nunca se aplicaba, por la llave de más del apartado 07, y se ha quitado para que la web siga viéndose igual. Si se quiere, está en la copia del 13/10. */ /* MOBILE: gap algo más fino */ @media (max-width: 767px) { body .desvelo-product-grid .elementor-loop-container { column-gap: 8px !important; row-gap: 28px !important; gap: 28px 8px !important; --grid-column-gap: 8px !important; --grid-row-gap: 28px !important; } } /* CARD */ body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="e274331"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; row-gap: 0 !important; } /* IMAGE */ body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="5add90c"] { width: 100% !important; } /* INFO */ body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="48cc058"] { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0px 10px 0px 10px !important; min-height: 38px !important; } /* TITLE */ body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="7b02a13"] { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="7b02a13"] > :first-child { max-width: calc(100% - 180px) !important; } /* PRICE */ body .desvelo-product-grid .elementor-loop-container .e-loop-item .desvelo-loop-price { position: absolute !important; right: 0 !important; top: 12px !important; margin: 0 !important; padding: 0 !important; text-align: right !important; white-space: nowrap !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item .desvelo-loop-price .elementor-heading-title { margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* (Revisión oct. 2026) En escritorio, nombre y precio en una fila flexible: si no caben juntos, el nombre pasa a dos líneas en lugar de montarse sobre el precio (pasaba con nombres largos y rango de precio entre 1171 y 1440 px, p. ej. «Suspension Cuff Bracelet»). Las casillas en las que caben quedan exactamente igual. El max-width de arriba nunca tenía efecto: Elementor Pro pone el título del loop en línea (display: initial). */ @media (min-width: 1025px) { body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="7b02a13"] { display: flex !important; flex-direction: row !important; align-items: flex-start !important; column-gap: 12px !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="7b02a13"] > :first-child { flex: 0 1 auto !important; min-width: 0 !important; max-width: none !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item .desvelo-loop-price { position: static !important; flex: none !important; margin: 12px 0 0 auto !important; } } /* COLOURS */ body .desvelo-product-grid .elementor-loop-container .e-loop-item .elementor-widget-heading.info-desvelo { position: absolute !important; right: 0 !important; top: 34px !important; margin: 0 !important; padding: 0 10px 0 0 !important; text-align: right !important; white-space: nowrap !important; } /* COLOURS TYPOGRAPHY */ body .desvelo-product-grid .elementor-loop-container .e-loop-item .elementor-widget-heading.info-desvelo, body .desvelo-product-grid .elementor-loop-container .e-loop-item .elementor-widget-heading.info-desvelo .elementor-heading-title { color: #8C8C8C !important; } /* PRICE TYPOGRAPHY */ body .desvelo-product-grid .info-desvelo .price, body .desvelo-product-grid .info-desvelo .amount, body .desvelo-product-grid .info-desvelo ins .amount, body .desvelo-product-grid .info-desvelo bdi { margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 15px !important; font-weight: 300 !important; letter-spacing: 0.05em !important; color: #111 !important; } /* DESKTOP ONLY: HOVER */ @media (min-width: 1025px) and (hover: hover) and (pointer: fine) { body .desvelo-product-grid .elementor-loop-container .e-loop-item .info-desvelo { opacity: 0 !important; visibility: hidden !important; transition: none !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item:hover .info-desvelo { opacity: 1 !important; visibility: visible !important; } } /* TABLET + MOBILE */ @media (max-width: 1024px) { body .desvelo-product-grid .elementor-loop-container .e-loop-item .info-desvelo, body .desvelo-product-grid .elementor-loop-container .e-loop-item:hover .info-desvelo { opacity: 1 !important; visibility: visible !important; display: block !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="48cc058"] { position: static !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; min-height: 0 !important; padding-top: 12px !important; /* Neutraliza los 40 px heredados del enlace */ font-size: 15px !important; line-height: 1.15 !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="7b02a13"], body .desvelo-product-grid .elementor-loop-container .e-loop-item [data-id="7b02a13"] > :first-child { display: block !important; width: 100% !important; max-width: 100% !important; } /* Interlineado del nombre y eliminación del margen automático */ body .desvelo-product-grid .elementor-loop-container .e-loop-item .desvelo-loop-title .product_title { display: block !important; font-size: 15px !important; line-height: 1.15 !important; margin: 0 !important; padding: 0 !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item .elementor-widget-woocommerce-product-price.info-desvelo, body .desvelo-product-grid .elementor-loop-container .e-loop-item .elementor-widget-heading.info-desvelo { position: static !important; right: auto !important; top: auto !important; margin: 4px 0 0 0 !important; padding: 0 !important; text-align: left !important; white-space: normal !important; } /* Separación adicional entre nombre y precio */ body .desvelo-product-grid .elementor-loop-container .e-loop-item .elementor-widget-woocommerce-product-price.info-desvelo { margin-top: 10px !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item .product_title, body .desvelo-product-grid .elementor-loop-container .e-loop-item .price, body .desvelo-product-grid .elementor-loop-container .e-loop-item .amount, body .desvelo-product-grid .elementor-loop-container .e-loop-item bdi, body .desvelo-product-grid .elementor-loop-container .e-loop-item .elementor-heading-title { word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; hyphens: none !important; } } /* MÁRGENES MOBILE SHOP */ @media (max-width: 1024px) { .woocommerce-shop .ast-container, .post-type-archive-product .ast-container { padding-left: 0 !important; padding-right: 0 !important; } } /* ========================================== DESKTOP — EDITORIAL GRID ========================================== */ @media (min-width: 1025px) { body .desvelo-product-grid .elementor-loop-container { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 10px !important; row-gap: 60px !important; align-items: start !important; grid-auto-flow: row !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item { grid-column: span 1 !important; grid-row: auto !important; width: 100% !important; } /* Productos destacados: ocupan dos columnas */ body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid { grid-column: span 2 !important; width: 100% !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid [data-id="e274331"], body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid [data-id="5add90c"], body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid .elementor-widget-image, body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid .elementor-widget-container, body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; } /* Huecos editoriales en Home y Shop */ body:is(.home, .page-id-45, .woocommerce-shop) .desvelo-product-grid .elementor-loop-container > .e-loop-item:not(.product_tag-featured-grid):nth-child(3 of .e-loop-item), body:is(.home, .page-id-45, .woocommerce-shop) .desvelo-product-grid .elementor-loop-container > .e-loop-item:not(.product_tag-featured-grid):nth-child(9 of .e-loop-item), body:is(.home, .page-id-45, .woocommerce-shop) .desvelo-product-grid .elementor-loop-container > .e-loop-item:not(.product_tag-featured-grid):nth-child(15 of .e-loop-item), body:is(.home, .page-id-45, .woocommerce-shop) .desvelo-product-grid .elementor-loop-container > .e-loop-item:not(.product_tag-featured-grid):nth-child(22 of .e-loop-item) { grid-column-start: 4 !important; } /* Hover de imagen exclusivamente en desktop */ body .desvelo-product-grid .elementor-loop-container .e-loop-item:hover img { filter: grayscale(1) invert(1) !important; } } /* ========================================== TABLET — TWO EQUAL COLUMNS ========================================== */ @media (min-width: 768px) and (max-width: 1024px) { body .desvelo-product-grid .elementor-loop-container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; align-items: start !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item, body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid { grid-column: span 1 !important; width: 100% !important; } } /* ========================================== MOBILE — EDITORIAL GRID Two products + one featured full width ========================================== */ @media (max-width: 767px) { body .desvelo-product-grid .elementor-loop-container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: dense !important; align-items: start !important; } /* Productos normales: una columna */ body .desvelo-product-grid .elementor-loop-container .e-loop-item { grid-column: span 1 !important; width: 100% !important; } /* Productos destacados: ocupan las dos columnas */ body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid { grid-column: 1 / -1 !important; width: 100% !important; } body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid [data-id="e274331"], body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid [data-id="5add90c"], body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid .elementor-widget-image, body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid .elementor-widget-container, body .desvelo-product-grid .elementor-loop-container .e-loop-item.product_tag-featured-grid img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; } /* Eliminar cualquier hover/estado táctil de las imágenes */ body .desvelo-product-grid .elementor-loop-container .e-loop-item:hover img, body .desvelo-product-grid .elementor-loop-container .e-loop-item:active img, body .desvelo-product-grid .elementor-loop-container .e-loop-item:focus-within img { filter: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================= 09. MINI CART POPUP ========================================================= */ /* ========================================== DESVELO MINI CART POPUP ========================================== */ .desvelo-mini-cart { min-height: calc(100vh - 48px); display: flex; flex-direction: column; color: #111; font-family: inherit; } .desvelo-cart-close, .desvelo-cart-close:hover, .desvelo-cart-close:focus { position: absolute; top: 20px; right: 5px; z-index: 5; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; font: inherit; font-size: 14px !important; line-height: 1 !important; font-weight: 400 !important; color: #111 !important; cursor: pointer; } .desvelo-cart-header { display: flex; justify-content: space-between; font-size: 30px; line-height: 1; font-weight: 400; padding-top: 56px; margin-bottom: 46px; } .desvelo-cart-items { display: flex; flex-direction: column; gap: 32px; } .desvelo-cart-item { display: grid; grid-template-columns: 134px 1fr; gap: 14px; align-items: start; } .desvelo-cart-image img { width: 134px; height: auto !important; object-fit: contain !important; display: block; } .desvelo-cart-title, .desvelo-cart-price, .desvelo-cart-quantity, .desvelo-cart-remove, .desvelo-cart-note, .desvelo-cart-checkout { font-size: 14px !important; line-height: 1.25 !important; font-weight: 400 !important; } .desvelo-cart-price { margin-top: 3px; } .desvelo-cart-quantity { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 14px !important; line-height: 1 !important; } .desvelo-cart-quantity button { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; font-size: 20px !important; line-height: 1 !important; color: #111; cursor: pointer; } .desvelo-cart-quantity span { font-size: 14px !important; line-height: 1 !important; } .desvelo-cart-remove { display: inline-block; margin-top: 22px; color: #999 !important; text-decoration: none !important; } .desvelo-cart-footer { position: sticky; bottom: 0; padding-top: 24px; padding-bottom: 24px; background: #ffffff; margin-top: auto; } .desvelo-cart-subtotal { display: flex; justify-content: space-between; border-top: 1px solid #111; border-bottom: 1px solid #111; padding: 12px 0; margin-bottom: 14px; } .desvelo-cart-subtotal span { font-size: 18px !important; line-height: 1.2 !important; font-weight: 400 !important; } .desvelo-cart-note { margin-bottom: 22px; } .desvelo-cart-note a { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; text-decoration: underline; text-underline-offset: 3px; } .desvelo-cart-checkout { height: 48px; width: 100%; background: #111; color: #fff !important; text-decoration: none !important; display: flex; align-items: center; justify-content: center; } .desvelo-cart-empty { font-size: 14px; line-height: 1.25; } @media (min-width: 1025px) { body.desvelo-cart-open .elementor-location-header { mix-blend-mode: normal !important; } body.desvelo-cart-open .elementor-location-header .elementor-widget-theme-site-logo, body.desvelo-cart-open .elementor-location-header .elementor-widget-theme-site-logo *, body.desvelo-cart-open .elementor-location-header .elementor-widget-theme-site-logo img { mix-blend-mode: normal !important; opacity: 1 !important; visibility: visible !important; filter: brightness(0) saturate(100%) !important; -webkit-filter: brightness(0) saturate(100%) !important; } } .desvelo-cart-remove, .desvelo-cart-remove:hover, .desvelo-cart-remove:focus { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 22px !important; color: #999 !important; text-decoration: none !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 400 !important; cursor: pointer !important; text-align: left !important; display: inline-block !important; } /* Ocultar aviso WooCommerce de producto añadido */ body.single-product .woocommerce-message { display: none !important; } .desvelo-mini-cart.desvelo-cart-loading { opacity: 0 !important; } /* Avisos del carrito (stock, producto no disponible) */ .desvelo-cart-notices { margin: -26px 0 28px; padding: 12px 14px; background: #f1eeee; font-size: 14px !important; line-height: 1.35 !important; color: #111; } .desvelo-cart-notices p { margin: 0; } .desvelo-cart-notices p + p { margin-top: 6px; } /* Variante bajo el nombre: Gold, Single / talla */ .desvelo-cart-variation { font-size: 14px !important; line-height: 1.25 !important; color: #999; } /* Mientras se actualiza una cantidad */ .desvelo-mini-cart.desvelo-cart-busy .desvelo-cart-items { opacity: .5; pointer-events: none; } .desvelo-cart-quantity button:disabled { opacity: .3; cursor: default; } /* Ficha de producto: aviso cuando no se ha podido añadir al carrito */ .desvelo-add-notice { margin-top: 8px; padding: 10px 14px; background: #f1eeee; color: #111; font-size: 14px; line-height: 1.35; } .desvelo-add-notice p { margin: 0; } /* ========================================================= 10. CHECKOUT MODE — HEADER SIMPLE ========================================================= */ /* ========================================== CHECKOUT / THANK YOU MODE — HEADER SIMPLE Official checkout + Checkout_Test page ID 1781 ========================================== */ /* Header sin blend */ body.woocommerce-checkout .elementor-location-header, body.page-id-1781 .elementor-location-header, body.woocommerce-order-received .elementor-location-header { mix-blend-mode: normal !important; } /* Checkout / Thank You: header no sticky/fixed */ body.woocommerce-checkout .elementor-location-header, body.page-id-1781 .elementor-location-header, body.woocommerce-order-received .elementor-location-header { position: relative !important; top: auto !important; } /* Header centrado */ body.woocommerce-checkout #desvelo-header, body.page-id-1781 #desvelo-header, body.woocommerce-order-received #desvelo-header { justify-content: center !important; align-items: center !important; } /* Ocultar contenedores directos SOLO si no son logo y tampoco contienen un logo dentro. Esto evita romper el logo en responsive. */ body.woocommerce-checkout #desvelo-header > .elementor-element:not(.elementor-widget-theme-site-logo):not(:has(.elementor-widget-theme-site-logo)), body.page-id-1781 #desvelo-header > .elementor-element:not(.elementor-widget-theme-site-logo):not(:has(.elementor-widget-theme-site-logo)), body.woocommerce-order-received #desvelo-header > .elementor-element:not(.elementor-widget-theme-site-logo):not(:has(.elementor-widget-theme-site-logo)) { display: none !important; } /* Ocultar widgets de navegación/texto/carrito, pero no tocar el widget logo */ body.woocommerce-checkout #desvelo-header .elementor-widget-heading, body.page-id-1781 #desvelo-header .elementor-widget-heading, body.woocommerce-order-received #desvelo-header .elementor-widget-heading, body.woocommerce-checkout #desvelo-header .elementor-widget-nav-menu, body.page-id-1781 #desvelo-header .elementor-widget-nav-menu, body.woocommerce-order-received #desvelo-header .elementor-widget-nav-menu, body.woocommerce-checkout #desvelo-header .elementor-widget-woocommerce-menu-cart, body.page-id-1781 #desvelo-header .elementor-widget-woocommerce-menu-cart, body.woocommerce-order-received #desvelo-header .elementor-widget-woocommerce-menu-cart { display: none !important; } /* Logo centrado */ body.woocommerce-checkout .elementor-location-header .elementor-widget-theme-site-logo, body.page-id-1781 .elementor-location-header .elementor-widget-theme-site-logo, body.woocommerce-order-received .elementor-location-header .elementor-widget-theme-site-logo { position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; } /* Imagen logo desktop */ body.woocommerce-checkout .elementor-location-header .elementor-widget-theme-site-logo img, body.page-id-1781 .elementor-location-header .elementor-widget-theme-site-logo img, body.woocommerce-order-received .elementor-location-header .elementor-widget-theme-site-logo img { width: 130px !important; max-width: 130px !important; height: auto !important; filter: brightness(0) !important; } /* Responsive logo */ @media (max-width: 1024px) { body.woocommerce-checkout .elementor-location-header .elementor-widget-theme-site-logo img, body.page-id-1781 .elementor-location-header .elementor-widget-theme-site-logo img, body.woocommerce-order-received .elementor-location-header .elementor-widget-theme-site-logo img { width: 120px !important; max-width: 120px !important; } } @media (max-width: 767px) { body.woocommerce-checkout .elementor-location-header .elementor-widget-theme-site-logo img, body.page-id-1781 .elementor-location-header .elementor-widget-theme-site-logo img, body.woocommerce-order-received .elementor-location-header .elementor-widget-theme-site-logo img { width: 110px !important; max-width: 110px !important; } } /* Checkout: ocultar footer global */ body.woocommerce-checkout .elementor-location-footer, body.page-id-1781 .elementor-location-footer { display: none !important; } /* CHECKOUT MINIMAL FOOTER */ body.page-id-1781 .desvelo-checkout-footer { width: 670px !important; max-width: 670px !important; margin-top: 0px !important; margin-left: calc((100vw - 1180px) / 2 + 10px) !important; margin-right: auto !important; margin-bottom: 80px !important; padding-top: 0 !important; border-top: none !important; display: flex !important; flex-wrap: wrap !important; gap: 22px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; line-height: 1.3 !important; letter-spacing: 0 !important; } body.page-id-1781 .desvelo-checkout-footer::before { content: ""; display: block; width: 100%; border-top: 1px solid #d8d8d8; margin-bottom: 20px; } body.page-id-1781 .desvelo-checkout-footer a { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: #111 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* ========================================== THANK YOU — FOOTER ALIGNMENT ========================================== */ body.woocommerce-order-received .desvelo-checkout-footer { width: 100% !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; margin-top: 72px !important; margin-bottom: 80px !important; padding-left: 24px !important; padding-right: 24px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 28px !important; text-align: center !important; } /* Línea superior a todo el ancho del bloque */ body.woocommerce-order-received .desvelo-checkout-footer::before { content: ""; display: block !important; width: 100% !important; flex-basis: 100% !important; border-top: 1px solid #d8d8d8 !important; margin-bottom: 24px !important; } /* Links centrados */ body.woocommerce-order-received .desvelo-checkout-footer a { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #111 !important; -webkit-text-fill-color: #111 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* Mobile */ @media (max-width: 767px) { body.woocommerce-order-received .desvelo-checkout-footer { max-width: none !important; padding-left: 18px !important; padding-right: 18px !important; gap: 18px !important; margin-top: 56px !important; margin-bottom: 64px !important; } } /* Tablet / mobile */ @media (max-width: 1024px) { body.page-id-1781 .desvelo-checkout-footer { width: auto !important; max-width: none !important; margin-left: 24px !important; margin-right: 24px !important; margin-bottom: 64px !important; } } /* Checkout: FREE de shipping options mismo tamaño */ body.woocommerce-checkout .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__secondary-label, body.page-id-1781 .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__secondary-label, body.woocommerce-checkout .wc-block-components-radio-control__secondary-label, body.page-id-1781 .wc-block-components-radio-control__secondary-label { font-size: 18px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #111 !important; } /* ========================================== 10.5 CHECKOUT MODE — LAYOUT BASE Panconesi / Sophie style ========================================== */ body.woocommerce-checkout, body.page-id-1781 { background: #fff !important; } /* CHECKOUT — FUNCTIONAL TYPOGRAPHY */ body.woocommerce-checkout .wp-block-woocommerce-checkout, body.page-id-1781 .wp-block-woocommerce-checkout { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0 !important; } body.woocommerce-checkout .wc-block-components-title, body.woocommerce-checkout .wc-block-components-checkout-step__heading, body.woocommerce-checkout .wc-block-components-checkout-step__title, body.page-id-1781 .wc-block-components-title, body.page-id-1781 .wc-block-components-checkout-step__heading, body.page-id-1781 .wc-block-components-checkout-step__title{ font-family: Arial, Helvetica, sans-serif !important; font-weight:500 !important; letter-spacing:0 !important; } body.woocommerce-checkout .wc-block-components-express-payment__title, body.page-id-1781 .wc-block-components-express-payment__title{ font-family: Arial, Helvetica, sans-serif !important; font-weight:500 !important; } /* Separación superior bajo el logo */ body.woocommerce-checkout .entry-content, body.page-id-1781 .entry-content { padding-top: 0px !important; } /* Ancho general del checkout */ body.woocommerce-checkout .wp-block-woocommerce-checkout, body.page-id-1781 .wp-block-woocommerce-checkout { max-width: 1180px !important; margin: 0 auto !important; padding-left: 32px !important; padding-right: 32px !important; } /* Columna derecha / resumen */ body.woocommerce-checkout .wc-block-components-sidebar, body.page-id-1781 .wc-block-components-sidebar { padding-left: 56px !important; } /* Checkout: limpiar meta de producto en resumen (sin la descripción corta, con la variante) */ body.woocommerce-checkout .wc-block-components-product-metadata__description, body.page-id-1781 .wc-block-components-product-metadata__description { display: none !important; } body.woocommerce-checkout .wc-block-components-product-details, body.page-id-1781 .wc-block-components-product-details { margin: 2px 0 0 !important; padding: 0 !important; list-style: none !important; font-size: 14px !important; line-height: 1.3 !important; color: #999 !important; } body.woocommerce-checkout .wc-block-components-product-details li, body.page-id-1781 .wc-block-components-product-details li { margin: 0 !important; } body.woocommerce-checkout .wc-block-components-product-details *, body.page-id-1781 .wc-block-components-product-details * { color: #999 !important; font-size: 14px !important; } /* Checkout: ocultar precio duplicado bajo el nombre del producto */ body.woocommerce-checkout .wc-block-cart-item__prices, body.page-id-1781 .wc-block-cart-item__prices { display: none !important; } /* Columna izquierda */ body.woocommerce-checkout .wc-block-components-main, body.page-id-1781 .wc-block-components-main { padding-right: 56px !important; } /* Títulos de secciones */ body.woocommerce-checkout .wc-block-components-title, body.page-id-1781 .wc-block-components-title, body.woocommerce-checkout .wc-block-components-checkout-step__title, body.page-id-1781 .wc-block-components-checkout-step__title { font-size: 18px !important; line-height: 1.2 !important; font-weight: 400 !important; letter-spacing: -0.02em !important; } .wc-block-components-title, .wc-block-components-checkout-step__heading, .wc-block-components-checkout-step__title, .wc-block-components-checkout-step h2, .wc-block-components-checkout-step h3{ color:#111 !important; } /* SHIPPING METHODS */ .wc-block-components-shipping-rates-control__package label, .wc-block-components-radio-control__option label { font-size: 18px !important; font-weight: 400 !important; } /* PAYMENT METHOD TITLE */ .wc-block-components-payment-method-label, .wc-block-components-radio-control__label { font-size: 18px !important; font-weight: 400 !important; } /* Checkout: shipping options texto y precio mismo tamaño */ body.woocommerce-checkout .wc-block-components-shipping-rates-control__package label, body.page-id-1781 .wc-block-components-shipping-rates-control__package label, body.woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__description, body.page-id-1781 .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__description, body.woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-formatted-money-amount, body.page-id-1781 .wc-block-components-shipping-rates-control__package .wc-block-formatted-money-amount { font-size: 18px !important; line-height: 1.2 !important; font-weight: 400 !important; } /* CHECKOUT — LIGHT BORDERS */ body.woocommerce-checkout input, body.woocommerce-checkout select, body.woocommerce-checkout textarea, body.woocommerce-checkout .wc-block-components-text-input, body.woocommerce-checkout .wc-block-components-combobox, body.woocommerce-checkout .wc-block-components-select, body.woocommerce-checkout .wc-block-components-radio-control__option, body.page-id-1781 input, body.page-id-1781 select, body.page-id-1781 textarea{ border:1px solid #D5D5D5 !important; } /* CHECKOUT — PRECIOS SIEMPRE EN NEGRO */ body.woocommerce-checkout .wc-block-formatted-money-amount, body.woocommerce-checkout .wc-block-components-formatted-money-amount, body.woocommerce-checkout .wc-block-components-totals-item__value, body.woocommerce-checkout .wc-block-components-order-summary-item__total-price, body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price, body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount, body.page-id-1781 .wc-block-formatted-money-amount, body.page-id-1781 .wc-block-components-formatted-money-amount { color: #111 !important; -webkit-text-fill-color: #111 !important; } /* Checkout: título Express Checkout */ body.woocommerce-checkout .wc-block-components-express-payment__title, body.page-id-1781 .wc-block-components-express-payment__title, body.woocommerce-checkout .wc-block-components-express-payment__title span, body.page-id-1781 .wc-block-components-express-payment__title span { color: #111 !important; -webkit-text-fill-color: #111 !important; } /* Texto general checkout */ body.woocommerce-checkout .wp-block-woocommerce-checkout, body.page-id-1781 .wp-block-woocommerce-checkout { font-size: 14px !important; line-height: 1.35 !important; } .wc-block-components-checkout-return-to-cart-button{ display:none !important; } .wc-block-components-checkout-place-order-button{ width:100% !important; justify-content:center !important; } /* CHECKOUT — ORDER SUMMARY TYPOGRAPHY */ body.woocommerce-checkout .wc-block-components-order-summary, body.page-id-1781 .wc-block-components-order-summary { font-size: 16px !important; line-height: 1.25 !important; } body.woocommerce-checkout .wc-block-components-product-name, body.page-id-1781 .wc-block-components-product-name, body.woocommerce-checkout .wc-block-components-order-summary-item__description, body.page-id-1781 .wc-block-components-order-summary-item__description, body.woocommerce-checkout .wc-block-components-order-summary-item__total-price, body.page-id-1781 .wc-block-components-order-summary-item__total-price { font-family: Arial, Helvetica, sans-serif !important; /* el h3 del resumen móvil tomaba la fuente de títulos de Astra */ font-size: 16px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #111 !important; -webkit-text-fill-color: #111 !important; } body.woocommerce-checkout .wc-block-components-totals-item, body.page-id-1781 .wc-block-components-totals-item { font-size: 16px !important; line-height: 1.2 !important; } body.woocommerce-checkout .wc-block-components-totals-footer-item, body.page-id-1781 .wc-block-components-totals-footer-item { font-size: 16px !important; line-height: 1.1 !important; } body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount, body.page-id-1781 .wc-block-components-totals-footer-item .wc-block-formatted-money-amount { font-size: 22px !important; line-height: 1.1 !important; } /* Checkout: FREE sin negrita en order summary */ body.woocommerce-checkout .wc-block-components-totals-shipping .wc-block-components-totals-item__value strong, body.page-id-1781 .wc-block-components-totals-shipping .wc-block-components-totals-item__value strong { font-weight: 400 !important; } /* CHECKOUT — PAYMENT CARD FINAL Header gris + cuerpo blanco + borde negro global */ /* Caja exterior del bloque de pago */ body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control, body.page-id-1781 .wc-block-checkout__payment-method .wc-block-components-radio-control { background: #fff !important; border: 1px solid #111 !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: none !important; } /* Cabecera de tarjeta: gris */ body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option, body.page-id-1781 .wc-block-checkout__payment-method .wc-block-components-radio-control__option { background: #f7f7f7 !important; border: 0 !important; border-bottom: 1px solid #d8d8d8 !important; box-shadow: none !important; } /* Layout interno cabecera */ body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option-layout, body.page-id-1781 .wc-block-checkout__payment-method .wc-block-components-radio-control__option-layout { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Cuerpo de tarjeta: blanco */ body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content, body.page-id-1781 .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content { background: #fff !important; border: 0 !important; box-shadow: none !important; padding: 24px !important; } /* Wrappers Stripe/WooCommerce: transparentes para no crear cajas raras */ body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-payment-methods__payment-method, body.page-id-1781 .wc-block-checkout__payment-method .wc-block-components-payment-methods__payment-method, body.woocommerce-checkout .wc-block-checkout__payment-method .wc-stripe-blocks-payment-method, body.page-id-1781 .wc-block-checkout__payment-method .wc-stripe-blocks-payment-method, body.woocommerce-checkout .wc-block-checkout__payment-method .wc-stripe-blocks-payment-method__container, body.page-id-1781 .wc-block-checkout__payment-method .wc-stripe-blocks-payment-method__container, body.woocommerce-checkout .wc-block-checkout__payment-method .wc-stripe-upe-form, body.page-id-1781 .wc-block-checkout__payment-method .wc-stripe-upe-form, body.woocommerce-checkout .wc-block-checkout__payment-method .wc-stripe-upe-element, body.page-id-1781 .wc-block-checkout__payment-method .wc-stripe-upe-element, body.woocommerce-checkout .wc-block-checkout__payment-method .StripeElement, body.page-id-1781 .wc-block-checkout__payment-method .StripeElement { background: transparent !important; box-shadow: none !important; } /* CHECKOUT — SHIPPING OPTIONS BACKGROUND */ body.woocommerce-checkout .wc-block-checkout__shipping-method .wc-block-components-radio-control, body.page-id-1781 .wc-block-checkout__shipping-method .wc-block-components-radio-control, body.woocommerce-checkout .wc-block-components-shipping-rates-control, body.page-id-1781 .wc-block-components-shipping-rates-control { background: #f7f7f7 !important; border: 1px solid #d8d8d8 !important; border-radius: 8px !important; overflow: hidden !important; } /* Cada opción de envío */ body.woocommerce-checkout .wc-block-checkout__shipping-method .wc-block-components-radio-control__option, body.page-id-1781 .wc-block-checkout__shipping-method .wc-block-components-radio-control__option, body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option, body.page-id-1781 .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option { background: #f7f7f7 !important; } /* Opción seleccionada: mantener borde negro */ body.woocommerce-checkout .wc-block-checkout__shipping-method .wc-block-components-radio-control__option-checked, body.page-id-1781 .wc-block-checkout__shipping-method .wc-block-components-radio-control__option-checked, body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked, body.page-id-1781 .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked { background: #f7f7f7 !important; border-color: #111 !important; } /* Botones propios de WooCommerce (NO Express Checkout) */ body.woocommerce-checkout .wc-block-components-checkout-place-order-button, body.page-id-1781 .wc-block-components-checkout-place-order-button, body.woocommerce-checkout .wc-block-components-button:not(.wc-block-components-express-payment__button), body.page-id-1781 .wc-block-components-button:not(.wc-block-components-express-payment__button) { background: #111 !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: inherit !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .05em !important; min-height: 48px !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout button:hover, body.page-id-1781 .wp-block-woocommerce-checkout button:hover, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-button:hover, body.page-id-1781 .wp-block-woocommerce-checkout .wc-block-components-button:hover { background: #111 !important; color: #999 !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout button:focus, body.page-id-1781 .wp-block-woocommerce-checkout button:focus, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-button:focus, body.page-id-1781 .wp-block-woocommerce-checkout .wc-block-components-button:focus { outline: none !important; box-shadow: none !important; } /* CHECKOUT MODE — PLACEHOLDERS */ body.woocommerce-checkout input::placeholder, body.woocommerce-checkout textarea::placeholder, body.woocommerce-checkout select, body.page-id-1781 input::placeholder, body.page-id-1781 textarea::placeholder, body.page-id-1781 select { color: #9b9b9b !important; opacity: 1 !important; } /* Placeholders de Stripe */ body.woocommerce-checkout .StripeElement, body.page-id-1781 .StripeElement { --stripe-placeholder-color: #9b9b9b; } /* CHECKOUT MODE — FIELD LABELS / HINT TEXT */ body.woocommerce-checkout .wc-block-components-text-input label, body.page-id-1781 .wc-block-components-text-input label, body.woocommerce-checkout .wc-block-components-combobox label, body.page-id-1781 .wc-block-components-combobox label, body.woocommerce-checkout .wc-block-components-select label, body.page-id-1781 .wc-block-components-select label, body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle, body.page-id-1781 .wc-block-components-address-form__address_2-toggle, body.woocommerce-checkout .wc-block-components-formatted-money-amount, body.page-id-1781 .wc-block-components-formatted-money-amount { color: #9b9b9b !important; } /* Texto escrito por el usuario: mantener negro */ body.woocommerce-checkout .wc-block-components-text-input input, body.page-id-1781 .wc-block-components-text-input input, body.woocommerce-checkout .wc-block-components-combobox input, body.page-id-1781 .wc-block-components-combobox input, body.woocommerce-checkout .wc-block-components-select select, body.page-id-1781 .wc-block-components-select select { color: #111 !important; } /* CHECKOUT — MOBILE WIDTH / CENTERING */ @media (max-width: 767px) { body.woocommerce-checkout .wp-block-woocommerce-checkout, body.page-id-1781 .wp-block-woocommerce-checkout { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box !important; } body.woocommerce-checkout .wc-block-components-sidebar-layout, body.page-id-1781 .wc-block-components-sidebar-layout { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } body.woocommerce-checkout .wc-block-components-main, body.page-id-1781 .wc-block-components-main, body.woocommerce-checkout .wc-block-components-sidebar, body.page-id-1781 .wc-block-components-sidebar { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } body.woocommerce-checkout .wc-block-components-checkout-step, body.page-id-1781 .wc-block-components-checkout-step, body.woocommerce-checkout .wc-block-components-express-payment, body.page-id-1781 .wc-block-components-express-payment, body.woocommerce-checkout .wc-block-checkout__payment-method, body.page-id-1781 .wc-block-checkout__payment-method, body.woocommerce-checkout .wc-block-checkout__shipping-method, body.page-id-1781 .wc-block-checkout__shipping-method { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } } /* CHECKOUT — PRIVACY / TERMS LINKS FIX (.wc-block-checkout__terms a: los enlaces del texto de términos van a /legals/, sin «terms» en la URL) */ body.woocommerce-checkout .wc-block-checkout__terms a, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="privacy"], body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="policy"], body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="terms"], body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="conditions"], body.page-id-1781 .wc-block-checkout__terms a, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="privacy"], body.page-id-1781 .wp-block-woocommerce-checkout a[href*="policy"], body.page-id-1781 .wp-block-woocommerce-checkout a[href*="terms"], body.page-id-1781 .wp-block-woocommerce-checkout a[href*="conditions"] { font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #111 !important; -webkit-text-fill-color: #111 !important; text-decoration: underline !important; text-underline-offset: 3px !important; background: transparent !important; opacity: 1 !important; display: inline !important; position: static !important; transform: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } /* Matar el efecto gigante heredado de enlaces globales */ body.woocommerce-checkout .wc-block-checkout__terms a::before, body.woocommerce-checkout .wc-block-checkout__terms a::after, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="privacy"]::before, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="privacy"]::after, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="policy"]::before, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="policy"]::after, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="terms"]::before, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="terms"]::after, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="conditions"]::before, body.woocommerce-checkout .wp-block-woocommerce-checkout a[href*="conditions"]::after, body.page-id-1781 .wc-block-checkout__terms a::before, body.page-id-1781 .wc-block-checkout__terms a::after, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="privacy"]::before, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="privacy"]::after, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="policy"]::before, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="policy"]::after, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="terms"]::before, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="terms"]::after, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="conditions"]::before, body.page-id-1781 .wp-block-woocommerce-checkout a[href*="conditions"]::after { content: none !important; display: none !important; } /* CHECKOUT — EMPTY / ERROR STATE FINAL */ body.desvelo-checkout-empty .desvelo-checkout-footer, body.desvelo-checkout-empty .elementor-location-footer { display: none !important; } body.desvelo-checkout-empty .wp-block-woocommerce-checkout, body.desvelo-checkout-empty .wc-block-checkout, body.desvelo-checkout-empty .entry-content { max-width: 620px !important; margin: 0 auto !important; padding: 130px 24px 120px !important; text-align: center !important; } .desvelo-empty-checkout { max-width: 520px !important; margin: 0 auto !important; text-align: center !important; font-family: Arial, Helvetica, sans-serif !important; color: #111 !important; } .desvelo-empty-checkout h1 { font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #111 !important; margin: 0 0 12px !important; } .desvelo-empty-checkout p { font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #111 !important; max-width: 500px !important; margin: 0 auto 30px !important; } .desvelo-empty-checkout-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 180px !important; height: 48px !important; padding: 0 28px !important; background: #111 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-decoration: none !important; } .desvelo-empty-checkout-button::before, .desvelo-empty-checkout-button::after { content: none !important; display: none !important; } .desvelo-empty-checkout-button:hover { background: #111 !important; color: #999 !important; -webkit-text-fill-color: #999 !important; } /* ========================================== 11 SECONDATY PAGES ========================================== */ /* ========================================== 03 — THANK YOU / ORDER RECEIVED PAGE Desvelo / Shopify-style final ========================================== */ /* Ocultar contenido nativo de WooCommerce */ body.woocommerce-order-received .woocommerce-order > p, body.woocommerce-order-received .woocommerce-order-overview, body.woocommerce-order-received .woocommerce-order-details, body.woocommerce-order-received .woocommerce-customer-details, body.woocommerce-order-received .woocommerce-columns--addresses, body.woocommerce-order-received .woocommerce-thankyou-order-received { display: none !important; } /* Base funcional */ body.woocommerce-order-received, body.woocommerce-order-received .entry-content, body.woocommerce-order-received .woocommerce, body.woocommerce-order-received .woocommerce-order, body.woocommerce-order-received .desvelo-thankyou, body.woocommerce-order-received .desvelo-thankyou * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0 !important; color: #111 !important; } /* Contenedor general */ body.woocommerce-order-received .desvelo-thankyou { max-width: 1050px !important; margin: 110px auto 80px !important; padding: 0 24px !important; } /* Grid principal */ body.woocommerce-order-received .desvelo-thankyou__layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 420px !important; gap: 40px !important; align-items: start !important; } /* Columna derecha alineada con la primera caja izquierda */ @media (min-width: 1025px) { body.woocommerce-order-received .desvelo-thankyou__sidebar { margin-top: 86px !important; } } /* ========================================== HEADER CONFIRMATION ========================================== */ body.woocommerce-order-received .desvelo-thankyou__header { display: flex !important; align-items: center !important; gap: 22px !important; margin-bottom: 28px !important; } body.woocommerce-order-received .desvelo-thankyou__icon { flex: 0 0 auto !important; width: 56px !important; height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.woocommerce-order-received .desvelo-thankyou__icon svg circle { stroke: #4FA06A !important; } body.woocommerce-order-received .desvelo-thankyou__icon svg path { stroke: #4FA06A !important; stroke-linecap: square !important; stroke-linejoin: miter !important; } body.woocommerce-order-received .desvelo-thankyou__order-number { font-size: 14px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #6f6f6f !important; margin: 0 0 4px !important; } body.woocommerce-order-received .desvelo-thankyou__header h1 { font-size: 22px !important; line-height: 1.2 !important; font-weight: 600 !important; margin: 0 !important; color: #111 !important; } /* ========================================== CARDS BASE ========================================== */ body.woocommerce-order-received .desvelo-card { border: 1px solid #d8d8d8 !important; background: #fff !important; margin-bottom: 14px !important; box-shadow: none !important; } /* Cabeceras principales */ body.woocommerce-order-received .desvelo-card h2 { font-size: 18px !important; line-height: 1.3 !important; font-weight: 600 !important; margin: 0 0 10px !important; color: #111 !important; -webkit-text-fill-color: #111 !important; } /* Subcabeceras */ body.woocommerce-order-received .desvelo-card h3 { font-size: 15px !important; line-height: 1.35 !important; font-weight: 600 !important; margin: 0 0 8px !important; color: #111 !important; -webkit-text-fill-color: #111 !important; } /* Textos */ body.woocommerce-order-received .desvelo-card p, body.woocommerce-order-received .desvelo-card div, body.woocommerce-order-received .desvelo-card span, body.woocommerce-order-received .desvelo-card li { font-size: 15px !important; line-height: 1.5 !important; font-weight: 400 !important; color: #111 !important; } /* ========================================== CONFIRMATION CARD ========================================== */ body.woocommerce-order-received .desvelo-card--confirmation { padding: 22px 26px !important; } body.woocommerce-order-received .desvelo-card--confirmation h2 { margin-bottom: 8px !important; } body.woocommerce-order-received .desvelo-card--confirmation p { margin: 0 !important; color: #444 !important; } /* ========================================== PAYMENT INSTRUCTIONS CARD ========================================== */ body.woocommerce-order-received .desvelo-card--instructions { padding: 22px 26px !important; } body.woocommerce-order-received .desvelo-card--instructions p { margin: 0 0 6px !important; } body.woocommerce-order-received .desvelo-card--instructions p:last-child { margin-bottom: 0 !important; } /* ========================================== CUSTOMER INFORMATION ========================================== */ body.woocommerce-order-received .desvelo-card--customer { padding: 22px 26px !important; } body.woocommerce-order-received .desvelo-card--customer h2 { margin-bottom: 18px !important; } body.woocommerce-order-received .desvelo-customer-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 40px !important; } body.woocommerce-order-received .desvelo-customer-block p, body.woocommerce-order-received .desvelo-customer-block .desvelo-address, body.woocommerce-order-received .desvelo-customer-block .desvelo-address-extra { margin: 0 !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 400 !important; } /* ========================================== ORDER SUMMARY ========================================== */ body.woocommerce-order-received .desvelo-card--summary { padding: 0 !important; overflow: hidden !important; } body.woocommerce-order-received .desvelo-card--summary h2 { padding: 22px 24px !important; margin: 0 !important; border-bottom: 1px solid #d8d8d8 !important; background: #f7f7f7 !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 600 !important; } body.woocommerce-order-received .desvelo-summary-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 18px !important; padding: 18px 24px !important; border-bottom: 1px solid #d8d8d8 !important; } body.woocommerce-order-received .desvelo-summary-row:last-child { border-bottom: 0 !important; } body.woocommerce-order-received .desvelo-summary-label, body.woocommerce-order-received .desvelo-summary-value { font-size: 15px !important; line-height: 1.45 !important; font-weight: 400 !important; color: #111 !important; } body.woocommerce-order-received .desvelo-summary-value { text-align: right !important; white-space: nowrap !important; } body.woocommerce-order-received .desvelo-summary-meta { color: #666 !important; font-size: 14px !important; } body.woocommerce-order-received .desvelo-summary-variation { display: block !important; } body.woocommerce-order-received .desvelo-summary-row .shipped_via { color: #666 !important; font-size: 14px !important; } body.woocommerce-order-received .desvelo-summary-row--order_total .desvelo-summary-label, body.woocommerce-order-received .desvelo-summary-row--order_total .desvelo-summary-value { font-weight: 600 !important; } /* Pago fallido: icono en rojo */ body.woocommerce-order-received .desvelo-thankyou--failed .desvelo-thankyou__icon svg circle, body.woocommerce-order-received .desvelo-thankyou--failed .desvelo-thankyou__icon svg path { stroke: #b3261e !important; } /* Pago fallido: botón para reintentar */ body.woocommerce-order-received .desvelo-card--failed { border-color: #b3261e !important; } body.woocommerce-order-received .desvelo-card--failed p.desvelo-thankyou__actions { margin-top: 18px !important; } body.woocommerce-order-received .desvelo-thankyou a.desvelo-thankyou__button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 180px !important; height: 48px !important; padding: 0 28px !important; background: #111 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 14px !important; line-height: 1 !important; text-decoration: none !important; } body.woocommerce-order-received .desvelo-thankyou a.desvelo-thankyou__button:hover { color: #999 !important; -webkit-text-fill-color: #999 !important; } /* Total más marcado */ body.woocommerce-order-received .desvelo-summary-row:nth-last-child(2) .desvelo-summary-label, body.woocommerce-order-received .desvelo-summary-row:nth-last-child(2) .desvelo-summary-value { font-weight: 600 !important; } /* ========================================== LINKS / GLOBAL EFFECT RESET ========================================== */ body.woocommerce-order-received .desvelo-thankyou a { font-family: Arial, Helvetica, sans-serif !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; letter-spacing: 0 !important; color: #111 !important; -webkit-text-fill-color: #111 !important; background: transparent !important; opacity: 1 !important; position: static !important; transform: none !important; } body.woocommerce-order-received .desvelo-thankyou a::before, body.woocommerce-order-received .desvelo-thankyou a::after { content: none !important; display: none !important; } /* ========================================== FOOTER ALIGNMENT ========================================== */ body.woocommerce-order-received .desvelo-checkout-footer { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; margin-top: 48px !important; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 1024px) { body.woocommerce-order-received .desvelo-thankyou__layout { grid-template-columns: 1fr !important; gap: 32px !important; } body.woocommerce-order-received .desvelo-thankyou__sidebar { margin-top: 0 !important; order: 2 !important; } body.woocommerce-order-received .desvelo-thankyou__main { order: 1 !important; } } @media (max-width: 767px) { body.woocommerce-order-received .desvelo-thankyou { margin-top: 72px !important; padding: 0 16px !important; } body.woocommerce-order-received .desvelo-thankyou__header { align-items: flex-start !important; gap: 16px !important; margin-bottom: 24px !important; } body.woocommerce-order-received .desvelo-thankyou__icon { width: 48px !important; height: 48px !important; } body.woocommerce-order-received .desvelo-thankyou__icon svg { width: 48px !important; height: 48px !important; } body.woocommerce-order-received .desvelo-thankyou__header h1 { font-size: 20px !important; } body.woocommerce-order-received .desvelo-customer-grid { grid-template-columns: 1fr !important; gap: 22px !important; } body.woocommerce-order-received .desvelo-summary-row { padding: 16px 18px !important; } body.woocommerce-order-received .desvelo-card--confirmation, body.woocommerce-order-received .desvelo-card--instructions, body.woocommerce-order-received .desvelo-card--customer { padding: 18px !important; } } /* Ocultar la línea de disponibilidad de Astra */ .single-product .ast-stock-detail { display: none !important; } /* ========================================================================= 3. Menú en móvil (antes Código personalizado de Elementor «Popup Header State») ========================================================================= */ @media (max-width: 1024px) { body:not(.desvelo-menu-open) #elementor-popup-modal-94, body:not(.desvelo-menu-open) #elementor-popup-modal-94 .dialog-lightbox-widget, body:not(.desvelo-menu-open) #elementor-popup-modal-94 .dialog-widget-overlay { background: transparent !important; } } /* ========================================================================= 4. Carrito vacío (antes snippet «Cart Vacío»; el HTML lo pone functions.php) ========================================================================= */ /* Con el carrito vacío solo se ve el bloque propio: ni avisos ni el botón «Return to shop» de WooCommerce */ body.woocommerce-cart .woocommerce:has(.desvelo-empty-cart) .woocommerce-notices-wrapper, body.woocommerce-cart .desvelo-empty-cart ~ .return-to-shop { display: none !important; } body.woocommerce-cart .entry-content { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 170px 16px 180px !important; text-align: center !important; } body.woocommerce-cart .desvelo-empty-cart { max-width: 620px !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; color: var(--e-global-color-primary) !important; } body.woocommerce-cart .desvelo-empty-cart h1 { display: block !important; font-family: inherit !important; font-size: 30px !important; line-height: 1.15 !important; font-weight: 400 !important; letter-spacing: -0.04em !important; color: var(--e-global-color-primary) !important; -webkit-text-fill-color: var(--e-global-color-primary) !important; margin: 0 0 18px !important; text-align: center !important; opacity: 1 !important; } body.woocommerce-cart .desvelo-empty-cart p { display: block !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.4 !important; font-weight: 400 !important; letter-spacing: -0.03em !important; color: var(--e-global-color-primary) !important; -webkit-text-fill-color: var(--e-global-color-primary) !important; max-width: 560px !important; margin: 0 auto 28px !important; text-align: center !important; opacity: 1 !important; } body.woocommerce-cart .desvelo-empty-cart-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 200px !important; height: 50px !important; min-width: 200px !important; min-height: 50px !important; padding: 0 !important; margin: 0 auto !important; background: var(--e-global-color-primary) !important; color: var(--e-global-color-secondary) !important; -webkit-text-fill-color: var(--e-global-color-secondary) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: inherit !important; font-size: 16px !important; line-height: 1 !important; font-weight: 400 !important; letter-spacing: -0.03em !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; opacity: 1 !important; position: relative !important; transform: none !important; } body.woocommerce-cart .desvelo-empty-cart-button::before, body.woocommerce-cart .desvelo-empty-cart-button::after { content: none !important; display: none !important; } body.woocommerce-cart .desvelo-empty-cart-button:hover { background: var(--e-global-color-primary) !important; color: var(--e-global-color-secondary) !important; -webkit-text-fill-color: var(--e-global-color-secondary) !important; opacity: 0.75 !important; } @media (max-width: 767px) { body.woocommerce-cart .entry-content { padding: 140px 16px 140px !important; } body.woocommerce-cart .desvelo-empty-cart { max-width: 100% !important; } body.woocommerce-cart .desvelo-empty-cart h1 { font-size: 30px !important; } body.woocommerce-cart .desvelo-empty-cart p { font-size: 16px !important; max-width: 340px !important; } body.woocommerce-cart .desvelo-empty-cart-button { width: 200px !important; min-width: 200px !important; height: 54px !important; min-height: 54px !important; font-size: 16px !important; } } /* ========================================================================= 5. Textos legales, cuenta y ficha (revisión de errores e incongruencias) ========================================================================= */ /* Los estilos globales de Elementor (Ajustes del sitio) ponen los enlaces a 40 px en color crema y los h2 en crema: están pensados para la portada y los fondos oscuros. En los textos sobre fondo blanco no se leían: - la política de cookies de Complianz (/cookie-policy-eu/ y la pestaña «Cookie Policy» de Legals); - los enlaces dentro de los apartados de Legals (p. ej. el de la privacidad de Stripe); - los enlaces de My account («Lost your password?» y, con sesión, los del panel del cliente). Aquí toman el tamaño y el color del texto que los rodea. */ #cmplz-document h2 { color: #1D1D1B; } #cmplz-document a, body.page-id-2890 details a, body.woocommerce-account .woocommerce a:not(.button) { color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; } /* Ficha: los apartados del acordeón sin contenido no se muestran (16 de 17 productos no tienen «Composition» y 12 no tienen «Details»; antes se abrían vacíos). Al rellenarlos en el producto, aparecen solos. */ body.single-product .e-n-accordion-item:not(:has(.elementor-widget)) { /* :has() no se puede anidar */ display: none; } /* «Try again» tras un pago fallido (Pay for order, /checkout/order-pay/…): es el formulario clásico de WooCommerce y salía sin adaptar, con el botón azul de Astra y el enlace de privacidad a 40 px en crema. Mismo botón y mismo texto legal que el checkout. */ body.woocommerce-order-pay #place_order { min-height: 48px; background: #111 !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: .8px !important; text-transform: none !important; } body.woocommerce-order-pay #place_order:hover { opacity: .85; } body.woocommerce-order-pay .woocommerce-privacy-policy-text, body.woocommerce-order-pay .woocommerce-privacy-policy-text a { font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; color: #111 !important; } body.woocommerce-order-pay .woocommerce-privacy-policy-text a { text-decoration: underline; text-underline-offset: 3px; }