/* HOSET header (26.10.2026): home = transparent over a full-height hero, white + fixed after scrolling; 3 context tabs. */
.ht-menu .hx-tabs { display: inline-flex; gap: 0; vertical-align: top; }
.ht-menu a.hx-tab { display: inline-block; padding: 0 22px; line-height: 55px; height: 55px; font-size: 15px; font-weight: 600; color: #5b616b; background: transparent; position: relative; }
.ht-menu a.hx-tab:hover { color: #0840f3; text-decoration: none; }
.ht-menu a.hx-tab.on { background: #fff; color: #1d2126; }
.ht-menu a.hx-tab.on:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #0840f3; }

/* ---- home, top of the page: header floats over the photo ---- */
.hx-home .header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; background: transparent; transition: background .25s, box-shadow .25s; }
.hx-home .h-top { background: transparent; }
.hx-home:not(.hx-solid) .ht-menu a.hx-tab { color: rgba(255,255,255,.85); }
.hx-home:not(.hx-solid) .ht-menu a.hx-tab.on { background: transparent; color: #fff; }
.hx-home:not(.hx-solid) .ht-menu a.hx-tab.on:after { background: #fff; }
.hx-home:not(.hx-solid) .ht-account a, .hx-home:not(.hx-solid) .ht-account span, .hx-home:not(.hx-solid) .ht-worktime, .hx-home:not(.hx-solid) .ht-phone a,
.hx-home:not(.hx-solid) .hm-worktime, .hx-home:not(.hx-solid) .hm-phone a, .hx-home:not(.hx-solid) .hm-pages-nav a { color: rgba(255,255,255,.9); }
.hx-home:not(.hx-solid) .hm-pages-nav a:hover { color: #fff; }
.hx-home:not(.hx-solid) .hm-logo a { filter: brightness(0) invert(1); }
.hx-home:not(.hx-solid) .hx-nav { background: transparent; border-color: rgba(255,255,255,.28); }
.hx-home:not(.hx-solid) .hx-all, .hx-home:not(.hx-solid) .hx-links a, .hx-home:not(.hx-solid) .hx-right a { color: #fff; }
.hx-home:not(.hx-solid) .hx-right { border-left-color: rgba(255,255,255,.28); }
.hx-home:not(.hx-solid) .hx-burger { background: rgba(255,255,255,.18); }
.hx-home:not(.hx-solid) .hx-burger i { background: #fff; }
.hx-home:not(.hx-solid) .hx-links a:after, .hx-home:not(.hx-solid) .hx-right a:after { background: #fff; }
.hx-home:not(.hx-solid) .hx-links a:hover, .hx-home:not(.hx-solid) .hx-right a:hover { color: #fff; }
.hx-home .hm-search input { border-radius: 24px; border-color: transparent; }

/* ---- after scrolling: white, fixed, compact ---- */
.hx-home.hx-solid .header { position: fixed; background: #fff; box-shadow: 0 2px 22px rgba(16,24,40,.14); }
.hx-home.hx-solid .h-top { display: none; }
.hx-home.hx-solid .h-main { padding-top: 8px; padding-bottom: 0; height: auto; }

/* hero fills the whole first screen, the header floats on top of it */
.hx-home .hh { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; margin-top: 0; }
.hx-home .hh .hh-in { padding-top: 300px; padding-bottom: 80px; width: 100%; box-sizing: border-box; }
.hx-home .hh .hh-b2 { border-color: rgba(255,255,255,.8); }
#hx-circles { scroll-margin-top: 130px; }
@media (max-width: 991px) {
	.hx-home .hh .hh-in { padding-top: 150px; padding-bottom: 56px; }
}
/* compact solid header */
.hx-home.hx-solid .hm-pages-nav, .hx-home.hx-solid .hm-phone, .hx-home.hx-solid .hm-worktime { display: none; }
.hx-home.hx-solid .h-main { height: 64px; overflow: hidden; }
.hx-home.hx-solid .hm-logo { transform: scale(.8); transform-origin: left center; }
.hx-home.hx-solid .hx-nav { margin: 0; border-top: 1px solid #eceef2; }
.hx-home.hx-solid .h-main { padding-top: 0; }
.hx-home.hx-solid .h-main .wrap { top: 0; height: 64px; }
.hx-home.hx-solid .hm-logo { margin-top: 16px; }
.hx-home.hx-solid .hm-info { top: 8px; }

/* language switch FI | EN */
.hx-lang { display: inline-block; margin-right: 16px; vertical-align: middle; }
.hx-lang a { display: inline-block; padding: 4px 8px; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: #8b919c; text-decoration: none; }
.hx-lang a + a { border-left: 1px solid #d4d4d4; }
.hx-lang a.on { color: #0840f3; }
.hx-lang a:hover { color: #0840f3; text-decoration: none; }
.hx-home:not(.hx-solid) .hx-lang a { color: rgba(255,255,255,.75); }
.hx-home:not(.hx-solid) .hx-lang a.on, .hx-home:not(.hx-solid) .hx-lang a:hover { color: #fff; }
.hx-home:not(.hx-solid) .hx-lang a + a { border-left-color: rgba(255,255,255,.35); }

/* open category menu must be a solid white sheet (header is transparent on the home hero) */
.hx-panel { background: #fff; color: #1d2126; }
.hx-nav.open { background: #fff !important; }
.hx-home .hx-nav.open .hx-all, .hx-home .hx-nav.open .hx-links a, .hx-home .hx-nav.open .hx-right a { color: #1d2126; }
.hx-home .hx-nav.open .hx-burger { background: #0840f3; }
.hx-home .hx-nav.open .hx-burger i { background: #fff; }
@media (max-width: 991px) {
	.hx-panel { max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); overflow-y: auto; box-shadow: 0 18px 40px rgba(16,24,40,.18); }
	.hx-home:not(.hx-solid) .hx-nav.open .hx-col h4 a { color: #1d2126; }
}

/* language dropdown (11 languages) */
.hx-lang { position: relative; display: inline-block; margin-right: 16px; vertical-align: middle; }
.hx-lang-btn { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #0840f3; padding: 4px 8px; cursor: pointer; }
.hx-lang-btn i { display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.hx-lang-btn:focus { outline: none; }
.hx-lang-list { display: none; position: absolute; right: 0; top: 100%; min-width: 170px; background: #fff; box-shadow: 0 14px 34px rgba(16,24,40,.2); z-index: 400; padding: 6px 0; }
.hx-lang.open .hx-lang-list { display: block; }
.hx-lang .hx-lang-list a { display: block; padding: 8px 16px; font-size: 14px; font-weight: 400; color: #1d2126; border: 0; letter-spacing: 0; }
.hx-lang .hx-lang-list a b { display: inline-block; width: 28px; color: #8b919c; font-weight: 700; font-size: 12px; }
.hx-lang .hx-lang-list a:hover { background: #f2f3f5; color: #0840f3; }
.hx-lang .hx-lang-list a.on { color: #0840f3; font-weight: 700; }
.hx-home:not(.hx-solid) .hx-lang-btn { color: #fff; }
.hx-lang { overflow: visible !important; }
.hx-home .hx-lang .hx-lang-list a { color: #1d2126 !important; }
.hx-home .hx-lang .hx-lang-list a b { color: #8b919c !important; }
.hx-home .hx-lang .hx-lang-list a.on, .hx-home .hx-lang .hx-lang-list a:hover { color: #0840f3 !important; }
.hx-lang-list { max-height: 80vh; overflow-y: auto; }

/* mobile burger menu (ht-menu): solid white sheet with dark text, tabs as pills */
@media (max-width: 991px) {
	.hx-home .ht-menu { background: #fff; box-shadow: 0 18px 40px rgba(16,24,40,.18); max-height: calc(100vh - 60px); overflow-y: auto; }
	.hx-home .ht-menu .hx-tabs { display: flex; gap: 8px; padding: 14px 16px 6px; flex-wrap: wrap; }
	.hx-home .ht-menu a.hx-tab, .hx-home:not(.hx-solid) .ht-menu a.hx-tab { display: inline-block; height: auto; line-height: 1; padding: 11px 16px; background: #f2f3f5; color: #1d2126; font-size: 14px; }
	.hx-home .ht-menu a.hx-tab.on, .hx-home:not(.hx-solid) .ht-menu a.hx-tab.on { background: #0840f3; color: #fff; }
	.hx-home .ht-menu a.hx-tab.on:after { display: none; }
	.hx-home .ht-menu .hm-pages-nav a, .hx-home:not(.hx-solid) .hm-pages-nav a { color: #1d2126; }
	.hx-home .ht-menu .hm-pages-nav { padding: 6px 16px 10px; }
	.hx-home .ht-menu input { color: #1d2126; }
}
/* the original mobile CSS hides every span in .ht-account — keep the language switch visible */
.ht-account .hx-lang { display: inline-block !important; margin-right: 6px; }
.ht-account .hx-lang-btn { display: inline-block !important; }
.ht-account .hx-lang-list { display: none; }
.ht-account .hx-lang.open .hx-lang-list { display: block !important; }
.ht-account .hx-lang-list a { display: block; }
@media (max-width: 991px) {
	.ht-account { white-space: nowrap; }
	.ht-account .hx-lang-btn { padding: 4px 4px; font-size: 12px; }
	.hx-lang-list { right: -40px; }
}

/* long translations must never collide in the top row on phones: no working-hours text, icon-only login */
@media (max-width: 991px) {
	.h-top .ht-worktime, .h-top .ht-phone { display: none !important; }
	.ht-account { right: 56px; left: auto; max-width: calc(100% - 80px); white-space: nowrap; overflow: visible; }
	.ht-account #login-btn, .ht-account > a:not(.hx-keep) { font-size: 0 !important; }
	.ht-account #login-btn i, .ht-account > a i { font-size: 16px; }
	.ht-account > a span { display: none !important; }
	.hm-logo, .hm-cart { max-width: 48%; }
	.hm-cart .btn { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* login icon is a blue sprite: make it white while the header floats over the photo */
.hx-home:not(.hx-solid) .ht-account .icon-login, .hx-home:not(.hx-solid) .ht-account #login-btn i { filter: brightness(0) invert(1); }

/* mobile top-right burger: bigger, white on transparent header, dark on solid/white */
@media (max-width: 991px) {
	.mobile-menu { width: 28px !important; height: 20px !important; position: absolute !important; left: auto !important; right: 16px !important; top: 18px !important; background: linear-gradient(#fff, #fff) 0 0 / 100% 2.5px no-repeat, linear-gradient(#fff, #fff) 0 8.75px / 100% 2.5px no-repeat, linear-gradient(#fff, #fff) 0 17.5px / 100% 2.5px no-repeat !important; }
	.mobile-menu i, .mobile-menu i:before, .mobile-menu i:after { display: none !important; }
	body:not(.hx-home) .mobile-menu, .hx-home.hx-solid .mobile-menu { background: linear-gradient(#1d2126, #1d2126) 0 0 / 100% 2.5px no-repeat, linear-gradient(#1d2126, #1d2126) 0 8.75px / 100% 2.5px no-repeat, linear-gradient(#1d2126, #1d2126) 0 17.5px / 100% 2.5px no-repeat !important; }
}

/* desktop: active context tab filled with brand blue, like the cart button */
@media (min-width: 992px) {
	.ht-menu a.hx-tab.on, .hx-home:not(.hx-solid) .ht-menu a.hx-tab.on { background: #0840f3; color: #fff; }
	.ht-menu a.hx-tab.on:after, .hx-home:not(.hx-solid) .ht-menu a.hx-tab.on:after { display: none; }
	.ht-menu a.hx-tab.on:hover { color: #fff; background: #0634c2; }
}

/* ---- inner pages (28.10): the catalog row (Kaikki tuotteet + sections) stays fixed at the top after scrolling ---- */
@media (min-width: 992px) {
  body.hx-navfix .hx-nav { position: fixed; top: 0; left: 0; right: 0; margin: 0; z-index: 1200; background: #fff; box-shadow: 0 2px 14px rgba(16,24,40,.12); }
}