/* ============================================================================
   CHEFMARKET Design System v2 — token-készlet.
   Forrás: DESIGN_SYSTEM_v2.md — a Figma-terv látvány-referencia, a design system itt lakik.
   Változások a v1-hez képest (globális hex-cserék + új tokenek):
   - #313220 (olive) → #313220   -- kissé sötétebb/zöldebb (CHEFMARKET_BARNA)
   - #F9F1D8 (bézs) → MARAD #F9F1D8  -- 🔄 2026-08-10 REVERT (user-kérés): a Figma krém/off-white
     (#FEFCF7) váltása VISSZAVONVA — a háttér + a gomb-feliratok a korábbi bézst használják
   - #EEB077 (lazac) → #FF383C   -- a lazac MEGSZŰNIK, helyette piros (Accents/Red)
   - #CDE7CA (light-green) → #C8E2C0  -- apró eltérés
   Új tokenek: surface, cream-pale, green-accent, yellow, red, spacing, radius, font-tokens.
============================================================================ */
:root {

    /* Fő ChefMarket színek (a v1 nevei alias-ként megmaradnak a mai kód működéséhez) */
    --cm-green: #313220;         /* alias — a régi kód használja */
    --cm-olive: #313220;         /* v2-nevű alap */
    --cm-light-green: #C8E2C0;
    --cm-beige: #F9F1D8;         /* alias — a régi kód használja */
    --cm-cream: #F9F1D8;         /* v2-nevű alap */
    --cm-salmon: #EEB077;        /* 2026-08-12 REVERT: a lazac VISSZA (v1-arculat, user-kérés) */
    --cm-red: #FF383C;           /* v2-nevű: Accents/Red */

    /* Új v2 tokenek — a design-doksi 1. pontja alapján */
    --cm-surface: #F6EEE3;        /* kártya-felület (világos bézs) */
    --cm-cream-pale: #F9F2D7;     /* halvány krém variáns */
    --cm-cream-pale-2: #F9F3E7;   /* halvány krém variáns 2 */
    --cm-green-accent: #577F3F;   /* VEGÁN chip szöveg/keret */
    --cm-yellow: #FFF4A5;         /* CULINARIS chip */
    --cm-yellow-alt: #FFFB93;     /* CULINARIS chip alt */
    /* --cm-text-dark: #2B2B2B; ⚠️ TISZTÁZANDÓ (design-doksi 8. pont) — ne-használd, amíg a user nem-jóváhagyja */

    /* Térköz-skála (4px alapskála) — csak ezeket használjuk, ne ad-hoc értékeket */
    --cm-space-1: 4px;
    --cm-space-2: 8px;
    --cm-space-3: 12px;
    --cm-space-4: 16px;
    --cm-space-5: 20px;
    --cm-space-6: 24px;
    --cm-space-8: 32px;
    --cm-space-12: 48px;
    --cm-space-16: 64px;
    --cm-space-24: 96px;

    /* Lekerekítések (Figma alapján — szögletes elem kevés van, alapból legyen lekerekítés) */
    --cm-radius-sm: 12px;
    --cm-radius-md: 20px;
    --cm-radius: 22px;
    --cm-radius-lg: 30px;
    --cm-radius-xl: 40px;
    --cm-radius-pill: 90px;

    /* Betűcsaládok */
    --cm-font-serif: 'Paciencia', 'Playfair Display', Georgia, serif;
    --cm-font-caps: 'SackersGothic', 'Inter', system-ui, sans-serif;

    /* Tipográfiai lépcső */
    --cm-fs-label-xs: 7px;
    --cm-fs-label-sm: 9px;
    --cm-fs-label: 11px;
    --cm-fs-label-lg: 13px;
    --cm-fs-body-sm: 12px;
    --cm-fs-body: 14px;
    --cm-fs-body-lg: 16px;
    --cm-fs-price: 16px;
    --cm-fs-price-lg: 20px;
    --cm-fs-h3: 22px;
    --cm-fs-h2: 26px;
    --cm-fs-h1: 32px;
    --cm-fs-hero: 40px;

    /* Letter-spacing */
    --cm-ls-caps: 0.10em;
    --cm-ls-caps-wide: 0.14em;
    --cm-ls-body: 0;

    /* Sormagasság */
    --cm-lh-tight: 1.15;
    --cm-lh-body: 1.5;
    --cm-lh-caps: 1.3;

    /* Konténer-szélesség */
    --cm-container-max: 1440px;

    /* ---- Bootstrap-override (a hex-cserékkel már-frissülve, plus explicit surface) ---- */
    --bs-primary: #313220;
    --bs-primary-rgb: 49, 50, 32;

    --bs-secondary: #C8E2C0;
    --bs-secondary-rgb: 200, 226, 192;

    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;

    --bs-danger: #FF383C;
    --bs-danger-rgb: 255, 56, 60;

    /* 2026-08-12 REVERT: a warning vissza a lazacra (v1) — a warning ≠ hiba; a piros
       CSAK a --bs-danger-en marad (hiba-üzenetek, törlés). */
    --bs-warning: #EEB077;
    --bs-warning-rgb: 238, 176, 119;

    /* Bootstrap-info alap-cyan (#0dcaf0) helyett a light-green — arculatban nincs kek szín. */
    --bs-info: #C8E2C0;
    --bs-info-rgb: 200, 226, 192;

    /* --bs-light explicit a surface színre (nem a body-bg krémre). A design-doksi szerint
       a kártyák/csempék világos bézs felülete. */
    --bs-light: #F6EEE3;
    --bs-light-rgb: 246, 238, 227;

    --bs-dark: #313220;
    --bs-dark-rgb: 49, 50, 32;

    --bs-body-bg: #F9F1D8;
    --bs-body-color: #313220;

    --bs-border-color: #d8d4c8;

    --bs-link-color: #313220;
    --bs-link-hover-color: #1f2014;

    --bs-focus-ring-color: rgba(49, 50, 32, 0.25);
}


.btn-dark {
    --bs-btn-color: #F9F1D8;
    --bs-btn-bg: #313220;
    --bs-btn-border-color: #313220;

    --bs-btn-hover-color: #F9F1D8;
    --bs-btn-hover-bg: #44462c;
    --bs-btn-hover-border-color: #44462c;

    --bs-btn-focus-shadow-rgb: 49, 50, 32;

    --bs-btn-active-color: #F9F1D8;
    --bs-btn-active-bg: #1f2014;
    --bs-btn-active-border-color: #1f2014;

    --bs-btn-disabled-color: #F9F1D8;
    --bs-btn-disabled-bg: #313220;
    --bs-btn-disabled-border-color: #313220;
}


/* 2026-08-12 REVERT (user/marketing): a piros gombok VISSZA a v1-arculat lazacára —
   1:1 a chefmarket_theme.css (élő v2) .btn-danger blokkja. A piros (#FF383C) csak a
   hiba-állapotoknál marad (--bs-danger / text-danger / alert-danger). */
.btn-danger {
    --bs-btn-color: #313220;
    --bs-btn-bg: #EEB077;
    --bs-btn-border-color: #EEB077;

    --bs-btn-hover-color: #313220;
    --bs-btn-hover-bg: #e6a164;
    --bs-btn-hover-border-color: #df9858;

    --bs-btn-focus-shadow-rgb: 238, 176, 119;

    --bs-btn-active-color: #313220;
    --bs-btn-active-bg: #dc9452;
    --bs-btn-active-border-color: #d58b48;

    --bs-btn-disabled-color: #313220;
    --bs-btn-disabled-bg: #EEB077;
    --bs-btn-disabled-border-color: #EEB077;
}


.btn-primary {
    --bs-btn-color: #F9F1D8;
    --bs-btn-bg: #313220;
    --bs-btn-border-color: #313220;

    --bs-btn-hover-color: #F9F1D8;
    --bs-btn-hover-bg: #44462c;
    --bs-btn-hover-border-color: #44462c;

    --bs-btn-focus-shadow-rgb: 49, 50, 32;

    --bs-btn-active-color: #F9F1D8;
    --bs-btn-active-bg: #1f2014;
    --bs-btn-active-border-color: #1f2014;

    --bs-btn-disabled-color: #F9F1D8;
    --bs-btn-disabled-bg: #313220;
    --bs-btn-disabled-border-color: #313220;
}

/* .btn-outline-primary — Bootstrap-alap keményen kek (#0d6efd), ezert explicit
   feluliras a chefmarket-zoldre. Hover-en toltodik (zold hatter + krem szoveg). */
.btn-outline-primary {
    --bs-btn-color: #313220;
    --bs-btn-border-color: #313220;
    --bs-btn-bg: transparent;

    --bs-btn-hover-color: #F9F1D8;
    --bs-btn-hover-bg: #313220;
    --bs-btn-hover-border-color: #313220;

    --bs-btn-focus-shadow-rgb: 49, 50, 32;

    --bs-btn-active-color: #F9F1D8;
    --bs-btn-active-bg: #1f2014;
    --bs-btn-active-border-color: #1f2014;

    --bs-btn-disabled-color: #313220;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #313220;

    --bs-gradient: none;
}


.tag-szokasos {
    background-color: #198754;
    color: #fff;
}

.tag-egyedi {
    background-color: #FF383C;
    color: #313220;
}

.tag-akcio {
    background-color: #dc3545;
    color: #fff;
}

.tag-lejarati {
    background-color: #313220;
    color: #F9F1D8;
}
/* Termek-adatlap: a lejarati-tag <a> linkke valik ('vasarlas rovid szavatossagbol'). Hover-nel
   az alap-Bootstrap link-szin (sotet-zold) felulirja a krem szoveget → olvashatatlan lett.
   Fix: kremszin megtartva + alahuzas + kicsit vilagosabb hatter. */
a.tag-lejarati:hover,
a.tag-lejarati:focus,
a.badge.tag-lejarati:hover,
a.badge.tag-lejarati:focus {
    color: #F9F1D8 !important;
    background-color: #454531 !important;
    text-decoration: underline solid #F9F1D8 2px !important;
    text-underline-offset: 3px;
}

.tag-elorendeles {
    background-color: #ffc107;
    color: #313220;
    font-weight: 600;
}

/* Regisztracio oldal: nagyobb telephely-checkbox + label egyvonalban a szoveggel */
.reg-telephely-checkbox {
    width: 1.4em;
    height: 1.4em;
    cursor: pointer;
    accent-color: #313220;
}
.reg-telephely-item:hover {
    background-color: rgba(254, 252, 247, 0.35);
}


body.bg-body {
    background-color: rgba(254, 252, 247, 0.35) !important;
    color: #313220;
}

.termek-kartya {
    background: #fff;
    border: 1px solid #e7dfc7 !important;
    /* Explicit border-radius (Bootstrap --bs-card-border-radius mellet), overflow-al vagja a kepet */
    border-radius: 12px !important;
    overflow: hidden;
}

.termek-kartya:hover {
    /* Hover-nel a keret is intenzivebb, a shadow-blur ne mossa el */
    border-color: #d4c8a3 !important;
    box-shadow:
        0 10px 25px rgba(49, 50, 32,0.10),
        0 2px 8px rgba(255, 56, 60,0.10) !important;
}

/* Termék-kártya prio-keret a TAG-prió alapján.
   A class neve: termek-prio-{kulcs} (kulcs: cimke|akcio|ujtermek|lejarati|egyedi|szokasos|elozo).
   A cimke-* dinamikus szín-szabálya a fejlécbe generált <style id="cimke-stilusok"> blokkban van. */
.termek-kartya.termek-prio-akcio {
    border: 1px solid #dc3545 !important;
}
.termek-kartya.termek-prio-akcio:hover {
    /* Akcios hover: pirosabb keret + erosebb shadow — a badge sem mossa el a keretet */
    border-color: #b02a37 !important;
    box-shadow:
        0 10px 25px rgba(220,53,69,0.18),
        0 2px 8px rgba(220,53,69,0.12) !important;
}
.termek-kartya.termek-prio-ujtermek {
    border: 1px solid var(--cm-light-green) !important;
}
.termek-kartya.termek-prio-lejarati {
    border: 1px solid var(--cm-green) !important;
}
.termek-kartya.termek-prio-egyedi {
    border: 1px solid var(--cm-salmon) !important;
}
.termek-kartya.termek-prio-szokasos {
    border: 1px solid #198754 !important;
}
.termek-kartya.termek-prio-elozo {
    border: 1px solid #888 !important;
}

/* Kép-doboz fix arány — a név mindig azonos magasságba ugrik.
   Felso 2 sarok kerekitve, illeszkedik a .termek-kartya 12px radius-ahoz. */
.termek-kep-doboz {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: block;
    /*background: #fff;*/
}
.termek-kep-doboz .termek-kep {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Ár-stílusok */
.ar-aktualis {
    color: var(--cm-green) !important;
    font-weight: 700;
}
.ar-akcios {
    color: #dc3545 !important;
    font-weight: 700;
}
.ar-elozo-athuzva {
    color: #888;
    text-decoration: line-through;
    font-size: 0.85em;
}

/* Jobb felső sarok konténere — szív + kosár-darabszám + kontextus-badge függőlegesen.
   A 'top' nagyobb, hogy a szívecske NE takarja a bal-felső LEJÁRATI / cimke-badge-eket.
   A 'right: 10px' + 'top: 10px' behúzas: a kártya-rounded-sarok-területén kívül helyezi el a
   badge-t, hogy ne szakítsa meg a keretet (a badge padding + border-radius együtt kb 15px). */
.termek-kartya-jobb-felso {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    padding: 8px;
    z-index: 2;
}
/* A szívecske vizuálisan a többi badge alatt: order-rel a flex-konténer végére tesszük,
   és kis margóval lejjebb csúsztatjuk a fontos info-badge-ek alá. */
/* Kedvenc-gomb order:99 miatt a container vegere kerul (badge alatt). Extra margin-top: ne-takarja
   a bal-felso cimkeket. Ha nincs badge (rovid-szavatosgu / dedikalt oldalak), a szivecske szinten
   30px-nyire van a kartya-tetejetol. */
.termek-kartya-jobb-felso .kedvenc-gomb { order: 99; margin-top: 30px; }
.kosar-darabszam-badge {
    background: var(--cm-green);
    color: var(--cm-beige);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Akciós % / Új termék — kontextus-érzékeny badge a jobb felső konténerben */
.termek-kontextus-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.termek-kontextus-badge.kontextus-akcio {
    background: #dc3545;
    color: #fff;
}
.termek-kontextus-badge.kontextus-uj {
    background: var(--cm-light-green);
    color: var(--cm-green);
}

/* =========================================================================
   TERMÉK-KÁRTYA: kosár-gomb + 'X db kosárban' badge a gomb alatt.
   Cél: szögletesebb (mint a belépés-gomb), kisebb gomb, alatta azonos szélességű 'db' badge.
   ========================================================================= */
.kosar-input-csoport {
    border-radius: 4px;
    overflow: hidden; /* a belső border-radius-ok ne lógjanak ki */
}
.kosar-input-csoport .form-control,
.kosar-modosit-gomb,
.kosar-gomb {
    border-radius: 3px !important;
}
.kosar-gomb {
    flex: 0 0 56px !important; /* fix szélesség — tartalomhoz igazítva, állandó */
    min-width: 56px !important;
    max-width: 56px !important;
    padding: 6px 0 !important;
    font-size: 13px;
    line-height: 1;
}
.kosar-modosit-gomb {
    flex: 0 0 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
}
.kosar-input-csoport .form-control {
    flex: 1 1 auto !important;
    min-width: 0;
}
.kosar-darabszam-alul-wrapper {
    margin-top: 4px;
    /* a span 'inline' — a wrapper text-end-jel jobbra húzza, a kosár-gomb alá */
}
.kosar-darabszam-badge-alul {
    display: inline-block;
    width: 56px;                  /* pontosan a kosár-gomb szélessége */
    padding: 2px 0;
    background: var(--cm-green);
    color: var(--cm-beige);
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    text-align: center;
}
.kosar-darabszam-badge-alul .fa-shopping-cart {
    margin-right: 3px;
    font-size: 10px;
}

/* Önálló termék-oldal kosár-gomb — ugyanaz a vizuális nyelv (szögletes), de teljes szélességű
   (a 'col-7' oszlopban). Plus a 'X db kosárban' rész alatta. */
.kosar-gomb-termek-oldal {
    border-radius: 4px !important;        /* szögletesebb (Bootstrap default 6px → 4px) */
    padding: 6px 12px !important;
}
.kosar-darabszam-badge-alul-tag {
    display: inline-block;
    width: 100%;
    padding: 6px 8px;
    margin-top: 6px;
    background: var(--cm-green);
    color: var(--cm-beige);
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
}
.kosar-darabszam-badge-alul-tag strong {
    color: var(--cm-beige);
}

/* =========================================================================
   KÉSZLET-FIGYELÉS: 'Jelenleg nem rendelhető' termékek (NemRendelheto=1).
   A kártya szürke / elhalványított, a kép halvány, a kosár-gomb helyén jelölés.
   ========================================================================= */
.termek-kartya.termek-nem-rendelheto {
    filter: grayscale(0.85);
    opacity: 0.72;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.termek-kartya.termek-nem-rendelheto:hover {
    filter: grayscale(0.5);
    opacity: 0.9;
}
.termek-kartya.termek-nem-rendelheto .termek-kep {
    filter: grayscale(1);
}
/* CSS-vedhalo: ha valahogy megis renderelodne kosar-gomb/darabszam-input egy nem-rendelheto
   kartyaban, letiltjuk (kattinthatatlan + halvany). Ez extra biztositek a PHP-agi + JS-ellenorzes
   melle, hogy semmilyen uton se lehessen kosarba tenni. */
.termek-kartya.termek-nem-rendelheto .kosar-gomb,
.termek-kartya.termek-nem-rendelheto .kosar-modosit-gomb,
.termek-kartya.termek-nem-rendelheto .kosar-input-csoport,
.termek-kartya.termek-nem-rendelheto .quantity-selector {
    pointer-events: none !important;
    opacity: 0.4 !important;
}
/* Kis kártyán (lista-nézet) — a kosár-gomb helyén megjelenő jelölés */
.termek-nem-rendelheto-jelzes {
    background: #6c757d;          /* Bootstrap secondary-szerű szürke */
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Termék-oldali nagy jelölés */
.termek-nem-rendelheto-jelzes-oldal {
    background: #6c757d;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 18px;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Bootstrap alert-success (sikeres uzenetek — showMessage tipus='sikeres') brand-atirasa:
   a Bootstrap alap 'zoldes' szoveget (#0f5132) a brand-sotetzoldre allitjuk, jol elkulonuljon
   a vilagoszold hattertol. */
.alert-success {
    color: var(--cm-green) !important;
    font-weight: 600;
}
.alert-success .btn-close {
    filter: none;
}

/* Kosár-oldal: az 'Összesen' oszlop sötétzöld + félkövér (a Bootstrap text-primary kéke nem passzol a brand-hez). */
.kosar-osszesen-szin {
    color: var(--cm-green) !important;
    font-weight: 700 !important;
}

/* Kosár-oldal: termék-név link a sorban — sötét szín, hover-en aláhúzás */
.kosar-termek-link {
    color: var(--cm-green) !important;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.kosar-termek-link:hover,
.kosar-termek-link:focus {
    color: var(--cm-green) !important;
    text-decoration: underline solid var(--cm-green) 2px !important;
    text-underline-offset: 4px;
}

/* Kosár-oldal: 'Egyéb információk' fejléc — mindig nyitva, nem-kattintható. */
.kosar-egyeb-fejlec { user-select: none; }

/* =========================================================================
   LÁBLÉC: CM logo + social ikonok (Facebook, Instagram).
   ========================================================================= */
.lablec-logo {
    max-width: 380px;
    width: 100%;
    height: auto;
}
.lablec-social-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cm-beige);
    color: var(--cm-green) !important;
    font-size: 1.15rem;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.lablec-social-ikon:hover,
.lablec-social-ikon:focus {
    background: var(--cm-green);
    color: var(--cm-beige) !important;
    transform: translateY(-2px);
}

/* Kosár-oldal: "X Ft hiányzik az INGYENES szállításhoz" info-box.
   Világoszöld háttér + sötétzöld szöveg — jó kontraszt, brand-konzisztens. */
.kosar-ingyenes-info {
    background-color: var(--cm-light-green);
    color: var(--cm-green);
    border-left: 4px solid var(--cm-green);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.kosar-ingyenes-info strong {
    color: var(--cm-green);
    font-weight: 700;
}
.kosar-ingyenes-info-alsor {
    color: var(--cm-green);
    opacity: 0.75;
}

/* Fejléc felső-jobb menüpontok (Profilom, Bejelentkezés, stb.) — a text-secondary-small
   szurkes-szinnel majdnem laathatatlan volt a bg-light-subtle-hatteren. Sotet-oliv-zold szin
   + felkover + kicsit nagyobb betu.
   FONTOS: a .btn-osztalyokat (pl. Nezet-dropdown .btn-outline-primary) KIZARJUK — a Bootstrap-
   default hover-uk sotet-zold hatter + feher szoveg; ha felul-irnank a color-t, a szoveg elveszne. */
.felso_jobb .nav-link:not(.btn),
.felso_jobb a:not(.dropdown-item):not(.btn) {
    color: var(--cm-green) !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}
.felso_jobb .nav-link:not(.btn):hover,
.felso_jobb a:not(.dropdown-item):not(.btn):hover {
    color: var(--cm-green) !important;
    text-decoration: underline solid var(--cm-green) 2px;
    text-underline-offset: 4px;
}
/* A user-ikon a Profilom mellett feltunobbre — kicsit nagyobb (fs-6) */
.felso_jobb .fa-user {
    font-size: 1.05rem;
}

/* Kosár-oldal: az 'Elkülönítetten számlázandó/kezelendő' blokk vizuális kiemelése
   (világoszöld háttér + sötétzöld bal-szegély) — vevői visszajelzés alapján
   elveszett az opció a többi szöveg között. */
.kosar-elkulonites-blokk {
    background-color: var(--cm-light-green);
    border-left: 4px solid var(--cm-green);
}
.kosar-elkulonites-blokk .kosar-elkulonites-szoveg {
    color: var(--cm-green);
    line-height: 1.4;
}
.kosar-elkulonites-blokk .kosar-elkulonites-ikon {
    color: var(--cm-green);
    font-size: 1.1rem;
}
.kosar-elkulonites-blokk .form-check-input:checked {
    background-color: var(--cm-green);
    border-color: var(--cm-green);
}
/* Csuszka-tipusu elkulonites-kapcsolok: nagyobb es szinben egyseges a brand-del.
   Egymas alatt, tomor padding-gel, hover-jelzessel a kattinthatosaghoz. */
.kosar-elkulonites-switch {
    padding-left: 3em;
    margin-bottom: 0.35rem;
    min-height: 1.75em;
    display: flex;
    align-items: center;
}
.kosar-elkulonites-switch:last-child {
    margin-bottom: 0;
}
.kosar-elkulonites-switch .form-check-input {
    width: 2.5em !important;
    height: 1.4em !important;
    margin-left: -3em !important;
    margin-top: 0;
    margin-right: 0.6rem;
    cursor: pointer;
    background-color: #ffffff;
    border: 1.5px solid var(--cm-green);
    box-shadow: none;
    flex-shrink: 0;
}
.kosar-elkulonites-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(49, 50, 32, 0.15);
    border-color: var(--cm-green);
}
.kosar-elkulonites-switch .form-check-label {
    color: var(--cm-green);
    cursor: pointer;
    line-height: 1.2;
    font-size: 0.92rem;
}
.kosar-elkulonites-switch:hover .form-check-input:not(:checked) {
    background-color: #f5f5ef;
}

/* Helyettesítő-termék-jelzés a lista-kártyán (a 'nem rendelhető' jelzés ALATT, kis felirat) */
.termek-helyettesito-jelzes {
    background: var(--cm-light-green);
    color: var(--cm-green) !important;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.15s ease;
}
.termek-helyettesito-jelzes:hover {
    background: #b8dcb1;
}
/* A 'helyettesítő-termékek' táblázat — a termék-oldalon a kép alatti teljes-szélességű blokk. */
.helyettesito-tabla {
    font-size: 14px;
}
.helyettesito-tabla thead th {
    background: var(--cm-light-green);
    color: var(--cm-green);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--cm-green);
    padding: 10px 12px;
}
.helyettesito-tabla tbody td {
    padding: 10px 12px;
    vertical-align: middle;
}
.helyettesito-tabla-kep {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
}
/* Nem-rendelhető helyettesítő sor — halványan szürke, de még olvasható */
.helyettesito-sor-nem-rendelheto {
    background-color: rgba(108, 117, 125, 0.06);
    color: #6c757d;
}
.helyettesito-sor-nem-rendelheto .helyettesito-tabla-kep {
    filter: grayscale(0.7);
    opacity: 0.7;
}

/* helyettesítő-tabla mobil-elrendezés () */
@media (max-width: 575.98px) {
    .termek-helyettesito-blokk .table-responsive { overflow-x: visible; }
    .helyettesito-tabla { table-layout: auto; }
    .helyettesito-tabla thead { display: none; } /* mobilon nincs fejléc-sor */
    .helyettesito-tabla, .helyettesito-tabla tbody { display: block; }
    .helyettesito-tabla tbody tr {
        display: grid !important;
        grid-template-columns: 60px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 4px;
        padding: 10px 8px;
        border-bottom: 1px solid #e5e5e5;
    }
    .helyettesito-tabla tbody td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        min-width: 0;
        word-break: break-word;
    }
    /* 1. Kép — span 3 sor (bal-oldalon rögzítve). */
    .helyettesito-tabla tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
    }
    .helyettesito-tabla-kep { width: 60px; height: 60px; }
    /* 2. Név */
    .helyettesito-tabla tbody td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        font-size: 14px;
        font-weight: 600;
    }
    /* 3. Cikkszám */
    .helyettesito-tabla tbody td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        font-size: 12px;
        color: #6c757d;
    }
    /* 4. Ár */
    .helyettesito-tabla tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
        text-align: left !important;
        font-weight: 600;
    }
    /* 5. Gomb (kosárba / részletek) — teljes-szélességű alsó sor. */
    .helyettesito-tabla tbody td:nth-child(5) {
        grid-column: 1 / span 2;
        grid-row: 4;
        text-align: right !important;
        margin-top: 4px;
        padding-top: 6px !important;
        border-top: 1px dashed #e8e8e8 !important;
    }
}

/* =========================================================================
   FŐMENÜ — hover-kiemelés: sötétzöld szöveg-szín + aláhúzás (a bézs navbar-en).
   Háttér-szín nincs, csak színváltás + 2px underline — diszkrét, de jól látható.
   ========================================================================= */
.navbar-nav .nav-link {
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--cm-green) !important;
    text-decoration: underline solid var(--cm-green);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    background-color: transparent !important;
}
/* Alsó "fo-almenu" sáv hover — ugyanaz a stílus */
.fo-almenu a {
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.fo-almenu a:hover,
.fo-almenu a:focus {
    color: var(--cm-green) !important;
    text-decoration: underline solid var(--cm-green);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* =========================================================================
   TERMÉKFA — aktív + útvonali kiemelés.
   Régi: kék (.text-primary / .text-info) — most a Chefmarket-design szerinti
   világoszöld háttér + sötétzöld text + félkövér.
   ========================================================================= */
.termekfa-aktiv {
    background-color: var(--cm-light-green);
    color: var(--cm-green) !important;
    border-radius: 4px;
    padding: 2px 8px;
}
.termekfa-utvonal {
    color: var(--cm-green) !important; /* szülő-úton: csak sötétzöld text, háttér nélkül */
}
.termekfa-aktiv:hover,
.termekfa-utvonal:hover {
    text-decoration: none;
    background-color: var(--cm-light-green);
}
/* Termékfa-elemek hover-állapota (nem-aktív elemek is) */
.termekfa-tartalom .text-dark:hover,
.col-lg-3 ul.list-unstyled a:hover {
    color: var(--cm-green) !important;
    background-color: rgba(200, 226, 192, 0.4); /* nagyon halvány világoszöld */
    border-radius: 4px;
}

/* ============================================================================
   V2 ÁLLAPOT-CSS-EK (a design-system-v2.md 5. pontja alapján — a Figmában nincsenek
   állapotok, itt definiáljuk). Fókusz-állapot KÖTELEZŐ minden interaktív elemen
   (akadálymentességi WCAG-követelmény).
============================================================================ */

/* Fókusz-állapot: minden gomb + link + input látható jelölést kap. A Bootstrap
   `:focus-visible` alapon dolgozik (billentyűzet-fókuszra jelenik, egérrel nem
   zavaró). Ha a Bootstrap `--bs-focus-ring-*` már ad ilyet, ne-írjuk-felül itt;
   a `.cm-focus-ring` explicit osztály custom komponenseinkhez. */
.cm-focus-ring:focus-visible,
.btn:focus-visible,
a.cm-link:focus-visible,
.form-control:focus-visible {
    outline: 2px solid #313220;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(49, 50, 32, 0.15);
}

/* Letiltott gombok — a Bootstrap már-adja, de itt következetesbben: opacity 0.45,
   cursor not-allowed, nincs hover-változás. */
.btn:disabled,
.btn.disabled,
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Betöltés-állapot (gombhoz): a spinner a felirat helyén, a gomb szélessége nem
   változik (különben ugrik a layout). A használatához a HTML-be add: `<span
   class="cm-btn-spinner"></span>` és `.is-loading` a gombra. */
.btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cm-btn-spin 0.7s linear infinite;
    color: #313220;
}
@keyframes cm-btn-spin { to { transform: rotate(360deg); } }

/* Input hiba-állapot (Bootstrap `.is-invalid` mellett a v2-piros keret + hibaszöveg). */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #FF383C !important;
    background-image: none;  /* Bootstrap default piros X-jel eltávolítva — a hibaszöveg beszél */
}
.invalid-feedback {
    color: #FF383C;
    /* 14px minimum (volt 12px) — a form-hibaüzenetet pont-el-kell-tudni-olvasni (a11y). */
    font-size: var(--cm-fs-body, 14px);
    margin-top: var(--cm-space-1, 4px);
}

/* Üres állapotok — kosár, kedvenc, keresés. Kell szöveg + következő-lépés gomb. */
.cm-empty-state {
    text-align: center;
    padding: var(--cm-space-16, 64px) var(--cm-space-4, 16px);
    color: #313220;
}
.cm-empty-state .cm-empty-icon {
    font-size: 48px;
    opacity: 0.4;
    margin-bottom: var(--cm-space-3, 12px);
}
.cm-empty-state .cm-empty-title {
    font-family: var(--cm-font-serif);
    font-size: var(--cm-fs-h2, 26px);
    font-weight: 700;
    margin-bottom: var(--cm-space-2, 8px);
}
.cm-empty-state .cm-empty-text {
    font-family: var(--cm-font-serif);
    font-size: var(--cm-fs-body, 14px);
    color: rgba(49, 50, 32, 0.7);
    margin-bottom: var(--cm-space-4, 16px);
}

/* Termékkártya hover — a design-doksi 5. pontja szerint enyhe árnyék + 1px olív keret.
   A meglévő `.termek-kartya:hover` már-hasonlót ad — itt csak-consistency-check-alap. */
.termek-kartya.cm-hover-v2:hover {
    border-color: #313220 !important;
    box-shadow: 0 4px 12px rgba(49, 50, 32, 0.08);
}

/* Chip / badge — statikus, nincs hover (kivéve szűrő-chip: `.cm-chip.cm-chip-active`). */
.cm-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--cm-radius-pill, 90px);
    font-family: var(--cm-font-caps);
    font-size: var(--cm-fs-label-sm, 9px);
    letter-spacing: var(--cm-ls-caps, 0.10em);
    text-transform: uppercase;
    background: var(--cm-surface, #F6EEE3);
    color: #313220;
}
.cm-chip-vegan {
    color: var(--cm-green-accent, #577F3F);
    border: 1px solid var(--cm-green-accent, #577F3F);
    background: transparent;
}
.cm-chip-culinaris {
    background: var(--cm-yellow, #FFF4A5);
    color: #313220;
}
.cm-chip.cm-chip-active {
    background: #313220;
    color: #fff;
}

/* ============================================================================
   V2 LÁBLÉC — Andi (marketing) i kérése + user-döntése alapján.
   FELÜLÍRJA a Figma-tervet (RANGSOR-szabály, DESIGN_SYSTEM_v2.md).
   - alacsony lábléc (nem óriási CM-wordmark)
   - kicsi CM logó
   - egy-soros partner/tanúsítás-logó sáv, szürkítve, hoverre világosodik
   - mobilon (<768px) a logó-sáv 2×N-ra tördeli magát (flex-wrap)
============================================================================ */

.lablec-also {
    padding: var(--cm-space-4, 16px) 0 var(--cm-space-3, 12px);
    border-top: 1px solid rgba(254, 252, 247, 0.12);
    margin-top: var(--cm-space-6, 24px);
}

/* Szöveges partner-linkek (chefs.hu + szállodatermékek).
   ⚠️ A footer háttere OLIVE (`--cm-sotet`, style_v2.css:132) — a szöveg KRÉM kell legyen. */
.lablec-partner-linkek {
    font-family: var(--cm-font-serif, serif);
    font-size: var(--cm-fs-body-sm, 12px);
    color: rgba(254, 252, 247, 0.75);
}
.lablec-partner-linkek strong {
    color: #F9F1D8;
    font-weight: 600;
    margin-right: 4px;
}
.lablec-partner-link {
    color: #F9F1D8 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
.lablec-partner-link:hover,
.lablec-partner-link:focus {
    color: #F9F1D8 !important;
    text-decoration-thickness: 2px;
}

/* Tanúsítás/partner-logó sáv — szürkítve (0.75 opacity), hoverre világosodik.
   A magasság egységes 32-40px, a szélesség természetes (a különböző arányú logók így nem
   torzulnak, csak a magasság korlátja normalizál).
   A `.lablec-partner-sav-col` modifier a 4. oszlopban használt függőleges elrendezésre. */
.lablec-partner-sav {
    padding: var(--cm-space-3, 12px) 0;
    row-gap: var(--cm-space-3, 12px);
}
.lablec-partner-sav-col {
    padding: 0;
    /* A logók EGYMÁS MELLETT wrap-el (user 2026-08-07: alacsonyabb lábléc) — a flex-row
       + flex-wrap a lablec.php-i osztályokból jön. */
}
.lablec-partner-logo {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
    filter: grayscale(0.15);
}
.lablec-partner-logo:hover,
a:hover .lablec-partner-logo,
a:focus-visible .lablec-partner-logo {
    opacity: 1;
    filter: grayscale(0);
    transform: translateY(-1px);
}

/* Social ikonok — a v1-örökölt `.lablec-social-ikon` szabály maradt aktív (krém-kör + olive-ikon),
   mert a footer háttere OLIVE (`footer { background-color: var(--cm-sotet); }`, style_v2.css:132).
   Duplikát szabály kikerült az olive-szöveg olive-hátteren láthatatlan volt. */

/* CM logó — kicsi, ne domináljon (Andi kérése) */
.lablec-logo {
    max-height: 48px;
    width: auto;
    max-width: 240px;
}

/* Copyright — krém-szöveg az olive-footer-háttéren */
.lablec-copyright {
    color: rgba(254, 252, 247, 0.6);
    font-family: var(--cm-font-serif, serif);
    font-size: var(--cm-fs-body-sm, 12px);
}

/* Mobilon (< 768px) — a partner-linkek egymás alá, a logó-sáv wrap-el. */
@media (max-width: 767.98px) {
    .lablec-partner-linkek span {
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: var(--cm-space-2, 8px);
    }
    .lablec-partner-sav {
        gap: var(--cm-space-3, 12px) !important;
    }
    .lablec-partner-logo {
        height: 32px;
        max-width: 110px;
    }
    .lablec-logo {
        max-height: 36px;
        max-width: 180px;
    }
    /* TODO: a 4 link-oszlop accordion — a jelenlegi Bootstrap-col-3 layout mobilon zsugorodó
       (Andi kérése: „sokkal alacsonyabb lábléc"). Ha a hosszú lista nem-fér-el, egy második
       körben `.portal-footer .accordion`-ra cserélni. Jelenleg nem-blokkoló. */
}


/* ============================================================================
   V3 MOBIL-JAVÍTÁSOK — 1. KÖR / BLOKKOLÓ
   Töréspontok (user-döntés): "mobil" = <992px, "kis mobil" = <576px.
============================================================================ */

/* B1 — a fejléci mega-menü dropdown. Az inline `width:1440px` az egész oldalt túlcsordította a
   mobil hamburger-menüben (a Menu_kiiras('fomenu') ugyanaz az elem-tömb, csak a mobil offcanvas
   más wrapper-t rajzol köré). Kiemelve inline-ból CSS-osztályba, mobilon 100%. */
.mega-menu-dropdown {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
}
@media (max-width: 991.98px) {
    .mega-menu-dropdown {
        width: 100%;
        max-width: 100%;
    }
}

/* B5 — termékoldali mennyiség-doboz. Inline `width:160px`/`140px` → osztály + max-width.
   Mobilon a `col-5` szélessége ~150px, így a fix 160px túlcsordul. `width:100%` + `max-width`
   megoldja: desktopon 160/140px, mobilon a szülő-col-hoz illeszkedik. */
.mennyiseg-doboz-160 {
    width: 100%;
    max-width: 160px;
}
.mennyiseg-doboz-140 {
    width: 100%;
    max-width: 140px;
}

/* ============================================================================
   V3 MOBIL-JAVÍTÁS — TERMÉKFA-OLDALSÁV OFFCANVAS
   User-döntés: offcanvas + accordion (a fa markup már accordion, újra-hasznos.).
   A `cms_oldal.php` termékfa-oszlopa mobilon (<992px) offcanvas-ként jelenik meg
   (a "Kategóriák" gomb nyitja), desktopon (≥992px) normál sticky oldalsáv.
   Cél: megszünteti a sticky-átüzési hibát (átlátszó háttéren a lista fölé úszott).
============================================================================ */
@media (min-width: 992px) {
    /* A top a sticky fejlec-menusor ALA pozicional (kulonben az elso fa-elem a fejlec
       ala csuszik gorgeteskor); a max-height ehhez igazodik, hosszu fanal belso gorgetes. */
    .termekfa-oldalsav {
        position: sticky;
        top: 90px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    /* Offcanvas háttere TÖMÖR (nem-átlátszó) — a mostani vizuális káosz fő oka volt. */
    .termekfa-oldalsav.offcanvas-start {
        background-color: #F9F1D8;  /* bézs, a body-bg (2026-08-10 revert után) */
        --bs-offcanvas-bg: #F9F1D8;
    }
    /* Az offcanvas-body-nál desktopon d-lg-block, mobilon a Bootstrap offcanvas-body-mintája jó. */
}

/* ============================================================================
   V3 MOBIL — Kompakt fejléc-sor + 1-kártya/sor
   User-döntés: az éles webshop strukturális mintája — 1 sor mobilon.
============================================================================ */

/* Mobil-fejléc-sor: kis logó balra, ikon-gombok jobbra, egy sorban (<992px). */
.fejlec-mobil-sor {
    background-color: var(--cm-cream, #F9F1D8);
    min-height: 56px;
    box-shadow: 0 1px 3px rgba(49, 50, 32, 0.05);
}
.fejlec-logo-mobil-link {
    display: inline-block;
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}
/* Kisebb logo, hogy több ikon férjen mellé (a szlogenes SVG-nél is jó marad). */
.fejlec-logo-mobil {
    max-height: 36px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
}
@media (max-width: 380px) {
    .fejlec-logo-mobil { max-width: 110px; max-height: 32px; }
}

/* Ikon-gombok a mobil-fejléc-sorban — 44×44px tapintható méret (a11y). */
.fejlec-mobil-sor .btn-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fejlec-mobil-sor .btn-link:focus-visible {
    outline: 2px solid var(--cm-olive, #313220);
    outline-offset: 2px;
    text-decoration: none;
}

/* A navbar-toggler eredeti helyén már-nincs (a mobil-sorba emeltük), de a Bootstrap
   .navbar-toggler-icon SVG-ének színe olive-hoz igazítva a krém-hátéren. */
.fejlec-mobil-sor .navbar-toggler {
    border-color: rgba(49, 50, 32, 0.15);
    padding: 6px 10px;
}

/* ============================================================================
   V3 MOBIL — KOSÁR/PÉNZTÁR TAPINTHATÓ MÉRETEK (2. KÖR)
   0 db @media szabály volt; a +/− gombok 25-32px-esek voltak. WCAG-a11y-követelmény:
   min. 44×44px tapintható elem. Desktopon minden változatlan.
============================================================================ */
@media (max-width: 991.98px) {

    /* +/− gombok (kártyás + kosár-tétel-táblázatos +/− egyaránt): 44×44px. */
    .kosar-modosit-gomb {
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        flex: 0 0 44px !important;
        font-size: 18px;
        padding: 0 !important;
    }

    /* "Kosárba" gomb a termékkártyán: 44px magas, a padding a tartalomhoz igazítva (nem 56px fix). */
    .kosar-gomb {
        min-height: 44px !important;
        min-width: 56px !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        padding: 10px 16px !important;
        font-size: 14px;
    }

    /* Kosár-input-csoport középső mezője (mennyiség-input) — 44px magas, 16px betűméret,
       hogy iOS ne-zoomoljon fókusz-nál (11px alatti font Safari-mobilra kiakadhat). */
    .kosar-input-csoport .form-control {
        min-height: 44px !important;
        font-size: 16px !important;
    }

    /* Önálló termékoldali "Kosárba teszem" gomb — teljes-szélességű, 44px magas. */
    .kosar-gomb-termek-oldal {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px;
    }

    /* Kosár-darabszám alsó badge: a nagyobb gomb-magassághoz igazodva. */
    .kosar-darabszam-badge-alul {
        width: 56px !important;  /* megmarad a Bootstrap-esztétika a badge-nek */
        padding: 4px 0;
        font-size: 12px;
    }
    .kosar-darabszam-badge-alul-tag {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* a mobil-fejléc-sorban a Bootstrap */
.fejlec-mobil-sor .navbar-toggler {
    color: var(--cm-olive, #313220);
    border-color: var(--cm-olive, #313220);
}
.fejlec-mobil-sor .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23313220' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Menu_kiiras Lathatosag disabled-state: */
.menu-elem-letiltva,
.menu-elem-letiltva:hover,
.menu-elem-letiltva:focus {
    pointer-events: none !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
}

/* Mobil-fejlec profil-dropdown (v3): a fejlec-mobil-sor jobb-szelen van, */
.fejlec-mobil-profil .dropdown-menu {
    min-width: 220px;
    border-radius: 10px;
    padding: 6px 0;
}
.fejlec-mobil-profil .dropdown-item {
    padding: 10px 14px;
    font-size: 15px;
}
.fejlec-mobil-profil .dropdown-item i {
    width: 20px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lathatosag-gate placeholder-panel (v3)
   A style_v3.css .alert szabalyai (display:flex + color:#fff) toaster-notifikacio-
   celu, ezert sajat .lathatosag-panel class-t hasznalunk (nincs collide). Blokk-
   layout, kozponti tordeles, brand-szinek (creamy hatter + olive szoveg).
   ═══════════════════════════════════════════════════════════════════════════ */
.lathatosag-panel {
    display: block;
    text-align: center;
    padding: 48px 30px;
    margin: 32px auto;
    max-width: 640px;
    background: #F9F1D8;
    color: #313220;
    border: 1px solid rgba(49, 50, 32, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(49, 50, 32, 0.08);
}
.lathatosag-panel-ikon {
    display: block;
    margin: 0 auto 20px;
    font-size: 2.5rem;
}
.lathatosag-panel-cim {
    color: #313220;
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0 0 12px;
    line-height: 1.3;
}
.lathatosag-panel-leiras {
    color: #4a4b3d;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}
.lathatosag-panel-gomb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 24px;
    font-size: 1rem;
}
.lathatosag-panel-warning .lathatosag-panel-ikon {
    color: #c19a2f;  /* mustar-sarga: figyelmeztetes */
}
.lathatosag-panel-info .lathatosag-panel-ikon {
    color: #087990;  /* petrol-kek: informacio */
}

/* Mobil: kevesebb padding, kisebb ikon. */
@media (max-width: 575.98px) {
    .lathatosag-panel {
        padding: 32px 20px;
        margin: 20px auto;
    }
    .lathatosag-panel-ikon {
        font-size: 2rem;
        margin-bottom: 16px;
    }
    .lathatosag-panel-cim {
        font-size: 1.2rem;
    }
}

/* Mobil-fejlec kosar-ikon (bejelentkezve): pozicio-relative-en tartja */
.fejlec-mobil-kosar {
    padding: 8px 10px !important;
}
.fejlec-mobil-kosar-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    padding: 3px 6px;
    line-height: 1;
    min-width: 18px;
    transform: translate(20%, -10%);
}

/* Mobil-fejlec inline kereso-panel (collapse a fejlec-mobil-sor alatt) */
.fejlec-mobil-kereso-panel {
    background-color: var(--cm-cream, #F9F1D8);
}
.fejlec-mobil-kereso-panel .form-control {
    height: 44px;
    font-size: 16px;  /* iOS zoom-vedelem */
}
.fejlec-mobil-kereso-panel .btn {
    min-width: 48px;
    min-height: 44px;
}

/* A kereso-panel a sticky-fejlec-alol nyilik — ha a fejlec sticky, akkor a collapse-panel
   maga NEM sticky, hanem a fejlec ala csuszik es a lap-scroll-jal egyutt megy. Ez OK,
   mert a user a nagyitora-katintas-utan azonnal fokuszalva ir. */ 

/* Mobil-kereso autocomplete-talalatok (a fejlec-mobil-kereso-panel-en beluli */
.mobil-kereso-talalatok {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(49, 50, 32, 0.08);
}
.mobil-kereso-talalatok .kereso-item {
    padding: 8px;
    border-bottom: 1px solid #f2f2f2;
}
.mobil-kereso-talalatok .kereso-item:last-child {
    border-bottom: none;
}

/* ============================================================================
   Termek-oldal mobil-finomhangolas (v3)
   Problemak: (1) Kosarba-teszem-gomb 2 sorra tort a col-7-nel — most col-12 mobil,
   col-sm-7 desktop. (2) Ar-blokk Ft/db tortnyi tor. (3) Cim tul-nagy mobilra.
   (4) SackersGothic caps-label-ek nagy zajt-adnak, mobil-tuning.
   ============================================================================ */
@media (max-width: 575.98px) {
    /* Ar-blokk: flex-wrap a d-flex justify-content-between soroknal — ha a jobb-h3
       nem fer bal-melle, torjon uj sorra egeszben, ne felben. */
    .product-price-box .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 4px;
    }
    .product-price-box .d-flex.justify-content-between > * {
        flex-basis: auto;
    }
    /* Kedvezmenyes-ar h3 mobilon: kicsit kisebb, hogy egy-sorba ferjen a "Ft/db". */
    .product-price-box h3 {
        font-size: 1.4rem;
        white-space: nowrap;
    }
    .product-price-box h4 {
        font-size: 1.15rem;
        white-space: nowrap;
    }

    /* Termek-cim: 25px (a style_v3.css alapja) — mobilon kisse kisebb, hogy 2-3 sor
       helyett kompaktabb legyen. */
    h1.product-title {
        font-size: 22px !important;
        line-height: 1.25;
    }

    /* Cikkszam / Legkisebb rendelesi egyseg label-ek: kevesebb betukoz + kisebb font
       (SackersGothic-nal a caps-lock alapertelmezett letter-spacing tul-nagy). */
    .d-flex.justify-content-between.align-items-end.mb-3.small {
        gap: 8px;
        font-size: 11px;
    }

    /* Kosarba-teszem gomb: mobilon a "KOSÁRBA TESZEM" felirat + ikon egy sorba,
       kicsit-kisebb betumeret. A col-12 miatt teljes szelessegu — meg-eloforduthat,
       hogy megis-torik, tehat text-align: center + line-height csokkentes. */
    .kosar-gomb-termek-oldal {
        font-size: 14px !important;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 12px 12px !important;
    }
    .kosar-gomb-termek-oldal i {
        margin-right: 6px !important;
    }

    /* Fokep magassaga mobilon: max 320px, hogy ne-toltsee-a-teljes-viewportot */
    .main-image {
        max-height: 320px;
        object-fit: contain;
        width: 100%;
    }
    .product-gallery {
        text-align: center;
    }
}

/* Osszes brendkategoria (desktop is): ha a kep-url 404-et ad, a onerror */
.main-image[src*="nincs_kep"] {
    opacity: 0.6;
}

/* ============================================================================
   Kosar-oldal MOBIL kártya-elrendezés (v3)
   Probléma: a .kosar-tetel-tabla desktop-fixed-layout-ta (110px+auto+160+140+60)
   mobilon kícsordul, a név-oszlop eltűnik, a táblázat szétesik.
   Megoldás: mobilon (<576px) a <tr>-t 2-oszlopos CSS-Grid-be alakítjuk:
       [ kép 90px ]  [ név + cikkszám ]
       [    ...     ]  [ mennyiség-vezérlő     ]
       [    ...     ]  [ ár                    ]
       [        törlés (span 2, jobbra)         ]
   ============================================================================ */
@media (max-width: 575.98px) {
    /* A colgroup-szélességek mobilon nem-érvényesek — grid-el rendezzük. */
    .kosar-tetel-tabla { table-layout: auto !important; }
    .kosar-tetel-tabla colgroup { display: none; }

    /* A .table-responsive-md mobilon ne-adjon x-scroll-t (grid-elrendezésben nem-kell). */
    .table-responsive-md { overflow-x: visible; }

    /* Kosar-tipus fejléc (thead) — a colspan=5 <th> teljes-szélességű marad, de kicsit
       kompaktabb padding. A kert-szallitas-blokk (dat + időkapu + szerkesztő-gomb) tovabbra is
       flex-wrap-el törik. */
    .kosar-tetel-tabla thead th { padding: 10px 8px !important; }
    .kosar-tetel-tabla thead h5 {
        font-size: 0.95rem;
        letter-spacing: 0.02em;
    }
    /* A <th> alatti fo flex-blokk (cim | Kert-szallitas-blokk): column-iranyba. */
    .kosar-tetel-tabla thead th > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    /* A Kert-szallitas inner-blokk (datum + idokapu + szerkeszto-gomb) — kompaktabb
       elrendezes, wrap-el ha nem-fer egy sorba. */
    .kosar-tetel-tabla thead th > .d-flex.justify-content-between > .d-flex.align-items-center {
        flex-wrap: wrap;
        row-gap: 4px;
        column-gap: 8px;
    }

    /* A tetel-sort grid-be. minmax(0, 1fr) — engedélyezi a jobb-oszlop-i tartalomnak,
       hogy a viewport-szélességen belül maradjon, ne csorduljon ki (a hosszú termek-név
       tördeljen, ne toljon szét mindent). */
    .kosar-tetel-sor {
        display: grid !important;
        grid-template-columns: 90px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 4px;
        padding: 12px 8px !important;
        border-bottom: 1px solid #e5e5e5;
    }
    .kosar-tetel-sor > td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        vertical-align: top;
        width: auto !important;
        min-width: 0;
    }
    /* 1. Kep (a név-blokk mellett jöbbra) — span 3 sor, hogy a kép kövesse a jobbra-lévőt. */
    .kosar-tetel-sor > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
    }
    .kosar-tetel-sor > td:nth-child(1) img {
        max-width: 90px !important;
        max-height: 90px;
        height: auto;
        object-fit: contain;
    }
    /* 2. Név + cikkszám (jobbra fent). word-break + overflow-wrap: a hosszú termek-nevek
       (pl. "Doyal tahini szezám paszta 1kg") a viewport-en belül tördeljenek, ne csorduljanak. */
    .kosar-tetel-sor > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .kosar-tetel-sor > td:nth-child(2) .kosar-termek-link,
    .kosar-tetel-sor > td:nth-child(2) .fw-bold {
        font-size: 0.95rem;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .kosar-tetel-sor > td:nth-child(2) .kosar-termek-link {
        display: block;
    }
    /* 3. Mennyiség-vezérlő (jobbra középen — a text-align: center-t felulírjuk).
       A .kosar-mennyiseg-modosito margin: 0 auto-t is elveszzük, hogy balra-igazodjon. */
    .kosar-tetel-sor > td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        text-align: left !important;
    }
    .kosar-tetel-sor .kosar-mennyiseg-modosito {
        margin: 0 !important;
    }
    /* 4. Ár (jobbra alatt, kiemelve). */
    .kosar-tetel-sor > td:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
        text-align: left !important;
        font-weight: 600;
        font-size: 1.05rem;
    }
    /* 5. Törlés (teljes szélességű alsó-sor, jobbra igazitva). Az inline
       style="width:50px" felül-írandó, hogy a grid-cellát ne szűkítse. */
    .kosar-tetel-sor > td:nth-child(5) {
        grid-column: 1 / span 2 !important;
        grid-row: 4 !important;
        text-align: right !important;
        width: auto !important;
        margin-top: 6px !important;
        padding-top: 6px !important;
        border-top: 1px dashed #e8e8e8 !important;
    }
    .kosar-tetel-sor > td:nth-child(5) .kosar-tetel-torles-gomb {
        margin-right: 4px;
    }

    /* Ajándék-akció progress-blokk (a <td:nth-child(2)>-n belül) — kompaktabb margók. */
    .kosar-tetel-sor > td:nth-child(2) > div[style*="background:#fff8e1"],
    .kosar-tetel-sor > td:nth-child(2) > div[style*="background:#e8f5e9"] {
        margin-top: 6px !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================================================
   Sticky-navbar (PC) + mobil-cimke-sav-megjelenites (v3)
   PC-nezetben (>=992px) a fo-menusor a lap-tetejere ragad scroll-utan; alap-
   allapotban a felette-levo fejlec_felso + logo elgordul. Mobil-nezetben (<992px)
   a fejlec_felso.py-2 mostmar megjelenik (cimke-sav / #hashtag-lista); scroll-
   utan a .fejlec-mobil-sor (mar sticky) marad, a cimke-sav elgordul.
   ============================================================================ */
/*  */
.fejlec-sticky-wrap {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    background-color: var(--cm-cream, #F9F1D8);
    box-shadow: 0 1px 3px rgba(49, 50, 32, 0.05);
}

/* 2026-08-12: termék-előnézet jelző-sáv (THOR-token). SAJÁT osztály, NEM .alert —
   a toaster-CSS a .alert-et fehér szöveggel írja felül, ami a világos háttéren
   olvashatatlan (ld. .lathatosag-panel tanulság). Erős kontraszt: olív szöveg a
   CULINARIS-sárga háttéren (WCAG-mérve 12:1). */
.elonezet-sav {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--cm-yellow, #FFF4A5);
    border: 2px solid #313220;
    border-radius: 8px;
    color: #313220 !important;
    padding: 14px 18px;
    margin-bottom: 1rem;
    font-size: 15px;
    line-height: 1.5;
}
.elonezet-sav i {
    color: #313220;
    flex-shrink: 0;
}
.elonezet-sav strong {
    letter-spacing: 1.5px;
}

/* 2026-08-12: kattintható termékoldali címke-badge (user-kérés) — a kattinthatóság
   látszódjon: hoverre underline + enyhe sötétítés. */
.termek-cimke-link:hover,
.termek-cimke-link:focus {
    text-decoration: underline !important;
    filter: brightness(0.93);
}

/* 2026-08-12: a fejléc-i (nem-sticky) lenyílók (Profilom / Nézet-váltó a legfelső sávban)
   a sticky menüsor-wrap (z-index 1030) FÖLÉ nyíljanak — enélkül a lenyíló a menüsor alá
   kerül, és az elemei nem kattinthatók. A header elgördül, mielőtt a wrap ragadna, ezért
   az átfedés csak nyitott dropdown mellett áll fenn (natív rétegsorrend, nem licit). */
header.fejlec {
    position: relative;
    z-index: 1031;
}

/* Mobil-cimke-sav (a fejlec-mobil-sor FELETTI cimke-lista): kompaktabb padding,
   ha sok cimke van, vizszintes-scroll-al oldjuk meg (nem-wrap). */
@media (max-width: 991.98px) {
    .fejlec-felso-cimke-sav {
        padding: 6px 0 !important;
        font-size: 12px;
    }
    .fejlec-felso-cimke-sav .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .fejlec-felso-cimke-sav .felso_bal {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Scrollbar elrejtese webkiten (nem-zavaro). */
    .fejlec-felso-cimke-sav .felso_bal::-webkit-scrollbar { display: none; }
    .fejlec-felso-cimke-sav .felso_bal { scrollbar-width: none; }
    /* Az egyes cimke-linkek ne-torjenek (whitespace-nowrap az egyeni linkeken). */
    .fejlec-felso-cimke-sav .felso_bal > * { flex-shrink: 0; white-space: nowrap; }
}

/* ============================================================================
   apró tapintható elemek 44x44px-re (v3)
   Kedvenc-gomb (téglaperem inline width:32px felulírjuk), kupon-törlés (btn-sm p-0),
   kosár-tétel-törlő. Csak mobilon (<992px); desktop-on kicsi marad. */
@media (max-width: 991.98px) {
    /* Kedvenc-szív (kate/termék-kártya + termék-oldal) — inline style="width:32px;height:32px"
       feulírandó 44px-re. A termék-oldali variacio 42x42px, azt is 44x44-re huzzuk. */
    .kedvenc-gomb {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }
    /* Kupon-törlés (kosár-oldali kupon-levetel gomb — mostantól saját class). */
    .kupon-torles-gomb {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px !important;
    }
    /* Kosár-tetel-torles-gomb (Bootstrap .btn-sm alapon 30px) — 44px-re nagyitva. */
    .kosar-tetel-torles-gomb {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
    }
}

/* Biztonsagi rejtes (a Bootstrap display-utility-k potlasa): a mobil-fejlec-elemek
   desktopon SOHA ne latszodjanak, meg ha a betoltott Bootstrap-buildbol hianyoznak is
   a d-lg-none / d-none szabalyok (elo-szerveri csonka-build eset). */
@media (min-width: 992px) {
    .fejlec-mobil-sor,
    .fejlec-mobil-kereso-panel {
        display: none !important;
    }
}
/* A desktop-only elemek mobilon rejtve (a d-none d-lg-block/flex parja). */
@media (max-width: 991.98px) {
    .fejlec_felso.d-none,
    header.fejlec .d-none {
        display: none !important;
    }
}

/* Lablec mobil-accordion: <992px-en az oszlop-fejlec collapse-toggle (chevron + also-vonal),
   >=992px-en a fejlec sima cim (kattintas hatastalan, chevron rejtve, tartalom mindig nyitva
   a .d-lg-block-kal). */
@media (min-width: 992px) {
    .lablec-oszlop-cim { pointer-events: none; }
    .lablec-oszlop-chevron { display: none; }
}
@media (max-width: 991.98px) {
    .lablec-oszlop-cim {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(254, 252, 247, 0.2);
        min-height: 44px; /* tapinthato meret */
    }
    .lablec-oszlop-chevron {
        font-size: 0.8em;
        transition: transform 0.2s ease-in-out;
    }
    .lablec-oszlop-cim[aria-expanded="true"] .lablec-oszlop-chevron {
        transform: rotate(180deg);
    }
    .lablec-oszlop-tartalom {
        padding: 10px 0;
    }
}

/* panel-kártyák — halvány bézs felület; a termék-/tétel-/fehér-jelölt (.card-feher)
   kártyák fehérek maradnak */
.card:not(.termek-kartya):not(.kosar-tetel-kartya):not(.card-feher) {
    background-color: #FDF8EB;
}