/* ========================================================= UNIVERSO SANDRUKI · CUSTOM CSS Reglas que conviene mantener fuera del child theme porque Elessi las sobreescribe desde sus hojas propias. ========================================================= */ /* ========================================================= TIENDA ESOTÉRICA · BOTÓN FILTROS · ESCRITORIO ========================================================= */ /* Estado normal */ .us-esoterica-shop .nasa-toogle-sidebar-classic { border: 1px solid #F7F2EC; color: #F7F2EC; } /* Signo +/- */ .us-esoterica-shop .nasa-toogle-sidebar-classic::before, .us-esoterica-shop .nasa-toogle-sidebar-classic::after { border-top-color: #F7F2EC; } /* Hover */ .us-esoterica-shop .nasa-toogle-sidebar-classic:hover { border-color: #DCEB76; color: #DCEB76; } .us-esoterica-shop .nasa-toogle-sidebar-classic:hover::before, .us-esoterica-shop .nasa-toogle-sidebar-classic:hover::after { border-top-color: #DCEB76; } /* Focus / active */ .us-esoterica-shop .nasa-toogle-sidebar-classic:active, .us-esoterica-shop .nasa-toogle-sidebar-classic:focus { color: #F7F2EC; border-color: #F7F2EC; } /* ========================================================= PRODUCTO · AHORROS A GRANEL ========================================================= */ .dsc-label { color: #F7F2EC; } /* ========================================================= TIENDA ESOTÉRICA · MÓVIL ========================================================= */ @media (max-width: 767px) { /* ===================================================== BARRA FILTROS / ORDENAR ===================================================== */ body.us-esoterica-shop .ns-before-archive-products, body.us-esoterica-shop .nasa-sort-bar-layout-side-sidebar, body.us-esoterica-shop ul.sort-bar { background: #2F1B34 !important; } /* Eliminamos los paddings laterales que Elessi aplica mediante .column / .columns */ body.us-esoterica-shop .nasa-sort-bar-layout-side-sidebar.columns { padding-left: 0 !important; padding-right: 0 !important; } /* Anula el reset de margin/padding del theme para recuperar la colocación móvil correcta de Elessi. */ body.us-esoterica-shop ul.sort-bar { margin: revert !important; padding: revert !important; } /* ===================================================== BOTÓN FILTROS ===================================================== */ body.us-esoterica-shop a.toggle-sidebar { color: #F7F2EC !important; } body.us-esoterica-shop a.toggle-sidebar:hover, body.us-esoterica-shop a.toggle-sidebar:focus, body.us-esoterica-shop a.toggle-sidebar:active { color: #DCEB76 !important; } body.us-esoterica-shop a.toggle-sidebar svg, body.us-esoterica-shop a.toggle-sidebar svg * { color: inherit !important; stroke: currentColor !important; } /* ===================================================== ORDENAR POR ===================================================== */ /* Elessi llega a aplicar padding izquierdo muy grande sobre este
  • . Lo neutralizamos. */ body.us-esoterica-shop li.nasa-filter-order { padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: 8px !important; } /* Caja Ordenar por */ body.us-esoterica-shop form.woocommerce-ordering { height: 36px !important; min-height: 36px !important; margin-top: 4px !important; margin-bottom: 4px !important; padding: 0 8px !important; background: transparent !important; border: 1px solid rgba(220, 235, 118, 0.55) !important; box-sizing: border-box !important; } /* Texto */ body.us-esoterica-shop form.woocommerce-ordering .sort-text { color: #F7F2EC !important; } /* Select */ body.us-esoterica-shop form.woocommerce-ordering select.orderby { background: transparent !important; color: #F7F2EC !important; border: 0 !important; box-shadow: none !important; } /* Opción activa */ body.us-esoterica-shop form.woocommerce-ordering .nasa-current-orderby { color: #DCEB76 !important; } /* Icono Ordenar por. Elessi lo genera como SVG embebido en ::after. */ body.us-esoterica-shop form.woocommerce-ordering::after { filter: brightness(0) saturate(100%) invert(91%) sepia(31%) saturate(627%) hue-rotate(23deg) brightness(103%) contrast(86%) !important; } /* ===================================================== PANEL LATERAL DE FILTROS ===================================================== */ body.us-esoterica-shop .nasa-sidebar-off-canvas { background: #F7F2EC !important; color: #2F1B34 !important; } /* Títulos */ body.us-esoterica-shop .nasa-sidebar-off-canvas .widget-title, body.us-esoterica-shop .nasa-sidebar-off-canvas .widget-title span { color: #2F1B34 !important; } /* Categorías */ body.us-esoterica-shop .nasa-sidebar-off-canvas a.nasa-filter-item.nasa-filter-by-tax.nasa-filter-by-cat { color: #5A445A !important; } body.us-esoterica-shop .nasa-sidebar-off-canvas a.nasa-filter-item.nasa-filter-by-tax.nasa-filter-by-cat:hover, body.us-esoterica-shop .nasa-sidebar-off-canvas a.nasa-filter-item.nasa-filter-by-tax.nasa-filter-by-cat.nasa-active, body.us-esoterica-shop .nasa-sidebar-off-canvas a.nasa-filter-item.nasa-filter-by-tax.nasa-filter-by-cat.active { color: #2F1B34 !important; font-weight: 600 !important; } /* Signos +/- */ body.us-esoterica-shop .nasa-sidebar-off-canvas .widget_product_categories a.accordion::before, body.us-esoterica-shop .nasa-sidebar-off-canvas .widget_product_categories a.accordion::after { background-color: #F27663 !important; border-color: #F27663 !important; } /* Ver todos los productos */ body.us-esoterica-shop .nasa-sidebar-off-canvas .us-back-esoterica-static { color: #A4B63F !important; } /* Precio */ body.us-esoterica-shop .nasa-sidebar-off-canvas .widget_price_filter, body.us-esoterica-shop .nasa-sidebar-off-canvas .widget_price_filter * { color: #2F1B34 !important; } /* Fondo slider */ body.us-esoterica-shop .nasa-sidebar-off-canvas .price_slider_wrapper .ui-widget-content { background: rgba(47, 27, 52, 0.18) !important; } /* Línea activa slider */ body.us-esoterica-shop .nasa-sidebar-off-canvas .price_slider_wrapper .ui-slider-range { background: #DCEB76 !important; } /* Tiradores */ body.us-esoterica-shop .nasa-sidebar-off-canvas .price_slider_wrapper .ui-slider-handle { background: #F7F2EC !important; border-color: #2F1B34 !important; } /* Texto precio */ body.us-esoterica-shop .nasa-sidebar-off-canvas .price_slider_amount, body.us-esoterica-shop .nasa-sidebar-off-canvas .price_slider_amount * { color: #2F1B34 !important; } body.us-esoterica-shop .nasa-sidebar-off-canvas .price_slider_amount .amount { color: #F27663 !important; } /* ===================================================== MÓVIL · Z-INDEX NATIVO DE ELLESSI Evita que la barra de filtros quede por encima de los paneles laterales, sin modificar su estructura. ===================================================== */ body.us-esoterica-shop .ns-before-archive-products.row, body.us-esoterica-shop .nasa-sort-bar-layout-side-sidebar, body.us-esoterica-shop .filters-container.nasa-filter-wrap, body.us-esoterica-shop .woocommerce-ordering, body.us-esoterica-shop .nasa-ordering { z-index: auto !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL · PULIDO VISUAL ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- 1. CABECERA SOBRE LA FOTO Flecha volver + carrito en crema ----------------------------------------------------- */ body.us-esoterica-product .svg-back_shop, body.us-esoterica-product .mini-icon-mobile svg, body.us-esoterica-product .mini-icon-mobile svg *, body.us-esoterica-product .cart-link svg, body.us-esoterica-product .cart-link svg * { color: #F7F2EC !important; stroke: currentColor !important; } /* Si algún icono utiliza fill en lugar de stroke */ body.us-esoterica-product .mini-icon-mobile svg path[fill]:not([fill="none"]), body.us-esoterica-product .cart-link svg path[fill]:not([fill="none"]) { fill: #F7F2EC !important; } /* ----------------------------------------------------- 2. CONTADOR DE FOTOS 1 / 4 legible ----------------------------------------------------- */ body.us-esoterica-product .ns-img-count { background: #F7F2EC !important; color: #2F1B34 !important; border: 1px solid rgba(47, 27, 52, 0.15) !important; } body.us-esoterica-product .ns-img-count .ns-img-now, body.us-esoterica-product .ns-img-count .ns-img-total, body.us-esoterica-product .ns-img-count * { color: #2F1B34 !important; -webkit-text-fill-color: #2F1B34 !important; } /* ----------------------------------------------------- 3. SEPARADORES ENTRE BLOQUES Conservamos el espacio pero lo teñimos de berenjena ----------------------------------------------------- */ body.us-esoterica-product #main-content, body.us-esoterica-product .product-page, body.us-esoterica-product .nasa-single-product-slide, body.us-esoterica-product .nasa-product-details-page { background-color: #2F1B34 !important; } /* Las separaciones siguen existiendo, pero dejan de mostrar blanco. */ body.us-esoterica-product .nasa-product-info-wrap, body.us-esoterica-product .woocommerce-tabs, body.us-esoterica-product .product_meta, body.us-esoterica-product .related-product, body.us-esoterica-product .related.products { border-color: #2F1B34 !important; } /* ----------------------------------------------------- 4. AHORROS A GRANEL Mejor contraste y legibilidad ----------------------------------------------------- */ body.us-esoterica-product .dsc-label { color: #F7F2EC !important; font-weight: 600 !important; } body.us-esoterica-product .ev-dsc-qty { color: #F7F2EC !important; border-color: rgba(247, 242, 236, 0.65) !important; background: transparent !important; } body.us-esoterica-product .ev-dsc-qty:hover, body.us-esoterica-product .ev-dsc-qty:focus { color: #2F1B34 !important; background: #DCEB76 !important; border-color: #DCEB76 !important; } body.us-esoterica-product .ev-dsc-qty *, body.us-esoterica-product .ev-dsc-qty span { color: inherit !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL · BLOQUES INFERIORES ========================================================= */ @media (max-width: 767px) { /* ===================================================== 1. ESPACIOS ENTRE BLOQUES Mantener separación, pero en berenjena ===================================================== */ body.us-esoterica-product .nasa-product-info-wrap, body.us-esoterica-product .ns-begin-wrap, body.us-esoterica-product .nasa-single-share, body.us-esoterica-product .nasa-safe-checkout, body.us-esoterica-product .nasa-guaranteed-safe-checkout, body.us-esoterica-product .product_meta, body.us-esoterica-product .woocommerce-tabs, body.us-esoterica-product .woocommerce-Tabs-panel, body.us-esoterica-product .related-product, body.us-esoterica-product .related.products { border-color: #2F1B34 !important; } /* El fondo visible entre bloques */ body.us-esoterica-product .nasa-product-details-page, body.us-esoterica-product .nasa-product-info-wrap, body.us-esoterica-product .product-info.summary.entry-summary { background-color: #2F1B34 !important; } /* ===================================================== 2. ENLACES / TEXTOS OSCUROS Wishlist · Entrega · Pregunta ===================================================== */ body.us-esoterica-product .ns-begin-wrap, body.us-esoterica-product .ns-begin-wrap a, body.us-esoterica-product a.nasa-node-popup, body.us-esoterica-product .nasa-icon-text, body.us-esoterica-product .nasa-icon-text span { color: #F7F2EC !important; -webkit-text-fill-color: #F7F2EC !important; } /* Iconos asociados */ body.us-esoterica-product .ns-begin-wrap svg, body.us-esoterica-product .ns-begin-wrap svg *, body.us-esoterica-product a.nasa-node-popup svg, body.us-esoterica-product a.nasa-node-popup svg * { color: #F7F2EC !important; stroke: currentColor !important; } /* Hover */ body.us-esoterica-product .ns-begin-wrap a:hover, body.us-esoterica-product a.nasa-node-popup:hover { color: #DCEB76 !important; -webkit-text-fill-color: #DCEB76 !important; } /* ===================================================== 3. COMPARTIR / RRSS ===================================================== */ body.us-esoterica-product .nasa-single-share, body.us-esoterica-product .nasa-single-share .nasa-share-label, body.us-esoterica-product .nasa-single-share a, body.us-esoterica-product .nasa-single-share span { color: #F7F2EC !important; -webkit-text-fill-color: #F7F2EC !important; } body.us-esoterica-product .nasa-single-share svg, body.us-esoterica-product .nasa-single-share svg * { color: #F7F2EC !important; stroke: currentColor !important; fill: currentColor !important; } body.us-esoterica-product .nasa-single-share a:hover, body.us-esoterica-product .nasa-single-share a:hover svg, body.us-esoterica-product .nasa-single-share a:hover svg * { color: #DCEB76 !important; stroke: #DCEB76 !important; fill: #DCEB76 !important; } /* ===================================================== 4. DESCRIPCIÓN Elimina el fade blanco de Elessi ===================================================== */ body.us-esoterica-product .woocommerce-Tabs-panel--description, body.us-esoterica-product .woocommerce-Tabs-panel--description .panel, body.us-esoterica-product .woocommerce-Tabs-panel--description .nasa-content-panel { background: #3A2340 !important; } /* Elessi genera un degradado para el "Leer más". Lo convertimos en berenjena → berenjena claro. */ body.us-esoterica-product .woocommerce-Tabs-panel--description::before, body.us-esoterica-product .woocommerce-Tabs-panel--description::after, body.us-esoterica-product .woocommerce-Tabs-panel--description .panel::before, body.us-esoterica-product .woocommerce-Tabs-panel--description .panel::after { background: linear-gradient( to bottom, rgba(58, 35, 64, 0) 0%, rgba(58, 35, 64, 0.82) 55%, #3A2340 100% ) !important; } /* Leer más */ body.us-esoterica-product .nasa-show-less, body.us-esoterica-product .nasa-show-more, body.us-esoterica-product .nasa-toggle-content { color: #DCEB76 !important; background-color: #3A2340 !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL · FONDO GLOBAL + DESCRIPCIÓN ========================================================= */ @media (max-width: 767px) { /* ===================================================== 1. FONDO GLOBAL DE TODA LA FICHA Hace invisibles los huecos entre bloques ===================================================== */ body.us-esoterica-product, body.us-esoterica-product #wrapper, body.us-esoterica-product #main-content, body.us-esoterica-product .product-page, body.us-esoterica-product .nasa-single-product-slide, body.us-esoterica-product .focus-info, body.us-esoterica-product .nasa-product-details-page, body.us-esoterica-product .nasa-product-info-wrap, body.us-esoterica-product .product-info.summary.entry-summary { background: #2F1B34 !important; background-color: #2F1B34 !important; } /* Separadores generados con :after */ body.us-esoterica-product .ns-begin-wrap::after, body.us-esoterica-product .check-incart-sold-wrap::after, body.us-esoterica-product .woocommerce-product-details__short-description::after, body.us-esoterica-product .nasa-dsc-wrap::after, body.us-esoterica-product ul.nasa-wrap-popup-nodes::after, body.us-esoterica-product .nasa-single-share::after { background: #2F1B34 !important; border-color: #2F1B34 !important; } /* ===================================================== 2. DESCRIPCIÓN PLEGADA Elimina el degradado blanco de Elessi ===================================================== */ body.us-esoterica-product .woocommerce-Tabs-panel--description { background: #3A2340 !important; position: relative !important; } /* Fade inferior cuando está plegada */ body.us-esoterica-product .woocommerce-Tabs-panel--description::after { background: linear-gradient( to bottom, rgba(58, 35, 64, 0) 0%, rgba(58, 35, 64, 0.65) 45%, #3A2340 100% ) !important; } /* Por si Elessi usa otro contenedor interno */ body.us-esoterica-product .woocommerce-Tabs-panel--description .nasa-content-panel::after, body.us-esoterica-product .woocommerce-Tabs-panel--description .panel::after { background: linear-gradient( to bottom, rgba(58, 35, 64, 0) 0%, rgba(58, 35, 64, 0.65) 45%, #3A2340 100% ) !important; } /* Botón Leer más */ body.us-esoterica-product .nasa-show-more, body.us-esoterica-product .nasa-show-less, body.us-esoterica-product .nasa-toggle-content { background: #3A2340 !important; color: #DCEB76 !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL · SEPARADORES + DESCRIPCIÓN ========================================================= */ @media (max-width: 767px) { /* ===================================================== 1. SEPARADORES ENTRE BLOQUES Mantiene los espacios, pero en berenjena ===================================================== */ body.us-esoterica-product .main-images::after, body.us-esoterica-product .ns-begin-wrap::after, body.us-esoterica-product .check-incart-sold-wrap::after, body.us-esoterica-product .woocommerce-product-details__short-description::after, body.us-esoterica-product .nasa-dsc-wrap::after, body.us-esoterica-product ul.nasa-wrap-popup-nodes::after, body.us-esoterica-product .nasa-est-delivery::after, body.us-esoterica-product .nasa-counter-viewing::after, body.us-esoterica-product .nasa-single-share::after { background: #2F1B34 !important; border-color: #2F1B34 !important; } /* ===================================================== 2. DESCRIPCIÓN PLEGADA Fade real de Elessi ===================================================== */ body.us-esoterica-product .row.ns-tab-item::after { background: linear-gradient( to bottom, rgba(58, 35, 64, 0) 0%, rgba(58, 35, 64, 0.45) 35%, rgba(58, 35, 64, 0.82) 68%, #3A2340 100% ) !important; } body.us-esoterica-product .nasa-tabs-content.woocommerce-tabs.wc-tabs-wrapper.nasa-vertical-notabs::after { background: #3A2340 !important; border-color: #3A2340 !important; } /* ===================================================== 3. BOTÓN LEER MÁS / MUESTRA MENOS ===================================================== */ body.us-esoterica-product a.ns-btn-read-more.primary-color { background: #3A2340 !important; color: #DCEB76 !important; border: 0 !important; box-shadow: none !important; } body.us-esoterica-product a.ns-btn-read-more.primary-color .ns-btn-read-more-text { color: #DCEB76 !important; -webkit-text-fill-color: #DCEB76 !important; } body.us-esoterica-product a.ns-btn-read-more.primary-color svg, body.us-esoterica-product a.ns-btn-read-more.primary-color svg * { color: #DCEB76 !important; fill: currentColor !important; stroke: currentColor !important; } /* Hover */ body.us-esoterica-product a.ns-btn-read-more.primary-color:hover, body.us-esoterica-product a.ns-btn-read-more.primary-color:hover .ns-btn-read-more-text { color: #F27663 !important; -webkit-text-fill-color: #F27663 !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL · SEPARADORES ELLESSI Elessi usa border-bottom: 8px para separar bloques ========================================================= */ @media (max-width: 767px) { /* Separador bajo la galería */ body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .product-gallery .main-images { border-bottom: 8px solid #2F1B34 !important; } /* Separadores generados mediante ::after */ body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .ns-begin-wrap::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .nasa-last-sold::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .nasa-cart::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .check-incart-sold-wrap::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .woocommerce-product-details__short-description::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .nasa-dsc-wrap::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .nasa-wrap-popup-nodes::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .nasa-est-delivery::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .nasa-promote-sales::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .nasa-single-share::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .safe-checkout::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .product_meta::after, body.us-esoterica-product.nasa-in-mobile.nasa-mobile-app #wrapper .related-product::after { border-bottom: 8px solid #2F1B34 !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL · ÚLTIMOS AJUSTES ========================================================= */ @media (max-width: 767px) { /* 1. LEER MÁS · eliminar caja/borde blanco */ body.us-esoterica-product .ns-read-more { background: #3A2340 !important; border: 0 !important; box-shadow: none !important; padding: 5px 0 !important; } body.us-esoterica-product .ns-read-more a.ns-btn-read-more { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* 2. HEADER MÓVIL · crema como escritorio */ body.us-esoterica-product #masthead.site-header, body.us-esoterica-product #header-content, body.us-esoterica-product .nasa-header-sticky-wrap { background: #F7F2EC !important; background-color: #F7F2EC !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL STICKY TABS + PADDING DESCRIPCIÓN ========================================================= */ @media (max-width: 767px) { /* 1. Pestañas sticky: General / Descripción / Recommendation */ body.us-esoterica-product .nasa-bc-details-page-wrap { background: #F7F2EC !important; background-color: #F7F2EC !important; } body.us-esoterica-product .nasa-bc-details-page-wrap a, body.us-esoterica-product .nasa-bc-details-page-wrap span { background: transparent !important; } /* 2. Bloque de descripción con aire lateral */ body.us-esoterica-product .nasa-tabs-content.woocommerce-tabs.wc-tabs-wrapper.nasa-vertical-notabs { padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL HEADER INICIAL SOBRE FOTO + STICKY AL HACER SCROLL ========================================================= */ @media (max-width: 767px) { /* ===================================================== 1. ESTADO INICIAL El header no ocupa altura en el documento. Solo mostramos los iconos laterales sobre la foto. ===================================================== */ body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; } body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead { display: flex !important; visibility: visible !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 60px !important; min-height: 60px !important; margin: 0 !important; padding: 0 14px !important; align-items: center !important; justify-content: space-between !important; background: transparent !important; box-shadow: none !important; z-index: 100 !important; pointer-events: none !important; } /* Oculta únicamente la zona central/logo en el estado inicial */ body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead .logo-wrapper, body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead .nasa-logo-img, body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead .nasa-logo { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Recupera los grupos de iconos laterales nativos */ body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead .mini-icon-mobile.left-icons, body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead .mini-icon-mobile.right-icons { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; gap: 14px !important; pointer-events: auto !important; } /* Flecha volver + iconos laterales en crema */ body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead .mini-icon-mobile svg, body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead .mini-icon-mobile svg * { color: #F7F2EC !important; stroke: currentColor !important; } body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header:not(.fixed-already) #masthead .mini-icon-mobile a { pointer-events: auto !important; } /* ===================================================== 2. ESTADO STICKY Header completo crema cuando Elessi activa fixed-already. ===================================================== */ body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header.fixed-already { background: #F7F2EC !important; z-index: 1000 !important; } body.us-esoterica-product .nasa-header-mobile-layout .sticky-wrapper.product-header.fixed-already #masthead { display: flex !important; visibility: visible !important; opacity: 1 !important; background: #F7F2EC !important; background-color: #F7F2EC !important; pointer-events: auto !important; } /* ===================================================== 3. LÍNEA DESPUÉS DE DESCRIPCIÓN ===================================================== */ body.us-esoterica-product .nasa-tabs-content.woocommerce-tabs.wc-tabs-wrapper.nasa-vertical-notabs::after { content: none !important; display: none !important; border: 0 !important; background: transparent !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL OCULTAR BADGES SOBRE LA FOTO ========================================================= */ @media (max-width: 767px) { body.us-esoterica-product .product-gallery .nasa-badges-wrap { display: none !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL OCULTAR ICONO TIENDA JUNTO A VOLVER ========================================================= */ @media (max-width: 767px) { body.us-esoterica-product .mini-icon-mobile.left-icons > *:nth-child(2) { display: none !important; } } /* PRODUCTO ESOTÉRICO · MÓVIL · SIN EXISTENCIAS */ @media (max-width: 767px) { body.us-esoterica-product p.stock.out-of-stock::after { border-bottom: 8px solid #2F1B34 !important; background: #2F1B34 !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL · VARIACIONES ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- ACCESO A VARIANTES EN LA FICHA ----------------------------------------------------- */ body.us-esoterica-product .ns-variants-clone { margin-top: 18px !important; } /* Etiqueta que ahora pone "Arcángel" */ body.us-esoterica-product .ns-variants-clone label { color: #F7F2EC !important; font-weight: 600 !important; } /* Ocultamos visualmente el select clonado */ body.us-esoterica-product .ns-variants-clone select { display: none !important; } /* El enlace nativo que abre el panel se convierte en botón */ body.us-esoterica-product .ns-variants-clone a.ns-open-var-form { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 44px !important; padding: 0 14px !important; background: #F7F2EC !important; color: #2F1B34 !important; border: 1px solid rgba(220, 235, 118, 0.75) !important; border-radius: 4px !important; font-size: 14px !important; font-weight: 500 !important; box-sizing: border-box !important; } /* Texto del botón */ body.us-esoterica-product .ns-variants-clone a.ns-open-var-form::before { content: "Elegir opciones" !important; color: #2F1B34 !important; } /* ----------------------------------------------------- PANEL INFERIOR DE VARIACIONES ----------------------------------------------------- */ body.us-esoterica-product .variations_form label { color: #2F1B34 !important; -webkit-text-fill-color: #2F1B34 !important; font-weight: 600 !important; } body.us-esoterica-product .variations_form select { background: #F7F2EC !important; color: #2F1B34 !important; border: 1px solid rgba(220, 235, 118, 0.85) !important; border-radius: 4px !important; min-height: 42px !important; padding: 0 12px !important; } body.us-esoterica-product .variations_form select option { background: #F7F2EC !important; color: #2F1B34 !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL BOTÓN ABRIR VARIANTES ========================================================= */ @media (max-width: 767px) { body.us-esoterica-product .ns-variants-clone a.ns-open-var-form { background: #F7F2EC !important; color: #2F1B34 !important; -webkit-text-fill-color: #2F1B34 !important; border: 1px solid rgba(220, 235, 118, 0.75) !important; border-radius: 4px !important; } /* Texto que Elessi genera mediante ::before */ body.us-esoterica-product .ns-variants-clone a.ns-open-var-form::before { content: "Elegir opciones" !important; color: #2F1B34 !important; -webkit-text-fill-color: #2F1B34 !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL TEXTO DINÁMICO DE VARIACIONES El texto lo inserta functions.php según los atributos reales ========================================================= */ @media (max-width: 767px) { body.us-esoterica-product .ns-variants-clone { position: relative !important; min-height: 72px !important; padding-top: 26px !important; box-sizing: border-box !important; } body.us-esoterica-product .us-variation-helper { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; color: #C7BAC6 !important; -webkit-text-fill-color: #C7BAC6 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 18px !important; z-index: 3 !important; pointer-events: none !important; } body.us-esoterica-product .ns-variants-clone a.ns-open-var-form { position: absolute !important; top: 26px !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100% !important; height: 44px !important; min-height: 44px !important; z-index: 2 !important; background: #F7F2EC !important; color: #2F1B34 !important; -webkit-text-fill-color: #2F1B34 !important; border: 1px solid rgba(220, 235, 118, 0.75) !important; border-radius: 4px !important; padding: 0 14px !important; box-sizing: border-box !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL CUENTA ATRÁS + STOCK ========================================================= */ @media (max-width: 767px) { /* --------------------------------------------- SEPARADORES DE CUENTA ATRÁS / STOCK --------------------------------------------- */ body.us-esoterica-product .nasa-detail-product-deal-countdown::after, body.us-esoterica-product .stock.nasa-single-product-stock::after { border-bottom: 8px solid #2F1B34 !important; background: #2F1B34 !important; } /* --------------------------------------------- TEXTO STOCK --------------------------------------------- */ body.us-esoterica-product .stock.nasa-single-product-stock, body.us-esoterica-product .stock.nasa-single-product-stock span, body.us-esoterica-product .stock.nasa-single-product-stock .stock-sold { color: #C7BAC6 !important; -webkit-text-fill-color: #C7BAC6 !important; } /* Número destacado de unidades restantes */ body.us-esoterica-product .stock.nasa-single-product-stock .stock-sold strong, body.us-esoterica-product .stock.nasa-single-product-stock strong { color: #F27663 !important; -webkit-text-fill-color: #F27663 !important; } /* --------------------------------------------- CUENTA ATRÁS --------------------------------------------- */ /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL CUENTA ATRÁS · COLORES CORRECTOS ========================================================= */ @media (max-width: 767px) { /* Números */ body.us-esoterica-product .nasa-sc-deal-countdown .countdown-amount, body.us-esoterica-product .nasa-detail-product-deal-countdown .countdown-amount { color: #2F1B34 !important; -webkit-text-fill-color: #2F1B34 !important; font-weight: 600 !important; } /* DÍAS / HORAS / MINS / SEGUNDOS */ body.us-esoterica-product .nasa-sc-deal-countdown .countdown-period, body.us-esoterica-product .nasa-detail-product-deal-countdown .countdown-period { color: #F7F2EC !important; -webkit-text-fill-color: #F7F2EC !important; } /* Texto "¡Apresúrate! La oferta finaliza en:" */ body.us-esoterica-product .nasa-detail-product-deal-countdown { color: #C7BAC6 !important; } } } /* =================================================== PRODUCTO ESOTÉRICO · MÓVIL CUENTA ATRÁS · NÚMEROS Y ETIQUETAS ========================================================= */ @media (max-width: 767px) { /* Número dentro de cada caja */ body.us-esoterica-product .nasa-sc-deal-countdown .countdown-amount { color: #2F1B34 !important; -webkit-text-fill-color: #2F1B34 !important; font-weight: 600 !important; } /* Texto DÍAS / HORAS / MINS / SEGUNDOS */ body.us-esoterica-product .nasa-sc-deal-countdown .countdown-period { color: #F7F2EC !important; -webkit-text-fill-color: #F7F2EC !important; } /* Cada caja del contador */ body.us-esoterica-product .nasa-sc-deal-countdown .countdown-section { color: #2F1B34 !important; } } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL ICONO LLAMAR / SOLICITAR LLAMADA ========================================================= */ @media (max-width: 767px) { body.us-esoterica-product a.nasa-node-popup svg.nasa-flip-vertical, body.us-esoterica-product a.nasa-node-popup svg.nasa-flip-vertical * { color: #2F1B34 !important; fill: currentColor !important; stroke: currentColor !important; } } /* ========================================================= TIENDA ESOTÉRICA · WISHLIST ACTIVA Corazón coral en productos añadidos a favoritos ========================================================= */ .us-esoterica-shop .btn-wishlist.nasa-added .ns-filled, .us-esoterica-shop .btn-wishlist.nasa-added .ns-filled * { color: #F27663 !important; fill: currentColor !important; stroke: currentColor !important; } body.us-esoterica-product .btn-wishlist.nasa-added .ns-filled, body.us-esoterica-product .btn-wishlist.nasa-added .ns-filled * { color: #F27663 !important; fill: currentColor !important; stroke: currentColor !important; } /* ========================================================= PRODUCTO ESOTÉRICO · MÓVIL ELIMINAR HUECO ENTRE FOOTER Y BOTONES FIJOS ========================================================= */ @media (max-width: 767px) { body.us-esoterica-product #nasa-footer { margin-bottom: 0 !important; } }