.iqitfake{ display: none;} @charset "UTF-8"; /*** Style mixins ***/ /*** Variables mixins and functions ***/ body { background: #ffffff; } .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1600; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #777777; } a:hover:not(.nav-link):not(.btn) { color: #333333; } .pagination .page-list li:hover { border-color: #333333; } .pagination .page-list li.current { border-color: #333333; } .pagination .page-list li.current a { color: #333333; } #mobile-header { border-bottom: solid 1px #e3e3e3; } #mobile-header .mobile-main-bar { padding-top: 1.25rem; padding-bottom: 1.25rem; } #mobile-header .m-nav-btn { color: #777777; } #mobile-header .m-nav-btn:hover { color: #333333; } #mobile-header .m-nav-btn > span { display: none !important; } #mobile-header .mobile-buttons-bar { background: #c9c9c9; } html { font-size: 16px; } @media (max-width: 767px) { html { font-size: 12px; } } body { line-height: 1.4rem; } body { font-family: Roboto Condensed, sans-serif; } .h1, .h2, .block-title, .page-title, .modal-title, .step-title { font-family: Roboto Condensed, sans-serif; } #blockcart-content { background: #ffffff; border: none 1px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); } /*** Secondary button ***/ .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled, .bootstrap-touchspin .group-span-filestyle .btn-touchspin, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .group-span-filestyle .btn-default { background: #ff6f20; color: #ffffff; border: none 1px #f0f0f0; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary :active, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled :active, .btn-secondary:disabled:hover, .btn-secondary:disabled:focus, .btn-secondary:disabled :active, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:hover, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:focus, .bootstrap-touchspin .group-span-filestyle .btn-touchspin :active, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:hover, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:focus, .group-span-filestyle .bootstrap-touchspin .btn-touchspin :active, .group-span-filestyle .btn-default:hover, .group-span-filestyle .btn-default:focus, .group-span-filestyle .btn-default :active { background: #dedede; color: #2e2e2e; } .btn-secondary:not(:disabled):not(.disabled):active { background: #dedede; color: #2e2e2e; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #ff6f20; color: #ffffff; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #dedede; color: #2e2e2e; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #ff6f20; color: #ffffff; border: none 1px; } .btn-primary:hover, .btn-primary:focus, .btn-primary :active, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled :active, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled :active { background: #333333; color: #ffffff; } .btn-primary:not(:disabled):not(.disabled):active { background: #333333; color: #ffffff; } #wrapper .breadcrumb { padding-top: 0.625rem; padding-bottom: 0.625rem; margin-top: -0.9375rem; margin-bottom: 0.9375rem; font-size: 0.75rem; font-style: normal; font-weight: normal; text-transform: none; color: #000000; } #wrapper .breadcrumb li:after { color: #000000; } #wrapper .breadcrumb a { color: #000000; } /*** 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: #333!important; color: white!important; } .tooltip { --bs-tooltip-bg: #333333; --bs-tooltip-color: #ffffff; } /*** Modals ***/ .modal-backdrop { background: rgba(194, 194, 194, 0.7); } .modal-content { background: #ffffff; border: none 1px; } .js-quickview-np-btn { background: #ffffff; } /*** Notifications ***/ .ns-box { background: #ca5058; color: #ffffff; border: none 1px; } .product-price { color: #000000; } .iqit-review-star { color: #e0d041; } .product-flags .product-flag { font-size: 0.875rem; font-style: normal; font-weight: normal; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #eba53d; color: #ffffff; } .product-flags .new { background: #969696; color: #ffffff; } .product-flags .online-only, .product-flags .pack { background: #e0e0e0; color: #000000; } .product-flags .out_of_stock { background: #a17738; color: #fff7f7; } .discount { background: #eba53d; color: #ffffff; } .product-available { background: #67a675; color: #ffffff; } .product-unavailable { background: #a17738; color: #fff7f7; } .alert-success a:link:not(.nav-link):not(.btn), .alert-success a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-warning a:link:not(.nav-link):not(.btn), .alert-warning a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-danger a:link:not(.nav-link):not(.btn), .alert-danger a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } #iqitcompare-floating { background: #ffffff; border-top: none 1px; border-left: none 1px; border-right: none 1px; } #page-preloader { background: #ffffff; } #back-to-top { background: #ff6f00; color: #ffffff; display: none; } #back-to-top:hover { background: #333333; color: #ffffff; } #header, #checkout-header { background: #ff6f20; border-top: none 1px; border-bottom: none 1px; } .sticky-desktop-wrapper #desktop-header.stuck-header { background: #ff6f20; border-bottom: none 1px; } #header .header-nav { color: #777777; background: #f8f8f8; border-bottom: none 1px; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.75rem; display: none !important; } #header .header-nav a { color: #777777; } #header .header-nav a:hover { color: #333333; } #header .header-nav .social-links._topbar { font-size: 0.875rem; } .header-top { padding-top: 0.625rem; padding-bottom: 0.625rem; color: #ffffff; } .header-top a:not(.btn):not(.nav-link) { color: #ffffff; } .header-top a:not(.btn):not(.nav-link):hover { color: #dbdbdb; } .header-top .form-search-control { border: solid 1px #e3e3e3; } .header-top .header-btn-w .header-btn > .icon { font-size: 1.5625rem; display: block; } .header-top .header-cart-default a.cart-toogle { background: #000000; color: #ffffff; padding: 0.5625rem 0.5625rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #ffffff; } .header-top a.header-cart-btn:not(:hover) { color: #ffffff; } .stuck-header .header-top { padding-top: 0.3125rem; padding-bottom: 0.3125rem; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #000000; } .cart-products-count-btn { background: #1bd33f; color: #ffffff; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 55%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { background: #000000; 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.0625rem; max-width: 12.5rem; color: #ffffff; padding-left: 0.9375rem; padding-right: 0.9375rem; border-left: groove 2px rgba(87, 87, 87, 0.57); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #ffffff; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.03125rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 3.0625rem !important; } .cbp-vertical-on-top .cbp-vertical-title-text { display: none !important; } .cbp-horizontal > ul > li.cbp-hropen > a, .cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li.cbp-hropen > a:hover { background: #4e4e4e; color: #ffffff; } .cbp-horizontal .cbp-tab-title { font-size: 0.9375rem; font-style: normal; font-weight: bold; text-transform: none; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #ff6f20; color: #ffffff; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.25rem; max-height: 1.25rem; } @media (max-width: 1300px) { .cbp-horizontal .cbp-tab-title { font-size: 0.875rem; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { padding-left: 0.625rem; padding-right: 0.625rem; } } #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.125rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background: #000000; line-height: 3.125rem; } #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.5rem; padding-bottom: 0.5rem; 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.5rem; max-height: 1.5rem; } #cbp-hrmenu1 > ul > li.cbp-hropen > a, #cbp-hrmenu1 > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #333333; } #cbp-hrmenu1 .cbp-legend { background: #ff6f20; color: #ffffff; } #cbp-hrmenu1 .cbp-hrsub, #cbp-hrmenu1 > ul, #cbp-hrmenu1 .cbp-hrsub-level2, #cbp-hrmenu1 .cbp-hrsub-wrapper { transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out; } .cbp-vert-expanded #cbp-hrmenu1 .cbp-vertical-title { color: #ffffff; background: #000000; } .cbp-not-on-top #cbp-hrmenu1-ul { position: relative; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-wrapper { top: 0; margin-top: 0px !important; min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-hrsub { min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-show { -js-display: flex; display: flex; flex-wrap: wrap; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-inner { width: 100%; } /*** SUBMENU ***/ .cbp-hrmenu .cbp-hrsub { font-size: 0.875rem; 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: 0.875rem; font-style: normal; font-weight: bold; text-transform: uppercase; } .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:hover { color: !important; } /*** MOBILE MENU ***/ #mobile-header .col-mobile-menu-dropdown.show { background: #ffffff; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #595050 !important; } #iqitmegamenu-mobile { background: #ffffff; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab { min-height: 3.375rem; } #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: 1rem; padding-bottom: 1rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__link { color: #595050 !important; padding-top: 1rem; padding-bottom: 1rem; font-size: 1.125rem; font-style: normal; font-weight: normal; text-transform: none; } .col-mobile-menu-push #iqitmegamenu-mobile { border: none 1px; } .mobile-menu__submenu { background: #ffffff; } .mobile-menu__tab { border-bottom: solid 1px #ebebeb; min-height: 3.875rem; } .mobile-menu__link { color: #595050 !important; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 1.375rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__arrow { padding-top: 1.25rem; padding-bottom: 1.25rem; color: #595050; font-size: 1.375rem; } .mobile-menu__tab-icon { font-size: 1.375rem; } .mobile-menu__tab-icon--img { max-height: 1.375rem; } .mobile-menu__legend { font-size: 0.75rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background-color: #595050; } .mobile-menu__header-wrapper { color: #595050; background-color: #f4f4f4; border-bottom: none 1px; } .mobile-menu__title { font-size: 1.375rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__column-title { font-size: 1.375rem; font-style: normal; font-weight: bold; text-transform: uppercase; color: #595050 !important; } .mobile-menu__column { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050; margin-bottom: 2.5rem; } .mobile-menu__column-categories:not(:last-child) { margin-bottom: 2.5rem; } .mobile-menu__column-title { margin-bottom: 0.5rem; } .mobile-menu__links-list-li { padding-top: 0.375rem; padding-bottom: 0.375rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #595050; } .mobile-menu__footer { border-top: none 1px; color: #595050; background-color: #f4f4f4; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #333333; color: #ffffff; } .swiper-pagination-bullet { background: #333333; } /*** Product miniature ***/ .products.row { margin: 0rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 0rem; } .swiper-container-wrapper { margin: 0rem; } .swiper-container-wrapper .products.swiper-container { padding: 0rem; } .swiper-container-wrapper .product-carousel { padding: 0rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 0rem; } .product-miniature { border: none 1px; outline: 1px none transparent; } .product-miniature .thumbnail-container .product-thumbnail-second { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.3s ease; backface-visibility: hidden; } .product-miniature .thumbnail-container:hover .product-thumbnail-second { opacity: 1; } .product-miniature .thumbnail-container:hover .product-thumbnail-first { opacity: 0; } .product-miniature .thumbnail-container:hover picture:last-child .product-thumbnail-first { opacity: 1; } .product-miniature-grid .product-title { font-size: 0.875rem; font-style: normal; font-weight: normal; text-transform: none; } .product-miniature-grid .product-price { font-size: 0.875rem; font-style: normal; font-weight: normal; text-transform: none; } @media (hover: hover) { .product-miniature:hover { outline: none 1px; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); } } .product-miniature-grid .product-functional-buttons { background: #ffffff; } .product-miniature-grid .product-functional-buttons a:link, .product-miniature-grid .product-functional-buttons a:visited, .product-miniature-grid .product-functional-buttons a:hover { color: !important; } .products-grid .product-miniature .product-category-name { display: none !important; } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-brand { display: none !important; } .products-grid .product-miniature .product-description-short { display: none !important; } .products-grid .product-miniature .product-add-cart { display: none !important; } .products-grid .product-miniature .flag-discount-value { display: none !important; } .product-miniature .input-qty, .product-miniature .input-group-add-cart .bootstrap-touchspin { display: none !important; } .btn-product-list { padding: 0.46875rem 0.9375rem; background: black; color: #ffffff; border: none 1px; } .btn-product-list:hover { background: #ffffff; color: #000000; } .products-grid .product-miniature-layout-1 { text-align: center; } .products-grid .product-miniature-layout-1 .input-group-add-cart { justify-content: center; } .products-grid .product-miniature-layout-1 .product-description { padding: 0.625rem; } .products-grid .product-miniature-layout-2 .product-add-cart { display: none !important; } .products-grid .product-miniature-layout-2 .products-variants { padding-top: 0rem; } .products-grid .product-miniature-layout-2 .product-description { padding: 0.625rem; } .products-grid .product-miniature-layout-3 .product-description { background: rgba(40, 44, 51, 0.93); } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-rows: 1fr; grid-auto-rows: 0; display: grid; overflow-y: hidden; } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(5, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: none; } #product .images-container .product-cover { border: none 1px; } .images-container .swiper-button-arrow, #product .product-cover .expander > span, #product-modal .modal-body .swiper-button-arrow { color: #ffffff; background: #333333; } .images-container .swiper-button-arrow:hover, #product .product-cover .expander > span:hover, #product-modal .modal-body .swiper-button-arrow:hover { opacity: 0.6 !important; } .product-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: #333333; 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-modal .easyzoom-modal > a { cursor: default; } .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; } } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 0.9375rem; padding-bottom: 0.9375rem; color: #000000; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 1.25rem; padding-bottom: 1.25rem; } #content-wrapper .page-title { color: #000000; font-size: 1.375rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #000000; } #content-wrapper .section-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; } #content-wrapper .section-title a:link, #content-wrapper .section-title a:visited { color: #333333; } .nav-tabs .nav-link { color: #000000; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: #000000; border-bottom: solid 3px #ca5058; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .nav-link { border-bottom: solid 3px #ca5058; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #000000; border-bottom: solid 3px #ca5058; } #wrapper .block-title { color: #333333; font-size: 0.875rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #wrapper .block-title a:link, #wrapper .block-title a:visited { color: #333333; } #left-column .block, #right-column .block { border: none 1px; } #footer, #checkout-footer { background: #f8f8f8; } #footer .ps-emailsubscription-block .newsletter-input-group, #checkout-footer .ps-emailsubscription-block .newsletter-input-group { border: solid 1px #e3e3e3; background: #ffffff; } #footer .ps-emailsubscription-block .newsletter-input-group .input-subscription, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .input-subscription { color: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe { color: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover { color: #bd4e0f; } #footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder { color: #777777; } #footer .social-links._footer, #checkout-footer .social-links._footer { font-size: 1.1875rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #777777 !important; } #footer .block-title, #checkout-footer .block-title { color: #333333; font-size: 0.875rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:link, #checkout-footer .block-title a:visited { color: #333333; } #footer-container-first { border-top: none 1px; padding-top: 1.875rem; padding-bottom: 1.875rem; background: #212121; color: #ffffff; } #footer-container-first h5 { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: none; } #footer-container-main, #checkout-footer { border-top: none 1px; padding-top: 2.5rem; padding-bottom: 1.5rem; color: #777777; } #footer-container-main a, #checkout-footer a { color: #777777; } #footer-container-main a:hover, #checkout-footer a:hover { color: #333333; } #footer-copyrights { border-top: none 1px; background: #ffffff; padding-top: 0.9375rem; padding-bottom: 0.9375rem; } @media (max-width: 767px) { #footer .block-toggle { width: 100%; flex-basis: initial; } #footer .block-toggle > .block-title { cursor: pointer; } #footer .block-toggle > .block-title span::after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; margin-left: 10px; } #footer .block-toggle > .block-content { display: none; } #footer .block-toggle._toggled > .block-content { display: block; } #footer .block-toggle._toggled .block-title span::after { content: ""; } #footer .footer-style-inline .block-title { display: block !important; max-width: 100%; } #footer .footer-style-inline .block-content { display: block; width: 100%; margin-top: 1rem; } } #maintenance-page { background: #e3e3e3; color: #000000; } #maintenance-page a, #maintenance-page a:link { color: #000000; } .maintenance-page-newsletter .maintenance-page-newsletter-btn { background: #000000; color: #ffffff; } .maintenance-page-newsletter .maintenance-page-newsletter-btn:hover { background: #333333; color: #ffffff; } .maintenance-page-newsletter input[type=email] { border: solid 1px #333333; background: #e3e3e3; color: #333333; } .maintenance-page-newsletter input[type=email]::-webkit-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]::-moz-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]:-ms-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email] :-moz-placeholder { color: #333333; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } .iqitfake { display: none; } @charset "UTF-8"; /*** Style mixins ***/ /*** Variables mixins and functions ***/ body { background: #f1f1f1; } #main{ background-color: #ffffff; padding: 20px; } .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1400; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #000000; } a:hover:not(.nav-link):not(.btn) { color: #ff6f20; } .pagination .page-list li:hover { border-color: #ff6f20; } .pagination .page-list li.current { border-color: #ff6f20; } .pagination .page-list li.current a { color: #ff6f20; } #mobile-header { border-bottom: solid 1px #e3e3e3; } #mobile-header .mobile-main-bar { padding-top: 1.25rem; padding-bottom: 1.25rem; } #mobile-header .m-nav-btn { color: #777777; } #mobile-header .m-nav-btn:hover { color: #333333; } #mobile-header .m-nav-btn > span { display: none !important; } #mobile-header .mobile-buttons-bar { background: #c9c9c9; } html { font-size: 16px; } @media (max-width: 767px) { html { font-size: 12px; } } body { line-height: 1.4rem; } body { font-family: Roboto Condensed, sans-serif; } .h1, .h2, .block-title, .page-title, .modal-title, .step-title { font-family: Roboto Condensed, sans-serif; } #blockcart-content { background: #ffffff; border: none 1px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); } /*** Secondary button ***/ .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled, .bootstrap-touchspin .group-span-filestyle .btn-touchspin, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .group-span-filestyle .btn-default { background: #ff6f20; color: #ffffff; border: none 1px #f0f0f0; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary :active, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled :active, .btn-secondary:disabled:hover, .btn-secondary:disabled:focus, .btn-secondary:disabled :active, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:hover, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:focus, .bootstrap-touchspin .group-span-filestyle .btn-touchspin :active, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:hover, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:focus, .group-span-filestyle .bootstrap-touchspin .btn-touchspin :active, .group-span-filestyle .btn-default:hover, .group-span-filestyle .btn-default:focus, .group-span-filestyle .btn-default :active { background: #dedede; color: #2e2e2e; } .btn-secondary:not(:disabled):not(.disabled):active { background: #dedede; color: #2e2e2e; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #ff6f20; color: #ffffff; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #dedede; color: #2e2e2e; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #ff6f20; color: #ffffff; border: none 1px; } .btn-primary:hover, .btn-primary:focus, .btn-primary :active, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled :active, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled :active { background: #000; color: #ffffff; } .btn-primary:not(:disabled):not(.disabled):active { background: #333333; color: #ffffff; } #wrapper .breadcrumb { padding-top: 0.625rem; padding-bottom: 0.625rem; margin-top: -0.9375rem; margin-bottom: 0.9375rem; font-size: 0.75rem; font-style: normal; font-weight: normal; text-transform: none; color: #000000; } #wrapper .breadcrumb li:after { color: #000000; } #wrapper .breadcrumb a { color: #000000; } /*** 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: #333!important; color: white!important; } .tooltip { --bs-tooltip-bg: #333333; --bs-tooltip-color: #ffffff; } /*** Modals ***/ .modal-backdrop { background: rgba(194, 194, 194, 0.7); } .modal-content { background: #ffffff; border: none 1px; } .js-quickview-np-btn { background: #ffffff; } /*** Notifications ***/ .ns-box { background: #ca5058; color: #ffffff; border: none 1px; } .product-price { color: #000000; } .iqit-review-star { color: #e0d041; } .product-flags .product-flag { font-size: 0.875rem; font-style: normal; font-weight: normal; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #eba53d; color: #ffffff; } .product-flags .new { background: #969696; color: #ffffff; } .product-flags .online-only, .product-flags .pack { background: #e0e0e0; color: #000000; } .product-flags .out_of_stock { background: #a17738; color: #fff7f7; } .discount { background: #eba53d; color: #ffffff; } .product-available { background: #67a675; color: #ffffff; } .product-unavailable { background: #a17738; color: #fff7f7; } .alert-success a:link:not(.nav-link):not(.btn), .alert-success a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-warning a:link:not(.nav-link):not(.btn), .alert-warning a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-danger a:link:not(.nav-link):not(.btn), .alert-danger a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } #iqitcompare-floating { background: #ffffff; border-top: none 1px; border-left: none 1px; border-right: none 1px; } #page-preloader { background: #ffffff; } #back-to-top { background: #ff6f00; color: #ffffff; display: none; } #back-to-top:hover { background: #333333; color: #ffffff; } #header, #checkout-header { background: #ff6f20; border-top: none 1px; border-bottom: none 1px; } .sticky-desktop-wrapper #desktop-header.stuck-header { background: #ff6f20; border-bottom: none 1px; } #header .header-nav { color: #777777; background: #f8f8f8; border-bottom: none 1px; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.75rem; display: none !important; } #header .header-nav a { color: #777777; } #header .header-nav a:hover { color: #333333; } #header .header-nav .social-links._topbar { font-size: 0.875rem; } .header-top { padding-top: 0.625rem; padding-bottom: 0.625rem; color: #ffffff; } .header-top a:not(.btn):not(.nav-link) { color: #ffffff; } .header-top a:not(.btn):not(.nav-link):hover { color: #dbdbdb; } .header-top .form-search-control { border: solid 1px #e3e3e3; } .header-top .header-btn-w .header-btn > .icon { font-size: 1.5625rem; display: block; } .header-top .header-cart-default a.cart-toogle { background: #000000; color: #ffffff; padding: 0.5625rem 0.5625rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #ffffff; } .header-top a.header-cart-btn:not(:hover) { color: #ffffff; } .stuck-header .header-top { padding-top: 0.3125rem; padding-bottom: 0.3125rem; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #000000; } .cart-products-count-btn { background: #1bd33f; color: #ffffff; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 55%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { background: #000000; 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.0625rem; max-width: 12.5rem; color: #ffffff; padding-left: 0.9375rem; padding-right: 0.9375rem; border-left: groove 2px rgba(87, 87, 87, 0.57); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #ffffff; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.03125rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 3.0625rem !important; } .cbp-vertical-on-top .cbp-vertical-title-text { display: none !important; } .cbp-horizontal > ul > li.cbp-hropen > a, .cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li.cbp-hropen > a:hover { background: #4e4e4e; color: #ffffff; } .cbp-horizontal .cbp-tab-title { font-size: 0.9375rem; font-style: normal; font-weight: bold; text-transform: none; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #ff6f20; color: #ffffff; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.25rem; max-height: 1.25rem; } @media (max-width: 1300px) { .cbp-horizontal .cbp-tab-title { font-size: 0.875rem; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { padding-left: 0.625rem; padding-right: 0.625rem; } } #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.125rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background: #000000; line-height: 3.125rem; } #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.5rem; padding-bottom: 0.5rem; 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.5rem; max-height: 1.5rem; } #cbp-hrmenu1 > ul > li.cbp-hropen > a, #cbp-hrmenu1 > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #333333; } #cbp-hrmenu1 .cbp-legend { background: #ff6f20; color: #ffffff; } #cbp-hrmenu1 .cbp-hrsub, #cbp-hrmenu1 > ul, #cbp-hrmenu1 .cbp-hrsub-level2, #cbp-hrmenu1 .cbp-hrsub-wrapper { transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out; } .cbp-vert-expanded #cbp-hrmenu1 .cbp-vertical-title { color: #ffffff; background: #000000; } .cbp-not-on-top #cbp-hrmenu1-ul { position: relative; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-wrapper { top: 0; margin-top: 0px !important; min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-hrsub { min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-show { -js-display: flex; display: flex; flex-wrap: wrap; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-inner { width: 100%; } /*** SUBMENU ***/ .cbp-hrmenu .cbp-hrsub { font-size: 0.875rem; font-style: normal; font-weight: normal; text-transform: none; } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu ul.cbp-hrsub-level2 { background: #ffffff; border: none !important; box-shadow: none; padding: 0px 17px !important; } .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: 0.875rem; font-style: normal; font-weight: bold; text-transform: uppercase; } .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:hover { color: !important; } /*** MOBILE MENU ***/ #mobile-header .col-mobile-menu-dropdown.show { background: #ffffff; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #595050 !important; } #iqitmegamenu-mobile { background: #ffffff; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab { min-height: 3.375rem; } #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: 1rem; padding-bottom: 1rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__link { color: #595050 !important; padding-top: 1rem; padding-bottom: 1rem; font-size: 1.125rem; font-style: normal; font-weight: normal; text-transform: none; } .col-mobile-menu-push #iqitmegamenu-mobile { border: none 1px; } .mobile-menu__submenu { background: #ffffff; } .mobile-menu__tab { border-bottom: solid 1px #ebebeb; min-height: 3.875rem; } .mobile-menu__link { color: #595050 !important; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 1.375rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__arrow { padding-top: 1.25rem; padding-bottom: 1.25rem; color: #595050; font-size: 1.375rem; } .mobile-menu__tab-icon { font-size: 1.375rem; } .mobile-menu__tab-icon--img { max-height: 1.375rem; } .mobile-menu__legend { font-size: 0.75rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background-color: #595050; } .mobile-menu__header-wrapper { color: #595050; background-color: #f4f4f4; border-bottom: none 1px; } .mobile-menu__title { font-size: 1.375rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__column-title { font-size: 1.375rem; font-style: normal; font-weight: bold; text-transform: uppercase; color: #595050 !important; } .mobile-menu__column { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050; margin-bottom: 2.5rem; } .mobile-menu__column-categories:not(:last-child) { margin-bottom: 2.5rem; } .mobile-menu__column-title { margin-bottom: 0.5rem; } .mobile-menu__links-list-li { padding-top: 0.375rem; padding-bottom: 0.375rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #595050; } .mobile-menu__footer { border-top: none 1px; color: #595050; background-color: #f4f4f4; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #000000; color: #ffffff; } .swiper-pagination-bullet { background: #000000; } /*** Product miniature ***/ .products.row { margin: 0rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 0rem; } .swiper-container-wrapper { margin: 0rem; } .swiper-container-wrapper .products.swiper-container { padding: 0rem; } .swiper-container-wrapper .product-carousel { padding: 0rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 0rem; } .product-miniature { border: none 1px; outline: 1px none transparent; } .product-miniature .thumbnail-container .product-thumbnail-second { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.3s ease; backface-visibility: hidden; } .product-miniature .thumbnail-container:hover .product-thumbnail-second { opacity: 1; } .product-miniature .thumbnail-container:hover .product-thumbnail-first { opacity: 0; } .product-miniature .thumbnail-container:hover picture:last-child .product-thumbnail-first { opacity: 1; } .product-miniature-grid .product-title { font-size: 0.875rem; font-style: normal; font-weight: normal; text-transform: none; } .product-miniature-grid .product-price { font-size: 0.875rem; font-style: normal; font-weight: normal; text-transform: none; } @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: !important; } .products-grid .product-miniature .product-category-name { display: none !important; } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-brand { display: none !important; } .products-grid .product-miniature .product-description-short { display: none !important; } .products-grid .product-miniature .product-add-cart { display: none !important; } .products-grid .product-miniature .products-variants { display: none !important; } .products-grid .product-miniature .flag-discount-value { display: none !important; } .product-miniature .input-qty, .product-miniature .input-group-add-cart .bootstrap-touchspin { display: none !important; } .btn-product-list { padding: 0.46875rem 0.9375rem; background: black; color: #ffffff; border: none 1px; } .btn-product-list:hover { background: #ffffff; color: #000000; } .products-grid .product-miniature-layout-1 { text-align: center; } .products-grid .product-miniature-layout-1 .input-group-add-cart { justify-content: center; } .products-grid .product-miniature-layout-1 .product-description { padding: 0.625rem; } .products-grid .product-miniature-layout-2 .product-add-cart { display: none !important; } .products-grid .product-miniature-layout-2 .products-variants { padding-top: 0rem; } .products-grid .product-miniature-layout-2 .product-description { padding: 0.625rem; } .products-grid .product-miniature-layout-3 .product-description { background: rgba(40, 44, 51, 0.93); } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-rows: 1fr; grid-auto-rows: 0; display: grid; overflow-y: hidden; } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(5, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: none; } #product .images-container .product-cover { border: none 1px; } .images-container .swiper-button-arrow, #product .product-cover .expander > span, #product-modal .modal-body .swiper-button-arrow { color: #ffffff; background: #333333; } .images-container .swiper-button-arrow:hover, #product .product-cover .expander > span:hover, #product-modal .modal-body .swiper-button-arrow:hover { opacity: 0.6 !important; } .product-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: #333333; 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-modal .easyzoom-modal > a { cursor: default; } .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; } } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 0.9375rem; padding-bottom: 0.9375rem; color: #000000; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 1.25rem; padding-bottom: 1.25rem; } #content-wrapper .page-title { color: #000000; font-size: 1.375rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #000000; } #content-wrapper .section-title { color: #000000; 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; } #content-wrapper .section-title a:link, #content-wrapper .section-title a:visited { color: #000000; } .nav-tabs .nav-link { color: #000000; font-size: 1rem; 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 #ff6f20; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .nav-link { border-bottom: solid 3px #ff6f20; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #000000; border-bottom: solid 3px #ff6f20; } #wrapper .block-title { color: #000000; font-size: 0.875rem; 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: #000000; } #left-column .block, #right-column .block { border: none 1px; } #footer, #checkout-footer { background: #f8f8f8; } #footer .ps-emailsubscription-block .newsletter-input-group, #checkout-footer .ps-emailsubscription-block .newsletter-input-group { border: solid 1px #e3e3e3; background: #ffffff; } #footer .ps-emailsubscription-block .newsletter-input-group .input-subscription, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .input-subscription { color: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe { color: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover { color: #bd4e0f; } #footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder { color: #777777; } #footer .social-links._footer, #checkout-footer .social-links._footer { font-size: 1.1875rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #777777 !important; } #footer .block-title, #checkout-footer .block-title { color: #fff; font-size: 0.875rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:link, #checkout-footer .block-title a:visited { color: #333333; } #footer-container-first { border-top: none 1px; padding-top: 1.875rem; padding-bottom: 1.875rem; background: #000; color: #ffffff; } #footer-container-first h5 { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: none; } #footer-container-main, #checkout-footer { border-top: none 1px; padding-top: 2.5rem; padding-bottom: 1.5rem; color: #fff; background: #000; } #footer-container-main a, #checkout-footer a { color: #fff; } #footer-container-main a:hover, #checkout-footer a:hover { color: #333333; } #footer-copyrights { border-top: none 1px; background: #ffffff; padding-top: 0.9375rem; padding-bottom: 0.9375rem; } @media (max-width: 767px) { #footer .block-toggle { width: 100%; flex-basis: initial; } #footer .block-toggle > .block-title { cursor: pointer; } #footer .block-toggle > .block-title span::after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; margin-left: 10px; } #footer .block-toggle > .block-content { display: none; } #footer .block-toggle._toggled > .block-content { display: block; } #footer .block-toggle._toggled .block-title span::after { content: ""; } #footer .footer-style-inline .block-title { display: block !important; max-width: 100%; } #footer .footer-style-inline .block-content { display: block; width: 100%; margin-top: 1rem; } } #maintenance-page { background: #e3e3e3; color: #000000; } #maintenance-page a, #maintenance-page a:link { color: #000000; } .maintenance-page-newsletter .maintenance-page-newsletter-btn { background: #000000; color: #ffffff; } .maintenance-page-newsletter .maintenance-page-newsletter-btn:hover { background: #333333; color: #ffffff; } .maintenance-page-newsletter input[type=email] { border: solid 1px #333333; background: #e3e3e3; color: #333333; } .maintenance-page-newsletter input[type=email]::-webkit-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]::-moz-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]:-ms-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email] :-moz-placeholder { color: #333333; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } .ps-shoppingcart.dropdown #blockcart-content { z-index: 1000; } .images-container { margin-bottom: 1.5rem; background-color: #ffffff; padding-left: 10px; } .swiper-vertical>.swiper-wrapper { display: flex; flex-direction: column; gap: 10px; padding-top: 15px; } #product-images-thumbs.swiper-vertical .thumb-container { padding: .5rem 0; border: 1px solid #ddd; cursor: pointer; transition: border-color .2s ease,opacity .2s ease; } #product-images-thumbs.swiper-vertical .thumb-container img { display: block; opacity: .5; transition: opacity .25s ease; } #product-images-thumbs.swiper-vertical .thumb-container:hover img { opacity: .8; } #product-images-thumbs.swiper-vertical .swiper-slide-thumb-active, #product-images-thumbs.swiper-vertical .thumb-container.selected { border: solid 1px #ff6f20; box-shadow: 0 0 0 1px rgba(0,0,0,.06),0 0 4px rgba(0,0,0,.15); } #product-images-thumbs.swiper-vertical .swiper-slide-thumb-active img, #product-images-thumbs.swiper-vertical .thumb-container.selected img { opacity: 1; } .product__title--DhrmCg { font-size: 27px; font-weight: 300; letter-spacing: -.0276em; line-height: 1em; padding: 10px; min-height: 22px; text-transform: none; } .product__title--DhrmCg h1 { margin: 0; font-size: inherit; font-weight: inherit; } /* ——— Variant list under the product title ——— */ .product__variants--nhLUTg { display: block; /* forces a full line under the H1 */ margin-top: 4px; /* a little air below the title */ font-size: 13px; /* noticeably smaller than the 27 px headline */ line-height: 1.2; /* tight, like your reference */ font-weight: 400; /* regular weight */ color: #6c757d; /* neutral mid‑grey (≈ the screenshot) */ letter-spacing: -.01em; /* subtle optical tracking */ text-transform: none; } /* if you ever add links (e.g. “Write a Review”) inside that line */ .product__variants--nhLUTg a { color: #0062cc; /* muted blue like your reference */ text-decoration: underline; } .product__variants--nhLUTg a:hover { text-decoration: none; } .product__brand--nhLUTg { color: #000; font-weight: 700; } .tagline-slider-container { position: relative; height: 1.5em; /* Adjust to fit one line */ overflow: hidden; } .tagline-slider > div { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.6s ease-in-out; pointer-events: none; /* Prevent accidental interactions */ text-align: left; white-space: nowrap; } .tagline-slider > div.active { opacity: 1; z-index: 1; } /* Accessible visually-hidden (keeps SEO H1) */ .sr-only { 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; } /* Overview white square card */ .overview-card { background: #fff; border: 0; border-radius: 0; padding: 16px; color: #000; } .overview-card__title { font-weight: 700; font-size: clamp(22px,2.6vw,26px); line-height: 1.2; margin: 0 0 8px 0; color: #000; } /* 2-line clamp (half of the previous 3-line look) with fade + inline Read more */ .overview-card__preview { position: relative; display: -webkit-box; -webkit-line-clamp: 4; /* show 2 lines */ -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; color: #000; min-height: calc(1em * 1.55 * 2); /* ensures stable height */ } .overview-card__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 2.1em; /* approximately one line height */ background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%); display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; /* allow clicking the link only */ } .overview-card__more { pointer-events: auto; /* re-enable click for the link */ margin: 0 0 2px 8px; font-weight: 700; text-decoration: underline; background: #fff; /* so text is clear over fade */ padding-left: 6px; color: inherit; } .overview-card__meta { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; } .overview-card__meta-item { min-width: 150px; font-weight: 500; } .overview-card__meta-item strong { margin-right: 5px; font-weight: 700; color: #000; } /* Description stack (anchor target): short above long */ .desc-stack { scroll-margin-top: 80px; margin-top: 24px; } .desc-stack__short, .desc-stack__long { background: #fff; padding: 16px; } .desc-stack__short { margin-bottom: 12px; } /* Smooth scroll for browsers that support only CSS */ html { scroll-behavior: smooth; } .ovc-row { /* Full-width row: select grows, button on the right */ display: grid; grid-template-columns: 1fr auto; /* select | button */ grid-column-gap: 10px; align-items: center; width: 100%; } /* Label above each control */ .ovc-label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: #000; } /* === Custom Select === */ .ovc-select { position: relative; min-width: 0; /* allow shrinking in grid */ width: 100%; } .ovc-select__button { /* full width inside col 1 */ width: 100%; display: grid; grid-template-columns: 1fr auto auto; /* value | chevron | in-use widget */ align-items: center; column-gap: 8px; border: 1px solid #d6d6d6; background: #fff; color: #111; padding: 10px 12px; font-weight: 700; line-height: 1.2; cursor: pointer; /* neutral, squared look */ border-radius: 0; } .ovc-select__button:focus { outline: 2px solid #333; outline-offset: 0; } /* Text/value area of the select — keep it robust */ .ovc-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } /* Modify font weight of option name */ .ovc-option__name { font-weight: 400; font-size: 14px; } /* Chevron centered properly (fixes odd “bottom” alignment) */ .ovc-select__chevron { display: inline-flex; align-items: center; justify-content: center; height: 100%; } .ovc-select__chevron svg { display: block; fill: #333; transition: transform .2s ease; vertical-align: middle; } .ovc-select__button[aria-expanded="true"] .ovc-select__chevron svg { transform: rotate(180deg); } /* Small image widget sits at far right INSIDE the select, separated by a thin vertical border (as requested) */ .ovc-select__inuse { display: inline-flex; align-items: center; justify-content: center; height: 100%; padding-left: 10px; border-left: 1px solid #e5e5e5; } .ovc-select__inuse svg { fill: #333; } /* Dropdown list under the select */ .ovc-select__list { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; background: #fff; border: 1px solid #d6d6d6; box-shadow: 0 4px 16px rgba(0,0,0,.08); max-height: 260px; overflow: auto; z-index: 1000; display: none; } .ovc-select__list.is-open { display: block; } .ovc-option { padding: 7px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .ovc-option:hover { background: #f2f2f2; } .ovc-option.is-selected { background: #efefef; } .ovc-option.is-out { color: #777; } .ovc-option__note { font-size: 11px; color: #777; } /* Keep native <select> functional but invisible for PS events */ .ovc-native-select { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* Preview popover (opens near the select, neutral look) */ .ovc-preview-popover { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid #d6d6d6; padding: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); width: min(300px, 70vw); z-index: 1000; } .ovc-preview-popover[hidden] { display: none; } .ovc-preview-popover img { display: block; width: 100%; height: auto; } /* Inline "Find table" button (column 2), neutral and squared */ .ovc-btn { border: 1px solid #d6d6d6; background: #fff; color: #111; font-weight: 600; padding: 10px 12px; line-height: 1.2; white-space: nowrap; cursor: pointer; border-radius: 0; } .ovc-btn:hover { background: #f8f8f8; } /* Color swatches & radios — minimal neutral */ .ovc-swatches { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .ovc-swatch__label { display: inline-flex; cursor: pointer; } .ovc-swatch__chip { width: 24px; height: 24px; border: 1px solid #d6d6d6; } .ovc-swatch__chip--texture { background-size: cover; background-position: center; } .ovc-radios { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .ovc-radio__label { border: 1px solid #d6d6d6; padding: 8px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 0; } .ovc-radio__text { font-weight: 700; } /* Accessibility helper */ .sr-only { 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; } .product-variants > .product-variants-item { display: inline-block; margin-right: 1rem; vertical-align: top; width: 100%; } .ovc-select { position: relative; } .ovc-select__list { display: none; position: absolute; z-index: 1000; } .ovc-select__list.is-open { display: block; } /* stronger selector => overrides warehouse default .btn rules */ .overview-card--distributor .dist-cta .btn.btn-orange { background: #ff7f00 !important; border: 2px solid #ff7f00 !important; color: #fff !important; } /* Gap above card & no inner padding so banner touches edges */ .overview-card--distributor { margin-top: 33px; border-radius: 0; padding: 16px; } /* Banner – flush full width */ .dist-banner { margin: 0; position: relative; line-height: 0; } .dist-banner img { width: 100%; display: block; object-fit: cover; } .dist-banner figcaption { position: absolute; inset: 0; padding: 0rem 1.25rem 0rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .65) 100%); color: #fff; align-content: center; } .dist-banner__headline { margin: 0; font-weight: 700; font-size: clamp(22px, 2.6vw, 26px); } .dist-banner__sub { font-size: .9rem; margin: 0; } /* Icon grids */ .icon-grid-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 1rem 0; padding: 0; list-style: none; } .icon-grid-compact li { display: flex; gap: 8px; align-items: flex-start; } .icon-grid-compact i { font-size: 20px; line-height: 1.2; margin-top: 2px; } /* Toolkit links */ .link-tool { color: inherit; text-decoration: none; } .link-tool:hover { text-decoration: underline; } /* CTA buttons */ .dist-cta .btn { border-radius: 0; } .dist-cta .btn i { margin-right: 6px; } #productdaas-accordion { background-color: #fff; padding: 30px; } .iqit-accordion .title { font-weight: 700; font-size: clamp(22px, 2.6vw, 26px); line-height: 1.2; margin: 0 0 8px 0; color: #000; } #productdaas-accordion .iqit-accordion .title a.nav-link, #productdaas-accordion .iqit-accordion .title a.nav-link:visited, #productdaas-accordion .iqit-accordion .title a.nav-link:hover, #productdaas-accordion .iqit-accordion .title a.nav-link:focus { color: #000 !important; } /* Scoped styles for the /* Container */ .kseibi-wrap { background: var(--bg); border: 1px solid var(--ring); border-radius: var(--radius); line-height: 1.6; } /* Two-column grid: 75% description / 25% icons */ .kseibi-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 0; } @media (max-width: 900px) { .kseibi-grid { grid-template-columns: 1fr; } } /* Title & intro */ .kseibi-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; } .kseibi-sub { font-size: 0.95rem; color: var(--muted); margin-bottom: 18px; } /* Paragraph text */ .kseibi-desc p { margin-bottom: 14px; } /* Checkmark list */ .kseibi-list { list-style: none; padding: 0; margin: 0; } /* SCOPED checkmark list — resists theme overrides */ .kseibi-wrap .kseibi-list { list-style: none !important; /* remove default bullets */ padding: 0; margin: 0; } .kseibi-wrap .kseibi-list li { position: relative; margin: 8px 0; padding-left: 28px; /* space for the check */ line-height: 1.6; } .kseibi-wrap .kseibi-list li::before { content: "✓"; /* the checkmark */ position: absolute; left: 0; top: 0.1em; font-weight: 800; font-size: 18px; color: var(--brand, #16a34a); /* fallback green if --brand not set */ } /* Optional: tidy long lines on narrow screens */ @media (min-width: 900px) { .kseibi-bullets .kseibi-list { column-count: 2; /* two columns for shorter list */ column-gap: 32px; } } /* Icons panel */ .icons-wrap { background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); padding: 4px; } .icons-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; } .icons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } @media (max-width: 500px) { .icons-grid { grid-template-columns:repeat(2,1fr); } } /* Icon cards - no padding, full image */ .icon-card { background: #fff; border: 1px solid var(--ring); border-radius: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100px; padding: 0; /* remove padding */ } .icon-card img { width: 100%; height: 100%; object-fit: contain; } .icon-cap { margin-top: 4px; font-size: 0.8rem; color: #333; line-height: 1.2; } .icon-cap strong { display: block; font-weight: 700; } .cp-block { --cp-border: 1px solid rgba(0,0,0,.08); --cp-radius: 12px; --cp-padding: 16px; --cp-title-size: 1.1rem; --cp-title-weight: 700; border: var(--cp-border); border-radius: var(--cp-radius); padding: var(--cp-padding); background: #fff; } .block-section { margin-bottom: 0rem; } .product_features { font-size: 1.35rem; font-weight: 800; margin-bottom: 12px; margin-top: 15px; } /* Card container */ .product-specs-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; margin: 1rem 0; } .product-specs-card__header { font-weight: 600; font-size: 1.05rem; line-height: 1.2; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; color: #111827; } /* Grid layout */ .product-specs-grid { display: grid; grid-template-columns: 1fr 1fr; /* label | value */ align-items: stretch; } @media (min-width: 768px) { .product-specs-grid { grid-template-columns: 1fr 1fr 1fr 1fr; /* label|value label|value */ } } /* Cells */ .specs-cell { padding: 12px 16px; border-bottom: 1px solid #f2f4f7; } /* Vertical separators to mimic table columns on desktop */ @media (min-width: 768px) { .specs-cell:nth-child(4n+2), .specs-cell:nth-child(4n+4) { /* the value cells on each side */ border-right:1px solid #eef1f5; } } /* Zebra background (pairs of rows) */ .product-specs-grid > .specs-cell:nth-child(4n+1), .product-specs-grid > .specs-cell:nth-child(4n+2) { background: #fafafa; } /* Typography */ .specs-cell--label { font-weight: 600; color: #374151; white-space: nowrap; } .specs-cell--value { color: #111827; word-break: break-word; } /* Last row border cleanup */ .product-specs-grid > .specs-cell:last-child, .product-specs-grid > .specs-cell:last-child ~ .specs-cell { border-bottom: 0; } /* === Tag Swapper – force horizontal rail === */ .iqitproducttags { position: relative; background: #fff; padding: 6px 36px; /* space for arrows */ margin: 12px 0; } .iqitproducttags > ul { display: flex !important; /* was inline-flex */ width: 100%; /* constrain to wrapper so it can scroll */ min-width: 0; gap: 12px; list-style: none; padding: 0; margin: 0; overflow-x: auto !important; /* scroll happens here */ overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; } .iqitproducttags > ul::-webkit-scrollbar { display: none; } .iqitproducttags > ul > li { flex: 0 0 auto; scroll-snap-align: start; } .iqitproducttags .tag.tag-default { display: inline-block; text-decoration: none; color: #111; background: #fff; border: 1px solid #d6d6d6; padding: .5rem .75rem; font-size: .95rem; line-height: 1; white-space: nowrap; transition: border-color .2s, box-shadow .2s, background .2s; } .iqitproducttags .tag.tag-default:hover, .iqitproducttags .tag.tag-default:focus-visible { border-color: #ff6f20; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 0 4px rgba(0,0,0,.15); outline: none; } /* Arrows injected by JS */ .iqitproducttags .tags-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid #ddd; background: #fff; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; user-select: none; transition: box-shadow .2s ease, opacity .2s ease; } .iqitproducttags .tags-arrow--left { left: 6px; } .iqitproducttags .tags-arrow--right { right: 6px; } .iqitproducttags .tags-arrow[disabled] { opacity: .35; cursor: default; } .iqitproducttags .tags-arrow:not([disabled]):hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); } @media (max-width: 640px) { .iqitproducttags { padding: 6px 32px; } .iqitproducttags .tag.tag-default { font-size: .9rem; } } /* Let clicks pass through disabled arrows */ .iqitproducttags .tags-arrow[disabled] { opacity: .35; pointer-events: none; /* <— important */ } /* Desktop only */ @media (min-width: 992px) { .col-product-image { position: relative; } .images-container-left { position: static; } /* default: not sticky */ .images-container-left.is-sticky { position: sticky; top: var(--sticky-top, 100px); /* header height + gap */ } } @media (max-width: 991.98px) { .images-container-left { position: static; } } /* Smoother repaints */ .images-container-left { will-change: position, top; } .product-info-row { margin-bottom: 0rem; } /* Overall Layout */ .totw-overall { display: flex; align-items: stretch; justify-content: space-between; } /* Card Styling */ .totw-card { width: 49%; background: #fff; overflow: hidden; margin: 0; border: none; box-shadow: none; } /* Separator */ .totw-separator { width: 2%; background-color: #f1f1f1; } /* Top Banner Layout */ .totw-top { display: grid; grid-template-columns: 190px 1fr; align-content: stretch; justify-content: center; justify-items: start; min-height: 240px; } .totw-pro-card .totw-top { grid-template-columns: 1fr; } /* Left — Round Silver Badge Area */ .totw-left { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0) 70%), repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.15) 0deg 8deg, transparent 8deg 20deg); background-color: #eee; height: 100%; width: 100%; } .totw-badge { display: block; max-width: 140px; max-height: 139px; margin: auto; } /* Right — Products Grid */ .totw-right { width: 100%; } .totw-trio { display: grid; gap: 14px; align-items: start; } /* Adaptive Grid by Count */ .totw-trio.cols-1 { grid-template-columns: 1fr; } .totw-trio.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .totw-trio.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Product Tile */ .totw-item { display: grid; grid-template-rows: auto 1fr auto auto; gap: 6px; text-align: center; border-radius: 10px; padding: 10px 10px 12px 10px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; border: 1px solid transparent; } .totw-item hovered { transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 18px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06); border-color: #eaeaea; } /* Image Wrapper */ .totw-imgwrap { display: flex; align-items: center; justify-content: center; background: #fff; min-height: 145px; } .totw-imgwrap img { height: auto; display: block; object-fit: contain; transition: transform .2s ease; max-width: 82%; } .totw-item:hover .totw-imgwrap img { transform: scale(1.03); } /* Name + Tiny Reference */ .totw-name { font-size: .95rem; line-height: 1.35; font-weight: 700; color: var(--text); min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .totw-ref { font-size: .75rem; line-height: 1.1; color: var(--hint); } /* Full-Width Bottom Strip */ .totw-divider { height: 10px; background: linear-gradient(to right, white 0%, rgba(0, 0, 0, 0.08) 50%, white 100%); } .totw-bottom { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 16px 16px; } .totw-love { width: 70%; } .totw-love h3 { margin: 0 0 4px 0; font-size: 1.125rem; font-weight: 800; color: var(--text); } .totw-love p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; max-width: 80ch; } .totw-cta { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #c7c7c7; border-radius: 8px; height: 44px; padding: 0 16px; font-weight: 800; color: #6b7280; text-decoration: none; background: #fff; } .totw-cta:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .08); transform: translateY(-1px); } .kseibi-logo{ --logo-size: 34px; --logo-color: #000; --skew: -10deg; --spacing: -0.015em; display: inline-flex; align-items: flex-start; font-family: sans-serif; font-synthesis-weight: none; } .kseibi-logo .kseibi-word{ font-weight: 900; font-size: var(--logo-size); line-height: .95; letter-spacing: var(--spacing); text-transform: uppercase; color: var(--logo-color); transform: skewX(var(--skew)); /* strong italic look */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================= KSEIBI — Become a Distributor (clean v3) ========================================= */ .kseibi-pro{ --accent:#ff6f20; --ink:#111; --muted:#6b7280; --line:#e3e3e3; --dark:#0f1114; color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .kseibi-pro *{box-sizing:border-box;border-radius:0 !important} .kseibi-pro .wrap{max-width:1200px;margin:0 auto;padding:20px} /* Bands (each spans 100% width) */ .kseibi-pro .band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .kseibi-pro .band:first-child{border-top:0} .kseibi-pro .band:last-child{border-bottom:0} /* ---------- HERO ---------- */ .kseibi-pro .hero{background:var(--dark);color:#fff;border:0} .kseibi-pro .hero .wrap{padding-top:28px;padding-bottom:24px} .kseibi-pro h1,h2,h3{font-weight:800;margin:.25rem 0 .5rem;line-height:1.2} .kseibi-pro h1{font-size:clamp(28px,3.2vw,40px)} .kseibi-pro h2{font-size:clamp(22px,2.4vw,28px)} .kseibi-pro h3{font-size:clamp(18px,1.6vw,22px)} .kseibi-pro .eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:.35rem} .kseibi-pro .lede{color:#d6dbe3;max-width:72ch;margin:0 0 .3rem} .kseibi-pro .tagline{margin:10px 0 0;font-weight:800;color:#e7ebf2} .kseibi-pro .trust{display:flex;gap:18px;flex-wrap:wrap;margin:.65rem 0 0} .kseibi-pro .trust .item{padding-right:16px;border-right:1px solid #2a2f36} .kseibi-pro .trust .item:last-child{border-right:0} .kseibi-pro .img-frame{border:1px solid var(--line);background:#0b0d10;margin-top:12px;overflow:hidden} .kseibi-pro .hero .img-frame{aspect-ratio:16/5} .kseibi-pro .hero .img-frame img{width:100%;height:100%;object-fit:cover;display:block} /* Buttons (local minimal styles in case theme doesn’t supply) */ .kseibi-pro .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .kseibi-pro .btn{ display:inline-flex;align-items:center;justify-content:center; padding:10px 14px;font-weight:800;text-decoration:none;cursor:pointer;border:1px solid transparent } .kseibi-pro .btn-primary{background:var(--accent);color:#111;border-color:rgba(0,0,0,.1)} .kseibi-pro .btn-outline-secondary{background:transparent;color:#fff;border-color:#3b4047} .kseibi-pro .band:not(.hero) .btn-outline-secondary{color:#fff;border-color:var(--line)} /* ---------- LAYOUT: MAIN + RAIL ---------- */ .kseibi-pro .flow{display:flex;gap:32px;align-items:flex-start} .kseibi-pro .main{flex:1;min-width:0} .kseibi-pro .rail{width:340px;border-left:1px solid var(--line);padding-left:24px} @media(max-width:1100px){ .kseibi-pro .flow{flex-direction:column} .kseibi-pro .rail{width:100%;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px} } /* Editorial image safety */ .kseibi-pro figure{margin:0} .kseibi-pro img{max-width:100%;height:auto;display:block} /* Check list */ .kseibi-pro .check{list-style:none;margin:.2rem 0 0;padding:0} .kseibi-pro .check li{position:relative;padding-left:26px;margin:.4rem 0} .kseibi-pro .check li:before{content:"✓";position:absolute;left:0;top:0;color:#16a34a;font-weight:900} /* Snapshot table */ .kseibi-pro .snapshot{ display:grid;grid-template-columns:120px 1fr;border:1px solid var(--line);border-left:0;border-top:0;margin-top:6px } .kseibi-pro .snapshot .label{background:#fafafa;font-weight:800} .kseibi-pro .snapshot div{padding:10px 12px;border-left:1px solid var(--line);border-top:1px solid var(--line)} @media(max-width:640px){.kseibi-pro .snapshot{grid-template-columns:1fr}.kseibi-pro .snapshot .label{background:#fff}} /* Steps */ .kseibi-pro .steps{border-top:1px solid var(--line);margin-top:6px} .kseibi-pro .step{display:grid;grid-template-columns:84px 1fr;gap:18px;align-items:start;border-bottom:1px solid var(--line);padding:14px 0} .kseibi-pro .step .num{width:64px;height:64px;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:var(--accent)} .kseibi-pro .step h3{margin:0 0 4px 0} .kseibi-pro .step .sub{color:var(--muted);margin:0} /* Rail bits */ .kseibi-pro .links{list-style:none;margin:0;padding:0} .kseibi-pro .links li{margin:.35rem 0} .kseibi-pro .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} .kseibi-pro .fact{border:1px solid var(--line);background:#fbfcfd;padding:10px 12px} .kseibi-pro .fact strong{display:block;font-weight:800} /* Slogan band */ .kseibi-pro .slogan{background:#f7f7f7;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center} .kseibi-pro .slogan h2{margin:.2rem 0 .6rem} /* Slogan — force ~2 lines + premium hand-drawn underline */ .slogan{ --accent:#ff6f20; --two-line-width:36ch; } .slogan .wrap{ text-align:center; } .slogan h2{ position:relative; display:inline-block; margin:16px 0 22px; line-height:1.25; font-weight:800; text-wrap:balance; max-width:var(--two-line-width); } /* Headline — keep it roughly ~2 lines and centered */ .slogan h2{ max-width: var(--two-line-width, 36ch); margin: 0 auto; line-height: 1.2; text-wrap: balance; } /* Brush underline (SVG with tapered ends + texture) */ .slogan h2::after{ content:""; display:block; width:70%; height:16px; margin:10px auto 0; transform:rotate(-1.2deg); pointer-events:none; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80'%3E%3Cdefs%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M20 55 C 260 45, 540 68, 780 50' stroke='%23ff6f20' stroke-width='14' stroke-linecap='round' fill='none' filter='url(%23f)'/%3E%3Cpath d='M24 56 C 260 48, 540 70, 776 52' stroke='%23ffa76a' stroke-width='6' stroke-linecap='round' fill='none' opacity='0.25' filter='url(%23f)'/%3E%3C/svg%3E") center/100% 100% no-repeat; } /* Keep ~2 lines on small screens */ @media (max-width:768px){ .slogan{ --two-line-width:26ch; } .slogan h2::after{ width:78%; height:14px; } } /* Fallback (if SVG data-URI is blocked): clean underline */ @supports not (background: url("data:image/svg+xml;utf8,%3Csvg%20/%3E")){ .slogan h2::after{ height:4px; background:var(--accent, #ff6f20); border-radius:999px; transform:none; } } /* ================================ KSEIBI — Distributor Brief (orange bg, black borders) ================================ */ .kseibi-brief{ --accent:#ff6f20; --ink:#111; --muted:#222; --line:#111; --bg:#ff6f20; color:var(--ink); background:var(--bg); } .kseibi-brief .wrap{max-width:1100px;margin:0 auto;padding:25px} /* no extra padding */ .kseibi-brief .eyebrow{ display:inline-block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); opacity:.85; margin-bottom:8px; } .kseibi-brief h2{ font-size:clamp(22px,3vw,34px); line-height:1.2; margin:0 0 10px; color:var(--ink); } .kseibi-brief .lede{ color:var(--muted); margin:0 0 16px; max-width:70ch; } /* Partner types — black-outline pills */ .kseibi-brief .pill-list{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; list-style:none; } .kseibi-brief .pill-list li{ padding:6px 10px; border:1.6px solid var(--line); border-radius:999px; font-weight:600; font-size:.92rem; background:transparent; transition:background-color .15s ease, transform .15s ease; } .kseibi-brief .pill-list li:hover{ background:rgba(0,0,0,.05); transform:translateY(-1px) } /* Subtle divider in black-on-orange */ .kseibi-brief .divider{ height:1px; background:rgba(0,0,0,.18); margin:14px 0 } /* Feature grid — bullet-style cards with black borders, transparent bg */ .kseibi-brief .feature-grid{ --cols: 1; display:grid; gap:12px; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); list-style:none; padding:0; margin:0; } @media (min-width:640px){ .kseibi-brief .feature-grid{ --cols: 2; } } @media (min-width:1024px){ .kseibi-brief .feature-grid{ --cols: 4; } } .kseibi-brief .feature-grid li{ position:relative; border:2px solid var(--line); padding:14px 14px 12px 14px; background:transparent; border-radius:12px; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .kseibi-brief .feature-grid li:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.10); background:rgba(0,0,0,.04); } .kseibi-brief .feature-grid h3{ font-size:1rem; margin:0 0 6px; padding-left:28px; line-height:1.3; position:relative; color:var(--ink); } /* Check bullet before each title (black icon for strong contrast) */ .kseibi-brief .feature-grid h3::before{ content:""; position:absolute; left:0; top:1px; width:18px; height:18px; background:var(--line); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat; } .kseibi-brief .feature-grid p{ color:var(--muted); font-size:.95rem; margin:0; line-height:1.5; } /* Keyboard focus */ .kseibi-brief .feature-grid li:focus-within{ outline:2px solid transparent; box-shadow:0 0 0 3px rgba(0,0,0,.25); } /* Optional anchor wrapper */ .kseibi-brief .card-link{ color:inherit; text-decoration:none; display:block } .kseibi-brief .card-link:focus-visible{ outline: none } /* View more categories (details/summary) */ .kseibi-pro details.cat-more{margin-top:12px} .kseibi-pro details.cat-more>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--line); background:#fbfbfb; padding:10px 12px; font-weight:800; user-select:none; } .kseibi-pro details.cat-more>summary::-webkit-details-marker{display:none} .kseibi-pro details.cat-more .ic{width:16px;height:16px;transition:transform .2s ease} .kseibi-pro details.cat-more[open] .ic{transform:rotate(180deg)} .kseibi-pro details.cat-more[open] summary .show{display:none} .kseibi-pro details.cat-more:not([open]) summary .hide{display:none} /* Hidden by default; becomes a GRID on open */ .kseibi-pro .cat-moregrid{display:none; margin-top:12px} .kseibi-pro details.cat-more[open] .cat-moregrid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } @media(max-width:1000px){ .kseibi-pro details.cat-more[open] .cat-moregrid{grid-template-columns:repeat(3,1fr)} } @media(max-width:640px){ .kseibi-pro details.cat-more[open] .cat-moregrid{grid-template-columns:repeat(2,1fr)} } /* Make sure cards behave inside the more-grid too (inherit your card styles) */ .kseibi-pro .cat-moregrid .cat-card{width:100%; display:grid} /* ---------- FULL-WIDTH “COMPREHENSIVE RANGE” BAND ---------- */ .kseibi-pro .band.range{background:var(--accent);color:#111;border:0} .kseibi-pro .band.range .wrap{padding:0} .kseibi-pro .range__top{display:flex;align-items:center;gap:16px;padding:16px 20px} .kseibi-pro .range__logo img{display:block;height:48px;width:auto} .kseibi-pro .range__flag{ margin-left:auto; position:relative; background:var(--dark); color:#fff; text-transform:uppercase; font-weight:900; letter-spacing:.02em; font-size:clamp(16px,2.2vw,28px); padding:12px 22px 12px 30px; line-height:1; } .kseibi-pro .range__flag::before{content:"";position:absolute;left:-24px;top:0;bottom:0;width:24px;background:var(--dark);transform:skewX(-20deg)} .kseibi-pro .range__body{ display:grid; gap:28px; grid-template-columns:minmax(0,1fr) minmax(260px, 32%); padding:18px 20px 24px; border-top:1px solid rgba(0,0,0,.12) } .kseibi-pro .range__copy h2{margin:2px 0 10px;text-transform:uppercase;font-weight:900;letter-spacing:.02em} .kseibi-pro .range__lead{margin:0 0 10px} .kseibi-pro .range__list{margin:0 0 10px 18px;padding:0} .kseibi-pro .range__list li{margin:6px 0} .kseibi-pro .range__small{margin:8px 0 0;opacity:.9} .kseibi-pro .range__stats{display:grid;align-content:center;gap:26px;border-left:1px solid rgba(17,17,17,.18);padding-left:22px} .kseibi-pro .range__stat{display:grid;gap:6px} .kseibi-pro .range__num{font-weight:900;font-size:clamp(44px,8vw,96px);line-height:.9} .kseibi-pro .range__num .plus{font-size:.55em;vertical-align:top;margin-left:2px} .kseibi-pro .range__cap{text-transform:uppercase;font-weight:800;font-size:clamp(14px,1.3vw,22px)} @media (max-width:900px){ .kseibi-pro .range__body{grid-template-columns:1fr} .kseibi-pro .range__stats{border-left:0;border-top:1px solid rgba(17,17,17,.18);padding-left:0;padding-top:16px;grid-auto-flow:column;gap:28px;justify-content:flex-start} } @media (max-width:480px){ .kseibi-pro .range__logo img{height:42px} .kseibi-pro .range__flag{font-size:15px;padding:10px 14px 10px 22px} .kseibi-pro .range__flag::before{left:-18px;width:18px} } /* ---------- PRODUCT RANGE CARDS (kept) ---------- */ .kseibi-pro .cat-wrap{background:#fff;padding:12px} .kseibi-pro .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px} @media(max-width:1000px){.kseibi-pro .cat-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.kseibi-pro .cat-grid{grid-template-columns:repeat(2,1fr)}} .kseibi-pro .cat-card{border:1px solid var(--line);background:#fff;display:grid;grid-template-rows:auto 1fr;grid-auto-rows:minmax(0,auto);gap:8px;padding:12px;transition:border-color .15s ease;text-decoration:none;color:inherit} .kseibi-pro .cat-card:hover{border-color:#ff6f20} .kseibi-pro .cat-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .kseibi-pro .cat-card .icon{aspect-ratio:1/1;width:100%;overflow:hidden;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;padding:6px} .kseibi-pro .cat-card .icon>img{max-width:100%;max-height:100%;object-fit:contain;display:block;pointer-events:none} @media(max-width:640px){.kseibi-pro .cat-card{padding:10px;gap:6px}} .kseibi-pro .cat-card .label{font-weight:800;margin:2px 0 2px} .kseibi-pro .cat-card .sub{color:var(--muted);font-size:.92rem;margin:0;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;min-height:2.7em} /* ---------- FAQ ---------- */ .kseibi-pro .faq2{display:grid;gap:12px;margin-top:10px} .kseibi-pro .faq2 details{border:1px solid var(--line);background:#fff} .kseibi-pro .faq2 summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 14px;font-weight:800;font-size:1.125rem} .kseibi-pro .faq2 summary::-webkit-details-marker{display:none} .kseibi-pro .faq2 .chev{width:18px;height:18px;display:inline-block;transition:transform .25s ease} .kseibi-pro .faq2 details[open] .chev{transform:rotate(180deg)} .kseibi-pro .faq2 .bodywrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;border-top:1px solid var(--line)} .kseibi-pro .faq2 details[open] .bodywrap{grid-template-rows:1fr} .kseibi-pro .faq2 .body{overflow:hidden} .kseibi-pro .faq2 .body>div{padding:14px;color:var(--muted);animation:faqFade .35s ease} @keyframes faqFade{from{opacity:.3;transform:translateY(-2px)}to{opacity:1;transform:none}} /* ---------- GALLERY ---------- */ .kseibi-pro .gallery{--gap:12px;display:grid;gap:var(--gap);grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px} @media (max-width:1100px){.kseibi-pro .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:760px){.kseibi-pro .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.kseibi-pro .gallery{grid-template-columns:1fr}} .kseibi-pro .gallery figure{border:1px solid var(--line);background:#fff;display:block;margin:0;overflow:hidden;aspect-ratio:3/2;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease} .kseibi-pro .gallery figure:hover{transform:translateY(-2px);border-color:#ff6f20;box-shadow:0 6px 18px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06)} .kseibi-pro .gallery svg,.kseibi-pro .gallery img{width:100%!important;height:100%!important;display:block;object-fit:cover} /* ---------- CTA ---------- */ .kseibi-pro .cta{background:#111;color:#fff;border:0;margin-top:40px} .kseibi-pro hr{border:0;border-top:1px solid var(--line);margin:16px 0} .kseibi-pro .foot{text-align:center;color:#777;padding:10px 0} /* Scoped styles so we don't affect the rest of the page */ #showcase .wrap{max-width:1200px;margin:0 auto;padding:0 12px} #showcase .eyebrow{display:inline-block;margin-bottom:.25rem;font-size:.85rem;color:#6b7280;letter-spacing:.04em;text-transform:uppercase} #showcase h2{margin:.2rem 0 1rem;font-size:1.6rem;line-height:1.2} #showcase .cat-wrap{margin-top:.5rem} #showcase .cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} @media (max-width:1024px){#showcase .cat-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){#showcase .cat-grid{grid-template-columns:1fr}} #showcase .cat-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e3e3} #showcase .icon{position:relative;aspect-ratio:16/9;background:#f5f6f8;overflow:hidden} #showcase .icon img{width:100%;height:100%;object-fit:cover;display:block} #showcase .label{padding:12px 14px 0;font-weight:700} #showcase .sub{padding:6px 14px 14px;color:#6b7280;line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:calc(1em * 1.4 * 2);} /* KSEIBI — Steps grid (scoped) */ .kseibi-steps{ --accent:#ff6f20; --ink:#111; --muted:#6b7280; --line:#e6e6e6; --card:#ffffff; --radius:12px; } /* Grid layout */ .kseibi-steps .steps{ display:grid; grid-template-columns: 1fr; gap:16px; margin-top:16px; } /* 2 columns (>=600px) */ @media (min-width:600px){ .kseibi-steps .steps{ grid-template-columns: repeat(2, minmax(0,1fr)); } } /* 3 columns (>=900px) */ @media (min-width:900px){ .kseibi-steps .steps{ grid-template-columns: repeat(3, minmax(0,1fr)); } } /* 5 columns (>=1200px) — shows all five steps on one row on desktop */ @media (min-width:1200px){ .kseibi-steps .steps{ grid-template-columns: repeat(5, minmax(0,1fr)); } } /* Card */ .kseibi-steps .step{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px; display:flex; gap:12px; align-items:flex-start; min-height:136px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; will-change: transform; } /* Hover / focus */ .kseibi-steps .step:hover, .kseibi-steps .step:focus-within{ border-color:var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.08); transform:translateY(-2px); } /* Number badge */ .kseibi-steps .step .num{ flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; line-height:1; box-shadow:0 0 0 4px rgba(255,111,32,.12); } /* Titles and text */ .kseibi-steps .step h3{ margin:0 0 6px 0; font-size:16px; line-height:1.25; color:var(--ink); } .kseibi-steps .step .sub{ margin:0; font-size:14px; color:var(--muted); } /* Tighten spacing on very small screens */ @media (max-width:399px){ .kseibi-steps .step{ padding:14px 12px; min-height:unset; } .kseibi-steps .step .num{ width:32px; height:32px; flex-basis:32px; } .kseibi-steps .step h3{ font-size:15px; } .kseibi-steps .step .sub{ font-size:13px; } } /* KSEIBI QA — minimal helpers (scoped) */ .kseibi-pro .kpi{display:flex;align-items:center;gap:8px} .kseibi-pro .kpi .num{font-weight:900} .kseibi-pro .meter{height:10px;background:#f1f2f4;border:1px solid #e6e6e6;border-radius:999px;overflow:hidden} .kseibi-pro .meter>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff6f20,#ff9950)} .kseibi-pro .stat{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px} .kseibi-pro .stat b{font-size:1.4rem} .kseibi-pro .pill{display:inline-block;border:1px dashed var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-weight:700} .kseibi-pro .hint{color:#6b7280;font-size:.92rem} @media (prefers-reduced-motion:no-preference){ .kseibi-pro [data-animate="meter"]>i{transition:width .9s cubic-bezier(.2,.8,.2,1)} } /* ---------- End Gallery ---------- */ /* ========================================= KSEIBI — About Page (scoped to #about-kseibi) ========================================= */ #about-kseibi { --accent:#ff6f20; --ink:#111; --muted:#6b7280; --line:#e6e6e6; --bg:#fff; --bg-alt:#fafafa; } /* text helpers */ #about-kseibi .ks-accent{color:var(--accent)} #about-kseibi .ks-eyebrow{display:inline-block;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:var(--muted)} #about-kseibi .ks-lede{font-size:1.1rem;max-width:70ch;color:#333} #about-kseibi .ks-muted{color:var(--muted)} /* grid & cards */ #about-kseibi .ks-grid{display:grid;gap:16px} #about-kseibi .ks-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} #about-kseibi .ks-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} #about-kseibi .ks-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px} /* bands */ #about-kseibi .band.ks-alt{background:var(--bg-alt)} #about-kseibi .hero{background:linear-gradient(180deg,#0f1114 0%, #1c1f24 60%, #0f1114 100%);} #about-kseibi .hero .wrap{color:#fff} /* ========================================= HERO (boxed inside wrapper, full width of wrapper) ========================================= */ /* kill stray paddings/margins that cause gaps */ #about-kseibi .band.hero{padding-left:0;padding-right:0;margin-left:0;margin-right:0} #about-kseibi .band.hero .wrap{padding:0} #about-kseibi .band.hero figure, #about-kseibi .band.hero .img-frame, #about-kseibi .band.hero .ks-hero-figure{margin:0 !important} /* figure stays inside wrapper, not 100vw */ #about-kseibi .ks-hero-figure{position:relative;width:100%;transform:none} #about-kseibi .band.hero .img-frame{ border:0;border-radius:12px;overflow:hidden;background:transparent } #about-kseibi .ks-hero-figure img{ display:block;width:100%; object-fit:cover } /* darker overlay for readability */ #about-kseibi .ks-hero-overlay{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:flex-end;gap:10px; padding:22px 24px 24px;color:#fff; background:linear-gradient(180deg,rgba(0,0,0,0.00) 8%,rgba(0,0,0,0.55) 54%,rgba(0,0,0,1.86) 100%) } #about-kseibi .ks-hero-overlay .eyebrow{ font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;opacity:.98 } #about-kseibi .ks-hero-overlay h2{ margin:0 0 4px;font-size:clamp(26px,3.2vw,42px);line-height:1.12; text-shadow:0 2px 10px rgba(0,0,0,.55) } #about-kseibi .ks-hero-overlay .sub{ margin:2px 0 10px;font-size:clamp(14px,1.4vw,18px); text-shadow:0 2px 8px rgba(0,0,0,.5) } #about-kseibi .ks-hero-overlay .ks-hero-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center} #about-kseibi .ks-hero-overlay .ks-btn{border-radius:10px;border:1px solid var(--accent);padding:10px 16px;line-height:1} #about-kseibi .ks-hero-overlay .ks-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 6px 24px rgba(255,111,32,.28)} #about-kseibi .ks-hero-overlay .ks-btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:saturate(120%) blur(2px)} #about-kseibi .ks-hero-overlay .ks-badge{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff} #about-kseibi .ks-hero-overlay .ks-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)} /* ========================================= WHAT WE DO layout ========================================= */ #about-kseibi .flow{display:grid;grid-template-columns:3fr 1.3fr;gap:24px;align-items:start} #about-kseibi .rail .check{list-style:none;margin:0;padding:0} #about-kseibi .rail .check li{position:relative;padding-left:28px;margin:10px 0} #about-kseibi .rail .check li::before{content:"✓";position:absolute;left:0;top:0;line-height:1;color:var(--accent);font-weight:700} #about-kseibi .ks-rail-img{margin-top:12px} /* ========================================= WHY KSEIBI features ========================================= */ #about-kseibi .ks-feature{display:flex;gap:12px} #about-kseibi .ks-feature .icon{flex:0 0 48px;height:48px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center} #about-kseibi .ks-feature h3{margin:0 0 6px;font-size:1.05rem} /* ========================================= Milestones (professional grid; no scroll) ========================================= */ #about-kseibi .ks-timeline-grid{ position:relative;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr)) } #about-kseibi .ks-timeline-grid::before{ content:"";position:absolute;left:calc(16px + 2px);top:0;bottom:0;width:2px;background:#e9e9e9 } #about-kseibi .ks-tl-item{ position:relative;background:#fff;border:1px solid var(--line);border-radius:12px; padding:14px 14px 12px 40px;transition:transform .18s ease,box-shadow .18s ease } #about-kseibi .ks-tl-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.06)} #about-kseibi .ks-tl-dot{ position:absolute;left:12px;top:18px;width:12px;height:12px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 4px rgba(255,111,32,.15) } #about-kseibi .ks-tl-year{font-weight:800;color:var(--accent);margin-bottom:4px} /* ========================================= Global Stats ========================================= */ #about-kseibi .ks-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} #about-kseibi .ks-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center} #about-kseibi .ks-stat .num{font-size:1.8rem;font-weight:800;color:var(--accent)} #about-kseibi .ks-stat .lab{color:var(--muted)} /* ========================================= UAE Callout ========================================= */ #about-kseibi .ks-callout{ background:linear-gradient(180deg,#fff 0,#fff 50%,#fdf1ea 100%); border:1px solid var(--line);border-radius:16px;padding:18px; display:grid;grid-template-columns:1.4fr 1fr;gap:16px } #about-kseibi .ks-callout .img{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff} #about-kseibi .ks-callout-cta{display:flex;gap:8px;align-items:center;margin-top:10px} /* ========================================= Reviews — 4 cards per view, right-side controls ========================================= */ #about-kseibi .ks-reviews{ display:grid;grid-template-columns:1fr auto;gap:14px;align-items:stretch;margin-top:12px } #about-kseibi .ks-rev-viewport{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff} #about-kseibi .ks-rev-track{display:flex;transition:transform .5s ease} #about-kseibi .ks-rev-slide{ flex:0 0 100%; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px } #about-kseibi .ks-rev-card{ border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease } #about-kseibi .ks-rev-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.06);border-color:#ff6f20} #about-kseibi .ks-rev-card header{display:flex;flex-direction:column;gap:4px;margin-bottom:6px} #about-kseibi .ks-rev-card .stars{font-weight:700;letter-spacing:.06em;color:#111} #about-kseibi .ks-rev-card h3{margin:0;font-size:1rem} #about-kseibi .ks-rev-card .body{color:#333;margin:.35rem 0} #about-kseibi .ks-rev-card .meta{color:var(--muted);font-size:.92rem;margin:0} #about-kseibi .ks-rev-controls{ display:grid;grid-template-rows:auto 1fr auto;gap:10px;align-content:center;justify-items:center } #about-kseibi .ks-rev-prev, #about-kseibi .ks-rev-next{ width:36px;height:36px;border-radius:50%; border:1px solid var(--line);background:#fff;cursor:pointer; display:grid;place-items:center;font-size:18px;line-height:1;color:#111; transition:background .15s ease,transform .15s ease,border-color .15s ease } #about-kseibi .ks-rev-prev:hover, #about-kseibi .ks-rev-next:hover{background:#f8f8f8;border-color:#bbb;transform:translateY(-1px)} #about-kseibi .ks-rev-dots{display:flex;flex-direction:column;gap:8px} #about-kseibi .ks-rev-dots .dot{width:10px;height:10px;border-radius:50%;background:#ddd;border:0;cursor:pointer} #about-kseibi .ks-rev-dots .dot.active{background:var(--accent)} /* ========================================= FAQ (refined) ========================================= */ #about-kseibi .faq2{display:grid;gap:12px;margin-top:10px} #about-kseibi .faq2 details{border:1px solid var(--line);background:#fff;border-radius:12px} #about-kseibi .faq2 summary{ list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:16px 14px;font-weight:800;font-size:1.08rem } #about-kseibi .faq2 summary::-webkit-details-marker{display:none} #about-kseibi .faq2 .chev{width:18px;height:18px;display:inline-block;transition:transform .25s ease} #about-kseibi .faq2 details[open] .chev{transform:rotate(180deg)} #about-kseibi .faq2 .bodywrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;border-top:1px solid var(--line)} #about-kseibi .faq2 details[open] .bodywrap{grid-template-rows:1fr} #about-kseibi .faq2 .body{overflow:hidden} #about-kseibi .faq2 .body>div{padding:14px;color:var(--muted);animation:faqFade .35s ease} @keyframes faqFade{from{opacity:.3;transform:translateY(-2px)}to{opacity:1;transform:none}} /* ========================================= CTA ========================================= */ #about-kseibi .ks-cta{ background:#0f1114;color:#fff;border-radius:16px;padding:20px; display:grid;grid-template-columns:1fr auto;align-items:center } #about-kseibi .ks-cta .ks-cta-actions{display:flex;gap:8px} /* ========================================= Reveal animation ========================================= */ #about-kseibi [data-reveal]{opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease} #about-kseibi [data-reveal].in{opacity:1;transform:none} /* ========================================= Responsive ========================================= */ @media (max-width:1024px){ #about-kseibi .ks-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} #about-kseibi .ks-timeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #about-kseibi .ks-rev-slide{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:960px){ #about-kseibi .flow{grid-template-columns:1fr} #about-kseibi .ks-stats{grid-template-columns:repeat(2,minmax(0,1fr))} #about-kseibi .ks-callout{grid-template-columns:1fr} } @media (max-width:640px){ #about-kseibi .ks-grid-3{grid-template-columns:1fr} #about-kseibi .ks-grid-4{grid-template-columns:1fr} #about-kseibi .ks-timeline-grid{grid-template-columns:1fr} } @media (max-width:560px){ #about-kseibi .ks-reviews{grid-template-columns:1fr} #about-kseibi .ks-rev-controls{grid-auto-flow:column;grid-template-rows:unset;grid-template-columns:auto 1fr auto} #about-kseibi .ks-rev-dots{flex-direction:row} #about-kseibi .ks-rev-slide{grid-template-columns:1fr} #about-kseibi .ks-hero-figure img{height:clamp(280px,58vw,520px)} #about-kseibi .ks-hero-overlay{padding:14px 14px 16px} } /* ========================================= KSEIBI — Merchandising & Install Options (scoped) ========================================= */ #kseibi-merch{ --accent:#ff6f20; --ink:#111; --muted:#6b7280; --line:#e6e6e6; --card:#fff; --bg:#fff; --bg-alt:#fafafa; --dark:#0f1114; color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } #kseibi-merch *{box-sizing:border-box} #kseibi-merch .wrap{max-width:1200px;margin:0 auto;padding:20px} #kseibi-merch img{display:block;max-width:100%;height:auto} /* Bands */ #kseibi-merch .band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)} #kseibi-merch .band:first-child{border-top:0} #kseibi-merch .band.foot{border-bottom:0} #kseibi-merch .band.alt{background:var(--bg-alt)} /* Type & helpers */ #kseibi-merch h1,h2,h3{font-weight:800;line-height:1.2;margin:.3rem 0 .6rem} #kseibi-merch h1{font-size:clamp(28px,3.2vw,42px)} #kseibi-merch h2{font-size:clamp(22px,2.4vw,30px)} #kseibi-merch h3{font-size:clamp(18px,1.6vw,22px)} #kseibi-merch .eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:.35rem} #kseibi-merch .lede{color:#2b2f36;max-width:72ch} #kseibi-merch .muted{color:var(--muted)} #kseibi-merch .small{color:#6b6f76;font-size:.92rem} /* Buttons */ #kseibi-merch .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid transparent;font-weight:800;text-decoration:none;cursor:pointer;border-radius:10px} #kseibi-merch .btn-primary{background:var(--accent);color:#111;border-color:rgba(0,0,0,.08);box-shadow:0 6px 20px rgba(255,111,32,.25)} #kseibi-merch .btn-ghost{background:#fff;color:#111;border-color:var(--line)} #kseibi-merch .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} /* HERO */ #kseibi-merch .hero{background:linear-gradient(180deg,#0f1114,#1a1f24);color:#fff;border:0} #kseibi-merch .hero .wrap{padding-top:26px;padding-bottom:22px} #kseibi-merch .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:center} #kseibi-merch .hero .img-frame{border:1px solid #1f2328;border-radius:12px;overflow:hidden;background:#0b0d10} #kseibi-merch .ticks{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:14px;flex-wrap:wrap} #kseibi-merch .ticks li{position:relative;padding-left:22px} #kseibi-merch .ticks li::before{content:"✓";position:absolute;left:0;top:0;color:#16a34a;font-weight:900} /* Snapshot */ #kseibi-merch .snapshot{margin-top:6px;align-items:stretch} #kseibi-merch .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #kseibi-merch .stat{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;text-align:center} #kseibi-merch .stat .num{font-size:1.8rem;font-weight:900;color:var(--accent);line-height:1} #kseibi-merch .stat .lab{color:var(--muted)} /* Steps */ #kseibi-merch .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:10px} #kseibi-merch .step{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;display:flex;gap:12px;align-items:flex-start;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease} #kseibi-merch .step:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.06);border-color:#ff6f20} #kseibi-merch .step .num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#111;font-weight:900} /* Cards grid (fixtures, giveaways) */ #kseibi-merch .cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:10px} #kseibi-merch .card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;display:grid;gap:12px} #kseibi-merch .card.flex{grid-template-columns:minmax(260px, 38%) 1fr;align-items:start} #kseibi-merch .swap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;position:relative} #kseibi-merch .cap{font-size:.86rem;color:#6b7280;padding:8px 10px;border-top:1px solid var(--line);background:#fafafa} #kseibi-merch .tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:.86rem;background:#fbfbfb;margin-left:6px} #kseibi-merch .bullets{margin:6px 0 0 18px} #kseibi-merch .bullets li{margin:4px 0} #kseibi-merch .table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:6px} #kseibi-merch .table th,#kseibi-merch .table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} #kseibi-merch .table th{text-align:left;background:#fafafa} /* Instant kits rows */ #kseibi-merch .split-rows{display:grid;gap:14px} #kseibi-merch .row{display:grid;grid-template-columns:minmax(280px, 40%) 1fr;gap:14px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px} #kseibi-merch .row .swap{border:1px solid var(--line)} /* Counter hero */ #kseibi-merch .wide{margin-top:14px} #kseibi-merch .img-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff} /* Ideas grid */ #kseibi-merch .ideas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px} #kseibi-merch .idea{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px} /* Benefits (2×2) */ #kseibi-merch .benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px} #kseibi-merch .bcard{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px} /* Service (3 columns) */ #kseibi-merch .service{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px} #kseibi-merch .scard{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px} /* Split (2 columns) */ #kseibi-merch .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} /* FAQ */ #kseibi-merch .faq{display:grid;gap:10px;margin-top:8px} #kseibi-merch .faq details{border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden} #kseibi-merch .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px;font-weight:800} #kseibi-merch .faq summary::-webkit-details-marker{display:none} #kseibi-merch .faq .chev{font-size:16px;opacity:.7} #kseibi-merch .faq .body{padding:0 12px 12px;color:var(--muted)} /* CTA */ #kseibi-merch .cta{margin-top:16px;border:0;background:#0f1114;color:#fff;border-radius:14px;padding:16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px} #kseibi-merch .cta-actions{display:flex;gap:8px} /* Foot */ #kseibi-merch .foot{background:#fff;border-top:1px solid var(--line)} /* Responsive */ @media (max-width:1100px){ #kseibi-merch .hero-grid{grid-template-columns:1fr} #kseibi-merch .steps{grid-template-columns:repeat(3,minmax(0,1fr))} #kseibi-merch .cards-grid{grid-template-columns:1fr} #kseibi-merch .row{grid-template-columns:1fr} #kseibi-merch .ideas-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #kseibi-merch .service{grid-template-columns:1fr 1fr} #kseibi-merch .split{grid-template-columns:1fr} } @media (max-width:640px){ #kseibi-merch .grid-3{grid-template-columns:1fr} #kseibi-merch .steps{grid-template-columns:repeat(2,minmax(0,1fr))} #kseibi-merch .ideas-grid{grid-template-columns:1fr} #kseibi-merch .benefits{grid-template-columns:1fr} #kseibi-merch .service{grid-template-columns:1fr} #kseibi-merch .cta{grid-template-columns:1fr} } /* ========================================= KSEIBI — Partner Asset Hub (scoped) ========================================= */ #kseibi-partnerhub{ --accent:#ff6f20; --ink:#111; --muted:#6b7280; --line:#e6e6e6; --card:#fff; --bg:#fff; --bg-alt:#fafafa; --dark:#0f1114; color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } #kseibi-partnerhub *{box-sizing:border-box} #kseibi-partnerhub .wrap{max-width:1200px;margin:0 auto;padding:20px} #kseibi-partnerhub img{display:block;max-width:100%;height:auto} /* Bands */ #kseibi-partnerhub .band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)} #kseibi-partnerhub .band:first-child{border-top:0} #kseibi-partnerhub .band.alt{background:var(--bg-alt)} /* Type */ #kseibi-partnerhub h1,h2,h3{font-weight:800;line-height:1.2;margin:.3rem 0 .6rem} #kseibi-partnerhub h1{font-size:clamp(28px,3.2vw,42px)} #kseibi-partnerhub h2{font-size:clamp(22px,2.4vw,30px)} #kseibi-partnerhub h3{font-size:clamp(18px,1.6vw,22px)} #kseibi-partnerhub .eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:.35rem} #kseibi-partnerhub .lede{color:#2b2f36;max-width:72ch} #kseibi-partnerhub .muted{color:var(--muted)} #kseibi-partnerhub .small{font-size:.9rem;color:#6b6f76} /* Buttons & pills */ #kseibi-partnerhub .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid transparent;border-radius:10px;font-weight:800;text-decoration:none;cursor:pointer} #kseibi-partnerhub .btn-primary{background:var(--accent);color:#111;border-color:rgba(0,0,0,.08);box-shadow:0 8px 22px rgba(255,111,32,.25)} #kseibi-partnerhub .btn-ghost{background:#fff;color:#111;border-color:var(--line)} #kseibi-partnerhub .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} #kseibi-partnerhub .pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:#fbfbfb;font-size:.86rem} /* Lists */ #kseibi-partnerhub .ticks{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:14px;flex-wrap:wrap} #kseibi-partnerhub .ticks li{position:relative;padding-left:22px} #kseibi-partnerhub .ticks li::before{content:"✓";position:absolute;left:0;top:0;color:#16a34a;font-weight:900} #kseibi-partnerhub .bullets{margin:6px 0 0 18px} #kseibi-partnerhub .bullets li{margin:4px 0} /* HERO */ #kseibi-partnerhub .hero{background:linear-gradient(180deg,#0f1114,#1a1f24);color:#fff;border:0} #kseibi-partnerhub .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center} #kseibi-partnerhub .hero-visual{border:1px solid #1f2328;border-radius:12px;overflow:hidden;background:#0b0d10} /* Inside / cards */ #kseibi-partnerhub .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} #kseibi-partnerhub .card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px} #kseibi-partnerhub .hint{color:#6b7280;margin-top:10px} /* Filters */ #kseibi-partnerhub .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:8px 0 12px} #kseibi-partnerhub .filters .lab{display:block;font-size:.86rem;color:#6b7280;margin-bottom:4px} #kseibi-partnerhub .filters select,#kseibi-partnerhub .filters input[type="search"]{border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:200px;background:#fff} /* Download grid */ #kseibi-partnerhub .dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #kseibi-partnerhub .dl-card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;display:grid;gap:8px} #kseibi-partnerhub .dl-card header{display:flex;align-items:center;justify-content:space-between;gap:10px} #kseibi-partnerhub .dl-card .meta{display:flex;gap:10px;flex-wrap:wrap;color:#6b7280;font-size:.92rem} #kseibi-partnerhub .dl-card .actions{display:flex;gap:8px;flex-wrap:wrap} /* Access (split layout) */ #kseibi-partnerhub .access{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start} #kseibi-partnerhub .gate{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;display:grid;gap:10px} #kseibi-partnerhub .gate label{display:grid;gap:6px} #kseibi-partnerhub .gate input,#kseibi-partnerhub .gate select{border:1px solid var(--line);border-radius:10px;padding:10px 12px} /* Responsive */ @media (max-width:1100px){ #kseibi-partnerhub .hero-grid{grid-template-columns:1fr} #kseibi-partnerhub .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} #kseibi-partnerhub .dl-grid{grid-template-columns:1fr} #kseibi-partnerhub .access{grid-template-columns:1fr} } @media (max-width:640px){ #kseibi-partnerhub .grid-4{grid-template-columns:1fr} } /* ===== Mega Menu INDUSTRIAL – FINAL look ===== */ /* Wrapper */ .cbp-hrsub-inner .mmx2{ display:flex;min-height:520px;overflow:hidden; box-shadow:0 18px 42px rgba(8,12,20,.12);background:#fff } /* LEFT rail */ .cbp-hrsub-inner .mmx2-left{width:30%;min-width:280px;background:transparent !important;border-right:1px solid #e6eaf0} .cbp-hrsub-inner .mmx2-catlist{list-style:none;margin:0;padding:6px 0;max-height:100%;overflow:hidden} .cbp-hrsub-inner .mmx2-cat{margin:0} .cbp-hrsub-inner .mmx2-catbtn{ all:unset;display:flex;align-items:center;width:100%; gap:10px;padding:8px 10px;cursor:pointer;border-left:3px solid transparent; transition:background .15s ease,border-color .15s ease } .cbp-hrsub-inner .mmx2-cat[aria-selected="true"]>.mmx2-catbtn, .cbp-hrsub-inner .mmx2-catbtn:hover{background:#f9fafb;border-left-color:#ff6a00} .cbp-hrsub-inner .mmx2-title{ font-weight:700;color:#0a1320;letter-spacing:.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .cbp-hrsub-inner .mmx2-sub{padding:6px 14px 10px} .cbp-hrsub-inner .mmx2-sub a{font-size:12px} /* RIGHT canvas */ .cbp-hrsub-inner .mmx2-right{width:70%;position:relative} .cbp-hrsub-inner .mmx2-panel{position:absolute;inset:0;padding:10px;overflow:auto;display:none;background:#fff} .cbp-hrsub-inner .mmx2-panel.is-active{display:block} /* Product grid (4 → 3 → 2 columns) */ .cbp-hrsub-inner .mmx2-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; grid-auto-flow:row dense;align-content:start; } /* Product cards */ .cbp-hrsub-inner .mmx2-card{ border:1px solid #e6eaf0;background:#fff;overflow:hidden; transition:transform .16s,box-shadow .16s,border-color .16s; display:flex;flex-direction:column;height:100%; } .cbp-hrsub-inner .mmx2-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,14,20,.10);border-color:#d8dee8} .cbp-hrsub-inner .mmx2-img{aspect-ratio:3/3;background:#fff;padding:6px} .cbp-hrsub-inner .mmx2-img img{width:100%;height:100%;object-fit:contain;display:block} .cbp-hrsub-inner .mmx2-name{ font-size:12px;line-height:1.35;font-weight:700;color:#111; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; border-top:1px solid #f1f1f1;display:flex;flex-direction:column; padding:7px;text-align:center } .cbp-hrsub-inner .mmx2-link, .cbp-hrsub-inner .mmx2-link:visited, .cbp-hrsub-inner .mmx2-right a, .cbp-hrsub-inner .mmx2-right a:visited, .cbp-hrsub-inner .mmx2-right a:hover{color:#111 !important;text-decoration:none} /* -------- VIEW MORE: 70% image / 30% CTA (spans 2 columns) -------- */ .mmx2-card--viewmore{grid-column:span 2} .mmx2-card--viewmore .vm-split{ display:grid;grid-template-columns:64% 36%;height:100%;min-height:180px } .mmx2-card--viewmore .vm-media{ position: relative; isolation: isolate; padding-right: 8px;} .mmx2-card--viewmore .vm-media img{ width:100%;height:100%;object-fit:cover;display:block } /* CTA rail */ .mmx2-card--viewmore .vm-cta{ background:#ff6f20;display:flex;flex-direction:column; align-items:flex-start;justify-content:center;padding:9px; } .mmx2-card--viewmore .vm-eyebrow{ font-size:11px;letter-spacing:.12em;text-transform:uppercase; } .mmx2-card--viewmore .vm-title{ font-size:18px;font-weight:800;line-height:1;color:#0a1320 } .mmx2-card--viewmore .vm-sub{ font-size:12px;color:#4b5563 } .mmx2-card--viewmore .vm-button{ margin-top:8px;font-weight:700;font-size:13px;display:inline-flex;align-items:center; gap:8px;background:#0a1320;color:#fff;;padding-left:4px; } .mmx2-card--viewmore .vm-button .vm-icon{width:16px;height:16px} /* Hover affordance */ .mmx2-card--viewmore:hover .vm-button{transform:translateX(2px)} /* Responsive */ @media (max-width:1400px){.cbp-hrsub-inner .mmx2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:1100px){.cbp-hrsub-inner .mmx2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){ .mmx2-card--viewmore{grid-column:auto} .mmx2-card--viewmore .vm-split{grid-template-columns:1fr;grid-template-rows:60% 40%} } /* ===== contentType==4 – products block inside menu (match) ===== */ .cbp-products{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px; grid-auto-flow:row dense;align-content:start; } .cbp-product-card{ border:1px solid #e6eaf0;background:#fff;;overflow:hidden; display:flex;flex-direction:column;height:100%; } .cbp-product-card--grid .cbp-product-media, .cbp-product-card .cbp-product-media{aspect-ratio:3/3;padding:6px;background:#fff} .cbp-product-card .cbp-product-media img{width:100%;height:100%;object-fit:contain;display:block} .cbp-product-name{font-size:12px;font-weight:700;text-align:center;padding:7px;border-top:1px solid #f1f1f1;line-height:1.35;color:#111} /* Split view-more for products block */ .cbp-product-card--viewmore{grid-column:span 2} .cbp-product-card--viewmore .vm-split{ display:grid;grid-template-columns:70% 30%;height:100%;min-height:180px } .cbp-product-card--viewmore .vm-media img{width:100%;height:100%;object-fit:cover;display:block} .cbp-product-card--viewmore .vm-cta{background:#f3f5f8;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:16px;gap:6px} .cbp-product-card--viewmore .vm-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b7280} .cbp-product-card--viewmore .vm-title{font-size:18px;font-weight:800;line-height:1;color:#0a1320} .cbp-product-card--viewmore .vm-sub{font-size:12px;color:#4b5563} .cbp-product-card--viewmore .vm-button{margin-top:8px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:8px;background:#0a1320;color:#fff;border-radius:999px;padding:8px 12px} .cbp-product-card--viewmore .vm-button .vm-icon{width:16px;height:16px} @media (max-width:1400px){.cbp-products{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:1100px){.cbp-products{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){ .cbp-products .cbp-product-card--viewmore{grid-column:auto} .cbp-product-card--viewmore .vm-split{grid-template-columns:1fr;grid-template-rows:60% 40%} } /* Misc */ .cbp-hrsub-inner .mmx2-empty{height:100%;display:grid;place-items:center;color:#6d7485;font-style:italic} .cbp-hrsub-inner .mmx2-right::-webkit-scrollbar, .cbp-hrsub-inner .mmx2-catlist::-webkit-scrollbar{width:10px;height:10px} .cbp-hrsub-inner .mmx2-right::-webkit-scrollbar-thumb, .cbp-hrsub-inner .mmx2-catlist::-webkit-scrollbar-thumb{background:#cfd7e3;border-radius:8px} /* ========= KSEIBI Side Cart (slide-in panel) ========= Works with Bootstrap dropdown: when ".show" is applied to the menu, we re-layout it as a fixed right drawer. ----------------------------------------------------- */ /* ========= KSEIBI Side Cart (slide-in panel) ========= Works with Bootstrap dropdown: when ".show" is applied to the menu, we re-layout it as a fixed right drawer. ----------------------------------------------------- */ /* ========= KSEIBI Side Cart (slide-in panel) ========= Works with Bootstrap dropdown: when ".show" is applied to the menu, we re-layout it as a fixed right drawer. ----------------------------------------------------- */ /* --- Drawer container --- */ #_desktop_blockcart-content.dropdown-menu-custom.dropdown-menu { position: fixed; right: 0; top: 0; width: 420px; max-width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; transform: translateX(20%); transition: transform .25s ease, box-shadow .25s ease; background: #f1f1f1; /* dark shell */ box-shadow: none; z-index: 1060; /* above header */ } /* When Bootstrap toggles .show, slide it in */ #_desktop_blockcart-content.dropdown-menu-custom.dropdown-menu.show { transform: translateX(0); box-shadow: -32px 0 72px rgba(0,0,0,.45); } /* Optional: page dim (fake overlay via body edge glow) */ body:after { content: ""; position: fixed; inset: 0; pointer-events: none; transition: background .2s ease; } .dropdown-menu.show ~ body:after { background: rgba(0,0,0,.0); } /* noop fallback */ /* --- Panel content scaffold --- */ #blockcart-content.blockcart-content { display: flex; flex-direction: column; height: 100%; background: #f1f1f1; /* deep panel */ color: #000000; } /* --- Header --- */ #blockcart-content .cart-title { padding: 18px 18px 10px 18px; border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, #f1f1f1 0%, #ffff 100%); } #blockcart-content .cart-title .modal-title { font-size: 18px; font-weight: 700; letter-spacing: .2px; /* color: #f5f8fc; */ } #js-cart-close { all: unset; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; transition: background .15s ease, transform .12s ease; } #js-cart-close span { font-size: 22px; line-height: 1; color: #c9d3df; } #js-cart-close:hover { background: rgba(255,255,255,.06); } #js-cart-close:active { transform: scale(.96); } #blockcart-content .cart-title hr { display: none; } /* --- Body list (scroll area) --- */ #blockcart-content .cart-products { list-style: none; margin: 0; padding: 0; } #blockcart-content .cart-products, #blockcart-content .no-items { flex: 1 1 auto; overflow: auto; padding-top: 8px; } /* Product line wrapper (we wrap li around included template) */ #blockcart-content .cart-products > li { background: #ffffff; border: 1px solid rgba(255,255,255,.06); /* border-radius: 14px; */ padding: 4px; margin: 5px 0px; transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease; } #blockcart-content .cart-products > li:hover { border-color: rgba(255,255,255,.16); box-shadow: 0 6px 12px rgba(10,14,20,.10) } #blockcart-content .cart-products > li:active { transform: translateY(1px); } #blockcart-content .cart-products .bootstrap-touchspin { width: 100px !important; } /* Try to standardize inner pieces from ps_shoppingcart-product-line.tpl */ #blockcart-content .product-line-grid { display: grid; grid-template-columns: 68px 1fr auto; gap: 10px; align-items: center; } #blockcart-content .product-image { width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: #0b121a; } #blockcart-content .product-image img { width: 100%; height: 100%; object-fit: cover; } #blockcart-content .product-line-info .product-name { font-weight: 600; color: #eaf0f7; font-size: 14px; } #blockcart-content .product-line-info .product-attributes, #blockcart-content .product-line-info .product-variants { font-size: 12px; color: #95a4b6; margin-top: 2px; } /* Price / qty cluster */ #blockcart-content .product-line-actions { text-align: right; } #blockcart-content .product-price { font-weight: 700; font-size: 14px; color: #f5f8fc; } #blockcart-content .qty { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 4px 6px; background: #0c141e; } #blockcart-content .qty .input-group-btn > .btn, #blockcart-content .qty .bootstrap-touchspin-down, #blockcart-content .qty .bootstrap-touchspin-up { border: 0; background: transparent; color: #c9d3df; } #blockcart-content .qty .form-control { background: transparent; border: 0; color: #e7edf5; width: 40px; text-align: center; } /* Remove link icon */ #blockcart-content .remove-from-cart, #blockcart-content .js-cart-line-product-remove { color: #95a4b6; text-decoration: none; margin-left: 8px; font-size: 12px; } #blockcart-content .remove-from-cart:hover { color: #ff6f20; } /* --- Subtotals (legacy; left as-is, now replaced visually by .k-cart-summary) --- */ #blockcart-content .cart-subtotals { padding: 10px 18px 0 18px; } #blockcart-content .cart-summary-line { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.07); } #blockcart-content .cart-summary-line:last-child { border-bottom: 0; } #blockcart-content .cart-summary-line .label { font-size: 13px; color: #000000; white-space: nowrap; } #blockcart-content .cart-summary-line .value { font-size: 14px; font-weight: 600; color: #000000; } /* Shipping details hook text */ #blockcart-content .cart-summary-line small.value { display: block; color: #000000; margin-top: 2px; } /* --- Totals (legacy) --- */ #blockcart-content .cart-totals { margin-top: 10px; padding: 12px 18px 0 18px; border-top: 1px solid rgba(255,255,255,.06); } #blockcart-content .cart-totals .clearfix { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; } #blockcart-content .cart-totals .label { color: #000000; font-weight: 700; } #blockcart-content .cart-totals .value { font-weight: 800; } /* --- Foot buttons --- */ #blockcart-content .cart-buttons { position: sticky; bottom: 0; left: 0; right: 0; padding: 12px 18px 18px 18px; backdrop-filter: blur(4px); border-top: 1px solid rgba(255,255,255,.06); } #blockcart-content .cart-buttons .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; border-radius: 12px; padding: 12px 14px; font-weight: 700; transition: transform .06s ease, box-shadow .15s ease, background .15s ease; } #blockcart-content .cart-buttons .btn-primary { background: #ff6f20; border: 0; box-shadow: 0 10px 24px rgba(255,111,32,.25); } #blockcart-content .cart-buttons .btn-primary:hover { filter: brightness(1.03); box-shadow: 0 14px 32px rgba(255,111,32,.35); } #blockcart-content .cart-buttons .btn-primary:active { transform: translateY(1px); } #blockcart-content .cart-buttons .btn-secondary { margin-top: 8px; background: #0c141e; border: 1px solid rgba(255,255,255,.10); color: #ffffff; } #blockcart-content .cart-buttons .btn-secondary:hover { border-color: rgba(255,255,255,.22); background: #d0d0d0; } /* --- Empty state --- */ #blockcart-content .no-items { display: flex; align-items: center; justify-content: center; color: #9eb0c6; font-size: 14px; text-align: center; } /* --- Scrollbar cosmetics (webkit) --- */ #blockcart-content .cart-products::-webkit-scrollbar { width: 10px; } #blockcart-content .cart-products::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 10px; } #blockcart-content .cart-products::-webkit-scrollbar-track { background: transparent; } /* --- Small screens --- */ @media (max-width: 480px) { #_desktop_blockcart-content.dropdown-menu-custom.dropdown-menu { width: 100vw; } } /* ===== KSEIBI Side Cart — Summary Card (NEW) ===== */ .k-cart-summary { background: #fff; border: 1px solid #eceff4; padding: 12px; box-shadow: 0 8px 22px rgba(8,12,20,.06); } .k-summary-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px dashed #e6eaf0; } .k-summary-row:last-of-type { border-bottom: 0; } .k-summary-row .k-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .k-label { font-weight: 600; color: #1f2937; } .k-value { font-weight: 700; color: #0b1220; } .k-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 4px 8px; border-radius: 999px; background: #f5f7fb; color: #334155; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .k-badge--neg { background: #fff5f0; color: #b54708; } .k-summary-row.is-products .k-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff6f20; display: inline-block; margin-right: 6px; } /* Inline help under label (shipping details hook) */ .k-help { display: inline-block; font-size: 11px; color: #6b7280; } /* Total band */ .k-total-band { display: grid; grid-template-columns: 1fr auto; align-items: center; background: linear-gradient(180deg, #fff7f3 0%, #fff 65%); border: 1px solid #ff6f20; padding: 14px 12px; margin-top: 12px; } .k-total-title { font-size: 15px; font-weight: 800; color: #0b1220; } .k-tax-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; background: #ffece3; color: #9a3412; padding: 2px 6px; border-radius: 999px; } .k-total-note { font-size: 11px; color: #6b7280; margin-top: 2px; } .k-total-val { font-size: 18px; font-weight: 900; color: #0b1220; } /* Optional: subtle row accents */ .k-summary-row.is-shipping .k-label { color: #0b1220; } .k-summary-row.is-discount .k-value { color: #b54708; } /* Dark shell harmony (your panel is light, these keep contrast tidy) */ #blockcart-content .k-cart-summary .k-value, #blockcart-content .k-cart-summary .k-label { color: #0b1220; } .d-inline-block { width: 100%; } /* Responsive */ @media (max-width: 992px) { .totw-overall { flex-direction: column; } .totw-card { width: 100%; margin-bottom: 12px; } .totw-separator { width: 100%; height: 10px; } .totw-top { grid-template-columns: Astro:1fr; } .totw-trio { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .totw-imgwrap { min-height: 120px; } .totw-name { font-size: .9rem; } .totw-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } } #main .page-content { padding: 20px !important; } .block-links ul>li a:before { display: none !important; }