.elementor-284 .elementor-element.elementor-element-4ac3054{--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-284 .elementor-element.elementor-element-a04c70e{--display:flex;}.elementor-284 .elementor-element.elementor-element-effd695 .jet-smart-filters-active{flex-direction:row;}.elementor-284 .elementor-element.elementor-element-effd695 .jet-active-filters__list{flex-direction:row;}.elementor-284 .elementor-element.elementor-element-effd695 .jet-active-filter{margin-right:5px;margin-bottom:5px;}.elementor-284 .elementor-element.elementor-element-effd695 .jet-active-filter__remove{font-size:12px;}.elementor-widget-jet-smart-filters-remove-filters .jet-remove-all-filters__button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-moreless__toggle{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-jet-smart-filters-checkboxes .apply-filters__button, .elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-dropdown__apply-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__row{display:block;margin-right:calc(5px/2);margin-left:calc(5px/2);padding-top:calc(10px/2);margin-bottom:calc(10px/2);}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-list-tree__children{display:block;margin-right:calc(5px/2);margin-left:calc(5px/2);padding-left:10px;}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list-wrapper{margin-left:calc(-5px/2);margin-right:calc(-5px/2);margin-top:calc(-10px/2);margin-bottom:calc(-10px/2);}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__decorator{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:5px;}.rtl .elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__decorator{margin-left:5px;}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__checked-icon{font-size:12px;}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-collapse-icon{width:20px;height:20px;}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-collapse-none{width:20px;height:20px;}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-filters-counter{margin-left:initial;padding-left:5px;}.rtl .elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-filters-counter{margin-right:initial;padding-right:5px;}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-filter+.jet-filter{margin-top:10px;}.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-select[data-hierarchical="1"] + .jet-select[data-hierarchical="1"]{margin-top:10px;}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__row{display:block;margin-right:calc(5px/2);margin-left:calc(5px/2);padding-top:calc(10px/2);margin-bottom:calc(10px/2);}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-list-tree__children{display:block;margin-right:calc(5px/2);margin-left:calc(5px/2);padding-left:10px;}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list-wrapper{margin-left:calc(-5px/2);margin-right:calc(-5px/2);margin-top:calc(-10px/2);margin-bottom:calc(-10px/2);}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__decorator{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:5px;}.rtl .elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__decorator{margin-left:5px;}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__checked-icon{font-size:12px;}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-collapse-icon{width:20px;height:20px;}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-collapse-none{width:20px;height:20px;}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-filters-counter{margin-left:initial;padding-left:5px;}.rtl .elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-filters-counter{margin-right:initial;padding-right:5px;}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-filter+.jet-filter{margin-top:10px;}.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-select[data-hierarchical="1"] + .jet-select[data-hierarchical="1"]{margin-top:10px;}.elementor-284 .elementor-element.elementor-element-e62ef46{--display:flex;}.elementor-284 .elementor-element.elementor-element-75933d5{--display:flex;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-284 .elementor-element.elementor-element-7b436bd .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-284 .elementor-element.elementor-element-7b436bd{--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-overlay-opacity:1;}.elementor-284 .elementor-element.elementor-element-9222087{--display:flex;}.elementor-284 .elementor-element.elementor-element-05eeccd{--display:flex;}.elementor-284 .elementor-element.elementor-element-9d4cf8b .jet-smart-filters-active{flex-direction:row;}.elementor-284 .elementor-element.elementor-element-9d4cf8b .jet-active-filters__list{flex-direction:row;}.elementor-284 .elementor-element.elementor-element-9d4cf8b .jet-active-filter{margin-right:5px;margin-bottom:5px;}.elementor-284 .elementor-element.elementor-element-9d4cf8b .jet-active-filter__remove{font-size:12px;}.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__row{display:block;margin-right:calc(5px/2);margin-left:calc(5px/2);padding-top:calc(10px/2);margin-bottom:calc(10px/2);}.elementor-284 .elementor-element.elementor-element-255d41d .jet-list-tree__children{display:block;margin-right:calc(5px/2);margin-left:calc(5px/2);padding-left:10px;}.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list-wrapper{margin-left:calc(-5px/2);margin-right:calc(-5px/2);margin-top:calc(-10px/2);margin-bottom:calc(-10px/2);}.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__decorator{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:5px;}.rtl .elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__decorator{margin-left:5px;}.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__checked-icon{font-size:12px;}.elementor-284 .elementor-element.elementor-element-255d41d .jet-collapse-icon{width:20px;height:20px;}.elementor-284 .elementor-element.elementor-element-255d41d .jet-collapse-none{width:20px;height:20px;}.elementor-284 .elementor-element.elementor-element-255d41d .jet-filters-counter{margin-left:initial;padding-left:5px;}.rtl .elementor-284 .elementor-element.elementor-element-255d41d .jet-filters-counter{margin-right:initial;padding-right:5px;}.elementor-284 .elementor-element.elementor-element-255d41d .jet-filter+.jet-filter{margin-top:10px;}.elementor-284 .elementor-element.elementor-element-255d41d .jet-select[data-hierarchical="1"] + .jet-select[data-hierarchical="1"]{margin-top:10px;}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__row{display:block;margin-right:calc(5px/2);margin-left:calc(5px/2);padding-top:calc(10px/2);margin-bottom:calc(10px/2);}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-list-tree__children{display:block;margin-right:calc(5px/2);margin-left:calc(5px/2);padding-left:10px;}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list-wrapper{margin-left:calc(-5px/2);margin-right:calc(-5px/2);margin-top:calc(-10px/2);margin-bottom:calc(-10px/2);}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__decorator{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:5px;}.rtl .elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__decorator{margin-left:5px;}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__checked-icon{font-size:12px;}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-collapse-icon{width:20px;height:20px;}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-collapse-none{width:20px;height:20px;}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-filters-counter{margin-left:initial;padding-left:5px;}.rtl .elementor-284 .elementor-element.elementor-element-bcd892e .jet-filters-counter{margin-right:initial;padding-right:5px;}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-filter+.jet-filter{margin-top:10px;}.elementor-284 .elementor-element.elementor-element-bcd892e .jet-select[data-hierarchical="1"] + .jet-select[data-hierarchical="1"]{margin-top:10px;}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-284 .elementor-element.elementor-element-b29026c.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-284 .elementor-element.elementor-element-b29026c.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-284 .elementor-element.elementor-element-b29026c.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(min-width:768px){.elementor-284 .elementor-element.elementor-element-4ac3054{--content-width:1300px;}.elementor-284 .elementor-element.elementor-element-a04c70e{--width:25%;}.elementor-284 .elementor-element.elementor-element-e62ef46{--width:75%;}.elementor-284 .elementor-element.elementor-element-05eeccd{--width:100%;}}@media(max-width:767px){.elementor-284 .elementor-element.elementor-element-7b436bd{--e-off-canvas-width:308px;}.elementor-284 .elementor-element.elementor-element-b29026c.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for jet-smart-filters-active, class: .elementor-element-effd695 *//* ================================================================
KLIMAKUPON.HU — JETSMARTFILTERS "ACTIVE FILTERS" WIDGET CSS
Fájl: 10-jet-active-filters-global.css Blokkok: 10.0 – 10.3
HOVA: GLOBÁLIS — Megjelenés → Testreszabás → További CSS
(a többi számozott CSS mellé, hozzáfűzve)
ELŐFELTÉTEL: a widget már megkapta az Osztályok mezőben a
"cst-kp-active-filters" osztályt (a te DevTools screenshotod
alapján ez már rajta is van).
A class-nevek a VALÓS, DevTools-ból ellenőrzött markupot követik:
.jet-smart-filters-active / .jet-active-filters → widget-wrapper
.jet-active-filters__list → lista-konténer (cím + chip-ek)
.jet-active-filters__title → "Aktív Szűrők" felirat
.jet-active-filter → egy chip (EGYES szám — nem __item!)
.jet-active-filter__val → a chip szövege, pl. "Midea"
.jet-active-filter__remove → a chip "×" eltávolító gombja
================================================================ */
.cst-kp-active-filters{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-white:#FFFFFF;
--kph-blue-050:#E6F2FF;
}
/* ================================================
10.1 — LISTA-KONTÉNER (cím + chipek egy sorban)
================================================ */
.cst-kp-active-filters .jet-active-filters__list{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
font-family:var(--kph-font) !important;
}
.cst-kp-active-filters .jet-active-filters__title{
margin:0 !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
/* ================================================
10.2 — EGY CHIP (.jet-active-filter)
================================================ */
.cst-kp-active-filters .jet-active-filter{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
margin:0 !important;
padding:6px 8px 6px 14px !important;
background:var(--kph-blue-050) !important;
border-radius:999px !important;
cursor:default !important;
}
.cst-kp-active-filters .jet-active-filter__val{
font-size:13px !important; font-weight:600 !important;
color:var(--kph-ink) !important;
line-height:1.3 !important;
}
.cst-kp-active-filters .jet-active-filter__remove{
display:flex !important; align-items:center !important; justify-content:center !important;
width:20px !important; height:20px !important; flex:0 0 auto !important;
border-radius:50% !important;
background:var(--kph-white) !important;
color:var(--kph-primary) !important;
font-size:12px !important; line-height:1 !important;
cursor:pointer !important;
transition:background-color .15s ease, color .15s ease;
}
.cst-kp-active-filters .jet-active-filter__remove:hover{
background:var(--kph-primary) !important;
color:var(--kph-white) !important;
}/* End custom CSS */
/* Start custom CSS for jet-smart-filters-remove-filters, class: .elementor-element-fe97962 *//* ================================================================
KLIMAKUPON.HU — JETSMARTFILTERS "REMOVE FILTERS" WIDGET CSS
Fájl: 09-jet-remove-filters-global.css Blokkok: 09.0 – 09.1
HOVA: GLOBÁLIS — Megjelenés → Testreszabás → További CSS
(a többi számozott CSS mellé, hozzáfűzve)
ELŐFELTÉTEL: a widget már megkapta az Osztályok mezőben a
"cst-kp-remove-filters" osztályt (a te DevTools screenshotod
alapján ez már rajta is van).
A class-nevek most már a VALÓS, DevTools-ból ellenőrzött markupot
követik:
.jet-smart-filters-remove-filters → widget-wrapper
.jet-remove-all-filters → belső konténer
.jet-remove-all-filters__button → maga a "Szűrők törlése" gomb
================================================================ */
.cst-kp-remove-filters{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
}
.cst-kp-remove-filters .jet-remove-all-filters{
display:flex !important;
}
.cst-kp-remove-filters .jet-remove-all-filters__button{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
margin:0 !important; padding:0 !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
color:var(--kph-primary) !important;
background:none !important;
border:none !important;
text-decoration:underline !important;
text-underline-offset:2px !important;
cursor:pointer !important;
transition:color .15s ease;
}
.cst-kp-remove-filters .jet-remove-all-filters__button:hover{
color:var(--kph-ink) !important;
}/* End custom CSS */
/* Start custom CSS for jet-smart-filters-checkboxes, class: .elementor-element-5e0d5e0 *//* ================================================================
KLIMAKUPON.HU — JETSMARTFILTERS "CHECKBOXES FILTER" WIDGET CSS
Fájl: 06-jet-checkboxes-filter.css Blokkok: 06.0 – 06.4
HOVA: EZ A WIDGET SAJÁT Egyéni CSS-e — NEM globális!
A "Checkboxes Filter" widget kijelölve → Stílus vagy Haladó
fül → Egyéni CSS → illeszd be, a ".elementor-284 .elementor-element.elementor-element-5e0d5e0" szót ne cseréld le.
FONTOS: ezt minden márka / energiaosztály / kW checkbox-widgetre
külön be kell illesztened (mindegyik saját widget-példány), mivel
widget-szintű CSS-ről van szó, nem globálisról.
A class-nevek a JetSmartFilters (Crocoblock) SZOKVÁNYOS, dokumentált
markupját követik (.jet-checkboxes-list / __item / __label stb.).
Ha nálad a widget verziója más class-t ad ki, és a stílus nem fog
meg, küldd át a checkbox-lista HTML-jét (DevTools → Inspect →
Copy outerHTML), és pontosítom.
================================================================ */
.elementor-284 .elementor-element.elementor-element-5e0d5e0{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-white:#FFFFFF;
--kph-blue-050:#E6F2FF;
--kph-line:#E4EAF1;
}
/* ================================================
06.1 — LISTA-KONTÉNER
================================================ */
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list{
display:flex !important;
flex-direction:column !important;
gap:2px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
font-family:var(--kph-font) !important;
}
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__item{
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
/* ================================================
06.2 — SOR (label + jelölőnégyzet + szöveg + darabszám)
================================================ */
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__label{
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:8px 6px !important;
border-radius:8px !important;
cursor:pointer !important;
transition:background-color .15s ease;
}
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__label:hover{
background:var(--kph-blue-050) !important;
}
/* Natív checkbox — ha a widget nem rajzol saját indikátort, ez a
fallback stílus, az oldal többi checkboxával egyező kék színnel */
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__control{
width:17px !important; height:17px !important;
margin:0 !important; flex:0 0 auto !important;
accent-color:var(--kph-primary) !important;
cursor:pointer !important;
}
/* Ha a widget saját rajzolt indikátort ad (span.control-indicator) —
ez veszi át a natív checkbox helyét vizuálisan */
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__control-indicator{
width:17px !important; height:17px !important;
flex:0 0 auto !important;
border:1.5px solid var(--kph-line) !important;
border-radius:5px !important;
background:var(--kph-white) !important;
transition:background-color .15s ease, border-color .15s ease;
}
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__control:checked ~ .jet-checkboxes-list__control-indicator,
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__control-wrap input:checked ~ .jet-checkboxes-list__control-indicator{
background:var(--kph-primary) !important;
border-color:var(--kph-primary) !important;
}
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__label-text{
flex:1 1 auto !important;
font-size:14px !important; font-weight:500 !important;
color:var(--kph-ink) !important;
line-height:1.3 !important;
}
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__counter,
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__count{
font-size:12.5px !important; font-weight:400 !important;
color:var(--kph-body) !important;
}
/* ================================================
06.3 — KIVÁLASZTOTT ÁLLAPOT (aktív szűrő kiemelése)
================================================ */
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__item.jet-active .jet-checkboxes-list__label,
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__item--active .jet-checkboxes-list__label{
background:var(--kph-blue-050) !important;
}
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__item.jet-active .jet-checkboxes-list__label-text,
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__item--active .jet-checkboxes-list__label-text{
color:var(--kph-primary) !important;
font-weight:700 !important;
}
/* ================================================
06.4 — SAJÁT SZŰRŐ-CÍMKE (ha a widget maga adja ki, pl. "Márka")
================================================ */
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-filter-label,
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-smart-filters-heading{
margin:0 0 12px !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
/* ================================================
06.5 — REZSPONZÍV
================================================ */
@media (max-width:600px){
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__label{ padding:9px 6px !important; }
.elementor-284 .elementor-element.elementor-element-5e0d5e0 .jet-checkboxes-list__label-text{ font-size:14.5px !important; }
}/* End custom CSS */
/* Start custom CSS for jet-smart-filters-checkboxes, class: .elementor-element-4bfeba3 *//* ================================================================
KLIMAKUPON.HU — JETSMARTFILTERS "CHECKBOXES FILTER" WIDGET CSS
Fájl: 06-jet-checkboxes-filter.css Blokkok: 06.0 – 06.4
HOVA: EZ A WIDGET SAJÁT Egyéni CSS-e — NEM globális!
A "Checkboxes Filter" widget kijelölve → Stílus vagy Haladó
fül → Egyéni CSS → illeszd be, a ".elementor-284 .elementor-element.elementor-element-4bfeba3" szót ne cseréld le.
FONTOS: ezt minden márka / energiaosztály / kW checkbox-widgetre
külön be kell illesztened (mindegyik saját widget-példány), mivel
widget-szintű CSS-ről van szó, nem globálisról.
A class-nevek a JetSmartFilters (Crocoblock) SZOKVÁNYOS, dokumentált
markupját követik (.jet-checkboxes-list / __item / __label stb.).
Ha nálad a widget verziója más class-t ad ki, és a stílus nem fog
meg, küldd át a checkbox-lista HTML-jét (DevTools → Inspect →
Copy outerHTML), és pontosítom.
================================================================ */
.elementor-284 .elementor-element.elementor-element-4bfeba3{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-white:#FFFFFF;
--kph-blue-050:#E6F2FF;
--kph-line:#E4EAF1;
}
/* ================================================
06.1 — LISTA-KONTÉNER
================================================ */
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list{
display:flex !important;
flex-direction:column !important;
gap:2px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
font-family:var(--kph-font) !important;
}
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__item{
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
/* ================================================
06.2 — SOR (label + jelölőnégyzet + szöveg + darabszám)
================================================ */
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__label{
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:8px 6px !important;
border-radius:8px !important;
cursor:pointer !important;
transition:background-color .15s ease;
}
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__label:hover{
background:var(--kph-blue-050) !important;
}
/* Natív checkbox — ha a widget nem rajzol saját indikátort, ez a
fallback stílus, az oldal többi checkboxával egyező kék színnel */
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__control{
width:17px !important; height:17px !important;
margin:0 !important; flex:0 0 auto !important;
accent-color:var(--kph-primary) !important;
cursor:pointer !important;
}
/* Ha a widget saját rajzolt indikátort ad (span.control-indicator) —
ez veszi át a natív checkbox helyét vizuálisan */
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__control-indicator{
width:17px !important; height:17px !important;
flex:0 0 auto !important;
border:1.5px solid var(--kph-line) !important;
border-radius:5px !important;
background:var(--kph-white) !important;
transition:background-color .15s ease, border-color .15s ease;
}
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__control:checked ~ .jet-checkboxes-list__control-indicator,
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__control-wrap input:checked ~ .jet-checkboxes-list__control-indicator{
background:var(--kph-primary) !important;
border-color:var(--kph-primary) !important;
}
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__label-text{
flex:1 1 auto !important;
font-size:14px !important; font-weight:500 !important;
color:var(--kph-ink) !important;
line-height:1.3 !important;
}
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__counter,
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__count{
font-size:12.5px !important; font-weight:400 !important;
color:var(--kph-body) !important;
}
/* ================================================
06.3 — KIVÁLASZTOTT ÁLLAPOT (aktív szűrő kiemelése)
================================================ */
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__item.jet-active .jet-checkboxes-list__label,
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__item--active .jet-checkboxes-list__label{
background:var(--kph-blue-050) !important;
}
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__item.jet-active .jet-checkboxes-list__label-text,
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__item--active .jet-checkboxes-list__label-text{
color:var(--kph-primary) !important;
font-weight:700 !important;
}
/* ================================================
06.4 — SAJÁT SZŰRŐ-CÍMKE (ha a widget maga adja ki, pl. "Márka")
================================================ */
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-filter-label,
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-smart-filters-heading{
margin:0 0 12px !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
/* ================================================
06.5 — REZSPONZÍV
================================================ */
@media (max-width:600px){
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__label{ padding:9px 6px !important; }
.elementor-284 .elementor-element.elementor-element-4bfeba3 .jet-checkboxes-list__label-text{ font-size:14.5px !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a04c70e *//* ================================================================
KLIMAKUPON.HU — SZŰRŐ FLEXBOX KONTÉNER CSS
Fájl: 07-filter-flexbox.css Blokkok: 07.0 – 07.3
HOVA: GLOBÁLIS — Megjelenés → Testreszabás → További CSS
(ugyanoda, ahol a 01-header.css / 02-footer.css /
03-klimak-hero.css / 04-klimak-filter.css is van)
ELŐFELTÉTEL: a Flexbox konténer widget-szintű "Egyéni CSS" mezője
nálad inaktív/nem kattintható (Elementor-bogár, class nélküli
Flexboxnál gyakran előfordul) — ezért ezúttal NEM azt használjuk.
Helyette:
1) Jelöld ki a szűrőket összefogó Flexbox konténert
2) A bal panel tetején "Osztályok" mezőbe írd be: cst-kp-filter-flex
3) Ezt a fájlt másold a globális "További CSS"-be
================================================================ */
.cst-kp-filter-flex{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-white:#FFFFFF;
--kph-line:#E4EAF1;
display:flex !important;
flex-direction:column !important;
gap:22px !important;
padding:22px 20px 26px !important;
background:var(--kph-white) !important;
border:1px solid var(--kph-line) !important;
border-radius:16px !important;
font-family:var(--kph-font) !important;
}
/* ================================================
07.1 — SZŰRŐCSOPORTOK KÖZÖTTI ELVÁLASZTÓ
Minden közvetlen gyermek (egy-egy szűrő-blokk: cím + checkbox-lista)
közé vékony vonalat rak, az első elé nem.
================================================ */
.cst-kp-filter-flex > *{
padding-top:20px !important;
border-top:1px solid var(--kph-line) !important;
}
.cst-kp-filter-flex > *:first-child{
padding-top:0 !important;
border-top:none !important;
}
/* ================================================
07.2 — CÍMEK EGYSÉGESÍTÉSE
A szűrők fölötti Heading widgetek (pl. "Márka", "Hűtőteljesítmény")
jelenleg a téma alap H-stílusát öröklik (a screenshoton barnás,
szerif-es) — itt felülírjuk az oldal design-rendszerére.
================================================ */
.cst-kp-filter-flex .elementor-heading-title{
margin:0 0 14px !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
/* ================================================
07.3 — REZSPONZÍV
================================================ */
@media (max-width:1024px){
.cst-kp-filter-flex{ padding:20px 16px 22px !important; gap:18px !important; }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-46654d4 *//* ================================================================
KLIMAKUPON.HU — "SZŰRŐK" GOMB (Off-Canvas megnyitó)
Fájl: 11-filter-mobile-button.css Blokkok: 11.0
HOVA: GLOBÁLIS — Megjelenés → Testreszabás → További CSS
(a többi számozott CSS mellé, hozzáfűzve)
ELŐFELTÉTEL: a gombon az Osztályok mezőben rajta van a "filter" class.
A láthatóságot (mobil/desktop) és az Off-Canvas beállítást magad
intézed — ez a fájl csak a gomb KINÉZETÉT adja.
MEGJEGYZÉS: a screenshoton látszó zöld belső doboz azért jött ki,
mert az Elementor Button widget saját alap "Style" beállítása
(zöld háttér) az .elementor-button elemen ül, a .filter osztály
pedig egy azt körülvevő, annál szélesebb elemen — ezért látszott
kívül kék, belül zöld "doboz a dobozban" hatás. Lent mindkét
lehetséges elhelyezkedésre írok stílust, hogy biztosan egységes
legyen, bárhogy is épül fel nálad a widget.
================================================================ */
.filter,
.filter .elementor-button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:9px !important;
width:100% !important;
height:48px !important;
padding:0 22px !important;
margin:0 !important;
font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
font-size:14.5px !important; font-weight:700 !important;
line-height:1 !important;
color:#FFFFFF !important;
background:#0D6EFD !important;
border:none !important;
border-radius:999px !important;
box-shadow:0 14px 28px -14px rgba(13,110,253,.6);
cursor:pointer !important;
transition:background-color .18s ease, transform .18s ease;
}
.filter:hover,
.filter:focus-visible,
.filter .elementor-button:hover,
.filter .elementor-button:focus-visible{
background:#0B5ED7 !important;
color:#FFFFFF !important;
transform:translateY(-1px);
}
/* Ha a "filter" osztály a widget KÜLSŐ konténerén van, a belső
.elementor-button már a fenti szabály miatt maga a teljes pill —
ilyenkor a külső .filter-t "átlátszóvá" tesszük, hogy ne adjon
dupla hátteret/keretet */
.filter:has(.elementor-button){
background:transparent !important;
box-shadow:none !important;
padding:0 !important;
height:auto !important;
}
/* Belső wrapper/szöveg elemek — háttér/szín nullázása, hogy ne
maradjon "doboz a dobozban" hatás semmilyen felépítésnél */
.filter .elementor-button-content-wrapper,
.filter .elementor-button-text{
background:transparent !important;
color:#FFFFFF !important;
font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
font-weight:700 !important;
display:inline-flex !important;
align-items:center !important;
gap:9px !important;
}
/* Ikon a gombban (ha van) */
.filter .elementor-button-icon,
.filter svg,
.filter i{
width:18px !important; height:18px !important;
color:#FFFFFF !important;
flex:0 0 auto !important;
}/* End custom CSS */
/* Start custom CSS for jet-smart-filters-active, class: .elementor-element-9d4cf8b *//* ================================================================
KLIMAKUPON.HU — JETSMARTFILTERS "ACTIVE FILTERS" WIDGET CSS
Fájl: 10-jet-active-filters-global.css Blokkok: 10.0 – 10.3
HOVA: GLOBÁLIS — Megjelenés → Testreszabás → További CSS
(a többi számozott CSS mellé, hozzáfűzve)
ELŐFELTÉTEL: a widget már megkapta az Osztályok mezőben a
"cst-kp-active-filters" osztályt (a te DevTools screenshotod
alapján ez már rajta is van).
A class-nevek a VALÓS, DevTools-ból ellenőrzött markupot követik:
.jet-smart-filters-active / .jet-active-filters → widget-wrapper
.jet-active-filters__list → lista-konténer (cím + chip-ek)
.jet-active-filters__title → "Aktív Szűrők" felirat
.jet-active-filter → egy chip (EGYES szám — nem __item!)
.jet-active-filter__val → a chip szövege, pl. "Midea"
.jet-active-filter__remove → a chip "×" eltávolító gombja
================================================================ */
.cst-kp-active-filters{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-white:#FFFFFF;
--kph-blue-050:#E6F2FF;
}
/* ================================================
10.1 — LISTA-KONTÉNER (cím + chipek egy sorban)
================================================ */
.cst-kp-active-filters .jet-active-filters__list{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
font-family:var(--kph-font) !important;
}
.cst-kp-active-filters .jet-active-filters__title{
margin:0 !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
/* ================================================
10.2 — EGY CHIP (.jet-active-filter)
================================================ */
.cst-kp-active-filters .jet-active-filter{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
margin:0 !important;
padding:6px 8px 6px 14px !important;
background:var(--kph-blue-050) !important;
border-radius:999px !important;
cursor:default !important;
}
.cst-kp-active-filters .jet-active-filter__val{
font-size:13px !important; font-weight:600 !important;
color:var(--kph-ink) !important;
line-height:1.3 !important;
}
.cst-kp-active-filters .jet-active-filter__remove{
display:flex !important; align-items:center !important; justify-content:center !important;
width:20px !important; height:20px !important; flex:0 0 auto !important;
border-radius:50% !important;
background:var(--kph-white) !important;
color:var(--kph-primary) !important;
font-size:12px !important; line-height:1 !important;
cursor:pointer !important;
transition:background-color .15s ease, color .15s ease;
}
.cst-kp-active-filters .jet-active-filter__remove:hover{
background:var(--kph-primary) !important;
color:var(--kph-white) !important;
}/* End custom CSS */
/* Start custom CSS for jet-smart-filters-remove-filters, class: .elementor-element-66a5b1f *//* ================================================================
KLIMAKUPON.HU — JETSMARTFILTERS "REMOVE FILTERS" WIDGET CSS
Fájl: 09-jet-remove-filters-global.css Blokkok: 09.0 – 09.1
HOVA: GLOBÁLIS — Megjelenés → Testreszabás → További CSS
(a többi számozott CSS mellé, hozzáfűzve)
ELŐFELTÉTEL: a widget már megkapta az Osztályok mezőben a
"cst-kp-remove-filters" osztályt (a te DevTools screenshotod
alapján ez már rajta is van).
A class-nevek most már a VALÓS, DevTools-ból ellenőrzött markupot
követik:
.jet-smart-filters-remove-filters → widget-wrapper
.jet-remove-all-filters → belső konténer
.jet-remove-all-filters__button → maga a "Szűrők törlése" gomb
================================================================ */
.cst-kp-remove-filters{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
}
.cst-kp-remove-filters .jet-remove-all-filters{
display:flex !important;
}
.cst-kp-remove-filters .jet-remove-all-filters__button{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
margin:0 !important; padding:0 !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
color:var(--kph-primary) !important;
background:none !important;
border:none !important;
text-decoration:underline !important;
text-underline-offset:2px !important;
cursor:pointer !important;
transition:color .15s ease;
}
.cst-kp-remove-filters .jet-remove-all-filters__button:hover{
color:var(--kph-ink) !important;
}/* End custom CSS */
/* Start custom CSS for jet-smart-filters-checkboxes, class: .elementor-element-255d41d *//* ================================================================
KLIMAKUPON.HU — JETSMARTFILTERS "CHECKBOXES FILTER" WIDGET CSS
Fájl: 06-jet-checkboxes-filter.css Blokkok: 06.0 – 06.4
HOVA: EZ A WIDGET SAJÁT Egyéni CSS-e — NEM globális!
A "Checkboxes Filter" widget kijelölve → Stílus vagy Haladó
fül → Egyéni CSS → illeszd be, a ".elementor-284 .elementor-element.elementor-element-255d41d" szót ne cseréld le.
FONTOS: ezt minden márka / energiaosztály / kW checkbox-widgetre
külön be kell illesztened (mindegyik saját widget-példány), mivel
widget-szintű CSS-ről van szó, nem globálisról.
A class-nevek a JetSmartFilters (Crocoblock) SZOKVÁNYOS, dokumentált
markupját követik (.jet-checkboxes-list / __item / __label stb.).
Ha nálad a widget verziója más class-t ad ki, és a stílus nem fog
meg, küldd át a checkbox-lista HTML-jét (DevTools → Inspect →
Copy outerHTML), és pontosítom.
================================================================ */
.elementor-284 .elementor-element.elementor-element-255d41d{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-white:#FFFFFF;
--kph-blue-050:#E6F2FF;
--kph-line:#E4EAF1;
}
/* ================================================
06.1 — LISTA-KONTÉNER
================================================ */
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list{
display:flex !important;
flex-direction:column !important;
gap:2px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
font-family:var(--kph-font) !important;
}
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__item{
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
/* ================================================
06.2 — SOR (label + jelölőnégyzet + szöveg + darabszám)
================================================ */
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__label{
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:8px 6px !important;
border-radius:8px !important;
cursor:pointer !important;
transition:background-color .15s ease;
}
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__label:hover{
background:var(--kph-blue-050) !important;
}
/* Natív checkbox — ha a widget nem rajzol saját indikátort, ez a
fallback stílus, az oldal többi checkboxával egyező kék színnel */
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__control{
width:17px !important; height:17px !important;
margin:0 !important; flex:0 0 auto !important;
accent-color:var(--kph-primary) !important;
cursor:pointer !important;
}
/* Ha a widget saját rajzolt indikátort ad (span.control-indicator) —
ez veszi át a natív checkbox helyét vizuálisan */
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__control-indicator{
width:17px !important; height:17px !important;
flex:0 0 auto !important;
border:1.5px solid var(--kph-line) !important;
border-radius:5px !important;
background:var(--kph-white) !important;
transition:background-color .15s ease, border-color .15s ease;
}
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__control:checked ~ .jet-checkboxes-list__control-indicator,
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__control-wrap input:checked ~ .jet-checkboxes-list__control-indicator{
background:var(--kph-primary) !important;
border-color:var(--kph-primary) !important;
}
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__label-text{
flex:1 1 auto !important;
font-size:14px !important; font-weight:500 !important;
color:var(--kph-ink) !important;
line-height:1.3 !important;
}
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__counter,
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__count{
font-size:12.5px !important; font-weight:400 !important;
color:var(--kph-body) !important;
}
/* ================================================
06.3 — KIVÁLASZTOTT ÁLLAPOT (aktív szűrő kiemelése)
================================================ */
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__item.jet-active .jet-checkboxes-list__label,
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__item--active .jet-checkboxes-list__label{
background:var(--kph-blue-050) !important;
}
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__item.jet-active .jet-checkboxes-list__label-text,
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__item--active .jet-checkboxes-list__label-text{
color:var(--kph-primary) !important;
font-weight:700 !important;
}
/* ================================================
06.4 — SAJÁT SZŰRŐ-CÍMKE (ha a widget maga adja ki, pl. "Márka")
================================================ */
.elementor-284 .elementor-element.elementor-element-255d41d .jet-filter-label,
.elementor-284 .elementor-element.elementor-element-255d41d .jet-smart-filters-heading{
margin:0 0 12px !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
/* ================================================
06.5 — REZSPONZÍV
================================================ */
@media (max-width:600px){
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__label{ padding:9px 6px !important; }
.elementor-284 .elementor-element.elementor-element-255d41d .jet-checkboxes-list__label-text{ font-size:14.5px !important; }
}/* End custom CSS */
/* Start custom CSS for jet-smart-filters-checkboxes, class: .elementor-element-bcd892e *//* ================================================================
KLIMAKUPON.HU — JETSMARTFILTERS "CHECKBOXES FILTER" WIDGET CSS
Fájl: 06-jet-checkboxes-filter.css Blokkok: 06.0 – 06.4
HOVA: EZ A WIDGET SAJÁT Egyéni CSS-e — NEM globális!
A "Checkboxes Filter" widget kijelölve → Stílus vagy Haladó
fül → Egyéni CSS → illeszd be, a ".elementor-284 .elementor-element.elementor-element-bcd892e" szót ne cseréld le.
FONTOS: ezt minden márka / energiaosztály / kW checkbox-widgetre
külön be kell illesztened (mindegyik saját widget-példány), mivel
widget-szintű CSS-ről van szó, nem globálisról.
A class-nevek a JetSmartFilters (Crocoblock) SZOKVÁNYOS, dokumentált
markupját követik (.jet-checkboxes-list / __item / __label stb.).
Ha nálad a widget verziója más class-t ad ki, és a stílus nem fog
meg, küldd át a checkbox-lista HTML-jét (DevTools → Inspect →
Copy outerHTML), és pontosítom.
================================================================ */
.elementor-284 .elementor-element.elementor-element-bcd892e{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-white:#FFFFFF;
--kph-blue-050:#E6F2FF;
--kph-line:#E4EAF1;
}
/* ================================================
06.1 — LISTA-KONTÉNER
================================================ */
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list{
display:flex !important;
flex-direction:column !important;
gap:2px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
font-family:var(--kph-font) !important;
}
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__item{
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
/* ================================================
06.2 — SOR (label + jelölőnégyzet + szöveg + darabszám)
================================================ */
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__label{
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:8px 6px !important;
border-radius:8px !important;
cursor:pointer !important;
transition:background-color .15s ease;
}
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__label:hover{
background:var(--kph-blue-050) !important;
}
/* Natív checkbox — ha a widget nem rajzol saját indikátort, ez a
fallback stílus, az oldal többi checkboxával egyező kék színnel */
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__control{
width:17px !important; height:17px !important;
margin:0 !important; flex:0 0 auto !important;
accent-color:var(--kph-primary) !important;
cursor:pointer !important;
}
/* Ha a widget saját rajzolt indikátort ad (span.control-indicator) —
ez veszi át a natív checkbox helyét vizuálisan */
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__control-indicator{
width:17px !important; height:17px !important;
flex:0 0 auto !important;
border:1.5px solid var(--kph-line) !important;
border-radius:5px !important;
background:var(--kph-white) !important;
transition:background-color .15s ease, border-color .15s ease;
}
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__control:checked ~ .jet-checkboxes-list__control-indicator,
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__control-wrap input:checked ~ .jet-checkboxes-list__control-indicator{
background:var(--kph-primary) !important;
border-color:var(--kph-primary) !important;
}
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__label-text{
flex:1 1 auto !important;
font-size:14px !important; font-weight:500 !important;
color:var(--kph-ink) !important;
line-height:1.3 !important;
}
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__counter,
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__count{
font-size:12.5px !important; font-weight:400 !important;
color:var(--kph-body) !important;
}
/* ================================================
06.3 — KIVÁLASZTOTT ÁLLAPOT (aktív szűrő kiemelése)
================================================ */
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__item.jet-active .jet-checkboxes-list__label,
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__item--active .jet-checkboxes-list__label{
background:var(--kph-blue-050) !important;
}
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__item.jet-active .jet-checkboxes-list__label-text,
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__item--active .jet-checkboxes-list__label-text{
color:var(--kph-primary) !important;
font-weight:700 !important;
}
/* ================================================
06.4 — SAJÁT SZŰRŐ-CÍMKE (ha a widget maga adja ki, pl. "Márka")
================================================ */
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-filter-label,
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-smart-filters-heading{
margin:0 0 12px !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
/* ================================================
06.5 — REZSPONZÍV
================================================ */
@media (max-width:600px){
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__label{ padding:9px 6px !important; }
.elementor-284 .elementor-element.elementor-element-bcd892e .jet-checkboxes-list__label-text{ font-size:14.5px !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-05eeccd *//* ================================================================
KLIMAKUPON.HU — SZŰRŐ FLEXBOX KONTÉNER CSS
Fájl: 07-filter-flexbox.css Blokkok: 07.0 – 07.3
HOVA: GLOBÁLIS — Megjelenés → Testreszabás → További CSS
(ugyanoda, ahol a 01-header.css / 02-footer.css /
03-klimak-hero.css / 04-klimak-filter.css is van)
ELŐFELTÉTEL: a Flexbox konténer widget-szintű "Egyéni CSS" mezője
nálad inaktív/nem kattintható (Elementor-bogár, class nélküli
Flexboxnál gyakran előfordul) — ezért ezúttal NEM azt használjuk.
Helyette:
1) Jelöld ki a szűrőket összefogó Flexbox konténert
2) A bal panel tetején "Osztályok" mezőbe írd be: cst-kp-filter-flex
3) Ezt a fájlt másold a globális "További CSS"-be
================================================================ */
.cst-kp-filter-flex{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-white:#FFFFFF;
--kph-line:#E4EAF1;
display:flex !important;
flex-direction:column !important;
gap:22px !important;
padding:22px 20px 26px !important;
background:var(--kph-white) !important;
border:1px solid var(--kph-line) !important;
border-radius:16px !important;
font-family:var(--kph-font) !important;
}
/* ================================================
07.1 — SZŰRŐCSOPORTOK KÖZÖTTI ELVÁLASZTÓ
Minden közvetlen gyermek (egy-egy szűrő-blokk: cím + checkbox-lista)
közé vékony vonalat rak, az első elé nem.
================================================ */
.cst-kp-filter-flex > *{
padding-top:20px !important;
border-top:1px solid var(--kph-line) !important;
}
.cst-kp-filter-flex > *:first-child{
padding-top:0 !important;
border-top:none !important;
}
/* ================================================
07.2 — CÍMEK EGYSÉGESÍTÉSE
A szűrők fölötti Heading widgetek (pl. "Márka", "Hűtőteljesítmény")
jelenleg a téma alap H-stílusát öröklik (a screenshoton barnás,
szerif-es) — itt felülírjuk az oldal design-rendszerére.
================================================ */
.cst-kp-filter-flex .elementor-heading-title{
margin:0 0 14px !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
/* ================================================
07.3 — REZSPONZÍV
================================================ */
@media (max-width:1024px){
.cst-kp-filter-flex{ padding:20px 16px 22px !important; gap:18px !important; }
}/* End custom CSS */
/* Start custom CSS for woocommerce-products, class: .elementor-element-b29026c *//* ================================================================
KLIMAKUPON.HU — WOOCOMMERCE PRODUCTS WIDGET CSS
Fájl: 05-woo-products.css Blokkok: 05.0 – 05.9
HOVA: EZ A WIDGET SAJÁT Egyéni CSS-e — NEM globális!
Elementor → az adott "Products" widget kijelölve →
Haladó fül → Egyéni CSS (Custom CSS) → illeszd be teljes
egészében, a ".elementor-284 .elementor-element.elementor-element-b29026c" szót NE cseréld le semmire, azt az
Elementor automatikusan lefordítja az adott widget egyedi
azonosítójára fordításkor.
FONTOS — ezért widget-szintű, nem globális:
- Csak arra az EGY widget-példányra hat, ahova bemásolod (a
főoldali "Népszerű klímák" blokkra). A bolt/kategória oldalak
saját WooCommerce archívum-sablonját ez NEM érinti.
- Ha ugyanezt a kártyadesignt egy másik oldalon/widgetben
(pl. kategóriaoldal Products widgetjén) is szeretnéd, ezt a
kódot MÁSOLD BE oda is, a widget saját Egyéni CSS mezőjébe —
nincs egyetlen közös hely, de cserébe semmi máshol nem törik el.
- Ha később mégis globálisan (minden Products widgetre / bolt
archívumra) szeretnéd, szólj, és átalakítom Testreszabás →
További CSS-be való globális verzióvá.
================================================================ */
.elementor-284 .elementor-element.elementor-element-b29026c{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-primary-dark:#0B5ED7;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-white:#FFFFFF;
--kph-line:#E4EAF1;
--kph-danger:#E63946;
--kph-radius:18px;
}
.elementor-284 .elementor-element.elementor-element-b29026c *{ box-sizing:border-box; }
/* ================================================
05.1 — RÁCS (ul.products)
Felülírja a WooCommerce inline "columns-X" logikáját egy
saját, reszponzív CSS Griddel.
================================================ */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products{
display:grid !important;
grid-template-columns:repeat(4, minmax(0,1fr)) !important;
gap:24px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
font-family:var(--kph-font) !important;
}
/* A WooCommerce alapból margint/float-ot rak az li-kre — nullázzuk,
mert a Grid gap már megadja a térközt */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product{
float:none !important;
width:100% !important;
margin:0 !important;
}
/* ================================================
05.2 — KÁRTYA (li.product)
================================================ */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product{
position:relative !important;
display:flex !important;
flex-direction:column !important;
background:var(--kph-white) !important;
border:1px solid var(--kph-line) !important;
border-radius:var(--kph-radius) !important;
padding:18px 18px 76px !important; /* alul hely a lebegő kosár-gombnak (05.7) */
overflow:hidden !important;
transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product:hover{
border-color:transparent !important;
box-shadow:0 24px 48px -24px rgba(11,45,91,.28);
transform:translateY(-4px);
}
/* A teljes kártyát linkelő (kép + cím + ár) — ne örököljön
semmilyen alap alulvonalat/színt */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product > a:not(.add_to_cart_button){
display:flex !important;
flex-direction:column !important;
color:inherit !important;
text-decoration:none !important;
}
/* Termékkép */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product img{
width:100% !important;
height:auto !important;
aspect-ratio:1/1 !important;
object-fit:contain !important;
margin:0 0 14px !important;
border-radius:12px !important;
}
/* ================================================
05.3 — AKCIÓS BADGE (.onsale)
A WooCommerce a "Sale!" span-t az ELŐTT, a li.product
közvetlen gyermekeként adja ki — ezért tudjuk abszolút
pozícionálni a kártya jobb felső sarkába.
================================================ */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .onsale{
position:absolute !important;
top:14px !important; right:14px !important; left:auto !important; /* WC alapból left:0-t ad, felülírjuk */
z-index:2 !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
min-width:0 !important; height:auto !important;
margin:0 !important; padding:6px 14px !important;
font-family:var(--kph-font) !important;
font-size:12px !important; font-weight:700 !important; letter-spacing:.02em !important;
line-height:1.4 !important;
color:var(--kph-white) !important;
background:var(--kph-danger) !important;
border-radius:999px !important;
box-shadow:0 8px 16px -6px rgba(230,57,70,.5);
}
/* FIGYELEM: a WooCommerce alapból csak a fix "Sale!" szöveget adja ki
a badge-be — a konkrét "-10%" / "Új" feliratok CSS-ből NEM
elérhetők, ehhez egy kis PHP snippet kell (lásd a chat-válasz). */
/* ================================================
05.4 — CÍM
================================================ */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .woocommerce-loop-product__title{
margin:0 0 8px !important;
font-size:15.5px !important; font-weight:700 !important; line-height:1.4 !important;
color:var(--kph-ink) !important;
text-decoration:none !important;
/* NEM vágjuk le — a teljes terméknév látszik, ahány sorra szüksége van;
a kártya (és vele a grid sor) magassága ehhez igazodik. */
display:block !important;
overflow:visible !important;
white-space:normal !important;
}
/* ================================================
05.5 — ÁR (régi ár áthúzva + új ár)
================================================ */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .price{
margin-top:auto !important; /* leszorítja az ár sort a kártya aljára, a gomb fölé */
display:flex !important; align-items:baseline !important; flex-wrap:wrap !important; gap:4px 8px !important;
/* jobb oldali hely a lebegő kör kosár-gombnak (05.7), hogy az ár
szövege ne csússzon alá / ne vágódjon le keskeny kártyáknál */
padding-right:52px !important;
font-family:var(--kph-font) !important;
}
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .price del{
font-size:14px !important; font-weight:500 !important;
color:var(--kph-body) !important;
opacity:1 !important; /* felülírja a WC alap 0.5 opacity-jét */
}
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .price del .woocommerce-Price-amount{
color:var(--kph-body) !important;
}
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .price ins{
text-decoration:none !important;
font-size:21px !important; font-weight:800 !important;
color:var(--kph-primary) !important;
}
/* A WooCommerce a / elemnek
gyakran saját (a témából örökölt) színt ad — enélkül a fenti .price ins
szín nem öröklődne le rá, ezért itt is kényszerítjük ugyanarra a kékre */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .price ins .woocommerce-Price-amount{
color:var(--kph-primary) !important;
}
/* Nem akciós termék — nincs /, csak simán a price span */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .price > .woocommerce-Price-amount{
font-size:21px !important; font-weight:800 !important;
color:var(--kph-ink) !important;
}
/* ================================================
05.6 — ÉRTÉKELÉS (star-rating) — elrejtve, mert a referencia
design nem tartalmaz csillagos értékelést a kártyákon.
Ha mégis kell, töröld ezt a blokkot.
================================================ */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .star-rating{
display:none !important;
}
/* ================================================
05.7 — KOSÁRBA GOMB (kör alakú, ikonos)
A WC alapból szöveges gombot ad (.add_to_cart_button), ami a
li.product-on BELÜL, de az .price-szal nem testvérviszonyban áll
a linken belül — ezért abszolút pozícióval illesztjük az ár mellé,
a kártya jobb alsó sarkába.
================================================ */
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .add_to_cart_button{
position:absolute !important;
right:18px !important; bottom:18px !important;
z-index:3 !important;
display:flex !important; align-items:center !important; justify-content:center !important;
width:44px !important; height:44px !important; padding:0 !important;
/* a gomb szövegét ("Kosárba teszem") vizuálisan elrejtjük,
de a képernyőolvasók számára megmarad */
font-size:0 !important; line-height:0 !important;
color:transparent !important;
background:var(--kph-primary) !important;
border:none !important; border-radius:50% !important;
box-shadow:0 10px 20px -8px rgba(13,110,253,.55);
transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.elementor-284 .elementor-element.elementor-element-b29026c ul.products li.product .add_to_cart_button:hover{
background:var(--kph-primary-dark) !important;
transform:translateY(-2px) scale(1.04);
box-shadow:0 14px 26px -8px rgba(13,110,253,.6);
}
/* Bevásárlókocsi ikon — inline SVG data-URI háttérképként, mert a
natív gomb markupjába nem tudunk