.curson_pointer{
	cursor: pointer; /* Ukazovateľ na tlačidlo */
} 

@media (max-width: 1024px) {
	.paddingcontainer {	    
    	padding-right: 5px !important; /* Zlatá farba pre vizuálny kontrast */        
    	padding-left: 5px !important; /* Elegantný červený gradient */    
	}
}

/* Základný štýl pre obsah kategórie */
.cat_grid_item__content {
    border: 2px solid rgba(255, 255, 255, 0.2); /* Jemné biele orámovanie */
    border-radius: 8px; /* Zaoblené rohy */
    transition: all 0.3s ease; /* Jemná animácia pri hover */
    position: relative; /* Potrebné pre zarovnanie obsahu */
}

.cat_grid_item__content:hover {
    border-color: rgba(165, 1, 10, 0.8); /* Vaša červená pri hover */
    box-shadow: 0 8px 15px rgba(165, 1, 10, 0.5); /* Svetelný tieň pri hover */
    transform: scale(1.05); /* Jemné zväčšenie */
}

/* Štýl pre text (titul kategórie) */
.cat_grid_item__title {
    font-size: 16px; /* Veľkosť textu */
    font-weight: bold; /* Tučné písmo */
    color: #fff; /* Biela farba textu */
    background: none; /* Odstránenie pozadia */
    padding: 0; /* Odstránenie paddingu */
    margin: 0; /* Odstránenie marginu */
    line-height: normal; /* Normálna výška riadku */
    /*text-transform: uppercase;*/ /* Text veľkými písmenami (voliteľné) */
}

/* Hover efekt pre text */
.cat_grid_item__title:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Svetlé pozadie pri hover */
    color: #000; /* Čierny text pri hover */
    border-color: #fff; /* Biele orámovanie pri hover */
}

/* Štýl pre tlačidlo (wrapper) */
.cat_design_1 .cat_grid_item__wrapper,
.cat_design_4 .cat_grid_item__wrapper,
.cat_design_6 .cat_grid_item__wrapper,
.cat_design_7 .cat_grid_item__wrapper {
    position: absolute;
    bottom: 20px; /* Posunutie odspodu */
    left: 50%; /* Zarovnanie na stred */
    background: rgba(165, 1, 10, 0.9); /* Červené pozadie */
    padding: 14px 22px; /* Priestor okolo textu */
    border: 2px solid #000; /* Čierny rám */
    border-radius: 8px; /* Zaoblené rohy */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5); /* Jemný tieň */
    transform: translateX(-50%); /* Zarovnanie na stred */
    text-align: center; /* Text zarovnaný na stred */
    min-width: 100px; /* Minimálna šírka tlačidla */
    line-height: 1.5; /* Výška riadku */
    transition: all 0.3s ease; /* Jemný hover efekt */
    cursor: pointer; /* Ukazovateľ na tlačidlo */
}

/* Hover efekt pre tlačidlo */
.cat_design_1 .cat_grid_item__wrapper:hover,
.cat_design_4 .cat_grid_item__wrapper:hover,
.cat_design_6 .cat_grid_item__wrapper:hover,
.cat_design_7 .cat_grid_item__wrapper:hover {
    background: #fff; /* Biele pozadie pri hover */
    color: rgba(165, 1, 10, 0.9); /* Červený text pri hover */
    border-color: rgba(165, 1, 10, 0.9); /* Červený rám pri hover */
    box-shadow: 3px 3px 12px rgba(165, 1, 10, 0.7); /* Zvýraznený tieň */
}


/* Kontajner záložiek */
.tab_se_header {
    background-color: #fff; /* Biele pozadie pre celý kontajner */
    padding: 5px; /* Priestor okolo záložiek */
    border-radius: 10px; /* Jemné zaoblenie rohov */
    overflow-x: scroll; /* Povolenie horizontálneho posúvania */
    scrollbar-width: thick; /* Pre Firefox */
    scrollbar-color: rgba(165, 1, 10, 0.9) rgba(255, 255, 255, 0.5); /* Farba pre Firefox */
    -webkit-overflow-scrolling: touch; /* Plynulé posúvanie na dotykových zariadeniach */
}

.tab_se_header::-webkit-scrollbar {
    height: 16px; /* Výška posuvníka */
    background: rgba(250, 250, 250, 0.3); /* Pozadie dráhy posúvača */
}


.tab_se_header::-webkit-scrollbar-thumb {
    background: rgba(165, 1, 10, 0.9); /* Červený posuvník */
    border-radius: 8px; /* Okrúhle hrany */
    border: 3px solid rgba(255, 255, 255, 0.5); /* Svetlé ohraničenie */
   /* transition: background 0.3s ease, transform 0.3s ease; *//* Efekt pri interakcii */
}

.tab_se_header::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Svetlošedé pozadie dráhy */
    border-radius: 6px; /* Okrúhle rohy dráhy */
}

/* Záložky */
.tab_cat_title {
    display: flex; /* Rovnanie záložiek do riadku */
    gap: 0px; /* Medzery medzi záložkami */
    list-style: none; /* Odstránenie odrážok */
    margin: 0;
    padding: 0;
}

.tab_cat_title li a {
    display: inline-block;
    padding: 10px 20px !important; /* Priestor okolo textu */
    font-size: 16px; /* Veľkosť textu */
    font-weight: bold !important; /* Tučné písmo */
    color: #fff !important; /* Biela farba textu */
    background: #a5010a; /* Červené pozadie */
    border: none; /* Bez rámu */
    border-radius: 5px; /* Jemné zaoblenie */
    text-align: center;
    text-decoration: none; /* Odstránenie podčiarknutia */
    white-space: nowrap; /* Zabránenie zalamovaniu textu */
    transition: all 0.3s ease !important; /* Animácia pri hover */
    opacity: 1 !important;
}

/* Aktívna záložka */
.tab_cat_title li a.tt_active {
    background: #fff; /* Biele pozadie */
    color: #a5010a !important; /* Červený text */
    border: 2px solid #a5010a; /* Červený rám */
}

/* Pseudo trieda :focus */
.tab_cat_title li a:focus {
    background: #fff; /* Biele pozadie */
    color: #a5010a !important; /* Červený text */
    border: 2px solid #a5010a;
}

/* Hover efekt pre záložky */
.tab_cat_title li a:hover {
    background: rgba(165, 1, 10, 0.9); /* Tmavšie červené pozadie pri hover */
    color: #fff; /* Biela farba textu */
}

/* Medzi záložkami (kontajner pozadia) */
.tab_cat_title li {
    background-color: #fff !important; /* Biele pozadie medzi záložkami */
    padding: 5px; /* Priestor okolo záložky */
    border-radius: 10px; /* Zaoblenie pre medzery */
}

/* Špecifické pravidlá pre mobilné zariadenia */
@media (max-width: 768px) {
    /* Hover efekt na mobiloch vypnutý alebo obmedzený */
    .tab_cat_title li a:hover {
        background: none; /* Odstránenie hover pozadia */
        color: #a5010a !important; /* Zachovanie pôvodnej farby */
        border: 2px solid #a5010a;
    }

    /* Aktívna záložka má prednosť */
    .tab_cat_title li a:active {
        background: #fff; /* Biele pozadie */
        color: #a5010a !important; /* Červený text */
        border: 2px solid #a5010a;
    }

    .tab_cat_title li a:focus {
        background: #fff; /* Biele pozadie */
        color: #a5010a !important; /* Červený text */
        border: 2px solid #a5010a;
    }
    .tab_se_header {
        overflow-x: scroll;
        scrollbar-width: thin; /* Tenký posuvník pre mobilné zariadenia */
    }

    .tab_se_header::-webkit-scrollbar {
        height: 8px; /* Menšia výška pre mobilné zariadenia */
    }

    .tab_se_header::-webkit-scrollbar-thumb {
        background: rgba(165, 1, 10, 0.8); /* Jemne svetlejšia farba */
    }
}



.tab_se_header::-webkit-scrollbar-thumb:hover {
    background: rgba(165, 1, 10, 1); /* Svetlejšia červená pri hover */
    transform: scale(1.2); /* Zväčšenie posuvníka pri hover */
}



.kalles-section-moje {
    position: relative;
    padding: 0px;
    margin-bottom: 20px; /* Priestor medzi sekciami */
    border-left: 4px solid #a5010a; /* Červený rám len naľavo */
    border-bottom: 2px solid #a5010a; /* Červený rám len naspodu */
    border-radius: 8px; /* Jemné zaoblenie */
    background-color: #fff; /* Svetlé pozadie pre kontrast */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Jemný tieň pre hĺbku */
    transition: transform 0.3s ease; /* Animácia pri hover */
}

.kalles-section-moje:hover {
    transform: translateY(-5px); /* Jemný pohyb nahor pri hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Zvýraznený tieň pri hover */
}

.container-moje{
    padding-right: 7px;
    padding-left: 7px;
}
/* Štýl pre tlačidlo */
.button_styled {
    display: inline-block;
    padding: 12px 20px; /* Vnútorné okraje */
    font-size: 16px; /* Veľkosť textu */
    font-weight: bold; /* Tučné písmo */
    color: #fff; /* Biela farba textu */
    background: #a5010a; /* Červené pozadie */
    border: 2px solid #a5010a; /* Červený rám */
    border-radius: 5px; /* Jemné zaoblenie rohov */
    /*text-transform: uppercase;*/ /* Veľké písmená */
    text-align: center; /* Text na stred */
    text-decoration: none; /* Bez podčiarknutia */
    transition: all 0.3s ease; /* Animácia pri hover */
}

/* Hover efekt */
.button_styled:hover {
    background: #fff; /* Biele pozadie pri hover */
    color: #a5010a; /* Červený text pri hover */
    border-color: #a5010a; /* Červený rám */
    box-shadow: 0 4px 8px rgba(165, 1, 10, 0.5); /* Jemný tieň pri hover */
    transform: translateY(-3px); /* Pohyb nahor pri hover */
}

/* Aktívny stav (pri kliknutí) */
.button_styled:active {
    background: #a5010a; /* Červené pozadie */
    color: #fff; /* Biela farba textu */
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2); /* Vnútorný tieň */
    transform: translateY(2px); /* Jemné zatlačenie */
}

/* Prispôsobenie pre mobilné zariadenia */
@media (max-width: 768px) {
    .button_styled {
        font-size: 14px; /* Menší text na mobiloch */
        padding: 10px 15px; /* Menšie vnútorné okraje */
    }
}

/* Štýl pre tlačidlo v čiernej */
.button_styled_black {
    display: inline-block;
    padding: 12px 24px; /* Vyvážené vnútorné okraje */
    font-size: 16px; /* Veľkosť textu */
    font-weight: bold; /* Tučné písmo */
    color: #fff; /* Biela farba textu */
    background: linear-gradient(135deg, #a5010a 0%, #800808 100%); /* Elegantný červený gradient */
    border: 2px solid #000; /* Čierny rám */
    border-radius: 4px; /* Jemné zaoblenie rohov */
    text-align: center; /* Text na stred */
    text-decoration: none; /* Bez podčiarknutia */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Vonkajší a vnútorný tieň */
    transition: all 0.3s ease; /* Plynulý prechod pri hover */
    cursor: pointer; /* Ukazovateľ na tlačidlo */
}

/* Štýl pre prefix (Všetky produkty:) */
.button_styled_black .button-prefix {
    font-weight: normal; /* Normálne písmo pre prefix */
    color: #fff; /* Biela farba */
   /* opacity: 0.8;*/ /* Jemné zvýraznenie */
    margin-right: 5px; /* Medzera medzi prefixom a kategóriou */
}

/* Štýl pre kategóriu (Kuchynské nože) */
.button_styled_black .button-category {
    font-weight: bold; /* Tučné písmo pre kategóriu */
    color: #fdff02 ; /* Zlatá farba pre vizuálny kontrast */
    text-transform: uppercase; /* Veľké písmená pre výraznosť */
    transition: color 0.3s ease; /* Plynulá zmena farby pri hover */
}

/* Hover efekt */
.button_styled_black:hover {
    background: linear-gradient(135deg, #d81919 0%, #a5010a 100%); /* Svetlejší červený gradient pri hover */
    color: #fff; /* Zachovanie bieleho textu */
    border-color: #a5010a; /* Červený rám */
    box-shadow: 0 6px 12px rgba(165, 1, 10, 0.4); /* Zvýraznený tieň pri hover */
    transform: translateY(-3px); /* Jemný zdvih pri hover */
}

/* Hover efekt na kategóriu */
.button_styled_black:hover .button-category {
    color: #fff; /* Zmena farby kategórie na bielu pri hover */
}

/* Aktívny stav (pri kliknutí) */
.button_styled_black:active {
    background: linear-gradient(135deg, #800808 0%, #a5010a 100%); /* Tmavší gradient pri kliknutí */
    color: #fff; /* Zachovanie bieleho textu */
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.5); /* Silný vnútorný tieň */
    transform: translateY(2px); /* Jemné zatlačenie */
}

/* Prispôsobenie pre mobilné zariadenia */
@media (max-width: 768px) {
    .button_styled_black {
        font-size: 14px; /* Menší text na mobiloch */
        padding: 10px 18px; /* Menšie vnútorné okraje */
    }
}

.tab_se_header.active {
    cursor: grabbing; /* Zmení kurzor na symbol uchopenia */
    user-select: none; /* Zamedzí označeniu textu počas ťahania */
}


.text-with-shadow {
    /*font-size: 1.2rem; *//* Veľkosť textu, upravte podľa potreby */
    color: black; /* Základná farba textu */
    text-shadow: 2px 2px 5px rgba(165, 1, 10, 0.8); /* Červený tieň */
    font-weight: bold; /* Zvýraznený text */
}

/* Voliteľné zvýraznenie pri hover */
.text-with-shadow:hover {
    text-shadow: 3px 3px 7px rgba(165, 1, 10, 1); /* Jasnejší tieň pri hover */
    color: #a5010a; /* Zmena farby textu na červenú */
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

.elegant-text {
    font-size: 1.7rem; /* Väčší text pre elegantný vzhľad */
    color: #333; /* Jemná základná farba textu */
    font-weight: 600; /* Polotučné písmo pre sofistikovaný vzhľad */
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3), 0px -1px 1px rgba(255, 255, 255, 0.4); /* Jemný tieň hore aj dole */
    position: relative; /* Potrebné pre pseudo-element */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Jemný prechod na hover */
}
/* Prispôsobenie pre mobilné zariadenia */
@media (max-width: 768px) {
    .elegant-text {
        font-size: 1.1rem;
    }
}


.elegant-text:hover {
    color: #a5010a; /* Zvýraznenie farby textu na červenú */
    text-shadow: 0px 6px 10px rgba(165, 1, 10, 0.8), 0px -2px 2px rgba(255, 255, 255, 0.5); /* Zintenzívnenie tieňa */
}

/* Jemná linka pod textom ako zvýraznenie */
.elegant-text::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Umiestnenie linky tesne pod textom */
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(165, 1, 10, 0.7), rgba(255, 0, 0, 0.3));
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.elegant-text:hover::after {
    opacity: 1;
    transform: scaleX(1); /* Pri hover sa linka rozvinie */
}