/* ==========================================================================
   GOREEL — TASARIM SİSTEMİ
   ==========================================================================
   Masaüstü ve mobilin paylaştığı tek dil. Her cihazda yüklenir.
   Yalnızca mobile ait kurallar goreel-mobile.css'te durur.

   Yaklaşım: kurumsal kimlik token'larda (1. bölüm, "Marka") — proje değişince
   yalnızca orası değişir;
   modernleşme tipografi değişiminden değil ARALIK, HİYERARŞİ ve BİLEŞEN
   tasarımından gelir. Şablon görünümünü yaratan şey font seçimi değil,
   sıkışık boşluklar ve zayıf hiyerarşidir.

   İÇİNDEKİLER
     1. Token'lar
     2. Temel (tipografi)
     3. Düzen
     4. Butonlar
     5. Kartlar
     6. Formlar
     7. Rozet / çip
     8. Yardımcılar
   ========================================================================== */


/* ==========================================================================
   1. TOKEN'LAR
   ========================================================================== */

:root {

  /* --- Marka ---
     Projeye özel tek blok: başka bir projede yalnızca bu değerler değişir.
     Fidobay: logonun turkuazı (#58D8E8) dekoratif vurgu olarak duruyor;
     üzerinde beyaz yazı okunmadığı için (kontrast 1.7) buton ve bağlantı
     rengi aynı tonun koyu karşılığı. Beyaz üzerinde 4.74:1 → WCAG AA. */
  --c-brand:          #0A7F8D;  /* ana eylem, bağlantı, vurgu */
  --c-brand-deep:     #06606B;  /* basılı/hover hâli (7.3:1) */
  --c-brand-bright:   #58D8E8;  /* logonun turkuazı — yalnızca dekor ve koyu zemin */
  --c-brand-rgb:      10, 127, 141;

  /* Markanın şeffaf tonları: zemin, kenarlık ve odak halkaları için.
     Sabit açık renk yerine alpha kullanmak her zeminde tutar. */
  --c-brand-a08:      rgba(var(--c-brand-rgb), .08);
  --c-brand-a16:      rgba(var(--c-brand-rgb), .16);
  --c-brand-a32:      rgba(var(--c-brand-rgb), .32);

  /* --- Mürekkep: saf siyah değil, markaya doğru çok hafif serin --- */
  --c-ink:            #0F1B1F;  /* başlıklar */
  --c-ink-body:       #3A4649;  /* gövde metni */
  --c-ink-muted:      #5E6E73;  /* ikincil metin — beyazda 5.3:1 */
  --c-ink-faint:      #9AA7AB;  /* placeholder, devre dışı */
  --c-ink-strong:     #0B2A30;  /* koyu yüzeyler: üst şerit, footer, toast */

  /* --- Yüzeyler ---
     Nötrler turkuazla aynı aileden (hafif mavi-yeşil). Sıcak bej
     turkuazın yanında kirli durur. */
  --c-surface:        #FFFFFF;
  --c-surface-sunken: #F5F8F9;  /* sayfa zemini */
  --c-surface-warm:   #EBF3F4;  /* bölüm ayrımı, sakin bloklar (ad tarihî) */
  --c-line:           #E2E9EB;  /* kenarlık */
  --c-line-strong:    #CBD6D9;

  /* --- Örtü ve gölge tabanı (rgb üçlüsü; alpha kullanımda verilir) --- */
  --c-shadow-rgb:     15, 40, 48;
  --c-scrim-rgb:      8, 28, 33;

  /* --- Durum --- */
  --c-success:        #2F8F4E;
  --c-success-bg:     #EAF5EE;
  --c-warning:        #B57A16;
  --c-warning-bg:     #FBF3E2;
  --c-danger:         #C0392B;
  --c-danger-bg:      #FBEDEB;

  /* --- Tipografi ---
     Plus Jakarta Sans: geometrik ama sıcak, rakamları net (fiyat ve stok
     kodu okunurluğu), Türkçe karakter seti tam. Tek aile, ağırlık
     kontrastıyla hiyerarşi — iki font yüklemekten hafif. */
  --f-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Ölçek — 1.200 (minör üçlü). Küçük ekranda sıkışmayacak kadar dar,
     hiyerarşiyi taşıyacak kadar geniş. */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;   /* 14 değil 15: uzun metinde okunabilirlik farkı gerçek */
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   25px;
  --t-2xl:  31px;
  --t-3xl:  39px;
  --t-4xl:  48px;

  --lh-tight: 1.15;   /* büyük başlıklar */
  --lh-snug:  1.35;   /* alt başlık, kart başlığı */
  --lh-body:  1.65;   /* gövde metni */

  /* Başlıklarda negatif harf aralığı — büyük puntoda en belirgin
     "profesyonel" sinyallerinden biri. */
  --ls-tight: -.02em;
  --ls-flat:   0;
  --ls-wide:   .06em;   /* küçük, büyük harfli etiketler */

  /* --- Aralık: 4px tabanlı --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* --- Yuvarlaklık --- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  /* --- Gölge: marka ailesinden serin taban; saf siyah gölge kirli durur --- */
  --sh-sm: 0 1px 2px rgba(var(--c-shadow-rgb), .06), 0 1px 3px rgba(var(--c-shadow-rgb), .05);
  --sh-md: 0 2px 6px rgba(var(--c-shadow-rgb), .06), 0 8px 20px rgba(var(--c-shadow-rgb), .06);
  --sh-lg: 0 4px 12px rgba(var(--c-shadow-rgb), .08), 0 20px 40px rgba(var(--c-shadow-rgb), .10);
  --sh-focus: 0 0 0 3px var(--c-brand-a32);

  /* --- Hareket: kısa ve amaçlı. 300ms+ arayüzü ağır hissettirir. --- */
  --e-out: cubic-bezier(.2, .8, .3, 1);
  --d-fast: .12s;
  --d-base: .2s;

  /* --- Düzen --- */
  --w-container: 1280px;
  --w-prose:     68ch;   /* okunabilir metin genişliği üst sınırı */

  /* --- Dokunma hedefi (WCAG 2.5.5 / HIG) --- */
  --touch-min: 44px;

  /* --- Güvenli alan; viewport-fit=cover header.twig'de ayarlı --- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}


/* ==========================================================================
   2. TEMEL

   Bileşenler .b- önekli ve .b-scope altında kapsamlı.
   Sebebi: default temanın Bootstrap stilleri hâlâ devrede — henüz
   devralmadığımız sayfalar onlara muhtaç. Global eleman seçicisi
   yazarsak o sayfaları bozarız. Sayfaları devraldıkça kapsam genişler.
   ========================================================================== */

.b-scope *,
.b-scope *::before,
.b-scope *::after {
  box-sizing: border-box;
}

.b-scope {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-ink-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.b-h1, .b-h2, .b-h3, .b-h4 {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.b-h1 { font-size: var(--t-3xl); }
.b-h2 { font-size: var(--t-2xl); }
.b-h3 { font-size: var(--t-xl); line-height: var(--lh-snug); }
.b-h4 { font-size: var(--t-md); line-height: var(--lh-snug); letter-spacing: var(--ls-flat); }

/* Belleza zarif ama ince; yalnızca büyük vitrin başlıklarında kullanılır,
   arayüz metninde değil. */
.b-display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: var(--ls-flat);
}

/* Bölüm üstü küçük etiket — "YENİ GELENLER" gibi */
.b-eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-brand);
}

.b-lead {
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  max-width: var(--w-prose);
}

.b-muted { color: var(--c-ink-muted); }
.b-small { font-size: var(--t-sm); }

/*
  Çıplak `a` seçicisi BİLİNÇLİ olarak kullanılmıyor.

  `.b-scope a` (bir sınıf + bir eleman) spesifiklik olarak `.b-btn--primary`
  gibi tek sınıflı bileşen kurallarını EZER. İlk denemede tam bu oldu:
  hero'daki butonun yazısı terracotta zemin üzerinde terracotta çıktı,
  yani görünmez oldu.

  Tek butonu yamamak sorunu çözmez — aynı tuzak her `<a>` tabanlı bileşende
  (kart, çip, sekme) yeniden kurulur. Bu yüzden bağlantı rengi artık açık
  bir sınıfla veriliyor; bileşenler kendi rengine sahip.
*/
.b-link {
  color: var(--c-brand);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}

.b-link:hover {
  color: var(--c-brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Serbest metin içindeki bağlantılar (açıklama, bilgi sayfaları) */
.b-prose a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.b-prose a:hover { color: var(--c-brand-deep); }

/* Klavye kullanıcısı için görünür odak; fare tıklamasında görünmez */
.b-scope :focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}


/* ==========================================================================
   3. DÜZEN
   ========================================================================== */

.b-container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* Bölüm dikey ritmi. Mevcut sitenin en görünür sorunlarından biri
   bölümlerin nefes alamamasıydı — burada cömert davranıyoruz. */
.b-section        { padding-block: var(--s-16); }
.b-section--tight { padding-block: var(--s-10); }
.b-section--warm  { background: var(--c-surface-warm); }

.b-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

/* Otomatik duyarlı grid: sütun sayısını medya sorgusu olmadan kendi
   ayarlar. --min ile sütun taban genişliği değiştirilir. */
.b-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr));
}

.b-stack > * + * { margin-top: var(--s-4); }


/* ==========================================================================
   4. BUTONLAR
   ========================================================================== */

.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);

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

  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;

  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
  -webkit-tap-highlight-color: transparent;
}

.b-btn:active { transform: translateY(1px); }

.b-btn[disabled],
.b-btn.is-disabled {
  opacity: .5;
  pointer-events: none;
}

/* Birincil eylem terracotta.
   Mevcut sitede "Sepete Ekle" YEŞİLDİ; markayla ilgisi yoktu ve
   terracotta'nın yanında uyumsuz duruyordu. Yeşil artık yalnızca
   başarı durumlarında kullanılıyor. */
.b-btn--primary {
  background: var(--c-brand);
  color: #fff;
  box-shadow: var(--sh-sm);
}

.b-btn--primary:hover {
  background: var(--c-brand-deep);
  color: #fff;
  box-shadow: var(--sh-md);
}

.b-btn--secondary {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}

.b-btn--secondary:hover {
  background: var(--c-surface-warm);
  border-color: var(--c-brand);
  color: var(--c-brand-deep);
}

.b-btn--ghost {
  background: transparent;
  color: var(--c-ink);
  padding-inline: var(--s-3);
}

.b-btn--ghost:hover {
  background: var(--c-brand-a08);
  color: var(--c-brand-deep);
}

.b-btn--lg    { min-height: 52px; padding-inline: var(--s-8); font-size: var(--t-base); }
.b-btn--sm    { min-height: 36px; padding-inline: var(--s-4); font-size: var(--t-xs); }
.b-btn--block { display: flex; width: 100%; }

/* Yalnızca ikon içeren buton — kare ve dokunma hedefine uygun */
.b-btn--icon {
  padding: 0;
  width: var(--touch-min);
  min-width: var(--touch-min);
}

.b-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   5. KARTLAR
   ========================================================================== */

.b-card {
  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);
}

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

/* Görsel kabının oranı SABİT: grid'de kartlar hizalanır ve görseller
   yüklenirken sayfa zıplamaz (CLS). */
.b-card-media {
  position: relative;
  aspect-ratio: var(--card-ratio, 1 / 1);
  background: var(--c-surface-warm);
  overflow: hidden;
}

.b-card-media img {
  width: 100%;
  height: 100%;
  /* contain: ürün fotoğrafları kırpılmamalı. cover kullanınca
     kupanın kulbu, biblonun tepesi kesiliyor. */
  object-fit: contain;
  display: block;
  transition: transform .4s var(--e-out);
}

.b-card--interactive:hover .b-card-media img { transform: scale(1.04); }

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

/* Ürün başlığı 2 satırda kesilir: kartların yüksekliği eşit kalır.
   Mevcut sitede tek satırda "..." ile kesiliyor ve isimler okunmuyordu. */
.b-card-title {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.b-price {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
}

.b-price--old {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-faint);
  text-decoration: line-through;
  margin-left: var(--s-2);
}

.b-price--new { color: var(--c-brand); }


/* ==========================================================================
   6. FORMLAR
   ========================================================================== */

.b-field { display: flex; flex-direction: column; gap: var(--s-2); }

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

.b-input,
.b-select,
.b-textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--s-3) var(--s-4);

  font-family: var(--f-body);
  /* iOS'ta 16px ALTINDAKİ input'a odaklanınca sayfa kendiliğinden zoom
     yapar ve düzen kayar. Mobilde en sık gözden kaçan "web sitesi"
     sinyallerinden biri budur — bu yüzden token değil sabit 16px. */
  font-size: 16px;
  color: var(--c-ink);

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

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

.b-input::placeholder,
.b-textarea::placeholder { color: var(--c-ink-faint); }

.b-input:focus,
.b-select:focus,
.b-textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--sh-focus);
}

.b-input.is-invalid,
.b-select.is-invalid { border-color: var(--c-danger); }

.b-help  { font-size: var(--t-sm); color: var(--c-ink-muted); }
.b-error { font-size: var(--t-sm); color: var(--c-danger); }

.b-select {
  /* Yerleşik ok yerine kendi ikonumuz: tarayıcılar arası tutarlılık */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 18px;
  padding-right: var(--s-10);
}


/* ==========================================================================
   7. ROZET / ÇİP
   ========================================================================== */

.b-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);

  padding: 3px var(--s-2);

  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;

  border-radius: var(--r-sm);
  background: var(--c-brand-a16);
  color: var(--c-brand-deep);
}

.b-badge--success { background: var(--c-success-bg); color: var(--c-success); }
.b-badge--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.b-badge--danger  { background: var(--c-danger-bg);  color: var(--c-danger); }
.b-badge--solid   { background: var(--c-brand);      color: #fff; }

/* Filtre/sıralama seçenekleri için tıklanabilir çip */
.b-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);

  min-height: 36px;
  padding: 0 var(--s-4);

  font-size: var(--t-sm);
  font-weight: 500;

  background: var(--c-surface);
  color: var(--c-ink-body);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  cursor: pointer;

  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
  -webkit-tap-highlight-color: transparent;
}

.b-chip:hover { border-color: var(--c-brand); color: var(--c-brand-deep); }

.b-chip.is-active {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}


/* ==========================================================================
   8. BREADCRUMB
   --------------------------------------------------------------------------
   PAYLAŞILAN bileşen, bu yüzden tasarım sisteminde duruyor.
   Önce goreel-catalog.css'teydi ve ürün sayfası o dosyayı yüklemediği için
   breadcrumb OpenCart'ın varsayılan mavisine (#23A1D1) düşüyordu.
   Aynı hata .bh-rail'de de olmuştu: birden fazla sayfada kullanılan
   bileşen, tek bir sayfanın dosyasında tanımlanmaz.
   ========================================================================== */

/*
  Tek breadcrumb dili — HER SAYFADA.

  İki ayrı işaretleme var ve ikisi de aynı görünmek zorunda:
    .bh-crumbs   devraldığımız şablonlar
    ul.breadcrumb  OpenCart'ın kendi şablonları

  İkincisini de burada biçimlendirmek şart: henüz devralmadığımız her
  sayfada (site haritası, marka listesi, iade formu…) Bootstrap'ın gri
  kutulu, çevron oklu breadcrumb'ı çıkıyordu ve sayfa anında "OpenCart"
  gibi görünüyordu. Kural burada durduğu sürece yeni bir sayfa devralmayı
  beklemeden düzelmiş oluyor.

  Ayraç ::after ile basılıyor, boşluk gap'ten geliyor — Bootstrap'ın
  content:"/" + padding kalıbı iki ayrı yerden boşluk üretip hizayı
  bozuyordu.
*/
/* Yıkıcı eylem düğmesi — hesap silme gibi geri alınamaz işler.
   Terracotta ile karışmaması için ayrı bir kırmızı: markanın sıcak
   kırmızısı "sil" sinyali vermiyor. */
.b-btn--danger {
  background: var(--c-danger);
  color: #fff;
}

.b-btn--danger:hover {
  background: #9C2E22;
  color: #fff;
}


.bh-crumbs,
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);

  margin: 0;
  padding: var(--s-5) 0;
  list-style: none;

  background: none;
  border-radius: 0;

  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
}

.bh-crumb,
.breadcrumb > li,
.breadcrumb > li > a {
  color: var(--c-ink-muted);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}

.bh-crumb:hover,
.breadcrumb > li > a:hover {
  color: var(--c-brand-deep);
  text-decoration: none;
}

.bh-crumb.is-current { color: var(--c-ink); }

/* Son öğe geçerli sayfa: vurgulu ve bağlantı gibi davranmıyor. */
.breadcrumb > li:last-child,
.breadcrumb > li:last-child > a {
  color: var(--c-ink);
  pointer-events: none;
}

.bh-crumb-sep { color: var(--c-ink-faint); }

/*
  DEFAULT TEMANIN ÇEVRON OKLARI SÖNDÜRÜLÜYOR.
  catalog/view/theme/default/stylesheet/stylesheet.css:359 her <li>'ye
  ::after ile 26x26 döndürülmüş bir kutu basıp gri çevron çiziyor ve
  li'lere 0 20px padding veriyor. Bu iki kural birlikte breadcrumb'ı
  "OpenCart" yapan şeyin kendisi.

  ::after'ı content:none ile susturmak YETMEZ — kural `border-right`,
  `transform` ve `position:absolute` da veriyor; content boşsa bile
  kutu çizilmeye devam eder. O yüzden display:none.
*/
.breadcrumb {
  border: 0;
}

.breadcrumb > li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  text-shadow: none;
  white-space: nowrap;
}

.breadcrumb > li::after { display: none; }

.breadcrumb > li + li::before { content: none; padding: 0; }

/* Ayraç: her öğenin ARDINDAN, sondaki hariç. Ayrı bir ::before/::after
   yerine tek yön kullanmak, yukarıdaki display:none ile çakışmaması için
   ::before'a taşındı. */
.breadcrumb > li + li::before {
  content: "/";
  display: inline;
  color: var(--c-ink-faint);
  font-weight: 400;
}

/*
  Ana sayfa öğesi bir Font Awesome ev ikonu (i.fa-home) taşıyor.
  Font Awesome bu sayfalarda YÜKLÜ, yani ikon çıkıyor — ama ölçüsü
  metinden farklı ve satırı aşağı çekiyor. Metne çevriliyor: breadcrumb
  bir yol göstergesi, ikon burada bilgi taşımıyor.
*/
/*
  Ana sayfa öğesi bir Font Awesome ev ikonu taşıyor (breadcrumb.text
  içinde <i class="fa fa-home"></i> olarak geliyor — hem OpenCart'ın
  şablonlarında hem bizimkilerde, çünkü metin controller'dan öyle
  üretiliyor). Font Awesome yüklü, yani ikon çıkıyor; ama ölçüsü metinden
  farklı ve satır tabanını aşağı çekiyor. Metne çevriliyor: breadcrumb bir
  yol göstergesi, ikon burada bilgi taşımıyor.
*/
.breadcrumb i.fa,
.bh-crumbs i.fa { display: none; }

.breadcrumb > li:first-child > a::after,
.bh-crumbs > .bh-crumb:first-child::after { content: "Ana Sayfa"; }

@media (max-width: 767px) {
  .bh-crumbs,
  .breadcrumb { padding-block: var(--s-3); }
}


/* ==========================================================================
   9. YARDIMCILAR
   ========================================================================== */

.b-divider {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}

/* Görsel olarak gizli ama ekran okuyucuya açık */
.b-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  Yatay kaydırmalı şerit — ilgili ürünler, son gezilenler vb.
  scroll-snap kaydırmayı "kartlar arasında duran" hâle getirir.

  ADLANDIRMA NOTU: bu her zaman YATAY bir şerittir. Ana sayfadaki ürün
  bölümü ise masaüstünde ızgara, mobilde şerit oluyor — o ayrı bir
  bileşen ve .bh-pgrid adını taşıyor. İkisi bir ara aynı ismi
  paylaşıyordu ve ürün sayfasındaki şeritler dikey diziliyordu.
*/
.bh-rail {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bh-rail::-webkit-scrollbar { display: none; }
.bh-rail > * { scroll-snap-align: start; flex: none; }

/* "Hareketi azalt" tercihine saygı — erişilebilirlik gereği */
@media (prefers-reduced-motion: reduce) {
  .b-scope *,
  .b-scope *::before,
  .b-scope *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   10. BOŞ DURUM / BULUNAMADI SAYFASI
   --------------------------------------------------------------------------
   Paylaşılan bileşen: hem 404 hem boş sepet bunu kullanıyor (OpenCart'ın
   cart controller'ı sepet boşken error/not_found render ediyor).
   Bu yüzden sayfa dosyasında değil tasarım sisteminde duruyor.
   ========================================================================== */

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

.bh-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);

  max-width: 520px;
  margin-inline: auto;
  padding-block: var(--s-16);
  text-align: center;
}

.bh-empty-ico {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;

  color: var(--c-brand);
  background: var(--c-brand-a08);
  border-radius: var(--r-full);
}

.bh-empty-ico svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-empty-box .b-lead { text-align: center; }

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


/* ==========================================================================
   MESAFELİ SATIŞ SÖZLEŞMESİ
   ==========================================================================
   Metin oc_information_description'da duruyor ve yer tutucularla yazılmış;
   doldurma işini goreel_agreement.php yapıyor (model olayı). Buradaki stiller
   hem tam sayfada hem ödeme sayfasındaki modalda geçerli.

   MODAL NEDEN BOOTSTRAP: sözleşme bağlantısına (a.agree) OpenCart'ın
   common.js'i global bir delegated listener bağlıyor ve #modal-agree'yi
   kendisi kuruyor. Bizim akış JS'imiz o bağlantıya dokunmuyor — modal
   sayfada kalmayı sağladığı için yeni sekmeden daha iyi.
   ========================================================================== */

/* Sözleşme gövdesi: uzun hukuki metin, okunabilirlik önce gelir. */
.bh-ag {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-body);
}

.bh-ag h2 {
  margin: var(--s-6) 0 var(--s-3);
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-brand-deep);
}

.bh-ag h2:first-child { margin-top: 0; }

.bh-ag h3 {
  margin: var(--s-4) 0 var(--s-2);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink);
}

.bh-ag p { margin: 0 0 var(--s-3); }

.bh-ag ul {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-5);
}

.bh-ag li { margin-bottom: var(--s-1); }

/* Taraf bilgileri: etiket/değer çiftleri. Tablo değil, çünkü dar ekranda
   tek kolona düşmesi gerekiyor. */
.bh-ag-dl {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-surface-sunken);
}

.bh-ag-dl dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.bh-ag-dl dd {
  margin: 0;
  font-weight: 600;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .bh-ag-dl { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .bh-ag-dl dd { margin-bottom: var(--s-2); }
}

/* Değeri henüz girilmemiş alan (Mersis No gibi) boş bir <dd> olarak
   basılıyor; satırın çökmemesi için asgari yükseklik. */
.bh-ag-dl dd:empty::before { content: "—"; color: var(--c-ink-faint); }

.bh-ag-table {
  width: 100%;
  margin: var(--s-4) 0;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.bh-ag-table th,
.bh-ag-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.bh-ag-table thead th {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  border-bottom-color: var(--c-line-strong);
}

.bh-ag-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bh-ag-table tfoot .bh-ag-total td { font-weight: 600; }

.bh-ag-table tfoot tr:last-child td {
  border-bottom: 0;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--c-brand-deep);
}

.bh-ag-empty {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-line-strong);
  background: var(--c-surface-sunken);
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

/*
  Sözleşme modalı — Bootstrap'in kendi görünümü bastırılıyor.
  Tablo dar ekranda kendi kapsayıcısında kaydırılıyor; gövde yatay
  kaydırmaz.
*/
#modal-agree .modal-dialog {
  max-width: 760px;
  width: calc(100% - var(--s-8));
}

#modal-agree .modal-content {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

#modal-agree .modal-header {
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-line);
}

#modal-agree .modal-title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}

#modal-agree .modal-body {
  padding: var(--s-6);
  max-height: 70vh;
  overflow-y: auto;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-body);
}

#modal-agree .modal-body > * { overflow-wrap: anywhere; }

/* Tablo taşarsa gövde değil tablo kaydırılır */
#modal-agree .modal-body .bh-ag-table { display: block; overflow-x: auto; }

#modal-agree .close {
  font-size: 28px;
  line-height: 1;
  opacity: .5;
}

#modal-agree .close:hover { opacity: 1; }


/* ==========================================================================
   GENEL BAŞARI / BİLGİ EKRANI
   ==========================================================================
   common/success dokuz ayrı route tarafından kullanılıyor: çıkış, kayıt,
   iade talebi, iletişim mesajı, ödeme başarısız, hediye çeki…

   NEDEN BURADA (goreel.css) ve goreel-order.css'te DEĞİL:
   o dosya yalnızca checkout/success ve account/order/info route'larında
   yükleniyor. Çıkış sayfası onu almadığı için tik SVG'si `fill: none`
   alamıyor ve dev bir SİYAH ÜÇGENE dönüşüyordu — path olduğu gibi
   dolduruluyor ve kapsayıcı genişliğine ölçekleniyor. Bu blok her sayfada
   yüklenen dosyada durmak zorunda.
   ========================================================================== */

.bh-msg {
  max-width: 560px;
  margin: var(--s-10) auto var(--s-16);
  padding: var(--s-10) var(--s-8);
  text-align: center;

  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.bh-msg h1 { margin: 0 0 var(--s-3); }

.bh-msg-ico {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-full);
  background: var(--c-success-bg);
  color: var(--c-success);
}

.bh-msg-ico svg {
  width: 28px;
  height: 28px;
  /* fill:none ZORUNLU — yoksa path dolu bir üçgen olarak çiziliyor. */
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-msg-text {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

.bh-msg-text p { margin: 0 0 var(--s-2); }

/* Kayıt sonrası "son bir adım" bilgisi: metin, düğmenin gerekçesi. */
.bh-msg-next {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-brand);
  background: var(--c-brand-a08);
  text-align: left;
}

.bh-msg-next-text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-body);
}

.bh-msg-next-text strong { color: var(--c-ink); }

.bh-msg-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}


/* ==========================================================================
   FİYAT KAPISI — giriş yapmamış ziyaretçi
   ==========================================================================
   Toptan fiyatlar yalnızca üyelere açık. Fiyatın YERİNE ne konduğu üç
   yerde farklı, çünkü bağlam farklı:

     .bh-price-gate  ray ve mini kartlar — düz etiket. Kart yüksekliği
                     korunsun diye var; tıklanabilir bir şey koymak
                     ızgarada gürültü olurdu (kartın kendisi zaten ürüne
                     gidiyor).
     .bh-p-gate      ürün ızgarası kartı — hem fiyatın hem "Sepete Ekle"
                     düğmesinin yerine geçen TEK bağlantı.
     .bh-pd-gate     ürün sayfası — belirgin kutu. Müşteri oraya fiyatı
                     öğrenmek için geldi; eylem çağrısı o ölçüde net.
   ========================================================================== */

.bh-price-gate {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-brand);
}

/* Izgara kartı: düğme boyunda ki kartlar aynı yükseklikte kalsın. */
.bh-p-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);

  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-brand);
  border-radius: var(--r-md);

  background: var(--c-brand-a08);
  color: var(--c-brand);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  text-align: center;

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

.bh-p-gate:hover { background: var(--c-brand); color: #fff; }

/* Dar kartta uzun metin iki satıra kırılıp kartı şişiriyordu */
.bh-p-gate { white-space: nowrap; }
.bh-p-gate-short { display: none; }

@media (max-width: 767px) {
  .bh-p-gate { min-height: 40px; padding: var(--s-2); font-size: var(--t-sm); }
  .bh-p-gate-long { display: none; }
  .bh-p-gate-short { display: inline; }
}

.bh-p-gate-ico svg,
.bh-pd-gate-ico svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ürün sayfası: fiyatın durduğu yerde, onun ağırlığında bir kutu. */
.bh-pd-gate {
  display: flex;
  align-items: center;
  gap: var(--s-3);

  padding: var(--s-4);
  border: 1px solid var(--c-brand);
  border-radius: var(--r-lg);

  background: var(--c-brand-a08);
  color: var(--c-ink-strong);
  text-decoration: none;

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

.bh-pd-gate:hover { background: rgba(var(--c-brand-rgb), .14); }

.bh-pd-gate-ico {
  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-pd-gate-ico svg { width: 20px; height: 20px; }

.bh-pd-gate-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bh-pd-gate-text strong {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-brand);
}

.bh-pd-gate-text small {
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
}


/* Koli bazında satış: kartta birim + koli bilgisi (kategori, arama ve
   ana sayfa raylarında ortak — bu yüzden tasarım sisteminde) */
.bh-p-per {
  margin-left: 2px;
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
}

.bh-p-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-brand-deep);
}

.bh-p-box-txt { white-space: nowrap; }

/* "+1 koli": adet kutusuna bir koli ekler (product/_buy.twig) */
.bh-p-boxadd {
  flex: none;
  padding: 3px 9px;
  font: inherit;
  font-weight: 700;
  color: var(--c-brand-deep);
  background: var(--c-brand-a08);
  border: 1px solid var(--c-brand-a32);
  border-radius: var(--r-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bh-p-boxadd:hover { background: var(--c-brand-a16); }

/* ── Karttan hızlı ekleme: [ − 12 + ] [ Ekle ] ──
   Kategori, arama ve ana sayfa kartlarında ortak (goreel-cart.js quick) */
.bh-buy { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }

.bh-buy-row { display: flex; gap: 6px; align-items: stretch; }

.bh-buy-qty {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

.bh-buy-btn {
  flex: none;
  width: 32px;
  min-height: 40px;
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-ink);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bh-buy-btn:hover { background: var(--c-brand-a08); color: var(--c-brand-deep); }

.bh-buy-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0 2px;
  font-family: var(--f-body);
  font-size: 16px;            /* iOS 16px altında sayfayı yakınlaştırıyor */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c-ink);
  background: none;
  border: 0;
  border-inline: 1px solid var(--c-line);
  outline: none;
  appearance: none;
}

.bh-buy-input:focus { background: var(--c-brand-a08); }

.bh-buy-add {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 12px;
  font-size: var(--t-sm);
  border-radius: var(--r-md);
}

.bh-buy-add svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-buy-add.is-busy { opacity: .6; pointer-events: none; }

.bh-buy-incart {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-success);
}

.bh-buy-incart[hidden] { display: none; }

/* Bildirimdeki "Sepeti gör": mesaj ve bağlantı tek satırda */
.bh-toast:has(.bh-toast-link) { white-space: nowrap; }

.bh-toast-link {
  margin-left: var(--s-3);
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Dar kart (mobil 2 sütun, ~165px): adet ve Ekle alt alta, tam genişlik */
@media (max-width: 767px) {
  .bh-buy-row { flex-direction: column; }
  .bh-buy-add { width: 100%; }
  .bh-buy-btn { width: 38px; }
}


/* Şifre göster/gizle (goreel.js initPasswordToggle) */
.bh-pw {
  position: relative;
  display: block;
}

.bh-pw > input { width: 100%; padding-right: 48px; }

.bh-pw-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--c-ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  transform: translateY(-50%);
  cursor: pointer;
}

.bh-pw-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-pw-toggle.is-on { color: var(--c-brand); }
.bh-pw-toggle:focus-visible { outline: none; box-shadow: var(--sh-focus); }


/* ==========================================================================
   İSKELET YÜKLEME — ortak dil
   --------------------------------------------------------------------------
   Tek bir parıltı (shimmer) ve tek bir renk ailesi: görsel bekleyen kartlar,
   arama önerileri, ödeme adımları ve sayfa geçişi aynı görünüyor.
   Hareketi azalt tercihinde parıltı duruyor, düz zemin kalıyor.
   ========================================================================== */

:root {
  --sk-base: #E9EFF1;
  --sk-shine: #F6F9FA;
}

@keyframes bh-sk-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

.bh-sk,
.bh-sk-img {
  background-color: var(--sk-base);
  background-image: linear-gradient(90deg, var(--sk-base) 0%, var(--sk-shine) 50%, var(--sk-base) 100%);
  background-size: 200% 100%;
  animation: bh-sk-shimmer 1.4s ease-in-out infinite;
}

.bh-sk { display: block; border-radius: var(--r-sm); }

/* Görsel: yüklenene kadar kutu parlıyor, görsel yumuşakça beliriyor
   (goreel.js initImageSkeleton). Hızlı bağlantıda (önbellekte) hiç
   görünmüyor — yalnızca gerçekten bekleyen görselde devreye giriyor. */
img.bh-img-wait { opacity: 0; }
.bh-sk-img img { transition: opacity .35s var(--e-out); }

/* Ödeme adımları: "Yükleniyor…" satırı form iskeletine dönüşüyor.
   Metin DOM'da kalıyor (aria-live), yalnızca görsel olarak gizli. */
.bh-step-load {
  position: relative;
  height: 148px;
  margin: 0;
  color: transparent !important;
  font-size: 0;
  background:
    linear-gradient(var(--sk-base), var(--sk-base)) 0 0 / 40% 12px no-repeat,
    linear-gradient(var(--sk-base), var(--sk-base)) 0 24px / 100% 46px no-repeat,
    linear-gradient(var(--sk-base), var(--sk-base)) 0 84px / 60% 12px no-repeat,
    linear-gradient(var(--sk-base), var(--sk-base)) 0 106px / 100% 42px no-repeat;
  border-radius: var(--r-md);
  overflow: hidden;
}

.bh-step-load::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: bh-sk-shimmer 1.4s ease-in-out infinite;
}

/* Arama önerileri: istek sürerken satır iskeletleri */
.bh-sg-sk {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
}

.bh-sg-sk .bh-sk-thumb { flex: none; width: 48px; height: 48px; border-radius: var(--r-sm); }
.bh-sg-sk .bh-sk-lines { flex: 1 1 auto; display: grid; gap: 6px; }
.bh-sg-sk .bh-sk-price { flex: none; width: 56px; height: 14px; }

/* ── SAYFA GEÇİŞİ İSKELETİ (telefon + uygulama, goreel-mobile.js) ─────
   Bağlantıya dokununca yeni sayfa gelene kadar beyaz ekran yerine hedef
   sayfanın iskeleti. Header ve sekme çubuğu yerinde kalıyor. */
.bh-navsk {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 800;
  overflow: hidden;
  padding: var(--s-4);
  background: var(--c-surface-sunken);
  opacity: 0;
  transition: opacity .15s var(--e-out);
  pointer-events: none;
}

.bh-navsk.is-on { opacity: 1; }

.bh-navsk-row { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }

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

.bh-navsk-card {
  padding: var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.bh-navsk-card .bh-sk { margin-top: 8px; }
.bh-navsk-card .bh-sk:first-child { margin-top: 0; aspect-ratio: 1 / 1; height: auto; border-radius: var(--r-sm); }

.bh-navsk-hero {
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4);
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

.bh-navsk-panel {
  padding: var(--s-4);
  background: var(--c-surface);
  border-radius: var(--r-lg);
}

.bh-navsk .bh-sk + .bh-sk { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .bh-sk,
  .bh-sk-img,
  .bh-step-load::after { animation: none; }
}