/* ===============================
   Product Cards + Image Handling
   =============================== */

/* Card base */
.card{
  width:190px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.06); }

/* Image wrapper — unified height box */
.home .card .img-wrap,
.dept-content .card .img-wrap,
.card .img-wrap{
  width:100%;
  height:180px;              /* Adjust to taste: 160–220 works well */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  overflow:hidden;
}

/* Image rules — FIT (no cropping) */
.home .card .img-wrap img,
.dept-content .card .img-wrap img,
.card .img-wrap img{
  display:block;
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;   /* Change to 'cover' if you want uniform cropped thumbs */
  border-radius:6px;               /* optional */
}

/* Info area */
.info{ padding:10px; text-align:center; }
.name{ font-size:14px; line-height:1.25; min-height:36px; }
.meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.price{ font-weight:800; margin-top:6px; color:var(--accent); }

/* Add-to-cart button */
.add-btn{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  margin-top:8px;
  transition:.15s;
}
.add-btn:hover{ background:var(--primary-600); border-color:var(--primary-600); }

/* Stock badge */
.stock-badge{ margin-top:10px; font-weight:700; text-align:center; padding:6px 10px; border-radius:10px; }
.stock-badge.agotado{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* ===============================
   Quantity Controls
   =============================== */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Stack qty + button on mobile-ish cards */
.qty-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  margin-top:8px;
}
.qty-wrap{
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  height:36px;
}
.qty-input{
  width:64px; text-align:center; border:0; padding:8px 6px; outline:none; font-weight:700; -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; background:#fff; border:0; cursor:pointer;
  font-size:18px; font-weight:700; line-height:1; user-select:none; border-right:1px solid var(--line);
}
.qty-btn:last-of-type{ border-right:0; border-left:1px solid var(--line); }
.qty-btn:hover{ background:#f1f5f9; }

/* Make the Add button full width under qty controls */
.qty-row .add-btn{
  width:100% !important;
  max-width:none;
  padding:10px 14px;
  border-radius:12px;
}

/* ===============================
   Grids
   =============================== */
.grid{ display:grid; gap:14px; }
.grid.auto-fit-190{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); justify-items:center; }

/* ===============================
   Small helpers / responsive tweaks
   =============================== */
@media (min-width: 768px){
  .card{ width:auto; }
  .home .card .img-wrap,
  .dept-content .card .img-wrap{ height:200px; } /* taller thumbnails on larger screens */
}