/* Huni terméktöltő — 5. kör: ELRENDEZÉS.
   Roland kérése: „bal oldalt a fő kép mellett is legyen egy jókora térköz és
   jobb oldalt az AI szövegek mellett is; a harmadik oszlopot zsugorítsuk
   össze; a fejlécet vegyük le teljesen; az 1/6-ot rakjuk le a Félreteszem
   mellé; fent pedig legyen a konkrét oldalválasztó."

   Ez a fájl a KÖZÖS váz: felső app-sáv, alsó sáv, térköz-rendszer.
   A három L-verzió csak a tér elosztásában és a navigáció formájában tér el.
   Betöltési sorrend: gep3-kozos.css → gep4-vegleges.css → EZ → verzió-CSS. */

body{grid-template-rows:52px 1fr 56px}

/* ── felső sáv: az alkalmazás navigációja (nem a termék fejléce) ─────── */
.appsav{display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--lap);
  border-bottom:1px solid var(--keret);min-width:0}
.appsav .marka{display:flex;align-items:center;gap:9px;flex:none}
.appsav .marka i{width:26px;height:26px;border-radius:7px;background:var(--kek);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;font-style:normal}
.appsav .marka b{font-size:14px;letter-spacing:-.2px}

.szakaszok{display:flex;align-items:center;gap:2px;min-width:0}
.szakaszok a{display:block;padding:7px 13px;border-radius:8px;text-decoration:none;
  color:var(--halvany);font-size:13px;font-weight:500;white-space:nowrap}
.szakaszok a:hover{background:var(--papir);color:var(--szoveg)}
.szakaszok a.itt{background:var(--kek-50);color:var(--kek-900);font-weight:600}
.szakaszok a .db{margin-left:6px;font-size:11px;font-weight:700;opacity:.7}

.appjobb{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.appjobb .user{width:28px;height:28px;border-radius:50%;background:var(--papir-2);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--halvany)}

/* ── alsó sáv: itt a számláló és a haladás, a gombok mellett ────────── */
.alja{display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--lap);
  border-top:1px solid var(--keret)}
.alja .halado{display:flex;align-items:center;gap:10px;flex:none}
.alja .hany{font-size:13px;font-variant-numeric:tabular-nums;color:var(--szoveg);
  font-weight:600;flex:none}
.alja .sin{width:110px;height:4px;border-radius:99px;background:var(--papir-2);
  overflow:hidden;flex:none}
.alja .sin i{display:block;height:100%;background:var(--kek);transition:width .25s}
.alja .sugo{color:var(--halvanyabb);font-size:11.5px;margin-left:6px}
.alja .sugo kbd{display:inline-block;padding:0 5px;border:1px solid var(--keret-2);
  border-bottom-width:2px;border-radius:4px;background:var(--papir);font:inherit;
  font-size:10.5px;font-weight:600;color:var(--halvany)}
.alja .gombok{margin-left:auto;display:flex;gap:8px}

/* ── a munkaterület: itt lakik a „jókora térköz" ────────────────────── */
.fal{display:grid;min-height:0;
  padding:var(--kulso-fent) var(--kulso-oldalt);
  gap:var(--hasabkoz);
  grid-template-columns:var(--oszlopok)}
.oszlop{display:flex;flex-direction:column;gap:9px;min-height:0;min-width:0}

/* alapértékek — a verziók ezeket írják felül */
:root{
  --kulso-oldalt:28px;
  --kulso-fent:16px;
  --hasabkoz:20px;
  --oszlopok:minmax(300px,1.05fr) minmax(310px,1.05fr) minmax(280px,.9fr);
}

/* ── prezenter-váltó: a felső sávba ágyazva, nem lebegve ───────────── */
.appjobb .valto{position:static;transform:none;left:auto;top:auto;bottom:auto;
  padding:3px;box-shadow:none;flex:none}
.appjobb .valto a{padding:5px 11px;font-size:11.5px}
.appjobb .valto b{padding:0 7px 0 8px;font-size:9.5px}

/* ── Szűk gépen a keskeny harmadik oszlop LEVÁGTA a hosszú leírást (mérve:
      1280×800-on 90–186 px). A levegő a széles képernyő luxusa; ha nincs
      hely, a KÉP ad belőle, mert az összenyomható, a szöveg nem.
      `body`-n van, nem `:root`-on: így a verziók saját `:root`-ját is felülírja
      forrássorrendtől függetlenül. ── */
@media (max-width:1500px){
  body{
    --kulso-oldalt:20px;
    --kulso-fent:14px;
    --hasabkoz:16px;
    --oszlopok:minmax(240px,.88fr) minmax(300px,1fr) minmax(320px,1.08fr);
  }
}
@media (max-width:1200px){
  body{--kulso-oldalt:14px;--hasabkoz:12px}
}

/* ── ALACSONY KÉPERNYŐ. A szélesség eddig szabályozva volt, a MAGASSÁG nem:
      1366×768-on 3 px-cel túlcsordult a jobb hasáb. Roland kikötése: „görgetés
      semmiképp ne legyen, kényelmesen férjen ki." Ezért a függőleges térközök
      magasság szerint is szűkülnek — előbb a levegő fogy, sosem a tartalom. ── */
@media (max-height:830px){
  body{--kulso-fent:10px;--hasabkoz:15px}
  .oszlop{gap:7px}
  .b{padding:8px 11px}
  .b .s{padding:2.5px 0}
  .b .ertek{font-size:12px}
  #bBolt .ertek.nev, #bBesor .ertek, #bMeg .ertek{padding:5px 9px;font-size:13px}
  #bSzoveg .ertek, #bSeo .ertek{padding:4px 8px;line-height:1.4}
  .csik img{height:38px}
  .velemeny{padding:10px 12px}
}
@media (max-height:800px){
  body{--kulso-fent:8px;--hasabkoz:12px}
  .oszlop{gap:6px}
  .b{padding:7px 10px}
  .b .alcimke{margin:7px 0 4px}
  .tipus button{padding:7px 6px}
  .pipa{padding:4px 8px}
  .csik img{height:34px}
  .velemeny{padding:9px 11px}
  .velemeny .vsz{font-size:11.5px;line-height:1.4}
  .kepgombok .g{padding:5px 9px}
}

/* 720 px magasságon pont-pont kifért (0 px tartalék) — az nem „kényelmes".
   Ez a szint még egy kört szorít a térközökön, hogy legyen valódi ráhagyás. */
@media (max-height:730px){
  body{--kulso-fent:7px;--hasabkoz:11px}
  .oszlop{gap:5px}
  .b{padding:6px 9px}
  .b .s{padding:2px 0}
  .bf{margin-bottom:4px}
  .b .alcimke{margin:6px 0 3px}
  #bBolt .ertek.nev, #bBesor .ertek, #bMeg .ertek{padding:4px 8px;font-size:12.5px}
  #bSzoveg .ertek, #bSeo .ertek{padding:3px 7px;line-height:1.38;font-size:11.5px}
  .tipus button{padding:6px 5px;font-size:12px}
  .pipak{gap:4px}
  .pipa{padding:3.5px 8px;font-size:11px}
  .csik img{height:30px}
  .kepgombok .g{padding:4px 8px;font-size:11.5px}
  .velemeny{padding:8px 10px}
  .velemeny .vsz{font-size:11px}
  .hol{margin-top:7px;padding-top:6px}
  .elo{margin-top:7px;padding-top:6px}
}