.product_badges .badgeitem-text {
    font-weight: 700; /* A 'bold' számokban megadva sokkal profibb és kontrollálhatóbb */
    font-size: 0.85em; /* Picit kisebb, relatív méretezéssel (jobb, mint a fix pixel) */
    line-height: 1.1; /* Ezzel húzod közelebb egymáshoz a két sort */
    letter-spacing: -0.2px; /* Ezt csak akkor használd, ha a betűk távolságát is szűkíteni akarod, nem csak a sorközt */
}

/* Kizárólag asztali nézetben */
@media (min-width: 992px) {
    /* 1. A konténernek megadjuk a flex irányt */
    div.banner-items-content.container {
        display: flex !important;
        justify-content: flex-end !important; /* Jobbra tolja a tartalmat */
        max-width: 1200px !important; /* Vagy amennyi a sablonod szélessége */
    }

    /* 2. A belső dobozt "összezsugorítjuk" és jobbra kényszerítjük */
    div.banner-items-content-inner {
        width: fit-content !important; /* KRITIKUS: ne legyen 100% széles! */
        min-width: 200px; /* Hogy ne legyen túl kicsi a doboz */
        margin-left: auto !important; /* Balról tolja el magát maximumra */
        margin-right: 0 !important;
        text-align: right !important; /* A szöveg is jobbra nézzen */
    }
}

/* 1. Alap kinézet: Csak a fő kártyának adunk hátteret (Kékeszöld) */
.napdog .category-card {
    background-color: #7ccdc9 !important;
    border-color: #7ccdc9 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

/* A belső elemek átlátszóak lesznek, a szöveg pedig FEHÉR */
.napdog .category-card .category-card-body,
.napdog .category-card .category-card-link {
    background-color: transparent !important; 
    background-image: none !important;
    color: #ffffff !important; /* Alap felirat színe */
    transition: color 0.2s ease !important; /* Finom színátmenet a szövegnek is */
}

/* 2. A szöveg viselkedése: Sortörés, kötőjelezés és reszponzív méret */
.napdog .category-card-link {
    white-space: normal !important; 
    word-break: break-word !important; 
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    
    font-size: clamp(12px, 3.5vw, 16px) !important; 
    line-height: 1.3 !important; 
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 10px 5px !important;
    box-sizing: border-box !important;
}

/* 3. Hover állapot: A háttér megváltozik (Homokszín) */
.napdog .category-card:hover {
    background-color: #dcc698 !important;
    border-color: #dcc698 !important;
	
}

/* 4. Hover szövegszín: Amikor a KÁRTYÁRA viszed az egeret, a LINK színe is változzon (Barna) */
.napdog .category-card:hover .category-card-body,
.napdog .category-card:hover .category-card-link {
    color: #654719 !important;
}
/* --- KATEGÓRIA KÁRTYÁK (Tördelés kötőjellel és szinkronizált hover) --- */

/* 1. Alap kinézet: Csak a fő kártyának adunk hátteret */
/* 1. Alapállapot: A kártya egésze kontrollálja a színeket */
.kutyaknak .category-card {
    background-color: #258881 !important;
    border: 1px solid #258881 !important; /* Keret és háttér egyszerre */
    transition: all 0.2s ease-in-out !important;
    overflow: hidden;
}

/* 2. A belső elemek alapbeállításai (Fehér szöveg) */
.kutyaknak .category-card .category-card-body,
.kutyaknak .category-card .category-card-link {
    background: transparent !important;
    color: #d6c294 !important;
    text-decoration: none !important;
}

/* 3. Szövegformázás és tördelés */
.kutyaknak .category-card-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 10px 5px !important;
    box-sizing: border-box !important;
    
    white-space: normal !important;
    word-break: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    
    font-size: clamp(12px, 3.5vw, 16px) !important;
    line-height: 1.3 !important;
}

/* 4. HOVER ÁLLAPOT: Itt történik a varázslat */
/* Amikor a kártyára húzod az egeret, a keret és a háttér is sárga lesz */
.kutyaknak .category-card:hover {
    background-color: #d6c294 !important;
    border-color: #d6c294 !important;
}

/* Amikor a kártya hover állapotban van, a benne lévő link színe fekete lesz */
.kutyaknak .category-card:hover .category-card-link {
    color: #258881 !important;
}

/* Mobil menü információs linkek stílusának felülírása */
.informations-mobile-menu-item .mm-listitem__text {
    color: #258881 !important;
    font-weight: 400 !important;
}
/* Csak akkor érvényes, ha a body-n NINCS ott az ollymolly vagy a sloofie-page osztály */
@media only screen and (min-width: 992px) {
    body:not(.ollymolly):not(.sloofie) h1.page-head-title {
        color: #258881 !important;
        font-weight: 700 !important;
        font-size: 50px !important;
        text-transform: uppercase;
    }
}
/* CSAK ASZTALI NÉZETBEN ÉRVÉNYES STÍLUSOK (992px felett) */
@media (min-width: 992px) {
    .snapshot-list-container .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .snapshot-list-container .product-snapshot.list_div_item {
        border: 2px solid #258881 !important; /* A türkiz keret */
        border-radius: 12px !important;
        padding: 10px !important;
        background-color: #ffffff !important;
        box-sizing: border-box !important;
        float: none !important;
        display: inline-block !important;
        vertical-align: top;
        
        /* Itt maradhat a 4 termék egy sorban elrendezés */
        width: calc(25% - 20px) !important;
        margin: 10px !important;
    }
}
/* 4. EXTRA JAVÍTÁS: Kép ne lógjon ki */
.product-snapshot.list_div_item img {
    max-width: 100% !important;
    height: auto !important;
}
/* 1. TERMÉKKÁRTYÁK ÉS BLOG CÍMEK FIXÁLÁSA (Levágás ellen) */
.product-card-item.product-card-title,
.card-title.content-card-title {
    height: auto !important;          /* Kiütjük a fix 52px-es magasságot */
    min-height: 50px !important;      /* Meghatárózunk egy minimumot az egyvonalban tartáshoz */
    max-height: none !important;      /* Biztosítjuk, hogy ne legyen korlát */
    white-space: normal !important;   /* Engedjük a szöveg tördelését több sorba */
    overflow: visible !important;     /* Ne rejtse el a lelógó részeket */
    display: block !important;        /* Biztosítjuk a blokk elrendezést */
    margin-bottom: 10px !important;
}

/* 2. BETŰMÉRET ÉS SORKÖZ FINOMÍTÁSA */
.product-card-item.product-card-title a,
.card-title.content-card-title a {
    font-size: 18px !important;       /* 16px helyett a 18px szebben mutat */
    line-height: 1.4 !important;      /* A 1.2 túl szűk, a 1.4-nél már nem érnek össze a betűk */
    display: inline-block !important;
    height: auto !important;
}

/* 3. ÖSSZETOLÓDÁS JAVÍTÁSA (Blog kártyák közötti térköz) */
.card-deck.content-card-multiple {
    gap: 10px !important;             /* Modern gap használata a kártyák között */
    display: flex !important;
    justify-content: center;
}

.card.content-card {
    margin-bottom: 20px !important;   /* Hogy mobilon ne ragadjanak össze */
}
/* 1. TERMÉKKÁRTYÁK CÍMEI (Főoldal és kategóriák) */
.product-card-title, 
.product-card-item.product-card-title,
.product-card-item.product-card-title a {
    font-size: 16px !important; /* Itt állítsd, ha még nagyobbat szeretnél */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* 2. BLOG ÉS TARTALOM KÁRTYÁK CÍMEI (Petlife Journal) */
.card-title.content-card-title, 
.card-title.content-card-title a {
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* 3. MODUL FEJLÉCEK (pl. "GAZDIK KEDVENCEI") */
@media only screen and (min-width: 992px) {
    .module-head-title {
        font-size: 28px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin-bottom: 20px !important;
    }
}
/* Termékboxok keretezése és elválasztása */

/* Belső kártya igazítása, hogy ne ütközzön a kerettel */
.product-snapshot.list_div_item .product-card {
    border: none !important;
    background: transparent !important;
}

/* Termékoldali terméknév betűméretének módosítása */
.product-page-product-name {
    font-size: 30px !important;
    font-weight: 700 !important; /* Ha szeretnéd, hogy maradjon/legyen félkövér */
    line-height: 1.4 !important; /* Megfelelő sortávolság a jobb olvashatóságért */
}
/* Blog és tartalom kártyák modernizálása */

.card.content-card {

    border: 1px solid #258881 !important; /* A kért szín */

    border-radius: 12px !important;       /* Lekerekített sarkok a modern megjelenésért */

    overflow: hidden !important;          /* Hogy a kép ne lógjon ki a lekerekítésnél */

    background-color: #fff !important;

    transition: all 0.3s ease-in-out !important; /* Finom átmenet az animációhoz */

    box-shadow: 0 4px 6px rgba(214, 194, 148, 0.1) !important; /* Nagyon halvány árnyék a kért színnel */

}



/* Interakció: amikor az egér a kártya fölé ér (Hover effekt) */

.card.content-card:hover {

    transform: translateY(-8px); /* Kicsit megemelkedik a kártya */

    box-shadow: 0 12px 24px rgba(214, 194, 148, 0.3) !important; /* Erősebb, elegáns árnyék */

    border-color: #258881 !important; /* Hovernél egy árnyalattal sötétebb keret */

}



/* A kártyán belüli szöveges rész távolságának finomítása */

.card-body.content-card-body {

    padding: 20px !important;

}



/* A kártya alján lévő gombok/linkek stílusa, ha szükséges */

.content-card-link {

    text-decoration: none !important;

}
/* Főmenü linkek méretének és vastagságának módosítása */
.header-middle-center .headermenu-list > li > a {
    font-size: 14px !important; /* Itt állíthatod a pixel méretet kedved szerint */
    font-weight: 500 !important; /* 700 a standard bold/félkövér érték */
    letter-spacing: 0.5px;      /* Opcionális: kicsit szellősebbé teszi a betűket */
    transition: all 0.3s ease;  /* Finom átmenet hover esetén */
}

/* Hover állapot (amikor az egér felette van) a konzisztencia miatt */
.header-middle-center .headermenu-list > li > a:hover {
    font-weight: 500 !important;
    opacity: 0.8;
}
/* Kategória menü linkek (bal oldal) méretezése és félkövér stílusa */
#category-nav .category-menu > li > a {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Az ikonok (lefelé nyíl) méretének igazítása, ha szükséges */
#category-nav .category-menu > li > a:after {
    font-size: 14px !important;
}
/* --- ASZTALI PRÉMIUM GALÉRIA (Csak 992px felett) --- */
@media (min-width: 992px) {
    
    /* A konténer szűkítése, hogy ne legyen "arcba mászós" a kép */
    #product-image-container .product-image-row {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center; /* Középre rendezzük a kisebb képeket */
        gap: 30px;
        padding: 20px 0;
    }

    /* A képkeretek méretezése - itt állítjuk "picire" */
    #product-image-container .col-lg-6 {
        flex: 0 0 350px !important; /* Fix, elegáns szélesség */
        max-width: 350px !important;
        padding: 0 !important;
    }

    /* Modern kártya dizájn */
    .product-image-link {
        display: block;
        position: relative;
        border-radius: 15px; /* Lekerekített sarkok */
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #f0f0f0;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Nagyon finom árnyék */
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* Lebegő hatás hover esetén */
    .product-image-link:hover {
        transform: translateY(-8px); /* Kicsit elemelkedik */
        box-shadow: 0 20px 40px rgba(30, 129, 129, 0.15); /* A logód teal színe */
        border-color: #1e8181;
    }

    /* Kép finomítása a kereten belül */
    .product-image-item {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.6s ease !important;
    }

    .product-image-link:hover .product-image-item {
        transform: scale(1.05); /* Enyhe zoom */
    }

    /* ASZIMMETRIA: Minden második kép eltolása lefelé */
    #product-image-container .col-lg-6:nth-child(even) {
        margin-top: 50px;
    }

    /* Dekoratív elem: egy kis "zoom" ikon megjelenítése hoverkor (opcionális) */
    .product-image-link::after {
        content: '+';
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        background: #1e8181;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .product-image-link:hover::after {
        opacity: 1;
    }
}

/* Rövid leírás szövegszínének módosítása feketére */
.product-short-description-row .product-short-description,
.product-short-description-row .product-short-description * {
    color: #000000 !important;
}

/* FIX MARKETING SÁV */
#custom-top-bar {
    background-color: #258881 !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 45px; /* Fix magasság a pontos számításhoz */
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 2147483647 !important; /* Maximális rétegrend */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    font-family: sans-serif;
    transition: top 0.3s;
}

#custom-top-bar .promo-text {
    font-weight: 700;
    font-size: 13px;
    flex: 1;
    text-align: center;
    color: #ffffff !important;
    margin: 0;
}

#custom-top-bar .res-link {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-size: 12px;
    white-space: nowrap;
}

/* iPhone és Mobil optimalizálás */
@media screen and (max-width: 767px) {
    #custom-top-bar {
        height: 55px; /* Mobilon magasabb a két sor miatt */
        flex-direction: column;
        justify-content: center;
        padding: 5px;
    }
    #custom-top-bar .promo-text { font-size: 11px; }
    #custom-top-bar .res-link { font-size: 10px; }
}

/* Alaphelyzetbe állítjuk a body-t, hogy ne legyen fehér csík */
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/*-- 3. KATEGÓRIA KÁRTYÁK (A dobozok a lapon) --- */

.category-card {

    transition: background-color 0.3s ease !important;

}




/* Olly & Molly kategória kártya - Letisztult, tördelt szöveggel */
.ollymolly .category-card {
    background-color: #fed58e !important;
    border-color: #fed58e !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 80px !important; /* Megtartja az eredeti dobozméretet */
    transition: background-color 0.3s ease;
    text-decoration: none !important;
}

/* A belső doboz legyen átlátszó, hogy ne legyen "dupla box" hatás */
.ollymolly .category-card .category-card-body {
    background-color: transparent !important;
    border: none !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* A szöveg formázása */
.ollymolly .category-card .category-card-link {
    background-color: transparent !important;
    color: #000000 !important;
    font-size: clamp(12px, 3.5vw, 16px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    
    /* Okos tördelés */
    white-space: normal !important; /* Megengedjük, hogy a szöveg új sorba lépjen */
    word-break: break-word !important;
	-webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    display: block !important;
}

/* HOVER ÁLLAPOT */
.ollymolly .category-card:hover {
    background-color: #f7b17f !important;
    border-color: #f7b17f !important;
}
/* Mobilos arányos kicsinyítés tördelés nélkül */
/* Stabil, szétesésmentes középre igazítás */

/* --- SLOOFIE PAGE (Alapszín: Kékeszöld, Hover: Korall) --- */
.sloofie-page .category-card, 
.sloofie-page .category-card .category-card-body,
.sloofie-page .category-card .category-card-link {
    background-color: #00b1bb !important;
    background-image: none !important;
    border-color: #00b1bb !important;
    color: #ffffff !important;
}

/* --- SLOOFIE PAGE (Alapszín: Kékeszöld) --- */
.sloofie-page .category-card, 
.sloofie-page .category-card .category-card-body,
.sloofie-page .category-card .category-card-link {
    background-color: #00b1bb !important;
    background-image: none !important;
    border-color: #00b1bb !important;
    color: #ffffff !important; /* Itt állítod be az alap szövegszínt */
}

/* Hover: Csak a háttér és keret változik */
.sloofie-page .category-card:hover, 
.sloofie-page .category-card:hover .category-card-body,
.sloofie-page .category-card:hover .category-card-link {
    background-color: #ffedae !important;
    border-color: #ffedae !important;
    /* Nincs color szabály, így az alap marad érvényben */
}

/* --- SLOOFIE (Alapszín: Halványzöld) --- */
.sloofie .category-card, 
.sloofie .category-card .category-card-body,
.sloofie .category-card .category-card-link {
    background-color: #cbd69c !important;
    background-image: none !important;
    border-color: #cbd69c !important;
    color: #000000 !important; /* Itt állítod be az alap szövegszínt */
}

/* Hover: Csak a háttér és keret változik */
.sloofie .category-card:hover, 
.sloofie .category-card:hover .category-card-body,
.sloofie .category-card:hover .category-card-link {
    background-color: #ffedae !important;
    border-color: #ffedae !important;
    /* Nincs color szabály, így az alap marad érvényben */
}

.category-card-link {
    font-weight: 700 !important;    /* Legyen jó vastag (Bold) */
    font-size: 14px !important;     /* Nagyobb betűméret (alapból kb 14-16 szokott lenni) */
    letter-spacing: 1px !important; /* Kicsit szellősebb, hogy olvasható maradjon */
}
/* Egyedi blog konténer a PetLife Nature stílusában */
/* 1. BLOG SZÖVEG BEÁLLÍTÁSOK */
.blog-slim-content .information-list-item-description p, 
.blog-slim-content .information-list-item-description h1, 
.blog-slim-content .information-list-item-description h2, 
.blog-slim-content .information-list-item-description h3,
.blog-slim-content .information-list-item-description ul {
    max-width: 850px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 15px;
    text-align: left;
}

/* 2. KÉPEK ASZTALI NÉZETBEN */
.blog-slim-content .information-list-item-description img {
    display: block !important;
    width: 100% !important;
    max-width: 850px !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 12px;
    margin: 30px auto !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 3. MOBIL KÉNYSZERÍTÉS ÉS TÖRDELÉS JAVÍTÁS */
@media screen and (max-width: 768px) {
    /* Képek mobil optimalizálása */
    .blog-slim-content .information-list-item-description img {
        width: 90% !important;
        max-width: 400px !important;
        max-height: 220px !important; 
        aspect-ratio: 16 / 9 !important;
        margin: 15px auto !important;
        border-radius: 8px !important;
    }

    /* BLOG CÍMSOROK TÖRDELÉSE: Itt a megoldás a "hasmené-s" típusú hibákra */
    .blog-slim-content .information-list-item-description h1,
    .blog-slim-content .information-list-item-description h2,
    .blog-slim-content .information-list-item-description h3 {
        word-break: keep-all !important;   /* Tilos a szót kettévágni */
        overflow-wrap: break-word !important; 
        hyphens: none !important;          /* Kötőjelezés kikapcsolása */
        white-space: normal !important;
        
        /* Dinamikus méret, hogy ne lógjon le a képernyőről */
        font-size: clamp(18px, 5.5vw, 24px) !important; 
        line-height: 1.2 !important;
    }
}
/* A "Részletek" szöveg eltüntetése a hírkártyákon */
.news-card-footer a.btn-third span {
    font-size: 0 !important;
}

/* Az új "tovább olvasom" szöveg beillesztése */
.news-card-footer a.btn-third span::before {
    content: "Tovább olvasom";
    font-size: 13px; /* Állítsd be a megfelelő méretre */
    text-transform: none !important; /* Hogy ne legyen csupa nagybetű */
    visibility: visible;
}

/* Ikon igazítása, ha elcsúszna */
.news-card-footer a.btn-third svg {
    vertical-align: middle;
}
/* Az eredeti szöveg eltüntetése és az új beillesztése */
.news-all-button a.btn span {
    font-size: 0 !important;
}

.news-all-button a.btn span::before {
    content: "Még több PetLife";
    font-size: 14px; /* Itt állítsd be a kívánt méretet, ha túl kicsi/nagy */
    text-transform: none !important; /* Megakadályozza, hogy a szülő class nagybetűssé tegye */
    visibility: visible;
}

/* Az SVG nyíl pozícionálása, hogy ne csússzon el az új szövegtől */
.news-all-button a.btn svg {
    vertical-align: middle;
    margin-left: 5px;
}
/* Alapértelmezett betűtípus minden szövegnek */
body, p, div, span, li, a {
    font-family: 'Montserrat', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Címsorok és terméknevek - ahol a karakter kell */
h1, h2, h3, h4, h5, h6, .product-name, .category-name {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important; /* Hogy legyen ereje a címeknek */
    text-transform: uppercase; /* Opcionális: Montserrat-nak jól áll a nagybetű */
    letter-spacing: 0.5px; /* Javítja az olvashatóságot */
}

/* Gombok és navigáció */
.btn, .navbar-nav a, .cart-button {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}
/* A szülő konténer kényszerítése középre zárásra */
.subcategory-list.row {
    justify-content: center !important;
    display: flex !important; /* Biztosítjuk, hogy flexbox maradjon */
}

/* Opcionális: Ha mobilon is finomítani akarsz az elrendezésen */
@media (max-width: 767px) {
    .subcategory-list.row {
        justify-content: center !important;
    }
}

/* A kickerimage-row kényszerített középre igazítása */
.row.kickerimage-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center; /* Függőlegesen is középre teszi, ha eltérőek a magasságok */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* Kiütjük a régi vágású float-okat */
}

/* Ha a benne lévő oszlopok (col-...) még mindig balra húznának */
.kickerimage-row [class*="col-"] {
    display: inline-block;
    float: none !important;
    vertical-align: top;
}
/* Shoprenter banner gomb finomhangolása */
/* Alapállapot: Arany háttér, Teal szöveg */
#slick-slide01 .banner-items-button .btn, 
.banner-items-button .btn-primary {
    background-color: #258881 !important;
    color: #d6c294 !important;
    border: none !important;
    
    /* A lekerekítés kigyilkolva - éles sarkok */
    border-radius: 0 !important;
    
    /* Méretezés és tipográfia */
    padding: 10px 24px !important; /* Kicsit növeltem, hogy az éles sarkok ne fojtsák meg a szöveget */
    font-size: 13px !important;
    font-weight: 700 !important; /* Vastagabb betű az olvashatóságért */
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    
    transition: all 0.3s ease-in-out !important;
    display: inline-block !important;

    /* --- EZT A KÉT SORT ADTAM HOZZÁ A JOBBRA IGAZÍTÁSHOZ --- */
    float: right !important; /* Kiszakítja a szövegfolyamból és jobbra csapja */
    margin-left: auto !important; /* Biztonsági háló, ha a szülő doboz véletlenül Flexbox lenne */
}

/* Interaktív állapot: Teal háttér, Arany szöveg (A "fordítva" logika) */
#slick-slide01 .banner-items-button .btn:hover, 
.banner-items-button .btn-primary:hover {
    background-color: #d6c294 !important;
    color: #258881 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Egy minimális mélységet adtam neki, hogy ne legyen "döglött" a gomb */
}
/* CSAK a Legújabb termékek oldalon megjelenő szöveg injektálása */

/* Ezt tedd a Megjelenés > Egyedi CSS részbe */
.kickerimage-row .card-body {
    background-color: #d6c294 !important;
}
/* Footer háttérszín módosítása */
footer {
    background-color: #d6c294 !important;
}

/* KÖTELEZŐ: Szövegszín korrekció, mert a fehér szöveg ezen a színen olvashatatlan */
footer, 
footer a, 
footer .footer-container, 
footer .module-body,
footer h4 {
    color: #333333 !important;
}

/* Közösségi média ikonok (ha sötétíteni kell őket) */
footer .social-icons i {
    color: #333333 !important;
}
/* Hírlevél checkbox szövegének színezése */
/* A hírlevél elfogadó nyilatkozat szövegének színezése */
#newsletter-emailsubscribe .custom-control-label,
#newsletter-emailsubscribe .custom-control-label a {
    color: #000000 !important;
}

/* KÖTELEZŐ JAVÍTÁS: A 'HÍRLEVÉL' cím és az alatta lévő szöveg is fehér még, 
   ami ezen a háttéren amatőr hiba. Így javítsd ki azokat is: */
.newsletter-subscribe-module h2,
.newsletter-subscribe-module p {
    color: #000000 !important;
}
/* Footer oszlopok címei (Elérhetőség, Információk, stb.) */
/* Az összes footer oszlopcím (amit a screenshoton mutattál) */
/* KIZÁRÓLAG ASZTALI GÉPEN (1025px felett) ÉRVÉNYESÜL */
@media only screen and (min-width: 1025px) {

    /* Nagy modulfejlécek */
    h3.module-head-title, 
    .section-module-head-title {
        color: #258881 !important;
        font-weight: 700 !important;
        font-size: 50px !important;
        text-transform: uppercase;
    }

    /* Kisebb div alapú modulfejlécek */
    div.module-head-title {
        color: #258881 !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-transform: uppercase;
    }

}


/* A HÍRLEVÉL főcím és az alatta lévő "Iratkozz fel" szöveg */
.newsletter-subscribe-module h2,
.newsletter-subscribe-module p {
    color: #258881 !important;
}

/* A checkbox melletti teljes szöveg (ha az előző kód nem vitte volna át) */
#newsletter-emailsubscribe .custom-control-label {
    color: #258881 !important;
}
/* --- MOBIL CSÚSZKÁLÁS JAVÍTÁSA (STABILITÁS PATCH) --- */

/* 1. A legbrutálisabb megoldás: letiltjuk a vízszintes görgetést globálisan */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    touch-action: pan-y !important; /* Ez segít a mobil böngészőnek, hogy csak le-fel lehessen húzni */
}

/* 2. A sorok negatív margójának korrigálása mobilon */
/* Ez okozza az esetek 99%-ában, hogy "lötyög" az oldal */
@media screen and (max-width: 768px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* Biztosítjuk, hogy a konténerek se lógjanak túl */
    .container, .container-fluid {
        padding-right: 15px !important;
        padding-left: 15px !important;
        overflow-x: hidden !important;
    }
}

/* 3. A Card-Deck flex javítása */
/* Ha nincs wrap, a gap kinyomja a tartalmat a képernyőről */
.card-deck.content-card-multiple {
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* 4. A Custom Top Bar védelme */
/* Ha a 100% width mellett padding van és a box-sizing nem öröklődik, akkor baj van. */
#custom-top-bar {
    max-width: 100vw !important; /* Viewport szélesség limit */
    overflow: hidden !important; /* Ami kilóg, azt levágjuk */
}

/* 5. Képek védelme */
/* Nehogy egy fix szélességű kép nyomja szét a mobil nézetet */
img {
    max-width: 100% !important;
    height: auto !important;
}
/* ============================================================
   1. GLOBÁLIS MOBIL TIPOGRÁFIA ÉS TÖRDELÉS
   ============================================================ */
@media screen and (max-width: 768px) {
    /* Megakadályozzuk a szavak barbár szétvágását, de engedjük a törést */
    h1, h2, h3, h4, p, a, li, span {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    /* Dinamikus címsor méretezés (clamp: min, preferált, max) */
    h1.page-head-title, .module-head-title, .banner-items-text h2 {
        font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    /* Szöveges tartalom olvashatósága */
    p, .product-description, .blog-slim-content p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }
}

/* ============================================================
   2. MOBIL MENÜ (MMENU) PRÉMIUM MEGJELENÉS
   ============================================================ */

/* ============================================================
   PRÉMIUM MOBIL MENÜ TÖRDELÉS JAVÍTÁS
   ============================================================ */

/* 1. Alap menüpont stílus: Fekete, Bold és intelligens tördelés */
/* ============================================================
   PRÉMIUM MOBIL MEGJELENÉS ÉS TÖRDELÉS JAVÍTÁS (VÉGLEGES)
   ============================================================ */

/* 1. MOBIL MENÜ: Szöveg stílusa és tördelése */
.mm-listitem__text {
    font-weight: 400 !important; /* Vastag (Bold) */
    font-size: 16px !important;
    
    /* SZÖVEGTÖRDELÉS: Soha ne vágjon el szót */
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important; 
    hyphens: none !important;
    
    display: block !important;
    flex: 1 1 auto !important;
    padding-right: 10px !important;
}

/* 2. Menü szerkezet: Gombok és szöveg egymás mellett, nem egymáson */
.mm-listitem {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 44px !important;
}

/* 3. Menü gombok (számláló és nyíl) fixálása a jobb szélen */
.mm-btn_next, .mm-counter {
    flex: 0 0 auto !important;
    position: relative !important;
    right: 0 !important;
    width: auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. BANNER ÉS CÍMSOROK: Automatikus méretcsökkentés (Clamp), hogy kiférjen */
@media screen and (max-width: 768px) {
    /* Javított szelektorok vesszőkkel */
    .banner-items-text h2, 
    .banner-items-text h3, 
    .banner-text h2, 
    .banner-text h3, 
    .module-head-title,
    .kickerimage-title {
        /* Ha nem fér ki a szó, lekicsinyíti 17px-ig, de nem töri el a szót */
        font-size: clamp(17px, 4.8vw, 22px) !important;
        word-break: keep-all !important;
        hyphens: none !important;
        line-height: 1.2 !important;
    }

    /* Kártyák belső margójának csökkentése, hogy több hely maradjon a szövegnek */
    .card-body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}/* ============================================================
   3. FOOTER ÉS SIMPLEPAY LOGÓ OPTIMALIZÁLÁS
   ============================================================ */

/* Konténer igazítása */
#custom-marketing-footer-images {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    padding: 20px 0 !important;
}

/* SimplePay logó méretezése */
.custom-simplepay-logo {
    height: auto !important;
    max-height: 80px !important;
    width: auto !important;
    display: block !important;
}

/* Kör ikonok (pl. garancia, szállítás) mobilon */
@media screen and (max-width: 768px) {
    .footer-image-container img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .custom-simplepay-logo {
        max-height: 60px !important; /* Mobilon kicsit kisebb */
    }
}