/* The existing mobile Hero ends at 1023px. Desktop composition is untouched. */
#catalogHero[data-hero-pending] > .hero-slider,
#catalogHeroDesktop[data-hero-pending] > .desktop-slider { visibility: hidden; }
@font-face {
    font-family: "Pryme Hero";
    src: url("../fonts/montserrat-latin-900.woff2") format("woff2");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: "Pryme Hero Display";
    src: url("../fonts/archivo-black-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@media (max-width: 1023px) {
    #catalogHero { text-align: left; isolation: isolate; }
    #catalogHero::before { content: none; }
    #catalogHero .hero-slider { height: calc(94svh - 73px); min-height: 450px; max-height: 920px; overflow: hidden; }
    #catalogHero .hero-slide { transition: opacity .8s ease; --hero-scale-from: 1.015; --hero-scale-to: 1.07; --hero-x-from: -.4%; --hero-x-to: .4%; --hero-y-from: .3%; --hero-y-to: -.3%; }
    #catalogHero .hero-slide:nth-child(2) { --hero-scale-from: 1.04; --hero-scale-to: 1.08; --hero-x-from: -.8%; --hero-x-to: .8%; --hero-y-from: 0%; --hero-y-to: -.4%; }
    #catalogHero .hero-slide:nth-child(3) { --hero-scale-from: 1.02; --hero-scale-to: 1.075; --hero-x-from: 0%; --hero-x-to: -.3%; --hero-y-from: .8%; --hero-y-to: -.8%; }
    #catalogHero .hero-slide > img { height: 100%; width: 100%; object-fit: cover; object-position: center 50%; filter: none; transform: scale(1.015); }
    #catalogHero .hero-slide.active > img { animation: heroKenBurns 9s linear both; will-change: transform; }
    #catalogHero.hero-motion-paused .hero-slide.active > img { animation-play-state: paused; }
    #catalogHero .hero-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.4) 55%,rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.54),transparent 28%,transparent 72%,rgba(0,0,0,.28)); }
    #catalogHero .hero-overlay { z-index: 1; max-width: none; align-items: flex-start; justify-content: center; text-align: left; padding: 32px clamp(22px,7.2vw,58px) max(72px,env(safe-area-inset-bottom)); }
    #catalogHero .catalog-subtitle { font-size: 13px; line-height: 1.4; letter-spacing: 2.2px; font-weight: 800; color: var(--primary-color); margin: 0 0 12px; opacity: 1; }
    #catalogHero .catalog-title { max-width: 680px; font-family: "Pryme Hero Display",sans-serif; font-size: clamp(40px,12.8vw,76px); font-weight: 400; line-height: .98; letter-spacing: -1.2px; margin: 0 0 18px; text-shadow: 0 3px 20px rgba(0,0,0,.3); }
    #catalogHero .catalog-title-long { font-size: clamp(34px,10.4vw,64px); }
    #catalogHero .hero-title-main, #catalogHero .hero-title-accent { display: block; }
    #catalogHero .hero-title-accent { color: var(--primary-color); }
    #catalogHero .catalog-title-primary .hero-title-main, #catalogHero .catalog-title-primary .hero-title-accent { display: block; white-space: nowrap; }
    #catalogHero .catalog-title-primary .hero-title-accent { white-space: pre-line; }
    #catalogHero .catalog-description { max-width: 380px; margin: 0; color: #eef0f3; font-size: 18px; line-height: 1.5; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
    #catalogHero .hero-btn { gap: 12px; min-height: 52px; height: auto; margin-top: 24px; padding: 15px 22px; border: 1px solid var(--primary-color); border-radius: 10px; background: rgba(2,15,25,.88); color: #fff; font-family: "Pryme Hero",Montserrat,sans-serif; font-size: 14px; line-height: 1.4; font-weight: 900; box-shadow: inset 0 0 18px rgba(0,168,255,.1),0 0 18px rgba(0,168,255,.2); }
    #catalogHero .hero-btn svg { flex: none; width: 19px; height: 19px; transition: transform .2s ease; }
    #catalogHero .hero-btn:hover, #catalogHero .hero-btn:active { background: #06283d; box-shadow: inset 0 0 18px rgba(0,168,255,.14),0 0 22px rgba(0,168,255,.3); }
    #catalogHero .hero-btn:hover svg, #catalogHero .hero-btn:focus-visible svg { transform: translateX(3px); }
    #catalogHero .hero-btn:focus-visible, #catalogHero .hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
    #catalogHero .hero-indicators { position: absolute; z-index: 2; bottom: max(10px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 0; }
    /* Reuse the actual Drops indicator; padding keeps each touch target >=24px. */
    #catalogHero .hero-dot { min-width: 24px; height: 44px; padding: 0 7px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
}
@keyframes heroKenBurns {
    from { transform: translate3d(var(--hero-x-from),var(--hero-y-from),0) scale(var(--hero-scale-from)); }
    to { transform: translate3d(var(--hero-x-to),var(--hero-y-to),0) scale(var(--hero-scale-to)); }
}
@media (max-width: 1023px) and (max-height: 700px) {
    #catalogHero .hero-slider { min-height: 365px; }
    #catalogHero .hero-overlay { padding: 24px 24px 64px; }
    #catalogHero .catalog-title { font-size: clamp(36px,11.8vw,58px); margin-bottom: 14px; }
    #catalogHero .catalog-title-long { font-size: clamp(32px,10.2vw,52px); }
    #catalogHero .catalog-description { font-size: 16px; line-height: 1.5; }
    #catalogHero .hero-btn { margin-top: 18px; min-height: 48px; padding: 12px 20px; }
}
@media (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    #catalogHero .hero-slider { min-height: 300px; }
    #catalogHero .hero-slide:nth-child(2) > img, #catalogHero .hero-slide:nth-child(3) > img { object-position: center 25%; }
    #catalogHero .hero-overlay { padding: 20px 5vw 52px; }
    #catalogHero .catalog-subtitle { margin-bottom: 8px; }
    #catalogHero .catalog-title { max-width: 560px; font-size: clamp(32px,6vw,46px); margin-bottom: 10px; }
    #catalogHero .hero-title-main, #catalogHero .hero-title-accent { display: inline; }
    #catalogHero .catalog-description { max-width: 480px; }
    #catalogHero .hero-btn { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    #catalogHero .hero-slide, #catalogHero .hero-btn svg, #catalogHero .drops-dot { transition: none; }
    #catalogHero .hero-slide.active > img { animation: none; transform: none; will-change: auto; }
}