/**
 * RESPONSIVE.CSS
 * Media queries per ottimizzazione mobile
 */

/* ========================================
   SMARTPHONE (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
  body {
    padding: 8px;
  }

  .content {
    padding: 20px 16px;
  }

  .price-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .prodotto-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .btn-icon {
    align-self: flex-end;
    margin-top: 0;
  }

  .header {
    padding: 20px 16px 24px;
  }

  .total-value {
    font-size: 28px;
  }
}

/* ========================================
   EXTRA SMALL (max-width: 360px)
   ======================================== */
@media (max-width: 360px) {
  .form-control {
    padding: 12px 14px;
    font-size: 16px;
  }

  .prodotto-card {
    padding: 16px;
  }
}