/* ================= 产品详情页 (B2B版) 完整版 ================= */

/* 1. 顶部网格布局 */
.yy-single-top-grid { display: grid; grid-template-columns: 500px 1fr; gap: 50px; margin-bottom: 60px; align-items: start; }
.yy-single-title { font-size: 32px; color: #222; margin-top: 0; margin-bottom: 20px; line-height: 1.3; font-weight: 600; }
.yy-single-excerpt { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 35px; }

/* 2. Woo原生相册深度美化 & 修复 */
.yy-single-gallery .woocommerce-product-gallery {
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* 【多图情况下的边框】：由 flex-viewport 承担 */
.yy-single-gallery .flex-viewport {
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 15px; /* 与下方缩略图的间距 */
}

/* 【单图情况下的边框兜底】：没有 flex-viewport 时生效 */
.yy-single-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    background: #fff;
    overflow: hidden; /* 确保图片不会溢出圆角 */
}

/* 清除可能导致图片变空白或双边框的干扰代码 */
.yy-single-gallery .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
    padding: 0 !important;
    /* 坚决不能写 border: none !important; 否则上面的单图兜底会失效 */
}
.yy-single-gallery .woocommerce-product-gallery__image {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
.yy-single-gallery .woocommerce-product-gallery__image img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

/* ================= 3. 缩略图：幻灯片滑动排版 ================= */
.yy-thumb-slider-wrap {
    position: relative;
    padding: 0 !important;
    width: 100%; /* 保证与主图容器一样宽 */
}
.yy-single-gallery .flex-control-nav.flex-control-thumbs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex !important;
    flex-wrap: nowrap !important; /* 强制单行 */
    overflow: hidden !important;  /* 超出 5 个隐藏 */
    gap: 12px; /* 4个间隙共 48px */
    scroll-behavior: smooth;
}
/* 精准计算：(100% - 48px) / 5，保证 5 张图严丝合缝与主图对齐 */
.yy-single-gallery .flex-control-nav.flex-control-thumbs li {
    flex: 0 0 calc((100% - 48px) / 5) !important;
    cursor: pointer;
    float: none !important;
}
.yy-single-gallery .flex-control-nav.flex-control-thumbs img {
    width: 100% !important;
    height: 90px !important;
    object-fit: contain;
    border: 1px solid #e4e6eb;
    border-radius: 6px;
    transition: var(--yy-transition);
    opacity: 0.6;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;
}
.yy-single-gallery .flex-control-nav.flex-control-thumbs img:hover,
.yy-single-gallery .flex-control-nav.flex-control-thumbs img.flex-active {
    border-color: var(--yy-primary);
    opacity: 1;
}

/* ================= 4. JS 动态生成的左右控制箭头样式 ================= */
.yy-thumb-prev, .yy-thumb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important; /* 去除圆形背景 */
    border: none !important;            /* 去除边框 */
    box-shadow: none !important;        /* 去除阴影 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px !important;         /* 箭头变大 */
    font-weight: 900 !important;        /* 箭头加粗 */
    color: rgba(0, 0, 0, 0.7);          /* 深灰色 */
    text-shadow: 0 0 8px rgba(255,255,255,0.9); /* 白色光晕，避免在深色图上看不见 */
    transition: var(--yy-transition);
    z-index: 10;
    padding: 0;
    line-height: 1;
}
.yy-thumb-prev:hover, .yy-thumb-next:hover {
    color: var(--yy-primary);           /* 悬浮变为主题蓝 */
    transform: translateY(-50%) scale(1.15); /* 悬浮时轻微放大 */
    background: transparent !important;
}
/* 直接悬浮在左右两张图的正上方 */
.yy-thumb-prev { left: 5px; }
.yy-thumb-next { right: 5px; }


/* ================= 5. B2B 询盘引导转化框 ================= */
.yy-b2b-inquiry-box { background: #f8f9fc; border: 1px solid #eef1f6; padding: 35px; border-radius: 8px; }
.yy-b2b-inquiry-box h3 { margin-top: 0; color: #111; font-size: 20px; margin-bottom: 12px; }
.yy-b2b-inquiry-box p { color: #666; margin-bottom: 25px; font-size: 15px; }
.yy-b2b-meta { border-top: 1px dashed #dcdfe6; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: #555; }
.yy-b2b-meta a { color: var(--yy-primary); transition: var(--yy-transition); }
.yy-b2b-meta a:hover { color: #004494; text-decoration: underline; }

/* ================= 6. 模块标题与介绍区域 ================= */
.yy-section-heading {
    font-size: 24px;
    color: #222;
    border-bottom: 3px solid var(--yy-primary);
    padding-bottom: 12px;
    margin-bottom: 30px;
    display: inline-block;
    font-weight: 600;
    margin-top: 0;
}

/* 【核心美化】：将描述区域包装成独立的高级卡片 */
.yy-single-description-section {
    background: #f8f9fc; /* 极淡的高级冷灰蓝色，替代纯白 */
    border: 1px solid #e6ebf4; /* 边框稍微加深一点点以匹配背景 */
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 60px;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), /* 内发光让质感更通透 */
                0 4px 24px rgba(0, 0, 0, 0.03);
}

.yy-single-description-section .yy-page-content {
    padding: 0 !important;
    border: none !important;
    background: transparent !important; /* 确保内部正文背景透明，透出外层颜色 */
}

/* ================= 7. 关联产品模块 ================= */
.yy-single-related-section .related.products > h2 { display: none !important; }
.yy-single-related-section .price,
.yy-single-related-section .add_to_cart_button { display: none !important; }

/* 强制重构 5 列卡片网格 */
.yy-single-related-section .related.products { width: 100%; }
.yy-single-related-section ul.products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.yy-single-related-section ul.products::before,
.yy-single-related-section ul.products::after { display: none !important; }

/* 卡片外观 */
.yy-single-related-section ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
    padding-bottom: 20px;
    transition: var(--yy-transition);
    overflow: hidden;
}
.yy-single-related-section ul.products li.product:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}
.yy-single-related-section ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 15px;
    display: block;
}
.yy-single-related-section ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    color: #333;
    margin: 0 15px 20px 15px !important;
    line-height: 1.4;
}

/* ================= 8. B2B 询盘弹窗外壳样式 ================= */
.yy-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.yy-modal-overlay.active { opacity: 1; visibility: visible; }
.yy-modal-content {
    background: #fff; padding: 35px 40px; border-radius: 12px;
    width: 100%; max-width: 480px; position: relative;
    transform: translateY(-20px) scale(0.95); transition: all 0.3s ease;
    box-shadow: 0 25px 80px rgba(0,0,0,0.25);
}
.yy-modal-overlay.active .yy-modal-content { transform: translateY(0) scale(1); }
.yy-modal-close {
    position: absolute; top: 15px; right: 20px; font-size: 28px; color: #888;
    cursor: pointer; line-height: 1; transition: var(--yy-transition);
}
.yy-modal-close:hover { color: #d63638; }

/* ================= 9. 修复 WooCommerce 放大镜全屏遮罩层级 ================= */
.pswp { z-index: 999999 !important; }

/* ================= 10. 移动端响应式修正 ================= */
@media (max-width: 992px) {
    .yy-single-top-grid { grid-template-columns: 1fr; gap: 35px; }
    .yy-single-related-section ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 15px !important; }
}
@media (max-width: 576px) {
    .yy-single-related-section ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}