/* FONTOS: az @import-nak a fájl LEGELEJÉN kell állnia. A CSS-szabvány
   szerint minden más szabály ELŐTT kell jönnie (a @charset/@layer kivételével)
   — ha egy stílusszabály megelőzi, a böngésző CSENDBEN eldobja az egész
   @import-ot. Pontosan ez történt: a Baloo 2 egy ":root { ... }" blokk után
   állt, ezért a stíluslapja EL SEM INDULT letöltődni, és a bolt végig a
   rendszer alapbetűjével futott. A betűtípus alkalmazása lentebb, a
   body.gamer-theme szabályban van. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');

/* Világos, letisztult e-kereskedelmi dizájn — hűvös szürke-kék alap, sötét
   szén/tinta gombok, elektromos-kék "tech" akcentus (ugyanaz a kék, mint az
   admin felületén, lásd lentebb .admin-sidebar/--adm-btn-grad), lekerekített,
   visszafogott kártyák. A shop.kingstech.hu-s fekete/vörös + Quantico
   betűtípusos kísérlet (2026-08-29) a felhasználó kérésére visszavonva. */
:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --border: #dbe2ea;
  --text: #161a20;
  --text-dim: #5f6b7a;
  --accent: #131b2b;
  --accent-hover: #223255;
  --brand-accent: #2563eb;
  --brand-accent-hover: #1d4fc4;
  --ok: #16a34a;
  --warn: #c2760a;
  --danger: #d1293d;
  /* Sötétebb változatok a halvány (12% átlátszó) hátterű jelvényekhez
     (.badge.in_stock/low_stock/out_of_stock) — a sima --ok/--warn/--danger
     ott (194,118,10 stb. a saját 12%-os háttéren) nem érte el a WCAG AA
     4,5:1 kontrasztarányt szövegszínként (mért érték kb. 2,9-4,25:1),
     ezekkel a sötétített árnyalatokkal viszont igen (4,5:1 fölött). A
     többi helyen (pl. tömör hátterű .confirm-header, fehér szöveggel)
     változatlanul az eredeti, világosabb színek maradnak, ott nincs gond. */
  --ok-text: #117b38;
  --warn-text: #9b5e08;
  --danger-text: #c8273b;
  --radius: 12px;
}

/* "Fiatalos gamer paradicsom" arculat — a felhasználó kifejezett
   kérésére: sötét alap, neon lila/kék (RGB gamer PC-s) akcentus, kicsit
   "képregényes"/doodle-jellegű, játékos összhatás — NEM éles/agresszív
   military-tech stílus. A body.gamer-theme osztály KIZÁRÓLAG a publikus
   (public/*.html) oldalakon van jelen (a sign-contract.html — jogi
   aláírás-oldal — és az admin/*.html oldalak SZÁNDÉKOSAN kimaradtak) —
   az admin felület így teljesen érintetlen marad, saját világos/sötét
   kapcsolós, kék alapú témájával, mert a fenti :root-változókat csak
   ITT írjuk felül, magasabb specificitással. A fejléc-betűtípus (Baloo
   2) kerekded, vaskos, játékos karakterű — ez adja a "képregényes"
   hatást a sötét/neon háttér mellett. */
/* A FELHASZNÁLÓ KIFEJEZETT KÉRÉSÉRE a bolt betűtípusa a Baloo 2.
   Eddig ez CSAK be volt töltve (lásd a fenti @import), de EGYETLEN szabály
   sem használta — az egész bolt a rendszer alapbetűjével futott, ezért
   ütött el a termékleírás és a kép-felirat a szánt arculattól.
   A szabály SZÁNDÉKOSAN a body.gamer-theme-hez kötött: ez az osztály csak a
   24 publikus oldalon van jelen, az admin felület egyetlen oldalán sem —
   így az admin változatlan marad. A leszármazottak (.desc, űrlapelemek,
   gombok) mind "font-family: inherit"-tel dolgoznak, tehát automatikusan
   követik. A fallback-lánc a korábbi rendszer-stack, hogy a webfont
   betöltéséig (és blokkolt Google Fonts esetén) is olvasható maradjon. */
body.gamer-theme {
  font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bg: #0a0a12;
  --surface: #17151f;
  --surface-2: #211f2c;
  --border: #332f42;
  --text: #f4f3f8;
  --text-dim: #a8a3b8;
  --accent: #221f30;
  --accent-hover: #322d44;
  --brand-accent: #8b3dff;
  --brand-accent-hover: #a865ff;
  --neon-cyan: #00e0ff;
  --neon-pink: #ff3dcb;
  --ok: #2be37a;
  --warn: #ffb020;
  --danger: #ff3355;
  --ok-text: #2be37a;
  --warn-text: #ffb020;
  --danger-text: #ff3355;
}
/* neon lila-kék izzás a gomboknál/kártyáknál — csak a gamer témában,
   hogy a boltos admin felület gombjai NE kapjanak izzást (marad a
   semleges fekete árnyék, lásd fent a button/.btn alap-szabálynál) */
body.gamer-theme button:not(.secondary):not(.danger),
body.gamer-theme .btn:not(.secondary) {
  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--neon-cyan) 130%);
  box-shadow: 0 2px 14px rgba(139, 61, 255, 0.45);
}
body.gamer-theme button:not(.secondary):not(.danger):hover,
body.gamer-theme .btn:not(.secondary):hover {
  box-shadow: 0 4px 22px rgba(139, 61, 255, 0.65);
}
body.gamer-theme .card {
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.gamer-theme .card:hover {
  border-color: rgba(139, 61, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.6);
}
body.gamer-theme header.site {
  background: linear-gradient(135deg, #0a0a12 0%, #1a0f2e 100%);
  border-bottom: 1px solid rgba(139, 61, 255, 0.3);
}
/* a fejléc feliratai (menüpontok, bejelentkezés) a sötét fejlécen a
   felhasználó kifejezett kérésére fehérek, nem a halványabb --text-dim */
body.gamer-theme .site-nav-group a,
body.gamer-theme .nav-dropdown-toggle {
  color: var(--text);
}
/* minden felső szintű menüpont (legördülők ÉS a sima linkek, pl.
   "Felújított gépek"/"Szoftverek" is) egy explicit, közös .nav-pill
   osztályt kap a markupban (lásd public/nav.js) — a felhasználó
   kifejezett kérésére a nem-legördülő elemek mindenben (méret,
   betűtípus, háttér, hover) pontosan a legördülő gombok stílusát kapják,
   az egyetlen különbség, hogy nem nyílik le almenüjük. Szándékosan nem
   szerkezeti szelektorral (pl. ".nav-main > a") van megoldva, hanem egy
   közös osztállyal, hogy a <button> vs <a> böngésző-alapértelmezett
   különbségek vagy egy esetleges specificitás-ütközés se okozhasson
   eltérést a két elemtípus között — mindkettő UGYANAZT az egy szabályt
   kapja, semmi mást nem kell egyeztetni. */
/* FONTOS: a lenti body.gamer-theme "button:not(.secondary):not(.danger)"
   globális szabály (fentebb) MAGASABB specificitású, mint egy sima
   ".nav-pill" osztály-szelektor (3 osztály+2 típus vs. 2 osztály+1 típus)
   — enélkül a !important nélkül a .nav-dropdown-toggle GOMBOK a globális,
   sokkal telítettebb gomb-színátmenetet kapnák a sima <a> linkek helyett,
   pont ez volt a korábban jelzett "néhány menüpont sötétebb" hiba oka. */
body.gamer-theme .nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box !important;
  line-height: 1 !important;
  vertical-align: middle;
  padding: 7px 14px !important;
  margin: 0 !important;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--neon-cyan) 130%) !important;
  border: 1px solid rgba(139, 61, 255, 0.35) !important;
  box-shadow: 0 2px 10px rgba(139, 61, 255, 0.35) !important;
  font-size: 0.92rem !important;
  font-family: inherit !important;
  appearance: none;
  -webkit-appearance: none;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
body.gamer-theme .nav-pill:hover,
body.gamer-theme .nav-dropdown.open .nav-pill {
  filter: brightness(1.18);
  box-shadow: 0 0 14px rgba(0, 224, 255, 0.6) !important;
  color: #fff;
}
/* kis lefelé mutató nyíl, ami megkülönbözteti a ténylegesen legördülő
   menüpontokat (.nav-dropdown-toggle) a sima, egyenesen navigáló
   linkektől (pl. "Felújított gépek") — a felhasználó kifejezett
   kérésére, mivel az egységes pill-stílus miatt vizuálisan már nem
   lehetett megkülönböztetni őket. */
body.gamer-theme .nav-dropdown-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 1px;
  margin-top: -3px;
  transition: transform 0.2s ease;
}
body.gamer-theme .nav-dropdown.open .nav-dropdown-toggle::after {
  transform: rotate(225deg);
  margin-top: 3px;
}
/* Saját rajzolású, színes ("neon-matrica") nav-ikonok (lásd public/nav.js
   ICONS) — a felhasználó kifejezett kérésére NEM harmadik féltől
   átvett/AI-generált, védjegyeket (pl. ROG, Xbox) ábrázoló grafika,
   hanem saját, sík színfoltos SVG-k a bolt neon lila/kék/pink
   palettájából, hogy biztosan látszódjanak (nem hajszálvékony vonal). */
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* megosztott egyszínű ikonkészlet (public/icons.js) — currentColor-t
   használ, méretezés a befoglaló elem betűméretéhez igazodik (1em), hogy
   ugyanoda kerülhessen, ahol eddig egy sima emoji-karakter állt */
.site-icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.15em; }
/* A "Szoftverek" menüpontot csak ASZTALI nézetben kell a sor jobb szélére
   tolni — mobilon a menü egy függőlegesen egymás alá rendezett oszloppá
   válik (lásd lent a max-width:780px blokkot), ahol egy margin-left:auto
   felülírja a keresztirányú "stretch"-et, emiatt az elem összement és a
   lap tartalmára csúszott/lógott rá. Ezért a margin-left:auto csak innentől
   (a legördülők is csak innentől sorban jelennek meg) kapcsol be. */
@media (min-width: 781px) {
  .nav-push-right { margin-left: auto; }
}
body.gamer-theme .badge.in_stock { box-shadow: 0 0 8px rgba(43, 227, 122, 0.4); }

* { box-sizing: border-box; }

/* mobil Safari a lap alján/tetején túlgörgetéskor rugalmasan "belengeti"
   (rubber-band bounce) a tartalmat, ami alatt a háttér látszik ki — ez a
   böngésző NORMÁL viselkedése (nem elrendezési hiba), de a felhasználó
   üres/túlgörgethető területnek érzékeli. Az overscroll-behavior ezt a
   lengést tiltja le, a lap pontosan a tartalom végén/elején áll meg. */
html {
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overscroll-behavior-y: none;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--brand-accent); }

/* márka balra, a fő menüpontok (site-nav) a középső, rugalmas oszlopban
   középre igazítva ("bal oldalon, közel a középhez"), a fiók/kosár
   (site-nav-account) mindig a jobb szélre tapadva — lásd public/nav.js,
   ami két külön csoportot épít fel egy közös (desktopon "láthatatlan",
   display:contents) panel-wrapperben. */
/* A fejléc mindig a lap tetejéhez van rögzítve, DE görgetés KÖZBEN
   felcsúszik (nincs "ragadás"), és csak akkor csúszik vissza, amikor a
   görgetés megáll — lásd public/nav.js (debounce-olt scroll-figyelés,
   .header-hidden osztály ki/be kapcsolása). Mivel position:fixed kiveszi a
   fejlécet a normál dokumentum-folyásból, a body-nak kompenzáló
   padding-top kell (lásd lentebb, --header-height CSS változó, amit
   szintén nav.js mér és állít be, mert asztali/mobil nézetben eltér a
   fejléc tényleges magassága). */
header.site {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 0.22s ease;
}
header.site.header-hidden {
  transform: translateY(-100%);
}
body:has(> header.site) {
  padding-top: var(--header-height, 76px);
}

header.site .brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo {
  height: 51px;
  width: auto;
  display: block;
}

/* desktopon a wrapper "eltűnik" a layoutból — a két csoport közvetlenül a
   header flex-sorába kerül, a saját "order"-üket használva (lásd lentebb),
   nem a DOM-sorrendet */
.nav-panel { display: contents; }

.site-nav-group {
  display: flex;
  align-items: center;
  gap: 28px;
}
/* nav-main (kategória-linkek) tölti ki a szabad helyet, ezt tolja el a
   fiók-csoport a jobb szélre — nav-quick (kereső+kosár, lásd public/nav.js)
   köztük ül, ugyanott, ahol korábban (a fiók-csoport elején) volt.
   A felhasználó kifejezett kérésére: a sok menüpont miatt asztali nézetben
   a hamburger-küszöb (780px) ÉS a teljesen tág nézet között volt egy sáv,
   ahol a menüpontok kicsordultak/nem fértek ki egy sorban — flex-wrap
   engedi, hogy szükség esetén 2. sorra folyjanak, ahelyett hogy
   kilógnának. A header position:fixed magasságát a public/nav.js
   ResizeObserver-je dinamikusan méri (--header-height), így a nőtt
   (2 soros) fejléc automatikusan helyet kap, nem takar le tartalmat. */
.nav-main {
  justify-content: flex-start;
  order: 1;
  flex: 1;
  flex-wrap: wrap;
  row-gap: 8px;
  align-content: center;
}
.nav-quick { order: 2; }
.nav-account { justify-content: flex-end; order: 3; }
.site-nav-group a {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.92rem;
}
.site-nav-group a:hover { color: var(--text); }

/* Kereső + kosár — mindig látható a fejlécben (nem a hamburger-panel
   része), lásd public/nav.js. Asztali nézetben ugyanúgy néz ki, mint
   korábban a fiók-csoport elején; mobilon a logó mellett jelenik meg. */
.nav-quick {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.nav-quick-cart {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1;
}

/* HU/EN nyelvváltó gomb (zászló), lásd public/i18n.js */
.nav-lang-toggle {
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 1.05rem;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.nav-lang-toggle:hover { border-color: var(--text-dim); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.92rem;
  font-family: inherit;
  cursor: pointer;
}
.nav-dropdown-toggle:hover { background: none; color: var(--text); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 150px;
  padding: 6px;
  z-index: 20;
}
/* láthatatlan "híd" a gomb és a lenyíló doboz közötti 14px résben — enélkül
   az egér a lefelé mozgás közben elhagyja a hoverelt elemet, mielőtt elérné
   a menüt, és a lista idő előtt bezáródik */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.9rem;
}
.nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--text); }
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}
/* :hover/:focus-within CSAK asztali nézetben nyitja a menüt — mobilon
   (érintőképernyőn) SZÁNDÉKOSAN kizárólag a JS-es .open osztály dönt, mert
   touch eszközökön mindkettő "beragadhat": egy tap után a böngésző gyakran
   :hover állapotban tartja az elemet a következő érintésig, egy gombnak
   pedig (böngészőtől függően) érintésre fókusza is maradhat — mindkettő a
   JS-bezárás UTÁN is nyitva tartaná a menüt, ez volt a jelzett hiba oka. */
@media (min-width: 781px) {
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
  }
}
/* Alkatrészek/Termékek almenüje: Új/Használt gomb, ami TOVÁBB nyitható —
   a felhasználó kifejezett kérésére EGYSÉGESEN mobilon ÉS asztali nézetben
   is csak kattintásra nyílik (nincs :hover szabály hozzá, szándékosan),
   mert a korábbi 2-oszlopos lista asztalon már a gomb feléje mozduló
   egérre (hoverre) is azonnal, teljes terjedelmében megjelent — ezt
   jelezte a felhasználó "össze van törve, meg se nyitottam" hibaként. */
.nav-subdropdown { position: relative; }
.nav-subdropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none !important;
  box-shadow: none !important;
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nav-subdropdown-toggle:hover { background: var(--surface-2) !important; color: var(--text); }
.nav-subdropdown-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.nav-subdropdown.open > .nav-subdropdown-toggle::after { transform: rotate(225deg); }
.nav-subdropdown-menu {
  display: none;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  margin: 2px 0 6px 10px;
}
.nav-subdropdown.open > .nav-subdropdown-menu { display: block; }
/* a felhasználó kifejezett kérésére a másodlagos (Új/Használt) lenyíló
   gomb ugyanazt a betűtípust (méret/vastagság) és lila hátteret kapja,
   mint a fő nav-pill menüpontok */
body.gamer-theme .nav-subdropdown-toggle {
  background: var(--kt-purple) !important;
  color: #fff !important;
  border: 2px solid var(--kt-ink) !important;
  border-radius: 0 !important;
  font-size: 0.92rem;
  font-weight: 800;
}
body.gamer-theme .nav-subdropdown-toggle:hover {
  background: var(--kt-ink) !important;
  color: var(--kt-bg) !important;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 4px 6px;
  color: var(--text);
  cursor: pointer;
}
.nav-hamburger:hover { background: none; }

/* "Kezdőlap" gomb a lenyíló panel tetején (lásd public/nav.js) — csak
   mobilon látszik, asztali nézetben a logóra kattintás már úgyis a
   főoldalra visz. */
.nav-home-link { display: none; }

/* Mobilon a menü hamburger mögé kerül, lenyíló panelként jelenik meg —
   a dropdown almenük (Microsoft, Grafika/Tervezés) is itt egyszerű,
   beljebb tolt listaként nyílnak a lebegő kártya helyett. */
@media (max-width: 780px) {
  /* a felhasználó kifejezett kérésére mobilon a fejléc (benne a hamburger
     gombbal) NEM csúszik el görgetéskor — fix helyen marad, a fenti
     .header-hidden transform itt semlegesítve */
  header.site {
    transition: none;
  }
  header.site.header-hidden {
    transform: none;
  }
  /* Mobilon a logó a fejléc közepén marad, a kereső+kosár és a hamburger
     ABSZOLÚT pozícióval tapad a bal, illetve jobb szélhez — ez a korábbi
     CSS grid ("1fr auto 1fr" oszlopok) helyett, mert az valamiért mégsem
     tartotta egy sorban a kereső+kosár csoportot (külön sorra "esett" a
     logó/hamburger alá). Abszolút pozícióval a bal/jobb elemek teljesen
     KIVANNAK a normál elrendezésből, nem tudják zavarni a logó
     középre-igazítását, és fordítva sem — ez garantáltan egy vonalba
     kerül mindhárom. */
  header.site {
    /* position:fixed marad (lásd az alapszabályt fentebb) — a mobil
       abszolút-pozíciós gyerekeinek (.nav-quick, .nav-panel) ez ugyanúgy
       megfelelő pozícionálási kontextus, mint a korábbi position:relative */
    display: flex;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    min-height: 44px;
  }
  /* SZÁNDÉKOSAN top/bottom:0 + flex középre-igazítás, NEM
     top:50%+transform:translateY(-50%) — utóbbi "transform" tulajdonsága
     containing blockot hoz létre a leszármazottaknak, ami befogta (a
     viewport helyett saját magához igazította) a mobil keresőmező
     position:fixed panelját (lásd .nav-search-panel lentebb) — élesben
     jelzett hiba, a kereső oldalra nyílva "eltolt mindent". */
  .nav-quick {
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }
  header.site .brand { flex-shrink: 0; }
  /* FONTOS: az admin felület saját fejléce (.admin-topbar) UGYANEZT a
     .nav-hamburger osztályt használja (lásd admin/admin.js) — a bolt
     fejlécére (header.site) jellemző abszolút pozíció ezért ide, a
     header.site-ra korlátozva kerül, nem a puszta .nav-hamburger
     szelektorba, különben az admin gomb is (ahol nincs "position:relative"
     ősöm) elszabadulna, a teljes oldalhoz képest középre/jobbra csúszva —
     ez volt a jelzett hiba. Az admin saját, egyszerűbb jobbra-igazítása
     lentebb, a .admin-topbar blokkban. */
  header.site .nav-hamburger {
    position: absolute;
    right: 14px;
    /* Fix 34x34-es doboz, függőlegesen középre — DE NEM
       top:50%+transform:translateY(-50%) (a transform ancestor-ja
       containing blockot hoz létre, ami a felhasználó jelzése szerint a
       gomb "elmászkálását" okozta), és NEM is puszta top:0+bottom:0
       (az explicit height nélkül a TELJES fejléc-magasságra nyúlt volna,
       amit a felhasználó szintén kifogásolt). A megoldás: top:0+bottom:0
       FIX magassággal + margin:auto — ez a jól ismert "abszolút
       középre igazítás margin:auto-val" trükk, transform nélkül. */
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* fix méretű doboz (nem a régi, betűméret-alapú "2.8rem", ami a
       felhasználó kifejezett kérésére 30%-kal kisebb lett — 2.8*0.7=1.96rem
       volt) — az SVG-ikon (lásd nav.js HAMBURGER_ICON_OPEN/CLOSE) így
       garantáltan sose változtatja meg a gomb méretét nyitás/zárás között,
       ami korábban a gomb pozíciójának "ugrását" okozta */
    width: 34px;
    padding: 0;
  }
  /* a felhasználó kifejezett kérésére mobilon a kosár gomb csak ikont (+
     darabszám-jelvényt) mutat, felirat nélkül — szöveggel túl széles volt */
  .nav-quick-cart-label { display: none; }
  /* a felhasználó kifejezett kérésére mobilon maga a kosár gomb is csak
     akkor jelenjen meg, ha van benne tétel (lásd public/cart.js
     renderCartBadge — ez adja/veszi a .cart-empty osztályt) */
  .nav-quick-cart.cart-empty { display: none; }
  /* a bolttól eltérően csak ANNYI kell mindenhol (admin is), hogy a
     hamburger egyáltalán látszódjon mobilon és a ☰ karakter középre
     essen benne — pozíció nélkül, a saját (flex/absolute) szülő
     kontextusára bízva */
  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* mobilon a wrapper maga lesz a lenyíló panel (nem "eltűnő" display:contents
     többé) — a két csoport benne, normál (nem absolute) folyásban, egymás
     alatt jelenik meg */
  .nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    /* a bejelentkezés-csoport (.nav-account) és a fő menü-csoport
       (.nav-main) két KÜLÖN .site-nav-group, ide, a közös szülőre kell
       a rés — enélkül csak az egyes csoportokON BELÜLI elemek között
       volt tér (lásd .site-nav-group gap), a "Bejelentkezés" és az
       utána következő első menüpont között nem, a felhasználó jelzése
       szerint */
    gap: 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px 24px 16px;
    z-index: 30;
  }
  .nav-panel.nav-open { display: flex; }
  /* mobilon a bejelentkezés (nav-account) legfelül, alatta a
     termék-kategória gombok (nav-main) — csak vizuális sorrend (flex
     order), a DOM-ban (public/nav.js) és desktopon (ahol .nav-panel
     display:contents, az order nem számít) nem változik semmi. A
     felhasználó kifejezett kérésére "Kezdőlap" gomb mobilon sincs (marad
     a fenti alap display:none). */
  .nav-panel .nav-account { order: -2; }
  header.site .site-nav-group {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle {
    width: 100%;
    text-align: left;
  }
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0 0 0 14px;
    min-width: 0;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a { padding: 10px 0; border-radius: 0; }
  .nav-subdropdown-toggle { padding: 10px 0; }
  .nav-subdropdown-menu { margin-left: 4px; }
  /* a nyelv-váltó gomb (public/i18n.js appendeli a .nav-account csoport
     végére) a szülő flex-oszlop align-items:stretch öröklése miatt
     alapból teljes szélességű lenne itt — pici, önmaga méretéhez igazodó
     gombként kell maradnia, a lista tetején (a csoport order:-2-je miatt) */
  .nav-panel .nav-lang-toggle {
    align-self: flex-start;
    margin: 10px 0 4px;
  }
}

/* fejléc kereső (public/nav.js) — csak terméknévre keres, lásd
   routes/storefront.js */
.nav-search { display: flex; align-items: center; gap: 6px; position: relative; }
.nav-search-toggle {
  background: none;
  border: none;
  padding: 4px;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.nav-search-toggle:hover { background: none; color: var(--text); }
/* a mező+találatok dobozát desktopon "eltüntetjük" a layoutból (a
   toggle-lel egy flex-sorban maradnak) — csak mobilon (lásd lentebb) válik
   önálló, pozicionált panellé */
.nav-search-panel { display: contents; }
.nav-search-input { display: none; width: 180px; max-width: 40vw; }
.nav-search.open .nav-search-input { display: inline-block; }
.nav-search-results {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  max-width: 80vw;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 25;
}
.nav-search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 0.9rem;
}
.nav-search-result:hover { background: var(--surface-2); }
.nav-search-result + .nav-search-result { border-top: 1px solid var(--border); }
.nav-search-result-price { color: var(--text-dim); font-weight: 700; white-space: nowrap; }
.nav-search-empty { padding: 14px; color: var(--text-dim); font-size: 0.88rem; }

/* Mobilon a kereső mező NEM a nagyító mellett, oldalra nyílva jelenik meg
   (ott, a szűk .nav-quick dobozban nem fér el kényelmesen, korábban
   "eltolta az egészet" — jelzett hiba) — hanem a teljes fejléc ALATT,
   önálló, teljes szélességű sorként, ahol kényelmesen lehet gépelni. A
   találati lista ugyanebben a panelben, közvetlenül a mező alatt jelenik
   meg (normál dokumentum-folyásban, NEM külön abszolút pozícióval, mint
   asztalin), hogy ne kelljen kézzel kiszámolt magasság-eltolással igazítani
   alá — lásd public/nav.js, ami a ".open" osztályt kapcsolja a
   toggle-gombra kattintva (a korábbi inline style.display helyett, hogy ez
   a média-lekérdezés felülbírálhassa asztali nézet nélkül külön kódág
   nélkül). */
@media (max-width: 780px) {
  .nav-search.open .nav-search-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    top: var(--header-height, 76px);
    left: 0;
    right: 0;
    z-index: 95;
    background: var(--surface);
    padding: 10px 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }
  .nav-search.open .nav-search-input { width: 100%; max-width: none; }
  .nav-search.open .nav-search-results {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0;
    box-shadow: none;
  }
}

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Főoldal hero — csak a szűretlen (kategória/keresés nélküli) nézeten
   látszik, lásd public/app.js. A header sötét árnyalatából indul, a márka
   kék akcentusába fut ki, hogy vizuálisan összekösse a két sávot. */
.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
  padding: 56px 24px;
  text-align: center;
}
/* gamer téma: sötét lila -> neon kék átmenet a korábbi kék helyett,
   lásd body.gamer-theme fenti megjegyzése */
body.gamer-theme .hero { background: linear-gradient(135deg, #120a24 0%, #3d1a8f 55%, #00b4d8 130%); }
.hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.hero-inner h1 {
  color: #fff;
  font-size: 2.1rem;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.hero-inner p {
  color: #cbd5e1;
  font-size: 1.05rem;
  margin: 0 0 26px;
  line-height: 1.6;
}
.hero-cta {
  display: inline-block;
  background: var(--brand-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 30px;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-cta:hover {
  background: var(--brand-accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* Főoldali hero-karusszel — a felhasználó kifejezett kérésére 3 fő
   témával (jó árak/gaming, Milpay részletfizetés, Beszámítás), egyelőre
   CSS-gradiens hátterekkel, amíg valódi képeket nem ad hozzá — akkor
   csak a .hero-slide-N szabályok background-image sorát kell majd
   kicserélni/kiegészíteni, a szerkezet nem változik. Sima, függőség
   nélküli JS vezérli (lásd public/hero-carousel.js): auto-lapozás +
   pöttyös navigáció. */
/* a felhasználó kifejezett kérésére NEM böngésző-szélességű sáv, hanem
   ugyanolyan széles doboz, mint az oldal többi tartalmi eleme (lásd
   .home-section-inner max-width:1080px) — a margin-trükk (max()) széles
   nézetben középre igazítva 1080px-re korlátozza, keskeny nézetben pedig
   ugyanazt a 24px oldalsó térközt adja, mint a többi szekció padding-je */
.hero-carousel {
  position: relative;
  overflow: hidden;
  max-width: 1080px;
  margin: 24px max(24px, calc((100% - 1080px) / 2)) 0;
  border-radius: var(--radius);
}
.hero-carousel-track { display: flex; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.hero-slide { flex: 0 0 100%; padding: 64px 24px 56px; text-align: center; background-size: cover; background-position: center; }
.hero-slide-1 { background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%); }
.hero-slide-2 { background: linear-gradient(135deg, #1a0f2e 0%, #6d28d9 100%); }
.hero-slide-3 { background: linear-gradient(135deg, #0f172a 0%, #0ea5b7 100%); }
/* a felhasználó saját, valódi termékfotóit ("cinema" képek) használjuk
   háttérként a sima színátmenet helyett — halvány, EGYSZÍNŰ fekete
   overlay-vel kombinálva (a felhasználó kifejezett kérésére, a korábbi
   színes overlay helyett), hogy a fehér cím/szöveg mindhárom dián jól
   olvasható maradjon a fotó felett is */
body.gamer-theme .hero-slide-1 {
  background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), url("/assets/hero/hero-1-gamerpc.jpg") center/cover;
}
body.gamer-theme .hero-slide-2 {
  background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), url("/assets/hero/hero-2-rgb.jpg") center/cover;
}
body.gamer-theme .hero-slide-3 {
  background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), url("/assets/hero/hero-3-gpu.jpg") center/cover;
}
.hero-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-carousel-dot.active { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .hero-carousel-track { transition: none; }
}

/* Bizalom-sáv — rövid jelvények a hero alatt, a checkout előtti bizalmat
   erősítik (licenckulcs-shopnál ez tipikusan nagyobb súlyú, mint egy
   átlagos e-commerce oldalnál). */
.trust-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.trust-icon { font-size: 1.05rem; }

@media (max-width: 640px) {
  .hero { padding: 40px 20px; }
  .hero-inner h1 { font-size: 1.6rem; }
  .trust-bar-inner { gap: 10px 20px; }
  .trust-item { font-size: 0.82rem; }
}

/* Bizalmi jelvények alatti "állapot sáv" a főoldalon (ügyfélszám, eladott
   licenc, piacon töltött évek) — sötét háttér, kiemelt (nagy, félkövér)
   számokkal, hogy vizuálisan elváljon a fölötte lévő, halványabb
   trust-bar-tól. JS tölti fel élő adattal, lásd public/app.js. */
.stats-bar {
  background: var(--accent);
}
.stats-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 48px;
}
.stats-item { text-align: center; }
.stats-item .stats-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}
.stats-item .stats-label { font-size: 0.82rem; color: #cbd5e1; font-weight: 600; }
body.gamer-theme .stats-item .stats-label { color: #fff; }
@media (max-width: 640px) {
  .stats-bar-inner { gap: 14px 28px; padding: 18px 20px; }
  .stats-item .stats-num { font-size: 1.3rem; }
}

/* Kompakt bizalom-sáv változat — a fő .trust-bar-t csak a főoldal
   használja; ez ugyanazokat a .trust-item/.trust-icon osztályokat veti be
   háttér/keret nélkül, a döntés helyén (termékoldal, pénztár), hogy azt is
   lássa, aki nem a főoldalon keresztül érkezett. */
.trust-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
}
.trust-mini .trust-item { font-size: 0.82rem; }

/* Főoldali szekciók közös burka (Népszerű Szoftverek, Kategóriák) — a
   .reviews-inner-hez hasonló max-width/padding minta, hogy vizuálisan
   egységes ritmusban kövessék egymást. */
.home-section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 8px;
}
.home-section-inner h2 { font-size: 1.4rem; margin: 0 0 20px; text-align: center; }

.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.category-tile {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.category-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.category-tile:hover img { transform: scale(1.04); }
.category-tile-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* Laptop-bevezető promó sáv a Kiemelt Termékek fölött — a felhasználó
   kifejezett kérésére, a Milpay részletfizetést és az iskola/munka-kezdés
   idényt hangsúlyozva. */
/* ugyanaz a "boxed" szélesség-korlátozás, mint a hero-carouselnél — a
   felhasználó kifejezett kérésére ne legyen böngésző-szélességű sáv */
.laptop-promo {
  background: linear-gradient(135deg, var(--brand-accent) 0%, #6d28d9 55%, #0ea5b7 130%);
  max-width: 1080px;
  margin: 24px max(24px, calc((100% - 1080px) / 2)) 0;
  border-radius: var(--radius);
  padding: 44px 24px;
  text-align: center;
}
/* a felhasználó kifejezett kérésére nincs sötétítő átfedés a képen (lásd
   lentebb .laptop-promo teljes szabálya a pontos méretezésért/pozícióért) */
body.gamer-theme .laptop-promo {
  background-image: url("/assets/category-source/laptop-cover.jpg");
}
.laptop-promo-inner { max-width: 680px; margin: 0 auto; }
.laptop-promo h2 { font-size: 1.9rem; margin: 0 0 6px; font-weight: 800; color: #fff; }
.laptop-promo-sub { font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; color: #fff; }
.laptop-promo-body { font-size: 0.95rem; line-height: 1.6; margin: 0 0 22px; color: rgba(255, 255, 255, 0.92); }
.laptop-promo .hero-cta { background: #fff; color: var(--brand-accent); }
.laptop-promo .hero-cta:hover { background: #f0f0f0; color: var(--brand-accent); }
@media (max-width: 640px) {
  .laptop-promo h2 { font-size: 1.5rem; }
  .laptop-promo-sub { font-size: 1rem; }
}

/* "Miért Válassz Minket?" — négy statikus USP-blokk, a bizalom-sávnál
   részletesebb szöveggel (lásd public/index.html, a felhasználó saját,
   korábbi shopjából áthozott szövegezéssel). */
.usp-section { background: var(--surface); border-top: 1px solid var(--border); }
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.usp-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 20px;
}
.usp-card h3 { font-style: italic; font-size: 1.05rem; margin: 0 0 10px; }
.usp-card p { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }

/* Beszámítás oldal (public/tradein.html) — számozott jelvény a 4 lépéses
   folyamat usp-card-jain, és a támogatott eszközök chip-rácsa. */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.tradein-devices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.tradein-device-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  font-size: 0.9rem;
}
.tradein-device-icon { font-size: 1.2rem; }

/* "Nem csak eladjuk, de teszteljük is!" — YouTube-csatorna kiemelő
   szekció, lásd public/index.html megjegyzése: amíg nincs konkrét
   videó megadva, egy kattintható, csatornára mutató placeholder
   látszik "lejátszás" ikonnal, valódi <iframe> beágyazás helyett. */
.video-embed-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  max-width: 640px;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 0 auto;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.video-embed-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-embed-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}
.video-embed-play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: #fff;
  font-size: 1.6rem;
  transition: transform 0.2s ease;
}
.video-embed-placeholder:hover .video-embed-play { transform: scale(1.08); }
.video-embed-frame-wrap {
  max-width: 640px;
  aspect-ratio: 16/9;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
}
.video-embed-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Görgetésre megjelenő ("scroll reveal") finom animáció, lásd
   public/reveal.js — a .reveal-visible osztályt a szekció viewportba
   kerülésekor kapja meg. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
/* A főoldal <main>-je (accessibility landmark — lásd public/index.html)
   a hero/trust-bar/vélemények teljes szélességű, saját hátterű szekcióit
   is tartalmazza, ezeket a fenti max-width/padding szétfeszítené — a
   szekciók már maguk gondoskodnak a saját belső (pl. .hero-inner,
   .reviews-inner) szélesség-korlátjukról. */
main.home-main { max-width: none; margin: 0; padding: 0; }
/* #catalog-section korábban maga volt a <main> — az accessibility-javítás
   (egyetlen, mindig valós <main> landmark az oldalon, lásd fent) miatt
   most már csak egy sima <div> a home-main-en belül, ezért a fenti
   elem-szelektoros main{} szabály többé nem vonatkozik rá — ugyanazt a
   szélesség/padding-korlátot itt, explicit módon kell megadni neki,
   különben a szűrt/kategória nézetekben (ahol ez a rész látszik) elveszne
   a középre igazítás. */
#catalog-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Vásárlói vélemények — csak a szűretlen főoldalon, a termékrács alatt,
   közvetlenül a lábléc felett (lásd public/app.js REVIEWS). */
.reviews {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.reviews-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 48px;
}
.reviews-inner h2 {
  text-align: center;
  font-size: 1.4rem;
  margin: 0 0 24px;
}
/* Végtelenített, oldalra folyamatosan gördülő vélemény-szalag — a
   felhasználó kifejezett kérésére több (max 10) vélemény jelenik meg,
   nem statikus rácsban, hanem önműködően, megállás nélkül tovagördülve.
   Sima CSS-animáció, függőség nélkül: a JS (public/app.js) a kártya-
   listát KÉTSZER írja egymás után a trackbe, a track pedig pontosan a
   fele szélességét tolja el végtelenítve — mivel a második másolat
   pixelre egyezik az elsővel, a hurok varrat nélkül ér vissza. */
.reviews-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.reviews-grid {
  display: flex;
  gap: 18px;
  width: max-content;
  /* saját kompozit-réteget kérünk a szalagnak: enélkül iOS Safariban a
     szülő mask-image-e és a gyerek transform-animációja együtt időnként
     ÜRESEN hagyta a sávot (a felhasználó jelezte: "van hogy nem jelenik
     meg") — ez a maszkolt tartalom + animált gyerek ismert Safari
     kompozitálási hibája */
  will-change: transform;
}
/* Az animáció SZÁNDÉKOSAN csak akkor indul, amikor a kártyák MÁR a DOM-ban
   vannak (public/app.js teszi rá az .is-ready osztályt a lista kiírása
   után). Korábban az animáció az oldal betöltésekor, még ÜRES szalagon
   elindult, és mire a /api/reviews/public válasza megjött, a ciklus már
   a közepén járt — a -50%-os eltolás ilyenkor a (közben kiszélesedett)
   szalagot kitolta a képernyőről, így a vélemények elsőre nem látszottak,
   és csak a 45 másodperces kör újraindulásakor "álltak helyre". Pontosan
   ezt jelezte a felhasználó: "elsőre nem működik, aztán egy idő után
   szépen gördül". */
.reviews-grid.is-ready {
  animation: reviews-scroll 45s linear infinite;
}
/* A megállítás CSAK valódi egérmutatós eszközön érvényes: érintőképernyőn
   egy tap után a böngésző gyakran :hover állapotban RAGAD (ugyanaz a
   jelenség, mint a nav legördülőinél, lásd public/nav.js megjegyzése),
   ettől a szalag véglegesen megállt — a felhasználó jelezte: "van hogy
   csak áll egy helyben". */
@media (hover: hover) and (pointer: fine) {
  .reviews-marquee:hover .reviews-grid { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-grid,
  .reviews-grid.is-ready { animation: none; }
}
/* Mobilon a széleket elhalványító maszkot teljesen elhagyjuk: keskeny
   kijelzőn alig látszik belőle bármi, viszont ez a maszk az animált
   gyerekkel együtt okozta iOS Safariban az üresen maradó sávot. A
   fentebbi will-change mellett ez a második, biztosabb védelem. */
@media (max-width: 640px) {
  .reviews-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.review-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  flex: 0 0 260px;
  width: 260px;
}
.review-stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.related-section { margin-top: 40px; }
.related-section h2 { margin-bottom: 16px; }

.review-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.review-text {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 10px;
}
.review-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-dim);
}

h1 { font-size: 1.7rem; margin: 0 0 20px; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; margin: 0 0 12px; font-weight: 700; }

/* #page-title (public/app.js) — a katalógus-nézet (kategória/keresés/
   "Az összes megtekintése" → /?all=1) önálló oldalcíme; a valódi
   főoldalon ez a szekció (#catalog-section) rejtve marad, tehát ez sosem
   jelenik meg a hero <h1>-je mellett. */
#page-title { font-size: 1.7rem; margin: 0 0 20px; font-weight: 800; letter-spacing: -0.01em; text-align: left; }

.catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.catalog-header #page-title { margin: 0 0 20px; }
/* margin-left:auto — mobilon a cím teljes sort foglal, ezért a
   darabszám+rendezés csoport új sorba kerül, és a space-between ott már
   nem tolja jobbra (egyetlen elem a sorban). Enélkül a rendezés gomb
   balra ragadt, és a jobbra igazított legördülője (lásd
   .sort-dropdown-menu right:0) kilógott a képernyőről. */
.catalog-header-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.results-count { color: var(--text-dim); font-size: 0.9rem; white-space: nowrap; }

/* Tárhely (tarolo) gomb-alapú szűrők — a felhasználó kifejezett
   kérésére NEM legördülő, a #spec-filters többi eleme (.spec-filter-
   select) mellett jelenik meg */
.spec-filter-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spec-filter-buttons-label { font-size: 0.82rem; color: var(--text-dim); width: 100%; }
.spec-filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.86rem;
  cursor: pointer;
}
.spec-filter-btn:hover { background: var(--surface-2); }
.spec-filter-btn.active { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 28px 0; }
.pagination button {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination button:not(:disabled):hover { background: var(--surface-2); }
.pagination-info { color: var(--text-dim); font-size: 0.9rem; white-space: nowrap; }

.builder-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.builder-slot h3 { margin: 0; font-size: 1rem; }
/* CPU-alaplap foglalat-párosítás magyarázó szövege — a felhasználó
   kifejezett kérésére, amikor az Alaplap szlot listája a kiválasztott
   processzor foglalatára szűkül */
.pcb-platform-note { margin: 4px 0 0; font-size: 0.82rem; color: var(--ok-text); font-weight: 600; }
.builder-slot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

/* egyedi, kereshető legördülő a natív <select> helyett (a felhasználó
   kifejezett kérésére: a kereső mező NE a lista fölött, hanem BENNE,
   legfelül legyen) — ugyanaz a nyit/zár minta, mint public/app.js
   .sort-dropdown-jánál, csak itt a panel legfelső eleme egy input */
.pcb-picker-open-btn {
  width: 100%;
  /* flex-gyerekként (lásd .build-picker-row a termékoldalon) a
     min-width alapértéke "auto", ami a min-content méretnél kisebbre NEM
     engedi zsugorodni — egy hosszú alkatrésznévvel (white-space:nowrap)
     ez kitolta a termékoldalt vízszintesen mobilon. A min-width:0 az,
     ami az alábbi text-overflow:ellipsis-t egyáltalán érvényre juttatja.
     (Ugyanaz a hibaosztály, mint a .grid minmax(0,1fr) eseteknél.) */
  min-width: 0;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcb-picker-open-btn:hover { background: var(--surface-2); }

/* Nagy, kényelmes szlot-választó modal — a felhasználó kifejezett
   kérésére a korábbi kicsi, szöveges legördülő helyett. Ugyanaz az
   overlay-minta, mint az upsell-modalnál, csak szélesebb és rács-alapú. */
.pcb-picker-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pcb-picker-modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 920px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
}
.pcb-picker-modal h2 { margin: 0 0 14px; font-size: 1.2rem; padding-right: 30px; }
/* a felhasználó kifejezett kérésére a választó-modalban ugyanazok a
   specifikáció-szűrők jelennek meg, mint a katalógus oldalon (lásd
   public/geposszerako.js SLOT_FACETS) — a .spec-filter-select osztály
   maga innen öröklődik (ugyanaz a legördülő-stílus), de a KONTÉNER itt
   sima, vízszintesen tördelődő sor, NEM a katalógus oldal 200px-es,
   sticky sidebar-elrendezése (#spec-filters), mert a modal belseje nem
   az */
.pcb-picker-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.pcb-picker-facets .spec-filter-select { width: auto; flex: 1 1 160px; }
.pcb-picker-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
/* A felhasználó kifejezett kérésére a Gépösszerakó kereső-modaljában
   (mind a shopban, mind az adminon — ugyanezt a .pcb-picker-* osztály-
   készletet használja mindkét helyen) a termékkártyák kb. 50%-kal
   kisebbek, hogy egyszerre több termék legyen látható/áttekinthető. */
.pcb-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.pcb-picker-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pcb-picker-card:hover { border-color: var(--brand-accent); }
.pcb-picker-card.selected { border-color: var(--brand-accent); box-shadow: 0 0 0 2px var(--brand-accent) inset; }
.pcb-picker-card input[type="radio"] { position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; }
.pcb-picker-card img,
.pcb-picker-card-img-empty { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
/* ugyanaz a törés/levágás, mint a termékkártyán (.card h3) — az importált
   nevek végén álló, szóköz nélküli hosszú token itt is kilógna */
.pcb-picker-card strong {
  font-size: 0.74rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcb-picker-card-price { color: var(--brand-accent); font-weight: 700; font-size: 0.78rem; }
.pcb-picker-card-none { align-items: center; justify-content: center; min-height: 55px; color: var(--text-dim); font-weight: 600; font-size: 0.8rem; }
/* A felhasználó kifejezett kérésére a publikus Gépösszerakóban (csak itt,
   nem adminon — body.gamer-theme csak a public oldalakon van jelen)
   asztali nézetben a fenti alap (50%-kal kicsinyített) méretekhez képest
   +30%-kal nagyobbak a kártyák. */
@media (min-width: 781px) {
  body.gamer-theme .pcb-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(117px, 1fr));
    gap: 10px;
  }
  body.gamer-theme .pcb-picker-card { padding: 8px; gap: 4px; }
  body.gamer-theme .pcb-picker-card input[type="radio"] { top: 8px; right: 8px; width: 17px; height: 17px; }
  body.gamer-theme .pcb-picker-card strong { font-size: 0.96rem; }
  body.gamer-theme .pcb-picker-card-price { font-size: 1.01rem; }
  body.gamer-theme .pcb-picker-card-none { min-height: 72px; font-size: 1.04rem; }
}

/* Admin gépösszerakó (admin/pc-builder.js) — Termékből/Kézi/Nincs
   mód-váltó gombok + keresőmezős találati lista + kiválasztott-tétel
   "chip" a builder-slot kártyák belsejében */
.pcb-mode-btn.active { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.pcb-search-results { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.pcb-search-result { padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 0.88rem; }
.pcb-search-result:hover { background: var(--surface-2); }
.pcb-search-empty { padding: 7px 8px; color: var(--text-dim); font-size: 0.85rem; }
.pcb-chosen { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.9rem; }
.builder-services { margin: 0 0 20px; }
.builder-services h3 { margin: 0 0 12px; font-size: 1rem; }
.builder-services-list { display: flex; flex-direction: column; gap: 10px; }
.builder-service-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.builder-service-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.builder-service-item span:nth-child(2) { flex: 1; }
.builder-service-price { color: var(--text-dim); font-weight: 600; }
.builder-summary { max-width: 340px; margin-left: auto; align-items: stretch; }
.builder-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; }

/* a katalógus-rács és a specifikáció-szűrő oldalsáv egymás mellett — a
   felhasználó kifejezett kérésére a szűrő keskeny, jobb oldalon, fent
   ragad görgetéskor (position: sticky), nem egy vízszintes sáv a rács
   fölött. Üres #spec-filters (nem gamer-pc kategória) esetén a JS
   display:none-t ad rá (lásd public/app.js renderSpecFilters), hogy ne
   foglaljon feleslegesen helyet. */
.catalog-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.catalog-layout .grid { flex: 1; min-width: 0; }
#spec-filters {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: calc(var(--header-height, 76px) + 20px);
}
.spec-filter-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}
#spec-filter-clear {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
}
#spec-filter-clear:hover { background: var(--surface-2); }

/* keskeny (mobil/tablet) nézetben a lebegő, ragadós oldalsáv nem fér el
   kényelmesen a rács mellett — visszaváltunk a rács fölötti, nem ragadós,
   vízszintesen tördelődő elrendezésre */
@media (max-width: 900px) {
  .catalog-layout { flex-direction: column; }
  /* a felhasználó kifejezett kérésére a szűrők mobilon a termékrács
     FÖLÖTT jelenjenek meg, ne alatta — a DOM-sorrend (lásd
     public/index.html #grid előbb, #spec-filters utána, a deszktopos
     oldalsáv-elrendezés miatt) enélkül a rács ALÁ tenné a szűrőket egy
     oszlopos (column) elrendezésben */
  #spec-filters {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    order: -1;
  }
  .spec-filter-select { width: auto; flex: 1 1 140px; }
}

.sort-dropdown { position: relative; margin-bottom: 20px; flex-shrink: 0; }
.sort-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.sort-dropdown-toggle:hover { background: var(--surface-2); }
.sort-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 190px;
  /* soha ne lóghasson ki a képernyőből: a jobb szélhez tapad (right:0),
     a max-width pedig a viewporton belül tartja keskeny kijelzőn is */
  max-width: calc(100vw - 32px);
  padding: 6px;
  z-index: 20;
}
.sort-dropdown.open .sort-dropdown-menu { display: block; }
.sort-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}
.sort-option:hover { background: var(--surface-2); color: var(--text); }
.sort-option.active { color: var(--brand-accent); font-weight: 700; }
/* a gamer témában MINDEN sima <button> lila-kék színátmenetet kap (lásd
   fenti "button:not(.secondary):not(.danger)" szabály), ezért itt kézzel
   adjuk meg a szövegszínt. A felhasználó kifejezett kérésére: a NEM aktív
   elemek FEKETÉK, a kiválasztott (aktív) rendezés FEHÉR — így a lila
   háttéren az aktuális választás emelkedik ki. */
body.gamer-theme .sort-option,
body.gamer-theme .sort-option:hover {
  color: var(--kt-ink) !important;
}
body.gamer-theme .sort-option.active {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(0, 224, 255, 0.8);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
/* a felhasználó kifejezett kérésére asztali nézetben fixen 4 oszlop
   legyen a termékrácsban (a fluid auto-fill a konténer szélességétől
   függően néha csak 3-at adott volna ki). minmax(0,1fr), NEM bare 1fr —
   utóbbi minmax(auto,1fr)-t jelent, ahol egy kártya (pl. hosszabb cím/
   jelvény miatti szélesebb min-content) szélesebbre kényszerítheti a
   saját oszlopát, a többi 1fr oszlop rovására (ugyanaz a hiba, amit a
   mobil 2-oszlopos szabálynál lentebb már javítottunk). */
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* mobilon a 220px-es minmax már csak 1 oszlopba fér ki (túl nagy
   kártyák) — itt fixen 2 oszlopra váltunk, kisebb réssel/paddinggel,
   hogy a kártyák tartalma (kép, cím, ár) még kényelmesen elférjen */
@media (max-width: 560px) {
  .grid {
    /* "1fr" önmagában minmax(auto,1fr)-t jelent — ha egy kártya
       tartalmának (pl. hosszú ár/cím) natív min-szélessége meghaladja a
       felére eső részt, az a oszlop szélesebbre nő, a másik keskenyebbre
       szorul (ez okozta a valódi, keskeny telefonon jelentkező "nem
       50-50%-os" elrendezést, amit egy asztali böngésző-ablak
       összehúzása nem feltétlenül reprodukált, mert az ritkán megy ilyen
       keskenyre). minmax(0,1fr)-fel a két oszlop MINDIG pontosan
       egyenlő, a tartalom inkább tördelődik/kilóg, nem feszíti szét. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .grid .card { padding: 10px; gap: 6px; }
  .grid .card h3 { font-size: 0.92rem; }
  .grid .card .price { font-size: 1rem; }
  /* a felhasználó kifejezett kérésére a felirat marad (az ikon-only
     változat nem tetszett) — csak kicsit kisebb betűméret/padding a
     keskeny (2 oszlopos) mobil kártyán */
  .credit-corner-badge {
    font-size: 0.62rem;
    padding: 3px 9px 3px 10px;
    top: 6px;
  }
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
/* "Vedd részletre!" feltűnő sáv a kártya/termékkép bal felső csücskében —
   a felhasználó kifejezett kérésére a korábbi, kevésbé feltűnő sima
   jelvény helyett (lásd .badge.credit, ami emiatt csak a jelvény-alap
   stílust adja, itt saját pozícionálás jön hozzá) */
.credit-corner-badge {
  position: absolute;
  top: 12px;
  left: -6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--brand-accent) 0%, #6d28d9 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 5px 12px 5px 14px;
  border-radius: 0 999px 999px 0;
  box-shadow: 0 3px 10px rgba(139, 61, 255, 0.5);
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
}
.credit-corner-badge .site-icon { width: 0.95em; height: 0.95em; }

a.card:hover, .grid .card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: #d4d4d8;
}

/* fix arányú doboz minden termékkártya-képnek — álló és fekvő fotók is
   ugyanakkora helyet foglalnak (korábban a kép saját aránya szerint
   változott a kártya magassága, egyenetlen rácsot adva).
   object-fit:cover — a felhasználó kifejezett kérésére (álló képarányú
   fotók, pl. a Komphone-importból, "contain" mellett keskenyen,
   üres sávokkal jelentek meg) a kép mindig kitölti a keretet, a felesleg
   levágódik, ahelyett hogy semleges háttérrel keretezné. */
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-2);
}

/* Termék-részletoldal (public/product.js) — mobilon a .card alap
   (flex-column) elrendezést örökli változatlanul (kép, majd alatta minden),
   asztali nézetben ("min-width: 781px" lásd lentebb) 2 oszlopossá válik:
   bal oldalon a (nagyobb) kép, jobb oldalon cím/ár/mennyiség/gomb és alatta
   a leírás — lásd a media query blokkot. */
.product-layout {
  /* A calc(100vw - 48px) egy BIZTONSÁGI KORLÁT: a kártya akkor sem lehet
     szélesebb a képernyőnél, ha valamelyik gyermeke (leírás, konfigurátor-
     sor, kép) túlcsordulna — enélkül a kártya "belezoomolt"-nak látszott
     mobilon, a termék neve levágódott (élesben jelzett hiba). A 48px a
     <main> két oldali paddingje (lásd main{padding:32px 24px}). */
  max-width: min(520px, calc(100vw - 48px));
  margin: 0 auto;
}
.product-main-image-wrap {
  position: relative;
}
.product-main-image-wrap img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--surface-2);
  cursor: zoom-in;
}
.gallery-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a22;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.gallery-zoom-btn:hover { background: #fff; }

/* csak kb. 4 bélyegkép fér el egyszerre láthatóan — ennél több kép
   esetén a sáv vízszintesen görgethető, a felhasználó kifejezett kérésére */
.product-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  width: calc(4 * 76px + 3 * 8px);
  max-width: 100%;
}
.product-thumb {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
  border: 2px solid transparent;
}
.product-thumb:hover {
  opacity: 1;
}
.product-thumb.active {
  opacity: 1;
  border-color: var(--brand-accent);
}

/* Teljes képernyős képnagyító — a nagyító ikonra vagy a fő képre
   kattintva nyílik, nyíl-gombokkal/balra-jobbra billentyűkkel lapozható
   az összes galéria-kép között (lásd public/product.js). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 14, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox:not([hidden]) { display: flex; }
.lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lightbox-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 1.6rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.2rem; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 14px;
  border-radius: 999px;
}
@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}
.product-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* rács-/flex-gyerekként ne feszítse szét a min-content méret (lásd a
     .product-layout minmax(0,1fr) megjegyzését) */
  min-width: 0;
}
/* A termékleírás jelentős része IMPORTÁLT szöveg, amiben a mezők gyakran
   szóköz nélkül összeragadnak (ezért létezik a normalizeSpecText a
   public/app.js-ben) — egy ilyen, több száz karakteres "egy szó" mobilon
   vízszintesen kitolta az egész oldalt (a felhasználó jelezte: a
   termék neve is levágódott). Az anywhere engedi a tördelést szón belül
   is, de csak akkor, ha másképp nem férne ki. */
/* Termékleírás — a felhasználó kifejezett kérésére nagyobb, vastagabb betűvel,
   és az oldal saját betűtípusával.
   A font-family/size/weight ÖRÖKLÉSÉT a leszármazottakon is kikényszerítjük:
   a leírások importált HTML-ből jönnek (Komphone/Hardverapró/Shopify), ahol
   bármikor felbukkanhat egy <span style="font-family:...">, ami elrontaná az
   egységes megjelenést. Jelenleg nincs ilyen a bázisban (ellenőrizve), ez a
   szabály tehát megelőző. A félkövér (<b>/<strong>) SZÁNDÉKOSAN kimarad a
   kényszerítésből, hogy a leírás saját kiemelései megmaradjanak. */
.desc {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
}
.desc p,
.desc li,
.desc div,
.desc span,
.desc td,
.desc font {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.desc b,
.desc strong {
  font-weight: 700;
}
/* ugyanez a védelem a hosszú termék-névre (h1) is */
.product-info h1 {
  overflow-wrap: anywhere;
}

/* Admin Gépösszerakóval létrehozott konfig-PC termékoldala — a vevő
   szlotonként cserélheti a választott alkatrészt, lásd public/product.js
   renderBuildPicker/routes/storefront.js buildParts. A felhasználó
   kifejezett kérésére a doboz lila árnyékot kap, a legördülők pedig a
   szoftver-opció gombok (.addon-option-btn) lila stílusát követik. */
.product-build-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(139, 61, 255, 0.18);
}
.product-build-picker h3 { margin: 0; font-size: 1rem; }
.build-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.build-picker-label { font-weight: 600; font-size: 0.88rem; color: var(--text-dim); flex-shrink: 0; }
.build-picker-fixed { font-size: 0.9rem; }
.build-picker-select {
  flex: 1 1 240px;
  min-width: 0;
  padding: 8px 16px;
  border: 1.5px solid var(--brand-accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-accent);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.build-picker-select:hover { background: rgba(139, 61, 255, 0.08); }
.build-picker-select:focus { outline: 2px solid var(--brand-accent); outline-offset: 1px; }

/* A leírás alapból összecsukott állapotban jelenik meg (lásd product.js) —
   csak akkor kap "Teljes leírás mutatása" gombot, ha a szöveg ténylegesen
   túlnyúlna a korláton. */
.desc.collapsed {
  max-height: 480px;
  overflow: hidden;
  position: relative;
}
.desc.collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--surface));
}
.desc-toggle {
  background: none;
  border: none;
  color: var(--brand-accent);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 0 0;
  cursor: pointer;
}
.desc-toggle:hover { background: none; text-decoration: underline; }

@media (min-width: 781px) {
  .product-layout {
    max-width: 1000px;
    display: grid;
    /* minmax(0,1fr) és NEM 1fr: a csupasz 1fr valójában minmax(auto,1fr),
       ami a rács-elem min-content méreténél kisebbre nem enged — egy
       hosszú, tördelhetetlen szöveg (pl. összeragadt importált leírás)
       így szétfeszítené a két oszlopot. Ugyanaz a hibaosztály, mint a
       terméklista .grid szabályánál. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

/* Terméknév a kártyán. A felhasználó kifejezett kérésére a túlnyúló nevek
   LE VANNAK VÁGVA, nem folytatódnak a kártya keretén kívül: az importált
   nevek végén gyakran áll egy szóköz nélküli, hosszú token (pl.
   "GIGABYTE(HASZNÁLT)", "POWERCOLOR(HASZNÁLT)"), amit a böngésző nem tud
   hol eltörni, ezért kilógott.
   - overflow-wrap/word-break: a hosszú token végső esetben megtörhető, így
     a szöveg soha nem lóg ki oldalra,
   - line-clamp: 3 sor után "…"-tal elvágjuk, hogy a rács sorai ne
     csússzanak szét az eltérő hosszúságú nevektől.
   A teljes név a termékoldalon és a kép alt-szövegében továbbra is megvan. */
.card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Kártya-ár (termék-lista, kapcsolódó termékek) — a felhasználó
   kifejezett kérésére a termékoldali árral összhangban kiemelve
   (márka-lila, félkövér), és margin-top:auto-val mindig a Kosárhoz gomb
   fölé rögzítve, mert a kártya .a-linkje flex:1 miatt nyúlik ki a rács
   sortársainak magasságáig — enélkül a hely a leírás/jelvények
   hosszától függően kártyánként máshol maradt volna a gomb fölött. */
.card .price { font-weight: 800; font-size: 1.15rem; color: var(--brand-accent); margin-top: auto; }
.card .desc { color: var(--text-dim); font-size: 0.9rem; flex: 1; }
/* rövid leírás-előnézet a laptop kártyákon — a felhasználó kifejezett
   kérésére, hogy nagyjából lássák, mit tud a gép anélkül, hogy
   megnyitnák a termékoldalt; 2 sorra vágva, hogy ne nyújtsa el a kártyát */
.card-desc-snippet {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Termékleírás (mentéskor már sanitizált HTML) — a Shopify/Elementor
   export saját inline stílusait szándékosan eldobjuk sanitizáláskor, itt
   adjuk meg helyette a mi design rendszerünkhöz illő alap megjelenést. */
.desc h2, .desc h3, .desc h4 { margin: 14px 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.desc p, .desc div { margin: 8px 0; }
.desc ul, .desc ol { margin: 6px 0; padding-left: 22px; }
.desc li { margin: 3px 0; }
.desc a { color: var(--text); text-decoration: underline; }
.desc a:hover { color: var(--brand-accent); }
/* a tartalom-oldalakba (útmutatók) szúrt képek NE a .card img
   termékkártya-szabályt örököljék (width:100%) — ehelyett a kép saját
   arányát/méretét tartsa meg, csak felül korlátozva, hogy egy nagy
   felbontású képernyőfotó se törje szét az elrendezést. Magasabb
   specifikusságú, mint a ".card img", ezért felülírja azt. */
.card .desc img, .rte img {
  width: auto;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: initial;
  border-radius: 6px;
  margin: 8px 0;
  display: block;
  background: none;
}

/* Admin: alapvető formázó eszköztár + szerkeszthető doboz a
   termékleíráshoz (lásd admin/products.js) — a doboz ugyanazt a .desc
   stílust használja, mint a publikus oldal, hogy szerkesztés közben is
   úgy nézzen ki, ahogy a vevők látni fogják. */
.editor-toolbar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.editor-toolbar button {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 34px;
}
.editor-toolbar button:hover { background: var(--surface-2); }
.rte {
  min-height: 140px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.95rem;
}
.rte:focus { outline: none; border-color: var(--text); }
.rte:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
}

.price-original {
  text-decoration: line-through;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.9em;
  margin-right: 8px;
}

/* Termékoldali ár — a felhasználó kifejezett kérésére MINDIG a Kosárba
   gomb fölött (lásd product.js renderProduct sorrend), és vizuálisan
   kiemelve, nem sima szövegként (lásd product.js .price.product-price). */
.product-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-accent);
}
.product-price .price-original { font-size: 0.5em; }

/* Windows/Office hozzáadásakor élőben mutatott végösszeg (lásd
   product.js updateAddonTotal) — csak akkor látszik, ha van kiválasztott
   szoftver, ezért kevésbé domináns, mint a .product-price. */
.product-addon-total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-alt, rgba(139, 61, 255, 0.08));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.product-addon-total #product-addon-total-value { color: var(--brand-accent); }

/* Windows/Office választó gombok (lásd product.js renderAddonGroupSelect)
   — a felhasználó kifejezett kérésére NEM legördülő, maga a szöveg
   (szoftver neve + ára) a gomb, a .spec-filter-btn mintáját követve. */
.product-addons { display: flex; flex-direction: column; gap: 10px; }
.addon-row { display: flex; flex-direction: column; gap: 8px; }
/* a felhasználó kifejezett kérésére a cím maga egy gomb, ami lenyitja a
   kis lila opció-gombokat (lásd product.js renderAddonGroupSelect) —
   háttér/keret nélküli, csak a szöveg+nyíl jelzi, hogy kattintható */
.addon-row-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.addon-row-toggle:hover { background: var(--surface-2); }
.addon-row-toggle-icon { color: var(--text-dim); font-size: 0.75rem; flex-shrink: 0; }
.addon-button-group { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 0; }
.addon-option-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.86rem;
  cursor: pointer;
}
.addon-option-btn:hover { background: var(--surface-2); }
.addon-option-btn.active { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge.in_stock { background: rgba(22,163,74,0.12); color: var(--ok-text); }
.badge.low_stock { background: rgba(194,118,10,0.12); color: var(--warn-text); }
.badge.out_of_stock { background: rgba(209,41,61,0.12); color: var(--danger-text); }
.badge.sale { background: var(--brand-accent); color: #fff; }
.badge.condition-uj { background: rgba(22,163,74,0.12); color: var(--ok-text); }
.badge.condition-hasznalt { background: var(--surface-2); color: var(--text-dim); }
.badge.delivery-info { background: var(--surface-2); color: var(--text-dim); text-transform: none; letter-spacing: normal; }
.badge.delivery-info.in-stock { background: rgba(22,163,74,0.12); color: var(--ok-text); }
/* a felhasználó kifejezett kérésére: jelvény azoknál a gépeknél a
   termék-listán, ahol a vevő módosíthatja az összeállítást a
   termékoldalon (lásd routes/storefront.js is_configurable). */
.badge.configurable { background: rgba(139, 61, 255, 0.12); color: var(--brand-accent); }
/* "Vedd részletre" (Milpay) jelvény — a felhasználó kifejezett kérésére,
   csak a partnernél admin oldalon bekapcsolt (vagy saját feltöltésű),
   ár-limitbe eső termékeknél jelenik meg, lásd routes/storefront.js
   isCreditEligible */
.badge.credit { background: rgba(139, 61, 255, 0.15); color: var(--brand-accent); }

button, .btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
button:hover, .btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); }
button:active, .btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
button:disabled { background: var(--surface-2); color: var(--text-dim); cursor: not-allowed; box-shadow: none; transform: none; }
button.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
button.secondary:hover { background: #e8e8eb; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); }

/* Elsődleges, vásárlást hajtó gomb (Kosárba, Tovább a pénztárhoz/
   fizetéshez) — a bolt márka-piros színével, hogy egyértelműen kiemelkedjen
   a többi (Belépés, Alkalmaz stb.) semleges gomb közül. Oldalanként
   szándékosan csak EGY ilyen gomb legyen, különben elveszik a kiemelés. */
button.btn-primary { background: var(--brand-accent); }
button.btn-primary:hover { background: var(--brand-accent-hover); }
button.danger { background: var(--danger); }

/* radio/checkbox nélkül — enélkül a lenti width:100%/padding/border egy
   nagy, elcsúszott dobozzá torzítaná a rádiógombokat/jelölőnégyzeteket
   (checkout fizetési mód, Magánszemély/Cég váltó, Emlékezz rám stb.) */
input:not([type="radio"]):not([type="checkbox"]), textarea, select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
}
/* az email-sablon szerkesztő eszköztárának szín-választói (admin/settings.js)
   ugyanabba a globális input-szabályba (width:100%) futnának bele, mint
   korábban a kosár darabszám-mezője — itt is magasabb specifikusságú
   szelektor kell az override-hoz */
.editor-toolbar input[type="color"] {
  width: 32px;
  height: 28px;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
}
input[type="radio"], input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--text);
}

.cart-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cart-line-img {
  width: 52px !important;
  height: 52px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.cart-line-img-empty { background: var(--surface-2); }
.cart-line .name { flex: 1; font-weight: 600; min-width: 0; }
/* a globális input-szabály (input:not([type="radio"]):not([type="checkbox"]))
   specifikussága (0,2,1) magasabb, mint egy sima ".cart-line .qty" (0,2,0)
   lenne, ezért enélkül a szélesebb "input.qty" cél nélkül a globális
   width:100% nyerne, és a mennyiség-mező szétnyomná a névoszlopot */
.cart-line input.qty { width: 56px; flex-shrink: 0; text-align: center; padding-left: 4px; padding-right: 4px; }

/* keskeny (mobil) nézetben a 4 elem (név/mennyiség/ár/törlés) egy sorban
   már nem fér el kényelmesen — a név kapjon saját sort, alatta a többi */
@media (max-width: 560px) {
  .cart-line { flex-wrap: wrap; gap: 10px; }
  .cart-line .name { flex: 1 1 100%; }
}

.summary {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.empty-state {
  color: var(--text-dim);
  padding: 40px 0;
  text-align: center;
}

.status-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}

/* Rendelés-visszaigazoló kártya (success.html) — ugyanaz a szerkezet, mint
   a mailer.js buildKeysEmailHtml HTML emailje, csak a site design rendszerét
   használva a táblázat-alapú, inline-stílusú email verzió helyett. */
.confirm-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.confirm-header {
  padding: 22px 24px;
  text-align: center;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
}
.confirm-header.ok { background: var(--ok); }
.confirm-header.partial { background: var(--warn); }
.confirm-header.danger { background: var(--danger); }
.confirm-body { padding: 24px 24px 4px; }
.confirm-body p { margin: 0 0 12px; }
.confirm-info-box {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 8px;
}
.confirm-items { padding: 8px 0 4px; }
.confirm-item { padding: 14px 0; border-top: 1px solid var(--border); }
.confirm-item:first-child { border-top: none; }
.confirm-item-title { font-weight: 700; color: var(--brand-accent); margin-bottom: 8px; }
.confirm-item-image {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-2);
}
.confirm-item-image-empty { background: var(--surface-2); }
.confirm-item-empty { color: var(--text-dim); font-size: 0.9rem; }
.confirm-footer {
  padding: 18px 24px 24px;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.confirm-footer a { color: var(--brand-accent); }
.confirm-meta { color: var(--text-dim); font-size: 0.9rem; margin-top: 10px; }

.error-msg {
  background: rgba(209,41,61,0.08);
  color: var(--danger);
  border: 1px solid rgba(209,41,61,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
}

.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: 0.85rem; color: var(--text-dim); font-weight: 600; }

/* Checkout MPL átvételi-pont kereső (public/checkout-page.js, lásd
   routes/mplPickupPoints.js) — a keresési találatok gördíthető listája és
   a kiválasztott pont összegző kártyája. */
.pickup-results {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: -6px 0 14px;
}
.pickup-result-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  border-radius: 0;
}
.pickup-result-item:last-child { border-bottom: none; }
.pickup-result-item:hover { background: var(--surface-2); }
.pickup-result-item span { font-size: 0.82rem; color: var(--text-dim); }
.pickup-result-empty { padding: 12px 14px; color: var(--text-dim); font-size: 0.88rem; }
.pickup-selected-card {
  border: 1.5px solid var(--brand-accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(139, 61, 255, 0.06);
}
body.gamer-theme .pickup-selected-card {
  border: 3px solid var(--kt-ink);
  box-shadow: 3px 3px 0 var(--kt-ink);
  border-radius: 0;
}
body.gamer-theme .pickup-results { border: 3px solid var(--kt-ink); border-radius: 0; }
/* a felhasználó kifejezett kérésére a találati sor cím-sora a sötét
   fejléchez hasonlóan (lásd fentebb .site-nav-group a megjegyzése) fehér,
   nem a halványabb --text-dim, ami a sötét gamer-theme felületen alig
   olvasható lila-szürkének látszott */
body.gamer-theme .pickup-result-item span { color: var(--text); }

/* Csillag-választó (vélemény beküldő oldal, lásd public/review.html/js) */
.star-picker { font-size: 2rem; line-height: 1; letter-spacing: 4px; }
.star-picker-star { cursor: pointer; color: #d4d4d8; }
.star-picker-star.active { color: #f59e0b; }

/* Bejelentkezés / regisztráció / jelszó-visszaállítás oldalak — középre
   igazított kártya, a referencia elrendezés (cím+alcím, mezők, gomb,
   elválasztó, váltó-link) a meglévő design rendszerünkkel. */
/* width:100% KELL a max-width mellé: a body a lábléc-ragasztáshoz
   display:flex;flex-direction:column (lásd lentebb), és flex elemeknél a
   margin:auto a kereszttengelyen (itt: vízszintes) kikapcsolja az alapból
   érvényes "stretch" viselkedést, ha a szélesség maga is auto — enélkül a
   kártya (és benne minden input) a böngésző alapértelmezett, kb. 200px-es
   tartalom-szélességére zsugorodott volna, függetlenül a max-width
   értékétől (ez volt az oka, hogy korábban a max-width növelése
   látszólag nem volt hatással semmire). */
.auth-page {
  width: 100%;
  max-width: 480px;
  margin: 60px auto;
  padding: 0 20px;
}
.auth-page h1 { text-align: center; font-size: 1.5rem; margin-bottom: 4px; }
.auth-page .auth-subtitle { text-align: center; color: var(--text-dim); font-size: 0.92rem; margin-bottom: 24px; }
.auth-page .back-link { display: block; text-align: center; margin-top: 20px; color: var(--text-dim); font-size: 0.9rem; }
.password-field { position: relative; }
.password-field input { padding-right: 42px; }
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px 8px;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.password-toggle:hover { background: none; color: var(--text); }
.auth-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.88rem;
}
.auth-row label { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; cursor: pointer; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-switch { text-align: center; font-weight: 600; }

/* sok admin táblázatnak (pl. Rendelések, Kulcsok) mobilon több oszlopa van,
   mint amennyi kényelmesen elférne — display:block a <table>-en (a belső
   thead/tbody/tr/td saját alapértelmezett table-* display-e nem sérül)
   azt eredményezi, hogy a táblázat MAGA görgethető vízszintesen, a teljes
   oldal (body) helyett — enélkül vagy szétnyomódtak volna az oszlopok,
   vagy az egész oldal görgethetővé vált volna vízszintesen is */
table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
table thead, table tbody, table tr { width: 100%; }
table th, table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
table th { color: var(--text-dim); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.03em; }
/* egész sorban kattintható admin táblázat-sorok (pl. Kulcsok tag-lista) —
   a háttérszín jelzi a kattintható területet, nem csak egy link a sorban */
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: var(--surface-2); }

/* mélylinkkel (pl. rendelés-részletekről "vissza a kulcshoz") érkezve ez
   emeli ki a konkrét kulcs sorát a Kulcsok táblázatban — végig megmarad,
   amíg az admin el nem hagyja az oldalt (nincs elhalványodás) */
tr.key-row-highlight { background: rgba(209, 41, 61, 0.18); }
tr.key-row-highlight:hover { background: rgba(209, 41, 61, 0.26); }

/* Napi összesítő felugró ablak (lásd admin/admin.js maybeShowDailySummary)
   — bejelentkezés utáni első admin-oldal-betöltéskor, naponta egyszer. */
.daily-summary-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.daily-summary-modal {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
}
.daily-summary-modal h2 { margin: 0 0 16px; font-size: 1.25rem; }
.daily-summary-modal h3 { font-size: 1rem; }
.daily-summary-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-dim);
}

/* az admin felület alapból fehér — csak az admin oldalakat érinti, a
   nyilvános boltot nem (az a --bg/--surface alapszínt használja) */
:root {
  --admin-bg: #ffffff;
  /* Admin-only márka-gradiens — a bolt hero-sávjával rokon paletta, hogy a
     vezérlőpult saját, energikusabb identitást kapjon, de a bolt kék
     márkaszínéhez illeszkedjen. Ezekre a nevekre a publikus bolt sehol nem
     hivatkozik, ezért itt, a :root-on definiálva is biztonságos. */
  --adm-sidebar-grad: linear-gradient(165deg, #0f172a 0%, #1e3a5f 55%, #1d4ed8 100%);
  --adm-btn-grad: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  --adm-btn-grad-hover: linear-gradient(135deg, #1d4fc4 0%, #0ea5e9 100%);
  --adm-danger-grad: linear-gradient(135deg, #991b1b 0%, #6b1414 100%);
  --adm-danger-grad-hover: linear-gradient(135deg, #7f1616 0%, #530f0f 100%);
}

/* éjszakai mód — a body[data-theme="dark"] attribútumot kizárólag az admin
   téma-váltó gomb állítja be (lásd admin/admin.js), a publikus boltban
   sosem jelenik meg, ezért ez az egész blokk csak az admin felületet
   érinti, annak ellenére, hogy a --bg/--surface/--text stb. megosztott
   változókat írja felül. A sidebar/topbar SZÁNDÉKOSAN mindig a sötét
   márka-gradienst használja (lásd lentebb) — a téma-váltó csak a
   tartalom-területet (admin-main, kártyák, táblázatok) fényesíti/sötétíti,
   a "vezérlőpult-keret" egységes marad. */
body[data-theme="dark"] {
  --admin-bg: #0f172a;
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #263548;
  --border: #334155;
  --text: #f1f5f9;
  --text-dim: #94a3b8;
  --accent: #475569;
  --accent-hover: #64748b;
}

.admin-shell { display: flex; min-height: 100vh; background: var(--admin-bg); }
.admin-sidebar {
  width: 200px;
  background: var(--adm-sidebar-grad);
  padding: 20px 0;
  flex-shrink: 0;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
}
.admin-sidebar .brand { padding: 0 20px 20px; font-weight: 800; color: #fff; }
.admin-sidebar a {
  display: block;
  margin: 2px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #cbd5e1;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-sidebar a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.admin-sidebar a.active {
  color: #fff;
  background: var(--adm-btn-grad);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
/* Az admin gombjai gradiens-alapúak, hover-en emelkedő/erősödő hatással —
   ez a szelektor-kör (.admin-shell/.admin-topbar-on belül) a publikus
   boltot nem érinti, az a sima button/.btn szabályokat használja fentebb.
   A .secondary/.danger változat megtartja a maga szerepét (semleges,
   ill. veszélyes művelet), csak ugyanezt a "gradiens + emelkedés"
   vizuális nyelvet kapja. */
.admin-shell button:not(:disabled),
.admin-shell .btn,
.admin-topbar button {
  background: var(--adm-btn-grad);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.admin-shell button:not(:disabled):hover,
.admin-shell .btn:hover,
.admin-topbar button:hover {
  background: var(--adm-btn-grad-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.admin-shell button.secondary,
.admin-shell .btn.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.admin-shell button.secondary:hover,
.admin-shell .btn.secondary:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--text-dim);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.admin-shell button.danger,
.admin-shell .btn.danger {
  background: var(--adm-danger-grad);
  box-shadow: 0 2px 8px rgba(153, 27, 27, 0.3);
}
.admin-shell button.danger:hover,
.admin-shell .btn.danger:hover {
  background: var(--adm-danger-grad-hover);
  box-shadow: 0 6px 16px rgba(153, 27, 27, 0.4);
}
/* flex:1 miatt kitölti a sidebar melletti szabad helyet, a max-width csak
   nagyon széles (ultrawide) monitoroknál fog egyáltalán korlátozni */
.admin-main { flex: 1; padding: 28px 32px; max-width: 1500px; background: var(--admin-bg); }

/* mobil felső sáv hamburgerrel — asztali nézetben rejtve, a sidebar
   önmagában látszik; kis képernyőn a sidebar eltűnik, a hamburger nyitja
   lenyíló/becsúszó panelként (ugyanaz a minta, mint a publikus nav.js-nél) */
.admin-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--adm-sidebar-grad);
  color: #fff;
}
.admin-topbar .brand { font-weight: 800; color: #fff; }
.admin-topbar .nav-hamburger { margin-left: auto; color: #fff; }
/* logó balra, hamburger jobbra a sáv normál (nem abszolút) flex-
   folyásában — margin-left:auto tolja a hamburgert (ami a DOM-ban a
   brand ELŐTT áll, lásd admin/admin.js) a sáv jobb szélére */

@media (max-width: 780px) {
  .admin-topbar { display: flex; }
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 40;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
  }
  .admin-sidebar.open { display: block; }
  .admin-main { padding: 20px 16px; max-width: 100%; }
}

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
/* Négyféle akcent-szín körbe-körbe (kék, zöld, indigó, lila) a bal szélen —
   pusztán vizuális változatosság, nem "jó"/"rossz" jelentésű szín-kódolás. */
.stat-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px 16px 22px;
  min-width: 140px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #2563eb, #38bdf8);
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.stat-row .stat-tile:nth-child(4n+2)::before { background: linear-gradient(180deg, #16a34a, #4ade80); }
.stat-row .stat-tile:nth-child(4n+3)::before { background: linear-gradient(180deg, #4f46e5, #818cf8); }
.stat-row .stat-tile:nth-child(4n+4)::before { background: linear-gradient(180deg, #9333ea, #d8b4fe); }
.stat-tile .num { font-size: 1.6rem; font-weight: 800; }
.stat-tile .label { color: var(--text-dim); font-size: 0.82rem; font-weight: 600; }

/* Analitika oldal nyitható/csukható szekciói (admin/analytics.js) — natív
   <details>/<summary>, alapból csukva, hogy az admin ne görgessen végig
   egy hosszú, egyszerre mindent kiterítő oldalt. */
.analytics-section {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 4px 20px;
}
.analytics-section > summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 1.15rem;
  font-weight: 700;
  list-style: none;
}
.analytics-section > summary::-webkit-details-marker { display: none; }
.analytics-section > summary::before { content: "▸ "; color: var(--text-dim); }
.analytics-section[open] > summary::before { content: "▾ "; }
.analytics-section-body { padding-bottom: 18px; }

/* publikus oldalak lábléce — csak a nyilvános boltot érinti, az admin
   felület saját sidebar/topbar-t használ, footer nélkül */

/* a lábléc mindig a viewport aljához tapadjon, ne csússzon feljebb rövid
   tartalmú oldalaknál (pl. kapcsolat, bejelentkezés) — a :has()-szal csak
   azokra a body-kra vonatkozik, amiknek van .site-footer gyereke, így az
   admin oldalak (más body-szerkezet) nem érintettek, HTML-módosítás nélkül */
body:has(> footer.site-footer) {
  display: flex;
  flex-direction: column;
  /* a 100vh mobil Safari-n a böngésző-sáv ÖSSZECSUKOTT állapotával számol,
     ami a betöltéskori (kinyitott sávos) valós látható magasságnál nagyobb
     — emiatt a lábléc után egy plusz, üresen görgethető sáv jelent meg. A
     100dvh a ténylegesen látható magassághoz igazodik; a 100vh előtte
     marad tartalék azoknak a (ritka, régebbi) böngészőknek, amik a dvh-t
     még nem ismerik. */
  min-height: 100vh;
  min-height: 100dvh;
}
body:has(> footer.site-footer) > main {
  flex: 1 0 auto;
}
/* Hírlevél-feliratkozó sáv, minden publikus oldalon a lábléc fölött (lásd
   public/newsletter.js) — a lábléchez hasonló, de attól elkülönülő, sötét
   márka-akcentusú sáv, hogy vizuálisan felhívja magára a figyelmet. */
.newsletter-bar {
  flex-shrink: 0;
  margin-top: 48px;
  background: var(--accent);
  padding: 22px 24px;
}
.newsletter-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.newsletter-bar-text { color: #fff; }
.newsletter-bar-text strong { display: block; font-size: 1rem; }
.newsletter-bar-text span { display: block; color: #cbd5e1; font-size: 0.85rem; margin-top: 2px; }
.newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.newsletter-form input {
  width: 240px;
  max-width: 60vw;
}
.newsletter-form button {
  background: var(--brand-accent);
  flex-shrink: 0;
}
.newsletter-form button:hover { background: var(--brand-accent-hover); }
.newsletter-msg {
  max-width: 1080px;
  margin: 10px auto 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}
@media (max-width: 640px) {
  .newsletter-bar-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .newsletter-form input { width: 100%; max-width: none; }
}

.site-footer {
  flex-shrink: 0;
  margin-top: 48px;
  background: var(--surface-2);
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding: 40px 32px 0;
}
/* a lábléc és a fölötte lévő hírlevél-sáv is flex-elem (lásd
   body:has(> footer.site-footer) fent) — flex-elemek között a margók
   NEM vonódnak össze, mint normál blokk-elrendezésben, ezért a két
   margin-top (48+48px) összeadódott, indokolatlanul nagy rést hagyva a
   kettő között. Ha közvetlenül a hírlevél-sáv előzi meg a láblécet, a
   sajátja elhagyható — a hírlevél-sáv margin-top-ja már megadja a kellő
   távolságot. */
.newsletter-bar + .site-footer { margin-top: 0; }
.site-footer-cols {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  padding-bottom: 32px;
}
.site-footer-col h3 { color: var(--text); font-size: 0.95rem; font-weight: 700; margin: 0 0 14px; }
.site-footer-col nav { display: flex; flex-direction: column; gap: 9px; }
.site-footer-col p { margin: 0; font-size: 0.88rem; }
.site-footer-col a { color: var(--text-dim); font-size: 0.88rem; font-weight: 500; }
.site-footer-col a:hover { color: var(--text); }
.site-footer-brand { display: block; color: var(--text); font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; }
.site-footer-social { display: flex; flex-direction: column; gap: 10px; }
.site-footer-social a { display: flex; align-items: center; gap: 8px; }
.social-icon { width: 16px; height: 16px; flex-shrink: 0; }
.site-footer-bottom {
  border-top: 1px solid var(--border);
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* a nyelv-váltó gomb mobilon ide kerül át a navból (lásd public/i18n.js
   langToggleTarget) — asztali nézetben ez a doboz üres marad, ilyenkor
   ne foglaljon helyet/ne törje meg a sor elrendezését */
.footer-lang-slot:empty { display: none; }
/* a copyright sorban a márkanév ne törjön külön sorba/nagy méretbe, mint az
   első oszlopban — ugyanazt a data-brand elemet használjuk mindkét helyen,
   itt csak a szövegkörnyezetbe illesztve */
.site-footer-bottom .site-footer-brand {
  display: inline;
  color: var(--text-dim);
  font-weight: 700;
  font-size: inherit;
  margin: 0;
}

/* útmutató-oldalak (public/guide.js) képeire kattintva/koppintva nyíló
   nagyított nézet — elsősorban mobilon hasznos, ahol egy beágyazott
   képernyőfotó szövege nagyítás nélkül nem olvasható */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
}
.lightbox-overlay.open { display: flex; }
/* zoomolt (természetes méretű) képnél flex-start igazítás kell, különben a
   középre igazított flex elrendezésnél a görgetősáv nem éri el a kép
   túllógó (a viewportnál nagyobb) részeit — ismert flexbox+overflow hiba */
.lightbox-overlay:has(.lightbox-img.zoomed) {
  align-items: flex-start;
  justify-content: flex-start;
}
.lightbox-img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 4px;
}
.lightbox-img.zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  cursor: zoom-out;
}
.lightbox-close {
  position: fixed;
  top: 14px;
  right: 18px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 101;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

/* cookie/adattárolás-tájékoztató sáv (public/cookie-consent.js) — a sötét
   fejléc/lábléc színvilágához igazítva, amíg el nem fogadják, mindig a
   képernyő alján marad */
.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: #0f172a;
  color: #e2e8f0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}
.cookie-consent-banner p { margin: 0; font-size: 0.88rem; max-width: 760px; line-height: 1.5; }
.cookie-consent-banner button {
  background: var(--brand-accent);
  color: #fff;
  flex-shrink: 0;
}
.cookie-consent-banner button:hover { background: var(--brand-accent-hover); }

/* Bolt-chat lebegő widget (lásd public/chat-widget.js) — mindig jobb alsó
   sarokban, minden publikus oldalon. */
#chat-bubble {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-accent);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chat-bubble:hover { background: var(--brand-accent-hover); }
#chat-bubble.chat-bubble-open { background: var(--accent); }
.chat-bubble-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-accent);
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chat-panel {
  position: fixed;
  right: 20px;
  bottom: 86px;
  width: 320px;
  max-width: calc(100vw - 40px);
  height: 440px;
  max-height: calc(100vh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.2);
  z-index: 81;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel-header {
  background: #0f172a;
  color: #fff;
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.chat-panel-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.chat-panel-header button:hover { background: none; color: #cbd5e1; }
.chat-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-empty { color: var(--text-dim); font-size: 0.85rem; text-align: center; margin-top: 20px; }
.chat-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-msg-mine { align-self: flex-end; background: var(--brand-accent); color: #fff; border-bottom-right-radius: 2px; }
.chat-msg-theirs { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 2px; }
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input-row input { flex: 1; }
.chat-input-row button { flex-shrink: 0; }

@media (max-width: 480px) {
  #chat-panel { right: 10px; left: 10px; width: auto; max-width: none; bottom: 80px; }
  #chat-bubble { right: 14px; bottom: 14px; }
}

/* "Social proof" felugró (lásd public/sales-proof.js) — bal alsó sarokban,
   hogy ne ütközzön a jobb alsó chat-bubble-lel. Alapból láthatatlan
   (opacity/translateY), a JS a sales-proof-visible osztály hozzáadásával/
   levételével animálja be- és kifelé. */
#sales-proof-popup {
  position: fixed;
  left: 20px;
  bottom: 20px;
  max-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 14px 34px 14px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  z-index: 79;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#sales-proof-popup.sales-proof-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#sales-proof-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 6px;
}
.sales-proof-icon { font-size: 20px; line-height: 1.3; }
.sales-proof-title { font-size: 0.74rem; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.sales-proof-product { font-size: 0.92rem; font-weight: 700; color: var(--text); margin: 2px 0; }
.sales-proof-time { font-size: 0.78rem; color: var(--text-dim); }

@media (max-width: 480px) {
  /* Mobilon a felugró NEM érhet át a teljes szélességben: a jobb alsó
     sarokban ott a chat-buborék (56px széles, right:14px), és a korábbi
     "right: 12px" pont RÁFEKÜDT — a felhasználó jelezte, hogy takarja a
     chatet. A jobb oldalon ezért kihagyjuk a buborék helyét + egy kis
     rést, így a kettő egymás mellett elfér.
     Az alsó kosár-sáv fölé emelést lentebb a --sticky-buybar-h intézi. */
  #sales-proof-popup {
    left: 12px;
    right: calc(14px + 56px + 12px);
    bottom: 12px;
    max-width: none;
  }
}

/* Mobil "sticky" vásárlás-sáv a termékoldalon (public/product.js szúrja be)
   — görgetés közben is elérhető marad a Kosárba gomb, nem kell visszamenni
   a lap tetejére egy hosszabb leírásnál. Csak mobilon jelenik meg, asztali
   nézetben a fő gomb amúgy is mindig látszik. */
.sticky-buybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sticky-buybar .sticky-buybar-price { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.sticky-buybar button { flex-shrink: 0; margin: 0; }

@media (max-width: 640px) {
  body.has-sticky-buybar .sticky-buybar { display: flex; }
  /* A sáv tényleges magassága NEM fix — a biztonsági (notch/home-indikátor)
     sáv (env(safe-area-inset-bottom)) eszközönként eltér, egy régi fix
     68px/78px érték ezzel nem számolt, ezért notch-os telefonon a sáv a
     vártnál magasabbra nyúlt, és a chat-ikon/social-proof felugró
     belelógott a "Kosárba" gombba (élesben jelzett hiba, lásd
     screenshot). Egy helyen (--sticky-buybar-h) számoljuk ki, ezt
     használja a lap alsó paddingje (ne takarja el a lábjegyzetet) ÉS a
     jobb/bal alsó sarokban lebegő gombok eltolása is, hogy mindig a sáv
     FÖLÉ kerüljenek, sose mögé/alá. */
  body.has-sticky-buybar {
    --sticky-buybar-h: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--sticky-buybar-h);
  }
  body.has-sticky-buybar #chat-bubble { bottom: calc(var(--sticky-buybar-h) + 12px); }
  body.has-sticky-buybar #sales-proof-popup { bottom: calc(var(--sticky-buybar-h) + 12px); }
}

/* "Kosárba került" visszajelzés kosárhoz adáskor (lásd public/cart.js
   showAddToCartToast) — csak mobilon, mert asztalin a fejléc kosár-ikonja
   görgetés nélkül is mindig látszik, mobilon viszont fel kellett görgetni
   érte, amíg ez nem volt meg. Tisztán tájékoztató, nem kattintható. */
.add-to-cart-toast {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 12px);
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 90;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 28px);
  pointer-events: none;
}
@media (max-width: 640px) {
  .add-to-cart-toast.show { display: flex; opacity: 1; transform: translate(-50%, 0); }
  body.has-sticky-buybar .add-to-cart-toast { bottom: 90px; }
}

/* Admin chat inbox (admin/chat.js) — kétoszlopos elrendezés, ugyanazokat
   a .chat-messages/.chat-msg osztályokat használja, mint a publikus
   widget, hogy a buborék-stílus egységes maradjon. */
.chat-admin-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  height: calc(100vh - 220px);
  min-height: 420px;
}
.chat-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-y: auto;
}
.chat-list-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.chat-list-item:hover { background: var(--surface-2); }
.chat-list-item-active { background: var(--surface-2); border-left: 3px solid var(--brand-accent); }
.chat-unread-badge {
  background: var(--brand-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-thread {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-thread-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-thread .chat-messages { flex: 1; }
@media (max-width: 780px) {
  .chat-admin-layout { grid-template-columns: 1fr; height: auto; }
  .chat-list { max-height: 240px; }
  .chat-thread { min-height: 420px; }
}

/* Fizetési mód ikonok a pénztár oldalon, lásd public/checkout.html */
.payment-icons { display: flex; align-items: center; gap: 6px; }
.pay-badge {
  height: 22px;
  width: 36px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pay-badge-visa {
  background: #1a1f71;
  color: #fff;
  font-weight: 800;
  font-style: italic;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}
.pay-badge-mastercard { background: var(--surface-2); border: 1px solid var(--border); }
.pay-badge-applepay { width: 44px; }
.pay-badge-bank { width: 22px; color: var(--text-dim); }

/* Pénztár előtti kosár-felajánlás (upsell), lásd public/cartpage.js */
.upsell-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.upsell-modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
}
.upsell-modal h2 { margin: 0 0 4px; font-size: 1.2rem; }
.email-preview-modal { max-width: 700px; }
.upsell-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-dim);
}
/* a generikus button:hover (sötét --accent-hover) helyett egy visszafogott,
   alig sötétebb-mint-fehér háttér — ez csak egy sima X ikon-gomb, nem
   szeretnénk rá kontrasztos/sötét kiemelést */
.upsell-close:hover {
  background: var(--surface-2);
  color: var(--text);
}
/* Ügyfelek/Rendelések oldal email-cím linkje — egyedi email küldését
   nyitja meg (lásd admin/admin.js openCustomEmailModal). Aláhúzva, hogy
   admin számára egyértelműen kattinthatónak tűnjön a sima szöveg helyett. */
.custom-email-trigger {
  text-decoration: underline;
  text-decoration-style: dotted;
}
.custom-email-trigger:hover {
  color: var(--brand-accent);
}
.upsell-offers { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.upsell-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.upsell-offer-img, .upsell-offer-img-empty {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
}
.upsell-offer-info { flex: 1; min-width: 0; }
.upsell-offer-info .name { font-weight: 600; font-size: 0.92rem; }
.upsell-offer-price { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.upsell-offer-price .old { color: var(--text-dim); text-decoration: line-through; font-size: 0.85rem; }
.upsell-offer-price .new { color: var(--ok-text); font-weight: 700; }
.upsell-offer-price .badge {
  background: var(--brand-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}
.upsell-add-btn { flex-shrink: 0; }

/* "Lepj meg valakit egy plusz licenccel!" — a kosárban már meglévő termék
   ajándékba szánt második példánya, a modal TETEJÉN, külön kiemelve (lásd
   public/cartpage.js showUpsellModal) — meleg, figyelemfelkeltő keret,
   hogy vizuálisan is elváljon a lenti, semleges kereszt-eladási listától */
.upsell-selfgift-section {
  background: rgba(194,118,10,0.12);
  border: 2px solid var(--brand-accent);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.upsell-selfgift-section h3 { margin: 0 0 4px; font-size: 1.05rem; }
.upsell-offer-selfgift { border-color: var(--brand-accent); background: var(--surface); }
.upsell-selfgift-add-btn { flex-shrink: 0; }

/* a kosár oldalon (public/cartpage.js render) az ajándék-sor nem kap
   mennyiség-léptetőt (mindig 1 db) — a "🎁" jelvény jelzi, hogy ez nem egy
   véletlenül duplán felvett tétel, hanem szándékos ajándék-vásárlás */
.cart-line-selfgift { background: rgba(194,118,10,0.12); border-radius: 8px; }
.cart-line-gift-badge { font-size: 0.78rem; color: var(--ok-text); font-weight: 600; }

/* Új látogatónak szóló kupon-felajánlás, lásd public/welcome-popup.js —
   szándékosan kicsi, jobb alsó sarok, nem takarja el a tartalmat */
.welcome-popup {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 150;
}
.welcome-popup-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-dim);
}
.welcome-popup strong.title { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.welcome-popup p { margin: 0 0 10px; font-size: 0.84rem; color: var(--text-dim); }
.welcome-popup-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.welcome-popup-code span.hint { font-size: 0.72rem; font-weight: 400; color: var(--text-dim); }
@media (max-width: 480px) {
  .welcome-popup { left: 12px; right: 12px; max-width: none; bottom: 12px; }
  .welcome-popup-close { font-size: 0.6rem; }
}

/* ============================================================
   NEOBRUTALIST REDESIGN (design_handoff_neobrutalist_redesign)
   Csak a PUBLIKUS oldalakon (body.gamer-theme) — az admin
   érintetlen marad. Tiszta CSS-réteg a MEGLÉVŐ komponensmintákon
   (nincs új struktúra/szekció) — a színeket/keret-szélességet/
   sarok-lekerekítést a MEGLÉVŐ CSS-változó-rendszer (--bg, --text,
   --border, --radius stb., lásd fájl teteje) felülírásával kapja
   a legtöbb elem, ezért ez a réteg viszonylag rövid tud maradni. A
   fájl végére szándékosan (cascade-sorrend: egyenlő specificitásnál
   a KÉSŐBBI szabály nyer — ugyanígy oldottuk meg korábban a
   .nav-pill !important-konfliktust is, lásd fentebbi megjegyzés).
   ============================================================ */

/* Világos téma-tokenek — data-theme="light" attribútum a <html>-en,
   lásd public/theme-toggle.js (sötét mód eltávolítva, mindig világos).
   Szándékosan [data-theme="..."] - MINŐSÍTETT :root szelektor (nem
   csupasz :root), ezért az admin (ahol ez az attribútum sosem kerül
   beállításra) teljesen érintetlen marad, ahogy a fájl tetején lévő
   megjegyzés kéri. */
:root[data-theme="light"] {
  --kt-bg: #f5f2eb;
  --kt-ink: #111111;
  --kt-surface: #ffffff;
  --kt-dim: #55524a;
}
:root { --kt-purple: #8b3dff; --kt-yellow: #ffe600; }

body.gamer-theme {
  --bg: var(--kt-bg);
  --surface: var(--kt-surface);
  --surface-2: var(--kt-surface);
  --border: var(--kt-ink);
  --text: var(--kt-ink);
  --text-dim: var(--kt-dim);
  --accent: var(--kt-ink);
  --accent-hover: var(--kt-ink);
  --brand-accent: var(--kt-purple);
  --brand-accent-hover: var(--kt-purple);
  --neon-cyan: var(--kt-purple);
  --neon-pink: var(--kt-yellow);
  --ok: var(--kt-purple);
  --warn: var(--kt-yellow);
  --danger: #d1293d;
  --ok-text: var(--kt-ink);
  --warn-text: var(--kt-ink);
  --danger-text: #d1293d;
  --radius: 0px;
  /* A bolt betűtípusa — a felhasználó kifejezett kérésére a Baloo 2.
     FONTOS: ennek ITT, a neobrutalista rétegben kell állnia, mert ez a
     fájl legvégén lévő szabály !important-tal írja felül a korábbi
     body.gamer-theme beállítást — a fentebb megadott font-family
     önmagában sosem érvényesült volna. A Helvetica marad tartaléknak,
     ha a webfont nem töltődik be. */
  font-family: "Baloo 2", Helvetica, Arial, sans-serif !important;
}
body.gamer-theme h1, body.gamer-theme h2, body.gamer-theme h3, body.gamer-theme h4 {
  font-family: "Baloo 2", Helvetica, Arial, sans-serif !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
body.gamer-theme ::selection { background: var(--kt-purple); color: #fff; }

/* ---- Gombok — lapos lila/tinta + kemény (blur nélküli) eltolt árnyék,
   sem gradiens, sem izzás, hover: 1-2px-es elmozdulás ---- */
body.gamer-theme button:not(.secondary):not(.danger),
body.gamer-theme .btn:not(.secondary) {
  background: var(--kt-purple) !important;
  color: #fff;
  border: 3px solid var(--kt-ink) !important;
  box-shadow: 4px 4px 0 var(--kt-ink) !important;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out !important;
}
body.gamer-theme button:not(.secondary):not(.danger):hover,
body.gamer-theme .btn:not(.secondary):hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--kt-ink) !important;
}
body.gamer-theme button.secondary,
body.gamer-theme .btn.secondary {
  background: var(--kt-surface) !important;
  color: var(--kt-ink) !important;
  border: 3px solid var(--kt-ink) !important;
  box-shadow: 3px 3px 0 var(--kt-ink) !important;
}
body.gamer-theme button.secondary:hover,
body.gamer-theme .btn.secondary:hover {
  background: var(--kt-ink) !important;
  color: var(--kt-bg) !important;
  transform: translate(-1px, -1px);
}
body.gamer-theme button.danger,
body.gamer-theme .btn.danger {
  border: 3px solid var(--kt-ink) !important;
  box-shadow: 3px 3px 0 var(--kt-ink) !important;
}
body.gamer-theme .hero-cta {
  background: var(--kt-purple);
  color: #fff;
  border: 4px solid var(--kt-ink);
  box-shadow: 6px 6px 0 var(--kt-ink);
  border-radius: 0;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
body.gamer-theme .hero-cta:hover {
  background: var(--kt-purple);
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 var(--kt-ink);
}

/* ---- Kártyák — vastag tintakeret + kemény eltolt árnyék ---- */
body.gamer-theme .card {
  border: 4px solid var(--kt-ink) !important;
  box-shadow: 6px 6px 0 var(--kt-ink);
  border-radius: 0;
}
body.gamer-theme a.card:hover,
body.gamer-theme .grid .card:hover {
  border-color: var(--kt-ink) !important;
  box-shadow: 8px 8px 0 var(--kt-ink);
  transform: translate(-2px, -2px);
}
body.gamer-theme .category-tile {
  border: 4px solid var(--kt-ink);
  box-shadow: 6px 6px 0 var(--kt-ink);
  border-radius: 0;
  background: var(--kt-surface);
}
body.gamer-theme .category-tile:hover { transform: translate(-2px, -2px); }
body.gamer-theme .category-tile-label {
  background: var(--kt-ink);
  color: var(--kt-bg);
  font-weight: 900;
  text-transform: uppercase;
}

/* ---- Jelvények — sárga chip, tinta szöveg (a "GARANCIÁVAL"/kedvezmény
   jelvények tokenje, a README szerint MINDIG #111111 szöveg, akkor is,
   ha a sötét témában minden más szöveg fehér) ---- */
body.gamer-theme .badge {
  border-radius: 999px;
  border: 2px solid var(--kt-ink);
  font-weight: 900;
}
body.gamer-theme .badge.sale,
body.gamer-theme .badge.condition-uj,
body.gamer-theme .badge.in_stock,
body.gamer-theme .badge.delivery-info.in-stock {
  background: var(--kt-yellow) !important;
  color: #111111 !important;
}
body.gamer-theme .badge.condition-hasznalt,
body.gamer-theme .badge.delivery-info {
  background: var(--kt-surface) !important;
  color: var(--kt-ink) !important;
}
body.gamer-theme .credit-corner-badge {
  background: var(--kt-yellow);
  color: #111111;
  border: 2px solid var(--kt-ink);
  border-radius: 0 0 8px 0;
  box-shadow: none;
}

/* ---- Fejléc / navigáció ---- */
body.gamer-theme header.site {
  background: var(--kt-surface) !important;
  border-bottom: 4px solid var(--kt-ink);
}
body.gamer-theme .nav-pill {
  background: var(--kt-purple) !important;
  color: #fff !important;
  border: 3px solid var(--kt-ink) !important;
  box-shadow: 3px 3px 0 var(--kt-ink) !important;
  border-radius: 0 !important;
  font-weight: 800;
  text-transform: uppercase;
}
body.gamer-theme .nav-pill:hover,
body.gamer-theme .nav-dropdown.open .nav-pill {
  background: var(--kt-ink) !important;
  color: var(--kt-bg) !important;
  box-shadow: 4px 4px 0 var(--kt-ink) !important;
  transform: translate(-1px, -1px);
}
body.gamer-theme .nav-dropdown-menu {
  background: var(--kt-surface);
  border: 3px solid var(--kt-ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--kt-ink);
}
body.gamer-theme .nav-quick-cart {
  gap: 6px;
  padding: 7px 14px;
  background: var(--kt-purple);
  color: #fff !important;
  border: 3px solid var(--kt-ink);
  box-shadow: 3px 3px 0 var(--kt-ink);
  border-radius: 0;
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: transform 0.12s ease-out;
}
body.gamer-theme .nav-quick-cart:hover {
  background: var(--kt-ink);
  color: #fff !important;
  transform: translate(-1px, -1px);
}
body.gamer-theme .nav-quick-cart-label {
  font-weight: 800;
  text-transform: uppercase;
  color: inherit;
}
body.gamer-theme .cart-badge {
  background: var(--kt-yellow);
  color: #111111;
  border: 2px solid var(--kt-ink);
}

/* ---- Lila SZÖVEGSZÍN kerülése — a --brand-accent (most lila) sok
   meglévő szabályban SZÖVEG színeként szerepelt (linkek, kiemelt árak,
   aktív állapotok stb.) — a felhasználó kifejezett kérésére ez
   világos/sötét módtól függő tinta-színre (fehér sötét, fekete világos
   módban) vált, a lila csak háttér/keret-szerepben marad meg. Külön
   kezelve azok, ahol a HÁTTÉR (nem a --brand-accent-től függő, hanem
   fix fehér/tinta) miatt a sima tinta-szín egybeolvadna. */
body.gamer-theme a:hover,
body.gamer-theme .pcb-picker-card-price,
body.gamer-theme .desc a:hover,
body.gamer-theme .desc-toggle,
body.gamer-theme .badge.credit,
body.gamer-theme .confirm-item-title,
body.gamer-theme .confirm-footer a,
body.gamer-theme .custom-email-trigger:hover {
  color: var(--kt-ink) !important;
}
/* fix fehér hátterű elemek — a szöveg mindig sötét marad (a háttér nem
   téma-függő, ezért a tinta-token itt sötét módban fehérre váltana) */
body.gamer-theme .chat-bubble-badge {
  color: #111111 !important;
}
/* laptopos banner gombja a fenti hero-bannerrel megegyező stílust kap:
   szokásos lila háttér, fehér szöveg */
body.gamer-theme .laptop-promo .hero-cta,
body.gamer-theme .laptop-promo .hero-cta:hover {
  background: var(--kt-purple) !important;
  color: #fff !important;
}
body.gamer-theme .brand-logo { width: 44px; height: 44px; object-fit: contain; }
body.gamer-theme .brand-wordmark {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--kt-ink);
  white-space: nowrap;
}
body.gamer-theme .brand-wordmark-chip {
  display: inline-block;
  background: var(--kt-purple);
  color: #fff;
  padding: 1px 6px;
  margin-left: 2px;
  border: 2px solid var(--kt-ink);
  box-shadow: 2px 2px 0 var(--kt-ink);
}
/* ---- Rendezés / szűrő gombok (katalógus) ---- */
body.gamer-theme .sort-dropdown-toggle,
body.gamer-theme .spec-filter-btn,
body.gamer-theme .spec-filter-select {
  border: 3px solid var(--kt-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--kt-ink);
  background: var(--kt-surface);
}
body.gamer-theme .spec-filter-btn.active {
  background: var(--kt-ink);
  color: var(--kt-bg);
}
body.gamer-theme #spec-filter-clear {
  border: 3px solid var(--kt-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--kt-ink);
  background: var(--kt-purple);
  color: #fff;
}
body.gamer-theme #spec-filter-clear:hover {
  background: var(--kt-ink);
  color: #fff;
}
body.gamer-theme .pagination button {
  border: 3px solid var(--kt-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--kt-ink);
}
body.gamer-theme .pagination button.active {
  background: var(--kt-ink);
  color: var(--kt-bg);
}

/* ---- Beviteli mezők ---- */
body.gamer-theme input:not([type="radio"]):not([type="checkbox"]),
body.gamer-theme textarea,
body.gamer-theme select {
  border: 3px solid var(--kt-ink);
  border-radius: 0;
  background: var(--kt-surface);
}
body.gamer-theme input[type="radio"],
body.gamer-theme input[type="checkbox"] {
  accent-color: var(--kt-purple);
}
body.gamer-theme .field label {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

/* ---- Lábléc ---- */
body.gamer-theme .site-footer {
  background: var(--kt-surface);
  border-top: 4px solid var(--kt-ink);
}
body.gamer-theme .site-footer-col h3 {
  color: var(--kt-ink);
  letter-spacing: 0.06em;
}
body.gamer-theme .site-footer-brand {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--kt-ink);
}
body.gamer-theme .site-footer-col a {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
body.gamer-theme .site-footer-social a { color: var(--kt-ink); }
body.gamer-theme .site-footer-bottom {
  border-top: 3px solid var(--kt-ink);
  font-weight: 700;
}

/* ---- Hero-carousel (főoldal) — a felhasználó saját banner-fotói halvány
   fekete átfedéssel (NEM lapos lila, NEM lila átfedés — a felhasználó
   kifejezett kérésére a korábban megadott fotókat használjuk), tinta
   keret ---- */
body.gamer-theme .hero-carousel { border-bottom: 4px solid var(--kt-ink); box-shadow: none; }
/* A felhasználó kifejezett kérésére a korábban csak mobilon bevezetett
   elrendezés (teljes, kivágás nélküli kép + ALATTA elhelyezett,
   egybefüggő szövegdoboz, sötétítés nélkül) mostantól MINDEN nézetben
   (asztali is) egységesen ez — nincs többé külön "asztali" (ráfektetett
   kártyás) és "mobil" (kép alatt) változat. A ::before pszeudo-elem
   tartja fenn a kép helyét (padding-top trükk, a kép valós ~1075:353
   arányából számolva — mindhárom banner-kép ugyanabból a rácsból lett
   vágva, azonos arányú). */
.hero-carousel-dots { display: none; }
body.gamer-theme .hero-slide { padding: 0; }
body.gamer-theme .hero-slide::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 32.84%;
}
body.gamer-theme .hero-slide-1 { background-image: url("/assets/hero/hero-1-gamerpc.jpg") !important; }
body.gamer-theme .hero-slide-2 { background-image: url("/assets/hero/hero-2-rgb.jpg") !important; }
body.gamer-theme .hero-slide-3 { background-image: url("/assets/hero/hero-3-gpu.jpg") !important; }
body.gamer-theme .hero-slide-1,
body.gamer-theme .hero-slide-2,
body.gamer-theme .hero-slide-3 {
  background-size: 100% auto !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}
body.gamer-theme .hero-inner {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  background: var(--kt-ink);
  box-shadow: none;
  border-radius: 0;
  padding: 18px 20px;
}
body.gamer-theme .hero-inner h1 {
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
body.gamer-theme .hero-inner p { color: #fff; font-weight: 700; }
body.gamer-theme .hero-inner .hero-cta {
  background: var(--kt-purple);
  color: #fff;
  border-color: var(--kt-ink);
  box-shadow: 6px 6px 0 var(--kt-ink);
}
body.gamer-theme .hero-carousel-dot { border-radius: 50%; background: rgba(255, 255, 255, 0.5); border: 2px solid #fff; }
body.gamer-theme .hero-carousel-dot.active { background: #fff; }

body.gamer-theme .trust-bar { background: var(--kt-surface); border-bottom: 4px solid var(--kt-ink); }
/* "Heti Loot" — a felhasználó kifejezett kérésére a Kiemelt Termékek
   fölötti önálló szekció (lásd public/app.js), lila-tinttel kiemelve */
body.gamer-theme .weekly-loot-section { background: rgba(139, 61, 255, 0.08); border-bottom: 4px solid var(--kt-ink); }
body.gamer-theme .stats-bar {
  background: var(--kt-purple);
  max-width: 1080px;
  margin: 24px max(24px, calc((100% - 1080px) / 2)) 0;
  border: 4px solid var(--kt-ink);
  box-shadow: 6px 6px 0 var(--kt-ink);
  border-radius: 0;
}
body.gamer-theme .newsletter-bar {
  background: var(--kt-purple);
  max-width: 1080px;
  margin: 48px max(24px, calc((100% - 1080px) / 2)) 0;
  border: 4px solid var(--kt-ink);
  box-shadow: 6px 6px 0 var(--kt-ink);
  border-radius: 0;
}
body.gamer-theme .trust-item {
  border: 3px solid var(--kt-ink);
  box-shadow: 4px 4px 0 var(--kt-ink);
  padding: 8px 16px;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
body.gamer-theme .tradein-device-chip {
  border: 3px solid var(--kt-ink);
  box-shadow: 3px 3px 0 var(--kt-ink);
  border-radius: 999px;
  font-weight: 800;
}
body.gamer-theme .step-num { border-radius: 999px; }
/* a felhasználó kifejezett kérésére a laptopos banner MINDEN nézetben
   pont ugyanúgy viselkedik, mint a fenti hero-carousel elemei — a kép
   (laptop-cover.jpg) ugyanabból a rácsból lett vágva, azonos ~1078:354
   arányú, ezért ugyanaz a padding-top érték használható. */
body.gamer-theme .laptop-promo { border: 4px solid var(--kt-ink); padding: 0; }
body.gamer-theme .laptop-promo::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 32.84%;
}
body.gamer-theme .laptop-promo {
  background-image: url("/assets/category-source/laptop-cover.jpg") !important;
  background-size: 100% auto !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}
body.gamer-theme .laptop-promo-inner {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  background: var(--kt-ink);
  box-shadow: none;
  border-radius: 0;
  padding: 18px 20px;
}
body.gamer-theme .laptop-promo h2,
body.gamer-theme .laptop-promo-sub,
body.gamer-theme .laptop-promo-body {
  background: none !important;
}
body.gamer-theme .usp-card { border: 4px solid var(--kt-ink); box-shadow: 6px 6px 0 var(--kt-ink); border-radius: 0; }
body.gamer-theme .review-card, body.gamer-theme .neo-review-card { border: 4px solid var(--kt-ink); box-shadow: 6px 6px 0 var(--kt-ink); border-radius: 0; }
body.gamer-theme .review-stars { color: var(--kt-yellow); background: var(--kt-ink); display: inline-block; padding: 2px 8px; }

/* ---- Fizetési mód sorok (pénztár) — bordered "kártya" hatás sima
   <label>-ekből, struktúra-változtatás nélkül ---- */
body.gamer-theme label#card-option,
body.gamer-theme label#transfer-option,
body.gamer-theme label#cod-option,
body.gamer-theme label#milpay-option {
  border: 3px solid var(--kt-ink) !important;
  padding: 10px 14px;
}
body.gamer-theme .pay-badge-mastercard { background: var(--kt-surface); border: 1px solid var(--kt-ink); }

/* Milpay leírás — a felhasználó kifejezett kérésére alapból nem
   mutatja a hosszú szöveget, csak "Részletek" gombra nyílik ki (natív
   <details>/<summary>, nincs hozzá külön JS) — a fizetési mód sor így
   alapból sokkal kompaktabb. */
.milpay-details summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  list-style: none;
}
.milpay-details summary::-webkit-details-marker { display: none; }
.milpay-details summary::before { content: "▸ "; }
.milpay-details[open] summary::before { content: "▾ "; }
.milpay-details span { display: block; margin-top: 6px; }

/* a felhasználó kifejezett kérésére asztali nézetben a pénztár tartalma
   szélesebb (az eredeti, mobilra szabott 560px + 50%) — a HTML-ben lévő
   inline max-width:560px stílust kell felülütni, innen az !important */
@media (min-width: 781px) {
  .checkout-main { max-width: 840px !important; }
}

/* ---- Reszponzív — a kemény árnyékok kis képernyőn kisebb offsetet
   kapnak, hogy ne dominálják túl a szűk elrendezést ---- */
@media (max-width: 640px) {
  body.gamer-theme .card,
  body.gamer-theme .category-tile,
  body.gamer-theme .usp-card,
  body.gamer-theme .review-card {
    box-shadow: 4px 4px 0 var(--kt-ink);
  }
  body.gamer-theme .hero-cta { box-shadow: 4px 4px 0 var(--kt-ink); }
}


/* ==========================================================================
   Asztali (ablakos) admin nézet — admin/desktop.html + desktop.js
   A felhasználó kifejezett kérésére: a menüpontok a felületen BELÜL, ablakban
   nyílnak, fülekkel lehet váltani, és a szélre húzva fél képernyőt foglalnak.
   ========================================================================== */
body.admin-desktop-mode { margin: 0; overflow: hidden; background: var(--admin-bg); }
.dt-root { display: flex; height: 100vh; }

.dt-sidebar {
  width: 210px; flex: 0 0 210px; display: flex; flex-direction: column;
  background: var(--adm-sidebar-bg, #131b2b); color: #cbd5e1;
  padding: 14px 0 10px; overflow-y: auto;
}
.dt-brand { padding: 0 16px 14px; font-weight: 800; color: #fff; font-size: 1.05rem; }
.dt-nav { display: flex; flex-direction: column; }
.dt-nav-item {
  all: unset; cursor: pointer; padding: 8px 16px; font-size: 0.88rem;
  color: #cbd5e1; border-left: 3px solid transparent;
}
.dt-nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dt-nav-item.open { color: #fff; border-left-color: var(--brand-accent); background: rgba(255, 255, 255, 0.06); }
.dt-leave { margin-top: auto; padding: 12px 16px 4px; color: #94a3b8; font-size: 0.82rem; text-decoration: none; }
.dt-leave:hover { color: #fff; }

.dt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.dt-tabbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; flex: 0 0 auto;
}
.dt-tabs-empty { color: var(--text-dim); font-size: 0.86rem; }
.dt-tab {
  display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px 8px 0 0; padding: 0 4px 0 0;
}
.dt-tab.active { background: var(--surface); border-bottom-color: var(--surface); box-shadow: inset 0 2px 0 var(--brand-accent); }
.dt-tab.minimized { opacity: 0.55; }
.dt-tab-label { all: unset; cursor: pointer; padding: 7px 10px; font-size: 0.85rem; color: var(--text); }
.dt-tab-close { all: unset; cursor: pointer; padding: 4px 7px; font-size: 0.78rem; color: var(--text-dim); border-radius: 6px; }
.dt-tab-close:hover { background: var(--border); color: var(--danger); }
.dt-tabbar-tools { margin-left: auto; display: flex; gap: 6px; }
.dt-tool {
  all: unset; cursor: pointer; font-size: 0.8rem; padding: 6px 11px;
  border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); background: var(--surface);
}
.dt-tool:hover { color: var(--text); border-color: var(--text-dim); }

.dt-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }

.dt-window {
  position: absolute; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.dt-window.active { border-color: var(--brand-accent); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2); }

.dt-titlebar {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; flex: 0 0 auto;
}
.dt-title { font-weight: 600; font-size: 0.87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-snap-hint { font-size: 0.72rem; color: var(--text-dim); }
.dt-actions { margin-left: auto; display: flex; gap: 2px; }
.dt-btn {
  all: unset; cursor: pointer; width: 26px; height: 22px; text-align: center;
  border-radius: 5px; font-size: 0.8rem; color: var(--text-dim); line-height: 22px;
}
.dt-btn:hover { background: var(--border); color: var(--text); }
.dt-close:hover { background: var(--danger); color: #fff; }

.dt-body { position: relative; flex: 1; min-height: 0; }
.dt-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--admin-bg); }
/* Húzás közben az iframe "elnyelné" az egeret, és az ablak megállna — ezért
   ilyenkor egy átlátszó maszk kerül fölé. Csak húzás alatt aktív. */
.dt-frame-mask { position: absolute; inset: 0; display: none; }
body.dt-dragging .dt-frame-mask { display: block; }
body.dt-dragging { cursor: move; }

.dt-resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 70%, transparent 70%);
}

.dt-snap-preview {
  position: absolute; display: none; pointer-events: none; z-index: 9999;
  background: rgba(37, 99, 235, 0.16); border: 2px solid var(--brand-accent); border-radius: 10px;
}

.dt-empty { max-width: 460px; margin: 12vh auto 0; text-align: center; color: var(--text-dim); padding: 0 20px; }
.dt-empty h2 { color: var(--text); margin-bottom: 8px; }

/* Az admin oldal, ha ablak-keretben fut (lásd admin.js renderAdminShell):
   nincs saját fejléc/oldalsáv, a tartalom kapja a teljes szélességet. */
body.in-window-frame { background: var(--admin-bg); }
.admin-main-framed { padding: 18px 20px 40px; }

/* Az ablakos nézetnek egér és hely kell — kis kijelzőn a normál admin a jó. */
@media (max-width: 900px) {
  .dt-sidebar { display: none; }
  .dt-stage { overflow: auto; }
}

/* Fül-átrendezés húzással (desktop.js bindTabReorder) — az ejtés helyét a fül
   középvonalához mérjük, a jelölés ezt mutatja előre. */
.dt-tab { cursor: grab; }
.dt-tab.dragging { opacity: 0.45; cursor: grabbing; }
.dt-tab.drop-before { box-shadow: inset 3px 0 0 var(--brand-accent); }
.dt-tab.drop-after { box-shadow: inset -3px 0 0 var(--brand-accent); }
.dt-tab.active.drop-before { box-shadow: inset 0 2px 0 var(--brand-accent), inset 3px 0 0 var(--brand-accent); }
.dt-tab.active.drop-after { box-shadow: inset 0 2px 0 var(--brand-accent), inset -3px 0 0 var(--brand-accent); }


/* Bevételezés — a tétel-kártyák két oszlopban (a felhasználó kifejezett
   kérésére: "pont kiférnének 2 oszlopban, 1 sorba mehet 2 tétel is").
   minmax(0, 1fr) és nem 1fr: a bare 1fr min-content alá nem enged zsugorodni,
   így egy hosszú terméknév vagy egy széles legördülő szétfeszítené a rácsot.
   Keskeny ablaknál egy oszlopra vált, hogy a mezők ne préselődjenek össze. */
.pf-items-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: start;
}
.pf-items-grid > .card { min-width: 0; }
.pf-items-grid input,
.pf-items-grid select,
.pf-items-grid textarea { max-width: 100%; }


/* Rendelés tételei két oszlopban (a felhasználó kifejezett kérésére) — ugyanaz
   az elv, mint a bevételezésnél: minmax(min(100%, 380px), 1fr), hogy keskeny
   ablaknál egy oszlopra váltson, és egy hosszú terméknév se feszítse szét. */
.order-items-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: start;
  margin-bottom: 12px;
}
.order-items-grid > .card { min-width: 0; }


/* Bevételezés űrlap: a kártya széles (a tétel-rács két oszlopa miatt), de a
   felső mezők ettől nem nyúlnak el — egy 1100 px széles beviteli mező
   használhatatlanul néz ki. Csak a KÖZVETLEN gyerek .field-eket szűkítjük, a
   tétel-kártyákon belülieket nem. */
.pf-form > .field,
.pf-form > h3 + p,
.pf-form > p {
  max-width: 640px;
}