:root {
  --shell-ink: #102a4a;
  --shell-blue: #2768ed;
  --shell-green: #00a847;
  --shell-muted: #607893;
  --shell-line: #d7e4f3;
  --shell-soft: #f4f8fc;
  --shell-white: #fff;
  --shell-shadow: 0 18px 55px rgba(16, 42, 74, .12);
}

html { scroll-padding-top: 104px; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.mobile-menu-open { overflow: hidden; }
::selection { background: rgba(39, 104, 237, .2); color: var(--shell-ink); }
.malkon-signin-link::after,
.signin-link::after { content: none !important; display: none !important; }
.malkon-skip-link {
  position: fixed;
  left: 16px;
  top: 10px;
  z-index: 999;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--shell-ink);
  color: #fff !important;
  font: 700 14px/1.2 "DM Sans", Arial, sans-serif;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.malkon-skip-link:focus { transform: translateY(0); }

.malkon-header-frame {
  position: sticky !important;
  top: 0;
  z-index: 80 !important;
  width: 100%;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--shell-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 1px 0 rgba(16, 42, 74, .02);
  backdrop-filter: blur(16px);
}

.malkon-header-shell {
  box-sizing: border-box;
  width: min(1440px, calc(100% - 48px)) !important;
  min-height: 92px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
}

.malkon-header-shell > .malkon-brand {
  width: clamp(190px, 16vw, 242px) !important;
  height: 66px !important;
  min-width: 190px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

.malkon-header-shell > .malkon-brand img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 242px !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: scale(1.24) !important;
  transform-origin: left center !important;
}

.malkon-site-nav {
  min-width: 0;
  margin-left: auto;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(14px, 1.7vw, 26px) !important;
  font-family: "DM Sans", Inter, Arial, sans-serif !important;
}

.malkon-primary-nav,
.malkon-nav-actions {
  display: flex;
  align-items: center;
}

.malkon-primary-nav { gap: clamp(14px, 1.35vw, 23px); }
.malkon-nav-actions { gap: 10px; }

.malkon-site-nav a,
.malkon-site-nav button {
  box-sizing: border-box !important;
  min-height: 44px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-family: "DM Sans", Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.malkon-primary-nav a {
  position: relative;
  padding: 10px 2px !important;
  color: var(--shell-ink) !important;
  border: 0 !important;
  background: transparent !important;
}

.malkon-primary-nav a:hover,
.malkon-primary-nav a[aria-current="page"] {
  color: var(--shell-blue) !important;
}

.malkon-primary-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 4px;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--shell-blue), var(--shell-green));
}

.malkon-nav-actions > a,
.malkon-nav-actions > button {
  min-width: 88px !important;
  padding: 10px 17px !important;
  border: 1px solid var(--shell-line) !important;
  background: var(--shell-white) !important;
  color: var(--shell-ink) !important;
  cursor: pointer !important;
}

.malkon-nav-actions > .signin-link,
.malkon-nav-actions > .malkon-signin-link {
  border-color: var(--shell-blue) !important;
  color: var(--shell-blue) !important;
}

.malkon-nav-actions > a:hover,
.malkon-nav-actions > button:hover {
  transform: translateY(-1px) !important;
  border-color: #abc7f8 !important;
  box-shadow: 0 8px 20px rgba(39, 104, 237, .12) !important;
}

.malkon-nav-actions .cart-count,
.malkon-nav-actions .cart span,
.malkon-nav-actions [id="cartCount"] {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 23px !important;
  height: 23px !important;
  margin-left: 7px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #13cf39 !important;
  color: #062d13 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.malkon-profile-link {
  min-width: 44px !important;
  padding: 5px 12px 5px 5px !important;
  gap: 8px !important;
}

.malkon-profile-link img,
.malkon-profile-initials {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.mobile-profile-link,
.mobile-menu-button,
.mobile-menu-overlay { display: none !important; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(39, 104, 237, .34) !important;
  outline-offset: 3px !important;
}

:where(button, .pill, .button, .btn, .submit, .add) { touch-action: manipulation; }

:where(input, select, textarea):focus {
  border-color: var(--shell-blue) !important;
  box-shadow: 0 0 0 4px rgba(39, 104, 237, .1) !important;
}

@media (max-width: 1240px) {
  .malkon-header-shell { width: min(100% - 32px, 1180px) !important; }
  .malkon-header-shell > .malkon-brand { width: 212px !important; min-width: 180px !important; }
  .mobile-menu-button {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    padding: 0 !important;
    place-content: center !important;
    gap: 5px !important;
    border: 1px solid var(--shell-line) !important;
    border-radius: 50% !important;
    background: var(--shell-white) !important;
    color: var(--shell-ink) !important;
    cursor: pointer !important;
    z-index: 83 !important;
  }
  .mobile-menu-button span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }
  .mobile-menu-open .mobile-menu-button span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-open .mobile-menu-button span:nth-child(2) { opacity: 0; }
  .mobile-menu-open .mobile-menu-button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .malkon-site-nav {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 16px !important;
    right: 16px !important;
    max-height: calc(100vh - 118px) !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 14px !important;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
    border: 1px solid var(--shell-line) !important;
    border-radius: 22px !important;
    background: var(--shell-white) !important;
    box-shadow: var(--shell-shadow) !important;
    z-index: 83 !important;
  }
  .mobile-menu-open .malkon-site-nav { display: flex !important; }
  .malkon-primary-nav,
  .malkon-nav-actions { flex-direction: column !important; align-items: stretch !important; gap: 3px !important; }
  .malkon-nav-actions { padding-top: 11px; border-top: 1px solid var(--shell-line); }
  .malkon-site-nav a,
  .malkon-site-nav button {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding: 12px 15px !important;
    border-radius: 12px !important;
  }
  .malkon-primary-nav a:hover,
  .malkon-primary-nav a[aria-current="page"] { background: #eef5ff !important; }
  .malkon-primary-nav a[aria-current="page"]::after { display: none; }
  .malkon-nav-actions .malkon-profile-link { display: none !important; }
  .mobile-profile-link {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin-left: auto !important;
    padding: 5px !important;
    border: 1px solid var(--shell-line) !important;
    border-radius: 50% !important;
    background: var(--shell-white) !important;
    box-shadow: 0 6px 16px rgba(16, 42, 74, .08) !important;
  }
  .mobile-profile-link > span:last-child { display: none !important; }
  .mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 79 !important;
    border: 0 !important;
    background: rgba(8, 30, 53, .46) !important;
    backdrop-filter: blur(2px) !important;
  }
  .mobile-menu-open .mobile-menu-overlay { display: block !important; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 82px; }
  .malkon-header-frame { min-height: 76px !important; }
  .malkon-header-shell {
    width: calc(100% - 24px) !important;
    min-height: 76px !important;
    padding: 8px 0 !important;
    gap: 8px !important;
  }
  .malkon-header-shell > .malkon-brand {
    width: min(186px, calc(100vw - 142px)) !important;
    min-width: 0 !important;
    height: 56px !important;
  }
  .malkon-header-shell > .malkon-brand img { transform: scale(1.12) !important; }
  .mobile-profile-link,
  .mobile-menu-button { width: 44px !important; height: 44px !important; min-width: 44px !important; flex-basis: 44px !important; }
  .malkon-site-nav { left: 12px !important; right: 12px !important; top: calc(100% + 6px) !important; }
}

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