/* custom.css v 260120_01 */

html { visibility: visible !important; display: block !important; }

/* ------------------------------------------------------------- */



/*------ Táblázat Mobil nézete: 768px-nél kisebb képernyőkön ---- */
@media screen and (max-width: 768px) {
    /* A táblázat elemeit blokkokká alakítjuk */
    table.resp-table,
    table.resp-tabletbody, 
    table.resp-table tr, 
    table.resp-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Opcionális: a videó alatti celláknak adhatunk egy kis alsó margót, 
       hogy a következő sor szövege ne tapadjon rá */
    table.resp-table td {
        padding: 10px 0 !important;
    }
}
/* ------------------------------------------------------------- */

/* ---------------  Színek nagyítása termékadatlapon  -------- */
/* 1. Kinyitjuk a falakat, hogy ne vágja le a nagyítást */
.plg-vmcustom-advanced-radio,
.vmcustomadvanced-radio-sample-img {
    overflow: visible !important;
}
/* 2. Csak a képet nagyítjuk, és SEMMI mást nem bántunk */
img.vps-zoom-img:hover {
    transform: scale(5); /* Csak optikai nagyítás */
    position: relative;
    z-index: 5; /* Csak annyira emeljük meg, hogy a szomszédos GOMBOK fölé érjen */
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* ------------------------------------------------------------- */

/* RAGADÓS FEJLÉC JAVÍTÁSA FŐOLDALON IS */
#vpf-header {
    position: -webkit-sticky !important; /* Safari támogatás */
    position: sticky !important;
    top: -15px; /* TRÜKK: Ez a negatív érték tünteti el a kék sávot! */
    z-index: 1050; /* Hogy biztosan minden más (pl. slider) felett legyen */
    background-color: #fff; /* Hogy ne legyen átlátszó görgetéskor */
    width: 100%;
}

/* ------------------------------------------------------------- */
/* SLIDER ALATTI HORIZONTÁLIS KATEGÓRIA SÁV */

/* Közvetlenül a listát célozzuk, amin már ott lesz az osztály */
ul.kategoria-sav-horizontalis {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeee !important;
}

/* Az elemek egymás mellé kényszerítése */
ul.kategoria-sav-horizontalis li {
    display: inline-block !important;
    float: none !important;
    margin: 0 15px !important;
}

/* Linkek formázása */
ul.kategoria-sav-horizontalis li a {
    background: transparent !important;
    color: #333333 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    border: none !important;
}

/* A menüpontok (li) átalakítása függőleges elrendezésűvé a sávon belül */
ul.kategoria-sav-horizontalis li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 15px !important;
}

/* A képek (ikonok) stílezése */
ul.kategoria-sav-horizontalis li a img {
    display: block !important;
    margin: 0 auto 8px auto !important; /* Középre és távolság a szövegtől */
    width: 60px !important;  /* Itt állítsd a méretet */
    height: 60px !important;
    border-radius: 50% !important; /* Ettől lesz kör alakú */
    border: 2px solid #eeeeee !important; /* Opcionális keret */
    transition: transform 0.3s ease !important;
    object-fit: cover !important;
}

/* Hover effekt az ikonra */
ul.kategoria-sav-horizontalis li a:hover img {
    transform: scale(1.1) !important; /* Kicsit megnő, ha rátartod az egeret */
    border-color: #c6a47e !important;
}

/* A szöveg igazítása a kép alá */
ul.kategoria-sav-horizontalis li a {
    text-align: center !important;
    font-size: 11px !important; /* Picit kisebb betű, hogy elférjen */
}

/* MOBIL NÉZET - Vízszintes görgetés aktiválása */
@media (max-width: 880px) {
    ul.kategoria-sav-horizontalis {
        /* Kikapcsoljuk a tördelést, egy sorba kényszerítjük */
        flex-wrap: nowrap !important;
        /* Engedélyezzük a vízszintes görgetést */
        overflow-x: auto !important;
        /* Balra igazítjuk az elemeket, hogy legyen honnan indulni a görgetésnek */
        justify-content: flex-start !important;
        /* Eltüntetjük a függőleges kilógást, ha lenne */
        overflow-y: hidden !important;
        /* Simább görgetés mobilon */
        -webkit-overflow-scrolling: touch !important;
        /* Adunk neki egy kis belső margót a széleken, hogy ne tapadjanak az ikonok a képernyő széléhez */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    ul.kategoria-sav-horizontalis li {
        /* Fixáljuk az elemek szélességét, hogy ne nyomódjanak össze */
        flex: 0 0 auto !important;
        /* Kicsit csökkentjük a távolságot köztük, hogy több látsszon egyszerre */
        margin: 0 10px !important;
        width: 80px !important;
    }

    ul.kategoria-sav-horizontalis li a img {
        /* Mobilon kicsit kisebb ikonok is elegek lehetnek */
        width: 50px !important;
        height: 50px !important;
    }

    /* Opcionális: A görgetősáv elrejtése, hogy modernebb legyen a kinézet */
    ul.kategoria-sav-horizontalis::-webkit-scrollbar {
        display: none !important;
    }
    ul.kategoria-sav-horizontalis {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
}

/* ------------------------------------------------------------- */

/*------------ Breadcrumbs  --------------------*/
#breadcrumbs .breadcrumbs-inner, 
#breadcrumbs .breadcrumb, 
#breadcrumbs ul,
#breadcrumbs li { 
    background: transparent !important; 
    background-color: transparent !important;
    box-shadow: none !important; 
    border: none !important;
}

/* Ez biztosítja, hogy semmilyen belső "sáv" ne maradjon meg */
#breadcrumbs .container, 
#breadcrumbs .inner-container {
    background: transparent !important;
}
/*------------ Breadcrumbs Navigáció (Előző/Következő) --------------------*/
#breadcrumbs .breadcrumb-navigations,
#breadcrumbs .breadcrumb-navigations a,
#breadcrumbs .breadcrumb-navigations a:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Az utolsó, aktív breadcrumb elem kiemelése */
#breadcrumbs ul.breadcrumb li.active {
    font-size: 30px !important; /* Itt állíthatod a méretet (pl. 18px, 20px, 22px) */
    font-weight: 600 !important; /* Kicsit vastagabb betűtípus */
    line-height: 1.2 !important;
    display: inline-block;
    vertical-align: middle;
}

/* Opcionális: Ha a többi lépcsőfokot is kicsit nagyobbnak szeretnéd * /
#breadcrumbs ul.breadcrumb li {
    font-size: 14px; 
}

/* Opcionális: Ha az elválasztó nyilakat (>>) is igazítani kell az új mérethez * /
#breadcrumbs ul.breadcrumb li + li::before {
    font-size: 14px;
    vertical-align: middle;
    padding: 0 10px;
}
*/

/* Sortörés kényszerítése az aktív breadcrumb elem elé */
#breadcrumbs ul.breadcrumb li.active::before {
    content: "\a"; /* Ez a sortörés karaktere */
    white-space: pre; /* Megtartja a sortörést */
    display: block; /* Kényszeríti az új sort */
    height: 0; /* Ne foglaljon extra függőleges helyet */
}

/* Finomhangolás az aktív elemhez */
#breadcrumbs ul.breadcrumb li.active {
    display: block !important; /* Blokként viselkedik, így mindenképp új sorba kerül */
    margin-top: 10px; /* Egy kis távolság az előző sortól */
    padding-left: 0 !important; /* Ha elcsúszna balra */
}

/* Az elválasztó ikon (pl. ») eltüntetése csak az aktív elem elől, ha zavaró */
#breadcrumbs ul.breadcrumb li.active::after {
    display: none !important;
}

#breadcrumbs {
    position: relative !important;
    z-index: 1 !important; /* Legyen ez a legalsó réteg */
    overflow: visible !important; /* Hogy a tartalma ne vágódjon le, de ne is takarjon */
}

#breadcrumbs .breadcrumbs-inner {
    position: relative;
    z-index: 2;
}


/*------------ SLIDER feletti szöveg --------------------*/
/* A közös szülő tároló fixálása */
.mod-slider-cont {
    position: relative !important;
    overflow: hidden;
}

/* Az új modulunk elhelyezése a slider felett */
.h1-slider-overlay {
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 100; /* Magasabb, mint a swiper-wrapper z-indexe */
    width: auto;        /* Ne legyen 100%, hogy ne lógjon ki jobbra */
    max-width: 80%;     /* Korlátozzuk a szélességet, hogy ne érjen a kép közepéig */
    text-align: left;
    pointer-events: none; /* Fontos: így át lehet kattintani rajta a sliderre */
}

/* Stílusok */
.h1-main-title {
    color: #bababa !important;
    font-size: 2.0rem !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
    margin: 0;
    padding: 0;
    font-weight: 800;
    line-height: 1.2;   /* Hogy ne érjenek össze a sorok */
}

.h1-sub-title {
    color: #bababa !important;
    font-size: 1.2rem !important;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
    margin-top: 5px;
    padding: 0;
}

/* Mobilos nézet finomhangolása (767px szélesség alatt) */
@media (max-width: 767px) {
    .h1-slider-overlay {
        /* Kényszerítjük a felső pozíciót */
        top: 5% !important; 
        left: 5% !important;
        
        /* Biztosítjuk, hogy ne legyen alsó margó vagy eltolás, ami lefelé nyomná */
        bottom: auto !important; 
        
        /* Mobilon a szélesség lehet kicsit nagyobb, hogy ne törjön túl sok sorba a szöveg */
        max-width: 80% !important; 
    }

    .h1-main-title {
        font-size: 1.0rem !important; /* Mobilon kicsit még kisebb betű, hogy biztosan kiférjen */
        line-height: 1.1 !important;
    }

    .h1-sub-title {
        font-size: 0.7rem !important;
        margin-top: 2px !important;
    }
}

/* 1. A konténer alapbeállítása */
.mod-slider-cont .swiper-container {
    overflow: visible !important;
}


/*------------------------------------------------------------*/


/*-------------- TERMÉK ADATLAP NAGY KÉP -----------------*/
/* Erősebb szelektor a logó méretének korlátozásához */
.productdetails-view .product-top-right-cont img {
    max-width: 150px !important; /* Kisebb méret */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important; /* Középre igazítás a sávon belül */
}

/* Pozícionálás asztali gépen */
@media (min-width: 992px) {
    .product-top-right-cont {
        margin-top: 100px !important; /* Jóval lejjebb toljuk */
        padding: 15px !important;
        border: 1px solid #eee !important; /* Halvány keret, hogy lássuk a határait */
        background-color: #fff !important;
    }
}

/* A termékgaléria konténerének középre igazítása asztali gépen */
.product-image-gallery-cont {
    max-width: 800px; /* Ezt ízlés szerint állítsd be */
    margin: 0 auto 30px auto;
    display: block;
}

/* A fő kép legyen reszponzív és középen */
#product-image-gallery img, #vpf-simplegallery-main {
    margin: 0 auto;
    display: block;
}

/* A leírás és ár szekció feletti térköz */
.productdetails-view .col-md-12.col-sm-12 {
    padding-top: 20px;
}

/* Csak a termékadatok oszlopát toljuk beljebb nagy képernyőn */
@media (min-width: 992px) {
    .productdetails-view .col-md-8 {
        margin-left: 16.66666667% !important; /* Ez felel meg 2 Bootstrap oszlopnyi üres helynek (2/12) */
        width: 50% !important;                /* Ez lesz a te "6" egységed (6/12) */
        float: left !important;
    }
}

/* Mobilon és tableten hagyjuk meg a teljes szélességet */
@media (max-width: 991px) {
    .productdetails-view .col-md-8 {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/*----------- Tooltip főmenübe ----------------*/

/* A menüpont alapbeállítása a tooltip pozicionálásához */
/* 1. KÖZÖS STÍLUSOK - Minden menüpontra, aminek tooltipet akarsz */
.item-619, .item-620, .item-635, .item-602 {
    position: relative;
}

/* A tooltip buborék kinézete (közös mindenhol) */
.item-619::after, .item-620::after, .item-635::after, .item-602::after {
    position: absolute;
    bottom: -35px; /* Kicsit lejjebb toltuk, hogy ne takarja a menüt */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(51, 51, 51, 0.95); /* Kicsit áttetszőbb, modernebb */
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Egy kis árnyék a mélységhez */
}

/* 2. EGYEDI TARTALMAK - Csak a szövegeket adjuk meg külön */
.item-619::after { content: "Gyakran Ismételt Kérdések"; }
.item-620::after { content: "Lépj kapcsolatba velünk"; }
.item-602::after { content: "Blog, cikkek, leírások"; }
.item-635::after { content: "Interaktív tanácsadó, termékválasztó"; }

/* 3. KÖZÖS MEGJELENÍTÉS - Hover hatás minden kiválasztottra */
.item-619:hover::after, 
.item-620:hover::after, 
.item-602:hover::after, 
.item-635:hover::after 
 {
    opacity: 1;
    visibility: visible;
    bottom: -30px; /* Egy kis "felúszó" animáció hoverkor */
}

/* 1. KAPCSOLAT (Ezt hagyjuk meg, mert ez működik neked) */
.item-620 .image-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.item-620 .fa-phone {
    font-size: 1.3em !important;
    margin-right: 0 !important;
}

/* 2. HOME (Az Alias típus miatt .menu-title kell) */
.item-547 .menu-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 3. A Házikó ikon beszúrása a Home-hoz */
/* Mivel az Inspect-ed szerint nincs ikon a HTML-ben, ezzel a trükkel tesszük oda */
.item-547 a .menu-group::before {
    content: "\f015"; /* A házikó kódja */
    font-family: "FontAwesome";
    font-size: 1.3em !important;
    display: inline-block;
    visibility: visible;
}
/*---------------------------------------------------------*/

/*------ Pricing table dobozok magasságának állítása  -----*/
div.pricing_table.row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* Az oszlopok (col-ok) kényszerítése */
div.pricing_table [id^="colwid"] {
    display: flex !important;
    flex-direction: column !important;
}

/* A tényleges színes doboz (tc_table_col) nyújtása */
.tc_table_col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 0 auto !important;
    margin-bottom: 20px; /* Hogy mobil sávok között legyen távolság */
}

/* A gomb tartályát (signin) az aljára toljuk */
.signin {
    margin-top: auto !important;
}
/*---------------------------------------------------------*/


/*---- Egyedi osztály a teljes szélességű cikk-fejlécképhez ----*/
.article-fullwidth-header {
    display: block !important;
    width: 100% !important;   /* Kényszeríti, hogy kitöltse a szülő konténert */
    max-width: 100% !important;
    min-width: 100% !important;
    float: none !important;
    clear: both !important;   /* Biztosítja, hogy semmi ne maradjon mellette */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 25px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Magasságok finomhangolása */
@media (min-width: 1200px) {
    .article-fullwidth-header { height: 500px !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .article-fullwidth-header { height: 300px !important; }
}
@media (max-width: 767px) {
    .article-fullwidth-header { height: 150px !important; }
}

.article-fullwidth-header {
    width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/* --------------------------------------- */


/*----  mega menu kiszedése mobilról  ----*/
@media (max-width: 991px) {
    /* A teljes modult kivonjuk a renderelésből */
    .MM-hide-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        
        /* Ez a legfontosabb: megmondja a böngészőnek, hogy ne is számoljon vele */
        content-visibility: hidden !important; 
        
        /* Minimálisra zsugorítjuk, hogy ne legyen kiterjedése */
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -10000px !important;
    }

    /* Külön célozzuk meg a benne lévő képeket, hogy ne töltsenek be */
    .MM-hide-mobile img {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}
/*-------------------------------------*/

/* ==========================================================================
   EGYSÉGESÍTETT CAROUSEL FIX: THUMBNAILS & RELATED PRODUCTS (v260515_STABLE)
   ========================================================================== */

/* 1. ALAP KONTÉNEREK ÉS NAVIGÁCIÓ */
.product-thumb-carousel, 
.related-products-carousel {
    display: block !important;
    position: relative !important;
    padding: 0 40px 50px 40px !important;
}

.owl-pagination {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
}

.owl-page { display: inline-block !important; margin: 0 5px !important; }
.owl-page span {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    background: #ccc !important;
    border-radius: 50% !important;
}
.owl-page.active span { background: #333 !important; }

/* 2. TARTALOM IGAZÍTÁSA (NÉV, ÁR, GOMB) */
.related-products-carousel .owl-item { text-align: center !important; }

/* Terméknév egységesítése */
.related-products-carousel .related-product-name,
.related-products-carousel h4 {
    display: block !important;
    min-height: 60px !important;
    max-height: 60px !important;
    overflow: hidden !important;
    margin: 0 0 5px 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
}

/* Árak pozicionálása és stílusa - MEGERŐSÍTETT FIX */
.related-products-carousel .related-item-price-cont,
.related-products-carousel .related-item-price-cont * {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
    line-height: 1.2 !important;
}

.related-products-carousel .related-item-price-cont {
    margin-top: -15px !important; 
    margin-bottom: 15px !important;
    width: 100% !important;
    text-align: center !important;
}

/* Ez kényszeríti a pici méretet minden ártípusra */
.related-products-carousel .PricesalesPrice, 
.related-products-carousel .vm-price-value,
.related-products-carousel .related-item-price-cont span,
.related-products-carousel .related-item-price-cont div {
    font-size: 16px !important; /* Itt állítsd a méretet, ha még kisebbet szeretnél */
    font-weight: 700 !important;
    color: #333 !important;
}

.related-products-carousel .price-crossed {
    font-size: 11px !important;
    color: #999 !important;
    margin-right: 5px;
    text-decoration: line-through;
}

/* 3. KOSÁRBA GOMB (ADDTOCART) KÉNYSZERÍTÉSE */
.related-addtocart-cont {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 10px 10px 10px !important;
}

.related-addtocart-cont .addtocart-bar { display: block !important; }
.related-addtocart-cont .quantity-box { display: none !important; }

.related-addtocart-cont .addtocart-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 35px !important;
    background-color: #444 !important;
    color: #ffffff !important;
    border: 1px solid #000 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.related-addtocart-cont .addtocart-button:hover { background-color: #000 !important; }

/* Felesleges elemek tiltása */
.related-products-carousel .vm-img-desc,
.related-products-carousel .owl-dots { display: none !important; }

/* 4. MOBIL RESZPONZÍV JAVÍTÁS (768px alatt) */
@media screen and (max-width: 767px) {
    .product-thumb-carousel .owl-wrapper,
    .related-products-carousel .owl-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .product-thumb-carousel .owl-item,
    .related-products-carousel .owl-item {
        width: 33.33vw !important;
        flex: 0 0 33.33vw !important;
        padding: 5px !important;
    }

    .related-products-carousel .related-product-name,
    .related-products-carousel h4 {
        font-size: 10px !important;
        min-height: 35px !important;
        max-height: 35px !important;
    }

    .related-products-carousel .related-item-price-cont { margin-top: -5px !important; }
    
    .owl-page:nth-child(n+4) { display: none !important; }
    .owl-pagination { padding-top: 10px !important; bottom: 0px !important; }
}
/* ==========================================================================
   CAROUSEL NYILAK (NAVIGÁCIÓ) VALÓDI ÉS VÉGLEGES JAVÍTÁSA
   Hatókör: Kapcsolódó termékek, Kisképek ÉS Maincourse365 modul
   ========================================================================== */

/* 1. A csúnya szürke gombok átalakítása elegáns körökké az ÖSSZES karusszelnél */
.related-products-carousel .owl-nav .owl-prev,
.related-products-carousel .owl-nav .owl-next,
.product-thumb-carousel .owl-nav .owl-prev,
.product-thumb-carousel .owl-nav .owl-next
{
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
    width: 45px !important;
    height: 45px !important;
    font-size: 24px !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important; /* Tökéletes kör */
    padding: 0 !important;
    margin: 0 5px !important; /* Egy pici távolság a két gomb között, ha egymás mellett vannak */
    z-index: 99 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* 2. POZÍCIONÁLÁS A KÉT SZÉLRE: Csak a kapcsolódóknál és a kisképeknél (Középre húzva) */
.related-products-carousel .owl-nav .owl-prev,
.product-thumb-carousel .owl-nav .owl-prev {
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    left: -20px !important;
}
.related-products-carousel .owl-nav .owl-next,
.product-thumb-carousel .owl-nav .owl-next {
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    right: -20px !important;
}

/* 3. POZÍCIONÁLÁS A SAROKBA: Kifejezetten a .maincourse365 modulhoz */
/* Elérjük, hogy ne csússzanak szét a képernyő szélére, hanem maradjanak elegánsan a jobb alsó sarokban * /
.maincourse365 .owl-nav {
    display: flex !important;
    justify-content: flex-end !important; 
    margin-top: 15px !important;          
    padding-right: 15px !important;
}

/* 4. HOVER állapot az összes gombra */
.related-products-carousel .owl-nav .owl-prev:hover,
.related-products-carousel .owl-nav .owl-next:hover,
.product-thumb-carousel .owl-nav .owl-prev:hover,
.product-thumb-carousel .owl-nav .owl-next:hover {
    background: #ffffff !important;
    color: #000 !important;
    border-color: #999 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

/* 5. Letiltott gombok kezelése */
.related-products-carousel .owl-nav .owl-prev.disabled,
.related-products-carousel .owl-nav .owl-next.disabled,
.product-thumb-carousel .owl-nav .owl-prev.disabled,
.product-thumb-carousel .owl-nav .owl-next.disabled
{
    opacity: 0.3 !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* 6. Mobilos elrejtés (767px alatt) */
@media screen and (max-width: 767px) {
    .related-products-carousel .owl-nav,
    .product-thumb-carousel .owl-nav
  {
        display: none !important;
    }
}
/*------------------- SKU stílus a termékdobozban ------------------*/
.vppl-sku {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 12px !important;
    color: #666 !important;
    margin: 5px 0 !important;
    text-align: center !important;
    width: 100% !important;
}

.sku-label {
    font-weight: bold;
    margin-right: 3px;
}

/* Kényszerítsük a láthatóságot a modulban is */
.product-grid-layout .vppl-sku, 
.vm-product-module .vppl-sku {
    display: block !important;
    visibility: visible !important;
    color: #333 !important; /* Legyen sötét, hogy biztosan lásd */
    text-align: center;
    padding: 5px 0;
}

/*---------------------------------*/

/* 1. A TERMÉKDOBOZOK RÁCSA (4 oszlop) */
.vppl-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    padding: 0 !important;
    list-style: none !important;
}

.vppl-list li {
    flex: 0 0 calc(25% - 12px) !important; /* 4 oszlop kényszerítése */
    width: calc(25% - 12px) !important;
    display: block !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* 2. A BELSŐ BOOTSTRAP OSZLOPOK HATÁSTALANÍTÁSA */
/* Ez kényszeríti a képet és a szöveget egymás alá */
.vppl-list .col-xs-4, 
.vppl-list .col-xs-8 {
    width: 100% !important; /* Elfoglalják a teljes szélességet a dobozon belül */
    float: none !important; /* Megszünteti az egymás mellé úsztatást */
    padding: 0 !important;
    text-align: center !important;
}

/* 3. A KÉP MÉRETE ÉS MEGJELENÉSE */
.vppl-image-cont {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.vppl-image-cont img {
    width: 100% !important;
    max-width: 180px !important; /* Itt állítsd be a kívánt nagyságot */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 4. SZÖVEGEK IGAZÍTÁSA */
.vppl-name, .vppl-price-cont {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

.vppl-name a {
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    display: block !important;
    margin: 5px 0 !important;
    min-height: 40px;
}

/* MOBIL NÉZET */
@media (max-width: 768px) {
    .vppl-list li {
        flex: 0 0 calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
    }
}

/*---------------------------------*/

/* 1. KÉP+SZÖVEG KONTAINER BEÁLLÍTÁSA */
/* A kép és a szöveg ezen belül helyezkednek el. */
/* A "position: relative" elengedhetetlen a szöveg (gyermeke) abszolút pozícionálásához. */
.kep-es-szoveg-kontener {
    position: relative; 
    width: 100%; /* Kitölti a modul rendelkezésre álló szélességét */
/*    max-width: 600px; /* Példa: Max szélesség korlátozása, ha szükséges */
    /* Ide lehet beállítani a végső magasság korlátot, ha szükséges */
    overflow: hidden; 
      margin-bottom: 20px !important; 
}

/* ---------------------------------------------------------------- */
/* 2. A KÉP MÉRETEZÉSE */
/* A kép töltse ki a szülő konténert, és tartsa be a megadott méretet */
.kep-es-szoveg-kontener .fo-tartalmi-kep {
    width: 100%; /* A kép szélessége 100% legyen a szülő konténerhez képest */
    height: 250px; /* Megadott magasság a pontos megjelenítéshez */
    object-fit: fill; /* Fontos! Betölti a megadott 250px magasságot anélkül, hogy torzítaná a képet (körbevág). */
    display: block; /* Eltávolítja az esetleges alul lévő plusz helyet (whitespace) */
}

/* ---------------------------------------------------------------- */
/* 3. A SZÖVEG POZÍCIONÁLÁSA A KÉP FÖLÉ */
/* A szövegdoboz a szülő konténerhez képest abszolút pozíciót vesz fel. */
.feliratszoveg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Példa: Szöveg központosítása és olvashatóság növelése */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4); /* Félátlátszó háttér a szöveg olvashatóságáért */
    color: white;
    
    /* Szöveg középre igazítása (Flexbox segítségével) */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Függőleges középre */
    align-items: center; /* Vízszintes középre */
    text-align: center;
}

/* 4. A CÍMEK ÉS SZÖVEG STÍLUSA */
.feliratszoveg h2, .feliratszoveg p {
    margin-bottom: 10px;
}
/*-----------------------*/

/* NEW_Gal Képgaléria konténere */

/* 1. Alap konténer */
.random-image-container-class {
    max-height: 250px !important;
    height: 250px !important;
    overflow: hidden !important;
    position: relative !important; 
    margin-bottom: 20px !important; 
    background-color: #fff !important; /* Ez a fehér alap villan be, ha baj van */
    display: block !important;
    width: 100%;
}

/* 2. Képek alaphelyzete (z-index: 1) */
.random-image-container-class img {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    z-index: 1; /* Alapréteg */
}

/* 3. AZ AKTÍV KÉP (z-index: 2) */
/* Amikor egy kép megkapja az .active osztályt, azonnal a régi fölé UGRIK */
.random-image-container-class img.active {
    opacity: 1 !important;
    z-index: 2 !important; 
}

/* 4. A Link (z-index: 3) - Mindig legfelül */
.random-image-container-class a {
    display: block !important;
    height: 100% !important;
    width: 100% !important;
    position: absolute; /* Átváltva absolute-ra a biztos fedésért */
    top: 0;
    left: 0;
    z-index: 3 !important;
}

/* 5. Reszponzivitás */
@media (max-width: 991px) {
    .random-image-container-class {
        display: none !important; 
    }
}
/* ------------------------------------- */


/* 20px alsó margó a modulok között */
.modul-alatt-hely {
    margin-bottom: 20px !important;
}
.col-half-left .mb-20 {
    margin-bottom: 20px !important; 
}
.col-half-right .mb-20 {
    margin-bottom: 20px !important; 
}
/*----------------------------------------*/

/* Custom Modul keretezése és árnyéka */
.keretezett-doboz {
    border: 1px solid #ddd; /* Nagyon vékony, világosszürke keret (szürkés árnyalattal) */
    border-radius: 6px; /* Enyhe lekerekítés a doboz sarkain */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); 
    background-color: #f9f9f9;
    padding: 20px; 
    margin-bottom: 40px
}

/*----------------------------------------*/

/* SidePanel betöltéskor ne legyen látható  */
#sidepanel_jt224,
#sidepanel_jt225,
#sidepanel_jt226 {
    /* Az átmenet időtartama a zökkenőmentes megjelenéshez */
    transition: opacity 0.1s ease-in-out; 
    /* Átlátszatlanná teszi az elemet, de megőrzi a helyét, és blokkolja a felvillanást */
    opacity: 0; 
}



/* Célpont: Minden modul, amely a háromoszlopos szekció középső (most 12-es) oszlopában van */
#three-column-section .col-md-12 > div.moduletable {
    /* Alsó margó hozzáadása, ami 10px-es helyet hagy a következő modul előtt */
    margin-bottom: 10px !important;
}#three-column-section .col-md-12 > div.moduletable:last-child {
    /* Eltávolítja az alsó margót az utolsó modultól, hogy a pozíció alján ne legyen felesleges tér */
    margin-bottom: 0 !important;
}

/* Nullázza a bal oldali oszlop (col-md-7) jobb oldali paddingját */
.col-md-7 {
    padding-right: 0 !important;
}

/* Nullázza a jobb oldali oszlop (col-md-5) bal oldali paddingját */
.col-md-5 {
    padding-left: 0 !important;
}

/* --- HÁTTÉRKÉP BEÁLLÍTÁSA A col-3-left POZÍCIÓHOZ --- */

/* Célpont: A bal oldali 3/12-es oszlop a three-column-section szekcióban */
#three-column-section .col-md-4 {
    /* 1. Kép forrásának beállítása (cserélje le az útvonalat, ha szükséges!) */
 /*   background-image: url("https://horecahpix.hu/images/headers/www_122009401_main_ONc4yo9.jpg"); */

/*    background-color: blue;   */
    /* 2. Háttérkép méretezése és pozíciója */
    background-size: cover;          /* A kép arányosan kitölti a rendelkezésre álló területet */
    background-position: center center; /* Középre igazítja a képet */
    background-repeat: no-repeat;    /* Megakadályozza a kép ismétlődését */
    
    /* 3. Ha fix 400px magasságot is szeretne (a korábbi példák alapján) */
    max-height: 300px;
    height: 300px; 
    overflow: hidden; 
    
    /* 4. Fontos: A háttérkép előtt megjelenő szöveg láthatóságának biztosítása */
    color: white; /* Ha a háttér sötét, a szöveg legyen világos */
    
    /* 5. A tartalom és a háttérkép elválást segítő kitöltés */
    padding: 20px; /* Hagy egy kis teret a szöveg és a szél között */
}

/* Kényszerítjük a modult, hogy rejtett legyen mobil nézetben */

@media (max-width: 1100px) {
    .module-cont[data-mod-id="193"] {
        display: none !important;
    }
}

/* A széles képernyőkön ez a beállítás marad érvényben (767px felett) */
.module-cont[data-mod-id="201"] {
    display: none !important;
}

/* --- 2. LÁTHATÓVÁ TÉTEL: CSAK MOBIL KÉPERNYŐN (767px alatt) --- */
@media (max-width: 1101px) {
    
    /* Felülírjuk az alapértelmezett beállítást, láthatóvá téve a modult */
    .module-cont[data-mod-id="201"] {
        display: flex !important; /* Vagy 'block', ha az eredeti modul nem flexbox-ot használt */
    }
}

/* Áttetsző gomb fehér kerettel, lekerekített sarkokkal és 3D hatással */
.custom-btn {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;                      /* fehér szöveg */
  text-decoration: none;
  border: 1px solid #fff;           /* vékony fehér keret */
  border-radius: 8px;              /* lekerekített sarkok */
  background-color: transparent;   /* áttetsző háttér */
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* 3D hatás */
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-top: 20px
}

/* Hover állapot */
.custom-btn:hover {
  background-color: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0,0,0,0.4);
  color: #ccc;
}

/* Fénycsík animáció hoverkor */
.custom-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: all 0.5s ease;
}

.custom-btn:hover::before {
  left: 100%;
}
/* Mobil nézet: A gomb kb. feleakkora lesz (600px szélesség alatt) */
@media (max-width: 991px) {
    
    .custom-btn {
        /* Párnázás (padding) csökkentése kb. felére (12px 24px -> 6px 12px) */
        padding: 6px 12px;
        
        /* Betűméret csökkentése (18px -> 12px) */
        font-size: 12px;
        
        /* Árnyék csökkentése a diszkrétebb megjelenésért */
        box-shadow: 0 2px 3px rgba(0,0,0,0.3); 
    }

    /* Hover állapot módosítása mobilra: A 3D hatás (transform) kisméretű gomboknál zavaró lehet, de maradhat */
    .custom-btn:hover {
        transform: none; /* Kikapcsolhatja a mozgást, ha a felhasználó érintőképernyőt használ */
        box-shadow: 0 3px 4px rgba(0,0,0,0.4);
    }
}

/* FEJLÉCEK */
@media only screen and (max-width: 991px) {
  h1 {
    font-size: 20px !important; 
  }
  h2 {
    font-size: 16px !important; 
  }
  h3 {
    font-size: 14px !important; 
  }

}

.hpix_fejl1 {
    font-size: 43px; /* Alapértelmezett méret asztali gépen */
    color: #4f4f4f;
    font-family: 'Bahnschrift'
  }
@media (max-width: 991px) {
    .hpix_fejl1 {
        font-size: 26px;
    }
}

.hpix_fejl2 {
    font-size: 24px; /* Alapértelmezett méret asztali gépen */
    color: #4f4f4f;
    font-family: 'Bradley Hand ITC'
  }
@media (max-width: 991px) {
    .hpix_fejl2 {
        font-size: 20px;
    }
}

.hpix_fejl3 {
    font-size: 18px; /* Alapértelmezett méret asztali gépen */
    color: #4f4f4f;
    font-family: 'Bahnschrift'
  }
@media (max-width: 991px) {
    .hpix_fejl3 {
        font-size: 14px;
    }
}


/* TERMÉKDOBOZ  */
/* Termékkártya alapstílus */
.product-item {
    /* 1px margó: felül 0, oldalt 1px, alul 1px 
    margin: 0 1px 0px 0px;  */
  
    /* Fehér háttér, hogy elkülönüljön az oldal háttérétől */
    background-color: #f9f9f9; 
    
    /* Diszkrét, nagyon világos szürke keret, hogy kiemelje a kártyát */
    border: 1px solid #dddddd; 
    
    /* Enyhe lekerekítés, modern megjelenésért */
    border-radius: 8px; 
    
    /* Belső párnázás, hogy a tartalom ne tapadjon a kerethez */
    padding: 12px; 
    
    /* Átmenet a hover effekthez */
    transition: all 0.3s ease; 
  
  /* x-eltolás | y-eltolás | elmosódás | terjedés | szín (félig átlátszó fekete) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hover effektus: Kiemeli az éppen kiválasztott kártyát */
.product-item:hover {
    /* Kisebb emelkedés (kissé felfelé mozog) */
    transform: translateY(-2px); 
    
    /* Erősebb árnyék a kiemeléshez */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}
.product-list-container { 
      /* 3px távolság oszlopok (vízszintesen) és sorok (függőlegesen) között */
    gap: 3px; 
}

/* MOBIL KÉPERNYŐK KÜLÖN KEZELÉSE  */
/* Alapértelmezett beállítás: mindenhol rejtve */
.show-mobile-only {
    display: none !important;
}
@media (max-width: 768px) {
    .show-mobile-only {
        display: block !important; /* Vagy 'flex', 'inline-block' stb., a tartalom típusától függően */
    }
}

.hide-mobile-only {
    display: block; 
}
/* Mobil nézetben (768px alatt) */
@media (max-width: 768px) {
    /* Elrejtünk mindent, aminek az osztálya tartalmazza ezt a nevet */
    .hide-mobile-only,
    [class*="hide-mobile-only"] {
        display: none !important;
    }
}

/* Full1-top pozíció  */

.fullwidth-container {
    
  /* Szélesség 100%-ra kényszerítése */
    width: 100%;
    
    /* Fontos: A fix sablon szélességek felülírása */
    max-width: 100% !important; 
    
    /* A sablonból örökölt oldalsó padding/margók eltávolítása */
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Opcionális: biztosítja, hogy a belső modulok is a teljes szélességet kitöltsék */
#full1-top-position .moduletable {
    padding: 0;
    margin: 0;
}

/* Mobil szűrő és rendezés gombok távolsága */
@media (max-width: 767px) {
    /* A gombokat tartalmazó konténer igazítása */
    .vm-search-custom-filter, 
    .virtuemart-view.category .filters-row,
    .order-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important; /* Ez ad egy egységes távolságot minden irányban */
        align-items: center !important;
        justify-content: flex-start !important;
        margin-bottom: 15px !important;
    }

    /* Kifejezetten a Filters gombra és a rendezőre */
    #button-filters, 
    .view-filter-button,
    .orderlistcontainer {
        margin-bottom: 5px !important;
        margin-right: 10px !important;
    }
    
    /* Ha a "Rendezés" felirat külön elem, adjunk neki is egy kis helyet */
    .order-list .title {
        display: inline-block !important;
        margin-bottom: 5px !important;
    }
}


/* --- FELÜLÍRÁS NAGY KÉPERNYŐN, HA A PROBLÉMA OTT IS FENNÁLL (KÉT KÁRTYA TÖRIK) --- */
/* Ez megoldja azt a problémát, hogy széles képernyőn a 3. kártya letörik: */
/* Valószínűleg a szülő konténer túl szűk. Ezzel a kártyákat kényszerítjük az egyharmados szélességre. */
.oss-card.col-md-4 {
    /* Az !important gyakran szükséges a kiterjesztés fix beállításainak felülírásához */
    width: 33.3333% !important; 
    float: left !important;
}


/* --- FORDÍTÁS MENTEGETŐZÉS --- */
#translation-disclaimer {
    display: none;
    position: fixed;
    top: 50px; /* Pontosan a zászlók alá */
    right: 10px;
    background: #fff8e1;
    border-right: 5px solid #ffc107; /* Most a jobb oldalon legyen a hangsúly */
    padding: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 10001;
    max-width: 280px;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-disclaimer {
    float: right;
    cursor: pointer;
    font-weight: bold;
    margin-left: 10px;
}

/*------------  Termékcsalád karusszel egyforma magassága  ----------*/
/* --- BIZTONSÁGOS KÁRTYA-EGYENGETÉS (Csak a MixTemplates karusszelre) --- */

/* Csak olyan Owl-stage-re hat, amiben benne van a .la-member kártya */
.owl-carousel:has(.la-member) .owl-stage {
    display: flex !important;
}

/* Csak olyan Owl-itemre hat, aminek a belsejében .la-member van */
.owl-carousel .owl-item:has(.la-member) {
    display: flex !important;
    float: none !important;
}

/* A belső láncolat nyújtása (ez már eleve biztonságos a specifikus osztályok miatt) */
.owl-item .la-member,
.owl-item .single-course,
.owl-item .mx-courses-3,
.owl-item .course-item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

/* A szöveges rész kitölti az űrt, lefele tolva a láblécet */
.owl-item .course-item .course-body {
    flex-grow: 1 !important;
}
/*---------------------------------------------------------------*/
/* Fix fejléc miatti eltolás az összevont csoportok ugrópontjainál */
.custom-matrix-title-wrapper {
    scroll-margin-top: 140px; /* 50px a menünek + 40px kényelmes extra térköz */
}
/*---------------------------------------------------------------*/
/*-------------  TERMÉCSALÁDOK KÁRTYÁK EGYSÉGES MAGASSÁGA -------------*/
/* Biztosítjuk, hogy a kártya belső elemei oszlopba rendeződjenek és kitöltsék a magasságot */
.maincourse365 .course-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* A középső, szöveges rész megkapja az összes szabad helyet, így lefelé tolja a láblécet */
.maincourse365 .course-body {
    flex-grow: 1;
}
/*---------------------------------------------------------------*/