/* ===== پایه‌ها ===== */
:root{
  --brand:#22C1E8;
  --brand-600:#1ab4db;
  --ink:#30455F;
  --muted:#64748b;
  --bg:#f8fafc;
  --bd:#e5e7eb;
  --chip:#eef6ff;
}

.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* ===== بردکرامب ===== */
.breadcrumb{display:flex;flex-wrap:nowrap;gap:.5rem;align-items:center;overflow:auto;padding:.25rem .5rem;background:#fff;border:1px solid var(--bd);border-radius:12px;}
.breadcrumb li{white-space:nowrap;color:#64748b;font-size:.9rem;display:flex;align-items:center;}
.breadcrumb li+li:before{content:"/";margin:0 .5rem;color:#cbd5e1;}
.breadcrumb a{color:#0f172a;}
.breadcrumb .current{color:#0f172a;font-weight:700}

/* ===== زیر‌دسته‌ها ===== */
.subcats-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.subcats-head h2{font-weight:800;color:var(--ink);font-size:1rem}
.subcats-nav{display:flex;gap:.5rem}
.subcats-btn{padding:.35rem .6rem;border:1px solid var(--bd);background:#fff;border-radius:10px}
.subcats-scroller-wrap{position:relative}
.subcats-scroller{display:flex;gap:.5rem;overflow:auto;padding:.25rem}
.chip{display:inline-flex;align-items:center;padding:.5rem .8rem;background:var(--chip);border:1px solid #dbeafe;border-radius:999px;color:#0f172a;font-weight:600;font-size:.85rem;white-space:nowrap}
.chip:hover{background:#dbeafe}

/* ===== سایدبار ===== */
.filters .form-row{display:flex;flex-direction:column;gap:.4rem}
.label{font-size:.85rem;color:var(--muted)}
.label-sm{font-size:.75rem;color:var(--muted);display:flex;flex-direction:column;gap:.35rem}
.input{width:100%;border:1px solid var(--bd);border-radius:10px;padding:.6rem .75rem;font-size:.9rem}
.input:focus{outline:none;box-shadow:0 0 0 2px rgba(34,193,232,.25);border-color:var(--brand)}

.btn-primary{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;padding:.6rem .9rem;background:var(--brand);color:#fff;border-radius:10px;font-weight:700;border:1px solid var(--brand)}
.btn-primary:hover{background:var(--brand-600)}
.btn-light{display:inline-flex;justify-content:center;align-items:center;padding:.6rem .9rem;background:#f1f5f9;border:1px solid var(--bd);border-radius:10px;color:#0f172a}

/* آکاردئون فیلتر */
.acc{border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:#fff}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(90deg,#f0f9ff,#e0f7fa);font-weight:800;color:#334155}
.acc-head i{transition:transform .25s ease}
.acc.open .acc-head i{transform:rotate(180deg)}
.acc-body{padding:1rem;display:none}
.acc.open .acc-body{display:block}

/* گزینه‌های ویژگی */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;max-height:11rem;overflow:hidden;transition:max-height .3s ease}
.chips.expanded{max-height:none}
.chip-opt{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border:1px solid var(--bd);border-radius:10px;background:#fff;font-size:.85rem;cursor:pointer}
.chip-opt input{accent-color:var(--brand)}
.showmore{margin-top:.6rem;border:1px dashed var(--brand);background:#eaf7fd;color:#0f172a;border-radius:10px;padding:.45rem .65rem;font-size:.85rem}
.showmore:hover{background:#def3fb}

/* ===== مرتب‌سازی ===== */

.sortbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;background:var(--bg);border:1px solid var(--bd);border-radius:14px;padding:.6rem .75rem}
/* ==== Sort pills: horizontal scroll on mobile ==== */
@media (max-width: 1024px){
  .sort-actions{
    display:block;                 /* به‌جای wrap */
    overflow-x:auto;
    white-space:nowrap;
    padding-bottom:.25rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sort-actions::-webkit-scrollbar{ display:none; }
  .sort-actions .pill{ display:inline-flex; margin-inline-end:.4rem; }
}

.sortbar .title{color:#475569;font-weight:700}
.sort-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{padding:.45rem .9rem;border:1px solid var(--bd);border-radius:999px;background:#fff;color:#334155}
.pill.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ===== کارت محصول ===== */
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 1px 0 rgba(2,6,23,.03);transition:transform .15s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(2,6,23,.06)}
.badge{position:absolute;top:.5rem;left:.5rem;z-index:2;background:#ef4444;color:#fff;border-radius:999px;padding:.2rem .5rem;font-size:.75rem;font-weight:800}

.thumb{display:flex;align-items:center;justify-content:center;min-height:11rem;background:#fff;border-bottom:1px solid var(--bd)}
.thumb img{max-height:9.5rem;max-width:100%;object-fit:contain;display:block}

.body{display:flex;flex-direction:column;gap:.5rem;padding:.8rem}
.title{color:var(--ink);font-weight:700;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{margin-top:.25rem}
.price-old{color:#94a3b8;font-size:.8rem;text-decoration:line-through}
.price-final{color:#059669;font-size:1rem;font-weight:800}
.price-final span,.price-old span{font-weight:600;font-size:.85em}
.price-inquiry{display:inline-flex;align-items:center;justify-content:center;padding:.35rem .6rem;border:1px solid var(--brand);color:var(--brand);background:#eaf7fd;border-radius:10px;font-weight:800}

.btn-cta{margin-top:.35rem;display:flex;align-items:center;justify-content:center;padding:.55rem;border-radius:10px;background:var(--brand);color:#fff;font-weight:700}
.btn-cta:hover{background:var(--brand-600)}

.empty{background:#fff;border:1px dashed var(--bd);padding:2rem;border-radius:14px;text-align:center;color:#64748b}

/* ===== صفحه‌بندی ===== */
.pag-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:.5rem}
.pag-info{color:#64748b;font-size:.9rem}
.pagination{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center}
.pag-btn{padding:.45rem .8rem;border:1px solid var(--bd);border-radius:10px;background:#fff}
.pag-btn.disabled{opacity:.5;pointer-events:none}
.pag-num{padding:.45rem .8rem;border:1px solid var(--bd);border-radius:10px;background:#fff}
.pag-num.current{background:var(--brand);border-color:var(--brand);color:#fff}
.pag-ellipsis{color:#94a3b8}

/* ===== توضیح دسته ===== */
.cat-desc{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bd)}
.cat-desc-title{text-align:center;color:var(--ink);font-weight:800;font-size:1.25rem;margin-bottom:.5rem}
.cat-desc-body{max-width:48rem;margin-inline:auto}

/* ===== کانتینر کلی ===== */
.cat-wrap{--tw-ring-color:rgba(34,193,232,.25)}

/* تصویر کارت درشت‌تر و تمیز */
.card .thumb{
  background:#fff!important;
  border-bottom:1px solid var(--bd)!important;
  min-height:18rem!important;     /* دسکتاپ بزرگ‌تر */
  aspect-ratio:4/3!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.card .thumb img{
  width:100%!important;height:100%!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;display:block!important;background:transparent!important;
}
@media (max-width:640px){
  .card .thumb{ min-height:22rem!important; aspect-ratio:1/1!important; }
}

/* ===== نمایش/عدم نمایش سایدبار ===== */
#filtersAside{ display:none; }            /* موبایل پیش‌فرض پنهان */
@media (min-width:1025px){
  #filtersAside{ display:block !important; }
  #filtersOpen{ display:none !important; }  /* دکمه فیلتر در دسکتاپ نباشد */
  #filtersPanel, #filtersBackdrop{ display:none !important; }
}

/* ===== پنل فول‌اسکرین موبایل ===== */
#filtersBackdrop.hidden{ display:none; }
#filtersBackdrop{ /* روی موبایل/تبلت */
  display:block; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
#filtersBackdrop.show{ opacity:1; pointer-events:auto; }

#filtersPanel{
  position:fixed; inset:0; z-index:70; background:#fff;
  display:none; /* با JS باز می‌شود */
  overflow:auto; -webkit-overflow-scrolling:touch;
}
#filtersPanel.is-open{ display:block; }

/* Header */
.fp-header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  height:52px; padding:0 10px;
  background:linear-gradient(180deg,#f8fafc,#fff 86%);
  border-bottom:1px solid #eef2f7;
}
.fp-title{ font-weight:800; color:#334155; }
.fp-close{
  position:absolute; inset-inline-start:10px; top:8px;
  width:36px; height:36px; border-radius:10px; border:0; background:#f1f5f9; font-size:22px; line-height:36px;
}

/* Body */
.fp-body{ padding:12px 12px 80px; } /* جای اکشن‌بار پایین */

/* Footer actions (sticky bottom) */
.fp-footer{
  position:fixed; inset-inline:0; bottom:0; z-index:3;
  display:flex; gap:8px; padding:10px; background:#fff; border-top:1px solid #eef2f7;
}
.fp-btn{ flex:1 1 0; text-align:center; }
/* ==== Mobile-only filters panel: FULL SCREEN ==== */
@media (max-width: 1024px){
  /* خود پنل: تمام‌صفحه و اسلاید از راست */
  #filtersPanel{
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #fff;
    display: none;                  /* پیش‌فرض پنهان؛ JS کلاس‌ها را می‌زند */
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
    overflow: hidden;               /* اسکرول داخل .fp-body */
  }
  #filtersPanel.is-open{ transform: translateX(0); display:flex; }

  /* بک‌دراپ */
  #filtersBackdrop{
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(2,6,23,.55);
    display: none;
  }
  #filtersBackdrop.show{ display:block; }

  /* هدر بالای پنل */
  .fp-header{
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 14px 16px;
    background: linear-gradient(180deg,#f8fafc,#ffffff 80%);
    border-bottom: 1px solid #eef2f7;
  }
  .fp-title{ font-weight: 800; color:#0f172a; }

  /* دکمه ضربدر */
  .fp-close{
    position: absolute; inset-inline-start: 10px; top: 8px;
    width: 36px; height: 36px;
    border: 0; background: #f3f4f6; border-radius: 10px;
    font-size: 22px; line-height: 1; color:#334155; cursor:pointer;
  }
  .fp-close:active{ transform: scale(.98); }

  /* بدنه اسکرولی */
  .fp-body{
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
  }

  /* فوتر چسبان پایین با دکمه‌ها */
  .fp-footer{
    position: sticky; bottom: 0; z-index: 1;
    display: flex; gap: .5rem;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #eef2f7;
  }
  .fp-btn{ flex:1 1 0; text-align:center; }
}

/* دسکتاپ: مطمئن شو سایدبار همیشه پیداست */
@media (min-width:1025px){
  #filtersAside{ display:block; }
}
/* ==== Mobile Filters: full-screen, above everything ==== */
@media (max-width: 1024px){
  /* خود پنل تمام‌صفحه؛ روی همهٔ لایه‌های سایت */
  #filtersPanel{
    position: fixed;
    inset: 0;
    z-index: 2147482002;            /* خیلی بالاتر از هدر/تب‌بار */
    background: #fff;
    display: none;                  /* پیش‌فرض پنهان */
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
    overflow: hidden;               /* اسکرول فقط در .fp-body */
  }
  #filtersPanel.is-open{ display:flex; transform: translateX(0); }

  /* بک‌دراپ تیره زیر پنل */
  #filtersBackdrop{
    position: fixed;
    inset: 0;
    z-index: 2147482001;
    background: rgba(2,6,23,.55);
    display: none;
  }
  #filtersBackdrop.show{ display:block; }

  /* هدر داخلی پنل */
  .fp-header{
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 12px 16px;
    background: linear-gradient(180deg,#f8fafc,#ffffff 80%);
    border-bottom: 1px solid #eef2f7;
  }
  .fp-title{ font-weight: 800; color:#0f172a; }

  /* دکمه ضربدر */
  .fp-close{
    position: absolute; inset-inline-start: 10px; top: 8px;
    width: 36px; height: 36px; border: 0; cursor: pointer;
    background: #f3f4f6; border-radius: 10px;
    font-size: 22px; line-height: 1; color:#334155;
  }
  .fp-close:active{ transform: scale(.98); }

  /* بدنهٔ اسکرولی */
  .fp-body{
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
    /* فضای پایین برای اینکه پشت تب‌بار/فوتر نرود */
    --fp-footer-h: 64px;
    padding-bottom: calc(var(--fp-footer-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  /* فوتر چسبان پایین با دکمه‌ها */
  .fp-footer{
    position: sticky; bottom: 0; z-index: 1;
    display: flex; gap: .5rem;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #eef2f7;
    min-height: var(--fp-footer-h);
    align-items: center;
  }
  .fp-btn{ flex:1 1 0; text-align:center; }
}

/* مرتب‌سازی: اسکرول افقی در موبایل */
@media (max-width: 1024px){
  .sort-actions{
    display:block;
    overflow-x:auto; white-space:nowrap;
    padding-bottom:.25rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sort-actions::-webkit-scrollbar{ display:none; }
  .sort-actions .pill{ display:inline-flex; margin-inline-end:.4rem; }
}

/* دسکتاپ: سایدبار همیشه قابل‌مشاهده بماند */
@media (min-width:1025px){
  #filtersAside{ display:block; }
}
/* === Category page: wider container like Technolife === */
@media (min-width: 1025px){
  /* عرض کلی سکشن دسته‌بندی (container) */
  .cat-wrap{
    max-width: 1320px !important;   /* حدود تکنولایف؛ می‌تونی 1280/1360 کنی */
  }
  /* فاصله کارت‌ها کمی بیشتر و 4 ستونه بماند */
  .lg\:col-span-3 > .grid{
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1.5rem; /* 24px */
  }
}

/* اگر صفحه‌نمایش‌های خیلی عریض داری و می‌خوای باز هم کمی عریض‌تر شود: */
@media (min-width: 1536px){
  .cat-wrap{ max-width: 1440px !important; }
}
/* === Align CTA button at the bottom of every card === */
.card{ display:flex; flex-direction:column; }
.card .body{ display:flex; flex-direction:column; gap:.5rem; flex:1 1 auto; }
.card .btn-cta{ margin-top:auto; }  /* دکمه را به کف کارت فشار بده */
/* ===== Desktop-only fancy hover for product cards ===== */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px){
  .card{
    border: 1px solid var(--bd);
    box-shadow: 0 1px 0 rgba(2,6,23,.03);
    transition:
      transform .18s ease,
      box-shadow .22s ease,
      border-color .22s ease;
    will-change: transform, box-shadow, border-color;
  }

  .card:hover,
  .card:focus-within{
    transform: translateY(-4px);
    border-color: var(--brand);
    /* حلقه‌ی درخشان لطیف (هاله) + سایه ملایم */
    box-shadow:
      0 14px 34px rgba(2,6,23,.10),
      0 0 0 3px rgba(34,193,232,.20) inset,
      0 0 0 2px rgba(34,193,232,.08);
  }

  /* کمی زنده شدن تصویر روی هاور */
  .card .thumb img{
    transition: transform .25s ease;
  }
  .card:hover .thumb img{
    transform: scale(1.02);
  }
}

/* دسترس‌پذیری: با Tab هم حلقه‌ی آبی دیده شود */
.card:focus-within{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(34,193,232,.25) inset,
    0 0 0 2px rgba(34,193,232,.10);
  border-color: var(--brand);
}
/* Sticky sidebar offset tuned by header height */
/* Sticky sidebar offset tuned by site header height */
@media (min-width: 1024px){
  .filters{
    position: sticky;
    top: calc(var(--header-h, 64px) + 16px); /* ارتفاع هدر + کمی فاصله تنفسی */
  }
}
/* استعلام قیمت: قرص جذاب و کاملاً وسط کارت */
.price-inquiry{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .92rem;
  line-height: 1;
  color: #0ea5e9;                    /* آبی تُن برند */
  background: linear-gradient(180deg,#eaf7fd,#dff3fb);
  border: 1px solid #bfe9f9;
  box-shadow: 0 6px 18px rgba(34,193,232,.18), 0 1px 0 rgba(15,23,42,.03);
  margin: .3rem auto 0;              /* *** این خط باعث وسط‌چین شدن می‌شود *** */
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.price-inquiry::before{
  content: "";                      /* FontAwesome (fa-clipboard-question / مشابه) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .95em;
  opacity: .9;
}
.price-inquiry:hover{
  background: linear-gradient(180deg,#eaf7fd,#cfeeff);
  box-shadow: 0 10px 26px rgba(34,193,232,.25), 0 2px 0 rgba(15,23,42,.04);
  transform: translateY(-1px);
}
/* Badge تخفیف: پالس هاله‌ای + pop نرم روی hover کارت */
.badge{
  position:absolute; top:.5rem; left:.5rem; z-index:2;
  background:#ef4444; color:#fff;
  border-radius:999px; padding:.22rem .55rem;
  font-size:.78rem; font-weight:800;
  box-shadow: 0 8px 18px rgba(239,68,68,.25);
  transform: translateZ(0);
  animation: badgePulse 2.8s ease-in-out infinite;
}
.card:hover .badge{
  animation: badgePulse 1.8s ease-in-out infinite, badgePop .18s ease-out 1;
}

/* هاله‌ی تنفسی */
@keyframes badgePulse{
  0%,100%{ box-shadow: 0 8px 18px rgba(239,68,68,.20), 0 0 0 0 rgba(239,68,68,.0); }
  50%   { box-shadow: 0 10px 24px rgba(239,68,68,.28), 0 0 0 6px rgba(239,68,68,.12); }
}
/* pop خیلی کوتاه وقتی کارت hover می‌شود */
@keyframes badgePop{
  from{ transform: scale(.96); }
  to  { transform: scale(1); }
}

/* احترام به کاربرانی که انیمیشن را دوست ندارند */
@media (prefers-reduced-motion: reduce){
  .badge{ animation: none; }
}
/* بدنه کارت ستونِ منعطف: عنوان و قیمت بالا؛ CTA همواره پایین */
.card .body{
  display:flex; flex-direction:column;
  gap:.5rem; padding:.8rem;
}
.card .btn-cta{
  margin-top:auto;                    /* کلیدِ هم‌تراز شدن دکمه‌ها */
}
/* =========================
   Filters – polished UI
   ========================= */

/* خود سایدبار: کارت تمیز + استیکی در دسکتاپ */
.filters{
  position: sticky;
  top: calc(var(--header-sticky-h, 72px) + 12px); /* زیر هدر استیکی اصلی */
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06), 0 1px 0 rgba(2,6,23,.03);
  padding: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.filters:hover{
  border-color: rgba(34,193,232,.45);
  box-shadow: 0 18px 36px rgba(2,6,23,.08), 0 1px 0 rgba(2,6,23,.04);
}

/* ردیف‌های ساده */
.filters .form-row{
  display:flex; flex-direction:column; gap:.45rem;
}

/* اینپوت متن بالای سایدبار (جستجوی عنوان) با آیکن */
.filters .form-row .input{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat 10px 50% / 18px;
  padding-inline-start: 36px;
}

/* آکاردئون‌ها: کارت‌های شفاف و خوش‌دست */
.acc{
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,#fff, #fbfdff 70%);
  box-shadow: 0 1px 0 rgba(2,6,23,.02);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.acc:hover{ border-color: rgba(34,193,232,.35); box-shadow: 0 6px 20px rgba(2,6,23,.06); }

.acc-head{
  width: 100%;
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  padding:.8rem 1rem;
  background: linear-gradient(90deg,#f0f9ff,#e8f8fc);
  font-weight:800; color:#334155;
  border-bottom: 1px solid #eef2f7;
}
.acc-head i{
  inline-size: 28px; block-size: 28px;
  display:inline-grid; place-items:center;
  border-radius: 8px;
  background: #e6f6fb;
  color: #1e88a7;
  transition: transform .25s ease, background .2s ease;
}
.acc.open .acc-head i{ transform: rotate(180deg); background:#d9f2f9; }

.acc-body{
  padding: .85rem 1rem;
  display: none; /* مطابق JS */
}

/* سرچ داخل هر ویژگی با آیکن */
.acc-body [data-spec-search]{
  border:1px solid var(--bd);
  border-radius:10px;
  padding:.55rem .75rem .55rem 2.1rem;
  font-size:.88rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat .6rem 50%/16px;
}
.acc-body [data-spec-search]:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34,193,232,.18);
}

/* لیست گزینه‌ها: شبکه‌ی قرصی، قابل اسکرول */
.chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  max-height: 12.5rem; overflow:auto;
  scrollbar-width: thin;
}
.chips::-webkit-scrollbar{ height:10px; width:10px; }
.chips::-webkit-scrollbar-thumb{ background:#dbeafe; border-radius:999px; }

/* چیپ ویژگی: حالت پیش‌فرض */
.chip-opt{
  position: relative;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .7rem;
  border:1px solid var(--bd);
  border-radius: 999px;
  background:#fff;
  font-size:.86rem;
  cursor:pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .12s ease;
}
.chip-opt:hover{
  border-color:#cfe8f5;
  background:#f7fcff;
  transform: translateY(-1px);
}
.chip-opt input{ appearance:auto; accent-color: var(--brand); }

/* انتخاب‌شده: با :has پشتیبانی مدرن – بسیار تمیز */
.chip-opt:has(input:checked){
  border-color: var(--brand);
  background: linear-gradient(180deg,#ebfbff,#e7f9ff);
  box-shadow: 0 6px 16px rgba(34,193,232,.16);
  color:#0b5672;
  font-weight:700;
}

/* دکمه‌ی «نمایش بیشتر/کمتر» */
.showmore{
  margin-top:.6rem;
  border:1px dashed var(--brand);
  background:#eaf7fd;
  color:#0f172a;
  border-radius:10px;
  padding:.48rem .7rem;
  font-size:.86rem;
  transition: background .2s ease, transform .12s ease;
}
.showmore:hover{ background:#def3fb; transform: translateY(-1px); }

/* فوکِس دسترس‌پذیر */
.chip-opt:focus-within,
.acc-head:focus-visible,
.input:focus,
.showmore:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* سکشن اعمال/حذف: تمیز و قابل چسبیدن در موبایل */
.filters .pt-2.border-t{
  padding-top:.8rem;
  margin-top:.2rem;
}
@media (max-width: 1024px){
  /* در پنل موبایل: نوار عملیات ثابت زیر */
  #filtersPanel .pt-2.border-t{
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.85), #fff 60%);
    backdrop-filter: blur(6px);
    border-top: 1px solid #eef2f7;
    padding: .8rem;
    margin: 0;
    box-shadow: 0 -8px 20px rgba(2,6,23,.06);
  }
}

/* برچسب‌های کوچک */
.label, .label-sm{ color: #6b7280; }

/* احترام به کاربرانی که انیمیشن نمی‌خوان */
@media (prefers-reduced-motion: reduce){
  .acc, .chip-opt, .showmore{ transition: none; }
}
/* === Desktop-only: sticky sidebar with internal scroll === */
@media (min-width: 1025px){
  .filters{
    /* همان استیکی فعلی + سقف ارتفاع بر اساس ارتفاع هدر */
    position: sticky;
    top: calc(var(--header-sticky-h, 72px) + 12px);

    /* اسکرول داخلی: ارتفاع از ارتفاع دید کمتر شود تا همیشه جا داشته باشد */
    max-height: calc(100dvh - var(--header-sticky-h, 72px) - 24px);

    /* پیش‌فرض: اسکرول را پنهان کن تا ظاهر تمیز بماند */
    overflow: hidden;

    /* کمی فاصله پایین تا آخرین آیتم‌ها چسب نخورند */
    padding-bottom: 10px;

    /* برای iOS/تاچ */
    -webkit-overflow-scrolling: touch;
  }

  /* وقتی ماوس روی سایدبار است یا داخلش فوکوس هست: اسکرول فعال شود */
  .filters:hover,
  .filters:focus-within{
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* استایل اسکرول‌بار (دلخواه) */
  .filters::-webkit-scrollbar{ width: 10px; }
  .filters::-webkit-scrollbar-thumb{
    background: #dbeafe;
    border-radius: 999px;
  }
  .filters::-webkit-scrollbar-track{ background: #f8fafc; }
}

/* روی دستگاه‌های تاچ (بدون hover) همیشه اسکرول داخلی فعال باشد */
@media (pointer: coarse) and (min-width: 1025px){
  .filters{ overflow: auto; }
}
/* === Discount badge: pop-in + glow + sheen + hover wiggle ================= */

/* پایه‌ی ظاهریِ تمیزتر */
.card .badge{
  position:absolute; top:.55rem; left:.55rem; z-index:5;
  padding:.25rem .6rem;
  border-radius:999px;
  font-weight:900; font-size:.78rem; letter-spacing:.2px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color:#fff;
  box-shadow: 0 6px 18px rgba(220,38,38,.28), 0 1px 0 rgba(0,0,0,.06);
  transform-origin: left top;
  will-change: transform, box-shadow, opacity;
  isolation: isolate; /* برای شینِ بالاش */
}

/* 1) انیمیشن ورود (pop & bounce) وقتی کارت رندر می‌شود */
.card .badge{
  animation: badge-pop .58s cubic-bezier(.2,1.1,.2,1) .08s both;
}

@keyframes badge-pop{
  0%   { transform: translate(-6px,-8px) rotate(-8deg) scale(.65); opacity:.0; filter:blur(1px); }
  60%  { transform: translate(0,0) rotate(0)     scale(1.06); opacity:1;   filter:blur(0); }
  84%  { transform: translate(0,0) rotate(0.6deg) scale(.98); }
  100% { transform: translate(0,0) rotate(0)      scale(1); }
}

/* 2) شین ملایم (برقِ گذرا) روی خود بج */
.card .badge::after{
  content:""; position:absolute; inset:-2px;
  background:
    linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  border-radius:inherit;
  transform: translateX(-140%) skewX(-12deg);
  animation: badge-sheen 2.8s ease-in-out 1.2s infinite;
  pointer-events:none; z-index:-1;
}
@keyframes badge-sheen{
  0%, 25%   { transform: translateX(-140%) skewX(-12deg); opacity:.0; }
  35%       { opacity:.9; }
  60%       { transform: translateX(60%) skewX(-12deg);  opacity:.0; }
  100%      { transform: translateX(60%) skewX(-12deg);  opacity:.0; }
}

/* 3) هاله‌ی نبض‌دار خیلی خفیف تا توجه جلب شود (نه زننده) */
.card .badge{
  box-shadow:
    0 6px 18px rgba(220,38,38,.28),
    0 0 0 0 rgba(239,68,68,.0);
  animation:
    badge-pop .58s cubic-bezier(.2,1.1,.2,1) .08s both,
    badge-pulse 3.2s ease-in-out 1.3s infinite;
}
@keyframes badge-pulse{
  0%, 100%{ box-shadow: 0 6px 18px rgba(220,38,38,.28), 0 0 0 0 rgba(239,68,68,.0); }
  55%    { box-shadow: 0 10px 26px rgba(220,38,38,.36), 0 0 0 6px rgba(239,68,68,.12); }
}

/* 4) روی هاور کارت: یک ویگلِ کوتاه و لوکس */

/* 5) احترام به کاربرانی که Reduce Motion روشن دارند */
@media (prefers-reduced-motion: reduce){
  .card .badge,
  .card .badge::after{
    animation: none !important;
    transform: none !important;
    box-shadow: 0 6px 18px rgba(220,38,38,.28);
  }
}
/* غیرفعال‌سازی ویگل/تغییر روی هاور کارت برای بج تخفیف */
/* موبایل: کارت فشرده‌تر و جمع‌وجور */
@media (max-width: 640px){
  .card .thumb{
    min-height: 15rem !important;   /* قبلاً 22rem */
    aspect-ratio: 4 / 3 !important;  /* از مربع به 4:3 برای کاهش ارتفاع */
  }
  .card .body{
    padding: .7rem !important;       /* کمتر از .8rem */
  }
  .card .title{
    font-size: .92rem !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 2 !important; /* حداکثر دو خط */
  }
  .card .price{ margin-top: .2rem !important; }
  .card .price-final{ font-size: .95rem !important; }
  /* اگر خیلی تنگ شد، قیمت قدیمی را در موبایل پنهان کن */
  .card .price-old{ display: none !important; }

  /* دکمه‌ها کوچیک‌تر ولی خوانا */
  .card .btn-cta{
    padding: .5rem !important;
    font-size: .9rem !important;
    margin-top: .45rem !important;
  }
  .card .price-inquiry{
    padding: .4rem .6rem !important;
    font-size: .9rem !important;
  }
}
.cat-desc-body { line-height: 1.9; color:#334155; }
.cat-desc-body h2, .cat-desc-body h3 { margin: .75rem 0 .5rem; font-weight: 800; }
.cat-desc-body p { margin: .5rem 0; }
.cat-desc-body img { max-width:100%; height:auto; border-radius:8px; }
.cat-desc-body ul, .cat-desc-body ol { padding-inline-start: 1.2rem; margin:.5rem 0; }