/* =======================================================================
   KANO — MAGAZA Benefits (Spreadshirt-like) — v8
   Scope: ONLY magaza.html (body.page-magaza)

   Requested:
   - Gap even smaller
   - Left-most benefit aligns with "Kategoriler" column start
   - Keep right side looking good (do NOT reintroduce over-shifts)
   ======================================================================= */

/* Benefits section: minimal spacing */
body.page-magaza .kano-benefits{
  background: #fff !important;
  padding: 8px 0 2px !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Align with store layout: match the same left padding used by the store area */
body.page-magaza .kano-benefits > .container{
  max-width: 1500px !important;
  margin-left: 0 !important;
  margin-right: auto !important;

  padding-left: 24px !important;   /* <<< aligns with "Kategoriler" start */
  padding-right: 36px !important;
}

body.page-magaza .kano-benefits-viewport,
body.page-magaza .kano-benefits-inner{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page-magaza .kano-benefits-next{ display:none !important; }

/* Row layout */
body.page-magaza .kano-benefits-inner{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  gap: 6px !important;              /* <<< much tighter gap */
  overflow: visible !important;
  scroll-snap-type: none !important;
}

body.page-magaza .kano-benefit-item{
  flex: 0 0 270px !important;
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Visual */
body.page-magaza .kano-benefit-visual{
  width: 160px !important;
  height: 160px !important;
  border-radius: 999px !important;
  background: #f1f1f1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 10px !important;
  overflow: hidden !important;
}

body.page-magaza .kano-benefit-visual img{
  display: block !important;
  width: 80% !important;
  height: 80% !important;
  object-fit: contain !important;
  filter: none !important;
}

body.page-magaza .kano-benefit-visual::before,
body.page-magaza .kano-benefit-visual::after{
  content: none !important;
  display: none !important;
}

/* Text */
body.page-magaza .kano-benefit-panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

body.page-magaza .kano-benefit-title{
  margin: 0 !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #111 !important;
}

body.page-magaza .kano-benefit-desc{
  display: none !important;
}

/* Pull store up under benefits (keep your tuned value) */
body.page-magaza main.store-main{
  padding-top: 0 !important;
  margin-top: -70px !important;
}

body.page-magaza main.store-main .store-container{
  padding-top: 0 !important;
}

body.page-magaza main.store-main .store-header,
body.page-magaza main.store-main .store-toolbar,
body.page-magaza main.store-main .store-controls,
body.page-magaza main.store-main .store-topbar{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.page-magaza main.store-main > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile */
@media (max-width: 1100px){
  body.page-magaza .kano-benefits > .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.page-magaza .kano-benefits-inner{
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 6px !important;
  }

  body.page-magaza .kano-benefit-item{
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    scroll-snap-align: start !important;
  }

  body.page-magaza main.store-main{
    margin-top: -28px !important;
  }
}

/* =========================================================
   PATCH v8.1 — SADECE DESKTOP GAP FIX
   v8 kalsın. Sadece space-between’i öldür + gap’i küçült.
   ========================================================= */
@media (min-width: 1101px){
  body.page-magaza #kanoBenefitsRow{
    justify-content: flex-start !important; /* space-between'i ez */
    gap: 4px !important;                   /* gerçek gap */
    column-gap: 4px !important;            /* bazı yerlerde column-gap kullanılıyor */
  }
}

/* =========================================================
   PATCH v8.2 — DESKTOP'TA YAYILMA SORUNUNU KES + ARAYI SIKISTIR
   (v8'e dokunmuyor, sadece override)
   ========================================================= */
@media (min-width: 1101px){

  /* satırı shrink-wrap yap: yayılacak boşluk kalmasın */
  body.page-magaza section.kano-benefits .kano-benefits-viewport > #kanoBenefitsRow.kano-benefits-inner{
    display: flex !important;
    justify-content: flex-start !important; /* space-between/evenly öldür */
    gap: 4px !important;
    column-gap: 4px !important;

    width: max-content !important; /* <<< kritik: container genişliğini içeriğe kilitler */
    max-width: none !important;
  }

  /* kartlar kesinlikle büyümesin/yayılmasın */
  body.page-magaza section.kano-benefits #kanoBenefitsRow .kano-benefit-item{
    flex: 0 0 270px !important;  /* flex:1 varsa bunu ezer */
    margin: 0 !important;
  }

  /* bazı temalarda viewport da justify ile oynuyor, onu da nötrle */
  body.page-magaza section.kano-benefits .kano-benefits-viewport{
    justify-content: flex-start !important;
  }
}
/* =========================================================
   PATCH v8.3 — DESKTOP’TA YAYILAN BOŞLUĞU KES (space-between fix)
   Mantık: row/viewport’u 1390px’e kilitle → aralar otomatik sıkışır
   ========================================================= */
@media (min-width: 1101px){

  /* Satırın yayılmasını engelleyen kısım */
  body.page-magaza .kano-benefits .kano-benefits-viewport{
    max-width: 1390px !important;
    width: 1390px !important;
  }

  /* Bazı durumlarda inner da %100 oluyor, onu da kilitleyelim */
  body.page-magaza #kanoBenefitsRow{
    max-width: 1390px !important;
    width: 1390px !important;
  }
}
@media (min-width: 1101px){
  .kano-benefits .kano-benefits-viewport,
  #kanoBenefitsRow{
    max-width: 1350px !important;
    width: 1350px !important;
  }
}

/* =========================================================
   PATCH v8.4 — DESKTOP’TA YAYILMAYI KES (FLEX -> GRID)
   Sadece aralık kontrolü: space-between vs. tamamen biter.
   ========================================================= */
@media (min-width: 1101px){

  /* Row’u grid yap: yayılma yok, gap tam çalışır */
  #kanoBenefitsRow.kano-benefits-inner,
  .kano-benefits .kano-benefits-inner{
    display: inline-grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 300px !important;   /* kart genişliği */
    column-gap: 2px !important;            /* <<< burası aralık */
    row-gap: 0 !important;

    width: max-content !important;
    max-width: none !important;
    justify-content: start !important;
    align-content: start !important;
  }

  /* Item’lar kesin sabit kalsın */
  #kanoBenefitsRow .kano-benefit-item{
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    margin: 0 !important;
  }

  /* Viewport solda dursun (Kategoriler hizası bozulmasın) */
  .kano-benefits .kano-benefits-viewport{
    text-align: left !important;
  }
}

/* =========================================================
   PATCH v8.5 — DESKTOP’TA YAYILMAYI KES (gerçekten gap’i hisset)
   ========================================================= */
@media (min-width: 1101px){

  /* 1) viewport + row: space-between/evenly/around ne varsa ez */
  html body.page-magaza section.kano-benefits div.kano-benefits-viewport{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  html body.page-magaza section.kano-benefits
  div.kano-benefits-viewport > div#kanoBenefitsRow.kano-benefits-inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;   /* <<< yaymayı bitiren ana satır */
    align-items: flex-start !important;

    gap: 4px !important;                      /* <<< burayı 4/6/8 oynat */
    column-gap: 6px !important;

    width: 100% !important;                   /* max-content falan yok: net */
  }

  /* 2) item’lar büyüyüp boşluk yaratmasın */
  html body.page-magaza section.kano-benefits
  div.kano-benefits-viewport > div#kanoBenefitsRow > article.kano-benefit-item{
    flex: 0 0 auto !important;                /* flex:1 varsa ezer */
    margin: 0 !important;                      /* gizli margin varsa ezer */
  }
}

/* =========================================================
   PATCH v8.6 — DESKTOP: boşluk aslında ITEM WIDTH’ü
   article genişliğini küçült, gerçek aralık kontrolü gelsin
   ========================================================= */
@media (min-width: 1101px){

  /* satır: solda topla + gerçek gap */
  body.page-magaza #kanoBenefitsRow.kano-benefits-inner{
    justify-content: flex-start !important;
    gap: 14px !important;            /* gerçek aralık (istersen 10px yap) */
  }

  /* ASIL FIX: item genişliği (250px) yüzünden “gap” varmış gibi */
  body.page-magaza #kanoBenefitsRow > article.kano-benefit-item{
    flex: 0 0 190px !important;      /* <<< bunu küçülttük */
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* circle ortada kalsın */
  body.page-magaza .kano-benefit-visual{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   PATCH v8.7 — Benefits’i store layout’a kilitle + bigger cards
   Amaç: Kategoriler başlangıcı -> son ürün kartı bitişi hizası
   ========================================================= */

@media (min-width: 1101px){

  /* 1) Benefits container: store container ile aynı hizaya getir */
  body.page-magaza .kano-benefits > .container{
    max-width: 1540px !important;      /* store tarafın max-width’i neyse */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;     /* store-container padding ile aynı olsun */
    padding-right: 24px !important;
  }

  /* 2) Satır: ilk eleman sola, son eleman sağa otursun */
  body.page-magaza #kanoBenefitsRow.kano-benefits-inner{
    width: 100% !important;
    justify-content: space-between !important;  /* <<< kritik */
    gap: 0 !important;                           /* aralıkları space-between dağıtıyor */
  }

  /* 3) Kartlar: eşit sütun gibi davransın (5 item = 5 kolon) */
  body.page-magaza #kanoBenefitsRow > article.kano-benefit-item{
    flex: 1 1 0 !important;        /* <<< eşit dağıt */
    width: auto !important;
    min-width: 220px !important;   /* çok daralmasın */
    max-width: 320px !important;   /* çok şişmesin */
  }

  /* 4) "Kartlar daha büyük" */
  body.page-magaza .kano-benefit-visual{
    width: 176px !important;
    height: 176px !important;
    margin: 0 auto 12px !important;
  }

  body.page-magaza .kano-benefit-title{
    font-size: 17px !important;
  }
}

/* =========================================================
   PATCH v8.8 — Benefits container’ı ortala (sola çivileyen override’ı ez)
   Not: --kanoBenefitsGutter ile ince ayar yap
   ========================================================= */

:root{
  --kanoBenefitsGutter: 64px; /* <<< Kategoriler hizasına göre 48/64/72 dene */
}

@media (min-width: 1101px){

  /* Section full-bleed kalsın ama iç container ortalansın */
  body.page-magaza .kano-benefits{
    width: 100% !important;
  }

  /* En kritik kısım: önceki "margin-left:0" vb. her şeyi ez */
  body.page-magaza .kano-benefits > .container{
    max-width: 1540px !important;
    margin-left: auto !important;   /* <<< sola yapışıklığı bitiren */
    margin-right: auto !important;

    padding-left: var(--kanoBenefitsGutter) !important;  /* <<< sağa kaydır */
    padding-right: 24px !important;
  }

  /* Viewport/row da container genişliğini kullansın */
  body.page-magaza .kano-benefits-viewport,
  body.page-magaza #kanoBenefitsRow{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   PATCH v8.9 — Benefits row’u sağa IT (kesin çözüm)
   ========================================================= */

@media (min-width: 1101px){
  body.page-magaza #kanoBenefitsRow{
    margin-left: 90px !important;   /* <<< bunu arttır: 90 -> 120 -> 150 */
  }
}

/* =========================
   PATCH — Benefits kartları büyüt
   ========================= */
@media (min-width: 1101px){
  body.page-magaza .kano-benefit-item{
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }

  body.page-magaza .kano-benefit-visual{
    width: 190px !important;
    height: 190px !important;
  }

  body.page-magaza .kano-benefit-visual img{
    width: 82% !important;
    height: 82% !important;
  }

  body.page-magaza .kano-benefit-title{
    font-size: 18px !important;
  }
}
/* =========================
   PATCH — Benefits: biraz sağa + çıtır gap (DESKTOP)
   ========================= */
@media (min-width: 1101px){
  /* bloğu sağa kaydır (sol padding artır) */
  body.page-magaza .kano-benefits > .container{
    padding-left: 56px !important;   /* 24 -> 56 (daha sağ) */
    padding-right: 56px !important;
  }

  /* kart arası boşluk */
  body.page-magaza .kano-benefits-inner{
    gap: 14px !important;            /* 6 -> 14 (çıtır) */
  }
}

/* =========================
   PATCH — "Görünüm değiştir" ürünlere göre sağa hizala (DESKTOP)
   ========================= */
@media (min-width: 1101px){

  /* toolbar satırını flex yapıp iki bloğu ayırıyoruz */
  body.page-magaza .store-toolbar{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* soldaki kısım (gösteriliyor + filtreler) ortada kalsın */
  body.page-magaza .store-toolbar-left{
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* "Görünüm değiştir" tamamen sağa gitsin + ürün grid sağ padding’iyle aynı boşluğu alsın */
  body.page-magaza .store-view-toggle{
    margin-left: auto !important;
    margin-right: 56px !important;  /* sağa yaklaştırır */
  }
}

/* =========================
   FIX — Görünüm değiştir SAĞA (bozmadan)
   ========================= */
@media (min-width: 1101px){

  /* toolbar flex kalsın, kırılmayı engelle */
  body.page-magaza .store-toolbar{
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* sol blok genişlesin */
  body.page-magaza .store-toolbar-left{
    flex: 1 1 auto !important;
    min-width: 520px !important; /* gerekirse 420px yap */
  }

  /* toggle'ı sağa it */
  body.page-magaza .store-view-toggle{
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
}

/* SADECE: Gorunum degistir blogunu saga hizala */
:root{ --storeToggleRightPad: 45px; } /* 48/56/64 dene */

@media (min-width: 1101px){
  body.page-magaza .store-view-toggle{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: var(--storeToggleRightPad) !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   PATCH — "Görünüm değiştir" (Ürünler | Tasarım) bloğunu
   ürün gridinin sağına yasla (parent sınırına kadar)
   Sadece bunu yapar, başka şeye dokunmaz.
   ========================================================= */

/* Toolbar içindeki view-toggle satırını tam genişlik yap */
main.store-main .store-toolbar .store-view-toggle{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important; /* SAĞA YASLA */
  gap: 10px !important;
  margin-left: 0 !important;
}

/* Güvenlik: bazı layoutlarda parent flex engel olabiliyor */
main.store-main .store-toolbar{
  align-items: center !important;
}
/* =========================================================
   PATCH — “Görünüm değiştir” bloğunu SAĞA hizala
   (Sadece bu alanı etkiler, diğer layout’a dokunmaz)
   ========================================================= */

body.page-magaza main.store-main .store-toolbar{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px 22px !important;
}

body.page-magaza main.store-main .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.page-magaza main.store-main .store-toolbar-controls{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
}

/* Dar alanda alt satıra düşse bile SAĞA yaslansın */
body.page-magaza main.store-main .store-view-toggle{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  width: 100% !important;          /* wrap olunca full row + sağa */
  text-align: right !important;
}

/* Geniş ekranda tek satırda kalsın ve sağda dursun */
@media (min-width: 1100px){
  body.page-magaza main.store-main .store-view-toggle{
    width: auto !important;
    flex: 0 0 auto !important;
  }
}
/* =========================================================
   PATCH — “Görünüm değiştir”i ALT SATIRA AL + SAĞA HİZALA
   (absolute kaldırılır, overlap biter)
   ========================================================= */

/* Toolbar: satır kırılabilsin */
body.page-magaza main.store-main .store-toolbar{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Sol grup (sıralama/kategori/cinsiyet/filtreler vs) ilk satırı doldursun */
body.page-magaza main.store-main .store-toolbar-left{
  flex: 1 1 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Görünüm değiştir: ikinci satıra insin ve sağa dayansın */
body.page-magaza main.store-main .store-view-toggle{
  position: static !important;          /* absolute varsa iptal */
  order: 99 !important;                 /* en sona */
  width: 100% !important;               /* kendi satırı */
  margin: 8px 0 0 !important;           /* üstten az boşluk */
  justify-content: flex-end !important; /* sağa hizala */
  display: inline-flex !important;
  align-items: center !important;
}
/* =========================================================
   FIX — “Görünüm değiştir” AYNI YERDE KALSIN (ALT SATIR),
   ama SAĞA yaslansın (grid sonuna)
   ========================================================= */

body.page-magaza main.store-main .store-toolbar{
  width: 100% !important;
  flex-wrap: wrap !important;        /* alt satıra izin ver */
}

/* “Görünüm değiştir” bloğunu ayrı satıra al, ama sağa yasla */
body.page-magaza main.store-main .store-view-toggle{
  flex: 0 0 100% !important;         /* ALT SATIR */
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important; /* SAĞA */
  margin-left: 0 !important;
  margin-top: 12px !important;       /* mevcut boşluğu koru */
}

/* =========================================================
   KANO — STORE TOOLBAR + VIEW TOGGLE (Spreadshirt alignment fix)
   Scope: only magaza page
   ========================================================= */

body.page-magaza main.store-main .store-toolbar{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px 18px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 10px 0 16px !important;
  padding: 0 !important;
}

body.page-magaza main.store-main .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  gap: 14px 18px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.page-magaza main.store-main .store-toolbar-controls{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 10px !important;
}

/* Pill’leri biraz daha Spreadshirt ölçüsüne çek */
body.page-magaza main.store-main .store-pill{
  height: 40px !important;        /* sizde 44px’ti */
  padding: 0 12px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
}

/* “Görünüm değiştir” her durumda sağda kalsın */
body.page-magaza main.store-main .store-view-toggle{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* View toggle butonlarını “link gibi” yap (border/backgound SIFIR) */
body.page-magaza main.store-main .store-view-btn{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: rgba(17,24,39,.72) !important;
  cursor: pointer !important;
}

body.page-magaza main.store-main .store-view-btn.is-active{
  color: #111827 !important;
  font-weight: 700 !important;
}

body.page-magaza main.store-main .store-view-label{
  font-size: 14px !important;
  color: rgba(17,24,39,.70) !important;
}

body.page-magaza main.store-main .store-view-sep{
  color: rgba(17,24,39,.35) !important;
  padding: 0 2px !important;
}

/* Dar ekranda: toggle alt satıra insin ama SAĞA yaslı kalsın */
@media (max-width: 1100px){
  body.page-magaza main.store-main .store-view-toggle{
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
}
/* =========================================================
   FIX — GRID DARALTMA + TOOLBAR HİZASI (Spreadshirt gibi)
   ========================================================= */

/* 1) Ürün grid’inin ortalanmasını/daralmasını iptal et (en kritik) */
body.page-magaza main.store-main section#product-list.store-grid{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) Toolbar’ı desktop’ta 2 kolonlu yap: (sol = results+filters) (sağ = view toggle) */
@media (min-width: 901px){
  body.page-magaza main.store-main .store-toolbar{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
    width: 100% !important;
  }

  body.page-magaza main.store-main .store-toolbar-left{
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  /* results solda “tek başına” kalsın, butonlara yapışmasın */
  body.page-magaza main.store-main .store-results{
    margin-right: 16px !important;
  }

  /* view toggle her zaman en sağda */
  body.page-magaza main.store-main .store-view-toggle{
    justify-self: end !important;
    margin-left: 0 !important; /* grid’de auto margin gerekmiyor */
  }
}

/* 3) Çok daralınca (mobil) toggle alt satıra insin ama sağda kalsın */
@media (max-width: 900px){
  body.page-magaza main.store-main .store-toolbar{
    grid-template-columns: 1fr !important;
  }
  body.page-magaza main.store-main .store-view-toggle{
    justify-self: end !important;
    width: max-content !important;
  }
}
/* =========================================================
   FIX — View toggle tıklanmıyor (üstüne layer biniyor)
   Çözüm: stacking (z-index) + pointer-events kilidi
   ========================================================= */

body.page-magaza main.store-main .store-toolbar{
  position: relative !important;
  z-index: 1 !important;
}

/* Sol toolbar bloğu normal katmanda kalsın */
body.page-magaza main.store-main .store-toolbar-left{
  position: relative !important;
  z-index: 2 !important;
}

/* View toggle HER ŞEYİN ÜSTÜNDE olsun */
body.page-magaza main.store-main .store-view-toggle{
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}

/* Butonlar kesin tıklanabilir */
body.page-magaza main.store-main .store-view-btn{
  position: relative !important;
  z-index: 51 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Extra güvenlik: pill select overlay’ı sadece kendi içinde kalsın */
body.page-magaza main.store-main .store-toolbar-controls{
  position: relative !important;
  z-index: 2 !important;
}
body.page-magaza main.store-main .store-pill--select{
  position: relative !important;
  z-index: 2 !important;
}
body.page-magaza main.store-main .store-pill--select select{
  z-index: 3 !important; /* kendi pill’inin üstünde */
}
/* =========================================================
   SPREADSHIRT WIDE FEEL + PILL SIZE UP (Magaza)
   ========================================================= */

/* 1) Sayfayı genişlet: sağa uzak hissini bitir */
body.page-magaza main.store-main .store-container{
  max-width: 1540px !important;   /* Spreadshirt gibi geniş */
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Sidebar + content arası biraz daha tight */
body.page-magaza main.store-main .store-layout{
  gap: 28px !important;
}

/* 2) Filtre pill’lerini büyüt: Spreadshirt ölçüsü */
body.page-magaza main.store-main .store-pill{
  height: 44px !important;        /* 40 -> 44 */
  padding: 0 16px !important;     /* daha dolgun */
  font-size: 14px !important;
  border-radius: 8px !important;
}

/* Select pill içindeki yazı/ok hizası da biraz rahatlasın */
body.page-magaza main.store-main .store-pill--select > span:first-child{
  transform: translateY(0.5px) !important;
}

/* 3) View toggle sağda kalsın ama “çok kopuk” görünmesin */
@media (min-width: 901px){
  body.page-magaza main.store-main .store-toolbar{
    column-gap: 14px !important;  /* 18 -> 14 (sağ çok uzak hissi azalır) */
  }
}
/* =========================================================
   FINAL — TOOLBAR ALIGN RESET (Spreadshirt gibi)
   Bu blok, override dosyanın içindeki eski "center" ve margin denemelerini ezer.
   ========================================================= */

body.page-magaza main.store-main .store-toolbar{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px 18px !important;
  padding: 0 !important;
  margin: 10px 0 16px !important;
}

/* EN KRİTİK: soldaki blok asla center olmayacak */
body.page-magaza main.store-main .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* <-- center'ı eziyoruz */
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;             /* style.css'teki 12px'i de ez */
}

/* controls soldan aksın */
body.page-magaza main.store-main .store-toolbar-controls{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px 12px !important;
}

/* Toggle: sağda dursun, ama "margin-right:56px" gibi şeyleri sıfırla */
body.page-magaza main.store-main .store-view-toggle{
  width: auto !important;
  margin: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
}

/* =========================================================
   PILL SIZE — biraz daha "Spreadshirt gibi dolgun"
   ========================================================= */
body.page-magaza main.store-main .store-pill{
  height: 46px !important;
  padding: 0 18px !important;
  font-size: 14.5px !important;
  border-radius: 8px !important;
}
body.page-magaza main.store-main .store-container,
body.page-magaza main.store-main .store-container{
  max-width: 1540px !important;
}
/* =========================================================
   SPREADSHIRT EXACT TOOLBAR ROW (results solda, pill’ler yanında)
   ========================================================= */

body.page-magaza main.store-main .store-toolbar-left{
  flex-wrap: nowrap !important;          /* sonuç + pill aynı satır */
  gap: 18px !important;
}

/* "Gösteriliyor..." satırı küçük ve solda kalsın */
body.page-magaza main.store-main .store-results{
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: rgba(17,24,39,.70) !important;
  white-space: nowrap !important;
}

/* Pill’ler soldan başlasın, yan yana aksın */
body.page-magaza main.store-main .store-toolbar-controls{
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  min-width: 0 !important;
}

/* Pill görünümü: Spreadshirt gibi net border, daha “chip” hissi */
body.page-magaza main.store-main .store-pill{
  height: 44px !important;              /* 46 -> 44 */
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  border-color: rgba(17,24,39,.25) !important;
  background: #fff !important;
}

/* Dar ekran: satır kırılabilir */
@media (max-width: 1100px){
  body.page-magaza main.store-main .store-toolbar-left{
    flex-wrap: wrap !important;
  }
  body.page-magaza main.store-main .store-toolbar-controls{
    flex-wrap: wrap !important;
  }
}
/* =========================================================
   KANO — MAGAZA TOOLBAR (Spreadshirt-like, clean + stable)
   Tek başına kullan. Önceki toolbar patch'lerini devre dışı bırak.
   ========================================================= */

/* Toolbar: 2 satır düzen */
body.page-magaza main.store-main .store-toolbar{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 10px !important;
  align-items: center !important;
  justify-content: stretch !important;
  margin: 10px 0 16px !important;
  padding: 0 !important;
}

/* Sol blok 1. satır: results + pill’ler */
body.page-magaza main.store-main .store-toolbar-left{
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  padding-left: 0 !important;
}

/* results */
body.page-magaza main.store-main .store-results{
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  color: rgba(17,24,39,.70) !important;
}

/* pill’ler */
body.page-magaza main.store-main .store-toolbar-controls{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

/* View toggle 2. satır sağda (asla üstüne binmez) */
body.page-magaza main.store-main .store-view-toggle{
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 0 !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}

/* Pill ölçüsü (Spreadshirt hissi) */
body.page-magaza main.store-main .store-pill{
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* Mobil: wrap serbest */
@media (max-width: 1100px){
  body.page-magaza main.store-main .store-toolbar{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  body.page-magaza main.store-main .store-toolbar-left,
  body.page-magaza main.store-main .store-toolbar-controls{
    flex-wrap: wrap !important;
  }
  body.page-magaza main.store-main .store-view-toggle{
    width: 100% !important;
    justify-content: flex-end !important;
  }
}
/* =========================================================
   FIX — Toolbar 1. satır tam genişlik + 2. satır toggle sağa
   (Spreadshirt hizası)
   ========================================================= */

body.page-magaza main.store-main .store-toolbar-left{
  grid-column: 1 / -1 !important;  /* <<< en kritik: full width */
  grid-row: 1 / 2 !important;
}

body.page-magaza main.store-main .store-view-toggle{
  grid-column: 1 / -1 !important;  /* full width satır */
  grid-row: 2 / 3 !important;
  justify-self: end !important;     /* sağa yasla */
  align-self: start !important;
}

/* Pill’ler bir tık daha Spreadshirt dolgunluğu */
body.page-magaza main.store-main .store-pill{
  height: 46px !important;
  padding: 0 18px !important;
  font-size: 14.5px !important;
}
/* =========================================================
   HARD RESET — MAGAZA toolbar çakışmalarını öldür
   (Bu blok, önceki patch’lerin etkisini pratikte sıfırlar)
   ========================================================= */
body.page-magaza main.store-main .store-toolbar,
body.page-magaza main.store-main .store-toolbar-left,
body.page-magaza main.store-main .store-toolbar-controls,
body.page-magaza main.store-main .store-view-toggle{
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
}
/* =========================================================
   MAGAZA TOOLBAR — Tek doğru layout (Spreadshirt)
   Satır 1: results + pill’ler (tam genişlik, soldan başlar)
   Satır 2: view toggle (sağa yaslı)
   ========================================================= */

body.page-magaza main.store-main .store-toolbar{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  row-gap: 10px !important;
  margin: 10px 0 16px !important;
  padding: 0 !important;
}

/* satır 1 */
body.page-magaza main.store-main .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

/* results */
body.page-magaza main.store-main .store-results{
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  color: rgba(17,24,39,.70) !important;
}

/* pill’ler */
body.page-magaza main.store-main .store-toolbar-controls{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

/* satır 2 */
body.page-magaza main.store-main .store-view-toggle{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  white-space: nowrap !important;
}

/* pill boyutu */
body.page-magaza main.store-main .store-pill{
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* responsive */
@media (max-width: 1100px){
  body.page-magaza main.store-main .store-toolbar-left,
  body.page-magaza main.store-main .store-toolbar-controls{
    flex-wrap: wrap !important;
  }
}

/* =========================================================
   KANO — MAGAZA: container genişliği + toolbar hizası (Spreadshirt feel)
   Bu blok style.css’teki 1200px container’ı ve toolbar padding’lerini ezer.
   ========================================================= */

body.page-magaza main.store-main .store-container{
  max-width: 1540px !important;     /* Spreadshirt gibi geniş */
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Sidebar + ürün alanı arası (çok açılmasın) */
body.page-magaza main.store-main .store-layout{
  gap: 32px !important;             /* 40 -> 32 daha “tight” */
}

/* Toolbar padding yüzünden sağa kayma oluyordu, sıfırla */
body.page-magaza main.store-main .store-toolbar{
  padding: 0 !important;
}

body.page-magaza main.store-main .store-toolbar-left{
  padding-left: 0 !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.page-magaza main.store-main .store-results{
  margin: 0 !important;
  text-align: left !important;
}

/* Pill’leri bir tık büyüt (Spreadshirt ölçüsü) */
body.page-magaza main.store-main .store-pill{
  height: 44px !important;          /* 40 -> 44 */
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* View toggle tıklanabilir + üstte kalsın */
body.page-magaza main.store-main .store-view-toggle{
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}
body.page-magaza main.store-main .store-view-btn{
  pointer-events: auto !important;
}

/* =========================================================
   KANO — MAGAZA TOOLBAR (FINAL HARD FIX)
   Amaç: toolbar shrink olmasın, 1. satır solda, 2. satır sağda.
   (Önceki all:unset / patch çakışmalarını pratikte ezer.)
   ========================================================= */

body.page-magaza main.store-main .store-content{
  padding-right: 0 !important; /* sağdan ekstra itmesin */
}

/* Toolbar: mutlaka full width */
body.page-magaza main.store-main .store-toolbar{
  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 16px !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 1fr !important;   /* tek kolon */
  grid-template-rows: auto auto !important;/* 2 satır */
  row-gap: 10px !important;

  justify-items: stretch !important;
  align-items: start !important;
}

/* Satır-1: results + pill’ler solda */
body.page-magaza main.store-main .store-toolbar-left{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

body.page-magaza main.store-main .store-results{
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body.page-magaza main.store-main .store-toolbar-controls{
  flex: 1 1 auto !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

/* Satır-2: görünüm değiştir sağa */
body.page-magaza main.store-main .store-view-toggle{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  white-space: nowrap !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}

body.page-magaza main.store-main .store-view-btn{
  pointer-events: auto !important;
}

/* Pill ölçüsü */
body.page-magaza main.store-main .store-pill{
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* Mobilde wrap serbest */
@media (max-width: 1100px){
  body.page-magaza main.store-main .store-toolbar-left,
  body.page-magaza main.store-main .store-toolbar-controls{
    flex-wrap: wrap !important;
  }
}
/* =========================================================
   KANO — MAGAZA TOOLBAR HARD RESET (center hissini bitirir)
   ========================================================= */

/* Toolbar: space-between yerine left-start + sağda toggle */
body.page-magaza main.store-main .store-toolbar{
  display: flex !important;              /* grid varsa ezer */
  align-items: center !important;
  justify-content: flex-start !important; /* <<< kritik */
  flex-wrap: wrap !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 12px 0 18px !important;
}

/* Sol blok: mutlaka genişlesin (656px’te kalmasın) */
body.page-magaza main.store-main .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  flex: 1 1 0% !important;              /* <<< kritik */
  min-width: 0 !important;
  padding-left: 0 !important;
}

/* Kontroller: soldan aksın */
body.page-magaza main.store-main .store-toolbar-controls{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

/* Toggle: her zaman en sağa */
body.page-magaza main.store-main .store-view-toggle{
  margin-left: auto !important;         /* <<< kritik */
  white-space: nowrap !important;
}

/* Pill size (Spreadshirt gibi biraz dolgun) */
body.page-magaza main.store-main .store-pill{
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* Dar ekranda kırılabilsin */
@media (max-width: 1100px){
  body.page-magaza main.store-main .store-toolbar-controls{
    flex-wrap: wrap !important;
  }
}

/* =========================================================
   KANO — TOOLBAR HARD FIX (full width + 2-row, no centering)
   BUNU override dosyanın EN ALTINA yapıştır.
   ========================================================= */

/* Toolbar kesinlikle tam genişlik */
body.page-magaza main.store-main #store-toolbar.store-toolbar{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 16px !important;
  padding: 0 !important;

  /* grid kalıntısı varsa öldür */
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Sol blok: sonuç + pill’ler aynı satırda, SOLA yaslı ve genişlesin */
body.page-magaza main.store-main #store-toolbar .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;

  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;

  padding-left: 0 !important;
  margin: 0 !important; /* auto centering varsa öldür */
}

/* Results: solda kalsın */
body.page-magaza main.store-main #store-toolbar #store-results.store-results{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Pills: sola aksın */
body.page-magaza main.store-main #store-toolbar .store-toolbar-controls{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;

  flex: 1 1 auto !important;
  min-width: 0 !important;

  margin: 0 !important;
}

/* Toggle: 2. satıra al, sağa yasla */
body.page-magaza main.store-main #store-toolbar .store-view-toggle{
  flex: 0 0 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  margin: 6px 0 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  z-index: 10 !important;
}

/* Dar ekranda kırılmaya izin ver */
@media (max-width: 1100px){
  body.page-magaza main.store-main #store-toolbar .store-toolbar-left,
  body.page-magaza main.store-main #store-toolbar .store-toolbar-controls{
    flex-wrap: wrap !important;
  }
}
/* =========================================================
   KANO — MAGAZA TOOLBAR (ID-level override, kesin kazanan)
   Sorun: #store-toolbar (ID) + !important kuralları class patch'lerini eziyor.
   Çözüm: Aynı ID selector ile override.
   ========================================================= */

body.page-magaza main.store-main .store-container.store-container{
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

body.page-magaza main.store-main .store-layout{
  gap: 32px !important;
}

/* === TOOLBAR: ID ile ez === */
body.page-magaza main.store-main #store-toolbar.store-toolbar{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;
  justify-content: flex-start !important; /* space-between'i öldür */
  gap: 14px 18px !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 16px !important;
  padding: 0 !important;
}

/* Sol blok: results + pill’ler aynı hizada, sola yaslı */
body.page-magaza main.store-main #store-toolbar.store-toolbar > .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 18px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;

  padding-left: 0 !important;
  flex-wrap: wrap !important; /* daralınca düzgün kır */
}

/* results */
body.page-magaza main.store-main #store-toolbar #store-results.store-results{
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  color: rgba(17,24,39,.70) !important;
}

/* pill container */
body.page-magaza main.store-main #store-toolbar .store-toolbar-controls{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 14px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;

  flex-wrap: wrap !important;
}

/* View toggle: sağa yapış, tıklanabilir olsun */
body.page-magaza main.store-main #store-toolbar.store-toolbar > .store-view-toggle{
  margin-left: auto !important;
  justify-content: flex-end !important;

  position: relative !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  white-space: nowrap !important;
}

body.page-magaza main.store-main #store-toolbar .store-view-btn{
  pointer-events: auto !important;
}

/* Pill ölçüsü (Spreadshirt hissi) */
body.page-magaza main.store-main #store-toolbar .store-pill{
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}
/* =========================================================
   KANO — TOOLBAR micro-tuning (Spreadshirt polish)
   ========================================================= */

/* Toolbar satırını biraz daha “centered” ve temiz hissettir */
body.page-magaza main.store-main #store-toolbar.store-toolbar{
  row-gap: 10px !important; /* wrap olunca satır arası */
}

/* Results yazısı biraz daha “hafif” */
body.page-magaza main.store-main #store-toolbar #store-results.store-results{
  font-size: 13.5px !important;
  letter-spacing: .1px !important;
}

/* Pill: border/hover hissi Spreadshirt gibi */
body.page-magaza main.store-main #store-toolbar .store-pill{
  border: 1px solid rgba(17,24,39,.22) !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

/* Hover: çok hafif premium */
body.page-magaza main.store-main #store-toolbar .store-pill:hover{
  border-color: rgba(17,24,39,.32) !important;
  box-shadow: 0 1px 0 rgba(17,24,39,.06) !important;
}

/* View toggle metni biraz daha net */
body.page-magaza main.store-main #store-toolbar .store-view-toggle{
  font-size: 14px !important;
  color: rgba(17,24,39,.75) !important;
}
body.page-magaza main.store-main #store-toolbar .store-view-toggle b,
body.page-magaza main.store-main #store-toolbar .store-view-toggle strong{
  color: rgba(17,24,39,.95) !important;
}
/* =========================================================
   KANO — MAGAZA FINAL: Container + Layout + Toolbar (ID override)
   Not: #store-toolbar ID + !important olan eski kuralları ancak böyle ezer.
   Bu bloğu EN SONA yapıştır.
   ========================================================= */

/* Container genişliği */
body.page-magaza main.store-main .store-container.store-container{
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Sidebar + content gap */
body.page-magaza main.store-main .store-layout{
  gap: 32px !important;
}

/* === TOOLBAR: ID ile ez (kesin kazanan) === */
body.page-magaza main.store-main #store-toolbar.store-toolbar{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;
  justify-content: flex-start !important; /* space-between'i öldür */
  gap: 14px 18px !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 16px !important;
  padding: 0 !important;
}

/* Sol blok: results + pill’ler */
body.page-magaza main.store-main #store-toolbar.store-toolbar > .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 18px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;

  padding-left: 0 !important;
  flex-wrap: wrap !important; /* dar ekranda düzgün kır */
}

/* results */
body.page-magaza main.store-main #store-toolbar #store-results.store-results{
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  color: rgba(17,24,39,.70) !important;
}

/* pill container */
body.page-magaza main.store-main #store-toolbar .store-toolbar-controls{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 14px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;

  flex-wrap: wrap !important;
}

/* View toggle: sağa yapış + tıklanabilir */
body.page-magaza main.store-main #store-toolbar.store-toolbar > .store-view-toggle{
  margin-left: auto !important;
  justify-content: flex-end !important;

  position: relative !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  white-space: nowrap !important;
}

body.page-magaza main.store-main #store-toolbar .store-view-btn{
  pointer-events: auto !important;
}

/* Pill ölçüsü */
body.page-magaza main.store-main #store-toolbar .store-pill{
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* =========================================================
   KANO — MAGAZA: 680px content kilidi + TOOLBAR kesin hizalama
   En alta yapıştır. ID selector + !important ile her şeyi ezer.
   ========================================================= */

html body.page-magaza main.store-main .store-container{
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

html body.page-magaza main.store-main .store-layout{
  gap: 32px !important;
}

/* >>> KRİTİK: sağ içerik (toolbar + grid) 680px'e kilitlenmesin */
html body.page-magaza main.store-main .store-content{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Ürün grid'i de full genişlik kullansın */
html body.page-magaza main.store-main section#product-list.store-grid{
  width: 100% !important;
  max-width: none !important;
}

/* === TOOLBAR: ID ile kesin override === */
html body.page-magaza main.store-main #store-toolbar.store-toolbar{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;
  justify-content: flex-start !important;  /* space-between'i öldürür */
  gap: 14px 18px !important;

  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 16px !important;
  padding: 0 !important;
}

/* Sol blok (results + filtre pill’leri) */
html body.page-magaza main.store-main #store-toolbar > .store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 18px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  flex-wrap: wrap !important;
}

html body.page-magaza main.store-main #store-toolbar #store-results.store-results{
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Pill container */
html body.page-magaza main.store-main #store-toolbar .store-toolbar-controls{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 14px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

/* View toggle her zaman en sağda (toolbar'ın gerçek sağı) */
html body.page-magaza main.store-main #store-toolbar > .store-view-toggle{
  margin-left: auto !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;

  position: relative !important;
  z-index: 999 !important;
  pointer-events: auto !important;
}

html body.page-magaza main.store-main #store-toolbar .store-view-btn{
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Pill ölçüsü */
html body.page-magaza main.store-main #store-toolbar .store-pill{
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* =========================================================
   KANO — FAVORI KALP BUTONU (TAM YUVARLAK)
   ========================================================= */
.fav-btn,
button.fav-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 9999px !important;  /* tam yuvarlak */
  overflow: hidden !important;       /* içteki img taşmasın */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* İçi dolu/basılı hali de yuvarlak kalsın */
.fav-btn.is-faved {
  border-radius: 9999px !important;
}

/* ikon tam ortada dursun */
.fav-btn .fav-ico {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}
/* KANO — Favori kalp ikonunu tam ortaya oturt */
.fav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* SVG viewBox farkı → mikro düzeltme */
.fav-btn .fav-ico{
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  transform: translateY(1px) !important; /* gerekirse 2px yap */
}

/* Eğer sağa/sola da kayıyorsa bunu da aç */
.fav-btn .fav-ico{
  transform: translate(0px, 1px) !important;
}