/* The product scroll header's glass material, shared by the persistent site frame. */
#site-header {
  --qp-header-glass: rgba(16,20,28,.52) var(--qp-soft-grain);
  --qp-header-blur: blur(30px) saturate(125%);
  --qp-ink: #f4f6fa;
  --qp-ink-3: #d4d9e2;
  --qp-muted: #c0c7d2;
  --qp-muted-2: #b3bccb;
  --qp-paper: #1c2028;
  --qp-paper-3: #303641;
  --qp-line: rgba(226,233,245,.18);
  --qp-focus: #e4ecff;
  color: #f4f6fa;
  color-scheme: dark;
  background: var(--qp-header-glass);
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: var(--qp-header-blur);
  backdrop-filter: var(--qp-header-blur);
}
#site-header.scrolled { background: var(--qp-header-glass); }
#site-header .logo { color: #f4f6fa; }
#site-header .logo .mk { color: #14171d; background: #edf1f7; }
#site-header :is(.main-nav a, .qp-nav-products summary, .acct-link) { color: #d4d9e2; }
#site-header :is(.main-nav a:hover, .main-nav a[aria-current="page"], .qp-nav-products summary:hover, .qp-nav-products[open] summary) { color: #fff; }
#site-header .main-nav a[aria-current="page"]::after { background: #e4ecff; }
#site-header :is(a, button, summary):focus-visible { outline: 3px solid #e4ecff; outline-offset: 3px; }
#site-header .acct-btn {
  color: #14171d;
  background: #e5eaf2;
  border-color: #c7d0dd;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45);
}
#site-header .acct-btn:hover { color: #090a0d; background: #fff; border-color: #fff; }
#site-header .acct-btn:active { background: #cdd6e3; }
#site-header :is(.nav-toggle, .acct-link) {
  color: #edf1f7;
  background: rgba(255,255,255,.07);
  border-color: rgba(226,233,245,.3);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08);
}
#site-header :is(.nav-toggle:hover, .nav-toggle[aria-expanded="true"], .acct-link:hover) {
  color: #fff;
  background: #343c49;
  border-color: #c7d0dd;
}
#site-header .qp-nav-products-menu {
  color: #f4f6fa;
  background: var(--qp-header-glass);
  border-color: rgba(226,233,245,.18);
  box-shadow: none;
  -webkit-backdrop-filter: var(--qp-header-blur);
  backdrop-filter: var(--qp-header-blur);
}
#site-header :is(.qp-nav-products-group h2, .qp-nav-products-menu small) { color: #bfc8d6; }
#site-header .qp-nav-products-menu a { color: #e2e7ef; }
#site-header .qp-nav-products-menu a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 940px) {
  #site-header .main-nav {
    color: #f4f6fa; background: var(--qp-header-glass); border-color: rgba(226,233,245,.18);
    -webkit-backdrop-filter: var(--qp-header-blur); backdrop-filter: var(--qp-header-blur);
  }
  /* The mobile catalogue sits inside the glass navigation sheet. */
  #site-header .qp-nav-products-menu { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 768px) {
  #site-header { --qp-header-blur: blur(8px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #site-header { --qp-header-glass: #191d25; }
}
@media (prefers-contrast: more) {
  #site-header { --qp-header-glass: #11151b; --qp-header-blur: none; border-color: #c7d0dd; }
}
@media (forced-colors: active) {
  #site-header, #site-header.scrolled, #site-header .main-nav, #site-header .qp-nav-products-menu {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #site-header :is(a, .logo, .main-nav a, .qp-nav-products-menu a) { color: LinkText; }
  #site-header :is(button, .acct-btn, .nav-toggle, .logo .mk) { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  #site-header :is(summary, .qp-nav-products-group h2, .qp-nav-products-menu small) { color: CanvasText; }
  #site-header :is(a, button, summary):focus-visible { outline-color: Highlight; }
}

/* Context switches keep the frame stable; mobile direction scrolling below
   can hide it without changing the document's layout. */
#site-header.has-product-context { transform: none; opacity: 1; visibility: visible; transition: none; }
#site-header.has-product-context :is(.logo span:not(.mk), .main-nav) {
  filter: none;
  transition: opacity 360ms cubic-bezier(.22,1,.36,1), filter 360ms cubic-bezier(.22,1,.36,1);
}
#site-header.is-context-switching :is(.logo span:not(.mk), .main-nav) {
  opacity: 0;
  filter: blur(6px);
  transition-duration: 240ms;
}
/* A focused/open control is never left blurred while its menu is in use. */
#site-header.has-product-context:focus-within :is(.logo span:not(.mk), .main-nav),
body:is(.qp-mobile-nav-open, .qp-catalog-open) #site-header.has-product-context :is(.logo span:not(.mk), .main-nav) {
  opacity: 1; filter: none; transition: none;
}
main .qp-product-nav[hidden] { display: none !important; }
/* Without JS, product anchors stay inline instead of creating a second sticky bar. */
main .qp-product-nav:not([hidden]) { position: static !important; }
#site-header .qp-header-product-request { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#site-header .logo { flex-shrink: 0; }
#site-header.is-product-context .main-nav { min-width: 0; }
@media (max-width: 940px) {
  #site-header.is-product-context .main-nav.is-open { display: flex; flex-direction: column; align-items: stretch; }
  #site-header.is-product-context .main-nav a { padding: 10px 16px; }
}
@media (max-width: 480px) {
  #site-header.has-product-context .header-inner { gap: 8px; }
  #site-header.has-product-context .header-actions { gap: 6px; }
  #site-header.has-product-context .logo { font-size: 12px; gap: 6px; }
  #site-header.is-product-context .logo .mk { display: none; }
  #site-header.is-product-context .logo span:not(.mk) { max-width: 12ch; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
  #site-header.has-product-context .qp-header-product-request { padding-inline: 10px; font-size: 12px; }
  #site-header.has-product-context:not(.is-product-context) .logo span:not(.mk) { display: none; }
}

/* Extend the actual opening backdrop into the header's normal-flow slot.
   Explicit wrappers opt in with data-page-opening; legacy hero consumers keep
   their geometry. Clearance belongs to content, never to a blank backdrop strip. */
body.qp-page main#content:has(> article > :is(.qp-mixup-hero, .qp-hero, .qp-home-hero, .qp-mini-hero, .qp-seo-product-hero, .qp-fotoavtomat-hero, .qp-business-hero, .qp-ai-hub-hero, .qp-about-hero, .stellar-hero, [data-page-opening]):first-child) {
  margin-top: calc(0px - var(--qp-header-opening-slot, 64px));
}
body.qp-page main#content > article > :is(.qp-mixup-hero, .qp-hero, .qp-home-hero, .qp-mini-hero, .qp-seo-product-hero, .qp-fotoavtomat-hero, .qp-business-hero, .qp-ai-hub-hero, .qp-about-hero, .stellar-hero, [data-page-opening]):first-child {
  border-top: var(--qp-header-opening-slot, 64px) solid transparent;
  background-clip: border-box;
  /* overflow:clip cuts at the padding box, excluding the transparent border.
     Clip the border box instead so the actual ambient layer reaches the header. */
  overflow: visible;
  clip-path: inset(0);
}
body.qp-page main#content > article > :is(.qp-mixup-hero, .qp-hero, .qp-home-hero, .qp-mini-hero, .qp-seo-product-hero, .qp-fotoavtomat-hero, .qp-business-hero, .qp-ai-hub-hero, .qp-about-hero, .stellar-hero, [data-page-opening]):first-child > :is(.qp-hero-media, .qp-hero-scrim, .qp-home-hero-media, .qp-home-hero-scrim, .qp-video-section-light, .qp-about-backdrop),
body.qp-page main#content > article > :is(.qp-mixup-hero, .qp-hero, .qp-home-hero, .qp-mini-hero, .qp-seo-product-hero, .qp-fotoavtomat-hero, .qp-business-hero, .qp-ai-hub-hero, .qp-about-hero, .stellar-hero, [data-page-opening]):first-child > :where(.qp-ambient-gate) > .qp-video-section-light { top: calc(0px - var(--qp-header-opening-slot, 64px)); }
@media (prefers-reduced-motion: reduce) {
  #site-header.has-product-context :is(.logo span:not(.mk), .main-nav) { transition: none; filter: none; }
}

/* Site-wide mobile reading: shared glass extends into the sensor safe area.
   Without JS the header remains visible and navigation still works. */
@media (max-width: 940px) {
  body.qp-page { --qp-header-opening-slot: calc(64px + env(safe-area-inset-top, 0px)); }
  #site-header { padding-top: env(safe-area-inset-top, 0px); }
  /* Keep the viewport edge and sensor area transparent. Safari can fall back
     to the opaque page canvas when the edge-sampled sticky element itself has
     backdrop-filter (WebKit 319479). Blur only the inset navigation surface;
     the real scrolling page remains behind the safe area, not a painted strip. */
  #site-header, #site-header.scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #site-header::before {
    content: "";
    position: absolute;
    inset: max(1px, env(safe-area-inset-top, 0px)) 0 0;
    z-index: -1;
    pointer-events: none;
    background: var(--qp-header-glass);
    -webkit-backdrop-filter: var(--qp-header-blur);
    backdrop-filter: var(--qp-header-blur);
  }
  #site-header .main-nav {
    top: 100%;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  #site-header.has-scroll-behavior {
    transition: transform 360ms cubic-bezier(.22,1,.36,1), opacity 240ms ease, visibility 0s;
  }
  #site-header.has-scroll-behavior.is-scroll-hidden {
    transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 360ms cubic-bezier(.22,1,.36,1), opacity 240ms ease, visibility 0s 360ms;
  }
}
@media (max-width: 940px) and (forced-colors: active) {
  #site-header::before {
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 940px) and (prefers-reduced-motion: reduce) {
  #site-header.has-scroll-behavior,
  #site-header.has-scroll-behavior.is-scroll-hidden { transition: none; }
}

/* MixUp: keep Safari's obscured top/bottom insets backed by the scrolling page.
   WebKit LocalFrameView::fixedContainerEdges treats even a transparent,
   viewport-wide sticky box as an edge container. A narrow sticky anchor with
   a normal-flow, full-width child retains the same header geometry without
   asking Safari to extend a solid colour into its own toolbar. */
body:has(.qp-read-page--mixup-seo) #site-header {
  width: 1px;
  view-transition-name: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:has(.qp-read-page--mixup-seo) #site-header .header-inner {
  width: var(--qp-header-inline-size, 100vw);
  max-width: var(--qp-max);
  margin-inline: max(0px, calc((var(--qp-header-inline-size, 100vw) - var(--qp-max)) / 2)) 0;
  view-transition-name: site-header;
}
body:has(.qp-read-page--mixup-seo) #site-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--qp-header-inline-size, 100vw);
  z-index: -1;
  pointer-events: none;
  background: var(--qp-header-glass);
  -webkit-backdrop-filter: var(--qp-header-blur);
  backdrop-filter: var(--qp-header-blur);
}
body:has(.qp-read-page--mixup-seo) #site-header .qp-nav-products-menu { width: var(--qp-header-inline-size, 100vw); }
body:has(.qp-read-page--mixup-seo):not(.qp-catalog-open):not(.qp-mobile-nav-open) .qp-nav-backdrop { display: none; }
@media (max-width: 940px) {
  #site-header :is(.main-nav, .qp-nav-products-menu).is-menu-animating { overflow: hidden; box-sizing: border-box; min-height: 0; }
  body:has(.qp-read-page--mixup-seo) #site-header::before { top: env(safe-area-inset-top, 0px); }
  body:has(.qp-read-page--mixup-seo) #site-header .main-nav { width: var(--qp-header-inline-size, 100vw); box-sizing: border-box; }
  body.qp-mobile-nav-open:has(.qp-read-page--mixup-seo) #site-header::before { bottom: calc(-1 * var(--qp-open-menu-height, 0px)); }
  body:has(.qp-read-page--mixup-seo) #site-header .main-nav {
    background: transparent; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body:has(.qp-read-page--mixup-seo) #site-header .qp-nav-products-menu { width: auto; }
  body:has(.qp-read-page--mixup-seo) .qp-nav-backdrop { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
@media (forced-colors: active) {
  body:has(.qp-read-page--mixup-seo) #site-header::before { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
}