/**
 * POS PRO — a /fiokom/ oldal (belépés, regisztráció, fiók-áttekintő) saját
 * formanyelve.
 *
 * MINTA: assets/css/bolt.css — ugyanaz a szűk hatókör (csak a fiók oldalain,
 * lásd Wp\AccountAuth::enqueueStyles(), is_account_page()-re kötve), és
 * ugyanaz az indoklás: az Elementor-sablon Custom CSS-e nem ér el a
 * WooCommerce saját my-account.php sablonjáig, ide plugin-CSS kell.
 *
 * SZÍNEK. A kiviteli terv (docs/redesign/POS-Pro-redesign.dc.html, isAccount
 * szekció) türkiz palettáját (#0f766e / #14b8a6 / #5eead4) NEM vesszük át —
 * a site valós narancs márkaszíneit használjuk, ugyanazt a négy tokent, amit
 * `Wp\AccountPanel` már élesben használ (ORANGE/INK/MUTED/LINE). A tokenek
 * CSS-változóként is ki vannak téve, hogy egy jövőbeli sötét/világos téma
 * váltás egy helyen történjen — ma csak egy világos beállítás van.
 *
 * AZ AMBER FIGYELMEZTETŐ SZÍN (#f59e0b/#a16207 a mockupban) A SITE-NAK NINCS
 * SAJÁT TOKENJE ERRE — a mockup árnyalatait vettük át változatlanul
 * (--posgy-warn/--posgy-warn-ink/--posgy-warn-bg/--posgy-warn-line), Attilával
 * egyeztetendő, hogy maradjon-e, vagy legyen belőle site-token.
 *
 * 2026-08-28 — HÁROM MÉRÉSSEL ELDÖNTÖTT ALAPÉRTÉK. Az elrendezés korábban
 * feltételezésekre épült; ezek most élő DOM-mérésből származnak, és a
 * hozzájuk tartozó szabályok mellett ott az indoklás is:
 *
 *   1. SZÉLESSÉG = 1560px. Az Elementor fejléc és lábléc belső konténere
 *      (`.e-con-inner`) ennyi, középre igazítva — a fiók lapja pontosan
 *      ehhez igazodik, nem 100vw-hez (attól szélesebb lett a fejlécnél).
 *   2. GOMB-TOKEN = a bolt gomb-direktívája (`bolt.css`, `Wp\ShopStyle`):
 *      `#F29421 / #fff / radius 13px / padding 14px 24px / 15px / 800`.
 *      A fiók MINDEN elsődleges gombja ezt használja. A belső tér 2026-08-31
 *      előtt itt 14×18 volt (a fejléc "Regisztráció" gombjáról mérve), a
 *      bolté 14×24 — ugyanaz a gomb két felületen két szélességgel. Egy
 *      gombstílus van, és azt a `bolt.css` írja le; a fiók követi.
 *   3. A WOOCOMMERCE FLOATJAI. `.woocommerce-MyAccount-navigation`
 *      (float:left, 30%), `.woocommerce-MyAccount-content` (float:right,
 *      68%) és `form.login/.register` (saját 1px-es keret + 20px padding)
 *      a rácson belül is éltek — ezek adták a 66px-re zsugorodott menüt,
 *      a keskeny tartalom-oszlopot és a "keret a kereten belül" hibát.
 *      Mindhárom itt van kikapcsolva, a saját blokkjában indokolva.
 */

.posgy-fiok-oldal,
.woocommerce-account {
	--posgy-primary: var(--posgy-btn-bg);          /* gombok.css */
	--posgy-accent: var(--posgy-btn-bg);
	--posgy-primary-hover: var(--posgy-btn-bg-hover);
	--posgy-ink: #2D2A33;
	--posgy-muted: #52555A;
	--posgy-line: #E4DCCE;
	/* A MEZŐK KERETE egy árnyalattal erősebb, mint a dobozoké — ugyanaz a
	   két token, mint a `kosar.css`-ben. A belépő űrlap mezői eddig is
	   ezt a színt vitték, csak kiírt `#D8CFBE`-ként; a fiók többi mezője
	   a halványabb doboz-vonalat kapta, ezért volt a Címeim és a Cégadatok
	   űrlapja halványabb keretű, mint a pénztáré (mérve 2026-08-31). */
	--posgy-line-strong: #D8CFBE;
	--posgy-bg: #FDF8F0;
	--posgy-card: #ffffff;
	--posgy-dark: #2D2A33;
	--posgy-dark-accent: #F29421;

	/* Amber — a mockupból változatlanul, ld. fájl-fejléc. */
	--posgy-warn-bg: #fffbeb;
	--posgy-warn-line: #fde68a;
	--posgy-warn-ink: #a16207;

	/* ----------------------------------------------------------------
	   LEKEREKÍTÉS — a bolt ÖT lépcsője, EGY helyen. Korábban minden
	   szabály a saját számát vitte (16/14/13/12/11/10), és egy-egy
	   felület némán kilógott a sorból. Innentől minden lekerekítés
	   ezekre hivatkozik: ami egy szinten van, az egyformán néz ki.

	   A lépcsők a befoglalás sorrendjét követik — a külső mindig
	   nagyobb, mint ami benne ül:
	     színpad (18) > kártya (16) > belső doboz (14) > gomb (13)
	     > vezérlő: mező, kis gomb, mennyiség (11)

	   A LÉTRA HAT FOKRÓL ÖTRE FOGYOTT. A „mező" korábban 12 px volt, a
	   „pirula/kis gomb" 11 — egy pixel különbség, ami fokként nem
	   látszik, viszont a bolt többi felületével ütközött: a pénztár
	   mezői (`kosar.css --posgy-r-vezerlo`) és a mennyiség-választó
	   (`bolt.css`) mindig is 11 px-esek voltak. Így a fiók űrlapja
	   kerekebb mezőket mutatott, mint a pénztáré — ugyanaz az adat,
	   két forma. A `--posgy-r-input` marad névként (hét szabály
	   hivatkozik rá), de ugyanarra a fokra mutat, mint a pirula.
	   ---------------------------------------------------------------- */
	--posgy-r-stage: 18px;
	--posgy-r-card: 16px;
	--posgy-r-box: 14px;
	--posgy-r-btn: var(--posgy-btn-radius);
	--posgy-r-pill: 11px;
	--posgy-r-input: var(--posgy-r-pill);
}

/* ====================================================================
   A WOOCOMMERCE SAJÁT FLOAT-ELRENDEZÉSÉNEK KIKAPCSOLÁSA.

   EZ A FÁJL LEGFONTOSABB SZABÁLYA — a fiók oldal minden korábbi
   elrendezési hibája erre vezetett vissza. A WooCommerce alap CSS-e ezt
   a két szabályt hozza (élőben a `document.styleSheets`-ből kiolvasva,
   nem feltételezés):

       .woocommerce-account .woocommerce-MyAccount-navigation { float:left;  width:30% }
       .woocommerce-account .woocommerce-MyAccount-content    { float:right; width:68% }

   A saját `my-account.php` sablonunk rácscellái BELÜL tartalmazzák ezt a
   két elemet, így a WooCommerce float-jai a rácson belül maradtak élve:

   - A `<nav>` a 238px-es cella 222px-es belsejében 30%-ra = 66px-re
     zsugorodott (floatolt elem `width` nélkül amúgy is shrink-to-fit),
     ezért állt minden menüpont a szövegénél keskenyebben, és ezért
     tördelt a "Mentett listák (0)" három sorba.
   - A tartalom oszlop 68%-on állt, ezért maradt mellette széles üres sáv.

   Két korábbi menet ezt a tünetet kereste a saját `<ul>`/`<li>`
   szabályaiban (előbb egy duplikált WooCommerce-osztályra, majd egy
   flex-százalék körkörösségre gyanakodva) — egyik sem volt az ok, mert
   az ok EGGYEL FELJEBB, a köztes `<nav>`-on volt. Egy szabály, egy hely:
   a rácson belül a float-elrendezés nem létezik.

   Specificitás: 0,3,0 a WooCommerce 0,2,0-ja fölött — nem kell
   `!important`.
   ==================================================================== */
.woocommerce-account .posgy-fiok-grid .woocommerce-MyAccount-navigation,
.woocommerce-account .posgy-fiok-grid .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* ====================================================================
   A LAP SZÍNPADA — a fiók-rács és a belépés/regisztráció oszloppár közös
   háttérlapja (a terven: `background:#fdf8f0; border-radius:18px;
   box-shadow:0 20px 40px -28px rgba(45,42,51,.5)`). NINCS kerete: a
   krém felület és a lágy vetett árnyék adja a lehatárolást, a KERET a
   benne ülő kártyáké — így nem keletkezik dupla keret.

   SZÉLESSÉG: PONTOSAN ANNYI, MINT A FEJLÉCÉ. Élőben mérve az Elementor
   fejléc és lábléc belső konténere (`.e-con-inner`) 1560px, a viewport
   közepére igazítva. A WooCommerce fiók-végpontok viszont a téma ALAP
   oldalsablonján futnak (`<main class="site-main">`, max-width 1140px),
   ami egy MÁSIK konténerrendszer — ezért `width:100%` önmagában 1140px
   marad.

   Ezért asztalon a `main` teljes szélességű, az oldaltere a lap közös
   `--posgy-margo`-ja (`oldal.css`, „OLDALTÉR"), és a színpad maga áll meg
   1560 px-nél, középen — ugyanaz a két szám, ugyanabban a sorrendben, mint
   a fejlécé. Az előző megoldás `100vw`-s kitörés volt: a `vw` a
   görgetősávot is beleszámolja, így klasszikus görgetősávval a színpad
   mindkét oldalon 16,5 px-en állt a fejléc 26-ja helyett (mérve
   2026-09-17-én, 1280 px, 15 px-es görgetősáv).

   Keskenyebb nézetben a lap a `main`-ben marad, ahol az már helyesen
   viselkedik (tableten és telefonon ugyanazzal az oldaltérrel).
   ==================================================================== */
.posgy-fiok-grid,
.woocommerce-account #customer_login,
.woocommerce-account .posgy-fiok-ertek {
	box-sizing: border-box;
	margin-top: 24px;
	margin-bottom: 40px;
}

.posgy-fiok-grid,
.woocommerce-account #customer_login {
	background: var(--posgy-bg);
	border-radius: var(--posgy-r-stage);
	box-shadow: 0 20px 40px -28px rgba(45, 42, 51, .5);
	padding: 22px;
}

@media (min-width: 1200px) {
	/* Csak ahol színpad van: az elfelejtett jelszó űrlapja stílus nélküli
	   WooCommerce-űrlap, az maradjon a téma 1140 px-es dobozában. */
	body.woocommerce-account main.site-main:has(.posgy-fiok-grid, #customer_login) {
		max-width: none;
		padding-inline: var(--posgy-margo, 26px);
	}

	.posgy-fiok-grid,
	.woocommerce-account #customer_login,
	.woocommerce-account .posgy-fiok-ertek,
	.woocommerce-account .woocommerce-notices-wrapper {
		max-width: 1560px;
		margin-left: auto;
		margin-right: auto;
	}

	.posgy-fiok-grid,
	.woocommerce-account #customer_login {
		padding: 26px;
	}
}

.posgy-fiok-grid {
	display: grid;
	/* `minmax(0, 1fr)`, nem `1fr`: enélkül egy hosszú, nem törhető tartalom
	   (rendelésszám, fájlnév) szétfeszítené a tartalom oszlopot. */
	grid-template-columns: 238px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

/* ====================================================================
   BAL NAVIGÁCIÓ — a terven fehér kártya, benne sima lista: az AKTÍV
   elem narancs pirula, a többi keret és háttér nélkül, azonos
   térközzel. A `<nav>` szélessége a fenti float-kikapcsolás óta a
   cella teljes szélessége, így minden pirula végig ér.
   ==================================================================== */
.posgy-fiok-nav {
	background: var(--posgy-card);
	border: 1px solid var(--posgy-line);
	border-radius: var(--posgy-r-card);
	padding: 14px;
}

.posgy-fiok-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.posgy-fiok-nav li {
	margin: 0 0 3px;
}

.posgy-fiok-nav li:last-child {
	margin-bottom: 0;
}

.posgy-fiok-nav li a {
	display: block;
	padding: 11px 13px;
	border-radius: var(--posgy-r-pill);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--posgy-ink);
	text-decoration: none;
}

.posgy-fiok-nav li a:hover,
.posgy-fiok-nav li a:focus {
	background: rgba(242, 148, 33, .1);
	color: var(--posgy-ink);
}

.posgy-fiok-nav li.is-active a,
.posgy-fiok-nav li.is-active a:hover,
.posgy-fiok-nav li.is-active a:focus {
	background: var(--posgy-primary);
	color: #fff;
	font-weight: 800;
}

.posgy-fiok-content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Mobilon: a bal navigáció vízszintesen görgethető lapkasávvá lapul a
   tartalom fölé — ugyanaz a sablon, csak a rács vált egy oszlopra (a
   plan szerint ez CSS media query, nem külön PHP-ág). */
@media (max-width: 782px) {
	.posgy-fiok-grid {
		/* `minmax(0, 1fr)`, nem `1fr` — ugyanazért, amit a fenti asztali rács
		   leír. A `1fr` (= `minmax(auto, 1fr)`) sáv minimuma a lapkasáv
		   törhetetlen füleinek teljes sora lett: 375 px-es telefonon a rács
		   oszlopa 1027 px, a sáv görgető doboza maga is 997 px-re nőtt, így nem
		   görgetett, a jobb oldali fülek a képernyőn kívül maradtak, és a fiók
		   teljes tartalma 1027 px széles volt (a telefon kicsinyítve mutatta a
		   lapot). Mérve 2026-09-17-én, belépve, mind a hét fülön. */
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}

	.posgy-fiok-nav ul {
		display: flex;
		flex-direction: row;
		gap: 3px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.posgy-fiok-nav li {
		margin: 0;
	}

	.posgy-fiok-nav li a {
		white-space: nowrap;
	}
}

/* ====================================================================
   BELÉPÉS / REGISZTRÁCIÓ — WooCommerce saját form-login.php sablonja,
   csak stílust és néhány beszúrt blokkot kap (Wp\AccountAuth), a
   mezőrenderelés és a nonce-ok a WooCommerce-é maradnak.
   ==================================================================== */
/* A színpad rácsa. A szelektor szándékosan `.woocommerce-account
   #customer_login.u-columns` (1,2,0): egy élő snippet ugyanezt az
   elemet `#customer_login.u-columns { display:flex }`-szel is beállítja
   (1,1,0), és sorrendtől függetlenül ennek kell nyernie. */
.woocommerce-account #customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

/* A WooCommerce clearfixe (`.col2-set::before/::after { content:" ";
   display:table }`) egy RÁCS-konténerben két néma rácselemmé válik, és
   egy cellával odébb tolja a két oszlopot. (Ez a szabály korábban a
   `bolt.css`-ben élt, a rács mellett — most ott van, ahol a rács maga.) */
.woocommerce-account #customer_login.u-columns::before,
.woocommerce-account #customer_login.u-columns::after {
	display: none;
}

/* A WooCommerce a `.u-column1/2`-t is floattal rakja egymás mellé —
   ugyanaz a kikapcsolás, mint fent a fiók-rácsnál. */
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	float: none;
	width: auto;
	box-sizing: border-box;
}

/* A "BELÜL VAN MÉG EGY KERET" OKA. A WooCommerce alap CSS-e saját keretet
   ÉS belső térközt ad magára az űrlapra:

       .woocommerce form.login, .woocommerce form.register {
           border: 1px solid #d3ced2; padding: 20px; margin: 2em 0;
           border-radius: 5px;
       }

   Ez a kártyánk keretén BELÜL rajzolt egy másodikat. Az űrlap itt nem
   önálló felület — a kártya az —, ezért nullázzuk. Specificitás 1,2,0
   a WooCommerce 0,2,0-ja fölött. */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
	margin: 0;
}

/* BELÉPÉS — az egyetlen keret, bőséges belső térközzel, ahogy a terven. */
.woocommerce-account #customer_login .u-column1 {
	background: var(--posgy-card);
	border: 1px solid var(--posgy-line);
	border-radius: var(--posgy-r-card);
	padding: 26px;
}

.woocommerce-account #customer_login .u-column1 h2 {
	font-size: var(--posgy-fs-h2);
	font-weight: 700;
	line-height: var(--posgy-lh-h2);
	color: var(--posgy-ink);
	margin: 0 0 6px;
	padding: 0;
	border: 0;
}

/* REGISZTRÁCIÓ — NINCS külön világos keret és NINCS "Regisztráció" felirat:
   a terven a jobb oszlop TELJES EGÉSZÉBEN a sötét "Miért érdemes
   partnernek" panel (`.posgy-fiok-partner-panel`, lásd lejjebb) — ez a
   panel adja az egyetlen látható keretet. */
.woocommerce-account #customer_login .u-column2 {
	background: none;
	border: 0;
	padding: 0;
}

.woocommerce-account #customer_login .u-column2 h2 {
	display: none;
}

@media (max-width: 782px) {
	.woocommerce-account #customer_login.u-columns {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}
}

.posgy-fiok-login-lead {
	font-size: 14px;
	color: var(--posgy-muted);
	margin: 0 0 20px;
}

.woocommerce-form-login .form-row label,
.woocommerce-form-register .form-row label {
	font-size: 14px;
	font-weight: 800;
	color: var(--posgy-ink);
}

/* ====================================================================
   ŰRLAPMEZŐK — EGY szabály a fiók MINDEN űrlapjára (belépés,
   regisztráció, cégadatok, mentett listák, címek).

   MIÉRT ILYEN HOSSZÚ A SZELEKTOR. A WooCommerce alap CSS-e ezt hozza:

       .woocommerce form .form-row .input-text,
       .woocommerce form .form-row select { padding: .5em;
           border-radius: var(--wc-form-border-radius, 4px); … }

   ami 0,3,1 specificitású. A korábbi `.woocommerce-form-login
   .input-text` (0,2,0) ennél gyengébb volt, ezért a mezők élőben 4px-es
   sarokkal és idegen belső térközzel jelentek meg — a tervben 12px van.
   Az azonos alakú szelektor is csak döntetlen lenne, azt pedig a
   betöltési sorrend döntené el; ezért a két konténer (`#customer_login`,
   illetve `.posgy-fiok-content`) is benne van, így egyértelműen nyer.
   ==================================================================== */
.woocommerce-account #customer_login .form-row .input-text,
.woocommerce-account #customer_login .form-row select,
.woocommerce-account .posgy-fiok-content .form-row .input-text,
.woocommerce-account .posgy-fiok-content .form-row select,
.woocommerce-account .posgy-fiok-content .form-row textarea {
	border: 1px solid var(--posgy-line-strong);
	border-radius: var(--posgy-r-input);
	width: 100%;
	box-sizing: border-box;
	background: var(--posgy-card);
	color: var(--posgy-ink);
	/*
	 * A BELSŐ TÉRKÖZ ÉS A BETŰMÉRET SZÁNDÉKOSAN NEM SZEREPEL ITT. A
	 * "UX javítócsomag" snippet `padding: 12px 14px !important` és
	 * `font-size: 16px !important` értéket ad minden mezőnek, a saját
	 * indoklása szerint: 16px alatt az iOS Safari RÁKÖZELÍT az oldalra,
	 * amikor a vevő a mezőbe koppint. Ez tapintási/akadálymentességi
	 * szabály, nem ízlés — egy szabály, egy hely, és az a hely ott van.
	 * Ha ide is beírnánk egy versengő értéket, az csak holt kód lenne.
	 */
}

/* AZ ELSŐDLEGES GOMB — a bolt gomb-direktívája (`bolt.css`), nem újratalálva:
   `background:#F29421; color:#fff; border:0; border-radius: var(--posgy-r-btn);
   padding:14px 24px; font-size:15px; font-weight:800`. A fiók minden
   elsődleges gombja (belépés, regisztráció, újrarendelés, cégadat-mentés,
   lista/cím mentés) EZT használja — egy szabály, egy hely.

   A szelektorok `#customer_login`-nal vannak megerősítve, mert a
   WooCommerce alap `.woocommerce button.button` szabálya (0,2,0) szürke
   hátteret ad, és puszta osztályokkal a sorrenden múlna, ki nyer. */
.woocommerce-account #customer_login .woocommerce-form-login__submit,
.woocommerce-account #customer_login .woocommerce-form-register__submit {
	background: var(--posgy-primary);
	color: #fff;
	border: 0;
	border-radius: var(--posgy-r-btn);
	min-height: var(--posgy-btn-h);
	padding: var(--posgy-btn-py) var(--posgy-btn-px);
	font-weight: 800;
	font-size: var(--posgy-fs-button);
	line-height: 1.3;
	width: 100%;
	cursor: pointer;
}

.woocommerce-account #customer_login .woocommerce-form-login__submit:hover,
.woocommerce-account #customer_login .woocommerce-form-register__submit:hover {
	background: var(--posgy-primary-hover);
	color: #fff;
}

/* A regisztráció gombja a sötét panelen ül, ezért kap egy kis levegőt a
   fölötte lévő mezőrácstól és az alatta lévő SLA-szövegtől. */
.posgy-fiok-partner-panel .woocommerce-form-register__submit {
	margin-top: 4px;
}

.posgy-fiok-partner-panel .woocommerce-privacy-policy-text {
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .65);
	margin: 14px 0 0;
}

.posgy-fiok-partner-panel .woocommerce-privacy-policy-text a {
	color: #fff;
}

/* A submit sor a `.posgy-fiok-partner-fields` rács UTOLSÓ gyereke (élő
   DOM-ból ellenőrizve: `partnerPanelEnd` a submit UTÁN zárja a dobozt,
   így a gomb is rácscella) — teljes szélességet és felette levegőt kap. */
.posgy-fiok-partner-fields > .form-row:last-child {
	margin: 4px 0 0;
}

/* A "MIÉRT ÉRDEMES PARTNERNEK" sötét panel — Wp\AccountAuth nyitja/zárja a
   register form elején/végén, a WooCommerce saját mezői (e-mail, jelszó)
   e között az elejtett nyitó és a záró tag között renderelnek. */
.posgy-fiok-partner-panel {
	background: var(--posgy-dark);
	color: #fff;
	border-radius: var(--posgy-r-card);
	padding: 24px;
	margin: 0 0 20px;
}

/* Az "eyebrow" felirat minden sötét panelen ugyanaz — ezt a
   `.posgy-fiok-partner-panel` és a hero jobb oszlopa (`.posgy-fiok-hero-jobb`)
   is használja, ezért egy helyen, nem panelenként duplázva. */
.posgy-fiok-eyebrow {
	font-size: var(--posgy-fs-h6);
	font-weight: 800;
	color: var(--posgy-dark-accent);
	letter-spacing: var(--posgy-ls-h6);
	margin: 0 0 10px;
	text-transform: uppercase;
}

/* A regisztrációs oszlop `<h2>`-je alatti alszakasz: `<h3>`, a ház H3-a. */
.posgy-fiok-partner-panel h3 {
	font-size: var(--posgy-fs-h3);
	font-weight: 700;
	margin: 0 0 16px;
	line-height: var(--posgy-lh-h3);
	color: #fff;
}

.posgy-fiok-benefits {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
}

.posgy-fiok-benefits li {
	display: flex;
	gap: 11px;
}

.posgy-fiok-benefits .posgy-fiok-num {
	color: var(--posgy-dark-accent);
	font-weight: 800;
	flex: 0 0 auto;
}

/* Két hasáb, mint a terven: E-mail, Cégnév, Adószám, Telefonszám,
   Kapcsolattartó — akárhonnan is jönnek (a WooCommerce saját e-mail mezője,
   a meglévő "cégnév + adószám" Code Snippet, vagy ez a fájl), mindegyik
   `.form-row` egy rácscella, a `float`/`width` WooCommerce-alap mit sem
   számít rács-elrendezésben. */
.posgy-fiok-partner-fields {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--posgy-r-box);
	padding: 18px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 4px 12px;
}

/* Telefonon egy hasáb. A két `1fr` sáv minimuma a mező saját szélessége
   volt: 375 px-en a mezők a sötét panel jobb szélén túl, a Fiókom lap
   27 px-rel a képernyőn kívülre ért (mérve 2026-09-17, vendégként). */
@media (max-width: 782px) {
	.posgy-fiok-partner-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

.posgy-fiok-partner-fields .posgy-fiok-mini-title {
	font-size: 14px;
	font-weight: 800;
	margin: 0 0 12px;
}

/* A 2 hasábos rács CSAK a mezőpárokra vonatkozik. Élőben ellenőrizve, hogy
   ebbe a dobozba a WooCommerce még négy dolgot renderel, amik mind
   fél cellába szorultak a mezők mellé (látszott is: az "E-mail cím" mező
   MELLETT jobbra a jelszó-tájékoztató szöveg). Ezek teljes szélességet
   kapnak:

   - `.posgy-fiok-mini-title` — a doboz saját címe
   - `p:not([class])` — a WooCommerce jelszó-tájékoztatója
   - `.woocommerce-privacy-policy-text` — az adatkezelési szöveg
   - `.form-row:last-child` — a "Regisztráció" submit sor

   Az e-mail mezőt a WooCommerce SAJÁT `--wide` jelölése teszi teljes
   szélességűvé. A `form-row-wide` (kettős kötőjel nélküli) változatot a
   cégnév/adószám snippet használja — azok szándékosan párban maradnak,
   ahogy a terven is. */
.posgy-fiok-partner-fields > .posgy-fiok-mini-title,
.posgy-fiok-partner-fields > .woocommerce-form-row--wide,
.posgy-fiok-partner-fields > .woocommerce-privacy-policy-text,
.posgy-fiok-partner-fields > p:not([class]),
.posgy-fiok-partner-fields > .form-row:last-child {
	grid-column: 1 / -1;
}

/* Rejtett attribúciós mezők — nem foglalhatnak rácscellát, mert egy üres
   lyukat ütnek a mezőpárok közé. */
.posgy-fiok-partner-fields > wc-order-attribution-inputs {
	display: none;
}

/* A WooCommerce jelszó-tájékoztatója a sötét panelen — ugyanaz a
   halk hangerő, mint az adatkezelési szövegé. */
.posgy-fiok-partner-fields > p:not([class]) {
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .65);
	margin: 0 0 10px;
}

.posgy-fiok-partner-fields .form-row {
	margin: 0 0 10px;
	float: none;
	width: auto;
}

/* A sötét panel mezői — ugyanaz a forma, más bőr. A szelektor
   szándékosan hosszabb a fenti általános mezőszabálynál (1,4,0 az 1,3,0
   ellen), hogy ne a fájlon belüli sorrend döntsön. */
.woocommerce-account #customer_login .posgy-fiok-partner-panel .posgy-fiok-partner-fields .input-text {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	border-radius: var(--posgy-r-input);
	/* A térköz/betűméret itt is a snippeté — lásd a fenti mezőszabályt. */
}

.posgy-fiok-partner-fields .input-text::placeholder {
	color: rgba(255, 255, 255, .55);
}

.posgy-fiok-partner-fields label {
	color: rgba(255, 255, 255, .85) !important;
}

.posgy-fiok-sla {
	font-size: 12px;
	color: rgba(255, 255, 255, .65);
	margin: 12px 0 0;
	line-height: 1.5;
}

/* ====================================================================
   HERO — Wp\AccountPanel::render(). "Szia <név>!", a forgalom-mondat, a
   sáv és a két szint-címke a bal oszlopban; a "Legutóbbi rendelés" (ha
   Wp\AccountOverview kitölti) a jobbban. Egyetlen keret, ahogy a terven —
   se a bal, se a jobb oszlopnak nincs saját külön kártyája.
   ==================================================================== */
/* NINCS saját alsó margó: a hero a `.posgy-fiok-content` flex-oszlop első
   eleme, a kártyák közti térközt EGYEDÜL annak `gap:14px`-e adja. A
   korábbi `margin:0 0 22px` ehhez hozzáadódott, ezért volt a hero alatt
   más a térköz, mint a többi kártya között. */
.posgy-fiok-hero {
	background: var(--posgy-dark);
	color: #fff;
	border-radius: var(--posgy-r-card);
	padding: 24px;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

.posgy-fiok-hero.has-jobb {
	grid-template-columns: 1.2fr 1fr;
}

.posgy-fiok-hero-cim {
	margin: 0 0 6px;
	font-size: var(--posgy-fs-h2);
	font-weight: 700;
	line-height: var(--posgy-lh-h2);
	color: #fff;
}

.posgy-fiok-hero-szoveg {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .8);
}

.posgy-fiok-hero-szoveg strong {
	color: #fff;
}

.posgy-fiok-hero-sav {
	height: 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .15);
	overflow: hidden;
	margin: 0 0 9px;
}

.posgy-fiok-hero-sav > div {
	height: 100%;
	background: var(--posgy-dark-accent);
	border-radius: 999px;
}

.posgy-fiok-hero-cimkek {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, .75);
}

.posgy-fiok-hero-jobb {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--posgy-r-box);
	padding: 18px;
}

@media (max-width: 782px) {
	.posgy-fiok-hero.has-jobb {
		grid-template-columns: 1fr;
	}
}

/* ====================================================================
   FIÓK-ÁTTEKINTŐ — Wp\AccountOverview kártyái, priority 6 az
   Wp\AccountPanel (priority 5) után.
   ==================================================================== */
/* A „Rendeléseim” és a „Mentett listák” kártya egymás mellett, telefonon
   egymás alatt. Eddig a PHP inline stílusa volt (`1.25fr 1fr`), amit mobilon
   semmi nem írhatott felül: 375 px-en 172 és 137 px-es oszlop lett, és a
   „#28280 rendelés – 2026-08-14” szavanként tört. Addig nem látszott, amíg a
   lapkasáv 1027 px-re nem feszítette a fiókot (2026-09-17). */
.posgy-fiok-kartyak {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 14px;
}

@media (max-width: 782px) {
	.posgy-fiok-kartyak {
		grid-template-columns: minmax(0, 1fr);
	}
}

.posgy-fiok-kartya {
	background: var(--posgy-card);
	border: 1px solid var(--posgy-line);
	border-radius: var(--posgy-r-card);
	padding: 20px;
}

.posgy-fiok-kartya-cim {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 800;
	color: var(--posgy-ink);
}

/* A "legutóbbi rendelés" tartalma (`Wp\AccountOverview::renderLatestOrderCard()`)
   ma a hero jobb oszlopában (`.posgy-fiok-hero-jobb`) renderel, saját keret
   nélkül — lásd az osztály docblockját. Csak a gomb saját stílusa marad itt. */
/* Ugyanaz a gomb-token, mint a belépés/regisztráció submitjén — lásd az
   ottani indoklást.

   A LÁNCBAN KÉTSZER ÁLL AZ OSZTÁLY, ÉS EZ MÉRÉSRE VÁLASZ. Az Elementor
   „site settings" gomb-stílusa MINDEN `<button>`-t megfest:

       .elementor-kit-13 button, … .elementor-kit-13 .elementor-button {
         background-color: var(--e-global-color-text);   → #52555A szürke
         color: var(--e-global-color-secondary);         → #F6F7F7
         border-radius: 0 0 15px;
         padding: 15px;
         letter-spacing: .5px;
       }

   Az a szelektor 0,1,1 fajsúlyú, ez a szabály egyetlen osztállyal 0,1,0
   volt — vagyis VESZTETT. Mérve 2026-08-31-én az élő vezérlőpulton: az
   „Újrarendelem" gomb szürke (#52555A) volt, a sarka 0 0 15 px, a belső
   tere 15 px; egyedül a betűméret és a súly jött innen, mert azokat a kit
   nem adja meg. A vevő a fiókja legfeltűnőbb műveletét szürkén látta, egy
   olyan sarokformával, ami a lapon sehol máshol nincs.

   A kétszer írt osztály 0,2,0 — a kit fölött, elem-azonosító és
   `!important` nélkül. Az `elementor-kit-13` osztályra szándékosan NEM
   írunk: az a site-beállítás bejegyzés-azonosítója, egy újjáépítéssel
   némán elavul. */
.posgy-fiok-ujra.posgy-fiok-ujra {
	background: var(--posgy-primary);
	color: #fff;
	border: 0;
	border-radius: var(--posgy-r-btn);
	min-height: var(--posgy-btn-h);
	padding: var(--posgy-btn-py) var(--posgy-btn-px);
	font-weight: 800;
	font-size: var(--posgy-fs-button);
	line-height: 1.3;
	letter-spacing: 0;
	cursor: pointer;
	width: 100%;
}

.posgy-fiok-ujra.posgy-fiok-ujra:hover:not(:disabled) {
	background: var(--posgy-primary-hover);
}

.posgy-fiok-ujra:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* Folyamatsáv — kizárólag vizuális, sosem tartalmaz gombot/linket. */
.posgy-fiok-folyamat {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.posgy-fiok-folyamat li {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.posgy-fiok-folyamat .posgy-fiok-folyamat-sav {
	height: 7px;
	border-radius: 999px;
	background: var(--posgy-line);
}

.posgy-fiok-folyamat li.is-reached .posgy-fiok-folyamat-sav {
	background: var(--posgy-primary);
}

.posgy-fiok-folyamat .posgy-fiok-folyamat-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--posgy-muted);
}

.posgy-fiok-folyamat li.is-reached .posgy-fiok-folyamat-label,
.posgy-fiok-folyamat li[aria-current="step"] .posgy-fiok-folyamat-label {
	font-weight: 800;
	color: var(--posgy-ink);
}

.posgy-fiok-ures {
	font-size: 14px;
	color: var(--posgy-muted);
	line-height: 1.5;
}

/* ====================================================================
   WOOCOMMERCE SAJÁT TÁBLÁI a fiókban (rendelések, rendelés részletei).
   Alapból `border-collapse: separate` + minden cellán saját 1px-es
   szegély, azaz teljes szegélyrács — idegen a lap kártyás
   formanyelvétől. Itt egy kártya, szaggatott sorelválasztóval, ahogy a
   terven a számlalista.
   ==================================================================== */
.posgy-fiok-content .shop_table {
	width: 100%;
	margin: 0;
	background: var(--posgy-card);
	border: 1px solid var(--posgy-line);
	/* `separate` + `border-spacing: 0`, NEM `collapse`: összevont
	   szegélyeknél a böngésző figyelmen kívül hagyja a lekerekítést. */
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--posgy-r-card);
	overflow: hidden;
}

.posgy-fiok-content .shop_table th,
.posgy-fiok-content .shop_table td {
	border: 0;
	border-bottom: 1px dashed var(--posgy-line);
	padding: 14px 16px;
	text-align: left;
	vertical-align: middle;
	font-size: 14px;
	color: var(--posgy-ink);
}

.posgy-fiok-content .shop_table thead th {
	background: none;
	border-bottom: 1px solid var(--posgy-line);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--posgy-muted);
}

.posgy-fiok-content .shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.posgy-fiok-content .shop_table .woocommerce-orders-table__cell-order-number a {
	color: var(--posgy-primary);
	font-weight: 800;
	text-decoration: none;
}

/* A GOMBOK ÖSSZECSÚSZÁSA. A WooCommerce a művelet-gombokat csupasz
   testvérelemként rendereli a cellába, margó nélkül — élőben mérve
   pontosan 0px hézag volt közöttük. A cellát NEM alakítjuk flex
   konténerré (egy `<td>` display-jének felülírása megbontja a táblázat
   sorelrendezését), a térközt margó adja.

   CSAK A TÉRKÖZ A MIÉNK, A GOMB KINÉZETE NEM. A gombok bőrét (háttér,
   keret, sugár, betűméret, belső térköz) a "POSPRO – UX javítócsomag"
   élő snippet mondja ki, `!important`-tal, az egész boltra egységesen.
   Ez az ő dolga — egy szabály, egy hely —, ezért itt SEM padding, SEM
   border-radius, SEM háttér nincs: azok úgyis veszítenének, és csak
   félrevezető holt kód maradna a fájlban. Ha a "Számla" gombot
   másodlagossá (keretessé) kell tenni, az a snippet saját
   "Másodlagos gomb" szabályának szelektorlistáját bővíti, nem ezt. */
.posgy-fiok-content .woocommerce-orders-table__cell-order-actions .button {
	margin: 3px 8px 3px 0;
}

.posgy-fiok-content .woocommerce-orders-table__cell-order-actions .button:last-child {
	margin-right: 0;
}

.posgy-fiok-szamla-sor {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px dashed var(--posgy-line);
	font-size: 14px;
}

.posgy-fiok-szamla-sor:last-child {
	border-bottom: 0;
}

.posgy-fiok-szamla-sor .posgy-fiok-osszeg {
	font-weight: 800;
	color: var(--posgy-ink);
}

.posgy-fiok-szamla-sor .posgy-fiok-lejart {
	color: #b91c1c;
	font-weight: 700;
}

.posgy-fiok-lista-kartya {
	border: 1px solid var(--posgy-line);
	border-radius: var(--posgy-r-input);
	padding: 13px;
}

.posgy-fiok-lista-kartya .posgy-fiok-lista-nev {
	font-size: 14px;
	font-weight: 800;
	color: var(--posgy-ink);
}

.posgy-fiok-lista-kartya .posgy-fiok-lista-meta {
	font-size: 13px;
	color: var(--posgy-muted);
	margin-top: 2px;
}

/* ====================================================================
   CÉGADATOK — a `cegadat` endpoint. 2026-08-28 óta ez a lap a TELJES
   számlázási cím: a WooCommerce saját billing mezőkészletét rendereli
   (`Wp\AccountAuth::renderCegadat()`), tehát itt a WooCommerce saját
   `form-row-first` / `form-row-last` / `form-row-wide` osztályaira kell
   igazodni, nem egy kézzel felsorolt mezőlistára.
   ==================================================================== */
.posgy-fiok-cegadat-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
	margin-top: 18px;
}

.posgy-fiok-cegadat-form .form-row {
	margin: 0 0 16px;
	/* A WooCommerce float-alapú `form-row-first/last`-ja itt rácscella. */
	float: none;
	width: auto;
	padding: 0;
}

.posgy-fiok-cegadat-form .form-row-wide,
.posgy-fiok-cegadat-form > .form-row:last-child {
	grid-column: 1 / -1;
}

.posgy-fiok-cegadat-form label {
	font-size: 14px;
	font-weight: 800;
	color: var(--posgy-ink);
	display: block;
	margin-bottom: 6px;
}

/* A `.woocommerce-account` előtag a MEZŐ SARKÁÉRT van — lásd a
   „Mentett listák" űrlapjánál álló, hosszabb indoklást: a UX-snippet
   `.woocommerce input[type=text]` szabálya ugyanolyan fajsúlyú, és utána
   nyomtatódik, ezért 6 px-re kerekítette a fiók mezőit. */
.woocommerce-account .posgy-fiok-cegadat-form .input-text,
.woocommerce-account .posgy-fiok-cegadat-form select,
.woocommerce-account .posgy-fiok-cegadat-form .select2-container {
	border-radius: var(--posgy-r-input);
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-account .posgy-fiok-cegadat-form .input-text,
.woocommerce-account .posgy-fiok-cegadat-form select {
	border: 1px solid var(--posgy-line-strong);
	padding: 14px 15px;
	background: var(--posgy-card);
	color: var(--posgy-ink);
}

@media (max-width: 782px) {
	.posgy-fiok-cegadat-form {
		grid-template-columns: 1fr;
	}
}

/* Az "Alapértelmezett" jelölés a Címeim listában. Nem gomb és nem link —
   állapot, ezért halkabb, mint bármelyik művelet a sorban. */
.posgy-cim-jeloles {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(242, 148, 33, .12);
	color: var(--posgy-primary);
	font-size: 12px;
	font-weight: 800;
	vertical-align: middle;
}

.posgy-cim-sor.is-alap {
	border-color: var(--posgy-primary);
}

.posgy-fiok-cegadat-form button {
	background: var(--posgy-primary);
	color: #fff;
	border: 0;
	border-radius: var(--posgy-r-btn);
	min-height: var(--posgy-btn-h);
	padding: var(--posgy-btn-py) var(--posgy-btn-px);
	font-weight: 800;
	font-size: var(--posgy-fs-button);
	line-height: 1.3;
	cursor: pointer;
}

.posgy-fiok-cegadat-form button:hover {
	background: var(--posgy-primary-hover);
}

.posgy-fiok-notice {
	border-radius: var(--posgy-r-input);
	padding: 13px 15px;
	font-size: 14px;
	margin: 0 0 16px;
}

.posgy-fiok-notice.is-success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
}

.posgy-fiok-notice.is-warn {
	background: var(--posgy-warn-bg);
	border: 1px solid var(--posgy-warn-line);
	color: var(--posgy-warn-ink);
}

/* ====================================================================
   MENTETT LISTÁK / CÍMEIM — a `Wp\SavedLists` / `Wp\ShippingAddresses`
   endpont-sorai; ugyanazt a `.posgy-fiok-lista-kartya` alapot bővítik
   gombsorral és állapot-sorral, amit a fiók-áttekintő kártyája már bevezet.
   ==================================================================== */
.posgy-fiok-lista-sorok,
.posgy-fiok-cim-sorok,
.posgy-fiok-kedvenc-sorok {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.posgy-lista-gombok {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

/* A ház kicsi gombja (`gombok.css`), „semleges" szereppel: fehér alap, 1 px
   vonal, tinta felirat — a lista sorának mellékes műveletei. A „Kosárba" az
   elsődleges, a törlés a piros. */
.posgy-lista-gombok button,
.posgy-lista-gombok a {
	border: 1px solid var(--posgy-btn-line);
	background: var(--posgy-card);
	color: var(--posgy-ink);
	border-radius: var(--posgy-btn-radius);
	padding: 0 var(--posgy-btn-px-sm);
	font-size: var(--posgy-fs-button-sm);
	font-weight: 800;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.posgy-lista-gombok .posgy-lista-kosarba,
.posgy-lista-gombok .posgy-fiok-kedvenc-kosarba {
	background: var(--posgy-primary);
	border-color: var(--posgy-primary);
	color: #fff;
}

.posgy-lista-gombok .posgy-lista-torol,
.posgy-lista-gombok .posgy-cim-torol {
	color: #b91c1c;
	border-color: #fecaca;
}

/* A KEDVENCEK SORÁBAN A KÉT GOMB EGYFORMA MAGAS. Mérve (2026-08-30,
   `/fiokom/kedvencek/`): a „Kosárba" 48 px, az „Eltávolítás" 38 — pedig
   azonos a paddingjuk és a betűméretük. Két ok adódott össze:

   1. A `.posgy-kedvenc-gomb` a TERMÉKOLDALRA készült, és visz egy
      `margin: 10px 0 0`-t. A sáv flex-konténer `stretch` igazítással: a
      margó megnöveli a konténer magasságát, a szomszéd gomb pedig ráfeszül
      — innen a 10 px különbség, pontosan a margó mérete.
   2. A `.posgy-lista-gombok button, … a` szabály `display: inline-block`-ra
      állítja a gombot, amivel elveszik a saját `inline-flex` + `gap`-je: a
      szív ikon és az „Eltávolítás" felirat szóköz nélkül tapadt össze.

   Itt tehát a listás használat felülírja a termékoldalit: nincs margó, és a
   gombok a saját belső elrendezésüket kapják vissza. */
.posgy-lista-gombok {
	align-items: center;
}

.posgy-lista-gombok button,
.posgy-lista-gombok a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--posgy-btn-h-sm);
}

/* „MENTÉS LISTAKÉNT" A RENDELÉS LAPJÁN — eddig EGYETLEN szabály sem érte
   el (`Wp\SavedLists::renderSaveAsListButton()`, a `<p
   class="posgy-lista-rendelesbol">`-ban áll, nem a `.posgy-lista-gombok`
   sávban). Ezért a téma és az Elementor alapértékén maradt; mérve
   2026-08-31-én egy élő rendelés lapján: szürke (#52555A) háttér,
   1 px-es #CC3366 BORDÓ keret, `border-radius: 0 0 15px`, 16px/400.
   A bordó a hello-elementor `reset.css` gombszíne — ugyanaz a szín, ami a
   mini kosár terméknevein is előjött.

   Ugyanaz a másodlagos forma, mint a listák és a címek sorában: fehér
   lap, halvány keret, pirula-sarok. Az osztály kétszer áll a láncban, hogy
   az Elementor kit 0,1,1-es gombszabálya fölé kerüljön — ld. a
   `.posgy-fiok-ujra` melletti indoklást. */
.woocommerce-account .posgy-lista-uj-rendelesbol.posgy-lista-uj-rendelesbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--posgy-btn-h-sm);
	border: 1px solid var(--posgy-btn-line);
	background: var(--posgy-card);
	color: var(--posgy-ink);
	border-radius: var(--posgy-btn-radius);
	padding: 0 var(--posgy-btn-px-sm);
	font-size: var(--posgy-fs-button-sm);
	font-weight: 800;
	letter-spacing: 0;
	cursor: pointer;
}

.woocommerce-account .posgy-lista-uj-rendelesbol.posgy-lista-uj-rendelesbol:hover:not(:disabled) {
	background: #FDF3E6;
	border-color: var(--posgy-primary);
}

.woocommerce-account .posgy-lista-uj-rendelesbol.posgy-lista-uj-rendelesbol:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.posgy-lista-gombok .posgy-kedvenc-gomb {
	margin: 0;
	font-size: var(--posgy-fs-button-sm);
}

.posgy-lista-uj-form,
.posgy-cim-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 480px;
}

.posgy-lista-uj-form label,
.posgy-cim-form .form-row label {
	font-size: 13px;
	font-weight: 800;
	color: var(--posgy-ink);
}

/* A `.woocommerce-account` ELŐTAG A MEZŐ SARKÁÉRT VAN.

   A „UX javítócsomag" snippet (205, ld. docs/redesign/snippet-leltar.md)
   minden bolti mezőnek ezt adja:

       .woocommerce input[type=text], … , .woocommerce select {
         min-height: 48px !important;
         font-size: 16px !important;
         padding: 12px 14px !important;
         border-radius: 6px;
       }

   A térköz és a betűméret `!important` — azt a snippet szándékosan viszi
   (iOS Safari 16 px alatt ráközelít a mezőre), és nem is vitatjuk. A
   SAROK viszont nem `!important`, csak fajsúlyban egyezett a miénkkel
   (0,2,1 mindkettő), és a snippet a lap végén, a mi lapunk UTÁN
   nyomtatódik — így a döntetlent ő nyerte. Mérve 2026-08-31-én a
   „Mentett listák" lapon: a mező sarka 6 px volt, a pénztár ugyanolyan
   mezője 11 — két lap, két forma, ugyanaz az űrlapmező.

   A `.woocommerce-account` előtaggal a lánc 0,3,1, és a fiók mezői a
   bolt vezérlő-fokát (11 px) veszik fel. A snippet térköze és
   betűmérete érintetlen marad. */
.woocommerce-account .posgy-lista-uj-form input[type="text"],
.woocommerce-account .posgy-lista-uj-form select,
.woocommerce-account .posgy-cim-form .input-text {
	border: 1px solid var(--posgy-line-strong);
	border-radius: var(--posgy-r-input);
	padding: 12px 13px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
}

.posgy-lista-uj-form button[type="submit"],
.posgy-cim-form button[type="submit"] {
	align-self: flex-start;
	background: var(--posgy-primary);
	color: #fff;
	border: 0;
	border-radius: var(--posgy-r-btn);
	min-height: var(--posgy-btn-h);
	padding: var(--posgy-btn-py) var(--posgy-btn-px);
	font-weight: 800;
	font-size: var(--posgy-fs-button);
	line-height: 1.3;
	cursor: pointer;
}

.posgy-lista-uj-form button[type="submit"]:hover,
.posgy-cim-form button[type="submit"]:hover {
	background: var(--posgy-primary-hover);
}

/* ====================================================================
   KEDVENCEK — a `[posgy_kedvenc]` gomb (termékoldal) és a `kedvencek`
   fiók-lista sorai (`Wp\Favorites`).
   ==================================================================== */
.posgy-kedvenc-gomb {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* A ház körvonalas, kicsi gombja (`gombok.css`). */
	background: var(--posgy-card, #fff);
	border: var(--posgy-btn-border) solid var(--posgy-btn-bg);
	border-radius: var(--posgy-btn-radius);
	min-height: var(--posgy-btn-h-sm);
	padding: 0 var(--posgy-btn-px-sm);
	font-size: var(--posgy-fs-button-sm);
	font-weight: 800;
	color: var(--posgy-btn-bg);
	cursor: pointer;
	margin: 10px 0 0;
}

.posgy-kedvenc-gomb.is-active {
	border-color: var(--posgy-primary, #F29421);
	color: var(--posgy-primary, #F29421);
}

.posgy-kedvenc-gomb:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.posgy-fiok-kedvenc-sor {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--posgy-line);
}

.posgy-fiok-kedvenc-sor:last-child {
	border-bottom: 0;
}

.posgy-fiok-kedvenc-kep img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--posgy-r-pill);
	display: block;
}

.posgy-fiok-kedvenc-info {
	flex: 1;
	min-width: 0;
}

.posgy-fiok-kedvenc-nev {
	font-size: 14px;
	font-weight: 800;
	color: var(--posgy-ink);
	text-decoration: none;
}

.posgy-fiok-kedvenc-ar {
	font-size: 13px;
	color: var(--posgy-muted);
	margin-top: 2px;
}

/* Telefonon a gombok saját sorba kerülnek. Egy sorban a két gomb 204 px-t
   vett el a 283 px-es sorból: a név és az ár doboza 0 px-re zsugorodott, a
   név szavanként tört és a gombok alá lógott (mérve 375 px-en, 2026-09-17). */
@media (max-width: 782px) {
	.posgy-fiok-kedvenc-sor {
		flex-wrap: wrap;
	}

	.posgy-fiok-kedvenc-kep {
		flex-shrink: 0;
	}

	.posgy-fiok-kedvenc-sor .posgy-lista-gombok {
		flex-basis: 100%;
	}
}

/* ====================================================================
   PÉNZTÁR — mentett cím-választó (`Wp\ShippingAddresses::renderCheckoutPicker()`).
   ==================================================================== */
.posgy-checkout-cim-valaszto {
	margin: 0 0 18px;
}

.posgy-checkout-cim-valaszto label {
	display: block;
	font-size: 13px;
	font-weight: 800;
	color: var(--posgy-ink, #2D2A33);
	margin-bottom: 6px;
}

.posgy-checkout-cim-valaszto select {
	width: 100%;
	max-width: 420px;
	border: 1px solid var(--posgy-line, #E4DCCE);
	border-radius: var(--posgy-r-input);
	padding: 11px 13px;
	font-size: 14px;
}

/* ====================================================================
   IDEKÖLTÖZÖTT: A FIÓK BELÉPŐ LAPJA  (a Testreszabó „B3" blokkja).

   Értékajánlat-doboz a belépés fölött, és két hasábban a belépés meg a
   regisztráció. A `float: none` azért kell, mert a WooCommerce
   `.u-column1/2`-je lebegtetve érkezik, és a flex-konténerben a lebegés
   nem szűnik meg magától.
   ==================================================================== */
.posgy-fiok-ertek {
  margin: 0 0 28px;
  padding: 18px 20px;
  border-left: 4px solid var(--posgy-brand, #ef8022);
  background: #f7f7f7;
}

.posgy-fiok-ertek h2 { margin: 0 0 10px; font-size: var(--posgy-fs-h2); font-weight: 700; line-height: var(--posgy-lh-h2); }
.posgy-fiok-ertek ul { margin: 0; padding-left: 18px; }
.posgy-fiok-ertek li { margin: 0 0 4px; }

@media (min-width: 768px) {
  #customer_login.u-columns {
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  #customer_login .u-column1,
  #customer_login .u-column2 {
    float: none;
    width: 50%;
  }
}