/* ==========================================================================
   BAHO — KATALOG (kategori, arama, marka listeleri)
   ==========================================================================
   Tasarım sistemi token'larını kullanır (baho.css).
   OpenCart'ın default stillerinden hiçbir şey devralmaz.
   ========================================================================== */

.bh-cat-page {
  background: var(--c-surface-sunken);
  padding-bottom: var(--s-16);
}


/* ==========================================================================
   BAŞLIK
   ========================================================================== */

.bh-cat-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
}

/* Üstbaşlık (eyebrow) KENDİ SATIRINDA.
   Flex kapsayıcıda yan yana geliyordu: "ARAMA “kupa”" tek satırda okunuyor
   ve hangi metnin başlık olduğu belirsizleşiyordu. flex-basis:100% onu
   satırın tamamına yayıyor, alt satıra başlık ve sayaç kalıyor. */
.bh-cat-head > .b-eyebrow {
  flex: 0 0 100%;
  margin: 0;
}

.bh-cat-title { margin: 0; }

.bh-cat-count {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

.bh-cat-desc {
  max-width: var(--w-prose);
  margin-bottom: var(--s-6);
  color: var(--c-ink-body);
}

.bh-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}


/* ==========================================================================
   ARAÇ ÇUBUĞU
   ========================================================================== */

.bh-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);

  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);

  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.bh-toolbar-count {
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
}

.bh-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.bh-sort,
.bh-limit {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.bh-sort-label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}

.bh-sort-select {
  width: auto;
  min-width: 168px;
  min-height: 38px;
  padding-block: 0;
  font-size: var(--t-sm);
}

.bh-limit .bh-sort-select { min-width: 84px; }


/* ==========================================================================
   ÜRÜN IZGARASI
   ========================================================================== */

.bh-products {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}

.bh-p {
  display: flex;
  flex-direction: column;

  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;

  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.bh-p:hover {
  border-color: var(--c-brand-a32);
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}

/* Stoksuz ürün listeden ÇIKARILMIYOR, sadece geri çekiliyor:
   206 ürün (%21,8) stoksuz; gizlemek katalogu fakirleştirir ve
   o sayfalar zaten indeksli. */
/* Soluklaştırma SİPARİŞ EDİLEMEYEN karta uygulanıyor, tükenen karta
   değil. "Stok Dışı Sipariş" ayarı açıkken adet 0 olan ürün de satılıyor;
   onu soluk göstermek kapalı sanılmasına yol açıyordu. Rozet (is-out)
   durumu ayrıca söylüyor. */
.bh-p.is-blocked { opacity: .72; }

.bh-p.is-blocked:hover { transform: none; box-shadow: var(--sh-sm); }

.bh-p-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--c-surface-warm);
  overflow: hidden;
}

.bh-p-media img {
  width: 100%;
  height: 100%;
  /* contain: ürün fotoğrafı kırpılmamalı — kupanın kulbu kesiliyordu */
  object-fit: contain;
  display: block;
  transition: transform .4s var(--e-out);
}

.bh-p:hover .bh-p-media img { transform: scale(1.04); }

.bh-p-flag {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
}

/*
  STOK DIŞI İŞARETİ — köşe rozeti, tam genişlik bandı DEĞİL.

  Eski hâli görselin altına tam genişlikte koyu bir banttı. Katalogda 206
  ürün stok dışı ve mobilde iki kolonda dört karttan üçü bu bandı
  taşıyabiliyor — sayfa kasvetli bir "tükendi" duvarına dönüşüyordu.
  Rozet aynı bilgiyi veriyor, görselin kendisini kapatmıyor.

  Bilgi ikinci kez de veriliyor (eylem satırındaki metin), ama artık
  ikisi de küçük — kartın hâkim öğesi ÜRÜN.
*/
.bh-p-out {
  position: absolute;
  inset: var(--s-2) var(--s-2) auto auto;

  padding: 3px var(--s-2);
  border-radius: var(--r-full);
  background: rgba(26, 26, 26, .82);
  color: #fff;
  backdrop-filter: blur(2px);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
}

.bh-p-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  flex: 1;
}

.bh-p-name {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-snug);

  /* İki satırda kesilir: kart yükseklikleri eşit kalır. Mevcut sitede
     tek satırda "..." ile kesiliyor ve ürün adları okunmuyordu. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bh-p-name a {
  color: var(--c-ink);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}

.bh-p-name a:hover { color: var(--c-brand-deep); }

.bh-p-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1);
  /* Fiyat kartın altına yaslanır; başlık bir veya iki satır olsa da
     bütün kartlarda aynı hizada durur. */
  margin-top: auto;
}

.bh-p-add { margin-top: var(--s-2); }


/* ==========================================================================
   SAYFALAMA
   OpenCart pagination HTML'i sabit; burada yeniden stillendiriliyor.
   ========================================================================== */

.bh-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--s-10);
}

.bh-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bh-pagination .pagination li a,
.bh-pagination .pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0 var(--s-3);

  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-body);
  text-decoration: none;

  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);

  transition: border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
}

.bh-pagination .pagination li a:hover {
  border-color: var(--c-brand);
  color: var(--c-brand-deep);
}

.bh-pagination .pagination li.active span {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}

/* OpenCart sayfalama sonuç metnini ayrı bir div'de basıyor */
.bh-pagination > .text-right,
.bh-pagination .results { display: none; }


/* ==========================================================================
   BOŞ DURUM
   ========================================================================== */

.bh-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  padding-block: var(--s-16);
}


/* ==========================================================================
   MOBİL
   ========================================================================== */

@media (max-width: 767px) {

  .bh-crumbs { padding-block: var(--s-3); font-size: var(--t-xs); }

  .bh-cat-head { margin-bottom: var(--s-3); }

  /*
    Araç çubuğu mobilde SABİT: 100+ ürünlük listede kullanıcı aşağı
    indikçe sıralamayı değiştirmek için başa dönmek zorunda kalmasın.
    top değeri header yüksekliği (56) + güvenli alan.
  */
  .bh-toolbar {
    position: sticky;
    top: calc(56px + var(--safe-top));
    z-index: 20;

    padding: var(--s-2) var(--s-3);
    margin-inline: calc(var(--s-4) * -1);
    margin-bottom: var(--s-4);

    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Ürün sayısı mobilde yer kaplıyor; başlıkta zaten yazıyor */
  .bh-toolbar-left { display: none; }

  .bh-toolbar-right {
    width: 100%;
    gap: var(--s-2);
  }

  .bh-sort  { flex: 1 1 auto; min-width: 0; }
  .bh-limit { flex: 0 0 auto; }

  .bh-sort-label { display: none; }

  .bh-sort-select {
    width: 100%;
    min-width: 0;
    /* 16px: iOS bunun altındaki alana odaklanınca sayfayı yakınlaştırıyor */
    font-size: 16px;
  }

  .bh-limit .bh-sort-select { min-width: 72px; }

  .bh-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }

  .bh-p { border-radius: var(--r-md); }

  .bh-p-body { padding: var(--s-3); gap: var(--s-1); }

  .bh-p-name { font-size: var(--t-xs); }

  /* Dokunmatikte hover yok */
  .bh-p:hover { transform: none; box-shadow: none; border-color: var(--c-line); }
  .bh-p:hover .bh-p-media img { transform: none; }
}

@media (max-width: 359px) {
  .bh-products { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   ARAMA SAYFASI
   ==========================================================================
   Kullanıcıların çoğu header'daki kutudan arıyor ve bu sayfaya yalnızca
   sonucu görmek için geliyor. O yüzden kriterler kapalı bir <details>
   içinde; sonuçlar ekranın üstünde kalıyor.
   ========================================================================== */

.bh-srch {
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.bh-srch-main {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.bh-srch-ico {
  flex: 0 0 auto;
  display: flex;
  color: var(--c-ink-faint);
}

.bh-srch-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.bh-srch-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font-family: var(--f-body);
  /* 16px altına inmez: iOS daha küçük yazıda odaklanınca sayfayı
     otomatik yakınlaştırıyor. */
  font-size: 16px;
}

.bh-srch-input:focus { outline: 0; }

.bh-srch-input::placeholder { color: var(--c-ink-faint); }

.bh-srch-btn { flex: 0 0 auto; }

/* ── Daraltma paneli ── */
.bh-srch-more {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}

.bh-srch-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  color: var(--c-brand);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  list-style: none;
}

/* Tarayıcının kendi üçgen işaretini kaldır: kendi okumuzu koyuyoruz. */
.bh-srch-summary::-webkit-details-marker { display: none; }
.bh-srch-summary::marker { content: ""; }

.bh-srch-summary svg {
  width: 10px;
  height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--d-fast) var(--e-out);
}

.bh-srch-more[open] .bh-srch-summary svg { transform: rotate(180deg); }

.bh-srch-fields {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-4);
}

.bh-srch-checks {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-5);
}

@media (max-width: 767px) {
  .bh-srch { padding: var(--s-4); }

  .bh-srch-main { flex-wrap: wrap; }

  .bh-srch-btn { width: 100%; }

  .bh-srch-fields { grid-template-columns: minmax(0, 1fr); }

  .bh-srch-checks { padding-top: 0; }
}


/* ==========================================================================
   BOŞ DURUM — arama ve liste sayfaları
   ==========================================================================
   Boş sonuç bir çıkmaz sokak olmamalı: ne denenebileceğini söylüyor ve
   kategorilere çıkış veriyor. */

.bh-empty-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-full);
  background: var(--c-surface-warm);
  color: var(--c-ink-faint);
}

.bh-empty-ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.bh-empty-tips {
  max-width: 46ch;
  margin: var(--s-4) auto;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

.bh-empty-tips li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-2);
}

.bh-empty-tips li::before {
  content: "";
  position: absolute;
  left: var(--s-2);
  top: .6em;
  width: 4px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--c-brand-a32);
}

.bh-empty-tips em {
  font-style: normal;
  font-weight: 600;
  color: var(--c-ink);
}

.bh-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
}


/* ==========================================================================
   MARKA LİSTESİ
   ==========================================================================
   Default şablon markaları harfe göre gruplayıp Bootstrap panelleri içinde
   basıyordu; bu katalogda marka sayısı az, harf grupları gereksiz bir
   hiyerarşi. Düz ızgara daha kısa ve taranması daha kolay. */

.bh-brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-10);
}

.bh-brand {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: var(--s-3) var(--s-4);

  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);

  color: var(--c-ink);
  font-size: var(--t-base);
  font-weight: 600;
  text-decoration: none;

  transition: border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}

.bh-brand:hover {
  border-color: var(--c-brand-a32);
  color: var(--c-brand-deep);
  box-shadow: var(--sh-sm);
  text-decoration: none;
}


/* ==========================================================================
   STOK DIŞI EYLEM SATIRI
   ==========================================================================
   Devre dışı bir "Tükendi" düğmesi yerine düz metin: tıklanamaz bir düğme
   tıklanabilir görünüp hiçbir şey yapmıyordu ve mobilde parmağın gittiği
   ilk yer oydu. Satır kart yüksekliklerini de eşit tutuyor.
   ========================================================================== */

.bh-p-oos {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  /* Düğme yüksekliğiyle aynı: kartlar tek satırda hizalı kalsın. */
  min-height: 36px;
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
}

.bh-p-oos-ask {
  color: var(--c-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bh-p-oos-ask:hover { color: var(--c-brand-deep); }

/* ── Sonsuz kaydırma: yükleme alanı ───────────────────────────────────
   Izgaranın altında, sayfalamanın yerini alıyor. Ortalı ve nefes
   alacak kadar boşluklu: kullanıcı buraya "listenin sonu mu, devamı
   mı" diye bakıyor, cevabın net olması gerek.
   ─────────────────────────────────────────────────────────────────── */
.bh-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) 0 var(--s-4);
  text-align: center;
}

.bh-more-btn {
  min-width: 15rem;
}

.bh-more-btn[disabled] {
  opacity: .6;
  cursor: progress;
}

/* Durum satırı yüklerken de "bitti" derken de aynı yeri kaplasın ki
   düğme ve altındaki içerik zıplamasın. */
.bh-more-status {
  margin: 0;
  min-height: 1.25em;
  color: var(--c-muted);
  font-size: .875rem;
}

/* [hidden] BU ÜÇÜ İÇİN AYRICA YAZILMAK ZORUNDA.
   `hidden` özniteliğinin display:none'u tarayıcının kendi stilinden
   geliyor ve HERHANGİ bir sınıf kuralı onu eziyor. .bh-pagination ve
   .bh-more'da display:flex, .b-btn'de display:inline-flex var; yani
   JS `hidden = true` dese bile üçü de görünmeye devam ediyordu.
   Ölçüldü: ekran görüntüsünde hem sayfa numaraları hem "Daha fazla"
   düğmesi hem de "tüm ürünler yüklendi" yazısı aynı anda duruyordu.
   DOM özelliğine bakmak yetmemişti, çünkü özellik doğruydu.
   Projedeki diğer bileşenler de bunu tek tek yazıyor
   (.bh-cart-badge[hidden], .bh-appbar[hidden] …). */
.bh-pagination[hidden],
.bh-more[hidden],
.bh-more-btn[hidden] {
  display: none;
}