.hero {
    background: var(--color-bg);
    overflow: hidden;
}

/* چیدمان هرو: اسلایدر سمت راست (عرض کمتر از قبل)، دو تصویر ثابت
   کناری (بدون چرخش) سمت چپش - ببین views/home/index.php. */
.hero__layout {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}

.hero__layout .hero__gallery {
    flex: 1 1 68%;
    border-radius: var(--radius-lg);
}

.hero__side {
    flex: 1 1 32%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.hero__side-tile {
    position: relative;
    flex: 1 1 50%;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #F3E3E5 0%, #EAD9BE 100%);
    min-height: 140px;
}

.hero__side-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__side-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
    padding: var(--space-sm);
}

.hero__side-tile-badge {
    display: inline-block;
    background-color: var(--color-surface);
    color: var(--color-primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
}

.hero__side-tile-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text);
}

@media (max-width: 900px) {
    .hero__layout {
        flex-direction: column;
    }
    .hero__side {
        flex-direction: row;
    }
    .hero__side-tile {
        min-height: 110px;
    }
}

@media (max-width: 600px) {
    .hero__layout {
        padding: var(--space-xs) var(--space-sm);
    }
    .hero__side {
        flex-direction: column;
    }
}

/* ردیف آیکون دسته‌بندی‌ها - زیر هرو، بالای گرید بنر دسته‌بندی */
.category-icon-section {
    padding-bottom: 0;
}

/* بخش دوقلو: دو پنل کنار هم، هرکدوم متن+دکمه یک طرف و تصویر تزئینی طرف
   دیگه (بدون عکس واقعی، یک گرادیان کرم/بژ با دایره‌های محو - همون زبان
   بصری هرو/کارت‌های صفحه اصلی - نمایش داده می‌شه). */
.feature-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.feature-panel {
    display: flex;
    align-items: stretch;
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 220px;
}

.feature-panel__body {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    padding: var(--space-lg) var(--space-md);
}

.feature-panel__eyebrow {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.feature-panel__title {
    font-size: 1.4rem;
    margin: 0;
}

.feature-panel__divider {
    display: block;
    width: 40px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    margin: 6px 0 4px;
}

.feature-panel__text {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.feature-panel__media {
    flex: 1 1 45%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #F3E3E5 0%, #EAD9BE 100%);
    overflow: hidden;
}

.feature-panel__media::before,
.feature-panel__media::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.feature-panel__media::before {
    width: 120px;
    height: 120px;
    top: -30px;
    left: -20px;
}

.feature-panel__media::after {
    width: 90px;
    height: 90px;
    bottom: -25px;
    right: -15px;
    background: rgba(201, 132, 110, 0.25);
}

.feature-panel__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-panel__media-label {
    position: relative;
    z-index: 1;
    font-weight: 700;
    color: var(--color-text);
    padding: 0 var(--space-sm);
}

@media (max-width: 900px) {
    .feature-panel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .feature-panel {
        flex-direction: column-reverse;
        min-height: 0;
    }
    .feature-panel__media {
        min-height: 140px;
    }
    .feature-panel__body {
        padding: var(--space-md);
    }
}

.category-icon-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.category-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
    width: 96px;
    transition: transform var(--transition-fast);
}

.category-icon:hover {
    transform: translateY(-4px);
}

.category-icon__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.category-icon__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-icon__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

@media (max-width: 600px) {
    .category-icon-row {
        gap: var(--space-sm);
    }
    .category-icon {
        width: 74px;
    }
    .category-icon__circle {
        width: 64px;
        height: 64px;
    }
    .category-icon__label {
        font-size: 0.75rem;
    }
}

.hero__gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    /* حالت اولیه‌ی ورود صفحه: کمی محو و کمی بزرگ‌نمایی‌شده. کلاس
       `is-ready` توسط home.js بعد از لود اضافه می‌شه (نگاه کن همون‌جا)
       و با ترنزیشن پایین به حالت عادی برمی‌گرده. اگه جاوااسکریپت به هر
       دلیلی اجرا نشه، این کلاس هیچ‌وقت اضافه نمی‌شه و هرو محو می‌مونه -
       برای همین یک fallback بدون‌جاوااسکریپت هم پایین‌تر تعریف شده. */
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.9s ease, transform 1.1s cubic-bezier(.19, 1, .22, 1);
}

.hero__gallery--ready {
    opacity: 1;
    transform: scale(1);
}

/* بدون جاوااسکریپت (یا قبل از اجرای اسکریپت) هرو نباید برای همیشه محو
   بمونه - بعد از یک تاخیر کوتاه به‌صورت CSS-only هم به حالت کامل
   می‌رسه؛ اگه JS زودتر کلاس is-ready رو اضافه کنه، همون انیمیشن
   سریع‌تر و نرم‌تر (بالا) این را بی‌اثر می‌کنه. */
@media (scripting: none) {
    .hero__gallery {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.hero__gallery.is-dragging {
    cursor: grabbing;
}

@media (min-width: 769px) {
    .hero__gallery {
        aspect-ratio: unset;
        height: 600px;
    }
}

.hero__track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
}

.hero__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    display: block;
}

.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    /* افکت آرام و ظریف کن‌برنز (زوم آهسته) فقط روی اسلایدی که الان
       فعاله - نگاه کن `.hero__slide.is-active img` پایین‌تر. مدت این
       ترنزیشن عمداً خیلی بلندتر از ترنزیشن اسلاید (۰.۶ ثانیه) است چون
       قراره در طول کل زمانی که اسلاید دیده می‌شه به‌آرومی ادامه پیدا کنه،
       نه این‌که موقع تعویض اسلاید تمومش کنه. */
    transform: scale(1);
    transition: transform 6s ease-out;
}

.hero__slide.is-active img {
    transform: scale(1.08);
}

.hero__slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-xl);
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.62) 100%);
}

/*
 * انیمیشن ورود عنوان/توضیح/دکمه‌ی هر اسلاید: حالت پیش‌فرض کاملاً نمایانه
 * (opacity: 1) تا بدون جاوااسکریپت یا قبل از اجرای home.js چیزی مخفی
 * نمونه؛ فقط وقتی والدش (`.hero__slide`) کلاس `is-active` بگیره
 * (home.js) یک انیمیشن با fill-mode «both» پخش می‌شه که همون لحظه‌ی
 * شروع، بک‌فیل شده به opacity:0 - یعنی از دید کاربر انگار از نامرئی به
 * نمایان محو-بالا میاد، ولی اگه انیمیشن هیچ‌وقت اجرا نشد (JS خاموش)
 * چیزی مخفی نمی‌مونه. سه المنت با تاخیر پلکانی از هم شروع می‌شن تا
 * یک‌جا و یکنواخت ظاهر نشن.
 */
.hero__slide-content h1,
.hero__slide-content p,
.hero__slide-content .btn {
    opacity: 1;
}

.hero__slide.is-active .hero__slide-content h1 {
    animation: heroContentIn 0.8s cubic-bezier(.19, 1, .22, 1) 0.15s both;
}

.hero__slide.is-active .hero__slide-content p {
    animation: heroContentIn 0.8s cubic-bezier(.19, 1, .22, 1) 0.32s both;
}

.hero__slide.is-active .hero__slide-content .btn {
    animation: heroContentIn 0.7s cubic-bezier(.19, 1, .22, 1) 0.48s both;
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__slide-content h1 {
    color: #fff;
    font-size: 2.2rem;
    max-width: 520px;
    margin-bottom: var(--space-sm);
    /* حتی اگه گرادیان پشت‌زمینه دقیقاً پشت متن هم به‌اندازه‌ی کافی تیره
       نباشه (عکس خیلی روشن/سفید)، این سایه‌ها کنتراست رو تضمین می‌کنن -
       یکی محو و پخش برای عمق، یکی تنگ و نزدیک برای وضوح لبه‌ی حروف. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.65);
}

.hero__slide-content p {
    color: rgba(255, 255, 255, 0.92);
    max-width: 480px;
    margin-bottom: var(--space-md);
    font-size: 1.05rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hero__slide-content .btn {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero__slide-content .btn:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--shadow-lg);
}

.hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    color: #222;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 3;
    box-shadow: var(--shadow-md);
}

.hero__gallery:hover .hero__arrow {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }

.hero__dots {
    position: absolute;
    bottom: 18px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.hero__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.25s, width 0.25s;
}

.hero__dot.is-active {
    background: #fff;
    width: 22px;
    border-radius: var(--radius-pill);
}

@media (max-width: 768px) {
    .hero__gallery {
        aspect-ratio: 4 / 5;
    }

    .hero__slide-content h1 {
        font-size: 1.6rem;
    }
}

/* کاربرهایی که حرکت کم‌تر ترجیح می‌دن (prefers-reduced-motion): همه‌ی
   انیمیشن‌ها/ترنزیشن‌های تزئینی جدید (ورود هرو، زوم آرام عکس، ورود
   عنوان/دکمه، ظاهرشدن تدریجی موقع اسکرول) غیرفعال می‌شن و همه‌چیز مستقیم
   در حالت نهایی/کامل نمایش داده می‌شه - اسلایدشو خودش (تعویض اسلاید) و
   عملکرد سایت دست‌نخورده می‌مونه، فقط جلوه‌های صرفاً تزئینی خاموش می‌شن. */
@media (prefers-reduced-motion: reduce) {
    .hero__gallery {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero__slide img {
        transition: none;
    }

    .hero__slide.is-active img {
        transform: none;
    }

    .hero__slide.is-active .hero__slide-content h1,
    .hero__slide.is-active .hero__slide-content p,
    .hero__slide.is-active .hero__slide-content .btn {
        animation: none;
    }

    .reveal-lift,
    .reveal-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*
 * گرید بنر دسته‌بندی‌ها: فعلاً فقط ظاهریه، لینک‌ها به دسته‌های واقعی
 * می‌رن ولی عکس هر بنر ثابت/هاردکده. مدیریت (آپلود عکس هر دسته) از
 * پنل ادمین در فاز بعدی اضافه می‌شه.
 */
.category-banner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.category-banner-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.category-banner-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.category-banner-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.category-banner-card:hover img {
    transform: scale(1.08);
}

.category-banner-card__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--space-md) var(--space-sm) var(--space-sm);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.08) 60%, transparent 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
}

@media (max-width: 900px) {
    .category-banner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .category-banner-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/*
 * ظاهرشدن تدریجی موقع اسکرول (initScrollReveal در home.js). دو نوعه:
 * `.reveal-lift` (هدر بخش‌ها، بنر دسته‌بندی) هم opacity هم translateY
 * انیمیت می‌شه؛ `.reveal-fade` (کارت محصول/نظر/بلاگ) فقط opacity - چون
 * این کارت‌ها از کلاس مشترک `.card` (core.css) یک hover-lift با transform
 * دارن و اگه اینجا هم حالت پایانی translateY:0 رو ست می‌کردیم، با همون
 * specificity رو اون hover رو بی‌اثر می‌کرد. هر دو کلاس فقط وقتی توسط JS
 * اضافه می‌شن که واقعاً بخوان انیمیت بشن - قبل از آن (یا وقتی JS خاموشه
 * یا کاربر prefers-reduced-motion داره) هیچ‌کدوم اعمال نمی‌شن و همه‌چیز
 * همون اول کاملاً نمایانه.
 */
.reveal-lift {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.19, 1, .22, 1);
}

.reveal-lift.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-fade {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.reveal-fade.is-revealed {
    opacity: 1;
}

.section-banner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.section-banner__header h2 {
    margin: 0;
    color: white;
    font-size: 1.15rem;
}

.section-banner__header p {
    margin: 2px 0 0;
    font-size: 0.85rem;
}

.section-banner--sale .section-banner__header {
    background: var(--color-text);
    color: #fff;
}

.section-banner--sale .section-banner__header p {
    color: rgba(255, 255, 255, 0.65);
}

.section__header-all-link {
    font-weight: 700;
    font-size: 0.85rem;
    color: inherit;
    white-space: nowrap;
}

.section--tinted {
    background-color: var(--color-bg);
}

.scroll-row {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.scroll-row::-webkit-scrollbar {
    height: 8px;
}

.scroll-row::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-row::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 4px;
}

.scroll-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

.scroll-card__image-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.scroll-card:hover .scroll-card__image-wrap {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.scroll-card__image-wrap img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.scroll-card__price {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.scroll-card__price--box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border-radius: var(--radius-md);
    line-height: 1.3;
}

.scroll-card__price--old {
    font-weight: 400;
    font-size: 0.68rem;
    color: var(--color-text-light);
    text-decoration: line-through;
}

.scroll-card__price--sale {
    color: var(--color-danger);
}

.scroll-card__name {
    margin-top: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
}

.spotlight-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-md);
}

.spotlight-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.spotlight-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 220px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.spotlight-card:hover {
    box-shadow: var(--shadow-lg);
}

.spotlight-card--main {
    min-height: 460px;
}

.spotlight-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spotlight-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-md);
    background: linear-gradient(0deg, rgba(20, 18, 17, 0.82) 0%, rgba(20, 18, 17, 0.1) 60%, transparent 100%);
}

.spotlight-card__overlay h3 {
    color: #fff;
    margin: 6px 0;
    font-size: 1.1rem;
}

.spotlight-card--main .spotlight-card__overlay h3 {
    font-size: 1.5rem;
}

.spotlight-card__category {
    display: inline-block;
    width: fit-content;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.spotlight-card__price {
    color: var(--color-secondary);
    font-weight: 700;
    display: block;
}

.spotlight-card__price--old {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
    font-size: 0.85rem;
    text-decoration: line-through;
}

.spotlight-card__price--sale {
    color: var(--color-secondary);
}

@media (max-width: 900px) {
    .spotlight-grid {
        grid-template-columns: 1fr;
    }

    .spotlight-card--main {
        min-height: 320px;
    }

    .spotlight-card {
        min-height: 220px;
    }
}


.load-more-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.load-more-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.load-more-btn:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-lg);
}

.load-more-btn:disabled {
    cursor: default;
}

.load-more-btn__icon {
    transition: opacity var(--transition-fast);
}

.load-more-cell--loading .load-more-btn__icon {
    opacity: 0;
}

.load-more-cell--loading .load-more-btn::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: load-more-spin 0.7s linear infinite;
}

@keyframes load-more-spin {
    to {
        transform: rotate(360deg);
    }
}


.grid--scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.grid--scroll::-webkit-scrollbar {
    display: none;
}

.grid--scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.grid--scroll img {
    -webkit-user-drag: none;
    user-select: none;
}

.grid--scroll > .product-card {
    flex: 0 0 260px;
}

.grid--scroll > .blog-card {
    flex: 0 0 360px;
}

.grid--scroll > .load-more-cell {
    flex: 0 0 90px;
}


.my-space {
        margin-right: 30px;
}

@media (max-width: 600px) {
    /* روی موبایل فلش‌های چپ/راست حذف می‌شن (ناوبری فقط با کشیدن/سوایپ
       انگشت انجام می‌شه) و به‌جاش خودِ کارت‌ها بزرگ‌تر و عریض‌تر دیده
       می‌شن - به‌جای ۱۹۰/۲۳۰px قبلی. */
    .grid--scroll > .product-card {
        flex-basis: 290px;
    }
 
    .grid--scroll > .blog-card {
        flex-basis: 310px;
    }
 
    .grid--scroll > .load-more-cell {
        flex-basis: 70px;
    }
 
    .load-more-btn {
        width: 46px;
        height: 46px;
    }
 
    .scroll-carousel__arrow {
        display: none;
    }

    .my-space {
        margin-right: 0px;
    }
}
 

.scroll-carousel {
    position: relative;
}

.scroll-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 2;
    transition: box-shadow var(--transition-base);
}

.scroll-carousel__arrow:hover {
    box-shadow: var(--shadow-lg);
}

.scroll-carousel__arrow--prev {
    left: 0;
}

.scroll-carousel__arrow--next {
    right: 0;
}

/* وقتی چیزی برای اسکرول نیست (همه‌ی کارت‌ها تو عرض صفحه جا می‌شن) یا
   به ابتدا/انتهای ردیف رسیدی، همون فلش کاملاً از صفحه ناپدید می‌شه
   (نه فقط کم‌رنگ) - چون دیگه کاری برای انجام دادن نداره. */
.scroll-carousel__arrow.is-hidden {
    display: none;
}

/* =========================================================================
 * افزوده‌های جدید صفحه اصلی: تمایز بصری سه بخش محصول، بنر میانی، برندها،
 * و نوار ضمانت/ارسال پایین صفحه. مارک‌آپ کارت محصول (product-card.php)
 * دست‌نخورده مونده - همه‌ی تمایزها فقط در سطح ظرف/بخش (section) با CSS
 * اعمال شده تا لود بیشتر (HomeController::loadMore) که همیشه همون
 * partial قبلی رو برمی‌گردونه، بدون تغییر کار کنه.
 * ========================================================================= */

/* بخش «محصولات ویژه»: هدر بنری تیره‌ی قبلی حالا یک گرادیانِ ظریف + آیکن
   کنار عنوان داره تا هم جذاب‌تر بشه هم واضح‌تر از دو بخش بعدی متمایز بمونه. */
.section-banner--sale .section-banner__header {
    background: linear-gradient(120deg, var(--color-text) 0%, #4A3536 100%);
    gap: var(--space-sm);
}

.section-banner__header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.section-banner__header-titles {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* بخش «تازه‌ترین‌ها»: به‌جای ردیف اسکرول‌افقی مثل بخش قبل، یک پنل
   قاب‌دار با پس‌زمینه‌ی روشن و گرید ایستا (بدون اسکرول، wrap می‌خوره) -
   عمداً کاملاً متفاوت از بخش ویژه (تیره/اسکرولی) و بخش منتخب ویژه
   (رنگی/رتبه‌دار) پایین‌تر. */
.section--framed {
    background-color: var(--color-bg);
}

.framed-panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.section__header-tag {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--color-text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-xs);
}

.section__header-tag--gold {
    background: linear-gradient(120deg, var(--color-secondary), var(--color-primary));
    color: #fff;
}

@media (max-width: 600px) {
    .framed-panel {
        padding: var(--space-md);
    }
    
}

/* بخش «منتخب ویژه» (پرفروش‌ترین‌ها): همون قالب اسکرولی بخش اول، ولی با
   تم رنگی طلایی/کهربایی + مدال رتبه‌بندی روی گوشه‌ی هر کارت (شماره‌ی
   ترتیب با counter خودِ CSS ساخته می‌شه - نیازی به تغییر product-card.php
   یا HomeController نیست). */
.section--bestseller {
    background: linear-gradient(180deg, rgba(216, 177, 109, 0.12) 0%, rgba(216, 177, 109, 0) 65%);
}

.section--bestseller .grid--scroll {
    counter-reset: bestseller-rank;
}

.section--bestseller .product-card {
    counter-increment: bestseller-rank;
}

.section--bestseller .product-card .product-card__image::after {
    content: counter(bestseller-rank);
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    box-shadow: var(--shadow-sm);
}

/* بنر تبلیغاتی وسط صفحه: عکسش فعلاً جای‌گیر خالیه (طبق گفته‌ی کارفرما
   بعداً خودش عکس واقعی رو جایگزین می‌کنه) - جای‌گیر با border-dashed و
   آیکن مشخصه که کجا باید عکس جایگزین بشه. */
.promo-banner {
    display: flex;
    align-items: stretch;
    background: linear-gradient(120deg, #4A3536 0%, var(--color-text) 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 260px;
    box-shadow: var(--shadow-md);
}

.promo-banner__content {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-lg);
}

.promo-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-secondary);
    font-weight: 800;
    font-size: 0.85rem;
}

.promo-banner__content h3 {
    color: #fff;
    font-size: 1.5rem;
    max-width: 420px;
    margin: 4px 0 6px;
}

.promo-banner__content p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    max-width: 400px;
    margin-bottom: var(--space-sm);
}

.promo-banner__cta {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: #fff;
}

.promo-banner__cta:hover {
    background: linear-gradient(120deg, var(--color-primary-dark) 0%, var(--color-secondary) 100%);
}

.promo-banner__media {
    flex: 1 1 50%;
    position: relative;
}

.promo-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-banner__placeholder {
    position: absolute;
    inset: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px dashed rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.45);
}

.promo-banner__placeholder span {
    font-size: 0.78rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .promo-banner {
        flex-direction: column;
    }

    .promo-banner__media {
        min-height: 180px;
    }
}

/* بخش برندها: آیتم‌های مربعی کوچیک، خاکستری/تک‌رنگ که موقع هاور رنگی
   می‌شن - دیتا فعلاً استاتیک در خودِ ویو تعریف شده، بعداً قابل جایگزینی. */
.brand-strip.grid--scroll > .brand-tile {
    flex: 0 0 132px;
}

.brand-tile {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.brand-tile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--color-accent);
}

.brand-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    transition: filter var(--transition-base);
}

.brand-tile:hover img {
    filter: none;
}

@media (max-width: 600px) {
    .brand-strip.grid--scroll > .brand-tile {
        flex-basis: 108px;
    }

    
}

/* نوار ضمانت/ارسال پایین صفحه */
.trust-bar-section {
    padding-top: 0;
    padding-bottom: var(--space-xl);
}

.trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
}

.trust-bar__item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

@media (max-width: 700px) {
    .trust-bar__item {
        flex: none;
    }
}



.trust-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.trust-bar__label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .trust-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-md);
    }

    .trust-bar__label {
        white-space: normal;
    }
}