/* ===================================
    PromoShop vitrin — Crafto fashion-store üzerine uyarlamalar
    (yalnızca Fashion Store temasının layout'unda yüklenir; tema dosyaları wwwroot/crafto altında değiştirilmeden kullanılır)
====================================== */

/* Menü: Türkçe etiketler Crafto'nunkilerden uzun; iki satıra kırılmasın (Crafto'da da menü grupları logo alanı dışına taşar) */
.navbar.center-logo .navbar-nav .nav-link {
    white-space: nowrap;
}
/* Logo görseli yokken yazı logo Crafto logo yüksekliğinde (34px, bkz. fashion-store.css header .navbar-brand img) */
.theme-fashion-store .storefront-text-logo {
    font-size: 28px;
    line-height: 34px;
}

/* Tedarikçi ürün görselleri beyaz zeminli kare fotoğraflar; Crafto'nun manken fotoğrafları açık gri stüdyo zeminli.
   Kutular Crafto oranlarında sabit, görsel sığdırılır ve multiply ile beyaz zemin griye karışır. Kırık görselde (404)
   kutu yüksekliği korunur, alt metin gizlenir. */
.theme-fashion-store {
    --fashion-image-bg: #ebebeb;
}
.shop-modern .shop-box .shop-image > a,
.fashion-category-image,
.fashion-menu-category-image,
.fashion-collection-card {
    display: block;
    position: relative;
    background-color: var(--fashion-image-bg);
}
.shop-modern .shop-box .shop-image > a {
    aspect-ratio: 600 / 765;
}
.fashion-category-image {
    aspect-ratio: 600 / 450;
}
.fashion-menu-category-image {
    aspect-ratio: 190 / 140;
    overflow: hidden;
}
.fashion-collection-card {
    aspect-ratio: 600 / 730;
}
.shop-modern .shop-box .shop-image > a > img,
.fashion-category-image > img,
.fashion-menu-category-image > img,
.fashion-collection-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    color: transparent;
}
.shop-modern .shop-box .shop-image > a > img {
    padding: 8%;
}
/* Kategori görselleri (kategori kartı, ana sayfa kategori karuseli, menüdeki görselli kategoriler) Crafto'daki gibi
   hücreyi tam kaplar: oran korunur, taşan kısım kırpılır. */
.fashion-category-image > img,
.fashion-menu-category-image > img,
.fashion-collection-card > img {
    object-fit: cover;
    mix-blend-mode: normal;
}
/* Etiket görselin üzerinde kalsın (görsel absolute) */
.shop-modern .shop-box .shop-image > a > .lable {
    z-index: 1;
}
/* Uzun ürün adları tek satır: kart yükseklikleri eşit kalır, grid (isotope) boşluksuz dizilir */
.shop-modern .shop-box .shop-footer > a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kategori kartı: uzun kategori adları buton içinde tek satır kalsın, kart dışına taşmasın */
.categories-style-02 .categories-box .btn {
    max-width: calc(100% - 40px);
}
.categories-style-02 .categories-box .btn .btn-double-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hero (admin → Slaytlar): dikey ekranlarda (telefon, dikey tablet) slaytın mobil görseli; adres slayt üzerindeki
   --slide-mobile-bg değişkeninden gelir (Decor temasındaki davranışla aynı, bkz. site.css). */
@media (orientation: portrait) and (max-width: 1199.98px) {
    .fashion-hero-slider .fashion-hero-bg {
        background-image: var(--slide-mobile-bg) !important;
    }
}

/* Banner grupları (admin → Bannerlar): yerleşim site.css → .banner-grid ile; gruplar arası Crafto satır aralığı */
.fashion-banner-grid + .fashion-banner-grid {
    margin-top: 15px;
}
.fashion-banner-grid .interactive-banner-style-09 .image-content {
    left: 0;
}

/* ===== Ürün listesi (Views/Themes/FashionStore/Shop) ===== */
/* Seçili filtre: Crafto'nun hover durumu (koyu kenarlık + iç nokta) kalıcı */
.shop-sidebar .shop-filter li.active .product-cb {
    border-color: var(--dark-gray);
}
.shop-sidebar .shop-filter li.active .product-cb:after {
    opacity: 1;
}
.shop-sidebar .shop-filter li.active > a {
    color: var(--dark-gray);
    font-weight: 500;
}
/* Renk noktası: beyaz/açık renkler zeminde görünsün; tanınmayan renk nötr ve kenarlıklı */
.shop-sidebar .shop-filter.color-filter li .product-cb.is-light,
.shop-sidebar .shop-filter.color-filter li .product-cb.is-unknown {
    border: 1px solid var(--extra-medium-gray);
}
.shop-sidebar .shop-filter.color-filter li .product-cb.is-unknown {
    background-color: var(--very-light-gray);
}
.shop-sidebar .shop-filter.color-filter li.active .product-cb.is-light:after {
    background-color: var(--dark-gray);
}
/* Uzun seçenek adları sayı dairesinin altına girmesin; iki satıra kırılınca satır aralığı sıkı
   (tek satırda Crafto'nun 32px satır yüksekliği korunur: 24px + 2×4px) */
.shop-sidebar .shop-filter li {
    padding-right: 38px;
}
.shop-sidebar .shop-filter li > a {
    line-height: 24px;
    padding: 4px 0;
}
.shop-sidebar .shop-filter li.fashion-filter-back {
    padding-left: 0;
}
.shop-sidebar .shop-filter li.fashion-filter-back i {
    margin-right: 8px;
}
.shop-sidebar .shop-filter li.fashion-filter-child {
    margin-left: 15px;
}
/* 1000+ sayılar Crafto'nun 30px dairesine sığsın */
.shop-sidebar .shop-filter li .item-qty {
    min-width: 30px;
    width: auto;
    padding: 0 4px;
    border-radius: 30px;
}
/* Yeni ürünler küçük görseli (Crafto 80px, 600x765) */
.fashion-thumb-image {
    display: block;
    position: relative;
    aspect-ratio: 600 / 765;
    background-color: var(--fashion-image-bg);
    overflow: hidden;
}
.fashion-thumb-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    padding: 6%;
}
.shop-sidebar .new-arribals .col > a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Ürün detayı (Views/Themes/FashionStore/Product) ===== */
.fashion-product-image,
.fashion-description-image {
    display: block;
    position: relative;
    aspect-ratio: 600 / 765;
    background-color: var(--fashion-image-bg);
    overflow: hidden;
}
.fashion-description-image {
    aspect-ratio: 580 / 555;
    border-radius: 6px;
}
.fashion-product-image > img,
.fashion-description-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    padding: 8%;
    color: transparent;
}
.product-image-thumb .swiper-slide .fashion-product-image > img {
    padding: 6%;
}
/* Seçenek etiketi sabit genişlik: seçenek listeleri alt alta hizalı */
.fashion-option-label {
    min-width: 50px;
    align-self: flex-start;
    margin-top: 5px;
}
/* Tedarikçilerde bir üründe 10+ renk olabiliyor; Crafto listesi tek satırdı */
.product-info .shop-color,
.product-info .shop-size {
    flex-wrap: wrap;
    row-gap: 8px;
}
.product-info .shop-color li > input[type=radio] + label span.is-light,
.product-info .shop-color li > input[type=radio] + label span.is-unknown {
    box-shadow: inset 0 0 0 1px var(--extra-medium-gray);
}
.product-info .shop-color li > input[type=radio] + label span.is-unknown {
    background-color: var(--very-light-gray);
    color: var(--dark-gray);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.product-info .shop-color li input[type=radio]:checked + label span.is-light:after,
.product-info .shop-color li input[type=radio]:checked + label span.is-unknown:after {
    border-color: var(--dark-gray);
}
/* Seçenek hücreleri: oval açık gri çerçeve içinde (renk noktası +) kalın ad + ince adet; yan yana dizilir, sığmayınca alt satıra geçer */
.product-info .fashion-option-pills {
    gap: 8px;
}
.product-info .fashion-option-pills li {
    margin-right: 0;
}
.product-info .fashion-option-pills li > input[type=radio] + label {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid var(--extra-medium-gray);
    border-radius: 50px;
    font-size: 14px;
    line-height: 20px;
    color: var(--dark-gray);
    cursor: pointer;
    white-space: nowrap;
}
.product-info .fashion-option-pills.shop-color li > input[type=radio] + label {
    padding: 5px 16px 5px 5px;
}
.product-info .fashion-option-pills.shop-color li > input[type=radio] + label span {
    flex: none;
    margin-right: 10px;
}
.product-info .fashion-option-pills label strong {
    font-weight: 600;
    margin-right: 5px;
}
.product-info .fashion-option-pills label small {
    font-size: inherit;
    font-weight: 400;
}
/* Renk noktası olmayan seçeneklerde seçim çerçeveyle belli olur (renkte Crafto'nun nokta halkası) */
.product-info .fashion-option-pills.shop-size li > input[type=radio]:checked + label {
    border-color: var(--dark-gray);
}
.product-info .shop-color li.is-unavailable,
.product-info .shop-size li.is-unavailable {
    opacity: .35;
}
/* "Filtrele" linkiyle atlanınca başlık sabit header'ın altında kalmasın */
#shop-filters {
    scroll-margin-top: 110px;
}

/* ===== Teklif sepeti ve teklifi tamamla (Views/Themes/FashionStore/QuoteCart) ===== */
/* Bilgi/hata satırı: Crafto'da sepet bildirimi yok; checkout kutularının açık gri zemini ve köşe yarıçapıyla */
.fashion-notice {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 24px;
    color: var(--dark-gray);
    background-color: var(--very-light-gray);
    border-left: 3px solid var(--base-color);
}
.fashion-notice.is-error {
    border-left-color: #dc3545;
}
.fashion-notice i {
    font-size: 18px;
}
/* Form alan hatası (sunucu doğrulaması) */
.fashion-field-error {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
    color: #dc3545;
}
.fashion-field-error:empty {
    display: none;
}
input.input-validation-error,
textarea.input-validation-error {
    border-color: #dc3545 !important;
}
/* Bot tuzağı alanı ekran dışında */
.fashion-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Sepetten çıkar: Crafto'daki "×" linkiyle aynı görünüm (formaction'lı buton) */
.fashion-cart-remove {
    border: 0;
    background: none;
    padding: 0;
    color: var(--medium-gray);
    line-height: 1;
    cursor: pointer;
}
.fashion-cart-remove:hover {
    color: var(--dark-gray);
}
@media (max-width: 767px) {
    .cart-products tbody tr .product-remove .fashion-cart-remove {
        width: 20px;
        height: 20px;
        display: block;
        line-height: 13px;
    }
}
/* Mini sepet ve sepet tablosundaki küçük görseller (fashion-thumb-image) */
.cart-products .product-thumbnail .fashion-thumb-image {
    width: 80px;
}
.header-cart .cart-item .product-image .fashion-thumb-image {
    width: 60px;
}
/* Ürün kartındaki buton artık form içinde (POST); Crafto'nun <a> butonuyla aynı genişlik */
.shop-modern .shop-box .shop-image form.shop-buttons-wrap {
    margin: 0;
}
/* Tutarlar dar kolonda (tablet) iki satıra kırılmasın */
.cart-products .product-price,
.cart-products .product-subtotal {
    white-space: nowrap;
}

/* ===== İçerik sayfaları (Views/Themes/FashionStore/Page) ===== */
/* Kapak: Crafto'daki 1600x570 oranı; farklı oranda yüklenen görsel kırpılır */
.fashion-page-cover {
    aspect-ratio: 1600 / 570;
    object-fit: cover;
}
/* İçerik metni: Crafto paragraf aralıkları; başlık ve listeler paragraflarla hizalı */
.fashion-page-content h4,
.fashion-page-content h5 {
    margin-top: 10px;
}
.fashion-page-content p + h4,
.fashion-page-content p + h5,
.fashion-page-content ul + h4,
.fashion-page-content ul + h5 {
    margin-top: 40px;
}
.fashion-page-content .page-content-list {
    padding-left: 20px;
    margin-bottom: 25px;
}
.fashion-page-content .page-content-list li {
    margin-bottom: 5px;
}
/* Crafto ul madde işaretlerini sıfırlar; içerik listelerinde işaret (tema vurgu rengi) gösterilir */
.fashion-page-content .page-content-list {
    list-style: disc;
}
.fashion-page-content .page-content-list li::marker {
    color: var(--dark-gray);
}

/* Ürün listesi — sonsuz kaydırma (admin → Ayarlar → Modüller): Crafto grid yükleyicisiyle (.grid-loading) aynı halka */
.fashion-infinite-scroll {
    min-height: 50px;
}
.fashion-infinite-scroll [hidden] {
    display: none !important;
}
.fashion-infinite-spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(23, 23, 23, .2);
    border-top-color: rgba(23, 23, 23, .7);
    border-radius: 50%;
    animation: 1s linear infinite spin;
}

/* Ürün grubu sayfası (admin → Ürün Grupları): başlık altındaki açıklama, yöneticinin satır sonları korunur */
.fashion-group-description {
    white-space: pre-line;
}