/* ==========================================================================
   Komater Tools - 主样式表
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS 变量（自定义属性）
   -------------------------------------------------------------------------- */
   :root {
    --bs-primary: #3897B3;      /* 主品牌色 - 蓝色 */
    --bs-primary-light: #4EC1C4; /* 主色调的浅色变体 */
    --bs-background: #F2F7F7;    /* 主背景色 */
    --bs-highlight: #F1C40F;     /* 强调色 - 黄色 */
    --bs-text-dark: #2C3E50;     /* 深色文字 */
  }
  
  /* --------------------------------------------------------------------------
     2. 基础样式
     -------------------------------------------------------------------------- */
  body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bs-background);
    color: var(--bs-text-dark);
    margin: 0;
    min-width: 320px; /* 防止在小屏幕上出现横向滚动条 */
  }
  
  /* 全宽区域通用类 */
  /* 已迁移到utilities.css，无需保留 */
  
  /* --------------------------------------------------------------------------
     3. 排版样式
     -------------------------------------------------------------------------- */
  h1, h2 {
    font-weight: 600;
    color: var(--bs-text-dark);
  }
  
  .highlight {
    color: var(--bs-highlight);
  }

/* Product Detail Page Specific Styles */

/* --- General & Typography --- */
.product-detail-main-content {
  background-color: var(--bg-secondary, #FFFFFF); /* Changed to white background */
  color: var(--text-primary, #2C3E50);
}

.product-detail-main-content h1,
.product-detail-main-content h2,
.product-detail-main-content h3,
.product-detail-main-content h4,
.product-detail-main-content h5,
.product-detail-main-content h6,
.product-detail-main-content .section-title,
.product-detail-main-content .table-title {
  color: var(--color-primary-dark, #2A7A93); /* Darker primary for titles */
  font-weight: 600;
}

/* Ensure all relevant elements are sharp-cornered */
.product-detail-main-content img,
.product-detail-main-content .btn,
.product-detail-main-content .card,
.product-detail-main-content .table,
.product-detail-main-content .img-thumbnail {
  border-radius: 0 !important;
}

/* --- Breadcrumbs --- */
.product-breadcrumb .breadcrumb-item a {
  color: var(--color-primary, #3897B3);
  text-decoration: none;
}
.product-breadcrumb .breadcrumb-item a:hover {
  color: var(--color-primary-dark, #2A7A93);
  text-decoration: underline;
}
.product-breadcrumb .breadcrumb-item.active {
  color: var(--text-light, #5D6D7E);
}

/* --- Product Core Display Area --- */
.product-gallery .main-product-image img {
  /* border: 1px solid var(--color-secondary-light, #ccc); */ /* Optional border */
}

.product-gallery .thumbnail-images .img-thumbnail {
  border: 2px solid transparent;
  padding: 2px;
  background-color: var(--bg-secondary, #fff);
}

.product-gallery .thumbnail-images .img-thumbnail.active-thumbnail,
.product-gallery .thumbnail-images .img-thumbnail:hover {
  border-color: var(--color-primary, #3897B3);
}

.product-info .product-name {
  color: var(--color-primary-dark, #2A7A93);
}

.product-info .product-sku {
  color: var(--text-light, #5D6D7E);
  font-size: 0.9rem;
}

.product-info .product-short-description p {
  line-height: 1.7;
  color: var(--text-primary, #2C3E50);
}

.product-info .key-specifications ul li {
  margin-bottom: 0.5rem;
  color: var(--text-primary, #2C3E50);
}
.product-info .key-specifications ul li i {
  color: var(--color-secondary, #4EC1C4);
}

.product-info .get-quote-btn {
  background-color: var(--color-primary, #3897B3) !important;
  border-color: var(--color-primary, #3897B3) !important;
  color: #fff !important;
  padding: 0.75rem 1.25rem;
  font-size: 1.1rem;
  border-radius: 0 !important;
  text-transform: uppercase;
}
.product-info .get-quote-btn:hover {
  background-color: var(--color-primary, #3897B3) !important;
  border-color: var(--color-primary, #3897B3) !important;
}

/* --- Tables (Parameters & Customization) --- */
.product-tables-info .table thead th {
  background-color: var(--color-primary-light, #4FABC7);
  color: #fff;
  border-color: var(--color-primary, #3897B3);
  font-weight: 600;
}

.product-tables-info .table td,
.product-tables-info .table th {
  vertical-align: middle;
  border-color: var(--color-secondary-light, #ccc); /* Lighter borders for table cells */
}

.product-tables-info .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,0.03); /* Subtle striping */
}

/* --- Detailed Description Area --- */
.product-detailed-description .detailed-description-content p {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: var(--text-primary, #2C3E50);
}

.product-detailed-description .detailed-description-content ul li {
  margin-bottom: 0.5rem;
  color: var(--text-primary, #2C3E50);
}

/* --- Related Products --- */
.related-products-section .related-product-card {
  background-color: var(--bg-secondary, #fff);
  border: 1px solid var(--color-secondary-light, #e0e0e0);
  transition: box-shadow 0.3s ease-in-out;
}

.related-products-section .related-product-card:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.related-products-section .related-product-card .card-title {
  color: var(--color-primary-dark, #2A7A93);
  font-size: 1rem; /* Slightly smaller for related products */
  margin-bottom: 0.75rem;
}

.related-products-section .related-product-card .btn-outline-primary {
  color: var(--color-primary, #3897B3);
  border-color: var(--color-primary, #3897B3);
  border-radius: 0 !important;
  font-weight: 600;
}

.related-products-section .related-product-card .btn-outline-primary:hover {
  background-color: var(--color-primary, #3897B3);
  color: #fff;
}

/* New styles for the updated product gallery */
.product-gallery-container .main-image-wrapper {
  border: 1px solid var(--color-secondary-light, #e0e0e0);
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  max-width: 88%;   /* Increased width by 10% (from 80% to 88%) */
  /* aspect-ratio: 1 / 1; Removed to revert to explicit height control */
  height: 420px; /* Fixed height for the container */
  margin-left: 0; 
  margin-right: 0; 
  overflow: hidden; /* Added for inner zoom */
  background-repeat: no-repeat; /* Added for inner zoom */
}

/* Style for the main product image itself */
.product-gallery-container .main-image-wrapper img#mainProductImage {
  object-fit: contain; 
  max-width: 100%; 
  max-height: 100%; 
}

.product-gallery-container .thumbnail-strip .product-thumbnail {
  border: 2px solid transparent; /* Default border for thumbnails */
  padding: 2px;
  background-color: var(--bg-secondary, #fff);
  transition: border-color 0.2s ease-in-out;
}

.product-gallery-container .thumbnail-strip .product-thumbnail:hover {
  border-color: var(--color-secondary, #4EC1C4); /* Border color on hover */
}

.product-gallery-container .thumbnail-strip .product-thumbnail.active-thumbnail {
  border-color: var(--color-primary, #3897B3); /* Border color for the active thumbnail */
  box-shadow: 0 0 5px rgba(56, 151, 179, 0.5); /* Optional: add a subtle shadow to active thumbnail */
}

/* Styles for Thumbnail Controls */
.thumbnail-controls-wrapper {
  /* width: 100%; Ensure the wrapper takes full width for centering */
  max-width: 88%; /* Match the main image wrapper width */
  margin-left: 0;   /* Align with the main image wrapper (if it's left-aligned) */
  margin-right: 0; /* Or use margin: 0 auto; if main image is centered */
}

.thumbnail-arrow {
  color: var(--color-primary, #3897B3); /* Use primary color for arrows */
  font-size: 1.5rem; /* Adjust arrow size */
  line-height: 1; /* Ensure icon is vertically centered if it has extra space */
  text-decoration: none; /* Remove underline from link button */
}

.thumbnail-arrow:hover {
  color: var(--color-primary-dark, #2A7A93); /* Darker on hover */
}

.thumbnail-strip {
  /* max-width can be set if you want to limit the width of the strip itself, e.g., for very wide screens */
  /* max-width: 400px; */ /* Example: max width for 5 thumbnails + margins */
}

/* --- Magnifier Zoom Styles --- */
.zoom-lens {
  position: absolute;
  border: none; /* Removed border */
  /* Lens size - will be adjusted by JS */
  width: 100px;
  height: 100px;
  visibility: hidden; /* Initially hidden */
  background-color: transparent; /* Made background transparent */
  cursor: default; /* Changed cursor to default */
  z-index: 10;
}

/* .zoom-result class is no longer needed and will be removed or commented out */
/*
.zoom-result {
  position: absolute;
  border: 1px solid var(--color-secondary-light, #e0e0e0);
  width: 350px; 
  visibility: hidden; 
  overflow: hidden; 
  background-repeat: no-repeat;
  z-index: 10;
  background-color: #fff; 
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  top: 0;
  left: 102%; 
}
*/