@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 card style */
.contact-info { background:var(--blush); padding:1rem; border-radius:var(--radius); }

/* Add breathing space between last product and contact section */
#products {
  margin-bottom: 3rem; /* Adjust the value for more or less gap */
}

/* Brand logos (button look) */
.brand-logos { display:flex; gap:1.25rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.brand-btn {
  background: transparent;
  border: 0;
  padding: .25rem;
  border-radius: 8px;
  cursor: pointer;
}
.brand-btn img { height:64px; width:auto; display:block; object-fit:contain; }

/* Modal base */
.modal {
  display: none; /* shown via JS when active */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* Dialog */
.modal-dialog {
  width: 100%;
  max-width: 760px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  transform: translateY(8px);
}

/* Close button */
.modal-close {
  position: absolute;
  right: calc(50% - 380px + 1rem); /* aligns inside container; fallback below */
  top: 1rem;
  background: #555;
  color: #fff;
  border: 0;
  width:40px;
  height:40px;
  border-radius:50%;
  font-size: 1.25rem;
  cursor:pointer;
  line-height: 1;
}
@media (max-width:900px){
  .modal-close { right: 1rem; }
}

/* Media (top image) */
.modal-media img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

/* Content */
.modal-content { padding:1.25rem 1.5rem 2rem; }
.modal-content h2 { margin:0 0 .5rem; color: #c6427e; } /* brand rose color */
.modal-content p { margin: .5rem 0; color:#333; }

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

/* show modal utility */
.modal.show { display: flex; }

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