.stacked-card-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 4rem;
}

.stacked-card-img-wrapper {
  display: flex;
}

.stacked-card {
  width: 100%;
  overflow: hidden;
  position: sticky;
  display: block;
  border-radius: var(--card_radius);
  top: 8rem;
  transform: translateY(calc((1 - 1)* 2rem));

  .stacked-card-content {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 0;
    top: calc(
      20px + var(--desktop_transparent_header_height, 0px) +
        var(--announcement_height, 0px)
    );
    text-align: left;
  }

  img {
    width: 100%;
    object-fit: cover;

    &.desktop {
      display: none;
    }
  }

  @media (min-width: 768px) {
    .stacked-card-content {
      max-width: 500px;
      padding-bottom: 30px;
    }

    img {
      &.desktop {
        display: block;
      }
      &.mobile {
        display: none;
      }
    }
  }

  @media (min-width: 1025px) {
    .stacked-card-content {
      max-width: 600px;
      left: 2rem;
      right: 2rem;
    }

    img {
      width: 100%;
      max-height: 80vh;
    }
  }

  @media (min-width: 1200px) {
    .stacked-card-content {
      left: 4rem;
      right: 4rem;
    }
  }
}

#my-store .section-footer {
  background-color: black;
}

.custom .image-with-text--image {
  --image_bg: transparent;
}

.form-group {
  position: relative;
}

.custom .newsletter--form {
  .form-group {
    position: relative;
    display: flex;
  }

  input {
    padding-right: 0;
    padding-left: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .button {
    min-height: 0;
    min-width: 0;
    padding: 0;
    bottom: 15px;
    right: 0;
    flex-shrink: 0;
    z-index: 1;
    aspect-ratio: 1 / 1;
    height: 32px;
    width: auto;
    position: absolute;
  }
}

.custom .swiper--button-wrapper .swiper-button {
  bottom: 20px;
}

.custom .collapsible-content--wrapper {
  --heading_font_family: Poppins;
  --heading_font_weight: 600;
  --h6: 24px;
}

@media (max-width: 767px) {
  .custom .collapsible-content--wrapper {
    --h6: 17px;
  }

  .custom .swiper--button-wrapper {
    --slider_icon_width: 30px;
    --slider_arrow_width: 30px;
  }

  .custom .newsletter--form .button {
    bottom: 11px;
  }

}

.custom .multiboxes--wrapper {
  align-items: stretch;
}

.custom .section-footer {
  background-color: #e4e8dc;
}

.heading-label {
  color: inherit;
}

.footer-cards {
  display: grid;
  grid-template-columns: 1fr;        /* 1 card per row on ALL viewports */
  gap: 18px;
  margin-bottom: 32px;

  .footer-card {
    border-radius: 20px;
    display: grid;
    grid-template-columns: auto 1fr; /* icon | text block */
    grid-template-rows: auto auto;   /* title, description */
    column-gap: 14px;
    align-items: center;
    color: #000000;
    background-color: #ffffff;
    padding: 20px 16px;
    box-sizing: border-box;

    .heading {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 3px;
      grid-column: 2;
      grid-row: 1;
    }

    &.is-primary {
      background-color: #b2f451;
    }

    img {
      width: 42px;
      margin: 0;
      grid-row: 1 / span 2;          /* icon spans both title + description */
      grid-column: 1;
      align-self: center;
    }

    > div:last-child {
      font-size: 14px;
      line-height: 1.3;
      grid-column: 2;
      grid-row: 2;
    }
  }
}

.fixed-header {
  position: fixed;
  width: 100%;
  z-index: 50;
}



@media (max-width: 767px) {
  .bs-products--content {
    padding-bottom: 0px !important;
  }

  /* Footer cards — mobile:
     - 1 card per row (full width)
     - icon left, title + description on the right
  */
  .footer-cards {
    grid-template-columns: 1fr;      /* 1 card per row */
    gap: 14px;
  }

  .footer-cards .footer-card {
    display: grid;
    grid-template-columns: auto 1fr; /* icon | text block */
    grid-template-rows: auto auto;   /* title, description */
    column-gap: 10px;
    align-items: center;             /* center icon + text block vertically */
    padding: 18px 14px;
  }

  .footer-cards .footer-card img {
    width: 36px;
    margin: 0;
    grid-row: 1 / span 2;            /* icon spans both text rows */
    grid-column: 1;
    align-self: center;              /* make sure icon sits in the middle */
  }

  .footer-cards .footer-card .heading {
    font-size: 16px;
    line-height: 1.25;
    margin-bottom: 4px;
    grid-column: 2;
    grid-row: 1;
  }

  .footer-cards .footer-card > div:last-child {
    font-size: 14px;
    line-height: 1.3;
    grid-column: 2;
    grid-row: 2;
  }
}
.text-background-cover {
  background-image: linear-gradient(
    45deg,
    var(--highlight_background),
    var(--highlight_background)
  ) !important;
  padding-right: .5rem;
}

.section-in-view .text-background-cover {
  background-position: .5rem .5em;
}










.countdown--content-subheading {
  color: var(--image_overlay_heading);
  padding-bottom: 1.5rem;
}

.image-with-text--outer {
  overflow: visible !important;
  position: relative;
}

.circle-button {
  z-index: 10;
  position: absolute;
  width: 75px;
  height: 75px;
  border-radius: 100vmax;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 15%;
  left: 5%;
}

.circle-button .arrow {
  font-size: 12px;
  color: white;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #010101;
  border-radius: 100vh;
}

.custom .product--actual-price {
  --heading_font_weight: 600;
  font-family: var(--body_font_family);
}

@media (min-width: 767px) {
  .circle-button {
    width: 112.5px !important;
    height: 112.5px !important;
    top: 15%;
    left: 5%;
  }

  .circle-button .arrow {
    width: 63px;
    height: 63px;
  }
}


.rotating-360 {
    animation: rotate360 infinite 10s linear;
}

@keyframes rotate360 {
  to {
    transform: rotate(360deg);
  }
}

.absolute {
  position: absolute;
}

.mb-20 {
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .footer--logo {
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important; /* preserves your theme’s image width setting */
  }
}

@media (min-width: 768px) {
  .footer-card {
    max-width: 420px;   /* adjust as you like: 420–540px works great */
  }
}