/* ---------- Breadcrumb ---------- */
.site-breadcrumb { background: var(--c-accent-8); padding: 14px 0; font-size: 12px; color: var(--c-accent-4); }
.site-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Kategori / Tüm Ürünler başlığı (yalnızca ".page-listing" body sınıfı — magaza.php,
   kategori.php) — masaüstünde daha "premium" görünüm, tablet/mobilde küçülür. Diğer sayfaların
   ".site-section-head h1" başlıklarına dokunmaz. */
.page-listing .site-section-head h1 { font-weight: 300; letter-spacing: -0.4px; line-height: 1.15; }
@media (min-width: 992px) { .page-listing .site-section-head h1 { font-size: 32px; } }
@media (max-width: 991px) { .page-listing .site-section-head h1 { font-size: 28px; } }
@media (max-width: 767px) { .page-listing .site-section-head h1 { font-size: 24px; } }

/* ---------- Category / listing layout ---------- */
/* Kategori/Tüm Ürünler sayfasındaki ürün başlıkları eskiden çok satırlı sarılıp kartların boyunu
   eşitsiz ve dağınık gösteriyordu. Ana sayfadakiyle aynı çözüm: tek satır + "..." ile kısaltma.
   Görsel köşe yuvarlaklığı ve başlık boşluğu da ana sayfayla aynı hizaya getirildi (görsel oranı
   2/3 aynen korundu, değiştirilmedi). Sadece ".listing-product-grid" (magaza.php, kategori.php) —
   ürün detayına dokunulmadı. */
.listing-product-grid .product-card .p-img { border-radius: 12px; margin-bottom: 0; }
.listing-product-grid .product-card .p-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 14px;
  margin: 8px 0 0; padding: 0;
}
/* Masaüstünde (≥992px) kategori/tüm ürünler kartını ana sayfadaki ".home-product-grid" kartıyla
   birebir aynı yapar: aynı görsel oranı (3/4), aynı ızgara boşluğu (40px), aynı hover büyütme/geçiş,
   aynı başlık font boyutu (13px, home ile aynı), kategori etiketi gizli. Mobil/tablet (≤991px)
   burada tanımlı değil, mevcut listing davranışı (2/3 oran, 24/14px boşluk, 14px başlık) korunur. */
@media (min-width: 992px) {
  .product-grid.listing-product-grid { gap: 40px; }
  .listing-product-grid .product-card .p-img { aspect-ratio: 3/4; }
  .listing-product-grid .product-card .p-img img { object-position: center center; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .listing-product-grid .product-card:hover .p-img img { transform: scale(1.03); }
  .listing-product-grid .product-card .p-cat { display: none; }
  .listing-product-grid .product-card .p-title { font-size: 13px; }
}
.listing-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
/* Tek sütuna indiğinde (tablet/mobil) filtre kutusu ürünlerin üstünde kalıp kullanıcıyı büyük bir
   bloğu kaydırmaya zorluyordu. Sadece görsel sırayı değiştiriyoruz (order) — HTML/PHP değişmedi,
   ürünler önce görünüyor, filtre altta. */
@media (max-width: 991px) {
  .listing-layout { grid-template-columns: 1fr; }
  .listing-layout > aside { order: 2; }
  .listing-layout > div { order: 1; }
}
.filter-box { border: 1px solid var(--c-accent-3); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.filter-box h6 { margin-bottom: 14px; }
.filter-box .form-check { margin-bottom: 8px; font-size: 13px; }
.sidebar-cat-list { list-style: none; padding: 0; margin: 0; }
.sidebar-cat-list.sub { padding-left: 14px; margin-top: 4px; }
.sidebar-cat-list li { margin-bottom: 6px; }
.sidebar-cat-list a { display: block; font-size: 13px; color: var(--c-accent-1); padding: 4px 0; }
.sidebar-cat-list a.active { color: var(--c-accent-2); font-weight: 700; }
.sidebar-cat-list a:hover { color: var(--c-accent-2); }
.filter-clear-link { display: block; font-size: 12px; color: var(--c-accent-4); text-decoration: underline; margin-bottom: 14px; }
.filter-accordion { border-bottom: 1px solid var(--c-accent-3); padding-bottom: 14px; margin-bottom: 14px; }
.filter-acc-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none;
  padding: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-accent-1); cursor: pointer;
}
.filter-acc-head i { font-size: 11px; transition: transform .2s ease; }
.filter-acc-head.collapsed i { transform: rotate(180deg); }
.filter-acc-body { margin-top: 14px; max-height: 400px; overflow: hidden; transition: max-height .25s ease, margin-top .25s ease, opacity .2s ease; opacity: 1; }
.filter-acc-body.collapsed { max-height: 0; margin-top: 0; opacity: 0; }

.price-range-slider { position: relative; height: 4px; background: var(--c-accent-3); border-radius: 2px; margin: 10px 4px 14px; }
.price-range-track { position: absolute; height: 4px; background: var(--c-accent-2); border-radius: 2px; }
.price-range-input {
  position: absolute; top: -8px; left: 0; width: 100%; height: 20px; margin: 0; background: none;
  -webkit-appearance: none; appearance: none; pointer-events: none;
}
.price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-accent-2); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-accent-2); cursor: pointer;
}
.price-range-input::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--c-accent-2);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-accent-2); cursor: pointer;
}
.price-range-input::-webkit-slider-runnable-track { background: transparent; }
.price-range-input::-moz-range-track { background: transparent; }
.price-range-values { font-size: 12px; color: var(--c-accent-1); text-align: center; }

.listing-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.pagination-site { display: flex; gap: 8px; justify-content: center; margin-top: 40px; list-style: none; padding: 0; }
.pagination-site a, .pagination-site span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--c-accent-3); border-radius: var(--radius); font-size: 13px; }
.pagination-site .active { background: var(--c-accent-1); color: #fff; border-color: var(--c-accent-1); }

/* ---------- Star rating ---------- */
.star-rating { color: var(--c-star); font-size: 13px; letter-spacing: 1px; }
.star-rating .muted { color: var(--c-accent-3); }
.rating-count { font-size: 12px; color: var(--c-accent-4); margin-left: 6px; }

/* ---------- Product detail (referans: eticaretv9fashion.demobul.com.tr ürün sayfası — Playwright ile
   1440px ve 390px'te ölçülüp birebir uygulandı: galeri 64px küçük görsel sütunu + 12px boşluk + ana
   görsel (sabit yükseklik 740px masaüstü / 540px mobil, radius 12px, 1px kenarlık), fiyat 36px/700,
   başlık 30px/600, stok rozeti tam genişlik, buton yüksekliği 48px/radius 8px. Bu sınıfların tamamı
   (.product-detail-*, .variant-*, .qty-stepper, .product-price-block, .product-action-icons,
   .product-delivery-box) sadece urun.php'de kullanılıyor — kategori/mağaza sayfasının ".listing-layout"
   ve ".filter-*" kuralları bu dosyada ayrı kalır, etkilenmedi. */
.product-detail-gallery { display: flex; flex-direction: row; gap: 12px; }
.product-detail-gallery.no-thumbs { flex-direction: column; }
.product-detail-thumbs { display: flex; flex-direction: column; gap: 8px; width: 64px; flex: 0 0 64px; max-height: 700px; overflow-y: auto; order: 1; }
.product-detail-thumbs img { width: 64px; height: 64px; flex: 0 0 auto; border: 1px solid var(--c-accent-3); border-radius: 8px; cursor: pointer; aspect-ratio: 1; object-fit: cover; }
.product-detail-thumbs img.active { border-color: var(--c-accent-1); border-width: 2px; }
.product-detail-main { order: 2; flex: 1 1 auto; min-width: 0; border: 1px solid var(--c-accent-3); border-radius: 12px; overflow: hidden; background: #fff; height: 700px; }
.product-detail-main img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; background: var(--c-accent-8); }
@media (min-width: 1280px) { .product-detail-main { height: 740px; } .product-detail-thumbs { max-height: 740px; } }
@media (max-width: 767px) {
  .product-detail-gallery { flex-direction: column; }
  .product-detail-main { height: 540px; order: 1; }
  .product-detail-thumbs { order: 2; flex-direction: row; width: auto; flex: 0 0 auto; overflow-x: auto; overflow-y: visible; max-height: none; }
  .product-detail-thumbs img { width: 64px; height: 64px; }
}

.product-sku { font-size: 12px; color: var(--c-accent-4); }
.product-price-block { font-size: 36px; font-weight: 700; margin: 12px 0; }
.product-price-block .old { font-size: 18px; color: var(--c-accent-4); text-decoration: line-through; font-weight: 400; margin-right: 10px; }

.variant-group { margin-bottom: 18px; }
.variant-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-accent-4); margin-bottom: 8px; display: block; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 36px; padding: 0 12px;
  border: 1px solid var(--c-accent-3); border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer;
  background: #fff; transition: all var(--transition);
}
.variant-chip:hover { border-color: var(--c-accent-1); }
.variant-chip.active { border-color: var(--c-accent-1); background: var(--c-accent-1); color: #fff; }
.variant-chip.disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-accent-3); border-radius: 8px; height: 48px; }
.qty-stepper button { width: 38px; height: 46px; background: none; border: none; font-size: 16px; cursor: pointer; }
.qty-stepper input { width: 44px; text-align: center; border: none; font-family: var(--font-body); }

#addToCartSubmit, #buyNowSubmit { height: 48px; border-radius: 8px; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: normal; }
.buy-now-btn { background: var(--c-accent-2); border-color: var(--c-accent-2); }
.buy-now-btn:hover { background: var(--c-accent-1); border-color: var(--c-accent-1); }

.product-action-icons { display: flex; gap: 22px; flex-wrap: wrap; margin: 18px 0; }
.product-action-icons a, .product-action-icons button { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: none; border: none; cursor: pointer; color: var(--c-accent-1); }
.product-action-icons i { font-size: 16px; }

.product-delivery-box { border: 1px solid var(--c-accent-3); border-radius: var(--radius); padding: 16px 18px; background: var(--c-accent-8); font-size: 13px; }
.product-delivery-box .di-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.product-delivery-box .di-row:last-child { margin-bottom: 0; }
.product-delivery-box i { color: var(--c-accent-2); font-size: 16px; }

.site-tab-toggle { display: flex; gap: 30px; border-bottom: 1px solid var(--c-accent-3); margin: 40px 0 24px; flex-wrap: wrap; }
.site-tab-toggle button { background: none; border: none; padding: 12px 0; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; border-bottom: 2px solid transparent; cursor: pointer; color: var(--c-accent-4); }
.site-tab-toggle button.active { border-color: var(--c-accent-2); color: var(--c-accent-1); }

.review-item { border-bottom: 1px solid var(--c-accent-3); padding: 18px 0; }
.review-item:last-child { border-bottom: none; }
.review-item .review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.review-item .review-name { font-weight: 700; font-size: 13px; }
.review-item .review-date { font-size: 11px; color: var(--c-accent-4); }