/* ==== PRIME CARDS v1.0 - Listing product miniatures ==== */ /* CARD base: relative, padding-bottom reservado para btn absolute */ html body .product-miniature{ position:relative !important; background:#fff !important; border:1px solid #e5e7eb !important; border-radius:8px !important; overflow:hidden !important; display:block !important; padding:0 0 108px 0 !important; margin:0 0 12px !important; text-align:left !important; height:auto !important; } html body .js-product-miniature-wrapper{ display:block !important; } /* THUMBNAIL - padding reducido arriba, imagen grande */ html body .product-miniature .thumbnail-container{ background:#fff !important; margin:0 !important; padding:6px 14px 4px !important; width:100% !important; border:none !important; height:auto !important; } html body .product-miniature .thumbnail-container picture, html body .product-miniature .thumbnail-container > a{ display:block !important; width:100% !important; } html body .product-miniature .thumbnail-container img{ height:220px !important; width:auto !important; max-width:100% !important; min-height:0 !important; max-height:none !important; object-fit:contain !important; background:transparent !important; aspect-ratio:auto !important; margin:0 auto !important; display:block !important; } /* DESCRIPCION block normal, padding-top apretado */ html body .product-miniature .product-description{ padding:6px 12px 0 !important; margin:0 !important; display:block !important; text-align:left !important; background:#fff !important; border:none !important; height:auto !important; min-height:0 !important; } /* Ocultar elementos innecesarios */ html body .product-miniature .product-category-name, html body .product-miniature .product-reference, html body .product-miniature .product-add-cart{ display:none !important; } /* MARCA - rojo Prime, uppercase */ html body .product-miniature .product-brand{ display:block !important; height:14px !important; line-height:14px !important; margin:0 0 4px !important; padding:0 !important; font-size:11px !important; color:#FF0D09 !important; font-weight:700 !important; letter-spacing:.5px !important; text-transform:uppercase !important; overflow:hidden !important; } html body .product-miniature .product-brand a, html body .product-miniature .product-brand span{ color:#FF0D09 !important; text-decoration:none !important; font-weight:700 !important; font-size:11px !important; } /* TITULO - 36px fijo (2 lineas), bold */ html body .product-miniature h2.product-title, html body .product-miniature .product-title{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; height:36px !important; min-height:36px !important; max-height:36px !important; line-height:18px !important; font-size:13px !important; font-weight:600 !important; color:#18181b !important; margin:0 0 4px !important; padding:0 !important; text-align:left !important; } html body .product-miniature .product-title a{ color:#18181b !important; text-decoration:none !important; font-weight:600 !important; } /* DESCRIPCION CORTA - 32px fijo */ html body .product-miniature .product-description-short{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; height:32px !important; min-height:32px !important; max-height:32px !important; line-height:16px !important; font-size:12px !important; color:#6b7280 !important; margin:0 0 6px !important; padding:0 !important; text-align:left !important; opacity:1 !important; } html body .product-miniature .product-description-short *{ font-size:12px !important; color:#6b7280 !important; line-height:16px !important; margin:0 !important; padding:0 !important; text-decoration:none !important; display:inline !important; } /* REVIEWS - 18px fijo (siempre presente o placeholder) */ html body .product-miniature .product-list-reviews, html body .product-miniature .ets-rv-grade-stars, html body .product-miniature .prime-reviews-placeholder{ position:static !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; height:18px !important; min-height:18px !important; max-height:18px !important; line-height:18px !important; margin:0 0 6px !important; padding:0 !important; background:transparent !important; font-size:11px !important; color:#6b7280 !important; width:auto !important; z-index:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; gap:4px !important; } /* PRECIO - flex baseline */ html body .product-miniature .product-price-and-shipping{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:baseline !important; gap:8px !important; margin:0 0 6px !important; padding:0 !important; border:none !important; text-align:left !important; height:22px !important; min-height:22px !important; width:100% !important; } html body .product-miniature .product-price-and-shipping .addToCartFormWrapper, html body .product-miniature .product-price-and-shipping form.addToCartForm{ display:none !important; } html body .product-miniature .product-price, html body .product-miniature .product-price-and-shipping .price, html body .product-miniature .product-price-and-shipping > a:first-child{ font-size:18px !important; font-weight:800 !important; color:#18181b !important; margin:0 !important; line-height:1 !important; display:inline-block !important; text-decoration:none !important; } html body .product-miniature .regular-price{ font-size:13px !important; color:#9ca3af !important; text-decoration:line-through !important; font-weight:500 !important; margin:0 !important; line-height:1 !important; display:inline-block !important; } /* COUNTDOWN - badge horizontal CENTRADO v=144 - Reducido ~10% el alto vertical alrededor del badge: wrapper 24→22, margen 6→5, badge 22→20, padding 3px→2px */ html body .product-miniature .price-countdown-wrapper, html body .product-miniature .prime-countdown-placeholder{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:22px !important; min-height:22px !important; max-height:22px !important; margin:0 0 2px !important; padding:0 !important; background:transparent !important; overflow:visible !important; line-height:1 !important; flex:none !important; text-align:center !important; } html body .product-miniature .price-countdown, html body .product-miniature .price-countdown.badge-discount, html body .product-miniature .price-countdown-wrapper > div{ display:inline-flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:3px !important; width:auto !important; max-width:100% !important; height:20px !important; min-height:20px !important; max-height:20px !important; background:#FF0D09 !important; color:#fff !important; font-size:11px !important; font-weight:600 !important; padding:2px 10px !important; border-radius:4px !important; line-height:1.2 !important; white-space:nowrap !important; border:none !important; text-transform:none !important; box-shadow:none !important; overflow:hidden !important; } html body .product-miniature .price-countdown *, html body .product-miniature .price-countdown-wrapper *{ display:inline !important; font-size:11px !important; color:#fff !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; background:transparent !important; width:auto !important; height:auto !important; white-space:nowrap !important; } html body .product-miniature .price-countdown .price-countdown-title, html body .product-miniature .price-countdown .time-txt{ display:none !important; } html body .product-miniature .price-countdown .fa-clock-o, html body .product-miniature .price-countdown .fa-clock{ display:inline !important; color:#fff !important; font-size:11px !important; margin-right:2px !important; } /* FORM ADD-CART - absolute al fondo del card */ html body .product-miniature .addToCartFormWrapper{ position:absolute !important; bottom:12px !important; left:12px !important; right:12px !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; display:block !important; background:transparent !important; border:none !important; height:auto !important; } html body .product-miniature .addToCartFormWrapper form.addToCartForm{ display:flex !important; flex-direction:column !important; gap:6px !important; margin:0 !important; padding:0 !important; width:100% !important; background:transparent !important; } html body .product-miniature .addToCartFormWrapper .variantsProductWrapper{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; order:1 !important; } html body .product-miniature .addToCartFormWrapper .variantsProductWrapper select{ width:100% !important; max-width:100% !important; height:36px !important; min-height:36px !important; max-height:36px !important; line-height:1 !important; padding:0 26px 0 10px !important; border:1px solid #d1d5db !important; border-radius:6px !important; font-size:12px !important; color:#374151 !important; background-color:#fff !important; background-image:url("data:image/svg+xml;utf8,") !important; background-repeat:no-repeat !important; background-position:right 6px center !important; background-size:14px !important; -webkit-appearance:none !important; appearance:none !important; text-overflow:ellipsis !important; white-space:nowrap !important; overflow:hidden !important; box-sizing:border-box !important; display:block !important; } html body .product-miniature .addToCartFormWrapper input[name='qty'], html body .product-miniature .addToCartFormWrapper .input-qty, html body .product-miniature .addToCartFormWrapper .form-control.input-qty{ display:none !important; } html body .product-miniature .addToCartFormWrapper .input-group-add-cart{ display:contents !important; } html body .product-miniature .addToCartFormWrapper .btn.btn-primary.add-to-cart, html body .product-miniature .addToCartFormWrapper button.add-to-cart, html body .product-miniature .addToCartFormWrapper .add-to-cart:not(.btn-product-list){ display:block !important; width:100% !important; max-width:100% !important; height:36px !important; min-height:36px !important; max-height:36px !important; line-height:34px !important; background:#FF0D09 !important; border:1px solid #FF0D09 !important; color:#fff !important; border-radius:6px !important; font-size:13px !important; font-weight:500 !important; padding:0 8px !important; margin:0 !important; cursor:pointer !important; text-align:center !important; white-space:nowrap !important; text-transform:none !important; font-family:inherit !important; order:2 !important; box-sizing:border-box !important; overflow:hidden !important; text-overflow:ellipsis !important; } html body .product-miniature .addToCartFormWrapper .btn-product-list{ display:none !important; } /* BADGES descuento + Nuevo: rojo unificado */ html body .product-miniature .product-flag{ border-radius:4px !important; font-size:11px !important; font-weight:600 !important; padding:4px 8px !important; top:8px !important; border:none !important; line-height:1 !important; } html body .product-miniature .product-flag.discount, html body .product-miniature .product-flag.discount-percentage, html body .product-miniature .product-flag.discount-amount, html body .product-miniature .product-flag.new, html body .product-miniature .product-flag.online-only{ background:#FF0D09 !important; color:#fff !important; border-color:#FF0D09 !important; } html body .product-miniature .product-flag.discount, html body .product-miniature .product-flag.discount-percentage, html body .product-miniature .product-flag.discount-amount{ left:8px !important; } /* OCULTAR iconos hover */ html body .product-miniature .iqit-quickview, html body .product-miniature .iqit-thumbnail-buttons, html body .product-miniature .quick-view, html body .product-miniature .ets_pf_wrap, html body .product-miniature .ets_pf_button, html body .product-miniature .ets_pf_overlay, html body .product-miniature [class*='wishlist'], html body .product-miniature .iqit-add-to-wishlist, html body .product-miniature .compare, html body .product-miniature .product-list-actions, html body .product-miniature .product-functional-buttons, html body .product-miniature .functional-buttons, html body .product-miniature .iqit-product-list-actions, html body .product-miniature .product-additional-info{ display:none !important; } /* ==== MOBILE ==== */ @media (max-width: 768px){ html body .product-miniature{ padding-bottom:104px !important; } html body .product-miniature .thumbnail-container{ padding:4px 10px 4px !important; } html body .product-miniature .thumbnail-container img{ height:200px !important; min-height:0 !important; max-height:none !important; width:auto !important; } html body .product-miniature .product-description{ padding:4px 10px 0 !important; } html body .product-miniature .addToCartFormWrapper{ bottom:10px !important; left:10px !important; right:10px !important; } } /* PRIME CARDS v1.1 - kill countdown border line */ html body .product-miniature .price-countdown-wrapper, html body .product-miniature .prime-countdown-placeholder{ border:0 !important; border-top:0 !important; border-bottom:0 !important; box-shadow:none !important; outline:none !important; } /* ==== PRIME HOME BANNER v1.0 - Elementor Image Carousel mobile fix ==== */ @media (max-width: 991px){ html body .elementor-widget-image-carousel, html body .elementor-widget-image-carousel .swiper, html body .elementor-widget-image-carousel .swiper-container{ height: auto !important; min-height: 0 !important; } html body .elementor-widget-image-carousel .swiper-wrapper{ height: auto !important; align-items: flex-start !important; } html body .elementor-widget-image-carousel .swiper-slide{ height: auto !important; } html body .elementor-widget-image-carousel .swiper-slide img{ width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 2 / 1 !important; object-fit: cover !important; display: block !important; } } /* PRIME GLOBAL FONT UNIFICATION v1.0 */ html body,html body *{font-family:Inter,sans-serif !important} html body i.fa,html body i.fas,html body i.far,html body i.fab,html body i.fal,html body .fa,html body [class^="fa-"],html body [class*=" fa-"]{font-family:"Font Awesome 6 Free","Font Awesome 6 Brands","FontAwesome" !important} html body i.fab,html body [class*="fa-brands"]{font-family:"Font Awesome 6 Brands" !important} html body .material-icons,html body .material-icons-outlined,html body .material-icons-round,html body .material-icons-sharp,html body .material-icons-two-tone{font-family:"Material Icons" !important} /* ==== PRIME PRODUCT PAGE v1.0 - badges, countdown, remove divider ==== */ html body .product_p_price_container{border-top:0 !important;border-bottom:0 !important;box-shadow:none !important} html body #product .product-flag,html body #main .product-flag,html body .images-container .product-flag,html body .product-flag.discount,html body .product-flag.new,html body .product-flag.online-only,html body .product-flag.discount-percentage,html body .product-flag.discount-amount{background:#FF0D09 !important;color:#fff !important;border:none !important;border-radius:4px !important;font-size:12px !important;font-weight:600 !important;padding:4px 10px !important;text-transform:none !important;box-shadow:none !important;line-height:1 !important} html body #product .price-countdown,html body .price-countdown-wrapper .price-countdown,html body .product-prices .price-countdown,html body #product .price-countdown.badge-discount{background:#FF0D09 !important;color:#fff !important;border:none !important;border-radius:4px !important;padding:6px 12px !important;box-shadow:none !important} html body #product .price-countdown *,html body .price-countdown-wrapper .price-countdown *{color:#fff !important;background:transparent !important} /* ==== PRIME PRODUCT SHADOWS v1.0 - kill dividers/shadows entre variantes y boton ==== */ html body #product .product-actions,html body #product .product-add-to-cart,html body #product .product_p_price_container,html body #product .product-variants,html body #product .product-variants-item,html body #product .product-prices,html body #product .product-quantity,html body #product .addToCartFormWrapper,html body .product-information .product-actions{box-shadow:none !important;border-top:0 !important;border-bottom:0 !important} html body #product hr,html body .product-information hr,html body .product-actions hr{display:none !important} /* ==== PRIME NUCLEAR BANNER + SHADOW FIX v1.0 ==== */ @media (max-width: 991px){ html body .elementor-widget-image-carousel, html body .elementor-widget-image-carousel *, html body .elementor-widget-wrap:has(.elementor-widget-image-carousel), html body .elementor-column-wrap:has(.elementor-widget-image-carousel), html body .elementor-column:has(.elementor-widget-image-carousel), html body .elementor-row:has(.elementor-widget-image-carousel), html body .elementor-container:has(.elementor-widget-image-carousel), html body section.elementor-section:has(.elementor-widget-image-carousel){height:auto !important;min-height:0 !important;max-height:none !important} } html body .product-miniature .addToCartFormWrapper,html body .addToCartFormWrapper{box-shadow:none !important;border:none !important} /* ==== PRIME BANNER ASPECT RATIO FIX v3.0 - production-proven approach ==== */ html body .elementor-widget-image-carousel .swiper-container, html body .elementor-widget-image-carousel .swiper{ aspect-ratio: 2 / 1 !important; } html body .elementor-widget-image-carousel .swiper-slide-image, html body .elementor-widget-image-carousel .swiper-slide img{ aspect-ratio: 2 / 1 !important; height: auto !important; width: 100% !important; } /* ==== PRIME BANNER DOTS SPACE v1.0 - reserve 40px padding for swiper-dots-outside ==== */ html body .elementor-widget-image-carousel .elementor-image-carousel-wrapper{padding-bottom:40px !important} /* ==== PRIME BANNER DOTS FIX v1.0 - move aspect-ratio from .swiper to .swiper-wrapper ==== */ html body .elementor-widget-image-carousel .swiper, html body .elementor-widget-image-carousel .swiper-container{aspect-ratio:auto !important;height:auto !important;overflow:visible !important} html body .elementor-widget-image-carousel .swiper-wrapper{aspect-ratio:2 / 1 !important;height:auto !important} /* v=160 - Banner principal: recortar bleed lateral (los slides adyacentes se veían asomando izq/der). overflow-x:hidden en el contenedor del swiper mantiene el deslizamiento funcional pero recorta el overflow horizontal. Mantenemos overflow-y:visible para que los dots de paginación sigan mostrándose debajo del banner. */ html body .elementor-widget-image-carousel .swiper, html body .elementor-widget-image-carousel .swiper-container, html body .elementor-widget-image-carousel .elementor-image-carousel-wrapper{ overflow-x:hidden !important; overflow-y:visible !important; } /* v=161 - Desktop: reducir el banner principal al 80% de su ancho (proporcional en alto gracias a aspect-ratio 2:1 ya definido). Centrado con margin:auto. Solo aplica a ≥992px — mobile se queda igual. */ @media (min-width:992px){ html body .elementor-widget-image-carousel{ max-width:90% !important; width:90% !important; margin-left:auto !important; margin-right:auto !important; } } /* v=162 - Desktop: reducir la fila de 3 banners (ARTÍCULOS / MÁS VENDIDOS / NUEVOS, etc.) al 90% igualando el ancho del banner principal de arriba. Targeting: cualquier elementor-section que contenga columnas col-33 (3 columnas) o col-25 (4 columnas) — filas de banners múltiples. */ @media (min-width:992px){ html body .elementor-section.elementor-top-section:has(.elementor-col-33), html body .elementor-section.elementor-top-section:has(.elementor-col-25){ max-width:94% !important; margin-left:auto !important; margin-right:auto !important; } } /* v=163 - Home carousels (MÁS VENDIDOS / NUEVOS PRODUCTOS / etc. vía elementor-products widget): quitar el bleed lateral donde se veía la siguiente/anterior tarjeta asomando. El wrapper tiene .swiper-overflow por default (permite ese peek) — lo anulamos con overflow-x:hidden. overflow-y sigue visible para que los dots y los hovers no se corten. */ html body .elementor-products .swiper-container-wrapper, html body .elementor-products .swiper-container-wrapper.swiper-overflow, html body .elementor-products .elementor-products-carousel, html body .elementor-products .swiper-products-carousel, html body .elementor-products .swiper-container, html body .elementor-products .swiper{ overflow-x:hidden !important; overflow-y:visible !important; } /* ==== PRIME MEGAMENU - remove arrow bullets desktop ==== */ @media (min-width: 992px){ html body .cbp-category-link-w::before,html body .cbp-category-link-w a::before,html body a.cbp-category-link-w::before,html body .iqitmegamenu-container .cbp-category-link-w::before{display:none !important;content:none !important} html body .cbp-category-link-w a{padding-left:0 !important} } /* ==== PRIME MEGAMENU TOP-LEVEL BOLD v1.0 ==== */ html body .iqitmegamenu-container > ul > li > a,html body #iqitmegamenu-horizontal > ul > li > a,html body .cbp-empty-mlink.nav-link,html body .iqitmegamenu-container a.nav-link{font-weight:700 !important} /* ==== PRIME MEGAMENU BODYBUILDING STYLE v1.1 - high specificity with #iqitmegamenu-horizontal ==== */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner,html body #iqitmegamenu-horizontal .cbp-menu-container{background:#fff !important} html body #iqitmegamenu-horizontal .cbp-column-title,html body #iqitmegamenu-horizontal .cbp-category-title,html body #iqitmegamenu-horizontal a.cbp-column-title,html body #iqitmegamenu-horizontal a.cbp-category-title,html body #iqitmegamenu-horizontal strong > a,html body #iqitmegamenu-horizontal strong{color:#1a1a1a !important;font-weight:700 !important;letter-spacing:0.3px !important;border-bottom:2px solid #FF0D09 !important;padding-bottom:8px !important;margin-bottom:14px !important;display:inline-block !important;text-decoration:none !important;width:auto !important} html body #iqitmegamenu-horizontal .cbp-links a,html body #iqitmegamenu-horizontal .cbp-category-link-w a:not(.cbp-column-title):not(.cbp-category-title),html body #iqitmegamenu-horizontal li a:not(.cbp-column-title):not(.cbp-category-title){color:#1a1a1a !important;font-weight:400 !important;text-decoration:none !important} html body #iqitmegamenu-horizontal .cbp-links a:hover,html body #iqitmegamenu-horizontal .cbp-category-link-w a:hover,html body #iqitmegamenu-horizontal .cbp-column-title:hover,html body #iqitmegamenu-horizontal .cbp-category-title:hover{color:#FF0D09 !important} /* ==== PRIME MEGAMENU BODYBUILDING v1.2 - fix double line + preserve bold ==== */ /* RESET: quitar border de TODOS los headers primero */ html body #iqitmegamenu-horizontal strong,html body #iqitmegamenu-horizontal strong > a,html body #iqitmegamenu-horizontal .cbp-column-title,html body #iqitmegamenu-horizontal .cbp-category-title,html body #iqitmegamenu-horizontal a.cbp-column-title{border-bottom:0 !important;padding-bottom:0 !important;margin-bottom:0 !important} /* APPLY border SOLO al elemento exterior: strong (cuando existe) O .cbp-column-title standalone (cuando no hay strong parent) */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong,html body #iqitmegamenu-horizontal .cbp-hrsub-inner > .cbp-hrsub-wrap .cbp-hrsub-wrap-ul .cbp-category-link-w > a.cbp-column-title,html body #iqitmegamenu-horizontal li.cbp-category-link-w > a.cbp-column-title{display:inline-block !important;border-bottom:2px solid #FF0D09 !important;padding-bottom:8px !important;margin-bottom:14px !important;color:#1a1a1a !important;font-weight:700 !important;letter-spacing:0.3px !important;text-decoration:none !important;width:auto !important} /* El dentro del hereda estilos del strong, sin border propio */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong > a{color:inherit !important;font-weight:inherit !important;text-decoration:none !important;display:inline !important;border:none !important;padding:0 !important;margin:0 !important} /* Hover en headers */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong:hover,html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong > a:hover,html body #iqitmegamenu-horizontal a.cbp-column-title:hover{color:#FF0D09 !important} /* ==== PRIME MEGAMENU v1.3 - wider lines + tighter spacing (bodybuilding look) ==== */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong,html body #iqitmegamenu-horizontal li.cbp-category-link-w > a.cbp-column-title,html body #iqitmegamenu-horizontal .cbp-category-link-w > a.cbp-column-title,html body #iqitmegamenu-horizontal a.cbp-column-title{display:block !important;width:auto !important;padding-bottom:6px !important;margin-bottom:10px !important;margin-top:0 !important} html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong > a{display:inline !important} /* ==== PRIME MEGAMENU v1.4 - apply red line to ALL headers (both strong and standalone a) ==== */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong,html body #iqitmegamenu-horizontal a.cbp-column-title,html body #iqitmegamenu-horizontal a.cbp-category-title{display:block !important;border-bottom:2px solid #FF0D09 !important;padding-bottom:6px !important;margin-bottom:10px !important;margin-top:0 !important;color:#1a1a1a !important;font-weight:700 !important;letter-spacing:0.3px !important;text-decoration:none !important;width:auto !important} /* Quitar border del interior del strong para evitar doble linea */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong > a,html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong > a.cbp-column-title{display:inline !important;border:0 !important;border-bottom:0 !important;padding:0 !important;margin:0 !important;color:inherit !important;font-weight:inherit !important;text-decoration:none !important} /* ==== PRIME MEGAMENU v1.5 - force bold on inside (PROTEINAS, IMPLEMENTOS GYM fix) ==== */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong > a,html body #iqitmegamenu-horizontal .cbp-hrsub-inner .cbp-category-link-w strong > a,html body #iqitmegamenu-horizontal .cbp-hrsub-inner strong > a:not(.cbp-column-title){font-weight:700 !important;color:#1a1a1a !important} /* ==== PRIME MEGAMENU v1.6 - HIGHER specificity for bold (PROTEINAS, IMPLEMENTOS GYM) ==== */ html body #iqitmegamenu-horizontal .cbp-hrsub-inner .cbp-category-link-w strong > a[href]:not(.cbp-column-title):not(.cbp-category-title),html body #iqitmegamenu-horizontal .cbp-hrsub .cbp-hrsub-inner .cbp-category-link-w strong > a[href]{font-weight:700 !important;color:#1a1a1a !important;text-decoration:none !important} /* ==== PRIME HEADER LAYOUT v2 (M&S style approved by user) ==== */ /* Logo size match production */ html body img.logo.img-fluid{max-width:160px !important;max-height:44px !important;height:auto !important;width:auto !important} /* Row del logo: wrap habilitado para que segunda fila funcione */ html body #header .row.align-items-center{flex-wrap:wrap !important} /* Logo a la izquierda (ya no centrado) */ html body #header .row.align-items-center > .col-header-center,html body #header .row.align-items-center > .col.col-auto.col-header-center{order:1 !important;flex:0 0 auto !important;text-align:left !important;margin:0 !important;padding-left:60px !important;padding-right:0 !important} /* Search relocated en el medio (520px max, no full width) */ html body #header .row.align-items-center > .col-12.col-search-relocated{order:2 !important;flex:0 1 640px !important;max-width:640px !important;width:640px !important;padding:0 24px !important;margin:0 !important} /* Iconos a la derecha con margin-left auto */ html body #header .row.align-items-center > .col.col-header-right,html body #header .row.align-items-center > .col-header-right{order:3 !important;flex:0 0 auto !important;margin-left:auto !important;width:auto !important;max-width:none !important;padding-right:60px !important} /* Nav (Tienda/Promociones/Articulos) DEBAJO en una segunda fila, alineado al inicio del search */ html body #header .row.align-items-center > .col.col-header-left.col-header-menu{order:4 !important;flex:0 0 100% !important;max-width:100% !important;width:100% !important;padding-left:235px !important;padding-top:0 !important;padding-bottom:0 !important;margin-top:4px !important} /* Quitar negritas del nav inferior */ html body #header .col-header-menu #cbp-hrmenu .nav-link,html body #header .col-header-menu .cbp-hrmenu-tab > a{font-weight:500 !important;text-transform:none !important} /* SEARCH WIDGET - styling completo (4px borders, btn rojo rectangular) */ html body #header #search_widget,html body #header #search_widget form,html body #header #search_widget .input-group{width:100% !important;position:relative !important;display:block !important} html body #header #search_widget .form-search-control{width:100% !important;border:1.5px solid #d0d0d0 !important;background:#fafafa !important;padding:8px 60px 8px 18px !important;border-radius:4px !important;font-size:14px !important;height:auto !important;box-shadow:none !important} html body #header #search_widget .form-search-control:focus{border-color:#FF0D09 !important;background:#fff !important;box-shadow:0 0 0 3px rgba(255,13,9,0.08) !important;outline:none !important} html body #header #search_widget button.search-btn,html body #header #search_widget .input-group button.search-btn,html body #search_widget .input-group .search-btn{position:absolute !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;width:54px !important;min-width:54px !important;max-width:54px !important;border-radius:0 4px 4px 0 !important;background-color:#FF0D09 !important;background:#FF0D09 !important;border:none !important;color:#fff !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;z-index:5 !important;transform:none !important} html body #header #search_widget button.search-btn:hover,html body #search_widget .input-group .search-btn:hover{background-color:#d10c08 !important;background:#d10c08 !important} html body #header #search_widget button.search-btn i,html body #search_widget .input-group .search-btn i{color:#fff !important;font-size:14px !important;margin:0 !important;line-height:1 !important} /* Hide original search position (estaba al lado de los iconos) */ html body #header .col.col-search.header-btn-w{display:none !important} /* Reduce header total height - compactar */ html body #header .header-top,html body #header #desktop-header{padding-top:8px !important;padding-bottom:8px !important} html body #header .col-header-menu .cbp-hrmenu-tab > a{padding-top:8px !important;padding-bottom:8px !important} /* Compactar nav menu inferior - reducir line-height (era 60px) */ html body #header .col-header-menu #cbp-hrmenu,html body #header .col-header-menu .cbp-hrmenu-tab,html body #header .col-header-menu .cbp-hrmenu-tab > a,html body #header .col-header-menu .nav-link{line-height:1.4 !important;font-size:14px !important} html body #header .col-header-menu .cbp-hrmenu-tab > a{padding-top:6px !important;padding-bottom:6px !important} /* Margin right balance - same as logo left (60px) */ html body #header .col-header-right > .row{margin-right:60px !important} /* FIX: Push icons 60px in from right edge (margin-left:auto cancelled the padding-right effect) */ html body #header .row.align-items-center > .col.col-header-right{padding-right:60px !important} html body #header .col-header-right .row.no-gutters.justify-content-end{margin-right:0 !important} /* Nav inferior: font-size M&S style (13px) + less padding, closer to search */ html body #header .col-header-menu #cbp-hrmenu,html body #header .col-header-menu .cbp-hrmenu-tab,html body #header .col-header-menu .cbp-hrmenu-tab > a,html body #header .col-header-menu .nav-link{font-size:13px !important;line-height:1.3 !important} html body #header .col-header-menu .cbp-hrmenu-tab > a{padding-top:4px !important;padding-bottom:4px !important} html body #header .row.align-items-center > .col.col-header-left.col-header-menu{margin-top:0 !important;padding-top:0 !important} /* FIX: Force icons inward with transform (60px from right edge) */ html body #header .col-header-right{transform:translateX(-60px) !important} /* FIX overflow horizontal - removing translateX that broke sidecart */ html body #header .col-header-right{transform:none !important;position:relative !important;right:-7px !important} html body{overflow-x:hidden !important} /* Nav inferior - mas compacto estilo M&S, menos separacion del banner */ html body #header .col-header-menu #cbp-hrmenu,html body #header .col-header-menu .cbp-hrmenu-tab,html body #header .col-header-menu .cbp-hrmenu-tab > a,html body #header .col-header-menu .nav-link{font-size:12px !important;line-height:1.2 !important} html body #header .col-header-menu .cbp-hrmenu-tab > a{padding-top:2px !important;padding-bottom:2px !important} html body #header .row.align-items-center > .col.col-header-left.col-header-menu{margin-top:0 !important;padding-top:0 !important;padding-bottom:4px !important;margin-bottom:0 !important} /* Nav spacing adjustment - mas separacion arriba (search), menos abajo (banner) */ html body #header .row.align-items-center > .col.col-header-left.col-header-menu{margin-top:14px !important;padding-top:0 !important;padding-bottom:0 !important;margin-bottom:0 !important} /* ========= SEARCH DROPDOWN - match bar width + shadow ========= */ html body .autocomplete-suggestions{width:592px !important;max-width:592px !important;left:244px !important;top:auto !important;margin-top:2px !important;border:1px solid #e5e5e5 !important;border-radius:4px !important;box-shadow:0 8px 24px rgba(0,0,0,0.18),0 2px 6px rgba(0,0,0,0.08) !important;background:#fff !important;overflow:hidden !important} html body .autocomplete-suggestions .autocomplete-suggestion{border-bottom:1px solid #f0f0f0 !important} html body .autocomplete-suggestions .autocomplete-suggestion:last-child{border-bottom:none !important} /* Dinmico: si la barra se mueve, JS actualiza left/width. Fallback default OK para 1328px viewport */ /* ========= MOBILE: search inside menu, same look as M&S ========= */ #prime-mobile-search{display:none} @media (max-width:991px){ /* Override theme to show mobile-header */ html body #mobile-header{display:block !important;height:auto !important;background:#fff !important} html body #mobile-header .sticky-mobile-wrapper{background:#fff !important} /* Logo mobile igual a desktop (reducido) */ html body img.logo.img-fluid{max-width:140px !important;max-height:38px !important} /* Search wrapper pegado al logo */ #prime-mobile-search{display:block !important;background:#fff !important;padding:0 12px 8px !important;margin-top:-12px !important;border:none !important;box-sizing:border-box !important;width:100% !important;margin-bottom:0 !important} #prime-mobile-search #search_widget{display:block !important;width:100% !important;padding:0 !important;background:#fff !important;margin:0 !important;position:static !important} #prime-mobile-search #search_widget form{position:relative !important;display:block !important;width:100% !important;margin:0 !important} #prime-mobile-search #search_widget .input-group{position:relative !important;display:block !important;width:100% !important} #prime-mobile-search #search_widget .form-search-control{width:100% !important;height:42px !important;padding:10px 52px 10px 14px !important;border:1.5px solid #d0d0d0 !important;background:#fff !important;border-radius:4px !important;font-size:14px !important;outline:none !important;box-sizing:border-box !important} #prime-mobile-search #search_widget .form-search-control:focus{border-color:#FF0D09 !important;background:#fff !important} #prime-mobile-search #search_widget button.search-btn{position:absolute !important;right:0 !important;top:0 !important;height:42px !important;width:46px !important;border-radius:0 4px 4px 0 !important;background:#FF0D09 !important;border:none !important;color:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important} #prime-mobile-search #search_widget button.search-btn i{color:#fff !important;font-size:15px !important} /* Ocultar iconos lupa antiguos */ html body #mobile-header .fa-search,html body #mobile-header [class*="search-toggle"],html body #mobile-header [data-target*="search"],html body #mobile-header [href*="search"],html body #mobile-header .header-btn[class*="search"],html body #header-search-btn,html body .fullscreen-search,html body .header-search-btn-mobile,html body .mobile-header-search-toggle{display:none !important} } /* Desktop logo tamao produccin */ @media (min-width:992px){ html body img.logo.img-fluid{max-width:160px !important;max-height:44px !important} } /* Force search icon via CSS pseudo-element (works regardless of button markup) */ @media (max-width:991px){ #prime-mobile-search #search_widget button.search-btn{font-family:"FontAwesome","Font Awesome 5 Free","Font Awesome 6 Free",sans-serif !important;font-size:16px !important;color:#fff !important} #prime-mobile-search #search_widget button.search-btn i,#prime-mobile-search #search_widget button.search-btn svg,#prime-mobile-search #search_widget button.search-btn .material-icons{color:#fff !important;font-size:16px !important;opacity:1 !important;visibility:visible !important;display:inline-block !important;fill:#fff !important} #prime-mobile-search #search_widget button.search-btn::before{content:none !important;display:none !important} #prime-mobile-search #search_widget button.search-btn *{color:#fff !important;fill:#fff !important} } /* ========================================================= v80 — CARDS uniformes + carousel button SOLO MOBILE Se removió scope desktop para no romper layout existente. ========================================================= */ @media (max-width:991px){ /* Altura uniforme de cards en mobile */ html body .product-miniature{ min-height:450px !important; height:100% !important; display:flex !important; flex-direction:column !important; box-sizing:border-box !important; } html body .js-product-miniature-wrapper{ display:flex !important; flex-direction:column !important; height:auto !important; align-self:stretch !important; } html body .product-miniature .product-description{ flex:1 1 auto !important; display:flex !important; flex-direction:column !important; } html body .products, html body .elementor-products, html body .row.products-list, html body .featured-products .row{ align-items:stretch !important; } html body .swiper-wrapper{ align-items:stretch !important; } html body .swiper-slide{ height:auto !important; display:flex !important; } html body .swiper-slide .js-product-miniature-wrapper, html body .swiper-slide .product-carousel{ width:100% !important; height:100% !important; } html body .product-miniature .products-variants{ display:none !important; } } @media (max-width:768px){ html body .product-miniature{ min-height:440px !important; } } /* ========================================================= v80 — CARDS en CAROUSEL: padding extra + overflow visible SOLO MOBILE para no afectar desktop ========================================================= */ @media (max-width:991px){ html body .product-carousel .product-miniature, html body .swiper-slide .product-miniature{ padding-bottom:120px !important; overflow:visible !important; } html body .product-carousel .product-miniature .addToCartFormWrapper, html body .swiper-slide .product-miniature .addToCartFormWrapper{ position:absolute !important; bottom:10px !important; left:12px !important; right:12px !important; margin-top:0 !important; } html body .product-carousel .product-miniature .addToCartFormWrapper button.add-to-cart, html body .swiper-slide .product-miniature .addToCartFormWrapper button.add-to-cart{ height:38px !important; min-height:38px !important; max-height:38px !important; line-height:36px !important; font-size:12px !important; } html body .product-carousel .product-miniature .addToCartFormWrapper .variantsProductWrapper select, html body .swiper-slide .product-miniature .addToCartFormWrapper .variantsProductWrapper select{ height:34px !important; min-height:34px !important; max-height:34px !important; font-size:11px !important; } } /* ========================================================= v81 — SWIPER overflow vertical SOLO MOBILE El swiper-container tiene overflow:hidden por default, lo que clipa el botón del card si se extiende abajo. Permitir overflow-y visible mantiene el carousel funcional (overflow-x hidden) pero deja que el botón se vea completo. Aplica a iqitcrossselling y otros carousels que usen estos selectores. ========================================================= */ @media (max-width:991px){ html body .crossselling-products .swiper-container, html body .crossselling-products .swiper, html body .crossselling-products .swiper-container-wrapper, html body .crossselling-products .swiper-wrapper, html body .swiper-default-carousel, html body .block-content.swiper-container-wrapper{ overflow-x:hidden !important; overflow-y:visible !important; } html body .crossselling-products .swiper-slide, html body .swiper-default-carousel .swiper-slide{ overflow:visible !important; height:auto !important; } /* Margin extra abajo en la sección para que el botón "saliente" no sea cortado por el siguiente bloque */ html body .crossselling-products{ padding-bottom:40px !important; } } /* ========================================================= v82 — FLEX ORDER en .product-description (mobile) Independiente de DOM order: forzar posición visual de cada elemento. Así reviews siempre arriba del precio, título arriba de reviews, etc. — aunque el JS aún no haya corrido. ========================================================= */ @media (max-width:991px){ html body .product-miniature .product-description > .product-category-name{ order:1 !important } html body .product-miniature .product-description > .product-brand{ order:2 !important } html body .product-miniature .product-description > .product-title, html body .product-miniature .product-description > h2.product-title{ order:3 !important } html body .product-miniature .product-description > .product-reference{ order:4 !important } html body .product-miniature .product-description > .product-description-short{ order:5 !important } html body .product-miniature .product-description > .product-list-reviews, html body .product-miniature .product-description > .ets-rv-grade-stars, html body .product-miniature .product-description > .prime-reviews-placeholder{ order:6 !important } html body .product-miniature .product-description > .product-price-and-shipping{ order:7 !important } html body .product-miniature .product-description > .price-countdown-wrapper, html body .product-miniature .product-description > .prime-countdown-placeholder{ order:8 !important } html body .product-miniature .product-description > .addToCartFormWrapper{ order:9 !important } html body .product-miniature .product-description > .products-variants{ order:10 !important; display:none !important } } /* ========================================================= v90 — IQITCROSSSELLING: botón con altura natural (mobile) Hipótesis: el problema no es Swiper ni padding — el botón mismo tiene contenido (icons + texto + padding interno de Bootstrap .btn) que excede el height:36-38px forzado por la CSS base, y overflow:hidden lo corta. Solución: sacar height fijo, dejar altura natural, permitir wrap del contenido. Botón inline flow (no absolute) con order. ========================================================= */ @media (max-width:991px){ html body .crossselling-products{ overflow:visible !important; } /* Swiper sigue activo — solo overflow visible y height auto, sin tocar display */ html body .crossselling-products .swiper, html body .crossselling-products .swiper-container, html body .crossselling-products .swiper-default-carousel, html body .crossselling-products .swiper-wrapper, html body .crossselling-products .swiper-slide{ overflow:visible !important; height:auto !important; min-height:0 !important; } /* Card wrapper + card */ html body .crossselling-products .js-product-miniature-wrapper, html body .crossselling-products .product-carousel, html body .crossselling-products article.product-miniature{ overflow:visible !important; height:auto !important; } html body .crossselling-products .product-miniature{ padding-bottom:14px !important; overflow:visible !important; display:flex !important; flex-direction:column !important; } /* WRAPPER del botón: flujo normal, al final con order:9 */ html body .crossselling-products .product-miniature .addToCartFormWrapper{ position:static !important; bottom:auto !important; left:auto !important; right:auto !important; top:auto !important; width:100% !important; margin:10px 0 0 !important; padding:0 !important; order:9 !important; overflow:visible !important; } html body .crossselling-products .product-miniature .addToCartFormWrapper form.addToCartForm{ display:flex !important; flex-direction:column !important; gap:6px !important; width:100% !important; margin:0 !important; padding:0 !important; overflow:visible !important; } /* BOTÓN: altura NATURAL, padding interno normal, SIN height fixed, SIN overflow:hidden */ html body .crossselling-products .product-miniature .addToCartFormWrapper button.add-to-cart, html body .crossselling-products .product-miniature .addToCartFormWrapper .btn.btn-primary.add-to-cart, html body .crossselling-products .product-miniature .addToCartFormWrapper .add-to-cart:not(.btn-product-list){ position:static !important; height:auto !important; min-height:40px !important; max-height:none !important; line-height:1.3 !important; padding:10px 12px !important; font-size:12px !important; width:100% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:normal !important; /* permite wrap si es necesario */ overflow:visible !important; text-overflow:clip !important; box-sizing:border-box !important; } html body .crossselling-products .product-miniature .addToCartFormWrapper .variantsProductWrapper select{ height:36px !important; min-height:36px !important; max-height:36px !important; font-size:12px !important; width:100% !important; } /* Padding bottom al wrapper para sticky del producto (si aplica) */ html body #wrapper, html body #main{ padding-bottom:100px !important; } } /* ========================================================= v92 — OCULTAR sección "también podría interesarle" Usuario pidió que no se muestre. La sección .product-accessories ya tiene d-md-none (solo mobile); aquí la ocultamos también en mobile. ========================================================= */ html body .product-accessories, html body .product-accessories-sidebar-mobile{ display:none !important; } /* ========================================================= v77 — Mobile header row protection mínima (sin forzar display) Evita que los iconos se wrappeen si el logo crece accidentalmente ========================================================= */ @media (max-width:991px){ html body #mobile-header #mobile-header-sticky .row-mobile-header{ flex-wrap:nowrap !important; } html body #mobile-header #mobile-header-sticky .col-mobile-btn{ flex:0 0 auto !important; } html body #mobile-header #mobile-header-sticky .col-mobile-logo{ flex:1 1 auto !important; min-width:0 !important; } } /* ========================================================= v=97 - Estrellas grises compactas + simetría exacta altura (aplica desktop + mobile, afecta SOLO .product-miniature) ========================================================= */ /* Contenedor placeholder: sin gap extra ni letter-spacing */ html body .product-miniature .prime-reviews-placeholder{ gap:1px !important; column-gap:1px !important; letter-spacing:0 !important; padding:0 !important; } /* Cada grey star: pequeño, gris, pegado */ html body .product-miniature .prime-reviews-placeholder i{ font-size:11px !important; line-height:18px !important; margin:0 !important; padding:0 !important; color:#d1d5db !important; display:inline-block !important; width:auto !important; height:18px !important; letter-spacing:0 !important; } /* Altura EXACTA idéntica entre reviews reales y placeholder para que el border inferior del card alinee en todos los productos */ html body .product-miniature .product-list-reviews, html body .product-miniature .ets-rv-grade-stars, html body .product-miniature .prime-reviews-placeholder{ height:18px !important; min-height:18px !important; max-height:18px !important; margin:0 0 6px !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; line-height:18px !important; } /* Normaliza children del componente reviews reales (contador (2), , ) */ html body .product-miniature .product-list-reviews *, html body .product-miniature .ets-rv-grade-stars *{ line-height:18px !important; vertical-align:middle !important; box-sizing:border-box !important; } /* ========================================================= v=100 - Header desktop: logo más grande centrado vertical, search + menu con más espacio respecto al logo PRIME. Header (desktop + mobile) no sticky. ========================================================= */ @media (min-width:992px){ /* Logo PRIME más grande y centrado vertical */ html body img.logo.img-fluid{ max-width:220px !important; max-height:64px !important; width:auto !important; height:auto !important; } html body #desktop_logo, html body .col-header-center{ display:flex !important; align-items:center !important; } /* Search bar: gap chico respecto al logo (no exagerado) */ html body #header .row.align-items-center > .col-12.col-search-relocated{ margin-left:20px !important; } /* Menú (segunda fila): shift directamente al