/* ==================================================================== AMI MINDEN OLDALON OTT VAN. Két dolog nem a bolt felületeihez tartozik, hanem a laphoz magához: a link-szín és a fejléc mini kosara. A `bolt.css` csak vásárlási felületekre megy ki (ld. `Wp\ShopStyle`), a fejléc viszont a szöveges oldalakon (ÁSZF, blog, kapcsolat) is ugyanaz — ezért van ez külön fájlban, és ezért megy ki mindenhová (`Wp\SiteStyle`). ==================================================================== */ /* ==================================================================== A LAP LINK-SZÍNE. A hello-elementor 3.4.9 `reset.css`-e minden saját szín nélküli linket `#CC3366`-ra fest (a hover `#333366`). Mérve 2026-08-30-án az élő főlapon: a mini kosár terméknevei és a törlés-ikonjai emiatt voltak bordók, és ugyanez a szín jött volna elő minden szövegoldali linken. A szelektor szándékosan csupasz `a`, ugyanaz a fajsúly, mint a témáé — csak később nyomtatódik. Így minden komponens, aminek SAJÁT link-színe van, érintetlen marad. A `#B35A00` a bolt sötét narancs tintája: a `#F29421` fehér háttéren olvashatatlan szövegként. Ugyanaz a párosítás, amit az `arsav.css` belépés-linkje használ. ==================================================================== */ a { color: #B35A00; } a:hover, a:focus, a:active { color: #F29421; } /* ==================================================================== MINI KOSÁR: a gombok maradjanak a képernyőn belül. Mérve 2026-08-30-án (773 px magas ablak, 31 tételes kosár): a legördülő panel `position: fixed`, magassága a teljes képernyő, és a benne lévő TERMÉKLISTA magasságát az Elementor egyszer kiszámolja (`max-height: 523px`). A panel tetejére viszont a „POSPRO – Ingyenes szállítás jelző" snippet (ld. docs/redesign/snippet-leltar.md, 202) utólag beszúr egy 63 px-es sávot — az a számítás után érkezik, és senki nem számol vele újra. Következmény: a „Kosár" és a „Pénztár" gomb alja 15 px-cel a képernyő ALÁ csúszott, desktopon és mobilon egyaránt; a vásárlónak a hüvelykujj-zónán kívülre kellett nyúlnia egy olyan gombért, ami félig nem is látszott. A JAVÍTÁS NEM SZÁMOL ÚJRA SEMMIT. A lista kapja a MARADÉK helyet (`flex: 1` + `min-height: 0`, hogy zsugorodni is tudjon), az összeg és a gombok pedig fix magasságúak maradnak. Így akármi kerül még a panel tetejére — jelző, kupon-üzenet, bármi —, a gombok a képernyőn belül maradnak, és a lista görög helyettük. A `100dvh` a mobil böngészők behúzódó címsorát kezeli; a `100vh` előtte a fallback annak, ami nem ismeri. ==================================================================== */ .elementor-menu-cart__main { max-height: 100vh; max-height: 100dvh; } .elementor-menu-cart__main .widget_shopping_cart_content { flex: 1 1 auto; min-height: 0; } /* A `!important` mérésre válasz: a fix magasságot az Elementor saját szabálya adja, és nélküle a lista nem tudna a maradék helyhez igazodni. */ .elementor-menu-cart__main .elementor-menu-cart__products { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; } .elementor-menu-cart__main .elementor-menu-cart__subtotal, .elementor-menu-cart__main .elementor-menu-cart__footer-buttons { flex: 0 0 auto; } /* A FELIRAT ELŐL ELTŰNIK A FÜGGŐLEGES VONALKA, ÉS KÖZÉPRE ÁLL — a mini kosár gombjainak formája és színe 2026-09-16 óta a `gombok.css`-ben van. */ .elementor-menu-cart__footer-buttons a.elementor-button .elementor-button-text::before { content: none !important; } .elementor-menu-cart__footer-buttons a.elementor-button .elementor-button-text { justify-content: center; } /* A PANEL RÉSZÖSSZEGE IS FEHÉR VOLT — és fehér háttéren ez azt jelentette, hogy a vásárló NEM LÁTTA a kosara összegét a mini kosárban (mérve 2026-08-30: a „Részösszeg:" címke látszott, a szám nem). A forrás a fejléc kosárgombja: a sávban a „31 TÉTEL · 264 505 FT" fehér szöveg a narancs gombon, és az ehhez tartozó Elementor-szabály MINDEN `.woocommerce-Price-amount`-ra érvényes a widgeten belül — a legördülő panelre is. Három osztályból áll és `!important`-tal jön, ezért kell ide négy osztály: a `wrapper` csak azért van a láncban, hogy a panelen belül biztosan nyerjünk. A fejléc gombja érintetlen marad, mert az nincs a `__main` panelen belül. */ .elementor-menu-cart__wrapper .elementor-menu-cart__main .elementor-menu-cart__subtotal .woocommerce-Price-amount, .elementor-menu-cart__wrapper .elementor-menu-cart__main .elementor-menu-cart__subtotal .woocommerce-Price-amount * { color: #2D2A33 !important; } /* ==================================================================== OLDALTÉR — EGY SZÁM, MINDEN LAPON (2026-09-17) Attila: „telefonon több helyen is nincs margó, ugrál, változik oldalon belül". Élőben mérve, szakaszonként a legközelebbi tinta (szöveg, kép, gomb, kártya) távolsága a képernyő szélétől: 375 px kezdőlap 0 / 26 / 31 / 8 / 19 / 29 / 36, termékoldal 0 és 10, kategórialap 20, lábléc 36; a Fiókom 27 px-rel szélesebb volt a képernyőnél 768 px kezdőlap 0 / 20 / 38 / 45 / 60, kosár és fiók 84, a lábléc gombja 14 px-re a jobb széltől 1280 px a termékoldal morzsamenüje és galériája 0, a vásárlókártya a jobb szélhez ér; a kezdőlap előny-sávja 0, terméklistája 8 Ahány szerző, annyi margó: minden Elementor-szakasz a saját belső terét hozta (0, 10, 20, 5%, 8%), a beágyazott konténerek még 10-et, a téma `main`-je 10-et, a kosár-blokk 16-ot. A SZABÁLY: az oldaltér a legkülső szakaszé, és csak az övé. - `--posgy-margo`: 26 px, mint a fejléc asztali oldaltere és a tartalom-oldalaké; telefonon 16 px, mint a terv mobil képernyőin. - Telefonon és tableten minden legkülső Elementor-szakasz pontosan ennyit kap (a fejléc kivétel: annak saját rácsa van). Asztalon ennyi a MINIMUM — ahol a sablon szándékosan többet ad (a vélemények és a hírlevél 8%-a a kategórialapon), az marad. - A szakasz belseje 0, és a beágyazott konténerek alapértelmezett 10 px-e is 0 (amit a sablon kifejezetten beállít, az marad). A hurok-elem — termékkártya, listasor — visszakapja: az a kártya belső tere, nem a lapé. - Elementor nélküli lapon (kosár, fiók, tartalom-oldalak, 404) telefonon és tableten a `main` adja ugyanezt; asztalon a téma 1140 px-es doboza körül úgyis több marad. ==================================================================== */ :root { --posgy-margo: 26px; } @media (max-width: 767px) { :root { --posgy-margo: 16px; } } /* A `body` és a `:not()` lista (0,4,1)-re emeli: az Elementor elem-azonosítós szabályai (0,3,0) csak változót írnak, a paddinget a `.e-con` (0,1,0) teszi ki. A `:not()` utolsó tagja a BEÁGYAZOTT dokumentumot zárja ki (hurok-elem, beszúrt sablon): az nem kap második oldalteret. A `--padding-inline-start` az Elementor saját változója — benne a sablon értéke, ha van, különben a nullázott alapérték. */ body [data-elementor-type]:not([data-elementor-type="header"], [data-elementor-type="popup"], [data-elementor-type] [data-elementor-type]) > .e-con { --container-default-padding-left: 0px; --container-default-padding-right: 0px; padding-inline-start: max(var(--posgy-margo), var(--padding-inline-start, 0px)); padding-inline-end: max(var(--posgy-margo), var(--padding-inline-end, 0px)); } body [data-elementor-type]:not([data-elementor-type="header"], [data-elementor-type="popup"], [data-elementor-type] [data-elementor-type]) > .e-con > .e-con-inner { padding-inline: 0; } body [data-elementor-type="loop-item"] { --container-default-padding-left: initial; --container-default-padding-right: initial; } @media (max-width: 1024px) { body [data-elementor-type]:not([data-elementor-type="header"], [data-elementor-type="popup"], [data-elementor-type] [data-elementor-type]) > .e-con { padding-inline: var(--posgy-margo); } /* A régi szakasz-rendszer (a Roll-up választó lapja): a szakasz adja az oldalteret, a SZÉLSŐ hasábok külső belső tere 0 — a hasábok köze marad. */ body [data-elementor-type]:not([data-elementor-type="header"], [data-elementor-type="popup"], [data-elementor-type] [data-elementor-type]) > .elementor-section { padding-inline: var(--posgy-margo); } body [data-elementor-type]:not([data-elementor-type="header"], [data-elementor-type="popup"], [data-elementor-type] [data-elementor-type]) > .elementor-section > .elementor-container > .elementor-column:first-child > .elementor-element-populated { padding-inline-start: 0; } body [data-elementor-type]:not([data-elementor-type="header"], [data-elementor-type="popup"], [data-elementor-type] [data-elementor-type]) > .elementor-section > .elementor-container > .elementor-column:last-child > .elementor-element-populated { padding-inline-end: 0; } /* Tableten a téma `main`-je 600 és 800 px-es doboz volt 10 px-es belső térrel: 768 px-en a kosár és a fiók 84 px-en kezdődött. */ body:not([class*="elementor-page-"]) main.site-main { max-width: none; padding-inline: var(--posgy-margo); } /* A Roll-up választó saját burka (a lap HTML-widgetjének stílusa) még 12 px-et tett a szakaszéhoz: a kártyája 38 px-en állt a 26 helyett. */ body .ppro-wrap { padding-inline: 0; } } /* Telefonon a régi szakasz hasábjai egymás alá kerülnek: mindegyik a szélen. */ @media (max-width: 767px) { body [data-elementor-type]:not([data-elementor-type="header"], [data-elementor-type="popup"], [data-elementor-type] [data-elementor-type]) > .elementor-section > .elementor-container > .elementor-column > .elementor-element-populated { padding-inline: 0; } } /* -------------------------------------------------------------------- LÁBLÉC TABLETEN: KÉT HASÁB, KÉT SOR. A négy hasáb (28/20/24/28%) 40 px-es közökkel 768 px-en nem fért el: mindegyik összement, a leírás hét sorba tört, és az egyszavas „Kapcsolatfelvétel" gomb (179 px) a 167 px-es hasábjából 12 px-szel kilógott — 14 px-re a képernyő szélétől. RÁCS, NEM `--width`. A `calc(50% - köz/2)` a hasábon számolódik, ahol a `--column-gap` már a hasáb SAJÁT 14 px-es köze: 351 + 40 + 351 > 716, és mind a négy egymás alá tört (mérve). A rács sávjai a lábléc saját 40 px-es közével osztanak. A sor tartalom szerint választva: amelyikben hasáb-konténerek vannak (a copyright-sor widgetekből áll). -------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { [data-elementor-type="footer"] > .e-con > .e-con-inner:has(> .e-con-full + .e-con-full) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-elementor-type="footer"] > .e-con > .e-con-inner:has(> .e-con-full + .e-con-full) > .e-con-full { --width: 100%; } } /* ==================================================================== A KERESŐ TALÁLATI PANELJE — a fejléc-sablon Custom CSS-éből (2026-09-16). A panel a `body` végén renderel, minden oldalon, ahol a fejléc kereső van; a sablon CSS-e a bolt direktívájának régi másolata volt, és ez a kettő volt benne, ami sehol máshol nem szerepelt. ==================================================================== */ .dgwt-wcas-suggestions-wrapp { border-radius: 14px !important; overflow: hidden; } .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected { background: #FDF3E6 !important; } /* ==================================================================== A GOMBOK — 2026-09-16 óta egy helyen: `gombok.css`. Innen három szakasz ment át (a kit 0,5 px-es betűköze ellen írt nullázás, a fejléc- és lábléc-gombok geometriája, a megamenü gombja): a kit azóta a ház gombját adja minden gombnak, a betűközt pedig nem állítja. ==================================================================== */ /* ==================================================================== IDEKÖLTÖZÖTT: A 205-ÖS SNIPPET, A 207-ES SNIPPET ÉS A TESTRESZABÓ. 2026-08-31-ig ez a három szabálycsomag a Testreszabó „További CSS" mezőjében és két `wp_head`-be író snippetben élt. Ami közülük MINDEN oldalra való (a jelölő-színek, a fókusz, a fejléc), az ide került — a bolti felületekre valót a `bolt.css` vitte el. Ami emiatt kiderült és javítva lett, lásd a szakaszoknál. ==================================================================== */ /* -------------------------------------------------------------------- A JELÖLŐ-SZÍNEK EGY HELYEN. Eddig a 205-ös snippet `:root` blokkja volt az egyetlen token-réteg, és egy snippetben állt: ha valaki kikapcsolja, minden rá hivatkozó szabály az alapértékre esik vissza. A plugin egyetlen CSS-fájlja sem definiált `:root` tokent. A `--posgy-brand` szándékosan ugyanaz a `#F29421`, amit a `bolt.css` gomb-direktívája nyersen ír — a két érték egy forrásból való, és ha valaha változik, ITT változik. -------------------------------------------------------------------- */ :root { --posgy-brand: #F29421; /* a márka narancsa: gomb- és sávháttér */ --posgy-on-brand: #1A1A1A; /* olvasható tinta a narancs FELETT */ --posgy-brand-ink: #B35A00; /* a narancs mint SZÖVEG, világos háttéren */ --posgy-ink: #2D2A33; /* semleges szövegszín (= fiok/kosar/tartalom) */ --posgy-focus: #0E6B6B; /* billentyűzet-fókusz */ } /* -------------------------------------------------------------------- BILLENTYŰZET-FÓKUSZ — EGY SZABÁLY, KÉT HALOTT ELŐD HELYETT. Élőben mérve 2026-08-31-én (Tab-bal a kezdőlap első linkjére): outline: solid 3px rgb(14,107,107) <- a 205-ös snippettől outline-offset: 2px <- a 205-ös snippettől box-shadow: rgb(0,0,0) 0 0 0 5px <- a TESTRESZABÓTÓL Vagyis a fókuszkeret két különböző forrásból állt össze, és egyiket sem így tervezte senki. A Testreszabó FEHÉR körvonalat kért fekete vetődéssel; a körvonalát a később kiadott snippet felülírta (mindkettő `!important`, azonos fajsúly — a sorrend döntött), a vetődése viszont túlélte, mert a snippet nem ír `box-shadow`-t. Itt most az EGYÜTTES, tényleges élő megjelenés áll, egyetlen szabályban. Ha a fekete vetődés nem kell (a türkiz körvonal önmagában is elég kontrasztos), az egy sor törlése — de az már látszó változás, nem költöztetés, ezért nem itt döntöm el. Miért `oldal.css` és nem `bolt.css`: a `bolt.css` csak bolti felületeken töltődik be (lásd `Wp\ShopStyle::isShopSurface`), a fókusz viszont az ÁSZF-oldalon is kell. -------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .nyomda-mm-trigger:focus-visible { outline: 3px solid var(--posgy-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #000 !important; border-radius: 3px; } /* Az „ugrás a tartalomra" link: képernyőolvasónak mindig ott van, látóan csak fókuszban. A `:focus` és nem `:focus-visible` a helyes, mert ez a link kizárólag billentyűzettel érhető el. */ .skip-link.screen-reader-text:focus { position: fixed !important; top: 8px; left: 8px; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; z-index: 100000; padding: 12px 18px; border: 2px solid var(--posgy-focus); background: #fff; color: var(--posgy-ink); font-size: 16px; } /* A globális sima görgetés minden horgonyugrást lelassít. Aki csökkentett mozgást kért, annál a böngésző úgyis felülírja — ezért a `no-preference`. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: auto; } } /* -------------------------------------------------------------------- MOBIL FEJLÉC — 2026-09-16 óta a `mobil-menu.css` gazdája. Itt állt a Testreszabó `B5` blokkjának maradéka (`position: static`, a 257 px-es ötsoros v2 fejléc ne ragadjon oda) és a vendég üres felső sávjának elrejtése. A telefonos fejléc azóta egy 56 px-es sor egy ígéret-sáv alatt, és ragad — a szabályok a saját fájljában vannak (`Wp\MobileMenu`), hogy egy helyen legyen, ami a telefonos fejlécet adja. -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- A DINAMIKUS ÁRAZÁS TÁBLÁZATA (Advanced Dynamic Pricing). A child téma `style.css`-ének EGYETLEN szabálya volt ez — a téma stíluslapja gyakorlatilag csak ezért létezett. Ugyanezt a komponenst egy Elementor widget egyedi CSS-e is szabályozza (`.addf_drpc_horizontal_tbl_div` elrejtése a hurok-elemben); az a szabály a 6. fázisban kerül ide, amikor az Elementor-sablonok sorra kerülnek. -------------------------------------------------------------------- */ .addf_drpc_table_div table td { padding: 10px 0; font-size: 14px; text-align: center !important; } /* -------------------------------------------------------------------- INGYENES SZÁLLÍTÁS JELZŐ (a Testreszabó „B7" blokkja). Miért itt és nem a `kosar.css`-ben: a 202-es snippet a jelzőt a kosár-oldal MELLETT a MINI-KOSÁRBA is beteszi (`.elementor-menu-cart__main`), az pedig a fejlécben van, tehát minden oldalon. A `kosar.css` csak a kosáron és a pénztáron töltődik be — ott a mini-kosárban álló jelző stílus nélkül maradt volna. Ugyanaz az érv, ami miatt a mini kosár gombjai is ebben a fájlban vannak. -------------------------------------------------------------------- */ .posgy-ingyenes-szallitas { margin: 0 0 20px; padding: 14px 16px; border-left: 4px solid var(--posgy-brand, #ef8022); background: #f7f7f7; } .posgy-ingyenes-szallitas p { margin: 0 0 8px; } .posgy-is-sav { overflow: hidden; height: 6px; border-radius: 3px; background: #e2e2e2; } .posgy-is-sav span { display: block; height: 100%; background: var(--posgy-brand, #ef8022); } /* -------------------------------------------------------------------- A MEGAMENÜ FELIRATA A NARANCS SÁVON (a 205-ös snippetből). A megamenü-nyitó a fejléc narancs sávjában ül; rajta a világos felirat olvashatatlan, ezért a sötét `--posgy-on-brand` tinta áll. A `.elementor-element-756bbc1` ELEM-AZONOSÍTÓ, tehát törékeny — a sablon újjáépítésével némán elavul. A `.nyomda-mm-*` osztályok viszont a megamenü sajátjai (`mu-plugins/nyomda-core/`), azok maradnak. Amikor a 4. fázisban a megamenü modul pluginbe költözik, az azonosítós felét osztályra kell cserélni. -------------------------------------------------------------------- */ .elementor-element-756bbc1 .elementor-icon-list-text, .nyomda-mm-trigger, .nyomda-mm-label, .nyomda-mm-arrow { color: var(--posgy-on-brand, #1A1A1A) !important; } /* ==================================================================== IDEKÖLTÖZÖTT: A KATEGÓRIA-OLDALSÁV (2026-08-31) A child téma `inc/category-sidebar.php`-jából. Ott a CSS a shortcode kimenetének ELEJÉN, egy `