/* PRODUCTS FEATURE */
.fhp-products{padding:0 0 24px;background:transparent;color:var(--ui-ink);}
.fhp-products .section-title{margin:0 0 8px;font-size:30px;font-weight:400;line-height:1.12;color:#26333e;}
.fhp-products .section-lead{margin:0 0 28px;font-size:18px;line-height:1.55;color:#7c7f85;}
.fhp-tabs{min-width:0;}
.fhp-tabnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:26px;}
.fhp-tabnav button{position:relative;min-height:74px;padding:14px 18px;border:0;border-radius:8px;background:rgba(255,255,255,.82);box-shadow:0 4px 18px rgba(29,67,94,.035);color:#24313b;font-size:16px;font-weight:500;line-height:1.25;text-align:center;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;}
.fhp-tabnav button::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px;background:var(--cyan);transform:scaleX(0);transition:transform .25s ease;}
.fhp-tabnav button:hover{transform:translateY(-3px);background:#fff;box-shadow:0 10px 24px rgba(29,67,94,.08);color:var(--blue);}
.fhp-tabnav button[aria-selected="true"]{background:#fff;color:var(--blue);box-shadow:0 10px 25px rgba(29,67,94,.08);}
.fhp-tabnav button[aria-selected="true"]::after{transform:scaleX(1);}
.fhp-panels{position:relative;min-width:0;}
.fhp-panel{display:none;grid-template-columns:minmax(0,58%) minmax(360px,42%);min-height:650px;align-items:center;}
.fhp-panel.is-active{display:grid;}
.fhp-media{position:relative;display:grid;place-items:center;min-width:0;min-height:600px;max-height:800px;overflow:hidden;}
.fhp-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--body-bg,#f5f7fa) 0%,transparent 13%,transparent 80%,var(--body-bg,#f5f7fa) 100%),linear-gradient(0deg,var(--body-bg,#f5f7fa) 0%,transparent 15%,transparent 82%,var(--body-bg,#f5f7fa) 100%);}
.fhp-media img{display:block;width:100%;height:100%;max-height:800px;object-fit:contain;}
.fhp-copy{align-self:center;padding:40px clamp(30px,4vw,82px) 40px 54px;}
.fhp-title{margin:0 0 22px;font-size:30px;font-weight:400;line-height:1.15;color:#202d37;}
.fhp-subtitle{position:relative;margin:0 0 24px;padding-bottom:18px;font-size:18px;font-weight:500;line-height:1.55;color:#4d5b66;}
.fhp-subtitle::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:3px;background:var(--blue);}
.fhp-abstract{margin:0 0 24px;font-size:18px;line-height:1.65;color:#33424d;}
.fhp-content{margin:0 0 30px;font-size:16px;line-height:1.7;color:#7c7f85;}
.fhp-copy .button{margin-top:4px;}

@media(max-width:1100px){
    .fhp-panel{grid-template-columns:1fr;}
    .fhp-media{min-height:430px;}
    .fhp-copy{max-width:760px;padding:30px 0 10px;}
    .fhp-tabnav{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media(max-width:760px){
    .fhp-products{padding:20px 0 30px;}
    .fhp-tabs{position:relative;}
    .fhp-tabnav{
        display:flex;
        width:calc(100% + var(--page-gap));
        margin-right:calc(var(--page-gap) * -1);
        gap:9px;
        padding:4px var(--page-gap) 14px 0;
        overflow-x:auto;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 42px),transparent 100%);
    }
    .fhp-tabnav::-webkit-scrollbar{display:none;}
    .fhp-tabnav button{
        flex:0 0 158px;
        min-height:58px;
        padding:11px 12px;
        scroll-snap-align:start;
        border:1px solid #e2e9ee;
        background:#fff;
    }
    .fhp-tabnav button:last-child{margin-right:32px;}
    .fhp-media{min-height:280px;}
    .fhp-title{font-size:26px;}
    .fhp-copy{padding-top:22px;}
}

@media(max-width:480px){
    .fhp-tabnav button{flex-basis:145px;}
    .fhp-media{min-height:240px;}
    .fhp-title{font-size:24px;}
}


@media(max-width:760px){
    .fhp-tabnav button{
        flex-basis:138px;
        min-height:46px;
        padding:8px 10px;
        font-size:14px;
        line-height:1.2;
    }
}

@media(max-width:480px){
    .fhp-tabnav button{
        flex-basis:128px;
        min-height:44px;
        padding:7px 9px;
        font-size:13px;
    }
}