.relate-marking-page {
            background: #f7f8fb;
            color: #0d1420;
        }
@media (max-width: 768px) {
    .relate-marking-page .product-hero-bg {
        background-image: url("../../images/product/related/relate4-wap.webp") !important;
    }
}

        .relate-marking-page .product-hero-overlay {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.12), rgba(5, 10, 18, 0.18) 48%, rgba(5, 10, 18, 0.34)),
                radial-gradient(circle at 50% 35%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.34) 30%, rgba(255,255,255,0) 58%),
                linear-gradient(90deg, rgba(4, 10, 19, 0.34), rgba(4, 10, 19, 0.08) 54%, rgba(4, 10, 19, 0.22));
        }

        .relate-marking-page .product-hero-content {
            z-index: 4;
            width: min(940px, calc(100% - 40px));
            max-width: 940px;
            margin-bottom: clamp(350px, 50vh, 550px);
            text-align: center;
        }

        .relate-marking-page .product-hero-title {
            margin-bottom: 18px;
            letter-spacing: 0;
            background: linear-gradient(135deg, #07111f 0%, #1c3555 34%, #d54f18 70%, #ff6a16 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .relate-marking-page .product-hero-sub {
            max-width: 780px;
            margin-left: auto;
            margin-right: auto;
            letter-spacing: 0;
            color: #efefef;
            font-weight: 500;
        }

        .relate-marking-page .product-hero-badge {
            display: inline-block;
            margin-right: 10px;
            font: inherit;
            font-weight: 650;
            line-height: inherit;
            letter-spacing: 0;
            background: linear-gradient(115deg, #fff1d7 0%, #ffb15f 22%, #ff6600 52%, #c23a0b 78%, #ffe0a8 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 8px 22px rgba(255, 102, 0, 0.24);
        }

        .relate-section {
            padding: clamp(76px, 10vh, 124px) 24px;
            background: #f7f8fb;
        }

        .relate-section--white {
            background: #fff;
        }

        .relate-inner {
            width: min(1200px, 100%);
            margin: 0 auto;
        }

        .relate-heading {
            max-width: 860px;
            margin: 0 auto clamp(38px, 5.6vh, 64px);
            text-align: center;
        }

        .relate-kicker {
            margin: 0 0 14px;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: 0;
            background: linear-gradient(115deg, #8b2c10 0%, #ff6600 42%, #ffb25f 62%, #b43d12 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 8px 22px rgba(255, 102, 0, 0.13);
        }

        .relate-title {
            margin: 0;
            color: transparent;
            font-size: clamp(30px, 3vw, 40px);
            font-weight: 560;
            line-height: 1.18;
            letter-spacing: 0;
            background: linear-gradient(115deg, #5f240f 0%, #a7350d 18%, #ff6600 42%, #ff9a2f 58%, #d9480f 76%, #6b2a12 100%);
            background-size: 180% 180%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 12px 30px rgba(255, 102, 0, 0.12);
        }

        .relate-desc {
            margin: 18px auto 0;
            max-width: 780px;
            color: rgba(13, 20, 32, 0.62);
            font-size: clamp(15px, 1.12vw, 16px);
            line-height: 1.85;
            letter-spacing: 0;
        }

        .relate-advantage-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }

        .relate-advantage-card {
            position: relative;
            min-height: 330px;
            padding: clamp(28px, 3vw, 36px);
            overflow: hidden;
            border: 1px solid rgba(23, 44, 72, 0.08);
            border-radius: 8px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.88)),
                radial-gradient(circle at 20% 12%, rgba(255, 102, 0, 0.14), transparent 30%);
            box-shadow: 0 18px 44px rgba(23, 35, 52, 0.08);
            transition:
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease;
        }

        .relate-advantage-card:hover {
            border-color: rgba(255, 102, 0, 0.22);
            box-shadow: 0 24px 56px rgba(23, 35, 52, 0.12), 0 12px 34px rgba(255, 102, 0, 0.09);
            transform: translateY(-6px);
        }

        .relate-advantage-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fff2e8 0%, #fff8f2 100%);
            color: #ff6600;
            font-size: 13px;
            font-weight: 780;
            box-shadow: 0 12px 28px rgba(255, 102, 0, 0.14);
        }

        .relate-advantage-title {
            margin: 26px 0 0;
            color: #101923;
            font-size: clamp(21px, 1.8vw, 26px);
            font-weight: 680;
            line-height: 1.28;
            letter-spacing: 0;
        }

        .relate-advantage-copy {
            margin: 18px 0 0;
            color: rgba(13, 20, 32, 0.64);
            font-size: 15px;
            line-height: 1.86;
            letter-spacing: 0;
        }

        .relate-table-wrap {
            overflow: hidden;
            border: 1px solid rgba(23, 44, 72, 0.08);
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 20px 52px rgba(23, 35, 52, 0.08);
        }

        .relate-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .relate-table th,
        .relate-table td {
            padding: 22px 24px;
            border-bottom: 1px solid rgba(23, 44, 72, 0.08);
            text-align: left;
            vertical-align: top;
            letter-spacing: 0;
        }

        .relate-table tr:last-child td {
            border-bottom: 0;
        }

        .relate-table th {
            background: #111820;
            color: #fff;
            font-size: 15px;
            font-weight: 680;
            line-height: 1.45;
        }

        .relate-table th:first-child {
            width: 22%;
        }

        .relate-table td {
            color: rgba(13, 20, 32, 0.68);
            font-size: 15px;
            line-height: 1.75;
        }

        .relate-table td:first-child,
        .relate-table td:nth-child(3) {
            color: #101923;
            font-weight: 680;
        }

        .relate-marking-page #site-cta {
            position: relative;
            z-index: 3;
        }

        .relate-marking-page .product-section {
            padding: 52px 0;
            background: #f7f7f8;
            overflow: hidden;
        }

        .relate-marking-page .product-section.product-section-alt {
            background: #f7f7f8;
        }

        .relate-marking-page .product-section-inner {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
        }

        .relate-marking-page .series-header {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 24px;
        }

        .relate-marking-page .series-header .series-carousel-controls {
            margin-left: auto;
        }

        .relate-marking-page #product-glovebox .series-title,
        .relate-marking-page #product-vacuum .series-title,
        .relate-marking-page #product-automation .series-title {
            color: #111 !important;
            background: none !important;
            -webkit-text-fill-color: initial !important;
            font-size: clamp(28px, 2vw, 32px) !important;
            line-height: 1.2 !important;
            font-weight: 500 !important;
            letter-spacing: 0 !important;
            margin: 0 !important;
        }

        .relate-marking-page .series-carousel-viewport {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            overflow: hidden;
            margin-top: 8px;
        }

        .relate-marking-page .device-carousel-track {
            display: flex !important;
            gap: 20px !important;
            padding-left: var(--track-left-pad, 0px);
            padding-right: 0;
            transition: transform 720ms cubic-bezier(.22,.68,0,1);
            will-change: transform;
            transform: translate3d(0, 0, 0);
        }

        .relate-marking-page #product-glovebox .device-carousel-track > .series-product-card,
        .relate-marking-page #product-vacuum .device-carousel-track > .series-product-card {
            flex: 0 0 clamp(380px, 24vw, 420px);
            min-width: clamp(380px, 24vw, 420px);
        }

        .relate-marking-page #product-automation .device-carousel-track > .series-product-card {
            flex: 0 0 clamp(500px, 34vw, 560px);
            min-width: clamp(500px, 34vw, 560px);
        }

        .relate-marking-page .series-products[data-animate="scale-cards"] .series-product-card,
        .relate-marking-page .series-product-card {
            opacity: 1 !important;
            transform: none !important;
            display: block;
            overflow: hidden;
            border-radius: 8px !important;
            background: #f3f4f5;
            box-shadow: none;
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .relate-marking-page .series-product-card:hover {
            transform: translateY(-2px) !important;
        }

        .relate-marking-page #product-glovebox .series-product-img,
        .relate-marking-page #product-vacuum .series-product-img {
            aspect-ratio: 5 / 3;
            height: auto;
            background: #f3f4f5;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 8px 8px 0 0;
            border-bottom: 1px solid #d7d8dc;
        }

        .relate-marking-page #product-automation .series-product-img {
            aspect-ratio: 2 / 1;
            height: auto;
            overflow: hidden;
            background: #e6e6e8;
            border-radius: 8px 8px 0 0;
            border-bottom: 1px solid #d7d8dc;
        }

        .relate-marking-page .series-product-img {
            position: relative;
        }

        .relate-marking-page .series-product-img .img-default,
        .relate-marking-page .series-product-img .img-hover {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: cover;
            display: block !important;
            transition: opacity .52s cubic-bezier(.22,1,.36,1);
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .relate-marking-page .series-product-img .img-default {
            opacity: 1;
        }

        .relate-marking-page .series-product-img .img-hover {
            opacity: 0;
        }

        .relate-marking-page .series-product-card:hover .series-product-img .img-default {
            opacity: 0;
        }

        .relate-marking-page .series-product-card:hover .series-product-img .img-hover {
            opacity: 1;
        }

        .relate-marking-page .series-product-name {
            display: block !important;
            padding: 18px 18px 6px;
            color: #111;
            font-size: 18px;
            line-height: 1.25;
            font-weight: 500;
            letter-spacing: 0;
            text-align: left;
        }

        .relate-marking-page .series-product-desc {
            display: block;
            margin: 0;
            padding: 0 18px 18px;
            color: #8a8f98;
            font-size: 14px;
            line-height: 1.5;
            letter-spacing: 0;
            text-align: left;
        }

        .relate-marking-page .series-carousel-controls {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .relate-marking-page .series-carousel-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,.14);
            background: transparent;
            color: #7f7f86;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all .25s ease;
        }

        .relate-marking-page .series-carousel-btn:hover {
            border-color: #ff6600;
            color: #ff6600;
        }

        .relate-marking-page .series-carousel-btn.is-disabled {
            opacity: .35;
            pointer-events: none;
        }

        @media (max-width: 980px) {
            .relate-advantage-grid {
                grid-template-columns: 1fr;
            }

            .relate-advantage-card {
                min-height: 0;
            }
        }

        @media (max-width: 760px) {
            .relate-section {
                padding: 64px 16px;
            }

            .relate-table-wrap {
                overflow-x: auto;
            }

            .relate-table {
                min-width: 760px;
            }

            .relate-table th,
            .relate-table td {
                padding: 18px 16px;
            }
        }


#section-footer .footer-layout-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}
#section-footer .footer-main,
#section-footer .footer-bottom,
#section-footer .footer-copyright {
    position: relative;
    z-index: 1;
}
#section-footer .footer-divider {
    margin-top: clamp(24px, 3vh, 36px);
    margin-bottom: clamp(16px, 2vh, 24px);
}
#section-footer .footer-bottom {
    margin-bottom: clamp(12px, 2vh, 24px);
}

#section-footer .footer-layout-shell {
    justify-content: flex-start;
    padding-top: clamp(350px, 28vh, 350px);
    padding-bottom: clamp(28px, 4vh, 44px);
}
#section-footer.fullscreen-section {
    min-height: auto !important;
    height: auto !important;
    position: relative;
    z-index: 1;
}
#section-footer .footer-main {
    width: min(1280px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
#section-footer .footer-logo-wrap {
    display: flex;
    align-items: center;
}
#section-footer .footer-logo {
    height: clamp(34px, 3.2vw, 42px);
    width: auto;
    display: block;
}
#section-footer .footer-brand .section-lead {
    margin: 18px 0 0;
    text-align: left;
    color: rgba(255,255,255,0.58);
    line-height: 1.8;
    max-width: 420px;
}
#section-footer .footer-contact-form {
    margin-top: 18px;
    max-width: 420px;
    display: grid;
    gap: 10px;
}
#section-footer .footer-contact-form input,
#section-footer .footer-contact-form textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.32);
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
}
#section-footer .footer-contact-form textarea { resize: vertical; min-height: 64px; }
#section-footer .footer-contact-form button {
    width: 124px;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #ff6a00;
    cursor: pointer;
}
#section-footer .footer-nav .footer-columns {
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr));
    gap: clamp(20px, 2.5vw, 48px);
    justify-content: start;
}
@media (max-width: 1024px) {
    #section-footer .footer-layout-shell {
        padding-top: clamp(160px, 18vh, 210px);
    }
    #section-footer .footer-main {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    #section-footer .footer-contact-form {
        max-width: 100%;
    }
    #section-footer .footer-nav .footer-columns {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}
@media (max-width: 768px) {
    #section-footer .footer-layout-shell {
        padding-top: 72px;
    }
}
