@import "./variables.css";

.product-grid { display:grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.product-card {
  background:#fff;
  border-radius:var(--radius);
  padding:.75rem;
  text-align:center;
  border:1px solid var(--card-border);
  transition:transform .22s ease, box-shadow .22s ease;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-height:320px;
}
.product-card:active,
.product-card:focus-within{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,0.08);
}
.product-card h3{margin:.4rem 0 0;color:var(--rose);font-size:1.05rem;}
.product-card p{margin:.25rem 0 0;flex:1;color:#444;font-size:.95rem;}

.media{width:100%;border-radius:8px;overflow:hidden;background:#f4f0f0;aspect-ratio:4/3;}
.media img{width:100%;height:100%;object-fit:cover;display:block;}

/* Table */
.table-wrap{overflow:auto;border-radius:8px;}
table{width:100%;border-collapse:collapse;min-width:560px;}
th,td{padding:.65rem .8rem;border:1px solid var(--card-border);text-align:center;}
th{background:var(--card-border);color:white;}
tbody tr:nth-child(even){background:#fff0f5;}

/* Brand logos */
.brand-logos{display:flex;gap:1.25rem;justify-content:center;align-items:center;flex-wrap:wrap;}
.brand-logos img{height:64px;width:auto;display:block;}

.contact-info{background:var(--blush);padding:1rem;border-radius:var(--radius);}

#products{margin-bottom:3rem;}

.brand-btn{
  background:transparent;
  border:0;
  padding:.25rem;
  border-radius:8px;
  cursor:pointer;
}
.brand-btn img{
  height:80px;
  width:auto;
  display:block;
  object-fit:contain;
}

/* =========================
   MODAL POPUP (FIXED VERSION)
   ========================= */

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  z-index:1200;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.modal.show{display:flex;}

.modal-dialog{
  width:auto;
  max-width:95vw;
  max-height:95vh;
  background:transparent;
  border-radius:12px;
  overflow:hidden;      /* IMPORTANT: removes scroll */
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
}

/* CLOSE BUTTON */
.modal-close{
  position:fixed;
  top:20px;
  right:25px;
  background:#444;
  color:#fff;
  border:0;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:22px;
  cursor:pointer;
  line-height:1;
  z-index:2000;
}

/* IMAGE FITS FULL SCREEN WITHOUT SCROLL */
.modal-gallery img{
  max-width:95vw;
  max-height:95vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  display:block;
  margin:auto;
}

/* (keep for compatibility if older modal-media used) */
.modal-media img{
  max-width:95vw;
  max-height:95vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  display:block;
  margin:auto;
}

/* Buttons */
.brand-cta{margin-top:1rem;display:flex;gap:.5rem;}

.button.whatsapp{
  background-color:#25d366;
  color:white;
}
.button.whatsapp:hover{
  background-color:#1ebe5d;
}