:root {
    --black: #111;
    --text: #333;
    --muted: #747474;
    --line: #e9e9e9;
    --soft: #f1fbf5;
    --orange: #22c96f;
    --orange-dark: #00833f;
    --green: #007a3d;
    --main: 1660px;
    --time: 0.28s;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    color: var(--text);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    border: 0;
    outline: none;
    color: inherit;
    font: inherit;
    background: transparent;
}

button {
    cursor: pointer;
}

ul,
li {
    list-style: none;
}

section,
main {
    width: 100%;
}

.main {
    width: var(--main);
    max-width: calc(100% - 120px);
    margin: 0 auto;
}

.img_box,
.img_100 {
    overflow: hidden;
}

.img_box img {
    width: 100%;
    height: auto;
}

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

.line-clamp2,
.line-clamp3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.line-clamp2 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.line-clamp3 {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.titleCom {
    text-align: center;
}

.titleCom h2 {
    color: var(--green);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.18;
}

.titleCom p {
    margin-top: 18px;
    color: var(--muted);
    font-size: 18px;
}

.buttonLine {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 34px;
    gap: 12px;
    border: 1px solid var(--orange);
    border-radius: 999px;
    color: var(--orange);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0;
    transition: color var(--time), background var(--time), transform var(--time), box-shadow var(--time);
}

.buttonLine svg {
    width: 16px;
    height: 16px;
}

.buttonLine .btnIcon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.buttonLine:hover,
.buttonLine:focus {
    color: #fff;
    background: var(--orange);
    box-shadow: 0 14px 30px rgba(242, 122, 26, 0.22);
    transform: translateY(-2px);
}

.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
    opacity: 1;
    transform: none;
}

.SiteTopbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    background: #cfcfcf;
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    overflow: hidden;
}
.SiteTopbar .announcePrev,
.SiteTopbar .announceNext {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 26px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.SiteTopbar .announcePrev:hover,
.SiteTopbar .announceNext:hover { opacity: 1; }
.SiteTopbar .announceTrack {
    overflow: hidden;
    text-align: center;
}
.SiteTopbar .announceMsg {
    display: none;
    white-space: nowrap;
}
.SiteTopbar .announceMsg.active {
    display: inline !important;
}
@keyframes announceFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.SiteHeader {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
}

.SiteHeader .headerBody {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px;
    /*gap: 34px;*/
}

.SiteHeader .brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
    color: var(--black);
    font-size: 0;
    font-weight: 800;
    letter-spacing: 0;
}

.SiteHeader .brand img {
    width: 100px;
    height: 50px;
    object-fit: contain;
}

.SiteHeader .navList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
    color: #222;
    font-size: 18px;
    font-weight: 700;
}

.SiteHeader .navList a {
    position: relative;
    padding: 10px 0;
    transition: color var(--time);
}

.SiteHeader .navList a::after {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 2px;
    background: var(--orange);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity var(--time), transform var(--time);
}

.SiteHeader .navList a:hover,
.SiteHeader .navList a:focus,
.SiteHeader .navList a.active,
.SiteHeader .navList .current-menu-item > a,
.SiteHeader .navList .current-menu-parent > a,
.SiteHeader .navList .current-menu-ancestor > a {
    color: var(--orange);
}

.SiteHeader .navList a:hover::after,
.SiteHeader .navList a:focus::after,
.SiteHeader .navList a.active::after,
.SiteHeader .navList .current-menu-item > a::after,
.SiteHeader .navList .current-menu-parent > a::after,
.SiteHeader .navList .current-menu-ancestor > a::after {
    opacity: 1;
    transform: scaleX(1);
}

.SiteHeader .navList li.hasDropdown {
    position: relative;
}

.SiteHeader .navList a .navCaret {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 5px;
    vertical-align: middle;
    transition: transform var(--time);
}

.SiteHeader .navList li.hasDropdown:hover > a .navCaret,
.SiteHeader .navList li.hasDropdown.open > a .navCaret {
    transform: rotate(180deg);
}

.SiteHeader .navDropToggle {
    display: none;
}

.SiteHeader .navDropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    transform: translateY(8px);
    min-width: 220px;
    padding: 18px 22px;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.14);
    transition: opacity var(--time), transform var(--time), visibility var(--time);
}

.SiteHeader .navDropdown.wide {
    min-width: 400px;
}

@media only screen and (min-width: 768px) {
    .SiteHeader .navList li.hasDropdown:hover .navDropdown {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
}

.SiteHeader .navDropdown ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.SiteHeader .navDropdown.wide ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 28px;
}

.SiteHeader .navDropdown li {
    margin: 0;
}

.SiteHeader .navDropdown a {
    display: block;
    padding: 9px 4px;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 6px;
    transition: color var(--time), background var(--time);
}

.SiteHeader .navDropdown a::after {
    display: none;
}

.SiteHeader .navDropdown a:hover {
    color: var(--green);
    background: var(--soft);
}

.SiteHeader .headerActions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 18px;
}

.SiteHeader .searchBox {
    display: flex;
    align-items: center;
    width: 205px;
    height: 32px;
    padding: 0 14px;
    gap: 10px;
    border: 1px solid #ccefdc;
    background: #eafbf2;
    border-radius: 999px;
    color: #777;
    transition: border-color var(--time), box-shadow var(--time);
}

.SiteHeader .searchBox img {
    width: 19px;
    height: 19px;
}

.SiteHeader .searchBox input {
    width: 100%;
    font-size: 14px;
}

.SiteHeader .searchBox:focus-within {
    border-color: var(--orange);
    box-shadow: 0 8px 20px rgba(242, 122, 26, 0.12);
}

.LangSwitch {
    position: relative;
}

.LangSwitch .langCurrent {
    display: flex;
    align-items: center;
    min-width: 110px;
    height: 32px;
    padding: 0 14px;
    gap: 8px;
    border: 1px solid #ccefdc;
    background: #fff;
    border-radius: 999px;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    transition: border-color var(--time), color var(--time), box-shadow var(--time);
}

.LangSwitch .langCurrent img {
    width: 20px;
    height: 20px;
}

.LangSwitch .langCurrent svg {
    width: 12px;
    margin-left: auto;
    transition: transform var(--time);
}

.LangSwitch .langMenu {
    position: absolute;
    
    top: calc(100% + 10px);
    right: 0;
    width: 140px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--time), transform var(--time);
}

.LangSwitch .langMenu button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    text-align: left;
    transition: color var(--time), background var(--time);
}

.LangSwitch .langMenu button:hover,
.LangSwitch .langMenu button.active {
    color: var(--orange);
    background: #fff3e8;
}

.LangSwitch.open .langCurrent,
.LangSwitch .langCurrent:hover,
.LangSwitch .langCurrent:focus {
    border-color: var(--orange);
    color: var(--orange);
    box-shadow: 0 8px 20px rgba(242, 122, 26, 0.12);
}

.LangSwitch.open .langCurrent svg {
    transform: rotate(180deg);
}

.LangSwitch.open .langMenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.SiteHeader .menuButton {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: background var(--time), border-color var(--time);
}

.SiteHeader .menuButton.opened {
    background: var(--soft);
    border-color: var(--green);
}

.SiteHeader .menuButton.opened span {
    background: var(--green);
}

.SiteHeader .menuButton span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 5px auto;
    background: var(--black);
    border-radius: 2px;
    transform-origin: center;
    transition: transform var(--time), opacity var(--time);
}

.SiteHeader .menuButton.opened span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.SiteHeader .menuButton.opened span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.SiteHeader .menuButton.opened span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.HomeHero {
    --hero-gutter: clamp(56px, 7vw, 132px);
    --hero-peek: clamp(46px, 5.8vw, 112px);
    position: relative;
    margin-block: clamp(10px, 1.35vw, 18px);
    padding: 0;
    background: #fff;
    overflow: hidden;
}

.HomeHero .heroViewport {
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 7;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
}

.HomeHero .heroTrack {
    position: relative;
    width: 100%;
    height: 100%;
}

.HomeHero .heroSlide {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100% - (var(--hero-gutter) * 2));
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: left 0.52s cubic-bezier(.22,.61,.36,1), opacity 0.35s ease;
}

.HomeHero .heroSlide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.HomeHero .heroSlide.prev {
    left: calc(-50% + var(--hero-gutter) + var(--hero-peek));
    opacity: 0.72;
}

.HomeHero .heroSlide.next {
    left: calc(150% - var(--hero-gutter) - var(--hero-peek));
    opacity: 0.72;
}

.HomeHero .heroSlide img,
.HomeHero .heroSlide iframe,
.HomeHero .heroSlide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.HomeHero .heroControls {
    position: absolute;
    right: auto;
    bottom: -34px;
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
}

.HomeHero .heroTrack button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #22c96f;
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    opacity: 1;
    transition: background 0.28s, color 0.28s, transform 0.28s;
}
.HomeHero .heroTrack .heroPrev {
    position: absolute;
    left: max(6px, calc((var(--hero-gutter) - 44px) / 2));
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
}
.HomeHero .heroTrack .heroNext {
    position: absolute;
    right: max(6px, calc((var(--hero-gutter) - 44px) / 2));
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
}

.HomeHero .heroTrack button:hover {
    color: #fff;
    background: #22c96f;
}

.HomeHero .heroDots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
}

.HomeHero .heroDots button {
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.HomeHero .heroDots button.active {
    width: 24px;
    border-radius: 999px;
    background: #fff;
    transform: none;
}
.MaterialProperties {
    position: relative;
    padding: 84px 0 76px;
    background: #fff;
    overflow: hidden;
    /* background-color: rgba(243, 253, 247); */
}
.MaterialProperties::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: url(/wp-content/themes/IRUFA/assets/images/672abb888ac5acbc50edf25c8d84b6caf85273e4.png) no-repeat center/contain;
    content: "";
    pointer-events: none;
    z-index: 0;
}
.MaterialProperties::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 180px;
    height: 180px;
    background: url(/wp-content/themes/IRUFA/assets/images/11.png) no-repeat center/contain;
    content: "";
    pointer-events: none;
    z-index: 0;
}
.MaterialProperties .main {
    position: relative;
    z-index: 1;
}

.MaterialProperties .propertyList {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    margin-top: 54px;
}

.MaterialProperties .propertyCarousel {
    position: relative;
}

.MaterialProperties .propertyDots,
.MaterialProperties .propertyArrows {
    display: none;
}

.MaterialProperties .item {
    min-height: 212px;
    padding: 0 26px;
    border-right: 1px solid #e9e9e9;
    border-radius: 0;
    background: transparent;
    text-align: center;
    transition: transform var(--time), box-shadow var(--time), border-color var(--time);
}
.MaterialProperties .item:nth-child(8n) {
    border-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .MaterialProperties .item:nth-child(8n) {
        border-right: 1px solid #e9e9e9;
    }
    .MaterialProperties .item:nth-child(4n) {
        border-right: 0;
    }
}

.MaterialProperties .item .img_box {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
}

.MaterialProperties .item h3 {
    color: var(--black);
    font-size: 13px;
    line-height: 1.28;
    padding-bottom: 10px;
}
.MaterialProperties .item h3::after {
    display: block;
    width: 24px;
    height: 2px;
    margin: 6px auto 0;
    background: #22c96f;
    content: "";
}

.MaterialProperties .titleCom h2::after {
    display: block;
    width: 100px;
    height: 3px;
    margin: 12px auto 0;
    background: #22c96f;
    content: "";
}

.MaterialProperties .item p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.MaterialProperties .item:hover {
    color: var(--green);
    box-shadow: none;
    transform: translateY(-3px);
}

.MaterialProperties .buttonWrap {
    display: flex;
    justify-content: center;
    margin-top: 54px;
}

.BodyPartFinder {
    position: relative;
    padding: 86px 0 120px;
    background: #fff;
}

.BodyPartFinder .finderLayout {
    display: block;
    align-items: center;
    gap: 80px;
}

.BodyPartFinder .figureWrap {
    z-index: 0;
    position: relative;
    max-width: 924px;
    margin: 0 auto;
}

.BodyPartFinder .markerList .item:nth-child(3) {
    top: 42%;
    left: 18%;
}

.BodyPartFinder .markerList .item:nth-child(4) {
    top: 53%;
    left: 71%;
}

.BodyPartFinder .markerList .item:nth-child(5) {
    top: 76%;
    left: 36%;
}

.BodyPartFinder .finderInfo h2 {
    color: var(--green);
    font-size: 48px;
    line-height: 1.18;
}

.BodyPartFinder .finderInfo p {
    margin-top: 20px;
    color: var(--muted);
    font-size: 18px;
}

.BodyPartFinder .finderInfo {
    margin-bottom: 42px;
}

.BodyPartFinder .bodyPartList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 34px 0 38px;
}

.BodyPartFinder .bodyPartList .item a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 18px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    background: #fff;
    color: #222;
    font-weight: 700;
    transition: color var(--time), border-color var(--time), transform var(--time);
}

.BodyPartFinder .bodyPartList .item a:hover {
    border-color: var(--orange);
    color: var(--orange);
    transform: translateX(4px);
}

.ProductCategories {
    padding: 76px 0 82px;
    background: var(--soft);
    overflow: visible;
}

.ProductCategories .categoryIntro {
    text-align: center;
}

.ProductCategories .categoryIntro h2 {
    color: var(--green);
    font-size: 48px;
    line-height: 1.18;
}

.ProductCategories .categoryIntro p {
    margin-top: 12px;
    margin-bottom:30px;
    color: var(--muted);
    font-size: 18px;
}

.ProductCategories .buttonWrap {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.ProductCategories .categoryCardList {
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 36px;
    margin-top: 48px;
}

.ProductCategories .categoryCardList .item {
    flex: 0 0 calc((100% - 4 * 25px) / 5);
}

.ProductCategories .categoryCardList .item a {
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    transition: transform var(--time), box-shadow var(--time);
}

.ProductCategories .categoryCardList .item .img_100 {
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.ProductCategories .categoryCardList .item span {
    display: block;
    padding: 8px 8px;
    background: #27c76f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.ProductCategories .categoryCardList .item a:hover {
    box-shadow: 0 14px 30px rgba(0, 122, 61, 0.14);
    transform: translateY(-4px);
}

.ProductCategories .main,
.FeaturedProducts .main,
.LatestNews .main {
    position: relative;
}
.scrollArrows {
    position: absolute;
    top: 50%;
    left: -60px;
    right: -60px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}
.scrollArrows button {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    background: #fff;
    color: #22c96f;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.28s;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.scrollArrows button:hover {
    border-color: #22c96f;
    background: #22c96f;
    color: #fff;
}
.FeaturedProducts {
    padding: 88px 0 96px;
    background: var(--soft);
}

.FeaturedProducts .tabBar {
    text-align: left;
    width: auto;
    display: table;
    margin: 32px auto 46px;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
}
.FeaturedProducts .tabBar button {
    min-width: 160px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #666;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 36px;
    transition: all 0.28s;
    border-right: 1px solid #e0e0e0;
}
.FeaturedProducts .tabBar button:last-child {
    border-right: 0;
}
.FeaturedProducts .tabBar button.active,
.FeaturedProducts .tabBar button:hover {
    color: #fff;
    background: #22c96f;
}
.FeaturedProducts .productGrid {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    
}

.FeaturedProducts .productGrid .item {
    flex: 0 0 calc((100% - 3 * 16px) / 4);
}

.FeaturedProducts .productGrid.active {
    display: grid;
    padding:28px 0 58px;
}

.FeaturedProducts .item a {
    display: block;
    background: #fff;
    transition: transform var(--time), box-shadow var(--time);
    border-radius: 20px;
}

.FeaturedProducts .item .img_100 {
    height: 358px;
    background: #eee;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
}

.FeaturedProducts .item .img_100 img {
    transition: transform var(--time);
}

.FeaturedProducts .item .body {
    padding: 24px 24px 28px;
}

.FeaturedProducts .item .title {
    color: var(--black);
    font-size: 18px;
    font-weight: 700;
}

.FeaturedProducts .item .model {
    margin: 6px 0 0;
    color: var(--orange);
    font-size: 16px;
    font-weight: 700;
}

.FeaturedProducts .item a:hover {
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.1);
    transform: translateY(-6px);
}

.FeaturedProducts .item a:hover .img_100 img {
    transform: scale(1.04);
}

.LatestNews {
    padding: 94px 0 110px;
    background: #fff;
}

.LatestNews .newsList {
    gap: 24px;
    margin-top: 56px;
    padding:18px 0 58px;
    grid-auto-columns: calc((100% - 2 * 24px) / 3);
}

.LatestNews .item a {
    display: block;
    border: 1px solid #ededed;
    background: #fff;
    transition: transform var(--time), box-shadow var(--time), border-color var(--time);
    border-radius: 20px;
}

.LatestNews .item .img_100 {
    height: 350px;
    background: #f2f2f2;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
}

.LatestNews .item .body {
    padding: 30px 30px 32px;
}

.LatestNews .item .date {
    color: var(--orange);
    font-size: 14px;
    font-weight: 700;
}

.LatestNews .item .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 12px;
    color: var(--black);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.LatestNews .item .desc {
    margin-top: 12px;
    color: var(--muted);
}

.LatestNews .item .more {
    display: flex;
    margin-top: 28px;
    color: var(--orange);
    font-weight: 700;
}

.LatestNews .newsDots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: -32px;
}

.LatestNews .newsDots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d6d6d6;
    cursor: pointer;
    transition: all var(--time);
}

.LatestNews .newsDots button.active {
    width: 24px;
    border-radius: 999px;
    background: #00833f;
}

.LatestNews .item a:hover {
    border-color: rgba(242, 122, 26, 0.4);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.09);
    transform: translateY(-6px);
}

.PageHero {
    padding: 30px 0 0px;
    background: #FFF;
}

.PageHero.has-bg {
    position: relative;
    padding: 30px 0 60px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.PageHero.has-bg::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.52) 100%);
    content: "";
}

.PageHero.has-bg .main {
    position: relative;
    z-index: 1;
}

.PageHero.has-bg .crumb a,
.PageHero.has-bg .crumb .sep {
    color: rgba(255, 255, 255, 0.8);
}

.PageHero.has-bg .crumb a:hover {
    color: #fff;
}

.PageHero.has-bg h1 {
    color: #fff;
}

.PageHero.has-bg p {
    color: rgba(255, 255, 255, 0.85);
}

.ProductCategoryHero {
    padding: 70px 0 50px;
    background: #fff;
}

.ProductCategoryHero .categoryHeroLayout {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    align-items: start;
    gap: 60px;
}

.ProductCategoryHero .categoryHeroText {
    padding-top: 0;
}

.ProductCategoryHero h1 {
    position: relative;
    color: var(--green);
    padding-bottom: 18px;
   
}

.ProductCategoryHero h1::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 3px;
    background: #22c96f;
    content: "";
}

.ProductCategoryHero .categoryHeroMedia {
    height:600px;
    overflow: hidden;
    border-radius: 10px;
    background: #e8f3f7;
}

.ProductCategoryHero .categoryHeroMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 20%;
}

.PageHero .crumb {
    color: #777;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}
.PageHero .crumb a {
    color: #777;
    text-decoration: none;
    transition: color var(--time);
}
.PageHero .crumb a:hover {
    color: var(--green);
    text-decoration: underline;
}
.PageHero .crumb .sep {
    color: #bbb;
    margin: 0 2px;
}
.PageHero .crumb .current,
.PageHero .crumb span.current {
    color: var(--orange);
    /* text-shadow: 0 0 10px rgba(34, 201, 111, 0.55); */
}
.PageHero .crumb span{
    color: var(--orange);
}

.PageHero h1 {
    margin-top: 148px;
    color: var(--orange);
    font-size: 60px;
    font-weight: 800;
    line-height: 1.15;
}

.PageHero p {
    max-width: 720px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 20px;
}

.CategoryGrid {
    padding: 70px 0 130px;
    background: #fff;
}

.CategoryGrid .categoryGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.CategoryGrid .item a {
    position: relative;
    display: block;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: none;
    transition: box-shadow var(--time), transform var(--time);
}

.CategoryGrid .item a:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.CategoryGrid .item .cardImage {
    overflow: hidden;
}

.CategoryGrid .item img {
    display: block;
    width: 100%;
    /* height: 340px; */
    height: auto;
    object-fit: cover;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    transition: transform var(--time);
}

.CategoryGrid .item a:hover img {
    transform: scale(1.04);
}

.CategoryGrid .item .cardFooter {
    display: flex;
    align-items: center;
    padding: 14px 4px 6px;
}

.CategoryGrid .item .label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-size: 17px;
    font-weight: 700;
}

.CategoryGrid .item .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-size: 18px;
    font-weight: 700;
    transition: transform var(--time);
}

.CategoryGrid .item a:hover .arrow {
    transform: translate(3px, -3px);
}

.CategoryGrid .item a:hover img {
    transform: scale(1.045);
}

/* ===== Filter Bar (Bauerfeind-style horizontal) ===== */
.filterBar {
    margin-bottom: 24px;
}

.filterBarInner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Active filter chips */
.filterActiveChips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filterChip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--orange);
    border-radius: 99px;
    color: #fff;
    background: var(--orange);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.filterChip.active:hover {
    background: #d46510;
}

.filterClearLink {
    font-size: 13px;
    color: #999;
    text-decoration: underline;
}

.filterClearLink:hover { color: #333; }

/* Toggle buttons */
.filterToggles {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filterDropdown {
    position: relative;
}

.filterToggleBtn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 99px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.filterToggleBtn:hover,
.filterDropdown.open .filterToggleBtn {
    border-color: var(--orange);
    color: var(--orange);
}

.filterToggleBtn.has-active {
    border-color: var(--orange);
    background: #fff8f3;
    color: var(--orange);
}

.filterToggleCaret {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}

.filterDropdown.open .filterToggleCaret {
    transform: rotate(180deg);
}

/* Dropdown panel */
.filterDropdownPanel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    z-index: 100;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    overflow: hidden;
}

.filterDropdown.open .filterDropdownPanel {
    display: block;
}

.filterDropdownInner {
    padding: 10px 0;
    max-height: 320px;
    overflow-y: auto;
}

.filterDropdownItem {
    display: flex;
    align-items: center;
    padding: 9px 20px;
    color: #444;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.15s;
}

.filterDropdownItem:hover {
    background: #f8f8f8;
    color: var(--orange);
}

.filterDropdownItem.active {
    color: var(--orange);
    font-weight: 700;
    background: #fff8f3;
}

/* Price panel */
.filterPricePanel {
    padding: 16px 20px;
}

.filterPriceRow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filterPriceInput {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

.filterPriceInput:focus {
    border-color: var(--orange);
    outline: none;
}

.filterPriceSep {
    color: #999;
    font-size: 14px;
}

.filterPriceGo {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--green);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.filterPriceGo:hover { background: #0ea890; }

.ProductList {
    padding: 80px 0 80px;
    background: #f1fbf5;
}

.ProductList .productGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.ProductList .relatedGrid {
    margin-top: 54px;
}

.ProductList .item a {
    display: block;
    border-radius: 12px;
    background: #fff;
    transition: transform var(--time), box-shadow var(--time), border-color var(--time);
}

.ProductList .item .img_100 {
    height: 320px;
    /* background: #f7f7f7; */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}

.ProductList .item .img_100 img {
    object-fit: contain;
    transition: transform var(--time);
}

.ProductList .item .body {
    padding: 24px 24px 28px;
}

.ProductList .item .title {
    color: var(--black);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
}

.ProductList .item .desc {
    margin-top: 10px;
    color: var(--muted);
}

.ProductList .item .model {
    margin: 8px 0 0;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.ProductList .item a:hover {
    border-color: rgba(242, 122, 26, 0.42);
    /* box-shadow: 0 20px 42px rgba(0, 0, 0, 0.1); */
    transform: translateY(-6px);
}

.ProductList .item a:hover .img_100 img {
    transform: scale(1.04);
}

/* Product pagination */
.productPagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.productPagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    letter-spacing: 0.3px;
}

.productPagination .page-numbers:hover {
    border-color: var(--green);
    color: var(--green);
}

.productPagination .page-numbers.current {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    cursor: default;
}

.productPagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: #999;
    min-width: 32px;
    cursor: default;
}

.productPagination .page-numbers.prev,
.productPagination .page-numbers.next {
    gap: 4px;
}

.productPagination .page-numbers.prev svg,
.productPagination .page-numbers.next svg {
    width: 16px;
    height: 16px;
}

.ProductDetailIntro {
    padding: 78px 0 86px;
    background: #fff;
}

.ProductDetailIntro .detailLayout {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(440px, 1fr);
    gap: 96px;
    align-items: start;
}

.ProductDetailIntro .mainImage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: #f7f7f7;
}

.ProductDetailIntro .mainImage img {
    width: 100%;
    height:100%;
    object-fit: contain;
}

.ProductDetailIntro .mainImage iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

.ProductDetailIntro .thumbList {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.ProductDetailIntro .thumbList .item button {
    position: relative;
    width: 90px;
    height: 90px;
    padding: 8px;
    border: 1px solid #dedede;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--time), transform var(--time);
}

.ProductDetailIntro .thumbList .item button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ProductDetailIntro .thumbList .item.thumb-video .playIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ProductDetailIntro .thumbList .item.thumb-video .playIcon svg {
    width: 12px;
    height: 12px;
    margin-left: 2px;
}

.ProductDetailIntro .thumbList .item button.active,
.ProductDetailIntro .thumbList .item button:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
}

.ProductDetailIntro .detailInfo .backLink {
    display: flex;
    margin-bottom: 18px;
    color: var(--green);
    font-size: 17px;
    font-weight: 700;
}

.ProductDetailIntro .detailInfo h2 {
    max-width: 620px;
    color: #14a88c;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.18;
}

.ProductDetailIntro .detailInfo .code {
    margin-top: 22px;
    color: #777;
    font-size: 24px;
    font-weight: 400;
}

.ProductDetailIntro .productOption {
    position: relative;
    display: grid;
    grid-template-columns: 86px 1fr;
    align-items: center;
    gap: 22px;
    margin-top: 32px;
}

.ProductDetailIntro .productOption .optionName {
    color: #777;
    font-size: 17px;
}

.ProductDetailIntro .optionChips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.ProductDetailIntro .optionChips button {
    min-width: 50px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid #14b7a3;
    border-radius: 5px;
    color: #14a88c;
    font-size: 15px;
    line-height: 1;
    transition: color var(--time), background var(--time), border-color var(--time);
}

.ProductDetailIntro .optionChips button.active,
.ProductDetailIntro .optionChips button:hover {
    color: #fff;
    background: #14b7a3;
}

.ProductDetailIntro .sizeGuide {
    grid-column: 2;
    justify-self: center;
    min-width: 118px;
    height: 34px;
    margin-top: 6px;
    border: none;
    border-radius: 4px;
    background: #777;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--time);
}
.ProductDetailIntro .sizeGuide:hover {
    background: #555;
}

.ProductDetailIntro .productPrice {
    margin: 4px 0 0;
    color: var(--orange);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ProductDetailIntro .productPrice .price-symbol {
    font-size: 18px;
}

.ProductDetailIntro .actionRow {
    margin-top: 50px;
}

.ProductDetailIntro .actionRow .buttonLine {
    width: 100%;
    min-height: 52px;
    border-color: #24c968;
    background: #24c968;
    color: #fff;
}

.ProductDetailIntro .detailAccordions {
    margin-top: 34px;
}

.ProductDetailIntro .accordionToggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #d8d8d8;
    color: #222;
    font-size: 15px;
    font-weight: 700;
}

.ProductDetailIntro .accordionToggle::after {
    position: absolute;
    
    right: 6px;
    content: "+";
}

.ProductDetailIntro .accordionToggle.open::after {
    content: "-";
}

.ProductDetailContent {
    padding: 0 0 50px;
    background: #fff;
}

.NewsArticle {
    padding: 54px 0 96px;
    background: #fff;
}

.NewsArticle .articleLayout {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: start;
    gap: 64px;
}

.NewsArticle .articleMedia {
    height: 420px;
    overflow: hidden;
    border-radius: 24px;
    background: #f2f2f2;
}

.NewsArticle .articleMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.NewsArticle .articleBody {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.NewsArticle .articleBody p {
    margin-top: 22px;
}

.NewsArticle .articleBody p:first-child {
    margin-top: 0;
}

.NewsArticle .buttonWrap {
    display: flex;
    justify-content: center;
    margin-top: 54px;
}

.ProductDetailContent .productDetailTabs {
    display: flex;
    align-items: flex-end;
    gap: 74px;
    border-bottom: 1px solid #cfcfcf;
}

.ProductDetailContent .productDetailTabs button {
    position: relative;
    min-height: 54px;
    color: #111;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    transition: color var(--time);
}

.ProductDetailContent .productDetailTabs button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: var(--green);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity var(--time), transform var(--time);
}

.ProductDetailContent .productDetailTabs button.active,
.ProductDetailContent .productDetailTabs button:hover,
.ProductDetailContent .productDetailTabs button:focus {
    color: var(--green);
}

.ProductDetailContent .productDetailTabs button.active::after,
.ProductDetailContent .productDetailTabs button:hover::after,
.ProductDetailContent .productDetailTabs button:focus::after {
    opacity: 1;
    transform: scaleX(1);
}

.ProductDetailContent .productDetailPanel {
    display: none;
}

.ProductDetailContent .productDetailPanel.active {
    display: block;
}

.ProductDetailContent .contentBlock {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 10px;
    padding-top: 54px;
}

.ProductDetailContent .contentFeaturesTitle {
    grid-column: 1 / -1;
    text-align: center;
    color: #14a88c;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.18;
    margin: 0;
}

.ProductDetailContent .contentText h1,
.ProductDetailContent .contentText h2,
.ProductDetailContent .contentText h3,
.ProductDetailContent .contentText h4,
.ProductDetailContent .contentText h5,
.ProductDetailContent .contentText h6 {
    color: #14a88c;
    font-weight: 700;
    line-height: 1.2;
}

.ProductDetailContent .contentText h1 { font-size: 46px; }
.ProductDetailContent .contentText h2 { font-size: 38px; }
.ProductDetailContent .contentText h3 { font-size: 30px; }
.ProductDetailContent .contentText h4 { font-size: 24px; }
.ProductDetailContent .contentText h5 { font-size: 20px; }
.ProductDetailContent .contentText h6 { font-size: 17px; }

.ProductDetailContent .contentText .subTitle {
    margin-top: 42px;
}

.ProductDetailContent .contentText p {
    margin-top: 22px;
    color: var(--muted);
    font-size: 18px;
}

.ProductDetailContent .specBlock {
    max-width: 900px;
    padding-top: 54px;
}

.ProductDetailContent .specBlock h2 {
    color: #14a88c;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.18;
}

.ProductDetailContent .specList {
    margin-top: 28px;
    border-top: 1px solid #e5e5e5;
}

.ProductDetailContent .specList div {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 17px;
}

.ProductDetailContent .specList dt {
    color: #222;
    font-weight: 700;
    font-size: 17px;
}

.ProductDetailContent .specList dd {
    color: var(--muted);
    font-size: 17px;
}

.ProductGallery {
    padding: 88px 0 98px;
    background: #fff;
}
.ProductVideo .titleCom h2,
.ProductGallery .titleCom h2,
.ProductList .titleCom h2 {
    font-size:34px;
}

.ProductVideo .titleCom h2::after,
.ProductGallery .titleCom h2::after,
.ProductList .titleCom h2::after {
    display: block;
    width: 100px;
    height: 2px;
    margin: 12px auto 0;
    background: #22c96f;
    content: "";
}

/* Product Video Section */
.ProductVideo {
    padding: 88px 0 50px;
    background: #fff;
}
.ProductVideo .youtubeEmbed {
    margin-top: 40px;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}
.ProductVideo .videoWrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}
.ProductVideo .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.ProductVideo .videoControls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.ProductVideo .videoInfo {
    flex: 1;
    min-width: 160px;
}
.ProductVideo .videoTitle {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.ProductVideo .videoPlatform {
    font-size: 13px;
    color: #aaa;
    margin-top: 2px;
}
.ProductVideo .videoButtons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.ProductVideo .videoBtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--time);
    border: none;
}
.ProductVideo .videoBtn:hover {
    opacity: 0.85;
}
.ProductVideo .playBtn {
    background: #fff;
    color: #000;
}
.ProductVideo .playBtn svg {
    width: 16px;
    height: 16px;
}
.ProductVideo .shareBtn {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.ProductVideo .shareBtn svg {
    width: 16px;
    height: 16px;
}

.ProductGallery .galleryGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 46px;
    margin-top: 40px;
}

.ProductGallery .galleryGrid .item {
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
}
.ProductGallery .galleryGrid .item:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transform: translateY(-2px);
    transition: box-shadow var(--time), transform var(--time);
}

.ProductGallery .galleryGrid img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.ProductGallery .galleryGrid .galleryCaption {
    padding: 14px 16px 10px !important;
}
.ProductGallery .galleryGrid .galleryCaption .galleryItemTitle {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #222 !important;
    line-height: 1.3 !important;
}
.ProductGallery .galleryGrid .galleryCaption .galleryItemDesc {
    font-size: 16px !important;
    color: var(--muted) !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

.MaterialsHero {
    padding: 40px 0;
    background: #fff;
}

.MaterialsHero .materialHeroImage {
    position: relative;
    width: var(--main);
    max-width: calc(100% - 120px);
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
}

.MaterialsHero .materialHeroImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.MaterialsHero .materialHeroImage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.MaterialsHero .materialHeroImage::after {
    
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 70%);
    content: "";
}

.MaterialsDetail {
    padding: 0 0 110px;
    background: #fff;
}

.MaterialsDetail .wideImage {
   
    
}

.MaterialsDetail .wideImage img {
    width: 80%;

    margin: 0 auto;
    object-fit: cover;
}

.MaterialsDetail .detailRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 70px;
    margin-top: 88px;
}

.MaterialsDetail .detailRow h2 {
    color: var(--black);
    font-size: 42px;
    line-height: 1.2;
}

.MaterialsDetail .detailRow .tag {
    display: inline-block;
    margin-bottom: 20px;
    color: #666;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.MaterialsDetail .detailRow p {
    margin-top: 24px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    transition: opacity 0.2s ease;
}

/* Tab switching transition */
.MaterialsDetail .detailRow > div.switching h2,
.MaterialsDetail .detailRow > div.switching p {
    opacity: 0;
    transform: translateY(6px);
}

.MaterialsDetail .detailRow > div h2,
.MaterialsDetail .detailRow > div p {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.MaterialsDetail .img_box {
    min-height: 470px;
    height: 470px;
    overflow: hidden;
}

.MaterialsDetail .img_box img {
    transition: opacity 0.35s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.MaterialsDetail .detailRow > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.MaterialsDetail .tabList {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    padding-bottom: 10px;
    
}

.MaterialsDetail .tabList .item button {
    position: relative;
    padding: 12px 0;
    color: #999;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    transition: color 0.25s;
    cursor: pointer;
}

.MaterialsDetail .tabList .item button::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.MaterialsDetail .tabList .item button:hover {
    color: #333;
}

.MaterialsDetail .tabList .item button.active {
    color: var(--green);
}

.MaterialsDetail .tabList .item button.active::after {
    transform: scaleX(1);
}

.CatalogueIntro {
    padding: 80px 0 120px;
    background: #fff;
}

.CatalogueIntro .introLayout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 220px;
    align-items: start;
}

.CatalogueIntro .introText h2 {
    color: var(--black);
    font-size: 50px;
    line-height: 1.18;
}

.CatalogueIntro .introText .eyebrow {
    margin-top: 16px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.CatalogueIntro .introText p {
    margin-top: 34px;
    color: var(--muted);
    font-size: 18px;
}

.CatalogueFabricImage {
    padding: 0 0 80px;
    background: #fff;
}

.CatalogueFabricImage img {
    /* width: min(1160px, 100%); */
    width: 100%;
    margin: 0 auto;
}

.CertificationList {
    padding: 100px 0 112px;
    background: #FFF;
}

.CertificationList .certGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 58px;
}

.CertificationList .item {
    min-height: 174px;
    padding: 32px 34px;
    border: 1px solid #ececec;
    background: #f8f8f6;
    transition: transform var(--time), box-shadow var(--time), border-color var(--time);
}

.CertificationList .item h3 {
    color: var(--black);
    font-size: 24px;
    line-height: 1.3;
}

.CertificationList .item p {
    margin-top: 16px;
    color: var(--muted);
}

.CertificationList .item:hover {
    border-color: rgba(242, 122, 26, 0.35);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.CatalogueCta {
    width: 100%;
    padding: 122px 0;
    background: #f1fbf5;
}

.CatalogueCta .ctaWrap {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    align-items: center;
    gap: 100px;
}

.CatalogueCta .ctaBody {
    color: var(--black);
}

.CatalogueCta .ctaBody h2 {
    max-width: 560px;
    font-size: 42px;
    line-height: 1.18;
}

.CatalogueCta .ctaBody h2 span {
    color: var(--orange);
}

.CatalogueCta .ctaBody p {
    max-width: 560px;
    margin-top: 28px;
    color: var(--muted);
    font-size: 18px;
}

.CatalogueCta .ctaBody h2 {
    max-width: 560px;
    font-size: 42px;
    line-height: 1.18;
}

.CatalogueCta .ctaBody h2 span {
    color: rgba(18, 97, 52);
}

.CatalogueCta .ctaBody p {
    max-width: 560px;
    margin-top: 28px;
    color: var(--muted);
    font-size: 18px;
}

.CatalogueCta .ctaButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
}
.CatalogueCta .buttonLine {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.buttonLine1 {
    background-color: rgba(35, 197, 94);
    color: #FFF;
}

.CatalogueCta .ctaMedia button {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
}

.CatalogueCta .ctaMedia img {
    width: 100%;
    aspect-ratio: 1024 / 574;
    object-fit: cover;
}
.CatalogueCta .ctaMedia video {
    width: 100%;
    aspect-ratio: 1024 / 574;
    object-fit: cover;
}

.CatalogueCta .ctaVideoWrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 574;
    overflow: hidden;
    border-radius: 22px;
    background: #000;
}

.CatalogueCta .ctaMedia button::after {
    top: 50%;
    left: 50%;
    width: 86px;
    height: 86px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 36px;
    line-height: 86px;
    text-align: center;
    transform: translate(-50%, -50%);
    content: "\25B6";
}

.ExhibitionGallery {
    padding: 95px 0 0;
    background: #fff;
}

.ExhibitionGallery .exhibitionCarousel {
    position: relative;
    margin-top: 56px;
    overflow: hidden;
}

/* .ExhibitionGallery .exhibitionViewport {
    width: min(845px, 68%);
    margin: 0 auto;
    /* overflow: visible; */
    /* overflow: hidden; */
/* } */

/* .ExhibitionGallery .galleryList {
    position: relative;
    height: 420px;
}

.ExhibitionGallery .item {
    
    top: 0;
    left: 50%;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 16px;
    background: #eee;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.88);
    transition: left var(--time), opacity var(--time), transform var(--time);
}

.ExhibitionGallery .item.active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.ExhibitionGallery .item.prev {
    left: -48%;
    opacity: 1;
}

.ExhibitionGallery .item.next {
    left: 148%;
    opacity: 1;
}

.ExhibitionGallery .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--time);
}

.ExhibitionGallery .item:hover img {
    transform: scale(1.04);
}

.ExhibitionGallery .exhibitionPrev,
.ExhibitionGallery .exhibitionNext {
    
    top: 44%;
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--green);
    font-size: 30px;
    line-height: 1;
}

.ExhibitionGallery .exhibitionPrev {
    left: 22%;
}

.ExhibitionGallery .exhibitionNext {
    right: 22%;
}

.ExhibitionGallery .exhibitionDots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.ExhibitionGallery .exhibitionDots button {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6d6d6;
}

.ExhibitionGallery .exhibitionDots button.active {
    width: 24px;
    border-radius: 999px;
    background: var(--green);
} */

.ContactForm {
    padding: 80px 0 118px;
    background: #fff;
}

.ContactForm .contactLayout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 80px;
}

.ContactForm .contactAside h1 {
    color: #22c96f;
    font-size: 58px;
    line-height: 1.12;
}

.ContactForm .contactAside .img_box {
    margin-top: 34px;
}

.ContactForm .formGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 32px;
}

.ContactForm .field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ContactForm .field.wide {
    grid-column: 1 / -1;
}

.ContactForm .field label {
    color: #222;
    font-weight: 800;
}

.ContactForm .field > input,
.ContactForm .field textarea,
.ContactForm .customSelect .selectCurrent {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border: 1px solid #dedede;
    background: #fff;
    color: #555;
    transition: border-color var(--time), box-shadow var(--time);
}

.ContactForm .field textarea {
    min-height: 168px;
    padding-top: 16px;
    resize: vertical;
}

.ContactForm .field > input:focus,
.ContactForm .field textarea:focus,
.ContactForm .customSelect.open .selectCurrent,
.ContactForm .customSelect .selectCurrent:hover {
    border-color: var(--orange);
    box-shadow: 0 12px 24px rgba(242, 122, 26, 0.11);
}

.ContactForm .optionList {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 6px;
}

.ContactForm .optionList label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    color: #333;
    font-weight: 400;
    line-height: 1.2;
}

.ContactForm .optionList input {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    min-height: 0;
    padding: 0;
    border: 1px solid #c8c8c8;
    border-radius: 50%;
    appearance: none;
    accent-color: var(--orange);
    transition: background var(--time), border-color var(--time);
}

.ContactForm .optionList input:checked {
    border-color: #14b7a3;
    background: radial-gradient(circle at center, #14b7a3 0 42%, transparent 45%);
}

.ContactForm .customSelect {
    position: relative;
}

.ContactForm .customSelect .selectCurrent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ContactForm .customSelect .selectCurrent svg {
    width: 13px;
    transition: transform var(--time);
}

.ContactForm .customSelect .selectMenu {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 8px);
    z-index: 4;
    width: 600px;
    max-width: 90vw;
    max-height: 380px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--time), transform var(--time);
}

.ContactForm .customSelect .selectMenu button {
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    font-size: 13px;
    border-radius: 6px;
}

.ContactForm .customSelect .selectMenu button:hover,
.ContactForm .customSelect .selectMenu button.active {
    color: var(--orange);
    background: #fff3e8;
}

.ContactForm .customSelect.open .selectCurrent svg {
    transform: rotate(180deg);
}

.ContactForm .customSelect.open .selectMenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ContactForm .submitWrap {
    margin-top: 34px;
}

.submitBtn {
    gap: 10px;
}

.submitBtn .submitArrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.submitBtn:hover .submitArrow {
    transform: translateX(5px);
}

.SiteFooter {
    background: #144c22;
    color: #fff;
}

.SiteFooter .footerSlogan {
    padding: 42px 0 0;
    color: var(--orange);
    font-size: 20px;
    font-weight: 700;
}

.SiteFooter .footerTop {
    display: grid;
    grid-template-columns: 0.75fr 1.35fr 0.9fr;
    gap: 50px;
    padding: 26px 0 46px;
}

.SiteFooter h3 {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 17px;
    font-weight: 700;
}

.SiteFooter .footerLinks {
    display: grid;
    gap: 10px;
    color: rgba(255, 255, 255, 0.72);
}

.SiteFooter .footerLinks a {
    transition: color var(--time), transform var(--time);
}

.SiteFooter .footerLinks a:hover {
    color: var(--orange);
    transform: translateX(3px);
}

.SiteFooter .contactGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.SiteFooter .contactCompany {
    color: #fff;
    font-weight: 700;
}

.SiteFooter .contactAddress {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
}

.SiteFooter .contactList {
    display: grid;
    gap: 10px;
    color: rgba(255, 255, 255, 0.72);
}

.SiteFooter .contactList li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.SiteFooter .contactList .icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--orange);
}

.SiteFooter .contactList .icon svg {
    width: 100%;
    height: 100%;
}

.SiteFooter .contactList a {
    color: inherit;
    transition: color var(--time);
}

.SiteFooter .contactList a:hover {
    color: var(--orange);
}

.SiteFooter .newsletter p {
    color: rgba(255, 255, 255, 0.72);
}

.SiteFooter .newsletterForm {
    display: flex;
    margin-top: 24px;
    gap: 20px;
}

.SiteFooter .socialLinks {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.SiteFooter .socialLinks a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #144c22;
    transition: background var(--time), transform var(--time);
}

.SiteFooter .socialLinks a svg {
    width: 16px;
    height: 16px;
}

.SiteFooter .socialLinks a:hover {
    background: var(--orange);
    color: #fff;
    transform: translateY(-3px);
}

.SiteFooter .newsletterForm input {
    flex: 1;
    min-height: 56px;
    padding: 0 24px;
    /*color: #fff;*/
    color: #000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
        background: rgba(255, 255, 255, 0.9);
}

.SiteFooter .newsletterForm button {
    min-width: 160px;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    transition: background var(--time);
    border-radius: 50px;
}

.SiteFooter .newsletterForm button:hover {
    background: var(--orange-dark);
}

.SiteFooter .footerBottom {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}

.SiteFooter .newsletterMsg {
    margin-top: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.SiteFooter .newsletterMsg.is-ok {
    color: #9be0a8;
}

.SiteFooter .newsletterMsg.is-err {
    color: #ffb3b3;
}


.ModalLayer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(0, 0, 0, 0.56);
}

.ModalLayer.open {
    display: flex;
}

.ModalLayer .modalBox {
    position: relative;
    width: min(760px, 100%);
    max-height: 86vh;
    overflow: auto;
    padding: 42px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--time), transform var(--time);
}

.ModalLayer.open .modalBox {
    opacity: 1;
    transform: translateY(0);
}

.ModalLayer .modalClose {
    
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f2f2f2;
    transition: background var(--time), color var(--time);
}

.ModalLayer .modalClose:hover {
    color: #fff;
    background: var(--orange);
}

.ModalLayer .modalContent h3 {
    color: var(--black);
    font-size: 26px;
}

.ModalLayer .modalContent p {
    margin-top: 12px;
    color: var(--muted);
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .main {
        max-width: calc(100% - 56px);
    }

    .SiteHeader .headerBody {
        height: auto;
        min-height: 92px;
    }

    .SiteHeader .navList {
        gap: 20px;
        font-size: 13px;
    }

    .SiteHeader .searchBox {
        display: none;
    }

    .HomeHero .heroTrack button {
        width: 40px;
        height: 40px;
        font-size: 22px;
        opacity: 1;
    }

    .MaterialProperties .propertyList {
        grid-template-columns: repeat(4, 1fr);
    }

    .BodyPartFinder .finderLayout,
    .ProductDetailIntro .detailLayout,
    .ProductDetailContent .contentBlock,
    .MaterialsDetail .detailRow,
    .CatalogueIntro .introLayout,
    .CatalogueCta .ctaWrap,
    .ContactForm .contactLayout {
        grid-template-columns: 1fr;
    }

    .NewsArticle .articleLayout {
        grid-template-columns: 1fr 0.8fr;
        gap: 36px;
    }

    .NewsArticle .articleMedia {
        height: 320px;
    }

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

    .FeaturedProducts .productGrid .item {
        flex: 0 0 calc((100% - 16px) / 2);
    }

    .ProductCategories .categoryCardList .item {
        flex: 0 0 calc((100% - 2 * 25px) / 3);
    }

    .LatestNews .newsList {
        grid-auto-columns: calc((100% - 24px) / 2);
    }

    .scrollArrows {
        left: -20px;
        right: -20px;
    }

    .scrollArrows button {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .CategoryGrid .categoryGrid,
    .CertificationList .certGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .main {
        max-width: calc(100% - 32px);
    }

    .titleCom h2,
    .BodyPartFinder .finderInfo h2,
    .ProductCategories .categoryIntro h2,
    .PageHero h1,
    .CatalogueIntro .introText h2,
    .ContactForm .contactAside h1 {
        font-size: 34px;
    }

    .SiteTopbar {
        height: auto;
        padding: 8px 16px;
        line-height: 1.4;
    }

    .SiteHeader .headerBody {
        height: 78px;
        gap: 12px;
    }

    .SiteHeader .brand {
        gap: 10px;
        font-size: 18px;
    }

    .SiteHeader .brand img {
        width: 42px;
        height: 42px;
    }
    .ExhibitionGallery .main {
    overflow: hidden;
}
    .SiteHeader .navList {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        display: none;
        max-height: calc(100vh - 78px);
        padding: 10px 20px 26px;
        overflow-y: auto;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
    }

    .SiteHeader .navList li {
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .SiteHeader .navList li:last-child {
        border-bottom: none;
    }

    .SiteHeader .navList > li > a {
        display: block;
        padding: 15px 2px;
        font-size: 16px;
    }

    .SiteHeader .navList li.hasDropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 4px 0;
    }

    .SiteHeader .navList li.hasDropdown > a {
        flex: 1 1 auto;
        padding: 11px 2px;
    }

    .SiteHeader .navList a .navCaret {
        display: none;
    }

    .SiteHeader .navDropToggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-left: auto;
        padding: 0;
        color: #444;
        background: var(--soft);
        border: none;
        border-radius: 50%;
        transition: transform var(--time), background var(--time), color var(--time);
    }

    .SiteHeader .navDropToggle svg {
        width: 13px;
        height: 13px;
        transition: transform var(--time);
    }

    .SiteHeader .navList li.hasDropdown.open .navDropToggle {
        color: #fff;
        background: var(--green);
    }

    .SiteHeader .navList li.hasDropdown.open .navDropToggle svg {
        transform: rotate(180deg);
    }

    .SiteHeader .navDropdown,
    .SiteHeader .navDropdown.wide {
        position: static;
        flex: 1 0 100%;
        min-width: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        margin: 2px 0 10px;
        padding: 10px 14px;
        background: var(--soft);
        border-radius: 12px;
        box-shadow: none;
    }

    .SiteHeader .navDropdown ul,
    .SiteHeader .navDropdown.wide ul {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .SiteHeader .navDropdown a {
        padding: 9px 4px;
        color: #3a3a3a;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .SiteHeader .navDropdown li:last-child a {
        border-bottom: none;
    }

    .SiteHeader .headerActions {
        gap: 8px;
    }

    .SiteHeader .searchBox {
        display: none;
    }

    .LangSwitch .langCurrent {
        min-width: 78px;
        height: 38px;
        padding: 0 8px;
        gap: 5px;
        font-size: 13px;
    }

    .SiteHeader .LangSwitch {
        display: none;
    }

    .LangSwitch .langCurrent img {
        display: none;
    }

    .SiteHeader .menuButton {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: fixed;
        top: 17px;
        right: 16px;
        left: auto;
        z-index: 1000;
        background: #fff;
    }

    .HomeHero {
        --hero-gutter: 34px;
        --hero-peek: 28px;
    }

    .HomeHero .heroViewport {
        /* aspect-ratio: 375 / 420; */
    }
    .exhibitionCarousel{
    overflow:hidden;
}
.CatalogueFabricImage .main {
    width: 100%!important;
    max-width: 100%!important;
}


.ProductDetailIntro .detailLayout,.ProductDetailContent .contentBlock {
    grid-template-columns: 1fr!important;
}

.LatestNews .item .img_100,.newsList .img_100 img {
    height: auto!important;
}


.PageHero h1 {
    margin-top: 30px;
}
.CatalogueIntro .img_box img {
    width: 50%;
    margin: 0 auto;
}
.PageHero {
    padding: 30px 0!important;
}






    .HomeHero .heroTrack button {
        width: 34px;
        height: 34px;
        font-size: 18px;
        opacity: 1;
    }

    .HomeHero .heroTrack .heroPrev {
        left: 0;
    }

    .HomeHero .heroTrack .heroNext {
        right: 0;
    }

    .HomeHero .heroDots {
        bottom: 14px;
    }

    .MaterialProperties,
    .FeaturedProducts,
    .LatestNews,
    .PageHero,
    .CategoryGrid,
    .ProductFilter,
    .ProductList,
    .ProductDetailIntro,
    .ProductDetailContent,
    .ProductGallery,
    .CertificationList,
    .ExhibitionGallery,
    .ContactForm {
        padding: 54px 0;
    }

    .MaterialProperties .propertyList,
    .FeaturedProducts .productGrid,
    .CategoryGrid .categoryGrid,
    .ProductList .productGrid,
    .ProductDetailIntro .detailLayout,
    .ProductDetailContent .contentBlock,
    .ProductGallery .galleryGrid {
        gap: 24px;
    }
    .ProductGallery .galleryCaption {
        padding: 10px 12px 8px !important;
    }
    .ProductGallery .galleryItemTitle {
        font-size: 13px !important;
    }
    .ProductGallery .galleryItemDesc {
        font-size: 11px !important;
    }
    .CertificationList .certGrid,
    .CatalogueIntro .introLayout,
    .CatalogueCta .ctaWrap,
    .ContactForm .contactLayout,
    .ContactForm .formGrid,
    .NewsArticle .articleLayout,
    .SiteFooter .footerTop {
        grid-template-columns: 1fr;
    }

    .FeaturedProducts .productGrid .item {
        flex: 0 0 85%;
    }

    .ProductCategories .categoryCardList .item {
        flex: 0 0 calc((100% - 25px) / 2);
    }

    .LatestNews .newsList {
        grid-auto-columns: 100% !important;
        gap: 16px;
        scroll-snap-stop: always;
    }

    .LatestNews .newsList .item {
        width: 100% !important;
    }

    .LatestNews .item .img_100 {
        height: 220px !important;
    }

    .LatestNews .item .img_100 img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }

    .LatestNews .item .body {
        padding: 22px 24px 24px;
    }

    .LatestNews .item .desc {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .LatestNews .item .more,
    .LatestNews .newsList .newbottom img {
        margin-top: 20px;
    }

    .MaterialProperties .propertyList {
        display: flex;
        gap: 14px;
        margin: 38px -16px 0;
        padding: 4px calc((100vw - 244px) / 2) 8px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc((100vw - 244px) / 2);
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }

    .MaterialProperties .propertyList::-webkit-scrollbar {
        display: none;
    }

    .MaterialProperties .item {
        display: flex;
        flex: 0 0 244px;
        min-height: 238px;
        padding: 18px 20px;
        border: 0;
        border-radius: 0;
        background: transparent;
        flex-direction: column;
        align-items: center;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .MaterialProperties .item:nth-child(8n) {
        border-right: 0;
    }

    .MaterialProperties .item h3 {
        width: 100%;
        min-height: 44px;
        padding-bottom: 10px;
        font-size: 15px;
        line-height: 1.35;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .MaterialProperties .item h3::after {
        flex: 0 0 2px;
    }

    .MaterialProperties .item p {
        width: 100%;
        min-height: 54px;
        margin: 12px auto 0;
        font-size: 13px;
        line-height: 1.4;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .MaterialProperties .propertyArrows {
        position: absolute;
        top: calc(50% + 19px);
        left: -2px;
        right: -2px;
        z-index: 3;
        display: flex;
        justify-content: space-between;
        pointer-events: none;
        transform: translateY(-50%);
    }

    .MaterialProperties .propertyArrows button {
        display: flex;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        background: #fff;
        color: var(--green);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
        align-items: center;
        justify-content: center;
        font-size: 22px;
        line-height: 1;
        pointer-events: auto;
    }

    .MaterialProperties .propertyDots {
        display: flex;
        min-height: 22px;
        margin-top: 18px;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .MaterialProperties .propertyDots button {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #d7ddd9;
        transition: width var(--time), background var(--time);
    }

    .MaterialProperties .propertyDots button.active {
        width: 24px;
        background: var(--green);
    }

    .MaterialProperties .buttonWrap {
        margin-top: 34px;
    }

    .scrollArrows {
        left: 0;
        right: 0;
    }

    .scrollArrows button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .BodyPartFinder {
        padding: 54px 0;
    }

    .BodyPartFinder .finderLayout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .BodyPartFinder .bodyPartList {
        grid-template-columns: 1fr;
    }

    .FeaturedProducts .item .img_100,
    .LatestNews .item .img_100,
    .ProductList .item .img_100 {
        height: 260px;
    }

    .MaterialsHero .materialHeroImage,
    .MaterialsDetail .wideImage {
        /* height: 520px; */
        height: auto;
        max-width: calc(100% - 32px);
    }
    .MaterialsDetail .wideImage {
        width: 100%!important;
        max-width: 100%!important;
    }
    .MaterialsHero .materialHeroImage.materialHeroVideo {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .MaterialsDetail .detailRow {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .MaterialsDetail .img_box {
        height: 360px;
    }

    .MaterialsDetail .tabList {
        flex-direction: column;
        gap: 16px;
        justify-content: flex-start;
        border-bottom: none;
    }

    .MaterialsDetail .tabList .item button {
        display: block;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .MaterialsDetail .tabList .item button::after {
        display: none;
    }

    .ProductDetailContent .productDetailTabs {
        gap: 34px;
    }

    .ProductDetailContent .productDetailTabs button {
        min-height: 38px;
        font-size: 12px;
    }

    .ProductDetailContent .contentBlock,
    .ProductDetailContent .specBlock {
        padding-top: 34px;
    }

    .ProductDetailContent .contentText h2,
    .ProductDetailContent .specBlock h2 {
        font-size: 28px;
    }

    .ProductDetailContent .contentText p {
        font-size: 15px;
    }

    .ProductDetailContent .specList div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .CatalogueIntro {
        padding: 50px 0 70px;
    }

    .CatalogueIntro .introLayout {
        gap: 32px;
    }

    .CatalogueIntro .img_box {
        order: -1;
    }

    .CatalogueIntro .introText h2 {
        font-size: 30px;
    }

    .CatalogueIntro .introText p {
        font-size: 16px;
        margin-top: 20px;
    }

    .CatalogueCta {
        padding: 60px 0;
    }

    .CatalogueCta .ctaWrap {
        gap: 32px;
    }

    .CatalogueCta .ctaBody h2 {
        font-size: 28px;
    }

    .CatalogueCta .ctaBody p {
        font-size: 16px;
    }

    .CatalogueCta .ctaButtons {
        flex-direction: column;
        align-items: stretch;
    }

    .CatalogueCta .buttonLine {
        width: 100%;
    }

    .CatalogueCta .ctaMedia {
        order: -1;
    }

    .CatalogueCta .ctaMedia button,
    .CatalogueCta .ctaVideoWrap {
        border-radius: 16px;
    }

    .CatalogueCta .ctaMedia button::after {
        width: 60px;
        height: 60px;
        font-size: 24px;
        line-height: 60px;
        border-radius: 12px;
    }

    .ContactForm .field.wide {
        grid-column: auto;
    }

    .SiteFooter .footerTop {
        gap: 34px;
        padding: 46px 0;
    }

    .SiteFooter .contactGrid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .SiteFooter .newsletterForm {
        flex-direction: column;
    }

    .SiteFooter .newsletterForm button {
        min-height: 52px;
    }

    .MaterialProperties .item:hover,
    .FeaturedProducts .item a:hover,
    .LatestNews .item a:hover,
    .ProductList .item a:hover,
    .CertificationList .item:hover,
    .buttonLine:hover {
        transform: none;
    }
}

/* accordion content */
.ProductDetailIntro .accordionContent {
	display: none;
	padding: 16px 0;
	border-bottom: 1px solid #d8d8d8;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.65;
}
.ProductDetailIntro .accordionContent p {
	margin-top: 8px;
}
.ProductDetailIntro .accordionToggle.open + .accordionContent {
	display: block;
}


/* Size Guide Modal */
.SizeGuideModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.SizeGuideModal.open {
    display: flex;
}
.sizeGuideOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}
.sizeGuideBox {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    overflow: auto;
}
.sizeGuideBox img {
    display: block;
    max-width: 100%;
    height: auto;
}
.sizeGuideClose {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}
.sizeGuideClose:hover {
    background: rgba(0,0,0,0.85);
}

.BodyPartFinder .markerList {
    position: absolute;
    inset: 0;
    z-index: 2;
    list-style: none;
    padding-left: 0;
}
.BodyPartFinder .markerList .item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #22c96f;
    color: #fff;
    box-shadow: 0 10px 24px rgba(242,122,26,0.35);
    font-size: 0;
    transition: transform 0.28s, box-shadow 0.28s;
}
.BodyPartFinder .markerList .item a {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.BodyPartFinder .markerList .item a .neirong {
    width: 200px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    margin-top: 55px;
    color: #000;
    font-size: 16px;
    display: none;
    padding: 10px;
}
.BodyPartFinder .markerList .item a:hover .neirong {
    display: block;
}
.BodyPartFinder .markerList .item::after {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    content: "";
}
.BodyPartFinder .markerList .item:hover {
    box-shadow: 0 16px 32px rgba(242,122,26,0.42);
    transform: scale(1.08);
}
.BodyPartFinder .markerList .item:nth-child(1) { top: 0%; left: 93%; }
.BodyPartFinder .markerList .item:nth-child(2) { top: 8%; left: 43%; }
.BodyPartFinder .markerList .item:nth-child(3) { top: 21%; left: 5%; }
.BodyPartFinder .markerList .item:nth-child(4) { top: 47%; left: 86%; }
.BodyPartFinder .markerList .item:nth-child(5) { top: 81%; left: 22%; }























.MaterialProperties .main {
    width: auto;
}
.swiper-button-lock {
    display: block!important;
}
.newsList .img_100 img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.newsList .newbottom {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}
.newsList .newbottom img {
    display: block;
    margin-top: 28px;
}
.newsList li {
    width: 100%!important;
}
.CategoryGrid .item .label img {
    display: block;
    width: 25px;
    height: 25px;
}
.CategoryGrid .item .label {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    padding: 10px;
}





























/* .ExhibitionGallery .gallerySwiper {
    width: min(845px, 68%);
    margin: 0 auto;
    overflow: visible;
    padding: 40px 0; 
}
.ExhibitionGallery .swiper-wrapper {
    display: flex !important;
    width: 100% !important;
    height: 420px;
}
.ExhibitionGallery .swiper-slide {
    flex-shrink: 0 !important;
    width: 80% !important;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    background: #eee;
    transition: transform 0.3s ease;
    transform: scale(0.8);
}
.ExhibitionGallery .swiper-slide-active {
    transform: scale(1);
}
.ExhibitionGallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--time);
}
.ExhibitionGallery .swiper-slide:hover img {
    transform: scale(1.04);
}
.ExhibitionGallery .swiper-pagination {
    position: static !important;
    margin-top: 10px;
}
.ExhibitionGallery .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6d6d6;
    opacity: 1;
}
.ExhibitionGallery .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 999px;
    background: var(--green);
}
.ExhibitionGallery .swiper-button-prev,
.ExhibitionGallery .swiper-button-next {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    color: var(--green);
}
.ExhibitionGallery .swiper-button-prev {
    left: calc((100% - min(845px, 68%)) / 2 - 50px);
}
.ExhibitionGallery .swiper-button-next {
    right: calc((100% - min(845px, 68%)) / 2 - 50px);
}
.ExhibitionGallery .swiper-button-prev::after,
.ExhibitionGallery .swiper-button-next::after {
    font-size: 18px;
}
@media only screen and (max-width: 767px) {
    .ExhibitionGallery .gallerySwiper {
        width: 100%;
        padding: 20px 0;
    }
    .ExhibitionGallery .swiper-wrapper {
        height: 280px;
    }
    .ExhibitionGallery .swiper-slide {
        height: 280px;
        width: 85% !important;
    }
    .ExhibitionGallery .swiper-button-prev,
    .ExhibitionGallery .swiper-button-next {
        display: none;
    }
} */
 







.ExhibitionGallery .exhibitionCarousel {
    position: relative;
    width: 100%;
    overflow: visible;
    padding: 60px 0;
}

.ExhibitionGallery .gallerySwiper {
    width: 100%;
    overflow: visible !important;
}

.ExhibitionGallery .swiper-wrapper {
    display: flex !important;
    width: 100% !important;
}

.ExhibitionGallery .swiper-slide {
    flex-shrink: 0 !important;
    width: 60% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ExhibitionGallery .slide-inner {
    width: 100%;
    height: 560px;
    border-radius: 16px;
    overflow: hidden;
    background: #eee;
    transition: transform 0.32s ease;
    transform: scale(0.82);
}

.ExhibitionGallery .swiper-slide-active .slide-inner {
    transform: scale(1);
}

.ExhibitionGallery .slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--time);
}

.ExhibitionGallery .slide-inner:hover img {
    transform: scale(1.04);
}

/* Slide caption overlay */
.ExhibitionGallery .slideCaption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px 24px;
    color: #fff;
}

.ExhibitionGallery .slideTitle {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.ExhibitionGallery .slideLocation {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.9;
}

.ExhibitionGallery .slideLocation img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.ExhibitionGallery .swiper-pagination {
    position: static !important;
    margin-top: 24px;
}

.ExhibitionGallery .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6d6d6;
    opacity: 1;
}

.ExhibitionGallery .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 999px;
    background: var(--green);
}

.ExhibitionGallery .swiper-button-prev,
.ExhibitionGallery .swiper-button-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    color: var(--green);
}

.ExhibitionGallery .swiper-button-prev {
    left:260px;
}

.ExhibitionGallery .swiper-button-next {
    right:260px;
}

.ExhibitionGallery .swiper-button-prev::after,
.ExhibitionGallery .swiper-button-next::after {
    font-size:28px;
}

@media only screen and (max-width: 767px) {
    .ExhibitionGallery .exhibitionCarousel {
        padding: 30px 0;
    }

    .ExhibitionGallery .swiper-slide {
        width: 75% !important;
    }

    .ExhibitionGallery .slide-inner {
        height: 380px;
        transform: scale(0.9);
    }

    .ExhibitionGallery .swiper-slide-active .slide-inner {
        transform: scale(1);
    }

    .ExhibitionGallery .swiper-button-prev,
    .ExhibitionGallery .swiper-button-next {
        display: none;
    }
}







.cataspandiv {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.slide-inner {
    position: relative;
}
.cataspandiv div {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.cataspandiv .title {
    font-size: 24px;
    color: #FFF;
    font-weight: bold;
}
.cataspandiv div span {
    font-size: 18px;
    color: #FFF;
}
.cataspandiv img {
    display: block;
    width: 25px!important;
}
/* 产品卡片 hover 切换第二张图 */
.productGrid .item .img_100 { position: relative; }
.productGrid .item .img_100 .img-primary,
.productGrid .item .img_100 .img-hover {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* object-fit: cover; */
    transition: opacity 0.4s ease;
}
.productGrid .item .img_100 .img-primary { opacity: 1; }
.productGrid .item .img_100 .img-hover { opacity: 0; }
.productGrid .item a:hover .img-hover { opacity: 1; }
.productGrid .item a:hover .img-primary { opacity: 0; }

/* 只有一个图片时正常显示 */
.productGrid .item .img_100 .img-primary:only-child {
    position: static;
}

/* ===== Mobile filter bar ===== */
@media only screen and (max-width: 767px) {
    .filterBarInner {
        gap: 8px;
    }

    .filterToggles {
        gap: 6px;
    }

    .filterToggleBtn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .filterDropdownPanel {
        left: 0;
        right: auto;
        min-width: 200px;
    }

    .filterActiveChips {
        width: 100%;
    }

    .productResults .productGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}















#sub-frame-error {
    height: 800px;
}
.MaterialsDetail .img_box {
    height: auto!important;
}
.ProductDetailIntro .optionChips button {
    padding: 5px 20px!important;
}
.ProductDetailIntro .productOption .optionName {
    font-size: 19px!important;
}
.ProductDetailIntro .detailInfo .code {
    font-size: 26px!important;
}
.proNR-titleh2 {
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
    color: #14a88c;
    font-size: 38px;
}










@media screen and (max-width: 480px) {
    .ProductDetailIntro .thumbList {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .ProductList .productGrid,.ProductGallery .galleryGrid,.CategoryGrid .categoryGrid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .ProductCategoryHero .categoryHeroLayout {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.ProductList .relatedCarousel {
    position: relative;
}

.ProductList .relatedGrid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 56px) / 3);
    grid-template-columns: none !important;
    gap: 28px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    align-items: start;
}

.ProductList .relatedGrid::-webkit-scrollbar {
    display: none;
}

.ProductList .relatedGrid .item {
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.ProductList .relatedGrid .item a {
    height: auto;
}

.ProductList .relatedGrid .img_100 {
    height: auto !important;
}

.ProductList .relatedGrid .img-primary {
    position: static !important;
    width: 100%;
    height: auto !important;
    object-fit: contain;
}

.ProductList .relatedGrid .img-hover {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ProductList .relatedArrows {
    position: absolute;
    top: 50%;
    left: -18px;
    right: -18px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-50%);
}

.ProductList .relatedArrows button {
    display: flex;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fff;
    color: var(--green);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    pointer-events: auto;
}

.ProductList .relatedDots {
    display: flex;
    min-height: 22px;
    margin-top: 26px;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.ProductList .relatedDots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d7ddd9;
    cursor: pointer;
    transition: width var(--time), background var(--time);
}

.ProductList .relatedDots button.active {
    width: 24px;
    background: var(--green);
}

@media only screen and (min-width: 1200px) {
    .ProductList .relatedGrid {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: repeat(4, 1fr) !important;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .ProductList .relatedArrows,
    .ProductList .relatedDots {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .ProductList .relatedGrid {
        grid-auto-columns: calc((100% - 24px) / 2);
        gap: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .ProductList .relatedGrid {
        grid-auto-columns: calc(100vw - 74px);
        gap: 16px;
        margin-top: 38px;
        padding-inline: calc((100% - (100vw - 74px)) / 2);
        scroll-padding-inline: calc((100% - (100vw - 74px)) / 2);
    }

    .ProductList .relatedArrows {
        left: -2px;
        right: -2px;
    }

    .ProductList .relatedArrows button {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .ProductList .relatedGrid .item {
        width: 100% !important;
    }

    .ProductList .relatedDots {
        margin-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .MaterialProperties .propertyList,
    .ProductList .relatedGrid {
        scroll-behavior: auto;
    }

    .ProductList .relatedDots button {
        transition: none;
    }

    .ProductList .relatedArrows button {
        transition: none;
    }

    .MaterialProperties .propertyList {
        scroll-behavior: auto;
    }

    .MaterialProperties .propertyDots button {
        transition: none;
    }
}