/* ==========================================================================
   Katalogus- (bolt/kategoria) oldalak
   ========================================================================== */

/* ---- kategoria-ikonsav ----
   Realthread.com-mintara (Janos referenciaja): TELJES szelesseg, nagyobb
   ikonok, a hangsulyt nem egy also szegely, hanem az ikon-opacitas +
   felirat-vastagsag adja (a legtobb ikonunk rasztat PNG, azokat CSS-szinnel
   nem lehet atszinezni - az "Osszes" ikon kivetel, az inline SVG
   stroke="currentColor"-ral, az MAGATOL koveti a szint). */
.dek-cat-bar {
  margin: 0 0 34px;
  border-bottom: 1px solid var(--dek-line);
  padding-bottom: 2px;
  overflow-x: auto;
}
.dek-cat-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
}
.dek-cat-bar li {
  margin: 0;
  flex: 1 1 0;
  min-width: 64px;
  display: flex;
  justify-content: center;
}
.dek-cat-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 16px 4px 13px;
  text-decoration: none;
  color: var(--dek-slate);
  white-space: nowrap;
  transition: color 0.15s;
  /* A bongeszo alapertelmezett fokusz-keretet (nalunk lilan jelent meg)
     a sajat "filc-keret" animacio valtja fel, lasd lentebb. */
  outline: none;
}
.dek-cat-bar a:hover {
  color: var(--dek-ink);
}
.dek-cat-bar a.active {
  color: var(--dek-ink);
}
/* Az ikon es a mogotte megjeleno "filc-keret" kozos, negyzet horgonypontja. */
.dek-cat-icowrap {
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* A ".dek-cat-bar span" szabaly (lejjebb, a FELIRAT csonkolasahoz) veletlenul
   ezt a span-t is eltalalta (mert az is span), es "overflow:hidden"-nel
   levagta a nala nagyobb, mogotte allo filc-keretet - emiatt "nem latszott"
   az egesz effekt. ELSO javitasi kiserlet (sima ".dek-cat-icowrap") NEM
   mukodott: specificitasban veszitett a ".dek-cat-bar span" (1 osztaly + 1
   elem) ellen, mert a sajat szelektorom csak 1 osztaly volt. Ket osztalyos
   szelektor kell, hogy tenylegesen felulirja. */
.dek-cat-bar .dek-cat-icowrap {
  overflow: visible;
}
.dek-cat-bar .dek-ico {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  object-fit: contain;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.dek-cat-bar a:hover .dek-ico,
.dek-cat-bar a.active .dek-ico,
.dek-cat-bar a:focus-visible .dek-ico {
  opacity: 1;
}
/* "Mintha egy vastag sarga filccel korberajzolnank" - Janos kerese: KOR
   legyen (nem lekerekitett negyzet), szabalytalan/kezi hatassal, es nem baj,
   ha reszben a piktogram moge kerul. Ez most VALODI korvonal-rajzolas: a
   path hossza (lasd catalog.php - Node.js-szel szamolt kb. 202 egyseg) a
   stroke-dasharray/stroke-dashoffset "vonal-rajzolas" technikaval animal
   (ugyanaz az elv, mint egy alairas-animacio) - hoverre/aktivon a
   dashoffset 0-ra all, mintha megrajzolodna a kor. A z-index:0 miatt az
   ikon (z-index:1) elotte marad ott, ahol a ket alakzat fedi egymast - igy
   termeszetesen "reszben moge kerul" a vonalvezetes menten. */
.dek-cat-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.dek-cat-frame path {
  fill: none;
  stroke: var(--dek-accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); /* volt 0.6s - Janos kerese: felezett sebesseg */
}
.dek-cat-bar a:hover .dek-cat-frame path,
.dek-cat-bar a:focus-visible .dek-cat-frame path {
  stroke-dashoffset: 0;
}
.dek-cat-bar a.active .dek-cat-frame path {
  stroke-dashoffset: 0;
  transition: none; /* aktiv kategorian azonnal teljes legyen, ne "rajzolodjon" minden oldalbetoltesnel */
}
@media (prefers-reduced-motion: reduce) {
  .dek-cat-frame path { transition: none; }
}
.dek-cat-bar span {
  font-size: 11.5px;
  font-weight: 500;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dek-cat-bar a.active span {
  font-weight: 700;
}

/* ---- katalogus-elrendezes: oldalsav + termekracs ---- */
.dek-catalog-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.dek-catalog-main {
  flex: 1 1 auto;
  min-width: 0; /* hogy a termekracs ossze tudjon zsugorodni, ne toljon ki */
}
.dek-cat-sidebar {
  flex: 0 0 220px;
  width: 220px;
}
.dek-sidebar-block {
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--dek-line);
}
.dek-sidebar-block:last-child {
  border-bottom: none;
}
/* Janos kerese: se "Alkategoriak"/"Szabas" cim, se darabszamok, se "Osszes"
   sor - a dobozok csak a tenyleges linkek/kattinthato cimkek listajat
   mutatjak, cim/keret nelkul (lasd catalog.php). */
.dek-sidebar-list,
.dek-sidebar-filters {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dek-sidebar-list li {
  margin: 0 0 4px;
}
.dek-sidebar-filters li {
  margin: 0;
}
.dek-sidebar-list a {
  display: block;
  text-decoration: none;
  color: var(--dek-slate);
  font-size: 15px;
  padding: 6px 0;
}
.dek-sidebar-list a:hover {
  color: var(--dek-ink);
}
.dek-sidebar-list a.active {
  color: var(--dek-ink);
  font-weight: 700;
}
/* Nincs checkbox-negyzet (lasd lent) - a sor maga csak kattinthato SZOVEG,
   nagyobb betumerettel, mint a tobbi apro cimke a lapon. */
.dek-sidebar-filters label {
  display: block;
  font-size: 15px;
  color: var(--dek-slate);
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s;
}
.dek-sidebar-filters label:hover {
  color: var(--dek-ink);
}
.dek-sidebar-filters label:has(input:checked) {
  color: var(--dek-ink);
  font-weight: 700;
}
/* Janos kerese: NE legyen lathato checkbox-negyzet, csak sima, nagyobb
   meretu szoveg - a kivalasztott allapotot kizarolag a felkover betu
   jelzi (lasd fent). A valos <input> megmarad a DOM-ban (kell a form
   GET-beadasahoz, es a catalog.js auto-submit figyeli a change esemenyet),
   csak vizualisan rejtett, es billentyuzettel tovabbra is elerheto marad. */
.dek-sidebar-filters input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 900px) {
  .dek-catalog-layout { flex-direction: column; }
  .dek-cat-sidebar { width: 100%; flex-basis: auto; }
}

/* ---- termekkartyak ---- */
/* A WooCommerce/Storefront sajat "columns-N" rendszere MEG MINDIG a regi,
   float+nth-child(Nn){clear:both} alapu tordelest hasznalja - ez tobbszor
   is torest okozott (a szelesseg-felulirasunkat nem mindig vette figyelembe,
   a Storefront sajat clear-szabalyai pedig 5 oszlopra hianyosak voltak,
   emiatt a racs "szetesett": nem 5, hanem hol 4, hol kevesebb elem kerult
   egy sorba). A float-rendszert TELJESEN kikapcsoljuk, es valodi CSS grid-et
   hasznalunk - igy nincs tobbe nth-child-fuggo tordeles, a bongeszo maga
   szamolja ki a sorokat.
   Janos kerese: "a termekek kozotti terkoz felezodjon, ennek megfeleloen a
   kartyak merete novekedjen" - a resz (gap) itt kozvetlenul allithato, a
   kartya-szelesseg pedig automatikusan kitolti a fennmaradó helyet.

   FONTOS - "minmax(0, 1fr)", NEM a rovidebb "1fr":
   az "1fr" valojaban "minmax(auto, 1fr)"-t jelent, aminek a MINIMUMA a cella
   sajat min-content szelessege (leghosszabb szo / kep). Ezert szuk ablaknal a
   racs nem tudott osszebb huzodni, hanem KILOGOTT a konteneren - es mivel nem
   a konteneren volt tulcsordulas, gorgetni sem lehetett. A "minmax(0, ...)"
   engedi 0-ig zsugorodni a savot, igy a tordeles tenylegesen mukodik. */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px; /* volt 18px - Janos kerese: ujra felezve, a kartyak ennyivel nonek */
}
/* Tordeles 5 -> 4 -> 3 -> 2 -> 1 oszlopra. A tores-pontok az ABLAK szelessegere
   vonatkoznak, de a 900px-es hatarnal az oldalsav is a tartalom FOLE kerul
   (lasd a .dek-catalog-layout szabalyt fentebb), tehat ott hirtelen
   kiszelesedik a rendelkezesre allo hely - ezert nem egyenletes a lepcso. */
@media (max-width: 1199px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 619px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 419px) {
  .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
}
/* Ne lehessen kepbol adodo vizszintes tulcsordulas sem. */
.woocommerce ul.products li.product img {
  max-width: 100%;
}
/* A WC/Storefront sajat clearfix-e ("content:''; display:table") a REGI
   float-elrendezeshez kellett - grid alatt viszont ez a ket pszeudo-elem
   IS VALODI RACS-CELLAT foglal el (mert van generalt tartalmuk es nem
   display:none), ezert az elso valodi termek mindig a 2. oszlopba csuszott,
   "szetesett" elrendezest okozva. Grid modban nincs ra szukseg - kikapcsolva. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
  display: none;
}
.woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  background: var(--dek-paper-raised);
  border: 1px solid var(--dek-line);
  /* Volt "0 0 10px" - Janos kerese: kisebb kartya-magassag, kevesebb ures
     hely az ar alatt. */
  padding: 0 0 4px;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s;
  /* Janos kerese: FIX "5 soros" sablon minden kartyan (marka, 2 sor cim,
     szinek, ar) - az ar MINDIG azonos magassagban legyen, fuggetlenul
     attol, mennyi tenyleges szoveg van felette. A grid alapbol is
     "stretch"-eli a sorban levo elemeket azonos magassagra (lasd
     ul.products grid), ez itt teszi lehetove, hogy a belso tartalom
     KIHASZNALJA is ezt a magassagot (az ar a doboz aljara tapadjon). */
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--dek-line-strong);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product a img {
  margin: 0 0 12px;
  background: var(--dek-paper-raised);
  /* ELSO PROBALKOZAS (negyzet keret + transform:scale zoom) HIBAS volt -
     Janos visszajelzese: a nagyitas MINDEN iranyba nott (nem csak oldalt),
     ezert lelogott a szoveg fole IS, es mivel a "transform" sajat
     rétegezesi kontextust nyit, ez a lebegő reteg a DOM-sorrendtol
     fuggetlenul a cim/ar szoveg FOLE rajzolodott ki - eltakarta.
     A VALODI ok egyszerubb: a UTT-fotok ALLOKEPEK (merve: 853x1280px, azaz
     kb. 2:3 arany), es azt negyzet (1:1) keretbe kenyszeritettuk - emiatt
     az object-fit:contain oldalt ures savot hagyott. HELYES javitas: maga a
     KERET arany legyen 2:3 (a fotoke), ne 1:1 - igy a kep szelrol szelig er,
     nincs szukseg semmilyen nagyitasra/vagasra, tehat a szoveg-eltakaras
     szerkezetileg kizart. */
  aspect-ratio: 2 / 3;
  object-fit: contain;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--dek-font-display);
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.25;
  color: var(--dek-ink);
  padding: 0 14px !important;
  /* A WC/Storefront sajat alapertelmezese ~34px felso margot adott a
     cimnek, amit korabban nem irtunk felul (csak az alsot) - EZ okozta a
     "sorkozt" a marka-sor es a cim kozott, nem a mi sajat szabalyunk.
     Janos kerese: kozvetlenul kovesse egymast. */
  margin-top: 0 !important;
  margin-bottom: 4px;
  /* "2-3. sor" - Janos kerese: PONTOSAN 2 sor magassagu doboz, fuggetlenul
     attol, a cim 1 vagy 2 sornyi-e (rovid cimnel ures hely marad, hosszunal
     "..."-ra vagunk). 2.5em = 1.25 (line-height) * 2 (sor) * a sajat
     font-meret (15px) - igy MINDIG pontosan ket sornyi helyet foglal. */
  height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce ul.products li.product .price {
  padding: 0 14px;
  color: var(--dek-ink) !important;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Ugyanigy a WC alapertelmezes ~16px also margot adott az arnak - ez
     tolta ki feleslegesen a kartya aljat, nem a sajat padding-unk
     (lasd li.product padding-bottom). Janos kerese: kisebb kartya-magassag. */
  margin-bottom: 0 !important;
  /* "5. sor" - Janos kerese: az ar MINDIG a kartya aljan legyen. Mivel a
     .woocommerce-loop-product__link flex-oszlop (lasd fent), a
     margin-top:auto az OSSZES fennmaradó helyet maga ele veszi, tehat az
     ar mindig leragad a doboz aljara - fuggetlenul attol, mennyi szoveg
     van felette. */
  margin-top: auto !important;
}
.dek-card-brand {
  /* Volt "10px 14px 0" (felso resz), amikor ez volt a kartya LEGELSO eleme,
     kozvetlenul a felso szegely alatt. Janos kerese: a kep ALA keruljon -
     a kep sajat also margoja (12px, lasd fent) mar ad eleg helyet felul.
     Also res is 0 (Janos kerese): a cim kozvetlenul kovesse, sorkoz nelkul. */
  padding: 0 14px;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--dek-slate-soft);
  display: flex;
  gap: 6px;
  align-items: baseline;
  /* "1. sor" - fix magassag akkor is, ha (ritkan) sem marka, sem style
     nem ismert es a bekezdes ures maradna. */
  min-height: 1.4em;
}
.dek-card-brand .sep {
  color: var(--dek-line-strong);
}
.dek-card-brand .mono {
  font-family: "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;
}
.dek-card-from small {
  font-size: 11px;
  color: var(--dek-slate-soft);
  font-weight: 400;
}
.dek-card-colors {
  padding: 0 14px;
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--dek-slate-soft);
  /* "4. sor" - fix magassag akkor is, ha csak 1 szin van (a PHP ekkor
     ures bekezdest ir ki, lasd catalog.php), hogy az ar alatta mindig
     ugyanoda kerulon. */
  min-height: 1.4em;
}
/* A listaoldali "Kosarba"/"Valassz opciot" gomb elrejtve: az UTT-termekeknel
   a valasztas a meret-matrixon tortenik, a gomb csak atiranyitana a
   termekoldalra - a kartya egesze ugyis oda visz. */
.woocommerce ul.products li.product .button {
  display: none;
}

/* ---- rendezes/eredmenyszam sav ---- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-size: 13px;
  color: var(--dek-slate);
}

@media (max-width: 640px) {
  .dek-cat-bar .dek-ico { width: 28px; height: 28px; }
  .dek-cat-bar span { font-size: 10.5px; max-width: 74px; }
  .dek-cat-bar a { padding: 8px 9px 7px; }
}