/*
 * Kik Header — Figma site chrome.
 * Desktop frame 11611:3910 (1600x66), mobile frame 11675:4140 (414x66).
 *
 * Values come from the frames' own kik design variables. A few are written as
 * literals instead of var() because the committed build output
 * assets/kik-theme.css still carries pre-token-sync values for them:
 *   kik-color/text/primary  resolves to #000 there, #1e1e1e in src/input.css
 *   kik-color/bg/surface    resolves to #fff  there, #f5f5f5 in src/input.css
 *   kik-spacing/page-default resolves to 124px above 768px, 24px in src/input.css
 * Every literal equals the synced src/input.css token value, so the header
 * renders correctly whether or not the shared stylesheet has been rebuilt.
 * The token name is named at each site.
 *
 * The desktop frame is 1600px wide and its row needs ~1030px before anything
 * overlaps, so the desktop layout engages at 1024px and the inter-item gap is
 * fluid below 1600px; at exactly 1600px every measurement is the frame's.
 */

.kik-header {
  position: relative;
  z-index: 30;
  display: block;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--kik-color-bg-page, #ffffff);
  /* kik-color/text/primary — literal, see header note */
  color: #1e1e1e;
  font-family: var(--kik-text-font-body, "Inter", "Helvetica Neue", Arial, sans-serif);
  line-height: var(--kik-text-line-height-body, 1.6);
  /* kik-spacing/page-default (mobile) */
  padding-inline: var(--kik-spacing-16, 16px);
}

.kik-header *,
.kik-header *::before,
.kik-header *::after {
  box-sizing: border-box;
}

/* Frame 11675:4006 / 11611:3887 — the single 66px row both frames draw. */
.kik-header__bar {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 14px;
  padding-block: var(--kik-spacing-16, 16px);
}

/* ---------------------------------------------------------------- branding */

.kik-header__branding {
  display: flex;
  min-width: 0;
  flex-shrink: 0;
  align-items: center;
}

.kik-header__logo-link {
  display: block;
  max-width: 100%;
}

/* image 1 — 170x20 on mobile, 204x24 on desktop. */
.kik-header__logo {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* ------------------------------------------------------------- primary nav */

/* Container 11611:3891 — desktop only; the mobile frame has no inline nav. */
.kik-header__nav {
  display: none;
}

.kik-header__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 34px at the 1600px frame width, tightened on narrower desktops */
  gap: clamp(20px, 2.125vw, 34px);
}

.kik-header__nav-item {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.kik-header__nav-link {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* HorizontalBorder 11611:3892 reserves the underline band below the label */
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-size: var(--kik-text-size-body-md, 16px);
  font-weight: 700;
  text-decoration: none;
}

.kik-header__nav-link:hover,
.kik-header__nav-link:focus-visible,
.kik-header__nav-item--active > .kik-header__nav-link {
  border-bottom-color: currentColor;
}

/* Submenu panel. The sealed capture carries no open-state frame for this
   header, so nothing below is a baseline reproduction: it is derived from the
   desktop bar's own tokens and only renders when the bound Shopify menu has
   children. See the handoff's interpretations. */
.kik-header__submenu {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  display: none;
  min-width: 200px;
  flex-direction: column;
  padding: var(--kik-spacing-12, 12px);
  background-color: var(--kik-color-bg-page, #ffffff);
  /* kik-color/bg/surface — literal, see header note */
  border: 1px solid #f5f5f5;
  box-shadow: 0 8px 24px rgba(30, 30, 30, 0.08);
}

.kik-header__nav-item:hover > .kik-header__submenu,
.kik-header__nav-item:focus-within > .kik-header__submenu,
.kik-header__nav-item[data-kik-open="true"] > .kik-header__submenu {
  display: flex;
}

.kik-header__nav-item[data-kik-closed="true"] > .kik-header__submenu {
  display: none;
}

.kik-header__submenu-link {
  display: block;
  padding-block: var(--kik-spacing-4, 4px);
  white-space: nowrap;
  font-size: var(--kik-text-size-body-md, 16px);
  text-decoration: none;
}

.kik-header__submenu-link:hover,
.kik-header__submenu-link:focus-visible {
  text-decoration: underline;
}

.kik-header__submenu-group {
  padding-block: var(--kik-spacing-4, 4px);
}

.kik-header__submenu-group-title {
  font-weight: 700;
}

/* ------------------------------------------------------------------ actions */

/* Container 11611:3900 / Container 11675:4009 */
.kik-header__actions {
  display: flex;
  min-width: 0;
  flex: 1 0 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--kik-spacing-12, 12px);
}

/* Background+Border 12069:13548 — the desktop search field. */
.kik-header__search {
  display: none;
  min-width: 96px;
  width: 152px;
  flex-shrink: 1;
  align-items: center;
  gap: var(--kik-spacing-8, 8px);
  padding: var(--kik-spacing-8, 8px);
  /* kik-color/bg/surface — literal, see header note */
  background-color: #f5f5f5;
  border-radius: var(--kik-radius-none, 0);
  text-decoration: none;
}

.kik-header__search-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.kik-header__search-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--kik-color-text-tertiary, #afafaf);
  font-size: var(--kik-text-size-body-xsm, 12px);
  font-weight: 400;
}

/* Frame 12069:13828 (mobile, 4px) / Frame 12069:13630 (desktop, 8px) */
.kik-header__icons {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--kik-spacing-4, 4px);
}

/* Background 30x30 wrapper that centres each 24x24 glyph. */
.kik-header__icon-button {
  position: relative;
  display: flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  text-decoration: none;
}

.kik-header__icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* icon/user draws a 17.6429x19 group inset inside its 24x24 box. */
.kik-header__icon--user {
  position: relative;
  width: 24px;
  height: 24px;
}

.kik-header__icon--user img {
  position: absolute;
  top: 8.33%;
  left: 12.5%;
  width: 17.6429px;
  height: 19px;
}

/* Background 11675:4025 / 11620:6365 — the cart count badge. */
.kik-header__cart-count {
  position: absolute;
  top: -3.99px;
  right: -3.98px;
  display: flex;
  width: 15.99px;
  height: 15.99px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--kik-color-bg-accent, #cad66a);
  /* kik-color/text/primary — literal, see header note */
  color: #1e1e1e;
  font-family: "Hanken Grotesk", var(--kik-text-font-body, "Inter"), Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}

/* Icon/hamburger 11675:4019 — mobile only. It sits outside the 4px icon run,
   so the 12px gap it takes from Container 11675:4009 is the actions gap. */
.kik-header__menu-toggle {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.kik-header__search-toggle--mobile {
  display: flex;
}

/* ------------------------------------------------------------------ drawer */

/* The capture has no mobile open-state frame, so the drawer below is derived
   from the desktop nav: same labels, typography, search field and tokens,
   stacked. See the handoff's interpretations. */
.kik-header__drawer {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: none;
}

.kik-header__drawer[data-kik-open="true"] {
  display: block;
}

.kik-header__drawer-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(30, 30, 30, 0.4);
}

.kik-header__drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(360px, 90vw);
  flex-direction: column;
  gap: var(--kik-spacing-16, 16px);
  overflow-y: auto;
  padding: var(--kik-spacing-16, 16px);
  background-color: var(--kik-color-bg-page, #ffffff);
  /* kik-color/text/primary — literal, see header note */
  color: #1e1e1e;
}

.kik-header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kik-spacing-16, 16px);
}

.kik-header__drawer-title {
  overflow: hidden;
  font-size: var(--kik-text-size-body-md, 16px);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kik-header__drawer-close {
  display: flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  font-size: 16px;
  line-height: 1;
}

.kik-header__drawer-search {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--kik-spacing-8, 8px);
  padding: var(--kik-spacing-8, 8px);
  /* kik-color/bg/surface — literal, see header note */
  background-color: #f5f5f5;
  border-radius: var(--kik-radius-none, 0);
  text-decoration: none;
}

.kik-header__drawer-nav {
  display: flex;
  flex-direction: column;
}

.kik-header__drawer-link {
  display: block;
  padding-block: var(--kik-spacing-12, 12px);
  /* kik-color/bg/surface — literal, see header note */
  border-bottom: 1px solid #f5f5f5;
  font-size: var(--kik-text-size-body-md, 16px);
  font-weight: 700;
  text-decoration: none;
}

.kik-header__drawer-sublist {
  display: flex;
  flex-direction: column;
  padding-left: var(--kik-spacing-16, 16px);
}

.kik-header__drawer-sublink {
  display: block;
  padding-block: var(--kik-spacing-8, 8px);
  font-size: var(--kik-text-size-body-md, 16px);
  font-weight: 400;
  text-decoration: none;
}

/* --------------------------------------------------------------- desktop */

@media (min-width: 1024px) {
  .kik-header {
    /* kik-spacing/page-default (desktop) — literal, see header note */
    padding-inline: 24px;
  }

  .kik-header__bar {
    justify-content: space-between;
    gap: 0;
    padding-block: 0;
  }

  /* Frame 11611:3888 and Container 11611:3900 each take half the free width,
     which is what centres the nav at the frame's x=528. */
  .kik-header__branding,
  .kik-header__actions {
    flex: 1 0 0;
  }

  .kik-header__logo {
    width: 204px;
  }

  .kik-header__nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-self: stretch;
  }

  .kik-header__actions {
    gap: var(--kik-spacing-lg, 24px);
  }

  .kik-header__search {
    display: flex;
  }

  .kik-header__icons {
    gap: var(--kik-spacing-8, 8px);
  }

  /* The open-state attribute is more specific than the base rule, so the
     drawer has to be switched off through the same attribute selector. */
  .kik-header__menu-toggle,
  .kik-header__search-toggle--mobile,
  .kik-header__drawer,
  .kik-header__drawer[data-kik-open="true"] {
    display: none;
  }
}