/* A small, colourful welcome on every customer page. */
.world-storefront .site-header {
  background: #fffdf9f7;
  border-bottom: 0;
  box-shadow: 0 3px 15px #173a5808;
}
.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #ffd1e2 0 20%, #bde8dc 20% 40%, #ffe49e 40% 60%, #d8c6f4 60% 80%, #bfe6fa 80%);
}
.world-storefront .site-header .nav-shell {
  grid-template-columns: 176px minmax(0, 1fr) auto;
  gap: 20px;
  min-height: 92px;
}
.world-storefront .site-header .site-nav { gap: 6px; }
.world-storefront .site-header .site-nav .nav-tile {
  --tile: #e4f3ec;
  --edge: #c5e0d4;
  --accent: #287467;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 66px;
  min-height: 66px;
  padding: 7px 10px;
  background: var(--tile);
  border: 1px solid var(--edge);
  border-radius: 18px;
  color: #173a58;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--edge);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.world-storefront .site-header .site-nav .nav-shop { --tile: #ffe0ed; --edge: #f2b6ce; --accent: #a72058; }
.world-storefront .site-header .site-nav .nav-faq,
.world-storefront .site-header .site-nav .nav-account { --tile: #eee5fb; --edge: #d8c8ee; --accent: #7150a0; }
.world-storefront .site-header .site-nav .nav-gallery,
.world-storefront .site-header .site-nav .nav-feedback { --tile: #fff1c8; --edge: #ebd69e; --accent: #9b6820; }
.world-storefront .site-header .site-nav .nav-contact { --tile: #e0f2fc; --edge: #bedeea; --accent: #337898; }
.world-storefront .site-header .site-nav .nav-about { --tile: #ffe9de; --edge: #eed1c0; --accent: #a15e36; }
.site-header .nav-icon { width: 30px; height: 30px; flex: 0 0 auto; }
.world-storefront .site-header a::after { display: none; }
.world-storefront .site-header .site-nav .nav-tile:hover {
  color: #173a58;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--edge);
}
.world-storefront .site-header .site-nav .nav-tile[aria-current="page"] {
  border-color: var(--accent);
  box-shadow: 0 2px 0 var(--accent), inset 0 0 0 1px var(--accent);
}
.world-storefront .site-header .nav-actions { gap: 10px; }
.world-storefront .site-header .nav-actions .nav-utility {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 5px;
  border-radius: 14px;
  font-size: 12px;
}
.site-header .nav-utility .nav-icon { width: 25px; height: 25px; }
.site-header .nav-utility:hover { background: #eef5f7; }
.world-storefront .site-header .nav-welcome,
.world-storefront .site-header .site-nav .nav-mobile-link,
.world-storefront .site-header .site-nav .nav-mobile-search { display: none; }
.menu-toggle-art {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 3px;
  transform: rotate(-6deg);
}
.menu-toggle-art i { height: 7px; border-radius: 2px; background: #d52f78; }
.menu-toggle-art i:nth-child(2) { background: #4b9b91; }
.menu-toggle-art i:nth-child(3) { background: #e1ac38; }
.menu-toggle-art i:nth-child(4) { background: #8f6abe; }
@media (max-width: 1150px) and (min-width: 961px) {
  .world-storefront .site-header .nav-shell { gap: 14px; }
  .world-storefront .site-header .nav-actions .nav-utility { width: 38px; justify-content: center; }
  .site-header .nav-utility span { display: none; }
}
@media (max-width: 960px) {
  .world-storefront .site-header .nav-shell {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 76px;
    gap: 14px;
  }
  .world-storefront .site-header .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 11px;
    background: #ffedf4;
    border-color: #efc4d4;
    box-shadow: 0 2px 0 #efc4d4;
    color: #853052;
  }
  .world-storefront .site-header .menu-toggle[aria-expanded="true"] { background: #f3e9ff; border-color: #cbb9e5; }
  .world-storefront .site-header .site-nav {
    position: absolute;
    inset: calc(100% + 8px) 16px auto;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
    max-height: var(--menu-room, calc(100dvh - 160px));
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fffdf9;
    border: 1px solid #e6dde8;
    border-radius: 24px;
    box-shadow: 0 12px 32px #173a5826;
  }
  .world-storefront .site-header .site-nav.is-open { display: grid; }
  .world-storefront .site-header .nav-welcome {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 8px;
    padding-bottom: 2px;
    color: #173a58;
    font-size: 16px;
    font-weight: 800;
  }
  .nav-welcome img { width: 30px; height: 30px; }
  .world-storefront .site-header .site-nav .nav-tile {
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    min-width: 0;
    min-height: 62px;
    padding: 10px;
    font-size: 13px;
    border-radius: 16px;
  }
  .world-storefront .site-header .site-nav .nav-mobile-link { display: flex; }
  .world-storefront .site-header .site-nav .nav-mobile-search {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px dashed #b9cfce;
    border-radius: 16px;
    background: #f0f7f4;
    color: #173a58;
    font-size: 13px;
  }
  .nav-mobile-search > span:last-child { margin-left: auto; font-size: 20px; }
  .world-storefront .site-header .nav-actions .nav-utility { display: none; }
}
@media (max-width: 370px) {
  .world-storefront .site-header .nav-shell { gap: 9px; }
  .site-header .brand .brand-logo { width: 134px; }
  .world-storefront .site-header .site-nav { inset-inline: 10px; padding: 12px; gap: 8px; }
  .world-storefront .site-header .site-nav .nav-tile { gap: 6px; padding: 8px; font-size: 12px; }
  .site-header .site-nav .nav-icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-storefront .site-header .site-nav .nav-tile { transition: none; }
  .world-storefront .site-header .site-nav .nav-tile:hover { transform: none; }
}