:root{--content-width: 100%;--content-edge-padding-x: 15px;--content-edge-padding-y: 30px;--body-font-family: "Montserrat", var(--fallback-font);--heading-font-family: "Playfair Display", var(--fallback-font);--subheading-font-family: "Playfair Display", var(--fallback-font);--font-size-body: 16px;--palette1: #1f1f1f!important;--palette2: #717171!important;--palette3: #000000!important;--palette4: #696969!important;--palette5: #727272!important;--palette6: #828282!important;--palette7: #f0f0f0!important;--palette8: #f5f5f5!important;--palette9: #ffffff!important;--palette10: #1f1f1f!important;--palette11: #717171!important;}@media (min-width: 1025px){.container {max-width:100%;}}@media (min-width: 1025px){.container {max-width:100%;}}.hero-section .page-title-wrapper{min-height:120px;}/* FIX: el tema aplica estilos al wrapper SIEMPRE por un selector mal hecho. Lo neutralizamos en páginas internas (producto/categoría), sin tocar la home. */ body#product #wrapper, body.category #wrapper, body#category #wrapper, body#product #wrapper .container, body#category #wrapper .container{ min-height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* FIX: altura inline del header que empuja el contenido */ #header { height: auto !important; } /* FIX: hero/breadcrumb solo en ficha de producto */ body#product #hero_section{ display: none !important; } /* Espacio entre menú y contenido en ficha de producto */ body#product #wrapper { padding-top: 25px !important; } /* Aumentar tamaño del logo */ #header .logo img, #header .header-logo img, #header img.logo { max-height: 200px !important; height: auto !important; width: auto !important; } /* Unificar fondo de header con la barra rosa */ #header { background: #e9d6dd; } /* Segunda Barra rosa más gruesa */ #advanced_megamenu, .main-menu, .navbar { background: #e9d6dd; padding: 18px 0 !important; } #advanced_megamenu a, .main-menu a { font-weight: 600; letter-spacing: 1px; font-size: 15px; } /* Quitar estrellas de los productos */ body#product .product-rating, body.category .product-rating { display: none !important; } /* ====================================== AVANAM MEGAMENU – 1 LÍNEA + SEPARADOR | ====================================== */ /* 1) Forzar el menú a una sola línea SIEMPRE */ #_desktop_megamenu, #_desktop_megamenu .avaorg-menu-horizontal, #_desktop_megamenu .avaorg-menu-horizontal .menu-content{ display: flex !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; } /* 2) Cada item en línea */ #_desktop_megamenu .avaorg-menu-horizontal .menu-content > li{ display: inline-flex !important; align-items: center !important; float: none !important; } /* 3) Enlaces */ #_desktop_megamenu .avaorg-menu-horizontal .menu-content > li > a{ display: inline-flex !important; align-items: center !important; padding: 10px 14px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; } /* 4) Separador | */ #_desktop_megamenu .avaorg-menu-horizontal .menu-content > li + li::before{ content: "|" !important; display: inline-block !important; margin: 0 12px !important; color: rgba(0,0,0,.45) !important; font-weight: 300 !important; } /* 5) Icono desplegable */ #_desktop_megamenu .avaorg-menu-horizontal .menu-content .icon-ava{ margin-left: 6px !important; font-size: 12px !important; } /* 6) Ajuste fino de franja */ #_desktop_megamenu{ padding-top: 6px !important; padding-bottom: 6px !important; margin: 0 !important; } /* 7) Ajuste navbar */ .header-bottom, .header-nav, .navbar{ padding-top: 6px !important; padding-bottom: 6px !important; } /* Ocultar megamenú horizontal en móvil */ @media (max-width: 991px){ #_desktop_megamenu { display: none !important; } } /* ===== HEADER MOBILE: logo centrado sin tapar botones ===== */ @media (max-width: 767px){ /* Asegura que la barra superior tenga contexto */ #header .header-nav .mobile{ position: relative; min-height: 56px; } /* Botón menú, usuario y carrito por encima */ #header .header-nav .mobile #menu-icon, #header .header-nav .mobile #_mobile_user_info, #header .header-nav .mobile #_mobile_cart{ position: relative; z-index: 30; } /* Logo centrado pero SIN capturar clics */ #header .header-nav .mobile #_mobile_logo{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; /* clave: no tapa la hamburguesa */ width: 150px; /* ajusta a tu gusto */ display: flex; justify-content: center; align-items: center; } #header .header-nav .mobile #_mobile_logo img{ max-height: 34px; /* ajusta a tu gusto */ width: auto; height: auto; } /* Buscador móvil debajo de la barra de iconos */ #header #_mobile_search_widget, #header .header-top #search_widget{ position: relative; z-index: 5; } /* Si el buscador aparece “pegado”, dale aire */ #header #_mobile_search_widget{ padding: 10px 12px; } } /**/ @media (max-width: 767px){ /* Centramos el logo en el header móvil */ #header .mobile #_mobile_logo{ position: absolute; left: 50%; transform: translateX(-50%); top: 10px; /* ajusta si lo quieres más arriba/abajo */ z-index: 30; } #header .mobile #_mobile_logo img{ max-height: 38px; /* ajusta tamaño */ width: auto; } } @media (max-width: 767px){ /* Asegura que el enlace del logo reciba el click */ #header .mobile #_mobile_logo a{ position: relative; z-index: 40; display: inline-block; pointer-events: auto; } /* Y que la imagen también sea clicable */ #header .mobile #_mobile_logo img{ pointer-events: auto; } /* Por si hay alguna capa transparente del header encima */ #header .mobile .header-nav, #header .mobile .header-top{ position: relative; z-index: 10; } } /* CENTRAR LOGO SOLO EN DESKTOP (no afecta móvil) */ @media (min-width: 992px) { /* La fila del header-top en modo flex para poder centrar bien */ #header .header-top .row{ display: flex; align-items: center; } /* Hacemos que el bloque del logo ocupe todo el ancho y centre su contenido */ #header .header-top #_desktop_logo{ flex: 0 0 100%; max-width: 100%; text-align: center; padding: 0; } /* Si el logo está dentro de un o wrapper, centramos también */ #header .header-top #_desktop_logo h1, #header .header-top #_desktop_logo .logo{ margin: 0 auto; display: inline-block; } /* Ajuste opcional de tamaño en desktop (quita si no lo quieres) */ #header .header-top #_desktop_logo img{ height: auto; max-height: 90px; width: auto; } } @media (min-width: 992px) { /* El contenedor del slider se adapta a la imagen */ #carousel, #carousel .carousel-inner, #carousel .carousel-item { height: auto !important; } /* Imagen ocupa todo el ancho y mantiene proporción */ #carousel .carousel-item img { width: 100% !important; height: auto !important; object-fit: cover !important; display: block !important; } } @media (min-width: 992px) { /* Reducir tamaño real de las flechas */ #carousel .carousel-control-prev, #carousel .carousel-control-next { width: 60px !important; /* antes ocupaban muchísimo */ height: 120px !important; /* altura razonable */ top: 50% !important; transform: translateY(-50%); } /* Evita que las flechas del carrusel tapen el buscador: reduce su área clicable */ @media (min-width: 768px) { #carousel .carousel-control{ top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: 52px !important; height: 70px !important; background: transparent !important; opacity: 1 !important; padding: 0 !important; } #carousel .carousel-control.left{ left: 10px !important; } #carousel .carousel-control.right{ right: 10px !important; } #carousel .carousel-control .icon-prev, #carousel .carousel-control .icon-next{ display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 70px !important; } #carousel .carousel-control .material-icons{ font-size: 34px !important; line-height: 1 !important; } /* Por si el buscador está “encima” del carrusel, le damos prioridad de clic */ #search_widget{ position: relative !important; z-index: 50 !important; } #carousel .carousel-control{ z-index: 10 !important; } } /* ===== Header: menú + buscador en UNA sola línea (solo escritorio) ===== */ @media (min-width: 992px){ /* La fila que contiene el megamenu (y el buscador cuando está en displayNavFullWidth) */ #header .header-bottom .mega-menu > .container > .row, #header .header-bottom .mega-menu .container .row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } /* El bloque del menú: que ocupe el espacio disponible */ #header .header-bottom #_desktop_megamenu, #header .header-bottom .main-menu, #header .header-bottom .avaorg-menu-horizontal { flex: 1 1 auto !important; min-width: 0 !important; /* importante para que no empuje al buscador */ } /* El bloque del buscador (cubre varios módulos/temas) */ #header .header-bottom #search_widget, #header .header-bottom .search-widget, #header .header-bottom .ps_searchbar, #header .header-bottom .block-search, #header .header-bottom #avasearch_block { flex: 0 0 340px !important; /* ancho del buscador en escritorio */ margin-left: auto !important; /* lo empuja a la derecha */ width: 340px !important; max-width: 340px !important; } /* Evita que el formulario se desmadre */ #header .header-bottom #search_widget form, #header .header-bottom .ps_searchbar form, #header .header-bottom .block-search form, #header .header-bottom #avasearch_block form { width: 100% !important; margin: 0 !important; } } /* ===== AVANAM SUBMENU EN HORIZONTAL (SOLO DESKTOP) ===== */ @media (min-width: 992px){ /* Contenedor del dropdown */ #_desktop_megamenu .menu-dropdown ul, #_desktop_megamenu .popup ul, #_desktop_megamenu .dropdown-menu ul{ display: flex !important; flex-direction: row !important; gap: 40px !important; /* espacio entre items */ align-items: center !important; } /* Cada item */ #_desktop_megamenu .menu-dropdown ul li, #_desktop_megamenu .popup ul li, #_desktop_megamenu .dropdown-menu ul li{ display: inline-block !important; } /* Quitar ancho 100% típico que los pone en bloque */ #_desktop_megamenu .menu-dropdown ul li a, #_desktop_megamenu .popup ul li a, #_desktop_megamenu .dropdown-menu ul li a{ width: auto !important; display: inline-block !important; padding: 10px 0 !important; } } /* ===== FIX Avanam MegaMenu: el submenú no se cierre al bajar el ratón (solo escritorio) ===== */ @media (min-width: 992px){ /* 1) Asegura que el dropdown se posiciona pegado al item (sin huecos) */ #header .header-bottom #_desktop_megamenu .menu-item, #header .header-bottom #_desktop_megamenu li.menu-item{ position: relative !important; } /* Nombres típicos del contenedor del desplegable en Avanam */ #header .header-bottom #_desktop_megamenu .menu-dropdown, #header .header-bottom #_desktop_megamenu .popup, #header .header-bottom #_desktop_megamenu .popup_vertical, #header .header-bottom #_desktop_megamenu .dropdown-menu{ margin-top: 0 !important; top: 100% !important; pointer-events: auto !important; z-index: 9999 !important; } /* 2) Mantén el dropdown visible también al hacer hover sobre el dropdown */ #header .header-bottom #_desktop_megamenu li.menu-item:hover .menu-dropdown, #header .header-bottom #_desktop_megamenu li.menu-item:hover .popup, #header .header-bottom #_desktop_megamenu li.menu-item:hover .popup_vertical, #header .header-bottom #_desktop_megamenu li.menu-item:hover .dropdown-menu, #header .header-bottom #_desktop_megamenu li.menu-item .menu-dropdown:hover, #header .header-bottom #_desktop_megamenu li.menu-item .popup:hover, #header .header-bottom #_desktop_megamenu li.menu-item .popup_vertical:hover, #header .header-bottom #_desktop_megamenu li.menu-item .dropdown-menu:hover{ display: block !important; opacity: 1 !important; visibility: visible !important; } /* 3) “Puente” invisible: evita el hueco entre el menú y el desplegable */ #header .header-bottom #_desktop_megamenu li.menu-item.hasChild > a::after, #header .header-bottom #_desktop_megamenu li.menu-item.hasChild > a::before{ content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -14px !important; /* altura del puente */ height: 14px !important; background: transparent !important; } /* Asegura que el pueda alojar el puente */ #header .header-bottom #_desktop_megamenu li.menu-item.hasChild > a{ position: relative !important; } } /* ===== MEGAMENU: 1 línea, sin barras de scroll (solo escritorio) ===== */ @media (min-width: 992px){ /* Quita el “hueco” de la izquierda (columna vacía típica del tema) */ #header .header-bottom .mega-menu .row > .col-md-2.hidden-md-down{ display:none !important; } #header .header-bottom .mega-menu .row > .col-md-10{ flex: 1 1 auto !important; max-width: 100% !important; } /* Contenedor a ancho completo */ #header .header-bottom .mega-menu .container{ max-width: 100% !important; width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; } /* Menú 1 línea, pegado a la izquierda */ #header .header-bottom #_desktop_megamenu .avaorg-menu-horizontal > ul.menu-content, #header .header-bottom #_desktop_megamenu ul.menu-content{ display:flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; padding-left: 0 !important; margin: 0 !important; width: 100% !important; /* CLAVE: sin barras */ overflow: visible !important; } /* Ajuste fino para que quepa más */ #header .header-bottom #_desktop_megamenu ul.menu-content > li{ margin: 0 !important; white-space: nowrap !important; flex: 0 0 auto !important; } /* Un poco menos de aire (si quieres más grande, sube font-size a 13-14 y baja padding) */ #header .header-bottom #_desktop_megamenu ul.menu-content > li > a{ padding: 12px 8px !important; font-size: 13px !important; } /* Evita scrollbars raras en el wrapper del módulo */ #header .header-bottom #_desktop_megamenu, #header .header-bottom #_desktop_megamenu .main-menu, #header .header-bottom #_desktop_megamenu .avaorg-menu-horizontal{ overflow: visible !important; } } /* Oculta cualquier botón/enlace "Personalizar/Añadir" deshabilitado en listados */ .product-miniature a.disabled, .product-miniature .disabled a, .product-miniature button[disabled], .product-miniature a[aria-disabled="true"], .product-miniature button[aria-disabled="true"], .product-miniature .ajax_add_to_cart_button.disabled, .product-miniature .add-to-cart.disabled, .product-miniature .btn.disabled{ display:none !important; }/* ====== DISEÑA TU PIEZA en listados (solo cuando el producto requiere personalización) ====== */ /* Oculta el botón viejo de "Personalizar" cuando detectemos que es de configuración */ .js-product-miniature.dc-needs-customization .product-add-to-cart .add-to-cart{ display:none !important; } /* Botón nuevo bajo el precio */ .js-product-miniature .dc-customize-link{ display:inline-block; width:auto; margin-top:10px; padding:10px 14px; text-transform:uppercase; font-weight:700; letter-spacing:.3px; } /* Botón overlay encima de la imagen .js-product-miniature .dc-customize-overlay{ position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:5; padding:10px 14px; text-transform:uppercase; font-weight:700; letter-spacing:.3px; border-radius:0; } */ /* Asegura que el contenedor de imagen permita overlay */ .js-product-miniature .thumbnail-container, .js-product-miniature .product-thumbnail, .js-product-miniature .product-image{ position:relative; } /* Evita que el overlay tape iconos (corazón/ojo) si tu tema los pone arriba */ .js-product-miniature .dc-customize-overlay{ pointer-events:auto; } /* =========================== PATCH SEGURO (AL FINAL) - No borra nada - Solo corrige conflictos =========================== */ /* 1) Cierra el media del carrusel SI el tuyo quedó abierto (no rompe si ya está bien) */ @media (min-width: 992px){ #carousel .carousel-control-prev, #carousel .carousel-control-next{ width: 60px !important; height: 120px !important; top: 50% !important; transform: translateY(-50%) !important; } } /* 2) Mobile logo: versión única para evitar duplicados */ @media (max-width: 767px){ #header .header-nav .mobile{ position: relative; min-height: 56px; } /* Iconos por encima */ #header .header-nav .mobile #menu-icon, #header .header-nav .mobile #_mobile_user_info, #header .header-nav .mobile #_mobile_cart{ position: relative; z-index: 30; } /* Logo centrado sin tapar clics */ #header .header-nav .mobile #_mobile_logo{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; width: 150px; display: flex; justify-content: center; align-items: center; pointer-events: none; /* no roba clics */ } /* Pero el logo sí clicable */ #header .header-nav .mobile #_mobile_logo a, #header .header-nav .mobile #_mobile_logo img{ pointer-events: auto; } #header .header-nav .mobile #_mobile_logo img{ max-height: 34px; width: auto; height: auto; } } /* ===== DISEÑA TU PIEZA (LISTADOS) ===== */ /* Oculta el botón viejo de PERSONALIZAR (sobre todo si está disabled) */ .js-product-miniature.dc-needs-customization .product-add-to-cart button, .js-product-miniature.dc-needs-customization .product-add-to-cart .add-to-cart, .js-product-miniature button[disabled], .js-product-miniature .add-to-cart[disabled], .js-product-miniature a.disabled, .js-product-miniature .btn.disabled{ display:none !important; } /* Estilo del nuevo botón/enlace */ .js-product-miniature .dc-customize-link{ display:inline-block !important; margin-top:10px !important; padding:10px 14px !important; text-transform:uppercase !important; font-weight:700 !important; letter-spacing:.3px !important; text-align:center !important; width:100% !important; /* para que quede como botón */ box-sizing:border-box !important; } /* Oculta Personalizar disabled en listados (móvil/desktop) */ .js-product-miniature .product-add-to-cart button[disabled], .js-product-miniature .product-add-to-cart button:disabled, .js-product-miniature .product-add-to-cart [aria-disabled="true"]{ display:none !important; } /* ===== DCORAZON: sustituir SOLO el botón "Personalizar" en listados ===== */ /* Oculta cualquier botón/enlace de "Personalizar" (gris) en miniaturas */ .js-product-miniature .product-add-to-cart .add-to-cart, .js-product-miniature button.add-to-cart, .js-product-miniature a.add-to-cart, .js-product-miniature input.add-to-cart{ /* NO lo ocultamos globalmente aquí; lo ocultará el JS solo cuando sea "Personalizar" */ } /* Botón nuevo */ .js-product-miniature .dc-customize-link{ display:block !important; width:100% !important; margin-top:10px !important; padding:12px 14px !important; text-transform:uppercase; font-weight:700; letter-spacing:.4px; text-align:center; box-sizing:border-box; } /* Si por tu JS antiguo quedó overlay en algún momento, lo forzamos OFF */ .js-product-miniature .dc-customize-overlay{ display:none !important; } .js-product-miniature .dc-customize-link{ display:block !important; width:100% !important; margin-top:10px !important; padding:12px 14px !important; text-transform:uppercase; font-weight:700; letter-spacing:.4px; text-align:center; box-sizing:border-box; } /* Por si queda algún overlay viejo */ .js-product-miniature .dc-customize-overlay{ display:none !important; } /* ================================ FIX FINAL: "DISEÑA TU PIEZA" abajo (no overlay) ================================ */ /* 1) Desactiva cualquier estilo tipo overlay en el botón */ .js-product-miniature .dc-customize-link{ position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: none !important; z-index: auto !important; display: block !important; width: 100% !important; margin: 10px 0 0 0 !important; } /* 2) Asegura que el contenedor donde se inserta esté en flujo normal */ .js-product-miniature .product-add-to-cart{ position: static !important; } /* 3) Si por algún motivo existe el overlay (de reglas antiguas), lo apagamos sí o sí */ .js-product-miniature .dc-customize-overlay{ display: none !important; } /* 4) IMPORTANTE: si el tema convierte TODOS los botones dentro de la miniatura en absolute, forzamos el nuestro a quedarse en el flujo */ .js-product-miniature .product-add-to-cart .dc-customize-link{ position: relative !important; /* relative = en flujo, no se va encima de la foto */ } /* Forzar que DISEÑA TU PIEZA sea SIEMPRE botón “abajo” (no overlay) */ .js-product-miniature .dc-customize-link-bottom{ position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; z-index: auto !important; display: block !important; width: 100% !important; margin: 10px 0 0 0 !important; } .js-product-miniature .dc-customize-link-bottom, article.product-miniature .dc-customize-link-bottom{ position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; z-index: auto !important; display: block !important; width: 100% !important; margin-top: 10px !important; } /* Desktop: centrar texto del botón DISEÑA TU PIEZA */ @media (min-width: 992px){ .js-product-miniature .dc-customize-link, article.product-miniature .dc-customize-link{ display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.2 !important; padding: 16px 14px !important; /* ajusta si quieres más/menos alto */ } } /* Desktop: que el botón (añadir/personalizar) se vea SIEMPRE, no solo al hover */ @media (min-width: 992px){ /* Fuerza visible el bloque donde vive el botón */ article.product-miniature .product-add-to-cart, .js-product-miniature .product-add-to-cart{ opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; height: auto !important; } /* Por si el theme esconde el botón directamente */ article.product-miniature .product-add-to-cart .btn, .js-product-miniature .product-add-to-cart .btn{ opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } /* Si el theme lo mete dentro de un wrapper “hover” típico */ article.product-miniature .highlighted-informations, .js-product-miniature .highlighted-informations{ opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* =========================== DESKTOP: evitar descuadres en hover + precio siempre visible =========================== */ @media (min-width: 992px){ /* 1) Quita transformaciones/animaciones que mueven la tarjeta al hacer hover */ article.product-miniature:hover, .js-product-miniature:hover, article.product-miniature:hover .thumbnail-container, .js-product-miniature:hover .thumbnail-container, article.product-miniature:hover .product-description, .js-product-miniature:hover .product-description, article.product-miniature:hover .highlighted-informations, .js-product-miniature:hover .highlighted-informations{ transform: none !important; } /* 2) El precio NO debe desaparecer en hover (muchos temas lo ponen opacity:0) */ article.product-miniature .product-price-and-shipping, .js-product-miniature .product-price-and-shipping{ opacity: 1 !important; visibility: visible !important; display: block !important; } article.product-miniature:hover .product-price-and-shipping, .js-product-miniature:hover .product-price-and-shipping{ opacity: 1 !important; visibility: visible !important; display: block !important; } /* 3) Mejorar precio: más grande y con margen para que no se pegue al botón */ article.product-miniature .product-price-and-shipping .price, .js-product-miniature .product-price-and-shipping .price{ font-size: 18px !important; /* súbelo/bájalo a tu gusto */ font-weight: 700 !important; line-height: 1.2 !important; } article.product-miniature .product-price-and-shipping{ margin-top: 8px !important; margin-bottom: 14px !important; /* aire antes de botones */ } /* 4) Aire adicional sobre el bloque de botones (para todos: añadir/personalizar/diseña) */ article.product-miniature .product-add-to-cart, .js-product-miniature .product-add-to-cart{ margin-top: 6px !important; } } /* =========================== DESKTOP: evitar que el botón "salte" al hacer hover y dar aire estable entre precio y botones =========================== */ @media (min-width: 992px){ /* 1) Reserva espacio estable para el área inferior (precio + botones) */ article.product-miniature .product-description, .js-product-miniature .product-description{ padding-bottom: 22px !important; /* aire general */ } /* 2) El bloque de acciones NO debe cambiar en hover */ article.product-miniature .product-add-to-cart, .js-product-miniature .product-add-to-cart{ position: static !important; bottom: auto !important; top: auto !important; left: auto !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; margin-top: 12px !important; } article.product-miniature:hover .product-add-to-cart, .js-product-miniature:hover .product-add-to-cart{ position: static !important; bottom: auto !important; top: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; margin-top: 12px !important; } /* 3) Si el theme mete el botón dentro de un wrapper “hover” que aparece/desaparece */ article.product-miniature .highlighted-informations, .js-product-miniature .highlighted-informations{ position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; height: auto !important; } article.product-miniature:hover .highlighted-informations, .js-product-miniature:hover .highlighted-informations{ position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; height: auto !important; } /* 4) Precio: que tenga separación real del botón (sin pegarse) */ article.product-miniature .product-price-and-shipping{ margin-top: 10px !important; margin-bottom: 16px !important; } /* 5) Asegura que el botón no cambie tamaño/altura en hover */ article.product-miniature .product-add-to-cart .btn, .js-product-miniature .product-add-to-cart .btn{ transform: none !important; transition: none !important; } article.product-miniature:hover .product-add-to-cart .btn, .js-product-miniature:hover .product-add-to-cart .btn{ transform: none !important; transition: none !important; } } /* ========================================== DESKTOP: bloquear reflow en hover (que no “salte” el botón) ========================================== */ @media (min-width: 992px){ /* 1) Convertimos la zona de texto/precio/botón en layout estable */ article.product-miniature .product-description, .js-product-miniature .product-description{ display: flex !important; flex-direction: column !important; /* AJUSTA este valor si hace falta (reserva espacio fijo) */ min-height: 170px !important; /* evita que en hover cambien paddings/margins y provoquen reflow */ margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 22px !important; transition: none !important; } /* 2) En hover, exactamente igual (esto mata el “modo hover” del theme) */ article.product-miniature:hover .product-description, .js-product-miniature:hover .product-description{ min-height: 170px !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 22px !important; transition: none !important; } /* 3) Precio: altura estable + separación */ article.product-miniature .product-price-and-shipping, .js-product-miniature .product-price-and-shipping{ margin-top: 10px !important; margin-bottom: 16px !important; min-height: 26px !important; /* para que no cambie al hover */ opacity: 1 !important; visibility: visible !important; transition: none !important; } article.product-miniature:hover .product-price-and-shipping, .js-product-miniature:hover .product-price-and-shipping{ margin-top: 10px !important; margin-bottom: 16px !important; min-height: 26px !important; opacity: 1 !important; visibility: visible !important; transition: none !important; } /* 4) Botones: los empujamos al “fondo” del bloque y fijamos su altura */ article.product-miniature .product-add-to-cart, .js-product-miniature .product-add-to-cart{ margin-top: auto !important; /* clave: se va abajo dentro del flex */ min-height: 56px !important; /* altura estable del área de botón */ transition: none !important; } article.product-miniature:hover .product-add-to-cart, .js-product-miniature:hover .product-add-to-cart{ margin-top: auto !important; min-height: 56px !important; transition: none !important; } /* 5) El botón en sí: sin animaciones que cambien tamaño */ article.product-miniature .product-add-to-cart .btn, .js-product-miniature .product-add-to-cart .btn{ transition: none !important; transform: none !important; } article.product-miniature:hover .product-add-to-cart .btn, .js-product-miniature:hover .product-add-to-cart .btn{ transition: none !important; transform: none !important; } } /* ========================================== DESKTOP: evitar “salto” en hover (reflow) Reservando/mostrando siempre el bloque que aparece en hover ========================================== */ @media (min-width: 992px){ /* 1) Fuerza a que las variantes/swatches NO cambien en hover */ article.product-miniature .variant-links, article.product-miniature .product-variants, article.product-miniature .product-variants-links, article.product-miniature .color-variants, article.product-miniature .color-pick{ display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; /* reserva altura para que no empuje al aparecer */ min-height: 26px !important; } /* 2) Si el theme los mete dentro de la imagen, reservamos espacio abajo */ article.product-miniature .thumbnail-container, .js-product-miniature .thumbnail-container{ padding-bottom: 26px !important; /* igual que min-height de arriba */ } /* 3) Igualamos el layout del bloque inferior en normal/hover */ article.product-miniature .product-price-and-shipping, .js-product-miniature .product-price-and-shipping{ margin-bottom: 16px !important; /* aire con botones */ opacity: 1 !important; visibility: visible !important; transition: none !important; } article.product-miniature:hover .product-price-and-shipping, .js-product-miniature:hover .product-price-and-shipping{ margin-bottom: 16px !important; opacity: 1 !important; visibility: visible !important; } article.product-miniature .product-add-to-cart, .js-product-miniature .product-add-to-cart{ margin-top: 0 !important; transform: none !important; transition: none !important; } article.product-miniature:hover .product-add-to-cart, .js-product-miniature:hover .product-add-to-cart{ margin-top: 0 !important; transform: none !important; transition: none !important; } } /* DESKTOP: dejar variantes ARRIBA (en la imagen) y quitar las de ABAJO (show-list) */ @media (min-width: 992px){ /* 1) Mantener el bloque de variantes de arriba (sobre la imagen) */ .product-miniature .highlighted-informations .variant-links{ display: block !important; opacity: 1 !important; visibility: visible !important; } /* 2) Ocultar SOLO el duplicado de abajo (variant-links show-list) */ .product-miniature .variant-links.show-list{ display: none !important; } /* 3) Aún más preciso (por si el theme intenta forzarlo en hover): justo el que va después del product-desc */ .product-miniature .product-desc.show-list + .variant-links.show-list{ display: none !important; } } /* ========================= SOBRE NOSOTROS · DCORAZÓN ========================= */ .dc-about { width: 100%; } /* ================= HERO ================= */ .dc-about__hero { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 100px 20px; position: relative; text-align: center; } .dc-about__hero::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.72); } .dc-about__hero-inner { position: relative; max-width: 1000px; margin: 0 auto; } .dc-about__kicker { font-size: 34px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; } .dc-about__lead { font-size: 15px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; opacity: 0.85; } .dc-about__headline { font-size: 32px; line-height: 1.3; font-weight: 400; margin-bottom: 30px; } .dc-about__btn { display: inline-block; background: #000; color: #fff !important; padding: 14px 30px; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; text-decoration: none !important; transition: 0.3s ease; } .dc-about__btn:hover { opacity: 0.85; } /* ================= HISTORIA ================= */ .dc-about__story { padding: 80px 20px; } .dc-about__story-wrap { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: stretch; } .dc-about__story-card { background: #fff; padding: 40px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .dc-about__story-title { font-size: 32px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; } .dc-about__story-card p { font-size: 16px; line-height: 1.8; margin-bottom: 15px; opacity: 0.9; } .dc-about__story-media { background-size: cover; background-position: center; min-height: 550px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 6px 20px rgba(0,0,0,0.08); } /* ================= COLLAGE FINAL ================= */ .dc-about__final { margin-top: 40px; } .dc-about__final-img { width: 100%; display: block; } /* ================= RESPONSIVE ================= */ @media (max-width: 992px) { .dc-about__hero { padding: 70px 20px; } .dc-about__kicker { font-size: 26px; } .dc-about__headline { font-size: 24px; } .dc-about__story-wrap { grid-template-columns: 1fr; } .dc-about__story-media { min-height: 300px; } .dc-about__story-card { padding: 25px; } } /* ===================================== BLOQUE HOME · 8 CATEGORÍAS (2x4) Estilo elegante · limpio · premium ===================================== */ .dc-home-tiles { margin: 30px 0; } .dc-home-tiles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Tarjeta */ .dc-home-tile { display: block; background: #ffffff; border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; overflow: hidden; text-decoration: none !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; box-shadow: none !important; /* elimina sombras del tema */ } /* Imagen */ .dc-home-tile img { display: block; width: 100%; height: auto; transition: transform .35s ease; } /* Hover elegante (solo en escritorio) */ @media (hover: hover) { .dc-home-tile:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 8px 22px rgba(0,0,0,0.08) !important; /* sombra suave */ } .dc-home-tile:hover img { transform: scale(1.03); } } /* Foco accesible */ .dc-home-tile:focus-visible { outline: 2px solid rgba(255, 0, 140, 0.6); outline-offset: 3px; } /* Responsive tablet */ @media (max-width: 992px) { .dc-home-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } /* Responsive móvil */ @media (max-width: 480px) { .dc-home-tiles { margin: 20px 0; } .dc-home-tiles__grid { gap: 12px; } .dc-home-tile { border-radius: 10px; } } /* ===================================== BLOQUE HOME · 8 CATEGORÍAS (2x4) Estilo elegante · limpio · premium ===================================== */ .dc-home-tiles { margin: 30px 0; } .dc-home-tiles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Tarjeta */ .dc-home-tile { display: block; background: #ffffff; border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; overflow: hidden; text-decoration: none !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; box-shadow: none !important; /* elimina sombras del tema */ } /* Imagen */ .dc-home-tile img { display: block; width: 100%; height: auto; transition: transform .35s ease; } /* Hover elegante (solo en escritorio) */ @media (hover: hover) { .dc-home-tile:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 8px 22px rgba(0,0,0,0.08) !important; /* sombra suave */ } .dc-home-tile:hover img { transform: scale(1.03); } } /* Foco accesible */ .dc-home-tile:focus-visible { outline: 2px solid rgba(255, 0, 140, 0.6); outline-offset: 3px; } /* Responsive tablet */ @media (max-width: 992px) { .dc-home-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } /* Responsive móvil */ @media (max-width: 480px) { .dc-home-tiles { margin: 20px 0; } .dc-home-tiles__grid { gap: 12px; } .dc-home-tile { border-radius: 10px; } } .product-page .product-add-to-cart { display: flex; justify-content: center; } .product-page .product-add-to-cart .add-to-cart { margin: 0 auto; }/* ========================================================= NEWSLETTER DCORAZÓN — FINAL Escritorio normal + móvil forzado con clase JS ========================================================= */ .block_newsletter:not(.dc-newsletter){ display:none !important; } /* CONTENEDOR GENERAL */ #footer .footer-top-bar .dc-newsletter, #footer .dc-newsletter{ width:100% !important; max-width:1100px !important; margin:0 auto !important; padding:20px 16px 0 !important; text-align:center !important; } /* CABECERA */ #footer .footer-top-bar .dc-newsletter-head, #footer .dc-newsletter-head{ display:block !important; width:100% !important; margin:0 auto 14px !important; text-align:center !important; } #footer .footer-top-bar .dc-newsletter-title, #footer .dc-newsletter-title{ display:block !important; width:100% !important; margin:0 0 8px !important; font-size:34px !important; line-height:1.15 !important; font-weight:800 !important; text-align:center !important; } #footer .footer-top-bar .dc-newsletter-subtitle, #footer .dc-newsletter-subtitle{ display:block !important; width:100% !important; margin:0 !important; font-size:16px !important; line-height:1.35 !important; opacity:.85 !important; text-align:center !important; } #footer .dc-newsletter-badge{ display:none !important; } /* FORM */ #footer .footer-top-bar .dc-newsletter .newsletter-form, #footer .dc-newsletter .newsletter-form{ width:100% !important; } #footer .footer-top-bar .dc-newsletter form, #footer .dc-newsletter form{ width:100% !important; margin:0 !important; } /* WRAPPER */ #footer .footer-top-bar .dc-newsletter .dc-newsletter-wrapper, #footer .footer-top-bar .dc-newsletter .newsletter-wrapper, #footer .dc-newsletter .dc-newsletter-wrapper, #footer .dc-newsletter .newsletter-wrapper{ max-width:680px !important; margin:14px auto 0 !important; padding:12px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; flex-wrap:nowrap !important; border:1px solid rgba(0,0,0,.08) !important; background:rgba(255,192,203,.12) !important; border-radius:18px !important; position:relative !important; overflow:visible !important; box-sizing:border-box !important; } /* INPUT WRAPPER */ #footer .footer-top-bar .dc-newsletter .input-wrapper, #footer .dc-newsletter .input-wrapper{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; margin:0 !important; } /* INPUT */ #footer .footer-top-bar .dc-newsletter input[type="email"], #footer .dc-newsletter input[type="email"]{ width:100% !important; height:44px !important; border:none !important; outline:none !important; background:#fff !important; border-radius:14px !important; padding:0 14px !important; font-size:16px !important; box-shadow:0 1px 0 rgba(0,0,0,.03) inset !important; margin:0 !important; } /* BOTÓN DESKTOP */ #footer .footer-top-bar .dc-newsletter .dc-newsletter-btn, #footer .footer-top-bar .dc-newsletter button.dc-newsletter-btn.btn, #footer .footer-top-bar .dc-newsletter button[name="submitNewsletter"], #footer .dc-newsletter .dc-newsletter-btn, #footer .dc-newsletter button.dc-newsletter-btn.btn, #footer .dc-newsletter button[name="submitNewsletter"]{ flex:0 0 auto !important; min-width:170px !important; width:auto !important; max-width:none !important; height:44px !important; padding:0 18px !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border:none !important; border-radius:14px !important; font-weight:800 !important; white-space:nowrap !important; cursor:pointer !important; position:static !important; box-shadow:none !important; } #footer .footer-top-bar .dc-newsletter .dc-newsletter-btn-text, #footer .dc-newsletter .dc-newsletter-btn-text{ display:inline-block !important; font-size:inherit !important; line-height:1 !important; } /* LEGAL */ #footer .footer-top-bar .dc-newsletter-legal, #footer .footer-top-bar .dc-newsletter .newsletter-condition, #footer .dc-newsletter-legal, #footer .dc-newsletter .newsletter-condition{ margin-top:12px !important; font-size:13px !important; line-height:1.35 !important; opacity:.75 !important; text-align:center !important; } #footer .footer-top-bar .dc-newsletter-legal p, #footer .footer-top-bar .dc-newsletter .newsletter-condition p, #footer .dc-newsletter-legal p, #footer .dc-newsletter .newsletter-condition p{ margin:0 !important; } /* ========================================================= MODO MÓVIL FORZADO POR CLASE JS ========================================================= */ #footer .dc-newsletter.dc-newsletter-mobile, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile{ padding:16px 12px 0 !important; max-width:100% !important; } #footer .dc-newsletter.dc-newsletter-mobile .dc-newsletter-title, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .dc-newsletter-title{ font-size:22px !important; line-height:1.2 !important; margin:0 0 6px !important; } #footer .dc-newsletter.dc-newsletter-mobile .dc-newsletter-subtitle, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .dc-newsletter-subtitle{ font-size:14px !important; line-height:1.35 !important; padding:0 8px !important; } #footer .dc-newsletter.dc-newsletter-mobile .dc-newsletter-wrapper, #footer .dc-newsletter.dc-newsletter-mobile .newsletter-wrapper, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .dc-newsletter-wrapper, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .newsletter-wrapper{ max-width:100% !important; width:100% !important; gap:8px !important; padding:8px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:nowrap !important; } #footer .dc-newsletter.dc-newsletter-mobile .input-wrapper, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .input-wrapper{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; } #footer .dc-newsletter.dc-newsletter-mobile input[type="email"], #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile input[type="email"]{ width:100% !important; height:42px !important; padding:0 12px !important; font-size:15px !important; border-radius:12px !important; margin:0 !important; } #footer .dc-newsletter.dc-newsletter-mobile .dc-newsletter-btn, #footer .dc-newsletter.dc-newsletter-mobile button.dc-newsletter-btn.btn, #footer .dc-newsletter.dc-newsletter-mobile button[name="submitNewsletter"], #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .dc-newsletter-btn, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile button.dc-newsletter-btn.btn, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile button[name="submitNewsletter"]{ min-width:42px !important; width:42px !important; max-width:42px !important; height:42px !important; padding:0 !important; border-radius:12px !important; flex:0 0 42px !important; overflow:hidden !important; } #footer .dc-newsletter.dc-newsletter-mobile .dc-newsletter-btn-text, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .dc-newsletter-btn-text{ display:none !important; } #footer .dc-newsletter.dc-newsletter-mobile .dc-newsletter-btn::before, #footer .dc-newsletter.dc-newsletter-mobile button.dc-newsletter-btn.btn::before, #footer .dc-newsletter.dc-newsletter-mobile button[name="submitNewsletter"]::before, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .dc-newsletter-btn::before, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile button.dc-newsletter-btn.btn::before, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile button[name="submitNewsletter"]::before{ content:"➜" !important; display:block !important; width:42px !important; height:42px !important; line-height:42px !important; text-align:center !important; font-size:18px !important; } #footer .dc-newsletter.dc-newsletter-mobile .dc-newsletter-legal, #footer .dc-newsletter.dc-newsletter-mobile .newsletter-condition, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .dc-newsletter-legal, #footer .footer-top-bar .dc-newsletter.dc-newsletter-mobile .newsletter-condition{ margin-top:10px !important; font-size:12px !important; line-height:1.3 !important; padding:0 6px !important; }#_desktop_contact_link{ width:100%; display:flex; justify-content:center; }#_desktop_contact_link{ display:flex; justify-content:center; width:100%; } #contact-link{ display:inline-flex; align-items:center; flex-wrap:wrap; } #contact-link a{ display:inline-flex; align-items:center; position:relative; z-index:20; cursor:pointer; } #contact-link .top-separator{ margin:0 6px; opacity:.45; pointer-events:none; } /* asegurar que nada se monte encima */ .header-nav .right-nav{ position:relative; z-index:5; } #_desktop_contact_link{ position:relative; z-index:10; }