/* Mobile-specific optimizations for phones */
@media (max-width: 480px) {
  /* Further reduce header height on small phones */
  .site-header, header {
    min-height: 160px;
  }
  
  /* More compact container */
  .site-header .container, header .container {
    padding: 5px 8px;
    gap: 8px;
  }
  
  /* Smaller logo on phones */
  .site-header .logo, header .logo,
  .site-header .logo a, header .logo a {
    font-size: 1.1em;
  }
  
  /* Tighter nav spacing */
  .site-header nav, header nav {
    gap: 6px;
  }
  
  /* Adjust nav links for phone screens */
  .site-header nav a, header nav a {
    padding: 9px 12px;
    font-size: 0.8em;
    min-height: 44px;
  }
  
  /* Optimize main content */
  main {
    padding: 12px 8px;
  }
  
  /* Better font sizes for small screens */
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.6em;
  }
  
  h2 {
    font-size: 1.3em;
  }
  
  h3 {
    font-size: 1.1em;
  }
  
  /* Ensure cards are fully optimized */
  .deals-grid,
  .featured-grid {
    gap: 12px;
  }
  
  /* Optimize buttons for touch */
  .cta-button,
  .button,
  button {
    padding: 12px 16px;
    font-size: 0.9em;
    min-height: 44px;
  }
}

/* Extra small phones */
@media (max-width: 375px) {
  /* Maximum compactness */
  .site-header, header {
    min-height: 140px;
  }
  
  .site-header .logo, header .logo,
  .site-header .logo a, header .logo a {
    font-size: 1em;
  }
  
  .site-header nav a, header nav a {
    padding: 8px 10px;
    font-size: 0.75em;
  }
  
  body {
    font-size: 13px;
  }
}