/* R46. Authoritative HOME composition, not the superseded split pilots.
   Only independently source-fit-checked routes opt in. The whole composition
   stops growing at1920x624; no photo-only enlargement behind fixed tiny copy.
   HOME itself does not load this file. The existing HOME medallion sources are reused unchanged. */
html body.hero-template-r46 #main {
  container-type: inline-size;
  background: #f7f3e7;
}
html body.hero-template-r46 #main .r46-primary-host {
  background: transparent;
  overflow: visible;
}
html body.hero-template-r46 #main .r46-hero.r46-hero {
  --r46-focus: 100% 50%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: min(100cqw, 1920px);
  max-width: 1920px;
  min-height: clamp(520px, 32.5cqw, 624px);
  height: auto;
  margin: 0 calc(50% - min(50cqw, 960px));
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  overflow: hidden;
  background: #f7f3e7;
  color: #194832;
}
html body.hero-template-r46 #main .r46-hero.r46-hero::before,
html body.hero-template-r46 #main .r46-hero.r46-hero::after {
  content: none;
}
html body.hero-template-r46 #main .r46-hero[data-r46-primary-hero="/bai/j02"] { --r46-focus: 100% 90%; }
html body.hero-template-r46 #main .r46-hero[data-r46-primary-hero="/bai/k01"] { --r46-focus: 100% 75%; }
html body.hero-template-r46 #main .r46-hero[data-r46-primary-hero="/ve-loving"] { --r46-focus: 100% 45%; }
html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-media.r46-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  align-self: stretch;
  background: transparent;
  overflow: hidden;
  z-index: -1;
}
html body.hero-template-r46 #main .r46-hero.r46-hero .r46-photo-frame.r46-photo-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: transparent;
}
html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-media.r46-media img {
  position: absolute !important;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: cover !important;
  object-position: var(--r46-focus) !important;
}
html body.hero-template-r46 #main .r46-hero.r46-hero .r46-photo-frame::before,
html body.hero-template-r46 #main .r46-hero.r46-hero .r46-photo-frame::after,
html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-media::before {
  content: none;
}
html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent, #f7f3e7);
  pointer-events: none;
  z-index: 1;
}
html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-copy.r46-copy {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  width: 51%;
  min-width: 0;
  max-width: 800px;
  margin: 0;
  padding: 36px clamp(30px, 5vw, 86px);
  padding-right: clamp(42px, 6vw, 104px);
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(247,243,231,.98) 0%, rgba(247,243,231,.96) 66%, rgba(247,243,231,.84) 84%, rgba(247,243,231,0) 100%);
  color: #194832;
  z-index: 1;
}
html body.hero-template-r46 #main .r46-copy.r46-copy h1 {
  max-width: 510px;
  margin: 0 0 12px;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  text-wrap: wrap;
  overflow-wrap: normal;
  word-break: normal;
  color: #194832;
}
html body.hero-template-r46 #main .r46-copy.r46-copy p {
  max-width: 510px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0;
  color: #194832;
}
html body.hero-template-r46 #main .r46-copy.r46-copy > .eyebrow,
html body.hero-template-r46 #main .r46-copy.r46-copy > .tag,
html body.hero-template-r46 #main .r46-copy.r46-copy > .meta {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #194832;
}
html body.hero-template-r46 #main .r46-copy.r46-copy > .button {
  align-self: flex-start;
  width: auto;
  min-height: 0;
  margin: 20px 0 0;
  padding: 11px 20px;
}
html body.hero-template-r46 #main .r46-hero.r46-hero > .hero-controls {
  position: absolute;
  inset: auto 28px 28px auto;
  display: flex;
  width: auto;
  margin: 0;
  padding: 0;
  gap: 12px;
  align-items: center;
  z-index: 2;
}
html body.hero-template-r46 #main .r46-reading-intro {
  width: 100%;
  max-width: 960px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 30px 0 36px;
}
html body.hero-template-r46 #main .r46-reading-intro > .r42-intro,
html body.hero-template-r46 #main .r46-reading-intro > .r41-intro {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
html body.hero-template-r46 #main .r46-reading-intro p { margin: 0 0 16px; }
/* Demote, never hide or delete, the redundant original generic brand banner. */
html body.hero-template-r46 #main .r46-support-host {
  width: 100%;
  max-width: 1180px;
  box-sizing: border-box;
  margin: 32px auto;
  padding: 0 48px;
  background: transparent;
}
html body.hero-template-r46 #main .r46-support.r46-support {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 28%) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 24px 0;
  gap: 28px;
  border: 0;
  border-top: 1px solid #d8dece;
  border-bottom: 1px solid #d8dece;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
html body.hero-template-r46 #main .r46-support.r46-support::after { content: none; }
html body.hero-template-r46 #main .r46-support.r46-support > .r46-support-media,
html body.hero-template-r46 #main .r46-support.r46-support > .r46-support-media > .r38-image-frame.r38-image-frame {
  position: relative;
  inset: auto;
  grid-area: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  background: transparent;
}
html body.hero-template-r46 #main .r46-support.r46-support img {
  position: static !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none;
  object-fit: contain !important;
}
html body.hero-template-r46 #main .r46-support.r46-support > .r46-support-copy {
  position: static;
  grid-area: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}
html body.hero-template-r46 #main .r46-support-copy h2 { margin: 8px 0 0; font-size: 24px !important; }
html body.hero-template-r46 #main .r46-source-hold.r46-source-hold {
  min-height: 0;
  padding: 28px 6%;
}
html body.hero-template-r46 #main .r46-source-hold.r46-source-hold > .r46-copy {
  width: 100%;
  max-width: 960px;
  margin: auto;
  padding: 0;
  background: transparent;
}
@media (max-width: 1150px) {
  /* HOME's approved narrow-screen fallback keeps copy away from the subject. */
  html body.hero-template-r46 #main .r46-hero.r46-hero { min-height: 0; }
  html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-media.r46-media {
    position: relative;
    inset: auto;
    grid-row: 1;
    height: auto;
    aspect-ratio: 16 / 7;
    z-index: 0;
  }
  html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-copy.r46-copy {
    grid-area: 2 / 1;
    width: 100%;
    max-width: none;
    padding: 16px 6% 24px;
    background: #f7f3e7;
  }
  html body.hero-template-r46 #main .r46-copy.r46-copy h1,
  html body.hero-template-r46 #main .r46-copy.r46-copy p { max-width: 700px; }
  html body.hero-template-r46 #main .r46-hero.r46-hero > .hero-controls {
    position: static;
    grid-area: 3 / 1;
    justify-content: flex-end;
    padding: 0 6% 24px;
    background: #f7f3e7;
  }
}
@media (max-width: 600px) {
  html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-media.r46-media { aspect-ratio: 16 / 9; }
  html body.hero-template-r46 #main .r46-support-host { padding-inline: 6%; }
  html body.hero-template-r46 #main .r46-support.r46-support { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html body.hero-template-r46 #main .r46-support.r46-support > .r46-support-media { max-width: 320px; }
}

/* Exact approved HOME value row, including the original48px sprite crops. */
html body.hero-template-r46 #main .r46-copy.r46-copy .hero-values { display: flex; align-items: stretch; gap: 12px; max-width: none; margin-top: 24px; }
html body.hero-template-r46 #main .r46-copy.r46-copy .hero-values > div { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
html body.hero-template-r46 #main .r46-copy.r46-copy .hero-values .hero-medallion { display: block; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background-repeat: no-repeat; }
html body.hero-template-r46 #main .r46-copy.r46-copy .hero-value-plant { background-image: url('/assets/r23-optimized/r12/hero-value-plant.png.webp'); background-size: 53.74285714px 53.74285714px; background-position: -3px -3px; }
html body.hero-template-r46 #main .r46-copy.r46-copy .hero-value-flavor { background-image: url('/assets/r23-optimized/r12/hero-value-flavor.png.webp'); background-size: 62.7px 62.7px; background-position: -6.25px 0; }
html body.hero-template-r46 #main .r46-copy.r46-copy .hero-value-sustainable { background-image: url('/assets/r23-optimized/r12/hero-value-sustainable.png.webp'); background-size: 70.81411765px 70.81411765px; background-position: -9.88235294px 0; }
html body.hero-template-r46 #main .r46-copy.r46-copy .hero-values span { max-width: none; font-family: Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: normal !important; overflow-wrap: normal; word-break: normal; }
@media (max-width:600px) { html body.hero-template-r46 #main .r46-copy.r46-copy .hero-values { gap: 10px; margin-top: 18px; } }

@media (max-width: 1150px) {
  /* Scale the same soft bottom effect on narrow photos so it does not wash
     away the principal dish; the exact desktop fade remains32px. */
  html body.hero-template-r46 #main .r46-hero.r46-hero > .r46-media::after { height: min(32px, 3cqw); }
}