.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-193 .elementor-element.elementor-element-cdc02a7.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-193 .elementor-element.elementor-element-cdc02a7.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-193 .elementor-element.elementor-element-92d6abf.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-193 .elementor-element.elementor-element-92d6abf.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-193 .elementor-element.elementor-element-cdc02a7.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-193 .elementor-element.elementor-element-92d6abf.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-193 .elementor-element.elementor-element-cdc02a7.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-193 .elementor-element.elementor-element-92d6abf.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for html, class: .elementor-element-81d8ccc *//* ================================================================
KLIMAKUPON.HU — FŐOLDAL HERO CSS
Fájl: 02-hero.css Blokkok: 02.0 – 02.4
HOVA: Megjelenés → Testreszabás → További CSS
(vagy globálisan enqueue-olt stylesheet — NE widget "Egyéni CSS"-be)
================================================================ */
.cst-kp-hero{
/* Ugyanaz a paletta, mint a fejlécben (01-header.css) — komponensre
skálázva, hogy a szekció önmagában is működjön bármelyik oldalon. */
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-primary-dark:#0B5ED7;
--kph-navy:#0B2D5B;
--kph-blue-050:#E6F2FF;
--kph-ink:#0B2D5B;
--kph-body:#5A6B85;
--kph-white:#FFFFFF;
--kph-line:#E4EAF1;
--kph-max:1360px;
font-family:var(--kph-font);
background:var(--kph-white);
padding:48px 0 64px;
}
.cst-kp-hero *{ box-sizing:border-box; }
.cst-kp-hero a{ text-decoration:none !important; }
.cst-kp-hero :where(ul){ list-style:none; margin:0; padding:0; } /* :where() = 0 specificitás, hogy az egyedi margin/padding felülírhassa */
.cst-kp-hero svg{ display:block; }
.cst-kp-hero__wrap{ max-width:var(--kph-max); margin:0 auto; padding:0 32px; }
/* ================================================
02.1 — HERO KÁRTYA (szöveg + fotó, split layout)
================================================ */
.cst-kp-hero__card{
position:relative;
min-height:520px;
display:flex; align-items:center;
border-radius:28px;
overflow:hidden;
box-shadow:0 30px 60px -30px rgba(11,45,91,.35);
isolation:isolate; /* saját rétegkontextus, hogy a z-index-ek csak idebent érvényesüljenek */
}
/* A küldött fotó a teljes kártya háttere */
.cst-kp-hero__bg{
position:absolute; inset:0; z-index:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
display:block;
}
/* Sötét gradiens fátyol a fotón — bal oldalon erősebb (ott ül a szöveg),
jobb felé elhalványul, hogy a fotó is látszódjon */
.cst-kp-hero__scrim{
position:absolute; inset:0; z-index:1;
background:linear-gradient(100deg,
rgba(6,20,41,.86) 0%,
rgba(6,20,41,.72) 32%,
rgba(6,20,41,.28) 58%,
rgba(6,20,41,0) 78%);
}
/* 02.1a — SZÖVEG */
.cst-kp-hero__text{
position:relative; z-index:2;
display:flex; flex-direction:column;
gap:18px;
padding:56px 48px;
max-width:560px;
}
.cst-kp-hero__eyebrow{
display:inline-flex; align-self:flex-start;
padding:7px 16px;
font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--kph-primary);
background:var(--kph-white);
border-radius:999px;
}
.cst-kp-hero__title{
margin:0;
font-size:clamp(30px, 3.6vw, 46px);
font-weight:800; line-height:1.12;
color:var(--kph-white);
text-shadow:0 2px 18px rgba(0,0,0,.18);
}
.cst-kp-hero__subtitle{
margin:0; max-width:36ch;
font-size:17px; line-height:1.55; font-weight:500;
color:rgba(255,255,255,.88);
}
.cst-kp-hero__ctas{ display:flex; align-items:center; gap:16px; margin-top:8px; }
.cst-kp-hero__cta{
display:inline-flex; align-items:center; gap:10px;
height:54px; padding:0 28px;
font-family:var(--kph-font);
font-size:15.5px; font-weight:700;
color:var(--kph-white) !important;
background:var(--kph-primary);
border-radius:14px;
box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cst-kp-hero__cta:hover{
background:var(--kph-primary-dark);
transform:translateY(-2px);
box-shadow:0 18px 32px -12px rgba(0,0,0,.5);
}
.cst-kp-hero__cta svg{ width:18px; height:18px; flex:0 0 auto; }
/* 02.1b — LEBEGŐ BADGE a fotó fölött, jobb felül */
.cst-kp-hero__badge{
position:absolute; z-index:2;
top:28px; right:28px;
display:flex; align-items:center; gap:12px;
max-width:220px;
padding:14px 18px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(6px);
border-radius:16px;
box-shadow:0 18px 34px -16px rgba(11,45,91,.4);
}
.cst-kp-hero__badge-icon{
flex:0 0 auto;
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:50%;
color:#16A34A;
background:#EAFBF1;
}
.cst-kp-hero__badge-icon svg{ width:19px; height:19px; }
.cst-kp-hero__badge-text{
font-size:12.5px; font-weight:700; line-height:1.35; color:var(--kph-ink);
}
/* ================================================
02.2 — BIZALOMÉPÍTŐ SÁV (a kártya alatt)
================================================ */
.cst-kp-hero__trust{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:16px;
margin-top:56px;
}
.cst-kp-hero__trust li{
display:flex; align-items:center; gap:12px;
padding:18px 20px;
background:var(--kph-white);
border:1px solid var(--kph-line);
border-radius:14px;
}
.cst-kp-hero__trust svg{
flex:0 0 auto; width:26px; height:26px;
color:var(--kph-primary);
}
.cst-kp-hero__trust strong{ display:block; font-size:14.5px; font-weight:700; color:var(--kph-ink); }
.cst-kp-hero__trust small{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--kph-body); }
/* ================================================
02.3 — REZSPONZÍV
================================================ */
/* Nagy tablet */
@media (max-width:1200px){
.cst-kp-hero__wrap{ padding:0 20px; }
.cst-kp-hero__text{ padding:44px 36px; }
.cst-kp-hero__title{ font-size:clamp(28px, 4vw, 38px); }
}
/* Tablet — a kártya aránya magasabbá válik, a szöveg a fotó aljára kerül
(a fátyol is átvált vízszintesről függőlegesre, hogy keskeny szélességben
is teljes olvashatóságot adjon a teljes szélességű szövegnek) */
@media (max-width:900px){
.cst-kp-hero{ padding:32px 0 48px; }
.cst-kp-hero__card{ min-height:0; aspect-ratio:3/4; align-items:flex-end; }
.cst-kp-hero__scrim{
background:linear-gradient(180deg,
rgba(6,20,41,0) 0%,
rgba(6,20,41,.35) 42%,
rgba(6,20,41,.9) 100%);
}
.cst-kp-hero__text{ padding:32px 28px 36px; max-width:none; width:100%; }
.cst-kp-hero__trust{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* Mobil */
@media (max-width:600px){
.cst-kp-hero__wrap{ padding:0 16px; }
.cst-kp-hero__card{ border-radius:20px; aspect-ratio:3/4.2; }
.cst-kp-hero__text{ padding:24px 20px 28px; gap:14px; }
.cst-kp-hero__title{ font-size:clamp(26px, 7vw, 32px); }
.cst-kp-hero__subtitle{ font-size:15.5px; }
.cst-kp-hero__cta{ width:100%; justify-content:center; height:52px; font-size:15px; }
.cst-kp-hero__ctas{ width:100%; }
.cst-kp-hero__badge{ top:16px; right:16px; max-width:170px; padding:11px 14px; }
.cst-kp-hero__badge-text{ font-size:11.5px; }
.cst-kp-hero__trust{ grid-template-columns:1fr; margin-top:36px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-af4a72b *//* ================================================================
KLIMAKUPON.HU — MÁRKÁK SZEKCIÓ CSS
Fájl: 03-brands.css Blokkok: 03.0 – 03.3
HOVA: Megjelenés → Testreszabás → További CSS
(vagy globálisan enqueue-olt stylesheet — NE widget "Egyéni CSS"-be)
================================================================ */
.cst-kp-brands{
--kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kph-primary:#0D6EFD;
--kph-primary-dark:#0B5ED7;
--kph-navy:#0B2D5B;
--kph-blue-050:#E6F2FF;
--kph-ink:#0B2D5B;
--kph-body:#6B7280;
--kph-white:#FFFFFF;
--kph-line:#E4EAF1;
--kph-max:1360px;
font-family:var(--kph-font);
background:var(--kph-white);
padding:64px 0;
}
.cst-kp-brands *{ box-sizing:border-box; }
.cst-kp-brands a{ text-decoration:none !important; color:inherit; }
.cst-kp-brands__wrap{ max-width:var(--kph-max); margin:0 auto; padding:0 32px; }
/* ================================================
03.1 — FEJLÉC
================================================ */
.cst-kp-brands__head{
display:flex; flex-direction:column; gap:10px;
margin-bottom:36px;
}
.cst-kp-brands__eyebrow{
display:inline-flex; align-self:flex-start;
padding:7px 16px;
font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--kph-primary);
background:var(--kph-blue-050);
border-radius:999px;
}
.cst-kp-brands__title{
margin:0;
font-size:clamp(24px, 2.6vw, 32px);
font-weight:800; line-height:1.2;
color:var(--kph-ink);
}
.cst-kp-brands__subtitle{
margin:0; max-width:52ch;
font-size:15.5px; line-height:1.55; font-weight:500;
color:var(--kph-body);
}
/* ================================================
03.2 — KÁRTYA-GRID
================================================ */
.cst-kp-brands__grid{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:24px;
}
.cst-kp-brands__card{
display:flex; flex-direction:column; align-items:center;
padding:24px 18px 28px;
background:var(--kph-white);
border:1px solid var(--kph-line);
border-radius:20px;
text-align:center;
transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cst-kp-brands__card:hover{
border-color:transparent;
box-shadow:0 24px 48px -24px rgba(11,45,91,.28);
transform:translateY(-4px);
}
.cst-kp-brands__card:hover .cst-kp-brands__imgwrap img{ transform:scale(1.06); }
.cst-kp-brands__card:hover .cst-kp-brands__cta{ gap:12px; color:var(--kph-primary-dark) !important; }
.cst-kp-brands__imgwrap{
display:flex; align-items:center; justify-content:center;
width:100%; aspect-ratio:1/1;
margin-bottom:20px;
background:
radial-gradient(circle at 50% 45%, var(--kph-blue-050) 0%, rgba(230,242,255,0) 72%);
border-radius:16px;
overflow:hidden;
}
.cst-kp-brands__imgwrap img{
max-width:94%; max-height:94%;
object-fit:contain;
transition:transform .3s ease;
}
/* Placeholder, amíg nincs valódi termékkép (pl. Aux) */
.cst-kp-brands__imgwrap--placeholder{
font-size:15px; font-weight:800; letter-spacing:.06em;
color:var(--kph-primary);
background:var(--kph-blue-050);
}
.cst-kp-brands__body{
display:flex; flex-direction:column; align-items:center; gap:6px;
}
.cst-kp-brands__name{
font-size:19px; font-weight:800; color:var(--kph-ink);
}
.cst-kp-brands__cta{
display:inline-flex; align-items:center; gap:8px;
font-size:13.5px; font-weight:700;
color:var(--kph-primary) !important;
transition:gap .2s ease, color .2s ease;
}
.cst-kp-brands__cta svg{ width:15px; height:15px; flex:0 0 auto; }
/* ================================================
03.3 — REZSPONZÍV
================================================ */
/* Tablet */
@media (max-width:900px){
.cst-kp-brands{ padding:48px 0; }
.cst-kp-brands__wrap{ padding:0 20px; }
.cst-kp-brands__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
}
/* Mobil — a kártya vízszintes sorrá alakul: kép balra, név+CTA jobbra,
egymás alatt (ezért kell a HTML-ben a közös __body wrapper) */
@media (max-width:520px){
.cst-kp-brands__wrap{ padding:0 16px; }
.cst-kp-brands__head{ margin-bottom:24px; }
.cst-kp-brands__grid{ grid-template-columns:1fr; gap:14px; }
.cst-kp-brands__card{
flex-direction:row; align-items:center;
text-align:left; padding:14px 18px; gap:16px;
}
.cst-kp-brands__imgwrap{ width:72px; height:72px; flex:0 0 auto; margin-bottom:0; }
.cst-kp-brands__body{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.cst-kp-brands__name{ margin-bottom:0; font-size:17px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6f05821 *//* ================================================================
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-cdc02a7 *//* ================================================================
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-193 .elementor-element.elementor-element-cdc02a7" 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-193 .elementor-element.elementor-element-cdc02a7{
--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-193 .elementor-element.elementor-element-cdc02a7 *{ 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 ul.products li.product{
float:none !important;
width:100% !important;
margin:0 !important;
}
/* ================================================
05.2 — KÁRTYA (li.product)
================================================ */
.elementor-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 ul.products li.product .price del .woocommerce-Price-amount{
color:var(--kph-body) !important;
}
.elementor-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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-193 .elementor-element.elementor-element-cdc02a7 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