/* responsive-base.css
   Ligue este ficheiro em TODAS as páginas do site (index, product, cart,
   checkout, artists, collaborations, about, contact, login, profile...),
   sempre DEPOIS do CSS próprio de cada página. Exemplo:

   <link rel="stylesheet" href="product.css">
   <link rel="stylesheet" href="responsive-base.css">

   Isto dá uma base de responsividade comum a todo o site: imagens,
   tabelas, botões, campos de formulário e containers. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { overflow-x: hidden; }

img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* ---------- TABELAS ---------- */
/* O ficheiro responsive-tables.js envolve automaticamente cada <table>
   da página numa div.table-scroll — não precisa de editar o HTML das
   tabelas existentes (ex: resumo do carrinho, resumo do checkout). */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px; /* evita colunas demasiado espremidas */
}
.table-scroll th,
.table-scroll td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .table-scroll th,
  .table-scroll td {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
  }
}

/* ---------- GRELHAS E LINHAS GENÉRICAS ---------- */
@media (max-width: 600px) {
  [class*="grid"] {
    grid-template-columns: 1fr !important;
  }
  [class*="-row"]:not(.divider-row) {
    flex-wrap: wrap;
  }
}

/* ---------- BOTÕES E CAMPOS ---------- */
button, a.button, input[type="submit"], input[type="button"] {
  min-height: 44px; /* área de toque confortável em telemóvel */
}
input, select, textarea {
  max-width: 100%;
  font-size: 16px; /* evita o zoom automático do iOS ao focar um campo */
}

/* ---------- CONTAINERS ---------- */
.container, main, .page-wrap {
  max-width: 100%;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}