/* Approved product imagery, 28 Oct 2026. Presentation-only, opt-in overrides.
   Packshot cards and product heroes are contained; story heroes keep their baseline treatment.
   Existing frame sizes, text, card order and unrelated imagery are unchanged. */
html body #main .visual[data-product-fit-20261028] > img,
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028] > img {
  object-fit: contain !important;
  object-position: 50% 50% !important;
  box-sizing: border-box;
}
html body #main .visual[data-product-fit-20261028^="pack-"] {
  background: #fff !important;
  --product-photo-inset: 4%;
}
html body #main .visual[data-product-fit-20261028="pack-dip500"] { --product-photo-inset: 6%; }
html body #main .visual[data-product-fit-20261028="pack-soy5l"] { --product-photo-inset: 1%; }
html body #main .visual[data-product-fit-20261028^="pack-"] > img {
  padding: var(--product-photo-inset) !important;
}
/* The approved masters avoid the flat bars encoded into social/web exports.
   Quiet edge-matched stages retain the whole landscape pack in square frames. */
html body #main [data-product-fit-20261028="pho01"] {
  background: linear-gradient(#f9eddc, #f1e2cf 58%, #e6d4c2) !important;
}
html body #main .visual[data-product-fit-20261028="pho01"] > img { padding: 3% !important; }
html body #main [data-product-fit-20261028="pho04"],
html body #main [data-product-fit-20261028="pho08"] { background: #f5ecdc !important; }
html body #main [data-product-fit-20261028="pho09"] { background: #103624 !important; }
/* Product-hero stages share the source's quiet background. Removing the
   image-only fade prevents caps/labels/bases disappearing on small screens.
   The copy stays on its original cream stage, outside the product pixels. */
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028^="pack-"] { background: #fff !important; }
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028] > img { padding: 12px !important; }
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028]::after { content: none !important; }
/* C01's approved landscape scene keeps the entire packet at its upper edge;
   center-cropping otherwise removes the Loving logo in the desktop story hero. */
html body #main .lv-hero:not(.lv-hero--sp) .lv-hero__anh[data-product-fit-20261028="pho04"] > img {
  object-position: 50% 0%;
}
/* Keep the original one-column card width, but center it rather than leaving
   two empty columns to its right. Narrow screens retain their existing width. */
html body #main .grid.three[data-single-product-20261028="true"] {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, 370px);
  margin-inline: auto;
}
@media (max-width: 860px) {
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028]::after { content: none !important; }
}

/* Desktop dropdown labels wrap inside their existing 240px panels.
   Keep the main navigation on one line without clipping long submenu labels. */
@media (min-width: 1024px) {
  .header .nav .nav-about-disclosure > div > a {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* Full-hero audit bundle: preserve source content and existing stage dimensions. */
html body #main .lv-hero:not(.lv-hero--sp) .lv-hero__anh[data-product-fit-20261028="pack-soy250"],
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028^="pack-"] {
  background: #fff !important;
}
html body #main .lv-hero:not(.lv-hero--sp) .lv-hero__anh[data-product-fit-20261028="pack-soy250"] > img,
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028^="pack-"] > img {
  box-sizing: border-box;
  object-fit: contain !important;
}
@media (min-width: 861px) {
  html body #main .lv-hero:not(.lv-hero--sp) .lv-hero__anh[data-product-fit-20261028="pack-soy250"] > img,
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028^="pack-"] > img {
    object-position: 100% 50% !important;
  }
  /* C05's existing58% story gradient is intentionally left unchanged. */
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028^="pack-"]::after {
    content: "" !important;
    inset: 0;
    height: auto;
    background: linear-gradient(90deg, var(--cream) 0%, rgba(247,243,231,0) 30%) !important;
    pointer-events: none;
  }
}
@media (max-width: 860px) {
  html body #main .lv-hero:not(.lv-hero--sp) .lv-hero__anh[data-product-fit-20261028="pack-soy250"] {
    --pack-safe-fade: 12px;
  }
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028^="pack-"] {
    --pack-safe-fade: 16px;
  }
  html body #main .lv-hero:not(.lv-hero--sp) .lv-hero__anh[data-product-fit-20261028="pack-soy250"] > img {
    padding: 0 0 12px !important;
    object-position: 50% 50% !important;
  }
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028^="pack-"] > img {
    padding: 12px 12px 16px !important;
    object-position: 50% 50% !important;
  }
  html body #main .lv-hero:not(.lv-hero--sp) .lv-hero__anh[data-product-fit-20261028="pack-soy250"]::after,
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028^="pack-"]::after {
    content: "" !important;
    inset: auto 0 0;
    height: var(--pack-safe-fade);
    background: linear-gradient(180deg, rgba(247,243,231,0), var(--cream)) !important;
    pointer-events: none;
  }
}

/* Story packaging uses full approved source canvases in existing hero boxes.
   Only the named hero wrappers opt in; cards, copy and entry effects are unchanged. */
html body #main .lv-hero__anh[data-hero-safe-20261028="coffee-story"] > img,
html body #main .lv-hero__anh[data-hero-safe-20261028="seasoning-story"] > img {
  object-fit: contain !important;
  object-position: 100% 50% !important;
  box-sizing: border-box;
}
html body #main .lv-hero__anh[data-hero-safe-20261028="seasoning-story"] {
  background: #f7f3e7;
}
html body #main .lv-hero__anh[data-hero-safe-20261028="dip-story"] > img,
html body #main .lv-hero__anh[data-hero-safe-20261028="founder"] > img {
  object-position: 50% 0%;
}
@media (max-width: 860px) {
  html body #main .lv-hero__anh[data-hero-safe-20261028="coffee-story"] > img,
  html body #main .lv-hero__anh[data-hero-safe-20261028="seasoning-story"] > img {
    object-position: 50% 50% !important;
    padding: 0 0 12px;
  }
  html body #main .lv-hero__anh[data-hero-safe-20261028="coffee-story"]::after,
  html body #main .lv-hero__anh[data-hero-safe-20261028="seasoning-story"]::after {
    content: "" !important;
    inset: auto 0 0;
    height: 12px;
    background: linear-gradient(180deg, rgba(247,243,231,0), var(--cream)) !important;
    pointer-events: none;
  }
}
/* The landscape Phở packet starts near its left source edge: fade ONLY an
   explicitly reserved empty gutter, never the shared 30% portrait gradient. */
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028="pho01"] > img {
  padding: 0 !important;
}
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028="pho01"]::after {
  content: "" !important;
  inset: 0 auto 0 0;
  width: 24px;
  height: auto;
  background: linear-gradient(90deg, var(--cream), rgba(247,243,231,0)) !important;
  pointer-events: none;
}
@media (max-width: 860px) {
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028="pho01"] > img {
    padding: 0 0 16px !important;
    object-fit: cover !important;
    object-position: 20% 50% !important;
  }
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028="pho01"]::after {
    inset: auto 0 0;
    width: auto;
    height: 16px;
    background: linear-gradient(180deg, rgba(247,243,231,0), var(--cream)) !important;
  }
}

/* The two additional SKU hero sources keep their natural photo proportions.
   Feather only source-background margins; the coffee sachets need a 4px edge,
   whereas the seasoning pack has ample source margin for a 24px soft edge. */
html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="coffee-sku"],
html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="seasoning-sku"] {
  background: #f7f3e7;
  --hero-photo-feather: 24px;
}
html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="coffee-sku"] { --hero-photo-feather: 4px; }
html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="coffee-sku"] > img,
html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="seasoning-sku"] > img {
  width: auto;
  max-width: 100%;
  height: 100%;
  margin-left: auto;
  padding: 0;
  object-fit: contain;
  object-position: 100% 50%;
  mask-image: linear-gradient(90deg, transparent, #000 var(--hero-photo-feather), #000 calc(100% - var(--hero-photo-feather)), transparent);
}
html body #main .lv-hero__anh[data-hero-safe-20261028="awaiting-5kg"] > img { display: none !important; }
/* The catalogue-only continuation exists on Phở/coffee detail pages only.
   Align it to the existing reading inset and remove doubled section spacing. */
html body.product-reading-r61 #main > .section[data-catalogue-cta-20261028="true"] { padding: 16px 0 24px; }
html body.product-reading-r61 #main > .section[data-catalogue-cta-20261028="true"] > .wrap > p { margin: 0; padding-inline: 6%; }
html body.product-reading-r61 #main > .section.r46-primary-host:has(+ .section[data-catalogue-cta-20261028="true"]) { padding-bottom: 0; }
@media (max-width: 860px) {
  html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="coffee-sku"] > img,
  html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="seasoning-sku"] > img {
    height: calc(100% - 16px);
    margin-inline: auto;
    object-position: 50% 50%;
  }
  html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="coffee-sku"]::after,
  html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="seasoning-sku"]::after {
    content: "";
    inset: auto 0 0;
    height: 16px;
    background: linear-gradient(180deg, rgba(247,243,231,0), var(--cream));
    pointer-events: none;
  }
}

/* Mobile brand-family scene: retain the far-right bottle during the existing
   1.04 entry zoom; only these four shared-source heroes opt in. */
@media (max-width: 860px) {
  html body #main .lv-hero .lv-hero__anh > img[src="/assets/r57/b03-landscape.jpg"] {
    object-position: 100% 50%;
  }
}

@media (min-width: 861px) {
  html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="coffee-sku"]::after,
  html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="seasoning-sku"]::after {
    inset: 0 auto 0 0;
    width: 24px;
    height: auto;
    background: linear-gradient(90deg, var(--cream), rgba(247,243,231,0));
  }
}

/* Preview corrections: feather the actual contained-photo edge, not a distant
   wrapper edge. The narrow coffee feather stays outside the nearest sachet. */
@media (min-width: 861px) {
  html body #main .lv-hero__anh[data-hero-safe-20261028="coffee-story"] > img,
  html body #main .lv-hero__anh[data-hero-safe-20261028="seasoning-story"] > img {
    width: auto;
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    padding: 0;
    mask-image: linear-gradient(90deg, transparent, #000 24px);
  }
  html body #main .lv-hero__anh[data-hero-safe-20261028="coffee-story"] > img {
    mask-image: linear-gradient(90deg, transparent, #000 8px);
  }
  html body #main .lv-hero--sp .lv-hero__anh[data-hero-safe-20261028="coffee-sku"] { --hero-photo-feather: 8px; }
  html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028="pho01"] > img {
    padding: 0 0 0 12px !important;
  }
}
/* C04's full bottle is taller than the wide cover crop. Contain the scene on
   desktop and finish the copy-side fade before the bottle, not across its label. */
html body #main .lv-hero__anh[data-hero-safe-20261028="dip-story"] > img {
  object-fit: contain;
  object-position: 100% 50%;
  box-sizing: border-box;
}
html body #main .lv-hero__anh[data-hero-safe-20261028="dip-story"]::after {
  background: linear-gradient(90deg, var(--cream), rgba(247,243,231,0) 40%);
}
@media (max-width: 860px) {
  html body #main .lv-hero__anh[data-hero-safe-20261028="dip-story"] > img {
    object-fit: cover;
    object-position: 50% 0%;
    padding: 4px 0 12px;
  }
  html body #main .lv-hero__anh[data-hero-safe-20261028="dip-story"]::after {
    inset: auto 0 0;
    height: 12px;
    background: linear-gradient(180deg, rgba(247,243,231,0), var(--cream));
  }
}

/* The approved dip500 source has a subtly cool light-gray photographic canvas.
   Match that measured edge tone on its hero stage without repainting the image. */
html body #main .lv-hero--sp .lv-hero__anh[data-product-fit-20261028="pack-dip500"] {
  background: linear-gradient(#f8f9fb, #f4f4f7 50%, #f8f9fb) !important;
}

/* C04 recovery retains baseline copy-side opacity through 34%, then clears
   before the bottle. Feather its actual empty source edge, not the wrapper. */
@media (min-width: 861px) {
  html body #main .lv-hero__anh[data-hero-safe-20261028="dip-story"] > img {
    width: auto;
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    mask-image: linear-gradient(90deg, transparent, #000 24px);
  }
  html body #main .lv-hero__anh[data-hero-safe-20261028="dip-story"]::after {
    background: linear-gradient(90deg, var(--cream) 0%, rgba(247,243,231,.92) 14%, rgba(247,243,231,.55) 34%, rgba(247,243,231,0) 40%);
  }
}