/* ===================================
    PromoShop vitrin — Crafto decor-store üzerine küçük uyarlamalar
    (tema dosyaları wwwroot/crafto altında, değiştirilmeden kullanılır)
====================================== */

/* Logo görseli yokken site adı: Crafto logo yüksekliğine (36px) yakın yazı logo */
.storefront-text-logo {
    display: inline-block;
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: lowercase;
}

/* Tedarikçi ürün görselleri beyaz zeminli kare fotoğraflar; Crafto kartı 600x700 oranında ve #efefef zeminli.
   multiply ile beyaz zemin Crafto'nun gri zeminine dönüşür. */
.shop-boxed .shop-box .shop-image > a {
    display: block;
    position: relative;
    aspect-ratio: 600 / 700;
    background-color: #efefef;
}
/* Oran kutuda: tedarikçi görseli kırık (404) olsa da kart yüksekliği bozulmaz, alt metni gizlenir */
.shop-boxed .shop-box .shop-image > a > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    color: transparent;
}
/* Uzun ürün adları tek satır: kart yükseklikleri eşit kalır, grid (isotope) boşluksuz dizilir */
.shop-boxed .shop-box .shop-footer > a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Öne çıkan kategoriler: Crafto 65x65 ikon alanı; ikon yokken ürün görseli daire içinde */
.categories-style-01 .storefront-category-icon {
    display: inline-flex;
    width: 65px;
    height: 65px;
}
.categories-style-01 .storefront-category-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Kategoriler mega menüsü: 170x165 görsel alanı */
.storefront-menu-category-image {
    display: inline-flex;
    width: 170px;
    max-width: 100%;
    aspect-ratio: 170 / 165;
}
.storefront-menu-category-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Spot ürün slider'ı: beyaz zeminli fotoğraf Crafto arka planına karışsın (PNG kesimli görsel etkisi) */
.storefront-spotlight-image {
    display: block;
    padding: 14% 22% 30%;
}
.storefront-spotlight-image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Ana sayfa slider'ı (admin → Slaytlar): arka plan web görseli; dikey ekranlarda (telefon, dikey tablet)
   slaytın mobil görseli kullanılır. Görsel adresi li üzerindeki --slide-mobile-bg değişkeninden gelir. */
@media (orientation: portrait) and (max-width: 1199.98px) {
    #decor-store-slider .storefront-slide .tp-bgimg {
        background-image: var(--slide-mobile-bg) !important;
    }
}
/* "Sonraki" kutusundaki küçük görsel: Crafto'da 200x115 hazır thumb'dı, burada sonraki slaytın web görseli */
#decor-store-slider .storefront-slide-thumb {
    background-size: cover;
    background-position: center;
}

/* Ana sayfa banner grupları (admin → Bannerlar). Kapsayıcı Crafto'nun "shop-grid" listesi; Crafto ona isotope masonry
   uygular (öğelere position:absolute/left/top ve listeye sabit yükseklik yazar). Yerleşim modelleri CSS grid ile
   kurulduğu için isotope'un satır içi stilleri burada etkisizleştirilir. Kırılımlar Crafto'nunkiler (991 / 767 / 575).
   Admin şeması: admin.css → .banner-diagram-* */
.banner-grid.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    height: auto !important;
}
.banner-grid.grid > li.grid-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    min-width: 0;
}
.banner-image {
    position: relative;
    overflow: hidden;
    /* aspect-ratio + min-height (telefonda) min-height'ı genişliğe aktarıp karoyu taşırmasın */
    max-width: 100%;
}
.banner-image picture {
    display: block;
    height: 100%;
}
.banner-image img {
    display: block;
    width: 100%;
    height: auto;
    min-height: inherit;
    object-fit: cover;
}
.banner-image.has-ratio {
    aspect-ratio: var(--banner-ratio);
}
.banner-image.has-ratio img {
    height: 100%;
}
.banner-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.banner-content {
    z-index: 2;
    pointer-events: none;
}
.banner-content a {
    pointer-events: auto;
}
/* Küçük/basık karolarda metin sığmazsa başlık değil alt kısım kırpılsın; Crafto'nun %11 dikey boşluğu da sınırlanır. */
.banner-content-medium {
    align-items: safe center !important;
}
.banner-content-medium > div {
    padding-top: min(11%, 28px) !important;
    padding-bottom: min(11%, 28px) !important;
}
.banner-description {
    line-height: 1.6;
}
.banner-description-sm {
    font-size: 14px;
    line-height: 1.5;
}

@media (min-width: 992px) {
    .banner-layout-twoequal.grid,
    .banner-layout-foursquares.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .banner-layout-threeequal.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .banner-layout-fourequal.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .banner-layout-fiveequal.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .banner-layout-sixequal.grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .banner-layout-largeleft.grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .banner-layout-largeright.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .banner-layout-mosaic4.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
    .banner-layout-largeleft > .banner-slot-large { grid-row: 1 / span 2; }
    .banner-layout-largeright > .banner-slot-large { grid-column: 2; grid-row: 1 / span 2; }
    .banner-layout-mosaic4 > .banner-slot-large { grid-column: 3; grid-row: 1 / span 2; }
    .banner-layout-mosaic4 > .banner-slot:nth-child(2) { grid-column: 1 / span 2; }

    /* Büyük banner yanındaki küçüklerin toplam yüksekliğini doldurur; kendi oranı/yüksekliği satırları büyütmez. */
    .banner-grid > .banner-slot-large { align-self: stretch; }
    .banner-slot-large > .shop-box { height: 100%; }
    .banner-slot-large .banner-image {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
    .banner-slot-large .banner-image img { height: 100%; }
}

@media (max-width: 991.98px) {
    .banner-layout-twoequal.grid,
    .banner-layout-foursquares.grid,
    .banner-layout-fourequal.grid,
    .banner-layout-largeleft.grid,
    .banner-layout-largeright.grid,
    .banner-layout-mosaic4.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .banner-layout-threeequal.grid,
    .banner-layout-fiveequal.grid,
    .banner-layout-sixequal.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Büyük banner (ve mozaikteki geniş banner) tam genişlikte, küçükler ikişer yan yana */
    .banner-grid > .banner-slot-large,
    .banner-layout-mosaic4 > .banner-slot:nth-child(2) { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .banner-layout-threeequal.grid { grid-template-columns: minmax(0, 1fr); }
    .banner-layout-fiveequal.grid,
    .banner-layout-sixequal.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Metin görselin üzerinde durduğu için basık görsellerde yazıya yer kalsın (fazlası kırpılır). */
    .banner-slot.has-text .banner-image { min-height: 240px; }
    /* Büyük karolar h3 + btn-large kullanır */
    .banner-layout-singlewide .banner-slot.has-text .banner-image,
    .banner-slot-large.has-text .banner-image { min-height: 280px; }
    /* Mobil görsel yüklendiyse telefonda kendi oranıyla gösterilir. */
    .banner-image.has-mobile.has-ratio { aspect-ratio: auto; }
    .banner-image.has-mobile.has-ratio img { height: auto; }
}

@media (max-width: 575.98px) {
    .banner-layout-twoequal.grid,
    .banner-layout-largeleft.grid,
    .banner-layout-largeright.grid,
    .banner-layout-mosaic4.grid { grid-template-columns: minmax(0, 1fr); }
    .banner-layout-foursquares .banner-slot.has-text .banner-image,
    .banner-layout-fourequal .banner-slot.has-text .banner-image,
    .banner-layout-fiveequal .banner-slot.has-text .banner-image,
    .banner-layout-sixequal .banner-slot.has-text .banner-image { min-height: 200px; }
}

/* Üst bant (admin → Ayarlar → Üst Bant; Views/Shared/_TopBar.cshtml, tüm temalar). Editör çıktısı <p> içerir:
   bant tek satırlık olduğu için paragraf boşlukları sıfırlanır. Linkler bandın yazı rengini alır; :where ile özgüllük düşük
   tutulur, böylece link üzerine verilen renk class'ı (ör. text-base-color) yine geçerli olur. */
.storefront-top-bar .storefront-top-bar-content p {
    margin: 0;
}
:where(.storefront-top-bar .storefront-top-bar-content) a {
    color: var(--storefront-top-bar-color, inherit);
}
.storefront-top-bar .storefront-top-bar-content a:hover {
    opacity: .8;
}
.storefront-top-bar .ql-align-center { text-align: center; }
.storefront-top-bar .ql-align-right { text-align: right; }
.storefront-top-bar .ql-align-justify { text-align: justify; }

/* Header menüsü (admin → Ayarlar → Header; Views/Shared/_HeaderNav.cshtml). Admin'in yazdığı iki kelimelik menü adları
   ve rozetler masaüstünde alt satıra kırılmasın (Crafto demo menüsü tek kelimelik). */
@media (min-width: 992px) {
    header .navbar-nav > .nav-item > .nav-link { white-space: nowrap; }
    /* Logo soldayken link (40px) header'dan kısa; mega menü header'ın altında açıldığı için arada boşluk kalıyor ve
       fare oradan geçerken Crafto menüyü kapatıyordu (li.dropdown'dan çıkış). Menü açıkken linkin altına görünmez bir
       köprü: boşluk li'nin parçası sayılır. Açılan menü köprünün üstünde kalır; header görünümü değişmez. */
    header .navbar-nav > .nav-item.dropdown.open > .nav-link::after {
        content: "";
        position: absolute;
        top: 100%;
        left: -40px;
        right: -40px;
        height: 70px;
    }
    /* "Tüm üst kategoriler" mega menüsü: çok sayıda sütun satırı ekranı aşmasın, menü içinde kaydırılsın */
    /* Yalnızca alt kategorili (sub-title'lı) uzun listede; "sadece ana kategoriler" listesi kısa, kaydırma çubuğu
       çıkmaz. overflow-y açılınca .row'un negatif kenar boşluğu yatay çubuk da çıkarıyordu: yatay taşma gizlenir. */
    header .mega-menu.storefront-mega-scroll:has(.sub-title) {
        max-height: calc(100vh - 200px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}
/* Footer'da admin HTML'i (sütun altı / alt bant): linkler footer link rengini alsın */
.storefront-footer-html p:last-child { margin-bottom: 0; }

/* Sabit WhatsApp butonu (admin → Ayarlar → WhatsApp; Views/Shared/_WhatsAppButton.cshtml, tüm temalar). Renk Crafto'nun
   .whatsapp sosyal ikon rengi (#25d366); scroll-progress sağda dikey ortada olduğu için alt köşeyle çakışmaz. */
.storefront-whatsapp {
    position: fixed;
    bottom: 30px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .15);
    transition: transform .3s ease, box-shadow .3s ease;
}
.storefront-whatsapp-right { right: 30px; }
.storefront-whatsapp-left { left: 30px; }
.storefront-whatsapp:hover,
.storefront-whatsapp:focus {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
}
@media (max-width: 767px) {
    .storefront-whatsapp { bottom: 20px; width: 50px; height: 50px; font-size: 26px; }
    .storefront-whatsapp-right { right: 20px; }
    .storefront-whatsapp-left { left: 20px; }
}

/* Ürün kartı: görselin sol altındaki seçenek (varyasyon) sayısı etiketi — Crafto .lable üzerine */
.shop-image .lable.options {
    bottom: 17px;
    top: auto;
    background: rgba(0,0,0,.75);
    font-size: 11px;
    padding: 3px 9px;
    right: auto;
    left: 17px;
    text-transform: capitalize;
    font-weight: normal;
}