/* Loaded only by Banner Test and the homepage. Keep site-wide Morph Nav intact. */
body.horizon-banner-test {
    margin: 0;
    padding: 0;
}

.horizon-banner-test .horizon-banner-test-shell {
    position: relative;
    width: 100%;
    --sans: sans-serif;
    --mono: monospace;
    letter-spacing: normal;
}

/* Keep homepage typography and generic nav rules out of the approved banner. */
body.horizon-home-page.horizon-banner-test .horizon-banner-test-shell .morphing-nav,
body.horizon-home-page.horizon-banner-test .horizon-banner-test-shell .nav-orb__logo {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.618;
}
body.horizon-home-page.horizon-banner-test .horizon-banner-test-shell .nav-inline-link {
    font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif;
    font-weight: var(--morph-nav-link-weight);
}
/* Preserve document order after relocating the original hero below Categories. */
@media (max-width: 560px) {
    body.horizon-home-page.horizon-banner-test main.horizon-home-main {
        display: block;
    }
    body.horizon-home-page.horizon-banner-test main.horizon-home-main > .hero {
        display: flex !important;
        flex-direction: column;
    }
}

/* The visual tablet headline is the page H1 while the desktop/phone hero is hidden. */
@media (min-width: 561px) and (max-width: 900px) {
    body.horizon-home-page.horizon-banner-test .tablet-hero-intro {
        display: block !important;
    }
}

.horizon-banner-test .horizon-banner-test-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1000;
    width: 100%;
    background: transparent;
}

/* Only the bar's outer surfaces: menu/logo/action pills retain plugin styling. */
/* Cancel only the plugin's legacy homepage utility-button placement. */
@media (max-width: 760px) {
    body.horizon-home-page.horizon-banner-test #morph-nav-root .nav-actions {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: flex !important;
        gap: 7px !important;
        margin: 0 0 0 auto !important;
    }
    body.horizon-home-page.horizon-banner-test #morph-nav-root .nav-action {
        width: 46px !important;
        height: 46px !important;
        border-radius: 16px !important;
    }
    body.horizon-home-page.horizon-banner-test #morph-nav-root .nav-action svg {
        width: 18px !important;
        height: 18px !important;
    }
}
@media (min-width: 761px) and (max-width: 1200px) and (orientation: portrait) {
    body.horizon-home-page.horizon-banner-test #morph-nav-root .nav-actions {
        gap: 10px !important;
        margin: 0 -34px 0 auto !important;
    }
    body.horizon-home-page.horizon-banner-test #morph-nav-root .nav-action {
        width: 54px !important;
        height: 54px !important;
        border-radius: 50% !important;
    }
}
@media (min-width: 761px) and (max-width: 920px) and (orientation: portrait) {
    body.horizon-home-page.horizon-banner-test #morph-nav-root .nav-actions {
        gap: 7px !important;
        margin-right: 0 !important;
    }
}

body.horizon-banner-test #morph-nav-root .nav-orb__logo {
    position: relative;
    left: var(--hbt-logo-offset, 0px);
}

body.horizon-banner-test #morph-nav-root .nav-expanded-links {
    position: relative;
    left: var(--hbt-menu-offset, 0px);
}

body.horizon-banner-test #morph-nav-root .morphing-nav,
body.horizon-banner-test #morph-nav-root .nav-orb-container,
body.horizon-banner-test #morph-nav-root .nav-orb,
body.horizon-banner-test #morph-nav-root .nav-orb-bar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.horizon-banner-test .horizon-banner-test-header .morph-path {
    display: none;
}

.horizon-banner-test #banner-test-main {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
}

/* Start the portrait artwork below the moving promotion strip on phones. */
@media (max-width: 700px) {
    .horizon-banner-test #banner-test-main {
        padding-top: 36px;
    }
}

/* Match Morph Nav's tablet range in both orientations, including large touch tablets. */
@media (min-width: 761px) and (max-width: 1200px),
       (min-width: 1201px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
    .horizon-banner-test #banner-test-main {
        padding-top: 36px;
    }
}

.horizon-banner-test .horizon-banner-test-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    border-radius: 0;
}

.horizon-banner-test .horizon-banner-test-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* The ticker and nav share an absolute overlay; neither moves the hero image. */
.horizon-banner-test .hbt-ticker-wrap {
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
    contain: paint;
    isolation: isolate;
    background: linear-gradient(90deg, #0d254e, #0e568e, #0d254e);
    color: #fff;
    box-shadow: 0 10px 30px rgba(14, 42, 85, .22);
}

.horizon-banner-test .hbt-ticker-inner {
    display: flex;
    width: max-content;
    flex-shrink: 0;
    white-space: nowrap;
    animation: hbt-ticker-scroll 38s linear infinite;
    will-change: transform;
}

.horizon-banner-test .hbt-ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 24px;
    border-right: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--mono, monospace);
    font-size: 10px;
    letter-spacing: var(--tracking-meta, .08em);
    white-space: nowrap;
}

.horizon-banner-test .hbt-ticker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.horizon-banner-test .hbt-green { background: #6ee7b7; }
.horizon-banner-test .hbt-red { background: var(--red, #ef4444); }
.horizon-banner-test .hbt-gold { background: #9fe0ff; }

@keyframes hbt-ticker-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 768px), (pointer: coarse) {
    .horizon-banner-test .hbt-ticker-inner { animation-duration: 46s; }
}

@media (prefers-reduced-motion: reduce) {
    .horizon-banner-test .hbt-ticker-inner { animation: none; }
}

/* Homepage interaction effects, isolated to this test page's product layer. */
.hbt-products{width:100%;max-width:none;margin:0;padding:0;background:#031c47;isolation:isolate}
.hbt-products__artwork{position:relative;width:100%;line-height:0}
.hbt-products__artwork picture{display:block;width:100%}
.hbt-products__image{display:block;width:100%;max-width:none;height:auto;margin:0}
.hbt-products__hotspot{position:absolute;display:block;box-sizing:border-box;border:2px solid transparent;border-radius:clamp(8px,1.5vw,26px);text-decoration:none;line-height:1.3;transition:background-color .22s ease,box-shadow .22s ease,border-color .22s ease; -webkit-tap-highlight-color:rgba(104,226,255,.25)}
/* Trace the luminous card edges in the 1916 x 910 Menu-Hero-Homepage.webp. */
.hbt-products__hotspot--featured{left:37.160752%;top:24.615385%;width:25.782881%;height:59.120879%;border:0;border-radius:0;pointer-events:none}
.hbt-products__featured-outline{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.hbt-products__featured-outline path{pointer-events:all;fill:rgba(74,196,255,0);stroke:transparent;stroke-width:3;vector-effect:non-scaling-stroke;transition:fill .22s ease,stroke .22s ease;filter:drop-shadow(0 0 6px #4ad1ff)}
.hbt-products__hotspot.hbt-products__hotspot--featured:focus-visible{outline:0;background:transparent;box-shadow:none}
.hbt-products__hotspot--featured:focus-visible path{fill:rgba(74,196,255,.09);stroke:#fff}
@media(hover:hover){.hbt-products__hotspot.hbt-products__hotspot--featured:hover{background:transparent;box-shadow:none}.hbt-products__hotspot--featured:hover path{fill:rgba(74,196,255,.09);stroke:#65e5ff}}
.hbt-products__hotspot--clock{left:65.292276%;top:31.428571%;width:29.853862%;height:16.483516%;border-radius:4% / 15.3%}
.hbt-products__hotspot--router{left:65.292276%;top:48.791209%;width:29.853862%;height:16.483516%;border-radius:4% / 15.3%}
.hbt-products__hotspot--sensor{left:65.292276%;top:65.934066%;width:29.853862%;height:16.483516%;border-radius:4% / 15.3%}
.hbt-products__hint{position:absolute;right:5%;bottom:5%;display:flex;align-items:center;gap:.6em;padding:.55em .85em;border:1px solid #80e8ff;border-radius:999px;background:#032454;color:#fff;font:600 clamp(10px,1vw,16px)/1.2 var(--sans,sans-serif);opacity:0;transform:translateY(5px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.hbt-products__hotspot:focus-visible{outline:3px solid #fff;outline-offset:3px;border-color:#65e5ff;background:rgba(74,196,255,.09);box-shadow:0 0 24px rgba(74,209,255,.65),inset 0 0 24px rgba(74,209,255,.16)}
.hbt-products__hotspot:focus-visible .hbt-products__hint{opacity:1;transform:translateY(0)}
@media(hover:hover){.hbt-products__hotspot:hover{border-color:#65e5ff;background:rgba(74,196,255,.09);box-shadow:0 0 24px rgba(74,209,255,.65),inset 0 0 24px rgba(74,209,255,.16)}.hbt-products__hotspot:hover .hbt-products__hint{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.hbt-products__hint{display:none}}
@media(prefers-reduced-motion:reduce){.hbt-products__hotspot,.hbt-products__hint,.hbt-products__featured-outline path{transition:none}}

/* Portrait coordinates traced from the 1248 x 2500 Mobile-New-Hero.webp artwork. */
@media (max-width: 700px) {
    .hbt-products__hotspot--featured {
        left: 4.647436%;
        top: 31.960000%;
        width: 90.705128%;
        height: 29.720000%;
        border: 2px solid transparent;
        border-radius: 4.25% / 6.75%;
        pointer-events: auto;
    }
    .hbt-products__hotspot--featured .hbt-products__featured-outline {
        display: none;
    }
    .hbt-products__hotspot--clock {
        left: 6.810897%;
        top: 66.240000%;
        width: 86.538462%;
        height: 7.800000%;
        border-radius: 3.2% / 20%;
    }
    .hbt-products__hotspot--router {
        left: 6.810897%;
        top: 74.000000%;
        width: 86.538462%;
        height: 7.240000%;
        border-radius: 3.2% / 20%;
    }
    .hbt-products__hotspot--sensor {
        left: 6.810897%;
        top: 81.760000%;
        width: 86.538462%;
        height: 7.480000%;
        border-radius: 3.2% / 20%;
    }
    .hbt-products__hotspot.hbt-products__hotspot--featured:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
        border-color: #65e5ff;
        background: rgba(74,196,255,.09);
        box-shadow: 0 0 24px rgba(74,209,255,.65), inset 0 0 24px rgba(74,209,255,.16);
    }
    .hbt-products__hotspot:active {
        border-color: #65e5ff;
        background: rgba(74,196,255,.12);
        box-shadow: 0 0 24px rgba(74,209,255,.65), inset 0 0 24px rgba(74,209,255,.16);
    }
}

@media (max-width: 700px) and (hover: hover) {
    .hbt-products__hotspot.hbt-products__hotspot--featured:hover {
        border-color: #65e5ff;
        background: rgba(74,196,255,.09);
        box-shadow: 0 0 24px rgba(74,209,255,.65), inset 0 0 24px rgba(74,209,255,.16);
    }
}

/* Printed collection button; desktop values remain tied to the landscape artwork. */
.hbt-products__hotspot--collection {
    left: 5.010438%;
    top: 53.516484%;
    width: 12.526096%;
    height: 5.494505%;
    border-radius: 999px;
}

@media (max-width: 700px) {
    .hbt-products__hotspot--collection {
        left: 6.009615%;
        top: 26.240000%;
        width: 40.945513%;
        height: 3.720664%;
    }
}

/* Preserve the product effects when the theme's initial-load reset is active. */
@media (prefers-reduced-motion: no-preference) {
    body.horizon-banner-test .hbt-products__hotspot {
        transition: background-color .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    }
    body.horizon-banner-test .hbt-products__hint {
        transition: opacity .22s ease, transform .22s ease !important;
    }
    body.horizon-banner-test .hbt-products__featured-outline path {
        transition: fill .22s ease, stroke .22s ease !important;
    }
}