/** Shopify CDN: Minification failed

Line 838:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:mello-404 (INDEX:35) */
.mello-section.mello-404 { padding-block: var(--mello-space-3xl); }

  .mello-404__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mello-space-md);
  }
/* END_SECTION:mello-404 */

/* START_SECTION:mello-announcement (INDEX:36) */
.mello-announce {
    display: block;
    background-color: var(--announce-bg, var(--mello-espresso));
    color: var(--announce-fg, var(--mello-bone));
  }

  .mello-announce__inner {
    max-width: var(--mello-page-width);
    margin-inline: auto;
    padding: 0.9rem var(--mello-gutter);
    text-align: center;
  }

  .mello-announce__message {
    font-size: var(--mello-size-xsmall);
    font-weight: 500;
    line-height: 1.4;
    /* One line, always. A wrapping bar shifts everything under it. */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mello-announce__message[hidden] {
    display: none;
  }

  .mello-announce__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .mello-announce :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
/* END_SECTION:mello-announcement */

/* START_SECTION:mello-badge-row (INDEX:37) */
.mello-section.mello-badges { padding-block: var(--mello-space-xl); }

  .mello-badges__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mello-space-lg) var(--mello-space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mello-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mello-space-xs);
    width: 8rem;
    text-align: center;
  }

  .mello-badges__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: var(--mello-radius-pill);
    border: 1.5px solid var(--mello-ink-20);
    color: var(--mello-espresso);
  }

  .mello-badges__label {
    font-size: var(--mello-size-xsmall);
    font-weight: 500;
    line-height: 1.3;
    color: var(--mello-ink-muted);
  }
/* END_SECTION:mello-badge-row */

/* START_SECTION:mello-benefit-accordion (INDEX:38) */
.mello-ba__grid {
    display: grid;
    gap: var(--mello-space-xl);
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .mello-ba__grid {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: var(--mello-space-2xl);
    }

    .mello-ba__grid--right .mello-ba__media { order: 2; }
  }

  .mello-ba__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mello-space-sm);
  }

  .mello-ba__list { width: 100%; margin-top: var(--mello-space-xs); }

  .mello-ba__icon { width: 22px; height: 22px; flex: 0 0 auto; }
  .mello-ba__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

  .mello-ba__source {
    margin: var(--mello-space-xs) 0 0;
    font-size: var(--mello-size-xsmall);
    font-weight: 600;
    color: var(--mello-sage-text);
  }
/* END_SECTION:mello-benefit-accordion */

/* START_SECTION:mello-collection (INDEX:39) */
.mello-collection__description > p:first-child { margin-top: 0; }
  .mello-collection__description > p:last-child { margin-bottom: 0; }

  .mello-cbanner {
    position: relative;
    overflow: hidden;
    border-radius: var(--mello-radius-card);
    margin-bottom: var(--mello-space-lg);
    display: grid;
    background-color: var(--mello-espresso);
  }

  /* The photo gets its own column rather than sitting under the copy. A 3:2
     product shot letterboxed into a full width banner loses the tops of the
     pouches, which is the one thing the banner exists to show. */
  .mello-cbanner__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  .mello-cbanner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--cbanner-focus, 50%);
    display: block;
  }

  /* Only needed where the copy and the photo share space, which is mobile.
     Two classes because Dawn's base.css deletes empty divs. */
  .mello-cbanner .mello-cbanner__scrim { display: none; }

  .mello-cbanner__text {
    position: relative;
    padding: var(--mello-space-md);
    color: var(--mello-bone);
    align-self: center;
  }

  .mello-cbanner__eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(252, 251, 248, 0.82);
  }

  .mello-collection .mello-cbanner__title {
    margin: 0;
    color: var(--mello-bone);
  }

  .mello-cbanner__intro {
    margin-top: 12px;
    max-width: 42ch;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(252, 251, 248, 0.88);
  }

  .mello-cbanner__intro p { margin: 0; }

  .mello-cbanner__count {
    margin: 14px 0 0;
    font-size: 14px;
    color: rgba(252, 251, 248, 0.72);
  }

  @media screen and (min-width: 750px) {
    .mello-cbanner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      align-items: stretch;
    }

    /* The photo column stretches to whatever height the copy needs, so the
       two halves stay flush without either being cropped to a fixed ratio. */
    .mello-cbanner__media { aspect-ratio: auto; }

    .mello-cbanner__text {
      padding: var(--mello-space-lg);
    }
  }
/* END_SECTION:mello-collection */

/* START_SECTION:mello-faq (INDEX:40) */
/* Heading and onward button on one row, then the questions in two columns
     from desktop up. A single column left half the section empty and made an
     eight-question list feel twice as long as it is. */
  .mello-faq__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mello-space-md);
    margin-bottom: var(--mello-space-xl);
  }

  .mello-faq__title { max-width: 62rem; }
  .mello-faq__link { flex: 0 0 auto; }
  .mello-faq__list { width: 100%; }

  @media screen and (min-width: 990px) {
    .mello-faq__list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--mello-space-2xl);
      border-top: none;
    }

    /* Once the stacked list is broken in two, each column needs its own top
       rule; the shared one on .mello-accordion no longer reaches column two. */
    .mello-faq__list > .mello-accordion__item:nth-child(-n + 2) {
      border-top: var(--mello-hairline);
    }
  }
/* END_SECTION:mello-faq */

/* START_SECTION:mello-footer (INDEX:41) */
.mello-footer {
    background-color: var(--mello-espresso);
    color: var(--mello-bone);
    padding-block: var(--mello-space-2xl) var(--mello-space-lg);
  }

  .mello-footer__top {
    display: grid;
    gap: var(--mello-space-xl);
    padding-bottom: var(--mello-space-xl);
  }

  @media screen and (min-width: 750px) {
    .mello-footer__top {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
      gap: var(--mello-space-2xl);
    }
  }

  .mello-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mello-space-md);
    max-width: 34rem;
  }

  .mello-footer__logo-link {
    color: inherit;
    text-decoration: none;
    line-height: 0;
  }

  .mello-footer__logo { display: block; height: 34px; width: auto; }

  .mello-footer__statement {
    margin: 0;
    font-size: var(--mello-size-body);
    line-height: var(--mello-leading-body);
    color: var(--mello-bone-75);
  }

  .mello-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--mello-space-lg);
  }

  .mello-footer__column-title {
    margin: 0 0 var(--mello-space-sm);
    color: var(--mello-bone);
    font-family: var(--mello-font-body);
    font-size: var(--mello-size-small);
    font-weight: 600;
  }

  .mello-footer__links,
  .mello-footer__policies {
    display: flex;
    flex-direction: column;
    gap: var(--mello-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mello-footer__link {
    font-size: var(--mello-size-small);
    color: var(--mello-bone-75);
    text-decoration: none;
  }

  .mello-footer__link:hover {
    color: var(--mello-bone);
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }

  .mello-footer__social {
    display: flex;
    gap: var(--mello-space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mello-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--mello-radius-pill);
    border: 1px solid rgba(252, 251, 248, 0.2);
    color: var(--mello-bone);
  }

  .mello-footer__social a:hover { border-color: var(--mello-bone); }
  .mello-footer__social svg { width: 1.8rem; height: 1.8rem; }

  .mello-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mello-space-md);
    padding-top: var(--mello-space-lg);
    border-top: 1px solid rgba(252, 251, 248, 0.16);
  }

  .mello-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mello-space-sm) var(--mello-space-md);
  }

  .mello-footer__copyright {
    margin: 0;
    font-size: var(--mello-size-xsmall);
    color: var(--mello-bone-75);
  }

  .mello-footer__policies { flex-direction: row; flex-wrap: wrap; gap: var(--mello-space-md); }
  .mello-footer__policies .mello-footer__link { font-size: var(--mello-size-xsmall); }

  /* Region selector: a native select dressed as a footer control. */
  .mello-footer .mello-region {
    display: inline-flex;
    align-items: center;
    gap: var(--mello-space-xs);
    margin: 0;
  }

  .mello-footer .mello-region__label {
    font-size: var(--mello-size-xsmall);
    color: var(--mello-bone-75);
  }

  .mello-footer .mello-region__field {
    position: relative;
    display: inline-block;
  }

  .mello-footer .mello-region__select {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0.6rem 3.2rem 0.6rem 1.4rem;
    border: 1px solid rgba(252, 251, 248, 0.3);
    border-radius: var(--mello-radius-pill);
    background-color: transparent;
    color: var(--mello-bone);
    font-family: var(--mello-font-body);
    font-size: var(--mello-size-xsmall);
    line-height: 1.4;
    cursor: pointer;
  }

  .mello-footer .mello-region__select:hover { border-color: var(--mello-bone); }

  .mello-footer .mello-region__select:focus-visible {
    outline: 2px solid var(--mello-bone);
    outline-offset: 2px;
  }

  .mello-footer .mello-region__select option { color: var(--mello-ink); }

  .mello-footer .mello-region__caret {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    transform: translateY(-50%);
    color: var(--mello-bone-75);
    pointer-events: none;
  }

  .mello-footer__payment-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mello-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mello-footer__payment-icon {
    display: block;
    width: 3.8rem;
    height: 2.4rem;
  }

  .mello-footer :focus-visible {
    outline: 2px solid var(--mello-bone);
    outline-offset: 2px;
  }
/* END_SECTION:mello-footer */

/* START_SECTION:mello-header (INDEX:42) */
/* Two classes so this beats base.css's .section-header rules regardless of
     which stylesheet the bundler emits first. */
  .mello-header-section.section-header {
    position: sticky;
    top: 0;
    z-index: 4;
  }

  .mello-header.header-wrapper {
    display: block;
    position: relative;
    background-color: var(--mello-bone);
    border-bottom: 1px solid transparent;
    transition: background-color var(--mello-duration) var(--mello-ease),
      border-color var(--mello-duration) var(--mello-ease);
  }

  /* Past 40px of scroll the bar goes translucent and blurs what runs under
     it. Falls back to the solid bone background where backdrop-filter is
     unsupported. */
  .mello-header.header-wrapper.is-scrolled {
    background-color: var(--mello-bone-75);
    border-bottom-color: var(--mello-ink-08);
  }

  @supports (backdrop-filter: blur(1px)) {
    .mello-header.header-wrapper.is-scrolled {
      backdrop-filter: saturate(140%) blur(12px);
      -webkit-backdrop-filter: saturate(140%) blur(12px);
    }
  }

  .mello-header__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--mello-space-md);
    min-height: 6.4rem;
  }

  @media screen and (min-width: 990px) {
    .mello-header__grid {
      grid-template-columns: 1fr auto 1fr;
      min-height: 8rem;
    }
  }

  .mello-header__left {
    display: flex;
    align-items: center;
    gap: var(--mello-space-xs);
    min-width: 0;
  }

  .mello-header__heading {
    display: flex;
    margin: 0;
    font-size: inherit;
  }

  .mello-header__logo-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    color: var(--mello-ink);
  }

  .mello-header__heading { min-width: 0; }

  /* Sized by height so it sits optically level with the nav. 24px on mobile,
     30px from tablet up; the width follows the file's own aspect ratio. */
  .mello-header__logo {
    display: block;
    height: 24px;
    width: auto;
  }

  @media screen and (min-width: 750px) {
    .mello-header__logo { height: 30px; }
  }

  /* Navigation ---------------------------------------------------------- */

  .mello-header__nav { display: none; }

  @media screen and (min-width: 990px) {
    .mello-header__nav { display: block; justify-self: center; }
  }

  .mello-header__menu {
    display: flex;
    align-items: center;
    gap: var(--mello-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mello-header__menu-item { position: relative; }

  .mello-header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 0;
    font-size: var(--mello-size-small);
    font-weight: 500;
    color: var(--mello-ink);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }

  .mello-header__link::-webkit-details-marker { display: none; }

  .mello-header__link:hover,
  .mello-header__link[aria-current='page'] {
    text-decoration: underline;
    text-underline-offset: 0.4em;
    text-decoration-thickness: 1px;
  }

  .mello-header__caret {
    width: 1rem;
    height: 0.6rem;
    transition: transform var(--mello-duration) var(--mello-ease);
  }

  .mello-header__dropdown details[open] .mello-header__caret {
    transform: rotate(180deg);
  }

  .mello-header__submenu {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 22rem;
    margin: 0;
    padding: var(--mello-space-xs);
    list-style: none;
    background-color: var(--mello-bone);
    border: var(--mello-hairline);
    border-radius: var(--mello-radius-card);
    z-index: 2;
  }

  .mello-header__sublink {
    display: block;
    padding: 1rem 1.2rem;
    border-radius: var(--mello-radius-sm);
    font-size: var(--mello-size-small);
    color: var(--mello-ink);
    text-decoration: none;
  }

  .mello-header__sublink:hover {
    background-color: var(--mello-mist);
  }

  /* Actions -------------------------------------------------------------- */

  .mello-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mello-space-2xs);
  }

  .mello-header__actions .mello-header__icon,
  .mello-header__actions .header__search summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    color: var(--mello-ink);
    position: relative;
  }

  .mello-header__actions .header__search { display: inline-flex; }

  .mello-header__actions svg {
    width: 2rem;
    height: 2rem;
  }

  /* Dawn's count bubble, re-skinned to the MELLO accent. */
  .mello-header .cart-count-bubble {
    position: absolute;
    top: 0.6rem;
    right: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.4rem;
    border-radius: var(--mello-radius-pill);
    background-color: var(--mello-sage-text);
    color: var(--mello-bone);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
  }

  /* Dawn's drawer trigger sits inside our left cluster on small screens. */
  .mello-header header-drawer { justify-self: start; margin-left: -1.2rem; }

  @media screen and (min-width: 990px) {
    .mello-header header-drawer { display: none; }
  }

  .mello-header :focus-visible {
    outline: 2px solid var(--mello-espresso);
    outline-offset: 2px;
  }

  /* Shopify's account element keeps its own focus handling inside a shadow
     root, so the descendant rule above never reaches it. Bind to :focus as
     well so tabbing to it always shows a ring. */
  .mello-header shopify-account:focus,
  .mello-header shopify-account:focus-visible {
    outline: 2px solid var(--mello-espresso);
    outline-offset: 2px;
    border-radius: var(--mello-radius-pill);
  }
/* END_SECTION:mello-header */

/* START_SECTION:mello-hero (INDEX:43) */
/* Centred, not pinned to either edge. Bottom alignment dropped the stack
     onto the packs once the trust chips were removed; top alignment then left
     it crammed against the header with the whole lower half empty. Centring
     sits it in the clear part of the desktop crop, and the mobile rule below
     nudges it up to stay inside the empty top of the portrait crop. */
  .mello-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min-mobile, 70vh);
    background-color: var(--mello-mist);
    color: var(--mello-bone);
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .mello-hero { min-height: var(--hero-min-desktop, 85vh); }
  }

  .mello-hero__media {
    position: absolute;
    inset: 0;
  }

  .mello-hero__img,
  .mello-hero__img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .mello-hero__img { position: absolute; inset: 0; }

  .mello-hero__img--always { display: block; }

  /* Between tablet and small laptop the portrait source is taller than the
     box, so cover trims top and bottom. Anchor the crop high: the empty
     gradient is at the top of that frame and it is what the copy sits on.
     Below 750 the box is narrower than the source, cover trims the sides
     instead, and this has no effect. */
  @media screen and (min-width: 750px) and (max-width: 1319px) {
    .mello-hero__img img { object-position: center 18%; }
  }

  /* The wide source carries extra plain gradient on its left so the packs
     and mugs sit clear of the copy. On a laptop the box is a little squarer
     than the source and cover trims the sides; anchoring right of centre
     takes most of that trim from the spare gradient rather than from the
     mushrooms at the right edge. */
  @media screen and (min-width: 1320px) {
    .mello-hero__img img { object-position: 62% center; }
  }

  /* picture is a custom-element-shaped inline box by default, and an inline
     box inside an absolutely positioned parent will not fill it. */
  .mello-hero__img picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Bottom-left scrim. Strong enough to hold body text, light enough that
     the top two thirds of the photograph is untouched. */
  /* Two classes deliberately: Dawn's base.css carries `div:empty { display:
     none }`, which outranks a single class and would otherwise delete this
     element outright. The scrim has no content by design. */
  /* Weighted to the left, where the copy is, rather than flooding the frame.
     A scrim strong enough for white type across the whole image turned the
     gradient muddy and dulled the packs, which are the reason the photograph
     is there. The horizontal pass does most of the work and is gone by the
     time it reaches the product; the vertical pass only has to catch the
     trust chips along the bottom. */
  .mello-hero .mello-hero__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.78)) 0%,
        rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.42)) 30%,
        rgba(34, 27, 20, 0) 64%
      ),
      linear-gradient(
        to right,
        rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 1.05)) 0%,
        rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.92)) 30%,
        rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.66)) 52%,
        rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.3)) 70%,
        rgba(34, 27, 20, 0) 84%
      );
  }

  /* The base scrim is bottom-left weighted, which suits the desktop crop where
     the copy sits low. The portrait crop puts the copy in the top half, where
     that gradient has already faded out: white measured 2.69:1 on the kicker.
     Below the tablet breakpoint the scrim gains a top-anchored pass sized to
     the copy block. Darkening the plate rather than darkening the type, as
     asked. */
  @media screen and (max-width: 749px) {
    .mello-hero .mello-hero__scrim {
      background:
        linear-gradient(
          to bottom,
          rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.66)) 0%,
          rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.62)) 46%,
          rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.34)) 68%,
          rgba(34, 27, 20, 0) 86%
        ),
        linear-gradient(
          to top,
          rgba(34, 27, 20, calc(var(--hero-scrim, 0.75) * 0.85)) 0%,
          rgba(34, 27, 20, 0) 48%
        );
    }
  }

  .mello-hero__inner {
    position: relative;
    width: 100%;
    padding-block: var(--mello-space-2xl);
  }

  /* At 360 the copy wraps to more lines than at 390, and the stack grew past
     the empty top of the portrait crop: the rating line landed on the packs
     at 1.6:1. Tightening the padding and the gap lifts it clear without
     touching the photograph or the type sizes. */
  @media screen and (max-width: 419px) {
    .mello-hero__inner { padding-block: var(--mello-space-lg) var(--mello-space-md); }
    .mello-hero__content { gap: var(--mello-space-sm); }
  }

  .mello-hero__content { gap: var(--mello-space-sm); }

    /* Trimming padding was not enough on its own: the stack was still about
       50px taller than the empty top of the crop. The 40px floor is right for
       a normal phone and oversized on a 568px-tall one, so the display scales
       down only where height is the constraint. Phones at 844 and up keep the
       40 to 64 range untouched. */
    .mello-hero .mello-hero__headline {
      font-size: clamp(3rem, 1.4rem + 4.6vw, 4rem);
    }

    .mello-hero__subline { font-size: var(--mello-size-small); }
  }

  /* Spacing is deliberate per pair rather than one gap repeated four times,
     which is what made the block read as an evenly spaced list. The kicker
     belongs to the headline, so it sits tight to it; the subline gets a
     little air; the button gets the largest step because it is a change of
     purpose; the rating line tucks under the button it qualifies. */
  .mello-hero__content {
    /* Narrow enough that a long headline never reaches the packs. */
    max-width: 52rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }



  .mello-hero__kicker {
    margin: 0 0 var(--mello-space-sm);
    font-size: var(--mello-size-small);
    font-weight: 400;
    color: var(--mello-bone-75);
  }

  /* Dark scheme, for a light photograph. Bone copy measured 2.0:1 against the
     warm ground of the brand banner; ink measures 8.1:1. Two classes so these
     beat the base rules, which the bundler emits after this stylesheet. */
  .mello-hero.mello-hero--dark { color: var(--mello-ink); }
  .mello-hero.mello-hero--dark .mello-hero__headline,
  .mello-hero.mello-hero--dark .mello-hero__word { color: var(--mello-ink); }
  /* Full strength, not muted. Measured against the pixels the glyphs actually
     land on, the muted tone gave 4.23:1 on the kicker and 4.07:1 on the
     subline over the lighter part of the gradient. Contrast bought from the
     ink costs nothing; bought from a wash it would have cost the photograph
     its brightness. */
  .mello-hero.mello-hero--dark .mello-hero__kicker,
  .mello-hero.mello-hero--dark .mello-hero__subline { color: var(--mello-ink); }
  .mello-hero.mello-hero--dark .mello-hero__scrim { display: none; }

  /* No wash at any width: the photograph stays at full brightness and the
     copy earns its contrast from full-strength ink instead. */


  .mello-hero.mello-hero--dark .mello-hero__btn-secondary {
    border-color: var(--mello-ink);
    color: var(--mello-ink);
  }

  .mello-hero.mello-hero--dark .mello-hero__btn-secondary:hover {
    background-color: var(--mello-ink);
    color: var(--mello-bone);
  }

  .mello-hero.mello-hero--dark :focus-visible { outline-color: var(--mello-espresso); }

  /* Editorial display setting. Fraunces at medium rather than semibold, pure
     white rather than bone, and a tighter leading than the shared .mello-h1 so
     two long lines sit as a block. The clamp runs 40px to 64px; the root is at
     62.5% so 1rem is 10px here. opsz is pushed to the top of the optical range
     because this is the largest type on the site. */
  .mello-hero .mello-hero__headline {
    margin: 0 0 var(--mello-space-md);
    font-family: var(--mello-font-display);
    font-size: clamp(4rem, 2.1rem + 4.6vw, 6.4rem);
    font-weight: 450;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 72;
  }

  /* Liquid strips the whitespace between the prefix and the cycling word, so
     the word space has to be a margin. It only showed once the headline
     stopped wrapping and the two ran together as "Made forclear focus". */
  .mello-hero__prefix,
  .mello-hero__suffix { display: inline; }

  .mello-hero__prefix { margin-right: 0.26em; }

  .mello-hero__suffix { margin-left: 0.26em; }

  /* All words share one grid cell, so the element is as wide as the longest
     term from first paint and nothing reflows as they swap. */
  .mello-hero__cycle {
    display: inline-grid;
    vertical-align: bottom;
    text-align: left;
  }

  .mello-hero__word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 480ms var(--mello-ease), transform 480ms var(--mello-ease);
    white-space: nowrap;
  }

  .mello-hero__word.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .mello-hero__word { transition: none; transform: none; }
  }

  .mello-hero__subline {
    margin: 0 0 var(--mello-space-lg);
    max-width: 46rem;
    font-size: var(--mello-size-body);
    line-height: var(--mello-leading-body);
    color: var(--mello-bone-75);
  }

  /* Supporting copy near-white rather than pure white: at 14 to 16px a flat
     #fff against a photograph reads as glare, and 92% keeps it comfortably
     past AA while letting the headline stay the brightest thing in the frame.
     Faces, sizes and the button colours are untouched. */
  /* Pure white throughout, not a near-white for the supporting copy. Every
     text element in the hero, the cycling word included, is #FFFFFF. */
  .mello-hero.mello-hero--light,
  .mello-hero--light .mello-hero__headline,
  .mello-hero--light .mello-hero__word,
  .mello-hero--light .mello-hero__kicker,
  .mello-hero--light .mello-hero__subline,
  .mello-hero--light .mello-hero__rating {
    color: #ffffff;
  }

  /* The rating is a line of type under the button, not a chip. It inherits
     the hero's copy colour, so it follows the scheme without a rule of its
     own; the stars take the same colour so they read on the photo. */
  .mello-hero__rating {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: var(--mello-space-md) 0 0;
    font-size: var(--mello-size-small);
    line-height: 1.4;
  }

  .mello-hero__rating .mello-stars {
    color: var(--mello-ink-20);
  }

  .mello-hero__rating .mello-stars__fill {
    color: var(--mello-sage);
  }

  .mello-hero--light .mello-hero__rating .mello-stars {
    color: rgba(255, 255, 255, 0.35);
  }

  .mello-hero--light .mello-hero__rating .mello-stars__fill {
    color: #ffffff;
  }

  .mello-hero__rating svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  .mello-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mello-space-sm);
  }

  /* Two classes: the bundled section stylesheet is emitted before the linked
     theme stylesheets, so a single class here loses to .mello-btn--secondary
     and the label came out ink-on-photograph. */
  .mello-hero .mello-hero__btn-secondary {
    border-color: rgba(252, 251, 248, 0.45);
    color: var(--mello-bone);
    background-color: transparent;
  }

  .mello-hero .mello-hero__btn-secondary:hover {
    background-color: var(--mello-bone);
    border-color: var(--mello-bone);
    color: var(--mello-ink);
  }

  /* Trust chips ---------------------------------------------------------- */

  @supports (backdrop-filter: blur(1px)) {
  }

  .mello-hero :focus-visible {
    outline: 2px solid var(--mello-bone);
    outline-offset: 2px;
  }

  /* Below the tablet breakpoint the copy centres inside the clear part of the
     crop rather than inside the whole hero. Measured across 320x568, 360x640,
     375x667, 390x844, 414x896 and 430x932, the packs start at 59% of the hero
     every time, so the copy gets the top 59% and centres in it. That is one
     rule instead of a padding value per device, and it lands within a few
     pixels of the ideal lead-in at all six. */
  @media screen and (max-width: 749px) {
    .mello-hero { align-items: flex-start; }

    .mello-hero__inner {
      display: flex;
      align-items: center;
      min-height: 53vh;
      padding-block: var(--mello-space-md);
    }
  }

  /* Short phones, last in the file so it actually wins: an earlier copy of
     this block lost to the base rules on source order and changed nothing.
     Height is the constraint rather than width. At 320x568 the hero is 511px,
     the packs start around 55% of it, and the copy stack was finishing at 74%,
     which put the guarantee line on them at 1.56:1. Trimming the display, the
     supporting sizes and the gaps brings the stack back inside the clear top.
     Phones at 844 and taller keep the 40 to 64 range untouched. */
  @media screen and (max-height: 700px) and (max-width: 749px) {
    .mello-hero__inner { padding-block: var(--mello-space-sm); }

    .mello-hero .mello-hero__headline {
      font-size: clamp(2.8rem, 1.2rem + 4.6vw, 3.6rem);
      line-height: 1.06;
    }

    .mello-hero .mello-hero__subline {
      font-size: var(--mello-size-small);
      line-height: 1.45;
    }

    .mello-hero .mello-hero__kicker { font-size: var(--mello-size-xsmall); }

    .mello-hero .mello-hero__rating {
      margin-top: var(--mello-space-2xs);
      font-size: var(--mello-size-xsmall);
    }
  }
/* END_SECTION:mello-hero */

/* START_SECTION:mello-ingredients (INDEX:44) */
.mello-ing__tabs { display: none; }
  .mello-ing__accordion { display: block; }

  @media screen and (min-width: 750px) {
    .mello-ing__tabs {
      display: grid;
      grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr);
      gap: var(--mello-space-2xl);
      align-items: start;
    }

    /* Two classes, again: .mello-section-head sets display:flex from
       mello-tokens.css, which the bundler emits AFTER this stylesheet, so a
       single class here loses and the heading rendered twice. */
    .mello-ing .mello-ing__accordion,
    .mello-ing .mello-ing__head-mobile { display: none; }
  }

  .mello-ing__intro { margin-bottom: var(--mello-space-lg); }

  .mello-ing__tablist {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--mello-ink-12);
  }

  .mello-ing__tab {
    appearance: none;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    padding: 1.4rem var(--mello-space-md);
    text-align: left;
    font-family: var(--mello-font-body);
    font-size: var(--mello-size-body);
    font-weight: 500;
    color: var(--mello-ink-muted);
    cursor: pointer;
    transition: color var(--mello-duration) var(--mello-ease),
      border-color var(--mello-duration) var(--mello-ease);
  }

  .mello-ing__tab:hover { color: var(--mello-ink); }

  .mello-ing__tab[aria-selected='true'] {
    color: var(--mello-ink);
    font-weight: 600;
    border-left-color: var(--mello-ink);
  }

  .mello-ing__panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--mello-space-xl);
    align-items: center;
  }

  .mello-ing__panel[hidden] { display: none; }

  .mello-ing__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mello-space-sm);
  }

  .mello-ing__benefit {
    margin: 0;
    font-size: var(--mello-size-body);
    font-weight: 600;
    color: var(--mello-sage-text);
  }

  .mello-ing__description {
    color: var(--mello-ink-70);
    font-size: var(--mello-size-body);
    line-height: var(--mello-leading-body);
  }

  .mello-ing__description > p:first-child { margin-top: 0; }
  .mello-ing__description > p:last-child { margin-bottom: 0; }

  .mello-ing__study { margin-top: var(--mello-space-2xs); }

  .mello-ing__acc-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mello-space-sm);
  }

  .mello-ing__acc-media {
    width: 100%;
    max-width: 28rem;
  }
/* END_SECTION:mello-ingredients */

/* START_SECTION:mello-journal (INDEX:45) */
.mello-journal__cell { display: flex; position: relative; }
  .mello-journal__card { display: flex; flex-direction: column; gap: var(--mello-space-xs); width: 100%; }

  .mello-journal__link {
    display: block;
    text-decoration: none;
    color: var(--mello-ink);
  }

  .mello-journal__media {
    border: var(--mello-hairline);
    margin-bottom: var(--mello-space-md);
  }

  .mello-journal__title {
    font-family: var(--mello-font-display);
    font-size: var(--mello-size-card-title);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
  }

  .mello-journal__date {
    margin: 0;
    font-size: var(--mello-size-xsmall);
    color: var(--mello-ink-muted);
  }

  .mello-journal__excerpt {
    margin: 0;
    font-size: var(--mello-size-small);
    line-height: 1.6;
    color: var(--mello-ink-70);
  }
/* END_SECTION:mello-journal */

/* START_SECTION:mello-newsletter (INDEX:46) */
.mello-nl__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mello-space-sm);
  }

  .mello-nl__heading { margin: 0; }

  .mello-nl__pitch {
    margin: 0;
    max-width: 46rem;
    font-size: var(--mello-size-body);
    line-height: var(--mello-leading-body);
    color: var(--mello-ink-70);
  }

  .mello-nl__form {
    width: 100%;
    max-width: 48rem;
    margin: var(--mello-space-sm) 0 0;
  }

  /* One line on desktop, stacked on mobile. */
  .mello-nl__field {
    display: flex;
    flex-direction: column;
    gap: var(--mello-space-xs);
  }

  @media screen and (min-width: 750px) {
    .mello-nl__field { flex-direction: row; }
    .mello-nl__submit { flex: 0 0 auto; }
  }

  .mello-nl__input {
    flex: 1 1 auto;
    min-height: 5.2rem;
    padding: 1.2rem 2rem;
    border-radius: var(--mello-radius-pill);
    border: 1.5px solid var(--mello-ink-20);
    background-color: var(--mello-bone);
    color: var(--mello-ink);
    font-family: var(--mello-font-body);
    font-size: var(--mello-size-body);
  }

  .mello-nl__input::placeholder { color: var(--mello-ink-muted); }

  .mello-nl__input:focus-visible {
    outline: 2px solid var(--mello-espresso);
    outline-offset: 2px;
    border-color: var(--mello-espresso);
  }

  .mello-nl__input[aria-invalid='true'] { border-color: #96331f; }

  .mello-nl__error,
  .mello-nl__success {
    margin: var(--mello-space-xs) 0 0;
    font-size: var(--mello-size-small);
  }

  .mello-nl__error { color: #96331f; }
  .mello-nl__success { color: var(--mello-sage-text); font-weight: 600; }

  .mello-nl__smallprint {
    margin: 0;
    font-size: var(--mello-size-xsmall);
    color: var(--mello-ink-muted);
    max-width: 46rem;
  }
/* END_SECTION:mello-newsletter */

/* START_SECTION:mello-product-grid (INDEX:48) */
.mello-band__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mello-space-md);
    margin-bottom: var(--mello-space-xl);
  }

  /* The heading column matches the hero's copy measure, so the two stack up
     on the same left edge and the same reading width. */
  .mello-band__text { max-width: 64rem; }

  .mello-band__intro {
    margin-top: var(--mello-space-sm);
    color: var(--mello-ink-muted);
    font-size: var(--mello-size-body);
    line-height: var(--mello-leading-body);
  }

  .mello-band__intro > p:first-child { margin-top: 0; }
  .mello-band__intro > p:last-child { margin-bottom: 0; }

  .mello-arrows.mello-band__arrows { display: none; }

  @media screen and (min-width: 990px) {
    .mello-arrows.mello-band__arrows {
      display: flex;
      margin-top: var(--mello-space-lg);
    }
  }

  /* Left edge lines up with the container; the right edge runs off so the
     next card peeks and the row reads as scrollable without any hint text.

     Two classes throughout: Shopify emits the bundled section stylesheet
     BEFORE the linked theme stylesheets, so a single-class rule here loses to
     .mello-scroller in mello-tokens.css. That is what was silently pinning the
     gap to 20px.

     scroll-padding matters as much as padding: with scroll-snap-type the
     snapport is the padding box, so without it the first card snaps flush to
     the viewport edge and cancels the inset entirely. */
  .mello-band__track.mello-scroller {
    --band-inset: var(--mello-gutter);
    margin: 0;
    list-style: none;
    gap: 3.2rem;
    padding-inline: var(--band-inset);
    scroll-padding-inline: var(--band-inset);
  }

  @media screen and (min-width: 750px) {
    .mello-band__track.mello-scroller { gap: 4rem; }
  }

  @media screen and (min-width: 1360px) {
    .mello-band__track.mello-scroller {
      --band-inset: max(var(--mello-gutter), calc((100vw - var(--mello-page-width)) / 2 + var(--mello-gutter)));
    }
  }

  .mello-band__cell {
    display: flex;
    /* 1.15 up on mobile so the next card is visibly cut, not merely implied. */
    width: calc(74vw - var(--mello-gutter));
  }

  @media screen and (min-width: 750px) {
    .mello-band__cell { width: 30rem; }
  }

  @media screen and (min-width: 990px) {
    .mello-band__cell {
      width: min(34rem, calc((var(--mello-page-width) - var(--mello-gutter) * 2 - 4rem * 3) / 3.4));
    }
  }

  .mello-band__cell > * { width: 100%; }

  .mello-band__all { flex: 0 0 auto; }
/* END_SECTION:mello-product-grid */

/* START_SECTION:mello-product (INDEX:49) */
.mello-pdp {
    display: grid;
    gap: var(--mello-space-xl);
    align-items: start;
  }

  @media screen and (min-width: 990px) {
    /* The reference gives the buy box the larger half, not the gallery. With
       perks, pack tiles and five accordions stacked in it, the buy box is the
       denser column and reads badly when it is the narrower one. */
    .mello-pdp {
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: var(--mello-space-2xl);
    }

    /* The gallery is the sales deck, so it stays with the reader while the
       buy box scrolls. */
    .mello-pdp__gallery { position: sticky; top: 10rem; }
  }

  /* Gallery ---------------------------------------------------------------
     A square stage with the image contained rather than cropped: the media mix
     portrait pack shots with landscape lifestyle shots, and cover would cut the
     top off one or the sides off the other. */
  /* A grid item defaults to min-width:auto, so it sizes to its content. The
     thumbnail strip is wider than a phone, so without this the whole page
     scrolls sideways instead of the strip scrolling inside itself. */
  .mello-pdp__gallery,
  .mello-pdp__buybox { min-width: 0; }

  .mello-gallery { display: block; min-width: 0; }

  /* Two classes, and for the same reason as the object-fit rule above: a
     single class loses to mello-tokens.css both on specificity and on order.
     The packshots are cut out now, so the stage carries no tint of its own and
     the pouch reads as sitting on the page rather than in a tinted box. */
  .mello-gallery .mello-gallery__stage {
    aspect-ratio: 1 / 1;
    background-color: transparent;
    border-radius: var(--mello-radius-card);
    overflow: hidden;
  }

  /* Two classes deliberately. mello-tokens.css carries
     `.mello-media > img { object-fit: cover }` at specificity (0,1,1), and a
     section stylesheet is emitted before the linked theme stylesheets, so a
     single class here loses twice over. It did: the stage was running cover
     and slicing a third off a 2:3 packshot in a 1:1 box. */
  .mello-gallery__stage > .mello-gallery__main {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity var(--mello-duration) var(--mello-ease);
  }

  /* Only ever applied when a frame is still arriving after 120ms, so a
     warm cache swaps with no visible state at all. */
  .mello-gallery.is-loading .mello-gallery__main { opacity: 0.55; }

  /* A vertical clip in a square stage: contain, on a soft ground so the
     pillars read as deliberate rather than as a broken layout. */
  .mello-gallery__stage > .mello-gallery__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background-color: var(--mello-mist);
  }

  .mello-gallery__stage > .mello-gallery__video[hidden] { display: none; }
  .mello-gallery.is-video .mello-gallery__main { display: none; }

  .mello-gallery__thumb--video { position: relative; }

  .mello-gallery__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--mello-radius-pill);
    background-color: rgba(34, 27, 20, 0.55);
    pointer-events: none;
  }

  .mello-gallery__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.8rem;
    border-color: transparent transparent transparent var(--mello-bone);
  }

  @media (prefers-reduced-motion: reduce) {
    .mello-gallery__main { transition: none; }
  }

  .mello-gallery__thumbs {
    display: flex;
    gap: var(--mello-space-xs);
    margin-top: var(--mello-space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
  }

  .mello-gallery__thumbs::-webkit-scrollbar { display: none; }

  .mello-gallery__thumb {
    flex: 0 0 auto;
    width: 8rem;
    height: 8rem;
    padding: 0;
    border: 1.5px solid var(--mello-ink-12);
    border-radius: var(--mello-radius-sm);
    background-color: transparent;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--mello-duration) var(--mello-ease);
  }

  .mello-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .mello-gallery__thumb[hidden] { display: none; }

  .mello-gallery__thumb:hover { border-color: var(--mello-ink-20); }
  .mello-gallery__thumb.is-active { border-color: var(--mello-espresso); border-width: 2px; }

  .mello-gallery__thumb:focus-visible {
    outline: 2px solid var(--mello-espresso);
    outline-offset: 2px;
  }

  .mello-pdp__gallery-empty { width: 100%; }

  .mello-pdp__buybox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mello-space-md);
  }

  .mello-pdp__rating { text-decoration: none; }

  .mello-pdp__title { margin: 0; }

  .mello-pdp__price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--mello-space-xs);
  }

  .mello-pdp__price {
    font-family: var(--mello-font-display);
    font-size: var(--mello-size-h3);
    font-weight: 500;
  }

  .mello-pdp__compare {
    font-size: var(--mello-size-body);
    color: var(--mello-ink-muted);
  }

  .mello-per-serve {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    font-size: var(--mello-size-small);
    color: var(--mello-ink-muted);
  }

  .mello-per-serve__count {
    font-weight: 600;
    color: var(--mello-ink);
  }

  /* The unit economics are the number that closes a consumable, so they get
     the accent rather than the muted treatment. */
  .mello-per-serve__rate { color: var(--mello-sage-text); font-weight: 600; }

  .mello-per-serve__icon { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }

  .mello-pdp__benefit {
    margin: 0;
    font-size: var(--mello-size-body);
    line-height: var(--mello-leading-body);
    color: var(--mello-ink-70);
    max-width: 46rem;
  }

  /* Perks ----------------------------------------------------------------- */

  /* Stacked rows rather than an inline strip, following the reference. Three
     perks read as three promises when they each own a line; inline they read
     as one blur of small print. */
  .mello-pdp__perks {
    display: flex;
    flex-direction: column;
    gap: var(--mello-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  /* Filled, not outlined: the two promises are the reason to trust the
     button below them, so they get the pack's soft tint (sage on a page
     without a tint) and a solid check mark in the deep tint. */
  .mello-pdp__perk {
    display: flex;
    align-items: center;
    gap: var(--mello-space-sm);
    padding: 1.2rem 1.6rem;
    border: 1px solid var(--pdp-tint-line, var(--mello-sage-30));
    border-radius: var(--mello-radius-pill);
    background-color: var(--pdp-tint-soft, var(--mello-sage-12));
    color: var(--mello-ink);
    font-size: var(--mello-size-small);
    font-weight: 600;
  }

  .mello-pdp__perk-icon { width: 24px; height: 24px; flex: 0 0 auto; }
  .mello-pdp__perk-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .mello-pdp__perk-icon--check { width: 20px; height: 20px; color: var(--pdp-tint-deep, var(--mello-sage-text)); }
  .mello-pdp__perk-icon--check svg { display: block; width: 100%; height: 100%; }

  /* Pack tiles ------------------------------------------------------------ */

  .mello-pdp__form-wrap,
  .mello-pdp__form { width: 100%; display: block; margin: 0; }

  .mello-packs { display: block; width: 100%; }

  .mello-packs__set { border: none; margin: 0; padding: 0; }

  .mello-packs__legend {
    padding: 0 0 var(--mello-space-xs);
    font-size: var(--mello-size-small);
    font-weight: 600;
  }

  .mello-packs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--mello-space-xs);
  }

  .mello-packs__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: var(--mello-space-sm);
    border: 1.5px solid var(--mello-ink-12);
    border-radius: var(--mello-radius-card);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--mello-duration) var(--mello-ease),
      background-color var(--mello-duration) var(--mello-ease);
  }

  .mello-packs__tile:hover { border-color: var(--mello-ink-20); }

  .mello-packs__tile.is-selected {
    border-color: var(--mello-espresso);
    background-color: var(--mello-mist);
  }

  .mello-packs__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }

  .mello-packs__input:focus-visible + .mello-packs__thumb {
    outline: 2px solid var(--mello-espresso);
    outline-offset: 2px;
  }

  .mello-packs__input:disabled ~ * { opacity: 0.4; }

  .mello-packs__tile { min-height: 8rem; justify-content: center; }

  /* No panel behind the cut-out and no cropping: the two and three pack
     shots are wider than they are tall, and cover was taking the tops off
     the pouches. The thumb is a wide box the cut-out sits inside. */
  .mello-packs__thumb {
    width: 100%;
    max-width: 9.6rem;
    height: 6.4rem;
    display: block;
  }

  .mello-packs__thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }

  .mello-packs__label {
    font-size: var(--mello-size-xsmall);
    font-weight: 600;
  }

  /* Straddles the tile's lower edge so the saving reads as a label on the
     pack rather than another line of text inside it. */
  .mello-packs__save {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    font-size: 1.1rem;
    padding: 0.3rem 0.8rem;
    white-space: nowrap;
  }

  .mello-packs__grid { padding-bottom: 1.2rem; }

  .mello-packs__serve {
    font-size: 1.1rem;
    color: var(--mello-ink-muted);
  }

  /* Sits on the top edge the way the saving sits on the bottom one. */
  .mello-packs__popular {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    padding: 0.25rem 0.8rem;
    border-radius: var(--mello-radius-pill);
    background-color: var(--mello-espresso);
    color: var(--mello-bone);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mello-packs__grid { padding-top: 0.8rem; }

  /* Guarantee, under the button ---------------------------------------- */

  .mello-pdp__guarantee {
    display: flex;
    align-items: center;
    gap: var(--mello-space-sm);
    width: 100%;
    margin-top: var(--mello-space-sm);
    padding: var(--mello-space-sm) var(--mello-space-md);
    border: 1px solid var(--pdp-tint-line, var(--mello-sage-30));
    border-radius: var(--mello-radius-card);
    background-color: var(--pdp-tint-soft, var(--mello-sage-12));
  }

  .mello-pdp__guarantee-icon {
    flex: 0 0 auto;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--mello-sage-text);
  }

  .mello-pdp__guarantee-icon svg { display: block; width: 100%; height: 100%; }

  .mello-pdp__guarantee-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--mello-size-small);
    line-height: 1.35;
  }

  .mello-pdp__guarantee-text strong { font-weight: 600; }
  .mello-pdp__guarantee-text span { color: var(--mello-ink-muted); font-size: var(--mello-size-xsmall); }

  /* The other blend ------------------------------------------------------
     A grid, not flex: mello-components.css gives every mello-quick-add
     width: 100% for the product cards, and inside a flex row that swallowed
     the text column. Explicit columns make the button take only its own
     width whatever the element's default. */

  .mello-pair {
    width: 100%;
    margin-top: var(--mello-space-md);
  }

  .mello-pair__heading {
    margin: 0 0 var(--mello-space-xs);
    font-size: var(--mello-size-xsmall);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mello-ink-muted);
  }

  .mello-pair__card {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mello-space-sm) var(--mello-space-md);
    width: 100%;
    padding: var(--mello-space-sm) var(--mello-space-md) var(--mello-space-sm) var(--mello-space-sm);
    border: var(--mello-hairline);
    border-radius: var(--mello-radius-card);
    background-color: var(--mello-mist);
    box-sizing: border-box;
  }

  .mello-pair__thumb {
    display: block;
    width: 7.2rem;
    height: 7.2rem;
    border-radius: var(--mello-radius-sm);
    overflow: hidden;
    background-color: var(--mello-bone);
  }

  .mello-pair__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

  .mello-pair__body { min-width: 0; }

  .mello-pair__title {
    display: block;
    font-size: var(--mello-size-body);
    font-weight: 600;
    line-height: 1.3;
    color: var(--mello-ink);
    text-decoration: none;
  }

  .mello-pair__title:hover { text-decoration: underline; }

  .mello-pair__note {
    margin: 0.2rem 0 0;
    font-size: var(--mello-size-xsmall);
    line-height: 1.4;
    color: var(--mello-ink-muted);
  }

  .mello-pair__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0 0;
    font-size: var(--mello-size-small);
  }

  .mello-pair__price { font-weight: 600; }

  .mello-pair__add,
  .mello-pair .mello-pair__add {
    width: auto;
    margin: 0;
    justify-self: end;
  }

  .mello-pair__form { margin: 0; }
  .mello-pair__btn { white-space: nowrap; }
  .mello-pair__btn.is-loading > span:first-child { opacity: 0.6; }

  .mello-pair__error {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--mello-size-xsmall);
    color: var(--mello-error, #b3261e);
  }

  .mello-pair__error[hidden] { display: none; }

  @media screen and (max-width: 479px) {
    .mello-pair__card { grid-template-columns: 6.4rem minmax(0, 1fr); }
    .mello-pair__thumb { width: 6.4rem; height: 6.4rem; }
    .mello-pair__add,
    .mello-pair .mello-pair__add { grid-column: 1 / -1; justify-self: stretch; }
    .mello-pair__btn { width: 100%; }
  }

  /* Product tint --------------------------------------------------------
     Each product page borrows one colour from its own pack so the page
     belongs to the pouch: selected tile, saving chips, the popular ribbon
     and the star fill. The add to cart stays terracotta on both, so it is
     still the only thing on the page in that colour. */
  .mello-pdp--tint-coffee { --pdp-tint-deep: #8a6a2b; --pdp-tint-soft: #f4ead3; --pdp-tint-line: #e3d2a8; }
  .mello-pdp--tint-matcha { --pdp-tint-deep: #4f6b16; --pdp-tint-soft: #ebf3d2; --pdp-tint-line: #cfe0a3; }

  .mello-pdp[class*='mello-pdp--tint-'] .mello-packs__tile.is-selected {
    border-color: var(--pdp-tint-deep);
    background-color: var(--pdp-tint-soft);
  }

  .mello-pdp[class*='mello-pdp--tint-'] .mello-packs__popular { background-color: var(--pdp-tint-deep); }

  .mello-pdp[class*='mello-pdp--tint-'] .mello-chip--sage {
    background-color: var(--pdp-tint-soft);
    color: var(--pdp-tint-deep);
  }

  .mello-pdp[class*='mello-pdp--tint-'] .mello-stars__fill { color: var(--pdp-tint-deep); }
  .mello-pdp[class*='mello-pdp--tint-'] .mello-pdp__guarantee-icon { color: var(--pdp-tint-deep); }

  /* Sticky add to cart, mobile only ------------------------------------- */

  .mello-pdp__sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background-color: var(--mello-bone);
    border-top: var(--mello-hairline);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform var(--mello-duration) var(--mello-ease);
  }

  .mello-pdp__sticky.is-visible { transform: translateY(0); }
  .mello-pdp__sticky[hidden] { display: none; }

  .mello-pdp__sticky-inner {
    display: flex;
    align-items: center;
    gap: var(--mello-space-sm);
    padding-top: var(--mello-space-xs);
    padding-bottom: var(--mello-space-xs);
  }

  .mello-pdp__sticky-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  .mello-pdp__sticky-title {
    font-size: var(--mello-size-xsmall);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mello-pdp__sticky-price {
    font-family: var(--mello-font-display);
    font-size: var(--mello-size-body);
    font-weight: 600;
  }

  .mello-pdp__sticky-btn { flex: 0 0 auto; min-height: 4.4rem; padding-inline: 2.4rem; }

  @media screen and (min-width: 990px) {
    .mello-pdp__sticky { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mello-pdp__sticky { transition: none; }
  }

  /* Subscribe and save ----------------------------------------------------
     Two stacked cards rather than a segmented control. The subscription is the
     offer, so it gets a banner, the price comparison and the reassurance list;
     the one-time option stays deliberately plain beneath it. */

  .mello-purchase__label {
    margin: var(--mello-space-md) 0 var(--mello-space-xs);
    font-size: var(--mello-size-small);
    font-weight: 600;
    color: var(--mello-ink);
  }

  .mello-purchase { display: block; width: 100%; }

  .mello-purchase__set {
    display: flex;
    flex-direction: column;
    gap: var(--mello-space-xs);
    border: none;
    margin: 0;
    padding: 0;
  }

  .mello-purchase__card {
    position: relative;
    border: 1.5px solid var(--mello-ink-12);
    border-radius: var(--mello-radius-card);
    background-color: var(--mello-bone);
    overflow: hidden;
    transition: border-color var(--mello-duration) var(--mello-ease);
  }

  .mello-purchase__card.is-selected { border-color: var(--mello-espresso); }

  /* The banner is part of the card's edge, so it spans the full width and the
     card clips it rather than the other way round. */
  .mello-purchase__banner {
    display: block;
    padding: 0.8rem var(--mello-space-md);
    background-color: var(--mello-espresso);
    color: var(--mello-bone);
    font-size: var(--mello-size-xsmall);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.01em;
  }

  .mello-purchase__body {
    display: block;
    padding: var(--mello-space-md);
    padding-left: 4.8rem;
    cursor: pointer;
  }

  .mello-purchase__body input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }

  .mello-purchase__radio {
    position: absolute;
    left: var(--mello-space-md);
    width: 2rem;
    height: 2rem;
    margin-top: 0.2rem;
    border-radius: 50%;
    border: 1.5px solid var(--mello-ink-20);
    background-color: var(--mello-bone);
  }

  .mello-purchase__card.is-selected .mello-purchase__radio {
    border-color: var(--mello-espresso);
    border-width: 6px;
  }

  .mello-purchase__body input:focus-visible + .mello-purchase__radio {
    outline: 2px solid var(--mello-espresso);
    outline-offset: 2px;
  }

  .mello-purchase__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mello-space-sm);
    flex-wrap: wrap;
  }

  .mello-purchase__row--price { margin-top: var(--mello-space-2xs); }

  .mello-purchase__title {
    font-size: var(--mello-size-body);
    font-weight: 700;
    color: var(--mello-ink);
  }

  .mello-purchase__cadence {
    font-size: var(--mello-size-xsmall);
    color: var(--mello-ink-muted);
  }

  .mello-purchase__prices {
    display: flex;
    align-items: baseline;
    gap: var(--mello-space-xs);
  }

  .mello-purchase__now {
    font-family: var(--mello-font-display);
    font-size: var(--mello-size-h3);
    font-weight: 500;
    color: var(--mello-ink);
  }

  .mello-purchase__now--plain { font-size: var(--mello-size-body); }

  .mello-purchase__was {
    font-size: var(--mello-size-small);
    color: var(--mello-ink-muted);
  }

  .mello-purchase__unit {
    font-size: var(--mello-size-small);
    font-weight: 600;
    color: var(--mello-sage-text);
  }

  .mello-purchase__perks {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: var(--mello-space-sm);
  }

  .mello-purchase__perk {
    display: flex;
    align-items: center;
    gap: var(--mello-space-xs);
    font-size: var(--mello-size-small);
    font-weight: 600;
    color: var(--mello-ink);
  }

  .mello-purchase__perk svg {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    color: var(--mello-sage-text);
  }

  .mello-purchase__plans { display: block; margin-top: var(--mello-space-sm); }

  .mello-purchase__plan-label {
    display: block;
    margin-bottom: var(--mello-space-2xs);
    font-size: var(--mello-size-xsmall);
    font-weight: 600;
  }

  .mello-purchase__select {
    width: 100%;
    min-height: 4.8rem;
    padding: 0 1.6rem;
    border-radius: var(--mello-radius-pill);
    border: 1.5px solid var(--mello-ink-20);
    background-color: var(--mello-bone);
    font-family: var(--mello-font-body);
    font-size: var(--mello-size-body);
    color: var(--mello-ink);
  }

  /* Quantity and CTA ------------------------------------------------------ */

  .mello-pdp__cta-row {
    display: flex;
    gap: var(--mello-space-xs);
    width: 100%;
    margin-top: var(--mello-space-md);
  }

  /* Takes the rest of the row rather than asking for 100% of it and being
     shrunk back, which is what left it 92px wide. */
  .mello-pdp__add {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .mello-qty {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1.5px solid var(--mello-ink-20);
    border-radius: var(--mello-radius-pill);
    overflow: hidden;
  }

  .mello-qty__btn {
    flex: 0 0 auto;
    width: 4.6rem;
    height: 5.8rem;
    border: none;
    background: none;
    color: var(--mello-ink);
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
  }

  .mello-qty__input {
    /* min-width:auto on a flex item resolves to a number input's intrinsic
       width, which is far wider than 4rem. Without this the stepper swells and
       shoulders the add-to-cart button off the side of a phone. */
    flex: 0 0 4rem;
    min-width: 0;
    width: 4rem;
    height: 5.8rem;
    border: none;
    background: none;
    text-align: center;
    font-family: var(--mello-font-body);
    font-size: var(--mello-size-body);
    color: var(--mello-ink);
    -moz-appearance: textfield;
  }

  .mello-qty__input::-webkit-outer-spin-button,
  .mello-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .mello-pdp__error {
    margin: var(--mello-space-xs) 0 0;
    font-size: var(--mello-size-small);
    color: #96331f;
  }

  .mello-pdp__error[hidden] { display: none; }

  /* Dynamic checkout sits below and quieter than the primary action. */
  .mello-pdp__dynamic { margin-top: var(--mello-space-xs); width: 100%; }
  .mello-pdp__dynamic .shopify-payment-button__button {
    border-radius: var(--mello-radius-pill);
    font-family: var(--mello-font-body);
  }

  .mello-pdp__accordions { width: 100%; margin-top: var(--mello-space-sm); }

  .mello-pdp__acc-icon { width: 20px; height: 20px; flex: 0 0 auto; }
  .mello-pdp__acc-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

  .mello-pdp__accordions img { max-width: 100%; height: auto; border-radius: var(--mello-radius-sm); }
/* END_SECTION:mello-product */

/* START_SECTION:mello-recipes (INDEX:50) */
.mello-arrows.mello-recipes__arrows { display: none; }

  @media screen and (min-width: 990px) {
    .mello-arrows.mello-recipes__arrows {
      display: flex;
      margin-top: var(--mello-space-lg);
    }
  }

  .mello-recipes__track {
    margin: 0;
    list-style: none;
    padding-inline: var(--mello-gutter);
  }

  @media screen and (min-width: 1360px) {
    .mello-recipes__track {
      padding-inline: max(var(--mello-gutter), calc((100vw - var(--mello-page-width)) / 2 + var(--mello-gutter)));
    }
  }

  .mello-recipes__cell { width: 22rem; }

  @media screen and (min-width: 750px) {
    .mello-recipes__cell { width: 28rem; }
  }

  .mello-recipes__card { position: relative; }

  .mello-recipes__link {
    display: block;
    text-decoration: none;
    color: var(--mello-ink);
  }

  .mello-recipes__media {
    border: var(--mello-hairline);
    margin-bottom: var(--mello-space-sm);
  }

  .mello-recipes__tag { margin-bottom: var(--mello-space-2xs); }

  .mello-recipes__title {
    font-family: var(--mello-font-display);
    font-size: var(--mello-size-card-title);
    font-weight: 500;
    line-height: 1.2;
    margin: 0.4rem 0 0;
  }
/* END_SECTION:mello-recipes */

/* START_SECTION:mello-research-nav (INDEX:51) */
.mello-rnav .mello-rnav__list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.mello-rnav .mello-rnav__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--mello-ink);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.mello-rnav .mello-rnav__card:hover {
  border-color: var(--mello-accent);
  color: var(--mello-accent);
}

.mello-rnav__name {
  font-family: var(--mello-font-display);
  font-size: 18px;
  line-height: 1.3;
}

.mello-rnav__go {
  flex: 0 0 auto;
  font-size: 18px;
}

@media screen and (min-width: 750px) {
  .mello-rnav .mello-rnav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 990px) {
  .mello-rnav .mello-rnav__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* END_SECTION:mello-research-nav */

/* START_SECTION:mello-research (INDEX:52) */
.mello-research__crumbs {
  background: var(--mello-bone);
  padding: 20px 0 0;
}

.mello-research .mello-research__crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--mello-ink-muted);
}

.mello-research .mello-research__crumb-list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--mello-ink-quiet);
}

.mello-research__crumb-list a {
  color: var(--mello-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mello-research__crumb-list a:hover {
  color: var(--mello-accent);
  border-bottom-color: currentColor;
}

.mello-research .mello-research__hero {
  padding-top: 28px;
}

.mello-research__hero-grid {
  display: grid;
  gap: 32px;
}

.mello-research__tag {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mello-sage-text);
}

.mello-research .mello-research__title {
  margin: 0;
}

.mello-research__latin {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--mello-ink-quiet);
}

.mello-research__intro {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mello-ink-muted);
}

.mello-research__intro p {
  margin: 0 0 14px;
}

.mello-research__intro p:last-child {
  margin-bottom: 0;
}

.mello-research .mello-research__figure {
  border-radius: 16px;
  overflow: hidden;
}

.mello-research .mello-research__list {
  display: grid;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.mello-research .mello-research__study {
  min-width: 0;
  padding: 26px;
}

.mello-research__kind {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mello-accent);
}

.mello-research .mello-research__study-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

.mello-research__citation {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--mello-ink-quiet);
}

.mello-research__finding {
  margin-top: 14px;
  line-height: 1.65;
  color: var(--mello-ink-muted);
}

.mello-research__finding p {
  margin: 0 0 12px;
}

.mello-research__finding p:last-child {
  margin-bottom: 0;
}

.mello-research .mello-research__cta {
  margin-top: 18px;
}

.mello-research__external {
  margin-left: 8px;
  font-size: 0.9em;
}

.mello-research__usage-inner {
  max-width: 62ch;
}

.mello-research__usage-body {
  margin-top: 16px;
  line-height: 1.65;
  color: var(--mello-ink-muted);
}

.mello-research__usage-body p {
  margin: 0 0 14px;
}

.mello-research__usage-body p:last-child {
  margin-bottom: 0;
}

.mello-research__usage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.mello-research__note {
  background: var(--mello-mist);
  padding: 28px 0;
}

.mello-research__note-inner {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mello-ink-muted);
  text-align: center;
}

.mello-research__note-inner p {
  margin: 0 0 10px;
}

.mello-research__note-inner p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .mello-research .mello-research__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 990px) {
  .mello-research__hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 56px;
  }

  .mello-research__note-inner {
    margin: 0;
    text-align: left;
  }
}
/* END_SECTION:mello-research */

/* START_SECTION:mello-results (INDEX:53) */
.mello-results__grid {
    display: grid;
    gap: var(--mello-space-xl);
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .mello-results__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--mello-space-2xl);
    }

    .mello-results__grid--right .mello-results__media { order: 2; }
  }

  .mello-results__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mello-space-md);
  }

  .mello-results__intro {
    color: var(--mello-ink-70);
    font-size: var(--mello-size-body);
    line-height: var(--mello-leading-body);
    max-width: 46rem;
  }

  .mello-results__intro > p:first-child { margin-top: 0; }
  .mello-results__intro > p:last-child { margin-bottom: 0; }

  .mello-results__stats {
    width: 100%;
    margin: 0;
    border-top: var(--mello-hairline);
  }

  .mello-results__stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--mello-space-md);
    padding: var(--mello-space-md) 0 var(--mello-space-sm);
  }

  .mello-results__text { display: block; }

  .mello-results__bar {
    display: block;
    height: 3px;
    margin-top: var(--mello-space-sm);
    border-radius: var(--mello-radius-pill);
    background-color: var(--mello-ink-12);
    overflow: hidden;
  }

  .mello-results__bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--mello-radius-pill);
    background-color: var(--mello-sage);
  }

  .mello-results__figure {
    font-family: var(--mello-font-display);
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1;
    /* The digits are already in the DOM before the count runs, and this
       reserves the widest plausible width so the row cannot jump. */
    min-width: 9rem;
    font-variant-numeric: tabular-nums;
  }

  @media screen and (min-width: 750px) {
    .mello-results__figure { font-size: 4.4rem; min-width: 11rem; }
  }

  .mello-results__label {
    margin: 0;
    font-size: var(--mello-size-body);
    line-height: 1.5;
    color: var(--mello-ink-70);
  }

  .mello-results__footnote {
    margin: 0;
    font-size: var(--mello-size-xsmall);
    color: var(--mello-ink-muted);
    max-width: 46rem;
  }
/* END_SECTION:mello-results */

/* START_SECTION:mello-review-wall (INDEX:54) */
.mello-rw__summary { margin: 0 0 var(--mello-space-sm); }

  .mello-arrows.mello-rw__arrows { display: none; }

  @media screen and (min-width: 990px) {
    .mello-arrows.mello-rw__arrows {
      display: flex;
      margin-top: var(--mello-space-lg);
    }
  }

  .mello-rw__track {
    margin: 0;
    list-style: none;
    padding-inline: var(--mello-gutter);
  }

  @media screen and (min-width: 1360px) {
    .mello-rw__track {
      padding-inline: max(var(--mello-gutter), calc((100vw - var(--mello-page-width)) / 2 + var(--mello-gutter)));
    }
  }

  /* Mobile shows 1.15 cards so the next one peeks and the row reads as
     scrollable. Desktop shows three with the fourth peeking at the edge. */
  .mello-rw__cell { width: calc(87vw - var(--mello-gutter)); }

  @media screen and (min-width: 750px) {
    .mello-rw__cell { width: 34rem; }
  }

  @media screen and (min-width: 990px) {
    .mello-rw__cell { width: min(38rem, calc((var(--mello-page-width) - var(--mello-gutter) * 2 - var(--mello-space-md) * 3) / 3.2)); }
  }

  .mello-rw__card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .mello-rw__photo { border-radius: 0; }

  .mello-rw__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mello-space-xs);
    padding: var(--mello-space-md);
  }

  .mello-rw__title {
    margin: 0;
    font-size: var(--mello-size-body);
    font-weight: 600;
  }

  .mello-rw__text {
    margin: 0;
    font-size: var(--mello-size-small);
    line-height: 1.6;
    color: var(--mello-ink-70);
  }

  .mello-rw__name {
    margin: var(--mello-space-2xs) 0 0;
    display: flex;
    align-items: center;
    gap: var(--mello-space-xs);
    font-size: var(--mello-size-xsmall);
    font-weight: 600;
  }

  .mello-rw__verified { font-weight: 500; }
/* END_SECTION:mello-review-wall */

/* START_SECTION:mello-stat-chips (INDEX:55) */
.mello-section.mello-chips { padding-block: var(--mello-space-lg); }

  .mello-chips__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mello-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Three facts separated by hairlines rather than boxed individually, so the
     band reads as one statement. Follows the reference. */
  .mello-chips__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: var(--mello-space-md) var(--mello-space-xs);
    text-align: center;
  }

  .mello-chips__item + .mello-chips__item {
    border-left: var(--mello-hairline);
  }

  .mello-chips__value {
    font-family: var(--mello-font-display);
    font-size: var(--mello-size-h3);
    font-weight: 500;
    line-height: 1;
  }

  .mello-chips__label {
    font-size: var(--mello-size-xsmall);
    color: var(--mello-ink-70);
  }

  /* Filled tiles: each fact on its own soft card, coloured from the pack
     the page belongs to (sage when no tint is chosen), the figure in the
     deep tint so the number is the thing you read first. */
  .mello-chips--tint-coffee { --chips-deep: #8a6a2b; --chips-soft: #f4ead3; --chips-line: #e3d2a8; }
  .mello-chips--tint-matcha { --chips-deep: #4f6b16; --chips-soft: #ebf3d2; --chips-line: #cfe0a3; }

  .mello-chips--tiles .mello-chips__list { gap: var(--mello-space-sm); }

  .mello-chips--tiles .mello-chips__item {
    gap: 0.4rem;
    padding: var(--mello-space-md) var(--mello-space-sm);
    border: 1px solid var(--chips-line, var(--mello-sage-30));
    border-radius: var(--mello-radius-card);
    background-color: var(--chips-soft, var(--mello-sage-12));
  }

  .mello-chips--tiles .mello-chips__item + .mello-chips__item { border-left: 1px solid var(--chips-line, var(--mello-sage-30)); }

  .mello-chips--tiles .mello-chips__value { color: var(--chips-deep, var(--mello-sage-text)); }
  .mello-chips--tiles .mello-chips__label { color: var(--mello-ink); font-weight: 500; }

  @media screen and (max-width: 479px) {
    .mello-chips--tiles .mello-chips__list { gap: var(--mello-space-xs); }
    .mello-chips--tiles .mello-chips__item { padding: var(--mello-space-sm) 0.6rem; }
  }
/* END_SECTION:mello-stat-chips */

/* START_SECTION:mello-ugc-row (INDEX:56) */
/* Arrows are a desktop affordance; touch scrolls the row directly. */
  .mello-arrows.mello-ugc__nav { display: none; }

  @media screen and (min-width: 990px) {
    .mello-arrows.mello-ugc__nav {
      display: flex;
      margin-top: var(--mello-space-lg);
    }
  }

  .mello-ugc { display: block; }

  .mello-ugc__track {
    padding-inline: var(--mello-gutter);
    margin: 0;
    list-style: none;
  }

  /* Centre the row on wide screens without losing the bleed on narrow ones. */
  @media screen and (min-width: 1360px) {
    .mello-ugc__track {
      padding-inline: max(var(--mello-gutter), calc((100vw - var(--mello-page-width)) / 2 + var(--mello-gutter)));
    }
  }

  .mello-ugc__cell { width: 24rem; }

  @media screen and (min-width: 750px) {
    .mello-ugc__cell { width: 28rem; }
  }

  .mello-ugc__card { display: block; }

  .mello-ugc__media {
    position: relative;
    border: var(--mello-hairline);
    background-color: var(--mello-mist);
  }

  .mello-ugc__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mello-ugc__play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mello-bone);
  }

  .mello-ugc__glyph {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: var(--mello-radius-pill);
    background-color: rgba(34, 27, 20, 0.42);
    position: relative;
    transition: opacity var(--mello-duration) var(--mello-ease);
  }

  @supports (backdrop-filter: blur(1px)) {
    .mello-ugc__glyph {
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
  }

  .mello-ugc__glyph--play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.9rem 0 0.9rem 1.5rem;
    border-color: transparent transparent transparent currentColor;
  }

  .mello-ugc__glyph--pause::before,
  .mello-ugc__glyph--pause::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.4rem;
    height: 1.8rem;
    background-color: currentColor;
  }

  .mello-ugc__glyph--pause::before { left: 2.1rem; }
  .mello-ugc__glyph--pause::after { right: 2.1rem; }

  .mello-ugc__glyph--pause { display: none; }

  .mello-ugc__card.is-playing .mello-ugc__glyph--play { display: none; }
  .mello-ugc__card.is-playing .mello-ugc__glyph--pause { display: block; }

  /* Once it is playing the control fades back so the video is the thing. */
  .mello-ugc__card.is-playing .mello-ugc__glyph { opacity: 0; }
  .mello-ugc__card.is-playing .mello-ugc__play:hover .mello-ugc__glyph,
  .mello-ugc__card.is-playing .mello-ugc__play:focus-visible .mello-ugc__glyph { opacity: 1; }

  .mello-ugc__name {
    position: absolute;
    left: var(--mello-space-sm);
    bottom: var(--mello-space-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    border-radius: var(--mello-radius-pill);
    background-color: rgba(34, 27, 20, 0.5);
    color: var(--mello-bone);
    font-size: 1.2rem;
    font-weight: 600;
    pointer-events: none;
  }

  .mello-ugc__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background-color: var(--mello-mist);
  }

  .mello-ugc__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
/* END_SECTION:mello-ugc-row */

/* START_SECTION:mello-value-math (INDEX:57) */
.mello-vm__grid {
    display: grid;
    gap: var(--mello-space-xl);
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .mello-vm__grid {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: var(--mello-space-2xl);
    }

    .mello-vm__grid--right .mello-vm__media { order: 2; }
  }

  .mello-vm__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mello-space-md);
  }

  .mello-vm__intro { max-width: 46rem; }

  .mello-vm__ledger { width: 100%; }

  .mello-vm__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mello-space-md);
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(252, 251, 248, 0.16);
    font-size: var(--mello-size-body);
  }

  .mello-vm__item { color: var(--mello-bone-75); }

  .mello-vm__cost {
    font-family: var(--mello-font-display);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .mello-vm__row--total {
    font-weight: 500;
    border-bottom-width: 2px;
  }

  .mello-vm__row--total .mello-vm__item { color: var(--mello-bone); }

  /* The contrast row: bone fill against the espresso panel. */
  .mello-vm__row--mello {
    margin-top: var(--mello-space-md);
    padding: var(--mello-space-md);
    border-bottom: none;
    border-radius: var(--mello-radius-card);
    background-color: var(--mello-bone);
    color: var(--mello-ink);
    font-size: var(--mello-size-h3);
  }

  .mello-vm__row--mello .mello-vm__item {
    color: var(--mello-ink);
    font-family: var(--mello-font-display);
    font-weight: 500;
  }

  .mello-vm__footnote {
    margin: 0;
    font-size: var(--mello-size-xsmall);
    color: var(--mello-bone-75);
    max-width: 46rem;
  }
/* END_SECTION:mello-value-math */

/* START_SECTION:mello-versus (INDEX:58) */
.mello-vs__scroll {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .mello-vs__table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    text-align: left;
  }

  .mello-vs__col {
    padding: 0 var(--mello-space-xs) var(--mello-space-md);
    text-align: center;
    vertical-align: bottom;
    font-weight: 600;
    width: 26%;
  }

  .mello-vs__pouch {
    display: block;
    width: 5.6rem;
    margin: 0 auto var(--mello-space-xs);
  }

  @media screen and (min-width: 750px) {
    .mello-vs__pouch { width: 12rem; }
    .mello-vs__col { width: 22%; }
  }

  .mello-vs__pouch img { width: 100%; height: auto; display: block; }

  .mello-vs__col-name {
    display: block;
    font-family: var(--mello-font-body);
    font-size: var(--mello-size-small);
  }

  .mello-vs__col--mello .mello-vs__col-name { color: var(--mello-ink); }

  .mello-vs__attr {
    padding: var(--mello-space-md) 0;
    font-weight: 500;
    font-size: var(--mello-size-small);
    border-top: var(--mello-hairline);
  }

  .mello-vs__cell {
    padding: var(--mello-space-md) var(--mello-space-xs);
    text-align: center;
    border-top: var(--mello-hairline);
  }

  .mello-vs__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
  }

  .mello-vs__tick svg { width: 2rem; height: 2rem; }
  .mello-vs__tick--yes { color: var(--mello-sage); }
  .mello-vs__tick--no { color: var(--mello-ink-20); }

  .mello-vs__nutrition { margin: var(--mello-space-md) 0 0; }

  .mello-vs__nutrition .mello-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--mello-font-body);
  }
/* END_SECTION:mello-versus */