/** Shopify CDN: Minification failed

Line 469:0 Expected "}" to go with "{"

**/
/*
 * Complete your routine — built from Figma node 3122:8442 (desktop reference).
 * A centred heading + supporting copy over a row of product cards, on a light green
 * panel with a decorative wavy stroke straddling the section's top edge.
 */

.cyr {
  position: relative;
  background-color: var(--cyr-bg, #caffc5);
  padding-inline: var(--cyr-padding-inline, 46px);
  /* Structural guard: nothing inside this section can ever add a horizontal scrollbar to the
     page. `clip` on one axis leaves the other `visible`, so the wave still overhangs
     vertically — verified in the browser, not assumed. */
  overflow-x: clip;
}

/*
 * The wavy stroke overhangs the top of the panel, so the section must not clip it and
 * needs to paint above whatever precedes it.
 */
.cyr__wave {
  position: absolute;
  top: var(--cyr-wave-offset, -25px);
  left: 0;
  right: 0;
  height: var(--cyr-wave-height, 47.66px);
  line-height: 0;
  pointer-events: none;
}

.cyr__wave .wave-squiggle {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--cyr-wave-color, #7fdd77);
}

.cyr__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cyr-inner-gap, 40px);
  max-width: var(--cyr-max-width, 1440px);
  margin-inline: auto;
}

.cyr__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  overflow-wrap: break-word;
}

.cyr__title {
  margin: 0;
  max-width: 844px;
  font-family: var(--font-h1--family, var(--font-body--family));
  font-size: var(--cyr-title-size, 55px);
  font-weight: 800;
  line-height: 1.011;
  color: var(--cyr-title-color, #000);
  text-wrap: balance;
}

.cyr__description {
  margin: 0;
  max-width: 688px;
  font-family: var(--font-paragraph--family, var(--font-body--family));
  font-size: var(--cyr-description-size, 22px);
  font-weight: 400;
  line-height: normal;
  color: var(--cyr-description-color, #000);
}

.cyr__description > :first-child {
  margin-block-start: 0;
}

.cyr__description > :last-child {
  margin-block-end: 0;
}

/* Wrappers for the mobile slider. Both are inert blocks on desktop so the grid below
   renders exactly as it did before they were introduced. */
.cyr__slider {
  width: 100%;
}

.cyr__viewport {
  position: relative;
  width: 100%;
}

.cyr__nav,
.cyr__progress {
  display: none;
}

.cyr__grid {
  display: grid;
  grid-template-columns: repeat(var(--cyr-columns, 4), minmax(0, 1fr));
  gap: var(--cyr-gap, 40px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------- card */

.cyr-card {
  /* Kept as variables so the media below can cancel them exactly. */
  --cyr-card-pad-block: 24px;
  --cyr-card-pad-inline: 12px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--cyr-card-pad-block) var(--cyr-card-pad-inline);
  border-radius: var(--cyr-card-radius, 8px);
  background-color: var(--cyr-card-bg, #eef0ff);
  color: var(--cyr-card-text, #000);
  overflow: clip;
}

/*
 * The image bleeds past the card's padding to meet the top and both side edges, so no card
 * colour shows around it. In Figma the image is laid out larger than its container and
 * clipped by the card: desktop spans x 0.4→301.8 of a 301.2 card and y -33→276.23; mobile
 * x -13→270 of a 255 card and y -56.49→233.51. Both leave a visible area of the full card
 * width by 276.23 / 233.51 — the same ratio to within 0.2%, so one value covers both.
 * `align-self: stretch` overrides the card's `align-items: center` for this child.
 */
.cyr-card__media {
  display: block;
  align-self: stretch;
  margin-block-start: calc(var(--cyr-card-pad-block) * -1);
  margin-inline: calc(var(--cyr-card-pad-inline) * -1);
  aspect-ratio: 301.2 / 276.23;
  overflow: clip;
  text-decoration: none;
}

.cyr-card__media img,
.cyr-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cyr-card__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
}

/* Okendo's star-rating widget renders larger than the design; scale it to match. */
.cyr-card__rating[data-oke-star-rating] {
  transform: scale(0.85);
  transform-origin: center;
}

.cyr-card__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
}

.cyr-card__name {
  font-family: var(--font-paragraph--family, var(--font-body--family));
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
}

.cyr-card__price {
  margin: 0;
  font-family: var(--font-paragraph--family, var(--font-body--family));
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cyr-card__price s {
  margin-inline-start: 6px;
  opacity: 0.55;
  font-weight: 400;
}

.cyr-card__cart {
  width: 100%;
}

.cyr-card__cart product-form-component,
.cyr-card__cart add-to-cart-component,
.cyr-card__cart form {
  display: block;
  width: 100%;
}

/*
 * The shared add-to-cart-button snippet renders `class="button {{ class }}"`, so these rules
 * are scoped with `.cyr` to outrank the theme's own `.button` styles.
 */
.cyr .cyr-card__atc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 16.922px 31.728px;
  border: 0;
  border-radius: 105.76px;
  background: var(--cyr-button-bg, #5257b2);
  color: var(--cyr-button-text, #fff);
  font-family: var(--font-paragraph--family, var(--font-body--family));
  font-size: 17px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 0.68px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--animation-speed, 0.2s) var(--animation-easing, ease);
}

.cyr .cyr-card__atc:hover:not([disabled]) {
  opacity: 0.88;
  color: var(--cyr-button-text, #fff);
}

.cyr .cyr-card__atc[disabled],
.cyr .cyr-card__atc[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* The snippet nests its label in several spans; keep the label on one line. */
.cyr .cyr-card__atc .add-to-cart-text,
.cyr .cyr-card__atc .add-to-cart-text__content,
.cyr .cyr-card__atc .add-to-cart-text__content > span,
.cyr .cyr-card__atc .add-to-cart-text__content > span > span {
  display: inline;
  white-space: nowrap;
}

.cyr .cyr-card__atc .add-to-cart-icon {
  display: none;
}

/* ---------------------------------------------------------------- responsive */

@media screen and (max-width: 1199px) {
  .cyr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
  Mobile — Figma 3195:6058. The same card <ul> becomes a horizontal scroll-snap
  track; scrolling is native, so touch swiping and momentum come from the
  browser. card-row-slider only drives the arrow and the progress thumb.
  ========================================================================== */

@media screen and (max-width: 749px) {
  /* Set the variable rather than the property, so the card track's right-edge bleed
     below can derive from the same value and cannot drift from the gutter. */
  .cyr {
    --cyr-padding-inline: 18px;
  }

  .cyr__inner {
    gap: var(--cyr-inner-gap-mobile, 26px);
  }

  .cyr__slider {
    display: flex;
    flex-direction: column;
    gap: var(--cyr-inner-gap-mobile, 26px);
  }

  /*
   * Grid -> scroll track. Same markup, same cards.
   *
   * The track runs off the right edge of the viewport with no gutter, while the first
   * card keeps the 18px gutter on the left. `margin-right` cancels the section's right
   * padding to reach the edge; the matching `padding-right` sits INSIDE the scroller, so
   * it costs nothing at rest and becomes breathing space after the last card once you
   * scroll to the end. scroll-padding keeps snapping aligned with it.
   */
  .cyr__grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--cyr-gap-mobile, 15px);
    /* The base rule sets width:100%; with an explicit width a negative margin only
       shifts following content instead of widening the box, so the bleed below would
       do nothing. auto lets the box grow by the negative margin. */
    width: auto;
    margin-right: calc(var(--cyr-padding-inline) * -1);
    padding-right: var(--cyr-padding-inline);
    scroll-padding-inline-end: var(--cyr-padding-inline);
    overflow-x: auto;
    /* Only the x axis should scroll; without this, the spec upgrades the visible y axis to auto. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Same reason as the ingredients track: `contain` stops scroll chaining to the page
       but deliberately preserves this element's own rubber-band bounce, which pulls empty
       track past the last card. `none` blocks the local bounce too. The 18px of trailing
       breathing space above is intentional and stays — this only stops dragging beyond it. */
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cyr__grid::-webkit-scrollbar {
    display: none;
  }

  .cyr-card {
    flex: 0 0 auto;
    /* 231px media + 12px card padding each side, per the design. */
    width: min(var(--cyr-card-width-mobile, 255px), 82%);
    scroll-snap-align: start;
  }

  /* Same exception as the ingredients track: the last card's `start` snap position sits
     past the end of the scrollable range, so `mandatory` has nowhere valid to rest at
     the end. Snapping to the end resolves against `scroll-padding-inline-end` above,
     which is what preserves the deliberate 18px of breathing space after the last card
     rather than pulling it flush to the viewport edge. */
  .cyr-card:last-child {
    scroll-snap-align: end;
  }

  .cyr__header {
    gap: 15px;
  }

  .cyr__title {
    font-size: var(--cyr-title-size-mobile, 32px);
    line-height: 0.925;
  }

  .cyr__description {
    font-size: var(--cyr-description-size-mobile, 16px);
    font-weight: 500;
  }

  /* ----- Prev / next arrows ----- */
  .cyr__nav {
    /* The chevron SVGs take their stroke width from this var, which base.css only
       defines inside .pills__pill — without it the chevron is a thin 1px hairline. */
    --icon-stroke-width: 2px;

    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .cyr__prev {
    left: 6px;
  }

  .cyr__next {
    right: 6px;
  }

  /* Only offer an arrow when there is somewhere to go in that direction. */
  .cyr__slider[data-scrollable] .cyr__nav {
    opacity: 1;
    pointer-events: auto;
  }

  .cyr__slider[data-at-end] .cyr__next,
  .cyr__slider[data-at-start] .cyr__prev {
    opacity: 0;
    pointer-events: none;
  }

  /* Keep the icon's own 8:12 viewBox ratio so the chevron isn't squashed. */
  .cyr__nav svg {
    display: block;
    width: 8px;
    height: 12px;
    color: #000;
  }

  /* ----- Progress thumb (Figma node 3195:6296) ----- */
  .cyr__progress {
    display: block;
    width: 100%;
    height: 6px;
    border: 1px solid var(--cyr-button-bg, #5257b2);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
  }

  .cyr__progress-thumb {
    width: 40%;
    height: 100%;
    border-radius: 100px;
    background: var(--cyr-button-bg, #5257b2);
  }

  .cyr__slider:not([data-scrollable]) .cyr__progress {
    display: none;
  }

  /* ----- Add to cart: mobile gets the uppercase pill with a circled arrow ----- */
  .cyr .cyr-card__atc {
    justify-content: center;
    padding: 11.5px 10px 11.5px 10px;
    border-radius: 65.68px;
    font-size: 17px;
    letter-spacing: 0.64px;
  }

  /* Decorative, so it's generated rather than added to the shared button snippet's markup. */
  /* .cyr .cyr-card__atc::after {
    content: '↗';
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 31.5px;
    height: 31.5px;
    border-radius: 50%;
    background: #fff;
    color: var(--cyr-button-bg, #5257b2);
    font-size: 15.76px;
    font-weight: 700;
    line-height: 1;
  }
} */