/* ============ Main Wrapper ============ */
body {
  font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
}

.ces-main-content {
  width: 100%;
  max-width: 100%;
  padding: 0 15px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ============ Title ============ */
.custom-product-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #222;
  margin: 30px 0 20px;
}

/* ============ Image + Table Wrapper ============ */
.product-image-and-datasheet-wrapper {
  display: block; /* ✅ Changed from flex to block */
  background: #fff;
  padding: 0px;
  margin-bottom: 30px;
  border-radius: 8px;
 
}


/* ============ Product Image ============ */
.product-image {
  width: 300px;
  height: 300px;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .product-image {
    width: 100%;
    height: auto;
    max-width: 300px;
  }
}


/* ============ Datasheet Button ============ */
.et_pb_button {
  display: inline-block;
  background: #0073aa;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 15px;
  font-size: 15px;
}
.et_pb_button:hover {
  background: #005f8a;
}

/* ============ Quick Spec Table ============ */
.quick-spec-overview-container {
  flex: 1;
  min-width: 260px;
}
.quick-spec-overview {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  background: #fff;
  margin-top: 10px;
}
.quick-spec-overview td {
  padding: 10px 15px;
  border: 1px solid #ddd;
  font-size: 15px;
}

/* ============ Technical Specs Table ============ */
.technical-specifications {
  margin-top: 40px;
  padding: 0 15px;
}
.technical-specifications h2 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #222;
}
.specifications-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin-bottom: 30px;
}
.specifications-table th,
.specifications-table td {
  padding: 10px 15px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 15px;
}


/* ============ Description Paragraphs ============ */
.product-description-content {
  padding: 0 15px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  max-width: 1000px;
  margin: 0 auto;
}

/* ============ CTA Button ============ */
.custom-button-container {
  text-align: center;
  margin: 40px 0;
}
.custom-quote-button {
  background: #28a745;
  color: white;
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 6px;
  text-decoration: none;
}
.custom-quote-button:hover {
  background: #218838;
}

/* ============ Related Products ============ */
.related-products-section {
  margin-top: 50px;
  padding: 0 15px;
}
.related-products-title {
  font-size: 22px;
  margin-bottom: 20px;
}
.related-products-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.related-product-item {
  width: calc(33.333% - 20px);
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  border-radius: 8px;
}
.related-product-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.related-product-button {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: #0073aa;
  color: white;
  border-radius: 4px;
  text-decoration: none;
}
.related-product-button:hover {
  background: #005f8a;
}

/* ============ Breadcrumbs ============ */
.custom-breadcrumb {
  margin-bottom: 20px;
  padding: 0 15px;
}
.custom-breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
}
.custom-breadcrumb li + li:before {
  content: "›";
  padding: 0 8px;
  color: #999;
}
.custom-breadcrumb a {
  color: #0073aa;
  text-decoration: none;
}
.custom-breadcrumb a:hover {
  text-decoration: underline;
}

/* ============ Responsive Fixes ============ */
@media (max-width: 768px) {
  .product-image-and-datasheet-wrapper {
    flex-direction: column;
    padding: 20px;
  }
  .product-image {
    max-width: 100%;
    margin: 0 auto 20px;
  }
  .related-product-item {
    width: 100%;
  }
}

.ces-main-content-flex {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 100%;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.ces-main-left {
  flex: 0 0 75%;
  max-width: 75%;
}

.ces-main-right {
  flex: 0 0 25%;
  max-width: 25%;
}

@media screen and (max-width: 768px) {
  .ces-main-content-flex {
    flex-direction: column;
  }

  .ces-main-left,
  .ces-main-right {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
/* === Vendor Sidebar Card === */
.vendor-sidebar {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  font-family: 'Segoe UI', sans-serif;
  margin-bottom: 30px;
}
.vendor-sidebar {
  position: sticky;
  top: 100px; /* Adjust this based on your header height */
  align-self: flex-start;
  z-index: 10;
}

/* Logo + Company Row */
.vendor-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}

.vendor-logo img {
  width: 65px;
  height: 65px;
  border: 2px solid #0073aa;
  border-radius: 8px;
  object-fit: contain;
  margin-right: 15px;
}

/* Company Name */
.vendor-company h2 {
  font-size: 21px;
  font-weight: 600;
  margin: 0;
}

.vendor-company h2 a {
  color: #1a1a1a;
  text-decoration: none;
}

.vendor-company h2 a:hover {
  color: #0073aa;
}

/* Address and Badges */
.vendor-address {
  font-size: 14px;
  margin: 15px 0 10px;
  color: #444;
  line-height: 1.6;
}

.vendor-status {
  font-size: 14px;
  margin: 4px 0;
  display: flex;
  align-items: center;
}

.vendor-status.verified::before {
  content: '✅';
  margin-right: 6px;
  color: green;
}

.vendor-status.premium::before {
  content: '🌟';
  margin-right: 6px;
  color: #d38e00;
}

/* Buttons */
.vendor-cta-buttons {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vendor-btn {
  background-color: #0073aa;
  color: #fff;
  padding: 10px 15px;
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.vendor-btn:hover {
  background-color: #005f8a;
}

@media (max-width: 768px) {
  .vendor-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .vendor-logo img {
    margin-bottom: 10px;
  }
  
  .vendor-company h2 {
    font-size: 16px;
  }

  .vendor-btn {
    font-size: 14px;
    padding: 9px 12px;
  }
}
.vendor-gstin {
  font-size: 14px;
  margin: 8px 0 10px;
  color: #333;
}
.vendor-gstin strong {
  color: #0073aa;
}
/* 🔵 Sidebar Button Container */
.sidebar-contact-buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 🟢 WhatsApp Button */
.whatsapp-button {
  background-color: #25D366;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
  background-color: #1ebd5a;
}

/* 📞 Call Back Button */
.call-back-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.call-back-button:hover {
  background-color: #0056b3;
}

/* 📝 Form inside sidebar */
.vendor-contact-form {
  margin-top: 15px;
  background-color: #f7f7f7;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.vendor-contact-form-inner input,
.vendor-contact-form-inner textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.vendor-contact-form-inner button {
  margin-top: 8px;
  width: 100%;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
}

.vendor-contact-form-inner .whatsapp-button {
  background-color: #25D366;
  margin-bottom: 10px;
}

.vendor-contact-form-inner .call-back-button {
  background-color: #007bff;
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .sidebar-contact-buttons {
    gap: 8px;
  }

  .vendor-contact-form-inner button {
    font-size: 13px;
  }
}
.vendor-status {
  display: inline-block;
  font-weight: bold;
  color: #000;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1.2;
}

.verified {
  background-color: #28a745;
  color: white;
  padding-left: 10px;
  position: relative;
}
.verified::before {
  content: '✔';
  font-weight: bold;
  margin-right: 6px;
  color: white;
}

.premium {
  background-color: #ffc107;
  color: black;
  padding-left: 10px;
  position: relative;
}
.premium::before {
  content: '★';
  font-weight: bold;
  margin-right: 6px;
  color: black;
}
.quick-spec-overview-container {
  margin: 30px auto;
  padding-right: 20px;
  background: #fff;
  max-width: 800px;
  width: 100%;
  display: block;
}
.product-details-two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
  align-items: flex-start;
}

.product-details-left {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-details-right {
  flex: 0 0 60%;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* Responsive fix */
@media (max-width: 768px) {
  .product-details-two-column {
    flex-direction: column;
  }
.product-details-left img {
  max-width: 100%;
  height: auto;
}

.quick-spec-overview-container table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}

.quick-spec-overview-container th,
.quick-spec-overview-container td {
  padding: 10px;
  border: 1px solid #ddd;
}

.quick-spec-overview-container th {
  background-color: #f58220;
  color: #fff;
  text-align: left;
}

.product-description-wrapper {
  margin-bottom: 20px;
}
  .product-details-left,
  .product-details-right {
    flex: 0 0 100%;
    max-width: 100%;
    flex: 1 1 48%;
  }
}
.product-details-flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 20px;
  justify-content: space-between;
}

.product-col-left,
.product-col-right {
  flex: 1 1 48%;
  box-sizing: border-box;
}

.product-col-left img.product-image {
  max-width: 100%;
  height: auto;
  display: block;
}

.datasheet-button-wrapper {
  margin-top: 15px;
  text-align: center;
}

.product-description {
  margin-bottom: 20px;
}

.quick-spec-overview {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.quick-spec-overview th,
.quick-spec-overview td {
  padding: 10px;
  border: 1px solid #ccc;
}

.quick-spec-overview th {
  background: #f57c00;
  color: #fff;
  text-align: left;
}
.product-details-block {
  margin-bottom: 30px;
}

.product-description-wrapper {
  margin-bottom: 15px;
}

.quick-spec-overview-container table {
  width: 100%;
  border-collapse: collapse;
}

.quick-spec-overview-container th,
.quick-spec-overview-container td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}
.vendor-banner-box a:hover {
  background-color: #0b5ed7;
  transition: all 0.2s ease-in-out;
}

.related-vendor-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

/* ✅ Vendor Wrapper Layout */
.related-vendor-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

/* ✅ Each Vendor Card */
.related-vendor-card {
  background: #fff;
  border: 1px solid #0000FF;
  border-radius: 10px;
  padding: 20px;
  flex: 1 1 calc(33.33% - 20px);
  max-width: calc(33.33% - 20px);
  box-sizing: border-box;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease-in-out;
}

.related-vendor-card:hover {
  transform: translateY(-5px);
}

/* ✅ Logo and Name in One Row */
.vendor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.related-vendor-logo {
  width: 85px;
  height: 65px;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background-color: #f8f8f8;
  transition: transform 0.2s ease-in-out;
}
.related-vendor-card:hover .related-vendor-logo {
  transform: scale(1.05);
}

.related-vendor-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #1a202c;
}

/* ✅ Divider Line */
.vendor-divider {
  border-top: 1px dashed #ccc;
  margin: 10px 0 15px;
}

/* ✅ Badge Styling */
.vendor-badges {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
}

.badge.verified {
  border: 1px solid #c3e6cb;
}

.badge.trusted {
  background-color: #FFFF00;
  color: #000000;
  border: 1px solid #ffeeba;
}

/* ✅ Address & GST */
.related-vendor-address,
.related-vendor-gstin {
  font-size: 14px;
  color: #333;
  margin: 8px 0;
  line-height: 1.4;
}

/* ✅ Button Section */
.related-vendor-actions {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toggle-contact-form {
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.toggle-contact-form[data-type="WhatsApp"] {
  background-color: #25D366;
  color: white;
}

.toggle-contact-form[data-type="Call Back"] {
  background-color: #007bff;
  color: white;
}

/* ✅ Hidden Form */
.vendor-contact-form {
  margin-top: 15px;
  display: none;
}

.vendor-contact-form-inner input,
.vendor-contact-form-inner textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* ✅ Buttons inside Form */
.vendor-whatsapp-btn {
  background: #28a745;
  color: #fff;
  padding: 8px 12px;
  margin-right: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.vendor-callback-btn {
  background: #007bff;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ✅ Button Hover Effects */
.toggle-contact-form:hover,
.vendor-whatsapp-btn:hover,
.vendor-callback-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* ✅ Responsive Layouts */
@media (max-width: 991px) {
  .related-vendor-card {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  .related-vendor-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.related-vendors-heading {
    font-size: 24px;
    font-weight: 700;
    color: #0a58ca; /* Bootstrap Primary Blue - or change to #FF5722 for orange */
    background: #e8f0fe; /* Light background for contrast */
    padding: 15px 25px;
    margin: 30px 0 20px;
    border-left: 6px solid #0a58ca;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
}
.related-vendors-heading:hover {
    background: #dbe9ff;
    cursor: pointer;
}


.related-vendors-heading .highlight-brand {
    color: #007bff; /* Or IndMALL primary blue */
    font-weight: 700;
}

.related-vendors-heading .brand-name {
    color: #f57c00; /* Omron orange or IndMALL theme color */
    font-weight: 700;
}

/* Reset default p spacing inside the card to kill margin-collapse */
.related-vendor-card p { margin: 6px 0; line-height: 1.4; }

/* Tighten the line above Address */
.related-vendor-card .deals-in { margin: 4px 0 2px; }

/* Remove the big top margin on the next paragraph */
.related-vendor-card .related-vendor-address { margin-top: 2px; }

/* Keep GSTIN snug, too */
.related-vendor-card .related-vendor-gstin { margin-top: 6px; }

/* Make the divider tighter as well (optional) */
.related-vendor-card .vendor-divider { margin: 8px 0; }

/* If the pill style is used */
.related-vendor-card .deals-in .pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: #EEF2FF; color: #4338CA; font-weight: 700;
}