/* Bushop Smart Category Engine – Common Category Slider Styles (Garden + Others) */

/* ---------- Temel değişkenler ---------- */
#bs-cat{
  --gap:10px; --radius:12px; --img-radius:8px;
  --title-size:13px; --accent:#ff8a00; --text:#111; --border:#eee;
  --tile-bg:#fff; --thumb-bg:#fafafa;
  --cols-desktop:6;      /* masaüstünde görünür kart adedi */
  --cols-mobile:4;       /* mobilde görünür kart adedi   */
  --peek-mobile:12.5%;   /* 3.5 kart (4’ün yarısı) */
  --peek-desktop:8.333%; /* 6.5 kart (6’nın yarısı) */
}

#bs-cat, #bs-cat *{
  box-sizing:border-box;
}

/* ---------- Kart görünümü ---------- */
#bs-cat .bs-cat-card{
  display:block;
  background:var(--tile-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  transition:border-color .15s, box-shadow .15s;
  backface-visibility:hidden;
  transform:translateZ(0);
  position:relative; /* Rozetler için */
}
#bs-cat .bs-cat-card:hover,
#bs-cat .bs-cat-card:focus-visible{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px rgba(255,138,0,.28) !important;
  outline:none;
}
#bs-cat .bs-cat-media{
  position:relative;
  display:block;
  width:100%;
  padding-top:100%;
  background:var(--thumb-bg);
  border-radius:var(--img-radius);
  overflow:hidden;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  clip-path:none !important;
}
#bs-cat .bs-cat-media>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--img-radius);
  display:block;
  transform:translateZ(0.001px);
}
#bs-cat .bs-cat-ttl{
  display:block;
  font-size:var(--title-size);
  line-height:1.35;
  margin:8px 10px 10px;
  text-align:center;
}

/* ---------- Başlık/intro ---------- */
/* === CATEGORY HEADER (MOBILE FIRST) === */

.bs-cat-head h1 {
  font-size: 18px;           /* Premium mobil H1 */
  font-weight: 700;
  line-height: 1.2;
  color: #222;
  margin: 4px 0 6px 0;

  /* Tek satır garanti */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-cat-head p {
  font-size: 14px;           /* Açıklama yazısı */
  font-weight: 400;
  line-height: 1.45;
  color: #555;
  margin: 0 0 12px 0;

  /* Max 2 satır */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop için biraz büyütelim (Opsiyonel ama önerilir) */
@media (min-width: 768px) {
  .bs-cat-head h1 {
    font-size: 22px;
  }
  .bs-cat-head p {
    font-size: 15px;
  }
}



/* HEADER ALTINA PREMIUM AYRAÇ */
.bs-cat-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* %8 opak gri → premium görünüm */
  padding-bottom: 3px; /* Çizgiye nefes veriyor */
}

/* Desktop için biraz daha görünür (ama yine premium) */
@media (min-width: 768px) {
  .bs-cat-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding-bottom: 5px;
  }
}






/* === SCE HEADER STICKY (MOBILE FIRST) === */

.bs-cat-head {
  position: sticky;
  top: 0;                      /* Gerekirse burayı ayarlarsın */
  z-index: 15;                 /* Ürün gridinin ve kartların üstünde kalsın */
  background: #fff;            /* Scroll'da arkası şeffaf gözükmesin */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px 12px 10px 12px;
}

/* MOBİLDE: bs-cat-head normal dursun (sticky değil) */
@media (max-width: 767px) {
  .bs-cat-head {
    position: static;
    top: auto;
  }
}


@media (max-width: 767px) {

  /* PROMO AÇIKKEN (default) */
  .bs-cat-head--fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 96px;              /* 32px promo + 64px logo */
    z-index: 9999;
    background: #fff;
  }

  .bs-cat--has-fixed-head {
    padding-top: 125px;     /* header yüksekliği + nefes */
  }

  /* PROMO KAPANDIĞINDA (body class + kalıcı state) */
  body.bu-promo-closed .bs-cat-head--fixed {
    top: 64px;              /* sadece logo bar yüksekliği */
  }

  /* PROMO KAPANDIĞINDA BANNER'I DA GİZLE */
  body.bu-promo-closed .HT-topBanner {
    display: none !important;
  }
}










/* 🔥 Trend rozeti – görselin altında, ortada küçük pill (DESKTOP) */
#bs-cat .bs-badge-trend{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  padding: 4px 11px;
  margin: 6px auto 2px;

  border-radius: 999px;
  background: #222;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;

  max-width: 90%;
  white-space: nowrap;
  text-align: center;
}

#bs-cat .bs-badge-trend-icon{
  font-size: 11px;
  line-height: 1;
}

#bs-cat .bs-badge-trend-label{
  line-height: 1.2;
}


@media (max-width: 767px){
  #bs-cat .bs-badge-trend{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;

    border-radius: 999px;
    padding: 3px 10px;
    margin-top: 4px;

    font-size: 11px;
  }

  /* Mobilde uzun label'ı gizle, data-label-short içeriğini kullan */
  #bs-cat .bs-badge-trend-label{
    display: none;
  }

  #bs-cat .bs-badge-trend::after{
    content: attr(data-label-short);
    line-height: 1.2;
  }
}






















/* =========================================================
   MOBİL & TABLET (≤1023px): yatay scroll + 3.5 peek (mask)
   ========================================================= */
@media (max-width:1023px){
  #bs-cat .bs-cat-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:2px 4px 8px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--peek-mobile)),rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--peek-mobile)),rgba(0,0,0,0) 100%);
    touch-action: pan-x pinch-zoom;
    scroll-behavior:smooth;
  }
  #bs-cat .bs-cat-scroll::-webkit-scrollbar{
    display:none;
  }

  #bs-cat .bs-cat-track{
    display:flex !important;
    gap:var(--gap) !important;
    margin-top:10px;
    scroll-snap-type:x proximity;
  }
  #bs-cat .bs-cat-card{
    flex:0 0 calc(100% / var(--cols-mobile)) !important;
    max-width:calc(100% / var(--cols-mobile)) !important;
    scroll-snap-align:start;
    transform:translateX(30px) scale(.985);
    opacity:0;
    transition:transform 1s cubic-bezier(.22,.61,.36,1), opacity 1s ease-out;
  }
  #bs-cat .bs-cat-media{
    padding-top:0;
    aspect-ratio:1/1;
  }
  #bs-cat .bs-cat-ttl{
    margin:6px 6px 8px;
    font-size:12.5px;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  #bs-cat.is-ready .bs-cat-card{
    transform:none;
    opacity:1;
  }

  /* mobilde okları tamamen gizle */
  #bs-cat .bs-cat-btn,
  #bs-cat .bs-cat-btn *{
    display:none !important;
  }




}


/* =========================================================
   DESKTOP (≥1024px): tek satır 6.5 peek, yatay scroll
   ========================================================= */
@media (min-width:1024px){
  #bs-cat{
    position:relative !important; /* butonlar için referans */
  }

  #bs-cat .bs-cat-scroll{
    position:relative;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:2px 16px 6px 0;  /* SAĞA 16px nefes */
    scrollbar-width:thin;
    touch-action: pan-x pinch-zoom;
    scroll-behavior:smooth;
  }

  #bs-cat .bs-cat-scroll::-webkit-scrollbar{
    height:6px;
  }
  #bs-cat .bs-cat-scroll::-webkit-scrollbar-thumb{
    background:#ddd;
    border-radius:3px;
  }


@media (min-width:1024px){
  /* ... senin diğer desktop kodların ... */

  /* DESKTOP: Slider üzerindeki TÜM fade / overlay / gradient'leri kapat sağdaki beyaz geçiş efektini kapatıyor */
  #bs-cat .bs-cat-scroll::before,
  #bs-cat .bs-cat-scroll::after {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #bs-cat .bs-cat-media{
    padding-top:0;
    aspect-ratio:1/1;
    background:none !important;
    box-shadow:none !important;
  }
  #bs-cat .bs-cat-media::before,
  #bs-cat .bs-cat-media::after{
    content:none !important;
    background:none !important;
    box-shadow:none !important;
  }
}




/* Desktop’ta klasik alt kategori text listesini tamamen kaldır */
@media (min-width: 1024px) {
  .subDivisionContainer {
    display: none !important;
  }
}




  #bs-cat .bs-cat-track{
    display:flex !important;
    gap:var(--gap) !important;
    margin-top:10px;
  }
  #bs-cat .bs-cat-card{
    --cardW: calc((100% - (var(--gap) * (var(--cols-desktop) - 1))) / var(--cols-desktop));
    flex:0 0 var(--cardW) !important;
    max-width:var(--cardW) !important;
    min-width:160px;
    scroll-snap-align:start;
    transform:translateX(20px);
    opacity:0;
    transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .9s ease-out;
    will-change: transform, opacity;
  }
  #bs-cat.is-ready .bs-cat-card{
    transform:none;
    opacity:1;
  }

  /* OK BUTONLARI — scroller DIŞINDA, sabit */
  #bs-cat .bs-cat-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border-radius:999px;
    background:#fff;
    border:1px solid #e5e5e5;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:999;
    opacity:1;
  }
  #bs-cat .bs-cat-btn svg{
    width:20px;
    height:20px;
  }
  #bs-cat .bs-cat-btn--prev{
    left:6px;
  }
  #bs-cat .bs-cat-btn--next{
    right:6px;
  }
  #bs-cat .bs-cat-btn.is-disabled{
    opacity:.25;
    cursor:default;
  }

  /* DESKTOP: kartın üstündeki beyaz overlay'i tamamen kapat */
  #bs-cat .bs-cat-media{
    padding-top:0;
    aspect-ratio:1/1;
    background:none !important;
    box-shadow:none !important;
  }
  #bs-cat .bs-cat-media::before,
  #bs-cat .bs-cat-media::after{
    content:none !important;
    background:none !important;
    box-shadow:none !important;
  }
}


/* Erişilebilirlik */
@media (prefers-reduced-motion:reduce){
  #bs-cat .bs-cat-card{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  #bs-cat .bs-cat-scroll::after{
    display:none;
  }
}

/* Aktif (kullanıcı seçimi) vurgusu — deterministik */
#bs-cat .bs-cat-card.is-active{
  outline:2px solid var(--accent, #ff8a00);
}

/* v2.4 – Tema klik rozeti (Seçili) – SAĞ ÜST */
#bs-cat .bs-badge-active{
  position:absolute;
  top:8px;
  right:8px;
  padding:4px 10px;
  background:#ffdca8;          /* açık amber – niyetten daha sakin */
  color:#402400;
  font-weight:700;
  font-size:12px;
  border-radius:999px;
  z-index:30;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  pointer-events:none;
}

/* v2.4 – Intent Rozeti (Aradığın) – SOL ÜST */
#bs-cat .bs-badge-intent{
  position:absolute;
  top:8px;
  left:8px;
  padding:4px 10px;
  background:#ff8a00;
  color:#fff;
  font-weight:700;
  font-size:12px;
  border-radius:999px;
  z-index:31;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  pointer-events:none;
}


/* Premium intent rozeti (🧭 Aradığın) */
/* Premium intent rozeti: ikon + metin */
#bs-cat .bs-badge-intent{
  display:inline-flex;
  align-items:center;
  gap:3px;

  background: linear-gradient(135deg, #f7a03a, #e67b00); /* premium amber */
  color: #fff7e6; /* soft-white, göz yormaz */

  padding:4px 10px;
  border-radius:999px;

  font-weight:600;
  font-size:13px;
  letter-spacing:0.01em;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.40),
    0 4px 10px rgba(255,145,0,0.42);
}

#bs-cat .bs-badge-intent-icon{
  display:block;
  font-size:12px;
  line-height:1;
  margin-top:-1px;  /* çok hafif yukarı al, daha dengeli durur */
}

#bs-cat .bs-badge-intent-label{
  line-height:1.2;
}

/* Mobilde rozet boyutlarını ufalt */
@media (max-width: 767px){
  #bs-cat .bs-badge-active,
  #bs-cat .bs-badge-intent{
    font-size:10.5px !important;
    padding:2px 7px !important;
  }

  #bs-cat .bs-badge-intent{
    gap:2px !important;
  }

  #bs-cat .bs-badge-intent-icon{
    font-size:11px;
  }
}


/* Mobilde rozet fontlarını biraz küçült */
@media (max-width: 767px){
  #bs-cat .bs-badge-active,
  #bs-cat .bs-badge-intent{
    font-size: 10.5px !important;
    padding: 2px 7px !important;
  }
}

/* Mobilde alt kategori text listesini gizle */
@media (max-width: 767px) {
  .subDivisionContainer {
    display: none !important;
  }
}











/* === Bushop Smart Category – Mobil hard-fix (bahçe kategorisi) === */
@media (max-width:1023px){
  #bs-cat{
    overflow:hidden;
  }

  #bs-cat .bs-cat-scroll{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    padding:2px 4px 8px;
    scrollbar-width:none;
  }
  #bs-cat .bs-cat-scroll::-webkit-scrollbar{
    display:none;
  }

  #bs-cat .bs-cat-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    flex-direction:row !important;
    gap:var(--gap, 10px) !important;
    margin-top:10px;
    scroll-snap-type:x proximity;
  }

  /* Tema mobilde kartı yan-yana flex satır yapmasın diye block’a zorluyoruz */
  #bs-cat .bs-cat-card{
    display:block !important;
    flex:0 0 calc(100% / var(--cols-mobile, 4)) !important;
    max-width:calc(100% / var(--cols-mobile, 4)) !important;
    scroll-snap-align:start;
    box-sizing:border-box;
  }
}

/* === Ultra Hard Override (Mobil) — Tema CSS'ini kesin ezer === */
@media (max-width:1023px){
  .DetailContent #bs-cat .bs-cat-track,
  .DetailPage   #bs-cat .bs-cat-track,
  body          #bs-cat .bs-cat-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    flex-direction:row !important;
  }

  .DetailContent #bs-cat .bs-cat-card,
  .DetailPage   #bs-cat .bs-cat-card,
  body          #bs-cat .bs-cat-card{
    display:block !important;
    flex:0 0 calc(100%/var(--cols-mobile,4)) !important;
    max-width:calc(100%/var(--cols-mobile,4)) !important;
  }
}

/* v2.1 – Smart Category Engine: Flicker/Fırlama Fix (hard) */
#bs-cat{
  visibility:hidden !important;
}
#bs-cat.is-ready{
  visibility:visible !important;
}

/* v2.3 – Smart Category Engine: Click sonrası yumuşak loading hissi */
#bs-cat.is-loading::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.78);
  z-index:50;
  pointer-events:none;
}

/* Orta noktada küçük spinner */
#bs-cat.is-loading::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  border-radius:999px;
  border:3px solid rgba(0,0,0,.08);
  border-top-color:var(--accent, #ff8a00);
  z-index:51;
  animation:bs-cat-spin .7s linear infinite;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

@keyframes bs-cat-spin{
  to { transform:rotate(360deg); }
}