/* ==========================================================================
   product.css — Styles for products/*.html (individual product detail pages)
   Horizon Access Solutions
   ========================================================================== */

/* ── Two-column product layout ── */
.prod-layout { display: flex; gap: 56px; align-items: flex-start; }
.prod-gallery { width: 50%; flex-shrink: 0; }
.prod-info { width: 50%; flex: 1; }

/* ── Gallery thumbnail buttons ── */
.thumb-btn { transition: border-color .15s ease; }
.thumb-btn:hover { border-color: #E36625 !important; }

/* ── Spec table ── */
.spec-table { width: 100%; border-collapse: collapse; }

/* ── Related product cards ── */
.rel-card {
  display: block;
  border: 1px solid #E6EAF1;
  border-radius: 9px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease;
}
.rel-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(2,33,79,.1); }

/* Machine photos have white backgrounds — contain keeps them whole, cover crops them badly */
.rel-card img {
  width: 100% !important;
  height: 160px !important;
  object-fit: contain !important;
  background: #fff !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

/* !important needed on all breakpoints — the HTML has inline grid-template-columns */
.rel-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  /* Stack gallery above info — !important needed to beat inline width:50% and gap:56px */
  .prod-layout  { flex-direction: column !important; gap: 28px !important; }
  .prod-gallery { width: 100% !important; flex-shrink: unset !important; }
  .prod-info    { width: 100% !important; flex: unset !important; }
  #main-img     { height: 340px !important; }
  .rel-grid     { grid-template-columns: 1fr 1fr !important; }
  .prod-main    { padding: 40px 0 52px !important; }
  .quote-cta-band { padding: 40px 36px !important; }
}

@media (max-width: 768px) {
  .prod-main    { padding: 28px 0 44px !important; }
  .prod-info h1 { font-size: 38px !important; }
  #main-img     { height: 280px !important; }

  .quote-cta-band {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 28px 24px !important;
    gap: 20px !important;
  }
  .quote-cta-band h2 { font-size: 30px !important; }
  .quote-cta-band p  { max-width: 100% !important; font-size: 15px !important; }
  .quote-cta-band > div:last-child { width: 100% !important; }
  .quote-cta-band > div:last-child > a {
    display: block !important;
    text-align: center !important;
    padding: 14px 20px !important;
    white-space: normal !important;
  }

  .prod-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; padding-bottom: 28px !important; }
}

@media (max-width: 600px) {
  .rel-grid     { grid-template-columns: 1fr !important; }
  .rel-card img { height: 180px !important; }

  .spec-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .spec-table td:last-child,
  .spec-table th:last-child { display: none; }

  #main-img { height: 240px !important; }
  .thumb-btn img { height: 58px !important; }
  .breadcrumb-bar { flex-wrap: wrap; }
  .prod-info h1 { font-size: 32px !important; }
}

@media (max-width: 480px) {
  #main-img { height: 210px !important; }
  .prod-info h1 { font-size: 28px !important; }
  .prod-footer-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .quote-cta-band { padding: 22px 18px !important; }
  .quote-cta-band h2 { font-size: 26px !important; }
}