/* Mobile catalogue refinements. Existing desktop and GET enhancement hooks stay intact. */

/* Catalogue root and category pages (all widths): sub-category counts, colour
   swatches in filter pills, active-filter chips and the category guide text. */
.catalog-page .cat-pill__count { margin-left: 6px; color: var(--muted); font-size: .85em; font-weight: 400; font-variant-numeric: tabular-nums; }
.catalog-page .cat-pill.is-active .cat-pill__count { color: inherit; opacity: .78; }
.catalog-page .facet-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--swatch, transparent);
    box-shadow: inset 0 0 0 1px rgba(20, 24, 21, .24);
}
/* JS on (html.js is set in <head>): the filter panel that catalog.js turns into a drawer
   must not take up space at first paint (layout shift). Without JS it stays in flow;
   if catalog.js cannot enhance it, the "Filtreler" link (#filter-drawer, :target)
   still opens it, and the no-overlay fallback marks it .is-inline. */
.js .catalog-page .catalog-filters:not(.filter-drawer):not(.is-inline):not(:target) { display: none; }
.catalog-page .catalog-chips { padding-top: 18px; }
.catalog-page .catalog-chips .filter-chips { margin-bottom: 0; }
.catalog-page .category-guide__body p + p { margin-top: 1em; }

@media (max-width: 720px) {
    .catalog-page .page-hero--tight { padding-bottom: 14px; }
    .catalog-page [data-catalog-form] { min-width: 0; }
    .catalog-page .catalog-toolbar {
        position: static;
        top: auto;
        z-index: auto;
        background: var(--bg);
        border-top: 0;
        border-bottom: 1px solid var(--line);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .catalog-page .catalog-toolbar__inner {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas: "search search" "pills pills" "count controls";
        gap: 9px 10px;
        padding-block: 4px 14px;
        min-width: 0;
    }
    .catalog-page .ctf-search {
        min-height: 48px;
        gap: 0;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-sm);
        background: var(--surface);
        transition: border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
    }
    .catalog-page .ctf-search:focus-within {
        border-color: var(--gold-deep);
        box-shadow: 0 0 0 3px rgba(168, 126, 79, .16);
        background: var(--bg);
    }
    .catalog-page .ctf-search > svg { left: 14px; width: 17px; height: 17px; }
    .catalog-page .ctf-search input {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 10px 6px 10px 39px;
        border: 0;
        border-radius: var(--r-sm) 0 0 var(--r-sm);
        background: transparent;
        font-size: 16px;
        line-height: 1.35;
        box-shadow: none;
    }
    .catalog-page .ctf-search input:focus { background: transparent; border: 0; box-shadow: none; }
    .catalog-page .catalog-search-submit {
        flex: 0 0 auto;
        min-width: 48px;
        min-height: 46px;
        max-width: 82px;
        padding: 8px 12px;
        border-radius: 0 var(--r-sm) var(--r-sm) 0;
        color: var(--gold-deep);
        font-size: 13px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    .catalog-page .catalog-search-submit:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -4px; }

    /* A real single-line scroll area: no faded active text or page-wide overflow. */
    .catalog-page .ctf-pills {
        min-width: 0;
        gap: 7px;
        margin-inline: calc(-1 * var(--gutter));
        padding: 3px var(--gutter);
        scroll-padding-inline: var(--gutter);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        mask-image: none;
        -webkit-mask-image: none;
    }
    .catalog-page .cat-pill {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid var(--line-strong);
        background: var(--bg);
        color: var(--ink-2);
        font-size: 13px;
        line-height: 1.25;
        font-weight: 500;
    }
    .catalog-page .cat-pill.is-active {
        color: var(--bg);
        background: var(--ink);
        border-color: var(--ink);
        font-weight: 500;
    }
    .catalog-page .cat-pill:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
    .catalog-page .ctf-count {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        justify-self: start;
        min-width: 0;
        margin: 0;
        color: var(--muted);
        line-height: 1.2;
        white-space: normal;
    }
    .catalog-page .ctf-count__value { color: var(--ink); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
    .catalog-page .ctf-count__unit { font-size: 11px; }
    .catalog-page .ctf-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        gap: 8px;
        align-items: stretch;
    }
    .catalog-page .ctf-view { display: none; }
    .catalog-page .ctf-sort { display: flex; min-width: 0; }
    .catalog-page .ctf-sort__lead { display: none; }
    .catalog-page .ctf-sort__chev { right: 9px; width: 12px; }
    .catalog-page .ctf-sort select,
    .catalog-page .ctf-filters-btn {
        width: 100%;
        min-width: 0;
        height: 46px;
        min-height: 44px;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-sm);
        background: var(--surface);
        color: var(--ink);
        box-shadow: none;
    }
    .catalog-page .ctf-sort select { padding: 8px 24px 8px 10px; font-size: 16px; text-align: left; }
    .catalog-page .ctf-sort select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
    .catalog-page .ctf-filters-btn { justify-content: center; gap: 6px; padding: 8px; font-size: 13px; line-height: 1.2; }
    .catalog-page .ctf-filters-btn > svg { flex: 0 0 15px; width: 15px; }
    .catalog-page .ctf-filters-btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
    .catalog-page .ctf-badge { flex-shrink: 0; min-width: 19px; margin: 0; }

    /* Enhancement-only bottom sheet. The body scrolls; header/actions stay visible. */
    .catalog-page .catalog-filters.filter-drawer { margin: 0; }
    .catalog-page .filter-drawer__scrim { background: rgba(20, 24, 21, .44); }
    .catalog-page .filter-drawer .filter-drawer__panel {
        inset: auto 0 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        width: 100%;
        height: 86vh;
        height: 86dvh;
        max-height: 86dvh;
        min-height: 0;
        border-radius: var(--r) var(--r) 0 0;
        box-shadow: var(--shadow-md);
        overflow: hidden;
        transform: translateY(100%);
    }
    .catalog-page.drawer-open .filter-drawer .filter-drawer__panel { transform: translateY(0); }
    .catalog-page .filter-drawer__head {
        position: relative;
        gap: 12px;
        padding: 16px 20px 12px;
        background: var(--bg);
    }
    .catalog-page .filter-drawer__head::before { content: none; }
    .catalog-page .filter-drawer__head h2 { min-width: 0; margin: 0; font-size: 1.45rem; line-height: 1.25; }
    .catalog-page .filter-drawer__head .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; background: var(--surface); box-shadow: none; }
    .catalog-page .filter-drawer .filter-drawer__body {
        min-height: 0;
        padding: 0 20px 18px;
        overflow: auto;
        overscroll-behavior: contain;
        scroll-padding-block: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .catalog-page .filter-drawer__note { margin: 0 0 14px; font-size: 13px; line-height: 1.5; }
    .catalog-page .facet { min-width: 0; padding-block: 16px; }
    .catalog-page .facet__legend { max-width: 100%; margin-bottom: 10px; color: var(--ink); font-size: 13px; letter-spacing: 0; overflow-wrap: anywhere; }
    .catalog-page .facet__opts { gap: 8px; }
    .catalog-page .facet-pill { min-width: 0; max-width: 100%; }
    .catalog-page .facet-pill input {
        position: absolute;
        z-index: 1;
        left: 12px;
        top: 50%;
        width: 18px;
        height: 18px;
        margin: 0;
        opacity: 1;
        transform: translateY(-50%);
        accent-color: var(--gold-deep);
        cursor: pointer;
    }
    .catalog-page .facet-pill .facet-check__label {
        min-height: 44px;
        max-width: 100%;
        padding: 10px 12px 10px 39px;
        border-radius: var(--r-sm);
        font-size: 14px;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .catalog-page .facet-pill .facet-check__label::before { display: none; }
    .catalog-page .facet-pill input:focus-visible ~ .facet-check__label { outline: 2px solid var(--gold-deep); outline-offset: 2px; box-shadow: none; }
    .catalog-page .filter-drawer__foot {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        min-width: 0;
        padding: 12px 20px max(14px, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
        background: var(--bg);
    }
    .catalog-page .filter-drawer .filter-drawer__foot { position: sticky; bottom: 0; z-index: 2; }
    .catalog-page .filter-drawer__foot .btn { min-width: 0; min-height: 48px; padding-inline: 10px; font-size: 14px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }

    /* No JS: the very same controls remain in normal document flow. */
    .catalog-page .catalog-filters:not(.filter-drawer) { width: auto; margin: 18px var(--gutter); padding: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
    .catalog-page .catalog-filters:not(.filter-drawer) [data-catalog-filter-panel] { position: static; height: auto; max-height: none; transform: none; }
    .catalog-page .catalog-filters:not(.filter-drawer) .filter-drawer__body { max-height: none; overflow: visible; padding: 0 16px 14px; }
    .catalog-page .catalog-filters:not(.filter-drawer) .filter-drawer__head { padding: 18px 16px 12px; }
    .catalog-page .catalog-filters:not(.filter-drawer) .filter-drawer__foot { position: static; padding-inline: 16px; }
}
@media (max-width: 380px) {
    .catalog-page .ctf-filters-btn > svg { display: none; }
    .catalog-page .ctf-controls { gap: 6px; }
    .catalog-page .catalog-search-submit { padding-inline: 10px; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .catalog-page .filter-drawer__panel,
    .catalog-page .filter-drawer__scrim,
    .catalog-page .ctf-search { transition-duration: 0s; }
}