/* ================= RESPONSIVE MASTER ================= */

/* 📱 MOBILE (Under 768px) */
@media (max-width: 768px) {
  
  /* Global Fixes */
  body { overflow-x: hidden; }
  header h1 { font-size: 2rem !important; }
  
  /* Navbar */
  nav { flex-direction: column; padding: 10px; }
  .nav-links { gap: 10px; flex-wrap: wrap; justify-content: center; }
  
  /* Products Grid */
  .grid, #products { grid-template-columns: 1fr; padding: 0 10px; }
  
  /* Admin Fixes */
  .admin-card { padding: 15px; }

  /* ✅ FIXED REVIEWS LAYOUT */
  .list-item {
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 16px; /* Adds breathing room */
    height: auto !important; /* Allows box to grow */
  }

  .review-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* ✅ FIX THE DELETE BUTTON OVERLAP */
  .review-del {
    position: static !important; /* FORCE it to un-stick from the top */
    width: 100%;
    margin-top: 12px;
    display: block;
    padding: 10px;
  }
}

/* 💻 TABLET & DESKTOP (Over 768px) */
@media (min-width: 768px) {
  .grid, #products { grid-template-columns: repeat(2, 1fr); }
  nav { flex-direction: row; justify-content: space-between; }
  
  /* Reset Reviews to horizontal line */
  .list-item { flex-direction: row; align-items: center; }
  
  /* Put button back in top-right corner for big screens */
  .review-del { 
    position: absolute; 
    top: 16px; 
    right: 16px; 
    width: auto; 
    margin: 0; 
    padding: 6px 12px;
  }
}

@media (min-width: 1024px) {
  .grid, #products { grid-template-columns: repeat(3, 1fr); }
}