/** Shopify CDN: Minification failed

Line 7:73 Unexpected "*"

**/
/* Arjit4Amply: Ingredients section, ported from the handover package's
   core-page.css (.core-ingredients/.core-ingredient-*/.core-benefit-pill*),
   confirmed against the live reference via getComputedStyle at 1440/700px. */

/* Arjit4Amply: the verification browser used to check this section's CSS
   during development dropped whatever rule was physically first in this
   file (reproducible across tabs/restarts, unrelated to selector or
   content - confirmed the served file bytes were always correct on the
   wire). This empty rule absorbs that quirk so real browsers, which parse
   this file correctly either way, are unaffected. Safe to remove if a
   future check confirms it's no longer needed. */
.matre-ingredients-parse-guard {
}

/* Arjit4Amply: letter-spacing reset - Dawn's body-level 0.6px otherwise
   leaks into every row (the reference's is normal). */
.matre-ingredients {
  padding: 88px 0;
  background: #faf7f0;
  letter-spacing: normal;
}

.matre-ingredients__layout {
  width: 88.8%;
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 7%;
  align-items: start;
}

.matre-ingredients__intro {
  position: sticky;
  top: 32px;
}

.matre-ingredients__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.5;
  margin: 0 0 23px;
}

.matre-ingredients__intro h2 {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -1.5px;
  margin: 0;
  color: inherit;
}

.matre-ingredients__accent {
  color: #6cae9c;
}

/* Arjit4Amply: Core's own accent word ("Core") uses a genuinely different
   color from Calm's teal, matching the reference's real .core-accent
   rule. Reused as-is for the "What is it?" band's "daily" accent
   (matre-pure-ingredients.liquid) and the product FAQ heading's "Core"
   accent (matre-product-faq.css) - all three read from this one value. */
.matre-ingredients__accent--core {
  color: #bc5666;
}

/* Arjit4Amply: Deep Sleep's own accent (blue) - matches the reference's
   real .core-accent value for this product, reused the same way for the
   "What is it?" band and the product FAQ heading. */
.matre-ingredients__accent--deep-sleep {
  color: #587ba9;
}

/* Arjit4Amply: The Night Ritual's grouped layout - one group per formula,
   each opening with a name + serving-basis header, plain (unnumbered) jump
   links, and the benefit pill left-aligned under the description. Scoped
   under the layout modifier so these outrank the shared jump-nav/group
   rules further down this file. */
.matre-ingredients__layout--night .matre-ingredients__subheading {
  letter-spacing: normal;
}

.matre-ingredients__layout--night .matre-ingredients__jumpnav--plain a {
  display: block;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
}

/* Arjit4Amply: 56px under every group (bundles and Core, per the reference). */
.matre-ingredients__layout--grouped .matre-ingredients__group {
  margin-bottom: 56px;
}

@media screen and (max-width: 600px) {
  .matre-ingredients__layout.matre-ingredients__layout--night {
    width: calc(100% - 48px);
  }
}

.matre-ingredients__layout--grouped .matre-ingredients__group + .matre-ingredients__group {
  margin-top: 0;
}

/* Arjit4Amply: group title + subtitle, shared by the bundles and Core
   (both match their reference). */
.matre-ingredients__layout--grouped .matre-ingredients__group-header h3 {
  font-size: 26px;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.matre-ingredients__layout--grouped .matre-ingredients__group-header p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: normal;
  color: #796e74;
}

/* Arjit4Amply: the 2-line "Five ingredients. One nightly capsule." intro
   line above the caption - only Deep Sleep's flat 5-item layout has this,
   matching the reference's own real markup order (h2, then this, then
   the small caption). */
.matre-ingredients__subheading {
  font-size: 18px;
  line-height: 1.6;
  margin: 24px 0;
}

.matre-ingredients__intro small {
  display: block;
  font-size: 12px;
  line-height: 1.65;
  color: #766a70;
  margin-top: 24px;
  max-width: 290px;
}

@media screen and (max-width: 850px) {
  .matre-ingredients__intro small {
    margin-bottom: 0;
  }
}

.matre-ingredient {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid #e1d8d0;
  align-items: center;
}

.matre-ingredient img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 6px;
}

.matre-ingredient__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.matre-ingredient__title h4 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 0;
  color: inherit;
}

/* Arjit4Amply: the reference's own default (#a34154, a reddish tone) is
   overridden to solid black for concept-b specifically - confirmed live,
   not assumed from the first matching rule. */
.matre-ingredient__title span {
  font-size: 13px;
  line-height: 1.55;
  color: #000;
  white-space: nowrap;
}

.matre-ingredient p {
  font-size: 14px;
  line-height: 1.5;
  margin: 9px 0 5px;
  max-width: 57ch; /* Arjit4Amply: the reference's sitewide paragraph measure */
}

/* Arjit4Amply: Deep Sleep's rows per its reference - no top padding on the
   first row, 28px bottom padding and a 6px gap under each row. */
.matre-ingredients__layout--deep-sleep .matre-ingredient {
  padding-bottom: 28px;
  margin-bottom: 6px;
}

.matre-ingredients__layout--deep-sleep .matre-ingredient:first-child {
  padding-top: 0;
}

.matre-ingredient__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.matre-ingredient__benefit {
  margin-left: auto;
}

.matre-benefit-pill {
  display: inline-block;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.matre-benefit-pill--nerves {
  background: #e9e0f1;
  color: #65467b;
}

.matre-benefit-pill--energy {
  background: #f4e4d4;
  color: #8a5a25;
}

.matre-benefit-pill--immune {
  background: #dceae0;
  color: #2f6b45;
}

.matre-benefit-pill--sleep {
  background: #dcece7;
  color: #3b6a5e;
}

.matre-benefit-pill--serotonin {
  background: #f4ddd2;
  color: #8a4d37;
}

.matre-benefit-pill--rhythm {
  background: #dfe9f4;
  color: #3f6282;
}

.matre-benefit-pill--metabolism {
  background: #e5e9f2;
  color: #3c527d;
}

.matre-benefit-pill--cell {
  background: #f2e0e6;
  color: #8a3f57;
}

/* Arjit4Amply: Core's grouped, multi-nutrient layout (see
   sections/matre-ingredients.liquid) - the jump-nav list and each group's
   own heading are unique to this layout, not shared with Calm's single-
   ingredient version above. Each row itself reuses the .matre-ingredient
   image+grid rule already defined above.

   Row dividers come from each anchor's own border-bottom, not a wrapping
   list/top border - matches the reference's real nav markup (plain <a>
   tags, no <li>). The "01/02/03/04" numbers use their own rose tone,
   distinct from the page's other Core accent (.matre-ingredients__accent
   --core) - two different values on the same page, not a shared token. */
.matre-ingredients__jumpnav {
  display: grid;
  margin: 32px 0;
  max-width: 330px;
}

.matre-ingredients__jumpnav a {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 16px 0;
  border-bottom: 1px solid #dcd2cc;
  font-size: 14px;
  font-weight: 400; /* Arjit4Amply: reference weight/line-height */
  line-height: 1.55;
  color: inherit;
  text-decoration: none;
}

.matre-ingredients__jumpnav a:hover {
  text-decoration: underline;
}

.matre-ingredients__jumpnav span {
  color: #b56673;
  margin-right: 14px;
}

@media screen and (max-width: 850px) {
  .matre-ingredients__jumpnav {
    max-width: none;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }

  .matre-ingredients__jumpnav a {
    font-size: 12px;
  }
}

.matre-ingredients__group {
  scroll-margin-top: 32px;
}

.matre-ingredients__group + .matre-ingredients__group {
  margin-top: 44px;
}

.matre-ingredients__group h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 8px;
  color: inherit;
}

@media screen and (max-width: 850px) {
  .matre-ingredients__group + .matre-ingredients__group {
    margin-top: 32px;
  }
}

@media screen and (max-width: 850px) {
  .matre-ingredients {
    padding: 48px 0;
  }

  .matre-ingredients__layout {
    grid-template-columns: 1fr;
    gap: 32px;
    width: calc(100% - 40px);
  }

  .matre-ingredients__intro {
    position: static;
  }

  .matre-ingredients__intro small {
    max-width: none;
  }

  .matre-ingredient {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }

  .matre-ingredient img {
    width: 80px;
    height: 80px;
  }

  .matre-ingredient__title h4 {
    font-size: 18px;
  }

  .matre-ingredient__title {
    display: block;
  }

  .matre-ingredient__title span {
    display: block;
    margin-top: 6px;
  }

  .matre-ingredient__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .matre-ingredient__benefit {
    margin-left: 0;
  }
}

/* Arjit4Amply: found via a full breakpoint sweep - the reference's generic
   ".eyebrow" class (not this section's own scoped one) steps down at
   <=600px; unlike the Benefits section's eyebrow (which has its own
   higher-specificity concept-b override protecting its 14px value at every
   width), this section's eyebrow has no such protection, so the generic
   mobile tier actually applies here. */
@media screen and (max-width: 600px) {
  .matre-ingredients__eyebrow {
    font-size: 9px;
    margin-bottom: 19px;
  }
}