/**
 * Product page — museum / Apple-launch editorial (presentation only).
 * Scoped to body.page-product so HOME and STORY are untouched.
 * No CMS / block / field changes.
 *
 * @package Flamingo_Liqueur
 */

/**
 * Consolidated product-page.css.
 *
 * Successive redesign passes re-declared the same selectors on top of each
 * other. Every declaration that a later one at the same selector already
 * overwrote has been removed; the survivors keep their original order, so
 * the rendered result is unchanged (verified declaration-by-declaration).
 *
 * EDIT the existing rule rather than appending another pass. The mixed tile
 * sizes and left-hugging grids of FIX-12 lived in a layer nobody read.
 */

/**
 * Product page — museum / Apple-launch editorial (presentation only).
 * Scoped to body.page-product so HOME and STORY are untouched.
 * No CMS / block / field changes.
 *
 * @package Flamingo_Liqueur
 */

/* ------------------------------------------------------------------ */

/* Global Product page rhythm                                         */

/* ------------------------------------------------------------------ */

.page-product .c-entry__content--blocks > .fl-story + .fl-story,
.page-product .c-entry__content--blocks > .fl-story + .fl-how-to-enjoy,
.page-product .c-entry__content--blocks > .fl-how-to-enjoy + .fl-product,
.page-product .c-entry__content--blocks > .fl-product + .fl-gallery,
.page-product .c-entry__content--blocks > .fl-gallery + .fl-story {
  border-top: 0;
}

.page-product .fl-hero__subheading {
  font-weight: 300;
}

.page-product .fl-hero__scroll {
  letter-spacing: 0.28em;
}

/* ------------------------------------------------------------------ */

/* Scene 1 — Signature Bottle: museum pedestal (centered)             */

/* ------------------------------------------------------------------ */

/* THE BOTTLE is the page's one light chapter (fl-tone--champagne). The base
   colour therefore has to come from the tone token — an opaque #0a0a0a here
   left the tone's ink-coloured text sitting on black at about 1.1:1. The
   glows are kept, retuned for a light surface. See FIX-12. */

.page-product #signature {
  text-align: center;
  background: radial-gradient(ellipse 55% 50% at 50% 42%, rgba(209, 43, 116, 0.182), transparent 62%), radial-gradient(ellipse 40% 35% at 50% 70%, rgba(128, 92, 15, 0.156), transparent 70%), var(--fl-bg, #0a0a0a);
}

.page-product #signature .l-container {
  display: flex;
  justify-content: center;
}

.page-product #signature .fl-story__grid {
  margin-inline: auto;
  max-width: 42rem;
  grid-template-columns: 1fr;
  justify-items: center;
}

.page-product #signature .fl-story__media {
  order: -1;
  width: min(100%, 28rem);
  margin-inline: auto;
}

.page-product #signature .fl-story__img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  filter: drop-shadow(0 40px 64px rgba(26, 22, 20, 0.28));
}

.page-product #signature .fl-story__copy {
  text-align: center;
}

.page-product #signature .fl-story__label {
  letter-spacing: 0.32em;
}

.page-product #signature .fl-story__title {
  font-size: clamp(3rem, 6.5vw, 5.25rem);
}

.page-product #signature .fl-story__description p {
  margin-inline: auto;
}

/* Colour comes from the section's tone tokens, not a hard-coded hex — a
   literal #f2f2f2 here is invisible the moment the section is given a
   light tone. See FIX-12. */

.page-product #signature .fl-story__description p:first-child {
  color: var(--fl-text, #f2f2f2);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}

/* ------------------------------------------------------------------ */

/* Scene 2 — Craftsmanship: image-led, warm dark                      */

/* ------------------------------------------------------------------ */

.page-product #craftsmanship {
  padding-block: clamp(5.5rem, 13vh, 10rem) clamp(7rem, 16vh, 12rem);
  background: radial-gradient(ellipse 70% 55% at 18% 48%, rgba(201, 161, 74, 0.234), transparent 58%), linear-gradient(180deg, #0e0c13 0%, #060506 100%);
}

.page-product #craftsmanship .fl-story__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.page-product #craftsmanship .fl-story__description p:first-child {
  color: rgba(201, 161, 74, 0.92);
  font-family: var(--fl-font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  max-width: 16ch;
}

.page-product #craftsmanship .fl-story__img {
  box-shadow: 0 48px 90px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------ */

/* Scene 3 — Ingredients: widescreen film insert                      */

/* ------------------------------------------------------------------ */

.page-product #ingredients {
  padding-block: clamp(6.5rem, 15vh, 11rem);
  background: linear-gradient(180deg, #0c0a0b 0%, #080808 20%, #080808 100%);
}

.page-product #ingredients .l-container {
  max-width: min(92rem, 100%);
}

.page-product #ingredients .fl-story__label {
  color: rgba(255, 79, 163, 0.88);
  letter-spacing: 0.3em;
}

.page-product #ingredients .fl-story__title {
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  max-width: 14ch;
}

.page-product #ingredients .fl-story__description p:first-child {
  color: #fff;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  letter-spacing: 0.04em;
}

.page-product #ingredients .fl-story__img {
  aspect-ratio: 21 / 9;
  object-position: center 45%;
}

@media (min-width: 900px) {

  .page-product #ingredients .fl-story__copy {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    padding-inline: clamp(0.5rem, 2vw, 1.5rem);
  }

  .page-product #ingredients .fl-story__label,
  .page-product #ingredients .fl-story__title {
    grid-column: 1;
  }

  .page-product #ingredients .fl-story__description {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

@media (max-width: 899px) {

  .page-product #ingredients .fl-story__img {
    aspect-ratio: 4 / 3;
  }

  .page-product #ingredients .fl-story__copy {
    display: block;
  }
}

/* ------------------------------------------------------------------ */

/* Scene 4 — Taste Experience: calm editorial serves                  */

/* ------------------------------------------------------------------ */

.page-product #how-to-enjoy {
  padding-block: clamp(7rem, 18vh, 13rem);
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 255, 255, 0.078), transparent 55%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-product #how-to-enjoy .fl-how-to-enjoy__header {
  margin-inline: auto;
  margin-bottom: clamp(3.5rem, 9vw, 6.5rem);
  max-width: 36rem;
  text-align: center;
}

.page-product #how-to-enjoy .fl-how-to-enjoy__intro,
.page-product #how-to-enjoy .fl-how-to-enjoy__intro p {
  margin-inline: auto;
  max-width: 34ch;
}

.page-product #how-to-enjoy .fl-how-to-enjoy__title {
  font-size: clamp(2.75rem, 5.5vw, 4.35rem);
}

@media (min-width: 900px) {

  .page-product #how-to-enjoy .fl-how-to-enjoy__grid {
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .page-product #how-to-enjoy .fl-how-to-enjoy__item:nth-child(odd) .fl-how-to-enjoy__img {
    aspect-ratio: 4 / 5;
  }

  .page-product #how-to-enjoy .fl-how-to-enjoy__item:nth-child(even) .fl-how-to-enjoy__img {
    aspect-ratio: 3 / 4;
  }
}

.page-product #how-to-enjoy .fl-how-to-enjoy__item-title {
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ */

/* Scene 5 — Product Details: quiet essentials card                   */

/* ------------------------------------------------------------------ */

.page-product #product {
  padding-block: clamp(7rem, 18vh, 13rem);
  background: radial-gradient(ellipse 50% 45% at 72% 40%, rgba(255, 79, 163, 0.130), transparent 60%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-product #product .fl-product__header {
  margin-inline: auto;
  margin-bottom: clamp(3.5rem, 9vw, 6rem);
  max-width: 32rem;
  text-align: center;
}

.page-product #product .fl-product__section-title {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
}

.page-product #product .fl-product__img {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

.page-product #product .fl-product__name {
  letter-spacing: 0.12em;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.page-product #product .fl-product__meta-row {
  padding: 1rem 0;
}

/* ------------------------------------------------------------------ */

/* Scene 6 — Collection: CMS-safe vertical reading composition          */

/* ------------------------------------------------------------------ */

.page-product #gallery {
  padding-block: clamp(7.5rem, 19vh, 14rem);
  background: linear-gradient(180deg, #0b0b0b 0%, #080808 40%, #0b0b0b 100%);
}

.page-product #gallery .fl-gallery__header {
  margin-inline: auto;
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
  max-width: 36rem;
  text-align: center;
}

.page-product #gallery .fl-gallery__intro p {
  margin-inline: auto;
  max-width: 32ch;
}

/* Editorial rhythm from blocks/gallery (predictable spans, CMS-safe). */

.page-product #gallery .fl-gallery__grid {
  gap: clamp(1rem, 2vw, 1.5rem);
}

.page-product #gallery .fl-gallery__item {
  margin: 0;
  min-width: 0;
}

.page-product #gallery .fl-gallery__figure {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */

/* Scene 7 — CTA: calm final chapter                                  */

/* ------------------------------------------------------------------ */

.page-product #invite {
  padding-block: clamp(8rem, 20vh, 14rem) clamp(9rem, 22vh, 15rem);
  text-align: center;
  background: radial-gradient(ellipse 48% 38% at 50% 100%, rgba(255, 79, 163, 0.240), transparent 65%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.page-product #invite .l-container {
  display: flex;
  justify-content: center;
}

.page-product #invite .fl-story__grid {
  margin-inline: auto;
  max-width: 34rem;
  justify-items: center;
}

.page-product #invite .fl-story__label {
  color: var(--fl-gold, #c9a14a);
  letter-spacing: 0.3em;
}

.page-product #invite .fl-story__title {
  font-size: clamp(2.85rem, 5.6vw, 4.35rem);
  max-width: 12ch;
}

.page-product #invite .fl-story__description p {
  margin-inline: auto;
  max-width: 28ch;
}

.page-product #invite .fl-story__actions {
  margin-top: 3rem;
}

.page-product #invite .fl-story__actions .fl-btn {
  min-width: 12rem;
  background: transparent;
  border-color: rgba(255, 79, 163, 0.85);
  color: #fff;
}

.page-product #invite .fl-story__actions .fl-btn:hover,
.page-product #invite .fl-story__actions .fl-btn:focus-visible {
  background: var(--fl-pink, #d12b74);
  border-color: var(--fl-pink, #d12b74);
  box-shadow: 0 16px 40px rgba(255, 79, 163, 0.25);
}

@media (max-width: 899px) {

  /* ------------------------------------------------------------------ */

  /* Mobile                                                             */

  /* ------------------------------------------------------------------ */

  .page-product #signature,
  .page-product #craftsmanship,
  .page-product #ingredients,
  .page-product #how-to-enjoy,
  .page-product #product {
    padding-block: clamp(4.5rem, 12vh, 7.5rem);
  }

  .page-product #invite {
    padding-block: clamp(5.5rem, 14vh, 8rem) clamp(6.5rem, 16vh, 10rem);
  }

  .page-product #signature .fl-story__media {
    width: min(100%, 22rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .page-product #signature .fl-story__img,
  .page-product #craftsmanship .fl-story__img,
  .page-product #product .fl-product__img {
    filter: none;
    box-shadow: none;
  }
}

/* ================================================================== */

/* FINAL DIRECTOR PASS — Museum exhibition / bottle as sculpture      */

/* ================================================================== */

.page-product {
  --fl-dir-reveal-y: 1rem;
  --fl-dir-reveal-ms: 1.05s;
  background-color: #070707;
}

.page-product .fl-hero__content {
  margin-inline: auto;
}

.page-product .fl-hero__heading {
  /* Home carries a wide soft shadow on top of the drop-shadow; without it the
     same outline reads harder and whiter here. */
  text-shadow: 0 6px 60px rgba(0, 0, 0, 0.6);
  font-weight: 500;
  line-height: 1;
  margin-inline: auto;
}

.page-product .fl-hero__subheading {
  margin-inline: auto;
}

.page-product .fl-hero__actions {
  justify-content: center;
}

.page-product .fl-story__title,
.page-product .fl-product__title {
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {

  .page-product .fl-reveal.is-pending {
    transform: translateY(var(--fl-dir-reveal-y)) scale(0.985);
    transition-duration: var(--fl-dir-reveal-ms);
    transition-timing-function: var(--fl-ease);
  }

  .page-product .fl-reveal.is-pending.is-visible {
    transform: translateY(0) scale(1);
  }
}

.page-product .fl-hero__image,
.page-product .fl-hero__video {
  transform-origin: center center;
}

/* Museum void — extreme negative space */

.page-product .fl-story:nth-of-type(odd) {
  padding-block: clamp(10rem, 26vh, 18rem);
}

.page-product .fl-story:nth-of-type(even) {
  padding-block: clamp(7rem, 18vh, 12rem);
}

.page-product .fl-story__label,
.page-product .fl-product__label {
  text-transform: uppercase;
}

.page-product .fl-how-to-enjoy__label {
  letter-spacing: 0.42em;
  font-size: 0.66rem;
  color: var(--fl-label, rgba(201, 161, 74, 0.88));
  text-transform: uppercase;
}

.page-product .fl-story__title {
  text-align: center;
}

.page-product .fl-product__title {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  letter-spacing: 0.06em;
  font-style: normal;
  text-align: center;
  margin-inline: auto;
  max-width: 14ch;
}

.page-product .fl-story__description,
.page-product .fl-product__description {
  text-align: center;
  margin-inline: auto;
}

.page-product .fl-story__copy {
  margin-inline: auto;
}

.page-product .fl-story__description p,
.page-product .fl-product__description p {
  line-height: 1.85;
}

/* Artwork presentation */

.page-product .fl-story__media,
.page-product .fl-product__media {
  max-width: min(100%, 30rem);
}

@media (min-width: 900px) {

  .page-product .fl-story__grid {
    grid-template-columns: 1fr;
    max-width: 36rem;
    margin-inline: auto;
    gap: clamp(2.5rem, 6vh, 4rem);
  }

  .page-product .fl-story__media {
    order: -1;
  }
}

.page-product .fl-product__meta {
  text-align: left;
}

.page-product .fl-product__meta-label {
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  color: rgba(201, 161, 74, 0.85);
}

.page-product .fl-product__name {
  text-align: center;
}

.page-product .fl-product__section-title {
  text-align: center;
}

/* ================================================================== */

/* FINAL ART DIRECTION — Museum: bottle owns the room                 */

/* ================================================================== */

.page-product {
  background: #050505;
}

.page-product .c-site-main .l-container {
  max-width: var(--fl-container);
}

.page-product .fl-hero {
  min-height: 78svh;
  align-items: center;
  background: #050505;
}

.page-product .fl-hero__image,
.page-product .fl-hero__video {
  object-position: center 48%;
  transform: scale(1.01);
  /* No brightness/contrast correction here. Measured on the live images:
     this filter clipped 13-68% of every hero to flat white or flat black,
     which is what read as "hazy". The hero block already exposes
     --fl-hero-filter for genuine per-image correction from the editor.
     See FIX-15 — and FIX-06, which removed the same filter from the block
     stylesheet but left these nine page-level copies behind. */
}

.page-product .fl-hero__overlay {
  background: radial-gradient(ellipse 42% 38% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(180deg, rgba(5, 5, 5, 0.5), rgba(5, 5, 5, 0.85));
}

.page-product .fl-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 40rem;
  padding-block: clamp(7rem, 18vh, 11rem) clamp(5rem, 12vh, 7.5rem);
}

.page-product .fl-hero__heading {
  /* 92px against home's 184. The home page is the cover, and it should not be
     matched — but a third of it made this page look like a different site. */
  font-size: clamp(3.5rem, 7.5vw, 5.75rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-style: normal;
  /* "FLAMINGO LIQUEUR" was breaking across two lines at 18ch. */
  max-width: none;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.page-product .fl-hero__subheading {
  max-width: 18ch;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  opacity: 0.65;
  margin-bottom: 1.75rem;
}

.page-product .fl-btn {
  min-height: 2.55rem;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  background: transparent;
  border-color: rgba(201, 161, 74, 0.45);
}

.page-product .fl-btn--primary {
  background: transparent;
  color: #fff;
}

.page-product .fl-btn--primary:hover,
.page-product .fl-btn--primary:focus-visible {
  background: rgba(201, 161, 74, 0.208);
  transform: none;
  box-shadow: none;
}

/* Void — bottle first, copy almost disappears */

.page-product .fl-story,
.page-product .fl-product {
  padding-block: clamp(11rem, 28vh, 19rem);
  text-align: center;
}

.page-product .fl-how-to-enjoy,
.page-product .fl-gallery {
  padding-block: clamp(6rem, 14vh, 10rem);
}

.page-product .fl-story__grid,
.page-product .fl-product__grid {
  grid-template-columns: 1fr;
  max-width: 34rem;
  margin-inline: auto;
  justify-items: center;
  gap: clamp(2rem, 5vh, 3.5rem);
}

.page-product .fl-story__media,
.page-product .fl-product__media {
  order: -1;
  width: min(100%, 26rem);
  margin-inline: auto;
}

.page-product .fl-story__img,
.page-product .fl-product__img {
  object-fit: contain;
  aspect-ratio: 3 / 4;
  max-height: 78vh;
  width: 100%;
  object-position: center center;
  filter: drop-shadow(0 56px 100px rgba(0, 0, 0, 0.65));
  background: transparent;
}

.page-product .fl-story__label,
.page-product .fl-product__label {
  letter-spacing: 0.48em;
  font-size: 0.6rem;
  color: var(--fl-label, rgba(201, 161, 74, 0.8));
}

.page-product .fl-story__title,
.page-product .fl-product__section-title,
.page-product .fl-product__name {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  letter-spacing: 0.08em;
  font-style: normal;
  max-width: 14ch;
  margin-inline: auto;
}

.page-product .fl-story__description p,
.page-product .fl-product__description p {
  max-width: 24ch;
  margin-inline: auto;
  font-size: 0.92rem;
  opacity: 0.8;
}

.page-product .fl-story__copy,
.page-product .fl-product__copy {
  text-align: center;
  max-width: 26rem;
}

.page-product .fl-product__meta {
  max-width: 22rem;
  margin-inline: auto;
}

.page-product .fl-product__meta-row {
  padding-block: 0.85rem;
  border-color: rgba(255, 255, 255, 0.05);
}

.page-product .fl-gallery .l-container {
  max-width: 42rem;
}

.page-product #gallery .l-container {
  max-width: min(64rem, 100%);
}

.page-product #gallery .fl-gallery__img {
  object-fit: cover;
  object-position: center center;
}

/* ================================================================== */

/* REVIEW ADJUSTMENTS — THE BOTTLE (#signature) + CRAFT (#craftsmanship) */

/* Balance-only refinements; concept unchanged. Scoped to .page-product. */

/* ================================================================== */

/* --- THE BOTTLE (#signature) ------------------------------------- */

/* The grid sat in a centered flex container with no width, so it shrank
   to min-content and the title broke into 3+ short lines. Give it a real
   width so the title wraps at its own measure (~2 lines), tie the image
   to the copy, and lift the closing lines' readability. */

.page-product #signature .fl-story__grid {
  width: 100%;
  gap: clamp(1.5rem, 3vh, 2.5rem);
}

.page-product #signature {
  padding-block: clamp(5rem, 13vh, 9rem) clamp(6rem, 14vh, 11rem);
}

.page-product #signature .fl-story__title {
  margin-bottom: clamp(0.85rem, 1.6vw, 1.25rem);
}

.page-product #signature .fl-story__description p:first-child {
  margin-top: 0;
}

.page-product #signature .fl-story__description p {
  max-width: 26ch;
  font-size: 1rem;
  line-height: 1.95;
  opacity: 0.9;
}

/* --- CRAFT (#craftsmanship) -------------------------------------- */

/* Was a 1.3/0.7 split inside a 34rem grid → text column ~10rem, so the
   title shattered to 4 lines and the image (object-fit:contain, capped
   26rem) read tiny and detached. Widen the room, rebalance the columns,
   fill + enlarge the image, and center image/text on a shared axis so
   they read as one object. Copy 静か is left-aligned in its column. */

.page-product #craftsmanship .fl-story__title {
  max-width: 12ch;
}

.page-product #craftsmanship .fl-story__description p:first-child {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
}

.page-product #craftsmanship .fl-story__img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 32%;
}

@media (min-width: 900px) {

  .page-product #craftsmanship .l-container {
    max-width: 64rem;
  }

  .page-product #craftsmanship .fl-story__grid {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    grid-template-columns: minmax(var(--fl-image-min), 1.08fr) minmax(var(--fl-text-min), 0.92fr);
    gap: clamp(2.75rem, 5vw, 4.5rem);
    align-items: center;
    justify-items: stretch;
  }

  .page-product #craftsmanship .fl-story__media {
    order: -1;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .page-product #craftsmanship .fl-story__copy {
    max-width: none;
    margin-inline: 0;
    padding-bottom: 0;
  }

  .page-product #craftsmanship .fl-story__label,
  .page-product #craftsmanship .fl-story__title,
  .page-product #craftsmanship .fl-story__description,
  .page-product #craftsmanship .fl-story__description p {
    margin-inline: 0;
    text-align: left;
  }

  .page-product #craftsmanship .fl-story__title {
    max-width: 13ch;
  }

  .page-product #craftsmanship .fl-story__description p {
    max-width: 26ch;
  }
}

/* ================================================================== */

/* REVIEW ADJUSTMENTS 2 — proper-site balance (less museum-cramped)   */

/* ================================================================== */

/* The 48rem "void" container crushed titles, images and cards. Give the
   product content real room so titles wrap in fewer natural lines,
   photos breathe and the serve cards fit their labels. */

.page-product .c-site-main {
  --fl-container: 64rem;
}

/* THE BOTTLE (#signature) — the centered copy box still shrank to
   min-content, shattering the title into 3–4 short lines. Pin its width
   so the title wraps to ~2 lines. */

.page-product #signature .fl-story__copy {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.page-product #signature .fl-story__title {
  max-width: 16ch;
  margin-inline: auto;
  line-height: 1.08;
}

.page-product #product .fl-product__description p {
  max-width: 30ch;
}

.page-product #product .fl-product__meta {
  max-width: 26rem;
}

@media (min-width: 900px) {

  .page-product #product .fl-product__media {
    margin-inline: 0;
  }

  .page-product #product .fl-product__copy {
    max-width: none;
    margin-inline: 0;
  }

  .page-product #product .fl-product__description,
  .page-product #product .fl-product__description p,
  .page-product #product .fl-product__meta {
    text-align: left;
    margin-inline: 0;
  }

  /* ================================================================== */

  /* NOTES (#ingredients) — overlay the copy on the bottle image         */

  /* Title (left) + notes (right) sit over the photo; the scrim darkens  */

  /* both edges while keeping the centred bottle visible. Scoped.        */

  /* ================================================================== */

  .page-product #ingredients {
    padding-block: clamp(4rem, 9vh, 7rem);
  }

  .page-product #ingredients .fl-story__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0;
    max-width: none;
    margin-inline: auto;
  }

  /* Stack copy + media in one cell → text over image. */

  .page-product #ingredients .fl-story__copy,
  .page-product #ingredients .fl-story__media {
    grid-column: 1;
    grid-row: 1;
  }

  .page-product #ingredients .fl-story__media {
    order: 0;
    position: relative;
    z-index: 1;
    margin: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 76vh;
    overflow: hidden;
  }

  .page-product #ingredients .fl-story__media .fl-image-frame__viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .page-product #ingredients .fl-story__img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 45%;
  }

  /* Dark at both edges (under title / notes), clear in the centre
       (bottle). */

  .page-product #ingredients .fl-story__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(6, 5, 6, 0.88) 0%, rgba(6, 5, 6, 0.46) 26%, rgba(6, 5, 6, 0.1) 50%, rgba(6, 5, 6, 0.46) 74%, rgba(6, 5, 6, 0.88) 100%), linear-gradient(180deg, rgba(6, 5, 6, 0.42) 0%, transparent 32%, transparent 68%, rgba(6, 5, 6, 0.42) 100%);
    pointer-events: none;
  }

  .page-product #ingredients .fl-story__copy {
    position: relative;
    z-index: 2;
    align-self: center;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: clamp(2rem, 4.5vw, 4rem);
  }

  .page-product #ingredients .fl-story__description {
    align-self: center;
  }

  .page-product #ingredients .fl-story__title {
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.72);
  }

  .page-product #ingredients .fl-story__description p {
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.72);
  }

  .page-product #ingredients .fl-story__description p:first-child {
    color: #fff;
  }
}

/* ================================================================== */

/* DETAILS (#product) — the bottle photo read too small.               */

/* Fill the column (no inner padding, higher cap) and crop to a        */

/* portrait frame so the bottle fills the frame instead of floating in */

/* dark margins. Scoped to #product.                                   */

/* ================================================================== */

.page-product #product .fl-product__media {
  max-width: none;
  width: 100%;
  padding: 0;
  margin-inline: 0;
}

.page-product #product .fl-product__img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 42%;
  max-height: 82vh;
  width: 100%;
}

@media (min-width: 900px) {

  .page-product #product .fl-product__grid {
    grid-template-columns: minmax(var(--fl-image-min), 1.2fr) minmax(var(--fl-text-min), 0.8fr);
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: center;
  }
}