.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.woocommerce .elementor-widget-woocommerce-product-price .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-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-319 .elementor-element.elementor-element-ab5c7d4{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-319 .elementor-element.elementor-element-ab5c7d4 .cart button, .elementor-319 .elementor-element.elementor-element-ab5c7d4 .cart .button{transition:all 0.2s;}.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .qty{transition:all 0.2s;}.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-319 .elementor-element.elementor-element-699b538.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-319 .elementor-element.elementor-element-699b538.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-319 .elementor-element.elementor-element-699b538.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-319 .elementor-element.elementor-element-699b538.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-breadcrumb, class: .elementor-element-ab100a0 *//* ================================================================
KLIMAKUPON.HU — WOOCOMMERCE BREADCRUMBS SZERKESZTÉSE WIDGET CSS
Elementor: az adott widget (pl. terméklap fölötti breadcrumb sáv)
Haladó → Egyéni CSS mezőjébe illesztendő.
A ".elementor-319 .elementor-element.elementor-element-ab100a0" kulcsszót Elementor automatikusan lecseréli a widget
egyedi azonosítójára.
HA A WIDGET SAJÁT EGYÉNI CSS MEZŐJE NEM KATTINTHATÓ / INAKTÍV
(ahogy több más widgetnél is előfordult ennél a projektnél):
adj a widgetnek egy CSS osztályt a "Haladó → Osztályok" mezőben
(pl. cst-kp-bc), majd ezt a fájlt ".elementor-319 .elementor-element.elementor-element-ab100a0" helyett arra az
osztályra átírva illeszd be a globális stíluslapba
(Megjelenés → Testreszabás → További CSS).
================================================================ */
.elementor-319 .elementor-element.elementor-element-ab100a0{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-line:#E4EAF1;
display:block !important;
font-family:var(--kph-font) !important;
font-size:13.5px !important;
font-weight:600 !important;
line-height:1.6 !important;
letter-spacing:.01em !important;
color:var(--kph-body) !important;
margin:0 0 22px !important;
padding:0 !important;
}
/* Minden link (a jelenlegi, nem-link elem kivételével) */
.elementor-319 .elementor-element.elementor-element-ab100a0 a{
color:var(--kph-primary) !important;
text-decoration:none !important;
transition:color .15s ease !important;
}
.elementor-319 .elementor-element.elementor-element-ab100a0 a:hover{
color:var(--kph-ink) !important;
text-decoration:underline !important;
}
/* Az utolsó (aktuális, nem kattintható) elem — vastagabb, sötétebb */
.elementor-319 .elementor-element.elementor-element-ab100a0 span:last-child,
.elementor-319 .elementor-element.elementor-element-ab100a0 a:last-child{
color:var(--kph-ink) !important;
font-weight:700 !important;
}
/* A WooCommerce " / " elválasztó karaktere kicsit halványabb legyen */
.elementor-319 .elementor-element.elementor-element-ab100a0 .breadcrumb-separator,
.elementor-319 .elementor-element.elementor-element-ab100a0 .delimiter{
margin:0 6px !important;
color:var(--kph-line) !important;
font-weight:400 !important;
}
/* Hosszú termékneveknél (utolsó elem) ne törje szét csúnyán a sort */
.elementor-319 .elementor-element.elementor-element-ab100a0{
overflow-wrap:break-word !important;
word-break:break-word !important;
}
/* Tablet */
@media (max-width:1024px){
.elementor-319 .elementor-element.elementor-element-ab100a0{
font-size:13px !important;
margin-bottom:18px !important;
}
}
/* Mobil — hosszú termékút (Kezdőlap / Kategória / Alkategória / Terméknév)
könnyen tördelhető legyen, ne lógjon ki a konténerből */
@media (max-width:767px){
.elementor-319 .elementor-element.elementor-element-ab100a0{
font-size:12px !important;
line-height:1.7 !important;
margin-bottom:16px !important;
white-space:normal !important;
}
.elementor-319 .elementor-element.elementor-element-ab100a0 .breadcrumb-separator,
.elementor-319 .elementor-element.elementor-element-ab100a0 .delimiter{
margin:0 4px !important;
}
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-images, class: .elementor-element-23eb026 *//* ================================================================
KLIMAKUPON.HU — PRODUCT IMAGES SZERKESZTÉSE WIDGET CSS
Elementor: a termékoldal galéria widgetje (fő kép + bélyegképek,
WooCommerce natív "woocommerce-product-gallery" markup).
Haladó → Egyéni CSS mezőjébe illesztendő.
A ".elementor-319 .elementor-element.elementor-element-23eb026" kulcsszót Elementor automatikusan lecseréli a widget
egyedi azonosítójára.
HA A WIDGET SAJÁT EGYÉNI CSS MEZŐJE NEM KATTINTHATÓ / INAKTÍV:
adj a widgetnek egy osztályt (pl. cst-kp-pgal) a "Haladó →
Osztályok" mezőben, és ezt a fájlt ".elementor-319 .elementor-element.elementor-element-23eb026" helyett arra az
osztályra átírva illeszd a globális stíluslapba (Megjelenés →
Testreszabás → További CSS).
================================================================ */
.elementor-319 .elementor-element.elementor-element-23eb026{
--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;
--kph-danger:#E63946;
font-family:var(--kph-font) !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 *{ box-sizing:border-box !important; }
/* --- Fő kép keret --- */
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__wrapper{
margin:0 !important;
border-radius:20px !important;
overflow:hidden !important;
border:1px solid var(--kph-line) !important;
background:var(--kph-white) !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__image{
border-radius:0 !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__image img{
width:100% !important;
height:auto !important;
aspect-ratio:1/1 !important;
object-fit:contain !important;
padding:24px !important;
background:var(--kph-white) !important;
transition:transform .25s ease !important;
}
/* --- Sale badge (Elementor/Woo alap "Akció" felirat felülírása, ha itt jelenik meg) --- */
.elementor-319 .elementor-element.elementor-element-23eb026 span.onsale{
top:16px !important; left:16px !important; right:auto !important;
min-width:0 !important; height:auto !important; line-height:1 !important;
padding:8px 14px !important; margin:0 !important;
border-radius:100px !important;
background:var(--kph-danger) !important;
color:var(--kph-white) !important;
font-family:var(--kph-font) !important;
font-size:12.5px !important; font-weight:700 !important;
text-transform:uppercase !important; letter-spacing:.03em !important;
box-shadow:0 10px 22px -10px rgba(230,57,70,.6) !important;
}
/* --- Nagyítás (zoom) ikon / lightbox trigger --- */
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__trigger{
top:16px !important; right:16px !important; left:auto !important;
width:40px !important; height:40px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
background:var(--kph-white) !important;
border:1px solid var(--kph-line) !important;
border-radius:50% !important;
box-shadow:0 8px 18px -10px rgba(11,45,91,.25) !important;
opacity:1 !important;
transition:border-color .2s ease, transform .2s ease !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__trigger:hover{
border-color:var(--kph-primary) !important;
transform:scale(1.06) !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__trigger::before{
color:var(--kph-ink) !important;
}
/* --- Flexslider nyilak (ha aktív a téma slider módja) --- */
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-direction-nav a{
width:38px !important; height:38px !important;
background:var(--kph-white) !important;
border:1px solid var(--kph-line) !important;
border-radius:50% !important;
box-shadow:0 8px 18px -10px rgba(11,45,91,.25) !important;
opacity:1 !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-direction-nav a:before{
color:var(--kph-ink) !important;
font-size:15px !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-direction-nav a.flex-prev{ left:14px !important; }
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-direction-nav a.flex-next{ right:14px !important; }
/* --- Bélyegképek (thumbnails) --- */
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails{
display:flex !important;
flex-wrap:wrap !important;
gap:12px !important;
margin:16px 0 0 !important;
padding:0 !important;
list-style:none !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav li,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails li{
margin:0 !important;
width:calc(25% - 9px) !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav img,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails img{
display:block !important;
width:100% !important;
aspect-ratio:1/1 !important;
object-fit:contain !important;
padding:8px !important;
background:var(--kph-white) !important;
border:1.5px solid var(--kph-line) !important;
border-radius:12px !important;
cursor:pointer !important;
opacity:1 !important;
transition:border-color .2s ease, box-shadow .2s ease !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav img:hover,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails img:hover{
border-color:var(--kph-primary) !important;
}
/* Aktív / kijelölt bélyegkép */
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav li.flex-active-slide img,
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav img.flex-active,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails li.flex-active-slide img{
border-color:var(--kph-primary) !important;
box-shadow:0 0 0 2px var(--kph-blue-050) !important;
}
/* Tablet */
@media (max-width:1024px){
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__image img{ padding:18px !important; }
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav li,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails li{
width:calc(20% - 10px) !important;
}
}
/* Mobil */
@media (max-width:767px){
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__wrapper{ border-radius:16px !important; }
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__image img{ padding:14px !important; }
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__trigger{
width:36px !important; height:36px !important;
top:12px !important; right:12px !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 span.onsale{
top:12px !important; left:12px !important;
padding:6px 12px !important; font-size:11.5px !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-direction-nav a{ width:32px !important; height:32px !important; }
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails{
gap:8px !important;
margin-top:12px !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav li,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails li{
width:calc(25% - 6px) !important;
}
.elementor-319 .elementor-element.elementor-element-23eb026 .flex-control-nav img,
.elementor-319 .elementor-element.elementor-element-23eb026 .woocommerce-product-gallery__thumbnails img{
border-radius:10px !important;
padding:6px !important;
}
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-title, class: .elementor-element-bef9dab *//* ================================================================
KLIMAKUPON.HU — PRODUCT TITLE SZERKESZTÉSE WIDGET CSS
Elementor: a termékoldal terméknév (H1) widgetje.
Haladó → Egyéni CSS mezőjébe illesztendő.
A ".elementor-319 .elementor-element.elementor-element-bef9dab" kulcsszót Elementor automatikusan lecseréli a widget
egyedi azonosítójára — ez a WRAPPER elemre kerül, ezért a tényleges
szöveget adó .product_title / h1 elemre KÜLÖN, explicit módon is
rá kell kötni a szabályokat, különben a WooCommerce/téma saját,
közvetlenül a h1-re írt színe/betűtípusa felülírja az öröklött
értéket.
================================================================ */
.elementor-319 .elementor-element.elementor-element-bef9dab,
.elementor-319 .elementor-element.elementor-element-bef9dab .product_title,
.elementor-319 .elementor-element.elementor-element-bef9dab h1.product_title,
.elementor-319 .elementor-element.elementor-element-bef9dab h1{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-ink:#0B2D5B;
font-family:var(--kph-font) !important;
font-weight:800 !important;
font-size:clamp(24px, 2.4vw, 32px) !important;
line-height:1.25 !important;
letter-spacing:-.01em !important;
color:var(--kph-ink) !important;
margin:0 0 10px !important;
overflow-wrap:break-word !important;
word-break:break-word !important;
}
/* Ha a cím linkbe (a) van csomagolva, azt is felül kell írni */
.elementor-319 .elementor-element.elementor-element-bef9dab a,
.elementor-319 .elementor-element.elementor-element-bef9dab .product_title a{
color:var(--kph-ink) !important;
text-decoration:none !important;
}
/* Tablet */
@media (max-width:1024px){
.elementor-319 .elementor-element.elementor-element-bef9dab,
.elementor-319 .elementor-element.elementor-element-bef9dab .product_title,
.elementor-319 .elementor-element.elementor-element-bef9dab h1.product_title,
.elementor-319 .elementor-element.elementor-element-bef9dab h1{
font-size:clamp(21px, 2.6vw, 26px) !important;
margin-bottom:8px !important;
}
}
/* Mobil — hosszú, technikai terméknevek (pl. "Kinghome Maximus
inverter 5,3 kW klíma szett KWH18AYDXD-K6DNA2A") ne törjenek
csúnyán, és ne foglaljanak el aránytalanul sok helyet */
@media (max-width:767px){
.elementor-319 .elementor-element.elementor-element-bef9dab,
.elementor-319 .elementor-element.elementor-element-bef9dab .product_title,
.elementor-319 .elementor-element.elementor-element-bef9dab h1.product_title,
.elementor-319 .elementor-element.elementor-element-bef9dab h1{
font-size:20px !important;
line-height:1.3 !important;
margin-bottom:8px !important;
}
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-price, class: .elementor-element-ccbcde7 *//* ================================================================
KLIMAKUPON.HU — PRODUCT PRICE SZERKESZTÉSE WIDGET CSS
Elementor: a termékoldal ár widgetje.
Haladó → Egyéni CSS mezőjébe illesztendő.
Ugyanaz a logika, mint a Product Title-nél: a ".elementor-319 .elementor-element.elementor-element-ccbcde7" csak a
WRAPPER-re kerül, ezért a tényleges ár-elemekre (p.price,
.woocommerce-Price-amount, del, ins, bdi) KÜLÖN, explicit módon is
rá kell kötni a szabályokat, különben a WooCommerce/téma saját
színe felülírja az öröklött értéket.
WooCommerce ár-markup (akciós terméknél):
...
... ← ezt NEM bántjuk
...
================================================================ */
/* --- Alap ár (nem akciós termék) --- */
.elementor-319 .elementor-element.elementor-element-ccbcde7,
.elementor-319 .elementor-element.elementor-element-ccbcde7 .price,
.elementor-319 .elementor-element.elementor-element-ccbcde7 p.price,
.elementor-319 .elementor-element.elementor-element-ccbcde7 span.price{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-danger:#E63946;
display:flex !important;
flex-wrap:wrap !important;
align-items:baseline !important;
gap:4px 12px !important;
font-family:var(--kph-font) !important;
font-weight:800 !important;
font-size:clamp(26px, 2.6vw, 20px) !important;
line-height:1.2 !important;
letter-spacing:-.01em !important;
color:var(--kph-ink) !important;
margin:0 0 16px !important;
}
/* Az összeg + Ft szimbólum ugyanazt a színt/betűtípust kapja */
.elementor-319 .elementor-element.elementor-element-ccbcde7 .woocommerce-Price-amount,
.elementor-319 .elementor-element.elementor-element-ccbcde7 .woocommerce-Price-amount bdi,
.elementor-319 .elementor-element.elementor-element-ccbcde7 .woocommerce-Price-currencySymbol{
font-family:var(--kph-font) !important;
font-weight:inherit !important;
font-size:inherit !important;
color:inherit !important;
}
/* --- Akciós termék: eredeti (áthúzott) ár --- */
.elementor-319 .elementor-element.elementor-element-ccbcde7 del,
.elementor-319 .elementor-element.elementor-element-ccbcde7 .price del{
order:1 !important;
font-size:.55em !important;
font-weight:500 !important;
color:var(--kph-body) !important;
opacity:1 !important;
text-decoration:line-through !important;
text-decoration-thickness:1.5px !important;
}
.elementor-319 .elementor-element.elementor-element-ccbcde7 del .woocommerce-Price-amount,
.elementor-319 .elementor-element.elementor-element-ccbcde7 del bdi{
color:var(--kph-body) !important;
}
/* --- Akciós termék: új (akciós) ár — piros, mint az Akciók oldal --- */
.elementor-319 .elementor-element.elementor-element-ccbcde7 ins,
.elementor-319 .elementor-element.elementor-element-ccbcde7 .price ins{
order:2 !important;
text-decoration:none !important;
background:none !important;
font-weight:800 !important;
color:var(--kph-danger) !important;
}
.elementor-319 .elementor-element.elementor-element-ccbcde7 ins .woocommerce-Price-amount,
.elementor-319 .elementor-element.elementor-element-ccbcde7 ins bdi{
color:var(--kph-danger) !important;
}
/* Ár-tartomány (variálható termék: "120 000 Ft – 180 000 Ft") */
.elementor-319 .elementor-element.elementor-element-ccbcde7 .price > .woocommerce-Price-amount + .woocommerce-Price-amount{
margin-left:0 !important;
}
/* Tablet */
@media (max-width:1024px){
.elementor-319 .elementor-element.elementor-element-ccbcde7,
.elementor-319 .elementor-element.elementor-element-ccbcde7 .price,
.elementor-319 .elementor-element.elementor-element-ccbcde7 p.price,
.elementor-319 .elementor-element.elementor-element-ccbcde7 span.price{
font-size:clamp(24px, 3vw, 30px) !important;
margin-bottom:14px !important;
}
}
/* Mobil */
@media (max-width:767px){
.elementor-319 .elementor-element.elementor-element-ccbcde7,
.elementor-319 .elementor-element.elementor-element-ccbcde7 .price,
.elementor-319 .elementor-element.elementor-element-ccbcde7 p.price,
.elementor-319 .elementor-element.elementor-element-ccbcde7 span.price{
font-size:26px !important;
gap:2px 10px !important;
margin-bottom:12px !important;
}
.elementor-319 .elementor-element.elementor-element-ccbcde7 del,
.elementor-319 .elementor-element.elementor-element-ccbcde7 .price del{
font-size:.6em !important;
}
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-short-description, class: .elementor-element-347160d *//* ================================================================
KLIMAKUPON.HU — SHORT DESCRIPTION SZERKESZTÉSE WIDGET CSS
Elementor: a termékoldal rövid leírás widgetje (WooCommerce
"woocommerce_short_description" — jellemzően a cím/ár és az
"Kosárba" gomb közötti bekezdés/felsorolás).
Haladó → Egyéni CSS mezőjébe illesztendő.
A ".elementor-319 .elementor-element.elementor-element-347160d" kulcsszót Elementor automatikusan lecseréli a widget
egyedi azonosítójára. A wrapper MELLETT a belső elemekre (p, ul,
li, strong) is explicit rá van kötve a stílus, mert — ahogy a
Product Title widgetnél kiderült — a tényleges szöveget adó belső
elem felülírhatja az öröklött értéket.
================================================================ */
.elementor-319 .elementor-element.elementor-element-347160d{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-primary:#0D6EFD;
--kph-line:#E4EAF1;
font-family:var(--kph-font) !important;
}
.elementor-319 .elementor-element.elementor-element-347160d p,
.elementor-319 .elementor-element.elementor-element-347160d > *{
font-family:var(--kph-font) !important;
font-size:15px !important;
line-height:1.7 !important;
color:var(--kph-body) !important;
margin:0 0 14px !important;
}
.elementor-319 .elementor-element.elementor-element-347160d p:last-child,
.elementor-319 .elementor-element.elementor-element-347160d > *:last-child{ margin-bottom:0 !important; }
.elementor-319 .elementor-element.elementor-element-347160d strong,
.elementor-319 .elementor-element.elementor-element-347160d b{
color:var(--kph-ink) !important;
font-weight:700 !important;
}
/* Felsorolás (ha a rövid leírás pontokba van szedve) */
.elementor-319 .elementor-element.elementor-element-347160d ul{
list-style:none !important;
margin:0 0 4px !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
gap:10px !important;
}
.elementor-319 .elementor-element.elementor-element-347160d ul li{
position:relative !important;
padding-left:26px !important;
font-family:var(--kph-font) !important;
font-size:14.5px !important;
line-height:1.55 !important;
color:var(--kph-body) !important;
}
.elementor-319 .elementor-element.elementor-element-347160d ul li::before{
content:'';
position:absolute; left:0; top:5px;
width:16px; height:16px;
border-radius:50%;
background:var(--kph-blue-050, #E6F2FF);
box-shadow:inset 0 0 0 1px var(--kph-line);
}
.elementor-319 .elementor-element.elementor-element-347160d ul li::after{
content:'';
position:absolute; left:5px; top:9px;
width:6px; height:4px;
border-left:2px solid var(--kph-primary);
border-bottom:2px solid var(--kph-primary);
transform:rotate(-45deg);
}
/* Mobil */
@media (max-width:767px){
.elementor-319 .elementor-element.elementor-element-347160d p,
.elementor-319 .elementor-element.elementor-element-347160d > *{
font-size:14px !important;
line-height:1.6 !important;
margin-bottom:12px !important;
}
.elementor-319 .elementor-element.elementor-element-347160d ul li{
font-size:13.5px !important;
padding-left:24px !important;
}
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-ab5c7d4 *//* ================================================================
KLIMAKUPON.HU — ADD TO CART SZERKESZTÉSE WIDGET CSS
Elementor: a termékoldal "Kosárba" widgetje (WooCommerce natív
form.cart — mennyiség-választó + Kosárba gomb, egyszerű és
variálható terméknél is; készletjelző szöveg).
Haladó → Egyéni CSS mezőjébe illesztendő.
A ".elementor-319 .elementor-element.elementor-element-ab5c7d4" kulcsszót Elementor automatikusan lecseréli a widget
egyedi azonosítójára.
================================================================ */
.elementor-319 .elementor-element.elementor-element-ab5c7d4{
--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-blue-050:#E6F2FF;
--kph-line:#E4EAF1;
--kph-success:#1D9A6C;
--kph-danger:#E63946;
font-family:var(--kph-font) !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 *{ box-sizing:border-box !important; }
/* --- Készlet státusz --- */
.elementor-319 .elementor-element.elementor-element-ab5c7d4 p.stock{
display:inline-flex !important; align-items:center !important; gap:7px !important;
margin:0 0 18px !important; padding:0 !important;
font-family:var(--kph-font) !important;
font-size:13.5px !important; font-weight:700 !important;
color:var(--kph-success) !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 p.stock::before{
content:''; width:8px; height:8px; border-radius:50%;
background:currentColor; flex:0 0 auto;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 p.stock.out-of-stock{ color:var(--kph-danger) !important; }
.elementor-319 .elementor-element.elementor-element-ab5c7d4 p.stock.on-backorder{ color:#B8860B !important; }
/* --- Kosár űrlap (mennyiség + gomb) --- */
.elementor-319 .elementor-element.elementor-element-ab5c7d4 form.cart{
display:flex !important; flex-wrap:wrap !important; align-items:stretch !important;
gap:12px !important; margin:0 0 8px !important;
}
/* Mennyiség-választó doboz */
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity{
display:flex !important; align-items:center !important;
flex:0 0 auto !important;
height:54px !important;
border:1.5px solid var(--kph-line) !important;
border-radius:14px !important;
background:var(--kph-white) !important;
overflow:hidden !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .qty{
width:52px !important; height:100% !important;
border:none !important; outline:none !important;
background:transparent !important;
text-align:center !important;
font-family:var(--kph-font) !important;
font-size:15px !important; font-weight:700 !important;
color:var(--kph-ink) !important;
-moz-appearance:textfield !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .qty::-webkit-inner-spin-button,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .qty::-webkit-outer-spin-button{
-webkit-appearance:none !important; margin:0 !important;
}
/* Egyéni +/- gombok, ha a téma/plugin renderel ilyet (pl. .plus/.minus) */
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .plus,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .minus{
display:flex !important; align-items:center !important; justify-content:center !important;
width:40px !important; height:100% !important;
border:none !important; background:var(--kph-blue-050) !important;
color:var(--kph-primary) !important;
font-size:17px !important; font-weight:700 !important;
cursor:pointer !important;
transition:background-color .15s ease !important;
user-select:none !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .plus:hover,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .minus:hover{ background:var(--kph-line) !important; }
/* Kosárba gomb */
.elementor-319 .elementor-element.elementor-element-ab5c7d4 button.single_add_to_cart_button,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .single_add_to_cart_button{
flex:1 1 220px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
gap:9px !important;
height:54px !important; padding:0 28px !important;
background:var(--kph-primary) !important;
color:var(--kph-white) !important;
border:none !important; border-radius:14px !important;
font-family:var(--kph-font) !important;
font-size:15.5px !important; font-weight:700 !important;
letter-spacing:.01em !important;
cursor:pointer !important;
box-shadow:0 18px 36px -18px rgba(13,110,253,.65) !important;
transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 button.single_add_to_cart_button:hover,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .single_add_to_cart_button:hover{
background:var(--kph-primary-dark) !important;
transform:translateY(-2px) !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 button.single_add_to_cart_button:active,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .single_add_to_cart_button:active{ transform:translateY(0) !important; }
/* Letiltott / elfogyott állapot */
.elementor-319 .elementor-element.elementor-element-ab5c7d4 button.single_add_to_cart_button.disabled,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 button.single_add_to_cart_button[disabled]{
background:var(--kph-line) !important;
color:var(--kph-body) !important;
box-shadow:none !important;
cursor:not-allowed !important;
transform:none !important;
}
/* --- Variálható termék: variáció-választó dropdownok --- */
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations{
width:100% !important;
margin:0 0 20px !important;
border-collapse:separate !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations tr{ display:block !important; margin-bottom:14px !important; }
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations tr:last-child{ margin-bottom:0 !important; }
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations td,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations th{
display:block !important; padding:0 !important; border:none !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations label{
display:block !important; margin-bottom:8px !important;
font-family:var(--kph-font) !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.02em !important; text-transform:uppercase !important;
color:var(--kph-ink) !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations select{
width:100% !important; height:50px !important; padding:0 16px !important;
border:1.5px solid var(--kph-line) !important; border-radius:12px !important;
background:var(--kph-white) !important;
font-family:var(--kph-font) !important; font-size:14.5px !important; font-weight:600 !important;
color:var(--kph-ink) !important;
cursor:pointer !important;
transition:border-color .15s ease !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations select:focus{
outline:none !important;
border-color:var(--kph-primary) !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations .reset_variations{
display:inline-block !important; margin-top:8px !important;
font-family:var(--kph-font) !important; font-size:12.5px !important; font-weight:600 !important;
color:var(--kph-body) !important; text-decoration:underline !important;
}
/* Kiválasztott variáció ár/leírás doboza */
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .woocommerce-variation.single_variation{
margin:0 0 18px !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .woocommerce-variation-price .price{
font-family:var(--kph-font) !important;
font-size:22px !important; font-weight:800 !important;
color:var(--kph-ink) !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .woocommerce-variation-availability p.stock{ margin:8px 0 0 !important; }
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .woocommerce-variation-description p{
margin:8px 0 0 !important;
font-size:13.5px !important; color:var(--kph-body) !important;
}
/* Mobil */
@media (max-width:767px){
.elementor-319 .elementor-element.elementor-element-ab5c7d4 form.cart{ gap:10px !important; }
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity{ height:50px !important; }
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .qty{ width:44px !important; font-size:14px !important; }
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .plus,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .quantity .minus{ width:36px !important; font-size:15px !important; }
.elementor-319 .elementor-element.elementor-element-ab5c7d4 button.single_add_to_cart_button,
.elementor-319 .elementor-element.elementor-element-ab5c7d4 .single_add_to_cart_button{
flex:1 1 100% !important;
height:52px !important; font-size:14.5px !important;
}
.elementor-319 .elementor-element.elementor-element-ab5c7d4 table.variations select{ height:48px !important; font-size:14px !important; }
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-data-tabs, class: .elementor-element-16077a2 *//* ================================================================
KLIMAKUPON.HU — PRODUCT DATA TABS SZERKESZTÉSE WIDGET CSS
Elementor: a termékoldal fül-panel widgetje (WooCommerce natív
.woocommerce-tabs — "Leírás", "További információk", "Vélemények").
Haladó → Egyéni CSS mezőjébe illesztendő.
A ".elementor-319 .elementor-element.elementor-element-16077a2" kulcsszót Elementor automatikusan lecseréli a widget
egyedi azonosítójára.
================================================================ */
.elementor-319 .elementor-element.elementor-element-16077a2{
--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;
font-family:var(--kph-font) !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 *{ box-sizing:border-box !important; }
/* --- Fül-fejlécek --- */
.elementor-319 .elementor-element.elementor-element-16077a2 ul.tabs,
.elementor-319 .elementor-element.elementor-element-16077a2 ul.wc-tabs{
display:flex !important; flex-wrap:wrap !important; gap:6px !important;
list-style:none !important; margin:0 0 -1px !important; padding:0 !important;
border-bottom:1.5px solid var(--kph-line) !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 ul.tabs li,
.elementor-319 .elementor-element.elementor-element-16077a2 ul.wc-tabs li{
margin:0 !important; padding:0 !important;
border:none !important; background:none !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 ul.tabs li a,
.elementor-319 .elementor-element.elementor-element-16077a2 ul.wc-tabs li a{
display:inline-flex !important; align-items:center !important;
padding:14px 20px !important;
font-family:var(--kph-font) !important;
font-size:14.5px !important; font-weight:700 !important;
color:var(--kph-body) !important;
text-decoration:none !important;
border-bottom:2.5px solid transparent !important;
transition:color .15s ease, border-color .15s ease !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 ul.tabs li a:hover{ color:var(--kph-ink) !important; }
/* Aktív fül */
.elementor-319 .elementor-element.elementor-element-16077a2 ul.tabs li.active a,
.elementor-319 .elementor-element.elementor-element-16077a2 ul.wc-tabs li.active a{
color:var(--kph-primary) !important;
border-bottom-color:var(--kph-primary) !important;
}
/* --- Panel tartalom --- */
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-tabs .panel,
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-Tabs-panel{
padding:28px 2px 4px !important;
font-family:var(--kph-font) !important;
font-size:15px !important; line-height:1.75 !important;
color:var(--kph-body) !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-Tabs-panel h2{
margin:0 0 16px !important;
font-family:var(--kph-font) !important;
font-size:19px !important; font-weight:800 !important;
color:var(--kph-ink) !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-Tabs-panel p{ margin:0 0 14px !important; }
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-Tabs-panel ul{
margin:0 0 14px !important; padding-left:20px !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-Tabs-panel strong{ color:var(--kph-ink) !important; }
/* --- "További információk" — attribútum táblázat --- */
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes{
width:100% !important; border-collapse:collapse !important;
border:1px solid var(--kph-line) !important; border-radius:14px !important;
overflow:hidden !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes tr:nth-child(odd){
background:#FAFBFD !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes th,
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes td{
padding:13px 18px !important;
border:none !important;
border-bottom:1px solid var(--kph-line) !important;
font-family:var(--kph-font) !important;
font-size:14px !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes tr:last-child th,
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes tr:last-child td{
border-bottom:none !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes th{
width:34% !important;
font-weight:700 !important;
color:var(--kph-ink) !important;
text-align:left !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes td{
color:var(--kph-body) !important;
font-weight:500 !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes td p{ margin:0 !important; }
/* --- "Vélemények" tab --- */
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-Reviews .woocommerce-Reviews-title,
.elementor-319 .elementor-element.elementor-element-16077a2 #reviews h2.woocommerce-Reviews-title{
font-family:var(--kph-font) !important;
font-size:19px !important; font-weight:800 !important;
color:var(--kph-ink) !important;
margin:0 0 18px !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .commentlist{ list-style:none !important; margin:0 0 24px !important; padding:0 !important; }
.elementor-319 .elementor-element.elementor-element-16077a2 .commentlist .comment{
padding:18px !important; margin:0 0 14px !important;
background:var(--kph-white) !important;
border:1px solid var(--kph-line) !important; border-radius:14px !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .commentlist .comment_container .avatar{
border-radius:50% !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .commentlist .meta strong{
color:var(--kph-ink) !important; font-weight:700 !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .commentlist .description p{
color:var(--kph-body) !important; font-size:14px !important; margin:8px 0 0 !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .star-rating{ color:#F5A623 !important; }
.elementor-319 .elementor-element.elementor-element-16077a2 .star-rating span::before{ color:#F5A623 !important; }
/* Vélemény-beküldő űrlap */
.elementor-319 .elementor-element.elementor-element-16077a2 #review_form input[type=text],
.elementor-319 .elementor-element.elementor-element-16077a2 #review_form input[type=email],
.elementor-319 .elementor-element.elementor-element-16077a2 #review_form textarea{
width:100% !important; padding:12px 14px !important;
border:1.5px solid var(--kph-line) !important; border-radius:10px !important;
font-family:var(--kph-font) !important; font-size:14px !important;
color:var(--kph-ink) !important;
transition:border-color .15s ease !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 #review_form input:focus,
.elementor-319 .elementor-element.elementor-element-16077a2 #review_form textarea:focus{
outline:none !important; border-color:var(--kph-primary) !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 #review_form .form-submit input[type=submit]{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
height:48px !important; padding:0 26px !important;
background:var(--kph-primary) !important; color:var(--kph-white) !important;
border:none !important; border-radius:100px !important;
font-family:var(--kph-font) !important; font-size:14.5px !important; font-weight:700 !important;
cursor:pointer !important;
transition:background-color .2s ease !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 #review_form .form-submit input[type=submit]:hover{ background:#0B5ED7 !important; }
/* --- Mobil --- */
@media (max-width:767px){
.elementor-319 .elementor-element.elementor-element-16077a2 ul.tabs li a,
.elementor-319 .elementor-element.elementor-element-16077a2 ul.wc-tabs li a{
padding:11px 14px !important; font-size:13.5px !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-tabs .panel,
.elementor-319 .elementor-element.elementor-element-16077a2 .woocommerce-Tabs-panel{
padding:20px 0 4px !important; font-size:14px !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes th,
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes td{
padding:11px 14px !important; font-size:13px !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 table.woocommerce-product-attributes th{ width:42% !important; }
}
/* Nagyon szűk kijelzőn a fülek egymás alá is kerülhetnek vízszintes görgetéssel */
@media (max-width:480px){
.elementor-319 .elementor-element.elementor-element-16077a2 ul.tabs,
.elementor-319 .elementor-element.elementor-element-16077a2 ul.wc-tabs{
flex-wrap:nowrap !important;
overflow-x:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.elementor-319 .elementor-element.elementor-element-16077a2 ul.tabs li a,
.elementor-319 .elementor-element.elementor-element-16077a2 ul.wc-tabs li a{
white-space:nowrap !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0eafc3e *//* ================================================================
KLIMAKUPON.HU — SZEKCIÓFEJLÉC CSS
Fájl: 04-section-head.css Blokkok: 04.0 – 04.2
HOVA: Megjelenés → Testreszabás → További CSS
(vagy globálisan enqueue-olt stylesheet — NE widget "Egyéni CSS"-be)
================================================================ */
.cst-kp-sh{
--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-max:1360px;
font-family:var(--kph-font);
padding-top:56px;
}
.cst-kp-sh *{ box-sizing:border-box; }
.cst-kp-sh a{ text-decoration:none !important; }
.cst-kp-sh__wrap{ max-width:var(--kph-max); margin:0 auto; padding:0 32px; }
/* ================================================
04.1 — SOR: szöveg balra, link jobbra
================================================ */
.cst-kp-sh__row{
display:flex; align-items:flex-end; justify-content:space-between;
gap:24px;
padding-bottom:24px;
border-bottom:1px solid #E4EAF1;
}
.cst-kp-sh__text{ display:flex; flex-direction:column; gap:6px; }
.cst-kp-sh__eyebrow{
font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--kph-body);
}
.cst-kp-sh__title{
margin:0;
font-size:clamp(22px, 2.4vw, 28px);
font-weight:800; line-height:1.25;
color:var(--kph-ink);
}
.cst-kp-sh__link{
display:inline-flex; align-items:center; gap:8px;
flex:0 0 auto;
padding-bottom:4px; /* a cím alapvonalához igazítja */
font-size:14.5px; font-weight:700;
color:var(--kph-primary) !important;
white-space:nowrap;
transition:gap .18s ease, color .18s ease;
}
.cst-kp-sh__link:hover{ gap:12px; color:var(--kph-primary-dark) !important; }
.cst-kp-sh__link svg{ width:16px; height:16px; flex:0 0 auto; }
/* ================================================
04.2 — REZSPONZÍV
================================================ */
@media (max-width:900px){
.cst-kp-sh{ padding-top:44px; }
.cst-kp-sh__wrap{ padding:0 20px; }
}
/* Mobil — a link a cím alá kerül, teljes szélességben marad a sor olvasható */
@media (max-width:560px){
.cst-kp-sh__wrap{ padding:0 16px; }
.cst-kp-sh__row{ flex-direction:column; align-items:flex-start; gap:12px; }
.cst-kp-sh__title{ font-size:22px; }
.cst-kp-sh__link{ padding-bottom:0; }
}/* End custom CSS */
/* Start custom CSS for woocommerce-products, class: .elementor-element-699b538 *//* ================================================================
KLIMAKUPON.HU — WOOCOMMERCE PRODUCTS WIDGET CSS
Fájl: 05-woo-products.css Blokkok: 05.0 – 05.8
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-319 .elementor-element.elementor-element-699b538" 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-319 .elementor-element.elementor-element-699b538{
--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-319 .elementor-element.elementor-element-699b538 *{ 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 ul.products li.product{
float:none !important;
width:100% !important;
margin:0 !important;
}
/* ================================================
05.2 — KÁRTYA (li.product)
================================================ */
.elementor-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 ul.products li.product .price del .woocommerce-Price-amount{
color:var(--kph-body) !important;
}
.elementor-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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-319 .elementor-element.elementor-element-699b538 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