/** Shopify CDN: Minification failed

Line 290:0 All "@import" rules must come first

**/
/* ---------- 2) Değişkenler ---------- */
:root{
  --bb-ink: #303030;
  --bb-bg: #ffffff;

  --bb-font-base: 'Milligram', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bb-font-compact: 'Denton Condensed', 'Milligram', Arial, sans-serif;

  --bb-btn-h: 50px;
}

/* =========================================
   Hero Products — Full CSS (clean rebuild)
   ========================================= */

/* ===== Section (1260 × 500 sınırı) ===== */
.bb-prod{
  background:#fff; color:#222;
  max-width:1280px;            /* genişlik sınırı (sabit tut) */
  max-height:560px;            /* yükseklik sınırı (sabit tut) */
  margin:0 auto 2vh;
  padding:20px 16px 36px;
  overflow:hidden;             /* dikey/yatay taşma kırp */
  font-family: var(--bb-font-base);
}
.bb-prod__inner{
  width:100%; max-width:100%; height:100%;
}

/* ===== Head ===== */
.bb-prod__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
.bb-prod__heading{
  margin:0;
  font-family: var(--bb-font-base);
  font-weight:400; font-size:22px; font-style:italic; letter-spacing:.02em;
}
.bb-prod__heading em{ font-weight:400; }

/* === CTA === */
.bb-prod__cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;          /* alt çizgi için yer */
  font-family: var(--bb-font-compact);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #303030;
  text-decoration: none;        /* native underline kapalı */
  line-height: 1;
}
.bb-prod__cta::after{
  content: "";
  position: absolute;
  left: 0;
  right: 22px;                  /* ok için boşluk */
  height: 1px;
  bottom: 0;
  background: currentColor;
  opacity: .9;
}

/* ===== Swiper / Grid hybrid ===== */
.bb-prod__viewport{ position:relative; }
.bb-prod-swiper{ position:relative; }
.bb-prod-swiper .swiper-wrapper{ align-items:stretch; }
.bb-prod-swiper .swiper-slide{
  display:flex;                 /* slide -> flex konteyner */
  height:auto;                  /* Swiper sabit yükseklik vermesin */
}

/* ===== Navigation arrows (tamamen kapalı) ===== */
.bb-swiper-btn, .bb-swiper-prev, .bb-swiper-next{ display:none !important; }

/* ===== Card ===== */
.bb-card{
  display:flex; flex-direction:column;
  width:100%; height:100%;      /* slide yüksekliğini tamamen doldurur */
  background:#fff; overflow:hidden;
  border-radius: var(--product-card-corner-radius, 0);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

/* Görsel alanı */
.bb-card__media{
  position:relative; display:block; overflow:hidden; cursor:grab;
  background:#f3eae5;
  aspect-ratio:4/5;             /* desktop oranı */
  max-height:calc(560px - 170px); /* başlık/btn vs. için pay bırak */
  max-height: 340px !important;
}
.bb-card__img{
  width:100%; height:100%; object-fit:contain; display:block; transform:translateZ(0);
  -webkit-user-drag:none; user-select:none;
}

/* --- Başlangıç durumu: güvenli katmanlama --- */
.bb-card__imgwrap{ position:relative; display:block; width:100%; height:100%; }
.bb-card__imgwrap .bb-card__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; /* istersen cover */
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none; backface-visibility:hidden; will-change:opacity, transform;
}
.bb-card__img--primary{ opacity:1 !important; z-index:1; }
.bb-card__img--hover  { opacity:0 !important; z-index:0; }

/* --- Hover geçişi: sadece hover destekleyen cihazlarda --- */
@media (hover: hover) and (pointer: fine){
  .bb-card__media:hover .bb-card__img--primary{ opacity:0 !important; }
  .bb-card__media:hover .bb-card__img--hover  { opacity:1 !important; transform:scale(1.02); }
}

/* Görsel katmanlama — aniden değişsin */
.bb-card__imgwrap .bb-card__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  transition:none;    /* ANİDEN değişim */
  pointer-events:none; display:block; backface-visibility:hidden;
}
.bb-card__img--primary{ opacity:1; z-index:1; }
.bb-card__img--hover  { opacity:0; z-index:2; }

/* Hover'da değişim */
@media (hover:hover) and (pointer:fine){
  .bb-card__media:hover .bb-card__img--primary{ opacity:0; }
  .bb-card__media:hover .bb-card__img--hover  { opacity:1; }
}

/* ===== Badge ===== */
.bb-badge--best{
  position:absolute; top:10px; right:10px;
  padding:4px 10px; border-radius:999px;
  font-family: var(--bb-font-compact);
  font-size:11px; line-height:1; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:#ff6ea8; box-shadow:0 2px 8px rgba(0,0,0,.12);
  z-index:10;   /* görsellerden daha yüksek */
}
@media (max-width:480px){
  .bb-badge--best{ top:8px; right:8px; padding:3px 8px; font-size:10px; }
}

/* ===== Body ===== */
.bb-card__body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:0;                    /* sağ/sol/üst/alt padding sıfır */

}
.bb-card__row{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:0; ;
}
.bb-card__title{
  margin:0;
  font-family: var(--bb-font-base);
  font-size:14px !important; font-weight:200; line-height:1.35; color:#222; letter-spacing:.02em;
}
.bb-card__title a{ color:inherit; text-decoration:none; }
.bb-card__title a:hover{ opacity:.85; }

/* Fiyat */
.bb-price{
  font-family: var(--bb-font-compact);
  color:#303030; font-weight:200; white-space:nowrap;
}
.bb-price__compare{ margin-left:4px; text-decoration:line-through; opacity:.55; font-weight:400; }

/* Yıldızlar (kenara sıfır) */
.bb-stars{
  margin:0; font-size:12px; letter-spacing:1px; white-space:nowrap; color:#222; text-align:right;
}
.bb-star{ color:#e0d6d0; } .bb-star--on{ color:#222; }

/* ===== Button (hepsi aynı hizada) ===== */
:root{ --bb-btn-h:50px; }
.bb-card__form{
  margin-top:auto;              /* BUTONU alta çiviler -> hizalar */
  padding:0;
}
.bb-card__form .bb-btn{
  width:100%; max-width:300px;  /* 300×50 sınırı */
  height:50px; min-height:50px; line-height:50px;
  font-size:12px;
  align-self:center;            /* yatayda ortala (istersen flex-start) */
  margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 16px; box-sizing:border-box; font-weight:500; letter-spacing:.04em;
  transition:background .15s ease, color .15s ease, opacity .15s ease;
  cursor:pointer;               /* cursor pointer */

  font-family: var(--bb-font-compact);
  text-transform: uppercase;
}
.bb-btn--outline{
  background:#fff; color:#222; border:1px solid #222;
}
.bb-btn--outline:hover{
  background:#303030;           /* hover arka plan */
  color:#f5f5f5;                /* kırık beyaz yazı */
  border:1px solid #303030;
  transform:none;               /* zıplama yok */
}
.bb-btn--disabled{
  background:#f2f2f2; color:#aaa; border:1px solid #e5e5e5;
}

/* Tema override garantisi */
.bb-prod .bb-card__form .bb-btn.bb-btn--outline{
  background:#fff !important; color:#000 !important; border:1px solid #000 !important; box-shadow:none !important;
}
.bb-prod .bb-card__form .bb-btn.bb-btn--outline:hover{
  background:#303030 !important; color:#f5f5f5 !important; border:1px solid #303030 !important;
  transform:none !important; opacity:1 !important;
}

/* ===== Desktop tipografi ===== */
@media (min-width:1200px){
  .bb-card__title{ font-size:16px; }
  .bb-price{ font-size:15px; }
  .bb-btn{ font-size:12.5px; letter-spacing:.08em; }
}

/* ===== Mobil: Swiper kapalı, 2×2 grid, yalnız ilk 4 ürün ===== */
@media (max-width:768px){
  .bb-prod{ padding:16px 12px 28px;   margin-bottom: 22px; }
  .bb-prod__head{ margin-bottom:12px; }

  .bb-prod-swiper{ overflow:visible; }
  .bb-prod-swiper .swiper-wrapper{
    display:grid !important;
    grid-template-columns:repeat(var(--bb-cols-mobile,2),1fr) !important;
    gap:12px !important;
    align-items:stretch !important;        /* kartları eşit yüksekliğe zorla */
  }
  .bb-prod-swiper .swiper-slide{
    width:auto !important;
    align-items:stretch !important;        /* her grid hücresi içinde esnesin */
  }

  /* Sadece ilk 4 ürün */
  .bb-prod-swiper .swiper-slide:nth-child(n+5){ display:none !important; }

  /* Kare görsel */
  .bb-card__media{ aspect-ratio:1/1 !important; max-height:none; }

  /* Body kenarsız kalsın, buton yine altta */
  .bb-card__body{ padding:0 !important; }
  .bb-card__form{ margin-top:auto !important; }

  /* Mobil buton ölçüsü sabit */
  .bb-card__form .bb-btn{ height:25px; min-height:25px; font-size:11px; }
}

/* ===== Tablet ve üstünde Swiper davranışı ===== */
@media (min-width:769px){
  .bb-prod-swiper .swiper-wrapper{ display:flex !important;}
}

/* --- Mobilde üst üste binmeyi önle: alt boşluk + yükseklik kısıtını kaldır --- */
@media (max-width: 768px){
  .bb-prod{
    margin-bottom: 22px !important;  /* istediğin boşluk */
    max-height: none !important;      /* mobilde yükseklik sınırı yok */
    overflow: visible !important;     /* kesme yok, içerik doğal aksın */
  }
  .bb-prod__inner{
    height: auto !important;          /* iç kapsayıcı esnesin */
  }
}

/* ---------- Swiper wrapper’ın geçiş ayarları ---------- */
.bb-prod-swiper .swiper-wrapper{
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  transform: translateZ(0);
  box-sizing: content-box;
}
/* ---------- 1) Inter Font Import ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* ---------- 2) Değişkenler ---------- */
:root{
  --bb-ink: #303030;
  --bb-bg: #ffffff;

  --bb-font-base: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bb-font-compact: 'Inter', Arial, sans-serif;

  --bb-btn-h: 50px;
}
/* Kart görsel alanı */
.bb-card__media{
  width: 100%;               /* yatayda full */
  max-height: 340px;         /* 340px sınırı */
  aspect-ratio: 4 / 5;       /* oran koru (desktop) */
  position: relative;
  overflow: hidden;
  background: #f3eae5;
  cursor: grab;
}

/* Görsel sarmalayıcı */
.bb-card__imgwrap{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Görseller */
.bb-card__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;         /* yatay %100 kapla, dikey taşanı kırp */
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
@media (max-width:768px){
  .bb-card__media{
    aspect-ratio: 1 / 1 !important;
    max-height: 340px; /* yine sınır koy, gerekirse */
  }
}
/* === 1) Mobile varsayılanı koru (<=768px) === */
.bb-card__form{ display:block; }                 /* mobilde flex yapma */
.bb-card__form .bb-btn{
  width: 100%;
  max-width: 100%;
  display: inline-flex;                          /* mevcut hizayı korur */
  align-self: center;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Mobil buton ölçüsü senin kuralınla devam etsin */
@media (max-width: 768px){
  .bb-card__form .bb-btn{ height:25px; min-height:25px; font-size:11px; }
}

/* === 2) Tablet+ 'flush' (>=769px) — sağ/sola tam otur === */
@media (min-width: 769px){
  .bb-card__form{ display:flex; }
  .bb-card__form .bb-btn{
    width: 100%;
    max-width: none;                              /* 300px sınırı kalktı */
    align-self: stretch;
    display: block;                               /* kenara flush */
  }
}


/* Okendo yıldızlarını kartta minik göster */
.bb-okendo .oke-reviews-star-rating{
  transform: scale(.9);         /* .85–.95 arası deneyebilirsin */
  transform-origin: left center;
}
.bb-okendo .oke-text{ display:none !important; } /* varsa yan metni kapat */
/* review sayısını gizle */
.bb-card__meta .oke-sr-count{
  display: none !important;
}

/* Title solda, sağda price+stars dikey stack */
.bb-card__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;       /* price üstte hizalansın */
  gap:10px;
  margin:0;                     /* arayı sıkı tut */
}
.bb-card__title{ flex:1 1 auto; }

.bb-pricewrap{
  display:flex;
  flex-direction:column;        /* üst: price, alt: stars */
  align-items:flex-end;         /* sağa hizala */
}

/* yıldız: küçük, sağa hizalı, metin yok */
.bb-pricewrap .bb-card__meta{ margin:0; }
.bb-pricewrap .oke-star-rating{
  display:inline-flex;
  transform: scale(.55);
  transform-origin: right center;
}

.bb-pricewrap .oke-star-rating svg:last-child{ margin-right:0; }
.bb-pricewrap .oke-sr-count{ display:none !important; }

/* Mobilde biraz daha yukarı ve kompakt istersen: */
@media (max-width: 767px){
  .bb-pricewrap .oke-star-rating{ transform: scale(.5) }
}

/* === Price + Stars sütunu: sabit genişlik ver, layout shift olmasın === */
:root{
  --bb-stars-w: 86px;    /* 5 yıldızın scaled genişliği + küçük pay */
}

.bb-pricewrap{
  width: var(--bb-stars-w);      /* sabit genişlik */
  min-width: var(--bb-stars-w);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;                      /* price-star aralığı */
}

/* Yıldız satırı yüklenmeden önce de yer ayır (yükseklik) */
.bb-pricewrap .bb-card__meta{
  height: 14px;                  /* scale'ına göre 12–16px arası ayarlayabilirsin */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

/* Yıldızların boyutu ve spacing (kaliteli render) */
.bb-pricewrap .oke-star-rating{
  display: inline-flex;
  transform: scale(.55);
  transform-origin: right center;
  line-height: 1;
}
.bb-pricewrap .oke-star-rating svg{
  margin-right: 3px;             /* yıldız aralığı */
  shape-rendering: geometricPrecision;
}
.bb-pricewrap .oke-star-rating svg:last-child{ margin-right:0; }
.bb-pricewrap .oke-sr-count{ display:none !important; }

/* Title + right column satırı */
.bb-card__row{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}
.bb-card__title{ flex: 1 1 auto; }

/* Mobilde biraz daralt (istersen) */
@media (max-width: 767px){
  :root{ --bb-stars-w: 78px; }   /* mobilde sağ sütun biraz dar */
  .bb-pricewrap .oke-star-rating{ transform: scale(.5) translateY(-1px); }
  .bb-pricewrap .bb-card__meta{ height: 12px; }
}