/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0; list-style: none;}
img{display: block; max-width: 100%; image-rendering: -webkit-optimize-contrast;}
img.styled-image{border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *, *:before, *:after{box-sizing: border-box;}

html, body{height: 100%; width: 100%; font-family: "Inter", sans-serif; line-height: 1.65; color: #333;}
html{scroll-behavior: smooth;}
html.no-scroll, body.no-scroll{overflow: hidden; overscroll-behavior: contain; scroll-behavior: auto !important;}
hr{display: block; margin: 35px 0; border: none; border-top: 1px #eee solid;}
::-moz-selection{background: #E96B0B; color: #fff; text-shadow: none} ::selection{background: #E96B0B; color: #fff; text-shadow: none}

.body-overlay{display: none; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.75); width: 100%; height: 100%; z-index: 99999;}

.section{padding: 10% 0;}
.wrap{width: 100%; max-width: 1800px; margin: auto; padding: 0 50px;}

.flex-row{display: flex; flex-wrap: wrap; gap: 25px 5%;}
.flex-col{flex: 1;}
.col-4{max-width: 40%;}

.grey-bg{background: #fafafa;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{font-family: "Saira", sans-serif; font-weight: 700; text-transform: uppercase; line-height: 1.15;}
a{text-decoration: none; color: inherit; cursor: pointer; transition: all .2s ease-in-out;} a:hover{color: inherit;}
strong{font-weight: 700;}

.heading-underline{position: relative; margin-bottom: 35px;}
.heading-underline:after{content: ""; position: absolute; width: 40px; height: 2px; background: #E96B0B; bottom: -10px; left: 50%;transform: translateX(-50%);}

.center{text-align: center;}
.orange{color: #E96B0B;}

.sub-heading{font-family: "Saira", sans-serif; font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 3px; color: #E96B0B;}

.bullet-list{margin: 15px 0;}
.bullet-list li{display: flex; gap: 10px; padding: 5px 0;}
.bullet-list li:before{content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 400; color: #E96B0B;}

.btn-container{display: flex; align-items: center; gap: 5px; margin-top: 25px;}

.btn{display: flex; align-items: center; justify-content: center; gap: 10px; background: #E96B0B; padding: 18px 35px; font-family: "Saira", sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; text-align: center; line-height: 1.25; color: #fff; border-radius: 5px; border: 1px transparent solid;}
.btn:hover{background: #D15F09; color: #fff;}

.ghost-btn{background: none; color: #fff; border: 1px #fff solid;}
.ghost-btn:hover{background: none; color: #ddd; border: 1px #ddd solid;}

/* HEADER */

.header{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; position: fixed; top: 20px; left: 0; right: 0; width: 1800px; max-width: calc(100% - 100px); margin: auto; border-radius: 10px; transition: all .2s ease-in-out; z-index: 999;}
.header .logo{width: 200px;}
.header .logo img{display: block; filter: brightness(0) saturate(100%) invert(100%); transition: all .2s ease-in-out;}
.header .logo a{display: block; padding: 10px 35px;}
.header .logo a:hover{opacity: .75;}
.header .cta{width: 200px; padding: 12px 20px;}
.header .cta .btn{padding: 13px; font-size: 14px; font-weight: 700;}
.header .cta .btn:hover{background: #fff; color: #E96B0B;}

.header .navigation{flex: 1;}
.header .navigation i{font-size: 10px;}
.header .navigation ul{display: flex; align-items: center; justify-content: center; gap: 25px;}
.header .navigation ul li{position: relative;}
.header .navigation ul li a{display: flex; align-items: center; gap: 10px; position: relative; padding: 25px 5px; font-family: "Saira", sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; text-align: center; color: #fff;}
.header .navigation ul li a:before{content: ''; position: absolute; top: calc(100% - 3px); height: 3px; left: 0px; right: 100%; background: #E96B0B; animation: underlineOut 0.2s;}
.header .navigation ul li:hover > a:before{animation: underlineIn 0.4s; animation-fill-mode: forwards;}
.header .navigation ul li a.active:before{left: 0; right: 0;}

.header .navicon{display: none;}
.header .navicon a{display: block; padding: 5px 25px; font-size: 20px; color: #fff;}

.header .mega-menu{display: none; background: #fff; backdrop-filter: blur(8px); width: 100%; padding: 40px 30px; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.header .mega-menu p{margin-bottom: 8px;}
.header .mega-menu p strong{display: block; font-family: "Saira", sans-serif; font-size: 18px; text-transform: uppercase;}
.header .mega-menu ul li{margin: 5px 0;}
.header .mega-menu ul li a{font-weight: 500; color: #E96B0B;}
.header .mega-menu ul li a:after{font-family: "Font Awesome 6 Free"; font-size: 14px; font-weight: 900; content: "\f08e"; margin-left: 10px;}
.header .mega-menu ul li a:hover{color: #000;}

.header .mega-menu .flex-row{gap: 25px 50px;}
.header .mega-menu .col-4{max-width: 250px;}
.header .mega-menu .module-container{margin-top: 15px;}
.header .mega-menu .module{padding: 20px;}
.header .mega-menu .module img{max-height: 100px;}

.header.nav-up{transform: translateY(-150%); box-shadow: none;}
.header.nav-down{transform: translateY(0); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.header.nav-down .logo img{filter: none;}
.header.nav-down .navigation ul li a{color: #333;}
.header.nav-down .navicon a{color: #333;}
.header.nav-down .cta .btn{color: #E96B0B; border: 1px #E96B0B solid;}
.header.nav-down .cta .btn:hover{background: none; color: #D15F09; border: 1px #D15F09 solid;}
.header.nav-down .mega-menu{background: none; backdrop-filter: none; box-shadow: none;}

/* HERO */

.hero{display: flex; align-items: center; justify-content: center; position: relative; background: #000; width: 100%; min-height: 100vh; text-align: center; color: #fff;}
.hero img{display: block; max-height: 150px; margin: auto;}
.hero h1{display: block; margin: 25px 0; font-size: clamp(16px, (1rem + 1vw), 36px); font-weight: 100; letter-spacing: 8px;}
.hero h1 strong{display: block; margin-bottom: 5px; font-size: clamp(16px, (1rem + 5vw), 64px); font-weight: 900; letter-spacing: normal;}

.hero .hero-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .25; overflow: hidden; z-index: 0;}
.hero .hero-bg img{display: block; width: 100%; height: 100%; object-fit: cover;}
.hero .hero-bg video{display: block; width: 100%; height: 100%; object-fit: cover;}

.hero .wrap{z-index: 9;}
.hero .btn-container{justify-content: center;}

/* MODULES */

.module-container{display: flex; flex-wrap: wrap; gap: 10px; width: 100%;}
.module-container a:hover{transform: scale(1.05); box-shadow: 0px 10px 70px 0px rgb(0 0 0 / 20%); z-index: 9;}

.module{display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; background: #fff; padding: 50px; text-align: center; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05); transition: all .5s ease;}
.module img{display: block; max-height: 200px;}
.module strong{font-family: "Saira", sans-serif; font-weight: 600; text-transform: uppercase; line-height: 1.25;}

.module-container.wraps{justify-content: center;}
.module-container.wraps .module{flex: 0 0 calc(33.3333% - 10px);}

/* CARDS */

.card-container{
	--gap: 10px;
	--active-ratio: 0.44;
	--desc-max-height: 160px;
}

.card-container{display: flex; gap: var(--gap); margin: 50px 0;}
.card-container .card{flex: 0 0 calc((100% - ((var(--count) - 1) * var(--gap))) * (1 - var(--active-ratio)) / (var(--count) - 1)); background: #000; position: relative; height: 400px; text-align: left; color: #fff; border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform .25s ease, flex-basis .5s ease; will-change: flex-basis, transform; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.card-container .card:before{content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.25) 50%,rgba(0, 0, 0, 1) 100%); opacity: 1; transition: opacity .25s ease; z-index: 9;}
.card-container .card:after{position: absolute; top: 8px; right: 8px; font-family: "Font Awesome 6 Free"; font-size: 20px; font-weight: 900; line-height: 1; text-shadow: 0px 0px 20px rgba(0,0,0,0.25); content: "\f055"; z-index: 999;}
.card-container .card img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .25s ease; transform: translateZ(0); will-change: transform; z-index: 0;}
.card-container .card:hover img{transform: scale(1.03);}

.card-container .card .card-content{position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-rows: auto 0fr; gap: 3px; align-content: end; transition: grid-template-rows .25s ease; padding: 15px; z-index: 9;}
.card-container .card .card-content h3{font-size: 16px; text-transform: none; transition: transform .2s ease;}
.card-container .card .card-content strong{display: block; font-family: "Saira", sans-serif; line-height: 1.25; transition: transform .2s ease;}
.card-container .card .card-content p{max-height: 0; margin: 0; font-size: 14px; line-height: 1.5; opacity: 0; transition: opacity 1s ease, max-height 1s ease; overflow: hidden;}
.card-container .card .card-content a{display: inline-block; margin-top: 8px; padding: 7px 14px; font-family: "Saira", sans-serif; font-weight: 600; text-transform: uppercase; text-align: center; border: 1px #fff solid; border-radius: 5px;}
.card-container .card .card-content a:hover{background: #fff; color: #000;}

.card-container .card .play-btn{display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 72px; text-shadow: 0px 0px 20px rgba(0,0,0,0.25); z-index: 999;}
.card-container .card .play-btn:hover{opacity: .75;}

.card-container .card:not(.active):hover:before{opacity: .5;}
.card-container .card:not(.active):hover .card-content strong{transform: translateY(-2px);}

.card-container .card.active{flex-basis: calc((100% - ((var(--count) - 1) * var(--gap))) * var(--active-ratio)); cursor: default;}
.card-container .card.active:after{display: none;}
.card-container .card.active img{transform: scale(1.02);}
.card-container .card.active .card-content{grid-template-rows: auto 1fr;}
.card-container .card.active .card-content p{opacity: 1; max-height: var(--desc-max-height);}
.card-container .card.active .play-btn{display: block;}

/* HOME */

.section h2{margin: 10px 0; font-size: clamp(16px, (1rem + 2vw), 48px);}
.section .flex-row{align-items: center;}
.section .wrap-heading{display: block; margin: auto; max-width: 840px; text-align: center;}

.section-problem{position: relative; overflow: hidden;}
.section-problem img{position: absolute; top: 0;}

.section-system{text-align: center;}
.section-system .flex-row{align-items: flex-start; margin: 50px 0;}
.section-system .flex-row img{background: #fff; margin: auto; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.section-system .flex-row h2, .section-system .flex-row h3{margin: 20px 0 5px; font-size: 16px; font-weight: 600;}
.section-system .flex-row p{font-size: 16px;}
.section-system .btn-container{justify-content: center;}

.section-cases{text-align: center;}
.section-cases .flex-row{align-items: flex-start; gap: 20px; margin: 25px 0;}
.section-cases .flex-row img{background: #fff; margin: 0 auto 15px; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.section-cases .flex-row h3{font-size: 16px; font-weight: 600;}
.section-cases .flex-row .flex-col{flex: 0 0 calc(33% - 20px);}
.section-cases .btn-container{justify-content: center;}

.section-advantage{position: relative; overflow: hidden;}
.section-advantage img{position: absolute; top: 0; bottom: 0; margin: auto;}

.section-safety{text-align: center;}

.section-products .module{flex: none; flex-direction: column; width: calc(33.3333% - 10px); padding: 20px;}

.section-cta{background: #E96B0B url(../siteart/logos/logo-w.png) center center no-repeat; text-align: center; color: #fff;}
.section-cta .wrap{max-width: 900px;}
.section-cta .btn-container{justify-content: center;}
.section-cta .btn-container .btn{background: #fff; color: #E96B0B;}
.section-cta .btn-container .btn:hover{opacity: .9;}
.section-cta .disclaimer{margin-top: 25px; font-size: 13px; font-style: italic;}

/* SUB-PAGES */

.banner{background-color: #111; background-image: url(../siteart/banner.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 200px 0 125px; text-align: center; color: #fff;}
.banner h1{font-size: clamp(16px, (1rem + 2vw), 52px);}
.banner strong{display: block; margin-bottom: 3px; font-family: "Saira", sans-serif; font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 3px; color: #E96B0B;}
.banner p{display: block; margin-top: 15px; text-wrap: pretty; opacity: .8;}
.banner p a{text-decoration: underline;}
.banner p a:hover{text-decoration: none;}
.banner .btn-container{justify-content: center;}

.breadcrumbs{position: relative; top: -25px; margin-bottom: 10px; font-family: "Saira", sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px;}
.breadcrumbs ul{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #fff; border-radius: 5px;}
.breadcrumbs ul li a{font-weight: 700; color: #E96B0B;}
.breadcrumbs ul li a:hover{color: #222;}
.breadcrumbs ul li:has(> a):after{content: "/"; padding: 0 10px; color: #ddd;}

.main{padding: 75px 0;}

.float-image{float: right; width: 40%; max-width: 100%; margin: 0 0 20px 50px;}
.form-box{background: #fafafa; min-height: 600px; border-radius: 5px;}
.form-box p{padding: 20px 38px; font-weight: 700; font-size: 14px; text-align: center; border-bottom: 1px #eee solid;}

/* STORE */

.product-anchors{background: #f5f5f5; padding: 10px 0 15px; color: #555;}
.product-anchors ul{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 25px;}
.product-anchors ul li a{font-family: "Saira", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;}
.product-anchors ul li a:hover{opacity: .75;}

.product-section{text-align: center;}
.product-section p{display: block; margin: 5px 0 20px;}

.product-flex{display: flex; align-items: center; justify-content: center;}
.product-flex div{width: 500px;}

/* DETAILS */

.product-page h1{font-size: clamp(16px, (1rem + 2vw), 36px);}
.product-page .main{padding: 50px 0;}
.product-page .banner{height: 120px; padding: 0;}

.product-container{position: relative;}
.product-container .flex-row{align-items: flex-start;}

.product-gallery{flex: 1;}
.product-gallery img{display: block; margin: auto;}

.product-gallery .lightbox-btn{display: flex; align-items: center; justify-content: center; position: relative;}
.product-gallery .lightbox-btn img{transition: all .2s ease-in-out;}
.product-gallery .lightbox-btn i{display: flex; align-items: center; justify-content: center; position: absolute; background: rgba(0, 0, 0, 0.5); width: 35px; height: 35px; font-family: "Font Awesome 6 Free"; font-size: 12px; font-weight: 900; content: "\f067"; color: #fff; border-radius: 50px; opacity: 0; transition: all .2s ease-in-out;}
.product-gallery .lightbox-btn:hover > img{opacity: .75;}
.product-gallery .lightbox-btn:hover > i{opacity: 1;}

.product-gallery .gallery-variants{display: flex; gap: 20px; flex-wrap: wrap;}
.product-gallery .gallery-variants .lightbox-btn{flex: calc(50% - 50px);}
.product-gallery .gallery-variants .lightbox-btn:first-child{flex: 100%;}

.product-gallery .gallery-slide{display: flex; gap: 20px; flex-wrap: wrap; margin-top: 25px;}
.product-gallery .gallery-slide .lightbox-btn{flex: calc(50% - 50px);}
.product-gallery .gallery-hide{display: none;}

.product-details{flex: 1; position: sticky; top: 0; width: 100%; padding: 25px 0;}
.product-details .sub-heading{margin: 5px 0;}

.product-details .accordion-container{margin: 15px 0 30px;}
.product-details .accordion .accordion-header{padding: 20px 0;}
.product-details .accordion .bullet-list{margin: 0;}
.product-details .accordion .bullet-list li{margin: 0;}
.product-details .accordion a i{margin-right: 8px;}

.product-details .product-stars{min-height: 30px;}
.product-details .product-color{margin: 10px 0 25px;}
.product-details .color-selected{margin-bottom: 10px; font-size: 14px;}
.product-details .color-selector{display: flex; align-items: center; gap: 5px;}
.product-details .color-selector a{position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50px; border: 2px #fff solid;}
.product-details .color-selector a:hover{border: 2px #999 solid;}
.product-details .color-selector a.active{border: 2px #000 solid;}
.product-details .color-selector #khaki{background: #AC9F81;}
.product-details .color-selector #white{background: #F3F3EC;}
.product-details .color-selector #charcoal{background: #666;}

.product-details .product-links ul{margin-top: 15px;}
.product-details .product-links ul li{display: block;}
.product-details .product-links ul li a{font-size: 14px; text-decoration: underline;}
.product-details .product-links ul li a:hover{text-decoration: none;}

.product-bar{background: #111; padding: 35px; text-align: center; color: #fff;}
.product-bar .flex-row{justify-content: center; gap: 15px; max-width: 1600px; margin: auto;}
.product-bar .flex-col{display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: "Saira", sans-serif; font-weight: 500; text-transform: uppercase;}
.product-bar .flex-col i{font-size: 20px;}

.product-video{padding: 20px; text-align: center;}
.product-video h2{width: min(100%, 35ch); margin: auto; font-size: clamp(16px, (1rem + 2vw), 36px);}
.product-video .hero{min-height: 80vh; padding: 35px 0;}
.product-video .hero .hero-bg{opacity: .5;}

.product-video .lightbox-btn{display: inline-flex; align-items: center; position: relative; background: rgba(255, 255, 255, 0.15); margin: 20px auto 0; padding: 5px; font-size: 15px; font-weight: 600; color: #eee; border-radius: 50px; backdrop-filter: blur(8px);}
.product-video .lightbox-btn span{padding: 0 25px;}
.product-video .lightbox-btn i{display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255, 255, 255, 0.75); height: 40px; width: 40px; font-size: 12px; color: #000; border-radius: 50px; transition: all .2s ease-in-out;}
.product-video .lightbox-btn i:before{position: relative; left: 2px;}
.product-video .lightbox-btn:hover{color: #fff;}
.product-video .lightbox-btn:hover > i{background: #fff;}

.product-boxes h2{margin: 5px 0; font-size: clamp(16px, (1rem + 2vw), 26px);}
.product-boxes .flex-row{align-items: center;}

.product-frame{position: relative; min-height: 100px;}

.loading{pointer-events: none;}
.loading:after{content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.7); display: block;}
.loading:before{content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 3px solid #ccc; border-top-color: #333; animation: spin 0.8s linear infinite;}

.spec-row{display: flex; gap: 0 10px; padding: 10px; font-size: 12px;}
.spec-row:nth-child(even){background: #fafafa;}
.spec-row .spec-col{flex: 1;}
.spec-row .spec-col:first-child{max-width: 200px; font-weight: 700;}

.testimonial-container{display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0;}
.testimonial-container .testimonial{flex: 1; display: block; background: #fff; padding: 35px 25px; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.testimonial-container .testimonial p{font-size: 15px; line-height: 1.65;}
.testimonial-container .testimonial .flex-row{align-items: center; gap: 20px;}
.testimonial-container .testimonial .customer-logo img{display: block; max-width: 200px; max-height: 35px;}
.testimonial-container .testimonial .stars{margin: 10px 0; color: #E96B0B;}

/* TRUNCATE */

.truncate a{display: inline-block; margin-top: 5px; font-size: 15px; font-weight: 700; color: #E96B0B;}
.truncate a:hover{color: #000;}
.truncate p{display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.truncate.active p{display: block;}

/* SHOPIFY */

.product-shopify{margin: 15px 0;}

.product-shopify .flex-row{align-items: flex-end; gap: 10px;}
.product-shopify .flex-row .btn{background: none; height: 50px; color: #E96B0B; padding: 13px; border: 1px #E96B0B solid;}
.product-shopify .flex-row .btn:hover{background: none; color: #D15F09; border: 1px #D15F09 solid;}

.product-shopify input{display: block; width: 65px; height: 50px; padding: 10px 15px; font-family: "Inter", sans-serif; color: #333; border: 1px #eee solid; border-radius: 5px 0 0 5px;}
.product-shopify select{display: block; background: #fff; width: 100%; height: 50px; padding: 10px 13px; font-family: "Inter", sans-serif; color: #333; border: 1px #eee solid; border-radius: 3px; -webkit-appearance: none; cursor: pointer;}

.product-shopify .shopify-buy__product__actual-price{display: block; margin-bottom: 10px; font-size: 24px; font-weight: 900; color: #E96B0B;}
.product-shopify .shopify-buy__btn-and-quantity{display: flex; width: 100%;}
.product-shopify .shopify-buy__btn-wrapper{flex: 1;}
.product-shopify .shopify-buy__btn-and-quantity button{display: flex; align-items: center; justify-content: center; gap: 10px; background: #E96B0B; width: 100%; height: 50px; padding: 14px; font-family: "Saira", sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; text-align: center; line-height: 1.25; color: #fff; border: none; border-radius: 0 5px 5px 0; transition: all .2s ease-in-out; cursor: pointer;}
.product-shopify .shopify-buy__btn-and-quantity button:hover{background: #D15F09; color: #fff;}
.product-shopify .shopify-buy__btn-and-quantity button:before{font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f217";}
.product-shopify .shopify-buy__btn-and-quantity button.shopify-buy__btn-disabled{background: #ccc; cursor: not-allowed;}

.product-shopify .visuallyhidden{display: none;}

.product-shopify .shopify-buy__option-select-wrapper{display: flex; align-items: center; position: relative; margin: 10px 0;}
.product-shopify .shopify-buy__select-icon{position: absolute; right: 15px; height: 10px;}

.product-add h2{margin-bottom: 15px; font-size: 18px;}
.product-add .product-shopify{flex: 1; display: flex; align-items: center; gap: 0 25px; margin: 8px 0; padding: 15px; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.product-add .product-image{text-align: center;}
.product-add .product-image img{display: block; max-height: 75px; margin: auto;}
.product-add .product-image a:hover{opacity: .75;}
.product-add .product-details{flex: 1; font-size: 14px; line-height: 1.5;}
.product-add .product-details h3{margin-bottom: 5px; font-size: 15px;}
.product-add .product-details a{text-decoration: underline;}
.product-add .product-details a:hover{text-decoration: none;}
.product-add .product-shopify input{height: fit-content;}
.product-add .product-shopify select{height: fit-content;}
.product-add .product-shopify .shopify-buy__option-select-wrapper{margin: 0 0 5px;}
.product-add .product-shopify .shopify-buy__product__actual-price{margin-bottom: 5px; font-size: 16px; font-weight: 700;}
.product-add .product-shopify .shopify-buy__btn-and-quantity button{height: fit-content; padding: 11px 18px; font-size: 14px;}

/* YOTPO */

.yotpo-title-text, .yotpo-body-text, .yotpo-body-text, .yotpo-text-container p, .yotpo-text-container button, .yotpo-review-title strong, .yotpo-bottom-line-basic-text, .yotpo-reviewer-name, .yotpo-reviewer-verified-buyer-text, .yotpo-media-select, .yotpo-search-input, .yotpo-dropdown-label, .yotpo-dropdown-base, .yotpo-selected-value__value, .yotpo-selected-value__label--textual, .yotpo-dropdown-option-label, .yotpo-dropdown-option-label, .formated-value, .yotpo-modal-header-heading, .yotpo-form-label, .yotpo-matched-reviews, .yotpo-no-matching-reviews-primary, .yotpo-no-matching-reviews-secondary, .yotpo-clear-filters, .yotpo-mobile-filters-popup-title, .yotpo-filters-results-btn-text, .yotpo-mobile-filters-btn-text, .yotpo-media-filter-label{font-family: "Inter", sans-serif !important;}

.yotpo-base-layout{width: 100% !important;}
.yotpo-base-layout:has(.yotpo-empty-state){margin: 50px 0 !important;}
.yotpo-review-border-smooth{display: none !important;}
.yotpo-head{margin: 10px 0 !important;}
.yotpo-reviews-pagination-container{margin: 25px 0 !important;}
.yotpo-title-text{margin-bottom: 5px !important;}
.yotpo-review-rating-title{flex-wrap: wrap !important; gap: 12px; width: 100% !important;}
.yotpo-review-title{margin: 0 !important;}
.yotpo-dropdown-label--textual{opacity: 0 !important;}
.yotpo-selected-value__label--textual{opacity: 1 !important;}
.yotpo-layout-header-wrapper{gap: 15px !important; margin: 0 !important;}

.yotpo-bottom-line-scroll-panel .yotpo-sr-bottom-line-button{flex-direction: row !important; align-items: center !important;}
.yotpo-sr-bottom-line-text{font-family: "Inter", sans-serif !important; font-size: 14px !important; font-weight: 500 !important;}
.yotpo .content, .yotpo-review .content, .yotpo-review-wrapper .content, .yotpo-main .yotpo-review .yotpo-review-content, .yotpo-review-body, .yotpo-review .yotpo-review-content{white-space: pre-line;}

.yotpo-new-review-btn{width: fit-content !important; max-width: 100% !important; height: 58px !important; margin: 0 auto !important; padding: 0 35px !important; font-family: "Saira", sans-serif !important; font-size: 16px !important; text-transform: uppercase !important; border-radius: 5px !important;}
.yotpo-reviews-container .yotpo-clear-filters-btn{width: fit-content !important; max-width: 100% !important; height: 58px !important; margin: 25px auto 10px !important; padding: 0 35px !important; font-family: "Saira", sans-serif !important; font-size: 16px !important; text-transform: uppercase !important; border-radius: 5px !important;}

.modal-backdrop.yotpo-review-form-modal .yotpo-modal{height: fit-content !important;}

/* HOTSPOT */

.hotspot-stage{position: relative;}
.hotspot-image{display: block; width: 100%; height: auto;}

.hotspot{position: absolute; background: #E96B0B; width: 35px; height: 35px; padding: 0; color: #fff; transform: translate(-50%, -50%); transition: all .2s ease-in-out; border-radius: 999px; border: 0; box-shadow: 0 10px 22px rgba(0,0,0,0.25); cursor: pointer;}
.hotspot:before{content: ""; position: absolute; inset: -10px; background: rgba(255, 255, 255, 0.5); animation: pulse 4s ease-out infinite; border-radius: 999px;}
.hotspot.is-active{transform: translate(-50%, -50%) rotate(45deg);}
.hotspot.is-active:before{visibility: hidden;}

.hotspot-panel{display: none; position: absolute; min-width: 280px; max-width: 360px; z-index: 10;}
.hotspot-panel .panel-inner{background: #fff; padding: 15px 18px; border-radius: 6px; box-shadow: 0 16px 32px rgba(0,0,0,0.25);}
.hotspot-panel .panel-inner strong{font-size: 15px;}
.hotspot-panel .panel-inner p{font-size: 14px; line-height: 1.5;}
.hotspot-panel .panel-close{position: absolute; top: 8px; right: 5px; background: transparent; color: #333; border: 0; cursor: pointer;}
.hotspot-panel .panel-arrow{position: absolute; left: 26px; top: 100%; background: #fff; width: 16px; height: 16px; margin-top: -8px; transform: rotate(45deg); box-shadow: 6px 6px 14px rgba(0,0,0,0.12);}
.hotspot-panel.is-open{display: block;}

/* ACCORDION */

.accordion{display: block; position: relative; border-bottom: 1px #eee solid;}
.accordion:last-child{border: none;}
.accordion .accordion-header{display: flex; align-items: center; gap: 20px; padding: 25px 0; font-family: "Saira", sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; font-weight: 600; line-height: 1.25; transition: all .2s ease-in-out; cursor: pointer;}
.accordion .accordion-header:after{display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #E96B0B; width: 19px; height: 19px; font-family: "Font Awesome 6 Free"; font-size: 8px; font-weight: 900; content: "\f067"; margin-left: auto; color: #fff; border-radius: 50px;}
.accordion .accordion-content{display: none; margin-bottom: 35px; font-size: 14px;}
.accordion .accordion-content hr{margin: 15px 0;}
.accordion .accordion-content a{font-weight: 700; text-decoration: underline; color: #E96B0B;}
.accordion .accordion-content a:hover{text-decoration: none;}
.accordion .accordion-content ul{display: block; margin-top: 15px;}
.accordion .accordion-content ul li{list-style: disc; margin-left: 15px;}

.accordion.active > .accordion-header:after{content: "\f068";}

/* FOOTER */

.footer{background: #111; padding: 50px 0 25px; color: #fff;}
.footer .wrap{max-width: 1400px;}
.footer .logo{margin-bottom: 15px; text-align: center;}
.footer .logo a{display: inline-block; max-width: 150px; margin: auto;}
.footer .logo a:hover{opacity: .75;}
.footer .navigation{margin: 50px 0;}
.footer .navigation strong{font-family: "Saira", sans-serif; font-size: 18px; text-transform: uppercase;}
.footer .navigation a{font-size: 14px; opacity: .75;}
.footer .navigation a:hover{opacity: 1;}
.footer .copyright{font-family: "Saira", sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; text-align: center; line-height: 1.15; opacity: .6;}

.social ul{display: flex; align-items: center; justify-content: center; gap: 10px;}
.social ul li a{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px #fff solid; border-radius: 50px;}
.social ul li a:hover{background: #fff; color: #E96B0B;}

.scroll-top{display: none; position: fixed; bottom: 25px; right: 25px; background: rgba(0,0,0,.8); padding: 10px 15px 10px; font-size: 14px; text-align: center; color: #bbb; cursor: pointer; z-index: 99999;}
.scroll-top:hover{box-shadow: none; color: #fff; bottom: 23px;}
.scroll-top i{display: block;}

/* ANIMATION */

.animated{animation-duration: 1s; animation-fill-mode: both;}
.fadeIn{animation-name: fadeIn;}
.fadeInUp{animation-name: fadeInUp;}
.fadeInDown{animation-name: fadeInDown;}
.fadeInLeft{animation-name: fadeInLeft;}
.fadeInRight{animation-name: fadeInRight;}

@keyframes underlineIn{
	0%{left: 0; right: 100%;}
	100%{left: 0; right: 0;}
}

@keyframes fadeIn{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes fadeInDown{
  0%{transform: translateY(-25px); opacity: 0;}
  100%{transform: translateY(0);opacity: 1;}
}
@keyframes fadeInUp{
  0%{transform: translateY(25px); opacity: 0;}
  100%{transform: translateY(0); opacity: 1;}
}
@keyframes fadeInLeft{
	from{opacity: 0; transform: translate3d(-25px, 0, 0);}
	to{opacity: 1; transform: translate3d(0, 0, 0);}
}
@keyframes fadeInRight{
	from{opacity: 0; transform: translate3d(25px, 0, 0);}
	to{opacity: 1; transform: translate3d(0, 0, 0);}
}
@keyframes pulse{
  0%{transform: scale(0.65); opacity: 0.0;}
  20%{opacity: 0.8;}
  100%{transform: scale(1.25); opacity: 0.0;}
}

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

/* RESPONSIVE */

nav.mobile{display: none; flex-direction: column; position: fixed; top: 0; left: 0; width: 80vw; height: 100%; background: #fff; border-radius: 0 10px 10px 0; overflow-y: auto; box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.1); transform: translateX(-100%); transition: transform 325ms ease; -webkit-overflow-scrolling: touch; z-index: 999999;}
nav.mobile.open{transform: translateX(0);}

nav.mobile .mobile-top{display: flex; align-items: center; position: sticky; top: 0; background: #fff; padding: 25px 15px; z-index: 9;}
nav.mobile .mobile-top .logo img{max-width: 105px;}
nav.mobile .mobile-top .menu-toggle{display: flex; align-items: center; justify-content: center; margin-left: auto; width: 40px; height: 40px; border: 1px #eee solid; border-radius: 50px;}
nav.mobile .mobile-nav{flex: 1;}

nav.mobile ul{flex: 1;}
nav.mobile ul li{position: relative; border-bottom: 1px #eee solid;}
nav.mobile ul li:has(> a.btn){margin: 10px; border: none;}
nav.mobile ul li a{display: flex; align-items: center; gap: 10px; position: relative; padding: 15px; font-family: "Saira", sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase;}
nav.mobile ul li a i{margin-left: auto;}

nav.mobile ul ul{display: none; background: #fafafa; border-top: 1px #eee solid;}
nav.mobile ul ul li{border: none;}
nav.mobile ul ul li a{font-weight: 500; text-transform: none; color: #444;}

nav.mobile .social{margin-top: 25px;}
nav.mobile .social ul li{border: none;}
nav.mobile .social ul li a{padding: 0; border: 1px #eee solid;}
nav.mobile .social ul li a i{margin: auto;}
nav.mobile .copyright{padding: 15px; font-size: 11px; text-transform: uppercase; text-align: center;}

@media screen and (max-width: 1400px){
	.header{width: 100%; max-width: calc(100% - 40px);}
	.header .logo{width: 175px;}
	.header .navigation ul{gap: 15px;}
	.header .navigation ul li a{font-size: 14px;}
	.header .cta{width: 175px;}

	.module-container.wraps .module{flex: 0 0 calc(33.3333% - 10px);}
}
@media screen and (max-width: 1150px){
	html, body{font-size: 16px;}
	nav.mobile{display: flex;}
	.wrap{padding: 0 25px;}
	.flex-row .flex-col{flex: none; width: 100%; max-width: 100%;}
	.flex-row .col-img{order: 99;}

	.header{top: 5px; max-width: calc(100% - 10px); padding: 10px 5px 10px 10px;}
	.header .navigation{display: none;}
	.header .navicon{display: block;}
	.header .logo{width: 150px;}
	.header .logo a{padding: 10px;}
	.header .cta{width: fit-content; margin-left: auto; padding: 0;}
	.header .cta .btn{padding: 12px 20px;}
	.breadcrumbs{top: -10px;}

	.card-container{flex-direction: column;}
	.card-container .card{flex: none; width: 100%; height: 200px; cursor: default;}
	.card-container .card:before{background: linear-gradient(180deg,rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.85) 100%);}
	.card-container .card:after{display: none;}
	.card-container .card .card-content p{max-height: fit-content !important; height: 160px; opacity: 1;}
	.card-container .card .card-content a{display: block;}
	.card-container .card.active{flex: none;}
	
	.card-container .card:hover img{transform: none;}
	.card-container .card:not(.active):hover:before{opacity: 1;}
	.card-container .card:not(.active):hover .card-content strong{transform: none;}
	
	.section-problem img{position: relative; top: 0;}
	.section-advantage img{position: relative;}

	.banner{padding: 100px 0 50px;}
	.banner p{font-size: 14px;}
	.main{padding: 50px 0;}

	.product-page h1{font-size: 24px;}
	.product-page .main{padding: 35px 0;}
	.product-page .banner{height: 80px;}
	.product-page .module{flex: none; width: calc(50% - 10px);}
	.product-flex{order: -1;}
	.product-gallery{flex: none; width: 100%; max-width: 100%;}
	.product-gallery .gallery-slide{flex-wrap: nowrap; overflow: auto;}
	.product-gallery .gallery-slide .lightbox-btn{flex: none; width: 100%; max-width: 200px;} 
	.product-details{flex: none; padding: 0;}
	.product-bar{padding: 50px 25px;}
	.product-bar .flex-col{width: 45%;}
	.product-video{padding: 5px;}
	.product-video .hero{min-height: 50vh;}
	.testimonial-container .testimonial{flex: none; width: 100%; padding: 20px; font-size: 14px;}

	.footer .navigation{display: none;}
	.footer .copyright{margin-top: 25px;}
}
@media screen and (max-width: 768px){
	.module-container.wraps .module{flex: 0 0 100%;}
	.section-cases .flex-row .flex-col{flex: 0 0 calc(50% - 20px);}

	.product-add .product-details p{display: none;}

	.panel-arrow{display: none;}
	.hotspot-panel{max-width: 100%; width: 100%;}

	.yotpo-head{margin: 5px 0 !important;}
	.yotpo-base-layout:has(.yotpo-empty-state){margin: 25px 0 !important;}
	.yotpo-layout-header-wrapper{flex-direction: column !important;}
	.yotpo-bottom-line-right-panel{padding-right: 0 !important;}
	.yotpo-bottom-line-summary{margin: 0 !important;}
	.yotpo-bottom-line-summary .yotpo-vertical-border{display: none !important;}
	.yotpo-review-rating-title{margin-top: 10px !important;}
	.yotpo-review-left-panel{width: 100% !important;}
	.yotpo-review-center-panel{width: 100% !important; padding: 0 !important;}
	.yotpo-header-container .yotpo-bottom-line{margin: 0 !important;}
	.yotpo-search-input{height: 31px !important;}
	.yotpo-filters-container .yotpo-filters-container-inner .yotpo-filters-top-panel{row-gap: 10px !important; column-gap: 10px !important;}
}
@media screen and (max-width: 480px){
	.header .logo{width: 125px;}
	.header .cta .btn{padding: 12px 16px; font-size: 13px;}

	.btn-container{flex-direction: column;}
	.btn-container .btn{width: 100%;}

	.module{padding: 30px;}

	.card-container{margin: 15px 0;}
	
	.hero{min-height: auto; padding: 100px 0 50px;}
	.hero img{max-height: 100px;}
	.hero h1 span{display: block; margin: 5px 0;}
	.section-system .flex-row{margin: 15px 0;}
	.section-products .module{flex: calc(50% - 10px);}
	.section-cases .flex-row h3{font-size: 14px;}
	
	.banner{padding: 100px 0 25px;}
	.breadcrumbs ul{justify-content: flex-start;}
	.breadcrumbs ul li:has(> a):after{padding: 0 5px;}
	
	.float-image{float: none; width: 100%; margin: 0 0 20px;}
	
	.product-video .hero{min-height: 30vh;}
	.product-shopify select{max-width: 100%;}
	.product-shopify .shopify-buy__btn-and-quantity{max-width: 100%;}
	.product-add .product-shopify{flex-direction: column; text-align: center;}
	.product-bar{padding: 30px 25px; font-size: 13px;}
	.product-bar .flex-col{width: 100%;}
	.spec-row{flex-direction: column;}
	.spec-row .spec-col:first-child{max-width: 100%;}
}