/* ------------------------------
   Betűtípusok — v2 (a v1 hibás Black-normal mappingje javítva).
   Változások a v1-hez képest:
   - normal (400) → Paciencia-Regular.otf (volt: Black.otf → törzsszöveg 900-as vágású volt!)
   - Bold (700), Medium (500), Black (900) — mind expliciten helyes súllyal
   - format('opentype') a .otf-hoz (a v1 hibásan truetype-nak deklarálta)
   - font-display: swap — a FOIT (láthatatlan-szöveg) elkerülésére
   - +Italic variánsok is (a v1-ben csak a RegularItalic volt)
   - 2026-08-10: woff2 elsődleges forrás (fonttools-konverzió, ~50-72% kisebb), .otf/.ttf fallback
------------------------------ */
@font-face {
    font-family: 'Paciencia';
    src: url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-Regular.woff2') format('woff2'),
         url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Paciencia';
    src: url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-Medium.woff2') format('woff2'),
         url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Paciencia';
    src: url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-Bold.woff2') format('woff2'),
         url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Paciencia';
    src: url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-Black.woff2') format('woff2'),
         url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Paciencia';
    src: url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-RegularItalic.woff2') format('woff2'),
         url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Paciencia';
    src: url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-MediumItalic.woff2') format('woff2'),
         url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Paciencia';
    src: url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-BoldItalic.woff2') format('woff2'),
         url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Paciencia';
    src: url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-BlackItalic.woff2') format('woff2'),
         url('/publikus/_fonts/Paciencia_chefmarket/Paciencia-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* SackersGothic — ritkított nagybetűs feliratok. Format-marad truetype (a fájlok .ttf-ek).
   font-display: swap hozzáadva. */
@font-face {
    font-family: 'SackersGothic';
    src: url('/publikus/_fonts/Sackers_Gothic_chefmarket/Sackers Gothic HU/SackersGothicStd-Light.woff2') format('woff2'),
         url('/publikus/_fonts/Sackers_Gothic_chefmarket/Sackers Gothic HU/SackersGothicStd-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SackersGothic';
    src: url('/publikus/_fonts/Sackers_Gothic_chefmarket/Sackers Gothic HU/SackersGothicStd-Medium.woff2') format('woff2'),
         url('/publikus/_fonts/Sackers_Gothic_chefmarket/Sackers Gothic HU/SackersGothicStd-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SackersGothic';
    src: url('/publikus/_fonts/Sackers_Gothic_chefmarket/Sackers Gothic HU/SackersGothicStd-Heavy.woff2') format('woff2'),
         url('/publikus/_fonts/Sackers_Gothic_chefmarket/Sackers Gothic HU/SackersGothicStd-Heavy.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('../_plugins/slick/slick.eot');
    src: url('../_plugins/slick/slick.eot?#iefix') format('embedded-opentype'),
         url('../_plugins/slick/slick.woff') format('woff'),
         url('../_plugins/slick/slick.ttf') format('truetype'),
         url('../_plugins/slick/slick.svg#slick') format('svg');
}

/* ------------------------------
   Alapok
------------------------------ */
:root {
    /* Arculati alap-palett a chefmarket_theme.css-bol (elsokent tolthetodik be).
       Az itteni legacy nevek (--cm-sotet, --cm-krem) alias-ok — ha egyszer at kell szinezni,
       a chefmarket_theme.css :root-jaban egy helyen kell modositani. */
    --cm-sotet: var(--cm-green);          /* #313220 - a chefmarket_theme.css definialja */
    --cm-krem:  var(--cm-beige);          /* #F9F1D8 (2026-08-10 revert) - a chefmarket_theme_v3.css definialja */

    /* Csak style.css-egyedi variansok — a chefmarket_theme.css-ben nem-szerepelnek. */
    --cm-sotet-hover: #252618;            /* a --cm-green sotetebb hover-varianta */
    --cm-krem-bg:     rgba(249, 241, 216, 0.3); /* a bezs (#F9F1D8) 30%-on — v1-ertek */
    --cm-kek:         #0d6efd;            /* Bootstrap-primary kek — arculatban NINCS, esetenkent regi kod meg hivatkozza */
    --cm-szegely:     #dee2e6;
    --cm-kartya-szegely: #f2f2f0;
    --cm-arnyek:         0 10px 20px rgba(0,0,0,0.08);
    --cm-arnyek-erosebb: 0 15px 30px rgba(44, 50, 34, 0.16);
}

body.bg-body { background-color: var(--cm-krem-bg) !important; color: var(--cm-sotet); }

/* lazac szoveg-utility (nem-hiba cim-kiirasokhoz) */
.text-cm-salmon { color: var(--cm-salmon, #EEB077) !important; }

body, input, button, select, textarea {
    font-family: 'SackersGothic' !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cm-sotet); text-decoration: none; }
footer { background-color: var(--cm-sotet); }
footer a { color: #fff; }

/* Arculati utmutato: a Paciencia az elsodleges cim-font (elegans serif).
   A body/torzs SackersGothic marad (user-kérés), de a fo-címek (h1, h2, .fo-cim)
   Paciencia-t hasznalnak. A kartya-fejlecek (h3-h6) maradnak SackersGothic-ban. */
h1, h2, .fo-cim {
    font-family: 'Paciencia', 'Playfair Display', Georgia, serif;
    font-weight: 900;
    letter-spacing: -0.5px;
}
p, .szoveg-tartalom { font-weight: normal; line-height: 1.6; }

.fs-13 { font-size: 13px; }
.cursor-pointer { cursor: pointer; }
.product-img, .webshop-slider img { width: 100%; }

.elsodleges-gomb,
.btn-primary { font-family: 'SackersGothic', sans-serif; text-transform: uppercase; }

.alcim-felirat { font-family: 'SackersGothic', sans-serif; font-weight: 300; color: #555; }
.fontos-figyelmeztetes { font-family: 'SackersGothic', sans-serif; font-weight: bold; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cm-sotet);
    --bs-btn-border-color: var(--cm-sotet);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cm-sotet-hover);
    --bs-btn-hover-border-color: #212215;
    --bs-btn-focus-shadow-rgb: 49, 50, 32;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #212215;
    --bs-btn-active-border-color: #1c1d12;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cm-sotet);
    --bs-btn-disabled-border-color: var(--cm-sotet);
}

button:disabled { cursor: not-allowed; opacity: 0.8; }
.border-start, .border-end { border-color: var(--cm-szegely) !important; }

@media (min-width: 1600px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1440px; }
}

/* ------------------------------
   Sávos (súlyos) kedvezmény — termék-oldali sáv-tábla aktív sora (2026-08-24, cél-kép)
------------------------------ */
/* A mennyiség-léptetéskor elért sáv sora kiemelve (piros, félkövér) — a JS toggle-eli. */
.savos-sor-aktiv { color: #dc3545; font-weight: 700; }

/* ------------------------------
   Uzenetek
------------------------------ */
#message-container { position: fixed; top: 25px; right: 25px; z-index: 10001; width: 380px; max-width: calc(100vw - 30px); }
/* Mobilon: teljes-szélesség 15px oldal-margóval (jobb-oldali fixed touchscreen-en jól-látszik). */
@media (max-width: 575.98px) {
    #message-container { top: 12px; right: 15px; left: 15px; width: auto; }
}
/* Toaster-stilus CSAK a toast-kontenerre — a globalis .alert-et NEM irjuk felul,
   az oldal-tartalmi jelzosavok a Bootstrap sajat (olvashato) szineit kapjak.
   2026-08-17 (user-kep, olvashatatlan siker-toast): a color:#fff kivéve — a tipusok a
   Bootstrap sajat olvashato szinparjait kapjak (siker=zold, info=kek; a hiba-toast sajat
   inline stilust hordoz a JS-bol); + explicit tipografia, hogy a v3 display-font
   (kiskapitalis/ritkitott) ne orokle be a toastba. */
#message-container .alert { display: flex; align-items: center; padding: 15px 20px; margin-bottom: 12px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); font-family: 'Montserrat', Arial, sans-serif; font-size: 14px; font-weight: 500; text-transform: none; font-variant: normal; letter-spacing: normal; line-height: 1.4; }
#message-container .alert-icon { min-width: 20px; margin-right: 15px; font-size: 1.2rem; text-align: center; }
#message-container .alert-text { flex-grow: 1; font-size: 14px; line-height: 1.4; }

/* ------------------------------
   Slick slider
------------------------------ */
.slick-slider { position: relative; display: block; box-sizing: border-box; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; }
.slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; margin-right: auto; margin-left: auto; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-slide { display: none; float: left; min-height: 1px; height: 100%; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-loading .slick-track, .slick-loading .slick-slide { visibility: hidden; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }
.slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; }
.slick-prev, .slick-next { position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; font-size: 0; line-height: 0; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; }
.slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; }
.slick-prev { left: -25px; }
.slick-prev:before { content: '←'; }
.slick-next { right: -25px; }
.slick-next:before { content: '→'; }
[dir='rtl'] .slick-prev { right: -25px; left: auto; }
[dir='rtl'] .slick-prev:before { content: '→'; }
[dir='rtl'] .slick-next { right: auto; left: -25px; }
[dir='rtl'] .slick-next:before { content: '←'; }
.slick-dotted.slick-slider { margin-bottom: 30px; }
.slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { display: block; width: 20px; height: 20px; padding: 5px; border: 0; outline: none; background: transparent; color: transparent; cursor: pointer; font-size: 0; line-height: 0; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; color: black; opacity: .25; text-align: center; font-family: 'slick'; font-size: 20px; line-height: 20px; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before, .slick-dots li.slick-active button:before { opacity: .75; }
.slick-dots li.slick-active button:before { color: #FF3C3C; }

/* Slider magasság — a JS rögzíti a tényleges kép-magasság alapján (max 460px plafon).
   CSS-szinten csak alap-stabilitás (min-height) — a kép-betöltés UTÁN a JS pontosabb értéket állít. */
.webshop-slider .slick-slide > div,
.webshop-slider .slick-slide > div > a {
    display: block;
    width: 100%;
    min-height: 380px;
}
.webshop-slider .slider-elem-sor {
    min-height: 380px;
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
}
.webshop-slider .slider-kep-oszlop img,
.webshop-slider .slider-kep-oszlop img.img-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* A sor mindig nowrap legyen — a kép NE csússzon a szöveg-box alá szűkebb felbontáson sem.
   A kép-oszlop FIX 944px szélességű (a feltöltött 944×460 képek pontos illesztéséhez —
   sem vágás, sem 'keret'). A szöveg-oszlop a maradék helyet kapja. */
/* A sor mindig nowrap legyen — a kép NE csússzon a szöveg-box alá szűkebb felbontáson sem. */
.webshop-slider .slider-elem-sor {
    flex-wrap: nowrap !important;
}
.webshop-slider .slider-szoveg-oszlop {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}
.webshop-slider .slider-kep-oszlop {
    flex: 0 0 66.666% !important;
    max-width: 66.666% !important;
}
.webshop-slider .slider-kep-oszlop img {
    display: block; /* inline-img baseline-gap kiküszöbölése */
}

.slider-szoveg-oszlop {
    min-height: unset !important;
    overflow-y: auto !important;       /* ha a tartalom magasabb mint a kép, függőleges scroll */
    overflow-x: hidden !important;
    padding: 1em 1.5em !important;
}
/* Diszkrét scrollbar a slider-szöveg-oszlopon */
.slider-szoveg-oszlop::-webkit-scrollbar { width: 6px; }
.slider-szoveg-oszlop::-webkit-scrollbar-track { background: transparent; }
.slider-szoveg-oszlop::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
.slider-szoveg-oszlop::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); }

.slider-kep-oszlop img {
    width: 100%;
    height: 100%;                    /* a 460px-es oszlopot kitölti */
    object-fit: contain;             /* TELJES kép — semmi vágás */
    object-position: center;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* A logókat ne érintse a .webshop-slider img { width: 100%; } szabály.
   A logók em-bázisú (parent-font arányos) — a JS-font-csökkentéssel a logók is zsugorodnak. */
.webshop-slider .slider-logo-normal,
.webshop-slider .slider-logo-pici {
    width: auto !important;
    height: auto !important;
}
.webshop-slider .slider-logo-normal {
    top: 1em !important;
    left: 1.5em !important;      /* a szöveg-padding-hoz igazítva (padding-left: 1.5em) */
    max-width: 12.5em !important;
}
.webshop-slider .slider-logo-pici {
    bottom: 1em !important;
    right: 1.5em !important;     /* a szöveg-padding-hoz igazítva (padding-right: 1.5em) */
    max-width: 3.25em !important;
    max-height: 3.25em !important;
}

/* A teljes slider sáv alaphelyzete */
.webshop-slider { margin-bottom: 2.5rem; }
.webshop-slider .slider-elem-sor {margin: 0;padding: 0;overflow: hidden;}
.slider-szoveg-oszlop {display: flex;flex-direction: column;justify-content: center;padding: 1em 1.5em !important;}
/* A képes oszlop igazítása */
.slider-kep-oszlop {padding: 0 !important;line-height: 0;}
/* A height-rögzítést NE alkalmazza — a kép természetes-magassága (height:auto) vezérel. */
.slider-kep-oszlop img {width: 100%;}
/* Tipográfia a Chefmarket stílushoz.
   A font-size-k EM-alapúak (a szülő .slider-szoveg-oszlop font-size-jéhez relatívak),
   hogy a JS-szel skálázható legyen a teljes szöveg-blokk, ha nem fér a kép-magasságba. */
.slider-szoveg-oszlop { font-size: 16px; }
.slider-alcim {text-transform: uppercase;letter-spacing: 1.5px;margin-bottom: 0.5em;opacity: 0.8;font-size: 0.9em;}
.slider-focim {font-family: serif;font-weight: 400;font-size: 2.4em;line-height: 1.1;margin-bottom: 0.6em;letter-spacing: 0.3px;text-transform: uppercase;}
.slider-szoveg {font-family: Paciencia;font-size: 1.05em;font-style: italic;line-height: 1.4;opacity: 0.9;margin-bottom: 0;}
.slider-szoveg-oszlop .slider-gomb { margin-top: 0.8em !important; }
.slider-szoveg-oszlop .slider-gomb .btn,
.slider-szoveg-oszlop .slider-gomb button { font-size: 0.95em !important; padding: 0.4em 1em !important; }
.slider-szoveg-oszlop h1, .slider-szoveg-oszlop h2, .slider-szoveg-oszlop h3,
.slider-szoveg-oszlop p { margin-top: 0 !important; }

/* Reszponzív nézet: Mobilon és tableten egymás alá essenek az oszlopok */
@media (max-width: 991.98px) {
    /* Ne kényszerítsük a 380px min-magasságot mobilon — a kép természetes-magassága vezérel. */
    .webshop-slider .slick-slide > div,
    .webshop-slider .slick-slide > div > a {
        min-height: 0 !important;
    }
    .webshop-slider .slider-elem-sor {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    .webshop-slider .slider-szoveg-oszlop,
    .webshop-slider .slider-kep-oszlop {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* MOBIL: fixen kép FÖNT, szöveg LENT (a $szoveg_order_osztaly / $kep_order_osztaly a
       Bootstrap `order-lg-*` — csak ≥992px-en érvényes; itt explicit order-cserével
       felülírjuk, hogy a user natural-DOM-sorrend helyett a kép legyen az első). */
    .webshop-slider .slider-kep-oszlop {
        order: 1 !important;
    }
    .webshop-slider .slider-szoveg-oszlop {
        order: 2 !important;
    }
    .slider-szoveg-oszlop {
        min-height: auto;
        /* Volt: 2.5rem 1.5rem — a user szerint tuli-nagy belso margo. */
        padding: 1.25rem 1rem !important;
        text-align: center !important;
        height: auto !important;
        max-height: none !important;
    }
    .slider-kep-oszlop {
        height: auto !important;
        max-height: none !important;
    }
    /* Kép mobilon: természetes-arányú (a fix height:100% + object-fit:contain kényszerítést
       felülírjuk — a kép sima img-fluid-módban tölti a teljes-szélességet, magassága arányos). */
    .webshop-slider .slider-kep-oszlop img,
    .webshop-slider .slider-kep-oszlop img.img-fluid {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }
    /* Logók mobilon: az inline `top:35px;left:60px` és `bottom:40px;right:50px` a szűkebb
       viewport-en aránytalanul-nagy — felülírjuk kisebb pozicióra + kisebb max-méretre. */
    .webshop-slider .slider-logo-normal {
        top: 12px !important;
        left: 12px !important;
        max-width: 90px !important;
    }
    .webshop-slider .slider-logo-pici {
        bottom: 12px !important;
        right: 12px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
    /* Tipográfia mobilon: az arányos-alap 16px → 14px, a főcím pedig 1.7em → 1.4em.
       Így a főcím 27.2px → ~19.6px (30% csökkentés), az alcím és szöveg is arányosan
       kisebb. A user visszajelzése: "szövegek lehetnek arányosan sokkal kisebbek". */
    .slider-szoveg-oszlop {
        font-size: 14px !important;
    }
    .slider-focim {
        font-size: 1.4em !important;
        margin-bottom: 0.3em !important;
        line-height: 1.15;
    }
    .slider-alcim {
        font-size: 0.75em !important;
        margin-bottom: 0.35em !important;
    }
    .slider-szoveg {
        font-size: 0.9em !important;
    }
    .slider-szoveg-oszlop .slider-gomb .btn,
    .slider-szoveg-oszlop .slider-gomb button {
        font-size: 0.9em !important;
        padding: 0.35em 0.9em !important;
    }
}

/* ------------------------------
   Kategoria menu es navigacio
------------------------------ */
[data-bs-toggle="collapse"] i { transition: transform 0.2s ease-in-out; }
[data-bs-toggle="collapse"].collapsed i { transform: rotate(-90deg); }

.sticky-top::-webkit-scrollbar { width: 4px; }
.sticky-top::-webkit-scrollbar-track { background: #f1f1f1; }
.sticky-top::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
.sticky-top::-webkit-scrollbar-thumb:hover { background: #aaa; }
.marka-sav::-webkit-scrollbar { display: none; }

/* Arculati atszinezes: a Bootstrap-kek felulirasa a Chefmarket-zoldre.
   A .text-primary / .text-info felulirasok TOROLVE — a chefmarket_theme.css :root
   Bootstrap-tema-valtozoi ervenyesulnek (--bs-primary = #313220 zold). */
.active-kat { border-radius: 4px; padding: 2px 5px; background-color: var(--cm-light-green); color: var(--cm-green) !important; }
.nav-link { transition: color 0.2s ease; }
.nav-link:hover { color: var(--cm-green) !important; }

.navbar-nav .dropdown-menu { border: none; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
@media (min-width: 992px) { .navbar-nav .dropdown-menu { margin-top: 10px; padding: 15px; } }
@media (max-width: 991.98px) { .navbar-nav .dropdown-menu { margin: 0; padding-left: 1rem; background-color: #f8f9fa; box-shadow: none; } }

.marketing-list .dropdown-item, .marketing-list .nav-link { border-radius: 6px; transition: all 0.2s; }
.marketing-list .dropdown-item { margin-bottom: 2px; padding: 8px 12px; }
.marketing-list .dropdown-item:hover, .marketing-list .nav-link:hover { background-color: var(--cm-light-green); color: var(--cm-green) !important; }
.marketing-list .active { background-color: var(--cm-light-green); font-weight: bold; }
.marketing-list .nav-link { padding: 8px 20px !important; border-bottom: 1px solid #f1f1f1; }
.marketing-list .nav-link:hover { padding-left: 25px !important; }
.marketing-list .nav-link i { width: 20px; color: var(--cm-green); }

.fo-almenu .nav-link.dropdown-toggle { padding: 5px 15px !important; border-radius: 4px; background: #f8f9fa; color: #333 !important; font-weight: 600; }
.fo-almenu .nav-item.dropdown { position: static; }
.fo-almenu .dropdown-menu { left: 0 !important; right: 0 !important; width: 100%; min-width: 280px; max-height: 450px; margin-top: 0; padding: 20px; overflow-y: auto; border: none; border-top: 3px solid var(--cm-green); border-radius: 0 0 8px 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

.mega-menu-columns { display: block; column-count: 3; column-gap: 30px; column-rule: 1px solid #f1f1f1; }
.mega-menu-columns .nav-link { display: flex; break-inside: avoid; margin-bottom: 5px; border-radius: 4px; }
.mega-menu-columns .nav-link:hover { background-color: #f8f9fa; color: var(--cm-green) !important; }
@media (max-width: 991px) { .mega-menu-columns { column-count: 1; } }

img.marketing-kat-kep { max-width: 30px; max-height: 30px; object-fit: contain; flex-shrink: 0; }

/* ------------------------------
   Kereses
------------------------------ */
#kereso-blokk { max-width: 600px; }
#termek_kereso_input { width: 500px; height: 45px; font-size: 0.95rem; transition: all 0.3s ease; }
#termek_kereso_input:focus { border-color: var(--cm-green); box-shadow: 0 0 0 0.25rem rgba(49, 50, 32, 0.15); }
#termek_gyors_talalatok { top: 100%; left: 0; right: 0; display: none; margin-top: 10px; border: 1px solid rgba(0,0,0,.1); background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
.dropdown-item.d-flex { white-space: normal; transition: background 0.2s ease; }
.dropdown-item.d-flex:hover { background-color: #faf8ee; }
.dropdown-item .border.rounded { display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: #fff; }
.dropdown-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dropdown-item .fw-bold.small { margin-bottom: 2px; color: #333; line-height: 1.2; }
.dropdown-item .text-primary.fw-bold { font-size: 0.9rem; }
.dropdown-item .text-muted.fw-normal { font-size: 0.75rem; }
#osszes_talalat_link { display: block; padding: 10px; color: var(--cm-kek); transition: background 0.2s; }
#osszes_talalat_link:hover { background: #eef4ff; color: #0a58ca; }
.kereses-kiemeles { border-radius: 2px; background-color: rgba(230, 126, 34, 0.1); color: #e67e22; font-weight: 700; text-decoration: underline; }
.kereso-item { padding: 8px; transition: background 0.2s; }
.active-item { border-left: 4px solid #007bff; background-color: #e9ecef !important; color: #000; cursor: pointer; }
@media (max-width: 991px) {
    #kereso-blokk { max-width: 100%; margin: 10px 0; }
    /* Volt: width: 100% — a Bootstrap .input-group flex-container-ét felülírta és
       a kereso-gomb az input alá letörődött. flex: 1 1 auto + min-width: 0 hagyja,
       hogy az .input-group magától elossza a helyet input és gomb között. */
    #termek_kereso_input { width: auto; flex: 1 1 auto; min-width: 0; }
    #termek_gyors_talalatok { position: relative !important; margin-top: 5px; border: 1px solid #eee; box-shadow: none !important; }
}

/* ------------------------------
   Termekkartyak
------------------------------ */
.termek-item { position: relative; z-index: 1; }
.termek-kep { width: 100%; max-width: 250px; max-height: 250px; object-fit: contain; display: block; margin: 0 auto; }
.termek-kartya { position: relative; z-index: 1; display: flex; flex-direction: column; border: 1px solid var(--cm-kartya-szegely) !important; border-radius: 12px !important; background-color: #fff; opacity: 0; overflow: hidden; transform: translateY(20px); animation: fadeInUp 0.4s ease forwards; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.termek-kartya:hover { transform: translateY(-5px); border-color: #eee !important; box-shadow: var(--cm-arnyek) !important; }
.termek-kartya .card-body { position: relative; overflow: visible; }
.termek-tagek { margin-bottom: 5px; }

.badge { padding: 2px 6px; border-radius: 4px; color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.termek-kartya .badge { backdrop-filter: blur(4px); }
.tag-egyedi { background-color: #ffc107; color: #000; }
.tag-szokasos { background-color: #198754; color: #fff; }
.tag-elozo { background-color: var(--cm-salmon); color: var(--cm-green); }
.tag-akcio { background-color: #dc3545; color: #fff; }
.tag-ujtermek{background-color: #C8E2C0;color:#313220;}
.tag-lejarati { display: block; width: 100%; max-width: 100%;font-size:12px; background-color: var(--cm-sotet); color: var(--cm-krem); text-align: center; white-space: nowrap; }
.kosarban-badge, #termek-lista [id^="kosar_badge_"] { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s ease; }
.termek-kartya:hover .kosarban-badge, .termek-kartya:hover [id^="kosar_badge_"] { transform: scale(1.04); }
.termek-kartya:has(.tag-lejarati) { border-color: var(--cm-sotet) !important; }
.termek-kartya:has(.tag-ujtermek) { border-color: var(--cm-sotet) !important; }

.termek-badge-kontener {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;

    left: 0 !important;
    right: 0 !important;
    width: 100%;
    padding: 0.5rem !important;
}

.termek-badge-kontener .tag-lejarati {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    white-space: nowrap;
}

.jovedeki-valaszto { border-left: 4px solid var(--cm-kek) !important; transition: all 0.3s ease; }
.jovedeki-mini-box .btn-outline-secondary, .jovedeki-mini-box .btn-check + .btn { border-color: var(--cm-szegely); background: #f9f9f9; color: #6c757d; }
.jovedeki-mini-box .btn-check:checked + .btn-outline-secondary, .jovedeki-mini-box .btn-check:checked + .btn { border-color: #495057; background-color: #495057; color: #fff; }
.btn-check + .btn-outline-primary { border-width: 2px; }
.btn-check:checked + .btn-outline-primary { background-color: var(--cm-green); border-color: var(--cm-green); color: var(--cm-beige); }
.input-group-custom { display: flex; padding: 2px; overflow: hidden; border-radius: 8px; background: #f1f1f1; }
.input-group-custom input { margin: 0 2px; border: none; border-radius: 4px; background: #fff; }

/* Mindig világos design stílusvilág */
.termek-kartya {
    background-color: #ffffff;
    border: 1px solid #eaeaea !important;
    border-radius: 12px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Szelídebbé tesszük a csupa nagybetűs termékneveket a szemnek */
.termek-cim-szures a {
    text-transform: lowercase;
    display: inline-block;
}
.termek-cim-szures a::first-letter {
    text-transform: uppercase;
}

/* === Termékleírás (Serpa HTML) egységesítése + accordion === */
/* A Serpa h1-h4-ei eltérő méretekkel, display-fonttal érkeznek — itt normalizáljuk. */
.termek-leiras-tartalom { font-family: inherit; color: #313220; line-height: 1.55; font-size: 0.95rem; }
.termek-leiras-tartalom h1,
.termek-leiras-tartalom h2,
.termek-leiras-tartalom h3,
.termek-leiras-tartalom h4,
.termek-leiras-tartalom h5,
.termek-leiras-tartalom h6 {
    font-family: inherit !important;
    font-variant: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 600;
    color: #313220;
    margin: 0.9rem 0 0.4rem 0;
    line-height: 1.3;
}
.termek-leiras-tartalom h1 { font-size: 1.15rem; }
.termek-leiras-tartalom h2 { font-size: 1.05rem; }
.termek-leiras-tartalom h3 { font-size: 0.98rem; }
.termek-leiras-tartalom h4,
.termek-leiras-tartalom h5,
.termek-leiras-tartalom h6 { font-size: 0.95rem; }
.termek-leiras-tartalom p,
.termek-leiras-tartalom li,
.termek-leiras-tartalom td,
.termek-leiras-tartalom th { font-family: inherit !important; font-variant: normal !important; text-transform: none !important; letter-spacing: normal !important; font-size: 0.95rem; }
.termek-leiras-tartalom font { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.termek-leiras-tartalom p { margin: 0.25rem 0 0.5rem 0; }
.termek-leiras-tartalom ul,
.termek-leiras-tartalom ol { margin: 0.25rem 0 0.5rem 1.25rem; padding-left: 0.5rem; }
.termek-leiras-tartalom table { width: 100%; margin: 0.5rem 0; border-collapse: collapse; }
.termek-leiras-tartalom th,
.termek-leiras-tartalom td { border: 1px solid #d8d4c8; padding: 0.35rem 0.5rem; }
.termek-leiras-tartalom th { background: rgba(49, 50, 32,0.05); font-weight: 600; }
.termek-leiras-tartalom img { max-width: 100%; height: auto; }

/* Accordion (Serpa-leírás): brand-szín, ne legyen kék focus-ring. */
#termek-leiras-akkordeon.accordion-flush .accordion-item { background: transparent; border-color: #e5e1d2; }
#termek-leiras-akkordeon .accordion-button {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: #313220;
    background: rgba(200, 226, 192,0.25);
    box-shadow: none;
}
#termek-leiras-akkordeon .accordion-button:not(.collapsed) {
    color: #313220;
    background: rgba(200, 226, 192,0.5);
}
#termek-leiras-akkordeon .accordion-button:focus { box-shadow: none; border-color: #C8E2C0; }

@media (min-width: 992px) {
    /* 300px-ről 320px-re emelve, hogy a hosszú nevek kényelmesen elférjenek */
    .termek-item { 
        height: auto; 
        margin-bottom: 2.5rem !important; 
    }
    
    .termek-item:has(.termek-kartya:hover) { 
        z-index: 100; 
    }
    
    .termek-kartya { 
        height: 100%; 
        overflow: visible !important; 
    }
    
    .termek-kartya:hover {
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        border-color: #d4c8a3 !important;
    }

    /* Lebegő rész finomítása — a keret-szin egyezzen a termek-kartya hover-borderjével (#d4c8a3) */
    .termek-kartya .hover-abszo-resz {
        position: absolute;
        top: 100%;
        left: -1px !important; /* Szépen rásimul a kártya keretére */
        right: -1px !important;
        z-index: 20;
        box-sizing: border-box;
        padding: 0.75rem 1rem 1rem;
        border-radius: 0 0 12px 12px;
        background: #ffffff;
        border: 1px solid #d4c8a3;
        border-top: none !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); 
        opacity: 0; 
        visibility: hidden; 
        pointer-events: none; 
        transform: translateY(-4px); 
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; 
    }
    
    .termek-kartya:hover .hover-abszo-resz { 
        opacity: 1; 
        visibility: visible; 
        pointer-events: auto; 
        transform: translateY(0); 
    }
}

@media (max-width: 991.98px) {
    .termek-item { 
        height: auto !important; 
        margin-bottom: 1rem !important; 
    }
    
    .termek-kartya { 
        height: auto !important; 
        overflow: hidden !important; 
        border-radius: 8px;
    }
    
    .termek-kartya .hover-abszo-resz { 
        position: static !important; 
        margin-top: 0.75rem !important; 
        padding: 0 !important; 
        box-shadow: none !important; 
        border: none !important;
        opacity: 1 !important; 
        visibility: visible !important; 
        pointer-events: auto !important; 
        transform: none !important; 
    }
    
    .quantity-selector .input-group { 
        width: 100% !important; 
    }
    
    .quantity-selector .btn { 
        padding: 0.5rem 0.75rem !important; 
    }
}

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
@keyframes kosar-utes { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.kosar-animacio { animation: kosar-utes 0.3s ease-in-out; }
.fa-spin { animation: fa-spin 1s infinite linear; }

/* ------------------------------
   Kapcsolodo termekek
------------------------------ */
.related-card { overflow: hidden; border-radius: 12px; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.related-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
.related-img-wrapper { display: flex; align-items: center; justify-content: center; height: auto; background-color: #fff; }
.related-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }
.related-card .card-title {
    height: 2.8rem;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    /* soros clamp ellipszissel — enélkül a hosszú termek-név vágódott, ellipszis nélkü... */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
}
.related-price { font-size: 1.2rem; }
@media (max-width: 576px) { .related-img-wrapper { height: 140px; } .related-card .card-title { font-size: 0.85rem; } }

/* ------------------------------
   Termekleiras / szerkesztobol jovo tartalom
------------------------------ */
#leiras .lh-lg { overflow-x: hidden; color: #34495e; font-size: 1rem; }
#leiras .lh-lg * { max-width: 100% !important; height: auto !important; background-color: transparent !important; font-family: inherit !important; line-height: inherit !important; }
#leiras .lh-lg p { margin-bottom: 1.25rem; }
#leiras .lh-lg p:empty, #leiras .lh-lg div:empty, #leiras .lh-lg span:empty { display: none !important; }
#leiras .lh-lg *:last-child { margin-bottom: 0; }
#leiras .lh-lg img { max-width: 100% !important; height: auto !important; margin: 10px 0; border-radius: 8px; }
#leiras .lh-lg ul { margin-bottom: 1.25rem; padding-left: 1.5rem; }
#leiras .lh-lg li { margin-bottom: 0.5rem; }
.lh-lg table { width: 100%; max-width: 500px; margin: 20px 0; border: 1px solid var(--cm-szegely) !important; border-collapse: collapse !important; font-size: 0.9rem; }
.lh-lg table td { padding: 8px 12px; border: 1px solid var(--cm-szegely) !important; }
.lh-lg table tr:nth-child(even) { background-color: #f8f9fa; }
.lh-lg font { font-size: inherit !important; }

/* ------------------------------
   Egyeb finomitasok
------------------------------ */
.termek-marketing-kategoria { background-color: #fff; }
.token-marka-link:hover div { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }
.marka-navigacio a:hover { opacity: 0.5; }
.fejlec_felso { font-size: 0.825rem; letter-spacing: 0.025em; }
.felso_bal a { color: #6c757d; text-decoration: none; transition: color 0.15s ease-in-out; }
.felso_bal a:hover { color: #212529; }
.valto-gomb { transition: transform 0.15s ease-in-out, color 0.15s ease-in-out; }
.valto-gomb:hover { transform: scale(1.15); color: #0a58ca !important; }

#kosar_statusz_kontener{border-color: #313220 !important;}
h1.product-title{font-size:25px;}

/* Kosár mennyiség-stepper (2026-08-27): a ME-címke a −/input/+ pilulán KÍVÜL van, az input FIX
   szélességű. Így hosszú egység-címkénél is (CSOMAG, KARTON, kínáló, példány, tekercs…) mindig
   látszik a mennyiség, és a pilulák sorok közt egyvonalban maradnak. Használja a felugró kosár-
   modal (Kosar_Lekerdezes) ÉS a kosár-oldal (kosar_oldal_tartalom.php). */
.kosar-stepper-pill { width: auto !important; flex: 0 0 auto; }
.kosar-stepper-input {
    flex: 0 0 auto !important;
    width: 52px !important;
    min-width: 52px;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

footer .elso a, footer .masodik a, footer .harmadik a{
    display:block;
}
footer{
    color: #fff;
}
/* Lábléc-linkek hover-stílusa: a sötét brand-háttérhez illő krém-szín + aláhúzás,
   smooth color-transition. A default-böngésző-szín (sötét-kék) helyett. */
footer a {
    transition: color 0.18s ease-in-out, text-decoration-color 0.18s ease-in-out;
}
footer a:hover,
footer a:focus {
    color: #F9F1D8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.grecaptcha-badge{display:none;}

/* ============================================================================
   MOBIL_AUDIT K1-K3 — touch-visszajelzes + kis-szovegek + fluid cimek (v3)
   ============================================================================ */

/* K1 — a hover-effektek :focus-visible / :active parjai: touch-eszkozon es
   billentyus navigacional is legyen vizualis visszajelzes. Ertekek = a megfelelo
   :hover szabalyokeval azonosak. */
.termek-kartya:focus-within,
.termek-kartya:active {
    transform: translateY(-5px);
    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;
}
.related-card:focus-within,
.related-card:active {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
.marketing-list .dropdown-item:focus-visible,
.marketing-list .dropdown-item:active,
.marketing-list .nav-link:focus-visible,
.marketing-list .nav-link:active {
    background-color: var(--cm-light-green);
    color: var(--cm-green) !important;
}
.nav-link:focus-visible {
    color: var(--cm-green) !important;
    outline: 2px solid var(--cm-green);
    outline-offset: 2px;
}
.fo-almenu .nav-link:focus-visible,
.felso_bal a:focus-visible,
.felso_jobb a:focus-visible {
    text-decoration: underline;
}
.termekfa-oldalsav a:focus-visible {
    background-color: var(--cm-light-green);
    color: var(--cm-green) !important;
    outline: none;
    border-radius: 4px;
}

/* K2 — 14px-alatti szovegek emelese MOBILON (a desktop-design kicsi-marad). */
@media (max-width: 991.98px) {
    .fejlec_felso { font-size: 0.875rem; }              /* volt 0.825rem (13.2px) */
    .related-card .card-title { font-size: 0.875rem; }  /* volt ~13.6px 576 alatt */
    .dropdown-item .text-muted.fw-normal { font-size: 0.875rem; } /* kereso-talalat kiszereles, volt 12px */
}

/* K3 — fluid h1/h2 (a fix Bootstrap 40px helyett): mobilon ~26/22px, desktopon a
   token-ertekek (40/32px) a plafon. A h1.product-title sajat szabalya (25px) erosebb,
   az valtozatlan. */
h1, .fo-cim {
    font-size: clamp(26px, 2.2vw + 18px, 40px);
}
h2 {
    font-size: clamp(22px, 1.6vw + 16px, 32px);
}