/* =========================================================
   KANO  MAGAZA MOBILE (iPhone 15)
   Target: <= 430px (iPhone 15 logical width 393px)
   Drop-in override file (load after all other CSS)
   ========================================================= */

/* iOS safe-area helpers */
:root{
  --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);

  --m-pad: 7px;
  --m-gap: 12px;
  --m-radius: 14px;
}

/* Prevent iOS zoom on inputs (needs 16px) */
.page-magaza input,
.page-magaza select,
.page-magaza textarea{
  font-size: 16px;
}

/* Stop horizontal overflow on mobile */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================
   HEADER (mobile)
   ========================= */
@media (max-width: 430px){

  .site-header{
    position: sticky;
    top: 0;
    z-index: 999;
    padding-top: var(--safe-top);
    background: #fff;
  }

  /* Utility bar: tighter */
  .utility-bar .container.utility-inner{
    padding-left: calc(var(--m-pad) + var(--safe-left)) !important;
    padding-right: calc(var(--m-pad) + var(--safe-right)) !important;
    gap: 10px !important;
    flex-wrap: wrap;
  }
  .utility-bar .utility-link{
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
  .utility-bar .ui-ico{
    width: 16px !important;
    height: 16px !important;
  }
  .utility-bar .utility-dot{ display: none !important; }

  /* Main header row: wrap + compress */
  .nav-search-bar .container.nav-search-inner{
    padding-left: calc(var(--m-pad) + var(--safe-left)) !important;
    padding-right: calc(var(--m-pad) + var(--safe-right)) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Logo left, actions right (row 1) */
  .header-logo{
    flex: 0 0 auto !important;
  }
  .header-logo img{
    height: 28px !important;
    width: auto !important;
    display: block;
  }

  /* Hide desktop nav links on phone (keep clean) */
  .nav-center{
    flex: 1 1 100% !important;
    order: 3 !important;
    width: 100% !important;
  }
  .nav-center .nav-links{
    display: none !important;
  }

  /* Actions row */
  .header-actions.header-right{
    flex: 1 1 auto !important;
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0;
  }

  /* Search becomes full width (row 2) */
  .header-actions .header-search-main{
    order: 4 !important;
    width: 100% !important;
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .header-actions .header-search-main input{
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
  }
  .header-actions .header-search-main button{
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .header-actions .header-search-main .ui-ico{
    width: 18px !important;
    height: 18px !important;
  }

  /* Fav + Cart icons: tappable size */
  .header-icon,
  .header-cart{
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }
  .header-icon .ui-ico,
  .header-cart .ui-ico{
    width: 22px !important;
    height: 22px !important;
  }

  /* Suggestions dropdown: fit screen */
  .header-search-main .search-suggestions{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 45vh !important;
    overflow: auto !important;
    border-radius: 14px !important;
  }
}

/* =========================
   BENEFITS (mobile)
   ========================= */
@media (max-width: 430px){
  .kano-benefits .container{
    padding-left: calc(var(--m-pad) + var(--safe-left)) !important;
    padding-right: calc(var(--m-pad) + var(--safe-right)) !important;
  }
  .kano-benefits-viewport{
    overflow: hidden;
  }
  .kano-benefit-item{
    min-width: 86vw !important; /* one card visible like carousel */
  }
  .kano-benefits-next{
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
  }
}

/* =========================
   STORE LAYOUT (mobile)
   ========================= */
@media (max-width: 430px){

  .store-main{
    padding-bottom: calc(18px + var(--safe-bottom));
  }

  .store-main .store-container{
    padding-left: calc(var(--m-pad) + var(--safe-left)) !important;
    padding-right: calc(var(--m-pad) + var(--safe-right)) !important;
  }

  /* Stack layout */
  .store-layout{
    display: block !important;
  }

  /* Toolbar: wrap */
  #store-toolbar.store-toolbar{
    position: sticky;
    top: calc(0px + var(--safe-top));
    z-index: 50;
    background: #fff;
    padding: 10px 0 !important;
    margin: 0 0 10px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  #store-toolbar .store-toolbar-left{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #store-toolbar .store-results{
    font-size: 13px !important;
  }

  #store-toolbar .store-toolbar-controls{
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Pills: 2 per row-ish */
  #store-toolbar .store-pill{
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 999px !important;
  }
  #store-toolbar .store-pill--select{
    position: relative;
  }
  #store-toolbar .store-pill--select select{
    width: 100% !important;
    height: 42px !important;
    font-size: 14px !important;
  }

  /* Filters toggle full width */
  #store-filters-toggle{
    flex: 1 1 100% !important;
  }
  #store-filters-toggle .store-pill-icon{
    width: 18px !important;
    height: 18px !important;
  }

  /* View toggle goes below */
  #store-toolbar .store-view-toggle{
    margin-top: 10px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  #store-toolbar .store-view-label{
    width: 100% !important;
    font-size: 13px !important;
    opacity: .8;
  }
  #store-toolbar .store-view-btn{
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
  }
  #store-toolbar .store-view-sep{
    display: none !important;
  }

  /* Sidebar becomes off-canvas drawer */
  #store-sidebar.store-sidebar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    width: min(86vw, 360px) !important;
    max-width: 100% !important;
    z-index: 2000 !important;
    background: #fff !important;
    padding-top: calc(12px + var(--safe-top)) !important;
    padding-bottom: calc(12px + var(--safe-bottom)) !important;
    padding-left: calc(12px + var(--safe-left)) !important;
    padding-right: 12px !important;
    overflow: auto !important;
    transform: translateX(-110%) !important;
    transition: transform .25s ease !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.22);
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  /* Backdrop */
  #store-sidebar-backdrop.store-sidebar-backdrop{
    position: fixed !important;
    inset: 0 !important;
    z-index: 1990 !important;
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(2px);
  }

  /* OPEN states (support multiple JS implementations) */
  body.store-sidebar-open #store-sidebar,
  body.sidebar-open #store-sidebar,
  #store-sidebar.is-open,
  #store-sidebar.open,
  #store-sidebar[data-open="true"]{
    transform: translateX(0) !important;
  }

  body.store-sidebar-open #store-sidebar-backdrop,
  body.sidebar-open #store-sidebar-backdrop,
  #store-sidebar-backdrop.is-open,
  #store-sidebar-backdrop.open,
  #store-sidebar-backdrop[data-open="true"]{
    display: block !important;
  }

  /* If your JS only toggles [hidden], force visible when not hidden */
  #store-sidebar-backdrop:not([hidden]){
    display: block !important;
  }

  /* Sidebar typography/tap targets */
  .store-sidebar-header,
  .store-sidebar-group-toggle{
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }
  .store-sidebar-list a{
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
}

/* =========================
   PRODUCT GRID (mobile)
   ========================= */
@media (max-width: 430px){
  /* Make grid 2 columns on iPhone 15 */
  section#product-list.store-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--m-gap) !important;
    row-gap: 16px !important;
    justify-content: start !important;
  }

  /* Card sizing + square image area safety */
  .store-grid .product-card,
  .store-grid .store-card,
  .store-grid article{
    border-radius: var(--m-radius) !important;
    overflow: hidden !important;
  }

  /* Common patterns: ensure media becomes square */
  .store-grid .product-image,
  .store-grid .product-thumb,
  .store-grid .card-image,
  .store-grid .product-card-image,
  .store-grid .product-photo,
  .store-grid img{
    max-width: 100%;
    height: auto;
  }

  /* If you have a dedicated image wrapper, force 1:1 */
  .store-grid .product-media,
  .store-grid .product-img-wrap,
  .store-grid .card-media{
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    display: block;
  }
  .store-grid .product-media img,
  .store-grid .product-img-wrap img,
  .store-grid .card-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Text under cards: tighter */
  .store-grid .product-title,
  .store-grid .card-title,
  .store-grid h3{
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }
  .store-grid .product-price,
  .store-grid .card-price,
  .store-grid .price{
    font-size: 14.5px !important;
  }

  /* Wishlist heart (if positioned absolute) stays tappable */
  .store-grid .fav-btn,
  .store-grid .wishlist-btn,
  .store-grid .product-fav{
    width: 40px !important;
    height: 40px !important;
  }
}

/* =========================
   USP + FOOTER (mobile)
   ========================= */
@media (max-width: 430px){
  .usp-section .usp-inner,
  .footer-info-section .footer-info-inner{
    padding-left: calc(var(--m-pad) + var(--safe-left)) !important;
    padding-right: calc(var(--m-pad) + var(--safe-right)) !important;
  }

  .usp-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .footer-info-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .footer-columns{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .bottom-strip{
    padding-bottom: calc(12px + var(--safe-bottom)) !important;
  }
}

/* =========================
   PRODUCT MODAL (mobile)
   ========================= */
@media (max-width: 430px){
  .product-modal-dialog{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .product-modal-body{
    height: 100% !important;
    overflow: auto !important;
    padding-bottom: calc(16px + var(--safe-bottom)) !important;
  }

  .product-modal-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  .product-modal-close{
    top: calc(10px + var(--safe-top)) !important;
    right: calc(10px + var(--safe-right)) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
  }

  .product-modal-thumbs{
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  .product-modal-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .product-modal-actions button{
    min-height: 46px !important;
    border-radius: 14px !important;
  }
}

/* =========================
   Tiny phones safety
   ========================= */
@media (max-width: 360px){
  section#product-list.store-grid{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   KANO  MAGAZA MOBILE (Spreadshirt flow)
   Benefits -> Category pills -> Products -> Footer
   Hides everything else on mobile.
   Load AFTER all other css files.
   ========================================================= */

@media (max-width: 480px){

  /* --- Global mobile safety --- */
  html, body{ overflow-x: hidden; max-width: 100%; }
  .page-magaza{ background:#fff; }

  /* --- HEADER: keep it simple, prevent weird shifts --- */
  .utility-bar{ display:none !important; }              /* st linkleri kapat */
  .nav-center .nav-links{ display:none !important; }    /* desktop nav kapat */

  .nav-search-bar .container.nav-search-inner{
    padding: 10px 14px !important;
    display:flex !important;
    flex-wrap: wrap !important;
    align-items:center !important;
    gap: 10px !important;
  }
  .header-logo img{
    height: 28px !important;
    width:auto !important;
    display:block !important;
  }

  /* search full width row */
  .header-actions.header-right{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  .header-search-main{
    flex: 1 1 auto !important;
    width:100% !important;
    margin: 6px 0 0 0 !important;
  }
  .header-search-main input{
    width:100% !important;
    height:42px !important;
    border-radius:999px !important;
    font-size:16px !important; /* iOS zoom fix */
  }
  .header-search-main button{
    width:42px !important;
    height:42px !important;
    border-radius:999px !important;
  }
  .header-fav, .header-cart{
    width:42px !important;
    height:42px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:12px !important;
    flex: 0 0 auto !important;
  }

  /* --- BENEFITS: spreadshirt-like horizontal row --- */
  .kano-benefits .container{
    padding: 0 14px !important;
  }
  .kano-benefits-viewport{
    overflow: hidden !important;
    position: relative !important;
  }
  .kano-benefits-inner{
    display:flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 12px 0 8px !important;
  }
  .kano-benefits-inner::-webkit-scrollbar{ display:none !important; }

  .kano-benefit-item{
    flex: 0 0 78% !important;     /* 1 kart + dierinin yars hissi */
    scroll-snap-align: start !important;
    border-radius: 16px !important;
    background: #f2f2f2 !important;
    overflow:hidden !important;
  }
  .kano-benefit-visual{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding: 14px 0 0 !important;
    background: transparent !important;
  }
  .kano-benefit-visual img{
    width: 140px !important;
    height: 140px !important;
    object-fit: contain !important;
    display:block !important;
  }
  .kano-benefit-panel{
    padding: 10px 14px 14px !important;
    text-align:left !important;
  }
  .kano-benefit-title{
    font-size: 18px !important;
    margin: 6px 0 6px !important;
    letter-spacing: .2px !important;
  }
  .kano-benefit-desc{
    font-size: 14px !important;
    opacity: .85 !important;
    margin: 0 !important;
  }

  /* ok butonunu kapat (mobilde swipe yeter) */
  .kano-benefits-next{ display:none !important; }

  /* --- MAIN FLOW: sidebar -> products only --- */
  .store-main{ padding-top: 8px !important; }
  .store-main .store-container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Toolbar / filters / view toggle = tamamen kapat */
  #store-toolbar{ display:none !important; }
  .store-view-toggle{ display:none !important; }
  #store-sidebar-backdrop{ display:none !important; }

  /* Sidebar' drawer olmaktan kar, kategori pill bar yap */
  .store-layout{ display:block !important; }

  #store-sidebar.store-sidebar{
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 6px 0 10px !important;
    background: transparent !important;
  }

  /* Sidebar balklarn kapat (Kategoriler / Kadn / Erkek vb.) */
  #store-sidebar .store-sidebar-header{ display:none !important; }
  #store-sidebar .store-sidebar-group-toggle{ display:none !important; }

  /* Inline "display:none" olan UL'leri ZORLA a */
  #store-sidebar .store-sidebar-group[data-gender="Kadn"] .store-sidebar-list{
    display:flex !important;               /* pill bar */
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 0 10px !important;
    margin: 0 !important;
    list-style:none !important;
  }
  #store-sidebar .store-sidebar-group[data-gender="Kadn"] .store-sidebar-list::-webkit-scrollbar{
    display:none !important;
  }

  /* Erkek listesini kapat (ayn kategoriler var, iki kere olmasn) */
  #store-sidebar .store-sidebar-group[data-gender="Erkek"]{ display:none !important; }

  /* Pills */
  #store-sidebar .store-sidebar-list li{ flex: 0 0 auto !important; }
  #store-sidebar .store-sidebar-list a{
    display:inline-flex !important;
    align-items:center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: #e9e9e9 !important;
    color: #222 !important;
    text-decoration:none !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  #store-sidebar .store-sidebar-list a img{
    width: 18px !important;
    height: 18px !important;
    display:block !important;
  }

  /* --- PRODUCTS GRID: start immediately after pills --- */
  .store-content{ width:100% !important; }
  #product-list.store-grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 6px !important;
  }

  /* product cards: a bit more spreadshirt-ish */
  #product-list .product-card,
  #product-list article{
    border-radius: 14px !important;
    overflow:hidden !important;
  }

  /* --- HIDE non-requested sections on mobile --- */
  .usp-section{ display:none !important; }
  .footer-info-section{ display:none !important; }  /* newsletter + kolonlar kapal */
  /* bottom-strip kalsn (sen footera gesin dedin) */
  .bottom-strip{ padding: 16px 14px 24px !important; }
}

/* extra small safety */
@media (max-width: 360px){
  #product-list.store-grid{ grid-template-columns: 1fr !important; }
}
/* =========================================================
   PATCH  USP geri a + Pills yan yana + spacing tighten
   (Append to END of kano_magaza_mobile_spreadshirt_simple.css)
   ========================================================= */
@media (max-width: 480px){

  /* 1) USP geri a */
  .usp-section{
    display: block !important;
  }
  .usp-section .usp-inner{
    padding: 10px 14px 0 !important;
  }
  /* USP kartlar mobilde daha kompakt */
  .usp-inner{
    display:flex !important;
    gap: 12px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }
  .usp-inner::-webkit-scrollbar{ display:none !important; }
  .usp-card{
    flex: 0 0 82% !important; /* 1 kart + yarm his */
    border-radius: 16px !important;
  }

  /* 2) Benefits: i boluklar ve d boluklar ldr */
  .kano-benefits .container{
    padding: 0 14px !important;
  }
  .kano-benefits-inner{
    gap: 10px !important;              /* kartlar aras daha az */
    padding: 8px 0 6px !important;     /* overall daha sk */
    margin: 0 !important;
  }
  .kano-benefit-item{
    flex-basis: 74% !important;        /* biraz daha dolgun, ama boluk az */
  }
  .kano-benefit-visual{
    padding: 10px 0 0 !important;
  }
  .kano-benefit-visual img{
    width: 120px !important;
    height: 120px !important;
  }
  .kano-benefit-panel{
    padding: 8px 12px 10px !important; /* ierideki boluu ldr */
  }
  .kano-benefit-title{
    margin: 4px 0 4px !important;
    font-size: 17px !important;
  }
  .kano-benefit-desc{
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  /* 3) Benefits ile kategori pill bar aras boluu ldr */
  .store-main{
    padding-top: 0 !important;
  }
  #store-sidebar.store-sidebar{
    margin-top: 2px !important;   /* benefits altna yapsn */
    margin-bottom: 8px !important;
  }

  /* 4) Tirt/Hoodie/Sweatshirt pillleri YAN YANA kesin */
  /* Kadn listesi pill bar */
  #store-sidebar .store-sidebar-group[data-gender="Kadn"] .store-sidebar-list{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;        /* ST STE ASLA olmasn */
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 8px !important;
  }
  #store-sidebar .store-sidebar-group[data-gender="Kadn"] .store-sidebar-list li{
    flex: 0 0 auto !important;
  }

  /* Pill ls daha spreadshirt gibi */
  #store-sidebar .store-sidebar-list a{
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #eeeeee !important;
  }

  /* Eer Kadn data-gender gelmiyorsa (fallback):
     sidebardaki ilk listeyi pill bar yap */
  #store-sidebar .store-sidebar-list{
    flex-wrap: nowrap !important;
  }
}
/* =========================================================
   PATCH v2  Spreadshirt mobile: pills yan yana + klt
   + ikonlar gizle + toolbar/selectleri kesin kapat
   + benefits <-> pills boluklarn ldr
   ========================================================= */
@media (max-width: 480px){

  /* 0) Benefits ile aasndaki her ey arasn sklatr */
  .kano-benefits{ margin-bottom: 4px !important; }
  .kano-benefits .container{ padding-bottom: 0 !important; }
  .kano-benefits-inner{ padding-bottom: 4px !important; }
  .store-main{ padding-top: 0 !important; }

  /* 1) O alttaki Srala / Kategori dropdown barn KESN kapat */
  #store-toolbar,
  .store-toolbar,
  .store-toolbar-wrap,
  .store-toolbar-controls,
  .store-toolbar-left,
  .store-toolbar-right,
  .store-toolbar select,
  .store-toolbar .store-pill,
  .store-toolbar .store-pill--select,
  .store-toolbar .store-view-toggle,
  #store-filters-toggle{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) Kategori blmn (Tirt/Hoodie/Sweatshirt) yan yana pills yap */
  /* nce: tm listeleri pill bar gibi davranacak ekilde zorla */
  #store-sidebar .store-sidebar-list{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;          /* st ste ASLA */
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 10px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  #store-sidebar .store-sidebar-list::-webkit-scrollbar{ display:none !important; }

  /* liste item'lar sk */
  #store-sidebar .store-sidebar-list li{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* 3) Pill grnm: Spreadshirt gibi kk, dz, yan yana */
  #store-sidebar .store-sidebar-list a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;

    padding: 10px 14px !important;         /* klttk */
    min-height: 0 !important;
    border-radius: 10px !important;
    background: #eeeeee !important;
    color: #2a2a2a !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* 4) Pill iindeki ikonlar kaldr (istersen geri aarz) */
  #store-sidebar .store-sidebar-list a img,
  #store-sidebar .store-sidebar-list a svg,
  #store-sidebar .store-sidebar-list a .icon,
  #store-sidebar .store-sidebar-list a .cat-ico{
    display: none !important;
  }

  /* 5) Sidebar iindeki balklar/accordionlar kapatp pill bar ste yaptr */
  #store-sidebar .store-sidebar-header,
  #store-sidebar .store-sidebar-group-toggle,
  #store-sidebar .store-sidebar-group-title{
    display:none !important;
  }

  /* Sidebar box gibi durmasn */
  #store-sidebar.store-sidebar{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 2px 0 6px !important;          /* benefits'e yakla */
  }

  /* 6) Benefits i boluklar biraz daha ldr (kart daha dolu dursun) */
  .kano-benefit-item{ flex-basis: 72% !important; }
  .kano-benefit-visual{ padding-top: 8px !important; }
  .kano-benefit-visual img{ width: 112px !important; height: 112px !important; }
  .kano-benefit-panel{ padding: 8px 12px 10px !important; }
  .kano-benefit-title{ margin: 3px 0 3px !important; font-size: 16.5px !important; }
  .kano-benefit-desc{ font-size: 13.2px !important; line-height: 1.25 !important; }

  /* 7) rnler hemen pills altndan balasn */
  #product-list.store-grid{ margin-top: 4px !important; }

}
/* =========================================================
   KANO  MOBILE SPACING KILL (Benefits -> Pills -> Products)
   En alta ekle. iPhone 15 dahil (<=480px)
   ========================================================= */
@media (max-width: 480px){

  /* 1) Benefits blounun altndaki gereksiz ykseklii/boluu ldr */
  .kano-benefits{
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .kano-benefits .container{
    margin: 0 !important;
    padding: 0 14px !important;           /* sadece yan padding kalsn */
  }

  .kano-benefits-viewport,
  .kano-benefits-inner{
    margin: 0 !important;
    padding: 8px 0 0 !important;          /* alt boluu sfra yakn */
    min-height: 0 !important;
    height: auto !important;
  }

  /* Kartlarn altnda ekstra margin/padding varsa */
  .kano-benefit-item{
    margin: 0 !important;
  }

  /* 2) Benefits altndaki ayrc izgi (hr/divider) varsa marginlerini ks */
  .kano-benefits hr,
  .kano-benefits .divider,
  .kano-benefits .section-divider{
    margin: 8px 0 8px !important;
  }

  /* 3) Kategori pill bar benefitse yaklatr */
  .store-main{
    margin: 0 !important;
    padding-top: 0 !important;
  }
  #store-sidebar.store-sidebar{
    margin: 6px 0 8px !important;         /* asl kritik: yukar al */
    padding: 0 !important;
  }

  /* 4) Pill bar ile rnler aras boluu da azalt */
  #product-list.store-grid{
    margin-top: 6px !important;
  }

  /* 5) Eer sayfada genel section spacing veriliyorsa onu da kr */
  .page-magaza section,
  .page-magaza .section{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* =========================================================
   MOBILE  Benefits -> Pills boluk ldrme (iPhone 15)
   En sona ekle.
   ========================================================= */
@media (max-width: 480px){

  /* 1) Benefits section: d/alt boluklar ve olas sabit ykseklikleri ldr */
  section.kano-benefits{
    margin: 0 !important;
    padding: 6px 0 2px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  section.kano-benefits .container{
    margin: 0 !important;
    padding: 0 14px !important;
  }
  .kano-benefits-viewport{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .kano-benefits-inner{
    margin: 0 !important;
    padding: 6px 0 0 !important; /* alt paddingi sfra yakn */
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start !important; /* stretch yznden uzamasn */
  }

  /* 2) Benefit kartlarnn uzayp bo kalmasn engelle */
  .kano-benefit-item{
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .kano-benefit-visual{
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .kano-benefit-panel{
    margin: 0 !important;
    padding: 6px 12px 8px !important; /* ierideki boluu azalt */
    flex: 0 0 auto !important;
  }
  .kano-benefit-title{
    margin: 4px 0 4px !important;
  }
  .kano-benefit-desc{
    margin: 0 !important;
  }

  /* 3) Benefits ile maaza balangc arasndaki boluu kr */
  main.store-main{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  main.store-main .store-container{
    padding-top: 0 !important;
  }

  /* 4) Kategori pill bar benefitse yaptr */
  #store-sidebar.store-sidebar{
    margin-top: 4px !important;
    padding-top: 0 !important;
  }

  /* 5) Pill bar ile rn grid aras boluu azalt */
  #product-list.store-grid{
    margin-top: 6px !important;
  }
}
/* =========================================================
   MOBILE  DEV BOSLUK KATILI (Benefits -> Pills arasi)
   En sona yapistir.
   ========================================================= */
@media (max-width: 480px){

  /* BENEFITS: sabit height/padding ne varsa kr */
  html body.page-magaza section.kano-benefits{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body.page-magaza section.kano-benefits::before,
  html body.page-magaza section.kano-benefits::after{
    content: none !important;
    display: none !important;
  }

  html body.page-magaza section.kano-benefits .container{
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html body.page-magaza section.kano-benefits .kano-benefits-viewport{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
  }

  html body.page-magaza section.kano-benefits .kano-benefits-inner{
    margin: 0 !important;
    padding: 8px 0 0 !important; /* alt bosluk = 0 */
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  /* STORE MAIN: yukardan gelen boslugu kr */
  html body.page-magaza main.store-main{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html body.page-magaza main.store-main .store-container{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html body.page-magaza main.store-main .store-layout{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* PILL BAR: benefits'e yaptr */
  html body.page-magaza #store-sidebar.store-sidebar{
    margin-top: 6px !important;
    padding-top: 0 !important;
  }

  /* rnler de pills'e yakn balasn */
  html body.page-magaza #product-list.store-grid{
    margin-top: 6px !important;
  }
}
/* =========================================================
   KANO  MAGAZA (iPhone 15 / Mobile) spacing + layout fix
   Ama:
   - Benefits ile kategori/pills arasndaki DEV boluu ldrmek
   - Benefits iindeki boluklar azaltmak (Spreadshirt gibi)
   - rn gridini mobilde 2 kolon yapmak
   ========================================================= */

@media (max-width: 480px){

  /* --------- 1) BENEFITS: ykseklii/alt boluu sfrla --------- */
  body.page-magaza section.kano-benefits{
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-magaza section.kano-benefits .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin: 0 auto !important;
  }

  /* Burada genelde sabit height/min-height braklyor -> byk beyaz boluk */
  body.page-magaza .kano-benefits-viewport{
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    overflow-x: auto !important;          /* Spreadshirt gibi yatay kaydr */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  body.page-magaza .kano-benefits-inner{
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.page-magaza .kano-benefit-item{
    /* Kart genilii: ekranda 1 kart + yanndan biraz grnsn */
    flex: 0 0 78% !important;
    max-width: 78% !important;

    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    scroll-snap-align: start;
  }

  /* Grsel + metin aras boluklar azalt */
  body.page-magaza .kano-benefit-visual{
    margin: 0 !important;
    padding: 0 !important;
  }
  body.page-magaza .kano-benefit-visual img{
    width: 132px !important;
    height: 132px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  body.page-magaza .kano-benefit-panel{
    margin-top: 8px !important;
    padding: 0 !important;
  }
  body.page-magaza .kano-benefit-title{
    margin: 0 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.2px;
  }

  /* Spreadshirt mobilde ou zaman sadece balk hissi var -> boluu ldrmek iin */
  body.page-magaza .kano-benefit-desc{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --------- 2) BENEFITS sonras gelen bloklar yukar yapsn --------- */
  body.page-magaza main.store-main{
    margin-top: 8px !important;
    padding-top: 0 !important;
  }
  body.page-magaza .store-container,
  body.page-magaza .store-layout,
  body.page-magaza .store-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Toolbar/pills st boluu klt */
  body.page-magaza #store-toolbar{
    margin-top: 10px !important;
    padding-top: 0 !important;
  }

  /* --------- 3) Dropdownlar saklanmasn (Srala/Kategori/Cinsiyet) --------- */
  body.page-magaza #store-toolbar .store-toolbar-controls{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  body.page-magaza #store-toolbar .store-pill--select{
    display: inline-flex !important;
    align-items: center !important;
  }
  body.page-magaza #store-toolbar .store-pill--select select{
    display: block !important;
    opacity: 0 !important;         /* pill tasarmn bozmadan select tklanabilir kalsn */
    position: absolute !important; /* mevcut pill yapn byleyse */
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
  }

  /* --------- 4) RN GRID: iPhone 15te 2 kolon --------- */
  body.page-magaza section#product-list.store-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 18px !important;
    padding-top: 8px !important;
  }

  /* Kart i boluklar biraz sk */
  body.page-magaza .product-card{
    border-radius: 14px !important;
  }
  body.page-magaza .product-card .product-img,
  body.page-magaza .product-card img{
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  /* rn isim tamasn kontrol (Spreadshirt gibi) */
  body.page-magaza .product-title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (max-width: 480px){
  body.page-magaza .kano-benefits,
  body.page-magaza .kano-benefits-viewport,
  body.page-magaza .kano-benefits-inner,
  body.page-magaza .kano-benefit-item{
    height: auto !important;
    min-height: 0 !important;
  }
}
/* =========================================================
   FINAL NAIL  iPhone 15: Dev bosluklari zorla ldr
   En sona yapistir.
   ========================================================= */
@media (max-width: 480px){

  /* Benefits section: her trl sabit ykseklii + alt boluu sfrla */
  html body.page-magaza section.kano-benefits{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html body.page-magaza section.kano-benefits .container{
    margin: 0 !important;
    padding: 0 16px !important;
  }

  /* Asl fail genelde burada: viewporta dev padding/height baslyor */
  html body.page-magaza section.kano-benefits .kano-benefits-viewport{
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: hidden !important;
  }

  html body.page-magaza section.kano-benefits .kano-benefits-inner{
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start !important;  /* stretch yznden uzamasn */
  }

  /* Benefit itemlarda sabit height varsa kesin ez */
  html body.page-magaza section.kano-benefits .kano-benefit-item{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Grsel/panel boluklarn klt */
  html body.page-magaza section.kano-benefits .kano-benefit-visual{
    padding: 0 !important;
    margin: 0 !important;
  }
  html body.page-magaza section.kano-benefits .kano-benefit-panel{
    padding: 6px 0 0 !important;
    margin: 0 !important;
  }
  html body.page-magaza section.kano-benefits .kano-benefit-title{
    margin: 0 !important;
  }
  html body.page-magaza section.kano-benefits .kano-benefit-desc{
    margin: 0 !important;
  }

  /* Benefits sonras MAAZA balangc aras boluu sfrla */
  html body.page-magaza main.store-main{
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.page-magaza main.store-main .store-container,
  html body.page-magaza main.store-main .store-layout{
    margin: 0 !important;
    padding-top: 0 !important;
  }

  /* Pills (sidebar) st boluu minimizasyon */
  html body.page-magaza #store-sidebar.store-sidebar{
    margin-top: 6px !important;
  }

  /* Eer araya izgi koyan bir divider varsa, onun marginini de kr */
  html body.page-magaza hr,
  html body.page-magaza .divider,
  html body.page-magaza .section-divider{
    margin: 10px 0 !important;
  }
}
/* =========================================================
   MOBILE GAP KILL  Pills ile rnler arasndaki dev boluu yok et
   (Toolbar gizliyse yer kapatmasn)
   En sona ekle.
   ========================================================= */
@media (max-width: 480px){

  /* Store ana layout: st padding/margin kr */
  body.page-magaza main.store-main,
  body.page-magaza main.store-main .store-container,
  body.page-magaza main.store-main .store-layout,
  body.page-magaza main.store-main .store-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Toolbar bazen grnmez ama yer kapatr -> tamamen kaldr */
  body.page-magaza #store-toolbar,
  body.page-magaza .store-toolbar,
  body.page-magaza .store-view-toggle,
  body.page-magaza .store-results{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* rn listesi yukar yapsn */
  body.page-magaza #product-list.store-grid{
    margin-top: 10px !important;
    padding-top: 0 !important;
  }

  /* Sidebar (pills) ile rnler aras ekstra boluk olmasn */
  body.page-magaza #store-sidebar.store-sidebar{
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }
}
/* =========================================================
   TASARLA  MOBILE HEADER (index ile ayn layout)
   Top row: Logo + Search
   Second row: Nav links + (right) Fav + Cart
   ========================================================= */
@media (max-width: 430px){

  /* Yatay kayma olmasn */
  html, body{ overflow-x: hidden; }

  /* Ana grid */
  .site-header .nav-search-bar .nav-search-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    grid-template-areas:
      "logo  search search search"
      "nav   nav    fav    cart" !important;
    align-items: center !important;
    gap: 10px 10px !important;
  }

  /* form+fav+cart ayn container iindeydi -> grid item gibi davran */
  .site-header .nav-search-bar .header-actions.header-right{
    display: contents !important;
  }

  /* Grid alanlar */
  .site-header .header-logo{ grid-area: logo !important; }
  .site-header form.header-search-main{ grid-area: search !important; width: 100% !important; margin: 0 !important; }
  .site-header .nav-center{ grid-area: nav !important; min-width: 0 !important; }
  .site-header a.header-fav{ grid-area: fav !important; justify-self: end !important; }
  .site-header button.header-cart{ grid-area: cart !important; justify-self: end !important; }

  /* Logo */
  .site-header .header-logo img{
    height: 26px !important;
    width: auto !important;
    display: block !important;
  }

  /* Search usable */
  .site-header form.header-search-main input{
    height: 40px !important;
    font-size: 14px !important;
    padding: 0 44px 0 14px !important;
  }
  .site-header form.header-search-main button{
    width: 44px !important;
    height: 40px !important;
  }

  /* Nav linkleri: tek satr + swipe */
  .site-header .nav-links{
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    min-width: 0 !important;
  }
  .site-header .nav-links::-webkit-scrollbar{ display:none; }

  /* Mobilde submenu kapat (hover samalamasn) */
  .site-header .nav-submenu{ display: none !important; }

  /* Kalp + Sepet tap alan */
  .site-header .header-icon,
  .site-header .header-cart{
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
  }
  .site-header .header-icon .ui-ico,
  .site-header .header-cart .ui-ico{
    width: 22px !important;
    height: 22px !important;
  }
}
/* =========================================================
   iPhone 15  Bosluk fix + Pills her zaman acik + yan yana
   (EN ALTA)
   ========================================================= */
@media (max-width: 480px){

  /* 1) Inline style="display:none" olan kategori listesini ZORLA ac */
  body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list{
    display: flex !important;          /* inline display:none ez */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 8px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list::-webkit-scrollbar{
    display:none !important;
  }
  body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list li{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* stersen ikonlar kaldr (daha spreadshirt) */
  body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list a img{
    display:none !important;
  }

  /* Pill grnm (kk, yan yana) */
  body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list a{
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: #eeeeee !important;
    color: #222 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Erkek grubunu gizle (ayn kategoriler iki kez grnmesin) */
  body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Erkek"]{
    display:none !important;
  }

  /* 2) Benefits -> Pills aras dev boslugu bitirmek icin storeu yukari cek
        (-28px yetmiyor, iPhone 15te genelde -110/-140 gerekiyor) */
  body.page-magaza main.store-main{
    margin-top: -160px !important;   /* gerekirse: -90 / -140 dene */
    padding-top: 0 !important;
  }

  /* 3) Pills ile urunler arasi da sk olsun */
  body.page-magaza #store-sidebar.store-sidebar{
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  body.page-magaza #product-list.store-grid{
    margin-top: 6px !important;
  }
}

/* =========================================================
   KANO  MOBILE NUCLEAR GAP KILL (iPhone 15)
   Ama: Benefits -> Pills -> rnler arasnda H boluk kalmasn.
   En sona ekle.
   ========================================================= */

:root{
  /* boluk hala kalrsa 120 -> 160 yap (sadece bu deeri oynat) */
  --magazaMobilePullUp: 120px;
}

@media (max-width: 480px){

  /* 0) En sk grlen sebep: toolbar / view-toggle gizli ama yer kaplyor -> komple sfrla */
  html body.page-magaza #store-toolbar,
  html body.page-magaza .store-toolbar,
  html body.page-magaza .store-toolbar-left,
  html body.page-magaza .store-toolbar-controls,
  html body.page-magaza .store-results,
  html body.page-magaza .store-view-toggle{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* 1) Store layout: gap/padding/margin ne varsa ldr */
  html body.page-magaza main.store-main,
  html body.page-magaza main.store-main .store-container,
  html body.page-magaza main.store-main .store-layout,
  html body.page-magaza main.store-main .store-content{
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    min-height: 0 !important;
  }

  /* 2) margin-top deimiyor durumuna kar: relative + top ile fiziksel olarak yukar ek */
  html body.page-magaza main.store-main{
    position: relative !important;
    top: calc(-1 * var(--magazaMobilePullUp)) !important;
  }

  /* 3) Mobilde layout tek kolon olsun: sidebar stte, rnler altta */
  html body.page-magaza main.store-main .store-layout{
    display: block !important;
  }

  /* 4) Sidebar offcanvas/height/position yznden boluk yapamasn */
  html body.page-magaza #store-sidebar.store-sidebar{
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;

    margin: 0 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  html body.page-magaza #store-sidebar-backdrop{
    display: none !important;
    height: 0 !important;
  }

  /* 5) Kategoriler / Kadn / Erkek balklarn mobilden kaldr (boluk/accordion derdi bitiyor) */
  html body.page-magaza #store-sidebar .store-sidebar-header,
  html body.page-magaza #store-sidebar .store-sidebar-group-toggle{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 6) Asl istediin: Tirt / Hoodie / Sweatshirt yan yana pill gibi (inline display:nonei de ezer) */
  html body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list{
    display: flex !important;              /* HTMLde style="display:none" var -> ezer */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;

    margin: 0 !important;
    padding: 0 0 6px !important;
    list-style: none !important;
  }
  html body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list::-webkit-scrollbar{
    display:none !important;
  }
  html body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list li{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* ikonlar istersen kaldr (daha spreadshirt) */
  html body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list a img{
    display: none !important;
  }

  html body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Kadn"] > .store-sidebar-list a{
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;

    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: #eeeeee !important;
    color: #222 !important;
    text-decoration: none !important;

    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Erkek grubunu tamamen kapat (ayn l iki kez grnmesin) */
  html body.page-magaza #store-sidebar .store-sidebar-group[data-gender="Erkek"]{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 7) rn grid st boluklarn da sfrla */
  html body.page-magaza #product-list.store-grid{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 8) kalan her ey (USP) mobilden kapal */
  html body.page-magaza section.usp-section{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* =========================================================
   MOBILE  Fine spacing (ok az nefes)
   En sona ekle
   ========================================================= */
@media (max-width: 480px){

  /* Benefits ile pills aras: az nefes */
  body.page-magaza #store-sidebar.store-sidebar{
    margin-top: 16px !important;
    margin-bottom: 14px !important;
  }

  /* Pills ile rnler aras: az nefes */
  body.page-magaza #product-list.store-grid{
    margin-top: 18px !important;
    padding-top: 6px !important;
  }

  /* rn kartlar aras boluk: biraz rahat */
  body.page-magaza #product-list.store-grid{
    column-gap: 14px !important;
    row-gap: 18px !important;
  }

  /* Kart ii alt metin bloklar ok yapk duruyorsa */
  body.page-magaza .product-title{
    margin-top: 10px !important;
  }
}
/* =========================================================
   MOBILE  Spacing kontrol (pull-up zerinden)
   En sona ekle.
   ========================================================= */
@media (max-width: 480px){

  /* 1) BURASI: asl ayar
     - ok skk: deeri klt (r. 120 -> 95)
     - ok boluk: deeri byt (r. 95 -> 120)
  */
  :root{ --magazaMobilePullUp: 75px; }

  /* 2) Ek kk nefes (garanti grnr nk store-main iinden veriyoruz) */
  body.page-magaza main.store-main{
    padding-top: 10px !important;
  }

  /* 3) Pills ile rnler arasna minik nefes */
  body.page-magaza #store-sidebar.store-sidebar{
    margin-bottom: 12px !important;
  }
  body.page-magaza #product-list.store-grid{
    margin-top: 10px !important;
  }
}

/* =========================================================
   MOBILE  Benefits yaz kaymas fix + Typography (Spreadshirt-like)
   EN ALTA EKLE
   ========================================================= */
@media (max-width: 480px){

  /* ---------- BENEFITS (kano-benefits) ---------- */
  body.page-magaza .kano-benefits{ padding: 6px 0 0 !important; }
  body.page-magaza .kano-benefits .container{ padding-left: 16px !important; padding-right: 16px !important; }

  body.page-magaza .kano-benefits-viewport{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Spreadshirt gibi yatay kaydr + snap */
  body.page-magaza .kano-benefits-inner{
    display: flex !important;
    gap: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 16px !important;
    padding: 0 16px 6px !important;
    margin: 0 !important;
  }
  body.page-magaza .kano-benefits-inner::-webkit-scrollbar{ display:none !important; }

  /* Kart genilii: yaz kaymamas iin sabit basis */
  body.page-magaza .kano-benefit-item{
    flex: 0 0 248px !important;      /* istersen 235260 oynat */
    scroll-snap-align: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Grsel + panel ortala */
  body.page-magaza .kano-benefit-visual{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.page-magaza .kano-benefit-panel{
    width: 100% !important;
    padding: 10px 0 0 !important;
    margin: 0 !important;
    text-align: center !important;  /* <-- KAYMA BTER */
  }

  /* Balk: naif + tam merkez + tama kontrol */
  body.page-magaza .kano-benefit-title{
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;

    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Aklamay zaten gizliyorsun; ak kalsn istemiyorsan dokunma */
  body.page-magaza .kano-benefit-desc{ display:none !important; }

  /* Benefits ile chips aras az nefes */
  body.page-magaza .store-main{ padding-top: 10px !important; }


  /* ---------- RN YAZILARI (Spreadshirt daha naif) ---------- */
  body.page-magaza #product-list .product-name{
    font-size: 15px !important;
    font-weight: 500 !important;     /* kaba deil */
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    color: #2b2b2b !important;
  }

  body.page-magaza #product-list .product-price{
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: #111 !important;
  }
}
/* =========================================================
   KANO  MAGAZA MOBILE (iPhone 15)  FIX v2
   - Benefits balk kaymasn bitir
   - rn isim/fiyat Spreadshirt gibi nazikletir
   EN SONA EKLE
   ========================================================= */
@media (max-width: 480px){

  /* =========================
     BENEFITS: yaz kaymas fix
     ========================= */

  /* mobilde benefits satr: yatay scroll + snap (Spreadshirt hissi) */
  body.page-magaza .kano-benefits-inner{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;

    gap: 14px !important;
    padding: 0 16px 6px !important;
    margin: 0 !important;
  }
  body.page-magaza .kano-benefits-inner::-webkit-scrollbar{ display:none !important; }

  body.page-magaza .kano-benefit-item{
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;

    /* KAYMA BTEN KISIM: her eyi merkez eksenine kilitle */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    scroll-snap-align: start !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-magaza .kano-benefit-panel{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Baln saa kaymas genelde inherited padding/transform/positiondan olur  hepsini sfrla */
  body.page-magaza .kano-benefit-title{
    width: 100% !important;
    text-align: center !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;

    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    /* Spreadshirte daha yakn: daha naif */
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
  }


  /* ==================================
     RN TYPOGRAPHY: daha naif
     ================================== */

  body.page-magaza #product-list .product-name{
    font-size: 14.5px !important;
    font-weight: 500 !important;          /* kaba deil */
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    color: #2b2b2b !important;

    margin: 10px 0 0 !important;
  }

  body.page-magaza #product-list .product-price{
    font-size: 17px !important;
    font-weight: 700 !important;          /* 800/900 deil */
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    color: #111 !important;

    margin: 6px 0 0 !important;
  }

  /* iOSta daha clean grnm */
  body.page-magaza #product-list .product-name,
  body.page-magaza #product-list .product-price{
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }
}
/* =========================================================
   iPhone 15  BENEFITS hizalama fix (kesin)
   - Yatay scroll + snap
   - Her item tam ortada (ikon alt yaz kaymaz)
   EN SONA EKLE
   ========================================================= */
@media (max-width: 480px){

  /* container left/right padding yznden satr kayyorsa: normalize et */
  body.page-magaza .kano-benefits > .container{
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* viewport scroll'u burada a (overflow:visible yznden kesilip kayk grnyordu) */
  body.page-magaza .kano-benefits-viewport{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.page-magaza .kano-benefits-viewport::-webkit-scrollbar{ display:none !important; }

  /* satr */
  body.page-magaza #kanoBenefitsRow.kano-benefits-inner,
  body.page-magaza .kano-benefits-inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    padding: 0 2px 6px !important;      /* ok az i pay */
    margin: 0 !important;
    overflow: visible !important;
  }

  /* item: ikon + yaz eksenini merkeze ivile */
  body.page-magaza #kanoBenefitsRow > article.kano-benefit-item,
  body.page-magaza .kano-benefit-item{
    flex: 0 0 260px !important;          /* her kart sabit -> hizalama amaz */
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    scroll-snap-align: start !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ikon yuvarla */
  body.page-magaza .kano-benefit-visual{
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto 10px !important;
  }

  /* panel + title: tam ortada */
  body.page-magaza .kano-benefit-panel{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.page-magaza .kano-benefit-title{
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;

    /* kayk yapan left/transform varsa sfrla */
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (max-width: 480px){
  body.page-magaza #product-list .product-name{
    font-size: 14.5px !important;
    font-weight: 500 !important;        /* kaba deil */
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: #2b2b2b !important;
  }

  body.page-magaza #product-list .product-price{
    font-size: 17px !important;
    font-weight: 700 !important;        /* 800/900 deil */
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    color: #111 !important;
  }
}
/* =========================================================
   FIX  Benefits 3. item aa kayma sorunu (wrap/baseline)
   EN SONA EKLE
   ========================================================= */
@media (max-width: 480px){

  /* satr: asla center/baseline olmasn */
  body.page-magaza #kanoBenefitsRow.kano-benefits-inner,
  body.page-magaza .kano-benefits-inner{
    align-items: flex-start !important;
  }

  /* item: asla kendi kendine center olmasn */
  body.page-magaza .kano-benefit-item{
    align-self: flex-start !important;
    margin-top: 0 !important;
    top: auto !important;
    transform: none !important;
  }

  /* panel: tm kartlarda ayn metin ykseklii olsun */
  body.page-magaza .kano-benefit-panel{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-height: 44px !important;   /* <-- kaymay bitiren kritik */
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* balk: wrap kapat (uzun balk 2 satra dp itemi bytmesin) */
  body.page-magaza .kano-benefit-title{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  /* desc bazen baka sayfalarda grnyorsa -> ykseklii bozmasn */
  body.page-magaza .kano-benefit-desc{
    display: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   PATCH  MAGAZA MOBILE: 2 kolon, byk kart, az gap
   iPhone 15 dahil (<= 430px)
   En alta yaptr.
   ========================================================= */
@media (max-width: 430px){

  /* Sayfa yan boluklarn biraz azalt -> kartlar byr */
  .store-main .store-container{
    padding-left: calc(10px + var(--safe-left)) !important;
    padding-right: calc(10px + var(--safe-right)) !important;
  }

  /* 2 kolon grid: soldaki sola, sadaki saa (tam hizal) */
  body.page-magaza section#product-list.store-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 8px !important;      /* arada 1 tk boluk */
    row-gap: 12px !important;
    justify-content: stretch !important;
    align-items: start !important;
    justify-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Kart: daha dolu ve byk hissiyat */
  body.page-magaza #product-list .product-card,
  body.page-magaza #product-list article{
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Grsel alann byt + grseli biraz yukarda tut (alta yapmasn) */
  body.page-magaza #product-list .product-media,
  body.page-magaza #product-list .product-img-wrap,
  body.page-magaza #product-list .product-image,
  body.page-magaza #product-list .product-thumb,
  body.page-magaza #product-list .card-media{
    aspect-ratio: 1 / 1 !important;  /* siyahla izdiin kare alan */
    width: 100% !important;
    padding: 10px 10px 14px !important; /* altta biraz nefes */
    background: #f4f4f4 !important;     /* spreadshirt hissi */
    display: block !important;
    position: relative !important;
  }

  body.page-magaza #product-list .product-media img,
  body.page-magaza #product-list .product-img-wrap img,
  body.page-magaza #product-list .product-image img,
  body.page-magaza #product-list .product-thumb img,
  body.page-magaza #product-list .card-media img,
  body.page-magaza #product-list img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* tirt kesilmesin, kutuyu doldursun */
    object-position: 50% 40% !important; /* 1 tk yukar */
    display: block !important;
  }

  /* Balk + fiyat: kartn alt daha sk (premium) */
  body.page-magaza #product-list .product-title,
  body.page-magaza #product-list .card-title,
  body.page-magaza #product-list h3{
    margin: 8px 2px 2px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  body.page-magaza #product-list .product-price,
  body.page-magaza #product-list .card-price,
  body.page-magaza #product-list .price{
    margin: 0 2px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  /* Kalp butonu: sabit ve tklanabilir kalsn */
  body.page-magaza #product-list .fav-btn,
  body.page-magaza #product-list .wishlist-btn,
  body.page-magaza #product-list .product-fav{
    width: 40px !important;
    height: 40px !important;
  }
}

/* Daha kk telefon gvenlii */
@media (max-width: 360px){
  body.page-magaza section#product-list.store-grid{
    column-gap: 8px !important;
  }
}
/* =========================================================
   MOBILE  PRODUCT GRID SYAHLA ZDN BOYUT + AZ GAP
   EN SONA YAPITIR
   ========================================================= */
@media (max-width: 480px){

  /* Kartlar daha geni grnsn (ekran daha iyi doldursun) */
  body.page-magaza .store-main .store-container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 2 kolon, az boluk, saa-sola hizal */
  body.page-magaza #product-list.store-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 8px !important;   /* bir tk boluk */
    row-gap: 12px !important;
    margin-top: 6px !important;
    padding: 0 !important;
  }

  /* Kart: keleri daha edgy (istersen 0 yap) */
  body.page-magaza #product-list .product-card{
    position: relative !important;
    border-radius: 8px !important;   /* tamamen keskin istersen 0px yap */
    overflow: hidden !important;
    background: #fff !important;
  }

  /* Link blok olsun */
  body.page-magaza #product-list .product-link{
    display: block !important;
    text-decoration: none !important;
  }

  /* Grsel alan: 1:1, i padding (Spreadshirt gibi dolu grnr) */
  body.page-magaza #product-list .product-image-wrap.spreadshirt-image{
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    background: #f7f7f7 !important;
    padding: 12px !important;
    display: grid !important;
    place-items: center !important;
  }

  /* Grsel: krpma yok, hafif yukar konum (rn alta yapmasn) */
  body.page-magaza #product-list .product-image-wrap.spreadshirt-image .product-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center 40% !important; /* hafif yukar */
    display: block !important;
  }

  /* Favori kalp: sa st, tappable */
  body.page-magaza #product-list .fav-btn{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 2 !important;
  }
}
/* =========================================================
/* =========================================================
   MOBILE MAGAZA — NEFES + KÜÇÜLT (KARE KÖŞE)
   Not: Bu blok EN ALTA kalsın. (Edge-to-edge hacklerini ezmek için)
   ========================================================= */
@media (max-width: 480px){

  /* Gerçek "nefes": container sağ/sol */
  html body.page-magaza main.store-main .store-container{
    padding-left:  calc(var(--m-pad) + var(--safe-left)) !important;
    padding-right: calc(var(--m-pad) + var(--safe-right)) !important;
    box-sizing: border-box !important;
  }

  /* Product list artık container içinde kalsın (edge-to-edge iptal) */
  html body.page-magaza section#product-list.store-grid{
    width: auto !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    translate: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    /* daha premium: biraz daha az büyük hissi */
    column-gap: 8px !important;
    row-gap: 12px !important;
  }

  /* Kartlar kare/sivri */
  html body.page-magaza #product-list .product-card,
  html body.page-magaza #product-list article.product-card,
  html body.page-magaza #product-list .store-card,
  html body.page-magaza #product-list .product-image-wrap,
  html body.page-magaza #product-list .product-image-wrap.spreadshirt-image{
    border-radius: 0 !important;
  }

  /* "Kartlar büyük" hissini kır: görsel kutusunu biraz kompaktlaştır */
  html body.page-magaza #product-list .product-image-wrap.spreadshirt-image{
    padding: 6px !important;          /* daha kompakt */
    aspect-ratio: 6 / 5 !important;   /* daha kisa + biraz daha genis */
  }

  /* Metinleri kompaktlaştır */
  html body.page-magaza #product-list .product-name,
  html body.page-magaza #product-list .product-title,
  html body.page-magaza #product-list h3{
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  html body.page-magaza #product-list .product-price,
  html body.page-magaza #product-list .price{
    margin-top: 4px !important;
    font-size: 14.5px !important;
    line-height: 1.1 !important;
  }

  /* Kalp butonu bir tık küçülsün (premium, daha az "balon") */
  html body.page-magaza #product-list .favorite-btn,
  html body.page-magaza #product-list button.favorite-btn{
    width: 40px !important;
    height: 40px !important;
  }
}


/* =========================================================
   FINAL OVERRIDE — SPREADSHIRT MOBILE METRICS (iPhone 15)
   Target (measured): image 171.2×171.2, name 12px, price 14px
   En sona yapıştır (en güçlü override)
   ========================================================= */
@media (max-width: 480px){
  /* 171px kolon için: (393 - 2*19 - 12) / 2 ≈ 171.5 */
  html body.page-magaza main.store-main .store-container{
    padding-left:  calc(19px + var(--safe-left)) !important;
    padding-right: calc(19px + var(--safe-right)) !important;
  }

  html body.page-magaza section#product-list.store-grid{
    column-gap: 12px !important;
    row-gap: 16px !important;
  }

  /* Kare tile: 1:1, padding yok -> img gerçek 171×171 olur */
  html body.page-magaza #product-list .product-image-wrap.spreadshirt-image{
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    background: #f4f4f4 !important;
    display: block !important;
  }

  html body.page-magaza #product-list .product-image-wrap.spreadshirt-image .product-img,
  html body.page-magaza #product-list .product-image-wrap.spreadshirt-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;      /* Spreadshirt gibi kutuyu doldurur */
    object-position: center center !important;
    display: block !important;
  }

  /* Metin ölçüleri (Spreadshirt) */
  html body.page-magaza #product-list .product-name,
  html body.page-magaza #product-list .product-title,
  html body.page-magaza #product-list h3{
    margin: 8px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    color: #212529 !important;
    text-align: left !important;
  }

  html body.page-magaza #product-list .product-price,
  html body.page-magaza #product-list .price{
    margin: 4px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #212529 !important;
    text-align: left !important;
  }

  /* Kalp: daha küçük (Spreadshirt hissi) */
  html body.page-magaza #product-list .fav-btn,
  html body.page-magaza #product-list .favorite-btn,
  html body.page-magaza #product-list button.favorite-btn{
    width: 38px !important;
    height: 38px !important;
  }
}


/* =========================================================
   FIX: Make actual IMG reach ~171x171 like Spreadshirt
   Problem: wrappers (.product-media/.product-thumb/...) have padding -> shrinks img to ~141px.
   En sona ekle.
   ========================================================= */
@media (max-width: 480px){
  /* Ensure the SQUARE TILE has NO inner padding (so img can be full tile) */
  html body.page-magaza #product-list .product-media,
  html body.page-magaza #product-list .product-img-wrap,
  html body.page-magaza #product-list .product-image,
  html body.page-magaza #product-list .product-thumb,
  html body.page-magaza #product-list .card-media,
  html body.page-magaza #product-list .product-image-wrap,
  html body.page-magaza #product-list .product-image-wrap.spreadshirt-image{
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    padding: 0 !important;              /* <-- critical (removes 141px shrink) */
    margin: 0 !important;
    background: #f4f4f4 !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Fill the tile */
  html body.page-magaza #product-list .product-media img,
  html body.page-magaza #product-list .product-img-wrap img,
  html body.page-magaza #product-list .product-image img,
  html body.page-magaza #product-list .product-thumb img,
  html body.page-magaza #product-list .card-media img,
  html body.page-magaza #product-list .product-image-wrap img,
  html body.page-magaza #product-list img.product-img,
  html body.page-magaza #product-list img.product-img-hover{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;   /* Spreadshirt tile is square; keep no-crop like you want */
    object-position: 50% 50% !important;
    display: block !important;
  }
}


/* =========================================================
   FINAL: Spreadshirt 171x171 image (mobile)
   Fixes:
   - image wrapper padding was shrinking img to ~141px
   - forces 2-col math close to 171px on iPhone 15 (393w)
   Paste at VERY END (after all other css)
   ========================================================= */
@media (max-width: 480px){

  /* 1) Container padding -> Spreadshirt feel (and 171px tile math) */
  html body.page-magaza main.store-main .store-container{
    padding-left: calc(19px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(19px + env(safe-area-inset-right, 0px)) !important;
  }

  /* 2) Grid gap = 12px like Spreadshirt */
  html body.page-magaza section#product-list.store-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
  }

  /* 3) CRITICAL: remove wrapper padding that shrinks the img */
  html body.page-magaza #product-list .product-media,
  html body.page-magaza #product-list .product-img-wrap,
  html body.page-magaza #product-list .product-image,
  html body.page-magaza #product-list .product-thumb,
  html body.page-magaza #product-list .card-media,
  html body.page-magaza #product-list .product-image-wrap,
  html body.page-magaza #product-list .spreadshirt-image{
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    padding: 0 !important;              /* <-- this was 10/10/14 */
    background: #f4f4f4 !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
  }

  /* 4) Force the actual image to fill the tile */
  html body.page-magaza #product-list img.product-img,
  html body.page-magaza #product-list img.product-img-hover,
  html body.page-magaza #product-list .product-media img,
  html body.page-magaza #product-list .product-img-wrap img,
  html body.page-magaza #product-list .product-image img,
  html body.page-magaza #product-list .product-thumb img,
  html body.page-magaza #product-list .card-media img{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;       /* Spreadshirt tile dolu dursun */
    object-position: 50% 50% !important;
    display: block !important;
  }

  /* 5) Typography match (your measurements: 12px title, 14px price) */
  html body.page-magaza #product-list .product-name,
  html body.page-magaza #product-list .product-title,
  html body.page-magaza #product-list h3.product-name{
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 8px 0 0 !important;
  }
  html body.page-magaza #product-list .product-price{
    font-size: 14px !important;
    line-height: 1.1 !important;
    margin: 4px 0 0 !important;
    font-weight: 700 !important;
  }
}


/* =========================================================
   ABSOLUTE FINAL — SPREADSHIRT TILE LOCK (171.2×171.2)
   - Kendi dosyanın EN SONUNDA durmalı.
   - img ölçüsü küçük kalıyorsa sebep: grid padding / auto column math.
   - Burada kolon genişliğini FIXLEYİP (171.2px) birebir yapıyoruz.
   ========================================================= */
@media (max-width: 430px){

  /* 0) Container: minimum nefes (Spreadshirt gibi), ama safe-area korunsun */
  html body.page-magaza main.store-main .store-container{
    padding-left:  calc(4px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(4px + env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* 1) Product list: edge-to-edge hack'leri tamamen ez + padding sıfır */
  html body.page-magaza section#product-list.store-grid{
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    translate: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(2, 171.2px) !important; /* <-- birebir */
    justify-content: space-between !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
  }

  /* 2) Kare tile: 171.2 × 171.2 */
  html body.page-magaza #product-list .product-media,
  html body.page-magaza #product-list .product-img-wrap,
  html body.page-magaza #product-list .product-image,
  html body.page-magaza #product-list .product-thumb,
  html body.page-magaza #product-list .card-media,
  html body.page-magaza #product-list .product-image-wrap,
  html body.page-magaza #product-list .product-image-wrap.spreadshirt-image{
    width: 171.2px !important;
    height: 171.2px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f4f4f4 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 3) Img: tile'ı tam doldur (Spreadshirt) */
  html body.page-magaza #product-list img.product-img,
  html body.page-magaza #product-list img.product-img-hover,
  html body.page-magaza #product-list .product-media img,
  html body.page-magaza #product-list .product-img-wrap img,
  html body.page-magaza #product-list .product-image img,
  html body.page-magaza #product-list .product-thumb img,
  html body.page-magaza #product-list .card-media img,
  html body.page-magaza #product-list .product-image-wrap img{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    display: block !important;
  }

  /* 4) Typography: measured Spreadshirt */
  html body.page-magaza #product-list .product-name,
  html body.page-magaza #product-list .product-title,
  html body.page-magaza #product-list h3{
    margin: 8px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    color: #212529 !important;
    text-align: left !important;
  }
  html body.page-magaza #product-list .product-price,
  html body.page-magaza #product-list .price{
    margin: 4px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #212529 !important;
    text-align: left !important;
  }
}

/* Çok dar ekran güvenliği: taşma olmasın */
@media (max-width: 360px){
  html body.page-magaza section#product-list.store-grid{
    grid-template-columns: 1fr !important;
    justify-content: start !important;
  }
  html body.page-magaza #product-list .product-media,
  html body.page-magaza #product-list .product-img-wrap,
  html body.page-magaza #product-list .product-image,
  html body.page-magaza #product-list .product-thumb,
  html body.page-magaza #product-list .card-media,
  html body.page-magaza #product-list .product-image-wrap,
  html body.page-magaza #product-list .product-image-wrap.spreadshirt-image{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* ===== Spreadshirt lock: main + hover aynı ölçü (EN ALTA) ===== */
@media (max-width: 480px){
  /* Tile (image wrap) zaten 171.2 lock'lu, img'leri %100 doldurt */
  #product-list .product-image-wrap,
  #product-list .product-media,
  #product-list .product-thumb,
  #product-list .card-media{
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #product-list img.product-img.product-img-main,
  #product-list img.product-img.product-img-hover{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important; /* Spreadshirt gibi doldursun */
  }
}

/* =========================================================
   MOBILE GRID – Spreadshirt positioning (FINAL)
   ========================================================= */
@media (max-width: 480px){

  /* GRID CONTAINER */
  section#product-list.store-grid{
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    column-gap: 12px !important;
    row-gap: 20px !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* IMAGE TILE – Spreadshirt kare */
  #product-list .product-image-wrap{
    aspect-ratio: 1 / 1 !important;
  }

  /* IMG – tam doldur */
  #product-list img.product-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

}


/* =========================================================
   ABSOLUTE FINAL v2 — SPREADSHIRT GRID POSITIONING (CENTERED)
   Fixes: product-list width looking like ~310px + "sağa yapışık" hissi.
   - Make layout single-column on mobile so store-content can be full width.
   - Center the fixed 2×171.2 grid in the available width (like Spreadshirt).
   ========================================================= */
@media (max-width: 480px){

  /* 1) Layout: single column (sidebar above / not stealing width) */
  html body.page-magaza main.store-main .store-layout{
    display: block !important;
  }
  html body.page-magaza main.store-main .store-content{
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }

  /* 2) Give Spreadshirt-like gutters on the content area */
  html body.page-magaza main.store-main .store-container{
    padding-left:  calc(16px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* 3) Grid: fixed tracks but CENTERED, with real gutters (no right-stuck) */
  html body.page-magaza section#product-list.store-grid{
    width: auto !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    /* keep your fixed Spreadshirt tile */
    display: grid !important;
    grid-template-columns: repeat(2, 171.2px) !important;
    column-gap: 12px !important;
    row-gap: 20px !important;

    /* the important part */
    justify-content: center !important;   /* <-- Spreadshirt feel */
    justify-items: stretch !important;

    /* kill any edge-to-edge hacks that may still apply */
    left: auto !important;
    right: auto !important;
    transform: none !important;
    translate: none !important;
  }

  /* 4) Tiny phones safety */
  @media (max-width: 360px){
    html body.page-magaza section#product-list.store-grid{
      grid-template-columns: 1fr !important;
      justify-content: stretch !important;
    }
    html body.page-magaza #product-list .product-media,
    html body.page-magaza #product-list .product-img-wrap,
    html body.page-magaza #product-list .product-image,
    html body.page-magaza #product-list .product-thumb,
    html body.page-magaza #product-list .card-media,
    html body.page-magaza #product-list .product-image-wrap,
    html body.page-magaza #product-list .product-image-wrap.spreadshirt-image{
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
    }
  }
}


/* =========================================================
   PATCH (User request): biraz daha gap + yan padding biraz azalt
   - yatay ürün arası boşluk: +2px
   - sağ/sol nefes: -2px (çok az)
   En sona eklenmiştir.
   ========================================================= */
@media (max-width: 480px){
  /* yan boşluk biraz azalsın */
  html body.page-magaza main.store-main .store-container{
    padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }

  /* ürünler arası yatay boşluk biraz artsın */
  html body.page-magaza section#product-list.store-grid,
  html body.page-magaza #product-list.store-grid{
    column-gap: 14px !important;
  }
}
/* ONLY: fav button size -> 32x32 (no other changes) */
@media (max-width: 480px){
  section#product-list.store-grid button.fav-btn,
  section#product-list.store-grid .fav-btn{
    width: 32px !important;
    height: 32px !important;
  }
}
/* ==============================
   MOBILE: Trend Koleksiyonlar tile (Spreadshirt-like)
   Kart: 146.55 x 146.55
   ============================== */
@media (max-width: 480px){

  /* Section spacing biraz sıkı */
  .trending-carousel-section{ padding: 22px 0 !important; }

  /* Carousel: iki tile yan yana rahat görünsün */
  .trend-carousel{
    gap: 12px !important;
    padding: 6px 0 10px !important;
  }

  /* Kartı sabit tile yap */
  .trend-card{
    flex: 0 0 146.55px !important;
    width: 146.55px !important;
    height: 146.55px !important;
    border-radius: 18px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Hero full tile alanı kaplasın */
  .trend-card-hero{
    height: 100% !important;
    background-size: cover !important;      /* eğer background-image varsa */
    background-position: center !important;
  }

  /* Body’yi tile içine al (overlay) */
  .trend-card-body{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 10px 10px 9px !important;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.88) 55%,
      rgba(255,255,255,1) 100%
    ) !important;
  }

  .trend-card-body h3{
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Alt açıklamayı kaldır -> tile kompakt dursun */
  .trend-card-body p{ display: none !important; }

  /* Üstteki emoji rozetini küçült */
  .trend-card-hero::after{
    width: 34px !important;
    height: 34px !important;
    right: 10px !important;
    top: 10px !important;
    font-size: 16px !important;
  }

  /* Başlığın yanındaki küçük ikon (h3::before) çok büyümesin */
  .trend-card-hero + .trend-card-body h3::before{
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

/* FIX: Trend üstüne binen main.store-main pull-up'ı kapat */
@media (max-width: 480px){
  :root{ --magazaMobilePullUp: 0px !important; }

  html body.page-magaza main.store-main{
    margin-top: 0 !important;
    top: 0 !important;
    position: relative !important;
  }

  /* garanti: trend her zaman üstte kalsın */
  html body.page-magaza .trending-carousel-section{
    position: relative !important;
    z-index: 5 !important;
  }
}