/* ==========================================================================
   iBerry — Global CSS  (GenerateBlocks Pro → Global CSS mezőbe megy)
   Egyetlen igazságforrás. Csak saját hook class-ekre stílusozunk,
   SOHA nem GB auto `gb-container-xxxx` ID-ra vagy nth-child-re.
   Stílus: Apple-card lekerekítés + whitespace, iOS rendszer-jelleg.
   Font: Inter (mindig) + Nerko One (csak játékos landingen).
   --------------------------------------------------------------------------
   FELÉPÍTÉS
   1. Tokens (:root)        – színek, font, radius, árnyék, spacing
   2. Reset + base
   3. Tipográfia + szöveg-utility
   4. Layout: container, section, grid-ek
   5. Színmodifikátorok (.is-*)  – ikon/badge szemantikus színek
   6. Komponensek: eyebrow, badge, gomb, trust-row, card, glass
   7. (per-oldal komponensek lentebb épülnek, ahogy a HTML elkészül)
   ========================================================================== */

/* 1. ─── TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* accent (primary) */
  --accent:        #00d959;
  --accent-2:      #23C239;            /* kanonikus: az élő oldal ezt használja */
  --accent-hover:  var(--accent-2);    /* alias, hogy a régi hivatkozások is működjenek */
  --accent-fg:     #0D0D14;   /* gomb szöveg a zöldön: fekete (kontraszt) */
  --accent-soft:   rgba(0, 217, 89, 0.10);
  --accent-mid:    rgba(0, 217, 89, 0.18);
  --accent-glow:   rgba(0, 217, 89, 0.28);

  /* szöveg / kontraszt */
  --contrast:      #0D0D14;   /* text-1 */
  --contrast-2:    #46435A;   /* text-2 */
  --contrast-3:    #AEABBC;   /* text-3 */

  /* felületek / háttér */
  --base:          #F2F2F7;   /* oldal háttér */
  --base-2:        #FFFFFF;   /* surface */
  --base-3:        #F7F7FA;   /* surface-2 */

  /* ikon / szemantikus színek */
  --blue:    #006FFF;
  --green:   #008C3A;
  /* A zöld és a kék közti hue-rést tölti ki (186°, a két szomszéd 145° és
     214°). A telítettsége és világossága szándékosan a zöldével azonos
     (100% / 28%), így nem lóg ki a paletta fegyelméből. Azért van rá szükség,
     mert a --yellow szövegként mustárnak látszik: sárgából nincs olyan
     árnyalat, ami fehéren olvasható ÉS citromos. */
  --teal:    #00808F;
  --purple:  #6B22B0;
  --red:     #CC1030;
  --orange:  #C44400;
  /* Citromos, nem okker: a hue 51°, nem 42°. A VILÁGOSSÁGA szándékosan marad
     ilyen mély — sárgából ez a legcitromosabb árnyalat, ami fehéren még
     olvasható szövegszín (4.24:1). Világosítani nem lehet: két lépés fölfelé
     és a badge felirata 3-as kontrasztra esik. A citromos HATÁST ezért nem
     innen, hanem az .is-yellow világos tintjéből visszük. */
  --yellow:  #8F7A00;
  --gray:    #4A4860;

  /* vonalak */
  --border:    rgba(0, 0, 0, 0.06);
  --border-hi: rgba(0, 0, 0, 0.10);

  /* fontok */
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-playful: 'Nerko One', 'Inter', cursive;

  /* radius — teljes skála (Apple-card jelleg, rem-alapú) */
  --r-xs:   0.25rem;    /*  4px */
  --r-sm:   0.375rem;   /*  6px */
  --r-md:   0.625rem;   /* 10px */
  --r-lg:   0.8125rem;  /* 13px */
  --r-xl:   1rem;       /* 16px */
  --r-2xl:  1.25rem;    /* 20px */
  --r-3xl:  1.5rem;     /* 24px */
  --r-pill: 999px;

  /* árnyékok — teljes skála, egyrétegű, visszafogott */
  --sh-xs:  0 1px 2px rgba(0,0,0,0.03);
  --sh-sm:  0 1px 3px rgba(0,0,0,0.04);
  --sh-md:  0 2px 6px rgba(0,0,0,0.05);
  --sh-lg:  0 4px 12px rgba(0,0,0,0.06);
  --sh-xl:  0 8px 22px rgba(0,0,0,0.07);
  --sh-2xl: 0 16px 40px rgba(0,0,0,0.08);

  /* spacing skála (8px alap) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* layout */
  --maxw:        1280px;       /* oldalszélesség; -2×gutter → 1240px tartalom */
  --maxw-narrow: 760px;
  --gutter:      1.25rem;      /* 20px oldal-padding kétoldalt */
  --gap:         1.25rem;      /* 20px alap rács/flex köz */
  --header-h:    64px;         /* fixed fejléc magassága nyugalmi állapotban */
  /* Szekció függőleges paddingja. FIGYELEM: felül-alul egyaránt érvényes, tehát
     két szekció között ennek a DUPLÁJA lesz a köz. Egy helyen állítható. */
  --section-pad: clamp(32px, 4.2vw, 56px);

  /* SÖTÉT ÜVEG-ANYAG (Apple material). Egy forrásból használja a görgetett
     fejléc-notch és a shelf-nyilak, hogy garantáltan egyformák maradjanak. */
  --surface-dark: #0D0D14;     /* sötét lap: fejléc-sáv, mobil menü, lábléc */
  --glass:       rgba(13, 13, 20, 0.72);
  --glass-hover: rgba(13, 13, 20, 0.85);
  --glass-blur:  blur(22px) saturate(180%);

  /* motion — erős, szándékos görbék (Emil/Apple), NEM a gyenge beépítettek */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* RUGÓK. Nem bezier-utánzatok: valódi csillapított rugó útja linear()-be
     mintavételezve. Apple két paraméterben gondolkodik — csillapítás (mennyit
     lő túl) és response (milyen gyorsan ér célba) —, ezek abból számoltak.

     --spring-smooth  ζ=1.0, response .34s → 0.48s, NINCS túllövés. Ez a
       „komoly" rugó: magasság, pozíció, minden, ami alatt más tartalom mozog.
     --spring-pop     ζ=0.6, response .32s → 0.51s, ~9% túllövés. Ez a játékos
       rugó: kicsi, önmagában álló elem érkezése (buborék, badge, jelvény).
       Nagy felületre SOHA — ott a túllövés csak ugrálás. */
  --spring-smooth: linear(0.0000, 0.0282, 0.0955, 0.1827, 0.2771, 0.3709, 0.4595, 0.5404, 0.6125, 0.6757, 0.7301, 0.7766, 0.8159, 0.8489, 0.8765, 0.8993, 0.9181, 0.9336, 0.9463, 0.9566, 0.9651, 0.9719, 0.9774, 0.9819, 0.9855, 0.9884, 0.9907, 0.9926, 0.9941, 0.9953, 0.9963, 0.9970, 0.9976, 0.9981, 1.0000);
  --spring-pop:    linear(0.0000, 0.0384, 0.1351, 0.2658, 0.4109, 0.5555, 0.6892, 0.8058, 0.9017, 0.9762, 1.0302, 1.0660, 1.0863, 1.0943, 1.0931, 1.0855, 1.0739, 1.0605, 1.0466, 1.0335, 1.0219, 1.0121, 1.0044, 0.9986, 0.9947, 0.9923, 0.9912, 0.9911, 0.9916, 0.9926, 0.9938, 0.9951, 0.9964, 0.9976, 1.0000);
  --spring-smooth-dur: .48s;
  --spring-pop-dur:    .51s;

  /* KÁRTYA-GRAFIKÁK BEÚSZÁSA — egyetlen helyen, hogy az öt kép-kártya háttere
     egyszerre és egy ütemre induljon, ne külön-külön kapkodjon. A --art-step a
     lépcsőzés egy foka: ennyivel követi a következő elem az előzőt. */
  --art-dur:  .9s;
  --art-step: 70ms;
}

/* 2. ─── RESET + BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--base);
  color: var(--contrast);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;   /* Inter Display letterforms nagy méretben (opsz tengely) */
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 3. ─── TIPOGRÁFIA + SZÖVEG-UTILITY ─────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }

/* Display-méretek. Fix lépcsők, NEM fluid clamp(): a vw-s interpoláció a két
   végpont között tört pixelekre esne, itt viszont minden méret egész pixel
   (16px alapon). A mobil lépcső a 640px-es töréspontnál vált. */
/* A tracking MÉRETFÜGGŐ, nem egy fix érték az egész skálára: minél nagyobb a
   betű, annál szorosabb, különben szétesik. Ezért lép a --4xl mobilon nemcsak
   méretben, hanem tracking-ben is vissza a 3xl értékére. */
.text-4xl { font-size: 3.5rem; line-height: 1.04; letter-spacing: -0.04em;  font-weight: 600; }  /* 56px — oldalfej */
.text-3xl { font-size: 2.5rem; line-height: 1.08; letter-spacing: -0.035em; font-weight: 600; }  /* 40px */
.text-2xl { font-size: 2rem;   line-height: 1.12; letter-spacing: -0.03em;  font-weight: 600; }  /* 32px */
.text-xl  { font-size: 1.5rem; line-height: 1.2;  letter-spacing: -0.025em; font-weight: 600; }  /* 24px */
@media (max-width: 900px) {
  .text-4xl { font-size: 3rem; letter-spacing: -0.038em; }  /* 48px */
}
@media (max-width: 640px) {
  .text-4xl { font-size: 2.5rem; letter-spacing: -0.035em; }  /* 40px */
  .text-3xl { font-size: 2rem; }     /* 32px */
  .text-2xl { font-size: 1.5rem; }   /* 24px */
  .text-xl  { font-size: 1.25rem; }  /* 20px */
}

/* Halványított mondatrész a címsoron BELÜL (Apple-jelleg: az első mondat állít,
   a második halkabban magyaráz). Nem külön címsor-méret, hanem egy <span> a
   címsorban — így a betűméret és a sortáv marad. */
.text-dim { color: var(--contrast-3); }

/* halkított inline szövegrész (Apple két-tónusú heading: erős + halk folytatás) */
.text-quiet { color: var(--contrast-3); }

/* Kiemelt szövegrész a címsorokban: ferde, kézzel húzott filctoll-vonás a szó
   alatt. A szöveg színe NEM változik (ellentétben a .text-quiet-tel) — a
   hangsúlyt a vonás adja, nem a halványítás.
   • A vonás a padding-bottom sávjába kerül, tehát a content-boxon KÍVÜLRE,
     a leszárak (g, y, j) alá: nem lóghat rá a betűkre.
   • A nowrap szándékos: a kiemelés egyetlen mozdulat, nem törhet ketté. Ha
     két sorba esne, a felső sor vonása a lenti sor betűire csúszna, mert a
     címsorok line-height-ja szoros (1.08–1.12). Emiatt rövid, záró
     szövegrészre való — pontosan úgy, ahogy egy valódi kiemelőt használnánk.
   • A zöld a data-URI SVG-be van kódolva, mert a data-URI nem lát CSS
     változót. Ha a paletta változik, ezt a két fill értéket is át kell írni,
     hogy egyezzen a --accent-tel (#00d959). */
/* KÖZÖS ALAP. Önmagában nem rajzol semmit — mindig kell mellé egy változat:
     <span class="text-marker text-marker--slant">…</span>   ferde zöld filctoll
     <span class="text-marker text-marker--wave">…</span>    hullámos sárga vonal
   A vonás minden változatnál a betűk sávjában ül, és a glifák ALATT rajzolódik
   (background-réteg), tehát a betűszárak átvágják, nem takarja ki őket.
   Alsó padding nincs: a vonás nem lóg ki a content-boxból, így nem tud
   átnyúlni a következő sor betűire sem. A függőleges helyet a
   background-position adja (a padding-bottom erre nem volt jó, mert nem
   mehet negatívba). */
.text-marker {
  /* Tördelhet: a ferde vonás VÉGIG a szöveg content-boxán belül marad (a
     betűalaptól 0.22em-ig, a doboz alja 0.24em), tehát egy megtört sor vonása
     nem tud a lenti sor betűire csúszni. A clone kell hozzá, különben a
     böngésző egyetlen összefüggő háttérként festené a széttört sorokat;
     így viszont minden sor a saját teljes vonását kapja. */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  /* két oldalt kicsit túlfut a szón, mint egy valódi filctoll; a negatív
     margó visszaveszi, tehát a tördelés nem mozdul el */
  padding-inline: 0.07em;
  margin-inline: -0.07em;
}

/* FERDE változat — zöld filctoll-vonás, két húzásból, egyenetlen élekkel.
   Egyetlen példányban feszül ki a szó teljes szélességére (no-repeat + 100%),
   ezért hosszabb szövegen a dőlés is arányosan elnyúlik. */
.text-marker--slant {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath fill='%2300d959' d='M3,10 C48,8.4 96,7 146,5.5 C182,4.4 214,3.3 237,2.3 L233,10.9 C202,12 168,13 126,13.9 C86,14.8 44,15.4 5,15.3 Z'/%3E%3Cpath fill='%2300d959' opacity='.45' d='M12,14.6 C58,14 108,13.1 160,12 C196,11.2 220,10.5 238,9.9 L237,12.2 C216,12.9 188,13.6 152,14.4 C110,15.3 58,15.9 13,16 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left calc(100% - 0.02em);  /* FÜGGŐLEGES HELY */
  background-size: 100% 0.22em;                   /* VASTAGSÁG */
}

/* HULLÁMOS változat — sárga vonal. Itt a csempe FIX szélességű és repeat-x-szel
   ismétlődik, nem nyúlik ki a szó szélességére: így a hullámhossz mindig
   ugyanakkora marad, akár két betűs, akár hosszú a szöveg. A két púp
   szándékosan nem egyforma magas, ettől lesz kézzel húzott hatása.
   A sárga élénk kiemelő-árnyalat, nem a --yellow (#8F7A00), mert az mély,
   szöveghez való szín; ugyanígy a zöldnél is az élénk --accent megy. */
.text-marker--wave {
  /* Ez a változat NEM tördelhet: a hullám a padding-bottom miatt kilóg a
     content-boxból, tehát egy megtört sor hulláma a lenti sor betűire csúszna.
     Rövid, kiemelt szókapcsolatra való. */
  white-space: nowrap;
  /* A hullám magasabb sávot igényel, mint a ferde vonás, ezért ALSÓ PADDING
     kell hozzá: a background-clip alapértéke border-box, tehát ami a dobozon
     kívülre esik, azt a böngésző levágja. Padding nélkül a hullám alsó fele
     eltűnt, és csak a púpok látszottak, laposra vágott aljjal. A padding
     inline elemen nem tolja szét a sorokat, csak a festési dobozt növeli. */
  padding-bottom: 0.06em;
  /* A csempe ÉPP EGY HULLÁMHEGY TETEJÉN kezdődik és végződik, ahol az érintő
     vízszintes — így a két szélén a vágás pontosan függőleges, és a szomszédos
     csempék hézagmentesen összeérnek. Korábban a csempe a hullám legmeredekebb
     pontján ért véget, ahol a vonalvég ferdén vágódik el, ezért töredezett.
     Nem vonal (stroke), hanem KITÖLTÖTT szalag: a felső és az alsó éle külön
     görbe, így a vastagság hullámról hullámra változik (0.16–0.21em), ettől
     lesz kézzel húzott hatása.
     A szabályosság ellen HÁROM dolog dolgozik együtt: (1) a csempében három
     hullám van, tehát az ismétlődés a felirat alatt alig egyszer fordul elő;
     (2) a hullámhosszak egyenetlenek — a fél hullámok 20 és 28 egység között
     váltakoznak, nem egyformák; (3) a hullámhegyek és -völgyek sem egy
     magasságban vannak, tehát a vonal tengelye is imbolyog. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 15'%3E%3Cpath fill='%23FFC400' d='M0,1 C9,1 14,6.4 22,6.4 C32,6.4 41,1.1 50,1.1 C57,1.1 63,7.2 70,7.2 C79,7.2 87,1.1 96,1.1 C105,1.1 111,5.5 120,5.5 C129,5.5 136,1 144,1 L144,8.2 C136,8.2 129,13.9 120,13.9 C111,13.9 105,8.9 96,8.9 C87,8.9 79,13.6 70,13.6 C63,13.6 57,7.5 50,7.5 C41,7.5 32,14 22,14 C14,14 9,8.2 0,8.2 Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;               /* FÜGGŐLEGES HELY: a padding-bottom állítja */
  background-size: 3.6em 0.375em;                 /* 3 hullám / csempe → átlag 1.2em hullámhossz */
}

/* eyebrow / kicker — kis nagybetűs címke az accent színben */
.eyebrow,
.gen-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before {
  content: ''; width: 16px; height: 1.5px; background: currentColor; opacity: 0.55;
}

/* játékos display szöveg (Nerko One) — opt-in */
.text--playful { font-family: var(--font-playful); font-weight: 400; letter-spacing: 0; }

/* 4. ─── LAYOUT ──────────────────────────────────────────────────────────── */
.shell,
.shell--narrow {
  width: 100%; margin-inline: auto; padding-inline: var(--gutter);
  /* A KIMONDOTT box-sizing nem fölösleges, pedig a reset már border-box-ra
     állította. A GB Global CSS-ben él egy régi `.shell { box-sizing:
     content-box }`, és az a szelektor (0,1,0) erősebb, mint a reset `*`-a
     (0,0,0) — tehát a betöltési sorrend NEM dönthet róla, hiába vagyunk mi az
     utolsók. A `max-width` viszont ugyanazon a szelektoron áll mindkét
     fájlban, ott a sorrend dönt, és a miénk nyer. A kettő együtt élesben
     1280px TARTALMAT adott 1240 helyett (+2×20px padding = 1320px külső).
     Azonos szelektorra kimondva a sorrend dönt, és visszakapjuk a 1240-et.
     Ugyanaz az eset, mint lentebb a `.section` margójánál. */
  box-sizing: border-box;
}
.shell          { max-width: var(--maxw); }
.shell--narrow  { max-width: var(--maxw-narrow); }

/* függőleges ritmus */
/* A kimondott margó NEM fölösleges, pedig a reset már nullázta. A GB Global
   CSS-ben él egy régi `.section { margin-bottom: 5rem }`, és mivel azt a
   tulajdonságot RAJTA KÍVÜL SENKI nem deklarálja erre a szelektorra, a
   betöltési sorrend nem dönthet róla — a reset `*` szelektora (0,0,0) pedig
   gyengébb, mint a `.section` (0,1,0). Élesben ez 80px-et adott minden
   szekció alá.

   `margin-block`, NEM `margin`. A jogi oldal (legal.html,
   template-jogi-oldal.php) EGYETLEN elemen viseli mindkét class-t:
   `<div class="shell--narrow section">`. A sima `margin: 0` így elvette volna a
   `.shell--narrow` `margin-inline: auto`-ját is — azonos súly (0,1,0), a
   `.section` viszont később áll a fájlban, tehát nyert volna —, és a fehér
   tartalomdoboz balra ugrott volna a középre igazítás helyett.
   A `margin-block` csak a függőleges oldalakat nullázza, a vízszintes
   középre igazítás érintetlen marad.

   ÁLTALÁNOS SZABÁLY EBBŐL: ahol a komponens a reset nullájára támaszkodik,
   ott ki kell MONDANI a margót — de a lehető LEGSZŰKEBB tulajdonsággal, mert
   a shorthand olyan oldalakat is átír, amiket egy másik class állít be.
   Lásd a fájl végén a „WP INTEGRÁCIÓ" blokk jegyzetét. */
.section { padding-block: var(--section-pad); margin-block: 0; }

/* Csak képernyőolvasónak szánt szöveg (pl. űrlapcímke, ahol a placeholder
   vizuálisan elég). NEM display:none — az kivenné a kisegítő fából is. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* A fejléc position:fixed, tehát nem foglal helyet a folyamban — a tartalom
   szándékosan siklik alatta görgetéskor. Az ELSŐ szekciónak viszont nyugalmi
   állapotban ki kell kerülnie a sáv alól, különben a h1 becsúszik mögé.
   A max() garantálja, hogy a felső padding sose menjen a fejléc magassága
   alá, függetlenül attól, mennyire szűkítjük a --section-pad-et. */
main > .section:first-child {
  padding-top: max(var(--section-pad), calc(var(--header-h) + 1.5rem));
}

/* ugyanez horgony-ugrásnál: a célpont ne a fixed fejléc mögé essen */
html { scroll-padding-top: calc(var(--header-h) + 0.75rem); }

/* Címsor alatti kártyasáv távolsága — egy helyen hangolható, ne inline stílusban.
   A .scroller 10px felső paddingot visz (hely a hover-liftnek és az árnyéknak),
   ezért a scroller-változat pont ennyivel kevesebb margót kap, hogy OPTIKAILAG
   ugyanakkora legyen a rés a címsor alatt, mint a sima rácsoknál. */
.section-cards { margin-top: 1.5rem; }
.scroller-wrap.section-cards { margin-top: 0.875rem; }

/* SZEKCIÓ- ÉS OLDALFEJ — ugyanaz a komponens mindkettőre: (címke) → címsor →
   (egy bekezdés) → (gombok). Csak a címsor-osztály váltakozik: az oldal feje
   .text-4xl + h1, egy szekcióé .text-2xl + h2.
   NINCS egységes gap-es oszlop: a lead szorosan a címhez tapad (egy gondolat),
   a gombok jóval lejjebb (új mozdulat). A térköz maga a hierarchia.
   A címke fölötti margót a CÍMSOR viszi felső margóként, mert a .badge és az
   .eyebrow inline-flex — inline elem alsó margója nem tolná lejjebb a címsort.
   Alsó margó nincs: azt a következő blokk hozza (.section-cards, .faq-chat). */
.section-head__title { text-wrap: balance; }
.section-head .badge   + .section-head__title,
.section-head .eyebrow + .section-head__title { margin-top: 12px; }
.section-head__lead {
  max-width: 36em; margin-top: var(--sp-4);
  font-size: 1.0625rem; font-weight: 450; line-height: 1.65; letter-spacing: -0.005em;
  color: var(--contrast-2); text-wrap: pretty;
}
.section-head__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-5); }

/* KÖZÉPRE ZÁRT változat. A `text-wrap: balance` itt nem luxus: e nélkül a
   címsor utolsó sorába egyetlen árva szó esne. */
.section-head--center { text-align: center; }
.section-head--center .section-head__title { max-width: 13em; margin-inline: auto; }
.section-head--center .section-head__lead { max-width: 32em; margin-inline: auto; }
.section-head--center .section-head__actions { justify-content: center; }

/* grid-ek — mobil-first: alapból 1 oszlop, töréspont fölött bomlik */
.grid-3, .grid-4, .grid-50-50, .grid-60-40 {
  display: grid; gap: var(--gap);
}
@media (min-width: 600px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3      { grid-template-columns: repeat(3, 1fr); }
  .grid-4      { grid-template-columns: repeat(4, 1fr); }
  .grid-50-50  { grid-template-columns: 1fr 1fr; }
  .grid-60-40  { grid-template-columns: 1.5fr 1fr; }
}
/* rács-segéd: az elem két oszlopnyi széles. SZÁNDÉKOSAN csak 600px fölött hat,
   ahol a rács már többoszlopos — egyoszlopos mobil rácsban a span 2 implicit
   második oszlopot hozna létre, és szétesne az elrendezés. */
@media (min-width: 600px) {
  .span-2 { grid-column: span 2; }
}
/* 600 és 900 között a .grid-3 még csak KÉT oszlopos, ott a span 2 kiadja a teljes
   sort — a mellé szánt keskeny elem viszont árván maradna a következő sor felén.
   Ezért abban a sávban az is a teljes sort kapja. Így a bolt-szekció felső sora
   (térkép + nyitvatartás) két teljes szélességű sorra bomlik szét, nem pedig egy
   fél doboz lóg ki alul. */
@media (min-width: 600px) and (max-width: 899px) {
  .grid-3 > .oh-card { grid-column: 1 / -1; }
}

/* Egymás alá tett rácsok: a második rács pontosan akkora rést kap fölülre, mint
   amekkora a rácson belüli köz, így a két rács egyetlen összefüggő táblának
   látszik. Azért van belőlük kettő, mert eltér az osztásuk (fent 3, lent 4);
   egyetlen rácsban ez csak span-okkal és árva dobozokkal jönne ki. */
.grid-stacked { margin-top: var(--gap); }

/* 5. ─── SZÍNMODIFIKÁTOROK (.is-*) ───────────────────────────────────────────
   Beállítják a --c (szín) és --c-soft (halvány háttér) lokális változókat.
   A badge / ikonkeret / bármilyen elem ezeket fogyasztja: var(--c), var(--c-soft).
   Régi example-nevek (berry/crimson/mint/amber) → új palettára térképezve. */
.is-blue    { --c: var(--blue);   --c-soft: rgba(0,111,255,0.09); }
.is-green,
.is-mint    { --c: var(--green);  --c-soft: rgba(0,140,58,0.10); }
.is-teal    { --c: var(--teal);   --c-soft: rgba(0,128,143,0.10); }
.is-purple,
.is-berry   { --c: var(--purple); --c-soft: rgba(107,34,176,0.10); }
.is-red,
.is-crimson { --c: var(--red);    --c-soft: rgba(204,16,48,0.09); }
.is-orange,
.is-amber   { --c: var(--orange); --c-soft: rgba(196,68,0,0.10); }
/* A tint SZÁNDÉKOSAN nem a --yellow halványítása, ahogy a többi színnél:
   a sárga sötét szövegváltozatát 10%-ra hígítva piszkos bézs jön ki (#F6F1E6).
   Itt ezért az élénk citrom megy tintnek — világosabb is, tehát a badge
   felirata jobban olvasható rajta, mint a korábbi okkeren. */
.is-yellow  { --c: var(--yellow); --c-soft: rgba(255,214,0,0.16); }
.is-gray    { --c: var(--gray);   --c-soft: rgba(74,72,96,0.08); }

/* 6. ─── KOMPONENSEK ─────────────────────────────────────────────────────── */

/* 6.1 BADGE -------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0;                 /* kimondva: a GB Global CSS 1.125rem-et adna alá */
  /* A padding VÁLTOZÓBAN, és az ALAPON van kimondva, nem csak a --sm variánson:
     a nyitvatartás-kártyában egy nagyobb súlyú GB-szabályt kell vele visszavenni
     (lásd .oh-card .oh-status), és ott bármelyik variáns előfordulhat. Így az
     érték egy helyen él, a visszavétel pedig sosem marad érték nélkül. */
  --badge-pad: 4px 10px;
  padding: var(--badge-pad); border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 500; line-height: 1.3;
  white-space: nowrap;
  color: var(--c, var(--contrast-2));
  background: var(--c-soft, var(--base-3));
  border: 1px solid color-mix(in srgb, var(--c, var(--border-hi)) 22%, transparent);
}
.badge--sm { --badge-pad: 2px 8px; padding: var(--badge-pad); font-size: 0.6875rem; }
/* vonalas ikon a címkében (emoji helyett): a szöveg méretéhez igazodik */
.badge svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* 6.2 GOMB --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--r-md);
  font-size: 0.9375rem; font-weight: 600; line-height: 1;
  border: 1px solid transparent;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s, border-color .2s;
}
/* vonalas ikon a gombban — a szöveggel együtt nő/csökken */
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* ────────────────────────────────────────────────────────────────────────────
   HOVER = CSAK EGÉRREL. Ez az egész fájlra érvényes szabály, ezért áll itt, az
   első komponensnél, ahol előjön.
   Érintőképernyőn nincs „fölötte állás": a böngésző a koppintáskor RÁRAKJA a
   hover-stílust, és rajta is HAGYJA, amíg máshova nem koppintasz. Egy megemelt,
   árnyékos kártya így ottmarad kiemelve, mintha ki lenne választva — vissza-
   navigálás után is. Ezért minden hover-stílus
   `@media (hover: hover) and (pointer: fine)` blokkban áll: az egeres és
   trackpados gépek (a billentyűzetes iPad is) megkapják, az ujj nem.
   Amivel az érintés helyette válaszol, az a `:active`: az az ujj felemelésekor
   magától elmúlik, tehát nem tud beragadni. A `:focus-visible` mindkettőn kívül
   marad, az a billentyűzeté.
   ──────────────────────────────────────────────────────────────────────────── */

.btn-primary,
.gbp-button--primary {
  background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 2px 12px var(--accent-glow);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .gbp-button--primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-glow);
  }
}
.btn-secondary {
  background: var(--base-2); color: var(--contrast);
  border-color: var(--border-hi); box-shadow: var(--sh-sm);
}
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover { background: var(--base-3); box-shadow: var(--sh-md); }
}

/* Lenyomás — minden gombváltozaton ugyanaz, egérrel és ujjal is. SZÁNDÉKOSAN a
   hover-blokkok UTÁN áll: azonos súlyú (0,2,0) szabályokról van szó, tehát a
   sorrend dönt, és így egérrel is a lenyomás látszik, nem a hover-emelés.
   Az érintés a koppintás PILLANATÁBAN kapja meg, nem az elengedéskor. */
.btn:active { transform: scale(0.97); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background .2s, color .2s, box-shadow .2s, border-color .2s; }
  .btn:active { transform: none; }
}

/* 6.3 TRUST ROW (logók / mini bizalmi chipek sora) ----------------------- */
.trust-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.trust-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--base-2); border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  font-size: 0.8125rem; font-weight: 500; color: var(--contrast-2);
}

/* 6.4 CARD alap (Apple-jelleg) ------------------------------------------- */
.card {
  background: var(--base-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.card--hover { transition: transform .25s, box-shadow .25s, border-color .25s; }
@media (hover: hover) and (pointer: fine) {
  .card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--border-hi); }
}

/* 6.5 GLASS utility (iOS Liquid Glass jelleg) ---------------------------- */
.glass {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--sh-md);
}

/* 6.6 SITE HEADER (fej) — teljes szélességből „notch"-ra ugró sticky fejléc ----
   Alap: fekete, edge-to-edge sáv. Görgetésre a .is-scrolled (JS) rácsappan:
   max-width-re húzódik, lekerekedik, felúszik, blur-opál háttér.               */
/* A notch sugara és színe REGISZTRÁLT egyéni tulajdonság. Ez a lényeg: a
   böngésző csak így interpolálja őket, és így tud a sáv border-radius-a meg a
   két homorú saroktoldalék UGYANABBÓL az értékből dolgozni. Korábban a
   toldalék fix 22px-es ívet rajzolt, miközben a sáv sugara 22→0-ra animált,
   tehát a homorú és a domború ív menet közben szétcsúszott, a toldalék pedig
   opacity-vel tűnt el: félig átlátszó sötét folt maradt a lap fölött. Ez volt
   a darabos, túl látható visszaanimálás. */
@property --notch-r {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --notch-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #0D0D14;
}

.site-header {
  --notch-r: 0px;                /* alap: szögletes, edge-to-edge sáv */
  --notch-bg: #0D0D14;
  position: fixed;               /* a viewport tetejéhez tapad, 0 flow-rés */
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 0;
  /* a geometria és a szín egy helyen, egy ütemben animál */
  transition: --notch-r .5s var(--ease-in-out),
              --notch-bg .5s var(--ease-in-out);
}
.site-header.is-scrolled {
  --notch-r: 22px;
  --notch-bg: var(--glass);
}

.site-header__inner {
  position: relative;
  z-index: 2;                    /* a sáv a mobil menü fölött marad */
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: 100%;
  margin-inline: auto;
  height: 64px;
  padding-inline: var(--gutter);
  background: var(--notch-bg);
  color: #fff;
  border-radius: 0 0 var(--notch-r) var(--notch-r);
  /* A blur MINDIG bent van, nem csak .is-scrolled alatt. Ha az átmenet
     elején jönne létre és a végén szűnne meg a kompozit réteg, az látható
     pattanást okozna. Nem görgetett állapotban a háttér átlátszatlan, tehát
     a blur úgysem látszik. */
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* interpolálható kiindulás: a `none` → árnyék váltás ugrana */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0);
  transition: width .5s var(--ease-in-out),
              height .5s var(--ease-in-out),
              padding-inline .5s var(--ease-in-out),
              box-shadow .5s var(--ease-in-out);
}
/* görgetve: a tartalom szélességére zsugorodik (a px-szélességet JS állítja,
   hogy folyamatosan animálódjon), felül tapad, alul lekerekedik.
   max-width szándékosan NINCS: az nem animálható, ugrást okozna — a JS
   már a viewportra vágja a cél-szélességet. */
.site-header.is-scrolled .site-header__inner {
  height: 58px;
  padding-inline: 1.5rem 0.875rem;
  box-shadow: var(--sh-2xl);
}

/* a két homorú, „lefelé gördülő” sarok (a notch tetején, kifelé — ott, ahol
   a fejléc a viewport tetejéhez simul). Nincs rajtuk opacity-átmenet: a
   méretük és az ívük is --notch-r, tehát 0-ra zsugorodva maguktól tűnnek el,
   végig pontosan illeszkedve a sáv sarkához. */
.site-header__inner::before,
.site-header__inner::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--notch-r);
  height: var(--notch-r);
  background: var(--notch-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  pointer-events: none;
}
.site-header__inner::before {
  left: calc(-1 * var(--notch-r));
  -webkit-mask: radial-gradient(circle at bottom left, transparent var(--notch-r), #000 0);
          mask: radial-gradient(circle at bottom left, transparent var(--notch-r), #000 0);
}
.site-header__inner::after {
  right: calc(-1 * var(--notch-r));
  -webkit-mask: radial-gradient(circle at bottom right, transparent var(--notch-r), #000 0);
          mask: radial-gradient(circle at bottom right, transparent var(--notch-r), #000 0);
}

/* logó */
.site-header__logo {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  flex-shrink: 0;
}

/* fő menü */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline: auto;   /* menü középre, akciók jobbra */
}
.site-header__link {
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.site-header__link:active { transform: scale(0.96); }

/* akció-ikonok (kereső, fiók, kosár) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.site-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out), transform .12s var(--ease-out);
}
.site-header__icon svg { width: 20px; height: 20px; }
.site-header__icon:active { transform: scale(0.9); }

@media (hover: hover) and (pointer: fine) {
  .site-header__link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
  .site-header__icon:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
}

/* — HAMBURGER (két vonal, X-be forduló) — csak mobilon látszik — */
.site-header__burger { display: none; }
.site-header__burger-lines {
  position: relative;
  width: 18px;
  height: 12px;
}
.site-header__burger-lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .34s var(--ease-in-out);
}
.site-header__burger-lines i:first-child { top: 0; }
.site-header__burger-lines i:last-child  { bottom: 0; }
/* a két vonal a doboz közepén (6px) találkozik: 0.75 + 5.25 = 6 = 11.25 − 5.25 */
.site-header__burger.is-active .site-header__burger-lines i:first-child { transform: translateY(5.25px) rotate(45deg); }
.site-header__burger.is-active .site-header__burger-lines i:last-child  { transform: translateY(-5.25px) rotate(-45deg); }

/* — TELJES KÉPERNYŐS MOBIL MENÜ —
   Fentről gördül le és ugyanarra megy vissza (azonos be- és kilépési út).
   A fejléc-sáv fölötte marad (z-index), hogy a logó és az X végig látszódjon. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 84px var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  background: #0D0D14;
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* zárt: felhúzva, láthatatlan, fókuszálhatatlan */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform .46s var(--ease-in-out),
              opacity .26s ease,
              visibility 0s linear .46s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform .46s var(--ease-in-out),
              opacity .2s ease,
              visibility 0s;
}

.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__link {
  display: block;
  padding: 0.7rem 0;
  font-size: 2rem;                /* 32px — nagy, jól olvasható */
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* induló állapot a lépcsőzetes megjelenéshez */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .42s var(--ease-out);
}
.mobile-menu__link:active { color: var(--accent); }
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
/* a késleltetés CSAK a nyitott állapoton ül, így záráskor a pontok együtt,
   gyorsan tűnnek el, nem fordított sorrendben csorognak vissza */
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: .08s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: .12s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: .16s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: .20s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: .24s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(6) { transition-delay: .28s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(7) { transition-delay: .32s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(8) { transition-delay: .36s; }

/* másodlagos sor: ami a sávból kikerült (kereső, fiók) */
.mobile-menu__foot {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 2rem;
}
/* <a>-ként ÉS <button>-ként is állnia kell: a keresés panelt nyit, nem navigál,
   ezért ott gomb. A reset ad font-family-t és cursort a gomboknak, keretet
   viszont nem szed le — az itt jön. */
.mobile-menu__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .42s var(--ease-out), background-color .18s var(--ease-out);
}
.mobile-menu__sub svg { width: 18px; height: 18px; }
.mobile-menu__sub:active { background: rgba(255, 255, 255, 0.14); }
.mobile-menu.is-open .mobile-menu__sub { opacity: 1; transform: none; transition-delay: .38s; }

/* — TÖRÉSPONT: 900px alatt hamburger, fölötte a teljes sáv-menü — */
@media (max-width: 900px) {
  .site-header__nav { display: none; }
  .site-header__icon--desk { display: none; }   /* kereső + fiók a menübe költözik */
  .site-header__burger { display: inline-flex; }
  .site-header__logo { margin-inline-end: auto; }  /* logó balra, akciók jobbra */
  .site-header__inner { gap: 0.5rem; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none; }
}
/* nyitott menü alatt a lap ne görögjön */
body.has-menu-open,
body.has-search-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: --notch-bg .2s ease; }
  .site-header__inner { transition: none; }
  .site-header__link:active,
  .site-header__icon:active { transform: none; }
  /* a menü keresztfade-del jön, csúszás és lépcsőzés nélkül */
  .mobile-menu { transform: none; transition: opacity .2s ease, visibility 0s linear .2s; }
  .mobile-menu.is-open { transform: none; transition: opacity .2s ease, visibility 0s; }
  .mobile-menu__link,
  .mobile-menu__sub { transform: none; transition: opacity .2s ease; }
  .mobile-menu.is-open .mobile-menu__link,
  .mobile-menu.is-open .mobile-menu__sub { transform: none; transition-delay: 0s; }
  .site-header__burger-lines i { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   PER-OLDAL KOMPONENSEK
   Ide kerülnek struktúrafüggő blokkok (hero-strip, price list .pl-*, faq-*,
   sl-tabs, appt-card, oh-card, map-card, cta-card, tradein-card,
   stock-notice, gbp-mega-menu …) ahogy az adott oldal HTML-jét megtervezzük.
   A megállapodott class-nevek a CONVENTIONS.md "Class registry" részében.
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   BLOG ARCHÍVUM  (blog-archive.html)

   ACF mezők a poszton:
     cover_emoji  (szöveg)  — 1 emoji, a borítón
     cover_color  (select)  — is-blue / is-green / is-purple / is-red /
                              is-orange / is-yellow / is-gray
   Az olvasási idő NEM WP-adat: a gyerektéma iberry_reading_time() helpere
   számolja (szószám / 200), és egy shortcode teszi elérhetővé a GB-nek.
   A kiemelt cikk mindig a legfrissebb poszt, nincs hozzá „kiemelt" mező.
   ========================================================================== */

@keyframes fadeUp { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
@keyframes blink  { 0%,100% { opacity:1 } 50% { opacity:.25 } }
.fu { animation: fadeUp .5s var(--ease-out) both; }

/* FEJ — a .hero-card, ugyanaz, mint a szerviz-archívumé. A korábbi .blog-head
   (csupasz h1 + egy bekezdés a szürke háttéren) TÖRÖLVE: az oldalon minden más
   fehér lap kerettel, tehát a fej volt az egyetlen elem, ami nem megtervezettnek
   látszott, hanem maradék helynek. Gyűjtőoldal feje = .hero-card, egységesen.
   A jobb hasábban a készülékkép helyett a .cover-fan áll (lentebb). */

/* A fej és a lista közti köz. A .hero-card maga nem visz alsó margót, mert
   máshol (szerviz-archívum) a szekció zárja le — itt viszont a listával egy
   szekcióban áll, tehát a közt ennek a párosnak kell megadnia. */
.hero-card + .blog-layout { margin-top: clamp(24px, 3.5vw, 40px); }

/* layout: fő + oldalsáv */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-6); align-items: start; }
/* hogy a fő oszlop a tartalma alá tudjon zsugorodni (különben a táblázat kifeszíti
   és az overflow-x:auto nem görget → az egész oldal vízszintesen túlcsordul) */
.blog-layout > * { min-width: 0; }

/* BORÍTÓ — gradiens lap + emoji.
   A színt a MEGLÉVŐ .is-* modifikátor adja a --c változón át (ACF: cover_color),
   nincs beégetett hexa és nincs külön --cover-from/--cover-to mező. Így a paletta
   egy helyen él, a .is-* definíciója pedig érintetlen marad (a badge és az
   icon-badge is fogyasztja). A blokk csak :root tokenekre + --c-re támaszkodik,
   tehát önállóan bemásolható egyetlen GB elem CSS-editorába.
   Markup: <div class="post-cover post-card__cover is-blue"> */
.post-cover {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c, var(--accent)) 8%,  var(--base-2)),
    color-mix(in srgb, var(--c, var(--accent)) 22%, var(--base-2)));
}
.post-cover__emoji {
  font-size: 64px; line-height: 1; position: relative; z-index: 1;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12));
  transition: transform .35s var(--ease-out);
}

/* BORÍTÓ-LEGYEZŐ — a .hero-card jobb hasábja a blogon.
   Három egymásra csúszó borító-KORONG. Nem díszítés a semmiből: a lapok
   ugyanazok a .post-cover felületek, mint a kártyákon, tehát a fej a saját
   tartalmából áll össze. A helyet KLASSZ adja, nem nth-child: minden korong
   két class-t kap (.cover-fan__item + a hely-modifikátora), így GB-ben három
   konténerbe kattintható.
   Dekoráció, tehát a markupban aria-hidden="true" — az emojik a lista
   kártyáin úgyis szerepelnek, itt nem hordoznak új információt.
   MIÉRT NINCS DŐLÉS: körön a rotate-nek nincs mibe kapaszkodnia, csak az emojit
   billentené meg, ami elrontott igazításnak látszik, nem szándéknak. A legyező
   ívét ezért a függőleges eltolás (--fan-dy) adja: a két szélső lejjebb ül, a
   középső feljebb.
   A blokk a .post-cover UTÁN áll, mert felülírja a hátterét — így nem kell
   erősebb szelektor hozzá. */
/* MINDEN MÉRET EGYETLEN ÉRTÉKBŐL SZÁMOL: a --disc a korong átmérője. Az emoji,
   az átfedés és az ív is ennek az aránya, tehát a viszonyuk minden ablak-
   szélességen ugyanaz. Korábban a korong %-ból, az emoji clamp(…vw…)-ből
   méreteződött: a kettő függetlenül mozgott, ezért volt a levegő hol tág, hol
   a peremig szűk. (Konténer-lekérdezés is megoldaná, de az egy fölösleges
   függőség egy három korongból álló díszhez.)
   Az emoji 30%: a glifa ennél kb. 1.17-szer magasabban rajzol, tehát a látható
   jel az átmérő ~35%-a, körben nagyjából egyharmadnyi levegővel.
   HANGOLÁS: a --disc a méret, a 0.30 az emoji aránya, a -0.24 az átfedés. */
.cover-fan {
  --disc: clamp(68px, 8.6vw, 110px);
  display: flex; align-items: center; justify-content: center;
}
.cover-fan__item {
  width: var(--disc); height: var(--disc); flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--border);
  box-shadow: var(--sh-xl);
  transform: translateY(var(--fan-dy, 0));
  /* halványabb, mint a kártyák borítója: a fejben kíséret, nem főszereplő */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c, var(--accent)) 4%,  var(--base-2)),
    color-mix(in srgb, var(--c, var(--accent)) 12%, var(--base-2)));
}
.cover-fan__item--back  { --fan-dy: calc(var(--disc) *  0.10); margin-right: calc(var(--disc) * -0.24); z-index: 1; }
.cover-fan__item--front { --fan-dy: calc(var(--disc) *  0.10); margin-left:  calc(var(--disc) * -0.24); z-index: 2; }
.cover-fan__item--top   { --fan-dy: calc(var(--disc) * -0.09); z-index: 3; }
/* A vetett árnyék is halkabb, mint a kártyákon: kis jelen a nagy szórás
   tömegnek látszik, és optikailag növeli az emojit. */
.cover-fan .post-cover__emoji {
  font-size: calc(var(--disc) * 0.30);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.10));
  transition: none;
}

/* KATTINTHATÓSÁG — „kifeszített link".
   A kártya gyökere <article> marad (a lista így is szemantikus lista), a link
   pedig a CÍMEN ül, és egy ::after-rel kifeszül az egész kártyára. Így egyetlen
   fókuszálható elem van kártyánként, a képernyőolvasó a cikk címét olvassa fel
   linkként — nem egy néma dobozt —, a teljes lap mégis kattintható.
   Ehhez kell a .post-card / .featured-post position: relative-je.
   A fókuszkeret a KÁRTYÁN jelenik meg, nem a szövegen, mert a kattintható
   felület is a kártya. */
.post-card__link,
.featured-post__link { color: inherit; text-decoration: none; }
.post-card__link::after,
.featured-post__link::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
}
.post-card:has(.post-card__link:focus-visible),
.featured-post:has(.featured-post__link:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.post-card__link:focus-visible,
.featured-post__link:focus-visible { outline: none; }

/* META — olvasási idő · dátum.
   A régi változat 12px-es --contrast-3 volt, ami fehéren 2.27:1 kontraszt: a
   WCAG-minimum (4.5:1) alatt, tehát nem stíluskérdés, hanem bukó érték. Most
   13px és --contrast-2 (9.5:1). A tagokat középpont választja el, nem puszta
   térköz, különben a két adat egyetlen szürke folttá olvad.
   A méretet és a színt a SZÜLŐ adja, a gyerekek csak a saját dolgukat intézik. */
.post-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: var(--sp-3);
  font-size: 0.8125rem; line-height: 1.4; color: var(--contrast-2);
}
.post-meta__sep { color: var(--contrast-3); }
.post-card__date,
.featured-post__date,
.post-header__date { white-space: nowrap; }

/* OLVASÁSI IDŐ — körgyűrű, nem óra-emoji.
   Az ⏱ színes emoji volt egy szövegfolyamban, más súllyal és színnel, mint
   körülötte minden; ráadásul az oldal minden más ikonja inline SVG. A gyűrű
   viszont nem díszít, hanem ÁBRÁZOL: a kitöltött ív maga az olvasási idő.
   A kitöltést a --rt (0…1) adja a span inline stílusából. Ez adat, nem stílus,
   ezért van kivételesen a markupban: --rt = min(perc / 10, 1), tehát a teli
   gyűrű 10 perc vagy több. A gyerektéma iberry_reading_time() helpere a percet
   és a --rt-t egyszerre számolja, a szerzőnek nincs vele dolga. */
.read-time { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.read-time__ring { width: 15px; height: 15px; flex-shrink: 0; transform: rotate(-90deg); }
.read-time__track { fill: none; stroke: var(--border-hi); stroke-width: 3; }
.read-time__fill {
  fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 44;                                  /* 2πr, r=7 */
  stroke-dashoffset: calc(44 - 44 * var(--rt, 0.5));
}
.post-author { display: inline-flex; align-items: center; gap: 8px; }
.post-author__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--accent-soft); border: 1px solid var(--accent-mid);
}
.post-author__name { font-size: 0.8125rem; font-weight: 500; color: var(--contrast-2); }
/* A „.read-link" (Olvasom →) TÖRÖLVE: a kiemelt cikk teljes lapja kattintható
   (kifeszített link a címen), tehát a külön hívogató csak ismételte, amit a
   kártya amúgy is felkínál — ráadásul linknek látszott, de nem volt az. */

/* KIEMELT cikk (1 db, felül)
   AZ OSZTÁS 1fr 1fr, nem 1.1fr 1fr: így a borító széle pontosan az alatta lévő
   kártyarács gap-jének a KÖZEPÉRE esik. A korábbi 1.1fr-rel a törésvonal 908px
   széles főoszlopnál 22px-szel jobbra csúszott a gap közepétől — épp annyival,
   hogy zavarjon, de ne látszódjon szándéknak. */
.featured-post {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--sh-sm);
  margin-bottom: var(--sp-5); cursor: pointer; position: relative;
  transition: transform .26s var(--ease-out), box-shadow .26s var(--ease-out);
}
.featured-post__cover { min-height: 240px; }
.featured-post__cover .post-cover__emoji { font-size: 80px; }
/* A villogó „friss" pötty (.featured-post__dot) KIKERÜLT: a kiemelt cikk mindig a
   legfrissebb, tehát a pötty olyasmit hirdetett, ami eleve igaz. A @keyframes blink
   marad, mert a contact oldal .oh-dot eleme használja. */
.featured-post__body { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; }
.featured-post__title { margin-bottom: 12px; transition: color .2s; }
.featured-post__excerpt { font-size: 0.9375rem; color: var(--contrast-2); line-height: 1.7; margin-bottom: 22px; }
.featured-post__footer { display: flex; align-items: center; justify-content: space-between; }

/* 2-es grid + cikk-kártya (asztal: függőleges, mobil: compact) */
.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.post-card {
  display: flex; flex-direction: column;
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xs);
  cursor: pointer; position: relative;
  transition: transform .26s var(--ease-out), box-shadow .26s var(--ease-out);
}

/* ─── KÁRTYA-VISSZAJELZÉS ──────────────────────────────────────────────────
   A zöld hover-keret KIKERÜLT. Két oka volt:
   · Gyenge jel: az --accent-mid rgba(0,217,89,0.18), fehéren egy alig látható
     mentazöld hajszálvonal — inkább piszkos élnek olvasódott, mint állapotnak.
   · Ellentmondó jel: az árnyék azt mondja „felemelkedett", a zöld keret azt,
     hogy „kiválasztva". Egy hoverre egy jelentés jut.
   Marad az emelés + árnyék (= magasság) és az emoji (= játék). Cserébe jön a
   LENYOMÁS: eddig :active állapotban semmi nem történt, tehát érintésen nulla
   visszajelzés volt a navigációig. A press rövidebb átmenetet kap, hogy az ujj
   alatt azonnali legyen, nem 260 ms múlva. */
@media (hover: hover) and (pointer: fine) {
  .featured-post:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
  .featured-post:hover .post-cover__emoji { transform: scale(1.06) translateY(-6px); }
  .featured-post:hover .featured-post__title { color: var(--accent-hover); }
  .post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
  .post-card:hover .post-cover__emoji { transform: scale(1.1) translateY(-4px); }
  .post-card:hover .post-card__title { color: var(--accent-hover); }
}
.featured-post:active,
.post-card:active {
  transform: translateY(-1px) scale(0.994);
  box-shadow: var(--sh-sm);
  transition-duration: .1s;
}
.post-card__cover { height: 188px; }
.post-card__body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.post-card__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 8px; transition: color .2s; }
.post-card__excerpt {
  font-size: 0.875rem; color: var(--contrast-2); line-height: 1.65; margin-bottom: 16px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

/* ─── OLDALSÁV ───
   A sticky offset a FEJLÉC magasságából számol, nem egy kerek 24-ből: a fejléc
   fixed és 64px, tehát top: 24px mellett az oldalsáv teteje becsúszott alá.
   Ugyanaz a képlet, mint a .sl-tabs__menu-nél. */
.blog-sidebar { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: calc(var(--header-h) + 1rem); }
.sb-card { background: var(--base-2); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xs); }
.sb-card__head {
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--contrast-3); display: flex; align-items: center; gap: 7px;
}

/* NÉPSZERŰ CIKKEK — emoji (NEM számozás) + cím, semmi más.
   A dátum LEKERÜLT: egy „népszerű" listában a megjelenés napja nem dönt el
   semmit (nem az a szempont, ami a listát rendezi), viszont minden sorban
   elvitt egy sort és egy szürke foltot. A cím maga a döntés.
   Dátum nélkül a sor egysoros is lehet, ezért az igazítás középre kerül —
   flex-start mellett a rövid címek az emoji tetejéhez tapadnának. */
.popular__item { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.popular__item:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .popular__item:hover { background: var(--base-3); }
}
.popular__emoji { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.popular__title { font-size: 0.8125rem; font-weight: 600; color: var(--contrast); line-height: 1.35; transition: color .15s; }
@media (hover: hover) and (pointer: fine) {
  .popular__item:hover .popular__title { color: var(--accent-hover); }
}

/* HÍRLEVÉL — sötét lap.
   A korábbi pasztell mentazöld gradiens (#F1FFF6 → #E1FBEB) volt az oldal
   egyetlen ilyen felülete, két beégetett hexával, amik sehol máshol nem
   szerepelnek a fájlban. Mellé egy 28px-es emoji magában, teljes szélességű
   zöld gomb és középre zárt apró szöveg: négy gyerekes jel egymáson, miközben
   körülötte fehér lapok állnak hajszálvonalakkal.
   Most a --surface-dark viszi, mint a láblécet. Apple-elv: az anyag SÚLYA
   jelzi a rangot — az oldalsáv egyetlen sötét felülete az, amelyik kér valamit.
   A szöveg nem lapos szürke a sötéten, hanem magasabb kontrasztú fehér-fokozat
   (vibrancy): a leírás 7.7:1, a lábjegyzet 5.9:1. */
.newsletter {
  background: var(--surface-dark);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl); padding: 22px; box-shadow: var(--sh-md);
}
/* Az ikon CSUPASZ emoji, nem jelvény-csempe: ugyanaz a kezelés, mint a népszerű
   cikkek sorában (.popular__emoji). Az oldalsávban ez a két emoji egymás alatt
   áll, tehát ha az egyik keretes csempe, a másik meg nem, az véletlennek
   látszik. Egy hírlevél-doboznak amúgy sincs szüksége keretre a keret körül. */
.newsletter__icon { display: block; font-size: 24px; line-height: 1; margin-bottom: 14px; }
.newsletter__title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; color: #fff; margin-bottom: 5px; }
.newsletter__desc { font-size: 0.8125rem; color: rgba(255,255,255,0.62); line-height: 1.6; margin-bottom: 16px; }
.newsletter__form { display: flex; flex-direction: column; gap: 8px; }
.newsletter__input {
  width: 100%; padding: 11px 13px; border-radius: var(--r-md);
  border: 1.5px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
  font-family: inherit; font-size: 0.875rem; color: #fff; outline: none; transition: border-color .18s, box-shadow .18s;
}
.newsletter__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.newsletter__input::placeholder { color: rgba(255,255,255,0.40); }
/* A teljes szélesség a GOMBRA tartozó szabály, nem inline style="width:100%":
   a fájl egész lényege, hogy a CSS a global.css-ben él és onnan megy GB-be. */
.newsletter__submit { width: 100%; justify-content: center; }
.newsletter__note { font-size: 0.6875rem; color: rgba(255,255,255,0.52); text-align: center; margin-top: 4px; }

/* lapozó */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--sp-6); }
.page-btn {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600; border: 1.5px solid var(--border);
  background: var(--base-2); color: var(--contrast-2); cursor: pointer;
  box-shadow: var(--sh-xs);
  /* NEM `transition: all`: a token-blokk kommentje épp a nem szándékos mozgás
     ellen érvel, az `all` pedig azt is animálja, amiről nem tudunk. */
  transition: border-color .15s, color .15s, background .15s, transform .1s;
}
@media (hover: hover) and (pointer: fine) {
  .page-btn:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-soft); }
}
.page-btn:active { transform: scale(0.94); }
.page-btn.is-active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: 0 2px 10px var(--accent-glow); }
.page-dots { color: var(--contrast-3); padding: 0 4px; }

/* ─── RESZPONZÍV — két külön töréspont, nem egy ───────────────────────────
   900px: az oldalsáv a tartalom alá kerül, a kiemelt cikk egy oszlopba rendeződik.
   A 2-es kártyarács itt MEGMARAD: a teljes szélességet megkapva pont jó méretű
   kártyákat ad tableten. (Korábban itt vált compactra, ami 880px-en végignyúlt
   csíkokat eredményezett.)
   640px: innen egy oszlop és compact kártya, mert két kártya már nem fér el. */
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }

  .featured-post { grid-template-columns: 1fr; }
  .featured-post__cover { min-height: 200px; }
  .featured-post__cover .post-cover__emoji { font-size: 80px; }
}

@media (max-width: 640px) {
  /* compact kártya: borító balra, szöveg jobbra */
  .post-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .post-card { flex-direction: row; align-items: stretch; border-radius: var(--r-lg); }
  .post-card__cover { height: auto; width: 108px; flex-shrink: 0; }
  .post-card__cover .post-cover__emoji { font-size: 40px; }
  .post-card__body { padding: 14px 16px; }
  .post-card__title { font-size: 0.9375rem; }
  .post-card__excerpt { -webkit-line-clamp: 2; font-size: 0.8125rem; margin-bottom: 12px; }
}

/* ─── CSÖKKENTETT MOZGÁS ───────────────────────────────────────────────────
   A visszajelzés nem tűnik el, csak nem mozdul: a kártya keret- és árnyék-
   váltása marad, a felfelé ugrás és az emoji-nagyítás elmarad. */
@media (prefers-reduced-motion: reduce) {
  .fu { animation: none; }
  .featured-post,
  .post-card { transition: box-shadow .2s ease; }
  .featured-post:hover,
  .post-card:hover,
  .featured-post:active,
  .post-card:active { transform: none; }
  .post-cover__emoji { transition: none; }
  .featured-post:hover .post-cover__emoji,
  .post-card:hover .post-cover__emoji { transform: none; }
  .page-btn:active { transform: none; }
}

/* ==========================================================================
   EGY CIKK  (single-post.html)  — az oldalsáv az archívum osztályait használja
   (.blog-layout, .blog-sidebar, .sb-card, .popular__*, .newsletter*)
   ========================================================================== */

/* fej-kártya: borítókép + cím + kivonat + szerző */
.post-header {
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--sh-sm);
  margin-bottom: var(--sp-4);
}
.post-header__hero { position: relative; height: 300px; overflow: hidden; background: var(--base-3); }
.post-header__hero-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4,0,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .post-header:hover .post-header__hero-img { transform: scale(1.03); }
}
.post-header__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,20,0.35), transparent 55%); pointer-events: none; }
.post-header__body { padding: clamp(20px, 3vw, 32px); }
/* a dátum méretét és színét a .post-meta adja, itt csak a tördelés tiltása */
.post-header__title { margin: 0 0 14px; text-wrap: balance; }
/* A kivonat NEM kap accent bal-vonalat: azt a jelet a törzsszövegben az
   idézet (blockquote) viszi, és ha a fej is használná, elveszne a jelentése.
   Itt a méret és a sorköz csinálja a leadet. */
.post-header__excerpt {
  margin: 0 0 20px; max-width: 60ch;
  font-size: 1.0625rem; font-weight: 450; line-height: 1.65; letter-spacing: -0.005em;
  color: var(--contrast-2); text-wrap: pretty;
}
.post-header__author { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.post-header__author .post-author__avatar { width: 40px; height: 40px; font-size: 20px; }
.post-header__author .post-author__name { font-size: 0.875rem; font-weight: 600; color: var(--contrast); }
.post-author__role { font-size: 0.75rem; color: var(--contrast-3); }

/* ─── TARTALOM-KÁRTYA + PRÓZA ──────────────────────────────────────────────
   A törzsszöveget a szerző GUTENBERGBEN írja, ezért ez a rész CSUPASZ ELEMEKRE
   stílusoz a `.post-content__body`-n belül, nem saját class-ekre. Kivétel az a
   néhány `wp-block-*` / `schema-faq-*` horog, amit a core (vagy a Yoast) tesz ki
   és máshogy nem lehet megfogni.
   SZABÁLY: ha új core blokkot kezdesz használni a cikkekben, a stílusa IDE kerül,
   nem a szerkesztőbe és nem egyedi HTML blokkba. Így minden poszt egyszerre
   javul, és a szerzőnek nincs mit másolgatnia. */
.post-content {
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-2xl); box-shadow: var(--sh-sm);
  padding: clamp(20px, 3vw, 36px); margin-bottom: var(--sp-4);
}
.post-content__body { font-size: 1.0625rem; line-height: 1.75; color: var(--contrast-2); }
/* a kártya paddingja adja a szélső közt, a szöveg ne toldja meg */
.post-content__body > :first-child { margin-top: 0; }
.post-content__body > :last-child  { margin-bottom: 0; }

.post-content__body p { margin: 0 0 1.25rem; }
.post-content__body strong { color: var(--contrast); font-weight: 600; }

/* A h2 fölött vékony vonal: egy 60+ soros táblázatokkal teli cikkben a puszta
   térköz kevés tájékozódási pont. A scroll-margin a fix fejléc miatt kell,
   különben a horgony-ugrás a sáv mögé viszi a címsort. */
.post-content__body h2 {
  font-size: 1.625rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25;
  color: var(--contrast); margin: 2.6rem 0 1rem;
  padding-top: 1.9rem; border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  text-wrap: balance;
}
.post-content__body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.post-content__body h3 {
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35;
  color: var(--contrast); margin: 1.9rem 0 .7rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* Link: az accent (#00d959) szövegként 1.7:1, ezért a sötétebb --green a
   szövegszín, és az aláhúzás halványan indul. */
.post-content__body a {
  color: var(--green); text-decoration: underline;
  text-decoration-color: rgba(0,140,58,0.3); text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
@media (hover: hover) and (pointer: fine) {
  .post-content__body a:hover { text-decoration-color: var(--green); }
}

.post-content__body ul,
.post-content__body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.post-content__body li { margin-bottom: .5rem; }
.post-content__body li::marker { color: var(--accent-2); }

.post-content__body blockquote {
  margin: 2rem 0; padding: .2rem 0 .2rem 1.25rem;
  border-left: 3px solid var(--accent);
  font-size: 1.1875rem; line-height: 1.6; color: var(--contrast);
}
.post-content__body blockquote p:last-child { margin-bottom: 0; }
.post-content__body blockquote cite {
  display: block; margin-top: .6rem; font-size: .8125rem; font-style: normal; color: var(--contrast-3);
}

.post-content__body .wp-block-image { margin: 2rem 0; }
.post-content__body .wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.post-content__body figcaption {
  margin-top: .7rem; font-size: .8125rem; line-height: 1.55;
  color: var(--contrast-3); text-align: center;
}

.post-content__body .wp-block-separator {
  margin: 2.5rem 0; border: 0; border-top: 1px solid var(--border);
}

/* ─── TÁBLÁZAT — core Gutenberg Table blokk (figure.wp-block-table > table) ──
   Nincs saját `.data-table` markup többé: a szerző a core Táblázat blokkot
   használja, mi meg csak stílusozzuk.

   A core minden cellára `border: 1px solid`-ot és a thead-re 3px-et tesz. Egy
   6 oszlopos, 60+ soros modell-táblázatnál ez olvashatatlan rácsozat, ezért
   lecsupaszítjuk: marad a vízszintes sorvonal, a fejléc tónusa, semmi több.

   A vízszintes görgetés jelzése tisztán CSS: két fehér fade + két árnyék a
   háttéren, `background-attachment: local, local, scroll, scroll`. A fade a
   tartalommal együtt mozog, az árnyék helyben marad, tehát az árnyék CSAK ott
   látszik, ahol tényleg van még oszlop arra. Nincs hozzá JS és nincs wrapper
   (a Gutenberg kimenetébe úgysem tudnánk plusz elemet tenni). */
.post-content__body .wp-block-table {
  margin: 2rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--base-2) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--base-2) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(13,13,20,0.10), rgba(13,13,20,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(13,13,20,0.10), rgba(13,13,20,0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.post-content__body .wp-block-table table {
  width: 100%; border-collapse: collapse;
  font-size: .875rem; font-variant-numeric: tabular-nums;
}
.post-content__body .wp-block-table th,
.post-content__body .wp-block-table td {
  border: 0; border-bottom: 1px solid var(--border);
  padding: .7rem 1rem; text-align: left; white-space: nowrap;
}
.post-content__body .wp-block-table thead { border-bottom: 0; }
.post-content__body .wp-block-table thead th {
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--contrast-3); background: var(--base-3);
  border-bottom: 1px solid var(--border-hi);
}
.post-content__body .wp-block-table td:first-child { color: var(--contrast); font-weight: 500; }
.post-content__body .wp-block-table td a { font-weight: 500; }
.post-content__body .wp-block-table tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .post-content__body .wp-block-table tbody tr:hover td { background: var(--base-3); }
}

/* OPT-IN ragadós első oszlop. NEM alapértelmezett: nem minden táblázat
   modell-összehasonlítás, és ahol az első cella hosszú szöveg, ott a ragadás
   inkább elfedi a tartalmat. Ahol kell, a Gutenberg „További CSS-osztály"
   mezőjébe írd a Táblázat blokkra: is-sticky-first */
.post-content__body .wp-block-table.is-sticky-first th:first-child,
.post-content__body .wp-block-table.is-sticky-first td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--base-2);
}
.post-content__body .wp-block-table.is-sticky-first thead th:first-child { background: var(--base-3); }

/* ─── GYIK A CIKKBEN — Yoast FAQ blokk, harmonika NÉLKÜL ────────────────────
   A Yoast blokk marad, mert FAQ schemát ad a Google-nek, és így a meglévő
   posztokat nem kell újraírni. A kérdés nála `<strong>`, ezért kell block-ká
   tenni. Nyitás/zárás nincs: a válaszok rövidek, és egy kinyitandó lista a
   cikk végén több kattintás, mint amennyi hasznot hoz.
   FIGYELEM: ez NEM a gyik.html `.faq-item` iMessage-szála, és nem is a régi
   `.faq__item` harmonika (az törölve). */
.post-content__body .schema-faq { margin: 2rem 0; border-bottom: 1px solid var(--border); }
.post-content__body .schema-faq-section { padding: 1.15rem 0; border-top: 1px solid var(--border); }
.post-content__body .schema-faq-question {
  display: block; margin-bottom: .5rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--contrast);
}
.post-content__body .schema-faq-answer { margin: 0; font-size: 1rem; color: var(--contrast-2); }

/* A `.data-table`, `.pro-con`, `.cta-box` és `.faq*` (a cikk-sablon harmonikája)
   TÖRÖLVE 2026-07-30. Mind a négy kézzel írt markupot igényelt egyedi HTML
   blokkban, amit a szerzőnek posztonként kellett másolnia, és a szerkesztőben
   nem is látszott. Helyettük:
     .data-table  → core Gutenberg Táblázat blokk (lásd fentebb .wp-block-table)
     .faq*        → Yoast FAQ blokk, harmonika nélkül (lásd .schema-faq)
     .cta-box     → a cikk végi CTA a SABLONBÓL jön, a meglévő .cta-card-dal
     .pro-con     → elhagyva; ha kell, sima lista teszi ugyanazt
   FIGYELEM: a gyik.html `.faq-item` iMessage-szála ÉL, az más komponens.
/* kapcsolódó cikkek (2 legutóbbi) — vízszintes kártyák a cikk alján
   Újrahasznál: .post-card + .post-cover (a --row variáns = a blog-archív mobil
   compact megjelenés, de bármely szélességen). */
.related { margin-top: var(--sp-5); }
.related__label { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--contrast-3); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.related__label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* vízszintes post-card variáns (kép balra, szöveg jobbra) */
.post-card--row { flex-direction: row; align-items: stretch; border-radius: var(--r-lg); }
.post-card--row .post-card__cover { height: auto; width: 118px; flex-shrink: 0; }
.post-card--row .post-card__cover .post-cover__emoji { font-size: 42px; }
.post-card--row .post-card__body { padding: 15px 17px; }
.post-card--row .post-card__excerpt { -webkit-line-clamp: 2; font-size: 0.8125rem; margin-bottom: 12px; }

@media (max-width: 560px) { .related__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   LENYÍLÓ — a core Gutenberg Accordion blokk (WP 6.9+) öltöztetése
   Használat: a szerző a beépített „Harmonika” blokkot rakja le, mi csak
   stílusozzuk. Ugyanaz a döntés, mint a Táblázat blokknál: nincs saját markup,
   nincs GB pattern, nincs karbantartandó PHP — a nyit/zár logikát és a
   hozzáférhetőséget (aria-expanded, inert, billentyűkezelés) a core viszi.

   FORMA — iOS „inset grouped” lista: EGY lekerekített kártya, benne a sorok
   hajszálvonallal elválasztva, a vonal a szöveg vonaláról indul. Így a sorok
   egy listának látszanak, nem külön dobozoknak.

   A core CSS-e gyakorlatilag üres (box-sizing), amit ad, azt itt visszavesszük:
   a hover-aláhúzást (ez sor, nem link), és a 45°-ra forduló szöveges „+”-t
   (helyette chevron, ami irányt mutat). A nyitás magasság-animációját az
   accordion.js viszi: a core a zárt panelre display:none-t tesz, abból CSS-sel
   nincs átmenet, a beépített `transition: grid-template-rows` sosem fut le.
   ========================================================================== */
.wp-block-accordion {
  /* A NYITOTT sor háttere kontextusfüggő, ezért változó: a lap szürkéjén a
     csoport fehér, tehát a nyitott sor tónussal emelkedik ki; fehér
     prózakártyán belül pontosan fordítva. Egy helyen billen, nem
     szabályonként. A hover NEM ilyen: az translucens réteg, ami mindkét
     háttéren és nyitva-zárva egyaránt látszik. */
  --row-open: var(--base-3);
  margin: 2rem 0;
  background: var(--base-2);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-sm);
  /* clip és nem hidden: levágja a sarkokat, de nem nyit görgetés-kontextust */
  overflow: clip;
}
/* PRÓZAKÁRTYÁN BELÜL (jogi oldal, cikk): ott a szülő maga is fehér kártya,
   tehát a fehér lenyíló elolvad rajta, az árnyék meg csak piszkot rak két
   egymáson ülő fehér lap közé. A csoport itt halvány tónust és kirajzolt élt
   kap, a nyitott sor pedig fehéret — a világosabb felület jelzi, mi az aktív. */
.post-content__body .wp-block-accordion {
  --row-open: var(--base-2);
  background: var(--base-3);
  border: 1px solid var(--border);
  box-shadow: none;
}
/* a blokk flow-layoutja rést tenne a sorok közé; itt a hajszálvonal az
   elválasztó, nem a levegő */
.wp-block-accordion.is-layout-flow > .wp-block-accordion-item { margin-block: 0; }

.wp-block-accordion .wp-block-accordion-item {
  position: relative;
  transition: background-color .22s var(--ease-out);
}
/* A nyitott sor a fejlécével EGYÜTT vált hátteret, tehát a kérdés és a válasz
   egy összetartozó felület, nem két egymás alatti sáv. */
.wp-block-accordion .wp-block-accordion-item.is-open { background: var(--row-open); }
/* a vonal a sorok KÖZÉ kerül (az első fölé nem), és balról beljebb kezdődik */
.wp-block-accordion .wp-block-accordion-item + .wp-block-accordion-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 20px 0;
  height: 1px;
  background: var(--border);
}

/* — FEJSOR — */
.wp-block-accordion .wp-block-accordion-heading { margin: 0; }
.wp-block-accordion .wp-block-accordion-heading__toggle {
  gap: 16px;
  padding: 18px 20px;
  font-size: 1.0625rem;
  font-weight: 600;
  /* a betűköz mérethez kötött: ez a méret már fejsor, tehát enyhén szűkítve */
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--contrast);
  transition: background-color .18s var(--ease-out);
}
/* A GeneratePress a Testreszabóból MINDEN <button>-re ráteszi az accentet:
   `button:hover, button:focus { background-color: var(--accent-2) }`. Ez elem +
   pszeudo-osztály, tehát erősebb, mint a core `.toggle { background: none }`-ja
   — kattintás után a fókusz a fejsoron marad, és a sor zölden ragadt.
   A fejsor nem gomb-kinézetű elem, hanem listasor: itt visszavesszük. A hover
   és az :active a fájlban KÉSŐBB jön ugyanilyen súllyal, tehát azok nyernek. */
.wp-block-accordion .wp-block-accordion-heading__toggle,
.wp-block-accordion .wp-block-accordion-heading__toggle:focus,
.wp-block-accordion .wp-block-accordion-heading__toggle:focus-visible {
  background-color: transparent;
  color: var(--contrast);
}
.wp-block-accordion .wp-block-accordion-heading__toggle-title { text-align: left; }
@media (hover: hover) and (pointer: fine) {
  /* TRANSLUCENS réteg, nem tömör szín: ugyanaz a hover látszik a fehér
     csoporton, a szürkén és a már nyitott soron is, külön változó nélkül. */
  .wp-block-accordion .wp-block-accordion-heading__toggle:hover { background: rgba(13, 13, 20, 0.04); }
  .wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;   /* a core aláhúzása le */
  }
  .wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
    color: var(--contrast);
  }
  /* A chevron a MOZGÁS IRÁNYÁBA bök egyet: előre jelzi, mi fog történni, nem
     csak visszaigazolja, hogy a sor fölött vagy. Csak zárt soron — nyitva a
     fordulás mondja ugyanezt. */
  .wp-block-accordion .wp-block-accordion-item:not(.is-open) .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
    translate: 0 2px;
  }
}
/* A visszajelzés a LENYOMÁSRA jár, nem az elengedésre, és rövidebb görbén,
   hogy a szín az ujj alatt legyen, ne utána. */
.wp-block-accordion .wp-block-accordion-heading__toggle:active {
  background: rgba(13, 13, 20, 0.075);
  transition-duration: .06s;
}
/* a globális focus-gyűrű 2px-es offsetje itt a kártya éle alá esne */
.wp-block-accordion .wp-block-accordion-heading__toggle:focus-visible { outline-offset: -3px; }

/* — IKON — a core szöveges „+”-át elrejtjük (font-size:0), és chevront
     maszkolunk a helyére: a lefelé mutató nyíl azt mondja, van még lejjebb,
     nyitva felfelé fordul. A 45°-os core-forgatás helyett 180°. */
.wp-block-accordion .wp-block-accordion-item .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  flex-shrink: 0;
  width: 1.375rem; height: 1.375rem;
  font-size: 0;
  color: var(--contrast-3);
  /* Külön `rotate` és `translate`, NEM egy közös `transform`: két különböző
     dolog mozgatja őket, két különböző ütemben — a nyitás rugón fordít, a
     hover rövid kifutón bök. Egyetlen transformban ez nem szétválasztható.
     A négy osztály sem díszítés: a core háromosztályos szabálya `transform
     .2s`-re állítja az átmenetet, és akkor egyik sem animálna. */
  transition: rotate var(--spring-smooth-dur) var(--spring-smooth),
              translate .18s var(--ease-out),
              color .16s var(--ease-out);
}
.wp-block-accordion .wp-block-accordion-heading__toggle-icon::after {
  content: "";
  width: 100%; height: 100%;
  background: currentColor;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  -webkit-mask: var(--chevron) center / 100% 100% no-repeat;
          mask: var(--chevron) center / 100% 100% no-repeat;
}
/* öt osztály: a core négyosztályos szabályát kell megvernie, forrássorrendtől
   függetlenül (a blokk CSS-e inline style-ként ül a head-ben) */
.wp-block-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading .wp-block-accordion-heading__toggle .wp-block-accordion-heading__toggle-icon {
  transform: none;    /* a core 45°-a HOZZÁADÓDNA a rotate-hoz, ezért nullázzuk */
  rotate: 180deg;
}

/* — PANEL — */
.wp-block-accordion .wp-block-accordion-panel {
  /* A felső 10px nem díszítés: a fejsor hover-rétege a GOMB teljes dobozát
     befesti, és padding nélkül ez a szürke sáv közvetlenül a válasz első
     sorának ütközne. A térköz elválasztja a kettőt. */
  padding: 10px 20px 20px;
  color: var(--contrast-2);
  line-height: 1.65;
}
.wp-block-accordion .wp-block-accordion-panel > :first-child { margin-top: 0; }
.wp-block-accordion .wp-block-accordion-panel > :last-child { margin-bottom: 0; }
.wp-block-accordion .wp-block-accordion-panel :is(ul, ol) { padding-left: 1.25rem; }
.wp-block-accordion .wp-block-accordion-panel li + li { margin-top: .55rem; }
/* Záráskor a core azonnal inertté (display:none) tenné a panelt, az animációnak
   viszont kell még pár száz ezredmásodperc. Ez a class CSAK az animáció idejére
   tartja életben — az accordion.js teszi rá és veszi le. */
.wp-block-accordion .wp-block-accordion-panel.is-animating[inert],
.wp-block-accordion .wp-block-accordion-panel.is-animating[aria-hidden="true"] { display: block; }
.wp-block-accordion .wp-block-accordion-panel.is-animating { overflow: hidden; }

@media (max-width: 560px) {
  .wp-block-accordion .wp-block-accordion-heading__toggle { padding: 16px; font-size: 1rem; }
  .wp-block-accordion .wp-block-accordion-panel { padding: 8px 16px 16px; }
  .wp-block-accordion .wp-block-accordion-item + .wp-block-accordion-item::before { inset-inline: 16px 0; }
}
/* csökkentett mozgás: a chevron fordulása marad, csak nem rugón érkezik; a
   magasság-animációt a JS hagyja ki (ott átúszás lép a helyére) */
@media (prefers-reduced-motion: reduce) {
  /* ugyanaz a négyosztályos szelektor, mint fent — kisebbel nem verné meg */
  .wp-block-accordion .wp-block-accordion-item .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    transition: color .16s ease;
  }
}
/* emelt kontraszt: a hajszálvonal és a kártya éle kirajzolva */
@media (prefers-contrast: more) {
  .wp-block-accordion { border: 1px solid var(--contrast-2); }
  .wp-block-accordion .wp-block-accordion-item + .wp-block-accordion-item::before {
    background: var(--contrast-2); inset-inline: 0;
  }
}

/* ==========================================================================
   ÚJRAHASZNÁLHATÓ: ikon-badge (a .is-* színt fogyasztja: --c / --c-soft)
   Használat: <span class="icon-badge is-green">📞</span>
   ========================================================================== */
.icon-badge {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--c-soft, var(--base-3)); color: var(--c, var(--contrast));
  border: 1px solid color-mix(in srgb, var(--c, var(--border-hi)) 18%, transparent);
}
.icon-badge--sm { width: 38px; height: 38px; border-radius: 11px; font-size: 16px; }

/* ==========================================================================
   KAPCSOLAT OLDAL  (kapcsolat.html)

   Az oldal majdnem tisztán ÚJRAHASZNOSÍTÁS: a fej a .hero-card + .cover-fan
   (mint minden gyűjtőoldalé), a csatornák és a gyakorlati tudnivalók
   .icon-card-ok, a bolt pedig a főoldal „Nézd meg személyesen is” szekciója
   (.map-card + .oh-card). Ebben a blokkban ezért CSAK az él, amit a főoldal
   is használ. SAJÁT KOMPONENSE NINCS: minden osztálya máshonnan jön.

   TÖRÖLVE 2026-07-31 (a régi contact.html-lel együtt): .contact-stack,
   .contact-hero*, .contact-pill*, .info-card*, .transport-row, .t-pill,
   .alert-strip*, valamint a térkép alatti adatsáv (.map-card__footer,
   .map-item*, .map-links, .map-link). Mind KIZÁRÓLAG azon az egy oldalon
   szerepelt, tehát a GB Global CSS-be is halott kódként került volna be.
   A pirulák szerepét az .icon-card vette át, az .info-card sorait és a
   térkép-sávot pedig az .icon-card-ok és a lebegő .map-actions.
   ========================================================================== */

/* nyitvatartás kártya (oh = opening hours) */
.oh-card {
  /* A `display` KIMONDVA, pedig ez az alapérték. A GB Global CSS az .oh-card-on
     média-lekérdezés nélkül deklarál display + flex-direction párost; amit mi
     nem deklarálunk, azt nincs mit felülírnunk, tehát a betöltési sorrend sem
     segít rajta. Lásd wp/README.md, „hiányzó deklaráció" csapda.
     A sorok sima blokk-folyamban állnak: a köz a .oh-row saját paddingjából
     jön, egy flex-oszlop gap-je ezt megduplázná. */
  display: block;
  background: var(--base-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--sh-xs);
}
/* fejléc: cím balra, "Most nyitva / Most zárva" állapotjelző jobbra */
.oh-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.oh-status:empty { display: none; }
.oh-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--contrast-3); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.oh-title::before { content: ''; width: 14px; height: 1.5px; background: var(--contrast-3); opacity: .5; }
/* A sorok között SZÁNDÉKOSAN nincs elválasztó vonal: a hierarchiát a térköz és
   a súly adja, a mai nap pedig kitöltött pirulaként ül a listában (iOS-lista).
   A negatív margó miatt a szöveg így is egy vonalban marad a kártya címével. */
.oh-row {
  /* A padding VÁLTOZÓBAN, mert két helyen kell kimondani (lásd a lenti
     GB-visszavételt) — így az érték egy helyen él, és nem tud szétcsúszni. */
  --oh-row-pad: 7px 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: var(--oh-row-pad); margin-inline: -10px; border-radius: var(--r-md);
  /* A `border` KIMONDVA, pedig a semmi az alapérték: a GB Global CSS a kártya
     RÉGI, elválasztó-vonalas változatát tartalmazza, és `border-bottom`-ot ad az
     .oh-row-ra. Amit mi nem deklarálunk, azt nincs mit felülírni, tehát a
     betöltési sorrend sem segít rajta. Lásd wp/README.md, „hiányzó deklaráció". */
  border: 0;
  font-size: 0.875rem;
}
.oh-day { color: var(--contrast-2); display: inline-flex; align-items: center; gap: 7px; }
.oh-time { font-weight: 600; color: var(--contrast); font-variant-numeric: tabular-nums; }
.oh-time.is-closed { color: var(--contrast-3); font-weight: 400; }
/* A mai sor a .is-* színmodifikátorból veszi a kiemelést: nyitvatartási napon
   zöld, zárt napon (hétvége) semleges szürke — így a pulzáló pont sem ígér
   nyitvatartást ott, ahol nincs. */
.oh-row.is-today { background: var(--c-soft, var(--accent-soft)); }
/* a nyitott nap a friss márkazöldet kapja, ne a sötétebb --green 10%-át */
.oh-row.is-today.is-green { background: var(--accent-soft); }
.oh-row.is-today .oh-day, .oh-row.is-today .oh-time { color: var(--c, var(--green)); font-weight: 600; }
/* currentColor: a pirulában és a mai sorban is a szülő színét veszi fel */
.oh-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; box-shadow: 0 0 6px currentColor; animation: blink 2.2s ease-in-out infinite; }
/* zárt napon ne lüktessen és ne világítson */
.oh-dot--static { animation: none; box-shadow: none; }
/* ⚠️ SÚLY-VISSZAVÉTEL, nem stílus. A GB Global CSS-ben ez áll:
       .oh-card :last-child { border-bottom-style: none; padding-bottom: 0 }
   A régi, vonalas listához való (az utolsó sor alól szedte le a vonalat), de a
   szelektor a kártya MINDEN utolsó gyerekére hat, és 0,2,0 súlyú — vagyis erősebb
   a mi komponens-szabályainknál, tehát a betöltési sorrend nem fogja.
   Két helyen látszott: az UTOLSÓ SOR (Vasárnap) elvesztette az alsó paddingját,
   és a fejlécben ülő „Most nyitva" PIRULA is, amitől a szöveg aszimmetrikusan állt
   benne. Ugyanazon a súlyon (0,2,0) adjuk vissza, az eredeti értékekkel. */
.oh-card .oh-row { padding: var(--oh-row-pad); }
/* A pirulánál a `border-bottom-style` is kell: a .badge `border` shorthandje
   0,1,0-s, tehát a GB `none`-ja azt is leverte — a keret alul nyitva maradt. */
.oh-card .oh-status { padding: var(--badge-pad); border-bottom-style: solid; }
@media (prefers-reduced-motion: reduce) {
  .oh-dot { animation: none; }
}

/* térkép kártya — rácsban a sortársával azonos magasságra nyúlik, a térkép tölti ki */
.map-card { background: var(--base-2); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-sm); display: flex; flex-direction: column; }
.map-card__frame { flex: 1; min-height: 300px; background: var(--base-3); }
.map-card__frame iframe { width: 100%; height: 100%; border: none; display: block; }

/* CTA csík (sötét) */
.cta-card { background: linear-gradient(135deg, #15151D, #20202B); border-radius: var(--r-2xl); padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; box-shadow: var(--sh-lg); }
.cta-card__eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.cta-card__title { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.2; margin-bottom: 8px; }  /* 32px */
.cta-card__sub { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.65; max-width: 46ch; }
.cta-card__actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ── BESZÉLGETÉS-ELŐZETES CTA (.cta-card--chat) — kapcsolat.html ──────────────
   A záró lap a GYIK-re visz, ezért MEGMUTATJA, mi van a link mögött: egy igazi
   kérdés-válasz pár a gyakori-kerdesek.html szálából, annak a nyelvén. Nem
   ígéret a tartalomról, hanem minta belőle — a látogató a kattintás előtt látja,
   milyen hangon fog válaszolni valaki.
   VARIÁNS, nem átírás: a sima .cta-card-ot a cikk-sablon (single-post.html és az
   ÉLES wp/iberry-child/single-post.php) is használja, oda nem nyúlunk.
   Ami KIKERÜLT a variánsból: az eyebrow-sor (a címsor már megmondja, hol vagyunk)
   és a zöld, derengő .btn-primary. A gomb világos, tömör pirula: a sötét anyag a
   szerkezet, a világos anyag a teendő — a nehéz réteg határol, a könnyű hív.
   Így a zöld EGY dolgot jelent ezen a lapon: a látogató buborékját.

   MIÉRT SAJÁT BUBORÉK-OSZTÁLYOK, ha a GYIK-nek már van: a .faq-item__* buborékok
   harmonikához vannak kötve (magasság-animáció, aria-expanded, .is-open) és
   VILÁGOS lapra vannak színezve. Itt statikus, kétdarabos előzetes kell SÖTÉT
   lapon. A geometria viszont szándékosan azonos (ugyanazok a sugár-tokenek és a
   tüske helye), hogy ugyanannak a beszélgetésnek látszódjon. */
/* Balra a mondanivaló és a teendő, jobbra a beszélgetés: a szem balról indul,
   tehát előbb az ajánlat, utána a minta belőle. A szöveg-hasáb a szélesebb. */
.cta-card--chat {
  grid-template-columns: 1fr minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 52px);
}
@media (max-width: 900px) {
  .cta-card--chat { grid-template-columns: 1fr; }
}
/* A címsor itt nagyobb és feszesebb: nagy méretben a betűk optikailag
   széttartanak, ezért NEGATÍV tracking és rövidebb sorköz. */
/* A margó KIMONDVA: itt a címsor igazi <h2>, a leírás igazi <p> (a sima
   .cta-card-on mindkettő <div> volt), tehát megkapnák a böngésző alapmargóit —
   és a GB Global CSS-ben is él rájuk saját margó. */
.cta-card--chat .cta-card__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 12px;
}
/* A leírás egy fokkal nagyobb és egy fokkal vastagabb, mint a sima .cta-card-on
   (0.875rem/400 → 1rem/500). Sötét felületen a vékony, halvány szöveg elúszik:
   a súly ott ad jelenlétet, ahol a méret még nem akar hangosabb lenni. */
.cta-card--chat .cta-card__sub {
  margin: 0; font-size: 1rem; font-weight: 500;
  color: rgba(255,255,255,0.72);
}
.cta-card--chat .cta-card__actions { margin-top: 1.75rem; }
/* A gomb pirula és nagyobb, mint a rendszer alapgombja: ez a lap egyetlen
   teendője, tehát legyen egy mérettel hangosabb. Az árnyékot levesszük — fehér
   lap sötét felületen magától is előre ugrik, a lágy vetett árnyék csak
   elmosná az élét. */
.cta-card--chat .btn {
  border-radius: var(--r-pill); padding: 13px 24px; font-size: 1rem;
  box-shadow: none;
}
.cta-card--chat .btn svg { transition: translate .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cta-card--chat .btn:hover svg { translate: 3px 0; }
}

/* — a két buborék — */
.cta-chat { display: flex; flex-direction: column; gap: 10px; }
.cta-chat__ask {
  align-self: flex-end; max-width: 88%; margin: 0;
  padding: 11px 18px;
  border-radius: var(--r-2xl) var(--r-2xl) var(--r-xs) var(--r-2xl);
  background: var(--accent); color: var(--accent-fg);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.5;
}
.cta-chat__reply { display: flex; align-items: flex-end; gap: 10px; max-width: 92%; }
.cta-chat__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(255,255,255,0.10);
}
/* A válasz-buborék áttetsző FEHÉR, nem a --base világosszürkéje: az sötét lapon
   egy vakító folt lenne. Az áttetsző réteg a lap saját anyagából épül, ezért
   együtt él vele. A szöveg viszont majdnem teli fehér — áttetsző felületen a
   halvány szürke elveszne. */
.cta-chat__bubble {
  margin: 0; padding: 11px 18px;
  border-radius: var(--r-2xl) var(--r-2xl) var(--r-2xl) var(--r-xs);
  background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.92);
  font-size: 0.9375rem; line-height: 1.6;
}

/* A SZÁL FOLYTATÓDIK — a következő kérdések elhalnak lefelé.
   MASZK, nem soronkénti opacity: a maszk a doboz aljáig folyamatosan visz le,
   tehát az utolsó buborék félbevágva tűnik el, mint egy görgethető lista alja.
   Három egyforma, fokozatosan halványított buborék helyette lépcsőnek látszana,
   és az „itt vége" érzetet keltené — épp az ellenkezőjét annak, amit mond.
   `pointer-events: none`: néma díszlet, nem lehet rákattintani. */
.cta-chat__more {
  display: flex; flex-direction: column; gap: 10px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 86%);
  pointer-events: none;
}

/* ÉRKEZÉS — a két buborék akkor pattan be, amikor a lap képbe ér, nem
   oldalbetöltéskor: a CTA a lap alján van, ott a betöltéskori animáció
   vakon futna le. A `js` osztály nélkül (JS kikapcsolva) MINDKÉT buborék
   egyszerűen látszik — a mozgás ráadás, nem feltétel.
   A buborék a SAJÁT TÜSKÉJÉBŐL nő ki (transform-origin), ahogy a GYIK-szálban:
   onnan érkezik, ahol a formája is mutatja. Rugó: --spring-pop (~9% túllövés),
   mert kicsi, önmagában álló elem érkezéséről van szó.
   A válasz KÉSIK egy kicsit a kérdés után: ez a beszélgetés ritmusa, nem
   dekoráció — előbb kérdezel, aztán válaszolnak. */
/* A `>` nem cifrázás: a .cta-chat__ask a folytatás-blokkban IS szerepel, és ha
   az is pattanna, három ugrás menne egymás után. A háttér-textúra nem pattan. */
.js .cta-card--chat .cta-chat > .cta-chat__ask,
.js .cta-card--chat .cta-chat__reply,
.js .cta-card--chat .cta-chat__more { opacity: 0; }
.cta-card--chat.is-inview .cta-chat > .cta-chat__ask,
.cta-card--chat.is-inview .cta-chat__reply {
  animation: cta-bubble-pop var(--spring-pop-dur, .51s) var(--spring-pop) both;
}
.cta-card--chat.is-inview .cta-chat > .cta-chat__ask { transform-origin: right bottom; }
.cta-card--chat.is-inview .cta-chat__reply { transform-origin: left bottom; animation-delay: .18s; }
/* A folytatás CSAK ÁTTŰNIK, nem pattan: ez a szál háttere, nem egy megérkező
   üzenet. És utoljára jön, amikor a beszélgetés már lezajlott. */
.cta-card--chat.is-inview .cta-chat__more {
  animation: cta-more-fade .5s var(--ease-out) .38s both;
}
@keyframes cta-bubble-pop {
  from { opacity: 0; scale: 0.9; }
  to   { opacity: 1; scale: 1; }
}
@keyframes cta-more-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .cta-card--chat .cta-chat > .cta-chat__ask,
  .js .cta-card--chat .cta-chat__reply,
  .js .cta-card--chat .cta-chat__more { opacity: 1; }
  .cta-card--chat.is-inview .cta-chat > .cta-chat__ask,
  .cta-card--chat.is-inview .cta-chat__reply,
  .cta-card--chat.is-inview .cta-chat__more { animation: none; }
}
/* A 640px-es alapszabály a sima .cta-card-ot középre zárja. A beszélgetés ott
   nem középre igazodik: a buborékok bal/jobb oldali helye MAGA a jelentés
   (ki mondja), középre húzva elveszne. */
@media (max-width: 640px) {
  .cta-card--chat, .cta-card--chat .cta-card__title { text-align: left; }
  .cta-card--chat .cta-card__actions { justify-content: flex-start; }
}
.btn-ghost { background: transparent; color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.22); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
}
@media (max-width: 640px) { .cta-card { grid-template-columns: 1fr; text-align: center; } .cta-card__title { font-size: 1.5rem; } .cta-card__actions { justify-content: center; } }  /* 24px */

/* ==========================================================================
   ÚJRAHASZNÁLHATÓ: kép-/ikon-placeholder (cseréld a saját SVG-re/képre)
   ========================================================================== */
.img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--base-3); border: 1.5px dashed var(--border-hi); border-radius: var(--r-lg);
  color: var(--contrast-3); font-size: 0.6875rem; font-weight: 500; line-height: 1.3;
}

/* ==========================================================================
   ÚJRAHASZNÁLHATÓ: üres állapot (üres kosár, üres keresés, 404…)
   ========================================================================== */
.empty-state {
  max-width: 540px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 44px);
}
.empty-state__icon { width: 120px; height: 120px; margin-bottom: 22px; }
.empty-state__icon .img-placeholder { width: 100%; height: 100%; border-radius: var(--r-2xl); }
.empty-state__title { margin-bottom: 10px; }
.empty-state__text { font-size: 1rem; color: var(--contrast-2); line-height: 1.7; max-width: 40ch; margin: 0 auto 26px; }
.empty-state__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.empty-state__divider { width: 100%; height: 1px; background: var(--border); margin: 4px 0 22px; }

/* ==========================================================================
   ÚJRAHASZNÁLHATÓ: űrlap input + mennyiség-léptető
   ========================================================================== */
.input {
  width: 100%; padding: 11px 13px; border-radius: var(--r-md);
  border: 1.5px solid var(--border-hi); background: var(--base-2);
  font-family: inherit; font-size: 0.875rem; color: var(--contrast);
  outline: none; transition: border-color .18s, box-shadow .18s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--contrast-3); }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-hi); border-radius: var(--r-md); overflow: hidden; background: var(--base-2); }
.qty-stepper__btn { width: 30px; height: 34px; border: none; background: transparent; color: var(--contrast-2); font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
@media (hover: hover) and (pointer: fine) {
  .qty-stepper__btn:hover { background: var(--base-3); color: var(--contrast); }
}
.qty-stepper__input { width: 38px; height: 34px; border: none; border-inline: 1px solid var(--border); text-align: center; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--contrast); background: var(--base-2); -moz-appearance: textfield; }
.qty-stepper__input::-webkit-outer-spin-button, .qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   KOSÁR  (cart.html + cart-empty.html — egy Woo Cart blokk sablon)
   ========================================================================== */
.cart-title { margin-bottom: clamp(20px, 3vw, 28px); }

/* teli kosár: tételek + összesítő (Woo: filled-cart-block) */
.cart-layout { display: grid; grid-template-columns: 1fr minmax(320px, 360px); gap: var(--sp-5); align-items: start; }

.cart-items { background: var(--base-2); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: 6px 22px; }
.cart-head { display: grid; grid-template-columns: 72px 1fr auto auto 28px; gap: 14px; padding: 14px 0 10px; border-bottom: 1px solid var(--border); font-size: 0.625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--contrast-3); }
.cart-head span:nth-child(3), .cart-head span:nth-child(4) { text-align: right; }

.cart-item { display: grid; grid-template-columns: 72px 1fr auto auto 28px; grid-template-areas: "media info qty total remove"; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-item:last-child { border-bottom: none; }
.cart-item__media { grid-area: media; align-self: start; }
.cart-item__media .img-placeholder, .cart-item__media img { width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; }
.cart-item__info { grid-area: info; }
.cart-item__title { font-size: 0.9375rem; font-weight: 600; color: var(--contrast); line-height: 1.3; margin-bottom: 6px; }
.cart-item__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cart-item__unit { font-size: 0.75rem; color: var(--contrast-3); margin-top: 5px; }
.cart-item__qty { grid-area: qty; }
.cart-item__total { grid-area: total; font-size: 0.9375rem; font-weight: 700; color: var(--contrast); white-space: nowrap; text-align: right; }
.cart-item__remove { grid-area: remove; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--base-3); border: 1px solid var(--border); color: var(--contrast-3); font-size: 14px; cursor: pointer; transition: all .15s; }
@media (hover: hover) and (pointer: fine) {
  .cart-item__remove:hover { color: var(--red); border-color: rgba(204,16,48,.25); background: rgba(204,16,48,.06); }
}

/* összesítő (Woo: cart-totals / order-summary + proceed-to-checkout) */
.cart-summary { background: var(--base-2); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: 22px 24px; position: sticky; top: 24px; }
.cart-summary__title { font-size: 1rem; font-weight: 600; margin-bottom: 14px; }
.cart-summary__row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 0.875rem; color: var(--contrast-2); border-bottom: 1px solid var(--border); }
.cart-summary__row > span:last-child { color: var(--contrast); font-weight: 500; }
.cart-summary__row--total { border-bottom: none; margin-top: 4px; padding-top: 14px; }
.cart-summary__row--total > span { color: var(--contrast); font-weight: 700; }
.cart-summary__big { font-size: 1.25rem; }
.cart-coupon { display: flex; gap: 8px; margin: 14px 0; }
.cart-coupon .input { flex: 1; }
.cart-summary .btn-primary { width: 100%; margin-top: 6px; }
.cart-summary__note { font-size: 0.75rem; color: var(--contrast-3); text-align: center; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }

@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } }
@media (max-width: 560px) {
  .cart-head { display: none; }
  .cart-item { grid-template-columns: 64px 1fr auto; grid-template-areas: "media info remove" "media qty total"; gap: 8px 12px; }
  .cart-item__media .img-placeholder, .cart-item__media img { width: 64px; height: 64px; }
  .cart-item__qty { align-self: center; margin-top: 6px; }
  .cart-item__total { align-self: center; }
}

/* ============================================================
   JOGI / SZÖVEGES OLDAL (Impresszum, ÁSZF, Adatvédelem)
   Újrahasznál: .shell--narrow + .post-content prose
   ============================================================ */
.legal-head { margin-bottom: 22px; }
.legal-head .eyebrow { margin-bottom: 10px; }
.legal-head h1 { margin: 0; }
.legal-head__updated { font-size: 0.8125rem; color: var(--contrast-3); margin: 8px 0 0; }

/* ============================================================
   LÁBLÉC (footer) — egyszerű, reszponzív
   ============================================================ */
/* SÖTÉT lap, ugyanabban a színben, mint a fejléc sávja (#0D0D14): a kettő így
   közrefogja az oldalt, a fehér kártyás tartalom pedig határozottan ül köztük.
   Nincs felső keret és nincs külön felső margó sem: az utolsó szekció saját
   alsó paddingja adja a levegőt, a sötét él önmagában elég erős határ. */
.site-footer { background: var(--surface-dark); color: #fff; }
.site-footer .shell { padding-block: clamp(48px, 6vw, 72px); }

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}

.footer-brand__logo { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.footer-brand__text { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.65; color: rgba(255, 255, 255, 0.58); max-width: 34ch; }

.footer-col__title {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42); margin-bottom: 14px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color .15s;
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: var(--accent); }
}

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.75rem; color: rgba(255, 255, 255, 0.42);
}

/* A három linkoszlop TELEFONON IS KETTŐ marad: egy oszlopban a lábléc
   végtelen görgetéssé nyúlna, és a linkek listája elveszítené a csoportjait.
   A márka-blokk viszi a teljes sort, alatta 2×2 rácsban ül a Jogi, a
   Vásárlás és az iBerry (az utolsó cella üres). A 24px oszlopköz a legkeskenyebb
   (320px) képernyőn is hagy ~130px-t egy oszlopnak, ami a leghosszabb
   linkfeliratnak (Adatkezelési tájékoztató) két sor. */
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  .footer-bottom { justify-content: flex-start; }
}

/* ==========================================================================
   ÚJRAHASZNÁLHATÓ: kép-kártya (image-card, 400×500) + ikon-kártya (icon-card)
   ALAP: csak lágy árnyék, NINCS hover és NINCS mozgás (nem várunk akciót).
   LINK-VÁLTOZAT: tedd rá a `--link` modifiert → hover-nél felfelé mozdul +
   erősebb árnyék. Ilyenkor a kártya gyökere <a> legyen (egész doboz kattintható).
   Az ikon színét a `.is-*` util adja (a --c változón át); alap az accent.
   ========================================================================== */

/* — KÉP-KÁRTYA (fix 400×500, mobilon 450 magas és rugalmas szélességű) — */
.image-card {
  display: flex; flex-direction: column;
  width: 400px; max-width: 100%; height: 500px;
  background: var(--base-2); border: none;
  border-radius: var(--r-3xl); overflow: hidden;
  box-shadow: var(--sh-md);
}
/* MOBIL: 450px. Ugyanaz a 640px-es töréspont, ahol a scroller 80%-os kártyákra
   vált: a keskenyebb kártya mellé az 500px túl nyújtottnak hatott, és a szekció
   alatti tartalomból is túl keveset engedett látszani. */
@media (max-width: 640px) {
  .image-card { height: 450px; }
}
.image-card__body { padding: clamp(26px, 3.4vw, 36px) clamp(26px, 3.4vw, 36px) 0; }
/* cím + badge egy sorban (badge jobbra); a badge opcionális */
.image-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.image-card__eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.image-card__title { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; color: var(--contrast); margin-bottom: 6px; }
.image-card__sub { font-size: 0.9375rem; font-weight: 500; color: var(--contrast-2); line-height: 1.55; }  /* 15px */
.image-card__media { margin-top: auto; position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.image-card__img { width: 100%; height: 100%; object-fit: cover; }
/* KIVÁGOTT termékfotó (átlátszó hátterű PNG/WebP): teljes egészében látszódjon,
   ne vágja a keret — szemben az alap változattal, ami háttérképként kitölt.
   Középre igazítva, hogy 1:1 arányú képnél a termék pontosan a szirom-legyező
   közepére essen (a .petal-fan is a médiaterület közepén ül). */
.image-card__img--product {
  object-fit: contain;
  object-position: center;
  width: 67%;
  height: 67%;
  margin: auto;   /* flex-elemen mindkét tengelyen középre tesz, felülírva a
                     .image-card__media align-items:flex-end igazítását */
}
/* sötét változat (mint az iPhone 17 Pro kártya) — egyetlen összefüggő felület */
.image-card--dark { background: #0D0D14; }
.image-card--dark .image-card__title { color: #fff; }
.image-card--dark .image-card__sub { color: rgba(255,255,255,0.62); }
/* LINK-változat: nyugalom-állapot lágy árnyék; hover-lift; press-feedback.
   Response (Emil/Apple): pointer-down-ra azonnali scale-visszajelzés. */
.image-card--link { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.image-card--link:active { transform: scale(0.985); transition-duration: .12s; }
@media (hover: hover) and (pointer: fine) {
  .image-card--link:hover { transform: translateY(-6px); box-shadow: var(--sh-xl); }
  .image-card--link:hover:active { transform: translateY(-6px) scale(0.985); }
}

/* — SZIROM-LEGYEZŐ (petal-fan) — kirajzolódó, virágszerű SVG háttér a kártya
   médiaterületére, sárga-narancs skálán (az Apple termékkártyák „kinyíló
   szirom" motívuma). Hét lekerekített téglalap, mindegyik a középpont FÖLÉ
   rajzolva, majd a középpont körül elforgatva — így kifelé sugároznak, mint egy
   valódi virág szirmai. (Ha a szirmok a saját közepük körül forognának, csak
   egymásra torlódnának, és szabályos körlapot adnának.) A méretük és a szögük
   is szándékosan egyenetlen, ettől lesz szirmos a sziluett, nem kör.
   Betöltéskor mindegyik a 0 fokos alaphelyzetből, a középpontba zsugorítva
   forog a helyére, egymás után lépcsőzve, ettől „nyílik ki".
   MARKUP: a .image-card__media-be, a kép ELÉ (DOM-ban előbb → alatta rajzolódik).
   A kártya overflow:hidden-je vágja a szélét, ahogy az Apple-nél is.          */
.petal-fan {
  position: absolute;
  inset: 0;
  margin: auto;                /* inset:0 + margin:auto + fix méret → középre */
  width: 88%;
  max-width: 330px;
  aspect-ratio: 1;
  pointer-events: none;        /* dekoráció: ne fogja el a kattintást a kártyáról */
}
.petal-fan__petal {
  /* A forgatás a RAJZTERÜLET közepe körül történik, nem a sziromén: így a
     középpont fölé rajzolt téglalapok kifelé nyílnak.
     FIGYELEM: a viewBox ezért indul 0 0-ról és nem -150 -150-ről. Negatív
     viewBox-kezdettel a böngészők nem egyformán oldják fel a transform-origin-t
     (van, amelyik a viewport sarkához méri), és a szirmok rossz pont körül
     fordulnak el, majd kicsúsznak a rajzterületről. 0-alapú koordinátákkal a
     150px 150px egyértelműen a 300×300-as rajz közepe. */
  transform-box: view-box;
  transform-origin: 150px 150px;
  opacity: 0;
  rotate: var(--r);
  --o: .48;               /* nyugalmi áttetszőség, minden sziromnál azonos */
  animation: petal-bloom var(--art-dur) cubic-bezier(0.34, 1.28, 0.64, 1) forwards;
  animation-delay: calc(var(--i) * var(--art-step));
}
@keyframes petal-bloom {
  /* a scale is a középpont körül hat, tehát a szirom a közepéből nő ki */
  from { opacity: 0;        rotate: 0deg;     scale: .3; }
  to   { opacity: var(--o); rotate: var(--r); scale: 1; }
}
@keyframes petal-appear {
  from { opacity: 0; }
  to   { opacity: var(--o); }
}
/* EGYENLETES szögosztás: 8 szirom pontosan 45 fokonként. A korábbi, szándékosan
   egyenetlen osztás rendetlennek és nem szándékosnak látszott, ezért a
   szabálytalanságot már csak a szirmok eltérő HOSSZA adja, a szögük nem.
   Az áttetszőség is egységes (a base szabályban): a szirmok színe most
   citromsárgából halad narancsba, és ezt a menetet a szirmonként ugráló
   fedettség összekuszálná. A mélységet így is az átfedések adják, mert nyolc
   féligáteresztő réteg épül egymásra a közép felé. */
.petal-fan__petal:nth-child(1) { --i: 0; --r:   0deg; }
.petal-fan__petal:nth-child(2) { --i: 1; --r:  45deg; }
.petal-fan__petal:nth-child(3) { --i: 2; --r:  90deg; }
.petal-fan__petal:nth-child(4) { --i: 3; --r: 135deg; }
.petal-fan__petal:nth-child(5) { --i: 4; --r: 180deg; }
.petal-fan__petal:nth-child(6) { --i: 5; --r: 225deg; }
.petal-fan__petal:nth-child(7) { --i: 6; --r: 270deg; }
.petal-fan__petal:nth-child(8) { --i: 7; --r: 315deg; }
/* a kép/placeholder a szirmok és a kártya-grafikák FÖLÖTT marad */
.image-card__media > .img-placeholder,
.image-card__media > .image-card__img { position: relative; z-index: 1; }

/* — KÁRTYA-GRAFIKA (card-art) — statikus, dekoratív SVG-háttér a kép-kártya
   médiaterületén, a termékfotó MÖGÖTT. A szirom-legyezővel ellentétben nem
   animált: a motívum dolga csak annyi, hogy megelőlegezze a hangulatot
   (bolygó, füzetlap, processzor, pulzus), ne vonja el a figyelmet a fotóról.
   FELÉPÍTÉS — ugyanaz az elv, mint a szirom-legyezőnél: sok, önmagában nagyon
   halvány forma egymásra rétegezve, és az ÁTFEDÉSEIK számából épül fel a
   mélység. Nincs blur és nincs színátmenetes „folt": ahol sűrűbb a rétegzés,
   ott mélyebb a szín. Ha halkítani kell egy motívumot, a rétegek darabszámát
   vagy a csoport egyetlen fill-opacity értékét vedd vissza, ne rakj rá szűrőt.
   MARKUP: a .image-card__media első gyereke, a kép/placeholder ELÉ.
   SZÍN: a rajz mindenütt `currentColor`-t használ, az árnyalatot az alábbi
   modifierek `color`-ja adja — így egy sorban hangolható, és nem kell a
   HTML-ben hexet keresgélni. Az áttetszőséget az SVG-ben lévő *-opacity
   attribútumok szabják, motívumon belül rétegenként. */
.card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* dekoráció: a kattintás a kártyáé */
}
/* Az iPhone-kártya csillaga nem kap modifiert: a kozmosznarancs skáláját
   ágankénti saját hexekkel viszi az SVG, ahogy a szirom-legyező is. */
.card-art--doodle { color: #4B6BE5; }  /* iPad — firka, tinta-kék */
.card-art--bolt  { color: #0A84FF; }   /* MacBook — áram, elektromos kék */
.card-art--glow  { color: #FF2D63; }   /* Watch — pulzus-fény, pirosas pink */

/* — A GRAFIKÁK BEÚSZÁSA —
   A kaotikus betöltés ellen NÉGY szabály, mind az öt kártyára egyformán:
   1) MINDEGYIK a lap betöltésekor indul, egyszerre. Nincs véletlen késleltetés,
      nincs egymásra várás, tehát a kártyák egy mozdulatnak látszanak.
   2) EGY görbe (--ease-out) és EGY alapidő (--art-dur) mindenhol. Kivétel csak
      a szirom-legyező, ami visszapattanó görbét kap, mert az nyílik.
   3) Ahol több elem van egy motívumon belül, ott ugyanaz a --art-step lépcső
      viszi őket, ugyanabban a sorrendben, ahogy a DOM-ban állnak.
   4) Semmi nem ismétlődik: minden animáció `both`, tehát a végállapotban megáll
      és ott is marad. Loop nincs, mert az elvinné a figyelmet a termékről.
   MÓD szerint viszont mindegyik a saját szerkezetéhez illik: a foltok nőnek,
   a firka kirajzolódik, a kisülés kicsap, a fény felizzik. */
@keyframes art-fade   { from { opacity: 0; }              to { opacity: 1; } }
@keyframes art-grow   { from { scale: .84; }              to { scale: 1; } }
@keyframes art-rise   { from { opacity: 0; scale: .78; }  to { opacity: 1; scale: 1; } }
@keyframes art-draw   { from { stroke-dashoffset: 1; }    to { stroke-dashoffset: 0; } }
@keyframes art-strike { from { opacity: 0; scale: .1 1; } to { opacity: 1; scale: 1 1; } }

/* iPhone — a színfolt-csoport egyben nő a helyére, a korongok egyenként
   úsznak be, DOM-sorrendben lépcsőzve */
.card-art--blobs > g {
  transform-box: view-box; transform-origin: 150px 150px;
  animation: art-grow var(--art-dur) var(--ease-out) both;
}
.card-art--blobs circle { animation: art-fade var(--art-dur) var(--ease-out) both; }
.card-art--blobs circle:nth-child(2) { animation-delay: calc(var(--art-step) * 1); }
.card-art--blobs circle:nth-child(3) { animation-delay: calc(var(--art-step) * 2); }
.card-art--blobs circle:nth-child(4) { animation-delay: calc(var(--art-step) * 3); }
.card-art--blobs circle:nth-child(5) { animation-delay: calc(var(--art-step) * 4); }

/* iPad — a satír úgy jelenik meg, ahogy rajzolnák: a vonal a saját hossza
   mentén fut ki. A pathLength="1" miatt a hossz mindig 0..1, tehát a
   dasharray nem függ attól, mekkora épp az útvonal — ha átrajzolod a firkát,
   itt nem kell újraszámolni semmit. Hosszabb idő, mert egyetlen vonal
   hét fordulóját kell végigmennie. */
.card-art--doodle path {
  stroke-dasharray: 1;
  animation: art-draw calc(var(--art-dur) * 2) var(--ease-out) both;
}

/* MacBook — a sugarak egyesével csapnak ki a közös forrásból, legyező-sorrendben.
   Az `art-strike` csak x-ben nyújt, tehát a sugár a SAJÁT tengelye mentén nő ki,
   nem oldalról lapul be. Ez azért működik, mert a forgatás a szülő <g>-n ül: a
   téglalap a maga vízszintes rendszerében marad, és a 292 282 fixpont a forgatás
   középpontja is egyben, tehát forgatás után is ugyanoda esik. */
.card-art--bolt rect {
  transform-box: view-box; transform-origin: 292px 282px;
  animation: art-strike var(--art-dur) var(--ease-out) both;
}
.card-art--bolt > g > g:nth-child(2) rect { animation-delay: calc(var(--art-step) * 1); }
.card-art--bolt > g > g:nth-child(3) rect { animation-delay: calc(var(--art-step) * 2); }
.card-art--bolt > g > g:nth-child(4) rect { animation-delay: calc(var(--art-step) * 3); }
.card-art--bolt > g > g:nth-child(5) rect { animation-delay: calc(var(--art-step) * 4); }
.card-art--bolt > g > g:nth-child(6) rect { animation-delay: calc(var(--art-step) * 5); }

/* Watch — a hullám a magból indul és gyűrűnként fut kifelé. A lépcsőzés
   sorrendje a DOM-sorrend, ami itt egyben a sugár szerinti sorrend is, tehát a
   mozgás iránya magától kifelé mutat. A magon nincs késleltetés: az adja a
   dobbanást, amit a gyűrűk követnek. */
.card-art--glow circle {
  transform-box: view-box; transform-origin: 150px 150px;
  animation: art-rise var(--art-dur) var(--ease-out) both;
}
.card-art--glow g circle:nth-child(1) { animation-delay: calc(var(--art-step) * 1); }
.card-art--glow g circle:nth-child(2) { animation-delay: calc(var(--art-step) * 2); }
.card-art--glow g circle:nth-child(3) { animation-delay: calc(var(--art-step) * 3); }
.card-art--glow g circle:nth-child(4) { animation-delay: calc(var(--art-step) * 4); }

/* — MÉRSÉKELT MOZGÁS —
   SZÁNDÉKOSAN a fenti animáció-réteg UTÁN áll, nem a komponensek mellett.
   A media query nem ad súlyt, tehát ha ez a blokk előrébb lenne, minden utána
   következő `.card-art--*` szabály felülírná, és a mérséklés némán hatástalan
   maradna. Itt viszont mindent visz, amit semlegesíteni akar.
   Nincs forgás, nyúlás és kirajzolódás, csak halk áttűnés, mind egyszerre.
   A lépcsőzést is elvesszük: aki ezt kéri, annak a sorban felvillanó elemek
   ugyanolyan zavaróak, mint maga a mozgás. */
@media (prefers-reduced-motion: reduce) {
  .petal-fan__petal { animation: petal-appear .4s ease forwards; animation-delay: 0s; }
  .card-art--blobs > g { animation: none; }
  .card-art--doodle path { stroke-dasharray: none; }
  .card-art--blobs circle,
  .card-art--doodle path,
  .card-art--bolt rect,
  .card-art--glow circle { animation: art-fade .4s ease both; animation-delay: 0s; scale: 1; }
  /* A lépcsőzést nagyobb súlyú szabályok adják (a sugaraknál 0,2,3, a gyűrűknél
     0,2,2), ezért a fenti 0,1,1-es nullázás nem érné el őket: külön kell. */
  .card-art--bolt > g > g:nth-child(n) rect,
  .card-art--glow g circle:nth-child(n) { animation-delay: 0s; }
}

/* — INDÍTÁS CSAK AKKOR, AMIKOR A KÁRTYA KÉPBE ÉR —
   Az animációk fent már definiálva vannak, itt csak MEGÁLLÍTJUK őket a
   kezdőképkockán, és a lap alján lévő IntersectionObserver engedi el
   kártyánként (`is-inview`). Így a vízszintes sávban jobbra álló kártyák
   mozgása nem fut le vakon, mielőtt bárki látná.
   A `.js` kapu létfontosságú: JS nélkül nem kerülne rá az `is-inview`, tehát
   a megállított animáció örökre a 0%-on maradna, és a grafika végleg
   láthatatlan lenne. Így viszont JS nélkül egyszerűen a régi viselkedés marad
   (betöltéskor lefut), ami rosszabb ütemezés, de látható eredmény. */
.js .image-card .petal-fan__petal,
.js .image-card .card-art * { animation-play-state: paused; }
.js .image-card.is-inview .petal-fan__petal,
.js .image-card.is-inview .card-art * { animation-play-state: running; }

/* — IKON-KÁRTYA (ikon + cím + szöveg) — */
.icon-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: clamp(24px, 3vw, 30px);
  box-shadow: var(--sh-sm);
}
.icon-card__icon { font-size: 46px; line-height: 1; color: var(--c, var(--accent)); }
.icon-card__icon svg { width: 1em; height: 1em; display: block; }
.icon-card__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--contrast); line-height: 1.3; }
.icon-card__text { font-size: 0.875rem; color: var(--contrast-2); line-height: 1.65; }
.icon-card__text strong { color: var(--contrast); font-weight: 600; }
/* kiemelt bevezető színnel (mint az Apple kártyák kétszínű szövege) — a .is-* --c-t fogyasztja */
.icon-card__lead { color: var(--c, var(--accent)); font-weight: 600; }
/* LINK-változat: hover-lift + press-feedback (ugyanaz a nyelv, mint az image-card) */
.icon-card--link { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.icon-card--link:active { transform: scale(0.985); transition-duration: .12s; }
@media (hover: hover) and (pointer: fine) {
  .icon-card--link:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
  .icon-card--link:hover:active { transform: translateY(-4px) scale(0.985); }
}

/* reduced-motion: marad a visszajelzés (árnyék), de mozgás nélkül */
@media (prefers-reduced-motion: reduce) {
  .image-card--link, .icon-card--link { transition: box-shadow .2s ease; }
  .image-card--link:hover, .icon-card--link:hover,
  .image-card--link:active, .icon-card--link:active { transform: none; }
}

/* ==========================================================================
   ÚJRAHASZNÁLHATÓ: vízszintes görgető (scroller) — Apple Store „shelf" logika.
   A kártyák NEM törnek több sorba: egy sorban maradnak, trackpaddel és
   touchszal natívan görgethetők, egérrel pedig grab/drag-gel is (scroller.js).
   • ASZTAL: a kártya fix szélessége/oszlop-aránya szerint fér ki több kártya,
     a többi a tartalomoszlopon belül görgethető (contained, nem lóg ki).
     Ha a szekciónak a képernyő széléig kell kifutnia, a .scroller-wrap--bleed
     változat kell — ld. lent.
   • MOBIL: 1 kártya 80% széles, hogy kilátszódjon a következő (peek).
   • Hogy van még kártya arra, azt — az Apple Store mintájára — a levágott
     szélső kártya + a ‹›-nyilak jelzik, NEM fade-maszk. A JS (scroller.js)
     kapcsolja az .at-start/.at-end class-t, ez rejti a szélén a nyilat.
   Bármilyen kártya mehet bele közvetlen gyerekként (image-card, icon-card,
   post-card, product-card stb.). A rejtett görgetősáv az Apple-féle tiszta
   megjelenést adja.
   MARKUP: <div class="scroller-wrap">
             <button class="scroller-nav scroller-nav--prev">…</button>
             <div class="scroller">…kártyák…</div>
             <button class="scroller-nav scroller-nav--next">…</button>
           </div>
   ========================================================================== */
.scroller-wrap { position: relative; }

/* ‹›-nyíl (Apple Store shelf-nyíl) — kártyasornyit lapoz, eltűnik a szélen.
   Ugyanaz a sötét üveg-anyag, mint a görgetett fejléc-notch-é: a --glass és a
   --glass-blur egy forrásból jön mindkettőhöz, tehát nem tudnak elcsúszni. */
.scroller-nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; padding: 0; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: none;
  box-shadow: var(--sh-2xl);
  color: #fff;                    /* a sötét üvegen világos nyíl */
  z-index: 3;
  transition: opacity .35s var(--ease-out),
              background-color .18s linear,
              scale .15s var(--ease-out);
}
.scroller-nav svg { width: 18px; height: 18px; }
.scroller-nav--prev { left: 8px; }
.scroller-nav--next { right: 8px; }
@media (hover: hover) and (pointer: fine) {
  .scroller-nav:hover { background: var(--glass-hover); }
}
.scroller-nav:active { scale: 0.92; }   /* külön `scale` tulajdonság, hogy a
                                           középre állító `translate`-tel
                                           összeadódjon, ne írja felül */

/* A nyíl CSAK akkor jön elő, ha az egér a kártyasáv fölött van, és eltűnik,
   amint lehúzod róla. Érintős eszközön nincs hover, ott végig látszik —
   640px alatt pedig amúgy is display:none, mert ott a swipe az természetes. */
@media (hover: hover) and (pointer: fine) {
  .scroller-nav { opacity: 0; pointer-events: none; }
  .scroller-wrap:hover .scroller-nav,
  .scroller-nav:focus-visible { opacity: 1; pointer-events: auto; }
}

/* A szélen álló nyíl sosem jön elő. Ez a szabály SZÁNDÉKOSAN a hover-blokk
   UTÁN áll: azonos súlyú (0,3,0) a .scroller-wrap:hover szabállyal, tehát a
   sorrend dönt, és így ez nyer. */
.scroller-wrap.at-start .scroller-nav--prev,
.scroller-wrap.at-end .scroller-nav--next { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .scroller-nav { display: none; } }  /* mobilon a touch/swipe elég */

.scroller {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10px 0;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-block: 10px 16px;             /* hely a hover-liftnek + az árnyéknak */
  padding-inline: 10px 0;               /* csak a BAL oldalon hely az első kártya
                                            árnyékának; jobb oldalon nem kell — ott a
                                            kártyák közti 20px-es gap (var(--gap)) már
                                            elég puffer a rejtett következő kártya elé,
                                            plusz padding csak feleslegesen levágna a
                                            látszó utolsó kártyából. */
  margin-inline-start: -10px;           /* …vizuálisan visszahúzva a shell gutter-jéhez */
  scrollbar-width: none;                /* rejtett sáv (Firefox) */
  cursor: grab;
}
.scroller::-webkit-scrollbar { display: none; }  /* rejtett sáv (WebKit) */
.scroller.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;               /* húzás közben ne akadjon a snap-be */
  user-select: none;
}
.scroller > * {
  flex: 0 0 var(--sc-w, auto);          /* alap: kártya saját szélessége (pl. image-card 400px) */
  scroll-snap-align: start;             /* egységes szélességhez: style="--sc-w: 280px" a scrolleren */
}
/* MOBIL: 1 kártya 80% → kilátszik a következő */
@media (max-width: 640px) {
  .scroller > * { flex-basis: 80%; }
}

/* — CSAK MOBILON scroller —
   Rácsban álló kártyasor, ami keskeny kijelzőn egy lapozható sorrá válik
   (egymás alá tornyozás helyett). 600px fölött `display: contents`: a scroller
   doboza eltűnik, a kártyák a SZÜLŐ rács elemei lesznek, tehát ott sima
   .grid-3 / .grid-4 cellák maradnak. Ugyanaz a markup, két viselkedés. */
@media (max-width: 599px) {
  /* MINDKÉT oldalon kifut a tartalomoszlopból, a képernyő széléig. Jobbra
     azért, hogy látszódjon: van még kártya. Balra azért, mert a görgetett
     kártyát a doboz széle vágja el: ha itt csak -10px lenne (annyi, amennyi az
     árnyéknak kell), a kártya 10px-cel a képernyő széle ELŐTT tűnne el, és
     lapozás közben egy vékony háttérszínű csík maradna a bal oldalon. A
     .scroller-wrap--bleed változat ugyanezt csinálja, csak ott a wrap eleve
     teljes szélességű.
     A kártyák NYUGALMI helye nem mozdul: a nagyobb margót ugyanakkora padding
     ellensúlyozza, tehát az első kártya bal éle marad a címsor vonalán. Ehhez
     kell a scroll-padding is: a snap ezt a vonalat célozza, nem a doboz szélét
     (az alap .scroller 10px-e itt elcsúsztatná a visszalapozást). */
  .scroller--mobile {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter) 0;
  }
}
@media (min-width: 600px) {
  .scroller--mobile { display: contents; }
}

/* — TELJES SZÉLESSÉGŰ („bleed") változat, az Apple Store shelf mintájára —
   A kártyák BAL széle a .shell tartalomoszlopához igazodik, tehát egy vonalban
   állnak a címsorral; JOBBRA viszont a képernyő széléig kifutnak. Így nagy
   kijelzőn nem három kártya látszik egy 1100px-es dobozban, hanem annyi,
   amennyi elfér, a kilapozott kártya pedig balra fut ki a képernyő alá.

   MARKUP: a wrap a .shell-en KÍVÜL, a .section közvetlen gyereke legyen —
   a címsor marad a .shell-ben:
     <section class="section">
       <div class="shell"><h2>…</h2></div>
       <div class="scroller-wrap scroller-wrap--bleed">…</div>
     </section>                                                              */
.scroller-wrap--bleed {
  /* A viewport bal szélétől a .shell tartalomoszlopáig mért távolság.
     A 100% itt a teljes szélességű wrap szélessége — szándékosan NEM vw,
     mert a vw beleszámítja a függőleges görgetősávot, és attól az oldal
     vízszintesen túlcsordulna. --maxw alatt magától var(--gutter)-re esik. */
  --sc-inset: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.scroller-wrap--bleed .scroller {
  padding-inline: var(--sc-inset) var(--gutter);  /* jobbra csak gutter: az
                                                     utolsó kártya a képernyő
                                                     széléig görgethető */
  scroll-padding-inline: var(--sc-inset) 0;       /* a snap a tartalomoszlop
                                                     vonalára ejtse a kártyát */
  margin-inline-start: 0;                         /* itt nem kell visszahúzni */
}
/* a nyilak a kártyasáv két szélén ülnek, nem a viewportén */
.scroller-wrap--bleed .scroller-nav--prev { left: calc(var(--sc-inset) + 18px); }
.scroller-wrap--bleed .scroller-nav--next { right: 18px; }

/* ==========================================================================
   ÚJRAHASZNÁLHATÓ: termék-kártya (product-card) — grid-be (grid-3/grid-4)
   vagy .scroller-be egyaránt mehet. Hover-lift + press-feedback, mint az
   image-card/icon-card link-változata.
   ========================================================================== */
.product-card {
  display: flex; flex-direction: column;
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 20px;
  box-shadow: var(--sh-sm);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
.product-card__badges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; margin-bottom: 14px; }
.product-card__media { aspect-ratio: 1 / 1; margin-bottom: 16px; }
.product-card__media .img-placeholder { width: 100%; height: 100%; }
.product-card__title { font-size: 1rem; font-weight: 600; color: var(--contrast); line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 6px; }  /* 16px */
.product-card__price { display: flex; align-items: baseline; gap: 4px; }
.product-card__price-amount { font-size: 1.0625rem; font-weight: 700; color: var(--contrast); letter-spacing: -0.01em; }
.product-card__price-amount--sale { color: var(--red); }
.product-card__price-suffix { font-size: 0.75rem; color: var(--contrast-3); }
.product-card:active { transform: scale(0.985); transition-duration: .12s; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--border-hi); }
  .product-card:hover:active { transform: translateY(-4px) scale(0.985); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card { transition: box-shadow .2s ease; }
  .product-card:hover, .product-card:active { transform: none; }
}

/* ==========================================================================
   GYIK — iMessage-stílusú kérdés/válasz szál (gyakori-kerdesek.html)
   A látogató buborékai jobbra (accent), Berry válaszai balra (semleges lap).
   A kérdés IGAZI <button>: billentyűzettel is járható, és aria-expanded /
   aria-controls köti a válaszhoz. A nyitás magasságát nem max-height, hanem
   grid-template-rows 0fr→1fr animálja: így tetszőleges hosszú válasz is
   pontosan a saját magasságáig nyílik, becsúszó vágás nélkül.
   Reuse: az oldalfej a .hero-card + .cover-fan (mint a blog- és a
   szerviz-archívumé, teljes .shell-ben), a szál alatta .shell--narrow-ban.
   Ehhez a blokkhoz NEM kell új CSS: a fej készen van a fenti komponensekből.
   ========================================================================== */

/* — A CSEVEGŐ-LAP —
   A felső köz szándékosan nagyobb, mint a .section-cards 1.5rem-je: az oldalfej
   és a beszélgetés két külön mozdulat, nem egy tömb. */
.faq-chat {
  /* A `display` és a `padding` KIMONDVA, pedig mindkettő az alapérték. A GB
     Global CSS a .faq-chat-en média-lekérdezés nélkül deklarál display +
     flex-direction párost ÉS egy 1.25rem paddingot; amit mi nem deklarálunk,
     azt nincs mit felülírnunk, tehát a betöltési sorrend sem segít rajta. Lásd
     wp/README.md, „hiányzó deklaráció" csapda.
     A padding élesben 20px-es gyűrűt tett a lap köré: a fejléc elválasztó
     vonala nem futott ki a lap széléig, mobilon pedig 40px-et vett el a
     buborékok elől (a szövegsáv 227px volt 264 helyett). A lapnak SAJÁT
     paddingja nincs: a fejléc és a szál a maga paddingját hozza.
     (Ugyanez a GB-szabály `gap`-et is ad; az `display: block` mellett hatástalan,
     ezért azt nem kell kimondanunk.) */
  display: block;
  padding: 0;
  margin-top: clamp(36px, 5vw, 56px);
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-2xl); box-shadow: var(--sh-lg);
  overflow: hidden;
}
.faq-chat__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
/* A korong SEMLEGES, nem accent-soft: a zöld ezen az oldalon egyetlen dolgot
   jelent (a látogató buborékját). Ha a fejléc is zöldes, a szín elveszti a
   jelentését, és a lap egésze hangosabb lesz. */
.faq-chat__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: var(--base);
}
.faq-chat__name { font-size: 0.9375rem; font-weight: 600; color: var(--contrast); }
/* A szerep NEM --contrast-3: az #AEABBC fehér lapon 2.27:1, a WCAG-minimum
   (4.5:1) alatt — ugyanaz a bukó érték, mint korábban a .post-meta-é. A halkabb
   hangot itt a méret és a 450-es vastagság viszi, nem a kontraszt föladása. */
.faq-chat__role { font-size: 0.8125rem; font-weight: 450; color: var(--contrast-2); }
/* A köz a kérdés-válasz PÁROK között tágabb, mint a páron belül (lásd
   .faq-item__answer margin-top): így egy kérdés és a hozzá tartozó válasz
   optikailag összetartozik, a következő kérdés pedig elválik tőle. */
.faq-chat__thread { display: flex; flex-direction: column; gap: 22px; padding: 20px; }

/* — EGY KÉRDÉS-VÁLASZ PÁR — */
.faq-item { display: flex; flex-direction: column; }

/* A látogató buborékja: jobbra zárt, accent, FEKETE szöveggel. A fehér szöveg
   a zöldön alig 1.7:1 kontraszt lenne — a rendszer gombjai is ezért feketék. */
.faq-item__question {
  align-self: flex-end; max-width: 86%;
  padding: 11px 18px; border: 0;
  border-radius: var(--r-2xl) var(--r-2xl) var(--r-xs) var(--r-2xl);
  background: var(--accent); color: var(--accent-fg);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.5; text-align: left;
  transition: background .18s, transform .18s var(--ease-out);
}
/* A buborékokon NINCS árnyék, se nyugalomban, se hoveren. Az anyagi mélység a
   LAPÉ: a buborékok azon fekvő tartalom, nem 16 külön lebegő tárgy. Tizenhat
   zöld derengés egymás alatt volt az, ami hangossá tette a szálat. */
.faq-item__question:active { transform: scale(0.985); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) {
  .faq-item__question:hover { background: var(--accent-hover); }
}

/* BERRY GÉPEL — a válasz előtt ~380 ms-ig három pont. Ugyanaz a 0fr→1fr
   technika, mint a válasznál, ezért a pontok eltűnése és a buborék érkezése
   pontosan egy mozdulat: a dobozok egymást váltják, nem egymás után ugrálnak. */
.faq-item__typing {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .24s var(--ease-out), margin-top .24s var(--ease-out);
}
.faq-item.is-typing .faq-item__typing { grid-template-rows: 1fr; margin-top: 10px; }
.faq-item__typing-inner { overflow: hidden; }
.faq-item__dots {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 14px 18px;
  border-radius: var(--r-2xl) var(--r-2xl) var(--r-2xl) var(--r-xs);
  background: var(--base);
}
.faq-item__dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--contrast-3);
  animation: faq-typing 1.25s infinite ease-in-out;
}
.faq-item__dots i:nth-child(2) { animation-delay: .16s; }
.faq-item__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes faq-typing {
  0%, 55%, 100% { opacity: .35; transform: translateY(0); }
  27%           { opacity: 1;   transform: translateY(-3px); }
}

/* A válasz: zárt állapotban 0 magasságú rácssor, nyitva a saját magassága.
   A MAGASSÁG a túllövés nélküli rugóval megy — alatta ott a többi kérdés, azok
   nem ugrálhatnak. A pattanás a buboréké, ami kicsi és önmagában áll. */
.faq-item__answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--spring-smooth-dur) var(--spring-smooth),
              margin-top var(--spring-smooth-dur) var(--spring-smooth);
}
.faq-item.is-open .faq-item__answer { grid-template-rows: 1fr; margin-top: 10px; }
.faq-item__answer-inner { overflow: hidden; }

/* Berry válasza. NINCS mellette ismételt avatar: a valódi kétszemélyes
   iMessage-szálban sincs, és tizenhatszor kirajzolva csak zaj volt. Hogy ki
   beszél, azt az oldal (bal/jobb) és a szín mondja meg, a fejléc pedig egyszer
   bemutatja Berryt.
   Keret sincs: a kitöltés + a lekerekítés + a tüske már megrajzolja a formát,
   a körvonal csak egy negyedik, felesleges jel lett volna ugyanarra. */
.faq-item__bubble {
  max-width: 86%;
  padding: 11px 18px;
  border-radius: var(--r-2xl) var(--r-2xl) var(--r-2xl) var(--r-xs);
  background: var(--base); color: var(--contrast-2);
  font-size: 0.9375rem; line-height: 1.65;
  /* A buborék a TÜSKÉJÉBŐL nő ki, nem a közepéből: onnan „érkezik", ahol a
     formája is mutatja. A skála csak 0.9-ről indul — nagyobb ugrásnál a szöveg
     elmosódna a mozgás közben. */
  transform: scale(0.9); transform-origin: left bottom; opacity: 0;
  transition: transform var(--spring-pop-dur) var(--spring-pop), opacity .2s ease;
}
.faq-item.is-open .faq-item__bubble { transform: scale(1); opacity: 1; }
.faq-item__bubble strong { color: var(--contrast); font-weight: 600; }
.faq-item__bubble a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Egy válasz lehet felsorolás is (pl. a fizetési módok). A golyó KELL, hogy a
   padding-left-ből kapjon helyet: a reset minden paddingot nulláz, e nélkül a
   marker a buborék bal éle mögé esne és levágódna.
   A köz a tételek között kisebb, mint a bevezető és a lista között — a három
   pont egy tömb, a felvezetés külön mozdulat. A marker halványabb: a lista
   ritmusát adja, nem olvasnivaló. */
.faq-item__bubble p + ul,
.faq-item__bubble ul + p { margin-top: 0.6em; }
.faq-item__bubble ul { padding-left: 1.15em; }
.faq-item__bubble li + li { margin-top: 0.35em; }
.faq-item__bubble li::marker { color: var(--contrast-3); }
.faq-item__bubble p + p { margin-top: 0.6em; }

@media (max-width: 640px) {
  .faq-chat__thread { padding: 16px 14px; }
  .faq-item__question, .faq-item__bubble { max-width: 92%; font-size: 0.875rem; padding: 10px 15px; }
}

/* reduced-motion: az állapot azonnal vált, animáció nélkül. A gépelés-jelző
   ilyenkor meg sem jelenik (a JS is átugorja a késleltetést), mert egy
   dekoratív várakoztatás pont annak a legrosszabb, aki kevesebb mozgást kért. */
@media (prefers-reduced-motion: reduce) {
  .faq-item__answer { transition: none; }
  .faq-item__typing { display: none; }
  .faq-item__dots i { animation: none; opacity: .5; }
  .faq-item__bubble { transform: none; transition: opacity .15s ease; }
  .faq-item__question { transition: background .15s ease; }
  .faq-item__question:active { transform: none; }
}

/* ==========================================================================
   OLDALFEJ-KÁRTYA (hero-card) — gyűjtő/archív oldalak feje
   Fehér lap: balra a mondanivaló (badge → cím → leírás → CTA-k), jobbra a
   készülékkép. A kép NEM a lapon belül lebeg, hanem ráül a kártya ALSÓ
   élére: a negatív margó pont a kártya paddingját nyeli el, ezért a kép
   talpa és a lap alja egy vonal. Ettől lesz „kirakat" a fejből, nem egy
   képkeret. Ugyanez az elrendezés áll mobilon is, csak egymás alatt.
   Használat: service-archive.html (szerviz archívum), később a többi
   szerviz/gyűjtő oldal feje is ez.
   ========================================================================== */
.hero-card {
  /* egy helyen a lap belső tere: a kép negatív margója EBBŐL számol vissza */
  --hero-pad: clamp(26px, 3.4vw, 44px);
  display: grid; gap: clamp(20px, 3vw, 44px); align-items: center;
  margin: 0;                 /* kimondva: a GB Global CSS 1.75rem-et adna alá */
  background: var(--base-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  box-shadow: var(--sh-md);
  padding: var(--hero-pad);
  overflow: hidden;
}
/* A kép hasábja szűkebb: a szöveg viszi a lapot, a kép kíséret. */
@media (min-width: 900px) {
  .hero-card { grid-template-columns: 1fr minmax(0, 0.8fr); }
}
.hero-card__title { margin: 0.875rem 0 0.75rem; text-wrap: balance; }
.hero-card__desc {
  max-width: 34em;
  margin: 0;                 /* kimondva: a GB Global CSS 1.625rem-et adna alá */
  font-size: 1rem; font-weight: 450; line-height: 1.7; color: var(--contrast-2);
  text-wrap: pretty;
}
/* A `flex-direction` KIMONDVA, pedig a `row` az alapérték. A GB Global CSS a
   .hero-card__cta-n média-lekérdezés NÉLKÜL deklarál `column`-t (nála ez a mobil
   elrendezés volt), és mivel mi csak a display-t mondtuk ki, nem volt mit
   felülírni: a két gomb desktopon is egymás alá állna. Lásd wp/README.md,
   „hiányzó deklaráció" csapda. Szűk kijelzőn a flex-wrap tördel, nem a
   flex-direction. */
.hero-card__cta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 1.625rem; }
.hero-card__image {
  width: 100%; height: auto; max-height: 420px;
  object-fit: contain; object-position: center bottom;
  align-self: end;                                  /* felülírja a kártya align-items: center-jét */
  margin-bottom: calc(-1 * var(--hero-pad, 40px));  /* a lap alsó éléig lóg */
}
@media (max-width: 899px) { .hero-card__image { max-height: 300px; } }

/* ==========================================================================
   SZERVIZ ÁRLISTA — generáció-fülek + modell-sorok (sl-tabs)
   (service-archive.html, sections/service-archive.map.md)

   EGY MARKUP, KÉT VISELKEDÉS — a törésponton nem átrendezünk, hanem szerepet
   váltunk:
   · ≥900px + JS: bal oldalt a generáció-sáv (sticky, tehát hosszú listánál is
     kéznél marad), jobbra CSAK a kiválasztott generáció panelje. A többit a
     script `hidden`-nel zárja el.
   · <900px vagy JS nélkül: a sáv eltűnik (ott két lépés lenne ujjal:
     fül, majd modell), és MINDEN generáció kinyitva, egymás alatt áll.
   A kiindulás tehát a „minden látszik" állapot, a rejtés a ráadás — így JS
   nélkül és a script lefutása előtt is a teljes lista a DOM-ban van.

   A sor iOS Beállítások-logikát követ: kép, név, jobbra chevron; a kattintható
   felület a TELJES sor, nem csak a név.
   ========================================================================== */

/* A FÜL ÉS A PANEL-FEJ EGY MAGAS. Nem a paddingok hangolásából jön ki, hanem
   ebből az egy értékből: a két sor a rács két hasábjában egymás mellett áll,
   tehát ha 1-2px-et eltérnek, az elrontott igazításnak látszik, nem véletlennek.
   Korábban külön-külön adódtak (fül 48.0px, fej 46.2px), és minden betűméret-
   változtatás újra szétvitte volna őket. HANGOLÁSI PONT: ez az egy sor.
   A két komponens-class `var(--sl-row-h, 48px)`-et olvas, tehát külön-külön is
   megáll (GB-be egyenként bemásolható), de ha együtt vannak, ez a token viszi. */
/* A `grid-template-columns` KIMONDVA az alapállapotban is, pedig egy hasábhoz
   „elég volna" nem deklarálni. A GB Global CSS-ben él egy régi
   `.sl-tabs { grid-template-columns: 1fr 3fr }`, és az NINCS media query-ben,
   tehát minden szélességen hat. Mivel mi csak ≥1024px-en írtuk felül, alatta a
   GB két hasábja maradt: a fül-sáv ott `display: none`, így a panelek az 1fr-es,
   25%-os hasábba szorultak — mobilon ettől zsugorodott össze az egész lista. */
.sl-tabs {
  --sl-row-h: 48px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--gap); align-items: start;
}

/* — GENERÁCIÓ-SÁV — csak futó JS mellett és csak asztali méretben van értelme

   A SZÉLESSÉG RÁCSBÓL JÖN, nem beégetett px-ből. Az alaprács: 1240px belső
   tartalom (--maxw 1280 mínusz 2×--gutter), 4 egyenlő oszlop, közöttük 3×20px
   (--gap) — tehát egy oszlop (1240-60)/4 = 295px. A sáv 1 oszlop, a panel 3.
   Mivel `minmax(0, 1fr)`-rel dolgozunk és nem fix px-szel, az arány MINDEN
   ablakszélességen tartja magát, nem csak 1280px-en.

   A `minmax(0, …)` nem cifrázás: a sima `1fr` alapértelmezett min-widthje
   `auto`, tehát a hasáb nem tudna a tartalma alá zsugorodni, és egy hosszú
   modellnév kifeszítené a rácsot a konténeren túlra.

   TÖRÉSPONT: 1024px, nem 900. 900-nál a sáv (860-60)/4 = 200px lenne, ami a
   leghosszabb címkével („iPhone XS-XR-X") már szűkös; 1024-nél 231px.
   FIGYELEM: a service-archive.html scriptjében a matchMedia ugyanezt a
   töréspontot nézi. Ha ez itt változik, ott is át kell írni, különben a
   köztes sávban a JS elrejtené a paneleket, miközben a sáv nem látszik. */
.sl-tabs__menu { display: none; }
@media (min-width: 1024px) {
  .js .sl-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .js .sl-tabs__menu  { grid-column: span 1; }
  .js .sl-tabs__items { grid-column: span 3; }
  .js .sl-tabs__menu {
    display: flex; flex-direction: column;
    position: sticky; top: calc(var(--header-h) + 1rem);
    background: var(--base-2);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    overflow: hidden;
  }
}
.sl-tabs__menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--sl-row-h, 48px); padding: 13px 16px;
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  /* A gomb NEM örökli a body 1.6-os sorközét (a UA `normal`-t ad neki), ezért
     itt kimondjuk: így a sor magassága szándékolt érték, nem a böngészőé.
     15px × 1.4 + 2×13px padding ≈ 45px, tehát a 44px-es ujjcél megvan. */
  font-size: 0.9375rem; line-height: 1.4; font-weight: 500;
  color: var(--contrast-2); text-align: left;
  transition: background .2s var(--ease-out), color .2s;
}
.sl-tabs__menu-item:last-child { border-bottom: 0; }
.sl-tabs__menu-inner { flex: 1; min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  .sl-tabs__menu-item:hover { background: var(--base-3); color: var(--contrast); }
  .sl-tabs__menu-item:hover .sl-tabs__chevron { transform: translateX(2px); color: var(--contrast-2); }
}
/* LENYOMÁSKOR, nem felengedéskor. A `transition: none` csak a lenyomás ágára
   szól: odafelé azonnal ott a jelzés, visszafelé (a :active megszűntével) a
   fenti .2s-os átmenet viszi ki. Ez a „instant on down, ease on up" —
   e nélkül a 200ms-os fade pont a lényeget, a közvetlenséget mossa el.
   A már nyitott fül mélyebb zöldre vált, hogy annak a lenyomása se legyen
   süket: visszajelzés akkor is jár, ha a művelet üresbe fut. */
.sl-tabs__menu-item:active { background: var(--base-3); transition: none; }
.sl-tabs__menu-item.is-current:active { background: var(--accent-mid); transition: none; }
/* A nyitott fül nem sötétebb, hanem ZÖLD: ugyanaz a jel, mint a badge-eken —
   az accent mindig azt jelenti, „ez az aktív/érvényes". */
.sl-tabs__menu-item.is-current {
  background: var(--accent-soft); color: var(--contrast); font-weight: 600;
}
.sl-tabs__menu-item.is-current .sl-tabs__chevron { color: var(--accent-2); transform: translateX(2px); }

/* — PANELEK — */
.sl-tabs__items { min-width: 0; }
.sl-tabs__item {
  background: var(--base-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.sl-tabs__item[hidden] { display: none; }
/* egymás alatt (mobil / JS nélkül) kell közéjük rés; asztalon egyszerre
   úgyis egy panel áll a helyén, ott nincs mit elválasztani */
.sl-tabs__item + .sl-tabs__item { margin-top: var(--gap); }
@media (min-width: 1024px) {
  .js .sl-tabs__item + .sl-tabs__item { margin-top: 0; }
  /* FÜLVÁLTÁS — a panel abból az irányból érkezik, amerre a listában léptél:
     lejjebbi fülre kattintva alulról jön fel, feljebbire kattintva felülről
     ereszkedik. Az irányt a `--sl-from` hordozza, amit a script állít a
     .sl-tabs elemre; iránytól független érkezésnél a fel- és a lelépés
     egyforma lenne, és a mozgás nem mondana semmit arról, hol vagy.

     KÉT külön animáció, mert a kettőnek más a dolga:
     · az elmozdulás a --spring-smooth rugót kapja (ζ=1.0, nincs túllövés) —
       ez a hely-változás természetes íve;
     · az áttűnés rövid és lineárishoz közeli, mert egy .48s-ig halványuló
       panel lomhának hat, akármilyen szép a rugó. */
  .js .sl-tabs__item {
    animation: sl-tab-rise var(--spring-smooth-dur) var(--spring-smooth) both,
               sl-tab-fade .22s var(--ease-out) both;
  }
}
@keyframes sl-tab-rise {
  from { transform: translateY(var(--sl-from, 8px)); }
  to   { transform: none; }
}
@keyframes sl-tab-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sl-tabs__item-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--sl-row-h, 48px);
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
/* A fej NAGYOBB, mint a sorok, amiket vezet. Korábban 0.875rem volt, a modell
   neve viszont 0.9375rem: a címsor kisebb volt a gyerekeinél, és emiatt a
   panel teteje nem olvasódott fejnek. */
.sl-tabs__item-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--contrast); }
/* Kis szöveg → enyhén POZITÍV tracking. A negatív tracking a nagy méret dolga;
   12px-en a szűkítés olvashatóságot visz el.
   A `line-height` sem elhagyható: e nélkül a body 1.6-ját örökölné, és ez a
   12px-es kísérőfelirat 19.2px-es sorával MAGASABB lenne, mint a 16px-es
   címsor (18.4px) — vagyis a fejléc magasságát a darabszám szabta meg. */
.sl-tabs__item-count { font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.01em; color: var(--contrast-3); white-space: nowrap; }

/* — MODELL-SOR — */
.sl-tabs__row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  transition: background .2s var(--ease-out);
}
.sl-tabs__row:last-child { border-bottom: 0; }
.sl-tabs__img {
  width: 44px; height: 44px; flex-shrink: 0;
  object-fit: contain;   /* a készülékfotó egészben látszódjon, ne vágja a keret */
}
.sl-tabs__text { flex: 1; min-width: 0; }
.sl-tabs__title { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--contrast); }
.sl-tabs__chevron {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--contrast-3);
  transition: transform .2s var(--ease-out), color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .sl-tabs__row:hover { background: var(--base-3); }
  .sl-tabs__row:hover .sl-tabs__chevron { color: var(--contrast-2); transform: translateX(3px); }
}
/* ujjal a koppintás pillanatában jön a visszajelzés, és el is múlik.
   Ugyanaz a `transition: none`, mint a fülön: odafelé azonnali, visszafelé lágy. */
.sl-tabs__row:active { background: var(--base-3); transition: none; }

/* Csökkentett mozgás: NEM „semmi visszajelzés", hanem a nem-vesztibuláris
   megfelelője. Az elmozdulás elmarad, a rövid áttűnés marad — anélkül a
   panelváltás jelöletlen ugrás lenne, és pont az veszne el, hogy történt valami.
   A töréspont itt is kell: alatta minden panel egyszerre látszik, ott nincs
   fülváltás, tehát nem is volna mit áttűnetni. */
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .js .sl-tabs__item { animation: sl-tab-fade .2s var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-tabs__chevron { transition: color .2s; }
  .sl-tabs__menu-item:hover .sl-tabs__chevron,
  .sl-tabs__menu-item.is-current .sl-tabs__chevron,
  .sl-tabs__row:hover .sl-tabs__chevron { transform: none; }
}

/* ==========================================================================
   MODELL-OLDAL FEJE (hero-strip) — egy konkrét készülék szerviz-oldala
   Alacsony, egysoros lap: balra a készülék fotója (ez azonosítja a modellt egy
   pillantásra), középen a cím + egy mondat, jobbra a két teendő. NEM a
   .hero-card nagy kirakata: itt az árlista a főszereplő, a fej csak felvezet.
   ========================================================================== */
.hero-strip {
  display: grid; gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  background: var(--base-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  box-shadow: var(--sh-md);
  padding: clamp(20px, 2.6vw, 30px);
}
/* asztalon a gombok a sor végére állnak, mobilon a két hasáb alá csúsznak */
@media (min-width: 900px) { .hero-strip { grid-template-columns: auto minmax(0, 1fr) auto; } }
.hero-strip__image { width: clamp(64px, 8vw, 96px); height: auto; object-fit: contain; }
.hero-strip__title { margin-bottom: 8px; text-wrap: balance; }
.hero-strip__desc {
  font-size: 0.9375rem; line-height: 1.65; color: var(--contrast-2);
  max-width: 44em; text-wrap: pretty;
}
.hero-strip__cta { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; }
@media (min-width: 900px) { .hero-strip__cta { grid-column: auto; } }

/* ==========================================================================
   SZERVIZ MODELL-OLDAL — árlista + ragadós oldalsáv
   (service-single.html, sections/service-single.map.md)

   ELRENDEZÉS: balra az árlista, jobbra az időpont- és nyitvatartás-kártya.
   Az oldalsáv ≥900px-en sticky: a lista hosszú, a telefonszám ne görögjön el.
   900px alatt a lista alá kerül (a fejben már van hívás-gomb, tehát a CTA nem
   vész el).
   ========================================================================== */
.service-grid { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) {
  .service-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .service-grid__side { position: sticky; top: calc(var(--header-h) + 1rem); }
}
.service-grid__side { display: grid; gap: var(--gap); align-content: start; }

/* — ÁRLISTA-HARMONIKA —
   Kategóriánként EGY lap, benne a tételek sorai. A sor: név (+ minőség-címke)
   balra, ár jobbra; a leírás lenyitható, mert a látogató 90%-ban az árat
   keresi, a magyarázatot csak akkor, ha nem érti a tételt.
   FÜGGETLEN kapcsolók (nem harmonika): itt a látogató ÖSSZEHASONLÍT, tehát
   nyithat egyszerre kettőt is. A GYIK-szál szándékosan más — ott egyszerre egy
   válasz szól, mert az beszélgetés.
   A nyitás grid-template-rows 0fr→1fr, --spring-smooth-szal: alatta további
   sorok mozognak, ott a túllövés remegésnek látszana.
   Az IKON a kategóriáé, nem a tételé: három egymás alatti sorban ugyanaz az
   ikon csak zaj lenne. A színt a `.is-*` adja a --c-n át. */
.pl-wrap { display: grid; gap: var(--sp-6); }

.pl-cat {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  color: var(--c, var(--accent));
}
.pl-cat::before { content: none; }              /* az .eyebrow vonalkája helyett itt ikon áll */
.pl-icon-wrap { font-size: 15px; line-height: 1; display: block; }
.pl-icon-wrap svg { width: 1em; height: 1em; display: block; }

.pl-group {
  background: var(--base-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.pl-item + .pl-item { border-top: 1px solid var(--border); }

.pl-toggle {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 18px;
  background: transparent; border: 0; text-align: left;
  transition: background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .pl-toggle:hover { background: var(--base-3); }
}
.pl-toggle:active { background: var(--base-3); }

.pl-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.pl-body { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.pl-title { font-size: 0.9375rem; font-weight: 600; color: var(--contrast); }
.pl-price {
  font-size: 0.9375rem; font-weight: 600; color: var(--contrast);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Ahol nincs kiírt ár, ott ne egy néma kötőjel álljon: mondja meg, mi a teendő.
   Halványabb és nem kövér, hogy egy pillantásra megkülönböztethető legyen a
   valódi áraktól. */
.pl-price--ask { font-weight: 500; color: var(--contrast-3); }

.pl-chevron {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--contrast-3);
  transition: transform var(--spring-smooth-dur) var(--spring-smooth), color .2s;
}
.pl-toggle[aria-expanded="true"] .pl-chevron { transform: rotate(90deg); color: var(--contrast-2); }

.pl-content {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--spring-smooth-dur) var(--spring-smooth);
}
.pl-item.is-open .pl-content { grid-template-rows: 1fr; }
.pl-desc {
  min-height: 0; overflow: hidden;
  font-size: 0.875rem; line-height: 1.65; color: var(--contrast-2);
}
/* A padding a NYITOTT állapotban jelenik meg: zárva a 0fr-es sor levágná, de a
   felső padding így is beleszámítana a magasságba, és maradna egy csík. */
.pl-item.is-open .pl-desc { padding: 0 18px 16px; }

/* a lista alatti eligazítás (nem jogi apróbetű, hanem a következő lépés) */
.pl-note { margin-top: var(--sp-4); font-size: 0.8125rem; color: var(--contrast-3); }

@media (prefers-reduced-motion: reduce) {
  .pl-content { transition: none; }
  .pl-chevron { transition: color .2s; }
}

/* — IDŐPONT-KÁRTYA (oldalsáv) —
   A nyitvatartás-kártya (.oh-card) párja: ugyanaz a lap, de ez cselekvésre
   szólít. A gomb teljes szélességű, mert az oldalsávban ez az egyetlen teendő. */
.appt-card {
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--sh-sm);
}
.appt-card__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--contrast);
}
.appt-card__title svg { width: 1.15em; height: 1.15em; color: var(--accent-2); flex-shrink: 0; }
.appt-card__desc { margin-top: 8px; font-size: 0.875rem; line-height: 1.6; color: var(--contrast-2); }
.appt-card .btn { width: 100%; margin-top: 16px; }
.appt-card__meta { margin-top: 10px; font-size: 0.75rem; color: var(--contrast-3); text-align: center; }

/* ==========================================================================
   WP INTEGRÁCIÓ — a GeneratePress burkolóinak semlegesítése
   (wp/iberry-child/archive.php, single.php)

   A get_header() után a GP ebbe a láncba tesz minket:
     div.site.grid-container.container#page  →  div.site-content#content
       →  div.content-area#primary  →  main.site-main#main

   Három dolog ütközik a mi ritmusunkkal:
   · a .grid-container max-widthet ÉS oldalsó paddingot ad (Testreszabás →
     Elrendezés → Tároló szélessége), a mi .shell-ünk viszont maga viszi a
     1280px-et és a --gutter-t. Kettő közülük mindig fölösleges.
   · a .site-content flex, ami a teljes szélességű szekcióinkat összenyomhatja.
   · a „separate containers" beállítás a .site-main-re margót tesz, ami elrontja
     a szekciók fölé-alá tervezett közt.

   A semlegesítés CSAK a .has-shell-layout body class alatt érvényes (a
   gyerektéma inc/blog.php-ja teszi ki), tehát a Woo- és oldalsablonok, amiket
   nem mi rajzolunk, érintetlenek maradnak.
   ========================================================================== */
body.has-shell-layout .site.grid-container { max-width: none; padding-inline: 0; }
body.has-shell-layout .site-content { display: block; }
body.has-shell-layout .content-area { width: 100%; }
body.has-shell-layout .site-main { margin: 0; padding: 0; }

/* CÍMSOR-MARGÓK — a negyedik ütközés, és ez csak élesben látszik.
   A GP a Testreszabás → Tipográfia mezőiből minden címsorra kiír egy
   `margin-bottom`-ot, CSUPASZ ELEMSZELEKTORRAL:
     h1 { … margin-bottom: 0.875rem }   h2 { … 0.75rem }   h3 { … 0.625rem }
     h4 { … 0.5rem }   h5 { … 0.4375rem }   h6 { … 0.375rem }
   Egy elemszelektor (0,0,1) ERŐSEBB, mint a `* { margin: 0 }` resetünk (0,0,0),
   tehát a betöltési sorrendtől függetlenül nyer. A statikus prototípusban
   nincs ilyen szabály, ezért ott a térközök szűkebbek — élesben viszont minden
   címsor alá becsúszik 6-14px, és a felület „szellősebbnek" hat, mint a terv.

   Egy helyen konkrét hibát is okoz: a .sl-tabs__item-head h3-ja 10px-et kap,
   amitől a panel feje MAGASABB lesz, mint a mellette álló 48px-es fül, pont
   azt az illesztést rontva el, amit a --sl-row-h-val megoldottunk.

   A SÚLYOZÁS ITT A LÉNYEG, és pont ezt rontottam el egyszer. A szabálynak
   pontosan a GP elemszelektora fölé kell kerülnie, de a SAJÁT class-aink ALÁ:

     GP:                       h2                      → (0,0,1)
     EZ A SZABÁLY:             body:where(.has-…) h2   → (0,0,2)   ✔ közte
     a mi tipográfiánk:        .post-content__body h2  → (0,1,1)   ✔ erősebb

   A `:where()` NULLA súlyt ad, ezért tudja a body-class-os hatókör megtartani
   a (0,0,2)-t. Ha simán `body.has-shell-layout`-tal írnánk, (0,1,2) lenne, ami
   ERŐSEBB a `.post-content__body h2`-nél — és pont ez történt: a jogi oldal és
   a cikkek teljes törzsszöveg-tipográfiája elvesztette a címsor-margóit,
   minden bekezdés egymásra csúszott. Ugyanígy a .hero-card__title (0,1,0) is
   alulmaradt volna.

   Így viszont nem függ betöltési sorrendtől sem: a (0,0,2) magától erősebb a
   GP (0,0,1)-énél. Body class alá zárva, hogy a GB-vel épült oldalak
   (főoldal, Woo) címsorai érintetlenek maradjanak. */
body:where(.has-shell-layout) :is(h1, h2, h3, h4, h5, h6) { margin: 0; }

/* ── EGYOLDALÚ DEKLARÁCIÓK: amit a sorrend NEM old meg ───────────────────────
   Az `inc/blog.php` enqueue-ja gondoskodik róla, hogy a global.css a
   `generateblocks-global` UTÁN töltsön be, tehát azonos súlyú ütközésnél mi
   nyerünk. DE a sorrend csak ott dönt, ahol MINDKÉT fájl deklarálja ugyanazt a
   tulajdonságot. Ahol a GB ír valamit, amit mi nem, ott nincs mit felülírni,
   és az érték akkor is érvényesül, ha a mi lapunk stílusa tölt be utoljára.

   Ez a csapda ott nyílik, ahol a komponens a `* { margin: 0 }` reset nullájára
   TÁMASZKODIK ahelyett, hogy kimondaná. A reset univerzális szelektora (0,0,0)
   ugyanis gyengébb minden class-nál (0,1,0).

   Ezért kaptak kimondott `margin: 0`-t: .section (a GB 5rem-et adott alá, ez
   volt a nagy térköz), .hero-card (1.75rem), .hero-card__desc (1.625rem),
   .badge (1.125rem).

   ÚJ KOMPONENSNÉL: ha a tervben nincs külső margó, írd ki, ne bízd a resetre.
   Ellenőrzés: a GB Global CSS-t (uploads/generateblocks/style-global.css)
   érdemes átfésülni ugyanazokra a class-nevekre, mielőtt egy oldalt élesítünk.
   ───────────────────────────────────────────────────────────────────────── */

/* GOMB-PADDING — ugyanaz a csapda, mint a címsor-margóknál, csak a GP ALAP
   stíluslapjából (nem a Testreszabásból):
     button, input[type=button], … { padding: 10px 20px; border: 1px solid … }
   Ez elemszelektor (0,0,1), tehát erősebb a `* { padding: 0 }` resetnél (0,0,0),
   és MINDEN gombunkra ráül, ami nem mondja ki a saját paddingját.

   Konkrét kár: a .scroller-nav 44×44px, border-box. A GP 20px-es oldalsó
   paddingjától a tartalomdoboz 4px SZÉLES lett, és a 18px-es nyíl-SVG oda
   préselődött — ez volt a „nem látszik rendesen a nyíl". Ugyanez vár a
   .qty-stepper__btn, .cart-item__remove, .newsletter__submit és
   .site-header__icon komponensekre, amikor azok az oldalak sorra kerülnek.

   `:where()`-rel (0,0,2): pont a GP elemszelektora fölé kerül, de a saját
   class-aink (.btn, .sl-tabs__menu-item, .pl-toggle …) alá, tehát azok
   megtartják a maguk paddingját. Ez csak a reset szándékát állítja vissza.

   FIGYELEM a következő portoláshoz: a GP a hátteret és a keretet is beírja
   (`background: #55555e`, a Testreszabás pedig `background-color: var(--accent)`,
   vagyis ZÖLD). Amelyik gombunk nem deklarál hátteret, az élesben zöld lesz.
   A mostani oldalakon mindegyik deklarál — ha egy új oldalon zöld gomb tűnik
   fel, itt keresd. */
body:where(.has-shell-layout) button { padding: 0; }

/* ── BEÁGYAZOTT JOGI DOKUMENTUM: BOOTSTRAP-SZIVÁRGÁS ─────────────────────────
   CSAK a template-jogi-beagyazott.php sablonon.

   MI TÖRTÉNIK. A Virtualjog beágyazó (app.virtualjog.hu/js/document-api-sync.js)
   egy TELJES HTML DOKUMENTUMOT kér le az API-tól — <html><head>…<body> —, és
   azt jQuery `.append()`-tel önti a #virtualjog-document-sync divbe. Az append
   a html/head/body burkolót eldobja, de a fejlécben lévő
     <link href="…bootstrap/4.0.0/css/bootstrap.min.css">
   elemet NEM: az bekerül az ÉLŐ oldal DOM-jába, és onnantól a Bootstrap 4
   reboot az EGÉSZ oldalra érvényes — fejlécre, láblécre, mindenre.

   Nem tudjuk megelőzni: a dokumentum tartalmához nem nyúlunk, a beágyazó
   szkript pedig futásidőben, a mi CSS-ünk után teszi be a lapot, tehát a
   sorrend mindig neki kedvez. Ami marad: SÚLYOZÁSSAL visszavenni azt a néhány
   csupasz elemszelektort, ami tényleg látszik. Ez a lista szándékosan rövid.

   AMI SZIVÁRGOTT ÉS ITT VISSZAJÖN:
     body { background-color: #fff }   → eltűnt a szürke lap (--base)
     body { font-family: system-ui }   → elment az Inter
     body { color: #212529 }           → megváltozott a szövegszín
     a    { color: #007bff }           → kék linkek a fejlécben/láblécben

   AMI MÁR MÁSHOL MEG VAN OLDVA: a Bootstrap `.container`-je (max-width 1140px)
   a GP `#page` burkolójára ülne rá, de a fenti
   `body.has-shell-layout .site.grid-container` (0,3,1) erősebb nála (0,1,0).
   Ehhez viszont KELL a has-shell-layout body class — vagyis az inc/blog.php
   iberry_sajat_sablon() listájában rajta kell lennie ennek a sablonnak is.

   A SÚLYOZÁS ITT IS A LÉNYEG, ugyanaz a minta, mint a címsor-margóknál:
     Bootstrap:      a                              → (0,0,1)
     ez a szabály:   body:where(.page-template-…) a → (0,0,2)   ✔ épp fölötte
     a mi linkjeink: .footer-links a                → (0,1,1)   ✔ erősebb
   A `:where()` nulla súlya nélkül (0,1,2) lenne, és a saját class-os
   linkszabályainkat is elütné.

   A BODY-n viszont KIMONDOTT class kell (0,2,0): ott nincs mit megvédeni
   alatta, a Bootstrap `body`-ja (0,0,1) pedig később tölt be, tehát azonos
   súllyal nem nyernénk.

   A dokumentum SAJÁT stílusát ez nem érinti: a .vj-content, .vj-title, #toc
   szabályai class/ID súlyúak, mind erősebbek ennél. */
body.page-template-template-jogi-beagyazott {
  background: var(--base);
  color: var(--contrast);
  font-family: var(--font);
  line-height: 1.6;
}
body:where(.page-template-template-jogi-beagyazott) a { color: inherit; }

/* ==========================================================================
   ÚJRAHASZNÁLHATÓ: FEJLÉC-KERESŐ (search-panel)
   A keresőgomb egy panelt húz le a fejléc-sáv ALÓL. A z-index nem véletlen:
   a sáv `.site-header__inner` z-index:2, ez a panel z-index:1, tehát a panel
   a sáv MÖGÜL bújik elő és oda is húzódik vissza. Ez ugyanaz a térbeli logika,
   mint a mobil menünél: ami egy elemből jön, oda is menjen vissza, és az
   indító elem (a keresőgomb) végig látszódjon.

   MOZGÁS — a --spring-smooth megy rá, NEM a --spring-pop. A panel nagy felület,
   a túllövés ott csak ugrálás; a pattanás a gesztussal érkező kicsi elemeké.
   (Ugyanez a szabály áll a :root rugó-tokenek kommentjében is.)

   A TARTALOM egyben érkezik, nem soronként lépcsőzve. Szándékos: a találati
   lista minden leütésre újraépül, és ha soronként animálna, gépelés közben
   folyamatosan hullámzana. A lista ezért AZONNAL cserélődik — a válaszkészség
   itt többet ér, mint a koreográfia.

   ANYAG — a panel ugyanabból az opál üvegből van, mint a görgetett fejléc
   (--glass + --glass-blur), mert onnan jön. A fátyol (search-scrim) azért kell,
   mert a keresés MODÁLIS feladat: amíg nyitva van, a lap többi része háttér.
   ========================================================================== */

/* — FÁTYOL — a fejléc (z:200) alatt, minden más tartalom fölött — */
.search-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(13, 13, 20, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
}
.search-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease-out), visibility 0s;
}

/* — PANEL — */
.search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;                     /* a sáv (z:2) MÖGÖTT — onnan csúszik elő */
  /* a felső padding a sávot fedi le: a panel teteje a sáv mögé kerül, a
     tartalma pontosan alatta kezdődik */
  padding: 78px var(--gutter) 26px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #fff;
  border-radius: 0 0 22px 22px;   /* ugyanaz az ív, mint a notch-é */
  box-shadow: var(--sh-2xl);
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform var(--spring-smooth-dur) var(--spring-smooth),
              opacity .22s ease,
              visibility 0s linear var(--spring-smooth-dur);
}
.search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--spring-smooth-dur) var(--spring-smooth),
              opacity .18s ease,
              visibility 0s;
}

/* — BEVITELI SOR — */
.search-panel__form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--maxw);
  margin-inline: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.search-panel__icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
}
.search-panel__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0 14px;
  border: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  /* nagy méret → negatív tracking, különben szétesik a szó (lásd a tipográfiai
     elvet: a betűköz mérethez kötött, nem egy fix érték mindenhol) */
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  outline: none;
}
.search-panel__input::placeholder { color: rgba(255, 255, 255, 0.42); }
/* a natív kereső-kereszt le: saját törlőgombunk van, kettő zavaró lenne */
.search-panel__input::-webkit-search-decoration,
.search-panel__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-panel__clear {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background-color .16s var(--ease-out), transform .12s var(--ease-out);
}
.search-panel__clear svg { width: 14px; height: 14px; }
.search-panel__clear:active { transform: scale(0.88); }
.search-panel.has-query .search-panel__clear { display: inline-flex; }

/* — TÖRZS — egyben érkezik, a panel után egy hajszállal — */
.search-panel__body {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-top: 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .3s var(--spring-smooth);
}
.search-panel.is-open .search-panel__body {
  opacity: 1;
  transform: none;
  transition-delay: .06s;
}

.search-panel__label {
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* opál felületen a halvány szürke szöveg elveszik: inkább erősebb fedettség
     és egy hajszálnyi betűköz, mint világosabb szín */
  color: rgba(255, 255, 255, 0.55);
}
.search-panel__section + .search-panel__section { margin-top: 22px; }

/* — GYORSLINKEK (népszerű keresések) — */
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* A chipek LINKEK, nem gombok: konkrét termékoldalra visznek, nem keresést
   indítanak. Ezért kell az inline-flex és a text-decoration alaphelyzetbe
   tétele — gombként ezek magukból adódtak. */
.search-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s var(--ease-out), transform .12s var(--ease-out);
}
.search-chip:active { transform: scale(0.95); }

/* — TALÁLATI SOR — ez a markup megy át PHP-ba loop-sablonnak — */
.search-results { display: flex; flex-direction: column; gap: 2px; }
.search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  color: #fff;
  text-decoration: none;
  transition: background-color .16s var(--ease-out), transform .12s var(--ease-out);
}
/* a billentyűs kiemelés és az egérhover UGYANAZ az állapot: amit a nyíl
   kijelöl, az ugyanúgy nézzen ki, mintha ráhúznád az egeret */
.search-result.is-active { background: rgba(255, 255, 255, 0.12); }
.search-result:active { transform: scale(0.99); }

.search-result__media {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
}
.search-result__media .img-placeholder { width: 100%; height: 100%; font-size: 0.5625rem; }
.search-result__body { flex: 1; min-width: 0; }
.search-result__title {
  display: block;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* a találatban a beírt rész kiemelve — a felhasználó lássa, MIÉRT találat */
.search-result__title mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.search-result__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}
.search-result__price {
  flex-shrink: 0;
  font-size: 0.9375rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* — ÜRES TALÁLAT — a meglévő .empty-state tömör változata, nem új komponens.
     A sötét panelen a saját (sötét) szövegszínei nem működnek, ezért itt
     világosra fordulnak. */
.empty-state--compact { max-width: 460px; padding: 22px 20px 8px; }
.empty-state--compact .empty-state__icon { width: 56px; height: 56px; margin-bottom: 14px; }
.empty-state--compact .empty-state__text { font-size: 0.9375rem; margin-bottom: 0; }
.search-panel .empty-state__title { color: #fff; }
.search-panel .empty-state__text { color: rgba(255, 255, 255, 0.6); }

@media (hover: hover) and (pointer: fine) {
  .search-panel__clear:hover { background: rgba(255, 255, 255, 0.22); }
  .search-chip:hover { background: rgba(255, 255, 255, 0.18); }
  .search-result:hover { background: rgba(255, 255, 255, 0.12); }
}

/* mobilon a panel a teljes magasságot kapja, hogy a lista ne szoruljon
   egy keskeny sávba a billentyűzet fölött */
@media (max-width: 600px) {
  .search-panel { padding-top: 74px; border-radius: 0; min-height: 100dvh; }
}

/* — HOZZÁFÉRHETŐSÉG — három független jelzés, három külön válasz.
     A csökkentett mozgás nem azt jelenti, hogy nincs visszajelzés: marad az
     áttűnés, csak a csúszás és a rugó megy ki alóla. */
@media (prefers-reduced-motion: reduce) {
  .search-panel,
  .search-panel.is-open {
    transform: none;
    transition: opacity .2s ease, visibility 0s;
  }
  .search-panel { transition: opacity .2s ease, visibility 0s linear .2s; }
  .search-panel__body,
  .search-panel.is-open .search-panel__body { transform: none; transition: opacity .2s ease; }
  .search-chip:active, .search-result:active, .search-panel__clear:active { transform: none; }
}
/* átlátszóság kikapcsolva: tömör felület, blur nélkül */
@media (prefers-reduced-transparency: reduce) {
  .search-panel { background: #0D0D14; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .search-scrim { background: rgba(13, 13, 20, 0.72); }
}
/* emelt kontraszt: tömör háttér + kirajzolt határ */
@media (prefers-contrast: more) {
  .search-panel {
    background: #0D0D14;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 2px solid #fff;
  }
  .search-panel__form { border-bottom-color: #fff; }
  .search-result__meta, .search-panel__label { color: rgba(255, 255, 255, 0.85); }
}

/* ==========================================================================
   BAND — szekció-szintű SZÍNHATÓKÖR (beszamitas.html)
   A .section KÖRÉ kerül, nem rá; a .shell marad belül:
       <div class="band is-green"><section class="section"><div class="shell">
   MA NEM RAJZOL SEMMIT. A dolga az, hogy a .is-* által beállított --c egy egész
   szekcióra érvényes legyen, ne kártyánként kelljen kiosztani. Ebből él az
   alábbi .band .eyebrow és a lentebbi grafika-színszabály; e nélkül azokat nem
   lehetne úgy szűkíteni, hogy más oldalak .section-jeit ne érintsék.
   A NÉV SZÁNDÉKOSAN MARAD „band": a --band-bg mechanizmus a helyén van, tehát
   egy színes vagy sötét változat egyetlen sor hozzáadásával visszatér.
   Ha .section-nel társuló class-t írsz ide, SEMMILYEN margin shorthand nem
   kerülhet bele: elvenné a .shell margin-inline: auto-ját.
   TÖRÖLVE 2026-07-31: .band--soft (halvány zöld sáv) és .band--dark (sötét sáv).
   Mindkettőt kérésre vettük ki az oldalról, használat nélkül nem maradhattak. */
.band { background: var(--band-bg, transparent); }

/* A szekció EYEBROW-ja a szekció saját zöldjét veszi fel (--c, itt --green,
   4.36:1 fehéren), NEM a globális --accent-et: az 1.8:1 lenne 11px-es
   verzálison, vagyis olvashatatlan. Ezért marad az eyebrow sötétebb zöld
   akkor is, amikor a grafika a világosat viszi. */
.band .eyebrow { color: var(--c, var(--accent)); }

/* ==========================================================================
   FEATURE-ROW — keret nélküli ikon + cím + szöveg sor
   KÉT helyen fut a beszámítás-oldalon: a négy eszközcsoportnál és a három
   felvásárlási módnál. Korábban ez két külön rács volt (.grid-4 és .grid-3),
   holott ugyanaz a dolguk.
   NINCS kártyakeret, árnyék és fehér lap: az ikon és a szöveg közvetlenül a
   szekció felületén ül. Ez szünteti meg a „doboz a dobozban" érzést, és ez ad
   helyet a 17px-es szövegnek (a kártyák 14px-e volt az olvashatatlanság oka).
   Alap 3 oszlop; a --4 változat négy. NINCS mobil vízszintes görgető: keret
   nélküli elemnél nincs mit lapozni, a kártyaél adta a fogódzót.
   ========================================================================== */
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7) var(--gap);
  margin-block-start: var(--sp-6);
}
@media (min-width: 600px) { .feature-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .feature-row { grid-template-columns: repeat(3, 1fr); } }

.feature-row__item { display: flex; flex-direction: column; gap: 12px; }

/* 64px, nem a kártyák 46px-e: keret nélkül a rajz optikailag kisebbnek hat. */
.feature-row__icon { font-size: 64px; line-height: 1; color: var(--c, var(--accent)); }
.feature-row__icon svg { width: 1em; height: 1em; display: block; }

.feature-row__title {
  font-size: 1.5rem; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.2;
  color: inherit;
}

/* 17px = a .section-head__lead mérete. A projekt már kimondta, hogy ez az
   olvasható törzsméret. */
.feature-row__text {
  font-size: 1.0625rem; line-height: 1.65; letter-spacing: -0.005em;
  color: var(--contrast-2); max-width: 34em; text-wrap: pretty;
}

/* BELÉPŐ JELENET. A sor egésze egy jelenet: az elemek lépcsőzve érkeznek,
   az --art-step ugyanaz a 70ms, mint a kép-kártyák grafikáinál.
   A :nth-child itt NEM szerkezeti feltevés, hanem maga az adat (hányadikként
   érkezzen) — ugyanúgy, ahogy a .card-art--blobs circle:nth-child szabályai. */
.js .feature-row[data-scene] .feature-row__item {
  opacity: 0;
  transform: translateY(14px);
}
.js .feature-row[data-scene].is-inview .feature-row__item {
  animation: fadeUp var(--art-dur) var(--ease-out) both;
}
.js .feature-row[data-scene].is-inview .feature-row__item:nth-child(2) { animation-delay: calc(var(--art-step) * 1); }
.js .feature-row[data-scene].is-inview .feature-row__item:nth-child(3) { animation-delay: calc(var(--art-step) * 2); }

/* Csökkentett mozgás: marad a megjelenés, elmarad az elmozdulás és a lépcsőzés. */
@media (prefers-reduced-motion: reduce) {
  .js .feature-row[data-scene] .feature-row__item { transform: none; }
  .js .feature-row[data-scene].is-inview .feature-row__item,
  .js .feature-row[data-scene].is-inview .feature-row__item:nth-child(n) {
    animation: art-fade .4s ease both;
    animation-delay: 0s;
  }
}

/* ==========================================================================
   STEP-CARD — a beszámítás három lépése, fehér kártyákban
   Fent az ÁBRA egy halvány tintapanelen, alatta a szöveg. Ez a fordítottja az
   .image-card-nak (ott a szöveg van fent, a média lent): itt az ábra bevezeti
   a lépést, nem lezárja.
   Három kártya egymás mellett (.grid-3), mobilon lapozható sávban
   (.scroller--mobile) — ugyanaz a párosítás, mint a lap többi kártyasoránál.
   A SZÖVEG 17px, nem az .icon-card 14px-e: ez a lap három leghosszabb szövege
   (156-157 karakter), itt a magyarázat a tartalom, nem egysoros felirat.
   ELVETVE (ne induljon újra): függőleges idővonal sorszám-korongokkal. A
   folyamat ugyan sorrend, de három lépésnél az idővonal fölöslegesen magas
   szekciót adott, és kilógott a lap kártyaritmusából.
   ========================================================================== */
.step-card {
  display: flex; flex-direction: column;
  background: var(--base-2); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-sm);
}

/* AZ ÁBRA PANELJE. A tintát a .is-* --c-soft-ja adja, tehát a szekció színével
   együtt mozdul, nincs beégetett hex. Az arány fix, hogy a három kártya ábrája
   egy magasságban álljon akkor is, ha a szövegek eltérő hosszúak. */
.step-card__art {
  aspect-ratio: 16 / 9;
  background: var(--c-soft, var(--base-3));
  display: flex; align-items: center; justify-content: center;
}
.step-card__art svg { width: 78%; height: 78%; display: block; }

.step-card__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2.4vw, 26px);
}
/* A SORSZÁM KÉZZEL ÍRT: Nerko One, a .text--playful class-on át (a markup viszi,
   nem itt duplikáljuk a font-family-t). A styleguide szerint ez a betű eleve a
   „játékos display (felvásárlás)" szerepre van kijelölve, tehát ez a lap a helye.
   NINCS pirula-háttér és nincs nullás előtag: egy kézzel írt jelnél a keret és a
   „01" tipográfiai rácsformája is idegen — az egyik keretbe zárja, a másik
   gépiessé teszi. A jel maga a szám, nagyban.
   A méret rem-ben nő a betűmérettel; a line-height 1, hogy a számnak ne legyen
   láthatatlan sorköz-sávja a cím fölött. */
.step-card__num {
  align-self: flex-start;
  font-size: 3.5rem;   /* 56px */
  line-height: 1;
}
.step-card__title {
  font-size: 1.25rem; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.3;
}
.step-card__text {
  font-size: 1.0625rem; line-height: 1.65; letter-spacing: -0.005em;
  color: var(--contrast-2); text-wrap: pretty;
}

/* ── AZ ÁBRÁK ────────────────────────────────────────────────────────────────
   Mind a három iOS-rendszerelem: kapcsoló, beállítás-sorok, pipa. Nem
   dekoráció: mindegyik AZT mutatja, amit a lépés kér.
   Közös szabály: nyugalmi állapotban a KÉSZ állapot áll, tehát JS nélkül is
   értelmes kép marad. A .js kapu rejti el a kiindulást, az is-inview indítja. */
.step-art__track { fill: #C7C7CC; }            /* iOS kikapcsolt szürke */
.step-art__knob  { fill: #fff; }
.step-art__row   { fill: #fff; }
.step-art__dot   { fill: #C7C7CC; }
.step-art__ring  { fill: none; stroke: var(--c, var(--accent)); stroke-width: 6; }
.step-art__tick  {
  fill: none; stroke: var(--c, var(--accent));
  stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── A RAJZOK ÉS A SZÁMOK SZÍNE ──────────────────────────────────────────────
   A lapon a GRAFIKA a világos accent-zöldet viszi (#00d959), a SZÖVEG a
   sötétebb --green-t. Egy helyen dől el, hogy ne csússzon szét szekciónként.
   Az accent fehéren 1.8:1, tehát szövegnek nem való — de ezek nem szövegek:
   a készülék-rajz mellett ott a kártya címe, a sorszám mellett a lépés címe,
   a jelentés tehát sehol nem a színen múlik.
   AZ EYEBROW SZÁNDÉKOSAN KIMARAD: az 11px-es verzál valódi szöveg, ott a
   halvány zöld olvashatatlan lenne — az marad a --c-n (--green, 4.36:1). */
.band .icon-card__icon,
.band .feature-row__icon,
.band .step-card__num { color: var(--accent); }
.band .step-art__ring,
.band .step-art__tick { stroke: var(--accent); }


@keyframes step-toggle-track { from { fill: var(--accent); } to { fill: #C7C7CC; } }
@keyframes step-toggle-knob  { from { transform: translateX(36px); } to { transform: translateX(0); } }
@keyframes step-dot-out      { from { fill: var(--accent); }        to { fill: #C7C7CC; } }

.js .step-card[data-scene] .step-art__track { fill: var(--accent); }
.js .step-card[data-scene] .step-art__knob  { transform: translateX(36px); }
.js .step-card[data-scene] .step-art__dot   { fill: var(--accent); }
.js .step-card[data-scene] .step-art__ring,
.js .step-card[data-scene] .step-art__tick  { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* 1. KAPCSOLÓ: a gomb balra csúszik, a sín zöldről szürkére vált.
   --spring-smooth, nem pop: egy iOS kapcsoló nem lő túl. */
.js .step-card[data-scene].is-inview .step-art__track {
  animation: step-toggle-track var(--spring-smooth-dur) var(--ease-out) .25s both;
}
.js .step-card[data-scene].is-inview .step-art__knob {
  animation: step-toggle-knob var(--spring-smooth-dur) var(--spring-smooth) .25s both;
}

/* 2. BEÁLLÍTÁS-SOROK: a zöld állapotpontok sorra kialszanak, fentről lefelé.
   Ez a „jelentkezz ki a szolgáltatásokból": több szolgáltatás, egymás után. */
.js .step-card[data-scene].is-inview .step-art__dot {
  animation: step-dot-out .45s var(--ease-out) both;
}
.js .step-card[data-scene].is-inview .step-art__dot:nth-of-type(1) { animation-delay: .25s; }
.js .step-card[data-scene].is-inview .step-art__dot:nth-of-type(2) { animation-delay: .45s; }
.js .step-card[data-scene].is-inview .step-art__dot:nth-of-type(3) { animation-delay: .65s; }

/* 3. PIPA: előbb a kör rajzolódik ki, aztán a pipa. A pathLength="1" a
   markupban KÖTELEZŐ, e nélkül az art-draw nem rajzol semmit. */
.js .step-card[data-scene].is-inview .step-art__ring {
  animation: art-draw .7s var(--ease-out) .2s both;
}
.js .step-card[data-scene].is-inview .step-art__tick {
  animation: art-draw .35s var(--ease-out) .8s both;
}

/* Csökkentett mozgás: mindhárom ábra AZONNAL a végállapotában áll. Nem
   „gyorsabb animáció", hanem nincs animáció. */
@media (prefers-reduced-motion: reduce) {
  .js .step-card[data-scene] .step-art__track { fill: #C7C7CC; }
  .js .step-card[data-scene] .step-art__knob  { transform: translateX(0); }
  .js .step-card[data-scene] .step-art__dot   { fill: #C7C7CC; }
  .js .step-card[data-scene] .step-art__ring,
  .js .step-card[data-scene] .step-art__tick  { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .step-card[data-scene].is-inview .step-art__track,
  .js .step-card[data-scene].is-inview .step-art__knob,
  .js .step-card[data-scene].is-inview .step-art__dot,
  .js .step-card[data-scene].is-inview .step-art__dot:nth-of-type(n),
  .js .step-card[data-scene].is-inview .step-art__ring,
  .js .step-card[data-scene].is-inview .step-art__tick { animation: none; }
}