/* Product page styles — mobile-first */
:root{
  --accent:#3344aa;
  --bg:#ffffff;
  --muted:#666;
  --card-bg:#fbfbff;
}
/* make general links on product pages match the menu link color */
.product-page a { color: var(--accent); text-decoration: none }
.product-page a:hover { text-decoration: underline }
body{font-family: Arial, Helvetica, sans-serif; color:#222; background:#fff}
.menu {
  position: relative;
  z-index: 10; /* keep above page content when shadow shows */
  /* stronger double-layered blue shadow for better contrast */
  box-shadow:
    0 6px 12px rgba(51,102,170,0.18),
    0 14px 30px rgba(51,102,170,0.14);
  transition: box-shadow 200ms ease;
}
.product-page{max-width:1100px; margin:28px auto; padding:20px}
.product-page .product{width:100%; margin:0; padding:0; background:transparent}
.product-page .product{display:block}
.product-page .product-media, .product-page .product-body{min-width:0; width:100%}
.product-page .product-media{display:block}
.product-page .product-media .product-img{width:100%; height:auto; max-width:100%}
.product-page .product-body{padding-left:0}
.breadcrumb{font-size:14px; margin-bottom:12px}
.breadcrumb a{color:var(--accent); text-decoration:none}
.product-hero{display:grid; grid-template-columns:1fr; gap:20px; align-items:start}
.product-media{display:block}
.product-media .product-img{border-radius:10px; width:100%; height:auto; object-fit:cover; display:block}
.product-body{padding:6px 0}
.product-body .lead{color:var(--muted); margin:6px 0 12px}
.product-body .specs{margin-top:14px; color:var(--muted)}
.product-card{background:var(--card-bg); border-radius:12px; padding:18px; box-shadow:0 6px 20px rgba(17,24,39,0.06)}
.product-img{width:100%; height:auto; object-fit:contain; border-radius:8px; background:linear-gradient(180deg, #fff,#f7f7fb); display:block}
.product-info{padding:4px 0}
.product-info h1{margin:6px 0 8px; color:var(--accent); font-size:26px}
.product-info p.lead{color:var(--muted); margin:0 0 12px}
.product-definition{margin:12px 0 18px; padding-left:20px}
.cta-row{display:flex; gap:12px; align-items:center}
.btn{background:var(--accent); color:#fff; padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:600}
.btn.secondary{background:#eef2ff; color:var(--accent); border:1px solid #dde8ff}
.specs{font-size:14px; color:var(--muted)}

/* Ensure button text is readable and doesn't wrap */
.btn, .btn.secondary{white-space:nowrap}
.btn{color:#fff}
.btn.secondary{color:var(--accent)}

/* CTA overrides to undo the generic anchor color and avoid wrapping */
.product-page .cta-row .btn{color:#fff; white-space:nowrap}
.product-page .cta-row .btn.secondary{color:var(--accent);}

@media(min-width:860px){
  .product-hero{grid-template-columns: 48% 52%; gap:28px; align-items:start}
  /* let the image define its height but cap it to avoid overflow */
  .product-media .product-img{max-height:560px; width:100%; height:auto}
  .product-page .product-body{padding-left:18px}
  .product-page .product-media{display:block}
}

/* Focus styles for accessibility */
.product-card:focus{outline:3px solid rgba(51,68,170,0.14)}
.btn:focus{outline:2px solid rgba(51,68,170,0.18)}

@media(max-width:860px){
  .product-page .product-hero{grid-template-columns:1fr !important}
  .product-page .product-body{padding-left:0}
}