/* ==========================================================================
   Marka-oldalak (Fooldal, Technologiak+aloldalak, Kinek dolgozunk,
   Tudastar, GYIK, Referenciak, Muhelyunk)

   2026-08-26 (2. kor, Janos): "kerüld a fekete kontúrokat és a fehér
   backgroundot". A felulet-nyelv ezert:
     - kartyak/panelek: #EDEDE6 tonus (a fejlec sajatja), KERET NELKUL,
       3px lekerekites (a kalkulator-gombok nyelve)
     - fotok: keret nelkul, felirat alattuk
     - tagolas: sotet nagybetus szakasz-savok + a lap sajat papirja
     - gombok: sarga, keret nelkul (mint a kalkulator pirulai)
     - chipek/mezok: #E4E4DB (a 2026-08-23-i kontraszt-dontes tonusa)
   A szelesseg tovabbra is a katalogusé (max-width: 100% a .col-full-ban),
   az eyebrow: pala szoveg + 3px sarga alahuzas, cim: display-serif +
   filctoll-kiemeles.
   ========================================================================== */

.dek-pages .entry-title { display: none; }
.dek-pages .entry-header { margin: 0; padding: 0; }

.dek-p { max-width: 100%; margin: 0 auto; padding: 4px 0 48px; }

/* ---- filctoll-kiemeles ---- */
.dek-hl {
  font-style: italic;
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 34%, transparent 34%);
  background-size: 100% 92%;
  background-repeat: no-repeat;
  background-position: 0 88%;
}

/* ==========================================================================
   1) OLDAL-FEJLEC
   ========================================================================== */
.dek-p-head { margin-bottom: 26px; }
.dek-p-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dek-slate);
  margin-bottom: 14px; padding-bottom: 3px; border-bottom: 3px solid var(--dek-accent);
}
.dek-p-head h1 {
  font-family: var(--dek-font-display);
  font-size: clamp(30px, 4vw, 44px); line-height: 1.15; margin: 0 0 10px;
  color: var(--dek-ink);
}
.dek-p-lead { font-size: 15.5px; line-height: 1.6; color: var(--dek-slate); max-width: 620px; margin: 0; }

/* ---- szakasz-fejlec (2026-08-28, Janos: "kevesebb feketet, szellosebben") ----
   A korabbi teljes-szelessegu sotet sav helyett konnyed, alahuzasos fejlec -
   ugyanaz a nyelv, mint az eyebrow/dek-hl elemeknel. A dek-p-bar-strong CSAK a
   legritkabban, egy-egy fooldal-szintu valasztovonalnal marad sotet. */
.dek-p-bar {
  display: inline-block; background: transparent; color: var(--dek-ink);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 0 7px; margin: 0 0 22px;
  border-bottom: 3px solid var(--dek-accent);
}
.dek-p-bar-strong {
  display: block; background: var(--dek-ink); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px;
  margin: 0 0 18px; border-bottom: 0;
}
.dek-p-block { margin-bottom: 52px; }
.dek-p-block:last-child { margin-bottom: 0; }

/* ==========================================================================
   2) KETOSZLOPOS ELRENDEZES - fo mezo + tapado oldalsav
   ========================================================================== */
.dek-p-split { display: grid; grid-template-columns: 1fr 352px; gap: 22px; align-items: start; }
.dek-p-main { min-width: 0; }
.dek-p-side { min-width: 0; position: sticky; top: calc(var(--dek-catbar-top, 78px) + 18px); }
/* Kontur es feher nelkul: a fejlec sajat tonusa hordozza a kartyat. */
.dek-p-side-in { background: #EDEDE6; border-radius: 3px; overflow: hidden;
  display: flex; flex-direction: column; }
.dek-p-side-head {
  background: transparent; color: var(--dek-ink); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 16px 16px 10px;
  border-bottom: 2px solid var(--dek-accent); margin: 0;
}
.dek-p-side-body { padding: 16px; }
.dek-p-side-body p { font-size: 14px; line-height: 1.65; color: var(--dek-slate); margin: 0 0 14px; }
.dek-p-side-list { list-style: none; margin: 0; padding: 0; }
.dek-p-side-list li {
  font-size: 13.5px; line-height: 1.5; color: var(--dek-ink);
  padding: 9px 0; border-bottom: 1px solid rgba(20,25,31,.08);
}
.dek-p-side-list li:last-child { border-bottom: none; }
.dek-p-side-list b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dek-slate); margin-bottom: 2px; }
.dek-p-side-foot { padding: 2px 16px 16px; }

/* ==========================================================================
   3) GOMBOK - sarga, kontur nelkul (a kalkulator-gombok nyelve)
   ========================================================================== */
.dek-p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--dek-accent); color: var(--dek-ink) !important;
  border: 0; border-radius: 3px;
  font-size: 15px; font-weight: 700; padding: 12px 22px;
  text-decoration: none !important; cursor: pointer; min-height: 46px;
}
.dek-p-btn:hover { filter: brightness(0.96); }
.dek-p-btn-full { display: flex; width: 100%; }
.dek-p-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #E4E4DB; color: var(--dek-ink) !important;
  border: 0; border-radius: 3px;
  font-size: 14px; font-weight: 700; padding: 11px 20px;
  text-decoration: none !important; min-height: 44px;
}
.dek-p-btn-ghost:hover { background: #D8D8CD; }

/* ==========================================================================
   4) FOTOK - keret nelkul
   ========================================================================== */
.dek-p-fig { margin: 0; }
.dek-p-fig img { display: block; width: 100%; height: auto; border-radius: 3px; }
.dek-p-fig figcaption {
  font-size: 12.5px; font-weight: 600; color: var(--dek-slate);
  padding: 8px 2px 0;
}

/* Szeles nyito-kep */
.dek-p-hero-img { margin: 0 0 34px; position: relative; }
.dek-p-hero-img img { display: block; width: 100%; height: clamp(220px, 34vw, 420px);
  object-fit: cover; border-radius: 3px; }
.dek-p-hero-cap {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(20,25,31,.82); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 3px;
}

/* ==========================================================================
   5) TECHNOLOGIA-SOROK (attekinto oldal)
   ========================================================================== */
.dek-p-row {
  display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--dek-line);
}
.dek-p-row:first-child { border-top: none; padding-top: 6px; }
.dek-p-row.dek-p-row-flip { grid-template-columns: 1fr 380px; }
.dek-p-row.dek-p-row-flip .dek-p-row-media { order: 2; }
.dek-p-row-media { min-width: 0; }
.dek-p-row-body { min-width: 0; }
.dek-p-row-body h2 {
  font-family: var(--dek-font-display); font-size: clamp(20px, 2.4vw, 27px);
  margin: 0 0 4px; color: var(--dek-ink);
}
.dek-p-kicker { color: var(--dek-slate); font-size: 14.5px; font-weight: 600; margin: 0 0 12px; }
.dek-p-row-body > p:not(.dek-p-kicker) { font-size: 15px; line-height: 1.7; color: #35393f; margin: 0 0 14px; }
.dek-p-num {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--dek-slate); margin-bottom: 6px;
}
.dek-p-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700;
  color: var(--dek-ink) !important; text-decoration: none !important;
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 32%, transparent 32%); }
.dek-p-more:hover { background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 100%, transparent 100%); }

/* Rajzolt anyagminta (DTG, szublimacio - nincs hiteles sajat foto) */
.dek-p-art { background: #EDEDE6; border-radius: 3px; padding: 16px; margin: 0; }
.dek-p-art svg { display: block; width: 100%; height: auto; color: var(--dek-ink); }
.dek-p-art figcaption { font-size: 12.5px; font-weight: 600; color: var(--dek-slate-soft); padding: 10px 0 0; }

/* ---- jellemzo-chipek ---- */
.dek-p-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dek-p-specs li {
  font-size: 12.5px; font-weight: 600; color: var(--dek-ink);
  background: #E4E4DB; border-radius: 3px; padding: 6px 11px;
}

/* ==========================================================================
   6) KARTYA-RACSOK
   ========================================================================== */
.dek-p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dek-p-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dek-p-card { background: #EDEDE6; border-radius: 3px; padding: 24px 24px; }
.dek-p-card h3 {
  font-family: var(--dek-font-display); font-size: 19px; line-height: 1.3;
  margin: 0 0 8px; color: var(--dek-ink);
}
.dek-p-card p { font-size: 14px; line-height: 1.6; color: var(--dek-slate); margin: 0; }
.dek-p-card-note {
  display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600;
  color: var(--dek-ink);
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 32%, transparent 32%);
}
/* fotos kartya */
.dek-p-card-photo { padding: 0; overflow: hidden; }
.dek-p-card-photo img { display: block; width: 100%; height: 190px; object-fit: cover; }
.dek-p-card-photo .dek-p-card-txt { padding: 16px 18px 18px; }
/* kattinthato kartya */
a.dek-p-card { display: block; text-decoration: none !important; color: inherit; }
a.dek-p-card:hover h3 { background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 30%, transparent 30%); }
.dek-p-soon {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dek-ink);
  background: var(--dek-accent); padding: 3px 9px; border-radius: 3px;
}

/* ==========================================================================
   7) "MIKOR VALASZD / MIKOR NE" - az aloldalak dontes-segito parja
   ========================================================================== */
.dek-p-when { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dek-p-when-col { background: #EDEDE6; border-radius: 3px; padding: 18px 20px; }
.dek-p-when-col h3 { font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dek-ink); margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 3px solid var(--dek-accent); display: inline-block; }
.dek-p-when-col.dek-p-when-ne h3 { border-bottom-color: var(--dek-line-strong); color: var(--dek-slate); }
.dek-p-when-col ul { list-style: none; margin: 0; padding: 0; }
.dek-p-when-col li { font-size: 14px; line-height: 1.55; color: #35393f;
  padding: 7px 0 7px 20px; position: relative; }
.dek-p-when-col li::before { content: "→"; position: absolute; left: 0; color: var(--dek-slate); }
.dek-p-when-col li a { color: var(--dek-ink); font-weight: 600; }

/* ==========================================================================
   8) OSSZEHASONLITO TABLAZAT (technologia-valaszto)
   ========================================================================== */
.dek-p-tablewrap { overflow-x: auto; }
/* A ".dek-p" elotag KELL: a tema sajat `table:not(.has-background) th`
   szabalya (0,1,2) kulonben megveri az egy-osztalyos valtozatot (0,1,1),
   es a fejlec vilagosszurke marad a sotet sav helyett - ez a projekt
   visszatero specificitasi csapdaja, elesben merve itt is. */
.dek-p .dek-p-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dek-p .dek-p-table th { background: var(--dek-ink); color: #fff; font-size: 12px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 10px 14px; white-space: nowrap; border: 0; }
.dek-p .dek-p-table td { padding: 10px 14px; border: 0;
  border-bottom: 1px solid var(--dek-line);
  color: #35393f; vertical-align: top; background: transparent; }
.dek-p .dek-p-table tr:nth-child(even) td { background: rgba(237, 237, 230, .55); }
.dek-p .dek-p-table td:first-child { font-weight: 700; color: var(--dek-ink); white-space: nowrap; }
.dek-p .dek-p-table a { color: var(--dek-ink); font-weight: 600; }

/* ==========================================================================
   9) FOLYAMAT-LEPESEK ("Igy dolgozunk")
   ========================================================================== */
.dek-p-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  counter-reset: dek-lepes; list-style: none; margin: 0; padding: 0; }
.dek-p-steps li { background: #EDEDE6; border-radius: 3px; padding: 18px 20px;
  counter-increment: dek-lepes; }
.dek-p-steps li::before { content: counter(dek-lepes, decimal-leading-zero);
  display: inline-block; font-family: var(--dek-font-display); font-size: 24px;
  font-weight: 700; color: var(--dek-ink); margin-bottom: 8px;
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 30%, transparent 30%); }
.dek-p-steps b { display: block; font-size: 15px; color: var(--dek-ink); margin-bottom: 6px; }
.dek-p-steps p { font-size: 13.5px; line-height: 1.55; color: var(--dek-slate); margin: 0; }

/* ==========================================================================
   10) GYIK
   ========================================================================== */
.dek-p-faq { list-style: none; margin: 0; padding: 0; }
.dek-p-faq li { padding: 18px 0; border-bottom: 1px solid var(--dek-line); }
.dek-p-faq li:first-child { padding-top: 4px; }
.dek-p-faq h3 { font-family: var(--dek-font-display); font-size: 18px;
  margin: 0 0 8px; color: var(--dek-ink); }
.dek-p-faq p { font-size: 14.5px; line-height: 1.65; color: #35393f; margin: 0; max-width: 720px; }

/* ==========================================================================
   11) KATEGORIA-IKONSAV
   ========================================================================== */
.dek-p-catstrip { background: #EDEDE6; border-radius: 3px; padding: 24px 22px 20px; }
.dek-p-catstrip ul {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px;
}
.dek-p-catstrip li a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 104px; padding: 10px 4px 8px;
  font-size: 12.5px; font-weight: 600; color: var(--dek-ink);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.dek-p-catstrip li a:hover { border-bottom-color: var(--dek-accent); }
.dek-p-catstrip-foot { text-align: center; }

/* ==========================================================================
   12) 30 -> 3000+ motivum
   ========================================================================== */
.dek-p-range {
  display: flex; align-items: baseline; gap: 18px; justify-content: center;
  margin: 40px auto 34px; max-width: 560px; position: relative;
}
.dek-p-range-num { font-family: var(--dek-font-display); font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); color: var(--dek-ink); }
.dek-p-range svg { flex: 1 1 auto; height: 20px; color: var(--dek-ink); align-self: center; }
.dek-p-range-note {
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  font-size: 13.5px; color: var(--dek-ink);
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 30%, transparent 30%);
}

/* ==========================================================================
   13) ZARO CTA-SAV
   ========================================================================== */
.dek-p-cta-bar {
  background: #EDEDE6; border-radius: 3px;
  padding: 24px 26px; display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between; margin-top: 8px;
}
.dek-p-cta-bar h2 { font-family: var(--dek-font-display); font-size: clamp(19px, 2.2vw, 25px); margin: 0 0 6px; color: var(--dek-ink); }
.dek-p-cta-bar p { font-size: 14.5px; line-height: 1.6; color: var(--dek-slate); margin: 0; max-width: 560px; }
.dek-p-cta-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   MOBIL
   ========================================================================== */
@media (max-width: 980px) {
  .dek-p-split { grid-template-columns: 1fr; }
  .dek-p-side { position: static; }
  .dek-p-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .dek-p { padding-top: 2px; }
  .dek-p-row, .dek-p-row.dek-p-row-flip { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; }
  .dek-p-row.dek-p-row-flip .dek-p-row-media { order: 0; }
  .dek-p-grid, .dek-p-grid-2, .dek-p-when { grid-template-columns: 1fr; }
  .dek-p-card-photo img { height: 170px; }
  .dek-p-catstrip li a { width: 86px; font-size: 12px; }
  .dek-p-cta-bar { flex-direction: column; align-items: flex-start; }
  .dek-p-cta-bar-actions { width: 100%; }
  .dek-p-cta-bar-actions .dek-p-btn, .dek-p-cta-bar-actions .dek-p-btn-ghost { flex: 1 1 auto; }
  .dek-p-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TERMÉK-ÚTMUTATÓK (inc/kategoria-oldalak.php, 2026-08-27)
   ========================================================================== */

/* Janos kerese (2026-08-29, 9. kor): a kiemelt szakmai mondat NE alljon
   magaban keretezett/szegelyes dobozkent - a tobbi bekezdessel azonos
   ritmusban fusson (a .dek-p-txt tipografiajat oroklo osztaly a PHP oldalon
   mar rakerult), a hangsulyt a mar meglevo .dek-hl dolt+sarga-alahuzas adja. */
.dek-p-pull.dek-p-txt { font-size: 18px; line-height: 1.6; margin: 0 0 16px; }

/* terméknév / kereszthivatkozás link — sárga aláhúzás-sáv */
.dek-p-plink {
  color: var(--dek-ink) !important; font-weight: 700;
  text-decoration: none !important;
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 28%, transparent 28%);
}
.dek-p-plink:hover {
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 100%, transparent 100%);
}

/* sima bekezdés és felsorolás a fő mezőben */
.dek-p-txt { font-size: 15px; line-height: 1.7; color: #35393f; margin: 0 0 14px; max-width: 760px; }
.dek-p-ul { margin: 0 0 14px; padding-left: 20px; font-size: 14.5px; line-height: 1.7; color: #35393f; max-width: 740px; }
.dek-p-ul li { margin-bottom: 6px; }

/* ==========================================================================
   PIKTOGRAM-SAV a Tudastarhoz es a 13 termek-utmutatohoz (2026-09-05).
   A katalogus kategoria-ikonsavanak (.dek-cat-bar, catalog.css) a parja, DE
   az utmutato-oldalakra mutat. A catalog.css ezeken az oldalakon NEM
   toltodik be, ezert a stilus itt, sajat osztalynevekkel all.
   ========================================================================== */
/* Janos kerese (2026-09-05, 2. kor): a sav OLDALBETOLTESKOR NE latszodjon,
   csak gorgeteskor - es akkor AZONNAL tapadva. Ezert `position: fixed`
   (nem sticky): igy a lap tetejen egyaltalan nem foglal helyet, a tartalom
   feljebb kezdodik. A megjelenest a MAR MEGLEVO `body.dek-scrolled`
   osztaly kapcsolja (a fejlec sajat zsugorodas-logikaja allitja, scrollY>40,
   lasd inc/header-footer.php) - nem kellett uj JS. */
/* A burkolo tapad es NULLA magassagu -> nem foglal helyet, viszont a
   tartalom-oszlop szelesseget orokli; a sav benne abszolut, igy pontosan
   a LAP szelessegeben all (nem a teljes nezoablakban). */
.dek-p-ikonsav-wrap {
  position: sticky; top: var(--dek-catbar-top, 78px);
  height: 0; z-index: 95;
}
.dek-p-ikonsav {
  position: absolute; top: 0; left: 0; right: 0;
  margin: 0;
  border-bottom: 1px solid var(--dek-line);
  background: rgba(237, 237, 230, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: none;
  /* A LATHATOSAG kapcsolasa SZANDEKOSAN animacio NELKUL tortenik. A projekt
     2026-08-19-i tanulsaga: funkciot hordozo allapotvaltas nem epulhet
     `transition`-re - egy beragadt animacio (pl. amikor a bongeszo eppen nem
     komponal) veglegesen lathatatlanul hagyna a navigaciot. Animalni csak a
     DEKORATIV elcsuszast animaljuk: ha az ragad be, a sav attol meg lathato
     es hasznalhato marad. */
  opacity: 0; visibility: hidden;
}
body.dek-scrolled .dek-p-ikonsav {
  opacity: 1; visibility: visible;
}
.dek-p-ikonsav::-webkit-scrollbar { display: none; }
/* A piktogramok TELJES SZELESSEGBEN, egyenletesen elosztva (Janos kerese) -
   minden elem ugyanakkora savot kap. */
.dek-p-ikonsav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0; align-items: center;
}
.dek-p-ikonsav li { flex: 1 1 0; min-width: 0; }
.dek-p-ikonsav a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 9px 6px 8px;
  text-decoration: none !important; color: var(--dek-ink) !important;
}
.dek-p-ikonwrap {
  position: relative; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.dek-p-ikonsav .dek-p-ikon,
.dek-p-ikonsav .dek-ico {
  position: relative; z-index: 1;
  width: 34px; height: 34px; object-fit: contain;
  opacity: .5; transition: opacity .15s;
}
.dek-p-ikonsav a:hover .dek-p-ikon,
.dek-p-ikonsav a:hover .dek-ico,
.dek-p-ikonsav a.aktiv .dek-p-ikon,
.dek-p-ikonsav a.aktiv .dek-ico { opacity: 1; }
/* a kezzel rajzolt sarga filc-keret ugyanaz az SVG, mint a katalogusban -
   a stilusa viszont itt is kell (a catalog.css nem toltodik be) */
.dek-p-ikonsav .dek-cat-frame {
  position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px; transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none; overflow: visible;
}
.dek-p-ikonsav .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);
}
.dek-p-ikonsav a:hover .dek-cat-frame path,
.dek-p-ikonsav a:focus-visible .dek-cat-frame path { stroke-dashoffset: 0; }
.dek-p-ikonsav a.aktiv .dek-cat-frame path { stroke-dashoffset: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .dek-p-ikonsav .dek-cat-frame path { transition: none; }
}
/* Janos kerese (2026-09-05): felirat NELKUL, ugyanugy, mint a katalogus
   kategoria-oldalainak tapadt savjan. A szoveg NEM `display:none` - csak
   vizualisan rejtett -, kulonben a linknek nem maradna hozzaferheto neve
   (kepernyoolvaso, kereso). */
/* Gorgetes-jelzo nyilak a sav KET VEGEN (Janos, 2026-09-05: "a ket vegere
   tehetsz ket pici nyilat - jelzeskent"). A burkoloban allnak, NEM a
   navban: a nav a gorgetheto konteiner, egy benne allo abszolut elem a
   TARTALOM koordinatarendszerehez tapadna, tehat elgordulne a szelrol.
   `pointer-events: none` - tisztan jelzes, a huzast nem foghatja el.
   A lathatosagot JS kapcsolja (lasd dekorator_kat_ikonsav()): csak akkor
   all ki, ha abban az iranyban VAN meg ikon. */
.dek-p-ikonsav-nyil {
  position: absolute; top: 0;
  height: var(--dek-p-ikonsav-h, 52px);
  width: 26px; display: none;
  align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.dek-p-ikonsav-wrap.dek-van-bal .dek-p-ikonsav-nyil.bal,
.dek-p-ikonsav-wrap.dek-van-jobb .dek-p-ikonsav-nyil.jobb { display: flex; }
/* A sav maga csak gorgetes utan lathato - a jelzes se ellenkezzen ezzel. */
body:not(.dek-scrolled) .dek-p-ikonsav-nyil { display: none !important; }
.dek-p-ikonsav-nyil.bal {
  left: 0;
  background: linear-gradient(to right, rgba(237,237,230,.96) 55%, rgba(237,237,230,0));
}
.dek-p-ikonsav-nyil.jobb {
  right: 0;
  background: linear-gradient(to left, rgba(237,237,230,.96) 55%, rgba(237,237,230,0));
}
/* A nyil maga ket keretbol hajlitott chevron - betukeszlet-fuggetlen. */
.dek-p-ikonsav-nyil::before {
  content: ""; width: 7px; height: 7px;
  border-right: 1.6px solid var(--dek-ink); border-bottom: 1.6px solid var(--dek-ink);
  opacity: .5;
}
.dek-p-ikonsav-nyil.jobb::before { transform: translateX(-2px) rotate(-45deg); }
.dek-p-ikonsav-nyil.bal::before { transform: translateX(2px) rotate(135deg); }
.dek-p-ikonlabel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Asztalon TAPAD a fejlec ala - a katalogus sajat savjanak mintajara.
   A `--dek-p-ikonsav-h` a stuck magassag: ennyivel csusszon lejjebb az
   utmutato-oldalak kapszula fejezet-navja, hogy a ket sav egymas ALATT
   alljon meg, ne fedjek egymast. Mobilon (a katalogus-savhoz hasonloan)
   nem tapad, csak egy gorgetheto sor - ott a fuggoleges hely a szuk. */
/* A kapszula fejezet-nav a sav ALATT alljon meg (a sav fixed, tehat nem
   tolja lejjebb a folyamot - az eltolast itt kell megadni). */
.dek-p-utmutato .dek-p-fejnav {
  top: calc(var(--dek-catbar-top, 58px) + var(--dek-p-ikonsav-h, 52px));
}
@media (max-width: 640px) {
  /* 14 ikon nem oszthato el egyenletesen 375px-en (elemenkent ~27px) -
     mobilon ezert marad a gorgetheto sor, fix elemszelesseggel. */
  .dek-p-ikonsav li { flex: 0 0 auto; }
  .dek-p-ikonsav a { width: auto; padding: 8px 8px 7px; }
  .dek-p-ikonwrap, .dek-p-ikonsav .dek-p-ikon, .dek-p-ikonsav .dek-ico { width: 30px; height: 30px; }
  .dek-p-ikonsav .dek-cat-frame { width: 44px; height: 44px; }
  .dek-p-ikonsav-nyil { height: var(--dek-p-ikonsav-h-mobil, 48px); width: 22px; }
  .dek-p-utmutato .dek-p-fejnav {
    top: calc(var(--dek-catbar-top, 55px) + var(--dek-p-ikonsav-h-mobil, 48px));
  }
}

/* Tudastar-kartya piktogrammal (2026-09-05) */
.dek-p-card-ikonos { display: flex; gap: 14px; align-items: flex-start; }
.dek-p-card-ikon { flex: 0 0 auto; }
.dek-p-card-ikon img { width: 46px; height: 46px; object-fit: contain; opacity: .62; display: block; }
a.dek-p-card-ikonos:hover .dek-p-card-ikon img { opacity: 1; }
.dek-p-card-ikonos .dek-p-card-txt { min-width: 0; display: block; }

/* ==========================================================================
   TERMEKABLAK - valodi WooCommerce-termek beagyazasa a szoveg kozepen
   (2026-08-28, Janos: "a WooCommerce-es termekablakkal jelenjenek meg").
   Kepe/ara a termek SAJAT get_image()/get_price_html()-jebol jon - ugyanaz
   a kep- es "-tol" ar-logika, mint a katalogus kartyain, nem uj szamitas.
   ========================================================================== */
.dek-p-prod {
  display: block;
  background: #fff; border-radius: 3px; overflow: hidden;
  text-decoration: none !important; color: var(--dek-ink) !important;
  margin: 12px 0 16px; max-width: 460px;
}
.dek-p-prod-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: #EDEDE6; padding: 9px 14px;
}
.dek-p-prod-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.dek-p-prod-meta { font-size: 11px; color: var(--dek-slate-soft); white-space: nowrap; }
.dek-p-prod-body {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
}
.dek-p-prod-thumb {
  flex: 0 0 auto; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.dek-p-prod-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dek-p-prod-price {
  flex: 1 1 auto; font-size: 13.5px; font-weight: 700; color: var(--dek-ink);
  font-variant-numeric: tabular-nums;
}
.dek-p-prod-price .woocommerce-Price-amount { white-space: nowrap; }
.dek-p-prod-arrow { flex: 0 0 auto; font-size: 16px; color: var(--dek-slate); transition: transform .15s; }
.dek-p-prod:hover .dek-p-prod-arrow { transform: translateX(3px); }
/* kartyan belul (dek-p-card) szelesen kitolti a helyet */
.dek-p-card .dek-p-prod { max-width: none; margin: 12px 0 0; }

/* ==========================================================================
   "MŰHELYFÜZET" SZAKASZNYITÓK (2026-08-28, 2. kör — Janos: "rendezetlen,
   találj ki rendszert; a fejezetcímeket jobban emeld ki").
   A termék-útmutatók szakaszai VALÓDI sorrendet hordoznak (mi ez → anyag →
   modellek → dekoráció → GYIK), ezért a számozás információ, nem dísz:
   extra nagy dőlt serif fejezetszám + a megszokott sárga-aláhúzásos cím,
   vékony fejezet-elválasztó vonallal.
   ========================================================================== */
.dek-p-szakasz {
  display: flex; align-items: baseline; gap: 16px;
  margin: 0 0 22px;
}
.dek-p-szam {
  font-family: var(--dek-font-display); font-style: italic; font-weight: 400;
  font-size: 60px; line-height: 0.75; color: #E0DED2;
  flex: 0 0 auto; letter-spacing: -0.02em;
  user-select: none;
}
.dek-p-szakasz-cim {
  /* Janos kerese (2026-08-29, 9. kor): a sarga kiemeles csak a szoveg
     vegeig tartson, ne a teljes (racs-szelessegu) konteinerig - a h2
     alapertelmezett block-viselkedese eddig szelesre nyujtotta a hatteret. */
  display: inline-block;
  font-family: var(--dek-font-display); font-style: italic;
  font-size: 27px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--dek-ink); padding: 1px 10px 3px; border-bottom: 0; line-height: 1.15;
  background: var(--dek-accent);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* Piktogram-változat (?stilus=piktogram): a szám helyett kézzel rajzolt ikon.
   Csak ott, ahol a szakasz deklarál ikont — különben marad a szám. */
.dek-p-szakasz-ico { display: none; color: var(--dek-ink); }
.dek-p-szakasz-ico .dek-ico { width: 42px; height: 42px; display: block; }
body.dek-kstilus-piktogram .dek-p-szakasz-ico { display: block; }
body.dek-kstilus-piktogram .dek-p-szakasz-ico + .dek-p-szam { display: none; }

@media (max-width: 640px) {
  .dek-p-szam { font-size: 42px; } .dek-p-szakasz-cim { font-size: 23px; }
  .dek-p-prod-head { flex-direction: column; gap: 2px; }
  .dek-p-prod-meta { white-space: normal; }
  /* Janos kerese (2026-08-30): a mobil oldalmargo a katalogus-oldalakeval
     (`.dek-cat-bar`/`.dek-catalog-layout`/`ul.products`) egyezzen - azok
     mar korabban (2026-08-19) ugyanezzel a -14px/+28px trukkel szukitettek
     a Storefront-alapertelmezes margojat 20px-re. A tobblet hely (14px
     oldalankent) a kor-nyilaknak is helyet ad a termekcsempeken. */
  .dek-p-utmutato {
    /* a `.dek-p` alaposztaly `max-width:100%`-ja kulon felulirando, kulonben
       CSAK a margo mozdul (a `width` erteket felulrol levagja a max-width). */
    max-width: calc(100% + 28px);
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
  }
}

/* ==========================================================================
   4. KÖR (2026-08-28, a Lovable-mockup alapjan, Janos dontesei szerint):
   kapszula fejezet-nav (sticky) + uj termekcsempe + technologia-hasabok.
   Szinek: a SAJAT tokenek (#FFFF00 akcent, tegla masodszin), redukalt
   radiuszok - kapszula CSAK a fejezet-navon.
   ========================================================================== */

/* ---- sticky kapszula fejezet-nav ---- */
.dek-p-fejnav {
  position: sticky; top: var(--dek-catbar-top, 58px); z-index: 40;
  background: var(--dek-paper);
  margin: 0 0 30px; padding: 10px 0;
  border-bottom: 1px solid var(--dek-line);
  display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.dek-p-fejnav::-webkit-scrollbar { display: none; }
.dek-p-fejnav a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: #E4E4DB; color: var(--dek-ink) !important;
  border-radius: 999px; padding: 7px 15px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none !important; white-space: nowrap;
}
.dek-p-fejnav a b { font-weight: 400; opacity: .55; font-variant-numeric: tabular-nums; }
.dek-p-fejnav a:hover { background: rgba(20,25,31,.05); }
.dek-p-fejnav a.aktiv { background: var(--dek-accent); }
.dek-p-fejnav a.aktiv b { opacity: .7; }

/* horgony-ugras: a sticky nav + fejlec ala erkezzen a szakasz */
.dek-p-szakasz-cimsor { scroll-margin-top: calc(var(--dek-catbar-top, 58px) + 64px); }

/* ---- termekcsempe (mockup-minta a sajat nyelvunkon) ---- */
.dek-p-tilegrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 18px 0 6px;
}
.dek-p-tilegrid.harmas { grid-template-columns: repeat(3, 1fr); }
.dek-p-tile {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 3px; padding: 12px;
  text-decoration: none !important; color: var(--dek-ink) !important;
  /* VALODI HIBA (2026-08-30): grid-elemkent a bongeszo alapertelmezesben
     `min-width: auto`-t hasznal, ami a csempe SAJAT (tordeletlen) tartalmat
     (ar-sor, szin-chip) engedi szelesebbre nyujtani az oszlopnal - emiatt a
     mobil ket-oszlopos racs a kepernyo szelen tul logott. A min-width:0
     felszabaditja a csempet ez alol, igy tenylegesen az ot befogado
     grid-oszlop (lasd `minmax(0,1fr)`) szelessegehez igazodik. */
  min-width: 0;
}
.dek-p-tile-arlink { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: inherit !important; }
.dek-p-tile-kep {
  display: block;
  position: relative; aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden;
  background: var(--dek-well); margin-bottom: 12px;
}
.dek-p-tile-kep img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dek-p-tile-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  background: var(--dek-ink); color: #fff;
  padding: 4px 9px; border-radius: 3px;
}
.dek-p-tile-badge.b-sarga { background: var(--dek-accent); color: var(--dek-ink); }
.dek-p-tile-badge.b-tegla { background: var(--dek-accent2-tegla, #D2624F); color: #fff; }
.dek-p-tile-nev {
  font-family: var(--dek-font-display); font-size: 17px; font-weight: 600;
  line-height: 1.25; margin: 0 0 3px;
}
.dek-p-tile-spec {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dek-slate-soft); margin: 0 0 6px;
}
.dek-p-tile-jegyzet { font-size: 12.5px; line-height: 1.5; color: var(--dek-slate); margin: 0 0 8px; }
.dek-p-tile-szin {
  align-self: flex-start;
  font-size: 11px; font-weight: 600; background: #E4E4DB; color: var(--dek-ink);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.dek-p-tile-lab {
  margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--dek-line); padding-top: 10px;
  /* VALODI HIBA (2026-08-30): nagyon keskeny (auto-fit-tel 2 oszlopra
     kenyszeritett) csempeknel az ar+nyil es az "Ar nyomassal" egy sorban
     nem fert el, es a csempe SZELEN TUL logott - a lap egeszet vizszintesen
     gorgethetove tette. flex-wrap: wrap-pel sziik helyen ket sorra tordel. */
  flex-wrap: wrap;
}
.dek-p-tile-arlabel {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dek-slate-soft); margin-bottom: 2px;
}
.dek-p-tile-ar { font-family: var(--dek-font-display); font-size: 17px; font-weight: 600; }
.dek-p-tile-ar .woocommerce-Price-amount { white-space: nowrap; }
.dek-p-tile-calc {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--dek-accent); color: var(--dek-ink) !important;
  border-radius: 3px; padding: 6px 10px; text-decoration: none !important;
  white-space: nowrap;
}
.dek-p-tile-calc:hover { filter: brightness(.96); }
.dek-p-tile-nev { text-decoration: none !important; color: inherit !important; display: block; }
.dek-p-tile-nev:hover { text-decoration: underline !important; }

/* ---- technologia-hasabok szinkodolt fejleccel ---- */
.dek-p-techpar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0 6px; }
/* Janos kerese (2026-08-29, 9. kor): harom egyenrangu oszlop (pl. szita /
   DTF / himzes) egymas mellett, ha a hivo harmadik parametert is atad. */
.dek-p-techpar.harmas { grid-template-columns: repeat(3, 1fr); }
.dek-p-techpar-col { background: #fff; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.dek-p-techpar-fej {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 16px 18px;
}
.dek-p-techpar-fej.f-sotet { background: var(--dek-ink); color: #fff; }
.dek-p-techpar-fej.f-sarga { background: var(--dek-accent); color: var(--dek-ink); }
.dek-p-techpar-fej.f-tegla { background: var(--dek-accent2-tegla, #D2624F); color: #fff; }
/* elmentett masodlagos/kiegeszito szinek (2026-08-14-i paletta) - ugyanaz a
   technologia-szin-terkep, mint a belso kalkulatoron: szita=oliva,
   transzfer/DTF=turkiz, himzes=oliva-deep. */
.dek-p-techpar-fej.f-oliva { background: var(--dek-accent2-oliva, #B9C62B); color: var(--dek-ink); }
.dek-p-techpar-fej.f-oliva-deep { background: var(--dek-accent2-oliva-deep, #A4B422); color: #fff; }
.dek-p-techpar-fej.f-turkiz { background: var(--dek-accent2-turkiz, #3FB5A6); color: #fff; }
.dek-p-techpar-fej.f-malyva { background: var(--dek-accent2-malyva, #D283C2); color: #fff; }
.dek-p-techpar-fej h3 { font-family: var(--dek-font-display); font-size: 20px; font-weight: 600; margin: 0; color: inherit; }
.dek-p-techpar-fej span { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.dek-p-techpar-torzs { padding: 14px 18px 16px; }
.dek-p-techpar-torzs ul { list-style: none; margin: 0 0 10px; padding: 0; }
.dek-p-techpar-torzs li {
  font-size: 13.5px; line-height: 1.5; color: #35393f;
  padding: 7px 0; border-bottom: 1px solid var(--dek-line);
}
.dek-p-techpar-torzs li:last-child { border-bottom: 0; }
.dek-p-techpar-torzs p { font-size: 12.5px; line-height: 1.55; color: var(--dek-slate); margin: 4px 0 0; }

@media (max-width: 980px) {
  /* VALODI HIBA (2026-08-30): a "pontosan 2 oszlop" szabaly (repeat(2,1fr))
     tulcsordult, mert a grid-elemek alapertelmezett `min-width: auto`-ja
     miatt a csempek SAJAT (tordeletlen) tartalma (pl. az ar-sor, a
     szin-chip) szelesebbre kenyszeritette a oszlopot, mint amit az 1fr
     aranyszamitas szant neki - Janos VALODI TELEFONON is megerositette:
     "a ket csempe egymas mellett jo, de az osszes szelessegenek a menu
     szelessege kellene legyen". A `minmax(0, 1fr)` (nem sima `1fr`) ELOIRJA,
     hogy az oszlop 0-ig zsugorodhat, ha a tartalom enged - lasd a
     `.dek-p-tile { min-width: 0 }` parjat is lentebb, ami MAGAT a csempet
     is felszabaditja a sajat tartalmanak min-content-korlatja alol. */
  .dek-p-tilegrid, .dek-p-tilegrid.harmas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* VALODI HIBA (2026-08-29): a .dek-p-techpar.harmas (0,2,0) magasabb
     specificitasu, mint az itteni csupasz .dek-p-techpar (0,1,0), ezert
     enelkul a harom-oszlopos techpar mobilon nem csukodott ossze - a
     .harmas-t is fel kell sorolni, kulon-kulon a ket szelesseghez igazitva
     (ket oszlop 980px alatt, egy oszlop 640px alatt). */
  .dek-p-techpar, .dek-p-techpar.harmas { grid-template-columns: 1fr; }
}
/* ==========================================================================
   5. KOR (2026-08-28, Janos: "nem igazan hasonlit") - a mockup TENYLEGES
   elrendezese: keskeny, kozepre zart hasab OLDALSAV NELKUL, nagy hero-cim,
   fejezetszam bal hasabban a tartalom mellett, korvonalas kapszula-nav,
   levegosebb csempek. Az "Innen folytasd" a lap aljara koltozott.
   ========================================================================== */

/* Janos kerese (2026-08-29): "az oldal szelessege illeszkedjen a menu
   szelessegehez" - onallo szelesseg-korlat NELKUL a .dek-p alapertelmezese
   (max-width:100% a .col-full-on belul) ervenyesul, ami PONTOSAN a
   fejlec-menu szelessege (ugyanaz a .col-full konteiner). */

/* nagy hero-cim */
.dek-p-utmutato .dek-p-eyebrow {
  border-bottom: 0; padding-bottom: 0; color: var(--dek-accent2-tegla, #D2624F);
  letter-spacing: .2em; font-size: 11.5px;
}
.dek-p-utmutato .dek-p-eyebrow::before {
  content: ""; display: inline-block; width: 34px; height: 1px;
  background: var(--dek-ink); vertical-align: middle; margin-right: 12px; opacity: .5;
}
.dek-p-utmutato .dek-p-head h1 {
  font-size: clamp(42px, 6.2vw, 74px); line-height: 1.02; letter-spacing: -0.015em;
  font-weight: 600; max-width: 980px; margin: 0 0 28px;
}
/* Janos kerese: 2 uresnyi sor az eyebrow FOLOTT, es levego a nagy cim ALATT. */
.dek-p-utmutato .dek-p-head { padding-top: 62px; margin-bottom: 28px; }
.dek-p-utmutato .dek-p-lead { font-size: 16px; max-width: 560px; }

/* Janos kerese (2026-08-29, 9. kor): a hero-kep teljes szelesseg, kb 16:9
   arany - a korabbi rogzitett-magassagu (clamp) valtozat helyett. */
.dek-p-utmutato .dek-p-hero-img img { aspect-ratio: 16 / 9; height: auto; width: 100%; object-fit: cover; }
.dek-p-utmutato .dek-p-hero-img { margin-bottom: 22px; }

/* korvonalas kapszula-nav - NINCS kitoltes, csak kontur (Janos, 2026-08-29),
   vekony vonal zarja le a hero-t alatta. */
.dek-p-utmutato .dek-p-fejnav {
  border-bottom: 1px solid var(--dek-line); padding: 12px 0 20px; margin-bottom: 40px;
}
.dek-p-utmutato .dek-p-fejnav a {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--dek-line-strong);
}
.dek-p-utmutato .dek-p-fejnav a:hover { background: rgba(20,25,31,.04); }
.dek-p-utmutato .dek-p-fejnav a.aktiv { background: var(--dek-accent); box-shadow: none; }
.dek-p-utmutato .dek-p-fejnav a.kulon { background: transparent; }

/* fejezet-racs (2026-08-29, atszervezve): a CIM onallo, teljes szelessegu
   sor legelöl; a fejezetszam a KOVETKEZO tartalmi elem (az elso bekezdes)
   mellett all, kulon oszlopban. A `.dek-p-szakasz-jel` VALODI doboz (nem
   display:contents), ezert a kapszula-nav horgony-ugrasa is mukodik ra -
   a korabbi <header> valtozat display:contents volt, aminek nincs
   geometriaja, ezert a bongeszo nem tudott ra gorditeni. */
.dek-p-utmutato .dek-p-block {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 22px;
  padding-top: 24px; margin-bottom: 64px;
}
.dek-p-utmutato .dek-p-torzs > .dek-p-block:first-child { padding-top: 0; }
.dek-p-utmutato .dek-p-block > * { grid-column: 2; min-width: 0; }
.dek-p-utmutato .dek-p-szakasz-cimsor { grid-column: 2; margin: 0 0 22px; }
.dek-p-utmutato .dek-p-szakasz-jel { grid-column: 1; align-self: start; }
.dek-p-utmutato .dek-p-szam { font-size: 68px; white-space: nowrap; }
.dek-p-utmutato .dek-p-txt { max-width: 660px; }
.dek-p-utmutato .dek-p-pull { max-width: 660px; }
/* a termek-racs es a technologia-hasabpar TELJES szelessegben, kilepve a
   szoveg-oszlopbol (Janos kerese). */
.dek-p-utmutato .dek-p-tilegrid,
.dek-p-utmutato .dek-p-techpar { grid-column: 1 / -1; }
/* 2026-08-31: opt-in teljes-szelesseg barmely mas blokknak (a szitanyomas
   technologia-oldal galeriaja). SZANDEKOSAN kulon modosito osztaly, NEM a
   `.dek-p-grid`-re altalanosan - azt a 13 termek-utmutato kartya-racsa is
   hasznalja, es ott a szoveg-oszlopban kell maradnia. */
.dek-p-utmutato .dek-p-teljes { grid-column: 1 / -1; }

/* csempe-finomitas: nev-sor melle a szin-chip, uj lab */
.dek-p-tile {
  border-radius: 6px; padding: 12px 14px 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.dek-p-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(20,25,31,.12); }
.dek-p-tile-kep { border-radius: 6px; overflow: hidden; }
.dek-p-tile-kep img { border-radius: 6px; }
.dek-p-tile-badge {
  top: 10px; left: 10px; border-radius: 999px; padding: 5px 12px;
  box-shadow: 0 1px 0 rgba(20,25,31,.08);
}
.dek-p-tile-fejsor { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dek-p-tile-fejsor .dek-p-tile-szin { margin: 2px 0 0; flex: 0 0 auto; }
.dek-p-tile-nev { flex: 1 1 auto; }
.dek-p-tile-lab { border-top: 0; padding-top: 8px; align-items: center; }
.dek-p-tile-calc2 { margin-top: 0; }
.dek-p-tile-ar { font-size: 18px; white-space: nowrap; }
.dek-p-tile-ar small, .dek-p-tile-ar .dek-card-outletjel { font-size: 11px; }
.dek-p-tile-nyil {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--dek-line-strong);
  color: var(--dek-ink); font-size: 15px; transition: transform .15s;
}
.dek-p-tile:hover .dek-p-tile-nyil { transform: translateX(2px); background: var(--dek-accent); box-shadow: inset 0 0 0 1px rgba(20,25,31,.3); }
.dek-p-tile-calc2 {
  display: inline-block; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dek-ink) !important; text-decoration: none !important;
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 30%, transparent 30%);
}
.dek-p-tile-calc2:hover { background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 100%, transparent 100%); }

/* "Innen folytasd" zaro-blokk. 9. kor (2026-08-29), Janos csatolt kepe
   alapjan: 4 egyenlo kartya egy sorban, REDUKALT radiusszal (a sajat 6px-es
   rendszerunk, nem a mockup nagyobb rounded-je); alatta teljes szelessegben
   a "Tobbi utmutato" chip-sor - korabban ket oszlopban allt egymas mellett. */
/* Janos kerese (2026-08-30): a Gyakori kerdesek UTAN nem kell elvalaszto
   vonal a "Hogyan tovabb" szekcio elott - a fuggoleges terkoz eleg tagolas. */
.dek-p-tovabb { padding-top: 24px; margin-bottom: 56px; }
.dek-p-tovabb-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dek-accent2-tegla, #D2624F); margin-bottom: 20px;
}
.dek-p-tovabb-eyebrow span { flex: 1 1 auto; height: 1px; background: var(--dek-line); }
.dek-p-tovabb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; }
.dek-p-tovabb-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: 6px; padding: 20px 20px 44px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.dek-p-tovabb-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(20,25,31,.1); }
/* teljes-kartya link - ures <a>, hogy a wpautop() ne nyulhasson a benne
   allo h3/p-hez (lasd a PHP oldali megjegyzest a valodi hibarol). */
.dek-p-tovabb-stretch { position: absolute; inset: 0; z-index: 1; }
.dek-p-tovabb-stretch:focus-visible { outline: 2px solid var(--dek-ink); outline-offset: 2px; }
.dek-p-tovabb-card h3 {
  display: inline-block;
  font-family: var(--dek-font-display); font-style: italic; font-weight: 600;
  font-size: 17px; line-height: 1.25; margin: 0 0 8px;
  background-image: linear-gradient(to top, var(--dek-accent) 0%, var(--dek-accent) 26%, transparent 26%);
}
.dek-p-tovabb-card p { font-size: 12.5px; line-height: 1.55; color: var(--dek-slate); margin: 0; }
/* a nyil egyezzen a termekcsempek koros nyilaval (.dek-p-tile-nyil masa) */
.dek-p-tovabb-nyil {
  position: absolute; right: 20px; bottom: 18px;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--dek-line-strong);
  color: var(--dek-ink); font-size: 14px; transition: transform .15s, background .15s, box-shadow .15s;
}
.dek-p-tovabb-card:hover .dek-p-tovabb-nyil {
  transform: translateX(2px); background: var(--dek-accent);
  box-shadow: inset 0 0 0 1px rgba(20,25,31,.3);
}
/* Janos kerese: a "Hogyan tovabb" kartyak UTAN sincs elvalaszto vonal, es a
   "Tobbi utmutato" cimsora PONTOSAN ugyanaz az osztaly ("dek-p-tovabb-
   eyebrow"), mint a "Hogyan tovabb" cime - kulon modosito nelkul. Ehhez a
   cimsor onallo, teljes szelessegu sorban all, a chipek pedig ALATTA,
   kulon sorban - igy a melletti vonalka mindket helyen egyforma hosszan
   fut ki a szoveg utan. */
.dek-p-tovabb-also { padding-top: 8px; }
.dek-p-tovabb-chipek { display: flex; flex-wrap: wrap; gap: 8px; }
.dek-p-tovabb-chipek a {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--dek-paper-raised); box-shadow: inset 0 0 0 1px var(--dek-line);
  border-radius: 999px; padding: 8px 15px;
  color: var(--dek-ink) !important; text-decoration: none !important;
}
.dek-p-tovabb-chipek a:hover { background: var(--dek-accent); box-shadow: none; }

@media (max-width: 760px) {
  .dek-p-utmutato .dek-p-block { display: block; }
  .dek-p-utmutato .dek-p-szakasz-jel { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
  .dek-p-utmutato .dek-p-szam { font-size: 40px; }
  .dek-p-tovabb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dek-p-tovabb-grid { grid-template-columns: 1fr 1fr; }
}

/* 6. kor finomitasok (2026-08-28, kepernyokep-osszevetes) */
/* a .dek-p-tile-lab MOSTANTOL egy DIV (nem <a>), ket kulon linket fog
   kozre - az alahuzas-tiltas ezert a benne allo linkekre vonatkozik. */
.dek-p-tile-lab a, .dek-p-tile-lab a:hover {
  text-decoration: none !important;
}
.dek-p-tile-arlink { color: inherit !important; }
/* ar: az elso osszeg a hangsulyos, az elvalaszto, a felso hatar es a
   Ft-jel halkabb (mockup-minta: "304 – 528 Ft" hatas) */
.dek-p-tile-ar { font-size: 19px; }
.dek-p-tile-ar .woocommerce-Price-amount ~ .woocommerce-Price-amount {
  font-size: 13px; font-weight: 400; color: var(--dek-slate);
}
.dek-p-tile-ar > span[aria-hidden]:not(.woocommerce-Price-amount) {
  font-size: 13px; font-weight: 400; color: var(--dek-slate);
}
.dek-p-tile-ar .woocommerce-Price-currencySymbol { font-size: 12px; font-weight: 400; color: var(--dek-slate); }
.dek-p-tile-ar small { font-weight: 400; color: var(--dek-slate); }

/* 7. kor (2026-08-28): hero CTA-sor + pottyracs-hatter */
.dek-p-herocta {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  margin: -6px 0 4px;
}
.dek-p-herocta-fo {
  display: inline-flex; align-items: center;
  background: var(--dek-ink); color: #fff !important;
  border-radius: 999px; padding: 11px 22px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none !important;
}
.dek-p-herocta-fo:hover { background: var(--dek-ink-soft); }
.dek-p-herocta-vonal { width: 42px; height: 1px; background: var(--dek-ink); opacity: .35; }
.dek-p-herocta-mellek {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dek-slate) !important; text-decoration: none !important;
}
.dek-p-herocta-mellek:hover { color: var(--dek-ink) !important; }
@media (max-width: 760px) {
  .dek-p-herocta { justify-content: flex-start; flex-wrap: wrap; }
  .dek-p-herocta-vonal { display: none; }
}

/* halvany pottyracs a lap papirjan — csak az utmutato-oldalakon */
body.dek-utmutato-oldal {
  background-image: radial-gradient(rgba(20, 25, 31, 0.055) 1px, transparent 1.5px);
  background-size: 24px 24px;
}