/* Current food page only: the dated archive keeps its original hero.
   Frame and layered gradients: cosmos.so/brand/maison-kitsune, 2026-10-19. */
html:has(body.flavor-page) { background: #fff; }
body.flavor-page {
  --fc-bg: #fff;
  --fc-header-height: 80px;
  overflow-x: clip; /* Keep the product toolbar sticky against the viewport. */
}

.fc-main--immersive {
  max-width: none;
  /* Reserve the fixed navigation height, measured by the catalog script. */
  padding-top: var(--fc-header-height);
  padding-inline: 0;
}

/* Keep the breadcrumb and catalog aligned with the shared navigation. */
.fc-main--immersive > :is(.fc-breadcrumb, .fc-library) {
  width: 100%;
  max-width: var(--vfr-layout-max);
  margin-inline: auto;
  padding-inline: var(--fc-inset-start) var(--fc-inset-end);
}

@media (max-width: 767px) {
  .fc-main--immersive > .fc-library.fc-wrap { padding-inline: 24px; }
}

.fc-hero--immersive {
  --fc-hero-gradient-base: linear-gradient(180deg, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 48%) 100%), linear-gradient(0deg, rgb(0 0 0 / 30%) 10%, rgb(0 0 0 / 0%) 55%);
  position: relative;
  isolation: isolate;
  width: calc(100% - 16px);
  height: 240px;
  min-height: 0;
  max-height: 400px;
  aspect-ratio: 8 / 6;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  overflow: clip;
  border: 0;
  border-radius: 28px;
  background: #272721;
  /* Temporarily hidden: 0 2px 12px #00000005, 0 4px 16px #0000001a */
  box-shadow: none;
}

.fc-hero--immersive .fc-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
}

.fc-hero--immersive .fc-hero-media img {
  object-fit: cover;
  object-position: 50% 4%;
}

.fc-hero-shade {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  pointer-events: none;
}

/* Cosmos repeats the base pair on mobile, then adds the top/bottom veils. */
.fc-hero-shade--base {
  inset-block: 0;
  visibility: hidden; /* Hide the base gradient while preserving its definition. */
  background: var(--fc-hero-gradient-base), var(--fc-hero-gradient-base);
}

.fc-hero-shade--top {
  top: 0;
  height: 30%;
  visibility: hidden; /* Temporarily hide the top gradient; keep it for restoration. */
  background: linear-gradient(180deg, rgb(0 0 0 / 47%) 0%, rgb(0 0 0 / 0%) 81.185%);
}

.fc-hero-shade--bottom {
  bottom: 0;
  /* Keep the same image shading when crossing the 768px breakpoint. */
  height: 418px;
  background: linear-gradient(0deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 0%) 100%);
}

.fc-hero--immersive .fc-hero-content {
  position: absolute;
  inset: 0;
  height: 212px;
  margin-block: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 60px;
  text-align: center;
}

.fc-hero--immersive .fc-hero-intro { margin: 0; align-items: center; gap: 12px; }
.fc-hero--immersive :is(.fc-hero-title, .fc-hero-dek) { color: #fff; }
.fc-hero--immersive .fc-hero-title {
  margin-top: 0;
  font-size: clamp(2.5rem, 1.75rem + 3vw, 3.5rem);
}
.fc-hero--immersive .fc-hero-dek {
  max-width: 100%;
  font-size: 1rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .fc-hero--immersive .fc-hero-dek { white-space: nowrap; }

  .fc-hero--immersive {
    width: calc(100% - 16px);
    aspect-ratio: auto;
    /* Temporarily hidden: 0 12px 24px #00000026, 0 4px 8px #00000008 */
    box-shadow: none;
  }

  .fc-hero-shade--base { background: var(--fc-hero-gradient-base); }
  .fc-hero-shade--top { height: 172px; }
}

/* Fit the All showcase into the first desktop viewport, with room for hero copy. */
@media (min-width: 1024px) {
  .fc-hero--immersive[data-fc-viewport-hero] {
    height: var(--fc-hero-fit-height, 240px);
    min-height: 180px;
    max-height: none;
  }

  .fc-hero--immersive[data-fc-viewport-hero] .fc-hero-content {
    height: 100%;
    margin-block: 0;
    padding-block: 24px;
  }
}