/* ══════════════════════════════════════════════════════════════
   Ürün listesi — üst araç çubuğu (iç içe satırlar: kontroller + kategori/marka
   şeritleri) + 4'lü ürün grid'i. Tüm renkler tema token'larından
   (--surface / --border / --accent / --muted / --text) → dark-mode otomatik.
   ══════════════════════════════════════════════════════════════ */
.pl-page { --pl-on-accent: #fff; }
[data-theme="dark"] .pl-page { --pl-on-accent: #0b0b0c; }   /* #2997ff üstünde beyaz 2.9:1 kalıyor → koyu metin */

/* ── Toolbar kabuğu: dikey yığın, her satır kendi çizgisiyle ayrılır ── */
.pl-toolbar {
    display: flex; flex-direction: column;
    margin-bottom: 1.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.pl-toolbar__row {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    padding: .75rem 1rem;
}
.pl-toolbar__row + .pl-toolbar__row { border-top: 1px solid var(--border); }
.pl-toolbar__main { justify-content: space-between; }

.pl-count { font: 500 .92rem/1 "Montserrat", sans-serif; color: var(--muted); letter-spacing: .01em; white-space: nowrap; }
.pl-count strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

.pl-controls { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pl-select { position: relative; display: inline-flex; align-items: center; }
.pl-field {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font: 500 .86rem/1 "Montserrat", sans-serif; border-radius: 999px;
    padding: .55rem 2.35rem .55rem 2.2rem; cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.pl-field:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.pl-field:focus-visible { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pl-select__icon { position: absolute; left: .92rem; color: var(--muted); font-size: .95rem; pointer-events: none; }
.pl-select__caret { position: absolute; right: .92rem; color: var(--muted); font-size: .72rem; pointer-events: none;
    transition: transform .18s ease; }

/* Arama: pill input + içine gömülü gönder butonu (Enter de gönderir) */
.pl-search { position: relative; display: inline-flex; align-items: center; }
.pl-search .pl-field { cursor: text; padding: .55rem 1rem .55rem 2.35rem; min-width: 220px; }
.pl-search .pl-field::placeholder { color: var(--muted); opacity: 1; }
.pl-search__btn {
    position: absolute; left: .2rem; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent;
    color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0;
    transition: color .18s ease, background-color .18s ease;
}
.pl-search__btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pl-search__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Filtreleri temizle — chip görünümlü link */
.pl-clear {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .9rem; border-radius: 999px; border: 1px dashed var(--border);
    color: var(--muted); font: 500 .82rem/1 "Montserrat", sans-serif; text-decoration: none; white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.pl-clear:hover { opacity: 1; color: #dc2626; border-color: #dc2626; background: rgba(220, 38, 38, .06); }
.pl-clear:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }

/* ── Filtre şeritleri: etiket + chip'ler (kategori / alt kategori / marka) ── */
.pl-filter { align-items: flex-start; }
.pl-filter__label {
    display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
    min-width: 7.25rem; padding: .46rem 0;
    font: 600 .7rem/1 "Montserrat", sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.pl-filter__label i { font-size: .92rem; }
.pl-chips { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 0; min-width: 0; }
.pl-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .9rem; border-radius: 999px;
    border: 1px solid var(--border); background: transparent; color: var(--text);
    font: 500 .84rem/1.2 "Montserrat", sans-serif; text-decoration: none; white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.pl-chip:hover {
    opacity: 1; color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.pl-chip:focus-visible { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pl-chip.is-active, .pl-chip.is-active:hover {
    background: var(--accent); border-color: var(--accent); color: var(--pl-on-accent); font-weight: 600; opacity: 1;
}
/* Ana kategori: seçili olan alt kategorinin ebeveyni — dolu değil, vurgulu kenar */
.pl-chip.is-open { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pl-chip__caret { font-size: .62rem; opacity: .75; }

/* Alt kategori şeridi: hafif zemin + küçük chip → hiyerarşi okunsun */
.pl-filter--sub { background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.pl-filter--sub .pl-filter__label { color: var(--accent); }
.pl-filter--sub .pl-chip { padding: .34rem .8rem; font-size: .8rem; }

/* ── Ürün kartı ── */
.pl-page .product-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--surface); border: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .35);
}
.pl-card__media {
    position: relative; display: block; /*aspect-ratio: 1 / 1;*/ overflow: hidden;
    background: color-mix(in srgb, var(--text) 4%, var(--surface));
}
/* Kırpma yok: görselin tamamı kare alanın içinde görünür. !important eski inline stili ezer. */
.pl-card__media img, .pl-page .product-card .card-img-top {
    display: block; width: 100%; height: 100% !important; object-fit: contain !important; padding: .75rem;
}
.pl-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 2.4rem; }
.pl-card__badges { position: absolute; top: .65rem; left: .65rem; z-index: 1; display: flex; flex-direction: column; gap: .3rem; }
.pl-card__badges .badge { font: 600 .66rem/1 "Montserrat", sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: .38rem .55rem; border-radius: 999px; }

.pl-card__body { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem 1rem; flex: 1 1 auto; }
.pl-card__brand {
    font: 600 .68rem/1.2 "Montserrat", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-card__title {
    margin: 0; font: 600 .95rem/1.35 "Montserrat", sans-serif;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-card__title a { color: var(--text); text-decoration: none; }
.pl-card__title a:hover { color: var(--accent); opacity: 1; }
.pl-card__code { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-card__price { margin-top: auto; padding-top: .55rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .5rem; }
.pl-card__price-now { font: 700 1.02rem/1 "Montserrat", sans-serif; color: var(--accent); font-variant-numeric: tabular-nums; }
.pl-card__price-old { font-size: .8rem; color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.pl-card__vat { font-size: .7rem; color: var(--muted); }

/* Boş durum */
.pl-empty { text-align: center; color: var(--muted); padding: 4rem 1rem; }
.pl-empty i { font-size: 2.6rem; display: block; margin-bottom: .9rem; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .pl-filter__label { min-width: 0; width: 100%; padding-bottom: 0; }
}
@media (max-width: 767.98px) {
    /* iOS Safari odak-zoom'unu engelle (font-size >= 16px) + dokunma hedefi >= 44px */
    .pl-field, .pl-search .pl-field { font-size: 16px; min-height: 44px; }
    .pl-search { flex: 1 1 100%; }
    .pl-search .pl-field { width: 100%; min-width: 0; }
    .pl-chip { min-height: 40px; padding: .45rem .95rem; flex: 0 0 auto; scroll-snap-align: start; }
    .pl-clear { min-height: 44px; }
    .pl-page .form-control-sm, .pl-page .form-select-sm { font-size: 16px; min-height: 44px; }

    /* Filtre şeritleri: etiket üstte, chip'ler tek satırda yatay kaydırmalı (sağ kenarda solma ipucu) */
    /* flex-wrap: nowrap şart — çok satırlı (wrap) sütun konteynerinde satır genişliği içerik kadar olur ve chip şeridi taşar */
    .pl-filter { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .35rem; padding-right: 0; }
    .pl-filter__label { width: auto; }
    .pl-chips {
        /* flex:none — scroll container'da min-height:auto=0 olduğundan 1 1 0 ile yükseklik sıfırlanıyordu */
        width: 100%; flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
        padding: 3px 2.25rem 3px 0; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
    }
    .pl-chips::-webkit-scrollbar { display: none; }
}
@media (max-width: 575.98px) {
    .pl-toolbar__main { justify-content: center; }
    .pl-controls { width: 100%; justify-content: center; }
    .pl-card__body { padding: .7rem .75rem .8rem; }
    .pl-card__title { font-size: .88rem; }
    .pl-card__price-now { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pl-field, .pl-select__caret, .pl-chip, .pl-clear, .pl-search__btn { transition: none; }
}