/* ==========================================================================
   BAHO — MOBİL KATMAN
   ==========================================================================
   Yalnızca telefon/tablette veya WebView içinde yüklenir.
   Masaüstü bu dosyayı hiç indirmez — bkz. baho_theme.php

   Token'lar burada TANIMLANMAZ; hepsi baho.css'te. Bu dosya yalnızca
   mobile özgü davranış ve chrome içerir.

   Katman sözleşmesi:
     html.phone / html.tablet  → mobil web + uygulama (ORTAK TEMEL)
     html.in-app               → yalnızca uygulama içi (UYGULAMAYA ÖZEL CHROME)
   ========================================================================== */


/* ==========================================================================
   ORTAK TEMEL — mobil web + uygulama
   ========================================================================== */

html.phone,
html.tablet {
  /* iOS'ta yatay çevirince metnin kendiliğinden büyümesini engelle */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Dokunulan her şeydeki gri kutu parıltısı — en belirgin
     "bu bir web sayfası" sinyallerinden biri */
  -webkit-tap-highlight-color: transparent;
}

/* Mobilde bölüm aralıkları masaüstü kadar cömert olamaz:
   dikey alan pahalı. Ölçeği tek yerden daraltıyoruz. */
@media (max-width: 767px) {
  :root {
    --s-16: 40px;
    --s-20: 48px;
  }

  .b-container { padding-inline: var(--s-4); }

  .b-h1 { font-size: var(--t-2xl); }
  .b-h2 { font-size: var(--t-xl); }
  .b-h3 { font-size: var(--t-lg); }

  .b-section        { padding-block: var(--s-10); }
  .b-section--tight { padding-block: var(--s-8); }

  .b-section-head {
    /* Başlık ve "tümünü gör" bağlantısı dar ekranda yan yana sıkışmasın */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
  }

  /* Raylar kenardan kenara kaysın ama içerik hizada kalsın:
     kaydırma alanı taşar, ilk kart yine de container'la hizalıdır. */
  .bh-rail {
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
  }
}


/* ==========================================================================
   UYGULAMAYA ÖZEL CHROME — yalnızca WebView
   ========================================================================== */

/* Aşırı kaydırmada beyaz zıplama (rubber-band) WebView'de anında
   "gömülü tarayıcı" hissi verir. Uygulama içinde kapatılır; mobil
   tarayıcıda dokunulmaz, çünkü orada beklenen davranış budur. */
html.in-app,
html.in-app body {
  overscroll-behavior-y: none;
}

/* Uygulama içinde metin seçimi yalnızca gerçek içerikte anlamlı.
   Chrome elemanlarında uzun basınca çıkan seçim tutamaçları
   native hissi bozar. */
html.in-app {
  -webkit-user-select: none;
  user-select: none;
}

html.in-app p,
html.in-app li,
html.in-app h1,
html.in-app h2,
html.in-app h3,
html.in-app td,
html.in-app input,
html.in-app textarea,
html.in-app [data-baho-selectable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Uzun basınca çıkan iOS bağlam menüsü (görseli kaydet / linki aç) */
html.in-app img,
html.in-app a {
  -webkit-touch-callout: none;
}


/* ==========================================================================
   Alt sekme çubuğu — yalnızca uygulama içi
   --------------------------------------------------------------------------
   Mobil tarayıcıda gösterilmez: orada tarayıcının kendi çubuğu ekranın
   altını kullanıyor, ikisi üst üste binerdi.
   ========================================================================== */

:root { --tabbar-h: 56px; }

/* Çubuğun kaplayacağı alanı JS gelmeden ÖNCE ayır, yoksa çubuk
   enjekte edilince sayfa zıplar. */
html.in-app body {
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}

.baho-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  display: flex;
  align-items: stretch;

  background: var(--c-surface);
  border-top: 1px solid var(--c-line);

  /* Home indicator'ın altına taşmasın + yatay çentik */
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);

  font-family: var(--f-body);
}

.baho-tab {
  flex: 1 1 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  height: var(--tabbar-h);
  padding: 0 2px;

  color: var(--c-ink-muted);
  text-decoration: none;

  background: none;
  border: 0;
  cursor: pointer;

  /* Basılınca anında geri bildirim — gecikme native hissi bozar */
  transition: color var(--d-fast) var(--e-out),
              transform .1s var(--e-out);
  -webkit-tap-highlight-color: transparent;
}

.baho-tab:hover,
.baho-tab:focus { color: var(--c-ink-muted); text-decoration: none; }

.baho-tab:active { transform: scale(.92); }

.baho-tab svg {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.baho-tab-label {
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .01em;

  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.baho-tab.is-active { color: var(--c-brand); }
.baho-tab.is-active .baho-tab-label { font-weight: 600; }

/* Sepet rozeti */
.baho-tab-icon { position: relative; display: block; }

.baho-tab-badge {
  position: absolute;
  top: -5px;
  left: 13px;

  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;

  background: var(--c-brand);
  color: #fff;
  border-radius: var(--r-full);

  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;

  display: none;   /* sıfırken hiç görünmesin */
}

.baho-tab-badge.is-visible { display: block; }


/* ==========================================================================
   MOBİL SEPET — TAM EKRAN
   ==========================================================================
   Masaüstünde mini sepet bir açılır menü. Mobilde aynı DOM, aynı JS, farklı
   SUNUM: tam ekran bir sayfa.

   NEDEN AÇILIR MENÜ DEĞİL
   375px'lik ekranda 340px genişliğinde bir açılır panel zaten ekranın
   tamamını kaplıyor ama köşede duran, gölgeli, kaydırması belirsiz bir
   kutu gibi görünüyordu. Uygulamalarda sepet bir EKRAN — başlığı, kapatma
   düğmesi ve sabit bir eylem ayağı olan. Aynı işi yapıyor ama nerede
   olduğun belli.

   DOM'a dokunulmadı: .bh-mc hâlâ <ul>, panelin içi hâlâ tek bir <li>.
   common.js mini sepeti `$('#cart > ul').load(... ul li)` ile yeniliyor;
   yapıyı değiştirmek o sözleşmeyi kırardı.
   ========================================================================== */

@media (max-width: 767px) {

  /* Panel açıkken arka plan kaymasın. <html> üzerinde, çünkü iOS Safari
     body'deki overflow:hidden'ı yok sayıyor. */
  html.bh-cart-open,
  html.bh-cart-open body {
    overflow: hidden;
    /* Konum sabitleme yok: position:fixed body kaydırma konumunu
       sıfırlıyor ve panel kapanınca kullanıcı sayfanın başına düşüyor. */
  }

  .bh-mc {
    position: fixed;
    inset: 0;
    z-index: 1000;

    width: auto;
    max-width: none;
    max-height: none;
    min-width: 0;

    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    display: flex;
    flex-direction: column;

    /* Aşağıdan yukarı: kullanıcının parmağının olduğu yerden geliyor. */
    transform: translateY(100%);
    opacity: 1;
    transition: transform var(--d-base) var(--e-out);
  }

  .bh-mc.is-open { transform: translateY(0); }

  /* Panelin içi tek bir <li>; onu da esnek kolona çeviriyoruz ki
     başlık ve ayak sabit, orta kısım kaydırılabilir olsun. */
  .bh-mc > li {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }

  .bh-mc-head {
    flex: none;
    align-items: center;
    padding: calc(var(--s-4) + var(--safe-top)) var(--s-4) var(--s-4);
    border-bottom: 1px solid var(--c-line);
  }

  .bh-mc-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: var(--s-2);
    border: 0;
    border-radius: var(--r-full);
    background: var(--c-surface-warm);
    color: var(--c-ink);
    cursor: pointer;
  }

  .bh-mc-close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* Ürünler kaydırılabilir orta bölge */
  .bh-mc-items {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-4);
  }

  /* Toplam + eylemler sabit ayak: kullanıcı listeyi kaydırırken
     "Kasaya Git" ekrandan çıkmasın. */
  .bh-mc-totals,
  .bh-mc-actions {
    flex: none;
    padding-inline: var(--s-4);
  }

  .bh-mc-totals { padding-top: var(--s-4); border-top: 1px solid var(--c-line); }

  .bh-mc-actions {
    padding-bottom: calc(var(--s-4) + var(--safe-bottom));
    padding-top: var(--s-3);
  }

  .bh-mc-actions .b-btn { width: 100%; }

  .bh-mc-empty {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: var(--s-8) var(--s-4);
  }
}

/* Masaüstünde kapatma düğmesi gürültü: panel dışına tıklamak kapatıyor. */
@media (min-width: 768px) {
  .bh-mc-close { display: none; }
}


/* ==========================================================================
   MOBİL MENÜ (ÇEKMECE) — uygulama hissi
   ==========================================================================
   Eski hâli tek bir kategori listesiydi. Yeni kurgu: üstte kimlik, sonra
   bölümlere ayrılmış gezinme, altta sabit telefon. Native uygulamalarda
   yerleşik kalıp — kullanıcı nerede olduğunu ve nereye gidebileceğini tek
   ekranda görüyor.
   ========================================================================== */

.bh-drawer-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bh-drawer-logo img {
  width: auto;
  height: 30px;
  display: block;
}

/* ── Kimlik satırı ── */
.bh-drawer-me {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);

  margin: var(--s-3) var(--s-3) 0;
  padding: var(--s-3) var(--s-4);

  border-radius: var(--r-md);
  background: var(--c-brand-a08);
  color: var(--c-ink);
  text-decoration: none;
}

.bh-drawer-me-ava {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--c-brand);
  color: #fff;
}

.bh-drawer-me-ava svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-drawer-me-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.bh-drawer-me-text strong {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--c-ink);
}

.bh-drawer-me-text span {
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
}

.bh-drawer-me-go {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--c-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Kaydırılabilir gövde ── */
.bh-drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-4);
}

.bh-drawer-label {
  margin: var(--s-5) var(--s-5) var(--s-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.bh-drawer-nav { display: flex; flex-direction: column; }

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

  /* Dokunma hedefi 48px: 44px asgari, listede rahat kaydırma için biraz
     üstünde. */
  min-height: 48px;
  padding: var(--s-2) var(--s-5);

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

  transition: background var(--d-fast) var(--e-out);
}

.bh-drawer-link:active { background: var(--c-brand-a08); }

.bh-drawer-link.is-muted { color: var(--c-ink-muted); font-weight: 500; }

.bh-drawer-link svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--c-ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Telefon ayağı ── */
.bh-drawer-call {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);

  min-height: 52px;
  padding-inline: var(--s-4);
  border-top: 1px solid var(--c-line);

  background: var(--c-surface-warm);
  color: var(--c-brand-deep);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
}

.bh-drawer-call svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   MOBİL HEADER
   ==========================================================================
   Tek satır: menü / logo / arama / sepet. Bilgi şeridi ve kategori çubuğu
   mobilde gizli (ikisi de çekmeceye taşındı).

   SABİT (sticky): uygulamalarda üst bar hep orada. Kaydırınca içeriğin
   altına gölge düşüyor — nerede olduğunu söyleyen tek şey bu.
   ========================================================================== */

@media (max-width: 991px) {

  .bh-head {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--c-surface);
  }

  /* Bilgi şeridi mobilde gizli: aynı bilgiler çekmecenin altında ve
     iletişim sayfasında. Üç satırlık iletişim metni 375px'de iki satıra
     kırılıp header'ı 100px'e çıkarıyordu. */
  .bh-strip { display: none; }

  /*
    ÜÇ BÖLGELİ IZGARA — logo GERÇEKTEN ortada.

    Eskiden flex + `margin-inline: auto` vardı: logo, menü düğmesiyle
    eylemler arasındaki ARTIK ALANIN ortasına oturuyordu, ekranın ortasına
    değil. Ölçüm: bar 356px, logo merkezi 106, ekran merkezi 186 —
    80px'lik gözle görülür bir kayma.

    1fr | auto | 1fr yan bölgelere eşit genişlik veriyor; logo hangi
    tarafta kaç ikon olursa olsun tam ortada kalıyor.
  */
  .bh-bar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-2);
    min-height: 58px;
    padding-top: var(--safe-top);
  }

  .bh-menu-btn { justify-self: start; }

  .bh-logo {
    justify-self: center;
    margin-inline: 0;
  }

  /* 36px: 32px logo 58px'lik barda cılız duruyordu. Marka header'ın tek
     görsel çıpası. */
  .bh-logo img { height: 36px; width: auto; }

  .bh-actions {
    justify-self: end;
    gap: 2px;
  }

  /*
    DOKUNMA GERİ BİLDİRİMİ.
    Uygulama hissinin en ucuz ve en etkili parçası: dokunulan şey tepki
    veriyor. Tarayıcının gri parıltısı kapatıldığı için
    (-webkit-tap-highlight-color: transparent) yerine bir şey koymak
    zorunlu, yoksa dokunuş hiç geri dönüş vermiyor.
  */
  .bh-icon-btn,
  .bh-cart-btn {
    transition: background var(--d-fast) var(--e-out),
                transform var(--d-fast) var(--e-out);
  }

  .bh-icon-btn:active,
  .bh-cart-btn:active {
    background: var(--c-brand-a16);
    transform: scale(.92);
  }

  /* Arama alanı mobilde varsayılan olarak KAPALI, ikonla açılıyor.
     Açıkken barın tamamını kaplıyor — 375px'de logo + arama + iki ikon
     aynı satıra sığmıyor. */
  .bh-search-slot {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 10;

    padding: var(--s-3) var(--s-4);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-md);

    display: none;
  }

  /* SINIF .bh-head ÜZERİNDE, .bh-bar değil: baho.js arama düğmesine
     basınca `is-searching`'i #bh-head'e yazıyor. Yanlış öğeyi hedefleyen
     bir seçici sessizce hiçbir şey yapmaz. */
  .bh-head.is-searching .bh-search-slot { display: block; }

  .bh-bar { position: relative; }

  /* Hesap ve favori mobilde header'da DEĞİL: ikisi de çekmecede.
     56px'lik barda beş hedef, her biri 44px'in altına düşerdi. */
  .bh-actions-account,
  .bh-actions-wishlist { display: none; }

  .bh-cart-btn { padding: var(--s-1) var(--s-2); }

  /* Sepette yazı yok, yalnızca ikon + rozet: yer dar ve tutar zaten
     sepet ekranında. */
  .bh-cart-text { display: none; }
}

/* Kaydırma gölgesi — baho-mobile.js .is-stuck ekliyor */
@media (max-width: 991px) {
  .bh-head.is-stuck { box-shadow: var(--sh-md); }
}


/* ==========================================================================
   MOBİL ARAMA — TAM EKRAN
   ==========================================================================
   Arama alanı header'ın altına açılan bir satırdı: 40px yüksekliğinde bir
   kutu, arkasında sayfa görünüyor, klavye açıldığında kutu ekranın
   ortasında kalıyordu. Uygulamalarda arama bir EKRAN.

   AYNI DOM. İkinci bir #search basılmıyor — common.js aramayı
   `header #search input[name="search"]` ile okuyor ve ikinci bir kopya o
   seçiciyi belirsiz hâle getirirdi. Yalnızca sunum değişiyor.
   ========================================================================== */

@media (max-width: 991px) {

  .bh-search-slot {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: none;
    flex-direction: column;
    gap: var(--s-4);

    padding: calc(var(--s-4) + var(--safe-top)) var(--s-4) var(--s-4);
    background: var(--c-surface);
    border-bottom: 0;
    box-shadow: none;
  }

  .bh-head.is-searching .bh-search-slot { display: flex; }

  /* Arama açıkken arka plan kaymasın: kullanıcı klavyeyle uğraşırken
     altındaki liste kayıyordu. */
  .bh-head.is-searching { position: static; }

  /* Kapatma satırı: başlık + "İptal". Şablona dokunmadan ::before ile
     yapılamaz (metin gerekiyor), o yüzden arama formunun içindeki
     düğmeyi kullanıyoruz — bkz. baho.js initSearchToggle. */
  .bh-search-slot #search {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
  }

  .bh-search-slot #search input[name="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    /* 16px altına inmez: iOS daha küçük yazıda odaklanınca yakınlaştırıyor. */
    font-size: 16px;
  }

  /* Tam ekranda gönder düğmesi geri geliyor: klavyedeki "ara" tuşu her
     klavyede aynı yerde değil, görünür bir çıkış yolu gerekiyor. */
  .bh-head.is-searching .bh-search-submit {
    display: inline-flex;
    flex: 0 0 auto;
  }
}


/* ==========================================================================
   DOKUNMA GERİ BİLDİRİMİ — kartlar ve satırlar
   ==========================================================================
   Uygulama hissinin en belirgin parçası: dokunulan şey tepki veriyor.
   Tarayıcının gri parıltısı kapatıldığı için (baho-mobile.css başı) yerine
   bir şey koymak zorunlu — yoksa dokunuş sessiz kalıyor ve arayüz "ölü"
   hissediliyor.

   transform kullanılıyor, box-shadow/background DEĞİL: transform ana
   iş parçacığını bloklamıyor, düşük cihazda da 60fps kalıyor.
   ========================================================================== */

@media (hover: none) {

  .bh-p,
  .bh-acc-card,
  .bh-row--link,
  .bh-foot-act,
  .bh-brand,
  .bh-tiny,
  .b-chip {
    transition: transform var(--d-fast) var(--e-out);
  }

  .bh-p:active,
  .bh-acc-card:active,
  .bh-row--link:active,
  .bh-foot-act:active,
  .bh-brand:active,
  .bh-tiny:active,
  .b-chip:active {
    transform: scale(.975);
  }

  /* Kart içindeki düğme kendi tepkisini veriyor; kart da küçülürse iki kat
     hareket oluyor ve sıçrama gibi duruyor. */
  .bh-p .b-btn:active { transform: scale(.95); }

  /* Ürün ızgarasında dokunma hedefi: kartın tamamı bağlantı gibi
     davranıyor ama asıl bağlantı ad ve görsel. İkisi de 44px üstünde. */
  .bh-p-name a { display: block; padding-block: 2px; }
}


/* ==========================================================================
   KATEGORİ ŞERİDİ — liste sayfalarında hızlı geçiş
   ==========================================================================
   19 kategori var ve mobilde hepsi çekmecenin içinde. Bir kategoriye bakan
   kullanıcının komşusuna geçmesi için: çekmeceyi aç → kaydır → seç.
   Şerit bunu tek dokunuşa indiriyor.

   Yatay kaydırma + scroll-snap: kartlar arasında duran bir kaydırma,
   serbest kaydırmadan daha kontrollü hissediliyor.
   ========================================================================== */

.bh-catbar {
  display: none;
}

@media (max-width: 991px) {

  .bh-catbar {
    display: flex;
    gap: var(--s-2);

    /* Kenardan kenara kayıyor ama ilk çip container'la hizalı: negatif
       margin + eşit padding. */
    margin-inline: calc(var(--s-4) * -1);
    padding: var(--s-3) var(--s-4);

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .bh-catbar::-webkit-scrollbar { display: none; }

  .bh-catbar-item {
    flex: 0 0 auto;
    scroll-snap-align: start;

    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    background: var(--c-surface);

    color: var(--c-ink-body);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;

    transition: transform var(--d-fast) var(--e-out);
  }

  .bh-catbar-item:active { transform: scale(.95); }

  .bh-catbar-item.is-active {
    border-color: var(--c-brand);
    background: var(--c-brand);
    color: #fff;
  }
}


/* ==========================================================================
   SEPET SAYFASI — YAPIŞKAN ÖZET
   ==========================================================================
   Toptan siparişte sepette 90'a kadar satır olabiliyor (bu mağazada en
   büyük kayıtlı sepet 97 satır). "Siparişi Tamamla" düğmesi o listenin
   altında kalıyor ve kullanıcı toplamı görmek için de sonuna kaydırmak
   zorunda kalıyordu.

   Yapışkan ayak: toplam ve tek eylem her zaman ekranda.
   ========================================================================== */

@media (max-width: 900px) {

  .bh-sum {
    position: sticky;
    /* Alt sekme çubuğu varsa (uygulama içi) onun üstünde durmalı. */
    bottom: 0;
    z-index: 40;

    margin-inline: calc(var(--s-4) * -1);
    padding: var(--s-4);
    padding-bottom: calc(var(--s-4) + var(--safe-bottom));

    border: 0;
    border-top: 1px solid var(--c-line);
    border-radius: 0;
    background: var(--c-surface);
    box-shadow: 0 -6px 20px rgba(74, 48, 36, .1);
  }

  html.in-app .bh-sum {
    bottom: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--s-4);
  }

  /*
    YAPIŞKAN AYAKTA YALNIZCA GEREKLİ OLAN KALIYOR.

    Ayak ekranın altını kaplıyor; her satır oradan yer çalıyor. Ölçüm:
    kupon akordeonu, "Alışverişe devam et" ve bilgi satırları ile ayak
    ~320px oluyordu — 812px'lik ekranın %40'ı.

    KALANLAR: toplam, minimum sipariş uyarısı, tek eylem.
    Minimum uyarısı KALIYOR çünkü düğmenin neden pasif olduğunu o
    açıklıyor; onu gizlemek düğmeyi sebepsiz bozuk gösterirdi.

    ÇIKANLAR: kupon (firma kupon kullanmıyor, sessiz bir özellik),
    "Alışverişe devam et" (geri tuşu ve kategori şeridi bir dokunuş
    uzakta), bilgi satırları (aynı bilgiler ödeme sayfasında).
  */
  .bh-sum .bh-sum-notes,
  .bh-sum .bh-sum-back,
  .bh-sum .bh-sum-coupon,
  .bh-sum > .bh-sum-eyebrow { display: none; }

  /* Kupon akordeonunun başlığı ayrı bir öğe; o da gitsin. */
  .bh-sum details { display: none; }

  /* Toplam satırı ayakta tek başına kaldığı için daha güçlü. */
  .bh-sum .bh-sum-row.is-grand {
    padding-top: 0;
    border-top: 0;
  }
}


/* ── Tam ekran aramanın kapatma düğmesi ──
     Düğme JS ile ekleniyor (baho.js initSearchToggle): arama formu
     common/search.twig'te ve o dosya masaüstünde de kullanılıyor; orada
     gereksiz bir düğme basmamak için şablona değil koda konuldu. */

.bh-search-close { display: none; }

@media (max-width: 991px) {

  /* Arama açıkken gövde kilidi */
  html.bh-search-open,
  html.bh-search-open body { overflow: hidden; }

  .bh-head.is-searching .bh-search-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: var(--touch-min);
    height: var(--touch-min);
    border: 0;
    border-radius: var(--r-full);
    background: var(--c-surface-warm);
    color: var(--c-ink);
    cursor: pointer;
  }

  .bh-search-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
}


/* ==========================================================================
   LİSTE ARAÇ ÇUBUĞU — MOBİLDE ÇİP
   ==========================================================================
   Sıralama ve sayfa boyutu native <select>. NATIVE KALIYOR ve bu bilinçli:
   dokunmatikte <select> sistemin kendi seçicisini açıyor — gerçekten
   uygulama gibi olan şey bu. Kendi alt sayfamızı yazmak daha az native bir
   sonuç verirdi.

   Değişen yalnızca TETİKLEYİCİNİN GÖRÜNÜMÜ: web formu kutusu değil, çip.
   ========================================================================== */

@media (max-width: 767px) {

  .bh-toolbar {
    /* Sonuç sayacı mobilde gizli: aynı bilgi sayfalamanın altında var ve
       araç çubuğunun tek satırda kalması daha değerli. */
    gap: var(--s-2);
    padding: 0;
    border: 0;
    background: none;
  }

  .bh-toolbar-left { display: none; }

  .bh-toolbar-right {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-2);
    width: 100%;
  }

  .bh-sort,
  .bh-limit {
    position: relative;
    min-width: 0;
    margin: 0;
  }

  /* Etiket ("Sırala" / "Göster") çipin İÇİNDE, üstte küçük. Yanında
     dururken iki satırlık bir alan harcıyordu. */
  .bh-sort-label {
    position: absolute;
    top: 6px;
    left: var(--s-4);
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-ink-faint);
    pointer-events: none;
  }

  .bh-sort-select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px var(--s-8) 6px var(--s-4);

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

    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-ink);
  }

  .bh-sort-select:active { transform: scale(.98); }

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


/* ── Tam ekran aramanın içeriği ──
     Arama tam ekran açıldığında altı bomboş kalıyordu. Kategoriler bu
     boşluğu dolduruyor ve ne yazacağını bilmeyen kullanıcıya bir yol
     veriyor. Masaüstünde gizli: orada arama bir satır, altında sayfa var. */

.bh-search-quick { display: none; }

@media (max-width: 991px) {

  .bh-head.is-searching .bh-search-quick {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bh-search-quick-title {
    margin: 0 0 var(--s-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-ink-faint);
  }

  /* Çipler SARILIYOR, kaydırılmıyor: burada yer bol ve hepsini birden
     görmek taramayı hızlandırıyor. Kategori şeridindeki tek satırlık
     kaydırma orada yer dar olduğu için. */
  .bh-search-quick-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .bh-search-quick-list .bh-catbar-item { scroll-snap-align: none; }
}