.iqitfake{ display: none;} @charset "UTF-8"; /*** Style mixins ***/ /*** Variables mixins and functions ***/ body { background: #ffffff; } .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1600px; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #000000; } a:hover:not(.nav-link):not(.btn) { color: #333333; } .pagination .page-list li:hover { border-color: #333333; } .pagination .page-list li.current { border-color: #333333; } .pagination .page-list li.current a { color: #333333; } #mobile-header { border-bottom: solid 1px #e3e3e3; } #mobile-header .mobile-main-bar { padding-top: 0.3571428571rem; padding-bottom: 0.3571428571rem; } #mobile-header .m-nav-btn { color: #000000; } #mobile-header .m-nav-btn:hover { color: #333333; } #mobile-header .m-nav-btn > span { display: none !important; } #mobile-header .mobile-buttons-bar { background: #c9c9c9; } html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } body { line-height: 1.4rem; } body { font-family: 'Poppins', sans-serif; } #blockcart-content { background: #ffffff; border: none 1px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); } /*** Secondary button ***/ .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled, .bootstrap-touchspin .group-span-filestyle .btn-touchspin, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .group-span-filestyle .btn-default { background: #f8f8f8; color: #333333; border: none 1px #f0f0f0; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary :active, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled :active, .btn-secondary:disabled:hover, .btn-secondary:disabled:focus, .btn-secondary:disabled :active, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:hover, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:focus, .bootstrap-touchspin .group-span-filestyle .btn-touchspin :active, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:hover, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:focus, .group-span-filestyle .bootstrap-touchspin .btn-touchspin :active, .group-span-filestyle .btn-default:hover, .group-span-filestyle .btn-default:focus, .group-span-filestyle .btn-default :active { background: #dedede; color: #2e2e2e; } .btn-secondary:not(:disabled):not(.disabled):active { background: #333333; color: #ffffff; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #f8f8f8; color: #333333; border: none 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #dedede; color: #2e2e2e; border: none 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #01a0b5; color: #ffffff; border: none 1px; } .btn-primary:hover, .btn-primary:focus, .btn-primary :active, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled :active, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled :active { background: #333333; color: #ffffff; } .btn-primary:not(:disabled):not(.disabled):active { background: #333333; color: #ffffff; } #wrapper .breadcrumb { background: #f7f7f7; padding-top: 0.7142857143rem; padding-bottom: 0.7142857143rem; padding-left: 0.7142857143rem; padding-right: 0.7142857143rem; margin-top: -1.0714285714rem; margin-bottom: 1.0714285714rem; font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #8f8f8f; } #wrapper .breadcrumb li:after { color: #8f8f8f; } #wrapper .breadcrumb a { color: #8f8f8f; } /*** Text fields ***/ .form-control { background-color: #ffffff; color: #777777; border: none 1px #e3e3e3; } .custom-select2, .custom-select2 option { background-color: #ffffff; } .custom-select2:after { color: #777777; } .bootstrap-touchspin .btn-touchspin { background-color: #ffffff; color: #777777; border: none 1px #e3e3e3; } .bootstrap-touchspin .btn-touchspin:hover { color: #777777; background: #f8f8f8; } .form-control::-webkit-input-placeholder { color: #777777; } .form-control::-moz-placeholder { color: #777777; } .form-control:-ms-input-placeholder { color: #777777; } .form-control:-moz-placeholder { color: #777777; } .form-control:focus { color: #777777; background: #f8f8f8; border-color: #707070; } .custom-select2:focus-within { background: #f8f8f8; } /*** Radio buttons and checkboxes ***/ .custom-checkbox input[type=checkbox] + span .checkbox-checked { color: #000000; } .custom-radio input[type=radio]:checked + span { background-color: #000000; } .custom-checkbox input[type=checkbox] + span:not(.color), .custom-radio { background: #ffffff; color: #000000; border-color: #e3e3e3; } /*** Dropdowns ***/ .dropdown-menu, .autocomplete-suggestions { background: #ffffff; border: solid 1px #e3e3e3; } .dropdown-menu .dropdown-item, .autocomplete-suggestions .dropdown-item { color: #474747!important; border-bottom: solid 1px #e3e3e3; } .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .autocomplete-suggestions .dropdown-item:focus, .autocomplete-suggestions .dropdown-item:hover { background: rgba(71, 71, 71, 0.05); } /*** Tooltips ***/ .tooltip-inner { background: #333333; color: #ffffff; } .tooltip.bs-tether-element-attached-bottom .tooltip-inner:before, .tooltip.tooltip-top .tooltip-inner:before, .bs-tooltip-auto[x-placement^=top] .arrow:before, .bs-tooltip-top .arrow:before { border-top-color: #333333; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: #333333; } /*** Modals ***/ .modal-backdrop { background: rgba(194, 194, 194, 0.7); } .modal-content { background: #ffffff; border: none 1px; } .js-quickview-np-btn { background: #ffffff; } /*** Notifications ***/ .ns-box { background: #ca5058; color: #ffffff; border: none 1px; } .product-price { color: rgba(0, 0, 0, 0.93); } .iqit-review-star { color: #e0d041; } .product-flags .product-flag { font-size: 0.8571428571rem; font-style: normal; font-weight: bold; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #eba53d; color: #ffffff; } .product-flags .new { background: #01a0b5; color: #ffffff; } .product-flags .online-only, .product-flags .pack { background: #e0e0e0; color: #000000; } .product-flags .out_of_stock { background: rgba(248, 48, 0, 0.96); color: #fff7f7; } .discount { background: #eba53d; color: #ffffff; } .product-available { background: #67a675; color: #ffffff; } .product-unavailable { background: rgba(248, 48, 0, 0.96); color: #fff7f7; } .product-unavailable-allow-oosp { background: #17459e; color: #fff7f7; } .alert-success a:link:not(.nav-link):not(.btn), .alert-success a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-warning a:link:not(.nav-link):not(.btn), .alert-warning a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-danger a:link:not(.nav-link):not(.btn), .alert-danger a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } #iqitcompare-floating { background: #ffffff; border-top: none 1px #a53737; border-left: none 1px #a53737; border-right: none 1px #a53737; box-shadow: 0px 4px 19px 6px rgba(92, 81, 81, 0.16); } #iqitcompare-floating a { color: #242424; } #page-preloader { background: #ffffff; } #back-to-top { background: #000000; color: #ffffff; } #back-to-top:hover { background: #333333; color: #ffffff; } #header, #checkout-header { border-top: none 1px; border-bottom: none 1px; } .sticky-desktop-wrapper #desktop-header.stuck-header { border-bottom: none 1px; } @media (min-width: 992px) { #index #header { position: absolute; top: 0; left: 0; width: 100%; } } #header .header-nav { color: #ffffff; border-bottom: none 1px; padding-top: 0.4285714286rem; padding-bottom: 0.4285714286rem; font-size: 0.8571428571rem; display: none !important; } #header .header-nav a { color: #ffffff; } #header .header-nav a:hover { color: #eeeeee; } #header .header-nav .social-links._topbar { font-size: 1rem; } .header-top { padding-top: 0.3571428571rem; padding-bottom: 0.3571428571rem; color: #000000; } .header-top a:not(.btn):not(.nav-link) { color: #000000; } .header-top a:not(.btn):not(.nav-link):hover { color: #333333; } .header-top .form-search-control { border: solid 1px #e3e3e3; } .header-top .header-btn-w .header-btn > .icon { font-size: 1.4285714286rem; display: block; } .header-top .header-btn-w .header-btn .title { display: none !important; } .header-top .header-cart-default a.cart-toogle { background: #000000; color: #ffffff; padding: 0.6428571429rem 0.6428571429rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #ffffff; } .header-top a.header-cart-btn:not(:hover) { color: #ffffff; } .stuck-header .header-top { padding-top: 0.3571428571rem; padding-bottom: 0.3571428571rem; } .header-top { transition: padding 0.3s ease; } .cart-products-count-btn { background: #1bd33f; color: #ffffff; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 50%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { background: #ffffff; border-top: none 3px #521919; border-right: none 3px #38b82c; border-bottom: none 3px #457deb; border-left: none 3px #a6cc0f; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { line-height: 3.5714285714rem; max-width: 14.2857142857rem; color: #000000; padding-left: 1.0714285714rem; padding-right: 1.0714285714rem; border-left: none 2px rgba(87, 87, 87, 0.57); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #000000; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.2142857143rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 3.5714285714rem !important; } .cbp-vertical-on-top .cbp-vertical-title-text { display: none !important; } .cbp-horizontal > ul > li.cbp-hropen > a, .cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #333333; } .cbp-horizontal .cbp-tab-title { font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #ca5058; color: #ffffff; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.4285714286rem; max-height: 1.4285714286rem; } @media (max-width: 1300px) { .cbp-horizontal .cbp-tab-title { font-size: 1rem; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { padding-left: 0.7142857143rem; padding-right: 0.7142857143rem; } } #cbp-hrmenu .cbp-hrsub { transform: translateY(-10px); } #cbp-hrmenu .cbp-hropen .cbp-hrsub { transform: translateY(0px); } #cbp-hrmenu .cbp-hrsub, #cbp-hrmenu .cbp-hrsub-level2, #cbp-hrmenu .cbp-hrsub-wrapper { transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } .iqitmegamenu-submenu-container { padding: 0; } /*** VERTICAL MENU ***/ .cbp-vertical-on-top #cbp-hrmenu1-ul { background: #ffffff; border: solid 1px #e3e3e3; } #content-wrapper #cbp-hrmenu1 { background: #ffffff; border: solid 1px #e3e3e3; } #cbp-hrmenu1 .cbp-vertical-title { font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background: #000000; line-height: 3.5714285714rem; } #cbp-hrmenu1 .cbp-vertical-title:hover { color: #ffffff; background: #000000; } #cbp-hrmenu1 > ul > li > a, #cbp-hrmenu1 > ul > li > span.cbp-main-link { font-style: normal; font-weight: normal; text-transform: none; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; border-top: solid 1px rgba(227, 227, 227, 0.35); } #cbp-hrmenu1 > ul > li > a .cbp-mainlink-icon, #cbp-hrmenu1 > ul > li > a .cbp-mainlink-iicon { font-size: 1.7142857143rem; max-height: 1.7142857143rem; } #cbp-hrmenu1 > ul > li.cbp-hropen > a, #cbp-hrmenu1 > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #333333; } #cbp-hrmenu1 .cbp-legend { background: #ca5058; color: #ffffff; } #cbp-hrmenu1 .cbp-hrsub, #cbp-hrmenu1 > ul, #cbp-hrmenu1 .cbp-hrsub-level2, #cbp-hrmenu1 .cbp-hrsub-wrapper { transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out; } .cbp-vert-expanded #cbp-hrmenu1 .cbp-vertical-title { color: #ffffff; background: #000000; } .cbp-not-on-top #cbp-hrmenu1-ul { position: relative; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-wrapper { top: 0; margin-top: 0px !important; min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-hrsub { min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-show { -js-display: flex; display: flex; flex-wrap: wrap; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-inner { width: 100%; } /*** SUBMENU ***/ .cbp-hrmenu .cbp-hrsub { font-style: normal; font-weight: normal; text-transform: none; } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu ul.cbp-hrsub-level2 { background: #ffffff; border: none 1px #37a625; box-shadow: 0px 15px 25px 0px rgba(74, 63, 63, 0.15); } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu .cbp-hrsub-inner a, .cbp-hrmenu .cbp-hrsub-inner a:link { color: !important; } .cbp-hrmenu .cbp-hrsub-inner a:hover { color: #333333 !important; } .cbp-hrmenu .tabs-links { background: #f7f7f7; } .cbp-hrmenu .cbp-tabs-names li a { color: #777777 !important; } .cbp-hrmenu .cbp-tabs-names li a:hover, .cbp-hrmenu .cbp-tabs-names li a.active { background: #ffffff; color: #777777 !important; } .cbp-hrmenu .cbp-hrsub-inner .cbp-column-title, .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:link { color: #333333 !important; border-bottom: none 3px #c2bc29; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: uppercase; } .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:hover { color: !important; } /*** MOBILE MENU ***/ #mobile-header .col-mobile-menu-dropdown.show { background: #000000; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #dcd3e0; } #iqitmegamenu-mobile { background: #000000; color: #dcd3e0; } #iqitmegamenu-mobile a, #iqitmegamenu-mobile a:link, #iqitmegamenu-mobile a:visited, #iqitmegamenu-mobile a:hover { color: #dcd3e0; } #iqitmegamenu-mobile li > ul { background: #1f1f1f; } #iqitmegamenu-mobile li > ul > li > ul { background: #292929; } #iqitmegamenu-mobile > li > a { border-bottom: none 1px; } .col-mobile-menu-push #_mobile_iqitmegamenu-mobile { border: none 1px; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #568b92; color: #ffffff; } .swiper-pagination-bullet { background: #568b92; } /*** Product miniature ***/ .products.row { margin: -0.5714285714rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 0.5714285714rem; } .swiper-container-wrapper { margin: -0.5714285714rem; } .swiper-container-wrapper .products.swiper-container { padding: 0.5714285714rem; } .swiper-container-wrapper .product-carousel { padding: 0.5714285714rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 0.5714285714rem; } .product-miniature { border: none 1px; outline: 1px none transparent; box-shadow: 2px 2px 4px 0px #d5d5d5; } .product-miniature .thumbnail-container .product-thumbnail-second { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.3s ease; backface-visibility: hidden; } .product-miniature .thumbnail-container:hover .product-thumbnail-second { opacity: 1; } .product-miniature .thumbnail-container:hover .product-thumbnail-first { opacity: 0; } .product-miniature .thumbnail-container:hover .product-thumbnail-first:last-child { opacity: 1; } .product-miniature-grid .product-title { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; } .product-miniature-grid .product-price { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; } .product-miniature-grid .product-title { overflow: hidden; height: 1rem; } @media (hover: hover) { .product-miniature:hover { outline: none 1px; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); } } .product-miniature-grid .product-functional-buttons { background: #ffffff; } .product-miniature-grid .product-functional-buttons a:link, .product-miniature-grid .product-functional-buttons a:visited, .product-miniature-grid .product-functional-buttons a:hover { color: #000000 !important; } .products-grid .product-miniature .product-category-name { display: none !important; } .products-grid .product-miniature .product-description-short { display: none !important; } .products-grid .product-miniature .product-add-cart { display: none !important; } .products-grid .product-miniature .flag-discount-value { display: none !important; } .product-miniature .input-qty, .product-miniature .input-group-add-cart .bootstrap-touchspin { display: none !important; } .btn-product-list { padding: 0.5357142857rem 1.0714285714rem; background: black; color: #ffffff; border: none 1px; } .btn-product-list:hover { background: #ffffff; color: #000000; } .products-grid .product-miniature-layout-1 { text-align: center; } .products-grid .product-miniature-layout-1 .input-group-add-cart { justify-content: center; } .products-grid .product-miniature-layout-1 .product-description { padding: 0.7142857143rem; } .products-grid .product-miniature-layout-2 .product-add-cart { display: none !important; } .products-grid .product-miniature-layout-2 .products-variants { padding-top: 0rem; } .products-grid .product-miniature-layout-2 .product-description { padding: 0.7142857143rem; } .products-grid .product-miniature-layout-3 .product-description { background: rgba(40, 44, 51, 0.93); } .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-rows: 1fr; grid-auto-rows: 0; display: grid; overflow-y: hidden; } .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .layout-full-width .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .layout-full-width .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .layout-full-width .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 1.2857142857rem; font-style: normal; font-weight: bold; text-transform: none; } #product .images-container .product-cover { border: none 1px; } .images-container .swiper-button-arrow, #product .product-cover .expander > span, #product-modal .modal-body .swiper-button-arrow { color: #ffffff; background: #333333; } .images-container .swiper-button-arrow:hover, #product .product-cover .expander > span:hover, #product-modal .modal-body .swiper-button-arrow:hover { opacity: 0.6 !important; } #product .product-cover .expander { color: #ffffff; background: #333333; } #product .product-cover .expander:hover { opacity: 0.6 !important; } .product-variants > .product-variants-item { display: inline-block; margin-right: 1rem; vertical-align: top; } #main #main-product-wrapper { transition: opacity 0.3s ease; } #main.-combinations-loading { position: relative; } #main.-combinations-loading #product-preloader { display: block; position: absolute; z-index: 10; top: -10px; } #main.-combinations-loading #main-product-wrapper { opacity: 0.3; } @media screen and (max-width: 768px) { .col-left-product-cover, .col-left-product-thumbs { flex: 0 0 100%; max-width: 100%; } .col-left-product-thumbs { order: 2; margin-top: 2rem; } } @media (max-width: 767px) { #main-product-wrapper .product-add-to-cart { background: #ffffff; box-shadow: 0px -4px 30px 0px rgba(0, 0, 0, 0.09); position: fixed; bottom: 0; z-index: 99; width: 100%; left: 0; padding-left: 1rem; padding-right: 1rem; } #product #iqitcompare-floating { z-index: 0; } } @media (max-width: 576px) { .product-add-to-cart .col-add-qty { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .product-add-to-cart .col-add-btn { -ms-flex: 1; flex: 1; } .product-add-to-cart .col-add-wishlist, .product-add-to-cart .col-add-compare { max-width: 40px; } .product-add-to-cart .col-add-wishlist .btn, .product-add-to-cart .col-add-compare .btn { padding-left: 0; padding-right: 0; } } @media (max-width: 400px) { .product-add-to-cart .add-to-cart { padding-left: 0rem; padding-right: 0rem; } } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; color: #000000; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 0rem; padding-bottom: 0rem; } #content-wrapper .page-title { color: #333333; font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #333333; } #content-wrapper .section-title { color: #333333; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .section-title a:link, #content-wrapper .section-title a:visited { color: #333333; } .nav-tabs .nav-link { color: #000000; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: #000000; border-bottom: solid 3px #ca5058; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .nav-link { border-bottom: solid 3px #ca5058; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #000000; border-bottom: solid 3px #ca5058; } #wrapper .block-title { color: #333333; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #wrapper .block-title a:link, #wrapper .block-title a:visited { color: #333333; } #left-column .block, #right-column .block { border: none 1px; } #footer, #checkout-footer { background: #ffffff; } #footer .ps-emailsubscription-block .newsletter-input-group, #checkout-footer .ps-emailsubscription-block .newsletter-input-group { border: solid 1px #e3e3e3; background: #ffffff; } #footer .ps-emailsubscription-block .newsletter-input-group .input-subscription, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .input-subscription { color: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe { color: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover { color: #bd4e0f; } #footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder { color: #777777; } #footer .social-links._footer, #checkout-footer .social-links._footer { font-size: 1.7857142857rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #000000 !important; } #footer .social-links._footer a:hover, #checkout-footer .social-links._footer a:hover { color: #7618d8 !important; } #footer .block-title, #checkout-footer .block-title { color: #ffffff; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #ffffff; margin-bottom: 0.8em; padding-bottom: 0.5em; } #footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:link, #checkout-footer .block-title a:visited { color: #ffffff; } #footer-container-first { border-top: none 1px; padding-top: 2.1428571429rem; padding-bottom: 2.1428571429rem; background: #212121; color: #ffffff; } #footer-container-first h5 { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: none; } #footer-container-main, #checkout-footer { border-top: none 1px; padding-top: 2.8571428571rem; padding-bottom: 1.8571428571rem; color: #ffffff; } #footer-container-main a, #checkout-footer a { color: #ffffff; } #footer-container-main a:hover, #checkout-footer a:hover { color: #dfdfdf; } #footer-copyrights { border-top: none 1px; background: #000000; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; } @media (max-width: 767px) { #footer .block-toggle { width: 100%; flex-basis: initial; } #footer .block-toggle > .block-title { cursor: pointer; } #footer .block-toggle > .block-title span::after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; margin-left: 10px; } #footer .block-toggle > .block-content { display: none; } #footer .block-toggle._toggled > .block-content { display: block; } #footer .block-toggle._toggled .block-title span::after { content: ""; } #footer .footer-style-inline .block-title { display: block !important; max-width: 100%; } #footer .footer-style-inline .block-content { display: block; width: 100%; margin-top: 1rem; } } #maintenance-page { background: #ffffff; color: #333333; } #maintenance-page a, #maintenance-page a:link { color: #333333; } .maintenance-page-newsletter .maintenance-page-newsletter-btn { background: #01a0b5; color: #ffffff; } .maintenance-page-newsletter .maintenance-page-newsletter-btn:hover { background: #333333; color: #ffffff; } .maintenance-page-newsletter input[type=email] { border: solid 1px #d1d1d1; background: #ffffff; color: #333333; } .maintenance-page-newsletter input[type=email]::-webkit-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]::-moz-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]:-ms-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email] :-moz-placeholder { color: #333333; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } /* =================================================== GIFT-ON: ESTILOS CSS PERSONALIZADOS =================================================== */ /* --- 1. CABECERA Y LOGO GLOBAL --- */ @media (min-width: 992px) { #desktop_logo img.logo { width: 100% !important; max-width: 160px !important; height: auto !important; margin-left: 100px !important; transition: all 0.3s ease; } #desktop_logo { display: flex !important; justify-content: flex-start !important; width: 100%; } } #desktop_logo, #desktop_logo a, #desktop_logo img.logo, .col-mobile-logo, .col-mobile-logo a, .col-mobile-logo img.logo { background-color: transparent !important; background: none !important; } /* --- 2. MENÚ PRINCIPAL (ESTILO PÍLDORA) --- */ @media (min-width: 892px) { #iqitmegamenu-horizontal { background-color: #f8f9fa !important; border-radius: 50px !important; padding: 3px 15px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; margin-top: -30px !important; white-space: nowrap !important; width: auto !important; } #iqitmegamenu-horizontal .cbp-hrmenu > ul { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; margin: 0 !important; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a { border-radius: 30px !important; transition: all 0.3s ease !important; padding: 8px 14px !important; margin: 0 2px !important; font-size: 14px !important; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a:hover { background-color: #d3d7da !important; color: #000000 !important; } } @media (min-width: 892px) and (max-width: 1301px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a { font-size: 17px !important; padding: 8px 8px !important; } } /* --- 3. ANIMACIONES: SCROLL Y DEGRADADOS --- */ #desktop-header, #mobile-header-sticky { transition: background-color 0.4s ease, box-shadow 0.4s ease !important; } .header-solido-scroll { background-color: #ffffff !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; } /* DEGRADADO ACTUALIZADO: Empieza antes y tiene más aire arriba */ .seccion-degradado-beige { background: linear-gradient(to bottom, #ffffff 0%, #F9F6EE 2%, #F9F6EE 98%, #ffffff 100%) !important; padding-top: 50px !important; /* Le da el respiro necesario a la píldora superior */ padding-bottom: 50px !important; } /* EFECTO TARJETA PARA PRODUCTOS DESTACADOS */ .seccion-degradado-beige .product-miniature { background-color: #ffffff !important; /* Fondo blanco puro para resaltar */ border-radius: 16px !important; /* Bordes redondeados modernos */ padding: 15px !important; /* Espacio interior para que el contenido no pegue al borde */ box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important; /* Sombra base muy suave */ border: 1px solid #f1f5f9 !important; /* Borde gris ultra claro para definir la caja */ transition: transform 0.3s ease, box-shadow 0.3s ease !important; height: calc(100% - 15px) !important; /* Igualar alturas en toda la fila */ margin-bottom: 15px !important; } /* Efecto elevación al pasar el ratón (Hover) */ .seccion-degradado-beige .product-miniature:hover { transform: translateY(-5px) !important; /* Se levanta ligeramente */ box-shadow: 0 12px 25px rgba(0,0,0,0.09) !important; /* Sombra más pronunciada */ } .rev_slider_wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%); z-index: 999; pointer-events: none; } /* --- 4. DISEÑO ESPECÍFICO MÓVIL Y TABLET --- */ @media (max-width: 991px) { .row-mobile-header { display: flex !important; justify-content: space-between !important; align-items: center !important; position: relative !important; min-height: 85px !important; } #mobile-btn-search { margin-left: auto !important; } .col-mobile-logo { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; padding: 0 !important; z-index: 10; } .col-mobile-logo .logo.img-fluid { max-height: 70px !important; width: auto !important; margin: 0 auto !important; } #mobile-header .material-icons { font-size: 28px !important; } #mobile-header .m-nav-btn span { font-size: 11px !important; margin-top: 2px !important; } .whatsapp-flotante { bottom: 80px !important; z-index: 2147483647 !important; } } /* --- 5. COMPONENTES EXTRA (WHATSAPP Y BOTONES VINTAGE) --- */ .whatsapp-flotante { position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 0px 4px 12px rgba(0,0,0,0.15); z-index: 9999; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; } .whatsapp-flotante:hover { transform: scale(1.1); background-color: #20ba56; } .whatsapp-icono { width: 35px; height: 35px; } @media screen and (max-width: 600px) { .whatsapp-flotante { width: 50px; height: 50px; bottom: 80px !important; right: 20px; } .whatsapp-icono { width: 30px; height: 30px; } } .titulo-pildora-vintage .elementor-button { background-color: rgba(188, 71, 73, 0.15) !important; color: #BC4749 !important; border-radius: 50px !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; padding: 10px 25px !important; box-shadow: none !important; cursor: default !important; transition: none !important; } .titulo-pildora-vintage .elementor-button .elementor-button-icon i, .titulo-pildora-vintage .elementor-button .elementor-button-icon svg { color: #BC4749 !important; fill: #BC4749 !important; font-size: 1.3em !important; margin-right: 10px !important; } .titulo-pildora-vintage .elementor-button:hover { background-color: rgba(188, 71, 73, 0.15) !important; color: #BC4749 !important; } /* --- 6. FOOTER: OCULTAR EL NATIVO Y MOSTRAR EL NUEVO OSCURO --- */ #footer-container-before, #footer-container-first, #footer-container-main, #footer-copyrights { display: none !important; } .custom-gifton-footer { background-color: #000000; padding: 60px 20px 20px 20px; font-family: 'Poppins', Arial, 'Comic Sans MS', sans-serif; color: #ffffff; border-top: 1px solid #333333; display: block; width: 100%; } .gifton-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1300px; margin: 0 auto; } .gifton-footer-col h3 { font-size: 19px; font-weight: 600; color: #ffffff; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; } .gifton-footer-col ul { list-style: none; padding: 0; margin: 0; line-height: 2.2; } .gifton-footer-col a { color: #ffffff !important; text-decoration: none; transition: color 0.3s ease; } .gifton-footer-col a:hover { color: #BC4749 !important; } .gifton-footer-bottom { max-width: 1300px; margin: 50px auto 0 auto; padding-top: 30px; border-top: 1px solid #333333; text-align: center; line-height: 1.8; } .gifton-footer-bottom p { margin-bottom: 15px; } .texto-logo { font-size: 11px; } .texto-financiado, .texto-copyright { font-size: 10px; } @media (min-width: 992px) { .texto-logo { font-size: 15px !important; } .texto-financiado, .texto-copyright { font-size: 14px !important; } } @media (min-width: 1100px) { .texto-financiado { white-space: nowrap; } } @media (max-width: 991px) { .gifton-footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .gifton-footer-grid { grid-template-columns: 1fr; text-align: center; } } /* =================================================== GIFT-ON: SANEAMIENTO PÁGINA DE CONTACTO NATIVA =================================================== */ /* 1. Ocultar el bloque lateral de información antiguo y el título feo por defecto */ .page-contact .contact-page-info, .page-contact .page-header { display: none !important; } /* 2. Centrar el contenedor del formulario y darle el ancho ideal */ .page-contact .contact-content .row .col-sm-8 { width: 100% !important; max-width: 800px !important; flex: 0 0 100% !important; margin: 0 auto !important; /* Esto lo centra en la pantalla */ } /* 3. Modernizar la caja del formulario (Efecto Tarjeta Premium) */ .page-contact .contact-form { background: #ffffff !important; padding: 40px 50px !important; border-radius: 16px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important; border: 1px solid #f1f5f9 !important; margin-bottom: 80px !important; font-family: 'Poppins', sans-serif !important; } /* 4. Estilizar el título interno del formulario */ .page-contact .contact-form h4 { font-size: 24px !important; font-weight: 700 !important; color: #111 !important; margin-bottom: 20px !important; text-align: center !important; } /* 5. Modernizar el botón de "Enviar" al estilo Gift-On */ .page-contact .contact-form .btn-primary { background-color: #a3d133 !important; border: none !important; border-radius: 50px !important; /* Formato píldora */ padding: 14px 40px !important; font-weight: 700 !important; font-size: 16px !important; text-transform: uppercase !important; box-shadow: 0 8px 20px rgba(163, 209, 51, 0.3) !important; transition: all 0.3s ease !important; } .page-contact .contact-form .btn-primary:hover { background-color: #8ebd2a !important; transform: translateY(-3px) !important; box-shadow: 0 12px 25px rgba(163, 209, 51, 0.4) !important; } /* Responsividad para móviles del formulario */ @media (max-width: 576px) { .page-contact .contact-form { padding: 30px 20px !important; } } /* =================================================== GIFT-ON: MENÚ PÍLDORA GRISÁCEO (Páginas Específicas) =================================================== */ /* 1. Modificamos SOLO el contenedor principal para evitar el doble fondo */ body.pagina-menu-pildora #iqitmegamenu-horizontal { background-color: #eef0f4 !important; /* Un gris un pelín más marcado para que destaque en el blanco puro */ padding: 3px 25px !important; } /* 2. Forzamos a que el interior (el hijo) sea transparente (Adiós al doble fondo) */ body.pagina-menu-pildora .cbp-hrmenu > ul { background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Redondeamos también los efectos hover para que no se salgan de la píldora */ body.pagina-menu-pildora .cbp-hrmenu > ul > li > a { border-radius: 30px !important; } /* --- SINERGIA CON EL SCROLL (GLOBAL) --- */ /* Cuando el header se vuelve blanco sólido, oscurecemos la píldora a gris en TODAS las páginas para que destaque */ .header-solido-scroll #iqitmegamenu-horizontal { background-color: #eef0f4 !important; /* El gris que elegimos */ box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important; /* Sombrita suave */ transition: background-color 0.4s ease, box-shadow 0.4s ease !important; } /* Nos aseguramos de que no haya doble fondo tampoco al hacer scroll en el resto de páginas */ .header-solido-scroll .cbp-hrmenu > ul { background-color: transparent !important; border: none !important; box-shadow: none !important; } /* =================================================== GIFT-ON: REDISEÑO PÁGINA DE LOGIN Y REGISTRO =================================================== */ /* Contenedor exterior con fondo sutil para dar contraste */ #wrapper .authentication-page { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 60px 20px; background-color: #f8f9fb; /* Gris muy suave para que la tarjeta blanca resalte */ border-radius: 24px; /* Un poco de redondeo por si no ocupa toda la pantalla */ margin-bottom: 40px; } /* La Tarjeta (Ahora con sombra fuerte y borde definido) */ #wrapper .authentication-page .page-content { background-color: #ffffff !important; width: 100%; max-width: 480px; padding: 40px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important; /* SOMBRA FUERTE (Igual al registro) */ border: 1px solid #e0e5eb !important; /* Borde más marcado */ margin: 0 auto; } /* Romper la estructura "fea" de columnas de PrestaShop y apilar los elementos */ .authentication-page .form-group.row { display: flex; flex-direction: column; margin-bottom: 20px; } .authentication-page .form-group.row .col-form-label { max-width: 100%; text-align: left; padding-bottom: 8px; font-weight: 600; color: #111111; font-size: 14px; } .authentication-page .form-group.row .col-md-8 { max-width: 100%; flex: 0 0 100%; } /* Estilo de los inputs (cajas de texto) */ .authentication-page .form-control { border-radius: 10px; border: 2px solid #e2e5ea; padding: 12px 16px; height: auto; font-size: 15px; transition: all 0.3s ease; background-color: #fcfcfc; } .authentication-page .form-control:focus { border-color: #a3d133; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(163, 209, 51, 0.1); } /* Botón del "Ojito" de la contraseña */ .authentication-page .input-group-append .btn-outline-secondary { border-radius: 0 10px 10px 0; border: 2px solid #e2e5ea; border-left: none; background-color: transparent; color: #888; } /* Botón principal de Iniciar Sesión */ .authentication-page .form-footer { border-top: none; /* Quitamos la línea fea por defecto */ padding-top: 10px; } .authentication-page .btn-primary { width: 100%; background-color: #a3d133; color: #111111 !important; border: none; border-radius: 50px; padding: 14px; font-weight: 700; font-size: 16px; text-transform: uppercase; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(163, 209, 51, 0.2); } .authentication-page .btn-primary:hover { background-color: #8ebd2a; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(163, 209, 51, 0.3); } /* Enlaces (Contraseña olvidada) */ .authentication-page .forgot-password { text-align: right; margin-top: -10px; margin-bottom: 20px; } .authentication-page .forgot-password a { color: #666; font-size: 13px; font-weight: 500; transition: color 0.3s ease; } .authentication-page .forgot-password a:hover { color: #a3d133; } /* Ocultar la línea <hr> molesta por CSS (seguridad extra) */ .authentication-page .page-content hr { display: none !important; } /* Contenedor de "Crear cuenta" (Ahora integrado dentro de la tarjeta) */ .authentication-page .no-account-authentication { text-align: center !important; margin-top: 25px !important; padding-top: 20px !important; border-top: 1px solid #f1f5f9 !important; /* Línea separadora muy sutil */ width: 100%; } .authentication-page .no-account-authentication a { color: #555 !important; font-weight: 500 !important; font-size: 14px !important; text-decoration: none !important; transition: color 0.3s ease !important; } .authentication-page .no-account-authentication a:hover { color: #a3d133 !important; /* Al pasar el ratón se pone verde Gift-On */ } /* Para ocultar el icono de la flechita nativo de PrestaShop si lo tuviera */ .authentication-page .no-account-authentication a i { display: none !important; } /* Móvil */ @media (max-width: 576px) { #wrapper .authentication-page .page-content { padding: 30px 20px; } } /* =================================================== GIFT-ON: REDISEÑO PÁGINA DE REGISTRO (V2.0) =================================================== */ /* Contenedor principal centrado (AQUÍ CONTROLAS LA ALTURA GLOBAL) */ #wrapper .module-b2bregistration-business-page { display: flex; justify-content: center; /* align-items: center; <--- ELIMINAMOS ESTO. Al quitarlo, la tarjeta deja de forzarse al centro vertical y sube de forma natural */ min-height: auto; /* El orden del padding es: ARRIBA DERECHA ABAJO IZQUIERDA */ padding: 10px 20px 60px 20px; /* <--- CAMBIA EL "10px" (Arriba). Si pones 0px sube al máximo, si pones 50px bajará. */ } /* 1. LA TARJETA */ #wrapper .module-b2bregistration-business-page .page-content { background-color: #ffffff; width: 100%; max-width: 950px; /* Cambia el "25px" por "40px" o "50px" para bajar el título. Orden: Arriba Derecha Abajo Izquierda */ padding: 45px 40px 50px 40px !important; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important; border: 1px solid #e0e5eb !important; margin: 0 auto; } /* Subir el título y acercar el texto descriptivo */ .module-b2bregistration-business-page .info p { font-size: 14px !important; color: #666 !important; text-align: center !important; margin-top: 15px; margin-bottom: 35px !important; /* Más pegado a las cajas */ line-height: 1.6 !important; } .module-b2bregistration-business-page .info p strong { color: #a3d133 !important; } /* 2. CAJAS DE TEXTO NORMALES */ .module-b2bregistration-business-page .form-group > .form-control { border-radius: 10px !important; border: 2px solid #e2e5ea !important; padding: 12px 16px !important; height: auto !important; font-size: 14px !important; transition: all 0.3s ease !important; background-color: #fcfcfc !important; box-shadow: none !important; margin-bottom: 8px; } .module-b2bregistration-business-page .form-group > .form-control:focus { border-color: #a3d133 !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(163, 209, 51, 0.1) !important; } /* 3. REPARACIÓN DEL OJO DE LA CONTRASEÑA (Fusión Perfecta) */ .module-b2bregistration-business-page .input-group { display: flex !important; flex-wrap: nowrap !important; /* CLAVE: Fuerza a que estén en la misma línea siempre */ align-items: stretch !important; /* Para que el botón y el input midan lo mismo de alto */ border-radius: 10px !important; border: 2px solid #e2e5ea !important; background-color: #fcfcfc !important; overflow: hidden; margin-bottom: 8px; transition: all 0.3s ease; } /* Cuando pulsas la contraseña, se ilumina todo el bloque junto */ .module-b2bregistration-business-page .input-group:focus-within { border-color: #a3d133 !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(163, 209, 51, 0.1) !important; } /* El input interno (donde escribes) */ .module-b2bregistration-business-page .input-group .form-control { border: none !important; box-shadow: none !important; background: transparent !important; margin-bottom: 0 !important; border-radius: 0 !important; flex: 1 1 auto !important; /* CLAVE: Ocupa el espacio sobrante sin empujar al ojo */ width: 100% !important; } /* Contenedor del botón del ojo */ .module-b2bregistration-business-page .input-group .input-group-btn { display: flex !important; flex: 0 0 auto !important; /* CLAVE: Mantiene su tamaño fijo sin aplastarse ni caerse */ border-left: 1px solid #e2e5ea !important; /* Línea separadora sutil y elegante */ background-color: #f8f9fa !important; /* Fondo ligerísimamente distinto para el botón */ } /* El botón del ojo saneado y centrado */ .module-b2bregistration-business-page .input-group .btn { border: none !important; background: transparent !important; color: #888 !important; box-shadow: none !important; padding: 0 20px !important; /* Más espacio a los lados para que no se vea cortado */ height: 100% !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; transition: color 0.3s ease !important; } /* Efecto hover al pasar por encima del ojo */ .module-b2bregistration-business-page .input-group .btn:hover { color: #a3d133 !important; } /* 4. CASILLA DE TÉRMINOS RESPONSIVE (Alineada a la izquierda y con salto de línea) */ .module-b2bregistration-business-page .overline { border-top: 1px solid #f1f5f9; margin-top: 20px; padding-top: 30px; } .module-b2bregistration-business-page .overline .form-group { text-align: left !important; /* Alineamos a la izquierda como los inputs */ margin-bottom: 0; } .module-b2bregistration-business-page .custom-checkbox label { display: flex !important; align-items: flex-start !important; /* Si el texto baja a 2 líneas, el check se queda arriba alineado */ justify-content: flex-start !important; /* Todo empieza desde la izquierda */ width: 100% !important; font-size: 13px !important; color: #555 !important; white-space: normal !important; /* PERMITIMOS EL SALTO DE LÍNEA NATURAL */ line-height: 1.5 !important; text-align: left !important; } /* Espacio entre el cuadradito y el texto, y protección para que no se aplaste */ .module-b2bregistration-business-page .custom-checkbox input[type="checkbox"], .module-b2bregistration-business-page .custom-checkbox .moreblack { margin-right: 10px !important; margin-top: 2px !important; /* Lo bajamos 2px para que se alinee con el centro de la primera línea de texto */ flex-shrink: 0 !important; /* CLAVE: Evita que el cuadradito se haga estrecho cuando el texto necesita más espacio */ } /* 5. EL BOTÓN PRINCIPAL DE CREAR CUENTA */ .module-b2bregistration-business-page .btn-primary { background-color: #a3d133 !important; color: #111111 !important; border: none !important; border-radius: 50px !important; padding: 14px 50px !important; font-weight: 700 !important; font-size: 16px !important; text-transform: uppercase !important; transition: all 0.3s ease !important; box-shadow: 0 8px 20px rgba(163, 209, 51, 0.2) !important; display: block !important; margin: 10px auto 0 auto !important; /* Centrado perfecto */ float: none !important; } .module-b2bregistration-business-page .btn-primary:hover:not([disabled]) { background-color: #8ebd2a !important; transform: translateY(-2px) !important; box-shadow: 0 10px 25px rgba(163, 209, 51, 0.3) !important; } .module-b2bregistration-business-page .btn-primary[disabled] { background-color: #e2e5ea !important; color: #999 !important; box-shadow: none !important; cursor: not-allowed !important; } /* =================================================== 6. REESTRUCTURACIÓN DE CAMPOS A REJILLA (FILAS 3x3) =================================================== */ /* Convertimos el contenedor principal en una cuadrícula de 3 columnas */ .module-b2bregistration-business-page .separador { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0px 20px !important; /* 0px de espacio vertical extra, 20px horizontal entre columnas */ } /* Magia negra de CSS: Hacemos que los "envoltorios" de columna antiguos de Bootstrap desaparezcan estructuralmente, dejando que los inputs fluyan libres a la cuadrícula */ .module-b2bregistration-business-page .separador > .col-md-4.relix { display: contents !important; } /* Forzamos a la caja inferior de términos y botón a ocupar TODA la fila completa para que no se meta dentro de la cuadrícula de los inputs */ .module-b2bregistration-business-page .separador .overline { grid-column: 1 / -1 !important; } /* Pequeño ajuste para móviles: Que la rejilla pase a ser de 1 sola columna */ @media (max-width: 768px) { .module-b2bregistration-business-page .separador { grid-template-columns: 1fr !important; } } /* =================================================== 7. ESTILOS PARA LOS NUEVOS CAMPOS (SELECT Y DATE) =================================================== */ /* Ajustamos el color del texto cuando hay un valor seleccionado */ .module-b2bregistration-business-page select.form-control:not(:invalid), .module-b2bregistration-business-page input[type="date"].form-control { color: #333 !important; } /* Quitamos el icono feo nativo del calendario en algunos navegadores si queremos que quede más limpio */ .module-b2bregistration-business-page input[type="date"]::-webkit-inner-spin-button, .module-b2bregistration-business-page input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.5); /* Suaviza el color del icono del calendario */ cursor: pointer; } /* =================================================== 8. ESTILIZACIÓN DEL SELECTOR B2C (FLECHA CUSTOM) =================================================== */ .module-b2bregistration-business-page select.form-control { /* Eliminamos la flecha fea nativa del navegador */ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* Inyectamos una flecha SVG moderna y delgada */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; /* Posición perfecta a la derecha */ background-size: 15px !important; /* Tamaño del icono */ /* Espacio extra a la derecha para que el texto nunca pise la flecha */ padding-right: 40px !important; } /* =================================================== 9. OCULTAR REDES SOCIALES DE E-TOY NATIVAS =================================================== */ .block-content .socialicon, ul.social-links._footer, .socialicon { display: none !important; } /* =================================================== GIFT-ON: ETIQUETAS/TÍTULOS DEL FORMULARIO B2B =================================================== */ .module-b2bregistration-business-page .gifton-custom-label { display: block !important; text-align: left !important; font-size: 13px !important; font-weight: 600 !important; color: #111111 !important; margin-bottom: 6px !important; margin-left: 2px !important; text-transform: capitalize !important; /* Asegura que la primera letra sea mayúscula */ } /* Damos un poco más de margen inferior a cada grupo para que respiren los campos */ .module-b2bregistration-business-page .form-group { margin-bottom: 18px !important; } /* =================================================== 10. REDISEÑO MINIMALISTA: MIGAS DE PAN EN PÍLDORA (ACCESIBLE) =================================================== */ /* Contenedor principal */ .breadcrumb { background: transparent !important; padding: 15px 0 25px 0 !important; margin-bottom: 0 !important; border-bottom: none !important; } /* La Píldora que se adapta al texto */ .breadcrumb ol { display: inline-flex !important; /* Hace que el contenedor abrace al texto */ flex-wrap: wrap; align-items: center; background-color: #f4f6f8 !important; /* Gris azulado muy elegante para la píldora */ padding: 10px 24px !important; border-radius: 50px !important; /* Bordes totalmente redondeados */ margin: 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important; /* Sombra levísima */ border: 1px solid #eaeaea !important; } /* Estilo de los enlaces y textos */ .breadcrumb li, .breadcrumb li a, .breadcrumb li span { font-size: 13px !important; color: #444444 !important; /* Gris oscuro que aprueba WAVE */ font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; transition: color 0.3s ease !important; text-decoration: none !important; cursor: pointer !important; /* Forzamos el cursor de la manita */ } /* Hover Accesible: Verde oscuro elegante */ .breadcrumb li a:hover, .breadcrumb li a:hover span { color: #2b5900 !important; /* Un verde profundo que hace un contraste perfecto */ } /* Separador minimalista */ .breadcrumb li:not(:last-child)::after { content: '/'; margin: 0 12px; color: #777777 !important; /* Oscurecido para pasar el test */ font-weight: 400; } /* Títulos de página (Catálogo, Categorías, etc.) */ h1.page-title, .block-category h1 { font-size: 32px !important; font-weight: 800 !important; color: #111111 !important; letter-spacing: -0.5px !important; text-transform: capitalize !important; margin-bottom: 30px !important; padding-bottom: 0 !important; border-bottom: none !important; } /* Ajuste de la píldora para móviles */ @media (max-width: 767px) { h1.page-title, .block-category h1 { font-size: 26px !important; text-align: center !important; } .breadcrumb ol { justify-content: center !important; padding: 8px 16px !important; } } /* =================================================== 11. REDISEÑO CATÁLOGO: ELIMINAR BOTONES DUPLICADOS =================================================== */ /* Ocultar el bloque de botones funcionales duplicado */ .col-buy .product-functional-buttons-bottom ~ .product-functional-buttons-bottom { display: none !important; } /* De paso, vamos a ocultar el botón de "Compare" (las flechas cruzadas) ya que en una tienda de juguetes B2C el comparador rara vez se usa y ensucia mucho el diseño minimalista que buscamos */ .btn-iqitcompare-add { display: none !important; } /* =================================================== 12. REDISEÑO MINIMALISTA: CATÁLOGO, TARJETAS Y ACCESIBILIDAD =================================================== */ /* --- 1. Accesibilidad: Contraste superior (WAVE Fixes) --- */ .products-sort-order .select-title, .products-nb-per-page .select-title { background: #f9f9f9 !important; border: 1px solid #cccccc !important; /* Borde más oscuro */ color: #333333 !important; /* Gris muy oscuro para alto contraste */ font-size: 14px !important; padding: 10px 20px !important; border-radius: 50px !important; transition: all 0.3s ease; } .showing.hidden-sm-down { color: #333333 !important; /* Texto "Mostrando 1-24..." con alto contraste */ font-weight: 500 !important; } /* --- 2. La Tarjeta del Producto (Visible siempre) --- */ .product-miniature { background: #ffffff !important; border: 1px solid #e2e2e2 !important; /* Borde visible para definir la tarjeta sin hover */ border-radius: 12px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.04) !important; /* Sombra base suave */ transition: transform 0.3s ease, box-shadow 0.3s ease !important; padding: 15px !important; margin-bottom: 30px !important; overflow: hidden; } /* Efecto aumento (Zoom) y sombra intensa al pasar el ratón */ .product-miniature:hover { transform: scale(1.015) !important; /* Aumento SÚPER sutil */ box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important; border-color: #d0d0d0 !important; z-index: 50 !important; /* Mantiene la tarjeta por encima de las demás */ position: relative; } /* --- 3. Títulos Completos (Sin cortarse) --- */ .product-miniature .product-title { white-space: normal !important; /* Permite que el texto baje a la siguiente línea */ overflow: visible !important; text-overflow: clip !important; font-family: 'Poppins', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 12px !important; min-height: 42px; /* Ayuda a alinear los botones si los títulos tienen 1 o 2 líneas */ } .product-miniature .product-title a { color: #111111 !important; /* Negro casi puro para máxima legibilidad */ text-decoration: none !important; } .product-miniature .product-title a:hover { color: #a3d133 !important; } /* --- 4. Descripciones Accesibles --- */ .product-miniature .product-description-short { color: #444444 !important; /* Oscurecido para pasar el test de WAVE */ font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 18px !important; } /* Ocultamos la referencia (SKU) para limpiar diseño visual */ .product-miniature .product-reference { display: none !important; } /* --- 5. Botón Ver (Traducción y Colores Alto Contraste) --- */ .product-miniature .btn-product-list { background-color: #a3d133 !important; color: #000000 !important; /* Texto negro para alto contraste con el verde */ border-radius: 50px !important; font-weight: 700 !important; /* Letra más gruesa */ font-size: 0 !important; /* Oculta la palabra "View" original */ padding: 12px 24px !important; border: none !important; transition: background-color 0.3s ease !important; display: inline-block; text-align: center; width: 100%; } /* Inyectamos la palabra "Ver" en español */ .product-miniature .btn-product-list::after { content: 'Ver'; font-size: 14px !important; /* Devolvemos el tamaño al texto nuevo */ text-transform: uppercase !important; letter-spacing: 0.5px; } /* Hover del botón */ .product-miniature .btn-product-list:hover { background-color: #8ebd2a !important; /* Verde más oscuro al pasar el ratón */ color: #000000 !important; } /* --- 6. Iconos Extra (Corazón, Ojo) --- */ .product-miniature .product-functional-buttons-links { display: flex; justify-content: center; gap: 15px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eeeeee; } .product-miniature .product-functional-buttons-links a { color: #555555 !important; /* Gris oscuro para accesibilidad */ font-size: 18px !important; transition: transform 0.2s ease, color 0.2s ease !important; } .product-miniature .product-functional-buttons-links a:hover { color: #a3d133 !important; transform: scale(1.15); } /* =================================================== 13. FIX ACCESIBILIDAD: IMAGEN NO DISPONIBLE =================================================== */ /* Forzamos el color del texto alternativo y placeholders a un gris oscuro */ .product-miniature .thumbnail-container img, .product-miniature .thumbnail-container::before, .no-image { color: #555555 !important; font-weight: 500 !important; } /* =================================================== 14. FIX ACCESIBILIDAD: ETIQUETAS DE PRODUCTO (NUEVO/OFERTA) =================================================== */ .product-flags .product-flag.new { background-color: #006b8f !important; /* Cian oscurecido para alto contraste */ color: #ffffff !important; } .product-flags .product-flag.discount { background-color: #a00000 !important; /* Rojo oscurecido */ color: #ffffff !important; } /* =================================================== 15. FIX ACCESIBILIDAD: ETIQUETA DE STOCK "DISPONIBLE" =================================================== */ /* 1. Limpiamos el padre, anulamos posiciones flotantes y centramos */ .product-miniature .product-availability, .product-miniature .product-availability.d-block { position: static !important; /* MAGIA: Evita que flote pegado a la izquierda */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; background: transparent !important; padding: 0 !important; margin: 12px 0 !important; text-align: center !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; } /* 2. Le damos nuestro estilo Gift-On a la píldora interior */ .product-miniature .product-availability .badge { background-color: #a3d133 !important; color: #000000 !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 6px 14px !important; margin: 0 auto !important; /* Fuerza extra de centrado */ display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.2s ease !important; white-space: nowrap !important; max-width: 95% !important; } /* 3. Efecto hover elegante a verde oscuro */ .product-miniature .product-availability .badge:hover { background-color: #8ebd2a !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(163, 209, 51, 0.3) !important; } /* 4. Forzamos el color negro en texto */ .product-miniature .product-availability .badge * { color: #000000 !important; } /* 5. Ocultamos el icono del "tick" */ .product-miniature .product-availability i { display: none !important; } /* =================================================== 16. REDISEÑO CATÁLOGO: ANCHO DEL SELECTOR DE ORDEN =================================================== */ /* Contenedor principal sin restricciones */ .products-sort-order { min-width: 290px !important; max-width: 100% !important; /* Evita que la columna lo aplaste */ } /* Alineación de la caja principal */ .products-sort-order .select-title { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 10px 20px !important; } /* MATAR LOS PUNTOS SUSPENSIVOS DEL TEXTO */ .products-sort-order .select-title-name { overflow: visible !important; text-overflow: clip !important; /* Anula los puntos suspensivos nativos */ white-space: normal !important; /* Permite que el contenedor se ensanche */ max-width: none !important; display: inline-block !important; text-align: left !important; } /* El menú desplegable */ .products-sort-order .dropdown-menu { min-width: 100% !important; /* Ocupa como mínimo lo mismo que el botón */ border-radius: 12px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; border: 1px solid #eeeeee !important; padding: 10px 0 !important; } /* Separación y hover de los elementos dentro del desplegable */ .products-sort-order .dropdown-item { padding: 8px 20px !important; transition: background-color 0.2s ease !important; white-space: nowrap !important; /* Aquí sí queremos que el texto se estire en una línea */ } .products-sort-order .dropdown-item:hover { background-color: #f4f6f8 !important; } /* Adaptación para móviles */ @media (max-width: 767px) { .products-sort-order { min-width: 100% !important; } } /* =================================================== 17. CABECERA: ICONOS PC Y REORDENACIÓN EN MÓVIL =================================================== */ /* --- ESCRITORIO (PC/Tablet) --- */ /* Forzar que la cesta nativa se muestre */ #ps-shoppingcart-wrapper { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Color negro por defecto para los iconos (Lupa, Usuario, Cesta) y sus textos */ #desktop-header .header-btn .icon, #desktop-header .header-btn .title, #desktop-header .header-cart-btn * { color: #111111 !important; /* Negro oscuro */ transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Animación fluida */ } /* Efecto hover: Pequeño aumento de tamaño súper sutil */ #desktop-header .header-btn:hover .icon { transform: scale(1.1) !important; } /* --- MÓVIL (Menú + Lupa | LOGO | Idioma + Cuenta + Cesta) --- */ @media (max-width: 991px) { .mobile-main-bar .row-mobile-header { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; position: relative !important; } .col-mobile-btn .m-nav-btn i, .col-mobile-btn .m-nav-btn span, .col-mobile-btn .cart-products-count { color: #111111 !important; } /* BLOQUE IZQUIERDO */ .col-mobile-btn-menu { order: 1 !important; } .col-mobile-btn-search { order: 2 !important; margin-right: auto !important; /* Empuja el resto a la derecha */ } /* BLOQUE CENTRAL: Logo anclado al centro matemáticamente */ .col-mobile-logo { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; order: 3 !important; margin: 0 !important; padding: 0 !important; z-index: 10 !important; } /* BLOQUE DERECHO: Idioma, Cuenta y Cesta */ .col-mobile-btn-lang { order: 4 !important; /* Nuevo botón primero en la derecha */ position: relative; /* Para que el menú colgante nazca desde aquí */ } .col-mobile-btn-account { order: 5 !important; } .col-mobile-btn-cart, #mobile-header-cart { order: 6 !important; } /* Comportamiento del menú desplegable en móvil */ .col-mobile-btn-lang .dropdown-menu { display: none; } .col-mobile-btn-lang:hover .dropdown-menu, .col-mobile-btn-lang.show .dropdown-menu { display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } } /* =================================================== 18. FIX ACCESIBILIDAD: TÍTULOS VACÍOS (PRODUCTOS ROTOS) =================================================== */ /* Si el enlace dentro del título está vacío, oculta el enlace */ h4.product-title a:empty { display: none !important; } /* Magia de CSS moderno: Si el h4 tiene dentro un enlace vacío, oculta el h4 entero */ h4.product-title:has(a:empty) { display: none !important; } /* =================================================== 19. REDISEÑO CATÁLOGO: OPTIMIZACIÓN GRID MÓVIL (2 COLUMNAS) =================================================== */ @media (max-width: 767px) { /* 1. Tarjeta flexible: permite que el contenido "respire" y se auto-organice */ .product-miniature { display: flex !important; flex-direction: column !important; height: 100% !important; padding: 10px !important; margin-bottom: 15px !important; } .product-miniature .product-description { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; /* Empuja el contenido hacia abajo */ } /* 2. Compactar la etiqueta "DISPONIBLE" en móvil */ .product-miniature .product-availability, .product-miniature .product-availability.d-block { margin-top: 5px !important; margin-bottom: 8px !important; } .product-miniature .product-availability .badge { font-size: 9px !important; padding: 4px 8px !important; } /* 3. TÍTULOS: Truncar a 2 líneas exactas con puntos suspensivos (...) */ .product-miniature .product-title, .product-miniature .product-title a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; /* MÁGIA: Limita el texto a 2 líneas */ -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; font-size: 13px !important; line-height: 1.3 !important; margin-bottom: 5px !important; height: auto !important; min-height: 34px !important; /* Para que todas las tarjetas midan igual tengan 1 o 2 líneas */ } /* 4. Ocultar la descripción larga en móvil para no saturar */ .product-miniature .product-description-short { display: none !important; } /* 5. PRECIO: Empujarlo siempre al fondo de la tarjeta */ .product-miniature .product-price-and-shipping { position: relative !important; margin-top: auto !important; /* Magia flex: empuja el precio abajo del todo */ margin-bottom: 10px !important; } .product-miniature .product-price { font-size: 15px !important; } /* 6. Botones compactos */ .product-miniature .btn-product-list { padding: 8px 12px !important; } .product-miniature .btn-product-list::after { font-size: 12px !important; } /* 7. Iconos inferiores (Corazón, Ojo) */ .product-miniature .product-functional-buttons-links { gap: 10px !important; margin-top: 10px !important; padding-top: 10px !important; } .product-miniature .product-functional-buttons-links a { font-size: 16px !important; } } /* =================================================== 20. FIX MÓVIL: MIGAS DE PAN (BREADCRUMBS) DESLIZABLES =================================================== */ @media (max-width: 767px) { /* 1. Reducimos el aire extra alrededor de las migas */ .breadcrumb { padding: 5px 0 15px 0 !important; } /* 2. Convertimos la píldora en un carrusel horizontal */ .breadcrumb ol { flex-wrap: nowrap !important; /* Prohibido saltar de línea */ overflow-x: auto !important; /* Permite deslizar lateralmente */ overflow-y: hidden !important; justify-content: flex-start !important; /* Alineado a la izquierda */ -webkit-overflow-scrolling: touch; /* Deslizamiento fluido en iOS/Android */ padding: 10px 15px !important; width: 100% !important; } /* 3. Evitamos que los textos se deformen o se encojan */ .breadcrumb li { white-space: nowrap !important; flex-shrink: 0 !important; } /* 4. Ocultamos la barra de scroll inferior para un diseño limpio */ .breadcrumb ol::-webkit-scrollbar { display: none !important; /* Chrome, Safari, Opera */ } .breadcrumb ol { -ms-overflow-style: none !important; /* IE y Edge */ scrollbar-width: none !important; /* Firefox */ } /* 5. Si tienes los botones de anterior/siguiente producto, los centramos */ #iqitproductsnav { display: flex !important; justify-content: center !important; margin-top: 10px !important; } } /* =================================================== 21. FIX ESCRITORIO: BOTONES HOVER SIN DEFORMAR EL GRID =================================================== */ @media (min-width: 992px) { /* 1. Mantenemos el precio a salvo y visible siempre */ .product-miniature-layout-1:hover .product-price-and-shipping { opacity: 1 !important; visibility: visible !important; } /* 2. Fulminamos los fondos y bordes nativos del tema para los botones */ .product-miniature-layout-1 .product-functional-buttons, .product-miniature-layout-1 .product-functional-buttons-bottom, .product-miniature-layout-1 .product-functional-buttons-links { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Ocultamos los fondos blancos ocultos (pseudo-elementos) del tema */ .product-miniature-layout-1 .product-description::before, .product-miniature-layout-1 .product-description::after { display: none !important; } /* 3. TRUCO DE MAGIA: La tarjeta crece hacia abajo "comiéndose" su margen */ .product-miniature-layout-1 { transition: transform 0.3s ease, padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease !important; } .product-miniature-layout-1:hover { padding-bottom: 50px !important; /* Crea el espacio blanco justo y necesario */ margin-bottom: -5px !important; /* Compensa el crecimiento para no estirar la fila */ } /* Limpiamos la regla anterior que deformaba el contenedor interno */ .product-miniature-layout-1:hover .product-description { padding-bottom: 0 !important; transform: none !important; } /* 4. Posicionamos los iconos en el centro exacto del nuevo hueco blanco */ .product-miniature-layout-1 .product-functional-buttons { position: absolute !important; bottom: 15px !important; /* Distancia perfecta desde el borde inferior */ left: 0 !important; right: 0 !important; display: flex !important; justify-content: center !important; /* Centrado absoluto */ opacity: 0; visibility: hidden; transform: translateY(10px) !important; /* Efecto de subir sutil */ transition: all 0.3s ease !important; } /* Animación de entrada fluida de los iconos al hacer hover */ .product-miniature-layout-1:hover .product-functional-buttons { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* Alineación de la lista de iconos (Corazón y Ojo) */ .product-miniature-layout-1 .product-functional-buttons-links { display: flex !important; justify-content: center !important; width: 100% !important; gap: 20px !important; /* Espacio simétrico entre los dos botones */ padding: 0 !important; margin: 0 !important; } /* Asegurar que las tarjetas dejen ver todo su contenido en hover */ .product-miniature { overflow: visible !important; } } /* ========================================================= 22. CESTA EN NEGRO Y CORRECIONES DEL SELECTOR DE IDIOMA ============================================================ */ /* Forzar color oscuro estático en la cesta (icono y texto) */ #desktop-header .header-cart-btn .icon, #desktop-header .header-cart-btn .title { color: #333333 !important; transition: color 0.3s ease; } /* Opcional: Si quieres que al hacer hover cambie al color corporativo de Gift-On */ #desktop-header .header-cart-btn:hover .icon, #desktop-header .header-cart-btn:hover .title { color: #BC4749 !important; /* Rojo corporativo, ajústalo si es otro */ } /* ========================================================= 23. Google translate ============================================================ */ /* Ocultar elementos nativos de Google Translate */ body { top: 0 !important; } .goog-te-banner-frame.skiptranslate { display: none !important; } .goog-te-spinner-pos { display: none !important; } #goog-gt-tt { display: none !important; } /* Quitar los tooltips flotantes al pasar el ratón por un texto traducido */ font { background-color: transparent !important; box-shadow: none !important; } /* Ocultar físicamente los elementos de votación de Google para evitar errores de WAVE */ .VIpgJd-yAWNEb-hvhgNd-aXYTce, #goog-gt-votingHiddenPane { display: none !important; visibility: hidden !important; } /* ========================================================= 24. FORZAR COMPORTAMIENTO DESPLEGABLE DEL IDIOMA ============================================================ */ #header-lang-btn .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 1px solid #eee; z-index: 1000; } #header-lang-btn:hover .dropdown-menu, #header-lang-btn.show .dropdown-menu { display: block; } #header-lang-btn .dropdown-item:hover { background-color: #f8f8f8 !important; } /* Responsividad extra para los textos en móviles */ @media (max-width: 768px) { #wrapper .module-b2bregistration-business-page .page-content { padding: 30px 20px !important; } .module-b2bregistration-business-page .btn-primary { width: 100% !important; } .module-b2bregistration-business-page .custom-checkbox label { font-size: 12px !important; /* Un pelín más pequeño, pero legible a varias líneas */ white-space: normal !important; } }