@font-face{font-family:'WulkanDisplay';src:url('../fonts/WulkanDisplayMedium.woff2') format('woff2'),url('../fonts/WulkanDisplayMedium.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'HelveticaNowDisplay';src:url('../fonts/HelveticaNowDisplay-Regular.woff2') format('woff2'),url('../fonts/HelveticaNowDisplay-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'HelveticaNowDisplay';src:url('../fonts/HelveticaNowDisplay-Bold.woff2') format('woff2'),url('../fonts/HelveticaNowDisplay-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap} .iqitfake{ display: none;} /*** Style mixins ***/ /*** Variables mixins and functions ***/ .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #000000; } a:hover:not(.nav-link):not(.btn) { color: #21311a; } .pagination .page-list li:hover { border-color: #21311a; } .pagination .page-list li.current { border-color: #21311a; } .pagination .page-list li.current a { color: #21311a; } #mobile-header { background: #21311a; border-bottom: solid 1px rgba(243, 238, 228, 0.12); } #mobile-header #mobile-header-sticky { background: #21311a; } #mobile-header .mobile-main-bar { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; } #mobile-header .m-nav-btn { color: #f3eee4; } #mobile-header .m-nav-btn:hover { color: #ffffff; } #mobile-header .m-nav-btn > span { display: none !important; } #mobile-header .mobile-buttons-bar { background: #21311a; } html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } body { line-height: 1.5rem; } body { font-family: HelveticaNowDisplay; } .h1, .h2, .block-title, .page-title, .modal-title, .step-title { font-family: WulkanDisplay; } #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: #ffffff; color: #000000; border: solid 1px #000000; } .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: #000000; color: #ffffff; border-color: #000000; } .btn-secondary:not(:disabled):not(.disabled):active { background: #000000; color: #ffffff; border-color: #000000; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #ffffff; color: #000000; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #000000; color: #ffffff; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #21311a; color: #ffffff; border: solid 1px #21311a; } .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: #000000; color: #ffffff; border-color: #000000; } .btn-primary:not(:disabled):not(.disabled):active { background: #000000; color: #ffffff; border-color: #000000; } #wrapper .breadcrumb { padding-top: 0.7142857143rem; padding-bottom: 0.7142857143rem; margin-top: -1.0714285714rem; margin-bottom: 1.0714285714rem; font-size: 0.7857142857rem; font-style: normal; font-weight: normal; text-transform: uppercase; color: #6b6b6b; } #wrapper .breadcrumb li:after { color: #6b6b6b; } #wrapper .breadcrumb a { color: #6b6b6b; } /*** Text fields ***/ .form-control { background-color: #ffffff; color: #000000; border: solid 1px #e3e3e3; } .custom-select2, .custom-select2 option { background-color: #ffffff; } .custom-select2:after { color: #000000; } .bootstrap-touchspin .btn-touchspin { background-color: #ffffff; color: #000000; border: solid 1px #e3e3e3; } .bootstrap-touchspin .btn-touchspin:hover { color: #000000; } .form-control::-webkit-input-placeholder { color: #000000; } .form-control::-moz-placeholder { color: #000000; } .form-control:-ms-input-placeholder { color: #000000; } .form-control:-moz-placeholder { color: #000000; } .form-control:focus { color: #000000; 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: #333333!important; color: #ffffff!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: #ffffff; color: #000000; border: none 1px; box-shadow: 0px 30px 30px -15px rgba(0, 0, 0, 0.25); } .product-price { color: #000000; } .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: #000000; color: #ffffff; } .product-flags .new { background: #21311a; color: #ffffff; } .product-flags .online-only, .product-flags .pack { background: #fafafa; color: #000000; } .product-flags .out_of_stock { background: #6b6b6b; color: #ffffff; } .discount { background: #000000; color: #ffffff; } .product-available { background: #21311a; color: #ffffff; } .product-unavailable { background: #6b6b6b; color: #ffffff; } .product-unavailable-allow-oosp { background: #000000; color: #ffffff; } .alert-success a:link:not(.nav-link):not(.btn), .alert-success a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-warning a:link:not(.nav-link):not(.btn), .alert-warning a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-danger a:link:not(.nav-link):not(.btn), .alert-danger a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } #iqitcompare-floating { background: #ffffff; border-top: none 1px #a53737; border-left: none 1px #a53737; border-right: none 1px #a53737; box-shadow: 0px 4px 19px 6px rgba(92, 81, 81, 0.16); } #iqitcompare-floating a { color: #242424; } #page-preloader { background: #ffffff; } #back-to-top { background: #21311a; color: #ffffff; display: none; } #back-to-top:hover { background: #000000; color: #ffffff; } ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { background: #21311a; } ::-webkit-scrollbar-track { background: #efefef; } body { scrollbar-face-color: #21311a; scrollbar-track-color: #efefef; } #header, #checkout-header { background: #21311a; border-top: none 1px; border-bottom: none 1px; } #header .container, #checkout-header .container { max-width: 100%; } .sticky-desktop-wrapper #desktop-header.stuck-header { background: #21311a; border-bottom: none 1px; } #header .header-nav { color: #000000; background: #fafafa; border-bottom: none 1px; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; font-size: 0.8571428571rem; display: none !important; } #header .header-nav a { color: #000000; } #header .header-nav a:hover { color: #21311a; } #header .header-nav .social-links._topbar { font-size: 1rem; } #header .header-nav .social-links._topbar a:not(:hover) { color: #000000 !important; } #header .header-nav .social-links._topbar a:hover { color: #21311a !important; } .header-top { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; color: #f3eee4; } .header-top a:not(.btn):not(.nav-link) { color: #f3eee4; } .header-top a:not(.btn):not(.nav-link):hover { color: #ffffff; } .header-top .form-search-control { color: #f3eee4; border: solid 1px rgba(243, 238, 228, 0.57); } .header-top input.form-search-control::-webkit-input-placeholder { color: #f3eee4; } .header-top input.form-search-control:-moz-placeholder { color: #f3eee4; } .header-top input.form-search-control:-ms-input-placeholder { color: #f3eee4; } .header-top input.form-search-control:-moz-placeholder { color: #f3eee4; } .header-top .search-btn { color: #f3eee4; } .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: #f3eee4; padding: 0.6428571429rem 0.6428571429rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #f3eee4; } .header-top a.header-cart-btn:not(:hover) { color: #f3eee4; } .stuck-header .header-top { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #21311a; } .header-top { transition: padding 0.3s ease; } .cart-products-count-btn { background: #f3eee4; color: #21311a; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 50%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { background: #21311a; border-top: none 3px #521919; border-right: none 3px #38b82c; border-bottom: none 3px #457deb; border-left: none 3px #a6cc0f; margin: 0 -500%; padding: 0 500%; } .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: #f3eee4; padding-left: 1.2857142857rem; padding-right: 1.2857142857rem; border-left: none 2px rgba(87, 87, 87, 0.57); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #f3eee4; } #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: #ffffff; } .cbp-horizontal .cbp-tab-title { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: uppercase; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #21311a; color: #ffffff; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.4285714286rem; max-height: 1.4285714286rem; } .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 { transform: translateY(-10px); } #cbp-hrmenu .cbp-hropen .cbp-hrsub { transform: translateY(0px); } #cbp-hrmenu .cbp-hrsub, #cbp-hrmenu .cbp-hrsub-level2, #cbp-hrmenu .cbp-hrsub-wrapper { transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } .iqitmegamenu-submenu-container { padding: 0; } /*** VERTICAL MENU ***/ .cbp-vertical-on-top #cbp-hrmenu1-ul { background: #ffffff; border: solid 1px #e3e3e3; } #content-wrapper #cbp-hrmenu1 { background: #ffffff; border: solid 1px #e3e3e3; } #cbp-hrmenu1 .cbp-vertical-title { font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background: #000000; line-height: 3.5714285714rem; } #cbp-hrmenu1 .cbp-vertical-title:hover { color: #ffffff; background: #000000; } #cbp-hrmenu1 > ul > li > a, #cbp-hrmenu1 > ul > li > span.cbp-main-link { font-style: normal; font-weight: normal; text-transform: none; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; border-top: solid 1px rgba(227, 227, 227, 0.35); } #cbp-hrmenu1 > ul > li > a .cbp-mainlink-icon, #cbp-hrmenu1 > ul > li > a .cbp-mainlink-iicon { font-size: 1.7142857143rem; max-height: 1.7142857143rem; } #cbp-hrmenu1 > ul > li.cbp-hropen > a, #cbp-hrmenu1 > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #333333; } #cbp-hrmenu1 .cbp-legend { background: #ca5058; color: #ffffff; } #cbp-hrmenu1 .cbp-hrsub, #cbp-hrmenu1 > ul, #cbp-hrmenu1 .cbp-hrsub-level2, #cbp-hrmenu1 .cbp-hrsub-wrapper { transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out; } .cbp-vert-expanded #cbp-hrmenu1 .cbp-vertical-title { color: #ffffff; background: #000000; } .cbp-not-on-top #cbp-hrmenu1-ul { position: relative; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-wrapper { top: 0; margin-top: 0px !important; min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-hrsub { min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-show { -js-display: flex; display: flex; flex-wrap: wrap; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-inner { width: 100%; } /*** SUBMENU ***/ .cbp-hrmenu .cbp-hrsub { font-style: normal; font-weight: normal; text-transform: none; } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu ul.cbp-hrsub-level2 { background: #ffffff; border: none 1px #37a625; box-shadow: 0px 15px 25px 0px rgba(74, 63, 63, 0.15); } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu .cbp-hrsub-inner a, .cbp-hrmenu .cbp-hrsub-inner a:link { color: !important; } .cbp-hrmenu .cbp-hrsub-inner a:hover { color: #333333 !important; } .cbp-hrmenu .tabs-links { background: #f7f7f7; } .cbp-hrmenu .cbp-tabs-names li a { color: #777777 !important; } .cbp-hrmenu .cbp-tabs-names li a:hover, .cbp-hrmenu .cbp-tabs-names li a.active { background: #ffffff; color: #777777 !important; } .cbp-hrmenu .cbp-hrsub-inner .cbp-column-title, .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:link { color: #333333 !important; border-bottom: none 3px #c2bc29; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: uppercase; } .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:hover { color: !important; } /*** MOBILE MENU ***/ #mobile-header .col-mobile-menu-dropdown.show { background: #21311a; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #f3eee4 !important; } #iqitmegamenu-mobile { background: #21311a; } #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: #f3eee4 !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; } .col-mobile-menu-push #_mobile_iqitmegamenu-mobile { box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); } .mobile-menu__submenu { background: #21311a; } .mobile-menu__tab { border-bottom: none 1px; min-height: 4.4285714286rem; } .mobile-menu__link { color: #f3eee4 !important; padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: uppercase; } .mobile-menu__arrow { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; color: #f3eee4; 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: #f3eee4; background-color: #2e4426; border-bottom: none 1px; display: none; } .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: #f3eee4 !important; } .mobile-menu__column { font-size: 1.1428571429rem; font-style: normal; font-weight: normal; text-transform: none; color: #f3eee4; margin-bottom: 2.8571428571rem; } .mobile-menu__column-categories:not(:last-child) { margin-bottom: 2.8571428571rem; } .mobile-menu__links-list-li { padding-top: 0.4285714286rem; padding-bottom: 0.4285714286rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #f3eee4; } .mobile-menu__footer { border-top: none 1px; color: #f3eee4; background-color: #2e4426; display: none; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #ffffff; color: #000000; } .swiper-pagination-bullet { background: #21311a; } /*** Product miniature ***/ .products.row { margin: -0.2857142857rem; } .products.row > .col, .products.row > [class*=col-] { padding: 0.2857142857rem; } .swiper-container-wrapper { margin: -0.2857142857rem; } .swiper-container-wrapper .products.swiper-container { padding: 0.2857142857rem; } .swiper-container-wrapper .product-carousel { padding: 0.2857142857rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 0.2857142857rem; } .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; } .product-miniature-grid .product-title { overflow: hidden; height: 2.2rem; } @media (hover: hover) { .product-miniature:hover { outline: none 1px; } } .product-miniature-grid .product-functional-buttons { display: none; } .product-miniature-grid .product-functional-buttons a:link, .product-miniature-grid .product-functional-buttons a:visited, .product-miniature-grid .product-functional-buttons a:hover { color: #000000 !important; } .products-grid .product-miniature .product-category-name { display: none !important; } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-description-short { 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: #21311a; color: #ffffff; border: solid 1px #21311a; } .btn-product-list:hover { background: #000000; color: #ffffff; border-color: #000000; } .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-1 .product-description { padding: 0.7142857143rem; } .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: 1rem; font-style: normal; font-weight: normal; 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: #21311a; } .images-container .swiper-button-arrow:hover, #product .product-cover .expander > span:hover, #product-modal .modal-body .swiper-button-arrow:hover { opacity: 0.6 !important; } #col-product-info { position: -webkit-sticky; position: sticky; z-index: 1; top: 30px; transition: top 300ms ease 0s; } #main-product-wrapper .product-cover .expander { z-index: 1; } @media screen and (min-width: 768px) { #main-product-wrapper .no-quick-view-d-md-none { display: none; } } @media screen and (min-width: 768px) { #main-product-wrapper #swiper-wrapper-column-images { display: block; } } .modal-open #col-product-info { position: static; } .product-cover .expander { width: 100%; height: 100%; padding: 0; bottom: 0; right: 0; } .product-cover .expander > span { position: absolute; bottom: 1rem; right: 1rem; padding: 0.6rem; } #product .product-cover .expander > span { color: #ffffff; background: #21311a; transition: opacity 0.2s cubic-bezier(0.7, 0, 0.3, 1), color 0.2s cubic-bezier(0.7, 0, 0.3, 1); } #product .product-cover .expander > span:hover { opacity: 0.6 !important; } .product-variants > .product-variants-item { display: inline-block; margin-right: 1rem; vertical-align: top; } #main #main-product-wrapper { transition: opacity 0.3s ease; } #main.-combinations-loading { position: relative; } #main.-combinations-loading #product-preloader { display: block; position: absolute; z-index: 10; top: -10px; } #main.-combinations-loading #main-product-wrapper { opacity: 0.3; } @media screen and (max-width: 768px) { .col-left-product-cover, .col-left-product-thumbs { flex: 0 0 100%; max-width: 100%; } .col-left-product-thumbs { order: 2; margin-top: 2rem; } } #checkout #header { display: none !important; } #checkout #footer, #checkout #iqitcompare-floating-wrapper { display: none !important; } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; color: #000000; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 0rem; padding-bottom: 0rem; } #content-wrapper .page-title { color: #000000; font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: uppercase; 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: #000000; } #content-wrapper .section-title { color: #000000; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: uppercase; 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: #000000; } .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 #21311a; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .nav-link { border-bottom: solid 3px #21311a; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #000000; border-bottom: solid 3px #21311a; } #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: #21311a; } #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: #000000; } #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: #000000; } #footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder { color: #000000; } #footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder { color: #000000; } #footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder { color: #000000; } #footer .social-links._footer, #checkout-footer .social-links._footer { font-size: 1.5rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #f3eee4 !important; } #footer .social-links._footer a:hover, #checkout-footer .social-links._footer a:hover { color: #ffffff !important; } #footer .block-title, #checkout-footer .block-title { color: #f3eee4; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: uppercase; border-bottom: none 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: #f3eee4; } #footer-container-first { border-top: none 1px; padding-top: 2.1428571429rem; padding-bottom: 2.1428571429rem; background: #3782ef; color: #ffffff; } #footer-container-first .h5 { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: uppercase; } #footer-container-main, #checkout-footer { border-top: none 1px; padding-top: 2.8571428571rem; padding-bottom: 1.8571428571rem; color: #f3eee4; } #footer-container-main a, #checkout-footer a { color: #f3eee4; } #footer-container-main a:hover, #checkout-footer a:hover { color: #ffffff; } #footer-copyrights { border-top: none 1px; background: #21311a; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; } #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; }/* Farmacia Soraya Rodríguez · web minimal (gdw-srm): cabecera, menú, fichas de producto, botones y pie de toda la tienda. Los colores, las fuentes, las mayúsculas del menú, el logo y los botones van en el Theme Editor; aquí solo lo que el editor no permite. Sustituye a las 3 hojas de la web nativa. */ :root{--srm-logo:104px;--srm-logo-movil:62px;--srm-lado:40px} @media (max-width:1024px){:root{--srm-lado:24px}} @media (max-width:767px){:root{--srm-lado:16px}} /* Toda la tienda a todo el ancho, con el mismo margen lateral que las secciones de la portada (40/24/16 px). El ancho va en el Theme Editor (Container max width 100 %, cabecera y menú «fullwidth»); en Warehouse 4.8.2 #inner-wrapper y el contenedor de .pageHeader llevan además su propio máximo en categorías y en la ficha */ #header .container,#wrapper>.container,#inner-wrapper,#wrapper .pageHeader>.container,#footer .container, #footer-copyrights>.container,.iqit-megamenu-container{max-width:none !important;width:100%; padding-left:var(--srm-lado) !important;padding-right:var(--srm-lado) !important} #iqitmegamenu-wrapper .container-iqitmegamenu{max-width:none;padding-left:0;padding-right:0} /* Entrada y salida de cada página (Mario, 22-10-2026, como en grupodwkitb.es). Al cargar, la cabecera entera (#header) baja desde arriba y el contenido (#wrapper) y el pie aparecen. Al pulsar un enlace a otra página de la tienda, el script del tipo pone .srm-sale en <html>: la cabecera sube y el contenido se desvanece mientras llega la siguiente (no se retrasa la navegación). Con la cabecera fija a la vista (.srm-fija) sube esa; si el enlace está en el carrito o el menú del móvil (.srm-panel), la cabecera solo se desvanece. Las entradas no dejan nada puesto al acabar («backwards»): un transform en #header cambiaría la referencia de sus paneles fijos. Con «reducir movimiento», nada */ @media screen and (prefers-reduced-motion:no-preference){ #header{animation:srmCabBaja .7s cubic-bezier(.2,.8,.2,1) backwards} #wrapper,#footer{animation:srmAparece .7s ease .18s backwards} html.srm-sale #header{animation:srmCabSube .38s cubic-bezier(.4,0,.2,1) forwards} html.srm-sale.srm-fija #header{animation:none} html.srm-sale.srm-fija:not(.srm-panel) #desktop-header.stuck-header, html.srm-sale.srm-fija:not(.srm-panel) #mobile-header-sticky.stuck{ animation:srmCabSube .38s cubic-bezier(.4,0,.2,1) forwards} html.srm-sale.srm-panel #header{animation:srmDesaparece .3s ease forwards} html.srm-sale #header .cbp-hrsub,html.srm-sale #header .dropdown-menu{animation:srmDesaparece .16s ease forwards} html.srm-sale #wrapper,html.srm-sale #footer{animation:srmDesaparece .32s ease forwards} /* Al volver con «Atrás» (página guardada en memoria): sin repetir la entrada */ html.srm-vuelta #header,html.srm-vuelta #wrapper,html.srm-vuelta #footer{animation:none} } @keyframes srmCabBaja{from{translate:0 -100%}} @keyframes srmCabSube{to{translate:0 -100%;opacity:0}} @keyframes srmAparece{from{opacity:0}} @keyframes srmDesaparece{to{opacity:0}} /* Logo en SVG: el tema pinta el <img> con width="" y sin ancho mide 0 px */ #desktop_logo img.logo{width:var(--srm-logo);height:auto} #mobile-header img.logo{width:var(--srm-logo-movil);height:auto} /* Barra superior: en el móvil, solo el contacto (los iconos sociales están en el pie) */ @media (max-width:767px){.header-nav .right-nav{display:none}} /* Buscador: una línea fina, sin caja */ #search_widget .form-search-control{border:0;border-bottom:1px solid #000000;border-radius:0;background:transparent; box-shadow:none;padding-left:0} #search_widget .search-btn,#search_widget button[type=submit]{background:transparent;border:0;color:#000000} /* Buscador e iconos a la misma altura (Mario, 26-10-2026: «alinea estos elementos»): la fila los estiraba y los iconos se quedaban arriba, 12 px por encima del texto del buscador (también en la cabecera fija). El icono y la caja del carrito (#blockcart), en bloque: en línea dejaban debajo el hueco de la línea de texto (25 px para un icono de 20) */ #desktop-header .col-header-right>.row{align-items:center} #desktop-header .col-header-right .header-btn>i.icon,#desktop-header #blockcart{display:block} /* Menú: con la letra de titulares y en mayúsculas pequeñas con aire (Mario, 22-10-2026: «los links del menú que vayan con la Wulkan y en mayúsculas»; las mayúsculas y el tamaño, en el Theme Editor: hm_typo_*, mm_main_tab_typo_*), y un subrayado fino al pasar; el desplegable, recto. En el menú del móvil, el primer nivel igual */ #cbp-hrmenu>ul>li>a .cbp-tab-title{position:relative;font-family:"WulkanDisplay",Georgia,serif;letter-spacing:.08em} #iqitmegamenu-mobile .mobile-menu__content>ul>li>.mobile-menu__link{font-family:"WulkanDisplay",Georgia,serif; letter-spacing:.04em} #cbp-hrmenu>ul>li>a .cbp-tab-title::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s} #cbp-hrmenu>ul>li:hover>a .cbp-tab-title::after{transform:scaleX(1)} #cbp-hrmenu .cbp-hrsub-inner{border-radius:0;box-shadow:0 18px 40px -24px rgba(0,0,0,.25)} @media (prefers-reduced-motion:reduce){#cbp-hrmenu>ul>li>a .cbp-tab-title::after{transition:none}} /* Fichas de producto recuadradas, como las de maisonmatcha.es (Mario, 22-10-2026): la foto en una caja 4:5 del color fondo_ficha (marca.json) y fundida con ella (multiply), así el blanco de las fotos de catálogo toma el color de la caja y el producto se queda como está; sin marcos ni sombras; marca, nombre y precio debajo, alineados. Con un 3 % más de brillo, el casi blanco (el fondo 253,255,253 de las fotos SR, el ruido del JPEG) llega a blanco y no deja un cuadrado algo más oscuro que la caja (Soraya, 26-10-2026) */ .product-miniature .thumbnail-container{background:#ebe9e3} .product-miniature .thumbnail-container .product-thumbnail{display:block;aspect-ratio:4/5;overflow:hidden} .product-miniature .thumbnail-container .product-thumbnail picture, .product-miniature .thumbnail-container .product-thumbnail img{width:100%;height:100%;object-fit:contain; mix-blend-mode:multiply} .product-miniature .thumbnail-container .product-thumbnail img{filter:brightness(1.03)} /* El mismo fondo en las fotos de producto de la ficha (grande, miniaturas, barra fija y zoom), el carrito (la página, el desplegable de la cabecera y la ventana de «añadido al carrito»), el resumen y la confirmación del pedido (Mario, 23-10-2026: «implementa ese fondo de color a las imágenes de los productos en la vista de producto, carrito, etc.»): la caja de cada foto lleva el color y la foto se funde con ella */ .product-cover .product-lmage-large,#product-images-thumbs .thumb-container,.productContentSticky .colImage, .modal .easyzoom-modal,.cart-item .product-image,#cart-summary-product-list .media-left,#order-items .image, #blockcart-content .cart-products .product-image,#blockcart-modal .modal-body .col-6>a{ background:#ebe9e3} #blockcart-content .cart-products .product-image,#blockcart-modal .modal-body .col-6>a{display:block} .product-cover .product-lmage-large img,#product-images-thumbs .thumb-container img,.productContentSticky .colImage img, .modal .easyzoom-modal img,.cart-item .product-image img,#cart-summary-product-list .media-left img, #order-items .image img,#blockcart-content .cart-products .product-image img, #blockcart-modal .modal-body .col-6>a img{mix-blend-mode:multiply;filter:brightness(1.03)} .product-miniature .product-description{padding-left:0;padding-right:0} .product-miniature .product-brand{font-size:11px;letter-spacing:.12em;text-transform:uppercase} .product-miniature .product-brand a{color:#262626} .product-miniature .product-title{font-family:inherit;font-size:14px;font-weight:400;line-height:1.35; text-transform:none;letter-spacing:0} /* Dos líneas enteras: el tema fija 2,2rem al título y 2,5rem al enlace (con -webkit-line-clamp: 2) y, con otra altura de línea, asoma media tercera línea */ .product-miniature-grid .product-title,.product-miniature-grid .product-title a{height:2.7em} .product-miniature .product-title a,.product-miniature a.product-title{color:#000000} .product-miniature .product-price-and-shipping{font-size:14px} /* Botón de compra sobre la foto de la ficha, como en maisonmatcha.es (Mario, 26-10-2026; el tpl de la miniatura lo pone dentro de .thumbnail-container y el Theme Editor lo muestra: «Buttons» en Show y «Quantity input» en Hide): solo el icono, en un círculo blanco abajo a la derecha; aparece al pasar el ratón por la ficha y, en pantallas táctiles, se ve siempre. El texto («Comprar») sigue en la página para los lectores de pantalla */ .product-miniature .thumbnail-container{position:relative} .product-miniature .thumbnail-container>.product-add-cart{position:absolute;right:12px;bottom:12px;z-index:3;margin:0; opacity:0;translate:0 6px;transition:opacity .2s,translate .2s} .product-miniature:is(:hover,:focus-within) .thumbnail-container>.product-add-cart{opacity:1;translate:0 0} @media (hover:none){.product-miniature .thumbnail-container>.product-add-cart{opacity:1;translate:0 0}} .product-miniature .thumbnail-container .btn-product-list{display:flex;align-items:center;justify-content:center; width:40px;height:40px;padding:0;border:1px solid rgba(0,0,0,.15);border-radius:50%;background:#fff;color:#000000; transition:background-color .2s,border-color .2s,color .2s,scale .2s} .product-miniature .thumbnail-container .btn-product-list:hover{background:#21311a;border-color:#21311a;color:#fff} .product-miniature .thumbnail-container .btn-product-list:active{scale:.94} .product-miniature .thumbnail-container .btn-product-list .bag-icon{margin:0;font-size:17px;line-height:1} .product-miniature .thumbnail-container .btn-product-list span{position:absolute;width:1px;height:1px;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:767px){.product-miniature .thumbnail-container>.product-add-cart{right:8px;bottom:8px} .product-miniature .thumbnail-container .btn-product-list{width:36px;height:36px}} /* Botones rectos en toda la tienda (el redondeo no tiene opción en el Theme Editor) */ .btn,.elementor-button,.form-control{border-radius:0} /* Titulares de las páginas (categorías, CMS, cuenta) en mayúsculas, con la letra de titulares */ .page-title,h1.h1,#content-wrapper h1{text-transform:uppercase;letter-spacing:.02em} /* Ficha de producto como la de maisonmatcha.es (Mario, 26-10-2026). En el Theme Editor: fotos en columna a 8/12, precio de 14 px sin negrita, la referencia en «Detalles» y la descripción como secciones en la columna derecha. Aquí: la foto llega al borde de la pantalla, en una caja 4:5 del color de las fichas (el tema gpdw la limitaba a 500 px); a la derecha, el nombre, el precio y la descripción corta (si la plantilla gpdw pone el nombre y la descripción en la cabecera de la página, los sube el script del tipo), la cantidad en una caja del mismo color y el botón; los avisos de envío, sin cajas; las secciones, con el título pequeño y una línea fina encima. Las reglas empiezan por #product (el id de la página) porque el custom.css del tema gpdw lo usa, a veces con !important. La columna de la foto llega justo al borde: la fila de Bootstrap tiene márgenes negativos de medio gutter (--bs-gutter-x) y la columna, ese relleno; sin descontarlos, a 402 px la columna se salía 9 px por cada lado y la página se movía de lado (26-10-2026) */ @media (min-width:768px){ #product .product-info-row>.col-product-image{ flex:0 0 calc(66.6667% + var(--srm-lado) - var(--bs-gutter-x, 30px) * .5); max-width:calc(66.6667% + var(--srm-lado) - var(--bs-gutter-x, 30px) * .5); margin-left:calc(var(--bs-gutter-x, 30px) * .5 - var(--srm-lado));padding-left:0} #product .product-info-row>.col-product-info{padding-left:24px} } @media (max-width:767px){ #product .product-info-row>.col-product-image{flex:0 0 calc(100% + 2 * var(--srm-lado) - var(--bs-gutter-x, 30px)); max-width:none;margin-left:calc(var(--bs-gutter-x, 30px) * .5 - var(--srm-lado)); margin-right:calc(var(--bs-gutter-x, 30px) * .5 - var(--srm-lado));padding-left:0;padding-right:0} } #product .product-cover .product-lmage-large{aspect-ratio:4/5} #product .product-cover .product-lmage-large picture{display:flex;width:100%;height:100%;align-items:center; justify-content:center} #product .product-cover .product-lmage-large img{width:62%;max-width:none;height:auto} /* El nombre, con la letra del texto, sin negrita y a 1.5rem (21 px, porque el tema pone la letra base a 14 px), y aire entre el precio y la descripción corta (Mario, 27-10-2026). El custom.css de gpdw lo ponía en Wulkan, en negrita y a 2rem (#product .page-title). Si el script lo ha subido, también está dentro de #col-product-info */ #product #col-product-info h1.page-title{font-family:inherit;font-size:1.5rem;font-weight:400;line-height:1.3} #product #col-product-info .product-information>[id^="product-description-short"]{margin-top:16px} #product .srm-ficha-cab .product-description{margin:0 0 16px;font-size:14px;line-height:1.55;color:#262626} #product .srm-ficha-cab .product-description p{margin:0} #product .product_header_container .precioValorEntero,#product .product_header_container .precioValorDecimales, #product .product_header_container .precioValorSimbolo{font-size:15px;line-height:1.4} #product .product-add-to-cart .bootstrap-touchspin{height:52px;border:0;background:#ebe9e3} #product .product-add-to-cart .bootstrap-touchspin input,#product .product-add-to-cart .btn-touchspin{border:0; background:transparent} #product #col-product-info .product-add-to-cart button.btn.add-to-cart{height:52px;padding:0 24px;font-size:13px; letter-spacing:.08em;text-transform:uppercase} #product #col-product-info .product-add-to-cart .add-to-cart .bag-icon{font-size:17px} #product #col-product-info .product-recibelo,#product #col-product-info .iqitfreedeliverycount, #product #col-product-info .block-iqithtmlandbanners-html{margin:16px 0 0;padding:0 !important;border:0 !important; background:none;box-shadow:none;font-size:13px} #product #col-product-info .product-recibelo i,#product #col-product-info .iqitfreedeliverycount i{color:#000000} #product .product-sections .block-section{margin:24px 0 0;padding:18px 0 0;border-top:1px solid rgba(0,0,0,.12)} #product .product-sections .section-title{margin:0 0 10px;padding:0;border:0;font-family:inherit;font-size:12px; font-weight:400;letter-spacing:.08em;text-transform:uppercase} #product .product-sections .section-content{font-size:14px;line-height:1.6} /* La marca sin logo enseñaba «Imagen no disponible» */ #product .product-manufacturer:has(img[src*="default-small_default"]){display:none} #product .category-products .section-title,#product .product-accessories .section-title{font-family:inherit; font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:none} /* La barra fija de compra (.productContentSticky de gpdw, z-index 5) va dentro de la columna derecha, a la que el Theme Editor da sticky y z-index 1: la barra no pasa de ese nivel, y los carruseles de debajo (relacionados, venta cruzada: Swiper con z-index 1, más abajo en la página) se le pintaban encima, arriba en el ordenador y abajo en el móvil (Mario, 27-10-2026). Con la columna a 5, la barra queda sobre el contenido y bajo el WhatsApp (50), la cabecera (100) y las ventanas */ #product #col-product-info{z-index:5} /* La barra fija, igual que la ficha y con el estilo de la web (Mario, 27-10-2026: «iguala la barra con la ficha y adáptala al diseño del sitio»). gpdw la ponía así: el nombre en Wulkan y en negrita, el precio a 2rem, una sombra grande y el contenido en 1200 px; en el móvil, el precio en una fila, la compra debajo y 33 px vacíos (la zona de compra mide 85 px en la ficha), 135 px en total. Ahora: el nombre como el de la ficha, el precio de 15 px, la cantidad y el botón iguales (el botón, con !important, porque gpdw le quita el tamaño), una línea fina en lugar de la sombra, la foto en su caja 4:5 y los márgenes de la página. En el móvil (la barra va abajo), una sola fila con el precio, la cantidad y el botón: 73 px. El WhatsApp y las cookies los sube el script de gpdw según el alto de la barra */ #product .productContentSticky{box-shadow:none;border-bottom:1px solid rgba(0,0,0,.12)} #product .productContentSticky>.container{max-width:none;padding-left:var(--srm-lado); padding-right:var(--srm-lado)} #product .productContentSticky>.container>.row{margin-left:0;margin-right:0;flex-wrap:nowrap} #product .productContentSticky .colImage{flex:0 0 72px;max-width:72px;padding:0} #product .productContentSticky .colImage img{display:block;width:100%;height:90px;object-fit:contain} #product .productContentSticky .colName{min-width:0;padding:0 24px} #product .productContentSticky .page-title{height:auto;margin:0;font-family:inherit;font-size:1.5rem !important; font-weight:400;line-height:1.3;letter-spacing:.02em} #product .productContentSticky .colPrice{padding:0 24px 0 0} #product .productContentSticky .colActions{padding:0} #product .productContentSticky .precioValorEntero,#product .productContentSticky .precioValorDecimales, #product .productContentSticky .precioValorSimbolo{font-size:15px !important;line-height:1.4 !important} #product #col-product-info .productContentSticky .add-to-cart{font-size:13px !important} #product .productContentSticky .product-add-to-cart{height:auto;padding:0 !important} #product .productContentSticky .col-add-qty{flex:0 0 auto;width:auto} #product .productContentSticky .product-minimal-quantity,#product .productContentSticky .product-discounts{margin:0} @media (max-width:767px){ #product .productContentSticky{padding:10px 0;border-top:1px solid rgba(0,0,0,.12);border-bottom:0} #product .productContentSticky .colPrice{flex:0 0 auto;width:auto;margin:0;padding:0 16px 0 0} #product .productContentSticky .colActions{flex:1 1 auto;width:auto;min-width:0} } /* Listados (categorías, marcas, búsqueda) con el estilo de la web (Mario, 26-10-2026: «adapta tb el diseño de la vista de productos al diseño del sitio, sobre todo los elementos de la col left»). Columna izquierda sin cajas ni esquinas redondeadas: los filtros, el aviso de envío gratis y las ventajas, separados por líneas finas y con el título pequeño en mayúsculas, como las secciones de la ficha; casillas y control de precio en negro con el verde de la marca; los iconos, en negro (el tema gpdw los pone en su rojo). Arriba, las subcategorías y los filtros activos, en pastillas del color de las fichas, y el orden con el selector subrayado, como el buscador. El custom.css del tema gpdw carga DESPUÉS de esta hoja y pone las cajas con reglas de la misma especificidad (#search_filters .facet>ul, .iqitfreedeliverycount-progress .progress) o con !important (#left-column .iqitfreedeliverycount, .leftColumnWrapper #iqithtmlandbanners-block-7): esas reglas llevan body delante (y !important donde gpdw lo usa); probándolas inyectadas, la hoja iba la última y parecían bien sin él */ #search_filters .facet{margin:0;padding:0} #search_filters .facet+.facet{margin-top:22px;padding-top:18px;border-top:1px solid rgba(0,0,0,.12)} #search_filters .facet .facet-title{margin:0 0 14px;padding:0;border:0;font-family:inherit;font-size:12px; font-weight:400;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#000000} body #search_filters .facet ul{height:auto;margin:0;padding:0;border:0;border-radius:0;background:none} #search_filters .facet .magnitude{font-size:12px;color:#262626} #search_filters .custom-checkbox input[type=checkbox]+span{width:14px;height:14px;border:1px solid #000000; border-radius:0;background:#fff} #search_filters .custom-checkbox input[type=checkbox]:checked+span{border-color:#21311a;background:#21311a} #search_filters .custom-checkbox input[type=checkbox]:checked+span .checkbox-checked{color:#fff} #search_filters .faceted-slider p{margin:0 0 16px;font-size:13px} #search_filters .noUi-target{height:2px;margin:0 7px 6px;border:0;border-radius:0;background:rgba(0,0,0,.15); box-shadow:none} #search_filters .noUi-connect{background:#21311a} #search_filters .noUi-horizontal .noUi-handle{top:-6px;right:-7px;width:14px;height:14px;border:1px solid #000000; border-radius:50%;background:#fff;box-shadow:none;cursor:grab} #search_filters .noUi-handle::before,#search_filters .noUi-handle::after{display:none} body #left-column .iqitfreedeliverycount,body #left-column .block-iqithtmlandbanners-html{margin:22px 0 0; padding:18px 0 0 !important;border:0 !important;border-top:1px solid rgba(0,0,0,.12) !important; border-radius:0 !important;background:none !important;box-shadow:none} #left-column .iqitfreedeliverycount i,#left-column .iconosVentajas i{color:#000000} #left-column .iqitfreedeliverycount-title,#left-column .iconosVentajas{font-size:13px} body :is(#left-column,#col-product-info) .logosPago{margin:0;padding:0;text-align:left} body :is(#left-column,#col-product-info) .logosPago img{display:block;width:100%;max-width:180px;height:auto;margin:0; padding:0} /* Envío gratis y ventajas con el estilo de la web (Mario, 26-10-2026: «adapta este contenido al diseño del sitio»), en la columna izquierda de los listados y en la ficha: iconos de 22 px en negro (el tema los pone de 35 y 28), el aviso con letra normal (el tema lo pone en negrita), los importes pequeños en gris y las ventajas en filas bajas con línea fina, como los filtros */ body :is(#left-column,#col-product-info) .iqitfreedeliverycount .col-icon i, body :is(#left-column,#col-product-info) .iconosVentajas i,body #col-product-info .product-recibelo i{font-size:22px; line-height:1} body :is(#left-column,#col-product-info) .iqitfreedeliverycount .col-icon{width:auto;padding-right:0} body :is(#left-column,#col-product-info) .iqitfreedeliverycount .col-icon i{width:auto} body :is(#left-column,#col-product-info) .iqitfreedeliverycount .col-icon+.col{padding-left:0} body :is(#left-column,#col-product-info) .iqitfreedeliverycount-title strong{font-weight:400} body :is(#left-column,#col-product-info) .iqitfreedeliverycount-title{font-size:13px;line-height:1.45} body :is(#left-column,#col-product-info) .iqitfreedeliverycount-progress strong{font-size:11px;font-weight:400; color:#262626} body :is(#left-column,#col-product-info) .iconosVentajas .icono{margin:0;padding:9px 0; border-bottom-color:rgba(0,0,0,.12)} /* El texto, a 14 px del icono, como en el aviso de envío (su fila ya trae ese hueco) */ body :is(#left-column,#col-product-info) .iconosVentajas .icono>.col:not(.col-auto){padding-left:14px;font-size:13px; line-height:1.4} /* La barra del envío gratis, fina y con el verde de la marca (también en la ficha) */ body .iqitfreedeliverycount .progress{height:4px;border-radius:0 !important;background:#ebe9e3} body .iqitfreedeliverycount .progress-bar{background:#21311a;background-image:none;animation:none} .iqitfreedeliverycount-progress strong{font-size:12px;font-weight:400} #content-wrapper .categoriesBreadcrumbs{border-bottom-color:rgba(0,0,0,.12)} #content-wrapper .categoriesBreadcrumbs li{font-size:12px;letter-spacing:.08em;text-transform:uppercase} #content-wrapper .block-categories .category-sub-menu>li>a,#js-active-search-filters .filter-block .btn{border:0; border-radius:0;background:#ebe9e3;padding:8px 14px !important;font-size:13px;line-height:1.4; color:#000000;transition:background-color .2s,color .2s} #content-wrapper .block-categories .category-sub-menu>li>a:hover,#js-active-search-filters .filter-block .btn:hover{ background:#21311a;color:#fff} #js-active-search-filters .active-filter-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase} #js-product-list-top{border-color:rgba(0,0,0,.12)} #js-product-list-top .showing{font-size:12px;letter-spacing:.04em;color:#262626} #js-product-list-top .select-title{height:auto;padding:4px 0;border:0;border-bottom:1px solid #000000; border-radius:0;background:transparent;font-size:13px} #js-product-list-top .view-switcher a{opacity:.35;transition:opacity .2s} #js-product-list-top .view-switcher a.current,#js-product-list-top .view-switcher a:hover{opacity:1} .products-sort-order .dropdown-menu{border:1px solid rgba(0,0,0,.12);border-radius:0; box-shadow:0 18px 40px -24px rgba(0,0,0,.25)} #search_filter_toggler{border-color:#000000;font-size:12px;letter-spacing:.08em;text-transform:uppercase} /* Pie como el de maisonmatcha.es, en blanco y con los enlaces sin subrayar (Mario, 22-10-2026): columnas con aire, títulos pequeños con la letra del texto y sin flechas, iconos ni separadores. Los colores del fondo, el texto, los enlaces y las redes van en el Theme Editor (Footer: fw_bg_color, fw_text, fw_link, fw_link_h, f_social_txt) */ #footer-container-main{padding-top:64px} #footer .footerBefore{padding-top:0;margin-bottom:0;border-bottom:0} #footer .block-title,#footer .h4,#footer h4{font-family:inherit;font-size:13px;font-weight:400;letter-spacing:.06em; text-transform:uppercase;color:inherit;margin-bottom:16px;padding-bottom:0} #footer .block-links li a::before{display:none} #footer .block-links li a{padding-left:0} #footer .block-links li,#footer .contact-rich .part,#footer .social-links li{margin:0 0 10px;padding:0} #footer .contact-rich strong{display:block;font-weight:400;margin-bottom:10px} #footer .contact-rich .icon,#footer .contact-rich hr{display:none} #footer .contact-rich .data{padding-left:0} /* Redes como enlaces de texto, igual que los demás (el tema las pinta como iconos de 35 px sobre el color de cada red) */ #footer .block-social-links .social-links{flex-direction:column;align-items:flex-start} #footer .block-social-links .social-links,#footer .block-social-links .social-links li{font-size:inherit;line-height:inherit} #footer .block-social-links .social-links li{padding:0} #footer .social-links li a{display:inline;width:auto;height:auto;padding:0;border-radius:0;font-size:inherit; line-height:inherit;background:none !important} #footer .social-links li a i{display:none} #footer .social-links .facebook a::after{content:"Facebook"} #footer .social-links .twitter a::after{content:"X"} #footer .social-links .instagram a::after{content:"Instagram"} #footer .social-links .youtube a::after{content:"YouTube"} #footer .social-links .linkedin a::after{content:"LinkedIn"} #footer .social-links .pinterest a::after{content:"Pinterest"} #footer .social-links .vimeo a::after{content:"Vimeo"} #footer .social-links .tiktok a::after,#footer .social-links .tik-tok a::after{content:"TikTok"} /* Firma: el nombre de la marca a todo el ancho, con la letra de titulares. Es un bloque de iqithtmlandbanners en displayFooterAfter con <p class="srm-firma">Nombre</p> (su título no se ve). La letra llena el ancho: el script del tipo mide el texto y guarda en --srm-firma-k su ancho / tamaño de letra (sin script, 9) */ #footer .footerAfter{padding-top:40px;padding-bottom:8px;border-top:0} #footer .footerAfter>:has(.srm-firma){flex:0 0 100%;max-width:100%;container-type:inline-size} #footer .footerAfter>:has(.srm-firma)>.block-title{display:none} #footer .footerAfter>:has(.srm-firma)>.block-content{display:block !important} .srm-firma{margin:0;font-family:"WulkanDisplay",Georgia,serif;font-weight:400;line-height:.9;letter-spacing:0; text-transform:uppercase;white-space:nowrap;text-align:center;color:inherit; font-size:calc((100vw - 2 * var(--srm-lado) - 20px) / var(--srm-firma-k,9))} @supports (width:1cqw){.srm-firma{font-size:calc(100cqw / var(--srm-firma-k,9))}} /* La firma sube letra a letra como los titulares (Mario, 22-10-2026; la parte el script, las reglas están en estilos.css.tpl), un poco más despacio por su tamaño */ @media screen and (prefers-reduced-motion:no-preference){ .srm-firma.srm-tit--visto .srm-letra{transition-duration:1.1s} } /* Antes de entrar, cada letra está un 140 % por debajo de su línea: la tapa el clip-path de su palabra, pero lo que se sale sigue contando en el alto de la página y, como la firma es lo último, dejaba un hueco blanco bajo el copyright hasta que subían las letras (145 px a 1920; Mario, 26-10-2026). El contenedor del pie recorta lo que se sale */ #footer #footer-container-main{overflow:hidden;overflow:clip} /* Copyright: pequeño y apagado, tras una línea fina dentro de los márgenes. El custom.css del tema hijo lo pinta en blanco con !important (.copyright-txt, su p y su a, para la barra roja de la plantilla) y el Theme Editor no tiene color de texto; su fondo sí (fc_bg_color, el mismo que el pie) */ #footer-copyrights{font-size:12px;padding-bottom:30px} #footer-copyrights,#footer-copyrights .copyright-txt,#footer-copyrights .copyright-txt p, #footer-copyrights a{color:rgba(33,49,26,.6) !important} #footer-copyrights>.container::before{content:"";display:block;height:1px;background:#e9eae8;margin-bottom:15px} /* Las columnas del copyright traen push-sm-6/pull-sm-6 (left/right al 50 %): a todo el ancho, el texto se sale por la izquierda. El texto ocupa la fila y la imagen (vacía si no hay) va detrás */ #footer-copyrights .row>.copyright-txt,#footer-copyrights .row>.copyright-img{left:auto;right:auto} #footer-copyrights .row>.copyright-txt{order:-1;flex:0 0 100%;max-width:100%} /* Farmacia Soraya Rodríguez · portada minimal (gdw-srm). Textos, fotos, enlaces y productos se editan en Elementor; aquí solo la colocación y lo que el editor no permite. */ .elementor-section.gdw-srm{overflow-x:clip} /* Por debajo de 768 px el tema no aplica el hueco de las columnas: se pone a mano (5 px, «narrow»), para que el margen lateral sea de 16 px como en el resto y las tarjetas lleven su calle de 10 px (sin esto: margen de 11 px, la rejilla y la galería a 6 px del borde y las tarjetas pegadas) */ @media (max-width:767px){ .elementor-section.gdw-srm .elementor-column-gap-narrow>.elementor-row>.elementor-column>.elementor-element-populated{ padding:5px} } /* Carrusel de portada a todo el ancho: la foto llena el ancho, puntos discretos dentro */ .srm-hero .elementor-widget-image-carousel .swiper-slide img, .srm-hero .elementor-widget-image-carousel .slick-slide img{display:block;width:100%;height:auto} .srm-hero .swiper-pagination-bullet,.srm-hero .slick-dots li button{width:7px;height:7px;opacity:.5;background:#ffffff} .srm-hero .swiper-pagination-bullet-active{opacity:1} /* Flechas del carrusel de portada (hero con «flechas»; Mario, 26-10-2026): las nativas, a media altura y sin fondo; en pantallas táctiles no se ponen (se pasa con el dedo o con la barra) */ .srm-hero .elementor-swiper-button{transition:opacity .2s} .srm-hero .elementor-swiper-button:hover{opacity:.55} @media (hover:none){.srm-hero .elementor-swiper-button{display:none}} /* Barra de progreso del carrusel de portada (hero con «progreso»): un tramo por diapositiva abajo en el centro, en lugar de los puntos. El de la que se ve se llena mientras dura (--srm-p, de 0 a 1, lo pone el script del tipo con el tiempo que le queda al paso automático), los anteriores quedan llenos y los siguientes vacíos. Cada tramo es un botón para ir a su diapositiva (alto de 24 px para el dedo; la raya, de 2 px) */ .srm-hero-barra{position:absolute;left:50%;bottom:20px;z-index:3;display:flex;gap:8px;transform:translateX(-50%)} .srm-hero-tramo{display:block;width:44px;height:24px;padding:11px 0;border:0;background:none;cursor:pointer} .srm-hero-tramo i{position:relative;display:block;height:2px;overflow:hidden} .srm-hero-tramo i::before,.srm-hero-tramo i::after{content:"";position:absolute;inset:0;background:#000000} .srm-hero-tramo i::before{opacity:.22} .srm-hero-tramo i::after{transform-origin:left;transform:scaleX(var(--srm-p,0))} .srm-hero-tramo:focus-visible{outline:2px solid #21311a;outline-offset:2px} @media (max-width:767px){.srm-hero-barra{bottom:12px;gap:6px}.srm-hero-tramo{width:30px}} /* Textos del hero («textos»; Mario, 26-10-2026): una columna por diapositiva en una sección interior, debajo de los carruseles; en el editor se ven así, una al lado de otra, para editarlas. En la tienda se apilan en la misma celda y solo se ve la de la diapositiva que está a la vista (.srm-hero-txt--activo, la pone el script del tipo; sin script, la primera), con un fundido. Desde 1280 px van encima de la foto, abajo a la izquierda, sobre un velo blanco suave: las fotos llevan producto por todas partes y abajo a la izquierda solo hay producto secundario. Por debajo de 1280 px, bajo la foto: encima taparían el producto y, con la foto más baja, la flecha izquierda (va dentro del carrusel, que tiene su propio z-index, y no puede quedar por encima). El velo no recibe los clics: llegan a la foto */ body:not(.elementor-editor-active) .srm-hero-textos>.elementor-container>.elementor-row{display:grid} body:not(.elementor-editor-active) .srm-hero-txt{grid-area:1/1;width:100% !important;opacity:0;visibility:hidden; transition:opacity .3s ease,visibility 0s linear .3s} /* El que entra espera a que se vaya el anterior (0,3 s) y aparece en 0,5 s, mientras funden las fotos (0,9 s) */ body:not(.elementor-editor-active) .srm-hero-txt.srm-hero-txt--activo, body:not(.elementor-editor-active) .srm-hero:not(.srm-hero--js) .srm-hero-txt:first-child{opacity:1; visibility:visible;transition:opacity .5s ease .3s,visibility 0s linear 0s} @media (min-width:1280px){ body:not(.elementor-editor-active) .srm-hero>.elementor-container>.elementor-row>.elementor-column> .elementor-column-wrap>.elementor-widget-wrap{position:relative} /* Los textos empiezan justo debajo de la flecha izquierda (centrada en la foto, 58 px de alto: hasta el 50 % + 29 px), a la misma altura en todas las diapositivas, y no abajo del todo: a 1920 px la foto mide 800 de alto y, con la cabecera, el botón quedaba fuera de la primera pantalla, debajo de la barra de tareas (Mario, 26-10-2026). Los 72 px de arriba son para el velo. La capa llega hasta abajo de la foto (Mario, 27-10-2026: «que la franja del degradado llegue hasta abajo del slider»): acababa bajo el botón y el velo, más fuerte abajo a la izquierda, se cortaba ahí con una línea recta */ body:not(.elementor-editor-active) .srm-hero-textos{position:absolute !important;left:0;top:calc(50% - 32px); bottom:0;z-index:2; width:min(40%,640px);margin:0 !important;padding:72px 56px 24px var(--srm-lado) !important;pointer-events:none; background:radial-gradient(farthest-side at 0 100%,rgba(255,255,255,.85),rgba(255,255,255,.55) 50%, rgba(255,255,255,0))} /* Encima de la foto, el titular crece con ella (2,6vw, de 28 a 46 px; el tamaño del panel vale para el móvil) y no pasa de 7,8 em de ancho, unas 11 letras: las fotos llevan producto a partir del 25 % del ancho. En una sola línea se metía en el bote del centro */ body:not(.elementor-editor-active) .srm-hero-txt .elementor-heading-title{font-size:clamp(28px,2.6vw,46px); max-width:7.8em} body:not(.elementor-editor-active) .srm-hero-txt.srm-hero-txt--activo, body:not(.elementor-editor-active) .srm-hero:not(.srm-hero--js) .srm-hero-txt:first-child{ pointer-events:auto} } @media (max-width:1279px){ body:not(.elementor-editor-active) .srm-hero-textos{padding:20px var(--srm-lado) 0 !important} } /* Hero con «tono»: «oscuro» (fotos con el fondo del color oscuro de la marca; Farmacia Soraya Rodríguez, 03-11-2026: «mucho más verde inglés»): los textos, en crema (en el panel), sobre un velo del color oscuro y no blanco; por debajo de 1280 px, donde van bajo la foto, el bloque de los textos lleva ese color de fondo, como si la foto siguiera. La barra de progreso, en crema */ @media (min-width:1280px){ body:not(.elementor-editor-active) .srm-tono-oscuro .srm-hero-textos{ background:radial-gradient(farthest-side at 0 100%,rgba(33,49,26,.9),rgba(33,49,26,.6) 50%, rgba(33,49,26,0))} } @media (max-width:1279px){ body:not(.elementor-editor-active) .srm-tono-oscuro .srm-hero-textos{ padding:24px var(--srm-lado) 32px !important;background:#21311a} } .srm-tono-oscuro .srm-hero-tramo i::before,.srm-tono-oscuro .srm-hero-tramo i::after{background:#f3eee4} .srm-tono-oscuro .srm-hero-tramo:focus-visible{outline-color:#f3eee4} /* Al bajar, las fotos del hero se acercan y bajan un poco (como en grpsmiranda.es: de 1 a 1,15 y un 6 %), al ritmo del scroll durante la primera pantalla; el carrusel recorta lo que sobra. Sin animation-timeline o con movimiento reducido, quietas */ .srm-hero .swiper-slide,.srm-hero .slick-slide{overflow:hidden} @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .srm-hero .swiper-slide img,.srm-hero .slick-slide img{transform-origin:50% 40%;animation:srmZoom linear both; animation-timeline:scroll(root);animation-range:0 100vh} } } @keyframes srmZoom{from{transform:scale(1) translateY(0)}to{transform:scale(1.15) translateY(6%)}} /* El H1 corto de la portada va con la letra del texto, no con la de titulares */ .srm-h1 .elementor-heading-title{font-family:inherit} /* H1 sin verlo («oculto» en el lema): sigue en la página para los buscadores y los lectores de pantalla */ .srm-oculto{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important; margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important; border:0 !important} /* Titulares de bloque y enlaces «Ver todo» */ .srm-cab .elementor-heading-title{text-wrap:balance} /* Titulares letra a letra (Mario, 22-10-2026: «de abajo a arriba letra por letra usando el line height como máscara», como el estilo espectacular del tipo tienda). El script del tipo parte cada titular de bloque en palabras (.srm-pal) y letras (.srm-letra), lo marca con .srm-tit y, al entrar en pantalla, le pone .srm-tit--visto: cada palabra recorta lo que sale de su línea (clip-path) y sus letras suben desde debajo, una tras otra. Sin script o con «reducir movimiento», el titular se ve entero y quieto */ .srm-pal{display:inline-block} .srm-letra{display:inline-block;white-space:pre} @media screen and (prefers-reduced-motion:no-preference){ .srm-tit .srm-pal{clip-path:inset(-.3em -.12em -.26em -.12em)} .srm-tit .srm-letra{translate:0 140%} .srm-tit--visto .srm-letra{translate:0 0; transition:translate .75s cubic-bezier(.2,.8,.2,1) calc(var(--i) * var(--srm-paso, 26ms))} } .srm-enlace .elementor-button{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .srm-enlace .elementor-button:hover{text-decoration-color:#21311a} .srm-boton .elementor-button{transition:background-color .2s,color .2s} /* Filas de tarjetas alineadas con los titulares: el hueco «narrow» deja 5 px por columna (el margen lateral del control de la sección interior no se aplica). Con el ancho del Theme Editor al 100 %, el tema pone max-width:100% a los contenedores «boxed» y el margen negativo desplazaba la fila en lugar de ensancharla: las tarjetas acababan 10 px antes por la derecha */ .elementor-section.srm-rejilla>.elementor-container,.elementor-section.srm-fila>.elementor-container{ margin-left:-5px;margin-right:-5px;max-width:none} /* Tarjetas (Banner con el texto debajo): foto sin marco y un leve acercamiento al pasar */ .srm-tarjeta .elementor-iqit-banner,.srm-tarjeta .elementor-iqit-banner-img{border-radius:0;box-shadow:none} .srm-tarjeta .elementor-iqit-banner-img{overflow:hidden} .srm-tarjeta img{display:block;width:100%;height:auto;transition:transform .6s ease} @media (hover:hover) and (prefers-reduced-motion:no-preference){.srm-tarjeta a:hover img{transform:scale(1.03)}} .srm-tarjeta .elementor-iqit-banner-title{margin:0} /* Tarjetas con velo («velo» en categorías y galería; Farmacia Soraya Rodríguez, 03-11-2026: el verde de fondo como velo y las fotos debajo): el color va en el panel (Banner › Estilo › Superposición) y el nombre, encima. El tema solo enseña el velo al pasar el ratón (opacity 0; en una pantalla táctil, nunca): aquí se ve siempre y, al pasar, se aclara un poco para que asome la foto */ .elementor-widget-banner.srm-tarjeta--velo .elementor-iqit-banner-overlay{opacity:1;transition:opacity .4s ease} @media (hover:hover){.elementor-widget-banner.srm-tarjeta--velo:hover .elementor-iqit-banner-overlay{opacity:.72}} .srm-tarjeta--velo .elementor-iqit-banner-title{text-wrap:balance} /* Marco por dentro de las tarjetas («marco» en categorías y galería; Mario, 03-11-2026: «bordes blancos por dentro del bloque que al hacer hover se muevan» y, después, «más espectacular»: la versión «destello», elegida entre dos grabadas). En reposo, cuatro escuadras finas en crema en las esquinas, a 18 px del borde: ::before lleva los brazos de arriba y abajo y ::after los de los lados, cuatro degradados cada uno. Al pasar el ratón, los brazos crecen hasta dibujar el marco entero (primero arriba y abajo, después los lados) y el marco se mete a 26 px; la foto se acerca despacio, el velo se aclara, el nombre sube con una línea fina que se dibuja debajo y una franja de luz cálida cruza la foto en diagonal (::after de la figura, por encima del velo, que lleva z-index 3). En pantallas táctiles, las escuadras quietas (a 10 px en el móvil); con «reducir movimiento», el marco se cierra sin moverse y sin destello. No reciben los clics: llegan al enlace de la tarjeta */ .srm-tarjeta--marco .elementor-iqit-banner{position:relative} .srm-tarjeta--marco .elementor-iqit-banner::before,.srm-tarjeta--marco .elementor-iqit-banner::after{content:""; position:absolute;inset:18px;z-index:4;pointer-events:none;background-repeat:no-repeat; background-image:linear-gradient(#f3eee4,#f3eee4),linear-gradient(#f3eee4,#f3eee4), linear-gradient(#f3eee4,#f3eee4),linear-gradient(#f3eee4,#f3eee4); background-position:left top,right top,left bottom,right bottom; transition:background-size .55s cubic-bezier(.65,0,.35,1),inset .9s cubic-bezier(.2,.8,.2,1)} .srm-tarjeta--marco .elementor-iqit-banner::before{background-size:28px 1px;transition-delay:.12s,0s} .srm-tarjeta--marco .elementor-iqit-banner::after{background-size:1px 28px} .srm-tarjeta--marco img{transition:transform 1.6s cubic-bezier(.2,.8,.2,1)} .elementor-widget-banner.srm-tarjeta--marco .elementor-iqit-banner-overlay{transition:opacity .9s ease} .srm-tarjeta--marco .elementor-iqit-banner-title{position:relative;transition:transform .9s cubic-bezier(.2,.8,.2,1)} .srm-tarjeta--marco .elementor-iqit-banner-title::after{content:"";position:absolute;left:50%;top:100%;width:40px; height:1px;margin:10px 0 0 -20px;background:#f3eee4;transform:scaleX(0); transition:transform .45s cubic-bezier(.65,0,.35,1)} /* La luz es cálida en todas las tiendas: no es un color de la marca */ .srm-tarjeta--marco .elementor-iqit-banner-img{position:relative} .srm-tarjeta--marco .elementor-iqit-banner-img::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-95%; width:70%;z-index:4;pointer-events:none;transform:skewX(-14deg); background:linear-gradient(90deg,transparent,rgba(255,240,205,.16) 28%,rgba(255,246,222,.5) 50%, rgba(255,240,205,.16) 72%,transparent)} @media (hover:hover){ .srm-tarjeta--marco:hover .elementor-iqit-banner::before{background-size:calc(50% + 1px) 1px;transition-delay:0s,0s} .srm-tarjeta--marco:hover .elementor-iqit-banner::after{background-size:1px calc(50% + 1px);transition-delay:.15s,0s} .elementor-widget-banner.srm-tarjeta--velo.srm-tarjeta--marco:hover .elementor-iqit-banner-overlay{opacity:.6} .srm-tarjeta--marco:hover .elementor-iqit-banner-title::after{transform:scaleX(1); transition:transform .7s cubic-bezier(.65,0,.35,1) .35s} } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .srm-tarjeta--marco:hover .elementor-iqit-banner::before, .srm-tarjeta--marco:hover .elementor-iqit-banner::after{inset:26px} .srm-tarjeta--marco a:hover img{transform:scale(1.07)} .srm-tarjeta--marco:hover .elementor-iqit-banner-title{transform:translateY(-5px)} .srm-tarjeta--marco:hover .elementor-iqit-banner-img::after{transform:translateX(320%) skewX(-14deg); transition:transform 1.8s cubic-bezier(.35,0,.2,1) .1s} } @media (max-width:767px){ .srm-tarjeta--marco .elementor-iqit-banner::before,.srm-tarjeta--marco .elementor-iqit-banner::after{inset:10px} .srm-tarjeta--marco .elementor-iqit-banner::before{background-size:16px 1px} .srm-tarjeta--marco .elementor-iqit-banner::after{background-size:1px 16px} } @media (prefers-reduced-motion:reduce){ .srm-tarjeta--marco .elementor-iqit-banner::before,.srm-tarjeta--marco .elementor-iqit-banner::after, .srm-tarjeta--marco .elementor-iqit-banner-title::after{transition:none!important} } /* Tarjetas escalonadas («escalonado» en categorías y en «sobre» con dos fotos), como en 24hfarmaciaonline.es y martabenitezfarma.es: las pares más altas que las impares y, al recorrer la sección con el scroll, se mueven en sentido contrario y se cruzan (a mitad de pantalla quedan alineadas). Sin animation-timeline (Firefox) o con movimiento reducido, se quedan escalonadas. Las dos fotos, desde 768 px: en el móvil van una debajo de otra y, sin desplazamiento (--y vacío = 0), se quedan en su sitio */ .srm-escalonado{--srm-salto:56px} @media (max-width:767px){.srm-escalonado{--srm-salto:24px}} .srm-escalonado .srm-rejilla{padding-top:var(--srm-salto);padding-bottom:var(--srm-salto)} .srm-escalonado .srm-rejilla>.elementor-container>.elementor-row>.elementor-column{--srm-y:var(--srm-salto)} .srm-escalonado .srm-rejilla>.elementor-container>.elementor-row>.elementor-column:nth-child(even){ --srm-y:calc(var(--srm-salto) * -1)} @media (min-width:768px){ .srm-escalonado.srm-sobre-dos>.elementor-container>.elementor-row>.elementor-column{--srm-y:var(--srm-salto)} .srm-escalonado.srm-sobre-dos>.elementor-container>.elementor-row>.elementor-column:nth-child(even){ --srm-y:calc(var(--srm-salto) * -1)} } .srm-escalonado .srm-rejilla>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap, .srm-escalonado.srm-sobre-dos>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap{ transform:translateY(var(--srm-y,0px))} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .srm-escalonado .srm-rejilla>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap, .srm-escalonado.srm-sobre-dos>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap{ animation:srmCruce linear both;animation-timeline:view();animation-range:cover 0% cover 100%} } } @keyframes srmCruce{from{transform:translateY(var(--srm-y,0px))} to{transform:translateY(calc(var(--srm-y,0px) * -1))}} /* Entrada de carruseles y tarjetas (Mario, 22-10-2026): cuando un bloque entra en pantalla, el script del tipo le pone .srm-entra--visto y sus piezas (fichas del carrusel, columnas de las tarjetas, las dos fotos) suben y aparecen una tras otra (110 ms entre una y otra, de 4 en 4). El script solo marca .srm-entra en los bloques que aún no se ven al cargar: sin script, con «reducir movimiento» o lo que ya está a la vista, quieto y entero. En los carruseles, el propio carrusel recorta la subida (efecto máscara); la fila de marcas se recorta en vertical para que no salga una barra */ @media screen and (prefers-reduced-motion:no-preference){ .srm-entra .swiper-slide,.srm-entra>.elementor-container>.elementor-row>.elementor-column{opacity:0;translate:0 48px} .srm-entra--visto .swiper-slide,.srm-entra--visto>.elementor-container>.elementor-row>.elementor-column{opacity:1; translate:0 0;transition:opacity .8s ease calc(var(--srm-d, 0) * 110ms), translate 1s cubic-bezier(.2,.8,.2,1) calc(var(--srm-d, 0) * 110ms)} .srm-entra .swiper-slide:nth-child(4n+2),.srm-entra>.elementor-container>.elementor-row>.elementor-column:nth-child(4n+2){--srm-d:1} .srm-entra .swiper-slide:nth-child(4n+3),.srm-entra>.elementor-container>.elementor-row>.elementor-column:nth-child(4n+3){--srm-d:2} .srm-entra .swiper-slide:nth-child(4n+4),.srm-entra>.elementor-container>.elementor-row>.elementor-column:nth-child(4n+4){--srm-d:3} } /* La ventana que se abre («ventana»; Mario, 22-10-2026): la sección mide 2,2 pantallas y su contenido se queda fijo bajo la cabecera mientras se recorre (sticky). La foto empieza recortada en una ventana en el centro (clip-path) y, con el scroll, se abre hasta llenar la pantalla mientras se aleja un poco; la frase y el texto, encima, se desvanecen al final. Todo con la línea de tiempo de la sección (view-timeline), así la foto puede estar dentro de cualquier contenedor. La foto va detrás y la frase y el texto, en una rejilla centrada: el texto queda justo debajo aunque la frase ocupe dos líneas. La frase sube letra a letra como los titulares (.srm-tit, lo pone el script) y el texto aparece cuando ya han subido (:has; sin script, sin :has o con movimiento reducido, se ve desde el principio). Con una segunda frase (.srm-ventana--dos; Mario, 23-10-2026), la sección mide 2,6 pantallas: la foto se abre en la primera mitad del recorrido; después, la primera frase y su texto se van y, en las mismas celdas de la rejilla, entra la segunda frase, letra a letra, y su texto detrás. Con el script, las frases entran y salen letra a letra (Mario, 23-10-2026: «la misma animación de entrada y de salida letra a letra en el primer título»): el script de la ventana les pone .srm-tit--visto (suben desde debajo de su línea) o .srm-tit--fuera (se van por arriba) según el punto del recorrido, y al volver con el scroll hacen lo mismo al revés; los textos aparecen y se van con ellas. Sin script, las frases se desvanecen con el scroll. --srm-cab es la altura de la cabecera fija: la mide el script (galeria.js.tpl) mientras se ve la sección; sin él, 118 y 96 px (Warehouse 4.8.2, cabecera de logo centrado). Sin animation-timeline o con movimiento reducido: la foto en 3:2 (2:3 en el móvil) con las frases y los textos encima, una debajo de otra y quietos */ .srm-ventana{--srm-cab:118px;--srm-vy:24%;--srm-vx:30%} @media (max-width:767px){.srm-ventana{--srm-cab:96px;--srm-vy:24%;--srm-vx:12%}} .srm-ventana .elementor-widget-wrap{position:relative;display:grid;grid-template-columns:100%; grid-template-rows:1fr auto auto auto auto 1fr;aspect-ratio:3/2;overflow:hidden} @media (max-width:767px){.srm-ventana .elementor-widget-wrap{aspect-ratio:2/3}} .srm-ventana-foto{position:absolute !important;inset:0;margin:0 !important} .srm-ventana-foto .elementor-widget-container,.srm-ventana-foto .elementor-image{height:100%} .srm-ventana-foto img{display:block;width:100%;height:100%;object-fit:cover} /* La columna, explícita: con solo la fila, la rejilla no deja que dos piezas compartan celda y manda la segunda frase a una columna implícita sin ancho (se partía letra a letra hacia abajo y empujaba la primera fuera; 23-10-2026) */ .srm-ventana-txt,.srm-ventana-sub,.srm-ventana-txt2,.srm-ventana-sub2{position:relative;width:100%; grid-column:1;margin:0 !important;padding:0 6%} .srm-ventana-txt{grid-row:2;align-self:end} .srm-ventana-sub{grid-row:3;align-self:start} .srm-ventana-txt2{grid-row:4;align-self:end;margin-top:48px !important} .srm-ventana-sub2{grid-row:5;align-self:start} .srm-ventana-txt .elementor-heading-title,.srm-ventana-txt2 .elementor-heading-title{text-wrap:balance} .srm-ventana-sub,.srm-ventana-sub2{margin-top:18px !important} .srm-ventana-sub .elementor-text-editor,.srm-ventana-sub2 .elementor-text-editor{max-width:32em;margin:0 auto; text-wrap:balance} .srm-ventana-sub p:last-child,.srm-ventana-sub2 p:last-child{margin-bottom:0} @media (max-width:767px){ .srm-ventana-sub,.srm-ventana-sub2{margin-top:12px !important} .srm-ventana-txt2{margin-top:32px !important} } @media screen and (prefers-reduced-motion:no-preference){ .srm-ventana:has(.srm-ventana-txt .srm-tit) .srm-ventana-sub>.elementor-widget-container, .srm-ventana:has(.srm-ventana-txt2 .srm-tit) .srm-ventana-sub2>.elementor-widget-container{opacity:0; translate:0 16px;transition:opacity .4s ease,translate .4s ease} .srm-ventana:has(.srm-ventana-txt .srm-tit--visto) .srm-ventana-sub>.elementor-widget-container, .srm-ventana:has(.srm-ventana-txt2 .srm-tit--visto) .srm-ventana-sub2>.elementor-widget-container{ opacity:1;translate:0 0;transition:opacity .9s ease .6s,translate .9s cubic-bezier(.2,.8,.2,1) .6s} /* Las letras de las frases se mueven en los tres sentidos (entrar, irse por arriba y volver): la transición, siempre */ .srm-ventana .srm-tit .srm-letra{ transition:translate .75s cubic-bezier(.2,.8,.2,1) calc(var(--i) * var(--srm-paso, 26ms))} .srm-ventana .srm-tit--fuera .srm-letra{translate:0 -140%} } @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .srm-ventana{view-timeline:--srmVentana block} .srm-ventana>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap{height:220vh; align-items:flex-start} .srm-ventana .elementor-widget-wrap{position:sticky;top:var(--srm-cab);height:calc(100vh - var(--srm-cab)); aspect-ratio:auto;grid-template-rows:1fr auto auto 1fr} .srm-ventana-foto{animation:srmVentana linear both;animation-timeline:--srmVentana; animation-range:contain 0% contain 70%} .srm-ventana-foto img{animation:srmVentanaFoto linear both;animation-timeline:--srmVentana; animation-range:contain 0% contain 70%} .srm-ventana-txt,.srm-ventana-sub{animation:srmVentanaTxt linear both;animation-timeline:--srmVentana; animation-range:contain 60% contain 95%} /* Con dos frases: más recorrido; la foto, abierta a la mitad; la primera frase se va y la segunda entra en su sitio (y se queda hasta que la sección se va) */ .srm-ventana--dos>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap{height:260vh} .srm-ventana--dos .srm-ventana-foto,.srm-ventana--dos .srm-ventana-foto img{ animation-range:contain 0% contain 50%} .srm-ventana--dos .srm-ventana-txt,.srm-ventana--dos .srm-ventana-sub{ animation-range:contain 46% contain 58%} .srm-ventana-txt2{grid-row:2;margin-top:0 !important} .srm-ventana-sub2{grid-row:3} .srm-ventana-txt2,.srm-ventana-sub2{animation:srmVentanaEntra linear both; animation-timeline:--srmVentana;animation-range:contain 58% contain 63%} /* Con las frases partidas en letras (script), sin desvanecerse con el scroll: entran y salen letra a letra y sus textos van con ellas */ .srm-ventana .srm-ventana-txt:has(.srm-tit),.srm-ventana .srm-ventana-txt2:has(.srm-tit), .srm-ventana:has(.srm-ventana-txt .srm-tit) .srm-ventana-sub, .srm-ventana:has(.srm-ventana-txt2 .srm-tit) .srm-ventana-sub2{animation:none} } } @keyframes srmVentana{from{clip-path:inset(var(--srm-vy) var(--srm-vx))}to{clip-path:inset(0 0)}} @keyframes srmVentanaFoto{from{transform:scale(1.25)}to{transform:scale(1)}} @keyframes srmVentanaTxt{to{opacity:0;translate:0 -6vh}} @keyframes srmVentanaEntra{from{opacity:0}} /* Galería deslizable (marcas…): una fila de tarjetas con scroll-snap, 4 a la vista en escritorio */ .srm-fila>.elementor-container>.elementor-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none} .srm-fila>.elementor-container>.elementor-row::-webkit-scrollbar{display:none} .srm-fila>.elementor-container>.elementor-row>.elementor-column{flex:0 0 25%;width:25%;max-width:25%;scroll-snap-align:start} @media (max-width:1024px){.srm-fila>.elementor-container>.elementor-row>.elementor-column{flex-basis:33.333%;width:33.333%;max-width:33.333%}} @media (max-width:767px){.srm-fila>.elementor-container>.elementor-row>.elementor-column{flex-basis:44%;width:44%;max-width:44%}} @media (prefers-reduced-motion:reduce){.srm-fila>.elementor-container>.elementor-row{scroll-behavior:auto}} /* Flechas de la galería (las pone el script de la portada dentro de la fila; solo con ratón): a los lados, a media altura de las fotos y sin fondo, como las de los carruseles de productos (Mario, 23-10-2026: «que las flechas de control estén en los extremos laterales en el medio como en los carruseles»). El script ajusta la altura al centro de la primera foto; sin él, a media fila */ .srm-fila{position:relative} .srm-flechas{position:absolute;left:0;right:0;top:50%;z-index:2;height:0;margin:0;display:flex; justify-content:space-between;align-items:center;pointer-events:none} .srm-flecha{pointer-events:auto;width:38px;height:58px;border:0;background:transparent;color:#000000;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:0;transition:opacity .2s} .srm-flecha::before{content:"";width:13px;height:13px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-right:5px} .srm-flecha--prev::before{transform:rotate(-135deg);margin:0 0 0 5px} .srm-flecha:hover:not(:disabled){opacity:.55} .srm-flecha:disabled{opacity:.25;cursor:default} .srm-flecha:focus-visible{outline:2px solid #21311a;outline-offset:2px} @media (hover:none){.srm-flechas{display:none}} /* Foto + texto: la foto llena su columna y el texto va centrado en vertical a su lado (Posición de columna solo actúa con altura de sección) */ .srm-sobre-foto img{display:block;width:100%;height:auto} .srm-sobre>.elementor-container>.elementor-row{align-items:center} /* Dos fotos (sobre con «fotos»): en el móvil, una debajo de otra con la misma calle que las tarjetas (10 px: el hueco de las columnas que se pone a mano arriba) */ /* Con «tono»: «oscuro», en el móvil el texto va debajo de su foto, sobre el color oscuro, como los textos del hero: encima, en la foto cuadrada de 370 px, el texto y el botón tapaban los productos (Farmacia Soraya Rodríguez, 03-11-2026) */ @media (max-width:767px){ .srm-sobre-dos.srm-tono-oscuro .elementor-widget-banner .elementor-iqit-banner-content-on{position:static; background:#21311a} } /* «Nuestra marca» con vídeo en la foto de la derecha (sobre con «video»; Mario, 23-10-2026): el widget de vídeo va encima de la foto y del mismo tamaño, y la foto hace de imagen de espera: es lo que se ve hasta que el vídeo pinta (el script le pone .srm-video--va), con «reducir movimiento» o sin script. Los clics pasan a la foto. Hace falta el z-index: la caja del Banner lleva z-index 1 (.elementor-iqit-banner y su figure) y, sin él, el vídeo se reproduce detrás de la foto sin verse */ .srm-sobre-dos .elementor-widget-wrap{position:relative} .srm-sobre-video{position:absolute !important;inset:0;z-index:2;width:100%;margin:0 !important;pointer-events:none} .srm-sobre-video .elementor-widget-container,.srm-sobre-video .elementor-widget-container>div{height:100%; padding:0} .srm-sobre-video video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s} .srm-sobre-video.srm-video--va video{opacity:1} @media (prefers-reduced-motion:reduce){.srm-sobre-video{display:none}} /* Farmacia Soraya Rodríguez · cabecera fija (Mario, 22-10-2026: «que cuando el header sea sticky solo quede visible 'SR' del logo» y sin el hueco bajo el menú; después, «haz un poco más pequeño el logo en el sticky header»). Sin la barra superior, la cabecera está en y = 0 y el tema la fija nada más bajar y ya no la suelta arriba. El tema reserva 194 px y, con Theme Editor › Sticky padding igual al normal (20 px), arriba del todo la cabecera fija mide eso mismo: sin hueco. Al bajar los primeros 86 px se encoge al ritmo del scroll (relleno 20 → 8 px; logo de 104 a 72 px de ancho y recortado a las letras «SR», el 59 % de arriba del SVG: 43 px), así que el borde de abajo va pegado al contenido (195 → 110 px, medido a 1440). Antes, 88 px de ancho, 52 de alto y 77 px de recorrido. Sin animation-timeline (Firefox), la cabecera fija se queda entera. */ @supports (animation-timeline: scroll()) { #desktop-header.stuck-header .header-top{animation:srCabFija linear both;animation-timeline:scroll(root); animation-range:0 86px} #desktop-header.stuck-header #desktop_logo a{display:block;overflow:hidden;animation:srLogoRecorte linear both; animation-timeline:scroll(root);animation-range:0 86px} #desktop-header.stuck-header #desktop_logo img.logo{animation:srLogoAncho linear both;animation-timeline:scroll(root); animation-range:0 86px} } @keyframes srCabFija{from{padding-top:20px;padding-bottom:20px}to{padding-top:8px;padding-bottom:8px}} @keyframes srLogoRecorte{from{height:105px}to{height:43px}} @keyframes srLogoAncho{from{width:104px}to{width:72px}} /* Farmacia Soraya Rodríguez · pie sin la columna «Nosotros» (Mario, 27-10-2026: «quita el bloque de menú 'nosotros' del footer»; tras despublicar Conócenos y Servicios solo le quedaba «Contacto»). Es el bloque 2 de iqitlinksmanager: el módulo no tiene opción de desactivarlo, así que se oculta aquí sin borrarlo (para recuperarlo, se quita esta regla). Las demás columnas del pie se reparten el ancho solas */ body #footer .block-iqitlinksmanager-2{display:none !important} /* Farmacia Soraya Rodríguez · más verde inglés (reunión con la clienta y decisiones de Mario, 03-11-2026: la web «demasiado blanca»; la cabecera entera en verde inglés, con el logo, el menú, el buscador y los iconos en crema; el pie en verde; más verde en el resto de la tienda). Los colores de la cabecera, el menú, la cabecera del móvil, su menú y el pie van en el Theme Editor (hw_bg_color, h_*, hm_*, rm_*, mm_*, fw_*, fc_bg_color); aquí, lo que el editor no tiene. Verde #21311a, verde claro #2e4426, crema #f3eee4. */ /* Logo en crema: el SVG de Diseño › Tema y logotipo es negro. La <img> se queda (tamaño, alt, enlace y el recorte de la cabecera fija), su dibujo sale de la caja (object-position) y el crema del fondo se ve con la forma del logo: una máscara con una copia del mismo SVG en /img/cms/sr-logo-forma.svg (si se cambia el logo, hay que subir también la copia). Sin máscaras (navegadores muy antiguos), el logo en blanco */ #desktop_logo img.logo,#mobile-header img.logo{filter:brightness(0) invert(1)} @supports (mask-image:none) or (-webkit-mask-image:none){ #desktop_logo img.logo,#mobile-header img.logo{filter:none;object-fit:none;object-position:-9999px 0; background:#f3eee4;-webkit-mask:url(/img/cms/sr-logo-forma.svg) center/100% 100% no-repeat; mask:url(/img/cms/sr-logo-forma.svg) center/100% 100% no-repeat} } /* Buscador de la cabecera: la línea, el texto y la lupa en crema (la hoja del tipo los pone en negro) */ #desktop-header #search_widget .form-search-control{border-bottom-color:rgba(243,238,228,.55);color:#f3eee4} #desktop-header #search_widget .form-search-control::placeholder{color:rgba(243,238,228,.75);opacity:1} #desktop-header #search_widget .search-btn,#desktop-header #search_widget button[type=submit]{color:#f3eee4} /* Copyright: en crema apagado y la línea fina de encima, clara (la hoja del tipo los pone en verde sobre blanco) */ #footer-copyrights,#footer-copyrights .copyright-txt,#footer-copyrights .copyright-txt p, #footer-copyrights a{color:rgba(243,238,228,.6) !important} #footer-copyrights>.container::before{background:rgba(243,238,228,.16)} /* Listados y páginas (categorías, marcas, búsqueda, páginas de información): el título en crema sobre una banda verde a todo el ancho, bajo la cabecera */ body:not(#index):not(#product) #wrapper .pageHeader{margin-bottom:32px;padding:40px 0 36px; border-top:1px solid rgba(243,238,228,.12);background:#21311a;color:#f3eee4} body:not(#index):not(#product) #wrapper .pageHeader :is(h1,.h1,.page-title,p,a){margin-bottom:0;color:#f3eee4} /* Pastillas de subcategorías y de filtros activos: verdes con el texto en crema */ #content-wrapper .block-categories .category-sub-menu>li>a,#js-active-search-filters .filter-block .btn{ background:#21311a;color:#f3eee4} #content-wrapper .block-categories .category-sub-menu>li>a:hover,#js-active-search-filters .filter-block .btn:hover{ background:#2e4426;color:#fff}