/**
 * B2B Product Showcase - Frontend Styles
 */

/* Unified background - scoped to plugin containers only */
/* Does NOT affect theme global elements (body, #page, footer, etc.) */

/* Full-width wrapper: spans the entire viewport width between header and footer.
   On template pages (where it sits right after get_header), width:100% is
   already full-width.  On shortcode pages the body-class rules below handle it. */
.cxb-b2b-page-background-wrapper {
    background-color: var(--cxb-page-background-color, #f5f5f5);
    background: var(--cxb-page-background-color, #f5f5f5);
    width: 100%;
    min-height: 1px;
}

/* Quote page (loaded via shortcode inside a WordPress page):
   The wrapper sits inside the theme's content container which is width-constrained.
   Apply the background to the theme's content wrappers so it spans full width,
   scoped to this specific page via body class so it never leaks to other pages.
   Header and footer are explicitly excluded. */
body.cxb-b2b-quote-page #page,
body.cxb-b2b-quote-page .site,
body.cxb-b2b-quote-page #content,
body.cxb-b2b-quote-page .site-content,
body.cxb-b2b-quote-page #primary,
body.cxb-b2b-quote-page .content-area,
body.cxb-b2b-quote-page #main,
body.cxb-b2b-quote-page main.site-main,
body.cxb-b2b-quote-page .entry-content,
body.cxb-b2b-quote-page article.page,
body.cxb-b2b-quote-page .page-content {
    background-color: var(--cxb-page-background-color, #f5f5f5);
}
/* Protect header and footer on quote pages */
body.cxb-b2b-quote-page header.site-header,
body.cxb-b2b-quote-page #masthead,
body.cxb-b2b-quote-page .site-header,
body.cxb-b2b-quote-page footer.site-footer,
body.cxb-b2b-quote-page #colophon,
body.cxb-b2b-quote-page .site-footer,
body.cxb-b2b-quote-page #footer,
body.cxb-b2b-quote-page .footer,
body.cxb-b2b-quote-page footer:not(.cxb-b2b-template3-product-footer):not(.cxb-b2b-quote-basket-footer) {
    background-color: initial;
    background: initial;
}

/* Plugin container backgrounds */
#cxb-b2b-quote-request-page,
.cxb-b2b-template1-container,
.cxb-b2b-template2-container,
.cxb-b2b-template3-container,
.cxb-b2b-products-taxonomy-container,
.cxb-b2b-products-archive-container,
.cxb-b2b-product-single-container,
.cxb-b2b-archive-content-wrapper,
.cxb-b2b-content-with-sidebar,
.cxb-b2b-seo-content,
.cxb-b2b-no-products,
.cxb-b2b-product-inquiry,
.cxb-b2b-related-products,
.cxb-b2b-template2-description,
.cxb-b2b-template3-description,
.cxb-b2b-child-categories,
.cxb-b2b-products-archive-container .navigation.pagination,
.cxb-b2b-products-archive-container .nav-links,
.cxb-b2b-products-taxonomy-container .navigation.pagination,
.cxb-b2b-products-taxonomy-container .nav-links {
    background-color: var(--cxb-page-background-color, #f5f5f5);
    background: var(--cxb-page-background-color, #f5f5f5);
}



/* ==========================================================================
   General Styles
   ========================================================================== */
.cxb-b2b-products-taxonomy-container,
.cxb-b2b-products-archive-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    /* 背景色已在上方统一设置 */
}

/* Header Styles */
.cxb-b2b-taxonomy-header {
    margin-bottom: 10px;
    text-align: center;
}

.cxb-b2b-product-header {
    margin-bottom: 20px;
}

.cxb-b2b-taxonomy-title {
    font-size: 20px;
    color: #000;
    margin-bottom: 10px;
}

.cxb-b2b-taxonomy-description {
    color: #000;
    line-height: 1.6;
    margin-bottom: 10px;
}

.cxb-b2b-product-short-description {
    color: #000 !important;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
}

/* SEO Content Styles */
.cxb-b2b-seo-content {
    margin: 10px 0;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    line-height: 1.8;
    color: #000;
}

.cxb-b2b-seo-content h1,
.cxb-b2b-seo-content h2,
.cxb-b2b-seo-content h3,
.cxb-b2b-seo-content h4,
.cxb-b2b-seo-content h5,
.cxb-b2b-seo-content h6 {
    margin-top: 20px;
    margin-bottom: 15px;
    color: #000 !important;
}

.cxb-b2b-seo-content p {
    margin-bottom: 15px;
}

.cxb-b2b-seo-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}

.cxb-b2b-seo-content ul,
.cxb-b2b-seo-content ol {
    margin: 15px 0;
    padding-left: 20px;
}

.cxb-b2b-seo-content a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cxb-b2b-seo-content a:hover {
    color: #0052a3;
    text-decoration: underline;
}

/* SEO Content Responsive Style */
@media screen and (max-width: 768px) {
    .cxb-b2b-seo-content {
        margin: 10px 0;
        padding: 10px;
    }

    .cxb-b2b-seo-content h2,
    .cxb-b2b-seo-content h3,
    .cxb-b2b-seo-content h4 {
        font-size: 18px;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .cxb-b2b-seo-content p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .cxb-b2b-seo-content img {
        margin: 10px 0;
    }

    .cxb-b2b-seo-content ul,
    .cxb-b2b-seo-content ol {
        margin: 10px 0;
        padding-left: 15px;
    }
}

@media screen and (max-width: 480px) {
    .cxb-b2b-seo-content {
        margin: 10px 0;
        padding: 10px;
    }

    .cxb-b2b-seo-content h2,
    .cxb-b2b-seo-content h3,
    .cxb-b2b-seo-content h4 {
        font-size: 16px;
    }

    .cxb-b2b-seo-content p {
        font-size: 13px;
    }
}

.cxb-b2b-taxonomy-meta {
    color: #888888;
    font-size: 14px;
}

/* Breadcrumb Navigation */
.cxb-b2b-breadcrumbs {
    margin-bottom: 25px;
    padding: 10px 0;
    font-size: 14px;
    color: #000000;
}

.cxb-b2b-breadcrumbs a {
    color: #000000;
    text-decoration: none;
}

.cxb-b2b-breadcrumbs a:hover {
    color: var(--cxb-primary-color, #0A7AFF);
    text-decoration: underline;
}

.cxb-b2b-breadcrumbs .separator {
    margin: 0 8px;
    color: #999999;
}

/* Product Filters */
.cxb-b2b-product-filters.cxb-b2b-product-filters {
    padding: 20px 0;
}

/* Product Grid */
.cxb-b2b-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* Product Card */
.cxb-b2b-product-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.cxb-b2b-product-card-icons {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    display: flex;
    gap: 10px;
}
.cxb-b2b-product-card-icons a,
.cxb-b2b-product-card-icons img {
    display: block;
}
.cxb-b2b-product-card-icons img {
    object-fit: contain;
}



/* 确保内部交互元素具有适当的层叠上下文 */
.cxb-b2b-product-actions,
.cxb-b2b-email-inquiry-button,
.cxb-b2b-inquiry-button,
.cxb-b2b-add-to-quote-button,
.cxb-b2b-view-details-button,
.cxb-b2b-product-title a,
.cxb-b2b-product-thumbnail a,
.cxb-b2b-product-category a,
.cxb-b2b-product-card-left-image .cxb-b2b-product-thumbnail-left a {
    position: relative;
    z-index: 2;
}

/* Email Inquiry图标按钮保持绝对定位和较高z-index */


.cxb-b2b-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: #0066cc;
}

.cxb-b2b-product-thumbnail {
    position: relative;
    margin: -16px -16px 0 -16px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.cxb-b2b-product-thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail img {
    transform: scale(1.05);
}

/* 产品卡片悬停效果：切换图片 */
.cxb-b2b-product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f8f8f8;
}

.cxb-b2b-product-thumbnail.has-second-image .product-image-primary,
.cxb-b2b-product-thumbnail-left.has-second-image .product-image-primary {
    transition: opacity 0.3s ease;
}

.cxb-b2b-product-thumbnail.has-second-image .product-image-secondary,
.cxb-b2b-product-thumbnail-left.has-second-image .product-image-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* 悬停时切换图片（淡入淡出效果） */
.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail.has-second-image .product-image-primary,
.cxb-b2b-product-card.cxb-b2b-product-card-left-image:hover .cxb-b2b-product-thumbnail-left.has-second-image .product-image-primary {
    opacity: 0;
}

.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail.has-second-image .product-image-secondary,
.cxb-b2b-product-card.cxb-b2b-product-card-left-image:hover .cxb-b2b-product-thumbnail-left.has-second-image .product-image-secondary {
    opacity: 1;
}

/* 当悬停效果为切换时，禁用放大效果 */
.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail.has-second-image img,
.cxb-b2b-product-card.cxb-b2b-product-card-left-image:hover .cxb-b2b-product-thumbnail-left.has-second-image img {
    transform: none;
}

.cxb-b2b-product-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    min-width: 0;
    padding: 16px 0 0 0;
    text-align: center;
    overflow: hidden;
}

/* H6鏍囬鏍峰紡 - 鏇撮€傚悎渚ц竟鏍?*/
h6.cxb-b2b-product-title {
    font-size: 17px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 12px 0;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
}

.cxb-b2b-product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cxb-b2b-product-title a:hover {
    color: #0066cc;
}

.cxb-b2b-product-excerpt {
    color: #666666;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cxb-b2b-product-card-price-moq {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.cxb-b2b-product-card-price-moq p {
    margin: 0;
    font-size: 13px;
    color: #666666;
}

.cxb-b2b-product-card-price-moq .cxb-b2b-card-price strong {
    font-weight: 700;
    color: #333333;
}

.cxb-b2b-product-card .cxb-b2b-product-meta {
    font-size: 12px;
    color: #888888;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.cxb-b2b-product-category {
    display: flex;
    align-items: center;
    justify-content: center;
}



.cxb-b2b-product-category a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.cxb-b2b-product-category a:hover {
    color: #0052a3;
    text-decoration: underline;
}

.cxb-b2b-product-actions {
    margin: auto 0 0 0;
    padding: 12px 0 0 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    display: flex;  /* 添加flex布局 */
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
}

.cxb-b2b-button-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;  /* 改为stretch，让按钮拉伸填充 */
    justify-content: center; /* 添加主轴居中 */
    gap: 8px;
    margin: 0 0 12px 0;
    width: 100%;
    box-sizing: border-box;
}

.cxb-b2b-view-details-button,
.cxb-b2b-inquiry-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
    width: auto;  /* 改为auto或固定宽度 */
    min-width: 107px;  /* 添加最小宽度 */
    box-sizing: border-box;
    margin: 0 auto;  /* 添加水平居中margin */
}

.cxb-b2b-view-details-button {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
}

.cxb-b2b-view-details-button:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.cxb-b2b-inquiry-button {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: #ffffff;
}

.cxb-b2b-inquiry-button:hover {
    background: linear-gradient(135deg, #1e7e34, #155724);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
}

.cxb-b2b-button-icon {
    margin-right: 6px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
 
/* 鍝嶅簲寮忔牱寮?- 渚ц竟鏍忎紭鍖?*/
@media screen and (max-width: 768px) {
    .cxb-b2b-product-card {
        padding: 8px;
    }
    
    .cxb-b2b-product-thumbnail {
        margin: -8px -8px 0 -8px;
    }
    
    .cxb-b2b-product-title {
        font-size: 13px;
        -webkit-line-clamp: 1;
        color: #000;
        margin-bottom: 4px;
    }
    
    .cxb-b2b-product-excerpt {
        font-size: 11px;
        -webkit-line-clamp: 1;
        margin-bottom: 4px;
    }
    
    .cxb-b2b-button-group {
        gap: 4px;
    }
    
    .cxb-b2b-product-sku {
        font-size: 12px;
    }
    
    .cxb-b2b-view-details-button,
    .cxb-b2b-inquiry-button {
        padding: 5px 8px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .cxb-b2b-product-card {
        padding: 6px;
        border-radius: 6px;
    }
    
    .cxb-b2b-product-thumbnail {
        margin: -6px -6px 0 -6px;
        border-radius: 6px 6px 0 0;
    }
    
    .cxb-b2b-product-title {
        font-size: 12px;
        margin-bottom: 3px;
        color: #000;
        line-height: 1.3;
    }
    
    .cxb-b2b-product-excerpt {
        font-size: 10px;
        margin-bottom: 4px;
        -webkit-line-clamp: 1;
    }
    
    .cxb-b2b-product-meta {
        font-size: 12px;
        margin-bottom: 4px;
    }
    
    .cxb-b2b-product-sku {
        font-size: 12px;
    }
    
    .cxb-b2b-view-details-button,
    .cxb-b2b-inquiry-button {
        padding: 4px 6px;
        font-size: 10px;
    }
    
    .cxb-b2b-button-icon {
        margin-right: 3px;
        font-size: 9px;
    }
}

/* 灏忓鍣ㄤ紭鍖?- 鐗瑰埆閫傚悎渚ц竟鏍?*/
@media (max-width: 300px) {
    .cxb-b2b-product-card {
        padding: 8px;
    }
    
    .cxb-b2b-product-thumbnail {
        margin: -8px -8px 0 -8px;
    }
    
    .cxb-b2b-product-title {
        font-size: 12px;
        line-height: 1.2;
        -webkit-line-clamp: 1;
        color: #000;
    }
    
    .cxb-b2b-product-excerpt,
    .cxb-b2b-product-meta {
        display: none; /* 鍦ㄨ秴灏忓鍣ㄤ腑闅愯棌鎽樿鍜屽厓淇℃伅 */
    }
    
    .cxb-b2b-view-details-button,
    .cxb-b2b-inquiry-button {
        padding: 4px 6px;
        font-size: 10px;
    }
}

/* 浜у搧缃戞牸鍝嶅簲寮忓垪鏁?*/
.cxb-b2b-columns-1 {
    grid-template-columns: 1fr;
}

.cxb-b2b-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cxb-b2b-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cxb-b2b-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.cxb-b2b-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.cxb-b2b-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* 鍝嶅簲寮忕綉鏍艰皟鏁?*/
@media screen and (max-width: 1200px) {
    .cxb-b2b-columns-6 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .cxb-b2b-columns-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .cxb-b2b-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .cxb-b2b-columns-4,
    .cxb-b2b-columns-5,
    .cxb-b2b-columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 480px) {
    .cxb-b2b-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .cxb-b2b-columns-2,
    .cxb-b2b-columns-3,
    .cxb-b2b-columns-4,
    .cxb-b2b-columns-5,
    .cxb-b2b-columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}
 
 /* Pagination Navigation */
.cxb-b2b-page-background-wrapper .navigation.pagination {
    margin-top: 40px;
    text-align: center;
}

.cxb-b2b-page-background-wrapper .nav-links {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cxb-b2b-page-background-wrapper .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 35px;
    padding: 0 5px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.cxb-b2b-page-background-wrapper .page-numbers.current {
    background: var(--cxb-primary-color, #0A7AFF);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
}

.cxb-b2b-page-background-wrapper .page-numbers:hover:not(.current) {
    background: #f5f5f5;
    border-color: #cccccc;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-pagination-dots {
    border: none;
    background: transparent;
    cursor: default;
    min-width: 20px;
    padding: 0 2px;
    letter-spacing: 1px;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-pagination-dots:hover {
    background: transparent;
    border: none;
}

/* No Products Message */
.cxb-b2b-no-products {
    text-align: center;
    padding: 40px 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

.cxb-b2b-no-products h2 {
    color: #000000;
    margin-bottom: 15px;
}

.cxb-b2b-no-products-title {
    font-weight: bold;
    font-size: inherit;
    color: #000000;
    margin-bottom: 15px;
}

.cxb-b2b-no-products p {
    color: #000000;
    margin-bottom: 15px;
}

.cxb-b2b-no-products a {
    color: #0066cc;
    text-decoration: none;
}

.cxb-b2b-no-products a:hover {
    text-decoration: underline;
}

.cxb-b2b-products-archive-container .cxb-b2b-no-products h2,
.cxb-b2b-products-archive-container .cxb-b2b-no-products .cxb-b2b-no-products-title,
.cxb-b2b-products-taxonomy-container .cxb-b2b-no-products h2,
.cxb-b2b-products-taxonomy-container .cxb-b2b-no-products .cxb-b2b-no-products-title {
    color: #000000;
}

.cxb-b2b-products-archive-container .cxb-b2b-no-products p,
.cxb-b2b-products-taxonomy-container .cxb-b2b-no-products p {
    color: #000000;
}

/* Product Detail Page Styles */
.cxb-b2b-product-single-container {
    margin: 0 auto;
    padding: 0 0 40px 0;
    width: 100%;
    max-width: 1200px;
}

/* Product Detail Area */
.cxb-b2b-product-content-wrapper {
    margin-top: 0;
}

.cxb-b2b-product-content {
    margin: 0 auto;
}

.cxb-b2b-product-content-title {
    font-size: 28px;
    font-weight: 600;
    color: #000;
    margin-bottom: 25px;
}

.cxb-b2b-product-description {
    color: #000 !important;
    font-size: 16px;
    line-height: 1.8;
}

.cxb-b2b-product-description,
.cxb-b2b-product-description p,
.cxb-b2b-product-description span,
.cxb-b2b-product-description div,
.cxb-b2b-product-description li,
.cxb-b2b-product-description ul,
.cxb-b2b-product-description ol,
.cxb-b2b-product-description h1,
.cxb-b2b-product-description h2,
.cxb-b2b-product-description h3,
.cxb-b2b-product-description h4,
.cxb-b2b-product-description h5,
.cxb-b2b-product-description h6 {
    color: #000 !important;
}

.cxb-b2b-product-inquiry {
    margin-top: 10px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.cxb-b2b-inquiry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 12px;
    background: #007bff;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cxb-b2b-inquiry-button:hover {
    background: #0056b3;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.cxb-b2b-button-icon {
    margin-right: 8px;
    font-size: 18px;
}

.cxb-b2b-product-main.woocommerce-style {
    display: flex;
    gap: 40px;
    margin-bottom: 10px;
}

/* Column wrapper — flex item that STRETCHES to the full height of the
   flex container.  This provides the scroll room that position:sticky
   needs: the wrapper is always as tall as the tallest column, while
   the gallery inside is only as tall as its content.                  */
.cxb-b2b-product-images-col {
    flex: 1 1 0%;
    min-width: 0;
    /* Default align-self:stretch — do NOT set flex-start here */
}

.cxb-b2b-product-main.woocommerce-style > .cxb-b2b-product-summary {
    flex: 1 1 0%;
    min-width: 0;
}

/* Product Image Area — sticky INSIDE the wrapper column.
   Pure CSS sticky: immune to third-party plugins (Tidio, Intercom, etc.)
   that set transform/filter on ancestors, because position:sticky is
   NOT affected by containing-block-creating properties — only by
   overflow on ancestors (protected by !important rules below).

   The column wrapper stretches to full row height via default
   align-self:stretch, giving the sticky element room to scroll.       */
.cxb-b2b-product-images {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--cxb-sticky-top, 0px) + 10px);
    z-index: 1;
}

/* Legacy class kept for backward compatibility — no longer needed
   for activation; the rule above applies directly.                    */
.cxb-b2b-product-images.cxb-sticky-gallery {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--cxb-sticky-top, 0px) + 10px);
    z-index: 1;
}

.cxb-b2b-product-featured-image {
    margin-bottom: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.cxb-b2b-featured-image-wrapper {
    position: relative;
    text-align: center;
}

.cxb-b2b-featured-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Thumbnail Area */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    position: relative;
}

/* Product Gallery Slider Styles */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Thumbnail Slider Navigation Button */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    appearance: none;
    -webkit-appearance: none;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: #666;
    position: absolute;
    top: 50%;
    left: 50%;
    background: none;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav.prev::before {
    transform: translate(-25%, -50%) rotate(-135deg);
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav.next::before {
    transform: translate(-75%, -50%) rotate(45deg);
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav.prev {
    left: 5px;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav.next {
    right: 5px;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav:hover::before {
    border-color: #333;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-slider {
    overflow: hidden;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumb {
    position: relative;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    height: auto;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumb.active {
    border-color: #007bff;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-thumb-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Product Information Area */
.cxb-b2b-product-summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cxb-b2b-product-header {
    margin-bottom: 20px;
}

.cxb-b2b-product-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0 0 20px;
    line-height: 1.2;
}

.cxb-b2b-product-short-description {
    color: #000 !important;
    font-size: 16px;
    line-height: 1.6;
}

/* Product Price & MOQ Block */
.cxb-b2b-product-price-moq-block {
    margin: 0 0 15px 0;
}

.cxb-b2b-product-price-moq-block hr.cxb-b2b-price-separator {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 12px 0;
}

h3.cxb-b2b-product-price {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

p.cxb-b2b-product-moq {
    font-size: 16px;
    font-weight: 400;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/* Product Categories and Tags */
.cxb-b2b-product-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.cxb-b2b-related-products {
    margin-top: 60px;
    border-radius: 12px;
}

.cxb-b2b-related-products h2 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.cxb-b2b-products-grid.cxb-b2b-columns-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.cxb-b2b-product-categories a,
.cxb-b2b-product-tags a {
    color: #007bff;
    text-decoration: none;
}

.cxb-b2b-product-categories a:hover,
.cxb-b2b-product-tags a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cxb-b2b-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cxb-b2b-taxonomy-title {
        font-size: 28px;
        color: #000;
    }
    
    .cxb-b2b-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .cxb-b2b-product-info {
        padding: 0px;
    }

    .cxb-b2b-product-content {
        padding: 0 20px;
    }

    .cxb-b2b-product-content-title {
        font-size: 24px;
        margin-bottom: 20px;
        color: #000;
    }

    .cxb-b2b-product-description {
        font-size: 15px;
    }
    
    /* Product Detail Page Mobile Layout Adjustments */
    .cxb-b2b-product-main.woocommerce-style {
        flex-direction: column;
        gap: 30px;
    }

    /* Disable sticky gallery on mobile — single column layout */
    .cxb-b2b-product-images,
    .cxb-b2b-product-images.cxb-sticky-gallery {
        position: relative !important;
        top: auto !important;
    }
    
    .cxb-b2b-product-single-container {
        padding: 0 15px 20px 15px;
    }
    
    .cxb-b2b-product-title {
        font-size: 24px;
        margin-bottom: 15px;
        color: #000;
    }
    
    /* Mobile Product Gallery Slider Styles */
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumbnails {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        justify-content: flex-start;
        margin-top: 15px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative !important;
        padding: 0 0 6px 0; /* Bottom padding for scrollbar */
        margin-bottom: 0; /* Remove bottom margin */
        scrollbar-width: thin;
        scrollbar-color: #ddd transparent;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumbnails::-webkit-scrollbar {
        height: 4px;
    }
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumbnails::-webkit-scrollbar-track {
        background: transparent;
    }
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumbnails::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 2px;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumb {
        width: 70px;
        min-width: 70px;
        margin-bottom: 0; /* Remove bottom margin */
        flex: 0 0 auto;
        height: 70px;
        position: relative;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumb img {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
        object-fit: contain;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav {
        width: 25px;
        height: 25px;
        font-size: 18px;
        line-height: 22px;
    }
    
    .cxb-b2b-related-products {
        padding: 20px 15px;
        margin-top: 40px;
    }
    
    .cxb-b2b-products-grid.cxb-b2b-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cxb-b2b-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .cxb-b2b-taxonomy-title {
        font-size: 24px;
        color: #000;
    }
    
    .cxb-b2b-product-title {
        font-size: 20px;
        color: #000;
    }
    
    .cxb-b2b-product-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Small Screen Device Product Gallery Optimization */
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumb {
        width: 60px;
        min-width: 60px;
        height: 60px;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav {
        width: 22px;
        height: 22px;
        font-size: 16px;
        line-height: 20px;
    }
    
    .cxb-b2b-product-inquiry {
        padding: 15px;
    }
    
    .cxb-b2b-inquiry-button {
        width: 100%;
        padding: 10px;
    }
    
    .cxb-b2b-products-grid.cxb-b2b-columns-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .cxb-b2b-related-products {
        padding: 15px 10px;
    }
    
    .cxb-b2b-related-products h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

/* Template 1 Styles - Top Categories + Products */
.cxb-b2b-template1-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.cxb-b2b-template1-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin-bottom: 10px;
    max-width: none;
}

.cxb-b2b-template1-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Template 2 and 3 banner styles */
.cxb-b2b-template2-banner,
.cxb-b2b-template3-banner,
.cxb-b2b-single-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin-bottom: 25px;
    border-radius: 0;
    max-width: none;
}

/* Banner internal content styles */
.cxb-b2b-banner-internal-content {
    position: relative;
}

.cxb-b2b-banner-inner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cxb-b2b-banner-inner-content {
    text-align: center;
    color: #ffffff;
    max-width: 800px;
    padding: 20px;
}

.cxb-b2b-banner-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.3;
}

.cxb-b2b-banner-description {
    font-size: 16px;
    margin-bottom: 20px;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.5;
    opacity: 0.9;
}

/* Breadcrumb styles inside banner */
.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs {
    margin-bottom: 0;
    padding: 0;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs a {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-color: rgba(128, 128, 128, 0.5); /* 灰色50%透明度 */
    border-radius: 4px; /* 圆角 */
    padding: 2px 8px; /* 上下内边距2px，左右8px，总高度约18px */
    height: 18px; /* 按钮高度 */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs a:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 50%, transparent); /* 使用全局主色调，50%透明度 */
}

.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs .separator {
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent !important;
    padding: 0 4px;
    margin: 0 2px;
}

.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs .current {
    background-color: rgba(128, 128, 128, 0.5); /* 灰色50%透明度 */
    border-radius: 4px; /* 圆角 */
    padding: 2px 8px; /* 上下内边距2px，左右8px */
    height: 18px; /* 按钮高度 */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-weight: 600;
}

/* Responsive styles for banner internal content */
@media (max-width: 768px) {
    .cxb-b2b-banner-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .cxb-b2b-banner-description {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .cxb-b2b-banner-inner-content {
        padding: 15px;
    }
    
    .cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs {
        gap: 3px;
    }
    
    .cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs a {
        padding: 1px 6px;
        font-size: 13px;
    }
    
    .cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs .current {
        padding: 1px 6px;
        font-size: 13px;
    }
}

/* Full-width banner for template 2 and 3 - Now using full viewport width */
.cxb-b2b-template2-container .cxb-b2b-template2-banner,
.cxb-b2b-template3-container .cxb-b2b-template3-banner {
    /* These banners now use full viewport width via the base banner styles */
}

/* Breadcrumb alignment with banner for template 2 and 3 */
.cxb-b2b-template2-container .cxb-b2b-breadcrumbs,
.cxb-b2b-template3-container .cxb-b2b-breadcrumbs {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.cxb-b2b-template2-banner img,
.cxb-b2b-template3-banner img,
.cxb-b2b-single-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive adjustments for full-width banners */
@media (max-width: 768px) {
    .cxb-b2b-template1-banner,
    .cxb-b2b-template2-banner,
    .cxb-b2b-template3-banner,
    .cxb-b2b-single-banner {
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Elementor shortcode banner styles */
.cxb-b2b-banner-shortcode {
    margin-bottom: 25px;
    border-radius: 0;
}

.cxb-b2b-template1-header {
    text-align: center;
    margin-bottom: 25px;
}

.cxb-b2b-template1-title {
    font-size: 36px;
    color: #000;
    margin-bottom: 15px;
}

.cxb-b2b-template1-description {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.cxb-b2b-template1-category-nav {
    margin-bottom: 10px;
}

.cxb-b2b-template1-category-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cxb-b2b-template1-category-item {
    position: relative;
    flex: 0 0 calc(20% - 12px); /* 5 items per row */
    max-width: 200px;
}

.cxb-b2b-template1-category-link {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa;
    border: 2px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    gap: 8px; /* 分类名称和数量之间的间距 */
    min-height: 52px; /* 保持与原来相似的高度 */
}

.cxb-b2b-template1-category-link:hover {
    background-color: var(--cxb-primary-color, #0A7AFF);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.cxb-b2b-template1-category-item.active .cxb-b2b-template1-category-link {
    background-color: var(--cxb-primary-color, #0A7AFF);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    font-weight: 600;
}

.cxb-b2b-template1-category-item.has-children .cxb-b2b-template1-category-link::after {
    content: '鈻?;
    margin-left: 5px;
    font-size: 12px;
    opacity: 0.7;
}

.cxb-b2b-template1-subcategory-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    min-width: 200px;
    white-space: nowrap;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.cxb-b2b-template1-category-item.has-children:hover .cxb-b2b-template1-subcategory-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cxb-b2b-template1-subcategory-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.cxb-b2b-template1-subcategory-menu li {
    margin: 0;
}

.cxb-b2b-template1-subcategory-menu a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    white-space: nowrap;
}

.cxb-b2b-template1-subcategory-menu a:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 50%, transparent);
    color: #ffffff;
}

/* 涓夌骇鍒嗙被鑿滃崟鏍峰紡 */
.cxb-b2b-template1-subcategory-menu li {
    position: relative;
}

.cxb-b2b-template1-thirdlevel-dropdown {
    position: absolute;
    top: 0;
    left: 100%;
    width: auto;
    min-width: 200px;
    white-space: nowrap;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    z-index: 101;
}

.cxb-b2b-template1-subcategory-menu li:hover .cxb-b2b-template1-thirdlevel-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.cxb-b2b-template1-thirdlevel-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.cxb-b2b-template1-thirdlevel-menu a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 13px;
    white-space: nowrap;
}

.cxb-b2b-template1-thirdlevel-menu a:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 50%, transparent);
    color: #ffffff;
}

.cxb-b2b-page-background-wrapper .category-name {
    display: inline;
    font-size: 16px;
    font-weight: 500;
}

/* 模板1分类导航中的分类名称样式 */
.cxb-b2b-template1-category-link .category-name {
    display: inline;
    font-size: clamp(10px, 14px, 16px);
    line-height: 1.3;
    vertical-align: middle;
    flex-shrink: 1;
    min-width: 0; /* 允许文本在flex容器中截断 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxb-b2b-page-background-wrapper .category-count {
    display: inline;
    font-size: 14px;
    color: #666;
    font-weight: normal;
    line-height: 1.3;
    flex-shrink: 0; /* 数量文字不收缩 */
}

.cxb-b2b-page-background-wrapper .subcategory-count {
    display: inline;
    font-size: 13px;
    color: #888;
    font-weight: normal;
    line-height: 1.3;
    flex-shrink: 0; /* 数量文字不收缩 */
}

.cxb-b2b-template1-category-link:hover .category-count {
    color: rgba(255, 255, 255, 0.8);
}



/* Responsive adjustments for Template 1 */
@media (max-width: 1200px) {
    .cxb-b2b-template1-category-item {
        flex: 0 0 calc(25% - 12px); /* 4 items per row */
    }
}

@media (max-width: 992px) {
    .cxb-b2b-template1-category-item {
        flex: 0 0 calc(33.33% - 12px); /* 3 items per row */
    }
}

@media (max-width: 768px) {
    .cxb-b2b-template1-title {
        font-size: 28px;
        color: #000;
    }
    
    .cxb-b2b-template1-description {
        font-size: 16px;
    }
    
    .cxb-b2b-template1-category-item {
        flex: 0 0 calc(50% - 12px); /* 2 items per row */
    }
    
    .cxb-b2b-template1-subcategory-dropdown {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background-color: transparent;
        margin-top: 10px;
    }
    
    .cxb-b2b-template1-category-item.has-children .cxb-b2b-template1-category-link::after {
        display: none;
    }
    
    .cxb-b2b-template1-category-link .category-name {
        font-size: clamp(10px, 12px, 14px);
    }
    
    .cxb-b2b-page-background-wrapper .category-count {
        font-size: 12px;
    }
    
    .cxb-b2b-page-background-wrapper .subcategory-count {
        font-size: 11px;
    }
    
    /* 在平板/手机端也可考虑隐藏分类导航以节省空间 */
    /* .cxb-b2b-template1-category-nav {
        display: none !important;
    } */
}

@media (max-width: 480px) {
    .cxb-b2b-template1-category-item {
        flex: 0 0 100%; /* 1 item per row */
    }
    
    .cxb-b2b-template1-banner {
        height: 150px !important;
    }
    
    .cxb-b2b-template1-category-link .category-name {
        font-size: clamp(10px, 11px, 12px);
    }
    
    .cxb-b2b-page-background-wrapper .category-count {
        font-size: 11px;
    }
    
    .cxb-b2b-page-background-wrapper .subcategory-count {
        font-size: 10px;
    }
    
    /* 在手机端隐藏分类导航以节省屏幕空间 */
    .cxb-b2b-template1-category-nav {
        display: none !important;
    }
}

/* Template 2 Styles - Left Categories + Products Grid */
.cxb-b2b-template2-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.cxb-b2b-template2-layout {
    display: flex;
    gap: 40px;
    margin-top: 10px;
}

.cxb-b2b-template2-sidebar {
    /* Uses common template sidebar styles from line 2777-2782 */
}

.cxb-b2b-template2-sidebar-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cxb-primary-color, #0A7AFF);
}

.cxb-b2b-template2-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cxb-b2b-template2-category-list.level-0 {
    margin-left: 0;
}

.cxb-b2b-template2-category-list.child-level {
    margin-left: 20px;
    margin-top: 5px;
    max-height: 0;
    overflow: visible;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.cxb-b2b-template2-category-item.has-children:not(.collapsed) .child-level {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
}

.cxb-b2b-template2-category-item {
    margin-bottom: 8px;
}

.cxb-b2b-template2-category-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.cxb-b2b-template2-category-link:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 50%, transparent);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(10, 122, 255, 0.15);
}

.cxb-b2b-template2-category-item.level-0.active .cxb-b2b-template2-category-link {
    background-color: var(--cxb-primary-color, #0A7AFF);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    font-weight: 600;
}

.cxb-b2b-template2-category-item.level-1.active .cxb-b2b-template2-category-link,
.cxb-b2b-template2-category-item.level-2.active .cxb-b2b-template2-category-link,
.cxb-b2b-template2-category-item.level-3.active .cxb-b2b-template2-category-link {
    background-color: var(--cxb-primary-color, #0A7AFF);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    font-weight: 600;
}

.cxb-b2b-template2-category-item.level-0 .cxb-b2b-template2-category-link {
    font-weight: 500;
    border-left: 3px solid var(--cxb-primary-color, #0A7AFF);
}

.cxb-b2b-template2-category-item.level-1 .cxb-b2b-template2-category-link {
    border-left: 3px solid #4CAF50;
}

.cxb-b2b-template2-category-item.level-2 .cxb-b2b-template2-category-link {
    border-left: 3px solid #FF9800;
}

.cxb-b2b-template2-category-item.level-3 .cxb-b2b-template2-category-link {
    border-left: 3px solid #9C27B0;
}

.cxb-b2b-page-background-wrapper .category-indent {
    color: #999;
    font-size: 12px;
}

.cxb-b2b-page-background-wrapper .category-name {
    flex-grow: 1;
    font-size: 15px;
}

.cxb-b2b-page-background-wrapper .category-count {
    font-size: 13px;
    color: #666;
    margin-left: 8px;
    font-weight: normal;
}

.cxb-b2b-template2-category-item.level-0.active .category-count {
    color: rgba(255, 255, 255, 0.9);
}

.cxb-b2b-template2-category-item.level-1.active .category-count,
.cxb-b2b-template2-category-item.level-2.active .category-count,
.cxb-b2b-template2-category-item.level-3.active .category-count {
    color: rgba(255, 255, 255, 0.9);
}

.cxb-b2b-page-background-wrapper .category-toggle {
    font-size: 22px;
    font-weight: bold;
    margin-left: 8px;
    color: #999;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, color 0.2s ease;
    cursor: pointer;
    position: relative;
}

.cxb-b2b-page-background-wrapper .category-toggle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: 1;
}

.cxb-b2b-page-background-wrapper .category-toggle:hover {
    color: var(--cxb-primary-color, #0A7AFF);
}

.cxb-b2b-template2-category-item.has-children.collapsed .category-toggle,
.cxb-b2b-template3-category-item.has-children.collapsed .category-toggle {
    transform: rotate(0deg);
}

.cxb-b2b-template2-category-item.has-children:not(.collapsed) .category-toggle,
.cxb-b2b-template3-category-item.has-children:not(.collapsed) .category-toggle {
    transform: rotate(45deg);
}

.cxb-b2b-template2-collapse-notice {
    margin-top: 20px;
    padding: 10px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 6px;
    font-size: 13px;
    color: #0066cc;
}

.cxb-b2b-template2-content {
    /* Uses common template content styles from line 2784-2789 */
}

.cxb-b2b-template2-header {
    margin-bottom: 40px;
}

.cxb-b2b-template2-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
}

.cxb-b2b-template2-description {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--cxb-primary-color, #0A7AFF);
}

.cxb-b2b-no-categories {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 20px;
}

.cxb-b2b-child-categories {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.cxb-b2b-child-categories h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.cxb-b2b-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cxb-b2b-category-link {
    display: inline-block;
    padding: 8px 15px;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cxb-b2b-category-link:hover {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    border-color: var(--cxb-primary-color, #0A7AFF);
}

@media (max-width: 768px) {
    .cxb-b2b-child-categories h3 {
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 10px;
    }
    .cxb-b2b-category-link {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Responsive adjustments for Template 2 */
@media (max-width: 992px) {
    .cxb-b2b-template2-layout {
        flex-direction: column;
        gap: 30px;
    }
    
    .cxb-b2b-template2-sidebar {
        flex: 1;
        max-width: 100%;
        order: 2;
    }
    
    .cxb-b2b-template2-content {
        flex: 1;
        max-width: 100%;
        order: 1;
    }
    
    .cxb-b2b-template2-title {
        font-size: 32px;
    }
    
    .cxb-b2b-template2-description {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .cxb-b2b-template2-title {
        font-size: 28px;
    }
    
    .cxb-b2b-template2-description {
        font-size: 15px;
        padding: 15px;
    }
    
    .cxb-b2b-template2-sidebar {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .cxb-b2b-template2-title {
        font-size: 24px;
    }
    
    .cxb-b2b-template2-description {
        font-size: 14px;
    }
    
    .cxb-b2b-template2-category-link {
        padding: 10px;
        font-size: 14px;
    }
    
    .cxb-b2b-page-background-wrapper .category-name {
        font-size: 14px;
    }
    
    .cxb-b2b-page-background-wrapper .category-count {
        font-size: 12px;
    }
}

/* Template 3 Styles - Left Categories + Product List (Folder View) */
.cxb-b2b-template3-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.cxb-b2b-template3-layout {
    display: flex;
    gap: 40px;
    margin-top: 10px;
}

.cxb-b2b-template3-sidebar {
    /* Uses common template sidebar styles from line 2777-2782 */
}

.cxb-b2b-template3-sidebar-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cxb-primary-color, #0A7AFF);
}

/* Template 3 uses same category styles as Template 2 */
.cxb-b2b-template3-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cxb-b2b-template3-category-list.level-0 {
    margin-left: 0;
}

.cxb-b2b-template3-category-list.child-level {
    margin-left: 20px;
    margin-top: 5px;
    max-height: 0;
    overflow: visible;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.cxb-b2b-template3-category-item.has-children:not(.collapsed) .child-level {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
}

.cxb-b2b-template3-category-item {
    margin-bottom: 8px;
}

.cxb-b2b-template3-category-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.cxb-b2b-template3-category-link:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 50%, transparent);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(10, 122, 255, 0.15);
}

.cxb-b2b-template3-category-item.level-0.active .cxb-b2b-template3-category-link {
    background-color: var(--cxb-primary-color, #0A7AFF);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    font-weight: 600;
}

.cxb-b2b-template3-category-item.level-1.active .cxb-b2b-template3-category-link,
.cxb-b2b-template3-category-item.level-2.active .cxb-b2b-template3-category-link,
.cxb-b2b-template3-category-item.level-3.active .cxb-b2b-template3-category-link {
    background-color: var(--cxb-primary-color, #0A7AFF);
    border-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    font-weight: 600;
}

.cxb-b2b-template3-category-item.level-0.active .category-count {
    color: rgba(255, 255, 255, 0.9);
}

.cxb-b2b-template3-category-item.level-1.active .category-count,
.cxb-b2b-template3-category-item.level-2.active .category-count,
.cxb-b2b-template3-category-item.level-3.active .category-count {
    color: rgba(255, 255, 255, 0.9);
}

.cxb-b2b-template3-category-item.level-0 .cxb-b2b-template3-category-link {
    font-weight: 500;
    border-left: 3px solid var(--cxb-primary-color, #0A7AFF);
}

.cxb-b2b-template3-category-item.level-1 .cxb-b2b-template3-category-link {
    border-left: 3px solid #4CAF50;
}

.cxb-b2b-template3-category-item.level-2 .cxb-b2b-template3-category-link {
    border-left: 3px solid #FF9800;
}

.cxb-b2b-template3-category-item.level-3 .cxb-b2b-template3-category-link {
    border-left: 3px solid #9C27B0;
}

.cxb-b2b-template3-content {
    /* Uses common template content styles from line 2784-2789 */
}

.cxb-b2b-template3-header {
    margin-bottom: 40px;
}

.cxb-b2b-template3-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
}

.cxb-b2b-template3-description {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--cxb-primary-color, #0A7AFF);
}

/* Product list layout for template 3 */
.cxb-b2b-template3-product-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.cxb-b2b-template3-product-card {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
}

.cxb-b2b-template3-product-card:hover {
    border-color: var(--cxb-primary-color, #0A7AFF);
    box-shadow: 0 10px 30px rgba(10, 122, 255, 0.15);
    transform: translateY(-5px);
}

.cxb-b2b-template3-product-card-inner {
    display: flex;
    align-items: stretch;
    min-height: 200px;
}

.cxb-b2b-template3-product-image {
    flex: 1 0 auto;
    overflow: hidden;
    position: relative;
    background-color: #f8f9fa;
    aspect-ratio: 1 / 1;
}

.cxb-b2b-template3-product-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.cxb-b2b-template3-product-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-image-link img {
    transform: scale(1.05);
}

/* 第二张图片切换效果 - 模板3 */
.cxb-b2b-template3-product-image.has-second-image .product-image-primary {
    transition: opacity 0.3s ease;
}

.cxb-b2b-template3-product-image.has-second-image .product-image-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* 悬停时切换图片（淡入淡出效果） */
.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-image.has-second-image .product-image-primary {
    opacity: 0;
}

.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-image.has-second-image .product-image-secondary {
    opacity: 1;
}

/* 当悬停效果为切换时，禁用放大效果 */
.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-image.has-second-image img {
    transform: none;
}

/* 确保模板3内部交互元素在覆盖链接之上 */
.cxb-b2b-template3-product-title a,
.cxb-b2b-template3-product-image-link,
.cxb-b2b-template3-product-actions,
.cxb-b2b-template3-product-actions a,
.cxb-b2b-template3-product-actions button,
.cxb-b2b-template3-email-inquiry-btn,
.cxb-b2b-email-inquiry-button,
.cxb-b2b-view-details-button {
    position: relative;
    z-index: 2;
}

.cxb-b2b-template3-product-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #e9ecef;
    color: #6c757d;
    font-size: 16px;
    font-style: italic;
}

.cxb-b2b-template3-product-info {
    flex: 2 1 auto;
    padding: 15px 20px 10px 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: visible;
}

.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-info {
    background-color: #f8f9fa;
}

.cxb-b2b-template3-product-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 允许内容收缩 */
    overflow: visible;
}

.cxb-b2b-template3-product-header {
    margin-bottom: 10px;
}

.cxb-b2b-template3-product-title {
    font-size: 22px;
    color: #333;
    margin: 0 0 15px 0;
}

.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-title a {
    color: var(--cxb-primary-color, #0A7AFF);
}

.cxb-b2b-template3-product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cxb-b2b-template3-product-title a:hover {
    text-decoration: underline;
}

.cxb-b2b-template3-product-excerpt {
    margin-bottom: 8px;
}

.cxb-b2b-template3-product-excerpt p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* 自适应文本溢出 - 多行截断 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(15px * 1.6 * 3); /* 3行高度作为备选方案 */
}

.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-excerpt p {
    color: #555;
}

/* 产品特性容器 */
.cxb-b2b-template3-product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

/* 产品SKU样式 */
.cxb-b2b-template3-product-sku {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    background-color: #f5f5f5 !important;
    border-radius: 4px;
    padding: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxb-b2b-template3-sku-label {
    font-weight: 500;
    margin-right: 4px;
}

.cxb-b2b-template3-sku-value {
    color: #333;
    font-weight: 500;
}

/* 产品属性样式 */
.cxb-b2b-template3-product-specs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cxb-b2b-template3-product-spec {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    background-color: #f5f5f5 !important;
    border-radius: 4px;
    padding: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxb-b2b-template3-spec-value {
    color: #333;
    font-weight: 500;
}

/* 全局产品卡片特性容器 */
.cxb-b2b-product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
    max-width: 100%;
    overflow: hidden;
}

.cxb-b2b-product-sku {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    background-color: #f5f5f5 !important;
    border-radius: 4px;
    padding: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxb-b2b-product-specs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cxb-b2b-product-spec {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    background-color: #f5f5f5 !important;
    border-radius: 4px;
    padding: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 确保产品详情页规格表格中的值单元格保持白色背景 */
.cxb-b2b-product-single-container .cxb-b2b-spec-value {
    background-color: white !important;
}

/* 确保产品详情页规格表格中的名称单元格保持原有背景 */
.cxb-b2b-product-single-container .cxb-b2b-spec-name {
    background-color: #f8f9fa !important;
}

.cxb-b2b-spec-value {
    color: #333;
    font-weight: 500;
}

/* 确保产品卡片中的规格值透明，只显示父元素背景 */
.cxb-b2b-product-card .cxb-b2b-spec-value {
    background-color: transparent !important;
    padding: 0 !important;
}

.cxb-b2b-template3-product-meta {
    margin-bottom: 8px;
    font-size: 14px;
}

.cxb-b2b-template3-product-category {
    color: #666;
    display: inline-flex;
    align-items: center;
}

.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-category {
    color: #555;
}

.cxb-b2b-template3-product-category .category-link {
    color: var(--cxb-primary-color, #0A7AFF);
    text-decoration: none;
    margin-left: 5px;
    font-weight: 500;
}

.cxb-b2b-template3-product-category .category-link:hover {
    text-decoration: underline;
}

.cxb-b2b-template3-product-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.cxb-b2b-add-to-quote-button {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 9px 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    width: auto;
    min-width: min-content;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxb-b2b-add-to-quote-button:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* 额外按钮样式 */
.cxb-b2b-extra-button {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
}

.cxb-b2b-extra-button:hover {
    background-color: #085FCC;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.cxb-b2b-extra-button-wrapper {
    display: inline-block;
}

/* Chat Now button on product detail page — icon enlarged, white,
   tighter gap, with darkened hover state                          */
.cxb-b2b-extra-button-chat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cxb-b2b-extra-button-chat .cxb-b2b-button-icon {
    width: 20px;
    height: 20px;
    margin-right: 2px;
    filter: brightness(0) invert(1);
}

.cxb-b2b-extra-button-chat:hover {
    background-color: #064ea5 !important;
    filter: none;
}

/* Page-background-wrapper override for chat button icon              */
.cxb-b2b-page-background-wrapper .cxb-b2b-extra-button-chat .cxb-b2b-button-icon {
    width: 20px;
    height: 20px;
    margin-right: 2px;
    filter: brightness(0) invert(1);
}

.cxb-b2b-button-icon {
    font-size: 18px;
    font-weight: bold;
}

.cxb-b2b-view-details-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 8px;
    background-color: var(--cxb-primary-color, #0A7AFF);
    border: 1px solid var(--cxb-primary-color, #0A7AFF);
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cxb-b2b-email-inquiry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 8px;
    background-color: var(--cxb-primary-color, #0A7AFF);
    border: 1px solid var(--cxb-primary-color, #0A7AFF);
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cxb-b2b-email-inquiry-button:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000);
    border-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cxb-b2b-view-details-button:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000);
    border-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments for Template 3 */
@media (max-width: 992px) {
    .cxb-b2b-template3-layout {
        flex-direction: column;
        gap: 30px;
    }
    
    .cxb-b2b-template3-sidebar {
        flex: 1;
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .cxb-b2b-template3-content {
        flex: 1;
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .cxb-b2b-template3-title {
        font-size: 32px;
    }
    
    .cxb-b2b-template3-description {
        font-size: 16px;
    }
    
    .cxb-b2b-template3-product-card-inner {
        flex-direction: column;
    }
    
    .cxb-b2b-template3-product-image {
        flex: 1;
        max-width: 100%;
        aspect-ratio: 1 / 1;
    }
    
    .cxb-b2b-template3-product-info {
        flex: 1;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .cxb-b2b-template3-title {
        font-size: 28px;
    }
    
    .cxb-b2b-template3-description {
        font-size: 15px;
        padding: 15px;
    }
    
    .cxb-b2b-template3-sidebar {
        padding: 20px;
    }
    
    .cxb-b2b-template3-product-title {
        font-size: 20px;
    }
    
    .cxb-b2b-template3-product-sku,
    .cxb-b2b-template3-product-specs {
        font-size: 13px;
    }
    
    .cxb-b2b-template3-product-spec {
        font-size: 12px;
        padding: 3px;
    }

    .cxb-b2b-template3-product-sku {
        padding: 3px;
    }

    .cxb-b2b-template3-product-footer {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .cxb-b2b-template3-title {
        font-size: 24px;
    }
    
    .cxb-b2b-template3-description {
        font-size: 14px;
    }
    
    .cxb-b2b-template3-category-link {
        padding: 10px;
        font-size: 14px;
    }
    
    .cxb-b2b-page-background-wrapper .category-name {
        font-size: 14px;
    }
    
    .cxb-b2b-page-background-wrapper .category-count {
        font-size: 12px;
    }
    
    .cxb-b2b-template3-product-card-inner {
        min-height: auto;
    }
    
    .cxb-b2b-template3-product-info {
        padding: 20px;
    }
    
    .cxb-b2b-template3-product-title {
        font-size: 18px;
    }
    
    .cxb-b2b-template3-product-excerpt p {
        font-size: 14px;
        /* 移动端自适应文本溢出 - 多行截断 */
        -webkit-line-clamp: 3; /* 保持3行 */
        max-height: calc(14px * 1.6 * 3); /* 基于移动端字体大小 */
    }
    
    .cxb-b2b-template3-product-sku,
    .cxb-b2b-template3-product-specs {
        font-size: 12px;
    }
    
    .cxb-b2b-template3-product-spec {
        font-size: 11px;
        padding: 2px;
    }

    .cxb-b2b-template3-product-sku {
        padding: 2px;
    }

    .cxb-b2b-template3-product-footer .cxb-b2b-add-to-quote-button,
    .cxb-b2b-template3-product-footer .cxb-b2b-view-details-button,
    .cxb-b2b-template3-product-footer .cxb-b2b-email-inquiry-button {
        padding: 8px 8px;
        font-size: 14px;
        justify-content: center;
    }
    
    .cxb-b2b-template3-product-footer {
        flex-direction: column;
        align-items: center;
    }
    
    .cxb-b2b-template3-product-footer .cxb-b2b-add-to-quote-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto;
    }
    
    .cxb-b2b-template3-product-footer .cxb-b2b-email-inquiry-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto;
    }
    
    .cxb-b2b-template3-product-footer .cxb-b2b-view-details-button {
        display: none !important;
    }
}

/* ==========================================================================
   Template 3 - Video play icon inside image container (bottom-left)
   ========================================================================== */
.cxb-b2b-template3-product-image .cxb-b2b-video-play-icon {
    position: absolute;
    bottom: 5px;
    left: 5px;
    top: auto;
    width: 20px;
    height: 20px;
    z-index: 5;
    pointer-events: none;
    display: block;
}

/* Prevent template3 image rules from inflating the play icon */
.cxb-b2b-template3-product-image .cxb-b2b-video-play-icon {
    object-fit: unset;
    max-width: 20px;
    transition: none;
}

.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-image .cxb-b2b-video-play-icon {
    transform: none;
}

/* ==========================================================================
   Template 3 - Chat button inside image container (top-right)
   ========================================================================== */
.cxb-b2b-template3-product-image .cxb-b2b-chat-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    line-height: 0;
    min-width: auto;
    min-height: auto;
    box-shadow: none;
}

.cxb-b2b-template3-product-image .cxb-b2b-chat-btn:hover {
    transform: scale(1.15);
}

.cxb-b2b-template3-product-image .cxb-b2b-chat-btn img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: unset;
    max-width: 30px;
}

/* ==========================================================================
   Template 3 - Consistent button sizes in footer
   ========================================================================== */
/* Desktop: View Details and Email Inquiry same dimensions */
.cxb-b2b-template3-product-footer .cxb-b2b-view-details-button,
.cxb-b2b-template3-product-footer .cxb-b2b-email-inquiry-button {
    padding: 9px 12px;
    font-size: 15px;
    font-weight: 500;
    min-width: auto;
    box-sizing: border-box;
}

/* Add to Quote button consistent with Email Inquiry in template3 footer */
.cxb-b2b-template3-product-footer .cxb-b2b-add-to-quote-button {
    padding: 9px 12px;
    font-size: 15px;
    font-weight: 500;
    box-sizing: border-box;
}

/* Mobile: all footer buttons same dimensions */
@media (max-width: 480px) {
    .cxb-b2b-template3-product-footer .cxb-b2b-add-to-quote-button,
    .cxb-b2b-template3-product-footer .cxb-b2b-email-inquiry-button {
        padding: 8px 8px;
        font-size: 14px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Sidebar Styles
   ========================================================================== */
.cxb-b2b-sidebar {
    width: 300px;
    margin-bottom: 40px;
}

.cxb-b2b-sidebar-left {
    float: left;
    margin-right: 40px;
}

.cxb-b2b-sidebar-right {
    float: right;
    margin-left: 40px;
}

.cxb-b2b-sidebar-inner {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.cxb-b2b-sidebar-module {
    margin-bottom: 25px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.cxb-b2b-sidebar-module:last-child {
    margin-bottom: 0;
}

.cxb-b2b-sidebar-module-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.cxb-b2b-sidebar-module-content {
    font-size: 14px;
    color: #666666;
}

/* Categories Module */
.cxb-b2b-sidebar-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cxb-b2b-sidebar-category-item {
    margin-bottom: 10px;
}

.cxb-b2b-sidebar-category-item:last-child {
    margin-bottom: 0;
}

.cxb-b2b-sidebar-category-link {
    display: flex;
    align-items: center;
    color: #555555;
    text-decoration: none;
    padding: 8px 0;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.cxb-b2b-sidebar-category-link:hover {
    color: #ffffff;
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 50%, transparent);
    padding-left: 10px;
}

.cxb-b2b-sidebar-category-item.active .cxb-b2b-sidebar-category-link {
    color: #ffffff;
    font-weight: 600;
    background-color: var(--cxb-primary-color, #0A7AFF);
    padding-left: 10px;
}

.cxb-b2b-page-background-wrapper .category-name {
    flex: 1;
}

.cxb-b2b-page-background-wrapper .category-count {
    font-size: 12px;
    color: #999999;
    margin-left: 8px;
}

.cxb-b2b-page-background-wrapper .category-toggle {
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #999999;
    transition: transform 0.3s ease;
}

.cxb-b2b-sidebar-category-item.has-children .category-toggle {
    cursor: pointer;
}

.cxb-b2b-sidebar-category-item.has-children.expanded .category-toggle {
    transform: rotate(45deg);
}

.cxb-b2b-page-background-wrapper .child-level {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    margin-left: 15px;
    border-left: 1px solid #f0f0f0;
    padding-left: 10px;
}

.cxb-b2b-sidebar-category-item.expanded .child-level {
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
}

.cxb-b2b-page-background-wrapper .child-level .cxb-b2b-sidebar-category-link {
    font-size: 13px;
}

.cxb-b2b-page-background-wrapper .child-level .category-count {
    font-size: 11px;
}

/* Category Style 2: 表格式 - 垂直抽屉式展开（修复版） */
.cxb-b2b-sidebar-category-list.table {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.cxb-b2b-sidebar-category-item.table {
    border-bottom: 1px solid #eaeaea;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 50px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.cxb-b2b-sidebar-category-item.table:last-child {
    border-bottom: none;
}

.cxb-b2b-sidebar-category-link.table {
    display: block;
    padding: 15px 50px 15px 20px; /* 增加右侧padding给箭头留空间 */
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
    box-sizing: border-box;
    height: 100%;
    min-height: 50px;
}

.cxb-b2b-sidebar-category-link.table:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 10%, transparent);
}

.cxb-b2b-sidebar-category-item.table.active .cxb-b2b-sidebar-category-link.table {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 15%, transparent);
    color: var(--cxb-primary-color, #0A7AFF);
    font-weight: 600;
}

/* Table style specific category count */
.cxb-b2b-sidebar-category-link.table .category-count {
    margin-right: 8px;
    margin-left: 8px;
    white-space: nowrap;
    display: inline-block;
    font-size: 12px;
    color: #888;
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
}

.cxb-b2b-sidebar-category-link.table:hover .category-count {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 20%, transparent);
    color: #666;
}

/* 活跃状态的计数样式 */
.cxb-b2b-sidebar-category-item.table.active .cxb-b2b-sidebar-category-link.table .category-count {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 20%, transparent);
    color: var(--cxb-primary-color, #0A7AFF);
}

/* 修复表格式分类子菜单展开空白问题 */

/* 修改子菜单容器的初始状态 */
.cxb-b2b-sidebar-category-list.table .child-level {
    display: block;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    background-color: #f8f9fa;
    transition: 
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
        opacity 0.3s ease, 
        visibility 0s linear 0.3s; /* 延迟隐藏以允许动画完成 */
}

/* 展开状态 */
.cxb-b2b-sidebar-category-item.table.has-children.expanded .child-level {
    max-height: 2000px; /* 足够大的值容纳所有子项 */
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transition: 
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
        opacity 0.3s ease, 
        visibility 0s linear 0s; /* 立即可见 */
}

/* 移除hover延迟类相关的样式 */
.cxb-b2b-sidebar-category-item.table.has-children.hover-delay .child-level {
    /* 可以删除这个规则或保持与expanded相同 */
    max-height: 2000px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transition: 
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
        opacity 0.3s ease, 
        visibility 0s linear 0s;
}

/* 桌面端点击展开规则 */
@media (min-width: 769px) {
    /* 只保留点击展开状态 */
    .cxb-b2b-sidebar-category-item.table.has-children.expanded .child-level {
        max-height: 2000px;
        opacity: 1;
        visibility: visible;
    }
}

/* 修复子菜单项的高度和显示问题 */
.cxb-b2b-sidebar-category-list.table .child-level .cxb-b2b-sidebar-category-link.table {
    display: flex;
    align-items: center;
    padding: 1px 20px 1px 35px;
    text-decoration: none;
    color: #555;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    transition: all 0.2s ease;
    position: relative;
    min-height: 30px;
    height: auto; /* 确保高度自适应 */
    opacity: 1 !important; /* 强制显示 */
    visibility: visible !important; /* 强制显示 */
}

/* 移除子分类项之间的边框 */
.cxb-b2b-sidebar-category-list.table .child-level .cxb-b2b-sidebar-category-item.table {
    border-bottom: none;
}

/* 修复嵌套子菜单的显示 */
.cxb-b2b-sidebar-category-list.table .child-level .child-level {
    margin-left: 0;
    border-left: 1px solid #e0e0e0;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

.cxb-b2b-sidebar-category-list.table .child-level .cxb-b2b-sidebar-category-item.table.has-children.expanded .child-level {
    max-height: 2000px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

/* 修复箭头过渡动画 */
.cxb-b2b-sidebar-category-item.table.has-children .toggle-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    color: #666;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    background-color: transparent;
    border: none;
}

/* 修复箭头图标 */
.cxb-b2b-page-background-wrapper .toggle-arrow::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: #666;
    transform: rotate(135deg);
    transition: all 0.3s ease;
}

/* 展开状态箭头 */
.cxb-b2b-sidebar-category-item.table.has-children.expanded .toggle-arrow::before {
    transform: rotate(-45deg);
    border-color: var(--cxb-primary-color, #0A7AFF);
}

/* 确保子分类前导符号正常显示 */
.cxb-b2b-sidebar-category-list.table .child-level .cxb-b2b-sidebar-category-link.table::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 5px;
    height: 5px;
    background-color: #999;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background-color 0.2s ease;
    opacity: 1; /* 确保可见 */
}

/* 移动端响应式调整 */
@media (max-width: 768px) {
    .cxb-b2b-sidebar-category-link.table {
        padding: 14px 45px 14px 15px;
    }
    
    .cxb-b2b-sidebar-category-list.table .child-level {
        transition: 
            max-height 0.3s ease, 
            opacity 0.3s ease, 
            visibility 0s linear 0.3s;
    }
    
    .cxb-b2b-sidebar-category-item.table.has-children.expanded .child-level {
        transition: 
            max-height 0.3s ease, 
            opacity 0.3s ease, 
            visibility 0s linear 0s;
    }
    
    /* 移动端取消悬停效果，只保留点击展开 */
    .cxb-b2b-sidebar-category-item.table.has-children:hover .child-level {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
    }
    
    /* 子菜单链接移动端调整 */
    .cxb-b2b-sidebar-category-list.table .child-level .cxb-b2b-sidebar-category-link.table {
        padding: 1px 15px 1px 30px;
    }
    
    /* 子分类前导符号调整 */
    .cxb-b2b-sidebar-category-list.table .child-level .cxb-b2b-sidebar-category-link.table::before {
        left: 15px;
        width: 4px;
        height: 4px;
    }
}


/* ---- Table style: categories module adjustments ---- */
/* Remove inner padding from the module; keep padding on title only */
.cxb-b2b-sidebar-module-categories .cxb-b2b-sidebar-categories-table {
    margin: -25px; /* Counteract the module's 25px padding */
    margin-top: 0;
}

/* ---- Amazon style: categories module adjustments ---- */
/* Remove left/right padding so parent categories align flush with sidebar edges */
.cxb-b2b-sidebar-module-categories .cxb-b2b-sidebar-categories-amazon {
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: -25px;
}
/* Remove separator line below title when Amazon style is used */
.cxb-b2b-sidebar-module-categories:has(.cxb-b2b-sidebar-categories-amazon) .cxb-b2b-sidebar-module-title {
    border-bottom: none;
    margin-bottom: 10px;
    padding-bottom: 0;
}
.cxb-b2b-sidebar-module-categories .cxb-b2b-sidebar-categories-table .cxb-b2b-sidebar-category-list.table {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
}
/* Remove separator line below title when table style is used */
.cxb-b2b-sidebar-module-categories:has(.cxb-b2b-sidebar-categories-table) .cxb-b2b-sidebar-module-title {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 15px;
}
/* Remove vertical borders from category items, keep only horizontal */
.cxb-b2b-sidebar-categories-table .cxb-b2b-sidebar-category-item.table {
    border-left: none;
    border-right: none;
}
/* First item: add top horizontal line */
.cxb-b2b-sidebar-categories-table .cxb-b2b-sidebar-category-item.table:first-child {
    border-top: 1px solid #eaeaea;
}
/* Last item: add bottom border to close the list */
.cxb-b2b-sidebar-categories-table .cxb-b2b-sidebar-category-item.table:last-child {
    border-bottom: none;
}
/* Child-level items also no vertical borders */
.cxb-b2b-sidebar-categories-table .cxb-b2b-sidebar-category-list.table .child-level {
    border-left: none;
    border-right: none;
}

.cxb-b2b-sidebar-category-list.amazon {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 0;
    overflow: visible;
}

.cxb-b2b-sidebar-category-item.amazon {
    position: relative;
    margin: 0;
}

.cxb-b2b-sidebar-category-link.amazon {
    padding: 10px 45px 10px 20px;
    display: block;
    color: #111827;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Amazon style: allow long category names to wrap (multi-line), matching Table style */
.cxb-b2b-sidebar-category-link.amazon .category-name,
.cxb-b2b-sidebar-category-link.amazon-link .category-name {
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
    min-width: 0;
    display: inline;
}
/* Constrain the link itself — block layout to allow text wrapping */
.cxb-b2b-sidebar-category-link.amazon-link {
    display: block;
    overflow: visible;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 45px 10px 20px;
    color: #111827;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    line-height: 1.4;
}
.cxb-b2b-sidebar-category-link.amazon-link:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 8%, transparent);
    color: #2563eb;
}

.cxb-b2b-sidebar-category-link.amazon:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 8%, transparent);
    color: #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.cxb-b2b-sidebar-category-item.amazon.active .cxb-b2b-sidebar-category-link.amazon {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 15%, transparent);
    color: var(--cxb-primary-color, #0A7AFF);
    font-weight: 600;
}

/* 亚马逊样式箭头优化 - 使用CSS绘制三角形箭头 */
.cxb-b2b-sidebar-category-item.amazon.has-children .amazon-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 12px;
    z-index: 10;
}

/* 使用::before伪元素绘制简洁三角形箭头 */
.cxb-b2b-sidebar-category-item.amazon.has-children .amazon-arrow::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-width: 3px 3px 0 0;
    border-color: #9ca3af;
    transform: rotate(45deg); /* 向右的箭头 */
    transition: all 0.3s ease;
}

/* 悬停状态 - 箭头颜色变化 */
.cxb-b2b-sidebar-category-link.amazon:hover .amazon-arrow::before {
    border-color: #2563eb;
}

/* 有子分类的项 - 添加指示 */
.cxb-b2b-sidebar-category-item.amazon.has-children .cxb-b2b-sidebar-category-link.amazon {
    padding-right: 45px; /* 为箭头留更多空间 */
}

/* 悬停时箭头旋转向下 */
.cxb-b2b-sidebar-category-item.amazon.has-children:hover .amazon-arrow::before {
    border-color: #2563eb;
    transform: rotate(135deg); /* 悬停时箭头向下 */
}

/* 子菜单展开时的箭头状态 */
.cxb-b2b-sidebar-category-item.amazon.has-children.expanded .amazon-arrow::before {
    transform: rotate(135deg); /* 箭头向下 */
    border-color: var(--cxb-primary-color, #0A7AFF);
}

.cxb-b2b-sidebar-category-submenu.amazon {
    position: absolute;
    left: 100%;
    right: auto;
    top: -8px;
    min-width: 200px;
    width: auto;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1000;
    padding: 16px;
}

/* 右侧侧边栏时，子菜单向左弹出 */
.cxb-b2b-sidebar-right .cxb-b2b-sidebar-category-submenu.amazon {
    left: auto;
    right: 100%;
    transform: translateX(15px);
}

.cxb-b2b-sidebar-right .cxb-b2b-sidebar-category-item.amazon.has-children:hover > .cxb-b2b-sidebar-category-submenu.amazon {
    transform: translateX(0);
}

.cxb-b2b-sidebar-category-item.amazon.has-children:hover > .cxb-b2b-sidebar-category-submenu.amazon {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Nested submenu hover - show only direct child submenu */
.cxb-b2b-sidebar-category-submenu.amazon .cxb-b2b-sidebar-category-item.amazon.has-children:hover > .cxb-b2b-sidebar-category-submenu.amazon {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.cxb-b2b-page-background-wrapper .amazon-submenu-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cxb-b2b-page-background-wrapper .amazon-subcategory {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cxb-b2b-page-background-wrapper .amazon-subcategory li {
    margin-bottom: 8px;
}

.cxb-b2b-page-background-wrapper .amazon-subcategory li:last-child {
    margin-bottom: 0;
}

.cxb-b2b-page-background-wrapper .amazon-subcategory a {
    display: block;
    padding: 6px 0;
    color: #4b5563;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: color 0.2s ease;
}

.cxb-b2b-page-background-wrapper .amazon-subcategory a:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 10%, transparent);
    color: var(--cxb-primary-color, #0A7AFF);
    text-decoration: none;
}



/* Nested submenu for Amazon style */
.cxb-b2b-sidebar-category-submenu.amazon .cxb-b2b-sidebar-category-submenu.amazon {
    left: 100%;
    top: 0;
    margin-left: 2px;
}

/* 右侧侧边栏中的嵌套子菜单也向左弹出 */
.cxb-b2b-sidebar-right .cxb-b2b-sidebar-category-submenu.amazon .cxb-b2b-sidebar-category-submenu.amazon {
    left: auto;
    right: 100%;
    transform: translateX(15px);
}

.cxb-b2b-sidebar-right .cxb-b2b-sidebar-category-submenu.amazon .cxb-b2b-sidebar-category-item.amazon.has-children:hover > .cxb-b2b-sidebar-category-submenu.amazon {
    transform: translateX(0);
}

/* Fix child-level visibility for Amazon style */
.cxb-b2b-sidebar-category-list.amazon.child-level {
    opacity: 1;
    max-height: none;
    overflow: visible;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}

/* Amazon counter style — matching Table style */
.cxb-b2b-sidebar-category-link.amazon .category-count,
.cxb-b2b-sidebar-category-link.amazon-link .category-count {
    margin-right: 8px;
    margin-left: 8px;
    white-space: nowrap;
    display: inline-block;
    font-size: 12px;
    color: #888;
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 400;
    transition: all 0.2s ease;
}

/* 悬停状态视觉反馈 */
.cxb-b2b-sidebar-category-link.amazon:hover .category-count,
.cxb-b2b-sidebar-category-link.amazon-link:hover .category-count {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 20%, transparent);
    color: #666;
}

/* 选中状态视觉反馈 */
.cxb-b2b-sidebar-category-item.amazon.active .cxb-b2b-sidebar-category-link.amazon .category-count,
.cxb-b2b-sidebar-category-item.amazon.active .cxb-b2b-sidebar-category-link.amazon-link .category-count {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 20%, transparent);
    color: var(--cxb-primary-color, #0A7AFF);
}

/* 添加分隔线样式，提高可读性 */
.cxb-b2b-sidebar-category-item.amazon:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #f3f4f6;
    z-index: 1;
}

.cxb-b2b-sidebar-category-item.amazon:last-child::after {
    display: none;
}

/* First item: add top horizontal line */
.cxb-b2b-sidebar-category-item.amazon:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background-color: #f3f4f6;
    z-index: 1;
}

@media (max-width: 768px) {
    .cxb-b2b-sidebar-category-submenu.amazon {
        position: static;
        min-width: auto;
        box-shadow: none;
        border: 1px solid #e5e7eb;
        margin-top: 8px;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
    }
    
    .cxb-b2b-sidebar-category-item.amazon.has-children:hover > .cxb-b2b-sidebar-category-submenu.amazon,
    .cxb-b2b-sidebar-category-item.amazon.has-children.expanded > .cxb-b2b-sidebar-category-submenu.amazon {
        display: block;
    }
    
    /* 移动端箭头调整 */
    .cxb-b2b-sidebar-category-item.amazon.has-children.expanded .amazon-arrow::before {
        transform: rotate(135deg);
        border-color: var(--cxb-primary-color, #0A7AFF);
    }
    
    /* Nested submenu for responsive */
    .cxb-b2b-sidebar-category-submenu.amazon .cxb-b2b-sidebar-category-item.amazon.has-children:hover > .cxb-b2b-sidebar-category-submenu.amazon,
    .cxb-b2b-sidebar-category-submenu.amazon .cxb-b2b-sidebar-category-item.amazon.has-children.expanded > .cxb-b2b-sidebar-category-submenu.amazon {
        display: block;
    }
    
    .cxb-b2b-page-background-wrapper .amazon-submenu-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Table style responsive adjustments */
    .cxb-b2b-sidebar-category-list.table .child-level .cxb-b2b-sidebar-category-link.table {
        padding-left: 30px;
    }
    
    .cxb-b2b-sidebar-category-list.table .child-level .child-level .cxb-b2b-sidebar-category-link.table {
        padding-left: 40px;
    }
    
    .cxb-b2b-sidebar-category-list.table .child-level .child-level .child-level .cxb-b2b-sidebar-category-link.table {
        padding-left: 50px;
    }
    
    /* Table style - symbol responsive adjustments */
    .cxb-b2b-sidebar-category-list.table .child-level .cxb-b2b-sidebar-category-link.table::before {
        left: 28px;
    }
    
    .cxb-b2b-sidebar-category-list.table .child-level .child-level .cxb-b2b-sidebar-category-link.table::before {
        left: 38px;
    }
    
    .cxb-b2b-sidebar-category-list.table .child-level .child-level .child-level .cxb-b2b-sidebar-category-link.table::before {
        left: 48px;
    }
}

/* Recent Products Module */
.cxb-b2b-recent-products-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cxb-b2b-recent-product-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.cxb-b2b-recent-product-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.cxb-b2b-recent-product-link {
    display: flex;
    align-items: center;
    color: #555555;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cxb-b2b-recent-product-link:hover {
    color: var(--cxb-primary-color, #0A7AFF);
}

.cxb-b2b-recent-product-image {
    flex: 0 0 120px;
    max-width: 120px;
    margin-right: 15px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #f5f5f5;
}

.cxb-b2b-recent-product-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.cxb-b2b-recent-product-link:hover .cxb-b2b-recent-product-image img {
    transform: scale(1.05);
}

.cxb-b2b-recent-product-info {
    flex: 1;
    min-width: 0;
}

.cxb-b2b-recent-product-title {
    font-size: 16px !important;
    font-weight: 600;
    color: #333333;
    margin: 0 0 8px 0;
    line-height: 1.4;
    transition: color 0.3s ease; /* 添加过渡效果 */
}

/* 添加产品链接悬停时的产品标题颜色变化 */
.cxb-b2b-recent-product-link:hover .cxb-b2b-recent-product-title {
    color: var(--cxb-primary-color, #0A7AFF) !important; /* 使用全局主色调变量 */
}

/* 可选：如果Recent Products模块中有其他需要跟随全局色的元素，也可以一并设置 */
.cxb-b2b-recent-product-link:hover .category-count,
.cxb-b2b-recent-product-link:hover .product-price {
    color: var(--cxb-primary-color, #0A7AFF);
}

/* Recent Products Slider Styles */
.cxb-b2b-recent-products-container {
    position: relative;
}

.cxb-b2b-recent-products-container.has-slider {
    max-height: 900px; /* 5涓骇鍝佺殑楂樺害锛屽鍔犱綑閲� */
    overflow: hidden;
    position: relative;
}

.cxb-b2b-recent-products-container.has-slider .cxb-b2b-recent-products-list {
    transition: transform 0.4s ease-in-out;
}

.cxb-b2b-recent-product-item.hidden-item {
    display: none;
}

.cxb-b2b-recent-products-container.has-slider .cxb-b2b-recent-product-item.hidden-item {
    display: block;
}

.cxb-b2b-recent-products-slider-controls {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.cxb-b2b-slider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #666666;
    font-size: 16px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.cxb-b2b-slider-arrow:hover {
    background-color: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
}

.cxb-b2b-slider-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f0f0f0;
}

.cxb-b2b-slider-arrow:disabled:hover {
    background-color: #f0f0f0;
    color: #999999;
    border-color: #d0d0d0;
    box-shadow: none;
    transform: none;
}

/* Responsive adjustments for slider */
@media (max-width: 768px) {
    .cxb-b2b-recent-products-container.has-slider {
        max-height: 800px;
    }
    
    .cxb-b2b-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* Elementor Module */
.cxb-b2b-sidebar-module-elementor .cxb-b2b-sidebar-module-content {
    font-size: 14px;
    line-height: 1.6;
}

/* Clearfix for sidebar layout */
.cxb-b2b-content-with-sidebar::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive Sidebar */
@media (max-width: 992px) {
    .cxb-b2b-sidebar {
        width: 250px;
    }
    
    .cxb-b2b-sidebar-left,
    .cxb-b2b-sidebar-right {
        float: none;
        margin: 0 0 40px 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .cxb-b2b-sidebar {
        width: 100%;
    }
    
    .cxb-b2b-sidebar-inner {
        padding: 20px;
    }
    
    .cxb-b2b-sidebar-module-title {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .cxb-b2b-recent-product-image {
        flex: 0 0 80px;
        max-width: 80px;
    }
    
    .cxb-b2b-recent-product-title {
        font-size: 14px !important;
    }
    
    .cxb-b2b-sidebar.cxb-b2b-sidebar-mobile-disabled {
        display: none;
    }
}

/* Content Wrappers for sidebar layouts */
.cxb-b2b-archive-content-wrapper,
.cxb-b2b-single-content-wrapper,
.cxb-b2b-taxonomy-content-wrapper {
    overflow: hidden;
    min-height: 1px;
}

.cxb-b2b-content-with-sidebar .cxb-b2b-archive-content-wrapper,
.cxb-b2b-content-with-sidebar .cxb-b2b-single-content-wrapper,
.cxb-b2b-content-with-sidebar .cxb-b2b-taxonomy-content-wrapper {
    float: left;
    width: calc(100% - 340px);
    box-sizing: border-box;
}

.cxb-b2b-sidebar-left + .cxb-b2b-archive-content-wrapper,
.cxb-b2b-sidebar-left + .cxb-b2b-single-content-wrapper,
.cxb-b2b-sidebar-left + .cxb-b2b-taxonomy-content-wrapper {
    float: right;
}

.cxb-b2b-sidebar-right + .cxb-b2b-archive-content-wrapper,
.cxb-b2b-sidebar-right + .cxb-b2b-single-content-wrapper,
.cxb-b2b-sidebar-right + .cxb-b2b-taxonomy-content-wrapper {
    float: left;
}

/* Responsive content wrapper adjustments */
@media (max-width: 992px) {
    .cxb-b2b-content-with-sidebar .cxb-b2b-archive-content-wrapper,
    .cxb-b2b-content-with-sidebar .cxb-b2b-single-content-wrapper,
    .cxb-b2b-content-with-sidebar .cxb-b2b-taxonomy-content-wrapper {
        width: calc(100% - 290px);
    }
}

@media (max-width: 768px) {
    .cxb-b2b-content-with-sidebar .cxb-b2b-archive-content-wrapper,
    .cxb-b2b-content-with-sidebar .cxb-b2b-single-content-wrapper,
    .cxb-b2b-content-with-sidebar .cxb-b2b-taxonomy-content-wrapper {
        width: 100%;
        float: none;
        margin: 0;
    }
}

/* Template layouts for sidebar positioning */
.cxb-b2b-template1-layout.has-sidebar,
.cxb-b2b-template2-layout.has-sidebar,
.cxb-b2b-template3-layout.has-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.cxb-b2b-template1-sidebar,
.cxb-b2b-template2-sidebar,
.cxb-b2b-template3-sidebar {
    flex: 0 0 300px;
    max-width: 300px;
}

.cxb-b2b-template1-content,
.cxb-b2b-template2-content,
.cxb-b2b-template3-content {
    flex: 1;
    min-width: 0;
}

/* Sidebar positioning */
.cxb-b2b-template1-layout.sidebar-left,
.cxb-b2b-template2-layout.sidebar-left,
.cxb-b2b-template3-layout.sidebar-left {
    flex-direction: row;
}

.cxb-b2b-template1-layout.sidebar-right,
.cxb-b2b-template2-layout.sidebar-right,
.cxb-b2b-template3-layout.sidebar-right {
    flex-direction: row-reverse;
}

/* Responsive adjustments for template layouts */
@media (max-width: 992px) {
    .cxb-b2b-template1-sidebar,
    .cxb-b2b-template2-sidebar {
        flex: 0 0 250px;
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    .cxb-b2b-template1-layout.has-sidebar,
    .cxb-b2b-template2-layout.has-sidebar,
    .cxb-b2b-template3-layout.has-sidebar {
        flex-direction: column;
        gap: 30px;
    }
    
    .cxb-b2b-template1-sidebar,
    .cxb-b2b-template2-sidebar,
    .cxb-b2b-template3-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
        order: 2;
    }
    
    .cxb-b2b-template1-content,
    .cxb-b2b-template2-content,
    .cxb-b2b-template3-content {
        order: 1;
    }
}

/* ==========================================================================
   Product Detail Bottom Layout
   ========================================================================== */
.cxb-b2b-product-bottom-layout {
    display: flex;
    gap: 40px;
    margin-top: 0;
}

.cxb-b2b-product-bottom-layout.sidebar-right {
    flex-direction: row-reverse;
}

.cxb-b2b-sidebar-column {
    flex: 0 0 300px;
    max-width: 300px;
    margin-top: 30px;
}

.cxb-b2b-content-column {
    flex: 1;
    min-width: 0;
}

.cxb-b2b-content-column.full-width {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .cxb-b2b-product-bottom-layout {
        gap: 30px;
    }
    
    .cxb-b2b-sidebar-column {
        flex: 0 0 250px;
        max-width: 250px;
        margin-top: 10px;
    }
    
    /* Tablet adjustments for sharing buttons when sidebar is enabled */
    .cxb-b2b-content-column:not(.full-width) .cxb-b2b-social-buttons a {
        padding: 7px 10px !important;
        font-size: 13px !important;
        gap: 5px !important;
    }
    
    .cxb-b2b-content-column:not(.full-width) .cxb-b2b-social-buttons a span:first-child {
        font-size: 14px !important;
    }
    

}

@media (max-width: 768px) {
    .cxb-b2b-product-bottom-layout,
    .cxb-b2b-product-bottom-layout.sidebar-right,
    .cxb-b2b-product-bottom-layout.sidebar-left {
        flex-direction: column;
        gap: 30px;
    }
    
    .cxb-b2b-sidebar-column {
        flex: 0 0 100%;
        max-width: 100%;
        order: 2;
        margin-top: 0;
    }
    
    .cxb-b2b-content-column {
        order: 1;
    }
}

/* ==========================================================================
   Social Sharing Buttons
   ========================================================================== */
.cxb-b2b-social-buttons a {
    padding: 8px 12px !important;
    font-size: 14px !important;
    gap: 6px !important;
    transition: filter 0.2s ease;
}

.cxb-b2b-social-buttons a:hover {
    filter: brightness(0.9);
}

.cxb-b2b-social-buttons a span:first-child {
    font-size: 16px !important;
}

.cxb-b2b-social-buttons {
    flex-wrap: wrap;
}


/* Mobile adjustments for sharing buttons */
@media (max-width: 768px) {
    .cxb-b2b-social-buttons {
        gap: 8px !important;
    }
    
    .cxb-b2b-social-buttons a {
        padding: 6px 10px !important;
        font-size: 13px !important;
        transition: filter 0.2s ease;
    }
    
    .cxb-b2b-social-buttons a span:first-child {
        font-size: 14px !important;
    }
}

/* Product card and detail page button responsive fix */
.cxb-b2b-inquiry-button, 
.cxb-b2b-add-to-quote-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 6px;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
    width: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 产品卡片中的按钮组调整 */
.cxb-b2b-product-card .cxb-b2b-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%; /* 确保不超出容器 */
}

.cxb-b2b-product-card .cxb-b2b-button-group > * {
    width: 100%; /* 子元素宽度100% */
    max-width: 100%; /* 自适应宽度 */
    margin: 0 auto;
}

/* 产品卡片内按钮悬停：移除阴影和位移，避免溢出产生灰色背景 */
.cxb-b2b-product-card .cxb-b2b-add-to-quote-button:hover,
.cxb-b2b-product-card .cxb-b2b-inquiry-button:hover,
.cxb-b2b-product-card .cxb-b2b-view-details-button:hover,
.cxb-b2b-template3-product-card .cxb-b2b-add-to-quote-button:hover,
.cxb-b2b-template3-product-card .cxb-b2b-inquiry-button:hover,
.cxb-b2b-template3-product-card .cxb-b2b-view-details-button:hover {
    transform: none;
    box-shadow: none;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {
    .cxb-b2b-inquiry-button, 
    .cxb-b2b-add-to-quote-button {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        text-align: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        box-sizing: border-box;
    }
    
    .cxb-b2b-product-card .cxb-b2b-button-group > * {
        max-width: 100%;
    }

    /* Hide loading dots on mobile to prevent button height increase and layout shift */
    .cxb-b2b-add-to-quote-button.loading .cxb-b2b-button-icon {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .cxb-b2b-inquiry-button, 
    .cxb-b2b-add-to-quote-button {
        padding: 5px 8px;
        font-size: 11px;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        text-align: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        box-sizing: border-box;
    }
    
    /* Mobile button icon adjustments */
    .cxb-b2b-inquiry-button .cxb-b2b-button-icon, 
    .cxb-b2b-add-to-quote-button .cxb-b2b-button-icon {
        margin-right: 3px;
        font-size: 9px;
    }
    
    .cxb-b2b-product-card .cxb-b2b-button-group {
        gap: 4px;
    }
    
    .cxb-b2b-product-card .cxb-b2b-button-group > * {
        max-width: 100%;
    }
}

/* Small screens (< 350px) */
@media screen and (max-width: 349px) {
    .cxb-b2b-inquiry-button, 
    .cxb-b2b-add-to-quote-button {
        font-size: 10px;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        padding: 6px 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        text-align: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }
    
    /* Hide icon on small screens to save space for button text */
    .cxb-b2b-inquiry-button .cxb-b2b-button-icon, 
    .cxb-b2b-add-to-quote-button .cxb-b2b-button-icon {
        display: none;
    }
}

/* Large screen optimization */
@media screen and (min-width: 1200px) {
    .cxb-b2b-inquiry-button, 
    .cxb-b2b-add-to-quote-button {
        max-width: 220px;
        font-size: 14px;
        padding: 10px 20px;
    }
    
    .cxb-b2b-product-card .cxb-b2b-button-group > * {
        max-width: 220px;
    }
}

/* CSS Grid layout for button group */
.cxb-b2b-product-card .cxb-b2b-button-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 8px;
}

/* CSS variable controlled button sizing */
.cxb-b2b-product-card {
    --button-min-width: 0;
    --button-max-width: 200px;
    --button-padding: 8px 16px;
    --button-font-size: 13px;
}

.cxb-b2b-product-card .cxb-b2b-inquiry-button, 
.cxb-b2b-product-card .cxb-b2b-add-to-quote-button {
    min-width: var(--button-min-width, 0);
    max-width: var(--button-max-width, 200px);
    width: 100%;
    padding: var(--button-padding, 8px 16px);
    font-size: var(--button-font-size, 13px);
}

@media screen and (max-width: 768px) {
    .cxb-b2b-product-card {
        --button-min-width: 0;
        --button-max-width: 100%;
        --button-padding: 6px 12px;
        --button-font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    .cxb-b2b-product-card {
        --button-min-width: 0;
        --button-max-width: 90%;
        --button-padding: 5px 10px;
        --button-font-size: 14px;
    }
}

/* Tooltip 提示框样式（方案1） */
.cxb-b2b-tooltip {
    position: relative;
}

.cxb-b2b-tooltip-text {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.cxb-b2b-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.cxb-b2b-tooltip.show .cxb-b2b-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* 按钮原有样式调整 */
.cxb-b2b-add-to-quote-button {
    position: relative;
}

/* 添加临时状态样式 - 不改变尺寸 */
.cxb-b2b-add-to-quote-button.success-temp {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.cxb-b2b-add-to-quote-button.error-temp {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.cxb-b2b-add-to-quote-button.info-temp {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

/* Toast通知样式 - 不影响产品卡片（方案3） */
.cxb-b2b-toast-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    max-width: 300px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.cxb-b2b-toast-container.visible {
    visibility: visible;
    opacity: 1;
}

.cxb-b2b-toast {
    padding: 12px 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;
    border-left: 4px solid #28a745;
}

.cxb-b2b-toast.error {
    border-left-color: #dc3545;
}

.cxb-b2b-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.cxb-b2b-toast.hiding {
    opacity: 0;
    transform: translateY(-20px);
}

.cxb-b2b-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.cxb-b2b-toast-success .cxb-b2b-toast-icon {
    color: #28a745;
}

.cxb-b2b-toast-error .cxb-b2b-toast-icon {
    color: #dc3545;
}

.cxb-b2b-toast-message {
    font-size: 14px;
    color: #333;
    flex: 1;
}

/* 极简式询盘按钮样式 */
.cxb-b2b-add-to-quote-section.minimal-style {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 20px 0 15px 0;
}

.cxb-b2b-add-to-quote-section.minimal-style .cxb-b2b-quote-message-container {
    margin-top: 10px;
}

@media (max-width: 768px) {
    .cxb-b2b-add-to-quote-section.minimal-style {
        margin: 15px 0 10px 0;
    }
}

/* ========================================================================
   ENHANCED SHARE ICONS STYLES
   Version: 1.2.0
   Features: Hover expansion animation, modern design, responsive layout
   
   IMPLEMENTATION INSTRUCTIONS:
   Replace the existing share icons CSS (lines 4033-4094 in frontend.css)
   with the code below, or add to a separate stylesheet.
   ======================================================================== */

/* Share Container - Main wrapper with relative positioning */
.cxb-b2b-share-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
    z-index: 10;
}

/* Share Trigger - Default collapsed state */
.cxb-b2b-share-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    user-select: none;
    position: relative;
    z-index: 2;
}

.cxb-b2b-share-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* Share Main Icon */
.cxb-b2b-share-main-icon {
    width: 20px;
    height: 20px;
    color: white;
    transition: transform 0.3s ease;
}

.cxb-b2b-share-container:hover .cxb-b2b-share-main-icon {
    transform: rotate(90deg);
}

/* Share Text */
.cxb-b2b-share-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Share Panel - Expanded icons container */
.cxb-b2b-share-panel {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    background: white;
    border-radius: 28px;
    padding: 6px 6px 6px 120px; /* Left padding for the trigger button */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    border: 2px solid #f0f0f0;
}

/* Panel expansion on hover */
.cxb-b2b-share-container:hover .cxb-b2b-share-panel {
    opacity: 1;
    pointer-events: all;
    gap: 8px;
}

/* Individual Share Links */
.cxb-b2b-share-panel .cxb-b2b-share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 44px;
    border-radius: 22px;
    color: white;
    text-decoration: none;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Expand links on hover */
.cxb-b2b-share-container:hover .cxb-b2b-share-link {
    width: 44px;
    opacity: 1;
    transform: scale(1);
}

/* Staggered animation delay for each icon */
.cxb-b2b-share-container:hover .cxb-b2b-share-link:nth-child(1) {
    transition-delay: 0.05s;
}

.cxb-b2b-share-container:hover .cxb-b2b-share-link:nth-child(2) {
    transition-delay: 0.1s;
}

.cxb-b2b-share-container:hover .cxb-b2b-share-link:nth-child(3) {
    transition-delay: 0.15s;
}

.cxb-b2b-share-container:hover .cxb-b2b-share-link:nth-child(4) {
    transition-delay: 0.2s;
}

.cxb-b2b-share-container:hover .cxb-b2b-share-link:nth-child(5) {
    transition-delay: 0.25s;
}

.cxb-b2b-share-container:hover .cxb-b2b-share-link:nth-child(6) {
    transition-delay: 0.3s;
}

.cxb-b2b-share-container:hover .cxb-b2b-share-link:nth-child(7) {
    transition-delay: 0.35s;
}

.cxb-b2b-share-container:hover .cxb-b2b-share-link:nth-child(8) {
    transition-delay: 0.4s;
}

/* Share Link SVG Icons */
.cxb-b2b-share-link svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

/* Hover effect on individual icons */
.cxb-b2b-share-link:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cxb-b2b-share-link:hover svg {
    transform: scale(1.1);
}

/* Active/Click state */
.cxb-b2b-share-link:active {
    transform: translateY(-1px) scale(0.98);
}

/* ========================================================================
   PLATFORM-SPECIFIC COLORS
   Modern, refreshed brand colors for 2024
   ======================================================================== */

.cxb-b2b-share-link[data-platform="facebook"] {
    background: linear-gradient(135deg, #1877f2 0%, #0c63d4 100%);
}

.cxb-b2b-share-link[data-platform="twitter"] {
    background: linear-gradient(135deg, #000000 0%, #14171a 100%);
}

.cxb-b2b-share-link[data-platform="linkedin"] {
    background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
}

.cxb-b2b-share-link[data-platform="pinterest"] {
    background: linear-gradient(135deg, #e60023 0%, #bd001f 100%);
}

.cxb-b2b-share-link[data-platform="whatsapp"] {
    background: linear-gradient(135deg, #25d366 0%, #1ebe57 100%);
}

.cxb-b2b-share-link[data-platform="telegram"] {
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
}

.cxb-b2b-share-link[data-platform="email"] {
    background: linear-gradient(135deg, #7d7d7d 0%, #5a5a5a 100%);
}

/* Gallery Share Button Positioning */
.cxb-b2b-share-container.gallery-share {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 0;
}

.cxb-b2b-share-container.gallery-share .cxb-b2b-share-trigger {
    justify-content: flex-start;
}

.cxb-b2b-share-container.gallery-share .cxb-b2b-share-panel {
    left: 0;
    right: auto;
    padding: 6px 6px 6px 120px;
}

/* Ensure panel doesn't overflow on small screens */
@media (max-width: 768px) {
    .cxb-b2b-share-container.gallery-share .cxb-b2b-share-panel {
        padding: 5px 5px 5px 110px;
    }
}

/* ========================================================================
   RESPONSIVE DESIGN
   Optimized for mobile, tablet, and desktop
   ======================================================================== */

/* Tablet and smaller desktop (max-width: 768px) */
@media (max-width: 768px) {
    .cxb-b2b-share-trigger {
        padding: 9px 16px;
        border-radius: 22px;
    }
    
    .cxb-b2b-share-main-icon {
        width: 18px;
        height: 18px;
    }
    
    .cxb-b2b-share-text {
        font-size: 13px;
    }
    
    .cxb-b2b-share-panel {
        padding: 5px 5px 5px 110px;
        border-radius: 26px;
    }
    
    .cxb-b2b-share-panel .cxb-b2b-share-link {
        height: 40px;
    }
    
    .cxb-b2b-share-container:hover .cxb-b2b-share-link {
        width: 40px;
    }
    
    .cxb-b2b-share-link svg {
        width: 20px;
        height: 20px;
    }
    
    .cxb-b2b-share-container:hover .cxb-b2b-share-panel {
        gap: 6px;
    }
}

/* Mobile (max-width: 520px) */
@media (max-width: 520px) {
    .cxb-b2b-share-trigger {
        padding: 8px 14px;
        border-radius: 20px;
    }
    
    .cxb-b2b-share-main-icon {
        width: 16px;
        height: 16px;
    }
    
    .cxb-b2b-share-text {
        font-size: 12px;
    }
    
    .cxb-b2b-share-panel {
        padding: 4px 4px 4px 100px;
        border-radius: 24px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    .cxb-b2b-share-panel .cxb-b2b-share-link {
        height: 36px;
    }
    
    .cxb-b2b-share-container:hover .cxb-b2b-share-link {
        width: 36px;
    }
    
    .cxb-b2b-share-link svg {
        width: 18px;
        height: 18px;
    }
    
    .cxb-b2b-share-container:hover .cxb-b2b-share-panel {
        gap: 5px;
    }
}

/* Small mobile (max-width: 400px) */
@media (max-width: 400px) {
    .cxb-b2b-share-trigger {
        padding: 7px 12px;
    }
    
    .cxb-b2b-share-panel {
        padding: 4px 4px 4px 90px;
    }
    
    .cxb-b2b-share-panel .cxb-b2b-share-link {
        height: 34px;
    }
    
    .cxb-b2b-share-container:hover .cxb-b2b-share-link {
        width: 34px;
    }
    
    .cxb-b2b-share-link svg {
        width: 16px;
        height: 16px;
    }
}

/* ========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================================================== */

/* Focus states for keyboard navigation */
.cxb-b2b-share-trigger:focus-visible,
.cxb-b2b-share-link:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .cxb-b2b-share-trigger,
    .cxb-b2b-share-panel,
    .cxb-b2b-share-link,
    .cxb-b2b-share-main-icon,
    .cxb-b2b-share-link svg {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .cxb-b2b-share-trigger {
        border: 2px solid currentColor;
    }
    
    .cxb-b2b-share-panel {
        border: 2px solid currentColor;
    }
}

/* ========================================================================
   PRINT STYLES
   Hide share buttons when printing
   ======================================================================== */

@media print {
    .cxb-b2b-share-container {
        display: none !important;
    }
}

/* ========================================================================
   DARK MODE SUPPORT (Optional)
   Uncomment if your theme supports dark mode
   ======================================================================== */

/*
@media (prefers-color-scheme: dark) {
    .cxb-b2b-share-panel {
        background: #2d2d2d;
        border-color: #444;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
}
*/

/* Product detail page button responsive */
@media (max-width: 768px) {
    .cxb-b2b-add-to-quote-section .cxb-b2b-add-to-quote-button,
    .cxb-b2b-add-to-quote-section .cxb-b2b-extra-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-bottom: 8px;
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .cxb-b2b-add-to-quote-section .cxb-b2b-add-to-quote-button:last-child,
    .cxb-b2b-add-to-quote-section .cxb-b2b-extra-button:last-child {
        margin-bottom: 0;
    }

    /* Stack the quantity + button layout vertically on mobile */
    .cxb-b2b-add-to-quote-section > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cxb-b2b-add-to-quote-section > div[style*="display: flex"] > div {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .cxb-b2b-add-to-quote-section > div[style*="display: flex"] > div[style*="display: flex"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    .cxb-b2b-add-to-quote-section input[type="number"] {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .cxb-b2b-add-to-quote-section .cxb-b2b-add-to-quote-button,
    .cxb-b2b-add-to-quote-section .cxb-b2b-extra-button {
        font-size: 13px;
        padding: 9px 10px;
    }
}

/* ==========================================================================
   左图右文产品卡片模板样式
   ========================================================================== */
.cxb-b2b-product-card.cxb-b2b-product-card-left-image {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: row;
    height: 100%;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    gap: 20px;
}

.cxb-b2b-product-card.cxb-b2b-product-card-left-image:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: #0066cc;
}

/* 左侧图片列 */
.cxb-b2b-product-thumbnail-left {
    flex: 0 0 40%;
    max-width: 40%;
    position: relative;
    border-radius: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    margin: -16px 0 -16px -16px;
    overflow: hidden;
}

.cxb-b2b-product-thumbnail-left img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cxb-b2b-product-card.cxb-b2b-product-card-left-image:hover .cxb-b2b-product-thumbnail-left img {
    transform: scale(1.05);
}

/* 右侧内容列 */
.cxb-b2b-product-content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* 产品标题 */
.cxb-b2b-product-content-left .cxb-b2b-product-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

.cxb-b2b-product-content-left .cxb-b2b-product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cxb-b2b-product-content-left .cxb-b2b-product-title a:hover {
    color: #0066cc;
}

/* 产品摘要 */
.cxb-b2b-product-content-left .cxb-b2b-product-excerpt {
    color: #666666;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

/* SKU和属性容器 */
.cxb-b2b-product-content-left .cxb-b2b-product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    max-width: 100%;
}

/* SKU样式 */
.cxb-b2b-product-content-left .cxb-b2b-product-sku {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    background-color: #f5f5f5 !important;
    border-radius: 4px;
    padding: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 属性样式 */
.cxb-b2b-product-content-left .cxb-b2b-product-specs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cxb-b2b-product-content-left .cxb-b2b-product-spec {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    background-color: #f5f5f5 !important;
    border-radius: 4px;
    padding: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxb-b2b-product-content-left .cxb-b2b-spec-value {
    color: #333;
    font-weight: 500;
    background-color: transparent !important;
    padding: 0 !important;
}

/* 产品分类 */
.cxb-b2b-product-content-left .cxb-b2b-product-meta {
    font-size: 12px;
    color: #888888;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.cxb-b2b-product-content-left .cxb-b2b-product-category {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}



.cxb-b2b-product-content-left .cxb-b2b-product-category a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.cxb-b2b-product-content-left .cxb-b2b-product-category a:hover {
    color: #0052a3;
    text-decoration: underline;
}

/* 按钮区域 */
.cxb-b2b-product-content-left .cxb-b2b-product-actions {
    margin: auto 0 0 0;
    padding: 12px 0 0 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
}

.cxb-b2b-product-content-left .cxb-b2b-button-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px 0;
    width: 100%;
    box-sizing: border-box;
}

.cxb-b2b-product-content-left .cxb-b2b-view-details-button,
.cxb-b2b-product-content-left .cxb-b2b-inquiry-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
    width: auto;
    min-width: 107px;
    box-sizing: border-box;
    margin: 0;
}

.cxb-b2b-product-content-left .cxb-b2b-view-details-button {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
}

.cxb-b2b-product-content-left .cxb-b2b-view-details-button:hover {
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.cxb-b2b-product-content-left .cxb-b2b-inquiry-button {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: #ffffff;
}

.cxb-b2b-product-content-left .cxb-b2b-inquiry-button:hover {
    background: linear-gradient(135deg, #1e7e34, #155724);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
}

.cxb-b2b-product-content-left .cxb-b2b-button-icon {
    margin-right: 6px;
    font-size: 12px;
}

/* 左图右文布局的响应式设计 */
@media screen and (max-width: 768px) {
    .cxb-b2b-product-card.cxb-b2b-product-card-left-image {
        flex-direction: column;
        gap: 8px;
    }
    
    .cxb-b2b-product-thumbnail-left {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 0;
        background-color: transparent;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cxb-b2b-product-content-left {
        width: 100%;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-title {
        font-size: 13px;
        -webkit-line-clamp: 1;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-excerpt {
        font-size: 11px;
        -webkit-line-clamp: 1;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-button-group {
        gap: 4px;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-sku {
        font-size: 12px;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-view-details-button,
    .cxb-b2b-product-content-left .cxb-b2b-inquiry-button {
        padding: 5px 8px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .cxb-b2b-product-card.cxb-b2b-product-card-left-image {
        padding: 6px;
        border-radius: 6px;
    }
    
    .cxb-b2b-product-thumbnail-left {
        border-radius: 0;
        background-color: transparent;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-title {
        font-size: 12px;
        margin-bottom: 3px;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-excerpt {
        font-size: 10px;
        margin-bottom: 4px;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-meta {
        font-size: 12px;
        margin-bottom: 4px;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-sku {
        font-size: 12px;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-view-details-button,
    .cxb-b2b-product-content-left .cxb-b2b-inquiry-button {
        padding: 4px 6px;
        font-size: 10px;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-button-icon {
        margin-right: 3px;
        font-size: 9px;
    }
}

/* 超小容器优化 - 特别适合侧边栏 */
@media (max-width: 300px) {
    .cxb-b2b-product-card.cxb-b2b-product-card-left-image {
        padding: 8px;
    }
    
    .cxb-b2b-product-thumbnail-left {
        margin: -8px -8px 0 -8px;
        border-radius: 0;
        background-color: transparent;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-title {
        font-size: 12px;
        line-height: 1.2;
        -webkit-line-clamp: 1;
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-product-excerpt,
    .cxb-b2b-product-content-left .cxb-b2b-product-meta {
        display: none; /* 在超小容器中隐藏摘要和元信息 */
    }
    
    .cxb-b2b-product-content-left .cxb-b2b-view-details-button,
    .cxb-b2b-product-content-left .cxb-b2b-inquiry-button {
        padding: 4px 6px;
        font-size: 10px;
    }
}

/* Email Inquiry Button Styles */
.cxb-b2b-email-inquiry-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5; /* Above sibling card content (z-index:2), within card stacking context */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: none;
    border: none;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.cxb-b2b-email-inquiry-btn:hover {
    transform: scale(1.15);
}

.cxb-b2b-email-inquiry-btn svg {
    width: 20px;
    height: 20px;
    color: var(--cxb-primary-color, #0A7AFF);
    transition: color 0.3s ease;
}

.cxb-b2b-email-inquiry-btn:hover svg {
    color: var(--cxb-primary-color-hover, #085FCC);
}

/* Chat button on product cards — defaults to far right (right:0).
   When the email inquiry button is also present (appears before it
   in the DOM), the sibling combinator shifts it left by 35px.       */
.cxb-b2b-chat-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    line-height: 0;
    min-width: auto;
    min-height: auto;
    box-shadow: none;
}

/* Dynamic shift: when email inquiry button exists before the chat
   button, move chat 35px left (30px icon + 5px gap)               */
.cxb-b2b-email-inquiry-btn ~ .cxb-b2b-chat-btn {
    right: 35px;
}

.cxb-b2b-chat-btn:hover {
    transform: scale(1.15);
}

.cxb-b2b-chat-btn img {
    width: 30px;
    height: 30px;
    display: block;
}

/* Page-background-wrapper override (same pattern as email-inquiry-btn) */
.cxb-b2b-page-background-wrapper .cxb-b2b-chat-btn.cxb-b2b-chat-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: auto;
    min-height: auto;
    line-height: 0;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-email-inquiry-btn ~ .cxb-b2b-chat-btn.cxb-b2b-chat-btn {
    right: 35px;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-chat-btn.cxb-b2b-chat-btn img {
    width: 30px;
    height: 30px;
}

/* Video play icon on product cards */
.cxb-b2b-video-play-icon {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    z-index: 5;
    pointer-events: none;
    display: block;
}

/* Override: thumbnail img rules (.cxb-b2b-product-thumbnail img etc.) apply
   width:100%/height:100% to ALL img descendants, which inflates the play icon.
   These selectors match or exceed the conflicting rules' specificity (0,1,1 – 0,3,1)
   so the icon stays 20×20 px without touching any other styles. */
.cxb-b2b-product-thumbnail .cxb-b2b-video-play-icon,
.cxb-b2b-product-thumbnail-left .cxb-b2b-video-play-icon {
    width: 20px;
    height: 20px;
    object-fit: unset;
    transition: none;
}

/* Neutralise the hover scale(1.05) that the thumbnail img hover rules would apply */
.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail .cxb-b2b-video-play-icon,
.cxb-b2b-product-card.cxb-b2b-product-card-left-image:hover .cxb-b2b-product-thumbnail-left .cxb-b2b-video-play-icon {
    transform: none;
}

/* Override the high-specificity page-background-wrapper img rule (0,3,1) */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail .cxb-b2b-video-play-icon,
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail-left .cxb-b2b-video-play-icon {
    width: 20px;
    height: 20px;
    object-fit: unset;
}

/* Override the catch-all (.cxb-b2b-product-card.cxb-b2b-product-card img) at (0,4,1)
   which sets height:auto and max-width:100% on every img inside the card.
   Doubling the product-card class lifts this to (0,5,0), outranking the conflicting rule. */
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-product-thumbnail .cxb-b2b-video-play-icon,
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-product-thumbnail-left .cxb-b2b-video-play-icon {
    width: 20px;
    height: 20px;
    max-width: 20px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .cxb-b2b-email-inquiry-btn {
        padding: 5px;
    }
    
    .cxb-b2b-email-inquiry-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media screen and (max-width: 480px) {
    .cxb-b2b-email-inquiry-btn {
        padding: 5px;
    }
    
    .cxb-b2b-email-inquiry-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================
   Mobile Product Search Bar
   ============================================ */

/* Hide by default, show only on mobile */
.nbb2b-mobile-search--bar {
    display: none;
}

@media (max-width: 768px) {
    .nbb2b-mobile-search--bar {
        display: block;
        padding: 0;
        margin: 10px 0;
        background: transparent;
    }
}

.nbb2b-msearch-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.nbb2b-msearch-input {
    width: 100%;
    height: 36px;
    padding: 0 60px 0 12px;
    border: 1px solid #dcdcde;
    border-radius: 0;
    font-size: 14px;
    background: #f6f7f7;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.nbb2b-msearch-input:focus {
    border-color: #999;
    background: #fff;
}

.nbb2b-msearch-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    display: flex;
    align-items: center;
}

.nbb2b-msearch-clear {
    position: absolute;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
}

.nbb2b-msearch-clear:hover {
    color: #333;
}

.nbb2b-msearch-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    background: #fff;
    border: 1px solid #dcdcde;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 320px;
    overflow-y: auto;
}

.nbb2b-mobile-search {
    position: relative;
}

.nbb2b-msearch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: #1d2327;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.nbb2b-msearch-item:last-child {
    border-bottom: none;
}

.nbb2b-msearch-item:hover,
.nbb2b-msearch-item:focus {
    background: #f6f7f7;
}

.nbb2b-msearch-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.nbb2b-msearch-title {
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nbb2b-msearch-no {
    padding: 16px 12px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

/* Modal variant: inline in products header */
.nbb2b-mobile-search--modal {
    flex: 1;
    min-width: 0;
    margin: 0 10px;
}

.nbb2b-mobile-search--modal .nbb2b-msearch-input {
    height: 32px;
    font-size: 13px;
    border-radius: 16px;
}

.nbb2b-mobile-search--modal .nbb2b-msearch-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    border-radius: 8px;
    border: 1px solid #dcdcde;
}

/* ============================================
   Mobile Category Navigation - Rebuilt 2024
   ============================================ */

/* Hide by default, show only on mobile */
.cxb-mobile-cat-nav {
    display: none;
}

@media (max-width: 768px) {
    .cxb-mobile-cat-nav {
        display: flex;
        align-items: center;
        height: 60px;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        padding: 0;
        position: sticky;
        top: var(--cxb-sticky-top, 0px);
        z-index: 99; /* Below theme sticky headers, above normal content */
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-bottom: 10px;
        box-sizing: border-box;
        transition: height 0.25s ease, box-shadow 0.25s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Sticky‑shrunk state: 70 % of original 60 px = 42 px */
    .cxb-mobile-cat-nav.is-sticky-shrunk {
        height: 42px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    }

    .cxb-mobile-cat-nav.is-sticky-shrunk .cxb-cat-nav-arrow {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    .cxb-mobile-cat-nav.is-sticky-shrunk .cxb-cat-nav-item {
        font-size: 0.85em;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    /* Navigation Arrows — hardened against theme overrides */
    .cxb-mobile-cat-nav .cxb-cat-nav-arrow,
    button.cxb-cat-nav-arrow,
    .cxb-cat-nav-arrow {
        flex: 0 0 40px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
        border: 1px solid #e5e7eb !important;
        background: transparent !important;
        background-image: none !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background 0.2s ease, border-color 0.2s ease !important;
        color: #374151 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        line-height: 1 !important;
        font: inherit !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        outline: none !important;
        transform: none !important;
    }

    .cxb-cat-nav-arrow:hover {
        background: rgba(249, 250, 251, 0.6);
        border-color: #d1d5db;
        box-shadow: none;
    }

    .cxb-cat-nav-arrow:active {
        background: rgba(243, 244, 246, 0.6);
        opacity: 0.85;
    }

    .cxb-cat-nav-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        box-shadow: none;
    }

    .cxb-cat-nav-arrow svg {
        width: 20px;
        height: 20px;
        pointer-events: none;
        stroke: #374151 !important;
        fill: none !important;
    }

    /* Scrollable Container */
    .cxb-cat-nav-container {
        flex: 1;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0;
        position: relative;
    }

    .cxb-cat-nav-container::-webkit-scrollbar {
        display: none;
    }

    /* Category List */
    .cxb-cat-nav-list {
        display: flex;
        align-items: center;
        gap: 6px;
        list-style: none;
        margin: 0;
        padding: 0;
        min-width: min-content;
        white-space: nowrap;
    }

    /* Category Item */
    .cxb-cat-nav-item {
        position: relative;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        transition: font-size 0.25s ease, padding 0.25s ease;
    }

    /* Category Link */
    .cxb-cat-nav-link {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        text-decoration: none;
        background: #f9fafb;
        border-radius: 20px;
        transition: all 0.2s ease;
        white-space: nowrap;
        border: 1px solid transparent;
    }

    .cxb-cat-nav-link:hover {
        background: #f3f4f6;
        color: #111827;
    }

    .cxb-cat-nav-link:active {
        background: #e5e7eb;
    }

    .cxb-cat-nav-item.is-active .cxb-cat-nav-link {
        background: var(--cxb-primary-color, #0A7AFF);
        color: #ffffff;
        border-color: var(--cxb-primary-color, #0A7AFF);
    }

    .cxb-cat-nav-item.is-active .cxb-cat-nav-link:hover {
        background: var(--cxb-primary-color-dark, #0866D6);
    }



    /* Small screen adjustments */
    @media (max-width: 480px) {
        .cxb-cat-nav-arrow {
            width: 36px;
            height: 36px;
        }

        .cxb-cat-nav-arrow svg {
            width: 18px;
            height: 18px;
            stroke: #374151 !important;
            fill: none !important;
        }

        .cxb-cat-nav-link {
            padding: 8px 14px;
            font-size: 13px;
        }


    }
}

/* Animation for smooth appearance */
@keyframes cxb-dropdown-appear {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cxb-cat-dropdown-menu.is-open {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: cxb-dropdown-appear 0.2s ease forwards;
}

/* ========================================================================
   FAQ STYLES
   Enhanced FAQ display with collapsible accordion
   ======================================================================== */

.cxb-b2b-faq-container {
    margin-top: 20px;
}

.cxb-b2b-faq-item {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cxb-b2b-faq-item:hover {
    border-color: #c0c0c0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.cxb-b2b-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    background: #f5f5f5;
    border-bottom: 1px solid transparent;
    transition: background 0.2s ease;
}

.cxb-b2b-faq-question:hover {
    background: #f0f0f0;
}

.cxb-b2b-faq-question-text {
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin-right: 15px;
    line-height: 1.4;
}

.cxb-b2b-faq-toggle {
    background: transparent;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cxb-b2b-faq-toggle:hover {
    background: #e8e8e8;
    border-color: #a0a0a0;
}

.cxb-b2b-faq-toggle:active {
    transform: scale(0.95);
}

.cxb-b2b-faq-toggle-icon {
    font-size: 20px;
    font-weight: bold;
    color: #666;
    transition: all 0.2s ease;
    line-height: 1;
}

/* Default icon states */
.cxb-b2b-faq-toggle .cxb-b2b-faq-toggle-plus {
    display: block;
}

.cxb-b2b-faq-toggle .cxb-b2b-faq-toggle-minus {
    display: none;
}

.cxb-b2b-faq-toggle:hover .cxb-b2b-faq-toggle-icon {
    color: #333;
}

.cxb-b2b-faq-answer {
    padding: 20px;
    background: white;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    border-top: 1px solid #f0f0f0;
    display: none;
}

.cxb-b2b-faq-answer p {
    margin-top: 0;
    margin-bottom: 15px;
}

.cxb-b2b-faq-answer p:last-child {
    margin-bottom: 0;
}

.cxb-b2b-faq-answer ul,
.cxb-b2b-faq-answer ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.cxb-b2b-faq-answer li {
    margin-bottom: 8px;
}

/* FAQ item expanded state */
.cxb-b2b-faq-item.expanded .cxb-b2b-faq-question {
    background: #f0f0f0;
    border-bottom-color: #e0e0e0;
}

.cxb-b2b-faq-item.expanded .cxb-b2b-faq-toggle {
    background: #e0e0e0;
}

.cxb-b2b-faq-item.expanded .cxb-b2b-faq-toggle .cxb-b2b-faq-toggle-plus {
    display: none;
}

.cxb-b2b-faq-item.expanded .cxb-b2b-faq-toggle .cxb-b2b-faq-toggle-minus {
    display: block;
}

.cxb-b2b-faq-item.expanded .cxb-b2b-faq-answer {
    display: block;
}

/* ========================================================================
   DOWNLOADS STYLES
   Clean table layout for downloads section
   ======================================================================== */

.cxb-b2b-downloads-container {
    margin-top: 20px;
    overflow-x: auto;
}

.cxb-b2b-downloads-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 15px;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px;
}

.cxb-b2b-downloads-table th {
    background: #f8f9fa !important;
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: #333 !important;
    border-bottom: 1px solid #d0d0d0 !important;
    border-top: 1px solid #d0d0d0 !important;
    border-right: 1px solid #d0d0d0 !important;
}
.cxb-b2b-downloads-table th:first-child {
    border-left: 1px solid #d0d0d0 !important;
}

.cxb-b2b-downloads-table th.cxb-b2b-downloads-action {
    text-align: right;
}

.cxb-b2b-downloads-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #d0d0d0 !important;
    border-right: 1px solid #d0d0d0 !important;
    vertical-align: middle;
}
.cxb-b2b-downloads-table td:first-child {
    border-left: 1px solid #d0d0d0 !important;
}

/* 列背景色：File列白色，Download列灰色 */
.cxb-b2b-downloads-table td:nth-child(1) {
    background-color: white !important;
}
.cxb-b2b-downloads-table td:nth-child(2) {
    background-color: #f8f9fa !important;
}

.cxb-b2b-downloads-table tbody tr:hover {
    background: #f8f9fa;
}

.cxb-b2b-download-file-name {
    font-weight: 500;
    color: #495057;
}

.cxb-b2b-download-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.cxb-b2b-download-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--cxb-primary-color, #0A7AFF) 0%, color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000) 100%);
    color: white;
    text-decoration: none !important;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(128, 128, 128, 0.2) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.cxb-b2b-download-button:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000) 0%, color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 60%, #000000) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(128, 128, 128, 0.3) !important;
    color: white;
}

.cxb-b2b-download-button:active {
    transform: translateY(0);
}

.cxb-b2b-download-icon {
    font-size: 18px;
    font-weight: bold;
}

/* Responsive adjustments for downloads table */
@media (max-width: 768px) {
    /* 手机端：将表格转换为块状布局，一列显示 */
    .cxb-b2b-downloads-container {
        overflow-x: visible;
    }
    
    .cxb-b2b-downloads-table {
        font-size: 14px;
        display: block;
        width: 100%;
    }
    
    .cxb-b2b-downloads-table thead {
        display: none; /* 隐藏表头 */
    }
    
    .cxb-b2b-downloads-table tbody {
        display: block;
        width: 100%;
    }
    
    .cxb-b2b-downloads-table tbody tr {
        display: block;
        width: 100%;
        margin-bottom: 16px;
        border: 1px solid #d0d0d0 !important;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        background: white;
    }
    
    .cxb-b2b-downloads-table tbody tr:last-child {
        margin-bottom: 0;
    }
    
    .cxb-b2b-downloads-table td {
        display: block;
        width: 100%;
        padding: 16px;
        border-bottom: 1px solid #d0d0d0 !important;
        text-align: left;
        box-sizing: border-box;
    }
    
    .cxb-b2b-downloads-table td:last-child {
        border-bottom: none !important;
    }
    
    /* 文件名单元格样式 */
    .cxb-b2b-download-file-name {
        font-weight: 600;
        color: #333;
        font-size: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* 下载操作单元格样式 */
    .cxb-b2b-download-action {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: auto;
        padding-top: 12px;
    }
    
    .cxb-b2b-download-button {
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(128, 128, 128, 0.2) !important;
    }
    
    .cxb-b2b-download-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(128, 128, 128, 0.25) !important;
    }
}

@media (max-width: 480px) {
    /* 超小屏幕设备进一步调整 */
    .cxb-b2b-downloads-table {
        font-size: 13px;
    }
    
    /* 块状布局调整 */
    .cxb-b2b-downloads-table tbody tr {
        margin-bottom: 12px;
        border-radius: 6px;
    }
    
    .cxb-b2b-downloads-table td {
        padding: 14px;
    }
    
    .cxb-b2b-download-file-name {
        font-size: 15px;
        padding-bottom: 10px;
    }
    
    .cxb-b2b-download-button {
        padding: 9px 16px;
        font-size: 13px;
    }
    
    /* FAQ 样式调整 */
    .cxb-b2b-faq-question {
        padding: 14px 16px;
    }
    
    .cxb-b2b-faq-answer {
        padding: 16px;
    }
    
    .cxb-b2b-faq-question-text {
        font-size: 15px;
    }
}

/* Sidebar filter module styles */
.cxb-b2b-sidebar-module-filter.cxb-b2b-sidebar-module-filter {
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.cxb-b2b-sidebar-module-filter.cxb-b2b-sidebar-module-filter .cxb-b2b-sidebar-module-title {
    padding: 15px 20px;
    margin: 0;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-transform: none;
    letter-spacing: normal;
    line-height: normal;
}

.cxb-b2b-sidebar-module-filter.cxb-b2b-sidebar-module-filter .cxb-b2b-sidebar-module-content {
    padding: 20px;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-attribute {
    margin-bottom: 5px;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-attribute-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    border: none;
    box-shadow: none;
    border-radius: 0;
    text-decoration: none;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-attribute-header:hover {
    background-color: #f9f9f9;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-attribute-name {
    font-weight: 500;
    color: #444;
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-attribute-toggle svg {
    transition: transform 0.3s ease;
    transform-origin: center;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-attribute-values {
    padding: 10px 0 0 15px;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-value-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    cursor: pointer;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-checkbox {
    margin-right: 8px;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-value-label {
    font-size: 14px;
    color: #666;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
}

/* .cxb-b2b-filter-divider removed - no longer used */

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-apply,
.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-reset {
    flex: 1;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-transform: none;
    letter-spacing: normal;
    line-height: normal;
    text-decoration: none;
    box-shadow: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-apply {
    background-color: #0A7AFF;
    color: white;
    border: none;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-apply:hover {
    background-color: #085FCC;
    color: white;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-reset {
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-reset:hover {
    background-color: #e0e0e0;
}

.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-apply:disabled,
.cxb-b2b-sidebar-module-filter .cxb-b2b-filter-reset:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Horizontal Filter Styles
   ========================================================================== */

.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 30px;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-group:last-child {
    margin-bottom: 0;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-header {
    flex: 0 0 150px;
    margin-left: 15px;
    padding-top: 5px;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-name {
    font-weight: 500;
    color: #444;
    font-size: 14px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
    line-height: normal;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-values {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-item {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin: 0;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: normal;
    box-shadow: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-weight: normal;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-item:hover {
    background: #e9ecef;
    border-color: #c0c0c0;
    color: #333;
    text-decoration: none;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-item.active {
    background: var(--cxb-global-element-color, #0A7AFF);
    border-color: var(--cxb-global-element-color, #0A7AFF);
    color: white;
    text-decoration: none;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-separator {
    width: 20px;
    height: 0;
    display: inline-block;
    flex-shrink: 0;
    visibility: hidden;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 15px 0;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-divider:last-child {
    display: none;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
    .cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-header {
        flex: 0 0 auto;
        margin-left: 15px;
        margin-bottom: 10px;
        padding-top: 0;
    }
    
    .cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-values {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-separator {
        display: none;
    }
    
    .cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-item {
        margin-bottom: 0;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container {
        padding: 5px;
    }
    
    .cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-attribute-values {
        gap: 6px;
    }
    
    .cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-item {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Collapsible horizontal filter styles */
.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed {
    max-height: 50px;
    padding-bottom: 40px;
}

.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-attribute-group,
.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-divider {
    display: none;
}

.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-first-row {
    margin-bottom: 0;
    align-items: center;
    display: flex;
    height: 40px;
}

.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-label {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 0 0 50px;
    margin-left: 15px;
    margin-right: 10px;
    font-size: 16px;
}

.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-attribute-values {
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    display: flex;
    height: 100%;
    flex: 1;
    min-width: 0;
}

.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-value-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    min-height: 30px;
    min-width: 50px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    padding: 0 8px;
}

.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-attribute-values .cxb-b2b-horizontal-filter-value-item:nth-child(n+6) {
    display: none;
}

/* Arrow toggle button */
.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-toggle {
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    text-decoration: none;
    box-shadow: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    margin: 0;
    line-height: normal;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-toggle:hover {
    color: #0A7AFF;
    text-decoration: none;
    background: none;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-toggle-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-toggle-icon svg {
    width: 100%;
    height: 100%;
}



.cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.expanded .cxb-b2b-horizontal-filter-toggle-icon {
    transform: rotate(180deg);
}

/* First row with "Filter" label */
.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-first-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-label {
    font-weight: 500;
    color: #444;
    font-size: 16px;
    margin-left: 15px;
    margin-right: 10px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
    line-height: normal;
}

/* Responsive for collapsible filter */
@media (max-width: 768px) {
    .cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed {
        max-height: 60px;
        padding-bottom: 50px;
    }
    
    .cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-toggle {
        right: 5px;
        bottom: 5px;
    }
    
    .cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-attribute-values .cxb-b2b-horizontal-filter-value-item:nth-child(n+6) {
        display: none;
    }
}

@media (max-width: 480px) {
    .cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed {
        max-height: 70px;
        padding-bottom: 5px;
    }
    
    .cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container.collapsible.collapsed .cxb-b2b-horizontal-filter-attribute-values .cxb-b2b-horizontal-filter-value-item:nth-child(n+6) {
        display: none;
    }
}

/* Loading state for horizontal filter */
.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-item.loading {
    position: relative;
    color: transparent;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-item.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.cxb-b2b-horizontal-filter-container .cxb-b2b-horizontal-filter-value-item:not(.active).loading::after {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top: 2px solid #0A7AFF;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Horizontal Categories Styles
   ========================================================================== */

.cxb-b2b-horizontal-categories-wrapper {
    height: 200px;
    display: flex;
    align-items: center;
    position: relative;
    margin: 20px 0;
}

.cxb-horizontal-categories-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0;
    line-height: 1;
    backface-visibility: hidden;
}

.cxb-horizontal-categories-arrow:hover {
    background: #f0f6ff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.cxb-horizontal-categories-arrow:focus {
    outline: 2px solid #0A7AFF;
    outline-offset: 2px;
}

.cxb-horizontal-categories-prev {
    left: -19px;
}

.cxb-horizontal-categories-next {
    right: -19px;
}

.cxb-horizontal-categories-arrow.hidden {
    display: none;
}

.cxb-horizontal-categories-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 10px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.cxb-horizontal-categories-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.cxb-horizontal-categories-scroll {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 0 10px;
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 8px;
    width: 160px;
    flex-shrink: 0;
    margin: 0 9px;
    min-height: 150px;
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-item:hover {
    background-color: var(--cxb-global-element-color, #0A7AFF);
    color: #fff;
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-item:hover .cxb-horizontal-category-image-wrapper {
    border-color: rgba(255, 255, 255, 0.8);
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-item.active {
    background-color: var(--cxb-global-element-color, #0A7AFF);
    color: #fff;
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-item.active .cxb-horizontal-category-image-wrapper {
    border-color: rgba(255, 255, 255, 0.8);
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-image-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #ccc;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-name {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* 无图片分类样式 */
.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-no-image {
    justify-content: center;
    min-height: 150px;
}

.cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-no-image .cxb-horizontal-category-name {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    white-space: normal;
    line-height: 1.3;
}

/* Tablet responsive styles */
@media (max-width: 768px) {
    .cxb-b2b-horizontal-categories-wrapper {
        display: flex;
        height: auto !important;
        min-height: 130px;
        margin: 10px 0;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow {
        width: 28px;
        height: 28px;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow svg {
        width: 16px;
        height: 16px;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-horizontal-categories-prev.cxb-horizontal-categories-prev {
        left: -12px;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-horizontal-categories-next.cxb-horizontal-categories-next {
        right: -12px;
    }
    
    /* Reduce container margins for more space */
    .cxb-horizontal-categories-container {
        margin: 0 6px;
    }
    
    .cxb-horizontal-categories-scroll {
        padding: 0 4px;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-item {
        width: calc(50vw - 60px) !important;
        max-width: 80px;
        min-width: 80px;
        min-height: 110px;
        margin: 0 4px !important;
        padding: 6px !important;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-image-wrapper {
        width: 60px !important;
        height: 60px !important;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-image {
        width: 100%;
        height: 100%;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-name {
        font-size: 12px;
        line-height: 1.3;
        margin-top: 4px;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-count {
        font-size: 10px;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-no-image {
        min-height: 90px;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-no-image .cxb-horizontal-category-name {
        font-size: 12px;
    }
}

/* Mobile devices - ensure 2 full items visible */
@media (max-width: 480px) {
    .cxb-b2b-horizontal-categories-wrapper {
        height: auto !important;
        min-height: 110px;
        margin: 6px 0;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow {
        width: 24px;
        height: 24px;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow svg {
        width: 14px;
        height: 14px;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-horizontal-categories-prev.cxb-horizontal-categories-prev {
        left: -8px;
    }
    
    .cxb-b2b-page-background-wrapper .cxb-horizontal-categories-next.cxb-horizontal-categories-next {
        right: -8px;
    }
    
    /* Tighter container for maximum item space */
    .cxb-horizontal-categories-container {
        margin: 0 4px;
    }
    
    .cxb-horizontal-categories-scroll {
        padding: 0 2px;
    }
    
    /* Key: items sized so 2 fit with arrows and margins
       Viewport 375px - 2×(8px arrow) - 2×(4px container margin) - 2×(2px scroll padding) = 345px
       Each item: ~165px with margins → 2 items fit comfortably */
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-item {
        width: calc(50vw - 50px) !important;
        max-width: 80px;
        min-width: 80px;
        min-height: 95px;
        margin: 0 3px !important;
        padding: 5px 4px !important;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-image-wrapper {
        width: 60px !important;
        height: 60px !important;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-name {
        font-size: 11px;
        line-height: 1.2;
        margin-top: 3px;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-count {
        font-size: 9px;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-no-image {
        min-height: 75px;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-no-image .cxb-horizontal-category-name {
        font-size: 11px;
    }
}

/* Extra small devices (320px) - still 2 items visible */
@media (max-width: 360px) {
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-item {
        width: calc(50vw - 42px) !important;
        min-width: 80px;
        min-height: 88px;
        margin: 0 2px !important;
        padding: 4px 3px !important;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-image-wrapper {
        width: 60px !important;
        height: 60px !important;
    }
    
    .cxb-b2b-horizontal-categories-wrapper .cxb-horizontal-category-name {
        font-size: 10px;
    }
    
    .cxb-horizontal-categories-prev {
        left: -6px;
    }
    
    .cxb-horizontal-categories-next {
        right: -6px;
    }
}

/* ==========================================================================
   Global Form Input Styles
   ========================================================================== */
.cxb-b2b-template1-container input:not([type="checkbox"]):not([type="radio"]),
.cxb-b2b-template1-container textarea,
.cxb-b2b-template1-container select,
.cxb-b2b-template2-container input:not([type="checkbox"]):not([type="radio"]),
.cxb-b2b-template2-container textarea,
.cxb-b2b-template2-container select,
.cxb-b2b-template3-container input:not([type="checkbox"]):not([type="radio"]),
.cxb-b2b-template3-container textarea,
.cxb-b2b-template3-container select,
.cxb-b2b-products-taxonomy-container input:not([type="checkbox"]):not([type="radio"]),
.cxb-b2b-products-taxonomy-container textarea,
.cxb-b2b-products-taxonomy-container select,
.cxb-b2b-products-archive-container input:not([type="checkbox"]):not([type="radio"]),
.cxb-b2b-products-archive-container textarea,
.cxb-b2b-products-archive-container select,
.cxb-b2b-product-single-container input:not([type="checkbox"]):not([type="radio"]),
.cxb-b2b-product-single-container textarea,
.cxb-b2b-product-single-container select,
#cxb-b2b-quote-request-page input:not([type="checkbox"]):not([type="radio"]),
#cxb-b2b-quote-request-page textarea,
#cxb-b2b-quote-request-page select {
    background-color: #fff !important;
    color: #333 !important;
}

/* =====================================================================
 * P1 – Core Web Vitals: Gallery CLS fix (height adaptive layout)
 * Prevents layout shift caused by JS-driven height calculation.
 * ===================================================================== */
.cxb-b2b-product-single-container .cxb-b2b-gallery-main-image.cxb-b2b-gallery-main-image {
    overflow: hidden;
    min-height: 300px;
    max-height: 750px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* 确保容器不会因为图片尺寸属性而扩张 */
    box-sizing: border-box;
}

.cxb-b2b-product-single-container .cxb-b2b-gallery-main-image.cxb-b2b-gallery-main-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    /* 覆盖图片尺寸属性，防止容器扩张 */
    box-sizing: border-box;
}

/* Gallery thumbnails: reserve space to prevent CLS */
.cxb-b2b-product-single-container .cxb-b2b-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* =====================================================================
 * Responsive Gallery: Horizontal (left-right) layout for small screens
 * When screen height ≤ 900px, JS adds .cxb-b2b-gallery-layout-horizontal
 * (uses screen.availHeight — immune to browser zoom).
 * Thumbnails move to the left as a vertical strip, main image on the right.
 * ===================================================================== */
.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

/* Horizontal layout: share module stays below the gallery, not beside it */
.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal .cxb-b2b-share-container.gallery-share {
    flex: 0 0 100%;
    width: 100%;
    order: 99;
}

/* Horizontal layout: vertical thumbnails on the left */
.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal .cxb-b2b-gallery-thumbnails {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 5px 0 0;
    flex: 0 0 80px;
    max-width: 80px;
    order: -1;
    scrollbar-width: thin;
    scrollbar-color: #ddd #f5f5f5;
}

.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal .cxb-b2b-gallery-thumbnails::-webkit-scrollbar {
    width: 4px;
    height: auto;
}

.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal .cxb-b2b-gallery-thumbnails::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3px;
}

.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal .cxb-b2b-gallery-thumbnails::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal .cxb-b2b-gallery-thumb {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
}

/* Horizontal layout: main image takes remaining space.
 * flex-basis uses calc() so thumbnails (80px) + gap (10px) + main image
 * never exceed 100%, preventing accidental flex-wrap at any zoom level. */
.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal .cxb-b2b-gallery-main-image {
    flex: 1 1 calc(100% - 90px);
    min-width: 0;
    max-height: 600px;
}

/* Horizontal layout: icons inside main image container (moved by JS) */
.cxb-b2b-product-single-container .cxb-b2b-gallery-main.cxb-b2b-gallery-layout-horizontal .cxb-b2b-gallery-main-image .cxb-b2b-gallery-icons {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

/* =====================================================================
 * P1 – Moved from inline <style> in single-cxb_products.php
 * Moving to an enqueued file enables browser caching for these rules.
 * ===================================================================== */
        .cxb-b2b-product-tabs.cxb-b2b-product-tabs {
            margin-top: 30px;
            overflow: visible;
            transform: none;
        }
        .cxb-b2b-product-tabs.cxb-b2b-product-tabs .cxb-b2b-tabs-navigation.cxb-b2b-tabs-navigation {
            display: flex;
            flex-wrap: wrap;
            border-bottom: 2px solid #e0e0e0;
            margin-bottom: 20px;
            position: -webkit-sticky !important;
            position: sticky !important;
            top: var(--cxb-sticky-top, 0px) !important;
            background-color: white !important;
            z-index: 10; /* Above page content, below theme sticky headers */
            padding-top: 10px;
            padding-bottom: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: padding 0.25s ease, box-shadow 0.25s ease;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Note: sticky positioning creates a positioning context for absolute children (progress bar) */
        }
        
        /* === Scroll Progress Indicator === */
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-scroll-progress-container {
            position: absolute;
            top: 0;              /* Changed from bottom: 0 to top: 0 */
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #e0e0e0;
            overflow: hidden;
            z-index: 1;
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-scroll-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, 
                var(--cxb-primary-color, #0A7AFF) 0%, 
                var(--cxb-primary-color-hover, #0066d6) 100%);
            transition: width 0.1s ease-out;
            box-shadow: 0 0 8px rgba(10, 122, 255, 0.4);
        }
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-button {
            padding: 12px 12px;
            min-width: 130px;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            font-size: 16px;
            font-weight: 500;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: -2px;
            text-decoration: none;
            text-transform: none;
            letter-spacing: normal;
            line-height: normal;
            box-shadow: none;
            border-radius: 0;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
        }
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-button:hover {
            color: var(--cxb-primary-color, #0A7AFF);
            background: none;
            text-decoration: none;
        }
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-button.active {
            color: var(--cxb-primary-color, #0A7AFF);
            border-bottom-color: var(--cxb-primary-color, #0A7AFF);
            background: none;
            text-decoration: none;
        }
        .cxb-b2b-tab-pane {
            display: none;
            animation: fadeIn 0.3s ease;
        }
        .cxb-b2b-tab-pane.active {
            display: block;
        }
        .cxb-b2b-tab-content {
            padding: 20px 0;
        }
        .cxb-b2b-tab-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin: 30px 0 20px 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    width: 100%;
}
        .cxb-b2b-tab-section-title:first-child {
            margin-top: 0;
        }
        .cxb-b2b-tab-section-title:hover {
            background-color: transparent;
            box-shadow: none;
        }
        .cxb-b2b-tab-section-content {
    margin-bottom: 30px;
    color: #000;
}
        .cxb-b2b-spec-row {
            display: grid;
            grid-template-columns: 1fr 2fr;
            border-bottom: 1px solid #e0e0e0;
            padding: 0;
        }
        .cxb-b2b-spec-row:last-child {
            border-bottom: none;
        }
        .cxb-b2b-spec-name {
            padding: 12px 15px;
            font-weight: 600;
            color: #333;
            background: #f8f9fa;
            border-right: 1px solid #e0e0e0;
        }
        .cxb-b2b-spec-value {
            padding: 12px 15px;
            color: #666;
            background: white;
        }
        
        /* 规格表容器 */
        .cxb-b2b-specs-container {
            display: block;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }
        
        /* 网格布局 - 当属性数量大于2时 */
        .cxb-b2b-specs-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
        }
        
        .cxb-b2b-specs-grid .cxb-b2b-spec-row {
            display: flex;
            flex-direction: row;
            border: 1px solid #e0e0e0;
            border-bottom: none;
            border-right: none;
            margin: 0;
        }
        
        .cxb-b2b-specs-grid .cxb-b2b-spec-row:nth-child(2n) {
            border-right: 1px solid #e0e0e0;
        }
        
        .cxb-b2b-specs-grid .cxb-b2b-spec-row:nth-last-child(-n+2) {
            border-bottom: 1px solid #e0e0e0;
        }
        
        .cxb-b2b-specs-grid .cxb-b2b-spec-row:nth-child(2n+1):nth-last-child(-n+2),
        .cxb-b2b-specs-grid .cxb-b2b-spec-row:nth-child(2n+1):last-child {
            border-right: 1px solid #e0e0e0;
        }
        
        .cxb-b2b-specs-grid .cxb-b2b-spec-name {
            padding: 12px 15px;
            font-weight: 600;
            color: #333;
            background: #f8f9fa;
            border-right: 1px solid #e0e0e0;
            width: 33.333%;
        }
        
        .cxb-b2b-specs-grid .cxb-b2b-spec-value {
            padding: 12px 15px;
            color: #666;
            background: white;
            flex-grow: 1;
            width: 66.667%;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 产品详情页左右布局 */
        .cxb-b2b-product-main {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 40px;
        }
        .cxb-b2b-product-images {
            flex: 1 1 55%;
            min-width: 300px;
        }
        .cxb-b2b-product-summary {
            flex: 1 1 40%;
            min-width: 300px;
        }
        
        /* 产品画廊样式 */
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main {
            position: relative;
            margin-bottom: 15px;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-icons {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 10;
            display: flex;
            gap: 20px;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-icons a,
        .cxb-b2b-product-single-container .cxb-b2b-gallery-icons img {
            display: block;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-icons img {
            object-fit: contain;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main-image {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            background: #f9f9f9;
            height: auto;
            min-height: 300px;
            max-height: 750px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main-image img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
            cursor: zoom-in;
            object-fit: contain;
        }
        /* Subtle scale only when zoom is NOT active */
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main-image:not(.zoom-active):hover img {
            transform: scale(1.02);
        }
        /* Hide the original image when zoom overlay is visible */
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main-image.zoom-active img {
            opacity: 0;
        }

        /* ── Inner Zoom Overlay ── */
        .cxb-b2b-zoom-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            opacity: 0;
            pointer-events: none;
            z-index: 5;       /* below arrows (z-index:10), above image */
            transition: opacity 0.2s ease;
            cursor: crosshair;
            will-change: background-position;
        }
        .cxb-b2b-gallery-main-image.zoom-active .cxb-b2b-zoom-overlay {
            opacity: 1;
            pointer-events: auto;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main-image.zoom-active img {
            cursor: crosshair;
        }

        .cxb-b2b-product-single-container .cxb-b2b-gallery-main-image:hover .cxb-b2b-gallery-arrow {
            opacity: 1;
            pointer-events: auto;
            background: rgba(255, 255, 255, 1);
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.3);
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #333;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            opacity: 0;
            pointer-events: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
            text-transform: none;
            letter-spacing: normal;
            line-height: normal;
            appearance: none;
            -webkit-appearance: none;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow:hover {
            background: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow.prev {
            left: 15px;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow.next {
            right: 15px;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow.disabled {
            opacity: 0;
            cursor: not-allowed;
        }
        
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main-image:hover .cxb-b2b-gallery-arrow.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        /* SVG图标优化 */
        body .cxb-b2b-gallery-arrow svg,
        body .cxb-b2b-lightbox-arrow svg {
            display: block !important;
            pointer-events: none !important;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow svg {
            width: 32px;
            height: 32px;
        }
        body .cxb-b2b-lightbox-arrow svg {
            width: 32px !important;
            height: 32px !important;
        }
        
        /* 缩略图样式 */
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumbnails {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 10px 0;
            scrollbar-width: thin;
            scrollbar-color: #ddd #f5f5f5;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumbnails::-webkit-scrollbar {
            height: 6px;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumbnails::-webkit-scrollbar-track {
            background: #f5f5f5;
            border-radius: 3px;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumbnails::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 3px;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumb {
            flex: 0 0 auto;
            width: 80px;
            height: 80px;
            border: 1px solid transparent;
            border-radius: 6px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumb:hover {
            border-color: var(--cxb-primary-color, #0A7AFF);
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumb.active {
            border-color: var(--cxb-primary-color, #0A7AFF);
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Gallery video thumbnail play icon overlay */
        .cxb-b2b-product-single-container .cxb-b2b-gallery-thumb[data-type="video"] {
            position: relative;
        }
        .cxb-b2b-product-single-container .cxb-b2b-video-play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 2;
        }
        .cxb-b2b-product-single-container .cxb-b2b-video-play-overlay img {
            width: 36px;
            height: 36px;
            object-fit: contain;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
        }
        /* Gallery main image wrapper */
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main-img-wrap {
            display: contents;
        }
        /* Gallery video wrapper in main display */
        .cxb-b2b-product-single-container .cxb-b2b-gallery-video-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 6;
            cursor: default;
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-video-wrapper iframe,
        .cxb-b2b-product-single-container .cxb-b2b-gallery-video-wrapper video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        
        /* 灯箱样式 */
        .cxb-b2b-lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 2147483646;
            align-items: center;
            justify-content: center;
            /* Isolation ensures this lightbox is its own stacking context,
               preventing ANY child z-index from leaking out or being
               affected by external stacking contexts.                    */
            isolation: isolate;
        }
        .cxb-b2b-lightbox.active {
            display: flex;
        }
        .cxb-b2b-lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            z-index: 5;
        }
        .cxb-b2b-lightbox-img {
            max-width: 100%;
            max-height: 90vh;
            display: block;
            margin: 0 auto;
            /* Explicit low z-index ensures the image never stacks
               above the navigation arrows on any device              */
            position: relative;
            z-index: 1;
        }
        .cxb-b2b-lightbox-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: white;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;
            z-index: 20;
        }
        .cxb-b2b-lightbox-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        body .cxb-b2b-lightbox-arrow {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 50px !important;
            height: 50px !important;
            background: rgba(255, 255, 255, 0.1) !important;
            border: none !important;
            border-radius: 50% !important;
            color: white !important;
            font-size: 24px !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: background 0.3s ease !important;
            z-index: 15 !important;
        }
        body .cxb-b2b-lightbox-arrow:hover {
            background: rgba(255, 255, 255, 0.2) !important;
        }
        body .cxb-b2b-lightbox-arrow.prev {
            left: 20px !important;
            right: auto !important;
        }
        body .cxb-b2b-lightbox-arrow.next {
            right: 20px !important;
            left: auto !important;
        }
        .cxb-b2b-lightbox-thumbnails {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 10px;
            padding: 10px;
            overflow-x: auto;
            max-width: 90%;
            margin: 0 auto;
            z-index: 10;
        }
        .cxb-b2b-lightbox-thumb {
            width: 60px;
            height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            opacity: 0.6;
            transition: all 0.2s ease;
        }
        .cxb-b2b-lightbox-thumb:hover,
        .cxb-b2b-lightbox-thumb.active {
            opacity: 1;
            border-color: white;
        }
        .cxb-b2b-lightbox-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 右侧产品信息框 */
        .cxb-b2b-product-info-box {
            padding: 25px 30px;
            background: white;
            border-radius: 12px;
            border: 1px solid #eaeaea;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        .cxb-b2b-product-title {
            margin: 0 0 20px 0;
            font-size: 28px;
            font-weight: 700;
            color: #333;
            line-height: 1.3;
        }
        .cxb-b2b-product-short-description {
            margin: 0 0 25px 0;
            font-size: 16px;
            line-height: 1.6;
            color: #000 !important;
            padding-bottom: 25px;
            border-bottom: 1px solid #eee;
        }
        
        /* SKU选择器样式 */
        .cxb-b2b-page-background-wrapper .sku-selector {
            margin-bottom: 25px;
        }
        .cxb-b2b-page-background-wrapper .sku-selector h4 {
            margin: 0 0 12px 0;
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .cxb-b2b-page-background-wrapper .sku-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .cxb-b2b-page-background-wrapper .sku-btn {
            padding: 8px 14px;
            background: #f5f5f5;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            color: #555;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            min-height: 45px;
            min-width: 85px;
            justify-content: center;
            text-align: center;
        }
        .cxb-b2b-page-background-wrapper .sku-btn:hover {
            border-color: var(--cxb-primary-color, #0A7AFF);
            background: #f5f5f5;
            color: #333;
        }
        .cxb-b2b-page-background-wrapper .sku-btn.active {
            background: var(--cxb-primary-color, #0A7AFF);
            color: white;
            border-color: var(--cxb-primary-color, #0A7AFF);
        }
        .cxb-b2b-page-background-wrapper .sku-btn-image {
            width: 45px;
            height: 45px;
            object-fit: cover;
            border-radius: 4px;
        }
        .cxb-b2b-page-background-wrapper .sku-btn-text {
            flex-grow: 1;
        }
        .cxb-b2b-page-background-wrapper .sku-btn-price {
            display: block;
            font-size: 11px;
            color: var(--cxb-primary-color, #0A7AFF);
            margin-top: 2px;
        }
        
        /* 询盘按钮区域 */
        .cxb-b2b-inquiry-section {
            margin-top: 30px;
            padding-top: 25px;
            border-top: 1px solid #eee;
        }
        .cxb-b2b-inquiry-button {
            display: inline-block;
            padding: 16px 32px;
            background: var(--cxb-primary-color, #0A7AFF);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            transition: background 0.3s ease;
            width: 100%;
            border: none;
            cursor: pointer;
        }
        .cxb-b2b-inquiry-button:hover {
            background: var(--cxb-primary-color-hover, #0066d6);
        }
        
        @media (max-width: 768px) {
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation.cxb-b2b-tabs-navigation {
                flex-direction: column;
                border-bottom: none;
            }
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-button {
                border-bottom: 1px solid #e0e0e0;
                margin-bottom: 0;
            }
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-button.active {
                border-bottom: 2px solid var(--cxb-primary-color, #0A7AFF);
            }
            /* Mobile progress indicator styling */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-scroll-progress-container {
                height: 4px; /* Slightly thicker on mobile for better visibility */
            }
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-scroll-progress-bar {
                box-shadow: 0 0 6px rgba(10, 122, 255, 0.5); /* Enhanced glow on mobile */
            }
            .cxb-b2b-tab-section-title {
                font-size: 20px;
                padding: 15px 20px;
                margin: 30px 0 20px 0;
                color: #000;
            }
            .cxb-b2b-spec-row {
                grid-template-columns: 1fr 2fr;
                border-bottom: 1px solid #e0e0e0;
            }
            .cxb-b2b-spec-name {
                border-right: 1px solid #e0e0e0;
                border-bottom: none;
                padding: 10px 12px;
                font-size: 14px;
            }
            .cxb-b2b-spec-value {
                padding: 10px 12px;
                font-size: 12px;
            }
            
            /* 移动端强制单列布局 */
            .cxb-b2b-specs-grid {
                grid-template-columns: 1fr;
            }
            .cxb-b2b-specs-grid .cxb-b2b-spec-row {
                border: 1px solid #e0e0e0;
                border-bottom: none;
                border-right: 1px solid #e0e0e0;
                margin: 0;
            }
            .cxb-b2b-specs-grid .cxb-b2b-spec-row:last-child {
                border-bottom: 1px solid #e0e0e0;
            }
            .cxb-b2b-specs-grid .cxb-b2b-spec-name {
                border-right: 1px solid #e0e0e0;
                border-bottom: none;
            }
            
            /* 移动端响应式布局 */
            .cxb-b2b-product-main {
                flex-direction: column;
                gap: 30px;
            }
            .cxb-b2b-product-images,
            .cxb-b2b-product-summary {
                flex: 1 1 100%;
            }
            .cxb-b2b-product-single-container .cxb-b2b-gallery-main-image {
                margin-bottom: 10px;
            }
            /* Disable inner-zoom on mobile / touch devices */
            .cxb-b2b-zoom-overlay {
                display: none !important;
            }
            .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow {
                width: 36px;
                height: 36px;
                font-size: 18px;
            }
            .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow.prev {
                left: 10px;
            }
            .cxb-b2b-product-single-container .cxb-b2b-gallery-arrow.next {
                right: 10px;
            }
            .cxb-b2b-product-single-container .cxb-b2b-gallery-thumb {
                width: 60px;
                height: 60px;
            }
            .cxb-b2b-product-info-box {
                padding: 25px;
            }
            .cxb-b2b-product-title {
                font-size: 24px;
            }
            .cxb-b2b-page-background-wrapper .sku-options {
                gap: 6px;
            }
            .cxb-b2b-page-background-wrapper .sku-btn {
                padding: 6px 10px;
                min-width: 70px;
                min-height: 40px;
                font-size: 12px;
            }
            .cxb-b2b-page-background-wrapper .sku-btn-image {
                width: 35px;
                height: 35px;
            }
            .cxb-b2b-page-background-wrapper .sku-btn-price {
                font-size: 10px;
            }
            .cxb-b2b-inquiry-button {
                padding: 14px 12px;
                font-size: 15px;
            }
            body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow {
                width: 40px !important;
                height: 40px !important;
                min-width: 40px !important;
                min-height: 40px !important;
                font-size: 20px !important;
                /* Mobile: no circular button — arrow icon only */
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                color: #cccccc !important;
                box-shadow: none !important;
                z-index: 10002 !important;
            }
            body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow.prev {
                left: 6px !important;
                right: auto !important;
            }
            body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow.next {
                right: 6px !important;
                left: auto !important;
            }
            /* 移动端SVG图标调整 */
            body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow svg {
                width: 26px !important;
                height: 26px !important;
            }
            body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow svg {
                width: 28px !important;
                height: 28px !important;
                display: block !important;
                stroke: #cccccc !important;
                stroke-width: 2.5 !important;
                fill: none !important;
            }
            .cxb-b2b-lightbox-thumb {
                width: 50px;
                height: 50px;
            }
        }
        .cxb-b2b-product-single-container .cxb-b2b-gallery-main.single-image .cxb-b2b-gallery-arrow {
            display: none !important;
        }
        
        /* === Sticky Tab Navigation - Enhanced === */
        /* Note: top offset for admin-bar and theme sticky headers is now
           handled dynamically via --cxb-sticky-top CSS variable set by JS. */
        
        /* === Solution 1: Root-level CSS protection against third-party plugins ===
           Tidio, Intercom, and similar chat plugins set transform, filter, or
           will-change on <html> or <body> via JavaScript.  This creates a new
           CSS containing block, which silently breaks BOTH position:fixed and
           position:sticky — elements resolve relative to the transformed ancestor
           instead of the viewport, causing them to shift to the page bottom.

           CSS !important in a STYLESHEET beats inline styles set by JS
           (e.g. element.style.transform = '...') because inline styles without
           !important lose to stylesheet !important.
           This is zero-runtime-cost, race-condition-proof, and declarative.    */
        html,
        body {
            transform: none !important;
            perspective: none !important;
            filter: none !important;
            will-change: auto !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            contain: none !important;
            container-type: normal !important;
        }

        /* Tidio-specific: prevent Tidio widget containers from creating
           containing blocks that interfere with sticky positioning.         */
        #tidio-chat,
        [id*="tidio"],
        [data-tidio],
        iframe[src*="tidio"] {
            transform: none !important;
            filter: none !important;
            perspective: none !important;
            will-change: auto !important;
        }

        /* Generic third-party chat widget protection.
           These selectors cover Tawk.to, Intercom, Zendesk, Drift, Crisp,
           HubSpot, LiveChat, JivoChat, and similar floating chat plugins.  */
        [id*="tawk"],
        #intercom-container, [id*="intercom-frame"],
        [id*="drift"], [id*="crisp"],
        [id*="hubspot-messages"],
        #livechat-compact-container,
        #jivo-iframe-container,
        [id*="beacon-container"] {
            transform: none !important;
            filter: none !important;
            perspective: none !important;
            will-change: auto !important;
        }

        /* Ensure ALL parent containers support sticky positioning
           — covers both the tab navigation AND the product gallery.
           Safari/WebKit breaks position:sticky when ANY ancestor has
           overflow other than visible, or has a transform / will-change.
           Also neutralise filter, backdrop-filter, perspective, contain,
           and container-type — all of which create new containing blocks. */
        .cxb-b2b-page-background-wrapper,
        .cxb-b2b-product-single-container,
        .cxb-b2b-single-content-wrapper,
        article.cxb-b2b-product-single,
        .cxb-b2b-product-main,
        .cxb-b2b-product-images-col,
        .cxb-b2b-product-bottom-layout,
        .cxb-b2b-content-column,
        .cxb-b2b-product-content-wrapper,
        .cxb-b2b-product-content,
        .cxb-b2b-product-tabs.cxb-b2b-product-tabs {
            overflow: visible !important;
            transform: none !important;
            will-change: auto !important;
            filter: none !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            perspective: none !important;
            contain: none !important;
            container-type: normal !important;
        }
        
        /* Enhanced shadow when sticky is active (optional visual feedback) */
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation.cxb-b2b-tabs-navigation.is-sticky {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        }
        
        /* === Mobile Horizontal Scroll Menu === */
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tabs-nav-wrapper {
            position: relative;
            width: 100%;
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tabs-scroll-container {
            position: relative;
            overflow: hidden;
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tabs-scroll-content {
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            cursor: grab;
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tabs-scroll-content::-webkit-scrollbar {
            display: none;
        }
        
        /* Navigation arrows */
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid #e0e0e0;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 0;
            margin: 0;
            text-decoration: none;
            line-height: normal;
            appearance: none;
            -webkit-appearance: none;
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow:hover {
            background: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow.disabled {
            opacity: 0.3;
            pointer-events: none;
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow.prev {
            left: 5px;
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow.next {
            right: 5px;
        }
        
        .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow svg {
            width: 16px;
            height: 16px;
            fill: #333;
        }
        
        /* Mobile horizontal scroll menu - ALWAYS on mobile */
        @media screen and (max-width: 768px) {
            /* Remove flex-wrap on mobile - always single line */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation.cxb-b2b-tabs-navigation {
                flex-wrap: nowrap;
            }
            
            /* Show arrows on mobile */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow {
                display: flex;
            }
            
            /* Compact horizontal layout */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tabs-scroll-content .cxb-b2b-tab-button {
                flex: 0 0 auto;
                white-space: nowrap;
                padding: 10px 16px;
                min-width: auto;
                font-size: 14px;
                transition: padding 0.25s ease, font-size 0.25s ease;
            }
            
            /* Container padding for arrows */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tabs-scroll-container {
                padding: 0 40px;
            }
            
            /* Even more compact when sticky */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation.cxb-b2b-tabs-navigation.is-sticky {
                padding-top: 5px;
                padding-bottom: 5px;
            }
            
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation.cxb-b2b-tabs-navigation.is-sticky .cxb-b2b-tabs-scroll-content .cxb-b2b-tab-button {
                padding: 8px 14px;
                font-size: 13px;
            }
        }

        /* === Mobile Full-Width Tab Navigation Layout === */
        @media screen and (max-width: 768px) {
            /* Break out of parent padding to span full viewport width */
            .cxb-b2b-product-tabs.cxb-b2b-product-tabs .cxb-b2b-tabs-navigation.cxb-b2b-tabs-navigation {
                width: 100vw !important;
                margin-left: calc(-50vw + 50%) !important;
                padding-top: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                box-sizing: border-box !important;
            }

            /* Sticky state: also flush to top, full width */
            .cxb-b2b-product-tabs.cxb-b2b-product-tabs .cxb-b2b-tabs-navigation.cxb-b2b-tabs-navigation.is-sticky {
                padding-top: 0 !important;
            }

            /* Vertically center nav arrows within the tab navigation container */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow {
                top: 50% !important;
                transform: translateY(-50%) !important;
            }

            /* Prev arrow flush to left edge */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow.prev {
                left: 0 !important;
            }

            /* Next arrow flush to right edge */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tab-nav-arrow.next {
                right: 0 !important;
            }

            /* Nav wrapper: no top margin */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tabs-nav-wrapper {
                margin-top: 0 !important;
            }

            /* Scroll container: remove extra arrow padding, flush edges */
            .cxb-b2b-product-tabs .cxb-b2b-tabs-navigation .cxb-b2b-tabs-scroll-container {
                padding-left: 32px !important;
                padding-right: 32px !important;
            }
        }

/* ==========================================================================
   Global Mobile Inner Spacing: 10px left/right on mobile (768px and below)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* --- Archive & Taxonomy pages (general containers) --- */
    .cxb-b2b-products-taxonomy-container,
    .cxb-b2b-products-archive-container {
        padding: 20px 10px !important;
        margin: 10px auto;
    }

    /* --- Template containers (category pages) --- */
    .cxb-b2b-template1-container {
        padding: 0 10px !important;
    }

    .cxb-b2b-template2-container {
        padding: 0 10px !important;
    }

    .cxb-b2b-template3-container {
        padding: 0 10px !important;
    }

    /* --- Template 2 & 3 breadcrumb alignment --- */
    .cxb-b2b-template2-container .cxb-b2b-breadcrumbs,
    .cxb-b2b-template3-container .cxb-b2b-breadcrumbs {
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* --- Product Detail (Single) page --- */
    .cxb-b2b-product-single-container {
        padding: 0 10px 20px 10px !important;
    }

    /* --- Product Description section (the key area that was too wide) --- */
    .cxb-b2b-product-content {
        padding: 0 10px !important;
    }

    /* --- Related products section on product detail page --- */
    .cxb-b2b-related-products {
        padding: 20px 10px !important;
    }

    /* --- SEO content area --- */
    .cxb-b2b-seo-content {
        padding: 15px 10px !important;
    }

    /* --- Product inquiry section --- */
    .cxb-b2b-product-inquiry {
        margin-left: 0;
        margin-right: 0;
    }

    /* --- Content with sidebar --- */
    .cxb-b2b-content-with-sidebar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --- Description / Bottom description areas in templates --- */
    .cxb-b2b-template2-description,
    .cxb-b2b-template3-description {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --- Pagination alignment --- */
    .cxb-b2b-products-archive-container .navigation.pagination,
    .cxb-b2b-products-archive-container .nav-links,
    .cxb-b2b-products-taxonomy-container .navigation.pagination,
    .cxb-b2b-products-taxonomy-container .nav-links {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* --- Mobile pagination: responsive layout --- */
    .cxb-b2b-page-background-wrapper .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .cxb-b2b-page-background-wrapper .page-numbers {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 4px;
    }

    .cxb-b2b-page-background-wrapper .prev.page-numbers,
    .cxb-b2b-page-background-wrapper .next.page-numbers {
        font-size: 13px;
        padding: 0 8px;
        white-space: nowrap;
    }

    .cxb-b2b-page-background-wrapper .page-numbers.cxb-b2b-pagination-hidden {
        display: none !important;
    }

    /* --- Child categories section --- */
    .cxb-b2b-child-categories {
        padding: 10px !important;
    }

    /* --- No products message --- */
    .cxb-b2b-no-products {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --- Template layouts margin-top adjustment for mobile --- */
    .cxb-b2b-template1-layout.has-sidebar,
    .cxb-b2b-template2-layout.has-sidebar,
    .cxb-b2b-template3-layout.has-sidebar {
        margin-top: 0;
    }
    
    /* --- Sidebar column margin-top adjustment for mobile --- */
    .cxb-b2b-sidebar-column {
        margin-top: 10px;
    }

    /* --- Child categories margin-bottom adjustment for mobile --- */
    .cxb-b2b-child-categories {
        margin-bottom: 10px;
    }

    /* --- Horizontal filter container margin-bottom adjustment for mobile --- */
    .cxb-b2b-horizontal-filter-container.cxb-b2b-horizontal-filter-container {
        margin-bottom: 10px;
    }

    /* --- Margin-bottom 25px to 10px adjustment for mobile (Archive, Taxonomy, Template2, Template3) --- */
    .cxb-b2b-breadcrumbs,
    .cxb-b2b-template2-banner,
    .cxb-b2b-template3-banner,
    .cxb-b2b-single-banner,
    .cxb-b2b-banner-shortcode,
    .cxb-b2b-sidebar-module,
    .cxb-b2b-product-content-title,
    .cxb-b2b-page-background-wrapper .sku-selector {
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   Extra-small screens (375px and below): reduce to 5px side spacing
   ========================================================================== */
@media screen and (max-width: 375px) {

    /* --- Archive & Taxonomy pages --- */
    .cxb-b2b-products-taxonomy-container,
    .cxb-b2b-products-archive-container {
        padding: 15px 5px !important;
    }

    /* --- Template containers --- */
    .cxb-b2b-template1-container,
    .cxb-b2b-template2-container,
    .cxb-b2b-template3-container {
        padding: 0 5px !important;
    }

    /* --- Template 2 & 3 breadcrumb alignment --- */
    .cxb-b2b-template2-container .cxb-b2b-breadcrumbs,
    .cxb-b2b-template3-container .cxb-b2b-breadcrumbs {
        margin-left: -5px;
        margin-right: -5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* --- Product Detail page --- */
    .cxb-b2b-product-single-container {
        padding: 0 5px 15px 5px !important;
    }

    /* --- Product Description section --- */
    .cxb-b2b-product-content {
        padding: 0 5px !important;
    }

    /* --- Related products --- */
    .cxb-b2b-related-products {
        padding: 15px 5px !important;
    }

    /* --- SEO content --- */
    .cxb-b2b-seo-content {
        padding: 10px 5px !important;
    }

    /* --- Content with sidebar --- */
    .cxb-b2b-content-with-sidebar {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* --- Description areas in templates --- */
    .cxb-b2b-template2-description,
    .cxb-b2b-template3-description {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* --- Pagination --- */
    .cxb-b2b-products-archive-container .navigation.pagination,
    .cxb-b2b-products-archive-container .nav-links,
    .cxb-b2b-products-taxonomy-container .navigation.pagination,
    .cxb-b2b-products-taxonomy-container .nav-links {
        padding-left: 5px;
        padding-right: 5px;
    }

    .cxb-b2b-page-background-wrapper .page-numbers {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
        padding: 0 3px;
    }

    .cxb-b2b-page-background-wrapper .prev.page-numbers,
    .cxb-b2b-page-background-wrapper .next.page-numbers {
        font-size: 12px;
        padding: 0 6px;
    }

    /* --- Child categories --- */
    .cxb-b2b-child-categories {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* --- No products message --- */
    .cxb-b2b-no-products {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ==========================================================================
   Checkbox group styles for quote request form
   ========================================================================== */
.cxb-b2b-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
    align-content: flex-start;
}

.cxb-b2b-checkbox-group label {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 0;
    line-height: 1;
}

.cxb-b2b-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}

.cxb-b2b-checkbox-group span {
    margin-left: 5px;
    white-space: nowrap;
    vertical-align: middle;
}

/* 移除checkbox标签的红色星号 */
.cxb-b2b-checkbox-group label:after {
    content: none !important;
}

/* 防止checkbox组布局问题 */
.cxb-b2b-checkbox-group {
    width: 100%;
    min-width: 0; /* 防止flex溢出 */
}

/* 当选项太多或文字超宽时自动换行 */
.cxb-b2b-checkbox-group {
    flex-wrap: wrap;
}

/* 确保标签不会超出容器 */
.cxb-b2b-checkbox-group label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 在移动端强制垂直排列 */
@media (max-width: 767px) {
    .cxb-b2b-checkbox-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .cxb-b2b-checkbox-group label {
        margin-right: 0;
    }
}

/* ============================================================
   content-product-card: Layout & Spacing Overrides
   ============================================================ */

/* --- 1. Product Image: 1:1 Aspect Ratio, Fully Visible --- */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail,
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail-left {
    overflow: hidden;
}

.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-image-wrapper {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
}

.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail img,
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail-left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Ensure secondary (hover-switch) images also respect contain */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail.has-second-image .product-image-secondary,
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail-left.has-second-image .product-image-secondary {
    object-fit: contain;
}

/* --- 2. "Add to Quote" Button: 75% Height on Desktop Only --- */
/* Desktop: reduce vertical padding to 75% of base (8px → 6px, 10px → 7.5px) */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-add-to-quote-button,
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-inquiry-button {
    padding-top: 6px;
    padding-bottom: 6px;
}

@media screen and (min-width: 1200px) {
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-add-to-quote-button,
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-inquiry-button {
        padding-top: 7.5px;
        padding-bottom: 7.5px;
    }
}

/* Mobile: restore original button sizing — no height reduction */
@media screen and (max-width: 768px) {
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-add-to-quote-button,
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-inquiry-button {
        padding-top: revert;
        padding-bottom: revert;
    }
}

/* --- 3. Desktop: Total Vertical Spacing = 30px, Bottom Padding ≤ 30px ---
   Distribution across 6 gaps (image→title, title→excerpt, excerpt→features,
   features→meta, meta→actions, actions-top): 5px each = 30px total            */

/* Excerpt inner <p> — remove any default browser margin */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-excerpt p {
    margin: 0;
}

/* Image → Title */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-info {
    padding-top: 5px;
}

/* Title → next element */
.cxb-b2b-page-background-wrapper .content-product-card h6.cxb-b2b-product-title {
    margin-bottom: 5px;
}

/* Excerpt → next element */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-excerpt {
    margin-bottom: 5px;
}

/* Features → next element */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-features {
    margin-bottom: 5px;
}

/* Category meta → next element */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-meta {
    margin: 0 0 5px 0;
    padding-bottom: 0;
}

/* Actions top gap */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-actions {
    padding-top: 5px;
}

/* Button group — no extra bottom margin */
.cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-button-group {
    margin-bottom: 0;
}

/* Bottom inner padding: button to card bottom edge ≤ 30px */
.cxb-b2b-page-background-wrapper .content-product-card {
    padding-bottom: 15px;
}

/* --- 4. Mobile: Total Vertical Spacing = 25px, Bottom Padding = 25px ---
   Distribution across 6 gaps: ~4px each (4×6 = 24px, +1px on info-top = 25px) */

@media screen and (max-width: 768px) {
    /* Image → Title */
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-info {
        padding-top: 5px;
    }

    /* Title → next element */
    .cxb-b2b-page-background-wrapper .content-product-card h6.cxb-b2b-product-title {
        margin-bottom: 4px;
    }

    /* Excerpt → next element */
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-excerpt {
        margin-bottom: 4px;
    }

    /* Features → next element */
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-features {
        margin-bottom: 4px;
    }

    /* Category meta → next element */
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-meta {
        margin: 0 0 4px 0;
        padding-bottom: 0;
    }

    /* Actions top gap */
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-actions {
        padding-top: 4px;
    }

    /* Button group */
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-button-group {
        margin-bottom: 0;
    }

    /* Thumbnail negative margin — no extra bottom gap */
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-thumbnail {
        margin-bottom: 0;
    }

    /* Bottom inner padding: reduced from >70px to 25px */
    .cxb-b2b-page-background-wrapper .content-product-card {
        padding-bottom: 25px;
    }
}

@media screen and (max-width: 480px) {
    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-info {
        padding-top: 5px;
    }

    .cxb-b2b-page-background-wrapper .content-product-card h6.cxb-b2b-product-title {
        margin-bottom: 4px;
    }

    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-excerpt {
        margin-bottom: 4px;
    }

    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-features {
        margin-bottom: 4px;
    }

    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-meta {
        margin: 0 0 4px 0;
        padding-bottom: 0;
    }

    .cxb-b2b-page-background-wrapper .content-product-card .cxb-b2b-product-actions {
        padding-top: 4px;
    }

    /* Bottom inner padding: 25px */
    .cxb-b2b-page-background-wrapper .content-product-card {
        padding-bottom: 15px;
    }
}

/* ==========================================================================
   THEME OVERRIDE SHIELD
   Specificity-boosted rules that prevent theme CSS from breaking plugin UI.

   Strategy:
   1. Element-level neutralizer: resets the specific CSS properties that
      popular themes (Astra, GeneratePress, OceanWP, Kadence, TwentyTwentyFour)
      set on bare elements (button, a, svg, input) — scoped inside the plugin
      wrapper so it never touches theme content.
   2. Component-level shields: doubled-class selectors (.class.class) on each
      critical component to lock in exact dimensions, colors, and spacing.
   3. SVG isolation: prevents theme "svg { fill: ... }" from flooding
      stroke-based Tabler icons.

   The wrapper class .cxb-b2b-page-background-wrapper exists on every
   plugin template page and wraps ALL plugin output.
   ========================================================================== */

/* ---- 1. Element-level neutralizer ---- */

/* Buttons: neutralize theme resets on <button> and <a> used as buttons */
.cxb-b2b-page-background-wrapper button,
.cxb-b2b-page-background-wrapper [type="button"],
.cxb-b2b-page-background-wrapper [type="submit"] {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Links: prevent theme link color/decoration from bleeding into plugin buttons */
.cxb-b2b-page-background-wrapper a.cxb-b2b-inquiry-button,
.cxb-b2b-page-background-wrapper a.cxb-b2b-view-details-button,
.cxb-b2b-page-background-wrapper a.cxb-b2b-email-inquiry-btn,
.cxb-b2b-page-background-wrapper a.cxb-b2b-extra-button {
    text-decoration: none;
    color: inherit;
    box-shadow: none;
    outline-offset: 0;
}
.cxb-b2b-page-background-wrapper a.cxb-b2b-inquiry-button:hover,
.cxb-b2b-page-background-wrapper a.cxb-b2b-inquiry-button:focus,
.cxb-b2b-page-background-wrapper a.cxb-b2b-inquiry-button:visited,
.cxb-b2b-page-background-wrapper a.cxb-b2b-view-details-button:hover,
.cxb-b2b-page-background-wrapper a.cxb-b2b-view-details-button:focus,
.cxb-b2b-page-background-wrapper a.cxb-b2b-view-details-button:visited,
.cxb-b2b-page-background-wrapper a.cxb-b2b-email-inquiry-btn:hover,
.cxb-b2b-page-background-wrapper a.cxb-b2b-email-inquiry-btn:focus,
.cxb-b2b-page-background-wrapper a.cxb-b2b-email-inquiry-btn:visited,
.cxb-b2b-page-background-wrapper a.cxb-b2b-extra-button:hover,
.cxb-b2b-page-background-wrapper a.cxb-b2b-extra-button:focus,
.cxb-b2b-page-background-wrapper a.cxb-b2b-extra-button:visited {
    text-decoration: none;
    color: inherit;
    box-shadow: none;
}

/* Links inside product cards: prevent theme underline/color on all anchors */
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card a,
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card a:hover,
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card a:focus,
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card a:visited {
    text-decoration: none;
    color: inherit;
    box-shadow: none;
}

/* SVGs: prevent theme "svg { fill: currentColor }" from flooding stroke-based icons.
   Plugin uses Tabler icons (fill="none" + stroke="currentColor") throughout. */
.cxb-b2b-page-background-wrapper svg[fill="none"],
.cxb-b2b-page-background-wrapper svg[stroke="currentColor"] {
    fill: none;
}

/* Form elements: isolate quantity inputs and search fields from theme styling */
.cxb-b2b-page-background-wrapper input[type="number"],
.cxb-b2b-page-background-wrapper input[type="text"],
.cxb-b2b-page-background-wrapper input[type="search"],
.cxb-b2b-page-background-wrapper select {
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}


/* ---- 2. Component-level shields (doubled-class specificity) ---- */

/* --- Gallery Thumbnail Navigation Arrows (circular) --- */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav.cxb-b2b-gallery-nav {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    line-height: 0;
    font-size: 0;
    text-indent: 0;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav.cxb-b2b-gallery-nav::before {
    border-color: #666;
    border-style: solid;
    border-width: 2px 2px 0 0;
    width: 8px;
    height: 8px;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background: none;
}

/* --- Product Gallery Left/Right Arrows (circular, on product detail page) --- */
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 0;
    text-indent: 0;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
}

body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow svg {
    width: 32px;
    height: 32px;
    display: block;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}

/* --- Slider Navigation Arrows (circular) --- */
.cxb-b2b-page-background-wrapper .cxb-b2b-slider-arrow.cxb-b2b-slider-arrow {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
}

/* --- Horizontal Categories Navigation Arrows --- */
.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #333 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0;
    line-height: 1;
    backface-visibility: hidden;
}

.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow:hover {
    background: #f0f6ff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow:focus {
    outline: 2px solid #0A7AFF;
    outline-offset: 2px;
}

.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-prev.cxb-horizontal-categories-prev {
    left: -19px;
}

.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-next.cxb-horizontal-categories-next {
    right: -19px;
}

/* Ensure SVG stroke is not overridden by theme - fixed black color */
.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow svg {
    stroke: #333 !important;
    fill: none;
}

/* Alternative high-specificity selector for Elementor widgets outside page wrapper */
body .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow,
.cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow {
    color: #333 !important;
}

body .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow svg,
.cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow svg {
    stroke: #333 !important;
    fill: none;
}

/* --- Lightbox Navigation Arrows --- */
/* The lightbox has two variants: .cxb-b2b-lightbox (template) and
   .cxb-b2b-lightbox-overlay (JS-generated). Cover both. */
.cxb-b2b-lightbox .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow,
.cxb-b2b-lightbox-overlay .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow,
body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px;
    min-height: 50px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10002 !important;
    font-size: 24px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
}

.cxb-b2b-lightbox .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow:hover,
body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.cxb-b2b-lightbox .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow svg,
body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    stroke: currentColor;
    fill: none;
    pointer-events: none !important;
}

/* --- Inquiry / Email Buttons (anchor + button variants) --- */
.cxb-b2b-page-background-wrapper .cxb-b2b-inquiry-button.cxb-b2b-inquiry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
}

/* --- View Details Button --- */
.cxb-b2b-page-background-wrapper .cxb-b2b-view-details-button.cxb-b2b-view-details-button {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
}

/* --- Add to Quote Button --- */
.cxb-b2b-page-background-wrapper .cxb-b2b-add-to-quote-button.cxb-b2b-add-to-quote-button {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    gap: 7px;
    -webkit-appearance: none;
    appearance: none;
}

/* --- Template 3 footer: View Details must match Email Inquiry & Add to Quote ---
   The doubled-class rule above (0,3,0) forces view-details to 13px / 8px 12px / no border.
   Override with (0,4,0) so all three template3 footer buttons are identical. */
.cxb-b2b-page-background-wrapper .cxb-b2b-template3-product-footer .cxb-b2b-view-details-button.cxb-b2b-view-details-button,
.cxb-b2b-page-background-wrapper .cxb-b2b-template3-product-footer .cxb-b2b-email-inquiry-button.cxb-b2b-email-inquiry-button,
.cxb-b2b-page-background-wrapper .cxb-b2b-template3-product-footer .cxb-b2b-add-to-quote-button.cxb-b2b-add-to-quote-button {
    padding: 9px 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
}

/* Template 3 footer mobile: all buttons same height at smaller size */
@media (max-width: 480px) {
    .cxb-b2b-page-background-wrapper .cxb-b2b-template3-product-footer .cxb-b2b-add-to-quote-button.cxb-b2b-add-to-quote-button,
    .cxb-b2b-page-background-wrapper .cxb-b2b-template3-product-footer .cxb-b2b-email-inquiry-button.cxb-b2b-email-inquiry-button {
        padding: 8px 8px;
        font-size: 14px;
        border: none;
        line-height: 1.4;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto;
    }
}

/* --- Extra Action Button --- */
.cxb-b2b-page-background-wrapper .cxb-b2b-extra-button.cxb-b2b-extra-button {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    gap: 8px;
    -webkit-appearance: none;
    appearance: none;
}

/* --- Email Inquiry Icon Button (top-right corner of product cards) --- */
.cxb-b2b-page-background-wrapper .cxb-b2b-email-inquiry-btn.cxb-b2b-email-inquiry-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: none;
    border: none;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: auto;
    min-height: auto;
    line-height: 0;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-email-inquiry-btn.cxb-b2b-email-inquiry-btn svg {
    width: 20px;
    height: 20px;
    color: var(--cxb-primary-color, #0A7AFF);
    stroke: currentColor;
    fill: none;
}

/* --- Floating Quote Basket Toggle (bottom-right circle) ---
   This <button> is appended to <body>, OUTSIDE .cxb-b2b-page-background-wrapper.
   Must use body-scoped selector with !important to resist theme button overrides. */
body .cxb-b2b-quote-basket-toggle.cxb-b2b-quote-basket-toggle {
    position: fixed !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    background-color: var(--cxb-primary-color, #0A7AFF) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 122, 255, 0.3) !important;
    cursor: pointer !important;
    z-index: 9997 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: all 0.3s ease !important;
}

body .cxb-b2b-quote-basket-toggle.cxb-b2b-quote-basket-toggle:hover {
    background-color: var(--cxb-primary-color-hover, #085FCC) !important;
    transform: translateY(-2px) !important;
}

body .cxb-b2b-quote-basket-toggle-icon.cxb-b2b-quote-basket-toggle-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

body .cxb-b2b-quote-basket-toggle-count.cxb-b2b-quote-basket-toggle-count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background-color: #dc3545 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

/* Floating basket toggle hidden state */
body .cxb-b2b-quote-basket-toggle.cxb-b2b-quote-basket-toggle.hidden {
    display: none !important;
}

/* --- Downloads Section Shields --- */
body .cxb-b2b-downloads-container.cxb-b2b-downloads-container {
    margin-top: 20px !important;
    overflow-x: auto !important;
}

body .cxb-b2b-downloads-table.cxb-b2b-downloads-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 15px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
}

body .cxb-b2b-downloads-table.cxb-b2b-downloads-table th {
    background: #f8f9fa !important;
    padding: 14px 16px !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: #333 !important;
    border-bottom: 1px solid #d0d0d0 !important;
    border-top: 1px solid #d0d0d0 !important;
    border-right: 1px solid #d0d0d0 !important;
}

/* Download action header - right aligned */
body .cxb-b2b-downloads-table.cxb-b2b-downloads-table th.cxb-b2b-downloads-action {
    text-align: right !important;
}

body .cxb-b2b-downloads-table.cxb-b2b-downloads-table th:first-child {
    border-left: 1px solid #d0d0d0 !important;
}

body .cxb-b2b-downloads-table.cxb-b2b-downloads-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #d0d0d0 !important;
    border-right: 1px solid #d0d0d0 !important;
    vertical-align: middle !important;
}

/* Download action cell - right aligned content */
body .cxb-b2b-downloads-table.cxb-b2b-downloads-table td.cxb-b2b-download-action {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

body .cxb-b2b-downloads-table.cxb-b2b-downloads-table td:first-child {
    border-left: 1px solid #d0d0d0 !important;
}

body .cxb-b2b-downloads-table.cxb-b2b-downloads-table td:nth-child(1) {
    background-color: white !important;
}

body .cxb-b2b-downloads-table.cxb-b2b-downloads-table td:nth-child(2) {
    background-color: #f8f9fa !important;
}

body .cxb-b2b-download-button.cxb-b2b-download-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, var(--cxb-primary-color, #0A7AFF) 0%, color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000) 100%) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: 0 3px 6px rgba(128, 128, 128, 0.2) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

body .cxb-b2b-download-button.cxb-b2b-download-button:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000000) 0%, color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 60%, #000000) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(128, 128, 128, 0.3) !important;
    color: white !important;
}

body .cxb-b2b-download-icon.cxb-b2b-download-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .cxb-b2b-download-icon.cxb-b2b-download-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
    fill: none !important;
    flex-shrink: 0 !important;
}



/* ---- 3. SVG icon isolation ---- */

/* Button icons (SVG/font) inside all plugin buttons */
.cxb-b2b-page-background-wrapper .cxb-b2b-button-icon.cxb-b2b-button-icon {
    display: inline-flex;
    align-items: center;
    color: inherit;
    fill: none;
    flex-shrink: 0;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-button-icon.cxb-b2b-button-icon svg {
    stroke: currentColor;
    color: inherit;
    fill: none;
    width: 1em;
    height: 1em;
}

/* Gallery arrow SVGs (stroke-based SVGs inside gallery buttons) */
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow svg {
    stroke: currentColor;
    fill: none;
    display: block !important;
    pointer-events: none !important;
}

/* Gallery thumbnail nav and slider arrow SVGs (fill-based Material icons) */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav svg,
.cxb-b2b-page-background-wrapper .cxb-b2b-slider-arrow svg {
    fill: currentColor;
    color: inherit;
    width: 18px;
    height: 18px;
    display: block;
}

/* Lightbox arrow SVGs — cover both parent variants */
.cxb-b2b-lightbox .cxb-b2b-lightbox-arrow svg,
body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow svg {
    stroke: currentColor;
    fill: none;
    display: block !important;
    pointer-events: none !important;
}

/* Floating basket toggle SVG — stroke-based Tabler icon */
body .cxb-b2b-quote-basket-toggle-icon.cxb-b2b-quote-basket-toggle-icon svg {
    stroke: currentColor;
    color: inherit;
    fill: none;
}

/* Share button SVGs (mix of fill-based and stroke-based) */
.cxb-b2b-page-background-wrapper .cxb-b2b-share-main-icon {
    stroke: currentColor;
    fill: none;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-share-link svg {
    fill: currentColor;
}


/* ---- 4. Product card layout isolation ---- */

.cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card img {
    max-width: 100%;
    height: auto;
    display: block;
    border: none;
    box-shadow: none;
}

/* Button group layout inside product cards */
.cxb-b2b-page-background-wrapper .cxb-b2b-button-group.cxb-b2b-button-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}


/* ---- 5. Prevent plugin styles from leaking to theme header/footer ----
   The plugin only outputs content inside .cxb-b2b-page-background-wrapper.
   The body-class-scoped header/footer rules at the top of this file are safe
   because they only apply on the dedicated quote page (body.cxb-b2b-quote-page).
   No other plugin rule targets unscoped theme elements. */


/* ---- 6. Responsive overrides at same specificity ---- */
@media (max-width: 768px) {
    .cxb-b2b-page-background-wrapper .cxb-b2b-gallery-nav.cxb-b2b-gallery-nav {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
    }

    body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow svg {
        width: 24px;
        height: 24px;
    }

    .cxb-b2b-page-background-wrapper .cxb-b2b-slider-arrow.cxb-b2b-slider-arrow {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        /* Mobile: no circular button — arrow icon only */
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        color: #cccccc !important;
        box-shadow: none !important;
        z-index: 10002 !important;
    }

    body .cxb-b2b-lightbox-arrow.cxb-b2b-lightbox-arrow svg {
        width: 28px !important;
        height: 28px !important;
        stroke: #cccccc !important;
        stroke-width: 2.5 !important;
        fill: none !important;
    }

    body .cxb-b2b-quote-basket-toggle.cxb-b2b-quote-basket-toggle {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    .cxb-b2b-page-background-wrapper .cxb-b2b-email-inquiry-btn.cxb-b2b-email-inquiry-btn svg {
        width: 18px;
        height: 18px;
    }

    .cxb-b2b-page-background-wrapper .cxb-b2b-inquiry-button.cxb-b2b-inquiry-button,
    .cxb-b2b-page-background-wrapper .cxb-b2b-view-details-button.cxb-b2b-view-details-button,
    .cxb-b2b-page-background-wrapper .cxb-b2b-add-to-quote-button.cxb-b2b-add-to-quote-button {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ==========================================================================
   OPTIMISTIC UI — Instant visual feedback for Add to Quote button
   ========================================================================== */

/* Immediate success flash while AJAX is in flight */
.cxb-b2b-page-background-wrapper .cxb-b2b-add-to-quote-button.cxb-b2b-optimistic-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-color: #28a745 !important;
    transform: scale(1.02);
    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    pointer-events: none; /* Prevent double-click during flight */
}

/* Subtle pulse animation on the basket toggle when count changes */
@keyframes cxb-basket-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

body .cxb-b2b-quote-basket-toggle.cxb-b2b-count-bump {
    animation: cxb-basket-bump 0.3s ease;
}

/* ==========================================================================
   ASTRA THEME COMPATIBILITY — Product Detail (Single) Page
   ==========================================================================
   Astra wraps post content in containers like .ast-separate-container,
   .ast-article-single, and article.ast-article-post that apply their own
   background-color (#fff) and box-shadow to images.  The archive pages are
   unaffected because Astra uses different wrapper logic for archive vs
   single post types.

   Fix A — Force Astra's content wrappers to inherit the plugin's global
           background on the single product page, matching archive behaviour.
   Fix B — Strip unwanted box-shadow / filter from gallery images.

   All selectors are scoped to the plugin wrapper so they cannot leak into
   non-plugin pages.
   ========================================================================== */

/* ---- Fix A: Restore proper page background colour ---- */

/*
 * Astra's "separate container" layout applies a white background to the
 * article wrapper and its parent containers.  We neutralise those
 * backgrounds for any container that wraps our single-product output,
 * letting the plugin's --cxb-page-background-color shine through.
 *
 * The approach mirrors how archive pages already work: the outer
 * .cxb-b2b-page-background-wrapper carries the correct background,
 * so every Astra container between that wrapper and our content must be
 * transparent.
 */

/* Astra "separate containers" layout */
.cxb-b2b-page-background-wrapper .ast-separate-container,
.cxb-b2b-page-background-wrapper .ast-article-single,
.cxb-b2b-page-background-wrapper article.ast-article-post,
.cxb-b2b-page-background-wrapper .ast-container,
.cxb-b2b-page-background-wrapper .ast-separate-container .ast-article-single,
.cxb-b2b-page-background-wrapper .ast-separate-container .ast-article-post {
    background-color: transparent !important;
    background: transparent !important;
}

/* Astra may also set backgrounds on #primary / .content-area on single pages */
.cxb-b2b-page-background-wrapper #primary,
.cxb-b2b-page-background-wrapper .content-area,
.cxb-b2b-page-background-wrapper .site-content,
.cxb-b2b-page-background-wrapper .site-main,
.cxb-b2b-page-background-wrapper .entry-content {
    background-color: transparent !important;
    background: transparent !important;
}

/*
 * When Astra's containers sit ABOVE (i.e. outside) the plugin wrapper,
 * we use body-class scoping.  WordPress adds the post-type class to <body>,
 * so this only fires on our custom post type pages.
 */
body.single-cxb_products .ast-separate-container .ast-article-single,
body.single-cxb_products .ast-separate-container .ast-article-post,
body.single-cxb_products .ast-separate-container article,
body.single-cxb_products .ast-separate-container #primary,
body.single-cxb_products .ast-separate-container .content-area,
body.single-cxb_products .ast-separate-container .site-main,
body.single-cxb_products .ast-separate-container .entry-content,
body.single-cxb_products .ast-separate-container .ast-container {
    background-color: inherit !important;
    background: inherit !important;
}

/* Remove Astra's padding / margin on the article container that creates
   a visible "card" look inconsistent with the rest of the site */
body.single-cxb_products .ast-separate-container .ast-article-single,
body.single-cxb_products .ast-separate-container .ast-article-post {
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Fix B: Remove unwanted drop shadows from gallery images ---- */

/*
 * Astra applies box-shadow and sometimes filter: drop-shadow() to img
 * elements globally or within article containers.  We neutralise these
 * specifically for the product gallery context so other site images are
 * unaffected.
 *
 * Doubled-class selectors (.class.class) are used for extra specificity
 * to beat Astra's rules without relying solely on !important.
 */

/* Main gallery image */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-main-image.cxb-b2b-gallery-main-image img {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    border: none !important;
    outline: none !important;
}

/* Gallery thumbnail images */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-thumb.cxb-b2b-gallery-thumb img {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    border: none !important;
    outline: none !important;
}

/* Gallery slider images (mobile swipe gallery) */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-slider img {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Catch-all for any img inside the single-product gallery wrapper */
.cxb-b2b-product-single-container .cxb-b2b-product-gallery img,
.cxb-b2b-product-single-container .cxb-b2b-gallery-main img,
.cxb-b2b-product-single-container .cxb-b2b-gallery-thumbnails img {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Also protect the gallery main-image container itself from theme shadows */
.cxb-b2b-page-background-wrapper .cxb-b2b-gallery-main-image.cxb-b2b-gallery-main-image {
    box-shadow: none !important;
    filter: none !important;
}

/* ---- Fix C: Force centering of Astra parent containers on single product pages ---- */

/*
 * ROOT CAUSE:  Astra's get_header() opens wrapper elements
 * (#page → .site-content → .ast-container → #primary) that use flexbox
 * and reserve sidebar width.  Even when no sidebar is present, #primary
 * does not expand to 100 % of .ast-container, and the flex row may
 * start from the left — pushing the plugin's centered content to the
 * right on both desktop and mobile.
 *
 * STRATEGY:  On single-cxb_products pages we override the Astra
 * layout wrappers so they become simple full-width, block-level
 * containers.  This lets the plugin's own max-width / margin:0 auto
 * handle centering correctly.  All selectors are scoped to the
 * body.single-cxb_products class so other post types are untouched.
 */

/* --- C-1  .ast-container: disable flex row, go full-width block --- */
/* Scoped to #content so the header's .ast-container is untouched */
body.single-cxb_products #content .ast-container,
body.single-cxb_products .site-content .ast-container {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* --- C-2  #primary / .content-area: full width, no float --- */
body.single-cxb_products #primary,
body.single-cxb_products .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: none !important;           /* prevent flex-grow from Astra */
}

/* --- C-3  Hide sidebar space reservation on single product pages --- */
body.single-cxb_products #secondary,
body.single-cxb_products .widget-area.secondary {
    display: none !important;
    width: 0 !important;
}

/* --- C-4  .site-content: neutralise flex / grid that may offset children --- */
body.single-cxb_products .site-content,
body.single-cxb_products #content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- C-5  .site-main: remove any theme offset --- */
body.single-cxb_products .site-main,
body.single-cxb_products .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}

/* --- C-6  Astra "boxed" layout: #page may have a constrained width.
            Allow it to stay centred but ensure children fill it. --- */
body.single-cxb_products.ast-separate-container #primary,
body.single-cxb_products.ast-plain-container #primary,
body.single-cxb_products.ast-page-builder-template #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    flex: none !important;
}

/* --- C-7  Ensure the plugin wrapper itself centres correctly --- */
body.single-cxb_products .cxb-b2b-page-background-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
}

body.single-cxb_products .cxb-b2b-product-single-container {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
    position: relative !important;   /* anchor for any absolute children */
}

/* --- C-8  Mobile ≤ 921 px  (Astra's primary mobile breakpoint) ---------- */
/*
 * Astra switches to its mobile layout at 921 px.  Below this width the
 * theme may:
 *   • add side padding to #page, .ast-container, or article wrappers
 *   • switch .ast-container to a different flex/grid mode
 *   • inject mobile-specific margins on .ast-article-single/post
 *
 * We reset ALL relevant wrappers to full-width blocks so the plugin's
 * own max-width + margin:0 auto handles centering.
 */
@media (max-width: 921px) {
    /* Core content wrappers (NOT #page / .site — those contain the header) */
    body.single-cxb_products #content .ast-container,
    body.single-cxb_products .site-content .ast-container,
    body.single-cxb_products #primary,
    body.single-cxb_products .content-area,
    body.single-cxb_products .site-content,
    body.single-cxb_products #content,
    body.single-cxb_products .site-main,
    body.single-cxb_products .entry-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Article wrapper – ALL Astra layout variants, not just separate-container */
    body.single-cxb_products article,
    body.single-cxb_products .ast-article-single,
    body.single-cxb_products .ast-article-post,
    body.single-cxb_products article.post,
    body.single-cxb_products article.type-cxb_products {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Astra's grid row/column system (used in some Astra layout configs) */
    body.single-cxb_products .ast-row,
    body.single-cxb_products .ast-col-md-12,
    body.single-cxb_products .ast-col-lg-12 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Hide sidebar space */
    body.single-cxb_products #secondary,
    body.single-cxb_products .widget-area.secondary {
        display: none !important;
        width: 0 !important;
    }

    /* Plugin wrapper – ensure it fills the cleared parent */
    body.single-cxb_products .cxb-b2b-page-background-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* The main product container – symmetric centering */
    body.single-cxb_products .cxb-b2b-product-single-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        box-sizing: border-box !important;
    }
}

/* --- C-9  Phone ≤ 768 px  (common mobile breakpoint) ------------------- */
/*
 * Astra and many themes add additional mobile padding at 768 px.
 * We reinforce all overrides at this narrower breakpoint.
 */
@media (max-width: 768px) {
    body.single-cxb_products #content .ast-container,
    body.single-cxb_products .site-content .ast-container,
    body.single-cxb_products #primary,
    body.single-cxb_products .content-area,
    body.single-cxb_products .site-content,
    body.single-cxb_products #content,
    body.single-cxb_products .site-main,
    body.single-cxb_products .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.single-cxb_products article,
    body.single-cxb_products .ast-article-single,
    body.single-cxb_products .ast-article-post {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* --- C-10  Small phone ≤ 544 px  (Astra's small-device breakpoint) ----- */
/*
 * Astra has a second mobile breakpoint at 544 px with yet another set
 * of padding values.  We catch that as well.
 */
@media (max-width: 544px) {
    body.single-cxb_products #content .ast-container,
    body.single-cxb_products .site-content .ast-container,
    body.single-cxb_products #primary,
    body.single-cxb_products .content-area,
    body.single-cxb_products .site-content,
    body.single-cxb_products .site-main,
    body.single-cxb_products .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.single-cxb_products article,
    body.single-cxb_products .ast-article-single,
    body.single-cxb_products .ast-article-post {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* --- C-11  Astra separate-container mobile article fix (all breakpoints) */
/*
 * The earlier Fix A only targeted .ast-separate-container variants.
 * Astra's plain-container and page-builder-template modes also apply
 * article-level padding/margins that differ on mobile.  We cover all.
 */
body.single-cxb_products.ast-plain-container article,
body.single-cxb_products.ast-page-builder-template article,
body.single-cxb_products.ast-plain-container .ast-article-single,
body.single-cxb_products.ast-page-builder-template .ast-article-single,
body.single-cxb_products.ast-plain-container .ast-article-post,
body.single-cxb_products.ast-page-builder-template .ast-article-post {
    padding: 0 !important;
    margin: 0 !important;
}


/* ==========================================================================
   ASTRA THEME COMPATIBILITY — Archive & Taxonomy Pages
   ==========================================================================
   Astra uses different wrapper logic for archive/taxonomy pages compared to
   single post pages. This fix ensures the plugin's background color applies
   consistently across all product listing pages.
   ========================================================================== */

/* ---- Fix A: Restore proper page background colour for archives ---- */

/* Astra containers inside plugin wrapper */
.cxb-b2b-page-background-wrapper .ast-separate-container,
.cxb-b2b-page-background-wrapper .ast-archive-container,
.cxb-b2b-page-background-wrapper .ast-blog,
.cxb-b2b-page-background-wrapper .ast-container,
.cxb-b2b-page-background-wrapper #primary,
.cxb-b2b-page-background-wrapper .content-area,
.cxb-b2b-page-background-wrapper .site-content,
.cxb-b2b-page-background-wrapper .site-main,
.cxb-b2b-page-background-wrapper .entry-content {
    background-color: transparent !important;
    background: transparent !important;
}

/* Body-class scoping for archive/taxonomy pages */
/* .ast-container is scoped to #content so header's .ast-container is untouched */
body.archive #content .ast-container,
body.archive #primary,
body.archive .content-area,
body.archive .site-content,
body.archive .site-main,
body.archive .entry-content,
body.tax-cxb_product_category #content .ast-container,
body.tax-cxb_product_category #primary,
body.tax-cxb_product_category .content-area,
body.tax-cxb_product_category .site-content,
body.tax-cxb_product_category .site-main,
body.tax-cxb_product_category .entry-content,
body.tax-cxb_product_tag #content .ast-container,
body.tax-cxb_product_tag #primary,
body.tax-cxb_product_tag .content-area,
body.tax-cxb_product_tag .site-content,
body.tax-cxb_product_tag .site-main,
body.tax-cxb_product_tag .entry-content,
body.post-type-archive-cxb_products #content .ast-container,
body.post-type-archive-cxb_products #primary,
body.post-type-archive-cxb_products .content-area,
body.post-type-archive-cxb_products .site-content,
body.post-type-archive-cxb_products .site-main,
body.post-type-archive-cxb_products .entry-content {
    background-color: inherit !important;
    background: inherit !important;
}

/* Remove padding/margin that creates card-like appearance */
body.archive .ast-separate-container .ast-article-single,
body.archive .ast-separate-container .ast-article-post,
body.archive .ast-separate-container article,
body.tax-cxb_product_category .ast-separate-container .ast-article-single,
body.tax-cxb_product_category .ast-separate-container .ast-article-post,
body.tax-cxb_product_category .ast-separate-container article,
body.tax-cxb_product_tag .ast-separate-container .ast-article-single,
body.tax-cxb_product_tag .ast-separate-container .ast-article-post,
body.tax-cxb_product_tag .ast-separate-container article,
body.post-type-archive-cxb_products .ast-separate-container .ast-article-single,
body.post-type-archive-cxb_products .ast-separate-container .ast-article-post,
body.post-type-archive-cxb_products .ast-separate-container article {
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Fix B: Ensure proper centering and layout ---- */
/* Scoped to #content so header's .ast-container is untouched */
body.archive #content .ast-container,
body.archive .site-content .ast-container,
body.tax-cxb_product_category #content .ast-container,
body.tax-cxb_product_category .site-content .ast-container,
body.tax-cxb_product_tag #content .ast-container,
body.tax-cxb_product_tag .site-content .ast-container,
body.post-type-archive-cxb_products #content .ast-container,
body.post-type-archive-cxb_products .site-content .ast-container {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

body.archive #primary,
body.archive .content-area,
body.tax-cxb_product_category #primary,
body.tax-cxb_product_category .content-area,
body.tax-cxb_product_tag #primary,
body.tax-cxb_product_tag .content-area,
body.post-type-archive-cxb_products #primary,
body.post-type-archive-cxb_products .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: none !important;
}

/* Hide sidebar space reservation */
body.archive #secondary,
body.archive .widget-area.secondary,
body.tax-cxb_product_category #secondary,
body.tax-cxb_product_category .widget-area.secondary,
body.tax-cxb_product_tag #secondary,
body.tax-cxb_product_tag .widget-area.secondary,
body.post-type-archive-cxb_products #secondary,
body.post-type-archive-cxb_products .widget-area.secondary {
    display: none !important;
    width: 0 !important;
}

/* Ensure plugin wrapper fills container */
body.archive .cxb-b2b-page-background-wrapper,
body.tax-cxb_product_category .cxb-b2b-page-background-wrapper,
body.tax-cxb_product_tag .cxb-b2b-page-background-wrapper,
body.post-type-archive-cxb_products .cxb-b2b-page-background-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
}

body.archive .cxb-b2b-products-archive-container,
body.tax-cxb_product_category .cxb-b2b-products-taxonomy-container,
body.tax-cxb_product_tag .cxb-b2b-products-taxonomy-container,
body.post-type-archive-cxb_products .cxb-b2b-products-archive-container {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
    position: relative !important;
}

/* Mobile breakpoints (mirror single product fixes) */
@media (max-width: 921px) {
    /* Content wrappers only (NOT #page / .site — those contain the header) */
    /* .ast-container scoped to #content so header's .ast-container is untouched */
    body.archive #content .ast-container,
    body.archive .site-content .ast-container,
    body.archive #primary,
    body.archive .content-area,
    body.archive .site-content,
    body.archive #content,
    body.archive .site-main,
    body.archive .entry-content,
    body.tax-cxb_product_category #content .ast-container,
    body.tax-cxb_product_category .site-content .ast-container,
    body.tax-cxb_product_category #primary,
    body.tax-cxb_product_category .content-area,
    body.tax-cxb_product_category .site-content,
    body.tax-cxb_product_category #content,
    body.tax-cxb_product_category .site-main,
    body.tax-cxb_product_category .entry-content,
    body.tax-cxb_product_tag #content .ast-container,
    body.tax-cxb_product_tag .site-content .ast-container,
    body.tax-cxb_product_tag #primary,
    body.tax-cxb_product_tag .content-area,
    body.tax-cxb_product_tag .site-content,
    body.tax-cxb_product_tag #content,
    body.tax-cxb_product_tag .site-main,
    body.tax-cxb_product_tag .entry-content,
    body.post-type-archive-cxb_products #content .ast-container,
    body.post-type-archive-cxb_products .site-content .ast-container,
    body.post-type-archive-cxb_products #primary,
    body.post-type-archive-cxb_products .content-area,
    body.post-type-archive-cxb_products .site-content,
    body.post-type-archive-cxb_products #content,
    body.post-type-archive-cxb_products .site-main,
    body.post-type-archive-cxb_products .entry-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.archive article,
    body.archive .ast-article-single,
    body.archive .ast-article-post,
    body.archive article.post,
    body.archive article.type-cxb_products,
    body.tax-cxb_product_category article,
    body.tax-cxb_product_category .ast-article-single,
    body.tax-cxb_product_category .ast-article-post,
    body.tax-cxb_product_category article.post,
    body.tax-cxb_product_category article.type-cxb_products,
    body.tax-cxb_product_tag article,
    body.tax-cxb_product_tag .ast-article-single,
    body.tax-cxb_product_tag .ast-article-post,
    body.tax-cxb_product_tag article.post,
    body.tax-cxb_product_tag article.type-cxb_products,
    body.post-type-archive-cxb_products article,
    body.post-type-archive-cxb_products .ast-article-single,
    body.post-type-archive-cxb_products .ast-article-post,
    body.post-type-archive-cxb_products article.post,
    body.post-type-archive-cxb_products article.type-cxb_products {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ---- Cross-theme safety: GeneratePress, OceanWP, Kadence ---- */

/*
 * Other popular themes use similar patterns.  These rules provide
 * forward-compatible protection using the same scoping strategy.
 */

/* GeneratePress */
body.single-cxb_products .inside-article {
    background-color: inherit !important;
    background: inherit !important;
    padding: 0 !important;
}

/* OceanWP */
body.single-cxb_products .content-area .site-main article {
    background-color: inherit !important;
    background: inherit !important;
}

/* Kadence */
body.single-cxb_products .entry-content-wrap,
body.single-cxb_products .content-wrap article {
    background-color: inherit !important;
    background: inherit !important;
}

/* Cross-theme safety for Archive & Taxonomy Pages */

/* GeneratePress */
body.archive .inside-article,
body.tax-cxb_product_category .inside-article,
body.tax-cxb_product_tag .inside-article,
body.post-type-archive-cxb_products .inside-article {
    background-color: inherit !important;
    background: inherit !important;
    padding: 0 !important;
}

/* OceanWP */
body.archive .content-area .site-main article,
body.tax-cxb_product_category .content-area .site-main article,
body.tax-cxb_product_tag .content-area .site-main article,
body.post-type-archive-cxb_products .content-area .site-main article {
    background-color: inherit !important;
    background: inherit !important;
}

/* Kadence */
body.archive .entry-content-wrap,
body.archive .content-wrap article,
body.tax-cxb_product_category .entry-content-wrap,
body.tax-cxb_product_category .content-wrap article,
body.tax-cxb_product_tag .entry-content-wrap,
body.tax-cxb_product_tag .content-wrap article,
body.post-type-archive-cxb_products .entry-content-wrap,
body.post-type-archive-cxb_products .content-wrap article {
    background-color: inherit !important;
    background: inherit !important;
}
/* ��Ʒ������Ϣ��Ƭ��ʽ */
.cxb-b2b-product-specifications-info-card {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Info card: left-right table style (one attribute per row) */
.cxb-b2b-specs-info-card-table .cxb-b2b-specs-container {
    display: block;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.cxb-b2b-specs-info-card-table .cxb-b2b-spec-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
}
.cxb-b2b-specs-info-card-table .cxb-b2b-spec-row:last-child {
    border-bottom: none;
}
.cxb-b2b-specs-info-card-table .cxb-b2b-spec-name {
    padding: 10px 14px;
    font-weight: 600;
    color: #333;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    font-size: 14px;
}
.cxb-b2b-specs-info-card-table .cxb-b2b-spec-value {
    padding: 10px 14px;
    color: #666;
    background: white;
    font-size: 14px;
}

.cxb-b2b-specs-card-groups {
    display: flex;
    flex-wrap: wrap;
    border-radius: 8px;
    overflow: hidden;
}
.cxb-b2b-specs-card-group {
    flex: 1;
    min-width: 120px;
    border-right: 1px solid white;
}
.cxb-b2b-specs-card-group:last-child {
    border-right: none;
}
.cxb-b2b-specs-card-group-header {
    background-color: var(--cxb-primary-color, #0A7AFF);
    color: white;
    padding: 10px 5px;
    text-align: center;
    font-weight: bold;
}
.cxb-b2b-specs-card-group-value {
    background-color: #f5f5f5;
    color: black;
    padding: 10px 5px;
    text-align: center;
}
/* ��Ӧʽ���� */
@media (max-width: 768px) {
    .cxb-b2b-specs-card-group {
        min-width: 100px;
    }
}
@media (max-width: 480px) {
    .cxb-b2b-specs-card-group {
        min-width: 80px;
    }
    .cxb-b2b-specs-card-group-header,
    .cxb-b2b-specs-card-group-value {
        font-size: 14px;
        padding: 8px 3px;
    }
}

/* ============================================================
   cxb Product Search — Elementor Widget & Shortcode
   Dropdown is absolutely positioned (overlay, no layout shift).
   ============================================================ */
.nbb2b-cxb-search {
    position: relative;
    width: 100%;
}
.nbb2b-cxb-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.nbb2b-cxb-search-input {
    width: 100%;
    height: 40px;
    padding: 0 60px 0 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
}
.nbb2b-cxb-search-input:focus {
    border-color: var(--cxb-primary-color, #0A7AFF);
}
.nbb2b-cxb-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    line-height: 0;
}
.nbb2b-cxb-search-icon:hover {
    color: #333;
}
.nbb2b-cxb-search-clear {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
}
.nbb2b-cxb-search-clear:hover {
    color: #333;
}

/* Dropdown: absolute overlay — does NOT push content down */
.nbb2b-cxb-search-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    max-height: 360px;
    overflow-y: auto;
}
.nbb2b-cxb-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
}
.nbb2b-cxb-search-item:last-child {
    border-bottom: none;
}
.nbb2b-cxb-search-item:hover,
.nbb2b-cxb-search-item:focus {
    background: #f8f9fa;
}
.nbb2b-cxb-search-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #f5f5f5;
}
.nbb2b-cxb-search-title {
    font-size: 13px;
    line-height: 1.35;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nbb2b-cxb-search-no {
    padding: 16px 12px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* ============================================================
   Sidebar Product Search Module
   ============================================================ */
.cxb-b2b-product-search-wrapper {
    position: relative;
}
.cxb-b2b-product-search-input-wrap {
    position: relative;
}
.cxb-b2b-product-search-input {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    background: #fff;
}
.cxb-b2b-product-search-input:focus {
    border-color: var(--cxb-primary-color, #0A7AFF);
}
.cxb-b2b-product-search-icon,
.cxb-b2b-product-search-spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    line-height: 0;
}
.cxb-b2b-product-search-spinner {
    display: none;
}
.cxb-b2b-product-search-spinner svg {
    animation: cxb-search-spin 1s linear infinite;
}
@keyframes cxb-search-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.cxb-b2b-product-search-results {
    display: none;
    margin-top: 8px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
    max-height: 320px;
    overflow-y: auto;
}
.cxb-b2b-product-search-results:empty {
    display: none !important;
}
.cxb-b2b-product-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}
.cxb-b2b-product-search-result-item:last-child {
    border-bottom: none;
}
.cxb-b2b-product-search-result-item:hover {
    background: #f8f9fa;
}
.cxb-b2b-product-search-result-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}
.cxb-b2b-product-search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cxb-b2b-product-search-result-title {
    font-size: 13px;
    line-height: 1.3;
    color: #333;
}
.cxb-b2b-product-search-no-results {
    padding: 12px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* ============================================================
   Minimalist Hidden Template
   Card shows only thumbnail + title in the document flow.
   On hover an absolutely-positioned panel overlays content
   below — page height and grid layout are never affected.
   ============================================================ */

/* --- Card: must allow the panel to overflow downward ---
   Override both the base overflow:hidden and the
   page-background-wrapper catch-all that also set it.       */
.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden,
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden {
    overflow: visible;
    height: auto;
    align-self: start;
    /* No padding-bottom transition — card height must remain constant
       to prevent grid row recalculation and page jitter.
       The expandable panel overlaps the bottom padding area instead.   */
    transition: box-shadow 0.3s ease,
                border-color 0.3s ease,
                border-bottom-color 0.3s ease,
                filter 0.3s ease,
                border-radius 0.3s ease-out;
}

.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover {
    transform: none;
    /* NO padding-bottom change — card height stays constant.
       The expandable panel overlaps the bottom padding area visually. */
    /* Hide the bottom border so no line appears between card and
       expanded panel — they read as one unified block            */
    border-bottom-color: transparent !important;
    border-color: var(--cxb-card-border-hover-color, #cccccc);
    border-bottom-color: transparent !important;
    /* No per-element box-shadow — it creates a visible shadow at
       the card/panel junction even with identical values.        */
    box-shadow: none !important;
    /* filter: drop-shadow wraps the entire painted area — card +
       absolutely-positioned expandable — as ONE silhouette.
       No internal shadows, only the outer perimeter.             */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.10))
            drop-shadow(0 1px 3px rgba(0, 0, 0, 0.06));
    /* Establish stacking context above neighbouring cards so the
       expandable overlay and its shadow render on top            */
    z-index: 10;
}

/* The thumbnail needs overflow:visible so the tooltip on the MH
   quote icon can escape above the thumbnail boundary.
   Image clipping (zoom, rounded corners) moves to the inner
   .cxb-b2b-product-image-wrapper instead.                  */
.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden .cxb-b2b-product-thumbnail {
    overflow: visible;
}
.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden .cxb-b2b-product-thumbnail .cxb-b2b-product-image-wrapper {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

/* --- product-info contains only the title in this mode ---  */
.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden .cxb-b2b-product-info {
    flex-grow: 0;
}

/* --- Remove spacing below the title PERMANENTLY so the expandable
   panel always sits at a fixed position — no layout shift on hover.
   Override both base margin and page-background-wrapper margin.     */
.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden h6.cxb-b2b-product-title,
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden h6.cxb-b2b-product-title {
    margin-bottom: 0;
}

/* --- Expandable overlay panel ---
   Positioned relative to the card (position:relative already
   set on .cxb-b2b-product-card).
   Uses a PURE FADE animation — padding and position are set
   to their final values at all times.  Only opacity, visibility,
   and pointer-events change on hover.
   Overlaps the card's bottom padding (16px) + border (1px) so
   the panel appears flush — WITHOUT changing the card's height. */
.cxb-b2b-minimalist-expandable {
    position: absolute;
    /* align with the card's outer border edges */
    left: -1px;
    right: -1px;
    /* Overlap the card's bottom padding (16px) + border (1px) so
       the panel sits flush against the card content — seamless
       visual connection without any card height change.           */
    top: calc(100% - 17px);
    background-color: inherit;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    /* Padding at final values always — no animated expansion     */
    padding: 12px 16px 16px 16px;
    z-index: 20;
    /* Hidden state: invisible, non-interactive, but fully laid
       out at its natural height (no max-height clipping)         */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Only fade opacity — no sliding, no size change.            */
    transition: opacity 0.3s ease-out,
                visibility 0.3s ease-out,
                border-color 0.3s ease-out;
}

/* Reveal on card hover — pure fade, no movement */
.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover .cxb-b2b-minimalist-expandable {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Match the card's hover border via the same CSS variable */
    border-color: var(--cxb-card-border-hover-color, #cccccc);
    /* No box-shadow on the panel — the card's filter: drop-shadow()
       already wraps the entire card+panel composite as one unit  */
    box-shadow: none !important;
    /* Inherit the card's computed hover background-color so both
       surfaces are guaranteed identical — one continuous colour   */
    background-color: inherit !important;
}

/* Keep the card bottom-border visually connected to the panel
   by squaring the bottom corners only while expanded          */
.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* --- Spacing inside the panel (field margins) ---
   The page-background-wrapper rules also set these;
   duplicate at matching specificity so they apply.           */
.cxb-b2b-minimalist-expandable .cxb-b2b-product-excerpt {
    margin-bottom: 5px;
}
.cxb-b2b-minimalist-expandable .cxb-b2b-product-features {
    margin-bottom: 5px;
}
.cxb-b2b-minimalist-expandable .cxb-b2b-product-meta {
    margin: 0 0 5px 0;
    padding-bottom: 0;
}
.cxb-b2b-minimalist-expandable .cxb-b2b-product-actions {
    padding-top: 5px;
    margin-top: 0;
}

/* --- Hide original text add-to-quote button inside the expandable
   panel for minimalist-hidden — replaced by the thumbnail icon   */
.cxb-b2b-product-card-minimalist-hidden .cxb-b2b-minimalist-expandable .cxb-b2b-product-actions {
    display: none;
}

/* ============================================================
   Minimalist Hidden — Circular Add-to-Quote Icon Button
   Sits inside the product thumbnail, bottom-right corner.
   ============================================================ */

/* --- Breathing / pulse keyframes (fast cycles) --- */
@keyframes cxb-mh-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); }
}

/* --- Ripple keyframes (expanding ring that fades out) --- */
@keyframes cxb-mh-ripple {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* --- Button base ---
 * Specificity intentionally raised to .cxb-b2b-product-card button.class
 * (0,2,1) so it beats Elementor/Hello Elementor kit selectors such as
 * .elementor-kit-{id} button (0,1,1) and any other theme-level button
 * resets.  Every visual property a theme might set on <button> is declared
 * explicitly so the icon's shape, size, colour and animation are fully
 * self-contained.                                                         */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    left: auto;
    top: auto;
    z-index: 5;
    width: 30px;
    height: 30px;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: 5px;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--cxb-primary-color, #0A7AFF);
    background-image: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hidden by default — shown on card hover or when added */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
    line-height: 1;
    /* Exhaustive theme-override resets */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 0;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    box-shadow: none;
    outline: none;
    overflow: visible;
    vertical-align: middle;
    float: none;
    color: #ffffff;
}

/* Ripple ring — pseudo-element sits behind the button content */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--cxb-primary-color, #0A7AFF);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

/* Icon image inside the button */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-icon-img {
    width: 20px;
    height: 20px;
    display: block;
    /* Make the SVG icon white */
    filter: brightness(0) invert(1);
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

/* Checkmark — hidden by default, shown when added to quote */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-check {
    display: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

/* --- Show button on card hover --- */
.cxb-b2b-product-card-minimalist-hidden:hover button.cxb-b2b-mh-quote-icon {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- Button hover: scale up + darken background --- */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon:hover {
    transform: scale(1.2);
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000);
}

/* --- First-hover animation (3 seconds total) ---
   Button: fast breathing pulse — 0.6s per cycle × 5 = 3s
   Ripple: expanding ring — 1s per cycle × 3 = 3s
   Tooltip: simple fade (no animation, just transition)          */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover {
    animation: cxb-mh-pulse 0.6s ease 5;
}
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover::before {
    animation: cxb-mh-ripple 1s ease-out 3;
}

/* --- Tooltip ---
 * Also elevated to beat theme resets on child elements inside <button>. */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-tooltip {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.8);
    background-image: none;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    padding: 4px 10px;
    margin: 0;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    /* Must float above all page content */
    z-index: 9999;
    /* Hidden by default — transition handles fade in/out */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Tooltip arrow */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    border-radius: 0;
    background: transparent;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* Show tooltip on first hover — SUPPRESSED: tooltip display is now handled
   by the JS floating tooltip helper (body-level clone) to avoid overflow:hidden
   clipping in image containers.  The original tooltip stays display:none during
   animation via JS.  This rule is kept as a no-op for the minimalist-hidden
   template fallback (tooltip is visible there because the container does not
   clip on desktop).                                                        */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover .cxb-b2b-mh-quote-tooltip {
    /* Do NOT set opacity/visibility — JS controls this via display:none + floating clone */
}

/* --- Added-to-quote state ---
   JS adds .cxb-b2b-mh-in-quote after a successful click  */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote {
    background-color: #e53e3e;
    /* Always visible — even when the card is not hovered */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-radius: 50%;
    border: none;
    padding: 5px;
    width: 30px;
    height: 30px;
}

/* Swap icon to checkmark when added — !important ensures no
   competing rule can show both elements simultaneously         */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote .cxb-b2b-mh-quote-icon-img {
    display: none !important;
}
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote .cxb-b2b-mh-quote-check {
    display: block !important;
    color: #ffffff;
}

/* No tooltip or shake when already added */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote .cxb-b2b-mh-quote-tooltip {
    display: none;
}

/* --- Touch / no-hover devices: show everything immediately,
   restore normal card height so no content is hidden.        */
@media (hover: none) {
    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden,
    .cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden {
        /* overflow: visible prevents the bottom edge from being clipped
           when the Add-to-Quote button changes state (scale / text swap). */
        overflow: visible;
        height: 100%;
        align-self: stretch;
        /* No padding-bottom override — let the context (base card 16px or
           page-background-wrapper 25px/15px) supply the correct value.
           On touch devices the expandable is position:static, so real
           bottom padding is needed just like the top-image template.     */
        border-bottom-color: #e0e0e0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        filter: none;
        z-index: auto;
    }

    .cxb-b2b-minimalist-expandable {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        border: none;
        border-radius: 0;
        box-shadow: none !important;
        padding: 0;
        transition: none;
    }

    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden .cxb-b2b-product-info {
        flex-grow: 1;
    }

    /* Restore title bottom margin on mobile — original spacing */
    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden h6.cxb-b2b-product-title,
    .cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden h6.cxb-b2b-product-title {
        margin-bottom: 5px;
    }

    /* On touch devices: hide the circular icon, restore text button */
    .cxb-b2b-product-card button.cxb-b2b-mh-quote-icon {
        display: none !important;
    }
    /* Exception: minimalist-hidden keeps the circular icon on touch */
    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden button.cxb-b2b-mh-quote-icon {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .cxb-b2b-product-card-minimalist-hidden .cxb-b2b-minimalist-expandable .cxb-b2b-product-actions {
        display: block;
    }
}

/* --- Fallback for mobile browsers that report (hover: hover) ---
   Ensure small screens never show hover-expansion or shadows.    */
@media screen and (max-width: 768px) {
    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden,
    .cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden {
        /* overflow: visible prevents the bottom edge from being clipped
           when the Add-to-Quote button changes state (scale / text swap). */
        overflow: visible;
        height: 100%;
        align-self: stretch;
        /* No padding-bottom override — on mobile the expandable panel is
           position:static (normal flow), so the card needs real bottom
           padding just like the top-image template.  The page-background-
           wrapper rule (padding-bottom:25px / 15px) provides it.
           The desktop padding-bottom:16px (needed for the absolute overlay
           math) is NOT appropriate here.                                  */
        border-bottom-color: #e0e0e0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        filter: none;
        z-index: auto;
    }

    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover {
        border-bottom-color: #e0e0e0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        filter: none;
        z-index: auto;
    }

    .cxb-b2b-minimalist-expandable {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        border: none;
        border-radius: 0;
        box-shadow: none !important;
        padding: 0;
        transition: none;
    }

    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover .cxb-b2b-minimalist-expandable {
        box-shadow: none !important;
        border: none;
        opacity: 1;
        visibility: visible;
    }

    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden .cxb-b2b-product-info {
        flex-grow: 1;
    }

    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden h6.cxb-b2b-product-title,
    .cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden h6.cxb-b2b-product-title,
    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover h6.cxb-b2b-product-title,
    .cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover h6.cxb-b2b-product-title {
        margin-bottom: 5px;
    }

    /* On small screens: hide the circular icon, restore text button */
    .cxb-b2b-product-card button.cxb-b2b-mh-quote-icon {
        display: none !important;
    }
    /* Exception: minimalist-hidden keeps the circular icon on small screens */
    .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden button.cxb-b2b-mh-quote-icon {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .cxb-b2b-product-card-minimalist-hidden .cxb-b2b-minimalist-expandable .cxb-b2b-product-actions {
        display: block;
    }
}

/* =================================================================
   Comprehensive Mode — Circular Add-to-Quote Icon on ALL templates
   ================================================================= */

/* --- Base styles for circular icon in template3 & single product gallery ---
   Mirrors the same styles as .cxb-b2b-product-card button.cxb-b2b-mh-quote-icon */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    left: auto;
    top: auto;
    z-index: 5;
    width: 30px;
    height: 30px;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: 5px;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--cxb-primary-color, #0A7AFF);
    background-image: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    font-size: 0;
    box-shadow: none;
    outline: none;
    overflow: visible;
    color: #ffffff;
}

/* Single product gallery: top-right, always visible, 40px on desktop */
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon {
    bottom: auto;
    top: 8px;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: 40px;
    height: 40px;
}
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-icon-img {
    width: 26px;
    height: 26px;
}

/* Mobile: reset single product gallery button to 30px */
@media screen and (max-width: 768px) {
    .cxb-b2b-product-images button.cxb-b2b-mh-quote-icon {
        width: 30px;
        height: 30px;
    }
    .cxb-b2b-product-images button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-icon-img {
        width: 20px;
        height: 20px;
    }
}

/* Always show styled tooltip on button hover (single product gallery — no overflow clipping) */
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon:hover .cxb-b2b-mh-quote-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Ripple ring for template3 & single product */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon::before,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background-color: var(--cxb-primary-color, #0A7AFF);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    border: none; margin: 0; padding: 0; box-shadow: none;
}

/* Expanded hover hotspot for single product gallery — extends 30px outward
   so the cursor never accidentally triggers the image zoom while approaching
   the button.  Uses ::after (::before is already taken by the ripple ring). */
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon::after {
    content: '';
    position: absolute;
    top: -30px; left: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    border-radius: 50%;
    z-index: 1;           /* above the overlay (z-index:5 on overlay, but this is inside the button at z-index:10) */
    pointer-events: auto; /* capture mouse events in the extended zone */
    background: transparent;
}

/* Icon image */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-icon-img,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-icon-img {
    width: 20px; height: 20px; display: block;
    filter: brightness(0) invert(1);
    border: none; border-radius: 0; margin: 0; padding: 0; box-shadow: none;
}

/* Checkmark */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-check,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-check {
    display: none; color: #fff; font-size: 16px; font-weight: bold; line-height: 1;
}

/* Show on card hover (desktop) — template3 */
.cxb-b2b-template3-product-card:hover .cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon {
    opacity: 1; visibility: visible; pointer-events: auto;
}

/* Show on card hover (desktop) — all product cards */
.cxb-b2b-product-card:hover button.cxb-b2b-mh-quote-icon {
    opacity: 1; visibility: visible; pointer-events: auto;
}

/* Button hover: scale up + darken — template3 & single */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon:hover,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon:hover {
    transform: scale(1.2);
    background-color: color-mix(in srgb, var(--cxb-primary-color, #0A7AFF) 80%, #000);
}

/* First-hover animation */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover {
    animation: cxb-mh-pulse 0.6s ease 5;
}
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover::before,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover::before {
    animation: cxb-mh-ripple 1s ease-out 3;
}

/* Tooltip */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-tooltip,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-tooltip {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--cxb-primary-color, #0A7AFF);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-tooltip::after,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon .cxb-b2b-mh-quote-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--cxb-primary-color, #0A7AFF) transparent transparent transparent;
}

/* Tooltip visible on first-hover — SUPPRESSED: JS floating tooltip handles display */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover .cxb-b2b-mh-quote-tooltip,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-first-hover .cxb-b2b-mh-quote-tooltip {
    /* Do NOT set opacity/visibility — JS floating clone handles this */
}

/* In-quote state */
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote {
    background-color: #28a745;
    opacity: 1; visibility: visible; pointer-events: auto;
}
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote .cxb-b2b-mh-quote-icon-img,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote .cxb-b2b-mh-quote-icon-img {
    display: none;
}
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote .cxb-b2b-mh-quote-check,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote .cxb-b2b-mh-quote-check {
    display: block;
}

/* --- Comprehensive mode: mobile — always show circular icon on all cards & gallery --- */
@media (hover: none) {
    body.cxb-quote-mode-comprehensive .cxb-b2b-product-card:not(.cxb-b2b-product-card-minimalist-hidden) button.cxb-b2b-mh-quote-icon,
    body.cxb-quote-mode-comprehensive .cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon {
        display: flex !important;
        opacity: 1; visibility: visible; pointer-events: auto;
    }
}
@media screen and (max-width: 768px) {
    body.cxb-quote-mode-comprehensive .cxb-b2b-product-card:not(.cxb-b2b-product-card-minimalist-hidden) button.cxb-b2b-mh-quote-icon,
    body.cxb-quote-mode-comprehensive .cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon {
        display: flex !important;
        opacity: 1; visibility: visible; pointer-events: auto;
    }
}

/* =================================================================
   Floating Tooltip (body-level clone — avoids overflow:hidden clipping)
   Created by JS and appended to <body> during first-hover animation.
   ================================================================= */
.cxb-b2b-mh-floating-tooltip {
    white-space: nowrap;
    background: var(--cxb-primary-color, #0A7AFF);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
    pointer-events: none;
    animation: cxb-mh-floating-tip-fade 3.1s ease forwards;
}
.cxb-b2b-mh-floating-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--cxb-primary-color, #0A7AFF) transparent transparent transparent;
}

@keyframes cxb-mh-floating-tip-fade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ==========================================================================
   THEME-HARDENING FIXES — 2026-04-07
   Ensures plugin styles remain consistent regardless of the active WP theme.
   ========================================================================== */

/* ------------------------------------------------------------------
   FIX 1 — Mobile: Elementor Widget Container outer margin
   for CXB Product Inquiry (was flush against screen edge)
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .elementor-widget-container .cxb-b2b-product-inquiry {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    /* Also protect the Elementor form widget wrapper */
    .elementor-widget-container .cxb-form-wrap {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/* ------------------------------------------------------------------
   FIX 2 — Mobile Category Navigation: theme-proof + no top-layer
   2a  Harden all visual styles so theme switching cannot alter them.
   2b  Lower z-index so the nav no longer obscures other elements
       while retaining position:sticky for scroll-pinning.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .cxb-mobile-cat-nav {
        z-index: 99 !important;           /* was 200; now below most theme overlays */
        display: flex !important;
        align-items: center !important;
        height: 60px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        padding: 0 !important;
        position: sticky !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        box-sizing: border-box !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    }

    .cxb-mobile-cat-nav.is-sticky-shrunk {
        height: 42px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
    }

    .cxb-cat-nav-arrow {
        flex-shrink: 0 !important;
        border: 1px solid #e5e7eb !important;
        background: transparent !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #374151 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        outline: none !important;
    }

    .cxb-cat-nav-arrow:hover {
        background: rgba(249, 250, 251, 0.6) !important;
        border-color: #d1d5db !important;
        border-radius: 50% !important;
        box-shadow: none !important;
    }

    .cxb-cat-nav-arrow svg {
        stroke: #374151 !important;
        fill: none !important;
    }

    .cxb-cat-nav-list {
        display: flex !important;
        align-items: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cxb-cat-nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #374151 !important;
        text-decoration: none !important;
        background: #f9fafb !important;
        border-radius: 20px !important;
        border: 1px solid transparent !important;
        white-space: nowrap !important;
        line-height: normal !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }

    .cxb-cat-nav-link:hover {
        background: #f3f4f6 !important;
        color: #111827 !important;
        text-decoration: none !important;
        border-radius: 20px !important;
    }

    .cxb-cat-nav-item.is-active .cxb-cat-nav-link {
        background: var(--cxb-primary-color, #0A7AFF) !important;
        color: #ffffff !important;
        border-color: var(--cxb-primary-color, #0A7AFF) !important;
    }

    .cxb-cat-nav-item.is-active .cxb-cat-nav-link:hover {
        background: var(--cxb-primary-color-dark, #0866D6) !important;
        color: #ffffff !important;
    }
}

/* ------------------------------------------------------------------
   FIX 3 — H-Tag text styles: lock font-size & color with !important
   so themes cannot override them.
   ------------------------------------------------------------------ */

/* 3a. Taxonomy title (archive / category pages) */
.cxb-b2b-taxonomy-title {
    font-size: 20px !important;
    color: #000 !important;
}

/* 3b. Product card title (h6) */
h6.cxb-b2b-product-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: inherit !important;
    line-height: 1.3 !important;
    margin: 0 0 12px 0 !important;
}
.cxb-b2b-product-title a {
    color: inherit !important;
    text-decoration: none !important;
}

/* 3c. Single product page title */
.cxb-b2b-product-content-title {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

/* 3d. Single product page title (template3 / left-layout) */
.cxb-b2b-product-content-left .cxb-b2b-product-title {
    color: #000 !important;
}

/* 3e. Related products heading */
.cxb-b2b-related-products h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* 3f. Child categories heading */
.cxb-b2b-child-categories h3 {
    font-size: 20px !important;
    color: #333 !important;
}
@media (max-width: 768px) {
    .cxb-b2b-child-categories h3 {
        font-size: 14px !important;
        color: #333 !important;
    }
    .cxb-b2b-related-products h2 {
        font-size: 22px !important;
    }
}

/* 3g. Banner title & description */
.cxb-b2b-banner-title {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}
.cxb-b2b-banner-description {
    font-size: 16px !important;
    color: #ffffff !important;
}
@media (max-width: 768px) {
    .cxb-b2b-banner-title {
        font-size: 22px !important;
    }
    .cxb-b2b-banner-description {
        font-size: 14px !important;
    }
}

/* 3h. SEO content headings */
.cxb-b2b-seo-content h1,
.cxb-b2b-seo-content h2,
.cxb-b2b-seo-content h3,
.cxb-b2b-seo-content h4,
.cxb-b2b-seo-content h5,
.cxb-b2b-seo-content h6 {
    color: #000 !important;
}
@media (max-width: 768px) {
    .cxb-b2b-seo-content h2,
    .cxb-b2b-seo-content h3,
    .cxb-b2b-seo-content h4 {
        font-size: 18px !important;
    }
}
@media (max-width: 480px) {
    .cxb-b2b-seo-content h2,
    .cxb-b2b-seo-content h3,
    .cxb-b2b-seo-content h4 {
        font-size: 16px !important;
    }
}

/* 3i. Product description headings */
.cxb-b2b-product-description h1,
.cxb-b2b-product-description h2,
.cxb-b2b-product-description h3,
.cxb-b2b-product-description h4,
.cxb-b2b-product-description h5,
.cxb-b2b-product-description h6 {
    color: #000 !important;
}

/* 3j. No-products heading */
.cxb-b2b-no-products h2,
.cxb-b2b-no-products .cxb-b2b-no-products-title {
    color: #000000 !important;
}

/* 3k. Template3 product card title hardening */
.cxb-b2b-page-background-wrapper .content-product-card h6.cxb-b2b-product-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: inherit !important;
}

/* 3l. Minimalist-hidden card title */
.cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden h6.cxb-b2b-product-title,
.cxb-b2b-page-background-wrapper .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden h6.cxb-b2b-product-title {
    color: #fff !important;
}

/* 3m. Breadcrumb text (outside banner: black; inside banner: white) */
.cxb-b2b-breadcrumbs {
    font-size: 14px !important;
    color: #000000 !important;
}
.cxb-b2b-breadcrumbs a {
    color: #000000 !important;
}
/* Override: breadcrumbs inside a banner must stay white */
.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs {
    color: #ffffff !important;
}
.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs a {
    color: #ffffff !important;
}
.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs .separator {
    color: rgba(255, 255, 255, 0.7) !important;
}
.cxb-b2b-banner-internal-content .cxb-b2b-breadcrumbs .current {
    color: #ffffff !important;
}

/* 3n. Quote page headings (scoped via body class) */
body.cxb-b2b-quote-page h1,
body.cxb-b2b-quote-page h2,
body.cxb-b2b-quote-page h3 {
    color: #000 !important;
}

/* ------------------------------------------------------------------
   FIX 4 — Button style hardening (hover effects)
   Prevent themes from overriding border-radius, shape, and visual
   properties on hover for all plugin buttons.
   ------------------------------------------------------------------ */

/* 4a. Add-to-Quote circular icon — all contexts */
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon,
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon:hover,
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon:focus,
.cxb-b2b-product-card button.cxb-b2b-mh-quote-icon:active,
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon,
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon:hover,
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon:focus,
.cxb-b2b-template3-product-image button.cxb-b2b-mh-quote-icon:active,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon:hover,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon:focus,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon:active {
    border-radius: 50% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* 4b. Single product gallery icon — extra specificity */
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-quote-icon-single,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-quote-icon-single:hover,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote,
.cxb-b2b-product-images button.cxb-b2b-mh-quote-icon.cxb-b2b-mh-in-quote:hover {
    border-radius: 50% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 4c. Gallery left/right arrows — keep circular + fixed icon color on hover */
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow,
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow:hover,
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow:focus,
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow:active,
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow.prev,
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow.prev:hover,
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow.next,
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow.next:hover {
    border-radius: 50% !important;
    border: none !important;
    outline: none !important;
    color: #333 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 0 !important;
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
}

/* Lock the SVG stroke so themes cannot override arrow icon color */
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow svg,
body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow:hover svg {
    stroke: #333 !important;
    fill: none !important;
}

/* 4d. Slider arrows — keep circular */
.cxb-b2b-page-background-wrapper .cxb-b2b-slider-arrow.cxb-b2b-slider-arrow,
.cxb-b2b-page-background-wrapper .cxb-b2b-slider-arrow.cxb-b2b-slider-arrow:hover,
.cxb-b2b-page-background-wrapper .cxb-b2b-slider-arrow.cxb-b2b-slider-arrow:focus,
.cxb-b2b-page-background-wrapper .cxb-b2b-slider-arrow.cxb-b2b-slider-arrow:active {
    border-radius: 50% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* 4e. Horizontal categories arrows — keep circular */
.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow,
.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow:hover,
.cxb-b2b-page-background-wrapper .cxb-horizontal-categories-arrow.cxb-horizontal-categories-arrow:focus {
    border-radius: 50% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* 4f. Rectangular action buttons — lock border-radius on all states */
.cxb-b2b-view-details-button,
.cxb-b2b-view-details-button:hover,
.cxb-b2b-view-details-button:focus,
.cxb-b2b-view-details-button:active {
    border-radius: 6px !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

.cxb-b2b-inquiry-button,
.cxb-b2b-inquiry-button:hover,
.cxb-b2b-inquiry-button:focus,
.cxb-b2b-inquiry-button:active {
    border-radius: 6px !important;      /* was 4px on base; 6px on card context — use 6px */
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

.cxb-b2b-add-to-quote-button,
.cxb-b2b-add-to-quote-button:hover,
.cxb-b2b-add-to-quote-button:focus,
.cxb-b2b-add-to-quote-button:active {
    border-radius: 6px !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

/* 4g. Category link buttons */
.cxb-b2b-category-link,
.cxb-b2b-category-link:hover,
.cxb-b2b-category-link:focus {
    border-radius: 6px !important;
    text-decoration: none !important;
}

/* 4g2. Horizontal product category navigation (template1) — hover text color */
.cxb-b2b-template1-category-link {
    color: #333 !important;
    text-decoration: none !important;
}
.cxb-b2b-template1-category-link:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    background-color: var(--cxb-primary-color, #0A7AFF) !important;
    border-color: var(--cxb-primary-color, #0A7AFF) !important;
}
.cxb-b2b-template1-category-item.active .cxb-b2b-template1-category-link,
.cxb-b2b-template1-category-item.active .cxb-b2b-template1-category-link:hover {
    color: #ffffff !important;
    background-color: var(--cxb-primary-color, #0A7AFF) !important;
    border-color: var(--cxb-primary-color, #0A7AFF) !important;
}
/* Subcategory dropdown links */
.cxb-b2b-template1-subcategory-menu a {
    color: #333 !important;
    text-decoration: none !important;
}
.cxb-b2b-template1-subcategory-menu a:hover {
    color: #ffffff !important;
}
/* Third-level dropdown links */
.cxb-b2b-template1-thirdlevel-menu a {
    color: #333 !important;
    text-decoration: none !important;
}
.cxb-b2b-template1-thirdlevel-menu a:hover {
    color: #ffffff !important;
}

/* 4h. Template3 footer buttons */
.cxb-b2b-template3-product-footer .cxb-b2b-add-to-quote-button,
.cxb-b2b-template3-product-footer .cxb-b2b-add-to-quote-button:hover,
.cxb-b2b-template3-product-footer .cxb-b2b-view-details-button,
.cxb-b2b-template3-product-footer .cxb-b2b-view-details-button:hover,
.cxb-b2b-template3-product-footer .cxb-b2b-inquiry-button,
.cxb-b2b-template3-product-footer .cxb-b2b-inquiry-button:hover {
    border-radius: 6px !important;
    border: none !important;
}

/* 4i. Product card hover — prevent theme from adding its own button styles */
.cxb-b2b-product-card .cxb-b2b-add-to-quote-button:hover,
.cxb-b2b-product-card .cxb-b2b-inquiry-button:hover,
.cxb-b2b-product-card .cxb-b2b-view-details-button:hover,
.cxb-b2b-template3-product-card .cxb-b2b-add-to-quote-button:hover,
.cxb-b2b-template3-product-card .cxb-b2b-inquiry-button:hover,
.cxb-b2b-template3-product-card .cxb-b2b-view-details-button:hover {
    border-radius: 6px !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 4j. CXB Form submit button */
.cxb-form-submit,
.cxb-form-submit:hover,
.cxb-form-submit:focus,
.cxb-form-submit:active {
    border-radius: 6px !important;
    border: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
}

/* 4k. Email inquiry button on product cards */
.cxb-b2b-email-inquiry-button,
.cxb-b2b-email-inquiry-button:hover,
.cxb-b2b-email-inquiry-button:focus {
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* 4l. Mobile cat-nav arrows (already covered above but reinforce hover) */
@media (max-width: 768px) {
    .cxb-cat-nav-arrow,
    .cxb-cat-nav-arrow:hover,
    .cxb-cat-nav-arrow:focus,
    .cxb-cat-nav-arrow:active {
        border-radius: 50% !important;
    }

    /* Mobile gallery arrows */
    body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow,
    body .cxb-b2b-gallery-arrow.cxb-b2b-gallery-arrow:hover {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 50% !important;
    }
}

/* ------------------------------------------------------------------
   FIX 5 — Banner layout: prevent horizontal scrollbar
   100vw includes scrollbar width on some browsers/OS, which makes
   the banner wider than the viewport.  overflow-x:clip on the
   outer wrapper clips the excess without breaking position:sticky
   (unlike overflow:hidden which creates a new scroll container).
   ------------------------------------------------------------------ */
.cxb-b2b-page-background-wrapper {
    overflow-x: clip;
}

/* Also apply to the archive/taxonomy containers that host banners */
.cxb-b2b-products-taxonomy-container,
.cxb-b2b-products-archive-container,
.cxb-b2b-product-single-container {
    overflow-x: clip;
}

/* Safety: ensure body-level clip on desktop as well (mobile already
   has this via mobile-menu.css).  Scoped to pages that use the plugin. */
body.cxb-b2b-has-banner {
    overflow-x: clip;
}

/* Fallback for browsers that don't support clip: use hidden only on the
   wrapper (not body, to avoid breaking sticky). */
@supports not (overflow: clip) {
    .cxb-b2b-page-background-wrapper {
        overflow-x: hidden;
    }
}

/* ==========================================================================
   END THEME-HARDENING FIXES
   ========================================================================== */