/* PerayHediyelik — Responsive breakpoints
   Mobile-first overrides for storefront layouts.
   Classes: .peray-grid-4, .peray-grid-2, .peray-hero-grid, .peray-cart-grid,
            .peray-nav-desktop, .peray-search-desktop */

@media (max-width: 1024px) {
  .peray-grid-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .peray-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .peray-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .peray-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .peray-cart-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .peray-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.peray-mobile-menu-btn {
  display: none;
}

@media (max-width: 768px) {
  .peray-nav-desktop {
    display: none !important;
  }
  .peray-search-desktop {
    display: none !important;
  }
  .peray-mobile-menu-btn {
    display: flex !important;
  }
}

@keyframes peray-slide-in {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}