/* ==========================================================================
   product-detail.css - 产品详情页样式
   ========================================================================== */

/* 主内容区域 */
.product-detail-content {
    padding: 60px 0;
    background-color: var(--background-primary);
}

/* 容器样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 标题样式 */
.section-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

/* 产品标题容器 - 居中显示 */
.product-title-container {
    text-align: center;
    margin-bottom: 40px;
    height: auto;
    overflow: visible;
}

.product-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    white-space: normal; /* 允许正常换行 */
}

/* 产品副标题样式调整 - 靠左对齐 */
.product-subtitle {
    display: none; /* 隐藏副标题 */
}

/* 产品Hero区域布局 - 严格保持1:1比例 */
.product-hero-grid {
    display: grid;
    grid-template-columns: 50% 50%; /* 明确指定为50%/50%比例 */
    gap: 30px;
    margin-bottom: 60px;
    align-items: start;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 移除可能影响布局的冲突样式 */
.product-hero-grid > div {
    position: relative;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 左侧产品展示区 */
.product-main-image {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 产品图片放大效果 */
.image-zoom-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    border: 1px solid #eee;
    background-color: white;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.image-zoom-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* 移除旧的放大镜相关样式 */
.zoom-lens, .zoom-result {
    display: none;
}

/* 缩略图导航区 */
.gallery-navigation {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 15px;
    padding: 0;
    gap: 8px;
    box-sizing: border-box;
}

.gallery-nav-btn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.gallery-thumbnails-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    width: calc(100% - 70px);
    padding: 0;
    margin: 0;
}

.gallery-thumbnails {
    display: flex;
    transition: transform 0.3s ease;
    padding: 0;
    margin: 0;
    gap: 5px;
    flex-wrap: nowrap;
}

.thumbnail {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border: 1px solid #ddd;
    cursor: pointer;
    overflow: hidden;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.thumbnail.active {
    border-color: var(--primary-blue);
    box-shadow: 0 0 5px rgba(var(--primary-blue-rgb, 69, 140, 255), 0.5);
}

.thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 确保最后一个缩略图没有右边距 */
.thumbnail:last-child {
    margin-right: 0;
}

/* 右侧产品信息区 */
.product-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: left; /* 确保文本左对齐 */
}

/* 产品参数区域靠左对齐 */
.product-key-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
    text-align: left; /* 确保文本左对齐 */
    justify-content: start; /* 网格项左对齐 */
}

/* 参数项内部左对齐 */
.spec-item {
    background-color: #f9f9f9;
    padding: 12px 15px;
    border-radius: 4px;
    text-align: left; /* 确保文本左对齐 */
}

/* 参数标签左对齐 */
.spec-label {
    font-weight: 600;
    color: var(--text-dark);
    margin-right: 5px;
    text-align: left; /* 确保文本左对齐 */
    display: inline-block; /* 确保行内元素正确对齐 */
}

/* 参数值左对齐 */
.spec-value {
    color: var(--primary-blue);
    text-align: left; /* 确保文本左对齐 */
    display: inline-block; /* 确保行内元素正确对齐 */
}

/* 社交媒体分享容器样式 */
.social-share-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    width: 100%;
    margin: 30px 0; /* 上下留出间距 */
    border-top: 1px solid #eee; /* 可选：添加顶部分隔线 */
    padding-top: 20px; /* 顶部填充 */
}

/* 社交分享图标组 */
.social-share {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center; /* 确保内部图标居中 */
}

/* 分享图标样式 - 默认使用主配色 */
.share-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-blue); /* 默认使用网站主配色 */
    border-radius: 50%;
    color: white; /* 白色图标更加醒目 */
    transition: transform 0.3s ease; /* 只保留变换动画，移除颜色过渡 */
}

/* 悬停效果 - 只保留动画，不改变颜色 */
.share-icon:hover {
    transform: translateY(-2px); /* 保留上浮动画 */
    box-shadow: 0 4px 10px rgba(var(--primary-blue-rgb, 69, 140, 255), 0.3); /* 添加阴影增强视觉效果 */
}

/* 如果需要特殊处理"复制链接"图标 */
.share-icon.copy-link.copied {
    background-color: #4CAF50; /* 复制成功后可以短暂显示绿色 */
}

/* CTA按钮间距调整 */
.product-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.primary-btn {
    background-color: var(--primary-blue);
    color: white;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.primary-btn:hover {
    background-color: var(--primary-dark-blue, #3a75d4);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(69, 140, 255, 0.2);
}

/* 产品简介 */
.product-introduction {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.product-introduction .container {
    max-width: 1200px; /* 与其他部分容器宽度一致 */
    margin: 0 auto;
    padding: 0 15px;
}

.intro-content {
    max-width: 100%; /* 移除最大宽度限制 */
    margin: 0; /* 移除自动居中 */
}

.intro-text p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: var(--text-primary);
    text-align: left; /* 左对齐文本 */
}

/* 完整的规格表样式 */
.specs-table-container {
    max-width: 100%;
    overflow-x: auto;
    padding: 0;
    margin-bottom: 30px;
}

.specs-table {
    width: 100%;
    border-collapse: separate; /* 改用separate而非collapse */
    border-spacing: 0;
    border: 2px solid #dddddd; /* 更明显的外边框 */
}

.specs-table th, 
.specs-table td {
    padding: 12px 15px;
    border: 1px solid #dddddd; /* 为所有单元格添加边框 */
}

.specs-table th {
    width: 30%;
    font-weight: 600;
    color: var(--text-dark);
    background-color: #f5f5f5;
    text-align: left;
}

.specs-table td {
    width: 70%;
    color: var(--text-primary);
}

/* 确保表格在小屏幕上也能正常显示 */
@media (max-width: 768px) {
    .specs-table th,
    .specs-table td {
        display: block;
        width: 100%;
    }
    
    .specs-table th {
        border-bottom: none;
    }
}

/* 特点和应用列表 */
.features-list ul, .applications-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.features-list li, .applications-list li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: var(--text-primary);
    line-height: 1.6;
}

.features-list li:last-child, .applications-list li:last-child {
    border-bottom: none;
}

.features-list li strong, .applications-list li strong {
    color: var(--text-dark);
}

/* 视频部分 */
.product-media {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.media-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.media-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.media-description h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.media-description p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* FAQ部分整体调整 */
.product-faq {
    padding: 60px 0;
}

/* 移除FAQ容器的最大宽度和居中限制 */
.faq-container {
    max-width: 100%; /* 移除宽度限制 */
    margin: 0; /* 移除自动居中 */
}

/* 确保FAQ项目占满容器宽度 */
.faq-item {
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    width: 100%; /* 确保宽度为100% */
}

/* FAQ问题部分 */
.faq-question {
    background-color: #f9f9f9;
    padding: 12px 20px; /* 减小内边距以适应更小的字体 */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* FAQ答案部分 */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
    padding: 0 20px;
}

.faq-item.active .faq-answer {
    max-height: 800px; /* 增加最大高度以适应更长的内容 */
    padding: 20px;
    border-top: 1px solid #eee; /* 添加顶部边框分隔问题和答案 */
}

/* 确保FAQ标题与内容两端对齐 */
.product-faq .section-title {
    width: 100%;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* 确保FAQ容器使用与其他部分相同的容器宽度 */
.product-faq .container {
    max-width: 1200px; /* 与其他部分容器宽度一致 */
    margin: 0 auto;
    padding: 0 15px;
}

/* 相关产品 */
.related-products {
    padding: 60px 0;
    background-color: #f9f9f9;
}

/* 产品网格布局 */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 产品卡片 - 玻璃拟态效果 */
.product-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    padding: 15px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* 产品卡片内容样式 */
.product-card h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-dark);
    line-height: 1.4;
    height: 45px;
    overflow: hidden;
}

.product-specs {
    list-style: none;
    margin: 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 4px;
}

/* 产品图片 */
.product-card img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.product-card:hover img {
    transform: scale(1.02);
}

/* 学习更多按钮 */
.learn-more-btn {
    background: rgba(var(--primary-blue-rgb, 69, 140, 255), 0.9);
    color: white;
    text-align: center;
    padding: 8px 20px;
    text-decoration: none;
    margin-top: auto;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    align-self: center;
    font-size: 14px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.learn-more-btn:hover {
    background: rgba(var(--primary-blue-rgb, 69, 140, 255), 1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(69, 140, 255, 0.2);
}

/* 响应式样式 */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* 响应式样式 */
@media (max-width: 1200px) {
    .features-grid,
    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .related-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .product-hero-grid {
        grid-template-columns: 100%; /* 小屏幕下改为垂直布局 */
    }
    
    .intro-content,
    .media-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .intro-image {
        order: -1;
    }
    
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .zoom-result {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .product-key-specs {
        grid-template-columns: 1fr;
    }
    
    .features-grid,
    .applications-grid,
    .related-products-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .product-title {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .product-actions {
        flex-direction: column;
    }
    
    .specs-table th,
    .specs-table td {
        padding: 12px 15px;
    }
    
    .gallery-thumbnails {
        gap: 8px;
    }
    
    .thumbnail {
        width: 60px;
        height: 60px;
    }
}

/* Hero区域中的Key Features样式 */
.hero-features {
    margin-bottom: 20px;
}

.hero-features h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.hero-features ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 12px 15px;
}

.hero-features li {
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-primary);
}

.hero-features li:not(:last-child) {
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.hero-features li strong {
    color: var(--text-dark);
}

/* 亚马逊风格的产品特性列表 */
.amazon-style-features {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left; /* 确保文本左对齐 */
}

.amazon-style-features ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
    text-align: left; /* 确保文本左对齐 */
}

.amazon-style-features li {
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    text-align: left; /* 确保文本左对齐 */
}

/* CTA按钮需要居中显示 */
.product-actions.centered {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
    text-align: center; /* 确保按钮内文本居中 */
}

/* 对齐修复 - 添加一个绝对定位的辅助调整 */
.product-hero-grid > div {
    position: relative;
    top: 0; /* 确保从顶部开始 */
}

/* 调整FAQ问题字体大小 */
.faq-question h3 {
    font-size: 16px;
    margin: 0;
    color: var(--text-dark);
    font-weight: normal;
    line-height: 1.5;
}

/* 调整FAQ答案字体大小 */
.faq-answer p {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* 调整FAQ答案的最后一段底部边距 */
.faq-answer p:last-child {
    margin-bottom: 0;
}

/* 调整FAQ问题的内边距 */
.faq-question {
    background-color: #f9f9f9;
    padding: 12px 20px; /* 减小内边距以适应更小的字体 */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* 调整FAQ答案的内边距 */
.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 15px 20px; /* 减小内边距 */
}

/* 调整展开/折叠图标大小 */
.toggle-icon i {
    font-size: 16px; /* 减小图标大小 */
}

/* 清除任何可能影响布局的浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 切换图标的平滑过渡 */
.toggle-icon i {
    transition: transform 0.3s ease;
}

.faq-item.active .toggle-icon i.bi-plus {
    transform: rotate(45deg);
}

.faq-item.active .toggle-icon i.bi-dash {
    transform: rotate(0);
}

/* 首页风格产品网格样式 */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 首页风格产品卡片样式 */
.products-grid .product-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    padding: 15px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.products-grid .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.products-grid .product-card h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-dark);
    line-height: 1.4;
    height: 45px;
    overflow: hidden;
}

.products-grid .product-specs {
    list-style: none;
    margin: 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 4px;
}

.products-grid .product-card img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    margin-bottom: 15px;
    background: transparent;
    border: none;
    padding: 10px;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.products-grid .product-card:hover img {
    transform: scale(1.02);
}

.products-grid .learn-more-btn {
    background: rgba(var(--primary-blue-rgb, 69, 140, 255), 0.9);
    color: white;
    text-align: center;
    padding: 8px 20px;
    text-decoration: none;
    margin-top: auto;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.products-grid .learn-more-btn:hover {
    background: rgba(var(--primary-blue-rgb, 69, 140, 255), 1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(69, 140, 255, 0.2);
}

/* 响应式样式 */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Responsive Styles - Consolidated and Enhanced
   ========================================================================== */

/* For Laptops and Large Tablets (adjusting from 1200px rules) */
@media (max-width: 1199px) { /* Corresponds to your 1200px rules */
    .container { /* Ensure container padding is consistent */
        /* padding: 0 15px; /* Already in your base */
    }

    .products-grid { /* Related products */
        grid-template-columns: repeat(3, 1fr);
    }

    .features-grid,
    .applications-grid { /* If these classes are used elsewhere for similar grids */
        /* grid-template-columns: repeat(2, 1fr); /* You had this, apply if relevant */
    }

    /* Product Hero Adjustments */
    .product-hero-grid {
        gap: 25px;
    }
    .image-zoom-container {
        height: 380px; /* Slightly reduce height */
    }
    .thumbnail {
        width: 55px;
        height: 55px;
        min-width: 55px;
    }
    .gallery-thumbnails {
        gap: 6px;
    }
    .product-title {
        font-size: 32px;
    }
    .spec-item {
        padding: 10px 12px;
    }
     .spec-label, .spec-value {
        font-size: 14px;
    }
    .primary-btn {
        padding: 10px 25px;
        font-size: 15px;
    }
    .hero-features h3 {
        font-size: 17px;
    }
    .hero-features li, .amazon-style-features li {
        font-size: 13px;
    }


    /* Section Titles */
    .section-title {
        font-size: 26px;
        margin-bottom: 25px;
        padding-bottom: 12px;
    }

    /* Media Section */
    .media-container {
        gap: 25px;
    }
    .media-description h3 {
        font-size: 22px;
    }
    .media-description p {
        font-size: 15px;
    }

    /* FAQ */
    .faq-question h3 {
        font-size: 15px;
    }
     .faq-answer p {
        font-size: 13px;
    }

    /* Product Card (Related Products) */
    .product-card h3 {
        font-size: 15px;
        height: 42px; /* Adjust if needed */
    }
    .product-card img {
        height: 200px;
    }
    .product-specs {
        font-size: 13px;
    }
    .learn-more-btn {
        padding: 7px 18px;
        font-size: 13px;
    }
}


/* For Tablets (adjusting from 992px rules) */
@media (max-width: 991px) { /* Corresponds to your 992px rules */
    .product-detail-content {
        padding: 50px 0;
    }

    .product-hero-grid {
        grid-template-columns: 100%; /* Stack image and info */
        gap: 30px; /* Gap when stacked */
    }
    .product-main-image { /* Center the image block when stacked */
        margin: 0 auto;
        max-width: 500px; /* Optional: constrain image width */
    }
    .image-zoom-container {
        height: 350px; /* Adjust for single column */
    }

    .intro-content, /* If .intro-content is a grid/flex that needs stacking */
    .media-container {
        grid-template-columns: 1fr; /* Stack items */
        gap: 25px;
    }
    
    /* .intro-image { /* If used in intro-content
        order: -1; /* Image first when stacked
    } */

    .products-grid { /* Related products */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* .zoom-result { /* You had this
        display: none !important;
    } */

    /* General Adjustments */
    .product-title-container {
        margin-bottom: 30px;
    }
    .product-title {
        font-size: 30px;
    }
    .section-title {
        font-size: 24px;
    }

    /* Key Specs */
    .product-key-specs {
        gap: 12px;
    }

    /* Product Actions */
    .product-actions {
        flex-wrap: wrap; /* Allow buttons to wrap if they don't fit */
        justify-content: center;
    }
    .primary-btn {
        flex-grow: 1; /* Allow buttons to grow if needed */
        min-width: 180px;
    }
    
    /* Specs Table */
    .specs-table th, .specs-table td {
        padding: 10px 12px;
    }

    /* Media Section */
    .media-description {
        text-align: center; /* Center text when stacked */
    }

    /* FAQ */
    .faq-question {
        padding: 10px 15px;
    }
    .faq-item.active .faq-answer {
        padding: 12px 15px;
    }
}


/* For Mobile Landscape and Small Tablets (adjusting from 768px rules) */
@media (max-width: 767px) { /* Corresponds to your 768px rules */
    .product-detail-content {
        padding: 40px 0;
    }
    .container {
        padding: 0 10px;
    }

    .product-title {
        font-size: 26px; /* Was 30px */
    }
    .section-title {
        font-size: 22px; /* Was 28px */
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .product-hero-grid {
        margin-bottom: 40px;
    }
    .image-zoom-container {
        height: 300px;
        border: none; /* Remove border on mobile if desired */
    }
    .gallery-navigation {
        margin-top: 10px;
    }
    .thumbnail {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }
    .gallery-nav-btn {
        width: 24px;
        height: 24px;
    }

    .product-key-specs {
        grid-template-columns: 1fr; /* Stack key specs */
        gap: 10px;
    }
    .spec-item {
        padding: 10px;
    }

    .products-grid, /* Related products */
    .features-grid,  /* If used */
    .applications-grid { /* If used */
        grid-template-columns: 1fr;
    }

    /* Specs Table - Cells stack */
    .specs-table th,
    .specs-table td {
        display: block;
        width: 100%;
        text-align: left !important; /* Ensure text aligns left */
    }
    .specs-table thead tr { /* Hide table header row as th becomes label-like */
        display: none;
    }
    .specs-table tbody tr { /* Add some spacing between "rows" */
        margin-bottom: 10px;
        display: block;
        border: 1px solid #ddd;
    }
    .specs-table td:before { /* Add label for mobile table view (optional) */
      /* content: attr(data-label); /* Needs data-label attribute on td
      font-weight: bold;
      display: inline-block;
      width: 100px; /* Adjust as needed
      margin-right: 5px; */
    }
    .specs-table th { /* Style th like a heading for each row block */
        border-bottom: 1px solid #ddd; /* Restore a bottom border for the "heading" th */
    }


    /* Introduction, Media */
    .product-introduction, .product-media, .product-faq, .related-products {
        padding: 40px 0;
    }
    .intro-text p, .media-description p {
        font-size: 14px;
        line-height: 1.65;
    }
    .media-description h3 {
        font-size: 20px;
    }

    /* FAQ */
    .faq-question h3 {
        font-size: 14px;
    }
     .faq-answer p {
        font-size: 13px;
    }
    .toggle-icon i {
        font-size: 14px;
    }

    /* Product Card (Related Products) */
    .product-card {
        padding: 12px;
    }
    .product-card h3 {
        font-size: 14px;
        height: auto; /* Allow natural height */
        min-height: 38px; /* Ensure some min height */
    }
    .product-card img {
        height: 180px;
    }
}


/* For Mobile Portrait (adjusting from 576px rules) */
@media (max-width: 575px) { /* Corresponds to your 576px rules */
    .product-detail-content {
        padding: 30px 0;
    }

    .product-title {
        font-size: 22px;
    }
    .section-title {
        font-size: 20px;
    }

    .image-zoom-container {
        height: 250px;
    }
    .gallery-thumbnails {
        gap: 6px; /* Was 8px */
    }
    .thumbnail {
        width: 45px; /* Was 60px */
        height: 45px; /* Was 60px */
        min-width: 45px;
    }

    .product-actions {
        flex-direction: column; /* Stack buttons */
        gap: 10px;
    }
    .primary-btn {
        width: 100%; /* Full width buttons */
        padding: 12px 20px; /* Keep decent padding */
    }
    
    .specs-table th,
    .specs-table td {
        padding: 8px 10px; /* Was 12px 15px */
        font-size: 13px;
    }

    /* Social Share */
    .social-share-container {
        margin: 20px 0;
        padding-top: 15px;
    }
    .share-icon {
        width: 32px;
        height: 32px;
    }
    .share-icon i {
        font-size: 16px;
    }

    /* Hero Features & Amazon Style Features */
    .hero-features { margin-bottom: 15px; }
    .hero-features h3 { font-size: 16px; margin-bottom: 8px; }
    .hero-features ul { padding: 10px 12px; }
    .hero-features li, .amazon-style-features li { font-size: 13px; padding: 5px 0; }
    .amazon-style-features ul { padding-left: 18px; }

    /* Media Section */
    .media-description h3 { font-size: 18px; }

    /* FAQ */
    .faq-item { margin-bottom: 10px; }
    .faq-question { padding: 10px 12px; }
    .faq-item.active .faq-answer { padding: 10px 12px; }

    /* Product Card (Related Products) */
    .product-card img { height: 160px; }
    .learn-more-btn { width: 100%; text-align: center; }

}