.iqitfake{ display: none;} @charset "UTF-8"; /*** Style mixins ***/ /*** Variables mixins and functions ***/ body { background: #fbf6ef; } .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1400px; } 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 { background: #ffffff; border-bottom: solid 1px #e3e3e3; } #mobile-header #mobile-header-sticky { background: #ffffff; } #mobile-header .mobile-main-bar { padding-top: 0.7142857143rem; padding-bottom: 0.7142857143rem; } #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.55rem; } body { font-family: 'Inter', sans-serif; } .h1, .h2, .block-title, .page-title, .modal-title, .step-title { font-family: 'Fraunces', Georgia, serif; } #blockcart-content { background: #ffffff; color: #646464; border: none 3px #171717; box-shadow: 0px 6px 30px 0px #636363; } #blockcart-content a:not(.btn) { color: #646464; } #blockcart-content a:not(.btn):hover { color: #646464; } #blockcart-content .cart-products > li, #blockcart-content .cart-subtotals { border-color: #70936d; } #blockcart-content .cart-products::-webkit-scrollbar-thumb { background-color: #70936d; } /*** 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: #393d3f; color: #e0e0dc; 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: #393d3f; color: #e0e0dc; } .btn-secondary:not(:disabled):not(.disabled):active { background: #393d3f; color: #e0e0dc; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #393d3f; color: #e0e0dc; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #393d3f; color: #e0e0dc; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #393d3f; color: #e0e0dc; 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: #393d3f; color: #e0e0dc; } .btn-primary:not(:disabled):not(.disabled):active { background: #393d3f; color: #e0e0dc; } #wrapper .breadcrumb { padding-top: 1.2857142857rem; padding-bottom: 1.2857142857rem; margin-top: -1.7857142857rem; margin-bottom: 1.7857142857rem; font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; color: #636363; } #wrapper .breadcrumb li:after { color: #636363; } #wrapper .breadcrumb a { color: #636363; } /*** 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: white!important; color: black!important; } .tooltip { --bs-tooltip-bg: #ffffff; --bs-tooltip-color: #000000; } /*** 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: #70936d; color: #ffffff; border: none 1px; } .product-price { color: #000000; } .iqit-review-star { color: #e0d041; } .product-flags .product-flag { font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #c27e79; color: #ffffff; } .product-flags .new { background: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); } .product-flags .online-only, .product-flags .pack { background: #e0e0e0; color: #000000; } .product-flags .out_of_stock { background: #d62424; color: #fff7f7; } .discount { background: #c27e79; color: #ffffff; } .product-available { background: #70936d; color: #ffffff; } .product-unavailable { background: #d62424; 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 { color: #ffffff; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { color: #ffffff; 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: #9dcede; color: #ffffff; display: none; } #back-to-top:hover { background: #636363; color: #ffffff; } #header, #checkout-header { background: #fff6e5; border-top: none 6px; border-bottom: none 1px; } .sticky-desktop-wrapper #desktop-header.stuck-header { background: #fff6e5; border-bottom: none 1px; } #header .header-nav { color: #777777; background: #ffffff; border-bottom: solid 1px #d4d4d4; padding-top: 1.2857142857rem; padding-bottom: 1.2857142857rem; font-size: 1.1428571429rem; display: none !important; } #header .header-nav a { color: #777777; } #header .header-nav a:hover { color: #ffaa9c; } #header .header-nav .social-links._topbar { font-size: 1.5rem; } #header .header-nav .social-links._topbar a:not(:hover) { color: #70936d !important; } #header .header-nav .social-links._topbar a:hover { color: #636363 !important; } .header-top { padding-top: 1.7857142857rem; padding-bottom: 1.7857142857rem; color: #3a2c28; } .header-top a:not(.btn):not(.nav-link) { color: #3a2c28; } .header-top a:not(.btn):not(.nav-link):hover { color: #8a4a4a; } .header-top .form-search-control { border: solid 1px #ebddd0; } .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: #636363; padding: 0.6428571429rem 0.6428571429rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #636363; } .header-top a.header-cart-btn:not(:hover) { color: #636363; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #fbf6ef; } .cart-products-count-btn { background: #8a4a4a; color: #fbf6ef; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 82%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { background: #fbf6ef; border-top: none 1px rgba(255, 255, 255, 0); border-right: none 1px rgba(255, 255, 255, 0); border-bottom: none 1px rgba(255, 255, 255, 0); border-left: none 1px rgba(255, 255, 255, 0); } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { line-height: 3.2142857143rem; max-width: 21.4285714286rem; color: #4a3f35; padding-left: 1.0714285714rem; padding-right: 1.0714285714rem; border-left: none 1px #d4d4d4; } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #4a3f35; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.0357142857rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 3.2142857143rem !important; } .cbp-vertical-on-top .cbp-vertical-title-text { display: none !important; } .cbp-horizontal > ul > li.cbp-hropen > a, .cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li.cbp-hropen > a:hover { background: #fff6e5; color: #4a3f35; } .cbp-horizontal .cbp-tab-title { font-size: 0.9285714286rem; font-style: normal; font-weight: bold; text-transform: none; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #ff9b15; color: #4a3f35; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.5714285714rem; max-height: 1.5714285714rem; } .cbp-horizontal > ul { text-align: center; } .cbp-horizontal > ul > li { float: none; text-align: left; } @media (max-width: 1300px) { .cbp-horizontal .cbp-tab-title { font-size: 1rem; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { padding-left: 0.7142857143rem; padding-right: 0.7142857143rem; } } #cbp-hrmenu .cbp-hrsub, #cbp-hrmenu .cbp-hrsub-level2, #cbp-hrmenu .cbp-hrsub-wrapper { transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out; } .iqitmegamenu-submenu-container { padding: 0; } /*** VERTICAL MENU ***/ .cbp-vertical-on-top #cbp-hrmenu1-ul { background: #fbf6ef; border: solid 1px #e3e3e3; } #content-wrapper #cbp-hrmenu1 { background: #fbf6ef; 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: #4a3f35 !important; } .cbp-hrmenu .cbp-tabs-names li a:hover, .cbp-hrmenu .cbp-tabs-names li a.active { background: #ffffff; color: #4a3f35 !important; } .cbp-hrmenu .cbp-links li a:before { display: none; } .cbp-hrmenu .cbp-links li a { padding-left: 0; } .cbp-hrmenu .cbp-hrsub-inner .cbp-column-title, .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:link { color: #4a3f35 !important; border-bottom: none 3px #000000; font-size: 0.9285714286rem; font-style: normal; font-weight: bold; text-transform: none; } .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.9285714286rem; } #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: none 1px #000000; min-height: 4.5rem; } .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.6428571429rem; } .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: #ffffff; 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.4285714286rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050 !important; } .mobile-menu__column { font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; color: #595050; margin-bottom: 1.4285714286rem; } .mobile-menu__column-categories:not(:last-child) { margin-bottom: 1.4285714286rem; } .mobile-menu__column-title { margin-bottom: 1.4285714286rem; } .mobile-menu__links-list-li { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #595050; } .mobile-menu__footer { border-top: none 1px; color: #595050; background-color: #ffffff; } /*** PS_FacatedSearch ***/ #search_filters .noUi-connect { background: #8a4a4a; } /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #fbf6ef; color: #3a2c28; } .swiper-pagination-bullet { background: #e5d5c8; } /*** Product miniature ***/ .products.row { margin: -1rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 1rem; } .swiper-container-wrapper { margin: -1rem; } .swiper-container-wrapper .products.swiper-container { padding: 1rem; } .swiper-container-wrapper .product-carousel { padding: 1rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 1rem; } .product-miniature { border: none 1px; outline: 1px none transparent; color: #3a2c28; } .product-miniature a:link:not(.nav-link):not(.btn), .product-miniature a:visited:not(.nav-link):not(.btn) { color: #3a2c28; } .product-miniature .product-price { color: #8a4a4a; } .product-miniature .iqit-review-star { color: #8a4a4a; } .product-miniature .thumbnail-container { overflow: hidden; } .product-miniature .thumbnail-container .product-thumbnail-first { -webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; transition: transform 0.4s ease; backface-visibility: hidden; } .product-miniature .thumbnail-container .product-thumbnail-second { position: absolute; left: 0; right: 0; -webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; transition: transform 0.4s ease; backface-visibility: hidden; } .product-miniature .thumbnail-container:hover .product-thumbnail-second, .product-miniature .thumbnail-container:hover .product-thumbnail-first { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .product-miniature .thumbnail-container:hover picture:last-child .product-thumbnail-first { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .product-miniature-grid .product-title { font-size: 1.1428571429rem; font-style: normal; font-weight: normal; text-transform: none; } .product-miniature-grid .product-price { font-size: 1.2142857143rem; font-style: normal; font-weight: bold; text-transform: none; } .product-miniature-grid .product-title { overflow: hidden; height: 3.8857142857rem; } @media (hover: hover) { .product-miniature:hover { outline: none 1px #e31e4d; background: rgba(0, 0, 0, 0); color: #3a2c28; } .product-miniature:hover a:link:not(.nav-link):not(.btn), .product-miniature:hover a:visited:not(.nav-link):not(.btn) { color: #3a2c28; } .product-miniature:hover .product-price { color: #8a4a4a; } .product-miniature:hover .iqit-review-star { color: #8a4a4a; } } .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: #3a2c28 !important; } .product-miniature-grid .product-functional-buttons a { display: block; border-radius: 50%; margin: 5px 0; padding: 8px; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1); } .product-miniature-grid .product-functional-buttons i { font-size: 1rem; } .product-miniature-grid .product-functional-buttons a:link, .product-miniature-grid .product-functional-buttons a:visited, .product-miniature-grid .product-functional-buttons a:hover { background: #fbf6ef; } .product-miniature-grid .product-functional-buttons-bottom { bottom: auto; top: 0.7rem; right: 0rem; left: auto; min-width: auto; padding: 0; transform: translate(0, 0); } .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 .products-variants { 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: 0rem 0rem; background: #3a2c28; color: #fbf6ef; border: none 1px; } .btn-product-list:hover { background: #8a4a4a; color: #ffffff; } .products-grid .product-miniature-default { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; } .products-grid .product-miniature-default .product-description { -webkit-box-flex: auto; -ms-flex: auto; flex: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; } .products-grid .product-add-cart { margin: auto auto 0 auto; } .product-carousel { height: 100%; } .products.swiper-container .swiper-slide { height: auto; } .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-3 .product-description { background: rgba(0, 0, 0, 0); } .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(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); } } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 1.7857142857rem; 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: #4c4c4c; } .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: #4c4c4c; } #product .product-cover .expander:hover { opacity: 0.6 !important; } #product .product-cover .expander { display: none; } .product-variants > .product-variants-item { display: inline-block; margin-right: 1rem; vertical-align: top; } .col-product-info, .quickview-info { text-align: center; } .product-variants-item > ul { display: inline-block; } .product-variants-item .custom-select2 { margin: 0 auto; } .product-add-to-cart .row.product-quantity { justify-content: center; } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 1.7857142857rem; padding-bottom: 1.7857142857rem; color: #777777; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 0rem; padding-bottom: 0rem; } #content-wrapper .page-title { color: #333333; font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #333333; } #content-wrapper .section-title { color: #333333; font-size: 1.2142857143rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #f4f4f4; 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: 1rem; font-style: normal; font-weight: bold; text-transform: uppercase; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: #000000; border-bottom: solid 3px #f7ce7e; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .nav-link { border-bottom: solid 3px #f7ce7e; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #000000; border-bottom: solid 3px #f7ce7e; } #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: #f4f4f4; } #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: 2.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; text-align: center; 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: #f4f4f4; color: #636363; } #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: 3rem; padding-bottom: 2rem; 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.7857142857rem; padding-bottom: 1.7857142857rem; } @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; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } /* ============================================== #1. ESTILOS GENERALES Y RESET ============================================== */ /* Elimina los guiones automáticos y controla el ajuste de palabras */ .hm-categoria, .hm-subcategoria, .hm-grid-mini { hyphens: none !important; overflow-wrap: break-word; word-wrap: break-word; word-break: keep-all; } .no-wrap { white-space: nowrap; } /* ============================================== #2. ESTILOS DEL MENÚ PRINCIPAL ============================================== */ /* Estilos para ver todo menú */ .contenedor-flex { display: flex; gap: 15px; /* espacio pequeño entre los dos enlaces */ justify-content: flex-start; /* pegados a la izquierda */ align-items: center; /* opcional, para que se alineen verticalmente si tuvieran altura diferente */ } /* Estilos para

internos del menú - Móvil y Desktop / @media (max-width: 767px) { .hm-megamenu h5 { font-size: 14px; font-weight: 700; color: #555; margin: 0.75rem 0 0.25rem; padding-left: 0.5rem; border-left: 3px solid #9FB8A0; background-color: #f9f9f9; padding: 4px 8px; display: inline-block; border-radius: 4px; } } @media (min-width: 768px) { .hm-megamenu h5 { font-size: 1rem; font-weight: 700; color: #444; margin: 1rem 0 0.5rem; padding-left: 8px; border-left: 4px solid #9FB8A0; background-color: #fff; padding-top: 2px; padding-bottom: 2px; display: block; border-radius: 0; } } / Menú móvil + y - / @media (max-width: 767px) { .mobile-column { border-top: 1px solid #ddd; padding-top: 0.5rem; } .mobile-column ul, .mobile-column h5 { display: none; } .mobile-column.active ul, .mobile-column.active h5 { display: block; } .separador-menu { font-size: 14px; font-weight: 700; color: #555; margin: 0.75rem 0 0.25rem; padding: 4px 8px; border-left: 3px solid #F7CE7E; background-color: #f9f9f9; display: inline-block; border-radius: 4px; } .mobile-column-toggle { display: block; width: 100%; text-align: left; background: none; border: none; font-size: 16px; font-weight: 600; padding: 0.5rem 0; color: #333; cursor: pointer; border-bottom: 1px solid #ddd; position: relative; } .mobile-column-toggle::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: bold; font-size: 18px; color: #333; width: 24px; text-align: center; right: 5px; / separarlo un poco del borde / } .mobile-column-toggle[aria-expanded="true"] { color: #000; } .mobile-column-toggle[aria-expanded="true"]::after { content: "–"; color: #000; } .mobile-column ul { display: none; padding-left: 0.5rem; margin-top: 0.5rem; } .mobile-column.active h5, .mobile-column.active ul { display: block; } .cbp-column-title { display: none; } } / Estilos para la sección todas las categorías menú / .hm-megamenu-fullwidth { width: auto; margin-bottom: 0.8rem; padding-left: 1rem; } .ver-todas-categorias { font-weight: 700; font-size: 1.1rem; color: #9FB8A0 !important; text-decoration: none; display: inline-block; padding: 8px 12px; border-radius: 4px; transition: all 0.2s ease; } .ver-todas-categorias:hover { text-decoration: underline; background-color: #e9e9e9; } .hm-megamenu .cbp-links li { margin: 3px 0; padding: 2px; position: relative; width: 100%; border-style: solid; border-width: 0 0 1px; border-color: #e2e2e2; } .hm-megamenu .cbp-column-title { color: #4a3f35 !important; border-bottom: none; font-size: 1.15rem; font-weight: 700; text-transform: none; } / ============================================== #3. ESTILOS DEL MENÚ MÓVIL ============================================== / / Header móvil contenedor flex: iconos izquierda, cerrar derecha / .mobile-menuheader-wrapper { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; min-height: 48px; } / Contenedor iconos sociales (OCULTO POR DEFECTO) / .mobile-menuheader-wrapper .social-links { display: none; gap: 16px; margin: 0; padding: 0; list-style: none; align-items: center; } / Mostrar iconos solo en nivel 0 / .mobile-menuheader-wrapper[data-level="0"] .social-links { display: flex; } / Enlaces de iconos / .mobile-menuheader-wrapper .social-links li a { color: #333; font-size: 24px; display: flex; align-items: center; justify-content: center; padding: 0 8px; transition: color 0.3s ease; } .mobile-menuheader-wrapper .social-links li a:hover, .mobile-menuheader-wrapper .social-links li a:focus { color: #007bff; } / Botón cerrar a la derecha / .mobile-menuclose.js-mobile-menuclose { position: relative; z-index: 10; margin-left: auto; font-size: 24px; } / Título vacío sin espacio / .mobile-menutitle:empty { width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; } .mobile-menulink .js-mobile-menutab-title { display: block; line-height: 1.2; padding-right: 1rem; padding-left: 1rem; text-align: left; white-space: normal; word-break: break-word; } @media (max-width: 767px) { .mobile-menuproducts-row .product-miniature-container { width: 100% !important; display: block; padding: 8px 0; border-bottom: 1px solid #eee; } .mobile-menuproducts-row .product-miniature-container .row { margin: 0; display: flex; align-items: center; flex-wrap: nowrap; } .mobile-menuproducts-row .product-miniature-container .col-3 { flex: 0 0 50%; max-width: 50%; padding: 0 8px; } .mobile-menuproducts-row .product-miniature-container .col { flex: 0 0 50%; max-width: 50%; padding: 0 8px; text-align: left; } .mobile-menuproducts-row .product-miniature-container img { width: 100%; height: auto; border-radius: 6px; } .mobile-menu__products-row .product-miniature-container .product-price { font-size: 1.5rem; font-weight: 600; color: #2a2a2a; margin-top: 4px; display: block; } } / ============================================== #4. ESTILOS DE CATEGORÍAS Y PRODUCTOS ============================================== / / Base estilizada / .hm-categoria { font-family: 'Poppins', sans-serif; font-size: 1.05rem; line-height: 1.8; color: #333; max-width: 780px; margin: 0 auto; padding: 2.5rem 1.5rem; text-align: center; hyphens: auto; } / Jerarquía tipográfica / .hm-categoria h2 { font-size: 2.1rem; color: #3d3d3d; margin-bottom: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.5px; } .hm-categoria h3 { font-size: 1.4rem; color: #222; margin: 2.2rem 0 1rem; font-weight: 600; position: relative; display: inline-block; } .hm-categoria h3:after { content: ""; display: block; width: 50px; height: 2px; background: rgba(0,0,0,0.1); margin: 0.5rem auto 0; } .hm-categoria p { margin-bottom: 1.3rem; font-weight: 400; } / Listas con iconos modernos / .hm-categoria ul { padding-left: 0; margin: 1.5rem auto; max-width: 650px; text-align: left; list-style: none; } .hm-categoria li { margin-bottom: 0.8rem; padding-left: 1.8rem; position: relative; line-height: 1.6; } .hm-categoria li:before { content: "•"; color: #888; position: absolute; left: 0; font-size: 1.3rem; top: -1px; } / Destacado final / .hm-categoria-final { margin: 2.5rem 0 1rem; font-weight: 500; font-size: 1.2rem; color: #000; line-height: 1.5; position: relative; padding-top: 1.5rem; } .hm-categoria-final:before { content: ""; display: block; width: 30px; height: 1px; background: #ddd; margin: 0 auto 1.5rem; } / Grid para secciones / .hm-grid-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 2rem auto; max-width: 700px; } .hm-grid-mini > div { flex: 1; min-width: 200px; background: #f9f9f9; border-radius: 8px; padding: 1.2rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.3s ease; } .hm-grid-mini > div:hover { transform: translateY(-3px); } .hm-grid-mini h4 { font-size: 1.1rem; color: #000; margin-bottom: 0.6rem; font-weight: 600; } .hm-grid-mini p { font-size: 0.9rem; color: #666; margin-bottom: 0; } / Responsive / @media (max-width: 600px) { .hm-grid-mini > div { min-width: 100%; } .hm-categoria { padding: 1.5rem 1rem; font-size: 1rem; } .hm-categoria h2 { font-size: 1.8rem; } } / ============================================== #5. ESTILOS DE PRODUCTOS ============================================== / / Miniaturas de productos / .js-product-miniature-wrapper { padding: 0.2rem !important; } .product-miniature-grid .product-title { height: auto !important; } / Variantes de producto / .product-variants>.product-variants-item { display: flex; margin-right: 0; flex-direction: column; } .product-variants-item ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0; margin: 0; } .product-variants .input-radio, .product-variants .radio-label { border-radius: 10px; display: flex; align-items: center; justify-content: center; min-height: 3rem !important; } .product-variants .input-color, .product-variants .color { border-radius: 150px; width: 3rem; height: 3rem; } / Botón añadir al carrito / .add-to-cart { background: #F7CD7E !important; color: #393D3F !important; font-weight: bold !important; } / ============================================== #7. ESTILOS DEL CARRITO Y CHECKOUT ============================================== / / Carrito / .carrito { font-weight: bold; } .ps-shoppingcart .cart-products-count-btn { font-weight: 700 !important; } #form_ets_onepagecheckout .product-price, .product-line-info .current-price .price { color: #000 !important; } .block-onepagecheckout .input-group.bootstrap-touchspin input.js-cart-line-product-quantity { height: auto !important; } / Checkbox GDPR / #customer_create_psgdpr .checkbox label.gdpr-label { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } #customer_create_psgdpr .gdpr-text { margin: 0; } #customer_create_psgdpr input[type="checkbox"] { margin-top: 3px; } / ============================================== #8. ESTILOS DEL FOOTER ============================================== / / Contacto / .contact-rich>strong { margin-bottom: .5rem; display: inline-block; font-family: 'Montserrat'; font-size: 2rem; color: #333; text-transform: lowercase; } #footer .block-iqitcontactpage .block-title { display: none; } .block-iqitcontactpage hr { display: none; } .iconosocial-izquierda { text-align: left !important; padding: 0; } @media (max-width: 767px) { #footer .contact-rich { display: flex; flex-direction: column; text-align: center; } #footer .block-iqitcontactpage .block-content { display: block !important; } } @media (max-width: 768px) { .contact-rich { text-align: center; } .part, .contact-info { text-align: center; margin: 0 auto; } } / ============================================== #9. ESTILOS DE FAQ Y CONTENIDO ============================================== / / FAQ / .hm-faq { margin-top: 2rem; padding: 1.5rem; background-color: #fdf9f6; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); text-align: left; max-width: 780px; margin-left: auto; margin-right: auto; } .hm-faq h3 { font-size: 1.4rem; margin-bottom: 1rem; color: #222; font-weight: 600; } .hm-faq details { margin-bottom: 1rem; border-bottom: 1px solid #eee; padding-bottom: 0.8rem; } .hm-faq summary { font-weight: 600; cursor: pointer; font-size: 1.05rem; color: #333; list-style: none; position: relative; padding-right: 1.5rem; } .hm-faq summary::-webkit-details-marker { display: none; } .hm-faq summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.2rem; color: #999; transition: transform 0.3s ease; } .hm-faq details[open] summary::after { content: "−"; color: #333; } .hm-faq p { margin: 0.5rem 0 0 0; font-size: 0.95rem; color: #555; } .faq-container { display: flex; flex-wrap: wrap; gap: 20px; } .faq-column { flex: 1; min-width: 300px; margin-bottom: 15px; } @media (max-width: 767px) { .faq-column { flex: 100%; } } / ============================================== #10. ESTILOS DE TEXTO Y BLOQUES ============================================== / .hm-text p, .hm-text ul, .hm-text li { font-size: 1rem; line-height: 1.6; text-align: left; } .hm-text p { font-weight: 400; margin-bottom: 1em; } .hm-text ul { padding-left: 1.2em; margin-bottom: 1em; } .hm-text li { margin-bottom: 0.5em; } .resumen-producto p { font-size: 1rem; font-weight: 500; line-height: 1.6; text-align: left; margin-bottom: 1em; } / ============================================== #11. ESTILOS DE BOTONES Y FORMULARIOS ============================================== / / Botones generales / .btn-secondary { font-weight: 700; } .boton-tab { background-color: transparent; color: #373d3f !important; text-transform: uppercase; font-weight: 600; display: flex !important; font-style: inherit; align-items: center; justify-content: space-between; } .boton-tab:hover, .boton-tab:focus { background-color: transparent; } .boton-menu { background-color: #F7CD7E !important; } / Formularios / .form-control { border-radius: 10px; } select.form-control:not([size]):not([multiple]) { height: 3rem; padding: 0rem 1.5em 0rem 0.5rem; } .input-group .input-group-btn>.btn { background: #393D3F !important; color: #fff !important; } / ============================================== #12. ESTILOS DE ICONOS Y ELEMENTOS GRÁFICOS ============================================== / / Iconos sociales / .block-social-links a { display: inline-flex; align-items: center; justify-content: center; background: #f7ce7e; border-radius: 50%; width: 40px; height: 40px; } .block-social-links i { font-size: 1.5rem; color: #fff; } .facebook i { background-color: transparent; } .elementor-heading-title .fa { margin-right: 1rem; color: #f7ce7e; } / Iconos Font Awesome / .fa-dove { margin-right: 1rem; } .fa-solid, .fas { width: 1.25em; text-align: center; } / Elimina el contenido automático de Font Awesome / .fa-angle-up:before, .fa-angle-down:before { content: "" !important; } .bootstrap-touchspin-up:before, .bootstrap-touchspin-down:before { content: ""; } / Añade manualmente el icono de FA arriba / .bootstrap-touchspin-up:after { content: "\f106"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: inline-block; } / Añade manualmente el icono de FA abajo / .bootstrap-touchspin-down:after { content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: inline-block; } .bootstrap-touchspin-up:after, .bootstrap-touchspin-down:after { display: flex; align-items: center; justify-content: center; font-size: 7px; line-height: 1; width: 100%; height: 100%; } .bootstrap-touchspin-up, .bootstrap-touchspin-down { padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .block-onepagecheckout .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:before, .block-onepagecheckout .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down:before { content: ""; } .block-onepagecheckout .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { width: 25px !important; } .block-onepagecheckout .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { width: 25px !important; } / ============================================== #13. ESTILOS DE IMÁGENES Y GALERÍAS ============================================== / / Galería de productos / .images-container .swiper-button-arrow { opacity: .5 !important; background-color: #ffcc5c; color: #ffffff; border: none; border-radius: 30px; padding: 10px 20px; font-size: 16px; font-family: 'Poppins', sans-serif; cursor: pointer; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .images-container .swiper-button-arrow:hover { background-color: #ffb347; box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); transform: translateY(-2px); opacity: 1 !important; } @media (max-width: 768px) { .images-container .swiper-button-arrow { border-radius: 20px; padding: 8px 16px; font-size: 14px; box-shadow: none; } } @media (max-width: 480px) { .images-container .swiper-button-arrow { border-radius: 15px; padding: 6px 12px; font-size: 12px; box-shadow: none; } } / Imágenes de productos / .product-cover .layer { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; cursor: pointer; background: rgb(223 223 223 / 0%); opacity: 0; } .product-cover .layer:hover { opacity: 1; } .fotoredonda { border-radius: 32px !important; } / ============================================== #14. ESTILOS RESPONSIVE Y MEDIA QUERIES ============================================== / @media (max-width: 600px) { .desktop-only { display: none; } .revi-widget-grid-1 .revi-view-all-reviews { display: contents !important; } } @media (min-width: 601px) { .mobile-only { display: none; } } / ============================================== #15. ESTILOS VARIOS Y COMPLEMENTOS ============================================== / / Barra de anuncios / .announcement-bar { background-color: #f7cd7e; color: #333333; font-size: 16px; font-weight: bold; text-align: center; padding: 10px 0; overflow: hidden; position: relative; height: 40px; } .carousel { position: relative; height: 100%; } .carousel p { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 1s ease; } .carousel p.active { opacity: 1; } / Especificaciones / .specs-container { display: flex; flex-direction: column; } .specs-image { width: 100%; margin: 20px auto; text-align: left; } .specs-image img { width: 25%; height: auto; text-align: left; } .specs-text { width: 100%; margin-bottom: 20px; } @media (max-width: 768px) { .specs-image img { width: 50%; } } / Revi (reseñas) / .revi-container, .revi-element-content { max-width: 1920px !important; } .revi-widget-grid-1 .revi-business-avg-rating .revi-avg-rating { margin-bottom: 1rem !important; } .revi-element-content .swiper-pagination-bullet-active { background: #000000 !important; } .revi-widget-product-3 .revi-business-avg-rating .revi-avg-rating { margin-bottom: 1rem; } .revi-widget-grid-1 .revi-reviews { grid-template-columns: auto !important; } / ============================================== #16. ESTILOS DE BLOQUES PERSONALIZADOS ============================================== / / Ocultar el H1 de la homepage solo visualmente (permanece visible para Google) / .hm-hidden-h1 { font-size: 0; height: 0; overflow: hidden; text-indent: -9999px; display: block; } .hm-bio-marca { background: transparent; / Sin fondo / padding: 2rem 0; / Solo espacio arriba y abajo / border-radius: 0; / Sin bordes / font-size: 1rem; line-height: 1.7; color: #333; box-shadow: none; / Sin sombra / margin-top: 3rem; } .hm-bio-marca h2 { font-size: 1.5rem; font-weight: 600; color: #9CAD84; / Verde salvia / margin-bottom: 1rem; } .hm-bio-marca p { margin-bottom: 1rem; } .hm-switch-model{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background-color:#f6fdfb; border:1px solid #d8efe7; border-radius:10px; padding:10px 16px; font-size:14px; color:#4C6650; font-weight:600; margin:1rem auto 0; text-decoration:none; transition:background-color .25s ease, border-color .25s ease, transform .05s ease; box-shadow:0 1px 3px rgba(0,0,0,.06); width:fit-content; } .hm-switch-model:hover{ background-color:#e6f5ef; border-color:#c7e6db; } .hm-switch-model:active{ transform:translateY(1px); } .hm-switch-model:focus{ outline:2px solid rgba(76,102,80,.30); outline-offset:2px; } / ============================================== #17. ESTILOS DE POSICIONAMIENTO Y DISPLAY ============================================== / .hotinfo_top { position: initial !important; } .header-top { padding-top: 40px; } / ============================================== #18. ESTILOS DE TEXTO Y TÍTULOS ============================================== / .titulo-cross { font-size: 2rem !important; text-align: center; } .cbp-hrmenu>ul>li#cbp-hrmenu-tab-42>a, .cbp-hrmenu>ul>li#cbp-hrmenu-tab-42>span.cbp-main-link { border-radius: 10px; } .cbp-hrmenu .cbp-submenu-aindicator { display: none; } / ============================================== #19. ESTILOS DE COLORES Y FONDOS ============================================== / .personaliza { background: #393d3f; } .personaliza:hover { background: #393d3f; } / ============================================== #20. ESTILOS DE MARGIN Y PADDING ============================================== / .discount-percentage { padding: 3px !important; margin-right: 0.5rem; } .block-links ul li { margin-bottom: .9rem; } / ============================================== #21. ESTILOS DE VISIBILIDAD ============================================== / #product-details-tab-nav { display: none; } .ma_block_qty { display: none; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0%; } / ============================================== #22. ESTILOS DE ELEMENTOS ESPECÍFICOS ============================================== / #checkout .modal button.close { margin-right: 10px; color: red; } .pago_abajo { display: flex; flex-direction: column; align-items: center; } .safe_icon { margin-top: 10px; } .text-center img.safe_icon { display: block; margin: 20px auto 0; } .elementor-button-link { margin: 1rem !important; } .elementor-element.elementor-element-5xp777e .elementor-iqit-banner-overlay { background-color: rgba(125,93,76,0.47); display: block; opacity: 1; } .elementor-heading-title span { } .flex-fill mobile-menulink { background-color: #ecfbfb; !important; } .js-mobile-menutab-title { padding: 10px; } .mobile-menulink { color: #2a2a2a; padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; font-size: 16px; font-style: normal; font-weight: 700; text-transform: none; padding: 15px; } #header .header-btn-w .header-btn>.icon { font-size: 2rem; } / ============================================== #23. ESTILOS DE ELEMENTOS NOTA REGALO ============================================== / / 🎁 Estilo popup nota regalo Hakuna / .popup-hakuna { font-family: inherit; color: #333; max-width: 500px; margin: 0 auto; padding: 2rem; background: #fff9f2; border-radius: 8px; text-align: center; } .popup-hakunatitle { font-size: 1.5rem; font-weight: 700; color: #d97706; margin-bottom: 1rem; } .popup-hakunadescription { font-size: 1rem; color: #555; margin-bottom: 2rem; } .popup-hakunaproduct { border: 1px solid #eee; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; background: #fff; } .popup-hakunarow { display: flex; align-items: center; justify-content: space-between; } .popup-hakunaproduct-name { font-weight: 600; } .popup-hakunaproduct-price { font-size: 0.9rem; color: #777; } .popup-hakunafields label { font-weight: 600; display: block; text-align: left; margin-top: 1rem; } .popup-hakunafields input, .popup-hakunafields textarea { width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem; margin-top: 0.25rem; } .popup-hakunabutton { display: inline-block; background: #f7ce7e; color: #333; font-weight: 700; border: none; border-radius: 4px; padding: 1rem 2rem; margin-top: 2rem; cursor: pointer; transition: background 0.3s ease; } .popup-hakunabutton:hover { background: #e8ba60; } / ============================================== #24. FAQ Acordeón personalizado Hakuna ============================================== / .hm-faq-acordeon { max-width: 780px; margin: 2rem auto; border-radius: 1rem; background: #fff9f2; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .hm-faq-acordeon .faq-item { border-bottom: 1px solid #eee; } .hm-faq-acordeon .faq-question { width: 100%; background: none; border: none; font-size: 1.1rem; font-weight: 600; text-align: left; padding: 1rem 0; cursor: pointer; color: #333; position: relative; } .hm-faq-acordeon .faq-question::after { content: "+"; position: absolute; right: 0; top: 1rem; font-size: 1.2rem; color: #F7CD7E; transition: transform 0.3s ease; } .hm-faq-acordeon .faq-item.active .faq-question::after { content: "−"; color: #F7CD7E; } .hm-faq-acordeon .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; font-size: 1rem; color: #555; padding: 0 0 0 0; } .hm-faq-acordeon .faq-item.active .faq-answer { max-height: 500px; padding: 0 0 1rem 0; } .hm-faq-acordeon .faq-answer p { margin: 0; padding: 0 0 1rem 0; } / Texto introductorio del FAQ IA / .faq-intro { font-size: 1rem; font-weight: 400; line-height: 1.5; color: #333; margin-bottom: 20px; } .faq-intro strong { font-weight: 600; } .faq-intro a { color: #c69c6d; text-decoration: underline; } / Estilo específico para enlaces del FAQ / .faq-link { font-weight: 600; color: #d64f2d; text-decoration: underline; } / Botón de carrito destacado / .btn-cart-highlight { background-color: #f7cd7e; color: #222 !important; border: none; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; padding: 10px 15px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-radius: 4px; display: block; width: 100%; text-align: center; text-decoration: none; } .btn-cart-highlight:hover { background-color: #f4be59; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } / Desactivar el carrusel y mostrar en lista / .js-qv-mask { overflow: visible !important; height: auto !important; } #product-images-thumbs { display: flex; flex-wrap: wrap; gap: 10px; transform: none !important; } #product-images-thumbs .swiper-wrapper { display: flex; flex-wrap: wrap; gap: 10px; width: 100% !important; transform: none !important; } #product-images-thumbs .swiper-slide { width: calc(25% - 10px) !important; height: auto !important; margin: 0 !important; } / Ocultar flechas de navegación / #product-images-thumbs .swiper-button-prev, #product-images-thumbs .swiper-button-next { display: none !important; } / Estilos para dispositivos móviles / @media (max-width: 991px) { #product-images-thumbs .swiper-slide { width: calc(33.333% - 10px) !important; } } @media (max-width: 767px) { #product-images-thumbs .swiper-slide { width: calc(33.333% - 10px) !important; } } .images-container .swiper-button-prev, .images-container .swiper-button-next { z-index: 11; position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; background: #fff; border: 1px solid #ddd; border-radius: 50%; opacity: 0; transition: all 0.2s ease; outline: none !important; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .images-container:hover .swiper-button-prev, .images-container:hover .swiper-button-next { opacity: 1; } .images-container .swiper-button-prev { left: 10px; } .images-container .swiper-button-next { right: 10px; } / Elimina flechas por defecto de Swiper / .images-container .swiper-button-prev::after, .images-container .swiper-button-next::after { display: none !important; } / Flechas SVG personalizadas / .images-container .swiper-button-prev::before, .images-container .swiper-button-next::before { content: ''; display: block; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: contain; } .images-container .swiper-button-prev::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); } .images-container .swiper-button-next::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E"); } / Hover en flechas principales / .images-container .swiper-button-prev:hover, .images-container .swiper-button-next:hover { background-color: #f7cd7e !important; border-color: #f7cd7e !important; } / 🧼 Alinear botón de cerrar a la derecha en popup de personalización del checkout / .modal-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; / Evita que los elementos se muevan a otra línea / padding: 15px; / Asegura padding consistente / } .modal-header .close { order: 2; / Coloca el botón de cerrar al final (derecha) / margin: 0; padding: 0; position: static; / Por si tiene posición absoluta / line-height: 1; / Evita altura extra / } .modal-title { order: 1; / Asegura que el título esté a la izquierda / margin: 0; padding-right: 20px; / Espacio entre título y botón / line-height: 1.4; / Debe coincidir con la altura del botón cerrar / } / Solo para el menú principal / .cbp-hrmenu .cbp-submenu-aindicator { display: inline-block !important; } .cbp-hrmenu .cbp-submenu-aindicator.fa-angle-down:before { content: "\f107" !important; font-size: 12px !important; margin-left: 5px !important; } / Estilos del icono de cookies kawaii / #cookiesplus-tab { background: none !important; / sin fondo / border: none !important; / sin borde / box-shadow: none !important; / sin sombra / padding: 0 !important; margin: 0 0px 10px 10px !important; / arriba, derecha, abajo, izquierda / } #cookiesplus-tab span { font-size: 28px; / tamaño de la galleta / cursor: pointer; line-height: 1; } .hm-resumen-pack { font-size: 15px; line-height: 1.6; margin-top: 10px; } .hm-personalizacion-instrucciones { background: #f9f9f9; border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px; text-align: left; / bloque alineado a la izquierda / } .hm-personalizacion-instrucciones ol { padding-left: 20px; / espacio para numeración / margin-left: auto; margin-right: auto; / centra la lista dentro del bloque / display: inline-block; / hace que la lista se ajuste / } .hm-personalizacion-instrucciones li { text-align: left; / texto alineado a la izquierda / display: list-item; / asegura que los números se muestren / margin-bottom: 5px; } .hm-personalizacion-ejemplo { background: #f1f7f9; padding: 10px; margin-top: 10px; border-radius: 5px; text-align: left; / mantiene este bloque alineado a la izquierda / } .hm-aviso-pack { background: #eaf6f9; padding: 10px; border-left: 5px solid #5ac8fa; margin-top: 15px; font-size: 14px; } / ======================================== Menú Navidad en móviles ======================================== / @media (max-width: 991px) { / Cambiar color del primer nivel NAVIDAD en móvil / .mobile-menutab--id-36 .js-mobile-menutab-title { color: #D6455D !important; font-weight: 600; } / Mostrar siempre todos los enlaces dentro del menú de Navidad / .mobile-column[data-title="Navidad"] .cbp-links { display: block !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; } / Ocultar h4 del submenu y cualquier título duplicado / .mobile-column[data-title="Navidad"] .cbp-column-title, .mobile-column[data-title="Navidad"] .cbp-submenu-title { display: none !important; } / Quitar flechas de títulos ocultos / .mobile-column[data-title="Navidad"] .cbp-column-title::after, .mobile-column[data-title="Navidad"] .cbp-submenu-title::after { display: none !important; } } / ======================================== Botón especial del menú de Navidad ======================================== / .btn-navidad { display: inline-block; background-color: #D6455D; color: #ffffff !important; text-decoration: none; font-weight: 600; padding: 10px 20px; border-radius: 4px; transition: background-color 0.2s ease; } .btn-navidad:hover, .btn-navidad:focus, .btn-navidad:active { background-color: #8e3232; color: #ffffff !important; } .mobile-menutab--id-36 .js-mobile-menutab-title { font-weight: 700 !important; } / Logo 230px solo en desktop / @media (min-width: 992px) { #desktop_logo .img-fluid { max-width: 230px !important; height: auto !important; padding-left: 13px !important; } } / Logo 80% en móvil y tablet / @media (max-width: 991px) { .col-mobile-logo .img-fluid { max-width: 80% !important; height: auto !important; } } / ===== Botón WhatsApp ===== / / Contenedor del botón flotante / .float-bottom-right, .float-floating { width: 60px !important; / ← súbelo hasta que quede igual que el de cookies / height: 60px !important; background-color: transparent !important; box-shadow: none !important; border-radius: 50% !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; } / Icono / .whatsapp-icon-3x { background-image: url('/img/whatsapp.svg') !important; background-repeat: no-repeat !important; background-size: contain !important; / se ajusta al contenedor / background-position: center !important; width: 100% !important; / ← esto hace que ocupe todo el contenedor / height: 100% !important; margin: 0 !important; mask-image: none !important; display: block !important; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget{ max-width:50% !important; } / Por defecto (desktop) oculto / .hm-viewall-mobile { display: none; } @media (max-width: 767px) { .hm-viewall-mobile { display: block; text-align: center; / centra el botón / margin: 12px 0 16px; / más aire arriba y abajo / } .hm-viewall-mobile a{ display: inline-block; background-color: #9FB8A0; color: #ffffff !important; border: none; border-radius: 999px; padding: 10px 18px; / más grande, más CTA / font-weight: 700; font-size: 0.95em; opacity: 1; text-decoration: none; } } @media (max-width: 767px) { / ===== TÍTULO DE LA COLUMNA ===== / / recuerda que en móvil tu h4 se oculta y se usa el botón / .mobile-column-toggle{ color: #000000 !important; font-weight: 700; text-transform: uppercase; padding-right: 34px; / espacio reservado para el icono / position: relative; } } .hm-info-box{ background:#f7f7f7; border:1px solid #e5e5e5; padding:12px 16px; border-radius:8px; margin:12px 0; font-size:14px; line-height:1.4; } / ========================================================= Pestaña producto – Plazos de entrega Hakuna Mataza (v2) Menos fondos grises + jerarquía + Express destacado ========================================================= / .hm-shipping{font-family:inherit;line-height:1.55} .hm-shipping .hm-title{margin:0 0 10px;font-size:18px;font-weight:800} .hm-shipping .hm-subtitle{margin:22px 0 10px;font-size:16px;font-weight:800} .hm-shipping .hm-kicker{margin:0 0 14px;opacity:.85} / Tarjetas plazos / .hm-shipping .hm-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:14px 0 10px; } .hm-shipping .hm-card{ border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:14px 12px; text-align:center; background:#fff; } .hm-shipping .hm-card img{ width:44px;height:44px; display:block;margin:0 auto 10px; } .hm-shipping .hm-card .hm-type{font-weight:900;letter-spacing:.4px} .hm-shipping .hm-card .hm-days{margin-top:4px;font-weight:700;opacity:.9} .hm-shipping .hm-badge{ display:inline-block; margin-top:10px; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.06); font-size:12px; font-weight:700; } / Destacar Express / .hm-shipping .hm-card.is-featured{ border:2px solid rgba(0,0,0,.28); background:rgba(0,0,0,.02); transform:translateY(-2px); } / Gastos de envío: sin fondos, solo separación / .hm-shipping .hm-fees{ border:1px solid rgba(0,0,0,.10); border-radius:12px; background:#fff; overflow:hidden; } .hm-shipping .hm-fees-item{ padding:14px 14px; border-top:1px solid rgba(0,0,0,.08); } .hm-shipping .hm-fees-item:first-child{border-top:0} .hm-shipping .hm-fees-item-title{ font-weight:900; margin:0 0 8px; } .hm-shipping .hm-fees ul{margin:0;padding-left:18px} .hm-shipping .hm-fees li{margin:6px 0} / Aviso +10 unidades (dentro de gastos) / .hm-shipping .hm-alert{ margin:12px 0 0; padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:rgba(0,0,0,.03); } / Información adicional: bloque destacado / .hm-shipping .hm-note{ border:1px solid rgba(0,0,0,.12); border-left:4px solid rgba(0,0,0,.28); padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.04); margin-top:10px; } .hm-shipping .hm-note strong{font-weight:900} @media (max-width: 980px){ .hm-shipping .hm-grid{grid-template-columns:repeat(2, minmax(0,1fr))} } @media (max-width: 520px){ .hm-shipping .hm-grid{grid-template-columns:1fr} .hm-shipping .hm-title{font-size:17px} .hm-shipping .hm-card.is-featured{transform:none} } / ========================================================= Hakuna – Info box naturaleza / madera (color marca) ========================================================= / .hm-info-box.hm-info-nature{ background: linear-gradient(135deg, #f7faf7 0%, #eef4ef 100%); border: 1px solid rgba(159,184,160,0.45); border-left: 6px solid #9FB8A0; border-radius: 10px; padding: 18px 20px; margin: 22px 0; box-shadow: 0 6px 18px rgba(0,0,0,0.06); transition: transform .15s ease, box-shadow .15s ease; } / pequeño efecto hover elegante / .hm-info-box.hm-info-nature:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.08); } .hm-info-box.hm-info-nature h3{ color: #6f8f73; margin-bottom: 8px; } .hm-info-box.hm-info-nature p{ margin: 0; font-size: 14.5px; line-height: 1.6; color: #2f3e34; } / ========================= IDIOMAS (Hakuna) ========================= / .hm-idiomas{ padding: 80px 0; } .hm-idiomascontent{ max-width: 560px; } .hm-idiomaskicker{ font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; margin: 0 0 12px 0; opacity: .9; } .hm-idiomastitle{ font-size: 42px; line-height: 1.1; margin: 0 0 16px 0; } .hm-idiomasintro{ font-size: 16px; line-height: 1.6; margin: 0 0 18px 0; opacity: .9; } .hm-idiomasbullets{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px 0; } .hm-idiomasbullet{ padding: 10px 14px; border-radius: 999px; font-size: 14px; background: #f3f6fb; font-weight: 600; } .hm-idiomasnote{ background: #fff7ed; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 16px 18px; } .hm-idiomasnote p{ margin: 0 0 10px 0; line-height: 1.55; } .hm-idiomasexample{ margin: 0; font-size: 14px; opacity: .9; } .hm-idiomasexample span{ font-weight: 700; } .hm-idiomashow{ margin-top: 40px; } .hm-idiomashowtitle{ font-size: 22px; margin: 0 0 18px 0; } .hm-idiomassteps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hm-idiomasstep{ background: #ffffff; border: 1px solid rgba(0,0,0,.07); border-radius: 18px; padding: 18px 18px; box-shadow: 0 10px 25px rgba(0,0,0,.04); } .hm-idiomasnum{ width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: #f3f6fb; margin-bottom: 10px; } .hm-idiomassteptitle{ margin: 0 0 8px 0; font-size: 16px; } .hm-idiomassteptext{ margin: 0; font-size: 14px; line-height: 1.55; opacity: .9; } .hm-idiomasfooter{ margin: 18px 0 0 0; font-size: 15px; opacity: .95; } / Media (imagen) / .hm-idiomasmedia img{ border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.10); } / Responsive / @media (max-width: 980px){ .hm-idiomas{ padding: 55px 0; } .hm-idiomastitle{ font-size: 34px; } .hm-idiomassteps{ grid-template-columns: 1fr; } .hm-idiomasmedia{ margin-top: 22px; } } / Ejemplos de traducción / .hm-idiomastrads{ margin: 10px 0 0 0; padding-left: 18px; } .hm-idiomastrads li{ margin: 6px 0; font-size: 14px; line-height: 1.45; opacity: .95; } .hm-idiomasexample2{ margin: 12px 0 0 0; font-size: 14px; opacity: .95; } .hm-idiomasexample2 span{ font-weight: 800; } / ========================= CMS IDIOMAS (cms-id-8) Quitar formulario de contacto ========================= / body.page-cms.cms-id-8 section.contact-form{ display: none !important; } / ========================= ENVIOS - CMS ========================= / .hm-envios{ max-width: 1100px; margin: 0 auto; padding: 10px 0 40px; } .hm-envioshead{ margin: 10px 0 26px; } .hm-envioskicker{ font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; opacity: .9; margin: 0 0 10px; } .hm-enviostitle{ font-size: 34px; line-height: 1.15; margin: 0 0 10px; } .hm-enviosintro{ margin: 0; font-size: 16px; line-height: 1.6; opacity: .9; max-width: 780px; } .hm-envioscard{ background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 20px 20px; margin: 0 0 16px; box-shadow: 0 12px 30px rgba(0,0,0,.04); } .hm-enviosh3{ font-size: 18px; margin: 0 0 14px; } .hm-enviosh4{ font-size: 15px; margin: 0 0 10px; } .hm-enviosp{ margin: 0; font-size: 14px; line-height: 1.6; opacity: .92; } .hm-enviosgrid4{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 14px; } .hm-enviospill{ background: #f3f6fb; border-radius: 14px; padding: 14px 14px; border: 1px solid rgba(0,0,0,.05); } .hm-enviospilltitle{ font-weight: 800; font-size: 13px; margin: 0 0 6px; } .hm-enviospilltext{ font-size: 13px; opacity: .9; } .hm-enviosnote{ background: #fff7ed; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.55; margin: 0 0 12px; } .hm-envioshighlight{ background: #f7fbff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.55; } .hm-envioscols{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 6px; } .hm-envioscols2{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 6px; } .hm-enviosbox{ background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 14px 14px; } .hm-envioslist{ margin: 0; padding-left: 18px; } .hm-envioslist li{ margin: 6px 0; font-size: 14px; line-height: 1.55; opacity: .92; } .hm-enviosfoot{ margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; opacity: .8; } .hm-enviosexample{ margin-top: 12px; background: #f3f6fb; border: 1px solid rgba(0,0,0,.05); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.55; opacity: .95; } .hm-envioscta{ border: 1px solid rgba(0,0,0,.10); } / Responsive / @media (max-width: 980px){ .hm-envios{ padding: 0 0 28px; } .hm-enviostitle{ font-size: 28px; } .hm-enviosgrid4{ grid-template-columns: 1fr; } .hm-envioscols{ grid-template-columns: 1fr; } .hm-envioscols2{ grid-template-columns: 1fr; } } / CTA categoría padre en megamenú / .hm-megamenu-parent-cta{ text-align:center; padding:0 0 30px; border-bottom:1px solid rgba(0,0,0,.06); } .hm-megamenu-parent-cta a{ display:inline-block; background:#9FB8A0; / puedes ajustar al verde exacto / color:#fff !important; padding:10px 22px; border-radius:30px; font-weight:600; font-size:14px; transition:all .2s ease; } .hm-megamenu-parent-cta a:hover{ transform:translateY(-2px); opacity:.9; } / Ocultar en móvil / @media (max-width:1024px){ .hm-megamenu-parent-cta{ display:none; } } / Tarjetas de la sección "Vuestros favoritos" / .elementor-element-a9hbmiz .product-miniature { height: 100%; } .elementor-element-a9hbmiz .thumbnail-container { height: 100%; display: flex; flex-direction: column; } .elementor-element-a9hbmiz .product-description { flex: 1; display: flex; flex-direction: column; } / Título con un poco de aire lateral / .elementor-element-a9hbmiz .product-title { padding-left: 8px; padding-right: 8px; margin-bottom: 8px; } / También al enlace del título por si el padding no respeta bien / .elementor-element-a9hbmiz .product-title a { display: block; padding-left: 4px; padding-right: 4px; } / Empuja el bloque de precio hacia abajo / .elementor-element-a9hbmiz .product-price-and-shipping { margin-top: auto; padding-top: 10px; min-height: 34px; display: flex; align-items: flex-end; justify-content: center; } / Precio más estable visualmente / .elementor-element-a9hbmiz .product-price { display: inline-block; line-height: 1.2; } / Opcional: que la referencia y descripción corta no metan desorden / .elementor-element-a9hbmiz .product-reference, .elementor-element-a9hbmiz .product-description-short, .elementor-element-a9hbmiz .product-add-cart { margin-top: 8px; } .elementor-element-a9hbmiz .thumbnail-container { overflow: hidden; } .elementor-element-a9hbmiz .product-thumbnail { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f5f5f5; } .elementor-element-a9hbmiz .product-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } / Por si la segunda imagen del hover se descuadra / .elementor-element-a9hbmiz .product-thumbnail-first, .elementor-element-a9hbmiz .product-thumbnail-second { width: 100%; height: 100%; object-fit: cover; } / ========================= SOBRE NOSOTROS- CMS ========================= / / ========================== SOBRE NOSOTROS · HAKUNA MATAZA ========================== / .hm-abouthero, .hm-aboutstory, .hm-aboutteamhead, .hm-aboutbox, .hm-aboutcard { font-family: inherit; color: #7c7c7c; } .hm-abouthero { max-width: 560px; padding: 8px 0; } .hm-aboutkicker { margin: 0 0 18px; font-size: 13px; line-height: 1.2; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: #a79c90; } .hm-abouttitle { margin: 0 0 22px; font-size: 58px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: #6f6f6f; } .hm-aboutintro { margin: 0 0 22px; font-size: 19px; line-height: 1.7; color: #8b8b8b; max-width: 540px; } .hm-aboutbullets { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .hm-aboutbullet { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 999px; background: #f2f2f4; color: #7b7b7b; font-size: 15px; font-weight: 600; line-height: 1.2; } / ========================== TITULOS DE SECCIÓN ========================== / .hm-aboutsectiontitle { margin: 0 0 18px; font-size: 34px; line-height: 1.15; font-weight: 700; color: #727272; letter-spacing: -0.02em; } .hm-aboutsectionintro { margin: 0 auto 8px; max-width: 760px; font-size: 18px; line-height: 1.7; color: #8c8c8c; text-align: center; } / ========================== HISTORIA ========================== / .hm-aboutstory { max-width: 980px; margin: 0 auto; } .hm-aboutstory p { margin: 0 0 16px; font-size: 18px; line-height: 1.8; color: #8a8a8a; } .hm-aboutstory strong { color: #6f6f6f; font-weight: 700; } .hm-aboutnote { margin-top: 26px; padding: 26px 28px; border-radius: 22px; background: #f7f1e8; border: 1px solid #efe2d3; } .hm-aboutnote p { margin: 0; font-size: 17px; line-height: 1.75; color: #85796d; } / ========================== CABECERA EQUIPO ========================== / .hm-aboutteamhead { text-align: center; margin: 0 auto 8px; } .hm-aboutteamhead .hm-aboutsectiontitle { margin-bottom: 10px; } / ========================== TARJETAS EQUIPO ========================== / .hm-aboutcard { text-align: left; padding: 0 6px; } .hm-aboutcardtitle { margin: 0 0 14px; font-size: 21px; line-height: 1.3; font-weight: 700; color: #727272; letter-spacing: -0.01em; } .hm-aboutcardtext { margin: 0; font-size: 17px; line-height: 1.75; color: #8b8b8b; } / ========================== BLOQUES 2 COLUMNAS ========================== / .hm-aboutbox { height: 100%; padding: 34px 36px; border-radius: 26px; background: #fcfcfc; border: 1px solid #f0f0f0; box-shadow: 0 8px 24px rgba(0,0,0,0.03); } .hm-aboutbox p { margin: 0 0 16px; font-size: 17px; line-height: 1.8; color: #8a8a8a; } .hm-aboutbox p:last-child { margin-bottom: 0; } .hm-aboutbox strong { color: #6f6f6f; font-weight: 700; } .hm-aboutbox em { font-style: italic; color: #8b8b8b; } .hm-aboutbox-soft { background: #f8f4ef; border-color: #eee1d2; } .hm-aboutcta { background: linear-gradient(180deg, #fcfaf7 0%, #f8f2ea 100%); border-color: #efdfcf; } .hm-aboutcta-link { margin-top: 24px !important; font-size: 18px !important; font-weight: 700; } .hm-aboutcta-link a { color: #8c7258; text-decoration: none; border-bottom: 1px solid rgba(140,114,88,.25); transition: all .25s ease; } .hm-aboutcta-link a:hover { color: #6f5640; border-bottom-color: rgba(111,86,64,.45); } / ========================== IMÁGENES GENERALES DENTRO DE LA PÁGINA ========================== / .hm-aboutimg img, .hm-aboutteamimg img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.06); } / Si quieres envolver una imagen en un div con clase hm-aboutimg / .hm-aboutimg { overflow: hidden; border-radius: 28px; } / ========================== AJUSTES VISUALES PARA TÍTULOS LARGOS ========================== / .hm-abouttitle br { display: block; } / ========================== RESPONSIVE ========================== / @media (max-width: 1199px) { .hm-abouttitle { font-size: 50px; } .hm-aboutintro { font-size: 18px; } .hm-aboutsectiontitle { font-size: 30px; } .hm-aboutbox { padding: 30px 28px; } } @media (max-width: 991px) { .hm-abouthero { max-width: 100%; text-align: center; margin: 0 auto; } .hm-aboutintro { max-width: 100%; } .hm-aboutbullets { justify-content: center; } .hm-aboutstory { max-width: 100%; } .hm-aboutsectiontitle { font-size: 28px; } .hm-aboutcard { text-align: center; padding: 0; } .hm-aboutbox { padding: 28px 24px; } } @media (max-width: 767px) { .hm-aboutkicker { font-size: 12px; margin-bottom: 14px; } .hm-abouttitle { font-size: 40px; line-height: 1.05; margin-bottom: 18px; } .hm-aboutintro { font-size: 17px; line-height: 1.7; margin-bottom: 18px; } .hm-aboutbullet { min-height: 38px; padding: 9px 14px; font-size: 14px; } .hm-aboutsectiontitle { font-size: 25px; margin-bottom: 14px; } .hm-aboutsectionintro { font-size: 16px; line-height: 1.65; } .hm-aboutstory p, .hm-aboutcardtext, .hm-aboutbox p, .hm-aboutnote p { font-size: 16px; line-height: 1.75; } .hm-aboutcardtitle { font-size: 20px; margin-bottom: 10px; } .hm-aboutbox { padding: 24px 20px; border-radius: 22px; } .hm-aboutnote { padding: 22px 20px; border-radius: 20px; } .hm-aboutimg img, .hm-aboutteamimg img { border-radius: 22px; } } @media (max-width: 480px) { .hm-abouttitle { font-size: 34px; } .hm-aboutsectiontitle { font-size: 23px; } .hm-aboutbullets { gap: 10px; } .hm-about__bullet { width: auto; max-width: 100%; } } / ===================================================== ANCHO MÁXIMO DEL CHECKOUT ===================================================== / #form_ets_onepagecheckout { max-width: 1100px; margin: 0 auto; float: none; } / ===================================================== ELIMINAR BORDES, FONDOS Y SOMBRAS DE LAS SECCIONES ===================================================== / #form_ets_onepagecheckout .block-onepagecheckout, #form_ets_onepagecheckout .card, #form_ets_onepagecheckout .cart-container, #form_ets_onepagecheckout .cart-summary, #form_ets_onepagecheckout .cart-total-action { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin-bottom: 32px; } #form_ets_onepagecheckout .title-heading { border: none !important; background: transparent !important; padding: 0 0 12px 0 !important; margin-bottom: 12px !important; } / ===================================================== OCULTAR LABELS (usamos placeholders) ===================================================== / #form_ets_onepagecheckout .form-control-label { display: none !important; } #form_ets_onepagecheckout label[for="customer_create_newsletter_check"].form-control-label, #form_ets_onepagecheckout label[for="customer_create_psgdpr_check"].form-control-label, #form_ets_onepagecheckout label[for="customer_create_customer_privacy_check"].form-control-label { display: flex !important; align-items: flex-start !important; width: 100%; gap: 8px; } #form_ets_onepagecheckout label[for="customer_create_psgdpr_check"] .gdpr-text, #form_ets_onepagecheckout label[for="customer_create_psgdpr_check"] .gdpr-text p { display: inline !important; margin: 0 !important; padding: 0 !important; } #form_ets_onepagecheckout label[for="customer_create_psgdpr_check"] .ets_checkbox, #form_ets_onepagecheckout label[for="customer_create_newsletter_check"] .ets_checkbox, #form_ets_onepagecheckout label[for="customer_create_customer_privacy_check"] .ets_checkbox { flex: 0 0 auto; margin-top: 2px; } #form_ets_onepagecheckout .form-group .opc_field_right, #form_ets_onepagecheckout .form-group .col-md-8 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } #form_ets_onepagecheckout .ets_opc_error { display: block; color: #c00; font-size: 12px; margin-top: 4px; } / ===================================================== INPUTS LIMPIOS Y UNIFORMES ===================================================== / #form_ets_onepagecheckout .form-control { border: 1px solid #ddd; border-radius: 4px; height: 48px; padding: 0 14px; box-shadow: none; background: #fff; } #form_ets_onepagecheckout .form-control:focus { border-color: #888; box-shadow: none; outline: none; } #form_ets_onepagecheckout .form-group { margin-bottom: 12px; } #form_ets_onepagecheckout .ets_opc_select .form-control-select { height: 48px; } / ===================================================== COLUMNAS AL 50% / 50% ===================================================== / #ets_onepagecheckout { display: flex !important; flex-wrap: wrap; align-items: flex-start !important; } #ets_onepagecheckout .onepagecheckout-left.col-lg-8, #ets_onepagecheckout .onepagecheckout-left.col-lg-4 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; } @media (max-width: 991px) { #ets_onepagecheckout .onepagecheckout-left.col-lg-8, #ets_onepagecheckout .onepagecheckout-left.col-lg-4 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } / ===================================================== CARRITO STICKY (columna derecha entera) ===================================================== / #ets_onepagecheckout .onepagecheckout-left.col-lg-4 { position: sticky; top: 100px; / ajusta a la altura del header sticky + 15-20px / z-index: 10; } @media (max-width: 991px) { #ets_onepagecheckout .onepagecheckout-left.col-lg-4 { position: static; } } / Fix overflow en padres — sin esto, sticky falla en silencio / html, body, #wrapper, #inner-wrapper, #content-wrapper, .js-content-wrapper, #main, #main-page-content { overflow: visible !important; } / ===================================================== FOOTER DEL CHECKOUT AL 50% ===================================================== / #form_ets_onepagecheckout .onepagecheckout-footer.col-lg-12 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; } @media (max-width: 991px) { #form_ets_onepagecheckout .onepagecheckout-footer.col-lg-12 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } / Ocultar el label interno del bloque de regalo (ya tenemos el título de sección) / #form_ets_onepagecheckout .block-additional-info .form-group:first-of-type .form-control-label { display: none !important; } / Reducir el hueco entre el título y los radios Si/No / #form_ets_onepagecheckout .block-additional-info .title-heading { margin-bottom: 8px !important; padding-bottom: 0 !important; } #form_ets_onepagecheckout .block-additional-info .form-group:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } / Ocultar las descripciones "De / Para / Mensaje" — pasan a placeholder por JS */ #form_ets_onepagecheckout .block-additional-info .form-group .opc_field_right > div > .desc { display: none !important; }