/* Celoplošný obal nad celým obsahom */
.figma-full-width-wrapper {
    width: 100% !important;
    max-width: none !important; /* Zrušené obmedzenie */
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
    padding: 20px 128px !important; /* Pridaných 128px na boky */
    background-color: #ffffff !important;
    border-bottom: 1px solid #eee;
    box-sizing: border-box !important;
}


.figma-top-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important; /* Rozťahovanie od kraja po kraj */
    gap: 16px !important;
    max-width: none !important; /* Musí byť none, aby poslúchal padding rodiča */
    width: 100% !important;
}

/* CategoryBox */
.figma-card {
    flex: 1 1 200px !important;
    height: 158px !important;
    background: #FFFFFF !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 15px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    border: 1px solid #eaeaea !important;
    transition: transform 0.2s ease;
}

.figma-card:hover {
    transform: translateY(-3px);
    border-color: #ccc !important;
}

.figma-card-img {
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
}

.figma-card-img img {
    max-height: 100% !important;
    width: auto !important;
}

.figma-card-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #14141F !important;
    text-align: center !important;
    margin-top: 10px !important;
    line-height: 1.2 !important;
}

/* SIDEBAR STYLING */
.figma-sidebar-nav {
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    border: 1px solid #eee;
    overflow: hidden;
}

.figma-sidebar-heading {
    padding: 12px 15px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    background: #eee !important;
    margin: 0 !important;
    text-transform: uppercase;
}

.figma-sidebar-nav ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.figma-sidebar-nav li a {
    display: block !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid #ebebeb !important;
    color: #333 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.figma-sidebar-nav li a:hover {
    background: #fff !important;
    color: #000 !important;
    padding-left: 20px !important;
}

/* Kontajner pre horný riadok s ikonami */
.category-header-grid {
    display: grid;
    /* Toto zabezpečí, že sa stĺpce roztiahnu rovnomerne na celú šírku */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px; /* Medzera medzi ikonami */
    width: 100%; /* Kľúčové pre roztiahnutie */
    margin-bottom: 30px;
}

/* Jednotlivé boxy kategórií */
.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee; /* Prispôsob podľa dizajnu */
    width: 100%; /* Aby box vyplnil svoj pridelený grid priestor */
}

.category-top {
    display: none !important;
}

/* Pridanie marginu len pre stránku kategórie */
.type-category .content-wrapper-in {
    margin-left: 128px;
    margin-right: 128px;
}

.category-content-wrapper {
    margin-left: 48px !important;
}

.listItemsTotal {
    display: none !important;
}



/* Úprava pre mobilné zariadenia (ak chcete iný margin) */
@media only screen and (max-width: 767px) {
    .type-category .content-wrapper-in {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (max-width: 1024px) {
    .category-header-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 ikony v dvoch riadkoch na tablete */
    }
}

@media (max-width: 600px) {
    .category-header-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 ikony na mobiloch */
    }
}

@media (min-width: 1200px) {
    /* 1. Kontajner - povieme mu, nech produkty rozptýli od kraja po kraj */
    #content .products-block {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important; /* Toto roztiahne produkty k okrajom */
        gap: 20px 15px !important; /* Prvá hodnota je medzera pod sebou, druhá (0) sa ignoruje kvôli space-between */
        margin: 0 !important;
        width: 100% !important;
    }

    /* 2. Produkt - trochu mu uberieme z 25%, aby vznikla rezerva na ten "gap" */
    #content .products-block .product {
        flex: 0 0 23.5% !important; /* 23.5% nechá cca 2% miesta na medzery medzi 4 kusmi */
        max-width: 23.5% !important;
        width: 23.5% !important;
        padding: 0 !important; /* Padding zrušíme, o medzery sa postará space-between */
        box-sizing: border-box !important;
    }

    /* 3. Vnútro boxu - ostáva na 100% šírky svojho stĺpca */
    #content .products-block .product .p-in {
        width: 100% !important;
        margin: 0 !important;
        height: 100% !important;
    }
}

/* 1. Resetujeme kontajner, aby sa produkty správne radili */
#content .products-block {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

/* 2. Nastavíme šírku stĺpca na 25% (pre 4 produkty v riadku) */
#content .products-block .product {
    flex: 0 0 24% !important;
    max-width: 24% !important;
    width: 24% !important;
    padding: 10px !important; /* Medzera medzi boxami */
    box-sizing: border-box !important;
}

/* 3. KĽÚČOVÝ KROK: Roztiahneme samotný biely box produktu na 100% šírky stĺpca */
#content .products-block .product > .p,
#content .products-block .product .p-in {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important; /* Toto zruší tie úzke rezance */
    margin: 0 !important;
    display: block !important;
}

/* 4. Oprava obrázkov, aby neboli rozmazané alebo malé */
#content .products-block .product .p-image {
    width: 100% !important;
}

#content .products-block .product .p-image img {
    max-width: 100% !important;
    height: auto !important;
}

.goToTop,
.pagination__list {
    display: none !important;
}


/*test*/
.loadMore__button.loadMore__button--products {
    display: flex !important;
    flex-direction: row !important; /* Vynúti prvky vedľa seba */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    /* Fixné rozmery z Figmy */
    width: 161px !important;
    height: 34px !important;
    padding: 0 10px !important; /* Zmenšíme padding, aby sa text nezalamoval */

    /* Textový styling */
    white-space: nowrap !important; /* ZAKÁŽE lomenie textu do dvoch riadkov */
    line-height: 34px !important; /* Vycentruje text vertikálne na výšku buttonu */
    font-size: 11px !important; /* Ak je text "NAČÍTAŤ 12 ĎALŠÍCH" moc dlhý, mierne ho zmenšíme */

    background: transparent !important;
    border: 1px solid #CD0E1D !important;
    border-radius: 999px !important;
    color: #14141F !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Odstránenie pôvodnej Shoptet šípky, ak tam straší */
.loadMore__button.loadMore__button--products::after {
    display: none !important;
}

/* Tvoja nová tenká šípka z Figmy */
.loadMore__button.loadMore__button--products::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #14141F !important;

    /* Tenšia verzia šípky */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
/*koniec test*/

/* 1. Nastavenie hlavného obalu, aby dovolil prvkom pod seba skočiť */
.listingControls {
    display: flex !important;
    flex-direction: column !important; /* Vynúti ukladanie pod seba */
    align-items: center !important;    /* Vycentruje všetko na stred */
    width: 100% !important;
    gap: 20px !important;              /* Rozostupy medzi prvkami */
}

/* 2. Samotný obal buttonu "Načítať ďalšie" */
.loadMore {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    order: 1 !important; /* Chceme ho ako prvý pod produktmi */
}

/* 3. Stránkovanie (pagination) pod buttonom */
.pagination {
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 4. Celkový počet položiek a tlačidlo "Hore" */
.itemsTotal, .goToTop {
    order: 3 !important;
    text-align: center !important;
}

/* 5. Fix pre tvoj konkrétny button (ak by mu Shoptet stále dával float) */
.loadMore__button.loadMore__button--products {
    float: none !important;
    margin: 0 auto !important;
}

/* ============================================================
   MOBILNÉ ŠTÝLY (max-width: 767px)
   Desktop sa nedotýkame — všetko nižšie platí len pre mobil
   ============================================================ */
@media only screen and (max-width: 767px) {

    .type-category .overall-wrapper {
        padding-top: 0 !important;
    }

    /* --- Horný wrapper kategórií --- */
    .figma-full-width-wrapper {
        padding: 12px 12px !important;
        margin-bottom: 16px !important;
    }

    /* --- Kategórie: 2 stĺpce, wrap --- */
    .figma-top-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }

    .figma-card {
        flex: 0 0 calc(50% - 5px) !important;
        width: calc(50% - 5px) !important;
        height: auto !important;
        min-height: 120px !important;
        padding: 12px 8px !important;
    }

    .figma-card-img {
        height: 60px !important;
    }

    .figma-card-title {
        font-size: 11px !important;
        margin-top: 8px !important;
    }

    /* --- Sidebar skrytý na mobile --- */
    .figma-sidebar-nav {
        display: none !important;
    }

    /* --- Content wrapper bez veľkých marginov --- */
    .type-category .content-wrapper-in {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .category-content-wrapper {
        margin-left: 0 !important;
    }

    /* --- Produktová mriežka: 2 produkty vedľa seba --- */
    #content .products-block {
        justify-content: space-between !important;
        gap: 10px 0 !important;
    }

    #content .products-block .product {
        flex: 0 0 49% !important;
        max-width: 49% !important;
        width: 49% !important;
        padding: 5px !important;
    }

    #content .products-block .product > .p,
    #content .products-block .product .p-in {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Load more button --- */
    .loadMore__button.loadMore__button--products {
        width: 145px !important;
        font-size: 10px !important;
    }

    /* --- Bannery pod sebou na mobile --- */
    .custom-hero-banners {
        flex-direction: column !important;
    }

    .custom-hero-banner {
        width: 100% !important;
        min-height: 180px !important;
    }

    .container.breadcrumbs-wrapper {
        display: none !important;
    }

    .btn.btn-default.unveil-button {
        background-color: #CD0E1D !important;
        border-color: #CD0E1D !important;
        border-radius: 999px !important;
    }
}