/* Hyper Techno brand-aligned storefront interaction states v1. */

html body.hypertechno-design-system a.scroll-to-top {
    transition: background-color .18s ease-out, border-color .18s ease-out,
        box-shadow .18s ease-out, color .18s ease-out;
}

html body.hypertechno-design-system a.scroll-to-top:hover,
html body.hypertechno-design-system a.scroll-to-top:focus,
html body.hypertechno-design-system a.scroll-to-top:active {
    color: #fff !important;
    background-color: var(--ht-color-primary, #d71920) !important;
    border-color: var(--ht-color-primary, #d71920) !important;
    box-shadow: 0 8px 22px rgba(215, 25, 32, .28);
    text-decoration: none;
}

html body.hypertechno-design-system a.scroll-to-top:hover .fa,
html body.hypertechno-design-system a.scroll-to-top:hover .fa::before,
html body.hypertechno-design-system a.scroll-to-top:focus .fa,
html body.hypertechno-design-system a.scroll-to-top:focus .fa::before,
html body.hypertechno-design-system a.scroll-to-top:active .fa,
html body.hypertechno-design-system a.scroll-to-top:active .fa::before {
    color: #fff !important;
}

html body.hypertechno-design-system a.scroll-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
    box-shadow: 0 0 0 3px var(--ht-color-primary-dark, #aa1419),
        0 8px 22px rgba(17, 19, 19, .18);
}

@media (min-width: 1200px) {
    html body.hypertechno-design-system .header-area.header8 .navigation .nav-main-menu .dropdown-menu li > a:hover,
    html body.hypertechno-design-system .header-area.header8 .navigation .nav-main-menu .dropdown-menu li > a:focus,
    html body.hypertechno-design-system .header-area.header8 .navigation .nav-main-menu .dropdown-submenu li > a:hover,
    html body.hypertechno-design-system .header-area.header8 .navigation .nav-main-menu .dropdown-submenu li > a:focus {
        color: #fff !important;
        background-color: var(--ht-color-primary, #d71920) !important;
    }

    html body.hypertechno-design-system .header-area.header8 .navigation .nav-main-menu .dropdown-menu li > a:focus-visible,
    html body.hypertechno-design-system .header-area.header8 .navigation .nav-main-menu .dropdown-submenu li > a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -3px;
    }
}

@media (max-width: 1199px) {
    html body.hypertechno-design-system .header-area.header8 .menu-wrapper .nav-main-menu li li > a:hover,
    html body.hypertechno-design-system .header-area.header8 .menu-wrapper .nav-main-menu li li > a:focus,
    html body.hypertechno-design-system .header-area.header8 .menu-wrapper .nav-main-menu .dropdown-menu li > a:hover,
    html body.hypertechno-design-system .header-area.header8 .menu-wrapper .nav-main-menu .dropdown-menu li > a:focus {
        color: #fff !important;
        background-color: var(--ht-color-primary, #d71920) !important;
    }

    html body.hypertechno-design-system .header-area.header8 .menu-wrapper .nav-main-menu li li > a:focus-visible,
    html body.hypertechno-design-system .header-area.header8 .menu-wrapper .nav-main-menu .dropdown-menu li > a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.hypertechno-design-system a.scroll-to-top {
        transition: none;
    }
}