/* Customer-only glass header. The scrolling page remains visible underneath. */
html[data-customer-view] .header {
  background:
    radial-gradient(circle at 88% -45%, rgba(255, 170, 108, .025), transparent 42%),
    linear-gradient(108deg, rgba(21, 82, 207, .055) 0%, rgba(52, 104, 233, .035) 47%, rgba(112, 65, 215, .055) 100%) !important;
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  position: sticky;
  top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 4px 14px rgba(32, 69, 164, .08);
  color: #fff;
}

/* An opaque fallback preserves readability on browsers without glass support. */
html[data-customer-view] .back-categories-button {
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(104,135,244,.18)) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  box-shadow: 0 5px 18px rgba(31,61,130,.18), inset 0 1px 0 rgba(255,255,255,.65) !important;
  color: #1746b3 !important;
}

html[data-customer-view] .back-categories-button .category-direction {
  color: #1746b3;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-customer-view] .header {
    background: linear-gradient(108deg, #1552cf, #7041d7) !important;
  }
  html[data-customer-view] .back-categories-button { background: #edf3ff !important; }
}

html[data-customer-view] .header-top {
  background: transparent !important;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-customer-view] .header-top .customer-animated-logo {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(14, 38, 105, .19), inset 0 1px 0 #fff;
}

html[data-customer-view] .header-search-toggle,
html[data-customer-view] .profile-header-button,
html[data-customer-view] .header-top .language-switcher select {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(255, 255, 255, .85);
  color: #1844ae;
  box-shadow: 0 5px 16px rgba(14, 38, 105, .17);
}

html[data-customer-view] .header-search-toggle:hover,
html[data-customer-view] .header-search-toggle[aria-expanded="true"],
html[data-customer-view] .profile-header-button:hover {
  background: #fff;
  color: #143a9b;
  box-shadow: 0 8px 20px rgba(14, 38, 105, .24);
}

html[data-customer-view] .header :is(a, button, select):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* The navigation has no visible customer actions; keep it from adding a second row. */
html[data-customer-view] .header .navigation { display: none !important; }

/* Header hearts keep their warm tint even before the first interaction. */
html[data-customer-view] .header :is(.product-favorites-filter,.restaurant-favorites-filter){
  background:rgba(255,240,235,.88)!important;
  border-color:#ffb39d!important;
  color:#e74d3c!important;
}
html[data-customer-view] .header :is(.product-favorites-filter,.restaurant-favorites-filter) svg{
  fill:none;
  transform-box:fill-box;
  transform-origin:center;
  animation:mowo-header-heartbeat 2.4s ease-in-out infinite;
}
html[data-customer-view] .header :is(.product-favorites-filter,.restaurant-favorites-filter).is-active{
  background:linear-gradient(135deg,#ff6b62,#e9366e)!important;
  border-color:#e9366e!important;
  color:#fff!important;
}
html[data-customer-view] .header :is(.product-favorites-filter,.restaurant-favorites-filter).is-active svg{
  fill:currentColor;
}
@keyframes mowo-header-heartbeat{
  0%,32%,100%{transform:scale(1)}
  10%{transform:scale(1.16)}
  18%{transform:scale(1)}
  25%{transform:scale(1.1)}
}
@media(prefers-reduced-motion:reduce){
  html[data-customer-view] .header :is(.product-favorites-filter,.restaurant-favorites-filter) svg{
    animation:none;
    transform:none;
  }
}

@media (max-width: 600px) {
  html[data-customer-view] .header-top .customer-animated-logo {
    flex-basis: 104px;
    width: 104px;
  }
}

@media (max-width: 680px) {
  html[data-customer-view] .header {
    padding-top: calc(5px + env(safe-area-inset-top, 0px));
    padding-bottom: 5px;
  }

  html[data-customer-view] .header-top { min-height: 40px; }
}