.iqitfake{ display: none;} @charset "UTF-8"; /*** Style mixins ***/ /*** Variables mixins and functions ***/ .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1270px; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #777777; } 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: 1.4285714286rem; padding-bottom: 1.4285714286rem; } #mobile-header .m-nav-btn { color: #777777; } #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: 'Barlow Condensed', 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: #dedede; color: #2e2e2e; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #f8f8f8; color: #333333; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #dedede; color: #2e2e2e; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #000000; 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 { padding-top: 0.7142857143rem; padding-bottom: 0.7142857143rem; font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #8f8f8f; display: none !important; } #wrapper .breadcrumb li:after { color: #8f8f8f; } #wrapper .breadcrumb a { color: #8f8f8f; } /*** Text fields ***/ .form-control { background-color: #ffffff; color: #777777; border: solid 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: solid 1px #e3e3e3; } .bootstrap-touchspin .btn-touchspin:hover { color: #777777; } .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; border-color: #8a8a8a; } /*** 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: #333!important; color: white!important; } .tooltip { --bs-tooltip-bg: #333333; --bs-tooltip-color: #ffffff; } /*** 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: #ad1f00; } .iqit-review-star { color: #e0d041; } .product-flags .product-flag { font-size: 0.7857142857rem; font-style: normal; font-weight: normal; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #eba53d; color: #ffffff; } .product-flags .new { background: #969696; color: #ffffff; } .product-flags .online-only, .product-flags .pack { background: #e0e0e0; color: #000000; } .product-flags .out_of_stock { background: #a17738; color: #fff7f7; } .discount { background: #eba53d; color: #ffffff; } .product-available { background: #67a675; color: #ffffff; } .product-unavailable { background: #a17738; 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; border-left: none 1px; border-right: none 1px; } #page-preloader { background: #ffffff; } #back-to-top { background: #a11fb2; color: #2f0934; } #back-to-top:hover { background: #a11fb2; color: #a11fb2; } #header, #checkout-header { border-top: none 1px; border-bottom: none 1px; } .sticky-desktop-wrapper #desktop-header.stuck-header { border-bottom: none 1px; } #header .header-nav { color: #777777; background: #f8f8f8; border-bottom: none 1px; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; font-size: 0.8571428571rem; } #header .header-nav a { color: #777777; } #header .header-nav a:hover { color: #333333; } #header .header-nav .social-links._topbar { font-size: 1rem; } .header-top { padding-top: 1.7857142857rem; padding-bottom: 1.7857142857rem; color: #777777; } .header-top a:not(.btn):not(.nav-link) { color: #777777; } .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; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #000000; } .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: rgba(240, 180, 180, 0); 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: #2f0934; padding-left: 1.6428571429rem; padding-right: 1.6428571429rem; border-left: none 1px rgba(87, 87, 87, 0.57); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #2f0934; } #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 { color: #a11fb2; } .cbp-horizontal .cbp-tab-title { font-size: 1.2142857143rem; 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: 0.9285714286rem; } .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-size: 1rem; 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: #ffffff; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #595050 !important; } #iqitmegamenu-mobile { background: #ffffff; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab { min-height: 3.8571428571rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab:not(:last-child) { border-bottom: none 1px; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__arrow { padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__link { color: #595050 !important; padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; } .col-mobile-menu-push #iqitmegamenu-mobile { border: none 1px; } .mobile-menu__submenu { background: #ffffff; } .mobile-menu__tab { border-bottom: solid 1px #ebebeb; min-height: 4.4285714286rem; } .mobile-menu__link { color: #595050 !important; padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__arrow { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; color: #595050; font-size: 1.5714285714rem; } .mobile-menu__tab-icon { font-size: 1.5714285714rem; } .mobile-menu__tab-icon--img { max-height: 1.5714285714rem; } .mobile-menu__legend { font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background-color: #595050; } .mobile-menu__header-wrapper { color: #595050; background-color: #f4f4f4; border-bottom: none 1px; } .mobile-menu__title { font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__column-title { font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: uppercase; color: #595050 !important; } .mobile-menu__column { font-size: 1.1428571429rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050; margin-bottom: 2.8571428571rem; } .mobile-menu__column-categories:not(:last-child) { margin-bottom: 2.8571428571rem; } .mobile-menu__column-title { margin-bottom: 0.5714285714rem; } .mobile-menu__links-list-li { padding-top: 0.4285714286rem; padding-bottom: 0.4285714286rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #595050; } .mobile-menu__footer { border-top: none 1px; color: #595050; background-color: #f4f4f4; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #333333; color: #ffffff; } .swiper-pagination-bullet { background: #333333; } /*** Product miniature ***/ .products.row { margin: 0rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 0rem; } .swiper-container-wrapper { margin: 0rem; } .swiper-container-wrapper .products.swiper-container { padding: 0rem; } .swiper-container-wrapper .product-carousel { padding: 0rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 0rem; } .product-miniature { border: none 1px; outline: 1px none transparent; } .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 picture:last-child .product-thumbnail-first { 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; } @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: !important; } .products-grid .product-miniature .product-category-name { display: none !important; } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-brand { 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-initialized) .swiper-wrapper { grid-template-rows: 1fr; grid-auto-rows: 0; display: grid; overflow-y: hidden; } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(5, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 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; } #wrapper { border-top: none 1px; border-bottom: none 1px; color: #777777; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: -0.7142857143rem; padding-bottom: -0.7142857143rem; } #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: #f8f8f8; } #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.3571428571rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #777777 !important; } #footer .block-title, #checkout-footer .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; } #footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:link, #checkout-footer .block-title a:visited { color: #333333; } #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: #777777; } #footer-container-main a, #checkout-footer a { color: #777777; } #footer-container-main a:hover, #checkout-footer a:hover { color: #333333; } #footer-copyrights { border-top: none 1px; background: #ffffff; 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: #e3e3e3; color: #333333; } #maintenance-page a, #maintenance-page a:link { color: #333333; } .maintenance-page-newsletter .maintenance-page-newsletter-btn { background: #000000; color: #ffffff; } .maintenance-page-newsletter .maintenance-page-newsletter-btn:hover { background: #333333; color: #ffffff; } .maintenance-page-newsletter input[type=email] { border: solid 1px #333333; background: #e3e3e3; 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; } body#checkout .cart-summary-subtotals { display: block !important; justify-content: space-between; align-items: center; margin-bottom: 8px; } body#checkout .cart-summary-line.cart-total { display: block !important; align-items: center; justify-content: space-between; margin: 0; } body#cart .cart-summary-line { display: block !important; justify-content: space-between; align-items: center; font-family: "Inter", sans-serif; } body#cart #main .btn-secondary { margin-top: 0px !important; background: transparent !important; border: 1px solid var(--es-purple) !important; color: var(--es-purple) !important; } /* ========================================================= ESTILO STORE — CATÁLOGO / TIENDA VERSIÓN CORREGIDA --------------------------------------------------------- ✓ Mantiene filtros ✓ Corrige checkbox duplicado ✓ Mantiene categorías desplegables ✓ Mantiene filtro por precio ✓ Mantiene orden por relevancia ✓ Mantiene selector de cantidad ✓ Mantiene paginación numérica ✓ Corrige botones anterior/siguiente ✓ Mantiene 3 productos por fila ✓ Diseño responsive ========================================================= */ /* ========================================================= 1. VARIABLES ========================================================= */ body#category.category-id-2 { --store-purple: #b21fc4; --store-purple-dark: #9419a5; --store-purple-light: #f8ecfa; --store-dark: #27222c; --store-text: #4c4650; --store-muted: #88818c; --store-border: #e7e2e9; --store-bg: #faf9fc; --store-white: #ffffff; --store-yellow: #ffbf21; background: var(--store-bg) !important; font-family: "Inter", sans-serif !important; } /* ========================================================= 2. CONTENEDOR GENERAL ========================================================= */ body#category.category-id-2 #wrapper { background: var(--store-bg) !important; padding-top: 38px !important; padding-bottom: 70px !important; } body#category.category-id-2 #inner-wrapper { width: 100% !important; max-width: 1380px !important; margin: 0 auto !important; padding-left: 24px !important; padding-right: 24px !important; } /* ========================================================= 3. DISTRIBUCIÓN PRINCIPAL ========================================================= */ @media (min-width: 768px) { body#category.category-id-2 #inner-wrapper > .row { display: flex !important; align-items: flex-start !important; margin-left: -14px !important; margin-right: -14px !important; } /* FILTROS */ body#category.category-id-2 #left-column { display: block !important; flex: 0 0 23% !important; width: 23% !important; max-width: 23% !important; padding-left: 14px !important; padding-right: 14px !important; order: 1 !important; } /* PRODUCTOS */ body#category.category-id-2 #content-wrapper { display: block !important; flex: 0 0 77% !important; width: 77% !important; max-width: 77% !important; padding-left: 14px !important; padding-right: 14px !important; order: 2 !important; } } /* ========================================================= 4. OCULTAR TÍTULO "INICIO" ========================================================= */ body#category.category-id-2 #js-product-list-header { display: none !important; } /* ========================================================= 5. TARJETA GENERAL DE FILTROS ========================================================= */ body#category.category-id-2 #amazzing_filter { width: 100% !important; margin: 0 !important; padding: 24px 20px !important; background: var(--store-white) !important; border: 1px solid var(--store-border) !important; border-radius: 18px !important; box-shadow: 0 4px 14px rgba(38, 22, 42, .025), 0 10px 30px rgba(38, 22, 42, .035) !important; box-sizing: border-box !important; } /* ========================================================= 6. TÍTULO "FILTRADO POR" ========================================================= */ body#category.category-id-2 #amazzing_filter .title_block { display: block !important; margin: 0 0 20px !important; padding: 0 0 17px !important; border-bottom: 1px solid var(--store-border) !important; color: #19151c !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.1 !important; text-transform: uppercase !important; } /* ========================================================= 7. BLOQUES DE CADA FILTRO ========================================================= */ body#category.category-id-2 #amazzing_filter .af_filter { position: relative !important; width: 100% !important; margin: 0 !important; padding: 18px 0 !important; border-bottom: 1px solid #eeeaf0 !important; overflow: visible !important; box-sizing: border-box !important; } body#category.category-id-2 #amazzing_filter .af_filter:last-child { border-bottom: 0 !important; } /* ========================================================= 8. TÍTULO DE CADA FILTRO ========================================================= */ body#category.category-id-2 #amazzing_filter .af_subtitle { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 22px 0 0 !important; color: #201b23 !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: uppercase !important; box-sizing: border-box !important; cursor: pointer !important; } /* ========================================================= 9. CONTENIDO DEL FILTRO ========================================================= */ body#category.category-id-2 #amazzing_filter .af_filter_content { width: 100% !important; margin-top: 14px !important; padding: 0 !important; font-family: "Inter", sans-serif !important; box-sizing: border-box !important; } body#category.category-id-2 #amazzing_filter ul { width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body#category.category-id-2 #amazzing_filter li { width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* ========================================================= 10. CORRECCIÓN PRINCIPAL: ELIMINAR CHECKBOX DUPLICADO ========================================================= */ /* Amazzing Filter / Warehouse puede crear su propio aspecto visual para el checkbox. Ocultamos completamente el checkbox original pero mantenemos su funcionalidad. */ body#category.category-id-2 #amazzing_filter .af-checkbox-label > input[type="checkbox"].af { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; appearance: none !important; -webkit-appearance: none !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important; } /* Eliminamos cualquier checkbox generado mediante pseudo-elementos del tema. */ body#category.category-id-2 #amazzing_filter .af-checkbox-label::before, body#category.category-id-2 #amazzing_filter .af-checkbox-label::after { content: none !important; display: none !important; } /* ========================================================= 11. LABEL DE OPCIONES ========================================================= */ body#category.category-id-2 #amazzing_filter .af-checkbox-label { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 21px !important; margin: 0 !important; padding: 0 !important; color: #66606a !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; cursor: pointer !important; box-sizing: border-box !important; transition: color .2s ease !important; } body#category.category-id-2 #amazzing_filter .af-checkbox-label:hover { color: var(--store-purple) !important; } /* ========================================================= 12. CHECKBOX PERSONALIZADO ÚNICO ========================================================= */ body#category.category-id-2 #amazzing_filter .af-checkbox-label .name { position: relative !important; display: flex !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; color: inherit !important; line-height: 19px !important; } /* ÚNICO CUADRO VISIBLE */ body#category.category-id-2 #amazzing_filter .af-checkbox-label .name::before { content: "" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 16px !important; width: 16px !important; height: 16px !important; margin: 0 9px 0 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #d6d0d9 !important; border-radius: 3px !important; box-sizing: border-box !important; color: #ffffff !important; font-family: Arial, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; line-height: 14px !important; transition: background-color .2s ease, border-color .2s ease !important; } /* Hover checkbox */ body#category.category-id-2 #amazzing_filter .af-checkbox-label:hover .name::before { border-color: var(--store-purple) !important; } /* CHECKBOX SELECCIONADO */ body#category.category-id-2 #amazzing_filter input[type="checkbox"].af:checked + .name::before { content: "✓" !important; background: var(--store-purple) !important; border-color: var(--store-purple) !important; color: #ffffff !important; } /* ========================================================= 13. CONTADOR DE CADA FILTRO ========================================================= */ body#category.category-id-2 #amazzing_filter .af-checkbox-label .count { flex: 0 0 auto !important; margin-left: 8px !important; color: #aaa2ad !important; font-family: "Inter", sans-serif !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1 !important; white-space: nowrap !important; } /* ========================================================= 14. BOTÓN "+" DE SUBCATEGORÍAS ========================================================= */ body#category.category-id-2 #amazzing_filter .af-toggle-child { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin-left: 6px !important; color: var(--store-purple) !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; } /* ========================================================= 15. SUBCATEGORÍAS ========================================================= */ body#category.category-id-2 #amazzing_filter .child-categories { width: auto !important; margin: 7px 0 4px 24px !important; padding: 0 0 0 9px !important; border-left: 1px solid #eee9f0 !important; } /* ========================================================= 16. SCROLL DE CATEGORÍAS CORREGIDO PARA QUE NO CORTE LOS ITEMS ========================================================= */ body#category.category-id-2 #amazzing_filter .af_filter.c .af_filter_content { max-height: 390px !important; overflow-x: hidden !important; overflow-y: auto !important; padding-right: 9px !important; padding-bottom: 10px !important; scrollbar-gutter: stable !important; box-sizing: border-box !important; } /* Scroll */ body#category.category-id-2 #amazzing_filter .af_filter_content::-webkit-scrollbar { width: 4px !important; } body#category.category-id-2 #amazzing_filter .af_filter_content::-webkit-scrollbar-track { background: transparent !important; } body#category.category-id-2 #amazzing_filter .af_filter_content::-webkit-scrollbar-thumb { background: #d4cdd8 !important; border-radius: 20px !important; } body#category.category-id-2 #amazzing_filter .af_filter_content { scrollbar-width: thin !important; scrollbar-color: #d4cdd8 transparent !important; } /* ========================================================= 17. FILTRO COLOR ========================================================= */ body#category.category-id-2 #amazzing_filter .af_filter.a8 .af_filter_content { max-height: 245px !important; overflow-x: hidden !important; overflow-y: auto !important; padding-right: 9px !important; padding-bottom: 8px !important; scrollbar-gutter: stable !important; } /* ========================================================= 18. MÁS / MENOS ========================================================= */ body#category.category-id-2 #amazzing_filter .toggle-cut-off { display: inline-block !important; margin-top: 7px !important; color: var(--store-purple) !important; font-family: "Inter", sans-serif !important; font-size: 11px !important; font-weight: 500 !important; text-decoration: none !important; } body#category.category-id-2 #amazzing_filter .toggle-cut-off:hover { color: var(--store-purple-dark) !important; } /* ========================================================= 19. FILTRO PRECIO ========================================================= */ body#category.category-id-2 #amazzing_filter .p_slider { width: 100% !important; padding-top: 5px !important; box-sizing: border-box !important; } body#category.category-id-2 #amazzing_filter .slider-bar { height: 4px !important; margin: 15px 7px 17px !important; background: #ddd7e0 !important; border: 0 !important; border-radius: 30px !important; } /* Tramo seleccionado */ body#category.category-id-2 #amazzing_filter .slider-bar .ui-slider-range, body#category.category-id-2 #amazzing_filter .slider-bar .noUi-connect { background: var(--store-purple) !important; } /* Controles */ body#category.category-id-2 #amazzing_filter .slider-bar .ui-slider-handle, body#category.category-id-2 #amazzing_filter .slider-bar .noUi-handle { width: 15px !important; height: 15px !important; background: #ffffff !important; border: 2px solid var(--store-purple) !important; border-radius: 50% !important; box-shadow: 0 1px 5px rgba(0, 0, 0, .12) !important; } /* Valores */ body#category.category-id-2 #amazzing_filter .slider-values { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; color: #817b85 !important; font-family: "Inter", sans-serif !important; font-size: 10px !important; } /* Inputs de precio */ body#category.category-id-2 #amazzing_filter .slider_value .input-text { width: 52px !important; height: 28px !important; margin-left: 3px !important; padding: 4px 6px !important; background: #faf9fb !important; border: 1px solid #e3dee6 !important; border-radius: 5px !important; color: #5f5963 !important; font-family: "Inter", sans-serif !important; font-size: 10px !important; box-sizing: border-box !important; } /* ========================================================= 20. LIMPIAR FILTROS ========================================================= */ body#category.category-id-2 #amazzing_filter .clearAll a { display: inline-flex !important; align-items: center !important; gap: 5px !important; margin-bottom: 10px !important; padding: 7px 11px !important; background: var(--store-purple-light) !important; border-radius: 7px !important; color: var(--store-purple) !important; font-family: "Inter", sans-serif !important; font-size: 11px !important; font-weight: 500 !important; text-decoration: none !important; } /* ========================================================= 21. BARRA SUPERIOR PRODUCTOS ========================================================= */ body#category.category-id-2 #js-product-list-top { width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body#category.category-id-2 .products-selection { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body#category.category-id-2 .products-selection > .row { display: flex !important; align-items: center !important; width: 100% !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 22. OCULTAR BOTONES GRID / LISTA ========================================================= */ body#category.category-id-2 .view-switcher { display: none !important; } body#category.category-id-2 .facated-toggler { display: none !important; } /* ========================================================= 23. BLOQUE CONTADOR + ORDEN ========================================================= */ body#category.category-id-2 .products-selection > .row > .col-auto:last-child { display: flex !important; flex: 1 1 100% !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 9px !important; } /* ========================================================= 24. TEXTO "MOSTRANDO..." ========================================================= */ body#category.category-id-2 .products-selection .showing { display: inline-block !important; margin: 0 auto 0 0 !important; padding: 0 !important; color: #77717b !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; white-space: nowrap !important; } /* ========================================================= 25. ORDEN POR RELEVANCIA ========================================================= */ body#category.category-id-2 .products-sort-order { display: block !important; flex: 0 0 auto !important; margin: 0 !important; } body#category.category-id-2 .products-sort-order .select-title { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; width: auto !important; min-width: 155px !important; height: 39px !important; margin: 0 !important; padding: 0 13px !important; background: #ffffff !important; border: 1px solid #e3dee6 !important; border-radius: 9px !important; box-shadow: none !important; color: #4e4852 !important; font-family: "Inter", sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 37px !important; text-decoration: none !important; cursor: pointer !important; box-sizing: border-box !important; } body#category.category-id-2 .products-sort-order .select-title:hover { border-color: var(--store-purple) !important; } /* Flecha */ body#category.category-id-2 .products-sort-order .select-title i { margin: 0 0 0 auto !important; color: var(--store-purple) !important; font-size: 12px !important; } /* Dropdown */ body#category.category-id-2 .products-sort-order .dropdown-menu { min-width: 220px !important; margin-top: 7px !important; padding: 6px !important; background: #ffffff !important; border: 1px solid var(--store-border) !important; border-radius: 10px !important; box-shadow: 0 10px 30px rgba(35, 20, 40, .10) !important; } body#category.category-id-2 .products-sort-order .dropdown-item { display: block !important; width: 100% !important; padding: 9px 10px !important; border-radius: 6px !important; color: #5e5863 !important; font-family: "Inter", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.35 !important; transition: background-color .2s ease, color .2s ease !important; } body#category.category-id-2 .products-sort-order .dropdown-item:hover { background: var(--store-purple-light) !important; color: var(--store-purple) !important; } body#category.category-id-2 .products-sort-order .dropdown-item.current { background: var(--store-purple-light) !important; color: var(--store-purple) !important; font-weight: 600 !important; } /* ========================================================= 26. CANTIDAD POR PÁGINA ========================================================= */ body#category.category-id-2 .products-nb-per-page { display: block !important; flex: 0 0 auto !important; margin: 0 !important; } body#category.category-id-2 .products-nb-per-page .select-title { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-width: 61px !important; height: 39px !important; margin: 0 !important; padding: 0 10px !important; background: #ffffff !important; border: 1px solid #e3dee6 !important; border-radius: 9px !important; color: #5d5761 !important; font-family: "Inter", sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 37px !important; box-shadow: none !important; box-sizing: border-box !important; } body#category.category-id-2 .products-nb-per-page .select-title i { color: var(--store-purple) !important; font-size: 11px !important; } body#category.category-id-2 .products-nb-per-page .select-title:hover { border-color: var(--store-purple) !important; } /* ========================================================= 27. GRID PRODUCTOS ========================================================= */ body#category.category-id-2 #js-product-list .products { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; margin-left: -9px !important; margin-right: -9px !important; row-gap: 20px !important; } /* 3 productos por fila */ body#category.category-id-2 #js-product-list .js-product-miniature-wrapper { display: flex !important; flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: 33.333333% !important; margin: 0 !important; padding-left: 9px !important; padding-right: 9px !important; box-sizing: border-box !important; } /* ========================================================= 28. TARJETA PRODUCTO ========================================================= */ body#category.category-id-2 .product-miniature { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid rgba(40, 25, 45, .025) !important; border-radius: 15px !important; overflow: hidden !important; box-shadow: 0 3px 10px rgba(40, 25, 45, .025), 0 8px 23px rgba(40, 25, 45, .035) !important; transition: transform .25s ease, box-shadow .25s ease !important; } body#category.category-id-2 .product-miniature:hover { transform: translateY(-3px) !important; box-shadow: 0 7px 18px rgba(40, 25, 45, .05), 0 15px 32px rgba(40, 25, 45, .06) !important; } /* ========================================================= 29. IMAGEN PRODUCTO ========================================================= */ body#category.category-id-2 .product-miniature .thumbnail-container { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; margin: 0 !important; padding: 0 !important; background: #f8f7f9 !important; border-radius: 15px 15px 0 0 !important; overflow: hidden !important; transform: none !important; } body#category.category-id-2 .product-miniature .product-thumbnail { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } body#category.category-id-2 .product-thumbnail picture { display: block !important; width: 100% !important; height: 100% !important; } body#category.category-id-2 .product-thumbnail img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 11px !important; object-fit: contain !important; object-position: center !important; transform: none !important; } body#category.category-id-2 .product-thumbnail-second { display: none !important; } body#category.category-id-2 .product-thumbnail-first { display: block !important; opacity: 1 !important; visibility: visible !important; } /* ========================================================= 30. ETIQUETA "NUEVO" ========================================================= */ body#category.category-id-2 .product-flags { position: absolute !important; top: 10px !important; left: 10px !important; z-index: 8 !important; margin: 0 !important; padding: 0 !important; } body#category.category-id-2 .product-flags .product-flag { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 4px 9px !important; background: var(--store-purple) !important; border: 0 !important; border-radius: 30px !important; color: #ffffff !important; font-family: "Inter", sans-serif !important; font-size: 9px !important; font-weight: 500 !important; line-height: 1.2 !important; text-transform: none !important; box-shadow: none !important; } /* ========================================================= 31. FAVORITO ========================================================= */ body#category.category-id-2 .product-functional-buttons { position: absolute !important; top: 9px !important; right: 9px !important; bottom: auto !important; left: auto !important; z-index: 9 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } body#category.category-id-2 .product-functional-buttons-links { display: flex !important; align-items: center !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Ocultar comparar */ body#category.category-id-2 .btn-iqitcompare-add { display: none !important; } /* Ocultar vista rápida */ body#category.category-id-2 .js-quick-view-iqit { display: none !important; } /* Corazón */ body#category.category-id-2 .btn-iqitwishlist-add { display: flex !important; align-items: center !important; justify-content: center !important; width: 33px !important; height: 33px !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, .96) !important; border: 1px solid #e3dee6 !important; border-radius: 50% !important; color: #68616d !important; box-shadow: 0 2px 7px rgba(0, 0, 0, .05) !important; opacity: 1 !important; visibility: visible !important; transition: color .2s ease, border-color .2s ease !important; } body#category.category-id-2 .btn-iqitwishlist-add:hover { color: var(--store-purple) !important; border-color: var(--store-purple) !important; } body#category.category-id-2 .btn-iqitwishlist-add i { font-size: 14px !important; } /* ========================================================= 32. DESCRIPCIÓN ========================================================= */ body#category.category-id-2 .product-description { position: relative !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; width: 100% !important; min-height: 150px !important; margin: 0 !important; padding: 13px 52px 17px 15px !important; background: #ffffff !important; text-align: left !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 33. CATEGORÍA DEL PRODUCTO ========================================================= */ body#category.category-id-2 .product-category-name { display: block !important; margin: 0 0 4px !important; color: #8a848e !important; font-family: "Inter", sans-serif !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.35 !important; text-align: left !important; text-transform: capitalize !important; } /* ========================================================= 34. TÍTULO DEL PRODUCTO ========================================================= */ body#category.category-id-2 .product-title { min-height: 37px !important; margin: 0 0 6px !important; padding: 0 !important; color: var(--store-dark) !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: left !important; text-transform: none !important; } body#category.category-id-2 .product-title a { color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-transform: none !important; } body#category.category-id-2 .product-title a:hover { color: var(--store-purple) !important; } /* ========================================================= 35. OCULTAR INFORMACIÓN ADICIONAL ========================================================= */ body#category.category-id-2 .product-brand, body#category.category-id-2 .product-reference, body#category.category-id-2 .product-description-short, body#category.category-id-2 .product-availability { display: none !important; } /* ========================================================= 36. REVIEWS ========================================================= */ body#category.category-id-2 .product-list-reviews { display: flex !important; align-items: center !important; min-height: 16px !important; margin: 0 0 7px !important; color: #817b85 !important; font-family: "Inter", sans-serif !important; font-size: 10px !important; } body#category.category-id-2 .product-list-reviews .grade-stars { margin-right: 5px !important; color: var(--store-yellow) !important; } body#category.category-id-2 .product-list-reviews .star { color: var(--store-yellow) !important; } /* ========================================================= 37. PRECIO PRODUCTO ========================================================= */ body#category.category-id-2 .product-price-and-shipping { margin: auto 0 0 !important; padding: 0 !important; text-align: left !important; } body#category.category-id-2 .product-price { color: var(--store-purple) !important; font-family: "Inter", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; } /* ========================================================= 38. BOTÓN CARRITO ========================================================= */ body#category.category-id-2 .product-add-cart { position: absolute !important; right: 12px !important; bottom: 12px !important; display: block !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } body#category.category-id-2 .product-add-cart form, body#category.category-id-2 .input-group-add-cart { display: block !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; } /* Ocultar cantidad */ body#category.category-id-2 .product-add-cart .input-qty { display: none !important; } /* Botón */ body#category.category-id-2 .product-add-cart .add-to-cart { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; background: var(--store-purple) !important; border: 0 !important; border-radius: 50% !important; color: #ffffff !important; box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; transition: background-color .2s ease, transform .2s ease !important; } body#category.category-id-2 .product-add-cart .add-to-cart:hover { background: var(--store-purple-dark) !important; transform: scale(1.05) !important; } /* Mantener ícono original */ body#category.category-id-2 .product-add-cart .add-to-cart .bag-icon { display: inline-block !important; margin: 0 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1 !important; } /* Spinner */ body#category.category-id-2 .product-add-cart .add-to-cart .spinner-icon { font-size: 14px !important; color: #ffffff !important; } /* ========================================================= 39. QUITAR ANIMACIONES DEL TEMA ========================================================= */ body#category.category-id-2 .product-miniature-default:hover .product-description { transform: none !important; } body#category.category-id-2 .product-miniature-default:hover .thumbnail-container { transform: none !important; } body#category.category-id-2 .product-miniature-default .product-description { opacity: 1 !important; visibility: visible !important; } /* ========================================================= 40. PAGINACIÓN CORRECCIÓN COMPLETA ========================================================= */ body#category.category-id-2 .pagination { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 38px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* LISTA */ body#category.category-id-2 .pagination .page-list { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: auto !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; float: none !important; } /* ITEMS */ body#category.category-id-2 .pagination .page-list > li { display: block !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important; } /* ========================================================= 41. BOTONES PAGINACIÓN ========================================================= */ body#category.category-id-2 .pagination .page-list > li > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #ffffff !important; border: 1px solid #e1dce4 !important; border-radius: 8px !important; box-shadow: none !important; color: #554f59 !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; box-sizing: border-box !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease !important; } /* Eliminar efectos adicionales de Warehouse */ body#category.category-id-2 .pagination .page-list > li > a::before, body#category.category-id-2 .pagination .page-list > li > a::after { display: none !important; content: none !important; } /* ========================================================= 42. HOVER PAGINACIÓN ========================================================= */ body#category.category-id-2 .pagination .page-list > li:not(.current) > a:hover { background: var(--store-purple-light) !important; border-color: var(--store-purple) !important; color: var(--store-purple) !important; } /* ========================================================= 43. PÁGINA ACTIVA ========================================================= */ body#category.category-id-2 .pagination .page-list > li.current > a, body#category.category-id-2 .pagination .page-list > li.current > a.disabled { background: var(--store-purple) !important; border: 1px solid var(--store-purple) !important; color: #ffffff !important; box-shadow: none !important; cursor: default !important; pointer-events: none !important; } /* ========================================================= 44. ANTERIOR / SIGUIENTE ========================================================= */ body#category.category-id-2 .pagination .page-list a.previous, body#category.category-id-2 .pagination .page-list a.prev, body#category.category-id-2 .pagination .page-list a.next { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #e1dce4 !important; border-radius: 8px !important; color: var(--store-purple) !important; } /* Íconos */ body#category.category-id-2 .pagination .page-list a.previous i, body#category.category-id-2 .pagination .page-list a.prev i, body#category.category-id-2 .pagination .page-list a.next i { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 13px !important; line-height: 1 !important; } /* Hover flechas */ body#category.category-id-2 .pagination .page-list a.previous:hover, body#category.category-id-2 .pagination .page-list a.prev:hover, body#category.category-id-2 .pagination .page-list a.next:hover { background: var(--store-purple) !important; border-color: var(--store-purple) !important; color: #ffffff !important; } /* ========================================================= 45. ELIMINAR ESTILOS BOOTSTRAP/WAREHOUSE RESIDUALES ========================================================= */ body#category.category-id-2 .pagination a { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; text-indent: 0 !important; } body#category.category-id-2 .pagination .current { background: transparent !important; border: 0 !important; } /* ========================================================= 46. LOADERS ========================================================= */ body#category.category-id-2 #facets-loader-icon, body#category.category-id-2 #infinity-loader-icon { color: var(--store-purple) !important; } /* ========================================================= 47. TABLET GRANDE ========================================================= */ @media (max-width: 1199px) and (min-width: 768px) { body#category.category-id-2 #left-column { flex: 0 0 27% !important; width: 27% !important; max-width: 27% !important; } body#category.category-id-2 #content-wrapper { flex: 0 0 73% !important; width: 73% !important; max-width: 73% !important; } body#category.category-id-2 #js-product-list .js-product-miniature-wrapper { flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: 33.333333% !important; } } /* ========================================================= 48. TABLET MEDIANA ========================================================= */ @media (max-width: 991px) and (min-width: 768px) { body#category.category-id-2 #left-column { flex: 0 0 31% !important; width: 31% !important; max-width: 31% !important; } body#category.category-id-2 #content-wrapper { flex: 0 0 69% !important; width: 69% !important; max-width: 69% !important; } body#category.category-id-2 #js-product-list .js-product-miniature-wrapper { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; } } /* ========================================================= 49. MÓVIL IMPORTANTE: NO modificamos position/opacity de AmazzingFilter porque el módulo los controla. ========================================================= */ @media (max-width: 767px) { body#category.category-id-2 #wrapper { padding-top: 24px !important; padding-bottom: 45px !important; } body#category.category-id-2 #inner-wrapper { padding-left: 14px !important; padding-right: 14px !important; } body#category.category-id-2 #inner-wrapper > .row { display: block !important; margin: 0 !important; } body#category.category-id-2 #left-column, body#category.category-id-2 #content-wrapper { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Barra superior */ body#category.category-id-2 .products-selection > .row > .col-auto:last-child { flex-wrap: wrap !important; gap: 8px !important; } body#category.category-id-2 .products-selection .showing { width: 100% !important; margin: 0 0 3px !important; } /* Productos */ body#category.category-id-2 #js-product-list .products { margin-left: -6px !important; margin-right: -6px !important; row-gap: 14px !important; } body#category.category-id-2 #js-product-list .js-product-miniature-wrapper { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; padding-left: 6px !important; padding-right: 6px !important; } body#category.category-id-2 .product-description { min-height: 143px !important; padding: 11px 47px 14px 12px !important; } body#category.category-id-2 .product-title { min-height: 34px !important; font-size: 12px !important; } body#category.category-id-2 .product-price { font-size: 14px !important; } /* Carrito */ body#category.category-id-2 .product-add-cart { right: 9px !important; bottom: 9px !important; width: 35px !important; height: 35px !important; } body#category.category-id-2 .product-add-cart form, body#category.category-id-2 .input-group-add-cart, body#category.category-id-2 .product-add-cart .add-to-cart { width: 35px !important; min-width: 35px !important; height: 35px !important; min-height: 35px !important; } /* Paginación */ body#category.category-id-2 .pagination .page-list { gap: 5px !important; } body#category.category-id-2 .pagination .page-list > li > a { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; font-size: 11px !important; } /* Botón filtro móvil */ body#category.category-id-2 .compact-toggle { background: var(--store-purple) !important; border: 0 !important; border-radius: 9px !important; color: #ffffff !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; } } /* ========================================================= 50. MÓVIL PEQUEÑO ========================================================= */ @media (max-width: 430px) { body#category.category-id-2 .product-miniature .thumbnail-container { aspect-ratio: 1 / 1 !important; } body#category.category-id-2 .product-thumbnail img { padding: 8px !important; } body#category.category-id-2 .product-title { font-size: 11px !important; } body#category.category-id-2 .product-category-name { font-size: 9px !important; } body#category.category-id-2 .products-sort-order .select-title { min-width: 140px !important; } body#category.category-id-2 .pagination .page-list { gap: 4px !important; } body#category.category-id-2 .pagination .page-list > li > a { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; border-radius: 7px !important; font-size: 10px !important; } } /* ========================================================= ESTILO STORE TIENDA + TARJETAS DE PRODUCTO Referencia: - Productos: captura 3 - Header: SIN MODIFICACIONES ========================================================= */ /* ========================================================= 01. VARIABLES GENERALES ========================================================= */ :root { --es-purple: #a91db9; --es-purple-hover: #8f169f; --es-purple-dark: #3b003c; --es-purple-soft: #f8efff; --es-text: #250328; --es-text-soft: #6f6672; --es-border: #eee7f1; --es-card-bg: #ffffff; --es-page-bg: #fbf9fd; --es-price: #b218b7; --es-radius: 8px; --es-pill-radius: 100px; --es-shadow: 0 4px 16px rgba(57, 0, 61, 0.05); } /* ========================================================= 02. TIPOGRAFÍA GENERAL ========================================================= */ body.page-category { font-family: "Inter", sans-serif !important; color: var(--es-text); background: #ffffff; } body.page-category #wrapper { background: var(--es-page-bg); } body.page-category a { text-decoration: none; } /* ========================================================= 04. CONTENIDO DE TIENDA ========================================================= */ body.page-category #wrapper { padding-top: 28px !important; padding-bottom: 70px !important; } body.page-category #inner-wrapper { max-width: 1120px !important; } /* Título Inicio */ body.page-category #js-product-list-header { margin-bottom: 18px; } body.page-category #js-product-list-header .page-title { margin: 0 !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 26px !important; font-weight: 600 !important; line-height: 1.1 !important; color: var(--es-text) !important; text-transform: none !important; } /* Línea inferior del título */ body.page-category #js-product-list-header::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 14px; background: #e9e3eb; } /* ========================================================= 05. BARRA SUPERIOR RESULTADOS + ORDEN ========================================================= */ body.page-category #js-product-list-top { margin: 0 0 18px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body.page-category #js-product-list-top > .row { min-height: 40px; } body.page-category #js-product-list-top .showing { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 400; color: #918993; } /* Ocultamos grid/list como en la referencia visual */ body.page-category .view-switcher { display: none !important; } /* Selectores orden y cantidad */ body.page-category .products-sort-nb-dropdown .select-title { height: 34px !important; min-height: 34px !important; padding: 0 12px !important; display: flex !important; align-items: center !important; justify-content: space-between; gap: 15px; background: #ffffff !important; border: 1px solid #ede7ef !important; border-radius: 6px !important; box-shadow: none !important; font-family: "Inter", sans-serif !important; font-size: 9px !important; font-weight: 500 !important; color: #5f5861 !important; } body.page-category .products-sort-order .select-title { min-width: 130px; } body.page-category .products-nb-per-page .select-title { min-width: 52px; } body.page-category .products-sort-nb-dropdown .select-title i { margin-left: auto; font-size: 10px; color: var(--es-purple); } /* Dropdowns */ body.page-category .products-sort-nb-dropdown .dropdown-menu { padding: 6px; border: 1px solid var(--es-border); border-radius: 7px; box-shadow: 0 10px 24px rgba(40, 0, 44, .08); } body.page-category .products-sort-nb-dropdown .dropdown-item { padding: 8px 10px; border-radius: 5px; font-family: "Inter", sans-serif; font-size: 10px; color: #5d565e; } body.page-category .products-sort-nb-dropdown .dropdown-item:hover, body.page-category .products-sort-nb-dropdown .dropdown-item.current { background: #faf1fc; color: var(--es-purple); } /* ========================================================= 06. GRID DE PRODUCTOS ========================================================= */ body.page-category #js-product-list .products { margin-left: -8px !important; margin-right: -8px !important; } body.page-category #js-product-list .js-product-miniature-wrapper { padding-left: 8px !important; padding-right: 8px !important; margin-bottom: 18px !important; } /* ========================================================= 07. TARJETA DEL PRODUCTO DISEÑO CAPTURA 3 ========================================================= */ body.page-category .product-miniature { position: relative !important; width: 100% !important; height: 100%; display: flex !important; flex-direction: column; background: var(--es-card-bg) !important; border: 1px solid #eee8f0 !important; border-radius: var(--es-radius) !important; box-shadow: none !important; overflow: hidden !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } body.page-category .product-miniature:hover { transform: translateY(-3px); border-color: #e5d8e8 !important; box-shadow: var(--es-shadow) !important; } /* ========================================================= 08. IMAGEN PRODUCTO ========================================================= */ body.page-category .product-miniature .thumbnail-container { position: relative !important; width: 100% !important; height: 205px !important; min-height: 205px !important; display: flex; align-items: center; justify-content: center; padding: 14px !important; margin: 0 !important; background: #ffffff !important; border: 0 !important; overflow: hidden !important; } body.page-category .product-miniature .thumbnail.product-thumbnail { width: 100%; height: 100%; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; } body.page-category .product-miniature .thumbnail-container picture { width: 100%; height: 100%; } body.page-category .product-miniature .thumbnail-container img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; } /* Segunda imagen de hover */ body.page-category .product-thumbnail-second { object-fit: contain !important; } /* ========================================================= 09. ETIQUETA NUEVO ========================================================= */ body.page-category .product-flags { position: absolute !important; top: 9px !important; left: 9px !important; z-index: 5; margin: 0 !important; padding: 0 !important; } body.page-category .product-flags .product-flag, body.page-category .product-flags .product-flag.new { min-height: 18px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 3px 8px !important; margin: 0 !important; background: var(--es-purple) !important; color: #ffffff !important; border: none !important; border-radius: var(--es-pill-radius) !important; box-shadow: none !important; font-family: "Inter", sans-serif !important; font-size: 7px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: capitalize !important; } /* ========================================================= 10. FAVORITO CORAZÓN SUPERIOR DERECHO ========================================================= */ body.page-category .product-functional-buttons { position: absolute !important; top: 9px !important; right: 9px !important; bottom: auto !important; left: auto !important; width: 28px !important; height: 28px !important; margin: 0 !important; z-index: 8 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } body.page-category .product-functional-buttons-links { width: 28px !important; height: 28px !important; display: block !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } /* Ocultamos comparar y vista rápida */ body.page-category .product-functional-buttons-links .btn-iqitcompare-add, body.page-category .product-functional-buttons-links .js-quick-view-iqit { display: none !important; } /* Botón favorito */ body.page-category .product-functional-buttons-links .btn-iqitwishlist-add { position: relative !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: #ffffff !important; color: #908a91 !important; border: 1px solid #e6e0e8 !important; border-radius: 50% !important; box-shadow: 0 2px 6px rgba(30, 0, 32, .05) !important; transition: color .2s ease, border-color .2s ease; } body.page-category .product-functional-buttons-links .btn-iqitwishlist-add:hover { color: var(--es-purple) !important; border-color: var(--es-purple) !important; } body.page-category .product-functional-buttons-links .btn-iqitwishlist-add i { position: static !important; margin: 0 !important; font-size: 12px !important; line-height: 1 !important; } /* ========================================================= 11. DESCRIPCIÓN PRODUCTO ========================================================= */ body.page-category .product-miniature .product-description { position: relative !important; flex: 1 1 auto; min-height: 94px !important; padding: 12px 42px 14px 12px !important; margin: 0 !important; background: #ffffff !important; border: 0 !important; text-align: left !important; } /* Elementos que NO aparecen en las tarjetas de la referencia */ body.page-category .product-miniature .product-category-name, body.page-category .product-miniature .product-brand, body.page-category .product-miniature .product-reference, body.page-category .product-miniature .product-description-short, body.page-category .product-miniature .product-availability { display: none !important; } /* ========================================================= 12. NOMBRE DEL PRODUCTO ========================================================= */ body.page-category .product-miniature .product-title { min-height: 31px !important; margin: 0 0 8px !important; padding: 0 !important; line-height: 1.25 !important; text-align: left !important; } body.page-category .product-miniature .product-title a { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: "Inter", sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: #3b343c !important; text-transform: uppercase !important; } body.page-category .product-miniature .product-title a:hover { color: var(--es-purple) !important; } /* ========================================================= 13. PRECIO ========================================================= */ body.page-category .product-miniature .product-price-and-shipping { margin: 0 !important; padding: 0 !important; text-align: left !important; line-height: 1 !important; } body.page-category .product-miniature .product-price { font-family: "Inter", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; color: var(--es-price) !important; } /* ========================================================= 14. BOTÓN AÑADIR AL CARRITO CUADRADO MORADO COMO CAPTURA 3 ========================================================= */ body.page-category .product-miniature .product-add-cart { position: absolute !important; right: 10px !important; bottom: 12px !important; width: 27px !important; height: 27px !important; margin: 0 !important; padding: 0 !important; display: block !important; opacity: 1 !important; visibility: visible !important; } body.page-category .product-miniature .product-add-cart form { width: 27px !important; height: 27px !important; margin: 0 !important; } body.page-category .product-miniature .input-group-add-cart { width: 27px !important; height: 27px !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* Oculta selector de cantidad */ body.page-category .product-miniature .input-qty { display: none !important; } /* Botón */ body.page-category .product-miniature .add-to-cart { position: relative !important; width: 27px !important; min-width: 27px !important; max-width: 27px !important; height: 27px !important; min-height: 27px !important; max-height: 27px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: var(--es-purple) !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; /* * Oculta el texto "Añadir al carrito" * pero mantiene visible el icono. */ font-size: 0 !important; overflow: hidden !important; transition: background-color .2s ease, transform .2s ease; } body.page-category .product-miniature .add-to-cart:hover { background: var(--es-purple-hover) !important; transform: translateY(-1px); } /* Icono bolsa */ body.page-category .product-miniature .add-to-cart .bag-icon { width: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 1 !important; color: #ffffff !important; } /* Spinner */ body.page-category .product-miniature .add-to-cart .spinner-icon { font-size: 10px !important; color: #ffffff !important; } /* ========================================================= 15. FILTRO IZQUIERDO MANTENEMOS FUNCIONALIDAD, SOLO CAMBIAMOS DISEÑO ========================================================= */ body.page-category #amazzing_filter { padding: 16px 14px 20px !important; background: #ffffff !important; border: 1px solid #eee8f0 !important; border-radius: 10px !important; box-shadow: 0 4px 18px rgba(53, 0, 57, 0.035) !important; } /* Título FILTRADO POR */ body.page-category #amazzing_filter .title_block { padding: 0 0 13px !important; margin: 0 0 12px !important; border-bottom: 1px solid #eee8f0 !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1 !important; color: var(--es-text) !important; text-transform: uppercase; } /* Bloques */ body.page-category #amazzing_filter .af_filter { padding: 0 0 15px !important; margin: 0 0 15px !important; border-bottom: 1px solid #f0ebf2; } body.page-category #amazzing_filter .af_filter:last-child { margin-bottom: 0 !important; border-bottom: 0; } /* Títulos filtros */ body.page-category #amazzing_filter .af_subtitle { position: relative; padding: 0 20px 8px 0 !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #2d1530 !important; text-transform: uppercase; } /* Opciones */ body.page-category #amazzing_filter .af_filter_content li { margin: 0 0 5px !important; } body.page-category #amazzing_filter .af-checkbox-label { display: flex !important; align-items: center; width: 100%; margin: 0 !important; font-family: "Inter", sans-serif !important; font-size: 9px !important; font-weight: 400; color: #716b73 !important; } /* Checkbox */ body.page-category #amazzing_filter input[type="checkbox"] { width: 11px !important; height: 11px !important; margin-right: 7px !important; accent-color: var(--es-purple); } /* Nombre opción */ body.page-category #amazzing_filter .name { flex: 1 1 auto; line-height: 1.4; } /* Cantidad */ body.page-category #amazzing_filter .count { margin-left: auto !important; font-size: 8px !important; color: #aaa2ab !important; } /* Más... */ body.page-category #amazzing_filter .toggle-cut-off { font-family: "Inter", sans-serif; font-size: 8px; color: var(--es-purple) !important; } /* ========================================================= 16. SLIDER PRECIO ========================================================= */ body.page-category #amazzing_filter .slider-bar { background: #ddd7df !important; } body.page-category #amazzing_filter .ui-slider-range, body.page-category #amazzing_filter .slider-range { background: var(--es-purple) !important; } body.page-category #amazzing_filter .ui-slider-handle, body.page-category #amazzing_filter .slider-handle { border-color: var(--es-purple) !important; background: #ffffff !important; } body.page-category #amazzing_filter .slider-values { font-family: "Inter", sans-serif; font-size: 8px; color: #888188; } /* ========================================================= 17. PAGINACIÓN ========================================================= */ body.page-category .pagination { width: 100%; margin-top: 24px !important; display: flex; justify-content: center; } body.page-category .pagination .page-list { display: flex !important; align-items: center; justify-content: center; gap: 5px; margin: 0 !important; padding: 0 !important; } body.page-category .pagination .page-list li { margin: 0 !important; } body.page-category .pagination .page-list li a { width: 28px; height: 28px; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; background: #ffffff !important; color: #716a72 !important; border: 1px solid #e8e1ea !important; border-radius: 4px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 500; box-shadow: none !important; } body.page-category .pagination .page-list li.current a, body.page-category .pagination .page-list li a:hover { background: var(--es-purple) !important; color: #ffffff !important; border-color: var(--es-purple) !important; } /* ========================================================= 18. EVITAR ESTILOS ANTIGUOS AL HACER HOVER ========================================================= */ body.page-category .product-miniature:hover .product-description, body.page-category .product-miniature:hover .thumbnail-container { background: #ffffff !important; } body.page-category .product-miniature:hover .product-functional-buttons { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ========================================================= 20. TABLET / MÓVIL ========================================================= */ @media (max-width: 991px) { /* Producto */ body.page-category .product-miniature .thumbnail-container { height: 200px !important; min-height: 200px !important; } } /* ========================================================= 21. MÓVIL ========================================================= */ @media (max-width: 767px) { body.page-category #wrapper { padding-top: 18px !important; padding-bottom: 45px !important; } /* Productos */ body.page-category #js-product-list .products { margin-left: -5px !important; margin-right: -5px !important; } body.page-category #js-product-list .js-product-miniature-wrapper { padding-left: 5px !important; padding-right: 5px !important; margin-bottom: 10px !important; } body.page-category .product-miniature .thumbnail-container { height: 165px !important; min-height: 165px !important; padding: 10px !important; } body.page-category .product-miniature .product-description { min-height: 91px !important; padding: 10px 36px 11px 10px !important; } body.page-category .product-miniature .product-title { min-height: 30px !important; margin-bottom: 7px !important; } body.page-category .product-miniature .product-title a { font-size: 9px !important; } body.page-category .product-miniature .product-price { font-size: 10px !important; } /* Nuevo */ body.page-category .product-flags { top: 7px !important; left: 7px !important; } /* Favorito */ body.page-category .product-functional-buttons { top: 7px !important; right: 7px !important; } /* Carrito */ body.page-category .product-miniature .product-add-cart { right: 8px !important; bottom: 10px !important; } /* Barra superior */ body.page-category #js-product-list-top .showing { display: none !important; } } /* ========================================================= 22. MÓVIL PEQUEÑO ========================================================= */ @media (max-width: 480px) { body.page-category .product-miniature .thumbnail-container { height: 145px !important; min-height: 145px !important; } } /* ========================================================== ESTILO STORE UNIFICACIÓN VISUAL DE TODAS LAS PÁGINAS DE "MI CUENTA" APLICA A: - Información - Direcciones - Historial - Facturas - Wishlist - Datos personales - Mis alertas - Mis puntos - Otros módulos internos NO MODIFICA: - Header - Footer ========================================================== */ /* ========================================================== 1. VARIABLES GENERALES ========================================================== */ #wrapper { --account-purple-dark: #2d0034; --account-purple: #a91db9; --account-purple-hover: #8e159d; --account-lilac: #efd9ff; --account-lilac-light: #f8efff; --account-text: #210626; --account-text-secondary: #756b7c; --account-border: #e8e2ec; --account-bg: #fbf9fc; --account-white: #ffffff; --account-shadow: 0 5px 18px rgba(45, 0, 52, 0.06), 0 1px 4px rgba(45, 0, 52, 0.04); } /* ========================================================== 2. ÁREA GENERAL ========================================================== */ #wrapper:has(.my-account-side-links) { background: var(--account-bg) !important; padding-bottom: 65px !important; } /* ========================================================== 3. CONTENEDOR PRINCIPAL ========================================================== */ #wrapper:has(.my-account-side-links) #inner-wrapper { width: 100% !important; max-width: 1125px !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================== 4. QUITAR ESTILOS ANTIGUOS DEL CONTENEDOR CORRECCIÓN: - Elimina el borde gris exterior - Elimina fondos heredados del tema - Mantiene únicamente la tarjeta derecha ========================================================== */ #wrapper:has(.my-account-side-links) #content-wrapper, #wrapper:has(.my-account-side-links) #main, #wrapper:has(.my-account-side-links) #content, #wrapper:has(.my-account-side-links) .my-account-page-content-wrapper { background: transparent !important; border: 0 !important; border-width: 0 !important; border-color: transparent !important; outline: 0 !important; box-shadow: none !important; } /* Elimina específicamente cualquier marco exterior generado por el tema Warehouse / Bootstrap */ #wrapper:has(.my-account-side-links) #content.page-content { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; /* Evita que el contenedor exterior genere espacio extra alrededor del grid */ padding: 0 !important; } /* Mantiene el wrapper principal limpio */ #wrapper:has(.my-account-side-links) .my-account-page-content-wrapper { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; } /* ========================================================== 5. CABECERA "SU CUENTA" Misma identidad visual en TODAS las páginas internas. ========================================================== */ #wrapper:has(.my-account-side-links) #main > .page-header { position: relative !important; overflow: hidden !important; min-height: 96px !important; display: flex !important; align-items: center !important; padding: 28px 32px !important; margin: 0 0 28px !important; background: linear-gradient( 110deg, #f1ddff 0%, #f5e7ff 50%, #fbf3ff 100% ) !important; border: 0 !important; border-radius: 18px !important; box-shadow: none !important; } #wrapper:has(.my-account-side-links) #main > .page-header::after { content: ""; position: absolute; width: 180px; height: 180px; top: -100px; right: 8%; border-radius: 50%; background: rgba(169, 29, 185, 0.08); pointer-events: none; } /* Título "Su cuenta" */ #wrapper:has(.my-account-side-links) #main > .page-header .page-title { position: relative; z-index: 2; margin: 0 !important; padding: 0 !important; border: 0 !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 34px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: -0.4px !important; text-transform: uppercase !important; color: var(--account-purple-dark) !important; } /* ========================================================== 6. CONTENEDOR GENERAL DE MI CUENTA CORRECCIÓN: - Una sola tarjeta blanca - Menú y contenido forman un único bloque - Un solo borde - Una sola sombra - Un solo border-radius ========================================================== */ #wrapper .my-account-page-content-wrapper > .row, #wrapper #content > .row:has(.my-account-side-links) { display: grid !important; /* Se mantienen las dos áreas internas, pero visualmente forman UNA SOLA TARJETA */ grid-template-columns: 290px minmax(0, 1fr) !important; /* Eliminamos el espacio entre ambas tarjetas */ column-gap: 0 !important; row-gap: 0 !important; width: 100% !important; margin: 0 !important; /* Padding exterior de la tarjeta completa */ padding: 12px !important; /* UNA SOLA TARJETA */ background: #ffffff !important; border: 1px solid var(--account-border) !important; border-radius: 16px !important; box-shadow: var(--account-shadow) !important; align-items: stretch !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================== 7. MENÚ LATERAL Ahora forma parte de la tarjeta principal. Ya NO tiene fondo, borde ni sombra propios. ========================================================== */ #wrapper .my-account-side-links { width: 100% !important; max-width: 100% !important; padding: 4px 18px 4px 4px !important; margin: 0 !important; /* Ya pertenece al fondo blanco general */ background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; gap: 9px !important; align-self: stretch !important; box-sizing: border-box !important; /* Separador interno entre menú y formulario */ border-right: 1px solid var(--account-border) !important; } /* ========================================================== 8. LINKS DEL MENÚ ========================================================== */ #wrapper .my-account-side-links > a { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; text-decoration: none !important; box-sizing: border-box !important; transition: transform 0.2s ease !important; } /* ========================================================== 9. TARJETAS DEL MENÚ ========================================================== */ #wrapper .my-account-side-links > a .link-item { width: 100% !important; min-height: 54px !important; display: flex !important; align-items: center !important; padding: 13px 16px !important; background: var(--account-lilac) !important; border: 1px solid transparent !important; border-radius: 12px !important; box-shadow: none !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--account-purple-dark) !important; box-sizing: border-box !important; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; } /* ========================================================== 10. ICONOS DEL MENÚ ========================================================== */ #wrapper .my-account-side-links .link-item i { width: 31px !important; height: 31px !important; flex: 0 0 31px !important; margin-right: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(169, 29, 185, 0.10) !important; border-radius: 8px !important; color: var(--account-purple) !important; font-size: 14px !important; } /* Icono especial "Mis puntos" */ #wrapper .my-account-side-links #myprestaloyalty-account-link .link-item > span:first-child { width: 31px !important; height: 31px !important; flex: 0 0 31px !important; margin-right: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(169, 29, 185, 0.10) !important; border-radius: 8px !important; color: var(--account-purple) !important; font-size: 11px !important; } /* ========================================================== 11. HOVER MENÚ ========================================================== */ #wrapper .my-account-side-links > a:hover { transform: translateX(3px) !important; } #wrapper .my-account-side-links > a:hover .link-item { background: var(--account-purple) !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(169, 29, 185, 0.17) !important; } #wrapper .my-account-side-links > a:hover .link-item i { background: rgba(255, 255, 255, 0.17) !important; color: #ffffff !important; } #wrapper .my-account-side-links #myprestaloyalty-account-link:hover .link-item > span:first-child { background: rgba(255, 255, 255, 0.17) !important; color: #ffffff !important; } /* ========================================================== 12. CERRAR SESIÓN ========================================================== */ #wrapper .my-account-side-links > a:last-child { margin-top: 5px !important; } #wrapper .my-account-side-links > a:last-child .link-item { background: #ffffff !important; border-color: var(--account-border) !important; color: #6e586f !important; } #wrapper .my-account-side-links > a:last-child:hover .link-item { background: var(--account-purple-dark) !important; border-color: var(--account-purple-dark) !important; color: #ffffff !important; } /* ========================================================== 13. CONTENIDO DERECHO Ahora pertenece al mismo contenedor blanco que el menú izquierdo. ========================================================== */ #wrapper .my-account-page-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 360px !important; /* Espacio interno del formulario */ padding: 22px 30px 28px 30px !important; margin: 0 !important; /* El fondo lo controla la tarjeta principal */ background: transparent !important; /* Eliminamos la segunda tarjeta */ border: none !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; line-height: 1.65 !important; color: var(--account-text-secondary) !important; box-sizing: border-box !important; } /* ========================================================== 14. TÍTULOS DEL CONTENIDO "Mis alertas", "Sus datos personales", etc. ========================================================== */ #wrapper .my-account-page-content h1, #wrapper .my-account-page-content h2, #wrapper .my-account-page-content h3, #wrapper .my-account-page-content h4 { margin-top: 0 !important; font-family: "Barlow Condensed", sans-serif !important; font-weight: 700 !important; color: var(--account-purple-dark) !important; } #wrapper .my-account-page-content h1 { font-size: 29px !important; line-height: 1.05 !important; } #wrapper .my-account-page-content h2 { font-size: 27px !important; line-height: 1.1 !important; } #wrapper .my-account-page-content h3 { font-size: 21px !important; } /* ========================================================== 15. PÁGINA "MIS ALERTAS" Corrige específicamente el diseño que se observa en las capturas. ========================================================== */ #wrapper .my-account-page-content .alert { margin-top: 15px !important; margin-bottom: 18px !important; padding: 15px 18px !important; border-radius: 10px !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; line-height: 1.5 !important; box-shadow: none !important; } /* Mensaje vacío / advertencia */ #wrapper .my-account-page-content .alert-warning { background: #f8efff !important; border: 1px solid #ead1ff !important; color: var(--account-purple-dark) !important; } /* Información */ #wrapper .my-account-page-content .alert-info { background: #f5e8ff !important; border: 1px solid #e5c9fb !important; color: var(--account-purple-dark) !important; } /* Éxito */ #wrapper .my-account-page-content .alert-success { background: #f2fff7 !important; border: 1px solid #ccebd8 !important; color: #31724b !important; } /* Error */ #wrapper .my-account-page-content .alert-danger { background: #fff4f6 !important; border: 1px solid #f1ccd4 !important; color: #8d3045 !important; } /* ========================================================== 16. TEXTOS ========================================================== */ #wrapper .my-account-page-content p, #wrapper .my-account-page-content span, #wrapper .my-account-page-content li { font-family: "Inter", sans-serif !important; } /* ========================================================== 17. FORMULARIOS ========================================================== */ #wrapper .my-account-page-content label { font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; color: var(--account-purple-dark) !important; } #wrapper .my-account-page-content input.form-control, #wrapper .my-account-page-content select.form-control, #wrapper .my-account-page-content textarea.form-control { min-height: 46px !important; padding: 10px 14px !important; background: #fcfbfd !important; border: 1px solid #e7e1e9 !important; border-radius: 9px !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; color: var(--account-text) !important; box-shadow: none !important; } /* Focus */ #wrapper .my-account-page-content .form-control:focus { background: #ffffff !important; border-color: var(--account-purple) !important; box-shadow: 0 0 0 3px rgba(169, 29, 185, 0.10) !important; outline: none !important; } /* ========================================================== 18. BOTONES DISEÑO: - Tamaño Medium - Border radius: 100px - Tipografía: 18px - Peso: 500 - Inter - Morado corporativo ========================================================== */ /* ========================================================== BOTÓN PRINCIPAL ========================================================== */ #wrapper .my-account-page-content .btn-primary, #wrapper .my-account-page-content button[type="submit"], #wrapper .my-account-page-content input[type="submit"] { /* Tamaño Medium */ min-height: 50px !important; padding: 12px 28px !important; /* Color */ background: var(--account-purple) !important; background-color: var(--account-purple) !important; /* Borde */ border: 1px solid var(--account-purple) !important; /* Borde totalmente redondeado */ border-radius: 100px !important; /* Tipografía */ font-family: "Inter", sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: #ffffff !important; /* Evita estilos heredados */ text-transform: none !important; text-decoration: none !important; box-shadow: none !important; /* Centrado */ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; /* Animación */ transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } /* ========================================================== HOVER ========================================================== */ #wrapper .my-account-page-content .btn-primary:hover, #wrapper .my-account-page-content button[type="submit"]:hover, #wrapper .my-account-page-content input[type="submit"]:hover { background: var(--account-purple-hover) !important; background-color: var(--account-purple-hover) !important; border-color: var(--account-purple-hover) !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 7px 16px rgba(169, 29, 185, 0.18) !important; } /* ========================================================== ACTIVE ========================================================== */ #wrapper .my-account-page-content .btn-primary:active, #wrapper .my-account-page-content button[type="submit"]:active, #wrapper .my-account-page-content input[type="submit"]:active { transform: translateY(0) !important; box-shadow: none !important; } /* ========================================================== FOCUS ========================================================== */ #wrapper .my-account-page-content .btn-primary:focus, #wrapper .my-account-page-content button[type="submit"]:focus, #wrapper .my-account-page-content input[type="submit"]:focus { outline: none !important; box-shadow: 0 0 0 4px rgba(169, 29, 185, 0.14) !important; } /* ========================================================== BOTONES SECUNDARIOS Aplica el mismo formato Medium y pill cuando aparezcan otros botones internos. ========================================================== */ #wrapper .my-account-page-content .btn-secondary { min-height: 50px !important; padding: 12px 28px !important; background: #ffffff !important; border: 1px solid var(--account-purple) !important; border-radius: 100px !important; font-family: "Inter", sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.2 !important; color: var(--account-purple) !important; text-transform: none !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important; } #wrapper .my-account-page-content .btn-secondary:hover { background: var(--account-purple) !important; border-color: var(--account-purple) !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* ========================================================== BOTONES DESHABILITADOS ========================================================== */ #wrapper .my-account-page-content .btn:disabled, #wrapper .my-account-page-content button:disabled, #wrapper .my-account-page-content .btn.disabled { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* ========================================================== 19. TABLAS ========================================================== */ #wrapper .my-account-page-content .table { width: 100% !important; margin-top: 18px !important; background: #ffffff !important; border: 1px solid var(--account-border) !important; border-radius: 12px !important; overflow: hidden !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; } #wrapper .my-account-page-content .table thead th { padding: 14px !important; background: var(--account-lilac-light) !important; border-color: var(--account-border) !important; color: var(--account-purple-dark) !important; font-weight: 700 !important; } /* ========================================================== 20. RESPONSIVE TABLET ========================================================== */ @media (max-width: 991px) { #wrapper .my-account-page-content-wrapper > .row, #wrapper #content > .row:has(.my-account-side-links) { grid-template-columns: 245px minmax(0, 1fr) !important; column-gap: 26px !important; } #wrapper .my-account-side-links { padding: 10px 12px !important; } #wrapper .my-account-side-links > a .link-item { padding: 11px 13px !important; font-size: 12px !important; } } /* ========================================================== 21. RESPONSIVE MOBILE ========================================================== */ @media (max-width: 767px) { #wrapper .my-account-page-content-wrapper > .row, #wrapper #content > .row:has(.my-account-side-links) { display: flex !important; flex-direction: column !important; gap: 20px !important; } #wrapper .my-account-side-links { padding: 8px 5px 12px !important; gap: 8px !important; } #wrapper .my-account-side-links > a:hover { transform: none !important; } #wrapper .my-account-page-content { width: 100% !important; min-height: auto !important; padding: 20px 18px !important; border-radius: 13px !important; } #wrapper:has(.my-account-side-links) #main > .page-header { min-height: auto !important; padding: 22px 20px !important; margin-bottom: 20px !important; border-radius: 14px !important; } #wrapper:has(.my-account-side-links) #main > .page-header .page-title { font-size: 29px !important; } } /* ========================================================== 22. MOBILE PEQUEÑO ========================================================== */ @media (max-width: 480px) { #wrapper .my-account-page-content { padding: 18px 15px !important; } #wrapper .my-account-side-links > a .link-item { font-size: 11.5px !important; } } /* ========================================================== ESTILO STORE RESULTADOS DE BÚSQUEDA / LISTADO DE PRODUCTOS Inspirado en la captura 2 IMPORTANTE: - NO modifica el HEADER. - NO modifica el FOOTER. - Se concentra en #wrapper y el panel lateral. ========================================================== */ /* ========================================================== 01. VARIABLES GENERALES ========================================================== */ .page-search { --es-purple: #b21ac1; --es-purple-dark: #8f129d; --es-purple-soft: #f8ecfa; --es-text: #342d3c; --es-text-secondary: #77717d; --es-border: #eeeeF2; --es-background: #faf9fc; --es-white: #ffffff; --es-radius-card: 16px; --es-radius-button: 100px; --es-shadow: 0 8px 24px rgba(71, 26, 77, 0.06); --es-shadow-hover: 0 12px 32px rgba(71, 26, 77, 0.11); } /* ========================================================== 02. CONTENIDO GENERAL Solo afecta la sección debajo del header ========================================================== */ .page-search #wrapper { background: var(--es-background); padding-top: 36px; padding-bottom: 70px; font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif; color: var(--es-text); } /* ancho similar a la captura 2 */ .page-search #wrapper > .container, .page-search #inner-wrapper { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; } /* ========================================================== 03. BREADCRUMB En el diseño de referencia prácticamente no tiene peso. ========================================================== */ .page-search .breadcrumb { display: none !important; } /* ========================================================== 04. TÍTULO ========================================================== */ .page-search #js-product-list-header, .page-search .page-title { margin: 0 0 24px !important; padding: 0 !important; border: 0 !important; color: var(--es-text) !important; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; } /* ========================================================== 05. BARRA SUPERIOR DEL LISTADO ========================================================== */ .page-search #js-product-list-top.products-selection { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .page-search #js-product-list-top > .row { min-height: 42px; margin-left: 0 !important; margin-right: 0 !important; display: flex; align-items: center; gap: 12px; } /* elimina el selector grid/list para acercarnos a la referencia */ .page-search .view-switcher { display: none !important; } /* texto "Mostrando..." */ .page-search .products-selection .showing { color: var(--es-text-secondary) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; } /* ========================================================== 06. ORDEN POR RELEVANCIA ========================================================== */ .page-search .products-sort-order { margin-left: auto !important; } .page-search .products-sort-order .select-title { min-width: 145px; min-height: 40px; padding: 9px 14px !important; display: flex !important; align-items: center; justify-content: space-between; gap: 10px; background: var(--es-white) !important; border: 1px solid #e7e4e9 !important; border-radius: 10px !important; color: var(--es-text) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; transition: border-color .2s ease, box-shadow .2s ease; } .page-search .products-sort-order .select-title:hover { border-color: var(--es-purple) !important; } .page-search .products-sort-order .select-title:focus { border-color: var(--es-purple) !important; box-shadow: 0 0 0 3px rgba(178, 26, 193, .10) !important; } .page-search .products-sort-order .select-title-name { color: var(--es-text) !important; } /* flecha */ .page-search .products-sort-order .select-title i { color: var(--es-purple) !important; font-size: 13px; } /* Dropdown */ .page-search .products-sort-order .dropdown-menu, .page-search .products-nb-per-page .dropdown-menu { min-width: 200px; margin-top: 6px !important; padding: 7px !important; border: 1px solid var(--es-border) !important; border-radius: 12px !important; background: var(--es-white) !important; box-shadow: 0 12px 30px rgba(49, 21, 54, .10) !important; } /* IMPORTANTE: Este selector aplica el estilo a TODOS los links internos del desplegable, no únicamente a Relevancia. */ .page-search .products-sort-order .dropdown-item, .page-search .products-nb-per-page .dropdown-item { padding: 10px 12px !important; border-radius: 8px !important; color: var(--es-text) !important; font-size: 13px !important; font-weight: 400 !important; background: transparent !important; transition: color .2s ease, background-color .2s ease; } .page-search .products-sort-order .dropdown-item:hover, .page-search .products-nb-per-page .dropdown-item:hover { color: var(--es-purple) !important; background: var(--es-purple-soft) !important; } .page-search .products-sort-order .dropdown-item.current, .page-search .products-nb-per-page .dropdown-item.current { color: var(--es-purple) !important; background: var(--es-purple-soft) !important; font-weight: 600 !important; } /* ========================================================== 07. CANTIDAD DE PRODUCTOS POR PÁGINA La captura 2 no muestra este selector. Lo ocultamos para limpiar la interfaz. ========================================================== */ .page-search .products-nb-per-page { display: none !important; } /* ========================================================== 08. GRID DE PRODUCTOS ========================================================== */ .page-search #js-product-list .products { display: flex !important; flex-wrap: wrap !important; margin-left: -10px !important; margin-right: -10px !important; } /* 3 productos por fila */ .page-search #js-product-list .js-product-miniature-wrapper { flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: 33.333333% !important; padding: 10px !important; margin: 0 !important; } /* ========================================================== 09. TARJETA DEL PRODUCTO ========================================================== */ .page-search #js-product-list .product-miniature { position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; background: var(--es-white) !important; border: 0 !important; border-radius: var(--es-radius-card) !important; overflow: hidden !important; box-shadow: var(--es-shadow) !important; transition: transform .25s ease, box-shadow .25s ease !important; } .page-search #js-product-list .product-miniature:hover { transform: translateY(-3px); box-shadow: var(--es-shadow-hover) !important; } /* ========================================================== 10. CONTENEDOR DE IMAGEN ========================================================== */ .page-search .product-miniature .thumbnail-container { position: relative !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #f4f3f5 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; } /* enlace de imagen */ .page-search .product-miniature .product-thumbnail { position: relative; width: 100%; aspect-ratio: 1 / 1; display: block; margin: 0 !important; overflow: hidden; background: #f3f2f4; } /* imagen */ .page-search .product-miniature .product-thumbnail img { width: 100% !important; height: 100% !important; max-width: none !important; display: block !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; transition: transform .35s ease; } .page-search .product-miniature:hover .product-thumbnail img { transform: scale(1.025); } /* ========================================================== 11. ETIQUETA "NUEVO" ========================================================== */ .page-search .product-miniature .product-flags { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 5 !important; margin: 0 !important; padding: 0 !important; } .page-search .product-miniature .product-flag, .page-search .product-miniature .product-flag.new { position: static !important; display: inline-flex !important; align-items: center !important; min-height: 24px; padding: 4px 10px !important; border: 0 !important; border-radius: 100px !important; background: var(--es-purple) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1 !important; text-transform: none !important; box-shadow: none !important; } /* ========================================================== 12. FAVORITOS ========================================================== */ /* bloque de acciones colocado arriba a la derecha */ .page-search .product-miniature .product-functional-buttons { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 6 !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .page-search .product-miniature .product-functional-buttons-links { display: flex !important; } /* ocultar comparar y vista rápida */ .page-search .product-miniature .btn-iqitcompare-add, .page-search .product-miniature .js-quick-view-iqit { display: none !important; } /* botón corazón */ .page-search .product-miniature .btn-iqitwishlist-add { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #e3e1e5 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .95) !important; color: #8e8991 !important; box-shadow: 0 3px 10px rgba(0, 0, 0, .05) !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } .page-search .product-miniature .btn-iqitwishlist-add:hover { color: var(--es-purple) !important; border-color: var(--es-purple) !important; background: #ffffff !important; } /* Evita que aparezcan dos corazones simultáneamente */ .page-search .btn-iqitwishlist-add .added { display: none !important; } .page-search .btn-iqitwishlist-add.added .not-added { display: none !important; } .page-search .btn-iqitwishlist-add.added .added { display: inline-block !important; } /* ========================================================== 13. INFORMACIÓN DEL PRODUCTO ========================================================== */ .page-search .product-miniature .product-description { position: relative !important; flex: 1 1 auto !important; min-height: 148px; padding: 16px 52px 17px 16px !important; display: flex !important; flex-direction: column !important; text-align: left !important; background: #ffffff !important; border: 0 !important; min-height:auto; } /* categoría */ .page-search .product-miniature .product-category-name { margin: 0 0 5px !important; color: #85808a !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.35 !important; text-transform: none !important; } /* ========================================================== 14. NOMBRE PRODUCTO ========================================================== */ .page-search .product-miniature .product-title { margin: 0 0 8px !important; padding: 0 !important; min-height: 0 !important; line-height: 1.35 !important; text-align: left !important; } .page-search .product-miniature .product-title a { color: var(--es-text) !important; font-family: "Inter", "Roboto", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-transform: none !important; transition: color .2s ease; } .page-search .product-miniature .product-title a:hover { color: var(--es-purple) !important; } /* ========================================================== 15. MARCA Y DESCRIPCIÓN CORTA La referencia es más limpia, por lo tanto estos elementos pueden ocultarse. ========================================================== */ .page-search .product-miniature .product-brand, .page-search .product-miniature .product-description-short { display: none !important; } /* ========================================================== 16. ESTRELLAS / RESEÑAS Se estilizan en caso de que el producto tenga reseñas. ========================================================== */ .page-search .product-miniature .product-list-reviews, .page-search .product-miniature .iqitreviews-simple { margin: 0 0 9px !important; color: #ffc400 !important; font-size: 11px !important; text-align: left !important; } .page-search .product-miniature .product-list-reviews .grade-stars { color: #ffc400 !important; } /* ========================================================== 17. PRECIO ========================================================== */ .page-search .product-miniature .product-price-and-shipping { margin-top: auto !important; padding-top: 8px !important; text-align: left !important; color: var(--es-purple) !important; } .page-search .product-miniature .product-price, .page-search .product-miniature .price { color: var(--es-purple) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; } /* precio anterior si existe */ .page-search .product-miniature .regular-price { margin-right: 6px; color: #9d98a0 !important; font-size: 12px !important; font-weight: 400 !important; text-decoration: line-through !important; } /* ========================================================== 18. BOTÓN AÑADIR AL CARRITO Convertido en botón circular como captura 2 ========================================================== */ .page-search .product-miniature .product-add-cart { position: absolute !important; right: 14px !important; bottom: 14px !important; z-index: 5; } .page-search .product-miniature .input-group-add-cart { display: block !important; } /* ocultar selector de cantidad */ .page-search .product-miniature .input-group-add-cart .input-qty { display: none !important; } /* botón */ .page-search .product-miniature .btn-product-list.add-to-cart { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 50% !important; background: var(--es-purple) !important; color: #ffffff !important; font-size: 0 !important; box-shadow: none !important; transition: background-color .2s ease, transform .2s ease !important; } .page-search .product-miniature .btn-product-list.add-to-cart:hover { background: var(--es-purple-dark) !important; transform: translateY(-2px); } /* icono del carrito */ .page-search .product-miniature .btn-product-list.add-to-cart .bag-icon { display: inline-block !important; margin: 0 !important; color: #ffffff !important; font-size: 15px !important; line-height: 1 !important; } /* spinner */ .page-search .product-miniature .btn-product-list.add-to-cart .spinner-icon { font-size: 15px !important; } /* ========================================================== 19. PAGINACIÓN ========================================================== */ .page-search .pagination { width: 100%; margin: 35px 0 0 !important; display: flex !important; align-items: center; justify-content: center; border: 0 !important; } /* enlaces internos de paginación */ .page-search .pagination a, .page-search .pagination .page-link { min-width: 40px; height: 40px; margin: 0 4px !important; padding: 0 13px !important; display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid #d5a4db !important; border-radius: 100px !important; background: #ffffff !important; color: var(--es-purple) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease !important; } .page-search .pagination a:hover, .page-search .pagination .page-link:hover { color: #ffffff !important; background: var(--es-purple) !important; border-color: var(--es-purple) !important; } /* página actual */ .page-search .pagination .current a, .page-search .pagination .active .page-link, .page-search .pagination .current { color: #ffffff !important; background: var(--es-purple) !important; border-color: var(--es-purple) !important; } /* ========================================================== 20. PANEL IZQUIERDO MISMO ESTILO PARA TODOS LOS LINKS INTERNOS Esta parte NO depende únicamente de .page-search para que el diseño pueda mantenerse en categorías/filtros. ========================================================== */ #left-column { font-family: "Inter", "Roboto", Arial, sans-serif; } /* bloques */ #left-column .block, #left-column #search_filters, #left-column .block-categories { margin-bottom: 18px !important; padding: 20px !important; background: #ffffff !important; border: 1px solid #efedf1 !important; border-radius: 14px !important; box-shadow: none !important; } /* títulos */ #left-column .block-title, #left-column .facet-title, #left-column .h6 { margin: 0 0 13px !important; color: #342d3c !important; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif !important; font-size: 17px !important; font-weight: 600 !important; text-transform: uppercase !important; } /* ========================================================== TODOS LOS LINKS INTERNOS DEL PANEL IZQUIERDO ========================================================== */ #left-column .block a, #left-column .facet-label a, #left-column .category-sub-menu a, #left-column .category-top-menu a, #left-column .collapse-icons + a, #left-column li a { color: #4e4852 !important; font-family: "Inter", "Roboto", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; text-decoration: none !important; transition: color .2s ease, background-color .2s ease !important; } /* hover para TODOS */ #left-column .block a:hover, #left-column .facet-label a:hover, #left-column .category-sub-menu a:hover, #left-column .category-top-menu a:hover, #left-column li a:hover { color: var(--es-purple, #b21ac1) !important; } /* link seleccionado */ #left-column .current a, #left-column .active a, #left-column a.current, #left-column a.active, #left-column .facet-label.active a { color: var(--es-purple, #b21ac1) !important; font-weight: 600 !important; } /* elementos de filtros */ #left-column .facet-label { margin: 3px 0 !important; } /* checkbox */ #left-column input[type="checkbox"] { accent-color: var(--es-purple, #b21ac1); } /* contador de filtros */ #left-column .magnitude { color: #98929b !important; font-size: 11px !important; } /* ========================================================== 21. FOCUS Accesibilidad manteniendo el color de marca ========================================================== */ .page-search #wrapper a:focus-visible, #left-column a:focus-visible { outline: 2px solid var(--es-purple, #b21ac1) !important; outline-offset: 2px !important; } /* ========================================================== 22. RESPONSIVE ========================================================== */ @media (max-width: 1199px) { .page-search #js-product-list .js-product-miniature-wrapper { flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: 33.333333% !important; } } @media (max-width: 991px) { .page-search #wrapper { padding-top: 26px; padding-bottom: 55px; } .page-search #js-product-list .js-product-miniature-wrapper { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; } .page-search #js-product-list-top > .row { gap: 10px; } .page-search .products-sort-order { margin-left: auto !important; } } @media (max-width: 575px) { .page-search #wrapper { padding-top: 20px; padding-bottom: 40px; } .page-search #inner-wrapper { padding-left: 14px; padding-right: 14px; } .page-search #js-product-list .products { margin-left: -6px !important; margin-right: -6px !important; } .page-search #js-product-list .js-product-miniature-wrapper { padding: 6px !important; } .page-search .product-miniature .product-description { min-height: 140px; padding: 13px 47px 14px 13px !important; } .page-search .product-miniature .product-title a { font-size: 13px !important; } .page-search .product-miniature .product-price, .page-search .product-miniature .price { font-size: 14px !important; } .page-search .product-miniature .btn-product-list.add-to-cart { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; } .page-search .product-miniature .product-add-cart { right: 11px !important; bottom: 12px !important; } .page-search .product-miniature .btn-iqitwishlist-add { width: 34px !important; height: 34px !important; } } /* ========================================================== ESTILO STORE REDISEÑO CARRITO ---------------------------------------------------------- IMPORTANTE: Todo está limitado a body#cart, por lo tanto NO modifica el header ni otras páginas. ========================================================== */ /* ========================================================== 1. VARIABLES DE DISEÑO ========================================================== */ body#cart { --es-purple: #A91DB9; --es-purple-hover: #8D159C; --es-purple-dark: #3A063F; --es-purple-soft: #F8EEFF; --es-purple-soft-2: #F3E5FA; --es-text: #23172A; --es-text-soft: #74687A; --es-border: #EADDF0; --es-white: #FFFFFF; --es-radius: 16px; --es-radius-small: 10px; --es-shadow: 0 8px 30px rgba(71, 22, 80, 0.07); } /* ========================================================== 2. FONDO GENERAL No afecta header ni footer ========================================================== */ body#cart #wrapper { background: #FAF8FC !important; padding-top: 45px; padding-bottom: 70px; } /* ========================================================== 3. CONTENEDOR PRINCIPAL ========================================================== */ body#cart #wrapper > .container { max-width: 1200px; } /* ========================================================== 4. TIPOGRAFÍA GENERAL DEL CARRITO ========================================================== */ body#cart #main, body#cart #main p, body#cart #main span, body#cart #main a, body#cart #main button, body#cart #main div { font-family: "Inter", sans-serif; } /* ========================================================== 5. TÍTULO "CARRITO" ========================================================== */ body#cart #main .page-title, body#cart #main h1.page-title { border: 0 !important; margin: 0 0 28px !important; padding: 0 !important; } body#cart #main .page-title span { font-family: "Barlow Condensed", sans-serif !important; font-size: 34px !important; line-height: 1.05; font-weight: 700 !important; color: var(--es-purple-dark) !important; text-transform: uppercase; letter-spacing: -0.3px; } /* Pequeño detalle debajo del título */ body#cart #main .page-title::after { content: ""; display: block; width: 46px; height: 4px; margin-top: 10px; border-radius: 100px; background: var(--es-purple); } /* ========================================================== 6. ESTRUCTURA DE LAS DOS COLUMNAS ========================================================== */ body#cart .cart-grid { margin-left: -10px !important; margin-right: -10px !important; align-items: flex-start; } body#cart .cart-grid-body, body#cart .cart-grid-right { padding-left: 10px !important; padding-right: 10px !important; } /* ========================================================== 7. BLOQUE IZQUIERDO DEL CARRITO ========================================================== */ body#cart .cart-grid-body { background: transparent !important; } body#cart .cart-container { background: var(--es-white); border: 1px solid var(--es-border); border-radius: var(--es-radius); padding: 24px; box-shadow: var(--es-shadow); } /* ========================================================== 8. ALERTA "NO HAY MÁS ARTÍCULOS..." ========================================================== */ body#cart .cart-overview .alert, body#cart .cart-overview .alert-warning { margin: 0 !important; padding: 16px 18px !important; background: var(--es-purple-soft) !important; border: 1px solid #E8CDEE !important; border-left: 4px solid var(--es-purple) !important; border-radius: 10px !important; color: var(--es-purple-dark) !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; line-height: 1.5; font-weight: 500; } /* ========================================================== 9. BLOQUE ESTILO POINTS ========================================================== */ body#cart #loylalty_cart_parent { margin-top: 18px !important; } body#cart #loyalty_cart { min-height: 90px; display: flex !important; align-items: center; justify-content: center; gap: 14px; margin: 0 !important; padding: 20px 24px !important; background: linear-gradient( 135deg, #FCF8FF 0%, #F7ECFD 100% ) !important; border: 1px solid var(--es-border) !important; border-radius: 12px !important; color: var(--es-text-soft) !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; line-height: 1.5; text-align: center; } /* Icono regalo */ body#cart #loyalty_cart .myprestaloyalty-gift-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 46px; background: #FFFFFF; border-radius: 50%; font-size: 25px; box-shadow: 0 4px 14px rgba(169, 29, 185, 0.12); } /* ========================================================== 10. TARJETA DEL RESUMEN ========================================================== */ body#cart .cart-grid-right .cart-summary { overflow: hidden; background: var(--es-white) !important; border: 1px solid var(--es-border) !important; border-radius: var(--es-radius) !important; box-shadow: var(--es-shadow) !important; } /* Eliminar bordes antiguos internos */ body#cart .cart-summary hr { margin: 0 !important; border: 0 !important; border-top: 1px solid #F0E7F3 !important; } /* ========================================================== 11. SUBTOTALES ========================================================== */ body#cart .cart-detailed-subtotals { padding: 22px 22px 18px !important; } body#cart .cart-summary-line { display: flex; justify-content: space-between; align-items: center; font-family: "Inter", sans-serif; } body#cart .cart-summary-line .label { color: var(--es-text-soft) !important; font-size: 13px !important; font-weight: 500 !important; } body#cart .cart-summary-line .value { color: var(--es-text) !important; font-size: 13px !important; font-weight: 600 !important; } /* ========================================================== 12. TOTAL ========================================================== */ body#cart .cart-summary-totals { padding: 18px 22px !important; background: #FCF9FD; } body#cart .cart-summary-line.cart-total { align-items: center; } body#cart .cart-summary-line.cart-total .label { font-family: "Barlow Condensed", sans-serif !important; font-size: 20px !important; line-height: 1.2; font-weight: 700 !important; text-transform: uppercase; color: var(--es-purple-dark) !important; } body#cart .cart-summary-line.cart-total .value { font-family: "Barlow Condensed", sans-serif !important; font-size: 23px !important; font-weight: 700 !important; color: var(--es-purple) !important; } /* ========================================================== 13. ÁREA DEL BOTÓN CHECKOUT ========================================================== */ body#cart .cart-summary .checkout { padding: 20px 22px 22px !important; background: #FFFFFF; text-align: left !important; } /* ========================================================== 14. BOTONES GENERALES DEL CARRITO ========================================================== */ body#cart #main .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px !important; border-radius: 100px !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; line-height: 1 !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } /* ========================================================== 15. BOTÓN PRINCIPAL Tramitar pedido ========================================================== */ body#cart #main .btn-primary { background: var(--es-purple) !important; border: 1px solid var(--es-purple) !important; color: #FFFFFF !important; } body#cart #main .btn-primary:not(:disabled):not(.disabled):hover { background: var(--es-purple-hover) !important; border-color: var(--es-purple-hover) !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(169, 29, 185, 0.22) !important; } /* Botón deshabilitado */ body#cart #main .btn-primary.disabled, body#cart #main .btn-primary:disabled { opacity: 1 !important; background: #E8D5EA !important; border-color: #E8D5EA !important; color: #A08AA4 !important; cursor: not-allowed; } /* ========================================================== 16. BOTÓN SECUNDARIO Continuar comprando ========================================================== */ body#cart #main .btn-secondary { margin-top: 20px; background: transparent !important; border: 1px solid var(--es-purple) !important; color: var(--es-purple) !important; } body#cart #main .btn-secondary:hover { background: var(--es-purple) !important; border-color: var(--es-purple) !important; color: #FFFFFF !important; transform: translateY(-1px); } body#cart #main .btn-secondary i { margin-right: 4px; } /* ========================================================== 17. SI EL CARRITO TIENE PRODUCTOS ========================================================== */ body#cart .cart-item { padding: 20px 0 !important; border-bottom: 1px solid #EFE5F1 !important; } body#cart .cart-item:last-child { border-bottom: 0 !important; } body#cart .product-line-info a, body#cart .product-line-info .label { color: var(--es-text) !important; } body#cart .product-line-info a:hover { color: var(--es-purple) !important; } /* Precios */ body#cart .product-price, body#cart .current-price, body#cart .product-line-info .price { color: var(--es-purple-dark) !important; font-weight: 700 !important; } /* Cantidad */ body#cart .bootstrap-touchspin input, body#cart input.js-cart-line-product-quantity { border: 1px solid var(--es-border) !important; border-radius: 8px !important; font-family: "Inter", sans-serif !important; box-shadow: none !important; } /* Eliminar producto */ body#cart .remove-from-cart { color: #9D8EA2 !important; transition: color .2s ease; } body#cart .remove-from-cart:hover { color: var(--es-purple) !important; } /* ========================================================== 18. LINKS DEL CONTENIDO ========================================================== */ body#cart #main a:not(.btn) { transition: color .2s ease; } body#cart #main a:not(.btn):hover { color: var(--es-purple); } /* ========================================================== 19. RESPONSIVE TABLET ========================================================== */ @media (max-width: 991px) { body#cart #wrapper { padding-top: 32px; padding-bottom: 50px; } body#cart .cart-grid-right { margin-top: 24px; } body#cart .cart-grid-right .cart-summary { position: relative !important; top: auto !important; } } /* ========================================================== 20. RESPONSIVE MÓVIL ========================================================== */ @media (max-width: 767px) { body#cart #wrapper { padding-top: 25px; padding-bottom: 40px; } body#cart #main .page-title span { font-size: 29px !important; } body#cart .cart-container { padding: 16px; border-radius: 13px; } body#cart .cart-grid-right .cart-summary { border-radius: 13px !important; } body#cart .cart-overview .alert, body#cart .cart-overview .alert-warning { padding: 14px 15px !important; font-size: 12px !important; } body#cart #loyalty_cart { flex-direction: column; padding: 18px !important; font-size: 12px !important; } body#cart #main .btn { min-height: 40px; padding: 10px 18px !important; font-size: 12px !important; } body#cart .cart-summary-line.cart-total .label { font-size: 18px !important; } body#cart .cart-summary-line.cart-total .value { font-size: 21px !important; } } /* ========================================================== 21. MÓVIL PEQUEÑO ========================================================== */ @media (max-width: 480px) { body#cart .cart-grid { margin-left: 0 !important; margin-right: 0 !important; } body#cart .cart-grid-body, body#cart .cart-grid-right { padding-left: 0 !important; padding-right: 0 !important; } body#cart #main .btn-secondary { width: 100%; } body#cart .cart-summary .checkout .btn { width: 100%; } } /* ========================================================== ESTILO STORE - CHECKOUT REDISEÑO BASADO EN LA REFERENCIA DEL CARRITO ========================================================== */ /* * IMPORTANTE: * Todo está limitado a body#checkout y #wrapper. * NO modifica el header. */ body#checkout { --es-dark: #310036; --es-purple: #b51bc1; --es-purple-hover: #9814a5; --es-purple-light: #f8edfb; --es-purple-soft: #fcf6fd; --es-bg: #faf8fc; --es-white: #ffffff; --es-text: #302336; --es-text-soft: #776b7c; --es-muted: #aaa1ad; --es-border: #ece4ef; --es-border-purple: #e7c9ec; --es-radius: 14px; --es-radius-small: 10px; background: var(--es-bg); } /* ========================================================== 1. ÁREA GENERAL ========================================================== */ body#checkout #wrapper { background: var(--es-bg) !important; padding-top: 42px; padding-bottom: 80px; border: 0 !important; box-shadow: none !important; } body#checkout #inner-wrapper.container { max-width: 1180px; width: calc(100% - 40px); margin: 0 auto; padding-left: 0; padding-right: 0; } body#checkout #content-wrapper, body#checkout #main { width: 100%; } /* ========================================================== 2. TIPOGRAFÍA GENERAL ========================================================== */ body#checkout #wrapper, body#checkout #wrapper p, body#checkout #wrapper label, body#checkout #wrapper input, body#checkout #wrapper select, body#checkout #wrapper textarea, body#checkout #wrapper button, body#checkout #wrapper a, body#checkout #wrapper small { font-family: "Inter", sans-serif; } body#checkout #wrapper { color: var(--es-text); font-size: 14px; } /* ========================================================== 3. TÍTULO "CHECKOUT" ========================================================== */ body#checkout #main > .page-title { position: relative; margin: 0 0 34px; padding: 0 0 14px; border: 0 !important; color: var(--es-dark) !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 31px !important; font-weight: 700 !important; line-height: 1 !important; text-transform: uppercase; } body#checkout #main > .page-title span { font-family: "Barlow Condensed", sans-serif !important; color: var(--es-dark) !important; } body#checkout #main > .page-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 46px; height: 4px; background: var(--es-purple); border-radius: 100px; } /* ========================================================== 4. DISTRIBUCIÓN DE LAS COLUMNAS ========================================================== */ body#checkout #main > .row { margin-left: -10px; margin-right: -10px; align-items: flex-start; } body#checkout #main > .row > .col-md-8, body#checkout #main > .row > .col-md-4 { padding-left: 10px; padding-right: 10px; } /* Columna izquierda */ body#checkout #main > .row > .col-md-8 { flex: 0 0 66%; max-width: 66%; } /* Columna derecha */ body#checkout #main > .row > .cart-grid-right { flex: 0 0 34%; max-width: 34%; } /* ========================================================== 5. TARJETAS DEL CHECKOUT DATOS / DIRECCIONES / ENVÍO / PAGO ========================================================== */ body#checkout .checkout-step { position: relative; margin: 0 0 16px !important; padding: 0 !important; background: var(--es-white) !important; border: 1px solid var(--es-border) !important; border-radius: var(--es-radius) !important; box-shadow: 0 8px 25px rgba(49, 0, 54, 0.035) !important; overflow: hidden; } /* ========================================================== 6. CABECERA DE CADA PASO ========================================================== */ body#checkout .checkout-step .step-title { display: flex; align-items: center; min-height: 68px; margin: 0 !important; padding: 20px 22px !important; border: 0 !important; background: transparent !important; color: var(--es-dark) !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.15 !important; text-transform: none; } body#checkout .checkout-step .step-title, body#checkout .checkout-step .step-title * { font-family: "Barlow Condensed", sans-serif; } /* ========================================================== 7. NÚMERO DE CADA PASO ========================================================== */ body#checkout .checkout-step .step-number { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 31px !important; width: 31px !important; min-width: 31px !important; max-width: 31px !important; height: 31px !important; min-height: 31px !important; max-height: 31px !important; margin: 0 12px 0 0 !important; padding: 0 !important; box-sizing: border-box !important; background: var(--es-purple-light); border: 1px solid var(--es-border-purple); border-radius: 50%; color: var(--es-purple); font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; vertical-align: middle !important; position: relative; top: 0; overflow: hidden; } /* ========================================================== 8. PASO ACTUAL ========================================================== */ body#checkout .checkout-step.-current { border-color: #e9d9ed !important; box-shadow: 0 8px 28px rgba(49, 0, 54, 0.055) !important; } body#checkout .checkout-step.-current > .step-title { color: var(--es-dark) !important; } body#checkout .checkout-step.-current .step-number { background: var(--es-purple); border-color: var(--es-purple); color: #ffffff; } /* Línea decorativa del paso actual */ body#checkout .checkout-step.-current::before { content: ""; position: absolute; top: 18px; left: 0; width: 4px; height: 34px; background: var(--es-purple); border-radius: 0 10px 10px 0; } /* ========================================================== 9. PASOS DESHABILITADOS / INACTIVOS ========================================================== */ body#checkout .checkout-step.-unreachable { background: #fdfcfd !important; } body#checkout .checkout-step.-unreachable .step-title { color: #b7afb9 !important; } body#checkout .checkout-step.-unreachable .step-number { background: #f6f3f6; border-color: #eee9ef; color: #bcb4be; } /* ========================================================== 10. CHECK Y BOTÓN "MODIFICAR" ========================================================== */ body#checkout .checkout-step .done { margin-left: 10px; color: var(--es-purple) !important; font-size: 13px; } body#checkout .checkout-step .step-edit { margin-left: auto; color: var(--es-purple) !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; transition: color .2s ease; } body#checkout .checkout-step .step-edit:hover { color: var(--es-purple-hover) !important; } /* ========================================================== 11. CONTENIDO INTERNO DE LOS PASOS ========================================================== */ body#checkout .checkout-step .content { margin: 0 !important; padding: 5px 25px 27px !important; border: 0 !important; color: var(--es-text-soft); } body#checkout .checkout-step .content p { margin-bottom: 10px; color: var(--es-text-soft); font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.65; } body#checkout .checkout-step .content small { color: var(--es-muted); font-size: 11px; } /* ========================================================== 12. LINKS INTERNOS DEL PANEL IZQUIERDO ========================================================== */ /* * Este bloque afecta: * - Victoria Colorado * - Cerrar sesión * - Modificar * - enlaces de direcciones * - links que aparezcan posteriormente * en Método de envío y Pago */ body#checkout .checkout-step .content a, body#checkout .checkout-step .content a:visited { color: var(--es-purple) !important; font-family: "Inter", sans-serif; font-weight: 600; text-decoration: none !important; transition: color .2s ease, opacity .2s ease; } body#checkout .checkout-step .content a u { color: inherit !important; text-decoration: none !important; } body#checkout .checkout-step .content a:hover, body#checkout .checkout-step .content a:focus { color: var(--es-purple-hover) !important; text-decoration: none !important; } /* Pequeña línea inferior elegante para links dentro de párrafos */ body#checkout .checkout-step .content p a { border-bottom: 1px solid rgba(181, 27, 193, .28); } body#checkout .checkout-step .content p a:hover { border-bottom-color: var(--es-purple); } /* ========================================================== 13. FORMULARIOS ========================================================== */ body#checkout .checkout-step .form-group { margin-bottom: 17px; } body#checkout .checkout-step .form-group.row { margin-left: -6px; margin-right: -6px; } body#checkout .checkout-step .form-group.row > [class*="col-"] { padding-left: 6px; padding-right: 6px; } /* Labels */ body#checkout .checkout-step .col-form-label { color: var(--es-text); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; } /* Inputs */ body#checkout .checkout-step .form-control { min-height: 46px; padding: 10px 14px; background: #fdfcfd !important; border: 1px solid #e9e2eb !important; border-radius: 9px !important; box-shadow: none !important; color: var(--es-text); font-family: "Inter", sans-serif; font-size: 13px; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } body#checkout .checkout-step .form-control:hover { border-color: #d9c9dd !important; } body#checkout .checkout-step .form-control:focus { background: #ffffff !important; border-color: var(--es-purple) !important; box-shadow: 0 0 0 3px rgba(181, 27, 193, .08) !important; } /* Select */ body#checkout .checkout-step select.form-control { cursor: pointer; } /* Opcional */ body#checkout .checkout-step .form-control-comment { color: #aaa2ac; font-family: "Inter", sans-serif; font-size: 10px; } /* ========================================================== 14. CHECKBOX ========================================================== */ body#checkout .checkout-step .custom-checkbox { color: var(--es-text-soft); font-size: 12px; } body#checkout .checkout-step .custom-checkbox > span { border-color: #d9cfdb !important; border-radius: 4px !important; } body#checkout .checkout-step .custom-checkbox input:checked + span { background: var(--es-purple) !important; border-color: var(--es-purple) !important; } body#checkout .checkout-step .custom-checkbox label { color: var(--es-text-soft); } /* ========================================================== 15. BOTONES DEL CHECKOUT ========================================================== */ body#checkout .checkout-step .btn-primary, body#checkout .checkout-step button.continue { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 135px; min-height: 42px; padding: 10px 23px !important; background: var(--es-purple) !important; border: 1px solid var(--es-purple) !important; border-radius: 100px !important; box-shadow: none !important; color: #ffffff !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } body#checkout .checkout-step .btn-primary:hover, body#checkout .checkout-step button.continue:hover { background: var(--es-purple-hover) !important; border-color: var(--es-purple-hover) !important; color: #ffffff !important; transform: translateY(-1px); } /* Evita que btn-block lo obligue a ocupar el 100% */ body#checkout .checkout-step .btn-block { display: inline-flex !important; width: auto !important; } /* Contenedor del botón */ body#checkout .checkout-step .clearfix form { margin-top: 18px; } /* Footer del formulario */ body#checkout .checkout-step .form-footer { padding-top: 12px; text-align: left !important; } /* ========================================================== 16. RESUMEN DEL PEDIDO - COLUMNA DERECHA ========================================================== */ body#checkout .cart-grid-right { position: relative; } body#checkout #js-checkout-summary { margin: 0 !important; background: var(--es-white) !important; border: 1px solid var(--es-border) !important; border-radius: var(--es-radius) !important; box-shadow: 0 8px 25px rgba(49, 0, 54, .045) !important; overflow: hidden; } /* Eliminar estilos antiguos */ body#checkout #js-checkout-summary.card { border-top: 1px solid var(--es-border) !important; } body#checkout #js-checkout-summary .card-body, body#checkout #js-checkout-summary .card-block { padding: 22px 23px; } /* ========================================================== 17. CANTIDAD DE ARTÍCULOS ========================================================== */ body#checkout .cart-summary-products > div:first-child { color: var(--es-text-soft); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; } body#checkout .cart-summary-products .text-muted { color: #908692 !important; font-family: "Inter", sans-serif; font-size: 10px; text-decoration: none; } body#checkout .cart-summary-products .text-muted:hover { color: var(--es-purple) !important; } /* ========================================================== 18. PRODUCTOS DEL RESUMEN ========================================================== */ body#checkout .cart-summary-product { padding: 14px 0; border-bottom: 1px solid #f1ebf2; } body#checkout .cart-summary-product:last-child { border-bottom: 0; } body#checkout .cart-summary-product .media-object { width: 55px; border-radius: 8px; } body#checkout .cart-summary-product .product-name { color: var(--es-dark); font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; } body#checkout .cart-summary-product .product-quantity { color: #9d949f !important; } /* ========================================================== 19. LÍNEAS DEL RESUMEN ========================================================== */ body#checkout #js-checkout-summary hr { margin: 0 !important; border: 0 !important; border-top: 1px solid #f0eaf1 !important; } /* Subtotal / Transporte */ body#checkout .cart-summary-subtotals-container { padding-top: 18px !important; padding-bottom: 18px !important; } body#checkout .cart-summary-subtotals { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } body#checkout .cart-summary-subtotals:last-child { margin-bottom: 0; } body#checkout .cart-summary-subtotals .label, body#checkout .cart-summary-subtotals .value { color: var(--es-text); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; } /* ========================================================== 20. TOTAL ========================================================== */ body#checkout .cart-summary-totals { padding-top: 20px !important; padding-bottom: 20px !important; background: #fdfafd; } body#checkout .cart-summary-line.cart-total { display: flex; align-items: center; justify-content: space-between; margin: 0; } body#checkout .cart-summary-line.cart-total .label { color: var(--es-dark) !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 20px !important; font-weight: 700 !important; text-transform: uppercase; } body#checkout .cart-summary-line.cart-total .value { color: var(--es-purple) !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 21px !important; font-weight: 700 !important; } /* ========================================================== 21. ENLACE "MODIFICAR" DEL RESUMEN ========================================================== */ body#checkout #js-checkout-summary .step-edit, body#checkout #js-checkout-summary a { color: var(--es-purple); text-decoration: none; } body#checkout #js-checkout-summary a:hover { color: var(--es-purple-hover); } /* ========================================================== 22. ELIMINAR BORDES / SOMBRAS ANTIGUAS DEL TEMA ========================================================== */ body#checkout #wrapper .checkout-step, body#checkout #wrapper .checkout-step .content, body#checkout #wrapper .cart-summary, body#checkout #wrapper .card, body#checkout #wrapper .card-body, body#checkout #wrapper .card-block { outline: 0; } body#checkout #main, body#checkout #content-wrapper { border: 0 !important; box-shadow: none !important; } /* ========================================================== 23. ESTADO HOVER DE LOS PASOS CLICABLES ========================================================== */ body#checkout .checkout-step.-reachable > .step-title { cursor: pointer; transition: background-color .2s ease, color .2s ease; } body#checkout .checkout-step.-reachable > .step-title:hover { background: #fdf9fe !important; } body#checkout .checkout-step.-current > .step-title:hover { background: transparent !important; } /* ========================================================== 24. RESPONSIVE - TABLET ========================================================== */ @media (max-width: 991px) { body#checkout #wrapper { padding-top: 32px; padding-bottom: 55px; } body#checkout #inner-wrapper.container { width: calc(100% - 30px); } body#checkout #main > .row > .col-md-8, body#checkout #main > .row > .cart-grid-right { flex: 0 0 100%; max-width: 100%; } body#checkout .cart-grid-right { margin-top: 20px; } } /* ========================================================== 25. RESPONSIVE - MÓVIL ========================================================== */ @media (max-width: 767px) { body#checkout #wrapper { padding-top: 26px; padding-bottom: 45px; } body#checkout #inner-wrapper.container { width: calc(100% - 24px); } body#checkout #main > .page-title { margin-bottom: 25px; font-size: 27px !important; } body#checkout .checkout-step { margin-bottom: 12px !important; border-radius: 12px !important; } body#checkout .checkout-step .step-title { min-height: 62px; padding: 17px 17px !important; font-size: 19px !important; } body#checkout .checkout-step .step-number { flex: 0 0 28px; width: 28px; height: 28px; margin-right: 10px; font-size: 12px; } body#checkout .checkout-step .content { padding: 3px 17px 22px !important; } body#checkout .checkout-step .step-edit { font-size: 0 !important; } body#checkout .checkout-step .step-edit i { font-size: 12px !important; } body#checkout .checkout-step .form-group.row { display: block; } body#checkout .checkout-step .form-group.row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; } body#checkout .checkout-step .col-form-label { display: block; margin-bottom: 6px; } body#checkout .checkout-step .form-control-comment { margin-top: 5px; } body#checkout .checkout-step .btn-primary, body#checkout .checkout-step button.continue { min-width: 120px; min-height: 40px; padding: 9px 20px !important; } body#checkout #js-checkout-summary .card-body, body#checkout #js-checkout-summary .card-block { padding-left: 18px; padding-right: 18px; } body#checkout .cart-summary-line.cart-total .label { font-size: 18px !important; } body#checkout .cart-summary-line.cart-total .value { font-size: 19px !important; } } /* ========================================================== ESTILO STORE FICHA DE PRODUCTO - DISEÑO MODERNO Basado en la segunda referencia ========================================================== */ .page-product { --es-purple: #ad19b9; --es-purple-hover: #90149a; --es-dark: #2d0b31; --es-text: #625967; --es-muted: #8e8491; --es-border: #eee8f0; --es-soft: #f8effa; --es-background: #fbf9fc; --es-white: #ffffff; } /* ========================================================== 1. CONTENEDOR GENERAL ========================================================== */ .page-product #wrapper { background: #ffffff !important; } .page-product #inner-wrapper.container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; } .page-product #content-wrapper { width: 100% !important; max-width: 100% !important; } .page-product #main { width: 100% !important; padding-bottom: 0 !important; } /* ========================================================== 2. BREADCRUMB ========================================================== */ .page-product .breadcrumb { margin-top: 14px !important; margin-bottom: 30px !important; padding: 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: #8f8791 !important; } .page-product .breadcrumb a { color: #8f8791 !important; text-decoration: none !important; } .page-product .breadcrumb a:hover { color: var(--es-purple) !important; } /* ========================================================== 3. ESTRUCTURA PRINCIPAL IMAGEN IZQUIERDA / INFORMACIÓN DERECHA ========================================================== */ @media (min-width: 992px) { .page-product #main-product-wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); column-gap: 42px !important; align-items: start !important; } /* * Eliminamos visualmente el row de Bootstrap, * pero conservamos sus hijos. */ .page-product .product-info-row { display: contents !important; } /* Imagen */ .page-product .col-product-image { grid-column: 1; grid-row: 1 / span 2; width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; } /* Información */ .page-product .col-product-info { grid-column: 2; grid-row: 1; width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; } /* Tabs debajo de la información */ .page-product .product-tabs { grid-column: 2; grid-row: 2; } /* Comentarios y productos relacionados a ancho completo */ .page-product #main-product-wrapper > .block, .page-product #main-product-wrapper > #empty-product-comment, .page-product #main-product-wrapper > .row:not(.product-info-row) { grid-column: 1 / -1; } } /* Eliminamos la columna "custom html" de la derecha */ .page-product .product-sidebar { display: none !important; } /* ========================================================== 4. GALERÍA PRINCIPAL ========================================================== */ .page-product .images-container { width: 100% !important; } /* Contenedor grande de imagen */ .page-product .product-cover { position: relative !important; width: 100% !important; overflow: hidden !important; background: var(--es-background) !important; border: 1px solid #f0ebf2 !important; border-radius: 14px !important; } /* Quitamos etiqueta "Nuevo" de la imagen principal */ .page-product .col-product-image .product-cover > .product-flags { display: none !important; } /* Slider grande */ .page-product #product-images-large { width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; } /* Todos los contenedores internos */ .page-product #product-images-large .swiper-wrapper, .page-product #product-images-large .product-lmage-large, .page-product #product-images-large picture { height: 100% !important; } /* Slide */ .page-product #product-images-large .product-lmage-large { display: flex !important; align-items: center !important; justify-content: center !important; } /* Picture */ .page-product #product-images-large picture { display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; } /* Imagen del producto */ .page-product #product-images-large img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; padding: 28px !important; margin: 0 auto !important; } /* Botón ampliar */ .page-product .product-cover .expander { top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.95) !important; border: 1px solid var(--es-border) !important; border-radius: 8px !important; color: var(--es-dark) !important; } /* ========================================================== 5. MINIATURAS ========================================================== */ .page-product .js-qv-mask { margin-top: 12px !important; } .page-product #product-images-thumbs { width: 100% !important; padding: 0 !important; } /* Slide miniatura */ .page-product #product-images-thumbs .swiper-slide { width: 84px !important; margin-right: 10px !important; } /* Contenedor miniatura */ .page-product #product-images-thumbs .thumb-container { width: 84px !important; height: 72px !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid var(--es-border) !important; border-radius: 10px !important; } /* Imagen miniatura */ .page-product #product-images-thumbs .thumb { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 4px !important; border: 0 !important; border-radius: 9px !important; } /* Miniatura activa */ .page-product #product-images-thumbs .thumb.selected, .page-product #product-images-thumbs .thumb.js-thumb-selected { outline: 2px solid var(--es-purple) !important; outline-offset: -2px !important; } /* Flechas innecesarias */ .page-product #product-images-thumbs .swiper-button-arrow { display: none !important; } /* Espacios adicionales que mete el tema */ .page-product .after-cover-tumbnails, .page-product .after-cover-tumbnails2 { display: none !important; } /* ========================================================== 6. INFORMACIÓN DEL PRODUCTO ========================================================== */ .page-product #col-product-info { width: 100% !important; padding-top: 3px !important; } /* Cabecera */ .page-product .product_header_container { display: grid !important; grid-template-columns: auto 1fr !important; align-items: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Marca */ .page-product .product_header_container > .label { grid-column: 1; grid-row: 1; margin: 0 5px 8px 0 !important; color: var(--es-purple) !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 600 !important; } /* Nombre marca */ .page-product .product_header_container > .label + span { grid-column: 2; grid-row: 1; margin: 0 0 8px !important; font-size: 12px !important; } .page-product .product_header_container > .label + span a { color: var(--es-purple) !important; text-decoration: none !important; } /* ========================================================== 7. TÍTULO ========================================================== */ .page-product .page-title { grid-column: 1 / -1; grid-row: 2; margin: 0 0 10px !important; color: var(--es-dark) !important; font-size: 34px !important; line-height: 1.08 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: none !important; } .page-product .page-title span { color: inherit !important; font: inherit !important; text-transform: none !important; } /* ========================================================== 8. PRECIO ========================================================== */ .page-product .product-prices { grid-column: 1 / -1; grid-row: 3; margin: 7px 0 16px !important; padding: 0 !important; } .page-product .product-prices .product-price { color: var(--es-purple) !important; font-size: 28px !important; line-height: 1 !important; font-weight: 700 !important; } /* Ocultamos "Impuestos incluidos" */ .page-product .tax-shipping-delivery-label { display: none !important; } /* ========================================================== 9. DESCRIPCIÓN + ACCIONES ========================================================== */ .page-product .product-information { display: flex !important; flex-direction: column !important; } /* Primero acciones */ .page-product .product-information > .product-actions { order: 1 !important; } /* Después descripción */ .page-product .product-information > .product-description { order: 2 !important; margin: 18px 0 0 !important; color: var(--es-text) !important; font-size: 13px !important; line-height: 1.6 !important; } /* Redes sociales y tags */ .page-product .product-additional-info { display: none !important; } /* ========================================================== 10. CANTIDAD + BOTÓN + FAVORITO ========================================================== */ .page-product .product-add-to-cart { margin-top: 0 !important; padding-top: 4px !important; } /* Grid de acciones */ .page-product .product-quantity { display: grid !important; grid-template-columns: minmax(0, 1fr) 52px !important; gap: 10px !important; align-items: center !important; margin: 0 !important; } /* Título Cantidad */ .page-product .product-quantity::before { content: "Cantidad:"; grid-column: 1 / -1; display: block; margin-bottom: -2px; color: var(--es-dark); font-size: 13px; line-height: 1.3; font-weight: 600; } /* Quitamos padding Bootstrap */ .page-product .product-quantity > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================== 11. SELECTOR DE CANTIDAD ========================================================== */ .page-product .col-add-qty { grid-column: 1 / -1; width: 110px !important; max-width: 110px !important; margin-bottom: 2px !important; } .page-product .qty, .page-product .qty .bootstrap-touchspin { width: 110px !important; } /* Input */ .page-product #quantity_wanted { width: 110px !important; height: 42px !important; min-height: 42px !important; padding: 0 10px !important; text-align: center !important; color: var(--es-dark) !important; background: #ffffff !important; border: 1px solid var(--es-border) !important; border-radius: 10px !important; box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important; } /* Botones +/- generados por TouchSpin */ .page-product .qty .bootstrap-touchspin button { background: #ffffff !important; border-color: var(--es-border) !important; color: var(--es-dark) !important; box-shadow: none !important; } /* ========================================================== 12. BOTÓN AÑADIR AL CARRITO ========================================================== */ .page-product .col-add-btn { grid-column: 1; width: auto !important; max-width: none !important; flex: none !important; } .page-product .product-add-to-cart .add-to-cart { width: 100% !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 0 20px !important; background: var(--es-purple) !important; border: 1px solid var(--es-purple) !important; border-radius: 10px !important; box-shadow: none !important; color: #ffffff !important; font-size: 14px !important; line-height: 1 !important; font-weight: 700 !important; text-transform: none !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important; } .page-product .product-add-to-cart .add-to-cart:hover { background: var(--es-purple-hover) !important; border-color: var(--es-purple-hover) !important; } /* ========================================================== 13. FAVORITOS ========================================================== */ .page-product .col-add-wishlist { grid-column: 2; width: 52px !important; max-width: 52px !important; flex: none !important; } .page-product #iqit-wishlist-product-btn { width: 52px !important; height: 48px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border: 1.5px solid var(--es-purple) !important; border-radius: 10px !important; box-shadow: none !important; color: var(--es-purple) !important; font-size: 18px !important; } /* Corazón */ .page-product #iqit-wishlist-product-btn i { color: var(--es-purple) !important; } /* Ocultamos comparar */ .page-product .col-add-compare { display: none !important; } /* ========================================================== 14. TABS COMO TARJETAS / ACORDEÓN ========================================================== */ .page-product .product-tabs { margin-top: 17px !important; padding: 0 !important; border: 0 !important; } /* Contenedor */ .page-product #product-infos-tabs { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Cada opción */ .page-product #product-infos-tabs .nav-item { width: 100% !important; margin: 0 !important; } /* Botón */ .page-product #product-infos-tabs .nav-link { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; color: var(--es-dark) !important; background: #ffffff !important; border: 1px solid var(--es-border) !important; border-radius: 10px !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: none !important; } /* Flecha */ .page-product #product-infos-tabs .nav-link::after { content: "⌄"; margin-left: 12px; color: #958a98; font-size: 18px; line-height: 1; transition: transform .2s ease; } /* Tab activo */ .page-product #product-infos-tabs .nav-link.active { color: var(--es-purple) !important; background: #fdf9fe !important; border-color: #e6cee9 !important; } .page-product #product-infos-tabs .nav-link.active::after { transform: rotate(180deg); } /* Ocultamos Reviews de las tabs, ya tenemos sección de reseñas abajo */ .page-product #iqit-reviews-tab { display: none !important; } /* Contenido */ .page-product #product-infos-tabs-content { padding: 12px 2px 0 !important; border: 0 !important; color: var(--es-text) !important; font-size: 13px !important; line-height: 1.65 !important; } /* ========================================================== 15. RESEÑAS ========================================================== */ .page-product #product-comments-list-header { margin-top: 52px !important; } /* Título */ .page-product #product-comments-list-header .comments-nb { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; } /* Ocultamos texto original */ .page-product #product-comments-list-header .comments-nb span { font-size: 0 !important; } /* Nuevo título */ .page-product #product-comments-list-header .comments-nb span::after { content: "Reseñas de clientes"; color: var(--es-dark); font-size: 20px; line-height: 1.3; font-weight: 700; } /* Estado sin reseñas */ .page-product #empty-product-comment { margin: 0 0 40px !important; padding: 18px 20px !important; background: #ffffff !important; border: 1px solid var(--es-border) !important; border-radius: 12px !important; box-shadow: 0 8px 22px rgba(45, 11, 49, 0.035) !important; color: var(--es-muted) !important; font-size: 13px !important; } /* Cuando existan reseñas */ .page-product #product-comments-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; } /* Tarjeta reseña */ .page-product #product-comments-list .product-comment-list-item { margin: 0 !important; padding: 18px !important; background: #ffffff !important; border: 1px solid var(--es-border) !important; border-radius: 12px !important; box-shadow: 0 8px 22px rgba(45, 11, 49, 0.045) !important; } /* Columnas internas */ .page-product #product-comments-list .comment-infos, .page-product #product-comments-list .comment-content { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; } /* Título reseña */ .page-product #product-comments-list .comment-content h4 { margin: 8px 0 6px !important; color: var(--es-dark) !important; font-size: 14px !important; font-weight: 600 !important; } /* Texto */ .page-product #product-comments-list .comment-content p { color: var(--es-text) !important; font-size: 13px !important; line-height: 1.55 !important; } /* ========================================================== 16. PRODUCTOS RELACIONADOS ========================================================== */ .page-product .category-products { margin-top: 42px !important; padding: 34px 0 48px !important; border-top: 1px solid #f2edf3 !important; } /* Título original */ .page-product .category-products .section-title { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; } /* Ocultar título original */ .page-product .category-products .section-title span { font-size: 0 !important; } /* Título como referencia */ .page-product .category-products .section-title span::after { content: "También te puede gustar 💕"; color: var(--es-dark); font-size: 20px; line-height: 1.3; font-weight: 700; } /* ========================================================== 17. TARJETAS PRODUCTOS ========================================================== */ .page-product .category-products .product-miniature { height: 100% !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid var(--es-border) !important; border-radius: 14px !important; box-shadow: 0 8px 24px rgba(45, 11, 49, 0.05) !important; } /* Imagen */ .page-product .category-products .thumbnail-container { position: relative !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; margin: 0 !important; background: var(--es-background) !important; border: 0 !important; } .page-product .category-products .product-thumbnail, .page-product .category-products .product-thumbnail picture { display: block !important; width: 100% !important; height: 100% !important; } .page-product .category-products .product-thumbnail img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 12px !important; } /* Badge Nuevo */ .page-product .category-products .product-flag.new { padding: 4px 8px !important; background: var(--es-purple) !important; border-radius: 5px !important; color: #ffffff !important; font-size: 10px !important; text-transform: none !important; } /* ========================================================== 18. FAVORITO PRODUCTOS RELACIONADOS ========================================================== */ .page-product .category-products .product-functional-buttons { top: 10px !important; right: 10px !important; bottom: auto !important; } /* Ocultamos acciones extra */ .page-product .category-products .product-functional-buttons-links > a:not(.btn-iqitwishlist-add) { display: none !important; } /* Favorito circular */ .page-product .category-products .product-functional-buttons .btn-iqitwishlist-add { width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: #ffffff !important; border: 1px solid var(--es-border) !important; border-radius: 50% !important; color: var(--es-dark) !important; box-shadow: none !important; } /* ========================================================== 19. INFORMACIÓN TARJETA ========================================================== */ .page-product .category-products .product-description { position: relative !important; min-height: 132px !important; padding: 12px 14px 16px !important; background: #ffffff !important; } /* Categoría */ .page-product .category-products .product-category-name { margin-bottom: 5px !important; color: #9d929f !important; font-size: 11px !important; text-transform: none !important; } /* Nombre */ .page-product .category-products .product-title { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.35 !important; } .page-product .category-products .product-title a { color: var(--es-dark) !important; font-weight: 600 !important; text-decoration: none !important; } /* Ocultamos elementos secundarios */ .page-product .category-products .product-brand, .page-product .category-products .product-reference, .page-product .category-products .product-description-short { display: none !important; } /* Precio */ .page-product .category-products .product-price { color: var(--es-purple) !important; font-size: 14px !important; font-weight: 700 !important; } /* ========================================================== 20. BOTÓN CARRITO PRODUCTO RELACIONADO ========================================================== */ .page-product .category-products .product-add-cart { position: absolute !important; right: 12px !important; bottom: 12px !important; margin: 0 !important; } /* Ocultamos selector de cantidad */ .page-product .category-products .product-add-cart .input-qty { display: none !important; } .page-product .category-products .product-add-cart .input-group-add-cart { display: block !important; } /* Botón circular */ .page-product .category-products .product-add-cart .add-to-cart { width: 36px !important; height: 36px !important; min-height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: var(--es-purple) !important; border: 0 !important; border-radius: 50% !important; color: #ffffff !important; font-size: 0 !important; box-shadow: none !important; } /* Mantener icono carrito */ .page-product .category-products .product-add-cart .bag-icon { margin: 0 !important; font-size: 13px !important; color: #ffffff !important; } /* ========================================================== 21. RESPONSIVE TABLET ========================================================== */ @media (max-width: 991.98px) { .page-product #inner-wrapper.container { padding-left: 16px !important; padding-right: 16px !important; } .page-product #main-product-wrapper { display: block !important; } .page-product .product-info-row { display: flex !important; flex-wrap: wrap !important; margin: 0 !important; } .page-product .col-product-image, .page-product .col-product-info { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .page-product .col-product-info { margin-top: 24px !important; } .page-product .product-tabs { margin-top: 20px !important; } .page-product #product-comments-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================== 22. RESPONSIVE MÓVIL ========================================================== */ @media (max-width: 575.98px) { .page-product #inner-wrapper.container { padding-left: 12px !important; padding-right: 12px !important; } /* Imagen */ .page-product #product-images-large img { padding: 18px !important; } /* Título */ .page-product .page-title { font-size: 29px !important; } /* Precio */ .page-product .product-prices .product-price { font-size: 25px !important; } /* Acciones */ .page-product .product-quantity { grid-template-columns: minmax(0, 1fr) 48px !important; } .page-product .col-add-wishlist { width: 48px !important; max-width: 48px !important; } .page-product #iqit-wishlist-product-btn { width: 48px !important; } /* Reseñas */ .page-product #product-comments-list { grid-template-columns: 1fr !important; } .page-product .category-products { padding-bottom: 30px !important; } } /* ====================================================================== ESTILO STORE — BLOQUE FINAL DE RECUPERACIÓN / COMPATIBILIDAD ---------------------------------------------------------------------- Este bloque se mantiene al FINAL del CSS para que tenga prioridad. No modifica el header ni el footer. ====================================================================== */ /* ====================================================================== 1. CATÁLOGO / TIENDA / BÚSQUEDA — 3 PRODUCTOS POR FILA EN ESCRITORIO ====================================================================== */ @media (min-width: 992px) { body#category.page-category #js-product-list .js-product-miniature-wrapper, body#category.category-id-2 #js-product-list .js-product-miniature-wrapper, .page-search #js-product-list .js-product-miniature-wrapper { flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: 33.333333% !important; } body#category.page-category .product-miniature .thumbnail-container, body#category.category-id-2 .product-miniature .thumbnail-container { height: 235px !important; min-height: 235px !important; aspect-ratio: auto !important; } } /* Tablet: 2 productos por fila */ @media (max-width: 991px) and (min-width: 768px) { body#category.page-category #js-product-list .js-product-miniature-wrapper, body#category.category-id-2 #js-product-list .js-product-miniature-wrapper, .page-search #js-product-list .js-product-miniature-wrapper { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; } } /* ====================================================================== 2. FAVORITOS — MOSTRAR UN SOLO CORAZÓN / ESTADO A LA VEZ ====================================================================== */ body#category .btn-iqitwishlist-add .added, body.page-category .btn-iqitwishlist-add .added, .page-product #iqit-wishlist-product-btn .added { display: none !important; } body#category .btn-iqitwishlist-add.added .not-added, body.page-category .btn-iqitwishlist-add.added .not-added, .page-product #iqit-wishlist-product-btn.added .not-added { display: none !important; } body#category .btn-iqitwishlist-add.added .added, body.page-category .btn-iqitwishlist-add.added .added, .page-product #iqit-wishlist-product-btn.added .added { display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* ====================================================================== 3. MI CUENTA — ESTADO ACTIVO DE TODOS LOS LINKS INTERNOS ====================================================================== */ #wrapper .my-account-side-links > a.active .link-item, #wrapper .my-account-side-links > a.current .link-item, #wrapper .my-account-side-links > a.selected .link-item, #wrapper .my-account-side-links > a[aria-current="page"] .link-item { background: var(--account-purple, #a91db9) !important; border-color: var(--account-purple, #a91db9) !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(169, 29, 185, 0.17) !important; } #wrapper .my-account-side-links > a.active .link-item i, #wrapper .my-account-side-links > a.current .link-item i, #wrapper .my-account-side-links > a.selected .link-item i, #wrapper .my-account-side-links > a[aria-current="page"] .link-item i, #wrapper .my-account-side-links > a.active .link-item > span:first-child, #wrapper .my-account-side-links > a.current .link-item > span:first-child, #wrapper .my-account-side-links > a.selected .link-item > span:first-child, #wrapper .my-account-side-links > a[aria-current="page"] .link-item > span:first-child { background: rgba(255, 255, 255, 0.17) !important; color: #ffffff !important; } /* ====================================================================== 4. WISHLIST / FAVORITOS EN MI CUENTA — UNA SOLA COLUMNA ====================================================================== */ #wrapper:has(.my-account-side-links) #iqitwishlist-user-products { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 14px !important; margin: 18px 0 0 !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .iqitwishlist-product { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 14px 16px !important; background: #ffffff !important; border: 1px solid var(--account-border, #e8e2ec) !important; border-radius: 13px !important; box-shadow: none !important; box-sizing: border-box !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .iqitwishlist-product > .row { width: 100% !important; margin: 0 !important; align-items: center !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .iqitwishlist-product > .row > [class*="col"] { padding-top: 4px !important; padding-bottom: 4px !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .iqitwishlist-product img { max-width: 82px !important; max-height: 82px !important; object-fit: contain !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products ._name a { color: var(--account-text, #210626) !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .product-price { color: var(--account-purple, #a91db9) !important; font-family: "Inter", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; } /* Botón Añadir al carrito: más pequeño y con separación */ #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .product-add-cart { margin: 8px 0 8px 12px !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .btn-product-list.add-to-cart { min-width: auto !important; min-height: 38px !important; height: 38px !important; padding: 8px 15px !important; background: var(--account-purple, #a91db9) !important; border: 1px solid var(--account-purple, #a91db9) !important; border-radius: 100px !important; color: #ffffff !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; box-shadow: none !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .btn-product-list.add-to-cart:hover { background: var(--account-purple-hover, #8e159d) !important; border-color: var(--account-purple-hover, #8e159d) !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .js-iqitwishlist-remove { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border: 1px solid var(--account-border, #e8e2ec) !important; border-radius: 50% !important; color: var(--account-purple, #a91db9) !important; text-decoration: none !important; } /* ====================================================================== 5. CHECKOUT — NÚMEROS CENTRADOS, FLECHA Y LÁPIZ SIN CUADROS VACÍOS ====================================================================== */ body#checkout .checkout-step .step-number { display: grid !important; place-items: center !important; flex: 0 0 31px !important; width: 31px !important; min-width: 31px !important; max-width: 31px !important; height: 31px !important; min-height: 31px !important; max-height: 31px !important; margin: 0 12px 0 0 !important; padding: 0 !important; line-height: 1 !important; text-align: center !important; text-indent: 0 !important; vertical-align: middle !important; transform: none !important; } /* Se ocultan los iconos del tema que estaban apareciendo como cuadros */ body#checkout .checkout-step .step-title > i, body#checkout .checkout-step .step-edit > i { display: none !important; } /* Flecha hacia abajo inmediatamente después del título del paso */ body#checkout .checkout-step .step-title::after { content: "" !important; order: 2 !important; flex: 0 0 7px !important; width: 7px !important; height: 7px !important; margin: -4px 0 0 9px !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: rotate(45deg) !important; opacity: .65 !important; } /* "Modificar" se mantiene al extremo derecho */ body#checkout .checkout-step .step-edit { order: 3 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; margin-left: auto !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; } /* Lápiz generado por CSS para no depender de la fuente de iconos */ body#checkout .checkout-step .step-edit::before { content: "✎" !important; display: inline-block !important; color: currentColor !important; font-family: Arial, "Helvetica Neue", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; } @media (max-width: 767px) { body#checkout .checkout-step .step-number { flex-basis: 28px !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; margin-right: 10px !important; } body#checkout .checkout-step .step-edit { font-size: 11px !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .iqitwishlist-product { padding: 12px !important; } #wrapper:has(.my-account-side-links) #iqitwishlist-user-products .product-add-cart { margin-left: 0 !important; } } body#category.category-id-2 .product-functional-buttons { right: auto !important; width: 90% !important; height: 30% !important; display: flex !important; justify-content: flex-end !important; } body#category.category-id-2 .btn-iqitwishlist-add{ width: 38px !important; height: 38px !important; margin: -5px !important; } body.page-index :is( .elementor-element-0e72b68, .elementor-element-ad31284, .elementor-element-7d2f0df ) .product-functional-buttons-links{ right: auto !important; width: 100% !important; height: 30% !important; display: flex !important; justify-content: flex-end !important; } body.page-index :is( .elementor-element-0e72b68, .elementor-element-ad31284, .elementor-element-7d2f0df ) .btn-iqitwishlist-add{ width: 38px !important; height: 38px !important; margin: -5px !important; } /* 1. Importar tipografía Inter */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* 1. Importar tipografía Inter */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* 2. Aplicar Inter solo al contenido del producto */ #main-product-wrapper p, #main-product-wrapper s, #main-product-wrapper a, #main-product-wrapper li, #main-product-wrapper button, #main-product-wrapper input, #main-product-wrapper select, #main-product-wrapper label, #main-product-wrapper .product-price, #main-product-wrapper .nav-link, #main-product-wrapper .tab-content { font-family: 'Inter', sans-serif !important; } .input-group-add-cart { display: flex !important; gap: 6px !important; } .input-group-add-cart .input-qty { border-radius: 4px !important; } .input-group-add-cart .add-to-cart { border-radius: 4px !important; } .page-search .product-miniature .product-functional-buttons{ right: auto !important; width: 95% !important; height: 38px !important; display: flex !important; justify-content: flex-end !important; } btn-iqitwishlist-add js-iqitwishlist-add{ width: 38px !important; height: 38px !important; margin: -5px !important; } img-fluid js-lazy-product-image lazy-product-image product-thumbnail-first entered loaded{ width: 38px !important; height: 38px !important; } .page-search .product-miniature .product-thumbnail img { width: 80% !important; height: auto !important; max-width: 100% !important; display: block !important; margin: 15px auto !important; padding: 10px !important; background-color: #ffffff !important; border-radius: 8px !important; object-fit: contain !important; object-position: center !important; transition: transform .35s ease; } .page-search .product-miniature .product-title a { font-size: 1.35rem !important; font-weight: 700 !important; line-height: 1.3 !important; } .page-search .product-miniature .product-price, .page-search .product-miniature .price { font-size: 1.20rem !important; } .row.align-items-center.small-gutters.justify-content-end { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; } body#cart #main .btn{ display: flex; align-items: center !important; justify-content: center !important; padding: 10px !important } body#cart #main .btn{ min-height: 25px; } .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: 2px; } .form-control { padding: 0.1rem 0.1rem } .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{ border-top-color: #e6e6e6 !important; } /* Aplicar la fuente al contenedor y a sus elementos internos */ .password-requirements.text-muted, .password-requirements.text-muted p, .password-requirements.text-muted span { font-family: 'Inter', sans-serif !important; } #wrapper .my-account-page-content .btn-primary, #wrapper .my-account-page-content button[type="submit"], #wrapper .my-account-page-content input[type="submit"]{ min-height: 40px !important; font-size: 15px !important; padding: 1px 15px !important; border-radius: 19px !important; } /* ---------------------------CARRUSEL PRODUCTOS También te puede gustar --------------*/ /* Separación horizontal en el grid/carrusel */ .swiper-slide { padding-right: 5px; padding-left: 5px; }