.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: 100%; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #777777; } a:hover:not(.nav-link):not(.btn) { color: #333333; } .pagination .page-list li:hover { border-color: #333333; } .pagination .page-list li.current { border-color: #333333; } .pagination .page-list li.current a { color: #333333; } #mobile-header { background: rgba(0, 0, 0, 0.82); border-bottom: solid 1px #e3e3e3; } #mobile-header #mobile-header-sticky { background: rgba(0, 0, 0, 0.82); } #mobile-header .mobile-main-bar { padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; } #mobile-header .m-nav-btn { color: #ffffff; } #mobile-header .m-nav-btn:hover { color: #fff2f2; } #mobile-header .m-nav-btn > span { display: none !important; } #mobile-header .mobile-buttons-bar { background: #c9c9c9; } html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } body { line-height: 1.4rem; } body { font-family: 'Karla', sans-serif; } #blockcart-content { background: #ffffff; border: none 1px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); } /*** Secondary button ***/ .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled, .bootstrap-touchspin .group-span-filestyle .btn-touchspin, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .group-span-filestyle .btn-default { background: #f8f8f8; color: #333333; border: none 1px #f0f0f0; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary :active, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled :active, .btn-secondary:disabled:hover, .btn-secondary:disabled:focus, .btn-secondary:disabled :active, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:hover, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:focus, .bootstrap-touchspin .group-span-filestyle .btn-touchspin :active, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:hover, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:focus, .group-span-filestyle .bootstrap-touchspin .btn-touchspin :active, .group-span-filestyle .btn-default:hover, .group-span-filestyle .btn-default:focus, .group-span-filestyle .btn-default :active { background: rgba(173, 173, 173, 0.59); color: #2e2e2e; } .btn-secondary:not(:disabled):not(.disabled):active { background: rgba(173, 173, 173, 0.59); color: #2e2e2e; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #f8f8f8; color: #333333; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: rgba(173, 173, 173, 0.59); color: #2e2e2e; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #000000; color: #ffffff; border: none 1px; } .btn-primary:hover, .btn-primary:focus, .btn-primary :active, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled :active, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled :active { background: #333333; color: #ffffff; } .btn-primary:not(:disabled):not(.disabled):active { background: #333333; color: #ffffff; } #wrapper .breadcrumb { padding-top: 0.7142857143rem; padding-bottom: 0.7142857143rem; margin-top: -0.3571428571rem; margin-bottom: 0.3571428571rem; font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #8f8f8f; } #wrapper .breadcrumb li:after { color: #8f8f8f; } #wrapper .breadcrumb a { color: #8f8f8f; } /*** Text fields ***/ .form-control { background-color: #ffffff; color: #777777; border: solid 1px #e3e3e3; } .custom-select2, .custom-select2 option { background-color: #ffffff; } .custom-select2:after { color: #777777; } .bootstrap-touchspin .btn-touchspin { background-color: #ffffff; color: #777777; border: solid 1px #e3e3e3; } .bootstrap-touchspin .btn-touchspin:hover { color: #777777; } .form-control::-webkit-input-placeholder { color: #777777; } .form-control::-moz-placeholder { color: #777777; } .form-control:-ms-input-placeholder { color: #777777; } .form-control:-moz-placeholder { color: #777777; } .form-control:focus { color: #777777; border-color: #8a8a8a; } /*** Radio buttons and checkboxes ***/ .custom-checkbox input[type=checkbox] + span .checkbox-checked { color: #000000; } .custom-radio input[type=radio]:checked + span { background-color: #000000; } .custom-checkbox input[type=checkbox] + span:not(.color), .custom-radio { background: #ffffff; color: #000000; border-color: #e3e3e3; } /*** Dropdowns ***/ .dropdown-menu, .autocomplete-suggestions { background: #ffffff; border: solid 1px #e3e3e3; } .dropdown-menu .dropdown-item, .autocomplete-suggestions .dropdown-item { color: #474747!important; border-bottom: solid 1px #e3e3e3; } .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .autocomplete-suggestions .dropdown-item:focus, .autocomplete-suggestions .dropdown-item:hover { background: rgba(71, 71, 71, 0.05); } /*** Tooltips ***/ .tooltip-inner { background: #333333; color: #ffffff; } .tooltip.bs-tether-element-attached-bottom .tooltip-inner:before, .tooltip.tooltip-top .tooltip-inner:before, .bs-tooltip-auto[x-placement^=top] .arrow:before, .bs-tooltip-top .arrow:before { border-top-color: #333333; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: #333333; } /*** Modals ***/ .modal-backdrop { background: rgba(194, 194, 194, 0.7); } .modal-content { background: rgba(23, 5, 5, 0.02); border: none 1px; } .js-quickview-np-btn { background: rgba(23, 5, 5, 0.02); } /*** Notifications ***/ .ns-box { background: rgba(245, 226, 226, 0.23); color: #ffffff; border: none 1px; } .product-price { color: #920707; } .iqit-review-star { color: #e0d041; } .product-flags .product-flag { font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #b10909; 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: #ffffff; color: #827d7c; } .discount { background: #b10909; color: #ffffff; } .product-available { background: #ffffff; color: #427845; } .product-unavailable { background: #ffffff; color: #827d7c; } .product-unavailable-allow-oosp { background: #ffffff; color: rgba(99, 105, 121, 0.89); } .alert-success a:link:not(.nav-link):not(.btn), .alert-success a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-warning a:link:not(.nav-link):not(.btn), .alert-warning a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-danger a:link:not(.nav-link):not(.btn), .alert-danger a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } #iqitcompare-floating { background: #ffffff; border-top: none 1px #a53737; border-left: none 1px #a53737; border-right: none 1px #a53737; box-shadow: 0px 4px 19px 6px rgba(92, 81, 81, 0.16); } #iqitcompare-floating a { color: #242424; } #page-preloader { background: #ffffff; } #back-to-top { background: #000000; color: #ffffff; } #back-to-top:hover { background: #333333; color: rgba(37, 30, 30, 0.91); } #header, #checkout-header { background: #000000; border-top: none 1px; border-bottom: none 1px; } #header .container, #checkout-header .container { max-width: 100%; } .sticky-desktop-wrapper #desktop-header.stuck-header { background: #000000; border-bottom: none 1px; } #header .header-nav { color: rgba(0, 0, 0, 0); background: #000000; border-bottom: none 1px; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; display: none !important; } #header .header-nav a { color: rgba(0, 0, 0, 0); } #header .header-nav a:hover { color: rgba(0, 0, 0, 0); } #header .header-nav .social-links._topbar { font-size: 0.4285714286rem; } #header .header-nav .social-links._topbar a:not(:hover) { color: #d6e9ff !important; } #header .header-nav .social-links._topbar a:hover { color: #59a3b6 !important; } .header-top { padding-top: 0.3571428571rem; padding-bottom: 0.3571428571rem; color: #ffffff; } .header-top a:not(.btn):not(.nav-link) { color: #ffffff; } .header-top a:not(.btn):not(.nav-link):hover { color: #ffffff; } .header-top .form-search-control { background: #0d0202; color: #f4f4f4; border: solid 1px rgba(210, 210, 210, 0.51); } .header-top input.form-search-control::-webkit-input-placeholder { color: #f4f4f4; } .header-top input.form-search-control:-moz-placeholder { color: #f4f4f4; } .header-top input.form-search-control:-ms-input-placeholder { color: #f4f4f4; } .header-top input.form-search-control:-moz-placeholder { color: #f4f4f4; } .header-top .search-btn { color: #f4f4f4; } .header-top .header-btn-w .header-btn > .icon { font-size: 1.2142857143rem; display: block; } .header-top .header-btn-w .header-btn .title { display: none !important; } .header-top .header-cart-default a.cart-toogle { background: #000000; color: rgba(255, 255, 255, 0.88); padding: 0.6428571429rem 0.6428571429rem; } .header-top .header-cart-default a.cart-toogle:hover { color: rgba(255, 255, 255, 0.88); } .header-top a.header-cart-btn:not(:hover) { color: rgba(255, 255, 255, 0.88); } .stuck-header .header-top { padding-top: 0.5rem; padding-bottom: 0.5rem; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #000000; } .header-top { transition: padding 0.3s ease; } .cart-products-count-btn { background: rgba(27, 211, 63, 0.79); color: #ffffff; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 59%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { background: #000000; border-top: none 1px rgba(82, 25, 81, 0); border-right: none 3px #38b82c; border-bottom: none 1px rgba(82, 25, 81, 0); border-left: none 3px #a6cc0f; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { line-height: 3.2142857143rem; max-width: 14.2857142857rem; color: #ffffff; padding-left: 0.7142857143rem; padding-right: 0.7142857143rem; border-left: groove 2px rgba(236, 230, 230, 0); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #ffffff; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.0357142857rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 3.2142857143rem !important; } .cbp-vertical-on-top .cbp-vertical-title-text { display: none !important; } .cbp-horizontal > ul > li.cbp-hropen > a, .cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li.cbp-hropen > a:hover { background: rgba(0, 0, 0, 0); color: rgba(255, 255, 255, 0.73); } .cbp-horizontal .cbp-tab-title { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #ca5058; color: #ffffff; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.2142857143rem; max-height: 1.2142857143rem; } .cbp-horizontal .cbp-submenu-aindicator { display: none; } @media (max-width: 1300px) { .cbp-horizontal .cbp-tab-title { font-size: 0.9285714286rem; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { padding-left: 0.5rem; padding-right: 0.5rem; } } #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.0714285714rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background: #000000; line-height: 3.5714285714rem; } #cbp-hrmenu1 .cbp-vertical-title:hover { color: #ffffff; background: #000000; } #cbp-hrmenu1 > ul > li > a, #cbp-hrmenu1 > ul > li > span.cbp-main-link { font-style: normal; font-weight: normal; text-transform: none; padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; border-top: solid 1px rgba(227, 227, 227, 0.35); } #cbp-hrmenu1 > ul > li > a .cbp-mainlink-icon, #cbp-hrmenu1 > ul > li > a .cbp-mainlink-iicon { font-size: 1.7142857143rem; max-height: 1.7142857143rem; } #cbp-hrmenu1 > ul > li > a, #cbp-hrmenu1 > ul > li > span.cbp-main-link { color: #ffffff; } #cbp-hrmenu1 > ul > li.cbp-hropen > a, #cbp-hrmenu1 > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #ecdbdb; } #cbp-hrmenu1 .cbp-legend { background: #ca5058; color: #ffffff; } #cbp-hrmenu1 .cbp-hrsub, #cbp-hrmenu1 > ul, #cbp-hrmenu1 .cbp-hrsub-level2, #cbp-hrmenu1 .cbp-hrsub-wrapper { transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out; } .cbp-vert-expanded #cbp-hrmenu1 .cbp-vertical-title { color: #ffffff; background: #000000; } .cbp-not-on-top #cbp-hrmenu1-ul { position: relative; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-wrapper { top: 0; margin-top: 0px !important; min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-hrsub { min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-show { -js-display: flex; display: flex; flex-wrap: wrap; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-inner { width: 100%; } /*** SUBMENU ***/ .cbp-hrmenu .cbp-hrsub { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu ul.cbp-hrsub-level2 { background: #000000; border: none 1px #37a625; box-shadow: 0px 15px 25px 0px rgba(249, 249, 249, 0.15); } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu .cbp-hrsub-inner a, .cbp-hrmenu .cbp-hrsub-inner a:link { color: #e5e5e5 !important; } .cbp-hrmenu .cbp-hrsub-inner a:hover { color: #ffffff !important; } .cbp-hrmenu .tabs-links { background: #f7f7f7; } .cbp-hrmenu .cbp-tabs-names li a { color: #fffafa !important; } .cbp-hrmenu .cbp-tabs-names li a:hover, .cbp-hrmenu .cbp-tabs-names li a.active { background: #ffffff; color: #ffffff !important; } .cbp-hrmenu .cbp-links li a:before { display: none; } .cbp-hrmenu .cbp-links li a { padding-left: 0; } .cbp-hrmenu .cbp-hrsub-inner .cbp-column-title, .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:link { color: #ffffff !important; border-bottom: none 3px #c2bc29; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: uppercase; } .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:hover { color: #f0f0f0 !important; } /*** MOBILE MENU ***/ #mobile-header .col-mobile-menu-dropdown.show { background: #000000; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #ffffff !important; } #iqitmegamenu-mobile { background: #000000; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab { min-height: 2.7142857143rem; } #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: 0.5714285714rem; padding-bottom: 0.5714285714rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__link { color: #ffffff !important; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; font-size: 1.1428571429rem; font-style: normal; font-weight: normal; text-transform: none; } .col-mobile-menu-push #iqitmegamenu-mobile { border: none 1px; } .mobile-menu__submenu { background: #000000; } .mobile-menu__tab { border-bottom: none 1px; min-height: 4.4285714286rem; } .mobile-menu__link { color: #ffffff !important; padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__arrow { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; color: #ffffff; font-size: 1.5714285714rem; } .mobile-menu__tab-icon { font-size: 1.5714285714rem; } .mobile-menu__tab-icon--img { max-height: 1.5714285714rem; } .mobile-menu__legend { font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background-color: #595050; } .mobile-menu__header-wrapper { color: #ffffff; background-color: #000000; border-bottom: none 1px; } .mobile-menu__title { font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__column-title { font-size: 1.4285714286rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050 !important; } .mobile-menu__column { font-size: 1.1428571429rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050; margin-bottom: 2.8571428571rem; } .mobile-menu__column-categories:not(:last-child) { margin-bottom: 2.8571428571rem; } .mobile-menu__links-list-li { padding-top: 0.4285714286rem; padding-bottom: 0.4285714286rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #ffffff; } .mobile-menu__footer { border-top: none 1px; color: #ffffff; background-color: #000000; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #333333; color: #ffffff; } .swiper-pagination-bullet { background: #333333; } .swiper-pagination-product { display: none !important; } /*** Product miniature ***/ .products.row { margin: -0.5rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 0.5rem; } .swiper-container-wrapper { margin: -0.5rem; } .swiper-container-wrapper .products.swiper-container { padding: 0.5rem; } .swiper-container-wrapper .product-carousel { padding: 0.5rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 0.5rem; } .product-miniature { border: solid 1px rgba(231, 227, 227, 0.2); outline: 1px none transparent; box-shadow: 2px 1px 8px 1px rgba(0, 0, 0, 0.06); background: #ffffff; color: rgba(0, 0, 0, 0.81); } .product-miniature a:link:not(.nav-link):not(.btn), .product-miniature a:visited:not(.nav-link):not(.btn) { color: rgba(0, 0, 0, 0.81); } .product-miniature .product-price { color: #9e1919; } .product-miniature .iqit-review-star { color: #ffffff; } .product-miniature-grid { padding: 0.0714285714rem; } .product-miniature-grid .product-title { font-size: 1.0714285714rem; font-style: normal; font-weight: bold; text-transform: none; } .product-miniature-grid .product-price { font-size: 1.2142857143rem; font-style: normal; font-weight: bold; text-transform: none; } .product-miniature-grid .product-title { overflow: hidden; height: 2.3571428571rem; } @media (hover: hover) { .product-miniature:hover { border-color: rgba(236, 213, 213, 0); outline: none 1px; box-shadow: 1px 1px 16px 1px rgba(0, 0, 0, 0.09); background: rgba(63, 63, 63, 0); color: #7d867d; } .product-miniature:hover a:link:not(.nav-link):not(.btn), .product-miniature:hover a:visited:not(.nav-link):not(.btn) { color: #7d867d; } .product-miniature:hover .product-price { color: rgba(103, 19, 19, 0.73); } .product-miniature:hover .iqit-review-star { color: #ff1717; } } .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: rgba(2, 7, 19, 0.47) !important; } .products-grid .product-miniature .product-category-name { display: none !important; } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-description-short { display: none !important; } .products-grid .product-miniature .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.5357142857rem 1.0714285714rem; background: rgba(234, 227, 227, 0.21); color: #0e0000; border: none 1px; } .btn-product-list:hover { background: #ffffff; color: rgba(19, 19, 24, 0.94); } .products-grid .product-miniature-default { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; } .products-grid .product-miniature-default .product-description { -webkit-box-flex: auto; -ms-flex: auto; flex: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; } .products-grid .product-add-cart { margin: auto auto 0 auto; } .product-carousel { height: 100%; } .products.swiper-container .swiper-slide { height: auto; } .products-grid .product-miniature-layout-1 .product-description { padding: 0.0714285714rem; } .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.0714285714rem; } .products-grid .product-miniature-layout-3 .product-description { background: rgba(237, 242, 252, 0); } .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-rows: 1fr; grid-auto-rows: 0; display: grid; overflow-y: hidden; } .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .layout-full-width .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(1, 1fr); } } @media (min-width: 992px) { .layout-full-width .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .layout-full-width .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-container-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: uppercase; } #product .images-container .product-cover { border: none 1px #040000; } .images-container .swiper-button-arrow, #product .product-cover .expander > span, #product-modal .modal-body .swiper-button-arrow { color: #ffffff; background: rgba(51, 51, 51, 0.29); } .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: rgba(51, 51, 51, 0.29); transition: opacity 0.2s cubic-bezier(0.7, 0, 0.3, 1), color 0.2s cubic-bezier(0.7, 0, 0.3, 1); } #product .product-cover .expander > span:hover { opacity: 0.6 !important; } .product-variants > .product-variants-item { display: inline-block; margin-right: 1rem; vertical-align: top; } #main #main-product-wrapper { transition: opacity 0.3s ease; } #main.-combinations-loading { position: relative; } #main.-combinations-loading #product-preloader { display: block; position: absolute; z-index: 10; top: -10px; } #main.-combinations-loading #main-product-wrapper { opacity: 0.3; } .product-tabs .nav-tabs { justify-content: center; } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 0.3571428571rem; padding-bottom: 0.3571428571rem; color: #777777; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 0rem; padding-bottom: 0rem; } #content-wrapper .page-title { color: #333333; font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0.8em; padding-bottom: 0.6em; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #333333; } #content-wrapper .page-title:after { content: ""; position: absolute; bottom: -0.5px; display: block; width: 40px; height: 1px; border-bottom: none 1px #e3e3e3; left: 0; right: 0; } #content-wrapper .section-title { color: #333333; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .section-title a:link, #content-wrapper .section-title a:visited { color: #333333; } .nav-tabs .nav-link { color: #000000; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: #000000; border-bottom: solid 3px #ca5058; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .title a:link:not(.nav-link):not(.btn), .iqit-accordion .title a:visited:not(.nav-link):not(.btn) { color: #000000; } .iqit-accordion .nav-link { border-bottom: solid 3px #ca5058; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #000000; border-bottom: solid 3px #ca5058; } #wrapper .block-title { color: #333333; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #wrapper .block-title a:link, #wrapper .block-title a:visited { color: #333333; } #left-column .block, #right-column .block { padding: 0.2857142857rem; border: none 1px; } #footer, #checkout-footer { background: #000000 url("ng") center center / cover no-repeat scroll; } #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: 2rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #777777 !important; } #footer .social-links._footer a:hover, #checkout-footer .social-links._footer a:hover { color: #d0c19a !important; } #footer .block-title, #checkout-footer .block-title { color: #ffffff; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0.8em; position: relative; -js-display: flex; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } #footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:link, #checkout-footer .block-title a:visited { color: #ffffff; } #footer .block-title span, #checkout-footer .block-title span { margin-right: 0.5rem; } #footer .block-title:after, #checkout-footer .block-title:after { content: ""; display: block; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-bottom: solid 1px #ffffff; } #footer-container-first { border-top: none 1px; padding-top: 2.1428571429rem; padding-bottom: 2.1428571429rem; background: #212121; color: #ffffff; } #footer-container-first h5 { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: none; } #footer-container-main, #checkout-footer { border-top: none 16px; padding-top: 2.6428571429rem; padding-bottom: 1.6428571429rem; color: #ffffff; } #footer-container-main a, #checkout-footer a { color: #ffffff; } #footer-container-main a:hover, #checkout-footer a:hover { color: rgba(245, 245, 245, 0.93); } #footer-copyrights { border-top: none 1px; background: #ffffff; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; } .footer-style-inline .block-title { display: none !important; } @media (max-width: 767px) { #footer .block-toggle { width: 100%; flex-basis: initial; } #footer .block-toggle > .block-title { cursor: pointer; } #footer .block-toggle > .block-title span::after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; margin-left: 10px; } #footer .block-toggle > .block-content { display: none; } #footer .block-toggle._toggled > .block-content { display: block; } #footer .block-toggle._toggled .block-title span::after { content: ""; } #footer .footer-style-inline .block-title { display: block !important; max-width: 100%; } #footer .footer-style-inline .block-content { display: block; width: 100%; margin-top: 1rem; } } #maintenance-page { background: #e3e3e3; color: #333333; } #maintenance-page a, #maintenance-page a:link { color: #333333; } .maintenance-page-newsletter .maintenance-page-newsletter-btn { background: #000000; color: #ffffff; } .maintenance-page-newsletter .maintenance-page-newsletter-btn:hover { background: #333333; color: #ffffff; } .maintenance-page-newsletter input[type=email] { border: solid 1px #333333; background: #e3e3e3; color: #333333; } .maintenance-page-newsletter input[type=email]::-webkit-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]::-moz-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]:-ms-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email] :-moz-placeholder { color: #333333; } /* Centrera toppmenyn */ #cbp-hrmenu { display: flex; justify-content: center; } /* Mindre rubriker på mobil – bara i innehållsytan */ @media (max-width: 768px) { .page-content h1 { font-size: 26px !important; line-height: 1.25; } .page-content h2 { font-size: 22px !important; line-height: 1.3; } .page-content h3 { font-size: 18px !important; line-height: 1.35; } } /* Snyggare filterrad utan sticky */ body.page-category #search_filters.dropdown-search-filters { background: #ffffff; border-bottom: 1px solid #eeeeee; box-shadow: 0 1px 3px rgba(0,0,0,0.03); padding: 8px 20px; } .cm-guide { font-family: inherit; color: #222; max-width: 1200px; margin: 0 auto; padding: 40px 15px 60px; } .cm-guide h1, .cm-guide h2, .cm-guide h3 { font-weight: 600; margin: 0 0 16px; } .cm-guide h1 { font-size: 2.4rem; line-height: 1.2; margin-bottom: 20px; } .cm-guide h2 { font-size: 1.8rem; margin-bottom: 24px; } .cm-guide h3 { font-size: 1.25rem; margin-bottom: 10px; } .cm-guide p { margin: 0 0 10px; line-height: 1.6; } .cm-guide a { color: #006e3a; text-decoration: none; } .cm-guide a:hover { text-decoration: underline; } /* HERO */ .cm-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: center; margin-bottom: 60px; } .cm-hero-text p.cm-hero-intro { font-size: 1.05rem; margin-bottom: 24px; } .cm-hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .cm-btn { display: inline-block; padding: 10px 18px; border-radius: 4px; font-size: 0.95rem; font-weight: 500; background: #006e3a; color: #fff; text-decoration: none; border: 1px solid #006e3a; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .cm-btn.cm-btn-secondary { background: #fff; color: #006e3a; } .cm-btn:hover { background: #004c28; border-color: #004c28; color: #fff; text-decoration: none; } .cm-btn.cm-btn-secondary:hover { background: #006e3a; color: #fff; } .cm-hero-image { background: #f4f4f4; border-radius: 8px; min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-size: 0.95rem; color: #555; } /* SEKTIONSBLOCK */ .cm-section { margin-bottom: 60px; } .cm-section-header { margin-bottom: 24px; } .cm-section-header p { max-width: 720px; } /* GRID / KORT */ .cm-grid { display: grid; gap: 20px; } .cm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cm-card { background: #fff; border-radius: 8px; border: 1px solid #e4e4e4; padding: 18px 18px 16px; position: relative; height: 100%; } .cm-card p { margin-bottom: 6px; } .cm-card ul { margin: 0 0 10px 18px; padding: 0; } .cm-card li { margin-bottom: 4px; line-height: 1.5; } .cm-card-footer { margin-top: 8px; font-size: 0.9rem; font-weight: 500; } /* JÄMFÖRELSER */ .cm-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* STORLEK & BIKEFIT */ .cm-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; } /* FAQ */ .cm-faq-list { display: grid; gap: 10px; } .cm-faq-item { border-radius: 6px; border: 1px solid #e4e4e4; padding: 12px 14px; background: #fafafa; } .cm-faq-item summary { cursor: pointer; font-weight: 500; list-style: none; } .cm-faq-item summary::-webkit-details-marker { display: none; } .cm-faq-item p { margin-top: 8px; } /* NÄSTA STEG */ .cm-next-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; font-size: 0.95rem; } /* RESPONSIVT */ @media (max-width: 960px) { .cm-hero { grid-template-columns: minmax(0, 1fr); } .cm-hero-image { order: -1; margin-bottom: 10px; } .cm-grid-3, .cm-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .cm-guide { padding: 30px 12px 50px; } .cm-grid-3, .cm-grid-2, .cm-compare-grid, .cm-two-column { grid-template-columns: minmax(0, 1fr); } .cm-hero-buttons { flex-direction: column; align-items: flex-start; } .cm-next-links { grid-template-columns: minmax(0, 1fr); } } .cm-hero p { font-size: 15px; } .cm-hero .elementor-widget-container { max-width: 100%; } } /* ============================ BUTTON GRID UNDER HERO (Cykelguide för alla nivåer) ============================ */ .cm-guide-buttons { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 40px 0 20px; } .cm-guide-buttons a { display: inline-block; width: 200px; padding: 14px 20px; border: 1px solid #999; border-radius: 8px; text-align: center; color: #333; background: #fff; transition: 0.25s ease; } .cm-guide-buttons a:hover { border-color: #666; background: #f5f5f5; } /* MOBILE */ @media (max-width: 768px) { .cm-guide-buttons { gap: 12px; } .cm-guide-buttons a { width: 120px; padding: 10px 14px; font-size: 14px; } } /* ========================= CYKELGUIDE – HERO + GUIDE ========================= */ /* HERO-SEKTION */ .cm-hero { position: relative; width: 100%; max-width: 100%; min-height: 520px; background-image: url("/img/cykelguide-hero.jpg"); /* BYT till din Trek-bild */ background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; } .cm-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45) ); } .cm-hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 80px 40px; } .cm-hero h1 { font-size: 42px; line-height: 1.1; margin-bottom: 18px; font-weight: 600; } .cm-hero p { font-size: 17px; line-height: 1.6; max-width: 480px; margin-bottom: 26px; } /* textskugga så det alltid går att läsa */ .cm-hero h1, .cm-hero p, .cm-hero .cm-hero-cta { text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); } .cm-hero-cta { display: inline-block; padding: 10px 26px; border-radius: 999px; border: 1px solid #fff; text-decoration: none; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .cm-hero-cta:hover { background: #fff; color: #000; border-color: #fff; } /* GUIDE-SEKTION */ .cm-guide { width: 100%; max-width: 100%; padding: 60px 0 80px 0; background: #f5f5f5; } .cm-guide-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; text-align: center; } .cm-guide-inner h2 { font-size: 32px; line-height: 1.2; margin-bottom: 16px; font-weight: 600; color: #333; } .cm-guide-lead { font-size: 17px; line-height: 1.6; color: #444; max-width: 720px; margin: 0 auto 34px auto; } .cm-guide-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .cm-guide-btn { display: inline-block; width: 220px; /* lika breda knappar på desktop */ padding: 11px 0; border: 1px solid #000; text-decoration: none; color: #000; font-size: 15px; border-radius: 6px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .cm-guide-btn:hover { background: #000; color: #fff; } /* MOBIL / TABLET */ @media (max-width: 768px) { .cm-hero { min-height: 420px; } .cm-hero-inner { padding: 60px 20px; } .cm-hero h1 { font-size: 26px; margin-bottom: 12px; } .cm-hero p { font-size: 14px; max-width: 320px; margin-bottom: 20px; } .cm-hero-cta { padding: 9px 20px; font-size: 13px; } .cm-guide { padding: 40px 0 60px 0; } .cm-guide-inner { padding: 0 20px; } .cm-guide-inner h2 { font-size: 24px; margin-bottom: 12px; } .cm-guide-lead { font-size: 14px; max-width: 300px; margin: 0 auto 24px auto; } .cm-guide-nav { flex-direction: column; align-items: center; gap: 10px; } .cm-guide-btn { width: 100%; max-width: 220px; /* smal, snygg kolumn på mobil */ font-size: 14px; } } .cm-guide { width: 100%; padding: 80px 20px; background: #fff; } .cm-guide-inner { max-width: 1400px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .cm-card { padding: 30px; border: 1px solid #e2e2e2; border-radius: 8px; transition: 0.25s ease; background: #fafafa; } .cm-card:hover { transform: translateY(-4px); border-color: #ccc; } .cm-card h3 { font-size: 26px; margin-bottom: 12px; color: #111; } .cm-card p { font-size: 16px; color: #444; margin-bottom: 20px; line-height: 1.5; } .cm-link { color: #111; font-weight: 600; text-decoration: none; } .cm-link:hover { text-decoration: underline; } /******************************************** CYKELGUIDE – HERO MED BAKGRUNDSBILD (sektion med klassen .cm-hero-img) ********************************************/ .cm-hero-img.elementor-section { position: relative; min-height: 460px; padding: 120px 20px; box-sizing: border-box; background-size: cover; background-position: center center; } /* Mörk toning ovanpå bilden för bättre läsbarhet */ .cm-hero-img.elementor-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.25) ); z-index: 0; } /* Se till att innehållet ligger ovanför overlayn */ .cm-hero-img .elementor-container, .cm-hero-img .elementor-column, .cm-hero-img .elementor-widget-wrap, .cm-hero-img .elementor-widget { position: relative; z-index: 1; } /* Maxbredd på innehållet i mitten, som vi gjort på guiden */ .cm-hero-img .elementor-container { max-width: 1400px; margin: 0 auto; } /* Textstil i hero */ .cm-hero-img h1 { color: #ffffff; font-size: 52px; font-weight: 600; margin-bottom: 16px; } .cm-hero-img p { color: #ffffff; font-size: 20px; max-width: 520px; margin-bottom: 28px; } /* Knappar i hero (Elementor-knappar) */ .cm-hero-img .elementor-button { font-size: 16px; padding: 14px 28px; border-radius: 4px; } /* Lite extra spacing mellan knapparna */ .cm-hero-img .elementor-button-wrapper { margin-right: 12px; } .cm-hero-img .elementor-button-wrapper:last-child { margin-right: 0; } /* Mobiljustering */ @media (max-width: 767px) { .cm-hero-img.elementor-section { padding: 80px 16px; min-height: 380px; } .cm-hero-img h1 { font-size: 32px; } .cm-hero-img p { font-size: 18px; } } /* Tvinga vit text på knapparna i hero-bilden */ .cm-hero-img .elementor-button { color: #ffffff !important; } /* Om du vill ha lite tydligare hover också */ .cm-hero-img .elementor-button:hover { filter: brightness(0.9); } /* Gör korten mer symmetriska även om text skiljer lite */ .cm-card { display: flex; flex-direction: column; } .cm-card p { flex-grow: 1; } /* 3 kolumner på desktop */ .cm-guide-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); /* exakt tre kolumner */ gap: 30px; } /* 2 kolumner på tablet */ @media (max-width: 1024px) { .cm-guide-inner { grid-template-columns: repeat(2, 1fr); } } /* 1 kolumn på mobil */ @media (max-width: 767px) { .cm-guide-inner { grid-template-columns: 1fr; } } /* ========================================= CYKELVÄLJARE – LAYOUT & STYLING ========================================= */ .cm-bike-finder { max-width: 960px; margin: 60px auto 80px; padding: 32px 28px 36px; background: #f7f7f7; border-radius: 12px; border: 1px solid #e3e3e3; } .cm-bf-inner { max-width: 880px; margin: 0 auto; } /* Rubriker och introtext */ .cm-bike-finder h2 { font-size: 28px; line-height: 1.3; margin-bottom: 4px; text-align: center; } .cm-bf-lead { text-align: center; margin: 0 0 28px; font-size: 15px; color: #666; } /* Stegcontainer */ .cm-bf-step { display: none; } .cm-bf-step.is-active { display: block; } .cm-bf-step + .cm-bf-step { margin-top: 16px; } .cm-bf-step-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #999; margin-bottom: 6px; } .cm-bf-step h3 { font-size: 18px; margin: 0 0 14px; } /* Alternativ-knappar */ .cm-bf-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .cm-bf-option { display: inline-block; padding: 10px 14px; border-radius: 6px; border: 1px solid #d0d0d0; background: #ffffff; font-size: 14px; line-height: 1.3; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; white-space: nowrap; } .cm-bf-option:hover { border-color: #999; box-shadow: 0 0 0 1px rgba(0,0,0,.03); } .cm-bf-option.is-selected { background: #007c41; /* Cykelmagneten-grön-ish */ border-color: #007c41; color: #fff; } /* Navigationsknappar (Nästa, Tillbaka, Visa rekommendation) */ .cm-bf-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } .cm-bf-next, .cm-bf-prev, .cm-bf-show, .cm-bf-restart { min-width: 120px; padding: 9px 16px; border-radius: 4px; border: 1px solid transparent; font-size: 14px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; } .cm-bf-next, .cm-bf-show { background: #007c41; border-color: #007c41; color: #fff; } .cm-bf-next[disabled], .cm-bf-show[disabled] { opacity: .45; cursor: default; } .cm-bf-prev, .cm-bf-restart { background: #ffffff; border-color: #cccccc; color: #333; } .cm-bf-prev:hover, .cm-bf-restart:hover { border-color: #999; } /* Resultat */ .cm-bf-step[data-step="6"] h3 { margin-bottom: 8px; } #cm-bf-result-intro { margin: 0 0 10px; font-size: 14px; color: #555; } .cm-bf-result { background: #ffffff; border-radius: 8px; border: 1px solid #e1e1e1; padding: 18px 18px 20px; margin: 10px 0 18px; } #cm-bf-result-category { font-size: 17px; margin: 0 0 8px; } #cm-bf-result-text { margin: 0 0 10px; font-size: 14px; } #cm-bf-result-list { margin: 0 0 12px 18px; padding: 0; font-size: 14px; } #cm-bf-result-list li { margin-bottom: 4px; } .cm-bf-cta { display: inline-block; padding: 9px 18px; border-radius: 4px; background: #007c41; color: #fff; text-decoration: none; font-size: 14px; transition: background .15s ease, opacity .15s ease; } .cm-bf-cta:hover { opacity: .9; } /* Responsiv anpassning */ @media (max-width: 768px) { .cm-bike-finder { margin: 40px 0 60px; padding: 22px 18px 26px; border-radius: 8px; } .cm-bf-options { flex-direction: column; } .cm-bf-option { width: 100%; text-align: left; } .cm-bf-actions { flex-direction: row-reverse; justify-content: space-between; } .cm-bf-next, .cm-bf-prev, .cm-bf-show, .cm-bf-restart { flex: 1 1 auto; text-align: center; } } document.addEventListener('DOMContentLoaded', function () { var root = document.getElementById('cm-bike-finder'); if (!root) return; var state = { rider: null, terrain: null, frequency: null, priority: null, motor: null }; var steps = Array.prototype.slice.call(root.querySelectorAll('.cm-bf-step')); function showStep(n) { steps.forEach(function (step) { var stepNum = parseInt(step.getAttribute('data-step'), 10); if (stepNum === n) { step.classList.add('is-active'); } else { step.classList.remove('is-active'); } }); root.scrollIntoView({ behavior: 'smooth', block: 'start' }); } function handleOptionClick(btn) { var key = btn.getAttribute('data-key'); var value = btn.getAttribute('data-value'); if (!key) return; var step = btn.closest ? btn.closest('.cm-bf-step') : btn.parentNode; while (step && !step.classList.contains('cm-bf-step')) { step = step.parentNode; } if (!step) return; var all = step.querySelectorAll('.cm-bf-option[data-key="' + key + '"]'); Array.prototype.forEach.call(all, function (b) { b.classList.remove('is-selected'); }); btn.classList.add('is-selected'); state[key] = value; var next = step.querySelector('.cm-bf-next, .cm-bf-show'); if (next) next.disabled = false; } function computeRecommendation(s) { var rec = { categoryName: 'Standardcyklar', url: 'https://cykelmagneten.com/490-standardcyklar', title: 'Standardcykel – trygg vardagscykel', text: 'En klassisk standardcykel passar bra för vardag, ärenden och kortare turer. Bekväm sittställning och komplett utrustning gör den enkel att leva med.', bullets: [ 'Bekväm, upprätt sittställning', 'Utrustad för vardag och ärenden', 'Prisvärd och lätt att underhålla' ] }; var r = s.rider; var t = s.terrain; var p = s.priority; var m = s.motor; // Barn & junior if (r === 'child' || r === 'junior') { rec.categoryName = 'Barn- & juniorcyklar'; rec.url = 'https://cykelmagneten.com/494-barn-juniorcyklar'; rec.title = 'Barn- & juniorcyklar – rätt storlek från början'; rec.text = 'För barn och juniorer är rätt storlek, låg vikt och enkel hantering viktigast. I kategorin Barn- & juniorcyklar hittar du modeller anpassade för växande cyklister.'; rec.bullets = [ 'Storlekar anpassade för barn och juniorer', 'Lättcyklade modeller med trygg geometri', 'Slitstarka komponenter för vardag och lek' ]; return rec; } // Ungdom if (r === 'teen') { if (t === 'stig') { rec.categoryName = 'Mountainbike'; rec.url = 'https://cykelmagneten.com/489-mountainbike'; rec.title = 'Mountainbike – för stig, skog och lek'; rec.text = 'För ungdomar som vill ut i skogen, köra stigar och pumptrack är en mountainbike rätt val.'; rec.bullets = [ 'Bredare däck för bättre grepp', 'Kraftiga bromsar och hållbara hjul', 'Passar både lek och träning på stig' ]; } else if (t === 'grus' || t === 'blandat') { rec.categoryName = 'Gravelbike'; rec.url = 'https://cykelmagneten.com/496-gravelbike'; rec.title = 'Gravelbike – snabb allroundcykel för grus och asfalt'; rec.text = 'En gravelbike passar ungdomar som vill cykla både på asfalt och grus. Snabbare än en MTB på väg, men tryggare än en ren landsvägscykel.'; rec.bullets = [ 'Fungerar på både asfalt och grus', 'Sportig känsla men stabil geometri', 'Passar träning, pendling och längre turer' ]; } else { rec.categoryName = 'Standardcyklar'; rec.url = 'https://cykelmagneten.com/490-standardcyklar'; rec.title = 'Standardcykel – trygg vardagscykel'; rec.text = 'För ungdomar som mest cyklar till skola, kompisar och träning är en standardcykel ett tryggt och prisvärt val.'; rec.bullets = [ 'Bekväm och upprätt sittställning', 'Enkel att utrusta med lås, korg och skärmar', 'Bra vardagscykel för skola och fritid' ]; } return rec; } // Vuxen if (r === 'adult') { var wantsMotor = (m === 'yes') || (m === 'maybe' && (t === 'stad' || t === 'blandat' || t === 'grus')); // Lådcykel if (t === 'transport') { rec.categoryName = 'Lådcyklar'; rec.url = 'https://cykelmagneten.com/644-ladcyklar'; rec.title = 'Lådcykel – smart bilersättare i vardagen'; rec.text = 'För dig som vill transportera barn, hund eller mycket packning är en lådcykel det smidigaste valet.'; rec.bullets = [ 'Stor lastkapacitet för barn och packning', 'Stabil plattform för vardagstransporter', 'Många modeller med elassistans' ]; return rec; } // Elcyklar if (wantsMotor && (t === 'stad' || t === 'blandat' || t === 'grus')) { rec.categoryName = 'Elcyklar'; rec.url = 'https://cykelmagneten.com/492-elcyklar'; rec.title = 'Elcykel – snabb och smidig vardagspartner'; rec.text = 'För pendling, vardag och längre turer där du vill ha hjälp i motvind och uppför är en elcykel det naturliga valet.'; rec.bullets = [ 'Motorhjälp i motvind och uppför', 'Perfekt för pendling och vardagscykling', 'Gör längre turer möjliga utan att bli slutkörd' ]; return rec; } // Landsväg if (t === 'landsvag') { rec.categoryName = 'Racercyklar'; rec.url = 'https://cykelmagneten.com/488-racercyklar'; rec.title = 'Racercykel – för snabb landsvägscykling'; rec.text = 'Om du vill cykla landsväg, köra distanspass och motionslopp är en racercykel rätt val.'; rec.bullets = [ 'Lätt och effektiv för hög fart', 'Optimerad för landsväg och distanspass', 'Perfekt för träning och motionslopp' ]; return rec; } // Stig / terräng if (t === 'stig') { rec.categoryName = 'Mountainbike'; rec.url = 'https://cykelmagneten.com/489-mountainbike'; rec.title = 'Mountainbike – för stig, skog och teknisk terräng'; rec.text = 'Vill du cykla i skogen, på stigar och mer teknisk terräng är en mountainbike rätt val.'; rec.bullets = [ 'Byggd för stigar, rötter och sten', 'Kraftiga bromsar och breda däck', 'Passar både lek, motion och tuffare terräng' ]; return rec; } // Grus / blandat if (t === 'grus' || t === 'blandat') { if (p === 'latt') { rec.categoryName = 'Gravelbike'; rec.url = 'https://cykelmagneten.com/496-gravelbike'; rec.title = 'Gravelbike – snabb allroundcykel för grus och asfalt'; rec.text = 'En gravelbike är perfekt om du vill cykla både på asfalt och grus.'; rec.bullets = [ 'Fungerar på både asfalt och grus', 'Sportig känsla men stabil geometri', 'Bra för pendling, träning och längre äventyr' ]; } else { rec.categoryName = 'Mountainbike'; rec.url = 'https://cykelmagneten.com/489-mountainbike'; rec.title = 'Mountainbike – trygg i skog och på grus'; rec.text = 'Vill du ha maximal kontroll på ojämna underlag och kunna köra både skogsvägar och enklare stigar är en mountainbike ett utmärkt val.'; rec.bullets = [ 'Bra kontroll på grus och skogsvägar', 'Robusta komponenter som tål tuffare användning', 'Kan även användas i vardagen med rätt utrustning' ]; } return rec; } // Stad / vardag if (t === 'stad') { if (p === 'pris') { rec.categoryName = 'Standardcyklar'; rec.url = 'https://cykelmagneten.com/490-standardcyklar'; rec.title = 'Standardcykel – enkel och prisvärd vardagscykel'; rec.text = 'För kortare vardagsturer, ärenden och cykling i stan är en standardcykel ett prisvärt och bekvämt val.'; rec.bullets = [ 'Bekväm upprätt sittställning', 'Ofta utrustad med skärmar, pakethållare och korg', 'Bra prisnivå och enkelt underhåll' ]; } else { rec.categoryName = 'Hybridcyklar'; rec.url = 'https://cykelmagneten.com/519-hybridcyklar'; rec.title = 'Hybridcykel – bekväm pendlar- och motionscykel'; rec.text = 'En hybridcykel passar dig som vill ha en lättare cykel för vardag, pendling och motion.'; rec.bullets = [ 'Lättare än en klassisk standardcykel', 'Fungerar både för pendling och motion', 'Enkel att utrusta med skärmar, lås och pakethållare' ]; } return rec; } } return rec; } // Klick-hantering för hela guiden root.addEventListener('click', function (e) { var target = e.target; // Alternativ-knappar var optionBtn = target; while (optionBtn && optionBtn !== root && !optionBtn.classList.contains('cm-bf-option')) { optionBtn = optionBtn.parentNode; } if (optionBtn && optionBtn.classList && optionBtn.classList.contains('cm-bf-option')) { e.preventDefault(); handleOptionClick(optionBtn); return; } // Nästa if (target.classList.contains('cm-bf-next')) { e.preventDefault(); var current = target.closest ? target.closest('.cm-bf-step') : target.parentNode; while (current && !current.classList.contains('cm-bf-step')) { current = current.parentNode; } if (!current) return; var n = parseInt(current.getAttribute('data-step'), 10); showStep(n + 1); return; } // Tillbaka if (target.classList.contains('cm-bf-prev')) { e.preventDefault(); var cur = target.closest ? target.closest('.cm-bf-step') : target.parentNode; while (cur && !cur.classList.contains('cm-bf-step')) { cur = cur.parentNode; } if (!cur) return; var cs = parseInt(cur.getAttribute('data-step'), 10); showStep(cs - 1); return; } // Visa rekommendation if (target.classList.contains('cm-bf-show')) { e.preventDefault(); var rec = computeRecommendation(state); var titleEl = document.getElementById('cm-bf-result-title'); var catEl = document.getElementById('cm-bf-result-category'); var textEl = document.getElementById('cm-bf-result-text'); var listEl = document.getElementById('cm-bf-result-list'); var linkEl = document.getElementById('cm-bf-result-link'); if (titleEl) titleEl.textContent = rec.title; if (catEl) catEl.textContent = rec.categoryName; if (textEl) textEl.textContent = rec.text; if (listEl) { listEl.innerHTML = ''; rec.bullets.forEach(function (b) { var li = document.createElement('li'); li.textContent = b; listEl.appendChild(li); }); } if (linkEl) linkEl.href = rec.url; showStep(6); return; } // Börja om if (target.classList.contains('cm-bf-restart')) { e.preventDefault(); state.rider = state.terrain = state.frequency = state.priority = state.motor = null; root.querySelectorAll('.cm-bf-option').forEach(function (b) { b.classList.remove('is-selected'); }); root.querySelectorAll('.cm-bf-next, .cm-bf-show').forEach(function (b) { b.disabled = true; }); showStep(1); } }); }); /* ============================================ CYKELMAGNETEN – GLOBAL CATEGORY HERO (CM HERO) Premium: vänster desktop, centrerad mobil ============================================ */ .cm-hero { position: relative; min-height: 420px; /* LÄGRE än tidigare 520px */ background-size: cover; background-position: center top; background-repeat: no-repeat; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; } /* Mörk overlay – grundnivå */ .cm-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.24); /* aningen svagare globalt */ z-index: 1; } /* Extra mörk overlay på heros där du vill ha det */ .cm-hero.dark-hero::before { background: rgba(0,0,0,0.38); } /* Innehåll följer samma grid som header/logga */ .cm-hero-inner { position: relative; z-index: 2; max-width: 1200px; /* Linjerar med Cykelmagnetens container */ width: 100%; margin: 0 auto; padding: 90px 20px; /* LÄGRE än tidigare 120px */ text-align: left; } /* Rubrik */ .cm-hero-title { font-size: 48px; /* LÄGRE än 56px */ font-weight: 600; text-transform: uppercase; color: #fff; margin-bottom: 12px; letter-spacing: 0.05em; line-height: 1.05; } /* Undertext */ .cm-hero-subtitle { font-size: 18px; /* LÄGRE än 20px */ font-weight: 300; color: #fff; opacity: 0.92; margin: 0; line-height: 1.35; } /* ============================================ TABLET ============================================ */ @media (max-width: 1024px) { .cm-hero { min-height: 360px; background-position: center; } .cm-hero-inner { padding: 70px 20px; } .cm-hero-title { font-size: 38px; } .cm-hero-subtitle { font-size: 16px; } } /* ============================================ MOBILANPASSNING – CENTRERAD TEXT ============================================ */ @media (max-width: 576px) { .cm-hero { min-height: 300px; /* LÄGRE mobilhero */ background-position: center; justify-content: center; /* Flyttar texten till mitten */ } .cm-hero-inner { text-align: center; /* Centrerad rubrik + text */ padding: 60px 18px; max-width: 100%; margin: 0 auto; } .cm-hero-title { font-size: 26px; letter-spacing: 0.03em; line-height: 1.15; padding: 0 8px; } .cm-hero-subtitle { font-size: 15px; padding: 0 12px; line-height: 1.35; } /* På mobil får dark-hero ännu lite mer tryck */ .cm-hero.dark-hero::before { background: rgba(0,0,0,0.5); } } /* Ta bort Prestashops tomma kategorirubrik + spacing */ #category #js-product-list-header, #category .page-header, #category .ps_category-header { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* Eliminera det vertikala gapet mot Elementor-hero */ body.category .columns-container { padding-top: 0 !important; margin-top: 0 !important; } /* Specifikt för mobil */ @media (max-width: 767px) { body.category .container, body.category #wrapper { padding-top: 0 !important; margin-top: 0 !important; } } /* Minska hero-höjden på mobil specifikt */ @media (max-width: 767px) { .cm-hero, .elementor-section.cm-hero { min-height: 260px !important; /* Justera ned från ca 520px */ } /* Ta bort ev. intern padding i sektionen på mobil */ .cm-hero .elementor-container, .cm-hero .elementor-column, .cm-hero-inner { padding-top: 20px !important; padding-bottom: 20px !important; } /* Säkerställ att inget margin skapas runt hero */ .cm-hero, .elementor-section-wrap > .elementor-section:first-child { margin-top: 0 !important; padding-top: 0 !important; } } /* MOBIL: exakt kompakt hero */ @media (max-width: 767px) { /* Själva hero-sektionen */ .cm-hero, .elementor-section.cm-hero { min-height: 220px !important; height: 220px !important; margin: 0 !important; padding: 0 !important; } /* Ta bort ALL intern padding i hero */ .cm-hero .elementor-container, .cm-hero .elementor-column, .cm-hero-inner { padding: 0 !important; margin: 0 !important; } /* Säkerställ att första sektionen inte trycks nedåt */ .elementor-section-wrap > .elementor-section:first-child { margin-top: 0 !important; padding-top: 0 !important; } } /* MOBIL: kompakt och snygg hero-layout */ @media (max-width: 767px) { /* Själva hero-sektionen: låg, utan extra luft */ .cm-hero, .elementor-section.cm-hero { height: 210px !important; /* Justera vid behov: 190–220 */ min-height: 210px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; /* Centrerar innehåll vertikalt */ justify-content: center !important; overflow: hidden !important; /* Klipper bort onödig svart yta */ } /* Nolla “osynlig” padding + margin inne i sektionen */ .cm-hero .elementor-container, .cm-hero .elementor-column, .cm-hero .elementor-widget-wrap, .cm-hero-inner { margin: 0 !important; padding: 0 !important; } /* Textblock: lite, men kontrollerad padding och centrerad text */ .cm-hero-inner { padding: 8px 16px 10px !important; text-align: center !important; } .cm-hero-title { font-size: 26px !important; line-height: 1.1 !important; margin: 0 0 4px 0 !important; } .cm-hero-subtitle { /* din brödtext under rubriken */ font-size: 14px !important; line-height: 1.4 !important; max-width: 90%; margin: 0 auto !important; } } @media (max-width: 767px) { /* Ta bort grå linje / extra kant innan filterraden */ body.category #content-wrapper, body.category .content_sortPagiBar, body.category #js-product-list-top { border-top: none !important; } body.category #content-wrapper > hr, body.category #wrapper hr { display: none !important; } /* ================================ KATEGORI-HERO – CYKELTILLBEHÖR Vit bakgrund + pill-knappar ================================ */ .cm-cat-hero { text-align: left; max-width: 1200px; margin: 0 auto; padding: 40px 16px 32px; background: #ffffff; } /* Titel i hero */ .cm-cat-title { margin: 0 0 6px; font-size: 34px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #111; text-shadow: none !important; } /* Undertext i hero */ .cm-cat-subtitle { margin: 0 0 24px; font-size: 15px; color: #555; line-height: 1.6; max-width: 700px; text-shadow: none !important; } /* Container för pill-knappar */ .cm-cat-tags { display: flex; flex-wrap: wrap; gap: 8px; } /* Själva pill-knapparna */ .cm-cat-tags a { display: inline-flex; padding: 8px 18px; border-radius: 999px; border: 1px solid #dedede; background: #f6f6f6; color: #222; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: 0.2s ease; text-shadow: none !important; } /* Hover */ .cm-cat-tags a:hover { background: #eaeaea; border-color: #cfcfcf; color: #000; } /* Mobil: centrera text och knappar */ @media (max-width: 768px) { .cm-cat-title, .cm-cat-subtitle { text-align: center; margin-left: auto; margin-right: auto; } .cm-cat-tags { justify-content: center; } } /* ================================ Dölj Prestashops egen kategori-H1 ================================ */ h1.h1.category-name { display: none !important; } /* Dölj Prestashops automatiska kategorirubrik */ h1.h1.category-name { display: none !important; } /* Ta bort extra spacing runt Prestashop-kategorirubriken */ #category #js-product-list-header, #category .page-header, #category .ps_category-header { margin: 0 !important; padding: 0 !important; border: none !important; } #category .elementor-widget-container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 auto !important; } /* Tillbehörs-kategorien (id 15) – ge Elementor samma bredd som produktcontainern */ body.category-15 #content-wrapper .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1290px; } /* ============================ PILL KNAPP – GRUND ============================ */ .ct-pill { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 140px; /* smalare desktop-knapp */ padding: 8px 18px; border-radius: 999px; border: 1px solid #dedede; background: #f6f6f6; color: #222; text-decoration: none; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; box-sizing: border-box; transition: 0.25s ease; } /* ============================ HOVER – LJUS TEXT + MÖRK KNAPP ============================ */ .ct-pill:hover { background: #333; /* mörkare men inte svart */ border-color: #333; color: #fff; /* vit text */ } /* ============================ ACTIVE STATE – KNAPP SOM ÄR VALD (Prestashop markerar .active eller .current) ============================ */ .ct-pill.active, .ct-pill.current, .ct-pill[aria-current="page"] { background: #000; /* ren svart */ border-color: #000; color: #fff !important; /* vit text */ } /* ============================ MOBIL – TVÅ KOLUMNER, OFÖRÄNDRAT ============================ */ @media (max-width: 768px) { .ct-pill { flex: 0 0 calc(50% - 10px); padding: 10px 14px; font-size: 14px; /* ============================================ GLOBALT – KATEGORIHEADER & PILL-KNAPPAR Gäller alla kategorier där klasserna används ============================================ */ /* --- Baslayout för knappraden (desktop + tablet) --- */ .ct-pill-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; /* vänster på desktop */ } /* Basstil för knapparna (länkar/knappar i raden) */ .ct-pill-row a, .ct-pill-row button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border-radius: 999px; border: 1px solid #e0e0e0; background: #f5f5f5; color: #666; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } /* Hover/focus – gemensam för alla kategorier */ .ct-pill-row a:hover, .ct-pill-row a:focus, .ct-pill-row button:hover, .ct-pill-row button:focus { background-color: #e30613; /* Cykelmagneten-röd */ border-color: #e30613; color: #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,0.04); } /* Aktiv/vald knapp – om ni lägger klass t.ex. "is-active" */ .ct-pill-row a.is-active, .ct-pill-row button.is-active { background-color: #111111; border-color: #111111; color: #ffffff; } /* --- MOBILANPASSNING: centrering + 2 kolumner --- */ @media (max-width: 768px) { /* Centrera rubrik + brödtext i headern på ALLA kategorier */ .cm-category-header, .cm-category-header * { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Centrera själva knappraden */ .ct-pill-row { justify-content: center !important; text-align: center !important; } /* 2 kolumner: varje knapp tar ~halva bredden */ .ct-pill-row a, .ct-pill-row button { flex: 0 1 calc(50% - 10px); max-width: calc(50% - 10px); width: 100%; margin-left: 0 !important; margin-right: 0 !important; white-space: nowrap; } } /* --- Optional: lite tightare spacning över knappar på mobil --- */ @media (max-width: 768px) { .cm-category-header { margin-bottom: 18px; } } /* ================================ CYKELMAGNETEN – KATEGORIKNAPPAR Global layoutfix: centrering + grid ================================ */ /* Wrapper för knappraden */ .ct-pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; /* CENTRERING */ margin: 20px 0; } /* Varje knapp */ .ct-pill { display: flex; align-items: center; justify-content: center; background: #f4f4f4; border: 1px solid #ddd; border-radius: 30px; padding: 10px 16px; text-align: center; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out; width: 165px; /* FAST BREDD – Lika stora knappar */ } /* Hover-effekt */ .ct-pill:hover { background: #e3001b; /* CM-röd */ border-color: #e3001b; color: white; } /* Två kolumner på desktop */ @media (min-width: 768px) { .ct-pill { width: 200px; } } /* Mobil – EN kolumn och centrerat */ @media (max-width: 767px) { .ct-pill-row { justify-content: center !important; /* Säker centreringsoverride */ } .ct-pill { width: 80%; max-width: 260px; } } /* ===== PRODUKTSIDA – TAJTARE & MER PREMIUM ===== */ /* Mindre vertikalt avstånd mellan sektioner */ .product-page .page-content, .product-page .product-description, .product-page .card, .product-page section { margin-bottom: 30px !important; } /* Tajtare padding i boxar */ .product-page .card, .product-page .box { padding: 24px !important; } /* Rubriker – mindre luft */ .product-page h2 { margin-top: 20px !important; margin-bottom: 12px !important; } .product-page h3 { margin-top: 18px !important; margin-bottom: 10px !important; } /* Paragrafer */ .product-page p { margin-bottom: 14px !important; } /* Bilder */ .product-page img { margin-bottom: 12px !important; } /* Jämna tvåkolumnsblock */ @media (min-width: 992px) { .product-page .row { align-items: center; } } /* ===== PRODUKTSIDA – TAJTARE & MER PREMIUM ===== */ /* Mindre vertikalt avstånd mellan sektioner */ .product-page .page-content, .product-page .product-description, .product-page .card, .product-page section { margin-bottom: 30px !important; } /* Tajtare padding i boxar */ .product-page .card, .product-page .box { padding: 24px !important; } /* Rubriker – mindre luft */ .product-page h2 { margin-top: 20px !important; margin-bottom: 12px !important; } .product-page h3 { margin-top: 18px !important; margin-bottom: 10px !important; } /* Paragrafer */ .product-page p { margin-bottom: 14px !important; } /* Bilder */ .product-page img { margin-bottom: 12px !important; } /* Jämna tvåkolumnsblock */ @media (min-width: 992px) { .product-page .row { align-items: center; } } /* ========================= TIGHT DESKTOP (≥ 992px) ========================= */ @media (min-width: 992px) { /* Mindre luft i hela produkt-toppen */ #product #main .page-header, #product #main .breadcrumb, #product #main .product-cover, #product #main .product-information, #product #main .product-prices, #product #main .product-actions, #product #main .product-add-to-cart { margin-bottom: 10px !important; } /* Mindre padding runt produktlayouten */ #product #main .product-container, #product #main .product-layout, #product #main .product-page, #product #main .product-content { padding-top: 10px !important; padding-bottom: 10px !important; } /* Tightare titel + ingress */ #product #main h1, #product #main .h1 { margin: 0 0 8px !important; line-height: 1.12 !important; } #product #main .product-description-short, #product #main .product-description { margin: 8px 0 10px !important; } /* Tighta ytan före "Beskrivning"/tabs */ #product #main .tabs, #product #main .product-tabs, #product #main .product-description-tabs, #product #main .product-information-tabs { margin-top: 12px !important; } /* Tighta CTA/knappar */ #product #main .product-add-to-cart, #product #main .add-to-cart, #product #main .product-quantity { margin-top: 8px !important; margin-bottom: 8px !important; } } /* --- CYKELMAGNETEN PREMIUM: 5 I BREDD & CLEAN LOOK --- */ /* 1. STÄDA BORT TEXT/SKIT UNDER OMSLAGET */ .block-category.card, #category-description, .category-description, #js-product-list-header { display: none !important; } /* 2. TYGLAD BREDD (1440px är guldstandarden) */ #wrapper .container, #content-wrapper .container { max-width: 1440px !important; width: 95% !important; margin: 0 auto !important; } /* 3. 5 PRODUKTER I BREDD PÅ DESKTOP */ @media (min-width: 992px) { #js-product-list .products { display: flex !important; flex-wrap: wrap !important; } #js-product-list .product-miniature, .category-products .product-miniature { width: 20% !important; /* 100 dividerat på 5 */ flex: 0 0 20% !important; max-width: 20% !important; padding: 10px !important; } } /* 4. PRODUKTKORT & GRÅ BAKGRUND */ .product-miniature .thumbnail-container { background-color: #f2f2f2 !important; border: none !important; padding: 15px !important; margin-bottom: 10px !important; } /* 5. SVARTA REA-TAGGAR (Små & lyxiga) */ .product-flags .product-flag.discount, .product-flags .product-flag.on-sale { background-color: #000 !important; color: #fff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase; padding: 4px 8px !important; border-radius: 0 !important; } /* 6. TYPSNITT & PRIS (Svart, ej rött) */ body, .product-miniature .product-title a { font-family: 'Inter', -apple-system, sans-serif !important; } .product-price-and-shipping .price { color: #111 !important; font-weight: 600 !important; } /* 7. TA BORT RAMAR */ .product-miniature { border: none !important; box-shadow: none !important; }