/* =====================================================================
   store.css — سیستم مؤلفه‌های فروشگاه.
   رنگ‌ها و سایه‌ها همان توکن‌های store.base.css‌اند (عیناً از طراحی شما).
   اندازه‌ها هم از همان فایل طراحی برداشته شده: هدر ۵۶، نوار پایین ۵۶،
   گوشه‌ها صفر، سبز برند #3DA194.
   ===================================================================== */

.store { background: var(--page); color: var(--tx); }

/* ── چیدمان کلی ─────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
/* ⚠️ مرز ۶۴۰ با هیچ نمای طرح نمی‌خواند و حاشیه را ۱۲ می‌کرد؛
   اندازه‌گیری همه‌ی صفحات نشان داد حاشیه‌ی موبایل در طرح ۱۶ است
   و زیر ۶۴۰ هم تغییری نمی‌کند. */
@media (max-width: 719px) { .wrap { padding-inline: var(--ct-pad, 16px); } }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}.gap24{gap:24px}
.grow { flex: 1; min-width: 0; }
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.tx2 { color: var(--tx2); } .mut { color: var(--mut); }
.f11{font-size:11px}.f12{font-size:12px}.f13{font-size:13px}.f14{font-size:14px}.f15{font-size:15px}.f17{font-size:17px}.f20{font-size:20px}.f24{font-size:24px}
.b5{font-weight:500}.b6{font-weight:600}.b7{font-weight:700}.b8{font-weight:800}
.ltr { direction: ltr; }
.nowrap { white-space: nowrap; }
.hide-m { display: revert; } .only-m { display: none; }
@media (max-width: 1119px) { .hide-m { display: none !important; } .only-m { display: revert; } }

/* ── نوار اعلان بالای سایت ──────────────────────────────────────── */
.announce {
  background: var(--brand9); color: #fff; font-size: 12.5px;
  min-height: 34px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 6px 40px; position: relative;
}
.announce a { color: #fff; text-decoration: underline; }
.announce__x {
  position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: transparent; color: #fff; opacity: .75;
  display: flex; align-items: center; justify-content: center;
}

/* ── هدر ────────────────────────────────────────────────────────── */
/* ── هدر چسبان ────────────────────────────────────────────────────────
   جعبه‌ی چسبان (topbar نه، فقط سطر لوگو/جست‌وجو) داخل <header> است و
   sticky فقط تا انتهای جعبه‌ی پدرش می‌چسبد — یعنی عملاً هیچ‌وقت. با
   display:contents پدرِ چسبندگی خودِ body می‌شود و هدر مثل طرح (دسکتاپ و
   موبایل) بعد از رد شدن نوار اعلان بالا می‌ماند. */
body.store > header { display: contents; }

.hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--page); border-bottom: 1px solid var(--bd);
}
.hdr__bar { height: 56px; display: flex; align-items: center; gap: 8px; }
.hdr__logo { display: flex; align-items: center; gap: 8px; color: var(--tx); flex: none; }
.hdr__logo:hover { text-decoration: none; }
.hdr__icon {
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--tx);
  display: flex; align-items: center; justify-content: center; position: relative; flex: none;
}
.hdr__count {
  position: absolute; top: 6px; inset-inline-start: 6px; min-width: 16px; height: 16px;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ردیف دسته‌بندی دسکتاپ */
.hdr__nav { border-top: 1px solid var(--bd); }
.hdr__nav ul { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.hdr__nav ul::-webkit-scrollbar { display: none; }
.hdr__nav a {
  display: block; padding: 10px 12px; font-size: 13px; font-weight: 500;
  color: var(--tx2); white-space: nowrap; border-bottom: 2px solid transparent;
}
.hdr__nav a:hover { color: var(--brand); text-decoration: none; background: var(--surf2); }
.hdr__nav a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }

/* جست‌وجو */
.search { position: relative; flex: 1; max-width: 460px; }
.search input {
  width: 100%; height: 38px; padding: 0 36px 0 12px;
  border: 1px solid var(--bd2); background: var(--surf); color: var(--tx); font-size: 13px;
}
.search__go {
  position: absolute; inset-inline-end: 0; top: 0; width: 36px; height: 38px;
  border: 0; background: transparent; color: var(--mut);
}

/* ── نوار پایین موبایل ──────────────────────────────────────────── */
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: none;
  background: var(--page); border-top: 1px solid var(--bd);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 719px) { .tabbar { display: flex; } body.store { padding-bottom: 76px; } }
.tabbar {
  padding-top: 6px; align-items: flex-start;
  box-shadow: rgba(40, 30, 16, .07) 0 -8px 24px;
}
.tabbar a {
  flex: 1 1 0%; height: 56px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; font-size: 10.5px; color: var(--mut); position: relative;
}
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a:hover { text-decoration: none; }
.tabbar a[aria-current="page"] { color: var(--brand); font-weight: 700; }

/* ── دکمه‌ها ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 0;
  font-size: 13px; font-weight: 500; background: var(--surf2); color: var(--tx);
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { color: #fff; }
.btn--ghost { background: transparent; border-color: var(--bd2); color: var(--tx); }
.btn--danger { background: var(--dang); color: #fff; }
.btn--lg { height: 48px; font-size: 14px; padding: 0 22px; }
.btn--sm { height: 32px; font-size: 12px; padding: 0 10px; }
.btn--block { width: 100%; }
.btn--icon { width: 40px; padding: 0; }

/* ── فرم ────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--tx2); }
.field .hint { font-size: 11.5px; color: var(--mut); }
.input, .select, .textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--bd2);
  background: var(--surf); color: var(--tx); font-size: 13.5px; border-radius: 0;
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand05);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--dang); }
.err { color: var(--dang); font-size: 11.5px; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }

/* ── نشان‌ها ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px;
  font-size: 10.5px; font-weight: 700; line-height: 1.4; border-radius: 0;
}
.badge--new  { background: var(--brand); color: #fff; }
.badge--sale { background: var(--sale); color: #fff; }
.badge--gold { background: var(--gold); color: #fff; }
.badge--ok   { background: var(--ok50); color: var(--ok); }
.badge--warn { background: var(--warn50); color: var(--warn); }
.badge--dang { background: var(--dang50); color: var(--dang); }
.badge--info { background: var(--info50); color: var(--info); }
.badge--mut  { background: var(--n100); color: var(--n600); }

/* ── کارت محصول ────────────────────────────────────────────────── */
.grid-products {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px)  { .grid-products { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } }
@media (min-width: 1120px) { .grid-products { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.pcard { position: relative; display: flex; flex-direction: column; background: var(--surf); }
.pcard__link { color: inherit; display: block; }
.pcard__link:hover { text-decoration: none; }
.pcard__badges { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pcard__fav {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2;
  width: 32px; height: 32px; border: 0; background: rgba(255,255,255,.9); color: var(--n600);
  display: flex; align-items: center; justify-content: center;
}
.pcard__fav[aria-pressed="true"] { color: var(--sale); }
.pcard__body { padding: 8px 2px 2px; display: flex; flex-direction: column; gap: 5px; }
.pcard__title {
  font-size: 12.5px; font-weight: 500; color: var(--tx); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2lh;
}
.pcard__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price     { font-size: 14px; font-weight: 700; color: var(--tx); }
.price small { font-size: 10.5px; font-weight: 500; color: var(--mut); margin-inline-start: 2px; }
.price--old { font-size: 11.5px; font-weight: 500; color: var(--mut); text-decoration: line-through; }
.pcard__swatches { display: flex; gap: 4px; }
.swatch { width: 14px; height: 14px; border: 1px solid var(--bd2); flex: none; }
.swatch--sel { outline: 2px solid var(--brand); outline-offset: 1px; }
.pcard__rate { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--mut); }
.pcard--out .thumb { opacity: .5; }

/* ── استوری‌ها — طبق باگ‌لیست: بالای بنر و کلیک‌پذیر ───────────── */
.stories { display: flex; gap: 12px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; width: 64px; text-align: center; color: var(--tx); }
.story:hover { text-decoration: none; }
.story__ring {
  width: 64px; height: 64px; padding: 2px; background: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.story__ring--seen { background: var(--n300); }
.story__ring > * { width: 100%; height: 100%; background: var(--surf2); overflow: hidden; }
.story__label {
  font-size: 10.5px; margin-top: 5px; color: var(--tx2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── اسلایدر واقعی (باگ: «اسلایدر واقعی نیست») ─────────────────── */
.slider { position: relative; }
.slider__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; scroll-behavior: smooth;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { flex: 0 0 100%; scroll-snap-align: center; }
.slider__dots { display: flex; gap: 6px; justify-content: center; padding: 8px 0; }
.slider__dot { width: 7px; height: 7px; border: 0; background: var(--n300); padding: 0; }
.slider__dot[aria-current="true"] { background: var(--brand); width: 18px; }
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border: 0; background: rgba(255,255,255,.92); color: var(--n700);
  display: none; align-items: center; justify-content: center;
}
@media (min-width: 1120px) { .slider__arrow { display: flex; } }
.slider__arrow--prev { inset-inline-start: 8px; }
.slider__arrow--next { inset-inline-end: 8px; }

/* بنر */
.banner { position: relative; overflow: hidden; background: var(--surf2); }
.banner__box { aspect-ratio: 16 / 9; }
@media (max-width: 1119px) { .banner__box { aspect-ratio: 4 / 3; } }
.banner__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent); color: #fff;
}

/* ── سربرگ بخش ─────────────────────────────────────────────────── */
.sect { margin-top: 28px; }
.sect__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sect__title { font-size: 15.5px; font-weight: 700; }
.sect__more { font-size: 12px; color: var(--brand); }

/* ── نان‌ریزه ──────────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--mut); padding: 10px 0; }
.crumbs a { color: var(--mut); }
.crumbs a:hover { color: var(--brand); }

/* ── چیپ فیلتر ─────────────────────────────────────────────────── */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 32px; padding: 0 11px; font-size: 12px; border: 1px solid var(--bd2);
  background: var(--surf); color: var(--tx2); border-radius: 0;
}
.chip:hover { text-decoration: none; border-color: var(--brand3); }
.chip[aria-pressed="true"], .chip--on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── صفحه‌ی محصول ──────────────────────────────────────────────── */
.pdp { display: grid; gap: 24px; }
@media (min-width: 1120px) { .pdp { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; } }
.pdp__gallery { position: relative; }
.pdp__thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; }
.pdp__thumbs button { flex: none; width: 56px; border: 1px solid var(--bd2); background: none; padding: 0; }
.pdp__thumbs button[aria-current="true"] { border-color: var(--brand); }
.pdp__buy { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 14px; }
.opt { display: flex; flex-wrap: wrap; gap: 8px; }
.opt__btn {
  min-width: 44px; height: 40px; padding: 0 12px; border: 1px solid var(--bd2);
  background: var(--surf); color: var(--tx); font-size: 13px; font-weight: 600;
}
.opt__btn[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.opt__btn:disabled { opacity: .4; text-decoration: line-through; }
.opt__color { width: 40px; height: 40px; padding: 3px; }
.opt__color span { display: block; width: 100%; height: 100%; }

/* نوار خرید چسبان موبایل */
.buybar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 46; display: none;
  gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--page); border-top: 1px solid var(--bd); box-shadow: var(--sh-up);
}
@media (max-width: 1119px) { .buybar { display: flex; } body.has-buybar { padding-bottom: 76px; } }
/* ⚠️ وقتی خودِ دکمه‌ی «افزودن به سبد خرید» در دید است، نوار چسبان کنار
   می‌رود: پیش از این هر دو هم‌زمان روی صفحه بودند و کاربر دو دکمه‌ی خرید
   را کنار هم می‌دید. با opacity پنهان می‌شود نه display، تا ۷۶ پیکسل
   padding-bottom بدنه همان بماند و صفحه نپرد. */
.buybar { transition: opacity .18s, transform .18s; }
.buybar.is-off { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* ── جدول‌های سبک فروشگاه ──────────────────────────────────────── */
.tbl { width: 100%; font-size: 13px; }
.tbl th { text-align: start; font-weight: 600; font-size: 12px; color: var(--mut); padding: 10px 8px; border-bottom: 1px solid var(--bd); }
.tbl td { padding: 12px 8px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }

/* ── کارت / جعبه ───────────────────────────────────────────────── */
.card { background: var(--surf); border: 1px solid var(--bd); padding: 16px; }
.card--flat { border: 0; background: var(--surf2); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }

/* ── هشدار / نوار پیام ─────────────────────────────────────────── */
.alert { display: flex; gap: 10px; padding: 12px 14px; font-size: 13px; border: 1px solid transparent; }
.alert--ok   { background: var(--ok50);   color: var(--ok);   border-color: color-mix(in oklab, var(--ok) 25%, transparent); }
.alert--warn { background: var(--warn50); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 25%, transparent); }
.alert--dang { background: var(--dang50); color: var(--dang); border-color: color-mix(in oklab, var(--dang) 25%, transparent); }
.alert--info { background: var(--info50); color: var(--info); border-color: color-mix(in oklab, var(--info) 25%, transparent); }

/* ── حالت خالی ─────────────────────────────────────────────────── */
.empty { text-align: center; padding: 48px 16px; color: var(--mut); }
.empty__title { font-size: 15px; font-weight: 700; color: var(--tx); margin-top: 12px; }
.empty__text { font-size: 12.5px; margin-top: 6px; }

/* ── مراحل پرداخت ──────────────────────────────────────────────── */
.steps { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 14px 0; }
.steps__i { display: flex; align-items: center; gap: 6px; color: var(--mut); }
.steps__i[aria-current="step"] { color: var(--brand); font-weight: 700; }
.steps__i--done { color: var(--ok); }
.steps__n {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; font-size: 11px; font-weight: 700; flex: none;
}
.steps__sep { flex: 1; height: 1px; background: var(--bd2); }

/* ── خلاصه‌ی سفارش ─────────────────────────────────────────────── */
.summary { display: flex; flex-direction: column; gap: 10px; }
.summary__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx2); }
.summary__row--total { font-size: 15px; font-weight: 800; color: var(--tx); padding-top: 10px; border-top: 1px solid var(--bd); }
.summary__row--save { color: var(--sale); }

/* ── خط سفارش/سبد ─────────────────────────────────────────────── */
.line { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--bd); }
.line:last-child { border-bottom: 0; }
.line__meta { font-size: 11.5px; color: var(--mut); display: flex; gap: 8px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--bd2); }
.qty button { width: 32px; height: 32px; border: 0; background: transparent; color: var(--tx); font-size: 15px; }
.qty button:disabled { opacity: .35; }
.qty output { min-width: 34px; text-align: center; font-size: 13px; font-weight: 700; }

/* ── کشو / مودال با تله‌ی فوکوس ────────────────────────────────── */
.backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(24,20,16,.38);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: hhFade .16s ease;
}
@keyframes hhFade { from { opacity: 0 } to { opacity: 1 } }
.drawer {
  position: fixed; z-index: 91; background: var(--page); display: flex; flex-direction: column;
  box-shadow: var(--sh-lg); max-height: 100dvh;
}
.drawer--side { inset-block: 0; inset-inline-start: 0; width: min(86vw, 340px); }
.drawer--bottom { inset-inline: 0; bottom: 0; max-height: 86dvh; }
.drawer--center {
  inset-inline: 50%; top: 50%; transform: translate(50%, -50%);
  width: min(92vw, 480px);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bd); flex: none; }
.drawer__body { padding: 14px; overflow: auto; }
.drawer__foot { padding: 12px 14px; border-top: 1px solid var(--bd); flex: none; }
[hidden] { display: none !important; }

/* ── وبلاگ ─────────────────────────────────────────────────────── */
.grid-posts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.post__cover { aspect-ratio: 16 / 10; background: var(--surf2); overflow: hidden; }
.post__title { font-size: 14px; font-weight: 700; margin-top: 8px; color: var(--tx); }
.prose { font-size: 14.5px; line-height: 2.05; color: var(--tx2); max-width: 72ch; }
.prose h2 { font-size: 18px; margin: 28px 0 10px; color: var(--tx); }
.prose h3 { font-size: 16px; margin: 22px 0 8px; color: var(--tx); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-inline-start: 22px; list-style: revert; }
.prose li { margin-bottom: 6px; }
.prose img { margin: 16px 0; }
.prose blockquote { margin: 16px 0; padding: 10px 14px; border-inline-start: 3px solid var(--brand); background: var(--brand05); }
.prose table { margin: 16px 0; font-size: 13px; }
.prose th, .prose td { border: 1px solid var(--bd); padding: 8px 10px; }

/* ── ستاره‌ها ──────────────────────────────────────────────────── */
.stars { display: inline-flex; gap: 1px; color: var(--gold); }
.stars svg { width: 14px; height: 14px; }
.bar { height: 6px; background: var(--n100); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); }

/* ── فوتر ──────────────────────────────────────────────────────── */
.ftr { margin-top: 40px; background: var(--surf2); border-top: 1px solid var(--bd); padding: 28px 0 24px; }
@media (max-width: 719px) { .ftr { margin-bottom: 60px; } }
.ftr__cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ftr h3 { font-size: 13px; margin-bottom: 10px; }
.ftr a { color: var(--tx2); font-size: 12.5px; }
.ftr a:hover { color: var(--brand); }
.ftr li { margin-bottom: 7px; }
.ftr__bottom { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bd2); font-size: 11.5px; color: var(--mut); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.ftr__badges { display: flex; gap: 10px; align-items: center; }
.ftr__badges a { width: 64px; height: 64px; border: 1px solid var(--bd2); background: var(--surf); display: flex; align-items: center; justify-content: center; font-size: 10px; text-align: center; color: var(--mut); padding: 4px; }

/* ── صفحه‌بندی ─────────────────────────────────────────────────── */
.pager { display: flex; gap: 4px; justify-content: center; align-items: center; padding: 24px 0; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 36px; height: 36px; padding: 0 8px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--bd2); font-size: 12.5px; color: var(--tx2); background: var(--surf);
}
.pager a:hover { text-decoration: none; border-color: var(--brand3); }
.pager [aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pager .is-off { opacity: .4; }

/* ── نوار پیام آنی ─────────────────────────────────────────────── */
.toaster { position: fixed; z-index: 120; inset-inline: 0; bottom: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: var(--n900); color: #fff; font-size: 12.5px; padding: 10px 16px;
  box-shadow: var(--sh-md); animation: hhRise .2s ease;
}
.toast--bad { background: var(--dang); }
@keyframes hhRise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ── جعبه‌ی «موجود شد خبرم کن» ─────────────────────────────────── */
.bis { background: var(--warn50); border: 1px solid color-mix(in oklab, var(--warn) 25%, transparent); padding: 12px 14px; }

/* ── چاپ ───────────────────────────────────────────────────────── */
@media print {
  .hdr, .ftr, .tabbar, .buybar, .announce, .skip-link, .no-print { display: none !important; }
  body.store { padding: 0; }
}

/* =====================================================================
   لایه‌ی موبایل — رفع اسکرول افقی سراسری
   ⚠️ چرا لازم شد: روی ویوپورت ۳۹۰ پیکسلی، عرض واقعی صفحه ۷۳۱ پیکسل بود
   — یعنی *همه‌ی* صفحه‌های سایت روی گوشی افقی می‌لغزیدند. اندازه‌گیری
   نشان داد سه ریشه دارد و هر سه هم در طرحِ موبایل وجود ندارند:

     • header  clientWidth=390  scrollWidth=731  → ردیف دسته‌بندیِ دسکتاپ
       (۹ لینک با gap:26px و padding:40px) روی موبایل هم رندر می‌شد.
       طرحِ موبایل این ردیف را اصلاً ندارد؛ جایش برگر + کشو است.
     • footer  clientWidth=390  scrollWidth=614 → گرید پنج‌ستونی فوتر
       روی موبایل هم پنج‌ستونه می‌ماند.
     • .tabbar و .toaster با inset-inline:0 به عرضِ همان صفحه‌ی ۷۳۱
       پیکسلی کش می‌آمدند — این‌ها معلول بودند، نه علت.

   overflow-x:hidden روی body عمداً *به‌عنوان راه‌حل* استفاده نشده؛ آن
   فقط لغزش را پنهان می‌کند و محتوای بریده‌شده سر جایش می‌ماند. اینجا
   خودِ سه علت برداشته شده و بعد یک بندِ ایمنی برای موارد آینده.
   ===================================================================== */
@media (max-width: 1119px) {
  /* ردیف دسته‌بندی دسکتاپ روی موبایل حذف — دسترسی‌اش از برگر/کشو و
     نوار پایین (tabbar) است، دقیقاً مثل طرحِ موبایل. */
  .store .hh-catnav { display: none !important; }

  /* فوتر تک‌ستونه؛ طرح موبایل هم ستون‌ها را روی هم می‌چیند. */

  /* حاشیه‌های ۴۰ پیکسلیِ دسکتاپ روی ۳۹۰ پیکسل ۲۰٪ عرض را می‌خورند. */
  .store header > div > div,
  .store footer > div { padding-inline: 16px !important; }
}

/* بندِ ایمنی: هیچ عنصری نباید از عرض صفحه بیرون بزند. اگر روزی بلوک
   تازه‌ای اضافه شد که عریض‌تر است، به‌جای لغزاندن کل سایت خودش می‌شکند. */
@media (max-width: 1119px) {
  .store img, .store svg, .store table, .store pre { max-width: 100%; }
  .store .tabbar, .store .toaster { max-width: 100vw; }
}

/* ── بدنه‌ی صفحه روی موبایل ──────────────────────────────────────────
   بخش‌های صفحه با padding:0 40px نوشته شده‌اند (چیدمان دسکتاپ طرح).
   روی ۳۹۰ پیکسل یعنی ۸۰ پیکسل — بیش از ۲۰٪ عرض — و بعد شبکه‌های
   چهارستونه در ۳۱۰ پیکسل باقی‌مانده جا نمی‌شوند و صفحه را می‌لغزانند.
   طرحِ موبایل حاشیه‌ی ۱۶ پیکسلی و شبکه‌ی دوستونه دارد. */
@media (max-width: 1119px) {
  .store main section,
  .store main > div { padding-inline: 16px !important; }

  /* شبکه‌های محصول: چهار/سه ستون → دو ستون */
  .store [style*="grid-template-columns:repeat(4,1fr)"],
  .store [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* بدون min-width:0 آیتم گرید کوچک‌تر از محتوایش نمی‌شود و باز می‌لغزد. */
  .store [style*="display:grid"] > * { min-width: 0; }
}

/* ── لایت‌باکس گالری محصول ───────────────────────────────────────────
   دکمه‌ی ذره‌بین پیش‌تر یک <a target="_blank"> بود و کاربر را به تبِ
   خالیِ فایل عکس می‌انداخت. طرح لایت‌باکس درجا دارد. */
.hh-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 16, 10, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 72px;
}
.hh-lb__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 0; background: var(--n50);
}
.hh-lb__x {
  position: absolute; top: 16px; inset-inline-start: 16px;
  width: 42px; height: 42px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #1A1A18;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.hh-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #1A1A18;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.hh-lb__nav--prev { inset-inline-end: 18px; }
.hh-lb__nav--next { inset-inline-start: 18px; }
.hh-lb__cap {
  position: absolute; bottom: 18px; inset-inline-start: 50%;
  transform: translateX(50%);
  padding: 6px 13px; background: rgba(26, 26, 24, .62);
  color: #fff; font-size: 12.5px;
}
/* سرصفحه‌ی لایت‌باکس — طرح نام محصول، برچسب تصویر و شمارنده را
   بالای عکس می‌گذارد، نه فقط یک شمارنده‌ی پایین. */
.hh-lightbox { flex-direction: column; padding: 0; }
.hh-lb__head {
  flex: none; width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; color: #fff;
}
.hh-lb__head > div { flex: 1; min-width: 0; }
.hh-lb__name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-lb__sub { font-size: 11.5px; opacity: .7; margin-top: 2px; }
.hh-lb__count { font-size: 12.5px; opacity: .8; direction: ltr; flex: none; }
.hh-lb__stage {
  flex: 1; min-height: 0; width: 100%; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px; overflow: hidden;
}
.hh-lb__x {
  position: static; width: 40px; height: 40px; flex: none;
  background: rgba(255, 255, 255, .12); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hh-lb__img { touch-action: none; user-select: none; -webkit-user-drag: none; }

/* نوار زوم — دقیقاً همان سه دکمه و درصدِ طرح */
.hh-lb__zoom {
  position: absolute; bottom: 14px; inset-inline-start: 50%;
  transform: translateX(50%); z-index: 4;
  display: flex; gap: 6px; align-items: center;
  background: rgba(12, 16, 14, .6); padding: 5px;
  border: 1px solid rgba(255, 255, 255, .16);
}
.hh-lb__zoom button {
  width: 38px; height: 38px; border: 0; background: transparent; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .22s ease;
}
.hh-lb__zoom button:hover { background: rgba(255, 255, 255, .14); }
.hh-lb__zoom button:disabled { opacity: .4; cursor: default; background: transparent; }
.hh-lb__pct { min-width: 44px; text-align: center; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.hh-lb__sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .2); }

@media (max-width: 1119px) {
  .hh-lb__stage { padding: 0 6px; }
  .hh-lb__nav { width: 40px; height: 40px; }
}

/* =====================================================================
   لایه‌ی موبایل — بخش دوم: چیدمان، نه فقط جلوگیری از لغزش
   ⚠️ بخش قبلی اسکرول افقی را بست ولی صفحه هنوز «دسکتاپِ فشرده» بود:
   عنوان هیرو با فونت ۴۰px داخل ستونی به عرض ۴۶٪ از ۳۹۰ پیکسل (یعنی
   ۱۸۰ پیکسل) می‌نشست و کلمه‌به‌کلمه می‌شکست — «پارچه‌های / نفس‌گیر، /
   برش‌های / تمیز / و ...». اینجا خودِ چیدمان موبایلی می‌شود.
   ===================================================================== */
@media (max-width: 1119px) {

  /* ── هیرو ────────────────────────────────────────────────────────
     ستون متن تمام‌عرض، تایپوگرافی موبایلی، ارتفاع نسبت‌محور. */
  /* پیکان‌های ریل روی موبایل نیست؛ لغزش با انگشت (طرح). چیدمان ریل‌ها در
     store.mobile.css است. */
  .store .hh-rail-btn { display: none !important; }
  .store .hh-rail { scroll-snap-type: x proximity; }
  .store .hh-rail > * { scroll-snap-align: start; }

  /* ── تیترها ─────────────────────────────────────────────────────
     ۳۰px روی موبایل دو سطری می‌شد («خرید بر اساس / دسته‌بندی»). */
  .store main h1 { font-size: 22px !important; line-height: 1.35 !important; }
  .store main h2 { font-size: 18px !important; line-height: 1.4 !important; }

  /* ── کارت کالکشن ────────────────────────────────────────────────── */
  .store .hh-coll-card { width: 150px !important; }

  /* ── نوار فروش ویژه ─────────────────────────────────────────────
     شمارنده و «مشاهده همه» کنار هم جا نمی‌شدند و بریده می‌شدند. */
  .store [style*="background:var(--sale)"],
  .store .hh-sale-bar { flex-wrap: wrap !important; row-gap: 8px !important; }
}

.store .hh-burger { display: none; }

/* ── اندازه‌ی کارت‌ها روی موبایل ─────────────────────────────────────
   ⚠️ اندازه‌گیری کنار فایل طرحِ موبایل: کارت‌های طرح ۱۵۲ تا ۱۷۳ پیکسل‌اند
   و شبکه‌اش «۱۷۳px ۱۷۳px». کارت‌های ریلِ سایت ۲۴۴ و ۲۱۸ پیکسل بودند —
   یعنی روی صفحه‌ی ۳۹۰ پیکسلی فقط یک‌ونیم کارت دیده می‌شد و ریل حس
   «دسکتاپِ بریده» می‌داد، نه ریل موبایلی. */
@media (max-width: 1119px) {
  .store .hh-railcard { width: 166px !important; }
  .store .hh-coll-card { width: 150px !important; }

  /* ⚠️ شبکه‌ای که ستون‌هایش نابرابر درمی‌آمد (۱۸۹٫۵ و ۱۴۰٫۴) به‌خاطر
     نبودِ minmax بود؛ محتوای عریض‌تر ستون خودش را پهن می‌کرد. */
  .store [style*="display:grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store [style*="grid-template-columns:1fr"] { grid-template-columns: 1fr !important; }
}

/* بلوک مجله روی موبایل: طرح مطلب شاخص و فهرست را روی هم می‌چیند، نه
   دو ستونِ ۱٫۳۵ به ۱ که روی ۳۹۰ پیکسل هر دو ستون را له می‌کند. */
@media (max-width: 1119px) {
  .store [style*="grid-template-columns:1.35fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 18px !important;
  }
}

/* ── شیت «افزوده شد به سبد» ────────────────────────────────────────
   بازسازی دقیق بلوک ov.atc در فایل طرح: دستگیره، تیک سبز در دایره،
   جمله‌ی «چه سلیقه‌ای داری…»، کارت کالا (تصویر ۶۴×۸۰ + نقطه‌ی رنگ +
   قیمت) و دو دکمه‌ی هم‌عرض.
   ⚠️ روی دسکتاپ هم همین شیت پایین‌چسب می‌ماند — طرح دسکتاپ و موبایل
   هر دو همین را نشان می‌دهند، فقط عرضش محدود می‌شود.                */
.hh-atc {
  position: fixed; z-index: 121; inset-inline: 0; bottom: 0;
  background: var(--surf); box-shadow: var(--sh-up);
  padding: 0 16px 22px; animation: hhRise .22s ease;
}
@media (min-width: 1120px) {
  .hh-atc { inset-inline: auto; inset-inline-end: 24px; bottom: 24px; width: 380px; }
}
.hh-atc__grip { padding: 10px 0 14px; display: flex; justify-content: center; }
.hh-atc__grip > span { width: 40px; height: 4px; background: var(--n300); }
.hh-atc__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.hh-atc__tick {
  width: 32px; height: 32px; border-radius: 999px; background: var(--ok50);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.hh-atc__msg { font-size: 14.5px; font-weight: 500; }
.hh-atc__card { display: flex; gap: 12px; background: var(--surf2); padding: 10px; margin-bottom: 16px; }
.hh-atc__card img { width: 64px; height: 80px; object-fit: cover; flex: none; background: var(--n100); }
.hh-atc__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.hh-atc__title { font-size: 13.5px; font-weight: 500; }
.hh-atc__var { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tx2); }
.hh-atc__dot { width: 12px; height: 12px; border-radius: 999px; border: 1px solid var(--n200); flex: none; }
.hh-atc__price { font-size: 13.5px; font-weight: 700; }
.hh-atc__acts { display: flex; gap: 10px; }
.hh-atc__acts > * {
  flex: 1; height: 52px; border-radius: 0; font-family: inherit; font-size: 14.5px;
  font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hh-atc__more { border: 1px solid var(--brand); background: transparent; color: var(--brand7); }
.hh-atc__go { border: 0; background: var(--brand); color: #fff; text-decoration: none; }
.hh-atc__go:hover { background: var(--brand7); color: #fff; text-decoration: none; }

/* =====================================================================
   لایه‌ی موبایل — بر پایه‌ی توکن‌های خودِ فایل طرح

   اعداد این بلوک حدسی نیستند؛ از شیء `ct` در اسکریپت فایل دیزاین
   بیرون کشیده شده‌اند (شاخه‌ی vp.mobile):

     pad 16 · h1 22 · h2 18 · gap 40 · cardW 152 · cardGap 12
     gridCols repeat(2,1fr) · catCols repeat(4,1fr) · artCols 1fr
     trustCols repeat(2,1fr) · heroH 380 · heroPad 28 · heroTitle 34
     stD 64 · stW 72 · stGap 12 · catTile: 4 ستون، آیکون ۳۴، فونت ۱۱٫۵

   ⚠️ صفحه‌های فروشگاه اندازه‌ها را inline می‌نویسند (چون نشانه‌گذاری از
   طرحِ دسکتاپ ساخته شده)، پس اینجا ناچار به گزینشگر صفتی و !important
   است. جای درستش این بود که هر اندازه یک کلاس باشد؛ آن بازنویسی بزرگ
   است و اینجا رفتار را درست می‌کند بی‌آنکه ۹۰ فایل دست بخورد.
   ===================================================================== */
@media (max-width: 1119px) {
  /* ── تیترها: ۳۰ → ۲۲ و ۲۴ → ۱۸ ─────────────────────────────── */
  .store h1[style*="font-size:30px"] { font-size: 22px !important; line-height: 1.45 !important; }
  .store h2[style*="font-size:24px"] { font-size: 18px !important; line-height: 1.5 !important; }
  .store h1[style*="font-size:26px"] { font-size: 22px !important; }

  /* ── فاصله‌ی بین بخش‌ها: ۴۰ ──────────────────────────────────── */
  .store main > section + section { margin-top: 40px !important; }

  /* ── استوری: قطر ۶۴، ستون ۷۲، فاصله ۱۲ ──────────────────────── */
  .store [style*="width:78px"][style*="height:78px"] { width: 64px !important; height: 64px !important; }
  .store a[data-story], .store [data-story-rail] > a { width: 72px !important; }
  .store [data-story-rail] { gap: 12px !important; }

  /* ── کاشی دسته‌بندی: چهار ستونه می‌ماند، نه دوستونه ──────────────
     ⚠️ استثنای مهم: قاعده‌ی عمومیِ «چهارستون → دوستون» پایین‌تر برای
     شبکه‌ی محصول درست است ولی برای کاشی دسته غلط؛ طرح موبایل هم
     catCols و catTileCols را repeat(4,1fr) نگه می‌دارد. */
  .store [data-cat-tiles] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .store [data-cat-tiles] > * { padding: 14px 6px !important; }

  /* ── مقاله‌ها: تک‌ستونه ──────────────────────────────────────── */
  .store [data-article-grid] { grid-template-columns: 1fr !important; }

  /* ── نوار اعتماد: دوستونه ────────────────────────────────────── */
  .store [data-trust-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* ── هیرو: تک‌ستونه، ارتفاع ۳۸۰، حاشیه ۲۸، تیتر ۳۴ ───────────── */
  .store [data-hero] { grid-template-columns: 1fr !important; min-height: 380px !important; padding: 28px !important; }
  .store [data-hero] h1, .store [data-hero] [data-hero-title] { font-size: 34px !important; line-height: 1.35 !important; }

  /* ── کارت محصول در ریل افقی: عرض ۱۵۲، فاصله ۱۲ ──────────────── */
  .store [data-rail] { gap: 12px !important; }
  .store [data-rail] > * { width: 152px !important; flex: 0 0 152px !important; }
}

/* =====================================================================
   لایه‌ی چیدمانِ واکنش‌گرا — نعل‌به‌نعل جدول ct فایل طرح

   ⚠️ مشکل ساختاری که این بلوک حل می‌کند: سایت دو لایه داشت (زیر ۸۶۰ و
   بالای ۸۶۰) در حالی که طرح سه نما دارد — موبایل ۳۷۵، تبلت ۷۶۸،
   دسکتاپ ۱۴۴۰. یعنی روی عرض ۸۰۰ پیکسل (تبلت) سایت چیدمان موبایل
   می‌داد و روی ۹۰۰ چیدمان دسکتاپ، در حالی که طرح برای هر دو، نمای
   تبلت را می‌خواهد: سه‌ستونه، حاشیه ۲۴، تیتر ۲۶.

   مرزها از خودِ نماهای طرح می‌آید:
     موبایل  ≤ ۷۶۷     تبلت ۷۶۸–۱۰۲۳     دسکتاپ ≥ ۱۰۲۴

   جدول مرجع (ct در اسکریپت طرح):
     کلید       موبایل   تبلت    دسکتاپ
     max        ۱۰۰٪     ۱۰۰٪    ۱۲۸۰
     pad        ۱۶       ۲۴      ۴۰
     gap        ۴۰       ۴۸      ۶۴
     h1         ۲۲       ۲۶      ۳۰
     h2         ۱۸       ۲۲      ۲۴
     cardGap    ۱۲       ۱۶      ۲۴
     gridCols   ۲        ۳       ۴
     artCols    ۱        ۲       ۳
     trustCols  ۲        ۲       ۴
     heroH      ۳۸۰      ۴۲۰     ۴۷۰
     heroTitle  ۳۴       ۴۰      ۴۶
   ===================================================================== */
.store {
  --ct-pad: 40px; --ct-gap: 64px; --ct-h1: 30px; --ct-h2: 24px;
  --ct-card-gap: 24px; --ct-hero-h: 470px; --ct-hero-title: 46px;
  --ct-grid: 4; --ct-art: 3; --ct-trust: 4;
}
@media (max-width: 1119px) {
  .store {
    --ct-pad: 24px; --ct-gap: 48px; --ct-h1: 26px; --ct-h2: 22px;
    --ct-card-gap: 16px; --ct-hero-h: 420px; --ct-hero-title: 40px;
    --ct-grid: 3; --ct-art: 2; --ct-trust: 2;
  }
}
@media (max-width: 719px) {
  .store {
    --ct-pad: 16px; --ct-gap: 40px; --ct-h1: 22px; --ct-h2: 18px;
    --ct-card-gap: 12px; --ct-hero-h: 380px; --ct-hero-title: 34px;
    --ct-grid: 2; --ct-art: 1; --ct-trust: 2;
  }
}

/* ⚠️ چرا !important: چیدمان‌ها در Razor به‌صورت style درون‌خطی نوشته
   شده‌اند (بازسازی مستقیم طرح دسکتاپ) و بدون این، سبک درون‌خطی همیشه
   برنده است. راه تمیزتر بازنویسی همه‌ی صفحه‌ها با کلاس است؛ آن کارِ
   بزرگ‌تری است و اینجا رفتار درست را می‌دهد بدون دست‌زدن به ۴۰ فایل. */
@media (max-width: 1119px) {
  .store main section,
  .store main > div,
  .store header > div > div,
  .store footer > div { padding-inline: var(--ct-pad) !important; }

  .store [style*="grid-template-columns:repeat(4,1fr)"],
  .store [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(var(--ct-grid), minmax(0, 1fr)) !important;
    gap: var(--ct-card-gap) !important;
  }

  .store h1[style*="font-size:30px"] { font-size: var(--ct-h1) !important; }
  /* ⚠️ تیتر هیرو استثناست: در طرح ۴۶/۴۰/۳۴ است، نه h1 عمومی. اگر با
     همان توکن کنترل شود، روی دسکتاپ از ۴۶ به ۳۰ می‌افتد. */
  .store [data-hero] h1, .store [data-hero] .hero__title { font-size: var(--ct-hero-title) !important; }
  .store h2[style*="font-size:24px"] { font-size: var(--ct-h2) !important; }
}

/* روی موبایل، شبکه‌ی دوستونه حتی برای بلوک‌های دوستونه‌ی تبلت هم
   دوستونه می‌ماند؛ ولی شبکه‌ی مقاله‌ها تک‌ستونه می‌شود (artCols=1). */
@media (max-width: 719px) {
  .store .grid-posts { grid-template-columns: 1fr !important; }
}

/* ── اجزای اندازه‌گیری‌شده از رندر واقعی طرح ───────────────────────
   منبع: tools/parity/component_spec.py روی نسخه‌ی بدون‌قاب.
   ⚠️ این اعداد حدس نیستند؛ اگر عوض شدند باید دوباره اندازه گرفت.

           جزء              موبایل   دسکتاپ
   دایره‌ی استوری             ۶۴       ۷۸
   ارتفاع هدر چسبان          ۱۱۱      ۱۲۲
   عرض کارت محصول در ریل     ۱۵۲      ۲۴۴
   ارتفاع هیرو               ۴۸۸      ۴۴۱                          */
@media (max-width: 719px) {
  /* دایره‌ی استوری روی موبایل کوچک‌تر است؛ سایت همه‌جا ۷۸ می‌گذاشت و
     ریل روی صفحه‌ی ۳۹۰ شلوغ‌تر از طرح می‌شد. */
  .store [data-story] > span:first-child,
  .store [data-story] img { width: 64px !important; height: 64px !important; }
  .store [data-story] { width: 76px !important; }

  /* کارت محصول در ریل: ۱۵۲ نه ۱۶۶ */
  .store .hh-railcard { width: 152px !important; }
}

/* ── ریلِ لغزان عکس کارت (حالت زارا) ─────────────────────────────────
   لمس: انگشت را بکش، عکس بعدی بیاید و قفل شود — بدون JS، با scroll-snap.
   دسکتاپ: هاور همان عکس دوم را محو می‌کند (طرح)؛ فلش‌های کوچک فقط با هاور.
   نقطه‌ها: فقط وقتی بیش از یک عکس هست. */
.hh-card-track::-webkit-scrollbar { display: none; }
.hh-card-track { -webkit-overflow-scrolling: touch; }
@media (hover: none) { .hh-card-alt { display: none; } }
.hh-card-media.is-swiped .hh-card-alt { display: none; }
.hh-card-track > img { cursor: pointer; }

/* ── هاور کارتِ محصول (سراسری) — عمداً بدونِ هیچ تغییرِ هندسی ───────────
   ⚠️ منشأ «لرزش»: هنگام اسکرولِ صفحه، نشانگر روی کارت‌های پیاپی می‌لغزد و
   :hover هر کارت پشت‌سرهم روشن/خاموش می‌شود. اگر هاور کارت را جابه‌جا کند
   (بالاآمدن/زوم)، این روشن‌وخاموش‌ها به‌صورتِ پرشِ چندپیکسلی = لرزش دیده
   می‌شوند. پس هیچ transformِ هندسی روی هاور نداریم: فقط عکسِ دومِ کارت با
   opacity (روی کمپوزیتور، بی‌repaint) محو می‌شود و رنگِ عنوان عوض می‌شود.
   هیچ‌چیزِ کارت تکان نمی‌خورد، پس اسکرول هم صاف می‌ماند. */
.hh-card-img, .hh-card-slide, .hh-card-alt { backface-visibility: hidden; }
.hh-card-alt { transform: translateZ(0); transition: opacity .3s ease !important; }
@media (hover: hover) and (pointer: fine) {
  .hh-card:hover .hh-card-alt { opacity: 1 !important; }
  .hh-card:hover .hh-card-title { color: var(--brand); }
}
.hh-card .hh-wish:hover { background: #fff; }
.hh-xpcard:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .hh-card-alt { transition: none !important; }
  .hh-xpcard:hover img { transform: none !important; }
}

/* ── کشوی منوی موبایل (طرح: «منوی کشویی موبایل») ─────────────────────── */
.hh-mdrawer { width: min(85vw, 332px); padding: 0; display: flex; flex-direction: column; }
.hh-mdrawer__head {
  height: 60px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 16px; border-bottom: 1px solid var(--bd);
}
.hh-mdrawer__logo:focus, .drawer:focus { outline: none; }
.hh-mdrawer__logo { display: flex; align-items: center; gap: 8px; color: var(--tx); text-decoration: none; font-size: 19px; font-weight: 700; padding-inline-end: 8px; }
.hh-mdrawer__close { width: 44px; height: 44px; border: 0; background: transparent; color: var(--tx2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hh-mdrawer__body { flex: 1 1 0%; overflow-y: auto; }
.hh-mdrawer__cat {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  border-bottom: 1px solid var(--bd); color: var(--tx); text-decoration: none; font-size: 14px;
}
.hh-mdrawer__cat:active { background: var(--n50); }
.hh-mdrawer__thumb { width: 42px; height: 42px; flex: 0 0 auto; background: var(--n50); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hh-mdrawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-mdrawer__name { flex: 1 1 0%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-mdrawer__count { font-size: 11px; color: var(--mut); flex: 0 0 auto; }
.hh-mdrawer__links { padding: 8px 0; border-bottom: 1px solid var(--bd); }
.hh-mdrawer__links--acct { margin-top: auto; border-bottom: 0; }
.hh-mdrawer__link {
  display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px;
  color: var(--tx); text-decoration: none; font-size: 14px;
}
.hh-mdrawer__link svg { color: var(--tx2); flex: 0 0 auto; }


/* =====================================================================
   فوتر — دسکتاپ: بازطراحی با اندازه‌ی خوانا روی نمایشگرهای بزرگ (لینک ۱۴،
   عنوان ۱۵، توضیح ۱۴/۲۶) و «کارت تماس» به‌جای جعبه‌های آیکنِ تک‌افتاده؛
   موبایل: عیناً طرح (برند + آکاردئون + بلوک وسط‌چین پشتیبانی).
   ===================================================================== */
.hh-ftr { margin-top: 72px; border-top: 1px solid var(--bd); background: var(--page); }
.hh-ftr__in { max-width: 1280px; margin: 0 auto; padding: 56px 40px 0; }
.hh-ftr__grid { display: grid; grid-template-columns: 1.25fr .85fr .95fr .85fr 1.7fr; gap: 36px; align-items: start; }
.hh-ftr__logo { display: flex; align-items: center; gap: 12px; color: var(--tx); margin-bottom: 16px; text-decoration: none; }
.hh-ftr__logo svg:first-child { width: 42px; height: 39px; }
.hh-ftr__logo svg:last-child { width: 68px; height: 25px; }
.hh-ftr__about { margin: 0 0 18px; font-size: 14px; line-height: 26px; color: var(--tx2); max-width: 300px; }
.hh-ftr__socs { display: flex; gap: 8px; }
.hh-ftr__soc { width: 40px; height: 40px; border: 1px solid var(--bd2); display: flex; align-items: center; justify-content: center; color: var(--tx2); transition: color .2s, border-color .2s, background .2s; }
.hh-ftr__soc:hover { color: var(--brand); border-color: var(--brand); background: var(--brand05); text-decoration: none; }
.hh-ftr__title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--tx); }
.hh-ftr__title > span::after { content: ""; display: block; width: 22px; height: 2px; margin-top: 8px; background: var(--brand); }
.hh-ftr__chev { display: none; color: var(--tx2); }
.hh-ftr__links { display: flex; flex-direction: column; gap: 12px; }
.hh-ftr__links .hh-ftr-link { font-size: 14px; line-height: 1.6; color: var(--tx2); text-decoration: none; transition: color .2s; }
.hh-ftr__links .hh-ftr-link:hover { color: var(--brand); }

/* کارت تماس — «کیسه‌ی پارچه‌ای» (طرح مالک)، فقط CSS: زمینه‌ی کرم با نوار
   روشنِ درزِ بالا، دو خطِ دوختِ نقطه‌چین دور تا دور، زبانه‌ی سبز روی لبه‌ی
   چپ، گوشه‌ی پایین-راست اریب. جهت‌ها فیزیکی‌اند — همان‌طور که در تصویر بود. */
.hh-ftr__contact {
  position: relative; padding: 24px 20px 20px;
  background: #F1EDE4;
  container-type: inline-size; /* اندازه‌ی شماره‌ها نسبت به پهنای کارت (cqw) */
  border: 1px solid #D8D0C0; border-radius: 3px;
  box-shadow: 0 1px 0 #fff inset;
}
.hh-ftr__contact::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1.5px dashed #CDC4B1; outline: 1.5px dashed #CDC4B1; outline-offset: 3px;
}
/* گوشه‌ی اریب: مربعِ چرخیده به رنگِ زمینه‌ی صفحه روی گوشه، لبه‌اش می‌شود خطِ برش */
.hh-ftr__contact::after {
  content: ""; position: absolute; right: -22px; bottom: -22px; width: 44px; height: 44px;
  background: var(--page); transform: rotate(45deg); border-left: 1px solid #D8D0C0; pointer-events: none;
}
.hh-ftr__tab {
  position: absolute; left: -9px; top: 72%; width: 12px; height: 36px; background: #2F7C72; border-radius: 2px 0 0 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  background-image: radial-gradient(circle 1.2px, #fff 1.1px, transparent 1.3px); background-size: 12px 8px; background-position: 0 6px;
}
.hh-ftr__contact > :not(.hh-ftr__tab) { position: relative; z-index: 1; }
.hh-ftr__title--static { margin-bottom: 2px; font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.hh-ftr__title--static::after { display: none; }
.hh-ftr__kicker { display: block; font-size: 13.5px; color: var(--mut); margin: 0 0 16px; }
.hh-ftr__phone, .hh-ftr__mail, .hh-ftr__addr { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* ارقام فونت Lahzeh پهن‌اند: یک خط، بدون فاصله‌ی گروهی (word-spacing منفی)، اندازه با پهنای کارت
   (۲۰px در کارت ۳۲۰px، کوچک‌تر در دسکتاپ‌های باریک‌تر) تا هرگز به دو خط نشکند. */
.hh-ftr__phone { color: var(--tx); font-size: 17px; font-size: clamp(15px, 6cqw, 17px); font-weight: 800; margin-bottom: 10px; letter-spacing: .8px; word-spacing: -4px; white-space: nowrap; font-feature-settings: "tnum"; line-height: 32px; }
.hh-ftr__phone:hover { color: var(--brand); text-decoration: none; }
.hh-ftr__mail { color: var(--tx2); font-size: 14px; margin-bottom: 10px; line-height: 32px; }
.hh-ftr__mail bdi { direction: ltr; unicode-bidi: isolate; }
.hh-ftr__mail:hover { color: var(--brand); text-decoration: none; }
.hh-ftr__addr { align-items: flex-start; color: var(--tx2); font-size: 13.5px; line-height: 23px; margin-bottom: 16px; }
.hh-ftr__addr > span:last-child { padding-top: 0; }
/* آیکن‌های ستون تماس (پس از چند دور بازخورد مالک): هیچ کادر/دایره/خطی. آیکن‌های توپرِ سبز (Material filled، ۲۲px)
   مستقیم کنار متن — همان زبانِ آیکن‌های هدر. SVG خطیِ داخل صفحه پنهان و آیکن با mask کشیده
   می‌شود تا بدون تغییر Razor عوض شود. */
.hh-ftr__ico { position: relative; width: 24px; height: 24px; flex: 0 0 auto; display: block; background: var(--brand); border: 0; border-radius: 0; box-shadow: none; -webkit-mask: var(--ftr-ico) center / 22px 22px no-repeat; mask: var(--ftr-ico) center / 22px 22px no-repeat; transition: background .2s; }
.hh-ftr__ico svg { display: none; }
.hh-ftr__ico, .hh-ftr__ico--brand { --ftr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); }
.hh-ftr__mail .hh-ftr__ico { --ftr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }
.hh-ftr__addr .hh-ftr__ico { --ftr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); }
.hh-ftr__phone:hover .hh-ftr__ico, .hh-ftr__mail:hover .hh-ftr__ico { background: #1F5F57; }
.hh-ftr__phone, .hh-ftr__mail, .hh-ftr__addr { gap: 10px; }
.hh-ftr__socs--contact { display: none; }
.hh-ftr__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid #CDC4B1; }
.hh-ftr__badge { display: flex; align-items: center; justify-content: center; height: 70px; padding: 8px; border: 1px solid #DDD6C8; background: #fff; outline: 1px dashed #D9D2C3; outline-offset: -5px; transition: border-color .2s; }
.hh-ftr__badge:hover { border-color: var(--brand); }
.hh-ftr__badge img { max-width: 100%; max-height: 100%; width: auto; height: 56px; object-fit: contain; }
.hh-ftr__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px;
  margin-top: 36px; padding: 16px 0; border-top: 1px solid var(--bd); font-size: 12.5px; color: var(--mut);
}
.hh-ftr__legal { display: flex; align-items: center; gap: 18px; }
.hh-ftr__legal .hh-ftr-link { color: var(--mut); text-decoration: none; }
.hh-ftr__legal .hh-ftr-link:hover { color: var(--brand); }

@media (max-width: 1119px) {
  .hh-ftr__in { padding: 40px 16px 0; }
  .hh-ftr__grid { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
  .hh-ftr__brand, .hh-ftr__contact { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .hh-ftr { margin-top: 40px; }
  .hh-ftr__grid { display: block; }
  .hh-ftr__logo { margin-bottom: 12px; }
  .hh-ftr__logo svg:first-child { width: 33px; height: 30px; }
  .hh-ftr__logo svg:last-child { width: 52px; height: 19px; }
  .hh-ftr__about { margin-bottom: 18px; }
  .hh-ftr__socs--brand { display: none; }
  /* آکاردئون: سرگروه ۵۲، شورون پایین در انتها؛ فقط گروه باز محتوا دارد */
  .hh-ftr__col:first-of-type { border-top: 1px solid var(--bd); }
  .hh-ftr__title { height: 52px; margin: 0; font-size: 13.5px; font-weight: 500; border-bottom: 1px solid var(--bd); cursor: pointer; }
  .hh-ftr__chev { display: block; transition: transform .2s; }
  [data-ftr-acc][data-open] .hh-ftr__chev { transform: rotate(180deg); }
  .hh-ftr__links { display: none; padding: 12px 0 16px; gap: 0; border-bottom: 1px solid var(--bd); }
  [data-ftr-acc][data-open] .hh-ftr__links { display: flex; }
  .hh-ftr__links .hh-ftr-link { display: flex; align-items: center; min-height: 40px; font-size: 13px; }
  .hh-ftr__title > span::after { display: none; }
  /* بلوک تماس — کارت وسط‌چین روی زمینه‌ی گرم (هم‌خانواده با کارت تماس دسکتاپ) */
  .hh-ftr__contact { margin-top: 20px; padding: 26px 16px 18px; text-align: center; }
  .hh-ftr__title--static { display: none; }
  .hh-ftr__kicker { display: block; font-size: 12px; color: var(--mut); margin: 0 0 8px; letter-spacing: .2px; }
  .hh-ftr__ico { display: none; }
  .hh-ftr__phone::after, .hh-ftr__mail::after { display: none; }
  .hh-ftr__phone { justify-content: center; font-size: 19px; margin-bottom: 6px; gap: 8px; letter-spacing: .4px; word-spacing: normal; font-weight: 700; line-height: 1.5; }
  .hh-ftr__phone::before {
    content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .hh-ftr__mail { justify-content: center; margin-bottom: 8px; font-size: 13px; }
  .hh-ftr__addr { justify-content: center; margin: 0 auto; font-size: 12.5px; line-height: 22px; max-width: none; color: var(--tx2); }
  .hh-ftr__addr > span:last-child { padding-top: 0; }
  .hh-ftr__socs--contact { display: flex; justify-content: center; margin-top: 16px; }
  .hh-ftr__soc { width: 44px; height: 44px; background: var(--surf); }
  .hh-ftr__badges { display: flex; justify-content: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bd2); }
  .hh-ftr__badge { width: 72px; height: 72px; padding: 6px; }
  .hh-ftr__badge img { height: 56px; }
  .hh-ftr__bottom { justify-content: center; text-align: center; margin-top: 22px; padding: 12px 0; font-size: 12px; }
}

/* شیت «افزوده شد»: نوار ارسال رایگان */
.hh-atc__ship { margin: 12px 0 2px; padding: 10px 12px; background: var(--brand05); border: 1px solid var(--brand1); }
.hh-atc__ship-txt { font-size: 12.5px; color: var(--brand); margin-bottom: 8px; }
.hh-atc__ship-txt strong { font-weight: 700; }
.hh-atc__ship-bar { height: 5px; background: var(--n200); overflow: hidden; }
.hh-atc__ship-bar span { display: block; height: 100%; background: var(--brand); transition: width .4s; }

/* =====================================================================
   نمایش استوری — مثل اینستاگرام: موبایل تمام‌صفحه، دسکتاپ کارت ۹:۱۶ وسط با
   کارت‌های کوچک قبلی/بعدی در دو طرف؛ گذار مکعبی سه‌بعدی؛ ورود با زوم.
   ===================================================================== */
.hh-sv { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; color: #fff; direction: ltr; }   /* چیدمان فیزیکی: قبلی چپ، بعدی راست */
.hh-sv__face, .hh-sv__side span { direction: rtl; }
.hh-sv__back { position: absolute; inset: 0; background: rgba(6, 9, 8, .96); opacity: 0; transition: opacity .22s; }
.hh-sv.is-open .hh-sv__back { opacity: 1; }
.hh-sv.is-closing .hh-sv__back { opacity: 0; }
.hh-sv__stage {
  position: relative; width: 100%; height: 100%; overflow: hidden; background: #080C0A;
  transform: scale(.94); opacity: 0; transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .22s;
}
.hh-sv.is-open .hh-sv__stage { transform: scale(1); opacity: 1; }
.hh-sv.is-closing .hh-sv__stage { transform: scale(.94); opacity: 0; }
.hh-sv__cube { position: absolute; inset: 0; perspective: 1100px; transform-style: preserve-3d; }
.hh-sv__face { position: absolute; inset: 0; backface-visibility: hidden; visibility: hidden; }
.hh-sv__face.is-live, .hh-sv__face.is-in, .hh-sv__face.is-out { visibility: visible; }
.hh-sv__face.is-in, .hh-sv__face.is-out { transition: transform .38s cubic-bezier(.4,.1,.2,1), opacity .38s; }
/* بعدی: وجه فعلی حول لبه‌ی چپ می‌رود، وجه تازه از راست می‌آید (ضربه‌ی راست = بعدی) */
.dir-next .hh-sv__face.is-out { transform-origin: left center; }
.dir-next .hh-sv__face.is-in  { transform-origin: right center; transform: rotateY(-90deg); opacity: .6; }
.dir-next.is-flipping .hh-sv__face.is-out { transform: rotateY(90deg); opacity: .6; }
.dir-next.is-flipping .hh-sv__face.is-in  { transform: rotateY(0deg); opacity: 1; }
/* قبلی: آینه */
.dir-prev .hh-sv__face.is-out { transform-origin: right center; }
.dir-prev .hh-sv__face.is-in  { transform-origin: left center; transform: rotateY(90deg); opacity: .6; }
.dir-prev.is-flipping .hh-sv__face.is-out { transform: rotateY(-90deg); opacity: .6; }
.dir-prev.is-flipping .hh-sv__face.is-in  { transform: rotateY(0deg); opacity: 1; }
.hh-sv__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; background: #080C0A; }
.hh-sv__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,12,10,.68) 0%, rgba(8,12,10,.05) 26%, rgba(8,12,10,.12) 56%, rgba(8,12,10,.9) 100%); pointer-events: none; }
.hh-sv__bars { position: absolute; top: 12px; inset-inline: 14px; display: flex; gap: 4px; z-index: 4; }
.hh-sv__bar { flex: 1; height: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.hh-sv__bar > span { display: block; height: 100%; width: 0; background: #fff; }
.hh-sv__head { position: absolute; top: 26px; inset-inline: 14px; display: flex; align-items: center; gap: 10px; z-index: 3; }
.hh-sv__ava { width: 34px; height: 34px; border-radius: 999px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.6); flex: none; }
.hh-sv__ava img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hh-sv__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-sv__name { font-size: 13px; font-weight: 500; }
.hh-sv__sub { font-size: 12px; opacity: .66; }
.hh-sv__foot { position: absolute; inset-inline: 0; bottom: 0; padding: 20px 18px 26px; display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.hh-sv__headline { font-size: 20px; font-weight: 700; line-height: 1.4; text-wrap: pretty; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.hh-sv__cta { align-self: flex-start; height: 48px; padding: 0 22px; background: #fff; color: #123B36; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; }
.hh-sv__cta:hover { color: #123B36; text-decoration: none; }
.hh-sv__tap { position: absolute; top: 64px; bottom: 120px; border: 0; background: transparent; cursor: pointer; z-index: 5; }
.hh-sv__tap--prev { left: 0; width: 38%; }      /* چپ = قبلی (از چپ می‌آید) */
.hh-sv__tap--next { right: 0; width: 62%; }     /* راست = بعدی (از راست می‌آید) */
/* ⚠️ دکمه‌ی بستن سه ایراد داشت که هر سه اینجا حل می‌شود:
     ۱) rgba(255,255,255,.16) روی عکسِ روشن تقریباً نامرئی بود — حالا
        قرصِ تیره با کادر سفیدِ نیمه‌شفاف و سایه، که روی هر عکسی دیده
        می‌شود.
     ۲) top:14 دقیقاً روی نوار پیشرفت (top:12) می‌افتاد و بینشان گم
        می‌شد — حالا هم‌ترازِ ردیف نام (۲۴) است، زیر نوارها.
     ۳) سطح لمسی ۴۰ برای انگشت کم بود؛ ۴۴ حداقلِ استاندارد است. */
.hh-sv__close {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top)) + 10px);
  inset-inline-end: 14px; z-index: 8;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(8,12,10,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, transform .18s;
}
.hh-sv__close:hover { background: rgba(8,12,10,.8); }
.hh-sv__close:active { transform: scale(.94); }
.hh-sv__close svg { width: 20px; height: 20px; stroke-width: 2.4; }

/* ⚠️ نوار دیجی‌کالا position:fixed با z-index ۲۰۰۰۰ است و روی این اورلی
   (z-index ۹۵) می‌نشیند — یعنی دکمه‌ی بستن و نوار پیشرفت زیرش گم می‌شوند
   و کاربر راهی برای بستن استوری ندارد. padding-top بدنه به عنصر fixed
   نمی‌رسد، پس خودِ اورلی از زیر نوار شروع می‌شود. */
body.store.has-digify-banner .hh-sv { top: var(--digify-banner-h, 56px); }
.hh-sv__side, .hh-sv__arrow { display: none; }

@media (min-width: 720px) {
  /* دسکتاپ: کارت ۹:۱۶ وسط، کارت‌های کوچک دو طرف، فلش‌ها بیرون */
  .hh-sv__stage { width: min(430px, calc(90vh * 9 / 16)); height: min(90vh, calc(430px * 16 / 9)); border-radius: 0; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .hh-sv__close { top: 20px; inset-inline-end: 20px; }
  .hh-sv__side {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
    width: calc(min(430px, calc(90vh * 9 / 16)) * .42); aspect-ratio: 9 / 16; margin: 0 36px; padding: 14px 10px;
    border: 0; background: #111; color: #fff; cursor: pointer; overflow: hidden; position: relative; opacity: .55; transition: opacity .2s, transform .2s;
  }
  .hh-sv__side:hover { opacity: .9; transform: scale(1.02); }
  .hh-sv__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(.7); }
  .hh-sv__side span { position: relative; font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  .hh-sv__side[hidden] { display: none; }
  .hh-sv__arrow {
    display: flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 8;
    width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
    align-items: center; justify-content: center;
  }
  .hh-sv__arrow:hover { background: rgba(255,255,255,.3); }
  .hh-sv__arrow--prev { left: 28px; }
  .hh-sv__arrow--next { right: 28px; }
}

/* ریل استوری موبایل: لبه‌ی چپ محو می‌شود تا برش نیمه‌ی حلقه بد ننماید؛ snap روی آیتم‌ها */
@media (max-width: 719px) {
  .hh-sec-stories .hh-rail { scroll-snap-type: x proximity; scroll-padding-inline-start: 0; }
  .hh-sec-stories .hh-story-item { scroll-snap-align: start; }
  .hh-sec-stories__in { -webkit-mask-image: linear-gradient(to left, #000 88%, transparent); mask-image: linear-gradient(to left, #000 88%, transparent); }
}

/* ── خرید با دیجی‌کالا ─────────────────────────────────────────────────
   ⚠️ نوار بالای صفحه‌ی UI Kit دیجی‌فای position:fixed با top:0، ارتفاع
   ۵۶ و z-index حدود ۲۰۰۰۰ است. هدرِ چسبان ما top:0/z-index:40 دارد، پس
   بدون این دو خط، نوار دیجی‌کالا بعد از اسکرول کاملاً روی لوگو و
   جست‌وجو می‌نشیند و هدر عملاً ناپدید می‌شود. ارتفاع را نمی‌شود از
   بیرون خواند (شدو-دام) و روی موبایل ۴۴ و دسکتاپ ۵۶ است، پس _DigifyKit
   اندازه‌اش را اندازه می‌گیرد و در --digify-banner-h می‌نشاند؛ ۵۶ فقط
   مقدار پشتیبان است تا پیش از اجرای اسکریپت، هدر زیر نوار نرود. */
/* ⚠️ top هدر از متغیر می‌آید و نه از سلکتور: خودِ _Header مقدار
   top:var(--hh-hdr-top,0px) را inline دارد و استایل inline از هر قاعده‌ی
   شیت (بدون important) قوی‌تر است — یک بار همین را با سلکتور نوشتم و
   هدر همان top:0 ماند و زیر نوار قرمز رفت. */
/* Reserve the SDK's responsive height before its asynchronous script mounts. */
:root { --digify-banner-h: 56px; }
@media (max-width: 768px) { :root { --digify-banner-h: 44px; } }
body.store.has-digify-banner {
  padding-top: var(--digify-banner-h, 56px);
  --hh-hdr-top: var(--digify-banner-h, 56px);
}
body.store.has-digify-banner .hdr { top: var(--digify-banner-h, 56px); }

/* ⚠️ همان مشکل برای بقیه‌ی اورلی‌های تمام‌صفحه: padding-top بدنه فقط
   جریان عادی را جابه‌جا می‌کند و به عنصر position:fixed نمی‌رسد، پس
   کشوی کناری و لایت‌باکس هم بالایشان زیر نوار قرمز می‌ماند — یعنی دکمه‌ی
   بستنشان. (نمایشگر استوری خودش بالاتر همین قاعده را دارد.) */
body.store.has-digify-banner .backdrop,
body.store.has-digify-banner .drawer--side,
body.store.has-digify-banner .hh-lightbox,
body.store.has-digify-banner #hh-search-ov,
/* پخش‌کننده‌ی اکسپلور (× بالایش زیر نوار بود و ضربه نوار را می‌بست) و نوار
   خرید چسبانِ دسکتاپ صفحه‌ی محصول (دکمه‌ی «افزودن به سبد» زیر نوار می‌رفت) */
body.store.has-digify-banner .xp-viewer,
body.store.has-digify-banner .pdp-buybar { top: var(--digify-banner-h, 56px) !important; }

/* ── دکمه‌ی بستنِ نوار دیجی‌کالا ──────────────────────────────────────
   بازخورد مالک: نوار طبق قرارداد باید باشد، ولی کاربر بتواند ببندَدش.

   ⚠️ عنصری مستقل و بیرون از <digify-top-banner> است، نه چیزی داخل آن:
   محتوا و ظاهرِ کامپوننت مالِ دیجی‌کالاست و دست‌بردن در شدو-دامش ممنوع.
   چون هم‌سطحِ نوار است، کلیک روی × هیچ‌وقت به خودِ نوار نمی‌رسد و پنجره‌ی
   توضیحاتِ دیجی‌کالا را باز نمی‌کند.

   ⚠️ position:fixed و z-index یک پله بالاتر از ۱۹۹۹۰ (عددی که خودِ SDK
   روی نوار می‌گذارد): نوار fixed است و فرزندِ مستقیم body، پس دکمه‌ای در
   جریانِ عادی رویش نمی‌نشست.

   ⚠️ ارتفاع از همان متغیری می‌آید که _DigifyKit اندازه‌گیری می‌کند
   (موبایل ۴۴، دسکتاپ ۵۶)؛ عددِ ثابت، دکمه را از نوار بیرون می‌زد. */
.hh-digify-x {
  position: fixed;
  top: 0;
  /* RTL: لبه‌ی چپ — همان جایی که نمونه‌ی مرجع هم دارد */
  inset-inline-end: 0;
  z-index: 19991;
  width: 40px;
  height: var(--digify-banner-h, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* نوار سرخِ دیجی‌کالاست (#ED1944)، پس × سفید */
  color: #fff;
  cursor: pointer;
  opacity: .8;
  transition: opacity .18s ease;
}
.hh-digify-x:hover { opacity: 1; }
.hh-digify-x:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* نوار تا بسته نشده جای خودش است؛ با کلاسِ closing به بالا سُر می‌خورد
   و بعد از پایانِ ترنزیشن، اسکریپت خودش و دکمه را حذف می‌کند. */
body.store.has-digify-banner digify-top-banner,
body.store.has-digify-banner .hh-digify-x { transition: transform .22s ease, opacity .18s ease; }
body.store.digify-bar-closing digify-top-banner { transform: translateY(-100%); }
body.store.digify-bar-closing .hh-digify-x { opacity: 0; transform: translateY(-100%); }

/* بستنِ نوار روی صفحه‌ی بی‌جاوااسکریپت معنا ندارد و دکمه‌ای که کار
   نمی‌کند بدتر از نبودنش است. */
.no-js .hh-digify-x { display: none; }

/* ظرفِ المان‌های دیجی‌فای. خودِ تگ دست‌نخورده می‌ماند (مستند اجازه‌ی
   بازنویسی‌اش را نمی‌دهد)؛ فقط فاصله و عرضش کنترل می‌شود تا وسط ستون
   خرید مثل بقیه‌ی جعبه‌ها بنشیند و از کادر بیرون نزند. */
.digify-slot { display: block; margin-top: 12px; }
.digify-slot > * { display: block; max-width: 100%; }
.digify-slot--pdp { margin-top: 14px; }
/* سبد و تسویه: همان جعبه‌ی صفحه‌ی محصول، با فاصله‌ی خودِ صفحه (کانتینرِ
   بیرونی margin دارد، پس اینجا صفر تا دو حاشیه روی هم جمع نشوند). */
.digify-slot--cart { margin-top: 0; }

/* ── پرو مجازی ─────────────────────────────────────────────────────── */
/* input فایل پنهان ولی زنده: required و ارسال بدون جاوااسکریپت باید کار
   کند، پس display:none نه (فوکوس و اعتبارسنجی مرورگر را می‌کُشد). */
.tryon-pick { position: relative; }
.tryon-pick__input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  inset-inline-start: 12px; top: 12px; pointer-events: none;
}
.tryon-pick__input:focus-visible + .tryon-drop { outline: 2px solid var(--brand); outline-offset: 2px; }

.tryon-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 190px; padding: 26px 18px; text-align: center; cursor: pointer;
  border: 1px dashed var(--bd2); background: var(--n25); color: var(--tx2);
  transition: border-color .18s, background .18s, color .18s;
}
.tryon-drop:hover { border-color: var(--brand); background: var(--brand05); color: var(--brand7); }
.tryon-drop.is-over { border-color: var(--brand); background: var(--brand05); color: var(--brand7); border-style: solid; }
.tryon-drop.is-bad { border-color: var(--dang); background: var(--dang50); }
.tryon-drop__title { font-size: 14px; font-weight: 700; color: var(--tx); }
.tryon-drop.is-over .tryon-drop__title, .tryon-drop:hover .tryon-drop__title { color: inherit; }
.tryon-drop__sub { font-size: 12px; line-height: 1.9; max-width: 34ch; }

.tryon-sel { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--bd2); background: var(--surf); }
.tryon-sel__thumb {
  width: 88px; height: 116px; flex: 0 0 auto; object-fit: cover;
  background: var(--n50); border: 1px solid var(--bd);
}
.tryon-sel__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tryon-sel__name {
  font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tryon-sel__size { font-size: 12px; color: var(--mut); }
.tryon-sel__acts { display: flex; gap: 8px; margin-top: auto; }
.tryon-sel__act {
  height: 32px; padding: 0 12px; border: 1px solid var(--bd2); background: transparent;
  color: var(--tx2); font-family: inherit; font-size: 12px; cursor: pointer;
}
.tryon-sel__act:hover { border-color: var(--brand); color: var(--brand7); }
.tryon-sel__act--del:hover { border-color: var(--dang); color: var(--dang); }

.tryon-pick__alt { display: flex; gap: 8px; margin-top: 8px; }
.tryon-pick__btn {
  flex: 1 1 0%; height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--bd2); background: var(--surf); color: var(--tx2);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.tryon-pick__btn:hover { border-color: var(--brand); color: var(--brand7); }
.tryon-pick__err { margin: 8px 0 0; font-size: 12px; line-height: 1.9; color: var(--dang); }

/* ⚠️ list-style صریح: ریست سراسری سایت نشانه‌ی li را برمی‌دارد و بدون
   این خط، سه نکته‌ی راهنما مثل سه خط متن بی‌ربط پشت هم دیده می‌شوند. */
.tryon-tips { margin: 14px 0 16px; padding-inline-start: 18px; font-size: 12px; color: var(--tx2); line-height: 2; list-style: disc; }
.tryon-tips li { list-style: inherit; }
.tryon-consent {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
  color: var(--tx2); line-height: 1.9; cursor: pointer;
}
.tryon-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: 0 0 auto; }

.tryon-submit {
  width: 100%; height: 52px; margin-top: 16px; border: 0; background: var(--brand); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.tryon-submit:disabled { cursor: default; opacity: .75; }
.tryon-submit.is-busy::before {
  content: ""; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; border-radius: 999px; animation: tryonSpin .7s linear infinite;
}

/* صفحه‌ی انتظار */
.tryon-wait { border: 1px solid var(--bd); background: var(--surf); padding: 20px 18px; }
.tryon-wait__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.tryon-wait__title { font-size: 14px; font-weight: 500; }
.tryon-wait__pct { margin-inline-start: auto; font-size: 13px; font-weight: 700; color: var(--brand7); font-variant-numeric: tabular-nums; }
.tryon-wait__spin {
  width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid var(--bd2);
  border-top-color: var(--brand); border-radius: 999px; animation: tryonSpin .8s linear infinite;
}
.tryon-bar { height: 6px; background: var(--n100); overflow: hidden; }
.tryon-bar__fill {
  display: block; height: 100%; width: 0;
  /* راست‌چین: نوار از سمت راست پر می‌شود، پس تیره‌ترین رنگ سمت راست
     (نقطه‌ی شروع) و روشن‌تر سمت نوکِ در حال رشد. */
  background: linear-gradient(to left, var(--brand), var(--brand5));
  transition: width .4s linear;
}
.tryon-wait__step { margin-top: 10px; font-size: 12.5px; color: var(--tx); }
.tryon-wait__hint { margin-top: 4px; font-size: 12px; color: var(--tx2); line-height: 1.9; }

@keyframes tryonSpin { to { transform: rotate(360deg); } }
[data-anim="off"] .tryon-wait__spin, [data-anim="off"] .tryon-submit.is-busy::before { animation: none; }

/* ⚠️ ۷۱۹ و نه ۴۸۰: این پروژه فقط دو مرز دارد (۷۲۰ و ۱۱۲۰) و آزمون
   frontend/layout.test.js هر مرزِ سومی را رد می‌کند — تا طرح با نماهای
   واقعیِ فایل طراحی یکی بماند و کم‌کم به ده مرزِ سلیقه‌ای نرسد. */
@media (max-width: 719px) {
  .tryon-drop { min-height: 158px; padding: 20px 14px; }
  .tryon-sel__thumb { width: 72px; height: 96px; }
}

/* ── روانیِ گذار استوری روی گوشی‌های میان‌رده ─────────────────────────
   ⚠️ دو وجهِ تمام‌صفحه که با rotateY می‌چرخند، اگر از قبل لایه‌ی
   کامپوزیت نداشته باشند، در هر فریم دوباره رسم می‌شوند — همان لگی که
   روی سامسونگ دیده شد. translateZ(0) آن‌ها را یک‌بار لایه می‌کند و
   چرخش دیگر فقط جابه‌جایی لایه است، نه رسمِ دوباره‌ی تصویر. */
.hh-sv__face { transform: translateZ(0); }
.hh-sv__media { will-change: auto; backface-visibility: hidden; }

/* ⚠️ سایه‌ی روی تصویر، یک گرادیانِ تمام‌صفحه است که با هر فریمِ چرخش
   دوباره رسم می‌شد. جدا کردنش در لایه‌ی خودش، آن را از چرخه‌ی رسم
   بیرون می‌برد. */
.hh-sv__shade { transform: translateZ(0); }

/* کسی که «کاهش حرکت» را روشن کرده، مکعب سه‌بعدی نمی‌خواهد. */
@media (prefers-reduced-motion: reduce) {
  .hh-sv__face.is-in, .hh-sv__face.is-out { transition: opacity .2s !important; }
  .dir-next .hh-sv__face.is-in, .dir-prev .hh-sv__face.is-in { transform: none !important; }
  .dir-next.is-flipping .hh-sv__face.is-out,
  .dir-prev.is-flipping .hh-sv__face.is-out { transform: none !important; opacity: 0 !important; }
}

/* ── زیرمنوی دسته‌بندی در نوار دسکتاپ ─────────────────────────────────
   ⚠️ فقط روی دستگاه دارای هاور. روی لمس، همان لینکِ دسته باز می‌شود و
   زیرمنو اصلاً ساخته نمی‌شود — منوی کشویی موبایل کار خودش را می‌کند. */
.hh-navitem { position: relative; display: inline-flex; }
.hh-navsub { display: none; }

@media (hover: hover) and (pointer: fine) {
  .hh-navsub {
    position: absolute; top: 100%; inset-inline-start: 0; z-index: 60;
    min-width: 210px; padding: 6px 0; margin-top: 6px;
    background: var(--surf); border: 1px solid var(--bd); box-shadow: var(--sh-md);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s, transform .16s, visibility .16s;
  }
  /* ⚠️ پلِ نامرئی تا خودِ منو: بدون این، حرکتِ ماوس از عنوان به زیرمنو از
     روی فاصله‌ی ۶ پیکسلی رد می‌شود، هاور می‌پرد و منو بسته می‌شود. */
  .hh-navsub::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; }

  .hh-navitem:hover .hh-navsub,
  .hh-navitem:focus-within .hh-navsub { opacity: 1; visibility: visible; transform: translateY(0); }

  .hh-navsub__item, .hh-navsub__all {
    padding: 8px 14px; font-size: 13px; color: var(--tx2); text-decoration: none; white-space: nowrap;
  }
  .hh-navsub__item:hover, .hh-navsub__all:hover { background: var(--brand05); color: var(--brand7); text-decoration: none; }
  .hh-navsub__all { margin-top: 4px; border-top: 1px solid var(--bd); color: var(--brand); font-weight: 500; }
}

/* ── مگامنوی «همه دسته‌بندی‌ها» ────────────────────────────────────────
   نسخه‌ی دوم. بازخورد مالک روی نسخه‌ی اول (سه ستونِ متن): «خیلی ضعیفه».

   زبانِ تصویری از خودِ سایت آمده، نه از یک قالبِ عمومی:
   • کاشی‌ها همان آیکن دایره‌ایِ ریل «خرید بر اساس دسته‌بندی» را دارند،
     روی همان مربعِ brand05 با قابِ brand1 — کاربر منو و صفحه را یک چیز
     می‌بیند.
   • گوشه‌ها تیز (border-radius:0) مثل کل فروشگاه.
   • ستونِ تبلیغاتیِ تیره با brand9، همان رنگِ نوار بالا و پس‌زمینه‌ی هیرو.

   ⚠️ رفتار همان .hh-navsub است (hover و focus-within، بدون JS)، و فقط
   روی دستگاه دارای هاور. روی لمس، لینکِ /categories مستقیم باز می‌شود. */
.hh-mega { display: none; }

@media (hover: hover) and (pointer: fine) {
  .hh-mega {
    /* ⚠️ display باید همین‌جا برگردد — نبودنش باگِ نسخه‌ی اول بود:
       پنل تا ابد display:none می‌ماند و هاور فقط opacity را عوض می‌کرد. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 61;
    width: min(900px, calc(100vw - 80px));
    margin-top: 10px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: 0;
    box-shadow: rgba(24, 20, 14, .14) 0 18px 44px -12px, rgba(24, 20, 14, .06) 0 2px 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility .18s;
  }
  /* پلِ نامرئی تا خودِ منو (فاصله‌ی ۱۰ پیکسلی) — بی‌این هاور وسط راه می‌پرد */
  .hh-mega::before { content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; }

  .hh-megaitem:hover .hh-mega,
  .hh-megaitem:focus-within .hh-mega { opacity: 1; visibility: visible; transform: translateY(0); }


  /* ── بخش اصلی ── */
  .hh-mega__main { padding: 18px 20px 20px; min-width: 0; }

  .hh-mega__top {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--bd);
  }
  .hh-mega__label { font-size: 12px; font-weight: 700; color: var(--mut); letter-spacing: .2px; }
  .hh-mega__all {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: none;
  }
  .hh-mega__all:hover { color: var(--brand7); text-decoration: none; }
  .hh-mega__all svg { transition: transform .18s ease; }
  .hh-mega__all:hover svg { transform: translateX(-3px); }

  .hh-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .hh-mega__cell { min-width: 0; }

  .hh-mega__tile {
    display: flex; align-items: center; gap: 12px;
    padding: 8px;
    border: 1px solid transparent;
    color: var(--tx); text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
  }
  .hh-mega__tile:hover { background: var(--brand05); border-color: var(--brand1); text-decoration: none; color: var(--tx); }

  .hh-mega__ico {
    flex: 0 0 auto;
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand05); border: 1px solid var(--brand1); color: var(--brand7);
    transition: background .16s ease, color .16s ease, border-color .16s ease;
  }
  .hh-mega__tile:hover .hh-mega__ico { background: var(--brand); border-color: var(--brand); color: #fff; }
  /* کاشی با عکسِ دسته (PNG شفاف): زمینه‌ی روشن می‌ماند و عکس contain می‌شود؛
     پر شدنِ برندیِ حالت هاور فقط مالِ آیکن است. */
  .hh-mega__ico--img { background: var(--surf2); padding: 3px; }
  .hh-mega__tile:hover .hh-mega__ico--img { background: var(--surf2); border-color: var(--brand1); }
  .hh-mega__ico--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

  .hh-mega__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
  /* ⚠️ دو خط و نه سه‌نقطه: «پیراهن آستین‌کوتاه» در ستونِ ~۱۲۰ پیکسلی جا
     نمی‌شد و «پیراهن آستین‌ک…» می‌شد — نامِ بریده‌ی دسته بدتر از دوخطی است. */
  .hh-mega__name {
    font-size: 13.5px; font-weight: 700; line-height: 21px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hh-mega__tile:hover .hh-mega__name { color: var(--brand7); }
  .hh-mega__n { font-size: 11.5px; color: var(--mut); }

  /* S1: زیردسته‌ها در مگامنو رندر نمی‌شوند (خواست مالک) — ستون‌های
     نابرابر (۱۳ زیردسته زیر «شلوار») منو را می‌شکست. مگامنو فقط کاشیِ
     دسته‌های اصلی است (حداکثر ۴ ردیف کاشی). */

  /* ── ستون تبلیغاتی ── */
  .hh-mega__promo {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
    padding: 22px 20px 20px;
    background: linear-gradient(160deg, var(--brand8) 0%, var(--brand9) 70%);
    color: #fff; text-decoration: none;
  }
  .hh-mega__promo:hover { text-decoration: none; color: #fff; }

  /* نشانِ همهمه، بزرگ و کم‌رنگ در پس‌زمینه */
  .hh-mega__pmark {
    position: absolute; top: -18px; inset-inline-end: -28px;
    width: 150px; height: auto; opacity: .09;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
    pointer-events: none;
  }
  .hh-mega__promo:hover .hh-mega__pmark { transform: rotate(-6deg) scale(1.05); opacity: .13; }

  .hh-mega__kick {
    position: relative; align-self: flex-start;
    font-size: 11px; font-weight: 600; letter-spacing: .3px;
    padding: 3px 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  }
  .hh-mega__ptitle { position: relative; font-size: 22px; font-weight: 600; line-height: 1.3; }
  .hh-mega__ptext { position: relative; font-size: 12.5px; line-height: 22px; color: rgba(255,255,255,.78); }
  .hh-mega__pbtn {
    position: relative; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; height: 38px; padding: 0 16px;
    background: #fff; color: var(--brand9); font-size: 12.5px; font-weight: 700;
    transition: gap .18s ease;
  }
  .hh-mega__promo:hover .hh-mega__pbtn { gap: 10px; }

  @media (prefers-reduced-motion: reduce) {
    .hh-mega, .hh-mega__pmark, .hh-mega__all svg { transition: none; }
  }
}

/* جداکننده‌ی متنی — به‌جای «·» که کنار عدد فارسی با «۰» اشتباه
   می‌شد («۱۴۰۵ · ۴ دقیقه» ≈ «۱۴۰۵ ۰ ۴»). یک خط نازک عمودی است. */
.hh-sep{display:inline-block;width:1px;height:.9em;background:currentColor;opacity:.35;vertical-align:-.1em;margin-inline:.45em;flex:0 0 auto}

/* رد لمس: کروم اندروید روی هر لینک/دکمه‌ای که لمس شود یک مستطیل آبی
   می‌کشد (روی کارت محصول کل کارت آبی می‌شد — بازخورد مالک). قبلاً فقط
   در store.catalog.css خاموش بود که صفحه‌ی اصلی و «محصولات مشابه» آن را
   بار نمی‌کنند. حالا سراسری؛ بازخورد لمس با :active خودِ عناصر است. */
html { -webkit-tap-highlight-color: transparent; }
.hh-card:active .hh-card-media { opacity: .88; transition: opacity .1s; }

/* ═══ فرم کاشی دسته‌بندی ═══════════════════════════════════════════
   (برگشت به خواست مالک: «فرم قبلی خیلی بهتر بود».) کاشی‌ها گوشه‌گرد، و ردیف
   با دو گوشه‌ی اریب باز و بسته می‌شود — اولین کاشی گوشه‌ی بالا-راست بریده،
   آخرین کاشی گوشه‌ی پایین-چپ. برش با mask تا گردیِ بقیه‌ی گوشه‌ها بماند. */
.hh-tile__box { border-radius: 16px !important; }
.hh-tile:first-child .hh-tile__box {
  -webkit-mask-image: linear-gradient(225deg, transparent 0 22%, #000 22%);
          mask-image: linear-gradient(225deg, transparent 0 22%, #000 22%);
}
.hh-tile:last-child .hh-tile__box {
  -webkit-mask-image: linear-gradient(45deg, transparent 0 22%, #000 22%);
          mask-image: linear-gradient(45deg, transparent 0 22%, #000 22%);
}

/* کاشی پایانیِ ریل دسته‌بندی: «همه دسته‌ها» — رنگ تیره‌ی برند (خواسته‌ی مالک) */
.hh-tile--all .hh-tile__box { background: #13413b !important; border: 1px solid #13413b !important; }

/* ═══ کارت کالکشن — اتیکتِ آویز (نمونه‌ی مالک) ═══════════════════════
   اتیکت کرم با گوشه‌های گرد، سوراخِ فلزی بالا-چپ، طنابِ سبزِ گره‌خورده، و یک
   اتیکتِ باریکِ سبز که از پشت بیرون زده: شمار محصول (عمودی)، بارکد، HAMHAME.
   بدنه: عکس، کیکر، عنوان، خطِ فلش‌دار. جهت‌ها فیزیکی (چپ = چپ). */
.hh-cc { position: relative; display: block; text-decoration: none; color: var(--n900); margin-top: 26px; padding-left: 54px; }
/* ریل کالکشن: دقیقاً ۴ کارت در دسکتاپ، ۳ در تبلت، ۲ در موبایل — هیچ‌کدام نصفه نمی‌افتد */
.hh-cc--rail { flex: 0 0 calc((100% - 84px) / 4); min-width: 0; }
@media (max-width: 1119px) { .hh-cc--rail { flex-basis: calc((100% - 56px) / 3); } }
.hh-cc--grid { width: 100%; }
.hh-cc__side {
  position: absolute; left: 0; top: 16px; width: 62px; height: 58%; z-index: 0;
  background: #113B33; color: #F3EEE3; border-radius: 6px; transform: rotate(-3deg); transform-origin: 50% 0;
  box-shadow: -2px 6px 16px rgba(0,0,0,.18);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 54px 0 12px;
}
.hh-cc__side b { font-size: 22px; font-weight: 900; line-height: 1; }
.hh-cc__side small { font-size: 11px; opacity: .85; margin-top: 4px; writing-mode: vertical-rl; transform: rotate(180deg); }
.hh-cc__side i { flex: 1 1 auto; width: 22px; margin: 12px 0; background: repeating-linear-gradient(0deg, #F3EEE3 0 2px, transparent 2px 4px, #F3EEE3 4px 5px, transparent 5px 8px, #F3EEE3 8px 11px, transparent 11px 13px); opacity: .9; }
.hh-cc__side em { font-style: normal; font-size: 8px; letter-spacing: 1.5px; font-family: system-ui, sans-serif; opacity: .8; }
.hh-cc__rope { position: absolute; left: 40px; top: -22px; width: 80px; height: 70px; z-index: 3; pointer-events: none; }
.hh-cc__card {
  display: block; position: relative; z-index: 1; background: #F3EEE4; border-radius: 12px; padding: 50px 12px 14px;
  box-shadow: 0 10px 26px rgba(60,50,30,.14), inset 0 0 0 1px #E4DDCF;
  -webkit-mask-image: radial-gradient(circle 9px at 30px 26px, transparent 8.5px, #000 9.5px);
          mask-image: radial-gradient(circle 9px at 30px 26px, transparent 8.5px, #000 9.5px);
}
.hh-cc__grommet { position: absolute; left: 30px; top: 26px; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 999px; box-shadow: 0 0 0 4px #B9B2A6, inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 5px rgba(0,0,0,.08); }
.hh-cc__media { display: block; aspect-ratio: 1 / 1.05; overflow: hidden; background: var(--n100); border-radius: 3px; }
.hh-cc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.hh-cc__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px 0; }
.hh-cc__kind { font-size: 10px; letter-spacing: 2px; color: var(--n500); font-family: system-ui, sans-serif; direction: ltr; text-align: end; }
.hh-cc__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.hh-cc__go { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #134438; }
.hh-cc__go::before { content: ""; flex: 1 1 auto; height: 1.5px; background: #134438; }
.hh-cc__go svg { width: 18px; height: 18px; flex: 0 0 auto; }
@keyframes hhTagSwing { 0% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 60% { transform: rotate(1.5deg); } 100% { transform: rotate(0); } }
.hh-grid-cc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; align-items: start; padding: 0 4px; }
@media (max-width: 1119px) { .hh-grid-cc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 719px) { .hh-grid-cc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; } .hh-cc { padding-left: 34px; } .hh-cc__card { padding: 40px 8px 12px; } .hh-cc__title { font-size: 13.5px; } .hh-cc__side { width: 42px; padding-top: 42px; } .hh-cc__side b { font-size: 17px; } .hh-cc__rope { left: 22px; top: -18px; width: 64px; height: 56px; } }

/* کاشی «همه دسته‌ها»: زمینه‌ی تیره‌ی برند با آیکنِ چهارخانه‌ی سفید (بدون
   حلقه‌ی دور آیکن — بازخورد مالک). */
.hh-tile--all .hh-tile__box { background: #13413b !important; border: 1px solid #13413b !important; }

/* ── نوار اینستاگرام (پایین ریل کالکشن‌ها) ───────────────────────── */
.hh-insta {
  position: relative; display: flex; align-items: center; gap: 16px; margin-top: 18px;
  padding: 20px 24px; border-radius: 6px; text-decoration: none; color: #F3EEE3;
  background: #113B33;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px), linear-gradient(100deg, #155044, #0F3A31 60%, #16514A);
  box-shadow: 0 10px 26px rgba(10,40,30,.18);
  -webkit-mask-image: linear-gradient(45deg, transparent 0 18px, #000 18px);
          mask-image: linear-gradient(45deg, transparent 0 18px, #000 18px);
  transition: transform .25s, box-shadow .25s;
}
.hh-insta::before { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(240,230,210,.55); pointer-events: none; border-radius: 3px; }
.hh-insta > * { position: relative; }
.hh-insta__ico {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 999px;
  border: 1.5px solid rgba(243,238,227,.85); background: transparent; color: #F3EEE3;
  display: flex; align-items: center; justify-content: center;
}
.hh-insta__txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.hh-insta__txt b { font-size: 14.5px; font-weight: 600; }
.hh-insta__txt small { font-size: 12px; opacity: .72; }
.hh-insta__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: 999px; background: #F3EEE3; color: #113B33; font-size: 13px; font-weight: 500;
  outline: 1px dashed #BDB39F; outline-offset: -5px; transition: gap .2s;
}
@media (max-width: 719px) {
  /* موبایل (بازخورد مالک: نسخه‌ی تک‌ردیفی خوب نبود): آیکن + دو خط متن در
     یک ردیف، دکمه‌ی تمام‌عرض زیرش. جمع‌وجور (~۱۳۰px) ولی خوانا. */
  .store .hh-insta { flex-wrap: wrap; gap: 10px 12px; padding: 16px 14px 14px; border-radius: 4px; }
  .store .hh-insta__ico { width: 40px; height: 40px; }
  .store .hh-insta__ico svg { width: 20px; height: 20px; }
  .store .hh-insta__txt { flex: 1 1 0%; min-width: 0; }
  .store .hh-insta__txt b { font-size: 13.5px; line-height: 21px; }
  .store .hh-insta__txt small { display: none; } /* موبایل: فقط تیتر درشت (خواسته‌ی مالک) */
  .store .hh-insta__btn { flex: 1 1 100%; justify-content: center; height: 40px; font-size: 13px; }
}

/* ═══ کارت محصول — یک تعریف، همه‌جا ═══════════════════════════════════
   (بازطراحی به خواست مالک: «کارت‌ها بهتر می‌تواند پیاده شود، UI یکدست
   نیست».) قبلاً همه‌ی اندازه‌ها inline بود و هر ریل/شبکه با !important
   روی‌شان می‌نوشت. حالا کارت فقط کلاس دارد؛ همین‌جا یک‌بار تعریف می‌شود
   و موبایل پایین‌تر فقط اندازه‌ها را کوچک می‌کند.
   زبان بصری (مدل «اتیکت» که مالک از آزمایشگاه انتخاب کرد، بدون روبان قرمز):
   گوشه‌ی تیز؛ عکس در قابِ یک‌پیکسلی؛ بدنه هم در همان قاب (بدون خط بالا) تا
   کارت یک اتیکتِ یک‌تکه شود؛ سطرِ قیمت با خطِ نقطه‌چین از بقیه جدا. */
.hh-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--tx); }
.hh-card-media {
  position: relative; aspect-ratio: 1 / 1.2; flex: 0 0 auto; overflow: hidden;
  border-radius: 0; background: var(--n50);
  box-shadow: inset 0 0 0 1px var(--bd2);
  transition: box-shadow .25s;
}
.hh-card-track {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; direction: ltr;
}
.hh-card-track > img, .hh-card-track > noscript > img, .hh-card-empty {
  flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.hh-card-alt {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; pointer-events: none;
}
.hh-card-badges {
  position: absolute; top: 10px; inset-inline-start: 10px; display: flex; flex-direction: column;
  gap: 5px; align-items: flex-start; pointer-events: none;
}
.hh-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 0;
  font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: var(--brand);
  box-shadow: 0 1px 3px rgba(20,16,10,.16); letter-spacing: 0;
}
.hh-badge--new { background: var(--brand); }
.hh-badge--sale { background: var(--sale); }
.hh-badge--out { background: rgba(30,26,22,.72); }
.hh-wish {
  position: absolute; top: 10px; inset-inline-end: 10px; width: 32px; height: 32px; border: 0;
  border-radius: var(--r-pill); background: rgba(255,255,255,.88); color: var(--n700);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(40,30,16,.12); transition: background .2s, transform .2s;
}
.hh-card-body {
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 0%;
  border: 1px solid var(--bd2); border-top: 0; background: var(--surf);
}
.hh-card-title {
  font-size: 13px; line-height: 20px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: pretty; transition: color .2s;
}
.hh-card-meta { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.hh-card-swatches { display: flex; gap: 2px; align-items: center; margin-inline-start: -3px; }
.hh-swatch { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hh-swatch__dot {
  width: 12px; height: 12px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(40,30,16,.18); outline-offset: 2px; transition: outline-color .2s;
}
.hh-card-colors { font-size: 11px; color: var(--mut); font-weight: 500; flex: 0 0 auto; }
.hh-card-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--bd2);
}
.hh-card-price__now { font-size: 15.5px; font-weight: 700; color: var(--tx); letter-spacing: -.1px; }
.hh-card-price__unit { font-size: 11px; font-weight: 400; color: var(--tx2); }
.hh-card-price__was { display: inline-flex; align-items: baseline; gap: 5px; }
.hh-card-price__old { font-size: 11.5px; color: var(--mut); text-decoration: line-through; }
.hh-card-price__pct { font-size: 11px; font-weight: 700; color: var(--sale); }
.hh-card-stock { font-size: 10.5px; color: var(--warn); font-weight: 500; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.hh-card-stock__bar { flex: 1 1 0%; height: 4px; border-radius: var(--r-pill); background: var(--warn50); overflow: hidden; }
.hh-card-stock__bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--warn); }

/* ═══ صفحه‌ی اصلی — یکدستی بخش‌ها ═══════════════════════════════════
   یک قاعده برای همه: سربرگ بخش (تیتر + لینک «همه» به شکل چیپ)، گوشه‌ی
   تیز روی هر سطح و کارت (بازخورد مالک)، فقط دکمه‌ی علاقه‌مندی و چیپ‌های ریز
   قرصی. قبلاً هر بخش با یک گوشه و یک شکل لینک آمده بود. */
.hh-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.hh-sec-head h2 { margin: 0; font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.hh-more {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 0; background: #17191C;
  color: #fff; font-size: 13px; font-weight: 400; text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
.hh-more::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10'/%3E%3Cpath d='M16 7l-9 0l0 9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10'/%3E%3Cpath d='M16 7l-9 0l0 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* هدف لمسی ۴۴ (store.sonnat.css) بدون بزرگ‌شدن خودِ چیپ: ناحیه‌ی نامرئی دور آن */
.store .hh-more { min-height: 38px; position: relative; }
.store .hh-more::before { content: ""; position: absolute; inset: -3px -2px; }
/* روی نوار قرمز فروش ویژه: سفید، متن تیره */
.hh-more--light { background: #fff; color: #17191C; }
.hh-more--light:hover { background: #F3F1EC; color: #17191C; }

/* تب‌های «جدیدترین»: چیپ قرصی (قبلاً مستطیل تیز) */
.hh-hometab {
  flex: 0 0 auto; height: 36px; padding: 0 16px; border: 1px solid var(--bd2); border-radius: 0;
  background: var(--surf); color: var(--tx2); font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.hh-hometab.is-on { background: var(--brand9); border-color: var(--brand9); color: #fff; font-weight: 600; }

/* بلوک فروش ویژه: کل بلوک یک کارت با گوشه‌ی نرم؛ کارت‌های داخلش همان
   کارت عمومی روی زمینه‌ی روشن (پس‌زمینه‌ی عکس سفید تا با صورتی نزند). */
.hh-sale { border-radius: 0; overflow: hidden; box-shadow: 0 10px 30px rgba(120,32,24,.10); }
.hh-sale-body .hh-card-media { background: #fff; }
.hh-sale-body .hh-railcard { flex: 0 0 auto; width: 232px; }

/* سطح‌های بزرگ خانه */
.hh-hero__frame { border-radius: 0; overflow: hidden; }
.hh-midbanner { border-radius: 20px !important; }
/* جعبه‌ی متن سئو — «سویشرت»: پارچه‌ی کرم با دوختِ لبه، یقه‌ی کشباف در گوشه‌ی
   بالا-چپ و برچسب سبز «همهمه». همه‌چیز CSS؛ متن همان متن پنل است. */
.hh-seo-card {
  position: relative; overflow: hidden; border-radius: 14px !important; padding: 30px 30px 30px 250px !important;
  background: #F3EEE4 !important;
  background-image: repeating-linear-gradient(0deg, rgba(120,100,70,.04) 0 1px, transparent 1px 3px) !important;
  box-shadow: inset 0 -12px 0 #ECE6DA, inset 0 -13px 0 #D9D1C2;
}
.hh-seo-card::before { content: ""; position: absolute; inset: 8px 8px 20px; border: 1.5px dashed #CDC4B1; border-radius: 10px; pointer-events: none; }
.hh-seo-card__collar {
  position: absolute; left: -60px; top: -130px; width: 300px; height: 300px; border-radius: 999px;
  background: repeating-linear-gradient(90deg, #E5DFD2 0 3px, #F0EAE0 3px 7px);
  box-shadow: inset 0 0 0 22px #F3EEE4, inset 0 0 0 24px #D9D1C2, 0 4px 10px rgba(60,50,30,.12);
  pointer-events: none;
}
.hh-seo-card__collar i {
  position: absolute; left: 118px; top: 148px; padding: 6px 12px; background: #134438; color: #F3EEE3;
  font-style: normal; font-size: 12.5px; font-weight: 800; border-radius: 3px; outline: 1px dashed rgba(243,238,227,.5); outline-offset: -4px;
  transform: rotate(-4deg);
}
.hh-seo-card > h2, .hh-seo-card > .hh-prose { position: relative; }
@media (max-width: 1119px) {
  /* موبایل: نیمِ یقه در گوشه‌ی بالا-چپ می‌ماند تا معلوم باشد تیشرت است؛ متن زیرش شروع می‌شود */
  .hh-seo-card { padding: 96px 18px 26px !important; }
  .hh-seo-card__collar { width: 220px; height: 220px; left: -70px; top: -125px; box-shadow: inset 0 0 0 16px #F3EEE4, inset 0 0 0 18px #D9D1C2, 0 4px 10px rgba(60,50,30,.12); }
  .hh-seo-card__collar i { left: 88px; top: 130px; font-size: 11px; padding: 4px 9px; }
}
/* کارت دوخت عمومی — متن سئو/راهنمای دسته: پارچه‌ی کرم، دوختِ لبه، برچسب سبز کوچک */
.hh-stitch {
  position: relative; overflow: hidden; border-radius: 12px; padding: 30px 28px 28px;
  background: #F3EEE4; background-image: repeating-linear-gradient(0deg, rgba(120,100,70,.04) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 -10px 0 #ECE6DA, inset 0 -11px 0 #D9D1C2;
}
.hh-stitch::before { content: ""; position: absolute; inset: 8px 8px 18px; border: 1.5px dashed #CDC4B1; border-radius: 8px; pointer-events: none; }
.hh-stitch__tag {
  position: absolute; top: 0; inset-inline-start: 34px; height: 28px; padding: 0 12px; display: inline-flex; align-items: center;
  background: #134438; color: #F3EEE3; font-size: 11px; font-weight: 500; letter-spacing: .3px; border-radius: 0 0 4px 4px;
  outline: 1px dashed rgba(243,238,227,.5); outline-offset: -4px;
}
.hh-stitch > .hh-prose, .hh-stitch > h2 { position: relative; }
.hh-stitch .hh-prose { color: #3B3831; }
@media (max-width: 1119px) { .hh-stitch { padding: 32px 18px 24px; border-radius: 10px; } }
/* دکمه‌ی دستیار خرید (فهرست محصولات): قرصی، وزن معمولی؛ روی موبایل فقط عنوان */
.hh-ai-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--brand); border-radius: 999px; background: var(--brand05); color: var(--brand7); font-size: 13px; font-weight: 400; line-height: 1.5; text-decoration: none; }
.hh-ai-pill svg { flex: 0 0 auto; }
.hh-ai-pill small { font-size: inherit; opacity: .85; }
@media (max-width: 719px) { .hh-ai-pill small { display: none; } }
.hh-mag-hero__media { border-radius: 0 !important; }
.hh-mag-thumb { border-radius: 0 !important; }
.hh-xpcard { border-radius: 0 !important; border: 0 !important; }
.hh-hero-cta, .hh-midbanner__cta { border-radius: 0 !important; }
.hh-railcard { flex: 0 0 auto; width: 244px; }

/* ═══ استوری — دایره (برگشت به خواست مالک) ═══════════════════════════
   سه لایه: حلقه‌ی گرادیان، فاصله‌ی سفید، عکس. */
.hh-story { position: relative; display: block; width: 78px; height: 78px; flex: 0 0 auto; }
.hh-story__ring, .hh-story__pad, .hh-story__pic { position: absolute; display: block; border-radius: 999px; }
.hh-story__ring { inset: 0; background: conic-gradient(from 210deg, rgb(192,54,44), rgb(217,162,43), rgb(61,161,148), rgb(192,54,44)); }
.hh-story__pad { inset: 2.5px; background: var(--surf); }
.hh-story__pic { inset: 4.5px; background: var(--n50); overflow: hidden; }
.hh-story__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ═══ خرید بر اساس رنگ ═══════════════════════════════════════════════
   کاشی‌های رنگی به ترتیب بیشترین موجودی (Index.cshtml.cs). گوشه‌ی تیز. */
.hh-colors { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
.hh-color {
  position: relative; aspect-ratio: 1 / 1.15; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px; text-decoration: none; color: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(40,30,16,.08);
  /* بافتِ کِشباف: ستون‌های عمودی + حلقه‌های ریزِ افقی روی رنگِ پایه (نمونه‌ی مالک) */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, rgba(0,0,0,.08) 2px 4px, rgba(255,255,255,.04) 4px 6px, rgba(0,0,0,.05) 6px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px, rgba(255,255,255,.06) 3px 4px, transparent 4px 6px);
  background-blend-mode: overlay;
}
.hh-color.is-light { color: var(--tx); }
.hh-color b { font-size: 12.5px; font-weight: 500; }
.hh-color small { font-size: 10.5px; opacity: .75; }
.hh-color::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.28), transparent 55%); }
.hh-color.is-light::after { background: linear-gradient(to top, rgba(255,255,255,.35), transparent 55%); }
.hh-color > * { position: relative; z-index: 1; }
@media (max-width: 1119px) { .hh-colors { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 719px) {
  .hh-colors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .hh-color { aspect-ratio: 1 / 1; padding: 8px; }
  .hh-color b { font-size: 12px; }
  .hh-color small { font-size: 10px; white-space: nowrap; }
}

/* ═══ نوار اعتماد — چهار برچسبِ پارچه‌ایِ سبز (نمونه‌ی مالک) ═══════════
   هر قلم یک تکه پارچه‌ی سبز تیره با بافتِ ریز، دوختِ نقطه‌چینِ کرم دور تا دور،
   و گوشه‌ی پایین-چپ بریده. فقط CSS. */
.hh-trust2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hh-trust2__item {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 20px; min-width: 0; min-height: 112px;
  color: #F3EEE3; background: #113B33;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px), linear-gradient(#155044, #0F3A31);
  box-shadow: 0 8px 22px rgba(10,40,30,.22);
  -webkit-mask-image: linear-gradient(45deg, transparent 0 16px, #000 16px);
          mask-image: linear-gradient(45deg, transparent 0 16px, #000 16px);
}
.hh-trust2__item::before { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(240,230,210,.55); pointer-events: none; }
.hh-trust2__ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(243,238,227,.9); color: #F3EEE3;
}
.hh-trust2__ico svg { width: 24px; height: 24px; }
.hh-trust2__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hh-trust2__txt b { font-size: 15px; font-weight: 600; line-height: 1.5; }
.hh-trust2__txt small { font-size: 12px; line-height: 1.7; color: rgba(243,238,227,.72); text-wrap: pretty; }
@media (max-width: 1119px) {
  .hh-trust2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hh-trust2__item { padding: 16px 14px; min-height: 92px; gap: 11px; }
  .hh-trust2__item::before { inset: 6px; }
  .hh-trust2__ico { width: 38px; height: 38px; }
  .hh-trust2__ico svg { width: 19px; height: 19px; }
  .hh-trust2__txt b { font-size: 12.5px; }
  .hh-trust2__txt small { font-size: 10.5px; line-height: 1.6; }
}

/* ═══ تبلیغ پرو مجازی — جای بنر میانی ═══════════════════════════════
   متن + نمایشِ قبل/بعد. --cut درصدِ خطِ مقایسه است (اسکریپت Index). */
.hh-tryon {
  /* دسکتاپ: خودِ تصویرِ نمونه‌ی مالک پس‌زمینه است (متن‌هایش پاک شده، جای عکس
     شفاف است) و عکس/متن با درصدهای همان تصویر روی آن می‌نشینند. نسبتِ بلوک
     همان نسبتِ تصویر است تا کِش نیاید. موبایل: نسخه‌ی CSS (پایین). */
  position: relative; color: #F3EEE3; aspect-ratio: 1989 / 720;
  background: url("/img/design/vto-bg.webp") center / 100% 100% no-repeat;
}
.hh-tryon__demo { position: absolute; left: 2%; top: 3.8%; width: 47.9%; height: 93.8%; min-height: 0; }
.hh-tryon__txt {
  position: absolute; right: 4.6%; top: 4%; width: 43%; height: 92%;
  padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background: transparent;
}
.hh-tryon__txt > * { position: relative; }
.hh-tryon__kick { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 30px; padding: 0 12px; background: #F3EEE3; color: #113B33; font-size: 12px; font-weight: 500; outline: 1px dashed #BDB39F; outline-offset: -4px; }
.hh-tryon__kick i { width: 7px; height: 7px; border-radius: 999px; background: #5FB5AA; display: inline-block; box-shadow: 0 0 0 3px rgba(95,181,170,.25); }
.hh-tryon__t { margin: 0; font-size: 32px; line-height: 1.4; font-weight: 900; text-wrap: balance; color: #fff; }
.hh-tryon__p { margin: 0; font-size: 13.5px; line-height: 2; color: rgba(255,255,255,.76); max-width: 460px; }
.hh-tryon__steps { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.hh-tryon__steps li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; background: #F3EEE3; color: #113B33; font-size: 12.5px; font-weight: 600; outline: 1px dashed #BDB39F; outline-offset: -4px; }
.hh-tryon__steps b { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: #113B33; color: #F3EEE3; font-size: 12px; font-weight: 600; }
.hh-tryon__acts { display: flex; align-items: center; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
.hh-tryon__btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; background: #F3EEE3; color: #113B33; font-size: 14.5px; font-weight: 500; text-decoration: none; outline: 1.5px dashed #BDB39F; outline-offset: -6px; }
.hh-tryon__lnk { color: rgba(243,238,227,.85); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(243,238,227,.4); }
.hh-tryon__demo { --cut: 50%; overflow: hidden; background: #0a221e; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.hh-tryon__demo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; pointer-events: none; }
.hh-tryon__base { filter: saturate(.55) brightness(.8); }
.hh-tryon__top { clip-path: inset(0 0 0 var(--cut)); }
.hh-tryon__cut { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 0 24px rgba(126,224,210,.55); }
.hh-tryon__cut i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 30px; border-radius: 999px; background: #F3EEE3; color: #113B33; outline: 1px dashed #BDB39F; outline-offset: -4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s; }
.hh-tryon__demo.is-held .hh-tryon__cut i { transform: translate(-50%, -50%) scale(1.12); }
.hh-tryon__lbl { position: absolute; top: 16px; height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; font-size: 12px; font-weight: 500; direction: rtl; }
.hh-tryon__lbl--a { left: 16px; background: #24272B; color: #fff; outline: 1px dashed rgba(255,255,255,.35); outline-offset: -4px; }
.hh-tryon__lbl--b { right: 16px; background: #F3EEE3; color: #113B33; outline: 1px dashed #BDB39F; outline-offset: -4px; }
.hh-tryon__lbl--b i { width: 8px; height: 8px; border-radius: 999px; background: #1E7A4C; display: inline-block; }
.hh-tryon__chip { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: #F3EEE3; color: #113B33; direction: rtl; box-shadow: 0 10px 28px rgba(0,0,0,.3); max-width: calc(100% - 32px); outline: 1px dashed #BDB39F; outline-offset: -5px; }
.hh-tryon__chip img { width: 40px; height: 40px; object-fit: cover; flex: 0 0 auto; }
.hh-tryon__chip > span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 500; min-width: 0; }
.hh-tryon__chip small { font-size: 10.5px; font-weight: 400; color: var(--mut); }
@media (max-width: 1119px) {
  .hh-tryon { aspect-ratio: auto; background: #EFE9DD; filter: none; padding: 8px; border-radius: 6px; box-shadow: 0 14px 34px rgba(60,50,30,.14), inset 0 0 0 1px #DDD5C6; display: grid; grid-template-columns: 1fr; }
  .hh-tryon::before { content: ""; position: absolute; inset: 3px; border: 1.5px dashed #CDC4B1; border-radius: 6px; pointer-events: none; z-index: 2; }
  .hh-tryon__demo { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 1 / 1; border-radius: 4px 4px 0 0; }
  .hh-tryon__txt {
    position: relative; right: auto; top: auto; width: auto; height: auto; padding: 22px 18px 24px; gap: 12px; background: #113B33;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px), linear-gradient(#155044, #0F3A31);
  }
  .hh-tryon__txt::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed rgba(240,230,210,.5); pointer-events: none; }
  .hh-tryon__t { font-size: 22px; }
  .hh-tryon__p { font-size: 13px; line-height: 1.9; }
  .hh-tryon__acts { gap: 14px; }
  .hh-tryon__btn { flex: 1 1 auto; justify-content: center; }
  .hh-tryon__chip { display: none; }
  .hh-tryon__cut i { width: 34px; height: 34px; }
  .hh-tryon__txt { padding: 20px 16px 22px; gap: 10px; }
  .hh-tryon__kick { height: 28px; font-size: 11.5px; }
  .hh-tryon__t { font-size: 21px; line-height: 1.45; }
  .hh-tryon__p { font-size: 12.5px; line-height: 1.85; }
  .hh-tryon__steps { flex-direction: column; gap: 6px; }
  .hh-tryon__steps li { height: 38px; font-size: 12.5px; width: 100%; box-sizing: border-box; }
  .hh-tryon__acts { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
  .hh-tryon__btn { width: 100%; box-sizing: border-box; height: 46px; border-radius: 999px; outline: none; font-weight: 500; }
  .hh-tryon__lnk { text-align: center; }
  .hh-tryon__lbl { top: 10px; height: 26px; font-size: 11px; }
  .hh-tryon__lbl--a { left: 10px; } .hh-tryon__lbl--b { right: 10px; }
  .hh-tryon__demo > img { object-position: 50% 0%; }
}

/* ═══ هاورهای خانه — یک تعریف، فقط با ماوس ═══════════════════════════
   (بازخورد مالک: «هاورها بعضی جاها درست نیست».) پیش‌تر سه فایل با هم
   می‌جنگیدند و چند قاعده بی‌نگهبان بودند؛ روی لمس بعد از ضربه می‌چسبیدند.
   قاعده‌ی کلی: عنصرهای عکس‌محور (کاشی دسته، کالکشن، اکسپلور، استوری) کمی
   بلند می‌شوند؛ کارت محصول و ردیف‌های فهرست هرگز جابه‌جا نمی‌شوند (لرزش
   هنگام اسکرول — توضیح در بخش «هاور کارتِ محصول» بالا)؛ همه‌ی لینک‌های
   متنی فقط رنگ عوض می‌کنند. */
@media (hover: hover) and (pointer: fine) {
  /* کارت محصول: بی‌حرکت؛ عکس دوم محو می‌شود، سایه‌ی نرم روی عکس، عنوان سبز */
  .store .hh-card { transition: box-shadow .25s; }
  .store .hh-card:hover { box-shadow: var(--sh-md); }
  .store .hh-card:hover .hh-card-media { box-shadow: inset 0 0 0 1px var(--bd2); }
  .store .hh-card .hh-wish:hover { background: #fff; transform: scale(1.06); }

  /* کاشی دسته: بلند می‌شود، قاب سبز، عکس کمی بزرگ — بدون پرکردن سبز پشت عکس */
  .store .hh-tile { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .store .hh-tile:hover { transform: translateY(-3px); }
  .store .hh-tile__ico, .store .hh-tile__box img { transition: transform .3s ease; }
  .store .hh-tile:hover .hh-tile__box { border-color: var(--brand3) !important; }
  .store .hh-tile:hover .hh-tile__ico, .store .hh-tile:hover .hh-tile__box img { transform: scale(1.06); }
  .store .hh-tile:hover > span:last-child { color: var(--brand7); }
  .store .hh-tile--all:hover .hh-tile__box { background: #1b5449 !important; border-color: #1b5449 !important; }
  .store .hh-tile--all:hover > span:nth-child(2) { color: #13413b; }

  /* کالکشن (اریب): بلند + بزرگ‌نمایی عکس. سایه بی‌فایده است چون mask آن را می‌بُرد */
  .store .hh-cc { transform-origin: 30px 26px; }
  .store .hh-cc:hover { animation: hhTagSwing 1.1s ease-in-out; text-decoration: none; color: var(--n900); }
  .store .hh-cc:hover .hh-cc__media img { transform: scale(1.04); }
  .store .hh-color { transition: transform .25s; }
  .store .hh-color:hover { transform: translateY(-4px); }
  .store .hh-color:hover b { text-decoration: underline; text-underline-offset: 3px; }
  .store .hh-tryon__btn { transition: background .2s, color .2s; }
  .store .hh-tryon__btn:hover { background: #fff; color: #0E2E29; }
  .store .hh-tryon__lnk:hover { color: #fff; text-decoration-color: #fff; }

  /* اکسپلور */
  .store .hh-xpcard { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .store .hh-xpcard:hover { transform: translateY(-4px); }

  /* استوری: فقط بزرگ‌نمایی ملایم، بدون چرخش */
  .store .hh-story { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .store .hh-story-item:hover .hh-story { transform: scale(1.06); }

  /* مجله: کارت شاخص فقط زوم عکس؛ ردیف‌ها فقط رنگ زمینه و عنوان — بدون بلندشدن ردیفِ خط‌دار */
  .store .hh-mag-hero__media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .store .hh-mag-hero:hover .hh-mag-hero__media img { transform: scale(1.04); }
  .store .hh-mag-grid a:not(.hh-mag-hero) { transition: background .2s; }
  .store .hh-mag-grid a:not(.hh-mag-hero):hover { background: var(--brand05); }
  .store .hh-mag-grid a:not(.hh-mag-hero):hover span:nth-child(2) > span:nth-child(2) { color: var(--brand7); }

  /* نوار اینستاگرام و چیپ‌ها */
  .store .hh-insta:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
  .store .hh-insta:hover .hh-insta__btn { gap: 10px; }
  .store .hh-hometab:hover { color: var(--brand7); border-color: var(--brand3); }
  .store .hh-hometab.is-on:hover { color: #fff; border-color: var(--brand9); }
}
/* لمس: هیچ‌کدام از بالا اجرا نمی‌شود؛ بازخورد فقط :active */
@media (hover: none) {
  .store .hh-tile:active .hh-tile__box, .store .hh-cc:active, .store .hh-xpcard:active { opacity: .85; }
}

/* ═══ فروش ویژه‌ی خانه — بنر قرمز با کارت‌های بیرون‌زده (انتخاب مالک) ═══════
   ⚠️ روی دسکتاپ کارت‌ها روی متن بنر می‌افتادند: ارتفاع بنر و شروع کارت‌ها طوری
   تنظیم شده که سربرگ (تیتر + زیرنویس + شمارنده) بالای کارت‌ها بماند و فقط
   یک‌سوم پایینی بنر پشت کارت‌ها باشد. */
.hh-sale3 { position: relative; padding-top: 96px; }
.hh-sale3__band {
  position: absolute; inset-inline: 0; top: 0; height: 170px;
  /* سبزِ برند (بازخورد مالک: قرمز از دست‌بودنِ سایت را می‌شکست) */
  background: linear-gradient(105deg, var(--brand9), var(--brand7)); color: #fff;
  padding: 18px 28px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.hh-sale3__ttl h2 { margin: 0; font-size: 26px; font-weight: 900; display: flex; align-items: center; gap: 10px; color: #fff; }
.hh-sale3__ttl small { display: block; font-size: 12.5px; opacity: .85; margin-top: 4px; }
.hh-sale3__side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hh-sale3__cd { direction: ltr; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .5px; background: rgba(0,0,0,.22); padding: 7px 12px; color: #fff; }
.hh-sale3__rail { position: relative; display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 0 28px 6px; }
.hh-sale3__rail::-webkit-scrollbar { display: none; }
.hh-sale3__card { flex: 0 0 186px; background: #fff; box-shadow: 0 10px 30px rgba(18,59,54,.16); }
@media (max-width: 1119px) {
  .hh-sale3 { padding-top: 0; }
  .hh-sale3__band { position: static; height: auto; padding: 14px 16px 12px; flex-direction: column; gap: 8px; align-items: stretch; }
  .hh-sale3__side { justify-content: space-between; }
  .hh-sale3__rail { padding-top: 12px; background: linear-gradient(var(--brand7) 0 40px, transparent 40px); }
  .hh-sale3__ttl h2 { font-size: 20px; }
  .hh-sale3__ttl small { font-size: 11.5px; margin-top: 2px; }
  .hh-sale3__side { gap: 8px; }
  .hh-sale3__cd { font-size: 15px; padding: 5px 9px; }
  .hh-sale3__rail { padding: 0 16px 6px; gap: 10px; }
  .hh-sale3__card { flex: 0 0 164px; padding: 8px; }
}

/* ═══ هیرو چشمک‌زن — تمام‌عرض، همسایه‌ها از دو طرف پیدا، حلقه‌ی بی‌پایان ═══ */
.hh-hero2 { background: var(--surf); padding: 0; }
.hh-hero2__track { display: flex; gap: 14px; will-change: transform; }
/* Keep the first banner centered before enhancement. Neighbors appear after
   cloning, rather than jumping from one edge to the other during first paint. */
.hh-hero2__track:not([data-hero-ready]) { transform: translateX(8%); }
.hh-hero2__track:not([data-hero-ready]) > .hh-hero2__slide:not(.is-on) { visibility: hidden; }
.hh-hero2__slide { position: relative; flex: 0 0 84%; aspect-ratio: var(--hero-ar, 1983/793); overflow: hidden; background: var(--brand9); transition: opacity .35s; }
.hh-hero2__slide:not(.is-on) { opacity: .55; cursor: pointer; }
.hh-hero2__slide picture, .hh-hero2__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 719px) {
  .hh-hero2__track { gap: 8px; }
  .hh-hero2__track:not([data-hero-ready]) { transform: translateX(6%); }
  .hh-hero2__slide { flex: 0 0 88%; aspect-ratio: var(--hero-ar-m, 16/9); }
}

/* نصب اپ (PWA) در فوتر */
.hh-pwa-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-top: 12px; padding: 0 16px; border: 1px solid var(--bd2); border-radius: 999px; background: var(--surf); color: var(--tx); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.hh-pwa-btn[hidden], .hh-pwa-ios[hidden] { display: none; }
.hh-pwa-ios { margin: 10px 0 0; font-size: 12px; line-height: 1.8; color: var(--tx2); }

/* ═══ هدر — نوار منو و چهار مدل پیش‌نمایش (?hdr=1..4) ═══════════════════
   ۱ کلاسیک (همان هدر قبلی) · ۲ نوار منوی تیره · ۳ لوگو وسط · ۴ یک‌ردیفه.
   همه‌ی دکمه‌ها گوشه‌تیز. تفاوت مدل‌ها فقط روی دسکتاپ است؛ موبایل یکی است. */
.hh-allcats-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--tx); text-decoration: none; white-space: nowrap; }
.hh-allcats-chev { opacity: .6; transition: transform .2s; }
.hh-catnav .hh-megaitem, .hh-rownav .hh-megaitem { align-items: center; }
.hh-catnav__sep { width: 1px; background: var(--bd2); margin: 14px 12px; flex: 0 0 auto; }
.hh-catnav__fill { flex: 1 1 0%; }
.hh-catnav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px;
  color: var(--tx2); font-size: 14px; font-weight: 400; text-decoration: none; white-space: nowrap; transition: color .15s;
}
.hh-catnav__link::after { content: ""; position: absolute; inset-inline: 11px; bottom: -1px; height: 2px; background: var(--brand); transform: scaleX(0); transition: transform .2s; }
.hh-catnav__link[aria-current="page"] { color: var(--tx); font-weight: 500; }
.hh-catnav__link[aria-current="page"]::after { transform: scaleX(1); }
.hh-catnav__link--sale { color: var(--sale) !important; font-weight: 500; }
.hh-catnav__link--sale::after { background: var(--sale); }
.hh-catnav__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; animation: hhSaleDot 1.4s ease-in-out infinite; }
@keyframes hhSaleDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (hover: hover) and (pointer: fine) {
  .hh-catnav__link:hover { color: var(--tx); }
  .hh-catnav__link:hover::after { transform: scaleX(1); }
  .hh-megaitem:hover .hh-allcats-chev { transform: rotate(180deg); }
  .hh-megaitem:hover .hh-allcats-link { color: var(--brand); }
}
@media (prefers-reduced-motion: reduce) { .hh-catnav__dot { animation: none; } }
@media (max-width: 1279px) { .hh-catnav__link { padding: 0 8px; font-size: 13.5px; } .hh-catnav__link::after { inset-inline: 8px; } }
.hh-rownav { display: none; }

@media (min-width: 1120px) {
  /* هدر یک‌ردیفه: منو کنار لوگو؛ جست‌وجو فشرده سمت چپ، کنار دکمه‌ها */
  .hh-rownav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; flex: 0 1 auto; min-width: 0; }
  .hh-rownav .hh-catnav__link::after { bottom: 0; }
  .hh-rownav .hh-megaitem { padding: 0 11px; }
  .hh-rownav .hh-allcats-link { font-weight: 400; color: var(--tx2); }
  .hh-rownav .hh-catnav__link--sale { margin-inline-start: 8px; }
  .store .hh-hdr-search { max-width: 300px !important; margin-inline-start: auto; }
  .store .hh-hdr-spacer { display: none !important; }
}
@media (min-width: 1120px) and (max-width: 1279px) { .store .hh-hdr-search { max-width: 220px !important; } }

/* ── موبایل: کالکشن‌ها کوچک‌تر، دو کارت کامل در عرض ── */
@media (max-width: 719px) {
  .store .hh-rail--cc { gap: 12px !important; padding: 0 0 6px !important; }
  .hh-cc--rail { flex-basis: calc((100% - 12px) / 2); }
  .hh-cc { padding-left: 24px; margin-top: 20px; }
  .hh-cc__side { width: 32px; top: 12px; padding: 34px 0 8px; border-radius: 4px; }
  .hh-cc__side b { font-size: 14px; }
  .hh-cc__side small { font-size: 9px; }
  .hh-cc__side i { width: 14px; margin: 8px 0; }
  .hh-cc__side em { display: none; }
  .hh-cc__rope { left: 12px; top: -16px; width: 52px; height: 46px; }
  .hh-cc__card { padding: 30px 7px 10px; border-radius: 8px;
    -webkit-mask-image: radial-gradient(circle 6px at 22px 18px, transparent 5.5px, #000 6.5px);
            mask-image: radial-gradient(circle 6px at 22px 18px, transparent 5.5px, #000 6.5px); }
  .hh-cc__grommet { left: 22px; top: 18px; width: 18px; height: 18px; }
  .hh-cc__body { gap: 3px; padding: 8px 2px 0; }
  .hh-cc__kind { font-size: 8.5px; letter-spacing: 1px; }
  .hh-cc__title { font-size: 12.5px; line-height: 1.5; min-height: 2.9em; }
  .hh-cc__go { margin-top: 4px; }
  .hh-cc__go svg { width: 14px; height: 14px; }

  /* خرید بر اساس رنگ: فقط ۸ رنگ (۴×۲) */
  .hh-colors .hh-color:nth-child(n+9) { display: none; }
}

/* ورودی جست‌وجو داخل قاب خودش — بدون قاب/زمینه‌ی دوم */
.store .hh-search-input { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: 100%; }

/* ═══ کاشی دسته — «برگه‌ی کاغذی» (نمونه‌ی مالک؛ تمام CSS، بدون عکسِ قاب) ═══════
   برگه‌ی کرم با بافت ریز، دو برگه‌ی پشتیِ جابه‌جا در سمت چپ، دوختِ خط‌چینِ
   کوتاه بالا-چپ، خط‌چینِ بالای عنوان، و گوشه‌ی پایین-راستِ تاخورده. کاشی
   آخر («همه دسته‌ها») پارچه‌ی سبز با زبانه‌ی کوچک کناری. */
.hh-pc {
  --pc-fold: 24px; --pc-paper: #F7F4EF; --pc-edge: #EAE4DA; --pc-back: #EFEAE2; --pc-flap: #E6DFD3;
  position: relative; flex: 0 0 auto; width: calc((100% - 98px) / 8); min-width: 128px;
  display: block; padding: 0 0 7px 9px; text-decoration: none; color: var(--tx);
}
.hh-pc::before, .hh-pc::after {
  content: ""; position: absolute; background: var(--pc-back); border: 1px solid var(--pc-edge);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pc-fold)), calc(100% - var(--pc-fold)) 100%, 0 100%);
}
.hh-pc::before { left: 0; top: 7px; right: 9px; bottom: 0; }
.hh-pc::after { display: none; }   /* مینیمال: فقط یک برگه‌ی پشتی */
.hh-pc__sheet {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; height: 100%;
  justify-content: center; padding: 18px 6px 16px; background: var(--pc-paper);
  box-shadow: inset 0 0 0 1px var(--pc-edge);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pc-fold)), calc(100% - var(--pc-fold)) 100%, 0 100%);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
/* دوختِ کوتاه بالا-چپ */
.hh-pc__sheet::before { content: ""; position: absolute; left: 8px; top: 10px; height: 22px; border-left: 1px dashed #DDD4C6; }
/* گوشه‌ی تاخورده: پشتِ کاغذ روی مثلثِ داخل گوشه، با سایه‌ی نرم */
.hh-pc__sheet::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: var(--pc-fold); height: var(--pc-fold);
  background: linear-gradient(315deg, transparent 50%, var(--pc-flap) 50%, #FBF8F3 100%);
  box-shadow: -3px -3px 6px -3px rgba(60,45,20,.28);
  transition: width .25s, height .25s;
}
.hh-pc__img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1.02; }
.hh-pc__img img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 8px rgba(40,30,15,.18)); transform: scale(1.14); transition: transform .3s ease; }
.hh-pc__img--ico { color: var(--brand7); }
.hh-pc__img--ico svg { width: 56%; height: 56%; transition: transform .3s ease; }
.hh-pc__name {
  align-self: stretch; margin: 10px 6px 0; padding-top: 10px; border-top: 1px dashed #E0D8CB;
  text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-pc__n { margin-top: 3px; font-size: 11.5px; color: var(--mut); padding-inline-end: 10px; }

/* «همه دسته‌ها» — پارچه‌ی سبز */
.hh-pc--all { --pc-paper: var(--brand9); --pc-edge: var(--brand9); --pc-back: var(--brand9); --pc-flap: #EFEAE1; color: #F3EEE3; }
.hh-pc--all::after { background: var(--brand9); }

.hh-pc--all .hh-pc__sheet::before { border-left-color: rgba(243,238,227,.45); height: auto; bottom: 30%; }
.hh-pc--all .hh-pc__img--ico { color: #F3EEE3; }
.hh-pc--all .hh-pc__img--ico svg { width: 44%; height: 44%; }
.hh-pc--all .hh-pc__name { border-top-color: rgba(243,238,227,.35); }
.hh-pc--all .hh-pc__n { color: rgba(243,238,227,.72); }
.hh-pc--all .hh-pc__img img { transform: scale(.88); }
@media (hover: hover) and (pointer: fine) {
  .hh-pc.hh-pc--all:hover .hh-pc__img img { transform: scale(.92); }
}
.hh-pc__tab { position: absolute; left: -5px; top: 72%; width: 8px; height: 26px; background: #2E7A5C; z-index: 3; box-shadow: -1px 1px 0 #1E5A45; }

@media (hover: hover) and (pointer: fine) {
  .hh-pc:hover .hh-pc__sheet { transform: translate(2px, -3px); }
  .hh-pc:hover .hh-pc__img img { transform: scale(1.2); }
  .hh-pc:hover .hh-pc__img--ico svg { transform: scale(1.05); }
  .hh-pc:hover .hh-pc__name { color: var(--brand7); }
  .hh-pc--all:hover .hh-pc__name { color: #fff; }
}

/* صفحه‌ی همه‌ی دسته‌ها: شبکه */
.hh-cats-grid .hh-pc { width: 100%; min-width: 0; }

@media (max-width: 1119px) { .hh-pc { width: 132px; min-width: 0; } }
@media (max-width: 719px) {
  .hh-pc { width: 112px; --pc-fold: 20px; padding: 0 0 5px 7px; }
  .hh-pc::before { top: 5px; right: 7px; }
  .hh-pc::after { left: 3px; top: 2px; right: 4px; bottom: 3px; }
  .hh-pc__sheet { padding: 12px 4px 11px; }
  .hh-pc__sheet::before { left: 6px; top: 8px; height: 22px; }
  .hh-pc__name { font-size: 12.5px; margin-top: 7px; padding-top: 7px; }
  .hh-pc__n { font-size: 10.5px; }
  .store .hh-pc-rail { gap: 8px !important; }
  .hh-cats-grid .hh-pc { width: 100%; }
}

/* شمارِ محصولِ کالکشن روی عکس — فقط موبایل، جای برچسب سبزِ کناری که آنجا جا نمی‌شد */
.hh-cc__media { position: relative; }
.hh-cc__count { display: none; }
@media (max-width: 719px) {
  .hh-cc { padding-left: 0; }
  .hh-cc__side { display: none; }
  .hh-cc__rope { left: 8px; }
  .hh-cc__count {
    display: inline-flex; align-items: center; position: absolute; z-index: 1; top: 6px; right: 6px;
    height: 22px; padding: 0 8px; background: #113B33; color: #F3EEE3; font-size: 10.5px; font-weight: 500;
    outline: 1px dashed rgba(243,238,227,.45); outline-offset: -3px;
  }
  .hh-cc__title { min-height: 0; }
}

/* کاشی دسته: کرمِ گرم (همان کرمِ کادر سئو) با بافتِ خیلی کم — حس «کاغذ کهنه» نداشته باشد */
.hh-pc { --pc-paper: #F4EFE6; --pc-edge: #E7E0D3; --pc-back: #EEE8DD; --pc-flap: #E9E2D6; }
.hh-pc__sheet { background-image: repeating-linear-gradient(0deg, rgba(120,100,70,.022) 0 1px, transparent 1px 3px); }
.hh-pc__sheet::after { background: linear-gradient(315deg, transparent 50%, var(--pc-flap) 50%, #FAF7F2 100%); }
.hh-pc--all .hh-pc__sheet { background-image: linear-gradient(105deg, var(--brand9), var(--brand7)); }

/* ═══ پرو مجازی — مدل ۲: مدرن و مینیمال ═══════════════════════════════════
   بدون پارچه و دوخت: زمینه‌ی خنثیِ روشن، تیترِ بزرگ، یک دکمه‌ی مشکی. */
.hh-tryon-m { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; background: #F4F2EE; min-height: 0; height: 320px; }
.hh-tryon-m__txt { display: flex; flex-direction: column; justify-content: center; padding: 28px 48px; }
.hh-tryon-m__kick { font-size: 12.5px; color: var(--brand7); font-weight: 500; letter-spacing: .2px; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.hh-tryon-m__kick::before { content: ""; width: 18px; height: 1.5px; background: var(--brand); }
.hh-tryon-m__t { margin: 0 0 14px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; font-weight: 700; color: var(--tx); letter-spacing: -.3px; }
.hh-tryon-m__p { margin: 0 0 20px; font-size: 14px; line-height: 1.9; color: var(--tx2); max-width: 380px; }
.hh-tryon-m__acts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hh-tryon-m__btn { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; background: #17191C; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .18s; }
.hh-tryon-m__lnk { font-size: 13px; color: var(--tx2); text-decoration: underline; text-underline-offset: 4px; }
.hh-tryon-m .hh-tryon__demo { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; border-radius: 0 !important; min-height: 0; height: 100% !important; }
.hh-tryon-m .hh-tryon__demo > img { object-position: 50% 20% !important; }
.hh-tryon-m .hh-tryon__cut { box-shadow: none; }
.hh-tryon-m .hh-tryon__cut i { width: 30px; height: 30px; border-radius: 999px; background: #fff; outline: none; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.hh-tryon-m__tag { position: absolute; top: 14px; z-index: 2; padding: 4px 10px; background: rgba(255,255,255,.92); color: var(--tx); font-size: 12px; }
.hh-tryon-m__tag--a { left: 14px; }
.hh-tryon-m__tag--b { right: 14px; background: #17191C; color: #fff; }
@media (hover: hover) and (pointer: fine) { .hh-tryon-m__btn:hover { background: var(--brand); color: #fff; } .hh-tryon-m__lnk:hover { color: var(--tx); } }
@media (max-width: 1119px) {
  .hh-tryon-m { grid-template-columns: 1fr; height: auto; }
  .hh-tryon-m .hh-tryon__demo { grid-row: 1; min-height: 0; height: auto !important; aspect-ratio: 16 / 10 !important; }
  .hh-tryon-m__txt { padding: 20px 18px 22px; }
  .hh-tryon-m__p { margin-bottom: 20px; }
  .hh-tryon-m__btn { flex: 1 1 auto; justify-content: center; }
}
/* نوار اعتماد روی موبایل: فقط عنوان، بدون زیرنویس (خواست مالک) */
@media (max-width: 719px) {
  .hh-trust2__txt small { display: none; }
  .hh-trust2__item { min-height: 72px; align-items: center; }
  .hh-trust2__txt b { font-size: 13px; line-height: 1.5; }
}

/* ═══ کاشی دسته — نهایی (انتخاب مالک): رنگ و حالتِ مدل ۳، فرمِ برگه‌ی گوشه‌تیز
   با گوشه‌ی پایین-چپِ تاخورده؛ بدون برگه‌ی پشتی، بافت خیلی کم‌رنگ. ═══ */
.hh-pc { padding: 0; filter: drop-shadow(0 5px 10px rgba(60,45,20,.10)); }
.hh-pc::before, .hh-pc::after { display: none; }
.hh-pc__sheet {
  border-radius: 0; box-shadow: inset 0 0 0 1px var(--pc-edge);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pc-fold) 100%, 0 calc(100% - var(--pc-fold)));
  background-image: repeating-linear-gradient(0deg, rgba(120,100,70,.012) 0 1px, transparent 1px 3px);
}
.hh-pc__sheet::after {
  right: auto; left: 0; bottom: 0;
  background: linear-gradient(45deg, transparent 50%, var(--pc-flap) 50%, #FBF8F3 100%);
  box-shadow: 3px -3px 6px -3px rgba(60,45,20,.25);
}
.hh-pc__tab { display: none; }
@media (max-width: 1119px) { .hh-pc { padding: 0; --pc-fold: 18px; } }

/* کادر سئوی پایین صفحه: بافت کم‌رنگ‌تر */
.hh-seo-card { background-image: repeating-linear-gradient(0deg, rgba(120,100,70,.018) 0 1px, transparent 1px 3px) !important; }
.hh-seo-card__collar { background: repeating-linear-gradient(90deg, #EBE6DC 0 3px, #F1ECE3 3px 7px); }

/* گوشه‌ی تاخورده‌ی کاشی دسته: ساده و تخت — بدون سایه و گرادیان */
.hh-pc { filter: none; }
.hh-pc__sheet::after { background: linear-gradient(45deg, transparent 50%, #E4DCCD 50%) !important; box-shadow: none !important; }
.hh-pc--all .hh-pc__sheet::after { background: linear-gradient(45deg, transparent 50%, var(--brand7) 50%) !important; }

/* زیردسته‌های صفحه‌ی دسته — کاشی جمع‌وجورِ قبلی (باکس کرم، عنوان زیرش).
   دسکتاپ: همه کنار هم در یک ردیف (بدون کشیدن)؛ موبایل: ریل افقی با فاصله. */
.hh-subrail { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.hh-subrail .hh-pc { width: auto; min-width: 0; padding: 0; }
.hh-subrail .hh-pc__sheet { background: none !important; box-shadow: none; clip-path: none; padding: 0; justify-content: flex-start; }
.hh-subrail .hh-pc__sheet::before, .hh-subrail .hh-pc__sheet::after { display: none; }
.hh-subrail .hh-pc__img { background: #F5F1EA; border: 1px solid #EDE7DC; aspect-ratio: 1 / 1; padding: 8px; box-sizing: border-box; }
.hh-subrail .hh-pc__img img { transform: none; }
.hh-subrail .hh-pc__name { border-top: 0; margin: 8px 0 0; padding: 0; font-size: 13px; font-weight: 500; text-align: center; }
.hh-subrail .hh-pc__n { padding: 0; font-size: 11px; }
@media (hover: hover) and (pointer: fine) {
  .hh-subrail .hh-pc:hover .hh-pc__sheet { transform: translateY(-3px); }
  .hh-subrail .hh-pc:hover .hh-pc__img { border-color: var(--brand3); }
  .hh-subrail .hh-pc:hover .hh-pc__img img { transform: scale(1.05); }
}
@media (max-width: 1119px) {
  .hh-subrail { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .hh-subrail .hh-pc { flex: 0 0 92px; width: 92px; }
  .hh-subrail .hh-pc__name { font-size: 12px; margin-top: 6px; }
}

/* کارت راهنمای خرید (پایین صفحه‌ی دسته) — مدرن و تخت: همان کرم با بافت خیلی کم،
   بدون خط‌چین و قفسه‌ی پایین؛ برچسب سبز به یک عنوان کوچک ساده تبدیل شد. */
.hh-stitch {
  border-radius: 0; padding: 26px 28px; border: 1px solid #ECE6DB; box-shadow: none;
  background: #F5F1EA; background-image: repeating-linear-gradient(0deg, rgba(120,100,70,.015) 0 1px, transparent 1px 3px);
}
.hh-stitch::before { display: none; }
.hh-stitch__tag {
  position: static; height: auto; padding: 0; margin: 0 0 12px; background: none; outline: 0; border-radius: 0;
  color: var(--brand7); font-size: 12px; font-weight: 500; letter-spacing: .2px; gap: 8px;
}
.hh-stitch__tag::before { content: ""; width: 18px; height: 1.5px; background: var(--brand); }
@media (max-width: 1119px) { .hh-stitch { padding: 20px 16px; border-radius: 0; } }
@media (max-width: 719px) { .store .hh-pc-rail { gap: 12px !important; } }

/* کاشی دسته: گوشه‌ی بریده هم‌رنگ خود کاغذ (بدون تفاوت رنگ)، فقط یک خط نازک لبه؛ کرم روشن‌تر */
.hh-pc { --pc-paper: #F9F6F0; --pc-edge: #ECE6DB; }
.hh-pc__sheet::after { background: linear-gradient(45deg, transparent calc(50% - .6px), var(--pc-edge) calc(50% - .6px), var(--pc-edge) calc(50% + .6px), transparent calc(50% + .6px)) !important; }
.hh-pc--all { --pc-paper: var(--brand9); --pc-edge: var(--brand9); }
.hh-pc.hh-pc--all .hh-pc__sheet::after { background: linear-gradient(45deg, transparent calc(50% - .6px), rgba(243,238,227,.35) calc(50% - .6px), rgba(243,238,227,.35) calc(50% + .6px), transparent calc(50% + .6px)) !important; }

/* ═══ دور بعدی بازخورد مالک ═══ */
/* کاشی‌های دسته‌ی خانه: فاصله‌ی بیشتر و کرم روشن‌تر */
.store .hh-pc-rail { gap: 20px !important; }
.hh-pc:not(.hh-pc--all) { --pc-paper: #FBF9F5; --pc-edge: #EEE9E0; }
@media (max-width: 1119px) { .store .hh-pc-rail { gap: 14px !important; } }
@media (max-width: 719px) { .store .hh-pc-rail { gap: 12px !important; } }

/* صفحه‌ی دسته‌ها: همه‌ی رنگ‌ها، در موبایل هم (بدون محدودیت ۸ تایی) */
.hh-colors-all .hh-colors .hh-color { display: flex !important; }

/* اتیکت کالکشن: گوشه‌ی تیز */
.hh-cc__card, .hh-cc__side, .hh-cc__media { border-radius: 0 !important; }

/* کادر سئوی پایین صفحه: گوشه‌ی تیز + گوشه‌ی بریده‌ی پایین-چپ مثل کاشی دسته */
.hh-seo-card {
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}
.hh-seo-card::before { border-radius: 0; }
.hh-seo-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 30px; pointer-events: none;
  background: linear-gradient(45deg, transparent calc(50% - .7px), #D9D1C2 calc(50% - .7px), #D9D1C2 calc(50% + .7px), transparent calc(50% + .7px));
}

/* سبد خرید: «شاید این‌ها را هم بخواهید» فقط در موبایل */
@media (min-width: 1120px) { .hh-cart-sugg { display: none; } }

/* کد تأیید: هر رقم در یک خانه (store.js → [data-otp-input]) */
.hh-otp { display: flex; gap: 10px; justify-content: center; direction: ltr; margin: 0 0 18px; }
.hh-otp__box {
  width: 54px; height: 58px; padding: 0; border: 1.5px solid #DDD8CF; border-radius: 0; background: var(--surf);
  text-align: center; font-family: inherit; font-size: 22px; font-weight: 600; color: var(--tx); outline: none;
  transition: border-color .15s, box-shadow .15s; caret-color: var(--brand);
}
.hh-otp__box:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29,86,65,.12); }
.hh-otp__box.is-filled { border-color: var(--brand); }
.hh-otp[aria-invalid="true"] .hh-otp__box { border-color: var(--dang); }
.hh-otp--small { gap: 6px; margin: 0; flex: 1 1 auto; justify-content: flex-start; }
.hh-otp--small .hh-otp__box { width: 42px; height: 42px; font-size: 17px; }
@media (max-width: 380px) { .hh-otp__box { width: 46px; height: 52px; } }
@media (min-width: 1120px) { .hh-pc-rail > .hh-pc { width: calc((100% - 140px) / 8); min-width: 0; } }

/* دکمه‌ی «دنبال کنید» اینستاگرام: همان فرمِ دکمه‌ی «همه مقالات» (.hh-more) — رنگ خودش می‌ماند */
.store .hh-insta__btn { height: 38px; padding: 0 16px 0 12px; gap: 8px; outline: 0; font-weight: 400; }
.store .hh-insta__btn::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10'/%3E%3Cpath d='M16 7l-9 0l0 9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10'/%3E%3Cpath d='M16 7l-9 0l0 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 719px) { .store .hh-insta__btn { height: 38px; } }
/* ⚠️ حلقه‌ی فوکوس: خودِ لینک .hh-insta با mask-image بریده می‌شود و outline
   سراسریِ :focus-visible بیرونِ کادرش کشیده می‌شود — یعنی اصلاً دیده نمی‌شد.
   فوکوس صفحه‌کلید روی دکمه‌ی روشنِ داخلش (و قاب خط‌چین) نشان داده می‌شود. */
.store .hh-insta:focus-visible { outline: none; }
.store .hh-insta:focus-visible .hh-insta__btn { outline: 2px solid #113B33; outline-offset: -5px; }
.store .hh-insta:focus-visible::before { border-style: solid; border-color: #F3EEE3; }

/* ═══ ریل ست‌ها در خانه ═══ */
.hh-set-rail { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.hh-setc { flex: 0 0 calc((100% - 60px) / 4); min-width: 200px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--tx); }
.hh-setc__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--n50); box-shadow: inset 0 0 0 1px var(--bd2); }
.hh-setc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.hh-setc__pieces { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 9px; background: rgba(17,59,51,.92); color: #F3EEE3; font-size: 11px; }
.hh-setc__name { font-size: 13.5px; line-height: 20px; }
.hh-setc__price { font-size: 15px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.hh-setc__price small { font-size: 11px; font-weight: 400; color: var(--tx2); }
.hh-setc__price s { font-size: 11.5px; font-weight: 400; color: var(--mut); }
@media (hover: hover) and (pointer: fine) { .hh-setc:hover img { transform: scale(1.04); } .hh-setc:hover .hh-setc__name { color: var(--brand7); } }
@media (max-width: 1119px) { .hh-setc { flex-basis: 46%; min-width: 0; } .hh-set-rail { gap: 14px; } }
@media (max-width: 719px) { .hh-setc { flex-basis: 62%; } .hh-set-rail { gap: 12px; } }

/* ── شیت پایین‌صفحه (فیلتر، مرتب‌سازی، راهنمای سایز) — سراسری چون صفحه‌ی محصول هم لازمش دارد ───────────────────────────── */
.hh-sheet {
  position: fixed; z-index: 121; inset-inline: 0; bottom: 0;
  background: var(--surf); box-shadow: var(--sh-up);
  max-height: 90dvh; display: flex; flex-direction: column;
  animation: hhRise .22s ease;
}
.hh-sheet__grip { padding: 10px 0 0; display: flex; justify-content: center; flex: none; }
.hh-sheet__grip > span { width: 40px; height: 4px; background: var(--n300); }
.hh-sheet__head {
  height: 52px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--bd);
}
.hh-sheet__title { font-size: 15px; font-weight: 600; }
.hh-sheet__reset { border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--dang); text-decoration: none; }
.hh-sheet__x { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; color: var(--tx2); }
.hh-sheet__body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; }
.hh-sheet__foot { flex: none; padding: 12px 16px 22px; border-top: 1px solid var(--bd); }
.hh-sheet__apply {
  width: 100%; height: 52px; border: 0; background: var(--brand); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}


/* ── لایت‌باکس: نوار بندانگشتی پایین و نمای «همه تصاویر» (الگوی دیجی‌کالا) ── */
.hh-lightbox { background: #000; }
.hh-lb__img { background: transparent; width: 100%; height: 100%; object-fit: contain; }
.hh-lb__foot { flex: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px 14px; }
.hh-lb__thumbs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; background: rgba(255,255,255,.08); contain: paint; }
.hh-lb__thumbs::-webkit-scrollbar { display: none; }
.hh-lb__t { flex: none; width: 60px; height: 74px; padding: 0; border: 2px solid transparent; background: #111; cursor: pointer; overflow: hidden; }
.hh-lb__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-lb__t.is-on { border-color: #fff; }
.hh-lb__all { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 78px; height: 78px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-family: inherit; font-size: 11.5px; cursor: pointer; }
.hh-lb__all.is-on { background: #fff; color: #111; }
.hh-lb__grid { position: absolute; inset: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; background: #000; }
.hh-lb__g { padding: 0; border: 0; background: #111; aspect-ratio: 4/5; cursor: pointer; overflow: hidden; }
.hh-lb__g img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-lightbox.is-grid .hh-lb__nav, .hh-lightbox.is-grid .hh-lb__zoom { display: none; }
@media (max-width: 719px) {
  .hh-lb__nav, .hh-lb__zoom { display: none !important; }
  .hh-lb__head { padding: 10px 12px; }
  .hh-lb__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) { .hh-lb__grid { grid-template-columns: repeat(5, 1fr); max-width: 1100px; margin: 0 auto; } }

/* ── نوار مدیر روی فروشگاه (مثل وردپرس) ── */
.hh-adminbar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #1d2327; color: #f0f0f1; font-size: 12.5px; position: sticky; top: 0; z-index: 130; }
.hh-adminbar a { color: #f0f0f1; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; }
.hh-adminbar a:hover { background: #2c3338; color: #72aee6; text-decoration: none; }
.hh-adminbar__home { font-weight: 700; }
.hh-adminbar__edit { background: var(--brand); font-weight: 600; }
.hh-adminbar__edit:hover { background: var(--brand7); color: #fff !important; }
.hh-adminbar__sp { flex: 1; }
.hh-adminbar__who { color: #a7aaad; padding: 0 6px; }
@media (max-width: 719px) {
  .hh-adminbar { font-size: 12px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
  .hh-adminbar__lnk, .hh-adminbar__who { display: none; }
}
/* نوار مدیر ۳۶ پیکسل بالای همه چیز می‌نشیند؛ هدر/جست‌وجوی چسبان باید زیرِ آن بایستد نه زیرش گم شود */
body.store.has-adminbar { --hh-hdr-top: 36px; }
body.store.has-adminbar .hdr { top: 36px; }
body.store.has-adminbar.has-digify-banner { --hh-hdr-top: calc(var(--digify-banner-h, 56px) + 36px); }
body.store.has-adminbar.has-digify-banner .hdr { top: calc(var(--digify-banner-h, 56px) + 36px); }
body.store.has-digify-banner .hh-adminbar { top: var(--digify-banner-h, 56px); }

/* فهرست بازشوی select — فایرفاکس آن را در سندی جدا می‌کشد و متغیرهای CSS
   آنجا حل نمی‌شوند؛ رنگ‌ها عمداً ثابت‌اند تا فهرست شفاف نیفتد. */
select { color-scheme: light; background-color: #fff; }
select option, select optgroup { background-color: #fff; color: #111a15; font-family: inherit; padding: 6px 10px; }
select option:checked { background-color: #e6f4ec; color: #146c43; }
select option:disabled { color: #9aa39e; }

/* ── گروه بنر چندستونه (سازنده‌ی بخش‌های صفحه‌ی اصلی) ── */
.hh-bgrid__in{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:20px}
.hh-bgrid__tile{position:relative;display:block;overflow:hidden;border-radius:16px;background:var(--n50);aspect-ratio:4/3;color:#fff;text-decoration:none}
.hh-bgrid__tile picture,.hh-bgrid__tile img{display:block;width:100%;height:100%}
.hh-bgrid__tile img{object-fit:cover;transition:transform .5s ease}
a.hh-bgrid__tile[href]:hover img{transform:scale(1.035)}
.hh-bgrid__txt{position:absolute;inset:auto 0 0 0;padding:18px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(to top,rgba(11,46,34,.82),rgba(11,46,34,0))}
.hh-bgrid__k{font-size:11px;letter-spacing:1.2px;opacity:.85}
.hh-bgrid__t{font-size:18px;font-weight:700;line-height:1.4}
.hh-bgrid__cta{align-self:flex-start;margin-top:4px;padding:6px 14px;background:#fff;color:var(--brand9);font-size:12.5px;font-weight:500}
@media (max-width:720px){
  .hh-bgrid{padding-inline:16px !important;padding-top:40px !important}
  .hh-bgrid__in{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none}
  .hh-bgrid__tile{flex:0 0 78%;scroll-snap-align:start;border-radius:12px}
  .hh-bgrid__t{font-size:15px}
}