/* ===========================================================================
   fastkart — سرِ صفحه، منوها و رنگِ قالب
   ===========================================================================

   اصلاحاتی روی `minified-style.css`ِ قالبِ خریداری‌شده که فایلِ فشرده‌اش را دست
   نمی‌زنیم (هر به‌روزرسانیِ قالب پاکش می‌کرد). این فایل **بعد از** آن و بعد از
   `shell.css` بار می‌شود (`layout/master.html`)، پس با ویژگیِ برابر برنده است.

   گزارشِ مالک، بند به بند:

   ۱. «لوگو اگه سایزِ بزرگ بذاریم هدر رو خراب می‌کنه و ارتفاعِ زیادی می‌گیره»
   ۲. «در منوها آیکون‌ها مربع دیده می‌شه»
   ۳. «روی منو هاور می‌کنی و می‌خوای بیای زیرمجموعه‌اش رو کلیک کنی، منو پرش داره
      و صبر نمی‌کنه»
   ۴. «یه سری موارد در هدر از تمِ رنگی پیروی نمی‌کنن و فیروزه‌ای نشون می‌دن»
   ۵. «روی دکمهٔ HERO هاور می‌کنی رنگش سبز لجنی می‌شه»
   =========================================================================== */

/* ── ۲. آیکونِ مربعی ─────────────────────────────────────────────────────
   `minified-style.css` در ۲۵ جا (پیکانِ کشویی‌ها، ستاره، …) فونتِ
   «Font Awesome 6 Free» می‌خواهد ولی قالب فقط نسخهٔ Pro را بار می‌کند؛ مرورگر
   فونت را پیدا نمی‌کند و جای هر نویسه یک مربع می‌کشد. همان فایل‌های Pro با
   نامِ Free هم معرفی می‌شوند — کدِ نویسه‌ها در هر دو یکی است. */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../webfonts/fa-solid-900.woff2) format("woff2"), url(../webfonts/fa-solid-900.ttf) format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../webfonts/fa-regular-400.woff2) format("woff2"), url(../webfonts/fa-regular-400.ttf) format("truetype");
}

/* ── ۱. لوگو ─────────────────────────────────────────────────────────────
   قالب فقط پهنا می‌دهد (`width: calc(120px…162px)`, `height: auto`)، پس لوگوی
   مربعی یا عمودی به همان نسبت بلند می‌شود و هدر را هل می‌دهد. پهنای قالب می‌ماند
   (لوگوی SVGِ بی‌اندازه با `width: auto` صفر می‌شد) و فقط سقفِ ارتفاع اضافه
   می‌شود؛ `object-fit: contain`ِ خودِ قالب تصویر را بی‌کشیدگی داخلِ همان جعبه
   می‌نشاند — لوگوی افقی و مربعی هر دو در همان نوار جا می‌شوند. */
header .top-nav .navbar-top .web-logo img {
    max-height: 56px;
    object-fit: contain;
}
@media (max-width: 767px) {
    header .top-nav .navbar-top .web-logo img { max-height: 40px; }
}

/* ── ۳. کشوی «دسته بندی» ──────────────────────────────────────────────
   کشو ۱۸ تا ۲۲ پیکسل پایین‌تر از دکمه باز می‌شود؛ ماوس در همان فاصله از روی
   دکمه بیرون می‌رود و کشو بسته می‌شود پیش از آنکه برسد. یک پلِ نامرئی (`::before`)
   همان فاصله را پر می‌کند، و بستن ۱۵۰ میلی‌ثانیه صبر می‌کند تا حرکتِ اریبِ ماوس
   هم کشو را نبندد. `z-index: 2`ِ قالب زیرِ بخش‌های صفحهٔ اصلی می‌رفت. */
@media (min-width: 768px) {
    /* جای کشو از خودِ دکمه حساب می‌شود (`100%`) و نه از عددهای ثابتِ ۷۲ و ۶۳
       پیکسلی که با ارتفاعِ هدر جور نبودند */
    .header-2 .header-nav-left { position: relative; }
    .header-2 .header-nav-left .category-dropdown {
        top: calc(100% + 14px);
        z-index: 40;
        transition: opacity .18s ease .15s, top .18s ease .15s, visibility 0s linear .33s;
    }
    .header-2 .header-nav-left:hover .category-dropdown,
    .header-2 .header-nav-left .category-dropdown:hover {
        top: calc(100% + 8px);
        transition-delay: 0s;
    }
    .header-2 .header-nav-left .category-dropdown::before {
        content: "";
        position: absolute;
        bottom: 100%;
        inset-inline: 0;
        height: 16px;
    }
}

/* زیرشاخه‌ها کنارِ کشو: فاصلهٔ ۱۴ پیکسلی همان مشکل را داشت. فاصله می‌ماند ولی
   حاشیهٔ شفاف می‌شود (جزءِ خودِ جعبه، پس ماوس رویش «داخل» است) و سایه با
   `drop-shadow` که حاشیهٔ شفاف را نمی‌بیند. */
@media (min-width: 992px) {
    header .onhover-category-list .onhover-category-box,
    [dir="rtl"] header .onhover-category-list .onhover-category-box {
        margin: 0;
        border-inline-start: 14px solid transparent;
        background-clip: padding-box;
        box-shadow: none;
        filter: drop-shadow(0 4px 14px rgba(15, 23, 42, .12));
        transition: opacity .18s ease .12s, visibility 0s linear .3s;
    }
    header .onhover-category-list:hover .onhover-category-box { transition-delay: 0s; }
}

/* آیکونِ هر دسته (کلید از پنل، `{% store_icon %}`) — جای تصویرِ ثابتِ «خواربار» */
span.category-icon,
.cat-child-list span.category-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(var(--theme-accent-rgb, 13, 164, 135), .1);
    color: var(--theme-color);
    font-size: 14px;
}
.header-2 .header-nav-left .category-dropdown .category-list li .category-name { gap: 10px; }

/* ── ۳. منوی اصلی ───────────────────────────────────────────────────────
   قالب کشو را با `transition: all .5s` و `translateY(-15px)` می‌آورد — نیم‌ثانیه
   لغزیدن که هم «پرش» دیده می‌شود و هم وقتی ماوس پایین می‌رود هنوز جا نیفتاده.
   زیرمنو هم با `right: 113%` سیزده درصد دورتر از منو باز می‌شد و ماوس در آن
   فاصله منو را از دست می‌داد. حالا: حرکتِ کوتاه و سریع، پلِ نامرئی تا لبهٔ
   کشو، زیرمنوی چسبیده، و بستن با کمی مکث. */
@media (min-width: 1200px) {
    header .navbar-nav .dropdown-menu {
        transform: translateY(6px);
        transition: opacity .16s ease .14s, transform .16s ease .14s, visibility 0s linear .3s;
    }
    header .navbar-expand-xl .dropdown:hover > .dropdown-menu {
        transform: none;
        transition-delay: 0s;
    }
    header .navbar-nav .dropdown-menu::before {
        content: "";
        position: absolute;
        bottom: 100%;
        inset-inline: 0;
        height: 18px;
    }
    header .navbar-nav .dropdown-menu .sub-dropdown-hover .sub-menu {
        transition: opacity .16s ease .14s, visibility 0s linear .3s;
    }
    header .navbar-nav .dropdown-menu .sub-dropdown-hover:hover .sub-menu { left: 100%; transition-delay: 0s; }
    [dir="rtl"] header .navbar-nav .dropdown-menu .sub-dropdown-hover:hover .sub-menu { left: unset; right: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    header .navbar-nav .dropdown-menu,
    .header-2 .header-nav-left .category-dropdown { transform: none; transition: none; }
}

/* ── ۴. رنگِ قالب در سرِ صفحه ───────────────────────────────────────── */

/* «دستیار هوشمند» — پیش‌تر `bg-success` بوت‌استرپ با درخششِ سبز */
.hs-ai-btn {
    align-items: center;
    gap: 6px;
    border-radius: var(--theme-radius, 8px);
    background: var(--theme-color);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px -6px rgba(var(--theme-accent-rgb, 13, 164, 135), .55);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.hs-ai-btn:hover,
.hs-ai-btn:focus-visible {
    background: var(--theme-color1, var(--theme-color));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(var(--theme-accent-rgb, 13, 164, 135), .7);
}

/* آیکونِ کنارِ «سلام» — پیش‌تر `text-info` (فیروزه‌ایِ بوت‌استرپ) */
header .delivery-login-box .header-icon .hs-user-in { color: var(--theme-color); }

/* «پاسخگوی شما هستیم» — پیش‌تر `callus.png`، یک تصویرِ فیروزه‌ایِ ثابت */
span.hs-callus__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--theme-accent-rgb, 13, 164, 135), .1);
    color: var(--theme-color);
    font-size: 18px;
}

/* نشانِ زیرِ عنوانِ بخش‌ها (`svg/title-mark.svg`) — جانشینِ برگِ سبز */
.title .title-leaf svg,
.title-leaf .icon-width { color: var(--theme-color); }

/* ── ۵. دکمهٔ بنرِ بالای صفحه و دکمه‌های متحرک ──────────────────────────
   پرشدنِ دکمه هنگامِ هاور (`::after`) در فایلِ قالب با گرادیانِ ثابتِ سبز
   (`#0e947a → #0da487`) نوشته شده؛ روی هر رنگِ دیگری «سبزِ لجنی» می‌شد.
   `.btn-animation` (دکمه‌های ورود) همین را با قرمزِ ثابت داشت. */
.btn-2-animation::after,
.btn-animation::after {
    background: linear-gradient(90deg, var(--theme-color1, var(--theme-color)) 0%, var(--theme-color) 100%);
}
.btn-animation {
    background: var(--theme-color);
}

/* ── آیکون دقیقاً وسطِ جعبه‌اش ───────────────────────────────────────────
   «ایکون‌ها وسطِ باکس نمیان، کمی مایل شده‌اند.» دو قاعدهٔ قالب مسئول بودند:
   `:not(.ck-content) span { display: inline-block }` که `display: grid`ِ جعبه را
   می‌برد (پس انتخابگرها با `span.` نوشته شده‌اند)، و
   `[dir=rtl] … .category-name i { margin-right: auto }` که آیکونِ منوی دسته‌ها را به
   یک سو هل می‌داد. ارتفاعِ خطِ فونت هم آیکون را چند پیکسل پایین می‌برد. */
[dir="rtl"] .header-2 .header-nav-left .category-dropdown .category-list li .category-name .category-icon > i,
.header-2 .header-nav-left .category-dropdown .category-list li .category-name .category-icon > i,
span.category-icon > i,
span.hs-callus__icon > i {
    margin: 0;
    line-height: 1;
    width: auto;
}

/* ── منوی بالا روی بخش‌های صفحهٔ اصلی ───────────────────────────────────
   «در صفحهٔ اصلی وقتی روی گزینه‌های زیرِ منو موس را حرکت می‌دهی، منو بسته می‌شود؛ در صفحه‌های
   دیگر نه.» هدر `position: static` بود و کشوی منو داخلش؛ «هدر بزرگ»ِ صفحهٔ اصلی
   (`.hs-hero`، `position: relative`) بعد از آن در صفحه می‌آید و روی کشو کشیده می‌شد، پس ماوس
   روی گزینه‌ها در واقع روی هدر بزرگ بود. هدر حالا لایهٔ خودش را دارد و بالای محتوای صفحه است.
   فقط نوارِ چسبانِ داخلش `fixed` می‌شود، نه خودِ `<header>`، پس این با حالتِ چسبان تداخل ندارد. */
header.header-2 {
    position: relative;
    z-index: 50;
}

/* پیکانِ کنارِ گزینه‌های کشویی برداشته شد («دکمهٔ فلش در منو ui را بد می‌کند»)؛ باز شدن با
   نشستنِ ماوس پیداست و روی موبایل منوی کناری خودش نشانه دارد. */
@media (min-width: 1200px) {
    /* `::before` با فونتِ «Font Awesome 6 Free» است؛ تا وقتی آن فونت بار نمی‌شد مربعی خالی بود و
       از وقتی بار می‌شود پیکان دیده می‌شود. */
    header .navbar-nav > .nav-item > .dropdown-toggle::before,
    header .navbar-nav > .nav-item > .dropdown-toggle::after {
        display: none;
        content: none;
    }
}