/* ========================================
   فایل استایل‌های ریسپانسیو
   فروشگاه حیوانات خانگی
   ======================================== */

/* ----------------------------------------
   نقطه شکست: ۱۲۰۰ پیکسل
   ---------------------------------------- */
@media (max-width: 1200px) {
  .container {
    padding-right: var(--space-6);
    padding-left: var(--space-6);
  }

  section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* ----------------------------------------
   نقطه شکست: ۹۹۲ پیکسل
   ---------------------------------------- */
@media (max-width: 992px) {
  /* -- کاهش فاصله‌های بخش‌ها -- */
  section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  /* -- کاهش پدینگ کانتینر -- */
  .container {
    padding-right: var(--space-5);
    padding-left: var(--space-5);
  }

  /* -- هدر -- */
  .header {
    height: var(--header-height);
  }

  /* مخفی‌کردن ناوبری اصلی و نمایش دکمه منوی موبایل */
  .main-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-xl);
  }

  /* منوی موبایل */
  .mobile-menu {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    background-color: #fff;
    overflow-y: auto;
    padding: var(--space-6);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: block;
  }

  .mobile-menu.is-open {
    transform: translateX(0);
  }

  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* -- هیرو (بخش اصلی) -- */
  .hero {
    text-align: center;
  }

  .hero-content {
    flex-direction: column;
    gap: var(--space-8);
  max-width: 100%;
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-image {
    max-width: 500px;
    margin: 0 auto;
  }

  /* -- صفحه محصولات با سایدبار -- */
  .products-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .products-sidebar {
    order: -1;
    width: 100%;
  }

  .products-sidebar.is-collapsed {
    display: none;
  }

  .products-main {
    width: 100%;
  }

    .hero-inner {
    grid-template-columns: 1fr; /* تبدیل به یک ستون */
    gap: var(--space-8);
    text-align: center;
  }

  .hero-content {
    order: 1; /* محتوا پایین بیاید یا بالا؟ معمولاً محتوا اول است */
    padding: 0;
  }

  .hero-visual {
    order: 0; /* تصویر بالا قرار گیرد (اختیاری) */
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  .hero-description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
    gap: var(--space-6);
  }

  .hero-image-wrapper {
    max-width: 400px;
    margin: 0 auto;
  }

  /* کارت‌های شناور را در تبلت کوچک‌تر می‌کنیم */
  .hero-float-card {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
  }
  .hero-float-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .hero-float-text strong {
    font-size: var(--font-size-sm);
  }

}

/* ----------------------------------------
   نقطه شکست: ۷۶۸ پیکسل
   ---------------------------------------- */
@media (max-width: 768px) {
  /* -- کاهش فاصله‌های بخش‌ها -- */
  section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  /* -- کاهش پدینگ کانتینر -- */
  .container {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  /* -- تیترهای عمومی -- */
  .section-title {
    font-size: var(--font-size-2xl);
  }

  .section-subtitle {
    font-size: var(--font-size-sm);
  }

  /* -- هدر -- */
  .header-actions .action-label {
    display: none;
  }

  /* -- هیرو: آمار به صورت ستونی -- */
  .hero-stats {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .hero-stat-item {
    text-align: center;
  }

  /* -- ویژگی‌ها: ۲ ستون -- */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* -- سبد خرید: یک ستون -- */
  .cart-layout {
    flex-direction: column;
    gap: var(--space-6);
  }

  .cart-summary {
    width: 100%;
  }

  /* -- تکمیل خرید: یک ستون -- */
  .checkout-layout {
    flex-direction: column;
    gap: var(--space-6);
  }

  .checkout-form {
    width: 100%;
  }

  .checkout-summary {
    width: 100%;
  }

  .checkout-form-grid {
    grid-template-columns: 1fr;
  }

  /* -- داستان برند: یک ستون -- */
  .brand-story-content {
    flex-direction: column;
    gap: var(--space-8);
  }

  .brand-story-text {
    width: 100%;
  }

  .brand-story-image {
    width: 100%;
  }

  /* -- نظرات مشتریان: یک ستون -- */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* -- تماس با ما: یک ستون -- */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* -- حساب کاربری: یک ستون -- */
  .account-layout {
    flex-direction: column;
    gap: var(--space-6);
  }

  .account-sidebar {
    width: 100%;
  }

  .account-content {
    width: 100%;
  }

  /* -- فوتر: ۲ ستون -- */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-12);
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-description {
    font-size: var(--font-size-base);
  }

  .hero-badge {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
  }
  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    padding-top: var(--space-6);
    margin-top: var(--space-6);
  }
  .hero-stat-number {
    font-size: var(--font-size-2xl);
  }
  .hero-stat-label {
    font-size: var(--font-size-xs);
  }

  /* نمایش کارت‌های شناور با اندازه کوچک‌تر */
  .hero-float-card {
    padding: var(--space-2) var(--space-3);
    font-size: 10px;
    gap: var(--space-2);
    max-width: 140px;
    display: flex; /* اضافه شد تا مطمئن شویم نمایش داده می‌شوند */
  }
  .hero-float-icon {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  .hero-float-text strong {
    font-size: 10px;
  }
  .hero-float-text span {
    font-size: 8px;
  }
  .hero-float-card-1 {
    top: 2%;
    right: 0;
  }
  .hero-float-card-2 {
    bottom: 5%;
    left: 0;
  }

}

/* ----------------------------------------
   نقطه شکست: ۵۷۶ پیکسل
   ---------------------------------------- */
@media (max-width: 576px) {
  /* -- کاهش فاصله‌های بخش‌ها -- */
  section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  /* -- کاهش پدینگ کانتینر -- */
  .container {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  /* -- تیترها -- */
  .section-title {
    font-size: var(--font-size-xl);
  }


  /* -- ویژگی‌ها: یک ستون -- */
  .features-grid {
    grid-template-columns: 1fr;
  gap: var(--space-4);
  }

  /* -- محصولات: یک ستون -- */
  .products-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* -- وبلاگ: یک ستون -- */
  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* -- فوتر: یک ستون -- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* -- فرم خبرنامه: ستونی -- */
  .newsletter-form {
    flex-direction: column;
    gap: var(--space-3);
  }

  .newsletter-form input[type="email"] {
    width: 100%;
  }

  .newsletter-form button {
    width: 100%;
  }

  /* -- اعلان‌ها (Toast) -- */
  .toast-container {
    right: var(--space-3);
    left: var(--space-3);
    bottom: var(--space-3);
  }

  .toast {
    font-size: var(--font-size-sm);
  }

  /* -- دکمه‌ها -- */
  .btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
  }

  .btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-base);
  }

    .hero-title {
    font-size: var(--font-size-2xl);
  }
  .hero-description {
    font-size: var(--font-size-sm);
  }
  .hero-badge {
    font-size: var(--font-size-xs);
  }
  .hero-image-wrapper {
    max-width: 280px;
  }
  .hero-stats {
    gap: var(--space-3);
  }
  .hero-stat-number {
    font-size: var(--font-size-xl);
  }
  .hero-stat-label {
    font-size: 10px;
  }

  /* اگر می‌خواهید در موبایل‌های خیلی کوچک کارت‌ها پنهان شوند، این خط را فعال کنید: */
  /* .hero-float-card { display: none; } */

  /* در غیر این صورت، می‌توانید سایزشان را بیشتر کوچک کنید */
  .hero-float-card {
    max-width: 110px;
    padding: var(--space-1) var(--space-2);
    font-size: 8px;
    gap: var(--space-1);
  }
  .hero-float-icon {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
  }
  .hero-float-text strong {
    font-size: 8px;
  }
  .hero-float-text span {
    font-size: 6px;
  }


}

/* ----------------------------------------
   اصلاح موقعیت کارت‌های شناور در تبلت
   ---------------------------------------- */
@media (min-width: 769px) and (max-width: 992px) {
  .hero-float-card-1 {
    top: 5%;
    right: -10px;
  }
  .hero-float-card-2 {
    bottom: 10%;
    left: -10px;
  }
}