/* Loaded only by the working food-flavor page; the dated archive stays intact. */
.fc-mobile-hero-media,
.fc-mobile-tab-indicator,
.fc-showcase-heading,
.fc-natural-card-grid--featured { display: none; }

.fc-grid-item { background-color: hsl(0 0% 97% / 1); }
.fc-product-tabs-inner {
  height: 40px;
  font-family: var(--vf-font-sans);
  font-size: 14px;
}
.fc-product-tabs-inner .fc-product-tablist { font-family: inherit; }
.fc-product-tabs .fc-product-tab {
  height: 36px;
  padding: 0 16px;
}

/* Match the supplied UI's shadow-medium without its utility framework. */
.fc-news-card-frame {
  width: 100%;
  aspect-ratio: 2 / 1;
  border: 0;
  box-shadow: 0 2px 12px 0 #00000005, 0 4px 16px 0 #0000001a;
}

/* Center the existing 5:4 media inside the wider 2:1 showcase frame. */
.fc-news-card-frame > .fc-news-card-media {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.fc-news-card-details { margin-top: 12px; row-gap: 0px; }
.fc-news-card-meta,
.fc-group-meta { font-variant-numeric: normal; }
.fc-news-card-description {
  display: flex;
  align-items: center;
  min-height: 22px;
  color: #9a9796;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.fc-news-card-category {
  display: inline-flex;
  flex-shrink: 0;
  max-width: 100%;
  align-items: center;
  gap: 2px;
  vertical-align: baseline;
}
.fc-news-card-category-name {
  min-width: 0;
  white-space: nowrap;
}
.fc-news-card-category-badge {
  display: block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.fc-news-card-description-dot { flex-shrink: 0; }
.fc-news-card-description-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-natural-showcase .fc-news-card-title { font-weight: 600; }

/* Keep the media, catalog thumbnails, and detail panels at 5:4. */
.fc-news-card-media,
.fc-card-image,
.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-hero {
  aspect-ratio: 5 / 4;
  height: auto;
}

#fc-category-natural,
#fc-category-synthetic,
#fc-category-halal,
#fc-category-seasoning {
  margin-bottom: 48px;
}

/* The working page uses the same flavor-row text color at every viewport size. */
.fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-row {
  color: var(--fc-panel-ink);
}
.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-heading h2 {
  font-size: 26px;
}
.fc-dialog[data-fc-dialog-layout="editorial"] .fc-list-heading {
  gap: 8px;
}

/* Center a quiet hairline in the showcase's existing 60px gap at every viewport. */
.fc-showcase-divider {
  position: relative;
  height: 0;
  pointer-events: none;
}
.fc-showcase-divider::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(26 30 35 / 8%) 20%, rgb(26 30 35 / 14%) 50%, rgb(26 30 35 / 8%) 80%, transparent);
}

/* Category dividers follow the full bottom margin, then leave room for the next heading. */
.fc-group + .fc-showcase-divider {
  height: 1px;
  margin-bottom: 24px;
}
.fc-group + .fc-showcase-divider::before {
  top: 0;
  bottom: auto;
}

@media (max-width: 767px) {
  /* Main flavors → divider after the full 60px bottom margin → natural flavors. */
  .fc-natural-showcase--featured + #fc-featured-showcase-divider {
    height: 1px;
    margin-bottom: 24px;
    background: linear-gradient(90deg, transparent, rgb(26 30 35 / 8%) 20%, rgb(26 30 35 / 14%) 50%, rgb(26 30 35 / 8%) 80%, transparent);
  }
  .fc-natural-showcase--featured + #fc-featured-showcase-divider::before { display: none; }

  .fc-natural-showcase--featured > .fc-natural-card-grid--categories { display: none; }
  .fc-natural-card-grid.fc-natural-card-grid--featured { display: grid; }
  .fc-showcase-heading {
    display: block;
    margin: 0 4px 12px;
    color: var(--fc-heading);
    font-family: var(--vf-font-sans);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.02em;
  }
  .fc-natural-showcase button.fc-news-card {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
  }
  .fc-natural-card-grid--featured :is(.fc-news-card-frame, .fc-news-card-media) { display: block; }

  /* Reserve room for the floating search, including the device's home indicator. */
  body.flavor-page { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

  .fc-product-tabs > .fc-search-form--cosmos {
    position: fixed;
    inset-inline: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    isolation: isolate;
    width: auto;
  }
  /* Decorative layers sit outside the original search surface and pass through taps. */
  .fc-product-tabs > .fc-search-form--cosmos::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset-inline: -16px;
    top: -40px;
    bottom: calc(-24px - env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 88%) 48%, #fff 100%);
    pointer-events: none;
  }
  .fc-product-tabs > .fc-search-form--cosmos::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    pointer-events: none;
  }

  .fc-main--immersive > .fc-library.fc-wrap { padding-inline: 16px; }
  .fc-catalog-content { padding-top: var(--space-2); }
  .fc-contact { margin-top: 0px; }
  .fc-group-heading h2 { font-size: 20px; }
  .fc-grid-item, .fc-card { height: 64px; }
  .fc-card {
    /* Fit a 5:4 thumbnail within the 52px content height of the 64px row. */
    --fc-card-image-width: 65px;
    padding: 6px;
  }
  .fc-card-title { font-size: 13px; }
  .fc-card-count {
    color: #3c67bc;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: normal;
  }
  .fc-news-card-frame { border-radius: 12px; }
  .fc-news-card-description { grid-column: 1 / -1; }
  .fc-natural-showcase .fc-news-card-title { font-size: 16px; }
  .fc-natural-card-grid {
    gap: 12px;
    grid-auto-columns: min(360px, calc(100% - 76px));
    /* Leave paint room above the swipe viewport without moving the cards. */
    margin-top: -20px;
    padding-top: 20px;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  /* Keep the native dialog backdrop reachable for touch dismissal. */
  body.flavor-page > .fc-dialog {
    width: calc(100% - 48px);
  }
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-content {
    padding: 20px var(--fc-panel-inset) max(80px, env(safe-area-inset-bottom));
  }
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-heading {
    margin: 0 0 24px;
  }
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-heading h2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-heading h2.fc-panel-title--stacked {
    gap: 4px;
  }
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-title-ko,
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-title-en {
    display: block;
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-name,
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-name-en {
    font-size: 14px;
  }
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-list-heading,
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-list-heading span,
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-list-heading #fc-panel-count {
    font-size: 13px;
  }
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-row {
    gap: 12px;
    min-height: 40px;
    padding: 0;
    border-bottom: 1px solid rgb(0 0 0 / 5%);
  }

  .fc-hero--immersive {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    /* The inner media keeps its 16:9 ratio inside the page gutters. */
    aspect-ratio: auto;
    padding-inline: 16px;
    overflow: hidden;
    border: 0 solid hsl(222 19% 86%);
    border-radius: 16px;
    background: transparent;
  }

  .fc-hero--immersive > :is(.fc-hero-media, .fc-hero-shade, .fc-hero-content) {
    display: none;
  }

  .fc-mobile-hero-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    overflow-anchor: none;
    border: 0 solid hsl(222 19% 86%);
    border-radius: 16px;
    background: hsl(40 18% 97%);
  }

  .fc-mobile-hero-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-out;
  }
  .fc-mobile-hero-layer[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
  }
  .fc-mobile-hero-layer :is(video, img) {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }
  .fc-mobile-hero-layer video {
    object-fit: contain;
    filter: contrast(.95);
  }
  .fc-mobile-hero-layer img { object-fit: cover; }

  .fc-mobile-hero-shade {
    position: absolute;
    inset: 0;
    /* Preserve the footage's highlights; add more shade behind the centered copy. */
    background: linear-gradient(180deg,
      rgb(0 0 0 / 38%) 0%,
      rgb(0 0 0 / 50%) 30%,
      rgb(0 0 0 / 58%) 65%,
      rgb(0 0 0 / 40%) 100%);
    opacity: 1;
    pointer-events: none;
  }
  .fc-mobile-hero-copy {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: flex;
    flex: none;
    flex-flow: column;
    place-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    height: min-content;
    padding: 0 15px;
    overflow: visible;
    transform: translate(-50%, -50%);
    opacity: 1;
    font-family: var(--vf-font-sans);
    text-align: center;
    pointer-events: none;
  }
  .fc-mobile-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .fc-mobile-hero-title {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;
  }
  .fc-mobile-hero-description {
    max-width: 100%;
    margin: 0;
    color: rgb(255 255 255 / 70%);
    font-size: 14px;
    font-weight: var(--fc-regular-weight, 400);
    line-height: 1.5;
    letter-spacing: 0;
    word-break: keep-all;
    text-wrap: balance;
  }

  /* The video remains pausable by touch and keyboard without permanent chrome. */
  .fc-mobile-hero-media .fc-mobile-video-toggle {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: end;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }
  .fc-mobile-video-toggle svg {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    background: rgb(0 0 0 / 45%);
    opacity: 0;
    transition: opacity 200ms ease-out;
  }
  .fc-mobile-video-toggle[data-paused="true"] svg { opacity: 1; }
  .fc-mobile-video-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  .fc-product-tabs {
    margin-block: 12px;
    padding-block: 12px;
    padding-inline: 16px;
  }
  /* Match the normal gap so the sticky backdrop cannot cover the hero's bottom. */
  .fc-product-tabs:not(.is-stuck)::before { height: 12px; }
  .fc-product-tabs-inner {
    display: flex;
    height: 36px;
    min-width: 0;
    justify-content: flex-start;
  }
  .fc-product-tabs-scroll {
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding-block: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .fc-product-tablist {
    width: 100%;
    height: 100%;
    gap: 0;
    font-size: inherit;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: normal;
  }
  .fc-product-tabs .fc-product-tab {
    z-index: 1;
    isolation: auto;
    flex: 1 0 auto;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: hsl(15 2% 56% / 1);
    font-size: inherit;
    font-weight: 600;
    line-height: 18px;
    filter: none;
    transition: color 200ms cubic-bezier(.4, 0, .2, 1),
      background-color 200ms cubic-bezier(.4, 0, .2, 1),
      border-color 200ms cubic-bezier(.4, 0, .2, 1);
  }
  .fc-product-tabs .fc-product-tab::before { display: none; }
  .fc-product-tabs .fc-product-tab[aria-selected="false"]:hover {
    background: transparent;
    color: hsl(0 0% 4%);
  }
  .fc-product-tabs .fc-product-tab[aria-selected="true"] {
    background: hsl(0 0% 4%);
    color: #fff;
  }
  .fc-product-tabs .fc-product-tab[aria-selected="true"]:hover { filter: none; }
  .fc-product-tabs .fc-product-tab:focus-visible {
    box-shadow: inset 0 0 0 2px hsl(0 0% 4% / .3);
  }
  .fc-product-tabs .fc-product-tab[aria-selected="true"]:focus-visible {
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 70%);
  }
  /* Let the moving pill pass above tab surfaces while labels remain on top. */
  .fc-product-tablist[data-mobile-pill-ready] .fc-product-tab { z-index: auto; }
  .fc-product-tablist[data-mobile-pill-ready] .fc-product-tab[aria-selected="true"] { background: transparent; }
  .fc-product-tab-label { z-index: 1; }
  .fc-product-tabs .fc-product-tab:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inherit;
    pointer-events: none;
  }
  .fc-mobile-tab-indicator {
    position: absolute;
    inset-block: 0;
    left: 0;
    z-index: 0;
    display: block;
    border-radius: 9999px;
    background: hsl(0 0% 4%);
    pointer-events: none;
  }
  .fc-product-tablist[data-mobile-pill-ready] .fc-mobile-tab-indicator {
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1),
      width 300ms cubic-bezier(.22, 1, .36, 1);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .fc-mobile-hero-layer,
  .fc-product-tabs .fc-product-tab,
  .fc-product-tablist[data-mobile-pill-ready] .fc-mobile-tab-indicator,
  .fc-mobile-video-toggle svg { transition: none; }
}