/* ===== Product Detail — page-product-detail.css ===== */

/* ============================================================
   1. STAGE — white band holding the product hero
   ============================================================ */
.pd_stage { background: #fff; border-bottom: 1px solid #e9edf2; }

.product_overview {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 52px;
  padding: 40px 0 48px;
}

/* ============================================================
   2. GALLERY
   ============================================================ */
.gallery_wrap { display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: 100px; }

.main_img_box {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: #fbfcfd; border: 1px solid #eef1f5; border-radius: 14px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
}
.main_img_box img { width: 86%; height: 86%; object-fit: contain; transition: transform 0.35s ease; }
.main_img_box:hover img { transform: scale(1.03); }

.zoom_hint {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 6px;
  background: rgba(12, 18, 30, 0.55); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 1;
}
.main_img_box:hover .zoom_hint { opacity: 1; }

.thumb_list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.thumb_item {
  aspect-ratio: 1 / 1; background: #f6f8fa; border-radius: 8px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1.5px solid transparent; transition: 0.25s;
}
.thumb_item img { width: 80%; height: 80%; object-fit: contain; }
.thumb_item:hover { border-color: #cfd8e3; background: #fff; }
.thumb_item.active { border-color: var(--primary-blue); background: #fff; }

/* ============================================================
   3. SUMMARY COLUMN
   ============================================================ */
.pd_meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pd_cat_tag {
  display: inline-block; padding: 5px 12px; border-radius: 5px;
  background: var(--primary-blue-light); color: var(--primary-blue-dark);
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; transition: 0.2s;
}
.pd_cat_tag:hover { background: var(--primary-blue); color: #fff; }
.pd_stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #15803d;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pd_stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }

.prod_summary h1,
.prod_summary h2 {
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 800;
  color: var(--text-dark); line-height: 1.22;
  letter-spacing: -0.02em; margin-bottom: 14px;
}

.prod_desc_short {
  font-size: 14.5px; color: #667080; line-height: 1.75;
  padding-bottom: 24px; margin-bottom: 4px;
  border-bottom: 1px solid #eef1f5;
}

/* --- Spec table: the centrepiece of this page --- */
.attr_block_label {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #9aa4b2; margin: 24px 0 4px;
}
.attr_list { list-style: none; padding: 0; margin: 0 0 18px; }
.attr_list li {
  display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 18px; align-items: baseline;
  padding: 11px 2px; border-bottom: 1px solid #eef1f5;
  transition: background 0.15s;
}
.attr_list li:hover { background: #fafbfc; }
.attr_name {
  font-size: 12.5px; font-weight: 600; color: #8b95a3;
  letter-spacing: 0.02em;
}
.attr_val {
  font-size: 14px; font-weight: 700; color: var(--text-dark);
  text-align: right; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* JS adds .is_clamped when the list runs long */
.attr_list.is_clamped li:nth-child(n + 7) { display: none; }

.attr_show_more {
  display: none; /* revealed by JS only when needed */
  align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px 16px; margin-bottom: 24px;
  background: none; border: 1px solid #e2e8f0; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--primary-blue); cursor: pointer; transition: 0.2s;
}
.attr_show_more:hover { background: rgba(2, 160, 225, 0.05); border-color: var(--primary-blue); }

/* --- Actions --- */
.pd_actions { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 26px; }
.btn_scroll_quote {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 30px; background: var(--primary-gradient);
  color: #fff !important; font-weight: 800; font-size: 14.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 9px; text-decoration: none; transition: 0.28s;
  box-shadow: 0 8px 22px rgba(2, 160, 225, 0.24);
}
.btn_scroll_quote:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2, 160, 225, 0.34); }

.btn_whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 17px 26px; border: 1.5px solid #e2e8f0; border-radius: 9px;
  color: #475569 !important; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: 0.25s; white-space: nowrap;
}
.btn_whatsapp i { color: #25d366; font-size: 18px; }
.btn_whatsapp:hover { border-color: #25d366; background: rgba(37, 211, 102, 0.05); color: #15803d !important; }

/* --- Trust row --- */
.pd_trust {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: #eef1f5;
  border: 1px solid #eef1f5; border-radius: 10px; overflow: hidden;
}
.pd_trust_item { background: #fff; padding: 14px 16px; display: flex; align-items: flex-start; gap: 11px; }
.pd_trust_item i { color: var(--primary-blue); font-size: 15px; margin-top: 2px; flex-shrink: 0; width: 16px; text-align: center; }
.pd_trust_k { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa4b2; margin-bottom: 3px; }
.pd_trust_v { font-size: 12.5px; font-weight: 700; color: var(--text-dark); line-height: 1.4; }

/* ============================================================
   4. CONTENT SECTIONS
   ============================================================ */
.pd_card {
  background: #fff; border: 1px solid #eef1f5; border-radius: 14px;
  padding: 34px 36px; margin-bottom: 26px;
}
.section_heading {
  display: flex; align-items: center; gap: 14px;
  font-size: 19px; font-weight: 800; color: var(--text-dark);
  letter-spacing: -0.01em; margin-bottom: 24px;
}
.section_heading::after { content: ''; flex: 1; height: 1px; background: #eef1f5; }

/* --- CMS rich text --- */
.article_body { font-size: 15px; line-height: 1.85; color: #4a5462; }
.article_body > *:first-child { margin-top: 0; }
.article_body > *:last-child { margin-bottom: 0; }
.article_body p { margin: 0 0 16px; }
.article_body h1, .article_body h2, .article_body h3, .article_body h4 {
  color: var(--text-dark); font-weight: 800; line-height: 1.35;
  letter-spacing: -0.01em; margin: 30px 0 12px;
}
.article_body h1 { font-size: 22px; }
.article_body h2 { font-size: 19px; }
.article_body h3 { font-size: 17px; }
.article_body h4 { font-size: 15px; }
.article_body ul, .article_body ol { margin: 0 0 16px; padding-left: 22px; }
.article_body li { margin-bottom: 7px; }
.article_body a { color: var(--primary-blue); text-decoration: underline; text-underline-offset: 2px; }
.article_body img { max-width: 100% !important; height: auto !important; border-radius: 10px; margin: 8px 0; }
.article_body strong, .article_body b { color: var(--text-dark); font-weight: 700; }
.article_body blockquote {
  margin: 20px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--primary-blue); color: #667080;
}
/* CMS spec tables — common in AV product copy, must not render bare */
.article_body .table_scroll, .article_body table { max-width: 100%; }
.article_body table {
  width: 100%; border-collapse: collapse; margin: 18px 0;
  font-size: 13.5px; display: table;
}
.article_body table th, .article_body table td {
  border: 1px solid #e6eaf0; padding: 10px 13px; text-align: left; vertical-align: top;
}
.article_body table th { background: #f6f8fa; font-weight: 700; color: var(--text-dark); }
.article_body table td { font-variant-numeric: tabular-nums; }
.article_body table tr:nth-child(even) td { background: #fcfdfe; }

/* ============================================================
   5. INQUIRY FORM
   ============================================================ */
.inquiry_card {
  background: #fff; border: 1px solid #e1eaf3; border-top: 4px solid var(--primary-blue);
  border-radius: 14px; padding: 36px; margin-bottom: 26px;
}
.inquiry_card .section_heading { margin-bottom: 8px; }
.inquiry_intro { font-size: 13.5px; color: #7d8794; line-height: 1.7; margin-bottom: 26px; }

.form_field { margin-bottom: 18px; }
.form_label {
  display: block; font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #8b95a3; margin-bottom: 7px;
}
.modern_form .input_row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.modern_input {
  width: 100%; padding: 14px 16px; border: 1.5px solid #e6eaf0;
  border-radius: 9px; background: #fff; font-size: 14.5px;
  box-sizing: border-box; transition: 0.22s; font-family: inherit; color: #333;
}
.modern_input::placeholder { color: #a8b1bd; }
.modern_input:focus {
  border-color: var(--primary-blue); outline: none;
  box-shadow: 0 0 0 3px rgba(2, 160, 225, 0.1);
}
.modern_input[readonly] { background: #f6f8fa; font-weight: 700; color: var(--text-dark); }
textarea.modern_input { resize: vertical; min-height: 130px; }

.submit_btn_pro {
  width: 100%; padding: 18px; background: var(--primary-gradient);
  color: #fff; border: none; border-radius: 9px;
  font-family: inherit; font-weight: 800; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: 0.28s; margin-top: 6px;
  box-shadow: 0 8px 24px rgba(2, 160, 225, 0.26);
}
.submit_btn_pro:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(2, 160, 225, 0.34); }
.form_response_note { font-size: 12.5px; color: #9aa4b2; text-align: center; margin-top: 14px; }
.form_response_note i { color: var(--primary-blue); margin-right: 5px; }

/* ============================================================
   6. SIDEBAR
   ============================================================ */
.side_quote_card {
  background: #0f172a; border-radius: 14px; padding: 26px 24px;
  margin-bottom: 24px; position: relative; overflow: hidden;
}
.side_quote_card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 90% 0%, rgba(2, 160, 225, 0.18) 0%, transparent 70%);
}
.sqc_inner { position: relative; z-index: 1; }
.sqc_label { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-blue); }
.sqc_title { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.3; letter-spacing: -0.01em; margin: 10px 0 12px; }
.sqc_ref { font-size: 12px; color: #94a3b8; line-height: 1.6; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.sqc_ref strong { color: #e2e8f0; font-weight: 700; }
.sqc_list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.sqc_list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: #94a3b8; line-height: 1.5; }
.sqc_list i { color: var(--primary-blue); font-size: 12px; margin-top: 3px; flex-shrink: 0; }
.sqc_btn {
  display: block; text-align: center; padding: 14px;
  background: var(--primary-blue); color: #fff !important;
  border-radius: 8px; font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; transition: 0.25s;
}
.sqc_btn:hover { background: #fff; color: #0f172a !important; }

.side_contact_row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; border-bottom: 1px solid #f0f2f5; }
.side_contact_row:last-child { border-bottom: none; padding-bottom: 0; }
.side_contact_row i { color: var(--primary-blue); font-size: 14px; margin-top: 3px; width: 16px; text-align: center; flex-shrink: 0; }
.scr_k { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa4b2; margin-bottom: 2px; }
.scr_v { font-size: 13px; font-weight: 600; color: var(--text-dark); line-height: 1.5; overflow-wrap: anywhere; }
.scr_v a { color: inherit; text-decoration: none; }
.scr_v a:hover { color: var(--primary-blue); }

/* ============================================================
   7. RELATED PRODUCTS
   ============================================================ */
.related_products_sec { background: #fff; border-top: 1px solid #e9edf2; padding: 60px 0 66px; }
.related_products_sec .section_heading { margin-bottom: 28px; }
.related_prod_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rel_prod_card {
  background: #fff; border: 1px solid #eef1f5; border-radius: 12px;
  overflow: hidden; text-decoration: none; display: block; transition: 0.3s;
}
.rel_prod_card:hover { transform: translateY(-5px); border-color: var(--primary-blue); box-shadow: 0 12px 28px rgba(2, 100, 200, 0.1); }
.rel_prod_img { aspect-ratio: 1 / 1; background: #f8fafc; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rel_prod_img img { width: 78%; height: 78%; object-fit: contain; transition: transform 0.4s; }
.rel_prod_card:hover .rel_prod_img img { transform: scale(1.07); }
.rel_prod_info { padding: 16px 16px 18px; }
.rel_prod_info h3 {
  font-size: 13.5px; font-weight: 700; color: var(--text-dark);
  line-height: 1.45; margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel_prod_link { font-size: 11px; font-weight: 800; color: var(--primary-blue); letter-spacing: 0.08em; text-transform: uppercase; }
.rel_prod_link i { transition: transform 0.2s; display: inline-block; }
.rel_prod_card:hover .rel_prod_link i { transform: translateX(3px); }

/* ============================================================
   8. BACK TO CATEGORY
   ============================================================ */
.back_to_cat { text-align: center; padding: 34px 0 50px; }
.back_cat_link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 26px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  color: #64748b; font-size: 13.5px; font-weight: 700;
  text-decoration: none; transition: 0.22s;
}
.back_cat_link:hover { color: var(--primary-blue); border-color: var(--primary-blue); background: rgba(2, 160, 225, 0.04); }

/* ============================================================
   9. IMAGE PREVIEW OVERLAY
   ============================================================ */
#imgPreviewOverlay { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; z-index: 99999; }
.overlay-bg { position: absolute; inset: 0; background: rgba(8, 12, 20, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#imgPreviewOverlay img { max-width: 84vw; max-height: 84vh; border-radius: 12px; z-index: 100000; background: #fff; padding: 12px; }
.prev-btn, .next-btn, .close-overlay {
  position: absolute; color: rgba(255, 255, 255, 0.75); cursor: pointer;
  z-index: 100001; padding: 18px; transition: color 0.2s;
}
.prev-btn:hover, .next-btn:hover, .close-overlay:hover { color: #fff; }
.prev-btn, .next-btn { font-size: 38px; }
.prev-btn { left: 4%; }
.next-btn { right: 4%; }
.close-overlay { top: 2.5%; right: 3%; font-size: 44px; line-height: 1; }

/* ============================================================
   10. STICKY MOBILE INQUIRY BAR
   ============================================================ */
.sticky_inquiry_bar { display: none; }

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .related_prod_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .related_prod_grid .rel_prod_card:nth-child(4) { display: none; }
}

@media (max-width: 991px) {
  .product_overview { grid-template-columns: 1fr; gap: 32px; padding: 28px 0 36px; }
  .gallery_wrap { position: static; top: auto; }
  .pd_card, .inquiry_card { padding: 26px 20px; }
  .modern_form .input_row { grid-template-columns: 1fr; gap: 16px; }
  .pd_trust { grid-template-columns: 1fr; }
  .related_products_sec { padding: 44px 0 48px; }
  .related_prod_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .related_prod_grid .rel_prod_card:nth-child(4) { display: block; }
  .back_to_cat { padding: 26px 0 40px; }

  .sticky_inquiry_bar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000;
    background: #fff; padding: 12px 16px 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--primary-blue);
    transform: translateY(100%); transition: transform 0.3s ease;
  }
  .sticky_inquiry_bar.is_visible { transform: translateY(0); }
  .sib_prod_name {
    font-size: 13px; font-weight: 600; color: #333; flex: 1;
    padding-right: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sib_btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; background: var(--primary-gradient);
    color: #fff !important; font-size: 13px; font-weight: 700;
    border-radius: 50px; text-decoration: none; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(2, 160, 225, 0.3); flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  .pd_actions { grid-template-columns: 1fr; }
  .attr_list li { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); gap: 12px; }
  .thumb_list { grid-template-columns: repeat(4, 1fr); }
  .prev-btn, .next-btn { font-size: 28px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .btn_scroll_quote:hover, .submit_btn_pro:hover, .rel_prod_card:hover { transform: none; }
}