/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 19:7 Expected identifier but found "%"
Line 20:8 Unexpected "<"
Line 20:42 Unexpected "{"
Line 20:51 Expected ":"
Line 20:70 Unexpected "<"
Line 21:7 Expected identifier but found "%"
Line 23:6 Unexpected "{"
Line 23:7 Expected identifier but found "%"
Line 24:8 Unexpected "<"
... and 748 more hidden warnings

**/
<section class="asingredients asingredients-{{ section.id }}">
  <div class="asingredients__inner">
    <div class="asingredients__header">
      {% if section.settings.kicker != blank %}
        <p class="asingredients__kicker">{{ section.settings.kicker }}</p>
      {% endif %}

      {% if section.settings.heading != blank %}
        <h2 class="asingredients__heading">{{ section.settings.heading }}</h2>
      {% endif %}

      {% if section.settings.text != blank %}
        <div class="asingredients__text">
          {{ section.settings.text }}
        </div>
      {% endif %}
    </div>

    <div class="asingredients__grid-wrap">
      <div class="asingredients__grid">
        {% for block in section.blocks %}
          <article class="asingredients__item" {{ block.shopify_attributes }}>
            <button
              class="asingredients__trigger"
              type="button"
              aria-label="Open ingredient details for {{ block.settings.title | escape }}"
              data-ingredient-open
              data-title="{{ block.settings.title | escape }}"
              data-eyebrow="{{ block.settings.eyebrow | escape }}"
              data-short-benefit="{{ block.settings.short_benefit | escape }}"
              data-detail-heading="{{ block.settings.detail_heading | escape }}"
              data-detail-text="{{ block.settings.detail_text | escape }}"
              data-amount="{{ block.settings.amount | escape }}"
              data-purpose="{{ block.settings.purpose | escape }}"
            >
              <div class="asingredients__media">
                {% if block.settings.image != blank %}
                  {{
                    block.settings.image
                    | image_url: width: 700
                    | image_tag:
                      loading: 'lazy',
                      widths: '180, 260, 360, 520, 700',
                      sizes: '(min-width: 990px) 120px, 94px',
                      alt: block.settings.title
                  }}
                {% else %}
                  {{ 'product-1' | placeholder_svg_tag: 'asingredients__placeholder' }}
                {% endif %}

                <span class="asingredients__plus asingredients__plus--mobile" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" focusable="false">
                    <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                  </svg>
                </span>
              </div>

              <div class="asingredients__summary">
                {% if block.settings.eyebrow != blank %}
                  <p class="asingredients__eyebrow">{{ block.settings.eyebrow }}</p>
                {% endif %}

                {% if block.settings.title != blank %}
                  <h3 class="asingredients__title">{{ block.settings.title }}</h3>
                {% endif %}

                {% if block.settings.short_benefit != blank %}
                  <p class="asingredients__benefit">{{ block.settings.short_benefit }}</p>
                {% endif %}

                <span class="asingredients__plus asingredients__plus--desktop" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" focusable="false">
                    <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                  </svg>
                </span>
              </div>
            </button>
          </article>
        {% endfor %}
      </div>
    </div>
  </div>

  {% if section.settings.disclaimer != blank %}
    <div class="asingredients__disclaimer">
      {{ section.settings.disclaimer }}
    </div>
  {% endif %}

  <div class="asingredients__overlay" data-ingredient-overlay></div>

  <aside class="asingredients__drawer" data-ingredient-drawer aria-hidden="true">
    <button class="asingredients__drawer-close" type="button" aria-label="Close ingredient details" data-ingredient-close>
      <svg viewBox="0 0 24 24" fill="none" focusable="false">
        <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
      </svg>
    </button>

    <div class="asingredients__drawer-content">
      <p class="asingredients__drawer-eyebrow" data-drawer-eyebrow></p>
      <h3 class="asingredients__drawer-title" data-drawer-title></h3>
      <p class="asingredients__drawer-benefit" data-drawer-benefit></p>

      <div class="asingredients__drawer-divider"></div>

      <h4 class="asingredients__drawer-detail-heading" data-drawer-detail-heading></h4>
      <div class="asingredients__drawer-detail-text" data-drawer-detail-text></div>

      <div class="asingredients__drawer-meta">
        <div class="asingredients__drawer-meta-item" data-drawer-amount-wrap>
          <span>Amount</span>
          <strong data-drawer-amount></strong>
        </div>

        <div class="asingredients__drawer-meta-item" data-drawer-purpose-wrap>
          <span>Purpose</span>
          <strong data-drawer-purpose></strong>
        </div>
      </div>
    </div>
  </aside>
</section>

{% style %}
  .asingredients-{{ section.id }} {
    background: {{ section.settings.background_color }} !important;
    color: {{ section.settings.text_color }} !important;
    padding-top: {{ section.settings.padding_top }}px;
    padding-right: 20px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    padding-left: 20px;
    position: relative;
    overflow: hidden;
  }

  .asingredients-{{ section.id }} * {
    box-sizing: border-box;
  }

  .asingredients-{{ section.id }} .asingredients__inner {
    max-width: {{ section.settings.section_width }}px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, {{ section.settings.header_column_width }}px) minmax(0, 1fr);
    gap: {{ section.settings.desktop_column_gap }}px;
    align-items: start;
  }

  .asingredients-{{ section.id }} .asingredients__header {
    max-width: {{ section.settings.header_width }}px;
    margin: {{ section.settings.desktop_header_offset }}px 0 0;
    text-align: left !important;
    position: sticky;
    top: {{ section.settings.desktop_sticky_offset }}px;
  }

  .asingredients-{{ section.id }} .asingredients__grid-wrap {
    width: 100%;
    padding-left: {{ section.settings.desktop_grid_offset }}px;
    max-width: none;
  }

  .asingredients-{{ section.id }} .asingredients__kicker {
    margin: 0 0 {{ section.settings.kicker_spacing }}px;
    color: {{ section.settings.kicker_color }} !important;
    font-size: {{ section.settings.kicker_size }}px;
    line-height: 1.2;
    font-weight: {{ section.settings.kicker_weight }};
    letter-spacing: {{ section.settings.kicker_letter_spacing }}em;
    text-transform: uppercase;
  }

  .asingredients-{{ section.id }} .asingredients__heading {
    margin: 0;
    color: {{ section.settings.heading_color }} !important;
    font-size: {{ section.settings.heading_size }}px;
    line-height: {{ section.settings.heading_line_height }};
    font-weight: {{ section.settings.heading_weight }};
    letter-spacing: {{ section.settings.heading_letter_spacing }}em;
  }

  .asingredients-{{ section.id }} .asingredients__text {
    margin-top: {{ section.settings.text_spacing }}px;
    color: {{ section.settings.body_color }} !important;
    font-size: {{ section.settings.body_size }}px;
    line-height: 1.55;
  }

  .asingredients-{{ section.id }} .asingredients__text p {
    margin: 0;
    color: inherit !important;
  }

  .asingredients-{{ section.id }} .asingredients__grid {
    display: grid;
    grid-template-columns: repeat({{ section.settings.columns_desktop }}, minmax(0, 1fr));
    gap: {{ section.settings.grid_gap }}px;
  }

  .asingredients-{{ section.id }} .asingredients__item {
    background: {{ section.settings.card_background }} !important;
    color: {{ section.settings.card_title_color }} !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    overflow: hidden;
    min-height: 0;
    box-shadow: none !important;
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  @media screen and (min-width: 990px) {
    .asingredients-{{ section.id }} .asingredients__item:hover {
      transform: translateY(-{{ section.settings.card_hover_lift }}px);
      box-shadow: 0 {{ section.settings.card_shadow_y }}px {{ section.settings.card_shadow_blur }}px rgba(58, 52, 44, {{ section.settings.card_shadow_opacity | divided_by: 100.0 }}) !important;
      border: none !important;
      outline: none !important;
    }

    .asingredients-{{ section.id }} .asingredients__trigger {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 120px;
      align-items: stretch;
      min-height: 118px;
    }

    .asingredients-{{ section.id }} .asingredients__summary {
      order: 1;
      min-height: 118px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .asingredients-{{ section.id }} .asingredients__media {
      order: 2;
      width: 120px;
      height: 118px;
      min-height: 118px;
      padding: {{ section.settings.desktop_image_padding }}px;
    }
  }

  .asingredients-{{ section.id }} .asingredients__trigger {
    width: 100%;
    padding: 0;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: {{ section.settings.card_title_color }} !important;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    box-shadow: none !important;
  }

  .asingredients-{{ section.id }} .asingredients__trigger:focus,
  .asingredients-{{ section.id }} .asingredients__trigger:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .asingredients-{{ section.id }} .asingredients__media {
    height: {{ section.settings.image_height }}px;
    background: {{ section.settings.image_background }} !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: {{ section.settings.desktop_image_padding }}px;
  }

  .asingredients-{{ section.id }} .asingredients__media img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
  }

  .asingredients-{{ section.id }} .asingredients__media > svg,
  .asingredients-{{ section.id }} .asingredients__placeholder {
    width: 100%;
    height: 100%;
    display: block;
    background: {{ section.settings.image_background }} !important;
    color: {{ section.settings.placeholder_color }} !important;
    fill: {{ section.settings.placeholder_color }} !important;
  }

  .asingredients-{{ section.id }} .asingredients__media > svg *,
  .asingredients-{{ section.id }} .asingredients__placeholder * {
    fill: {{ section.settings.placeholder_color }} !important;
    stroke: {{ section.settings.placeholder_color }} !important;
  }

  .asingredients-{{ section.id }} .asingredients__summary {
    position: relative;
    background: {{ section.settings.card_background }} !important;
    color: {{ section.settings.card_title_color }} !important;
    padding-top: {{ section.settings.card_padding_top }}px;
    padding-right: {{ section.settings.card_padding_x }}px;
    padding-bottom: {{ section.settings.card_padding_bottom }}px;
    padding-left: {{ section.settings.card_padding_x }}px;
    min-height: {{ section.settings.summary_min_height }}px;
  }

  .asingredients-{{ section.id }} .asingredients__eyebrow {
    margin: 0 0 5px;
    color: {{ section.settings.eyebrow_color }} !important;
    font-size: {{ section.settings.eyebrow_size }}px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .asingredients-{{ section.id }} .asingredients__title {
    margin: 0;
    padding-right: 38px;
    color: {{ section.settings.card_title_color }} !important;
    font-size: {{ section.settings.card_title_size }}px;
    line-height: 1.14;
    font-weight: {{ section.settings.card_title_weight }};
  }

  .asingredients-{{ section.id }} .asingredients__benefit {
    margin: 7px 0 0;
    padding-right: 28px;
    color: {{ section.settings.benefit_color }} !important;
    font-size: {{ section.settings.benefit_size }}px;
    line-height: 1.3;
  }

  .asingredients-{{ section.id }} .asingredients__plus {
    width: {{ section.settings.plus_size }}px;
    height: {{ section.settings.plus_size }}px;
    border-radius: 999px;
    background: {{ section.settings.plus_background }} !important;
    color: {{ section.settings.plus_color }} !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 220ms ease, background-color 220ms ease;
  }

  .asingredients-{{ section.id }} .asingredients__plus--desktop {
    position: absolute;
    right: {{ section.settings.card_padding_x }}px;
    top: {{ section.settings.card_padding_top }}px;
  }

  .asingredients-{{ section.id }} .asingredients__plus--mobile {
    display: none;
  }

  .asingredients-{{ section.id }} .asingredients__trigger:hover .asingredients__plus {
    transform: rotate(90deg);
  }

  .asingredients-{{ section.id }} .asingredients__plus svg {
    width: 58%;
    height: 58%;
  }

  .asingredients-{{ section.id }} .asingredients__plus svg path {
    stroke: currentColor !important;
  }

  .asingredients-{{ section.id }} .asingredients__disclaimer {
    max-width: {{ section.settings.disclaimer_width }}px;
    margin: {{ section.settings.disclaimer_spacing }}px auto 0;
    color: {{ section.settings.disclaimer_color }} !important;
    font-size: {{ section.settings.disclaimer_size }}px;
    line-height: 1.5;
    text-align: {{ section.settings.disclaimer_alignment }};
  }

  .asingredients-{{ section.id }} .asingredients__disclaimer p {
    margin: 0;
    color: inherit !important;
  }

  .asingredients-{{ section.id }} .asingredients__overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(58, 52, 44, {{ section.settings.overlay_opacity | divided_by: 100.0 }});
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms ease, visibility 260ms ease;
  }

  .asingredients-{{ section.id }}.is-drawer-open .asingredients__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .asingredients-{{ section.id }} .asingredients__drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 90;
    width: min({{ section.settings.drawer_width }}px, 92vw);
    height: 100vh;
    background: {{ section.settings.drawer_background }} !important;
    color: {{ section.settings.drawer_text_color }} !important;
    transform: translateX(100%);
    transition: transform 320ms ease;
    overflow-y: auto;
    box-shadow: -24px 0 70px rgba(58, 52, 44, 0.16);
  }

  .asingredients-{{ section.id }}.is-drawer-open .asingredients__drawer {
    transform: translateX(0);
  }

  .asingredients-{{ section.id }} .asingredients__drawer-close {
    position: sticky;
    top: 0;
    z-index: 2;
    width: {{ section.settings.close_button_size }}px;
    height: {{ section.settings.close_button_size }}px;
    margin-top: {{ section.settings.drawer_padding }}px;
    margin-left: auto;
    margin-right: {{ section.settings.drawer_padding }}px;
    border: 1px solid {{ section.settings.close_button_border }};
    border-radius: 999px;
    background: {{ section.settings.close_button_background }} !important;
    color: {{ section.settings.close_button_color }} !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-close svg {
    width: 52%;
    height: 52%;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-close svg path {
    stroke: currentColor !important;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-content {
    padding: {{ section.settings.drawer_padding }}px;
    padding-top: 16px;
    background: {{ section.settings.drawer_background }} !important;
    color: {{ section.settings.drawer_text_color }} !important;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-eyebrow {
    margin: 0 0 12px;
    color: {{ section.settings.drawer_muted_color }} !important;
    font-size: {{ section.settings.drawer_eyebrow_size }}px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-title {
    margin: 0;
    color: {{ section.settings.drawer_text_color }} !important;
    font-size: {{ section.settings.drawer_title_size }}px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-benefit {
    margin: 16px 0 0;
    color: {{ section.settings.drawer_body_color }} !important;
    font-size: {{ section.settings.drawer_benefit_size }}px;
    line-height: 1.45;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-divider {
    width: 100%;
    height: 1px;
    margin: 28px 0;
    background: {{ section.settings.drawer_divider_color }} !important;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-detail-heading {
    margin: 0 0 12px;
    color: {{ section.settings.drawer_text_color }} !important;
    font-size: {{ section.settings.drawer_detail_heading_size }}px;
    line-height: 1.25;
    font-weight: 700;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-detail-text {
    color: {{ section.settings.drawer_body_color }} !important;
    font-size: {{ section.settings.drawer_detail_text_size }}px;
    line-height: 1.6;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-detail-text p {
    margin: 0;
    color: inherit !important;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-detail-text p + p {
    margin-top: 12px;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-meta-item {
    padding: 14px;
    border: 1px solid {{ section.settings.drawer_meta_border }};
    border-radius: {{ section.settings.drawer_meta_radius }}px;
    background: {{ section.settings.drawer_meta_background }} !important;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-meta-item span {
    display: block;
    margin-bottom: 6px;
    color: {{ section.settings.drawer_muted_color }} !important;
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .asingredients-{{ section.id }} .asingredients__drawer-meta-item strong {
    display: block;
    color: {{ section.settings.drawer_text_color }} !important;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
  }

  body.asingredients-drawer-lock {
    overflow: hidden;
  }

  @media screen and (max-width: 989px) {
    .asingredients-{{ section.id }} {
      padding-top: {{ section.settings.padding_top_mobile }}px;
      padding-right: 16px;
      padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
      padding-left: 16px;
    }

    .asingredients-{{ section.id }} .asingredients__inner {
      display: block;
    }

    .asingredients-{{ section.id }} .asingredients__header {
      position: static;
      max-width: 100%;
      margin: 0 0 {{ section.settings.header_spacing_mobile }}px;
      text-align: left !important;
    }

    .asingredients-{{ section.id }} .asingredients__grid-wrap {
      padding-left: 0;
      max-width: none;
    }

    .asingredients-{{ section.id }} .asingredients__heading {
      font-size: {{ section.settings.heading_size_mobile }}px;
      line-height: {{ section.settings.heading_line_height_mobile }};
    }

    .asingredients-{{ section.id }} .asingredients__text {
      font-size: {{ section.settings.body_size_mobile }}px;
    }

    .asingredients-{{ section.id }} .asingredients__grid {
      grid-template-columns: repeat({{ section.settings.columns_mobile }}, minmax(0, 1fr));
      gap: {{ section.settings.grid_gap_mobile }}px;
    }

    .asingredients-{{ section.id }} .asingredients__item {
      min-height: {{ section.settings.mobile_card_height }}px;
      border-radius: 0 !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }

    .asingredients-{{ section.id }} .asingredients__trigger {
      display: grid;
      grid-template-columns: minmax(0, 1fr) {{ section.settings.mobile_image_width }}px;
      min-height: {{ section.settings.mobile_card_height }}px;
      align-items: stretch;
      background: {{ section.settings.card_background }} !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }

    .asingredients-{{ section.id }} .asingredients__summary {
      order: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: {{ section.settings.mobile_card_height }}px;
      padding: {{ section.settings.mobile_card_padding }}px;
      background: {{ section.settings.card_background }} !important;
    }

    .asingredients-{{ section.id }} .asingredients__media {
      order: 2;
      width: {{ section.settings.mobile_image_width }}px;
      height: {{ section.settings.mobile_card_height }}px;
      min-height: {{ section.settings.mobile_card_height }}px;
      background: {{ section.settings.image_background }} !important;
      padding: {{ section.settings.mobile_image_padding }}px;
    }

    .asingredients-{{ section.id }} .asingredients__media img,
    .asingredients-{{ section.id }} .asingredients__media > svg {
      width: 100%;
      height: 100%;
      object-fit: contain !important;
      object-position: center center !important;
    }

    .asingredients-{{ section.id }} .asingredients__eyebrow {
      display: none;
    }

    .asingredients-{{ section.id }} .asingredients__title {
      margin: 0;
      padding-right: 0;
      font-size: {{ section.settings.card_title_size_mobile }}px;
      line-height: 1.08;
    }

    .asingredients-{{ section.id }} .asingredients__benefit {
      margin: auto 0 0;
      padding-right: 0;
      font-size: {{ section.settings.benefit_size_mobile }}px;
      line-height: 1.22;
    }

    .asingredients-{{ section.id }} .asingredients__plus--desktop {
      display: none;
    }

    .asingredients-{{ section.id }} .asingredients__plus--mobile {
      position: absolute;
      right: {{ section.settings.mobile_plus_offset }}px;
      bottom: {{ section.settings.mobile_plus_offset }}px;
      display: flex;
      width: {{ section.settings.plus_size_mobile }}px;
      height: {{ section.settings.plus_size_mobile }}px;
    }

    .asingredients-{{ section.id }} .asingredients__drawer {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: min({{ section.settings.drawer_height_mobile }}vh, 92vh);
      transform: translateY(100%);
      border-top-left-radius: {{ section.settings.drawer_radius_mobile }}px;
      border-top-right-radius: {{ section.settings.drawer_radius_mobile }}px;
      box-shadow: 0 -24px 70px rgba(58, 52, 44, 0.18);
    }

    .asingredients-{{ section.id }}.is-drawer-open .asingredients__drawer {
      transform: translateY(0);
    }

    .asingredients-{{ section.id }} .asingredients__drawer-close {
      margin-top: {{ section.settings.drawer_padding_mobile }}px;
      margin-right: {{ section.settings.drawer_padding_mobile }}px;
    }

    .asingredients-{{ section.id }} .asingredients__drawer-content {
      padding: {{ section.settings.drawer_padding_mobile }}px;
      padding-top: 14px;
    }

    .asingredients-{{ section.id }} .asingredients__drawer-title {
      font-size: {{ section.settings.drawer_title_size_mobile }}px;
    }

    .asingredients-{{ section.id }} .asingredients__drawer-benefit {
      font-size: {{ section.settings.drawer_benefit_size_mobile }}px;
    }

    .asingredients-{{ section.id }} .asingredients__drawer-detail-heading {
      font-size: {{ section.settings.drawer_detail_heading_size_mobile }}px;
    }

    .asingredients-{{ section.id }} .asingredients__drawer-detail-text {
      font-size: {{ section.settings.drawer_detail_text_size_mobile }}px;
    }

    .asingredients-{{ section.id }} .asingredients__drawer-meta {
      grid-template-columns: 1fr;
    }
  }

  .asingredients-{{ section.id }} .asingredients__trigger::before,
  .asingredients-{{ section.id }} .asingredients__trigger::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }

  .asingredients-{{ section.id }} .asingredients__trigger {
    min-width: 0 !important;
    min-height: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .asingredients-{{ section.id }} .asingredients__trigger:focus,
  .asingredients-{{ section.id }} .asingredients__trigger:focus-visible,
  .asingredients-{{ section.id }} .asingredients__trigger:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .asingredients-{{ section.id }} article.asingredients__item,
  .asingredients-{{ section.id }} article.asingredients__item:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
{% endstyle %}

<script>
  (() => {
    const section = document.querySelector('.asingredients-{{ section.id }}');
    if (!section) return;

    const openButtons = Array.from(section.querySelectorAll('[data-ingredient-open]'));
    const closeButton = section.querySelector('[data-ingredient-close]');
    const overlay = section.querySelector('[data-ingredient-overlay]');
    const drawer = section.querySelector('[data-ingredient-drawer]');

    const eyebrowEl = section.querySelector('[data-drawer-eyebrow]');
    const titleEl = section.querySelector('[data-drawer-title]');
    const benefitEl = section.querySelector('[data-drawer-benefit]');
    const detailHeadingEl = section.querySelector('[data-drawer-detail-heading]');
    const detailTextEl = section.querySelector('[data-drawer-detail-text]');
    const amountEl = section.querySelector('[data-drawer-amount]');
    const purposeEl = section.querySelector('[data-drawer-purpose]');
    const amountWrap = section.querySelector('[data-drawer-amount-wrap]');
    const purposeWrap = section.querySelector('[data-drawer-purpose-wrap]');

    const openDrawer = (button) => {
      const eyebrow = button.dataset.eyebrow || '';
      const title = button.dataset.title || '';
      const benefit = button.dataset.shortBenefit || '';
      const detailHeading = button.dataset.detailHeading || '';
      const detailText = button.dataset.detailText || '';
      const amount = button.dataset.amount || '';
      const purpose = button.dataset.purpose || '';

      eyebrowEl.textContent = eyebrow;
      titleEl.textContent = title;
      benefitEl.textContent = benefit;
      detailHeadingEl.textContent = detailHeading;
      detailTextEl.innerHTML = detailText;
      amountEl.textContent = amount;
      purposeEl.textContent = purpose;

      amountWrap.style.display = amount ? '' : 'none';
      purposeWrap.style.display = purpose ? '' : 'none';

      section.classList.add('is-drawer-open');
      document.body.classList.add('asingredients-drawer-lock');
      drawer.setAttribute('aria-hidden', 'false');
    };

    const closeDrawer = () => {
      section.classList.remove('is-drawer-open');
      document.body.classList.remove('asingredients-drawer-lock');
      drawer.setAttribute('aria-hidden', 'true');
    };

    openButtons.forEach((button) => {
      button.addEventListener('click', () => openDrawer(button));
    });

    if (closeButton) closeButton.addEventListener('click', closeDrawer);
    if (overlay) overlay.addEventListener('click', closeDrawer);

    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && section.classList.contains('is-drawer-open')) {
        closeDrawer();
      }
    });
  })();
</script>

{% schema %}
{
  "name": "AS Ingredients",
  "settings": [
    { "type": "header", "content": "Header" },
    { "type": "text", "id": "kicker", "label": "Kicker", "default": "Ingredients" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Clinically considered ingredients for daily performance." },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Explore the key ingredients inside Rezune and how each one supports energy, cognition, rest, and balance.</p>" },
    { "type": "richtext", "id": "disclaimer", "label": "Disclaimer", "default": "<p>These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease.</p>" },

    { "type": "header", "content": "Desktop split layout" },
    { "type": "range", "id": "section_width", "label": "Section width", "min": 900, "max": 1600, "step": 20, "unit": "px", "default": 1240 },
    { "type": "range", "id": "header_column_width", "label": "Left text column width", "min": 260, "max": 720, "step": 20, "unit": "px", "default": 380 },
    { "type": "range", "id": "header_width", "label": "Text max width", "min": 260, "max": 1000, "step": 20, "unit": "px", "default": 380 },
    { "type": "range", "id": "desktop_column_gap", "label": "Gap between text and cards", "min": 24, "max": 120, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "desktop_grid_offset", "label": "Desktop card grid right offset", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 0 },
    { "type": "range", "id": "desktop_header_offset", "label": "Desktop text top offset", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 16 },
    { "type": "range", "id": "desktop_sticky_offset", "label": "Desktop sticky offset", "min": 20, "max": 160, "step": 4, "unit": "px", "default": 92 },

    { "type": "header", "content": "Card layout" },
    { "type": "range", "id": "columns_desktop", "label": "Columns desktop", "min": 2, "max": 4, "step": 1, "default": 3 },
    { "type": "range", "id": "grid_gap", "label": "Grid gap desktop", "min": 10, "max": 60, "step": 2, "unit": "px", "default": 18 },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns mobile",
      "default": "1",
      "options": [
        { "value": "1", "label": "1 column" },
        { "value": "2", "label": "2 columns" }
      ]
    },
    { "type": "range", "id": "grid_gap_mobile", "label": "Grid gap mobile", "min": 8, "max": 36, "step": 2, "unit": "px", "default": 10 },
    { "type": "range", "id": "image_height", "label": "Image height desktop", "min": 80, "max": 320, "step": 10, "unit": "px", "default": 120 },
    { "type": "range", "id": "desktop_image_padding", "label": "Image padding desktop", "min": 0, "max": 30, "step": 2, "unit": "px", "default": 10 },

    { "type": "header", "content": "Mobile compact cards" },
    { "type": "range", "id": "mobile_card_height", "label": "Mobile card height", "min": 78, "max": 180, "step": 2, "unit": "px", "default": 92 },
    { "type": "range", "id": "mobile_image_width", "label": "Mobile image side width", "min": 72, "max": 170, "step": 2, "unit": "px", "default": 94 },
    { "type": "range", "id": "mobile_card_padding", "label": "Mobile text padding", "min": 8, "max": 28, "step": 2, "unit": "px", "default": 12 },
    { "type": "range", "id": "mobile_image_padding", "label": "Mobile image padding", "min": 0, "max": 24, "step": 2, "unit": "px", "default": 8 },
    { "type": "range", "id": "mobile_card_radius", "label": "Mobile card radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 0 },
    { "type": "range", "id": "mobile_plus_offset", "label": "Mobile plus icon offset", "min": 4, "max": 24, "step": 2, "unit": "px", "default": 8 },

    { "type": "range", "id": "summary_min_height", "label": "Card text area height desktop", "min": 70, "max": 220, "step": 10, "unit": "px", "default": 100 },
    { "type": "range", "id": "card_padding_top", "label": "Card padding top desktop", "min": 8, "max": 40, "step": 2, "unit": "px", "default": 14 },
    { "type": "range", "id": "card_padding_bottom", "label": "Card padding bottom desktop", "min": 8, "max": 40, "step": 2, "unit": "px", "default": 14 },
    { "type": "range", "id": "card_padding_x", "label": "Card horizontal padding desktop", "min": 10, "max": 44, "step": 2, "unit": "px", "default": 14 },
    { "type": "range", "id": "card_hover_lift", "label": "Desktop hover lift", "min": 0, "max": 28, "step": 2, "unit": "px", "default": 4 },
    { "type": "range", "id": "card_shadow_y", "label": "Card shadow Y", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 10 },
    { "type": "range", "id": "card_shadow_blur", "label": "Card shadow blur", "min": 0, "max": 70, "step": 2, "unit": "px", "default": 24 },
    { "type": "range", "id": "card_shadow_opacity", "label": "Card shadow opacity", "min": 0, "max": 30, "step": 1, "unit": "%", "default": 7 },

    { "type": "header", "content": "Drawer" },
    { "type": "range", "id": "drawer_width", "label": "Desktop drawer width", "min": 320, "max": 720, "step": 20, "unit": "px", "default": 520 },
    { "type": "range", "id": "drawer_height_mobile", "label": "Mobile drawer height", "min": 50, "max": 95, "step": 5, "unit": "vh", "default": 80 },
    { "type": "range", "id": "drawer_padding", "label": "Drawer padding desktop", "min": 20, "max": 70, "step": 2, "unit": "px", "default": 36 },
    { "type": "range", "id": "drawer_padding_mobile", "label": "Drawer padding mobile", "min": 16, "max": 46, "step": 2, "unit": "px", "default": 24 },
    { "type": "range", "id": "drawer_radius_mobile", "label": "Mobile drawer top radius", "min": 0, "max": 38, "step": 2, "unit": "px", "default": 24 },
    { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 80, "step": 5, "unit": "%", "default": 25 },
    { "type": "range", "id": "close_button_size", "label": "Close button size", "min": 30, "max": 58, "step": 2, "unit": "px", "default": 42 },
    { "type": "range", "id": "drawer_eyebrow_size", "label": "Drawer eyebrow size", "min": 9, "max": 18, "step": 1, "unit": "px", "default": 11 },
    { "type": "range", "id": "drawer_title_size", "label": "Drawer title size desktop", "min": 24, "max": 64, "step": 2, "unit": "px", "default": 42 },
    { "type": "range", "id": "drawer_title_size_mobile", "label": "Drawer title size mobile", "min": 22, "max": 46, "step": 2, "unit": "px", "default": 34 },
    { "type": "range", "id": "drawer_benefit_size", "label": "Drawer benefit size desktop", "min": 13, "max": 26, "step": 1, "unit": "px", "default": 17 },
    { "type": "range", "id": "drawer_benefit_size_mobile", "label": "Drawer benefit size mobile", "min": 12, "max": 22, "step": 1, "unit": "px", "default": 15 },
    { "type": "range", "id": "drawer_detail_heading_size", "label": "Drawer detail heading size desktop", "min": 15, "max": 32, "step": 1, "unit": "px", "default": 20 },
    { "type": "range", "id": "drawer_detail_heading_size_mobile", "label": "Drawer detail heading size mobile", "min": 14, "max": 28, "step": 1, "unit": "px", "default": 18 },
    { "type": "range", "id": "drawer_detail_text_size", "label": "Drawer detail text size desktop", "min": 12, "max": 22, "step": 1, "unit": "px", "default": 15 },
    { "type": "range", "id": "drawer_detail_text_size_mobile", "label": "Drawer detail text size mobile", "min": 11, "max": 20, "step": 1, "unit": "px", "default": 14 },
    { "type": "range", "id": "drawer_meta_radius", "label": "Drawer meta radius", "min": 0, "max": 28, "step": 2, "unit": "px", "default": 12 },

    { "type": "header", "content": "Typography" },
    { "type": "range", "id": "kicker_size", "label": "Kicker size", "min": 9, "max": 22, "step": 1, "unit": "px", "default": 12 },
    { "type": "range", "id": "kicker_spacing", "label": "Kicker spacing", "min": 0, "max": 30, "step": 1, "unit": "px", "default": 10 },
    { "type": "range", "id": "kicker_letter_spacing", "label": "Kicker letter spacing", "min": 0, "max": 0.3, "step": 0.1, "default": 0.1 },
    {
      "type": "select",
      "id": "kicker_weight",
      "label": "Kicker font weight",
      "default": "700",
      "options": [
        { "value": "400", "label": "Regular" },
        { "value": "600", "label": "Semi bold" },
        { "value": "700", "label": "Bold" },
        { "value": "900", "label": "Black" }
      ]
    },
    { "type": "range", "id": "heading_size", "label": "Heading size desktop", "min": 20, "max": 80, "step": 2, "unit": "px", "default": 42 },
    { "type": "range", "id": "heading_size_mobile", "label": "Heading size mobile", "min": 18, "max": 56, "step": 2, "unit": "px", "default": 30 },
    { "type": "range", "id": "heading_line_height", "label": "Heading line height desktop", "min": 0.8, "max": 1.6, "step": 0.1, "default": 1 },
    { "type": "range", "id": "heading_line_height_mobile", "label": "Heading line height mobile", "min": 0.8, "max": 1.6, "step": 0.1, "default": 1.1 },
    {
      "type": "select",
      "id": "heading_weight",
      "label": "Heading font weight",
      "default": "700",
      "options": [
        { "value": "400", "label": "Regular" },
        { "value": "600", "label": "Semi bold" },
        { "value": "700", "label": "Bold" },
        { "value": "900", "label": "Black" }
      ]
    },
    { "type": "range", "id": "heading_letter_spacing", "label": "Heading letter spacing", "min": -0.2, "max": 0.2, "step": 0.1, "default": 0 },
    { "type": "range", "id": "text_spacing", "label": "Text spacing", "min": 0, "max": 50, "step": 2, "unit": "px", "default": 14 },
    { "type": "range", "id": "body_size", "label": "Body size desktop", "min": 12, "max": 24, "step": 1, "unit": "px", "default": 15 },
    { "type": "range", "id": "body_size_mobile", "label": "Body size mobile", "min": 11, "max": 22, "step": 1, "unit": "px", "default": 14 },
    { "type": "range", "id": "eyebrow_size", "label": "Card eyebrow size", "min": 9, "max": 18, "step": 1, "unit": "px", "default": 11 },
    { "type": "range", "id": "card_title_size", "label": "Card title size desktop", "min": 14, "max": 32, "step": 1, "unit": "px", "default": 18 },
    { "type": "range", "id": "card_title_size_mobile", "label": "Card title size mobile", "min": 13, "max": 28, "step": 1, "unit": "px", "default": 17 },
    {
      "type": "select",
      "id": "card_title_weight",
      "label": "Card title font weight",
      "default": "700",
      "options": [
        { "value": "400", "label": "Regular" },
        { "value": "600", "label": "Semi bold" },
        { "value": "700", "label": "Bold" },
        { "value": "900", "label": "Black" }
      ]
    },
    { "type": "range", "id": "benefit_size", "label": "Benefit text size desktop", "min": 12, "max": 22, "step": 1, "unit": "px", "default": 13 },
    { "type": "range", "id": "benefit_size_mobile", "label": "Benefit text size mobile", "min": 10, "max": 20, "step": 1, "unit": "px", "default": 12 },
    { "type": "range", "id": "plus_size", "label": "Plus size desktop", "min": 24, "max": 56, "step": 2, "unit": "px", "default": 30 },
    { "type": "range", "id": "plus_size_mobile", "label": "Plus size mobile", "min": 20, "max": 42, "step": 2, "unit": "px", "default": 28 },
    { "type": "range", "id": "disclaimer_width", "label": "Disclaimer width", "min": 420, "max": 1200, "step": 20, "unit": "px", "default": 860 },
    { "type": "range", "id": "disclaimer_spacing", "label": "Disclaimer spacing", "min": 16, "max": 90, "step": 2, "unit": "px", "default": 36 },
    { "type": "range", "id": "disclaimer_size", "label": "Disclaimer size", "min": 10, "max": 18, "step": 1, "unit": "px", "default": 12 },
    {
      "type": "select",
      "id": "disclaimer_alignment",
      "label": "Disclaimer alignment",
      "default": "center",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ]
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "background_color", "label": "Section background", "default": "#FAF8F3" },
    { "type": "color", "id": "text_color", "label": "Base text color", "default": "#3A342C" },
    { "type": "color", "id": "kicker_color", "label": "Kicker color", "default": "#A88456" },
    { "type": "color", "id": "heading_color", "label": "Heading color", "default": "#3A342C" },
    { "type": "color", "id": "body_color", "label": "Body color", "default": "#6F675D" },
    { "type": "color", "id": "card_background", "label": "Card background", "default": "#FFFFFF" },
    { "type": "color", "id": "image_background", "label": "Image background", "default": "#F4EEE4" },
    { "type": "color", "id": "placeholder_color", "label": "Placeholder image color", "default": "#CBB896" },
    { "type": "color", "id": "eyebrow_color", "label": "Eyebrow color", "default": "#A88456" },
    { "type": "color", "id": "card_title_color", "label": "Card title color", "default": "#4A4036" },
    { "type": "color", "id": "benefit_color", "label": "Benefit color", "default": "#7A7166" },
    { "type": "color", "id": "plus_background", "label": "Plus / button background", "default": "#3A342C" },
    { "type": "color", "id": "plus_color", "label": "Plus / button color", "default": "#FFFFFF" },
    { "type": "color", "id": "drawer_background", "label": "Drawer background", "default": "#F8F3EA" },
    { "type": "color", "id": "drawer_text_color", "label": "Drawer main text color", "default": "#3A342C" },
    { "type": "color", "id": "drawer_body_color", "label": "Drawer body text color", "default": "#6A6257" },
    { "type": "color", "id": "drawer_muted_color", "label": "Drawer muted text color", "default": "#9A7B52" },
    { "type": "color", "id": "drawer_divider_color", "label": "Drawer divider color", "default": "#E1D5C4" },
    { "type": "color", "id": "drawer_meta_background", "label": "Drawer meta background", "default": "#FFFFFF" },
    { "type": "color", "id": "drawer_meta_border", "label": "Drawer meta border", "default": "#E3D8C8" },
    { "type": "color", "id": "close_button_background", "label": "Close button background", "default": "#3A342C" },
    { "type": "color", "id": "close_button_color", "label": "Close button icon color", "default": "#FFFFFF" },
    { "type": "color", "id": "close_button_border", "label": "Close button border", "default": "#3A342C" },
    { "type": "color", "id": "disclaimer_color", "label": "Disclaimer color", "default": "#8A8277" },

    { "type": "header", "content": "Spacing" },
    { "type": "range", "id": "padding_top", "label": "Padding top desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_bottom", "label": "Padding bottom desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_top_mobile", "label": "Padding top mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 60 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Padding bottom mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 60 },
    { "type": "range", "id": "header_spacing_mobile", "label": "Header spacing mobile", "min": 12, "max": 80, "step": 2, "unit": "px", "default": 28 },
    { "type": "range", "id": "card_radius", "label": "Card radius desktop", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 0 }
  ],
  "blocks": [
    {
      "type": "ingredient",
      "name": "Ingredient",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Ingredient image" },
        { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Active ingredient" },
        { "type": "text", "id": "title", "label": "Ingredient name", "default": "Lion’s Mane" },
        { "type": "text", "id": "short_benefit", "label": "Short benefit / function", "default": "Supports cognitive function" },
        { "type": "text", "id": "detail_heading", "label": "Detail heading", "default": "Why it matters" },
        { "type": "richtext", "id": "detail_text", "label": "Detail text", "default": "<p>This ingredient is included to support daily wellness and performance as part of a balanced routine.</p>" },
        { "type": "text", "id": "amount", "label": "Amount", "default": "500 mg" },
        { "type": "text", "id": "purpose", "label": "Purpose", "default": "Focus support" }
      ]
    }
  ],
  "presets": [
    {
      "name": "AS Ingredients",
      "blocks": [
        {
          "type": "ingredient",
          "settings": {
            "eyebrow": "Focus",
            "title": "Lion’s Mane",
            "short_benefit": "Supports cognitive function",
            "detail_heading": "Cognitive support",
            "detail_text": "<p>Lion’s Mane is commonly used in wellness formulas for cognitive and nervous system support.</p>",
            "amount": "500 mg",
            "purpose": "Focus"
          }
        },
        {
          "type": "ingredient",
          "settings": {
            "eyebrow": "Energy",
            "title": "Green Tea Extract",
            "short_benefit": "Supports smooth energy",
            "detail_heading": "Sustained energy",
            "detail_text": "<p>Green tea extract is often used to support alertness and daily vitality without a heavy stimulant feel.</p>",
            "amount": "250 mg",
            "purpose": "Energy"
          }
        },
        {
          "type": "ingredient",
          "settings": {
            "eyebrow": "Calm",
            "title": "L-Theanine",
            "short_benefit": "Promotes calm focus",
            "detail_heading": "Calm focus",
            "detail_text": "<p>L-Theanine is commonly paired with wellness routines designed to support calm, clarity, and focus.</p>",
            "amount": "200 mg",
            "purpose": "Calm"
          }
        }
      ]
    }
  ]
}
{% endschema %}