/* ========================================================= KlímaPro – TERMÉKEK (egyoszlopos kártyák) Token-kompatibilis: a style.css változóira épít. ========================================================= */ /* ha máshol is használod a listát, legyen külön osztályod a body-n: és alább .products-page .section stb. Most közvetlenül a komponensosztályokra célozunk. */ /* ---- konténer / szekció ---- */ .maincontainer { /* globálisban már van, itt csak finomhangolunk szükség esetén */ max-width: var(--max); margin-inline: auto; padding-inline: 12px; } .section { max-width: var(--max); margin: var(--section-space) auto; } /* ---- egyoszlopos lista ---- */ .list-col { display: grid; gap: var(--gap); /* a globális --gap: clamp(14px,2vw,22px) */ } /* görgetési puffer (sticky header miatt) */ :root { --sticky-offset: 72px; } /* állítsd, ha a headered magasabb */ .card.product, .product .details { scroll-margin-top: var(--sticky-offset); } /* ========================================================= KÁRTYA ========================================================= */ .card.product { display: grid; grid-template-columns: 160px 1fr; /* kicsi tipóhoz arányos képoszlop */ align-items: stretch; gap: 0; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-border); padding: 0; /* tartalmi blokkok adnak belső paddinget */ box-shadow: var(--shadow); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); overflow: hidden; /* lekerekítés érvényesüljön a képre is */ transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); } .card.product:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0, 0, 0, .35); } .card.product.is-open { border-color: color-mix(in oklab, var(--accent) 40%, transparent); box-shadow: 0 14px 44px rgba(0, 0, 0, .42), 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent); } /* ---- képblokk ---- */ .product .media { display: grid; place-items: center; padding: 10px; /* kicsi tipó → kicsi padding */ border-right: 1px solid var(--glass-border); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)); } .product .media img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1 / 1; /* négyzetes illesztés */ display: block; filter: saturate(105%) contrast(102%); } /* ---- szövegblokk ---- */ .product .info { padding: var(--card-pad); /* globális: clamp(10px,1.6vw,16px) */ display: grid; gap: 8px; /* apró, feszes ritmus */ grid-template-rows: auto auto auto auto; } /* cím, ár – a globális tipótokenekkel */ .product .title { margin: 2px 0 0; font-size: var(--h2); /* kicsi, de címsor-szint */ line-height: 1.18; letter-spacing: -.01em; } .product .price { font-weight: 800; font-size: var(--h2); /* azonos méret, erős súly */ line-height: 1.1; } .product .price .currency { color: var(--muted); font-weight: 700; font-size: calc(var(--font-size) * 0.95); /* ne növelje a sort */ margin-left: 2px; } /* gombok – a globális .btn/.btn-yellow érvényesül; csak elrendezés */ .product .actions { margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; } /* ========================================================= LENYÍLÓ RÉSZLETEK ========================================================= */ .product .details { margin-top: 6px; padding: 10px; background: color-mix(in oklab, var(--glass) 75%, transparent); border: 1px solid var(--glass-border); border-radius: 12px; } /* A PHP-ból érkező bulletelt szöveg (• + \n) szépen tördelve, kompakt, olvasható kicsi tipó mellett is */ .product .details p { margin: 0; color: var(--text); font-size: var(--font-size); /* EXTRA KICSI tipóhoz illesztve */ line-height: 1.7; /* szellős, mégis feszes */ white-space: pre-line; /* \n → sortörés */ text-wrap: pretty; /* modernebb böngészőkben szebb törés */ } /* Ha később