body.tf-no-scroll { overflow: hidden; }

/* ── Box-sizing (a-tagek nem öröklik a form.css-ből) ─────── */
.termek-filter *, .termek-filter,
.tf-mobil-sor *, .tf-mobil-sor,
.tf-mobil-modal *, .tf-mobil-modal { box-sizing: border-box; }

/* ── "X elem listázva" – asztali nézetben a .termek-filter fölött, mindig látszik. Mobilon a
   ".tf-mobil-sor"-ban lévő, "Szűrők" gomb melletti számláló marad (ahogy eddig is), ezt a
   verziót ott a lenti @media szabály elrejti, hogy ne duplázódjon. Szándékosan NEM
   ".woocommerce-result-count": az a WooCommerce saját, natív result count elemének a neve. */
.tf-eredmeny-szamlalo {
    margin: 1rem 0 0 !important;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
}

/* ── Desktop filter bar ──────────────────────────────────── */
.termek-filter {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr 1fr 1fr;
    grid-auto-columns: auto;
    grid-template-rows: auto 3.125rem;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    align-items: center;
    padding: 1rem 0;
    margin-top: 0 !important
}

/* Leckelisták közös ritmusa: számláló–szűrő 1rem, szűrő–találatok 2.75rem. */
.termek-filter.lecke-lista-filter {
    padding: 1rem 0 2.75rem;
}

.lecke-lista-filter ~ .card-grid {
    margin-top: 0;
}

.tf-csoport-cimke {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--wp--preset--color--coffee-bean);
    align-self: end;
}

/* ── Chip sor ────────────────────────────────────────────── */
.tf-tipus {
    display: flex;
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.tf-tipus-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 3.125rem;
    padding: 0 1.25rem;
    border: 1px solid var(--wp--preset--color--coffee-bean);
    border-radius: 1.5625rem;
    background: transparent;
    color: var(--wp--preset--color--coffee-bean);
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
    cursor: pointer;
}

.tf-tipus-btn.aktiv {
    background: var(--wp--preset--color--coffee-bean);
    color: var(--wp--preset--color--white);
}

.tf-tipus-btn:hover:not(.aktiv) {
    background: #EEE9E1;
    box-shadow: 0 2px 10px rgba(129, 91, 74, .14);
}

.tf-tipus-btn.aktiv:hover {
    box-shadow: 0 2px 10px rgba(129, 91, 74, .25);
}

.tf-tipus-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--dark-walnut);
    outline-offset: 3px;
}

/* ── Dropdown wrapper ────────────────────────────────────── */
.tf-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

/* ── Dropdown gomb ───────────────────────────────────────── */
.tf-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.125rem;
    padding: 0 0.875rem;
    flex: 1;
    border: 1px solid var(--wp--preset--color--coffee-bean);
    border-radius: 0.5rem;
    background: var(--wp--preset--color--parchment);
    color: var(--wp--preset--color--dark-walnut);
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.tf-dropdown--mobil .tf-dropdown-btn {
    width: 100%;
}

.tf-btn-label {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--wp--preset--color--coffee-bean);
}

.tf-dropdown-btn:hover {
    border-color: var(--wp--preset--color--dark-walnut);
    box-shadow: 0 2px 10px rgba(129, 91, 74, .12);
}

.tf-dropdown.nyitva .tf-dropdown-btn,
.tf-dropdown-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--dark-walnut);
    outline-offset: 3px;
    border-color: var(--wp--preset--color--dark-walnut);
}

/* ── Dropdown label (mobil felett) ───────────────────────── */
.tf-dropdown-label {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--wp--preset--color--dark-walnut);
    margin-bottom: 0.375rem;
}

/* ── Chevron ─────────────────────────────────────────────── */
.tf-chevron {
    flex-shrink: 0;
    margin-left: auto;
    transition: transform .2s;
}

.tf-dropdown.nyitva .tf-chevron {
    transform: rotate(180deg);
}

/* ── SVG ikonok ──────────────────────────────────────────── */
.tf-ikon {
    flex-shrink: 0;
    color: var(--wp--preset--color--coffee-bean);
}

/* ── Badge ───────────────────────────────────────────────── */
.tf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.625rem;
    background: var(--wp--preset--color--burnt-rose);
    color: var(--wp--preset--color--white);
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Dropdown panel ──────────────────────────────────────── */
.tf-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 22.5rem;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--coffee-bean);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: none;
    overflow: hidden;
    z-index: 200;
    /* Animáció */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.tf-dropdown.nyitva .tf-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .22s ease, transform .22s ease;
}

.tf-sort .tf-panel {
    left: auto;
    right: 0;
}

/* ── Panel fejléc ────────────────────────────────────────── */
.tf-panel p {
    padding: 1rem;
    margin: 0;
}

.tf-panel-fejlec {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--wp--preset--color--coffee-bean);
    padding: 0 0 0.5rem;
    margin: 0;
}

/* ── Panel sorok ─────────────────────────────────────────── */
.tf-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 0.75rem;
    background: var(--wp--preset--color--white);
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.75rem;
    color: var(--wp--preset--color--dark-walnut);
    transition: background .15s;
}

.tf-item:hover,
.tf-item.kivalasztva {
    background: #EEE9E1;
}

.tf-item:last-child {
    margin-bottom: 0;
}

/* ── Checkbox / radio a panelban ─────────────────────────── */
.tf-panel input[type="checkbox"],
.tf-panel input[type="radio"],
.tf-mobil-modal input[type="checkbox"],
.tf-mobil-modal input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    min-height: unset;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
    border: 1px solid var(--wp--preset--color--coffee-bean);
}

.tf-panel input[type="checkbox"]:checked,
.tf-mobil-modal input[type="checkbox"]:checked {
    background-color: var(--wp--preset--color--coffee-bean);
    border-color: var(--wp--preset--color--coffee-bean);
}

.tf-panel input[type="radio"]:checked,
.tf-mobil-modal input[type="radio"]:checked {
    box-shadow: inset 0 0 0 4px var(--wp--preset--color--coffee-bean);
    background-color: currentColor;
    border-color: var(--wp--preset--color--coffee-bean);
}

.tf-panel input[type="checkbox"]:focus,
.tf-panel input[type="radio"]:focus,
.tf-mobil-modal input[type="checkbox"]:focus,
.tf-mobil-modal input[type="radio"]:focus {
    outline: 2px solid var(--wp--preset--color--dark-walnut);
    outline-offset: 3px;
    border-color: var(--wp--preset--color--dark-walnut);
}

.tf-halott {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

/* ── Reset wrapper (megakadályozza a WP p-tag margint) ──── */
.termek-filter > p { display: contents; }
.tf-reset-wrap {
    display: flex;
    align-items: center;
    height: 3.125rem;
}

/* ── Reset gomb (asztali) ────────────────────────────────── */
.tf-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 3.125rem;
    padding: 0 1rem;
    border: 1px solid var(--wp--preset--color--teal);
    border-radius: 0.5rem;
    color: var(--wp--preset--color--teal);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
    cursor: pointer;
    background: transparent;
}

.tf-reset:hover {
    background: var(--wp--preset--color--teal);
    color: var(--wp--preset--color--white);
    box-shadow: 0 2px 10px rgba(16, 113, 122, .22);
    transform: translateY(-1px);
}

.tf-reset:focus-visible {
    outline: 2px solid var(--wp--preset--color--teal);
    outline-offset: 3px;
}

/* ── Mobil trigger sor ───────────────────────────────────── */
.tf-mobil-sor {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
}


.tf-mobil-sor .woocommerce-result-count {
    margin: 0 !important;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
}

.tf-mobil-nyit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.125rem;
    padding: 0 1.25rem;
    border: 1.5px solid var(--wp--preset--color--coffee-bean);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--wp--preset--color--coffee-bean);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

.tf-mobil-nyit p {
    margin: 0 !important;
}

.tf-mobil-nyit:hover {
    background: var(--wp--preset--color--dark-linen);
}

.tf-reset--mobil {
    margin-left: auto;
    height: 3.125rem;
    padding: 0 1rem;
    font-size: 0.875rem;
}

/* ── Mobil modal ─────────────────────────────────────────── */
.tf-mobil-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.tf-mobil-modal.nyitva {
    display: block;
    margin-top: 0 !important;
}

.tf-mobil-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.tf-mobil-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90dvh;
    background: var(--wp--preset--color--parchment);
    border-radius: 1.25rem 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
}

.tf-mobil-modal.nyitva .tf-mobil-sheet {
    transform: translateY(0);
}

/* ── Drag handle ─────────────────────────────────────────── */
.tf-drag-handle-sor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.75rem;
    flex-shrink: 0;
}

.tf-drag-handle {
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 0.125rem;
    background: var(--wp--preset--color--coffee-bean);
}

/* ── Modal fejléc ────────────────────────────────────────── */
.tf-mobil-fejlec {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 3.5rem 0.75rem;
    flex-shrink: 0;
}

.tf-mobil-cim {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    color: var(--wp--preset--color--dark-walnut);
}

.tf-mobil-zar {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    background: transparent;
    color: var(--wp--preset--color--dark-walnut);
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0;
}

.tf-mobil-zar:focus-visible {
    outline: 2px solid var(--wp--preset--color--dark-walnut);
    outline-offset: 3px;
}

/* ── Modal tartalom ──────────────────────────────────────── */
.tf-mobil-tartalom {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.tf-mobil-tartalom p,
.tf-dropdown--mobil p { display: contents; }

.tf-mobil-szekció {
    padding: 0.375rem 0;
}

.tf-mobil-szekció + .tf-mobil-szekció {
    margin-top: 0.75rem;
}

.tf-mobil-szekció:last-child {
    margin-bottom: 1.5rem;
}

.tf-mobil-label {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--wp--preset--color--dark-walnut);
    margin-bottom: 0.625rem;
}

/* ── Mobil chipek ────────────────────────────────────────── */
.tf-mobil-chipek {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tf-m-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    height: 3.125rem;
    padding: 0 0.75rem;
    border: 1px solid var(--wp--preset--color--coffee-bean);
    border-radius: 1.5625rem;
    background: transparent;
    color: var(--wp--preset--color--coffee-bean);
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.tf-m-chip.aktiv {
    background: var(--wp--preset--color--coffee-bean);
    color: var(--wp--preset--color--white);
}

.tf-chip-check-ikon {
    display: none;
    flex-shrink: 0;
}

.tf-tipus-btn.aktiv .tf-chip-check-ikon,
.tf-m-chip.aktiv .tf-chip-check-ikon {
    display: inline-flex;
}

/* ── Mobil dropdown (sheet-en belül) ─────────────────────── */
.tf-dropdown--mobil {
    position: static;
    display: block;
}

.tf-dropdown--mobil .tf-dropdown-btn {
    flex: none;
}

.tf-dropdown--mobil .tf-btn-label.tf-placeholder {
    font-weight: 300;
    color: var(--wp--preset--color--coffee-bean);
}

.tf-dropdown--mobil .tf-panel {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0.25rem 0 0;
    margin-top: 0.25rem;
    min-width: unset;
}

.tf-dropdown--mobil.nyitva .tf-panel {
    display: block;
}

/* ── Mobil footer ────────────────────────────────────────── */
.tf-mobil-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    background: var(--wp--preset--color--parchment);
}

.tf-alkalmaz {
    width: 100%;
    height: 3.125rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--wp--preset--color--teal);
    color: var(--wp--preset--color--white);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.tf-alkalmaz:hover { background: var(--wp--preset--color--dark-teal); }

.tf-visszaallitas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 3.125rem;
    border: 1.5px solid var(--wp--preset--color--teal);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--wp--preset--color--teal);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.tf-visszaallitas:hover {
    background: var(--wp--preset--color--teal);
    color: var(--wp--preset--color--white);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .termek-filter { display: none; }
    .tf-mobil-sor {
        display: flex;
        align-items: flex-end;
    }

    .tf-m-chip {
        padding-inline: 0.25rem;
    }

    .tf-dropdown-btn {
        font-size: 1rem;
    }

    /* Téma saját result count + ordering sor elrejtése mobilon */
    .woocommerce-result-count { display: none; }
    .tf-mobil-sor .woocommerce-result-count { display: block; }

    /* Az asztali "X elem listázva" mobilon rejtve – ott a .tf-mobil-sor-ban lévő,
       "Szűrők" gomb melletti számláló jelenik meg helyette. */
    .tf-eredmeny-szamlalo { display: none; }
}