/** Shopify CDN: Minification failed

Line 397:48 Unexpected "10"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:best-of-both-triad (INDEX:1) */
/* Best of both worlds (triad). Section scoped: none of these selectors are
   shared with another template, so they stay out of assets/theme.css.
   The declarations below are the resolved cascade of the two source rule
   groups (mirror index.html lines 206 to 236 and 559 to 570), flattened so the
   rendering matches the static site exactly. */
.whatis { background: #fffaf1; border-top: 1px solid rgba(31, 23, 17, .1); border-bottom: 1px solid rgba(31, 23, 17, .12); }
.whatis .section-head { margin-bottom: 30px; }
.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.triad-card { background: #fffaf1; border: 1px solid rgba(31, 23, 17, .12); border-radius: 24px; padding: clamp(18px, 2.4vw, 30px); }
.triad-card.lead-card { background: #201308; color: #fff7ea; border-color: #201308; }
.triad-tag { width: fit-content; border-radius: 999px; padding: 7px 11px; background: #f28a13; color: #201308; font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.triad-card.lead-card .triad-tag { color: #f6b46a; }
.triad-card h3 { font-size: clamp(21px, 2.3vw, 28px); margin: 10px 0 10px; }
.triad-card p { margin: 0; font-size: 15px; color: #5d4736; }
.triad-card.lead-card p { color: #ead6bf; }

/* Breakpoint order matches the source. 1100px must come before 760px. */
@media (max-width: 1100px) { .triad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .triad { grid-template-columns: 1fr; } }
/* END_SECTION:best-of-both-triad */

/* START_SECTION:compare-table (INDEX:3) */
.compare { background: #f7f1e9; border-top: 1px solid rgba(31, 23, 17, .1); }
.ctable-wrap { position: relative; }
.ctable {
  border: 1px solid rgba(31, 23, 17, .14);
  border-radius: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  background: #fffaf1;
  -webkit-overflow-scrolling: touch;
}
/* Fade hint on the right edge so a horizontally scrollable table does not
   look like the last visible column is the only one. Hidden once the
   shopper has scrolled to the end, via the .at-end class theme.js toggles. */
.ctable-wrap:not(.at-end)::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36px;
  border-radius: 0 26px 26px 0;
  background: linear-gradient(90deg, rgba(247,241,233,0), #f7f1e9);
  pointer-events: none;
}
.crow {
  display: grid;
  grid-template-columns: minmax(170px, 1.5fr) repeat(3, minmax(120px, 1fr));
  align-items: stretch;
  min-width: 620px;
}
.crow + .crow { border-top: 1px solid rgba(31, 23, 17, .1); }
.cell {
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #3a2b1e;
  border-bottom: 1px solid rgba(31, 23, 17, .1);
}
.cell.attr {
  font-weight: 800;
  color: #1f1711;
  /* Pinned so the attribute label stays visible while the shopper scrolls
     right to compare Whey and Plant, which are off-screen by default on a
     phone (the row is wider than the viewport by design). */
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fffaf1;
  box-shadow: 1px 0 0 rgba(31, 23, 17, .1);
}
.chead .cell.attr { background: #fffaf1; }
.cell.smartein { background: #201308; color: #fff7ea; justify-content: center; text-align: center; font-weight: 800; }
.cell.center { justify-content: center; text-align: center; color: #6a5240; }
.chead .cell {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  font-weight: 950;
  padding-top: 20px;
  padding-bottom: 20px;
}
.chead .cell.smartein { font-size: clamp(19px, 2.2vw, 26px); }
.chead .cell.center { color: #97826d; }
/* The colour already sits on .orange, .yes in assets/theme.css. Only the
   weight is specific to this table, so only the weight is restated. */
.yes { font-weight: 900; }
.smartein .yes { color: #ffd9a6; }
.no { color: #8a6d5a; font-weight: 900; }
.ctable-note { margin: 14px 2px 0; font-size: 13px; color: #6b5140; }
@media (max-width: 980px) {
  .ctable { overflow-x: auto !important; max-width: 100% !important; }
}
@media (max-width: 620px) {
  .crow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .cell { padding: 12px 8px; font-size: 12px; }
  .chead .cell { font-size: 14px; }
  .chead .cell.smartein { font-size: 15px; }
}
/* END_SECTION:compare-table */

/* START_SECTION:faq (INDEX:4) */
/* FAQ. Ported verbatim from the mirror inline style block (the .faq rules plus
   the 980px breakpoint lines that name .faq-wrap and .faq-intro). These rules
   are used by this section only, so they live here and not in
   assets/theme.css. */
.faq {
  background: #fffaf1;
  border-top: 1px solid rgba(31, 23, 17, .12);
}
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.faq-intro { position: sticky; top: 100px; }
.faq-cta {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(31, 23, 17, .14);
  border-radius: 22px;
  background: #f7f1e9;
}
.faq-cta img { width: 76px; height: auto; flex: 0 0 auto; }
.faq-cta b {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.faq-list { display: grid; gap: 12px; max-width: none; }
details.qa {
  border: 1px solid rgba(31, 23, 17, .14);
  border-radius: 18px;
  background: #f7f1e9;
  padding: 4px 20px;
}
details.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+";
  font-size: 26px;
  color: #e87412;
  transition: transform .25s ease;
}
details.qa[open] summary::after { transform: rotate(45deg); }
details.qa p { margin: 0 0 18px; color: #5d4736; font-size: 15px; max-width: 70ch; }

@media (max-width: 980px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
}
/* END_SECTION:faq */

/* START_SECTION:hero (INDEX:7) */
/* Hero. Verbatim from the mirror's inline style block, minus the two
   background-image declarations, which are Liquid driven and live in the
   scoped <style> tag above so the asset URLs resolve. */
.hero {
  position: relative;
  min-height: min(900px, 96svh);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: clamp(150px, 16vw, 210px) clamp(18px, 5vw, 72px) clamp(64px, 8vw, 104px);
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.hero-text {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 20px;
  align-content: center;
  max-width: 620px;
}
.hero-product { display: none; }

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 104px 18px 0;
    background: #f7f1e9;
    align-content: start;
  }
  .hero-text { max-width: none; }
  .hero-product {
    display: block;
    position: relative;
    margin: 24px -18px 0;
    aspect-ratio: 16 / 11;
    overflow: hidden;
  }
  .hero-product img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% center;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* END_SECTION:hero */

/* START_SECTION:how-its-made (INDEX:8) */
/* Fermentation / how it's made. Ported verbatim from the mirror inline style
   block so the cascade order and every override match the static site. These
   rules are section specific and are deliberately not in assets/theme.css. */
.ferment { background: #fffaf1; border-top: 1px solid rgba(31, 23, 17, .12); border-bottom: 1px solid rgba(31, 23, 17, .12); }
.ferment-anchor {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(242, 138, 19, .14);
  color: #b25c0c;
  font-size: 13px;
  font-weight: 800;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 36px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 26px 22px;
  border: 1px solid rgba(31, 23, 17, .12);
  border-radius: 24px;
  background: #f7f1e9;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #e87412;
  line-height: 1;
}
.step h3 { font-size: 26px; margin: 12px 0 8px; }
.step p { margin: 0; font-size: 14px; color: #5d4736; }
.step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: -11px;
  transform: translateY(-50%);
  color: #e87412;
  font-weight: 900;
  font-size: 20px;
  z-index: 2;
}

@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
}

/* Later block in the source, which intentionally overrides the card fill,
   the grid gap and the step heading scale. */
.ferment { border-top: 1px solid rgba(31, 23, 17, .1); }
.ferment .section-head { align-items: start; }
.ferment .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.ferment .step h3 { font-size: clamp(24px, 2.1vw, 34px); line-height: .98; }
.ferment .step p { margin-bottom: 0; }
.step { background: #fffaf1; border: 1px solid rgba(31, 23, 17, .12); border-radius: 24px; padding: clamp(18px, 2.4vw, 30px); }

@media (max-width: 1100px) {
  .ferment .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ferment .steps { grid-template-columns: 1fr; }
}
/* END_SECTION:how-its-made */

/* START_SECTION:info-split (INDEX:9) */
/* Section 2: video square left + info right */
.infosplit {
  background: #fffaf1;
  border-bottom: 1px solid rgba(31, 23, 17, .12);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
}
.infosplit .video-square {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 28px;
  overflow: hidden;
  background: #211711;
  box-shadow: 0 28px 70px rgba(61, 36, 14, .16);
}
.infosplit .video-square video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  transform: scale(1.34);
  transform-origin: center 56%;
  display: block;
}
.infosplit .info h2 { margin-top: 12px; }
.infosplit .info .lead { margin-top: 18px; font-size: clamp(16px, 1.6vw, 19px); }
.statline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin-top: 26px;
  border: 1px solid rgba(31, 23, 17, .14);
  border-radius: 16px;
  overflow: hidden;
  background: #f7f1e9;
  max-width: 560px;
}
.statline .si {
  flex: 1 1 0;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
}
.statline .si b { white-space: nowrap; }
.statline .si + .si { border-left: 1px solid rgba(31, 23, 17, .12); }
.statline .si b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 30px;
  line-height: 1;
  color: #e87412;
}
.statline .si span { font-size: 12.5px; font-weight: 800; color: #5d4736; letter-spacing: .01em; }

@media (max-width: 980px) {
  .infosplit { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .statline { max-width: 100%; }
  .statline .si { min-width: 0; padding: 12px 10px; }
  .statline .si b { font-size: 23px; }
}
@media (max-width: 980px) {
  .video-square { min-width: 0 !important; max-width: 100% !important; }
}
@media (max-width: 760px) {
  .infosplit { grid-template-columns: 1fr; }
}
/* END_SECTION:info-split */

/* START_SECTION:main-page (INDEX:20) */
/* Legal and content pages. Values taken from the shared stub sheet in
   smartein-mirror/v2/legal/*/index.html, lines 10 to 21 of each file.
   .page-shell already supplies the 76px offset for the fixed nav. */
.page-doc { padding-bottom: clamp(56px, 8vw, 96px); }
.page-doc-inner { margin: 0 auto; }
.page-doc-narrow .page-doc-inner { max-width: 760px; }
.page-doc-wide .page-doc-inner { max-width: 960px; }

.page-doc h1 { font-size: clamp(34px, 6vw, 52px); line-height: .96; max-width: none; margin: 18px 0 8px; }
.page-doc .eyebrow + h1 { margin-top: 14px; }

.page-doc-body { color: #4f3c2e; font-size: 16px; line-height: 1.65; max-width: none; }
.page-doc-body h2 { font-size: 24px; line-height: 1.05; margin: 34px 0 8px; }
.page-doc-body h3 { font-size: 19px; line-height: 1.15; margin: 26px 0 8px; }
.page-doc-body p,
.page-doc-body li { color: #4f3c2e; font-size: 16px; }
.page-doc-body table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.page-doc-body th,
.page-doc-body td { border-bottom: 1px solid rgba(31, 23, 17, .12); padding: 10px 8px; text-align: left; font-size: 15px; }

.page-note { background: #fff5e6; border: 1px solid #f3d39b; border-radius: 14px; padding: 16px 18px; color: #7a5a2e; font-size: 14px; margin: 22px 0; }
.page-note p { color: inherit; font-size: inherit; margin: 0 0 8px; }
.page-note p:last-child { margin-bottom: 0; }

.page-back { display: inline-block; margin-top: 48px; font-weight: 800; color: #c55d10; }
/* END_SECTION:main-page */

/* START_SECTION:main-product (INDEX:21) */
/* Product template type scale and section rhythm.
   Verbatim from smartein-mirror/v2/products/natural/index.html, scoped to the
   product template so it never touches the home page cascade. The mirror
   product page really does run a bigger h1 and tighter section padding than
   the home page. */
.template-product h1 { font-size: clamp(54px, 9vw, 118px); line-height: .96; max-width: 780px; }
.template-product h2 { font-size: clamp(38px, 5vw, 72px); line-height: .96; }
.template-product h3 { font-size: 28px; line-height: .96; }
.template-product .lead { font-size: clamp(17px, 1.8vw, 22px); line-height: 1.55; max-width: 680px; color: #604839; }
.template-product main section { padding: clamp(48px, 7vw, 92px) clamp(18px, 5vw, 72px); border-top: 1px solid rgba(31, 23, 17, .1); }

/* Shared product page primitives. The mirror calls these .split, .copy and
   .card. Renamed with a pdp- prefix because assets/theme.css already owns
   those names for the home page. Declarations are identical. */
.pdp-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 70px); align-items: start; }
.pdp-copy { color: #5d4736; line-height: 1.7; max-width: 72ch; }
.pdp-copy p { margin: 0 0 12px; }
.pdp-copy p:last-child { margin-bottom: 0; }
.pdp-copy h3 { margin: 18px 0 6px; }
.pdp-copy h3:first-child { margin-top: 0; }

/* Hero. The mirror nav is sticky, this theme's nav is fixed, so the hero's
   top padding carries the 76px nav height instead of the document flow.
   The selector repeats the .template-product main section prefix on purpose:
   without it the generic section padding rule above is more specific and
   would win, and the hero would slide under the fixed nav. */
.pdp-hero,
.template-product main section.pdp-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: center;
  padding: calc(76px + clamp(48px, 8vw, 96px)) clamp(18px, 5vw, 72px) clamp(48px, 8vw, 96px);
  min-height: calc(100svh - 76px);
  border-top: 0;
}
.pdp-hero-text { display: block; }
.pdp-hero-text .eyebrow { margin-bottom: 18px; }
.pdp-hero-text h1 { margin-top: 18px; }

.pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pdp-price .price-amount { font-family: "Barlow Condensed", sans-serif; font-size: 38px; line-height: 1; color: #201308; }
.pdp-price .price-compare { color: #7a6450; }
.pdp-availability { font-size: 13px; font-weight: 750; color: #b9442f; }

.pdp-variants, .pdp-qty { display: grid; gap: 8px; margin-top: 22px; max-width: 320px; }
.pdp-variants label, .pdp-qty label { font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: #604839; }
.pdp-variants select, .pdp-qty input { min-height: 50px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(31, 23, 17, .18); background: #fff9ed; color: #201308; font-weight: 750; }
.pdp-qty input { max-width: 120px; }

.pdp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pdp-actions .button[disabled] { background: #efe2d2; color: #7a604e; border-color: rgba(31, 23, 17, .14); cursor: not-allowed; }

.pdp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; max-width: 760px; }
.pdp-fact { background: #fffaf1; border: 1px solid rgba(31, 23, 17, .12); border-radius: 22px; padding: 18px; }
.pdp-fact b { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 34px; color: #f28a13; }
.pdp-fact span { font-size: 14px; color: #5d4736; }

.pdp-hero-media {
  border-radius: 32px;
  background: #efe2d2;
  padding: clamp(18px, 4vw, 48px);
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  box-shadow: 0 28px 70px rgba(61, 36, 14, .12);
}
.pdp-media-main { display: grid; place-items: center; width: 100%; }
.pdp-media-main img, .pdp-media-main svg { width: min(100%, 620px); max-height: 620px; object-fit: contain; }
.pdp-media-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pdp-media-thumbs button { width: 64px; height: 64px; padding: 4px; border-radius: 16px; border: 1px solid rgba(31, 23, 17, .14); background: #fffaf1; cursor: pointer; }
.pdp-media-thumbs button[aria-current="true"] { border-color: #f28a13; }
.pdp-media-thumbs img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 900px) {
  .pdp-hero,
  .template-product main section.pdp-hero,
  .pdp-split { grid-template-columns: 1fr; }
  .pdp-hero-media { min-height: auto; }
  .pdp-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .template-product h1 { font-size: 48px; }
  .pdp-facts { grid-template-columns: 1fr; }
  .pdp-hero,
  .template-product main section.pdp-hero { padding-top: calc(76px + 34px); }
  .pdp-price .price-amount { font-size: 32px; }
}
/* END_SECTION:main-product */

/* START_SECTION:newsletter (INDEX:25) */
/* Newsletter signup band. Ported verbatim from the mirror inline style block:
   the .newsletter border-top (index.html line 559), the two column grid and the
   .signup rules (lines 669-672), and the 900px collapse (lines 674-676).
   None of these live in assets/theme.css, so they are section scoped here. */
.newsletter {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  border-top: 1px solid rgba(31, 23, 17, .1);
}
.signup {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.signup input {
  flex: 1;
  min-width: 220px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(31, 23, 17, .2);
  background: #fff9ed;
  font-size: 16px;
}
/* The success confirmation and the error list live inside the form, which is a
   flex row, so they take a full width row under the input and the button
   instead of squeezing in beside them. */
.signup .section-copy {
  flex: 1 0 100%;
  margin: 0;
}
.signup button {
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: #201308;
  color: #fff7ea;
  border: 0;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 900px) {
  .newsletter { grid-template-columns: 1fr; }
}
/* END_SECTION:newsletter */

/* START_SECTION:product-benefits (INDEX:26) */
/* No new rules. .pdp-split and .pdp-copy are declared once in
   sections/main-product.liquid, which is always present on this template. */
/* END_SECTION:product-benefits */

/* START_SECTION:product-faq (INDEX:27) */
/* details and summary are styled once in assets/theme.css, exactly as the
   mirror declares them. Only the answer measure is set here. */
.pdp-faq details .pdp-copy { margin: 10px 0 0; font-size: 15px; max-width: 70ch; }
.pdp-faq details .pdp-copy p:last-child { margin-bottom: 0; }
/* END_SECTION:product-faq */

/* START_SECTION:product-nutrition (INDEX:29) */
/* Nutrition tables. Verbatim from the mirror's product page style block
   (smartein-theme-docs/build-notes/page-product.css, "nutrition tables"). Class names are unique to the
   product page, so nothing here is prefixed and nothing collides. */
.ntable { border: 1px solid rgba(31, 23, 17, .14); border-radius: 22px; overflow: hidden; background: #fffaf1; max-width: 680px; }
.nrow { display: grid; grid-template-columns: 2fr 1.3fr 1.3fr; border-bottom: 1px solid rgba(31, 23, 17, .09); font-size: 14px; }
.nrow:last-child { border-bottom: 0; }
.ncell { padding: 11px 16px; color: #3a2b1e; }
.nrow.nhead { background: #201308; }
.nrow.nhead .ncell { color: #fff7ea; font-weight: 900; font-size: 13px; }
.nrow.nsub .ncell:first-child { padding-left: 28px; color: #5d4736; }
.ntable-note { font-size: 12px; color: #7a6450; margin: 10px 2px 0; }
.ntables { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(18px, 3vw, 34px); margin-top: 18px; }
.nblock { min-width: 0; }
.nflavor { font-size: 22px; margin: 0 0 12px; color: #201308; }
.template-product .nflavor { font-size: 22px; }

@media (max-width: 560px) {
  .nrow { grid-template-columns: 1.8fr 1fr 1fr; }
  .ncell { padding: 9px 10px; font-size: 13px; }
}
/* END_SECTION:product-nutrition */

/* START_SECTION:product-proof (INDEX:30) */
/* Verbatim from smartein-theme-docs/build-notes/page-product.css: .proof and .proof .copy. */
.pdp-proof { background: #201308; color: #fff7ea; }
.pdp-proof .pdp-copy { color: #e4cdb6; }
/* END_SECTION:product-proof */

/* START_SECTION:product-range (INDEX:31) */
/* Verbatim from smartein-theme-docs/build-notes/page-product.css: .range and .card, renamed because
   assets/theme.css and the home sections already use .card. */
.pdp-range { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pdp-range-card { background: #fffaf1; border: 1px solid rgba(31, 23, 17, .12); border-radius: 22px; padding: 14px; display: grid; gap: 10px; }
.pdp-range-card img, .pdp-range-card svg { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #efe2d2; border-radius: 16px; }
.pdp-range-card b { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 22px; line-height: .96; }

@media (max-width: 900px) { .pdp-range { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pdp-range { grid-template-columns: 1fr; } }
/* END_SECTION:product-range */

/* START_SECTION:product-usage (INDEX:32) */
/* No new rules. The mirror styled this band with .split and .copy, which are
   .pdp-split and .pdp-copy here, declared in sections/main-product.liquid.
   .rte is already in assets/theme.css and carries the bold ingredient labels
   on the bundle pages. */
.pdp-usage .pdp-copy.rte { color: #5d4736; max-width: 72ch; }
/* END_SECTION:product-usage */

/* START_SECTION:proof-nutrition (INDEX:33) */
.proof { background: #201308; color: #fff7ea; }
.proof .section-copy, .proof p { color: #e5cbb4; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 34px); align-items: stretch; }
.proof-card { background: rgba(255, 250, 241, .06); border: 1px solid rgba(255, 250, 241, .14); border-radius: 26px; padding: clamp(22px, 3vw, 34px); display: grid; gap: clamp(20px, 2.6vw, 28px); height: 100%; }
.proof-card > h3 { font-size: clamp(24px, 2.4vw, 34px); }
.proof-card > p { color: #e5cbb4; margin: 0; max-width: 46ch; }
.donut-panel { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3vw, 38px); align-items: center; background: rgba(255, 250, 241, .05); border: 1px solid rgba(255, 250, 241, .12); border-radius: 22px; padding: clamp(20px, 2.6vw, 30px); }
.donut { position: relative; width: clamp(150px, 16vw, 184px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#f28a13 0 80%, #d08a47 80% 89%, #9a6440 89% 95%, #5f4838 95% 100%); display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
.donut::after { content: ""; position: absolute; inset: 27%; border-radius: 50%; background: #201308; }
.donut-core { position: relative; z-index: 1; text-align: center; line-height: 1; }
.donut-core strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: clamp(36px, 4vw, 46px); color: #fff7ea; }
.donut-core span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #e5cbb4; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-self: center; }
.legend li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 11px; font-size: 14px; color: #f6ecdf; }
.legend strong { font-weight: 900; }
.swatch { width: 14px; height: 14px; border-radius: 4px; background: #f28a13; }
.swatch.carb { background: #d08a47; }
.swatch.fat { background: #9a6440; }
.swatch.other { background: #5f4838; }
.bar-chart { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 70px 1fr 32px; align-items: center; gap: 13px; font-size: 13px; color: #f6ecdf; }
.bar-track { height: 12px; border-radius: 999px; background: rgba(255, 250, 241, .12); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: #f28a13; }
.bar-fill.blue { background: #d08a47; }
.bar-fill.clay { background: #9a6440; }
.bar-row strong { text-align: right; font-weight: 900; }
.proof-list { display: grid; gap: 16px; align-content: start; height: 100%; }
.proof-item { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; background: rgba(255, 250, 241, .05); border: 1px solid rgba(255, 250, 241, .12); border-radius: 22px; padding: clamp(18px, 2.2vw, 24px); }
.proof-item > b { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #f28a13; color: #201308; font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 800; }
.proof-item h3 { font-size: 22px; margin: 0 0 6px; }
.proof-item p { margin: 0; color: #e5cbb4; font-size: 14px; }
.amino-strip { background: rgba(255, 250, 241, .05); border: 1px solid rgba(255, 250, 241, .12); border-radius: 22px; padding: clamp(18px, 2.2vw, 24px); display: grid; gap: 16px; }
.amino-strip h3 { font-size: 22px; margin: 0; }
.amino-bars { display: grid; gap: 12px; }
.amino-row { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 14px; font-size: 13px; color: #f6ecdf; }
.amino-stack { display: flex; gap: 6px; }
.amino-stack span { height: 14px; border-radius: 4px; background: #f28a13; flex: 1; }
.amino-row:nth-of-type(2) .amino-stack span:last-child { background: rgba(242, 138, 19, .32); }
.amino-row:nth-of-type(3) .amino-stack span:last-child { background: rgba(242, 138, 19, .32); }
.amino-row:nth-of-type(4) .amino-stack span:nth-child(n+2) { background: rgba(242, 138, 19, .24); }
@media (max-width: 760px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
}
/* END_SECTION:proof-nutrition */

/* START_SECTION:quiz (INDEX:34) */
/* Quiz card. Verbatim from the second inline <style> block of
   smartein-mirror/v2/quiz/index.html.

   Two source rules are deliberately not repeated here:
   .hidden already exists in theme.css section 11, and .footer-col a.active is a
   footer rule that belongs to the shared sheet, not to this section.

   The source put the flex chain on body.quiz-page > main.quiz-main. Shopify owns
   the body class, so the centring lives on .quiz-main alone. The 130px top
   padding already clears the fixed nav, which is what actually positions the
   card, so the result is the same. */
.quiz-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 130px 20px 90px;
}
.quiz-card {
  width: 100%;
  max-width: 560px;
  background: #fffaf1;
  border: 1px solid rgba(58, 43, 30, .12);
  border-radius: 26px;
  padding: 38px;
  box-shadow: 0 28px 70px rgba(61, 36, 14, .08);
}
.quiz-progress { margin-bottom: 28px; }
.quiz-progress-text {
  font-size: 13px;
  font-weight: 800;
  color: #6a5240;
  margin-bottom: 10px;
}
.quiz-progress-bar {
  height: 8px;
  background: rgba(58, 43, 30, .1);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: #f28a13;
  width: 20%;
  transition: width .4s ease;
  border-radius: 999px;
}
.quiz-question {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 24px;
  color: #201308;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quiz-option {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  border: 2px solid rgba(58, 43, 30, .14);
  border-radius: 16px;
  background: #f7f1e9;
  color: #1f1711;
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.quiz-option:hover { border-color: #f28a13; }
.quiz-option.selected {
  background: #f28a13;
  border-color: #f28a13;
  color: #201308;
}
.quiz-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.quiz-result-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.quiz-result-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 14px;
  color: #201308;
}
.quiz-result-desc {
  font-size: 16px;
  color: #5d4736;
  margin: 0 0 24px;
  line-height: 1.6;
}
.quiz-restart {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 800;
  color: #6a5240;
  text-decoration: underline;
  cursor: pointer;
}
.quiz-restart:hover { color: #c55d10; }
.quiz-email { margin-top: 24px; }
.quiz-email label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #3a2b1e;
}
.quiz-email-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.quiz-email input {
  flex: 1;
  min-width: 180px;
  padding: 12px 16px;
  border: 1px solid rgba(58, 43, 30, .18);
  border-radius: 999px;
  background: #f7f1e9;
}
.quiz-email input[type="hidden"] { display: none; }
.quiz-email button {
  padding: 12px 20px;
  border-radius: 999px;
  background: #201308;
  color: #fff9ed;
  font-weight: 800;
  border: none;
  cursor: pointer;
}
.quiz-skip {
  font-size: 13px;
  font-weight: 800;
  color: #6a5240;
  margin-left: 12px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.quiz-skip:hover { color: #c55d10; }
@media (max-width: 720px) {
  .quiz-result { grid-template-columns: 1fr; }
  .quiz-card { padding: 26px; }
  .quiz-email-row { flex-direction: column; }
}
/* END_SECTION:quiz */

/* START_SECTION:routine-cta (INDEX:35) */
/* Weekly routine CTA box. Ported verbatim from the mirror inline style block:
   the .routine background rule (line 628), the section top border it shares
   with the other band sections (line 559), the .routine-box group (lines
   664-667) and the 900px breakpoint that collapses it to one column (line 675).
   These rules are section scoped, so they live here and not in assets/theme.css.
   .cta-row and .button already live in assets/theme.css. */
.routine {
  background: #fffaf1;
  border-top: 1px solid rgba(31, 23, 17, .1);
}
.routine-box {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: linear-gradient(125deg, #fbe7d2, #f6d9bd);
  border: 1px solid rgba(31, 23, 17, .08);
  border-radius: 32px;
  padding: clamp(26px, 4vw, 52px);
  overflow: hidden;
}
.routine-copy h2 { margin-bottom: 14px; }
.routine-copy p {
  color: #6b4f3b;
  font-size: clamp(16px, 1.6vw, 19px);
  margin: 0 0 24px;
  max-width: 46ch;
}
.routine-box > img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 22px;
  background: #efe2d2;
}

@media (max-width: 900px) {
  .routine-box { grid-template-columns: 1fr; }
}
/* END_SECTION:routine-cta */

/* START_SECTION:sustainability (INDEX:37) */
/* Sustainability grid. Ported verbatim from the mirror inline style block
   (the .sustain rules plus the two grid breakpoints that name .sustain-grid).
   The dark gradient panel is section scoped, so it lives here and not in
   assets/theme.css. */
.sustain {
  background: linear-gradient(160deg, #1d3326 0%, #16271d 100%);
  color: #eef6ef;
}
.sustain .section-copy { color: #b9d2c1; }
.sustain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sustain-card {
  padding: 26px 22px;
  border: 1px solid rgba(238, 246, 239, .16);
  border-radius: 24px;
  background: rgba(238, 246, 239, .05);
}
.sustain-card .ic {
  font-size: 26px;
  line-height: 1;
}
.sustain-card h3 { font-size: 23px; color: #fff; margin: 14px 0 8px; }
.sustain-card p { margin: 0; font-size: 14px; color: #b9d2c1; }

@media (max-width: 980px) {
  .sustain-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .sustain-grid { grid-template-columns: 1fr; }
}
/* END_SECTION:sustainability */

/* START_SECTION:trust-payments (INDEX:38) */
/* Trust strip.
   .pay-row and .pay already live in assets/theme.css section 11 because the
   footer shares them. Only the trust strip itself is section scoped.

   Column counts are the effective values from the mirror cascade, not the
   first declaration: the source sets 4, is overridden to 3 by the later
   shared .triad/.why-grid/.trust-grid rule, then pinned back to 4 by a
   following .trust-grid rule. Same for .trust-item align-items, which the
   source declares flex-start and later overrides to center. */
.trust {
  background: #201308;
  color: #fff7ea;
  padding: clamp(30px, 4vw, 48px) clamp(18px, 5vw, 72px);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.trust-item {
  display: flex;
  gap: 12px;
  align-items: center;
}
.trust-item .ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(242, 138, 19, .18);
  color: #f6b46a;
  font-size: 18px;
}
.trust-item b { display: block; font-size: 15px; }
.trust-item span { font-size: 13px; color: #d9c2a8; }

@media (max-width: 1100px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .trust-grid { grid-template-columns: 1fr; }
}
/* END_SECTION:trust-payments */

/* START_SECTION:use-case-tiles (INDEX:39) */
/* Lifestyle use case tiles. Copied from the source inline style block so the
   rendered result is pixel identical. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tile {
  position: relative;
  min-height: 360px;
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 13, 8, 0) 35%, rgba(20, 13, 8, .82) 100%);
}
.tile > div {
  position: relative;
  z-index: 1;
  padding: 24px;
}
.tile h3 {
  color: #fff7ea;
  font-size: 27px;
  margin: 0 0 6px;
}
.tile p {
  color: #f0e0cf;
  font-size: 14px;
  margin: 0;
}
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr; }
}
/* END_SECTION:use-case-tiles */

/* START_SECTION:video-reels (INDEX:40) */
/* Video reels. Ported verbatim from the mirror's inline style block. These
   rules are section specific and are deliberately not in assets/theme.css.
   The source declared .reel and .video-frame together; only the .reel half
   belongs to this section, so .video-frame is left to whatever section uses
   it and the declarations are otherwise unchanged. */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reel { border-radius: 26px; overflow: hidden; background: #201308; }
.reel video { width: 100%; height: min(52vh, 480px); object-fit: cover; display: block; }

.video-head { max-width: 900px; margin-bottom: clamp(26px, 4vw, 46px); }
.video-head h2 { margin-bottom: 12px; }
.video-head p { color: #604839; font-size: clamp(16px, 1.5vw, 19px); margin: 0; max-width: 700px; }
.reel-cap { padding: 18px 20px 22px; }
.reel-cap .eyebrow { background: rgba(242, 138, 19, .16); border-color: rgba(242, 138, 19, .4); color: #f6b46a; margin-bottom: 10px; }
.reel-cap h3 { color: #fff7ea; font-size: 24px; margin: 0 0 6px; }
.reel-cap p { color: #e5cbb4; font-size: 14px; margin: 0; }

@media (max-width: 1100px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Overflow guard from the mirror's mobile hardening block. */
@media (max-width: 980px) {
  .video-grid, .reel { min-width: 0 !important; max-width: 100% !important; }
  .reel video { max-width: 100% !important; }
}
@media (max-width: 760px) {
  .video-grid { grid-template-columns: 1fr; }
}
/* END_SECTION:video-reels */

/* START_SECTION:why-grid (INDEX:41) */
/* Why Smartein benefit grid. Values are the resolved cascade from the source
   inline style block, where the later grid rules (mirror lines 560 and 567)
   won over the first .why-grid pass (mirror lines 335 to 346). */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.why-card {
  background: #fffaf1;
  border: 1px solid rgba(31, 23, 17, .12);
  border-radius: 24px;
  padding: clamp(18px, 2.4vw, 30px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(61, 36, 14, .12);
}
.why-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 800;
  line-height: .9;
  color: #e87412;
}
.why-card h3 {
  font-size: 20px;
  margin: 10px 0 8px;
}
.why-card p {
  margin: 0;
  font-size: 14.5px;
  color: #5d4736;
}
@media (max-width: 1100px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; }
}
/* END_SECTION:why-grid */