@font-face {
    font-family: 'Inter';
    src: url('../../assets/fonts/InterVariable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
    font-family: var(--font-family-sans);
}

body,
button,
input,
textarea,
select {
    font-family: inherit;
}


/* ========================================
   Components CSS - Header & Footer
   閫氱敤椤靛ご鍜岄〉鑴氱粍浠舵牱寮?
   瀹屽叏鐓ф惉浜у搧璇︽儏椤垫牱寮忚鑼?
   鍩轰簬1920px璁捐绋?
   ======================================== */

/* ========================================
   01. HEADER - 椤靛ご瀵艰埅缁勪欢
   鐓ф惉浜у搧璇︽儏椤?body.product-detail-page header 鏍峰紡
   ======================================== */

/* Header涓诲鍣?- 鍩虹flex甯冨眬 + 鍚搁《鏁堟灉 */
#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #F5F5F5;
    height: clamp(64px, calc(80 * 100vw / 1920), 88px);
    padding-top: clamp(12.8px, calc(16 * 100vw / 1920), 20px);
    padding-bottom: clamp(12.8px, calc(16 * 100vw / 1920), 20px);
    padding-left: clamp(32px, calc(280 * 100vw / 1920), 280px);
    padding-right: clamp(32px, calc(280 * 100vw / 1920), 280px);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Header鍐呴儴瀹瑰櫒 - 姘村钩甯冨眬 + 涓ょ瀵归綈 */
#site-header > div,
#site-header .header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
}

/* 宸︿晶鍖哄煙 (Logo + 瀵艰埅) */
#site-header > div > div:first-child {
    display: flex !important;
    align-items: center !important;
}

/* Logo鍥剧墖 - 鍩轰簬1920璁捐绋? height 48px */
#site-header .header-logo-img {
    height: clamp(38.4px, calc(48 * 100vw / 1920), 48px);
    width: auto;
    display: block;
}

/* 瀵艰埅鏍忓鍣?- 鍩轰簬1920璁捐绋? margin-left 324px, gap 48px */
#site-header nav.header-nav {
    display: flex !important;
    align-items: center !important;
    margin-left: clamp(160px, calc(324 * 100vw / 1920), 324px);
    gap: clamp(28.8px, calc(48 * 100vw / 1920), 48px);
    background: none;
    padding: 0;
}

/* 瀵艰埅閾炬帴鏂囨湰鏍峰紡 - Inter-Medium, #3E403D/#D9300A, 18px, 1.68px闂磋窛, 18px琛岄珮 */
#site-header nav.header-nav a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #3E403D;
    font-size: clamp(12.8px, calc(16 * 100vw / 1920), 16px);
    letter-spacing: clamp(1.792px, calc(2.24 * 100vw / 1920), 2.24px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* 瀵艰埅閾炬帴hover鐘舵€?*/
#site-header nav.header-nav a:hover {
    color: #D9300A;
}

/* 褰撳墠椤甸潰瀵艰埅閾炬帴楂樹寒 */
#site-header nav.header-nav a.active {
    color: #D9300A;
}

/* Header鍙充晶鍖哄煙 - 鍩轰簬1920璁捐绋? gap 16px */
#site-header .header-right {
    display: flex !important;
    align-items: center !important;
    gap: clamp(12.8px, calc(16 * 100vw / 1920), 16px);
}

/* 璇█鍒囨崲鎸夐挳 - Inter-Medium, rgba(28,30,27,0.7), 12px */
.site-language-toggle {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: rgba(28, 30, 27, 0.7);
    font-size: clamp(9.6px, calc(12 * 100vw / 1920), 12px);
    letter-spacing: clamp(1.344px, calc(1.68 * 100vw / 1920), 1.68px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.site-language-toggle:hover {
    opacity: 0.7;
}

/* 鍒嗛殧绾?- 鍩轰簬1920璁捐绋? width 1px, height 18px */
.header-divider {
    width: clamp(0.8px, calc(1 * 100vw / 1920), 1px);
    height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    background: rgba(28, 30, 27, 0.4);
    display: block;
}

/* 鎼滅储鍥炬爣 - 鍩轰簬1920璁捐绋? 14x15px */
.header-search-icon {
    width: clamp(11.2px, calc(14 * 100vw / 1920), 14px);
    height: clamp(12px, calc(15 * 100vw / 1920), 15px);
    cursor: pointer;
    display: block;
    transition: opacity 0.2s ease;
}

.header-search-icon:hover {
    opacity: 0.7;
}


/* ========================================
   02. FOOTER - 椤佃剼缁勪欢
   瀹屽叏鐓ф惉浜у搧璇︽儏椤?footer.site-footer 鏍峰紡 (main-page.css:1799)
   ======================================== */

.site-footer {
    height: clamp(40px, calc(80 * 100vw / 1920), 80px);
    min-height: clamp(40px, calc(80 * 100vw / 1920), 80px);
    background-color: #1C1E1B;
    padding: clamp(8px, calc(16 * 100vw / 1920), 16px) clamp(140px, calc(280 * 100vw / 1920), 280px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: nowrap;
    overflow: hidden;
}

/* Logo瀹瑰櫒 - 鍩轰簬1920璁捐绋? width 157px, height 48px, margin-right 317px */
.footer-logo {
    width: clamp(82px, calc(157 * 100vw / 1920), 157px);
    height: clamp(24px, calc(48 * 100vw / 1920), 48px);
    margin-right: clamp(165px, calc(317 * 100vw / 1920), 317px) !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

/* Footer Logo鍥剧墖 - 濉弧瀹瑰櫒 */
.footer-logo-img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
}

/* 鐗堟潈淇℃伅鏂囨湰 - 鍩轰簬1920璁捐绋? margin-right 251px */
.footer-copy {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    font-size: clamp(5.7px, calc(11 * 100vw / 1920), 11px);
    line-height: clamp(8.6px, calc(16.5 * 100vw / 1920), 16.5px);
    text-align: left;
    margin-right: clamp(130px, calc(251 * 100vw / 1920), 251px) !important;
    flex: 0 0 auto;
    white-space: nowrap;
    letter-spacing: normal;
}

/* Footer 閾炬帴鍖哄煙 - 鍩轰簬1920璁捐绋? gap 32px */
.footer-links {
    display: flex !important;
    align-items: center;
    gap: clamp(16.6px, calc(32 * 100vw / 1920), 32px);
    flex: 0 0 auto;
}

/* Footer 閾炬帴鏂囨湰 - 涓庝骇鍝佽鎯呴〉涓€鑷?*/
.footer-links a {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    font-size: clamp(5.7px, calc(11 * 100vw / 1920), 11px);
    line-height: clamp(8.6px, calc(16.5 * 100vw / 1920), 16.5px);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Footer 閾炬帴hover鐘舵€?- 涓庝骇鍝佽鎯呴〉涓€鑷?*/
.footer-links a:hover {
    color: rgba(255, 255, 255, 0.9);
}


/* ========================================
   03. 鍝嶅簲寮忛€傞厤
   鐓ф惉浜у搧璇︽儏椤靛獟浣撴煡璇?
   ======================================== */

/* 涓瓑灞忓箷 (max-width: 1280px): 缂╁皬闂磋窛 */
@media screen and (max-width: 1280px) {
    #site-header {
        padding-left: clamp(24px, calc(180 * 100vw / 1280), 180px);
        padding-right: clamp(24px, calc(180 * 100vw / 1280), 180px);
    }

    #site-header nav.header-nav {
        margin-left: clamp(120px, calc(240 * 100vw / 1280), 240px);
        gap: clamp(24px, calc(36 * 100vw / 1280), 36px);
    }
}

/* 骞虫澘灞忓箷 (max-width: 1024px): 杩涗竴姝ョ缉灏?*/
@media screen and (max-width: 1024px) {
    #site-header {
        padding-left: clamp(20px, calc(140 * 100vw / 1024), 140px);
        padding-right: clamp(20px, calc(140 * 100vw / 1024), 140px);
    }

    #site-header nav.header-nav {
        margin-left: clamp(80px, calc(160 * 100vw / 1024), 160px);
        gap: clamp(20px, calc(28 * 100vw / 1024), 28px);
    }
}

/* 灏忓睆骞?(max-width: 768px): 绉诲姩绔紭鍖?- 涓庝骇鍝佽鎯呴〉涓€鑷?*/
@media screen and (max-width: 1000px) {
    .site-footer {
        height: auto !important;
        min-height: clamp(32px, calc(80 * 100vw / 1920), 80px);
        padding: clamp(8px, calc(16 * 100vw / 1920), 16px) clamp(12.5px, calc(48 * 100vw / 1920), 48px) !important;
        flex-wrap: wrap;
        white-space: normal;
        justify-content: center !important;
    }

    .footer-logo,
    .footer-copy {
        margin-right: 0 !important;
    }

    .footer-links {
        margin-left: auto;
    }
}

@media screen and (max-width: 768px) {
    /* Header绉诲姩绔€傞厤 */
    #site-header {
        height: auto;
        min-height: clamp(56px, calc(64 * 100vw / 768), 64px);
        padding-top: clamp(12px, calc(16 * 100vw / 768), 16px);
        padding-bottom: clamp(12px, calc(16 * 100vw / 768), 16px);
        padding-left: clamp(16px, calc(32 * 100vw / 768), 32px);
        padding-right: clamp(16px, calc(32 * 100vw / 768), 32px);
    }

    #site-header > div {
        flex-wrap: wrap;
    }

    #site-header nav.header-nav {
        display: none; /* 绉诲姩绔殣钘忓鑸紝鍙敼涓烘眽鍫¤彍鍗?*/
    }

    #site-header .header-logo-img {
        height: clamp(32px, calc(40 * 100vw / 768), 40px);
    }

    .site-language-toggle {
        font-size: clamp(8px, calc(10 * 100vw / 768), 10px);
    }
    .header-divider {
        margin: 0 8px;
    }

    .header-search-icon {
        width: 12px;
        height: 12px;
    }

    .site-footer {
        height: auto !important;
        min-height: clamp(32px, calc(80 * 100vw / 1920), 80px);
        padding: clamp(8px, calc(16 * 100vw / 1920), 16px) clamp(12.5px, calc(48 * 100vw / 1920), 48px) !important;
        flex-wrap: wrap;
        white-space: normal;
        justify-content: center !important;
    }

    .footer-logo,
    .footer-copy {
        margin-right: 0 !important;
    }

    .footer-logo-img {
        height: clamp(32px, calc(40 * 100vw / 768), 44px);
    }

    .footer-copy,
    .footer-links a {
        font-size: clamp(8px, calc(9 * 100vw / 768), 9px);
        white-space: normal;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: clamp(12px, calc(20 * 100vw / 768), 20px);
    }
}



:root {
    --pure-white: #ffffff;
    --off-white: #f5f5f5;
    --light-grey: #e0e0e0;
    --mid-grey: #757575;
    --dark-grey: #333333;
    --pure-black: #000000;
    --safety-red: #d32f2f;
    --main-nav-height: clamp(64px, calc(80 * 100vw / 1920), 88px);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--pure-black);
    margin: 0;
    background-color: var(--pure-white);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

/* LAYER MANAGEMENT */
.layer-fade-enter-active,
.layer-fade-leave-active {
    transition: opacity 0.4s ease-in-out;
}

.layer-fade-enter-from,
.layer-fade-leave-to {
    opacity: 0;
}

/* NAVIGATION */
nav {
    background: var(--pure-white);
    padding: 1rem 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--pure-black);
    text-decoration: none;
    letter-spacing: -1px;
    cursor: pointer;
}

.logo span {
    color: var(--safety-red);
}

.nav-links a,
.nav-links button {
    margin-left: 25px;
    text-decoration: none;
    color: var(--pure-black);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.nav-links a:hover,
.nav-links button:hover {
    color: var(--safety-red);
}

.nav-links .inquiry-link {
    color: var(--safety-red);
}

/* BUTTONS */
.btn {
    background: var(--safety-red);
    color: white;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--pure-black);
    color: white;
}

.btn-black {
    background: var(--pure-black);
}

/* HERO */
.hero {
    background: var(--pure-black);
    color: var(--pure-white);
    padding: 0;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    min-height: calc(100dvh - var(--main-nav-height));
    height: calc(100dvh - var(--main-nav-height));
    display: flex;
    align-items: center;
    width: 100%;
}

.media-carousel {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.media-carousel-track {
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.55s ease;
}

.media-carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.media-carousel-media {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-carousel,
.about-carousel,
.about-us-carousel {
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.36) 44%, rgba(0, 0, 0, 0.1) 100%);
}

.hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 clamp(120px, calc(240 * 100vw / 1920), 240px) clamp(52px, calc(100 * 100vw / 1920), 100px);
    min-width: 0;
}

.hero-copy {
    width: min(100%, clamp(640px, calc(960 * 100vw / 1920), 960px));
    max-width: min(100%, clamp(640px, calc(960 * 100vw / 1920), 960px));
    min-width: 0;
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
    margin-bottom: clamp(calc(12.6 * 100vw / 1920), calc(18 * 100vw / 1920), 18px);
    color: #ffb900;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(calc(8.4 * 100vw / 1920), calc(12 * 100vw / 1920), 12px);
    font-weight: 400;
    line-height: clamp(calc(12.6 * 100vw / 1920), calc(18 * 100vw / 1920), 18px);
    letter-spacing: clamp(calc(2.1 * 100vw / 1920), calc(3 * 100vw / 1920), 3px);
    text-transform: uppercase;
    width: 100%;
    max-width: 100%;
    min-height: clamp(calc(12.6 * 100vw / 1920), calc(18 * 100vw / 1920), 18px);
    box-sizing: border-box;
}

.hero-kicker-line {
    width: clamp(calc(22.4 * 100vw / 1920), calc(32 * 100vw / 1920), 32px);
    height: 1px;
    background: var(--safety-red);
    display: inline-block;
    flex-shrink: 0;
}

.hero-kicker-text {
    white-space: nowrap;
}

.hero h1 {
    font-size: clamp(40px, calc(88 * 100vw / 1920), 88px) !important;
    text-transform: uppercase;
    margin: 0;
    line-height: clamp(40px, calc(88 * 100vw / 1920), 88px);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: normal;
    overflow-wrap: break-word;
}

.hero p {
    font-size: clamp(14px, calc(19 * 100vw / 1920), 19px) !important;
    max-width: 100%;
    margin: clamp(24px, calc(36 * 100vw / 1920), 36px) 0 clamp(32px, calc(48 * 100vw / 1920), 48px);
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.hero .btn {
    width: clamp(220px, calc(258 * 100vw / 1920), 258px) !important;
    height: clamp(50px, calc(58 * 100vw / 1920), 58px) !important;
}

/* Banner 鎸夐挳 - div 鏍峰紡锛堟浛锟?button锟?*/
.banner-btn {
    width: clamp(224px, 17.78vw, 256px) !important;
    height: clamp(50px, 3.89vw, 56px) !important;
    background: #D9300A;
    padding: clamp(14px, 1.25vw, 18px) clamp(20px, 1.8vw, 26px) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.banner-btn span {
    width: clamp(118px, 7.4vw, 142px) !important;
    max-width: none !important;
    font-family: 'Inter', 'Inter', sans-serif;
    font-weight: normal;
    font-size: clamp(11px, 0.68vw, 13px) !important;
    color: #FFFFFF;
    line-height: clamp(17px, 1.04vw, 20px) !important;
    letter-spacing: clamp(1.4px, 0.11vw, 2px) !important;
    text-align: left;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
}

/* Banner鎸夐挳鍥炬爣鏍峰紡 */
.banner-btn-icon {
    width: clamp(15px, 0.94vw, 18px);
    height: clamp(15px, 0.94vw, 18px);
    display: block;
    flex-shrink: 0;
}

/* 杞挱鍥炬寚绀哄櫒 */
.banner-indicators {
    position: absolute;
    bottom: clamp(12px, calc(20 * 100vw / 1920), 20px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: clamp(8px, calc(10 * 100vw / 1920), 10px);
    z-index: 3;
}

.about-carousel .banner-indicators,
.about-us-carousel .banner-indicators {
    bottom: clamp(18px, calc(22 * 100vw / 1920), 22px);
}

.about-carousel .banner-arrows,
.about-us-carousel .banner-arrows {
    padding: 0 clamp(10px, calc(14 * 100vw / 1920), 14px);
}

.banner-indicators .indicator {
    width: clamp(10px, calc(12 * 100vw / 1920), 12px);
    height: clamp(10px, calc(12 * 100vw / 1920), 12px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: clamp(1px, calc(2 * 100vw / 1920), 2px) solid white;
    cursor: pointer;
    transition: 0.3s;
    padding: 0;
}

.banner-indicators .indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

.banner-indicators .indicator.active {
    background: var(--safety-red);
    border-color: var(--safety-red);
}

/* 杞挱鍥剧锟?*/
.banner-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 clamp(10px, calc(17 * 100vw / 1920), 17px);
    z-index: 3;
    pointer-events: none;
}

.banner-arrows .arrow {
    width: clamp(35px, calc(50 * 100vw / 1920), 50px);
    height: clamp(35px, calc(50 * 100vw / 1920), 50px);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: clamp(1px, calc(2 * 100vw / 1920), 2px) solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    pointer-events: auto;
}

.banner-arrows .arrow:hover {
    background: var(--safety-red);
    border-color: var(--safety-red);
}

.about-right,
.about-us-media {
    position: relative;
}

.about-carousel {
    position: relative;
    width: calc(774 * 100vw / 1920);
    height: calc(480 * 100vw / 1920);
    overflow: hidden;
    background: #111;
}

.about-slide {
    background: #111;
}

.about-us-carousel {
    position: relative;
    width: 100%;
    height: calc(616 * 100vw / 1920);
    overflow: hidden;
    background: #111;
}

.about-us-slide {
    background: #111;
}

/* SECTIONS */
.section {
    padding: 100px 8%;
}

/* Banner鍥句笅鏂规ā锟?- #about 鍐呰竟璺濓細128px 280px 鍝嶅簲锟?*/
.section-tag {
    color: var(--safety-red);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 15px;
    display: block;
}

.section-title {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.section-grey {
    background: var(--off-white);
}

/* 榛戣壊鑳屾櫙妯″潡鍐呭宸﹀锟?*/
.black-section .section-tag,
.black-section .section-title,
.black-section p {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}

/* 鐏拌壊鑳屾櫙妯″潡鍐呭宸﹀锟?*/
.section-grey .section-tag,
.section-grey .section-title {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}

/* HUB GRID */
.hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.hub-card {
    padding: 40px;
    border: 1px solid var(--light-grey);
    background: var(--off-white);
}

.hub-card h3 {
    text-transform: uppercase;
    margin-top: 0;
    border-bottom: 2px solid var(--safety-red);
    display: inline-block;
    padding-bottom: 5px;
}

/* ABOUT SECTION */
#about {
    padding: clamp(calc(89.6 * 100vw / 1920), calc(128 * 100vw / 1920), 128px) clamp(calc(196 * 100vw / 1920), calc(280 * 100vw / 1920), min(280px, 90vw)) clamp(calc(89.6 * 100vw / 1920), calc(128 * 100vw / 1920), 128px);
}

#about .case-study-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: clamp(calc(158.2 * 100vw / 1920), calc(226 * 100vw / 1920), 226px);
    max-width: 100%;
    height: clamp(calc(19.6 * 100vw / 1920), calc(28 * 100vw / 1920), 28px);
    margin-top: clamp(calc(44.8 * 100vw / 1920), calc(64 * 100vw / 1920), 64px);
    padding: 0 clamp(calc(12.6 * 100vw / 1920), calc(18 * 100vw / 1920), 18px);
    gap: clamp(calc(3.5 * 100vw / 1920), calc(5 * 100vw / 1920), 5px);
    background: #1C1E1B;
    border-radius: clamp(calc(2.8 * 100vw / 1920), calc(4 * 100vw / 1920), 4px);
    color: #FFFFFF;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(calc(7 * 100vw / 1920), calc(10 * 100vw / 1920), 10px);
    font-weight: 700;
    line-height: clamp(calc(10.5 * 100vw / 1920), calc(15 * 100vw / 1920), 15px);
    letter-spacing: clamp(calc(1.4 * 100vw / 1920), calc(2 * 100vw / 1920), 2px);
    text-align: left;
    text-transform: none;
    font-style: normal;
    white-space: nowrap;
}

#about .case-study-dot {
    width: clamp(calc(4.2 * 100vw / 1920), calc(6 * 100vw / 1920), 6px);
    height: clamp(calc(4.2 * 100vw / 1920), calc(6 * 100vw / 1920), 6px);
    border-radius: clamp(calc(2.1 * 100vw / 1920), calc(3 * 100vw / 1920), 3px);
    background: #D9300A;
    flex-shrink: 0;
}

#about .case-study-text {
    white-space: nowrap;
}

#about .about-wrapper {
    display: grid;
    grid-template-columns: minmax(0, clamp(calc(429.8 * 100vw / 1920), calc(614 * 100vw / 1920), 614px)) minmax(0, 1fr);
    gap: clamp(calc(29.4 * 100vw / 1920), calc(42 * 100vw / 1920), 42px);
    align-items: start;
}

#about .about-left {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#about .about-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    margin-top: clamp(calc(29.4 * 100vw / 1920), calc(42 * 100vw / 1920), 42px);
}

#about .about-title,
#products-preview .about-title {
    width: 100%;
    max-width: 100%;
    min-height: clamp(49px, calc(118 * 100vw / 1920), 118px);
    margin: clamp(12.6px, calc(24 * 100vw / 1920), 24px) 0 0;
    padding: 0;
    color: #1C1E1B;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(calc(39.2 * 100vw / 1920), calc(56 * 100vw / 1920), 56px);
    font-weight: 600;
    line-height: clamp(calc(41.16 * 100vw / 1920), calc(58.8 * 100vw / 1920), 58.8px);
    text-align: left;
    text-transform: none;
    font-style: normal;
    letter-spacing: clamp(calc(-0.57 * 100vw / 1920), calc(-0.82 * 100vw / 1920), -0.82px);
    overflow-wrap: anywhere;
    text-wrap: balance;
    justify-self: stretch;
}

#products-preview .products-preview-title {
    width: min(100%, clamp(calc(429.8 * 100vw / 1920), calc(614 * 100vw / 1920), 614px));
    font-size: clamp(calc(36.4 * 100vw / 1920), calc(52 * 100vw / 1920), 52px);
    line-height: clamp(calc(38.22 * 100vw / 1920), calc(54.6 * 100vw / 1920), 54.6px);
    letter-spacing: clamp(calc(-0.5 * 100vw / 1920), calc(-0.71 * 100vw / 1920), -0.71px);
}

#about .about-desc,
#products-preview .about-desc {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: clamp(calc(44.8 * 100vw / 1920), calc(64 * 100vw / 1920), 64px) 0 0;
    color: #404040;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
    font-weight: 400;
    line-height: clamp(calc(18.2 * 100vw / 1920), calc(26 * 100vw / 1920), 26px);
    text-align: left;
    font-style: normal;
    text-transform: none;
    letter-spacing: clamp(calc(-0.22 * 100vw / 1920), calc(-0.31 * 100vw / 1920), -0.31px);
    overflow-wrap: break-word;
}

#products-preview {
    padding: clamp(calc(89.6 * 100vw / 1920), calc(128 * 100vw / 1920), 128px) clamp(calc(196 * 100vw / 1920), calc(280 * 100vw / 1920), min(280px, 90vw)) clamp(calc(89.6 * 100vw / 1920), calc(128 * 100vw / 1920), 128px);
}

#products-preview .products-preview-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, calc(40 * 100vw / 1920), 40px);
}

#products-preview .products-preview-left {
    flex: 1 1 auto;
    min-width: 0;
}

#products-preview .products-preview-right {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

#products-preview .products-preview-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: calc(8 * 100vw / 1920);
    padding: 0;
    border: 0;
    background: transparent;
    color: #1C1E1B;
    cursor: pointer;
    text-transform: uppercase;
}

#products-preview .products-preview-link-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

#products-preview .products-preview-link-text {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: calc(13 * 100vw / 1920);
    font-weight: 500;
    line-height: calc(19.5 * 100vw / 1920);
    letter-spacing: calc(2 * 100vw / 1920);
    color: #1C1E1B;
    white-space: nowrap;
}

#products-preview .products-preview-link-icon {
    width: calc(13 * 100vw / 1920);
    height: calc(13 * 100vw / 1920);
    display: block;
    flex-shrink: 0;
    margin-left: calc(12 * 100vw / 1920);
    background-color: #1C1E1B;
    -webkit-mask-image: url('../../assets/icons/close-icon.svg?v=2');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../../assets/icons/close-icon.svg?v=2');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

#products-preview .products-preview-link-line {
    width: calc(196 * 100vw / 1920);
    height: 1px;
    display: block;
    background: #1C1E1B;
    opacity: 0.9;
}

#products-preview .product-grid {
    margin-top: calc(64 * 100vw / 1920);
}

/* ABOUT US SECTION */
.about-us-section {
    padding: calc(128 * 100vw / 1920) 0 calc(72 * 100vw / 1920);
}

#about-us .about-us-media {
    position: relative;
    width: 100%;
    height: calc(616 * 100vw / 1920);
    overflow: hidden;
}

#about-us .about-us-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#about-us .about-us-overlay {
    position: absolute;
    top: calc(86 * 100vw / 1920);
    right: calc(280 * 100vw / 1920);
    width: calc(534 * 100vw / 1920);
    max-width: calc(534 * 100vw / 1920);
    max-height: calc(100% - calc(86 * 100vw / 1920) - calc(48 * 100vw / 1920));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    z-index: 2;
    box-sizing: border-box;
}

#about-us .about-us-title {
    width: 100%;
    margin: clamp(24px, calc(24 * 100vw / 1920), 24px) 0 0;
    color: #1C1E1B;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: calc(44 * 100vw / 1920);
    font-weight: 600;
    line-height: calc(47.52 * 100vw / 1920);
    letter-spacing: calc(-0.51 * 100vw / 1920);
    text-transform: none;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#about-us .about-us-body {
    width: 100%;
    margin: 0;
    color: #525252;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: calc(16 * 100vw / 1920);
    font-weight: 400;
    line-height: calc(26 * 100vw / 1920);
    letter-spacing: calc(-0.31 * 100vw / 1920);
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

#about-us .about-us-body--intro {
    margin-top: clamp(24px, calc(24 * 100vw / 1920), 24px);
    -webkit-line-clamp: 3;
}

#about-us .about-us-body--detail {
    margin-top: clamp(24px, calc(24 * 100vw / 1920), 24px);
    margin-bottom: clamp(56px, calc(56 * 100vw / 1920), 56px);
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#about-us .about-us-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: calc(206 * 100vw / 1920);
    margin-top: clamp(8px, calc(8 * 100vw / 1920), 8px);
    padding: 0;
    text-decoration: none;
    color: #1C1E1B;
    flex: 0 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#about-us .about-us-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#about-us .about-us-link-text {
    margin-right: clamp(12px, calc(12 * 100vw / 1920), 12px);
    color: #1C1E1B;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: calc(13 * 100vw / 1920);
    font-weight: 500;
    line-height: calc(19.5 * 100vw / 1920);
    letter-spacing: calc(2 * 100vw / 1920);
    text-transform: uppercase;
    white-space: nowrap;
}

#about-us .about-us-link-icon-box {
    width: calc(11 * 100vw / 1920);
    height: calc(11 * 100vw / 1920);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#about-us .about-us-link-icon {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #1C1E1B;
    -webkit-mask-image: url('../../assets/icons/close-icon.svg?v=2');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../../assets/icons/close-icon.svg?v=2');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

#about-us .about-us-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(-8 * 100vw / 1920);
    width: calc(206 * 100vw / 1920);
    height: 1px;
    background: #1C1E1B;
    opacity: 0.9;
}

.about-us-followup-inner {
    width: 100%;
    margin-top: calc(96 * 100vw / 1920);
    padding: 0 calc(280 * 100vw / 1920);
    box-sizing: border-box;
}

.about-us-followup-line {
    width: 100%;
    height: 1px;
    background: #E5E5E5;
}

.about-us-followup-content {
    width: 100%;
    padding-top: calc(36 * 100vw / 1920);
    min-height: 1px;
    box-sizing: border-box;
}

.about-us-followup-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(24px, calc(40 * 100vw / 1920), 40px);
}

.about-us-followup-image-wrap {
    width: 100%;
    height: calc(175 * 100vw / 1920);
    margin-top: calc(36 * 100vw / 1920);
    overflow: hidden;
}

.about-us-followup-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-us-followup-text {
    color: #1A1A1A;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: calc(11 * 100vw / 1920);
    font-weight: 400;
    line-height: calc(16.5 * 100vw / 1920);
    letter-spacing: calc(2.26 * 100vw / 1920);
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.about-us-followup-text--muted {
    color: #737373;
}

#about .about-cta {
    width: 100%;
    max-width: 100%;
    height: clamp(52px, 3.33vw, 64px);
    margin-top: clamp(24px, calc(32 * 100vw / 1920), 32px);
    padding: clamp(18px, 1.2vw, 23px) 0 clamp(18px, 1.2vw, 23px) clamp(18px, 1.25vw, 24px);
    border-radius: 0;
    border: 1px solid #1C1E1B;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
    justify-self: stretch;
}

#about .about-cta-text {
    width: auto;
    height: clamp(16px, 0.94vw, 18px);
    color: #1C1E1B;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(11px, calc(12 * 100vw / 1920), 12px);
    font-weight: 600;
    line-height: calc(18 * 100vw / 1920);
    letter-spacing: calc(2.16 * 100vw / 1920);
    text-align: left;
    font-style: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

#about .about-cta-icon {
    width: calc(12 * 100vw / 1920);
    height: calc(12 * 100vw / 1920);
    margin-right: clamp(18px, 1.25vw, 24px);
    flex-shrink: 0;
    display: block;
    background-color: #1C1E1B;
    -webkit-mask-image: url('../../assets/icons/close-icon.svg?v=2');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../../assets/icons/close-icon.svg?v=2');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

#about .about-video {
    position: relative;
    width: calc(774 * 100vw / 1920);
    height: calc(480 * 100vw / 1920);
    border-radius: 0;
    overflow: hidden;
    background: var(--pure-white);
    box-shadow: none;
}

#about .about-video img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#about .live-badge {
    position: absolute;
    top: clamp(12px, calc(18 * 100vw / 1920), 18px);
    left: clamp(12px, calc(18 * 100vw / 1920), 18px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, calc(10 * 100vw / 1920), 10px);
    width: clamp(170px, calc(205 * 100vw / 1920), 205px);
    height: clamp(24px, calc(28 * 100vw / 1920), 28px);
    padding: 0 clamp(12px, calc(16 * 100vw / 1920), 16px);
    border-radius: calc(4 * 100vw / 1920);
    background: rgba(255, 255, 255, 0.9);
    color: #1C1E1B;
    font-size: clamp(9px, calc(10 * 100vw / 1920), 10px);
    font-weight: 400;
    line-height: clamp(13px, calc(15 * 100vw / 1920), 15px);
    letter-spacing: clamp(1px, calc(2 * 100vw / 1920), 2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
}

#about .live-badge-dot {
    position: relative;
    width: calc(6 * 100vw / 1920);
    height: calc(6 * 100vw / 1920);
    border-radius: calc(3 * 100vw / 1920);
    background: #D9300A;
    box-shadow: none;
    flex-shrink: 0;
    z-index: 0;
}

#about .live-badge-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(12 * 100vw / 1920);
    height: calc(12 * 100vw / 1920);
    border-radius: calc(6 * 100vw / 1920);
    background: #D9300A;
    opacity: 0.12;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}

#about .live-badge-text {
    white-space: nowrap;
}

/* GET IN TOUCH SECTION */
#get-in-touch {
    position: relative;
    width: 100%;
    padding: clamp(calc(89.6 * 100vw / 1920), calc(128 * 100vw / 1920), 128px) clamp(calc(196 * 100vw / 1920), calc(280 * 100vw / 1920), min(280px, 90vw)) clamp(calc(89.6 * 100vw / 1920), calc(128 * 100vw / 1920), 128px);
    overflow: hidden;
    background: transparent;
    color: #FFFFFF;
}

#get-in-touch .get-in-touch-carousel {
    z-index: 0;
}

#get-in-touch .get-in-touch-slide {
    background: transparent;
}

#get-in-touch .media-carousel-media {
    filter: grayscale(100%) brightness(0.72);
}

#get-in-touch .get-in-touch-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(24px, calc(48 * 100vw / 1920), 48px);
}

#get-in-touch .get-in-touch-left {
    width: min(100%, calc(576 * 100vw / 1920));
    min-width: 0;
    margin-top: calc(58 * 100vw / 1920);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#get-in-touch .get-in-touch-title {
    width: 100%;
    margin: clamp(24px, calc(24 * 100vw / 1920), 24px) 0 0;
    color: #FFFFFF;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(40px, calc(60 * 100vw / 1920), 60px);
    font-weight: 600;
    line-height: clamp(42px, calc(63 * 100vw / 1920), 63px);
    letter-spacing: clamp(-0.94px, calc(-0.94 * 100vw / 1920), -0.3px);
    text-align: left;
    text-transform: none;
    font-style: normal;
    overflow-wrap: anywhere;
}

#get-in-touch .get-in-touch-body {
    width: 100%;
    margin: clamp(24px, calc(24 * 100vw / 1920), 24px) 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(14px, calc(17 * 100vw / 1920), 17px);
    font-weight: 400;
    line-height: clamp(22px, calc(27.63 * 100vw / 1920), 27.63px);
    letter-spacing: clamp(-0.43px, calc(-0.43 * 100vw / 1920), 0px);
    text-align: left;
    text-transform: none;
    overflow-wrap: break-word;
}

#get-in-touch .get-in-touch-body--subtitle {
    margin-top: clamp(18px, calc(20 * 100vw / 1920), 20px);
    opacity: 0.9;
}

#get-in-touch .get-in-touch-right {
    width: min(100%, calc(534 * 100vw / 1920));
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#get-in-touch .get-in-touch-cta {
    width: 100%;
    height: clamp(52px, calc(64 * 100vw / 1920), 64px);
    margin: 0;
    padding: clamp(18px, calc(22 * 100vw / 1920), 22px) clamp(20px, calc(28 * 100vw / 1920), 28px);
    border: 0;
    border-radius: 0;
    background: #D9300A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

#get-in-touch .get-in-touch-cta-text {
    color: #FFFFFF;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(11px, calc(13 * 100vw / 1920), 13px);
    font-weight: 600;
    line-height: clamp(16px, calc(19.5 * 100vw / 1920), 19.5px);
    letter-spacing: calc(2 * 100vw / 1920);
    text-transform: uppercase;
    white-space: nowrap;
}

#get-in-touch .get-in-touch-cta-icon {
    width: clamp(16px, calc(20 * 100vw / 1920), 20px);
    height: clamp(14px, calc(18 * 100vw / 1920), 18px);
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

#get-in-touch .get-in-touch-contact-grid {
    width: 100%;
    margin-top: clamp(24px, calc(24 * 100vw / 1920), 24px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: transparent;
}

#get-in-touch .get-in-touch-contact-card {
    min-height: clamp(104px, calc(116 * 100vw / 1920), 116px);
    padding: clamp(20px, calc(24 * 100vw / 1920), 24px);
    background: rgba(23, 23, 23, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
}

#get-in-touch .get-in-touch-contact-card:nth-child(2n) {
    border-right: 0;
}

#get-in-touch .get-in-touch-contact-card:nth-last-child(-n + 2) {
    border-bottom: 0;
}

#get-in-touch .get-in-touch-contact-icon {
    color: #D9300A;
    width: clamp(18px, calc(18 * 100vw / 1920), 18px);
    height: clamp(18px, calc(18 * 100vw / 1920), 18px);
    font-size: clamp(18px, calc(18 * 100vw / 1920), 18px);
    line-height: 1;
    margin: 0 0 clamp(17px, calc(17 * 100vw / 1920), 17px);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

#get-in-touch .get-in-touch-contact-icon-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

#get-in-touch .get-in-touch-contact-label {
    margin: 0 0 clamp(7px, calc(7 * 100vw / 1920), 7px);
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(10px, calc(10 * 100vw / 1920), 10px);
    font-weight: 400;
    line-height: clamp(15px, calc(15 * 100vw / 1920), 15px);
    letter-spacing: clamp(1.72px, calc(1.72 * 100vw / 1920), 1.72px);
    text-transform: uppercase;
    white-space: nowrap;
}

#get-in-touch .get-in-touch-contact-value {
    color: #FFFFFF;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: clamp(14px, calc(14 * 100vw / 1920), 14px);
    font-weight: 400;
    line-height: clamp(21px, calc(21 * 100vw / 1920), 21px);
    letter-spacing: clamp(-0.15px, calc(-0.15 * 100vw / 1920), -0.15px);
    white-space: nowrap;
}

#get-in-touch .get-in-touch-indicators {
    bottom: clamp(18px, calc(24 * 100vw / 1920), 24px);
}

#get-in-touch .get-in-touch-arrows {
    padding: 0 clamp(14px, calc(20 * 100vw / 1920), 20px);
}

@media (max-width: 1000px) {
    #about {
        padding: clamp(72px, calc(112 * 100vw / 1920), 112px) clamp(20px, calc(48 * 100vw / 1920), 48px) clamp(72px, calc(112 * 100vw / 1920), 112px);
    }

    #about .about-wrapper {
        grid-template-columns: 1fr;
        gap: clamp(24px, calc(40 * 100vw / 1920), 40px);
    }

    #about .about-right {
        justify-content: flex-start;
        margin-top: 0;
    }

    #about .about-video {
        width: 100%;
        height: auto;
        aspect-ratio: 774 / 480;
    }

    #about .about-title,
    #products-preview .about-title {
        width: 100%;
        max-width: 100%;
        min-height: auto;
        margin-top: clamp(16px, calc(24 * 100vw / 1920), 24px);
        font-size: clamp(28px, calc(52 * 100vw / 1920), 52px);
        line-height: clamp(30px, calc(55 * 100vw / 1920), 55px);
    }

    #products-preview .products-preview-title {
        width: 100%;
        font-size: clamp(28px, calc(52 * 100vw / 1920), 52px);
        line-height: clamp(30px, calc(54.6 * 100vw / 1920), 55px);
        letter-spacing: clamp(-0.71px, calc(-0.71 * 100vw / 1920), -0.24px);
    }

    #about .about-desc,
    #products-preview .about-desc {
        max-width: 100%;
        margin: clamp(16px, calc(20 * 100vw / 1920), 20px) 0 clamp(20px, calc(28 * 100vw / 1920), 28px);
        font-size: clamp(14px, calc(16 * 100vw / 1920), 16px);
        line-height: clamp(22px, calc(26 * 100vw / 1920), 26px);
    }

    #about .about-cta {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: clamp(52px, calc(64 * 100vw / 1920), 64px);
        padding: clamp(18px, calc(23 * 100vw / 1920), 23px) 0 clamp(18px, calc(23 * 100vw / 1920), 23px) clamp(18px, calc(24 * 100vw / 1920), 24px);
    }

    #about .about-cta-text {
        width: auto;
        height: auto;
        font-size: clamp(11px, calc(12 * 100vw / 1920), 12px);
        line-height: clamp(16px, calc(18 * 100vw / 1920), 18px);
        letter-spacing: clamp(1px, calc(2 * 100vw / 1920), 2px);
    }

    #about .about-cta-icon {
        width: clamp(11px, calc(12 * 100vw / 1920), 12px);
        height: clamp(11px, calc(12 * 100vw / 1920), 12px);
        margin-right: clamp(18px, calc(24 * 100vw / 1920), 24px);
    }


    #products-preview {
        padding: clamp(72px, calc(112 * 100vw / 1920), 112px) clamp(20px, calc(48 * 100vw / 1920), 48px) clamp(72px, calc(112 * 100vw / 1920), 112px);
    }

    #products-preview .products-preview-top {
        align-items: flex-start;
        flex-direction: column;
    }

    #products-preview .products-preview-right {
        width: 100%;
        justify-content: flex-start;
    }

    #products-preview .products-preview-link {
        align-items: flex-start;
    }

    #products-preview .products-preview-link-row {
        justify-content: flex-start;
    }

    #products-preview .products-preview-link-icon {
        margin-left: clamp(8px, calc(12 * 100vw / 1920), 12px);
    }

    #products-preview .products-preview-link-line {
        margin-top: clamp(6px, calc(8 * 100vw / 1920), 8px);
    }

    #products-preview .product-grid {
        margin-top: clamp(24px, calc(40 * 100vw / 1920), 40px);
    }

    #about-us .about-us-media {
        height: clamp(320px, calc(616 * 100vw / 1920), 616px);
        aspect-ratio: 16 / 9;
    }

    #about-us .about-us-overlay {
        right: clamp(20px, calc(48 * 100vw / 1920), 48px);
        top: clamp(36px, calc(86 * 100vw / 1920), 86px);
        transform: none;
        width: min(100%, calc(534 * 100vw / 1920));
        max-width: calc(534 * 100vw / 1920);
    }

    #about-us .about-us-title {
        font-size: clamp(28px, calc(44 * 100vw / 1920), 44px);
        line-height: clamp(30px, calc(47.52 * 100vw / 1920), 48px);
        letter-spacing: clamp(-0.51px, calc(-0.51 * 100vw / 1920), -0.2px);
    }

    #about-us .about-us-body {
        font-size: clamp(14px, calc(16 * 100vw / 1920), 16px);
        line-height: clamp(22px, calc(26 * 100vw / 1920), 26px);
        letter-spacing: clamp(-0.31px, calc(-0.31 * 100vw / 1920), 0px);
    }

    #products-preview .product-card {
        width: 100%;
        max-width: calc(306 * 100vw / 1920);
        height: auto;
        min-height: calc(440 * 100vw / 1920);
    }

    #products-preview .product-tag {
        top: clamp(18px, calc(24 * 100vw / 1920), 24px);
        left: clamp(18px, calc(24 * 100vw / 1920), 24px);
        padding: clamp(2px, calc(3 * 100vw / 1920), 3px) clamp(8px, calc(10 * 100vw / 1920), 10px);
        font-size: clamp(9px, calc(10 * 100vw / 1920), 10px);
        line-height: clamp(13px, calc(15 * 100vw / 1920), 15px);
        max-width: calc(100% - 48px);
    }

    #products-preview .product-image {
        width: calc(100% + 48px);
        height: clamp(220px, calc(245 * 100vw / 1920), 245px);
        margin: clamp(18px, calc(24 * 100vw / 1920), 24px) calc(-24 * 100vw / 1920) clamp(36px, calc(51 * 100vw / 1920), 51px);
    }

    #products-preview .product-image img {
        padding: 0;
    }

    #products-preview .product-footer {
        gap: 12px;
    }

    #products-preview .product-arrow-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-width: 1px;
    }

    #products-preview .product-arrow-icon {
        width: 6px;
        height: 6px;
    }

}
/* COMPLIANCE */
.black-section {
    background: var(--pure-black);
    color: white;
}

.comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.comp-card {
    border-top: 1px solid var(--dark-grey);
    padding-top: 25px;
}

.comp-card h4 {
    color: var(--safety-red);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* CERTIFICATE GRID */
.certificate-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: none;
    margin: 0;
}

.certificate-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.certificate-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.certificate-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 200px;
}

/* 鍝嶅簲寮忚锟?*/
@media (max-width: 1024px) {
    .certificate-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .certificate-grid {
        grid-template-columns: 1fr;
    }
}

/* PRODUCT PREVIEW GRID */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 30px;
}

@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* 棣栭〉浜у搧棰勮鍗＄墖锛堜粎 #products-preview 鍐呯敓鏁堬紝閬垮厤姹℃煋浜у搧鍒楄〃椤碉級 */
#products-preview .product-card {
    width: min(100%, calc(306 * 100vw / 1920));
    height: calc(440 * 100vw / 1920);
    background: var(--pure-white);
    border-radius: calc(16 * 100vw / 1920);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: calc(2 * 100vw / 1920) solid #E5E5E5;
    box-shadow: 0 calc(4 * 100vw / 1920) calc(12 * 100vw / 1920) rgba(15, 23, 42, 0.08);
    padding: calc(24 * 100vw / 1920);
    position: relative;
    display: flex;
    flex-direction: column;
}

#products-preview .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 calc(4 * 100vw / 1920) calc(12 * 100vw / 1920) rgba(15, 23, 42, 0.08);
}

#products-preview .product-image {
    position: relative;
    width: calc(100% + (48 * 100vw / 1920));
    height: calc(245 * 100vw / 1920);
    margin: calc(24 * 100vw / 1920) calc(-24 * 100vw / 1920) calc(51 * 100vw / 1920);
    overflow: hidden;
    align-self: stretch;
}

#products-preview .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    transition: transform 0.3s ease;
}

#products-preview .product-card:hover .product-image img {
    transform: scale(1.05);
}

#products-preview .product-footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(16 * 100vw / 1920);
}

#products-preview .product-copy {
    min-width: 0;
    flex: 1 1 auto;
}

#products-preview .product-type-name {
    margin: 0 0 calc(8 * 100vw / 1920);
    color: #737373;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: calc(11 * 100vw / 1920);
    font-weight: 400;
    line-height: calc(16.5 * 100vw / 1920);
    letter-spacing: calc(1.6 * 100vw / 1920);
    text-transform: uppercase;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#products-preview .product-name {
    margin: 0;
    color: #171717;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: calc(19 * 100vw / 1920);
    font-weight: 600;
    line-height: calc(26.13 * 100vw / 1920);
    letter-spacing: calc(-0.92 * 100vw / 1920);
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#products-preview .product-arrow-button {
    width: calc(40 * 100vw / 1920);
    height: calc(40 * 100vw / 1920);
    min-width: calc(40 * 100vw / 1920);
    border-radius: 50%;
    border: calc(1 * 100vw / 1920) solid #D4D4D4;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#products-preview .product-arrow-icon-box {
    width: calc(15 * 100vw / 1920);
    height: calc(9 * 100vw / 1920);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

#products-preview .product-arrow-icon {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #1C1E1B;
    -webkit-mask-image: url('../../assets/icons/close-icon.svg?v=2');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../../assets/icons/close-icon.svg?v=2');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background-color 0.2s ease;
}

#products-preview .product-card:hover .product-arrow-button,
#products-preview .product-arrow-button:hover {
    background: #D9300A;
    border-color: #D9300A;
}

#products-preview .product-card:hover .product-arrow-icon,
#products-preview .product-arrow-button:hover .product-arrow-icon {
    background-color: #FFFFFF;
}

#products-preview .product-card:hover .product-arrow-icon-box,
#products-preview .product-arrow-button:hover .product-arrow-icon-box {
    background-color: transparent;
}

#products-preview .product-tag {
    position: absolute;
    top: calc(24 * 100vw / 1920);
    left: calc(24 * 100vw / 1920);
    z-index: 2;
    display: inline-block;
    padding: calc(3 * 100vw / 1920) calc(10 * 100vw / 1920);
    background: #D9300A;
    border-radius: calc(6 * 100vw / 1920);
    color: #FFFFFF;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: calc(10 * 100vw / 1920);
    font-weight: 600;
    line-height: calc(15 * 100vw / 1920);
    letter-spacing: calc(1.72 * 100vw / 1920);
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
    max-width: calc(100% - (48 * 100vw / 1920));
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==================== RELATED PRODUCTS (Product Detail Page 05 Module) ==================== */
#related-products .product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#related-products .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 calc(4 * 100vw / 1920) calc(12 * 100vw / 1920) rgba(15, 23, 42, 0.08);
}

#related-products .product-image {
    overflow: hidden;
}

#related-products .product-image img {
    transition: transform 0.3s ease;
}

#related-products .product-card:hover .product-image img {
    transform: scale(1.05);
}

/* INQUIRY SECTION */
.contact-container {
    padding: 80px 8%;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
}

.inquiry-form {
    background: var(--off-white);
    padding: 50px;
    border: 1px solid var(--light-grey);
}

.form-title {
    text-transform: uppercase;
    margin-top: 0;
}

/* SIDEBAR */
.info-sidebar h2 {
    text-transform: uppercase;
    font-size: 1.8rem;
    margin-top: 0;
}

.hub-info {
    margin-top: 40px;
    border-top: 1px solid var(--light-grey);
    padding-top: 30px;
}

.hub-tag {
    color: var(--safety-red);
    font-weight: 900;
    font-size: 0.7rem;
    text-transform: uppercase;
    display: block;
}

.address-box {
    margin-bottom: 30px;
}

.address-box p {
    font-size: 0.9rem;
    color: var(--dark-grey);
    margin: 5px 0;
}

/* WORKFLOW */
.workflow {
    background: var(--pure-black);
    color: white;
    padding: 80px 8%;
    text-align: center;
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.step {
    border: 1px solid var(--dark-grey);
    padding: 30px 20px;
}

.step span {
    color: var(--safety-red);
    font-weight: 900;
    font-size: 1.5rem;
    display: block;
    margin-bottom: 10px;
}

.step h4 {
    margin: 0;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* CATALOG LAYER */
.catalog-header {
    background: var(--pure-black);
    color: white;
    padding: 80px 8% 40px;
}

.catalog-header h1 {
    font-size: 3.5rem;
    margin: 10px 0;
}

.engine-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 8%;
}

.engine-item {
    display: grid;
    grid-template-columns: 300px 1fr 250px;
    border: 1px solid var(--light-grey);
}

.engine-img {
    background: #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border-right: 1px solid var(--light-grey);
    min-height: 150px;
}

.engine-details {
    padding: 30px;
}

.engine-details h3 {
    margin-top: 0;
}

.tech-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.tech-specs li {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 5px 10px;
    background: var(--off-white);
}

.engine-actions {
    padding: 30px;
    border-left: 1px solid var(--light-grey);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background: #fafafa;
}

.btn-sm {
    text-align: center;
    padding: 12px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.7rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-red {
    background: var(--safety-red);
    color: white;
}

.btn-outline {
    border: 2px solid var(--pure-black);
    color: var(--pure-black);
    background: transparent;
}

.btn-outline:hover {
    background: var(--pure-black);
    color: white;
}

/* FOOTER */
footer.site-footer {
    height: calc(80 * 100vw / 1920);
    min-height: calc(80 * 100vw / 1920);
    background: #1C1E1B;
    padding: calc(16 * 100vw / 1920) calc(280 * 100vw / 1920);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
}

.footer-logo {
    width: calc(157 * 100vw / 1920);
    height: calc(48 * 100vw / 1920);
    margin-right: calc(317 * 100vw / 1920);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footer-logo-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.footer-copy {
    margin-right: calc(251 * 100vw / 1920);
    flex: 0 0 auto;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: calc(32 * 100vw / 1920);
    flex: 0 0 auto;
}

.footer-copy,
.footer-links a {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    font-size: calc(11 * 100vw / 1920);
    color: rgba(255, 255, 255, 0.4);
    line-height: calc(16.5 * 100vw / 1920);
    text-align: left;
}

.footer-links a {
    text-decoration: none;
}

.footer-links a:hover {
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1000px) {
    footer.site-footer {
        height: auto;
        min-height: calc(80 * 100vw / 1920);
        padding: calc(16 * 100vw / 1920) clamp(24px, calc(48 * 100vw / 1920), 48px);
        gap: calc(16 * 100vw / 1920);
        flex-wrap: wrap;
        white-space: normal;
    }

    .footer-logo,
    .footer-copy {
        margin-right: 0;
    }

    .footer-links {
        margin-left: auto;
    }
}

/* Element Plus 鏍峰紡瑕嗙洊 */
.el-input__wrapper {
    box-shadow: none !important;
    border: 1px solid var(--light-grey);
    border-radius: 0;
}

.el-input__wrapper:hover {
    border-color: var(--pure-black);
}

.el-input__wrapper.is-focus {
    border-color: var(--pure-black) !important;
}

.el-select .el-input__wrapper {
    border-radius: 0;
}

.el-textarea__inner {
    border: 1px solid var(--light-grey);
    border-radius: 0;
}

.el-textarea__inner:hover {
    border-color: var(--pure-black);
}

.el-textarea__inner:focus {
    border-color: var(--pure-black) !important;
}

.el-button--primary {
    background-color: var(--safety-red);
    border-color: var(--safety-red);
}

.el-button--primary:hover {
    background-color: var(--pure-black);
    border-color: var(--pure-black);
}

/* HERO RESPONSIVE */
@media (max-width: 1000px) {
    .hero {
        padding: clamp(72px, calc(100 * 100vw / 1920), 100px) clamp(24px, calc(96 * 100vw / 1920), 96px) 0;
    }

    .hero-content {
        padding: 0 clamp(24px, calc(96 * 100vw / 1920), 96px) clamp(32px, calc(68 * 100vw / 1920), 68px);
    }

    .hero p {
        max-width: 100%;
    }

    .banner-arrows .arrow {
        width: clamp(35px, calc(40 * 100vw / 1920), 40px);
        height: clamp(35px, calc(40 * 100vw / 1920), 40px);
    }

    #get-in-touch {
        height: auto;
        min-height: clamp(520px, calc(600 * 100vw / 1920), 600px);
        padding: clamp(72px, calc(96 * 100vw / 1920), 96px) clamp(20px, calc(48 * 100vw / 1920), 48px);
    }

    #get-in-touch .get-in-touch-inner {
        flex-direction: column;
        gap: clamp(24px, calc(32 * 100vw / 1920), 32px);
    }

    #get-in-touch .get-in-touch-left,
    #get-in-touch .get-in-touch-right {
        width: 100%;
    }

    #get-in-touch .get-in-touch-left {
        margin-top: 0;
    }

    #get-in-touch .get-in-touch-title {
        font-size: clamp(30px, calc(60 * 100vw / 1920), 60px);
        line-height: clamp(34px, calc(63 * 100vw / 1920), 63px);
    }

    #get-in-touch .get-in-touch-body {
        font-size: clamp(14px, calc(17 * 100vw / 1920), 17px);
        line-height: clamp(22px, calc(27.63 * 100vw / 1920), 27.63px);
    }

    #get-in-touch .get-in-touch-contact-card {
        min-height: 104px;
    }
}

@media (max-width: 767px) {
    .hero {
        padding: clamp(60px, calc(80 * 100vw / 1920), 80px) clamp(20px, calc(64 * 100vw / 1920), 64px) 0;
    }

    .hero-content {
        padding: 0 clamp(20px, calc(64 * 100vw / 1920), 64px) clamp(28px, calc(52 * 100vw / 1920), 52px);
    }

    .banner-indicators {
        bottom: clamp(16px, calc(20 * 100vw / 1920), 20px);
    }

    .banner-arrows {
        padding: 0 clamp(10px, calc(16 * 100vw / 1920), 16px);
    }
}

@media (max-width: 640px) {
    #get-in-touch .get-in-touch-contact-grid {
        grid-template-columns: 1fr;
    }

    #get-in-touch .get-in-touch-contact-card {
        border-right: 0;
    }

    #get-in-touch .get-in-touch-contact-card:nth-last-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    #get-in-touch .get-in-touch-contact-card:last-child {
        border-bottom: 0;
    }
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    .engine-item {
        grid-template-columns: 1fr;
    }

    .engine-img {
        height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--light-grey);
    }

    .engine-actions {
        border-left: none;
        border-top: 1px solid var(--light-grey);
    }
}


/* ========================================
   鑷畾涔夋垚鍔熸彁绀烘鏍峰紡
   ======================================== */
.custom-success-message {
    min-width: 380px !important;
    padding: 16px 20px !important;
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.4) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.custom-success-message .el-message__icon {
    font-size: 24px !important;
    color: #ffffff !important;
}

.custom-success-message .el-message__content {
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.custom-success-message .el-message__closeBtn {
    color: #ffffff !important;
    font-size: 18px !important;
    opacity: 0.8 !important;
}

.custom-success-message .el-message__closeBtn:hover {
    opacity: 1 !important;
}

/* 鎴愬姛鎻愮ず妗嗗姩鐢绘晥锟?*/
.custom-success-message {
    animation: successSlideIn 0.4s ease-out;
}

@keyframes successSlideIn {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 鍙€夛細缁胯壊涓婚鐨勬垚鍔熸彁绀烘 */
.custom-success-message.green-theme {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    box-shadow: 0 8px 24px rgba(17, 153, 142, 0.4) !important;
}

/* 鍙€夛細绾㈣壊涓婚鐨勬垚鍔熸彁绀烘锛堝尮閰嶇綉绔欎富鑹诧級 */
.custom-success-message.red-theme {
    background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%) !important;
    box-shadow: 0 8px 24px rgba(211, 47, 47, 0.4) !important;
}





/* FACTORY GRID */
.factory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: none;
    margin: 0;
}

.factory-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.factory-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.factory-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* 鍝嶅簲寮忚锟?*/
@media (max-width: 1024px) {
    .factory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .factory-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   浜у搧璇︽儏椤?- 浜у搧绯诲垪鏍囪瘑琛?
   ======================================== */
.product-series-row {
    display: flex;
    align-items: center;
    gap: clamp(9px, calc(12 * 100vw / 1920), 16px);
    margin-bottom: 0;
}

/* 妯嚎 - 32px x 1px, #1C1E1B */
.product-series-line {
    display: block;
    width: clamp(24px, calc(32 * 100vw / 1920), 40px);
    height: 1px;
    background: #1C1E1B;
    flex-shrink: 0;
}

/* 绯诲垪鏂囨湰 - Inter-Regular, #737373, 11px, 3.36px闂磋窛, 16.5px琛岄珮 */
.product-series-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(9px, calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(2.78px, calc(3.36 * 100vw / 1920), 3.36px);
    line-height: clamp(13.75px, calc(16.5 * 100vw / 1920), 16.5px);
    text-transform: uppercase;
    white-space: nowrap;
}

/* 浜у搧璇︽儏椤?- 浜у搧鏍囬
   Inter-Semi Bold, #1C1E1B, 48px, -0.61px闂磋窛, 50.4px琛岄珮 */
.product-detail-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1C1E1B;
    font-size: clamp(32px, calc(48 * 100vw / 1920), 48px);
    letter-spacing: clamp(-0.51px, calc(-0.61 * 100vw / 1920), -0.61px);
    line-height: clamp(42px, calc(50.4 * 100vw / 1920), 50.4px);
    text-align: left;
    margin: 0;
    padding: 0;
}

/* 浜у搧璇︽儏椤?- 浜у搧鏍囬鐖跺鍣?
   涓婁笅padding: 20px/24px, 鏃犲簳閮ㄥ杈硅窛 */
.product-detail-info-block {
    margin-bottom: 0 !important;
    padding-top: clamp(15px, calc(20 * 100vw / 1920), 28px);
    padding-bottom: clamp(18px, calc(24 * 100vw / 1920), 32px);
}

/* 浜у搧璇︽儏椤?- 浜у搧鎻忚堪
   Inter-Regular, #525252, 15px, -0.23px闂磋窛, 24.38px琛岄珮 */
.product-detail-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #525252;
    font-size: clamp(11px, calc(15 * 100vw / 1920), 15px);
    letter-spacing: clamp(-0.17px, calc(-0.23 * 100vw / 1920), -0.23px);
    line-height: clamp(19px, calc(24.38 * 100vw / 1920), 24.38px);
    text-align: left;
}

/* 浜у搧璇︽儏椤?- 浜у搧鎻忚堪鏃犲簳閮ㄥ杈硅窛 */
.product-detail-desc-no-margin {
    margin-bottom: 0 !important;
}

/* ========================================
   浜у搧璇︽儏椤?- 鎿嶄綔鎸夐挳缁?
   ======================================== */
/* 浜у搧璇︽儏椤?- 宸﹀彸甯冨眬闂磋窛 40px */
.product-detail-layout {
    display: flex;
    align-items: stretch;
    gap: clamp(32px, calc(56 * 100vw / 1920), 72px);
}

/* 宸﹀彸涓や晶绮剧‘绛夊垎锛氬悇鍗?(100% - gap) / 2 */
.product-detail-left,
.product-detail-right {
    flex: 1;
    min-width: 0; /* 闃叉鍐呭婧㈠嚭 */
}

/* 浜у搧涓诲浘鍜岀缉鐣ュ浘瀹瑰櫒 - 浣跨敤鐧惧垎姣斿疄鐜扮瓑姣旂缉鏀?*/
.product-detail-left > div:first-child,
.thumbnail-container {
    width: 100% !important;
    max-width: clamp(280px, calc(656 * 100vw / 1920), 656px);
}

/* 浜у搧涓诲浘楂樺害鑷€傚簲 */
.product-detail-left > div:first-child {
    aspect-ratio: 1 / 1;
    height: auto !important;
}

/* 浜у搧涓诲浘鑳屾櫙棰滆壊 - 鐧借壊 */
.product-main-image {
    background-color: #FFFFFF !important;
}

.product-detail-btn-group {
    display: flex;
    align-items: center;
    gap: clamp(8px, calc(13 * 100vw / 1920), 16px);
    margin-top: clamp(24px, calc(48 * 100vw / 1920), 56px);
}

/* 鎸夐挳鍩虹鏍峰紡 - 鏃犲渾瑙?*/
/* 鍩轰簬1920璁捐绋? height=64px, padding=22px, gap=12px */
.product-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(44px, calc(64 * 100vw / 1920), 64px);
    padding: clamp(14px, calc(22 * 100vw / 1920), 26px);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    gap: clamp(8px, calc(12 * 100vw / 1920), 16px);
}

/* Get Quotation 鎸夐挳 - 绾㈣壊鑳屾櫙, 瀹藉害425px */
.product-detail-btn--quote {
    background: #D9300A;
    border: none;
    width: clamp(280px, calc(425 * 100vw / 1920), 500px);
}

/* Datasheet 鎸夐挳 - 鐧藉簳榛戣竟, 瀹藉害162px */
.product-detail-btn--datasheet {
    background: #FFFFFF;
    border: 1px solid #1C1E1B;
    width: clamp(120px, calc(162 * 100vw / 1920), 200px);
    gap: clamp(6px, calc(8 * 100vw / 1920), 10px);
}

/* 鎸夐挳鏂囨湰鍩虹鏍峰紡 */
.product-detail-btn-text {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: clamp(14px, calc(1 * 1em), 18px);
}

/* Get Quotation 鏂囨湰 - Inter-Semi Bold, #FFFFFF, 12px, 2.16px闂磋窛, 18px琛岄珮 */
.product-detail-btn-text--quote {
    font-weight: 600;
    color: #FFFFFF;
    font-size: clamp(10px, calc(12 * 100vw / 1920), 14px);
    letter-spacing: clamp(1.6px, calc(2.16 * 100vw / 1920), 2.5px);
    line-height: clamp(14px, calc(18 * 100vw / 1920), 20px);
}

/* Datasheet 鏂囨湰 - Inter-Medium, #1C1E1B, 13px, 2.26px闂磋窛, 19.5px琛岄珮 */
.product-detail-btn-text--datasheet {
    font-weight: 500;
    color: #1C1E1B;
    font-size: clamp(11px, calc(13 * 100vw / 1920), 15px);
    letter-spacing: clamp(1.7px, calc(2.26 * 100vw / 1920), 2.7px);
    line-height: clamp(15px, calc(19.5 * 100vw / 1920), 22px);
}

/* Get Quotation 鍙充晶绠ご鍥炬爣 - 鐧借壊, 12px */
.product-detail-btn-arrow {
    display: block;
    flex-shrink: 0;
    width: clamp(10px, calc(12 * 100vw / 1920), 16px);
    height: clamp(10px, calc(12 * 100vw / 1920), 16px);
    background-color: #FFFFFF;
    -webkit-mask-image: url('../../assets/icons/close-icon.svg?v=2');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../../assets/icons/close-icon.svg?v=2');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Datasheet 宸︿晶涓嬭浇鍥炬爣 - SVG鏂囦欢, 榛戣壊 (#1C1E1B) */
.product-detail-btn-icon {
    display: block;
    flex-shrink: 0;
    width: clamp(11px, calc(13 * 100vw / 1920), 16px);
    height: clamp(11px, calc(13 * 100vw / 1920), 16px);
    object-fit: contain;
}

/* ========================================
   04 - Leave a Message Section (鐣欒█璇环妯″潡)
   ======================================== */
/* 鍩轰簬1920璁捐绋? padding涓婁笅96px, 宸﹀彸280px */
#leave-message-section {
    background: linear-gradient(90deg, #D4D3D3 0%, #807D7D 100%);
    padding-top: clamp(48px, calc(96 * 100vw / 1920), 96px);
    padding-bottom: clamp(48px, calc(96 * 100vw / 1920), 96px);
    padding-left: clamp(32px, calc(280 * 100vw / 1920), 280px);
    padding-right: clamp(32px, calc(280 * 100vw / 1920), 280px);
}

/* 宸﹀彸涓ゅ垪缃戞牸甯冨眬 - gap=41px */
#leave-message-section .leave-message-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, calc(41 * 100vw / 1920), 48px);
    align-items: start;
}

/* 宸︿晶鏍囬 "Send us your inquiry." */
#leave-message-section .leave-message-title {
    width: clamp(200px, calc(272 * 100vw / 1920), 272px);
    margin-top: clamp(24px, calc(36 * 100vw / 1920), 36px);
    margin-bottom: clamp(18px, calc(28 * 100vw / 1920), 28px);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, calc(44 * 100vw / 1920), 44px);
    line-height: clamp(36px, calc(46.2 * 100vw / 1920), 46.2px);
    letter-spacing: clamp(-0.4px, calc(-0.51 * 100vw / 1920), -0.51px);
    color: #1C1E1B;
}

/* 宸︿晶鎻忚堪鏂囨湰 */
#leave-message-section .leave-message-desc {
    margin-bottom: clamp(24px, calc(37 * 100vw / 1920), 37px);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, calc(15 * 100vw / 1920), 15px);
    line-height: clamp(18px, calc(24.38 * 100vw / 1920), 24.38px);
    letter-spacing: clamp(-0.16px, calc(-0.23 * 100vw / 1920), -0.23px);
    color: #525252;
}

/* 宸︿晶鐗规€у垪琛ㄥ鍣?*/
#leave-message-section .leave-message-features {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, calc(27 * 100vw / 1920), 27px);
}

/* 鍗曚釜鐗规€ч」 (鍥炬爣+鏂囧瓧) */
#leave-message-section .feature-item {
    display: flex;
    align-items: center;
    gap: clamp(6px, calc(8 * 100vw / 1920), 10px);
}

/* 鐗规€ч」鍥炬爣 */
#leave-message-section .feature-item img {
    width: clamp(18px, calc(24 * 100vw / 1920), 24px);
    height: clamp(18px, calc(24 * 100vw / 1920), 24px);
    flex-shrink: 0;
}

/* 鐗规€ч」鏂囧瓧 */
#leave-message-section .feature-item span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(11px, calc(14 * 100vw / 1920), 14px);
    line-height: clamp(16px, calc(21 * 100vw / 1920), 21px);
    letter-spacing: clamp(-0.11px, calc(-0.15 * 100vw / 1920), -0.15px);
    color: #404040;
}

/* 鍙充晶琛ㄥ崟瀹瑰櫒 */
#leave-message-section .inquiry-form {
    width: clamp(480px, calc(892 * 100vw / 1920), 892px);
    height: auto;
    min-height: clamp(420px, calc(605 * 100vw / 1920), 605px);
    background: #FFFFFF;
    border-radius: clamp(12px, calc(16 * 100vw / 1920), 16px);
    border: 2px solid #E5E5E5;
    padding: clamp(40px, calc(56 * 100vw / 1920), 56px) 
             clamp(40px, calc(56 * 100vw / 1920), 56px) 
             clamp(42px, calc(64 * 100vw / 1920), 64px);
}

/* 琛ㄥ崟鍙屽垪甯冨眬 */
#leave-message-section .inquiry-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, calc(18 * 100vw / 1920), 20px);
}

/* 琛ㄥ崟 Label 鏍峰紡 */
#leave-message-section .inquiry-custom-form .el-form-item__label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(10px, calc(12 * 100vw / 1920), 12px);
    line-height: clamp(12px, calc(15.75 * 100vw / 1920), 15.75px);
    margin-bottom: clamp(5px, calc(8 * 100vw / 1920), 8px) !important;
}

/* 琛ㄥ崟杈撳叆妗嗘牱寮?*/
#leave-message-section .inquiry-custom-form .el-input__wrapper,
#leave-message-section .inquiry-custom-form .el-textarea__inner {
    height: clamp(40px, calc(48 * 100vw / 1920), 48px);
    border-radius: clamp(4px, calc(6 * 100vw / 1920), 6px);
}

/* 鎿嶄綔鎸夐挳鍩虹鏍峰紡 - height: 56px, border-radius: 6px, border: 1px solid #E5E5E5 */
#leave-message-section .btn-inquiry-clear,
#leave-message-section .btn-inquiry-submit {
    height: clamp(44.8px, calc(56 * 100vw / 1920), 56px);
    padding: 0;
    border: 1px solid #E5E5E5;
    border-radius: clamp(4.8px, calc(6 * 100vw / 1920), 6px);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CLEAR 鎸夐挳 - background: #E5E5E5, color: #404040, Inter-Medium */
#leave-message-section .btn-inquiry-clear {
    width: clamp(180px, calc(264 * 100vw / 1920), 264px);
    background: #E5E5E5;
    font-weight: 500; /* Medium */
    font-size: clamp(11.2px, calc(14 * 100vw / 1920), 14px);
    letter-spacing: clamp(1.728px, calc(2.16 * 100vw / 1920), 2.16px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    color: #404040;
}

#leave-message-section .btn-inquiry-clear:hover {
    background-color: #D4D4D4;
    border-color: #D4D4D4;
}

/* SUBMIT INQUIRY 鎸夐挳 - background: #1C1E1B, color: #FFFFFF, Inter-Semi Bold */
#leave-message-section .btn-inquiry-submit {
    flex: 1;
    background-color: #1C1E1B;
    font-weight: 600; /* Semi Bold */
    font-size: clamp(10.4px, calc(13 * 100vw / 1920), 13px);
    letter-spacing: clamp(1.808px, calc(2.26 * 100vw / 1920), 2.26px);
    line-height: clamp(15.6px, calc(19.5 * 100vw / 1920), 19.5px);
    color: #FFFFFF;
    gap: clamp(11.2px, calc(14 * 100vw / 1920), 14px);
}

#leave-message-section .btn-inquiry-submit:hover {
    opacity: 0.9;
}

/* 鎻愪氦鎸夐挳绠ご鍥炬爣 */
#leave-message-section .btn-submit-arrow {
    width: clamp(11px, calc(13 * 100vw / 1920), 16px);
    height: clamp(11px, calc(13 * 100vw / 1920), 16px);
}

/* 鍏嶈矗澹版槑鏂囨湰 */
#leave-message-section .inquiry-form-disclaimer {
    font-family: 'Inter', sans-serif;
    font-size: clamp(9px, calc(11 * 100vw / 1920), 11px);
    line-height: clamp(13px, calc(16.5 * 100vw / 1920), 16.5px);
    color: #737373;
}
/* 浜у搧灞曠ず鍖?section 鑳屾櫙棰滆壊璁剧疆涓?#F5F5F5 */
/* 鍩轰簬1920璁捐绋? 宸﹀彸鍐呰竟璺?80px, 涓婂唴杈硅窛58px, 涓嬪唴杈硅窛96px */
/* 浣跨敤clamp瀹炵幇骞虫粦鍝嶅簲寮忥紝璁剧疆姝ｇ‘鐨勮竟鐣屽€?*/
.product-detail-container {
    background-color: #F5F5F5;
    padding-top: clamp(32px, calc(58 * 100vw / 1920), 58px) !important;
    padding-bottom: clamp(48px, calc(96 * 100vw / 1920), 96px) !important;
    padding-left: clamp(32px, calc(280 * 100vw / 1920), 280px) !important;
    padding-right: clamp(32px, calc(280 * 100vw / 1920), 280px) !important;
    max-width: none !important;
}

/* ========================================
   datasheet-section 鏍峰紡淇敼
   ======================================== */
/* #datasheet-section 瀹瑰櫒 - 鍩轰簬1920璁捐绋? 涓婁笅96px, 宸﹀彸280px */
#datasheet-section {
    margin: 0;
    padding-top: clamp(48px, calc(96 * 100vw / 1920), 96px);
    padding-bottom: clamp(48px, calc(96 * 100vw / 1920), 96px);
    padding-left: clamp(32px, calc(280 * 100vw / 1920), 280px);
    padding-right: clamp(32px, calc(280 * 100vw / 1920), 280px);
}

/* 鍒犻櫎 #datasheet-section 涓嬬涓€涓瓙鏍囩鐨勫杈硅窛鍜屽唴杈硅窛 */
#datasheet-section > :first-child {
    margin: 0;
    padding: 0;
}

/* ========================================
   tabs-section 鏍峰紡淇敼锛堝鐢?datasheet-section 鐩稿悓鏍峰紡锛?
   ======================================== */
/* #tabs-section 瀹瑰櫒 - 鑳屾櫙棰滆壊 #F5F5F5, 鍩轰簬1920璁捐绋? 涓婁笅96px, 宸﹀彸280px */
#tabs-section {
    background-color: #F5F5F5;
    margin: 0;
    padding-top: clamp(48px, calc(96 * 100vw / 1920), 96px);
    padding-bottom: clamp(48px, calc(96 * 100vw / 1920), 96px);
    padding-left: clamp(32px, calc(280 * 100vw / 1920), 280px);
    padding-right: clamp(32px, calc(280 * 100vw / 1920), 280px);
}

/* 鍒犻櫎 #tabs-section 涓嬬涓€涓瓙鏍囩鐨勫杈硅窛鍜屽唴杈硅窛 */
#tabs-section > :first-child {
    margin: 0;
    padding: 0;
}

/* ========================================
   浜у搧璇︽儏椤?- 鍝嶅簲寮忛€傞厤 (灏忓睆骞曚紭鍖?
   ======================================== */

/* 涓瓑灞忓箷閫傞厤 (768px - 1280px): 淇濇寔妯悜甯冨眬锛屽澶ч棿璺?*/
@media screen and (max-width: 1280px) {
    .product-detail-layout {
        gap: clamp(24px, calc(40 * 100vw / 1280), 48px) !important;
    }
}

/* 灏忓睆骞曢€傞厤 (max-width: 768px): 绾靛悜鎺掑垪 */
@media screen and (max-width: 768px) {
    /* 浜у搧璇︽儏甯冨眬鏀逛负绾靛悜鎺掑垪 */
    .product-detail-layout {
        flex-direction: column;
        gap: clamp(32px, calc(40 * 100vw / 768), 48px);
    }
    
    .product-detail-left,
    .product-detail-right {
        width: 100%;
        flex: none;
    }
    
    /* 浜у搧鍥剧墖鍖哄煙灞呬腑 */
    .product-detail-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* 缂╃暐鍥惧鍣ㄨ嚜閫傚簲瀹藉害 */
    .product-detail-left > div:first-child,
    .product-detail-left > div:nth-child(2) {
        width: 100% !important;
        max-width: 500px;
    }
    
    /* 鎸夐挳缁勫湪灏忓睆骞曚笅鍨傜洿鎺掑垪 */
    .product-detail-btn-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    /* 鎸夐挳鍦ㄥ皬灞忓箷涓嬪崰婊″搴?*/
    .product-detail-btn--quote,
    .product-detail-btn--datasheet {
        width: 100% !important;
        justify-content: center;
    }
}

/* ========================================
   tabs-section 鏍囩鎸夐挳鏍峰紡
   ======================================== */
/* 鏍囩鎸夐挳榛樿鏍峰紡锛堟湭閫変腑鐘舵€侊級 */
#tabs-section .tab-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;  /* Medium */
    color: #1C1E1B;
    font-size: clamp(12px, calc(16 * 100vw / 1920), 16px);
    letter-spacing: clamp(1.5px, calc(2 * 100vw / 1920), 2px);
    line-height: clamp(14.6px, calc(19.5 * 100vw / 1920), 19.5px);
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
}

/* 鏍囩鎸夐挳閫変腑鐘舵€佹枃鏈牱寮?*/
#tabs-section .tab-btn.active {
    font-weight: 600;  /* Semi Bold */
    color: #1C1E1B;
    font-size: clamp(18px, calc(24 * 100vw / 1920), 24px);
    letter-spacing: clamp(-0.33px, calc(-0.43 * 100vw / 1920), -0.43px);
    line-height: clamp(33px, calc(44 * 100vw / 1920), 44px);
}

/* 閫変腑鐘舵€佷笅鍒掔嚎 - 瀹藉害鍜屾枃瀛楀搴︾瓑鍚?*/
#tabs-section .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #D9300A;
    opacity: 0.9;
}

/* ========================================
   Technical Data 琛ㄦ牸鏍峰紡
   ======================================== */
#tabs-section .technical-table {
    border-radius: clamp(12px, calc(16 * 100vw / 1920), 16px);
    border: clamp(1.5px, calc(2 * 100vw / 1920), 2px) solid #E5E5E5;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* 姣忎竴琛屽唴瀹逛箣闂磋竟妗嗙嚎 - 璁剧疆鍒?td 涓婄‘淇濈敓鏁?*/
#tabs-section .technical-table td {
    border-bottom: 1px solid #E5E5E5;
    padding-top: clamp(18px, calc(24 * 100vw / 1920), 24px);
    padding-bottom: clamp(18px, calc(24 * 100vw / 1920), 24px);
}

#tabs-section .technical-table tr:last-child td {
    border-bottom: none;
}

/* 绗竴鍒楀乏渚у唴杈硅窛 32px锛屾枃瀛楁牱寮?*/
#tabs-section .technical-table td:first-child {
    padding-left: clamp(24px, calc(32 * 100vw / 1920), 32px);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(8px, calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(1.5px, calc(1.82 * 100vw / 1920), 1.82px);
    line-height: clamp(13.75px, calc(16.5 * 100vw / 1920), 16.5px);
}

/* 绗簩鍒楀乏鍐呰竟璺?32px锛岃儗鏅鑹?#FFFFFF锛屾枃瀛楁牱寮?*/
#tabs-section .technical-table td:last-child {
    padding-left: clamp(24px, calc(32 * 100vw / 1920), 32px);
    background-color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #1C1E1B;
    font-size: clamp(10.5px, calc(14 * 100vw / 1920), 14px);
    letter-spacing: clamp(-0.12px, calc(-0.15 * 100vw / 1920), -0.15px);
    line-height: clamp(17.5px, calc(21 * 100vw / 1920), 21px);
}

/* ========================================
   04 Leave a Message 琛ㄥ崟 - 鑷畾涔夋牱寮?
   瑕嗙洊鍏ㄥ眬 Element Plus 榛樿鏍峰紡
   ======================================== */

/* 琛ㄥ崟鍐?Select 涓嬫媺閫夋嫨鍣?- 寮哄埗缁熶竴鏍峰紡 */
.inquiry-custom-form .el-select .el-input__wrapper {
    height: clamp(35px, calc(48 * 100vw / 1920), 48px) !important;
    background-color: #F5F5F5 !important;
    border-radius: clamp(4.75px, calc(6 * 100vw / 1920), 6px) !important;
    border: 1px solid #E5E5E5 !important;
    box-shadow: none !important;
}

/* 琛ㄥ崟鍐?Select hover/focus 鐘舵€?- 淇濇寔涓€鑷?*/
.inquiry-custom-form .el-select .el-input__wrapper:hover,
.inquiry-custom-form .el-select .el-input.is-focus .el-input__wrapper {
    border: 1px solid #E5E5E5 !important;
    box-shadow: none !important;
}

/* ========================================
   寮圭獥琛ㄥ崟 - 杈撳叆妗嗗熀纭€鏍峰紡
   height: 48px, padding: 16px, background: #FAFAFA, border-radius: 6px, border: 1px solid #E5E5E5
   ======================================== */
.quote-modal-container .inquiry-custom-form .el-input__wrapper,
.quote-modal-container .inquiry-custom-form .el-textarea__inner {
    height: clamp(33.6px, calc(48 * 100vw / 1920), 48px);
    padding: clamp(11.2px, calc(16 * 100vw / 1920), 16px) !important;
    background-color: #FAFAFA !important;
    border-radius: clamp(4.2px, calc(6 * 100vw / 1920), 6px) !important;
    border: 1px solid #E5E5E5 !important;
    box-shadow: none !important;
}

/* ========================================
   寮圭獥琛ㄥ崟 - 鍗犱綅绗︽枃鏈牱寮?
   Inter-Regular, #A1A1A1, 16px, -0.31px letter-spacing, normal line-height
   ======================================== */
.quote-modal-container .inquiry-custom-form .el-input__wrapper .el-input__inner::placeholder,
.quote-modal-container .inquiry-custom-form .el-textarea__inner::placeholder {
    font-family: 'Inter', 'Inter', sans-serif;
    font-weight: 400; /* Regular */
    color: #A1A1A1 !important;
    font-size: clamp(11.2px, calc(16 * 100vw / 1920), 16px);
    letter-spacing: clamp(-0.22px, calc(-0.31 * 100vw / 1920), -0.31px);
    line-height: normal;
}

/* ========================================
   寮圭獥琛ㄥ崟 - 杈撳叆鍐呭鏂囨湰鏍峰紡
   Inter-Medium, #1C1E1B, 16px, -0.31px letter-spacing, normal line-height
   ======================================== */
.quote-modal-container .inquiry-custom-form .el-input__wrapper .el-input__inner,
.quote-modal-container .inquiry-custom-form .el-textarea__inner {
    font-family: 'Inter', 'Inter', sans-serif !important;
    font-weight: 500 !important; /* Medium */
    color: #1C1E1B !important;
    font-size: clamp(11.2px, calc(16 * 100vw / 1920), 16px) !important;
    letter-spacing: clamp(-0.22px, calc(-0.31 * 100vw / 1920), -0.31px) !important;
    line-height: normal !important;
}

/* 寮圭獥琛ㄥ崟椤逛箣闂寸殑闂磋窛 - 缁熶竴璁剧疆鎵€鏈夎〃鍗曢」锛堥櫎浜嗘渶鍚庝竴椤癸級 */
.quote-modal-container .inquiry-custom-form > .el-form-item:not(.inquiry-form-last-item),
.quote-modal-container .inquiry-custom-form .quote-modal-form-row:not(:last-of-type) {
    margin-bottom: clamp(14px, calc(20 * 100vw / 1920), 20px) !important;
}

/* 鍙屽垪甯冨眬鍐呯殑琛ㄥ崟椤逛笉闇€瑕侀澶栭棿璺?*/
.quote-modal-container .quote-modal-form-row .el-form-item {
    margin-bottom: 0 !important;
}

/* ========================================
   鎶ヤ环寮圭獥 (Quote Modal) - 杩囨浮鍔ㄧ敾
   ======================================== */

/* 娣″叆娣″嚭鍔ㄧ敾 */
.modal-fade-enter-active,
.modal-fade-leave-active {
    transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
    opacity: 0;
}

/* 寮圭獥鍐呭缂╂斁鍔ㄧ敾 */
.modal-fade-enter-active > :last-child,
.modal-fade-leave-active > :last-child {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-fade-enter-from > :last-child,
.modal-fade-leave-to > :last-child {
    transform: scale(0.95) translate(-50%, -50%);
    opacity: 0;
}

/* ========================================
   鎶ヤ环寮圭獥 (Quote Modal) - 澶栭儴鏍峰紡绫?
   ======================================== */

/* 寮圭獥瀹瑰櫒 */
.quote-modal-container {
    width: clamp(320px, calc(640 * 100vw / 1920), min(640px, 90vw));
    height: auto;
    max-height: calc(90 * 100vh / 100);
    border-radius: clamp(11.2px, calc(16 * 100vw / 1920), 16px);
    border: 1px solid #E5E5E5;
    padding-top: clamp(28px, calc(40 * 100vw / 1920), 40px);
    padding-left: clamp(28px, calc(40 * 100vw / 1920), 40px);
    padding-right: clamp(28px, calc(40 * 100vw / 1920), 40px);
    padding-bottom: clamp(16.8px, calc(24 * 100vw / 1920), 24px);
}

/* 鍏抽棴鎸夐挳 */
.quote-modal-close {
    position: absolute;
    top: clamp(11.2px, calc(20 * 100vw / 1920), 24px);
    right: clamp(11.2px, calc(20 * 100vw / 1920), 24px);
    width: clamp(16.8px, calc(28 * 100vw / 1920), 32px);
    height: clamp(16.8px, calc(28 * 100vw / 1920), 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #E5E5E5;
    border-radius: 50%;
    cursor: pointer;
    color: #999;
    font-size: clamp(10.5px, calc(18 * 100vw / 1920), 22px);
    line-height: 1;
    transition: color 0.2s ease;
}

.quote-modal-close:hover {
    color: #333;
}

/* 鏍囬鍖哄煙 */
.quote-modal-header {
    margin-bottom: clamp(39.9px, calc(57 * 100vw / 1920), 57px);
}

/* 鏍囬琛岋紙妯嚎 + 鏂囨湰锛?*/
.quote-modal-title-row {
    display: flex;
    align-items: center;
    gap: clamp(8.4px, calc(12 * 100vw / 1920), 12px);
}

/* 鏍囬琛岀殑妯嚎 */
.quote-modal-title-line {
    display: block;
    width: clamp(22.4px, calc(32 * 100vw / 1920), 32px);
    height: 1px;
    background: #1C1E1B;
    flex-shrink: 0;
}

/* "Request a Quotation"鏂囨湰 - Inter-Regular, #737373, 11px, 3.36px闂磋窛, 16.5px琛岄珮 */
.quote-modal-title-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(7.7px, calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(2.35px, calc(3.36 * 100vw / 1920), 3.36px);
    line-height: clamp(11.55px, calc(16.5 * 100vw / 1920), 16.5px);
    text-transform: uppercase;
}

/* 涓绘爣棰?"Let's discuss your project." */
.quote-modal-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1C1E1B;
    font-size: clamp(15.4px, calc(22 * 100vw / 1920), 22px);
    line-height: clamp(20px, calc(28.6 * 100vw / 1920), 28.6px);
    margin-top: clamp(11.2px, calc(16 * 100vw / 1920), 16px);
    margin-bottom: clamp(8.4px, calc(12 * 100vw / 1920), 12px);
}

/* 鍓爣棰?*/
.quote-modal-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(9.1px, calc(13 * 100vw / 1920), 13px); /* 绾?3px */
    line-height: clamp(12.74px, calc(18.2 * 100vw / 1920), 18.2px);
}

/* 鍒嗗壊绾?- 閾烘弧寮圭獥鏁翠釜瀹藉害 */
.quote-modal-divider {
    border-bottom: 1px solid #E5E5E5;
    margin-left: calc(-1 * clamp(28px, calc(40 * 100vw / 1920), 40px));
    margin-right: calc(-1 * clamp(28px, calc(40 * 100vw / 1920), 40px));
}

/* 琛ㄥ崟绗竴涓緭鍏ョ粍 - 涓婂杈硅窛 */
.quote-modal-container .inquiry-custom-form > .el-form-item:first-child {
    margin-top: clamp(28px, calc(40 * 100vw / 1920), 40px);
}

/* 寮圭獥琛ㄥ崟 Label 鏍峰紡 - Inter-Medium, #737373, 12px, 1.98px闂磋窛, 15.75px琛岄珮 */
.inquiry-custom-form .el-form-item__label {
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Medium */
    color: #737373;
    font-size: clamp(8.4px, calc(12 * 100vw / 1920), 12px);
    letter-spacing: clamp(1.39px, calc(1.98 * 100vw / 1920), 1.98px);
    line-height: clamp(11.03px, calc(15.75 * 100vw / 1920), 15.75px);
    text-align: left !important;
    padding-bottom: 0 !important;
    margin-bottom: clamp(5.6px, calc(8 * 100vw / 1920), 8px) !important;
}

/* 琛ㄥ崟鍙屽垪甯冨眬 */
.quote-modal-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(11.2px, calc(16 * 100vw / 1920), 16px);
}

/* 鎿嶄綔鎸夐挳鍖哄煙 - 鎸夐挳闂磋窛 16px */
.quote-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(12.8px, calc(16 * 100vw / 1920), 16px);
    margin-top: clamp(16.8px, calc(24 * 100vw / 1920), 24px);
}

/* CANCEL 鎸夐挳 - height: 56px, width: 184px, background: #E5E5E5 */
/* 鏂囨湰鏍峰紡: Inter-Medium, #404040, 14px, 2.16px闂磋窛, 18px琛岄珮 */
.quote-modal-btn-cancel {
    height: clamp(44.8px, calc(56 * 100vw / 1920), 56px);
    width: clamp(147.2px, calc(184 * 100vw / 1920), 184px);
    padding: 0;
    border: 1px solid #E5E5E5;
    border-radius: clamp(4.8px, calc(6 * 100vw / 1920), 6px);
    background: #E5E5E5;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Medium */
    font-size: clamp(11.2px, calc(14 * 100vw / 1920), 14px);
    letter-spacing: clamp(1.728px, calc(2.16 * 100vw / 1920), 2.16px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    color: #404040;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.quote-modal-btn-cancel:hover {
    background-color: #D4D4D4;
    border-color: #D4D4D4;
}

/* SUBMIT INQUIRY 鎸夐挳 - height: 56px, background: #1C1E1B */
/* 鏂囨湰鏍峰紡: Inter-Semi Bold, #FFFFFF, 13px, 2.26px闂磋窛, 19.5px琛岄珮 */
.quote-modal-btn-submit {
    height: clamp(44.8px, calc(56 * 100vw / 1920), 56px);
    flex: 1;
    padding: 0 clamp(22.4px, calc(28 * 100vw / 1920), 28px);
    border: 1px solid #E5E5E5;
    border-radius: clamp(4.8px, calc(6 * 100vw / 1920), 6px);
    background-color: #1C1E1B;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Semi Bold */
    font-size: clamp(10.4px, calc(13 * 100vw / 1920), 13px);
    letter-spacing: clamp(1.808px, calc(2.26 * 100vw / 1920), 2.26px);
    line-height: clamp(15.6px, calc(19.5 * 100vw / 1920), 19.5px);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(11.2px, calc(14 * 100vw / 1920), 14px);
    transition: opacity 0.2s ease;
}

.quote-modal-btn-submit:hover {
    opacity: 0.9;
}

/* SUBMIT INQUIRY 鎸夐挳鍐呯殑绠ご鍥炬爣 - 13*13px, 棰滆壊 #FFFFFF */
.quote-modal-btn-arrow {
    display: block;
    width: clamp(10.4px, calc(13 * 100vw / 1920), 13px);
    height: clamp(10.4px, calc(13 * 100vw / 1920), 13px);
    flex-shrink: 0;
}

/* 寮圭獥搴曢儴鍏嶈矗澹版槑鏂囨湰 - 鍩轰簬1920璁捐绋?*/
/* Inter-Regular, #A1A1A1, 11px, 0.06px闂磋窛, 16.5px琛岄珮, 灞呬腑瀵归綈, 涓婂杈硅窛24px */
.quote-modal-disclaimer {
    font-family: 'Inter', 'Inter-Regular', sans-serif;
    font-weight: 400; /* Regular */
    color: #A1A1A1;
    font-size: clamp(8.8px, calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(0.048px, calc(0.06 * 100vw / 1920), 0.06px);
    line-height: clamp(13.2px, calc(16.5 * 100vw / 1920), 16.5px);
    text-align: center;
    margin-top: clamp(19.2px, calc(24 * 100vw / 1920), 24px);
}

/* ========================================
   05 Related Products 妯″潡 - 澶栬仈鏍峰紡
   鍩轰簬1920璁捐绋匡紝浣跨敤clamp+calc瀹炵幇鍝嶅簲寮?
   ======================================== */

/* 05妯″潡瀹瑰櫒 - 鍩轰簬1920璁捐绋? 涓婁笅96px, 宸﹀彸280px */
#related-products {
    padding-top: clamp(48px, calc(96 * 100vw / 1920), 96px);
    padding-bottom: clamp(48px, calc(96 * 100vw / 1920), 96px);
    padding-left: clamp(32px, calc(280 * 100vw / 1920), 280px);
    padding-right: clamp(32px, calc(280 * 100vw / 1920), 280px);
}

/* 鍒犻櫎 #related-products 涓嬬涓€涓瓙鏍囩鐨勫杈硅窛鍜屽唴杈硅窛 */
#related-products > :first-child {
    margin: 0;
    padding: 0;
}

/* 05妯″潡鏍囬 "Related Products" - 鍩轰簬1920璁捐绋?*/
.related-products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(24px, calc(24 * 100vw / 1920), 24px);
    margin-bottom: clamp(42px, calc(42 * 100vw / 1920), 42px);
}

/* 涓绘爣棰榟2鏍峰紡 */
.related-products-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1C1E1B;
    font-size: clamp(28.8px, calc(40 * 100vw / 1920), 40px);
    letter-spacing: clamp(-0.32px, calc(-0.43 * 100vw / 1920), -0.43px);
    line-height: clamp(32px, calc(44 * 100vw / 1920), 44px);
    text-align: left;
    margin: 0;
}

/* View More 鎸夐挳瀹瑰櫒 */
.view-more-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* View More 鎸夐挳鍐呴儴鍐呭琛?*/
.view-more-btn-content {
    display: flex;
    align-items: center;
    gap: clamp(6px, calc(8 * 100vw / 1920), 8px);
}

/* View More 鏂囨湰鏍峰紡 */
.view-more-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #1C1E1B;
    font-size: clamp(8.67px, calc(13 * 100vw / 1920), 13px);
    letter-spacing: clamp(1.34px, calc(2 * 100vw / 1920), 2px);
    line-height: clamp(13px, calc(19.5 * 100vw / 1920), 19.5px);
    text-transform: uppercase;
}

/* View More 绠ご鍥炬爣 */
.view-more-arrow {
    width: clamp(8px, calc(12 * 100vw / 1920), 12px);
    height: clamp(8px, calc(12 * 100vw / 1920), 12px);
    display: block;
    filter: invert(1);
}

/* View More 涓嬪垝绾?*/
.view-more-underline {
    width: 100%;
    height: 1px;
    background: #1C1E1B;
    opacity: 0.9;
    margin-top: clamp(5.34px, calc(8 * 100vw / 1920), 8px);
}

/* 浜у搧缃戞牸甯冨眬 - 4鍒楃瓑瀹?*/
.related-products-grid,
.related-products-loading {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, calc(24 * 100vw / 1920), 24px);
}

/* 浜у搧鍗＄墖閫氱敤鏍峰紡 */
.product-card {
    height: clamp(330.67px, calc(496 * 100vw / 1920), 496px);
    background: #FFFFFF;
    border-radius: clamp(10.67px, calc(16 * 100vw / 1920), 16px);
    border: 2px solid rgba(229, 229, 229, 0.8);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    border-color: rgba(217, 48, 10, 0.6);
    box-shadow: 0 clamp(4px, calc(8 * 100vw / 1920), 8px) clamp(16px, calc(24 * 100vw / 1920), 24px) rgba(0, 0, 0, 0.08);
}

/* 浜у搧鍥剧墖瀹瑰櫒 */
.product-image {
    height: clamp(263.33px, calc(395 * 100vw / 1920), 395px);
    overflow: hidden;
    background-color: #FAFAFA;
}

/* 浜у搧鍥剧墖鑷€傚簲 */
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 浜у搧搴曢儴淇℃伅鍖哄煙 */
.product-footer {
    padding-top: clamp(21.33px, calc(32 * 100vw / 1920), 32px);
    padding-left: clamp(16px, calc(24 * 100vw / 1920), 24px);
    padding-right: clamp(16px, calc(24 * 100vw / 1920), 24px);
    padding-bottom: clamp(16px, calc(24 * 100vw / 1920), 24px);
}

/* 浜у搧绫诲埆鏂囨湰 */
.product-category {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(7.2px, calc(10 * 100vw / 1920), 10px);
    letter-spacing: clamp(1.01px, calc(1.52 * 100vw / 1920), 1.52px);
    line-height: clamp(10.4px, calc(15 * 100vw / 1920), 15px);
    margin-bottom: clamp(5.33px, calc(8 * 100vw / 1920), 8px);
}

/* 浜у搧鍚嶇О琛?- 浣跨敤flex甯冨眬瀹炵幇宸﹀彸鍒嗗竷 */
.product-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 浜у搧鍚嶇Оh4鏍峰紡 */
.product-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1C1E1B;
    font-size: clamp(11.2px, calc(16 * 100vw / 1920), 16px);
    letter-spacing: clamp(-0.47px, calc(-0.71 * 100vw / 1920), -0.71px);
    line-height: clamp(15.2px, calc(22 * 100vw / 1920), 22px);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 20px);
}

/* 浜у搧鍗＄墖绠ご鍥炬爣 */
.product-arrow-icon {
    width: clamp(8.67px, calc(13 * 100vw / 1920), 13px);
    height: clamp(8.67px, calc(13 * 100vw / 1920), 13px);
    display: block;
    filter: invert(1);
    flex-shrink: 0;
}

/* Loading鐘舵€佷笅鐨勯鏋跺睆鍥剧墖 */
.product-skeleton-image {
    width: 100%;
    height: clamp(263.33px, calc(395 * 100vw / 1920), 395px);
}

/* ========================================
   05 Related Products 鍝嶅簲寮忛€傞厤
   ======================================== */

/* 涓瓑灞忓箷 (max-width: 1280px): 淇濇寔4鍒椾絾缂╁皬闂磋窛 */
@media screen and (max-width: 1280px) {
    .related-products-grid,
    .related-products-loading {
        gap: clamp(18px, calc(20 * 100vw / 1280), 22px);
    }
}

/* 骞虫澘灞忓箷 (max-width: 1024px): 鏀逛负3鍒?*/
@media screen and (max-width: 1024px) {
    .related-products-grid,
    .related-products-loading {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 灏忓睆骞?(max-width: 768px): 鏀逛负2鍒?*/
@media screen and (max-width: 768px) {
    #related-products {
        padding-left: clamp(16px, calc(48 * 100vw / 768), 48px);
        padding-right: clamp(16px, calc(48 * 100vw / 768), 48px);
    }

    .related-products-grid,
    .related-products-loading {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(12px, calc(16 * 100vw / 768), 16px);
    }

    .product-card {
        height: auto;
        min-height: clamp(350px, calc(450 * 100vw / 768), 450px);
    }

    .product-image {
        height: clamp(250px, calc(320 * 100vw / 768), 320px);
    }

    .view-more-btn {
        display: none;
    }
}

/* 瓒呭皬灞忓箷 (max-width: 480px): 鏀逛负1鍒?*/
@media screen and (max-width: 480px) {
    .related-products-grid,
    .related-products-loading {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   椤甸潰澶撮儴 (Header) - 澶栬仈鏍峰紡
   鍩轰簬1920璁捐绋匡紝浣跨敤clamp+calc瀹炵幇鍝嶅簲寮?
   ======================================== */

/* Header瀹瑰櫒 - 鍩轰簬1920璁捐绋? height 80px, padding 涓婁笅16px 宸﹀彸280px */
body.product-detail-page header {
    position: static;
    background: #F5F5F5;
    height: clamp(64px, calc(80 * 100vw / 1920), 88px);
    padding-top: clamp(12.8px, calc(16 * 100vw / 1920), 20px);
    padding-bottom: clamp(12.8px, calc(16 * 100vw / 1920), 20px);
    padding-left: clamp(32px, calc(280 * 100vw / 1920), 280px);
    padding-right: clamp(32px, calc(280 * 100vw / 1920), 280px);
}

/* Header鍐呴儴瀹瑰櫒 - 绉婚櫎澶氫綑padding */
body.product-detail-page header > div {
    padding: 0 !important;
}

/* Logo鍥剧墖 - 鍩轰簬1920璁捐绋? height 48px */
body.product-detail-page .header-logo-img {
    height: clamp(38.4px, calc(48 * 100vw / 1920), 48px);
    width: auto;
    display: block;
}

/* 瀵艰埅鏍忓鍣?- 鍩轰簬1920璁捐绋? margin-left 324px, gap 48px */
body.product-detail-page header nav {
    margin-left: clamp(160px, calc(324 * 100vw / 1920), 324px);
    gap: clamp(28.8px, calc(48 * 100vw / 1920), 48px);
    background: none;
    padding: 0;
}

/* 瀵艰埅閾炬帴鏂囨湰鏍峰紡 - Inter-Medium, #3E403D/#D9300A, 12px, 1.68px闂磋窛, 18px琛岄珮 */
body.product-detail-page header nav a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #3E403D;
    font-size: clamp(9.6px, calc(12 * 100vw / 1920), 12px);
    letter-spacing: clamp(1.344px, calc(1.68 * 100vw / 1920), 1.68px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* 瀵艰埅閾炬帴hover鐘舵€?*/
body.product-detail-page header nav a:hover {
    color: #D9300A;
}

/* 褰撳墠椤甸潰瀵艰埅閾炬帴楂樹寒锛圥RODUCTS锛?*/
body.product-detail-page header nav a[href*="changpinliebiaoye"],
body.product-detail-page header nav a[href*="products"] {
    color: #D9300A;
}

/* Header鍙充晶鍖哄煙 - 鍩轰簬1920璁捐绋? gap 16px */
body.product-detail-page .header-right {
    gap: clamp(12.8px, calc(16 * 100vw / 1920), 16px);
}

/* 璇█鍒囨崲鎸夐挳 - Inter-Medium, rgba(28,30,27,0.7), 12px */
.site-language-toggle {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: rgba(28, 30, 27, 0.7);
    font-size: clamp(9.6px, calc(12 * 100vw / 1920), 12px);
    letter-spacing: clamp(1.344px, calc(1.68 * 100vw / 1920), 1.68px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.site-language-toggle:hover {
    opacity: 0.7;
}

/* 鍒嗛殧绾?- 鍩轰簬1920璁捐绋? width 1px, height 18px */
.header-divider {
    width: clamp(0.8px, calc(1 * 100vw / 1920), 1px);
    height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    background: rgba(28, 30, 27, 0.4);
    display: block;
}

/* 鎼滅储鍥炬爣 - 鍩轰簬1920璁捐绋? 14x15px */
.header-search-icon {
    width: clamp(11.2px, calc(14 * 100vw / 1920), 14px);
    height: clamp(12px, calc(15 * 100vw / 1920), 15px);
    cursor: pointer;
    display: block;
    transition: opacity 0.2s ease;
}

.header-search-icon:hover {
    opacity: 0.7;
}

/* ========================================
   闈㈠寘灞戝鑸?(Breadcrumb) - 澶栬仈鏍峰紡
   鍩轰簬1920璁捐绋匡紝浣跨敤clamp+calc瀹炵幇鍝嶅簲寮?
   ======================================== */

/* 闈㈠寘灞戝鍣?- 鍩轰簬1920璁捐绋? margin-top 32px, padding-left/right 280px */
.breadcrumb-section {
    padding-top: clamp(25.6px, calc(32 * 100vw / 1920), 32px);
    background-color: #F5F5F5;
}

.breadcrumb-container {
    padding-left: clamp(32px, calc(280 * 100vw / 1920), 280px) !important;
    padding-right: clamp(32px, calc(280 * 100vw / 1920), 280px) !important;
    flex-wrap: wrap;
    gap: 10px;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 闈㈠寘灞戝鑸尯鍩?- 鍩轰簬1920璁捐绋? gap 10px */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: clamp(8px, calc(10 * 100vw / 1920), 10px);
    background: none;
    padding: 0;
    position: static;
    z-index: auto;
}

/* 闈㈠寘灞戦摼鎺?- Inter-Medium, #3E403D, 16px */
.breadcrumb-nav a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #3E403D;
    font-size: clamp(12.8px, calc(16 * 100vw / 1920), 16px);
    letter-spacing: clamp(1.344px, calc(1.68 * 100vw / 1920), 1.68px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.breadcrumb-nav a:hover {
    color: #D9300A;
}

/* 闈㈠寘灞戠澶村浘鏍?- 12x12px */
.breadcrumb-arrow {
    width: clamp(9.6px, calc(12 * 100vw / 1920), 12px);
    height: clamp(9.6px, calc(12 * 100vw / 1920), 12px);
    display: block;
}

/* 闈㈠寘灞戝綋鍓嶉〉鏂囨湰 - Inter-SemiBold, #1C1E1B, 11px */
.breadcrumb-current {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1C1E1B;
    font-size: clamp(8.8px, calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(1.344px, calc(1.68 * 100vw / 1920), 1.68px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* 杩斿洖鐩綍閾炬帴 - 鍩轰簬1920璁捐绋? gap 9px */
.breadcrumb-back-link {
    display: flex;
    align-items: center;
    gap: clamp(7.2px, calc(9 * 100vw / 1920), 9px);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.breadcrumb-back-link:hover {
    opacity: 0.7;
}

/* 杩斿洖绠ご鍥炬爣 - 14x14px */
.breadcrumb-back-arrow {
    width: clamp(11.2px, calc(14 * 100vw / 1920), 14px);
    height: clamp(11.2px, calc(14 * 100vw / 1920), 14px);
    display: block;
}

/* 杩斿洖鐩綍鏂囨湰 - Inter-Medium, #404040, 12px uppercase */
.breadcrumb-back-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #404040;
    font-size: clamp(9.6px, calc(12 * 100vw / 1920), 12px);
    letter-spacing: clamp(1.344px, calc(1.68 * 100vw / 1920), 1.68px);
    line-height: clamp(14.4px, calc(18 * 100vw / 1920), 18px);
    white-space: nowrap;
    text-transform: uppercase;
}

/* ========================================
   椤甸潰搴曢儴 (Footer) - 鏃ф牱寮忓凡绉昏嚦 components.css
   姝ゅ涓嶅啀閲嶅瀹氫箟锛岄伩鍏嶆牱寮忓啿绐?
   ======================================== */



/* ========================================
   Header & Footer 鍝嶅簲寮忛€傞厤
   ======================================== */

/* 涓瓑灞忓箷 (max-width: 1280px): 缂╁皬闂磋窛 */
@media screen and (max-width: 1280px) {
    body.product-detail-page header {
        padding-left: clamp(24px, calc(180 * 100vw / 1280), 180px);
        padding-right: clamp(24px, calc(180 * 100vw / 1280), 180px);
    }

    body.product-detail-page header nav {
        margin-left: clamp(120px, calc(240 * 100vw / 1280), 240px);
        gap: clamp(24px, calc(36 * 100vw / 1280), 36px);
    }

    .breadcrumb-container {
        padding-left: clamp(24px, calc(180 * 100vw / 1280), 180px);
        padding-right: clamp(24px, calc(180 * 100vw / 1280), 180px);
    }
}

/* 骞虫澘灞忓箷 (max-width: 1024px): 杩涗竴姝ョ缉灏?*/
@media screen and (max-width: 1024px) {
    body.product-detail-page header {
        padding-left: clamp(20px, calc(140 * 100vw / 1024), 140px);
        padding-right: clamp(20px, calc(140 * 100vw / 1024), 140px);
    }

    body.product-detail-page header nav {
        margin-left: clamp(80px, calc(160 * 100vw / 1024), 160px);
        gap: clamp(20px, calc(28 * 100vw / 1024), 28px);
    }

    .breadcrumb-container {
        padding-left: clamp(20px, calc(140 * 100vw / 1024), 140px);
        padding-right: clamp(20px, calc(140 * 100vw / 1024), 140px);
    }
}

/* 灏忓睆骞?(max-width: 768px): 绉诲姩绔紭鍖?*/
@media screen and (max-width: 768px) {
    /* Header绉诲姩绔€傞厤 */
    body.product-detail-page header {
        height: auto;
        min-height: clamp(56px, calc(64 * 100vw / 768), 64px);
        padding-top: clamp(12px, calc(16 * 100vw / 768), 16px);
        padding-bottom: clamp(12px, calc(16 * 100vw / 768), 16px);
        padding-left: clamp(16px, calc(32 * 100vw / 768), 32px);
        padding-right: clamp(16px, calc(32 * 100vw / 768), 32px);
    }

    body.product-detail-page header > div {
        flex-wrap: wrap;
    }

    body.product-detail-page header nav {
        display: none; /* 绉诲姩绔殣钘忓鑸紝鍙敼涓烘眽鍫¤彍鍗?*/
    }

    .header-logo-img {
        height: clamp(32px, calc(40 * 100vw / 768), 40px);
    }

    .site-language-toggle {
        font-size: clamp(8px, calc(10 * 100vw / 768), 10px);
    }

    /* 闈㈠寘灞戠Щ鍔ㄧ閫傞厤 */
    .breadcrumb-container {
        padding-left: clamp(16px, calc(32 * 100vw / 768), 32px);
        padding-right: clamp(16px, calc(32 * 100vw / 768), 32px);
        flex-direction: column;
        align-items: flex-start;
    }

    .breadcrumb-current {
        max-width: 200px;
    }

    .breadcrumb-back-link {
        display: none; /* 灏忓睆骞曢殣钘忚繑鍥炴寜閽?*/
    }

}










/* 闅愯棌婊氬姩鏉′絾淇濇寔婊氬姩鏁堟灉 */
html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

/* 绛涢€夊尯鏍囬鏍峰紡 */
.filter-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(calc(7.7 * 100vw / 1920), calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(calc(1.58 * 100vw / 1920), calc(2.26 * 100vw / 1920), 2.26px);
    line-height: clamp(calc(11.55 * 100vw / 1920), calc(16.5 * 100vw / 1920), 16.5px);
    text-transform: uppercase;
    margin-bottom: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
}

.filter-sub-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(calc(7.7 * 100vw / 1920), calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(calc(1.58 * 100vw / 1920), calc(2.26 * 100vw / 1920), 2.26px);
    line-height: clamp(calc(11.55 * 100vw / 1920), calc(16.5 * 100vw / 1920), 16.5px);
    text-transform: uppercase;
}

/* 鎼滅储妗嗗尯鍩?*/
.filter-search-input {
    margin-top: clamp(calc(8.4 * 100vw / 1920), calc(12 * 100vw / 1920), 12px);
}

/* 鍒嗙被鍖哄煙 */
.filter-category-section {
    margin-top: clamp(calc(28 * 100vw / 1920), calc(40 * 100vw / 1920), 40px);
}

.filter-category-header {
    margin-bottom: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
}

/* 鍒嗙被鍒楄〃 - 绔栧悜 */
.filter-category-list {
    display: flex;
    flex-direction: column;
    gap: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
}

/* 鍒嗙被椤?*/
.filter-category-item {
    width: 100%;
    padding: clamp(calc(8.4 * 100vw / 1920), calc(12 * 100vw / 1920), 12px);
    border-radius: clamp(calc(4.2 * 100vw / 1920), calc(6 * 100vw / 1920), 6px);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #1C1E1B;
    font-size: clamp(calc(9.8 * 100vw / 1920), calc(14 * 100vw / 1920), 14px);
    letter-spacing: clamp(calc(-0.11 * 100vw / 1920), calc(-0.15 * 100vw / 1920), -0.15px);
    line-height: clamp(calc(14.7 * 100vw / 1920), calc(21 * 100vw / 1920), 21px);
    text-align: left;
    background-color: transparent;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.filter-category-item:hover {
    opacity: 0.7;
}

.filter-category-item.active {
    background-color: #1C1E1B;
    color: #FFFFFF;
}

.filter-search-input .el-input__wrapper {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #A1A1A1;
    font-size: clamp(calc(9.1 * 100vw / 1920), calc(13 * 100vw / 1920), 13px);
    letter-spacing: clamp(calc(-0.06 * 100vw / 1920), calc(-0.08 * 100vw / 1920), -0.08px);
    line-height: normal;
}

.filter-search-input input::placeholder {
    color: #A1A1A1;
}

.filter-search-input .el-input__prefix {
    margin-right: clamp(calc(7 * 100vw / 1920), calc(10 * 100vw / 1920), 10px);
}

.filter-search-input .el-input__prefix .el-icon {
    color: #A1A1A1;
    width: clamp(calc(9.1 * 100vw / 1920), calc(13 * 100vw / 1920), 13px);
    height: clamp(calc(9.1 * 100vw / 1920), calc(13 * 100vw / 1920), 13px);
    font-size: clamp(calc(9.1 * 100vw / 1920), calc(13 * 100vw / 1920), 13px);
}

.filter-search-input .el-input__prefix svg {
    width: clamp(calc(9.1 * 100vw / 1920), calc(13 * 100vw / 1920), 13px) !important;
    height: clamp(calc(9.1 * 100vw / 1920), calc(13 * 100vw / 1920), 13px) !important;
}

/* 涓婚鑹?*/
.red-accent { color: #C41E3A; }
.bg-red-accent { background-color: #C41E3A; }
.border-red-accent { border-color: #C41E3A; }

/* 绛涢€夋爣绛?*/
.filter-tag.active {
    background-color: #C41E3A;
    color: white;
    border-color: #C41E3A;
}

/* 绛涢€夊尯鍩熸爣棰?- SUB CATEGORY 鏃犵孩鑹茬珫绾?*/
.filter-section-title {
    position: relative;
    padding-left: 0;
}

/* 浜у搧鍗＄墖缃戞牸 - 涓€琛屼笁涓紝鍧囧垎瀹藉害锛岄棿璺?2px(鍩轰簬1920) */
.product-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(clamp(calc(16 * 100vw / 1920), 22px, 26px), calc(32 * 100vw / 1920), 32px);
    margin-bottom: clamp(clamp(calc(32 * 100vw / 1920), 44px, 52px), calc(64 * 100vw / 1920), 64px);
}

/* 浜у搧鍒楄〃搴曢儴鍒嗗壊绾?*/
.product-list-divider {
    height: clamp(calc(0.7 * 100vw / 1920), calc(1 * 100vw / 1920), 1px);
    background: #E5E5E5;
    margin-bottom: clamp(calc(22.4 * 100vw / 1920), calc(32 * 100vw / 1920), 32px);
}

/* 鍒嗛〉鏍?- 宸﹀彸甯冨眬 */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Page 鏂囨湰 - Inter-Regular, 11px, #737373, 2.04px闂磋窛, 16.5px琛岄珮 */
.pagination-page-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(calc(7.7 * 100vw / 1920), calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(calc(1.43 * 100vw / 1920), calc(2.04 * 100vw / 1920), 2.04px);
    line-height: clamp(calc(11.55 * 100vw / 1920), calc(16.5 * 100vw / 1920), 16.5px);
    text-align: left;
}

/* 浜у搧鍗＄墖 - 杈规+鍦嗚锛宧over鍔ㄦ晥锛堜笂娴?杞诲井鏀惧ぇ锛夛紝鍥哄畾楂樺害535px(鍩轰簬1920) */
.product-card {
    background: #FFFFFF;
    border-radius: clamp(clamp(calc(8 * 100vw / 1920), 11px, 14px), calc(16 * 100vw / 1920), 16px);
    border: 2px solid #E5E5E5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    height: clamp(clamp(calc(380 * 100vw / 1920), 450px, 480px), calc(535 * 100vw / 1920), 535px);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.product-card:hover {
    transform: translateY(clamp(calc(-5.6 * 100vw / 1920), calc(-8 * 100vw / 1920), -8px)) scale(1.02);
    box-shadow: 0 clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px) clamp(calc(28 * 100vw / 1920), calc(40 * 100vw / 1920), 40px) rgba(0, 0, 0, 0.12);
}

/* 鍗＄墖鍥剧墖鍖哄煙 - 鍝嶅簲寮忛珮搴﹀熀浜?920(320px)锛屼负鏂囨湰鍖哄煙鐣欏嚭鍏呰冻绌洪棿(535-320=215px) */
.product-card-img-wrapper {
    position: relative;
    width: 100%;
    height: clamp(clamp(calc(160 * 100vw / 1920), 210px, 250px), calc(320 * 100vw / 1920), 320px);
    flex-shrink: 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.product-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* 鍗＄墖鏍囩 - 瀹氫綅top16/left16锛岀櫧鑹插崐閫忔槑鑳屾櫙锛屽搴﹁嚜閫傚簲鍐呭 */
.product-card-tag {
    position: absolute;
    top: clamp(clamp(calc(9 * 100vw / 1920), 12px, 14px), calc(16 * 100vw / 1920), 16px);
    left: clamp(clamp(calc(9 * 100vw / 1920), 12px, 14px), calc(16 * 100vw / 1920), 16px);
    max-width: calc(100% - 32px);
    height: clamp(clamp(calc(12 * 100vw / 1920), 15px, 18px), calc(20 * 100vw / 1920), 20px);
    background: rgba(255, 255, 255, 0.9);
    border-radius: clamp(clamp(calc(3.5 * 100vw / 1920), 5px, 5.5px), calc(6 * 100vw / 1920), 6px);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 clamp(clamp(calc(4 * 100vw / 1920), 6px, 7px), calc(8 * 100vw / 1920), 8px);
    box-sizing: border-box;

    /* 鏂囨湰 - Inter-SemiBold, 10px, #404040, 1.6px闂磋窛, 14px琛岄珮, 宸﹀榻?*/
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #404040;
    font-size: clamp(clamp(calc(6 * 100vw / 1920), 8px, 9px), calc(10 * 100vw / 1920), 10px);
    letter-spacing: clamp(clamp(calc(1 * 100vw / 1920), 1.2px, 1.4px), calc(1.6 * 100vw / 1920), 1.6px);
    line-height: clamp(clamp(calc(8.5 * 100vw / 1920), 11px, 12.5px), calc(14 * 100vw / 1920), 14px);
    text-align: left;
}

/* 鍗＄墖鏂囧瓧淇℃伅鍖哄煙 - 鍐呰竟璺?鍩轰簬1920)锛屽唴瀹归潬宸﹀榻?*/
.product-card-info {
    padding: clamp(clamp(calc(12 * 100vw / 1920), 16px, 18px), calc(20 * 100vw / 1920), 20px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 浜у搧绫诲埆鏂囨湰 - Inter-Regular, 10px(鍩轰簬1920), #737373 */
.product-card-category {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(clamp(calc(6.5 * 100vw / 1920), 8px, 9px), calc(10 * 100vw / 1920), 10px);
    letter-spacing: clamp(clamp(calc(1 * 100vw / 1920), 1.3px, 1.5px), calc(1.52 * 100vw / 1920), 1.52px);
    line-height: clamp(clamp(calc(10 * 100vw / 1920), 12px, 14px), calc(15 * 100vw / 1920), 15px);
    margin-bottom: clamp(clamp(calc(4 * 100vw / 1920), 6px, 7px), calc(8 * 100vw / 1920), 8px);
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 浜у搧鏍囬 - Inter-SemiBold, 16px(鍩轰簬1920), #1C1E1B */
.product-card-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1C1E1B;
    font-size: clamp(clamp(calc(11 * 100vw / 1920), 14px, 15px), calc(16 * 100vw / 1920), 16px);
    letter-spacing: clamp(clamp(calc(-0.4 * 100vw / 1920), -0.5px, -0.6px), calc(-0.71 * 100vw / 1920), -0.71px);
    line-height: clamp(clamp(calc(15 * 100vw / 1920), 19px, 21px), calc(22 * 100vw / 1920), 22px);
    text-align: left;
    margin-bottom: clamp(clamp(calc(12 * 100vw / 1920), 16px, 18px), calc(20 * 100vw / 1920), 20px);
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    padding-top: clamp(clamp(calc(2.5 * 100vw / 1920), 3.5px, 4px), calc(4 * 100vw / 1920), 4px);
}

/* View Detail 鏂囨湰+鍥炬爣鎵€鍦ㄨ - 闈犲乏瀵归綈锛屽悓涓€琛屾樉绀?*/
.product-card-detail-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    cursor: pointer;
    margin-bottom: clamp(clamp(calc(2.5 * 100vw / 1920), 3.5px, 4px), calc(5 * 100vw / 1920), 5px);
    white-space: nowrap;
    flex-shrink: 0;
}

/* View Detail 鏂囨湰+鍥炬爣+涓嬪垝绾垮寘瑁呭鍣?*/
.product-card-detail-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* View Detail 鏂囨湰 - Inter-Medium, 11px(鍩轰簬1920), #1C1E1B */
.product-card-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #1C1E1B;
    font-size: clamp(clamp(calc(7 * 100vw / 1920), 8.5px, 9.5px), calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(clamp(calc(1.1 * 100vw / 1920), 1.4px, 1.6px), calc(1.82 * 100vw / 1920), 1.82px);
    line-height: clamp(clamp(calc(11 * 100vw / 1920), 13px, 14px), calc(16.5 * 100vw / 1920), 16.5px);
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

/* 绠ご鍥炬爣 - 13x13px(鍩轰簬1920) */
.product-card-arrow-icon {
    width: clamp(clamp(calc(7.5 * 100vw / 1920), 9.5px, 11px), calc(13 * 100vw / 1920), 13px);
    height: clamp(clamp(calc(7.5 * 100vw / 1920), 9.5px, 11px), calc(13 * 100vw / 1920), 13px);
    margin-left: clamp(clamp(calc(3.5 * 100vw / 1920), 4.5px, 5px), calc(6 * 100vw / 1920), 6px);
}

/* View Detail 涓嬪垝绾?- 瀹藉害涓庝笂鏂规枃鏈?鍥炬爣琛屼竴鑷?*/
.product-card-divider {
    width: 100%;
    height: clamp(calc(0.7 * 100vw / 1920), calc(1 * 100vw / 1920), 1px);
    background: #1C1E1B;
    opacity: 0.9;
}
.toolbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(calc(16.8 * 100vw / 1920), calc(24 * 100vw / 1920), 24px);
}

/* 宸ュ叿鏍忓垎鍓茬嚎 */
.toolbar-divider {
    height: clamp(calc(0.7 * 100vw / 1920), calc(1 * 100vw / 1920), 1px);
    background: #E5E5E5;
}

/* 浜у搧鍒楄〃鍖哄煙涓婂杈硅窛 */
.product-grid-area {
    margin-top: clamp(calc(25.2 * 100vw / 1920), calc(36 * 100vw / 1920), 36px);
}
.toolbar-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(calc(9.1 * 100vw / 1920), calc(13 * 100vw / 1920), 13px);
    letter-spacing: clamp(calc(-0.06 * 100vw / 1920), calc(-0.08 * 100vw / 1920), -0.08px);
    line-height: clamp(calc(13.65 * 100vw / 1920), calc(19.5 * 100vw / 1920), 19.5px);
}

/* 鏁板瓧棰滆壊淇濇寔涓嶅彉锛堟繁鑹诧級 */
.toolbar-text-count {
    color: #1C1E1B;
}

/* Refresh 鎸夐挳鏍峰紡涓庢枃瀛椾竴鑷?*/
.toolbar-refresh-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(calc(9.1 * 100vw / 1920), calc(13 * 100vw / 1920), 13px);
    letter-spacing: clamp(calc(-0.06 * 100vw / 1920), calc(-0.08 * 100vw / 1920), -0.08px);
    line-height: clamp(calc(13.65 * 100vw / 1920), calc(19.5 * 100vw / 1920), 19.5px);
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
}

.toolbar-refresh-btn:hover {
    opacity: 0.6;
}

.toolbar-refresh-btn i {
    color: #737373;
}

/* 涓诲唴瀹瑰尯瀹瑰櫒 - 涓婁笅96px 宸﹀彸280px 鍝嶅簲寮忓唴杈硅窛 */
.main-content-wrapper {
    padding: clamp(calc(67.2 * 100vw / 1920), calc(96 * 100vw / 1920), 96px) clamp(calc(196 * 100vw / 1920), calc(280 * 100vw / 1920), min(280px, 90vw));
}

/* 浜у搧鍒楄〃椤?- 宸︿晶绛涢€夐潰鏉垮搷搴斿紡瀹藉害 (鍩轰簬1920px: 288px) */
.product-filter-sidebar {
    width: clamp(clamp(calc(168 * 100vw / 1920), 200px, 240px), calc(288 * 100vw / 1920), 288px);
    flex-shrink: 0;
}

/* 浜у搧鍒楄〃椤?- 鍙充晶浜у搧涓诲尯鍩熷搷搴斿紡瀹藉害 */
.product-list-main {
    flex: 1 1 0;
    min-width: 0; /* 闃叉鍐呭婧㈠嚭 */
}

/* SUB CATEGORY 澶氶€夐」 */

/* SUB CATEGORY 鏍囬涓嬪杈硅窛 */
.sub-category-header {
    margin-bottom: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
}

/* 绫诲埆鍒楄〃瀹瑰櫒锛岃缃瘡椤归棿璺?*/
.sub-category-list {
    display: flex;
    flex-direction: column;
    gap: clamp(calc(8.4 * 100vw / 1920), calc(12 * 100vw / 1920), 12px);
}

.sub-category-checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.sub-category-checkbox-item:hover {
    opacity: 0.7;
}

/* 鑷畾涔夊閫夋鏍峰紡 */
.sub-category-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
    height: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
    border: 1px solid #D4D4D4;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.sub-category-checkbox:checked {
    background-color: #525252;
    border-color: #525252;
}

.sub-category-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: clamp(calc(2.8 * 100vw / 1920), calc(4 * 100vw / 1920), 4px);
    height: clamp(calc(5.6 * 100vw / 1920), calc(8 * 100vw / 1920), 8px);
    border: solid white;
    border-width: 0 clamp(calc(1.05 * 100vw / 1920), calc(1.5 * 100vw / 1920), 1.5px) clamp(calc(1.05 * 100vw / 1920), calc(1.5 * 100vw / 1920), 1.5px) 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 绫诲埆鍚嶆枃瀛楁牱寮?- 鎸夎璁＄ */
.sub-category-label {
    margin-left: clamp(calc(8.4 * 100vw / 1920), calc(12 * 100vw / 1920), 12px);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #525252;
    font-size: clamp(calc(9.45 * 100vw / 1920), calc(13.5 * 100vw / 1920), 13.5px);
    letter-spacing: clamp(calc(-0.08 * 100vw / 1920), calc(-0.11 * 100vw / 1920), -0.11px);
    line-height: clamp(calc(14.18 * 100vw / 1920), calc(20.25 * 100vw / 1920), 20.25px);
}
.spec-option.active {
    background-color: #C41E3A;
    color: white;
    border-color: #C41E3A;
}

/* 缂╃暐鍥?*/
.thumbnail.active {
    border-color: #C41E3A;
}

/* Element Plus 鏍峰紡瑕嗙洊 */
.el-input__wrapper {
    box-shadow: none !important;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}
.el-input__wrapper:hover {
    border-color: #C41E3A;
}
.el-input__wrapper.is-focus {
    border-color: #C41E3A !important;
    box-shadow: 0 0 0 2px rgba(196, 30, 58, 0.2) !important;
}

.el-select .el-input__wrapper {
    border-radius: 0.5rem;
}

/* ========================================
   04 Leave a Message 琛ㄥ崟 - 鑷畾涔夋牱寮?
   瑕嗙洊鍏ㄥ眬 Element Plus 榛樿鏍峰紡
   ======================================== */

/* 琛ㄥ崟鍐?Select 涓嬫媺閫夋嫨鍣?- 寮哄埗缁熶竴鏍峰紡 */
.inquiry-custom-form .el-select .el-input__wrapper {
    height: clamp(calc(33.6 * 100vw / 1920), calc(48 * 100vw / 1920), 48px) !important;
    background-color: #F5F5F5 !important;
    border-radius: clamp(calc(4.2 * 100vw / 1920), calc(6 * 100vw / 1920), 6px) !important;
    border: 1px solid #E5E5E5 !important;
    box-shadow: none !important;
}

/* 琛ㄥ崟鍐?Select hover/focus 鐘舵€?- 淇濇寔涓€鑷?*/
.inquiry-custom-form .el-select .el-input__wrapper:hover,
.inquiry-custom-form .el-select .el-input.is-focus .el-input__wrapper {
    border: 1px solid #E5E5E5 !important;
    box-shadow: none !important;
}

/* 琛ㄥ崟鍐呰緭鍏ユ/鏂囨湰鍩?- 寮哄埗缁熶竴鏍峰紡 */
.inquiry-custom-form .el-input__wrapper,
.inquiry-custom-form .el-textarea__inner {
    height: clamp(calc(33.6 * 100vw / 1920), calc(48 * 100vw / 1920), 48px);
    background-color: #F5F5F5 !important;
    border-radius: clamp(calc(4.2 * 100vw / 1920), calc(6 * 100vw / 1920), 6px) !important;
    border: 1px solid #E5E5E5 !important;
    box-shadow: none !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #C41E3A;
    border-color: #C41E3A;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #374151;
}

.el-pagination.is-background .el-pager li.is-active {
    background-color: #1C1E1B;
}

/* 鍒嗛〉鏍煎瓙 - 44x44px, 6px鍦嗚, 1px杈规#D4D4D4 */
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
    width: clamp(calc(30.8 * 100vw / 1920), calc(44 * 100vw / 1920), 44px);
    height: clamp(calc(30.8 * 100vw / 1920), calc(44 * 100vw / 1920), 44px);
    border-radius: clamp(calc(4.2 * 100vw / 1920), calc(6 * 100vw / 1920), 6px);
    border: 1px solid #D4D4D4;
    background: transparent;
    color: #404040;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(8.4 * 100vw / 1920), calc(12 * 100vw / 1920), 12px);
    letter-spacing: clamp(calc(1.18 * 100vw / 1920), calc(1.68 * 100vw / 1920), 1.68px);
    line-height: clamp(calc(12.6 * 100vw / 1920), calc(18 * 100vw / 1920), 18px);
    min-width: clamp(calc(30.8 * 100vw / 1920), calc(44 * 100vw / 1920), 44px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 閫変腑椤电爜 - 鑳屾櫙娣辫壊锛屾枃鏈櫧鑹?*/
.el-pagination.is-background .el-pager li.is-active {
    background-color: #1C1E1B;
    color: #FFFFFF !important;
}

/* 宸﹀彸绠ご鍥炬爣 - 16x16px, #1C1E1B */
.el-pagination.is-background .btn-prev .el-icon,
.el-pagination.is-background .btn-next .el-icon {
    width: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px) !important;
    height: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px) !important;
    color: #1C1E1B !important;
}

/* 绠ご涓嶅彲鐐瑰嚮鏃?opacity 0.3 */
.el-pagination.is-background .btn-prev:disabled .el-icon,
.el-pagination.is-background .btn-next:disabled .el-icon {
    opacity: 0.3;
}

.el-button--primary {
    background-color: #C41E3A;
    border-color: #C41E3A;
}
.el-button--primary:hover {
    background-color: #a31830;
    border-color: #a31830;
}

.el-tabs__item.is-active {
    color: #C41E3A !important;
}
.el-tabs__active-bar {
    background-color: #C41E3A !important;
}
.el-tabs__item:hover {
    color: #C41E3A !important;
}

.el-textarea__inner {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}
.el-textarea__inner:hover {
    border-color: #C41E3A;
}
.el-textarea__inner:focus {
    border-color: #C41E3A !important;
    box-shadow: 0 0 0 2px rgba(196, 30, 58, 0.2) !important;
}

.el-dialog__header {
    border-bottom: 1px solid #e5e7eb;
}
.el-dialog__footer {
    border-top: 1px solid #e5e7eb;
}

/* 浜у搧鍒楄〃椤?banner */
.product-banner-slide {
    position: relative;
}

.product-banner-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-banner-content {
    position: absolute;
    inset: 0;
    height: 100%;
    box-sizing: border-box;
    padding: clamp(calc(178.5 * 100vw / 1920), calc(255 * 100vw / 1920), 255px) clamp(calc(196 * 100vw / 1920), calc(280 * 100vw / 1920), min(280px, 90vw)) clamp(calc(50.4 * 100vw / 1920), calc(72 * 100vw / 1920), 72px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.product-banner-copy {
    width: 100%;
}

.product-banner-kicker {
    display: flex;
    align-items: center;
    gap: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
    color: #D9300A;
    font-family: 'Inter', sans-serif;
    font-size: clamp(calc(8.4 * 100vw / 1920), calc(12 * 100vw / 1920), 12px);
    font-weight: 500;
    line-height: clamp(calc(12.6 * 100vw / 1920), calc(18 * 100vw / 1920), 18px);
    letter-spacing: clamp(calc(2.1 * 100vw / 1920), calc(3 * 100vw / 1920), 3px);
    text-transform: none;
    white-space: nowrap;
}

.product-banner-kicker-line {
    width: clamp(calc(22.4 * 100vw / 1920), calc(32 * 100vw / 1920), 32px);
    height: 1px;
    background: #D9300A;
    flex-shrink: 0;
}

.product-banner-kicker-text {
    color: #D9300A;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.product-banner-title {
    width: 100%;
    max-width: clamp(calc(589.4 * 100vw / 1920), calc(842 * 100vw / 1920), 842px);
    min-height: clamp(calc(94.5 * 100vw / 1920), calc(135 * 100vw / 1920), 135px);
    margin: clamp(calc(16.8 * 100vw / 1920), calc(24 * 100vw / 1920), 24px) 0;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: clamp(calc(44.8 * 100vw / 1920), calc(62 * 100vw / 1920), 64px);
    font-weight: 600;
    line-height: clamp(calc(47.04 * 100vw / 1920), calc(67.2 * 100vw / 1920), 67.2px);
    text-align: left;
    font-style: normal;
    letter-spacing: clamp(calc(-0.74 * 100vw / 1920), calc(-1.06 * 100vw / 1920), -1.06px);
}

.product-banner-description {
    width: clamp(calc(403.2 * 100vw / 1920), calc(576 * 100vw / 1920), 576px);
    margin: 0 0 clamp(calc(33.6 * 100vw / 1920), calc(48 * 100vw / 1920), 48px);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
    font-size: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
    font-weight: 400;
    line-height: clamp(calc(18.2 * 100vw / 1920), calc(26 * 100vw / 1920), 26px);
    text-align: left;
    font-style: normal;
    letter-spacing: 0;
}

.product-banner-divider {
    width: 100%;
    height: clamp(calc(0.7 * 100vw / 1920), calc(1 * 100vw / 1920), 1px);
    min-height: 1px;
    margin: 0 0 clamp(calc(16.8 * 100vw / 1920), calc(24 * 100vw / 1920), 24px);
    background: rgba(255, 255, 255, 0.15);
}

.product-banner-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 16px);
}

.product-banner-breadcrumb,
.product-banner-count {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(7.7 * 100vw / 1920), calc(11 * 100vw / 1920), 11px);
    line-height: clamp(calc(11.9 * 100vw / 1920), calc(17 * 100vw / 1920), 17px);
    letter-spacing: clamp(calc(1.4 * 100vw / 1920), calc(2 * 100vw / 1920), 2px);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.product-banner-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(calc(5.6 * 100vw / 1920), calc(8 * 100vw / 1920), 8px);
    min-width: 0;
}

.product-banner-count {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.product-banner-breadcrumb-item {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: rgba(255, 255, 255, 0.55);
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.product-banner-breadcrumb-item.is-active {
    color: #FFFFFF;
}

.product-banner-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

/* Product list banner overrides */
.product-banner-viewport {
    position: relative;
    --product-banner-base-height: clamp(375px, calc(750 * 100vw / 1920), 750px);
    min-height: calc(var(--product-banner-base-height) - var(--main-nav-height));
    height: calc(var(--product-banner-base-height) - var(--main-nav-height));
    overflow: hidden;
}

.product-banner-viewport > .flex {
    height: 100%;
}

.product-banner-viewport > .flex > div {
    height: 100%;
}

.product-banner-viewport .product-banner-slide {
    height: 100%;
    min-height: 100%;
}

.product-banner-viewport .product-banner-image {
    position: absolute;
    inset: 0;
}

.product-banner-viewport .product-banner-content {
    padding: clamp(151px, calc(300 * 100vw / 1920), 300px) clamp(120px, calc(240 * 100vw / 1920), 240px) clamp(16px, calc(21 * 100vw / 1920), 21px);
    justify-content: flex-start;
    min-width: 0;
}

.product-banner-viewport .product-banner-copy {
    width: min(100%, clamp(640px, calc(960 * 100vw / 1920), 960px));
    max-width: min(100%, clamp(640px, calc(960 * 100vw / 1920), 960px));
    min-width: 0;
}

.product-banner-viewport .product-banner-kicker {
    gap: clamp(7px, calc(11 * 100vw / 1920), 11px);
    font-size: clamp(5px, calc(10 * 100vw / 1920), 10px);
    line-height: clamp(7.5px, calc(15 * 100vw / 1920), 15px);
    letter-spacing: clamp(1.5px, calc(3 * 100vw / 1920), 3px);
    min-width: 0;
}

.product-banner-viewport .product-banner-kicker-line {
    width: clamp(17px, calc(27 * 100vw / 1920), 27px);
}

.product-banner-viewport .product-banner-title {
    max-width: 100%;
    margin: clamp(10px, calc(21 * 100vw / 1920), 21px) 0 clamp(13px, calc(27 * 100vw / 1920), 27px);
    font-size: clamp(31px, calc(62 * 100vw / 1920), 62px);
    line-height: clamp(31.5px, calc(63 * 100vw / 1920), 63px);
    letter-spacing: clamp(-0.48px, calc(-0.96 * 100vw / 1920), -0.96px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-banner-viewport .product-banner-description {
    width: 100%;
    margin: 0 0 clamp(24px, calc(48 * 100vw / 1920), 48px);
    font-size: clamp(7.5px, calc(15 * 100vw / 1920), 15px);
    line-height: clamp(12px, calc(24 * 100vw / 1920), 24px);
    letter-spacing: clamp(-0.185px, calc(-0.37 * 100vw / 1920), -0.37px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-banner-viewport .product-banner-divider {
    width: 100vw;
    margin: 0 0 clamp(10px, calc(21 * 100vw / 1920), 21px);
    margin-left: calc(-50vw + 50%);
}

.product-banner-viewport .product-banner-meta {
    gap: clamp(18px, calc(21 * 100vw / 1920), 21px);
    min-width: 0;
}

.product-banner-viewport .product-banner-breadcrumb,
.product-banner-viewport .product-banner-count {
    font-size: clamp(4.5px, calc(9 * 100vw / 1920), 9px);
    line-height: clamp(7px, calc(14 * 100vw / 1920), 14px);
    letter-spacing: clamp(0.9px, calc(1.8 * 100vw / 1920), 1.8px);
}

.product-banner-viewport .product-banner-breadcrumb {
    gap: clamp(2px, calc(3 * 100vw / 1920), 3px);
    min-width: 0;
}

.product-banner-viewport .product-banner-count {
    max-width: clamp(180px, calc(420 * 100vw / 1920), 420px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 浜у搧璇︽儏椤?- 浜у搧绯诲垪鏍囪瘑琛?*/
.product-series-row {
    display: flex;
    align-items: center;
    gap: clamp(calc(11.2 * 100vw / 1920), calc(16 * 100vw / 1920), 20px);
    margin-bottom: clamp(calc(16.8 * 100vw / 1920), calc(24 * 100vw / 1920), 32px);
}

/* 妯嚎 - 32px x 1px, #1C1E1B */
.product-series-line {
    display: block;
    width: clamp(calc(22.4 * 100vw / 1920), calc(32 * 100vw / 1920), 40px);
    height: 1px;
    background: #1C1E1B;
    flex-shrink: 0;
}

/* 绯诲垪鏂囨湰 - Inter-Regular, #737373, 11px, 3.36px闂磋窛, 16.5px琛岄珮 */
.product-series-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #737373;
    font-size: clamp(calc(7.7 * 100vw / 1920), calc(11 * 100vw / 1920), 14px);
    letter-spacing: clamp(calc(2.35 * 100vw / 1920), calc(3.36 * 100vw / 1920), 4.5px);
    line-height: clamp(calc(11.55 * 100vw / 1920), calc(16.5 * 100vw / 1920), 20px);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ========================================
   Leave a Message - 鍝嶅簲寮?
   ======================================== */
@media (max-width: 900px) {
    .leave-message-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    #leave-message-section {
        padding: 40px 20px !important;
    }

    .leave-message-container .inquiry-form {
        padding: 30px 20px;
    }
}



:root {
    --pure-white: #ffffff;
    --off-white: #f5f5f5;
    --light-grey: #e0e0e0;
    --mid-grey: #757575;
    --dark-grey: #333333;
    --pure-black: #000000;
    --safety-red: #d32f2f;
    --main-nav-height: clamp(64px, calc(80 * 100vw / 1920), 88px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* 闂呮劘妫屽姘З閺夆€茬稻娣囨繄鏆€濠婃艾濮╅崝鐔诲厴 */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 闂呮劘妫岄崗鍏呯艾閹存垳婊戞い鐢告桨閻ㄥ嫭绮撮崝銊︽蒋 */
html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--pure-black);
    background-color: var(--pure-white);
    /* 闂呮劘妫屽姘З閺?*/
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

/* NAVIGATION */
.about-nav {
    background: var(--pure-white);
    padding: clamp(12px, calc(20 * 100vw / 1920), 20px) clamp(40px, calc(154 * 100vw / 1920), 154px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--light-grey);
}

.logo {
    font-size: clamp(24px, calc(32 * 100vw / 1920), 32px);
    font-weight: 900;
    color: var(--pure-black);
    text-decoration: none;
    letter-spacing: -1px;
    cursor: pointer;
}

.nav-links a,
.nav-links button {
    margin-left: clamp(16px, calc(25 * 100vw / 1920), 25px);
    text-decoration: none;
    color: var(--pure-black);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(11px, calc(13 * 100vw / 1920), 13px);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links button:hover {
    color: var(--safety-red);
}

.nav-links .active {
    color: var(--safety-red);
}

.nav-links .inquiry-link {
    color: var(--safety-red);
}

/* SECTION COMMON STYLES */
.section-white {
    background-color: var(--off-white);
    padding: clamp(60px, calc(100 * 100vw / 1920), 100px) clamp(32px, calc(120 * 100vw / 1920), 120px);
}

/* ========================================
   HERO BANNER SECTION - Contact-style structure for About
   ======================================== */

.about-hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.about-hero-section > #about-banner-app {
    display: block;
    width: 100%;
}

.about-hero-banner {
    position: relative;
    --about-banner-base-height: clamp(375px, calc(750 * 100vw / 1920), 750px);
    min-height: calc(var(--about-banner-base-height) - var(--main-nav-height));
    height: calc(var(--about-banner-base-height) - var(--main-nav-height)) !important;
    overflow: hidden;
}

.about-hero-carousel {
    position: absolute;
    inset: 0;
    height: 100% !important;
    overflow: hidden;
}

.about-hero-track {
    height: 100% !important;
}

.about-hero-slide {
    position: relative;
    background: transparent !important;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden !important;
    height: 100% !important;
}

.about-hero-section .media-carousel-slide,
.about-hero-section article,
.about-hero-content {
    overflow: hidden !important;
}

.about-hero-section article {
    background-color: transparent !important;
    background: transparent !important;
}

.about-hero-section article > :not(.about-hero-divider) {
    background-color: transparent !important;
    background: transparent !important;
}

.about-hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(16, 17, 16, 0.72) 0%, rgba(16, 17, 16, 0.38) 45%, rgba(16, 17, 16, 0.08) 100%);
    z-index: 1;
}

.about-hero-content {
    position: absolute;
    inset: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(151px, calc(300 * 100vw / 1920), 300px) clamp(120px, calc(240 * 100vw / 1920), 240px) clamp(16px, calc(21 * 100vw / 1920), 21px);
    background: transparent !important;
    background-color: transparent !important;
    margin: 0;
    border: none;
    outline: none;
    box-shadow: none;
    min-width: 0;
}

.about-hero-copy {
    width: min(100%, clamp(640px, calc(960 * 100vw / 1920), 960px));
    max-width: min(100%, clamp(640px, calc(960 * 100vw / 1920), 960px));
    min-width: 0;
}

.about-hero-kicker,
.about-hero-breadcrumb,
.about-hero-count {
    display: flex;
    align-items: center;
    gap: clamp(7px, calc(11 * 100vw / 1920), 11px);
}

.about-hero-kicker-line {
    width: clamp(17px, calc(27 * 100vw / 1920), 27px);
    height: 1px;
    background: var(--safety-red);
    flex-shrink: 0;
}

.about-hero-kicker-text {
    color: #ffb900;
    font-size: clamp(5px, calc(10 * 100vw / 1920), 10px);
    letter-spacing: clamp(1.5px, calc(3 * 100vw / 1920), 3px);
    line-height: clamp(7.5px, calc(15 * 100vw / 1920), 15px);
    text-transform: uppercase;
}

.about-hero-title {
    margin: clamp(10px, calc(21 * 100vw / 1920), 21px) 0 clamp(13px, calc(27 * 100vw / 1920), 27px);
    color: #fafafa;
    font-size: clamp(31px, calc(62 * 100vw / 1920), 62px);
    font-weight: 600;
    line-height: clamp(31.5px, calc(63 * 100vw / 1920), 63px);
    letter-spacing: clamp(-0.48px, calc(-0.96 * 100vw / 1920), -0.96px);
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: normal;
    overflow-wrap: break-word;
}

.about-hero-description {
    margin: 0 0 clamp(24px, calc(48 * 100vw / 1920), 48px);
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(7.5px, calc(15 * 100vw / 1920), 15px);
    line-height: clamp(12px, calc(24 * 100vw / 1920), 24px);
    letter-spacing: clamp(-0.185px, calc(-0.37 * 100vw / 1920), -0.37px);
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.about-hero-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.about-hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(18px, calc(21 * 100vw / 1920), 21px);
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    margin-top: clamp(10px, calc(21 * 100vw / 1920), 21px);
}

.about-hero-breadcrumb,
.about-hero-count {
    gap: clamp(2px, calc(3 * 100vw / 1920), 3px);
    min-width: 0;
}

.about-hero-breadcrumb .about-hero-breadcrumb-item,
.about-hero-breadcrumb a.about-hero-breadcrumb-item,
.about-hero-breadcrumb-separator,
.about-hero-count {
    color: rgba(255, 255, 255, 0.55);
    font-size: clamp(4.5px, calc(9 * 100vw / 1920), 9px);
    line-height: clamp(7px, calc(14 * 100vw / 1920), 14px);
    letter-spacing: clamp(0.9px, calc(1.8 * 100vw / 1920), 1.8px);
    text-transform: uppercase;
    text-decoration: none;
}

.about-hero-count {
    max-width: clamp(180px, calc(420 * 100vw / 1920), 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-hero-breadcrumb .about-hero-breadcrumb-item.is-active {
    color: #fafafa;
}

.about-hero-banner .banner-indicators {
    bottom: clamp(12px, calc(20 * 100vw / 1920), 20px);
}

.about-hero-banner .banner-arrows {
    padding: 0 clamp(10px, calc(17 * 100vw / 1920), 17px);
}

@media (max-width: 768px) {
    .about-hero-content {
        padding: clamp(120px, calc(180 * 100vw / 768), 180px) clamp(24px, calc(32 * 100vw / 768), 32px) 24px;
    }

    .about-hero-copy {
        min-width: 0;
    }

    .about-hero-title {
        font-size: clamp(28px, calc(40 * 100vw / 768), 40px);
        line-height: 1.05;
    }

    .about-hero-description {
        max-width: 100%;
    }
}
/* SECTION HEADING */
.section-heading {
    font-size: clamp(28px, calc(42 * 100vw / 1920), 42px);
    font-weight: 700;
    text-align: center;
    margin-bottom: clamp(48px, calc(72 * 100vw / 1920), 72px);
    color: var(--pure-black);
}

/* WHY THE INDUSTRY CHOOSES US - 娑撴挾鏁ら崘鍛扮珶鐠? 娑撳﹣绗?6px, 瀹革箑褰?80px */
.why-section {
    padding: clamp(48px, calc(96 * 100vw / 1920), 96px) clamp(140px, calc(280 * 100vw / 1920), 280px);
}

/* Why the Industry閺嶅洭顣介弽宄扮础 - 閸╄桨绨拋鎹愵吀缁?*/
.why-section .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, calc(16 * 100vw / 1920), 16px);
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, calc(48 * 100vw / 1920), 48px);
    letter-spacing: clamp(-0.36px, calc(-0.61 * 100vw / 1920), -0.61px);
    line-height: clamp(29px, calc(50.4 * 100vw / 1920), 50.4px);
    color: #171717;
    text-align: center;
    margin-bottom: clamp(36px, calc(64 * 100vw / 1920), 64px);
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, calc(252 * 100vw / 1920), 252px), 1fr));
    gap: clamp(14px, calc(24 * 100vw / 1920), 24px);
    max-width: clamp(1100px, calc(1400 * 100vw / 1920), 1400px);
    margin: 0 auto;
}

.advantage-card {
    width: clamp(150px, calc(252 * 100vw / 1920), 252px);
    height: clamp(220px, calc(370 * 100vw / 1920), 370px);
    background: #FFFFFF;
    border-radius: 16px;
    border: 2px solid #E5E5E5;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: clamp(28px, calc(48 * 100vw / 1920), 48px) clamp(18px, calc(33 * 100vw / 1920), 33px) clamp(30px, calc(53 * 100vw / 1920), 53px);
}

.advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.advantage-icon {
    width: clamp(52px, calc(88 * 100vw / 1920), 88px);
    height: clamp(52px, calc(88 * 100vw / 1920), 88px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(25px, calc(43 * 100vw / 1920), 43px);
}

.advantage-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.advantage-title {
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(11px, calc(18 * 100vw / 1920), 18px);
    letter-spacing: clamp(-0.53px, calc(-0.89 * 100vw / 1920), -0.89px);
    line-height: clamp(14px, calc(24.75 * 100vw / 1920), 24.75px);
    color: #171717;
    margin-bottom: clamp(7px, calc(12 * 100vw / 1920), 12px);
}

.advantage-desc {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(8px, calc(13 * 100vw / 1920), 13px);
    letter-spacing: clamp(-0.04px, calc(-0.08 * 100vw / 1920), -0.08px);
    line-height: clamp(12px, calc(21.13 * 100vw / 1920), 21.13px);
    color: #525252;
}

/* COMPANY INTRODUCTION - 娑撴挾鏁ら崘鍛扮珶鐠? 娑撳﹣绗?6px, 瀹革箑褰?80px */
.intro-section {
    background: linear-gradient(0deg, #737373 0%, #D9D9D9 100%);
    padding: clamp(48px, calc(96 * 100vw / 1920), 96px) clamp(140px, calc(280 * 100vw / 1920), 280px);
}

.intro-container {
    display: flex;
    gap: clamp(16px, calc(32 * 100vw / 1920), 32px);
    align-items: flex-start;
}

.intro-title {
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(16px, calc(32 * 100vw / 1920), 32px);
    letter-spacing: clamp(-0.115px, calc(-0.23 * 100vw / 1920), -0.23px);
    line-height: clamp(17.6px, calc(35.2 * 100vw / 1920), 35.2px);
    color: #171717;
    text-align: left;
    margin-top: clamp(18px, calc(36 * 100vw / 1920), 36px);
    margin-bottom: clamp(32px, calc(64 * 100vw / 1920), 64px);
}

.intro-text {
    font-size: clamp(14px, calc(17 * 100vw / 1920), 17px);
    line-height: 1.65;
    color: var(--dark-grey);
}

.intro-text-main {
    margin-bottom: clamp(20px, calc(32 * 100vw / 1920), 32px);
}

.intro-highlights {
    list-style: none;
    margin-bottom: clamp(28px, calc(44 * 100vw / 1920), 44px);
}

.intro-highlights li {
    font-size: clamp(13px, calc(16 * 100vw / 1920), 16px);
    color: var(--dark-grey);
    padding: clamp(10px, calc(16 * 100vw / 1920), 16px) 0;
    border-bottom: 1px solid var(--light-grey);
    line-height: 1.55;
}

.intro-highlights li:last-child {
    border-bottom: none;
}

.intro-highlights strong {
    color: var(--pure-black);
    font-weight: 700;
}

.intro-block:first-of-type {
    margin-bottom: clamp(22px, calc(44 * 100vw / 1920), 44px);
}

.intro-block:last-of-type {
    margin-bottom: clamp(49px, calc(98 * 100vw / 1920), 98px);
}

.intro-block-title {
    display: flex;
    align-items: center;
    gap: clamp(6px, calc(10 * 100vw / 1920), 10px);
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(6px, calc(12 * 100vw / 1920), 12px);
    letter-spacing: clamp(1.44px, calc(2.88 * 100vw / 1920), 2.88px);
    line-height: clamp(9px, calc(18 * 100vw / 1920), 18px);
    color: #D9300A;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: clamp(8px, calc(16 * 100vw / 1920), 16px);
}

.intro-block-dot {
    width: clamp(4px, calc(8 * 100vw / 1920), 8px);
    height: clamp(4px, calc(8 * 100vw / 1920), 8px);
    background-color: #D9300A;
    border-radius: 50%;
    flex-shrink: 0;
}

.intro-block-text {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, calc(16 * 100vw / 1920), 16px);
    letter-spacing: clamp(-0.08px, calc(-0.15 * 100vw / 1920), -0.15px);
    line-height: clamp(19.2px, calc(26.4 * 100vw / 1920), 26.4px);
    color: #404040;
}

.partner-logos {
    display: flex;
    align-items: center;
    gap: clamp(20px, calc(32 * 100vw / 1920), 32px);
    margin-top: clamp(49px, calc(98 * 100vw / 1920), 98px);
    width: clamp(272px, calc(544 * 100vw / 1920), 544px);
    height: clamp(42px, calc(84 * 100vw / 1920), 84px);
}

.partner-logos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
    width: 2px;
    height: clamp(36px, calc(52 * 100vw / 1920), 52px);
    background-color: var(--light-grey);
}

.intro-left {
    flex: 1;
    min-width: 0;
}

.intro-right {
    position: relative;
    width: clamp(392px, calc(784 * 100vw / 1920), 784px);
    height: clamp(347.5px, calc(695 * 100vw / 1920), 695px);
    border-radius: clamp(3px, calc(6 * 100vw / 1920), 6px);
    overflow: hidden;
    flex-shrink: 0;
}

.intro-section .intro-right .intro-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CAPACITY STATS SECTION - 鐟曞棛娲婇柅姘辨暏閺嶅嘲绱? 娑撳﹣绗?6px, 瀹革箑褰?80px */
.capacity-section {
    padding: clamp(48px, calc(96 * 100vw / 1920), 96px) clamp(140px, calc(280 * 100vw / 1920), 280px) !important;
    background-color: #FFFFFF !important;
}

.capacity-section .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, calc(16 * 100vw / 1920), 16px);
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, calc(48 * 100vw / 1920), 48px);
    letter-spacing: clamp(-0.36px, calc(-0.61 * 100vw / 1920), -0.61px);
    line-height: clamp(29px, calc(50.4 * 100vw / 1920), 50.4px);
    color: #171717;
    text-align: center;
    margin-bottom: clamp(28px, calc(56 * 100vw / 1920), 56px);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(180px, calc(260 * 100vw / 1920), 260px), 1fr));
    gap: clamp(32px, calc(56 * 100vw / 1920), 56px);
    max-width: clamp(1100px, calc(1300 * 100vw / 1920), 1300px);
    margin: 0 auto;
    text-align: center;
}

.stat-box {
    padding: clamp(24px, calc(40 * 100vw / 1920), 40px) clamp(16px, calc(28 * 100vw / 1920), 28px);
}

.stat-prefix {
    display: block;
    font-size: clamp(11px, calc(14 * 100vw / 1920), 14px);
    font-weight: 700;
    color: var(--safety-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: clamp(8px, calc(14 * 100vw / 1920), 14px);
}

.stat-value-group {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(4px, calc(8 * 100vw / 1920), 8px);
    flex-wrap: wrap;
}

.stat-big-num {
    font-size: clamp(48px, calc(72 * 100vw / 1920), 72px);
    font-weight: 900;
    color: var(--pure-black);
    line-height: 1;
}

.stat-small-num {
    font-size: clamp(28px, calc(42 * 100vw / 1920), 42px);
    font-weight: 700;
    color: var(--pure-black);
    line-height: 1;
}

.stat-mid-text {
    font-size: clamp(32px, calc(48 * 100vw / 1920), 48px);
    font-weight: 700;
    color: var(--pure-black);
    line-height: 1;
}

.stat-percent {
    font-size: clamp(42px, calc(64 * 100vw / 1920), 64px);
    font-weight: 900;
    color: var(--safety-red);
    line-height: 1;
}

.stat-plus-num {
    font-size: clamp(42px, calc(64 * 100vw / 1920), 64px);
    font-weight: 900;
    color: var(--pure-black);
    line-height: 1;
}

.stat-unit {
    font-size: clamp(24px, calc(36 * 100vw / 1920), 36px);
    font-weight: 700;
}

/* CAPABILITY CARDS - 03濡€虫健閸楋紕澧?*/
.capability-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(12px, calc(24 * 100vw / 1920), 24px);
    max-width: clamp(1100px, calc(1400 * 100vw / 1920), 1400px);
    margin: 0 auto;
}

.cap-card {
    width: clamp(161px, calc(322 * 100vw / 1920), 322px);
    height: clamp(197.5px, calc(395 * 100vw / 1920), 395px);
    background: #FFFFFF;
    border-radius: 16px;
    border: 2px solid #E5E5E5;
    padding: clamp(16px, calc(32 * 100vw / 1920), 32px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, calc(16 * 100vw / 1920), 16px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cap-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* 閸楋紕澧栨稉缁樼垼妫?- 閸╄桨绨拋鎹愵吀缁?*/
.cap-card-title {
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, calc(28 * 100vw / 1920), 28px);
    letter-spacing: clamp(-0.16px, calc(-0.32 * 100vw / 1920), -0.32px);
    line-height: clamp(21px, calc(42 * 100vw / 1920), 42px);
    color: #171717;
    text-align: left;
    flex-shrink: 0;
}

.cap-card-title::after {
    content: '';
    display: block;
    width: clamp(16px, calc(32 * 100vw / 1920), 32px);
    height: 1px;
    background: #D9300A;
    margin-top: clamp(8px, calc(16 * 100vw / 1920), 16px);
    flex-shrink: 0;
}

/* 閸楋紕澧栭幓蹇氬牚閺傚洦婀?- 鐏忓繑铆缁惧じ绗呴弬鐧哥礉閸╄桨绨拋鎹愵吀缁?*/
.cap-card-desc {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(7px, calc(14 * 100vw / 1920), 14px);
    color: #525252;
    text-align: left;
    margin: 0 !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
}

.cap-card-image {
    width: clamp(127px, calc(254 * 100vw / 1920), 254px);
    height: clamp(95px, calc(190 * 100vw / 1920), 190px);
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--off-white);
    margin-top: auto;
}

.cap-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cap-card:hover .cap-card-image img {
    transform: scale(1.05);
}

/* GLOBAL MAP SECTION - 閸愬懓绔熺捄? 娑撳﹣绗?6px, 瀹革箑褰?80px */
.map-section {
    background: linear-gradient(59deg, #FFFFFF 0%, #999999 100%);
    padding: clamp(48px, calc(96 * 100vw / 1920), 96px) clamp(140px, calc(280 * 100vw / 1920), 280px);
}

.map-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, calc(16 * 100vw / 1920), 16px);
    font-size: clamp(28px, calc(42 * 100vw / 1920), 42px);
    font-weight: 700;
    text-align: center;
    margin-bottom: clamp(28px, calc(56 * 100vw / 1920), 56px);
    color: var(--pure-black);
}


.map-container {
    position: relative;
    height: clamp(382.5px, calc(765 * 100vw / 1920), 765px);
    overflow: hidden;
}

.map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.map-overlay {
    position: absolute;
    top: clamp(178.5px, calc(357 * 100vw / 1920), 357px);
    left: clamp(290.5px, calc(581 * 100vw / 1920), 581px);
    width: clamp(55px, calc(110 * 100vw / 1920), 110px);
    height: clamp(25.5px, calc(51 * 100vw / 1920), 51px);
}

.map-overlay2 {
    position: absolute;
    top: clamp(227.5px, calc(455 * 100vw / 1920), 455px);
    left: clamp(198px, calc(396 * 100vw / 1920), 396px);
    width: clamp(76px, calc(152 * 100vw / 1920), 152px);
    height: clamp(23.5px, calc(47 * 100vw / 1920), 47px);
}

/* DUAL-HUB HEADING - 04濡€虫健閺嶅洭顣?*/
.dualhub-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(5px, calc(10 * 100vw / 1920), 10px);
}

.dualhub-heading .highlight-red {
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    color: #171717;
    font-size: clamp(20px, calc(40 * 100vw / 1920), 40px);
    letter-spacing: clamp(-0.215px, calc(-0.43 * 100vw / 1920), -0.43px);
    line-height: clamp(22px, calc(44 * 100vw / 1920), 44px);
}

.dualhub-heading-text {
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    color: #D9300A;
    font-size: clamp(20px, calc(40 * 100vw / 1920), 40px);
    letter-spacing: clamp(-0.215px, calc(-0.43 * 100vw / 1920), -0.43px);
    line-height: clamp(22px, calc(44 * 100vw / 1920), 44px);
}

/* DUAL-HUB CARDS - 04濡€虫健閸楋紕澧?*/
.dualhub-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(12px, calc(24 * 100vw / 1920), 24px);
    margin-top: clamp(28px, calc(56 * 100vw / 1920), 56px);
}

.hub-card-new {
    width: clamp(334px, calc(668 * 100vw / 1920), 668px);
    background: #FFFFFF;
    border-radius: 16px;
    border: 2px solid #E5E5E5;
    padding: clamp(16px, calc(32 * 100vw / 1920), 32px) clamp(16px, calc(32 * 100vw / 1920), 32px) clamp(18px, calc(36 * 100vw / 1920), 36px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, calc(16 * 100vw / 1920), 16px);
}

.hub-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hub-card-location {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(5px, calc(10 * 100vw / 1920), 10px);
    color: #A1A1A1;
    letter-spacing: clamp(1.06px, calc(2.12 * 100vw / 1920), 2.12px);
    line-height: clamp(7.5px, calc(15 * 100vw / 1920), 15px);
    text-transform: uppercase;
}

.hub-card-logo {
    width: clamp(55px, calc(110 * 100vw / 1920), 110px);
    height: clamp(25.5px, calc(51 * 100vw / 1920), 51px);
    object-fit: contain;
}

.hub-card-logo-right {
    width: clamp(82.5px, calc(165 * 100vw / 1920), 165px);
    height: clamp(25.5px, calc(51 * 100vw / 1920), 51px);
    object-fit: contain;
}

.hub-card-title {
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, calc(24 * 100vw / 1920), 24px);
    color: #D9300A;
    letter-spacing: clamp(-0.265px, calc(-0.53 * 100vw / 1920), -0.53px);
    line-height: clamp(13.8px, calc(27.6 * 100vw / 1920), 27.6px);
}

.hub-card-subtitle {
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(6px, calc(12 * 100vw / 1920), 12px);
    color: #171717;
    letter-spacing: clamp(1.08px, calc(2.16 * 100vw / 1920), 2.16px);
    line-height: clamp(9px, calc(18 * 100vw / 1920), 18px);
    text-transform: uppercase;
}

.hub-card-desc {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(7.25px, calc(14.5 * 100vw / 1920), 14.5px);
    color: #525252;
    letter-spacing: clamp(-0.095px, calc(-0.19 * 100vw / 1920), -0.19px);
    line-height: clamp(11.78px, calc(23.56 * 100vw / 1920), 23.56px);
}

.dualhub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(360px, calc(520 * 100vw / 1920), 520px), 1fr));
    gap: clamp(32px, calc(48 * 100vw / 1920), 48px);
    max-width: clamp(1100px, calc(1400 * 100vw / 1920), 1400px);
    margin: 0 auto;
}

.hub-card {
    background: var(--pure-white);
    padding: clamp(32px, calc(48 * 100vw / 1920), 48px);
    border-radius: 8px;
    border-left: 4px solid var(--safety-red);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.hub-header {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, calc(10 * 100vw / 1920), 10px);
    margin-bottom: clamp(16px, calc(24 * 100vw / 1920), 24px);
}

.hub-name {
    font-size: clamp(22px, calc(30 * 100vw / 1920), 30px);
    font-weight: 900;
    color: var(--pure-black);
}

.hub-badge {
    display: inline-block;
    font-size: clamp(10px, calc(12 * 100vw / 1920), 12px);
    font-weight: 700;
    color: var(--safety-red);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: clamp(4px, calc(8 * 100vw / 1920), 8px) clamp(10px, calc(16 * 100vw / 1920), 16px);
    background: rgba(211, 47, 47, 0.08);
    border-radius: 4px;
    width: fit-content;
}

.hub-desc {
    font-size: clamp(13px, calc(16 * 100vw / 1920), 16px);
    line-height: 1.65;
    color: var(--dark-grey);
    margin-bottom: clamp(18px, calc(28 * 100vw / 1920), 28px);
}

.hub-features {
    list-style: none;
}

.hub-features li {
    font-size: clamp(12px, calc(15 * 100vw / 1920), 15px);
    color: var(--dark-grey);
    padding: clamp(8px, calc(12 * 100vw / 1920), 12px) 0;
    padding-left: clamp(20px, calc(28 * 100vw / 1920), 28px);
    position: relative;
    line-height: 1.5;
    border-bottom: 1px solid var(--light-grey);
}

.hub-features li:last-child {
    border-bottom: none;
}

.hub-features li::before {
    content: '閴?;
    position: absolute;
    left: 0;
    color: var(--safety-red);
    font-weight: 700;
}

/* BOTTOM VALUES BANNER */
.values-banner {
    position: relative;
    height: clamp(158px, calc(316 * 100vw / 1920), 316px);
    background: url('../../assets/Our_Promise.png') center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.values-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 100%;
}

/* Our Promise kicker - 婢跺秶鏁?.section-kicker 缂佹挻鐎敍灞肩矌鐟曞棛娲婃０婊嗗 */
.values-content .section-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, calc(13 * 100vw / 1920), 13px);
    margin-bottom: 16px;
}

.values-content .kicker-line {
    width: clamp(20px, calc(32 * 100vw / 1920), 32px);
    height: 1px;
    background: #D9300A;
    flex-shrink: 0;
}

.values-content .kicker-text {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(9px, calc(11 * 100vw / 1920), 11px);
    letter-spacing: clamp(2.5px, calc(3.36 * 100vw / 1920), 3.36px);
    line-height: clamp(13px, calc(16.5 * 100vw / 1920), 16.5px);
    color: #D9300A;
    text-transform: uppercase;
}

.values-heading {
    font-family: 'Inter-SemiBold', 'Inter', sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    font-size: clamp(28px, calc(56 * 100vw / 1920), 56px);
    letter-spacing: clamp(-0.41px, calc(-0.82 * 100vw / 1920), -0.82px);
    line-height: clamp(30.8px, calc(61.6 * 100vw / 1920), 61.6px);
    text-align: center !important;
}

.values-heading-text {
    color: #FFFFFF;
}

.values-heading-separator {
    color: #D9300A;
    padding: 0 0.12em;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 1024px) {
    .intro-container {
        grid-template-columns: 1fr;
        gap: clamp(32px, calc(48 * 100vw / 1024), 48px);
    }
    
    .intro-right {
        order: -1;
    }

    .advantages-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .dualhub-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .about-nav {
        flex-direction: column;
        gap: clamp(12px, calc(16 * 100vw / 768), 16px);
        padding: clamp(12px, calc(16 * 100vw / 768), 16px) clamp(16px, calc(24 * 100vw / 768), 24px);
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(8px, calc(12 * 100vw / 768), 12px);
    }

    .nav-links a,
    .nav-links button {
        margin-left: 0;
        font-size: clamp(10px, calc(12 * 100vw / 768), 12px);
    }

    /* Banner閸濆秴绨插?- 娑撳簼楠囬崫浣稿灙鐞涖劑銆夋稉鈧懛?*/
    .product-banner-title br {
        display: none;
    }
    
    .product-banner-content {
        padding-top: clamp(calc(120 * 100vw / 1920), calc(180 * 100vw / 1920), 180px) !important;
    }

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

    .capability-grid {
        grid-template-columns: 1fr;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .partner-logos {
        flex-direction: column;
        align-items: center;
    }
}