/**
 * Arzoon — Homepage Responsive Fixes (Mobile / Tablet / Desktop)
 * فایل اختصاصی ریسپانسیو که بعد از home-2026.css لود می‌شود.
 * تمام سکشن‌های صفحه اصلی را برای موبایل (<576)، تبلت (576-1023)
 * و دیسکتاپ (1024+) بهینه‌سازی می‌کند — کاملاً راست‌چین.
 *
 * بریک‌پوینت‌ها (هماهنگ با Bootstrap RTL):
 *   XS  < 576   موبایل کوچک
 *   SM  576-767  موبایل بزرگ / فبلت
 *   MD  768-991  تبلت
 *   LG  992-1199 تبلت بزرگ / لپ‌تاپ
 *   XL  ≥ 1200   دسکتاپ
 */

/* ════════════════════════════════════════════
   0. بنیاد — جلوگیری از اسکرول افقی
   ════════════════════════════════════════════ */
.hp26,
.sf-home {
  overflow-x: clip;
  max-width: 100%;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════
   HEADER — هدر و نوار جستجو
   ════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .sf-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: 0.55rem;
    padding-block: 0.55rem;
  }

  .sf-header__inner > .mobile-menu-toggle {
    grid-column: 1;
    grid-row: 1;
  }

  .sf-header__inner > .sf-header__logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  .sf-header__inner > .sf-header__actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .sf-header__inner > .sf-header__search {
    display: block !important;
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    width: 100%;
    margin-inline: 0;
    justify-self: stretch;
  }

  .sf-header__search-box,
  .sf-header__search .input-group {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .sf-header__logo-img {
    width: 63.17px;
    height: 64.99px;
  }

  .sf-header__search-btn,
  .sf-header__search .search-btn {
    min-width: 4.5rem;
    padding-inline: 0.75rem;
    font-size: 0.8rem;
  }

  .mobile-sidebar .sidebar-nav a {
    font-size: 0.9rem;
  }
}

/* ════════════════════════════════════════════
   1. HERO — هیرو + اسلایدر
   ════════════════════════════════════════════ */
@media (max-width: 991px) {
  .hp26-hero {
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
  }

  .hp26-hero__title {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  .hp26-hero__subtitle {
    font-size: clamp(0.9rem, 3.5vw, 1.05rem);
  }

  /* دکمه‌های هیرو تمام‌عرض روی موبایل */
  .hp26-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .hp26-hero__actions .hp26-btn {
    width: 100%;
    justify-content: center;
    padding-block: 0.75rem;
  }

  .hp26-hero__visual {
    min-height: auto;
  }

  .hp26-hero__img-wrap {
    max-width: 16rem;
  }
}

@media (max-width: 575px) {
  .hp26-hero__title {
    font-size: clamp(1.4rem, 8vw, 2rem);
    line-height: 1.15;
  }

  .hp26-hero__badge {
    font-size: 0.65rem;
    align-self: flex-start;
  }

  /* شمارنده‌های هیرو روی موبایل به ستون */
  .hp26-hero__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .hp26-hero__stat-num {
    font-size: 1.1rem;
  }

  .hp26-hero__stat-label {
    font-size: 0.625rem;
  }

  .hp26-hero__controls {
    gap: 0.5rem;
  }

  .hp26-hero-nav {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ════════════════════════════════════════════
   2. BENEFITS — مزایا
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hp26-benefits__grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .hp26-benefit {
    padding: 0.75rem;
    gap: 0.625rem;
  }

  .hp26-benefit__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
  }

  .hp26-benefit__text strong {
    font-size: 0.8rem;
  }

  .hp26-benefit__text span {
    font-size: 0.7rem;
  }
}

/* ════════════════════════════════════════════
   3. CATEGORIES — دسته‌بندی‌ها
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hp26-cats__grid {
    --cats-visible: 3.3;
    gap: 0.5rem;
  }

  .hp26-cat {
    padding: 0.75rem 0.25rem;
    gap: 0.5rem;
    flex-basis: calc((100% - (var(--cats-visible) - 1) * 0.5rem) / var(--cats-visible));
  }

  .hp26-cat__circle {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.2rem;
  }

  .hp26-cat__name {
    font-size: 0.72rem;
  }

  .hp26-cat__count {
    font-size: 0.625rem;
  }
}

/* ════════════════════════════════════════════
   4. FLASH SALE — فروش ویژه + شمارش معکوس
   ════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hp26-flash__head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hp26-flash__countdown {
    justify-content: center;
  }

  .hp26-flash__icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }

  .hp26-countdown__value {
    min-width: 2.25rem;
    height: 2.1rem;
    font-size: 0.95rem;
  }

  .hp26-countdown__label {
    font-size: 0.55rem;
  }

  /* ناوبری اسلایدر روی موبایل کوچک‌تر */
  .deals-swiper .swiper-button-next,
  .deals-swiper .swiper-button-prev {
    width: 2rem;
    height: 2rem;
  }
}

@media (max-width: 575px) {
  .hp26-flash__title-row .hp26-eyebrow {
    font-size: 0.6rem;
  }
}

/* ════════════════════════════════════════════
   5. EDITOR'S PICK — انتخاب سردبیر
   ════════════════════════════════════════════ */
@media (max-width: 991px) {
  .hp26-editors__grid {
    padding: 0.5rem;
    gap: 0.75rem;
  }

  .hp26-editors__hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hp26-editors__hero-visual {
    min-height: 12rem;
    padding: 1rem;
  }

  .hp26-editors__product-stage {
    max-width: 11rem;
  }

  .hp26-editors__hero-body {
    padding: 1.25rem;
  }

  /* کارت‌های مینی روی تبلت به‌صورت ردیفی (۳ ستون مساوی، کارت عمودی) */
  .hp26-editors__side {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
  }

  .hp26-editors__mini {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: 0.625rem;
    gap: 0.5rem;
    text-align: center;
  }

  .hp26-editors__mini-media {
    margin-inline: auto;
    max-width: 5.5rem;
  }

  .hp26-editors__mini-body {
    align-items: center;
    gap: 0.25rem;
  }
}

@media (max-width: 575px) {
  .hp26-editors__side {
    grid-template-columns: 1fr;
  }

  .hp26-editors__mini {
    grid-template-columns: 5rem 1fr;
  }

  .hp26-editors__hero-name {
    font-size: 1.1rem;
  }

  .hp26-editors__hero-desc {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
  }

  .hp26-editors__hero-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hp26-editors__cta {
    justify-content: center;
  }
}

/* ════════════════════════════════════════════
   6-7. BESTSELLERS / TABS / SHOWCASE
   ════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* تب‌ها باید اسکرول افقی داشته باشند روی تبلت */
  .hp26 .product-tabs {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }

  .hp26 .product-tabs::-webkit-scrollbar {
    display: none;
  }

  .hp26 .product-tabs .tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* هِدِر سکشن پرفروش‌ها روی تبلت زیر هم */
  .hp26 .hp26-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hp26-bs__panel-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* تصویر اسپات‌لایت روی تبلت/موبایل نباید خیلی کوچک شود؛
     در غیر این صورت placeholder/no-image نامرئی می‌شود و قاب خالی دیده می‌شود. */
  .hp26-bs__visual-frame {
    max-width: clamp(14rem, 60vw, 22rem);
    margin-inline: auto;
  }

  .hp26-bs__info {
    text-align: center;
    align-items: center;
  }

  .hp26-bs__info-head {
    justify-content: center;
  }

  .hp26-bs__desc {
    margin-inline: auto;
  }

  .hp26-bs__actions {
    justify-content: center;
  }

  .hp26-bs__actions .hp26-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 575px) {
  /* rail موبایل: اسلایدها کوچک‌تر و اسکرول‌خورده */
  .hp26-bs__rank {
    width: clamp(11rem, 80vw, 14rem);
    padding: 0.625rem;
    gap: 0.5rem;
  }

  .hp26-bs__rank-thumb {
    width: 2.25rem;
    height: 2.25rem;
  }

  .hp26-bs__rank-name {
    font-size: 0.7rem;
  }

  .hp26-bs__rank-price {
    font-size: 0.65rem;
  }

  .hp26-bs__spotlight {
    padding: 1rem;
    min-height: auto;
  }

  /* پدینگ داخلی تصویر کم شود تا تصویر/placeholder بیشتر دیده شود */
  .hp26-bs__img-link {
    padding: var(--space-4);
  }

  .hp26-bs__title {
    font-size: 1.15rem;
  }

  .hp26-bs__price {
    font-size: 1.5rem;
  }

  .hp26-bs__footer {
    padding: 0.75rem 1rem;
  }

  .hp26-bs__toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }

  .hp26-bs__nav-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ════════════════════════════════════════════
   8. PROMO BANNERS + WIDE CTA
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hp26-promo {
    min-height: 10rem;
    padding: 1rem;
  }

  .hp26-promo__deco {
    font-size: 2rem;
  }

  .hp26-promo__title {
    font-size: 1rem;
  }

  .hp26-promo__subtitle {
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hp26-wide {
    min-height: 12rem;
    padding: 1.5rem;
  }

  .hp26-wide__title {
    font-size: 1.25rem;
  }

  .hp26-wide__subtitle {
    font-size: 0.85rem;
  }

  .hp26-wide .hp26-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════
   9. STATS — آمار
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hp26-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .hp26-stat {
    padding: 1.25rem 0.5rem;
  }

  .hp26-stat__num {
    font-size: 1.5rem;
  }

  .hp26-stat__label {
    font-size: 0.7rem;
  }

  .hp26-stat__icon {
    font-size: 1.1rem;
  }
}

/* ════════════════════════════════════════════
   10. TESTIMONIALS — نظرات مشتریان
   ════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hp26-testimonials__swiper .swiper-slide {
    width: 85%;
  }

  .hp26-testimonial {
    padding: 1.25rem;
  }

  .hp26-testimonial__text {
    font-size: 0.85rem;
  }
}

@media (max-width: 575px) {
  .hp26-testimonials__swiper .swiper-slide {
    width: 90%;
  }
}

/* ════════════════════════════════════════════
   11. BRANDS MARQUEE — برندها
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hp26-brand__name {
    font-size: 0.8rem;
  }

  .hp26-brand__mark {
    font-size: 0.9rem;
  }

  .hp26-brand {
    padding: 0.5rem 0.875rem;
  }
}

/* ════════════════════════════════════════════
   12. FAQ — سوالات متداول (Modern Split)
   ════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* روی تبلت/موبایل، هِدِر زیر هم و معرفی تمام‌عرض */
  .hp26-faq__intro {
    max-width: 100%;
  }

  /* ستون کناری دیگر sticky نباشد روی موبایل */
  .hp26-faq__aside {
    position: static;
  }
}

@media (max-width: 575px) {
  .hp26-faq__list {
    max-width: 100%;
  }

  .hp26-faq__trigger {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    gap: 0.625rem;
  }

  /* علامت شماره کوچک‌تر */
  .hp26-faq__q {
    gap: 0.5rem;
  }

  .hp26-faq__q-mark {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6rem;
  }

  /* پاسخ بدون ایندنت اضافی شماره */
  .hp26-faq__answer {
    padding: 0 1rem 1rem 1rem;
    font-size: 0.8rem;
  }

  /* آیکون FAQ */
  .hp26-faq__icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.8rem;
  }

  /* گرافیک کناری روی موبایل کوچک‌تر */
  .hp26-faq__visual {
    padding: var(--space-4) var(--space-3) var(--space-1);
  }

  .hp26-faq__visual-art {
    max-width: 14rem;
  }

  .hp26-faq__aside-body {
    padding: var(--space-1) var(--space-4) var(--space-4);
  }

  .hp26-faq__aside-title {
    font-size: 1rem;
  }

  .hp26-faq__aside-desc {
    font-size: 0.8rem;
  }

  /* کارت‌های تماس فشرده‌تر */
  .hp26-faq__contact {
    padding: 0.625rem;
    gap: 0.625rem;
  }

  .hp26-faq__contact-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }

  .hp26-faq__contact-text small {
    font-size: 0.65rem;
  }

  .hp26-faq__contact-text strong {
    font-size: 0.78rem;
  }
}

/* ════════════════════════════════════════════
   13. INSTAGRAM — گالری
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hp26-insta__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }

  .hp26-insta__item {
    border-radius: var(--radius-md, 0.75rem);
  }

  /* overlay روی موبایل همیشه کمی قابل‌مشاهده باشد (لمسی) */
  .hp26-insta__item .hp26-insta__overlay {
    background: linear-gradient(180deg, transparent 50%, rgba(143, 11, 19, 0.55));
    opacity: 0.4;
  }
}

/* ════════════════════════════════════════════
   14. ALL PRODUCTS GRID — همه محصولات
   ════════════════════════════════════════════ */
@media (max-width: 991px) {
  .hp26 .az-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .hp26 .az-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .hp26 .az-grid--5 {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════
   GENERIC — عنوان‌های سکشن، فاصله‌ها، دکمه‌ها
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hp26-section {
    padding-block: clamp(1.75rem, 6vw, 2.5rem);
  }

  .hp26-section--tight {
    padding-block: clamp(1.25rem, 4vw, 1.75rem);
  }

  .hp26-head {
    margin-bottom: 1.25rem;
  }

  .hp26-head__title {
    font-size: clamp(1.1rem, 4.3vw, 1.35rem);
  }

  .hp26-head__subtitle {
    font-size: 0.85rem;
    margin-top: 0.3rem;
  }

  .hp26-eyebrow {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
  }

  .hp26-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8rem;
  }

  .hp26-btn--lg {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }

  .hp26-cta-center {
    margin-top: 1rem;
  }

  .hp26-cta-center .hp26-btn {
    width: 100%;
  }

  /* لینک «مشاهده همه» در هدر سکشن‌ها */
  .hp26-link {
    font-size: 0.75rem;
  }
}

/* هدر سکشن‌ها روی تبلت/موبایل زیر هم */
@media (max-width: 767px) {
  .hp26-head:not(.hp26-head--center) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ════════════════════════════════════════════
   کارت محصول — اصلاحات موبایل
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .product-card.az-product-card .az-product-card__body,
  .product-card.az-product-card .product-info {
    padding: 0.75rem;
  }

  .product-card.az-product-card .az-product-card__title,
  .product-card.az-product-card .product-name {
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .product-card.az-product-card .price-discount,
  .product-card.az-product-card .az-product-card__price {
    font-size: 1rem;
  }

  .product-card.az-product-card .az-product-card__action,
  .product-card.az-product-card .az-product-card__action--cart {
    font-size: 0.78rem;
    min-height: 2.3rem;
  }

  .product-card.az-product-card .wishlist-btn,
  .product-card.az-product-card .az-product-card__wishlist {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.9rem;
  }

  .product-card.az-product-card .az-product-card__badge {
    font-size: 0.62rem;
    min-height: 1.4rem;
    padding: 0.15rem 0.5rem;
  }
}

/* ════════════════════════════════════════════
   نوار اعلان (marquee)
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hp26-announce__item {
    font-size: 0.68rem;
  }

  .hp26-announce__item i {
    font-size: 0.75rem;
  }
}

/* ════════════════════════════════════════════
   نوار پیشرفت اسکرول
   ════════════════════════════════════════════ */
.hp26-scroll-progress {
  z-index: 1100;
}

/* ════════════════════════════════════════════
   مگاساکشن‌های نهایی — امنیت ریسپانسیو
   ════════════════════════════════════════════ */

/* هیچ عنصری نباید عرض viewport را بشکند */
.hp26-announce__track,
.hp26-brands__track {
  max-width: none;
}

/* اسلایدهای Swiper نباید باعث اسکرول افقی شوند */
.hp26 .swiper {
  overflow-x: clip;
}

/* viewport کوچک‌تر از 360 (گوشی‌های خیلی کوچک) */
@media (max-width: 359px) {
  .hp26-cats__grid {
    --cats-visible: 2.3;
  }

  .hp26-stats__grid {
    grid-template-columns: 1fr;
  }

  .hp26-insta__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ════════════════════════════════════════════
   FOOTER — فوتر (بهبود موبایل)
   ════════════════════════════════════════════ */
@media (max-width: 575px) {
  /* فوتر روی موبایل کوچک ۲ ستونی (به‌جای ۱) برای استفاده بهتر از فضا */
  .sf-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* اولین ویجت (لوگو/درباره) تمام‌عرض */
  .sf-footer__grid > .footer-widget:first-child {
    grid-column: 1 / -1;
  }

  .sf-footer__grid .footer-widget {
    text-align: center;
  }

  .sf-footer__social {
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .sf-footer__grid {
    grid-template-columns: 1fr;
  }
}