/** Shopify CDN: Minification failed

Line 1572:25 Expected "]" to go with "["

**/
.hero {
  --hero-current-height: var(--hero-height);

  position: relative;
  z-index: 1;

  display: block;
  width: 100%;
  height: var(--hero-current-height);
  min-height: 400px;

  overflow: hidden;

  background: #131618;
  border: var(--hero-border-width) solid var(--hero-border-color);

  font-family: var(--hero-body-font);
  isolation: isolate;
}

.hero *,
.hero *::before,
.hero *::after {
  box-sizing: border-box;
}


/* =========================================================
   VIEWPORT / SLIDES
   ========================================================= */

.hero__viewport,
.hero__slides {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    opacity var(--hero-transition-speed, 700ms) ease,
    visibility var(--hero-transition-speed, 700ms) ease;
}

.hero__slide.is-active {
  z-index: 2;

  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.hero__background {
  position: absolute;
  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #131618;
}

.hero__background-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}

.hero__background-image--mobile {
  display: none;
}

.hero__background-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.8) 0%, rgba(8, 8, 8, 0.0666667) 70%),
    linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 76.29%);

  pointer-events: none;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero__content {
  position: absolute;

  top: var(--hero-content-top);
  left: var(--hero-content-left);

  z-index: 10;

  width: var(--hero-content-width);
  max-width: min(
    var(--hero-content-width),
    calc(100% - 40px)
  );

  margin: 0;
  padding: 0;

  color: var(--hero-body-color);

  opacity: 0;
  transform: translate3d(0, 20px, 0);

  transition:
    opacity 600ms ease 100ms,
    transform 600ms ease 100ms;
}

.hero__slide.is-active .hero__content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.hero__eyebrow {
  margin: 0 0 8px;

  color: var(--hero-eyebrow-color);

  font-size: var(--hero-eyebrow-size);
  font-weight: 700;
  line-height: 1.2;
}

.hero__kicker {
  margin: 0 0 10px;

  color: var(--hero-kicker-color);

  font-size: var(--hero-kicker-size);
  font-weight: 800;
  line-height: 1.1;

  text-transform: uppercase;
}

.hero__heading {
  width: max-content;
  max-width: 100%;

  margin: 0;

  color: var(--hero-heading-color);

  font-family: var(--hero-heading-font);

  font-size: var(--hero-heading-size);
  font-weight: var(--hero-heading-weight);

  line-height: 0.98;
  letter-spacing: 0;

  text-transform: uppercase;
}

.hero__heading p {
  margin: 0;
  color: inherit;
}

.hero__description {
  width: 100%;
  max-width: var(--hero-description-width);

  margin-top: 18px;

  color: var(--hero-body-color);

  font-size: var(--hero-description-size);
  font-weight: var(--hero-body-weight);
  line-height: 1.5;
}

.hero__description p {
  margin: 0;
  color: inherit;
}


/* =========================================================
   BUTTON
   ========================================================= */

.hero__button-wrapper {
  display: flex;

  margin-top: 22px;
}

.hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 42px;

  padding:
    var(--hero-button-padding-y)
    var(--hero-button-padding-x);

  color: var(--hero-button-text);
  background: var(--hero-button-background);

  border: 1px solid var(--hero-button-border);
  border-radius: var(--hero-button-radius);

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.hero__button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.hero__button svg {
  width: 14px;
  height: 14px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   MACHINE
   ========================================================= */

.hero__machine {
  position: absolute;

  left: var(--hero-machine-left);
  bottom: var(--hero-machine-bottom);

  z-index: 20;

  display: block;

  width: var(--hero-machine-width);

  max-width: 407px;
  height: auto;

  margin: 0;
  padding: 0;

  pointer-events: none;

  transform: translateX(-50%);
}

.hero__machine-image {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;
  border-radius: 20px;
}


/* =========================================================
   SPECIAL MACHINE SLIDES
   ========================================================= */

@media screen and (min-width: 750px) {

  .hero__slide[data-index="1"] .hero__machine,
  .hero__slide[data-index="3"] .hero__machine,
  .hero__slide[data-index="5"] .hero__machine {
    bottom: 140px;
  }
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.hero__product-card {
  position: absolute;

  top: var(--hero-card-top);
  right: var(--hero-card-right);

  z-index: 30;

  width: var(--hero-card-width);
  max-width: var(--hero-card-width);

  margin: 0;
  padding: 0;

  opacity: 0;

  transform: translate3d(0, 20px, 0);

  transition:
    opacity 600ms ease 250ms,
    transform 600ms ease 250ms;
}

.hero__slide.is-active .hero__product-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero-product {
  display: block;

  width: 100%;

  overflow: hidden;

  color: var(--hero-card-text);
  background: var(--hero-card-background);

  border-radius: var(--hero-card-radius);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);

  text-align: center;

  text-decoration: none;
}

.hero-product__image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  padding:
    var(--hero-card-padding)
    var(--hero-card-padding)
    0;
}

.hero-product__image img {
  display: block;

  width: 100%;
  max-width: 125px;
  height: 100px;

  object-fit: contain;
}

.hero-product__content {
  padding:
    5px
    var(--hero-card-padding)
    var(--hero-card-padding);
}

.hero-product__vendor {
  margin-bottom: 4px;

  font-size: 9px;
  line-height: 1.2;

  opacity: 0.6;
}

.hero-product__title {
  margin: 0;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.hero-product__price {
  margin-top: 8px;

  color: var(--hero-card-price);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}


/* =========================================================
   ARROWS
   ========================================================= */

.hero__arrow {
  position: absolute;
  top: 50%;

  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--hero-arrow-size);
  height: var(--hero-arrow-size);

  margin: 0;
  padding: 0;

  color: var(--hero-arrow-color);
  background: var(--hero-arrow-background);

  border: 1px solid var(--hero-arrow-border);
  border-radius: 50%;

  cursor: pointer;

  transform: translateY(-50%);
}

.hero__arrow--prev {
  left: var(--hero-arrow-offset);
}

.hero__arrow--next {
  right: var(--hero-arrow-offset);
}

.hero__arrow svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.hero__pagination {
  position: absolute;

  top: 40%;
  right: var(--hero-pagination-right);

  z-index: 50;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: var(--hero-pagination-gap);

  transform: translateY(-50%);
}

.hero__pagination-item {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  margin: 0;
  padding: 0;

  background: transparent;

  border: 1px solid transparent;
  border-radius: 50%;

  cursor: pointer;
}

.hero__pagination-dot {
  display: block;

  width: 4px;
  height: 4px;

  background: var(--hero-pagination-color);

  border-radius: 50%;
}

.hero__pagination-item.is-active{
width:20px;
height:20px;
border:2px solid transparent;
border-top-color:var(--hero-pagination-active);
border-right-color:var(--hero-pagination-active);
border-bottom-color:var(--hero-pagination-active);
border-radius:50%;
animation:hero-pagination-rotate 3s linear infinite;
}

.hero__pagination-item.is-active .hero__pagination-dot{
width:5px;
height:5px;
background:var(--hero-pagination-active);
}

@keyframes hero-pagination-rotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}

/* =========================================================
   LARGE DESKTOP — 1400+
   ========================================================= */

@media screen and (min-width: 1400px) {

  .hero {
    --hero-current-height: var(--hero-height);
  }

  .hero__content {
    top: 24%;
    left: 10%;

    width: min(
      var(--hero-content-width),
      420px
    );

    max-width: 420px;
  }

  .hero__heading {
    font-size: 52px;
    white-space: normal;
  }

  .hero__description {
    max-width: 390px;
  }

  .hero__machine {
    left: 55.3%;
    bottom: -86px;

    width: min(
      var(--hero-machine-width),
      407px
    );
  }

  .hero__product-card {
    top: 19%;
    right: 12%;
  }
}


/* =========================================================
   1200 — 1399
   ========================================================= */

@media screen and (min-width: 1200px) and (max-width: 1399px) {

  .hero {
    --hero-current-height: clamp(
      500px,
      42vw,
      620px
    );
  }
   .hero__machine-image {
    width: 85% !important;
  }

  .hero__content {
    top: 20%;
    left: 7%;

    width: min(
      var(--hero-content-width),
      400px
    );

    max-width: 38vw;
  }

  .hero__heading {
    font-size: clamp(
      40px,
      3.6vw,
      48px
    );

    white-space: normal;
  }

  .hero__description {
    max-width: 370px;
    font-size: 12px;
  }

  .hero__button-wrapper {
    margin-top: 20px;
  }

  .hero__machine {
    left: 57%;
    bottom: -70px;

    width: clamp(
      300px,
      30vw,
      390px
    );
  }

  .hero__product-card {
    top: 18%;
    right: 7%;

    /* width: clamp(
      105px,
      9vw,
      125px
    ); */
  }

  .hero__pagination {
    right: 3%;
  }
  /* .hero__slide[data-index="1"] .hero__machine, .hero__slide[data-index="3"] .hero__machine, .hero__slide[data-index="5"] .hero__machine {
	left: 65%;
	bottom: 80px;
	width: 587px;
	max-width: none;
} */
}


/* =========================================================
   990 — 1199
   ========================================================= */

@media screen and (min-width: 990px) and (max-width: 1199px) {

  .hero {
    --hero-current-height: clamp(
      500px,
      47vw,
      570px
    );
  }

  .hero__content {
    top: 18%;
    left: 6%;

    width: min(
      var(--hero-content-width),
      390px
    );

    max-width: 40vw;
  }

  .hero__heading {
    font-size: clamp(
      36px,
      4vw,
      46px
    );

    white-space: normal;
  }

  .hero__description {
    max-width: 350px;
    font-size: 12px;
  }

  .hero__button-wrapper {
    margin-top: 20px;
  }

  .hero__machine {
    left: 59%;
    bottom: -55px;

    width: clamp(
      285px,
      31vw,
      355px
    );
  }

  .hero__product-card {
    top: 18%;
    right: 6%;

    /* width: 105px; */
  }

  .hero__pagination {
    right: 14px;
  }
}


/* =========================================================
   TABLET — 750 — 989
   ========================================================= */

@media screen and (min-width: 750px) and (max-width: 989px) {


.hero__pagination {
    right: 30px;
}

.hero__product-card {
    right: 60px;
}

.hero__content {
    width: 30%;
}


.hero__pagination {
    right: 30px;
}

.hero__product-card {
    right: 60px;
}

.hero__content {
    width: 30%;
}

.hero__machine {
    width: 35%;
}

.hero__eyebrow {
    font-size: 16px !important;
}

.hero__kicker {
    font-size: 22px !important;
}

.hero__heading p  {
    font-size: 30px !important;

a.hero__button {
    font-size: 14px !important;
}
  .hero {
    --hero-current-height: clamp(
      500px,
      66vw,
      620px
    );

    min-height: 500px;
  }

  .hero__content {
    top: 16%;
    left: 6%;

    width: 30%;
    /* max-width: 400px; */
  }

  .hero__eyebrow {
    margin-bottom: 7px;
  }

  .hero__kicker {
    margin-bottom: 9px;
  }

  .hero__heading {
    width: max-content;
    max-width: 100%;

    font-size: clamp(
      32px,
      4.7vw,
      42px
    );

    line-height: 1;

    white-space: normal;
  }

  .hero__description {
    width: 100%;
    max-width: 100%;

    margin-top: 16px;

    font-size: 11px;
    line-height: 1.5;
  }

  .hero__button-wrapper {
    margin-top: 18px;
  }

  .hero__machine {
    /* left: 50%; */
    bottom: -45px;

    width: clamp(
      260px,
      36vw,
      325px
    );

    /* max-width: 325px; */
  }

  .hero__product-card {
    top: 17%;
    right: 6%;
    left: auto;

    /* width: clamp(
      105px,
      11vw,
      120px
    );

    max-width: 120px; */
  }

  .hero-product__image {
    height: 85px;
  }

  .hero-product__image img {
    max-width: 110px;
    height: 80px;
  }

  .hero__pagination {
    right: 10px;
  }

  .hero__slide[data-index="1"] .hero__machine,
  .hero__slide[data-index="3"] .hero__machine,
  .hero__slide[data-index="5"] .hero__machine {
    /* left: 84%; */
    bottom: 200px;
    /* width: 585px;
    max-width: none; */
  }

}


}


/* =========================================================
   MOBILE — <= 749
   ========================================================= */

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

  .hero {
    --hero-current-height: var(--hero-height-mobile);

    position: relative;

    width: 100%;
    height: var(--hero-current-height);

    min-height: 0;

    overflow: hidden;

    border-width: 0;
  }

  .hero__viewport,
  .hero__slides {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }

  .hero__slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }


  /* -------------------------------------------------------
     MOBILE BACKGROUND
     ------------------------------------------------------- */

  .hero__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }

  .hero__background-image--desktop {
    display: none !important;
  }

  .hero__background-image--mobile {
    display: block !important;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
      Keep image centered. Theme editor can control actual
      crop through the uploaded mobile image itself.
    */
    object-position: center center;
  }

  .hero__background-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.08) 38%,
        rgba(0, 0, 0, 0.18) 100%
      );
  }


  /* -------------------------------------------------------
     MOBILE CONTENT
     ------------------------------------------------------- */

  .hero__content {
    position: absolute;

    top: clamp(
      62px,
      9vw,
      76px
    );

    left: 50%;

    width: calc(100% - 28px);

    max-width: 500px;

    margin: 0;
    padding: 0;

    text-align: center;

    /*
      IMPORTANT:
      Keep translateX here and also on the ACTIVE selector
      below. This prevents the desktop active animation rule
      from pushing mobile content off-screen.
    */
    transform: translate3d(-50%, 20px, 0);

    z-index: 40;
  }

  .hero__slide.is-active .hero__content {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    padding: 15px 0px;
  }

  .hero__eyebrow {
    margin: 0 0 7px;

    /* font-size: clamp(
      9px,
      2.4vw,
      11px
    ); */

    line-height: 1.25;
  }

  .hero__kicker {
    margin: 0 0 8px;

    font-size: clamp(
      12px,
      3.2vw,
      15px
    );

    line-height: 1.15;
  }

  .hero__heading {
    width: 100%;
    max-width: 100%;

    margin: 0;

    font-size: clamp(
      25px,
      7vw,
      42px
    );

    line-height: 1.05;

    white-space: normal;

    text-align: center;

    overflow-wrap: normal;
    word-break: normal;
  }

  .hero__heading p {
    margin: 0;
  }

  .hero__description {
    width: 100%;

    max-width: min(
      500px,
      86vw
    );

    margin: 14px auto 0;

    font-size: clamp(
      9px,
      2.2vw,
      12px
    );

    line-height: 1.5;

    text-align: center;
  }

  .hero__description p {
    margin: 0;
  }


  /* -------------------------------------------------------
     MOBILE BUTTON
     ------------------------------------------------------- */

  .hero__button-wrapper {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 14px;

    position: relative;

    z-index: 50;
  }

  .hero__button {
    position: relative;

    z-index: 50;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 8px 18px;

    font-size: 10px;

    line-height: 1;

    border-radius: 20px;
  }

  .hero__button svg {
    display: none;
  }


  /* -------------------------------------------------------
     MOBILE PRODUCT CARD
     ------------------------------------------------------- */

  .hero__product-card {
    position: absolute;

    top: clamp(
      300px,
      47vw,
      419px
    );

    left: 50%;
    right: auto;
    bottom: auto;

    width: clamp(
      145px,
      42vw,
      180px
    );

    max-width: 180px;

    margin: 0;
    padding: 0;

    z-index: 60;

    opacity: 0;

    transform: translate3d(
      -50%,
      20px,
      0
    );
  }

  .hero__slide.is-active .hero__product-card {
    opacity: 1;

    transform: translate3d(
      -50%,
      -10%,
      0
    );
  }

  .hero-product {
    width: 100%;

    overflow: hidden;

    border-radius: 18px;

    box-shadow:
      0 15px 35px rgba(0, 0, 0, 0.22);
  }

  .hero-product__image {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    height: clamp(
      60px,
      18vw,
      78px
    );

    padding: 8px 10px 0;
  }

  .hero-product__image img {
    display: block;

    width: 100%;

    max-width: clamp(
      96px,
      30vw,
      120px
    );

    height: clamp(
      54px,
      17vw,
      70px
    );

    object-fit: contain;
  }

  .hero-product__content {
    padding: 5px 10px 11px;
  }

  .hero-product__vendor {
    margin-bottom: 4px;

    font-size: clamp(
      7px,
      2vw,
      8px
    );

    line-height: 1.2;
  }

  .hero-product__title {
    margin: 0;

    font-size: clamp(
      8.5px,
      2.5vw,
      10px
    );

    line-height: 1.25;
  }

  .hero-product__price {
    margin-top: 6px;

    font-size: clamp(
      8.5px,
      2.5vw,
      10px
    );

    line-height: 1.15;
  }


  /* -------------------------------------------------------
     MOBILE MACHINE
     ------------------------------------------------------- */

  .hero__machine {
    position: absolute;

    left: 50%;
    right: auto;

    top: auto;

    bottom: -60px;

    width: clamp(
      185px,
      55vw,
      240px
    );

    max-width: 240px;

    height: auto;

    margin: 0;
    padding: 0;

    z-index: 20;

    transform: translateX(-50%);

    pointer-events: none;
  }

  .hero__machine-image {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    object-position: center bottom !important;
  }


  /* -------------------------------------------------------
     SPECIAL MACHINE SLIDES MOBILE
     ------------------------------------------------------- */

   .hero__slide[data-index="0"] .hero__machine,
  .hero__slide[data-index="2"] .hero__machine,
  .hero__slide[data-index="4"] .hero__machine {
    /* bottom: -20px; */
    left: 60%;
    /* width: 50%; */
    /* max-width: none; */
  }


  /* =========================================
     ODD SLIDES — 1, 3, 5
     ========================================= */
  .hero__slide[data-index="1"] .hero__machine,
  .hero__slide[data-index="3"] .hero__machine,
  .hero__slide[data-index="5"] .hero__machine {
    bottom: 0 !important;
    /* width: 50%; */
    max-width: none;
    padding: 10px;
  }


  .hero__slide[data-index="1"] .hero__machine-image,
  .hero__slide[data-index="3"] .hero__machine-image,
  .hero__slide[data-index="5"] .hero__machine-image {
    display: block !important;

    width: 80% !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    object-position: center bottom !important;
  }

  .hero__slide[data-index="1"] .hero__slide.is-active .hero__product-card {
	  transform: translate3d(-50%,0%,0);
  }

  .hero__slide[data-index="0"] .hero__machine-image,
  .hero__slide[data-index="2"] .hero__machine-image,
  .hero__slide[data-index="4"] .hero__machine-image {
    display: block !important;

    width: 50% !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    object-position: center bottom !important;
  }

  /* .hero__slide[data-index="3"] .hero__product-card {
	opacity: 1;
	transform: translate3d(-50%,-50px,0);
} */
.hero__slide[data-index="2"] .hero__product-card {
	opacity: 1;
	transform: translate3d(-50%,33px,0);
}


  /* -------------------------------------------------------
     MOBILE PAGINATION
     ------------------------------------------------------- */

  .hero__pagination {
    position: absolute;

    top: 50%;
    right: 5px;
    left: auto;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 14px;
    height: auto;

    margin: 0;
    padding: 0;

    gap: 3px;

    transform: translateY(-50%);

    z-index: 80;

    visibility: visible;
    opacity: 1;

    pointer-events: auto;
  }

  .hero__pagination-item {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 50%;
  }

  .hero__pagination-dot {
    display: block;

    width: 3px;
    height: 3px;

    background: var(--hero-pagination-color);

    border-radius: 50%;
  }

  /* .hero__pagination-item.is-active {
    border-color: var(--hero-pagination-active);

  }

  .hero__pagination-item.is-active .hero__pagination-dot {
    width: 5px;
    height: 5px;

    background: var(--hero-pagination-active);
  } */


  /* -------------------------------------------------------
     MOBILE ARROWS OFF
     ------------------------------------------------------- */

  .hero__arrow {
    display: none !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;
  }

   .hero__slide[data-index="1"] .hero__machine-image{
        width: 80%;
        left: 56%;
 
    }

}


/* =========================================================
   SMALL MOBILE — <= 480
   ========================================================= */

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

  .hero__slide[data-index="3"] .hero__slide.is-active .hero__product-card,
  .hero__slide[data-index="1"] .hero__slide.is-active .hero__product-card{
    opacity: 1;
    border: 2px solid;
    transform: translate3d(
      -50%,
      2%,
      0
    );
  }
  .hero__slide[data-index!="2"] .hero__slide.is-active .hero__product-card{
    opacity: 1;

    transform: translate3d(
      -50%,
      0%,
      0
    );
  }


  .hero {
    --hero-current-height: 570px;

    height: 570px;
  }

  .hero__content {
    top: 64px;

    width: calc(100% - 28px);
  }

  .hero__heading {
    font-size: clamp(
      25px,
      8vw,
      31px
    );
  }

  .hero__description {
    max-width: 290px;

    font-size: 9.5px;

    line-height: 1.45;
  }

  .hero__product-card {
    top: 315px;

    width: 155px;
    max-width: 155px;
  }

  .hero-product__image {
    height: 66px;
  }

  .hero-product__image img {
    max-width: 105px;
    height: 60px;
  }

  .hero__machine {
    bottom: -60px;

    width: 210px;
    max-width: 210px;
  }

  .hero__slide[data-index="1"] .hero__machine,
  .hero__slide[data-index="3"] .hero__machine,
  .hero__slide[data-index="5"] .hero__machine {
    bottom: -75px;
    width: 235px;
    max-width: 235px;
  }


    .hero__slide[data-index="0"]   .hero__machine , .hero__slide[data-index="4"] .hero__machine {
        bottom: -40px !important;
    }
    .hero__slide[data-index="1"] .hero__product-card {
        top: 340px;
     
}

 .hero__slide[data-index="1"] .hero__machine {
        margin-bottom: 20px;
       left:56%;
 }
 .hero__slide[data-index="3"] .hero__machine {
    width: 50%;
    margin-bottom: 10px;
    left: 55%;
}
}


/* =========================================================
   VERY SMALL MOBILE — <= 360
   ========================================================= */

@media screen and (max-width: 360px) {  
  .hero {
    --hero-current-height: 550px;

    height: 550px;
  }

  .hero__content {
    top: 62px;

    width: calc(100% - 22px);

    max-width: 290px;
  }

  /* .hero__eyebrow {
    font-size: 9px;
  } */

  .hero__kicker {
    font-size: 12px;
  }

  .hero__heading {
    font-size: 24px;
    line-height: 1.05;
  }

  .hero__description {
    max-width: 270px;

    font-size: 8.5px;

    line-height: 1.4;
  }

  .hero__button {
    min-height: 28px;

    padding: 7px 14px;

    font-size: 8.5px;
  }

  .hero__product-card {
    top: 300px;

    width: 145px;
    max-width: 145px;
  }

  .hero-product__image {
    height: 60px;
  }

  .hero-product__image img {
    max-width: 96px;
    height: 54px;
  }

  .hero-product__title {
    font-size: 8.5px;
  }

  .hero-product__price {
    font-size: 8.5px;
  }

  .hero__machine {
    bottom: -50px;

    width: 185px;
    max-width: 185px;
  }

  .hero__slide[data-index="1"] .hero__machine,
  .hero__slide[data-index="3"] .hero__machine,
  .hero__slide[data-index="5"] .hero__machine {
    bottom: -60px;

    width: 200px;
    max-width: 200px;
  }
}


/* =========================================================
   ARROWS OFF BELOW 1400
   ========================================================= */

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

  .hero__arrow {
    display: none !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hero__slide,
  .hero__content,
  .hero__product-card,
  .hero__button {
    transition: none !important;
  }
}

/* =========================================================
   EVEN SLIDE MACHINE OVERFLOW / STACKING FIX
   ---------------------------------------------------------
   data-index is zero-based, so 0, 2, 4 = slides 1, 3, 5.
   Only these slides are allowed to let the machine extend
   outside the hero frame.
   ---------------------------------------------------------
   IMPORTANT: the existing CSS for odd slides 1, 3, 5 is
   intentionally left untouched above.
   ========================================================= */

.hero {
  overflow: visible;
  z-index: 10;
}

.hero__viewport,
.hero__slides {
  overflow: visible;
}

/* ONLY EVEN SLIDES: 0, 2, 4 */
.hero__slide[data-index="0"],
.hero__slide[data-index="2"],
.hero__slide[data-index="4"] {
  overflow: visible;
}

.hero__slide[data-index="0"] .hero__machine,
.hero__slide[data-index="2"] .hero__machine,
.hero__slide[data-index="4"] .hero__machine {
  z-index: 100;
}

.hero__slide[data-index="0"].is-active,
.hero__slide[data-index="2"].is-active,
.hero__slide[data-index="4"].is-active {
  z-index: 20;
}

/* Mobile: same even-slide-only overflow behavior */
@media screen and (max-width: 749px) {
  .hero__product-card {
    max-width: 60% !important;
    width: 60% !important;
}
  .hero {
    overflow: visible;
    z-index: 10;
  }

  .hero__viewport,
  .hero__slides {
    overflow: visible;
  }

  .hero__slide[data-index="0"],
  .hero__slide[data-index="2"],
  .hero__slide[data-index="4"] {
    overflow: visible;
  }

  .hero__slide[data-index="0"] .hero__machine,
  .hero__slide[data-index="2"] .hero__machine,
  .hero__slide[data-index="4"] .hero__machine {
    z-index: 100;
  }

  .hero__slide[data-index="0"].is-active,
  .hero__slide[data-index="2"].is-active,
  .hero__slide[data-index="4"].is-active {
    z-index: 20;
  }
}


@media screen and (max-width: 749px) {
  .hero__slide[data-index="4"] .hero__product-card {
    top: 54% !important;
  }

  .hero__description.rte {
    max-width: 100% !important;
  }
  .hero__heading {
    font-size: 25px !important;
}
.hero__description p{
     font-size: 13px;
}
}

@media screen and (max-width: 480px) {
  .hero__slide[data-index="4"] .hero__product-card {
    top: 340px !important;
  }

  .hero__slide[data-index="4"] .hero__machine {
    bottom: -60px !important;
  }
}




@media(min-width:1024px){
  .hero__slide[data-index="0"] .hero__machine , .hero__slide[data-index="2"] .hero__machine {
    bottom:0px !important;
}
}