:root {
  --shop-header-logo-width: clamp(9.5rem, calc(15 * var(--su)), 15rem);
  --shop-header-main-height: max(6rem, calc(7.25 * var(--su)));
  --shop-header-control-size: max(2.5rem, calc(3 * var(--su)));
  --shop-header-menu-control-size: max(2.375rem, calc(2.875 * var(--su)));
  --shop-header-field-height: max(2.75rem, calc(3 * var(--su)));
  --shop-header-search-action-size: max(2.5rem, calc(2.5 * var(--su)));
  --shop-header-icon-size: max(1.125rem, calc(1.35 * var(--su)));
  --shop-header-badge-size: max(1.125rem, calc(1.25 * var(--su)));
  --shop-header-badge-font-size: max(0.625rem, calc(0.68 * var(--su)));
  --shop-header-menu-icon-width: max(1rem, calc(1.15 * var(--su)));
  --shop-header-menu-padding: max(0.5rem, calc(0.65 * var(--su)));
  --shop-header-menu-reserve: max(2.75rem, calc(3.25 * var(--su)));
}

.shop-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 calc(0.35 * var(--su)) calc(1.5 * var(--su)) rgba(18, 50, 110, .06);
}
.shop-header__main,
.shop-header__nav { padding-inline: var(--pk-site-gutter); }
.shop-header__main-inner { min-height: var(--shop-header-main-height); align-items: center; }
.shop-header__brand,
.shop-header__actions,
.shop-header__action,
.shop-header__nav-inner { display: flex; align-items: center; }
.shop-header__brand { gap: var(--space-3); }
.shop-header .header-logo { flex: 0 1 var(--shop-header-logo-width); }
.shop-header .header-logo img { width: var(--shop-header-logo-width); height: auto; max-height: max(4.5rem, calc(4.75 * var(--su))); object-fit: contain; }
.shop-header__divider { width: 1px; height: max(2.75rem, calc(3 * var(--su))); background: var(--color-line); }
.shop-header__shop-name { color: var(--primary-color); font-size: max(1.1rem, calc(1.35 * var(--su))); font-weight: 700; white-space: nowrap; }

.shop-header__search { align-items: center; display: flex; min-height: var(--shop-header-field-height); padding-inline: var(--space-3) var(--space-1); background: #f1f5f8; border: 1px solid transparent; border-radius: 999px; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.shop-header__search:focus-within { background: #fff; border-color: var(--secondary-color); box-shadow: var(--focus-ring); }
.shop-header__search input[type="search"] { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--pk-text-color); font: inherit; }
.shop-header__search button { width: var(--shop-header-search-action-size); height: var(--shop-header-search-action-size); flex: 0 0 var(--shop-header-search-action-size); display: grid; place-items: center; color: var(--secondary-color); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.shop-header__search button:hover { color: #fff; background: var(--secondary-color); }
.shop-header__search svg,
.shop-header__action-icon svg { width: var(--shop-header-icon-size); height: var(--shop-header-icon-size); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.shop-header__actions { justify-content: flex-end; gap: var(--space-3); }
.shop-header__action { position: relative; gap: var(--space-2); color: var(--primary-color); text-decoration: none; }
.shop-header__action-icon { display: grid; place-items: center; width: var(--shop-header-control-size); height: var(--shop-header-control-size); border: 1px solid var(--color-line); border-radius: 50%; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.shop-header__action:hover .shop-header__action-icon { color: #fff; border-color: var(--primary-color); background: var(--primary-color); }
.shop-header__action-copy { display: flex; flex-direction: column; line-height: 1.25; }
.shop-header__action-copy small { color: var(--color-muted); font-size: var(--desktop-body-xs); }
.shop-header__action-copy strong { font-size: var(--desktop-body-sm); }
.shop-header__cart-count { position: absolute; right: calc(-0.15 * var(--su)); bottom: calc(-0.15 * var(--su)); min-width: var(--shop-header-badge-size); height: var(--shop-header-badge-size); display: grid; place-items: center; padding-inline: max(0.2rem, calc(0.25 * var(--su))); color: #fff; background: var(--secondary-color); border: 2px solid #fff; border-radius: 999px; font-size: var(--shop-header-badge-font-size); font-weight: 700; }

.shop-header__nav { color: #fff; background: var(--primary-color); }
.shop-header__nav-inner { justify-content: space-between; min-height: max(3.25rem, calc(3.5 * var(--su))); max-width: var(--pk-container-width); margin-inline: auto; }
.shop-header .pk-menu .menu { margin: 0; padding: 0; max-width: none; gap: var(--space-4); }
.shop-header .pk-menu ul.menu li:not(.menu-button) > a { display: block; padding-block: var(--space-3); color: #fff; font-size: var(--desktop-body-sm); font-weight: 700; }
.shop-header .pk-menu ul.menu li:not(.menu-button) > a:hover { color: var(--color-brand-pale); }
.shop-header .pk-submenu { top: calc(100% + var(--space-1)); min-width: max(14rem, calc(14 * var(--su))); padding: var(--space-3); border-radius: var(--radius-sm); box-shadow: 0 calc(0.75 * var(--su)) calc(2 * var(--su)) rgba(18, 50, 110, .14); transform: translateY(calc(-0.4 * var(--su))); transition: opacity .2s ease, transform .2s ease; }
.shop-header :is(.pk-menu-item, .pk-submenu-item).has-submenu:is(:hover, :active, :focus, :focus-within) > .pk-submenu { transform: translateY(0); }
.shop-header .pk-submenu a { color: var(--primary-color) !important; }
.shop-header__context { margin: 0; color: var(--color-brand-pale); font-size: var(--desktop-body-xs); }
.shop-header__nav a:focus-visible { outline-color: #fff; }
.shop-header .menu-mobile-only { display: none; }

@media (max-width: 992px) {
  .shop-header__main-inner { row-gap: var(--space-2); padding-block: var(--space-2); }
  .shop-header__brand { order: 1; }
  .shop-header__actions { order: 2; padding-right: var(--shop-header-menu-reserve); }
  .shop-header__search { order: 3; margin-top: var(--space-1); }
  .shop-header__nav-inner { min-height: 0; justify-content: flex-end; }
  .shop-header .pk-menu { padding: 0; position: static; }
  .shop-header .pk-menu .hamburger { position: absolute; z-index: 106; right: var(--pk-site-gutter); top: calc(var(--space-2) + ((var(--shop-header-control-size) - var(--shop-header-menu-control-size)) / 2)); width: var(--shop-header-menu-control-size); height: var(--shop-header-menu-control-size); margin: 0; padding: var(--shop-header-menu-padding); color: #fff; border: 0; border-radius: 50%; background: var(--primary-color); }
  .shop-header .pk-menu .hamburger span { background: currentColor; }
  .shop-header .pk-menu .hamburger span { width: var(--shop-header-menu-icon-width); }
  .shop-header .pk-menu .menu { position: fixed; inset: var(--pk-header-height) 0 0; z-index: 105; width: 100vw; height: calc(100svh - var(--pk-header-height)); gap: var(--space-2); padding: var(--space-4) var(--pk-site-gutter) var(--space-5); background: var(--primary-color); }
  .shop-header .pk-submenu { transform: none; transition: none; }
  .shop-header .pk-menu ul.menu li:not(.menu-button) > a { padding-block: var(--space-2); font-size: max(1.125rem, calc(1.125 * var(--su))); }
  .shop-header .menu-mobile-only { display: list-item; }
  .shop-header__context { display: none; }
}

@media (max-width: 767px) {
  :root { --shop-header-logo-width: min(44vw, max(8.75rem, calc(9.5 * var(--su)))); --shop-header-main-height: max(4.5rem, calc(4.5 * var(--su))); }
  .shop-header__brand { grid-column-end: span 3; gap: max(0.5rem, calc(0.65 * var(--su))); }
  .shop-header__divider,
  .shop-header__shop-name { display: none; }
  .shop-header__actions { grid-column-end: span 2; gap: max(0.2rem, calc(0.25 * var(--su))); }
  .shop-header__action-copy { display: none; }
  .shop-header__action-icon { width: var(--shop-header-control-size); height: var(--shop-header-control-size); }
  .shop-header__search { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  .shop-header__action:not(.shop-header__cart) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-header *, .shop-header *::before, .shop-header *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}