/* Listeleme (kategori, arama, marka, kampanya) — Vitrin V2 (docs/B2C_STORE_REDESIGN_PLAN.md §6.2):
   başlık bandı, filtre sütunu / alt sayfa, araç çubuğu, etkin filtre çipleri, ızgara, iskelet, sayfalama. */
@layer pages {
    /* ---- başlık bandı: ekmek kırıntısı, Bricolage başlık, ürün sayısı, alt kategori hapları; kategori banner'ı
       sağda küçük kutu */
    .lband { --lband-pad: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6); margin-block: var(--sp-2) var(--sp-7); padding: var(--lband-pad); border-radius: var(--r-xl);
        background: var(--surface-2); }
    .lband.has-box { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: center; }
    .lband-main { display: grid; gap: var(--sp-3); align-content: start; justify-items: start; min-width: 0;
        max-width: 100%; }
    .lband .crumbs { max-width: 100%; margin-bottom: var(--sp-2); }
    .lhead-title { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
    .lhead-title h1 { font-size: var(--fs-4xl); line-height: 1; overflow-wrap: anywhere; }
    .lhead-title .meta { color: var(--text-3); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .lhead-logo { display: grid; place-items: center; width: 160px; height: 80px; padding: 10px;
        border-radius: var(--r-md); background: var(--tile); }
    .lhead-logo img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: var(--tile-blend); }
    .lhead-desc { max-width: 70ch; color: var(--text-2); font-size: 15px; line-height: 1.6; }
    .lband .subcats { max-width: 100%; margin-top: var(--sp-2); margin-inline: calc(var(--lband-pad) * -1);
        padding-inline: var(--lband-pad); scroll-padding-inline: var(--lband-pad); }
    @media (min-width: 1024px) { .lband .subcats { margin-inline: 0; padding-inline: 0; } }

    /* küçük banner kutusu: aynı slider, ama kompakt; dar ekranda hiç çizilmez */
    .lband-box { min-width: 0; }
    .lband .lband-box .hero { margin: 0; border-radius: var(--r-lg); }
    .lband .lband-box .hero-slide { aspect-ratio: 16 / 10; }
    .lband .lband-box .hero-text { width: 82%; gap: 6px; padding: 18px 20px; }
    .lband .lband-box .hero-text h2 { font-size: clamp(18px, .6vw + 14px, 24px); line-height: 1.1; }
    .lband .lband-box .hero-text p { display: none; }
    .lband .lband-box .hero-text .btn { --btn-h: 34px; --btn-px: 13px; --btn-fs: 13px; --ic: 15px; margin-top: 4px; }
    .lband .lband-box .hero-ctrl { right: 10px; bottom: 10px; }
    .lband .lband-box .hero-ctrl .hero-btn[data-go] { display: none; }
    @media (max-width: 1023.98px) { .lband.has-box { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); } }
    @media (max-width: 767.98px) {
        .lband { gap: var(--sp-4); margin-bottom: var(--sp-5); border-radius: var(--r-lg); }
        .lband.has-box { grid-template-columns: minmax(0, 1fr); }
        .lband-box { display: none; }
        .lhead-desc { font-size: 14px; }
    }

    .listing { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
    @media (max-width: 1023.98px) { .listing { grid-template-columns: minmax(0, 1fr); } }

    /* ---- filtreler: masaüstünde yapışkan sütun, mobilde alt sayfa (aynı form) */
    dialog.filters { display: block; position: sticky; top: calc(var(--hdr-sticky) + 16px); inset: auto; width: auto;
        height: auto; max-height: calc(100dvh - var(--hdr-sticky) - 32px); margin: 0; padding: 0;
        background: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
            scrollbar-color: var(--border-2) transparent; transform: none; opacity: 1; box-shadow: none; }
    .filters form { display: flex; flex-direction: column; min-height: 100%; }
    .fhead, .ffoot { display: none; }
    .fbody { padding-right: 8px; }
    .fsummary { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px;
        border-bottom: 1.5px solid var(--border-2); }
    .fsummary h2 { font-size: var(--fs-xl); }
    .fsummary .btn-link { font-size: 13px; min-height: 28px; }
    .fgroup { border-bottom: 1px solid var(--border); }
    .fgroup > summary { display: flex; align-items: center; gap: 8px; min-height: 54px; font-size: 15px;
        font-weight: 700; color: var(--text); --ic: 18px; }
    .fgroup > summary .chev { margin-left: auto; color: var(--text-3); transition: transform var(--t-med) var(--ease); }
    .fgroup[open] > summary .chev { transform: rotate(180deg); }
    .fg-n { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); font-size: 0; }
    .fgroup:has(input:checked) .fg-n { display: inline-block; }
    .fg-body { padding-bottom: 16px; }
    .fopts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
    .fopt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-inline: 8px; margin-inline: -8px;
        border-radius: var(--r-sm); font-size: 14px; color: var(--text-2); cursor: pointer;
        transition: background var(--t-fast); }
    .fopt:hover { background: var(--surface-2); color: var(--text); }
    .fopt:has(input:checked) { color: var(--text); font-weight: 600; }
    .fopt .n { margin-left: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
    .fopt:has(input:disabled) { opacity: .42; pointer-events: none; }
    .fopt .sw { width: 18px; height: 18px; border-radius: 50%;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shc) 15%, transparent); flex: none; }
    .fopts:not(.is-search):not(:has(~ .fmore input:checked)) > li:nth-child(n + 7) { display: none; }
    .fmore { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; margin-top: 4px; font-size: 13px;
        font-weight: 600; color: var(--acc-text); cursor: pointer; --ic: 16px; }
    .fmore input { position: absolute; opacity: 0; pointer-events: none; }
    .fmore .less, .fmore:has(input:checked) .more { display: none; }
    .fmore:has(input:checked) .less { display: inline; }
    .fmore:has(input:focus-visible) { outline: 2px solid var(--acc-text); outline-offset: 2px; border-radius: 4px; }
    .fsearch { margin-bottom: 8px; }
    .fsearch .input { height: 40px; font-size: 14px; }
    .frange { display: grid; gap: 14px; }
    .frange-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
    .frange-in .input { height: 42px; padding-inline: 10px 36px; font-size: 14px; font-variant-numeric: tabular-nums; }
    .frange-in > span { color: var(--text-3); }
    .slider2 { --a: 0; --b: 100; position: relative; height: 24px; margin-inline: 9px; }
    .slider2::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: var(--surface-3); }
    .slider2 .fill { position: absolute; top: 10px; height: 4px; border-radius: 2px; background: var(--acc); left: calc(var(--a) * 1%); right: calc(100% - var(--b) * 1%); }
    .slider2 input { position: absolute; inset: 0 -9px; width: calc(100% + 18px); height: 24px; margin: 0;
        appearance: none; background: none; pointer-events: none; }
    .slider2 input::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--acc); box-shadow: var(--sh-1); pointer-events: auto; cursor: grab; }
    .slider2 input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
        border: 2px solid var(--acc); box-shadow: var(--sh-1); pointer-events: auto; cursor: grab; }
    .slider2 input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--acc-text); outline-offset: 2px; }
    .fapply { margin-top: 16px; }
    .js .fapply { display: none; }
    .fswitches { display: grid; gap: 4px; padding-block: 12px; border-bottom: 1px solid var(--border); }
    .fswitches .switch { justify-content: space-between; min-height: 40px; flex-direction: row-reverse; font-weight: 500; }

    /* mobil: alt sayfa. Yay ile açılır (aşımsız: ekran kenarına yaslı), tutamaktan sürüklenip kapanır (listing.js ›
       initSheetDrag) */
    @media (max-width: 1023.98px) {
        dialog.filters { display: none; position: fixed; inset: auto 0 var(--kb, 0px) 0; width: 100%; max-width: 100%;
            height: min(90dvh, calc(var(--vvh, 100dvh) - 12px)); max-height: none; margin: 0;
            background: var(--surface); color: var(--text); border: 1.5px solid var(--border); border-width: 1.5px 0 0;
                border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-3); overflow: hidden;
                transform: translateY(100%);
            transition: transform var(--t-med) var(--ease), overlay var(--t-med) allow-discrete,
                    display var(--t-med) allow-discrete; }
        dialog.filters[open] { display: flex; flex-direction: column; transform: none;
            transition: transform var(--dur-spring-calm) var(--ease-spring-calm),
                    overlay var(--dur-spring-calm) allow-discrete, display var(--dur-spring-calm) allow-discrete; }
        @starting-style { dialog.filters[open] { transform: translateY(100%); } }
        dialog.filters::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px;
            margin-left: -20px; border-radius: 4px; background: var(--border-2); pointer-events: none; }
        .filters form { flex: 1; min-height: 0; }
        .fhead { display: flex; align-items: center; justify-content: space-between; min-height: 64px;
            padding: 16px 8px 8px 20px; border-bottom: 1.5px solid var(--border); flex: none; touch-action: none;
            cursor: grab; }
        .fhead h2 { font-size: var(--fs-xl); }
        .fbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; }
        .fsummary { display: none; }
        .ffoot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
            border-top: 1.5px solid var(--border); background: var(--surface); flex: none; }
        .ffoot .btn:last-child { flex: 1; }
        .js .fapply { display: none; }
        #sort-sheet .dlg-head { touch-action: none; cursor: grab; }
    }

    /* ---- araç çubuğu: yapışkan; solda etkin filtre çipleri, sağda sıralama ve yoğunluk */
    .ltool { position: sticky; top: var(--hdr-sticky); z-index: var(--z-sticky); display: flex; align-items: center;
        gap: 12px; min-height: 64px; margin-bottom: var(--sp-5); background: var(--bg);
        border-bottom: 1.5px solid var(--border); }
    .ltool-chips { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto;
        scrollbar-width: none; padding-block: 12px; }
    .ltool-chips::-webkit-scrollbar { display: none; }
    .ltool-chips .chip { flex: none; }
    .ltool-chips .chip-x { height: 36px; border-color: transparent; background: var(--surface-2); color: var(--text); }
    .ltool-chips .chip-x button { color: var(--text-2); }
    .ltool-chips .btn-link { font-size: 13px; padding-inline: 6px; flex: none; }
    .ltool-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
    .sort-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 16px 12px;
        border-radius: var(--r-md); border: 1.5px solid var(--border-2); background: var(--surface); font-size: 14px;
        color: var(--text-2); transition: border-color var(--t-fast); --ic: 17px; }
    .sort-btn b { color: var(--text); font-weight: 600; }
    .sort-btn:hover { border-color: var(--text); }
    .viewsw { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-md);
        border: 1.5px solid var(--border-2); background: var(--surface); }
    .viewsw button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
        color: var(--text-3); transition: background var(--t-fast), color var(--t-fast); --ic: 18px; }
    .viewsw button:hover { color: var(--text); }
    .viewsw button[aria-pressed="true"] { background: var(--ink); color: var(--ink-text); }
    .ltool-m { display: none; }
    @media (max-width: 1023.98px) {
        .ltool { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 8px; margin-inline: calc(var(--gutter) * -1);
            padding-inline: var(--gutter); }
        /* minmax(0, …): 320 px'te düğmeler daralabilsin, sayfa yana taşmasın */
        .ltool-m { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; width: 100%;
            padding-bottom: 8px; }
        .ltool-m .btn { justify-content: center; min-width: 0; padding-inline: 10px; border-width: 1.5px;
            overflow: hidden; white-space: nowrap; }
        .ltool-m .btn span:not(.n) { overflow: hidden; text-overflow: ellipsis; }
        .ltool-m .btn .n { min-width: 20px; height: 20px; border-radius: var(--r-full); background: var(--acc); color: var(--acc-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
        .ltool-m .viewsw button { height: 36px; }
        .ltool-chips { width: 100%; order: 3; padding-block: 4px 12px; }
        .ltool-chips:empty { display: none; }
        .ltool-right { display: none; }
    }

    /* ---- sonuçlar */
    .lresults { position: relative; min-width: 0; }
    .lresults[aria-busy="true"] .pgrid { pointer-events: none; }
    .lresults[aria-busy="true"]::before { content: ""; position: absolute; top: -21px; left: 0; z-index: 5; height: 3px;
        width: 40%; border-radius: 2px; background: var(--acc); animation: busy 1s var(--ease) infinite; }
    @keyframes busy { from { left: -40%; } to { left: 100%; } }
    /* hareket azaltılmışsa kayan çubuk yerine sabit, yarı saydam tam genişlik çubuk: yükleniyor bilgisi kalır */
    @media (prefers-reduced-motion: reduce) {
        .lresults[aria-busy="true"]::before { width: 100%; opacity: .5; animation: none; }
    }
    .lfoot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: var(--sp-9); }
    .lfoot .pager { margin-top: 0; }
    .lfoot .muted { font-size: 13px; }

    /* iskelet kartlar: istek ~350 ms'den uzun sürerse gerçek ızgaranın üstüne biner (listing.js › showSkeleton); gerçek
       kartlar yerinde kalır, böylece cevap gelince FLIP onların konumundan çalışır */
    .lsk { position: absolute; inset: 0; z-index: 4; overflow: hidden; background: var(--bg);
        animation: lsk-in var(--t-med) var(--ease) both; }
    @keyframes lsk-in { from { opacity: 0; } }
    .lsk-card { display: flex; flex-direction: column; border: 1.5px solid var(--border); border-radius: var(--r-lg);
        overflow: hidden; }
    .lsk-media { aspect-ratio: 1; border-radius: 0; }
    .lsk-info { display: grid; gap: 10px; padding: 14px 16px 18px; }
    .lsk-info .sk:nth-child(1) { width: 34%; }
    .lsk-info .sk:nth-child(2) { width: 88%; height: 14px; }
    .lsk-info .sk:nth-child(3) { width: 52%; height: 18px; margin-top: 6px; }
    @media (max-width: 767.98px) { .lsk-info { padding: 10px 12px 14px; } }
    @media (prefers-reduced-motion: reduce) { .lsk { animation: none; } }

    /* sıralama alt sayfası (mobil) */
    .sort-list { display: grid; }
    .sort-list a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-inline: 4px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text); --ic: 20px; }
    .sort-list a[aria-current] { font-weight: 700; color: var(--acc-text); }
    .sort-list a:not([aria-current]) .icon { display: none; }
}