/* Velem Lehet Beszelgetni - Szolgaltatasaink widget stilusai
 * Eleresi ut a szerveren: /portfolio_api/szolgaltatasok.css
 * A widget HTML-je ?v= verzioszammal hivatkozik ra - csere utan azt is emeld.
 */
/* ============ valtozok: a widgetnek es a body-ra tett retegnek is ============ */
.vlbp-gyoker, .vlbp-reteg {
  --sarga:      #FFDB1F;
  --zold:       #829A79;
  --zold-sotet: #6E8565;
  --sarga-halv: #FFFBE6;
  --fekete:     #111111;
  --piros:      #FF1100;
  --feher:      #FFFFFF;
  --szurke:     #F5F5F5;
  --szurke-ker: #E0E0E0;
  --display:    'Bebas Neue', Impact, sans-serif;
  --body:       'Inter', system-ui, sans-serif;
  font-family: var(--body);
  color: var(--fekete);
  font-size: 16px;
  line-height: 1.6;
}
.vlbp-gyoker { max-width: 1120px; margin: 0 auto; padding: 0 4px 8px; box-sizing: border-box; }
.vlbp-gyoker *, .vlbp-gyoker *::before, .vlbp-gyoker *::after,
.vlbp-reteg *, .vlbp-reteg *::before, .vlbp-reteg *::after { box-sizing: border-box; }

/* a tema stilusai ne irjak felul a widget tipografiajat */
.vlbp-gyoker p, .vlbp-gyoker h1, .vlbp-gyoker h2, .vlbp-gyoker h3, .vlbp-gyoker li, .vlbp-gyoker span,
.vlbp-gyoker a, .vlbp-gyoker button, .vlbp-gyoker div,
.vlbp-reteg p, .vlbp-reteg h2, .vlbp-reteg h3, .vlbp-reteg li,
.vlbp-reteg span, .vlbp-reteg a, .vlbp-reteg button, .vlbp-reteg div { font-family: inherit; }
.vlbp-gyoker h1, .vlbp-gyoker h2, .vlbp-gyoker h3,
.vlbp-reteg h2, .vlbp-reteg h3 { text-transform: none; font-weight: 400; }
.vlbp-gyoker a, .vlbp-reteg a { text-decoration: none; }
.vlbp-gyoker button, .vlbp-reteg button { text-transform: none; }
.vlbp-gyoker p, .vlbp-reteg p { margin: 0 0 14px; }
.vlbp-gyoker ul, .vlbp-reteg ul { margin: 0; padding: 0; list-style: none; }

/* ============ gombok (kozos) ============ */
.vlbp-gyoker .vlbp-gomb, .vlbp-reteg .vlbp-gomb {
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  padding: 7px 14px 5px;
  border: 2px solid var(--fekete);
  background: var(--feher);
  color: var(--fekete);
  cursor: pointer;
  line-height: 1.25;
  display: inline-block;
  border-radius: 0;
}
.vlbp-gyoker .vlbp-gomb:hover, .vlbp-reteg .vlbp-gomb:hover { background: var(--sarga); color: var(--fekete) !important; }
.vlbp-gyoker .vlbp-gomb:focus-visible, .vlbp-reteg .vlbp-gomb:focus-visible { outline: 3px solid var(--piros); outline-offset: 2px; }
.vlbp-gyoker .vlbp-gomb-fo, .vlbp-reteg .vlbp-gomb-fo { background: var(--fekete); color: var(--sarga); }
.vlbp-gyoker .vlbp-gomb-fo:hover, .vlbp-reteg .vlbp-gomb-fo:hover { background: var(--piros); border-color: var(--piros); color: var(--feher) !important; }
.vlbp-gyoker .vlbp-gomb-pdf::after, .vlbp-reteg .vlbp-gomb-pdf::after { content: ' \2193'; }

/* kosar-gomb: allapotot mutat */
.vlbp-gyoker .vlbp-kosar-gomb[aria-pressed="true"],
.vlbp-reteg .vlbp-kosar-gomb[aria-pressed="true"] { background: var(--sarga); }
.vlbp-gyoker .vlbp-kosar-gomb[aria-pressed="true"]::before,
.vlbp-reteg .vlbp-kosar-gomb[aria-pressed="true"]::before { content: '\2713  '; }
.vlbp-gyoker .vlbp-kosar-gomb[aria-pressed="false"]::before,
.vlbp-reteg .vlbp-kosar-gomb[aria-pressed="false"]::before { content: '+ '; }

/* ============ banner ============ */
.vlbp-gyoker .vlbp-banner {
  background: var(--sarga);
  border: 3px solid var(--fekete);
  box-shadow: 8px 8px 0 0 var(--fekete);
  padding: 30px 26px 0;
  margin: 0 0 40px;
}
.vlbp-gyoker .vlbp-cim {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--fekete);
  margin: 0 0 12px;
}
.vlbp-gyoker .vlbp-lead { font-size: 1.15rem; line-height: 1.55; max-width: 52ch; color: var(--fekete); margin: 0 0 26px; }

.vlbp-gyoker .vlbp-szuro-sav {
  background: var(--zold);
  margin: 0 -26px;
  padding: 16px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.vlbp-gyoker .vlbp-szuro-cimke {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--fekete);
  margin: 0;
  white-space: nowrap;
}
.vlbp-gyoker .vlbp-szuro { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; flex: 1; }
.vlbp-gyoker .vlbp-chip {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  background: var(--feher);
  color: var(--fekete);
  border: 3px solid var(--fekete);
  padding: 6px 14px 4px;
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  border-radius: 0;
}
.vlbp-gyoker .vlbp-chip:hover { background: var(--sarga); border-color: var(--fekete); }
.vlbp-gyoker .vlbp-chip:focus-visible { outline: 3px solid var(--fekete); outline-offset: 3px; }
.vlbp-gyoker .vlbp-chip[aria-pressed="true"] {
  background: var(--fekete);
  color: var(--sarga);
  border-color: var(--fekete);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.7);
}
.vlbp-gyoker .vlbp-chip[aria-pressed="true"]:hover { background: var(--fekete); color: var(--sarga) !important; }
.vlbp-gyoker .vlbp-chip.ures { opacity: 0.45; }

/* masodik sor: temaszuro */
.vlbp-gyoker .vlbp-szuro-sav-tema {
  background: var(--zold-sotet);
  border-top: 3px solid var(--fekete);
}
.vlbp-gyoker .vlbp-chip-db { font-family: var(--body); font-size: 0.72rem; font-weight: 600; opacity: 0.6; }
.vlbp-gyoker .vlbp-talalat {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--fekete);
  margin-left: auto;
  white-space: nowrap;
}

/* ============ kiemelt sav ============ */
.vlbp-gyoker .vlbp-kiemelt {
  background: var(--zold);
  border: 3px solid var(--fekete);
  padding: 26px 26px 28px;
  margin: 0 0 48px;
}
.vlbp-gyoker .vlbp-kiemelt[hidden] { display: none; }
.vlbp-gyoker .vlbp-kiemelt-fej { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.vlbp-gyoker .vlbp-kiemelt-fej h2 {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--fekete);
  margin: 0;
}
.vlbp-gyoker .vlbp-kiemelt-szoveg { color: rgba(0,0,0,0.78); font-size: 0.92rem; margin: 0 0 20px; }
.vlbp-gyoker .vlbp-kiemelt-racs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vlbp-gyoker .vlbp-kiemelt-kartya {
  background: var(--feher);
  border: 3px solid var(--fekete);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vlbp-gyoker .vlbp-kiemelt-kartya.kivalasztva { border-color: var(--sarga); box-shadow: 0 0 0 3px var(--sarga); }
.vlbp-gyoker .vlbp-kiemelt-jelzes {
  align-self: flex-start;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  background: var(--piros);
  color: var(--feher);
  padding: 2px 9px 0;
  margin: 0 0 10px;
}
.vlbp-gyoker .vlbp-kiemelt-kartya h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.vlbp-gyoker .vlbp-kiemelt-alcim { font-size: 0.8rem; color: #555; line-height: 1.45; margin: 0 0 12px; flex: 1; }
.vlbp-gyoker .vlbp-kiemelt-ar {
  align-self: flex-start;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  background: var(--sarga);
  border: 2px solid var(--fekete);
  padding: 3px 11px 1px;
  margin: 0 0 12px;
}
.vlbp-gyoker .vlbp-kiemelt-gombok { display: flex; flex-wrap: wrap; gap: 7px; }

/* ============ csoportok ============ */
.vlbp-gyoker .vlbp-csoport { margin: 0 0 48px; }
.vlbp-gyoker .vlbp-csoport-fej {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 3px solid var(--fekete);
  padding: 0 0 10px;
  margin: 0 0 22px;
}
.vlbp-gyoker .vlbp-ikon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: var(--sarga);
  border: 3px solid var(--fekete);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fekete);
}
.vlbp-gyoker .vlbp-ikon svg { width: 24px; height: 24px; display: block; }
.vlbp-gyoker .vlbp-kiemelt-fej .vlbp-ikon { border-color: var(--fekete); }
.vlbp-gyoker .vlbp-csoport-fej h2 {
  font-family: var(--display);
  font-size: 1.9rem;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
}
.vlbp-gyoker .vlbp-csoport-db {
  margin-left: auto;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: #666;
  white-space: nowrap;
}

/* ============ racs + kartya ============ */
.vlbp-gyoker .vlbp-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.vlbp-gyoker .vlbp-kartya {
  background: var(--feher);
  border: 3px solid var(--fekete);
  box-shadow: 6px 6px 0 0 var(--fekete);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vlbp-gyoker .vlbp-kartya.kivalasztva { box-shadow: 6px 6px 0 0 var(--piros); }
@media (hover: hover) {
  .vlbp-gyoker .vlbp-kartya:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 0 var(--fekete); }
  .vlbp-gyoker .vlbp-kartya.kivalasztva:hover { box-shadow: 9px 9px 0 0 var(--piros); }
  .vlbp-gyoker .vlbp-kiemelt-kartya:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 0 var(--sarga); }
}

.vlbp-gyoker .vlbp-kategoria-sav {
  background: var(--sarga);
  border-bottom: 3px solid var(--fekete);
  padding: 6px 14px 4px;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vlbp-gyoker .vlbp-kategoria-sav svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: -2px; }
.vlbp-gyoker .vlbp-kategoria-nev { flex: 1; }
.vlbp-gyoker .vlbp-kategoria-sav { min-height: 14px; }
.vlbp-gyoker .vlbp-kategoria-nev:empty + .vlbp-jelzes { margin-left: auto; }
.vlbp-gyoker .vlbp-jelzes {
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  background: var(--piros);
  color: var(--feher);
  padding: 2px 9px 0;
  white-space: nowrap;
}

.vlbp-gyoker .vlbp-test { padding: 18px 18px 0; flex: 1; display: flex; flex-direction: column; }
.vlbp-gyoker .vlbp-kartya h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.vlbp-gyoker .vlbp-cim-gomb {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  line-height: inherit;
}
.vlbp-gyoker .vlbp-cim-gomb:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--sarga); text-underline-offset: 3px; }
.vlbp-gyoker .vlbp-cim-gomb:focus-visible { outline: 3px solid var(--piros); outline-offset: 2px; }
.vlbp-gyoker .vlbp-alcim { font-size: 0.82rem; line-height: 1.45; color: #555; margin: 0 0 10px; }
.vlbp-gyoker .vlbp-kinek {
  font-size: 0.8rem;
  font-weight: 600;
  border-left: 4px solid var(--sarga);
  padding-left: 10px;
  margin: 0 0 10px;
}
.vlbp-gyoker .vlbp-leiras {
  font-size: 0.9rem;
  color: #333;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vlbp-gyoker .vlbp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 16px; padding-top: 4px; }
.vlbp-gyoker .vlbp-forma, .vlbp-gyoker .vlbp-ar {
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 5px 10px;
  border: 2px solid var(--szurke-ker);
  background: var(--szurke);
  color: #333;
}
.vlbp-gyoker .vlbp-ar {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  background: var(--sarga);
  border-color: var(--fekete);
  color: var(--fekete);
  padding: 5px 12px 3px;
}
.vlbp-gyoker .vlbp-labl { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }

.vlbp-gyoker .vlbp-nincs { border: 3px dashed var(--fekete); padding: 22px; font-size: 0.95rem; margin: 0; }
.vlbp-gyoker .vlbp-nincs[hidden] { display: none; }

/* ============ also savok ============ */
.vlbp-gyoker .vlbp-webshop {
  margin-top: 12px;
  background: var(--zold);
  border: 3px solid var(--fekete);
  color: var(--fekete);
  padding: 26px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.vlbp-gyoker .vlbp-webshop h2 { font-family: var(--display); font-size: 2rem; letter-spacing: 0.04em; color: var(--fekete); margin: 0 0 6px; line-height: 1; }
.vlbp-gyoker .vlbp-webshop p { margin: 0; font-size: 0.92rem; color: rgba(0,0,0,0.8); max-width: 52ch; }
.vlbp-gyoker .vlbp-webshop .vlbp-gomb { background: var(--fekete); color: var(--sarga); border-color: var(--fekete); font-size: 1.05rem; padding: 11px 24px 8px; }
.vlbp-gyoker .vlbp-webshop .vlbp-gomb:hover { background: var(--piros); border-color: var(--piros); color: var(--feher) !important; }
.vlbp-gyoker .vlbp-kapcsolat { margin-top: 18px; background: var(--sarga); border: 3px solid var(--fekete); padding: 26px 24px; }
.vlbp-gyoker .vlbp-kapcsolat h2 { font-family: var(--display); font-size: 2rem; letter-spacing: 0.04em; margin: 0 0 8px; line-height: 1; }
.vlbp-gyoker .vlbp-kapcsolat p { max-width: 62ch; font-size: 0.95rem; }
.vlbp-gyoker .vlbp-kapcsolat .vlbp-gomb { background: var(--fekete); color: var(--sarga); font-size: 1.05rem; padding: 11px 24px 8px; }
.vlbp-gyoker .vlbp-kapcsolat .vlbp-gomb:hover { background: var(--piros); border-color: var(--piros); color: var(--feher) !important; }
.vlbp-gyoker .vlbp-email { display: block; margin-top: 12px; font-size: 0.85rem; color: var(--fekete); }

/* ============ reteg: hatter, panel, kosar ============ */
.vlbp-reteg .vlbp-hatter {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.55);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.vlbp-reteg .vlbp-hatter.nyitva { opacity: 1; pointer-events: auto; }

.vlbp-reteg .vlbp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(500px, 94vw);
  background: var(--feher);
  border-left: 3px solid var(--fekete);
  z-index: 100001;
  transform: translateX(105%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.vlbp-reteg .vlbp-panel.nyitva { transform: none; visibility: visible; }
.vlbp-reteg .vlbp-panel-fej {
  background: var(--sarga);
  border-bottom: 3px solid var(--fekete);
  padding: 12px 14px 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.vlbp-reteg .vlbp-panel-kat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}
.vlbp-reteg .vlbp-panel-kat svg { width: 18px; height: 18px; margin-top: -2px; }
.vlbp-reteg .vlbp-panel-zar {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  background: var(--fekete);
  color: var(--sarga);
  border: 2px solid var(--fekete);
  padding: 6px 12px 4px;
  cursor: pointer;
  border-radius: 0;
}
.vlbp-reteg .vlbp-panel-zar:hover { background: var(--piros); border-color: var(--piros); color: var(--feher) !important; }
.vlbp-reteg .vlbp-panel-zar:focus-visible { outline: 3px solid var(--piros); outline-offset: 2px; }
.vlbp-reteg .vlbp-panel-test { flex: 1; overflow-y: auto; padding: 22px 22px 8px; -webkit-overflow-scrolling: touch; }
.vlbp-reteg .vlbp-panel-test h2 {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}
.vlbp-reteg .vlbp-panel-jelzes {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  background: var(--piros);
  color: var(--feher);
  padding: 2px 9px 0;
  margin: 0 0 12px;
}
.vlbp-reteg .vlbp-panel-alcim { font-size: 0.9rem; color: #555; margin: 0 0 16px; }
.vlbp-reteg .vlbp-panel-leiras { font-size: 0.95rem; color: #222; margin: 0 0 20px; }
.vlbp-reteg .vlbp-panel-blokk { margin: 0 0 20px; }
.vlbp-reteg .vlbp-panel-blokk-cim {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--piros);
  margin: 0 0 8px;
}
.vlbp-reteg .vlbp-panel-blokk p { font-size: 0.92rem; margin: 0; }
.vlbp-reteg .vlbp-panel-lista li {
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 6px 0 6px 20px;
  border-bottom: 1px solid var(--szurke-ker);
  position: relative;
}
.vlbp-reteg .vlbp-panel-lista li:last-child { border-bottom: none; }
.vlbp-reteg .vlbp-panel-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 9px;
  height: 9px;
  background: var(--sarga);
  border: 2px solid var(--fekete);
}
.vlbp-reteg .vlbp-panel-ar {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  background: var(--sarga);
  border: 3px solid var(--fekete);
  padding: 4px 14px 2px;
}
.vlbp-reteg .vlbp-panel-linkek { display: flex; flex-wrap: wrap; gap: 8px; }
.vlbp-reteg .vlbp-panel-lab {
  flex: 0 0 auto;
  border-top: 3px solid var(--fekete);
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--feher);
}
.vlbp-reteg .vlbp-panel-lab .vlbp-gomb { font-size: 1rem; padding: 10px 16px 8px; }

/* ---- kosar sav ---- */
.vlbp-reteg .vlbp-kosar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  width: min(760px, calc(100% - 24px));
  transform: translate(-50%, 180%);
  background: var(--zold);
  color: var(--fekete);
  border: 3px solid var(--fekete);
  box-shadow: 6px 6px 0 0 var(--fekete);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  z-index: 99990;
  transition: transform 0.22s ease;
}
.vlbp-reteg .vlbp-kosar.lathato { transform: translate(-50%, 0); }
.vlbp-reteg .vlbp-kosar-db {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--fekete);
  flex: 1;
  min-width: 150px;
}
.vlbp-reteg .vlbp-kosar .vlbp-gomb { border-color: var(--fekete); }
.vlbp-reteg .vlbp-kosar .vlbp-gomb-fo { background: var(--fekete); color: var(--sarga); border-color: var(--fekete); font-size: 1rem; }
.vlbp-reteg .vlbp-kosar .vlbp-gomb-fo:hover { background: var(--piros); border-color: var(--piros); color: var(--feher) !important; }
.vlbp-reteg .vlbp-kosar-urit {
  background: none;
  border: 0;
  color: rgba(0,0,0,0.72);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.vlbp-reteg .vlbp-kosar-urit:hover { color: var(--fekete) !important; }
.vlbp-reteg .vlbp-kosar-lista {
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: calc(100% + 10px);
  background: var(--feher);
  color: var(--fekete);
  border: 3px solid var(--fekete);
  box-shadow: 6px 6px 0 0 var(--fekete);
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px 0;
}
.vlbp-reteg .vlbp-kosar-lista[hidden] { display: none; }
.vlbp-reteg .vlbp-kosar-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--szurke-ker);
  font-size: 0.9rem;
}
.vlbp-reteg .vlbp-kosar-lista li:last-child { border-bottom: none; }
.vlbp-reteg .vlbp-kosar-lista li span { flex: 1; }
.vlbp-reteg .vlbp-kosar-torol {
  background: none;
  border: 2px solid var(--fekete);
  width: 28px;
  height: 28px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.vlbp-reteg .vlbp-kosar-torol:hover { background: var(--piros); border-color: var(--piros); color: var(--feher) !important; }

/* ============ mobil ============ */
@media (max-width: 640px) {
  .vlbp-gyoker .vlbp-banner { padding: 22px 18px 0; box-shadow: 5px 5px 0 0 var(--fekete); margin-bottom: 28px; }
  .vlbp-gyoker .vlbp-lead { font-size: 1.02rem; margin-bottom: 20px; }
  .vlbp-gyoker .vlbp-szuro-sav { margin: 0 -18px; padding: 14px 18px; }
  .vlbp-gyoker .vlbp-szuro-sav-tema { padding-top: 12px; padding-bottom: 12px; }
  .vlbp-gyoker .vlbp-szuro {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -18px;
    padding: 4px 18px 6px;
  }
  .vlbp-gyoker .vlbp-szuro::-webkit-scrollbar { display: none; }
  .vlbp-gyoker .vlbp-chip { scroll-snap-align: start; }
  .vlbp-gyoker .vlbp-talalat { margin-left: 0; }

  .vlbp-gyoker .vlbp-kiemelt { padding: 20px 0 22px; margin-bottom: 36px; }
  .vlbp-gyoker .vlbp-kiemelt-fej, .vlbp-gyoker .vlbp-kiemelt-szoveg { padding: 0 18px; }
  .vlbp-gyoker .vlbp-kiemelt-racs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 18px 8px;
    scrollbar-width: none;
  }
  .vlbp-gyoker .vlbp-kiemelt-racs::-webkit-scrollbar { display: none; }
  .vlbp-gyoker .vlbp-kiemelt-kartya { scroll-snap-align: start; }

  .vlbp-gyoker .vlbp-csoport { margin-bottom: 36px; }
  .vlbp-gyoker .vlbp-csoport-fej h2 { font-size: 1.55rem; }
  .vlbp-gyoker .vlbp-ikon { width: 38px; height: 38px; }

  /* kompakt lista */
  .vlbp-gyoker .vlbp-racs {
    grid-template-columns: 1fr;
    gap: 0;
    border: 3px solid var(--fekete);
    box-shadow: 5px 5px 0 0 var(--fekete);
  }
  .vlbp-gyoker .vlbp-kartya {
    border: 0;
    border-bottom: 2px solid var(--szurke-ker);
    box-shadow: none;
    transform: none;
  }
  .vlbp-gyoker .vlbp-kartya:last-child { border-bottom: 0; }
  .vlbp-gyoker .vlbp-kartya.kivalasztva { box-shadow: inset 6px 0 0 0 var(--sarga); background: var(--sarga-halv); }
  .vlbp-gyoker .vlbp-kategoria-sav,
  .vlbp-gyoker .vlbp-alcim,
  .vlbp-gyoker .vlbp-leiras,
  .vlbp-gyoker .vlbp-forma,
  .vlbp-gyoker .vlbp-reszletek-gomb,
  .vlbp-gyoker .vlbp-link-gomb { display: none; }
  .vlbp-gyoker .vlbp-test { padding: 14px 14px 0; }
  .vlbp-gyoker .vlbp-kartya h3 { font-size: 1.25rem; }
  .vlbp-gyoker .vlbp-cim-gomb::after { content: ' \203A'; color: #999; }
  .vlbp-gyoker .vlbp-kinek { font-size: 0.76rem; margin-bottom: 8px; }
  .vlbp-gyoker .vlbp-kartya { position: relative; }
  .vlbp-gyoker .vlbp-meta { margin: 0 0 14px; padding: 0 138px 0 0; min-height: 34px; align-items: center; }
  .vlbp-gyoker .vlbp-labl { position: absolute; right: 14px; bottom: 14px; padding: 0; }
  .vlbp-gyoker .vlbp-csoport-db { display: none; }

  .vlbp-gyoker .vlbp-webshop, .vlbp-gyoker .vlbp-kapcsolat { padding: 20px 16px; }

  /* panel alulrol */
  .vlbp-reteg .vlbp-panel {
    top: auto;
    left: 0;
    width: 100%;
    height: 92vh;
    height: 92dvh;
    border-left: 0;
    border-top: 3px solid var(--fekete);
    transform: translateY(105%);
  }
  .vlbp-reteg .vlbp-panel.nyitva { transform: none; }
  .vlbp-reteg .vlbp-panel-test { padding: 18px 18px 8px; }
  .vlbp-reteg .vlbp-panel-test h2 { font-size: 1.7rem; }
  .vlbp-reteg .vlbp-panel-lab { padding-left: 18px; padding-right: 18px; }
  .vlbp-reteg .vlbp-panel-lab .vlbp-gomb { flex: 1 1 auto; text-align: center; }

  /* kosar teljes szelessegben alul */
  .vlbp-reteg .vlbp-kosar {
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(110%);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -4px 0 0 var(--fekete);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .vlbp-reteg .vlbp-kosar.lathato { transform: none; }
  .vlbp-reteg .vlbp-kosar-db { flex: 1 1 100%; font-size: 1.05rem; }
  .vlbp-reteg .vlbp-kosar-lista { left: 0; right: 0; box-shadow: none; border-left: 0; border-right: 0; }
}

/* ============ mozgas kikapcsolva ============ */
@media (prefers-reduced-motion: reduce) {
  .vlbp-gyoker .vlbp-kartya, .vlbp-gyoker .vlbp-kiemelt-kartya,
  .vlbp-reteg .vlbp-panel, .vlbp-reteg .vlbp-hatter, .vlbp-reteg .vlbp-kosar { transition: none; }
  .vlbp-gyoker .vlbp-kartya:hover, .vlbp-gyoker .vlbp-kiemelt-kartya:hover { transform: none; }
}

/* ============ tema-vedelem ============
   A WordPress-tema minden <button>-ra tesz nowrap-ot, felkoverseget, minimummagassagot,
   arnyekot es nagybetusitest. Ezek itt alapertelmezesre allnak vissza; a fenti,
   osztalyra szolo szabalyok (pl. a szuro-chipek nowrap-ja) erosebbek, azok maradnak. */
.vlbp-gyoker button, .vlbp-reteg button {
  white-space: normal;
  font-weight: 400;
  min-height: 0;
  height: auto;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  max-width: 100%;
  overflow-wrap: break-word;
}
.vlbp-gyoker a, .vlbp-reteg a { max-width: 100%; overflow-wrap: break-word; }

/* a kartyacim-gomb inline szovegkent viselkedjen, szepen tordelve */
.vlbp-gyoker .vlbp-cim-gomb {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: left;
  width: auto;
  min-width: 0;
}

/* a racs elemei ne tagitsak a racsot hosszu tartalommal */
.vlbp-gyoker .vlbp-kartya, .vlbp-gyoker .vlbp-test, .vlbp-gyoker .vlbp-kiemelt-kartya { min-width: 0; }

/* hosszu magyar szavak (pl. Sportegyesuleteknek) keskeny kepernyon se logjanak ki */
.vlbp-gyoker h1, .vlbp-gyoker h2, .vlbp-gyoker h3,
.vlbp-reteg h2 { overflow-wrap: anywhere; hyphens: manual; }

/* a panel fejleceben a kategorianev engedjen helyet a Bezaras gombnak */
.vlbp-reteg .vlbp-panel-kat { min-width: 0; }
.vlbp-reteg .vlbp-panel-zar { flex: 0 0 auto; }

/* a gombok felirata tordelodhet, de kozepen maradjon */
.vlbp-gyoker .vlbp-gomb, .vlbp-reteg .vlbp-gomb { white-space: normal; text-align: center; }
.vlbp-gyoker .vlbp-chip { white-space: nowrap; }

@media (max-width: 360px) {
  .vlbp-gyoker .vlbp-cim { font-size: 2.1rem; }
}

/* a tema bekezdes-szine se irja felul a widget szineit */
.vlbp-gyoker p, .vlbp-reteg p { color: inherit; }

/* ============ statisztika-dobozok a bannerben ============ */
.vlbp-gyoker .vlbp-statok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 26px;
}
.vlbp-gyoker .vlbp-stat {
  background: var(--fekete);
  color: var(--sarga);
  border: 3px solid var(--fekete);
  padding: 14px 16px 12px;
}
.vlbp-gyoker .vlbp-stat strong {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
  font-weight: 400;
}
.vlbp-gyoker .vlbp-stat span { font-size: 0.8rem; line-height: 1.4; color: rgba(255,255,255,0.85); }

/* ============ VLB alapelemek ============ */
.vlbp-gyoker .vlbp-alapelemek {
  background: var(--zold);
  border: 3px solid var(--fekete);
  padding: 26px 24px 28px;
  margin: 0 0 48px;
}
.vlbp-gyoker .vlbp-alapelemek h2 {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--fekete);
}
.vlbp-gyoker .vlbp-alapelemek-lead { font-size: 0.95rem; color: rgba(0,0,0,0.78); max-width: 62ch; margin: 0 0 22px; }
.vlbp-gyoker .vlbp-alapelemek-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.vlbp-gyoker .vlbp-alapelem {
  background: var(--feher);
  border: 3px solid var(--fekete);
  padding: 16px 16px 14px;
}
.vlbp-gyoker .vlbp-alapelem-szam {
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--fekete);
  background: var(--sarga);
  border: 3px solid var(--fekete);
  min-width: 46px;
  width: fit-content;
  text-align: center;
  padding: 4px 10px 0;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.vlbp-gyoker .vlbp-alapelem h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin: 0 0 8px;
}
.vlbp-gyoker .vlbp-alapelem p { font-size: 0.85rem; color: #444; margin: 0; }

/* ============ kartyakep ============ */
.vlbp-gyoker .vlbp-kartya-kep {
  aspect-ratio: 16 / 9;
  border-bottom: 3px solid var(--fekete);
  overflow: hidden;
  background: var(--sarga);
}
.vlbp-gyoker .vlbp-kartya-kep img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ galeria ============ */
.vlbp-gyoker .vlbp-galeria { margin: 0 0 40px; }
.vlbp-gyoker .vlbp-galeria h2 {
  font-family: var(--display);
  font-size: 1.9rem;
  letter-spacing: 0.03em;
  line-height: 1;
  border-bottom: 3px solid var(--fekete);
  padding: 0 0 10px;
  margin: 0 0 22px;
}
.vlbp-gyoker .vlbp-galeria-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.vlbp-gyoker .vlbp-galeria-elem {
  padding: 0;
  border: 3px solid var(--fekete);
  background: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.vlbp-gyoker .vlbp-galeria-elem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.vlbp-gyoker .vlbp-galeria-elem:hover img { transform: scale(1.05); }
.vlbp-gyoker .vlbp-galeria-elem:focus-visible { outline: 3px solid var(--piros); outline-offset: 3px; }

/* ============ lightbox ============ */
.vlbp-reteg .vlbp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.92);
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vlbp-reteg .vlbp-lightbox[hidden] { display: none; }
.vlbp-reteg .vlbp-lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border: 3px solid var(--sarga);
  display: block;
}
.vlbp-reteg .vlbp-lightbox-zar {
  position: fixed;
  top: 16px;
  right: 20px;
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  background: var(--sarga);
  color: var(--fekete);
  border: 3px solid var(--fekete);
  width: 46px;
  height: 46px;
  cursor: pointer;
  padding: 0;
}
.vlbp-reteg .vlbp-lightbox-zar:hover { background: var(--piros); color: var(--feher); }

@media (max-width: 640px) {
  .vlbp-gyoker .vlbp-statok { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
  .vlbp-gyoker .vlbp-alapelemek { padding: 20px 16px 22px; margin-bottom: 36px; }
  .vlbp-gyoker .vlbp-alapelemek-racs { grid-template-columns: 1fr; }
  .vlbp-gyoker .vlbp-galeria-racs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .vlbp-gyoker .vlbp-kartya-kep { aspect-ratio: 2 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vlbp-gyoker .vlbp-galeria-elem img { transition: none; }
  .vlbp-gyoker .vlbp-galeria-elem:hover img { transform: none; }
}