/* Sziránautó projekt-specifikus override-ok a Red Parts sablonon felül */

/* Termékértékelések kikapcsolva mindenhol — a projekt nem mutat csillagokat / review-számot */
.product-card__rating,
.product-card__rating-stars,
.product-card__rating-label,
.product__rating,
.product__rating-stars,
.product__rating-label,
.quickview__product-rating-stars,
.quickview__product-rating-label,
.analogs-table__rating-stars,
.suggestions__product-rating,
.suggestions__product-rating-stars,
.suggestions__product-rating-label,
.post-card__rating {
    display: none !important;
}

/* A .header__topbar-classic maga is flex-konténer (a teljes 1350px tartalom-
 * szélességet kitölti), a .topbar viszont NEM növő flex-item benne, ezért
 * tartalomra zsugorodott (~498px) és balra tapadt. Emiatt a topbar-on BELÜLI
 * `topbar__item-spring` (flex-grow:1) nem kapott szabad helyet, így a jobbra
 * igazítandó gombok (Asszisztens, Összehasonlítás) is balra ragadtak. A topbar
 * töltse ki a flex-szülőt, hogy a spring jobbra tolhassa a jobb oldali itemeket. */
.header__topbar-classic .topbar--classic {
    flex-grow: 1;
}

/* A jobb oldali topbar-gombok (Összehasonlítás, Kedvencek, Asszisztens) igazítása:
 * a spring tolja őket jobbra, a margin-left:auto fallback marad biztonsági
 * tartaléknak. CSAK a spring UTÁNI ELSŐ gomb kaphatja meg: ha mindegyik megkapná,
 * a három gomb szétszóródna a sávban ahelyett, hogy egy csoportot alkotna. */
.topbar--classic .topbar__item-spring + .topbar__item-button {
    margin-left: auto;
}

/* --- Összehasonlítás / Kedvencek belépő a felső sávban -----------------------
 * A logó melletti ikonsorból költöztek ide, az Asszisztens gomb bal oldalára.
 * Ikon + felirat + darabszám-jelvény; a jelvény csak 0 fölött látszik. */
.topbar--classic .topbar__button--indicator {
    gap: 7px;
    padding: 0 12px;
    color: #c3e5d4;
    text-decoration: none;
}

.topbar__button-icon {
    display: flex;
    flex-shrink: 0;
}

.topbar__button-icon svg {
    display: block;
    fill: currentColor;
}

/* A `.topbar__button-label` alap 3px jobb margóját a gap váltja ki. */
.topbar--classic .topbar__button--indicator .topbar__button-label {
    margin-right: 0;
    white-space: nowrap;
}

.topbar--classic .topbar__button--indicator:hover {
    color: #fff;
    text-decoration: none;
}

/* Darabszám: fehér pirula zöld számmal — ugyanaz a kontraszt-idióma, mint a
 * fehér Asszisztens gombé, tehát a sáv jobb vége egységes marad. */
.topbar__button-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #fff;
    color: #01573c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Logo wordmark fallback fehér kontrasztot kapjon a sötét header-sávon. */
.header__logo .logo__wordmark {
    color: #fff;
}

/* Toast üzenetek — cart / wishlist / compare visszajelzéshez (Livewire eseményen) */
.sziranauto-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.sziranauto-toast {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    min-width: 240px;
    max-width: 360px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transform: translateX(120%);
    transition: transform .3s ease, opacity .3s ease;
    opacity: 0;
    pointer-events: auto;
}

.sziranauto-toast--visible {
    transform: translateX(0);
    opacity: 1;
}

.sziranauto-toast__message {
    line-height: 1.35;
}

/* Bezáró gombbal (= gombos toast) a szöveg ne fusson a × alá. */
.sziranauto-toast--dismissible .sziranauto-toast__message {
    padding-right: 18px;
}

/* „Tovább a kapcsolódó oldalra" gomb — a színes háttéren áttetsző fehér pirula,
 * hoveren teli fehér, hogy minden toast-típuson (zöld/piros/kék/narancs) olvasható
 * maradjon. Sima <a href>, ezért középső gombbal új lapon is nyitható. */
.sziranauto-toast__action {
    align-self: flex-start;
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 3px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.sziranauto-toast__action:hover,
.sziranauto-toast__action:focus {
    background: #fff;
    border-color: #fff;
    color: #1f2937;
    text-decoration: none;
}

.sziranauto-toast__action:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.sziranauto-toast__close {
    position: absolute;
    top: 4px;
    right: 6px;
    padding: 2px 6px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    opacity: .7;
    cursor: pointer;
}

.sziranauto-toast__close:hover,
.sziranauto-toast__close:focus {
    opacity: 1;
}

.sziranauto-toast--success { background: #15803d; }
.sziranauto-toast--error   { background: #b91c1c; }
.sziranauto-toast--info    { background: #1d4ed8; }
.sziranauto-toast--warning { background: #b45309; }

/* Mobilon a fix 360px kilógna: a konténer a két szélhez igazodik. */
@media (max-width: 480px) {
    .sziranauto-toast-container {
        top: 12px;
        right: 12px;
        left: 12px;
    }

    .sziranauto-toast {
        min-width: 0;
        max-width: none;
    }
}

/* Site-preloader — első betöltéskor eltakarja a teljes viewportot, amíg az
 * összes asset (CSS, JS, kép, font) be nem töltődik. A `body.site-loaded`
 * osztály kerül rá amikor a `window.load` esemény tüzel — onnan 250ms-os
 * fade-out animáció. Brand színek: zöld → szürke gradient háttér, fehér spinner. */
.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #006847 0%, #1f2937 100%);
    transition: opacity .25s ease, visibility .25s ease;
}

body.site-loaded .site-preloader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-preloader__spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    animation: site-preloader-spin 0.9s linear infinite;
}

@keyframes site-preloader-spin {
    to { transform: rotate(360deg); }
}

/* A scroll-lock alapból nincs — de a preloader alatti tartalom ne mozogjon
 * (ha a viewport scrollbar különböző szélességű lenne). */
body:not(.site-loaded) {
    overflow: hidden;
}

/* Kategoriak dropdown — split-button: bal fele anchor a /kategoriak-ra,
 * jobb fele toggle a dropdown-hoz. A header sotet savjan jeleneik meg,
 * ezert feher elvalasztot adunk a ket fele koze.
 */
.departments__button--split {
    display: flex;
    align-items: stretch;
    padding: 0 !important;
}
.departments__button-main {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 5px 14px 5px 35px;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
.departments__button-main:hover,
.departments--open .departments__button-main {
    background: #333;
    color: #fff;
    text-decoration: none;
}
.departments__button-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.departments__button-toggle:focus { outline: none; }
.departments__button-toggle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(255, 255, 255, .18);
}
.departments__button-toggle:hover,
.departments--open .departments__button-toggle {
    background: #333;
    color: #fff;
}
.departments__button--split .departments__button-arrow {
    position: static;
    display: block;
    transform: none;
    transition: transform .2s, color .2s;
}
.departments--open .departments__button-toggle .departments__button-arrow {
    transform: rotate(180deg);
}

/* Megamenü lábléc — „Összes megjelenítése →".
 * Alapból közvetlenül az első hasáb alá esett, nulla térközzel, így az L2-lista
 * 11. elemének látszott, miközben a panel alja üresen maradt. A panelt
 * flex-oszloppá tesszük, a hasábsor kitölti a szabad helyet, a link pedig
 * hajszálvonallal elválasztott láblécként a panel aljára kerül — a szöveg
 * továbbra is az első hasáb rácsvonalára igazodik.
 *
 * A `--open` felülíráshoz két osztály kell: a header-CSS (`display: block`)
 * a defer-elt sorrendben a sziranauto.css UTÁN töltődik be.
 */
.departments__megamenu.departments__megamenu--open {
    display: flex;
    flex-direction: column;
}
.departments__megamenu > .row {
    flex: 1 1 auto;
    align-content: flex-start;
}
.megamenu__more {
    flex: 0 0 auto;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #ebebeb;
}
/* A `color` a header-CSS `.megamenu-links__item-link { color: inherit }`
 * szabályát írja felül, ezért itt is kell a plusz osztály. */
.megamenu__more .megamenu__more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #003f2b;
}
.megamenu__more .megamenu__more-link:hover {
    text-decoration: none;
}
.megamenu__more-arrow {
    transition: transform .15s;
}
.megamenu__more-link:hover .megamenu__more-arrow {
    transform: translateX(3px);
}

/* Termékkép-konténer shimmer-háttér eltüntetése. A redparts default szürke shimmer-háttér
   (background-color: #eeeeee + linear-gradient animation) a kép betöltődéséig látszik.
   A SVG-placeholder és WebP-betöltés esetén a load-event-trigger nem mindig fut le
   helyesen, így a szürke háttér "keret"-ként marad meg a placeholder körül. Tisztább
   az átlátszó háttér — a no-image.svg maga adja a vizuális tartalmat. */
.image--type--product .image__body,
.image--type--category .image__body {
    background: transparent;
    animation: none;
}
.image--type--product .image__body::before,
.image--type--category .image__body::before {
    display: none;
}

/* Termékoldali wishlist / összehasonlít gombok: a magyar fordítások hosszabbak mint az
   eredeti angol "Add to wishlist" / "Add to compare", ezért nowrap + ellipsis biztosítja,
   hogy a két 50%-os szélességű button-szöveg ne fedjen át egymással. */
.product__actions-item--wishlist span,
.product__actions-item--compare span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Termékoldali "Főbb jellemzők" lista (a TecDoc-articleAttributes első 5 eleme),
   a redparts "Key Features" mintát követi: rövid, kompakt felsorolás a leírás alatt. */
.product__features-title {
    font-size: 15px;
    font-weight: 700;
    margin: 16px 0 8px;
}
.product__features-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
}
.product__features-list li {
    margin-bottom: 2px;
}
.product__features-more {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    color: #1a66ff;
    text-decoration: none;
}
.product__features-more:hover {
    text-decoration: underline;
}

/* Termékoldali kép-zoom overlay (Alpine-modal). A galéria fő-képét teljes méretben
   mutatja; a háttérre kattintva vagy Esc-re zár. */
[x-cloak] { display: none !important; }
.product-gallery__zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 24px;
}
.product-gallery__zoom-overlay img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.product-gallery__zoom-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
}
.product-gallery__zoom-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Departments-menü utáni függőleges divider vonal eltüntetése
   (alapból #ebebeb világos-szürke 1px-es vonal a `.header__navbar-departments` jobb széle után). */
.header__navbar-departments::after {
    display: none !important;
}

/* A divider eltüntetésével a 24px-es margin-right is felesleges — a Departments-menü
   szorosan kapcsolódhat a fő-nav-hoz, fölösleges üres-vonal-térköz nélkül. */
[dir=ltr] .header__navbar-departments {
    margin-right: 0 !important;
}
[dir=rtl] .header__navbar-departments {
    margin-left: 0 !important;
}

/* Block-brands — kép nélküli márkák placeholder kerete (a /markak oldalon) */
.block-brands__item-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 60px;
    background: #f5f7fa;
    color: #4d5762;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 2px;
}

/* Fejléc account-menü "Kijelentkezés" — natív POST submit-gomb a Fortify logouthoz.
   A korábbi <a href="/kilepes" data-submit-form> JS-függő megoldás GET-re esett vissza,
   ha az inline handler-script nem futott le → a GET /kilepes 405-öt adott, a user bent
   maradt (majd a /belepes az auth-guard miatt visszadobta a fiókba = "auto-login").
   A natív gomb JS nélkül is POST-ol. A stílus a .account-menu__links a mintát tükrözi. */
.account-menu__links button {
    display: block;
    width: 100%;
    color: inherit;
    font-size: 15px;
    padding: 5px 20px;
    font-weight: 500;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.account-menu__links button:hover {
    background: #f2f2f2;
}

/* Asszisztens gomb a topbar jobb szélén (a lebegő chat-widgetet nyitja).
 * A header-variant CSS a sziranauto.css UTÁN tölt be, ezért a .topbar__item-button
 * ősön át emelt specificitással írjuk felül a redparts .topbar__button szabályait.
 * Fehér, teljes-magasságú gomb a sötétzöld (#01573c) topbar-sávon — jól kiemelkedik. */
.topbar--classic .topbar__item-button .topbar__button--expert {
    background: #fff;
    padding: 0 14px;
}
.topbar--classic .topbar__item-button .topbar__button--expert:hover {
    background: #e9f3ee;
}
.topbar--classic .topbar__item-button .topbar__button--expert .topbar__button-label {
    color: #01573c;
    font-weight: 600;
    margin-right: 0;
}
/* A redparts `.topbar__button:hover .topbar__button-label { color:#fff }` (0,4,0)
 * azonos specificitáson felülírná a sötétzöld feliratot, és a variant-CSS később
 * tölt be. Emelt specificitással (0,5,0) tartjuk a zöld szöveget a fehér gombon
 * hover/fókusz/aktív állapotban is — különben fehér szöveg lenne fehér gombon. */
.topbar--classic .topbar__item-button .topbar__button--expert:hover .topbar__button-label,
.topbar--classic .topbar__item-button .topbar__button--expert:focus .topbar__button-label,
.topbar--classic .topbar__item-button .topbar__button--expert:active .topbar__button-label {
    color: #01573c;
}

/* Asszisztens-modal (a `.expert-modal` osztálynév megmaradt) — Alpine-vezérelt,
 * self-contained overlay (a redparts/Bootstrap
 * .modal-tól független, hogy ne függjön a bootstrap JS-től). Esc-re és háttérre zár. */
.expert-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
}
.expert-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 6px;
    padding: 30px 28px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
}
.expert-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6c757d;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.expert-modal__close:hover {
    background: #f2f2f2;
    color: #212529;
}
.expert-modal__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #212529;
}
.expert-modal__text {
    font-size: 15px;
    line-height: 1.6;
    color: #4d5762;
    margin: 0 0 22px;
}

/* Hírlevél-widget hozzájárulási link. A .widget-newsletter háttere sötét (#333),
 * a link viszont az alapértelmezett brand-zöldet (#006847) örökli — az sötét
 * háttéren olvashatatlan. Világos mentazöld + aláhúzás olvasható kontrasztot ad
 * (≈8:1 a #333-on), hoverre fehérre vált. */
.widget-newsletter a {
    color: #6ee7b7;
    text-decoration: underline;
}
.widget-newsletter a:hover,
.widget-newsletter a:focus {
    color: #fff;
}

/* 404 / hibaoldal (.not-found) — olvashatóság + márkaszínek (rendszer zöld / sárga).
   Korábban a 404.blade.php @push('styles') inline <style>-jában volt; a stílus külön
   CSS-be kerül (a hibaoldal a guest layoutot terjeszti ki, ami betölti ezt a fájlt). */
.not-found .not-found__404 {
    color: #006847;
}
.not-found .btn.btn-outline-primary,
.not-found .btn.btn-outline-primary:hover,
.not-found .btn.btn-outline-primary:focus,
.not-found .btn.btn-outline-primary:active {
    color: #262626;
    background-color: #ffdf40;
    border-color: #ffdf40;
}
.not-found .not-found__quicklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* Pénztár (/penztar) lépés-jelző + "Van már fiókja?" hint — rendszerszínek
   (zöld #006847, sárga #ffdf40, szürke). A Bootstrap nav-pills aktív pill-je
   alapból kék (--bs-primary), a disabled <button>-ök pedig a böngésző szürke
   alapértelmezett gombhátterét kapják; a .checkout-steps scope-ban
   determinisztikusan állítjuk be a három állapotot, a globális primary szín
   érintése nélkül. */
.checkout-steps {
    gap: 12px;
}
/* Egyenlő méretű pillek. A Bootstrap 4 `.nav-justified` csak a <li>-t nyújtja
   egyenlő szélesre; a benne lévő <button> viszont form-control, ezért
   `display:block` mellett is shrink-to-fit marad. Emiatt a rövid feliratú
   „1. Cím" gomb keskenyebb lett a saját <li>-jénél (410px-en 80,5 vs 118,7px),
   és mert egy sorba fért, alacsonyabb is (42 vs 66px) → mobilon elcsúsztak
   a lépések. A <li>-t flex-konténerré tesszük, a gombot 100%-osra: a szélesség
   így egyezik, a flex alapértelmezett `stretch` pedig azonos magasságot ad. */
.checkout-steps .nav-item {
    display: flex;
}
.checkout-steps .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    color: #262626;
    background-color: #f2f2f2;
    border: 1px solid #e0e0e0;
    font-weight: 600;
    cursor: pointer;
}
/* Mobilon a leghosszabb felirat („2. Szállítás és fizetés") két sorban is szűkös
   a harmadnyi sávban: kisebb betű és keskenyebb belső margó, hogy a szöveg ne
   feszüljön a pill széléhez. */
@media (max-width: 575.98px) {
    .checkout-steps {
        gap: 6px;
    }
    .checkout-steps .nav-link {
        padding: 0.5rem 0.35rem;
        font-size: 0.8125rem;
        line-height: 1.25;
    }
}
.checkout-steps .nav-link:hover:not(:disabled):not(.active) {
    color: #006847;
    background-color: #e9f3ee;
    border-color: #006847;
}
.checkout-steps .nav-link.active {
    color: #fff;
    background-color: #006847;
    border-color: #006847;
}
/* Már teljesített lépés (text-success): márkazöld a Bootstrap #198754 helyett. */
.checkout-steps .nav-link.text-success {
    color: #006847 !important;
}
.checkout-steps .nav-link:disabled {
    color: #6c757d;
    background-color: #f2f2f2;
    border-color: #e0e0e0;
    opacity: 1;
    cursor: default;
}

/* "Van már fiókja?" hint: alert-info (kékeszöld) helyett semleges szürke doboz,
   a CTA gomb pedig rendszer-sárga, sötét szöveggel az olvashatóságért. */
.checkout-login-hint {
    background-color: #f2f2f2;
    border: 1px solid #e0e0e0;
    color: #262626;
    /* A doboz `flex-wrap`-je bármely szélességen tördelhet (a szöveg két sort kér),
       és tördelt állapotban a gomb NULLA térközzel ragadt a szöveg alá. Margóval ez
       nem oldható meg (az csak az egysoros esetre jó) — a flex `gap` mindkét
       állapotot lefedi: tördelve függőleges rés, egy sorban minimum-térköz. */
    gap: 0.625rem;
}
.checkout-login-hint .btn-outline-primary {
    color: #262626;
    background-color: #ffdf40;
    border-color: #ffdf40;
}
.checkout-login-hint .btn-outline-primary:hover,
.checkout-login-hint .btn-outline-primary:focus,
.checkout-login-hint .btn-outline-primary:active {
    color: #262626;
    background-color: #f0cf2e;
    border-color: #f0cf2e;
}
/* Mobil: explicit oszlop-elrendezés (ne a tördelés véletlenén múljon), és rendes
   érintőcél — a `btn-sm` csak 30px magas volt, a mobil minimum 44px. */
@media (max-width: 575.98px) {
    .checkout-login-hint {
        flex-direction: column;
        /* Az `!important` kötelező: a markup Bootstrap `align-items-center` utility-je
           maga is `!important` (minden BS flex-utility az), enélkül a gomb az oszlop
           közepére igazodna, a balra zárt szöveg alatt. */
        align-items: flex-start !important;
    }
    .checkout-login-hint .btn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Mini-kosár lenyíló: legfeljebb ~4 tétel látszódjon egyszerre, utána görgethető.
   8+ tételnél a lista a végtelenbe nyúlt. Egy tétel ~70px (a 70×70-es kép adja a
   magasságot), a divider 17px (1px vonal + 2×8px margó) → 4 tétel + 3 divider ≈
   331px; 340px-cel a 4. tétel teljesen látszik, és egy hajszálnyi hint jelzi a
   görgetést. Csak a .dropcart__list görget — a részösszeg és a gombok fixen
   maradnak alul. Scope: a fejléc-indikátor lenyílója. */
.indicator .dropcart__list {
    max-height: 340px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* A × (eltávolítás) gombok egy vonalba rendezése a görgethető listában:
   - margin-right: 0 — a téma -13px-es kilógását visszavonjuk, különben az
     overflow-x: hidden levágná és a görgetősávra esne.
   - margin-left: auto — a flex-sorban jobbra tolja, így MINDEN × a tétel jobb
     szélén, azonos x-en van (alapból a név után ült → névhossztól függő, ezért
     szétszórt x). Ez adja az "egy vonalban" igazítást.
   - align-self: flex-start — egységesen a tétel tetejére (jobb felső sarok). */
.indicator .dropcart__list .dropcart__item-remove {
    margin-right: 0;
    margin-left: auto;
    align-self: flex-start;
}
/* Vékony, diszkrét görgetősáv (a 272px-es lenyílóban a default széles sáv csúnya). */
.indicator .dropcart__list::-webkit-scrollbar {
    width: 6px;
}
.indicator .dropcart__list::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 3px;
}
.indicator .dropcart__list::-webkit-scrollbar-track {
    background: transparent;
}

/* Regisztrációs jelszó-erősség mérő (JS: password-strength.js). A process-vonal
   színe az erősséget tükrözi (gyenge=piros, közepes=rendszer-sárga, erős=rendszer-zöld),
   a tétel-lista pedig ✓/✗-szel jelzi, melyik követelmény hiányzik. */
.pwd-strength {
    margin-top: 6px;
}
.pwd-strength__meter {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}
.pwd-strength__bar {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width .2s ease, background-color .2s ease;
}
.pwd-strength__bar--weak {
    background-color: #dc3545;
}
.pwd-strength__bar--medium {
    background-color: #ffdf40;
}
.pwd-strength__bar--strong {
    background-color: #006847;
}
.pwd-strength__label {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
}
.pwd-strength__label--weak {
    color: #dc3545;
}
.pwd-strength__label--medium {
    color: #b58b00;
}
.pwd-strength__label--strong {
    color: #006847;
}
.pwd-strength__reqs {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.7;
}
.pwd-strength__reqs li {
    position: relative;
    padding-left: 18px;
    color: #6c757d;
}
.pwd-strength__reqs li::before {
    content: '\25CB'; /* ○ — semleges (még nem gépelt) */
    position: absolute;
    left: 0;
}
.pwd-strength__reqs li.is-met {
    color: #006847;
}
.pwd-strength__reqs li.is-met::before {
    content: '\2713'; /* ✓ */
}
.pwd-strength__reqs li.is-unmet {
    color: #dc3545;
}
.pwd-strength__reqs li.is-unmet::before {
    content: '\2717'; /* ✗ */
}

/* Pénztár: az irányítószám→település kikeresés alatt forgó loading-ikon a Település
   mező jobb szélén. A Livewire wire:loading mutatja (target: a postal_code mező),
   amíg a szerver kitölti a települést. */
.city-loading-spinner {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid rgba(0, 104, 71, 0.3);
    border-top-color: #006847;
    border-radius: 50%;
    animation: city-loading-spin .6s linear infinite;
    pointer-events: none;
}
@keyframes city-loading-spin {
    to { transform: rotate(360deg); }
}

/* Üres állapotok (block-empty): a Red Parts sablon nem ad stílust ehhez a
   komponenshez, ezért az "üres a lista" üzenet és a gomb balra tapadt
   (kosár, kedvencek, összehasonlítás, kereső stb.). Tartalom középre, és a
   szöveg–gomb közé nagyobb térköz. */
.block-empty__body {
    text-align: center;
}
.block-empty__actions {
    margin-top: 1.5rem;
}

/* ============================================================
   Fiók-navigáció (.account-nav) — kijelentkezés a menüben
   ------------------------------------------------------------
   1) A szülő oszlop `d-flex`, ezért a nav-kártya alapból FÜGGŐLEGESEN
      stretchel a tartalom-oszlop magasságára. Rövid oldalon (pl. vezérlőpult)
      ez a kártyát a saját tartalma ALÁ zsugorítja, így a kijelentkezés kilóg a
      fehér dobozból. `align-self: flex-start` → a kártya a tartalmához igazodik
      (a szélesség-kitöltést a flex-grow-1 továbbra is megtartja). */
.account-nav {
    align-self: flex-start;
}
/* 2) A kijelentkezés POST-form + gomb (nem <a>), ezért nem kapta meg a
      `.account-nav__item a` menüpont-stílust. Itt block-menüponttá tesszük
      (azonos padding/szín/hover), aláhúzás és gomb-keret nélkül. */
.account-nav__logout-form {
    margin: 0;
}
.account-nav__item--logout button.account-nav__logout {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    cursor: pointer;
    color: #6c757d;
    padding: 7px 1.5rem;
    font: inherit;
    text-decoration: none;
}
.account-nav__item--logout:hover button.account-nav__logout {
    background: #f2f2f2;
    color: inherit;
}

/* ============================================================
   Kereshető legördülő (combobox) — public/js/searchable-select.js,
   resources/views/components/searchable-select.blade.php
   A natív <select>-et billentyűzettel szűrhető listára cseréli.
   ([x-cloak] szabály már fent definiálva.)
   ============================================================ */
.searchable-select {
    position: relative;
    width: 100%;
}

/* A natív <select> rejtett, de a DOM-ban marad: ez az x-model / wire:model forrása. */
.searchable-select__native {
    display: none;
}

.searchable-select__input {
    width: 100%;
    padding-right: 1.75rem;
    text-overflow: ellipsis;
    cursor: text;
}

/* Lefelé mutató chevron a mező jobb szélén. */
.searchable-select__arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #6c757d;
    border-bottom: 2px solid #6c757d;
    transform: rotate(45deg);
    pointer-events: none;
}

.searchable-select__menu {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Felfelé nyíló változat — ott kell, ahol a lefelé nyíló listát az ős
   overflow:hidden levágná (pl. a főoldali hero-finder). */
.searchable-select--up .searchable-select__menu {
    top: auto;
    bottom: calc(100% + 2px);
}

.searchable-select__option {
    padding: 7px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: #262626;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-select__option--active {
    background: #f2f2f2;
}

.searchable-select__option--selected {
    font-weight: 600;
}

.searchable-select__empty {
    padding: 7px 14px;
    font-size: 14px;
    color: #6c757d;
}

/* --- Kontextus: főoldali hero-finder (44px magas, fehér, keret nélkül) --- */
.block-finder__form-control--select .searchable-select,
.block-finder__form-control--select .searchable-select__input {
    height: 100%;
}

.block-finder__form-control--select .searchable-select__input {
    height: 44px;
    border: none;
    border-radius: 2px;
    background-color: #fff;
    color: #262626;
    padding-left: 16px;
}

.block-finder__form-control--select .searchable-select__input:focus {
    outline: none;
    box-shadow: none;
}

/* --- Hero-finder tableten: a „Keresés" gomb ne csússzon a sor alá ---
   1200 px alatt a sablon 548 px-re tördeli a formot, és 768 px-től pont két
   274 px-es oszlop fér ki. Nálunk 3 select + 1 gomb van, így a gomb a
   „Motor / kivitel" mezővel EGY SORBA kerül. A sablon 35 px-es `margin-top`-ja
   viszont az eredeti, 4 selectes elrendezésből maradt, ahol a gomb egyedül állt
   a harmadik sorban — itt 28 px-rel a mező alá lógatja. A kétoszlopos sávban
   ezért visszaállítjuk az alap 7 px-es margót (768 px alatt, az egyoszlopos
   elrendezésben a nagyobb elválasztó margó marad). */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .block-finder__form-control--button {
        margin-top: 7px;
    }
}

/* --- Hero-finder mobilon: a legördülő NE felfelé nyíljon ---
   Asztali nézetben a hero fix 500 px magas (style.css:7177-7182) és a form az
   aljához közel van (alatta csak ~166 px), ezért kell ott a `--up` (fent, 901. sor).
   1200 px alatt viszont a hero `height: auto` (style.css:7423-7436), és a legfelső
   „Márka" mező FÖLÖTT már csak ~170-210 px marad (360 px-en ~169 px), miközben a
   menü doboza 16rem + 4+4 px padding + 2 px keret = 266 px, a `bottom: calc(100% + 2px)`
   miatt 268 px helyet kérve. A különbözetet a `.block-finder` `overflow: hidden`-je
   levágja — pontosan a hero felső élénél, ami a mobil fejléc (50 px,
   style.mobile-header-variant-one.css:29-30) alsó éle. Innen a bejelentés
   megfogalmazása: „a header eltakarja". A hiányzó rész görgetéssel SEM hozható elő:
   a doboz FELFELÉ lóg ki, a blokk-irányban előre eső túlcsordulás elérhetetlen
   (a scrollTop nem lehet negatív), így a searchable-select.js `scrollIntoView`-ja
   sem éri el. Fekvőben rosszabb: a cím egy sorba fér, így még kevesebb a hely
   fölötte (~176 px), a menü teteje pedig már a viewport fölé is esne.
   A fejléc NEM sticky/fixed (csak `position: relative`), tehát nem úszik rá a
   tartalomra — a takarás oka tisztán a vágóél egybeesése. */
@media (max-width: 1199.98px) {
    /* 1. Lefelé nyíljon: a mező fölött nincs elég hely, alatta van.
          Csak a hero-finderre szűkítve, hogy a generikus `--up` utility
          jelentése ne változzon meg a jövőbeli használóknál. */
    .block-finder .searchable-select--up .searchable-select__menu {
        top: calc(100% + 2px);
        bottom: auto;
    }

    /* 2. A hero ne vágja le a menüt. Lefelé nyitva is túllóg: álló 360 px-en a
          Márka mező alatt a hero aljáig csak ~217 px van, a menü viszont 258 px-et
          kér. A kilógó rész a KÖVETKEZŐ szekcióra kerül; ott a `.block-finder__body`
          meglévő `z-index: 2`-je (style.css:7225 — flex-elemen pozicionálás nélkül is
          hat) már elég: a `.block-features`-nek nincs z-indexe, az owl-carousel is
          csak 1. A `.block-finder__body` z-indexéhez NEM nyúlunk: lefelé nyíló lista
          sosem ér a fejléchez (az a hero FÖLÖTT van), a 100-as fejléc pedig a projekt
          rétegrendjének teteje. */
    .block-finder {
        overflow: visible;
    }
}

/* Fekvő telefon: a látható magasság ~360 px, a 256 px-es lista a viewport alá
   lógna. A `vh` az alap, a `dvh` (Chrome 108+) a becsúszó URL-sávot is követi;
   ha a böngésző nem ismeri, a deklaráció érvénytelen és az előző sor marad.
   FIGYELEM: a `dvh` a képernyő-billentyűzetre NEM reagál (a layout viewport
   meta-ban nincs `interactive-widget=resizes-content`), erre nem is támaszkodunk —
   a billentyűzetes esetet a lefelé nyitás oldja meg, mert a böngésző a fókuszált
   mezőt a látható terület tetejére görgeti. */
@media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) {
    .block-finder .searchable-select__menu {
        max-height: 45vh;
        max-height: 45dvh;
    }
}

/* --- Kontextus: fejléc jármű-picker — a lista a panel többi mezője fölé kerüljön --- */
.search__dropdown--vehicle-picker .searchable-select__menu {
    z-index: 1100;
}

/* --- Fejléc-kereső: hosszú jármű-név ne tolja ki az inputot a keret alól ---
   A `.search__button--start` (járműválasztó) `flex-shrink: 0`, ezért egy hosszú
   jármű-név (pl. „OPEL ASTRA G Ferdehátú (T98) 1.4 16V (F08, F48)") min-content
   szélességűre nőtt, és az inputtal együtt túllógott a `.search__body` 560 px-es
   keretén. A nagyító gomb viszont ehhez a kerethez van abszolút pozicionálva
   (`right: 0`), így az input SZÖVEGÉNEK KÖZEPÉRE csúszott. Megoldás: a gombot
   maximáljuk, a jármű nevét ellipszissel vágjuk — így minden a kereten belül marad. */
.search .search__body .search__button--start {
    max-width: 50%;
}

.search .search__body .search__button--start .search__button-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Fizetés — SimplePay szerződéses megjelenítés és fizetési visszajelzés
   ========================================================================== */

/* A SimplePay logó a pénztárban, a bankkártyás fizetési mód alatt. A logó a
   hivatalos csomagból származó, MÓDOSÍTATLAN kép — színt/arányt/átlátszóságot
   nem állítunk rajta, csak a megjelenített méretét. */
.checkout__payment-logo {
    margin: 6px 0 2px 0;
}

.checkout__payment-logo img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* A lábléc sötét hátterén az átlátszó PNG sötét elemei (az „Elfogadott kártyák"
   felirat és a kártyalogók kerete) beleolvadnak a háttérbe, ezért a logó fehér
   alátétet kap. A képfájlhoz nem nyúlunk — csak a mögötte lévő felület színe
   változik, ami a hivatalos megjelenítési előírásnak megfelel. */
.site-footer__payments a {
    display: inline-block;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 4px;
    line-height: 0;
}

.site-footer__payments img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* A gateway-ről visszatérő vevő fizetési tájékoztatója a köszönőoldalon.
   A színezés csak vizuális segítség — a szövegezés kötöttségeit (megszakított
   és lejárt fizetést tilos sikertelennek nevezni) a controller kezeli. */
.order-success__payment {
    margin-bottom: 20px;
    border-left: 4px solid #b0b0b0;
}

.order-success__payment--success {
    border-left-color: #4caf50;
}

.order-success__payment--fail {
    border-left-color: #d32f2f;
}

.order-success__payment--cancel,
.order-success__payment--timeout {
    border-left-color: #ef8c00;
}

.order-success__payment-body {
    padding: 16px 20px;
}

.order-success__payment-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 6px;
}

.order-success__payment-message {
    margin-bottom: 0;
}

.order-success__payment-reference {
    margin-top: 10px;
    font-size: 14px;
}

.order-success__payment-actions {
    margin-top: 14px;
}

/* ==========================================================================
   reCAPTCHA v3 jelvény — bal alsó sarok
   ========================================================================== */

/* A Google alapértelmezésben a jobb alsó sarokba teszi a jelvényt (inline
   `right: -186px; bottom: 14px`), pontosan oda, ahol a lebegő asszisztens-gomb is
   ül (.ai-chat — right/bottom: 20px), így a kettő egymásra csúszik. Ezért a
   jelvényt a szabad bal alsó sarokba visszük. Az eredeti viselkedés megmarad:
   alapból csak a 70px-es reCAPTCHA-logó látszik, rámutatásra kicsúszik a teljes,
   „Védve a reCAPTCHA által" feliratú sáv (a Google `right`-alapú animációja
   helyett szélesség-animációval, mert a jelvény már nem a jobb szélhez tapad).
   A jelvény továbbra is MINDEN oldalon látható marad — a Google feltételei ezt
   írják elő; elrejteni csak a kötelező jogi szöveg kiírásával lehetne.
   Az `!important` kötelező: a Google inline style-t tesz az elemre.

   A `z-index` is KELL: a Google inline style-jában NINCS z-index, a jelvény csak
   attól látszik, hogy utolsóként kerül a <body> végére. Emiatt bármelyik pozicionált,
   pozitív z-indexű elem rácsúszik — a főoldalon az owl-carousel
   (`vendor/owl-carousel/assets/owl.carousel.min.css`: `.owl-carousel { z-index: 1 }`)
   termékkártyái takarták el a jelvény tetejét. Az érték szándékosan 999: a teljes
   oldaltartalom fölött van (a sablon legmagasabb tartalmi rétege a fejléc, 100),
   de MINDEN átfedő réteg alatt marad — mobilmenü/offcanvas 1000, modális 1050,
   asszisztens-chat 1080, jármű-választó 1100, toast 9999, süti-sáv. Így a jelvény
   sosem úszik rá a nyitott mobilmenüre, ami ugyanezt a bal alsó sarkot fedi. */
.grecaptcha-badge {
    left: 4px !important;
    right: auto !important;
    width: 70px !important;
    z-index: 999 !important;
    overflow: hidden !important;
    transition: width .3s ease !important;
}

.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within {
    width: 256px !important;
}

/* ==========================================================================
   GYIK (/gyik) — kategória-jegyzék és lenyitható válaszok
   ========================================================================== */

/* Az alapsablon a kérdéseket kétoszlopos rácsban, MINDIG kinyitva jelenítette meg
   (.faq__question { width: calc(50% - 40px) }). Harminc feletti kérdésnél ez egy
   nagyon hosszú, nehezen pásztázható oldalt adott, és a bal/jobb oszlop eltérő
   magassága miatt a sorrend is összekuszálódott. Helyette egyhasábos, natív
   <details>/<summary> accordion — JavaScript és inline eseménykezelő nélkül, mert
   a CSP nem engedélyez inline handlert. */

.faq__toc {
    margin-bottom: 24px;
}

.faq__toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq__toc-link {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    background-color: #fff;
    color: #3d464d;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
}

.faq__toc-link:hover,
.faq__toc-link:focus {
    background-color: #ffdf40;
    border-color: #ffdf40;
    color: #3d464d;
    text-decoration: none;
}

.faq__section-body {
    display: block;
    margin: 0;
}

.faq__question {
    width: auto;
    margin: 0;
    border-bottom: 1px solid #ebebeb;
}

.faq__question:last-child {
    border-bottom: none;
}

.faq__question-title {
    cursor: pointer;
    list-style: none;
    padding: 16px 32px 16px 0;
    position: relative;
    margin-bottom: 0;
}

/* A natív nyíl-jelölő elrejtése (WebKit külön szelektort igényel) — helyette saját,
   a nyitott állapotban elforduló chevron. */
.faq__question-title::-webkit-details-marker {
    display: none;
}

.faq__question-title::after {
    content: "";
    position: absolute;
    top: 24px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6c757d;
    border-bottom: 2px solid #6c757d;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform .15s ease;
}

.faq__question[open] > .faq__question-title::after {
    transform: rotate(-135deg);
}

.faq__question-title:hover .faq__question-heading {
    color: #cc3333;
}

.faq__question-heading {
    display: inline;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

.faq__question-answer {
    padding: 0 32px 20px 0;
}

/* A válaszban a saját oldalainkra mutató, automatikusan behelyettesített linkek
   (FaqAnswerPresenter) legyenek egyértelműen kattinthatók. */
.faq__question-answer a {
    text-decoration: underline;
}

/* A horgonyra érkező kérdés ne csússzon a ragadós fejléc alá. */
.faq__question,
.faq__section {
    scroll-margin-top: 90px;
}

@media (max-width: 991.98px) {
    .faq__question {
        margin: 0;
        width: auto;
    }
    .faq__question-title {
        padding: 14px 28px 14px 0;
    }
    .faq__question-answer {
        padding: 0 0 18px;
    }
}

/* ==========================================================================
   Cikkszám másolása gomb a termékkártyán
   ========================================================================== */

/* A vásárló a cikkszámot rendszerint tovább keresi / beilleszti valahová, ezért a
   kártya meta-sorában a cikkszám után egy másolás-gomb áll (JS: product-card-
   actions.js → data-card-action="copy-sku"). Nincs hover-mögé rejtve, mert érintős
   eszközön nincs hover-állapot.

   A gomb 22px-es (érintésbarát) doboz 15px-es ikonnal, márkazöld színnel — a 12px-es
   szürke meta-szöveg mellett a halvány, apró ikont a vásárló egyszerűen nem vette
   észre. A negatív függőleges margó miatt a nagyobb doboz NEM növeli a sormagasságot. */
.product-card__sku-copy {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: transparent;
    border: 0;
    border-radius: 3px;
    padding: 0;
    margin: -5px 0 -5px 4px;
    width: 22px;
    height: 22px;
    color: #01573c;
    line-height: 1;
    cursor: pointer;
    transition: color .12s, background-color .12s;
}

/* A két ikon (másolás / pipa) egymást váltja. FIGYELEM: a rejtés-szabályok
   szelektorai szándékosan két osztályból állnak — egy sima `.…-done` (0,1,0)
   gyengébb lenne a `.…-sku-copy svg` (0,1,1) szabálynál, és a pipa a másolás-ikon
   mellett MARADNA látszódni. */
.product-card__sku-copy svg {
    fill: currentColor;
}

.product-card__sku-copy .product-card__sku-copy-icon {
    display: block;
}

.product-card__sku-copy .product-card__sku-copy-done {
    display: none;
}

.product-card__sku-copy:hover {
    color: #013d2a;
    background-color: rgba(1, 87, 60, .1);
}

/* A gomb egy 12px-es ikon: a böngésző alap-fókuszgyűrűje ráfolyna a szövegre. */
.product-card__sku-copy:focus {
    outline: none;
}

.product-card__sku-copy:focus-visible {
    outline: 2px solid #01573c;
    outline-offset: 2px;
    color: #01573c;
}

/* --------------------------------------------------------------------------
   Lista-nézet (.products-list[data-layout="list"]) meta-sorai
   --------------------------------------------------------------------------
   A Red Parts sablon ebben az elrendezésben EGYETLEN meta-sorra (cikkszám)
   számított: abszolút pozicionált, 180px széles, keretes csík a kártya jobb alsó
   sarkában. A mi termékkártyánk három meta-sort ad ki (Cikkszám, Gyártó,
   Kategória), így mindhárom UGYANARRA a helyre került egymás fölé — a három
   szöveg olvashatatlanul egymásra csúszott.

   Megoldás: ebben a nézetben a meta-sorok a normál szövegfolyamba kerülnek
   vissza (a rács-nézettel egyező sorrendben: cikkszám, név, gyártó, kategória).
   A `.product-card__info` 57px-es alsó belső margóját NEM nyúljuk meg: az az
   abszolút pozicionált „Jó az autójához" jelvénynek tart helyet. */
@media (min-width: 768px) {
    .products-list[data-layout="list"] .product-card .product-card__meta {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        line-height: 18px;
        border-top: 0;
        text-align: left;
    }

    .products-list[data-layout="list"] .product-card .product-card__name {
        margin: 4px 0;
    }
}

/* --------------------------------------------------------------------------
   Táblázatos nézet (.products-list[data-layout="table"]) meta-cellái
   --------------------------------------------------------------------------
   A sablonban a fejléc-oszlop (.products-list__column--meta) 16px oldalsó belső
   margót kap, a hozzá tartozó cella viszont NULLÁT — a több sorba törő
   kategórianév ezért nekifutott az oszlopot elválasztó vonalnak. Ugyanaz a 140px
   -es, border-box szélesség marad, csak a szöveg kap levegőt. */
@media (min-width: 1200px) {
    .products-list[data-layout="table"] .product-card .product-card__meta {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Sikeres másolás után 1,5 mp-ig pipa (a toast mellett a gombon is látszik). */
.product-card__sku-copy--copied {
    color: #15803d;
}

.product-card__sku-copy--copied .product-card__sku-copy-icon {
    display: none;
}

.product-card__sku-copy--copied .product-card__sku-copy-done {
    display: block;
}

/* ==========================================================================
   Kiválasztott jármű — közös sárga jelzőfelület
   ========================================================================== */

/* A választott autót MINDENHOL ugyanaz a sárga jelöli: az oldal tetején futó
 * jelző-sáv (layouts guest+customer alerts.blade.php) és a mobil hamburger-menü
 * járműválasztója (components/mobile-vehicle-picker.blade.php). A színt egy
 * helyen tartjuk, hogy a kettő ne csússzon szét — korábban a sáv inline
 * `style`-ban hordozta, a mobil menü pedig sehogy.
 * A szövegszín a `.alert-info`-éval azonos (#2d3e40), a 2px-es lekerekítés a
 * sablon `.alert` alapstílusát követi. */
.selected-vehicle,
.mobile-menu__vehicle-current {
    background-color: #ffdf40;
    color: #2d3e40;
    border-radius: 2px;
}

/* A mobil menü sora nem `.alert`, ezért az elrendezését itt adjuk meg. */
.mobile-menu__vehicle-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 8px 6px 10px;
    font-size: 14px;
    font-weight: 500;
}

/* A törlés gomb alapból fehér hátteret és világosszürke ikont kap
 * (.vehicles-list__item-remove) — az a sárga sávon idegen folt lenne. */
.mobile-menu__vehicle-current .vehicles-list__item-remove {
    background-color: transparent;
    color: #6b5e12;
}

.mobile-menu__vehicle-current .vehicles-list__item-remove:hover {
    background-color: rgba(0, 0, 0, .08);
    color: #2d3e40;
}

.mobile-menu__vehicle-current .vehicles-list__item-remove:active {
    background-color: rgba(0, 0, 0, .14);
    color: #2d3e40;
}

/* ==========================================================================
   Breadcrumb mobilon — egysoros görgethető sáv, érintésbarát chipekkel
   ========================================================================== */

/* A sablon a breadcrumb-elemeket `float: left`-tel tördeli, a szürke ferde
 * hátteret pedig a `.breadcrumb__item-link` `:before`/`:after` pszeudó-eleme
 * rajzolja, `top: 0; bottom: 0`-val a link FIX 21px-es dobozához kötve.
 * Ha egy felirat nem fér ki (hosszú termék- vagy kategórianév), a szöveg
 * tördelődik, a doboz viszont 21px marad → a háttér csak az első sor mögött
 * van ott, a többi sor "kilóg" belőle. Ez a bejelentett elcsúszás.
 * Mellékhatásként a tördelt (kétsoros) breadcrumb a `.block-header__title`
 * -44px-es negatív margója alá nőtt, így a H1 ráült a második sorra.
 *
 * Megoldás: mobilon a lista NEM tördel, hanem vízszintesen görgethető sáv
 * lesz. Így a chip mindig egysoros — sem a háttér nem tud elcsúszni, sem a
 * cím nem tud ráülni. A magasság 21 → 40px, hogy ujjal is eltalálható legyen.
 *
 * A ferde geometria a magasságból számolódik (skewX(-30deg), origin: közép):
 * eltolás = magasság/2 × tan(30°). 21px-nél ez a sablon 6.06217px-e,
 * 40px-nél 11.54701px. Ebből következik a többi érték is — a sablon saját
 * képleteit követve:
 *   - vízszintes padding = 2 × eltolás + 3px   (sablon: 12.12435 + 3)
 *   - item margin-right  = 5px − 2 × eltolás   (5px rés a chipek között)
 *   - első elem `:after` right = 2 × eltolás   (a lapos bal él kitöltése)
 * Ha az eltolás nem követi a magasságot, a parallelogramma kilóg a doboz-
 * ból és a szomszédos chipek egymásba érnek. */
@media (max-width: 1199.98px) {
    .breadcrumb__list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: auto;
        /* A konténer 15px-es belső margóját visszavonjuk, hogy a sáv a
         * képernyő széléig fusson (a chip ne a padding-nál vágódjon el).
         * A padding a listán belül pótolja, így az első/utolsó chip nem
         * tapad a kijelző szélére. A jobb oldali 24px a halványodás sávja
         * (lásd lent) — a görgetés végállásában a Chrome/Firefox beszámítja
         * a záró paddingot, így az utolsó chip a fade ELŐTT áll meg, és nem
         * marad félig elhalványítva. */
        margin: 0 -15px;
        padding: 0 24px 0 15px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Jobb szélen halványodás: jelzi, hogy oldalra még van tartalom.
         * Pontosan a záró padding szélességén — ha a breadcrumb kifér (rövid
         * kategórianév), a chipek a fade előtt véget érnek, tehát a halványodás
         * nem látszik. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    }

    /* A görgetősáv magán a breadcrumb-sávon zavaró lenne (a chipek alá esne). */
    .breadcrumb__list::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb__item {
        flex: 0 0 auto;
        margin-top: 0;
        white-space: nowrap;
    }

    .breadcrumb__item-link {
        height: 40px;
        padding: 0 26.09402px;
    }

    /* FIGYELEM — a `style.css` LTR/RTL build: minden VÍZSZINTES tulajdonságot
     * (`float`, `margin-right`, `left`/`right`, `padding-left`) `[dir="ltr"]`
     * prefixszel ad meg, ami (0,2,0)-s szelektor — egy sima osztály-szabály
     * (0,1,0) NEM veri, akkor sem, ha később töltődik. Ezért itt ugyanazt a
     * prefixet használjuk (a layout `<html dir="ltr">`-t ír ki), így azonos
     * specificitáson a későbbi betöltés dönt a javunkra, az RTL build pedig
     * érintetlen marad. A magasság/padding fentebb prefix nélkül mehet, mert
     * a sablon is prefix nélküli szabályban adja. */
    [dir="ltr"] .breadcrumb__item {
        float: none;
        margin-right: -18.09402px;
    }

    /* A sablon `--last { margin-right: 0 }` szabálya is (0,2,0), de KORÁBBI,
     * mint a fenti −18px — ezért itt meg kell ismételni, különben az utolsó
     * chip után is negatív margó maradna. */
    [dir="ltr"] .breadcrumb__item--last {
        margin-right: 0;
    }

    [dir="ltr"] .breadcrumb__item-link:before {
        left: 11.54701px;
        right: 11.54701px;
    }

    [dir="ltr"] .breadcrumb__item--first .breadcrumb__item-link {
        padding-left: 12px;
    }

    [dir="ltr"] .breadcrumb__item--first .breadcrumb__item-link:after {
        right: 23.09402px;
    }

    /* A chip 21 → 40px-es magasodását a blokk saját belső margóiból vesszük
     * vissza (sablon: 16px / 40px), hogy a fejléc ne toljon le mindent 20px-szel.
     * A `.block-header__title` -44px-es negatív margója így is elfér: a cím
     * szövege a chip alatt marad, nem ér hozzá. */
    .block-header__breadcrumb {
        padding-top: 8px;
        padding-bottom: 36px;
    }
}

/* ==========================================================================
   Jármű-panel + kategória-böngésző (kereső- és kategóriaoldal)
   --------------------------------------------------------------------------
   Az elrendezés: bal oldalon a választott jármű adatlapja (vagy az üres állapot),
   jobb oldalon a képes, kétoszlopos kategória-böngésző, alatta a terméklista.
   Komponensek: x-vehicle-panel, x-category-browser.
   ========================================================================== */

.catalog-sidebar {
    position: sticky;
    top: 16px;
}

/* --- jármű-panel --------------------------------------------------------- */

.veh-panel {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    margin-bottom: 20px;
}

.veh-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    background: #006847;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.veh-panel--empty .veh-panel__head {
    background: #3d464d;
}

.veh-panel__head-clear {
    padding: 0;
    border: 0;
    background: none;
    line-height: 1;
    color: #cfe3da;
    cursor: pointer;
}

.veh-panel__head-clear:hover {
    color: #fff;
}

.veh-panel__head-clear svg {
    fill: currentColor;
}

.veh-panel__body {
    padding: 14px 16px 16px;
}

.veh-panel__figure {
    padding: 0 8px 6px;
    text-align: center;
}

.veh-panel__figure svg {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.veh-silhouette__fill {
    fill: #3d464d;
    opacity: .18;
}

.veh-silhouette__stroke {
    stroke: #3d464d;
}

.veh-silhouette__glass {
    fill: #fff;
    opacity: .85;
}

.veh-silhouette__hub {
    fill: #3d464d;
    opacity: .4;
}

.veh-panel__figure--muted .veh-silhouette__fill,
.veh-panel__figure--muted .veh-silhouette__hub {
    fill: #adb5bd;
}

.veh-panel__figure--muted .veh-silhouette__stroke {
    stroke: #adb5bd;
}

.veh-panel__brand,
.veh-panel__model,
.veh-panel__type {
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
}

/* A sziluett csak az üres állapotban van jelen, ezért a kitöltött panel első
   sora felül nem kap extra hézagot. */
.veh-panel__ident > :first-child {
    padding-top: 0;
}

.veh-panel__brand {
    font-size: 20px;
    font-weight: 500;
}

.veh-panel__model {
    font-size: 16px;
}

.veh-panel__type {
    font-size: 14px;
}

.veh-panel__type small {
    display: block;
    margin-top: 1px;
    color: #999;
    font-size: 12px;
}

.veh-panel__specs {
    margin: 12px 0 0;
    font-size: 12.5px;
}

.veh-panel__spec {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
}

.veh-panel__spec dt {
    flex: 0 0 auto;
    color: #999;
    font-weight: 400;
    white-space: nowrap;
}

.veh-panel__spec dd {
    margin: 0;
    color: #3d464d;
    text-align: right;
}

.veh-panel__filter {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #d5e9de;
    border-radius: 2px;
    background: #eef7f2;
    font-size: 12.5px;
}

.veh-panel__filter-title {
    margin-bottom: 4px;
    color: #006847;
    font-weight: 500;
}

/* Alvazszambol felismert, de a sajat katalogusunkhoz nem kotheto jarmu: nincs
   mire szurni, ezert a kapcsolo helyett meg kell mondani, MIERT nincs — enelkul
   a vasarlo azt hinne, a lista mar ra van szurve. */
.veh-panel__note {
    margin: 0;
    color: #3d464d;
    line-height: 1.4;
}

.veh-panel__toggle {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #3d464d;
    cursor: pointer;
}

.veh-panel__toggle input {
    margin-top: 3px;
}

.veh-panel__actions {
    margin-top: 14px;
}

.veh-panel__btn {
    display: block;
    width: 100%;
    padding: 11px 10px;
    border: 2px solid transparent;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.veh-panel__btn + .veh-panel__btn {
    margin-top: 8px;
}

/* A garazsba-mentes gomb rejtve erkezik, es csak a garazs lekerdezese utan
   jelenik meg. A `display: block` kulonben FELULIRNA a [hidden]-t (szerzoi stilus
   > bongeszo alapertelmezes), es a gomb mindig latszana. */
.veh-panel__btn[hidden] {
    display: none;
}

.veh-panel__btn--primary {
    border-color: #006847;
    background: #006847;
    color: #fff;
}

.veh-panel__btn--primary:hover {
    border-color: #00563b;
    background: #00563b;
    color: #fff;
}

.veh-panel__btn--ghost {
    border-color: #dcdcdc;
    background: #fff;
    color: #3d464d;
}

.veh-panel__btn--ghost:hover {
    border-color: #006847;
    color: #006847;
    text-decoration: none;
}

.veh-panel__body--empty {
    text-align: center;
}

.veh-panel__empty-title {
    margin: 6px 0;
    font-size: 16px;
    color: #262626;
}

.veh-panel__empty-text {
    margin-bottom: 14px;
    color: #6c757d;
    font-size: 12.5px;
    line-height: 1.5;
}

.veh-panel__empty-hint {
    margin-top: 10px;
    color: #999;
    font-size: 11.5px;
}

/* Alvazszam a jarmu NELKULI panelen: a vasarlo megadta (kereso vagy asszisztens),
   de a katalogus-jarmuvet nem tudtuk hozza kotni. Az adat akkor is az ove — ha
   itt sem latna, azt hinne, elveszett. A sort a category-panel.js tolti fel, a
   szerver rejtve rendereli (l. a Blade indoklasat). */
.veh-panel__empty-vin {
    margin: 0 0 14px;
    padding: 8px 10px;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    background: #fafafa;
    color: #3d464d;
    /* A 17 karakteres azonosito a keskeny oldalsavban nem fer ki egy sorba, es
       szokoze sincs, amin torhetne — enelkul kilogna a panelbol. */
    font-size: 12.5px;
    word-break: break-all;
}

.veh-panel__empty-vin-label {
    display: block;
    color: #999;
    font-size: 11.5px;
    word-break: normal;
}

/* Vízszintes változat: a teljes szélességű kategória-layoutokhoz, ahol nincs
   oldalsáv-oszlop. Ugyanaz a komponens, más elrendezés. */
.veh-panel--horizontal .veh-panel__body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.veh-panel--horizontal .veh-panel__figure {
    flex: 0 0 120px;
    padding: 0;
}

.veh-panel--horizontal .veh-panel__ident {
    flex: 0 0 auto;
}

.veh-panel--horizontal .veh-panel__brand,
.veh-panel--horizontal .veh-panel__model,
.veh-panel--horizontal .veh-panel__type {
    padding: 0;
    border: 0;
}

.veh-panel--horizontal .veh-panel__specs {
    flex: 1 1 320px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    margin-top: 0;
}

.veh-panel--horizontal .veh-panel__filter {
    flex: 0 0 auto;
    margin-top: 0;
}

.veh-panel--horizontal .veh-panel__actions {
    flex: 0 0 200px;
    margin-top: 0;
}

/* --- szűkítési lépcsők (a böngésző fölött) ------------------------------- */

/* A fejléc-breadcrumb ugyanezt a láncot mutatja, de a lap tetején: mire a
   vásárló a részkategóriákig görget, az már kifutott a képből. Ez a sáv ott áll,
   ahol a következő szűkítés történik. */
.cat-trail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 2px;
}

.cat-trail__back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 45%;
    padding: 5px 11px;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    color: #3d464d;
    font-size: 12.5px;
    line-height: 1.2;
    text-decoration: none;
}

.cat-trail__back:hover,
.cat-trail__back:focus {
    border-color: #006847;
    color: #006847;
    text-decoration: none;
}

.cat-trail__back-icon {
    flex: 0 0 auto;
    fill: currentColor;
}

.cat-trail__back-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-trail__list {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    /* A gorgetosav magan a savon zavaro lenne — a breadcrumbnal ugyanez a minta. */
    scrollbar-width: none;
}

.cat-trail__list::-webkit-scrollbar {
    display: none;
}

.cat-trail__item {
    display: flex;
    align-items: center;
    font-size: 12.5px;
    white-space: nowrap;
}

/* Az elvalaszto jel CSS-bol jon: tisztan diszites, a hierarchiat maga a
   lista-szerkezet hordozza, a felolvasonak nem kell kimondania. */
.cat-trail__item + .cat-trail__item:before {
    content: "\203a";
    margin: 0 8px;
    color: #b7b7b7;
}

.cat-trail__link {
    color: #6c757d;
    text-decoration: none;
}

.cat-trail__link:hover {
    color: #006847;
    text-decoration: underline;
}

.cat-trail__current {
    color: #262626;
    font-weight: 500;
}

/* A sav gombjai (vissza-lepes es a panelben nyitott lepcsok) ugyanugy nezzenek
   ki, mint a linkek: a bongeszo alapertelmezett gomb-kinezete itt idegen lenne. */
.cat-trail__back,
.cat-trail__step {
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.cat-trail__step {
    padding: 0;
    border: 0;
    font-size: inherit;
    line-height: inherit;
}

/* Csak a lanc UTOLSO eleme az aktualis. A kategoriaoldalon a szerver kiirja a
   lap sajat lepcsojet „aktualiskent", de ha a latogato a panelben tovabb
   szukit, az mar nem a vege — ilyenkor visszahalvanyul. */
.cat-trail__item:not(:last-child) .cat-trail__current {
    color: #6c757d;
    font-weight: 400;
}

/* Telefonon a gomb + a lanc egy sorban elfogyna (mert 337 px-es a tartalom-oszlop),
   ezert a vissza-gomb sajat sorba kerul, es teljes szelessegu lesz. */
@media (max-width: 575px) {
    .cat-trail {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .cat-trail__back {
        max-width: none;
        justify-content: center;
    }
}

/* --- kategória-böngésző -------------------------------------------------- */

.cat-browser {
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 2px;
}

.cat-browser__tabs {
    display: flex;
    padding: 0 6px;
    border-bottom: 1px solid #ebebeb;
}

.cat-browser__tab {
    margin-bottom: -1px;
    padding: 13px 18px 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #6c757d;
    font-size: 12.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
}

.cat-browser__tab--active {
    border-bottom-color: #006847;
    color: #006847;
    font-weight: 500;
}

.cat-browser__body {
    padding: 16px 18px 8px;
}

.cat-browser__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.cat-browser__rail-label {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    background: #f7f7f7;
    color: #3d464d;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
}

/* A TOP cimke GOMB: a mellette allo ikonok felirat nelkul kitalalhatatlanok,
   ezert rakattintva ugyanez a sav nevesitett listakent is elojon. A gomb-alaphelyzet
   (bongeszo-stilusok kinullazasa) azert kell, hogy pontosan ugy nezzen ki, mint
   korabban a felirat. */
.cat-browser__rail-label--toggle {
    gap: 7px;
    border-color: #dcdcdc;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
    cursor: pointer;
}

.cat-browser__rail-label--toggle:hover,
.cat-browser__rail-label--toggle[aria-expanded="true"] {
    border-color: #006847;
    color: #006847;
}

/* A nyil lefele fordul, ha a lista nyitva van — ugyanaz a jelentes, mint a
   fa +/- gombjanal: "van meg lentebb". */
.cat-browser__rail-caret {
    fill: #9aa0a6;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

.cat-browser__rail-label--toggle:hover .cat-browser__rail-caret,
.cat-browser__rail-label--toggle[aria-expanded="true"] .cat-browser__rail-caret {
    fill: #006847;
}

.cat-browser__rail-label--toggle[aria-expanded="true"] .cat-browser__rail-caret {
    transform: rotate(-90deg);
}

.cat-browser__rail-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 4px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    background: #fff;
}

.cat-browser__rail-item:hover {
    border-color: #006847;
}

.cat-browser__rail-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    mix-blend-mode: multiply;
}

/* --- TOP lista (a sav kinyitva) --- */

/* A panel a sav ALATT nyilik, nem lebego doboz: a fa igy lejjebb csuszik ugyan,
   viszont a lista es a fa egyszerre olvashato — a lebego reteg pont azt takarna
   el, amivel ossze akarja vetni a vasarlo. */
.cat-browser__top {
    margin-bottom: 14px;
    padding: 4px 14px 10px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    background: #fbfbfb;
}

.cat-browser__top-group + .cat-browser__top-group {
    margin-top: 10px;
}

.cat-browser__top-title {
    padding: 8px 0 6px;
    color: #6c757d;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cat-browser__top-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 7px 4px;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    background: none;
    color: #262626;
    font: inherit;
    text-align: left;
}

.cat-browser__top-item--action {
    cursor: pointer;
}

.cat-browser__top-item:hover {
    color: #006847;
    text-decoration: none;
}

.cat-browser__top-item:hover .cat-browser__item-image {
    border-color: #006847;
}

.cat-browser__top-item:hover .cat-browser__item-chevron {
    fill: #006847;
}

/* Kisebb kep-keret, mint a fa soraiban: ez gyors-eleres, nem bongeszes — minel
   tobb sor lassszon egyszerre. */
.cat-browser__top-item .cat-browser__item-image {
    flex: 0 0 36px;
    height: 36px;
}

.cat-browser__top-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.3;
}

/* Az utvonal-oszlop halvany es masodlagos: a "Levegoszuro" onmagaban nem mondja
   meg, a fa melyik agan all, de nem is o a sor fo mondanivaloja. Egy sorban
   marad, csonkolva — kulonben egy negy szintu ut ketszer olyan magas sort adna. */
.cat-browser__top-path {
    flex: 0 1 auto;
    overflow: hidden;
    max-width: 45%;
    color: #9aa0a6;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    /* Telefonon a nev es a darabszam fer el — az utvonal elvinne a fel sort. */
    .cat-browser__top-path {
        display: none;
    }
}

.cat-browser__quick {
    position: relative;
    margin-bottom: 6px;
}

.cat-browser__quick-icon {
    position: absolute;
    top: 14px;
    left: 13px;
    fill: #a5a5a5;
    pointer-events: none;
}

.cat-browser__quick-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid #dcdcdc;
    border-radius: 2px;
    background: #fff;
    color: #3d464d;
    font-size: 14px;
}

.cat-browser__quick-input:focus {
    border-color: #006847;
    outline: none;
}

.cat-browser__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
}

.cat-browser__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 4px;
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
}

.cat-browser__item:hover {
    color: #006847;
    text-decoration: none;
}

.cat-browser__item:hover .cat-browser__item-image {
    border-color: #006847;
}

.cat-browser__item-image {
    flex: 0 0 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    background: #fff;
}

.cat-browser__item-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.cat-browser__item-name {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.3;
}

.cat-browser__item-count {
    color: #9aa0a6;
    font-size: 13px;
}

.cat-browser__item-chevron {
    flex: 0 0 auto;
    fill: #c4c4c4;
}

.cat-browser__item:hover .cat-browser__item-chevron {
    fill: #006847;
}

/* --- fa-szerkezet (lustan toltott alkategoriak) --- */

/* KET FUGGETLEN HASAB, NEM RACS-SOROK.
   A fa korabban ugyanaz a ketoszlopos racs volt, mint a kepes kategoria-lista —
   ott viszont a ket oszlop UGYANAZON a sor-savon ul. Egy kinyitott ag ezert
   megnyujtotta a sort, es a szomszed oszlopban akkora ures folt keletkezett,
   amekkora a kinyitott reszfa (merve: 366 px egy hetelemu csoportnal), a lista
   tobbi resze pedig lejjebb csuszott. Tulajdonosi bejelentes (2026-08-14):
   "ha az egyik oszlopban lenyitom, a masik oszlop szetesik".

   Hasabokkal a nyitas CSAK a sajat hasabot tolja lejjebb — a masik oszlop egy
   pixelt sem mozdul. A tetelek elosztasa FELEZO (elso fel / masodik fel), nem
   valtogatos: igy a ket hasab egymas ala csusztatva (telefonon, l. lentebb)
   pontosan az eredeti sorrendet adja vissza. */
.cat-browser__grid--tree {
    display: flex;
    align-items: flex-start;
    column-gap: 30px;
}

.cat-browser__col {
    flex: 1 1 0;
    /* Kulonben egy hosszu kategorianev szethuzna a hasabot. */
    min-width: 0;
}

.cat-browser__branch {
    min-width: 0;
}

.cat-browser__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f0f0f0;
}

.cat-browser__row .cat-browser__item {
    flex: 1 1 auto;
    min-width: 0;
    /* A nyil ne erjen hozza a lenyito gomb elvalasztojahoz — a ket vezerlot
       lathatoan el kell valasztani egymastol. */
    padding-right: 12px;
    border-bottom: 0;
}

/* A LENYITO VEZERLO.
   Szandekosan NEM nyil: korabban ugyanaz a `>` chevron jelolte a lenyitast es az
   atnavigalast, amitol kitalalhatatlan volt, mit csinal egy kattintas. A + / -
   jel univerzalisan "mutasd tobbet / rejtsd el" jelentesu, a fuggoleges
   elvalasztó vonal pedig lathatova teszi, hogy ez KULON gomb, nem a link resze.
   Erintheto celpont: 44 px (WCAG ajanlott minimum). */
.cat-browser__toggle {
    position: relative;
    flex: 0 0 44px;
    padding: 0;
    border: 0;
    border-left: 1px solid #f0f0f0;
    background: none;
    cursor: pointer;
}

/* A ket szar VALODI elem, nem ::before/::after — a pszeudo-elemek szamitott
   stilusa a bongeszobol nem olvashato ki megbizhatoan, igy az allapotvaltast
   sem lehetne automatan tesztelni. */
.cat-browser__toggle-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #6c757d;
    transform: translate(-50%, -50%);
    /* A magassag SZANDEKOSAN nem animalt: a +/- valtas legyen azonnali es
       egyertelmu, ne egy 150 ms-os koztes allapot. */
    transition: background-color 0.15s ease;
}

/* vizszintes szar — mindig latszik */
.cat-browser__toggle-bar--h {
    width: 11px;
    height: 2px;
}

/* fuggoleges szar — nyitva a kozeppontba huzodik ossze, igy lesz a "+"-bol "-" */
.cat-browser__toggle-bar--v {
    width: 2px;
    height: 11px;
}

.cat-browser__toggle[aria-expanded="true"] .cat-browser__toggle-bar--v {
    height: 0;
}

.cat-browser__toggle:hover,
.cat-browser__toggle:focus-visible {
    background: #f7f7f7;
}

.cat-browser__toggle:hover .cat-browser__toggle-bar,
.cat-browser__toggle:focus-visible .cat-browser__toggle-bar,
.cat-browser__toggle[aria-expanded="true"] .cat-browser__toggle-bar {
    background: #006847;
}

/* A behuzas SZANDEKOSAN szuk (30 px/szint): a fa fel hasabban all, es a negyedik
   szinten mar az alkatresz-tablazat is itt nyilik — a korabbi 48 px-es lepcso
   negy szint utan a tablazatnak 325 px-et hagyott. A bal szegely-vonal igy is
   vegigviszi a szemet a szinteken. */
.cat-browser__subtree {
    padding-left: 14px;
    border-left: 1px solid #f0f0f0;
    margin-left: 16px;
}

/* Melyebb szinten kisebb ikon es szukebb behuzas — a nevoszlop kulonben
   telefonon (337 px-es sor) elfogyna. */
.cat-browser__branch--nested .cat-browser__item-image {
    flex-basis: 40px;
    height: 40px;
}

.cat-browser__branch--nested .cat-browser__item-name {
    font-size: 13px;
}

.cat-browser__loading,
.cat-browser__error {
    padding: 10px 4px;
    color: #6c757d;
    font-size: 13px;
}

/* BETOLTES-JELZO: forgo ikon a felirat elott.
   A fa lusta agai, a gyari kategorialista es a robbantott abra is SZOLGALTATOI
   hivasra varnak, ami masodpercekig tarthat. Puszta "Betoltes…" feliratbol nem
   latszik, hogy tortenik-e egyaltalan valami — a forgas az egyetlen jel, ami
   elarulja, hogy a keres MEG FUT. Tulajdonosi bejelentes (2026-08-15).

   VALODI ELEM, nem ::before: igy a teszt is lekerdezheti, hogy megjelent-e (a
   pszeudo-elem szamitott stilusa a bongeszobol nem olvashato ki megbizhatoan —
   ugyanaz az ok, mint a +/- gomb szarainal). */
.cat-browser__loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-browser__spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 104, 71, 0.25);
    border-top-color: #006847;
    border-radius: 50%;
    animation: cat-browser-spin 0.6s linear infinite;
}

@keyframes cat-browser-spin {
    to { transform: rotate(360deg); }
}

/* Mozgas-erzekenysegnel NEM allitjuk meg: az allo karika azt sugallna, hogy
   megakadt a betoltes. Lassitva viszont megmarad a "fut meg" uzenet. */
@media (prefers-reduced-motion: reduce) {
    .cat-browser__spinner {
        animation-duration: 2.4s;
    }
}

/* A hiba-/figyelmeztetes-doboz a marka SARGAJAT viseli (ugyanaz a jelzes, mint a
   tobb talalatot kinalo `.vin-matches` doboze) — a Bootstrap `alert-*`
   valtozatai kek/piros savokat hoztak volna be. */
.cat-browser__error {
    padding: 10px 12px;
    border: 1px solid #ffe08a;
    border-radius: 2px;
    background: #fff8e1;
    color: #3d464d;
}

.cat-browser__retry {
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #006847;
    text-decoration: underline;
    cursor: pointer;
}

.cat-browser__more {
    padding: 14px 0 10px;
}

.cat-browser__more-btn {
    padding: 0;
    border: 0;
    background: none;
    color: #006847;
    font-size: 13px;
    cursor: pointer;
}

.cat-browser__note,
.cat-browser__empty {
    padding: 12px 0 14px;
    color: #6c757d;
    font-size: 12.5px;
}

/* --- "Korábban nézett" fül --- */

/* KARTYA-RACS.
   A kartya also hatara 260 px, nem 200: a szukebb hasabban a nevoszlopnak
   ~110 px maradt, amin a tipikus alkatresznev ("Erzekelo, Kerekfordulatszam -
   DELPHI (SS20524)") NEGY sorba tort, a mellette allo ar pedig kicsuszott a
   kartya keretebol (merve: 231 px-es kartyaban 231 px-es tartalom). */
.cat-browser__recent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    padding-bottom: 10px;
}

.cat-browser__recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    color: #262626;
}

.cat-browser__recent-item:hover {
    border-color: #006847;
    color: #006847;
    text-decoration: none;
}

.cat-browser__recent-item:hover .cat-browser__recent-image {
    border-color: #006847;
}

/* Ugyanaz a kep-keret, mint a kategoria-sorokban (`.cat-browser__item-image`):
   a panel minden fulen egyforma legyen a belyegkep. */
.cat-browser__recent-image {
    flex: 0 0 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    background: #fff;
}

/* Kep nelkuli tetel: a keret MARAD (az elavult media-URL-t a
   recently-viewed.js szedi ki), kulonben a szomszed kartyak nevoszlopa
   elcsuszna. Halvany kitoltessel, hogy ne "torott kep"-nek lassszon. */
.cat-browser__recent-image:empty {
    background: #fafafa;
}

.cat-browser__recent-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* A nev es az ar EGYMAS ALATT all, nem egymas mellett: a szuk kartyan az
   egy sorba zsufolt harmas (kep + nev + ar) miatt tort tobb sorba a nev.
   A `min-width: 0` KELL: enelkul a flex-elem alapertelmezett `auto` also
   merete a leghosszabb szo szelessege, ami szethuzza — es kitolja az arat. */
.cat-browser__recent-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* KET SORRA VAGVA, es MINDIG ket sor magas: igy a kartyak egyforma magasak
   maradnak, es az ar minden kartyan ugyanabban a vonalban all. A teljes nev a
   sor cim-buborekjaban (`title`) olvashato. */
.cat-browser__recent-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.7em;
    /* A hosszu cikkszamok (HP100-210) kulonben tulnyulnanak a kartyan. */
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.35;
}

.cat-browser__recent-price {
    color: #006847;
    font-size: 13.5px;
    font-weight: 500;
}

/* --- "Előző keresések" fül --- */

.cat-browser__searches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
}

.cat-browser__search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid #f0f0f0;
}

.cat-browser__search-link {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #262626;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-browser__search-link:hover {
    color: #006847;
    text-decoration: none;
}

.cat-browser__search-remove {
    flex: 0 0 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #c4c4c4;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.cat-browser__search-remove:hover,
.cat-browser__search-remove:focus-visible {
    background: #f5f5f5;
    color: #d32f2f;
}

.cat-browser__searches-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 4px;
}

.cat-browser__searches-clear {
    padding: 0;
    border: 0;
    background: none;
    color: #6c757d;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.cat-browser__searches-clear:hover {
    color: #d32f2f;
}

.cat-browser__searches-all {
    color: #006847;
    font-size: 13px;
}

/* --- GYARI ALKATRESZLISTA (alvazszam-talalat) ----------------------------
   A gyari lista a kategoria-bongeszo EGYIK FULE, es UGYANAZT a felulettet
   hasznalja (TOP ikonsav, gyorsszuro, ketoszlopos KEPES racs, +/- nyitogomb) —
   csak a csomopontok jonnek a jarmu gyari fajabol. Ezert itt alig van sajat
   szabaly: csak az, ami abbol kovetkezik, hogy a sorok NEM linkek, hanem
   gombok (a gyari kategorianak nincs sajat landolo oldala, az alkatreszlista
   helyben nyilik). */

/* EGY HASAB, AMIG CIKKSZAM-TABLAZAT VAN NYITVA.
   A tablazat harom oszlopot es egy robbantott abrat is visz: fel hasabban a
   negyedik szinten 345 px maradt neki, a muhelyrajz tetelszamai ezen a mereten
   olvashatatlanok (merve: 319 px kepszelesseg). Ilyenkor tehat a lista atvalt
   egy hasabra, es a nyitott ag a panel teljes szelesseget kapja.

   A tetelek FELEZVE vannak szetosztva (l. .cat-browser__grid--tree), ezert a ket
   hasab-doboz egymas ala csusztatva pontosan az eredeti sorrendet adja — az
   atvaltas nem kever ossze semmit. A vin-parts.js ezen felul a megnyitott sort a
   kepernyon is a helyen tartja (scrollBy a magassag-kulonbseggel). */
.cat-browser__grid--single {
    display: block;
}

/* Az ikonsav elemei itt GOMBOK (nincs landolo oldal), nem linkek. */
button.cat-browser__rail-item {
    cursor: pointer;
}

/* A sor GOMB, nem link: alaphelyzetbe kell hozni a bongeszo gomb-stilusait,
   hogy pontosan ugy nezzen ki, mint a katalogus kategoria-sorai. */
.cat-browser__item--action {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cat-browser__item--action:hover {
    color: #006847;
}

/* A bongeszo alap fokuszgyuruje a teljes szelessegu gombon egy vastag fekete
   keret lenne — sajat, a markaszinnel osszehangolt jelzest adunk helyette.
   A :focus-visible KELL (nem :focus): egerkattintasra ne villanjon fel. */
.cat-browser__item--action:focus {
    outline: none;
}

.cat-browser__item--action:focus-visible {
    outline: 2px solid #006847;
    outline-offset: -2px;
    color: #006847;
}

.cat-browser__item--open {
    color: #006847;
    font-weight: 500;
}

/* A megnyitott kategoria alkatresz-tablazata — a reszfaval azonos behuzassal,
   hogy lathato legyen, melyik sorhoz tartozik. A tablazat `.table-responsive`
   burkot kap (l. renderParts), tehat a legszukebb helyen sem torik ossze. */
.cat-browser__parts {
    padding: 8px 0 12px 14px;
    border-left: 1px solid #f0f0f0;
    margin-left: 16px;
}

.cat-browser__parts .table {
    margin-bottom: 0;
}

/* A GYARI CIKKSZAM.
   A `<code>` orokolt alapszine a Bootstrap magentaja — az oldalon sehol maskor
   nem szereplo szin, raadasul eppen a tablazat legsurubb oszlopat festi be.
   Semleges sotet szoveg halvany szurke alapon: a szam igy is elvalik a
   megnevezestol, de nem verseng a zold talalat-gombbal.
   Az elem+osztaly (`code.vin-parts__oem`) SZANDEKOS: igy a tema barmelyik
   `code`-szabalyat felulirja, a betoltesi sorrendtol fuggetlenul. */
code.vin-parts__oem {
    padding: 1px 5px;
    border-radius: 2px;
    background: #f4f5f6;
    color: #262626;
    font-size: 12.5px;
}

/* A GYARI EGYSEG neve a megnevezes alatt.
   MIERT KELL: a szolgaltatoi megnevezes gyakran tipus-semleges — egy
   gyujto-kategorian belul ot sor is viselheti a "Szuroebetet, tomitessel"
   szoveget, es a tipust CSAK az egyseg mondja meg. Sajat sorban, halvanyan: a
   megnevezes marad a vezeto informacio, az egyseg a megkulonbozteto.
   Nem `nowrap`: telefonon a hosszu egysegnevek ("Klimaberendezes, elektronikus
   szabalyzassal") tordelhetok, kulonben oldalra gorgetnenek. */
.vin-parts__unit {
    display: block;
    margin-top: 1px;
    color: #6c757d;
    font-size: 11.5px;
    line-height: 1.35;
}

/* A "N termek" gomb a MARKA zoldjet viseli. Korabban `btn-outline-primary` volt,
   vagyis a Bootstrap alapertelmezett kekje (#007bff) — ugyanaz a hiba, mint
   korabban a `.vin-matches__pick`-nel. Az oldal palettaja: zold, sarga, szurke. */
.vin-parts__hit {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #006847;
    border-radius: 2px;
    background: #fff;
    color: #006847;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.vin-parts__hit:hover,
.vin-parts__hit:focus {
    background: #006847;
    color: #fff;
    text-decoration: none;
}

.vin-parts__hit:focus-visible {
    outline: 2px solid #ffc338;
    outline-offset: 1px;
}

.vin-parts__missing {
    color: #9aa0a6;
    font-size: 12.5px;
}

/* --- Alvazszamra illeszkedo jarmuvek: VALASZTHATO lista ------------------- */

/* Korabban puszta felsorolas volt: a vasarlo latta, hogy tobb valtozat illik az
   alvazszamara, de nem tudott kozuluk valasztani — a doboz nem vezetett sehova. */
.vin-matches {
    margin-bottom: 1.5rem;
    padding: 16px;
    border: 1px solid #ffe08a;
    border-radius: 4px;
    background: #fff8e1;
}

.vin-matches__lead {
    margin: 0 0 8px;
    font-weight: 600;
}

.vin-matches__note {
    margin: 0 0 8px;
    font-size: 12px;
    color: #6c757d;
}

.vin-matches__list {
    display: grid;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.vin-matches__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid #f0e2b6;
    border-radius: 4px;
    background: #fff;
}

.vin-matches__item--selected {
    border-color: #006847;
    box-shadow: inset 0 0 0 1px #006847;
}

.vin-matches__name {
    font-size: 14px;
}

.vin-matches__state {
    font-size: 12px;
    font-weight: 500;
    color: #006847;
    white-space: nowrap;
}

.vin-matches__state--muted {
    font-weight: 400;
    color: #6c757d;
}

/* A valaszto gomb a MARKA zoldjet viseli. Korabban a Bootstrap
   `btn-outline-primary`-je adta a szinet, ami a BS4 alapertelmezett kekje
   (#007bff) — az oldalon sehol maskor nem szereplo szin, raadasul pont a
   legfontosabb sorban. A `.vin-matches` prefix a `.btn` fole emeli a
   specificitast, hogy a betoltesi sorrendtol se fuggjon. */
.vin-matches .vin-matches__pick {
    border: 1px solid #006847;
    background: #fff;
    color: #006847;
    font-weight: 500;
    white-space: nowrap;
}

.vin-matches .vin-matches__pick:hover,
.vin-matches .vin-matches__pick:focus {
    border-color: #00563b;
    background: #006847;
    color: #fff;
}

/* A BS4 `.btn:focus` kek fokusz-glorat rajzol (rgba(0,123,255,.25)); nelkule a
   gomb billentyuzetrol megis kekre valtana. */
.vin-matches .vin-matches__pick:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 104, 71, 0.25);
}

/* --- "Csak gyari adat" valtozatok: lenyilo mogott -------------------------- */

/* A gyari katalogus egy alvazszamra tucatnyi valtozatot is adhat, es ezek
   tobbsegehez nincs parunk — vagyis nem valaszthatok. Elol csak a valodi dontes
   all, a tobbi ide kerul; ugyanaz a "tovabbiak" idiom, mint a kategoria-bongeszoben. */
.vin-matches__more {
    margin-bottom: 8px;
}

.vin-matches__more-btn {
    padding: 0;
    border: 0;
    background: none;
    color: #006847;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.vin-matches__more-btn:hover,
.vin-matches__more-btn:focus {
    color: #00563b;
    text-decoration: underline;
}

/* KOTELEZO: a lista `display: grid`, ami szerzoi stiluskent FELULIRJA a
   bongeszo `[hidden] { display: none }` szabalyat — enelkul a lenyilo tartalma
   csukott allapotban is latszana. */
.vin-matches__list[hidden] {
    display: none;
}

.vin-matches__hint {
    margin: 0;
    font-size: 12px;
    color: #6c757d;
}

.vin-matches__error {
    margin-top: 8px;
    font-size: 13px;
    color: #b02a37;
}

@media (max-width: 575px) {
    .vin-matches__item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Robbantott abra: a gyari egyseg muhelyrajza a kategoria alatt --------- */

/* Belyegkep-sav: egy kategoriahoz tobb egyseg is tartozhat (egy Passat CC
   olajszuro-kategoriajaban kilenc, a motorvaltozatoknak megfeleloen). */
.vin-units {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.vin-units__label {
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
}

.vin-units__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 104px;
    padding: 6px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}

.vin-units__item:hover,
.vin-units__item--open {
    border-color: #006847;
    color: #006847;
}

.vin-units__item:focus {
    outline: none;
}

.vin-units__item:focus-visible {
    outline: 2px solid #006847;
    outline-offset: 2px;
}

/* A muhelyrajz vonalas es atlatszo hatteru — feher alapon olvashato. */
.vin-units__thumb {
    width: 100%;
    height: 78px;
    object-fit: contain;
    background: #fff;
}

/* Az egysegnevek hosszuak ("Olajpumpa Olajszueroe Olajszint meroe"). */
.vin-units__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
}

.vin-drawing {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
}

.vin-drawing__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.vin-drawing__title {
    font-size: 14px;
}

.vin-drawing__close {
    padding: 2px 4px;
    border: 0;
    background: none;
    font-size: 12px;
    color: #6c757d;
    text-decoration: underline;
    cursor: pointer;
}

.vin-drawing__hint {
    margin: 0 0 8px;
    font-size: 12px;
    color: #6c757d;
}

/* A kep es a tetelszamok kozos koordinata-rendszere: a reteg PONTOSAN a kepet
   fedi, a dobozok pedig szazalekban allnak benne — ezert maradnak a helyukon
   atmeretezeskor is. A rajz allo formatumu es nagy (2126x3004-ig), teljes
   szelessegben olvashatatlanul magas lenne. */
.vin-drawing__figure {
    position: relative;
    max-width: 520px;
    margin: 0 0 12px;
}

.vin-drawing__image {
    display: block;
    width: 100%;
    height: auto;
}

.vin-drawing__areas {
    position: absolute;
    inset: 0;
}

.vin-drawing__hotspot {
    position: absolute;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

.vin-drawing__hotspot:hover,
.vin-drawing__hotspot.is-active {
    border-color: #006847;
    background: rgba(0, 104, 71, 0.18);
}

.vin-drawing__hotspot:focus-visible {
    outline: 2px solid #006847;
    outline-offset: 1px;
}

.vin-drawing__table tr[data-vin-part-row] {
    cursor: pointer;
}

.vin-drawing__table tr.is-active {
    background: rgba(0, 104, 71, 0.08);
}

.vin-drawing__area-cell {
    width: 48px;
    font-size: 12px;
    color: #6c757d;
}

@media (max-width: 991px) {
    .catalog-sidebar {
        position: static;
    }

    .cat-browser__grid,
    .cat-browser__searches {
        grid-template-columns: 1fr;
    }

    /* A fa ilyenkor EGY hasab: a ket hasab-doboz egymas ala kerul, es mivel a
       tetelek felezve vannak szetosztva, ez pontosan az eredeti sorrend. */
    .cat-browser__grid--tree {
        display: block;
    }

    /* Egyoszlopos elrendezesben a behuzas elenne a nevoszlopbol. */
    .cat-browser__subtree {
        padding-left: 12px;
        margin-left: 14px;
    }

    .cat-browser__parts {
        padding-left: 12px;
        margin-left: 14px;
    }

    .veh-panel--horizontal .veh-panel__body {
        display: block;
    }
}

@media (max-width: 575px) {
    .cat-browser__subtree {
        padding-left: 8px;
        margin-left: 10px;
    }

    .cat-browser__branch--nested .cat-browser__item-image {
        flex-basis: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   FEJLÉC-KERESŐ: adaptív böngészés-gomb + javaslat-panel
   --------------------------------------------------------------------------
   A fejléc-kereső markupja a resources/views/components/header-search.blade.php
   közös komponensben él (vendég + bejelentkezett fejléc).

   MIÉRT @media (min-width: 1200px): a `.search__*` alapstílusokat a
   style.header-classic-variant-two.css adja, ami CSAK 1200 px felett tölt be
   (alatta a mobil fejléc külön markupja megy). A saját szabályaink ugyanezen a
   töréspontn belül maradnak, hogy mobilon ne hassanak félig.

   SPECIFICITÁS: a variant-CSS a sziranauto.css UTÁN tölt be, ezért a témával
   ütköző szelektorokat (.search__input, .search__button--end) a .header__search
   ősön át, emelt specificitással írjuk felül.
   ========================================================================== */

/* A VÁLTAKOZÓ PLACEHOLDER áttűnése (l. public/js/search-placeholder.js).
   A szöveget a script cseréli, a `is-placeholder-out` osztály alatt — a kemény
   vágás rángatásnak látszana a fejlécben.

   SZÁNDÉKOSAN A TÖRÉSPONTON KÍVÜL: az alábbi blokk 1200 px FÖLÖTT hat, a mobil
   sáv keresőmezője viszont épp az alatt él — oda is kell az áttűnés. A szabály
   ezért az attribútumra köt (mindkét mező viseli), nem a `.search__input`-ra.

   Ha a böngésző nem animálja a `::placeholder` átlátszóságát, a csere azonnali —
   a felirat attól még helyes. Az időzítés PÁRBAN áll a script FADE_MS-ével. */
input[data-placeholder-rotation]::placeholder {
    opacity: 1;
    transition: opacity 320ms ease;
}

input[data-placeholder-rotation].is-placeholder-out::placeholder {
    opacity: 0;
}

@media (min-width: 1200px) {
    /* --- A kereső-sáv töltse ki a fejléc oszlopát ---------------------------
       A téma `.search__body`-ja 560 px-re van fogva, a fejléc rács harmadik
       (`auto`) oszlopa viszont 1400 px felett ~750 px — a különbség üresen állt
       a nagyító mellett. Feljebb nem nőhet: a tartalom-szélességet maga a téma
       rácsa fogja 1350 px-re, tehát a sáv soha nem lesz aránytalanul hosszú.
       1200-1400 px között az oszlop 560 alatt van, ott ez a szabály nem hat.
       Specificitás: a variant-CSS a sziranauto.css UTÁN tölt be, ezért a
       .header__search ősön át írjuk felül. */
    .header__search .search__body {
        max-width: none;
    }

    /* A jármű-gomb korlátja lentebb, az „egységes sáv" blokkban van — ott áll a
       gomb összes többi tulajdonsága is, hogy egy helyen legyen olvasható. */

    /* --- Javaslat-panel ------------------------------------------------------
       Egyetlen legördülő, több szekcióval. A tartalom egy lapos sorlista
       (l. vehicle-picker.js flatItems), hogy a nyilas navigáció át tudjon
       lépni a szekcióhatárokon; a kétoszlopos kategória-/tipp-rácsot itt a
       grid adja, nem külön konténer. */
    .sug-panel__body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: start;
        padding: 6px 0 8px;
        /* A téma nem korlátozza a legördülő magasságát — öt szekcióval kilógna
           a képernyőről. */
        max-height: min(70vh, 520px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Alapból teljes szélesség; csak a csempés szekciók törnek két oszlopra. */
    .sug-panel__cell {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .sug-panel__cell--category,
    .sug-panel__cell--tip {
        grid-column: auto;
    }

    .sug-panel__head {
        padding: 10px 14px 3px;
        color: #6c757d;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .sug-panel__row {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 6px 14px;
        border: none;
        background: none;
        color: #262626;
        font: inherit;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .sug-panel__row:hover,
    .sug-panel__row--active {
        background: #f1f6f3;
        color: #262626;
        text-decoration: none;
    }

    /* Az állandó kiút a lista tetején — enyhén kiemelve, elválasztóval. */
    .sug-panel__row--browse {
        padding-top: 9px;
        padding-bottom: 9px;
        font-weight: 600;
    }

    .sug-panel__cell--browse {
        border-bottom: 1px solid #f0f0f0;
    }

    .sug-panel__icon {
        flex: 0 0 auto;
        display: flex;
        color: #01573c;
    }

    .sug-panel__icon svg {
        display: block;
        fill: currentColor;
    }

    .sug-panel__text {
        min-width: 0;
        flex: 1 1 auto;
    }

    .sug-panel__title {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        line-height: 1.35;
    }

    .sug-panel__hint {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #6c757d;
        font-size: 12px;
        line-height: 1.35;
    }

    .sug-panel__price {
        flex: 0 0 auto;
        color: #006847;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    .sug-panel__count {
        flex: 0 0 auto;
        color: #6c757d;
        font-size: 12px;
    }

    .sug-panel__thumb {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 1px solid #f0f0f0;
        border-radius: 2px;
        background: #fff;
    }

    .sug-panel__thumb--sm {
        width: 26px;
        height: 26px;
    }

    .sug-panel__thumb img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Korábbi keresés: a sor NEM link — a törlés-gomb miatt a kattintható rész
       külön elem (egy linken belüli gomb érvénytelen markup lenne). */
    .sug-panel__row--recent {
        padding-right: 6px;
    }

    .sug-panel__row-main {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        flex: 1 1 auto;
        color: inherit;
        text-decoration: none;
    }

    .sug-panel__row-main:hover {
        color: inherit;
        text-decoration: none;
    }

    .sug-panel__remove {
        flex: 0 0 auto;
        padding: 4px 6px;
        border: none;
        background: none;
        color: #b2b2b2;
        cursor: pointer;
        line-height: 0;
    }

    .sug-panel__remove:hover {
        color: #d32f2f;
    }

    .sug-panel__remove svg {
        display: block;
        fill: currentColor;
    }

    .sug-panel__row--tip .sug-panel__title {
        color: #01573c;
    }

    /* A teljes keresés felkínálása a gyorslista alatt — a „nincs gyors javaslat"
       üzenet PÁRJA, ezért ül közvetlenül alatta, hangsúlyos felirattal. */
    .sug-panel__row--fullsearch {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .sug-panel__row--fullsearch .sug-panel__title {
        color: #01573c;
        font-weight: 600;
    }

    /* Nem találat esetén a panel MOND valamit — cím + magyarázó sor. A szöveg
       tördelhet: a magyarázat rendszeresen hosszabb egy sornál, a `.sug-panel__hint`
       nowrap+ellipszise itt levágná a mondat felét. */
    .sug-panel__empty {
        padding: 12px 14px;
        color: #6c757d;
        font-size: 13px;
    }

    .sug-panel__empty-title {
        display: block;
        color: #262626;
        font-size: 14px;
        line-height: 1.35;
    }

    .sug-panel__empty-hint {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.4;
    }
}

/* ==========================================================================
   FEJLÉC-KERESŐ — EGYSÉGES SÁV
   --------------------------------------------------------------------------
   MI VOLT A BAJ: a téma CSAK a beviteli mezőt festi fehérre, a `.search__body`
   maga átlátszó. Amíg a sávban egyetlen mező és egy nagyító volt, ez működött —
   de a mellé került öt új vezérlő (pontos-kifejezés kapcsoló, előzmény,
   kép-beolvasás, hatókör, részletes keresés) a SÖTÉTZÖLD fejléc-háttéren maradt,
   a saját szürkéjével (#6c757d / #333). Eredmény: alig olvasható ikonok, egy
   magában lebegő kapcsoló-bögre, és egy 780 px-es sávban 215 px-nyi tényleges
   beviteli mező. A sáv nem egy vezérlőnek látszott, hanem egymás mellé szórt
   elemeknek.

   MEGOLDÁS: maga a `.search__body` lett a fehér, lekerekített sáv 4 px belső
   margóval; minden vezérlő EZEN BELÜL áll. A szürke ikonok fehér alapra
   kerültek (kontraszt rendben), a csoportokat 22 px-es elválasztók tagolják, a
   jobb szélt pedig egy tömör zöld kereső-gomb zárja le.

   SZÍNVÁLASZTÁS: a sárga a KIVÁLASZTOTT JÁRMŰ jelölése az egész oldalon
   (fejléc alatti sáv, jármű-panel), ezért a jármű-gomb marad sárga — és ezért
   NEM lehet sárga a kereső-gomb. Az a márka-zöldet kapja.

   SPECIFICITÁS: a variant-CSS a sziranauto.css UTÁN tölt be, ezért minden
   ütköző szabály a `.header__search .search__body` ősön át megy (0,3,0) — ez
   emeli a téma `[dir=ltr] .search__button--end` (0,2,0) fölé.
   ========================================================================== */

@media (min-width: 1200px) {
    .header__search .search__body {
        align-items: center;
        height: 46px;
        padding: 4px;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    }

    /* A fókusz a sáv EGÉSZÉN látszik: a mező háttere átlátszó, tehát önmagában
       semmi nem jelezné, hogy éppen ott lehet gépelni. */
    .header__search .search__body:focus-within {
        box-shadow: 0 0 0 3px rgba(255, 195, 56, .55);
    }

    /* A téma dekorációs üres elemei ebben a variánsban stílus nélküliek, de
       flex-elemként ott állnak a sorban — kivesszük őket a folyamból. */
    .header__search .search__body > .search__shadow,
    .header__search .search__body > .search__box,
    .header__search .search__body > .search__decor {
        display: none;
    }

    /* --- Jármű-választó: sárga „chip" a sáv bal szélén ---------------------
       A max-width a kettő közül a SZŰKEBB: a puszta százalék a kiszélesedett
       sávon fölösleges helyet vinne el a beírt szöveg elől, a puszta pixel-érték
       viszont a keskeny sávon lenne túl sok. A hosszú jármű-nevet ellipszis
       vágja (l. a .search__button-title szabályt feljebb). */
    .header__search .search .search__body .search__button--start {
        /* SZŰKÍTHETŐ (a téma `flex-shrink: 0`-jával szemben): ha a sáv keskeny,
           a jármű-név adja át a helyet a beviteli mezőnek, nem fordítva. A név
           ilyenkor ellipszissel rövidül, és teljes egészében ott áll a fejléc
           alatti sárga sávban meg a tooltipben — nem vész el információ. */
        flex: 0 1 auto;
        min-width: 0;
        /* A korlát SZÁNDÉKOSAN tiszta pixel, NEM `min(200px, 26%)`: a rács
           belső (min-content) méretezésekor a böngésző a százalékos max-width-et
           határozatlannak veszi, azaz FIGYELMEN KÍVÜL HAGYJA — egy nagyon hosszú
           jármű-név (pl. „DACIA LOGAN (LS_) 1.6 16V (LS09, LS0L, LS0M, …") így
           1051 px-esre hizlalta a kereső rács-oszlopát, és a fejléc jobb vége
           (hatókör, gombok, indikátorok) kicsúszott a képernyőről. Az arányos
           viselkedést a `flex: 0 1 auto` + `min-width: 0` adja: szűk sávon a chip
           magától átadja a helyet. */
        max-width: 200px;
        height: 100%;
        margin-right: 6px;
        padding-left: 12px;
        padding-right: 24px;
        border: none;
        border-radius: 4px;
        background-position: right 9px center;
        font-weight: 500;
    }

    /* --- Beviteli mező: a fehér sáv része, nem külön doboz ----------------- */
    .header__search .search__body .search__input {
        /* Van SAJÁT alapmérete és alsó korlátja: a téma `flex-basis: 0`-jával a
           mező mindig az utolsó helyen osztozott, és keskeny fejlécben pár tíz
           pixelre fogyott. Így viszont a vezérlők adják át neki a helyet. */
        flex: 1 1 160px;
        min-width: 120px;
        height: 100%;
        padding: 0 8px;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    /* A téma hover-szürkéje (#ebebeb) egy külön dobozt rajzolna a sáv közepére. */
    .header__search .search__body .search__input:hover,
    .header__search .search__body .search__input:focus {
        background: transparent;
    }

    /* --- Ikonos vezérlők: mostantól fehér alapon ---------------------------
       A burkoló (`search__history` / `search__camera` / `search__scope`) is
       teljes magasságot kap: enélkül a benne álló gomb `height: 100%`-a egy
       AUTO magasságú szülőre hivatkozna, és a tartalomra zsugorodna. */
    .header__search .search__body .search__history,
    .header__search .search__body .search__camera,
    .header__search .search__body .search__scope {
        height: 100%;
    }

    .header__search .search__body .search__icon-btn {
        width: 38px;
        height: 100%;
    }

    /* --- Csoport-elválasztók ----------------------------------------------
       22 px magas, függőlegesen középre igazítva: a teljes magasságú border-left
       a 38 px-es belső sávban vonalzó-szerű lenne, és a lekerekített sarkokhoz
       sem illene. */
    .header__search .search__body .search__mode,
    .header__search .search__body .search__scope {
        position: relative;
    }

    .header__search .search__body .search__mode,
    .header__search .search__body .search__scope,
    .header__search .search__body .search__button--advanced {
        margin-left: 4px;
    }

    /* A részletes-keresés gomb SZÁNDÉKOSAN nem kap elválasztót: a hatókör után
       már a művelet-gombok jönnek, és a negyedik vonal csak zsúfolttá tenné a
       sávot. (Korábban kapott volna egyet, de a gomb `position: static`, ezért a
       ::before a `.search__body`-hoz igazodott, és a vonal a sáv BAL szélére, a
       logó mellé csúszott ki.) */
    .header__search .search__body .search__mode::before,
    .header__search .search__body .search__scope::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -4px;
        width: 1px;
        height: 22px;
        margin-top: -11px;
        background: #e6e8e6;
    }

    /* A téma/korábbi saját border-left-jei helyett a fenti ::before tagol. */
    .header__search .search__body .search__scope-btn,
    .header__search .search__body .search__button--advanced {
        border-left: none;
    }

    /* --- Pontos-kifejezés kapcsoló ---------------------------------------- */
    .header__search .search__body .search__mode {
        display: flex;
        align-items: center;
        gap: 7px;
        height: 100%;
        padding: 0 8px;
        border-radius: 4px;
        line-height: 1;
    }

    .header__search .search__body .search__mode:hover {
        background: #f1f5f3;
    }

    .header__search .search__body .search__mode-label {
        color: #6c757d;
        font-size: 13px;
        white-space: nowrap;
    }

    .header__search .search__body .search__mode--on .search__mode-label {
        color: #01573c;
        font-weight: 600;
    }

    /* A globális 999 px-es fókusz-lekerekítés a korábbi puszta kapcsolóhoz volt
       szabva; a feliratos, szögletes gombon a sáv többi eleméhez igazodik. */
    .header__search .search__body .search__mode:focus-visible {
        border-radius: 4px;
    }

    /* --- Hatókör-választó -------------------------------------------------- */
    .header__search .search__body .search__scope {
        margin-right: 0;
    }

    .header__search .search__body .search__scope-btn {
        max-width: 150px;
        height: 100%;
        padding: 0 8px;
        border-radius: 4px;
        color: #262626;
    }

    .header__search .search__body .search__scope-btn:hover {
        background: #f1f5f3;
        color: #01573c;
    }

    /* --- Részletes keresés -------------------------------------------------
       Kikerül az abszolút pozicionálásból: a sáv fehér, tehát a gomboknak nem
       kell többé a mező FÖLÉ lógniuk — sorban állnak a többi vezérlővel. */
    .header__search .search__body .search__button--advanced {
        position: static;
        order: 1;
        /* A téma `.search__button`-ja `flex-basis: 0`, ezért a puszta `width`
           hatástalan lenne (a flex-alap nyer, a méretet a min-content adná). */
        flex: 0 0 38px;
        height: 100%;
        border-radius: 4px;
    }

    .header__search .search__body .search__button--advanced:hover {
        background: #f1f5f3;
        color: #01573c;
    }

    /* --- Kereső-gomb: a sáv záró eleme ------------------------------------- */
    .header__search .search__body .search__button--end {
        position: static;
        order: 2;
        /* L. a részletes-keresés gomb megjegyzését: `flex-basis: 0` mellett a
           `width` nem érvényesül. */
        flex: 0 0 52px;
        height: 100%;
        margin-left: 6px;
        border: none;
        border-radius: 4px;
        background: #01573c;
        color: #fff;
        transition: background .15s;
    }

    .header__search .search__body .search__button--end:hover {
        background: #006847;
        color: #fff;
    }

    .header__search .search__body .search__button--end:focus-visible {
        outline: 2px solid #ffc338;
        outline-offset: 2px;
    }

    /* A javaslat-panel kis levegőt kap, hogy a sáv árnyéka és a panel ne érjen
       össze. A jármű-választó legördülő SZÁNDÉKOSAN kimarad: annak felfelé
       mutató nyila (`search__dropdown-arrow`) a panel tetejéhez tapad, egy rés
       a levegőben hagyná a nyíl hegyét. */
    .header__search .search__body > .search__dropdown--suggestions {
        margin-top: 4px;
    }
}

/* A kapcsoló felirata csak a széles sávon fér el: 1500 px alatt a hely a beírt
   szövegé, a kapcsoló jelentését a tooltip és az aria-felirat viszi tovább. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .header__search .search__body .search__mode-label {
        display: none;
    }
}

/* Szűk asztali sáv (1200-1399 px): a fejléc tartalma ott 1110 px-re van fogva,
   tehát a kereső-sáv ~620 px. A jármű-gomb és a beviteli mező már magától
   osztozik (flex-shrink / min-width), a hatókör-felirat viszont fix hosszú —
   annak külön korlát kell, különben ő viszi el a maradékot. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* 180 px az a legkisebb korlat, amiben a „Válasszon autót" alapfelirat még
       ELFÉR (a chip belső kerete — ikon + két oldali belső margó + a nyíl helye —
       önmagában 65 px). 160 px-nél a felirat „Válasszon au…"-ra csonkult. */
    .header__search .search .search__body .search__button--start {
        max-width: 180px;
    }

    .header__search .search__body .search__scope-btn {
        max-width: 110px;
    }

    .header__search .search__body .search__icon-btn {
        width: 34px;
    }

    .header__search .search__body .search__button--end {
        flex-basis: 46px;
    }
}

/* A mobil sávon nincs hely a kapcsoló feliratának (a sáv magassága és
   szélessége is kötött) — ott marad a puszta kapcsoló. */
.mobile-search .search__mode-label {
    display: none;
}

/* ==========================================================================
   ASSZISZTENS GOMB — visszafogott, állandó figyelemfelhívás
   --------------------------------------------------------------------------
   Két réteg, egymást nem zavarva:
     ::after  — fénypászma, 0,72 s mozgás / 7,3 s teljes nyugalom. A gomb
                geometriája NEM változik, tehát semmi nem ugrál a fejlécben
                (ez a leginkább zavaró hatás egy órákig nyitva tartott oldalon).
     ::before — „elérhető" státusz-pont, lassú lélegzés. Ugyanaz az idióma,
                mint a chat-panel fejlécében.

   prefers-reduced-motion: OPT-IN formában (`no-preference`), tehát reduce
   esetén az animation deklaráció létre sem jön. FONTOS: NEM szabad általános
   `transform: none !important` biztonsági hálót írni — a pászma nyugalmi
   állapota ÉPPEN egy transform (translateX(-100%)); kinullázva a fénysáv
   véglegesen ott ragadna a gomb közepén.
   ========================================================================== */

@media (min-width: 1200px) {
    .topbar--classic .topbar__item-button .topbar__button--expert {
        overflow: hidden;
        /* Saját stacking context: a pszeudo-elemek nem kerülhetnek más
           fejléc-elem fölé. */
        isolation: isolate;
        /* Aszimmetrikus: jobb oldalt a státusz-pontnak kell hely. */
        padding: 0 24px 0 14px;
    }

    /* A felirat a pászma FÖLÖTT — enélkül a gradiens ráfestene a szövegre. */
    .topbar--classic .topbar__item-button .topbar__button--expert .topbar__button-label {
        position: relative;
        z-index: 1;
    }

    .topbar--classic .topbar__item-button .topbar__button--expert::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 0;
        pointer-events: none;
        /* Nyugalmi állapot: a gombon kívül, az overflow levágja. */
        transform: translateX(-100%);
        background: linear-gradient(100deg,
            rgba(1, 87, 60, 0) 40%,
            rgba(1, 87, 60, .16) 50%,
            rgba(1, 87, 60, 0) 60%);
    }

    .topbar--classic .topbar__item-button .topbar__button--expert::before {
        content: "";
        position: absolute;
        top: calc(50% - 3px);
        right: 10px;
        width: 6px;
        height: 6px;
        z-index: 1;
        border-radius: 50%;
        background: #16a34a;
        pointer-events: none;
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    .topbar--classic .topbar__item-button .topbar__button--expert::after {
        animation: expert-sheen 8s ease-in-out 4s infinite;
    }

    .topbar--classic .topbar__item-button .topbar__button--expert::before {
        animation: expert-dot-pulse 3.4s ease-in-out infinite;
    }

    /* Hover/fókusz alatt álljon meg: ilyenkor a felhasználó már figyel rá. */
    .topbar--classic .topbar__item-button .topbar__button--expert:hover::after,
    .topbar--classic .topbar__item-button .topbar__button--expert:focus::after {
        animation-play-state: paused;
    }
}

@keyframes expert-sheen {
    0% {
        transform: translateX(-100%);
    }
    9% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes expert-dot-pulse {
    0%,
    100% {
        opacity: .45;
        transform: scale(.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ------------------------------------------------------------------
   Átvételi pont választó (pénztár)

   A térkép-konténernek KELL kézzel adott magasság: a Leaflet és a GLS
   web component is a szülő magasságát veszi át, magasság nélkül 0 px
   magasan, azaz láthatatlanul renderelnének.
   ------------------------------------------------------------------ */
.pickup-point-map {
    height: 520px;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
    background: #f7f7f7;
}

.pickup-point-map iframe,
.pickup-point-map gls-dpm {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* A Leaflet felugró ablakában a „Ezt választom" gomb ne tapadjon a szöveghez. */
.pickup-point-map .leaflet-popup-content {
    margin: 10px 12px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .pickup-point-map {
        height: 380px;
    }
}

/* ------------------------------------------------------------------
   Pénztár — szállítási / fizetési mód választó sorok.

   Miért nem maradt a csupasz Bootstrap `.form-check`: a rádiógomb 13 px-es,
   a felirat pedig csak annyi széles, amennyi a szöveg — nagy felbontású
   kijelzőn a vásárló se a célpontot nem találja könnyen, se azt nem látja
   ránézésre, választott-e már. Élesen ez vásárlás-akadály volt: a vevő
   szállítási mód nélkül próbált továbblépni, és háromszori gombnyomás után
   feladta (2026-08-13). A doboz teljes szélességében kattintható (a `label`
   tölti ki), a választott sor pedig márkazöld kerettel emelkedik ki.
   ------------------------------------------------------------------ */
.checkout-option {
    position: relative;
    display: block;
    padding: 0;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background-color: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.checkout-option .form-check-input {
    position: absolute;
    top: 22px;
    left: 14px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #006847;
}
.checkout-option .form-check-label {
    display: block;
    margin: 0;
    /* Bal oldalt hely a rádiógombnak; a 44 px-es minimum-magasság az érintőcél. */
    padding: 12px 14px 12px 40px;
    min-height: 44px;
    font-weight: 500;
    cursor: pointer;
}
.checkout-option:hover {
    border-color: #006847;
    background-color: #f4faf7;
}
.checkout-option:focus-within {
    border-color: #006847;
    box-shadow: 0 0 0 2px rgba(0, 104, 71, 0.15);
}
/* Választott állapot. A szerver által kiírt osztály a biztos ág; a `:has()`
   azért van mellette, hogy a kijelölés AZONNAL látszódjon, ne csak a Livewire
   válasz megérkezése után. */
.checkout-option--selected,
.checkout-option:has(.form-check-input:checked) {
    border-color: #006847;
    background-color: #e9f3ee;
}
/* A fizetési sorban a felirat alatt megjelenő megjegyzés és a SimplePay-logó
   a felirattal egy vonalba kerüljön (a `label` 40 px-es behúzása miatt). */
.checkout-option > small,
.checkout-option > .checkout__payment-logo {
    display: block;
    padding: 0 14px 10px 40px;
}

/* A választás kötelezőségének jelzése a kártya fejlécében. */
.checkout-required {
    color: #d02c2c;
    font-weight: 700;
}
.checkout-choice-hint {
    margin-top: -6px;
    margin-bottom: 14px;
    color: #6c757d;
    font-size: 0.875rem;
}

/* Hibaösszegző a lépés-gombok fölött + a kifogásolt kártya villanó kerete.
   A mezőnkénti üzenet a lap tetején is ott marad, de a vásárló a gombot nézi. */
.checkout-error-summary {
    border-left: 4px solid #d02c2c;
}
.checkout-error-summary__list {
    margin: 6px 0 0;
    padding-left: 20px;
}
.checkout-invalid-flash {
    animation: checkout-invalid-flash 2s ease-out 1;
}
@keyframes checkout-invalid-flash {
    0%,
    55% {
        box-shadow: 0 0 0 3px rgba(208, 44, 44, 0.35);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(208, 44, 44, 0);
    }
}
/* Mozgásérzékenyeknek nincs villanás — a görgetés és a piros keret elég jelzés. */
@media (prefers-reduced-motion: reduce) {
    .checkout-invalid-flash {
        animation: none;
        box-shadow: 0 0 0 3px rgba(208, 44, 44, 0.35);
    }
}

/* Keresőoldali kategória-belépő sáv (guest/search/partials/category-suggestions).
   Nem szűrő, hanem átvivő: a találati halmaz csonkolt lehet, a kategória-oldal
   viszont a teljes kínálatot mutatja. A kurált gyűjtő-kategória kiemelt. */
.search-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.search-cats__label {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    background: #f7f7f7;
    color: #6c757d;
    font-size: 12px;
    font-weight: 500;
}

.search-cats__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    background: #fff;
    color: #3d464d;
    font-size: 13px;
    line-height: 1;
}

.search-cats__item:hover {
    border-color: #006847;
    color: #006847;
    text-decoration: none;
}

.search-cats__item--primary {
    border-color: #006847;
    color: #006847;
    font-weight: 500;
}

.search-cats__count {
    color: #9fa3a7;
    font-size: 11px;
}

.search-cats__item--primary .search-cats__count {
    color: #4b8f74;
}

/* ==========================================================================
   Készlet-jelzés (components/stock-note.blade.php)
   ==========================================================================
   Tulajdonosi döntés: minden készleten lévő termék mellett ott a „Készleten"
   felirat és a szállítási határidő. A zöld pilulát TELJES egészében a sablon
   `.status-badge--style--success` adja (style.css) — itt csak a pozicionálás
   és a halvány szállítási sor van.

   A `.stock-note--card` a `.product-card__info` UTOLSÓ eleme, mert ez az
   egyetlen régió, ami mind a négy elrendezésben renderelődik. Cserébe négy
   elrendezésre külön igazítás kell, mert a `.product-card__info` belső
   margója elrendezésenként más (a `.product-card__meta` ugyanezt a kezelést
   kapja fentebb, a lista-nézetnél). */

/* Cimke-sáv: a kártya MINDEN állapot-jelvénye egy sorban, a kép alatt —
   „A kosarában (N db)" / „Jó az autójához" és a „Készleten". A kosár- és
   illeszkedés-jelvény korábban a képre volt ráúsztatva (`.product-card__fit`),
   ahol a sablon `display: none`-nal elrejti a `status-badge__text`-et: csak egy
   magában értelmezhetetlen pipa látszott. Szűk kártyán a sor törhet, ezért
   `flex-wrap` — a `gap` így függőlegesen is tart távolságot. */
.stock-note__labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 5px;
    margin-bottom: 3px;
}

/* A kártya jóval szűkebb, mint a terméklap ár-blokkja: a sablon 13px-es
   jelvény-szövegével és 12px-es oldal-margójával a két pilula a rács-nézetben
   (246px kártya = 214px hasznos szélesség) két sorba törne. A tömörebb méret
   a leghosszabb cimkét („A kosarában (1 db)") is a „Készleten" mellett tartja. */
.product-card .stock-note__labels .status-badge__text {
    font-size: 12px;
    padding-left: 9px;
    padding-right: 9px;
}

.product-card .stock-note__labels .status-badge--has-icon .status-badge__text {
    padding-left: 24px;
}

.stock-note__delivery {
    color: #6c757d;
    font-size: 12px;
    line-height: 16px;
}

/* Rács-nézet (és minden olyan kártya, ami nem kap külön igazítást): a
   `.product-card__meta` 16px-es oldal-margójára ül rá. */
.product-card .stock-note--card {
    padding: 6px 16px 2px;
}

/* Vízszintes kártya: az info-doboznak nincs bal oldali belső margója (a
   112px-es kép után közvetlenül kezdődik a szöveg), jobbra 10px van. */
.product-card--layout--horizontal .stock-note--card {
    padding: 4px 10px 0 0;
}

/* Nyitólapi termékoszlopok: kisméretű, kép melletti sorok — a sablon itt a
   meta-sorokat is elrejti, ezért a jelzés szűkebb és kisebb betűs. */
.block-products-columns__list-item .product-card .stock-note--card {
    padding: 4px 0 0;
}

.block-products-columns__list-item .product-card .stock-note__delivery {
    font-size: 11px;
    line-height: 15px;
}

.block-products-columns__list-item .product-card .stock-note__labels .status-badge__text {
    font-size: 11px;
}

@media (min-width: 768px) {
    /* Lista-nézet: az info-doboz bal oldalt 0, jobbra 20px — ugyanaz a
       nullázás kell, mint a meta-soroknál (lásd fentebb). */
    .products-list[data-layout="list"] .product-card .stock-note--card {
        padding: 4px 0 0;
    }
}

@media (min-width: 576px) {
    /* Táblázatos nézet: a `.product-card__info` VÍZSZINTES flex-sáv, tehát a
       jelzés önálló oszloppá válik a név mellett. Fix szélesség + flex-shrink:0,
       különben soronként más helyen állna, és összenyomná a terméknevet. */
    .products-list[data-layout="table"] .product-card .stock-note--card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        width: 140px;
        padding: 0 12px;
    }

    /* Ebbe a 140px-es oszlopba a kosár-/illeszkedés-cimke már nem fér el a
       „Készleten" mellé: soronként eltérő magasságúra nyújtaná a táblázatot.
       A sablon ugyanitt a kép-overlay jelvényt is elrejtette. */
    .products-list[data-layout="table"] .product-card .product-card__label {
        display: none;
    }
}

/* A csak-szállítási-sor változat ott, ahol a „Készleten" felirat már ki van
   írva: terméklap, gyorsnézet, kedvencek és összehasonlítás táblázat. */
/* A `.product__prices-stock` alatt 22px belső margó van; a szállítási sort
   feljebb húzzuk, hogy az ár + „Készleten" párhoz tartozzon, ne a meta-táblához. */
.product__delivery {
    margin-top: -14px;
    margin-bottom: 18px;
}

.quickview__product-delivery {
    margin-top: 4px;
}

/* Táblázat-cellában (kedvencek / összehasonlítás) a felirat alá kerül. */
td .stock-note--plain {
    margin-top: 2px;
}

/* ------------------------------------------------------------------
   „Kérdezze meg az asszisztenst" belépési pont (x-ai-ask)

   A lebegő chat-widget EGYETLEN példány marad a layoutban; ez a gomb csak
   megnyitja, előtöltött kérdéssel és oldal-kontextussal. Ezért néz ki
   szándékosan MÁSKÉNT, mint a rendes akciógombok: nem versenyez a „Kosárba"
   típusú elsődleges gombokkal, de a márka-zöld körvonal elárulja, hogy az
   asszisztenshez tartozik (ugyanaz a #006847, mint a buborékon).
   ------------------------------------------------------------------ */
.ai-ask__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #006847;
    border-radius: 999px;
    background: #fff;
    color: #006847;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ai-ask__btn:hover {
    background: #006847;
    color: #fff;
}

.ai-ask__btn:focus-visible {
    outline: 2px solid #ffc338;
    outline-offset: 2px;
}

.ai-ask__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Panel-változat: kiemelt sáv saját magyarázó sorral — ott használjuk, ahol a
   felhasználó elakadt (nulla találat), és a gomb önmagában elveszne. */
.ai-ask--panel {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #d7e5df;
    border-left: 4px solid #006847;
    border-radius: 4px;
    background: #f4faf7;
}

.ai-ask__note {
    margin: 0 0 10px;
    font-size: 14px;
    color: #4a5b54;
}

/* Sorba illesztett változat: a környező szöveghez igazodik, nem üt el tőle. */
.ai-ask__btn--inline {
    padding: 6px 12px;
    font-size: 13px;
}

/* A belépési pont a panelek ALJÁN áll, elválasztó vonallal: a fölötte lévő
   listát nem szakítja meg, de nem is vész el a lap alján. */
.cat-browser__ask,
.veh-panel__ask {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e6e6e6;
}

.veh-panel__ask {
    text-align: center;
}

/* ------------------------------------------------------------------
   Fejlec-kereso bovitesek: pontos-kifejezes kapcsolo, kep-beolvasas,
   hatokor-valaszto, elozmeny-legordulo es a reszletes kereses modalja.

   A .search__body flex-sav: minden uj vezerlo a mezo MELLE kerul, nem ala.
   Az uj legordulok SAJAT osztalynevet kapnak (search__dropdown--history),
   mert a HeaderSearchPanelTest rogziti, hogy search__dropdown--suggestions-bol
   pontosan egy lehet a fejlecben.
   ------------------------------------------------------------------ */

/* Pontos-kifejezes kapcsolo - a mezo bal szelen, kapcsolo-formaban. */
.search__mode {
    flex-shrink: 0;
    margin-left: 10px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.search__mode-track {
    display: block;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #c9ced4;
    transition: background .15s ease;
    position: relative;
}

.search__mode-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.search__mode--on .search__mode-track { background: #006847; }
.search__mode--on .search__mode-knob { transform: translateX(16px); }
.search__mode:focus-visible { outline: 2px solid #ffc338; outline-offset: 2px; border-radius: 999px; }

/* Ikonos vezerlok (elozmeny, kamera) a mezo jobb oldalan. */
.search__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: #6c757d;
    cursor: pointer;
}

.search__icon-btn:hover { color: #006847; background: #f1f5f3; }
.search__icon-btn:focus-visible { outline: 2px solid #ffc338; outline-offset: 1px; }

.search__history,
.search__camera,
.search__scope {
    position: relative;
    flex-shrink: 0;
}

/* Hatokor-valaszto: a gyujto neve olvashatoan kiirva, nem csak ikon. */
.search__scope-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    height: 34px;
    padding: 0 10px;
    border: none;
    border-left: 1px solid #e5e5e5;
    background: none;
    color: #333;
    font-size: 13px;
    cursor: pointer;
}

.search__scope-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search__scope-caret { flex-shrink: 0; opacity: .6; }
.search__scope-btn:focus-visible { outline: 2px solid #ffc338; outline-offset: -2px; }

/* Kozos legordulo-doboz a kamera- es hatokor-menuhoz. */
.search__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 230px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px 0;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}

.search__menu--scope { min-width: 260px; }

.search__menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    color: #333;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.search__menu-item:hover { background: #f1f5f3; color: #006847; }
.search__menu-item--on { font-weight: 600; color: #006847; }

.search__menu-head {
    padding: 10px 14px 4px;
    color: #8a8a8a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Elozmeny-legordulo. */
.search__dropdown--history {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: 420px;
    max-width: 90vw;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}

/* A téma `.search__dropdown`-ja ALAPHELYZETBEN LÁTHATATLAN (opacity: 0 +
   visibility: hidden + translateY), és csak a `--open` módosítótól jön elő. Az
   előzmény-legördülőt viszont az Alpine `x-show`-ja kapcsolja (display), a
   `--open` osztályt SOHA nem kapja meg — vagyis a gomb megnyomására a panel
   bekerült a DOM-ba, de a képernyőn semmi nem történt. A variant-CSS a
   sziranauto.css UTÁN tölt be, ezért az ős `.search__history`-n át emeljük a
   specificitást (0,2,0). */
.search__history .search__dropdown--history {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.search__history-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

.search__history-title { color: #6c757d; font-size: 13px; }

/* A „Beolvasás" a sablon örökölt PIROS tömbgombja volt — a kereső többi eleme
   viszont zöld/sárga, így ez a panel elütött a sáv többi legördülőjétől.
   Visszafogott, márkaszínű körvonalas gomb: a hangsúly a listán marad. */
.search__history-scan {
    padding: 5px 12px;
    border: 1px solid #01573c;
    border-radius: 4px;
    background: #fff;
    color: #01573c;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.search__history-scan:hover { background: #01573c; color: #fff; }
.search__history-scan:focus-visible { outline: 2px solid #ffc338; outline-offset: 1px; }

.search__history-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;
}

.search__history-link {
    flex: 1 1 auto;
    padding: 9px 14px;
    color: #333;
    font-size: 13px;
    text-decoration: none;
}

.search__history-link:hover { background: #f1f5f3; }
.search__history-ctx { color: #8a8a8a; }

/* A kifejezés korábban PIROS volt: egy tíz soros listában ez tíz piros sor, ami
   riasztásnak látszik, nem előzménynek. A hangsúlyt a félkövér adja. */
.search__history-term { color: #262626; font-weight: 600; }
.search__history-link:hover .search__history-term { color: #01573c; }

.search__history-remove {
    flex-shrink: 0;
    width: 32px;
    padding: 0;
    border: none;
    background: none;
    color: #b0b0b0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.search__history-remove:hover { color: #c1242c; }

/* Reszletes kereses modal. */
.search-advanced {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 16px;
}

.search-advanced__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.search-advanced__dialog {
    position: relative;
    width: 620px;
    max-width: 100%;
    max-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.search-advanced__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    background: #6c7a89;
    color: #fff;
    border-radius: 4px 4px 0 0;
}

.search-advanced__title { margin: 0; font-size: 17px; font-weight: 600; }

.search-advanced__close {
    padding: 0 4px;
    border: none;
    background: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.search-advanced__body { padding: 20px; overflow-y: auto; }
.search-advanced__group { margin-bottom: 18px; position: relative; }
.search-advanced__label { display: block; margin-bottom: 6px; font-size: 13px; color: #555; }

.search-advanced__section {
    margin: 24px 0 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.search-advanced__suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    border-top: none;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.search-advanced__suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.search-advanced__suggest-item:hover { background: #f1f5f3; color: #006847; }
.search-advanced__suggest-count { color: #8a8a8a; font-size: 12px; }

.search-advanced__check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }

.search-advanced__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #eee;
}

/* A talalati oldal cimsoraban a hatokor jelzese. */
.search-scope-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f3;
    color: #006847;
    font-size: 13px;
    font-style: normal;
    vertical-align: middle;
}

/* A tema `.search__button--end` gombja ABSZOLUT pozicionalt (`right: 0`), ezert a
   reszletes-kereses gomb is az kell legyen — kulonben a ketto pontosan egymasra
   csuszik. A folyamban levo utolso elem (hatokor) pedig helyet kell hagyjon
   mindkettonek, mert az abszolut gombok nem foglalnak helyet a flex-savban. */
.search__button--advanced {
    position: absolute;
    right: 38px;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 1px solid #e5e5e5;
    background: none;
    color: #6c757d;
    cursor: pointer;
}

.search__button--advanced:hover { color: #006847; }
.search__button--advanced:focus-visible { outline: 2px solid #ffc338; outline-offset: -2px; }

/* A ket abszolut gomb (kereses + reszletes) egyuttes szelessege. */
.search__scope { margin-right: 78px; }

/* A hatokor-felirat rovid: a jarmu neve NEM ide kerul (sajat gombja van balra),
   igy 140 px boven eleg, es a kereso-mezo kap vissza helyet. */
.search__scope-btn { max-width: 140px; }

/* A modal a fejlec-savbol orokli a szinet, ott pedig a szoveg FEHER — a
   jelolonegyzet felirata igy lathatatlanul feher alapon fehered. A modal
   sajat szovegszinet ezert kifejezetten kiirjuk, nem hagyjuk oroklodni. */
.search-advanced__dialog,
.search-advanced__body,
.search-advanced__body label,
.search-advanced__check,
.search-advanced__check span {
    color: #333;
}

.search-advanced__section--first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ------------------------------------------------------------------
   Mobil kereso-savon (1200 px alatt) ugyanazok a vezerlok, mint az asztalin.
   A tema `.mobile-search__body` savja abszolut pozicionalt gombokat hasznal
   (kereses, bezaras), ezert az uj gombok is oda kerulnek — kulonben egymasra
   csusznanak, ahogy az asztali savon is tortent.
   ------------------------------------------------------------------ */
.mobile-search__body {
    display: flex;
    align-items: center;
}

/* A kapcsolo es az ikonok kisebbek: a mobil sav magassaga kotott. */
.mobile-search .search__mode { margin-left: 6px; }
.mobile-search .search__mode-track { width: 30px; height: 16px; }
.mobile-search .search__mode-knob { width: 12px; height: 12px; }
.mobile-search .search__mode--on .search__mode-knob { transform: translateX(14px); }

.mobile-search .search__icon-btn { width: 30px; height: 30px; }

.mobile-search__input { flex: 1 1 auto; min-width: 0; }

/* A reszletes-kereses gomb a kereso-gomb MELLE, ugyanabban a sorban. */
.mobile-search__button--advanced {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    border: none;
    background: none;
    color: #6c757d;
    cursor: pointer;
}

.mobile-search__button--advanced:hover { color: #006847; }

/* MERT KELL: a tema 768 px FELETT a kereso-gombot kiemeli a folyambol
   (`position: absolute; right: 0`), mert az eredeti savban ez volt az egyetlen
   gomb a mezo vegen. A reszletes-kereses gomb viszont rendes flex-elem, es szinten
   a sav jobb szelere kerul — a ketto igy PONTOSAN egymasra csuszott (mindketto
   709..747 px), a nagyito a szuro-ikonra rajzolodott. 768 px ALATT a tema mar
   ugyis folyamban hagyja mindkettot, tehat itt is azt tesszuk: egy sor, kulon hely.

   A `.mobile-search__body` os KELL a szelektorba: a tema CSS-e a sziranauto.css
   UTAN tolt be, igy az azonos sulyu `[dir=ltr] .mobile-search__button--search`
   (0,2,0) nyerne. A media-blokk is KELL: 768 px alatt a tema mas savszelessegeket
   es mas ikon-szint ad (52 px, #b2b2b2), amibe nem szabad belenyulni. */
@media (min-width: 768px) {
    .mobile-search .mobile-search__body .mobile-search__button--search {
        position: static;
        height: auto;
        /* A tema itt #b2b2b2-t ad, a szomszedai (elozmeny, kamera, reszletes)
           viszont #6c757d-k — egy sorba kerulve a vilagosabb nagyito hibanak latszik. */
        color: #6c757d;
    }

    .mobile-search .mobile-search__body .mobile-search__button--search:hover { color: #006847; }

    /* A mezo jobb oldali 37 px-es belso parnaja a KORABBI, mezore lapolodo gombnak
       tartott helyet. A gomb ma a mezon KIVUL, sajat helyen all, tehat ez a parna mar
       csak holt sav a szurke pirula vegen — a bal oldali 11 px-re fogjuk vissza. */
    .mobile-search .mobile-search__body .mobile-search__input { padding-right: 11px; }
}

/* A legordulok a savhoz kepest jobbra igazodnak, de nem lognak ki a kepernyorol. */
.mobile-search .search__menu,
.mobile-search .search__dropdown--history {
    right: 0;
    max-width: calc(100vw - 24px);
}

.mobile-search .search__dropdown--history { width: 340px; }

/* Hatokor: a mezo ALATT, teljes szelessegben — a savban nincs hely mellette.
   A hatter KELL: a nyitott mobil kereso a lap tartalma FOLE csuszik (a tema
   abszolut pozicionalja), a savnak viszont nem volt sajat hattere — a sotet
   hero-kep atlatszott rajta, es a #333-as felirat olvashatatlanna valt. */
.mobile-search__scope {
    padding: 6px 10px 8px;
    background: #fff;
}

.mobile-search__scope .search__scope { margin-right: 0; }

.mobile-search__scope .search__scope-btn {
    max-width: 100%;
    width: 100%;
    justify-content: space-between;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    font-size: 12px;
}

.mobile-search__scope .search__menu {
    left: 0;
    right: 0;
    min-width: 0;
}

/* A modal mobilon szinte teljes kepernyo. */
@media (max-width: 575px) {
    .search-advanced { padding: 12px; align-items: stretch; }
    .search-advanced__dialog { max-height: 100%; }
    .search-advanced__body { padding: 14px; }
}

/* A hatokor-savnak a teljes szelesseget ki kell tolteni mobilon: a
   `.search__scope` alapbol csak a tartalma szelessegu (inline flex-elem). */
.mobile-search__scope .search__scope { display: block; width: 100%; }

/* MERT KELL: a `.mobile-search` a tema szerint flex-sav, ezert a benne allo
   hatokor-blokk a TARTALMA szelessegure zsugorodott (90 px, a sav jobb szelen),
   nem a mezo ala kerult teljes szelessegben. A sav tordelese + a 100%-os
   flex-alap teszi sajat sorra. */
.mobile-search { flex-wrap: wrap; }
.mobile-search__scope { flex: 0 0 100%; width: 100%; }

/* Telefonon (768 px alatt) a tema a ZART mobil keresot `translateY(-100%)`-kal
   tolja el, DE a magassaga fix 50 px — vagyis pontosan egy sornyit lep fel. A
   sorrol tordelt hatokor-sav igy nem tunt el vele: a masodik sor eppen a fejlec
   savjaba csuszott, es a logo folott lebegett egy „Mindenhol" felirat. A zart
   savban ezert kivesszuk a folyamatbol; nyitva valtozatlanul a mezo alatt all. */
@media (max-width: 767.98px) {
    .mobile-header__search:not(.mobile-header__search--open) .mobile-search__scope {
        display: none;
    }
}

/* MERT KELL: a legordulok `right: 0`-val a sajat gombjukhoz igazodnak. A kamera-
   gomb a sav KOZEPEN all, igy a 230 px szeles menu bal szele -122 px-re csuszott,
   azaz kilogott a kepernyorol. Mobilon ezert mindket oldalt rogzitjuk: a menu a
   sav teljes szelesseget kapja, es biztosan a viewporton belul marad. */
.mobile-search .search__menu,
.mobile-search .search__dropdown--history {
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* MERT KELL: a `left/right` a legkozelebbi pozicionalt osre vonatkozik. A kamera-
   es elozmeny-gomb burkolo eleme `position: relative`, ami mindossze 30 px szeles —
   igy a `left: 8px; right: 8px` par 14 px-re nyomta ossze a menut. Mobilon ezert a
   burkolokat `static`-ra allitjuk, es maga a kereso-sav lesz a pozicionalasi alap. */
.mobile-search { position: relative; }

.mobile-search .search__camera,
.mobile-search .search__history {
    position: static;
}