/* =========================================================================
   طرح موبایل دسته‌بندی v2 — Figma Frame 1196 (بردکرامب) + Frame 1197 (زیردسته‌ها)
   فقط ≤767px. مارک‌آپ مشترک با دسکتاپ؛ اینجا فقط چیدمان موبایل override می‌شود.
   عنوان دسته با JS (moveTitleMobile در product-cat-v2.js) به زیرِ کارت منتقل می‌شود
   تا بردکرامب + زیردسته‌ها یک کارتِ سفیدِ چسبیده شوند.
   بعد از همه‌ی فایل‌های v2 لود می‌شود.
   ========================================================================= */
@media only screen and (max-width: 767px) {

  /* پس‌زمینه‌ی صفحه خاکستری تا کارت‌های سفید دیده شوند */
  .tk-archive-v2.site-main { background: #F5F6F6 !important; }

  /* ---------- کارت سفیدِ چسبیده: بردکرامب (بالا) + زیردسته‌ها (پایین) ---------- */
  .tk-archive-v2 .tk_archive_first_section {
    max-width: 100% !important; width: auto !important;
    margin: 0 !important; padding: 0 !important;
  }
  .tk-archive-v2 .tk_archive_breadcrumb_container {
    width: auto !important; max-width: none !important;
    margin: 0 !important; height: auto !important; line-height: normal !important;
    background: #fff; border-radius: 0;
    padding: 16px 24px !important;
    display: block !important; /* block تا nowrap-nav با min-width:auto عرض را گنده نکند */
  }

  /* بردکرامب (Frame 1196): 11px، اسکرول افقی، خانه خاکستریِ کم‌رنگ، بقیه تیره */
  .tk-archive-v2 .tk_archive_breadcrumb { width: 100%; min-width: 0; overflow: hidden; }
  .tk-archive-v2 .tk_archive_breadcrumb .woocommerce-breadcrumb {
    gap: 10px !important; font-size: 11px !important;
  }
  .tk-archive-v2 .tk_archive_breadcrumb .woocommerce-breadcrumb a {
    font-size: 11px !important; color: #394040 !important;
  }
  /* جداکننده‌ها 14px (base هم همین است) و margin اینلاین‌شان صفر */
  .tk-archive-v2 .tk_archive_breadcrumb .woocommerce-breadcrumb img {
    width: 14px !important; height: 14px !important; margin: 0 !important;
  }

  /* ---------- زیردسته‌ها (Frame 1197) ---------- */
  .tk-archive-v2 .tk_archive_sub_section {
    width: auto !important; max-width: none !important;
    margin: 0 !important;
    padding: 0 24px 16px !important;
    background: #fff; border-radius: 0 0 8px 8px;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 8px;
  }
  /* هدینگ «زیردسته‌های مرتبط» — در DOM نیست، با ::before اضافه می‌شود */
  .tk-archive-v2 .tk_archive_sub_section::before {
    content: "زیردسته‌های مرتبط";
    order: -1;
    font-family: 'Estedad-FD' !important; font-size: 12px; font-weight: 400;
    line-height: 1.9; letter-spacing: 0.015em; color: #060707;
    text-align: right;
  }
  .tk-archive-v2 .tk_v2_consult_slot { display: none !important; }

  /* ردیف کارت‌ها — اسکرول افقی */
  .tk-archive-v2 .sub_category_row { overflow-x: auto !important; margin: 0 -24px!important; }
  .tk-archive-v2 .sub_category_list .subcategory_button:first-child {
    margin-right: 24px;
  }
  .tk-archive-v2 .sub_category_list .subcategory_button:last-child {
    margin-left: 24px;
  }
  .tk-archive-v2 .sub_category_list {
    gap: 8px !important; padding: 0 !important;
  }
  /* کارت (Button 176×56، بوردر F5F6F6، radius 8، ردیفی: متن راست / عکس چپ) */
  .tk-archive-v2 .sub_category_list .subcategory_button {
    flex: 0 0 auto !important;
    width: 176px !important; height: 58px !important;
    flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-start !important;
    gap: 8px !important; padding: 10px 8px !important;
    border: 1px solid #F5F6F6 !important; border-radius: 8px !important;
    background: #fff !important; text-align: right !important;
  }
  .tk-archive-v2 .sub_category_list .subcategory_button .subcategory_thumb {
    order: 2; width: 36px !important; height: 36px !important; flex: 0 0 36px;
  }
  .tk-archive-v2 .sub_category_list .subcategory_button span:not(.subcategory_thumb) {
    order: 1; flex: 1 1 auto; height: auto !important;
    font-size: 10px !important; font-weight: 400 !important; line-height: 1.85 !important;
    color: #060707 !important; text-align: right;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ---------- عنوان دسته (با JS منتقل شده به زیرِ کارت) ---------- */
  .tk-archive-v2 .woocommerce_archive_header { padding: 16px 24px 0 !important; margin: 0 !important; }
  .tk-archive-v2 .woocommerce_archive_header__title {
    font-size: 16px !important; font-weight: 500 !important; line-height: 140% !important; margin: 0 !important;
  }

  .tk_archive_section {
    padding: 0 20px!important;
  }

  .tk-archive-v2 .tk_archive_section_container{
    padding: 0!important;
  }
}

/* =========================================================================
   نوار عنوان + فیلتر (Figma "Category Title") — موبایل
   عنوان (منتقل‌شده) بالا، سپس ردیفِ پیلِ فیلتر، سپس تعداد محصول.
   پیل‌ها با JS (buildFilterPills) ساخته می‌شوند: «همه فیلترها» + پیلِ هر گروهِ WOOF.
   باکس/هدینگِ «فیلتر محصولات» قدیمی حذف می‌شود.
   ========================================================================= */
@media only screen and (max-width: 767px) {

  /* حذف هدینگِ «فیلتر محصولات» و باکسِ قدیمی */
  .tk-archive-v2 .tk_archive_container_main::before { content: "" !important; display: none !important; }

  /* نوار نتیجه = ستون: پیل‌بار بالا، تعداد پایین (نه column-reverse، نه باکس) */
  .tk-archive-v2 .archive_header {
    flex-direction: column !important; align-items: stretch !important;
    height: auto !important; gap: 12px !important;
    background: #F5F6F6 !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; margin: 16px -20px 8px !important;
  }
  .tk-archive-v2 .tk_v2_pillbar .tk_mobile_filter:last-child{
    margin-left: 24px!important;
  }

  .archive_header> p {
    display: none;
  }

  .tk-archive-v2 .archive_header .mobile_row { display: none !important; } /* بچه‌هایش به پیل‌بار منتقل شدند */

  /* پیل‌بار: ردیفِ اسکرولیِ افقی — flex-start در RTL یعنی از راست شروع، سرریز به چپ */
  .tk-archive-v2 .tk_v2_pillbar {
    display: flex; flex-direction: row; justify-content: flex-start;
    align-items: center; gap: 4px; overflow-x: auto; width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tk-archive-v2 .tk_v2_pillbar::-webkit-scrollbar { display: none; }

  /* پیل (Button): سفید، بوردر E4E9E9، radius 999، 36px، متن 12/500 */
  .tk-archive-v2 .tk_v2_pill,
  .tk-archive-v2 .tk_v2_pillbar .tk_mobile_filter,
  .tk-archive-v2 .tk_v2_pillbar .woocommerce-ordering select.orderby {
    flex: 0 0 auto !important; width: auto !important; box-sizing: border-box !important;
    display: inline-flex !important; flex-direction: row; align-items: center; justify-content: center;
    gap: 4px; height: 36px !important; padding: 8px 12px !important; margin: 0 !important;
    background: #fff !important; border: 1px solid #E4E9E9 !important; border-radius: 999px !important;
    font-family: 'Estedad-FD' !important; font-size: 12px !important; font-weight: 500 !important;
    line-height: 1.4 !important; color: #060707 !important; white-space: nowrap; cursor: pointer;
  }
  /* پیلِ آیکن‌دار (همه فیلترها) پدینگ سمتِ آیکن کمتر */
  /* آیکن حالا اولین فرزند است (در RTL = سمت راست)، پس پدینگِ تنگ‌تر به راست می‌رود */
  .tk-archive-v2 .tk_v2_pillbar .tk_mobile_filter { padding: 8px 6px 8px 12px !important; margin-right: 24px!important;  }
  .tk-archive-v2 .tk_v2_pill_ico,
  .tk-archive-v2 .tk_v2_pillbar .tk_mobile_filter img {
    width: 20px !important; height: 20px !important; margin: 0 !important; vertical-align: middle;
  }
  .tk-archive-v2 .tk_v2_pill_chev { width: 20px !important; height: 20px !important; margin: 0 !important; }

  /* سلکتِ مرتب‌سازی به‌شکلِ پیل (فلشِ نیتیو مخفی، chevron خودمان با bg) */
  .tk-archive-v2 .tk_v2_pillbar .woocommerce-ordering { width: auto !important; margin: 0 0 0 24px !important; }
  .tk-archive-v2 .tk_v2_pillbar .woocommerce-ordering label,
  .tk-archive-v2 .tk_v2_pillbar .woocommerce-ordering .mobile_sort_icon,
  .tk-archive-v2 .tk_v2_pillbar .woocommerce-ordering input { display: none !important; }
  .tk-archive-v2 .tk_v2_pillbar .woocommerce-ordering select.orderby {
    -webkit-appearance: none; appearance: none; padding: 8px 12px 8px 28px !important;
    background-image: url(https://teslakala.com/wp-content/themes/teslakala/icon/down_arrow.svg) !important;
    background-repeat: no-repeat !important; background-position: left 8px center !important; background-size: 16px !important;
  }

  /* تعداد محصول: راست‌چین، کوچک، زیرِ پیل‌ها (بدون پسوندِ «در دسته‌ی…») */
  .tk-archive-v2 .archive_header .tk_result_count {
    /* margin افقی کنارِ width:100% باکس را over-constrained می‌کند و در RTL
       ۲۴px به چپ سرریز می‌دهد؛ همان گاتر را با padding می‌گیریم. */
    width: 100% !important; box-sizing: border-box !important;
    margin: 0 !important; padding: 0 24px !important; text-align: right !important;
    font-size: 12px !important; font-weight: 500 !important; color: #7E928F !important;
  }
  .tk-archive-v2 .archive_header .tk_result_count .tk_v2_in_cat { display: none !important; }
}


/* =========================================================================
   مشاوره و پشتیبانی (Figma "Frame 1195") — موبایل
   فلش‌های کاروسل با JS از نوار پایین (expert_bottom_bar) به هدر (کنارِ عنوان) منتقل
   می‌شوند؛ لیبل «تیم مشاوره و پشتیبانی» مخفی. کانتینر بیرونی بدون بوردر.
   ========================================================================= */
@media only screen and (max-width: 767px) {
  .tk-archive-v2 .tk_v2_consult_mobile {
    background: #fff !important; border: 0 !important; border-radius: 0 !important;
    padding: 16px 24px 8px !important; margin: 16px 0 0 !important;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 12px;
  }
  /* هدر: عنوان راست (16/500 خاکستری) + فلش‌ها چپ */
  .tk-archive-v2 .tk_v2_consult_mobile .tk_v2_consult_head {
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    padding: 0 8px 0 0;
  }
  .tk-archive-v2 .tk_v2_consult_mobile .tk_v2_consult_mobile_title {
    margin: 0 !important; font-family: 'Estedad-FD' !important;
    font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important;
    color: #394040 !important; text-align: right;
  }
  /* نوار فلش داخل هدر: لیبل مخفی، فقط دو فلش با فاصله (Frame 1179 gap 24) */
  .tk-archive-v2 .tk_v2_consult_mobile .tk_v2_consult_head .expert_bottom_bar {
    order: 0 !important; flex: 0 0 auto !important; padding: 0 8px !important; gap: 24px !important;
  }
  .tk-archive-v2 .tk_v2_consult_mobile .tk_v2_consult_head .expert_bottom_label { display: none !important; }
}
/* --- مشاوره: کانتینر ویجت بدون بوردر، بوردر روی کارت، بازتعریفِ فلش‌ها (خارج از widget) --- */
@media only screen and (max-width: 767px) {
  .tk-archive-v2 .tk_v2_consult_mobile .widget_expert_widget {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    width: 100% !important; margin: 0 !important;
  }
  .tk-archive-v2 .tk_v2_consult_mobile .whatsapp_new_carousel { background: transparent !important; }
  /* کارت (Frame 1182): بوردر روی خودِ کارت */
  .tk-archive-v2 .tk_v2_consult_mobile .expert_box.whatsapp-carousel-item {
    border: 1px solid #CCD5D3 !important; border-radius: 8px !important; background: #fff !important;
    padding: 12px !important;
  }
  /* فلش‌ها در مکانِ جدید (بیرون از .widget → استایلِ پلاگین را دستی برمی‌گردانیم) */
  .tk-archive-v2 .tk_v2_consult_head .expert_bottom_bar {
    direction: ltr; display: flex; flex-direction: row; align-items: center;
  }
  .tk-archive-v2 .tk_v2_consult_head .expert_nav_btn {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; padding: 4px;
  }
  .tk-archive-v2 .tk_v2_consult_head .expert_nav_btn img { width: 24px; height: 24px; display: block; }
  .tk-archive-v2 .tk_v2_consult_head .expert_nav_btn img.mirror { transform: scaleX(-1); }
  .tk-archive-v2 .tk_v2_consult_head .expert_nav_btn .nav-off { display: none; }
  .tk-archive-v2 .tk_v2_consult_head .expert_nav_btn.is-off .nav-on { display: none; }
  .tk-archive-v2 .tk_v2_consult_head .expert_nav_btn.is-off .nav-off { display: block; }
}


/* =========================================================================
   پایه‌ی مخفی‌بودنِ ویجت فیلتر روی موبایل
   ------------------------------------------------------------------------
   روی موبایل فیلترها فقط از راه پیل‌بار باز می‌شوند. تا الان نمایان‌بودنِ ویجت
   صرفاً با inline display (jQuery .show()/.hide()) کنترل می‌شد؛ ولی WOOF بعد از
   هر فیلترِ ajax مارک‌آپ را از نو می‌سازد و آن inline پاک می‌شود، پس ویجت بدون
   کلاس .active برمی‌گشت و با استایل‌های v1 (لیست دوستونی) لخت دیده می‌شد.
   با این قاعده پایه = مخفی؛ .show() چون inline است همچنان بر آن غالب می‌شود و
   باز کردنِ پنل از پیل‌بار دست‌نخورده کار می‌کند.
   ========================================================================= */
@media only screen and (max-width: 767px) {
  .tk-archive-v2 .tk_archive_container_side .widget.widget-woof:not(.active) {
    display: none;
  }
}


/* =========================================================================
   «حذف فیلترها»ی نوار نتایج — فقط دسکتاپ
   ------------------------------------------------------------------------
   کل استایلِ .tk_clear_filters در archive-header-v2.css داخل
   @media (min-width: 768px) است، پس زیر ۷۶۸px نه چیدمانی می‌گیرد و نه اندازه‌ی
   svg؛ و چون svg فقط viewBox دارد (بدون width/height) تمام عرض را می‌گیرد و
   ضربدرِ غول‌پیکر روی کارت محصول می‌افتد. روی موبایل ریست از فوترِ درawer
   انجام می‌شود، پس اینجا لازم نیست.
   ========================================================================= */
@media only screen and (max-width: 767px) {
  .tk-archive-v2 .archive_header .tk_clear_filters { display: none; }
}


/* =========================================================================
   پیلِ فیلترِ فعال — تینتِ قرمز به‌جای نقطه‌ی قرمز
   ------------------------------------------------------------------------
   کلاس tk_v2_pill_on را markActivePills()/updateMobileFilterIcon() در
   product-cat-v2.js می‌گذارند. آیکن‌ها <img> هستند و با CSS رنگ نمی‌گیرند، پس
   خودِ JS به نسخه‌ی *_red.svg سوییچ می‌کند (کپیِ همان فایل با fill=#ED1C24).
   قاعده‌ی پایه‌ی پیل !important دارد، این هم دارد + یک کلاس بیشتر.
   ========================================================================= */
@media only screen and (max-width: 767px) {
  .tk-archive-v2 .tk_v2_pill.tk_v2_pill_on,
  .tk-archive-v2 .tk_v2_pillbar .tk_mobile_filter.tk_v2_pill_on {
    background: #ED1C2414 !important;
    border-color: transparent !important;
    color: #ED1C24 !important;
  }
}


/* =========================================================================
   نوار استیکیِ مشاوره — Figma 12870:11296 (فقط موبایل)
   ========================================================================= */
.tk-archive-v2 .tk_v2_sticky_consult { display: none; }

@media only screen and (max-width: 767px) {
  .tk-archive-v2 .tk_v2_sticky_consult {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    box-sizing: border-box;
    display: flex;
    flex-direction: row; /* RTL → متن راست، آیکن‌ها چپ */
    align-items: center;
    gap: 16px;
    height: 80px;
    padding: 16px 24px;
    background: #FFFFFF;
    border-top: 3px solid #2A4ACA;
    cursor: pointer;
  }

  .tk-archive-v2 .tk_v2_sticky_consult_txt {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: 'Estedad-FD';
    font-weight: 400;
    font-size: 12px;
    line-height: 1.8;
    color: #060707;
    text-align: right;
  }

  .tk-archive-v2 .tk_v2_sticky_consult_q { color: #04724D; }

  .tk-archive-v2 .tk_v2_sticky_consult_actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row; /* RTL → اولین فرزند (تماس) سمت راستِ گروه */
    align-items: center;
    gap: 24px;
  }

  .tk-archive-v2 .tk_v2_sc_btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  .tk-archive-v2 .tk_v2_sc_btn img {
    display: block;
    width: 24px;
    height: 24px;
  }

  /* طرح: آیکن تلفن آینه‌ای (در Figma با rotate(180)+flipY که معادل scaleX(-1) است) */
  .tk-archive-v2 .tk_v2_sc_call img {
    transform: scaleX(-1);
  }

  /* جا برای نوار تا آخرین بلوکِ صفحه زیرش نرود */
  main.tk-archive-v2 { padding-bottom: 80px; }
}


/* =========================================================================
   پیجینیشنِ موبایل — «قبلی  ۱ … ۱۰۰  بعدی»
   markup در components/product-cat/loop/pagination.php ساخته می‌شود.
   ========================================================================= */
@media only screen and (max-width: 767px) {
  /* اگر باز هم جا کم آمد، به‌جای بیرون‌زدن از صفحه بشکند */
  .tk-archive-v2 nav.woocommerce-pagination > ul.page-numbers {
    flex-wrap: wrap;
    row-gap: 8px;
    justify-content: center;
  }

  /* «قبلی» در صفحه‌ی اول و «بعدی» در صفحه‌ی آخر: حذف نشوند، خاموش بمانند */
  .tk-archive-v2 nav.woocommerce-pagination .page-numbers.tk_pg_off {
    color: #CCD5D3;
    border-color: #E4E9E9;
    pointer-events: none;
  }
}