/* =========================================================================
   Category page layout (HelperCategoryLayout)
   - Kratek viden opis -> strukturirane podkategorije -> izdelki -> SEO opis
   - Desktop: grid podkategorij; Mobile: horizontalni scroll-snap carousel
   - CLS-safe: slike imajo rezerviran prostor (aspect-ratio + width/height)
   ========================================================================= */

/* ---- Glava kategorije: naslov + kratek opis ---- */
.cat-head {
    margin: 24px 0 14px;
}



.cat-head__title {
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 10px;
}

.cat-head__intro {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
    max-width: 920px;
    margin: 0;
}



/* ---- Podkategorije: kartice ---- */
.subcat-carousel {
    position: relative;
    margin: 6px 0 28px;
}

.subcat-carousel__track {
    display: grid;
    /* auto-FILL (ne auto-fit): ohrani prazne stolpce, da se ob malo podkategorijah
       kartice NE raztegnejo cez pol zaslona. Fiksen min -> kompaktne, enakomerne
       kartice; ~6-8 v vrsti glede na sirino, ostale se prelomijo v novo vrsto. */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.subcat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--color-gray-line, #e4e4e4);
    border-radius: 10px;
    text-align: center;
    color: #222;
    text-decoration: none;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.subcat-card:hover,
.subcat-card:focus {
    box-shadow: var(--box-shadow, 0 6px 17px 0 rgba(0, 0, 0, .1));
    border-color: var(--color-primary, #6ea900);
    transform: translateY(-2px);
    color: #222;
    text-decoration: none;
}

.subcat-card.is-active {
    border-color: var(--color-primary, #6ea900);
    box-shadow: inset 0 0 0 1px var(--color-primary, #6ea900);
}

.subcat-card__imgbox {
    width: 100%;
    /* Fiksna (rezervirana) visina -> manjse kartice + CLS-safe (brez layout shifta).
       Pod 1200px se zmanjsa na 70px (glej @media spodaj) — narocnikova specifikacija. */
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Slika polni rezerviran okvir -> brez layout shifta (CLS) */
.subcat-card__imgbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.subcat-card__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #222;
}

/* Narocnikova spec: nizji slikovni okvir na ozjih zaslonih (<=1200px). */
@media (max-width: 1200px) {
    .subcat-card__imgbox {
        height: 70px;
    }
}

/* Dots se prikažejo samo na mobilnem carouselu (glej @media spodaj) */
.subcat-carousel__dots {
    display: none;
}

/* ---- Daljša SEO vsebina na dnu strani (vedno v HTML-ju) ---- */
.cat-seo {
    margin: 10px 0 40px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.cat-seo__body {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    max-width: 100%;
    overflow-wrap: break-word;
}

.cat-seo__body h1,
.cat-seo__body h2,
.cat-seo__body h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 18px 0 8px;
}

.cat-seo__body p {
    margin: 0 0 10px;
}

/* WYSIWYG vsebina ne sme razbiti layouta (slike, tabele, iframe, pre) */
.cat-seo__body img,
.cat-seo__body iframe,
.cat-seo__body video,
.cat-seo__body embed {
    max-width: 100%;
    height: auto;
}

.cat-seo__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.cat-seo__body pre {
    white-space: pre-wrap;
    word-break: break-word;
}

.cat-seo__toggle {
    display: none;
}

/* Ikona v gumbu mora biti majhna (sicer SVG zavzame polno velikost in razbije layout) */
.cat-seo__toggle img {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* =========================================================================
   MOBILE  (<= 990px) - poravnano z mobile.css (sidebar collapse @ 990px)
   ========================================================================= */
@media (max-width: 990px) {

    .cat-head {
        margin: 14px 0 10px;
    }

    .cat-head__title {
        font-size: 22px;
        margin-bottom: 8px;
    }

    /* Kratek opis: omejen na ~4 vrstice, da izdelkov ne potisne predaleč navzdol */
    .cat-head__intro {
        font-size: 13px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Carousel: horizontalni scroll s scroll-snap + delno vidna naslednja kartica */
    .subcat-carousel {
        margin: 6px 0 16px;
    }

    .subcat-carousel__track {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .subcat-carousel__track::-webkit-scrollbar {
        display: none;
    }

    .subcat-card {
        scroll-snap-align: start;
        flex: 0 0 39%;          /* ~2.5 kartice -> naslednja je delno vidna (UX hint) */
        min-width: 39%;
        padding: 12px 8px;
    }

    .subcat-card__imgbox {
        /* aspect-ratio: 1 / 1; */
    }

    .subcat-card__title {
        font-size: 12.5px;
    }

    /* Dots indikator */
    .subcat-carousel__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
    }

    .subcat-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #cfcfcf;
        cursor: pointer;
        transition: background .2s ease, width .2s ease;
    }

    .subcat-dot.is-active {
        width: 18px;
        border-radius: 4px;
        background: var(--color-primary, #6ea900);
    }

    /* SEO vsebina: prisotna v HTML-ju, na mobilnem privzeto delno skrita (accordion) */
    .cat-seo {
        margin-bottom: 24px;
    }

    .cat-seo__body {
        position: relative;
        max-height: 220px;
        overflow: hidden;
    }

    .cat-seo__body::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 70px;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
    }

    .cat-seo.is-open .cat-seo__body {
        max-height: none;
    }

    .cat-seo.is-open .cat-seo__body::after {
        display: none;
    }

    .cat-seo__toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        padding: 8px 14px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        background: #fff;
        color: #212529;
        font-size: 13px;
        cursor: pointer;
    }
}

/* Tablice: malo več kartic vidnih hkrati */
@media (max-width: 990px) and (min-width: 600px) {
    .subcat-card {
        flex: 0 0 26%;
        min-width: 26%;
    }
}

/* =========================================================================
   TABLICA (768–1199px): 3 izdelki v vrsti namesto 4.
   Privzeto je col-md-3 = 4 v vrsti (Bootstrap md ≥768px), kar je na tablici
   pretesno. Velja SAMO na novi kategorijski strani (ta CSS se naloži le tam),
   pod 768px ostane col-6 (2 v vrsti), nad 1199px ostane 4 v vrsti.
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
    .products_page .col-md-3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* =========================================================================
   "Vrstni red" / "Št. prikazov" kontrole
   Privzeto ima .define_products_view width:40% + margin-top:-49px (poleg naslova).
   Na ožjih zaslonih je 40% pretesno -> label in spustni meni se prelomita v novo
   vrsto. Popravek: label+meni naj ostaneta skupaj, na tablici polna širina pod naslovom.
   ========================================================================= */
.define_products_view .input-group {
    flex-wrap: nowrap;
}

.define_products_view .input-group-text {
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .define_products_view {
        width: 100%;
        margin-top: 12px;
    }
}

/* =========================================================================
   TABLICA / VELIKI TELEFON V LANDSCAPE (768–1024px): kompakten header.
   Privzeto je v tem obsegu desktop kontaktna vrstica skrita (<=990px), mobilne
   ikone pa se pokazejo sele <=767px -> desna stran glave je prazna. Poleg tega
   je "Vse kategorije" gumb position:absolute z margin-top:-50px in se prekriva
   z logotipom. Tu vsilimo kompakten mobilni header (velja samo na tej strani).
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Skrij (morebitno) stisnjeno desktop kontaktno vrstico */
    .header-info {
        display: none;
    }

    /* Pokazi kompaktne ikone (uporabnik + kosarica) na desni */
    .mobile-header-info {
        display: block;
        margin-top: 10px;
        text-align: right;
    }

    .mobile-header-info a img {
        filter: invert(1);
        width: 20px;
    }

    .mobile-header-info li {
        display: inline-block;
        margin-left: 5px;
    }

    /* "Vse kategorije" gumb: majhen kvadrat V VRSTICI (ne absolute -> brez
       prekrivanja logotipa), samo ikona brez besedila. */
    .menu {
        width: 6rem;
        height: 50px;
        position: relative;
        margin-top: 0;
    }

    .menu .menu-link {
        height: 5.5rem;
        padding: 1rem;
    }

    .menu .menu-link span {
        display: none;
    }

    .menu-section-right {
        width: calc(100% - 6rem);
    }

    .header .wrapper,
    .menu-bar .wrapper {
        padding: 0;
    }

    .menu-bar {
        position: relative;
    }
}

/* =========================================================================
   FILTRI NA TABLICI (768–1024px): pokazi "Filtracija" gumb + off-canvas panel.
   Desktop sidebar s filtri je skrit <=990px, mobilni gumb pa se je kazal sele
   <=767px -> vmes (do 1024px) NI bilo dostopa do filtrov. Tu filtre prestavimo
   v off-canvas panel (odpre ga gumb), izdelki pa gredo cez polno sirino.
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    /* .main je privzeto flex ROW (sidebar | vsebina). Tu ga postavimo v STOLPEC,
       da se gumb "Filtracija" in vsebina zlozita eno pod drugo cez polno sirino
       (sicer gumb postane stisnjen flex-item ob strani). Enako kot mobile.css <=767. */
    .main {
        flex-direction: column;
    }

    /* Vsebina cez polno sirino (sidebar je skrit / off-canvas) */
    .content {
        width: 100%;
        padding-left: 0;
    }

    /* Leva kolona filtrov -> off-canvas (privzeto skrita; JS jo s .show() odpre) */
    .sidebar-filter {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        padding-top: 25px;
        background-color: #eeeeee;
        overflow: auto;
    }

    /* "Filtracija" gumb (cez polno sirino, nad izdelki) */
    .mobile_filter {
        display: flex;
        margin: 0 0 16px;
    }

    .mobile_filter button {
        width: 100%;
        height: 40px;
        border: none;
        background-color: #eeeeee;
        border-radius: 4px;
        font-size: 14px;
        color: #212529;
    }

    .mobile_filter button img {
        width: 17px;
        margin-right: 10px;
    }

    .close_filter {
        display: block;
        width: 15px;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .filter_mobile_footer {
        display: block;
        padding: 20px;
    }

    .filter_mobile_footer button {
        width: 100%;
        height: 40px;
        margin-bottom: 5px;
        background-color: #ffffff;
        font-weight: 700;
        border: none;
        border-radius: 4px;
        color: #212529;
    }

    .filter_mobile_footer button.confirm_cta {
        background-color: var(--color-primary);
        color: #ffffff;
    }
}