﻿/* ==========================================================================
   استایل «مارکت‌پلیس» — الهام‌گرفته از چیدمان نمونه‌ی ارجان‌کالا:
   هدر روشن و متراکم، هیرو تیره‌ی سرمه‌ای/طلایی، آیکون‌های دایره‌ای دسته‌بندی،
   گرید محصول فشرده و پرتراکم. این فایل فقط وقتی html[data-style="marketplace"]
   باشه اثر می‌ذاره؛ چون CSS کامپوننت‌ها با CSS Isolation اسکوپ می‌شن، این‌جا از
   !important استفاده شده تا مطمئن باشیم این override همیشه برنده می‌شه.
   ========================================================================== */

/* ===== هدر ===== */
[data-style="marketplace"] .main-header {
    border-bottom: 3px solid var(--primary) !important;
}

[data-style="marketplace"] .main-header__logo {
    font-weight: 800 !important;
    font-size: 1.35rem !important;
}

[data-style="marketplace"] .main-header__search-btn {
    border-radius: var(--radius-sm) !important;
}

/* ===== هیروی تبلیغات ===== */
[data-style="marketplace"] .advertisement-slider {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b2f4b 100%) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1rem !important;
    overflow: hidden;
}

[data-style="marketplace"] .slide-image {
    border-radius: var(--radius-md) !important;
    object-fit: contain !important;
}

[data-style="marketplace"] .slider-nav {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    color: #d4af37 !important;
}

[data-style="marketplace"] .dot.is-active {
    background: #d4af37 !important;
}

/* ===== میان‌برهای دسته‌بندی: دایره‌ای و پررنگ ===== */
[data-style="marketplace"] .cat-shortcuts__img-wrap {
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-secondary)) !important;
    border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent) !important;
    aspect-ratio: 1 / 1 !important;
}

[data-style="marketplace"] .cat-shortcuts__item:hover .cat-shortcuts__img-wrap {
    border-color: var(--primary) !important;
    box-shadow: none !important;
    transform: translateY(-2px) scale(1.04) !important;
}

[data-style="marketplace"] .cat-shortcuts__label {
    font-weight: 700 !important;
}

/* ===== کارت محصول: فشرده، شفاف، بج تخفیف پررنگ ===== */
[data-style="marketplace"] .product-card {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

[data-style="marketplace"] .product-card__img-wrap {
    border-radius: var(--radius-xs) var(--radius-xs) 0 0 !important;
    aspect-ratio: 1 / 1 !important;
}

[data-style="marketplace"] .product-card__badge {
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: var(--radius-xs) !important;
    font-weight: 700 !important;
}

[data-style="marketplace"] .product-card__price {
    font-weight: 800 !important;
}

[data-style="marketplace"] .product-card__add-btn {
    border-radius: 50% !important;
    background: var(--primary) !important;
}

/* ===== عنوان بخش‌ها (پرفروش‌ترین‌ها، جدیدترین‌ها) ===== */
[data-style="marketplace"] .product-carousel__title {
    font-weight: 800 !important;
    border-right: 4px solid var(--primary) !important;
    padding-right: 0.6rem !important;
}

[data-style="marketplace"] .product-carousel__see-all {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

[data-style="marketplace"] .product-carousel__nav {
    border-radius: 50% !important;
    box-shadow: none !important;
    border: 1px solid var(--border) !important;
}

/* ===== پیشنهادهای شگفت‌انگیز ===== */
[data-style="marketplace"] .amazing-offers {
    border-radius: var(--radius-sm) !important;
}

[data-style="marketplace"] .amazing-offers__side {
    background: linear-gradient(160deg, #0d1b2a 0%, #1b2f4b 100%) !important;
}

[data-style="marketplace"] .amazing-offers__title {
    font-weight: 800 !important;
}

[data-style="marketplace"] .offer-card {
    border-radius: var(--radius-xs) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

[data-style="marketplace"] .offer-card__ribbon-label {
    background: var(--primary) !important;
    font-weight: 700 !important;
}

[data-style="marketplace"] .offer-card__percent-badge {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ===== پرفروش‌ترین‌ها ===== */
[data-style="marketplace"] .best-sellers-grid__rank {
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: var(--radius-xs) !important;
    font-weight: 800 !important;
}

[data-style="marketplace"] .best-sellers-grid__thumb-wrap {
    border-radius: var(--radius-xs) !important;
    border: 1px solid var(--border) !important;
}

/* ===== فوتر ===== */
[data-style="marketplace"] .site-footer {
    background: #0d1b2a !important;
    border-top: 3px solid var(--primary) !important;
}

/* ===== هیروی متنی (اگه ادمین توضیح/دکمه برای تبلیغ وارد کرده باشه) ===== */
[data-style="marketplace"] .slide-overlay {
    display: flex !important;
    align-items: flex-start !important;
    text-align: right !important;
    background: linear-gradient(90deg, rgba(13,27,42,0.75) 0%, rgba(13,27,42,0.15) 55%, transparent 100%) !important;
}

[data-style="marketplace"] .slide-overlay__cta {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ===== هدر: دوردیفه — ردیف بالا لوگو+اکشن‌ها، ردیف پایین سرچ تمام‌عرض (الگوی مارکت‌پلیس‌های واقعی) ===== */
@media (min-width: 992px) {
    [data-style="marketplace"] .main-header__inner {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas: "logo actions" "search search" !important;
        row-gap: 0.6rem !important;
        align-items: center !important;
    }

    [data-style="marketplace"] .main-header__logo {
        grid-area: logo !important;
    }

    [data-style="marketplace"] .main-header__actions {
        grid-area: actions !important;
        justify-self: start !important;
    }

    [data-style="marketplace"] .main-header__search {
        grid-area: search !important;
        width: 100% !important;
        max-width: none !important;
    }
}
