/* Modern card grid for Products.html - products/products-v2.css */
:root{
  --accent:#3344aa;
  --muted:#6b7280;
  --bg:#f6f8fb;
  --card-bg:#ffffff;
  --gap:20px;
}

body{background:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;}

/* menu layout is provided by /menu-body.css */
.logo-menu{height:56px}

/* Top breadcrumb spacer */
.p-block-1, .p-block-2, .p-block-3{max-width:1200px;margin:16px auto 0;padding:0 18px;background:transparent}

/* Convert existing grid containers into a unified responsive grid */
.grid-container-1,
.grid-container-2,
.grid-container-3,
.grid-container-4{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:var(--gap);
}

.product{
  background:var(--card-bg);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 24px rgba(16,24,40,0.06);
  transition:transform .18s ease, box-shadow .18s ease;
  padding:0;
}
.product:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(16,24,40,0.09)}

.product-img{width:100%;height:220px;object-fit:cover;display:block}
.product h3{font-size:1.05rem;margin:12px 16px;color:#111}
.product .product-definition{margin:0 16px 16px 16px;color:var(--muted);padding-left:18px}

/* make lists compact on cards */
.product .product-definition li{margin:6px 0;font-size:.92rem}

/* create CTA row visually without changing HTML - using pseudo element */
.product::after{content:'';display:block;height:8px;background:linear-gradient(90deg,var(--accent),#6a88ff);margin-top:auto}

/* back-link and small copy tweaks */
.back-link{display:inline-block;margin:12px 16px 22px;color:var(--accent)}

/* responsiveness */
@media (max-width:640px){
  .product-img{height:160px}
  /* menu padding handled in /menu-body.css */
}

/* subtle product focus for keyboard users */
.product:focus{outline:3px solid rgba(51,68,170,0.12)}

/* small utility */
.lead{color:var(--muted);margin:0 16px 8px 16px}

/* Contact/footer layout is provided by contact-footer.css to match product pages exactly. */
/* Footer/contact styling is provided by contact-footer.css */

/* accessibility improvement for links inside cards */
.product a{color:inherit;text-decoration:none}