/** Shopify CDN: Minification failed

Line 842:29 Expected ")" to end URL token

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:main-product-new (INDEX:31) */
.product__info {
      margin-left: -1rem;
      margin-right: -1rem;
    }

    @media screen and (min-width: 1024px) {
      .product__grid {
        grid-template-columns: 1fr 560px;
      }

      .product__gallery-col {
        min-width: 0;
      }

      .product__info {
        margin-left: 0;
        margin-right: 0;
      }
    }
/* END_SECTION:main-product-new */

/* START_SECTION:pdp-breadcrumbs (INDEX:37) */
.pdp-crumbs { background-color: #F3DE94; padding: 12px 0 0; font-family: 'Nexa-Regular', Arial, sans-serif; }
@media (min-width: 1024px) { .pdp-crumbs { padding: 20px 0 0; } }
.pdp-crumbs__list {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
  font-size: 13px; line-height: 18px; color: #3D3935;
}
.pdp-crumbs__list li + li::before { content: '/'; margin-right: 8px; color: #7B7B7B; }
.pdp-crumbs__list a { color: #26773C; text-decoration: none; }
.pdp-crumbs__list a:hover { color: #231F20; text-decoration: underline; text-underline-offset: 3px; }
.pdp-crumbs__list [aria-current='page'] { color: #231F20; font-family: 'Nexa-Bold', Arial, sans-serif; }
/* END_SECTION:pdp-breadcrumbs */

/* START_SECTION:pdp-comparison (INDEX:38) */
.pdp-compare { padding: 40px 0; font-family: 'Nexa-Regular', Arial, sans-serif; color: #000; }
@media (min-width: 1024px) { .pdp-compare { padding: 56px 0; } }
.pdp-compare__card {
  position: relative; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px #000, 0 4px 0 0 #000; padding: 40px 16px 24px; box-sizing: border-box;
}
@media (min-width: 1024px) { .pdp-compare__card { border-radius: 20px; padding: 56px 90px 40px; } }
.pdp-compare__flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 1;
}
/* separate, not collapse: border-radius is ignored on cells of a collapsed
   table, and the inset box-shadows that draw the highlighted column don't
   line up with collapsed borders — which is what made the outline look
   broken. border-spacing 0 keeps the cells flush. */
.pdp-compare__table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pdp-compare__table th,
.pdp-compare__table td { padding: 14px 8px; vertical-align: middle; }
@media (min-width: 1024px) { .pdp-compare__table th, .pdp-compare__table td { padding: 18px 12px; } }
.pdp-compare__table thead th { font-weight: 400; }
.pdp-compare__table tbody th {
  text-align: left; font-family: 'Nexa-Bold', Arial, sans-serif; font-size: 14px; line-height: 20px;
  border-top: 1.5px solid #D4E4D8; padding-left: 0;
}
@media (min-width: 1024px) { .pdp-compare__table tbody th { font-size: 16px; line-height: 22px; padding-left: 20px; } }
.pdp-compare__us {
  background: #EFF9E1; text-align: center; width: 96px;
  box-shadow: inset 2px 0 0 0 #000, inset -2px 0 0 0 #000;
}
@media (min-width: 1024px) { .pdp-compare__us { width: 200px; } }
.pdp-compare__table thead .pdp-compare__us {
  border-radius: 12px 12px 0 0; box-shadow: inset 2px 2px 0 0 #000, inset -2px 0 0 0 #000;
}
.pdp-compare__table tbody tr:last-child .pdp-compare__us {
  border-radius: 0 0 12px 12px; box-shadow: inset 2px 0 0 0 #000, inset -2px -2px 0 0 #000, inset 0 1.5px 0 0 #D4E4D8;
}
.pdp-compare__table tbody .pdp-compare__us { box-shadow: inset 2px 0 0 0 #000, inset -2px 0 0 0 #000, inset 0 1.5px 0 0 #D4E4D8; }
.pdp-compare__us-name {
  display: block; font-family: 'NexaRust-Black', Arial, sans-serif; font-size: 14px; line-height: 20px;
}
@media (min-width: 1024px) { .pdp-compare__us-name { font-size: 18px; line-height: 22px; } }
.pdp-compare__us-sub { display: block; font-size: 11px; color: #3D3935; margin-top: 4px; }
@media (min-width: 1024px) { .pdp-compare__us-sub { font-size: 12px; } }
.pdp-compare__them {
  text-align: center; width: 96px; color: #7B7B7B;
  font-family: 'Nexa-Black', Arial, sans-serif; font-size: 13px; line-height: 18px;
}
@media (min-width: 1024px) { .pdp-compare__them { width: 200px; font-size: 15px; line-height: 20px; } }
.pdp-compare__table tbody .pdp-compare__them { border-top: 1.5px solid #D4E4D8; }


/* Mobile: with table-layout auto the header text forced the highlighted column
   to 133px and squeezed the feature labels to 82px, wrapping them over six
   lines and leaving tall, mostly-empty rows. Fixed layout honours the widths
   so the label column gets the remaining space. */
@media (max-width: 679px) {
  .pdp-compare .pdp-compare__table { table-layout: fixed; }
  .pdp-compare .pdp-compare__table th,
  .pdp-compare .pdp-compare__table td { padding: 12px 4px; }
  .pdp-compare .pdp-compare__us { width: 98px; }
  .pdp-compare .pdp-compare__them { width: 76px; }
  .pdp-compare .pdp-compare__table tbody th {
    font-size: 13px; line-height: 18px; padding-left: 0; padding-right: 8px;
  }
  /* 'SUCKERPUNCH' is one unbreakable word — it has to fit the column outright
     or it spills into the next one under table-layout: fixed. */
  .pdp-compare .pdp-compare__us-name { font-size: 11px; line-height: 14px; letter-spacing: -0.2px; }
  .pdp-compare .pdp-compare__us-sub { font-size: 10px; margin-top: 2px; }
  .pdp-compare .pdp-compare__them { font-size: 12px; line-height: 16px; }
  .pdp-compare .pdp-compare__card { padding: 34px 12px 20px; }
}
/* END_SECTION:pdp-comparison */

/* START_SECTION:pdp-difference (INDEX:39) */
/* Two-class selector on purpose: .pdp-section sets background-color #f3de94 at
     the same specificity, so a lone .pdp-diff would be decided by stylesheet
     source order, which Shopify does not guarantee. */
  .pdp-section.pdp-diff {
    background-color: #eff9e1;
    /* Mobile runs at 75% of the desktop value, the same ratio as the 40/56
       rhythm the other pdp-* sections use, so one control drives both. */
    padding-top: calc(var(--pdp-diff-pt, 56px) * 0.75);
    padding-bottom: calc(var(--pdp-diff-pb, 56px) * 0.75);
  }

  @media (min-width: 1024px) {
    .pdp-section.pdp-diff {
      padding-top: var(--pdp-diff-pt, 56px);
      padding-bottom: var(--pdp-diff-pb, 56px);
    }
  }

  .pdp-diff__panel {
    position: relative;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #000, 0 4px 0 0 #000;
    padding: 40px 20px 32px;
    box-sizing: border-box;
  }

  .pdp-diff__flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
  }

  .pdp-diff__intro {
    margin: 0 auto 28px;
    max-width: 62ch;
    text-align: center;
    font-family: 'Nexa-Regular', Arial, sans-serif;
    font-size: 15px;
    line-height: 25px;
    color: #3d3935;
  }

  .pdp-diff__intro p {
    margin: 0 0 10px;
  }

  .pdp-diff__intro p:last-child {
    margin-bottom: 0;
  }

  .pdp-diff__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The claim stacks above the benefit; the mark keeps its own gutter at every
     width so the structure survives at 375 instead of flattening into a list. */
  .pdp-diff__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
  }

  .pdp-diff__icon {
    display: block;
    width: 34px;
    height: 34px;
    margin-top: -4px;
  }

  .pdp-diff__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .pdp-diff__copy {
    min-width: 0;
  }

  .pdp-diff__claim {
    margin: 0;
    font-family: 'Steelfish-Bold', Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #231f20;
    overflow-wrap: break-word;
  }

  /* Small lowercase qualifier after a big uppercase claim, e.g. "(pouches only)". */
  .pdp-diff__note {
    display: inline-block;
    margin-left: 7px;
    font-family: 'Nexa-Regular', Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: #7b7b7b;
  }

  .pdp-diff__benefit {
    margin: 7px 0 0;
    font-family: 'Nexa-Regular', Arial, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #3d3935;
    text-wrap: pretty;
  }

  .pdp-diff__cta {
    margin: 32px auto 0;
    display: table;
  }

  @media (min-width: 768px) {
    .pdp-diff__panel {
      padding: 48px 32px 40px;
    }

    .pdp-diff__list--2,
    .pdp-diff__list--3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pdp-diff__claim {
      font-size: 26px;
      line-height: 26px;
    }
  }

  @media (min-width: 1024px) {
    .pdp-diff__panel {
      padding: 56px 48px 48px;
    }

    .pdp-diff__list {
      gap: 36px 48px;
    }

    .pdp-diff__list--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pdp-diff__item {
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 14px;
    }

    .pdp-diff__icon {
      width: 38px;
      height: 38px;
    }

    .pdp-diff__claim {
      font-size: 28px;
      line-height: 28px;
    }

    .pdp-diff__benefit {
      font-size: 16px;
      line-height: 26px;
    }
  }
/* END_SECTION:pdp-difference */

/* START_SECTION:pdp-faq (INDEX:40) */
.pdp-faq { padding: 40px 0; font-family: 'Nexa-Regular', Arial, sans-serif; color: #000; background-color: #F3DE94; }
@media (min-width: 1024px) { .pdp-faq { padding: 56px 0; } }
.pdp-faq__layout { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 768px) { .pdp-faq__layout { flex-direction: row; gap: 48px; } }
@media (min-width: 1024px) { .pdp-faq__layout { gap: 77px; } }
.pdp-faq__aside { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 768px) {
  .pdp-faq__aside { width: 340px; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 40px; padding-top: 12px; }
}
.pdp-faq__title {
  margin: 0; font-family: 'Steelfish-Bold', Arial, sans-serif; font-weight: 700;
  font-size: 40px; line-height: 42px; text-transform: uppercase;
}
@media (min-width: 1024px) { .pdp-faq__title { font-size: 64px; line-height: 66px; } }
.pdp-faq__title-script {
  display: block; font-family: 'Vodka-Bold', cursive; font-size: 36px; line-height: 46px;
  color: #26773C; text-transform: capitalize;
}
@media (min-width: 1024px) { .pdp-faq__title-script { font-size: 56px; line-height: 72px; } }
.pdp-faq__img { width: 115px; height: auto; display: block; }
@media (min-width: 1024px) { .pdp-faq__img { width: 227px; } }
.pdp-faq__list { flex-grow: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1024px) { .pdp-faq__list { gap: 16px; } }
.pdp-faq__item {
  border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #000, 0 3px 0 0 #000; overflow: hidden;
}
.pdp-faq__q { margin: 0; }
.pdp-faq__btn {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; background: none; border: none; text-align: left; cursor: pointer;
  box-sizing: border-box; font-family: 'Nexa-Black', Arial, sans-serif; font-size: 15px;
  line-height: 22px; color: #000; transition: background-color .2s ease;
}
@media (min-width: 1024px) { .pdp-faq__btn { padding: 20px 24px; font-size: 16px; } }
.pdp-faq__btn:hover { background: rgba(239,249,225,.6); }
/* Explicit rotate(0deg) rather than the default `none`: transitioning from
   `none` to a rotation is unreliable — the toggle would land on the identity
   matrix and the pickle never turned. Two explicit values always interpolate. */
/* No transition on transform. Empirically, with one declared the computed
   transform never updates on class change here — other properties restyle
   fine and the selector matches, but transform stays pinned at its initial
   value. Dropping it makes the flip instant and, more importantly, correct. */
.pdp-faq__chev { flex-shrink: 0; width: 30px; height: 30px; display: block; transform: rotate(0deg); }
.pdp-faq__chev svg { width: 100%; height: 100%; display: block; }
.pdp-faq__item.is-open .pdp-faq__chev { transform: rotate(45deg); }
.pdp-faq__a { display: none; padding: 0 20px 18px; font-size: 15px; line-height: 24px; color: #3D3935; }
@media (min-width: 1024px) { .pdp-faq__a { padding: 0 24px 20px; } }
.pdp-faq__item.is-open .pdp-faq__a { display: block; }
.pdp-faq__a p { margin: 0 0 10px; }
.pdp-faq__a p:last-child { margin-bottom: 0; }
.pdp-faq__a a, .pdp-faq__after a {
  color: #26773C; font-family: 'Nexa-Bold', Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px;
}
.pdp-faq__a a:hover, .pdp-faq__after a:hover { color: #231F20; }
.pdp-faq__after { margin-top: 8px; font-size: 15px; line-height: 24px; color: #3D3935; }
.pdp-faq__after p { margin: 0; }
/* END_SECTION:pdp-faq */

/* START_SECTION:pdp-final-cta (INDEX:41) */
.pdp-cta { padding: 40px 0 64px; font-family: 'Nexa-Regular', Arial, sans-serif; background-color: #F3DE94; }
@media (min-width: 1024px) { .pdp-cta { padding: 56px 0 100px; } }
.pdp-cta__card {
  border-radius: 16px; background: #26773C; box-shadow: inset 0 0 0 1px #000, 0 4px 0 0 #000;
  display: flex; flex-direction: column; gap: 22px; padding: 36px 20px; align-items: center;
}
@media (min-width: 1024px) { .pdp-cta__card { border-radius: 20px; gap: 28px; padding: 60px 50px; } }
.pdp-cta__heading {
  margin: 0; font-family: 'Steelfish-Bold', Arial, sans-serif; font-weight: 700;
  font-size: 36px; line-height: 38px; text-transform: uppercase; color: #fff; text-align: center; text-wrap: balance;
}
@media (min-width: 1024px) { .pdp-cta__heading { font-size: 64px; line-height: 64px; } }
.pdp-cta__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: stretch; }
@media (min-width: 1024px) { .pdp-cta__actions { flex-direction: row; gap: 16px; width: auto; justify-content: center; } }
.pdp-cta__form { margin: 0; }
.pdp-cta__price { margin-left: 8px; }
.pdp-cta__soldout { margin: 0; font-family: 'Nexa-Bold', Arial, sans-serif; color: #EFF9E1; }
.pdp-cta__trust {
  display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; align-items: center;
  margin: 0; padding: 0; list-style: none; font-family: 'Nexa-Bold', Arial, sans-serif;
  font-size: 13px; line-height: 20px; color: #EFF9E1; text-align: center;
}
@media (min-width: 1024px) { .pdp-cta__trust { font-size: 14px; } }
.pdp-cta__trust li + li::before { content: '·'; opacity: .6; margin-right: 12px; }
/* END_SECTION:pdp-final-cta */

/* START_SECTION:pdp-meta-tabs (INDEX:42) */
.pdp-tabs { padding: 40px 0; font-family: 'Nexa-Regular', Arial, sans-serif; color: #000; }
@media (min-width: 1024px) { .pdp-tabs { padding: 56px 0; } }
.pdp-tabs__card {
  border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px #000, 0 4px 0 0 #000; display: flex; flex-direction: column;
}
@media (min-width: 1024px) { .pdp-tabs__card { border-radius: 20px; flex-direction: row; } }

.pdp-tabs__rail { display: none; }
@media (min-width: 1024px) {
  .pdp-tabs__rail {
    display: flex; flex-direction: column; gap: 12px; width: 316px; flex-shrink: 0;
    padding: 40px 30px; background: rgba(239,249,225,0.3); border-right: 1px solid #000;
  }
  .pdp-tabs__list { display: flex; flex-direction: column; gap: 12px; }
}
.pdp-tabs__eyebrow {
  margin: 0 0 8px; font-family: 'Nexa-Black', Arial, sans-serif; font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; color: #26773C;
}
.pdp-tabs__tab {
  display: flex; align-items: center; padding: 14px 18px; border: none; border-radius: 10px;
  background: transparent; font-family: 'Nexa-Regular', Arial, sans-serif; font-size: 15px;
  line-height: 20px; text-align: left; cursor: pointer; color: #3D3935;
  transition: background-color .2s ease, color .2s ease;
}
.pdp-tabs__tab:hover { background: rgba(239,249,225,0.75); }
.pdp-tabs__tab.is-active {
  background: #26773C; color: #fff; font-family: 'Nexa-Bold', Arial, sans-serif;
  box-shadow: inset 0 0 0 1.5px #000;
}

.pdp-tabs__panels { flex-grow: 1; min-width: 0; }
@media (min-width: 1024px) { .pdp-tabs__panels { padding: 50px; } }
.pdp-tabs__panel { border-bottom: 1px solid rgba(0,0,0,.12); }
.pdp-tabs__panel:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .pdp-tabs__panel { display: none; border: 0; }
  .pdp-tabs__panel.is-active { display: block; }
}

.pdp-tabs__acc {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 16px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: 'Nexa-Black', Arial, sans-serif; font-size: 15px; line-height: 22px; color: #000;
}
/* Explicit rotate(0deg) — see pdp-faq: transitioning from `none` doesn't land. */
/* No transition on transform — see pdp-faq for why. */
.pdp-tabs__acc-icon { flex-shrink: 0; width: 30px; height: 30px; display: block; transform: rotate(0deg); }
.pdp-tabs__acc-icon svg { width: 100%; height: 100%; display: block; }
.pdp-tabs__panel.is-active .pdp-tabs__acc-icon { transform: rotate(45deg); }
/* The accordion header is the mobile affordance only — the left rail handles
   navigation from 1024px up. */
@media (min-width: 1024px) { .pdp-tabs__acc { display: none; } }

.pdp-tabs__body { display: none; padding: 0 16px 22px; }
.pdp-tabs__panel.is-active .pdp-tabs__body { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .pdp-tabs__body, .pdp-tabs__panel.is-active .pdp-tabs__body {
    display: flex; flex-direction: row; align-items: center; gap: 40px; padding: 0; min-height: 300px;
  }
}
.pdp-tabs__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; flex-grow: 1; }
.pdp-tabs__heading {
  margin: 0; font-family: 'Steelfish-Bold', Arial, sans-serif; font-weight: 700;
  font-size: 32px; line-height: 34px; text-transform: uppercase;
}
@media (min-width: 1024px) { .pdp-tabs__heading { font-size: 44px; line-height: 46px; } }
.pdp-tabs__text, .pdp-tabs__text p { margin: 0; font-size: 15px; line-height: 25px; color: #3D3935; text-wrap: pretty; }
@media (min-width: 1024px) { .pdp-tabs__text, .pdp-tabs__text p { font-size: 16px; line-height: 26px; } }
.pdp-tabs__link {
  font-family: 'Nexa-Bold', Arial, sans-serif; font-size: 15px; color: #26773C;
  text-decoration: underline; text-underline-offset: 3px;
}
.pdp-tabs__link:hover { color: #231F20; }
.pdp-tabs__media {
  width: 100%; max-width: 300px; aspect-ratio: 1; flex-shrink: 0; border-radius: 14px;
  overflow: hidden; box-shadow: inset 0 0 0 2px #000; background: #EFF9E1;
}
@media (min-width: 1024px) { .pdp-tabs__media { width: 300px; max-width: none; } }
.pdp-tabs__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-tabs__media--contain img { object-fit: contain; padding: 14px; box-sizing: border-box; }
/* END_SECTION:pdp-meta-tabs */

/* START_SECTION:pdp-pickle-juice (INDEX:43) */
.pdp-juice { padding: 40px 0; font-family: 'Nexa-Regular', Arial, sans-serif; color: #000; background-color: #F3DE94; }
@media (min-width: 1024px) { .pdp-juice { padding: 56px 0; } }
.pdp-juice__heading { align-items: center; }
.pdp-juice__icon { width: 36px; height: auto; display: block; }
@media (min-width: 1024px) { .pdp-juice__icon { width: 47px; } }
.pdp-juice__grid {
  display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none;
  justify-content: center;
}
@media (min-width: 680px) { .pdp-juice__grid { grid-template-columns: repeat(2, minmax(0, 346px)); gap: 40px; justify-content: center; } }

/* Mobile: two-up snap slider instead of a stack. Cards are sized to exactly
   half the track so a pair fills the screen and a third (if added) peeks in.
   Scoped with .pdp-juice because bundle.css has `ol[class], ul[class]
   { padding: 0 }` at (0,1,1), which would otherwise strip the padding — and
   that padding keeps the cards' 4px drop shadow inside the scroll box. */
@media (max-width: 679px) {
  .pdp-juice .pdp-juice__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(50% - 7px);
    gap: 14px;
    justify-content: start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 4px 16px 14px;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .pdp-juice .pdp-juice__grid::-webkit-scrollbar { display: none; }
  .pdp-juice .pdp-juice__card { scroll-snap-align: start; padding: 12px; gap: 10px; }
  .pdp-juice .pdp-juice__grid:focus-visible { outline: 2px solid #26773C; outline-offset: -2px; border-radius: 8px; }
  /* Half-width cards leave ~132px of button; the shared 32px side padding
     would push "Add To Cart" past that, so trim it here only. */
  .pdp-juice .pdp-btn { padding: 0 10px; font-size: 12px; letter-spacing: .3px; }
  .pdp-juice .pdp-juice__title { font-size: 14px; line-height: 19px; }
  .pdp-juice .pdp-juice__badge { padding: 5px 34px; font-size: 10px; }
}
.pdp-juice__card {
  border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #000, 0 4px 0 0 #000;
  display: flex; flex-direction: column; gap: 14px; padding: 16px; box-sizing: border-box; align-items: center;
}
@media (min-width: 1024px) { .pdp-juice__card { border-radius: 20px; gap: 16px; padding: 20px; } }
.pdp-juice__media {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: #26773C; box-shadow: inset 0 0 0 2px #000;
}
.pdp-juice__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 24px; box-sizing: border-box; }
.pdp-juice__badge {
  position: absolute; top: 16px; left: -34px; transform: rotate(-8deg); background: #D50032;
  box-shadow: inset 0 0 0 2px #000; padding: 5px 40px; font-family: 'Nexa-Black', Arial, sans-serif;
  font-size: 12px; line-height: 18px; color: #fff; white-space: nowrap; text-transform: uppercase;
}
.pdp-juice__title {
  margin: 0; font-family: 'NexaRust-Black', Arial, sans-serif; font-weight: 900;
  font-size: 16px; line-height: 22px; text-align: center;
}
@media (min-width: 1024px) { .pdp-juice__title { font-size: 17px; line-height: 24px; } }
.pdp-juice__title a { color: inherit; text-decoration: none; }
.pdp-juice__title a:hover { color: #26773C; }
.pdp-juice__price { margin: 0; font-family: 'Nexa-Bold', Arial, sans-serif; font-size: 16px; line-height: 20px; color: #3D3935; }
.pdp-juice__form { width: 100%; margin: 0; }
/* END_SECTION:pdp-pickle-juice */

/* START_SECTION:pdp-quality (INDEX:44) */
/* Scoped with the section class on purpose: the theme's reset in bundle.css
   carries `ol[class], ul[class] { padding: 0 }`, whose (0,1,1) specificity
   beats a lone class on a <ul> and silently flattens this padding. */
.pdp-quality { padding: 40px 0; font-family: 'Nexa-Regular', Arial, sans-serif; color: #000; background-color: #F3DE94; }
@media (min-width: 1024px) { .pdp-quality { padding: 56px 0; } }
.pdp-quality__card {
  border-radius: 16px; background: #26773C; box-shadow: inset 0 0 0 1px #000, 0 4px 0 0 #000;
  display: flex; flex-direction: column; gap: 28px; padding: 28px 20px; box-sizing: border-box;
}
@media (min-width: 1024px) {
  .pdp-quality__card { border-radius: 20px; flex-direction: row; align-items: center; gap: 50px; padding: 50px; }
}
.pdp-quality__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; flex-grow: 1; min-width: 0; }
@media (min-width: 1024px) { .pdp-quality__copy { gap: 24px; } }
.pdp-quality__title {
  margin: 0; font-family: 'NexaRust-Black', Arial, sans-serif; font-weight: 900;
  font-size: 22px; line-height: 30px; color: #fff;
}
@media (min-width: 1024px) { .pdp-quality__title { font-size: 28px; line-height: 36px; } }
.pdp-quality__text, .pdp-quality__text p {
  margin: 0; font-size: 15px; line-height: 25px; color: #EFF9E1; text-wrap: pretty;
}
@media (min-width: 1024px) { .pdp-quality__text, .pdp-quality__text p { font-size: 16px; line-height: 26px; } }
.pdp-quality__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .pdp-quality__tags { gap: 10px; } }
.pdp-quality__tag {
  border-radius: 9999px; background: #EFF9E1; padding: 7px 14px; box-shadow: inset 0 0 0 1.5px #000;
  font-family: 'Nexa-Black', Arial, sans-serif; font-size: 12px; line-height: 18px; color: #26773C;
}
@media (min-width: 1024px) { .pdp-quality__tag { padding: 8px 16px; font-size: 13px; } }
.pdp-quality__link {
  font-family: 'Nexa-Bold', Arial, sans-serif; font-size: 15px; color: #fff;
  text-decoration: underline; text-underline-offset: 3px;
}
.pdp-quality__link:hover { color: #EFF9E1; }
.pdp-quality .pdp-quality__badges {
  width: 100%; flex-shrink: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #000;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; margin: 0; list-style: none;
  box-sizing: border-box; justify-items: center; align-items: center;
}
@media (min-width: 1024px) { .pdp-quality .pdp-quality__badges { width: 480px; border-radius: 16px; gap: 24px; padding: 32px; } }
.pdp-quality__badges img { width: 96px; height: auto; display: block; }
@media (min-width: 1024px) { .pdp-quality__badges img { width: 120px; } }
/* END_SECTION:pdp-quality */

/* START_SECTION:pdp-reviews (INDEX:45) */
.pdp-reviews { padding: 40px 0; font-family: 'Nexa-Regular', Arial, sans-serif; color: #000; background-color: #F3DE94; }
@media (min-width: 1024px) { .pdp-reviews { padding: 56px 0; } }
.pdp-reviews__summary { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 28px; }
.pdp-reviews__score { font-family: 'Nexa-Black', Arial, sans-serif; font-size: 36px; line-height: 38px; }
@media (min-width: 1024px) { .pdp-reviews__score { font-size: 44px; line-height: 44px; } }
.pdp-reviews__stars { color: #26773C; font-size: 34px; letter-spacing: 2px; }
@media (min-width: 1024px) { .pdp-reviews__stars { font-size: 47px; } }
.pdp-reviews__count { font-family: 'Nexa-Bold', Arial, sans-serif; font-size: 15px; color: #3D3935; }
.pdp-reviews__grid {
  display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none;
}
@media (min-width: 680px) { .pdp-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pdp-reviews__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* Mobile: six stacked cards made for a very long page, so below 680px the grid
   becomes a snap slider. Pure CSS — no library, no JS.
   Selectors are scoped with .pdp-reviews because bundle.css carries
   `ol[class], ul[class] { padding: 0 }` at (0,1,1), which outranks a lone class
   on a <ul> and would otherwise strip the padding below.
   That padding matters: overflow-x also clips vertically, so without it the
   cards' hard drop shadow and the featured flag (top: -12px) get cut off. */
@media (max-width: 679px) {
  .pdp-reviews .pdp-reviews__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 18px 16px 14px;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .pdp-reviews .pdp-reviews__grid::-webkit-scrollbar { display: none; }
  .pdp-reviews .pdp-reviews__card { scroll-snap-align: center; }
  .pdp-reviews .pdp-reviews__grid:focus-visible { outline: 2px solid #26773C; outline-offset: -2px; border-radius: 8px; }
}
.pdp-reviews__card {
  position: relative; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #000, 0 4px 0 0 #000;
  padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 0;
}
.pdp-reviews__card.is-featured { box-shadow: inset 0 0 0 2px #000, 0 4px 0 0 #000; }

/* UGC cards lift and tilt very slightly on hover. Alternating direction so a
   row doesn't lean the same way. Suppressed under prefers-reduced-motion. */
.pdp-reviews__card { transition: transform .25s ease, box-shadow .25s ease; }
.pdp-reviews__card:hover { transform: rotate(-1.2deg) translateY(-4px); box-shadow: inset 0 0 0 1px #000, 0 8px 0 0 #000; }
.pdp-reviews__card:nth-child(even):hover { transform: rotate(1.2deg) translateY(-4px); }
.pdp-reviews__card.is-featured:hover { box-shadow: inset 0 0 0 2px #000, 0 8px 0 0 #000; }
.pdp-reviews__card:focus-within { transform: rotate(-1.2deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .pdp-reviews__card, .pdp-reviews__card:hover, .pdp-reviews__card:focus-within { transform: none; transition: none; }
}
.pdp-reviews__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 1; font-size: 11px; padding: 5px 12px; }
.pdp-reviews__media {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 2px #000; background: #EFF9E1;
}
.pdp-reviews__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-reviews__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 4px 4px; }
.pdp-reviews__rating { margin: 0; font-size: 16px; letter-spacing: 2px; }
.pdp-reviews__rating-on { color: #26773C; }
.pdp-reviews__rating-off { color: #D3D3C8; }
.pdp-reviews__quote { margin: 0; font-size: 15px; line-height: 23px; color: #3D3935; text-wrap: pretty; }
.pdp-reviews__quote::before { content: '\201C'; }
.pdp-reviews__quote::after { content: '\201D'; }
.pdp-reviews__author { display: flex; align-items: center; gap: 8px; margin: 0; }
.pdp-reviews__verified { width: 20px; height: 20px; font-size: 11px; flex-shrink: 0; }
.pdp-reviews__name { font-family: 'Nexa-Black', Arial, sans-serif; font-size: 13px; line-height: 18px; }
.pdp-reviews__location { font-size: 13px; color: #7B7B7B; }
/* END_SECTION:pdp-reviews */

/* START_SECTION:pdp-subscribe (INDEX:46) */
/* Scoped with the section class on purpose: the theme's reset in bundle.css
   carries `ol[class], ul[class] { padding: 0 }`, whose (0,1,1) specificity
   beats a lone class on a <ul> and silently flattens this padding. */
.pdp-sub { padding: 40px 0; font-family: 'Nexa-Regular', Arial, sans-serif; color: #000; background-color: #F3DE94; }
@media (min-width: 1024px) { .pdp-sub { padding: 56px 0; } }
.pdp-sub__card {
  position: relative; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px #000, 0 4px 0 0 #000;
}
@media (min-width: 1024px) { .pdp-sub__card { border-radius: 20px; } }
.pdp-sub__flag { position: absolute; top: 58px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 1; }
@media (min-width: 1024px) { .pdp-sub__flag { top: 46px; } }
.pdp-sub__banner {
  margin: 0; border-radius: 16px 16px 0 0; background: #EFF9E1;
  box-shadow: inset 1px 0 0 0 #000, inset -1px 0 0 0 #000, inset 0 1px 0 0 #000;
  border-bottom: 2px solid #000; padding: 18px 20px 14px; display: flex; gap: 8px;
  align-items: center; justify-content: center; text-align: center;
  font-family: 'Nexa-Bold', Arial, sans-serif; font-size: 14px; line-height: 20px; color: #26773C;
}
@media (min-width: 1024px) { .pdp-sub__banner { border-radius: 20px 20px 0 0; padding: 24px 40px 14px; font-size: 15px; } }
.pdp-sub__banner svg { flex-shrink: 0; }
.pdp-sub .pdp-sub__benefits {
  display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 24px 20px; list-style: none;
}
@media (min-width: 1024px) { .pdp-sub .pdp-sub__benefits { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 32px 80px; } }
.pdp-sub__benefits li {
  display: flex; flex-direction: row; gap: 12px; align-items: center;
  font-family: 'Nexa-Bold', Arial, sans-serif; font-size: 15px; line-height: 22px;
}
@media (min-width: 1024px) { .pdp-sub__benefits li { flex-direction: column; text-align: center; } }
.pdp-sub__foot {
  display: flex; flex-direction: column; gap: 16px; align-items: stretch;
  padding: 0 20px 24px; box-sizing: border-box;
}
@media (min-width: 1024px) {
  .pdp-sub__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 0 80px 32px; }
}
.pdp-sub__price { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin: 0; }
.pdp-sub__was { font-size: 18px; color: #7B7B7B; text-decoration: line-through; }
.pdp-sub__now { font-family: 'Nexa-Black', Arial, sans-serif; font-size: 28px; line-height: 32px; }
@media (min-width: 1024px) { .pdp-sub__now { font-size: 32px; line-height: 36px; } }
.pdp-sub__unit { font-size: 14px; color: #3D3935; }
.pdp-sub__form { margin: 0; }
.pdp-sub__unavailable { margin: 0; font-family: 'Nexa-Bold', Arial, sans-serif; color: #7B7B7B; }
/* END_SECTION:pdp-subscribe */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:product-accordion (INDEX:94) */
/* The dropdown-toggle pickle ships at 48x48; scale it for the accordion rows.
   The 45deg turn makes the cross read as an X when the row is open. */
.product-accordion__toggle { flex-shrink: 0; width: 32px; height: 32px; display: block; }
.product-accordion__toggle svg { width: 100%; height: 100%; display: block; }
/* END_SNIPPET:product-accordion */

/* START_SNIPPET:product-gallery-badge (INDEX:96) */
.product-gallery-badge {
    position: absolute;
    left: -5px;
    top: 30px;
    z-index: 10;
    pointer-events: none;
    transform: rotate(-4.26deg);
    transform-origin: center center;
  }

  .product-gallery-badge__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 2px solid;
    font-family: Nexa-Black, sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }

  @media screen and (min-width: 1024px) {
    .product-gallery-badge {
      left: -4.5px;
    }
  }
/* END_SNIPPET:product-gallery-badge */

/* START_SNIPPET:product-gallery-new (INDEX:97) */
.product-gallery__nav-btn {
    background: #fff;
  }

  .product-gallery__nav-btn path {
    stroke: #000;
  }

  .product-gallery__pagination.swiper-pagination,
  .product-gallery__pagination.swiper-pagination-clickable,
  .product-gallery__pagination.swiper-pagination-bullets,
  .product-gallery__pagination.swiper-pagination-horizontal {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: none !important;
    width: auto !important;
  }

  @media screen and (max-width: 1023px) {
    .product-gallery__pagination.swiper-pagination,
    .product-gallery__pagination.swiper-pagination-clickable,
    .product-gallery__pagination.swiper-pagination-bullets,
    .product-gallery__pagination.swiper-pagination-horizontal {
      display: flex !important;
    }
  }

  .product-gallery__pagination .swiper-pagination-bullet,
  .product-gallery__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    display: inline-block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #d4d4d4;
    opacity: 1;
  }

  .product-gallery__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #26773c !important;
  }

  .product-gallery .swiper-wrapper {
    height: auto !important;
  }

  .product-gallery__thumbs-row {
    overflow: visible;
    padding-block: 2px;
  }

  .product-gallery__thumbnail {
    cursor: pointer;
    border: 1px solid transparent;
    box-sizing: border-box;
  }

  .product-gallery__thumbnail--active {
    border-color: #000;
  }

  .product-gallery__thumbnails-track {
    overflow-x: hidden;
    overflow-y: visible;
    padding-block: 2px;
  }

  .product-gallery__thumbnails-inner {
    margin-inline: auto;
  }

  .product-gallery__thumbnails-track::-webkit-scrollbar {
    display: none;
  }

  .product-gallery__thumb-nav {
    border: none;
    padding: 0;
  }

  .product-gallery__variant-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background-color: #26773c;
    background-image: url({{ 'product-gallery-bg.static.png' | asset_url }});
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    pointer-events: none;
  }

  @media screen and (min-width: 1024px) {
    .product-gallery__nav-btn {
      background: #26773c;
    }

    .product-gallery__nav-btn path {
      stroke: #fff;
    }
  }
/* END_SNIPPET:product-gallery-new */

/* START_SNIPPET:product-highlight-tags (INDEX:101) */
.product-highlight-tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .product-highlight-tag {
    font-family: Nexa-Regular, sans-serif;
    background-color: #eff9e1;
    border-radius: 4px;
    width: 100%;
    padding: 4px 14px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
  }

  @media screen and (min-width: 768px) {
    .product-highlight-tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .product-highlight-tag {
      width: auto;
      padding: 4px 8px;
    }
  }
/* END_SNIPPET:product-highlight-tags */

/* START_SNIPPET:product-main-body (INDEX:102) */
.product__description-rich p {
          margin-bottom: 12px;
        }

        .product__description-rich ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .product__description-rich li {
          position: relative;
          padding-left: 20px;
        }

        .product__description-rich li::before {
          content: '';
          position: absolute;
          left: 2px;
          top: 7px;
          width: 10px;
          height: 6px;
          border-left: 2px solid #26773c;
          border-bottom: 2px solid #26773c;
          transform: rotate(-45deg);
        }

        /* ----------------------------------------------------------------
           Description "See More": the collapsed height is a fixed number of
           LINES rather than a word count, so every product opens at the same
           height no matter how long its copy is. Expanding animates the
           height instead of swapping two elements, so ADD TO CART glides
           down rather than jumping.
           The clamp only applies once Alpine has set `is-clamped`, so with
           JavaScript off the full description stays visible.
        ---------------------------------------------------------------- */
        .product__description-body {
          overflow: hidden;
        }

        .product__description {
          scroll-margin-top: 120px;
        }

        .product__description.is-clamped .product__description-body {
          max-height: var(--pdb-max, none);
          -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent);
        }

        .product__description.is-clamped.is-anim .product__description-body {
          transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .product__description.is-clamped .product__description-body.is-open {
          -webkit-mask-image: none;
          mask-image: none;
        }

        .product__description-toggle {
          margin-top: 10px;
          border: 0;
          font: inherit;
          font-size: 13px;
          line-height: 1;
          cursor: pointer;
        }

        .product__description-toggle:focus-visible {
          outline: 2px solid #26773c;
          outline-offset: 2px;
        }

        @media (prefers-reduced-motion: reduce) {
          .product__description.is-clamped.is-anim .product__description-body {
            transition: none;
          }
        }
/* END_SNIPPET:product-main-body */

/* START_SNIPPET:product-video-slider (INDEX:109) */
.product-video-testimonials {
      padding-bottom: 1.5rem;
      padding-top: 8px;
      gap: 12px;
    }

    .product-video-testimonials__heading {
      font-family: Nexa-Black, sans-serif;
      font-size: 16px;
      line-height: 24px;
      text-transform: uppercase;
    }

    @media screen and (max-width: 767px) {
      .product-video-testimonials {
        padding-bottom: 1rem;
      }
    }

    @media screen and (min-width: 1024px) {
      .product-video-testimonials {
        padding-top: 16px;
      }
    }

    /* 4/5 rather than the original 9/14. The posters and videos behind these
       cards are landscape (1920x1080 / 375x211); a 9/14 frame cropped 64% of
       each one away, which is what made them look squashed. 4/5 keeps the
       portrait feel while showing ~45%. Vertical 9:16 posters would remove the
       cropping entirely — the `poster` setting on each block takes them. */
    .product-video-testimonials__card {
      aspect-ratio: 4 / 5;
      border-radius: 16px;
      background: #d9d9d9;
    }

    .product-video-testimonials__poster::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.3) 100%);
      pointer-events: none;
    }

    .product-video-testimonials__play {
      position: absolute;
      bottom: 8px;
      right: 8px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      width: 27.2px;
      height: 27.2px;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(20px);
    }

    .product-video-testimonials__pagination.swiper-pagination,
    .product-video-testimonials__pagination.swiper-pagination-clickable,
    .product-video-testimonials__pagination.swiper-pagination-bullets,
    .product-video-testimonials__pagination.swiper-pagination-horizontal {
      position: static !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
      display: flex !important;
      width: auto !important;
      justify-content: flex-start;
      gap: 0.5rem;
    }

    .product-video-testimonials__pagination .swiper-pagination-bullet,
    .product-video-testimonials__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
      display: inline-block !important;
      position: static !important;
      top: auto !important;
      left: auto !important;
      width: 1.875rem;
      height: 0.375rem;
      margin: 0 !important;
      border-radius: 9999px;
      background: #d4d4d4;
      opacity: 1;
    }

    .product-video-testimonials__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background: #2f7d3a !important;
    }

    .product-video-testimonials__slider .swiper-wrapper {
      height: auto !important;
    }

    .product-video-testimonials__slider:not(.swiper-initialized) .swiper-wrapper {
      display: flex;
      gap: 0.75rem;
    }

    .product-video-testimonials__slider:not(.swiper-initialized) .swiper-slide {
      flex: 0 0 calc((100% - 0.75rem * 2.1) / 3.1);
    }

    @media screen and (max-width: 1023px) {
      .product-video-testimonials__card {
        aspect-ratio: 4 / 5;
        border-radius: 16px;
      }

      .product-video-testimonials__play {
        width: 27.2px;
        height: 27.2px;
      }
    }

    @media screen and (min-width: 1024px) {
      .product-video-testimonials__play {
        bottom: 8px;
        right: 8px;
      }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
      .product-video-testimonials__slider:not(.swiper-initialized) .swiper-wrapper {
        gap: 1rem;
      }

      .product-video-testimonials__slider:not(.swiper-initialized) .swiper-slide {
        flex-basis: calc((100% - 1rem * 2.1) / 3.1);
      }
    }

    @media screen and (min-width: 1024px) {
      .product-video-testimonials__slider:not(.swiper-initialized) .swiper-wrapper {
        gap: 0.75rem;
      }

      .product-video-testimonials__slider:not(.swiper-initialized) .swiper-slide {
        flex-basis: calc((100% - 0.75rem * 2.1) / 3.1);
      }
    }

    .product-video-testimonials__popup {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .product-video-testimonials__popup-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
    }

    .product-video-testimonials__popup-player {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 420px;
      aspect-ratio: 9 / 16;
      border-radius: 16px;
      overflow: hidden;
      background: #000;
    }

    .product-video-testimonials__popup-video-wrap {
      position: absolute;
      inset: 0;
    }

    .product-video-testimonials__popup-player video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #000;
    }

    .product-video-testimonials__popup-close {
      position: absolute;
      top: -44px;
      right: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      font-size: 20px;
      line-height: 1;
    }

    .product-video-testimonials__popup-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      font-size: 22px;
      line-height: 1;
    }

    .product-video-testimonials__popup-nav--prev {
      left: -56px;
    }

    .product-video-testimonials__popup-nav--next {
      right: -56px;
    }

    @media screen and (max-width: 767px) {
      .product-video-testimonials__popup-nav--prev {
        left: 8px;
      }

      .product-video-testimonials__popup-nav--next {
        right: 8px;
      }
    }
/* END_SNIPPET:product-video-slider */