.tk-site-header {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  --block-container-padding-inline: 0 !important;
  --block-container-padding-inline-tablet: 0 !important;
  --block-container-padding-inline-mobile: 0 !important;
  --block-container-margin-inline: 0 !important;
  --block-container-margin-inline-tablet: 0 !important;
  --block-container-margin-inline-mobile: 0 !important;
  --block-default-padding-inline: 0 !important;
  inset-block-start: 0;
  z-index: var(--tk-layer-sticky);
  border-block-end: 1px solid var(--tk-color-border);
  background: var(--site-header-bg, var(--tk-color-surface));
  color: var(--site-header-text, var(--tk-color-text));
  font-family: var(--tk-font-body);
}

.tk-site-header--dark,
.tk-site-header__drawer--dark {
  --site-header-bg: #111225;
  --site-header-text: #ffffff;
  --site-header-accent: #8b8cf7;
  --site-header-icon: #ffffff;
  border-block-end-color: rgb(255 255 255 / 10%);
}

.tk-site-header--sticky {
  position: sticky;
}

.tk-site-header__topbar {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  background: var(--site-header-accent, var(--tk-color-primary));
  color: var(--site-header-on-accent, #ffffff);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* Keep the row boxed like a Section: its gutter is included in contentWidth, while
   the header background and optional top strip still run edge to edge. */
.tk-site-header__inner.tk-wrap {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--tk-gutter);
}

/* The menu's track is a share of the row, never the size of its own links: the
   menu reads that width to decide how many links it shows (Navigation), so it
   must not grow with them. The logo and the icons keep their full width; the
   equal side tracks hold the menu in the middle of the page. */
.tk-site-header__inner {
  display: grid;
  min-height: var(--site-header-height, 72px);
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 3fr) minmax(min-content, 1fr);
  align-items: center;
  gap: 18px;
}

.tk-site-header__logo {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-self: start;
  color: inherit;
  font-family: var(--tk-font-heading);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.tk-site-header__logo img {
  display: block;
  max-height: var(--site-header-logo-size, 42px);
  max-width: calc(var(--site-header-logo-size, 42px) * 4.3);
  object-fit: contain;
}

/* A text logo follows the merchant's logo size when one is set. */
.tk-site-header.tk-site-header--logo-sized .tk-site-header__logo {
  font-size: calc(var(--site-header-logo-size) * 0.55);
}

/* The cart beside a centred phone logo; the icons are hidden at that width. */
.tk-site-header__mobile-cart {
  display: none;
}

.tk-site-header__nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--site-header-gap, 28px);
}

.tk-site-header__nav > a,
.tk-site-header__dropdown-label,
.tk-site-header__dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
}

.tk-site-header__nav > a:hover,
.tk-site-header__dropdown-label:hover,
.tk-site-header__dropdown-btn:hover,
.tk-site-header__dropdown-btn[data-state="open"] {
  color: var(--site-header-accent, var(--tk-color-primary));
}

/* The resets above strip the browser ring with !important, so the keyboard
   ring has to be drawn back the same way. */
.tk-site-header__nav > a:focus-visible,
.tk-site-header__dropdown-label:focus-visible,
.tk-site-header__dropdown-btn:focus-visible {
  outline: 2px solid var(--site-header-accent, var(--tk-color-primary)) !important;
  outline-offset: 4px;
  border-radius: 4px;
}

.tk-site-header__dropdown-caret {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease, opacity 0.18s ease;
  opacity: 0.75;
  flex-shrink: 0;
}

.tk-site-header__dropdown-btn:hover .tk-site-header__dropdown-caret {
  opacity: 1;
}

.tk-site-header__dropdown-btn[data-state="open"] .tk-site-header__dropdown-caret {
  opacity: 1;
  transform: rotate(180deg);
}

/* A menu link's sub-links are always in the HTML, so crawlers follow them;
   the caret only shows or hides the list under it. */
.tk-site-header__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tk-site-header__dropdown-label + .tk-site-header__dropdown-btn {
  padding-block: 4px !important;
  padding-inline: 2px !important;
}

.tk-site-header__dropdown > .tk-site-header__submenu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  display: none;
  min-width: 160px;
  max-height: 360px;
  margin: 0;
  overflow-y: auto;
  list-style: none;
}

.tk-site-header__dropdown[data-state="open"] > .tk-site-header__submenu {
  display: block;
  animation: tk-select-in 0.14s ease-out;
}

.tk-site-header__submenu .tk-dropdown-item {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.tk-site-header__submenu .tk-dropdown-item:hover,
.tk-site-header__submenu .tk-dropdown-item:focus-visible {
  background: color-mix(in srgb, var(--tk-color-primary) 10%, transparent);
  color: var(--tk-color-primary);
}

/* Pinned to the last track of whatever grid the layout draws. Auto-placed, the
   icons slid into the menu's empty cell (the middle, or the start under
   `centered`) whenever the store had no menu links. */
.tk-site-header__actions {
  display: inline-flex;
  grid-column: -2;
  grid-row: 1;
  align-items: center;
  justify-self: end;
  gap: 4px;
  color: var(--site-header-icon, currentColor);
  flex-shrink: 0;
}

.tk-site-header__tools {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: var(--tk-round-radius, 9999px);
  background: color-mix(in srgb, var(--site-header-text, currentColor) 6%, transparent);
}

/* The pill already sets the settings apart from the icons, so the hairline
   between the two groups becomes plain space. */
.tk-site-header__divider {
  display: inline-block;
  width: 8px;
  flex-shrink: 0;
}

.tk-site-header__actions button:not(.tk-site-header__tool-btn):not(.tk-site-header__currency-btn),
.tk-site-header__actions a,
.tk-site-header__menu,
.tk-site-header__drawer-close {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: var(--tk-button-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.tk-site-header__actions > svg,
.tk-site-header__actions > a svg,
.tk-site-header__actions > button:not(.tk-site-header__tool-btn):not(.tk-site-header__currency-btn) svg {
  width: var(--site-header-icon-size, 18px);
  height: var(--site-header-icon-size, 18px);
}

.tk-site-header__tool-btn,
.tk-site-header__currency-btn {
  direction: ltr !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 36px !important;
  min-height: 36px !important;
  width: auto !important;
  min-width: 0 !important;
  padding-inline: 8px !important;
  padding-block: 0 !important;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--site-header-text, currentColor) 14%, transparent);
  border-radius: var(--tk-button-radius);
  color: var(--site-header-text, currentColor) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, border-radius 0.18s ease !important;
  user-select: none !important;
}

.tk-site-header__tool-btn:hover,
.tk-site-header__currency-btn:hover {
  color: var(--site-header-accent, var(--tk-color-primary)) !important;
}

/* --- Pill Style --- */
.tk-site-header__tool-btn--pill,
.tk-site-header .tk-site-header__tool-btn--pill,
.tk-site-header__actions .tk-site-header__tool-btn--pill,
.tk-site-header__actions .tk-site-header__currency-btn.tk-site-header__tool-btn--pill,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--pill {
  border-radius: var(--tk-round-radius, 9999px) !important;
  padding-inline: 10px !important;
  background: color-mix(in srgb, var(--site-header-text, currentColor) 4%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--site-header-text, currentColor) 16%, transparent) !important;
}

.tk-site-header__tool-btn--pill:hover,
.tk-site-header .tk-site-header__tool-btn--pill:hover,
.tk-site-header__actions .tk-site-header__tool-btn--pill:hover,
.tk-site-header__actions .tk-site-header__currency-btn.tk-site-header__tool-btn--pill:hover,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--pill:hover {
  background: color-mix(in srgb, var(--site-header-accent, var(--tk-color-primary)) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--site-header-accent, var(--tk-color-primary)) 35%, transparent) !important;
}

/* --- Outline Style --- */
.tk-site-header__tool-btn--outline,
.tk-site-header .tk-site-header__tool-btn--outline,
.tk-site-header__actions .tk-site-header__tool-btn--outline,
.tk-site-header__actions .tk-site-header__currency-btn.tk-site-header__tool-btn--outline,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--outline {
  border-radius: var(--tk-button-radius) !important;
  border: 1px solid color-mix(in srgb, var(--site-header-text, currentColor) 22%, transparent) !important;
  background: transparent !important;
  padding-inline: 8px !important;
}

.tk-site-header__tool-btn--outline:hover,
.tk-site-header .tk-site-header__tool-btn--outline:hover,
.tk-site-header__actions .tk-site-header__tool-btn--outline:hover,
.tk-site-header__actions .tk-site-header__currency-btn.tk-site-header__tool-btn--outline:hover,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--outline:hover {
  background: color-mix(in srgb, var(--site-header-accent, var(--tk-color-primary)) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--site-header-accent, var(--tk-color-primary)) 35%, transparent) !important;
}

/* --- Minimal Style (No Border) --- */
.tk-site-header__tool-btn--minimal,
.tk-site-header .tk-site-header__tool-btn--minimal,
.tk-site-header__actions .tk-site-header__tool-btn--minimal,
.tk-site-header__actions .tk-site-header__currency-btn.tk-site-header__tool-btn--minimal,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--minimal {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  border-radius: var(--tk-button-radius) !important;
  padding-inline: 6px !important;
}

.tk-site-header__tool-btn--minimal:hover,
.tk-site-header .tk-site-header__tool-btn--minimal:hover,
.tk-site-header__actions .tk-site-header__tool-btn--minimal:hover,
.tk-site-header__actions .tk-site-header__currency-btn.tk-site-header__tool-btn--minimal:hover,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--minimal:hover {
  background: color-mix(in srgb, var(--site-header-accent, var(--tk-color-primary)) 10%, transparent) !important;
  border: 0 !important;
  border-color: transparent !important;
}

/* --- Icon-only sizing (Theme toggle, or icon-only switcher) --- */
.tk-site-header__tool-btn--icon,
.tk-site-header .tk-site-header__tool-btn--icon,
.tk-site-header__actions .tk-site-header__tool-btn--icon,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--icon {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
  gap: 0 !important;
}

/* Icon button in Pill style is circular */
.tk-site-header__tool-btn--icon.tk-site-header__tool-btn--pill,
.tk-site-header .tk-site-header__tool-btn--icon.tk-site-header__tool-btn--pill,
.tk-site-header__actions .tk-site-header__tool-btn--icon.tk-site-header__tool-btn--pill,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--icon.tk-site-header__tool-btn--pill {
  border-radius: var(--tk-round-radius, 9999px) !important;
  padding-inline: 0 !important;
}

/* Icon button in Minimal style is completely borderless */
.tk-site-header__tool-btn--icon.tk-site-header__tool-btn--minimal,
.tk-site-header .tk-site-header__tool-btn--icon.tk-site-header__tool-btn--minimal,
.tk-site-header__actions .tk-site-header__tool-btn--icon.tk-site-header__tool-btn--minimal,
.tk-site-header__drawer-footer .tk-site-header__tool-btn--icon.tk-site-header__tool-btn--minimal {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
}

.tk-site-header__tool-btn svg,
.tk-site-header__actions .tk-site-header__tool-btn svg,
.tk-site-header__currency-btn svg,
button.tk-site-header__currency-btn svg {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

.tk-site-header__actions .tk-site-header__tools .tk-site-header__tool-btn.tk-site-header__tool-btn {
  height: 32px !important;
  min-height: 32px !important;
  padding-inline: 10px !important;
  border: 0 !important;
  border-radius: var(--tk-round-radius, 9999px) !important;
  background: transparent !important;
}

.tk-site-header__actions .tk-site-header__tools .tk-site-header__tool-btn.tk-site-header__tool-btn--icon {
  width: 32px !important;
  min-width: 32px !important;
  padding-inline: 0 !important;
}

.tk-site-header__actions .tk-site-header__tools .tk-site-header__tool-btn.tk-site-header__tool-btn:hover,
.tk-site-header__actions .tk-site-header__tools .tk-site-header__tool-btn.tk-site-header__tool-btn[data-state="open"] {
  background: var(--site-header-bg, var(--tk-color-surface)) !important;
  color: var(--site-header-accent, var(--tk-color-primary)) !important;
}

.tk-site-header__actions .tk-site-header__tools .tk-site-header__tool-btn.tk-site-header__tool-btn--icon svg {
  width: 18px !important;
  height: 18px !important;
}

.tk-site-header .tk-site-header__tool-btn.tk-site-header__tool-btn--icon svg {
  width: var(--site-header-icon-size, 18px) !important;
  height: var(--site-header-icon-size, 18px) !important;
}

.tk-site-header__cart-link {
  position: relative;
}

.tk-site-header__cart-badge {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -4px;
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  align-items: center;
  justify-content: center;
  border-radius: var(--tk-round-radius, 9999px);
  background: var(--site-header-accent, var(--tk-color-primary));
  color: var(--site-header-on-accent, #ffffff);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}


.tk-site-header__drawer-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-block-start: 1px solid var(--tk-color-border);
  margin-block-start: auto;
}

.tk-site-header__search {
  display: inline-flex;
  width: min(var(--site-header-search-width, 320px), 100%);
  min-width: min(180px, 100%);
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  justify-self: center;
  border: 1px solid var(--site-header-search-border, var(--tk-color-border));
  border-radius: var(--site-header-search-radius, var(--tk-button-radius));
  background: var(--site-header-search-bg, color-mix(in srgb, var(--site-header-bg, #ffffff) 92%, var(--site-header-accent, #111827)));
  padding-block: 6px;
  padding-inline: 14px 8px;
  color: var(--site-header-search-text, color-mix(in srgb, var(--site-header-text, #111827) 62%, transparent));
  font-size: 13px;
  font-weight: 650;
}

.tk-site-header__search--outline {
  background: var(--site-header-search-bg, transparent);
}

.tk-site-header__search--minimal {
  border-color: transparent;
  border-block-end-color: var(--site-header-search-border, color-mix(in srgb, var(--site-header-text, #111827) 24%, transparent));
  border-radius: 0;
  background: var(--site-header-search-bg, transparent);
  padding-inline: 2px;
}

.tk-site-header__search:focus-within {
  border-color: var(--site-header-accent, var(--tk-color-primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-header-accent, var(--tk-color-primary)) 16%, transparent);
}

.tk-site-header__search--minimal:focus-within {
  border-color: transparent;
  border-block-end-color: var(--site-header-accent, var(--tk-color-primary));
  box-shadow: none;
}

.tk-site-header__search-input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--site-header-search-text, var(--site-header-text, var(--tk-color-text)));
  font: inherit;
}

.tk-site-header__search-input:focus,
.tk-site-header__search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.tk-site-header__search-input::placeholder {
  color: color-mix(in srgb, var(--site-header-search-text, var(--site-header-text, #111827)) 58%, transparent);
  opacity: 1;
}

.tk-site-header__search-submit {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--site-header-search-radius, var(--tk-button-radius));
  background: transparent;
  color: var(--site-header-icon, currentColor);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.tk-site-header__actions button:hover,
.tk-site-header__actions a:hover,
.tk-site-header__search-submit:hover,
.tk-site-header__menu:hover,
.tk-site-header__drawer-close:hover {
  background: color-mix(in srgb, var(--site-header-accent, var(--tk-color-primary)) 10%, transparent);
  color: var(--site-header-accent, var(--tk-color-primary));
}

.tk-site-header__menu {
  display: none;
  justify-self: end;
}

.tk-site-header--centered .tk-site-header__logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.tk-site-header--centered .tk-site-header__inner {
  grid-template-columns: minmax(0, 1fr) max-content minmax(min-content, 1fr);
}

.tk-site-header--centered .tk-site-header__nav {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
}

.tk-site-header--minimal .tk-site-header__inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tk-site-header--minimal .tk-site-header__nav {
  display: none;
}

.tk-site-header--minimal .tk-site-header__actions {
  grid-column: 2;
}

.tk-site-header--searchbar .tk-site-header__inner {
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1.1fr) auto;
}

.tk-site-header--searchbar .tk-site-header__nav {
  display: none;
}

.tk-site-header--twoRow .tk-site-header__inner {
  min-height: 0;
  /* The middle track grows to the chosen search width; with `auto` the field's
     percentage width collapsed it to the 280px minimum whatever was set. The
     side tracks never go below their content, so on a tablet the search gives
     way instead of the icons running over it. */
  grid-template-columns: minmax(max-content, 1fr) minmax(280px, var(--site-header-search-width, 320px)) minmax(max-content, 1fr);
  grid-template-rows: minmax(var(--site-header-height, 72px), auto) auto;
  row-gap: 0;
}

.tk-site-header--twoRow .tk-site-header__logo {
  grid-column: 1;
  grid-row: 1;
}

.tk-site-header--twoRow .tk-site-header__search {
  grid-column: 2;
  grid-row: 1;
}

.tk-site-header--twoRow .tk-site-header__actions {
  grid-column: 3;
  grid-row: 1;
}

.tk-site-header--twoRow .tk-site-header__nav {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 48px;
  padding-block: 10px 14px;
}

/* Menu position. Start: the menu follows the logo and the icons keep the far
   end. End: the menu sits against the icons. Center is the base grid. */
.tk-site-header--nav-start .tk-site-header__inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 32px;
}

.tk-site-header--nav-start .tk-site-header__nav {
  justify-content: flex-start;
}

.tk-site-header--nav-end .tk-site-header__inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.tk-site-header--nav-end .tk-site-header__nav {
  grid-column: 2;
  justify-content: flex-end;
}

.tk-site-header--nav-end .tk-site-header__actions {
  grid-column: 3;
}

/* The search field drawn at the head of the icons (searchDisplay "pill" in a
   layout without a search cell of its own). It gives up width before the icons
   do, so the row never overflows on a narrow desktop. */
.tk-site-header--search-inline .tk-site-header__actions {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
}

.tk-site-header--search-inline .tk-site-header__actions > .tk-site-header__search {
  width: auto;
  min-width: 0;
  flex: 0 1 var(--site-header-search-width, 320px);
  margin-inline-end: 6px;
}

.tk-site-header--compact .tk-site-header__inner {
  min-height: min(var(--site-header-height, 60px), 64px);
}

.tk-site-header--compact .tk-site-header__logo {
  font-size: 19px;
}

/* Mobile navigation drawer. It is portalled to the document body, so it reads
   the header's variables from the inline style the header hands it, and the
   dark layout's variables through .tk-site-header__drawer--dark above. */
.tk-site-header__drawer {
  --site-header-drawer-from: -100%;
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: calc(var(--tk-layer-overlay) + 1);
  display: flex;
  inline-size: min(84vw, 340px);
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-block: 12px 24px;
  padding-inline: 16px;
  background: var(--site-header-bg, var(--tk-color-surface));
  box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
  color: var(--site-header-text, var(--tk-color-text));
  font-family: var(--tk-font-body);
}

.tk-site-header__drawer[dir="rtl"] {
  --site-header-drawer-from: 100%;
}

/* The menu button at the end of the phone row: the drawer comes out of that edge. */
.tk-site-header__drawer--from-end {
  --site-header-drawer-from: 100%;
  inset-inline: auto 0;
}

.tk-site-header__drawer--from-end[dir="rtl"] {
  --site-header-drawer-from: -100%;
}

/* Full-screen menu: the sheet covers the phone and the menu entries are set
   in the heading face, one per line, divided by hairlines. */
.tk-site-header__drawer--fullscreen {
  inline-size: 100vw;
  padding-inline: 24px;
  box-shadow: none;
}

.tk-site-header__drawer--fullscreen .tk-site-header__drawer-nav > div > a {
  border-radius: 0;
  border-block-end: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  padding-block: 16px;
  padding-inline: 0;
  font-family: var(--tk-font-heading);
  font-size: 24px;
  font-weight: 700;
}

.tk-site-header__drawer[data-state="open"] {
  animation: tk-site-header-drawer-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.tk-site-header__drawer[data-state="closed"] {
  animation: tk-site-header-drawer-out 0.18s ease-in;
}

@keyframes tk-site-header-drawer-in {
  from { transform: translateX(var(--site-header-drawer-from)); }
}

@keyframes tk-site-header-drawer-out {
  to { transform: translateX(var(--site-header-drawer-from)); }
}

.tk-site-header__drawer-head {
  display: flex;
  justify-content: flex-end;
}

.tk-site-header__drawer-close {
  color: var(--site-header-icon, currentColor);
}

.tk-site-header__drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tk-site-header__drawer-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--tk-button-radius);
  padding: 12px;
  color: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.tk-site-header__drawer-nav a:hover,
.tk-site-header__drawer-nav a:focus-visible {
  background: color-mix(in srgb, var(--site-header-accent, var(--tk-color-primary)) 10%, transparent);
  color: var(--site-header-accent, var(--tk-color-primary));
}

.tk-site-header__drawer-nav a:focus-visible {
  outline: 2px solid var(--site-header-accent, var(--tk-color-primary));
  outline-offset: -2px;
}

.tk-site-header__drawer-nav svg {
  width: var(--site-header-icon-size, 18px);
  height: var(--site-header-icon-size, 18px);
  color: var(--site-header-icon, currentColor);
}

/*
  The account section sits below the store's own links, divided from them so the
  shopper reads "where to go in the shop" apart from "my account".
*/
.tk-site-header__drawer-account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--tk-color-border);
}

/* Signing out is a button, so it borrows the entries' look and reads as risky. */
.tk-site-header__drawer-signout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: var(--tk-button-radius);
  padding: 12px;
  background: transparent;
  color: var(--tk-color-danger);
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: background 0.18s ease;
}

.tk-site-header__drawer-signout:hover,
.tk-site-header__drawer-signout:focus-visible {
  background: color-mix(in srgb, var(--tk-color-danger) 10%, transparent);
}

.tk-site-header__drawer-signout svg {
  width: var(--site-header-icon-size, 18px);
  height: var(--site-header-icon-size, 18px);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tk-site-header__drawer[data-state] {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .tk-site-header__inner {
    min-height: var(--site-header-height-tablet, var(--site-header-height, 72px));
  }

  .tk-site-header__nav {
    gap: var(--site-header-gap-tablet, var(--site-header-gap, 28px));
  }

  .tk-site-header__search {
    width: min(var(--site-header-search-width-tablet, var(--site-header-search-width, 320px)), 100%);
  }

  .tk-site-header--twoRow .tk-site-header__inner {
    grid-template-columns: minmax(max-content, 0.7fr) minmax(220px, 1fr) minmax(max-content, 0.7fr);
  }

  .tk-site-header--search-inline .tk-site-header__actions > .tk-site-header__search {
    flex-basis: var(--site-header-search-width-tablet, var(--site-header-search-width, 320px));
  }
}

@media (max-width: 767px) {
  .tk-site-header__inner {
    min-height: var(--site-header-height-mobile, var(--site-header-height-tablet, var(--site-header-height, 64px)));
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tk-site-header--twoRow .tk-site-header__inner {
    min-height: var(--site-header-height-mobile, var(--site-header-height-tablet, var(--site-header-height, 64px)));
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
  }

  /*
   * Every layout that re-shapes the grid for desktop does it through its own
   * `--variant` class, so those rules out-specify the single-class mobile rules
   * in this block - a media query carries no specificity of its own. Each such
   * layout therefore has to be named here as well to come back to the phone's
   * two-column grid. `header-mobile-layout.test.ts` fails if a new layout is
   * added above without being listed here.
   */
  .tk-site-header--centered .tk-site-header__inner,
  .tk-site-header--minimal .tk-site-header__inner,
  .tk-site-header--searchbar .tk-site-header__inner,
  .tk-site-header--nav-start .tk-site-header__inner,
  .tk-site-header--nav-end .tk-site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tk-site-header__logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-size: 19px;
  }

  /* Same reason for the logo: a layout that places it for desktop keeps that
     placement on a phone unless it is named here. The centered layout put the
     logo in the middle column - the very cell the menu button occupies - so the
     two drew on top of each other. */
  .tk-site-header--centered .tk-site-header__logo,
  .tk-site-header--twoRow .tk-site-header__logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .tk-site-header__logo img {
    max-height: var(--site-header-logo-size-mobile, var(--site-header-logo-size-tablet, 36px));
    max-width: calc(var(--site-header-logo-size-mobile, var(--site-header-logo-size-tablet, 36px)) * 4.2);
  }

  .tk-site-header.tk-site-header--logo-sized .tk-site-header__logo {
    font-size: calc(var(--site-header-logo-size-mobile, var(--site-header-logo-size-tablet, 34px)) * 0.55);
  }

  .tk-site-header__nav,
  .tk-site-header__actions,
  .tk-site-header__search {
    display: none;
  }

  .tk-site-header__menu {
    display: inline-grid;
    grid-column: 2;
    grid-row: 1;
  }

  .tk-site-header--mobile-logo-center .tk-site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .tk-site-header--mobile-logo-center .tk-site-header__menu {
    grid-column: 1;
    justify-self: start;
  }

  .tk-site-header--mobile-logo-center .tk-site-header__logo {
    grid-column: 2;
    justify-self: center;
  }

  .tk-site-header--mobile-logo-center .tk-site-header__mobile-cart {
    display: inline-grid;
    width: 36px;
    height: 36px;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    place-items: center;
    color: var(--site-header-icon, inherit);
  }

  .tk-site-header--mobile-logo-center .tk-site-header__mobile-cart svg {
    width: var(--site-header-icon-size-mobile, var(--site-header-icon-size, 22px));
    height: var(--site-header-icon-size-mobile, var(--site-header-icon-size, 22px));
  }
}