/* Destellos Candles — CSS de marca del tema hijo. Se carga despues de 'ecomus' y 'ecomus-woocommerce-style' (ver la dependencia declarada en functions.php), asi que no hay ni un !important en todo el archivo. La cabecera del tema NO va aqui: vive en style.css, que es el unico archivo que WordPress lee para identificar el tema. */ /* ========================================================================== 1. TOKENS DE MARCA Ecomus declara todo en :root como variables CSS. Aqui solo las redefinimos: ni un !important, ni una regla duplicada. ========================================================================== */ :root { /* --- Color · identidad v6 ------------------------------------------ */ --dst-rosa: #B96B70; /* accion: botones, precio, enfasis */ --dst-rosa-texto: #9E4F55; /* rosa legible en texto pequeno (5,1:1) */ --dst-rosa-claro: #E7A9AD; /* rosa sobre fondo oscuro */ --dst-arcilla: #C07C81; /* superficies, bandas, sello */ --dst-nude: #F9D8D2; /* insignias y filas alternas */ --dst-oscuro: #2C2427; /* texto y fondos con peso */ --dst-crema: #FBF6F2; /* fondo */ --dst-crema-2: #F5EBE6; /* segundo fondo */ --dst-papel: #FFFFFF; --dst-arena: #E8D8D2; /* filetes y bordes */ --dst-humo: #8A7278; /* texto secundario */ /* --- Degradados de marca ------------------------------------------ */ --dst-degradado-rosa: linear-gradient(150deg, #F9D8D2 0%, #E7A9AD 42%, #C07C81 74%, #9E4F55 100%); --dst-degradado-oscuro: linear-gradient(150deg, #C3A9AE 0%, #8A6B70 40%, #55464A 80%, #2C2427 100%); /* --- Sobrescritura de Ecomus: color ------------------------------- */ --em-color__base: var(--dst-humo); --em-color__dark: var(--dst-oscuro); --em-color__light: var(--dst-papel); --em-color__primary: var(--dst-rosa); --em-color__grayer: var(--dst-arena); --em-text-color-on-primary: #FFFFFF; --em-link-color: var(--dst-oscuro); --em-link-color-hover: var(--dst-rosa-texto); --em-header-color: var(--dst-oscuro); --em-color-price-sale: var(--dst-rosa-texto); --em-border-color: var(--dst-arena); --em-loading-color: var(--dst-rosa); /* --- Tipografia ---------------------------------------------------- */ /* Tokens que faltaban y se estaban usando solo como valor de reserva. Salen del prototipo: docs/referencia-visual/1-tienda-y-portada.dc.html */ --dst-rosa-oscuro: #9E4F55; /* CTA, precios, acentos sobre claro */ /* Texto corrido del prototipo. OJO: --dst-rosa-texto NO es esto, es un rosa legible para acentos (#9E4F55). Usarlo para párrafos dejaba la página entera en rosa y sin contraste. */ --dst-texto: #6E5A60; --dst-apagado: #7A666D; /* era #8A7278: a 11-14px se quedaba en 4,4 de contraste sobre crema */ /* texto secundario */ --dst-rosa-suave: #F9D8D2; /* fondos de pastilla */ --dst-crema-3: #F5EBE6; /* bandas de sección */ --dst-linea: #D9CFC2; /* bordes de botón contorno */ --dst-vino: #6B3F44; /* texto sobre rosa claro */ --em-font__main: 'Outfit', 'Albert Sans', Arial, sans-serif; --em-line-height__body: 1.65; --em-heading-font: 'Prata', Georgia, serif; --em-heading-color: var(--dst-oscuro); --em-heading-font-weight: 400; /* Prata tiene un solo peso */ --em-heading-line-height: 1.14; --em-heading-text-transform: none; /* Nombres propios de las dos fuentes. Estaban usados en 32 sitios de las hojas del hijo —fichas, checkout, portada— pero NUNCA definidos: `font-family: var(--dst-titulo)` sin alternativa es una declaración inválida, así que el navegador la tiraba y el texto se quedaba con la fuente heredada. Es decir, en esos 32 sitios la tipografía de marca no llegaba a aplicarse y nadie lo veía porque el resultado era simplemente "la otra fuente". */ --dst-titulo: var(--em-heading-font); --dst-cuerpo: var(--em-font__main); /* --- Radios: nada cuadrado --------------------------------------- */ --em-rounded-xs: 8px; --em-rounded-sm: 14px; --em-rounded-md: 20px; --em-rounded-full: 9999px; --em-image-rounded: 22px; --em-image-rounded-post-card: 22px; --em-image-rounded-featured-post: 28px; --em-image-rounded-product-card: 22px; --em-image-rounded-product-gallery: 28px; --em-image-rounded-product-thumbnail: 14px; --em-button-rounded: 9999px; --em-input-rounded: 9999px; /* --- Botones ------------------------------------------------------ */ --em-button-color: #FFFFFF; --em-button-bg-color: var(--dst-rosa); --em-button-border-color: var(--dst-rosa); --em-button-color-hover: #FFFFFF; --em-button-bg-color-hover: var(--dst-rosa-texto); --em-button-border-color-hover: var(--dst-rosa-texto); --em-button-padding-top: 17px; --em-button-padding-right: 30px; --em-button-padding-bottom: 16px; --em-button-padding-left: 30px; --em-button-font-size: 13px; --em-button-font-weight: 600; /* --- Campos de formulario ---------------------------------------- */ --em-input-color: var(--dst-oscuro); --em-input-border-color: var(--dst-arena); --em-input-border-color-hover: var(--dst-rosa); --em-input-bg-color: #FFFFFF; /* --- Ritmo vertical: mas aire entre bloques ---------------------- */ --em-swiper-slide-spacing: 24px; --dst-seccion-y: clamp(56px, 7vw, 116px); } /* ========================================================================== 2. RITMO Y AIRE El diagnostico visual era "todo pegado". Las secciones de Elementor heredan un ritmo minimo comun. ========================================================================== */ .dst-seccion > .elementor-container, .dst-seccion { padding-top: var(--dst-seccion-y); padding-bottom: var(--dst-seccion-y); } /* ========================================================================== 3. BOTONES Y SOMBRA DE MARCA ========================================================================== */ .button, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { box-shadow: 0 10px 24px rgba(185, 107, 112, 0.26); transition: transform 0.28s cubic-bezier(0.16, 0.8, 0.3, 1), box-shadow 0.28s, background-color 0.28s; } .button:hover, .wp-element-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(185, 107, 112, 0.36); } /* Boton secundario: contorno, mismo radio */ .dst-boton-secundario { background: #FFFFFF; color: var(--dst-oscuro); border: 1px solid var(--dst-arena); box-shadow: none; } .dst-boton-secundario:hover { border-color: var(--dst-rosa); background: #FFFFFF; color: var(--dst-oscuro); } /* ========================================================================== 4. TARJETA DE PRODUCTO ========================================================================== */ .product-card { background: #FFFFFF; border: 1px solid var(--dst-arena); border-radius: 26px; padding: 12px; transition: transform 0.35s cubic-bezier(0.16, 0.8, 0.3, 1), box-shadow 0.35s, border-color 0.35s; } .product-card:hover { transform: translateY(-6px); border-color: var(--dst-rosa); box-shadow: 0 22px 40px rgba(44, 36, 39, 0.14); } /* Valoracion. Clases reales del padre, verificadas en inc/woocommerce/loop/product-card/base.php:517-523: .ecomus-rating envuelve, .star-rating es del nucleo de WooCommerce y .max-rating.rating-stars es el estado vacio de Ecomus. */ .ecomus-rating { gap: 6px; } .star-rating span::before, .ecomus-rating .star-rating span::before { color: var(--dst-rosa); } .ecomus-rating .max-rating.rating-stars::before { color: var(--dst-arena); } /* Chip de stock: azul para disponible, naranja para urgencia real */ .dst-chip-stock { display: inline-block; border-radius: 9999px; padding: 4px 10px; font-size: 11px; font-weight: 500; background: var(--dst-crema-2); color: var(--dst-humo); } .dst-chip-stock.dst-ultimas { background: var(--dst-nude); color: var(--dst-rosa-texto); } /* ========================================================================== 5. INSIGNIAS ========================================================================== */ .dst-badge { border-radius: 9999px; padding: 6px 12px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; background: #FFFFFF; color: var(--dst-oscuro); } .dst-badge--destacado { background: var(--dst-rosa); color: #FFFFFF; } /* ========================================================================== 6. MEGA MENU No a ancho completo: caja con radio, como pidio la direccion de marca. ========================================================================== */ .ecomus-menu .mega-menu > .sub-menu, .mega-menu-wrapper { max-width: 1180px; margin-inline: auto; border-radius: 0 0 32px 32px; box-shadow: 0 26px 50px rgba(44, 36, 39, 0.14); overflow: hidden; } /* ========================================================================== 7. CINTA SUPERIOR Y PIE ========================================================================== */ .campaign-bar { background: linear-gradient(90deg, #2C2427 0%, #55464A 52%, #2C2427 100%); color: var(--dst-crema); } .site-footer { background: var(--dst-oscuro); color: var(--dst-crema); } .site-footer a { color: var(--dst-crema); transition: color 0.22s, padding-left 0.22s; } .site-footer a:hover { color: var(--dst-rosa-claro); padding-left: 5px; } /* ========================================================================== 8. BARRA INFERIOR MOVIL Ecomus la trae; aqui solo la vestimos. ========================================================================== */ @media (max-width: 991px) { .mobile-navigation-bar { background: #FFFFFF; border-top: 1px solid var(--dst-arena); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(44, 36, 39, 0.12); } .mobile-navigation-bar .active, .mobile-navigation-bar a:hover { color: var(--dst-rosa); } } /* ========================================================================== 9. SOPORTE FLOTANTE ========================================================================== */ .dst-soporte { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; background: var(--dst-oscuro); color: #FFFFFF; border-radius: 9999px; padding: 14px 20px; font-size: 13px; font-weight: 500; box-shadow: 0 16px 34px rgba(44, 36, 39, 0.28); transition: transform 0.28s, background-color 0.28s; } .dst-soporte:hover { transform: translateY(-3px); background: var(--dst-rosa); color: #FFFFFF; } @media (max-width: 991px) { .dst-soporte { bottom: 78px; /* por encima de la barra inferior movil */ } } /* ========================================================================== 10. ACCESIBILIDAD El naranja de marca no llega a 4.5:1 en texto pequeno: para eso existe el naranja oscuro. Esta regla evita que se cuele en textos chicos. ========================================================================== */ small, .wc-block-components-product-price, .dst-texto-pequeno { color: var(--dst-rosa-texto); } :focus-visible { outline: 2px solid var(--dst-rosa); outline-offset: 2px; } /* ========================================================================== 11. PROGRESO DE ENVÍO GRATIS Lo pinta el shortcode [destellos_progreso_envio] del plugin. ========================================================================== */ .dst-progreso-envio__texto { margin: 0 0 9px; font-size: 13px; color: var(--dst-humo); } .dst-progreso-envio__pista { height: 8px; border-radius: 9999px; background: #F1E9DF; overflow: hidden; } .dst-progreso-envio__barra { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #E7A9AD, var(--dst-rosa)); transition: width 0.5s cubic-bezier(0.16, 0.8, 0.3, 1); } /* ========================================================================== 12. VENTA CRUZADA EN LA CESTA Complemento real, nunca al lado del botón de pagar. ========================================================================== */ /* Aquí vivía una hoja de estilos para una venta cruzada que nunca se llegó a pintar: ningún PHP usaba estas clases. Al construirla de verdad (inc/cesta.php + checkout.css) las dos definiciones chocaban, y ganaba la muerta: el título salía en 11 px, en mayúsculas y con interletrado, en vez del titular de la marca. Se borra la que no se usaba. */ /* ========================================================================== 13. BLOQUE DE REGALO EN CHECKOUT ========================================================================== */ .dst-bloque-regalo { background: var(--dst-papel); border: 1px solid var(--dst-arena); border-radius: 24px; padding: 22px; margin-top: 14px; } .dst-bloque-regalo h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 14px; } .dst-bloque-regalo textarea { border-radius: 18px; min-height: 90px; line-height: 1.5; } .dst-campo-mensaje { margin-top: 12px; } /* ========================================================================== 14. VALORACIÓN EN LA TARJETA Ecomus la pinta con .ecomus-rating detrás de la opción product_card_rating del Customizer; aquí solo se viste. ========================================================================== */ .dst-valoracion, .ecomus-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; } .dst-valoracion__nota { font-size: 12px; font-weight: 500; } /* El contador de reseñas lo pinta el padre como .review-count (base.php:517-523), no como .dst-valoracion__total: se viste el real. */ .ecomus-rating .review-count, .dst-valoracion__total { font-size: 12px; color: var(--dst-humo); } /* ========================================================================== 15. PRECIO EN TARJETA Nunca partido en dos líneas: el símbolo € viaja con la cifra. ========================================================================== */ .product-card .price, .woocommerce ul.products li.product .price { white-space: nowrap; color: var(--dst-rosa-texto); font-weight: 600; } /* ========================================================================== PIE DE PÁGINA Montado desde inc/footer.php sobre el hook ecomus_footer del padre. ========================================================================== */ .dst-pie{background:var(--dst-oscuro);color:var(--dst-crema);padding:56px 0 0} .dst-pie__inner{max-width:1320px;margin:0 auto;padding:0 20px; display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .dst-pie__col h3{font-family:var(--em-heading-font);font-weight:400;font-size:1rem; color:var(--dst-crema);margin:0 0 16px} .dst-pie__col ul{list-style:none;margin:0;padding:0} .dst-pie__col li{margin-bottom:10px} .dst-pie a{color:var(--dst-crema);text-decoration:none;transition:color .2s} .dst-pie a:hover,.dst-pie a:focus-visible{color:var(--dst-rosa-claro)} .dst-pie p{color:var(--dst-arena);margin:0 0 10px;font-size:.9375rem;line-height:1.6} .dst-pie__origen{opacity:.75;font-size:.875rem} .dst-pie__nombre{font-family:var(--em-heading-font);font-size:1.25rem} .dst-pie__pago{letter-spacing:.02em} .dst-pie__legal{max-width:1320px;margin:40px auto 0;padding:20px; border-top:1px solid rgba(232,216,210,.18); display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center; font-size:.875rem;color:var(--dst-arena)} @media (max-width:991px){ .dst-pie__inner{grid-template-columns:1fr 1fr;gap:32px} } @media (max-width:575px){ .dst-pie__inner{gap:28px 20px} } /* ========================================================================== ANCHO COMPLETO Neutraliza .em-container de Ecomus (max-width:1540px; padding-inline:50px) en las plantillas que traen su propio contenedor interno. ========================================================================== */ /* Solo el contenedor del CONTENIDO. La cabecera y el pie conservan el suyo: neutralizarlo en todos cortaba el logo y el carrito contra los bordes. */ body.dst-ancho-completo .site-content > .em-container{ max-width:none; padding-inline:0; } /* Red de seguridad: nada debe provocar scroll horizontal en ningún ancho */ html,body{overflow-x:clip} img,video,svg,iframe,table{max-width:100%} /* ========================================================================== LOGOTIPO EN LA CABECERA El padre limita .header-logo > a svg con logo_dimension; el logotipo se compone en HTML, así que se le da su propio tamaño y se anula ese límite. ========================================================================== */ .header-logo__svg .dst-logo-bloque{display:inline-block;text-align:center} .header-logo__svg .dst-logo{color:var(--dst-rosa)} .header-logo > a{display:inline-flex;align-items:center} /* Regla del manual: por debajo de 34px de altura de x, solo el isotipo. En móvil se oculta el descriptor y se reduce, manteniendo la palabra legible. */ @media (max-width:767px){ .header-logo__svg .dst-logo{font-size:26px !important} .header-logo__svg .dst-logo__descriptor{display:none} } /* ========================================================================== LOGOTIPO · medidas tomadas de referencia-visual/4-identidad-v6.dc.html palabra : font-weight 200 · letter-spacing .012em · color #9E4F55 destello : height .4833em · top .01em · viewBox 0 0 114 100 · trazo 11.03 candles : clamp(10px,1.3vw,15px) · w300 · tracking .44em · text-indent .44em ========================================================================== */ /* El enlace y su envoltorio iban en display:inline con line-height de 14 px, así que la caja medía 23 px mientras dentro había un logotipo de 26 px más el descriptor: se salían por arriba y por abajo. En la cabecera estaba resuelto sólo para .header-logo__svg; aquí vale para todos los sitios. */ .dst-logo-enlace,.dst-logo-bloque{display:inline-block;text-decoration:none} .dst-logo{ font-weight:200; letter-spacing:.012em; line-height:1.24; color:var(--dst-rosa-texto); } .dst-logo__e{ width:.5510em; /* 114/100 x .4833 — proporción del viewBox */ height:.4833em; position:relative; top:.01em; } .dst-logo__descriptor{ display:block; font-family:'Outfit',sans-serif; font-weight:300; font-size:clamp(10px,1.3vw,15px); letter-spacing:.44em; text-indent:.44em; /* compensa el tracking del último carácter */ text-transform:uppercase; color:var(--dst-rosa-texto); margin-top:clamp(6px,.9vw,12px); text-align:center; } .header-logo__svg .dst-logo__descriptor{font-size:10px;margin-top:4px} /* Logotipo de la cabecera: PNG original 2712x914 (ratio 2.967). Se fija por altura para que no dependa del ancho del contenedor. */ .header-logo__svg .dst-logotipo{ display:block; height:46px; width:auto; max-width:none; } @media (max-width:991px){ .header-logo__svg .dst-logotipo{height:38px} } @media (max-width:575px){ .header-logo__svg .dst-logotipo{height:32px} } .dst-pie__inner{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr} @media (max-width:1199px){.dst-pie__inner{grid-template-columns:1fr 1fr 1fr}} @media (max-width:767px){.dst-pie__inner{grid-template-columns:1fr 1fr}} /* A una sola columna el pie medía 1.171 px en un móvil de 375: casi una pantalla y media sólo de enlaces. Se quedan las dos columnas también en pantallas estrechas —las listas son cortas y caben— y el bloque de marca ocupa el ancho entero, que es el único que necesita línea larga. El aviso legal vuelve a ir en fila envolvente en vez de apilado. */ @media (max-width:479px){ .dst-pie__inner{grid-template-columns:1fr 1fr;gap:26px 20px} .dst-pie__inner > .dst-pie__marca{grid-column:1 / -1} .dst-pie__col h3{margin-bottom:12px} .dst-pie__col li{margin-bottom:8px} .dst-pie__col li a{font-size:.9375rem} .dst-pie__legal{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:28px} } /* ── Hero a sangre: sin hueco muerto bajo la cabecera ─────────────── Ecomus da padding-top a .site-content (54px móvil / 78px escritorio). En las plantillas de ancho completo el hero empieza pegado a la cabecera, así que ese hueco se ve como una banda blanca vacía. Solo afecta a portada y a la plantilla "Ancho completo": las páginas normales (legales, FAQ) conservan su respiración. */ body.dst-ancho-completo .site-content{ padding-top:0; } /* ── Producto sin foto: que se vea el marcador ────────────────────── Cuando un producto no tiene imagen destacada, Ecomus monta igualmente el carrusel Swiper pero sin diapositivas. Con "autoHeight" activo, Swiper le calcula altura 0 y, como el contenedor lleva overflow:hidden, recorta el marcador de WooCommerce: la ficha se ve con un hueco en blanco, como rota. Solo actúa sobre .woocommerce-product-gallery--without-images, la clase que WooCommerce añade justo en ese caso, así que las fichas con foto real (la inmensa mayoría) no se tocan. Lleva !important porque Swiper escribe la altura en el estilo en línea. */ .woocommerce-product-gallery--without-images, .woocommerce-product-gallery--without-images .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery--without-images .swiper-wrapper{ height:auto !important; overflow:visible; } .woocommerce-product-gallery--without-images .woocommerce-product-gallery__image{ width:100%; } .woocommerce-product-gallery--without-images .woocommerce-product-gallery__image img{ width:100%;height:auto;display:block;border-radius:12px; } /* ── Páginas de texto: jerarquía legible ──────────────────────────── Ecomus aplica a estas páginas la escala de los títulos de portada: h2 a 68px, h3 a 52px y los párrafos a 14px. El titular acababa siendo casi cuatro veces el texto que explica, y las preguntas frecuentes y las legales se leían mal. Se acota a body.page-template-default, que son exactamente las páginas escritas en el editor (FAQ, legales, envíos, devoluciones). La portada y las plantillas de ancho completo traen su propia maqueta y no entran. Se excluyen carrito, pasarela y Mi cuenta: también son "page-template-default", y este ancho de lectura los estrangulaba. En la pasarela dejaba el resumen del pedido en una columna de 281 px donde los nombres de los productos se partían letra a letra. Ahí no se lee un texto: se rellena un formulario. */ body.page-template-default:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-content .em-container > article{ max-width:72ch; margin-inline:auto; font-size:1.0625rem; /* 17px */ line-height:1.75; color:var(--dst-oscuro); } /* Estas reglas visten las páginas de TEXTO —aviso legal, preguntas frecuentes, nosotras—: ancho de lectura, párrafos grandes, enlaces subrayados. Antes colgaban de `body.page-template-default`, que es cualquier página con la plantilla por defecto… incluidos el carrito, el checkout y "mi cuenta". Ahí no pintan nada y encima ganaban por peso: el título de las sugerencias del carrito salía en 16 px y en color de párrafo en vez de en el titular de la marca, y los nombres de producto salían subrayados en rosa. Ahora cuelgan de una clase propia que se pone en PHP sólo donde toca (functions.php, destellos_clase_pagina_texto). Así no hay que ir añadiendo un :not() cada vez que aparece una página nueva de tienda. */ body.dst-pagina-texto .site-content article h2{ font-family:var(--em-heading-font); font-weight:400; font-size:clamp(1.55rem,2.6vw,2.05rem); line-height:1.18; letter-spacing:-0.015em; margin:2.6em 0 0.5em; padding-top:1.4rem; border-top:1px solid var(--dst-nude,#E8D8D2); color:var(--dst-oscuro); } body.dst-pagina-texto .site-content article h2:first-child{ margin-top:0;padding-top:0;border-top:0; } body.dst-pagina-texto .site-content article h3{ font-family:var(--em-font__main); font-weight:600; font-size:1.125rem; /* 18px */ line-height:1.4; letter-spacing:0; margin:1.9em 0 0.35em; color:var(--dst-oscuro); } body.dst-pagina-texto .site-content article p, body.dst-pagina-texto .site-content article li{ font-size:1.0625rem; line-height:1.75; color:var(--dst-texto,#6E5A60); margin:0 0 1em; } body.dst-pagina-texto .site-content article strong{ color:var(--dst-oscuro);font-weight:600; } /* Subrayar los enlaces está bien en una página de texto —aviso legal, preguntas frecuentes— porque ayuda a distinguirlos del párrafo. En el carrito no: allí "enlace" es el nombre de un producto o el botón de finalizar la compra, y salían subrayados y en rosa como si fueran notas al pie. Se excluyen las páginas de tienda, igual que ya se hacía con el ancho de lectura. */ body.page-template-default:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-content article a{ color:var(--dst-rosa);text-decoration:underline;text-underline-offset:3px; } body.dst-pagina-texto .site-content article ul, body.dst-pagina-texto .site-content article ol{ padding-left:1.15em;margin:0 0 1.2em; } body.dst-pagina-texto .site-content article li{margin-bottom:.45em} body.dst-pagina-texto .site-content article table{ width:100%;border-collapse:collapse;margin:1.2em 0 1.8em;font-size:.97rem; } body.dst-pagina-texto .site-content article th, body.dst-pagina-texto .site-content article td{ text-align:left;padding:.7em .8em;border-bottom:1px solid var(--dst-nude,#E8D8D2); } body.dst-pagina-texto .site-content article th{ font-weight:600;color:var(--dst-oscuro); } @media (max-width:600px){ body.page-template-default:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-content .em-container > article{font-size:1rem} body.dst-pagina-texto .site-content article p, body.dst-pagina-texto .site-content article li{font-size:1rem} } /* La descripción de categoría ocupaba todo el ancho del contenedor: líneas de más de 150 caracteres, que se leen mal. Se le da una medida cómoda. */ .shop-header__content .page-description, .term-description, .taxonomy-description{ max-width:70ch; margin-inline:auto; font-size:1.0625rem; line-height:1.7; color:var(--dst-texto,#6E5A60); } /* ── Logotipo de la cabecera ───────────────────────────────────────── El PNG original dedica solo un 8 % de su alto a "CANDLES": a 46 px el descriptor salía a 2,5 px, ilegible. Ahora la imagen es solo la palabra y el descriptor va como texto en Outfit, la fuente de la marca. */ .dst-marca{ display:inline-flex; flex-direction:column; align-items:center; gap:.34em; line-height:1; } .dst-marca__palabra{ display:block; height:20px; width:auto; max-width:none; } .dst-marca__descriptor{ font-family:var(--em-font__main,'Outfit',sans-serif); font-size:6.4px; font-weight:500; letter-spacing:.34em; text-indent:.34em; /* compensa el interletrado de la última letra */ text-transform:uppercase; color:var(--dst-rosa,#B96B70); white-space:nowrap; } @media (max-width:991px){ .dst-marca__palabra{height:18px} .dst-marca__descriptor{font-size:6px;letter-spacing:.3em;text-indent:.3em} } @media (max-width:575px){ .dst-marca__palabra{height:17px} .dst-marca__descriptor{font-size:5.6px;letter-spacing:.26em;text-indent:.26em} } /* ── Insignias del catálogo en la paleta de la marca ──────────────── Ecomus pinta el descuento con .sale-off sobre rojo #DB1215 y las de estado sobre gris #F2F2F2. Son los únicos colores ajenos a la paleta que quedaban en el catálogo. No se duplica la insignia: se reestila la que el tema ya trae. */ .sale-off, .woocommerce-badge.sale-off, .product .sale-off{ background:var(--dst-rosa,#B96B70) !important; color:#fff !important; border-radius:999px; font-size:11px; letter-spacing:.04em; font-weight:600; padding:5px 11px; } .woocommerce-badges .sold-out, .stock.sold-out.woocommerce-badge, .woocommerce-badges--single .stock-badge{ background:var(--dst-crema,#FBF6F2) !important; color:var(--dst-oscuro,#2C2427) !important; border:1px solid var(--dst-nude,#E8D8D2); border-radius:999px; font-size:11px; letter-spacing:.04em; font-weight:600; } /* Precio anterior tachado: gris neutro → apagado de la marca */ .price del, .price del .amount, .woocommerce-Price-amount del{ color:var(--dst-apagado,#7A666D) !important; opacity:.75; } .price ins, .price ins .amount{ color:var(--dst-rosa-oscuro,#9E4F55) !important; text-decoration:none; font-weight:600; } /* Chip de la tarjeta: gramaje en vez de escasez */ /* Etiqueta del formato bajo el precio. Estaba pegada al precio (0 px de separación medidos) y colgando como si se hubiera caído del renglón de arriba. En el prototipo estas etiquetas van en su propia fila, separadas, sobre el crema-3 y sin borde. */ .dst-chip-stock{ display:inline-block; background:var(--dst-crema-3,#F5EBE6); border:0; color:var(--dst-texto,#6E5A60); border-radius:999px; padding:4px 10px; font-size:11px; line-height:1.35; letter-spacing:.01em; margin-top:10px; } .dst-chip-stock--agotado{ background:transparent; border:1px solid var(--dst-nude,#E8D8D2); color:var(--dst-texto,#6E5A60); } /* Si algún día conviven dos etiquetas, que se pongan en fila y no pegadas. */ .dst-chip-stock + .dst-chip-stock{margin-left:6px} /* La insignia de descuento, en la paleta de la marca */ .onsale.woocommerce-badge, .dst-descuento{ background:var(--dst-rosa,#B96B70) !important; color:#fff !important; border-radius:999px; padding:5px 11px; font-size:11px; font-weight:600; letter-spacing:.04em; border:0; } /* ═══════════════════════════════════════════════════════════════════ PALETA COHERENTE EN TODA LA INTERFAZ El tema arrastra negro (#2C2427 / #000) en los estados de los botones y gris neutro en varios sitios. Aquí se lleva todo a la paleta de la marca. ═══════════════════════════════════════════════════════════════════ */ /* Precio del producto: el mismo tono en TODAS partes (tienda, portada, relacionados, vista rápida, carrusel). Antes en portada salía en tinta oscura y en tienda en rosa: dos precios distintos para el mismo producto. */ .product .price, .product .price .amount, .product .price ins .amount, ul.products .price, ul.products .price .amount, .dst-catalogo .price, .dst-catalogo .price .amount{ color:var(--dst-rosa-oscuro,#9E4F55); } .product .price del, .product .price del .amount{ color:var(--dst-apagado,#7A666D); opacity:.7; font-weight:400; } /* Botones del catálogo: hover en rosa, nunca en negro */ .product .button:hover, .product a.button:hover, .product .add_to_cart_button:hover, ul.products .product .button:hover, .ecomus-quickview-button:hover, .product-card-button:hover, .woocommerce-loop-product__link + .button:hover{ background:var(--dst-rosa,#B96B70) !important; border-color:var(--dst-rosa,#B96B70) !important; color:#fff !important; } .product .button:hover svg, .ecomus-quickview-button:hover svg{color:#fff !important;stroke:#fff !important} /* Botón principal del tema: negro → rosa, también en la ficha */ .single_add_to_cart_button, .woocommerce .single_add_to_cart_button{ background:var(--dst-rosa,#B96B70); border-color:var(--dst-rosa,#B96B70); border-radius:999px; } .single_add_to_cart_button:hover, .woocommerce .single_add_to_cart_button:hover{ background:var(--dst-rosa-oscuro,#9E4F55) !important; border-color:var(--dst-rosa-oscuro,#9E4F55) !important; color:#fff !important; } /* Vista rápida: esquinas más redondeadas, como el resto de la web */ .ecomus-quickview-content, .ecomus-quickview__content, .ecomus-modal__content, .ecomus-quickview .modal-content, .ecomus-popup__content{ border-radius:28px !important; overflow:hidden; } .ecomus-quickview-button{border-radius:999px} /* Botones y campos: el mismo radio en toda la web. OJO: aquí había un selector `button` a pelo. Alcanzaba a TODOS los botones del sitio, incluidos los que no son pastillas —las tarjetas de nivel y de aroma del constructor—, y como el tema les pone overflow:hidden, el radio de 999px recortaba su contenido en forma de óvalo: se comía la primera letra de las líneas bajas del nombre y casi todo el precio, y al pasar el ratón pintaba un óvalo rosa encima del texto. Comprobado antes de quitarlo: sin `button` solo cambian dos botones de la web, y los dos siguen redondos por la regla del propio tema. */ .button, input[type=submit], .wc-block-components-button, .single_add_to_cart_button, .em-button{border-radius:999px} input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=password], select, textarea, .wc-block-components-text-input input{border-radius:16px} textarea{border-radius:18px} /* Ventanas y paneles */ .ecomus-panel__content, .ecomus-modal, .mfp-content > *, .wc-block-components-panel{border-radius:26px} /* ═══════════════════════════════════════════════════════════════════ BUSCADOR EN LÍNEA · como en el prototipo Pastilla blanca en la cabecera y desplegable de sugerencias con foto, nombre y precio. Sustituye a la capa a pantalla completa. ═══════════════════════════════════════════════════════════════════ */ .header-search{position:relative;flex:0 1 auto;min-width:0} .header-search__form{ display:flex;align-items:center;gap:9px; background:#FFFFFF; border:1px solid var(--dst-nude,#E8D8D2); border-radius:999px; padding:8px 14px; width:clamp(150px,17vw,215px); max-width:100%; transition:border-color .25s,box-shadow .25s,width .25s; } .header-search__form:focus-within{ border-color:var(--dst-rosa,#B96B70); box-shadow:0 0 0 3px rgba(185,107,112,.12); /* No se ensancha al enfocar: al hacerlo empujaba los iconos de cuenta y carrito fuera de la pantalla a 1280px. Medido: derecha 1259 -> 1319. */ } .header-search__field{ border:0;outline:0;background:transparent; font-family:inherit;font-size:13.5px;color:var(--dst-oscuro,#2C2427); width:100%;min-width:0;padding:0;height:auto; } .header-search__field::placeholder{color:var(--dst-apagado,#7A666D)} .header-search__button{ background:transparent !important;border:0 !important;padding:0 !important; color:var(--dst-apagado,#7A666D) !important; min-width:auto !important;height:auto !important;order:-1;flex:0 0 auto; } .header-search__button:hover{color:var(--dst-rosa,#B96B70) !important;background:transparent !important} .header-search__form .close-search-modal__results{display:none !important} /* Desplegable de sugerencias */ .header-search__products-suggest{ position:absolute; top:calc(100% + 8px); right:0;left:auto; width:max(300px,100%); max-width:min(360px,calc(100vw - 32px)); background:#FFFFFF; border:1px solid var(--dst-nude,#E8D8D2); border-radius:18px; box-shadow:0 20px 40px rgba(44,36,39,.16); overflow:hidden; z-index:60; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .22s,transform .22s,visibility .22s; } .header-search__form:focus-within .header-search__products-suggest, .header-search__products-suggest:hover{ opacity:1;visibility:visible;transform:none; } .search-products-suggest-list{margin:0;padding:0;list-style:none;max-height:60vh;overflow-y:auto} .search-products-suggest-list > li{ display:flex;align-items:center;gap:12px; padding:10px 14px; border-bottom:1px solid #F2E4DF; } .search-products-suggest-list > li:last-child{border-bottom:0} .search-products-suggest-list > li:hover{background:var(--dst-crema,#FBF6F2)} .suggest-list__image{flex:0 0 auto;width:46px;height:46px;border-radius:12px;overflow:hidden;background:var(--dst-crema-3,#F5EBE6)} .suggest-list__image img{width:100%;height:100%;object-fit:cover;display:block} .suggest-list__content{flex:1;min-width:0} .suggest-list__title{font-size:13.5px;font-weight:500;line-height:1.3} .suggest-list__title a{ color:var(--dst-oscuro,#2C2427);text-decoration:none; display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .suggest-list__title a:hover{color:var(--dst-rosa,#B96B70)} .suggest-list__price, .suggest-list__price .amount{font-size:13px;font-weight:600;color:var(--dst-rosa-oscuro,#9E4F55);margin-top:2px} .suggest-list__price del, .suggest-list__price del .amount{font-size:12px;font-weight:400;color:var(--dst-apagado,#7A666D);opacity:.7} /* En móvil el campo no cabe: se vuelve al icono, que ahí sí es lo correcto. */ @media (max-width:991px){ .header-search__form{width:auto;padding:8px 12px} .header-search__field{width:clamp(90px,26vw,150px)} .header-search__products-suggest{max-width:calc(100vw - 24px)} } /* ═══════════════════════════════════════════════════════════════════ MEGA MENÚ · panel bajo la cabecera, como en el prototipo Panel blanco con esquinas inferiores de 28px, dos columnas de enlaces, tarjeta con foto y tarjeta en degradado con lo más vendido. ═══════════════════════════════════════════════════════════════════ */ .dst-mega{ position:fixed;left:0;right:0;top:0; z-index:59; display:flex;justify-content:center; pointer-events:none; border-top:1px solid transparent; } .dst-mega--visible{pointer-events:auto;border-top-color:var(--dst-nude,#E8D8D2)} .dst-mega__panel{ display:none; max-width:1180px;width:100%; background:#FFFFFF; border-radius:0 0 28px 28px; box-shadow:0 26px 50px rgba(44,36,39,.14); overflow:hidden; } .dst-mega__panel--abierto{ display:block; animation:dst-mega-entra .24s cubic-bezier(.16,.8,.3,1) both; } @keyframes dst-mega-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .dst-mega__panel--abierto{animation:none} } .dst-mega__rejilla{ padding:clamp(20px,3vw,38px) clamp(16px,2.4vw,36px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:clamp(20px,2.6vw,36px); align-items:start; } .dst-mega__titulo{ font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--dst-rosa-oscuro,#9E4F55);font-weight:500;margin:0 0 14px; } .dst-mega__col{display:flex;flex-direction:column;gap:4px} .dst-mega__enlace{ font-size:15px;color:var(--dst-oscuro,#2C2427); padding:7px 11px;border-radius:12px;margin-left:-11px; text-decoration:none;transition:background .2s,color .2s; } .dst-mega__enlace:hover{background:var(--dst-rosa-suave,#F9D8D2);color:var(--dst-rosa-oscuro,#9E4F55)} .dst-mega__foto{display:block;color:var(--dst-oscuro,#2C2427);text-decoration:none} .dst-mega__foto-marco{ display:block;border-radius:20px;overflow:hidden; background:var(--dst-crema-3,#F5EBE6);aspect-ratio:4/3; } .dst-mega__foto-marco img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .dst-mega__foto:hover .dst-mega__foto-marco img{transform:scale(1.06)} .dst-mega__foto-nombre{ display:block;font-size:15px;margin-top:12px;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .dst-mega__foto-pie, .dst-mega__foto-pie .amount{display:block;font-size:13px;color:var(--dst-rosa-oscuro,#9E4F55);font-weight:600} .dst-mega__promo{ border-radius:20px; background:linear-gradient(150deg,#F9D8D2 0%,#C07C81 46%,#B96B70 78%,#9E4F55 100%); padding:clamp(16px,2.2vw,24px); display:flex;flex-direction:column;justify-content:space-between;gap:16px; min-height:180px;color:#FFFFFF;text-decoration:none; transition:transform .28s,box-shadow .28s; } .dst-mega__promo:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(158,79,85,.3);color:#fff} .dst-mega__promo-etiqueta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500} .dst-mega__promo-nombre{ display:block;font-weight:500;font-size:clamp(18px,2vw,23px); line-height:1.15;letter-spacing:-.02em; } .dst-mega__promo-precio, .dst-mega__promo-precio .amount{display:block;margin-top:6px;font-size:15px;font-weight:600;color:#FFFFFF} /* Elemento del menú mientras su panel está abierto */ .dst-mega--activo > a{color:var(--dst-rosa-oscuro,#9E4F55) !important} @media (max-width:991px){ .dst-mega{display:none} } /* ── "Tienda" como botón del menú ─────────────────────────────────── Es el enlace que más vende y estaba igual que los demás. */ .primary-menu > li.dst-menu-tienda > a, .dst-menu-tienda > a{ display:inline-flex !important; align-items:center; gap:8px; background:var(--dst-rosa,#B96B70); color:#FFFFFF !important; border-radius:999px; /* Más fino: a 9px de alto quedaba más gordo que el resto de la cabecera. */ padding:6px 16px !important; font-weight:500; line-height:1.5; box-shadow:0 6px 16px rgba(185,107,112,.24); transition:background .25s,transform .25s,box-shadow .25s; } .dst-menu-tienda > a:hover, .dst-menu-tienda > a:focus-visible{ background:var(--dst-rosa-oscuro,#9E4F55); color:#FFFFFF !important; transform:translateY(-2px); box-shadow:0 14px 28px rgba(158,79,85,.34); } .dst-menu-tienda > a::before, .dst-menu-tienda > a::after{display:none !important} .dst-menu-tienda__icono{flex-shrink:0} /* ═══════════════════════════════════════════════════════════════════ PRECIOS DENTRO DE BOTONES La regla que unifica el color del precio (#9E4F55) alcanzaba también a los precios que van DENTRO de un botón rosa: quedaba rosa sobre rosa y no se leía. Pasaba en "Añadir al carrito · 5,90 €" y dejaba el botón de finalizar compra aparentemente vacío. ═══════════════════════════════════════════════════════════════════ */ .button .price, .button .amount, .button .woocommerce-Price-amount, button .price, button .amount, button .woocommerce-Price-amount, .single_add_to_cart_button .price, .single_add_to_cart_button .amount, .single_add_to_cart_button .woocommerce-Price-amount, .wc-block-components-button .wc-block-components-button__text, .wc-proceed-to-checkout .button .amount, .checkout-button .amount, a.button .amount, .dst-cta .amount, .dst-boton .amount{ color:inherit !important; opacity:1 !important; } .single_add_to_cart_button, .single_add_to_cart_button *{color:#FFFFFF !important} .checkout-button, .checkout-button *, .wc-proceed-to-checkout .button, .wc-proceed-to-checkout .button *{color:#FFFFFF !important} /* ── Buscador: un solo desplegable y lupa compacta ────────────────── Salían dos capas superpuestas (sugerencias al enfocar y resultados al escribir) y la lupa ocupaba 74 de los 215px del campo, así que el texto "Buscar un aroma…" se cortaba en "Buscar un". */ .header-search__button{ width:auto !important;min-width:0 !important;flex:0 0 auto; padding:0 !important;margin:0 !important; line-height:0; } .header-search__button svg{width:15px;height:15px;display:block} .header-search__field{flex:1 1 auto;min-width:0} /* Sugerencias: solo con el campo VACÍO */ .header-search__form.dst-buscando .header-search__products-suggest{ opacity:0 !important;visibility:hidden !important;pointer-events:none; } /* Resultados de la búsqueda instantánea: solo CON texto, y con el mismo aspecto que las sugerencias para que no parezcan dos cosas distintas. */ .header-search-results{ position:absolute; top:calc(100% + 8px); right:0;left:auto; width:max(320px,100%); max-width:min(380px,calc(100vw - 32px)); background:#FFFFFF; border:1px solid var(--dst-nude,#E8D8D2); border-radius:18px; box-shadow:0 20px 40px rgba(44,36,39,.16); overflow:hidden auto; max-height:min(70vh,460px); z-index:61; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .2s,transform .2s,visibility .2s; } .header-search__form.dst-buscando:focus-within .header-search-results{ opacity:1;visibility:visible;transform:none; } .header-search-results:empty{display:none} /* Contenido de los resultados, en la paleta */ .header-search-results a{color:var(--dst-oscuro,#2C2427);text-decoration:none} .header-search-results a:hover{color:var(--dst-rosa,#B96B70)} .header-search-results .amount{color:var(--dst-rosa-oscuro,#9E4F55);font-weight:600} /* ── Botones de WooCommerce Blocks: texto legible ─────────────────── El botón "Finalizar compra" salía con el texto del MISMO rosa que su fondo: contraste 1.00, es decir, invisible. En la captura del carrito se veía una píldora rosa vacía. El color viene de las variables de los bloques y no de una regla que se pueda pisar por orden, así que aquí se fuerza el contraste sobre los botones concretos, no sobre todos. */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-button.contained, .wp-element-button.wc-block-components-button{ background-color:var(--dst-rosa,#B96B70) !important; color:#FFFFFF !important; border-radius:999px; } .wc-block-cart__submit-button *, .wc-block-components-checkout-place-order-button *, .wc-block-components-button.contained *, .wp-element-button.wc-block-components-button *{ color:#FFFFFF !important; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-components-button.contained:hover{ background-color:var(--dst-rosa-oscuro,#9E4F55) !important; } /* El botón de texto (por ejemplo "Volver al carrito") sí va en rosa sobre fondo claro: ahí el contraste es correcto. */ .wc-block-components-button.text{ background:transparent !important; color:var(--dst-rosa-oscuro,#9E4F55) !important; } .wc-block-components-button.text *{color:var(--dst-rosa-oscuro,#9E4F55) !important} /* ============================================================ EL ATRIBUTO hidden GANA SIEMPRE ============================================================ El navegador oculta [hidden] con display:none, pero es una regla de la hoja de usuario: cualquier display que escribamos nosotros la pisa. Ya ha pasado dos veces en este proyecto: la capa del panel de soporte se quedaba invisible por encima de toda la página comiéndose los clics, y el contador de los aromas seguía enseñando "0" y hasta un "×1" viejo después de vaciar el pack. Se corta aquí, de una vez, para todos. */ [hidden]{display:none !important} /* ============================================================ SOPORTE FLOTANTE · "Te ayudamos" ============================================================ */ .dst-soporte{ position:fixed;right:18px;bottom:18px;z-index:60; display:inline-flex;align-items:center;gap:9px; background:var(--dst-oscuro);color:#FFFFFF;border:0; border-radius:999px;padding:14px 18px; font-family:var(--dst-cuerpo);font-size:13px;font-weight:500;line-height:1; cursor:pointer; box-shadow:0 16px 34px rgba(44,36,39,0.28); transition:transform .28s ease,background .28s ease; } .dst-soporte:hover,.dst-soporte:focus-visible{ background:var(--dst-rosa-oscuro);color:#FFFFFF;transform:translateY(-2px); } .dst-soporte__icono{display:inline-flex;flex:0 0 auto} .dst-soporte__icono svg{display:block} .dst-soporte-capa{ position:fixed;inset:0;z-index:97; background:rgba(44,36,39,0.45);backdrop-filter:blur(3px); display:flex;align-items:flex-end;justify-content:flex-end; padding:clamp(16px,3vw,28px); opacity:0;transition:opacity .22s ease; } .dst-soporte-capa.esta-abierto{opacity:1} /* display:flex gana al [hidden] del navegador, y la capa invisible se quedaba por encima de toda la página comiéndose los clics. Hay que apagarla aquí. */ .dst-soporte-capa[hidden]{display:none} .dst-soporte-capa:not(.esta-abierto){pointer-events:none} .dst-soporte-capa.esta-abierto{pointer-events:auto} .dst-soporte-panel{ background:#FFFFFF;border-radius:26px; width:min(360px,100%);padding:24px; margin-bottom:70px; box-shadow:0 30px 60px rgba(44,36,39,0.3); transform:translateY(14px);transition:transform .26s ease; } .dst-soporte-capa.esta-abierto .dst-soporte-panel{transform:none} .dst-soporte-panel__cabecera{ display:flex;align-items:flex-start;justify-content:space-between; gap:12px;margin-bottom:16px; } .dst-soporte-panel__titulo{ font-family:var(--dst-cuerpo);font-weight:600;font-size:17px; color:var(--dst-oscuro);margin:0; } /* El gris apagado del prototipo se queda en 4,4 sobre blanco y estos dos textos son de 12-13px. Mismo tono, un punto más oscuro, ya legible. */ .dst-soporte-panel__sub{font-size:13px;color:var(--dst-texto);margin:3px 0 0} .dst-soporte-panel__cerrar{ flex:0 0 auto;width:30px;height:30px;border-radius:999px;border:0; background:var(--dst-crema-3);color:var(--dst-oscuro); font-family:inherit;font-size:15px;line-height:1;cursor:pointer; transition:background .2s ease; } .dst-soporte-panel__cerrar:hover{background:var(--dst-nude)} .dst-soporte-panel__vias{display:flex;flex-direction:column;gap:9px} .dst-via{ display:flex;align-items:center;gap:12px; background:var(--dst-crema);border-radius:16px;padding:13px 15px; color:var(--dst-oscuro);text-decoration:none; transition:background .2s ease,transform .2s ease; } .dst-via:hover{background:var(--dst-crema-3);color:var(--dst-oscuro);transform:translateX(2px)} .dst-via__icono{ width:34px;height:34px;border-radius:999px;flex:0 0 auto; display:flex;align-items:center;justify-content:center; } .dst-via__icono--wa{background:var(--dst-rosa);color:#FFFFFF} .dst-via__icono--mail{background:var(--dst-rosa-oscuro);color:#FFFFFF} .dst-via__icono--faq{background:var(--dst-crema-3);color:var(--dst-oscuro)} .dst-via__nombre{display:block;font-size:14px;font-weight:500;line-height:1.3} .dst-via__pie{display:block;font-size:12px;color:var(--dst-texto);margin-top:1px} /* El correo es largo y en un panel de 360px no cabe de una pieza. */ .dst-via__nombre{overflow-wrap:anywhere} /* El "subir arriba" del tema (#gotop) vive en bottom:55px y se solapaba con la pastilla. Se sube justo por encima, con un dedo de separación. */ #gotop.em-fixed{bottom:74px} @media (max-width:767px){ .dst-soporte{right:14px;bottom:14px;padding:12px 16px} .dst-soporte-panel{margin-bottom:64px} #gotop.em-fixed{bottom:66px} } /* ============================================================ DATOS DE LÍNEA EN EL CARRITO ============================================================ El tema capitaliza cada palabra de estos datos, y en español eso deja "Parte De: Tu Pack A Medida", que se lee como un error de mecanografía. El texto ya viene escrito como debe desde PHP. */ .variation, .variation dt, .variation dd, .wc-item-meta, .wc-item-meta li, .wc-block-components-product-details__name, .wc-block-components-product-details__value{ text-transform:none; } /* ============================================================ FAVORITOS ============================================================ */ .dst-fav{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;padding:0;border:0;border-radius:999px; background:#FFFFFF;color:var(--dst-oscuro); box-shadow:0 4px 12px rgba(44,36,39,.14); cursor:pointer;line-height:1; transition:color .2s ease,background .2s ease,transform .2s ease; } .dst-fav:hover,.dst-fav:focus-visible{background:#FFFFFF;color:var(--dst-rosa-oscuro);transform:scale(1.06)} .dst-fav:focus-visible{outline:2px solid var(--dst-rosa-oscuro);outline-offset:2px} .dst-fav svg{display:block;transition:fill .2s ease} .dst-fav.es-favorito{color:var(--dst-rosa-oscuro)} .dst-fav.es-favorito svg{fill:currentColor} /* Interruptor "solo favoritos" en la tienda */ .dst-fav-filtro{ display:inline-flex;align-items:center;gap:8px; /* El interruptor se pinta en woocommerce_before_shop_loop, justo encima de la barra de "Filtrar / Ordenar", y no tenía margen: medido, 0 px de separación entre los dos botones, se tocaban. */ margin:0 0 14px; background:#FFFFFF;border:1px solid var(--dst-nude); border-radius:999px;padding:8px 15px; font-family:var(--dst-cuerpo);font-size:13px;color:var(--dst-oscuro); cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease; } .dst-fav-filtro:hover{border-color:var(--dst-rosa)} .dst-fav-filtro.esta-activo{ background:var(--dst-rosa-oscuro);border-color:var(--dst-rosa-oscuro);color:#FFFFFF; } .dst-fav-filtro.esta-activo svg{fill:currentColor} .dst-fav-filtro__cuenta{ background:var(--dst-crema-3);color:var(--dst-texto); border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:600; } .dst-fav-filtro.esta-activo .dst-fav-filtro__cuenta{background:rgba(255,255,255,.22);color:#FFFFFF} .dst-fav-vacio{ margin:24px 0;font-size:15px;color:var(--dst-texto); } /* ---- Etiquetas de venta ---- */ .dst-etiqueta{ display:inline-block;border-radius:999px;padding:5px 11px; font-family:var(--dst-cuerpo);font-size:10.5px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;line-height:1; } .dst-etiqueta--vendido{background:var(--dst-oscuro);color:#FFFFFF} .dst-etiqueta--tendencia{background:var(--dst-rosa-suave);color:var(--dst-vino)} /* La paleta de etiquetas del tema es de otra marca: naranja #FC5732 de base, turquesa #48D4BB en "Novedad" y naranja #ff7316 en "Destacado" (ecomus/woocommerce.css:2926, :2936, :2932). Sobre fotos crema y al lado del rosa de Destellos desentonan. Se pasan las cuatro a color de marca, y se hace en los dos sitios donde el tema las pinta: la rejilla de la tienda y la ficha, que usa otra regla con más peso (.woocommerce-badges--single …). Reparto: negro para lo que se ha ganado por ventas, rosa palo para la tendencia, vino para lo nuevo y rosa para el descuento. */ .woocommerce-badge.new{background-color:var(--dst-vino);color:var(--dst-crema)} .woocommerce-badge.featured{background-color:var(--dst-rosa);color:#FFFFFF} .woocommerce-badge.pre-order{background-color:var(--dst-texto);color:#FFFFFF} .woocommerce-badges--single .woocommerce-badge{color:var(--dst-rosa-oscuro);border-color:var(--dst-nude);background-color:#FFFFFF} .woocommerce-badges--single .woocommerce-badge.new{color:var(--dst-vino);border-color:var(--dst-vino)} .woocommerce-badges--single .woocommerce-badge.featured{color:var(--dst-rosa);border-color:var(--dst-rosa)} .woocommerce-badges--single .woocommerce-badge.dst-etiqueta--vendido{color:#FFFFFF;background-color:var(--dst-oscuro);border-color:var(--dst-oscuro)} .woocommerce-badges--single .woocommerce-badge.dst-etiqueta--tendencia{color:var(--dst-vino);background-color:var(--dst-rosa-suave);border-color:var(--dst-rosa-suave)} .woocommerce-badges--single .woocommerce-badge.dst-descuento{color:#FFFFFF;background-color:var(--dst-rosa);border-color:var(--dst-rosa)} /* ============================================================ PANEL DE FILTROS DE LA TIENDA ============================================================ Los widgets son los de WooCommerce, que ya filtran de verdad; aquí solo se les da la forma que tienen en el prototipo: rótulos pequeños en mayúsculas, la lista con su punto y el recuento a la derecha. */ .filter-sidebar-panel .widget{margin-bottom:26px} .filter-sidebar-panel .widget:last-child{margin-bottom:0} .filter-sidebar-panel .widget-title, .filter-sidebar-panel .widgettitle{ font-family:var(--dst-cuerpo); font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--dst-rosa-oscuro);font-weight:600; margin:0 0 12px; } /* Lista de categorías. El recuento y el desplegable NO van dentro del enlace: son hermanos suyos dentro del
  • . Por eso la fila es el
  • y no el ; puesto en el , el "(17)" se caía a una línea aparte debajo del nombre. */ .filter-sidebar-panel .product-categories{list-style:none;margin:0;padding:0} .filter-sidebar-panel .product-categories li{ margin:0;display:flex;flex-wrap:wrap;align-items:center; border-radius:14px;transition:background .18s ease; } .filter-sidebar-panel .product-categories li:hover{background:var(--dst-crema)} .filter-sidebar-panel .product-categories > li > a{ display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0; padding:9px 4px 9px 12px; font-size:14px;color:var(--dst-oscuro);text-decoration:none; } .filter-sidebar-panel .product-categories a::before{ content:"";flex:0 0 auto;width:9px;height:9px;border-radius:999px; border:1.5px solid var(--dst-nude);transition:border-color .18s ease,background .18s ease; } .filter-sidebar-panel .product-categories li:hover > a::before{border-color:var(--dst-rosa)} .filter-sidebar-panel .product-categories .current-cat{background:var(--dst-crema-3)} .filter-sidebar-panel .product-categories .current-cat > a{font-weight:500} .filter-sidebar-panel .product-categories .current-cat > a::before{ border-color:var(--dst-rosa-oscuro);background:var(--dst-rosa-oscuro); } .filter-sidebar-panel .product-categories > li > .count{ flex:0 0 auto;padding-right:12px; font-size:12.5px;color:var(--dst-texto); } /* Las subcategorías ocupan su propia fila, con sangría. */ .filter-sidebar-panel .product-categories .children{ flex:1 0 100%;list-style:none;margin:0 0 4px;padding:0 0 0 22px; } .filter-sidebar-panel .product-categories .children a{font-size:13.5px} .filter-sidebar-panel .product-categories .em-product-cat-item-toggle{flex:0 0 auto;margin-right:8px} /* Precio */ .filter-sidebar-panel .price_slider_wrapper .ui-slider{ background:var(--dst-crema-3);height:4px;border-radius:999px;border:0;margin:14px 0 18px; } .filter-sidebar-panel .price_slider_wrapper .ui-slider-range{background:var(--dst-rosa)} .filter-sidebar-panel .price_slider_wrapper .ui-slider-handle{ background:#FFFFFF;border:2px solid var(--dst-rosa-oscuro); width:16px;height:16px;border-radius:999px;top:-6px; box-shadow:0 2px 6px rgba(44,36,39,.18); } .filter-sidebar-panel .price_slider_amount .price_label{ font-size:13px;color:var(--dst-texto); } .filter-sidebar-panel .price_slider_amount .button{ background:var(--dst-rosa-oscuro);color:#FFFFFF;border:0;border-radius:999px; padding:10px 20px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; } .filter-sidebar-panel .price_slider_amount .button:hover{background:var(--dst-vino);color:#FFFFFF} /* Solo lo que hay hoy */ .dst-solo-stock{ display:flex;align-items:center;gap:10px; padding:9px 12px;border-radius:14px; font-size:14px;color:var(--dst-oscuro);text-decoration:none; transition:background .18s ease; } .dst-solo-stock:hover{background:var(--dst-crema);color:var(--dst-oscuro)} .dst-solo-stock__punto{ flex:0 0 auto;width:9px;height:9px;border-radius:999px; border:1.5px solid var(--dst-nude);transition:border-color .18s,background .18s; } .dst-solo-stock.esta-activo{background:var(--dst-crema-3);font-weight:500} .dst-solo-stock.esta-activo .dst-solo-stock__punto{ border-color:var(--dst-rosa-oscuro);background:var(--dst-rosa-oscuro); } /* Filtros activos */ .filter-sidebar-panel .woocommerce-widget-layered-nav-list, .filter-sidebar-panel .wc-block-active-filters{list-style:none;margin:0;padding:0} .filter-sidebar-panel .widget_layered_nav_filters ul li a{ display:inline-flex;align-items:center;gap:7px; background:var(--dst-crema-3);border-radius:999px;padding:5px 12px; font-size:12.5px;color:var(--dst-oscuro);text-decoration:none; } /* ============================================================ CINTA DE MENSAJES ============================================================ */ .dst-cinta{ background:linear-gradient(90deg,var(--dst-oscuro) 0%,var(--dst-rosa-oscuro) 52%,var(--dst-oscuro) 100%); color:var(--dst-crema); overflow:hidden;white-space:nowrap; } .dst-cinta__pista{ display:inline-flex; animation:dst-cinta-corre 34s linear infinite; will-change:transform; } .dst-cinta:hover .dst-cinta__pista{animation-play-state:paused} .dst-cinta__tanda{ display:inline-flex;align-items:center;gap:40px; padding:10px 20px; font-family:var(--dst-cuerpo); font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:400; } .dst-cinta__texto--fuerte{font-weight:600} .dst-cinta__separador{color:var(--dst-rosa-claro,#E7A9AD)} @keyframes dst-cinta-corre{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* Quien pide menos movimiento ve la cinta quieta, no una animación lenta. */ @media (prefers-reduced-motion:reduce){ .dst-cinta__pista{animation:none} .dst-cinta__tanda--copia{display:none} } /* ── Móvil: la cinta turna en vez de correr ─────────────────────────── Medido a 375 px: 32 px/s, sólo 1,37 mensajes en pantalla —siempre hay uno cortado— y 34 s para ver los cuatro. Turnando se lee cada uno entero y los cuatro pasan en 13 s. El primero sigue siendo el del envío gratis, que es el que más vende. Los tiempos y los porcentajes los calcula inc/cinta.php según cuántos mensajes haya, porque la lista es filtrable. */ @media (max-width:767px){ .dst-cinta__tanda{gap:26px;font-size:10px;padding:8px 14px} .dst-cinta--turnos .dst-cinta__pista{animation:none;display:block;will-change:auto} /* La altura tiene que incluir el relleno: con box-sizing:border-box y height:1.5em la cinta se quedaba en 18 px y el texto salía apretado. Los mensajes van en posición absoluta y no levantan la caja, así que la altura hay que decirla. */ .dst-cinta--turnos .dst-cinta__tanda{ display:block;position:relative; height:calc(1.5em + 18px);padding:9px 14px; } /* La copia sólo existe para que el bucle del scroll no deje hueco; turnando sobra. Va DESPUÉS de la regla de arriba a propósito: las dos tienen el mismo peso y la copia lleva las dos clases, así que puesta antes perdía por orden y la cinta salía a dos líneas. */ .dst-cinta--turnos .dst-cinta__tanda--copia{display:none} .dst-cinta--turnos .dst-cinta__separador{display:none} .dst-cinta--turnos .dst-cinta__texto{ position:absolute;left:14px;right:14px;top:50%; margin-top:-.75em;height:1.5em;line-height:1.5em; text-align:center;opacity:0; /* nombre y ritmo; la duración y el retardo los pone inc/cinta.php */ animation-name:dst-cinta-turno; animation-timing-function:linear; animation-iteration-count:infinite; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Sin animación no habría nada que ver, porque todos parten de opacidad 0: con movimiento reducido se enseña el primero, quieto. */ @media (prefers-reduced-motion:reduce){ .dst-cinta--turnos .dst-cinta__texto{animation:none;opacity:0} .dst-cinta--turnos .dst-cinta__texto--fuerte{opacity:1} } } /* ---- Redes sociales del pie ---- */ .dst-pie__redes{ list-style:none;display:flex;gap:10px;margin:18px 0 0;padding:0; } .dst-pie__redes a{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:999px; background:rgba(251,246,242,.10);color:var(--dst-crema); transition:background .22s ease,color .22s ease,transform .22s ease; } /* Sin el salto de 2 px al pasar por encima: en una fila de iconos, el que estaba bajo el ratón se subía y dejaba de estar alineado con los demás. El cambio de color ya dice que responde. */ .dst-pie__redes a:hover,.dst-pie__redes a:focus-visible{ background:var(--dst-rosa);color:#FFFFFF; } /* El icono, exactamente en el centro del círculo en cualquier estado. */ .dst-pie__redes a svg{display:block;flex:0 0 auto} /* ============================================================ POPUP DE BIENVENIDA ============================================================ */ .dst-popup{ position:fixed;inset:0;z-index:98; background:rgba(44,36,39,.5);backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center; padding:clamp(16px,4vw,32px); opacity:0;transition:opacity .24s ease; } .dst-popup[hidden]{display:none} .dst-popup:not(.esta-abierto){pointer-events:none} .dst-popup.esta-abierto{opacity:1;pointer-events:auto} .dst-popup__caja{ position:relative; background:var(--dst-crema); border-radius:28px; width:min(460px,100%); padding:clamp(26px,4vw,38px); box-shadow:0 34px 70px rgba(44,36,39,.34); transform:translateY(16px);transition:transform .28s ease; text-align:center; } .dst-popup.esta-abierto .dst-popup__caja{transform:none} .dst-popup__cerrar{ position:absolute;right:16px;top:14px; width:32px;height:32px;padding:0;border:0;border-radius:999px; background:var(--dst-crema-3);color:var(--dst-oscuro); font-family:inherit;font-size:17px;line-height:1;cursor:pointer; transition:background .2s ease; } .dst-popup__cerrar:hover{background:var(--dst-nude)} .dst-popup__kicker{ font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--dst-rosa-oscuro);font-weight:600;margin:0 0 10px; } .dst-popup__titulo{ font-family:var(--dst-titulo);font-weight:400; font-size:clamp(24px,3.4vw,32px);line-height:1.15; color:var(--dst-oscuro);margin:0 0 12px; } .dst-popup__texto{ font-size:15px;line-height:1.6;color:var(--dst-texto); margin:0 auto 20px;max-width:38ch; } .dst-popup__form{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} .dst-popup__correo{ flex:1 1 190px;min-width:0;box-sizing:border-box; border:1px solid var(--dst-nude);border-radius:999px; padding:13px 18px;font-family:var(--dst-cuerpo);font-size:14.5px; color:var(--dst-oscuro);background:#FFFFFF; } .dst-popup__correo:focus{outline:2px solid var(--dst-rosa);outline-offset:1px} .dst-popup__boton{ flex:0 0 auto;border:0;border-radius:999px; background:var(--dst-oscuro);color:#FFFFFF; padding:13px 24px;font-family:var(--dst-cuerpo); font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; cursor:pointer;transition:background .22s ease; } .dst-popup__boton:hover:not(:disabled){background:var(--dst-vino)} .dst-popup__boton:disabled{opacity:.65;cursor:default} .dst-popup__respuesta{ font-size:13.5px;line-height:1.5;color:var(--dst-rosa-oscuro); margin:12px 0 0;min-height:1.2em; } .dst-popup__respuesta.es-error{color:var(--dst-vino);font-weight:500} .dst-popup__premio{margin-top:16px} .dst-popup__premio-eti{ font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--dst-texto);margin:0 0 6px; } .dst-popup__codigo{ display:inline-block; background:#FFFFFF;border:1px dashed var(--dst-rosa); border-radius:14px;padding:12px 22px;margin:0; font-family:var(--dst-cuerpo);font-size:19px;font-weight:700; letter-spacing:.06em;color:var(--dst-rosa-oscuro);cursor:pointer; } .dst-popup__caduca{font-size:12.5px;color:var(--dst-texto);margin:9px 0 0} .dst-popup__letra{ font-size:11.5px;line-height:1.55;color:var(--dst-texto); margin:16px 0 0; } .dst-popup__letra a{color:var(--dst-rosa-oscuro);text-decoration:underline} @media (prefers-reduced-motion:reduce){ .dst-popup,.dst-popup__caja{transition:none} } /* ============================================================ BARRA DE ENVÍO GRATIS ============================================================ */ .dst-envio{ padding:16px 20px; border-bottom:1px solid #F2E4DF; } .dst-envio__linea{ display:flex;justify-content:space-between;align-items:baseline;gap:12px; font-size:13px;color:var(--dst-texto);margin-bottom:9px; } .dst-envio__importe{font-weight:600;white-space:nowrap;color:var(--dst-oscuro)} .dst-envio__pista{ position:relative;height:8px;border-radius:999px; background:#F2E4DF;overflow:hidden; } .dst-envio__relleno{ display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,#C07C81,var(--dst-rosa)); transition:width .5s cubic-bezier(.16,.8,.3,1); } .dst-envio.esta-conseguido .dst-envio__relleno{ background:linear-gradient(90deg,var(--dst-rosa),var(--dst-rosa-oscuro)); } .dst-envio.esta-conseguido .dst-envio__texto{ color:var(--dst-rosa-oscuro);font-weight:600; } .dst-envio__nota{ font-size:11px;line-height:1.45;color:var(--dst-texto); margin:8px 0 0;opacity:.85; } @media (prefers-reduced-motion:reduce){ .dst-envio__relleno{transition:none} } /* El "Finalizar compra" del panel del carrito, del mismo color que el botón que cierra la compra en la pasarela: los dos son el mismo gesto. */ .cart-panel .woocommerce-mini-cart__buttons .checkout, .widget_shopping_cart_content .checkout.wc-forward{ background:var(--dst-rosa-oscuro); border-color:var(--dst-rosa-oscuro); color:#FFFFFF; } .cart-panel .woocommerce-mini-cart__buttons .checkout:hover, .widget_shopping_cart_content .checkout.wc-forward:hover{ background:var(--dst-vino);border-color:var(--dst-vino);color:#FFFFFF; } /* ============================================================ MÓVIL · TARJETA DE PRODUCTO ============================================================ Medido en un móvil de 375 px: la tarjeta da 165 px de botón y el tema le pone 30 px de relleno a cada lado, así que para el texto quedaban 103 px. "AÑADIR AL CARRITO" ocupa 117: se partía en dos líneas en todas las tarjetas. No se toca el tamaño de letra —12 px ya es el mínimo cómodo—, se recorta el relleno, que es lo que sobraba: 165 − 24 = 141 px de sitio. El relleno sale de variables del tema (--em-button-padding-*), así que se redefinen ahí en vez de pelear con la regla. */ @media (max-width:575px){ ul.products li.product .button, ul.products li.product .add_to_cart_button{ --em-button-padding-left:12px; --em-button-padding-right:12px; } /* Los nombres largos ocupaban 2 o 3 líneas según el producto, y con eso el precio y el botón de cada tarjeta quedaban a distinta altura dentro de la misma fila. Se fija el título en dos líneas exactas y se empuja el botón al fondo, de modo que toda la fila queda alineada. El nombre completo sigue en el DOM y en el enlace, no se pierde. */ /* El tema ya recorta el título por líneas: pone display:-webkit-box en el enlace y lee el número de una variable suya (--em-line-clamp-count, ecomus/woocommerce.css). En escritorio esa variable no está puesta y no recorta. Así que aquí sólo se le da el valor, en vez de repetir la regla entera y arriesgarse a que las dos peleen. Va en el ENLACE y no en el h3 a propósito: al hacer flexible .product-summary para empujar el botón abajo, el h3 pasa a ser hijo flexible y el navegador convierte su display en block —medido, salía "flow-root"— con lo que el recorte dejaba de valer. El enlace de dentro no es hijo flexible. */ ul.products li.product .woocommerce-loop-product__title{ --em-line-clamp-count:2; min-height:2.4em; } ul.products li.product .product-inner{height:100%} ul.products li.product .product-summary{ display:flex;flex-direction:column;height:auto; } ul.products li.product .product-summary > .button, ul.products li.product .product-summary > .add_to_cart_button{margin-top:auto} } /* ============================================================ PRÓXIMAMENTE ============================================================ */ .dst-proximamente{ font-family:var(--dst-cuerpo);font-weight:600;letter-spacing:.06em; text-transform:uppercase;font-size:.8125rem;color:var(--dst-vino); } .dst-proximamente__aviso{ margin:14px 0 0;padding:14px 16px;border-radius:16px; background:var(--dst-crema-3,#F5EBE6);border:1px solid var(--dst-nude); font-size:14px;line-height:1.55;color:var(--dst-texto); } /* La barra dentro del constructor de packs: misma pieza que en el carrito, pero ahí va pegada al borde del panel y aquí vive dentro de la tarjeta del resumen, así que sólo cambian los márgenes. */ .dst-envio--pack{ padding:14px 0 0;border-bottom:0;border-top:1px solid #F2E4DF;margin-top:14px; } /* ============================================================ MÓVIL · ÁREA DE PULSACIÓN DE LOS ICONOS ============================================================ Medido en un móvil de 375 px: el botón de menú es de 22×22, y la lupa y el carrito de 30×40. El mínimo cómodo para un dedo son 44×44; por debajo de eso se falla el toque y se acaba pulsando lo de al lado. No se agranda el botón: se estira sólo la zona sensible con un ::after invisible por encima. Así el icono se ve igual y la cabecera no se mueve ni un píxel, que es lo que pasaría al meterle relleno. */ @media (max-width:991px){ /* Estos botones traen overflow:hidden y eso recortaba la zona ampliada dejándola otra vez del tamaño del icono. Comprobado con document.elementFromPoint: sin esto, 0 de 4 toques a 20 px acertaban. */ .header-hamburger, .header-right-items .em-button, .header-left-items .em-button{position:relative;overflow:visible} /* Se estira con inset negativo y no con width+translate: el translate no llegaba a aplicarse sobre el pseudoelemento y la zona quedaba corrida hacia abajo y a la derecha. Con inset:-11px un botón de 22 pasa a 44 y uno de 30×40 a 52×62, ambos por encima del mínimo. */ .header-hamburger::after, .header-right-items .em-button::after, .header-left-items .em-button::after{ /* display:block es imprescindible: el tema deja estos ::after en display:none y sin esto la zona no crecía aunque el inset estuviera puesto. Comprobado leyendo el estilo calculado del pseudoelemento. */ content:"";display:block;position:absolute;inset:-11px;z-index:1; } /* La estrella de favoritos y la vista rápida viven dentro de la foto del producto y no pueden crecer sin taparla, pero sí ensanchar el toque. */ .dst-fav{position:relative;overflow:visible} .dst-fav::after{content:"";display:block;position:absolute;inset:-6px} } /* ============================================================ MÓVIL · SUBMENÚS DEL CAJÓN ============================================================ El cajón del tema sólo tenía seis enlaces sueltos. Los desplegables se montan con JS a partir de los paneles del mega menú, que ya vienen con el catálogo real (assets/js/menu-movil.js). */ .dst-submenu{position:relative} .dst-submenu > a{padding-right:44px} .dst-submenu__boton{ position:absolute;right:-8px;top:0; width:44px;height:44px; display:flex;align-items:center;justify-content:center; background:none;border:0;padding:0;cursor:pointer; color:var(--dst-texto,#6E5A60); } .dst-submenu__boton svg{ width:18px;height:18px; transition:transform .28s cubic-bezier(.16,.8,.3,1); } .dst-submenu--abierto > .dst-submenu__boton{color:var(--dst-rosa-oscuro,#9E4F55)} .dst-submenu--abierto > .dst-submenu__boton svg{transform:rotate(180deg)} .dst-submenu__caja{ display:grid;grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .32s cubic-bezier(.16,.8,.3,1); } .dst-submenu--abierto > .dst-submenu__caja{grid-template-rows:1fr} .dst-submenu__caja > .dst-submenu__interior{min-height:0;overflow:hidden} .dst-submenu__rotulo{ font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--dst-apagado,#7A666D);margin:12px 0 6px;font-weight:600; } .dst-submenu__lista{list-style:none;margin:0;padding:0} .dst-submenu__lista li{margin:0} .dst-submenu__lista a{ display:block;padding:11px 0 11px 14px; border-left:2px solid var(--dst-nude,#E8D8D2); font-size:14.5px;line-height:1.35; color:var(--dst-texto,#6E5A60);text-decoration:none; } .dst-submenu__lista a:hover,.dst-submenu__lista a:focus-visible{ color:var(--dst-rosa-oscuro,#9E4F55);border-left-color:var(--dst-rosa,#B96B70); } /* El último deja aire antes del siguiente epígrafe del menú. */ .dst-submenu__interior > .dst-submenu__lista:last-child{margin-bottom:10px} @media (prefers-reduced-motion:reduce){ .dst-submenu__caja{transition:none} .dst-submenu__boton svg{transition:none} } /* ============================================================ EL CLEARFIX DEL TEMA ESTÁ MAL ESCRITO ============================================================ ecomus/style.css:3534 dice: .clearfix { content:""; display:table; table-layout:fixed } Eso es lo que se le pone al pseudoelemento `::after`, no al elemento. El resultado es que `.em-container.clearfix` —el envoltorio del contenido de TODAS las páginas— se convierte en una tabla de maquetación fija. Una caja `display:table` con `table-layout:fixed` calcula su alto en la primera pasada y no vuelve a recalcularlo cuando un descendiente crece después. Medido en el checkout: al desmarcar "usar la misma dirección para facturación", el formulario pasaba de 1.861 a 2.270 px pero el contenedor se quedaba en 1.861, así que el pie no bajaba y el checkout se pintaba ENCIMA del pie, 355 px metido dentro. `flow-root` hace lo que el clearfix quería hacer —contener los flotantes— sin el efecto de tabla. Comprobado midiendo ancho, posición y alto de todos los `.em-container.clearfix` en checkout, tienda, preguntas frecuentes y portada, en 1920 y en 375 px: idénticos en todos los casos. Lo único que cambia es que ahora el contenedor sí crece con su contenido. */ .clearfix{display:flow-root} /* ---- Precio del Club: el mes manda ---- */ .dst-club-precio{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px} .dst-club-precio__mes{font-weight:600} .dst-club-precio__unidad{font-size:.8em;color:var(--dst-apagado,#7A666D)} .dst-club-precio__total{ flex:0 0 100%;font-size:.78em;color:var(--dst-apagado,#7A666D); font-weight:400;line-height:1.4;margin-top:2px; } /* ============================================================ BARRA INFERIOR DEL MÓVIL ============================================================ La trae el tema (inc/mobile/navigation-bar.php) y estaba apagada. Aquí sólo se le da la cara de la marca y se resuelve lo que tapa. */ @media (max-width:991px){ .ecomus-mobile-navigation-bar{ border-top:1px solid var(--dst-nude,#E8D8D2); border-radius:22px 22px 0 0; box-shadow:0 -10px 30px rgba(44,36,39,.12); background:#FFFFFF; } .ecomus-mobile-navigation-bar__icon{color:var(--dst-oscuro,#2C2427)} .ecomus-mobile-navigation-bar__icon:hover, .ecomus-mobile-navigation-bar__icon:focus-visible{color:var(--dst-rosa-oscuro,#9E4F55)} /* La barra va fija encima de todo, así que el final de la página necesita su altura de aire: sin esto, los enlaces del aviso legal quedaban debajo y no se podían pulsar. */ body.ecomus-navigation-bar-show .dst-pie__legal{padding-bottom:84px} /* El contador de favoritos, igual que el del carrito. */ .dst-barra-favoritos__cuenta.empty-counter{display:none} } /* ---- El logotipo del pie, sobre fondo oscuro ---------------------------- El descriptor hereda el rosa de marca, que está pensado para fondo claro. Medido sobre el #2C2427 del pie: 2,67 de contraste, por debajo del 4,5 que pide la norma, y a 10 px se leía a duras penas. El rosa claro da 7,69 y mantiene el acento de color que lo separa de la palabra en crema. */ .dst-pie .dst-logo__descriptor{color:var(--dst-rosa-claro,#E7A9AD)} /* El bloque va con la palabra, no suelto: el descriptor mide lo mismo que "Destellos" y se centra debajo. */ .dst-pie .dst-logo-bloque{display:inline-block;text-align:center} /* ---- Logotipo del pie: la obra original, no una imitación ---------------- Se fija por altura para que no dependa del ancho de la columna. 52 px deja la palabra a un tamaño parecido al que tenía (26 px) con su "CANDLES" debajo, ya en la proporción correcta del logotipo. */ .dst-pie__logo{display:inline-block;line-height:0} .dst-pie__logo img{ height:52px;width:auto;max-width:100%;display:block; } @media (max-width:575px){ .dst-pie__logo img{height:46px} } /* ============================================================ IMÁGENES DENTRO DE UN MARCO QUE YA REDONDEA ============================================================ El tema le da radio a TODAS las imágenes del sitio: img { border-radius: var(--em-image-rounded) } → 22 px Cuando esa imagen va dentro de un marco con overflow:hidden y un radio MÁS PEQUEÑO, las esquinas de la foto se recortan más que las del marco y por el hueco asoma el fondo del marco. Es lo que se veía en la tarjeta de mayoristas: un halo claro en las cuatro esquinas de cada foto, sobre un fondo oscuro. `inherit` hace que la foto tome exactamente el radio de su marco, así que los dos bordes coinciden y no queda hueco. Se aplica donde el marco recorta de verdad: nuestras piezas y las tiras de la página de eventos. */ .dst-opcion__foto > img, .dst-sugerencia__foto > img, .dst-paso__foto > img, .dst-puerta__fondo > img, /* Sin exigir
    : la página de eventos no lo tiene, y con él la regla no llegaba a las fotos de las tarjetas. Basta con que el marco declare a la vez que recorta y que redondea. */ span[style*="overflow:hidden"][style*="border-radius"] > img{ border-radius:inherit; }