/* ============================================
   Responsive & Accessibility
   ============================================ */

/* ————— Mobile base (default) ————— */
.desktop-nav { display: none !important; }

.page {
  padding-top: var(--nav-h);
  padding-bottom: 72px;
}

/* ————— Tablets (641px+) ————— */
@media (min-width: 641px) {
  .page { padding-bottom: 0; }
  .desktop-nav { display: flex !important; }
  .bottom-nav  { display: none; }
  .whatsapp-fab { bottom: 24px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s8);
  }
}

/* ————— Small Desktop (769px+) ————— */
@media (min-width: 769px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ————— Large Desktop (1025px+) ————— */
@media (min-width: 1025px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ————— Small phones (≤360px) ————— */
@media (max-width: 360px) {
  :root {
    --fs-hero: 2.5rem;
    --fs-3xl: 2.2rem;
    --fs-2xl: 1.8rem;
  }
  .product-card-img { height: 120px; }
  .product-card-img-placeholder { height: 120px; }
}

/* ————— Hover enhancements ————— */
@media (hover: hover) {
  .product-card-img { transition: transform var(--duration-slow) var(--ease); }
  .product-card:hover .product-card-img { transform: scale(1.03); }
}

/* ————— Reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ————— Safe area insets ————— */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ————— Dark mode ————— */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #0f0f0f;
    --bg-alt:   #1a1a1a;
    --bg-card:  #1a1a1a;
    --text:       #e8e8e8;
    --text-soft:  #b0b0b0;
    --text-muted: #777777;
    --gray:     #252525;
    --gray-mid: #333333;
    --gray-dark: #666666;
    --black:    #e8e8e8;
    --white:    #0f0f0f;
  }

  .navbar {
    background: rgba(15,15,15,0.95);
    border-bottom-color: var(--gray-mid);
  }

  .bottom-nav {
    background: rgba(15,15,15,0.95);
    border-top-color: var(--gray-mid);
  }

  .footer {
    background: #0f0f0f;
    border-top-color: var(--gray-mid);
  }

  .btn {
    border-color: var(--gray-mid);
  }

  .btn-primary {
    background: var(--text);
    color: #0f0f0f;
    border-color: var(--text);
  }

  .footer-social a {
    background: var(--gray);
    color: var(--text);
  }
}