/* =============================================================================
   5. Breakpoints comuni
   ========================================================================== */
@media (max-width: 1024px) {
  /* Spaziature ridotte */
  .custom-categories,
  .custom-carousel {
    padding: 60px 0;
  }
  /* Titoli più piccoli */
  .custom-categories__header h2 { font-size: 2.25rem; }
  .custom-carousel__header h2   { font-size: 2rem;   }
  /* Testi secondari 15px */
  .custom-categories__header p,
  .custom-carousel__header p    { font-size: 0.9375rem; }
  /* Pulsanti compatti */
  .custom-button { padding: 10px 24px; font-size: 13px; }
  /* Mostra frecce */
  .custom-nav { display: flex !important; }

  /* Hero */
  .hero__title { font-size: 2.5rem; }
  .hero__subtitle { font-size: 0.75rem; }
  .hero__button {
    font-size: 13px;
    padding: 10px 24px;
  }
}

@media (max-width: 767px) {
  /* Spaziature ridotte ulteriormente */
  .custom-categories,
  .custom-carousel {
    padding: 40px 0;
  }
  /* Titoli mobile */
  .custom-categories__header h2 { font-size: 1.75rem; }
  .custom-carousel__header h2   { font-size: 1.5rem; }
  /* Pulsanti mobile */
  .custom-button {
    padding: 8px 20px;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
  }
  /* Frecce sempre visibili */
  .custom-nav { display: flex !important; }

  /* Hero */
  .hero { height: 75vh; }
  .hero__title { font-size: 2rem; }
  .hero__subtitle { font-size: 0.7rem; }
  .hero__button {
    font-size: 0.875rem;
    padding: 8px 20px;
  }
}