.product {
  margin: 0;
}

.product--no-media {
  max-width: 57rem;
  margin: 0 auto;
}

.product__media-wrapper {
  min-width: 0;
  padding-left: 0;
}

.product__media-list .product__media-item {
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.product__media-item > .product-media-open {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100vh - 14rem);
  max-height: calc(100svh - 14rem);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem);
  overflow: hidden;
  border: 0.1rem solid rgba(var(--color-foreground), 0.08);
  border-radius: 1.6rem;
  background: rgba(var(--color-foreground), 0.025);
  cursor: zoom-in;
}

.product-media-open img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-media-open:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.7);
  outline-offset: 0.3rem;
}

.product__media-fallback {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62rem, calc(100vh - 14rem));
  max-height: min(62rem, calc(100svh - 14rem));
  margin: 0 auto;
  object-fit: contain;
}

.product-media-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 1.2rem;
}

.product__info-wrapper {
  padding-left: 0;
  padding-bottom: 0;
}

.product__media-wrapper .slider-component .splide__slide img{
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

.product__media-wrapper .slider-component .splide__slide{
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .product-section {
    margin-top: 0;
  }

  .product__media-item > .product-media-open {
    height: min(82vw, 44rem, calc(100vh - 14rem));
    height: min(82vw, 44rem, calc(100svh - 14rem));
    aspect-ratio: auto;
    padding: 1rem;
    border-radius: 1.2rem;
  }
}

@media screen and (min-width: 750px) {
  .product__info-container--sticky {
    position: sticky;
    top: 3rem;
    z-index: 2;
  }

  .product__info-wrapper {
    padding-left: 5rem;
  }

  .product__media-container .slider-buttons {
    display: none;
  }
}

@media screen and (min-width: 990px) {
  .product:not(.product--no-media):not(.featured-product) {
    justify-content: center;
  }

  .product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
    flex: 0 1 58rem;
    max-width: 58rem;
    width: 58rem;
    padding-bottom: 0;
  }

  /* Only the tablet range (750-989px, further down) gives every slide
     width: 100%; nothing equivalent existed for desktop, so past the first
     image, slides fell back to the default grid item width - each item
     partially visible instead of one full-width photo per swipe/scroll. */
  .product:not(.product--no-media):not(.featured-product) .product__media-list .product__media-item {
    width: 100%;
  }

  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 4rem;
    flex: 1 1 50rem;
    max-width: 60rem;
    width: auto;
  }

  /* A wider column lets the title wrap onto fewer lines, and tightening the
     vertical rhythm around the form trims the rest - both shorten the buy
     box's natural height, so it reads closer to the square photo above it
     instead of trailing well past its bottom edge. */
  .product:not(.product--no-media):not(.featured-product) .product-wrapper_color {
    padding: clamp(1.2rem, 1.4vw, 1.5rem);
  }

  .product:not(.product--no-media):not(.featured-product) .product__info-container > * + * {
    margin: 0.7rem 0;
  }

  .product:not(.product--no-media):not(.featured-product) .product__title {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .product:not(.product--no-media):not(.featured-product) .product__info-container .product-form,
  .product:not(.product--no-media):not(.featured-product) .product__info-container .product__description {
    margin: 1rem 0;
  }

  .product:not(.product--no-media):not(.featured-product) .product-form__buttons {
    margin-top: 1rem;
    gap: 0.7rem;
  }

  .product:not(.product--no-media) .product__info-container .product-form{
    max-width: 450px;
  }
}

/* Product form */

.product-form {
  display: block;
}

/* Form Elements */
.product-form__input{
  flex: 0 0 100%;
  padding: 0;
  margin: 0 0 1.2rem 0;
  min-width: fit-content;
  border: none;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.variants-selector-wrapper > div.product-form__input::after,
.selector-wrapper.product-form__input::after{
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-caret' viewBox='0 0 10 6'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  bottom: 1.6rem;
  right: 1.5rem;
}

variant-radios,
variant-selects {
  display: block;
}

.product-form__input--dropdown {
  margin-bottom: 1.6rem;
}

.product-form__input .form__label {
  padding-left: 0;
}

fieldset.product-form__input .form__label {
  margin-bottom: 0.2rem;
}

.product-form__input input[type='radio'] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.product-form__input input[type='radio'] + label {
  border: 0.2rem solid rgba(var(--color-foreground), 0.15);
  border-radius: 0.5rem;
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1.5rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.product-form__input input[type='radio'] + label:hover {
  border-color: rgb(var(--color-foreground));
}

.product-form__input input[type='radio']:checked + label {
  border-color: rgba(var(--color-foreground), 1);
}

.product-form__input input[type='radio']:disabled + label ,
.product-form__input input[type='radio'].disabled + label {
  opacity: 0.4;
  border-color: rgba(var(--color-foreground), 0.1);
  background-color: rgba(var(--color-foreground), 0.1);
  color: rgba(var(--color-foreground), 0.6);
  /* text-decoration: line-through; */
}
.product-form__input input[type='radio']:focus-visible + label {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}

/* Fallback */
.product-form__input input[type='radio'].focused + label {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}

/* No outline when focus-visible is available in the browser */
.no-js .product-form__input input[type='radio']:focus:not(:focus-visible) + label {
  box-shadow: none;
}

.variant-img-label-wrapper .variant-img-label + .label__text{
  color: transparent;
  overflow: hidden;
  display: none;
}

.product-form__input input[type='radio'] + .variant-img-label-wrapper{
  position: relative;
  min-width: 60px;
  min-height: 60px;
  overflow: hidden;
  border-radius: 0.5rem;
  white-space: nowrap;
}

.product-form__input .variant-img-label{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-form__input .select {
  max-width: 25rem;
}

.product-form__submit {
  margin: 0;
}

.product-form__submit--accent-outline {
  --color-button: var(--color-base-accent-1);
  --color-button-text: var(--color-base-accent-1);
  --alpha-button-background: 0;
  --alpha-button-border: 1;
}

.no-js .product-form__submit.button--secondary {
  --color-button: var(--color-base-accent-1);
  --color-button-text: var(--color-base-solid-button-labels);
  --alpha-button-background: 1;
}

.no-js .product-form__submit--accent-outline.button--secondary {
  --color-button-text: var(--color-base-accent-1);
  --alpha-button-background: 0;
}

/* Product info */

.product__info-container > * + * {
  margin: 1rem 0;
}

.product__info-container .product-form,
.product__info-container .product__description {
  margin: 2.5rem 0;
}

.product__text {
  margin-bottom: 0;
}

a.product__text {
  display: block;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.product__text.caption-with-letter-spacing {
  text-transform: uppercase;
}

.product__title {
  word-break: break-word;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.product__title + .product__text.caption-with-letter-spacing {
  margin-top: -1.5rem;
}

.product__text.caption-with-letter-spacing + .product__title {
  margin-top: 0;
}

.product__accordion .accordion__content {
  padding: 0 1rem;
}

.product .price {
  align-items: flex-start;
}

.product .price--on-sale dl {
  margin-bottom: 0.5rem;
}

.product .price--sold-out .price__badge-sale {
  display: none;
}

@media screen and (min-width: 750px) {
  .product__info-container .price--on-sale .price-item--regular {
    font-size: 1.6rem;
  }

  .product__info-container > *:first-child {
    margin-top: 0;
  }
}

.product__description-title {
  font-weight: 600;
}

.product--no-media .product__title,
.product--no-media .product__text,
.product--no-media noscript .product-form__input {
  text-align: center;
}

.product--no-media noscript .product-form__input,
.product--no-media .share-button {
  max-width: 100%;
}

.product--no-media fieldset.product-form__input,
.product--no-media .product-form__quantity,
.product--no-media .product-form__input--dropdown,
.product--no-media .share-button,
.product--no-media .product__view-details,
.product--no-media .store-availability-container,
.product--no-media .product-form {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product--no-media .product-form > .form {
  max-width: 30rem;
  width: 100%;
}

.product--no-media .product-form__quantity,
.product--no-media .product-form__input--dropdown {
  flex-direction: column;
  max-width: 100%;
}

.product--no-media fieldset.product-form__input {
  flex-wrap: wrap;
  margin: 0 auto 1.2rem auto;
}

.product--no-media .product__info-container > modal-opener {
  display: block;
  text-align: center;
}

.product--no-media .product-popup-modal__button {
  padding-right: 0;
}

.product--no-media .price {
  justify-content: center;
}

.product--no-media .product__info-wrapper {
  padding-left: 0;
}

/* Product media */

@media screen and (max-width: 749px) {
  .product__media-list {
    margin-left: -2.5rem;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
    width: calc(100% + 4rem);
  }

  .product__media-wrapper .slider-component {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-top: 1rem;
  }

  .slider.slider--mobile.product__media-list {
    padding-bottom: 0;
    margin-bottom: 0.5rem;
  }

  .slider.product__media-list::-webkit-scrollbar {
    height: 0.2rem;
    width: 0.2rem;
  }

  .product__media-list::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-foreground));
  }

  .product__media-list::-webkit-scrollbar-track {
    background-color: rgba(var(--color-foreground), 0.2);
  }

  .product__media-list .product__media-item {
    width: calc(100% - 3rem);
  }

  .slider.product__media-list .product__media-item:first-of-type {
    padding-left: 1.5rem;
  }
}

@media screen and (min-width: 750px) {
  .product__media-item:first-child {
    width: 100%;
  }

  .product-media-modal__content > .product__media-item--variant.product__media-item--variant {
    display: none;
  }

  .product-media-modal__content > .product__media-item--variant:first-child {
    display: block;
  }
}

.product__media-item--variant {
  display: none;
}

.product__media-item--variant:first-child {
  display: block;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .product__media-list .product__media-item:first-child {
    padding-left: 0;
  }

  .product__media-list .product__media-item {
    padding: 0 0 0.5rem;
    width: 100%;
  }
}

.product__media-icon .icon {
  width: 1.2rem;
  height: 1.4rem;
}

.product__media-icon {
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  color: rgb(var(--color-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  z-index: 1;
  transition: color var(--duration-short) ease,
    opacity var(--duration-short) ease;
}

.product__media-video .product__media-icon {
  opacity: 1;
}

.product__modal-opener--image .product__media-toggle:hover {
  cursor: zoom-in;
}

.product__modal-opener:hover .product__media-icon {
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
}

@media screen and (min-width: 750px) {
  .grid__item.product__media-item--full {
    width: 100%;
  }
}

@media screen and (min-width: 990px) {
  .product__modal-opener .product__media-icon {
    opacity: 0;
  }

  .product__modal-opener:hover .product__media-icon,
  .product__modal-opener:focus .product__media-icon {
    opacity: 1;
  }
}

.product__media-item > * {
  display: block;
  position: relative;
}

.product__media-toggle {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
}

.image-modal-wrapper.is-active,
.product-media-modal {
  background-color: rgb(var(--color-background));
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

.image-modal-wrapper.is-active,
.product-media-modal[open] {
  visibility: visible;
  opacity: 1;
  z-index: 110000;
}

.image-modal-wrapper.is-active{
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-media-modal__dialog {
  display: flex;
  align-items: center;
  height: 100vh;
}

.product-media-modal__content {
  max-height: 100vh;
  width: 100%;
  overflow: auto;
}

.product-media-modal__content > *:not(.active),
.product__media-list .deferred-media {
  display: none;
}

@media screen and (min-width: 750px) {
  .product-media-modal__content {
    padding-bottom: 2rem;
  }

  .product-media-modal__content > *:not(.active) {
    display: block;
  }

  .product__modal-opener:not(.product__modal-opener--image) {
    display: none;
  }

  .product__media-list .deferred-media {
    display: block;
  }
}

.product__media-list .deferred-media,
.product__media-list .product__modal-opener {
  border: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.product-media-modal__content > * {
  display: block;
  height: auto;
  margin: auto;
  border: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.product-media-modal__content .media {
  background: none;
}

.product-media-modal__model {
  width: 100%;
}

.js-image-modal-close,
.product-media-modal__toggle {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.5);
  border-radius: 50%;
  color: rgba(var(--color-foreground), 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  right: 2rem;
  padding: 1.2rem;
  position: fixed;
  z-index: 2;
  top: 2rem;
  width: 4rem;
}

.product-media-modal__content .deferred-media {
  width: 100%;
}

@media screen and (min-width: 750px) {
  .product-media-modal__content {
    padding: 2rem 11rem;
  }

  .product-media-modal__content > * {
    width: 100%;
  }

  .product-media-modal__content > * + * {
    margin-top: 2rem;
  }

  .product-media-modal__toggle {
    right: 5rem;
    top: 2.2rem;
  }
}

@media screen and (min-width: 990px) {
  .product-media-modal__content {
    padding: 2rem 11rem;
  }

  .product-media-modal__content > * + * {
    margin-top: 1.5rem;
  }

  .product-media-modal__content {
    padding-bottom: 1.5rem;
  }

  .product-media-modal__toggle {
    right: 5rem;
  }
}

.product-media-modal__toggle:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.product-media-modal__toggle .icon {
  height: auto;
  margin: 0;
  width: 2.2rem;
}

/* Product popup */

.product-popup-modal {
  box-sizing: border-box;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  z-index: -1;
  margin: 0 auto;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  background: rgba(var(--color-foreground), 0.2);
  height: 100%;
}

.product-popup-modal[open] {
  opacity: 1;
  visibility: visible;
  z-index: 101;
}

.product-popup-modal__content {
  background-color: rgb(var(--color-background));
  overflow: auto;
  height: 80%;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5rem;
  width: 92%;
  position: absolute;
  top: 0;
  padding: 0 1.5rem 0 3rem;
}

@media screen and (min-width: 750px) {
  .product-popup-modal__content {
    padding-right: 1.5rem;
    margin-top: 10rem;
    width: 70%;
    padding: 0 3rem;
  }
}

.product-popup-modal__content img {
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  .product-popup-modal__content table {
    display: block;
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
    margin: 0;
  }
}

.product-popup-modal__opener {
  display: inline-block;
}

.product-popup-modal__button {
  font-size: 1.6rem;
  padding-right: 1.3rem;
  padding-left: 0;
  height: 4.4rem;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.product-popup-modal__button:hover {
  text-decoration-thickness: 0.2rem;
}

.product-popup-modal__content-info {
  padding-right: 4.4rem;
}

.product-popup-modal__content-info > * {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 749px) {
  .product-popup-modal__content-info > * {
    max-height: 100%;
  }
}

.product-popup-modal__toggle {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 50%;
  color: rgba(var(--color-foreground), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: sticky;
  padding: 1.2rem;
  z-index: 2;
  top: 1.5rem;
  width: 4rem;
  margin: 0 0 0 auto;
}

.product-popup-modal__toggle:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.product-popup-modal__toggle .icon {
  height: auto;
  margin: 0;
  width: 2.2rem;
}

.product-form__buttons {
  display: grid;
  gap: 1.2rem;
  margin-top: 2.5rem;
}

.product-form__buttons .button,
.product-form__buttons .btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 4.8rem;
  margin: 0 !important;
  border-radius: 4rem !important;
}

.product-form__buttons .button::before,
.product-form__buttons .button::after,
.product-form__buttons .btn::before,
.product-form__buttons .btn::after {
  border-radius: inherit;
}

.buy-now-limit-modal {
  box-sizing: border-box;
  width: min(calc(100% - 3rem), 48rem);
  max-width: 48rem;
  padding: 0;
  border: 0;
  border-radius: 2.4rem;
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background));
  box-shadow: 0 2.4rem 7rem rgba(0, 0, 0, 0.28);
}

.buy-now-limit-modal::backdrop {
  background: rgba(14, 18, 22, 0.58);
  backdrop-filter: blur(0.2rem);
}

.buy-now-limit-modal__content {
  position: relative;
  padding: clamp(2.4rem, 6vw, 3.6rem);
}

.buy-now-limit-modal__close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0.1rem solid rgba(var(--color-foreground), 0.14);
  border-radius: 50%;
  color: rgb(var(--color-foreground));
  background: transparent;
  cursor: pointer;
}

.buy-now-limit-modal__close:hover {
  background: rgba(var(--color-foreground), 0.06);
}

.buy-now-limit-modal__close .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.buy-now-limit-modal__title {
  margin: 0;
  padding-right: 4.8rem;
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  line-height: 1.2;
}

.buy-now-limit-modal__reason {
  margin: 2rem 0 0;
  padding: 1.4rem 1.6rem;
  border-radius: 1.2rem;
  background: rgba(var(--color-foreground), 0.06);
  font-weight: 600;
  line-height: 1.5;
}

.buy-now-limit-modal__text {
  margin: 1.6rem 0 0;
  color: rgba(var(--color-foreground), 0.72);
  line-height: 1.6;
}

.buy-now-limit-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2.4rem;
}

.buy-now-limit-modal__actions .button,
.buy-now-limit-modal__actions .btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 4.8rem;
  margin: 0 !important;
  border-radius: 4rem !important;
}

@media screen and (max-width: 549px) {
  .buy-now-limit-modal__actions {
    grid-template-columns: 1fr;
  }
}

/* Add-on deal trigger + modal. The promotions app has no concept of a
   modal and always renders #promotion-section inline; main-product.liquid
   wraps that call in a closed-by-default <dialog> instead, so a product
   with no active add-on deal reserves no space between the photo/buy-box
   row and the description, and a product that does have one surfaces it a
   tap away rather than as a full-bleed strip breaking the row's edges. */
.product-addon-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 1rem;
  padding: 0.9rem 1.6rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.15);
  border-radius: 4rem;
  background: transparent;
  color: rgb(var(--color-foreground));
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--duration-short) ease, background-color var(--duration-short) ease;
}

.product-addon-trigger[hidden] {
  display: none;
}

.product-addon-trigger:hover {
  border-color: rgba(var(--color-foreground), 0.4);
  background: rgba(var(--color-foreground), 0.04);
}

.product-addon-trigger .icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

.promo-modal {
  box-sizing: border-box;
  width: min(calc(100% - 3rem), 64rem);
  max-width: 64rem;
  max-height: min(82vh, 70rem);
  padding: 0;
  border: 0;
  border-radius: 2.4rem;
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background));
  box-shadow: 0 2.4rem 7rem rgba(0, 0, 0, 0.28);
}

.promo-modal::backdrop {
  background: rgba(14, 18, 22, 0.58);
  backdrop-filter: blur(0.2rem);
}

.promo-modal__content {
  position: relative;
  max-height: min(82vh, 70rem);
  overflow-y: auto;
  /* Extra top padding clears the absolutely positioned close button,
     whatever width the app's own promo ribbon renders at. */
  padding: clamp(3.6rem, 8vw, 4.8rem) clamp(2rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem);
}

.promo-modal__close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0.1rem solid rgba(var(--color-foreground), 0.14);
  border-radius: 50%;
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background));
  cursor: pointer;
  z-index: 1;
}

.promo-modal__close:hover {
  background: rgba(var(--color-foreground), 0.06);
}

.promo-modal__close .icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* The promotions app appends one padding-heavy .sf_promo-form per active
   add-on deal straight into #sf_promo-container, each wrapping an
   inline-block .promo-container sized for a full page-width section. A
   product with more than one deal ends up with them stacked one per row,
   each reading as an oversized, sparsely-filled banner inside the modal's
   narrower width. Lay them out two per row instead, and make each card
   fill (rather than shrink-wrap) its column so uneven content still lines
   up into a clean row. */
.promo-modal #sf_promo-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.2rem;
}

/* The app collapses #promotion-section to max-height: 800px behind a
   white gradient and a "View More" button whenever a product has more than
   one add-on deal. Inside this modal that clip is redundant (the modal's
   own content already scrolls) and actively hides deals: on phones each
   card is tall enough that only about two fit in 800px, so a product with
   three or more deals showed just the first two with no way to reach the
   rest. Always show every deal and let the modal scroll instead. */
.promo-modal .sf_promo-container-height-opacity {
  max-height: none;
  overflow: visible;
}

.promo-modal .sf_promo-container-white-gradient::after {
  content: none;
}

.promo-modal #view-more-promotion {
  display: none;
}

.promo-modal .sf_promo-form {
  display: flex;
  margin: 0;
  min-width: 0;
}

/* The app's own card assumes full page width: a ribbon banner absolutely
   positioned over the top-left corner with a folded-paper triangle tail
   past its own right edge, ~60px/85px of padding reserved above/below to
   clear that ribbon and the equally absolutely-positioned submit button,
   and ellipsis-truncated ribbon text. Halved to a grid column, the ribbon
   overflows the card outright - its triangle tail lands on whatever sits
   next to it - and the truncated text cuts the deal's own terms off
   mid-word. Rebuild it as a plain card: the ribbon becomes a normal-flow
   banner that wraps in full, and the button sits at the card's own
   bottom (via margin-top: auto below) so two cards of different content
   heights still end with their buttons aligned. */
.promo-modal .promo-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 0;
  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.promo-modal .sf_promo-ribbon {
  position: static;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.8rem 1.2rem;
  line-height: 1.3;
}

.promo-modal .sf_promo-ribbon::before,
.promo-modal .sf_promo-ribbon::after {
  content: none;
}

.promo-modal .sf_promo-ribbon-text {
  max-width: 100%;
}

.promo-modal .sf_promo-ribbon-text span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.promo-modal .checkbox-select-wrapper {
  align-items: flex-start;
  font-size: 0.9em;
}

/* The add-on is already pre-checked by the auto-select script above the
   moment it renders (see main-product.liquid), so the checkbox is no
   longer something a shopper ever needs to look at or tick - just hide its
   visual box and reclaim the width for the product name. The underlying
   <input> stays in the DOM and still gets checked/dispatches its change
   event exactly as before; only its own visible affordance goes away. */
.promo-modal .input-check {
  display: none;
}

/* The app absolutely positions the struck-through original price under the
   discounted one, so it never adds to .display-control's own height - a
   deliberate trick that only works because the app's own layout always has
   more reserved space below (its absolutely-positioned submit button) for
   it to overlap into harmlessly. Now that the button sits in normal flow
   right after this block (see below), that same trick would overlap the
   original price under the button instead. Put it back in flow so it
   reserves real space. */
.promo-modal .sf_promo-product-price-wrapper,
.promo-modal .sf_promo-product-original-price {
  position: static;
}

/* At the narrowest widths this still shares two per row (see the container
   query below), the price and the qty stepper can't both fit on one line.
   Left as a plain flex row, the price text itself was the thing giving way,
   wrapping "S$" onto its own line above the number. Let the stepper drop to
   its own line instead - the price staying in one piece reads far better
   than either splitting apart. */
.promo-modal .display-control {
  flex-wrap: wrap;
  /* This reserved room for the app's own absolutely-positioned submit
     button underneath, which no longer applies now that the button sits
     in normal flow below (see .sf_promo-main-container-margin's own
     margin-bottom instead, which gives every card the same gap whether or
     not margin-top: auto also ends up adding more to it). Left in place,
     it read as a bare, un-styled sliver of extra whitespace rather than a
     deliberate gap. */
  padding-bottom: 0;
}

.promo-modal .sf_promo-product-discounted-price,
.promo-modal .sf_promo-product-original-price {
  white-space: nowrap;
}

.promo-modal .sf_promo-form button[type='submit'] {
  position: static;
  width: calc(100% - 1.2rem);
  margin: auto auto 0.6rem;
}

/* Below this, a deal's own label text ("Collector Booster Box") has no
   break point narrow enough to wrap inside a ~150px column and spills into
   the next one, and the qty stepper's "+" gets crowded off the edge. Fall
   back to one deal per row - still the same rebuilt card, ribbon wrap, and
   bottom-aligned button as the two-column layout above, just full width -
   rather than let either column overflow into the other. */
@media screen and (max-width: 370px) {
  .promo-modal #sf_promo-container {
    grid-template-columns: 1fr;
  }
}

/* The promotions app's own product-picker markup assumes a full page-width
   section: depending on the promotion type it renders as either a single
   non-wrapping flex row with horizontal overflow scroll
   (.sf_promo-main-container-margin) or a grid of up to 5 columns
   (.sf_promo-product-grid-container), and at its own narrower breakpoints
   still keeps that same one-row-at-a-time shape - none of which fits the
   modal's fixed, narrower width well. Force a consistent 2-column wrapping
   grid instead, for either markup variant and at any viewport size. */
.promo-modal .sf_promo-main-container-margin,
.promo-modal .sf_promo-product-grid-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  max-width: 100%;
  overflow: visible;
  margin-top: 1.2rem;
  /* Guarantees the same small gap above the button on every card, whether
     or not margin-top: auto on the button (further down) also ends up
     adding more to it to keep two uneven cards' buttons bottom-aligned -
     so the gap is never zero, but a shorter card's button can still sit
     further down. */
  margin-bottom: 0.6rem;
  /* Match the submit button's own 0.6rem side inset (width: calc(100% -
     1.2rem) below) so the image/text column lines up with the button
     instead of sitting further in from each edge than it does. */
  padding: 0 0.6rem;
}

/* Every deal seen live so far offers exactly one product to add, so that
   fixed 2-column grid above leaves it stuck in the first column with the
   second sitting empty - half the card's own width wasted, which is what
   was squeezing "S$" onto its own line above the price instead of sharing
   it with the qty stepper. Give a single-product deal the full row instead;
   a deal that actually offers several alternative products to pick from
   still gets the 2-column wrap above. */
.promo-modal .sf_promo-main-container-margin:has(> .secondary-prod:only-child),
.promo-modal .sf_promo-product-grid-container:has(> .secondary-prod:only-child) {
  grid-template-columns: 1fr;
}

.promo-modal .secondary-prod,
.promo-modal .sf_promo-main-prod {
  width: 100%;
  min-width: 0;
}

.product__description-wrapper {
  max-width: 72rem;
  margin: 0 auto;
  padding-top: 2.5rem;
}

.product__description.rte{
  margin-top: 3rem;
}

@media screen and (min-width: 990px) {
  .product__description-wrapper {
    padding-top: 2rem;
    margin-top: 1.5rem;
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.float-bottom-modal{
  position: fixed;
  top: initial;
  bottom: 1px;
  left: 1px;
  right: 1px;
  width: auto;
  max-width: none;
  min-width: none;
  z-index: 100;
  padding: 20px 10px 30px;
}

.slider-component .icons-wrapper{
  position: absolute;
  top: 20px;
  right: 15px;
}

.button-circle{
  display: flex;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.button-circle svg,
.button-circle svg.icon-share{
  margin: 0;
}

.float-bottom-modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

.float-bottom-modal-overlay::after{
  top: 0 !important;
}

.btn--radius{
  border-radius: 4rem;
}

.product_upsell-info{
  margin: 1.5rem 0;
}

.product_upsell-box{
  margin-bottom: 1.2rem;
}

.product_upsell-box,
.product_upsell-icon{
  display: flex;
  align-items: center;
}

.product_upsell-icon{
  width: 24px;
}

.product_upsell-icon + .product_upsell-text{
  margin-left: 1.5rem;
}

  /* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  box-sizing: border-box;
  z-index: 11; /* Sit on top */
  padding-top: 70px; /* Location of the box */
  padding-bottom: 30px; 
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  max-height: calc(100svh - 10rem);
  object-fit: contain;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .modal-content,
  #caption {
    animation: none;
  }
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.product-modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #000;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.product-modal-close:hover,
.product-modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: calc(100vh - 8rem);
    max-height: calc(100svh - 8rem);
  }

  .product-modal-close {
    right: 20px;
  }
}

.show{
	display:block;
}

.hide{
 	display:none; 
}