/*
 * صفحه اصلی قالب Formula: کپی برگه ۱۳ المنتور (مقادیر از CSS محاسبه‌شده پروداکشن،
 * _theme_ref/styles/home-*.txt). شورت‌کدها (جست‌وجو، پیشنهادها، استوری، نوار قیمت) CSS خودشان
 * را دارند؛ این‌جا فقط چیدمان و بخش‌های خود صفحه.
 */

.fml-kit .fml-home { display: block; overflow-x: clip; }

/* ---------- دکمه‌ها: .fap-btn شیوه‌نامه (مارکاپ front-page.php)؛ این‌جا فقط جا ---------- */
.fml-kit .fml-hero__actions .fap-btn { min-width: 190px; }

.fml-kit .fml-kicker { display: inline-block; color: var(--fap-brand-700, #0b6c62); font-size: var(--fap-fs-sm, 13px); font-weight: 700; line-height: 1.6; }

/* ---------- هیرو ---------- */
.fml-kit .fml-hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px 40px;
    overflow: hidden;
}
.fml-kit .fml-hero > :not(.fml-hero__glow) { position: relative; z-index: 1; width: 100%; max-width: var(--fml-container, 1270px); margin-inline: auto; }
.fml-kit .fml-hero__glow { position: absolute; border-radius: 9999px; pointer-events: none; z-index: 0; }
.fml-kit .fml-hero__glow--a { top: -186px; left: 25%; width: 460px; height: 460px; background-color: color-mix(in srgb, var(--fap-brand-500, #1aa29a) 15%, transparent); filter: blur(150px); }
.fml-kit .fml-hero__glow--b { top: 70px; right: -96px; width: 380px; height: 380px; background-color: color-mix(in srgb, var(--fap-brand-300, #9fd9d1) 45%, transparent); filter: blur(140px); }
/* دسکتاپ: حاله بالای هیرو پشت سربرگ شیشه‌ای ادامه دارد (مثل پروداکشن) و لبه بالای هیرو آن را نمی‌برد؛
   فقط چپ و راست و پایین بریده می‌شود. موبایل و تبلت: سربرگ اپی مات است، همان overflow: hidden.
   مرورگر بی clip (سافاری زیر ۱۶) همان hidden را نگه می‌دارد. */
@media (min-width: 1025px) {
    .fml-kit .fml-hero { overflow: clip visible; clip-path: inset(-400px 0 0 0); }
}

.fml-kit .fml-hero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-height: 360px; }
.fml-kit .fml-hero__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; }
.fml-kit .fml-hero__title { max-width: 520px; margin: 0; color: var(--fap-c-ink, #13292d); font-size: calc(var(--fap-fs-3xl, 28px) * 1.7); font-weight: 800; line-height: 1.35; }
.fml-kit .fml-grad-text { color: var(--fap-brand-600, #0d8276); }
.fml-kit .fml-hero__lead { margin: 0; color: var(--fap-c-muted, #566a6e); font-size: var(--fap-fs-xl, 18px); line-height: 1.7; }
.fml-kit .fml-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fml-kit .fml-hero__media { display: flex; flex-direction: column; justify-content: center; }
.fml-kit .fml-hero__media img { display: block; width: 100%; height: 300px; object-fit: cover; border: 1px solid var(--fap-c-surface, #fff); border-radius: var(--fap-r-xl, 20px); }

.fml-kit .fml-hero__search { z-index: 2; }
/* (۰،۳،۰): قانون عمومی «.fml-hero > :not(.fml-hero__glow)» همان وزن (۰،۳،۰) را دارد و z-index ۲ را به ۱
   برمی‌گرداند؛ آن‌وقت کاشی‌های نوع بدنه (بعدی، هم‌لایه) پایین ریل را می‌پوشاندند. */
.fml-kit .fml-hero > .fml-hero__recs { z-index: 2; margin-top: -20px; margin-bottom: -50px; }
.fml-kit .fml-hero__mobile-cta { display: none; }

/* کاشی‌های نوع بدنه */
.fml-kit .fml-types { padding: 10px 1px 10px 0; overflow: auto; scrollbar-width: none; }
.fml-kit .fml-types::-webkit-scrollbar { display: none; }
.fml-kit .fml-types__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; }
/* کاشی کلیک‌خور شیوه‌نامه: فقط حاشیه، هاور فقط رنگ حاشیه (بی بالا رفتن و سایه) */
.fml-kit .fml-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    padding: 3px;
    background-color: var(--fap-c-surface, #fff);
    border: 1px solid var(--fap-c-line, #e0e8e9);
    border-radius: var(--fap-r-lg, 16px);
    transition: border-color var(--fap-dur-fast, .15s) ease;
}
.fml-kit .fml-type:hover { border-color: var(--fap-brand-200, #c6e9e4); }
.fml-kit .fml-type img { display: block; width: 132px; max-width: 100%; height: 90px; object-fit: contain; }
.fml-kit .fml-type__label { color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-md, 14px); font-weight: 600; line-height: 1.6; text-align: center; }

/* ---------- جعبه تیره استوری شعب ---------- */
.fml-kit .fml-stories { padding: 0 10px; }
.fml-kit .fml-stories__box {
    max-width: var(--fml-container, 1270px);
    min-height: 160px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    padding: 10px;
    background-color: var(--fml-dark, #1d212b);
    border-radius: var(--fap-r-xl, 20px);
    overflow: hidden;
}
.fml-kit .fml-stories__intro { flex: 0 0 220px; display: flex; flex-direction: column; justify-content: center; padding: 10px 10px 10px 0; }
.fml-kit .fml-stories__title { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px; color: var(--fap-c-surface, #fff); font-size: var(--fap-fs-xl, 18px); font-weight: 700; line-height: 1.6; }
.fml-kit .fml-stories__title .fap-i { flex: 0 0 auto; margin-top: 3px; }
.fml-kit .fml-stories__text { margin: 0 0 14px; color: color-mix(in srgb, var(--fap-c-surface, #fff) 85%, transparent); font-size: var(--fap-fs-md, 14px); line-height: 1.7; }
.fml-kit .fml-stories__list { flex: 1 1 auto; min-width: 0; margin-bottom: -30px; }
/* حلقه میانی استوری هم‌رنگ همین باکس: پیش‌فرض تم تیره افزونه (--bv-gap) تقریبا سیاه است و بین حلقه
   و عکس یک حلقه دوم دیده می‌شد */
.fml-kit .fml-stories__box .fap-bv { --bv-gap: var(--fml-dark, #1d212b); }
/* دکمه اینستاگرام با رنگ‌های نشان خود اینستاگرام (خواسته کاربر؛ تنها استثنای گرادیان برند در
   DESIGN-SYSTEM.md). نارنجی سمت چپ زیر فاصله خالی، متن روی سرخابی، آیکن روی بنفش */
.fml-kit .fap-btn.fml-ig-btn {
    --fap-btn-bg: var(--fml-ig-grad, linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 78%, #515bd4 100%));
    --fap-btn-bg-h: var(--fap-btn-bg);
    --fap-btn-fg: var(--fap-c-surface, #fff);
    --fap-btn-fg-h: var(--fap-c-surface, #fff);
    --fap-btn-bd: transparent;
    --fap-btn-bd-h: transparent;
}
.fml-kit .fap-btn.fap-btn.fap-btn.fml-ig-btn { transition: filter .15s; }
/* گرادیان از لبه بیرونی شروع شود: با origin پیش‌فرض (padding-box) زیر حاشیه شفاف ۱ پیکسلی تکرار
   می‌شد و لبه‌ها خطی از رنگ سر دیگر داشتند. حالت‌ها هم، چون پایه دکمه آن‌جا background را از نو می‌گذارد */
.fml-kit .fap-btn.fap-btn.fap-btn.fml-ig-btn,
.fml-kit .fap-btn.fap-btn.fap-btn.fml-ig-btn:hover,
.fml-kit .fap-btn.fap-btn.fap-btn.fml-ig-btn:focus,
.fml-kit .fap-btn.fap-btn.fap-btn.fml-ig-btn:visited { background-origin: border-box; background-repeat: no-repeat; }
.fml-kit .fap-btn.fap-btn.fap-btn.fml-ig-btn:hover { filter: brightness(1.08); }
.fml-kit .fap-btn.fap-btn.fap-btn.fml-ig-btn:focus-visible { outline-color: var(--fap-c-surface, #fff); }

/* ---------- نوار قیمت ---------- */
.fml-kit .fml-ticker { max-width: var(--fml-container, 1270px); margin: 0 auto; padding: 25px 0 12px; }

/* ---------- بخش‌های تیتردار ---------- */
.fml-kit .fml-section { max-width: calc(var(--fml-container, 1270px) + 20px); margin: 0 auto; padding: 30px 10px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.fml-kit .fml-section > .fml-kicker { margin-bottom: -5px; }
.fml-kit .fml-section .fml-section__title { margin: 0; color: var(--fap-c-ink, #13292d); font-size: var(--fap-fs-3xl, 28px); font-weight: 800; line-height: 1.5; }
.fml-kit .fml-section__lead { margin: 0; color: var(--fap-c-muted, #566a6e); font-size: var(--fap-fs-lg, 16px); line-height: 1.7; }
/* پیشنهادهای ویژه (پیشنهاد کاربر): سر راست‌چین، تیتر و شعار هم‌لبه کارت اول؛ فلش‌ها سمت چپ همان
   ردیف، هم‌تراز وسط دو خط سر. بی خط «کاهش قیمت» و بی ردیف جدای فلش؛ کارت‌ها ۱۲ پیکسل بعد از شعار. */
.fml-kit .fml-section.fml-offers { position: relative; padding-top: 6px; gap: 0; align-items: stretch; text-align: start; }
.fml-kit .fml-offers > .fml-section__title, .fml-kit .fml-offers > .fml-section__lead { padding-inline: 4px; }
.fml-kit .fml-offers .fml-section__title { line-height: 1.35; }
.fml-kit .fml-offers .fml-section__lead { line-height: 1.6; }
.fml-kit .fml-offers__list { width: 100%; margin-top: -4px; text-align: start; }
/* فاصله ۳۰ پیکسلی بالا و پایین خود بخش پیشنهادی (recommended-ads.css) این‌جا تیتر خودش را دارد */
.fml-kit .fml-offers .fap-recommendations { margin: 0; }
@media (min-width: 768px) {
    .fml-kit .fml-offers > .fml-section__title, .fml-kit .fml-offers > .fml-section__lead { padding-inline-end: 110px; }
    /* ۶ پدینگ بالا + نیمه سر دوخطی (۳۸ + ۲۶) − نیمه فلش ۳۸ پیکسلی */
    .fml-kit .fml-offers .fap-rec-head--nav-only { position: absolute; top: 19px; inset-inline-end: 14px; margin: 0; padding: 0; }
}

/* ---------- فروش در شعبه ---------- */
.fml-kit .fml-sale-wrap { padding: 0 10px; }
.fml-kit .fml-sale {
    position: relative;
    max-width: var(--fml-container, 1270px);
    min-height: 460px;
    margin: 0 auto;
    display: flex;
    padding: 25px;
    border-radius: var(--fap-r-xl, 20px);
    overflow: hidden;
    background: var(--fml-dark, #1d212b) var(--fml-sale-bg) center / cover no-repeat;
}
/* سایه تیره روی عکس (گرادیان کاربردی مجاز) */
.fml-kit .fml-sale::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(236deg, var(--fml-dark, #1d212b) 16%, transparent 100%);
}
.fml-kit .fml-sale__body { position: relative; z-index: 1; max-width: 508px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px; }
.fml-kit .fml-sale__body > .fml-kicker { margin-bottom: -5px; }
.fml-kit .fml-sale .fml-sale__title { margin: 0; color: var(--fap-c-surface, #fff); font-size: var(--fap-fs-3xl, 28px); font-weight: 800; line-height: 1.5; }
.fml-kit .fml-sale__text { margin: 0 0 14px; color: color-mix(in srgb, var(--fap-c-surface, #fff) 90%, transparent); font-size: var(--fap-fs-lg, 16px); line-height: 1.9; }
.fml-kit .fml-sale .fml-kicker, .fml-kit .fml-tool--buy .fml-tool__kicker { color: var(--fap-brand-300, #9fd9d1); }

/* سه مرحله (کپی .hb-steps صفحه المنتوری) */
.fml-kit .fml-steps { --st-accent: var(--fap-brand-300, #9fd9d1); --st-label: color-mix(in srgb, var(--fap-c-surface, #fff) 92%, transparent); --st-line: color-mix(in srgb, var(--fap-c-surface, #fff) 25%, transparent); --st-size: 30px; width: 100%; }
.fml-kit .fml-steps ol { list-style: none; margin: 0; padding: 18px 8px; display: flex; align-items: center; justify-content: center; counter-reset: fml-step; direction: rtl; }
.fml-kit .fml-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    counter-increment: fml-step;
    color: var(--st-label);
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 1;
    white-space: nowrap;
}
.fml-kit .fml-steps li:last-child { flex: 0 0 auto; }
.fml-kit .fml-steps li::before {
    content: counter(fml-step, persian);
    flex: 0 0 auto;
    width: var(--st-size);
    height: var(--st-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--st-accent);
    border-radius: 50%;
    color: var(--st-accent);
    font-size: calc(var(--st-size) * .44);
}
.fml-kit .fml-steps li b { flex: 1 1 auto; min-width: 16px; max-width: 70px; height: 2px; margin: 0 10px; background: var(--st-line); font-weight: 400; }

/* ---------- ابزارها ---------- */
.fml-kit .fml-tools { padding-bottom: 25px; }
.fml-kit .fml-tools__grid {
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    text-align: start;
}
.fml-kit .fml-tools__row { grid-column: span 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* کارت شیوه‌نامه: فقط حاشیه و بی‌سایه؛ هاور فقط رنگ حاشیه */
.fml-kit .fml-tool {
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    padding: 24px;
    background-color: var(--fap-c-surface, #fff);
    border: 1px solid var(--fap-c-line, #e0e8e9);
    border-radius: var(--fap-r-xl, 20px);
    overflow: hidden;
    transition: border-color var(--fap-dur-fast, .15s) ease;
}
.fml-kit .fml-tool:hover { border-color: var(--fap-brand-200, #c6e9e4); }
.fml-kit .fml-tool--sm { padding: 20px; }
.fml-kit .fml-tool__head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.fml-kit .fml-tool .fml-tool__kicker { margin: 0 0 -4px; color: var(--fap-brand-600, #0d8276); font-size: var(--fap-fs-sm, 13px); font-weight: 700; line-height: 1.6; }
.fml-kit .fml-tool .fml-tool__title { margin: 0; color: var(--fap-c-ink, #13292d); font-size: var(--fap-fs-xl, 18px); font-weight: 700; line-height: 1.7; }
.fml-kit .fml-tool__text { margin: -4px 0 10px; color: var(--fap-c-muted, #566a6e); font-size: var(--fap-fs-md, 14px); line-height: 1.8; }
.fml-kit .fml-tool__foot { position: relative; z-index: 1; display: flex; justify-content: flex-start; }

.fml-kit .fml-tool--buy {
    grid-row: span 2;
    justify-content: flex-end;
    gap: 10px;
    background: var(--fml-dark, #1d212b) var(--fml-tool-bg) bottom center / cover no-repeat;
    border-color: transparent;
}
.fml-kit .fml-tool--buy:hover { border-color: transparent; }
/* سایه تیره روی عکس (گرادیان کاربردی مجاز) */
.fml-kit .fml-tool--buy::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(337deg, var(--fml-dark, #1d212b) 15%, transparent 75%); }
.fml-kit .fml-tool--buy > * { position: relative; z-index: 1; }
.fml-kit .fml-tool--buy .fml-tool__title { color: var(--fap-c-surface, #fff); }
.fml-kit .fml-tool--buy .fml-tool__text { color: color-mix(in srgb, var(--fap-c-surface, #fff) 90%, transparent); }

.fml-kit .fml-tool__radar {
    position: absolute;
    top: 81px;
    left: -35px;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    border: 1px solid var(--fap-brand-300, #9fd9d1);
    background: repeating-radial-gradient(circle, color-mix(in srgb, var(--fap-brand-500, #1aa29a) 12%, transparent) 0 1px, transparent 2px 27px);
    z-index: 0;
}
.fml-kit .fml-tool__spark { position: absolute; top: 22px; left: 0; z-index: 0; color: var(--fap-brand-500, #1aa29a); opacity: .7; }
/* پلاک استعلام و صفحه‌کیلومتر کاتالوگ (کارت ۲۲۴ تا ۲۶۴ پیکسلی دسکتاپ): از گوشه پایین چپ بیرون می‌زنند
   و لبه کارت بخشی را می‌بُرد، مثل دایره‌های رادار؛ بخش دیده‌شده (۴۶٪ عرض منهای ۴۰) به دکمه نمی‌رسد */
.fml-kit .fml-tool__plate,
.fml-kit .fml-tool__gauge { position: absolute; z-index: 0; left: -40px; width: 46%; height: auto; color: var(--fap-brand-500, #1aa29a); opacity: .5; pointer-events: none; }
.fml-kit .fml-tool__plate { bottom: 26px; transform: rotate(-8deg); }
.fml-kit .fml-tool__gauge { bottom: -4px; }
/* عکس دو خودرو کامل و بی‌برش، در ردیف دکمه و درست کنارش؛ فقط جای باقی‌مانده را می‌گیرد. کارتی که آن‌قدر
   باریک است که عکس نواری ریز می‌شد (۱۰۲۴ تا ۱۱۸۰ پیکسل)، عکس را نشان نمی‌دهد */
.fml-kit .fml-tool--compare { container-type: inline-size; }
.fml-kit .fml-tool--compare .fml-tool__foot { align-items: center; gap: 8px; }
.fml-kit .fml-tool__compare { display: block; flex: 0 1 178px; min-width: 0; height: auto; margin-inline-end: -8px; pointer-events: none; } /* ۸ پیکسل در حاشیه چپ کارت، هنوز ۱۲ پیکسل تا لبه */
@container (max-width: 200px) { /* عرض درون کارت (بی padding)؛ زیر این، عکس از ۶۷ پیکسل کوچک‌تر می‌شد */
    .fml-kit .fml-tool__compare { display: none; }
}

/* لحظه ورود ابزارها: یک بار، وقتی بخش اول بار دیده می‌شود (theme.js؛ بی js و با «کاهش حرکت» همه ثابت).
   رادار یک دور جاروب می‌شود، خط دیده‌بان کشیده می‌شود، پلاک استعلام جا می‌افتد، عقربه کاتالوگ از صفر
   به جای خودش می‌رود، عکس مقایسه از کنار می‌آید. هیچ‌کدام حلقه نیست. */
.fml-kit .fml-tool__radar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 300deg, color-mix(in srgb, var(--fap-brand-500, #1aa29a) 22%, transparent) 0 46deg, transparent 46deg);
    opacity: 0;
}
.fml-kit .fml-tool__needle { transform-box: view-box; transform-origin: 80px 84px; }
.fml-kit .fml-tools.fml-arm .fml-tool__radar::after { animation: fml-sweep 1.3s cubic-bezier(.4, 0, .2, 1) .1s both; }
.fml-kit .fml-tools.fml-arm .fml-tool__spark path { stroke-dasharray: 1; animation: fml-draw 1.4s cubic-bezier(.45, .05, .25, 1) .3s both; }
.fml-kit .fml-tools.fml-arm .fml-tool__plate { animation: fml-plate .7s cubic-bezier(.45, .05, .25, 1) .5s both; }
.fml-kit .fml-tools.fml-arm .fml-tool__needle { animation: fml-needle 1.1s cubic-bezier(.45, .05, .25, 1) .65s both; }
.fml-kit .fml-tools.fml-arm .fml-tool__compare { animation: fml-slide .6s cubic-bezier(.45, .05, .25, 1) .8s both; }
.fml-kit .fml-tools.fml-arm:not(.fml-in) .fml-tool__radar::after,
.fml-kit .fml-tools.fml-arm:not(.fml-in) .fml-tool__spark path,
.fml-kit .fml-tools.fml-arm:not(.fml-in) .fml-tool__plate,
.fml-kit .fml-tools.fml-arm:not(.fml-in) .fml-tool__needle,
.fml-kit .fml-tools.fml-arm:not(.fml-in) .fml-tool__compare { animation-play-state: paused; }
@keyframes fml-sweep { 0% { opacity: 1; transform: rotate(-360deg); } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes fml-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fml-plate { from { opacity: 0; transform: translateY(18px) rotate(-14deg); } to { transform: rotate(-8deg); } }
@keyframes fml-needle { from { transform: rotate(-132deg); } }
@keyframes fml-slide { from { opacity: 0; transform: translateX(-16px); } }
@media (prefers-reduced-motion: reduce) {
    .fml-kit .fml-tools .fml-tool__radar::after,
    .fml-kit .fml-tools .fml-tool__spark path,
    .fml-kit .fml-tools .fml-tool__plate,
    .fml-kit .fml-tools .fml-tool__needle,
    .fml-kit .fml-tools .fml-tool__compare { animation: none !important; }
}

/* ---------- تبلت ---------- */
@media (max-width: 1024px) {
    .fml-kit .fml-hero__media img { height: 280px; }
    .fml-kit .fml-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fml-kit .fml-tool--buy { grid-row: auto; grid-column: span 2; min-height: 300px; }
    .fml-kit .fml-tools__row { grid-column: span 2; }
    .fml-kit .fml-tool__radar { top: -50px; left: -50px; }
}

/* ---------- موبایل ---------- */
@media (max-width: 767px) {
    .fml-kit .fml-hero { gap: 15px; padding: 22px 0 10px; }
    .fml-kit .fml-hero > :not(.fml-hero__glow) { padding-inline: 10px; }
    .fml-kit .fml-hero__glow--a { top: -96px; left: 98px; }
    .fml-kit .fml-hero__glow--b { display: none; }
    .fml-kit .fml-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .fml-kit .fml-hero__text { gap: 10px; align-items: center; text-align: center; }
    .fml-kit .fml-hero__title { font-size: calc(var(--fap-fs-2xl, 22px) * 1.15); line-height: 1.5; }
    .fml-kit .fml-hero__lead { font-size: var(--fap-fs-md, 14px); line-height: 1.7; }
    .fml-kit .fml-hero__actions, .fml-kit .fml-hero__media { display: none; }
    .fml-kit .fml-hero__search { margin-top: -5px; }
    /* پایین ریل (فضای سایه) دیگر روی کاشی‌های نوع بدنه نمی‌افتد: لمس پایین کارت به ریل می‌رسید نه کاشی‌ها */
    .fml-kit .fml-hero > .fml-hero__recs { margin-top: -15px; margin-bottom: -25px; }
    .fml-kit .fml-hero__recs .fap-rec-rail { padding-bottom: 12px; }
    .fml-kit .fml-types { margin: -10px 0; padding: 10px 10px 20px; }
    .fml-kit .fml-types__grid { width: 1200px; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 15px; }
    .fml-kit .fml-type { padding: 0; }
    .fml-kit .fml-hero__mobile-cta { display: flex; flex-direction: column; gap: 12px; padding: 0 10px 10px; }

    .fml-kit .fml-stories__box { flex-wrap: wrap; padding: 20px 20px 15px; }
    /* ردیف استوری‌ها تا لبه جعبه تیره (۲۰ پدینگ جعبه + ۱۶ پدینگ .fap-bv)، استوری اول هم‌تراز محتوای جعبه */
    .fml-kit .fml-stories__box .fap-bv__row { margin-inline: -36px; padding-inline: 20px; scroll-padding-inline: 20px; }
    .fml-kit .fml-stories__intro { flex: 1 1 100%; align-items: center; padding: 0; text-align: center; }
    .fml-kit .fml-stories__title { font-size: var(--fap-fs-lg, 16px); }
    .fml-kit .fml-stories__intro .fap-btn { width: 100%; }

    .fml-kit .fml-ticker { padding: 20px 0 8px; }
    .fml-kit .fml-section .fml-section__title { font-size: var(--fap-fs-2xl, 22px); }
    .fml-kit .fml-section__lead { font-size: var(--fap-fs-md, 14px); }

    .fml-kit .fml-sale { min-height: 400px; padding: 15px; background-position: top center; }
    .fml-kit .fml-sale::before { background-image: linear-gradient(191deg, var(--fml-dark, #1d212b) 16%, transparent 100%); }
    .fml-kit .fml-sale .fml-sale__title { font-size: var(--fap-fs-2xl, 22px); }
    .fml-kit .fml-sale__text { font-size: var(--fap-fs-md, 14px); text-align: justify; }
    .fml-kit .fml-steps { --st-size: 26px; }
    .fml-kit .fml-steps ol { padding: 14px 6px; }
    .fml-kit .fml-steps li { gap: 7px; }
    .fml-kit .fml-steps li b { min-width: 12px; max-width: 40px; margin: 0 7px; }

    .fml-kit .fml-tools__grid, .fml-kit .fml-tools__row { grid-template-columns: minmax(0, 1fr); }
    .fml-kit .fml-tools__row { grid-column: auto; }
    .fml-kit .fml-tool--buy { grid-column: auto; min-height: 300px; padding: 15px; background-position: top center; }
    .fml-kit .fml-tool--buy::before { background-image: linear-gradient(348deg, var(--fml-dark, #1d212b) 16%, transparent 100%); }
    .fml-kit .fml-tool { min-height: 170px; padding: 15px; }
    .fml-kit .fml-tool__foot .fap-btn { width: 100%; }
    .fml-kit .fml-tool__spark { left: -45px; top: 15px; }
    /* دکمه تمام‌عرض است: نگاره‌ها به گوشه بالا که کنار عنوان کوتاه خالی است */
    .fml-kit .fml-tool__plate { top: 22px; bottom: auto; left: 16px; width: 130px; }
    .fml-kit .fml-tool__gauge { top: 14px; bottom: auto; left: -28px; width: 150px; }
    .fml-kit .fml-tool--compare .fml-tool__foot { position: static; }
    .fml-kit .fml-tool__compare { position: absolute; z-index: 0; top: 20px; left: 14px; width: 160px; }
}

@media (max-width: 420px) {
    .fml-kit .fml-steps ol { flex-direction: column; align-items: flex-start; padding: 14px 12px; }
    .fml-kit .fml-steps li { display: grid; grid-template-columns: var(--st-size) 1fr; align-items: center; gap: 4px 10px; width: 100%; flex: 0 0 auto; font-size: 15px; }
    .fml-kit .fml-steps li b { width: 2px; min-width: 0; max-width: none; height: 22px; margin: 2px auto; }
}

@media (prefers-reduced-motion: reduce) {
    .fml-kit .fml-type, .fml-kit .fml-tool { transition: none; }
}