/* =========================================================
   KANGDE SILICONE — ABOUT US
   07 — QUALITY & COMPLIANCE

   FULL-BLEED VERSION

   BACKGROUND:
   FULL SCREEN

   CONTENT:
   MAX WIDTH 1320px

   PC:
   6 COLUMNS

   TABLET:
   3 COLUMNS

   MOBILE:
   2 COLUMNS

   VERY SMALL MOBILE:
   1 COLUMN

   LAYOUT:
   KEEP ORIGINAL APPROVED VERSION
========================================================= */


/* =========================================================
   SECTION
   FULL SCREEN BACKGROUND
========================================================= */

.kd-about-quality {

    /* =====================================================
       🔵 FULL WIDTH / FULL BLEED

       用于突破 Ueeshop 外层 container
       让整个背景铺满浏览器宽度。
       ===================================================== */

    width:
        100vw;

    max-width:
        100vw;

    margin-left:
        calc(50% - 50vw);

    margin-right:
        calc(50% - 50vw);

    padding:
        78px 20px
        82px;

    background:
        #14213D;

    color:
        #FFFFFF;

    box-sizing:
        border-box;

    overflow:
        hidden;
}


/* =========================================================
   CONTAINER
   CONTENT WIDTH
========================================================= */

.kd-about-quality .kd-quality-container {

    width:
        100%;

    max-width:
        1320px;

    min-width:
        0;

    margin:
        0 auto;

    box-sizing:
        border-box;
}


/* =========================================================
   HEADER
   ORIGINAL APPROVED LAYOUT
========================================================= */

.kd-about-quality .kd-quality-header {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    gap:
        clamp(
            40px,
            6vw,
            85px
        );

    align-items:
        end;

    margin:
        0 0 48px;

    box-sizing:
        border-box;
}


/* =========================================================
   LARGE QUALITY
========================================================= */

.kd-about-quality .kd-quality-word {

    width:
        100%;

    max-width:
        100%;

    color:
        #FFFFFF;

    font-family:
        Manrope,
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            3rem,
            7vw,
            6.5rem
        );

    line-height:
        .88;

    letter-spacing:
        -.07em;

    font-weight:
        750;

    white-space:
        nowrap;

    overflow:
        hidden;

    box-sizing:
        border-box;
}


/* =========================================================
   RIGHT INTRO
========================================================= */

.kd-about-quality .kd-quality-header-text {

    width:
        100%;

    max-width:
        620px;

    min-width:
        0;

    color:
        rgba(255,255,255,.68);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        15px;

    line-height:
        1.78;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   EYEBROW
========================================================= */

.kd-about-quality .kd-about-eyebrow {

    margin:
        0 0 15px;

    color:
        #72C8C9;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

    font-weight:
        750;

    line-height:
        1.4;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

    overflow-wrap:
        break-word;
}


/* =========================================================
   DIVIDER
========================================================= */

.kd-about-quality .kd-quality-divider {

    width:
        100%;

    height:
        1px;

    margin:
        0 0 28px;

    background:
        rgba(255,255,255,.15);

    box-sizing:
        border-box;
}


/* =========================================================
   QUALITY GRID
========================================================= */

.kd-about-quality .kd-quality-grid {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    display:
        grid;

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

    border-top:
        1px solid rgba(255,255,255,.12);

    border-bottom:
        1px solid rgba(255,255,255,.12);

    box-sizing:
        border-box;
}


/* =========================================================
   QUALITY ITEM
========================================================= */

.kd-about-quality .kd-quality-item {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    min-height:
        145px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        21px 20px;

    border-right:
        1px solid rgba(255,255,255,.12);

    box-sizing:
        border-box;

    transition:
        background-color .2s ease;
}


/* Last item */

.kd-about-quality .kd-quality-item:last-child {

    border-right:
        0;
}


/* =========================================================
   CHECK
========================================================= */

.kd-about-quality .kd-quality-item::before {

    content:
        "✓";

    width:
        100%;

    margin:
        0 0 13px;

    color:
        #72C8C9;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        800;
}


/* =========================================================
   HOVER
========================================================= */

.kd-about-quality .kd-quality-item:hover {

    background:
        rgba(255,255,255,.035);
}


/* =========================================================
   QUALITY NAME
========================================================= */

.kd-about-quality .kd-quality-item strong {

    display:
        block;

    width:
        100%;

    max-width:
        100%;

    color:
        #FFFFFF;

    font-family:
        Manrope,
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        19px;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        -.2px;

    overflow-wrap:
        break-word;
}


/* =========================================================
   QUALITY DESCRIPTION
========================================================= */

.kd-about-quality .kd-quality-item span {

    display:
        block;

    width:
        100%;

    max-width:
        100%;

    margin:
        8px 0 0;

    color:
        rgba(255,255,255,.53);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        10px;

    font-weight:
        400;

    line-height:
        1.55;

    overflow-wrap:
        break-word;
}


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

.kd-about-quality .kd-quality-note {

    width:
        100%;

    max-width:
        900px;

    margin:
        25px 0 0;

    color:
        rgba(255,255,255,.47);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        10.5px;

    font-weight:
        400;

    line-height:
        1.65;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .kd-about-quality {

        /*
         * FULL SCREEN BACKGROUND
         */

        width:
            100vw;

        max-width:
            100vw;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);

        padding:
            66px 20px
            72px;
    }


    .kd-about-quality .kd-quality-container {

        width:
            100%;

        max-width:
            900px;
    }


    .kd-about-quality .kd-quality-header {

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

        align-items:
            start;

        gap:
            20px;

        margin-bottom:
            40px;
    }


    .kd-about-quality .kd-quality-word {

        font-size:
            clamp(
                3rem,
                11vw,
                5rem
            );
    }


    .kd-about-quality .kd-quality-header-text {

        max-width:
            780px;

        font-size:
            14px;

        line-height:
            1.72;
    }


    .kd-about-quality .kd-quality-grid {

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


    .kd-about-quality .kd-quality-item:nth-child(3) {

        border-right:
            0;
    }


    .kd-about-quality .kd-quality-item:nth-child(n+4) {

        border-top:
            1px solid rgba(255,255,255,.12);
    }


    .kd-about-quality .kd-quality-item {

        min-height:
            130px;

        padding:
            19px 18px;
    }


    .kd-about-quality .kd-quality-item strong {

        font-size:
            18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .kd-about-quality {

        /*
         * FULL SCREEN BACKGROUND
         */

        width:
            100vw;

        max-width:
            100vw;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);

        padding:
            52px 16px
            56px;
    }


    .kd-about-quality .kd-quality-container {

        width:
            100%;

        max-width:
            100%;
    }


    /* Header */

    .kd-about-quality .kd-quality-header {

        margin-bottom:
            35px;
    }


    /* Large word */

    .kd-about-quality .kd-quality-word {

        font-size:
            clamp(
                2.8rem,
                15vw,
                4.2rem
            );

        line-height:
            .9;
    }


    /* Right text */

    .kd-about-quality .kd-quality-header-text {

        width:
            100%;

        max-width:
            100%;

        font-size:
            14px;

        line-height:
            1.7;
    }


    .kd-about-quality .kd-about-eyebrow {

        margin-bottom:
            13px;

        font-size:
            11px;

        letter-spacing:
            1.6px;
    }


    /* Divider */

    .kd-about-quality .kd-quality-divider {

        margin-bottom:
            22px;
    }


    /* Grid */

    .kd-about-quality .kd-quality-grid {

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

        width:
            100%;

        max-width:
            100%;
    }


    /* Items */

    .kd-about-quality .kd-quality-item {

        min-height:
            110px;

        padding:
            17px 15px;

        border-right:
            1px solid rgba(255,255,255,.12);
    }


    .kd-about-quality .kd-quality-item:nth-child(even) {

        border-right:
            0;
    }


    .kd-about-quality .kd-quality-item:nth-child(n+3) {

        border-top:
            1px solid rgba(255,255,255,.12);
    }


    .kd-about-quality .kd-quality-item:nth-child(3) {

        border-right:
            1px solid rgba(255,255,255,.12);
    }


    .kd-about-quality .kd-quality-item strong {

        font-size:
            17px;

        line-height:
            1.2;
    }


    .kd-about-quality .kd-quality-item span {

        margin-top:
            7px;

        font-size:
            9px;

        line-height:
            1.5;
    }


    .kd-about-quality .kd-quality-item::before {

        margin-bottom:
            11px;

        font-size:
            10px;
    }


    /* Note */

    .kd-about-quality .kd-quality-note {

        max-width:
            100%;

        margin-top:
            22px;

        font-size:
            9.5px;

        line-height:
            1.6;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .kd-about-quality {

        width:
            100vw;

        max-width:
            100vw;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);

        padding:
            46px 14px
            50px;
    }


    .kd-about-quality .kd-quality-word {

        font-size:
            2.75rem;
    }


    .kd-about-quality .kd-quality-grid {

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


    .kd-about-quality .kd-quality-item,
    .kd-about-quality .kd-quality-item:nth-child(even),
    .kd-about-quality .kd-quality-item:nth-child(3) {

        border-right:
            0;

        border-top:
            1px solid rgba(255,255,255,.12);
    }


    .kd-about-quality .kd-quality-item:first-child {

        border-top:
            0;
    }


    .kd-about-quality .kd-quality-item {

        min-height:
            95px;

        padding:
            17px 15px;
    }


    .kd-about-quality .kd-quality-item strong {

        font-size:
            17px;
    }


    .kd-about-quality .kd-quality-item span {

        font-size:
            9px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kd-about-quality *,
    .kd-about-quality *::before,
    .kd-about-quality *::after {

        transition:
            none !important;
    }

}