.hmc{--desktop-max-width:1388px;--faq-bacdrop-color:#f7f8f8;--light:#fff;--dark:#000;--semidark:#222;--grey:#717171;--light-grey:#686868;--circle-size:1.5rem;--gap:3rem;--line-thickness:2px;--stepper-line-gap:.5rem;--black:#000;--slider-track:#c7c8ca;.hmc-desc{max-width:var(--desktop-max-width);margin:auto;text-align:center;&>*{margin-bottom:1.5rem}
h1{font-size:2.5rem;line-height:2rem;font-family:"kiam",sans-serif;margin-top:3rem}
p{margin:0 1rem 1rem}
.hmc-stepper{margin-top:2.5rem;.hmc-stepper-list{display:flex;justify-content:center;position:relative;gap:var(--gap);li{background:var(--light-grey);width:var(--circle-size);height:var(--circle-size);height:1.5rem;border-radius:50%;font-size:.75rem;color:var(--light);box-sizing:border-box;padding:.1rem;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;&:not(:last-child):before{content:"";position:absolute;top:50%;width:calc(var(--gap) - var(--stepper-line-gap) * 2);height:var(--line-thickness);left:calc(
              var(--gap) - var(--circle-size)+var(--stepper-line-gap));background:var(--light-grey);transform:translateY(-50%);border-radius:1px}
&.active{background:var(--dark);&:before{background:var(--dark)}
}
&.clickable{cursor:pointer;&:hover,&:focus{box-shadow:0 0 3px var(--black);background:var(--semidark)}
}
}
}
}
}
.hmc-content{background-color:var(--faq-bacdrop-color);display:block;box-sizing:border-box;.hmc-faq{max-width:var(--desktop-max-width);margin:auto;padding:2rem;fieldset{border:0;padding:0;margin:0;min-width:0}
.hmc-question{font-size:1.5rem;text-align:center;margin:2rem;display:block}
.hmc-options{&>div{display:flex;gap:1rem;@media only screen and (min-width:1024px){justify-content:center}
}
.hmc-option-card{background:var(--light);border-radius:.3rem;cursor:pointer;flex:0 0 auto;width:80%;max-width:18rem;@media only screen and (min-width:1024px){flex:1;max-width:unset;width:100%}
&:has(input[type="radio"]:checked){border:1px solid var(--dark)}
&:has(input[type="radio"]:focus){outline:1px solid var(--grey)}
input[type="radio"]{position:absolute;opacity:0;width:0;height:0;&:checked+label .hmc-option-content:before{border-width:.3rem}
}
label{height:100%;display:block;cursor:pointer;img{width:100%;height:10rem;object-fit:cover;object-position:center;border-radius:.3rem;user-drag:none;-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none}
.hmc-option-content{padding:1rem;min-height:3rem;display:flex;gap:.5rem;&:before{content:"";width:1rem;height:1rem;min-width:1rem;margin-top:.3rem;border:1px solid var(--dark);border-radius:50%;box-sizing:border-box}
}
}
}
.faq-track{user-select:auto}
.faq-track.dragging{user-select:none;cursor:grabbing;.hmc-option-card{cursor:grab;label{cursor:grab}
}
}
}
.slider-wrapper{position:relative;width:100%;margin:.5rem 0 .5rem 0;padding-top:1.8rem;touch-action:pan-y;.slider-value{position:absolute;top:0;left:0;color:var(--black);font-size:1.2rem;pointer-events:none;transform:translateX(var(--percent));z-index:2;width:max-content}
input[type="range"]{width:100%;margin:0;-webkit-appearance:none;background:transparent;position:relative;z-index:1}
input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:linear-gradient(to right,var(--black) 0,var(--black) var(--percent,25%),var(--slider-track) var(--percent,25%),var(--slider-track) 100%)}
input[type="range"]::-moz-range-track{height:3px;border-radius:4px;background:linear-gradient(to right,var(--black) 0,var(--black) var(--percent,25%),var(--slider-track) var(--percent,25%),var(--slider-track) 100%)}
input[type="range"]::-ms-fill-lower{background:var(--black);border-radius:4px}
input[type="range"]::-ms-fill-upper{background:var(--slider-track);border-radius:4px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--black);border:2px solid transparent;cursor:pointer;position:relative;z-index:3;margin-top:-12px}
&:has(input[type="range"]:focus) input[type="range"]::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(51,51,51,0.5)}
input[type="range"]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--black);border:2px solid transparent;cursor:pointer;position:relative;z-index:3}
&:has(input[type="range"]:focus) input[type="range"]::-moz-range-thumb{box-shadow:0 0 0 3px rgba(51,51,51,0.5)}
input[type="range"]::-ms-thumb{width:28px;height:28px;border-radius:50%;background:var(--black);border:2px solid transparent;cursor:pointer;position:relative;z-index:3}
&:has(input[type="range"]:focus) input[type="range"]::-ms-thumb{box-shadow:0 0 0 3px rgba(51,51,51,0.5)}
input[type="range"]:focus{outline:0}
input[type="range"]::-moz-focus-outer{border:0}
.slider-labels{display:flex;justify-content:space-between;margin-top:.7em;font-size:1.1em;color:var(--black);max-height:2.8rem}
.slider-label-left,.slider-label-right{display:flex;flex-direction:column;align-items:flex-start}
.slider-label-right{align-items:flex-end}
.slider-km{font-size:.85em;color:var(--label-color);margin-top:.1em}
input[type="range"]{--percent:25%}
.slider-dots{position:absolute;top:50%;left:50%;right:0;height:3px;transform:translate(-50%,-50%);z-index:2;pointer-events:none;width:calc(100% - 11px)}
.slider-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #333;top:50%;transform:translate(-50%,-50%);transition:background-color .2s}
.slider-dot.on-dark{background:var(--black);border-color:var(--black)}
.slider-dot.on-light{background:var(--grey);border-color:var(--grey)}
&:has(input[type="range"]:disabled){opacity:.3;padding-top:0}
&:has(input[type="range"]:disabled) .slider-value{display:none}
&:has(input[type="range"]:disabled) .slider-labels .slider-km{display:none}
&:has(input[type="range"]:disabled) input[type="range"]::-ms-fill-lower{background:var(--slider-track)}
&:has(input[type="range"]:disabled) input[type="range"]::-ms-fill-upper{background:var(--slider-track)}
&:has(input[type="range"]:disabled) input[type="range"]::-moz-range-track{background:var(--slider-track)}
&:has(input[type="range"]:disabled) input[type="range"]::-webkit-slider-runnable-track{background:var(--slider-track)}
&:has(input[type="range"]:disabled) .slider-dots .slider-dot{top:-11px}
&:has(input[type="range"]:disabled) .slider-dot.on-dark{background:var(--slider-track);border-color:var(--slider-track)}
&:has(input[type="range"]:disabled) input[type="range"]::-webkit-slider-thumb{display:none}
}
.faq-slider{overflow:hidden;position:relative}
.faq-track{display:flex;gap:1rem;scroll-behavior:smooth;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(min-width:768px){.hmc-option-card{width:45%}
}
@media(min-width:1024px){.faq-slider{overflow:visible}
.faq-track{overflow:visible;flex-wrap:wrap}
.hmc-option-card{flex:1 1 200px;width:auto}
}
}
}
.hmc-nav{max-width:var(--desktop-max-width);margin:auto;padding:2rem;.hmc-nav-wrap{display:flex;gap:1rem;justify-content:center;button{background:var(--grey);color:var(--dark);padding:1rem 2rem;font-size:1rem;display:flex;@media only screen and (max-width:767px){padding:1rem}
&.hmc-nav-next{background:var(--dark);color:var(--light);&:after{content:"";background-image:url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2021%2020'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M7.16659%2016.667L13.8333%2010.0003L7.16659%203.33366'%20stroke%3D'white'%20stroke-linecap%3D'square'%2F%3E%3C%2Fsvg%3E");height:1.5rem;width:1.5rem;display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:contain}
}
&.hmc-nav-prev{color:var(--light);&:before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2021%2020'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M7.16659%2016.667L13.8333%2010.0003L7.16659%203.33366'%20stroke%3D'white'%20stroke-linecap%3D'square'%2F%3E%3C%2Fsvg%3E");height:1.5rem;width:1.5rem;display:inline-block;vertical-align:middle;transform:rotate(180deg);background-repeat:no-repeat;background-position:center;background-size:contain}
}
}
}
}
.hmc-results{display:grid;grid-template-columns:60% 40%;grid-template-rows:50% 50%;gap:1rem;@media only screen and (max-width:1024px){grid-template-columns:50% 50%;grid-template-rows:2fr 1fr}
@media only screen and (max-width:767px){display:flex;flex-direction:column}
.hmc-result{cursor:pointer;transition:opacity .3s ease;opacity:1;padding:2rem 4rem;background:var(--faq-bacdrop-color);display:flex;flex-direction:column;justify-content:space-between;transition:opacity .3s ease;@media only screen and (max-width:767px){margin-bottom:1rem}
&.fading{opacity:0}
&[data-index="1"]{grid-column:1;grid-row:1 / span 2;@media only screen and (max-width:767px){order:1}
}
&[data-index="2"]{grid-column:2;grid-row:1;@media only screen and (max-width:767px){order:2}
}
&[data-index="3"]{grid-column:2;grid-row:2;@media only screen and (max-width:767px){order:3}
}
@media only screen and (max-width:1024px){&[data-index="1"]{grid-column:1 / span 2;grid-row:1}
&[data-index="2"]{grid-column:1;grid-row:2}
&[data-index="3"]{grid-column:2;grid-row:2}
}
.hmc-result-header{display:flex;justify-content:space-between;.hmc-result-title{font-size:2.5rem;line-height:3rem;color:var(--light-grey);@media only screen and (max-width:767px){font-size:1.5rem;line-height:1.8rem}
}
.hmc-result-type{display:flex;align-items:center;gap:1rem;.hmc-result-fit{font-size:2.5rem;line-height:3rem;@media only screen and (max-width:767px){font-size:1.5rem;line-height:1.8rem}
}
.hmc-result-category{font-size:1.5rem;line-height:1.7rem;color:var(--light-grey);@media only screen and (max-width:767px){font-size:.87rem;line-height:1rem}
}
}
}
.hmc-result-body{display:flex;margin-bottom:4rem;gap:1rem;justify-content:space-between;@media only screen and (max-width:767px){flex-direction:column-reverse}
.hmc-result-highlight{margin-top:2rem;&>div{margin-bottom:1.5rem}
.hmc-result-highlight-title{font-size:1.5rem;line-height:1.8rem}
@media only screen and (max-width:767px){flex-wrap:wrap;display:flex;&>div{margin-bottom:1.5rem;width:50%}
.hmc-result-highlight-title{display:none}
}
}
.hmc-result-img{max-width:60%;@media only screen and (max-width:767px){max-width:unset;margin-top:1rem}
img{width:100%;height:100%;object-fit:contain;object-position:center}
}
.hmc-result-data{.hmc-result-value-head{font-size:1rem;font-weight:bold}
.hmc-result-value{font-size:.87rem;color:var(--light-grey)}
}
}
.hmc-results-details{button{background:transparent;color:var(--dark);font-size:1rem;display:flex;&:after{content:"";background-image:url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2021%2020'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M7.16659%2016.667L13.8333%2010.0003L7.16659%203.33366'%20stroke%3D'black'%20stroke-linecap%3D'square'%2F%3E%3C%2Fsvg%3E");height:1.5rem;width:1.5rem;display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:contain}
}
}
.hmc-result-footer{display:flex;justify-content:space-between;align-items:end;@media only screen and (max-width:767px){flex-direction:column;align-items:start;.hmc-results-cta-button{width:100%;margin-top:1rem;button,a.btn{width:auto;justify-content:center}
}
}
.hmc-results-details{display:none}
button,a.btn{background:var(--dark);color:var(--light);padding:1rem 2rem;font-size:1rem;display:flex;&:after{content:"";background-image:url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2021%2020'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M7.16659%2016.667L13.8333%2010.0003L7.16659%203.33366'%20stroke%3D'white'%20stroke-linecap%3D'square'%2F%3E%3C%2Fsvg%3E");height:1.5rem;width:1.5rem;display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:contain}
}
.hmc-results-features{p{font-size:.75rem;line-height:1rem;color:var(--grey);display:flex;gap:.5rem;align-items:center;&:before{content:"";display:block;height:.5rem;width:.5rem;background:var(--light-grey);border-radius:50%}
}
}
}
}
&[data-count="3"]{.hmc-result{&[data-index="2"],&[data-index="3"]{.hmc-result-type{display:block;.hmc-result-fit{font-size:1.5rem;line-height:1.8rem}
.hmc-result-category{font-size:.87rem;line-height:1rem}
}
.hmc-result-title{font-size:1.5rem;line-height:1.8rem}
.hmc-result-body{margin-bottom:1rem;justify-content:start;@media only screen and (max-width:767px){flex-direction:column;gap:0;.hmc-result-highlight{&>div{margin-bottom:0}
}
.hmc-result-img{margin:0}
}
.hmc-result-highlight-title{display:none}
.hmc-result-data{display:none;&.hmc-result-price{display:block}
}
.hmc-results-details{display:none}
}
.hmc-result-footer{align-items:center;flex-direction:row;justify-content:space-between;align-self:end;.hmc-results-details,.hmc-results-cta-button{display:block;width:auto;margin-top:1rem;button,a.btn{width:auto;background:transparent;color:black;font-size:1rem;display:flex;padding:0;&:after{content:"";background-image:url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2021%2020'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M7.16659%2016.667L13.8333%2010.0003L7.16659%203.33366'%20stroke%3D'black'%20stroke-linecap%3D'square'%2F%3E%3C%2Fsvg%3E");height:1.5rem;width:1.5rem;display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:contain}
}
}
}
.hmc-results-features{display:none}
}
}
}
&[data-count="2"]{display:block;.hmc-result{margin-bottom:1rem;&[data-index="3"]{display:none}
}
}
&[data-count="1"]{display:block;.hmc-result{margin-bottom:1rem;&[data-index="3"],&[data-index="2"]{display:none}
}
}
}
}