/* ================================================================ 1. STICKY HEADER (Separado por dispositivo para control total) ================================================================ */ #header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; background: #ffffff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* Limpieza técnica necesaria para el sticky */ html, body { overflow-x: visible !important; } #wrapper, #main { overflow: visible !important; } /* REGLAS PC: Buscador a la derecha */ @media (min-width: 768px) { #search_widget { width: 250px !important; float: right !important; } } /* REGLAS MÓVIL: Corrección de Menú y Lupa */ @media (max-width: 767px) { #header .header-top { display: block !important; padding: 0 !important; } #header .header-nav .container .row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; } #_mobile_menu_tester, .menu-icon { display: block !important; } div#search_widget { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; padding: 10px 15px !important; } #search_widget form input[type="text"] { display: block !important; width: 100% !important; height: 35px !important; border: 1px solid #ccc !important; border-radius: 4px !important; background: #f1f1f1 !important; } #search_widget i.search { display: block !important; position: absolute !important; right: 25px !important; top: 20px !important; font-size: 20px !important; color: #232323 !important; } } /* 1. EMPUJE DE LA PRIMERA LÍNEA: Para que no se meta debajo del menú */ #wrapper { margin-top: 25px !important; } /* 2. PC FIX: Evitar que el menú o filtros floten sobre el Header */ @media (min-width: 768px) { #header { z-index: 1000 !important; } #search_filters_wrapper, .facet, .block-categories { z-index: 100 !important; } } /* 3. MÓVIL FIX: Asegurar que el menú hamburguesa esté siempre "arriba" para ser clicable */ @media (max-width: 767px) { .menu-icon, #_mobile_menu_tester { position: relative !important; z-index: 9999 !important; pointer-events: auto !important; } } /* 1. FIX BUSCADOR: Hace que la lista de resultados siga al menú al hacer scroll */ .ui-autocomplete { position: fixed !important; z-index: 10001 !important; /* Por encima del header (1000) */ } /* 2. FIX FILTROS Y CAPAS: Obliga a los filtros a pasar POR DEBAJO del menú blanco */ #search_filters_wrapper, #search_filters, .facet, .block-categories, aside#left-column { z-index: 1 !important; /* Valor mínimo para que el header (1000) los tape */ } /* 3. FIX SOLAPE: "Muelle" para que la primera línea de productos baje y se vea */ #wrapper { margin-top: 0px !important; /* Ajusta este número (ej. 60px) hasta que veas la foto entera */ } /* 4. FIX MÓVIL: Asegura que el menú sea clicable y no lo tape el contenido */ @media (max-width: 767px) { .header-nav { z-index: 1001 !important; } #wrapper { margin-top: 0px !important; } } /* ================================================================ RETOQUE: LIMPIEZA DE CABECERA EN CHECKOUT (PAGO) =============================================================== */ body#checkout #search_widget, body#checkout .search-widget, body#checkout #_mobile_search_widget { display: none !important; } /* 2. Ajustamos el margen en el checkout */ body#checkout #wrapper { margin-top: 0 !important; padding-top: 10px !important; } /* 3. Si el logo se ve muy grande en el checkout sticky, lo ajustamos */ body#checkout .header-nav img.logo { max-height: 40px !important; width: auto !important; } /* ================================================================ 2.1 OCULTAR FLECHAS Y CIRCULO SLIDER ================================================================ */ /* Ocultar las flechas laterales (Anterior/Siguiente) */ #carousel .direction { display: none !important; } /* Ocultar los círculos/puntos indicadores de la parte inferior */ #carousel .carousel-indicators { display: none !important; } /* ================================================================ 2.2 TIPOGRAFÍA Y LECTURA ================================================================ */ body { -webkit-font-smoothing: antialiased !important; color: #333 !important; } h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.5px !important; font-weight: 700 !important; } .product-price { color: #232323 !important; font-weight: 800 !important; font-size: 1.3rem !important; } /* ================================================================ 3. ETIQUETAS (FLAGS) - DISEÑO UNIFICADO ================================================================ */ .product-flags .product-flag, #product .product-flags .product-flag, #product .product-prices .discount-percentage, #product .product-prices .discount-amount { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.85rem !important; padding: 5px 15px !important; border-radius: 50px !important; font-weight: 700 !important; text-transform: uppercase !important; box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important; border: none !important; margin: 0 5px 5px 0 !important; line-height: 1 !important; } /* COLORES ETIQUETAS */ .product-flags .product-flag.new, #product .product-flags .product-flag.new { background: var(--main-color) !important; color: #ffffff !important; } .product-flags .product-flag.discount, .product-flags .product-flag.on-sale, #product .product-prices .discount-percentage, #product .product-prices .discount-amount { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important; color: #ffffff !important; } /* ================================================================ 4. PRECIOS EN FICHA DE PRODUCTO (Tus tamaños exactos) ================================================================ */ /* Precio con descuento */ .product-prices .has-discount .current-price span { color: #e74c3c !important; font-size: 1.3rem !important; font-weight: 800 !important; } /* Precio normal */ .product-prices .current-price span { font-size: 1.4rem !important; font-weight: 700 !important; } /* Precio tachado */ #product .product-prices .regular-price { color: #666 !important; text-decoration: line-through !important; font-size: 1.1rem !important; margin-right: 10px !important; opacity: 0.8; } /* ========================================================================= 5. INTERACCIÓN Y LIMPIEZA LISTADOS (Zoom, Botones, Ocultar Subcategorías) ========================================================================= */ .btn-primary { background-color: var(--main-color) !important; border-radius: 8px !important; transition: all 0.3s cubic-bezier(.25,.8,.25,1) !important; font-weight: 600 !important; } .btn-primary:hover { transform: translateY(-2px) !important; background-color: #21a658 !important; } .product-miniature { border-radius: 12px !important; overflow: hidden !important; transition: all 0.3s ease !important; border: 1px solid #f1f1f1 !important; background: #fff !important; } .product-miniature:hover { border-color: var(--main-color) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; } .product-miniature img { transition: transform 0.5s ease !important; } .product-miniature:hover img { transform: scale(1.05) !important; } #subcategories, .subcategory-list { display: none !important; } /* ================================================================ 5.1 AJUSTES DE LISTADOS SOLO PARA PC (Resolución > 992px) ================================================================ */ @media (min-width: 992px) { /* 1. Sombra suave y separación entre filas */ .product-miniature { margin-bottom: 35px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; /* Sombra sutil base */ transition: box-shadow 0.3s ease !important; } /* Efecto al pasar el ratón: la sombra se intensifica */ .product-miniature:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important; } /* 2. Eliminamos el aire vacío de la descripción */ .product-miniature .product-description { padding: 5px 10px !important; /* Reducido al mínimo */ min-height: auto !important; /* Que la caja solo mida lo que mide el texto */ } /* 3. Reset total del Título (Nombre del producto) */ .product-title { margin-top: 0 !important; /* Quita espacio arriba del nombre */ margin-bottom: 0px !important; /* Espacio mínimo con el precio */ line-height: 1.2 !important; /* Interlineado compacto */ height: 38px !important; /* Altura fija para 2 líneas máximo */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 4. Subir el bloque de Precio */ .product-price-and-shipping { margin-top: -6px !important; /* Valor negativo para "succionar" el precio hacia arriba */ margin-bottom: 8px !important; line-height: 1 !important; } /* 5. Ajuste de imagen para bordes redondeados */ .product-miniature .thumbnail-container { margin-bottom: 0 !important; /* Evita hueco entre foto y texto */ overflow: hidden !important; border-radius: 12px 12px 0 0 !important; } } /* ================================================================ 5.2 AJUSTE DE PRECIOS (Móvil y PC) ================================================================ */ /* --- VALORES PARA MÓVIL (Un poco más grandes para legibilidad) --- */ .product-price-and-shipping .regular-price { margin-right: 6px !important; display: inline-block !important; font-size: 14px !important; /* Un punto más que en PC */ } .product-price-and-shipping .price { font-size: 16px !important; /* Un punto más que en PC */ font-weight: 700 !important; display: inline-block !important; } /* --- TUS AJUSTES FAVORITOS PARA PC (Resolución > 992px) --- */ @media (min-width: 992px) { .product-price-and-shipping .regular-price { margin-right: 8px !important; font-size: 13px !important; /* Tu ajuste PC */ } .product-price-and-shipping .price { font-size: 14px !important; /* Tu ajuste PC */ } } /* ================================================================ 6. REGLAS MÓVIL (BOTON FILTROS MOVIL) ================================================================ */ @media (max-width: 767px) { /* Botón de Filtros y OK */ #search_filter_toggler, #search_filter_controls button.ok { background-color: var(--main-color) !important; color: #ffffff !important; border-radius: 5px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ================================================================ 7. SELECTOR DE COLUMNAS 1 ó 2 MOVIL (SOLO LAYOUT) ================================================================ */ @media (max-width: 767px) { /* MODO 2 COLUMNAS: (Limpiado y optimizado) */ body.layout-2col #products .products.row, body.layout-2col .featured-products .products.row, body.layout-2col .product-accessories .products.row { display: flex !important; flex-wrap: wrap !important; margin-left: -5px !important; margin-right: -5px !important; } body.layout-2col #products .product, body.layout-2col .featured-products .product, body.layout-2col .product-accessories .product { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; padding: 5px !important; box-sizing: border-box !important; } body.layout-2col .product-description { min-height: 100px; } body.layout-2col .product-title a { font-size: 13px !important; } /* MODO 1 COLUMNA: Corregido el conflicto de anidación y selectores */ /* Solo aplicamos si el body NO tiene el ID "product" (Ficha de producto protegida) */ body.layout-1col:not(#product) .product { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 12px 15px !important; } body.layout-1col:not(#product) .product-miniature { margin-bottom: 20px !important; border: 1px solid #f1f1f1 !important; background: #ffffff !important; border-radius: 12px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; } body.layout-1col:not(#product) .thumbnail-container { margin: 0 !important; } body.layout-1col:not(#product) .product-miniature img { width: 100% !important; height: auto !important; border-radius: 12px 12px 0 0 !important; display: block !important; } body.layout-1col:not(#product) .product-description { text-align: left !important; padding: 15px !important; min-height: auto !important; } body.layout-1col:not(#product) .product-title a { font-size: 16px !important; font-weight: 600 !important; } body.layout-1col:not(#product) .product-price-and-shipping { font-size: 1.3rem !important; font-weight: 800 !important; margin-top: 8px !important; } } /* Fin de la @media query principal */ /* ========================================================= PARCHE DE PRECISIÓN: FICHA DE PRODUCTO ========================================================= */ /* 1. Forzar tamaño grande en ficha (PC y Móvil) */ #product .product-flags .product-flag, #product .product-prices .discount-percentage { font-size: 0.85rem !important; min-height: 28px !important; padding: 5px 15px !important; display: inline-flex !important; align-items: center !important; margin-bottom: 5px !important; /* Separa de la caja/precio */ } /* 2. Corregir el desplazamiento hacia abajo del descuento en la ficha */ #product .product-prices .discount-percentage { vertical-align: middle !important; position: relative !important; top: -2px !important; /* Lo sube para nivelarlo con el precio */ line-height: 1 !important; margin-top: 0 !important; } /* 3. Evitar que las etiquetas del listado peguen a la caja */ .product-miniature .product-flags { padding: 5px !important; /* Da aire respecto a los bordes de la miniatura */ } .product-miniature .product-flag { margin-bottom: 5px !important; margin-left: 2px !important; } /* 4. Separar etiquetas del borde en la FICHA de producto */ #product .product-flags { margin-top: 10px !important; /* Separa del elemento superior */ margin-left: 7px !important; /* Separa del borde izquierdo */ display: flex; flex-direction: column; align-items: flex-start; } /* ========================================================= MEJORA: SELECTORES EN LA MISMA LÍNEA (Tallas y Colores) ========================================================= */ /* 1. Tallas y Colores en la misma línea (El que funcionaba) */ .product-variants { display: flex !important; flex-wrap: wrap !important; gap: 25px !important; margin-bottom: 20px !important; } .product-variants-item { margin: 0 !important; flex: 0 1 auto !important; } /* 2. Ajuste de Cantidad: Solo quitamos aire innecesario */ .product-add-to-cart { margin-top: 10px !important; } .product-add-to-cart .qty { display: flex !important; align-items: center !important; gap: 15px !important; /* Pone el título 'Cantidad' al lado del selector */ } .product-add-to-cart .control-label { margin: 0 !important; } /* ================================================================ ACORTAR ESPACIO ENTRE SLIDER Y PRIMERA SECCION Y TITULOS H2 ================================================================ */ @media (max-width: 991px) { /* 1. Slider: dejamos un pelín de aire (10px) para que no choque */ #carousel { margin-bottom: 10px !important; } /* 2. Sección de productos: eliminamos el margen negativo anterior */ #content .featured-products, section.featured-products { padding-top: 0 !important; margin-top: 0 !important; } /* 3. Título: le damos un respiro arriba y abajo */ #index .featured-products h2.h2 { margin-top: 10px !important; /* Espacio entre el slider y el texto */ margin-bottom: 15px !important; /* Espacio entre el texto y los productos */ font-size: 1.1rem !important; /* Tamaño de letra más fino para móvil */ } } /* ================================================================ TITULOS H2 ================================================================ */ #index .featured-products h2.h2 { color: #333333 !important; /* Gris oscuro elegante */ font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #eeeeee; padding-bottom: 15px !important; margin-bottom: 25px !important; /* Espacio extra para que no pegue con los productos */ } /* ================================================================ 8. COLORES MOSTRAR EN CAJA PRODUCTO: SOLO MÓVIL (PC IGNORADO) ================================================================ */ @media (max-width: 767px) { /* 1.1 Separación foto-bloque de texto */ body:not(#product) .product-thumbnail { margin-bottom: 3px !important; display: block !important; border-radius: 15px 15px 0 0 !important; overflow: hidden !important; } /* 2. Reset contenedor (Mantenemos tu base) */ body:not(#product) .highlighted-informations { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; background: none !important; } /* 3. Título: Ayudamos a la subida con un empujón extra */ body:not(#product) .product-title { /* Un pequeño negativo aquí también para terminar de pegarlo */ margin-top: -4px !important; margin-bottom: 2px !important; line-height: 1.1 !important; position: relative !important; z-index: 1 !important; } /* 4. Colores: Aumentamos la succión para que el título suba de verdad */ body:not(#product) .variant-links { display: flex !important; align-items: center !important; margin-top: 0 !important; /* Subimos el negativo a -10px o -12px para que el título salte hacia arriba */ margin-bottom: -12px !important; padding-left: 8px !important; position: relative !important; z-index: 10 !important; } /* Texto "Palabra Color:" */ body:not(#product) .variant-links::before { content: "COLOR:"; font-size: 10px; color: #444444 !important; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 6px; line-height: 1; } /* 5. Círculos de color */ body:not(#product) .variant-links a.color { width: 14px !important; height: 14px !important; margin: 0 4px 0 0 !important; border-radius: 50% !important; border: 1px solid rgba(0,0,0,0.1) !important; } /* 6. Eliminar Vista Rápida en móvil */ body:not(#product) .quick-view { display: none !important; } /* 7. Precio pegado */ body:not(#product) .product-price-and-shipping { margin-top: 5px !important; line-height: 1.2 !important; } /* 8. Descripción compacta SOLO en móvil */ body:not(#product) .product-description { min-height: 0 !important; height: auto !important; padding: 0px 15px 10px 15px !important; border-radius: 0 !important; } } /* ================================================================ 9. NITIDEZ ARTIFICIAL NAVEGADOR FOTOS ================================================================ */ /* MEJORADO EN BLOQUE 20 */ /* ================================================================ 10. BLOQUE FINAL UNIFICADO: MODAL Y CHECKOUT (Elegante y Alineado) ================================================================ */ /* 1. DISEÑO DE LA ETIQUETA (Común para Modal y Checkout) */ .quickview .discount-percentage, .quickview .discount-amount, .quickview .product-flag.discount, .cart-container .discount-percentage, .cart-summary .discount { -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important; font-weight: 700 !important; text-transform: uppercase !important; border-radius: 50px !important; border: none !important; /* Tamaño reducido y quirúrgico */ font-size: 11px !important; /* Forzamos tamaño pequeño en px */ padding: 2px 8px !important; /* Píldora más estilizada */ line-height: 1.2 !important; display: inline-block !important; vertical-align: middle !important; } /* --- VISTA RÁPIDA (MODAL) --- */ /* Nivelación del descuento */ .quickview .product-prices .discount { margin-left: 8px !important; display: inline-block !important; vertical-align: middle !important; margin-top: -3px !important; } /* Ajuste imagen modal móvil */ @media (max-width: 767px) { .quickview .modal-content .product-cover img { width: 100% !important; max-width: 250px !important; margin: 0 auto !important; display: block; border-radius: 12px; /* Coherencia visual */ } } /* 3. RESET DEL CONTENEDOR (Evita que los impuestos se muevan de sitio) */ .quickview .product-prices { display: block !important; /* Volvemos al flujo estándar para no descuadrar */ margin-bottom: 10px !important; } .quickview .current-price { display: inline-block !important; vertical-align: middle !important; } /* 4. FIX IMAGEN MÓVIL EN MODAL */ @media (max-width: 767px) { .quickview .modal-content .product-cover img { width: 100% !important; max-width: 250px !important; margin: 0 auto !important; display: block; } } /* ================================================================ RETOQUE 1: VISTA RÁPIDA (SIN LUPA Y CON CURSOR NORMAL) ================================================================ */ /* 1. Ocultar icono de lupa */ .quickview .product-cover .layer .zoom-in, .quickview .product-cover .layer i.material-icons.zoom-in { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* 2. Quitar la "mano" (cursor) y mantener transparencia */ .quickview .product-cover .layer, .quickview .product-cover img { cursor: default !important; /* Flecha normal, no mano de click */ background: transparent !important; } /* 3. El zoom suave se mantiene (basado en tu Bloque 5) */ .quickview .product-cover:hover img { transform: scale(1.15) !important; } /* ================================================================ 11. BLOQUE FINAL ESTABLE: CARRITO Y CHECKOUT ================================================================ */ /* A. ROJO: Descuentos y "Gratis" (Carrito y Ventana de Pago) */ .cart-summary-line .value.discount, .cart-summary-line .value.-discount, .cart-summary-line[id*="discount"] .value, #cart-subtotal-shipping .value.free, /* --- ESTOS SON PARA LA VENTANA DE PAGO --- */ #js-checkout-summary #cart-subtotal-shipping .value, #checkout-summary #cart-subtotal-shipping .value, .checkout-js-summary .value.free { color: #e74c3c !important; font-weight: 700 !important; text-transform: uppercase !important; } /* B. NEGRO FINO: Subtotal de productos */ #cart-subtotal-products .value, .cart-summary-line#cart-subtotal-products .value, #checkout-summary #cart-subtotal-products .value { color: #232323 !important; font-weight: 400 !important; /* <--- Fino */ text-transform: none !important; } /* C. NEGRO FUERTE: El número del TOTAL */ .cart-summary-totals .cart-total .value, #checkout-summary .cart-summary-totals .cart-total .value { color: #232323 !important; font-weight: 900 !important; /* <--- Resaltado */ font-size: 1.35rem !important; } /* D. RECUADRO AZUL: El marco del Total */ .cart-summary-totals .cart-summary-line.cart-total, #checkout-summary .cart-summary-totals .cart-total { background: #f8f9fa !important; padding: 10px 15px !important; border-radius: 12px !important; border: 1px solid var(--main-color) !important; margin-top: 10px !important; } /* ================================================================ RECUADRO IMPORTE TOTAL ÚNICO (PC Y MÓVIL) - CORREGIDO ================================================================ */ /* ARREGLO DEFINITIVO DEL TOTAL: TODO EN UNA LÍNEA */ .cart-summary-line.cart-total { display: flex !important; flex-direction: row !important; /* Fuerza que sea fila, no columna */ justify-content: space-between !important; align-items: center !important; width: 100% !important; flex-wrap: nowrap !important; /* Prohíbe el salto de línea */ } /* Ajustamos el texto "Total" para que no empuje al precio */ .cart-summary-line.cart-total .label { flex: 1 !important; white-space: nowrap !important; font-size: 0.9rem !important; /* Un pelín más pequeño para ganar espacio */ } /* El precio: Grande, en Negro y alineado */ .cart-summary-line.cart-total .value { font-size: 1.2rem !important; font-weight: 700 !important; color: #232323 !important; /* Cambiado de color principal a Negro */ text-align: right !important; margin-left: 10px !important; } /* Quitamos los márgenes de Bootstrap que causan el salto */ .cart-summary-line.cart-total .col-md-6, .cart-summary-line.cart-total .col-xs-6 { width: auto !important; max-width: none !important; padding: 0 !important; } @media (max-width: 767px) { /* ... tus otras reglas de móvil ... */ /* SEPARACIÓN DEL TOTAL CON LO QUE VIENE DEBAJO (REGALOS/PRODUCTOS) */ .cart-summary-totals .cart-summary-line.cart-total, #checkout-summary .cart-summary-totals .cart-total { margin-bottom: 25px !important; /* Empuja hacia abajo el bloque de regalo */ } } /* ================================================================ BOTÓN STICKY REALIZAR COMPRA (CARRITO Y CHECKOUT) - VERSIÓN FINAL ================================================================ */ /* ================================================================ LIMPIEZA FINAL: ENFOQUE TOTAL EN LA COMPRA (SOLO MÓVIL) ================================================================ */ @media (max-width: 767px) { /* 1. Ocultar el footer para que el botón de compra sea el final real */ body#cart #footer, body#checkout #footer, body#cart .footer-container, body#checkout .footer-container { display: none !important; } /* 2. Aire al final del contenido para que el botón no pegue abajo del todo */ body#cart #main, body#checkout #main, body#cart #wrapper, body#checkout #wrapper { padding-bottom: 50px !important; margin-bottom: 0 !important; } /* 3. Limpieza de enlaces secundarios que distraen en el carrito */ body#cart .label, body#cart .promo-code, body#cart .cart-grid-body a.label { margin-bottom: 20px !important; } } /* ================================================================ 12. FIX: BOTÓN TRAMITAR PEDIDO (Incluso si está vacío) ================================================================ */ /* Forzamos el color del texto y fondo para que no se vea gris muerto */ .cart-content .btn-primary, .cart-grid-body .btn-primary, .checkout.cart-detailed-actions .btn-primary { background-color: var(--main-color) !important; color: #ffffff !important; /* Texto blanco puro */ font-weight: 700 !important; opacity: 1 !important; /* Evita que se vea traslúcido */ } /* Si el botón está deshabilitado (carrito vacío), que siga siendo legible */ .btn-primary.disabled, .btn-primary:disabled { background-color: #cccccc !important; /* Gris claro suave de fondo */ color: #666666 !important; /* Texto gris oscuro legible */ cursor: not-allowed !important; opacity: 0.7 !important; } /* ================================================================ 13. SCROLL INFINITO: BOTÓN DINÁMICO "CARGAR MÁS" ================================================================ */ /* El Botón: Diseño Moderno y Dinámico */ #load-more-btn { background-color: var(--main-color) !important; /* Tu Azul del Backoffice */ color: #ffffff !important; border: none !important; padding: 14px 45px !important; /* Más grande y cómodo para el pulgar */ font-size: 0.95rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border-radius: 50px !important; /* Forma de píldora elegante */ box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important; transition: all 0.3s cubic-bezier(.25,.8,.25,1) !important; cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } /* Efecto al pasar el ratón (Hover) */ #load-more-btn:hover:not(:disabled) { background-color: var(--hover-color) !important; /* Tu Verde de éxito */ transform: translateY(-3px) !important; /* El botón "levita" al tocarlo */ box-shadow: 0 8px 25px rgba(0,0,0,0.18) !important; } /* Estado cuando está cargando (Spinner) */ #load-more-btn:disabled { background-color: #dcdcdc !important; color: #888 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* Animación del Spinner de carga */ #load-more-btn.loading:after { content: ""; width: 16px; height: 16px; margin-left: 12px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #ffffff; border-radius: 50%; animation: mqvSpin 0.8s linear infinite; display: inline-block; } /* LA ANIMACIÓN (Sin esto el spinner no gira) */ @keyframes mqvSpin { to { transform: rotate(360deg); } } /* ============================================================ 14. PACK VISUAL FINAL REFORZADO (FICHA + MÓVIL + MODALES) ============================================================ */ /* 1. FICHA DE PRODUCTO: FOTO PRINCIPAL Y ZOOM */ .product-cover { overflow: hidden; border-radius: 16px; box-shadow: 0 8px 25px rgba(0,0,0,0.06); margin-bottom: 1.5rem; background: transparent !important; } .product-cover img { transition: transform 0.5s ease; width: 100%; opacity: 1 !important; filter: none !important; } @media (min-width: 992px) { .product-cover:hover img { transform: scale(1.08); } } /* Lupa Blanca y Nitidez */ .product-cover .layer { background: transparent !important; display: flex; align-items: center; justify-content: center; } .product-cover .layer .zoom-in { color: #ffffff !important; font-size: 45px !important; opacity: 0; transition: opacity 0.3s ease; text-shadow: 0 0 15px rgba(0,0,0,0.2); } .product-cover:hover .layer .zoom-in { opacity: 0.9 !important; } /* 2. REMARCADO UNIVERSAL DE MINIATURAS */ .thumb-container img.thumb { border-radius: 10px !important; border: 3px solid transparent !important; transition: all 0.3s ease; } .thumb-container.selected img, .selected .thumb, .product-images .thumb-container.selected img { border-color: var(--brand-primary) !important; transform: scale(1.05); } /* 3. ESCENARIO A: ESTRUCTURA DE FICHA Y VISTA RÁPIDA (FOTO ARRIBA, MINIATURAS ABAJO) */ /* Forzamos que las miniaturas se pongan DEBAJO de la foto principal en la Vista Rápida */ .quickview .images-container { display: flex !important; flex-direction: column !important; /* Foto arriba, lista abajo */ width: 100% !important; gap: 15px; } /* Configuramos la fila de miniaturas para que sea horizontal y con scroll */ .product-detail .product-images, .quickview .product-images, .js-qv-mask { display: flex !important; flex-direction: row !important; /* Miniaturas en fila */ flex-wrap: nowrap !important; overflow-x: auto !important; /* Scroll lateral con el dedo */ -webkit-overflow-scrolling: touch; width: 100% !important; gap: 12px !important; padding: 5px 0 !important; scrollbar-width: none; } .product-images::-webkit-scrollbar { display: none; } /* Tamaño de las miniaturas para que no "empujen" el diseño */ .product-detail .thumb-container, .quickview .thumb-container { flex: 0 0 80px !important; width: 80px !important; max-width: 80px !important; margin: 0 !important; } /* Limpieza de la caja blanca de la foto principal en Vista Rápida */ .quickview .product-cover { margin-bottom: 0 !important; background: transparent !important; } /* 4. ESCENARIO B: MINIATURAS EN VERTICAL (SOLO MODAL LUPA) */ /* Forzamos el comportamiento original de columna solo aquí */ .product-modal .thumbnails { display: block !important; width: 100% !important; overflow-y: auto !important; } .product-modal .thumbnails .thumb-container { display: block !important; width: 100% !important; max-width: 100% !important; margin-bottom: 10px !important; } /* 5. MODALES: REDONDEADO Y ESTRUCTURA */ .product-modal .modal-content, .quickview .modal-content { border-radius: 24px !important; overflow: hidden !important; border: none !important; box-shadow: 0 25px 60px rgba(0,0,0,0.3) !important; } .product-modal .modal-body, .quickview .modal-body { padding: 1.5rem !important; } /* Redondeado de fotos dentro de modales */ .js-modal-product-cover, .product-cover-modal, .quickview .modal-content .product-cover { border-radius: 20px !important; overflow: hidden !important; margin-bottom: 15px; } .js-modal-product-cover img, .product-cover-modal img, .product-modal img.img-fluid { border-radius: 20px !important; } .modal-dialog { border: none !important; } /* ================================================================ 15. BLOQUE RECONSTRUIDO: JERARQUÍA DE PRECIOS Y ETIQUETAS ================================================================ */ /* 1. CONTENEDOR: Forzamos que se comporte como una columna para el tachado */ #product .product-prices, .quickview .product-prices { display: flex !important; flex-direction: column !important; /* Tachado ARRIBA, Precio ABAJO */ align-items: flex-start !important; /* Alineado a la izquierda */ gap: 2px !important; /* Espacio mínimo entre filas */ } /* Contenedor interno para el Precio + Etiqueta (para que estos sí vayan en fila) */ #product .product-prices .current-price, .quickview .product-prices .current-price { display: flex !important; align-items: center !important; /* Nivelación horizontal perfecta */ gap: 8px !important; } /* 2. PRECIO TACHADO: Limpieza de desplazamientos */ #product .product-prices .regular-price, .quickview .product-prices .regular-price { display: block !important; font-size: 0.9rem !important; margin: 0 0 2px 0 !important; /* Margen inferior para no pegar al precio */ line-height: 1.2 !important; height: auto !important; vertical-align: baseline !important; } /* 3. LA ETIQUETA: Ajuste final de nivelación con el precio nuevo */ #product .product-prices .discount-percentage { position: relative !important; top: 0px !important; /* Al estar en un flex limpio, suele necesitar 0 o 1px */ transform: scale(0.85) !important; transform-origin: left center !important; margin: 0 !important; } /* 3. PRECIO ACTUAL: Tamaño elegante */ .product-price, .current-price span, .price { font-size: 1rem !important; font-weight: 700 !important; color: #232323 !important; } /* 4. ETIQUETA DESCUENTO: Nivelación milimétrica */ .product-prices .discount-percentage, .product-prices .discount-amount, .product-prices .discount { display: inline-flex !important; align-items: center !important; transform: scale(0.8) !important; transform-origin: left center !important; height: 18px !important; padding: 0 6px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; position: relative !important; top: 1px !important; /* <--- Ajusta este valor si la ves alta o baja */ } /* 5. AJUSTE ESPECÍFICO PARA LA FICHA DE PRODUCTO */ #product .product-prices, .quickview .product-prices { justify-content: flex-start !important; /* Alineado a la izquierda */ margin-top: 10px !important; } #product .current-price span, .quickview .current-price span { font-size: 1.2rem !important; /* Un pelín más grande en ficha */ } /* 6. PROTECCIÓN ETIQUETA FOTO (Sigue igual de bien) */ .images-container .product-flags .product-flag, .product-miniature .product-flags .product-flag { font-size: 13px !important; height: 28px !important; padding: 5px 12px !important; transform: none !important; display: inline-flex !important; } /* ================================================================ 16. RETOQUE QUIRÚRGICO: BLANCO ABSOLUTO (ANTI-HERENCIA ROJA) ================================================================ */ /* 1. Atacamos la etiqueta y CUALQUIER elemento interno (span, a, font, etc.) */ .quickview .product-prices .discount *, .quickview .product-prices .discount-percentage *, .quickview .product-prices .discount span, .quickview .product-prices .discount-percentage span, .quickview .product-prices .discount-percentage a { color: #ffffff !important; /* BLANCO NUCLEAR */ font-size: 11px !important; /* Tamaño nítido */ text-decoration: none !important; /* Sin subrayados */ background-color: transparent !important; /* Evita fondos raros */ } /* 2. Forzamos el contenedor para que la "caja" sea roja pero el "hijo" blanco */ .quickview .product-prices .discount-percentage, .quickview .product-prices .discount { background-color: #e74c3c !important; /* Tu Rojo de confianza */ color: #ffffff !important; /* Blanco de respaldo */ display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: scale(0.75) !important; /* Escala equilibrada */ transform-origin: left center !important; padding: 2px 10px !important; border-radius: 4px !important; position: relative !important; top: -2px !important; } /* ================================================================ RETOQUE QUIRÚRGICO: ESPACIADO TÍTULO - PRECIO (FICHA Y MODAL) ================================================================ */ /* 1. SEPARACIÓN VERTICAL: Empujamos todo el bloque de precios hacia abajo */ #product .product-prices, .quickview .product-prices { margin-top: 25px !important; /* <--- Sube este número si quieres más hueco */ margin-bottom: 15px !important; /* Espacio con los botones de abajo */ display: block !important; /* Asegura que respete el margen */ clear: both !important; /* Evita que se pegue a elementos flotantes */ } /* 2. AJUSTE PARA MÓVIL: Un poco menos de espacio para no desplazar el botón de compra */ @media (max-width: 767px) { #product .product-prices, .quickview .product-prices { margin-top: 15px !important; } } /* 3. LIMPIEZA DE TÍTULO: Nos aseguramos que el título no tenga márgenes locos */ #product h1.h1, .quickview h1 { margin-bottom: 0 !important; line-height: 1.2 !important; } /* ================================================================ 17. PALABRA "MENÚ" en movil ================================================================ */ @media (max-width: 767px) { /* 1. Ocultamos las 3 rayas pero NO el contenedor */ .menu-icon i.material-icons, #menu-icon i, #_mobile_menu_tester i { display: none !important; opacity: 0 !important; width: 0 !important; } /* 2. Inyectamos el texto HEREDANDO la fuente de la tienda */ .menu-icon::before, #_mobile_menu_tester::before, #menu-icon::before { content: "MENÚ" !important; display: inline-block !important; visibility: visible !important; /* HERENCIA DE FUENTE */ font-family: inherit !important; /* <--- Esto usa la fuente de tu tema */ font-size: 14px !important; /* Un pelín más pequeño suele quedar más elegante */ font-weight: 600 !important; /* Semi-negrita para que no sea tan "pesado" como el 800 */ color: #232323 !important; /* Centrado y Espaciado */ min-width: 50px !important; text-align: center !important; letter-spacing: 1px !important; /* Un poco de aire entre letras queda más profesional */ /* Ajuste de posición */ position: relative !important; top: 16px !important; /* Ajusta este valor si ves que "baila" arriba o abajo */ } /* 3. Contenedor: Alineación de la fila */ .header-nav .left-nav, #_mobile_menu_tester, .menu-icon { width: auto !important; display: flex !important; align-items: center !important; cursor: pointer !important; height: 100% !important; /* Asegura que el contenedor ocupe el alto del nav */ } } /* ================================================================ 17.2 "MENÚ" en movil EFECTO CRISTAL ================================================================ */ /* EFECTO CRISTAL DEFINITIVO PARA MENÚ MÓVIL */ @media (max-width: 767px) { /* 1. Evitamos que el fondo de la tienda se vuelva blanco/invisible */ #wrapper, #content, #main { transition: filter 0.3s ease !important; } /* 2. Cuando el menú está abierto, desenfocamos la tienda */ body.modal-open #wrapper, body.js-menu-open #wrapper, body.offcanvas-open #wrapper { filter: blur(10px) !important; opacity: 0.5 !important; visibility: visible !important; display: block !important; } /* 3. El "Velo" que tapa todo: Lo hacemos transparente y borroso */ .modal-backdrop, .menu-overlay, .js-menu-canvas-overlay, .offcanvas-backdrop { background: rgba(255, 255, 255, 0.2) !important; /* Blanco casi invisible */ backdrop-filter: blur(10px) !important; /* El efecto cristal */ -webkit-backdrop-filter: blur(10px) !important; opacity: 1 !important; display: block !important; } /* 4. IMPORTANTE: El menú en sí DEBE ser blanco sólido para que se lea */ #mobile_top_menu_wrapper, .js-menu-canvas, #_mobile_top_menu { background: #ffffff !important; box-shadow: 5px 0 20px rgba(0,0,0,0.2) !important; } } /* ================================================================ 18. SINCRONIZACIÓN ESCALONADA (ZOOM RÁPIDO + DESPLEGABLE LENTO) ================================================================ */ @media (min-width: 768px) { /* 1. LA FOTO: Zoom más rápido (ejemplo: 0.3 segundos) */ .product-miniature img { transition: transform 0.8s ease !important; transition-delay: 0s !important; /* Vuelve al tamaño normal al instante al quitar el ratón */ } .product-miniature:hover img { transform: scale(1.05) !important; /* CAMBIA AQUÍ EL TIEMPO DEL ZOOM (0.3s es muy elegante) */ transition-delay: 0.3s !important; } /* 2. EL DESPLEGABLE: Mucho más lento (ejemplo: 1.2 segundos) */ .product-miniature .highlighted-informations { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.5s ease, visibility 0.5s ease !important; transition-delay: 0s !important; /* Desaparece al instante al quitar el ratón */ } .product-miniature:hover .highlighted-informations { /* CAMBIA AQUÍ EL TIEMPO DEL DESPLEGABLE (1.2s para que no agobie) */ transition-delay: 1.5s !important; opacity: 1 !important; visibility: visible !important; } } /* ================================================================ 19. ESCONDER CAMPO ELEGIR DESPLEGABLE Y AJUSTAR ESPACIOS ================================================================ */ /* --- LIMPIEZA DE LISTADOS PRESTASHOP 8.2.3 --- */ /* 1. OCULTAR ELEMENTOS INNECESARIOS (Ordenación y Rango Móvil) */ .products-sort-order, #js-product-list-top .sort-by-row, #js-product-list-top .showing { display: none !important; } /* 2. FORZAR VISIBILIDAD Y ALINEACIÓN DEL CONTADOR DE PRODUCTOS */ #js-product-list-top .total-products { display: block !important; visibility: visible !important; opacity: 1 !important; padding-left: 0 !important; /* Alineación total a la izquierda */ } #js-product-list-top .total-products p { text-align: left !important; margin: 0 !important; padding: 5px 0 !important; /* Espaciado mínimo vertical */ } /* 3. ELIMINAR HUECOS DEL CONTENEDOR (Especial para Full Width) */ #js-product-list-top, #js-product-list-top.row { display: block !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } /* 4. PEGAR TEXTO A LA CAJA DE CATEGORÍA */ #category-description, .block-category, #js-product-list-header { margin-bottom: 0 !important; } section#products .products-selection { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; border: none !important; /* Elimina líneas divisorias si las hubiera */ } /* AJUSTAR CAJA DE CATEGORÍA AL CONTENIDO */ .block-category { min-height: auto !important; /* Elimina la altura mínima forzada */ margin-bottom: 0 !important; } .block-category .block-category-inner { min-height: 0 !important; padding-bottom: 10px !important; /* Ajusta este valor para el margen inferior deseado */ } /* Si usas imagen de portada, esto evita que deje huecos vacíos debajo */ .block-category .category-cover { height: auto !important; min-height: 0 !important; } .block-category #category-description { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ================================================================ 20. MEJORAR FOTOS Y TEXTOS RENDERIZADO DE ALTA CALIDAD MAGIA ================================================================ */ /* --- OPTIMIZACIÓN VISUAL Y LIMPIEZA DE ERRORES (PC/MÓVIL/MAC) --- */ /* 1. NITIDEZ PREMIUM EN TODA LA WEB (TEXTOS) */ body { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; } /* 2. EL MILAGRO DE LAS FOTOS (ALTA DEFINICIÓN SIN BLOQUEAR ZOOM) */ .product-miniature .thumbnail-container img, .product-miniature .product-thumbnail img, .block-category .category-cover img { image-rendering: auto !important; image-rendering: -webkit-optimize-contrast !important; image-rendering: high-quality !important; -ms-interpolation-mode: bicubic !important; /* Quitamos el transform aquí para que el ZOOM de los listados funcione */ backface-visibility: hidden !important; -webkit-font-smoothing: antialiased !important; } /* Aplicamos el transform SOLO a la foto de la FICHA (donde el zoom es distinto) */ .product-cover img { transform: translateZ(0) !important; image-rendering: high-quality !important; } /* 3. LIMPIEZA DE ERRORES EN CONSOLA (FIREFOX/MAC) */ * { -moz-border-radius: unset; -webkit-border-radius: unset; } /* ================================================================ 21. Centrar USUARIO EN CABECERA PC ================================================================ */ /* 1. AJUSTE EXCLUSIVO PARA PC (Pantallas grandes) */ @media (min-width: 992px) { #header .header-nav .right-nav { display: flex !important; justify-content: flex-end !important; } #header .user-info { margin-right: 1px !important; /* Espacio fijo para que el carrito NO se desplace */ margin-left: 5px !important; width: auto !important; } } /* ================================================================ 21.2 CABECERA PC MAS ESTRECHA ================================================================ */ /* AJUSTE SOLO PARA PC */ @media (min-width: 992px) { /* Estrechar la cabecera principal (Logo y Menú) */ #header .header-top { padding-top: 10px !important; /* Ajusta este valor si la quieres más fina */ padding-bottom: 10px !important; height: auto !important; /* Quita posibles alturas fijas */ } /* Mantener el resto de ajustes de sesión y carrito */ #header .header-nav .right-nav { display: flex !important; justify-content: flex-end !important; } #header .user-info { margin-right: 1px !important; margin-left: 5px !important; width: auto !important; } } /* ================================================================================ 22 EFECTO TARJETA INICIO SESION, REGISTRO Y FORMULARIO CHECKOUT, VISTA PREVIA ================================================================================ */ /* 1. TARJETAS GRANDES (Formularios y Contenido con 30px de espacio) */ #contact #content, #registration #content, #authentication #content, #checkout section.checkout-step, .cart-grid-body .card.cart-container, #order-confirmation #content-hook_order_confirmation, #order-confirmation #order-details, #quickview-modal .modal-content { background: #fff !important; padding: 30px !important; /* Espacio amplio para formularios */ border-radius: 15px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; border: 1px solid #f0f0f0 !important; margin-bottom: 25px !important; } /* 2. TARJETAS ESTRECHAS (Resumen del pedido con 15px para que quepa el precio) */ .cart-grid-right .card.cart-summary, #js-checkout-summary { background: #fff !important; padding: 15px !important; /* <--- CLAVE: Menos relleno para que el € no se salga */ border-radius: 15px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; border: 1px solid #f0f0f0 !important; margin-bottom: 25px !important; } /* AJUSTE MÓVIL (Reducimos el padding para que no se vea estrecho) */ @media (max-width: 767px) { #contact #content, #registration #content, #authentication #content, #checkout section.checkout-step, .cart-grid-body .card.cart-container, .cart-grid-right .card.cart-summary, #js-checkout-summary { padding: 12px !important; } } /* EVITAR QUE EL PRECIO SE FRAGMENTE (Punto de seguridad extra) */ .cart-summary-line .value { white-space: nowrap !important; /* Obliga al número y al € a ir siempre juntos */ } /* ================================================================ 22.1. CHECKOUT METIENDO DATOS PEDIDO ================================================================ */ /* FORZAR RESUMEN DEL CARRITO SIEMPRE ABIERTO EN EL PAGO (PC) */ @media (min-width: 992px) { #checkout #cart-summary-product-list { display: block !important; /* Muestra la lista de productos siempre */ height: auto !important; opacity: 1 !important; visibility: visible !important; } /* Ocultamos la flechita de "Mostrar detalles" porque ya está todo a la vista */ #checkout .cart-summary-products .js-show-details { display: none !important; } } /* ================================================================ 23. ALINEACIÓN MÓVIL (Solo en formularios) ================================================================ */ @media (max-width: 767px) { #contact #content, #registration #content, #authentication #content { padding: 15px !important; } #contact .form-group, #registration .form-group, #authentication .form-group { display: block !important; } .form-control-label { text-align: left !important; display: block !important; width: 100% !important; } } /* AJUSTE QUIRÚRGICO FINAL PARA CAPTCHA EN MÓVIL */ @media (max-width: 480px) { /* 1. Buscamos cualquier contenedor de captcha de Cloudflare o Google */ .cf-turnstile, .g-recaptcha, div[id*="captcha"], div[class*="captcha"] { width: 100% !important; overflow: visible !important; display: flex !important; justify-content: center !important; margin: 10px 0 !important; } /* 2. El truco del escalado: si el iframe mide 300px y el móvil 280px, lo encogemos */ .cf-turnstile iframe, .g-recaptcha iframe, div[class*="captcha"] iframe { transform: scale(0.85) !important; /* Lo reducimos al 85% de su tamaño */ transform-origin: center center !important; /* Lo escalamos desde el centro para que no se desplace */ max-width: none !important; /* Quitamos restricciones para que el escalado mande */ } } /*============================================================== 24. DISEÑO PRO DE CAMPOS Y TARJETAS DE PAGO (PC Y MÓVIL) ================================================================ */ /* 1. CAMPOS DE TEXTO, SELECTORES Y MENSAJES */ #contact .form-control, #registration .form-control, #authentication .form-control, #checkout-guest-form .form-control, .js-customer-form .form-control, .checkout-step .form-control, .contact-form input, .contact-form select, .contact-form textarea { border-radius: 12px !important; /* <--- Coherente con tus tarjetas */ border: 1px solid #ddd !important; padding: 10px 15px !important; background-color: #fff !important; transition: all 0.3s ease !important; font-size: 0.95rem !important; color: #444 !important; } /* 2. EFECTO AL HACER CLIC (FOCUS) */ .form-control:focus, .form-control:hover { border-color: var(--main-color) !important; box-shadow: 0 0 8px rgba(0,0,0,0.05) !important; outline: none !important; } /* 3. ARREGLO DE LAS TARJETAS DE PAGO (PAYCOMET / STRIPE) */ .payment-options .payment-option { background: #fdfdfd !important; margin-bottom: 15px !important; padding: 15px !important; border-radius: 12px !important; /* <--- Efecto tarjeta */ border: 1px solid #eee !important; display: flex !important; align-items: center !important; transition: transform 0.2s ease !important; } /* 4. TEXTOS DENTRO DEL PAGO */ .payment-option label { font-weight: 600 !important; color: #333 !important; margin-left: 10px !important; cursor: pointer !important; } /* 5. ELIMINAR BORDES FEOS DE BOTONES DE PAGO ANTIGUOS */ .payment-options .custom-radio { margin-right: 10px !important; } /* ================================================================ 25. DISEÑO PRO: PANEL DE CLIENTE, HISTORIAL Y LISTADOS ================================================================ */ /* 1. CONTENEDOR PRINCIPAL (Tarjeta Blanca) */ #history #content, #order-slip #content, #discount #content, #my-account #content, .page-my-account #content { background: #fff !important; padding: 25px !important; border-radius: 15px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; border: 1px solid #f0f0f0 !important; margin-bottom: 30px; } /* 2. MOSAICO DE ICONOS (Página principal de Mi Cuenta) */ .page-my-account #content .links { display: flex !important; flex-wrap: wrap !important; gap: 15px !important; justify-content: center; } .page-my-account #content .links a { background: #fff !important; border: 1px solid #f0f0f0 !important; border-radius: 15px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; flex: 1 1 180px !important; min-height: 120px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 20px !important; transition: all 0.3s ease !important; color: #444 !important; } .page-my-account #content .links a i { font-size: 2.8rem !important; margin-bottom: 12px !important; color: var(--main-color) !important; transition: color 0.3s ease !important; } .page-my-account #content .links a:hover { transform: translateY(-5px) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; border-color: var(--main-color) !important; } .page-my-account #content .links a:hover i { color: var(--hover-color) !important; } /* 3. ESTILO DE TABLAS (Historial, Facturas y Cupones) */ .table { border-collapse: separate !important; border-spacing: 0 10px !important; } .table tbody tr { background: #fdfdfd !important; transition: all 0.2s ease !important; } .table tbody tr td { border-top: 1px solid #f0f0f0 !important; border-bottom: 1px solid #f0f0f0 !important; padding: 15px !important; } .table tbody tr td:first-child { border-left: 1px solid #f0f0f0 !important; border-radius: 12px 0 0 12px !important; } .table tbody tr td:last-child { border-right: 1px solid #f0f0f0 !important; border-radius: 0 12px 12px 0 !important; } /* 4. BOTÓN CERRAR SESIÓN (Centrado y de marca) */ .page-my-account .footer.container { text-align: center !important; margin-top: 20px !important; } .page-my-account .footer.container a[data-link-action="logout"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; color: var(--main-color) !important; padding: 12px 30px !important; border-radius: 12px !important; border: 2px solid var(--main-color) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 0.85rem !important; transition: all 0.3s ease !important; } .page-my-account .footer.container a[data-link-action="logout"]:hover { background: var(--hover-color) !important; color: #fff !important; border-color: var(--hover-color) !important; transform: scale(1.05); } /* 5. BOTONES DE VOLVER (CENTRADOS Y VISIBLES) */ footer.page-footer, .my-account-footer { text-align: center !important; margin-top: 40px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 15px; } footer.page-footer a, .my-account-footer a { display: inline-flex !important; align-items: center !important; color: var(--main-color) !important; font-weight: 600 !important; padding: 10px 20px !important; border: 1px solid var(--main-color) !important; border-radius: 10px !important; text-decoration: none !important; transition: all 0.2s ease !important; } footer.page-footer a:hover, .my-account-footer a:hover { background: var(--main-color) !important; color: #fff !important; } /* ================================================================ 26. CENTRADO MAESTRO DE BOTONES (LOGIN, REGISTRO Y PASS) EN MÓVIL ================================================================ */ @media (max-width: 767px) { /* 1. LOS CONTENEDORES: Forzamos que sean una columna centrada */ .form-footer, #login-form .form-footer, #customer-form .form-footer, .forgot-password, .no-account { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; padding: 15px 0 !important; float: none !important; clear: both !important; } /* 2. LOS BOTONES: Centrados, con tu color y sin deformarse */ .form-footer button, #submit-login, #customer-form button[data-link-action="save-customer"] { width: 100% !important; max-width: 280px !important; /* Tamaño perfecto para el pulgar */ margin: 10px auto !important; background-color: var(--main-color) !important; color: #fff !important; float: none !important; height: 50px !important; } /* 3. LOS ENLACES (Olvidé pass / Crear cuenta): Centrados y legibles */ .forgot-password a, .no-account a { display: inline-block !important; width: auto !important; text-align: center !important; margin-top: 10px !important; text-decoration: underline !important; } /* 4. PROTECCIÓN ANTI-ESTRANGULAMIENTO: El ojo de la contraseña */ .form-group .input-group { display: flex !important; width: 100% !important; } /* Anulamos cualquier hueco (offset) de PrestaShop que desplace a la derecha */ .offset-md-3, .col-md-9 { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; flex: 0 0 100% !important; } } /* ================================================================ 27. BLINDAJE FINAL COLOR BOTÓN PRIMARIO ================================================================ */ /* BLINDAJE FINAL COLOR BOTÓN PRIMARIO */ .btn-primary, .btn-primary:enabled, .btn-primary:not(:disabled), .btn-primary:active, .btn-primary:focus { background-color: var(--main-color) !important; color: #fff !important; border-color: var(--main-color) !important; } .btn-primary:hover { background-color: var(--hover-color) !important; border-color: var(--hover-color) !important; } /* ================================================================ 28. MINIATURAS GALERIA A SU TAMAÑO Y BOTÓN FLECHAS ================================================================ */ /* Fuerza el tamaño máximo de la imagen dentro de la galería */ .product-images img.thumb { max-width: 85px !important; /* Ajusta los 80px al tamaño que quieras */ height: auto !important; } /* Evita que el contenedor de la imagen crezca */ .product-images li.thumb-container { width: 80px !important; flex: 0 0 80px !important; } /* Sube las flechas para centrarlas con las miniaturas de 80px */ .scroll-box-arrows { display: flex !important; position: relative !important; top: -31px !important; /* Sube las flechas sobre las fotos */ height: 0 !important; pointer-events: none; /* No tapa los clics en las fotos */ } /* Forzar visibilidad de flechas izquierda/derecha */ .scroll-box-arrows i { color: #333 !important; /* Color de la flecha oscuro */ background: rgba(255, 255, 255, 0.9) !important; /* Fondo blanco casi opaco */ border-radius: 50% !important; width: 30px !important; height: 30px !important; display: flex !important; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra suave para que flote */ pointer-events: auto !important; /* Permite clicar la flecha */ } /* ================================================================ 29. VISTA PREVIA MINIATURAS GALERIA QUITAR BOTÓN FLECHAS ================================================================ */ /* Borra las flechas solo en la Vista Rápida (Quickview) */ .quickview .js-arrows, .quickview .arrows, .quickview .scroll-box-arrows { display: none !important; } /* ================================================================ 30. NO HACER ZOOM EN MOVIL y EVITAR QUE LA PAGINA BAILE ================================================================ */ /* ================================================================ 31. DETALLES DEL PRODUCTO, Campos Bonitos ================================================================ */ /* 1. Aplicamos el fondo azul y redondeado a CADA etiqueta (Nombre) */ .product-features dl.data-sheet dt.name { background: #f4fbfc !important; padding: 8px 12px !important; border-radius: 8px 0 0 8px !important; /* Redondeado solo a la izquierda */ margin-bottom: 8px !important; box-shadow: inset -1px 0 0 #d4e8ff; /* Línea sutil de separación */ } /* 2. Aplicamos el fondo azul y redondeado a CADA valor (Resultado) */ .product-features dl.data-sheet dd.value { background: #f4fbfc !important; padding: 8px 12px !important; border-radius: 0 8px 8px 0 !important; /* Redondeado solo a la derecha */ margin-bottom: 8px !important; margin-left: 0 !important; } /* 3. Estilo para la Referencia suelta (si aparece arriba) */ .product-reference { display: inline-block !important; background: #f4fbfc !important; padding: 5px 12px !important; border-radius: 8px !important; margin-bottom: 10px !important; } /* 4. Limpieza de bordes grises originales del tema Classic */ .data-sheet dd.value, .data-sheet dt.name { border: none !important; min-height: 40px !important; display: flex !important; align-items: center !important; } /* Ajuste quirúrgico para centrar verticalmente el texto de la Referencia */ .product-reference { display: inline-flex !important; /* Cambiamos a inline-flex para centrado vertical */ align-items: center !important; /* Centra el texto de arriba a abajo */ justify-content: center !important; min-height: 40px !important; /* Ajusta este valor si quieres que mida igual que los otros */ line-height: 1 !important; /* Elimina espacios extra de línea */ } /* Si dentro tiene un o