/* Header (source region header-1) — preserved source CSS, section-scoped.
 *
 * Source page:     senfeng-real-html-full-flow
 * Source revision: bb337f1c-e357-4340-b921-3fa0ba15bd4e
 * Content hash:    sha256:68a6857aa50ebfd2a17aeaa3dc8fe5d3c50a6a97db202c19bfebc6f483ebdaf8
 * Region CSS:      harness/output/html-baselines/senfeng-real-html-full-flow/r1/desktop.regions/header-1.styles.css
 *                  (mobile region stylesheet is byte-identical)
 *
 * Every ordinary rule below is scoped under the literal
 * [data-sth-source-id="header-1"] implementation root. Declaration order,
 * values, custom properties, breakpoints, pseudo-elements, :focus-within and
 * :hover states are preserved from the capture.
 *
 * The captured `.announce` strip (`div.announce`, immediately before `header`
 * in the source body) is part of this shared Header component: source region
 * header-1 owns the announcement strip and the main chrome row. It is rendered
 * by sections/kik-header.liquid as a sibling *before* the implementation root
 * so the header-1 rect keeps its captured geometry (desktop y=45 h=73, mobile
 * y=66 h=49). Because it therefore cannot sit under the identity root, its
 * rules are scoped under the section-owned `.kik-header-shell` wrapper class —
 * still section-local, never global. See scopedCssExceptions in the result.
 *
 * Deliberately NOT carried here (see the section result's scopedCssExceptions):
 *  - .nav__links rules — owned by source region navigation-2;
 *  - html / body / [id] / global prefers-reduced-motion resets — page-owned;
 *  - @font-face — cannot be scoped; emitted from the section Liquid so the
 *    staged Poppins woff2 files bind through asset_url.
 */

.kik-header-shell,
[data-sth-source-id="header-1"] {
  --kik-color-bg-page: #ffffff;
  --kik-color-bg-surface: #ffffff;
  --kik-color-bg-surface-alt-1: #f5f7f8;
  --kik-color-bg-surface-alt-2: #e6eaec;
  --kik-color-bg-surface-alt-3: #c7cfd3;
  --kik-color-bg-inverse: #212721;
  --kik-color-bg-accent: #0085ca;
  --kik-color-bg-accent-subtle: #e6f3fa;
  --kik-color-bg-star: #fecf84;
  --kik-color-text-primary: #212721;
  --kik-color-text-secondary: #6f736f;
  --kik-color-text-tertiary: #9b9e9b;
  --kik-color-text-inverse: #ffffff;
  --kik-color-text-accent: #0085ca;
  --kik-color-action-primary: #0085ca;
  --kik-color-action-secondary: #ffffff;
  --kik-color-border-default: #c7cfd3;
  --kik-color-border-subtle: #e6eaec;
  --kik-color-border-accent: #0085ca;
  --kik-color-border-inverse: #ffffff;
  --kik-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kik-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kik-text-size-h1: 56px;
  --kik-text-size-h2: 48px;
  --kik-text-size-h4: 32px;
  --kik-text-size-h5: 24px;
  --kik-text-size-h6: 20px;
  --kik-text-size-body-lg: 18px;
  --kik-text-size-body-md: 16px;
  --kik-text-size-body-sm: 14px;
  --kik-text-size-body-xsm: 12px;
  --kik-space-gap-2xs: 4px;
  --kik-space-gap-xs: 8px;
  --kik-space-gap-sm: 12px;
  --kik-space-gap-md: 16px;
  --kik-space-gap-lg: 24px;
  --kik-space-gap-xl: 32px;
  --kik-space-gap-2xl: 48px;
  --kik-space-inset-2xs: 4px;
  --kik-space-inset-xs: 8px;
  --kik-space-inset-sm: 12px;
  --kik-space-inset-md: 16px;
  --kik-space-inset-lg: 24px;
  --kik-space-inset-xl: 32px;
  --kik-space-gutter-md: 64px;
  --kik-space-gutter-lg: 80px;
  --kik-space-section-xs: 32px;
  --kik-space-section-md: 64px;
  --kik-radius-sm: 4px;
  --kik-radius-md: 6px;
  --kik-radius-lg: 8px;
  --kik-radius-pill: 100px;
  --kik-shadow-card: 4px 4px 50px rgba(0, 0, 0, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;
  --page-max: 1600px;
  --gutter: var(--kik-space-gutter-md);
}

@media (max-width: 1023px) {
  .kik-header-shell,
  [data-sth-source-id="header-1"] {
    --gutter: 32px;
    --kik-text-size-h1: 44px;
    --kik-text-size-h2: 36px;
  }
}

@media (max-width: 767px) {
  .kik-header-shell,
  [data-sth-source-id="header-1"] {
    --gutter: 16px;
    --kik-text-size-h1: 40px;
    --kik-text-size-h2: 40px;
    --kik-text-size-h4: 24px;
    --kik-space-section-md: 48px;
  }
}

/* Source page resets, re-rooted onto the section subtree. */
[data-sth-source-id="header-1"],
[data-sth-source-id="header-1"] *,
[data-sth-source-id="header-1"] *::before,
[data-sth-source-id="header-1"] *::after {
  box-sizing: border-box;
}

[data-sth-source-id="header-1"] {
  color: var(--kik-color-text-primary);
  font-family: var(--kik-font-body);
  font-size: var(--kik-text-size-body-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[data-sth-source-id="header-1"] img {
  max-width: 100%;
  height: auto;
  display: block;
}

[data-sth-source-id="header-1"] button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

[data-sth-source-id="header-1"] a {
  color: inherit;
  text-decoration: none;
}

[data-sth-source-id="header-1"] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* .nav — the implementation root itself. */
[data-sth-source-id="header-1"] {
  background: var(--kik-color-bg-surface);
  border-bottom: 1px solid var(--kik-color-border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
}

[data-sth-source-id="header-1"] .nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--kik-space-inset-md) var(--kik-space-gutter-lg);
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
}

[data-sth-source-id="header-1"] .nav__logo img,
[data-sth-source-id="header-1"] .nav__logo svg {
  width: 168px;
  height: 22.77px;
}

[data-sth-source-id="header-1"] .nav__utility {
  display: flex;
  gap: var(--kik-space-gap-lg);
  align-items: center;
}

[data-sth-source-id="header-1"] .nav__search {
  display: flex;
  align-items: center;
  gap: var(--kik-space-gap-sm);
  width: 260px;
  height: 40px;
  padding: 0 var(--kik-space-inset-md);
  background: var(--kik-color-bg-surface-alt-1);
  border: 1px solid var(--kik-color-border-subtle);
  border-radius: var(--kik-radius-pill);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

[data-sth-source-id="header-1"] .nav__search:focus-within {
  border-color: var(--kik-color-border-accent);
  background: rgb(255, 255, 255);
}

[data-sth-source-id="header-1"] .nav__search img,
[data-sth-source-id="header-1"] .nav__search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

[data-sth-source-id="header-1"] .nav__search input {
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: var(--kik-text-size-body-sm);
  color: var(--kik-color-text-primary);
}

[data-sth-source-id="header-1"] .nav__search input::placeholder {
  color: var(--kik-color-text-tertiary);
}

[data-sth-source-id="header-1"] .nav__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  transition: transform var(--dur) var(--ease);
}

[data-sth-source-id="header-1"] .nav__icon:hover {
  transform: scale(1.1);
}

[data-sth-source-id="header-1"] .nav__icon img,
[data-sth-source-id="header-1"] .nav__icon svg {
  width: 24px;
  height: 24px;
}

[data-sth-source-id="header-1"] .nav__toggle,
[data-sth-source-id="header-1"] .nav__msearch {
  display: none;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}

[data-sth-source-id="header-1"] .nav__toggle img,
[data-sth-source-id="header-1"] .nav__toggle svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 1279px) {
  [data-sth-source-id="header-1"] .nav__toggle {
    display: inline-flex;
  }

  [data-sth-source-id="header-1"] .nav__bar {
    padding: var(--kik-space-inset-md) var(--gutter);
  }
}

@media (max-width: 767px) {
  [data-sth-source-id="header-1"] .nav__bar {
    padding: 12px var(--gutter);
    justify-content: flex-start;
    gap: var(--kik-space-gap-xs);
  }

  [data-sth-source-id="header-1"] .nav__logo {
    margin-right: auto;
  }

  [data-sth-source-id="header-1"] .nav__search {
    display: none;
  }

  [data-sth-source-id="header-1"] .nav__msearch {
    display: inline-flex;
  }

  [data-sth-source-id="header-1"] .nav__account {
    display: none;
  }

  [data-sth-source-id="header-1"] .nav__utility {
    gap: var(--kik-space-gap-md);
  }

  [data-sth-source-id="header-1"] .nav__logo img,
  [data-sth-source-id="header-1"] .nav__logo svg {
    width: 150px;
    height: 20.33px;
  }
}

@media (pointer: coarse) {
  [data-sth-source-id="header-1"] .nav__icon,
  [data-sth-source-id="header-1"] .nav__toggle {
    position: relative;
  }

  [data-sth-source-id="header-1"] .nav__icon::after,
  [data-sth-source-id="header-1"] .nav__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: max(100%, 44px);
  }
}

/* Liquid/schema adaptation: Shopify wraps every section in its own
 * `#shopify-section-*` div. That extra box would become the containing block
 * for the captured `position: sticky` on `.nav`, and would also separate the
 * announcement strip from the header row. The wrapper is removed from layout
 * with `display: contents`, so `.kik-header-announce` and the header root are
 * laid out as direct body flow children exactly as in the source document and
 * the captured sticky behaviour (announcement scrolls away, header pins at
 * top) is preserved. Custom properties still inherit through the wrapper.
 * These two selectors are the only ones that sit outside the identity root.
 */
.kik-header-shell {
  display: contents;
}

/* `.announce` — announcement strip owned by source region header-1.
 * Preserved from the capture; re-rooted onto the section-owned shell class.
 */
.kik-header-shell .kik-header-announce,
.kik-header-shell .kik-header-announce *,
.kik-header-shell .kik-header-announce *::before,
.kik-header-shell .kik-header-announce *::after {
  box-sizing: border-box;
}

.kik-header-shell .kik-header-announce {
  font-family: var(--kik-font-body);
  font-size: var(--kik-text-size-body-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--kik-color-bg-inverse);
  color: var(--kik-color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kik-space-gap-xs);
  padding: var(--kik-space-inset-sm) var(--kik-space-gutter-lg);
  text-align: center;
}

.kik-header-shell .kik-header-announce p {
  font: inherit;
  color: inherit;
  margin: 0;
}

@media (max-width: 767px) {
  .kik-header-shell .kik-header-announce {
    padding: var(--kik-space-inset-sm) var(--kik-space-inset-md);
  }
}