/* ============================================
   Victoria Star - Main Stylesheet
   ============================================ */

/* --- CSS Variables --- */
:root {
    --arrow-size: 44px;
    --arrow-bg: rgba(255, 255, 255, 0.92);
    --arrow-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    --dot-size: 10px;
    --dot-gap: 8px;
    --transition-speed: 0.45s;
    --brand: #0f6fae;
    --modal-bg: #1a1a2e;
    --header-bg: #16213e;
    /* Gold/Sauna Theme */
    --gold-primary: #C9A96E;
    --gold-dark: #B8944F;
    --gold-light: #E8D5B0;
    --gold-bg: #FDF8F0;
    --gold-accent: #D4A853;

    /* Blue/Swim Spa Theme */
    --blue-primary: #5B7B8A;
    --blue-dark: #4A6B7A;
    --blue-light: #8BA5B5;
    --blue-bg: #F0F5F8;
    --blue-accent: #6B8FA0;
    --blue-bg: #6688a6;
    --blue-desc: #6b89a2;
    --blue-ico: #6b89a2;
    --blue: #3a5e78;
    /* Neutral */
    --white: #FFFFFF;
    --black: #000000;
    --off-white: #FAFAFA;
    --gray-5: #f6f8f6;
    --gray-50: #f5f4f4;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Typography */
    --font-heading: 'Titillium Web', 'Playfair Display', serif;
    --font-body: 'Titillium Web', 'Lato', sans-serif;

    /* Spacing */
    --section-padding: 80px 0;
    --container-max: 1500px;
    --mincontainer-max: 1200px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-Black.woff2') format('woff2'),
        url('TitilliumWeb-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-Bold.woff2') format('woff2'),
        url('TitilliumWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-BoldItalic.woff2') format('woff2'),
        url('TitilliumWeb-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-ExtraLight.woff2') format('woff2'),
        url('TitilliumWeb-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-ExtraLightItalic.woff2') format('woff2'),
        url('TitilliumWeb-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-Italic.woff2') format('woff2'),
        url('TitilliumWeb-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-Light.woff2') format('woff2'),
        url('TitilliumWeb-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-LightItalic.woff2') format('woff2'),
        url('TitilliumWeb-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-Regular.woff2') format('woff2'),
        url('TitilliumWeb-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-SemiBold.woff2') format('woff2'),
        url('TitilliumWeb-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-SemiBoldItalic.woff2') format('woff2'),
        url('TitilliumWeb-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}


/* --- Reset & Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--gray-700);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--white);
    background: url('../images/9.3.png') no-repeat;
    background: unset;
    max-width: 2000px;
    margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--blue);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
}

.blue-desc {
    color: var(--blue-desc);
}

.py-5 {
    padding-top: 129px !important;
    padding-bottom: 90px !important;
}

.py-4 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.bg-1 {
    padding-top: 76px;
    padding-bottom: 76px;
    position: relative;

}

.bg-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/bg-1.png') repeat-x;
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
    /* 不影响点击 */
}

.bg-1>* {
    position: relative;
    z-index: 1;
    /* 确保内容在背景之上 */
}
















.bg-about {
    background: url('../images/bg-about.png');
    background-size: cover;
}


.container-custom {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;
}

.container-custom-mincontainer {
    max-width: 1230px !important;
}

.navbar-victoria-box {
    position: relative;
    height: 0;
    line-height: 0;
    width: 100%;
}

/* --- Navigation --- */
.navbar-victoria {
    background: rgba(102, 136, 166, 0.08);
    padding: 0;
    transition: all var(--transition-normal);
    z-index: 1000;
    box-sizing: border-box;
    flex-wrap: wrap;
    background: rgba(102, 136, 166, 0.9);
    box-shadow: 0 10px 10px rgba(4, 4, 4, 0.47);
    position: absolute;
}

.navbar-victoria .nav-top {
    width: 100%;
    background: var(--blue);
    display: flex;
    color: #fff;
    height: 58px;
    line-height: 58px;
}

.navbar-victoria .nav-top .container-custom {
    justify-content: space-between;
}

.nav-top-right {
    display: flex;
    gap: 100px;
}

.nav-top-item {
    display: flex;
    gap: 10px;
}

.nav-top-item .bi:before {
    color: var(--blue-ico);
}



.index-body .navbar-victoria {
    background: rgba(102, 136, 166, 0);
    box-shadow: unset;
}

.logo1 {
    display: none;
}

.index-body .logo1 {
    display: inline-block;
}

.index-body .logo2 {
    display: none;
}

.navbar-victoria.scrolled .logo1 {
    display: none;
}

.navbar-victoria.scrolled .logo2 {
    display: inline-block;
}


.index-body .navbar-victoria.scrolled .logo1 {
    display: none;
}

.index-body .navbar-victoria.scrolled .logo2 {
    display: inline-block;
}






.navbar-victoria .container-custom {
    display: flex;
    box-sizing: border-box;
    overflow: visible;
}


.index-body .navbar-victoria.scrolled {
    background: rgba(102, 136, 166, 0.9);
    box-shadow: 0 10px 10px rgba(4, 4, 4, 0.47);
}

.navbar-victoria.scrolled {
    position: fixed;
    background: rgba(102, 136, 166, 0.9);
    box-shadow: 0 10px 10px rgba(4, 4, 4, 0.47);
}




.navbar-victoria .navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.navbar-victoria .navbar-brand img {
    margin-top: 5px;
}

.navbar-victoria .navbar-brand .brand-logo {
    width: 36px;
    height: 36px;
}

.navbar-victoria .navbar-brand .brand-text {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: 1px;
}

.navbar-victoria .nav-link {
    font-size: 16.5px;
    font-weight: 400;
    color: var(--white);
    padding: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 7px;
    position: relative;
    transition: color var(--transition-fast);
}

.navbar-victoria .nav-link:hover,
.navbar-victoria .nav-link.active {
    color: var(--blue);
}

.navbar-victoria .nav-link::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--blue);
    transition: width var(--transition-normal);
}

.navbar-victoria .nav-link:hover::after,
.navbar-victoria .nav-link.active::after {
    width: 100%;
}

.navbar-victoria .nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.navbar-victoria .nav-icons a {
    color: var(--white);
    font-size: 1.1rem;
    transition: color var(--transition-fast);
    display: inline-block;
}


.navbar-victoria .nav-icons .language_select a {}

.navbar-victoria .nav-icons a img {
    margin-top: 6px;
}

.navbar-victoria .nav-icons .language_select a:hover {
    background: #7c94a1;
}

.navbar-victoria .nav-icons .alibaba-link {
    font-size: 15px;
    margin-top: 6px;
}

.navbar-victoria .nav-icons .feishu {
    margin-left: 23px;
    margin-right: -9px;
    margin-top: 1px;
}

.navbar-victoria .nav-icons .instragram {
    margin-right: -7px;
    margin-top: 2px;
}

.navbar-victoria .nav-icons .yotube {
    margin-right: -4px;
}

.navbar-victoria .nav-icons .huaban {
    margin-right: 3px;
}

.navbar-victoria .nav-icons .nav-icons-dian i {
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 50%;
    background: #fff;
    margin-right: 2px;
    margin-top: 7px;
}


.navbar-collapse {
    gap: 48px;
}

.navbar-nav {
    gap: 48px;
    height: 100%;
}


/* Mega Menu - Full Width Dropdown */
.nav-item.has-dropdown {
    position: static;
    height: 100%;
    align-items: center;
    display: flex;
}

.nav-item.has-dropdown>.nav-link:nth-child(n+2) {
    display: none;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100%;
    max-width: 1200px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 998;
    pointer-events: none;
}

.nav-item.has-dropdown:hover>.mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
    pointer-events: auto;
}


.mega-menu .mega-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.mega-menu .mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
}

.mega-menu .mega-list li {
    margin: 0;
    padding: 0;
}

.mega-menu .mega-list li a {
    display: block;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 400;
    color: var(--white);
    white-space: nowrap;
    transition: all var(--transition-fast);
    border-radius: 5px;
}

.mega-menu .mega-list li a:hover {
    color: var(--gold-light);
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile Nav */
.navbar-toggler {
    border: none;
    padding: 8px;
    margin-right: 10px;
    position: relative;
    z-index: 1001;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: none;
    position: relative;
    width: 24px;
    height: 2px;
    background: var(--gray-900);
    display: block;
    transition: all 0.3s ease;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--gray-900);
    left: 0;
    transition: all 0.3s ease;
}

.navbar-toggler .navbar-toggler-icon::before {
    top: -7px;
}

.navbar-toggler .navbar-toggler-icon::after {
    top: 7px;
}

/* X state when menu is open */
.navbar-toggler.menu-open .navbar-toggler-icon {
    background: transparent;
}

.navbar-toggler.menu-open .navbar-toggler-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.navbar-toggler.menu-open .navbar-toggler-icon::after {
    top: 0;
    transform: rotate(-45deg);
}


/* Banner Video Container */
.hero-banner {
    position: relative;
    padding-bottom: 0;
}

/* Banner Video Container */
.banner-video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-section-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 10;
}

.video-section-box .hero-content {
    padding-bottom: 100px;
}

.video-section-box h1 {
    max-width: 1050px;
    color: var(--white);
    font-size: 45px;
    line-height: 68px;
    margin-bottom: 0;
}

.video-section-box .btn {
    margin-top: 30px;
}


.video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/*恢复*/
.video-wrapper.loaded {
    opacity: 1;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 隐藏视频控制栏 */
    controls: false;
}

/* 确保视频不显示原生控制栏 */
.video-wrapper video::-webkit-media-controls {
    display: none !important;
}

.video-wrapper video::-webkit-media-controls-enclosure {
    display: none !important;
}


.video-introduce {
    position: absolute;
    left: 50%;
    bottom: 100px;
    width: 260px;
    margin-left: -130px;
    z-index: 3;
}

.video-introduce-item {
    width: 260px;
    height: 60px;
    background: rgba(35, 80, 110, 0.5);
    text-align: center;
    line-height: 60px;
    border-radius: 5px;
    color: #fff;
    font-size: 30px;
}






/* --- Hero Section --- */
.hero-section {
    position: relative;
    height: 816px;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    top: 58px;
    margin-bottom: 74px;
}

.index-body .hero-section {
    top: 0;
}



.hero-section-bottom {
    align-items: end;
    min-height: 300px;
    height: 450px !important;
}


.hero-section-bottom .hero-content {
    position: relative;
    z-index: 1;
    color: var(--white);
    max-width: 1000px;
    padding-bottom: 65px;
}

.proarea-hero-section {
    min-height: 245px;
    height: 245px !important;
}

.proarea-hero-section .hero-content {
    padding-bottom: 0;
}



.hero-section .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-section .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 0;
}



.hero-section .hero-content h1 {
    color: var(--white);
    font-size: 4.5rem;
    font-weight: 700 !important;
    margin-top: 221px;
    padding-left: 5px;
    margin-bottom: 26px;
}

.hero-section .hero-content .btn-primary {
    padding: 11px 46px;
    font-size: 1.5rem;
}


.hero-section .hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.breadcrumb {
    color: var(--gray-700);
    font-size: 1.2rem;
}

.breadcrumb a {
    color: var(--blue-dark);
}





/* --- Buttons --- */
.btn-gold {
    background: var(--blue-desc);
    color: var(--white);
    border: none;
    padding: 8px 51px;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-gold:hover {
    background: var(--blue-dark) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
}

.btn-blue {
    background: var(--blue-primary);
    color: var(--white);
    border: none;
    padding: 12px 32px;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-blue:hover {
    background: var(--blue-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(91, 123, 138, 0.4);
}

.btn-news {
    color: #6b89a2 !important;
    border: none;
    padding: 12px 0;
    font-size: 0.9rem;
    font-weight: 400;
    transition: all var(--transition-normal);
    cursor: pointer;
    display: flex;
    gap: 4px;
}

.btn-news:hover {
    color: var(--blue-primary);
    transform: translateY(-2px);
}

.btn-news .sp1 {
    text-decoration: underline;
}

.btn-news .sp2 {
    border-left: 4px solid #6b89a2;
    border-top: 8px solid #fff;
    border-bottom: 8px solid #fff;
    height: 0;
    display: inline-block;
    margin-top: 6px;
}

.btn-cases {
    color: #fff !important;
    border: none;
    padding: 12px 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 400;
    transition: all var(--transition-normal);
    cursor: pointer;
    display: inline-block;
}

.btn-cases:hover {
    color: var(--blue) !important;
    transform: translateY(-2px);
}




.btn-primary {
    background: var(--gold-primary);
    color: var(--white);
    border: none;
    padding: 12px 32px;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--gold-dark) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
}


.btn-outline-gold {
    background: transparent;
    color: var(--gold-primary);
    border: 2px solid var(--gold-primary);
    padding: 10px 30px;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-outline-gold:hover {
    background: var(--gold-primary);
    color: var(--white);
}

.btn-outline-blue {
    background: transparent;
    color: var(--blue-primary);
    border: 2px solid var(--blue-primary);
    padding: 8px 28px;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-outline-blue:hover {
    background: var(--blue-primary);
    color: var(--white);
}

/* --- Section Headers --- */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header .section-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-primary);
    margin-bottom: 10px;
}

.section-header .section-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-header .section-desc {
    font-size: 1rem;
    color: var(--gray-500);
    max-width: 600px;
    margin: 0 auto;
}

.section-header-blue .section-subtitle {
    color: var(--blue-primary);
}

/* --- Product Cards --- */
.product-card {
    background: #fcfafa;
    border-radius: 5px;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.product-card .card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.product-card .card-image-2 {
    aspect-ratio: 100 / 157;
}

.product-card-cate {
    height: 100%;
}

.product-card .card-image-cate {
    position: relative;
    overflow: hidden;
    height: 100%;
    aspect-ratio: unset;
}

.product-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.product-card .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--white);
    color: var(--gray-700);
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 5px;
    font-weight: 600;
    z-index: 9;
}

.product-card .card-body {
    padding: 11px 20px 20px 20px;
}

.product-card .card-body-cate {
    position: absolute;
    bottom: 10px;
}



.product-card .card-title {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--gray-900);
}

.product-card .card-dimensions {
    font-size: 1.1rem;
    color: var(--gray-500);
    margin-bottom: 9px;
}








.product-card .card-specs {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    margin-bottom: 2px;
}

.product-card .card-specs .spec-item {
    text-align: center;
    flex: 1;
}

.product-card .card-specs .spec-item .spec-icon {
    font-size: 1.2rem;
    color: var(--gray-400);
    margin-bottom: 8px;
}

.product-card .card-specs .spec-item .spec-value {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.product-card2 {
    display: inline-block;
}

.hero-section .hero-content .product-card2 p {
    color: var(--gray-600) !important;
}

.product-card2 .card-specs {
    display: flex;
    justify-content: space-between;
    padding: 18px 0;
    margin-bottom: 15px;
    gap: 9px;
}

.product-card2 .card-specs .spec-item {
    text-align: left;
    flex: 1;
}

.product-card2 .card-specs .spec-item .spec-icon {
    font-size: 1.2rem;
    color: var(--gray-400);
    margin-bottom: 8px;
}

.product-card2 .card-specs .spec-item .spec-value {
    font-size: 0.95rem;
    color: var(--gray-600);
    font-weight: 500;
}















.product-card .card-actions {
    display: flex;
    gap: 10px;
}

.product-card .card-actions .btn-view {
    flex: 1;
    padding: 14px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    border-radius: 5px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.product-card .card-actions .btn-view-primary {
    background: var(--gold-primary);
    color: var(--white);
    border: none;
}

.product-card .card-actions .btn-view-primary:hover {
    background: var(--gold-dark);
}

.product-card .card-actions .btn-view-secondary {
    background: transparent;
    color: var(--gold-primary);
    border: 1px solid var(--gold-primary);
}

.product-card .card-actions .btn-view-secondary:hover {
    background: var(--gold-primary);
    color: var(--white);
}

/* Blue theme product card */
.product-card-blue .card-actions .btn-view-primary {
    background: var(--blue-primary);
}

.product-card-blue .card-actions .btn-view-primary:hover {
    background: var(--blue-dark);
}

.product-card-blue .card-actions .btn-view-secondary {
    color: var(--blue-primary);
    border-color: var(--blue-primary);
}

.product-card-blue .card-actions .btn-view-secondary:hover {
    background: var(--blue-primary);
    color: var(--white);
}


.Victoria {
    padding-bottom: 76px;
    position: relative;
}

.Victoria::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/bg-1.png') repeat-x;
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
    /* 不影响点击 */
}

.Victoria>* {
    position: relative;
    z-index: 1;
    /* 确保内容在背景之上 */
}











.Victoria .section-row {
    gap: 28px;
}

.Victoria-left {
    width: 40%;
}

.Victoria-image {
    width: 60%;
}


.Products-list-Intro {}

.Products-list-Intro-left {}

.Products-list-Intro-right {
    padding-left: 58px;
    padding-right: 80px;
}

.Products-list-Intro-right h2 {
    font-size: 3.6rem;
    font-weight: 400;
    margin-bottom: 10px;
}

.Products-list-Intro-right p {
    line-height: 28px;
}



.products-box {
    padding-top: 39px;
}

.products-box-header {}

.products-box-header .p1 {
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
}

.products-box-header h2 {
    font-size: 2.3rem;
    margin-bottom: 15px;
}

.products-box-header .p2 {
    color: #000;
}

.products-box-header-btn {
    margin-top: 45px;
    font-size: 1.3rem;
    padding: 8px 10px;
    font-weight: 400;
    border-radius: 0;
}

.products-list-box {
    padding-top: 7px;
}

.product-list-card {
    margin-bottom: 26px;
}





/* --- Category Cards --- */

.products-cates {
    padding-top: 22px;
}

.products-cates-item {
    padding-left: 16px;
    padding-right: 11px;
}

.category-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    transition: all var(--transition-normal);
    box-shadow: 0 0px 25px rgba(0, 0, 0, 0.15);
    background: url('../images/bg-2.png');
    background-size: cover;
    padding-top: 27px;
    padding-bottom: 20px;
    text-align: center;
}

.category-card:hover {
    transform: translateY(-5px);
}


.category-image-container {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 35px auto;
    margin-top: 0;
}

.category-image-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform var(--transition-slow);
}

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

.category-content p {
    color: #272828;
    font-size: 16px;
    line-height: 26px;
    padding-top: 3px;
}

.category-content .btn-gold {
    padding: 8px 20px;
    font-size: 18.5px;
    margin-top: 10px;
    margin-bottom: 8px;
}

.category-card .category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 20px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: var(--white);
}

.category-card h3 {
    color: var(--blue);
    font-size: 33px;
    font-weight: 400;
    text-transform: uppercase;
}


.section-row {
    display: flex;
    align-items: stretch;
    /* 左右等高 */
    gap: 40px;
}

.section-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 上下居中 */
}

.section-image {
    flex: 1;
}

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

.enhancements {
    padding: 82px 30px;
    padding-right: 0;
}

.enhancements-row {
    display: flex;
    align-items: stretch;
    /* 左右等高 */
    gap: 10px;
}

.section-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 上下居中 */
}

.enhancements-row img {
    width: 298px;
    aspect-ratio: 1 / 1;
    max-width: 100%;
}

.enhancements-img {
    background: url('../images/bg-3.png') 80px center no-repeat;
    background-size: cover;
    min-height: 600px;
    flex: 1;
}

.victoria-star-item img {
    width: 50px;
}


.victoria-star-list {
    display: grid;
    grid-template-columns: 1.6fr 1.1fr 1.2fr 1.1fr 1fr;
    gap: 10px;
}



.victoria-star-item {
    display: flex;
    margin-top: 25px;
}

.victoria-star-item div {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
}

.victoria-star-item span {
    display: inline-block;
    line-height: 60px;
    padding-left: 15px;
    font-weight: 300;
    font-size: 18px;
}



.bg-4 {
    position: relative;

}

.bg-4::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/bg-1.png') repeat-x;
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
    /* 不影响点击 */
}

.bg-4>* {
    position: relative;
    z-index: 1;
    /* 确保内容在背景之上 */
}

.bg-5 {
    background: url('../images/bg-5.png') repeat-x;
}


.bg-9 {
    position: relative;
}

.bg-9::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/bg-9.png') repeat-x;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
    /* 不影响点击 */
}

.bg-9>* {
    position: relative;
    z-index: 1;
    /* 确保内容在背景之上 */
}

.bg-11 {
    background: url('../images/bg-11.png') 0 -45px no-repeat;
    background-size: cover;
}

.bg-12 {
    background: url('../images/bg-11.png') 0 -45px no-repeat;
    background-size: cover;
}

.bg-accessories {
    background: url('../images/accessories-bg.png') center top no-repeat;
}


.Premium-Warrant {
    margin: 0 30px auto;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 70px;
}
.Premium-Warrant-right{
    padding: 20px 140px;
    border-radius: 12px;
}

.Premium-Warrant-item {
    background: rgba(58, 94, 120, 0.1);
    padding: 15px 30px 15px 17px;
    border-radius: 5px;
}



.Working-Scenario img {
    aspect-ratio: 190 / 140;
    border-radius: 5px;
    width: 100%;
}





/* 图片组容器 */
.hover-gallery {
    padding-right: 100px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}



.REDEFINING-WELLNESS {
    margin-bottom: 150px;
    padding-top: 46px;
}

.REDEFINING-WELLNESS2 {
    margin-bottom: 145px;
}

.REDEFINING-WELLNESS h2 {
    font-size: 1.25rem;
    margin-bottom: 13px;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.REDEFINING-WELLNESS h2 span {
    color: #6b89a2;
}



.REDEFINING-WELLNESS h3 {
    font-size: 2.75rem;
    color: #fff;
}

.REDEFINING-WELLNESS p {
    max-width: 800px;
    margin: 0 auto;
    line-height: 34px;
    font-size: 1.3rem;
    color: #fcfdfd;
    padding-bottom: 21px;
}

.REDEFINING-WELLNESS span {
    font-size: 1.02rem;
    color: #fcfdfd;
}

.REDEFINING-WELLNESS a {
    background: unset;
    border: 1px solid #fff;
    color: #fff;
    font-size: 1.1rem;
    padding: 6px 38px;
    border-radius: 25px;
}

















.detail-tabs a {
    color: var(--white);
}



/* Detail Tabs - Horizontal Scroll on Mobile/Tablet */
.detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    line-height: 76px;
    height: 78px;
}

.detail-tabs .container-custom {
    min-width: max-content;
}

.detail-tabs .d-flex {
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 15px;
    font-size: 1.4rem;
}

.detail-tabs .tab-link {
    white-space: nowrap;
    font-weight: 700;
    position: relative;
}

.detail-tabs .tab-link-ico {
    color: #fff;
    font-weight: 400;
}

.detail-tabs .tab-link.active:after {
    content: "";
    width: 100%;
    height: 2px;
    line-height: 2px;
    overflow: hidden;
    position: absolute;
    top: 55px;
    left: 0;
    background: #fff;
}


/* Hide scrollbar for cleaner look */
.detail-tabs::-webkit-scrollbar {
    height: 0;
    display: none;
}

.detail-tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.Colors {
    padding-top: 35px;
}

.Colors .big-img {
    height: 520px
}

.Colors .color-options-row {
    padding: 0 220px 0 220px;
}

.Colors .color-group h6 {
    font-size: 1.22rem;
    margin-bottom: 22px;
}

.Colors .color-swatch-clickable img {
    width: 74px;
    height: 74px;
    border-radius: 5px;
}

.Colors .color-swatch-clickable span {
    display: block;
    padding-top: 16px;
    text-align: center;
    color: var(--gold-primary);
}

.Colors .color-swatch-clickable {
    border-radius: 5px;
    border: 0;
}

.Colors .color-group-list {
    gap: 35px;
}



.Colors .color-swatch-clickable:hover,
.Colors .color-swatch-clickable.active {
    border: 0;
}

.Colors .color-swatch-clickable:hover img,
.Colors .color-swatch-clickable.active img {
    border: 2px solid;
    border-color: var(--gold-primary);
}


.Colors-box {
    padding-top: 12px
}

.Colors-box .p1 {
    font-size: 1.3rem;
    letter-spacing: 2px;
    color: var(--blue-desc);
    margin-bottom: 24px;
}

.Colors-box .h2-1 {
    font-size: 2.45rem;
    color: var(--blue-desc);
    font-weight: 400;
}

.Colors-box .h2-2 {
    color: var(--blue);
    font-size: 2.45rem;
    font-weight: 400;
}


.Colors-box .big-img {
    max-width: 100%;
    height: 415px;
}

.Colors-box .big-img-2 {
    height: 404px;
}



.Massage {
    padding-top: 20px;
    padding-bottom: 155px;
}

.Massage-box {
    padding: 0 0;
}


.Massage-box .row>* {
    margin-top: 0;
}




.breadcrumb-box {
    position: absolute;
    top: 100px;
    width: 100%;
}

.breadcrumb-product2 {
    padding-left: 100px;
}

.breadcrumb-product2 a {
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: underline;
    color: var(--gold-accent);
}


.breadcrumb-product2 span {
    font-size: 1.4rem;
    padding-left: 10px;
}







.hero-section .container-custom-product2 .hero-content {
    max-width: 100%;
    justify-content: flex-end;

}

.hero-section .container-custom-product2 .detail-hero-info {
    background: rgba(255, 255, 255, .5);
    padding: 40px 50px;
    border-radius: 5px;
    min-height: 445px;
    width: 50%;
}

.hero-section .container-custom-product2 .hero-content h1 {
    margin-top: 0;
    font-size: 2.6rem;
    color: var(--gold-dark);
    margin-bottom: 12px;
}

.hero-section .container-custom-product2 .hero-content p {
    color: var(--gray-800);
    line-height: 28px;
    font-size: 1.05rem;
    min-height: 130px;
}

.hero-section .container-custom-product2 .hero-content p.card-dimensions {
    min-height: auto;
}

.product-card2 p {
    font-size: 1.7rem !important;
    line-height: 42px !important;
}

.product-card2 img {
    width: 42px;
}


.Make-It-Yours {
    padding-top: 142px;
}

.Make-It-Yours p {
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: var(--gold-primary);
    margin-bottom: 8px;
}

.Make-It-Yours h2 {
    font-size: 2.75rem;
    color: var(--gold-primary);
    font-weight: 400;
}



.RedefiningWellness {
    padding-bottom: 135px;
}

.business_partner {
    margin-top: -160px;
    height: 182px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #fff;
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.25);
    margin-bottom: 60px;
    border-radius: 10px;
}

.business_partner_item {
    text-align: center;
}

.business_partner_item div {
    background: url('../images/business_partner-bg.png') no-repeat;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    width: 120px;
    margin: 0 auto;
}


/* 单个卡片 */
.hover-gallery-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.4s ease, flex 0.4s ease;
}

/* 图片 */
.hover-gallery-item img {
    display: block;
    transition: transform 0.4s ease;
}

/* 遮罩层（默认隐藏） */
.hover-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    pointer-events: none;
}

/* 底部标签 */
.hover-gallery-item .label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* ===== 核心 hover 效果 ===== */

/* 容器 hover 时，非 hover 的项：缩小 + 加遮罩 */
.hover-gallery:hover .hover-gallery-item:not(:hover) {
    transform: scale(0.95);
}

.hover-gallery:hover .hover-gallery-item:not(:hover)::after {
    background: rgba(0, 0, 0, 0.45);
}

/* 当前 hover 的项：放大图片 */
.hover-gallery-item:hover img {
    transform: scale(1.5);
}

/* 当前 hover 项浮在其他项上方 */
.hover-gallery-item:hover {
    transform: scale(1.5);
    z-index: 2;
}



.nav-card-box-top {
    margin-top: 74px;
    margin-bottom: 208px !important;
}

.nav-card-box {
    margin-bottom: 59px;
}

.nav-card {
    position: relative;
    padding: 35px 26px 35px 26px;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.nav-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/bg-12.png') repeat-x;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
    /* 不影响点击 */
}

.nav-card>* {
    position: relative;
    z-index: 1;
    /* 确保内容在背景之上 */
}

.nav-card-list {}

.nav-links-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    margin-bottom: 10px;
}

.nav-links-list li {
    line-height: 38px;
}

.nav-links-list a {
    color: var(--blue-desc);
}


.nav-card-right {
    padding-left: 58px
}

.nav-card-right img {
    width: 100%;
    border-radius: 5px;
    height: 376px;
    object-fit: cover;
}


.nav-card h4 {
    color: var(--blue-dark);
    margin-bottom: 39px;
    margin-top: 5px;
}


.nav-card h6 {
    color: var(--blue-primary);
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1.3rem;
}














.learn img {
    border-radius: 5px;
}

.learn-cont:nth-child(odd) {
    padding-right: 60px;
}

.learn-cont:nth-child(even) {
    padding-left: 60px;
}

.Showroom-img {
    padding: 50px;
}

.Showroom-img img {
    border-radius: 5px;
}

.Showroom-cont {
    padding: 50px;
}











/* --- Filter Section --- */
.filter-section {
    background: url('../images/bg-7.png') no-repeat;
    background-size: cover;
    padding: 45px 30px 30px 30px;
    border-radius: 5px;
    min-height: 366px;
}

.filter-section-primary {
    background: url('../images/bg-8.png') no-repeat;
    background-size: cover;
}

.filter-section-head>* {
    margin-top: 0;
}

.filter-section-head {
    padding-top: 30px;
}

.filter-section .filter-title {
    font-size: 1rem;
    padding-left: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.filter-section .filter-group {
    margin-bottom: 20px;
}

.filter-section .filter-group h5 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.filter-section-primary .filter-title {
    color: var(--gold-primary);
}


.filter-section-primary .filter-group h5 {
    color: var(--gold-dark);
}



.filter-section .filter-group .form-check {
    margin-bottom: 8px;
}

.filter-section .filter-group .form-check-label {
    font-size: 0.85rem;
    color: var(--gray-900);
    cursor: pointer;
}

.filter-section .search-box {
    position: relative;
    padding: 5px 48px 0 78px;
    display: block;
}

.filter-section .search-box input {
    width: 100%;
    padding: 7px 40px 7px 35px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--transition-fast);
    background: rgba(58, 94, 120, 0.12);
    color: #6b89a2;
}

.filter-section .search-box input::placeholder {
    color: #6b89a2;
}


.filter-section-primary .search-box input {
    background: rgba(203, 167, 104, 0.08);
}

.filter-section .search-box input:focus {
    border-color: var(--blue);
}


.filter-section-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.filter-section-filters>* {
    margin-top: 0;
}

.filter-section-filters-item {
    padding-top: 23px;
    flex: 1 1 0;
    min-width: 0;
}


.filter-section-filters-item-1 {
    padding-left: 108px;
}

.search-series-box {
    padding: 5px 48px 0 78px;
}

.search-series {
    background: rgba(255, 255, 255, .5);
    min-height: 230px;
    padding-left: 35px;
    display: none;
}

.search-series div {
    line-height: 40px;
    color: #b5b3b3;
}

/* --- FAQ Section --- */
.faq-section {
    padding: var(--section-padding);
}

.faq-section .faq-item {}

.faq-section .faq-question {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gray-800);
    transition: color var(--transition-fast);
    padding: 15px 20px;
    line-height: 30px;
}

.faq-section .faq-question:hover {
    color: var(--blue);
}

.faq-section .faq-question .faq-icon {
    font-size: 2.2rem;
    transition: transform var(--transition-normal);
    color: #000;
    font-weight: 100;
    line-height: 25px;
    display: inline-block;
    height: 30px;
}

.faq-section .faq-item.active .faq-question .faq-icon {
    color: #fff;
    height: 2px;
    background: #000;
}

.faq-section .faq-answer {
    overflow: hidden;
    transition: max-height var(--transition-normal), padding var(--transition-normal);
    font-size: 1.1rem;
    color: #333;
    line-height: 1.8;
    max-height: 0;
}

.faq-section .faq-item.active .faq-answer {
    border-bottom: 1px solid #333;
    padding: 20px;
    max-height: unset;
}

/* --- CTA Section --- */
.cta-section {
    padding: 60px 0;
    text-align: center;
}

.cta-section.gold-theme {
    background: var(--gold-bg);
}

.cta-section.blue-theme {
    background: var(--blue-bg);
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.cta-section .cta-arrow {
    font-size: 1.5rem;
    margin-left: 10px;
}

/* --- Newsletter --- */
.newsletter-section {
    padding: 40px 0;
    text-align: center;
    background: var(--gray-50);
}

.newsletter-section h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.newsletter-section .newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 10px;
}

.newsletter-section .newsletter-form input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    font-size: 0.9rem;
    outline: none;
}

.newsletter-section .newsletter-form input:focus {
    border-color: var(--gold-primary);
}

.newsletter-section .newsletter-form button {
    padding: 12px 24px;
    background: var(--gray-800);
    color: var(--white);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.newsletter-section .newsletter-form button:hover {
    background: var(--gray-700);
}



.news-item-img img {
    border-radius: 5px;
}

.news-item-cont {
    padding: 10px 50px;
}




/* 容器 */
.stack-carousel {
    position: relative;
    width: 100%;
    max-width: 1600px;
    height: 500px;
    /* 根据图片比例调整 */
    margin: 0 auto;
    padding-bottom: 50px;
}

/* 卡片 */
.stack-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    /* 卡片宽度占容器百分比，自适应 */
    max-width: 1200px;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: left 0.5s ease, z-index 0s;
}

.stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stack-card .card-tag {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 圆点 */
.stack-dots {
    position: absolute;
    bottom: -72px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
}

.stack-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s;
}

.stack-dots .dot.active {
    background: #333;
}

/* ===== PC端：偏移 120px ===== */
.stack-card:nth-child(1) {
    left: 0;
    z-index: 4;
}

.stack-card:nth-child(2) {
    left: 198px;
    z-index: 3;
}

.stack-card:nth-child(3) {
    left: 386px;
    z-index: 2;
}

.stack-card:nth-child(4) {
    left: 530px;
    z-index: 1;
}


.Customise-cont {
    max-width: 600px;
    padding: 100px;
}

.Customise-cont a {
    color: var(--gold-dark);
}





/* --- Swim Spa Detail Page Styles --- */

/* Color Options Row */
.color-options-row {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
    margin-top: 30px;
    padding: 0 145px 0 112px;
}

.color-group {
    flex: 1;
}

.color-group-left {
    text-align: left;
}

.color-group-right {
    text-align: right;
    border-left: 2px solid #696969;
}


.color-group h6 {
    color: var(--blue);
    font-size: 1.13rem;
}

.color-group-list {
    gap: 40px;
}





.color-swatch-clickable {
    cursor: pointer;
    border-radius: 40px;
}

.color-swatch-clickable img {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
}

.color-swatch-clickable:hover img,
.color-swatch-clickable.active img {
    border-color: var(--blue-primary);
    transform: scale(1.02);
}

.color-swatch-clickable span {
    display: block;
    text-align: center;
}

.Massage-box {
    height: 110px;
}





.Top-View {
    padding-top: 45px;
}

.Accessories {
    padding-top: 96px;
}

.Accessories-list {
    margin-top: 75px;
}

.Accessories-list p {
    color: var(--blue-desc);
    margin-top: 20px;
    margin-left: 52px;
    font-size: 1.05rem;
    width: 225px;
}

/* Day/Night Compare */


.Day-Nigh {}




.day-night-compare {
    position: relative;
}

.day-night-container {
    position: relative;
    width: 100%;
    height: 925px;
    overflow: hidden;
    border-radius: 5px;
    /* Prevent text selection during drag */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;
}

.day-night-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.day-img {
    z-index: 1;
}

.night-img {
    z-index: 2;
    clip-path: inset(0px 100% 0px 0px);
}

.day-night-slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: var(--white);
    z-index: 3;
    transform: translateX(-50%);
    pointer-events: none;
    display: none;
}

.day-night-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    cursor: ew-resize;
}

.day-night-handle i {
    font-size: 1.2rem;
}

.day-night-handle .bi-sun {
    color: var(--blue-primary);
}

.day-night-handle .bi-moon {
    color: var(--blue-dark);
}

.day-night-compare {
    position: relative;
}

.day-night-controls {
    position: absolute;
    top: 55px;
    z-index: 999;
    width: 100%;
    padding: 0 30px;
}

.day-night-controls-box {
    max-width: 1650px;
    display: flex;
    gap: 15px;
    justify-content: space-between;
    padding-top: 10px;
}









.day-night-btn {
    padding: 0;
    border: 2px solid var(--blue-dark);
    background: unset;
    color: var(--blue-dark);
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 0;
    width: 150px;
    height: 50px;
    justify-content: space-between;
}

.day-night-btn img {
    height: 50px;
    width: 50px;
    ;
}

.day-night-btn span {
    display: inline-block;
    height: 50px;
    width: 100px;
    line-height: 50px;
    text-align: center;
    font-size: 1.5rem;
}

.Massage-Your-Way-item>* {
    padding: 0 66px;
}

.Massage-Your-Way-item img {
    width: 100%;
    border-radius: 5px;
    height: 337px;
    margin-top: 15px;
}


.Massage-Your-Way-item h4 {
    font-size: 1.09rem;
    letter-spacing: 2px;
    color: var(--blue-primary);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.Massage-Your-Way-item h3 {
    font-size: 2.25rem;
    color: var(--blue-dark);
    font-weight: 400;
    margin-bottom: 25px;
}


.Massage-Your-Way-item p {
    font-size: 1.05rem;
    line-height: 28px;
    width: 315px;
}


.Massage-Your-Way-item2 {
    padding-top: 62px;
}

.Massage-Your-Way-item2 {}

.Massage-Your-Way-item2 h4 {
    margin-top: 30px;
}




.Best-Seat {
    padding-top: 75px;
}


.Best-Seat h2 {
    font-size: 2.8rem;
    font-weight: 400;
    text-transform: uppercase;
}

.Best-Seat-img {
    margin-top: 0;
    text-align: right;
    padding-right: 15px;
}

.Best-Seat-img img {
    width: 400px;
    height: 400px;
}


.Best-Seat-cont {
    margin-top: 0;
    padding-left: 35px;
    padding-right: 220px;
}

.Best-Seat-cont p {
    color: var(--black);
    text-align: left;
}



.Best-Seat-cate {
    padding-top: 22px;
    font-size: 1.3rem;
    gap: 40px;
    font-weight: 700;
    color: var(--blue);
}

.Best-Seat-2 .Best-Seat-img img {
    height: 350px;
}

.badge-essential {
    position: relative;
    cursor: pointer;
    border-right: 1px solid #d9d9d6;
    padding-right: 40px;
    height: 40px;
}

.badge-essential-last {
    border-right: 0;
}



.badge-essential.active:after {
    content: "";
    height: 2px;
    line-height: 2px;
    overflow: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    right: 40px;
    width: calc(100% - 40px);
    background: var(--blue-dark);
}

.Best-Seat-cate b {
    color: #d9d9d6;
    padding: 0 10px;
    font-weight: 300;
}






.Best-Seat .essentials-swiper .swiper-button-prev,
.Best-Seat .essentials-swiper .swiper-button-next {
    color: var(--blue) !important;
    background: unset;
    box-shadow: unset;
}

.Best-Seat .essentials-swiper .swiper-button-prev:after,
.Best-Seat .essentials-swiper .swiper-button-next:after {
    font-size: 22px;
}

.Best-Seat .essentials-swiper .swiper-button-prev {
    left: 32px;
}

.Best-Seat .essentials-swiper .swiper-button-next {
    right: 32px;
}




.Features h2 {
    font-size: 2.8rem;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 5px;
}

.Features .row>* {
    margin-top: 25px;
    padding: 0;
}


.day-night-btn:hover,
.day-night-btn.active {
    background: var(--blue-dark);
    color: var(--white);
}

/* Specs Hidden Rows */





.spec-hidden {
    display: none;
}

.specs-table.expanded .spec-hidden {
    display: table-row;
}



.container-custom-product2 {
    padding-top: 80px;
}



/* --- Partner Section --- */
.partner-section {
    padding: 45px 0 60px 0;
    text-align: center;
    background: var(--gray-50);
}

.partner-section h3 {
    font-size: 2rem;
    margin-bottom: 32px;
    font-weight: 400;
}

.partner-section .btn-blue {
    background: var(--blue-desc);
    padding: 15px 31px;
}



.partner-section-gold {
    background: var(--gold-dark);
}

.partner-section-gold h3 {
    color: var(--white);
}

.partner-section-gold a {
    background: var(--white);
    color: var(--gold-dark);
}





/* --- Footer --- */
.footer {
    background: var(--gray-5);
    padding: 60px 0 20px;
}

.foot-cont p {
    margin-bottom: 0;
}

.footer .footer-brand .footer-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 40px;
    margin-top: 20px;
}

.footer .footer-brand .social-links {
    display: flex;
    gap: 6px;
    margin-bottom: 30px;
}

.footer .footer-brand .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.footer .footer-brand .social-links a:hover {}

.footer .footer-col {}



.footer .footer-col h5 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--blue);
}

.footer .footer-col ul {
    list-style: none;
    padding: 0;
}

.footer .footer-col ul li {
    margin-bottom: 10px;
}

.footer .footer-col ul li a {
    font-size: 1.1rem;
    color: #333;
    transition: color var(--transition-fast);
}

.footer .footer-col ul li a:hover {
    color: var(--blue);
}

.footer .footer-bottom {
    border-top: 1px solid var(--black);
    padding-top: 17px;
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #333;
}

.footer .footer-desc p {
    margin-bottom: 0;
    font-size: 0.8rem;
    color: #333;
}



.footer .footer-bottom a {
    color: #272828;
    margin-left: 15px;
}

.footer .footer-bottom a:hover {
    color: var(--blue);
}

.footer .footer-bottom div span {
    padding-left: 12px;
}

/* --- Swiper Customization --- */
.swiper-container {
    width: 100%;
    overflow: hidden;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--gray-300);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--blue);
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--blue);
}

/* --- AOS Customization --- */
[data-aos] {
    transition-timing-function: ease-out !important;
}

/* --- Hover Effects --- */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.hover-glow {
    transition: box-shadow var(--transition-normal);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.3);
}

/* --- Page Specific: Sauna Room --- */
.sauna-hero {
    background: linear-gradient(135deg, var(--gold-bg) 0%, var(--white) 100%);
}

.sauna-hero .hero-title {
    color: var(--gold-dark);
}

/* --- Page Specific: Swim Spas --- */
.swim-hero {
    background: linear-gradient(135deg, var(--blue-bg) 0%, var(--white) 100%);
}

/* --- Detail Page --- */
.detail-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
}

.detail-hero .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-hero .hero-info {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 5px;
    max-width: 500px;
    margin-left: 10%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.detail-hero .hero-info h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.detail-hero .hero-info .product-specs-inline {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.detail-hero .hero-info .product-specs-inline .spec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--gray-600);
}

/* --- Customize Section --- */
.customize-section {
    padding: var(--section-padding);
    text-align: center;
}

.customize-section .color-options {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.customize-section .color-option {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all var(--transition-fast);
    position: relative;
}

.customize-section .color-option:hover,
.customize-section .color-option.active {
    border-color: var(--gold-primary);
    transform: scale(1.1);
}

.customize-section .color-option .color-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--gray-500);
    white-space: nowrap;
}

/* --- Specs Table --- */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    padding-left: 42px;
}



.Specs {
    padding-top: 30px;
}

.Specs h3 {
    font-size: 1.85rem;
    margin-bottom: 11px;
    padding-left: 42px;
}


.specs-table table {
    border: 0;
}

.specs-table tbody,
.specs-table td,
.specs-table tfoot,
.specs-table th,
.specs-table thead,
.specs-table tr {
    border: 0;
}



.specs-table th,
.specs-table td {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 0;
    font-size: 0.9rem;
}

.specs-table th {
    font-weight: 600;
    color: var(--gray-700);
}

.specs-table td {
    color: var(--gray-600);
    background: unset;
    font-size: 1.1rem;
}


.specs-table tr:nth-child(even) {
    background: #f2f2f2;
}

.specs-list .row:nth-child(even) {
    background: #f2f2f2;
}





.specs-table strong {
    font-size: 1.05rem;
    font-weight: 700;
}


.Specs img {
    width: 100%;
    max-width: 405px;
    margin-left: 30px;
    display: block;
}

.specs-list {
    color: var(--gray-600);
    background: unset;
    font-size: 1.1rem;
    margin-top: 29px;
    padding-left: 45px;
    padding-right: 70px;
}

.specs-list div {
    height: 50px;
    line-height: 50px;
}

.spec-more {
    margin-top: 32px;
}

.spec-more .btn {
    padding: 9px 60px;
    font-size: 1.3rem;
    border-radius: 20px;
}


.Short-Video {
    padding-top: 147px;
    padding-bottom: 10px;
}

.Short-Video h2 {
    font-size: 2.7rem;
    font-weight: 400;
    text-transform: uppercase;
}

.Short-Video p {
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.video-cont-2 {
    justify-content: left !important;
}

.video-label-2 {
    font-size: 1.5rem;
    color: var(--blue-desc);
    padding-top: 10px;
}


/* --- Feature Cards --- */

.Features-list {
    padding: 0 25px;
}


.feature-card {
    padding: 30px 35px;
    border-radius: 5px;
    transition: all var(--transition-normal);
}

.feature-card:hover {
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.feature-card img {
    height: 268px;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 23px;
}

.feature-card h6 {
    font-size: 1.45rem;
}

.feature-card p {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--black);
}




.feature-card .feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.feature-card .feature-icon.gold {
    background: var(--gold-bg);
    color: var(--gold-primary);
}

.feature-card .feature-icon.blue {
    background: var(--blue-bg);
    color: var(--blue-primary);
}

.feature-card h4 {
    font-size: 1rem;
    margin-bottom: 10px;
}


/* --- Water Care Guide --- */
.guide-section {
    padding: var(--section-padding);
}

.guide-section .guide-content {
    max-width: 800px;
    margin: 0 auto;
}

.guide-section .guide-content h2 {
    font-size: 2rem;
    margin: 40px 0 20px;
    color: var(--gray-900);
}

.guide-section .guide-content h3 {
    font-size: 1.3rem;
    margin: 30px 0 15px;
    color: var(--gray-800);
}

.guide-section .guide-content p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.guide-section .guide-content ul,
.guide-section .guide-content ol {
    margin-bottom: 20px;
    padding-left: 25px;
}

.guide-section .guide-content li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.guide-section .guide-image {
    width: 100%;
    border-radius: 5px;
    margin: 30px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* --- Navigation Page --- */
.nav-page-section {
    padding: 40px 0;
    border-bottom: 1px solid var(--gray-200);
}

.nav-page-section:last-child {
    border-bottom: none;
}

.nav-page-section .nav-page-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.nav-page-section .nav-page-links h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--gray-800);
}

.nav-page-section .nav-page-links .link-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.nav-page-section .nav-page-links .link-column h5 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.nav-page-section .nav-page-links .link-column ul {
    list-style: none;
    padding: 0;
}

.nav-page-section .nav-page-links .link-column ul li {
    margin-bottom: 8px;
}

.nav-page-section .nav-page-links .link-column ul li a {
    font-size: 0.85rem;
    color: var(--gray-500);
    transition: color var(--transition-fast);
}

.nav-page-section .nav-page-links .link-column ul li a:hover {
    color: var(--gold-primary);
}

.nav-page-section .nav-page-image {
    border-radius: 5px;
    overflow: hidden;
    height: 200px;
}

.nav-page-section .nav-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Video Section --- */
.video-section {
    padding: var(--section-padding);
}

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


.video-card {
    border-radius: 5px;
    background: var(--white);
    aspect-ratio: 9/16;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 5px 15px rgba(153, 153, 153, 0.3);
    border-radius: 5px;
    overflow: hidden;
    margin-right: 15px;
    margin-bottom: 10px;
    overflow: hidden;
}

.video-card iframe {
    width: 100%;
    height: 105%;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(153, 153, 153, 0.4);
}

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

.video-card .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.video-card .video-play-icon i {
    font-size: 1.5rem;
    color: var(--blue-dark);
    margin-left: 3px;
}

.video-card:hover .video-play-icon {
    background: var(--white);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-cont {
    padding-top: 5px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.video-cont img {
    height: 60px;
}

.video-cont span {
    line-height: 60px;
}












/* ===== 全屏视频弹窗 ===== */
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--modal-bg);
    flex-direction: column;
}

.video-modal.show {
    display: flex;
}

/* 头部 */
.vm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 50px;
    flex-shrink: 0;
    background: var(--header-bg);
    color: #fff;
    font-size: .88rem;
}

.vm-header .vm-count {
    font-weight: 600;
    color: #ccc;
}

.vm-header .vm-count span {
    color: #fff;
    font-weight: 700;
}

.vm-actions {
    display: flex;
    gap: 8px;
}

.vm-actions button {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
    font-size: 1rem;
}

.vm-actions button:hover {
    background: rgba(255, 255, 255, .22);
}

.vm-actions button.vm-close {
    background: rgba(220, 53, 69, .7);
}

.vm-actions button.vm-close:hover {
    background: rgba(220, 53, 69, 1);
}

/* 视频区域 */
.vm-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0 60px;
}

.vm-body .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: .25s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.vm-body .nav-btn:hover {
    background: rgba(255, 255, 255, .28);
}

.vm-body .nav-btn:disabled {
    opacity: .25;
    cursor: not-allowed;
}

.vm-body .nav-prev {
    left: 8px;
}

.vm-body .nav-next {
    right: 8px;
}

/* 内嵌视频容器 */
.video-stage {
    max-width: 80%;
    height: 80%;
    position: relative;
    transition: transform .35s ease;
    transform-origin: center center;
}

.video-stage iframe,
.video-stage embed,
.video-stage video,
.video-stage object {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 8px;
}

.carousel-items-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-items-inner iframe,
.carousel-items-inner embed,
.carousel-items-inner video {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 8px;
}

/* 遮罩占位 */
.vm-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, .3);
}

/* 底部进度条 */
.vm-footer {
    height: 4px;
    background: rgba(255, 255, 255, .1);
    flex-shrink: 0;
}

.vm-footer .progress-bar {
    height: 100%;
    background: var(--brand);
    transition: width .3s;
}



.testimonial-list {
    padding: 32px 95px 0 95px;
}


/* --- Testimonials --- */
.Testimonials {
    background: url('../images/testimonialsbg.png') no-repeat;
    background-size: cover;
}



.testimonial-card {
    padding: 25px;
    background: #f8fafa;
    margin: 14px;
}

.testimonial-card .stars {
    color: #cba768;
    margin-bottom: 0;
    font-size: 1.2rem;
}

.testimonial-card .testimonial-text {
    font-size: 1.14rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-card .testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 12px;
}

.testimonial-card .testimonial-author .author-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--gray-300);
}

.testimonial-card .testimonial-author .author-avatar img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
}

.testimonial-card .testimonial-author .author-info h5 {
    font-size: 1.04rem;
    margin-bottom: 2px;
    color: var(--black);
}

.testimonial-card .testimonial-author .author-info span {
    font-size: 0.8rem;
    color: var(--black);
}

/* --- Case Studies --- */
.case-card {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    height: 410px;
    cursor: pointer;
}

.case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.case-card .case-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 8px 20px;
    background: rgba(58, 94, 120, 0.7);
    color: var(--white);
    border-radius: 5px;
}

.case-card .case-overlay h4 {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 0;
    font-weight: 400;
}


.Case-custom {
    padding: 0 50px;
}
















/* --- Scroll to Top --- */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--gold-primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 999;
    border: none;
    font-size: 1.2rem;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--gold-dark);
    transform: translateY(-3px);
}

/* --- Loading Animation --- */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.page-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--gold-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



/* --- Mouse Highlight Effect --- */
.mouse-highlight {
    position: relative;
    overflow: hidden;
}

.mouse-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(201, 169, 110, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
    z-index: 1;
}

.mouse-highlight:hover::before {
    opacity: 1;
}

/* --- Smooth Scroll Indicator --- */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: bounce 2s infinite;
}

.scroll-indicator .mouse {
    width: 26px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    position: relative;
}

.scroll-indicator .mouse::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    animation: scrollWheel 1.5s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes scrollWheel {
    0% {
        opacity: 1;
        top: 8px;
    }

    100% {
        opacity: 0;
        top: 20px;
    }
}

/* --- Parallax Effect --- */
.parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --- Gradient Text --- */
.gradient-text-gold {
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-blue {
    background: linear-gradient(135deg, var(--blue-primary), var(--blue-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Sauna Room Essentials Swiper --- */
.essentials-swiper {
    position: relative;
    padding: 0 50px;
}

.essentials-swiper .swiper-slide {
    padding: 20px 50px;
}

.essentials-swiper .swiper-button-prev,
.essentials-swiper .swiper-button-next {
    color: var(--gold-dark);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.essentials-swiper .swiper-button-prev:after,
.essentials-swiper .swiper-button-next:after {
    font-size: 18px;
    font-weight: bold;
}

.essentials-swiper .swiper-button-prev {
    left: 0;
}

.essentials-swiper .swiper-button-next {
    right: 0;
}






.essentials2-swiper {
    position: relative;
    padding: 0 50px;
}

.essentials2-swiper .swiper-slide {
    padding: 20px 50px;
}

.essentials2-swiper .swiper-button-prev,
.essentials2-swiper .swiper-button-next {
    color: var(--gold-dark);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.essentials2-swiper .swiper-button-prev:after,
.essentials2-swiper .swiper-button-next:after {
    font-size: 18px;
    font-weight: bold;
}

.essentials2-swiper .swiper-button-prev {
    left: 0;
}

.essentials2-swiper .swiper-button-next {
    right: 0;
}






/* --- Specs Table Striped --- */
.specs-table-striped tbody tr:nth-child(odd) {
    background-color: #f5f4f4;
}



.kefu-box {
    position: fixed;
    right: 0;
    bottom: 30%;
    width: 60px;
    height: 280px;
    z-index: 9980;
}

.kefu-box .kefu-item {
    width: 60px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    display: inline-block;
    background: rgba(102, 136, 166, 0.5);
}

.kefu-box .kefu-item:hover {
    background: rgba(102, 136, 166, 0.8);
}

.kefu-box .kefu-item img {
    max-width: 100%;
    max-height: 100%;
}





.kefu-box2 {
    position: fixed;
    right: 0;
    bottom: 10px;
    width: 76px;
    height: 76px;
}

.kefu-box2 a {
    display: inline-block;
}

.kefu-box2 a img {
    max-width: 100%;
    max-height: 100%;
}



.search-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9990;
    display: none;
}

.search-box.active {
    display: block;
}

.search-bg {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9991;
}

.search-close {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 60px;
    height: 60px;
    z-index: 9992;
    color: #fff;
    cursor: pointer;
}

.search-from {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 825px;
    margin-left: -412px;
    margin-top: -25px;
    z-index: 9999;
}

.search-from input {
    width: 825px;
    height: 50px;
    border: 3px solid var(--blue);
    border-radius: 5px;
    padding: 10px 26px;
    background: unset;
    color: #fff
}

.search-from input::placeholder {
    color: #fff;
}

.search-from button {
    position: absolute;
    right: 0;
    top: 0;
    background: unset;
    border: 0;
    height: 50px;
    width: 78px;
    font-size: 24px;
    color: #fff;
}

.choose-en {
    position: relative;
}

.choose-en .language_select {
    position: absolute;
    top: 40px;
    right: -25px;
    width: 95px;
    display: none;
    padding: 10px 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.8);
}

.choose-en:hover .language_select {
    display: inline-block;
}






.dropdown-menu-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.dropdown-menu-child-title {
    color: #23506d;
    font-size: 1.2rem;
}

.dropdown-menu-child-title .dropdown-item {
    color: #23506d;
    font-size: 1.2rem;
    font-weight: bold;
}


.dropdown-menu-child-title .dropdown-item:hover {
    color: #23506d;
}

.dropdown-menu-product {
    width: 360px;
}

.dropdown-menu-product .best-prodcut-info-right .best-prodcut-btn {
    background: #23506d;
    color: #fff;
}

.dropdown-menu-product img {
    width: 100%;
    border-radius: 5px;
}




.water {
    background: url('../images/waterbg.png') no-repeat;
}

.SaunaRoom {
    background: url('../images/SaunaRoom-bg.png') no-repeat;
}

.Showroom {
    background: url('../images/Showroom-bg.png') no-repeat;
}

.NewsView {
    background: url('../images/NewsView-bg.png') no-repeat;
}

.newlist {
    background: url('../images/newlist-bg.png') no-repeat;
    padding-top: 74px;
}

.learnlist {
    background: url('../images/learnlist-bg.png') no-repeat;
}

.FAQ {
    background: url('../images/FAQ-bg.png') no-repeat;
}

.OurFactory {
    background: url('../images/OurFactory-bg.png') no-repeat;
}

.ContactUs {
    background: url('../images/ContactUs-bg.png') no-repeat;
}

.caseview {
    background: url('../images/caseview-bg.png') no-repeat;
}

.caselist {
    background: url('../images/caselist-bg.png') no-repeat;
}

.BecomePartner {
    background: url('../images/BecomePartner-bg.png') no-repeat;
}

.accessoriesview {
    background: url('../images/accessoriesview-bg.png') no-repeat;
}


.Partner-box {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(5, 1fr);
}

.Partner-item {

    box-shadow: 0 5px 10px rgba(225, 234, 242, 0.8);
}





.ads-lang img {
    width: 100%;
}


.Victoria-left-cont {
    padding-left: 20px;
}



.contact-icon img {
    width: 42px;
    margin-left: -5px;
}

.contact-icon span {
    font-size: 17px;

}

.hours-list {
    padding-left: 0;
}











/* ==========================================================================
   Extracted Utility Classes（主模板行内样式规范化，u- 前缀避免冲突）
   ========================================================================== */

/* ---- 区块背景与内边距 ---- */
.u-sec {
    background: #fff;
}

.u-sec-gray {
    background: var(--gray-50);
}

.u-sec-white {
    background: #fff;
}

.u-sec-gold {
    background: var(--gold-bg);
}

.u-sec-blue {
    background: var(--blue-bg);
}

.u-sec-reset-bg {
    background: unset;
}

.u-sec-bg-gradient {
    background: linear-gradient(135deg, rgba(91, 123, 138, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.u-sec-bg-gradient-strong {
    background: linear-gradient(135deg, rgba(91, 123, 138, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* ---- 文本尺寸（font-size 语义映射） ---- */
.u-fs-sm {
    font-size: 0.76rem;
}

.u-fs-08 {
    font-size: 0.8rem;
}

.u-fs-09 {
    font-size: 0.9rem;
}

.u-fs-102 {
    font-size: 1.02rem;
}

.u-fs-104 {
    font-size: 1.04rem;
}

.u-fs-105 {
    font-size: 1.05rem;
}

.u-fs-106 {
    font-size: 1.06rem;
}

.u-fs-1 {
    font-size: 1rem;
}

.u-fs-11 {
    font-size: 1.1rem;
}

.u-fs-12 {
    font-size: 1.2rem;
}

.u-fs-125 {
    font-size: 1.25rem;
}

.u-fs-128 {
    font-size: 1.28rem;
}

.u-fs-14 {
    font-size: 1.4rem;
}

.u-fs-15 {
    font-size: 1.5rem;
}

.u-fs-156 {
    font-size: 1.56rem;
}

.u-fs-16_5 {
    font-size: 16.5px;
}

.u-fs-17 {
    font-size: 17px;
}

.u-fs-18 {
    font-size: 1.8rem;
}

.u-fs-19 {
    font-size: 1.9rem;
}

.u-fs-2 {
    font-size: 2rem;
}

.u-fs-21 {
    font-size: 2.1rem;
}

.u-fs-26 {
    font-size: 2.6rem;
}

.u-fs-275 {
    font-size: 2.75rem;
}

.u-fs-28 {
    font-size: 2.8rem;
}

.u-fs-286 {
    font-size: 2.86rem;
}

.u-fs-36 {
    font-size: 3.6rem;
}

.u-fs-41 {
    font-size: 41px;
}

.u-fs-395 {
    font-size: 39.5px;
}

.u-fs-583 {
    font-size: 58.3px;
}

.u-h483 {
    height: 483px;
}

.u-radius4 {
    border-radius: 4px;
}

.u-radius5 {
    border-radius: 5px;
}

.u-radius6 {
    border-radius: 6px;
}

.u-radius10 {
    border-radius: 10px;
}

.u-radius12 {
    border-radius: 12px;
}

.u-color-white {
    color: #fff;
}

.u-pos-rel {
    position: relative;
}

/* ---- 文本颜色 ---- */
.u-c-blue {
    color: var(--blue);
}

.u-c-blue-primary {
    color: var(--blue-primary);
}

.u-c-blue-dark {
    color: var(--blue-dark);
}

.u-c-blue-desc {
    color: var(--blue-desc);
}

.u-c-black {
    color: var(--black);
}

.u-c-white {
    color: #fff;
}

.u-c-desc {
    color: var(--gray-600);
}

.u-c-sub {
    color: #272828;
}

.u-c-gray-5 {
    color: var(--gray-500);
}

.u-c-gray-7 {
    color: var(--gray-700);
}

.u-c-gray-8 {
    color: var(--gray-800);
}

.u-c-gray-9 {
    color: var(--gray-900);
}

.u-c-gray-3 {
    color: var(--gray-300);
}

/* ---- 字体粗细 / 字距 / 对齐 ---- */
.u-fw-300 {
    font-weight: 300;
}

.u-fw-400 {
    font-weight: 400;
}

.u-fw-500 {
    font-weight: 500;
}

.u-fw-300 {
    font-weight: 300;
}

.u-fw-600 {
    font-weight: 600;
}

.u-fw-700 {
    font-weight: 700;
}

.u-text-center {
    text-align: center;
}

.u-maxw-900 {
    max-width: 900px;
}

.u-m-auto-t-10 {
    margin: 10px auto 0;
}

.u-fw-600 {
    font-weight: 600;
}

.u-fw-700 {
    font-weight: 700;
}

.u-tt-u {
    text-transform: uppercase;
}

.u-lsp-2 {
    letter-spacing: 2px;
}

.u-fs-16 {
    font-size: 16px;
}

.u-fs-103 {
    font-size: 1.03rem;
}

.u-fs-118 {
    font-size: 1.18rem;
}

.u-fs-2_5 {
    font-size: 2.5rem;
}

.u-maxw90 {
    max-width: 90%;
}

.u-maxw900 {
    max-width: 900px;
}

.u-w200 {
    width: 200px;
}

.u-ml-14 {
    margin-left: 14px;
}

.u-ml-15 {
    margin-left: 15px;
}

.u-ml-17 {
    margin-left: 17px;
}

.u-mr-20 {
    margin-right: 20px;
}

/* ---- 行高 ---- */
.u-lh-15 {
    line-height: 1.5;
}

.u-lh-16 {
    line-height: 1.6;
}

.u-lh-18 {
    line-height: 1.8;
}

.u-lh-26 {
    line-height: 26px;
}

.u-lh-27 {
    line-height: 27px;
}

.u-lh-28 {
    line-height: 28px;
}

.u-lh-29 {
    line-height: 29px;
}

.u-lh-32 {
    line-height: 32px;
}

/* ---- 通用间距工具（px，覆盖高频行内值） ---- */
.u-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.u-block {
    display: block;
}

.u-text-left {
    text-align: left;
}

.u-w900 {
    width: 900px;
}

.u-w720 {
    width: 720px;
}

.u-h100 {
    height: 100%;
}

.u-h546 {
    height: 546px;
}

.u-h545 {
    height: 545px;
}

.u-minh300 {
    min-height: 300px;
}

.u-overflow-hidden {
    overflow: hidden;
}

.u-object-cover {
    object-fit: cover;
}

.u-border-left-blue {
    border-left: 3px solid var(--blue);
}

.u-border-right-blue {
    border-right: 3px solid var(--blue);
}

.u-mr-12 {
    margin-right: 12px;
}

.u-pt-47 {
    padding-top: 47px;
}

.u-mb-0 {
    margin-bottom: 0;
}

.u-mb-2 {
    margin-bottom: 2px;
}

.u-mb-3 {
    margin-bottom: 3px;
}

.u-mb-5 {
    margin-bottom: 5px;
}

.u-mb-6 {
    margin-bottom: 6px;
}

.u-mb-7 {
    margin-bottom: 7px;
}

.u-mb-9 {
    margin-bottom: 9px;
}

.u-mb-10 {
    margin-bottom: 10px;
}

.u-mb-12 {
    margin-bottom: 12px;
}

.u-mb-14 {
    margin-bottom: 14px;
}

.u-mb-15 {
    margin-bottom: 15px;
}

.u-mb-18 {
    margin-bottom: 18px;
}

.u-mb-20 {
    margin-bottom: 20px;
}

.u-mb-22 {
    margin-bottom: 22px;
}

.u-mb-25 {
    margin-bottom: 25px;
}

.u-mb-27 {
    margin-bottom: 27px;
}

.u-mb-28 {
    margin-bottom: 28px;
}

.u-mb-30 {
    margin-bottom: 30px;
}

.u-mb-33 {
    margin-bottom: 33px;
}

.u-mb-34 {
    margin-bottom: 34px;
}

.u-mb-35 {
    margin-bottom: 35px;
}

.u-mb-40 {
    margin-bottom: 40px;
}

.u-mb-42 {
    margin-bottom: 42px;
}

.u-mb-43 {
    margin-bottom: 43px;
}

.u-mb-44 {
    margin-bottom: 44px;
}

.u-mb-46 {
    margin-bottom: 46px;
}

.u-mb-50 {
    margin-bottom: 50px;
}

.u-mb-65 {
    margin-bottom: 65px;
}

.u-mt-0 {
    margin-top: 0;
}

.u-mt-2 {
    margin-top: 2px;
}

.u-mt-5 {
    margin-top: 5px;
}

.u-mt-10 {
    margin-top: 10px;
}

.u-mt-12 {
    margin-top: 12px;
}

.u-mt-14 {
    margin-top: 14px;
}

.u-mt-15 {
    margin-top: 15px;
}

.u-mt-16 {
    margin-top: 16px;
}

.u-mt-20 {
    margin-top: 20px;
}

.u-mt-25 {
    margin-top: 25px;
}

.u-mt-30 {
    margin-top: 30px;
}

.u-mt-34 {
    margin-top: 34px;
}

.u-mt-36 {
    margin-top: 36px;
}

.u-mt-42 {
    margin-top: 42px;
}

.u-mt-50 {
    margin-top: 50px;
}

.u-mt-64 {
    margin-top: 64px;
}

.u-mt-77 {
    margin-top: 77px;
}

.u-mt-81 {
    margin-top: 81px;
}

.u-mt-215 {
    margin-top: 215px;
}

.u-pt-0 {
    padding-top: 0;
}

.u-pt-2 {
    padding-top: 2px;
}

.u-pt-13 {
    padding-top: 13px;
}

.u-pt-15 {
    padding-top: 15px;
}

.u-pt-20 {
    padding-top: 20px;
}

.u-pt-25 {
    padding-top: 25px;
}

.u-pt-30 {
    padding-top: 30px;
}

.u-pt-31 {
    padding-top: 31px;
}

.u-pt-34 {
    padding-top: 34px;
}

.u-pt-36 {
    padding-top: 36px;
}

.u-pt-39 {
    padding-top: 39px;
}

.u-pt-42 {
    padding-top: 42px;
}

.u-pt-45 {
    padding-top: 45px;
}

.u-pt-46 {
    padding-top: 46px;
}

.u-pt-49 {
    padding-top: 49px;
}

.u-pt-50 {
    padding-top: 50px;
}

.u-pt-54 {
    padding-top: 54px;
}

.u-pt-64 {
    padding-top: 64px;
}

.u-pt-68 {
    padding-top: 68px;
}

.u-pt-75 {
    padding-top: 75px;
}

.u-pt-76 {
    padding-top: 76px;
}

.u-pt-77 {
    padding-top: 77px;
}

.u-pt-81 {
    padding-top: 81px;
}

.u-pt-88 {
    padding-top: 88px;
}

.u-pt-95 {
    padding-top: 95px;
}

.u-pb-0 {
    padding-bottom: 0;
}

.u-pb-3 {
    padding-bottom: 3px;
}

.u-pb-10 {
    padding-bottom: 10px;
}

.u-pb-25 {
    padding-bottom: 25px;
}

.u-pb-30 {
    padding-bottom: 30px;
}

.u-pb-41 {
    padding-bottom: 41px;
}

.u-pb-42 {
    padding-bottom: 42px;
}

.u-pb-45 {
    padding-bottom: 45px;
}

.u-pb-46 {
    padding-bottom: 46px;
}

.u-pb-50 {
    padding-bottom: 50px;
}

.u-pb-64 {
    padding-bottom: 64px;
}

.u-pb-68 {
    padding-bottom: 68px;
}

.u-pb-76 {
    padding-bottom: 76px;
}

.u-pb-77 {
    padding-bottom: 77px;
}

.u-pb-79 {
    padding-bottom: 79px;
}

.u-pb-106 {
    padding-bottom: 106px;
}

.u-pb-117 {
    padding-bottom: 117px;
}

.u-pl-0 {
    padding-left: 0;
}

.u-pl-3 {
    padding-left: 3px;
}

.u-pl-4 {
    padding-left: 4px;
}

.u-pl-5 {
    padding-left: 5px;
}

.u-pl-10 {
    padding-left: 10px;
}

.u-pl-11 {
    padding-left: 11px;
}

.u-pl-12 {
    padding-left: 12px;
}

.u-pl-15 {
    padding-left: 15px;
}

.u-pl-16 {
    padding-left: 16px;
}

.u-pl-17 {
    padding-left: 17px;
}

.u-pl-18 {
    padding-left: 18px;
}

.u-pl-19 {
    padding-left: 19px;
}

.u-pl-20 {
    padding-left: 20px;
}

.u-pl-22 {
    padding-left: 22px;
}

.u-pl-29 {
    padding-left: 29px;
}

.u-pl-30 {
    padding-left: 30px;
}

.u-pl-33 {
    padding-left: 33px;
}

.u-pl-35 {
    padding-left: 35px;
}

.u-pl-40 {
    padding-left: 40px;
}

.u-pl-42 {
    padding-left: 42px;
}

.u-pl-45 {
    padding-left: 45px;
}

.u-pl-49 {
    padding-left: 49px;
}

.u-pl-50 {
    padding-left: 50px;
}

.u-pl-52 {
    padding-left: 52px;
}

.u-pl-54 {
    padding-left: 54px;
}

.u-pl-74 {
    padding-left: 74px;
}

.u-pl-76 {
    padding-left: 76px;
}

.u-pl-81 {
    padding-left: 81px;
}

.u-pl-115 {
    padding-left: 115px;
}

.u-pr-0 {
    padding-right: 0;
}

.u-pr-5 {
    padding-right: 5px;
}

.u-pr-6 {
    padding-right: 6px;
}

.u-pr-10 {
    padding-right: 10px;
}

.u-pr-12 {
    padding-right: 12px;
}

.u-pr-15 {
    padding-right: 15px;
}

.u-pr-16 {
    padding-right: 16px;
}

.u-pr-18 {
    padding-right: 18px;
}

.u-pr-19 {
    padding-right: 19px;
}

.u-pr-20 {
    padding-right: 20px;
}

.u-pr-29 {
    padding-right: 29px;
}

.u-pr-30 {
    padding-right: 30px;
}

.u-pr-37 {
    padding-right: 37px;
}

.u-pr-100 {
    padding-right: 100px;
}

.u-p-0 {
    padding: 0;
}

.u-p-0-5 {
    padding: 0 5px;
}

.u-p-8-16 {
    padding: 8px 16px;
}

.u-p-8-29 {
    padding: 8px 29px;
}

.u-p-8-30 {
    padding: 8px 30px;
}

.u-p-20-140 {
    padding: 20px 140px;
}

.u-p-23-10 {
    padding: 23px 10px;
}

.u-p-28-10 {
    padding: 28px 10px;
}

.u-p-0-30 {
    padding: 0 30px;
}

/* ---- 布局：弹性 / 居中 / 图片占位 ---- */
.u-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-flex-center-v {
    display: flex;
    align-items: center;
}

.u-d-flex {
    display: flex;
}

.u-inline-block {
    display: inline-block;
}

.u-media-box-sm {
    min-height: 250px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-media-box-lg {
    min-height: 380px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-media-box-img {
    min-height: 250px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- 图片 ---- */
.u-img-w100 {
    width: 100%;
}

.u-img-round {
    width: 100%;
    border-radius: 12px;
}

.u-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.u-img-round-cover {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.u-img-h200 {
    width: 100%;
    border-radius: 12px;
    height: 200px;
    object-fit: cover;
}

.u-img-h280 {
    width: 100%;
    border-radius: 12px;
    height: 280px;
    object-fit: cover;
}

.u-img-mh557 {
    width: 100%;
    border-radius: 12px;
    max-height: 557px;
    object-fit: cover;
}

.u-img-mh570 {
    width: 100%;
    border-radius: 12px;
    max-height: 570px;
    object-fit: cover;
}

.u-img-h222 {
    width: 100%;
    border-radius: 12px;
    max-height: 222px;
    height: 222px;
    object-fit: cover;
}

/* ---- 视频 / 背景 ---- */
.u-bg-video-cover {
    background: url('../images/bg-video.jpg') center/cover no-repeat;
}

.u-bg-cover-link {
    background: url('../images/bg-cover.jpg') center/cover no-repeat;
}

/* ---- 表格类 ---- */
.u-td-label {
    background: var(--gray-50) !important;
    width: 240px;
    border-right: 2px solid #fff;
}

/* ---- 隐藏 / 显示 ---- */
.u-hidden {
    display: none;
}

.u-show {
    display: block;
}

/* ---- 列表通用 ---- */
.u-list-none {
    list-style: none;
    padding-left: 0;
}

.u-list-pad20 {
    padding-left: 20px;
}

/* ---- 补充工具类 ---- */
.u-text-capitalize {
    text-transform: capitalize;
}

.u-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.u-my-15 {
    margin: 15px 0;
}

.u-w-600 {
    width: 600px;
    max-width: 100%;
}

.u-w100 {
    width: 100%;
}

.u-h100 {
    height: 100%;
}

.u-object-cover {
    object-fit: cover;
}

.u-w-auto {
    width: auto;
}

.u-m-auto {
    margin: 0 auto;
}

.u-fs-13 {
    font-size: 1.3rem;
}

.u-fs-267 {
    font-size: 2.67rem;
}

.u-fs-26 {
    font-size: 2.6rem;
}

.u-mt-68 {
    margin-top: 68px;
}

.u-mb-68 {
    margin-bottom: 68px;
}

.u-hero-h447 {
    height: 447px !important;
    min-height: 447px;
}

.u-mxh570 {
    max-height: 570px;
}

.u-mxh557 {
    max-height: 557px;
}

.u-mxh222 {
    max-height: 222px;
    height: 222px;
}

.u-h222 {
    height: 222px;
}

.u-fs-115 {
    font-size: 1.15rem;
}

.u-p-0-37 {
    padding: 0 37px;
}

.u-bg-white {
    background: var(--white);
}

.u-td-bg {
    background-color: var(--gray-50) !important;
}

.u-img-holder {
    min-height: 380px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 6px;
}

.u-pt-126 {
    padding-top: 126px;
}

.u-pt-145 {
    padding-top: 145px;
}

.u-pb-160 {
    padding-bottom: 160px;
}

.u-pt-72 {
    padding-top: 72px;
}

.u-hero-h60vh {
    height: 60vh;
}

.u-hero-h657 {
    height: 657px !important;
}

.u-pl-150 {
    padding-left: 150px;
}

.u-bg-blue {
    background: var(--blue);
}

.u-lh-12 {
    line-height: 1.2;
}

.u-ls-2 {
    letter-spacing: 2px;
}

.u-text-uppercase {
    text-transform: uppercase;
}

.u-mxh930 {
    max-width: 930px;
    width: 100%;
}

.u-mt-95 {
    margin-top: 95px;
}

.u-bg-h630 {
    height: 630px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.u-m-auto-x {
    margin: 0 auto;
}

.u-mb-34 {
    margin-bottom: 34px;
}

.u-c-gray8 {
    color: var(--gray-800);
}

.u-pl-98 {
    padding-left: 98px;
}

.u-pt-160 {
    padding-top: 160px;
}

.u-pl-28 {
    padding-left: 28px;
}

.u-p-30 {
    padding: 30px;
}

.u-pl-50 {
    padding-left: 50px;
}

.u-pl-205 {
    padding-left: 205px;
}

.u-pl-130 {
    padding-left: 130px;
}

.u-pt-134 {
    padding-top: 134px;
}

.u-pr-63 {
    padding-right: 63px;
}

.Massage-Your-Way-item h3 {
    font-size: 2.75rem;
}

.Massage-Your-Way-item>* {
    padding: 0 16px 0 60px;
}









.u-mt-45 {
    margin-top: 45px;
}

.u-img-full-radius {
    width: 100%;
    border-radius: 12px;
}

.u-img-mx-radius {
    max-width: 100%;
    border-radius: 12px;
}

.u-fs-155 {
    font-size: 1.55rem;
}

.u-c-gold-dark {
    color: var(--gold-dark);
}

.u-mb-16 {
    margin-bottom: 16px;
}

.u-mb-20 {
    margin-bottom: 20px;
}

.u-mb-23 {
    margin-bottom: 23px;
}

.u-mb-36 {
    margin-bottom: 36px;
}

.u-pl-63 {
    padding-left: 63px;
}

.u-ml-130 {
    margin-left: 130px;
}

.u-pt-10 {
    padding-top: 10px;
}

.u-pt-82 {
    padding-top: 82px;
}

.u-h460 {
    height: 460px;
}

.u-h500 {
    height: 500px;
}

.u-bg-gold-dark {
    background: var(--gold-dark);
}

.u-mt-6 {
    margin-top: 6px;
}

.u-img-mx-auto {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.u-hero-h750 {
    height: 750px;
}

.u-sec-bg-gold {
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.2) 0%, rgba(0, 0, 0, 0.05) 100%);
}

.u-h200 {
    height: 200px;
}

.u-h280 {
    height: 280px;
}

.u-mxw-unset {
    max-width: unset;
}

.u-fs-265 {
    font-size: 2.65rem;
}

.u-fs-37 {
    font-size: 3.7rem;
}

.u-fs-364 {
    font-size: 3.64rem;
}

.u-pt-127 {
    padding-top: 127px;
}

.u-pt-253 {
    padding-top: 253px;
}

.u-pt-80 {
    padding-top: 80px;
}

.u-pt-85 {
    padding-top: 85px;
}

.u-pt-86 {
    padding-top: 86px;
}

.u-pt-173 {
    padding-top: 173px;
}

.u-pt-38 {
    padding-top: 38px;
}

.u-pb-38 {
    padding-bottom: 38px;
}

.u-pl-68 {
    padding-left: 68px;
}

.u-pl-67 {
    padding-left: 67px;
}

.u-pl-102 {
    padding-left: 102px;
}

.u-pb-100 {
    padding-bottom: 100px;
}

.u-h348 {
    height: 348px;
    width: 100%;
}

.u-pt-10 {
    padding-top: 10px;
}

.u-pt-100 {
    padding-top: 100px;
}

.u-pt-69 {
    padding-top: 69px;
}

.u-pb-115 {
    padding-bottom: 115px;
}

.u-pt-116 {
    padding-top: 116px;
}

.u-sec-f7 {
    background: #f7f8f8;
}

.u-pb-114 {
    padding-bottom: 114px;
}

.u-pl-60 {
    padding-left: 60px;
}

.u-mt-56 {
    margin-top: 56px;
}

.u-media-h456 {
    min-height: 456px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-h456 {
    height: 456px;
}

.u-pt-115 {
    padding-top: 115px;
}

.u-pb-174 {
    padding-bottom: 174px;
}

.u-pl-45 {
    padding-left: 45px;
}

.u-lh-26 {
    line-height: 26px;
}

.u-pt-91 {
    padding-top: 91px;
}

.u-minh300 {
    min-height: 300px;
}

.u-pt-92 {
    padding-top: 92px;
}

.u-pt-60 {
    padding-top: 60px;
}

.u-pt-22 {
    padding-top: 22px;
}

.u-pt-53 {
    padding-top: 53px;
}

.u-media-h380 {
    min-height: 380px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-p-0-259 {
    padding: 0 259px 0 34px;
}

.u-p-0-200 {
    padding: 0 200px 0 30px;
}

.u-pl-90 {
    padding-left: 90px;
}

.u-pr-7 {
    padding-right: 7px;
}

.u-pt-30 {
    padding-top: 30px;
}

.u-pb-80 {
    padding-bottom: 80px;
}

.u-w405 {
    width: 405px;
    max-width: 100%;
}

.u-mt-93 {
    margin-top: 93px;
}

.u-mb-75 {
    margin-bottom: 75px;
}

.u-pt-98 {
    padding-top: 98px;
}

.u-mt-20 {
    margin-top: 20px;
}

.u-mt-34 {
    margin-top: 34px;
}

.u-h150 {
    height: 150px;
}

.u-mb-10 {
    margin-bottom: 10px;
}

.u-flex-agree {
    color: var(--gray-800);
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: left;
    display: flex;
    gap: 14px;
    font-size: 1rem;
    margin-top: 34px;
}

.u-center-gray {
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: center;
    font-size: 0.95rem;
}

.u-pb-80 {
    padding-bottom: 80px;
}

.u-pt-70 {
    padding-top: 70px;
}

.u-factory-desc {
    color: #333;
    line-height: 28px;
    margin: 0 auto;
    margin-bottom: 15px;
    max-width: 940px;
    font-size: 1.02rem;
}

.u-pt-98 {
    padding-top: 98px;
}

.u-mb-46 {
    margin-bottom: 46px;
}

.u-span-22 {
    padding: 5px;
    font-size: 2.2rem;
    font-weight: 400;
}

.u-hero-overlay {
    background: linear-gradient(135deg, rgba(91, 123, 138, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.u-hero-overlay-strong {
    background: linear-gradient(135deg, rgba(91, 123, 138, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.u-img-full {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.u-mb-23 {
    margin-bottom: 23px;
}

.u-mb-50 {
    margin-bottom: 50px;
}

.u-fs-18 {
    font-size: 1.8rem;
}

.u-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--blue-primary);
    text-transform: uppercase;
    font-weight: 600;
}

.u-c-gray5 {
    color: var(--gray-500);
}

.u-fs-09 {
    font-size: 0.9rem;
}

.u-pad-r30 {
    border-radius: 12px;
    padding: 0 30px;
}

.u-thumb-sm {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.u-fs-28 {
    font-size: 28px;
}

.u-mb-4 {
    margin-bottom: 4px;
}

.u-w100 {
    width: 100%;
}

.u-pb-50 {
    padding-bottom: 50px;
}

.u-media-h380-w {
    min-height: 380px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.u-c-black {
    color: #000;
}

.u-fw-400 {
    font-weight: 400;
}

.u-c-gray9 {
    color: var(--gray-900);
}

.u-media-h250-r25 {
    min-height: 250px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-mb-18 {
    margin-bottom: 18px;
}

.u-c-gold-primary {
    color: var(--gold-primary);
}

.u-list-desc {
    color: var(--gray-600);
    font-size: 1.07rem;
    line-height: 1.8;
    margin-bottom: 2px;
}

.u-hero-clc {
    max-width: unset;
    margin-bottom: 160px;
}

.u-fs-48 {
    font-size: 4.8rem;
}

.u-mb-160 {
    margin-bottom: 160px;
}

.u-img-r25 {
    border-radius: 25px;
}

.u-c-blue-dark-i {
    color: var(--blue-dark) !important;
}

.u-hero-sub {
    color: #fff;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.u-c-gold-dark-i {
    color: var(--gold-dark) !important;
}

.u-img-r25 {
    border-radius: 25px;
}

.u-pb-124i {
    padding-bottom: 124px !important;
}

.u-mt-0 {
    margin-top: 0;
}

.u-pr-0-pl-92-pt-20 {
    padding-right: 0;
    padding-left: 92px;
    padding-top: 20px;
}

.u-mb-70 {
    margin-bottom: 70px;
}

.u-mt-17 {
    margin-top: 17px;
}

.u-pr-13 {
    padding-right: 13px;
}

.u-pt-21 {
    padding-top: 21px;
}

.u-pt-35 {
    padding-top: 35px;
}

.u-pt-57 {
    padding-top: 57px;
}

.u-pl-33 {
    padding-left: 33px;
}

.u-pl-60 {
    padding-left: 60px;
}

.u-en-flag {
    margin-right: 4px;
    margin-top: 10px;
}

.u-news-title {
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 15px;
    padding-left: 4px;
}

.u-news-form {
    display: flex;
    width: 90%
}

.u-news-input {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-right: 0;
    font-size: 0.85rem;
    outline: none;
    background: #f6f8f6;
}

.u-news-btn {
    padding: 0 16px;
    background: #f6f8f6;
    color: #000;
    border: 1px solid #ddd;
    border-left: 0;
    cursor: pointer;
}

.bi-arrow-up-right::before {
    font-size: 24px;
    line-height: 44px;
    color: #bbb
}

.u-pt-30-pl-125 {
    padding-top: 30px;
}

.u-margin-top-0 {
    margin-top: 0;
}

.u-foot-desc {
    margin-top: 42px;
    padding-left: 15px;
    font-size: 1.05rem;
    color: var(--gray-500);
    line-height: 1.8;
}

.u-c-white {
    color: var(--white);
}

.u-pt-100-pb-40 {
    padding-top: 100px;
    padding-bottom: 40px;
}

.u-pt-111-pl-12-pb-60 {
    padding-top: 111px;
    padding-left: 12px;
    padding-bottom: 60px;
}

.u-w-full {
    width: 100%;
}

.u-pt-78 {
    padding-top: 78px;
}

.u-write {
    color: var(--white);
}

.u-pl-18-p0 {
    padding: 0;
    padding-left: 18px;
}

.u-c-blue-dark {
    color: var(--blue-dark);
}

.u-big-img {
    height: 510px;
}

.u-pt-165 {
    padding-top: 165px;
}

.u-access-desc {
    font-size: 1.1rem;
    line-height: 27px;
    margin-bottom: 38px;
}

.u-pt-117i {
    padding-top: 117px !important;
}

.u-h510 {
    height: 510px;
}

.u-p0 {
    padding: 0;
}

.u-maxw-unset {
    max-width: unset;
}










.carousel {
    position: relative;
    width: 100%;
    max-width: 1600px;
    overflow: hidden;
    padding: 0 50px;
}

.carousel-track-wrapper {
    overflow: hidden;
    border-radius: 12px;
}

.carousel-track {
    display: flex;
    transition: transform var(--transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

.carousel-items {
    flex-shrink: 0;
    padding: 8px;
}

.carousel-items-img {
    width: 100%;
    aspect-ratio: 350 / 635;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.carousel-items-embed {
    display: none;
}

.carousel-items-inner p {
    width: 100%;
    height: 100%;
}




/* Arrow Buttons */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 18px;
    height: 140px;
    border: none;
    background: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
}

.carousel-arrow:hover {
    transform: translateY(-50%) scale(1.08);
}

.carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
}


.carousel-arrow svg {
    width: 22px;
    height: 22px;
    stroke: #333;
    stroke-width: 2.5;
    fill: none;
}

.carousel-arrow--prev {
    left: 20px;
}

.carousel-arrow--next {
    right: 20px;
}

/* Dots */
.carousel-dotts {
    display: flex;
    justify-content: center;
    gap: var(--dot-gap);
    padding: 18px 0 4px;
}

.carousel-dott {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.25s;
}

.carousel-dott:hover {
    background: #999;
}

.carousel-dott.active {
    background: #333;
    transform: scale(1.2);
}

/* Responsive breakpoints */









@media (max-width: 1600px) {
    .victoria-star-item div {
        text-align: center;
    }

    .victoria-star-item img {
        display: inline-block;
    }

    .victoria-star-item span {
        display: block;
        width: 100%;
    }

    .victoria-star-item span {
        line-height: 150%;
        padding-top: 10px;
    }
}

@media (max-width: 1400px) {
    .victoria-star-left {
        width: 100% !important;
        text-align: center;
    }

    .victoria-star-right {
        width: 100% !important;
    }

    .victoria-star-item div {
        text-align: center;
    }

    .victoria-star-item img {
        display: inline-block;
    }

    .victoria-star-item span {
        display: block;
        width: 100%;
    }
    .container-custom {
        padding: 0 20px;
    }

    .video-section-box h1 {
        font-size: 42px;
    }

    .u-fs-41 {
        font-size: 38px
    }

    .u-fs-583 {
        font-size: 48px;
    }

    .u-fs-395 {
        font-size: 34px;
    }

    .category-card h3 {
        font-size: 30px
    }

    .u-fs-36,
    .Products-list-Intro-right h2 {
        font-size: 3rem;
    }

    .Best-Seat h2 {
        font-size: 2.4rem;
    }

    .u-fs-275,
    .REDEFINING-WELLNESS h3,
    .Features h2 {
        font-size: 2.3rem;
    }

    .u-fs-26 {
        font-size: 2.2rem
    }

    .Massage-Your-Way-item h3 {
        font-size: 2rem;
    }

    .btn-gold {
        font-size: 20px
    }

    .btn-outline-blue {
        font-size: 20px
    }

    .u-pl-115 {
        padding-left: 60px;
    }

    .u-p-20-140 {
        padding: 20px 80px;
    }

    .section-row {
        gap: 30px
    }

    .u-mb-42 {
        margin-bottom: 38px
    }

    .u-w720 {
        width: 100%
    }

    .u-text-left .u-w200 {
        width: 100%
    }

    .case-card {
        height: 320px
    }

    .testimonial-list {
        padding: 28px 80px 0 80px;
    }

    .Massage-Your-Way-item>* {
        padding: 0 55px;
    }

    .u-pl-98 {
        padding-left: 88px;
    }

    .essentials-swiper {
        padding: 0 30px
    }

    .essentials-swiper .swiper-slide {
        padding: 20px 40px
    }

    .u-pt-160 {
        padding-top: 140px;
    }
}

/* 响应式调整宽高比 */
@media (max-width: 1200px) {
    .banner-video-container {
        aspect-ratio: 10 / 4;
    }
    .hover-gallery {
        padding-right: 50px;
    }

    .REDEFINING-WELLNESS {
        margin-bottom: 60px;
    }

    .detail-tabs .d-flex {
        gap: 10px !important;
    }

    .detail-tabs .tab-link {
        padding: 8px 12px;
        font-size: 14px;
    }

    .breadcrumb-product2 .breadcrumb {
        padding-left: 60px;
    }
    .navbar-nav{
        gap: 20px;
    }
    .video-section-box h1 {
        font-size: 40px;
    }
    .u-fs-41 {
        font-size: 32px
    }

    .btn-gold {
        font-size: 18px
    }

    .btn-outline-blue {
        font-size: 18px
    }

    .u-fs-583 {
        font-size: 40px;
    }

    .u-fs-395 {
        font-size: 30px;
    }

    .category-card h3 {
        font-size: 26px
    }

    .category-content .btn-gold {
        padding: 8px 15px;
        font-size: 15px;
    }

    .u-fs-36,
    .Products-list-Intro-right h2 {
        font-size: 2.6rem;
    }

    .u-fs-286 {
        font-size: 2.4rem;
    }

    .Best-Seat h2 {
        font-size: 2.3rem;
    }

    .u-fs-275,
    .Short-Video h2,
    .REDEFINING-WELLNESS h3,
    .Features h2 {
        font-size: 2.3rem;
    }

    .u-fs-26,
    .Colors-box .h2-2 {
        font-size: 2rem
    }

    .u-fs-28 {
        font-size: 2.4rem;
    }

    .Colors-box .h2-1 {
        font-size: 2rem;
    }

    .Massage-Your-Way-item h3 {
        font-size: 1.8rem;
    }

    .u-pl-81,
    .u-pl-74 {
        padding-left: 20px;
    }

    .u-pl-115 {
        padding-left: 20px;
    }

    .u-pr-100 {
        padding-right: 20px;
    }

    .u-p-20-140 {
        padding: 20px 40px;
    }

    .u-mb-42 {
        margin-bottom: 32px
    }

    .u-p-28-10 {
        padding: 24px 10px
    }

    .enhancements-img {
        background-position: 50px center;
    }

    .video-cont img {
        height: 48px
    }

    .video-cont span {
        line-height: 48px
    }

    .case-card {
        height: 280px
    }

    .testimonial-list {
        padding: 26px 60px 0 60px;
    }

    .Premium-Warrant {
        background-size: cover
    }

    .search-series-box {
        display: none
    }

    .py-5 {
        padding-top: 110px !important;
        padding-bottom: 80px !important;
    }

    .Massage-Your-Way-item>* {
        padding: 0 48px;
    }

    .u-pl-98 {
        padding-left: 68px;
    }

    .essentials-swiper {
        padding: 0 25px
    }

    .essentials-swiper .swiper-slide {
        padding: 20px 30px
    }

    .u-pt-160 {
        padding-top: 100px;
    }


    .u-fs-48 {
        font-size: 3.6rem;
    }

    .u-fs-364,
    .u-fs-37 {
        font-size: 2.8rem;
    }

    .u-fs-265 {
        font-size: 2.2rem;
    }

    .products-box-header h2 {
        font-size: 2rem;
    }

    .u-p-0-259 {
        padding: 0 120px 0 30px;
    }

    .u-pl-205 {
        padding-left: 100px;
    }

    .u-pl-130 {
        padding-left: 60px;
    }
}


@media (max-width: 1024px) {
    .carousel-items {
        width: 25%;
    }
}

/* --- Mobile Slide-in Menu --- */
@media (max-width: 991.98px) {

    /* Safety net for any remaining overflow */
    html,
    body {
        overflow-x: hidden;
    }

    .navbar-victoria {
        padding: 0;
    }
    .navbar-victoria .nav-top{
        display: none;
    }
    .navbar-victoria .container-custom {
        position: relative;
        padding: 0 5px;
    }

    .navbar-victoria .navbar-brand {
        flex-shrink: 1;
        min-width: 0;
    }

    .navbar-victoria .navbar-brand .brand-text {
        font-size: 1rem;
    }

    .navbar-victoria .nav-icons {
        gap: 8px;
    }

    .navbar-victoria .nav-icons .alibaba-link {
        display: none;
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        max-width: 80vw;
        height: 100vh;
        background: var(--white);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
        padding: 70px 20px 30px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        overflow-y: auto;
        display: block !important;
        visibility: hidden;
    }

    .navbar-collapse.show {
        transform: translateX(0);
        visibility: visible;
    }

    .navbar-collapse .navbar-nav {
        flex-direction: column;
        gap: 0;
    }

    .navbar-collapse .nav-item {
        border-bottom: 1px solid var(--gray-200);
        height: 55px;
    }

    .navbar-collapse .nav-item.has-dropdown>.nav-link:nth-child(n+2) {
        display: block;
    }

    .navbar-collapse .mega-menu {
        display: none;
    }

    .navbar-collapse .nav-link {
        color: var(--gray-800) !important;
        padding: 14px 16px !important;
        font-size: 1rem;
        font-weight: 500;
        transition: all var(--transition-fast);
    }

    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link.active {
        color: var(--blue) !important;
        background: var(--gray-50);
        padding-left: 24px !important;
    }

    .navbar-collapse .nav-link::after {
        display: none;
    }

    .navbar-collapse .nav-icons {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--gray-200);
        justify-content: center;
        flex-wrap: wrap;
        display: flex !important;
    }

    .navbar-collapse .nav-icons a {
        color: var(--gray-600);
        font-size: 1.2rem;
        padding: 8px;
    }

    .navbar-collapse .nav-icons a:hover {
        color: var(--blue);
    }

    /* Toggler moves with menu */
    .navbar-toggler {
        position: fixed;
        top: 25px;
        right: 10px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .navbar-toggler.menu-open {
        right: calc(260px - 50px);
    }


    .navbar-toggler.menu-open .navbar-toggler-icon,
    .navbar-toggler.menu-open .navbar-toggler-icon::before,
    .navbar-toggler.menu-open .navbar-toggler-icon::after {
        background: var(--gray-900);
    }

    /* Overlay when menu is open */
    .navbar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .navbar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .Victoria-left {
        width: 100%;
    }

    .Victoria-image {
        width: 100%;
    }
    .filter-section-filters {
        gap: 12px;
    }

    .filter-section-filters-item {
        flex: 0 0 calc((100% - 24px) / 3);
        /* 减去2个gap */
    }
    .stack-carousel {
        height: 400px;
    }

    .stack-card:nth-child(1) {
        left: 0;
        z-index: 4;
    }

    .stack-card:nth-child(2) {
        left: 80px;
        z-index: 3;
    }

    .stack-card:nth-child(3) {
        left: 160px;
        z-index: 2;
    }

    .stack-card:nth-child(4) {
        left: 240px;
        z-index: 1;
    }
    .nav-card {
        padding: 30px 50px;
        padding-left: 30px;
    }

    .learn-cont:nth-child(odd) {
        padding-right: 30px;
    }

    .learn-cont:nth-child(even) {
        padding-left: 30px;
    }

    .Showroom-img {
        padding: 20px;
    }

    .Showroom-cont {
        padding: 20px;
    }

    .news-item-cont {
        padding: 10px 30px;
    }

    .Customise-cont {
        max-width: 500px;
        padding: 50px;
    }
    .carousel-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 16px;
    }
    .bg-1 {
        padding: 50px 0 !important;
    }

    .hero-section .hero-content h1 {
        font-size: 2.5rem;
    }

    .section-header .section-title {
        font-size: 2rem;
    }

    .mega-menu .mega-content {
        grid-template-columns: 1fr 1fr;
    }

    .mega-menu .mega-image {
        display: none;
    }

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

    .nav-page-section .nav-page-content {
        grid-template-columns: 1fr;
    }

    .detail-hero .hero-info {
        margin-left: 5%;
        margin-right: 5%;
    }
    .breadcrumb-product2 a {
        font-size: 1.2rem;
    }

    .breadcrumb-product2 span {
        font-size: 1.2rem;
    }

    .breadcrumb-product2 {
        padding-left: 30px;
    }

    .hero-section .container-custom-product2 .hero-content {
        justify-content: center;
        padding: 10px 0;
    }

    .hero-section .container-custom-product2 .detail-hero-info {
        width: 80%;
        padding: 20px;
    }

    .hero-section .container-custom-product2 .hero-content h1 {
        font-size: 2rem;
    }

    .hero-section .container-custom-product2 .hero-content p {
        min-height: 80px;
        line-height: 20px;
    }

    .hero-section .container-custom-product2 .hero-content p.card-dimensions {
        min-height: 40px;
    }

    .product-card2 .card-specs {
        width: 200px;
    }

    .product-card2 .card-specs .spec-item {
        text-align: center;
    }

    .Make-It-Yours {
        padding-top: 30px;
    }

    .Make-It-Yours h2 {
        font-size: 1.7rem;
    }

    .Partner-box {
        grid-template-columns: repeat(4, 1fr);
    }
    .video-section-box h1 {
        font-size: 36px;
    }
    .u-fs-41 {
        font-size: 28px
    }

    .btn-gold {
        font-size: 16px
    }

    .btn-outline-blue {
        font-size: 16px
    }

    .u-fs-583 {
        font-size: 34px;
    }

    .u-fs-395 {
        font-size: 26px;
    }

    .category-card h3 {
        font-size: 24px
    }

    .u-fs-36,
    .Products-list-Intro-right h2 {
        font-size: 2.2rem;
    }

    .Best-Seat h2 {
        font-size: 2.2rem;
    }

    .u-fs-275,
    .Short-Video h2,
    .REDEFINING-WELLNESS h3,
    .Features h2 {
        font-size: 2rem;
    }

    .u-fs-26,
    .Colors-box .h2-2 {
        font-size: 1.8rem
    }

    .Colors-box .h2-1 {
        font-size: 1.8rem;
    }

    .Massage-Your-Way-item h3 {
        font-size: 1.6rem;
    }

    .u-pl-81,
    .u-pl-74,
    .u-pl-52,
    .u-pl-54 {
        padding-left: 0;
    }

    .u-pr-100 {
        padding-right: 0;
    }

    .u-pl-76 {
        padding-left: 20px;
    }

    .u-pt-88 {
        padding-top: 50px;
    }

    .u-pb-106 {
        padding-bottom: 60px;
    }

    .u-pb-117 {
        padding-bottom: 60px;
    }

    .u-pt-95 {
        padding-top: 50px;
    }

    .u-media-box-lg,
    .u-media-box-img {
        min-height: 260px;
    }

    .section-row {
        gap: 20px
    }

    .u-mb-42 {
        margin-bottom: 28px
    }

    .u-p-28-10 {
        padding: 20px 10px
    }

    .enhancements-img {
        background-position: 40px center;
    }

    .video-cont img {
        height: 40px
    }

    .video-cont span {
        line-height: 40px
    }

    .case-card {
        height: 220px
    }

    .testimonial-list {
        padding: 26px 20px 0 20px;
    }

    .filter-section .search-box {
        padding: 5px 30px 0 30px
    }

    .filter-section-filters-item-1 {
        padding-left: 50px;
    }

    .py-5 {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }

    .Massage-Your-Way-item>* {
        padding: 0 40px;
    }

    .u-pl-98 {
        padding-left: 48px;
    }

    .essentials-swiper {
        padding: 0 10px
    }

    .essentials-swiper .swiper-slide {
        padding: 20px 20px
    }

    .Best-Seat-cont {
        padding-right: 30px;
    }

    .day-night-controls {
        top: 20px;
        padding: 0
    }

    .Features-list {
        padding: 0 10px;
    }

    .feature-card {
        padding: 20px 0;
    }

    .Accessories {
        padding-top: 50px
    }

    .Accessories-list {
        margin-top: 20px
    }

    .Accessories-list p {
        margin-left: 0;
        width: 100%
    }

    .u-pt-160 {
        padding-top: 50px;
    }

    .u-pl-28 {
        padding-left: 0
    }

    .u-pl-50 {
        padding-left: 0;
    }

    .u-pl-205,
    .u-pl-130 {
        padding-left: 0;
    }

    .Massage-Your-Way-item h4 {
        margin-top: 20px
    }

    .Massage-Your-Way-item>* {
        padding: 0;
    }


    /* 字号收敛 */
    .u-fs-583,
    .u-fs-48 {
        font-size: 32px;
    }

    .u-fs-364,
    .u-fs-37 {
        font-size: 2.4rem;
    }

    .u-fs-265 {
        font-size: 2rem;
    }

    .u-fs-26 {
        font-size: 2rem
    }

    .products-box-header h2 {
        font-size: 1.8rem;
    }

    .u-fs-2,
    .u-fs-21,
    .footer .footer-col h5 {
        font-size: 1.5rem;
    }

    .u-fs-1 {
        font-size: 1.1rem;
    }

    .u-fs-15,
    .u-fs-155 {
        font-size: 1.2rem;
    }

    .products-box-header-btn {
        font-size: 1.2rem
    }

    .u-fs-125,
    .u-fs-13,
    .u-fs-128 {
        font-size: 1.1rem;
    }

    .u-hero-sub {
        font-size: 1.2rem;
    }

    /* 段落与标题行距 */
    .u-lh-27,
    .u-lh-28,
    .u-lh-29 {
        line-height: 1.7;
    }

    /* 大内边距收敛 */
    .u-pt-165,
    .u-pt-173,
    .u-pt-253 {
        padding-top: 60px;
    }

    .u-pt-127,
    .u-pt-134,
    .u-pt-116,
    .u-pt-115,
    .u-pt-160 {
        padding-top: 50px;
    }

    .u-pb-174,
    .u-pb-117,
    .u-pb-115,
    .u-pb-114 {
        padding-bottom: 50px;
    }

    .u-p-0-259 {
        padding: 0 40px 0 20px;
    }

    .u-p-0-200 {
        padding: 0 40px 0 20px;
    }

    /* 左右大留白归位 */
    .u-pl-205,
    .u-pl-150,
    .u-pl-140,
    .u-pl-130,
    .u-pl-125,
    .u-pl-115,
    .u-pl-102,
    .u-pl-98,
    .u-pl-92,
    .u-pl-90,
    .u-pl-81,
    .u-pl-76,
    .u-pl-68,
    .u-pl-67,
    .u-pl-63,
    .u-pl-60,
    .u-pl-52,
    .u-pl-150 {
        padding-left: 20px;
    }

    .u-pr-100,
    .u-pr-63,
    .u-pr-29,
    .u-pr-13,
    .u-pr-7,
    .u-pr-6 {
        padding-right: 0;
    }

    .u-pt-30-pl-125 {
        padding-left: 20px;
    }

    /* hero 高度与容器 */
    .u-hero-h447,
    .u-hero-h657,
    .u-hero-h750 {
        height: auto;
    }

    .u-mxh570,
    .u-mxh557 {
        max-height: none;
    }

    .u-h460,
    .u-h500,
    .u-h510,
    .u-h456 {
        height: auto;
    }

    /* 媒体容器堆叠 */
    .u-media-h456,
    .u-media-h380,
    .u-media-h250-r25,
    .u-media-h380-w {
        min-height: 220px;
    }

    .u-big-img {
        height: auto;
    }

    .product-card2 img,
    .product-card2 img {
        width: 38px
    }

    .Best-Seat {
        padding-top: 50px !important;
    }

    .Best-Seat-cate {
        font-size: 1rem
    }

    .Best-Seat-cont {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .Customise-cont {
        padding: 20px 0 0 20px !important;
        margin-bottom: 20px
    }


}

@media (max-width: 768px) {    
    .navbar-victoria .nav-top {
        display: none;
    }
    .banner-video-container {
        aspect-ratio: 4 / 3;
    }
    .enhancements {
        padding: 15px;
        padding-right: 15px;
    }

    .enhancements-img {
        padding-left: 0px;
    }

    .enhancements-row {
        flex-direction: column;
    }


    .victoria-star-list {
        grid-template-columns: 1fr;
    }

    .victoria-star-item div {
        text-align: left;
    }

    .victoria-star-item span {
        display: inline-block;
        width: unset;
    }
    .business_partner {
        margin-top: -160px;
        height: 364px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background: #fff;
        box-shadow: 0 4px 13px rgba(0, 0, 0, 0.25);
        margin-bottom: 60px;
        border-radius: 10px;
    }


    .hover-gallery {
        padding-right: 0;
    }

    .REDEFINING-WELLNESS {
        margin-bottom: 20px;
    }

    .detail-tabs .d-flex {
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .detail-tabs .tab-link {
        padding: 8px 12px;
        font-size: 14px;
    }

    .breadcrumb-product2 .breadcrumb {
        padding-left: 10px;
    }
    .filter-section-filters-item {
        flex: 0 0 100%;
    }

    .stack-carousel {
        height: 300px;
    }

    .stack-card {
        width: 75%;
        /* 手机端卡片更宽 */
    }

    .stack-card:nth-child(1) {
        left: 0;
        z-index: 4;
    }

    .stack-card:nth-child(2) {
        left: 60px;
        z-index: 3;
    }

    .stack-card:nth-child(3) {
        left: 120px;
        z-index: 2;
    }

    .stack-card:nth-child(4) {
        left: 180px;
        z-index: 1;
    }
    .nav-card {
        padding: 20px 30px;
        padding-left: 20px;
    }

    .learn-cont:nth-child(odd) {
        padding-right: 0;
    }

    .learn-cont:nth-child(even) {
        padding-left: 0;
    }

    .Showroom-img {
        padding: 10px;
    }

    .Showroom-cont {
        padding: 10px;
    }

    .news-item-cont {
        padding: 5px 10px;
    }

    .Customise-cont {
        max-width: 100%;
        padding: 15px;
    }
    .color-options-row {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .color-group {
        max-width: 100%;
    }

    .day-night-container {
        height: 300px;
    }
    .carousel-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .vm-body {
        padding: 0 40px;
    }

    .vm-body .nav-btn {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .video-stage {
        max-width: 100%;
    }
    .bg-1 {
        padding: 30px 0 !important;
    }

    .btn-gold {
        padding: 10px 15px;
    }

    .btn-outline-blue {
        padding: 8px 15px;
    }

    .hero-section {
        height: 60vh;
        min-height: 400px;
    }

    .hero-section .hero-content h1 {
        font-size: 2rem;
    }

    .hero-section .hero-content p {
        font-size: 1rem;
    }

    .section-header .section-title {
        font-size: 1.8rem;
    }

    .navbar-victoria .nav-link {
        padding: 12px 16px !important;
    }

    .footer .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

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

    .detail-hero {
        height: auto;
        padding: 40px 0;
    }

    .detail-hero .hero-info {
        margin: 0 20px;
        position: relative;
    }

    .customize-section .color-options {
        gap: 10px;
    }

    .customize-section .color-option {
        width: 45px;
        height: 45px;
    }
    .Partner-box {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }
    .video-section-box h1 {
        font-size: 32px;
    }
    .u-fs-41 {
        font-size: 24px
    }

    .btn-gold {
        font-size: 14px
    }

    .btn-outline-blue {
        font-size: 14px
    }

    .u-fs-583 {
        font-size: 28px;
    }

    .u-fs-395 {
        font-size: 22px;
    }

    .category-card h3 {
        font-size: 20px
    }

    .u-fs-36,
    .Products-list-Intro-right h2 {
        font-size: 1.9rem;
    }

    .u-fs-286,
    .u-fs-28 {
        font-size: 2rem;
    }

    .Best-Seat h2 {
        font-size: 1.8rem;
    }

    .u-fs-26 {
        font-size: 1.8rem;
    }

    .Colors-box .h2-1 {
        font-size: 1.6rem;
    }

    .u-fs-275,
    .Short-Video h2,
    .REDEFINING-WELLNESS h3,
    .Features h2 {
        font-size: 1.7rem;
    }

    .u-fs-26,
    .Colors-box .h2-2 {
        font-size: 1.6rem
    }

    .u-fs-21 {
        font-size: 1.6rem;
    }

    .Massage-Your-Way-item h3 {
        font-size: 1.4rem;
    }

    .u-fs-2 {
        font-size: 1.5rem;
    }

    .u-media-box-lg,
    .u-media-box-img {
        min-height: 200px;
        flex-direction: column;
    }

    .u-p-20-140 {
        padding: 20px;
    }

    .u-pl-115 {
        padding-left: 20px;
    }

    .u-p-0-30 {
        padding: 0 15px;
    }

    .u-mb-42 {
        margin-bottom: 24px
    }

    .u-p-28-10 {
        padding: 15px 10px
    }

    .testimonial-list {
        padding: 26px 0 0 0;
    }

    .filter-section .search-box {
        padding: 5px 15px 0 15px;
    }

    .filter-section-filters-item-1 {
        padding-left: 0
    }

    .py-5 {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }

    .Massage-Your-Way-item>* {
        padding: 0 20px;
    }

    .u-pl-98 {
        padding-left: 10px;
    }

    .essentials-swiper {
        padding: 0
    }

    .essentials-swiper .swiper-slide {
        padding: 20px 10px
    }

    .Best-Seat-cont {
        padding-right: 10px;
    }

    .Best-Seat-img img {
        height: auto
    }

    .Best-Seat-cate {
        gap: 10px;
    }

    .badge-essential {
        padding-right: 10px
    }

    .REDEFINING-WELLNESS {
        padding-top: 30px
    }

    .bg-12 {
        background-position: center center;
    }

    .REDEFINING-WELLNESS p {
        font-size: 0.85rem;
        color: #6b89a2;
    }
    .REDEFINING-WELLNESS span{
        color: #6b89a2;
    }
    .REDEFINING-WELLNESS a {
        background: var(--blue-primary);
    }
    .day-night-btn{
        width: 100px;
        height: 34px;
    }
    .day-night-btn img {
        height: 34px;
        width: 34px;
    }
    .day-night-btn span {
        height: 34px;
        width: 60px;
        line-height: 34px;
        font-size: 1rem;
    }
    .Massage-Your-Way-item2{
        padding-top: 10px;
    }
    .u-pt-160 {
        padding-top: 30px;
    }

    .u-pl-28 {
        padding-left: 0
    }

    .Specs h3,
    .specs-table {
        padding-left: 0
    }

    .u-p-30 {
        padding: 0;
    }

    .Specs img {
        margin-left: 0
    }

    .spec-more .btn {
        font-size: 1rem
    }

    .Short-Video {
        padding-top: 30px !important
    }




    .u-fs-48 {
        font-size: 28px;
    }

    .u-fs-364,
    .u-fs-37 {
        font-size: 2rem;
    }

    .u-fs-28,
    .u-fs-275,
    .u-fs-286 {
        font-size: 1.8rem;
    }

    .u-fs-26 {
        font-size: 1.6rem
    }

    .products-box-header h2 {
        font-size: 1.6rem;
    }

    .u-fs-19,
    .footer .footer-col h5 {
        font-size: 1.4rem;
    }

    .products-box-header-btn {
        font-size: 1.1rem
    }

    .u-fs-15,
    .u-fs-155 {
        font-size: 1.1rem;
    }

    .u-fs-12,
    .u-fs-125,
    .u-fs-128 {
        font-size: 1rem;
    }

    .u-pt-165,
    .u-pt-173,
    .u-pt-253 {
        padding-top: 40px;
    }

    .u-pt-127,
    .u-pt-160 {
        padding-top: 40px;
    }

    .u-pb-174 {
        padding-bottom: 40px;
    }

    .u-p-0-259,
    .u-p-0-200 {
        padding: 20px;
    }

    /* 独立留白全部归零，交由布局容器控制 */
    .u-pl-68,
    .u-pl-60,
    .u-pl-52,
    .u-pl-45,
    .u-pl-40,
    .u-pl-34,
    .u-pl-33,
    .u-pl-28,
    .u-pl-22,
    .u-pl-20,
    .u-pr-7,
    .u-pr-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .u-pl-18-p0 {
        padding-left: 0;
    }

    .u-mb-65 {
        margin-bottom: 30px;
    }

    /* 分隔大外边距 */
    .u-mt-95,
    .u-mt-81,
    .u-mt-77,
    .u-mt-68,
    .u-mt-64,
    .u-mt-56 {
        margin-top: 30px;
    }

    /* hero 内容 */
    .u-hero-clc {
        margin-bottom: 60px;
    }

    .u-hero-sub {
        font-size: 1rem;
    }

    /* 新闻订阅表单堆叠 */
    .u-news-form {
        margin-right: 10px
    }

    .u-news-btn {
        width: 80px;
    }

    .u-news-btn {
        border: 1px solid #000;
    }

    .Best-Seat-cont {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }



    .carousel-items {
        width: 33.3333%;
    }

    .carousel-arrow--prev {
        left: 25px;
    }

    .carousel-arrow--next {
        right: 25px;
    }
    .section-row {
        flex-direction: column;
    }
    .carousel-items {
        width: 100%;
    }

    .carousel-arrow--prev {
        left: 0px;
    }

    .carousel-arrow--next {
        right: 0px;
    }

    .carousel-arrow {
        width: 36px;
        height: 36px;
    }

    .carousel-arrow svg {
        width: 18px;
        height: 18px;
    }

    .carousel {
        padding: 0 30px;
    }

    .Case-custom {
        padding: 0 25px;
    }
    .Premium-Warrant-right{
        padding: 10px 20px;
        border-radius: 10px;
    }

}



@media (max-width: 576px) {
    .hero-section .hero-content h1 {
        font-size: 1.6rem;
    }

    .section-header .section-title {
        font-size: 1.5rem;
    }

    .product-card .card-specs {
        flex-wrap: wrap;
    }

    .product-card .card-actions {
        flex-direction: column;
    }

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

    .newsletter-section .newsletter-form {
        flex-direction: column;
    }

    .nav-page-section .nav-page-links .link-columns {
        grid-template-columns: 1fr;
    }
}

@media(max-width:480px) {
    .carousel-track {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px;
    }
}

@media print {

    .carousel-arrow,
    .carousel-dotts {
        display: none;
    }
}