/** Shopify CDN: Minification failed

Line 512:0 Unexpected "{"
Line 512:1 Expected identifier but found "%"
Line 513:78 Expected identifier but found whitespace
Line 517:1 Expected identifier but found "%"
Line 519:0 Unexpected "<"
Line 526:5 Expected identifier but found "%"
Line 527:6 Unexpected "<"
Line 527:48 Unexpected "{"
Line 527:57 Expected ":"
Line 527:86 Unexpected "<"
... and 141 more hidden warnings

**/
/* Smart 1 PDP */

/* =========================================================
  DESKTOP
  ========================================================= */

/* =========================================================
  OVERALL
  ========================================================= */

  /*
  Product Description Paragraph
  */


.iwto .break-words {
  position: relative;
  left: 10vw;
  width: 55vw;
  max-width: 850px;
}

.iwto .custom-canada-content {
  width: 100%;
  max-width: 100%;
}

.iwto .custom-canada-content h2 {
  font-size: clamp(38px, 3.2vw, 48px) !important;
  line-height: 105% !important;
  width: 80%;
  max-width: 100%;
  margin: 0 0 20px 0;
  transform: translateY(-4.63vh);
}

.iwto .custom-canada-content .rte {
  width: 100%;
  max-width: 100%;
  transform: translateY(-2.78vh);
}

.iwto .custom-canada-content .rte p {
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 150%;
  margin: 0 0 28px 0;
}

.iwto .custom-canada-content em {
  font-size: clamp(10px, 1vw, 13px);
}

/* =========================================================
  PAGE 1
  OUR CLOSEST FORMULA TO BREASTMILK
  ========================================================= */

.shopify-section[id$="__image_with_text_overlay_yhpANT"]
.custom-canada-title {
  font-size: clamp(40px, 3.2vw, 50px) !important;
  line-height: 140% !important;
}

.shopify-section[id$="__image_with_text_overlay_yhpANT"]
.custom-canada-title > span {
  display: block !important;
  white-space: nowrap !important;
  transform: none !important;
}


/* Main Message */

.shopify-section[id$="__image_with_text_overlay_yhpANT"]
.custom-canada-content .rte {
  line-height: 90%;
  font-size: clamp(18px, 2.6vw, 24px);
  transform: translateY(4.63vh);
  width: 90vh;
}


/* Disclaimer */

.shopify-section[id$="__image_with_text_overlay_yhpANT"]
.custom-canada-content .rte > p:last-child em {
  display: block !important;
  width: 70vh !important;
  line-height: 140% !important;
  color: #998679;
  transform: translateY(8vh) !important;
}


/* =========================================================
  PAGE 2
  WHY NIURISS SMART
  ========================================================= */

.shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
.custom-canada-content {
  width: 100%;
  max-width: 100%;
}


/* Main Heading */

.shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
.custom-canada-content h2 {
  font-size: clamp(38px, 3vw, 46px) !important;
  line-height: 140% !important;
  margin-bottom: 30px;
  transform: translateY(-3vh);
  width: 95%;
}


/* Each Benefit */

.shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
.custom-canada-content .rte p {
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 135%;
  transform: translateY(5vh);
}

.shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
.custom-canada-content .rte p + p {
  margin-top: 50px;
}

.shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
.custom-canada-content .rte strong {
  display: inline-block !important;
  margin-bottom: 7px !important;
}


/* Disclaimer */

.shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
.custom-canada-content .rte em {
  display: block !important;
  line-height: 140% !important;
  color: #998679;
  transform: translateY(12vh) !important;
}


/* =========================================================
  PAGE 4
  CANADIAN MILK STANDARDS
  ========================================================= */

/* Main Heading */

.shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
.custom-canada-title {
  font-size: clamp(38px, 3.2vw, 48px) !important;
  line-height: 105% !important;
  transform: translateY(-18vh);
}


/* Main Message */

.shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
.custom-canada-content .rte > p {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 130%;
}

.shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
.custom-canada-content {
  margin-top: 100px !important;
}


/* Align wrapped checklist text */

.shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
.custom-canada-content .rte > p:nth-of-type(n+2) {
  padding-left: 1.6em;
  text-indent: -1.6em;
}


/* H2 LINE BREAK + RED / BROWN */

.custom-canada-title > span {
  display: block !important;
  white-space: nowrap !important;
  transform: translateY(-4.63vh);
  line-height: 120%;
}

.custom-canada-title > span:nth-child(1),
.custom-canada-title > span:nth-child(2) {
  color: #BE0328 !important;
  -webkit-text-fill-color: #BE0328 !important;
}

.custom-canada-title > span:nth-child(3) {
  color: #594A40 !important;
  -webkit-text-fill-color: #594A40 !important;
}


/* =========================================================
  PAGE 5
  TRUST US
  ========================================================= */

/* Heading */

.custom-trust-title > span {
  display: block !important;
  white-space: nowrap !important;
  line-height: 130%;
  transform: translateY(-23vh);
}

.custom-trust-title > span:nth-child(2) {
  color: #BE0328 !important;
  -webkit-text-fill-color: #BE0328 !important;
}

.shopify-section[id$="__image_with_text_overlay_3kPeGh"]
.custom-trust-title {
  font-size: clamp(45px, 3.2vw, 55px) !important;
  line-height: 105% !important;
}

.shopify-section[id$="__image_with_text_overlay_3kPeGh"]
.custom-canada-content > .rte {
  width: 80%;
}




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

  MOBILE

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

@media screen and (max-width: 749px) {

  :is(
    .shopify-section[id$="__image_with_text_overlay_yhpANT"],
    .shopify-section[id$="__image_with_text_overlay_VtKJ6r"],
    .shopify-section[id$="__image_with_text_overlay_iKw3Lg"],
    .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  ) .break-words {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 560px !important;
    min-width: 0;
    height: auto !important;
    min-height: 100vh;
    min-height: 100svh;
    max-height: none;
    margin: 0 auto !important;
    padding: 32px 20px;
    text-align: left;
    transform: translateY(-10vh)!important;
  }

  /* Reset both mobile nudges and the desktop rules inherited on mobile.
     The full selector list also overrides the more specific disclaimer rule. */

  :is(
    .shopify-section[id$="__image_with_text_overlay_yhpANT"],
    .shopify-section[id$="__image_with_text_overlay_VtKJ6r"],
    .shopify-section[id$="__image_with_text_overlay_iKw3Lg"],
    .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  ) :is(
    .custom-canada-content,
    .custom-canada-content h2,
    .custom-canada-content .rte,
    .custom-canada-content .rte h4,
    .custom-canada-content .rte em,
    .custom-canada-content .rte > p:last-child em,
    .custom-canada-title,
    .custom-canada-title > span,
    .custom-trust-title,
    .custom-trust-title > span
  ) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none;
    overflow-wrap: anywhere;
    text-align: left;
  }
  
  :is(
    .shopify-section[id$="__image_with_text_overlay_yhpANT"],
    .shopify-section[id$="__image_with_text_overlay_VtKJ6r"],
    .shopify-section[id$="__image_with_text_overlay_iKw3Lg"],
    .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  ) .custom-canada-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 !important;
  }

  :is(
    .shopify-section[id$="__image_with_text_overlay_yhpANT"],
    .shopify-section[id$="__image_with_text_overlay_VtKJ6r"],
    .shopify-section[id$="__image_with_text_overlay_iKw3Lg"],
    .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  ) .custom-canada-content .rte {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 !important;
  }

  :is(
    .shopify-section[id$="__image_with_text_overlay_yhpANT"],
    .shopify-section[id$="__image_with_text_overlay_VtKJ6r"],
    .shopify-section[id$="__image_with_text_overlay_iKw3Lg"],
    .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  ) :is(
    .custom-canada-content h2,
    .custom-canada-content .rte h4,
    .custom-canada-content .rte p,
    .custom-canada-content .rte p + p,
    .custom-canada-title,
    .custom-trust-title
  ) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  :is(
    .shopify-section[id$="__image_with_text_overlay_yhpANT"],
    .shopify-section[id$="__image_with_text_overlay_VtKJ6r"],
    .shopify-section[id$="__image_with_text_overlay_iKw3Lg"],
    .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  ) :is(.custom-canada-title, .custom-trust-title) > span {
    display: block !important;
    white-space: normal !important;
  }


  /* PAGE 1 - Original mobile font sizes and line heights preserved. */

  .shopify-section[id$="__image_with_text_overlay_yhpANT"]
  .custom-canada-content h2 {
    font-size: clamp(23px, 2.2vw, 28px) !important;
    line-height: 105% !important;
  }

  .shopify-section[id$="__image_with_text_overlay_yhpANT"]
  .custom-canada-title > span.red-highlight {
    color: #BE0328 !important;
  }

  .shopify-section[id$="__image_with_text_overlay_yhpANT"]
  .custom-canada-content .rte p {
    font-size: clamp(13px, 2.3vw, 16px) !important;
    line-height: 140% !important;
  }


  .shopify-section[id$="__image_with_text_overlay_yhpANT"]
  .custom-canada-content .rte > p:last-child em {
    display: inline-block !important;
    font-size: clamp(8px, 2.2vw, 10px) !important;
    line-height: 120% !important;
    transform: translateY(24vh)!important;
  }

  /* PAGE 2 - Original mobile font sizes and line heights preserved. */

  .shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
  .custom-canada-content h2 {
    font-size: clamp(23px, 2.2vw, 28px) !important;
    line-height: 105% !important;
    transform: translateY(2vh)!important;
  }

  .shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
  .custom-canada-content .rte p {
    font-size: clamp(13px, 2.2vw, 16px) !important;
    line-height: 135%;
    transform: translateY(2vh)!important;
  }

  .shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
  .custom-canada-content .rte strong {
    display: inline-block !important;
    margin-bottom: 5px !important;
  }

  .shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
  .custom-canada-content .rte > p:nth-of-type(3) {
    width: 60% !important;
    max-width: 60% !important;
  }

  .shopify-section[id$="__image_with_text_overlay_VtKJ6r"]
  .custom-canada-content .rte > p:last-child em {
    font-size: clamp(8px, 2.2vw, 10px) !important;
    line-height: 120% !important;
    transform: translateY(15vh)!important;
  }

  /* PAGE 4 - Original mobile font sizes and line heights preserved. */

  .shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
  .custom-canada-title {
    font-size: clamp(22px, 2.2vw, 25px) !important;
    line-height: 105% !important;
    transform: translateY(-1vh)!important;
  }

  .shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
  .custom-canada-title > span:nth-child(1),
  .shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
  .custom-canada-title > span:nth-child(2) {
    color: #BE0328 !important;
    -webkit-text-fill-color: #BE0328 !important;
  }

  .shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
  .custom-canada-title > span:nth-child(3) {
    color: #594A40 !important;
    -webkit-text-fill-color: #594A40 !important;
  }

  .shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
  .custom-canada-content .rte {
    transform: translateY(5vh)!important;
    line-height: 135% !important;    
  }

  .shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
  .custom-canada-content .rte h4 {
    font-size: clamp(16px, 2.5vw, 20px) !important;
  }

  .shopify-section[id$="__image_with_text_overlay_iKw3Lg"]
  .custom-canada-content .rte > p {
    padding-left: 0;
    text-indent: 0;
  }


  /* PAGE 5 - Original mobile font sizes and line heights preserved. */

  .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  .custom-trust-title {
    font-size: clamp(30px, 7vw, 38px) !important;
    line-height: 130% !important;
    transform:translateY(-4.5vh)!important;
  }

  .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  .custom-trust-title > span {
    display: block !important;
    white-space: normal !important;
    line-height: 130% !important;
  }

  .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  .custom-trust-title > span:nth-child(2) {
    color: #BE0328 !important;
    -webkit-text-fill-color: #BE0328 !important;
  }

  .shopify-section[id$="__image_with_text_overlay_3kPeGh"]
  .custom-canada-content > .rte >p {
    font-size: clamp(13px, 2.6vw, 17px) !important;
    line-height: 150%;
    transform:translateY(-1vh)!important;
    width: 65%!important;
    max-width: 65%!important;
  }

{% comment %}
  Niuriss Ingredient Spotlight — mobile-only, swipeable ingredient callouts.
  Add to Online Store > Themes > Edit code > Sections.
  One Ingredient slide block = one mobile slide with 2 ingredient callouts.
  Uses native CSS scroll snapping (no Swiper library needed).
{% endcomment %}

<section
  id="niuriss-ingredients-{{ section.id }}"
  class="niuriss-ingredients"
  style="--ni-bg: {{ section.settings.bg_color }}; --ni-ink: {{ section.settings.text_color }}; --ni-accent: {{ section.settings.accent_color }};"
  aria-label="{{ section.settings.accessible_label | escape }}"
>
  <div class="niuriss-ingredients__inner">
    {% if section.settings.heading != blank %}
      <h2 class="niuriss-ingredients__heading">{{ section.settings.heading | escape }}</h2>
    {% endif %}

    {% if section.settings.button_label != blank and section.settings.button_link != blank %}
      <a href="{{ section.settings.button_link }}" class="niuriss-ingredients__link">
        {{ section.settings.button_label | escape }}
      </a>
    {% endif %}

    {% if section.blocks.size > 0 %}
      <div class="niuriss-ingredients__viewport" data-ni-viewport tabindex="0" aria-roledescription="carousel" aria-label="Ingredient highlights">
        {% for block in section.blocks %}
          {% assign selected_image = block.settings.slide_image | default: section.settings.main_image %}
          <article
            id="ni-ingredient-slide-{{ section.id }}-{{ forloop.index }}"
            class="niuriss-ingredients__slide"
            data-ni-slide
            aria-label="Ingredient highlights, slide {{ forloop.index }} of {{ section.blocks.size }}"
            {{ block.shopify_attributes }}
          >
            <div class="niuriss-ingredients__canvas">
              {% if selected_image != blank %}
                {{ selected_image | image_url: width: 1000 | image_tag: class: 'niuriss-ingredients__product', loading: 'lazy', widths: '320, 480, 640, 800, 1000', sizes: '(max-width: 749px) 76vw, 380px' }}
              {% else %}
                <div class="niuriss-ingredients__image-placeholder">Choose a product image in the section settings</div>
              {% endif %}

              <svg class="niuriss-ingredients__connectors" viewBox="0 0 430 520" preserveAspectRatio="none" aria-hidden="true" focusable="false">
                <path d="M393 75 V202 H282" />
                <circle cx="282" cy="202" r="4" />
                <path d="M48 375 V320 H203" />
                <circle cx="203" cy="320" r="4" />
              </svg>

              <div class="niuriss-ingredients__badge niuriss-ingredients__badge--top" aria-hidden="true">
                {% if block.settings.top_icon != blank %}
                  {{ block.settings.top_icon | image_url: width: 140 | image_tag: loading: 'lazy', widths: '70, 140' }}
                {% else %}
                  <span>01</span>
                {% endif %}
              </div>
              <div class="niuriss-ingredients__callout niuriss-ingredients__callout--top">
                <h3>{{ block.settings.top_title | escape }}</h3>
                {% if block.settings.top_description != blank %}
                  <p>{{ block.settings.top_description | escape | newline_to_br }}</p>
                {% endif %}
              </div>

              <div class="niuriss-ingredients__badge niuriss-ingredients__badge--bottom" aria-hidden="true">
                {% if block.settings.bottom_icon != blank %}
                  {{ block.settings.bottom_icon | image_url: width: 140 | image_tag: loading: 'lazy', widths: '70, 140' }}
                {% else %}
                  <span>02</span>
                {% endif %}
              </div>
              <div class="niuriss-ingredients__callout niuriss-ingredients__callout--bottom">
                <h3>{{ block.settings.bottom_title | escape }}</h3>
                {% if block.settings.bottom_description != blank %}
                  <p>{{ block.settings.bottom_description | escape | newline_to_br }}</p>
                {% endif %}
              </div>
            </div>
          </article>
        {% endfor %}
      </div>

      {% if section.blocks.size > 1 %}
        <div class="niuriss-ingredients__dots" data-ni-dots aria-label="Choose ingredient slide">
          {% for block in section.blocks %}
            <button
              class="niuriss-ingredients__dot{% if forloop.first %} is-active{% endif %}"
              type="button"
              data-ni-dot="{{ forloop.index0 }}"
              aria-label="Go to ingredient slide {{ forloop.index }}"
              aria-controls="ni-ingredient-slide-{{ section.id }}-{{ forloop.index }}"
              {% if forloop.first %}aria-current="true"{% endif %}
            ></button>
          {% endfor %}
        </div>
      {% endif %}
    {% endif %}
  </div>
</section>

<style>
  #niuriss-ingredients-{{ section.id }} {
    display: none;
    background: var(--ni-bg);
    color: var(--ni-ink);
    width: 100%;
  }

  @media screen and (max-width: 749px) {
    #niuriss-ingredients-{{ section.id }} {
      display: block;
      padding: 24px 0 26px;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__inner {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__heading {
      margin: 0 18px 18px;
      text-align: center;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 700;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__link {
      display: table;
      margin: 0 auto 20px;
      padding: 13px 22px;
      border: 1px solid #d7d2cb;
      border-radius: 9px;
      color: var(--ni-ink);
      font-size: 16px;
      font-weight: 600;
      line-height: 1.2;
      text-decoration: none;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__viewport {
      display: flex;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__viewport::-webkit-scrollbar {
      display: none;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__slide {
      flex: 0 0 100%;
      width: 100%;
      min-width: 0;
      scroll-snap-align: start;
      box-sizing: border-box;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__canvas {
      position: relative;
      width: 100%;
      height: clamp(480px, 117vw, 520px);
      margin: 0 auto;
      overflow: hidden;
      isolation: isolate;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__product {
      position: absolute;
      z-index: 0;
      top: 24%;
      left: 12%;
      width: 76%;
      height: 51%;
      object-fit: contain;
      object-position: center;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__image-placeholder {
      position: absolute;
      top: 29%;
      left: 15%;
      width: 70%;
      height: 43%;
      display: grid;
      place-items: center;
      padding: 16px;
      box-sizing: border-box;
      border: 1px dashed var(--ni-accent);
      text-align: center;
      font-size: 12px;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__connectors {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__connectors path {
      fill: none;
      stroke: var(--ni-accent);
      stroke-width: 1.2;
      stroke-dasharray: 2.5 3;
      vector-effect: non-scaling-stroke;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__connectors circle {
      fill: var(--ni-accent);
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__badge {
      position: absolute;
      z-index: 3;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      border: 1px solid var(--ni-accent);
      background: var(--ni-bg);
      display: grid;
      place-items: center;
      color: var(--ni-ink);
      font-size: 12px;
      font-weight: 700;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__badge img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__badge--top {
      left: calc(91.395% - 23px);
      top: calc(10% - 23px);
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__badge--bottom {
      left: calc(11.163% - 23px);
      top: calc(76.538% - 23px);
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__callout {
      position: absolute;
      z-index: 2;
      box-sizing: border-box;
      font-family: inherit;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__callout h3 {
      margin: 0 0 8px;
      font-size: clamp(12px, 3.25vw, 14px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.015em;
      text-transform: uppercase;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__callout p {
      margin: 0;
      font-size: clamp(11px, 2.8vw, 12.5px);
      line-height: 1.48;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__callout--top {
      top: 4%;
      right: 18%;
      width: 74%;
      text-align: right;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__callout--bottom {
      top: 76%;
      left: 20%;
      width: 75%;
      text-align: left;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin: 2px 0 0;
      padding: 0;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__dot {
      display: block;
      width: 9px;
      height: 9px;
      min-width: 9px;
      min-height: 9px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #d7d1c8;
      cursor: pointer;
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__dot.is-active {
      background: var(--ni-accent);
    }

    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__dot:focus-visible,
    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__viewport:focus-visible,
    #niuriss-ingredients-{{ section.id }} .niuriss-ingredients__link:focus-visible {
      outline: 2px solid var(--ni-accent);
      outline-offset: 4px;
    }
  }
}