.elementor-26768 .elementor-element.elementor-element-73f5733{--display:flex;}.elementor-26768 .elementor-element.elementor-element-73f5733:not(.elementor-motion-effects-element-type-background), .elementor-26768 .elementor-element.elementor-element-73f5733 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#19212B;}.elementor-26768 .elementor-element.elementor-element-8070e62{--display:flex;}.elementor-26768 .elementor-element.elementor-element-8070e62:not(.elementor-motion-effects-element-type-background), .elementor-26768 .elementor-element.elementor-element-8070e62 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#19212B;}.elementor-26768 .elementor-element.elementor-element-a5b20fa{--display:flex;}.elementor-26768 .elementor-element.elementor-element-a5b20fa:not(.elementor-motion-effects-element-type-background), .elementor-26768 .elementor-element.elementor-element-a5b20fa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#19212B;}.elementor-26768 .elementor-element.elementor-element-fbec9dd{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--flex-wrap:nowrap;--overlay-opacity:0.43;}.elementor-26768 .elementor-element.elementor-element-fbec9dd:not(.elementor-motion-effects-element-type-background), .elementor-26768 .elementor-element.elementor-element-fbec9dd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://thebikegarage.co.za/wp-content/uploads/2026/08/Java.jpg");}.elementor-26768 .elementor-element.elementor-element-fbec9dd::before, .elementor-26768 .elementor-element.elementor-element-fbec9dd > .elementor-background-video-container::before, .elementor-26768 .elementor-element.elementor-element-fbec9dd > .e-con-inner > .elementor-background-video-container::before, .elementor-26768 .elementor-element.elementor-element-fbec9dd > .elementor-background-slideshow::before, .elementor-26768 .elementor-element.elementor-element-fbec9dd > .e-con-inner > .elementor-background-slideshow::before, .elementor-26768 .elementor-element.elementor-element-fbec9dd > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-26768 .elementor-element.elementor-element-fbec9dd.e-con{--align-self:flex-start;--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}.elementor-26768 .elementor-element.elementor-element-bd5f1df{text-align:center;}.elementor-26768 .elementor-element.elementor-element-bd5f1df .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:83px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#63C2FF;}.elementor-26768 .elementor-element.elementor-element-4427682{text-align:center;font-family:"Lato", Sans-serif;font-size:20px;font-weight:400;letter-spacing:1px;color:#CBCBCB;}.elementor-26768 .elementor-element.elementor-element-f6a36cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:25px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26768 .elementor-element.elementor-element-f6a36cb:not(.elementor-motion-effects-element-type-background), .elementor-26768 .elementor-element.elementor-element-f6a36cb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#19212B;}.elementor-26768 .elementor-element.elementor-element-4f7978d{text-align:center;font-family:"Lato", Sans-serif;font-size:20px;font-weight:400;letter-spacing:1px;color:#CBCBCB;}.elementor-26768 .elementor-element.elementor-element-49a919b{text-align:center;}.elementor-26768 .elementor-element.elementor-element-49a919b .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:63px;font-weight:900;text-transform:uppercase;font-style:normal;text-decoration:none;letter-spacing:1px;word-spacing:3px;color:#FFFFFF;}.elementor-26768 .elementor-element.elementor-element-f035a69{text-align:center;}.elementor-26768 .elementor-element.elementor-element-f035a69 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:50px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#FFFFFF;}.elementor-26768 .elementor-element.elementor-element-7a2905f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26768 .elementor-element.elementor-element-38fa412 .elementor-icon-wrapper{text-align:center;}.elementor-26768 .elementor-element.elementor-element-b7bd4c7 .elementor-icon-wrapper{text-align:center;}.elementor-26768 .elementor-element.elementor-element-ebd9721 .elementor-icon-wrapper{text-align:center;}.elementor-26768 .elementor-element.elementor-element-975c587{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-26768 .elementor-element.elementor-element-003c38c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-26768 .elementor-element.elementor-element-2e9a301{--display:flex;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-26768 .elementor-element.elementor-element-4b652d0{text-align:center;}.elementor-26768 .elementor-element.elementor-element-4b652d0 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:31px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#FFFFFF;}.elementor-26768 .elementor-element.elementor-element-2a9c216{text-align:center;color:#FFFFFF;}.elementor-26768 .elementor-element.elementor-element-24a102e{--display:flex;}.elementor-26768 .elementor-element.elementor-element-e92837c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-26768 .elementor-element.elementor-element-e92837c.e-con{--align-self:center;}.elementor-26768 .elementor-element.elementor-element-e7dcebc{--grid-columns:4;--load-more-button-align:center;--e-loop-nothing-found-message-color:#FFFFFF;}.elementor-26768 .elementor-element.elementor-element-a985eaf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-26768 .elementor-element.elementor-element-fd3568d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26768 .elementor-element.elementor-element-9d446d7 .e-off-canvas__content{background-color:#12171F;}.elementor-26768 .elementor-element.elementor-element-9d446d7 .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-26768 .elementor-element.elementor-element-9d446d7{--e-off-canvas-width:75vw;--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-overlay-opacity:1;}.elementor-26768 .elementor-element.elementor-element-6202e95{--display:flex;}.elementor-26768 .elementor-element.elementor-element-829b1c6{--display:flex;}.elementor-26768 .elementor-element.elementor-element-6c03d22{text-align:center;}.elementor-26768 .elementor-element.elementor-element-6c03d22 .elementor-heading-title{color:#FFFFFF;}.elementor-26768 .elementor-element.elementor-element-ac9a41b{text-align:center;color:#FFFFFF;}.elementor-26768 .elementor-element.elementor-element-68a9876{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-26768 .elementor-element.elementor-element-68a9876.e-con{--align-self:center;}.elementor-26768 .elementor-element.elementor-element-ebe0ae8{--display:flex;}body.elementor-page-26768:not(.elementor-motion-effects-element-type-background), body.elementor-page-26768 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2B1924;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-26768 .elementor-element.elementor-element-003c38c{--width:35%;}}@media(max-width:1366px){.elementor-26768 .elementor-element.elementor-element-fbec9dd{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-26768 .elementor-element.elementor-element-49a919b .elementor-heading-title{font-size:62px;}}@media(max-width:1024px){.elementor-26768 .elementor-element.elementor-element-fbec9dd{--min-height:0;}.elementor-26768 .elementor-element.elementor-element-49a919b .elementor-heading-title{word-spacing:0.2em;}.elementor-26768 .elementor-element.elementor-element-e7dcebc{--grid-columns:2;}}@media(max-width:767px){.elementor-26768 .elementor-element.elementor-element-bd5f1df .elementor-heading-title{font-size:40px;}.elementor-26768 .elementor-element.elementor-element-4427682{font-size:14px;}.elementor-26768 .elementor-element.elementor-element-4f7978d{font-size:14px;}.elementor-26768 .elementor-element.elementor-element-49a919b .elementor-heading-title{font-size:40px;}.elementor-26768 .elementor-element.elementor-element-f035a69 .elementor-heading-title{font-size:40px;}.elementor-26768 .elementor-element.elementor-element-4b652d0 .elementor-heading-title{font-size:40px;}.elementor-26768 .elementor-element.elementor-element-e7dcebc{--grid-columns:1;}}/* Start custom CSS for heading, class: .elementor-element-bd5f1df */Selector { text-shadow: 0 0 12px rgba(255,243,2,0.24), 0 0 30px rgba(255,243,2,0.12) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fbec9dd *//* ========================================= JAVA HERO ========================================= */ .java-hero { position: relative; width: 100% !important; max-width: none !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; overflow: hidden !important; } /* ========================================= DESKTOP / LAPTOP ========================================= */ @media (min-width: 1025px) { .java-hero { width: 100vw !important; max-width: 100vw !important; min-height: 720px; height: 75vh; background-size: 100% auto !important; background-position: center center !important; background-repeat: no-repeat !important; } } /* ========================================= TABLET ========================================= */ @media (min-width: 768px) and (max-width: 1024px) { .java-hero { width: 100vw !important; max-width: 100vw !important; min-height: 600px; background-size: 100% auto !important; background-position: center center !important; background-repeat: no-repeat !important; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .java-hero { width: 100vw !important; max-width: 100vw !important; /* * Height automatically changes * according to screen width. */ height: auto !important; min-height: 0 !important; /* * CHANGE THIS RATIO TO MATCH * YOUR ACTUAL JAVA HERO IMAGE. * * Example: * 1920 x 1080 = 16 / 9 * 1920 x 1200 = 8 / 5 * 1920 x 1280 = 3 / 2 */ aspect-ratio: 16 / 9; background-size: 100% auto !important; background-position: center center !important; background-repeat: no-repeat !important; margin-left: 0 !important; margin-right: 0 !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-f035a69 */.elementor-26768 .elementor-element.elementor-element-f035a69 { text-shadow: 0 0 12px rgba(255,243,2,0.24), 0 0 30px rgba(255,243,2,0.12) !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-ae08fca *//* ================================================== SHOP LIVE SEARCH ================================================== */ .tbg-live-shop-search { position: relative !important; width: 100% !important; } .tbg-live-search-form { width: 100% !important; height: 52px !important; display: flex !important; align-items: center !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 999px !important; overflow: hidden !important; box-shadow: 0 14px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important; } .tbg-live-search-input { flex: 1 1 auto !important; width: 100% !important; height: 52px !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; color: #ffffff !important; font-family: "Lato", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; padding: 0 22px !important; } .tbg-live-search-input::placeholder { color: rgba(255,255,255,0.48) !important; } .tbg-live-search-submit { width: 110px !important; height: 46px !important; margin-right: 3px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #fff302 !important; color: #050505 !important; border: none !important; border-radius: 999px !important; font-family: "Lato", sans-serif !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 12px 28px rgba(255,243,2,0.24), inset 0 1px 0 rgba(255,255,255,0.45) !important; } .tbg-live-search-submit:hover { background: #ffffff !important; } /* Results dropdown */ .tbg-live-search-panel { position: absolute !important; top: calc(100% + 12px) !important; left: 0 !important; right: 0 !important; z-index: 50 !important; display: none !important; background: rgba(17,24,32,0.96) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 22px !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; box-shadow: 0 24px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08) !important; overflow: hidden !important; } .tbg-live-shop-search.active .tbg-live-search-panel { display: block !important; } .tbg-search-section-title { color: #fff302 !important; font-family: "Lato", sans-serif !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 16px 18px 8px !important; } .tbg-result-item, .tbg-recent-item { width: 100% !important; display: flex !important; align-items: center !important; padding: 13px 18px !important; background: transparent !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.08) !important; color: #ffffff !important; text-align: left !important; text-decoration: none !important; font-family: "Lato", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; } .tbg-result-item:hover, .tbg-recent-item:hover { background: rgba(255,243,2,0.08) !important; color: #fff302 !important; } .tbg-search-loading, .tbg-no-results { padding: 16px 18px !important; color: rgba(255,255,255,0.62) !important; font-family: "Lato", sans-serif !important; font-size: 14px !important; } /* Mobile */ @media (max-width: 767px) { .tbg-live-search-form { height: 50px !important; } .tbg-live-search-input { height: 50px !important; font-size: 14px !important; padding: 0 16px !important; } .tbg-live-search-submit { width: 82px !important; height: 44px !important; font-size: 11px !important; } }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-38fa412 *//* Hide the icon on tablets and mobile devices */ @media (max-width: 1024px) { .tbg-desktop-laptop-icon { display: none !important; } }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-b7bd4c7 *//* Hide the icon on desktop and laptop */ @media (min-width: 1025px) { .tbg-mobile-tablet-icon { display: none !important; } }/* End custom CSS */ /* Start custom CSS for search-filter-field, class: .elementor-element-1d48e47 *//* ========================================================= THE BIKE GARAGE — SORT BY FIELD ========================================================= */ /* Outer wrapper */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox { background: #12171F !important; border: 1px solid rgba(255,255,255,0.35) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: none !important; } /* Remove inner duplicate border */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__header { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Main text input */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__actions-input { background: transparent !important; color: #ffffff !important; font-family: "Lato", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Placeholder */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__actions-input::placeholder { color: rgba(255,255,255,0.80) !important; opacity: 1 !important; } /* Selected value */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__selection, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__selection * { color: #ffffff !important; } /* Divider before arrow */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__input-divider { background: rgba(255,255,255,0.16) !important; } /* ========================================================= DROPDOWN TOGGLE BUTTON ========================================================= */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__listbox-toggle { background: transparent !important; color: #ffffff !important; border: 0 !important; border-radius: 0 !important; transition: background-color 0.2s ease, color 0.2s ease !important; } /* Remove blue hover */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__listbox-toggle:hover { background: rgba(255,255,255,0.08) !important; color: #FFF302 !important; } /* Remove blue active / focus */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__listbox-toggle:focus, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__listbox-toggle:active { background: rgba(255,255,255,0.08) !important; color: #FFF302 !important; outline: none !important; box-shadow: none !important; } /* Icon */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__listbox-toggle .search-filter-icon, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__listbox-toggle svg { color: inherit !important; fill: currentColor !important; } /* ========================================================= CLEAR / X BUTTON ========================================================= */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__clear-selection { background: transparent !important; } .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__clear-button { background: transparent !important; color: rgba(255,255,255,0.70) !important; border: 0 !important; box-shadow: none !important; } .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__clear-button:hover, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox__clear-button:focus { background: rgba(255,255,255,0.08) !important; color: #FFF302 !important; } /* ========================================================= MAIN FIELD HOVER / FOCUS ========================================================= */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox:hover { border-color: rgba(255,255,255,0.55) !important; } /* Open / focused state */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base--focused, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base--listbox-visible { border-color: #FFF302 !important; box-shadow: none !important; } /* ========================================================= DROPDOWN PANEL ========================================================= */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-field__popup { background: rgba(18,23,31,0.98) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 14px 35px rgba(0,0,0,0.32) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* List */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox-list { background: transparent !important; margin: 0 !important; padding: 6px !important; } /* Normal option */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox-option { background: transparent !important; color: #ffffff !important; padding: 11px 14px !important; border-radius: 8px !important; font-family: "Lato", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; transition: background-color 0.2s ease, color 0.2s ease !important; } /* Hover option */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox-option:hover, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox-option:focus { background: rgba(255,255,255,0.08) !important; color: #FFF302 !important; outline: none !important; } /* Selected option */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox-option--selected, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox-option[aria-selected="true"] { background: #FFF302 !important; color: #12171F !important; font-weight: 800 !important; } /* Selected option hover */ .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox-option--selected:hover, .elementor-26768 .elementor-element.elementor-element-1d48e47 .search-filter-component-combobox-base__listbox-option[aria-selected="true"]:hover { background: #FFF302 !important; color: #12171F !important; }/* End custom CSS */ /* Start custom CSS for search-filter-field, class: .elementor-element-b44b37e *//* ========================================================= THE BIKE GARAGE — CURRENT FILTERS REFINEMENT ========================================================= */ /* Current Filters heading */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-label { display: block; margin: 0 0 18px 0 !important; color: #ffffff !important; font-family: "Lato", sans-serif !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.3 !important; } /* Filter chip container */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button-group { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* Standard active filter */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; padding: 10px 18px !important; margin: 0 !important; background: rgba(255,255,255,0.055) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 999px !important; box-shadow: none !important; font-family: "Lato", sans-serif !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important; } /* Normal chip hover */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.36) !important; color: #ffffff !important; transform: translateY(-1px); } /* ========================================================= CLEAN REMOVE ICON ========================================================= */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button .search-filter-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 17px !important; height: 17px !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,0.68) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Remove the box around the X */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button .search-filter-icon__svg { width: 14px !important; height: 14px !important; display: block !important; color: inherit !important; fill: currentColor !important; stroke: currentColor !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* X hover */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button:hover .search-filter-icon { color: #FFF302 !important; } /* ========================================================= SORT FILTER CHIP Slight yellow accent, not a loud outline ========================================================= */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button[data-option-value^="9/"] { background: rgba(255,243,2,0.055) !important; border-color: rgba(255,243,2,0.48) !important; color: #ffffff !important; } /* Sort chip hover */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button[data-option-value^="9/"]:hover { background: rgba(255,243,2,0.12) !important; border-color: #FFF302 !important; color: #FFF302 !important; } .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button[data-option-value^="9/"]:hover .search-filter-icon { color: #FFF302 !important; } /* Focus */ .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button:focus, .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(255,243,2,0.22) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button-group { gap: 10px !important; } .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button { min-height: 40px !important; padding: 9px 14px !important; font-size: 11px !important; } .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button .search-filter-icon { width: 15px !important; height: 15px !important; } .elementor-26768 .elementor-element.elementor-element-b44b37e .search-filter-input-button .search-filter-icon__svg { width: 12px !important; height: 12px !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-e7dcebc *//* ========================================================== THE BIKE GARAGE LOOP GRID WIDGET ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; box-sizing: border-box !important; } /* ========================================================== PRODUCT GRID ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-loop-container { display: grid !important; /* * NORMAL DESKTOP = 3 PRODUCTS */ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; width: 100% !important; min-width: 0 !important; align-items: stretch !important; } /* * LARGE / WIDE DESKTOP * 4 products only when there is genuinely lots of room. * * This is deliberately quite high so your first screenshot * remains 3 products across. */ @media (min-width: 1900px) { .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-loop-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* ========================================================== LOOP ITEM ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .e-loop-item { width: 100% !important; min-width: 0 !important; height: 100% !important; } /* Stretch Elementor content */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .e-loop-item > .elementor, .elementor-26768 .elementor-element.elementor-element-e7dcebc .e-loop-item > .elementor > .elementor-element { height: 100% !important; } /* Prevent overflow */ .elementor-26768 .elementor-element.elementor-element-e7dcebc, .elementor-26768 .elementor-element.elementor-element-e7dcebc * { box-sizing: border-box !important; } /* ========================================================== PAGINATION ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-pagination { margin-top: 42px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-pagination .page-numbers { min-width: 42px !important; height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.07) !important; color: #ffffff !important; font-family: "Lato", sans-serif !important; font-size: 13px !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 12px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08) !important; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-pagination .page-numbers.current { background: #fff302 !important; color: #050505 !important; border-color: #fff302 !important; box-shadow: 0 14px 34px rgba(255,243,2,0.28) !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-pagination a.page-numbers:hover { background: rgba(255,243,2,0.14) !important; border-color: rgba(255,243,2,0.36) !important; color: #fff302 !important; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1024px) { .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-loop-container { grid-template-columns: 1fr !important; gap: 20px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-pagination { margin-top: 32px !important; } } /* ========================================================== PRODUCT CARD ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card { position: relative !important; height: 100% !important; display: flex !important; flex-direction: column !important; background: linear-gradient( 145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045) ) !important; border: 1px solid rgba(255,255,255,0.16) !important; border-radius: 24px !important; overflow: hidden !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; box-shadow: 0 26px 70px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.14) !important; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; cursor: pointer !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card:hover { transform: translateY(-5px) !important; border-color: rgba(255,243,2,0.32) !important; box-shadow: 0 32px 85px rgba(0,0,0,0.45), 0 0 34px rgba(255,243,2,0.10), inset 0 1px 0 rgba(255,255,255,0.18) !important; } /* ========================================================== PRODUCT IMAGE ========================================================== */ /* * Supporting both class names because your previous CSS * contained both versions. */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-image-wrap, .elementor-26768 .elementor-element.elementor-element-e7dcebc .bg-product-image-wrap { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; display: block !important; background: rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; overflow: hidden !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-image-wrap .elementor-widget-container, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-image-wrap .elementor-image, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-image-wrap a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-image-wrap picture, .elementor-26768 .elementor-element.elementor-element-e7dcebc .bg-product-image-wrap .elementor-widget-container, .elementor-26768 .elementor-element.elementor-element-e7dcebc .bg-product-image-wrap .elementor-image, .elementor-26768 .elementor-element.elementor-element-e7dcebc .bg-product-image-wrap a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .bg-product-image-wrap picture { width: 100% !important; height: 100% !important; display: block !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-image-wrap img, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-image-wrap .tbg-product-placeholder, .elementor-26768 .elementor-element.elementor-element-e7dcebc .bg-product-image-wrap img, .elementor-26768 .elementor-element.elementor-element-e7dcebc .bg-product-image-wrap .tbg-product-placeholder { width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; display: block !important; border-radius: 0 !important; } /* ========================================================== INFO ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-info { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 18px !important; background: transparent !important; } /* ========================================================== TITLE ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-title, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-title a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-title .elementor-heading-title { color: #ffffff !important; font-family: "Lato", sans-serif !important; font-size: 17px !important; font-weight: 900 !important; line-height: 1.12 !important; text-transform: uppercase !important; text-decoration: none !important; margin: 0 !important; min-height: 58px !important; text-shadow: 0 0 14px rgba(255,255,255,0.08) !important; } /* ========================================================== SKU ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-sku { margin-top: 0 !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-sku, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-sku * { color: rgba(255,255,255,0.48) !important; font-family: "Lato", sans-serif !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.06em !important; line-height: 1 !important; text-transform: uppercase !important; } /* ========================================================== PRICE ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price { margin-top: 14px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price .woocommerce-Price-amount, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price bdi { color: #fff302 !important; font-family: "Lato", sans-serif !important; font-size: 17px !important; font-weight: 900 !important; line-height: 1 !important; text-shadow: 0 0 10px rgba(255,243,2,0.28), 0 0 22px rgba(255,243,2,0.12) !important; } /* Regular price when on sale */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price del, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price del *, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price del .woocommerce-Price-amount, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price del bdi { color: rgba(255,255,255,0.38) !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: line-through !important; text-shadow: none !important; opacity: 1 !important; } /* Sale price */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price ins, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price ins *, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price ins .woocommerce-Price-amount, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-price ins bdi { color: #ff453a !important; font-size: 17px !important; font-weight: 900 !important; text-decoration: none !important; text-shadow: 0 0 12px rgba(255,69,58,0.22) !important; opacity: 1 !important; } /* ========================================================== SPECIFICATION ROW ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-row { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 18px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-widget-html, .elementor-26768 .elementor-element.elementor-element-e7dcebc .elementor-widget-html .elementor-widget-container { width: 100% !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-row:empty { display: none !important; } /* ========================================================== SPEC CHIPS ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-chip { width: 100% !important; min-width: 0 !important; min-height: 40px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding: 0 12px !important; background: rgba(255,255,255,0.09) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 999px !important; color: #ffffff !important; font-family: "Lato", sans-serif !important; font-size: 10px !important; font-weight: 900 !important; line-height: 1 !important; overflow: hidden !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.14) !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-chip p, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-chip span, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-chip .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1 !important; } /* ========================================================== SPEC ICON ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-icon { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-icon img, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-chip img { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; max-width: 30px !important; max-height: 30px !important; object-fit: contain !important; display: block !important; opacity: 1 !important; } /* ========================================================== SPEC VALUE ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-value { min-width: 0 !important; flex: 1 1 auto !important; color: #ffffff !important; font-family: "Lato", sans-serif !important; font-size: 10px !important; font-weight: 900 !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ========================================================== BUTTON ROW ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-card-actions { width: 100% !important; margin-top: auto !important; padding-top: 18px !important; display: grid !important; grid-template-columns: 1fr 1.2fr !important; gap: 10px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart { margin: 0 !important; padding: 0 !important; } /* Shared button */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details .elementor-button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button { width: 100% !important; min-height: 54px !important; height: 54px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 12px !important; border-radius: 999px !important; font-family: "Lato", sans-serif !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.05 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease !important; } /* ========================================================== VIEW DETAILS ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details .elementor-button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details a.button { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 24px rgba(0,0,0,0.22) !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details a:hover, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details .elementor-button:hover, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details a.button:hover { background: #ffffff !important; color: #050505 !important; transform: translateY(-2px) !important; } /* ========================================================== ADD TO BASKET ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button { background: #fff302 !important; color: #050505 !important; border: none !important; box-shadow: 0 14px 34px rgba(255,243,2,0.30), inset 0 1px 0 rgba(255,255,255,0.45) !important; } /* Force contents black */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart *, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button *, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button-text, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button-icon, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button-icon i, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button-icon svg, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .button *, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart a *, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart button * { color: #050505 !important; fill: #050505 !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button-text { white-space: nowrap !important; font-size: 12px !important; line-height: 1.05 !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button-icon, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart i, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart svg { width: 15px !important; height: 15px !important; font-size: 15px !important; margin: 0 !important; flex: 0 0 auto !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart a:hover, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .button:hover, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart button:hover, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button:hover { background: #ffffff !important; color: #050505 !important; transform: translateY(-2px) !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart form, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .cart { margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Hide quantity */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .quantity { display: none !important; } /* Hide View Basket link */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .added_to_cart { display: none !important; } /* ========================================================== BRAND NEW RIBBON ========================================================== */ .product_tag-new .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card::before, .product_cat-new .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card::before, .elementor-26768 .elementor-element.elementor-element-e7dcebc.product_tag-new .tbg-product-card::before, .elementor-26768 .elementor-element.elementor-element-e7dcebc.product_cat-new .tbg-product-card::before, .elementor-26768 .elementor-element.elementor-element-e7dcebc .product_tag-new .tbg-product-card::before, .elementor-26768 .elementor-element.elementor-element-e7dcebc .product_cat-new .tbg-product-card::before { content: "Brand New" !important; position: absolute !important; top: 18px !important; left: -34px !important; z-index: 20 !important; width: 155px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fff302 !important; color: #050505 !important; font-family: "Lato", sans-serif !important; font-size: 10px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; transform: rotate(-37deg) !important; transform-origin: center !important; box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.55) !important; pointer-events: none !important; } /* ========================================================== MOBILE CARD ADJUSTMENTS ========================================================== */ @media (max-width: 767px) { .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-info { padding: 16px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-title, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-title a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-title .elementor-heading-title { font-size: 16px !important; min-height: auto !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-chip { min-height: 38px !important; padding: 0 10px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-icon { flex-basis: 28px !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-icon img, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-spec-chip img { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; } .product_tag-new .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card::before, .product_cat-new .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card::before, .elementor-26768 .elementor-element.elementor-element-e7dcebc.product_tag-new .tbg-product-card::before, .elementor-26768 .elementor-element.elementor-element-e7dcebc.product_cat-new .tbg-product-card::before, .elementor-26768 .elementor-element.elementor-element-e7dcebc .product_tag-new .tbg-product-card::before, .elementor-26768 .elementor-element.elementor-element-e7dcebc .product_cat-new .tbg-product-card::before { top: 16px !important; left: -32px !important; width: 145px !important; height: 30px !important; font-size: 9px !important; } } /* Very small phones */ @media (max-width: 420px) { .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-card-actions { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart { width: 100% !important; min-width: 0 !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details .elementor-button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button { min-height: 50px !important; height: 50px !important; font-size: 11px !important; padding: 0 8px !important; } .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart .elementor-button-text { white-space: nowrap !important; font-size: 11px !important; } } /* ========================================================== CURSORS ========================================================== */ .elementor-26768 .elementor-element.elementor-element-e7dcebc .e-loop-item, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card a, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-product-card button, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-add-to-cart, .elementor-26768 .elementor-element.elementor-element-e7dcebc .tbg-view-details { cursor: pointer !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-975c587 *//* ========================================================== THE BIKE GARAGE SHOP PRODUCT GRID + FILTER SYSTEM DESKTOP > 1024px - Permanent filter column - Filter extends to bottom of product grid - 3 or 4 products depending on AVAILABLE product width TABLET / MOBILE <= 1024px - Full-width product grid - Filter becomes slide-out drawer ========================================================== */ /* ========================================================== MAIN PRODUCT + FILTER LAYOUT ========================================================== */ .tbg-product-grid-section { width: 100% !important; max-width: 1880px !important; margin: 0 auto !important; padding: 0 28px 90px !important; display: grid !important; /* FILTER | PRODUCTS */ grid-template-columns: 380px minmax(0, 1fr) !important; gap: 28px !important; /* * CRITICAL: * Makes the filter column stretch to the full * height of the product grid. */ align-items: stretch !important; overflow: visible !important; box-sizing: border-box !important; } .tbg-product-grid-section > * { min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================== FILTER SIDEBAR - DESKTOP ========================================================== */ .tbg-shop-filters { width: 100% !important; min-width: 0 !important; /* * Stretch alongside the complete product grid. */ height: 100% !important; min-height: calc(100vh - 150px) !important; align-self: stretch !important; position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: linear-gradient( 145deg, #222b34 0%, #1d262f 50%, #172028 100% ) !important; border: 1px solid rgba(255,255,255,0.16) !important; border-radius: 26px !important; overflow: hidden !important; box-shadow: 0 28px 70px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; box-sizing: border-box !important; } /* ========================================================== FILTER HEADER ========================================================== */ .tbg-filter-header { width: 100% !important; flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 6px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 26px 24px 24px !important; visibility: visible !important; opacity: 1 !important; background: rgba(255,255,255,0.025) !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; box-sizing: border-box !important; } /* ========================================================== FILTER LIST ========================================================== */ .tbg-filter-scroll { width: 100% !important; min-width: 0 !important; /* * Fills all remaining space between * filter header and Clear All button. */ flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; padding: 22px 22px 28px !important; visibility: visible !important; opacity: 1 !important; /* * Scrollbar appears ONLY when required. */ overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; box-sizing: border-box !important; } /* ========================================================== SEARCH & FILTER ELEMENTOR WIDGETS ========================================================== */ /* * Force the actual Search & Filter widgets to remain visible. * * This is particularly important inside the tablet/mobile * drawer where Elementor may otherwise retain responsive * display or sizing properties. */ .tbg-filter-scroll > .elementor-element, .tbg-filter-scroll > .elementor-widget, .tbg-filter-scroll > .e-con, .tbg-filter-scroll [class*="elementor-widget-search-filter"], .tbg-filter-scroll [data-widget_type*="search-filter"] { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; position: relative !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto !important; } .tbg-filter-scroll .elementor-widget-container { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; visibility: visible !important; opacity: 1 !important; } /* Search & Filter plugin wrappers */ .tbg-filter-scroll .search-filter-field, .tbg-filter-scroll .search-filter-component, .tbg-filter-scroll [class*="search-filter"] { visibility: visible !important; opacity: 1 !important; max-height: none !important; } /* ========================================================== FILTER SCROLLBAR ========================================================== */ .tbg-filter-scroll::-webkit-scrollbar { width: 6px !important; } .tbg-filter-scroll::-webkit-scrollbar-track { background: transparent !important; } .tbg-filter-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28) !important; border-radius: 999px !important; } .tbg-filter-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,243,2,0.52) !important; } /* ========================================================== FORCE FILTER TEXT WHITE ========================================================== */ .tbg-shop-filters { color: #ffffff !important; } .tbg-shop-filters p, .tbg-shop-filters span, .tbg-shop-filters label, .tbg-shop-filters legend, .tbg-shop-filters strong, .tbg-shop-filters small, .tbg-shop-filters li, .tbg-shop-filters a, .tbg-shop-filters h1, .tbg-shop-filters h2, .tbg-shop-filters h3, .tbg-shop-filters h4, .tbg-shop-filters h5, .tbg-shop-filters h6, .tbg-shop-filters .elementor-heading-title, .tbg-shop-filters .search-filter-field, .tbg-shop-filters .search-filter-field *, .tbg-shop-filters .search-filter-component, .tbg-shop-filters .search-filter-component *, .tbg-shop-filters [class*="search-filter"], .tbg-shop-filters [class*="search-filter"] * { color: #ffffff !important; } /* Counts slightly softer */ .tbg-shop-filters .count, .tbg-shop-filters [class*="count"] { color: rgba(255,255,255,0.65) !important; } /* ========================================================== CHECKBOXES / RADIO BUTTONS ========================================================== */ .tbg-shop-filters input[type="checkbox"], .tbg-shop-filters input[type="radio"] { accent-color: #fff302 !important; } /* ========================================================== INPUTS ========================================================== */ .tbg-shop-filters input, .tbg-shop-filters textarea { color: #ffffff !important; } .tbg-shop-filters input::placeholder, .tbg-shop-filters textarea::placeholder { color: rgba(255,255,255,0.58) !important; } /* Dropdown */ .tbg-shop-filters select { color: #ffffff !important; } /* Native opened dropdown */ .tbg-shop-filters select option { color: #111111 !important; } /* ========================================================== FILTER FOOTER ========================================================== */ .tbg-filter-footer { width: 100% !important; flex: 0 0 auto !important; display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; /* * This pushes Clear All to the bottom of the * full-height desktop filter column. */ margin-top: auto !important; padding: 16px 20px 20px !important; visibility: visible !important; opacity: 1 !important; background: rgba(8,13,18,0.68) !important; border-top: 1px solid rgba(255,255,255,0.12) !important; box-sizing: border-box !important; } /* ========================================================== CLEAR ALL BUTTON ========================================================== */ .tbg-clear-filters { width: 100% !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .tbg-clear-filters a, .tbg-clear-filters button, .tbg-clear-filters .elementor-button { width: 100% !important; min-height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 18px !important; background: rgba(255,255,255,0.08) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 999px !important; font-family: "Lato", sans-serif !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.04em !important; line-height: 1 !important; text-transform: uppercase !important; text-decoration: none !important; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important; } .tbg-clear-filters a *, .tbg-clear-filters button *, .tbg-clear-filters .elementor-button * { color: inherit !important; } .tbg-clear-filters a:hover, .tbg-clear-filters button:hover, .tbg-clear-filters .elementor-button:hover { background: #fff302 !important; border-color: #fff302 !important; color: #050505 !important; transform: translateY(-2px) !important; } /* ========================================================== PRODUCT GRID SIDE ========================================================== */ .tbg-product-grid { width: 100% !important; max-width: 100% !important; min-width: 0 !important; align-self: start !important; /* * Allows columns to respond to the actual space * available beside the filter. */ container-type: inline-size !important; container-name: tbg-product-area; box-sizing: border-box !important; } /* ========================================================== PRODUCT COLUMNS DEFAULT DESKTOP = 3 ========================================================== */ .tbg-product-grid.elementor-element .elementor-loop-container, .tbg-product-grid .elementor-loop-container { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; width: 100% !important; } /* * 4 products only when the PRODUCT AREA itself, * excluding the filter, is wide enough. */ @container tbg-product-area (min-width: 1240px) { .tbg-product-grid.elementor-element .elementor-loop-container, .tbg-product-grid .elementor-loop-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* ========================================================== LAPTOP ========================================================== */ @media (min-width: 1025px) and (max-width: 1500px) { .tbg-product-grid-section { grid-template-columns: 340px minmax(0, 1fr) !important; gap: 22px !important; padding-left: 20px !important; padding-right: 20px !important; } .tbg-filter-header { padding: 24px 20px 22px !important; } .tbg-filter-scroll { padding: 20px 20px 26px !important; } } /* ========================================================== TABLET + MOBILE <= 1024px ========================================================== */ @media (max-width: 1024px) { /* -------------------------------------------------------- PRODUCT GRID GETS FULL WIDTH -------------------------------------------------------- */ .tbg-product-grid-section { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 18px 70px !important; } .tbg-product-grid { width: 100% !important; max-width: 100% !important; } /* * Tablet = 2 products */ .tbg-product-grid.elementor-element .elementor-loop-container, .tbg-product-grid .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } /* ======================================================== FILTER DRAWER ======================================================== */ .tbg-shop-filters { position: fixed !important; top: 0 !important; left: 0 !important; z-index: 9999998 !important; /* * Tablet drawer: * 65% screen, max 560px. */ width: min(65vw, 560px) !important; max-width: min(65vw, 560px) !important; height: 100vh !important; height: 100dvh !important; min-height: 0 !important; max-height: 100vh !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; align-self: auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 0 !important; background: #1d252d !important; border: 1px solid rgba(255,255,255,0.18) !important; border-left: none !important; border-radius: 0 24px 24px 0 !important; overflow: hidden !important; box-shadow: 20px 0 70px rgba(0,0,0,0.60) !important; transform: translate3d(-105%, 0, 0) !important; visibility: hidden !important; opacity: 1 !important; pointer-events: none !important; transition: transform 0.32s cubic-bezier(.2,.8,.2,1), visibility 0.32s ease !important; } /* OPEN */ body.tbg-mobile-filters-open .tbg-shop-filters { transform: translate3d(0, 0, 0) !important; visibility: visible !important; pointer-events: auto !important; } /* ======================================================== DRAWER HEADER ======================================================== */ .tbg-shop-filters .tbg-filter-header { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 24px 20px 22px !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* ======================================================== DRAWER FILTER LIST ======================================================== */ .tbg-shop-filters .tbg-filter-scroll { position: relative !important; width: 100% !important; /* * Very important: * remove any desktop/Elementor sizing. */ height: auto !important; min-height: 0 !important; max-height: none !important; flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; padding: 20px 18px !important; visibility: visible !important; opacity: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; background: transparent !important; } /* ======================================================== FORCE SEARCH & FILTER FIELDS VISIBLE IN DRAWER ======================================================== */ .tbg-shop-filters .tbg-filter-scroll > .elementor-element, .tbg-shop-filters .tbg-filter-scroll > .elementor-widget, .tbg-shop-filters .tbg-filter-scroll > .e-con, .tbg-shop-filters .tbg-filter-scroll [class*="elementor-widget-search-filter"], .tbg-shop-filters .tbg-filter-scroll [data-widget_type*="search-filter"] { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto !important; transform: none !important; } .tbg-shop-filters .tbg-filter-scroll .elementor-widget-container { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .tbg-shop-filters .tbg-filter-scroll .search-filter-field, .tbg-shop-filters .tbg-filter-scroll .search-filter-component, .tbg-shop-filters .tbg-filter-scroll [class*="search-filter"] { visibility: visible !important; opacity: 1 !important; max-height: none !important; } /* ======================================================== OVERRIDE ELEMENTOR RESPONSIVE HIDING INSIDE FILTER DRAWER ONLY ======================================================== */ .tbg-shop-filters .elementor-hidden-tablet, .tbg-shop-filters .elementor-hidden-tablet_extra, .tbg-shop-filters .elementor-hidden-mobile { display: block !important; visibility: visible !important; opacity: 1 !important; } /* ======================================================== DRAWER FOOTER ======================================================== */ .tbg-shop-filters .tbg-filter-footer { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; display: block !important; margin: 0 !important; padding: 14px 16px 18px !important; visibility: visible !important; opacity: 1 !important; background: rgba(8,13,18,0.74) !important; border-top: 1px solid rgba(255,255,255,0.12) !important; } .tbg-shop-filters .tbg-clear-filters { display: block !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; } /* Page behind filter must not scroll */ body.tbg-mobile-filters-open { overflow: hidden !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .tbg-product-grid-section { padding: 0 14px 60px !important; } /* One product per row */ .tbg-product-grid.elementor-element .elementor-loop-container, .tbg-product-grid .elementor-loop-container { grid-template-columns: 1fr !important; gap: 20px !important; } /* Mobile drawer = 80% */ .tbg-shop-filters { width: 80vw !important; max-width: 80vw !important; } .tbg-shop-filters .tbg-filter-header { padding: 22px 18px 20px !important; } .tbg-shop-filters .tbg-filter-scroll { padding: 18px 16px !important; } } /* ========================================================== GLOBAL BOX SIZING ========================================================== */ .tbg-product-grid-section, .tbg-product-grid-section *, .tbg-shop-filters, .tbg-shop-filters *, .tbg-product-grid, .tbg-product-grid * { box-sizing: border-box !important; } /* ========================================================== TABLET + MOBILE FILTER DRAWER STACK FILTER WIDGETS VERTICALLY ONLY ========================================================== */ @media (max-width: 1024px) { /* Filters List container */ .tbg-shop-filters .tbg-filter-scroll { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; gap: 24px !important; } /* * ONLY target the direct Elementor widgets. * Do not affect anything INSIDE the individual filters. */ .tbg-shop-filters .tbg-filter-scroll > .elementor-element { display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; flex-basis: 100% !important; align-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; clear: both !important; } /* Elementor wrapper for each field */ .tbg-shop-filters .tbg-filter-scroll > .elementor-element > .elementor-widget-container { width: 100% !important; max-width: 100% !important; } } /* ========================================================== FILTER COLOURS Headings = yellow Everything else = white ========================================================== */ /* Normal filter text / options */ .tbg-shop-filters, .tbg-shop-filters p, .tbg-shop-filters span, .tbg-shop-filters label, .tbg-shop-filters li, .tbg-shop-filters a { color: #ffffff !important; } /* Counts slightly muted */ .tbg-shop-filters .count, .tbg-shop-filters [class*="count"] { color: rgba(255,255,255,0.55) !important; } /* Individual filter headings ONLY */ .tbg-shop-filters legend, .tbg-shop-filters .search-filter-field__label, .tbg-shop-filters .search-filter-label, .tbg-shop-filters [class*="field-label"], .tbg-shop-filters .tbg-filter-box > .elementor-heading-title { color: #fff02 !important; font-weight: 800 !important; } /* ========================================================== TABLET + MOBILE FILTER DRAWER FIX TOP SPACE + DROPDOWN LAYERING ========================================================== */ @media (max-width: 1024px) { /* ======================================================== REMOVE EXCESS SPACE BEFORE FIRST FILTER ======================================================== */ .tbg-shop-filters .tbg-filter-scroll { justify-content: flex-start !important; align-content: flex-start !important; align-items: stretch !important; /* Reduce space directly below filter header */ padding-top: 16px !important; /* Consistent spacing between each filter */ gap: 18px !important; } /* * Each Search & Filter widget should only be * as tall as its actual contents. */ .tbg-shop-filters .tbg-filter-scroll > .elementor-element { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 0 !important; margin-bottom: 0 !important; align-self: stretch !important; position: relative !important; overflow: visible !important; z-index: 1 !important; } /* Elementor's inner wrapper */ .tbg-shop-filters .tbg-filter-scroll > .elementor-element > .elementor-widget-container { height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; } /* ======================================================== DROPDOWN / EXPANDED FILTER FIX ======================================================== */ /* * Allow individual Search & Filter controls to * visually expand above neighbouring filter widgets. */ .tbg-shop-filters .tbg-filter-scroll .search-filter-field, .tbg-shop-filters .tbg-filter-scroll .search-filter-component { position: relative !important; overflow: visible !important; z-index: 2 !important; } /* * When a user interacts with a filter, * bring that entire Elementor widget to the front. * * This is the important part for Product Categories. */ .tbg-shop-filters .tbg-filter-scroll > .elementor-element:focus-within { z-index: 1000 !important; } /* Common open/dropdown states used by Search & Filter */ .tbg-shop-filters .tbg-filter-scroll > .elementor-element:has( .is-open ), .tbg-shop-filters .tbg-filter-scroll > .elementor-element:has( .open ), .tbg-shop-filters .tbg-filter-scroll > .elementor-element:has( [aria-expanded="true"] ) { z-index: 1000 !important; } /* The actual open panels/options */ .tbg-shop-filters [role="listbox"], .tbg-shop-filters [role="menu"], .tbg-shop-filters .search-filter-component__dropdown, .tbg-shop-filters [class*="dropdown"], .tbg-shop-filters [class*="popover"] { z-index: 9999 !important; } } /* Min/max value row — actual plugin classes */ .elementor-26768 .elementor-element.elementor-element-975c587 .search-filter-component-range-slider__range-text { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; margin: 0 0 16px !important; } .elementor-26768 .elementor-element.elementor-element-975c587 .search-filter-component-range-slider__range-text-min { margin: 0 !important; text-align: left !important; } .elementor-26768 .elementor-element.elementor-element-975c587 .search-filter-component-range-slider__range-text-max { margin: 0 0 0 auto !important; text-align: right !important; } .elementor-26768 .elementor-element.elementor-element-975c587 .search-filter-component-range-slider__range-text-min, .elementor-26768 .elementor-element.elementor-element-975c587 .search-filter-component-range-slider__range-text-max, .elementor-26768 .elementor-element.elementor-element-975c587 .tbg-price-box output, .elementor-26768 .elementor-element.elementor-element-975c587 .tbg-price-box [class*="range-value"], .elementor-26768 .elementor-element.elementor-element-975c587 .tbg-price-box [class*="display-value"] { color: #f5e900 !important; opacity: 1 !important; font-size: 15px !important; font-weight: 800 !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6261d52 *//* ========================================================== THE BIKE GARAGE TABLET + MOBILE FILTER TOGGLE ========================================================== */ /* ========================================================== DESKTOP Completely hide toggle + overlay ========================================================== */ .tbg-mobile-filter-toggle, .tbg-mobile-filter-overlay { display: none !important; } /* ========================================================== TABLET + MOBILE ========================================================== */ @media (max-width: 1024px) { /* ======================================================== LEFT EDGE FILTER BUTTON ======================================================== */ .tbg-mobile-filter-toggle { position: fixed !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 9999999 !important; width: 48px !important; height: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: #fff302 !important; color: #050505 !important; border: none !important; outline: none !important; border-radius: 0 15px 15px 0 !important; box-shadow: 7px 10px 30px rgba(0,0,0,0.42), 0 0 24px rgba(255,243,2,0.18) !important; visibility: visible !important; opacity: 1 !important; cursor: pointer !important; touch-action: manipulation !important; transition: left 0.32s cubic-bezier(.2,.8,.2,1), width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, background 0.25s ease !important; } /* ======================================================== FILTER ICON ======================================================== */ .tbg-mobile-filter-toggle svg.tbg-toggle-filter { display: block !important; width: 23px !important; height: 23px !important; min-width: 23px !important; min-height: 23px !important; color: #050505 !important; fill: currentColor !important; } /* ======================================================== CLOSE ICON HIDDEN WHILE FILTER IS CLOSED ======================================================== */ .tbg-mobile-filter-toggle svg.tbg-toggle-close { display: none !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; color: #050505 !important; } /* ======================================================== OPEN STATE ======================================================== */ body.tbg-mobile-filters-open .tbg-mobile-filter-toggle svg.tbg-toggle-filter { display: none !important; } body.tbg-mobile-filters-open .tbg-mobile-filter-toggle svg.tbg-toggle-close { display: block !important; } /* * Tablet: * move the button to the outside edge * of the 65vw / max-560px drawer. */ body.tbg-mobile-filters-open .tbg-mobile-filter-toggle { left: calc(min(65vw, 560px) - 23px) !important; width: 46px !important; height: 46px !important; border-radius: 50% !important; } /* ======================================================== BACKDROP ======================================================== */ .tbg-mobile-filter-overlay { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 9999997 !important; display: block !important; background: rgba(0,0,0,0.68) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } body.tbg-mobile-filters-open .tbg-mobile-filter-overlay { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { /* * Mobile drawer is 80vw rather than the tablet width. */ body.tbg-mobile-filters-open .tbg-mobile-filter-toggle { left: calc(80vw - 23px) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6a36cb *//* ========================================================== THE BIKE GARAGE SALE ARCHIVE TOOLBAR ALIGNED WITH MAIN SHOP ========================================================== */ /* ========================================================== PRODUCT TOOLBAR SEARCH + SORT BY ========================================================== */ .tbg-shop-toolbar { width: 100% !important; max-width: 1380px !important; margin: 0 auto 34px !important; padding: 0 24px !important; display: grid !important; /* SEARCH | SORT BY */ grid-template-columns: minmax(0, 1fr) 220px !important; gap: 12px !important; align-items: center !important; box-sizing: border-box !important; } /* Prevent Elementor children being squeezed */ .tbg-shop-toolbar > * { min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================== SEARCH WRAPPER ========================================================== */ .tbg-shop-search { width: 100% !important; min-width: 0 !important; } /* ========================================================== SEARCH FORM ========================================================== */ .tbg-shop-search form, .tbg-shop-search .elementor-search-form { width: 100% !important; height: 52px !important; display: flex !important; align-items: center !important; margin: 0 !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 999px !important; overflow: hidden !important; box-shadow: 0 14px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important; box-sizing: border-box !important; } /* ========================================================== SEARCH INPUT ========================================================== */ .tbg-shop-search input, .tbg-shop-search input[type="search"], .tbg-shop-search .elementor-search-form__input { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 52px !important; margin: 0 !important; padding: 0 22px !important; background: transparent !important; border: none !important; color: #ffffff !important; font-family: "Lato", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; } /* Placeholder */ .tbg-shop-search input::placeholder, .tbg-shop-search .elementor-search-form__input::placeholder { color: rgba(255,255,255,0.48) !important; opacity: 1 !important; } /* ========================================================== SEARCH BUTTON ========================================================== */ .tbg-shop-search button, .tbg-shop-search .elementor-search-form__submit { flex: 0 0 110px !important; width: 110px !important; min-width: 110px !important; height: 46px !important; margin: 0 3px 0 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #fff302 !important; color: #050505 !important; border: none !important; border-radius: 999px !important; font-family: "Lato", sans-serif !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 12px 28px rgba(255,243,2,0.24), inset 0 1px 0 rgba(255,255,255,0.45) !important; transition: background 0.25s ease, transform 0.25s ease !important; } .tbg-shop-search button:hover, .tbg-shop-search .elementor-search-form__submit:hover { background: #ffffff !important; color: #050505 !important; transform: translateY(-1px) !important; } /* ========================================================== SORT BY ========================================================== */ .tbg-sort-by { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; align-self: center !important; box-sizing: border-box !important; } /* Elementor wrapper */ .tbg-sort-by .elementor-widget-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================== SORT BY LABEL KEEP VISIBLE + WHITE ========================================================== */ .tbg-sort-by label, .tbg-sort-by legend, .tbg-sort-by .search-filter-label, .tbg-sort-by .search-filter-field__label, .tbg-sort-by [class*="field-label"] { color: #ffffff !important; } /* ========================================================== SORT BY DROPDOWN KEEP ORIGINAL STRUCTURE - JUST REMOVE TRANSPARENCY ========================================================== */ .tbg-sort-by select, .tbg-sort-by [role="combobox"] { background: #1d252d !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 8px !important; } /* Native options */ .tbg-sort-by select option { background: #1d252d !important; color: #ffffff !important; } /* Search & Filter dropdown menu */ .tbg-sort-by [role="listbox"], .tbg-sort-by [role="menu"], .tbg-sort-by [class*="menu"], .tbg-sort-by [class*="options"] { background: #1d252d !important; color: #ffffff !important; } /* Individual options */ .tbg-sort-by [role="option"] { background: #1d252d !important; color: #ffffff !important; } /* Selected / highlighted */ .tbg-sort-by [aria-selected="true"], .tbg-sort-by option:checked { background: #fff302 !important; color: #050505 !important; } /* ========================================================== HIDE OLD FILTER + SORT ICON BUTTONS ========================================================== */ /* * We no longer use these. * * Desktop: * permanent left filter column * * Tablet/mobile: * separate left-edge slide-out filter button */ .tbg-sort-button, .tbg-filter-button.tbg-desktop-laptop-icon, .tbg-filter-button.tbg-mobile-tablet-icon { display: none !important; } /* ========================================================== SALE ARCHIVE SPACING ========================================================== */ /* * Sale page has the full-width hero, * therefore NO top archive padding. */ .tbg-shop-archive { padding-top: 0 !important; } /* Hero / current section spacing */ .tbg-shop-current { margin-bottom: 24px !important; } /* Category pills closer to toolbar */ .tbg-shop-categories { margin-bottom: 22px !important; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1024px) { .tbg-shop-categories, .tbg-shop-toolbar { padding-left: 18px !important; padding-right: 18px !important; } .tbg-shop-toolbar { grid-template-columns: minmax(0, 1fr) 190px !important; gap: 10px !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { /* * Sale hero begins at top, * so don't introduce shop archive top spacing. */ .tbg-shop-archive { padding-top: 0 !important; } .tbg-shop-current { margin-bottom: 20px !important; } .tbg-shop-categories { margin-bottom: 18px !important; padding-left: 14px !important; padding-right: 14px !important; } /* Category pills */ .tbg-auto-category-pills { gap: 10px !important; } .tbg-category-pill { flex: 1 1 calc(50% - 10px) !important; min-width: 0 !important; min-height: 44px !important; padding: 0 14px !important; font-size: 12px !important; } /* ======================================================== MOBILE TOOLBAR ======================================================== */ .tbg-shop-toolbar { grid-template-columns: minmax(0, 1fr) 125px !important; gap: 8px !important; margin-bottom: 28px !important; padding-left: 14px !important; padding-right: 14px !important; } /* Search form */ .tbg-shop-search form, .tbg-shop-search .elementor-search-form { height: 50px !important; } /* Search input */ .tbg-shop-search input, .tbg-shop-search input[type="search"], .tbg-shop-search .elementor-search-form__input { height: 50px !important; padding-left: 16px !important; padding-right: 10px !important; font-size: 14px !important; } /* Search button */ .tbg-shop-search button, .tbg-shop-search .elementor-search-form__submit { flex-basis: 82px !important; width: 82px !important; min-width: 82px !important; height: 46px !important; font-size: 11px !important; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media (max-width: 420px) { .tbg-shop-toolbar { grid-template-columns: minmax(0, 1fr) 112px !important; } .tbg-shop-search button, .tbg-shop-search .elementor-search-form__submit { flex-basis: 76px !important; width: 76px !important; min-width: 76px !important; font-size: 10px !important; } } /* ========================================================== BOX SIZING ========================================================== */ .tbg-shop-toolbar, .tbg-shop-toolbar *, .tbg-shop-search, .tbg-sort-by { box-sizing: border-box !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6202e95 *//* ========================================================== THE BIKE GARAGE — FILTER POPUP (CONSOLIDATED / CLEANED) ========================================================== */ /* ---------- Popup base ---------- */ .elementor-26768 .elementor-element.elementor-element-6202e95 .e-con, .elementor-26768 .elementor-element.elementor-element-6202e95 .e-con-inner, .elementor-26768 .elementor-element.elementor-element-6202e95 .elementor-element, .elementor-26768 .elementor-element.elementor-element-6202e95 .elementor-widget, .elementor-26768 .elementor-element.elementor-element-6202e95 .elementor-widget-container { min-height: 0; } /* ---------- Header ---------- */ .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-header { flex: 0 0 auto !important; width: 100% !important; padding: 32px 70px 26px !important; background: #12171f !important; text-align: center !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-header .elementor-heading-title { margin: 0 !important; color: #ffffff !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: clamp(38px, 4vw, 58px) !important; line-height: 1.08 !important; font-weight: 800 !important; letter-spacing: -0.025em !important; text-transform: uppercase !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-header p { margin: 14px 0 0 !important; color: #a5afbd !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; } /* ========================================================== COLOUR TOKENS (Search & Filter plugin variables) ========================================================== */ .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-scroll .search-filter-base, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-scroll .search-filter-style--id-1 { --search-filter-token-color-base-1: #222b37; --search-filter-token-color-base-2: #aab4c1; --search-filter-token-color-base-3: #7f8a99; --search-filter-token-color-base-accent: #f5e900; --search-filter-token-color-contrast-1: #ffffff; --search-filter-token-color-contrast-2: #ffffff; --search-filter-token-color-contrast-accent: #12171f; --search-filter-label-color: #ffffff; --search-filter-description-color: #9da8b8; --search-filter-input-label-color: #ffffff; --search-filter-input-color: #ffffff; --search-filter-input-background-color: #222b37; --search-filter-input-selected-background-color: #f5e900; --search-filter-input-selected-color: #12171f; } /* ---------- General field text ---------- */ .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-scroll .search-filter-field { color: #ffffff !important; font-family: "Lato", Arial, sans-serif !important; font-size: 14px !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-scroll .search-filter-field__label, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-scroll .search-filter-field > label, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-scroll .search-filter-field legend { margin: 0 0 11px !important; padding: 0 !important; color: #ffffff !important; opacity: 1 !important; font-family: "Lato", Arial, sans-serif !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 900 !important; letter-spacing: 0.075em !important; text-transform: uppercase !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-filter-scroll .search-filter-field__description { color: #9da8b8 !important; } /* ========================================================== CURRENT FILTERS ========================================================== */ .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 0 26px !important; padding: 0 !important; overflow: visible !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section .search-filter-field__label, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section > label, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section h3, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section h4 { display: block !important; width: 100% !important; margin: 0 0 13px !important; padding: 0 !important; color: #aab4c1 !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section .elementor-widget-container, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section .search-filter-field, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section .search-filter-base, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section [class*="selection"], .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section ul { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; transform: none !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section ul, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section [class*="selection"] { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 9px !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section a, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section button { min-height: 40px !important; padding: 0 17px !important; background: #222b37 !important; color: #ffffff !important; border: 1px solid rgba(245, 233, 0, 0.65) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 800 !important; box-shadow: none !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section a:hover, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-current-section button:hover { background: #f5e900 !important; color: #12171f !important; border-color: #f5e900 !important; } /* ========================================================== PRICE BOX ========================================================== */ .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 0 28px !important; padding: 22px 24px 26px !important; background: #18212c !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 15px !important; overflow: visible !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box > .elementor-widget-container, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .search-filter-field, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .search-filter-base, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box form, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box fieldset { position: relative !important; width: 100% !important; max-width: none !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; transform: none !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .search-filter-field__label, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .search-filter-field > label, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box legend { display: block !important; margin: 0 0 14px !important; color: #ffffff !important; opacity: 1 !important; } /* Min/max value row — actual plugin classes */ .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-component-range-slider__range-text { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; margin: 0 0 16px !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-component-range-slider__range-text-min { margin: 0 !important; text-align: left !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-component-range-slider__range-text-max { margin: 0 0 0 auto !important; text-align: right !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-component-range-slider__range-text-min, .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-component-range-slider__range-text-max, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box output, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box [class*="range-value"], .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box [class*="display-value"] { color: #f5e900 !important; opacity: 1 !important; font-size: 15px !important; font-weight: 800 !important; } /* Slider track */ .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .noUi-target, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .noUi-base, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .noUi-connects, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .ui-slider, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box input[type="range"] { display: block !important; width: 100% !important; max-width: none !important; overflow: visible !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .noUi-connect, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .ui-slider-range { background: #f5e900 !important; opacity: 1 !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .noUi-handle, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box .ui-slider-handle { background: #f5e900 !important; border-color: #12171f !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-price-box input[type="range"] { accent-color: #f5e900 !important; } /* ---------- Checkbox lists (Category / Frame Size) ---------- */ .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox { width: 100% !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox ul { width: 100% !important; margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox ul ul { margin: 5px 0 0 26px !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox li { margin: 0 0 4px !important; padding: 7px 8px !important; border: 1px solid transparent !important; border-radius: 8px !important; transition: background-color 0.18s ease, border-color 0.18s ease !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox li:hover { background: rgba(255, 255, 255, 0.055) !important; border-color: rgba(255, 255, 255, 0.09) !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 0 9px 0 0 !important; accent-color: #f5e900 !important; cursor: pointer !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox label { color: #e7ebf0 !important; opacity: 1 !important; font-family: "Lato", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 600 !important; cursor: pointer !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox [class*="count"] { color: #929eae !important; opacity: 1 !important; font-size: 12px !important; font-weight: 700 !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox li:has(input:checked) { background: rgba(245, 233, 0, 0.1) !important; border-color: rgba(245, 233, 0, 0.48) !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--type-choice.search-filter-field--input-type-checkbox li:has(input:checked) label { color: #ffffff !important; font-weight: 800 !important; } /* Long lists scroll internally instead of spilling over the next box */ .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-expandable-filter .search-filter-field--input-type-checkbox ul { position: static !important; width: 100% !important; max-width: 100% !important; max-height: 330px !important; margin-top: 14px !important; padding-right: 8px !important; overflow-x: hidden !important; overflow-y: auto !important; transform: none !important; scrollbar-width: thin !important; scrollbar-color: rgba(245, 233, 0, 0.75) rgba(255, 255, 255, 0.08) !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-expandable-filter .search-filter-field--input-type-checkbox ul ul { max-height: none !important; margin-top: 5px !important; padding-right: 0 !important; overflow: visible !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-expandable-filter .search-filter-field--input-type-checkbox ul::-webkit-scrollbar { width: 6px !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-expandable-filter .search-filter-field--input-type-checkbox ul::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.07) !important; border-radius: 999px !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-expandable-filter .search-filter-field--input-type-checkbox ul::-webkit-scrollbar-thumb { background: rgba(245, 233, 0, 0.75) !important; border-radius: 999px !important; } /* ---------- Button-style choices (Frame Material / Cassette) ---------- */ .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button ul { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; margin: 9px 0 0 !important; padding: 0 !important; list-style: none !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button li { margin: 0 !important; padding: 0 !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button button, .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button [role="button"], .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button input + label { min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 0 16px !important; background: #222b37 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.23) !important; border-radius: 10px !important; box-shadow: none !important; font-family: "Lato", Arial, sans-serif !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.025em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button button:hover, .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button [role="button"]:hover, .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button input + label:hover { background: #2a3543 !important; border-color: rgba(255, 255, 255, 0.42) !important; transform: translateY(-1px); } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button button[aria-pressed="true"], .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button button[aria-selected="true"], .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button [role="button"][aria-pressed="true"], .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button [role="button"][aria-selected="true"], .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button input:checked + label, .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button .is-selected, .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button .is-active { background: #f5e900 !important; color: #12171f !important; border-color: #f5e900 !important; box-shadow: 0 0 0 3px rgba(245, 233, 0, 0.12) !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .search-filter-field--input-type-button [class*="count"] { color: currentColor !important; opacity: 0.6 !important; font-size: 11px !important; } /* ========================================================== FOOTER BUTTONS ========================================================== */ .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-clear-filters { display: flex !important; align-items: center !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-clear-filters button, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-clear-filters input, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-clear-filters a, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-clear-filters [role="button"] { box-sizing: border-box !important; width: auto !important; min-width: 2px !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 10px !important; background: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; border-radius: 999px !important; box-shadow: none !important; font-family: "Lato", Arial, sans-serif !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.045em !important; text-align: center !important; text-transform: uppercase !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results .elementor-widget-container, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results .search-filter-field, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results .search-filter-field > div { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results input[type="submit"], .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results input[type="button"] { box-sizing: border-box !important; width: auto !important; min-width: 2px !important; height: 52px !important; min-height: 5px !important; margin: 0 !important; padding: 0 0px !important; background: #f5e900 !important; color: #12171f !important; border: 1px solid #f5e900 !important; border-radius: 99px !important; box-shadow: none !important; outline: none !important; font-family: "Lato", Arial, sans-serif !important; font-size: 13px !important; line-height: 50px !important; font-weight: 900 !important; letter-spacing: 0.045em !important; text-align: center !important; text-indent: 0 !important; text-transform: uppercase !important; vertical-align: middle !important; cursor: pointer !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results button, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results a, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results [role="button"], .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results .elementor-button { box-sizing: border-box !important; width: auto !important; min-width: 205px !important; height: 52px !important; min-height: 52px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 30px !important; background: #f5e900 !important; color: #12171f !important; border: 1px solid #f5e900 !important; border-radius: 999px !important; box-shadow: none !important; outline: none !important; font-family: "Lato", Arial, sans-serif !important; font-size: 13px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.045em !important; text-align: center !important; text-decoration: none !important; text-transform: uppercase !important; cursor: pointer !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results button *, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results a *, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results [role="button"] *, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results .elementor-button * { position: static !important; inset: auto !important; display: inline !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; line-height: 1 !important; transform: none !important; } .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results input[type="submit"]:hover, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results input[type="button"]:hover, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results button:hover, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results a:hover, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results [role="button"]:hover, .elementor-26768 .elementor-element.elementor-element-6202e95 .tbg-view-results .elementor-button:hover { background: #ffffff !important; color: #12171f !important; border-color: #ffffff !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fd3568d *//* ========================================= FILTER POPUP MODAL ========================================= */ /* Dark blurred overlay */ .filter-popup-panel .dialog-widget { background: rgba(5, 8, 12, 0.72) !important; backdrop-filter: blur(8px) !important; } /* Actual popup box */ .filter-popup-panel .dialog-message, .filter-popup-panel .e-offcanvas__container { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: min(92vw, 760px) !important; max-width: 760px !important; max-height: 82vh !important; overflow-y: auto !important; background: #151c24 !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 28px !important; padding: 34px !important; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 40px rgba(255,243,2,0.08) !important; } /* Hide Elementor default close */ .filter-popup-panel .dialog-close-button { display: none !important; } /* Thin scrollbar */ .filter-popup-panel *::-webkit-scrollbar { width: 5px !important; } .filter-popup-panel *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18) !important; border-radius: 999px !important; } /* Mobile */ @media (max-width: 767px) { .filter-popup-panel .dialog-message, .filter-popup-panel .e-offcanvas__container { width: calc(100vw - 24px) !important; max-height: 88vh !important; padding: 24px !important; border-radius: 22px !important; } }/* End custom CSS */