/* CSS for Product Showcase Block Pattern - PIXEL PERFECT REDESIGN */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* Root Wrapper - LOCKED WIDTH LIKE HTML */
.ds-product-showcase-wrapper {
    background: #ffffff !important;
    padding: 80px 0 !important;
    margin: 0 auto !important; /* Centered */
    width: 100% !important;
    max-width: 1100px !important; /* Fixed width from HTML ds-container */
    font-family: 'Inter', sans-serif !important;
}

/* Hero Grid Layout */
.ds-hero-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 80px !important; 
    align-items: center !important;
    margin-bottom: 80px !important;
}

.ds-hero-image {
    flex: 1 !important;
    max-width: 500px !important; /* Limit image width */
}

.ds-hero-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background-color: #f5f5f5 !important;
}

.ds-hero-content {
    flex: 1 !important;
}

.ds-hero-content .ds-product-title {
    font-size: 52px !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    margin: 0 0 25px 0 !important;
    line-height: 1.1 !important;
    color: #000 !important;
}

/* Highlights List */
.ds-highlights {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
}

.ds-highlights li {
    position: relative !important;
    padding-left: 35px !important;
    margin-bottom: 18px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #111 !important;
}

.ds-highlights li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    color: #0073aa !important;
    font-weight: 800 !important;
    font-size: 24px !important;
}

/* CTA Buttons - ULTRA HIGH PRIORITY */
.ds-cta-group .wp-block-button .wp-block-button__link,
.ds-cta-group .wp-block-button__link {
    background-color: #111111 !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 6px !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Secondary Button Fix (Download Manual) */
.ds-cta-group .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: #111111 !important;
    border: 2px solid #111111 !important;
}

/* Details Section Grid */
.ds-details-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 80px !important; /* Large gap like HTML */
    padding-top: 80px !important;
    border-top: 1px solid #e5e5e5 !important;
    margin: 0 !important;
}

.ds-details-content {
    flex: 1.8 !important; /* Balanced proportion */
    margin: 0 !important;
    min-width: 300px !important;
}

.ds-details-content .ds-section-title,
.ds-comparison-wrapper .ds-section-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 30px 0 !important;
    border-bottom: 4px solid #0073aa !important;
    padding-bottom: 10px !important;
    display: inline-block !important;
    color: #000 !important;
}

.ds-details-content p {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: #222 !important;
    margin-bottom: 20px !important;
}

/* Specs Column - THE CLEAN INDUSTRIAL LOOK */
.ds-specs-column {
    flex: 1 !important;
    margin: 0 !important;
    min-width: 300px !important;
}

.ds-specs-box {
    background-color: #f9f9f9 !important;
    padding: 35px !important;
    border-radius: 12px !important;
}

.ds-specs-box .ds-specs-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin: 0 0 25px 0 !important;
    color: #000 !important;
}

/* Force Clean Table - NO BORDERS, NO PADDING GAPS */
.ds-specs-box figure.wp-block-table, 
.ds-specs-box table {
    margin: 0 !important;
    border: none !important;
    border-collapse: collapse !important;
    width: 100% !important;
    background: transparent !important;
}

.ds-specs-box td {
    border: 1px solid #ccc !important; 
    padding: 12px 15px !important; /* 增加边距，防止贴边 */
    font-size: 14px !important;
    background: transparent !important;
    text-align: left !important;
    color: #111 !important;
}

.ds-specs-box td:first-child {
    font-weight: 800 !important;
    color: #000 !important;
    width: 45% !important;
    border-right: 1px solid #ccc !important; /* 增加竖线 */
}

/* --- Pin Definition Table --- */
.ds-pin-section {
    background: #fff !important;
    padding: 40px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    margin: 60px 0 !important;
}

.ds-pin-diagram img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

.ds-pin-table {
    margin-top: 0 !important;
}

.ds-pin-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: center !important;
}

.ds-pin-table th {
    background: #f5f5f5 !important;
    padding: 15px !important;
    font-weight: 700 !important;
    border: 1px solid #e0e0e0 !important;
    font-size: 14px !important;
}

.ds-pin-table td {
    padding: 15px !important;
    border: 1px solid #e0e0e0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* --- Maintenance Section --- */
.ds-maintenance-section {
    margin-top: 60px !important;
}

.ds-maintenance-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
}

.ds-instruction-list {
    padding-left: 20px !important;
    list-style: none !important;
}

.ds-instruction-list li {
    margin-bottom: 15px !important;
    color: #444 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* --- Comparison Layout Specifics --- */
.ds-comparison-wrapper {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 80px 0 !important;
}

.ds-section-intro {
    font-size: 20px !important;
    color: #444 !important;
    margin-bottom: 40px !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ds-comparison-header {
    text-align: center !important;
    margin-bottom: 60px !important;
}

.ds-comparison-header .wp-block-heading {
    font-size: 48px !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    color: #000 !important;
    margin-bottom: 20px !important;
}

.ds-comparison-header p {
    font-size: 20px !important;
    color: #444 !important;
}

.ds-product-grid {
    display: flex !important;
    gap: 30px !important;
    margin-bottom: 80px !important;
}

.ds-product-catalog .ds-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 48px !important;
}

.ds-category-related-products .ds-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 48px !important;
}

.ds-product-catalog .ds-product-card {
    flex: none !important;
    padding: 24px !important;
}

.ds-category-related-products .ds-product-card {
    flex: none !important;
    padding: 24px !important;
}

.ds-product-catalog .ds-product-card .wp-block-heading {
    font-size: 24px !important;
    margin-bottom: 14px !important;
}

.ds-category-related-products .ds-product-card .wp-block-heading {
    font-size: 24px !important;
    margin-bottom: 14px !important;
}

.ds-product-catalog .ds-product-card .wp-block-image img {
    height: 220px !important;
}

.ds-category-related-products .ds-product-card .wp-block-image img {
    height: 220px !important;
}

.ds-product-card {
    flex: 1 !important;
    background: #f9f9f9 !important;
    padding: 40px !important;
    border-radius: 20px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center !important;
}

.ds-product-card .wp-block-heading {
    font-size: 36px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    color: #000 !important;
    margin-bottom: 20px !important;
}

.ds-product-card .wp-block-image {
    margin: 20px 0 !important;
}

.ds-product-card .wp-block-image img {
    width: 100% !important;
    height: 300px !important; /* 固定高度确保对比整齐 */
    object-fit: contain !important; /* 保持比例不裁剪 */
    border-radius: 12px !important;
    background: #fff !important;
    padding: 10px !important;
}

.ds-spec-mini-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
    border: none !important;
     color: #666 ;
}

.ds-spec-mini-table td {
    padding: 15px 20px !important; /* 增加了左右 padding，解决文字贴边问题 */
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #111 !important;
    background: transparent !important;
}


.ds-spec-mini-table th, .ds-spec-mini-table td  { 
    border: 1px solid #ccc !important; 
}


.ds-spec-mini-table td:first-child,
.ds-spec-mini-table td:nth-child(3) {
    font-weight: 800 !important;
    color: #000 !important;
    width: 40% !important;
}

.ds-spec-mini-table.ds-no-first-bold td:first-child {
    font-weight: normal !important;
    width: auto !important;
    color: #111 !important;
}

.ds-spec-mini-table.ds-d20-receiver-parts-table td:first-child {
    font-weight: normal !important;
    width: auto !important;
    color: #111 !important;
}
 

.ds-spec-label {
    font-weight: 800 !important;
    color: #000 !important;
    width: 40% !important;
}

/* Wiring Requirements List */
.ds-requirement-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ds-requirement-list li {
    position: relative !important;
    padding-left: 45px !important;
    margin-bottom: 25px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #111 !important;
    line-height: 1.6 !important;
}

.ds-requirement-list li::before {
    content: "\f05a" !important; /* Font Awesome info-circle */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    color: #0073aa !important;
    font-size: 24px !important;
}

.ds-requirement-list li:nth-child(1)::before { content: "\f1e6" !important; } /* plug */
.ds-requirement-list li:nth-child(2)::before { content: "\f121" !important; } /* code */
.ds-requirement-list li:nth-child(3)::before { content: "\f14e" !important; } /* compass */

.ds-note-box {
    margin-top: 40px !important;
    padding: 20px !important;
    background: #f0f7fa !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #555 !important;
}

/* Full Specs Comparison Table */
.ds-specs-comparison-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #fff !important;
}

.ds-specs-comparison-table thead {
    border-bottom: 2px solid #000 !important;
}

.ds-specs-comparison-table th {
    background: #111 !important;
    color: #fff !important;
    padding: 18px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.ds-specs-comparison-table table td {
    padding: 15px 20px !important; /* 增加左右边距 */
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #111 !important;
    border: 1px solid #ccc !important; /* 使用 ccc 色号 */
}

.ds-specs-comparison-table table th {
    background: #111 !important;
    color: #fff !important;
    padding: 18px 20px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: 1px solid #ccc !important; /* 增加表头边框 */
}

.ds-specs-comparison-table table td:first-child {
    font-weight: 800 !important;
    color: #000 !important;
    background-color: #f9f9f9 !important;
}

/* --- Structure Section (A12/A4/A8) --- */
.ds-structure-section {
    margin: 60px 0 !important;
    padding: 40px !important;
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
}

.ds-structure-images-grid {
    display: flex !important;
    gap: 20px !important;
    margin-top: 30px !important;
}

.ds-structure-images-grid .wp-block-column {
    flex: 1 !important;
}

.ds-structure-images-grid img {
    width: 100% !important;
    height: 250px !important;
    object-fit: contain !important;
    background: #f9f9f9 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #eee !important;
}

.ds-structure-section .wp-block-heading {
    font-size: 32px !important;
    font-weight: 800 !important;
    border-bottom: 4px solid #0073aa !important;
    padding-bottom: 10px !important;
    display: inline-block !important;
    margin-bottom: 30px !important;
}

/* Maintenance Grid */
.ds-maintenance-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    font-size: 18px;
}
.ds-maintenance-grid p {
   margin-block-start: 0 ;
}

@media (max-width: 768px) {
    .ds-product-grid, .ds-maintenance-grid {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .ds-product-catalog .ds-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ds-category-related-products .ds-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ds-product-catalog .ds-product-card {
        padding: 18px !important;
    }

    .ds-category-related-products .ds-product-card {
        padding: 18px !important;
    }

    .ds-product-catalog .ds-product-card .wp-block-image img {
        height: 180px !important;
    }

    .ds-category-related-products .ds-product-card .wp-block-image img {
        height: 180px !important;
    }
}

@media (max-width: 480px) {
    .ds-product-catalog .ds-product-grid {
        grid-template-columns: 1fr !important;
    }

    .ds-category-related-products .ds-product-grid {
        grid-template-columns: 1fr !important;
    }
}