/* صفحه‌های کاتالوگ (فهرست/دسته/برند/کالکشن/فروش ویژه/جست‌وجو)
   قواعد هاور و رفتار بازشوی فیلترها — استایل اصلی درون‌خطی و برابر طرح است. */

.hh-noscroll{scrollbar-width:none}
.hh-noscroll::-webkit-scrollbar{display:none}

/* ── کارت محصول (همان کارت طرح) ─────────────────────────────── */
/* ⚠️ هاور پشت (hover: hover) قفل شد. روی اندروید (به‌ویژه سامسونگ
   اینترنت) اولین ضربه روی هر جای کارت، حالت :hover را می‌چسباند: عنوان
   سبز می‌شد و کل کارت «انتخاب‌شده» به نظر می‌رسید، و ضربه‌ی بعدی فقط
   صرفِ پاک کردن همان حالت می‌شد — یعنی کاربر باید دوبار می‌زد تا محصول
   باز شود. دقیقاً همان چیزی که مالک گزارش کرد. */
@media (hover: hover) and (pointer: fine) {
  .hh-card:hover .hh-card-alt{opacity:1!important;transform:scale(1.04)}
  .hh-card:hover .hh-card-title{color:var(--brand)}
}
.hh-card .hh-wish:hover{background:#fff}

/* ── کاشی زیردسته ───────────────────────────────────────────── */
.hh-sub:hover{border-color:var(--brand)!important;transform:translateY(-2px)}

/* ── تراشه‌ها ───────────────────────────────────────────────── */
.hh-chip:hover{border-color:var(--brand)!important;color:var(--brand)!important;text-decoration:none}

/* ── نوار فیلتر بازشو ───────────────────────────────────────── */
.hh-fbar{position:sticky;top:0;z-index:25;background:var(--page);margin:20px 0 0;padding:14px 0;border-bottom:1px solid var(--bd)}
.hh-dd{position:relative}
.hh-dd>summary{list-style:none;height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;border:1px solid var(--bd2);border-radius:0;background:var(--surf);color:var(--tx);font-family:inherit;font-size:12.5px;font-weight:400;cursor:pointer;white-space:nowrap;user-select:none}
.hh-dd>summary::-webkit-details-marker{display:none}
.hh-dd>summary svg{transform:rotate(0);opacity:.6;transition:transform .18s}
.hh-dd[open]>summary svg{transform:rotate(180deg)}
.hh-dd.is-on>summary{border-color:var(--brand);background:var(--brand05);color:var(--brand7);font-weight:500}
.hh-dd__panel{position:absolute;top:46px;inset-inline-start:0;width:236px;background:var(--surf);border:1px solid var(--bd);border-radius:0;box-shadow:var(--sh-lg);padding:14px;z-index:5}
.hh-dd__row{display:flex;align-items:center;gap:9px;height:34px;cursor:pointer;font-size:12.5px;color:var(--tx2);text-decoration:none}
.hh-dd__row:hover{color:var(--tx);text-decoration:none}
.hh-dd__row input{position:absolute;opacity:0;pointer-events:none}
.hh-dd__box{width:18px;height:18px;border-radius:0;border:1.5px solid var(--n300);background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hh-dd__box svg{display:none}
.hh-dd__row.is-on{color:var(--tx)}
.hh-dd__row.is-on .hh-dd__box{border-color:var(--brand);background:var(--brand)}
.hh-dd__row.is-on .hh-dd__box svg{display:block}

/* گزینه‌ی سایز داخل بازشو */
.hh-sizeopt{min-width:46px;height:36px;border-radius:0;border:1px solid var(--n300);background:transparent;color:var(--tx);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:500;cursor:pointer}
.hh-sizeopt input{position:absolute;opacity:0;pointer-events:none}
.hh-sizeopt.is-on{border-color:var(--brand);background:var(--brand05);color:var(--brand7);font-weight:500}

/* گزینه‌ی رنگ داخل بازشو */
.hh-coloropt{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.hh-coloropt input{position:absolute;opacity:0;pointer-events:none}
.hh-coloropt .hh-coloropt__dot{width:28px;height:28px;border-radius:999px;border:1px solid var(--n300);outline:none;outline-offset:3px}
.hh-coloropt.is-on .hh-coloropt__dot{outline:2px solid var(--brand)}

/* کلید موجودی/تخفیف */
.hh-switch{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12.5px;color:var(--tx)}
.hh-switch input{position:absolute;opacity:0;pointer-events:none}
.hh-switch__track{width:44px;height:24px;border-radius:999px;background:var(--n200);position:relative;transition:background .15s;flex:0 0 auto}
.hh-switch__knob{position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:var(--sh-xs);transition:inset-inline-start .15s}
.hh-switch.is-on .hh-switch__track{background:var(--brand)}
.hh-switch.is-on .hh-switch__knob{inset-inline-start:23px}

/* ── صفحه‌بندی ──────────────────────────────────────────────── */
.hh-pgbtn{min-width:40px;height:40px;padding:0 8px;border-radius:0;border:1px solid var(--bd2);background:transparent;color:var(--tx2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:400;text-decoration:none}
.hh-pgbtn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.hh-pgbtn.is-cur{border-color:var(--brand);background:var(--brand);color:#fff;font-weight:500}
.hh-pgbtn.is-cur:hover{color:#fff}
.page-sale .hh-pgbtn.is-cur{border-color:var(--brand)!important;background:var(--brand)!important}

/* متن پنل‌نوشته (سئو/معرفی) */
.hh-prose p{margin:0 0 10px;font-size:14px;line-height:1.9;color:var(--tx2)}
.hh-prose p:last-child{margin:0}
.hh-prose h2{margin:0 0 10px;font-size:16px;font-weight:600}
.hh-prose h3{margin:16px 0 8px;font-size:14px;font-weight:600}

/* ── کارت برند در فهرست برندها ─────────────────────────────── */
.hh-brandcard:hover{border-color:var(--brand)!important;text-decoration:none}
.hh-social:hover{background:var(--brand05);color:var(--brand);border-color:var(--brand)}

/* موبایل: شبکه‌ها جمع‌تر */
@media (max-width:1119px){
  .hh-grid-products{grid-template-columns:repeat(2,1fr)!important;gap:14px!important}
  .hh-grid-3{grid-template-columns:1fr!important}
  .hh-grid-sub{grid-template-columns:repeat(3,1fr)!important}
}

/* ⚠️ روی گوشیِ ۳۷۵ پیکسلی، سه ستون یعنی کاشیِ ۱۰۵ پیکسلی: عنوانِ
   «پیراهن آستین‌کوتاه» دو خط می‌شکست و روی شمارِ محصول می‌افتاد. دو ستون
   همان اطلاعات را خوانا نشان می‌دهد. فقط کاشی‌های تصویری؛ تراشه‌های
   دسته در اورلیِ جست‌وجو که همین کلاس را دارند دست نمی‌خورند. */
@media (max-width:719px){
  .hh-grid-sub--tiles{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  /* ⚠️ دو ستون بدون کوتاه‌کردن کاشی یعنی پنج ردیفِ ۲۱۰ پیکسلی پیش از
     رسیدن به خودِ محصول‌ها. نسبت پهن‌تر همان خوانایی را با نصف اسکرول
     می‌دهد. */
  .hh-grid-sub--tiles > a{aspect-ratio:1/0.72!important}
}

/* ── صفحه‌ی جست‌وجو: دقیقاً یک فیلد جست‌وجو در هر عرض ───────────────
   صفحه نوار چسبانِ خودش را دارد (با دکمه‌ی «لغو» و فوکوس خودکار) و هدر
   هم فیلد دارد. روی موبایل این دو زیر هم می‌نشستند — دو کادر هم‌شکل با
   یک متن. روی موبایل نوارِ صفحه می‌ماند (لغو دارد) و روی دسکتاپ فیلدِ
   هدر (جایگاه همیشگی‌اش). */
@media (max-width:1119px){
  body.page-search .hh-hdr-search{display:none!important}
}
@media (min-width:1120px){
  body.page-search .hh-search-sticky{display:none!important}
}

/* ── اسلایدر قیمت دو‌دستگیره (بازه‌ی «از … تا …») ────────────────────
   دو input[type=range] روی هم؛ خط و پرشدگی با span کشیده می‌شود و فقط
   دستگیره‌ها کلیک‌پذیرند. بدون JS همان دو رنج ساده می‌مانند (fallback). */
.hh-range2{position:relative;height:28px;display:flex;align-items:center}
.hh-range2__track{position:absolute;inset-inline:8px;top:50%;height:4px;transform:translateY(-50%);background:var(--n200);border-radius:0;overflow:hidden}
.hh-range2__fill{position:absolute;top:0;bottom:0;background:var(--brand)}
.hh-range2 input[type=range]{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none}
.hh-range2 input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hh-range2 input[type=range]::-webkit-slider-runnable-track{background:transparent;height:4px}
.hh-range2 input[type=range]::-moz-range-track{background:transparent;height:4px}
.hh-range2 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:-6px;border-radius:999px;background:var(--brand);border:2px solid var(--surf);box-shadow:0 1px 3px rgba(20,16,10,.25);cursor:pointer}
.hh-range2 input[type=range]::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:999px;background:var(--brand);border:2px solid var(--surf);box-shadow:0 1px 3px rgba(20,16,10,.25);cursor:pointer}
/* بدون جاوااسکریپت: دو رنج زیر هم تا هر دو قابل‌استفاده باشند */
.no-js .hh-range2{height:auto;flex-direction:column;gap:6px}
.no-js .hh-range2 input[type=range]{position:static;transform:none;pointer-events:auto;accent-color:var(--brand);-webkit-appearance:auto;appearance:auto}
.no-js .hh-range2__track{display:none}

/* ── نوار دو دکمه‌ای فیلتر/مرتب‌سازی موبایل (طرح) ────────────────────
   فقط زیر ۸۶۰ و فقط وقتی جاوااسکریپت هست (اسکریپت hidden را برمی‌دارد). */
.hh-fbar-m { display: none; }
@media (max-width: 1119px) {
  .hh-fbar-m:not([hidden]) {
    display: flex; border: 1px solid var(--bd2); overflow: hidden; margin: 14px 0;
  }
  .hh-fbar-m > button {
    flex: 1; height: 48px; border: 0; background: var(--surf); cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--tx);
  }
  .hh-fbar-m > span { width: 1px; background: var(--bd2); }
  /* وقتی شیت هست، نوار فیلترِ دسکتاپ روی موبایل تکراری است. */
  .hh-fbar-m:not([hidden]) ~ .hh-fbar { display: none; }
}

/* شیت پایین‌صفحه (.hh-sheet) به store.css منتقل شد: صفحه‌ی محصول هم استفاده می‌کند. */

/* ── ضربه روی کارت و روی نقطه‌ی رنگ ───────────────────────────────────
   ⚠️ هایلایتِ پیش‌فرضِ لمس در اندروید، کلِ <a> کارت را رنگی می‌کند. چون
   نقطه‌ی رنگ داخل همان لینک است، زدنِ نقطه هم کل کارت را «انتخاب‌شده»
   نشان می‌داد. برداشتنِ هایلایت، خودِ لینک را از کار نمی‌اندازد؛ فقط آن
   بازخوردِ گمراه‌کننده را برمی‌دارد.

   ⚠️ touch-action: manipulation یعنی «این ضربه را برای زوم دوضربه‌ای نگه
   ندار» — همان تأخیری که ضربه‌ی روی نقطه‌ی رنگ را کند و بی‌جواب نشان
   می‌داد. */
.store .hh-card { -webkit-tap-highlight-color: transparent; }
.store .hh-swatch {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}

/* ⚠️ روی گوشی، خودِ قرصِ ۲۴ پیکسلی درست روی کفِ WCAG 2.5.8 بود و در عمل
   با شست خطا می‌خورد — همان شکایتِ «می‌زنم رو گردی، کل محصول سلکت
   می‌شود». ناحیه‌ی لمس با یک شبه‌عنصر بزرگ می‌شود، نه با عرض و ارتفاع:
   چیدمان یک پیکسل هم جابه‌جا نمی‌شود، فاصله‌ی ۳ پیکسلیِ بین نقطه‌ها هم
   دست‌نخورده می‌ماند، ولی سطح قابل ضربه از ۵۷۶ به ۱۰۸۰ پیکسل‌مربع
   می‌رسد. عرضِ ۲۷ دقیقاً گامِ بین دو نقطه است تا نواحی هم‌پوشانی نکنند
   و ضربه روی رنگِ بغلی ننشیند. */
@media (pointer: coarse) {
  .store .hh-swatch { position: relative; }
  .store .hh-swatch::after {
    content: ""; position: absolute;
    left: 50%; top: 50%; width: 27px; height: 40px;
    transform: translate(-50%, -50%);
  }
}

/* همان قاعده برای نقطه‌های اسلایدر بنر: آنجا border شفاف جواب نداد چون
   عرضِ inline (۸ پیکسل) با box-sizing: border-box کلِ حاشیه را می‌بلعد
   و ناحیه ۸ می‌ماند — با اندازه‌گیری روی خودِ سایت تأیید شد. */
@media (pointer: coarse) {
  .store .hh-dot { position: relative; }
  .store .hh-dot::after {
    content: ""; position: absolute;
    left: 50%; top: 50%; width: 30px; height: 34px;
    transform: translate(-50%, -50%);
  }
}

/* ── صفحه‌ی کالکشن (S4 / A7): بنر عریض + کاشی فعال در ریل دسته‌ها ────────── */
.hh-collbanner { margin-top: 10px; background: var(--n50); overflow: hidden; aspect-ratio: 1200 / 300; }
.hh-collbanner img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
@media (max-width: 719px) { .hh-collbanner { aspect-ratio: 16 / 7; margin-top: 6px; } }
/* کاشی انتخاب‌شده (?cat=) در ریل دسته‌های کالکشن */
.hh-subrail .hh-pc.is-on .hh-pc__img { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.hh-subrail .hh-pc.is-on .hh-pc__name { color: var(--brand7); font-weight: 700; }

.hh-more{min-height:44px;padding:10px 24px;background:var(--brand);border:1px solid var(--brand);color:#fff;cursor:pointer}.hh-more[hidden]{display:none}.hh-more:disabled{opacity:.6;cursor:wait}