.hero-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  pointer-events: none;
}

.hero-with-cover {
  background: var(--tenant-primary);
}

.hero-light:not(.hero-with-cover) {
  background: #fff;
  color: var(--tenant-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--tenant-secondary) 28%, #fff);
}

.hero-light:not(.hero-with-cover) .brand-lockup,
.hero-light:not(.hero-with-cover) .brand-lockup:hover {
  color: var(--tenant-primary);
}

.hero-light:not(.hero-with-cover) .menu-top {
  border-color: color-mix(in srgb, var(--tenant-secondary) 35%, #fff);
  background: color-mix(in srgb, var(--tenant-secondary) 8%, #fff);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tenant-secondary) 12%, transparent);
}

.hero-light:not(.hero-with-cover) .menu-top .brand {
  background: color-mix(in srgb, var(--tenant-secondary) 18%, #fff);
  box-shadow: none;
}

.hero-light:not(.hero-with-cover) .hero-content {
  background: color-mix(in srgb, var(--tenant-secondary) 7%, #fff);
  border-color: color-mix(in srgb, var(--tenant-secondary) 24%, #fff);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--tenant-secondary) 12%, transparent);
}

.hero-light:not(.hero-with-cover) .eyebrow,
.hero-light:not(.hero-with-cover) .hero-content .eyebrow {
  color: var(--tenant-primary);
}

.hero-light:not(.hero-with-cover) .menu-subtitle,
.hero-light:not(.hero-with-cover) .store-status {
  color: color-mix(in srgb, var(--tenant-primary) 82%, #000);
}

.hero-light:not(.hero-with-cover) .store-status {
  border-color: color-mix(in srgb, var(--tenant-secondary) 38%, #fff);
  background: color-mix(in srgb, var(--tenant-secondary) 10%, #fff);
}

.hero-light:not(.hero-with-cover) .cart-top-link {
  border-color: color-mix(in srgb, var(--tenant-primary) 38%, #fff);
  color: var(--tenant-primary);
  box-shadow: none;
}