/*
 * Erenotom UI — Sidebar Kategori Menü Stilleri
 * Sadece masaüstü (min-width: 992px)
 *
 * HTML yapısı (ps_categorytree tema override):
 *   .block-categories
 *     ul.category-top-menu
 *       li > a.h6.text-uppercase          ← Ana başlık (ARAÇ DIŞ AKSESUAR)
 *       li > ul.category-sub-menu
 *         li[data-depth=0]
 *           a                             ← 1. seviye link
 *           .navbar-toggler.collapse-icons
 *             i.material-icons.add        ← + ikonu
 *             i.material-icons.remove     ← − ikonu
 *           div.collapse
 *             ul.category-sub-menu
 *               li[data-depth=1]
 *                 a.category-sub-link     ← 2. seviye link
 */

@media (min-width: 992px) {

    /* ── Ana kategori başlığı ─────────────────────────────── */
    #left-column .block-categories .category-top-menu > li > a {
        display:        block;
        font-size:      0.85rem;
        font-weight:    700;
        text-transform: none    !important; /* Bootstrap .text-uppercase override */
        letter-spacing: 0.2px;
        line-height:    1.3;
        padding:        0 0 8px;
        margin-bottom:  4px;
        border-bottom:  2px solid #d0d0d0;
        color:          #1a1a1a;
    }

    /* ── ul.category-sub-menu sıfırla ────────────────────── */
    #left-column .block-categories .category-sub-menu {
        list-style: none;
        padding:    0;
        margin:     0;
    }

    /* ── 1. seviye li ────────────────────────────────────── */
    #left-column .block-categories .category-sub-menu > li[data-depth="0"] {
        position:      relative;
        padding:       5px 24px 5px 0;  /* sağda 24px: toggler için */
        border-bottom: 1px solid #eeeeee;
        margin:        0;
    }

    /* ── 1. seviye link ──────────────────────────────────── */
    #left-column .block-categories .category-sub-menu > li[data-depth="0"] > a {
        display:     block;
        font-size:   0.78rem;
        font-weight: 400;
        line-height: 1.4;
        color:       #333333;
        word-break:  break-word;
    }

    #left-column .block-categories .category-sub-menu > li[data-depth="0"] > a:hover {
        color: #000000;
    }

    /* ── Toggler: absolute sağ üst ───────────────────────── */
    #left-column .block-categories .category-sub-menu > li[data-depth="0"] > .navbar-toggler {
        position:   absolute;
        right:      2px;
        top:        4px;
        padding:    0;
        border:     0;
        background: transparent;
        cursor:     pointer;
        line-height: 1;
    }

    /*
     * İkon font-size küçültme.
     * ÖNEMLI: display'e dokunmuyoruz — Bootstrap collapse .collapsed/.add/.remove
     * toggle'ı tema CSS ile çalışıyor, biz sadece boyutu değiştiriyoruz.
     */
    #left-column .block-categories .category-sub-menu > li[data-depth="0"] > .navbar-toggler .material-icons {
        font-size:   15px;
        line-height: 1;
    }

    /* ── 2. seviye+ li sıfırla ───────────────────────────── */
    #left-column .block-categories .category-sub-menu li[data-depth="1"],
    #left-column .block-categories .category-sub-menu li[data-depth="2"],
    #left-column .block-categories .category-sub-menu li[data-depth="3"] {
        padding: 0;
        margin:  0;
    }

    /* ── 2. seviye+ link ─────────────────────────────────── */
    #left-column .block-categories .category-sub-menu li a.category-sub-link {
        display:     block;
        font-size:   0.72rem;
        font-weight: 400;
        line-height: 1.35;
        padding:     3px 0 3px 10px;
        color:       #555555;
    }

    #left-column .block-categories .category-sub-menu li a.category-sub-link:hover {
        color: #111111;
    }
}

/* ── "Sepette" etiketi — teal metin, kalın ───────────────────────────────── */
/* JS: front_product.js → hint.textContent = 'Sepette' → .erp-qty-hint */
.erp-qty-hint {
    display: block;
    color: #25b9d7;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

/* ── MARKALAR: çoklu seçim checkbox filtresi ─────────────────────────────── */
/* HTML: ps_brandlist modülü (_partials/brand_text.tpl + brand_form.tpl)
   JS:   front_product.js → initBrandFilter() → ?brands=1,2,3 ile sayfa yenilenir */
ul.erp-brand-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.erp-brand-check {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
}
.erp-brand-check input.erp-brand-checkbox {
    flex-shrink: 0;
    cursor: pointer;
}
.erp-brand-check:has(input:checked) {
    color: #24b9d7;
    font-weight: 600;
}