/* =====================================================================
   لایه‌ی موبایل/تبلت فروشگاه — بازسازی دقیق «Hamhame Store Mobile.dc.html»

   ⚠️ اعداد این فایل از رندر واقعی فایل طرح در Chromium (عرض ۳۹۰) با
   getComputedStyle خوانده شده‌اند، نه از حدس. هر قاعده کنارش مختصات
   طرح را دارد تا بشود دوباره سنجید.

   این فایل آخر از همه بار می‌شود و روی استایل‌های درون‌خطی دسکتاپ
   (که عیناً از طرح دسکتاپ آمده‌اند) می‌نشیند. مرز نما همان مرز
   خودِ طرح است: زیر ۱۱۲۰ چیدمان موبایل/تبلت.
   ===================================================================== */

/* ── هدر موبایل — طرح: چسبان ۱۱۱ = سطر ۵۶ + جست‌وجوی ۴۴ + ۱۰ حاشیه ── */
@media (max-width: 1119px) {
  .store #hh-topbar { height: 36px !important; font-size: 12px; }   /* طرح موبایل: ۳۶ (دسکتاپ ۴۰) */
  .store .hh-hdr-row {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 6px 8px 0 !important;      /* طرح: سطر ۵۶ = ۴۴ دکمه + ۶+۶ */
    gap: 0 !important;
    justify-content: space-between !important;
    align-items: center;
  }
  .store .hh-burger { display: flex !important; order: 1; width: 44px; height: 44px; }
  .store .hh-logo { order: 2; gap: 10px !important; }
  .store .hh-logo__mark { width: 33px; height: 30px; }   /* طرح: 33×30 */
  .store .hh-logo__type { width: 128px; height: 26px; }  /* بازخورد مالک: ۵۲×۱۹ خیلی ریز بود؛ هم‌اندازه‌ی دسکتاپ */
  .store .hh-hdr-spacer { display: none !important; }
  .store .hh-hdr-acts { order: 3; gap: 0 !important; width: 88px; justify-content: flex-start; }
  .store .hh-hdr-act--account, .store .hh-hdr-act--wish { display: none !important; }
  .store .hh-hdr-act--search { display: flex !important; }
  /* طرح: جعبه‌ی جست‌وجو ۳۵۸×۴۴، زمینه‌ی n50، حاشیه bd، فونت ۱۳٫۵ */
  .store .hh-hdr-search {
    /* ⚠️ flex-shrink صفر بود: پایه‌ی ۱۰۰٪ + حاشیه‌ی دو طرف از عرض ردیف
       بیرون می‌زد و کادر از یک سمت به لبه می‌چسبید (بازخورد مالک). */
    order: 9; flex: 1 1 100% !important; max-width: none !important; min-width: 0;
    height: 44px !important; margin: 6px 8px 10px !important;
    padding: 0 12px !important; gap: 8px !important;
    background: var(--n50) !important; border: 1px solid var(--bd) !important;
    font-size: 13.5px !important;
  }
  .store .hh-hdr-search > svg { width: 18px; height: 18px; }
  .store .hh-search-input { font-size: 13.5px; }
  /* اورلی جست‌وجو روی موبایل حاشیه‌ی ۱۶ دارد */
  .store #hh-search-ov [style*="padding:10px 40px"] { padding: 10px 16px !important; }
  .store #hh-search-ov [style*="padding:0 40px 28px"] { padding: 0 16px 28px !important; }
  .store #hh-search-ov [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
/* تبلت و موبایل: نوار پایین در همه‌ی نماهای زیر ۷۲۰ (مرز خودِ طرح) */

/* =====================================================================
   صفحه‌ی خانه — موبایل/تبلت
   ===================================================================== */
@media (max-width: 1119px) {
  /* استوری‌ها — طرح: بخش ۱۰۹ = ۱۱ + ۸۷ + ۱۱؛ آیتم ۷۲، دایره ۶۴، فاصله ۱۲،
     چیدمان از راست شروع می‌شود (flex-start)، برچسب ۱۱px */
  /* بخش‌هایی که پوشش درونی (max-width:1280) دارند نباید از قاعده‌ی عمومی
     store.css حاشیه‌ی دوم بگیرند — طرح یک حاشیه‌ی ۱۶ دارد نه ۳۲ */
  .store .hh-sec-stories, .store .hh-sec-cats { padding: 0 !important; margin: 0 !important; }
  .store .hh-sec-stories__in { padding: 11px 16px !important; }
  .store .hh-sec-stories .hh-rail { justify-content: flex-start !important; gap: 12px !important; padding: 0 !important; }
  .store .hh-rail { justify-content: flex-start !important; padding-inline: 0 !important; }
  .store .hh-story-item { width: 72px !important; gap: 7px !important; }
  .store .hh-story { width: 64px !important; height: 64px !important; }
  .store .hh-story-lbl { font-size: 11px !important; line-height: 16px !important; height: 16px !important; }
  .store .hh-sec-stories .hh-rail-btn { display: none !important; }

  /* هیرو — طرح: تمام‌عرض، نسبت ۴:۵، متن پایین‌چین با گرادیان از پایین،
     چیپ = خط ۱۸×۲ سبز + متن ۱۱٫۵؛ h1 ۲۶/۳۵؛ p ۱۳/۲۲ حداکثر ۲۹۰؛ دکمه ۴۶ */
  /* قاعده‌ی عمومی store.css به هر <section> حاشیه‌ی ۱۶ می‌دهد؛ هیرو تمام‌عرض
     و بی‌فاصله زیر استوری‌ها می‌نشیند (طرح: y=256 درست بعد از بخش ۱۰۹) */
  .store .hh-sec-hero { padding: 0 !important; margin: 0 !important; }
  .store .hh-sec-hero__in { padding: 0 !important; max-width: none !important; }
  /* ⚠️ ۳:۲ و نه ۴:۵ (بازخورد مالک: اسلایدر خیلی ارتفاع نداشته باشد).
     ۴:۵ روی گوشی ۳۹۰ پیکسلی حدود ۴۹۰ پیکسل می‌شد — کل نخستین نمایش را
     می‌گرفت و محصولی دیده نمی‌شد. ۳:۲ حدود ۲۶۰ پیکسل است، نزدیک به
     نمونه‌ای که مالک فرستاد. */
  .store #hh-hero { height: auto !important; }
  /* فقط گوشی: تصویر موبایل (image_mobile) ۱۶:۹ است؛ تبلت همان تصویر دسکتاپ و نسبتش را می‌گیرد */
  /* ⚠️ ارتفاع را خودِ اسلاید (۸۸٪ عرض، نسبت ۱۶:۹) می‌سازد؛ نسبتِ جدا روی ظرف یک نوار خالی زیر اسلاید می‌گذاشت */
  .store .hh-hero__frame { border-radius: 0; }
  .store .hh-hero__shade {
    background: linear-gradient(to top, rgba(8,22,17,.96) 0%, rgba(8,22,17,.62) 32%, rgba(8,22,17,0) 62%) !important;
  }
  .store .hh-hero__txt {
    inset: auto 0 0 0 !important; width: 100% !important;
    padding: 0 20px 46px !important; gap: 9px !important;
    justify-content: flex-end !important; align-items: flex-start !important;
    background: none !important;
  }
  .store .hh-hero__kick {
    height: auto !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important;
    font-size: 11.5px !important; letter-spacing: .3px !important; color: rgba(255,255,255,.92);
  }
  .store .hh-hero__kickbar { display: block !important; }
  .store .hh-hero__h1 { margin: 0 !important; font-size: 26px !important; line-height: 35px !important; letter-spacing: 0 !important; text-shadow: none !important; }
  .store .hh-hero__p {
    margin: 0 !important; font-size: 13px !important; line-height: 22px !important;
    color: rgba(255,255,255,.75) !important; max-width: 290px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .store .hh-hero-cta { height: 46px !important; padding: 0 22px !important; margin-top: 8px !important; font-size: 14px !important; gap: 8px !important; }
  .store .hh-hero-cta__chev { display: block !important; }
  .store .hh-hero-arrow { display: none !important; }
  /* نقطه‌ها زیر اسلایدر، وسط‌چین (بازخورد مالک: روی لبه‌ی اسلایدِ پیک بدجا می‌افتاد) */
  .store .hh-sec-hero__in { position: relative; }
  .store .hh-hero__dots { position: static; justify-content: center !important; gap: 4px !important; margin: 4px 0 0 !important; }
  .store .hh-hero__dots .hh-dot { height: 16px !important; border-block-width: 6px !important; border-inline-width: 3px !important; position: relative; }

  /* دسته‌بندی‌ها — طرح: بخش ۲۰۶، حاشیه ۱۴/۱۶، کاشی ۱۰۰، آیکن ۵۹، فاصله ۶ */
  .store .hh-sec-cats__in { padding: 14px 16px !important; }
  .store .hh-sec-cats .hh-rail { gap: 6px !important; padding-inline: 0 !important; }
  .store .hh-tile { width: 100px !important; }
  .store .hh-tile__ico { width: 59px; height: 59px; }

  /* بخش‌های صفحه: طرح موبایل ۴۰ فاصله‌ی بالا و ۱۶ حاشیه دارد (دسکتاپ ۶۴/۴۰).
     ⚠️ store.css روی تبلت/موبایل به هر «section + section» هم ۴۰ حاشیه
     می‌داد؛ با ۴۰ پدینگِ خودِ بخش می‌شد ۸۰ خالی بین هر دو بخش (بازخورد
     مالک: «فاصله‌اش با پایین زیاده»). حالا فقط یکی از این دو می‌ماند. */
  .store main > section + section { margin-top: 0 !important; }
  .store main section[style*="padding:64px 40px 0"] { padding: 40px 16px 0 !important; }
  .store main section[style*="margin:64px auto 0"] { margin-top: 40px !important; padding: 0 16px !important; }
  .store main section[style*="margin:40px auto 0"] { margin-top: 28px !important; padding: 0 16px !important; }
  .store main section[style*="margin-top:64px"] { margin-top: 40px !important; }

  /* فروش ویژه — طرح: سربرگ ۱۴ حاشیه، عنوان ۱۸، بدنه ۱۴ حاشیه، کارت ۱۵۲ */
  .store .hh-sec-head { margin-bottom: 14px; }
  .store .hh-sec-head h2 { font-size: 18px; line-height: 1.5; }
  .store .hh-more { height: 34px; min-height: 34px; padding: 0 13px 0 10px; font-size: 12.5px; gap: 6px; }
  .store .hh-more::after { width: 15px; height: 15px; }
  .store .hh-hometab { height: 32px; padding: 0 13px; font-size: 12.5px; }

  .store .hh-sale-head { padding: 14px !important; gap: 8px !important; }
  .store .hh-sale-head h2 { font-size: 18px !important; }
  /* روی ۳۹۰ پیکسل «تا پایان» + شمارنده + «مشاهده همه» جا نمی‌شود؛ برچسب کوچک حذف */
  .store .hh-sale-head [style*="تا پایان"], .store .hh-sale-head span[style*="font-size:11px"] { display: none !important; }
  /* چیپ‌های دسته زیر «جدیدترین‌ها» یک‌خطی می‌مانند (طرح: ارتفاع ۴۰) */
  .store [data-story-rail] > a { white-space: nowrap; }
  .store .hh-sale-body { padding: 14px !important; }
  .store .hh-railcard { width: 152px !important; }

  /* چیپ‌های جدیدترین‌ها: از راست شروع می‌شوند و کل ردیف قابل لغزش است */
  .store [data-story-rail] { justify-content: flex-start !important; }

  /* پرفروش‌ترین‌ها و شبکه‌های دوستونه — طرح: ۱۷۳×۲ با فاصله ۱۲ */
  .store .hh-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

  /* بنر میانی — طرح: نسبت ۱۶:۱۲، گوشه ۱۴ */
  .store .hh-midbanner { aspect-ratio: 16 / 12 !important; border-radius: 14px !important; }
  /* متن بنر میانی روی موبایل: ستونِ ۵۴٪ با تیتر ۳۴px هر کلمه را یک سطر
     می‌کرد و دکمه دوخطی و بریده می‌شد. متن تمام‌عرض و پایینِ کادر. */
  .store .hh-midbanner__shade { background: linear-gradient(to top, rgba(11,46,34,.86) 0%, rgba(11,46,34,.35) 55%, rgba(11,46,34,.05) 100%) !important; }
  .store .hh-midbanner__txt { width: 100% !important; padding: 20px !important; justify-content: flex-end !important; }
  .store .hh-midbanner__title { font-size: 22px !important; margin-bottom: 12px !important; }
  .store .hh-midbanner__cta { height: 40px !important; padding: 0 16px !important; font-size: 13px !important; }

  /* کالکشن‌ها — طرح: کارت ۱۵۰، نوار سبز ۱۳/۱۸ */
  .store .hh-coll-card { width: 150px !important; }

  /* مجله — طرح: یک ستون با فاصله ۱۸ */
  .store .hh-mag-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* مجله/کارت شاخص روی موبایل: با عرض کم، عنوان ۲۱px و خلاصه روی هم می‌افتادند
     و از کادر بیرون می‌زدند. کادر بلندتر، تیتر کوچک‌تر و کلمپ‌شده، خلاصه یک خط. */
  .store .hh-mag-hero__media { aspect-ratio: 4 / 3 !important; }
  .store .hh-mag-hero__cap { padding: 14px !important; gap: 6px !important; }
  .store .hh-mag-hero__t {
    font-size: 16px !important; line-height: 26px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .store .hh-mag-hero__x {
    font-size: 12px !important; line-height: 21px !important;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .store .hh-mag-hero__m { font-size: 10.5px !important; }

  /* سربرگ اکسپلور: زیرعنوان کوچک، و روی صفحه‌های خیلی باریک اصلاً نیاید تا دوخطی نشود */
  .store .hh-sec-explore__sub { font-size: 11px !important; }
  @media (max-width: 379px) { .store .hh-sec-explore__sub { display: none !important; } }



  .store main h2 { font-size: 18px !important; }
}

/* =====================================================================
   صفحه‌ی محصول — موبایل/تبلت (طرح: گالری تمام‌عرض ۳:۴، بندانگشتی افقی)
   ===================================================================== */
@media (max-width: 1119px) {
  /* طرح روی صفحه‌ی محصول سطر جست‌وجو را ندارد: هدر ۵۷ پیکسلی */
  .store.page-pdp .hh-hdr-search { display: none !important; }
  .store.page-pdp .hh-hdr-row { padding-bottom: 6px !important; }

  /* ⚠️ محصولِ پرعکس (۳۰ بندانگشتی) کل صفحه را کوچک می‌کرد: ستونِ 1fr گرید
     min-width:auto دارد و به اندازه‌ی «کمینه‌ی محتوا»یِ نوار بندانگشتی
     (۳۰×۶۴px) باز می‌شد، صفحه پهن‌تر از ویوپورت می‌شد و مرورگر موبایل
     زوم‌اوت می‌کرد. minmax(0,1fr) و min-width:0 جلوی این را می‌گیرد. */
  .store .pdp-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .store .pdp-gal, .store .pdp-stage, .store .pdp-thumbs, .store .pdp-buy { min-width: 0; max-width: 100%; }
  .store .pdp-gal { flex-direction: column !important; gap: 0 !important; margin-inline: -16px; max-width: calc(100% + 32px); }
  .store .pdp-stage { aspect-ratio: 3 / 4 !important; }        /* طرح: ۳۹۰×۵۲۰ */
  .store .pdp-arrow { display: none !important; }
  .store .pdp-zoom { display: none !important; }               /* طرح: لمس عکس = لایت‌باکس */
  .store .pdp-gal-acts { display: flex !important; }
  .store .pdp-counter {
    inset-inline-start: auto !important; inset-inline-end: 12px !important;
    bottom: 12px !important; padding: 4px 10px !important;
  }
  /* بندانگشتی‌ها: ردیف افقی زیر عکس، ۵۶×۷۵، فاصله ۸، حاشیه ۱۰/۱۶ */
  .store .pdp-thumbs {
    display: flex !important; flex-direction: row !important; order: 2;
    width: auto !important; gap: 8px !important; padding: 10px 16px 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .store .pdp-thumbs::-webkit-scrollbar { display: none; }
  .store .pdp-thumb { width: 56px !important; height: 75px !important; flex: 0 0 auto; }
  .store .pdp-buy { padding-top: 18px !important; }
  .store .pdp-buy h1 { font-size: 20px !important; line-height: 30px !important; }
}
@media (max-width: 719px) {
  /* طرح: روی صفحه‌ی محصول نوار خرید جای نوار پایین را می‌گیرد */
  .store.page-pdp .tabbar { display: none !important; }
  /* الگوی دیجی‌کالا (خواسته‌ی مالک): در موبایل فقط نوار چسبانِ پایین دکمه‌ی
     خرید دارد؛ ردیف تعداد/افزودن/علاقه‌مندی داخل صفحه پنهان می‌شود و نوار
     دیگر با اسکرول محو نمی‌شود. */
  .store.page-pdp .pdp-buy form[data-atc] { display: none !important; }
  .store.page-pdp .buybar.is-off { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .store.page-pdp .buybar .btn--primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

  /* بازخورد مالک: صفحه‌ی تک‌محصول در دسکتاپ فوتر داشته باشد، در موبایل نه.
     فوتر در چیدمان همیشه رندر می‌شود و فقط اینجا (عرضِ موبایل) مخفی می‌شود. */
  .store.page-pdp .hh-ftr { display: none !important; }

  /* ⚠️ «جای نوار پایین را می‌گیرد» یعنی جای نوار، نه «جا لازم ندارد».
     .buybar هم position:fixed است، پس اگر padding-bottom صفر شود آخرین
     ۷۳ پیکسل صفحه — روی صفحه‌ی محصول: سطر آخر فوتر، یعنی «نقشه سایت» —
     زیر نوار خرید گیر می‌کند و هیچ اسکرولی بیرونش نمی‌آورد. اندازه‌گیری
     شده: نوار ۷۳ پیکسل؛ ۷۶ همان عددی است که .tabbar هم می‌گیرد. */
  .store.page-pdp { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}

/* =====================================================================
   تسویه حساب — موبایل (طرح: سربرگ ۶۴ با لوگو و «بازگشت به سبد»، زیرش
   سطر «تسویه حساب» + نوار پیشرفت؛ نشانگر سه‌مرحله‌ای فقط روی دسکتاپ)
   ===================================================================== */
@media (max-width: 1119px) {
  .store .co-head__row { padding: 0 16px !important; }
  .store .co-steps { display: none !important; }
  .store .co-head__m { display: block !important; }
  .store .co-head__back { white-space: nowrap; }
  /* بدنه‌ی صفحه‌های تسویه: حاشیه‌ی ۱۶ و شبکه‌ی تک‌ستونه */
  .store.page-checkout main > div[style*="padding:28px 40px"],
  .store.page-checkout main > div[style*="padding:22px 40px"],
  .store.page-checkout main > div[style*="padding:0 40px"] { padding-inline: 16px !important; }
  .store.page-checkout h1 { font-size: 22px !important; }
}

/* =====================================================================
   شیت فیلتر/مرتب‌سازی موبایل — طرح: تقریباً تمام‌صفحه (زیر هدر)، بخش‌ها
   باز و پشت‌سرهم: عنوان + شورون، فهرست دسته با چک‌باکس و شمار، سایزها
   چیپ ۴۴، رنگ‌ها دایره‌ی ۳۰
   ===================================================================== */
.hh-sheet { max-height: calc(100dvh - 92px); }
.hh-sheet .hh-sheet__body { padding: 4px 16px 12px; }
.hh-sheet .hh-dd { position: static; border-bottom: 1px solid var(--bd); padding: 6px 0 14px; margin: 0 0 6px; }
.hh-sheet .hh-dd:last-child { border-bottom: 0; }
.hh-sheet .hh-dd > summary {
  height: 44px; padding: 0; border: 0 !important; background: transparent !important;
  font-size: 14px; font-weight: 700; color: var(--tx) !important; justify-content: space-between;
}
.hh-sheet .hh-dd > summary svg { margin-inline-start: auto; opacity: .7; }
.hh-sheet .hh-dd.is-on > summary { color: var(--tx) !important; }
.hh-sheet .hh-dd__panel {
  position: static; width: auto !important; border: 0; box-shadow: none; padding: 0; background: transparent;
}
.hh-sheet .hh-dd__panel > div[style*="max-height:280px"] { max-height: none !important; }
.hh-sheet .hh-dd__row { height: 40px; font-size: 13.5px; color: var(--tx); }
.hh-sheet .hh-dd__box { width: 20px; height: 20px; }
.hh-sheet .hh-sizeopt { min-width: 52px; height: 44px; font-size: 13.5px; }
.hh-sheet .hh-dd__panel [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }

/* =====================================================================
   حساب کاربری — موبایل/تبلت (طرح: زیرصفحه بدون سایدبار، سطر ۴۴ = دکمه‌ی
   بازگشت ۴۰×۴۰ + عنوان ۱۸؛ پیشخوان: محتوا اول، منو زیرش)
   ===================================================================== */
.acct2__back { display: none; }

/* منوی حسابِ اپ‌مانند فقط روی موبایل دیده می‌شود؛ روی دسکتاپ سایدبار
   عمودیِ کناری کار می‌کند و این پنهان است. */
.acct-menu, .acct-menu__logoutwrap, .acct-menu__gh { display: none; }

@media (max-width: 1119px) {
  .store .acct2 { position: relative; }
  .store .acct2__who { display: none; }
  /* دکمه‌ی بازگشت در صفحه‌های داخلی حساب (موبایل) */
  .store .acct2__back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: 0 0 12px; order: -1;
    border: 1px solid var(--bd); border-radius: 12px;
    background: var(--surf); color: var(--tx);
  }
  .store .acct2__back:active { background: var(--surf2); }
  .store .acct2 > div > h1 { font-size: 22px; }

  /* پیشخوان: سایدبارِ بالای صفحه حذف شد. منو حالا به‌شکل لیستِ استاندارد
     داخل محتوا و زیر بخش سفارش‌ها می‌آید (کلاس .acct-menu). این تصمیم
     مستقیم از بازخورد مالک است: منو نباید بالای «سلام» باشد و باید مثل
     صفحه‌ی حسابِ اپ‌های استاندارد، لیستِ عمودیِ ردیف‌دار باشد. */
  .store .acct2__side:not(.acct2__side--sub) { display: none; }

  /* ── لیست منوی حساب — الگوی اپ‌های ایرانی: کارت‌های گروه‌بندی‌شده،
        هر ردیف با «آیکون‌چیپِ» رنگیِ گرد + عنوان + نشان + شِوران. ── */

  /* تیترِ کوچکِ هر گروه، بالای کارتش */
  .store .acct-menu__gh {
    display: block; font-size: 12px; font-weight: 700; color: var(--tx2);
    margin: 18px 4px 8px;
  }
  .store .acct-menu__gh:first-of-type { margin-top: 4px; }

  .store .acct-menu {
    display: block; margin-bottom: 4px; background: var(--surf);
    border: 1px solid var(--bd); border-radius: 16px; overflow: hidden;
  }
  .store .acct-menu__item {
    display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 14px;
    color: var(--tx); text-decoration: none; border-bottom: 1px solid var(--bd);
  }
  .store .acct-menu__item:last-child { border-bottom: 0; }
  .store .acct-menu__item:active { background: var(--surf2); }
  /* آیکون‌چیپ: مربعِ گردِ برندی — همان امضای بصریِ صفحه‌ی حساب اپ‌ها */
  .store .acct-menu__item > svg {
    width: 38px; height: 38px; padding: 9px; box-sizing: border-box;
    background: var(--brand05); color: var(--brand7); border-radius: 12px; flex: 0 0 auto;
  }
  .store .acct-menu__item > span:not(.acct-menu__b) { flex: 1 1 auto; font-size: 14px; font-weight: 500; }
  .store .acct-menu__b {
    flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--brand7);
    background: var(--brand05); border-radius: 999px; padding: 3px 10px;
  }
  /* فلشِ RTL رو به جلو (چپ) — نشانه‌ی «واردشو» */
  .store .acct-menu__item::after {
    content: "\2039"; color: var(--mut); font-size: 22px; line-height: 1;
    flex: 0 0 auto; opacity: .5; margin-inline-start: 2px;
  }

  .store .acct-menu__logoutwrap { display: block; margin: 18px 0 16px; }
  .store .acct-menu__logout {
    width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--dang); background: transparent; color: var(--dang);
    border-radius: 14px; font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  }
  .store .acct-menu__logout svg { width: 18px; height: 18px; }

  /* ── زیرصفحه‌ها: منوی تکراری دیگر نشان داده نمی‌شود؛ فقط دکمه‌ی
        بازگشت به /account — الگوی اسنپ‌فود. ── */
  .store .acct2__side--sub { display: none; }
  .store .acct2__side--sub .acct2__nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
  .store .acct2__side--sub .acct2__item {
    width: auto; height: 36px; padding: 0 13px; gap: 6px;
    border: 1px solid var(--bd2); border-radius: 999px; white-space: nowrap; font-size: 12.5px;
  }
  .store .acct2__side--sub .acct2__item svg { width: 16px; height: 16px; }
  .store .acct2__side--sub .acct2__item[aria-current="page"] {
    border-color: var(--brand); background: var(--brand05); color: var(--brand7); font-weight: 700;
  }
  .store .acct2__side--sub .acct2__bar { display: none; }
  .store .acct2__side--sub .acct2__label { flex: 0 0 auto; }
  .store .acct2__side--sub .acct2__out { display: none; }
}

@media (max-width: 1119px) {
  .store .hh-xpcard { width: 150px !important; }
}

/* ── سبد خرید: نوار چسبان «ادامه» (طرح: [0,660,390,76]، دکمه ۲۴۰×۵۶، مبلغ راست) ── */
.hh-cartbar { display: none; }
@media (max-width: 719px) {
  .hh-cartbar {
    position: fixed; inset-inline: 0; bottom: 76px; z-index: 44; height: 76px;
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: var(--surf); border-top: 1px solid var(--bd);
  }
  .hh-cartbar__sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
  .hh-cartbar__sum span { font-size: 11px; color: var(--mut); }
  .hh-cartbar__sum strong { font-size: 17px; font-weight: 700; white-space: nowrap; }
  .hh-cartbar__sum small { font-size: 11px; font-weight: 400; color: var(--tx2); }
  .hh-cartbar__btn {
    flex: 1 1 0%; max-width: 240px; height: 56px; margin-inline-start: auto; display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none;
  }
  /* ⚠️ با opacity/transform پنهان می‌شود نه با display: ارتفاعِ ۷۶ باید
     بماند وگرنه لحظه‌ی پنهان‌شدن، صفحه ۷۶ پیکسل می‌پرد. padding-bottom
     بدنه هم به همین دلیل ثابت است. */
  .hh-cartbar { transition: opacity .18s, transform .18s; }
  .hh-cartbar.is-off { opacity: 0; transform: translateY(8px); pointer-events: none; }
  body.store.page-cart { padding-bottom: 152px; }
}

/* ── صفحه‌ی محصول: ردیف خرید (طرح موبایل: [شمارنده ۱۳۴×۵۲][افزودن به سبد خرید flex:1]) ──
   قلب در این ردیف نیست (روی گالری است) و برچسب دکمه تک‌خطی می‌ماند. */
@media (max-width: 1119px) {
  .store .pdp-buyrow__wish { display: none !important; }
  .store .pdp-qty { width: 134px; flex: 0 0 134px !important; }
  .store .pdp-qty button { width: 44px !important; }
  .store .pdp-qty output { width: 44px !important; }
  .store .pdp-buyrow__btn { white-space: nowrap; min-width: 0; padding: 0 12px !important; font-size: 15px !important; font-weight: 500 !important; }
}
@media (max-width: 359px) {
  .store .pdp-buyrow__btn { font-size: 14px !important; }
}
/* نوار خرید چسبان موبایل (طرح: دکمه ۵۶ + قیمت با «تومان» و قیمت قدیم خط‌خورده) */
@media (max-width: 1119px) {
  .store .buybar { align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 12px; }
  .store .buybar .grow { flex: 1 1 0%; }
  .store .buybar .btn--primary { height: 52px !important; font-size: 15px; font-weight: 500; }
  .store .buybar .stack { align-items: flex-start; gap: 2px; min-width: 96px; }
  .store .buybar .price { font-size: 17px; font-weight: 700; white-space: nowrap; }
  .store .buybar .price small { font-size: 11px; font-weight: 400; color: var(--tx2); margin-inline-start: 3px; }
  .store .buybar .price--old { font-size: 11.5px; color: var(--mut); text-decoration: line-through; }
  .store .buybar .price--old[hidden] { display: none; }
}

/* ── صفحه‌ی محصول: جمع‌کردن فاصله‌های ستون خرید روی موبایل ─────────
   روی صفحه‌ی ۳۶۰ پیکسلی، فاصله‌های دسکتاپیِ بین «رنگ»، «سایز» و دکمه‌ی
   خرید باعث می‌شد دکمه‌ی «افزودن به سبد» زیر خط تا بیفتد. */
@media (max-width: 719px) {
  .store .pdp-opt { margin-bottom: 14px; }
  .store .pdp-opt__label { margin-bottom: 8px; }
}

/* ── صفحه‌ی محصول: تب‌ها روی موبایل هم ──────────────────────────────
   ⚠️ قبلاً روی موبایل نوار تب پنهان می‌شد و هر چهار بخش (توضیحات،
   مشخصات، راهنمای سایز، نظرات) پشت‌سرهم باز بودند. نتیجه یک صفحه‌ی
   چند هزار پیکسلی بود که برای رسیدن به نظرات باید کل مشخصات را رد
   می‌کردی. همان کاری که دیجی‌کالا و بنی‌مد می‌کنند: یک نوار تبِ افقیِ
   لغزان، و فقط یک بخش باز. */
@media (max-width: 1119px) {
  .store .pdp-tabs {
    margin-top: 28px !important;
    gap: 20px !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* ⚠️ لبه‌تالبه: نوار باید تا لبه‌ی صفحه بلغزد وگرنه تبِ آخر پشت
       حاشیه‌ی کانتینر گیر می‌کند و انگار وجود ندارد. */
    margin-inline: -16px !important; padding-inline: 16px;
  }
  .store .pdp-tabs::-webkit-scrollbar { display: none; }
  .store .pdp-tab { padding: 12px 0 !important; font-size: 13.5px; white-space: nowrap; flex: 0 0 auto; }
  /* پنل‌ها داخل کانتینری‌اند که خودش حاشیه‌ی ۱۶ دارد؛ قاعده‌ی عمومیِ
     section حاشیه را دوبار می‌داد و جدول مشخصات از بقیه‌ی صفحه تورفته‌تر بود. */
  .store [data-pdp-panel] { margin-top: 20px !important; padding-inline: 0 !important; }
}

/* ── مجله: کارت شاخص روی موبایل — نسبت بلندتر تا متن با چیپ دسته تداخل نکند ── */
@media (max-width: 719px) {
  .store .blog-hero { aspect-ratio: 4 / 5 !important; }
  .store .blog-hero__txt { padding: 16px !important; gap: 6px !important; }
  .store .blog-hero__title { font-size: 20px !important; line-height: 1.45 !important; }
  .store .blog-hero__txt > span:nth-child(2) { font-size: 12px !important; line-height: 21px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ── اکسپلور فقط موبایل (به خواست مالک): لینک ناوبری دسکتاپ و بلوک خانه روی
   ≥۷۲۰ پنهان؛ صفحه‌ی /explore برای لینک مستقیم می‌ماند ── */
@media (min-width: 720px) {
  .store .hh-navlink[href="/explore"] { display: none !important; }
  .store .hh-sec-explore { display: none !important; }
}

/* ── فوتر روی صفحه‌های «اپ‌مانند» موبایل ──────────────────────────
   فوتر یک ستونِ بلند از لینک‌های سایت است: در صفحه‌ی خانه و لیست
   محصول جایش درست است، ولی زیر داشبورد حساب کاربری، اکسپلور، سبد،
   مراحل تسویه و صفحه‌ی ورود فقط چند اسکرول اضافه می‌شود — کاربر آنجا
   وسط یک کار است، نه در حال گشتن سایت. روی دسکتاپ دست‌نخورده می‌ماند.

   ⚠️ display:none نه visibility: فوتر رندر سمت سرور است و محتوایش
   (لینک‌های حقوقی، نماد اعتماد) برای خزنده لازم است؛ در موبایل فقط از
   جریان چیدمان بیرون می‌رود و در دسکتاپ همان‌جاست.

   ⚠️ فاصله‌ی امنِ پایین از خودِ فوتر می‌آمد (.hh-ftr margin-bottom)؛
   حالا که فوتر نیست، همان فاصله باید به بدنه برگردد وگرنه آخرین دکمه‌ی
   صفحه زیر نوار پایینی گم می‌شود. */
@media (max-width: 719px) {
  body.store.page-account .hh-ftr,
  body.store.page-explore .hh-ftr,
  body.store.page-cart .hh-ftr,
  body.store.page-checkout .hh-ftr,
  body.store.page-auth .hh-ftr { display: none !important; }

  body.store.page-account,
  body.store.page-explore,
  body.store.page-cart,
  body.store.page-checkout,
  body.store.page-auth { padding-bottom: 96px; }
}

/* سطح لمس لینک‌های کوچک فوتر (ایمیل، نقشه سایت) — ارتفاع ۱۹ پیکسل برای
   انگشت کم بود؛ ظاهر عوض نمی‌شود، فقط ناحیه‌ی ضربه بزرگ‌تر می‌شود. */
@media (max-width: 719px) {
  .store .hh-ftr__mail { padding-block: 10px; margin-block: -10px -2px; }
  .store .hh-ftr-link { padding-block: 10px; margin-block: -10px; }
}

/* ── کارت محصول روی موبایل: ارتفاع جمع‌وجورتر ──────────────────────
   بازخورد مالک: «تو حالت موبایل ارتفاعش زیاده». بدنه‌ی کارت تقریباً
   هم‌قد عکس شده بود؛ بیشترش هم از قیمت می‌آمد که در عرض کم دو سطری
   می‌شد. اندازه‌ها کوچک‌تر و فاصله‌ها جمع شد؛ عکس هم کمی کوتاه‌تر. */
@media (max-width: 719px) {
  .store .hh-card-media { aspect-ratio: 1 / 1.1; }
  .store .hh-card-body { padding: 8px 9px 9px; gap: 3px; }
  .store .hh-card-price { padding-top: 6px; }
  .store .hh-card-title { font-size: 12.5px; line-height: 18px; }
  .store .hh-card-meta { min-height: 18px; }
  .store .hh-card-swatches .hh-swatch { width: 18px; height: 18px; }
  .store .hh-card-swatches .hh-swatch__dot { width: 11px; height: 11px; }
  .store .hh-card-colors { font-size: 10.5px; }
  .store .hh-card-price { gap: 5px; line-height: 19px; }
  .store .hh-card-price__now { font-size: 13.5px; }
  .store .hh-card-price__unit { font-size: 10.5px; }
  .store .hh-card-price__old { font-size: 10.5px; }
  .store .hh-card-stock { font-size: 10px; }
  .store .hh-card-badges { top: 8px; inset-inline-start: 8px; }
  .store .hh-badge { height: 20px; padding: 0 7px; font-size: 10px; }
  .store .hh-wish { top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; }
  .store .hh-wish svg { width: 14px; height: 14px; }
}
/* راهنمای سایز داخل شیت: بدون فاصله‌ی بالای بخش و با تیتر کوچک‌تر */
.store .hh-sheet [data-pdp-panel] { margin-top: 0 !important; }
.store .hh-sheet #size-guide h2 { font-size: 17px !important; }
.store .hh-sheet #size-guide table { font-size: 12.5px; }
.store .hh-sheet [data-sg-done-wrap] { display: none; } /* شیت خودش دکمه‌ی پایین دارد */
}