/*! kalachasb — فاز ۷: موبایل (ریسپانسیوِ کامل)
 * قاعده: هر قانونِ این فایل داخلِ یک @media است (tests/mobile.test.mjs این را می‌سنجد) → دسکتاپ پیکسل‌به‌پیکسل دست‌نخورده.
 * صفحه‌های هندآف (#dc-root) استایلِ inline دارند؛ برای شکست‌دادنِ inline از انتخابگرِ [style*="…"] + !important استفاده می‌شود.
 * صفحه‌های محتوایی از کلاس‌های .kc-* (site.css) می‌آیند. مارک‌آپِ ناوبریِ موبایل (kc-burger / kc-drawer / kc-mnav) در build/shell.mjs است
 * و با hidden می‌آید؛ فقط این‌جا داخلِ @media نمایش داده می‌شود. کلاس‌های html.kc-drawer-open / kc-filters-open / kc-page-* را kc.js می‌گذارد.
 * شکست‌ها: ≤1024 تبلت، ≤768 چیدمانِ تک‌ستونه، <768 تب‌بار و کشو، ≤480 گوشی (۲ ستون کارت). */

/* ================================================================ ≤1024 */
@media (max-width: 1024px) {
  .kc-wrap { padding-inline: 20px; }
  #dc-root [style*="max-width: 1500px"] { padding-inline: 20px !important; }
  #dc-root [style*="flex: 0 0 232px"], #dc-root [style*="flex: 0 0 224px"] { flex-basis: 200px !important; }
  .kc-hero { padding: 22px; }
  .kc-hero h1 { font-size: 24px; }
}

/* ================================================================ ≤768 */
@media (max-width: 768px) {
  /* ---- عرض‌ها و فاصله‌ها */
  html, body { overflow-x: hidden; max-width: 100%; }
  .kc-wrap { padding-inline: 16px; }
  #dc-root [style*="max-width: 1500px"] { padding-inline: 16px !important; }
  #dc-root [style*="max-width: 1500px"][style*="padding: 20px 24px 26px"] { padding-block: 12px 14px !important; }
  .kc-main { padding: 14px 0 32px; gap: 12px; }
  .kc-hero { padding: 18px; gap: 10px; }
  .kc-hero h1 { font-size: 21px; }
  .kc-hero p { font-size: 13.5px; }
  .kc-card { padding: 16px; gap: 12px; }
  .kc-card h2 { font-size: 16.5px; }
  .kc-crumb { padding-top: 12px; }
  .kc-btn { min-height: 46px; }
  .kc-field input, .kc-field select { height: 46px; font-size: 14px; }
  .kc-row .kc-btn { flex: 1 1 auto; }
  #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(330px, 1fr))"] > div[style*="padding: 18px"] { padding: 14px !important; gap: 16px !important; }
  #dc-root h1[style*="font-size: 21px"] { font-size: 18px !important; }
  #dc-root [style*="font-size: 24px; font-weight: 800"] { font-size: 21px !important; }

  /* ---- گریدهای دو/چهارستونهٔ هندآف → تک‌ستونه (سایدبار + محتوا، سبد + خلاصه، غرفه + کالاها، دیدگاه‌ها) */
  #dc-root [style*="grid-template-columns: repeat(auto-fit"][style*="align-items: start"] { grid-template-columns: minmax(0, 1fr) !important; }
  #dc-root [style*="grid-column: span"] { grid-column: auto !important; }
  #dc-root .kc-msheet { order: 2; } /* تبلت: ستونِ فیلترها بعد از نتایج (زیرِ ۷۶۸ به برگه تبدیل می‌شود) */
  #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  #dc-root [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] { gap: 6px !important; font-size: 12px; }
  #dc-root [style*="grid-template-columns: minmax(140px, 1.4fr)"] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px !important; }
  #dc-root [style*="grid-template-columns: minmax(120px, 200px)"] { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) !important; }
  #dc-root [style*="padding: 34px 30px"] { padding: 22px 18px !important; }

  /* ---- ردیف‌های افقیِ کالا: اسکرولِ لمسی با snap، سه کارت در دید، بدونِ فلش */
  #dc-root [style*="overflow-x: auto; overflow-y: hidden; scrollbar-width: none;"] {
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 10px !important; scroll-padding-inline: 2px; padding-bottom: 2px;
  }
  #dc-root [style*="overflow-x: auto; overflow-y: hidden; scrollbar-width: none;"] > * { scroll-snap-align: start; }
  #dc-root [style*="flex: 0 0 232px"], #dc-root [style*="flex: 0 0 224px"] { flex-basis: calc(33.333% - 7px) !important; padding: 10px !important; }
  #dc-root [style*="flex: 0 0 172px"] { flex-basis: 140px !important; height: 66px !important; }
  #dc-root [style*="display: flex; align-items: center; gap: 10px;"] > button[style*="width: 34px; height: 34px"] { display: none !important; }
  #dc-root button[style*="top: 50%"][style*="width: 40px; height: 40px"] { width: 32px !important; height: 32px !important; }

  /* ---- نوارِ دسته‌ها (۱۰ لینک): به‌جای گریدِ دوستونه، ردیفِ چیپ‌های اسکرولی */
  .kc-tabs, #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: #F1F4F8"] {
    display: flex !important; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 6px; background: transparent !important; border-radius: 0 !important; overflow-y: hidden; margin-top: 10px; padding-bottom: 2px;
  }
  .kc-tabs::-webkit-scrollbar, #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: #F1F4F8"]::-webkit-scrollbar { display: none; }
  .kc-tabs a, #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: #F1F4F8"] > a {
    flex: 0 0 auto; scroll-snap-align: start; padding: 9px 14px !important; border-radius: 999px; background: #F1F4F8; font-size: 13px !important; white-space: nowrap;
  }
  #dc-root [style*="max-width: 1500px"][style*="padding: 12px 24px"] { padding-block: 6px 8px !important; }

  /* ---- صفحهٔ کالا: گالریِ تمام‌عرض + نقطه‌ها (به‌جای ستونِ بندانگشتی) */
  #dc-root [style*="flex: 1 1 320px; min-width: 260px; display: flex; gap: 12px;"] { flex-direction: column-reverse !important; align-items: stretch; gap: 0 !important; }
  #dc-root [style*="flex: 1 1 320px; min-width: 260px; display: flex; gap: 12px;"] > div[style*="flex-direction: column; gap: 10px; flex-shrink: 0;"] {
    flex-direction: row !important; justify-content: center; align-items: center; gap: 8px !important; padding-top: 12px;
  }
  #dc-root [style*="flex: 1 1 320px; min-width: 260px; display: flex; gap: 12px;"] > div[style*="flex-direction: column; gap: 10px; flex-shrink: 0;"] > div {
    width: 8px !important; height: 8px !important; border-radius: 50% !important; border-width: 0 !important; font-size: 0 !important; color: transparent !important; background: #C9D8EA !important;
  }
  #dc-root [style*="flex: 1 1 320px; min-width: 260px; display: flex; gap: 12px;"] > div[style*="flex-direction: column; gap: 10px; flex-shrink: 0;"] > div:first-child { width: 22px !important; background: #1668D6 !important; }
  #dc-root [style*="flex: 1 1 320px; min-width: 260px; display: flex; gap: 12px;"] > div[style*="flex-direction: column; gap: 10px; flex-shrink: 0;"] svg { display: none !important; }

  /* ---- فوتر: ستون‌ها دوتایی، نمادهای اعتماد کوچک‌تر و وسط، نوارِ پرداخت وسط‌چین */
  .kc-foot .kc-wrap { padding-block: 22px; gap: 18px; }
  .kc-foot-cols, #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(190px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  .kc-foot-apps { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .kc-badges a { width: calc(50% - 5px); height: 54px; }
  #dc-root [style*="width: 190px; height: 92px"] { width: calc(50% - 5px) !important; height: 70px !important; }
  #dc-root [style*="gap: 34px 60px"] { gap: 18px !important; }
  #dc-root [style*="padding: 38px 24px 30px"] { padding-block: 22px 18px !important; gap: 20px !important; }
  .kc-trust .kc-wrap { padding: 12px 16px; gap: 16px; justify-content: center; }
  .kc-trust img { height: 48px; }
  .kc-pay .kc-wrap, #dc-root div[style="background: #1668D6;"] > div { justify-content: center !important; text-align: center; gap: 10px !important; }
  .kc-pay-chips, #dc-root div[style="background: #1668D6;"] > div > div { justify-content: center; }
  .kc-pay-chips span { height: 28px; font-size: 11.5px; }
  .kc-copy { width: 100%; }
}

/* ================================================================ <768 : تب‌بار، همبرگر، کشو، هدرِ فشرده */
@media (max-width: 767.98px) {
  html.kc-drawer-open, html.kc-filters-open { overflow: hidden; }

  /* ---- هدر: فقط لوگو + جست‌وجو + سبد (+ همبرگر)؛ بقیه در کشو */
  .kc-util-links { display: none; }
  .kc-util .kc-wrap { min-height: 32px; font-size: 12.5px; }
  #dc-root [style*="background: #1668D6; color: #fff; font-size: 13px"] [style*="gap: 4px 20px"] { display: none !important; }
  #dc-root [style*="background: #1668D6; color: #fff; font-size: 13px"] > div { min-height: 32px !important; }
  .kc-bar .kc-wrap { padding: 10px 16px; gap: 8px 10px; min-height: 0; }
  #dc-root [style*="max-width: 1500px"][style*="padding: 14px 24px"] { padding: 10px 16px !important; gap: 8px 10px !important; min-height: 0 !important; }
  .kc-logo b, .kc-logo i { font-size: 20px; }
  .kc-logo s { font-size: 11px; }
  .kc-logo img { width: 34px; height: 34px; margin-inline-end: 4px; }
  #dc-root a[style*="align-items: baseline; gap: 2px; flex-shrink: 0;"] > span { font-size: 20px !important; }
  #dc-root a[style*="align-items: baseline; gap: 2px; flex-shrink: 0;"] > span:last-child { font-size: 11px !important; }
  #dc-root a[style*="align-items: baseline; gap: 2px; flex-shrink: 0;"] > img { width: 34px !important; height: 34px !important; margin-inline-end: 4px !important; }
  #dc-root [data-dept] { display: none !important; }
  .kc-search { flex: 1 1 100%; min-width: 0; order: 9; height: 42px; }
  .kc-search input { padding: 0 14px; font-size: 14px; }
  .kc-search button { width: 50px; }
  #dc-root form[style*="flex: 1 1 300px"] { flex: 1 1 100% !important; min-width: 0 !important; order: 9; height: 42px !important; }
  #dc-root form[style*="flex: 1 1 300px"] > input { padding: 0 14px !important; font-size: 14px !important; }
  #dc-root form[style*="flex: 1 1 300px"] > button { width: 50px !important; }
  .kc-bar-right { margin-inline-start: auto; }
  .kc-bar-right a.kc-txt { display: none; }
  .kc-cart { height: 38px; }
  #dc-root [style*="align-items: center; gap: 6px; flex-shrink: 0;"] { margin-inline-start: auto; }
  #dc-root [style*="align-items: center; gap: 6px; flex-shrink: 0;"] a { display: none !important; }
  #dc-root [style*="align-items: center; gap: 6px; flex-shrink: 0;"] span[style*="width: 1px; height: 22px"] { display: none !important; }
  #dc-root [style*="align-items: center; gap: 6px; flex-shrink: 0;"] button[style*="width: 42px; height: 42px"] { display: none !important; }
  #dc-root [style*="align-items: center; gap: 6px; flex-shrink: 0;"] [style*="border-radius: 999px"] { height: 38px !important; }

  /* ---- همبرگر */
  .kc-burger {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0;
    background: #F1F4F8; border: 0; border-radius: 10px; color: #24374F; padding: 0;
  }
  .kc-burger:active { background: #E1E8F0; }

  /* ---- پرده */
  .kc-scrim { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(16,36,62,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease-out; }
  html.kc-drawer-open .kc-scrim, html.kc-filters-open .kc-scrim { opacity: 1; pointer-events: auto; }

  /* ---- کشوی کناری (از سمتِ راست؛ مقادیرِ فیزیکی چون ریشهٔ dc صفحهٔ خانه dir=ltr دارد و inline-start آن‌جا چپ می‌شود) */
  .kc-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; right: 0; width: min(84vw, 340px); z-index: 80; direction: rtl; text-align: start;
    background: #fff; color: #24374F; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 0 40px rgba(16,36,62,.25);
    transform: translateX(100%); transition: transform .22s ease-out; padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  html.kc-drawer-open .kc-drawer { transform: none; }
  .kc-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #E4E9EF; position: sticky; top: 0; background: #fff; z-index: 1; }
  .kc-drawer-head b { font-size: 18px; font-weight: 800; color: #10243E; }
  .kc-drawer-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #F1F4F8; border: 0; border-radius: 10px; color: #24374F; padding: 0; }
  .kc-drawer-auth { display: flex; gap: 8px; padding: 14px 16px 4px; }
  .kc-drawer-auth a { flex: 1; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; font-size: 14px; font-weight: 800; background: #1668D6; color: #fff; }
  .kc-drawer-auth a + a { background: #fff; color: #1668D6; border: 1.5px solid #C9D8EA; }
  .kc-drawer-sec { display: flex; flex-direction: column; padding: 10px 8px 4px; }
  .kc-drawer-sec h4 { margin: 0; padding: 8px 10px 6px; font-size: 12px; font-weight: 800; color: #566B84; letter-spacing: .02em; }
  .kc-drawer-sec a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #24374F; }
  .kc-drawer-sec a:active { background: #EAF2FD; color: #1668D6; }
  .kc-drawer-sec a.all { color: #1668D6; font-weight: 700; }
  .kc-drawer-sec + .kc-drawer-sec { border-top: 1px solid #E4E9EF; margin-top: 6px; }

  /* ---- تب‌بارِ پایینِ اپ‌مانند */
  .kc-mnav {
    display: flex; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; direction: rtl; box-sizing: border-box; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid #E4E9EF; box-shadow: 0 -6px 20px rgba(16,36,62,.08);
  }
  .kc-mnav a { flex: 1 1 0; min-width: 0; min-height: 44px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; color: #566B84; -webkit-tap-highlight-color: transparent; }
  .kc-mnav a svg { width: 22px; height: 22px; }
  .kc-mnav a.on { color: #1668D6; }
  .kc-mnav a.on::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: #1668D6; }
  .kc-mnav i[data-kc-count] {
    position: absolute; top: 5px; left: calc(50% + 3px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; background: #D6293A; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1;
  }
  /* جا برای تب‌بار: نوارِ آبیِ پرداخت (آخرین عنصرِ صفحه) از زیرِ تب‌بار رد می‌شود */
  .kc-pay .kc-wrap { padding-bottom: calc(16px + 62px + env(safe-area-inset-bottom)); }
  #dc-root div[style="background: #1668D6;"] > div { padding-bottom: calc(18px + 62px + env(safe-area-inset-bottom)) !important; }
  /* دکمهٔ «برگشت به بالا» بالاترِ تب‌بار می‌نشیند */
  .kc-top, #dc-root button[style*="position: fixed; bottom: 24px"] { bottom: calc(72px + env(safe-area-inset-bottom)) !important; inset-inline-end: 12px !important; width: 40px !important; height: 40px !important; }
  .kc-top { inset-inline-end: 12px; }
  html.kc-page-product .kc-top, html.kc-page-product #dc-root button[style*="position: fixed; bottom: 24px"] { bottom: calc(136px + env(safe-area-inset-bottom)) !important; }
  html.kc-page-checkout .kc-top { bottom: calc(150px + env(safe-area-inset-bottom)) !important; }

  /* ---- صفحهٔ کالا: نوارِ چسبانِ پایین «افزودن به سبد + قیمت» (همان نوارِ sticky بالای طرح، ثابت‌شده بالای تب‌بار) */
  html.kc-page-product body { padding-bottom: 62px; }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] {
    position: fixed !important; top: auto !important; bottom: calc(60px + env(safe-area-inset-bottom)) !important; left: 0; right: 0; margin: 0 !important;
    border-top: 1px solid #E4E9EF; box-shadow: 0 -8px 24px rgba(16,36,62,.08); z-index: 44 !important;
  }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] > div { padding: 8px 12px !important; flex-wrap: nowrap !important; gap: 8px !important; }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] [style*="width: 40px; height: 40px"] { display: none !important; }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] [style*="min-width: 0; display: flex; flex-direction: column; gap: 3px"] > span:last-child { display: none !important; }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] [style*="gap: 12px; min-width: 0"] { flex: 1 1 0; min-width: 0; }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] [style*="text-overflow: ellipsis"] { font-size: 12.5px !important; }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] > div > div:last-child { flex-shrink: 0; gap: 8px !important; }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] span[style*="font-size: 17px"] { font-size: 14px !important; }
  #dc-root [style*="position: sticky; top: 0; z-index: 30"] button[style*="height: 40px; padding: 0 18px"] { padding: 0 12px !important; font-size: 13px !important; }

  /* ---- صفحهٔ دسته/جست‌وجو: فیلترها در برگهٔ پایینی */
  .kc-mfilters { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1.5px solid #C9D8EA; border-radius: 999px; background: #fff; color: #1668D6; font-size: 13px; font-weight: 800; }
  #dc-root .kc-msheet { display: none !important; }
  html.kc-filters-open #dc-root .kc-msheet {
    display: flex !important; position: fixed; inset: auto 0 0 0; z-index: 80; direction: rtl; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    background: #F4F6F8; border-radius: 16px 16px 0 0; padding: 0 14px calc(20px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -20px 50px rgba(16,36,62,.25); gap: 12px !important;
  }
  .kc-msheet-head { display: flex; order: -1; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; margin: 0 -14px; padding: 12px 16px; background: #F4F6F8; border-bottom: 1px solid #E4E9EF; }
  .kc-msheet-head b { font-size: 16px; font-weight: 800; color: #10243E; }
  .kc-msheet-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #E4E9EF; border-radius: 10px; color: #24374F; padding: 0; }
  #dc-root .kc-msheet label { min-height: 40px; }

  /* ---- سبد و تسویه: تک‌ستونه، جمعِ چسبان، دکمه‌های ≥۴۴px */
  #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] > div:last-child { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 3; box-shadow: 0 -8px 24px rgba(16,36,62,.08); }
  #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] button[style*="height: 42px"] { height: 44px !important; }
  #dc-root [style*="width: 32px; height: 32px"] { width: 40px !important; height: 40px !important; }
  #co-sum { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 3; background: #fff; border-top: 1px solid #E4E9EF; margin-inline: -16px; padding: 10px 16px 6px; }
  .kc-form { grid-template-columns: minmax(0, 1fr); }
  .kc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ ≤480 */
@media (max-width: 480px) {
  .kc-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kc-pcard { padding: 10px; gap: 7px; }
  .kc-pcard .tt { font-size: 12.5px; min-height: 38px; }
  .kc-pcard .pr { font-size: 14px; }
  #dc-root [style*="flex: 0 0 232px"], #dc-root [style*="flex: 0 0 224px"] { flex-basis: calc(50% - 5px) !important; }
  #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(230px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* گریدِ نتایجِ دسته: اسکریپتِ صفحه خودش ۲ ستون می‌گذارد (repeat(2, minmax(0px, 1fr))) — فقط فاصله‌ها را جمع می‌کنیم */
  #dc-root [style*="grid-template-columns: repeat(2, "] { gap: 10px !important; }
  #dc-root [style*="grid-template-columns: repeat(2, "] > div[style*="padding: 12px"] { padding: 10px !important; gap: 8px !important; }
  #dc-root [style*="font-size: 15.5px; font-weight: 800"] { font-size: 14px !important; }
  .kc-foot-cols, #dc-root [style*="grid-template-columns: repeat(auto-fit, minmax(190px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  .kc-foot-cols a { padding: 7px 0; }
  .kc-trust img { height: 44px; }
  .kc-hero h1 { font-size: 19px; }
  .kc-table { font-size: 12px; }
  .kc-table th, .kc-table td { padding: 9px 10px; }
}