/* =========================================================
   1. TOOLBAR
   ========================================================= */
.showcase-catalog-template .showcase-product-toolbar {
    margin-bottom: 0;
    background: #fff;
}

/* =========================================================
   2. ÜRÜN LİSTESİ — WEB 3'LÜ / MOBİL 2'Lİ SABİT GRID
   Infinity sayfaları (.product_list blokları) DOM'da kalır,
   display: contents ile tek grid içinde kesintisiz akar.
   ========================================================= */
.showcase-catalog-template #product_list {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ebe9e9;
}

.showcase-catalog-template #product_list_container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 8px;
    background: #ebe9e9;
    box-sizing: border-box;
}

.showcase-catalog-template #product_list_container > .product_list {
    display: contents;
}

.showcase-catalog-template #product_list_container > .alert {
    grid-column: 1 / -1;
    margin: 0;
}

.showcase-catalog-template #product_list_container > .product_list::before,
.showcase-catalog-template #product_list_container > .product_list::after {
    display: none;
    content: none;
}

.showcase-catalog-template #product_list_container > .product_list > .product-grid-item {
    float: none;
    clear: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
}

.showcase-catalog-template #product_list_container > .product_list > .product-grid-item > .product-wrapper {
    min-width: 0;
    margin: 0;
    border: 0;
    background: #fff;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .showcase-catalog-template .showcase-product-toolbar {
        margin-bottom: 8px;
    }

    .showcase-catalog-template #product_list_container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
    }
}

/* =========================================================
   7. MANGO TARZI TOOLBAR (v8.1.0)
   [Filtrele ve Sırala]
   ========================================================= */
.showcase-catalog-template .showcase-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
}

.showcase-catalog-template .showcase-toolbar-crumbs {
    flex: 0 1 auto;
    min-width: 0;
}

.showcase-catalog-template .showcase-toolbar-crumbs .breadcrumbs {
    margin: 0;
    padding: 0;
}

.showcase-catalog-template .showcase-toolbar-crumbs .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
}

.showcase-catalog-template .showcase-filter-trigger {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.showcase-catalog-template .showcase-filter-trigger:hover span,
.showcase-catalog-template .showcase-filter-trigger:focus span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .showcase-catalog-template .showcase-toolbar-row {
        gap: 8px 0;
        min-height: 0; /* ORJ: 44px — toolbar çok kalın duruyordu */
        padding: 4px 0; /* ORJ: 6px 0 — hâlâ kalın duruyordu, daha da inceltildi */
        align-items: center;
    }
    .showcase-catalog-template .showcase-filter-trigger {
        order: 2;
        align-self: center;
        padding: 4px 0; /* ORJ: 10px 0 — toolbar'ı şişiren asıl payın büyük kısmı buradaydı */
    }
}

/* =========================================================
   8. MANGO TARZI FİLTRE ÇEKMECESİ (sağdan açılır)
   Temanın soldan açılan .listing-filter-mobile kuralları
   showcase kapsamında ezilir; apollo.filterOpen/Close aynen çalışır.
   ========================================================= */
.showcase-filter-controls .listing-filter-closebg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.showcase-filter-controls .listing-filter-closebg.active {
    opacity: 1;
    visibility: visible;
}

.showcase-filter-controls .overlay-filter {
    display: none !important;
}

body.listing-filter-active {
    overflow: hidden;
}

.showcase-filter-controls .showcase-filter-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 480px !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    z-index: 100001 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    -webkit-transform: translateX(105%) !important;
    -ms-transform: translateX(105%) !important;
    transform: translateX(105%) !important;
    transition: transform .5s cubic-bezier(.19, 1, .22, 1) !important;
}

.showcase-filter-controls .showcase-filter-drawer.active {
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
}

@media (max-width: 767px) {
    .showcase-filter-controls .showcase-filter-drawer {
        width: 100% !important;
    }
}

/* ---------- Kabuk: başlık / kaydırılabilir gövde / sabit alt butonlar ---------- */
.showcase-drawer-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.showcase-drawer-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 14px;
}

.showcase-drawer-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #000;
}

.showcase-drawer-close {
    border: 0;
    background: transparent;
    padding: 4px;
    margin: -4px;
    line-height: 0;
    color: #000;
    cursor: pointer;
    box-shadow: none;
}

.showcase-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px 20px;
}

/* ---------- Akordeon panelleri ---------- */
.showcase-drawer-body .filter-panel.showcase-fp {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.showcase-fp-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
}

.showcase-fp-count {
    margin-left: 3px;
    top: -0.45em;
    font-size: 9px;
    font-weight: 700;
    color: #000;
}

.showcase-fp-count:empty {
    display: none;
}

.showcase-fp-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 1.4px solid #000;
    border-bottom: 1.4px solid #000;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.showcase-fp.is-open > .showcase-fp-toggle .showcase-fp-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

.showcase-fp-body {
    display: none;
    padding: 0 0 16px;
}

.showcase-fp.is-open > .showcase-fp-body {
    display: block;
}

/* ---------- Hücreli grid (Renk / Beden vb. nitelikler) ---------- */
.showcase-drawer-body ul.showcase-fp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0 0 0 1px;
    padding: 1px 1px 0 0;
}

.showcase-drawer-body li.showcase-fp-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: -1px 0 0 -1px;
    padding: 6px 8px 6px 12px;
    border: 1px solid #e3e3e3;
    background: #fff;
    cursor: pointer;
    float: none;
    width: auto;
}

.showcase-drawer-body li.showcase-fp-cell .hastext {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #000;
    line-height: 1.25;
    word-break: break-word;
}

.showcase-drawer-body li.showcase-fp-cell.active-filter {
    border: 1px solid #000;
    z-index: 2;
}

.showcase-drawer-body .showcase-fp-cell .color-span {
    flex: 0 0 auto;
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 0;
}

/* ---------- Satır listeleri (Kategoriler / Marka / gelişmiş filtreler) ---------- */
.showcase-drawer-body ul.showcase-fp-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.showcase-drawer-body .showcase-fp-rows > li {
    padding: 9px 0;
    float: none;
    width: auto;
    cursor: pointer;
}

.showcase-drawer-body .showcase-fp-rows li a {
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
}

.showcase-drawer-body .showcase-fp-rows li.active-filter > a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.showcase-drawer-body .showcase-fp-rows .sidebar-child-links {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 14px;
}

.showcase-filter-drawer .ui-slider-horizontal,
.showcase-filter-drawer #price-slider-range .ui-slider {
    height: 2px;
    border: 0;
    border-radius: 0;
    background: #e3e3e3;
    margin: 16px 8px 10px;
}

.showcase-filter-drawer .ui-slider .ui-slider-range {
    background: #000;
    border-radius: 0;
}

.showcase-filter-drawer .ui-slider .ui-slider-handle {
    width: 12px;
    height: 12px;
    top: -5px;
    margin-left: -6px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    outline: 0;
    cursor: pointer;
}

/* ---------- Stoktakiler ---------- */
.showcase-fp-stock {
    padding: 13px 0;
}

.showcase-stock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
}

.showcase-stock-row input.filter_stock {
    margin: 0;
}

/* ---------- Sıralama (Mango: seçili satırda ✓) ---------- */
.showcase-sort-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.showcase-sort-option {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
}

.showcase-sort-check {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.showcase-sort-option.is-selected {
    font-weight: 700;
}

.showcase-sort-option.is-selected .showcase-sort-check {
    visibility: visible;
}

/* apollo hook'u için DOM'da kalır; görsel olarak Mango listesi kullanılır.
   ("hide" sınıfı kullanılmadı: apollo.renderStyle1 hide'ı kaldırabiliyor.) */
.showcase-sort-native {
    display: none !important;
}

/* ---------- Alt sabit butonlar ---------- */
.showcase-drawer-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px calc(14px + constant(safe-area-inset-bottom));
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
}

.showcase-drawer-footer .btn.showcase-drawer-apply,
.showcase-drawer-footer .btn.showcase-drawer-clear {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 44px;
    box-shadow: none;
}

.showcase-drawer-footer .btn.showcase-drawer-apply {
    border: 1px solid #000;
    background: #000;
    color: #fff;
}

.showcase-drawer-footer .btn.showcase-drawer-apply:hover {
    background: #1a1a1a;
}

.showcase-drawer-footer .btn.showcase-drawer-clear {
    border: 1px solid #d6d6d6;
    background: #fff;
    color: #000;
}

.showcase-drawer-footer .btn.showcase-drawer-clear:hover {
    border-color: #000;
}

/* =========================================================
   9. v8.1.1 DÜZELTMELERİ (görünüm birebir aynı kalır)
   ========================================================= */

/* Temanın .s-scroll { cursor: all-scroll; } kuralı çekmecede
   sürükleme imleci gösteriyordu; kapsam içinde normale döndür. */
.showcase-filter-controls .showcase-filter-drawer.s-scroll,
.showcase-filter-controls .showcase-filter-drawer .s-scroll,
.showcase-filter-drawer .showcase-drawer-body {
    cursor: default;
}

/* Tıklanabilir her şey el imleci */
.showcase-filter-drawer .showcase-fp-toggle,
.showcase-filter-drawer .showcase-fp-toggle *,
.showcase-filter-drawer li.showcase-fp-cell,
.showcase-filter-drawer li.showcase-fp-cell *,
.showcase-filter-drawer .showcase-fp-rows > li,
.showcase-filter-drawer .showcase-fp-rows li a,
.showcase-filter-drawer .showcase-sort-option,
.showcase-filter-drawer .showcase-sort-option *,
.showcase-filter-drawer .showcase-stock-row,
.showcase-filter-drawer .showcase-stock-row *,
.showcase-filter-drawer .showcase-drawer-close,
.showcase-filter-drawer .ui-slider-handle {
    cursor: pointer;
}

/* Mobilde slider sürüklerken tarayıcının sayfayı kaydırmasını engelle;
   dokunmatik sürükleme JS shim'i ile jQuery UI'a iletilir. */
.showcase-filter-drawer #price-slider-range,
.showcase-filter-drawer .ui-slider,
.showcase-filter-drawer .ui-slider-handle {
    -ms-touch-action: none;
    touch-action: none;
}

/* =========================================================
   10. v8.1.2 TİPOGRAFİ — NeuzeitGrotesk 400 / 12px / 30px
   Sitede kayıtlı font kullanılır; yerleşim ve renkler aynı kalır.
   ========================================================= */
.showcase-drawer-shell,
.showcase-drawer-shell .showcase-drawer-title,
.showcase-drawer-shell .showcase-fp-toggle,
.showcase-drawer-shell .showcase-fp-label,
.showcase-drawer-shell li.showcase-fp-cell .hastext,
.showcase-drawer-shell .showcase-fp-rows li a,
.showcase-drawer-shell .showcase-sort-option,
.showcase-drawer-shell .showcase-stock-row,
.showcase-drawer-shell .showcase-drawer-footer .btn.showcase-drawer-apply,
.showcase-drawer-shell .showcase-drawer-footer .btn.showcase-drawer-clear {
    font-family: 'NeuzeitGrotesk', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
}

/* Seçili durum ayrımı bold yerine Mango'daki gibi işaretle kalır
   (hücrede siyah çerçeve, satırda alt çizgi, sıralamada ✓). */
.showcase-drawer-shell .showcase-fp-rows li.active-filter > a,
.showcase-drawer-shell .showcase-sort-option.is-selected {
    font-weight: 400;
}

/* Üst simge sayaç küçük kalır, sadece font ailesi değişir. */
.showcase-drawer-shell .showcase-fp-count {
    font-family: 'NeuzeitGrotesk', sans-serif;
    font-weight: 400;
    font-size: 9px;
    line-height: 1;
}

/* 30px satır yüksekliğinde satır boşlukları büyümesin diye
   dikey padding'ler dengelenir; görünen yükseklikler aynı kalır. */
.showcase-drawer-shell .showcase-fp-toggle { padding: 8px 0; }
.showcase-drawer-shell .showcase-fp-rows > li { padding: 2px 0; }
.showcase-drawer-shell .showcase-sort-option { padding: 1px 0; }
.showcase-drawer-shell li.showcase-fp-cell .hastext { line-height: 1.25; } /* hücre içinde taşma olmaması için */

/* Alt butonlar: 30px line-height ile ortalama flex'e alınır,
   46px yükseklik ve görünüm birebir korunur. */
.showcase-drawer-shell .showcase-drawer-footer .btn.showcase-drawer-apply,
.showcase-drawer-shell .showcase-drawer-footer .btn.showcase-drawer-clear {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   11. v8.1.3 — Toolbar "Filtrele ve Sırala" breadcrumbs ile aynı
   Kendine özel font kuralları kaldırılır; breadcrumbs gibi
   temanın gövde tipografisini miras alır. NeuzeitGrotesk
   yalnızca çekmece içinde geçerli kalır.
   ========================================================= */
.showcase-catalog-template .showcase-filter-trigger {
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: inherit;
}

/* =========================================================
   12. v8.1.4 — YAPIŞKAN TOOLBAR (web + mobil)
   Toolbar scroll'da header'ın hemen altında sabit kalır.
   top değeri JS tarafından canlı header yüksekliğinden ölçülür
   (--showcase-sticky-top); header küçülse/gizlense de altına oturur.
   ========================================================= */
.showcase-catalog-template .showcase-product-toolbar {
    position: -webkit-sticky;
    position: sticky;
    top: var(--showcase-sticky-top, 0px);
    z-index: 900; /* ürün kartlarının üstünde, header (1030) ve çekmecenin (100001) altında */
    background: #fff;
    transition: top .15s ease;
}

/* =========================================================
   13. v8.1.5 — YAPIŞKAN TOOLBAR DÜZELTMELERİ
   - Yapışıkken toolbar bandı viewport'un en sol/sağına kadar uzar
     (kenarlardan ürün görünmez); genişlikler JS ile ölçülür,
     100vw kaynaklı yatay scroll oluşmaz.
   - top geçişindeki animasyon gecikmesi kart sızmasına yol açıyordu;
     kaldırıldı ve yapışıkken üst boşluk beyazla kapatılır.
   - Mobilde toolbar altına nefes payı eklendi.
   ========================================================= */
.showcase-catalog-template .showcase-product-toolbar {
    transition: none; /* ORJ: transition: top .15s ease; — scroll'da gecikme/aralık yapıyordu */
}

/* Tam genişlik beyaz zemin katmanı; içerik hizası değişmez. */
.showcase-catalog-template .showcase-product-toolbar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -3px;
    /* ORJ: calc(-1 * var(--showcase-bleed-left, 0px) - 3px); vb.
     * -3px'lik ekstra pay kenar sızıntısını kapatmak için eklenmişti
     * ama negatif offset'li bu absolute katman viewport genişliğini
     * aşarak masaüstünde yatay scrollbar'a sebep oluyordu. Ekstra pay
     * kaldırıldı; JS zaten document.documentElement.clientWidth
     * (scrollbar hariç) ile tam/gerçek genişliği ölçüyor, fazladan
     * paya gerek yok. */
    /* ORJ: calc(-1 * var(--showcase-bleed-left, 0px) - 3px); vb.
     * -3px payı yatay scroll'a sebep olduğu için kaldırılmıştı (bir
     * önceki not). Ama tam sıfır pay bazı ekranlarda 1px'in altında
     * kalan yuvarlama farkı yüzünden kenarda ince bir sızıntı
     * bırakabiliyor. -1px, yatay scroll tetiklemeyecek kadar küçük
     * ama sızıntıyı kapatmaya yetecek bir orta yol. */
    left: calc(-1 * var(--showcase-bleed-left, 0px) - 1px);
    right: calc(-1 * var(--showcase-bleed-right, 0px) - 1px);
    background: #fff;
    z-index: -1;
}

/* Yalnızca yapışıkken yukarı da uzar: header ile toolbar arasında
   ölçüm anları/yuvarlama kaynaklı sızabilecek kart parçalarını örter.
   Sayfa en üstteyken uygulanmaz ki header'ın üstüne binmesin. */
.showcase-catalog-template .showcase-product-toolbar.showcase-toolbar-stuck::before {
    top: -60px;
}

@media (max-width: 767px) {
    .showcase-catalog-template .showcase-product-toolbar {
        padding-bottom: 0; /* ORJ: 10px — toolbar-row zaten kendi padding'ini yönetiyor, bu ayrı 10px unutulmuştu ve toolbar altı boşluğun asıl sebeplerinden biriydi */
    }
}

/* =========================================================
   14. v8.1.6 ACİL DÜZELTME — z-index ve header örtme
   Canlı sitede header'ın z-index'i 900'ün altında; toolbar hem
   header'ı hem açılır menüleri örtüyordu.
   ========================================================= */

/* ORJ: z-index: 900; — header ve menü dropdown'larının üstünde kalıyordu.
   10: ürün kartlarının/owl'un üstünde, header ve menülerin altında. */
.showcase-catalog-template .showcase-product-toolbar {
    z-index: 10;
    /* ORJ: transition: top .06s linear;
     * Bu geçiş hızlı (fling) scroll'daki tek karelik gecikmeyi örtmek için
     * eklenmişti. Ama header'ın kendi ~250ms'lik yavaş collapse animasyonu
     * (responsive.css: header.scrolled translateY, min-width:767px) sırasında
     * rAF zaten her kareyi canlı ölçüp top değerini anlık güncelliyor;
     * toolbar'a AYRICA bir geçiş eklemek bu sürekli değişen hedefin peşinden
     * ikinci bir gecikmeyle koşturuyordu -> toolbar header'ın yavaş inişini
     * takip ederken hep bir adım geride kalıp aradan anlık boşluk/site
     * görünümü sızdırıyordu. rAF'ın kendisi zaten pürüzsüz ve anlık; ek
     * geçişe gerek yok. */
    transition: none;
}

/* ORJ: .showcase-toolbar-stuck::before { top: -60px; }
   Yapışıkken yukarı uzayan beyaz örtü, header sticky olduğunda header'ın
   alt bölümünü kapatıyordu. Geçiş animasyonu zaten kaldırıldığı ve top
   değeri her frame rAF ile ölçüldüğü için örtüye gerek kalmadı. */
.showcase-catalog-template .showcase-product-toolbar.showcase-toolbar-stuck::before {
    top: 0;
}

/* =========================================================
   15. v8.1.7 — Header ile toolbar arasındaki 1px'lik sızıntı
   Kesirli header yüksekliği + yuvarlama farkı ince bir çizgi
   halinde site içeriği gösterebiliyordu. Yapışıkken beyaz zemin
   2px yukarı taşarak dikişi kapatır (60px'lik eski örtünün
   aksine header'ı kapatmaz, yalnızca alt kenar dikişini örter). */
.showcase-catalog-template .showcase-product-toolbar.showcase-toolbar-stuck::before {
    top: -8px;
}

/* =========================================================
   16. "ÖNE ÇIKANLAR" BAŞLIĞI
   Font ailesi/ağırlığı breadcrumbs ile aynı (body varsayılanı,
   NeuzeitGrotesk/400), yalnızca boyut 27px'te kalıyor.
   Yalnızca showcase şablonundaki #catalog_components kapsamında;
   anasayfadaki diğer home-el-products slider başlıkları etkilenmez.
   ========================================================= */
#catalog_components .home-el-products .title-block h2 {
    font-family: inherit;  /* body: NeuzeitGrotesk (breadcrumbs de aynı miras) */
    font-size: 27px;
    font-weight: 400;      /* ORJ: 600 */
    text-transform: none;
    letter-spacing: normal;
}

/* =========================================================
   16b. "ÖNE ÇIKANLAR" ARKAPLANI — ürün detay galerisindeki
   progress bar ile aynı kırmızı. Başlık zemini zaten transparent
   (temanın orijinal kuralı), metin ve ayraç çizgisi kırmızı zeminde
   okunur olsun diye açık renge çevrildi. Dış boşluk da toparlandı.
   ========================================================= */
#catalog_components {
    background-color: #e0e0e0; /* ORJ: #e0e0e0 — ürün detay progress bar rengiyle aynı */
    margin-top: 0; /* garanti: Bootstrap .row olası üst boşluk bırakmasın */
    margin-bottom: 12px; /* ORJ: 20px — toolbar/ürün gridine geçiş boşluğu toparlandı */
}
/* Temanın kendi title-block padding'i (masaüstü 20px, mobil 10px) ve
   ayraç çizgisinin top:35px konumu; toolbar bitişik durunca fazla
   boşluk bırakıyordu. Web ve mobilde padding-top azaltıldı, çizgi
   pozisyonu da aynı oranda yukarı taşınarak dikey ortalama korunuyor. */
#catalog_components .home-el-products .title-block {
    padding-top: 12px; /* ORJ: 20px (masaüstü) */
}
#catalog_components .home-el-products .title-block:before {
    top: 27px; /* ORJ: 35px — padding ile aynı oranda yukarı taşındı */
}
#catalog_components .home-el-products .title-block h2 {
    color: #000;
}
#catalog_components .home-el-products .title-block:before {
    border-top-color: rgba(255, 255, 255, .35);
}
#catalog_components .home-el-products .title-block .subtitle,
#catalog_components .home-el-products .title-block .show-all {
    color: #fff;
}
#catalog_components .home-el-products .title-block .show-all {
    background: transparent; /* ORJ: #fff — kırmızı zeminde beyaz kutu+beyaz yazı görünmez olurdu */
}

/* Kartların kendi 6px padding'i (product-featured-item), kırmızı
 * #catalog_components zeminini kartlar arasında ve kenarlarda ince
 * çizgiler halinde gösteriyordu (kartın kendi beyaz kutusu sadece iç
 * kısmı kaplıyor, 6px'lik dış boşluk boştu/transparan). Bu boşluğa da
 * beyaz veriyoruz; kartlar artık birbirine bitişik beyaz bir şerit
 * gibi duruyor, kırmızı yalnızca başlık alanında ve slider'ın en
 * dışında (varsa) görünür kalıyor. */
#catalog_components .home-el-products .product-featured-item {
    background: #fff;
}

/* =========================================================
   17. HEADER İLE TOOLBAR ARASI BOŞLUK — WEB + MOBİL
   Section zaten .no-padding taşıyor ama içindeki .container'da
   (veya kalıntı bir üst margin'de) görünür bir boşluk kalıyordu.
   ORJ: yalnızca mobilde (max-width:767px) sıfırlanıyordu; masaüstünde
   aynı boşluk fark edilmeden duruyordu. Artık her iki boyutta da
   garantili sıfırlanıyor.
   ========================================================= */
.showcase-catalog-template {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.showcase-catalog-template > .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.showcase-catalog-template .showcase-product-toolbar {
    margin-top: 0 !important;
}

/* =========================================================
   18. MOBİL: "ÖNE ÇIKANLAR" BAŞLIĞI ÜST BOŞLUĞU
   Zaten text-align:center ile tam ortalı. Değer bölüm 16b'deki
   toparlama ile tek kaynaktan yönetilsin diye buraya taşındı.
   ========================================================= */
@media (max-width: 767px) {
    #catalog_components .home-el-products .title-block {
        padding-top: 14px; /* ORJ: 10px (tema) → 26px (ilk ayar) → 14px (toparlandı) */
    }
}