/* Theme Name: Hello Elementor Child Template: hello-elementor Version: 1.0 */ @import url("../hello-elementor/style.css"); /* Szép, letisztult megjelenés a WooCommerce Layered Nav widgethez (Elementor) */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce { background: #ffffff; border: 1px solid rgba(18, 24, 33, 0.06); box-shadow: 0 6px 18px rgba(17, 24, 39, 0.03); border-radius: 10px; padding: 14px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Fejléc */ .elementor-widget-wp-widget-woocommerce_layered_nav h5 { margin: 0 0 10px 0; font-size: 15px; font-weight: 700; color: #111827; letter-spacing: 0.2px; display: block; padding-right: 8px; } /* Dekoratív kis nyíl (csak vizuális) */ .elementor-widget-wp-widget-woocommerce_layered_nav h5::after { content: "▾"; float: right; font-size: 12px; color: #6b7280; opacity: 0.9; margin-left: 8px; } /* Lista alapok */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list { margin: 0; padding: 0; list-style: none; } /* Listaelemek */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; transition: background 160ms ease, transform 120ms ease; } /* Link a teljes sorra kiterjesztve (jobb kattintási/tap célpont) */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item a { color: #0f172a; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; width: 100%; font-size: 14px; line-height: 1.2; padding: 4px 0; } /* Hover és fókusz (billentyűzetbarát) */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item a:hover, .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item a:focus { color: #064e9c; text-decoration: none; outline: none; } .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item a:focus { box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.12); border-radius: 6px; } /* Hover háttér a soron */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item:hover { background: rgba(3, 102, 214, 0.03); transform: translateY(-1px); } /* Count badge (darabszám) */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item .count { background: rgba(3, 102, 214, 0.08); color: #064e9c; border-radius: 999px; padding: 3px 8px; font-size: 12px; white-space: nowrap; margin-left: 8px; } /* Aktív elem styling - ha a szerver/plugin ad aktív class-t (pl. .is-active vagy .current) */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item.is-active, .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item.current { background: linear-gradient(90deg, rgba(3,102,214,0.05), rgba(3,102,214,0.02)); border-left: 3px solid #0366d6; padding-left: 8px; /* kisebb belső tér a bal oldali jelzéshez */ } /* Ha nincs aktív class, de szeretnéd vizuálisan kiemelni az első elemet (opcionális): */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item:first-child { /* comment out if undesired */ /* background: rgba(0,0,0,0.01); */ } /* Mobilon ÉS Tableten (1024px-ig): alapból összehajtva, kattintásra nyílik */ @media (max-width: 1024px) { .elementor-widget-wp-widget-woocommerce_layered_nav h5 { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; margin: 5px; font-size: 1em; } /* rejtett állapot (mobil/tablet) */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 300ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease; pointer-events: none; } /* nyitott állapotot a .mobile-open osztály jelzi a widgeten */ .elementor-widget-wp-widget-woocommerce_layered_nav.mobile-open .woocommerce-widget-layered-nav-list { max-height: 1000px; /* elegendő hely; ha nagyon hosszú lista: növeld */ opacity: 1; pointer-events: auto; } .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item a { font-size: 1em; margin: 10px; } /* Kis vizuális visszajelzés a kis nyílnak */ .elementor-widget-wp-widget-woocommerce_layered_nav h5::after { transition: transform 220ms ease; } .elementor-widget-wp-widget-woocommerce_layered_nav.mobile-open h5::after { transform: rotate(180deg); } /* Kis finomítás a count badge-re mobilon */ .elementor-widget-wp-widget-woocommerce_layered_nav .woocommerce-widget-layered-nav-list__item { padding: 10px 8px; } } /* --- TABLET NÉZET: Szűrők 3 hasábba rendezése (GRID javítással) --- */ @media (min-width: 769px) and (max-width: 1024px) { /* 1. A konténert rácsszerkezetűvé alakítjuk */ .elementor-widget-wrap:has(.elementor-widget-wp-widget-woocommerce_layered_nav) { display: grid !important; /* 3 egyenlő oszlop */ grid-template-columns: repeat(3, 1fr) !important; /* Ez a térköz a dobozok között - növelheted, ha ritkábbat szeretnél */ gap: 15px !important; align-items: start !important; padding-right: 0 !important; /* Felesleges padding törlése */ } /* 2. A "Iskola kereső" CÍM ívelje át az összes oszlopot */ .elementor-widget-wrap:has(.elementor-widget-wp-widget-woocommerce_layered_nav) .elementor-widget-heading { grid-column: 1 / -1 !important; /* Bal széltől jobb szélig */ width: 100% !important; margin-bottom: 5px !important; } /* 3. A SZŰRŐK dobozai töltsék ki a saját rács-cellájukat */ .elementor-widget-wrap:has(.elementor-widget-wp-widget-woocommerce_layered_nav) .elementor-widget-wp-widget-woocommerce_layered_nav { width: 100% !important; /* Nem kell 33%, a Grid intézi */ margin: 0 !important; padding: 0 !important; /* A külső térközt a 'gap' intézi */ } /* 4. A Script widget tűnjön el, ne foglaljon helyet a rácsban */ .elementor-widget-wrap:has(.elementor-widget-wp-widget-woocommerce_layered_nav) .elementor-widget-html { display: none !important; } } /* ---- Mini-cart: javított és kattintható törlés gomb ---- */ /* Konténer: relatív pozíció, normális padding (ne 1px), engedjük túlcsordulni ha kell */ .elementor-menu-cart__products .elementor-menu-cart__product { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0px; /* korábbi 1px helyett érdemi belső tér */ background: #f5f5f5; border-radius: 3px; margin-bottom: 10px; box-sizing: border-box; position: relative; /* szükséges a stacking kontrollhoz */ overflow: visible; /* engedi, hogy a gomb kívülre nyúljon */ z-index: 0; } /* Kép doboz — legyen alul a stackingben, és ne vegye el a pointer eseményeket */ .elementor-menu-cart__product-image { width: 100%; flex: 0 0 auto; overflow: hidden; border-radius: 3px; position: relative; z-index: 0; } .elementor-menu-cart__product-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; pointer-events: none; /* fontos: a kép ne vegye el a kattintásokat */ } /* Termék neve: középre, kicsit nagyobb betűvel */ .elementor-menu-cart__product-name { order: 2; text-align: center; font-size: 17px; font-weight: 600; margin: 0; padding: 4px 0 10px; line-height: 1.2; } .elementor-menu-cart__product-name a{ font-size: 14px; color: black; } .elementor-menu-cart__product-name, .elementor-menu-cart__product-price { font-size: 14px; padding-inline-start:0px !important; } /* jobb felső sarokba helyezés, mobilon kicsit kisebb margó */ .elementor-menu-cart__product-remove { position: absolute; top: 8px !important; right: 8px !important; margin: 5; text-align: right; z-index: 9999; pointer-events: auto; color: #333 !important; background: white; } /* .elementor-menu-cart__product-remove { border: 1px solid var(--remove-item-button-color, #333) !important; border-radius: var(--remove-item-button-size, 22px); bottom: 20px; height: var(--remove-item-button-size, 22px); inset-inline-end: 0; overflow: hidden; position: absolute; text-align: center; transition: .3s; width:var(--remove-item-button-size, 22px) }*/ /* a tényleges link(ek) stílusa — látható, kattintható gomb */ .elementor-menu-cart__product-remove a, .elementor-menu-cart__product-remove .remove_from_cart_button, .elementor-menu-cart__product-remove .elementor_remove_from_cart_button { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; padding: 6px 10px !important; border-radius: 6px !important; border: 1px solid rgba(0,0,0,0.08) !important; color: #333 !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; position: relative !important; z-index: 10000 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } /* Ha az üres, biztosítjuk a feliratot, de a kattintás maga az -hoz tartozik */ .elementor-menu-cart__product-remove a:empty::after { content: "Törlés"; display: inline-block; pointer-events: none; /* a kattintást az kapja */ color: inherit; font-size: 13px; line-height: 1; } /* Fenntartjuk az eredeti elrejtést a variációkra/árakra, ha ez szándékos */ .elementor-menu-cart__product .variation, .elementor-menu-cart__product .variation dt, .elementor-menu-cart__product .variation dd, .elementor-menu-cart__product-price, .elementor-menu-cart__product .quantity, .elementor-menu-cart__product .product-quantity { display: none !important; } /* Kis képernyőn arányosan kisebb padding és képmagasság */ @media (max-width: 480px) { .elementor-menu-cart__products .elementor-menu-cart__product { padding: 10px; } .elementor-menu-cart__product-name { font-size: 14px; } .elementor-menu-cart__product-image img { aspect-ratio: 16 / 9; } .elementor-menu-cart__product-remove a { min-width: 40px; min-height: 28px; padding: 5px 8px; } } /* Ártáblázatok formázása */ /* Egységesített kalkulátor táblák stílusa */ #TanfolyamTabla, #SzallasTabla, #ExtraFelarTabla, #FIXFelarTabla { font-size: 12px; border-collapse: collapse; width: 100%; box-sizing: border-box; } /* Alap cellák, fejlécek */ #TanfolyamTabla th, #TanfolyamTabla td, #SzallasTabla th, #SzallasTabla td, #ExtraFelarTabla th, #ExtraFelarTabla td, #FIXFelarTabla th, #FIXFelarTabla td { padding: 6px 8px; text-align: left; box-sizing: border-box; } /* Interaktív ár cellák (tanfolyam / szállás) */ #TanfolyamTabla td.ar, #SzallasTabla td.ar { cursor: pointer; transition: background-color .2s; outline: none; } /* Extra cellák — támogassuk mind a td.extra és td.extra-cell változatot és a span.extra-t */ #ExtraFelarTabla td.extra, #ExtraFelarTabla td.extra-cell, #ExtraFelarTabla span.extra { cursor: pointer; transition: background-color .2s; } /* FIX felár cellák (FIXFelarTabla használja a .felar osztályt) */ #FIXFelarTabla td.felar { cursor: pointer; transition: background-color .2s; } /* Kijelölt állapotok */ #TanfolyamTabla td.ar.selected, #SzallasTabla td.ar.selected, #ExtraFelarTabla td.extra.selected, #ExtraFelarTabla td.extra-cell.selected, #ExtraFelarTabla span.extra.selected, #FIXFelarTabla td.felar.selected { background-color: #a2d5f2; } /*td.felar.felar-fix, td.felar[data-fixed="1"] { background: red !important; color: white !important; cursor: not-allowed !important; opacity: 1 !important; pointer-events: none !important; }*/ /* Hover + focus (keyboard) */ #TanfolyamTabla td.ar:hover:not(.disabled), #SzallasTabla td.ar:hover:not(.disabled), #ExtraFelarTabla td.extra:hover:not(.disabled), #ExtraFelarTabla td.extra-cell:hover:not(.disabled), #ExtraFelarTabla span.extra:hover:not(.disabled), #FIXFelarTabla td.felar:hover:not(.disabled) { background-color: #d0ebf8; } #TanfolyamTabla td.ar:focus-visible, #SzallasTabla td.ar:focus-visible, #ExtraFelarTabla td.extra:focus-visible, #ExtraFelarTabla td.extra-cell:focus-visible, #ExtraFelarTabla span.extra:focus-visible, #FIXFelarTabla td.felar:focus-visible, button#torlesGomb:focus-visible { outline: 3px solid rgba(0,123,255,0.25); outline-offset: 2px; } /* Disabled vizuális és interakció tiltás (ha JS is kezeli a fókuszt) */ #TanfolyamTabla td.ar.disabled, #SzallasTabla td.ar.disabled, #ExtraFelarTabla td.extra.disabled, #ExtraFelarTabla td.extra-cell.disabled, #ExtraFelarTabla span.extra.disabled, #FIXFelarTabla td.felar.disabled { background-color: #f0f0f0; cursor: not-allowed; opacity: .6; pointer-events: none; /* Ezzel megakadályozzuk az egérkattintást; a JS‑nek kezelnie kell, hogy ezek ne legyenek fókuszálhatók */ } /* Törlés gomb */ button#torlesGomb { margin-bottom: 10px; padding: 6px 12px; cursor: pointer; background: #c62828; color: #fff; border: none; border-radius: 6px; } button#torlesGomb:hover { background:#b31f1f; } button#torlesGomb:focus-visible { outline: 3px solid rgba(0,123,255,0.25); outline-offset:2px; } /* Mobil: kissé nagyobb betű a jobb olvashatóságért */ @media (max-width: 480px) { #TanfolyamTabla, #SzallasTabla, #ExtraFelarTabla, #FIXFelarTabla { font-size: 13px; } #TanfolyamTabla th, #TanfolyamTabla td, #SzallasTabla th, #SzallasTabla td { padding: 8px 10px; } } /* wrapper köré: engedélyezi az x-tengelyen görgetést, iOS momentum scroll */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Ha azt szeretnéd, hogy a táblázat szükség esetén kilógjon (és görgetés legyen), állítsd min-width-et. Állítsd a min-width értékét a tényleges oszlopok szélességéhez. */ .table-wrapper table { width: 100%; min-width: 720px; /* lehetséges érték, állítsd igény szerint; vagy használhatsz width: max-content; */ border-collapse: collapse; } /* opció: ha nem akarsz sortörést a cellákban (pl. hosszú számok / szöveg), */ .table-wrapper td, .table-wrapper th { white-space: nowrap; } .woocommerce-notices-wrapper .woocommerce-message { position: relative; z-index: 9999; } /* Iskola info blokkok — módosított változat - ikon kör eltüntetve - ikonok egyenként külön színűek - asztalon/tableten egy sor (5 oszlop), mobilon 2 oszlop, középre rendezve */ /* Alap változók (szerkeszthetők) */ :root{ --gap: 16px; } /* konténer / lista */ .info-cards { display: flex; width: 100%; /* Kényszerítjük, hogy töltse ki a szülő szélességét */ gap: var(--gap); align-items: stretch; justify-content: space-between; /* Egyenletesen elosztja a kártyákat a teljes szélességben */ flex-wrap: nowrap !important; /* Az !important-tal megakadályozzuk, hogy az Elementor wrap-re kényszerítse desktopon */ margin: 0; padding: 0; list-style: none; } /* EGYENLŐ szélesség: 5 oszlop desktop/tablet */ .info-card { box-sizing: border-box; /* Módosított flex növekedés, hogy ha van még minimális hely, azt is egyenlően osszák el */ flex: 1 1 0px; width: calc((100% - (var(--gap) * 4)) / 5); /* pontosan 5 egyenlő oszlop */ min-width: 0; background: var(--card-bg, transparent); color: #111; padding: 14px; border-radius: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .18s ease; box-shadow: none; min-height: 88px; } /* hover */ .info-card:hover, .info-card:focus-within { transform: translateY(-3px); } /* Ikon — nincs több körháttér, az SVG színe a kártyánként beállított --icon-color változóból jön */ .info-card .icon { background: transparent; /* kör eltávolítva */ border-radius: 0; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: var(--icon-color, #000); /* SVG használjon currentColor-t */ flex-shrink: 0; } /* SVG méret — támogassa stroke és fill alapú ikonokat is */ .info-card .icon svg { width: 28px; height: 28px; stroke: currentColor; fill: currentColor; display: block; } /* cím és érték */ .info-card .title { font-size: 12px; font-weight: 600; text-transform: uppercase; opacity: 0.95; letter-spacing: 0.6px; color: #111; } .info-card .value { font-size: 15px; font-weight: 700; line-height: 1.1; white-space: nowrap; color: #111; word-break: normal; overflow-wrap: anywhere; } /* Egyedi ikon színek (5 kártyához) — nincs több háttérszín, csak maga az ikon színe */ .info-card:nth-child(1) { --icon-color: #0366d6; } /* kék */ .info-card:nth-child(2) { --icon-color: #10b981; } /* zöld */ .info-card:nth-child(3) { --icon-color: #f59e0b; } /* sárga/orange */ .info-card:nth-child(4) { --icon-color: #ef4444; } /* piros */ .info-card:nth-child(5) { --icon-color: #8b5cf6; } /* lila */ /* Reszponzív — mobil: 2 oszlop, középre rendezve */ @media (max-width: 700px) { .info-cards { flex-wrap: wrap !important; /* Mobilon engedjük a törést, felülírva a desktop !important-ot */ justify-content: flex-start; /* Balról jobbra töltse fel a sorokat */ } .info-card { /* Alaphelyzetbe állítjuk a desktop flex-növekedést, hogy a fix szélesség érvényesüljön */ flex: 0 0 auto; /* Pontosan 2 oszlop: a teljes szélesség feléből levonjuk a köztük lévő gap felét */ width: calc((100% - var(--gap)) / 2); /* Biztonsági mentés: ha csak 1 oszlopnyi hely maradna nagyon kicsi kijelzőn */ min-width: 120px; } .info-card .value { white-space: normal; /* Ha hosszú a szöveg mobilon, törjön új sorba */ } } /* Üzlet lista nézet rövid bemutatóval */ /* Guzmosz: álló (portrait) kép bal oldalon, jobbra a tartalom */ /* --- Alap stílusok --- */ /* Konténer: egy termék = egy sor */ /* Javított Guzmosz lista nézet */ /* Erősebb desktop-override: kép és szöveg egymás mellett maradnak nagyobb képernyőn */ @media (min-width: 769px) { .guzmosz-product-row { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 20px !important; flex-wrap: nowrap !important; /* ha mégis túlcsordul, cseréld wrap-re */ width: 100% !important; box-sizing: border-box !important; } /* Desktop: cover, fix magasságú thumbnail */ .guzmosz-product-image { flex: 0 0 220px; max-width: 220px; height: 320px; /* vagy ami kell: 280-380 közé */ overflow: hidden; box-sizing: border-box; } .guzmosz-product-image img { width: 100%; height: 100%; object-fit: cover; /* kitölti és középre vág */ display: block; } .guzmosz-product-info { flex: 1 1 0 !important; /* növekedhet és zsugorodhat */ min-width: 0 !important; /* KULCS: engedi a zsugorodást flexboxban */ display: flex !important; flex-direction: column !important; gap: 8px !important; box-sizing: border-box !important; } /* attribútumok: ne kényszerítsenek új sort, törődjék több sorral */ .guzmosz-product-attributes { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: break-word !important; } .guzmosz-product-short { overflow-wrap: break-word !important; word-break: break-word !important; } } /* Ha nem akarod, hogy a lista vízszintesen görgessen: */ ul.products.elementor-grid { box-sizing: border-box; max-width: 100%; overflow-x: hidden; } /* Mobil felülírás megtartva, de tisztítva */ @media (max-width: 768px) { /* A terméklista legyen blokk (ne grid/flex két oszlop) */ .products.elementor-grid, .elementor-widget-wc-archive-products .products, .woocommerce .products { display: block !important; grid-template-columns: none !important; } /* Minden termék teljes szélességű blokk legyen */ .products > li.product, .elementor-widget-wc-archive-products .products > li.product, .woocommerce .products > li.product { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; box-sizing: border-box !important; } /* A belső sor: kép felül, tartalom alatta (egy oszlop) */ .guzmosz-product-row { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: stretch !important; flex-wrap: nowrap !important; width: 100% !important; } /* Kép: teljes szélességű, fix mobilmagasság (ha kell) */ .guzmosz-product-image { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; height: 260px !important; /* módosítsd, ha más magasságot szeretnél */ overflow: hidden !important; box-sizing: border-box !important; } .guzmosz-product-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* vagy object-fit: contain ha nem akarod a crop-ot */ display: block !important; } .guzmosz-product-info { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; box-sizing: border-box !important; } } /* --- TABLET SPECIFIKUS NÉZET (Köztes állapot) --- */ @media (min-width: 769px) and (max-width: 1024px) { /* 1. Kényszerítjük a 2 hasábos (oszlopos) rácsot */ .products.elementor-grid, .elementor-widget-wc-archive-products .products, .woocommerce .products { display: grid !important; grid-template-columns: 1fr 1fr !important; /* Két egyenlő oszlop */ gap: 20px !important; /* Távolság a kártyák között */ } /* 2. A termékkártyák szélessége alkalmazkodjon a rácshoz */ .products > li.product, .elementor-widget-wc-archive-products .products > li.product, .woocommerce .products > li.product { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; /* A grid gap kezeli a távolságot */ } /* 3. BELSŐ ELRENDEZÉS: Maradjon a "mobil" stílus (Kép felül, szöveg alatta) Ez azért jobb tableten, mert a 2 hasábban a "kép balra" elrendezésnél nagyon összenyomorodna a szöveg. */ .guzmosz-product-row { display: flex !important; flex-direction: column !important; /* Egymás alá, nem mellé */ align-items: stretch !important; gap: 12px !important; height: 100%; /* Hogy egyforma magasak legyenek a kártyák */ } /* Kép beállítása tableten */ .guzmosz-product-image { width: 100% !important; max-width: 100% !important; height: 250px !important; /* Kicsit kisebb magasság elég lehet, mint asztalon */ flex: 0 0 auto !important; } .guzmosz-product-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Szöveg rész */ .guzmosz-product-info { width: 100% !important; padding: 0 10px 15px 10px !important; } } /* Lightbox Chart - Csak a kosár űrlap táblázatának Price/Quantity/Subtotal oszlopai */ .woocommerce .woocommerce-cart-form table.shop_table thead th.product-price, .woocommerce .woocommerce-cart-form table.shop_table thead th.product-quantity, .woocommerce .woocommerce-cart-form table.shop_table thead th.product-subtotal, /*.woocommerce .woocommerce-cart-form table.shop_table td.product-price,*/ .woocommerce .woocommerce-cart-form table.shop_table td.product-quantity, .woocommerce .woocommerce-cart-form table.shop_table td.product-subtotal { display: none !important; } /* Visual hide but keep for screen readers */ .woocommerce .cart_totals > h2 { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; white-space: nowrap !important; } /* Appearance > Customize > Additional CSS vagy child theme style.css */ .woocommerce .product-thumbnail img, .woocommerce .product-thumbnail .cart-portrait-image { width: 100%; /* kívánt szélesség */ height: 100%; /* kívánt magasság */ object-fit: cover; /* középről kivágja, kitölti a dobozt */ display: block; } /* Set the image (thumbnail) column to a fixed width */ .shop_table .product-thumbnail { min-width: 200px; max-width: 1000px; text-align: center; } .shop_table .product-thumbnail img { width: 100%; max-width: 800px; height: auto; display: block; margin: 0 auto; } /* Márkák Barnds eltüntése a kategória listából */ .product_meta > span.posted_in:not(.detail-container) { display: none !important; } /* Ajánlatkérési gombok felülírása /* Kosár oldali "Ajánlatkérés" gomb */ .wc-proceed-to-checkout .checkout-button.button.alt.wc-forward { background-color: #000000 !important; color: #ffffff !important; padding: 14px 24px !important; font-size: 18px !important; font-weight: bold !important; border-radius: 5px !important; text-transform: uppercase !important; text-align: center !important; float: right; } /* Checkout oldali "Ajánlatkérés beküldése" gomb */ #place_order.button.alt { background-color: #000000 !important; color: #ffffff !important; padding: 14px 24px !important; font-size: 18px !important; font-weight: bold !important; text-transform: uppercase !important; text-align: center !important; } /* Frissített product-brands.css */ /* Tedd a témád style.css-ébe vagy az Elementor Custom CSS mezőjébe */ .guz-product-brands { display: inline-block; --guz-box-w: 100px; --guz-box-h: 50px; --guz-box-margin: 5px; --guz-box-border: 1px solid #e0e0e0; } .guz-brand-box { width: var(--guz-box-w); height: var(--guz-box-h); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; vertical-align: middle; margin: var(--guz-box-margin); border: var(--guz-box-border); box-sizing: border-box; /* eltávolítva a korábbi hover box-shadow */ } /* Logó: arányosan illeszkedik a dobozba */ .guz-brand-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; transition: transform 160ms ease, filter 160ms ease; backface-visibility: hidden; /* ha kell, itt adhatsz kisebb lekerekítést vagy filtert alapból */ } /* Hover: a kép maga emelkedik 2px-rel, nincs box-shadow */ .guz-brand-box:hover .guz-brand-image, .guz-brand-box:focus-within .guz-brand-image, .guz-brand-link:hover .guz-brand-image, .guz-brand-link:focus .guz-brand-image { transform: translateY(-2px); /* opcionálisan enyhe fényesség */ /* filter: brightness(1.03); */ /* Ha szeretnéd, hozzáadhatod: outline focus stílusokat accessibility-hez */ } /* Link köré: megjelenés és kattintható jelzése */ .guz-brand-link { display: inline-block; line-height: 0; text-decoration: none; color: inherit; cursor: pointer; } /* opcionális kisebb vizuális finomítás a fókuszhoz (billentyűzet-esély) */ .guz-brand-link:focus { outline: 2px solid rgba(0,0,0,0.12); outline-offset: 2px; } /* --- Junior oldal város lista RÁCS konténer --- */ /* --- A teljes szekció címe --- */ .helyszin-szekcio h2 { text-align: center; font-size: 2rem; margin-bottom: 30px; color: #222; } /* --- A kártyákat tartalmazó RÁCS konténer --- */ .helyszin-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto 20px auto; } /* --- A kártyákat tartalmazó RÁCS konténer --- */ .tanfolyam-container { display: grid; /* Eredeti: grid-template-columns: repeat(2, 1fr); */ /* ÚJ: 3 oszlop asztali nézetben */ grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto 30px auto; } /* --- Az eredeti stílusok (megtartva) --- */ .tanfolyam-szekcio h2 { text-align: center; font-size: 2rem; margin-bottom: 30px; color: #222; } /* --- Az egyes kártya blokkok stílusa --- */ .helyszin-kartya { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; flex-direction: column; margin-bottom: 20px; } /* --- A KÁRTYA FEJLÉCE (Kép és magasság beállítása) --- */ .kartya-fejlec { height: 160px; /* A 'background-image' INNEN KERÜL ÁT A HTML-BE */ background-size: cover; /* Ezek a szabályok megmaradnak */ background-position: center; background-repeat: no-repeat; position: relative; display: flex; align-items: flex-end; } /* INNEN TÖRÖLTÜK AZ ID-KET (#oxford-fejlec, #cambridge-fejlec, stb.) mivel az útvonalakat már a HTML kezeli. */ /* --- A sötét, áttetsző sáv a címnek --- */ .fejlec-szoveg-sav { background-color: rgba(0, 0, 0, 0.6); width: 100%; padding: 10px 15px; box-sizing: border-box; } .fejlec-szoveg-sav h3 { margin: 0; font-size: 1rem; color: #ffffff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); } /* --- A kártya törzse (a szöveges tartalom) --- */ .kartya-torzs { padding: 20px; line-height: 1.6; flex-grow: 1; } .kartya-torzs p { margin-top: 0; font-size: 0.9rem; } .kartya-torzs ul { list-style: none; padding-left: 0; margin-top: 10px; margin-bottom: 20px; } .kartya-torzs li { position: relative; padding-left: 20px; margin-bottom: 6px; font-size: 0.9rem; } .kartya-torzs li::before { content: '✓'; position: absolute; left: 0; top: 2px; color: #0062CC; font-weight: bold; } .kartya-torzs li strong { color: #444; } /* --- MOBIL NÉZET (Reszponzivitás) --- */ @media (max-width: 768px) { .helyszin-container { grid-template-columns: 1fr; /* Mobilon 1 oszlop */ } .tanfolyam-container { grid-template-columns: 1fr; /* Mobilon 1 oszlop */ } .helyszin-szekcio h2 { font-size: 1.8rem; } .fejlec-szoveg-sav h3 { font-size: 1rem; } } /* --- ÚJ: KÉP NÉLKÜLI KÁRTYA TÍPUS --- */ .helyszin-kartya, .tanfolyam-kartya { /* Hozzáadva a tanfolyam kártyához is */ background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; flex-direction: column; } /* ... Az összes többi stílus (pl. kartya-fejlec, kartya-torzs, stb.) ... */ /* Az új .tanfolyam-kartya stílusok is ide tartoznak */ .tanfolyam-kartya h3 { margin-top: 0; margin-bottom: 20px; font-size: 1.25rem; color: #222; border-bottom: 2px solid #0062CC; padding-bottom: 5px; } .tanfolyam-kartya .kartya-torzs h4 { margin-top: 0; margin-bottom: 10px; font-size: 1.15rem; color: #222; padding-bottom: 0px; } /* --- MOBIL NÉZET (Reszponzivitás) --- */ @media (max-width: 768px) { .helyszin-container { /* ÚJ: Mobilon 1 oszlop (megtartva az eredeti szabályt) */ grid-template-columns: 1fr; } .helyszin-szekcio h2 { font-size: 1.8rem; } .fejlec-szoveg-sav h3 { font-size: 1rem; } } /* // Attributumok listája a terméknév alatti sávban // Shortcode: [product_attributes_meta]*/ /* stílus a valódi cím elemhez */ .product_meta.product_attributes_meta .product_attributes_title { font-weight: 700; /* félkövér */ margin-right: 0.5rem; /* távolság a cím és értékek között */ color: var(--pa-title-color, #fff); } /* Kiegészített CSS: hozzáad egy "Kategóriák:" címet a megjelenéshez (CSS ::before) */ .product_meta.product_attributes_meta { --pa-font-size: 0.8em; --pa-color: white; --pa-link-color: white; --pa-link-hover: white; --pa-gap: 0.5rem; /* title vars */ --pa-title-color: var(--pa-color); --pa-title-weight: 700; --pa-title-margin-right: 0.5rem; font-size: var(--pa-font-size); color: var(--pa-color); line-height: 1.3; display: block; } /* A teljes értéksáv */ .product_meta.product_attributes_meta .product_attributes_values { display: inline-block; white-space: normal; word-break: break-word; gap: var(--pa-gap); } /* Linkek stílusa */ .product_meta.product_attributes_meta .product_attributes_values a { color: var(--pa-link-color); text-decoration: none; transition: color .15s ease; } /* Mobilon kisebb betűméret */ @media (max-width: 600px) { .product_meta.product_attributes_meta { --pa-font-size: 14px; } } /* --- ÚJ RÉSZ: Kosárban lévő kalkulátor és terméknév formázása (VÉGLEGES) --- */ /* A termék nevének kiemelése a kosárban */ .woocommerce-cart-form .product-name > a { font-weight: 600; font-size: 1.1em; color: #111; display: inline-block; margin-top: 5px; margin-bottom: 4px; text-decoration: none; } /* 1. A felesleges kettőspontot és kulcsot tartalmazó
elem ELREJTÉSE */ .woocommerce-cart-form dt.variation-kalkulator-details { display: none !important; } /* 2. A
elem alapértelmezett behúzásának (margin) megszüntetése, hogy ne legyen elcsúszva */ .woocommerce-cart-form dd.variation-kalkulator-details { margin: 0 !important; padding: 0 !important; } /* A kalkulátor adatokat tartalmazó fő konténer */ .kalkulator-cart-display { display: flex; flex-direction: column; gap: 4px; /* Térköz a sorok között */ margin-top: 12px; color: #333; } /* Az egyes adatsorok (pl. Tanfolyam, Szállás) */ .kalkulator-cart-display .kalkulator-item-line { display: block; line-height: 1.5; } /* A végösszeg sorának kiemelése */ .kalkulator-cart-display .kalkulator-total-line { display: block; font-size: 15px; font-weight: 600; margin-top: 5px; padding-top: 5px; border-top: 1px solid #ddd; } /* Az árfolyamok sorának stílusa */ .kalkulator-cart-display .kalkulator-rates-line { display: block; font-size: 13px; color: #666; margin-top: 5px; padding-top: 5px; border-top: 1px solid #ddd; } /* --- WooCommerce Kosár és Ajánlatkérés oldal mobil nézet javítása --- */ /* Mobil nézetre vonatkozó szabályok (a 768px egy általános töréspont, módosítható) */ @media (max-width: 768px) { /* 1. Kép (thumbnail) oszlopának visszakapcsolása */ /* A téma valószínűleg elrejti ezt mobilon, mi felülbíráljuk. */ .woocommerce-cart-form .shop_table_responsive td.product-thumbnail { display: table-cell !important; /* Vagy 'block', ha a táblázat elrendezése szétesik */ width: 80px !important; /* Adjunk neki fix szélességet, hogy ne foglaljon túl sok helyet */ padding-right: 15px !important; } /* 2. A termék nevének és adatainak balra igazítása */ .woocommerce-cart-form .shop_table_responsive td.product-name { text-align: left !important; } /* 3. A termék nevében lévő adatok (dl, dt, dd) igazítása, ha szükséges */ .woocommerce-cart-form .shop_table_responsive td.product-name .variation { text-align: left !important; justify-content: flex-start !important; /* Flexbox alapú igazítás felülírása */ } .woocommerce-cart-form .shop_table_responsive td.product-name .variation dt, .woocommerce-cart-form .shop_table_responsive td.product-name .variation dd { text-align: left !important; } } /* ======================================================================== */ /* WooCommerce Kosár Mobil Nézet - VÉGLEGES MEGOLDÁS (2025-11-15) /* Cél: A kép 100%-ban kitölti a konténert, a szöveg alatta van, margóval. /* ======================================================================== */ @media (max-width: 768px) { /* 1. NULLÁZZUK A KONTÉNEREKET */ /* Eltávolítunk minden felesleges margót a táblázatról és a sorokról, ami korlátozhatná a kép szélességét. */ .woocommerce-cart-form .shop_table_responsive, .woocommerce-cart-form .shop_table_responsive tbody, .woocommerce-cart-form .shop_table_responsive tr.cart_item { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border: none !important; } /* A termékek között egy alsó szegéllyel tartunk távolságot. */ .woocommerce-cart-form .shop_table_responsive tr.cart_item { border-bottom: 1px solid #eee !important; position: relative; padding-bottom: 20px !important; /* Térköz a sor alján */ margin-bottom: 20px !important; /* Térköz a sorok között */ } /* 2. KÉP BEÁLLÍTÁSA */ /* A kép cellájának és magának a képnek a beállítása, hogy kitöltse a helyet. */ .woocommerce-cart-form .shop_table_responsive td.product-thumbnail { display: block !important; width: 100% !important; padding: 0 !important; /* NINCS padding a kép konténerén! */ margin: 0 !important; border: none !important; } .woocommerce-cart-form .shop_table_responsive td.product-thumbnail img { width: 100% !important; height: auto !important; display: block !important; } /* 3. SZÖVEG BEÁLLÍTÁSA */ /* A termékadatokat tartalmazó cellának ADUNK margót, hogy a szöveg ne tapadjon a képernyő széléhez. */ .woocommerce-cart-form .shop_table_responsive td.product-name { display: block !important; width: auto !important; /* Automatikus szélesség, a padding miatt */ padding: 20px 15px 0 15px !important; /* FELÜL-JOBBRA-ALUL-BALRA margó */ text-align: left !important; border: none !important; } /* 4. TÖRLÉS GOMB és FELESLEGES ELEMEK ELREJTÉSE */ .woocommerce-cart-form .shop_table_responsive td.product-remove { position: absolute; top: 15px; right: 15px; z-index: 10; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; } .woocommerce-cart-form td.product-remove a.remove { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .woocommerce-cart-form .shop_table_responsive thead, .woocommerce-cart-form .shop_table_responsive td::before { display: none !important; } .woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td { background-color: rgba(0,0,0,.0); } } /* Rejtsd el a "kalkulator-details" címkét a pénztár oldalon */ .woocommerce-checkout-review-order-table dt.variation-kalkulator-details { display: none !important; } /* Tedd félkövérré és nagyobbá a terméknevet (de a részleteket ne!) */ .woocommerce-checkout-review-order-table td.product-name { font-weight: bold; font-size: 1.1em; } /* Állítsd vissza a részletek listájának eredeti betűstílusát */ .woocommerce-checkout-review-order-table td.product-name .variation { font-weight: normal; font-size: 1rem; /* Visszaállítja az alapértelmezett betűméretet erre az elemre */ } /* Tedd félkövérré az "Adatkezelési hozzájárulás" szöveget */ .woocommerce-checkout-payment label[for="payment_method_quotes-gateway"] { font-weight: bold; } /* Felsorolás átalakítása Szolgáltatások, Konténer (az