/**
 * shop.css — Ürün kataloğu (woocommerce/archive-product.php): mağaza + kategori (TEK tasarım).
 *
 * Ürün kartı (.product-card / .product-grid) product.css'ten gelir (birlikte enqueue).
 * Burada: sayfa düzeni (kenar çubuğu + ana alan), kategori filtresi, araç çubuğu,
 * anahtar-kelime arama kutusu, sayfalama. Genel sınıflar yeniden tanımlanmaz.
 */

.shop { padding-block: clamp(var(--space-8), 4vw, var(--space-16)); }
.shop > .container { max-width: var(--container-xl); }

/* ═══════ Düzen: kenar çubuğu + ana alan ═══════ */
.shop__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
    align-items: start;
}

/* ── Kenar çubuğu (kategori filtresi) ── */
.shop__sidebar { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.shop-filter {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    background-color: var(--color-background);
}
.shop-filter__title {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--color-navy);
    margin-bottom: var(--space-4);
}
.shop-filter__title .icon { color: var(--color-accent); }
.shop-filter__list { display: flex; flex-direction: column; gap: 2px; }
.shop-filter__link,
.shop-filter__sublink {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: background-color var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}
.shop-filter__link { font-weight: 600; }
.shop-filter__link:hover,
.shop-filter__sublink:hover { background-color: var(--color-surface); color: var(--color-primary); }
.shop-filter__link.is-active,
.shop-filter__sublink.is-active { background-color: var(--color-primary); color: #fff; }
.shop-filter__count {
    flex-shrink: 0; font-size: var(--text-xs); font-weight: 600;
    color: var(--color-text-muted);
}
.shop-filter__link.is-active .shop-filter__count,
.shop-filter__sublink.is-active .shop-filter__count { color: rgb(255 255 255 / 0.8); }
.shop-filter__sublist {
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 var(--space-2) var(--space-3);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
}
/* Alt kategoriler: varsayılan kapalı; üzerine gelince (veya aktif kategoride) animasyonla açılır. */
.shop-filter__item.has-subs > .shop-filter__sublist {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    transition: max-height var(--duration-normal) var(--ease-default),
                margin var(--duration-normal) var(--ease-default),
                opacity var(--duration-normal) var(--ease-default);
}
.shop-filter__item.has-subs:hover > .shop-filter__sublist,
.shop-filter__item.has-subs:focus-within > .shop-filter__sublist,
.shop-filter__item.is-open > .shop-filter__sublist {
    max-height: 40rem;
    margin-top: 2px;
    margin-bottom: var(--space-2);
    opacity: 1;
}
.shop-filter__sublink { font-size: var(--text-xs); padding-block: var(--space-1); }

/* Alt kategori kutusu (archive-product.php basar) — yalnız mobilde görünür;
   masaüstünde kenar çubuğu listesi aktif dalın altlarını zaten açık gösterir. */
.shop-subcats { display: none; }

/* ── Ana alan ── */
.shop__toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.shop__count { font-size: var(--text-sm); color: var(--color-text-muted); }
.shop__count strong { color: var(--color-navy); font-size: var(--text-base); }
.shop__search {
    display: inline-flex; align-items: center; gap: var(--space-2);
    flex: 1 1 280px; max-width: 380px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-background);
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}
.shop__search:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.shop__search .icon { color: var(--color-text-muted); flex-shrink: 0; }
.shop__search input { flex: 1 1 auto; border: none; outline: none; background: transparent; font-size: var(--text-sm); color: var(--color-text); }

.shop__products { margin-top: 0; }

/* Ürün ızgarası kategori sayfasında 3 sütun; kenar çubuğu daralttığı için */
.shop .product-grid { grid-template-columns: repeat(3, 1fr); }

.shop__noresults,
.shop__empty {
    padding-block: var(--space-16); text-align: center;
    color: var(--color-text-muted); font-size: var(--text-lg);
}
.shop__empty a,
.shop__noresults a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Sayfalama ── */
.shop__pagination { margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
.shop__pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.shop__pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-weight: 600; font-size: var(--text-sm); color: var(--color-text);
    transition: background-color var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default);
}
.shop__pagination a.page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.shop__pagination .page-numbers.current { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.shop__pagination .page-numbers.dots { border-color: transparent; }

/* ── Duyarlı ── */
@media (max-width: 1100px) {
    .shop .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .shop__layout { grid-template-columns: 1fr; }
    .shop__sidebar { position: static; }
    .shop-filter__list { flex-flow: row wrap; }
    .shop-filter > .shop-filter__title { margin-bottom: var(--space-3); }
    .shop-filter__link { border: 1px solid var(--color-border); }
    .shop-filter__sublist { display: none; } /* pill listesinde alt kategori açılmaz — ayrı kutu var */
    /* Görüntülenen kategorinin alt kategorileri — filtrenin altında ayrı kutu */
    .shop-subcats { display: block; margin-top: var(--space-4); }
}
@media (max-width: 520px) {
    .shop .product-grid { grid-template-columns: 1fr 1fr; }
    .shop__search { max-width: none; }
}
@media (max-width: 400px) {
    /* Dar ekranda kartlar tek sütun — iki sütunda içerik okunmaz sıkışıyor */
    .shop .product-grid { grid-template-columns: 1fr; }
}