/* ==========================================================
   BLUESUN PRODUCT DETAIL GLOBAL CSS
   Version 3.0
   File: /assets/css/product-detail.css

   Includes:
   - Global typography
   - Buttons
   - Key Advantages
   - Image + Text
   - Comparison table
   - Technical Specifications
   - Video
   - FAQ
   - Responsive
   ========================================================== */


/* ==========================================================
   01. GLOBAL VARIABLES
   ========================================================== */

:root{
    --bs-primary:#f28c28;
    --bs-primary-dark:#e57d17;

    --bs-text-main:#111111;
    --bs-text-body:#555555;
    --bs-text-soft:#666666;
    --bs-text-light:#7a838b;

    --bs-border:#eae6df;
    --bs-border-light:#dcdcdc;

    --bs-bg-soft:#fffaf4;
    --bs-bg-head:#fafafa;
    --bs-bg-left:#f7f7f7;
    --bs-bg-param:#fcfcfc;
    --bs-bg-section:#f7f8f9;

    --bs-white:#ffffff;

    --bs-radius:14px;
    --bs-radius-sm:10px;

    --bs-shadow:0 2px 8px rgba(0,0,0,.03);
    --bs-shadow-hover:0 10px 28px rgba(0,0,0,.08);
}


/* ==========================================================
   02. BASE PRODUCT MODULES
   ========================================================== */

.bs-feature-section,
.bs-compare-section,
.bs-tech-specs-section,
.bs-faq-section,
.bs-video-section,
.bs-specs-section,
.bs-image-text-section{
    width:100%;
    margin:0 0 60px;
    box-sizing:border-box;

    font-family:
        "Poppins",
        "Helvetica Neue",
        Arial,
        sans-serif;

    color:var(--bs-text-body);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;
}


/* Prevent theme image rules from breaking content */

.bs-feature-section img,
.bs-compare-section img,
.bs-tech-specs-section img,
.bs-video-section img,
.bs-image-text-section img{
    max-width:100%;
    height:auto;
}


/* ==========================================================
   03. COMMON SECTION HEADER
   ========================================================== */

.bs-section-header,
.bs-feature-header,
.bs-compare-header,
.bs-tech-specs-header,
.bs-faq-header,
.bs-video-header,
.bs-specs-header{
    max-width:900px;
    margin:0 auto 26px;
    text-align:center;
}


.bs-section-header h2,
.bs-feature-header h2,
.bs-feature-title,
.bs-compare-header h2,
.bs-tech-specs-header h2,
.bs-faq-header h2,
.bs-video-header h2,
.bs-specs-header h2{
    margin:0 0 12px;
    padding:0;

    font-size:clamp(28px,2.5vw,34px);
    line-height:1.22;
    font-weight:600;
    letter-spacing:-.4px;

    color:var(--bs-text-main);
    text-align:center;
}


.bs-section-header p,
.bs-feature-header p,
.bs-compare-header p,
.bs-tech-specs-header p,
.bs-faq-header p,
.bs-video-header p,
.bs-specs-header p{
    max-width:820px;
    margin:0 auto;
    padding:0;

    font-size:15px;
    line-height:1.8;
    font-weight:400;

    color:var(--bs-text-body);
    text-align:center;
}


/* ==========================================================
   04. COMMON CARD
   ========================================================== */

.bs-card,
.bs-feature-card,
.bs-tech-card,
.bs-compare-card,
.bs-specs-card,
.bs-faq-list{
    background:var(--bs-white);
    border:1px solid var(--bs-border);
    border-radius:var(--bs-radius);
    box-sizing:border-box;
    box-shadow:var(--bs-shadow);
}


/* ==========================================================
   05. BUTTONS
   ========================================================== */

.bs-btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:14px 28px;

    border:1px solid var(--bs-primary);
    border-radius:8px;

    background:var(--bs-primary);

    color:#fff !important;

    font-size:15px;
    font-weight:600;
    line-height:1;

    text-decoration:none !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.bs-btn-primary:hover{
    background:var(--bs-primary-dark);
    border-color:var(--bs-primary-dark);

    color:#fff !important;

    transform:translateY(-2px);
}


.bs-btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:14px 28px;

    border:1px solid var(--bs-border-light);
    border-radius:8px;

    background:#fff;

    color:var(--bs-text-main) !important;

    font-size:15px;
    font-weight:600;
    line-height:1;

    text-decoration:none !important;

    transition:
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.bs-btn-secondary:hover{
    color:var(--bs-primary) !important;
    border-color:var(--bs-primary);

    transform:translateY(-2px);
}


/* ==========================================================
   06. KEY ADVANTAGES
   ========================================================== */

.bs-feature-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:20px;
}


.bs-feature-card{
    position:relative;

    overflow:hidden;

    padding:26px 20px;

    text-align:center;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.bs-feature-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:var(--bs-primary);

    opacity:0;

    transition:opacity .25s ease;
}


.bs-feature-card:hover{
    transform:translateY(-4px);

    box-shadow:var(--bs-shadow-hover);

    border-color:rgba(242,140,40,.45);
}


.bs-feature-card:hover::before{
    opacity:1;
}


.bs-feature-icon{
    margin-bottom:12px;

    font-size:24px;
    line-height:1;

    color:var(--bs-primary);
}


.bs-feature-card h3{
    margin:0 0 10px;
    padding:0;

    font-size:17px;
    line-height:1.45;
    font-weight:500;

    color:var(--bs-text-main);
}


.bs-feature-card p{
    margin:0;
    padding:0;

    font-size:14.5px;
    line-height:1.72;
    font-weight:400;

    color:var(--bs-text-body);
}


/* ==========================================================
   07. IMAGE + TEXT
   ========================================================== */


/*
   Standard:

   <section class="bs-image-text-section">
       <div class="bs-image-text">

           <div class="bs-image-text-media">
               <img src="..." alt="">
           </div>

           <div class="bs-image-text-content">
               <span class="bs-image-text-eyebrow">
                   SYSTEM DESIGN
               </span>

               <h2>Title</h2>

               <p>Description</p>

               <ul>
                   <li>Feature</li>
                   <li>Feature</li>
               </ul>
           </div>

       </div>
   </section>


   Reverse:

   <div class="bs-image-text bs-reverse">


   Technical drawing:

   <div class="bs-image-text bs-contain">
*/


.bs-image-text-section{
    position:relative;
}


.bs-image-text{
    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(0,.92fr);

    gap:clamp(42px,5vw,72px);

    align-items:center;

    box-sizing:border-box;
}


/* Left text + right image */

.bs-image-text.bs-reverse{
    grid-template-columns:
        minmax(0,.92fr)
        minmax(0,1.08fr);
}


.bs-image-text.bs-reverse .bs-image-text-media{
    order:2;
}


.bs-image-text.bs-reverse .bs-image-text-content{
    order:1;
}


/* ==========================================================
   IMAGE
   ========================================================== */

.bs-image-text-media{
    position:relative;

    width:100%;
    min-width:0;

    overflow:hidden;

    background:#f5f6f7;

    border:1px solid #eceff1;
    border-radius:10px;

    box-sizing:border-box;
}


.bs-image-text-media img{
    display:block;

    width:100%;
    height:420px;

    object-fit:cover;
    object-position:center;

    transition:
        transform .6s
        cubic-bezier(.22,.61,.36,1);
}


@media (hover:hover){

    .bs-image-text:hover
    .bs-image-text-media img{
        transform:scale(1.018);
    }

}


/* Technical diagram / system diagram */

.bs-image-text.bs-contain
.bs-image-text-media{
    padding:28px;

    background:#fff;
}


.bs-image-text.bs-contain
.bs-image-text-media img{
    width:100%;

    height:auto;
    max-height:580px;

    object-fit:contain;

    transform:none;
}


/* ==========================================================
   IMAGE TEXT CONTENT
   ========================================================== */

.bs-image-text-content{
    min-width:0;

    padding:4px 0;
}


.bs-image-text-eyebrow{
    display:block;

    margin-bottom:12px;

    font-size:12px;
    line-height:1.3;
    font-weight:600;

    letter-spacing:1.4px;

    text-transform:uppercase;

    color:var(--bs-primary);
}


.bs-image-text-content h2{
    margin:0 0 18px;
    padding:0;

    font-size:
        clamp(29px,2.6vw,38px);

    line-height:1.22;

    font-weight:600;

    letter-spacing:-.5px;

    color:var(--bs-text-main);
}


.bs-image-text-content h3{
    margin:24px 0 10px;
    padding:0;

    font-size:19px;
    line-height:1.4;

    font-weight:500;

    color:var(--bs-text-main);
}


.bs-image-text-content p{
    margin:0 0 18px;
    padding:0;

    font-size:15.5px;
    line-height:1.82;
    font-weight:400;

    color:var(--bs-text-body);
}


.bs-image-text-content p:last-child{
    margin-bottom:0;
}


/* ==========================================================
   IMAGE TEXT LIST
   ========================================================== */

.bs-image-text-content ul{
    margin:20px 0 0;
    padding:0;

    list-style:none;
}


.bs-image-text-content li{
    position:relative;

    margin:0;

    padding:
        12px
        0
        12px
        25px;

    border-bottom:
        1px solid #eceff1;

    font-size:14.5px;
    line-height:1.55;

    font-weight:500;

    color:#303840;
}


.bs-image-text-content li:first-child{
    border-top:
        1px solid #eceff1;
}


.bs-image-text-content li::before{
    content:"";

    position:absolute;

    left:2px;
    top:20px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--bs-primary);
}


/* ==========================================================
   IMAGE TEXT LIGHT BACKGROUND
   ========================================================== */

.bs-image-text-section.bs-light{
    padding:
        64px
        clamp(24px,4vw,54px);

    background:
        var(--bs-bg-section);

    border-radius:
        12px;
}


/* ==========================================================
   IMAGE TEXT META
   ========================================================== */

.bs-image-text-meta{
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:22px;
}


.bs-image-text-meta span{
    display:inline-flex;

    align-items:center;

    min-height:34px;

    padding:
        7px
        12px;

    background:#f5f6f7;

    border:
        1px solid #e8ebed;

    border-radius:5px;

    color:#3e4952;

    font-size:13px;
    line-height:1.3;
    font-weight:500;
}


/* ==========================================================
   08. COMPARISON TABLE
   ========================================================== */

.bs-compare-card{
    padding:20px;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;
}


.bs-compare-table{
    width:100%;

    min-width:760px;

    border-collapse:collapse;

    font-family:
        "Poppins",
        "Helvetica Neue",
        Arial,
        sans-serif;
}


.bs-compare-table th,
.bs-compare-table td{
    padding:
        14px
        12px;

    border:
        1px solid
        var(--bs-border-light);

    text-align:center;

    vertical-align:middle;

    font-size:14px;
    line-height:1.6;
}


.bs-compare-table thead th{
    background:
        var(--bs-bg-head);

    font-weight:600;

    color:
        var(--bs-text-main);
}


.bs-compare-table .compare-head{
    min-width:170px;

    padding-left:16px;

    background:
        var(--bs-bg-left);

    color:
        var(--bs-text-main);

    font-weight:500;

    text-align:left;
}


.bs-compare-table .n-col{
    background:
        var(--bs-bg-soft);
}


.bs-compare-table .n-title{
    color:
        var(--bs-primary);

    font-size:16px;
    font-weight:600;
}


.bs-compare-table .p-title{
    color:
        var(--bs-text-main);

    font-size:16px;
    font-weight:600;
}


.bs-compare-table
tbody
tr:nth-child(even)
td{
    background:
        var(--bs-bg-param);
}


.bs-compare-table
tbody
tr:nth-child(even)
td.n-col{
    background:
        #fff8ef;
}


.bs-compare-note{
    margin-top:14px;

    font-size:14px;
    line-height:1.7;

    color:
        var(--bs-text-soft);

    text-align:center;
}


/* ==========================================================
   09. TECH / SPECIFICATIONS
   ========================================================== */

.bs-tech-card,
.bs-specs-card{
    padding:20px;
}


.bs-tech-drawing{
    margin-bottom:24px;
}


.bs-tech-drawing img{
    display:block;

    width:100%;
    height:auto;

    border-radius:
        var(--bs-radius-sm);
}


.bs-tech-drawing-note{
    margin:
        12px
        0
        0;

    font-size:14px;
    line-height:1.7;

    color:
        var(--bs-text-soft);

    text-align:center;
}


.bs-tech-table-card,
.bs-specs-card{
    overflow-x:auto;

    -webkit-overflow-scrolling:touch;
}


.bs-tech-table,
.bs-specs-table{
    width:100%;

    min-width:980px;

    border-collapse:collapse;

    background:#fff;

    font-family:
        "Poppins",
        "Helvetica Neue",
        Arial,
        sans-serif;
}


.bs-tech-table th,
.bs-tech-table td,
.bs-specs-table th,
.bs-specs-table td{
    padding:
        11px
        10px;

    border:
        1px solid
        var(--bs-border-light);

    text-align:center;

    font-size:14px;
    line-height:1.5;
}


.bs-tech-table thead th,
.bs-specs-table thead th{
    background:
        var(--bs-bg-head);

    color:
        var(--bs-text-main);

    font-weight:600;
}


.bs-tech-table .left-head,
.bs-specs-table .left-head{
    min-width:160px;

    padding-left:14px;

    background:
        var(--bs-bg-left);

    color:
        var(--bs-text-main);

    font-weight:500;

    text-align:left;
}


.bs-tech-table .param-col,
.bs-specs-table .param-col{
    min-width:105px;

    padding-left:10px;

    background:
        var(--bs-bg-param);

    color:
        var(--bs-text-soft);

    font-weight:500;

    text-align:left;
}


.bs-tech-table .module-title,
.bs-specs-table .module-title{
    background:#fff;

    color:
        var(--bs-primary);

    font-weight:600;
}


.bs-tech-table .sub-head,
.bs-specs-table .sub-head{
    background:#fbfbfb;

    color:#444;

    font-size:13px;
    font-weight:600;
}


.bs-tech-table
tbody
tr:nth-child(even)
td,
.bs-specs-table
tbody
tr:nth-child(even)
td{
    background:
        var(--bs-bg-param);
}


.bs-tech-table
tbody
tr:hover
td,
.bs-specs-table
tbody
tr:hover
td{
    background:#fff8f1;
}


.bs-tech-table .eff-row td,
.bs-specs-table .eff-row td{
    font-weight:600;
}


/* ==========================================================
   10. VIDEO
   IMPORTANT:
   Parent controls the 16:9 ratio.
   Works with old iframe HTML.
   ========================================================== */

.bs-video-section{
    width:100%;
    margin-bottom:60px;
}


/* ==========================================================
   VIDEO HEADER
   ========================================================== */

.bs-video-header{
    margin-bottom:22px;
}


/* ==========================================================
   VIDEO CARD
   Parent produces real height with padding-bottom
   ========================================================== */

.bs-video-card{
    position:relative !important;

    width:100% !important;
    max-width:1120px;

    height:0 !important;

    /*
       16 : 9
       Do NOT replace with aspect-ratio here.
       This is intentional for legacy compatibility.
    */
    padding:
        0
        0
        56.25%
        0 !important;

    margin:
        0
        auto !important;

    overflow:hidden !important;

    background:#111;

    border:0 !important;
    border-radius:10px;

    box-shadow:none !important;

    box-sizing:border-box;
}


/* ==========================================================
   VIDEO IFRAME
   ========================================================== */

.bs-video-card iframe{
    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    border-radius:10px;
}


/* ==========================================================
   OLD bs-video-wrapper SUPPORT
   ========================================================== */

.bs-video-card
.bs-video-wrapper{
    position:static !important;

    width:100% !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
}


.bs-video-card
.bs-video-wrapper
iframe{
    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;
}


/* ==========================================================
   WORDPRESS / ELEMENTOR VIDEO WRAPPER SUPPORT
   ========================================================== */

.bs-video-card
.wp-block-embed,

.bs-video-card
.wp-block-embed__wrapper,

.bs-video-card
.elementor-wrapper,

.bs-video-card
.elementor-video,

.bs-video-card
.video-container{
    position:static !important;

    width:100% !important;
    height:auto !important;

    max-width:none !important;
    max-height:none !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
}


/* ==========================================================
   IFRAME DIRECTLY INSIDE VIDEO SECTION
   Legacy fallback
   ========================================================== */

.bs-video-section > iframe{
    display:block;

    width:100% !important;
    max-width:1120px !important;

    height:auto !important;
    min-height:630px;

    margin:
        0
        auto;

    border:
        0 !important;

    border-radius:
        10px;

    background:#111;
}


/* ==========================================================
   VIDEO NOTE
   ========================================================== */

.bs-video-note{
    width:100%;
    max-width:1120px;

    margin:
        12px
        auto
        0;

    padding:0;

    color:
        var(--bs-text-soft);

    font-size:14px;
    line-height:1.7;
    font-weight:400;

    text-align:left;
}


/* ==========================================================
   LEGACY VIDEO TITLE
   Some old pages do not use bs-video-header
   ========================================================== */

.bs-video-section > h2{
    max-width:1120px;

    margin:
        0
        auto
        12px;

    padding:0;

    color:
        var(--bs-text-main);

    font-size:
        clamp(28px,2.5vw,34px);

    line-height:1.25;

    font-weight:600;

    letter-spacing:-.4px;
}


.bs-video-section >
p:not(.bs-video-note){
    max-width:1120px;

    margin:
        0
        auto
        18px;

    padding:0;

    color:
        var(--bs-text-body);

    font-size:15px;
    line-height:1.75;
}


/* ==========================================================
   11. FAQ
   ========================================================== */

.bs-faq-list{
    overflow:hidden;
}


.bs-faq-item{
    border-bottom:
        1px solid #e9e9e9;
}


.bs-faq-item:last-child{
    border-bottom:none;
}


.bs-faq-item details{
    width:100%;
}


.bs-faq-item summary{
    position:relative;

    padding:
        22px
        26px;

    list-style:none;

    cursor:pointer;

    color:
        var(--bs-text-main);

    font-size:16.5px;
    line-height:1.55;

    font-weight:500;

    transition:
        background .2s ease;
}


.bs-faq-item
summary::-webkit-details-marker{
    display:none;
}


.bs-faq-item
summary::before{
    content:"+";

    position:absolute;

    left:26px;
    top:50%;

    transform:
        translateY(-50%);

    color:
        var(--bs-primary);

    font-size:24px;
    line-height:1;

    font-weight:500;
}


.bs-faq-item
details[open]
summary::before{
    content:"−";
}


.bs-faq-question{
    display:block;

    padding-left:34px;

    font-weight:500;
}


.bs-faq-item
summary:hover{
    background:
        var(--bs-bg-soft);
}


.bs-faq-answer{
    padding:
        0
        26px
        26px
        60px;

    color:
        var(--bs-text-body);

    font-size:15px;
    line-height:1.85;

    font-weight:400;
}


.bs-faq-answer p{
    margin:0;
}


/* ==========================================================
   12. TABLET
   ========================================================== */

@media (max-width:1024px){


    /* FEATURES */

    .bs-feature-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    /* IMAGE TEXT */

    .bs-image-text,
    .bs-image-text.bs-reverse{
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:36px;
    }


    .bs-image-text-media img{
        height:350px;
    }


    .bs-image-text-content h2{
        font-size:30px;
    }


    .bs-image-text-content p{
        font-size:15px;
    }


}


/* ==========================================================
   13. MOBILE
   ========================================================== */

@media (max-width:768px){


    /* ======================================================
       SECTION SPACING
       ====================================================== */

    .bs-feature-section,
    .bs-compare-section,
    .bs-tech-specs-section,
    .bs-faq-section,
    .bs-video-section,
    .bs-specs-section,
    .bs-image-text-section{
        margin-bottom:42px;
    }


    /* ======================================================
       SECTION HEADER
       ====================================================== */

    .bs-section-header,
    .bs-feature-header,
    .bs-compare-header,
    .bs-tech-specs-header,
    .bs-faq-header,
    .bs-video-header,
    .bs-specs-header{
        margin-bottom:20px;
    }


    .bs-section-header h2,
    .bs-feature-header h2,
    .bs-feature-title,
    .bs-compare-header h2,
    .bs-tech-specs-header h2,
    .bs-faq-header h2,
    .bs-video-header h2,
    .bs-specs-header h2{
        font-size:24px;
        line-height:1.28;
    }


    .bs-section-header p,
    .bs-feature-header p,
    .bs-compare-header p,
    .bs-tech-specs-header p,
    .bs-faq-header p,
    .bs-video-header p,
    .bs-specs-header p{
        font-size:14px;
        line-height:1.7;
    }


    /* ======================================================
       FEATURES
       ====================================================== */

    .bs-feature-grid{
        grid-template-columns:1fr;

        gap:14px;
    }


    .bs-feature-card{
        padding:
            21px
            17px;
    }


    .bs-feature-card h3{
        font-size:16px;
    }


    .bs-feature-card p{
        font-size:14px;
    }


    /* ======================================================
       IMAGE TEXT
       ====================================================== */

    .bs-image-text,
    .bs-image-text.bs-reverse{
        display:flex;

        flex-direction:column;

        gap:24px;
    }


    /*
       Mobile always:
       Image
       ↓
       Text
    */

    .bs-image-text.bs-reverse
    .bs-image-text-media{
        order:1;
    }


    .bs-image-text.bs-reverse
    .bs-image-text-content{
        order:2;
    }


    .bs-image-text-media{
        border-radius:8px;
    }


    .bs-image-text-media img{
        width:100%;
        height:260px;

        object-fit:cover;

        border-radius:8px;
    }


    .bs-image-text.bs-contain
    .bs-image-text-media{
        padding:14px;
    }


    .bs-image-text.bs-contain
    .bs-image-text-media img{
        height:auto;

        max-height:420px;

        object-fit:contain;
    }


    .bs-image-text-content{
        padding:
            0
            2px;
    }


    .bs-image-text-eyebrow{
        margin-bottom:9px;

        font-size:11px;
    }


    .bs-image-text-content h2{
        margin-bottom:13px;

        font-size:25px;
        line-height:1.28;
    }


    .bs-image-text-content h3{
        margin-top:20px;

        font-size:17px;
    }


    .bs-image-text-content p{
        margin-bottom:14px;

        font-size:14px;
        line-height:1.72;
    }


    .bs-image-text-content ul{
        margin-top:15px;
    }


    .bs-image-text-content li{
        padding:
            10px
            0
            10px
            22px;

        font-size:13.5px;
    }


    .bs-image-text-content
    li::before{
        top:18px;

        width:6px;
        height:6px;
    }


    .bs-image-text-section.bs-light{
        padding:
            34px
            18px;

        border-radius:8px;
    }


    /* ======================================================
       TABLES
       ====================================================== */

    .bs-compare-card,
    .bs-tech-card,
    .bs-specs-card{
        padding:12px;

        border-radius:10px;
    }


    .bs-tech-table th,
    .bs-tech-table td,
    .bs-specs-table th,
    .bs-specs-table td,
    .bs-compare-table th,
    .bs-compare-table td{
        padding:
            9px
            8px;

        font-size:13px;
    }


    /* ======================================================
       VIDEO
       ====================================================== */

    .bs-video-section{
        margin-bottom:42px;
    }


    .bs-video-card{
        width:100% !important;
        max-width:none !important;

        height:0 !important;

        padding:
            0
            0
            56.25%
            0 !important;

        border-radius:7px;
    }


    .bs-video-card iframe{
        position:absolute !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100% !important;
        height:100% !important;

        border-radius:7px;
    }


    /*
       Direct iframe legacy fallback
    */

    .bs-video-section > iframe{
        width:100% !important;
        max-width:100% !important;

        height:calc((100vw - 34px) * .5625) !important;
        min-height:220px;

        border-radius:7px;
    }


    .bs-video-section > h2{
        margin-bottom:9px;

        font-size:24px;
        line-height:1.3;
    }


    .bs-video-section >
    p:not(.bs-video-note){
        margin-bottom:14px;

        font-size:14px;
        line-height:1.7;
    }


    .bs-video-note{
        margin-top:9px;

        font-size:13px;
        line-height:1.65;
    }


    /* ======================================================
       FAQ
       ====================================================== */

    .bs-faq-item summary{
        padding:
            18px
            16px;

        font-size:16px;
    }


    .bs-faq-item
    summary::before{
        left:16px;

        font-size:22px;
    }


    .bs-faq-question{
        padding-left:28px;
    }


    .bs-faq-answer{
        padding:
            0
            16px
            22px
            44px;

        font-size:14px;
        line-height:1.8;
    }


    .bs-video-note,
    .bs-tech-drawing-note,
    .bs-compare-note{
        font-size:13px;
    }


}


/* ==========================================================
   14. SMALL MOBILE
   ========================================================== */

@media (max-width:480px){


    .bs-image-text-content h2{
        font-size:23px;
    }


    .bs-image-text-media img{
        height:230px;
    }


    .bs-image-text.bs-contain
    .bs-image-text-media img{
        height:auto;
    }


    .bs-feature-card{
        padding:
            19px
            15px;
    }


    .bs-faq-item summary{
        font-size:15px;
    }


    .bs-faq-answer{
        font-size:13.5px;
    }


    .bs-video-section > iframe{
        height:calc((100vw - 24px) * .5625) !important;
        min-height:190px;
    }


}