/* =========================================================
   GLOBAL RESPONSIVE / UX OVERRIDES
========================================================= */

/*
 * تنظیم زوم قبلی بدون تغییر
 */
@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

html,
body {
  max-width: 100%;
}

.app,
.payment-method-app,
.profile-app,
.profile-edit-app,
.wallet-app,
.info-app,
.returns-app,
.orders-app,
.order-detail-app,
.card-payment-page {
  min-width: 0;
}

img,
video,
iframe {
  max-width: 100%;
}
 
input,
textarea,
select,
button {
  max-width: 100%;
}
.site-footer {
  margin-top: 0 !important;
}
/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 359px) {

  .header-inner {
    gap: 6px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .header-actions {
    gap: 6px;
  }

  .menu-btn,
  .header-cart-btn {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .header .search-inner {
    height: 40px;
    padding-right: 9px;
    padding-left: 9px;
    gap: 6px;
  }

  .header .search-placeholder {
    font-size: 11.5px;
  }

  .header .search-brand-logo {
    width: 47px;
  }

  .bottom-nav {
    width: calc(100% - 16px);
    padding-right: 4px;
    padding-left: 4px;
  }

  .bottom-item {
    font-size: 9.6px;
  }

  .drawer {
    width: min(278px, 88vw);
  }

  .drawer-quick-links {
    gap: 5px;
  }

  .drawer-quick-text {
    font-size: 9.5px;
  }

  .footer-benefits {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   LARGE PHONES AND TABLETS
========================================================= */

@media (
  min-width: 600px
) and (
  max-width: 899px
) {

   .app {
    max-width: 820px !important;
  }

  .header-inner {
    padding-right: 18px;
    padding-left: 18px;
  }

  .full-search-body {
    max-width: 680px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .bottom-nav {
    width: calc(100% - 40px);
    max-width: 620px;
  }

  .hero-section,
  .categories-section,
  .section {
    padding-right: 18px;
    padding-left: 18px;
  }

  .slide {
    height: 300px !important;
  }

  .categories {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    gap: 14px;
  }

  .products-row {
    gap: 12px;
  }

  .products-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 14px !important;
  }

  .footer-benefits {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .site-footer {
    padding-right: 22px;
    padding-left: 22px;
  }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 900px) {

  body {
    min-width: 0;
    background: var(--bg);
  }

  /*
   * پوسته اصلی فروشگاه
   */
    .app {
    max-width: 1280px !important;
  }

  .header-inner {
    width: 100%;
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 24px;
    padding-left: 24px;
  }

  /*
   * جستجوی تمام‌صفحه
   */
  .full-search-body {
    max-width: 820px !important;
    padding-right: 24px;
    padding-left: 24px;
  }

  /*
   * Drawer دسکتاپ
   */
  .drawer {
    width: 360px;
    max-width: 42vw;
  }

  /*
   * نوار پایین در تبلت افقی
   */
  .bottom-nav {
    width: calc(100% - 48px);
    max-width: 560px !important;

    bottom:
      calc(
        16px +
        env(safe-area-inset-bottom)
      );
  }

  /*
   * صفحه اصلی
   */
  .hero-section,
  .categories-section,
  .section {
    padding-right: 24px;
    padding-left: 24px;
  }

  .slide {
    height:
      clamp(
        320px,
        30vw,
        390px
      ) !important;
  }

  .categories {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    gap: 18px;
  }

  .category-card {
    width: 92px;
    min-width: 92px;
  }

  .category-img {
    width: 66px;
    height: 66px;
  }

  .products-row {
    gap: 14px;
    overflow-x: auto;
    padding-right: 16px;
    padding-left: 16px;
    scroll-padding-right: 16px;
    scroll-padding-left: 16px;
    scrollbar-width: thin;
  }

  .products-row .product-card {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    flex-basis: 190px !important;
  }

  /*
   * لیست محصولات
   */
  .products-page {
    width: 100%;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
  }

  .products-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 18px !important;
  }

  /*
   * جزئیات محصول
   */
  .product-page {
    width: 100%;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
  }

  .product-detail {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 430px);

    align-items: start;
    column-gap: 28px;
  }

  .product-gallery {
    position: sticky;
    top: 110px;
  }

  .product-description-section,
  .product-breadcrumb {
    grid-column: 1 / -1;
  }

  /*
   * سبد و پرداخت
   */
  .cart-page,
  .checkout-page {
    width: 100%;
    max-width: 900px !important;
    margin-right: auto;
    margin-left: auto;
  }

  /*
   * صفحات حساب کاربری
   */
  .payment-method-app,
  .profile-app,
  .profile-edit-app,
  .wallet-app,
  .info-app,
  .returns-app,
  .orders-app,
  .order-detail-app {
    width: 100%;
    max-width: 760px !important;
    margin-right: auto;
    margin-left: auto;
  }

  .card-payment-page {
    width: min(100%, 680px) !important;
    margin-right: auto;
    margin-left: auto;
    padding: 24px !important;
  }

  .profile-edit-form,
  .payment-method-page,
  .wallet-page,
  .info-page,
  .returns-page,
  .orders-page,
  .order-detail-page {
    width: 100%;
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
  }

  /*
   * ورود و ثبت‌نام عمداً باریک‌تر بماند.
   */
  body .app:has(.auth-content) {
    max-width: 560px !important;
  }

  /*
   * فوتر
   */
.site-footer-spacer {
  height:
    clamp(
      160px,
      24vh,
      300px
    );

  height:
    clamp(
      160px,
      24dvh,
      300px
    );
}   
   
.site-footer {
  margin-top: 0 !important;
  padding-right: 28px;
  padding-left: 28px;
}

  .footer-benefits {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

  .footer-support-list {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   FULL DESKTOP
========================================================= */

@media (min-width: 1024px) {

  /*
   * Bottom Navigation فقط برای موبایل و تبلت است.
   */
  .bottom-nav {
    display: none !important;
  }

  .site-footer {
    padding-bottom: 36px;
  }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .products-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   DESKTOP HOVER
========================================================= */

@media (
  hover: hover
) and (
  pointer: fine
) {

  .menu-btn:hover,
  .header-cart-btn:hover,
  .full-search-close:hover {
    background: var(--ocean-soft);
    border-color: rgba(70, 200, 221, 0.25);
  }

  .drawer-menu-link:hover,
  .drawer-all-products:hover,
  .drawer-parent-row:hover,
  .drawer-submenu-link:hover {
    background: #f8fcfd;
    border-color: rgba(70, 200, 221, 0.22);
  }

  .footer-social-link:hover {
    transform: translateY(-2px);
    background: rgba(70, 200, 221, 0.15);
    border-color: rgba(70, 200, 221, 0.35);
  }
}

/* =========================================================
   FINAL GLOBAL FOOTER SPACING
========================================================= */

.site-footer-spacer {
  display: block !important;

  width: 100% !important;

  height:
  clamp(
    480px,
    65svh,
    620px
  ) !important;

min-height:
  clamp(
    480px,
    65svh,
    620px
  ) !important;
  margin: 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;

  background: #ffffff !important;

  pointer-events: none;
}

.site-footer {
  margin-top: 0 !important;
}


@media (min-width: 900px) {

  .site-footer-spacer {
    height:
  clamp(
    560px,
    55svh,
    720px
  ) !important;

min-height:
  clamp(
    560px,
    55svh,
    720px
  ) !important;
  }
}