/* ============================================
   KATEGÓRIA SZŰRŐ — VILÁGOS BÉZS GOMBOK
   Másold be a css/style.css FÁJL VÉGÉRE.
   Ha eddig már bemásoltad ezt a fájlt, töröld
   ki onnan azt a részt és cseréld le erre.
   ============================================ */

/* === FŐ KATEGÓRIA SZŰRŐ SÁV === */
.termekek-szuro {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 24px 0 16px;
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .termekek-szuro {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 20px 16px 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
    }
    .termekek-szuro::-webkit-scrollbar { display: none; }
}

/* === FŐ KATEGÓRIA GOMB === */
.kat-gomb,
a.kat-gomb {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #2B1E17 !important;
    background: #F5EFE6 !important;
    border: 1px solid #E8DFD1 !important;
    border-radius: 999px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.25s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(43, 30, 23, 0.04);
}

.kat-gomb:hover,
a.kat-gomb:hover {
    background: #EBE0CC !important;
    border-color: #D9CFBE !important;
    color: #2B1E17 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(43, 30, 23, 0.1);
}

.kat-gomb-aktiv,
a.kat-gomb-aktiv,
a.kat-gomb.kat-gomb-aktiv {
    background: #2B1E17 !important;
    color: #F5EFE6 !important;
    border-color: #2B1E17 !important;
    box-shadow: 0 3px 10px rgba(43, 30, 23, 0.2);
}

.kat-gomb-aktiv:hover,
a.kat-gomb-aktiv:hover {
    background: #3D2C22 !important;
    color: #F5EFE6 !important;
    border-color: #3D2C22 !important;
}

/* === AL-KATEGÓRIA SÁV === */
.alkat-szuro {
    background: linear-gradient(180deg, #FAF6EF 0%, #F5EFE6 100%);
    border-radius: 14px;
    padding: 20px 26px;
    margin: 8px 0 28px;
    border: 1px solid #E8DFD1;
    box-shadow: 0 2px 8px rgba(43, 30, 23, 0.04);
}

.alkat-szuro-cim {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 500;
    color: #2B1E17;
    margin-bottom: 14px;
}

.alkat-szuro-cim i {
    color: #2B1E17;
    font-size: 18px;
    opacity: 0.6;
}

.alkat-szuro-cim span {
    color: #2B1E17;
    opacity: 0.6;
    font-style: italic;
    font-weight: 400;
}

.alkat-gombok {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 600px) {
    .alkat-gombok {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .alkat-gombok::-webkit-scrollbar { display: none; }
    .alkat-szuro { padding: 16px 18px; }
    .alkat-szuro-cim { font-size: 15px; }
}

/* === AL-KATEGÓRIA GOMB === */
.alkat-gomb,
a.alkat-gomb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #2B1E17 !important;
    background: #FFFFFF !important;
    border: 1px solid #E8DFD1 !important;
    border-radius: 8px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.alkat-gomb:hover,
a.alkat-gomb:hover {
    background: #FAF6EF !important;
    border-color: #2B1E17 !important;
    color: #2B1E17 !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(43, 30, 23, 0.1);
}

.alkat-gomb-aktiv,
a.alkat-gomb-aktiv,
a.alkat-gomb.alkat-gomb-aktiv {
    background: #2B1E17 !important;
    color: #F5EFE6 !important;
    border-color: #2B1E17 !important;
}

.alkat-gomb-aktiv:hover,
a.alkat-gomb-aktiv:hover {
    background: #3D2C22 !important;
    color: #F5EFE6 !important;
    border-color: #3D2C22 !important;
}

/* === DARABSZÁM CIMKE === */
.alkat-szam {
    font-size: 11px;
    background: rgba(43, 30, 23, 0.08);
    color: #2B1E17;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

.alkat-gomb-aktiv .alkat-szam,
a.alkat-gomb-aktiv .alkat-szam {
    background: rgba(245, 239, 230, 0.25);
    color: #F5EFE6;
}

/* === SZEKCIÓ CÍM JAVÍTÁS === */
.szekcio-cim h2,
.szekcio-cim p {
    color: #2B1E17;
}