/* ==========================================
 * VBS 维度 & 产品详情页样式覆盖 (CSS)
 * 解决痛点：
 * 1. 覆盖 WooCommerce 产品相册冲突样式，隐藏重复的 emoji 放大镜。
 * 2. 修复产品详情页变体选择表格的边框、背景及间距。
 * 3. 仿 WABCO 工业规格参数表 & 零件号阵列的视觉高亮与交互。
 * 4. 隐藏百科文章详情页原生 Meta 元素，实现无缝全宽。
 * ========================================== */

/* 1. 暴力清除表格主题默认边框、背景 */
.vbs-specs-table *, .vbs-oem-table * {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 2. 规格表容器与表格布局 */
.vbs-specs-table table, .vbs-oem-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 10px 0 !important;
    font-size: 13px !important; 
    line-height: 1.6 !important;
    font-family: "Inter", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* 3. 仿 WABCO 灵魂：虚线半透明蓝色间隔线 */
.vbs-specs-table tr, .vbs-oem-table tr {
    border-bottom: 1px dashed rgba(0, 91, 172, 0.4) !important;
}

.vbs-specs-table tr:last-child, .vbs-oem-table tr:last-child {
    border-bottom: none !important;
}

/* 4. 单元格排版间距 */
.vbs-specs-table td, .vbs-oem-table td {
    padding: 10px 0 !important;
    border: none !important;
    vertical-align: middle !important;
}

/* 5. 左侧标题列：深灰黑，粗体，35%宽度 */
.vbs-specs-table td:first-child, .vbs-oem-table td:first-child {
    color: #222 !important;
    font-weight: 500 !important;
    text-align: left !important;
    width: 35% !important;
}

/* 6. 右侧数值列：中灰 */
.vbs-specs-table td:last-child, .vbs-oem-table td:last-child {
    color: #4b5563 !important;
    text-align: left !important;
}

/* 7. WABCO 交互悬浮高亮 */
.vbs-specs-table tr:hover, .vbs-oem-table tr:hover {
    background-color: rgba(0, 91, 172, 0.02) !important;
}

/* 8. 阵列容器骨架：使用 Flexbox 保证对齐与标签间距 */
.vbs-part-array {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; 
    margin: 12px 0 !important;
    font-family: "Inter", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* 9. 左侧图标与标题：通过伪元素加载内容，实现完全的 CSS 控制 */
.vbs-part-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-right: 6px !important;
}
.vbs-part-mfg .vbs-part-label::before {
    content: "制造号: ";
}
.vbs-part-engine .vbs-part-label::before {
    content: "发动机号: ";
}
.vbs-part-oem .vbs-part-label::before {
    content: "主机厂号: ";
}
.vbs-part-interchange .vbs-part-label::before {
    content: "互换号: ";
}
.vbs-part-fitment .vbs-part-label::before {
    content: "适配机型: ";
}

/* 10. 通用标签基础样式：极简灰白，微弧度圆角 */
.vbs-part-tag {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important; 
    cursor: default !important;
    display: inline-block !important;
}

/* 11. 标签悬浮微交互：鼠标放上去时轻微上浮并变色 */
.vbs-part-tag:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* 12. 制造号专属：柔和的工业红 */
.vbs-part-mfg .vbs-part-tag {
    background-color: #fff1f2 !important;
    border-color: #ffe4e6 !important;
    color: #e11d48 !important;
}
.vbs-part-mfg .vbs-part-tag:hover {
    background-color: #ffe4e6 !important;
    color: #be123c !important;
}

/* 13. 主机厂号专属：深邃的海蓝 */
.vbs-part-oem .vbs-part-tag {
    background-color: #f0f9ff !important;
    border-color: #e0f2fe !important;
    color: #0284c7 !important;
}
.vbs-part-oem .vbs-part-tag:hover {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}

/* 14. 发动机号专属：充满质感的紫灰 */
.vbs-part-engine .vbs-part-tag {
    background-color: #f5f3ff !important;
    border-color: #ede9fe !important;
    color: #6d28d9 !important;
}
.vbs-part-engine .vbs-part-tag:hover {
    background-color: #ede9fe !important;
    color: #5b21b6 !important;
}

/* 15. 屏蔽文章详情页的原生标题、元信息、页脚导航和评论区 */
.single-post .entry-header, 
.single-post .post-meta,
.single-post .entry-meta,
.single-post .entry-footer,
.single-post .cat-links,
.single-post .tags-links,
.single-post .post-navigation,
.single-post #comments,
.single-post .author-bio { 
    display: none !important; 
}

/* 确保百科注入内容区域全宽且无侧边干扰 */
.single-post .entry-content { 
    margin: 0 !important; 
    padding: 0 !important; 
    max-width: 100% !important; 
}

/* ==========================================
 * WooCommerce 原生覆盖样式（图片画册与变体表格）
 * ========================================== */

/* 暴力覆盖清除 WooCommerce 产品相册列表标记与间距冲突 */
ol.flex-control-thumbs, 
ol.flex-control-thumbs li, 
.flex-control-thumbs li {
    list-style: none !important; 
    list-style-type: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    text-indent: 0 !important;
}

ol.flex-control-thumbs li::before { 
    content: none !important; 
    display: none !important; 
}

/* 隐藏重复/重叠的 WooCommerce 商品画册放大镜 Emoji 触发器 */
img.emoji.woocommerce-product-gallery__trigger, 
.woocommerce-product-gallery__trigger img.emoji { 
    display: none !important; 
}

/* 产品图片小缩略图排列样式设计 */
ol.flex-control-thumbs { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 8px !important; 
}

ol.flex-control-thumbs li { 
    width: 70px !important; 
}

/* 产品变体选择表格样式重设（清除边框及背景，适配详情页排版） */
.woocommerce table.variations, 
.woocommerce table.variations tr, 
.woocommerce table.variations td, 
.woocommerce table.variations th {
    border: 0 !important; 
    background: transparent !important; 
    padding-left: 0 !important; 
    margin-left: 0 !important;
}

.woocommerce table.variations { 
    margin-left: 0 !important; 
    width: 100% !important; 
}

.woocommerce table.variations th.label { 
    width: 1% !important; 
    white-space: nowrap !important; 
    padding-right: 20px !important; 
}

/* ==========================================
 * 产品相册短代码 [custom_product_gallery] 布局样式
 * ========================================== */
.custom-gallery-wrapper .woocommerce-product-gallery__image img.wp-post-image { 
    object-fit: contain !important; 
    max-height: none !important; 
    display: block !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}
.custom-gallery-wrapper .woocommerce-product-gallery__image img.zoomImg { 
    width: auto !important; 
    height: auto !important; 
    max-width: none !important; 
    max-height: none !important; 
    position: absolute !important; 
    display: block !important; 
}
.custom-gallery-wrapper .woocommerce-product-gallery, 
.custom-gallery-wrapper .woocommerce-product-gallery figure, 
.custom-gallery-wrapper .woocommerce-product-gallery__wrapper, 
.custom-gallery-wrapper .woocommerce-product-gallery__image { 
    margin: 0 !important; 
    padding: 0 !important; 
    border: none !important; 
    display: block !important; 
    line-height: 0 !important; 
    box-sizing: border-box !important; 
    position: relative !important; 
}
.custom-gallery-wrapper .flex-viewport { 
    overflow: hidden !important; 
    object-fit: unset !important; 
    margin: 0 0 15px 0 !important; 
    padding: 0 !important; 
}
.custom-gallery-wrapper p { 
    display: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    height: 0 !important; 
}
.custom-gallery-wrapper .woocommerce-product-gallery__trigger { 
    position: absolute !important; 
    top: 10px !important; 
    right: 10px !important; 
    display: block !important; 
    z-index: 99 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    line-height: 1 !important; 
}
.custom-gallery-wrapper .woocommerce-product-gallery { 
    width: 100% !important; 
    float: none !important; 
    max-width: 100% !important; 
}
@media screen and (max-width: 768px) {
    .custom-gallery-wrapper .woocommerce-product-gallery { 
        margin-bottom: 20px !important; 
    }
    .custom-gallery-wrapper .flex-control-thumbs { 
        display: flex !important; 
        flex-wrap: wrap !important; 
        gap: 5px !important; 
    }
    .custom-gallery-wrapper .flex-control-thumbs li { 
        width: calc(25% - 5px) !important; 
    }
}

/* ==========================================
 * 产品定制价格短代码 [product_price] 样式
 * ========================================== */
.ag-custom-price-wrapper .price { 
    margin-bottom: 0 !important; 
}
.ag-custom-price-wrapper p { 
    margin: 0 !important; 
}

/* ==========================================
 * 变体购买表单短代码 [product_purchase_logic] 样式
 * ========================================== */
.woocommerce .star-rating span { 
    font-family: star !important; 
}
.ag-hybrid-purchase-wrapper p { 
    margin: 0 !important; 
    padding: 0 !important; 
    display: inline !important; 
}
.ag-hybrid-purchase-wrapper br { 
    display: none !important; 
}
.ag-hybrid-purchase-wrapper .cart { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    align-items: center !important; 
    margin-bottom: 0 !important; 
}
.ag-hybrid-purchase-wrapper .single_add_to_cart_button { 
    height: 50px !important; 
    line-height: normal !important; 
    vertical-align: middle !important; 
    margin: 0 0 0 12px !important; 
}
.ag-hybrid-purchase-wrapper .quantity { 
    margin-bottom: 0 !important; 
    display: flex !important; 
}
.ag-hybrid-purchase-wrapper .quantity input.qty { 
    height: 50px !important; 
    line-height: 50px !important; 
    margin: 0 !important; 
}
.ag-hybrid-purchase-wrapper { 
    margin-bottom: 0 !important; 
}
.ag-hybrid-purchase-wrapper .added_to_cart, 
.ag-hybrid-purchase-wrapper .wc-forward:not(.checkout) { 
    display: none !important; 
}

/* ==========================================
 * 维度关联文章短代码 [vbs_archive_posts] 页面布局与样式
 * ========================================== */
.vbs-dimension-wiki-section {
    margin-top: 20px;
    margin-bottom: 40px;
}
.vbs-dimension-wiki-section h3 {
    border-left: 5px solid #e2401c;
    padding-left: 15px;
    margin: 0 0 20px 0;
    font-size: 18px;
    line-height: 1.2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vbs-dimension-wiki-section h3 a {
    font-size: 12px;
    color: #999;
    text-decoration: none;
    font-weight: normal;
}
.vbs-dimension-wiki-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.vbs-wiki-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vbs-wiki-card a {
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 15px;
    display: block;
    margin-bottom: 8px;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
}
.vbs-wiki-card p {
    font-size: 13px;
    color: #777;
    margin: 0;
    line-height: 1.5;
    height: 3em;
    overflow: hidden;
}
.vbs-wiki-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    border-color: #e2401c33; 
}

/* ==========================================
 * 通用百科辅助与缩略图样式
 * ========================================== */
.vbs-enrichment-box {
    margin-top: 30px;
    padding: 20px;
    border-top: 2px solid #f0f0f0;
    background: #fafafa;
    border-radius: 8px;
}
.vbs-post-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
