/**
 * HyperMarket M3 — homepage.css
 * اصلاح فاصله‌ها، تصویر کارت، badge کپسولی
 */
.hm-homepage { background:#f6f6f6; }

/* ══ HERO SLIDER ══ */
.hm-slider {
  margin: 10px 10px 0;
  border-radius: 20px; overflow:hidden;
  position:relative; height:188px;
  background:#222; touch-action:pan-y;
}
.hm-slider__track { position:relative; width:100%; height:100%; }
.hm-slider__slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .5s ease;
  pointer-events:none; border-radius:20px;
  overflow:hidden; display:block;
}
.hm-slider__slide.is-active { opacity:1; pointer-events:all; z-index:1; }
.hm-slider__dots {
  position:absolute; bottom:10px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:5px; z-index:10;
}
.hm-slider__dot {
  width:6px; height:6px; border-radius:99px;
  background:rgba(255,255,255,.35); border:none;
  padding:0; cursor:pointer; transition:all .3s;
}
.hm-slider__dot.is-on { background:#fff; width:18px; }

/* ══ CATEGORIES — فاصله استاندارد از اسلایدر ══ */
.hm-cats {
  display:flex !important; flex-direction:row !important;
  overflow-x:auto; scrollbar-width:none;
  padding: 10px 8px 10px; /* بالا ۱۰، پایین ۱۰ */
  gap:0;
}
.hm-cats::-webkit-scrollbar { display:none; }
.hm-cat-item {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:0 7px; flex-shrink:0; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.hm-cat-item__circle {
  width:62px; height:62px; border-radius:18px;
  background:#fff; border:1.5px solid #eee;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; transition:border-color .2s,transform .18s;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.hm-cat-item__circle img { width:40px; height:40px; object-fit:contain; }
.hm-cat-item__icon { font-size:24px; color:#ccc; }
.hm-cat-item:active .hm-cat-item__circle { border-color:#FFC107; transform:scale(1.05); }
.hm-cat-item__label { font-size:10.5px; color:#555; font-weight:500; text-align:center; white-space:nowrap; }

/* ══ FLASH SALE BOX — فاصله استاندارد از دسته‌بندی‌ها ══ */
.hm-flash-box {
  margin: 6px 10px 0; /* فاصله کم از cats */
  background:#FFC107; border-radius:22px;
  overflow:hidden; padding-bottom:6px;
}
.hm-flash-box__hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 10px;
}
.hm-flash-box__hdr-right { display:flex; align-items:center; gap:8px; }
.hm-flash-box__dot {
  width:13px; height:13px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.7); flex-shrink:0;
}
.hm-flash-box__title { font-size:14px; font-weight:700; color:#222; }
.hm-flash-box__timer {
  background:rgba(0,0,0,.13); border-radius:10px;
  padding:5px 12px; font-size:15px; font-weight:800;
  color:#1a1a1a; letter-spacing:1px;
  direction:ltr; font-variant-numeric:tabular-nums;
}
.hm-flash-box__scroll {
  overflow-x:auto !important; scrollbar-width:none;
  padding:0 8px 8px; -webkit-overflow-scrolling:touch;
}
.hm-flash-box__scroll::-webkit-scrollbar { display:none; }
.hm-flash-box__grid {
  display:grid !important;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column !important;
  grid-auto-columns: 108px !important;
  gap:7px; width:max-content !important;
}
.hm-flash-box__footer {
  padding:2px 14px 10px;
  display:flex; justify-content:center;
}
.hm-flash-box__more {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:700; color:#333;
  background:rgba(0,0,0,.1); padding:7px 16px;
  border-radius:99px; text-decoration:none;
}

/* ── کارت فلش سیل ── */
.hfc {
  background:#fff; border-radius:14px;
  width:108px; position:relative; cursor:pointer;
  display:flex; flex-direction:column;
  overflow:hidden; transition:transform .15s;
}
.hfc:active { transform:scale(.95); }

/* badge کپسولی — گوشه کاملاً گرد */
.hfc__disc {
  position:absolute; top:6px; left:6px;
  background:#e8380d; color:#fff;
  font-size:9px; font-weight:800;
  padding:2px 7px; border-radius:99px; /* کاملاً گرد */
  z-index:3; line-height:1.4;
}
.hfc__pack {
  position:absolute; top:6px; right:6px;
  background:#333; color:#fff;
  font-size:8.5px; font-weight:700;
  padding:2px 6px; border-radius:99px; /* کاملاً گرد */
  z-index:3; direction:ltr;
}
.hfc__stock {
  position:absolute; bottom:42px; right:0; left:0;
  background:rgba(232,56,13,.85); color:#fff;
  font-size:8px; font-weight:600; text-align:center;
  padding:2px; z-index:3;
}

/* تصویر — با padding داخلی + پس‌زمینه سفید + border ریز */
.hfc__img-wrap { position:relative; width:100%; }
.hfc__img-a {
  display:block; width:100%; aspect-ratio:1;
  background:#fff;
  border-bottom: 1px solid #f0f0f0;
  overflow:hidden;
}
.hfc__img-a img {
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  padding:10px; box-sizing:border-box;
}

/* دکمه + — گوشه راست‌پایین روی تصویر */
.hfc__add {
  position:absolute; bottom:7px; right:7px;
  width:28px; height:28px; border-radius:50%;
  background:#FFC107; border:none; cursor:pointer;
  font-size:20px; font-weight:700; color:#333; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .13s; font-family:inherit; z-index:4;
}
.hfc__add:active { transform:scale(.82); }

/* قیمت‌ها */
.hfc__prices {
  padding:5px 8px 7px;
  display:flex; flex-direction:column; gap:1px;
}
.hfc__old {
  font-size:9px; color:#bbb; text-decoration:line-through;
  text-align:right; direction:rtl; display:block;
}
.hfc__new {
  font-size:12px; font-weight:800; color:#e8380d;
  text-align:right; direction:rtl; display:block; line-height:1.3;
}
.hfc__new-unit { font-size:8.5px; font-weight:500; color:#e8380d; }

/* ══ SECTION HEADER ══ */
.hm-divider { display:none !important; }

.hm-section-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 6px;
}
.hm-section-hdr__left { display:flex; align-items:center; gap:6px; }
.hm-section-hdr__ring {
  width:11px; height:11px; border-radius:50%;
  border:2.5px solid #ccc; flex-shrink:0; display:inline-block;
}
.hm-section-hdr__ring--yellow { background:#FFC107; border-color:#FFC107; }
.hm-section-hdr__icon-img { width:22px; height:22px; border-radius:7px; object-fit:contain; background:#f5f5f5; }
.hm-section-hdr__icon-sym { font-size:20px; color:#FFC107; }
.hm-section-hdr__title { font-size:14px; font-weight:700; color:#222; }
.hm-section-hdr__timer {
  background:#FFC107; color:#333; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:99px;
  direction:ltr; font-variant-numeric:tabular-nums;
}
.hm-section-hdr__more { font-size:11px; color:#aaa; text-decoration:none; }

/* ══ PRODUCT ROW ══ */
.hm-product-row {
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  overflow-x:auto !important; scrollbar-width:none;
  padding: 4px 12px 12px;
  gap:8px; -webkit-overflow-scrolling:touch;
}
.hm-product-row::-webkit-scrollbar { display:none; }

/* ── کارت محصول معمولی ── */
.hc {
  background:#fff; border-radius:14px;
  width:120px; min-width:120px; max-width:120px;
  flex-shrink:0 !important;
  position:relative; cursor:pointer;
  border:1px solid #efefef;
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .15s;
}
.hc:active { transform:scale(.95); }

/* badge کپسولی — گوشه کاملاً گرد */
.hc__disc {
  position:absolute; top:7px; left:7px;
  background:#e8380d; color:#fff;
  font-size:9.5px; font-weight:800;
  padding:2px 7px; border-radius:99px; /* کاملاً گرد */
  z-index:3; line-height:1.4;
}
.hc__pack {
  position:absolute; top:7px; right:7px;
  background:#333; color:#fff;
  font-size:9px; font-weight:700;
  padding:2px 6px; border-radius:99px; /* کاملاً گرد */
  z-index:3; direction:ltr;
}
.hc__stock {
  position:absolute; top:34px; left:0; right:0;
  background:rgba(232,56,13,.85); color:#fff;
  font-size:8px; font-weight:600; text-align:center;
  padding:2px; z-index:3;
}

/* تصویر — پس‌زمینه سفید + border ریز + padding */
.hc__img-wrap { position:relative; width:100%; }
.hc__img-a {
  display:block; width:100%; aspect-ratio:1;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
  overflow:hidden;
}
.hc__img-a img {
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  padding:10px; box-sizing:border-box;
}

/* دکمه + — گوشه راست‌پایین روی تصویر */
.hc__add {
  position:absolute; bottom:6px; right:6px;
  width:28px; height:28px; border-radius:50%;
  background:#FFC107; border:none; cursor:pointer;
  font-size:21px; font-weight:700; color:#333; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .13s; font-family:inherit; z-index:4;
}
.hc__add:active { transform:scale(.82); }

/* متن + قیمت */
.hc__body { padding:6px 8px 8px; display:flex; flex-direction:column; gap:2px; }
.hc__name {
  font-size:10.5px; color:#333; font-weight:500;
  line-height:1.35; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:27px;
}
.hc__price { text-align:right; direction:rtl; }
.hc__price ins { text-decoration:none; display:flex; align-items:baseline; gap:3px; }
.hc__price ins .hc__price-num { font-size:14px; font-weight:800; color:#e8380d; }
.hc__price ins .hc__price-unit { font-size:10px; color:#e8380d; }
.hc__price del { display:flex; align-items:baseline; gap:2px; margin-bottom:1px; }
.hc__price del .hc__price-num { font-size:10px; font-weight:400; color:#bbb; }
.hc__price del .hc__price-unit { font-size:9px; color:#ccc; }
.hc__price-simple { display:flex; align-items:baseline; gap:3px; }
.hc__price-simple .hc__price-num { font-size:14px; font-weight:800; color:#333; }
.hc__price-simple .hc__price-unit { font-size:10px; color:#888; }

/* ══ BRANDS ROW ══ */
.hm-brands-row {
  display:flex !important; flex-direction:row !important;
  overflow-x:auto; scrollbar-width:none;
  padding:4px 12px 12px; gap:10px;
}
.hm-brands-row::-webkit-scrollbar { display:none; }
.hm-brand-item {
  display:flex; flex-direction:column; align-items:center;
  gap:5px; flex-shrink:0; text-decoration:none;
}
.hm-brand-item__img {
  width:70px; height:70px; border-radius:18px;
  background:#fff; border:1.5px solid #eee;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hm-brand-item__img img { width:50px; height:50px; object-fit:contain; }
.hm-brand-item__name { font-size:10px; color:#555; font-weight:500; text-align:center; white-space:nowrap; }

/* ══ QTY PILL — دکمه + کشویی ══ */
.hm-qty-pill {
  position: absolute;
  bottom: 6px; right: 6px;
  display: flex; align-items: center;
  background: #FFC107;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: 4;
  height: 28px;
}
.hm-qty-pill__btn {
  width: 28px; height: 28px;
  background: transparent; border: none;
  font-size: 18px; font-weight: 700;
  color: #33290a; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.hm-qty-pill__n {
  font-size: 13px; font-weight: 800;
  color: #33290a; min-width: 22px;
  text-align: center;
}

/* ══ MIN ORDER BAR — دقیقاً سبک bottom nav ══ */
.hm-min-bar {
  position: fixed;
  /* بالای bottom nav — فاصله 10px از nav */
  bottom: 84px;
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 28px); max-width: 400px;
  /* رنگ و بلر دقیقاً مثل bottom nav */
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  padding: 10px 14px;
  z-index: 490;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.13), 0 1px 6px rgba(0,0,0,.06);
  transition: opacity .3s cubic-bezier(.25,1,.5,1),
              transform .3s cubic-bezier(.25,1,.5,1);
}
.hm-min-bar[hidden] {
  display: none !important;
}
.hm-min-bar__top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hm-min-bar__count {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #555;
}
.hm-min-bar__count::before {
  content: 'shopping_bag';
  font-family: 'Material Symbols Rounded';
  font-size: 16px; color: #FFC107;
}
.hm-min-bar__rem {
  font-size: 12px; color: #333; font-weight: 500;
  text-align: left; direction: rtl;
}
.hm-min-bar__rem b { color: #e8380d; font-size: 13px; font-weight: 800; }
.hm-min-bar__track {
  height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 99px; overflow: hidden;
}
.hm-min-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #FFC107, #ffb300);
  border-radius: 99px;
  transition: width .45s cubic-bezier(.25,1,.5,1);
  min-width: 5px;
}

/* ══ SECTION SLIDESHOW ══ */
.hm-secslide {
  margin: 8px 12px 0;
  border-radius: 14px;
  overflow: hidden;
  height: var(--sh, 120px);
  position: relative;
}
.hm-secslide__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hm-secslide__track {
  display: flex; width: 100%; height: 100%;
  transition: transform .4s cubic-bezier(.25,1,.5,1);
}
.hm-secslide__track img {
  min-width: 100%; height: 100%; object-fit: cover;
}
.hm-secslide__dots {
  position: absolute; bottom: 7px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 5px;
}
.hm-secslide__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.5); cursor: pointer; transition: all .2s;
}
.hm-secslide__dot.on { background: #fff; width: 16px; border-radius: 3px; }

/* ══ TIMEBOX — خانواده تایم ══ */
.hm-timebox {
  background: var(--tc, #FFC107) !important;
}
.hm-timebox .hm-flash-box__hdr { background: transparent; }
.hm-timebox .hm-flash-box__title { color: #1a1a2e; }
.hm-timebox .hm-flash-box__dot { background: #1a1a2e; }
.hm-timebox .hm-flash-box__timer { background: rgba(0,0,0,.15); color: #1a1a2e; }


/* ══ SECTION SPACING — از پنل ══ */
.hm-homepage { --gap-sections: 0px; --gap-cards: 10px; }
.hm-section-hdr { margin-top: var(--gap-sections, 0px); }
.hm-divider { height: var(--gap-sections, 0px); }
.hm-product-row { gap: var(--gap-cards, 10px) !important; }

/* ══ MIN BAR animation ══ */
.hm-min-bar {
  transform: translateY(10px);
  opacity: 0;
  transition: transform .32s cubic-bezier(.25,1,.5,1), opacity .28s;
}
.hm-min-bar.is-in {
  transform: translateY(0);
  opacity: 1;
}

/* ══ BACK TO TOP — روی هیچ باکسی ماسک نکنه ══ */
#hm-back-top {
  /* باید زیر min-bar و bottom nav باشه اما روی محتوا */
  z-index: 488 !important;  /* زیر min-bar(490) و bnav(999) */
  bottom: 100px !important; /* بالاتر از min-bar */
  left: 14px !important;
}
/* وقتی min-bar باز نیست، نزدیک‌تر به پایین */
body:not(.has-min-bar) #hm-back-top {
  bottom: 92px !important;
}