/* =========================
   Grid
   ========================= */
.items-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
@media (max-width:980px){ .items-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .items-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .items-grid{ grid-template-columns:1fr; } }

/* =========================
   Card
   ========================= */
.item-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:14px;
  background:#fff;
  box-shadow:0 1px 10px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  min-height:420px; /* ajusta: 400-460 */
  transition:.12s ease;
}
.item-card:hover{
  background:#f6f6f6;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
}

/* =========================
   Imatge
   ========================= */
.item-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  margin-bottom:10px;
  display:block;
}

/* =========================
   Text
   ========================= */
.item-nom{
  font-weight: 400;
  line-height: 1.22;   /* una mica més d’aire */
  margin: 0 0 6px;
  font-size: 15px;     /* ⬅️ clau */
  color: #222;

  white-space: normal;
  overflow: visible;
  min-height: 68px;    /* acompanya l’augment */
}

.item-ref{
  margin: 0;
  font-size: 15px;         /* ⬆️ més gran */
  font-weight: 800;        /* ✔️ negreta forta */
  letter-spacing: .4px;
  color: #000;
}

/* franja base */
.item-refbar{
  margin-top: 6px;
  padding: 12px 10px;
  background: #f3f3f3;
  border-radius: 10px;
  text-align: center;
}

/* quan NO hi ha stock → franja molt més compacta */
.item-refbar--nostock{
  padding: 6px 8px;
}

/* stock només quan existeix */
.item-stock{
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

/* Pastilla stock */
.stock-msg{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
}
.stock-ok{ color:#1f6b1f; }
.stock-wait{ color:#1b4f9c; }
.stock-wait:hover{ text-decoration:underline; }

/* =========================
   Footer (a baix)
   ========================= */
.item-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.06);
}
.item-price{ margin:0; font-weight:800; font-size:15px; white-space:nowrap; }

/* =========================
   Botó
   ========================= */
.item-buy{
  width:38px; height:38px;
  border:0;
  border-radius:10px;
  background:#e5452a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  transition:.12s ease;
}
.item-buy:hover{
  background:#cc3d25;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.item-buy:active{ transform:translateY(0); box-shadow:none; }
.item-buy img{ width:18px; height:18px; display:block; }

/* Focus */
.item-buy:focus-visible,
.item-card a:focus-visible{
  outline:3px solid rgba(229,69,42,.35);
  outline-offset:3px;
  border-radius:10px;
}