/** Shopify CDN: Minification failed

Line 3238:24 Unexpected "{"
Line 3238:33 Expected ":"
Line 3269:24 Unexpected "{"
Line 3269:33 Expected ":"

**/
/* section-main-product.css */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: 10px;
  row-gap: 10px;
}

@media screen and (min-width: 750px) {
  .product__info-container--sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    z-index: 2;
    align-self: flex-start;
  }
}

/* Product form */

.product-form {
  display: block;
}

/* Form Elements */

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

.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;
}

.product-form__submit[disabled] + .shopify-payment-button {
  display: none;
}

/* Overrides */
.shopify-payment-button__more-options {
  color: rgb(var(--color-foreground));
}

.shopify-payment-button__button {
  font-size: calc(var(--button-font-size) * 1.6rem);
}

/* Product info */
.product .price--sold-out .price__badge-sold-out {
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  border: 1px solid rgb(var(--color-background));
}

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

.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 */
.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: 2.5rem;
}

.product__media-icon,
.thumbnail__badge {
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
  color: rgb(var(--color-foreground));
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: center;
  height: 5rem;
  width: 5rem;
  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) {
  .product--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%;
}

.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;
}

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

.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-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%;
}

.product-media-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;
  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;
  }
}
@media screen and (min-width: 1200px) {
  .product-media-modal__content > * {
    width: 100%;
    max-width: var(--container-lg-width);
  }
}

.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.5);
  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%);
}

@media screen and (min-width: 750px) {
  .product-popup-modal__content {
    padding-right: 1.5rem;
    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__button {
  font-size: 20px;
  padding-right: 15px;
  padding-left: 0;
  text-decoration: none;
}

.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;
  z-index: 2;
  top: 20px;
  width: 40px;
  height: 40px;
  margin: 0 0 0 auto;
  padding: 10px;
}
.product-popup-modal__toggle:hover {
  color: rgba(var(--color-foreground), 0.75);
}

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

/*  Proudct Info Csutom css */
.product__media-item {
  max-width: 100%;
  width: 100%;
}
.media > a > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: zoom-in;
}
.discount__sale__text {
  background: rgba(var(--color-foreground));
  color: rgba(var(--color-background));
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 1.3rem;
  line-height: 1;
}
.price__box_wrapper {
  display: flex;
  align-items: center;
}

.save__disoucnt {
  margin-left: 5px;
}
.product-popup-modal__content {
  top: 50%;
  transform: translate(-50%, -120%);
  margin: 0;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  padding: 0;
  position: relative;
  border-radius: 0.3rem;
}
.product-popup-modal[open] .product-popup-modal__content {
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 992px) {
  .product-popup-modal__content.modal-sm {
    max-width: 550px;
    width: 500px;
  }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1);
  align-items: center;
}
.modal__title {
  margin: 0;
}
.ask_about_product input,
.ask_about_product textarea {
  width: 100%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  padding: 10px 20px;
  line-height: 25px;
  font-size: 15px;
}
.product-popup-modal__content-info {
  padding: 0 30px 25px;
}
@media screen and (min-width: 992px) {
  .product-popup-modal__content.modal-md {
    max-width: 800px;
    width: 800px;
  }
}
.select__select option:disabled {
  background: #eee;
  color: #aaa;
}

.select__select option {
  font-size: 16px;
}
.product-form__buttons {
  margin: 30px 0 0 0 !important;
}
.single_product_action_btn.loading::after {
  top: 10px;
  left: 10px;
}
.product__payment {
  justify-content: flex-start;
  padding: 0;
  margin-top: 0;
}
li.product__payment__item {
  list-style: none;
  line-height: 1;
}

.product__payment .product__payment__item + .product__payment__item {
  margin-left: 10px;
}
/* Countdown css */
.product__countdown {
  display: flex;
}
.product__details_countdown .product__countdown > div + div {
  margin-left: 10px;
}

.product__countdown > * span {
  line-height: 1.8rem;
}
.product__details_countdown .product__countdown .countdown__inner {
  display: flex;
  flex-direction: column;
}
.product__details_countdown .product__countdown .countdown-item {
  position: relative;
}

.product__details_countdown .product__countdown > * {
  text-align: center;
  font-size: 1.5rem;
}
.product__details_countdown span.countdown__number {
  background: var(--countdown-background);
  color: var(--countdown-foreground);
  padding: 0 1rem;
  border-radius: 10px 0;
  height: 3.5rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 0.5rem;
  min-width: 5rem;
  text-align: center;
  justify-content: center;
}
span.countdown__label {
  margin-bottom: 1.2rem;
}
.timer__icon {
  width: 2.2rem;
  margin-right: 0.8rem;
}
.product__countdown {
  background-color: transparent;
}
.stock_countdown_progress {
  width: 100%;
  background: var(--progress-bar-background);
  height: 6px;
  border-radius: 3px;
}
span.stock_progress_bar {
  display: block;
  background: var(--progress-bar-foreground);
  background-attachment: fixed;
  height: 100%;
  transition: width 2.5s ease;
  border-radius: 3px 0 0 3px;
}
.stock__inventgory--status {
  margin-bottom: 5px;
}
.input__field_form + .input__field_form {
  margin-top: 1.5rem;
}
span.input__field--label {
  display: block;
}
.product__info-container > * + * {
  margin-top: 1.5rem;
}
h1.product__title {
  margin-top: 0;
}
@media only screen and (min-width: 992px) {
  .product__info-container {
    padding: 0 3rem 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .product__info-container {
    padding-top: 6.5rem;
  }
}

.product__media {
  cursor: crosshair;
}

span.product__media-icon.motion-reduce > a {
  display: block;
  line-height: 1;
}
@media only screen and (min-width: 992px) {
  .product-popup-modal.popup__contact--form .product-popup-modal__content,
  .product-popup-modal.back__in--stock-popup .product-popup-modal__content {
    height: auto;
  }
}
.product-form__quantity .quantity {
  height: 48px;
}
.product-form__cart--box.d-flex {
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 750px) {
  .product-media-modal__content > * {
    max-width: 100%;
  }
}

/*  Additional css  */
@media screen and (min-width: 750px) {
  .product--thumbnail .product__media-gallery,
  .product--thumbnail_slider .product__media-gallery,
  .product--stacked .product__info-container--sticky {
    display: block;
    position: sticky;
    top: 3rem;
    z-index: 2;
  }

  .product--thumbnail .thumbnail-list {
    padding-right: var(--media-shadow-horizontal-offset);
  }

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

  .product__info-wrapper--extra-padding {
    padding-left: 8rem;
  }

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

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

  .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: -1.5rem;
    margin-right: -1.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: 100%;
  }
}

@media screen and (min-width: 750px) {
  .product--thumbnail .product__media-item:not(.is-active),
  .product--thumbnail_slider .product__media-item:not(.is-active) {
    display: none;
  }

  .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.product__media-item--variant {
  display: none;
}

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

@media screen and (max-width: 749px) {
  .product__media-item--variant:first-child {
    padding-right: 1.5rem;
  }
}

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

  .product--thumbnail_slider .product__media-list {
    margin-left: 0;
  }

  .product__media-list .product__media-item {
    width: 100%;
  }
}
.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) {
  .product--grid__item.product__media-item--full {
    width: 100%;
  }
}

@media screen and (min-width: 990px) {
  .product--stacked .product__media-item {
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .product__media-list .product__media-item:first-child,
  .product__media-list .product__media-item--full {
    width: 100%;
    max-width: 100%;
  }

  .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 {
  display: flex;
  border: none;
  background-color: transparent;
  color: currentColor;
  padding: 0;
}

.product__media-toggle::after {
  content: "";
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
}

.product__media-toggle:focus-visible {
  outline: 0;
  box-shadow: none;
}

.product__media-toggle.focused {
  outline: 0;
  box-shadow: none;
}

.product__media-toggle:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
  border-radius: var(--media-radius) - var(--media-border-width);
}

.product__media-toggle.focused:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
  border-radius: var(--media-radius);
}

.product__media-toggle:focus-visible:after {
  border-radius: var(--media-radius);
}

@media screen and (max-width: 749px) {
  .product--thumbnail
    .is-active
    > .product__modal-opener:not(.product__modal-opener--image),
  .product--thumbnail_slider
    .is-active
    > .product__modal-opener:not(.product__modal-opener--image) {
    display: none;
  }

  .product--thumbnail .is-active .deferred-media,
  .product--thumbnail_slider .is-active .deferred-media {
    display: block;
    width: 100%;
  }
}

.product__media-list .media > * {
  overflow: hidden;
}

.thumbnail-list {
  flex-wrap: wrap;
  grid-gap: 1rem;
}

@media screen and (min-width: 750px) {
  .product--stacked .thumbnail-list {
    display: none;
  }

  .thumbnail-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

.thumbnail-list_item--variant:not(:first-child) {
  display: none;
}

@media screen and (min-width: 990px) {
  .thumbnail-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .product--medium .thumbnail-list {
    grid-template-columns: repeat(5, 1fr);
  }

  .product--large .thumbnail-list {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media screen and (max-width: 749px) {
  .product__media-item {
    display: flex;
    align-items: center;
  }

  .product__modal-opener {
    width: 100%;
  }

  .thumbnail-slider {
    display: flex;
    align-items: center;
  }

  .thumbnail-slider .thumbnail-list.slider {
    display: flex;
    padding: 0.5rem;
    flex: 1;
    scroll-padding-left: 0.5rem;
  }

  .thumbnail-list__item.slider__slide {
    width: calc(33% - 0.6rem);
  }
}

@media screen and (min-width: 750px) {
  .product--thumbnail_slider .thumbnail-slider {
    display: flex;
    align-items: center;
  }

  .thumbnail-slider .thumbnail-list.slider--tablet-up {
    display: flex;
    padding: 0.5rem 0;
    flex: 1;
    scroll-padding-left: 0.5rem;
  }

  .product__media-wrapper .slider-mobile-gutter .slider-button {
    display: none;
  }

  .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    width: calc(25% - 0.8rem);
  }

  .product--thumbnail_slider .slider-mobile-gutter .slider-button {
    display: flex;
  }
}

@media screen and (min-width: 900px) {
  .product--small
    .thumbnail-list.slider--tablet-up
    .thumbnail-list__item.slider__slide {
    width: calc(25% - 0.8rem);
  }

  .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    width: calc(20% - 0.8rem);
  }
}
.thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  color: rgb(var(--color-base-text));
  cursor: pointer;
  background: none;
  border: 1px solid rgb(var(--color-foreground), 0.15);
}
.thumbnail:hover {
  opacity: 0.7;
}

.thumbnail.global-media-settings img {
  border-radius: 0;
}

.thumbnail[aria-current] {
  border-color: rgb(var(--color-foreground));
}

.thumbnail[aria-current]:focus-visible {
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)),
    0 0 0rem 0.1rem rgba(var(--color-foreground), 0.5);
}

.thumbnail[aria-current]:focus,
.thumbnail.focused {
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)),
    0 0 0rem 0.1rem rgba(var(--color-foreground), 0.5);
}

.thumbnail[aria-current]:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
}

.thumbnail img {
  pointer-events: none;
}

.thumbnail--narrow img {
  height: 100%;
  width: auto;
  max-width: 100%;
}

.thumbnail--wide img {
  height: auto;
  width: 100%;
}

.thumbnail__badge .icon {
  width: 1rem;
  height: 1rem;
}

.thumbnail__badge .icon-3d-model {
  width: 1.2rem;
  height: 1.2rem;
}

.thumbnail__badge {
  color: rgb(var(--color-foreground));
  height: 2rem;
  width: 2rem;
  left: auto;
  right: 0;
  top: 0;
}
.thumbnail-slider .slider-button .icon {
  height: 1.2rem;
}
@media screen and (min-width: 750px) {
  .product:not(.product--small) .thumbnail__badge {
    height: 3rem;
    width: 3rem;
  }

  .product:not(.product--small) .thumbnail__badge .icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  .product:not(.product--small) .thumbnail__badge .icon-3d-model {
    width: 1.4rem;
    height: 1.4rem;
  }
}

.thumbnail-list__item {
  position: relative;
}

.thumbnail-list__item::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.product:not(.featured-product) .product__view-details {
  display: none;
}

.product__view-details {
  display: block;
  text-decoration: none;
}

.product__view-details:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.product__view-details .icon {
  width: 1.2rem;
  margin-left: 1.2rem;
  flex-shrink: 0;
}
.thumbnail-slider .slider-button {
  color: rgb(var(--color-button-text));
  background: rgba(var(--color-button), var(--alpha-button-background));
  width: 3rem;
  height: 4.5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
}
.thumbnail-slider .slider-button[disabled] .icon,
.thumbnail-slider .slider-button:not([disabled]):hover {
  color: rgb(var(--color-button-text));
}
.thumbnail-slider .slider-button {
  opacity: 0;
}
.thumbnail-slider:hover .slider-button {
  opacity: 1;
}
.thumbnail-slider:hover button:disabled {
  opacity: 0.5;
}
@media only screen and (min-width: 750px) {
  .product--thumbnail .thumbnail-slider button:disabled,
  .product--stacked .thumbnail-slider button:disabled,
  .product--stacked .thumbnail-slider button {
    display: none;
  }
  .thumbnail-slider .slider-button.slider-button--next {
    left: auto;
    right: -30px;
  }
  .thumbnail-slider .slider-button.slider-button--prev {
    left: -30px;
  }
}

/* Figma redesign: thumbnails as a vertical column, full height matching main image */
@media screen and (min-width: 750px) {
  .product--thumbnail media-gallery,
  .product--thumbnail_slider media-gallery,
  media-gallery[data-desktop-layout="thumbnail"],
  media-gallery[data-desktop-layout="thumbnail_slider"] {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: stretch;
    gap: 1.6rem;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryViewer-"],
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryViewer-"] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryViewer-"] .product__media-item,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryViewer-"] .product__media-item {
    border-radius: 1.7rem !important;
    overflow: hidden !important;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryViewer-"] .product__media-item .media,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryViewer-"] .product__media-item .media {
    border-radius: 1.7rem !important;
    overflow: hidden !important;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"],
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] {
    flex: 0 0 109.93px;
    width: 109.93px;
    /* 3 full thumbnails (135.38px each) + 2 gaps (0.6rem/9.6px each) +
       half of a 4th, as a "peek" hinting there are more to scroll to —
       rather than a height that happens to match the main image and
       could show anywhere from 2 to 10 thumbnails depending on that
       image's own height. */
    max-height: calc((135.38px * 3) + (0.6rem * 2) + (135.38px / 2));
    display: flex;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list::-webkit-scrollbar,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list::-webkit-scrollbar {
    display: none;
  }

  /* Fixed size per Figma (109.93 x 135.38px), not flex-grow. The previous
     `flex: 1 1 0` made every thumbnail stretch to equally fill whatever
     height was available in the column (fewer images = taller thumbs,
     more images = shorter/squished thumbs) — that's the "stretch" bug.
     Each thumbnail now keeps its own fixed size regardless of how many
     exist; if there are more than fit, the column scrolls (overflow-y:
     auto above) instead of resizing them. */
  .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item {
    width: 109.93px !important;
    height: 135.38px;
    flex: 0 0 auto !important;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before {
    content: none;
    display: none;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail {
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: 13.23px;
    overflow: hidden;
  }
  .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail img,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .slider-button,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .slider-button {
    display: none !important;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryViewer-"] .product__media-list,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryViewer-"] .product__media-list {
    margin-left: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 749px) {
  .product--mobile-columns .product__media-item {
    width: calc(50% - 1.5rem - 5px);
  }
  .product__media-icon,
  .thumbnail__badge {
    height: 4rem;
    width: 4rem;
  }
  .product__media-icon .icon {
    width: 2rem;
  }
  .thumbnail-slider .slider-button.slider-button--next {
    left: auto;
    right: 0;
  }
  .thumbnail-slider .slider-button.slider-button--prev {
    left: 0;
  }
}
.product--thumbnail_slider .thumbnail-slider {
  overflow: hidden;
}
.thumbnail-slider:hover .slider-button.slider-button--prev {
  left: 0;
}
.thumbnail-slider:hover .slider-button.slider-button--next {
  right: 0;
}
.wishlist__button--text > span > svg {
  width: 18px;
  margin-right: 9px;
}
.wishlist__button--text.link {
  text-decoration: none;
}
.wishlist__button.loading.adding .remove__wishlist.wishlist__button--text {
  display: none;
}
.wishlist__button.active .remove__wishlist.wishlist__button--text {
  display: inline-flex;
}
.wishlist__button.wishlist__button--text {
  position: relative;
}
.wishlist__button.wishlist__button--text.loading.adding {
  pointer-events: none;
  padding-right: 3rem;
}
.wishlist__button.wishlist__button--text.loading:after {
  top: 0;
}
.product-popup-modal__button > svg {
  width: 20px;
}
.product-popup-modal__button > span {
  font-size: 1.8rem;
  margin-left: 1rem;
}
button.product-form__submit.loading:after {
  top: 10px;
  left: 62px;
}
.main-product__description {
  padding-top: 1.5rem;
}
.main-product__description {
  padding-top: 1.5rem;
  margin-top: 0;
}
.deferred-media__poster-button.video--button {
  position: absolute;
  background: rgba(var(--color-background));
  width: 6rem;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(var(--color-foreground));
}
.product-form__submit.button > svg {
  width: 2.2rem;
}
.product-form__submit.button {
  gap: 0.7rem;
  width: 100%;
}

/* Figma redesign: product info column */

/* Title + wishlist + share icons on the same line, matching Figma */
.product__title_row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: -1rem;
}
.product__title_row .product__title {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 2.73rem;
  line-height: 1;
  letter-spacing: 0;
  color: #333132;
}
.product__title_icons {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  padding-top: 0.2rem;
}

/* Wishlist: circle is baked into the SVG itself, just size the button */
.product__title_wishlist .wishlist__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  background: none;
  border: none;
}
.product__title_wishlist .wishlist__button svg {
  display: block;
  width: 4.2rem;
  height: 4.2rem;
}

/* Share: circle is baked into the SVG itself, just size the button */
.product__title_share {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.product__title_share svg {
  display: block;
  width: 4.2rem;
  height: 4.2rem;
}
.product__title_share_tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.6rem;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.product__title_share_tooltip.show {
  opacity: 1;
  visibility: visible;
}
.price__box_wrapper {
  clear: both;
}

/* Price row + sale badge pill */
.price__box_wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  clear: both;
}
.save__disoucnt {
  display: inline-flex;
}
.discount__sale__text {
  /* display: inline-block; */
  background: #fde3ec;
  color: #ee2761;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.3rem 1.2rem;
  border-radius: 999px;
  white-space: nowrap;
  display: none;
}

/* Bullet point text blocks (3 short highlight lines) */
.product__text {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.85);
  margin-bottom: 0.6rem;
}
.product__text_icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
}
.product__text_icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Accordion styling (Description, Specification, Product Details, Refund & Return) */
.product__accordion.accordion {
  border: 0.1rem solid rgba(var(--color-foreground), 0.12) !important;
  border-radius: 1rem !important;
  padding: 0 1.6rem !important;
  margin-bottom: 1.2rem !important;
  overflow: hidden;
}
.product__accordion.accordion:last-child {
  margin-bottom: 0 !important;
}
.product__accordion.accordion summary {
  padding: 1.4rem 0;
}
/* Divider line under the title, matching Figma — only shown when the
   accordion is open, separating the title row from the content below. */
.product__accordion.accordion details[open] summary {
  border-bottom: 0.65px solid rgba(79, 79, 79, 0.49);
}
.product__accordion.accordion .accordion__title {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0;
}
.product__accordion.accordion .accordion__content {
  padding-top: 1rem;
  padding-bottom: 1.6rem;
}

/* Figma redesign: quantity + Add to Cart + Buy It Now on separate rows */
@media screen and (min-width: 992px) {
  .product_buy_button_form,
  .product_buy_button_form form,
  .product_buy_button_form .product-form__buttons {
    width: 100%;
  }

  .product_buy_button_form .product-form__buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 11px !important;
    width: 100% !important;
    max-width: 518.8180541992188px !important;
    margin: 30px 0 0 !important;
  }

  /* Row 1: quantity */
  .product_buy_button_form .product-form__quantity {
    grid-row: 1;
    max-width: 100% !important;
    margin: 0 0 10px !important;
  }

  .product_buy_button_form .product-form__quantity .form__label {
    display: none;
  }

  .product_buy_button_form .product-form__quantity .quantity {
    width: 117px !important;
    height: 40px !important;
    min-height: 40px !important;
    border: 0.6px solid #ee2761 !important;
    border-radius: 26px !important;
    background: #fff !important;
  }

  .product_buy_button_form .product-form__quantity .quantity__input {
    color: #ee2761 !important;
    font-weight: 600 !important;
  }

  .product_buy_button_form .product-form__quantity .quantity__button {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin: auto 5px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ee2761 !important;
    color: #fff !important;
  }

  .product_buy_button_form .product-form__quantity .quantity__button svg,
  .product_buy_button_form .product-form__quantity .quantity__button svg path {
    color: #fff !important;
    stroke: #fff !important;
  }

  /* Row 2: Add to Cart */
  .product_buy_button_form .product__add__cart__button {
    grid-row: 2;
    width: 100% !important;
    max-width: 518.8180541992188px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .product_buy_button_form .product__add__cart__button .product-form__submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 518.8180541992188px !important;
    height: 48.52254867553711px !important;
    min-height: 48.52254867553711px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0.93px solid #ee2761 !important;
    border-radius: 27.06px !important;
    background: #ee2761 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 500;
  }

  .product_buy_button_form .product__add__cart__button .product-form__submit::before,
  .product_buy_button_form .product__add__cart__button .product-form__submit::after {
    border-radius: 27.06px !important;
  }

  .product_buy_button_form .product__add__cart__button .cart--button-text {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  .product_buy_button_form .product__add__cart__button .product-form__submit svg {
    position: static !important;
    display: none !important;
    flex: 0 0 auto !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    color: #fff !important;
    transform: none !important;
  }

  /* Row 3: Buy It Now */
  .product_buy_button_form .shopify-payment-button {
    grid-row: 3;
    width: 100% !important;
    max-width: 518.8180541992188px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .product_buy_button_form .shopify-payment-button__button,
  .product_buy_button_form .shopify-payment-button__button--unbranded {
    width: 100% !important;
    max-width: 518.8180541992188px !important;
    height: 48.52254867553711px !important;
    min-height: 48.52254867553711px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0.93px solid #ee2761 !important;
    border-radius: 27.06px !important;
    background: #fff !important;
    color: #ee2761 !important;
    box-shadow: none !important;
  }

  .product_buy_button_form .shopify-payment-button__button--unbranded:hover,
  .product_buy_button_form .shopify-payment-button__button--unbranded:focus {
    background: #fff !important;
    color: #ee2761 !important;
  }

  .product_buy_button_form .shopify-payment-button iframe {
    width: 100% !important;
    min-width: 100% !important;
    height: 48.52254867553711px !important;
  }

  .product_buy_button_form .shopify-payment-button__more-options {
    display: none !important;
  }
}

/* Sale pill: lowercase "sale" word after the percentage */
.sale__save--percent {
  text-transform: none;
}
.discount__sale__text {
  text-transform: none;
}

/* Figma desktop alignment: media + small gap + product information */
@media screen and (min-width: 992px) {
  .product.row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    column-gap: 54px !important;
  }

  .product.row > div:nth-child(1) {
    flex: 1 1 663.81px !important;
    width: auto !important;
    max-width: 663.81px !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  .product.row > div:nth-child(2) {
    flex: 0 1 518.8180541992188px !important;
    width: 518.8180541992188px !important;
    max-width: 518.8180541992188px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
  }

  .product__info-wrapper,
  .product__info-wrapper--extra-padding {
    padding-left: 0 !important;
  }

  .product__info-container {
    width: 100% !important;
    max-width: 518.8180541992188px !important;
    padding-right: 0 !important;
  }
}

/* ========================================================================== 
   Die Cut Mart PDP — white Add to Cart icon + sticky desktop media
   Keeps the current PDP button/layout customizations unchanged.
   ========================================================================== */
@media screen and (min-width: 992px) {
  /*
    The product row uses align-items:start, so the first column would normally
    be only as tall as its media. Stretching that grid/flex item gives the
    sticky media a containing block as tall as the product-information column.
  */
  .product.row > div:nth-child(1) {
    align-self: stretch !important;
  }

  /* Keep only the LEFT media column sticky while the product details scroll. */
  .product.row > div:nth-child(1) .product__media_container {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 2 !important;
    align-self: flex-start !important;
    height: fit-content;
  }

  /* The same theme setting currently adds the sticky class to ProductInfo too.
     Disable that on the right side so the requested sticky behaviour is media-only. */
  .product.row > div:nth-child(2) .product__info-container--sticky {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* Force the Add to Cart SVG artwork itself to render white, including icons
     whose internal paths use a hard-coded fill/stroke rather than currentColor. */
  .product_buy_button_form .product__add__cart__button .product-form__submit svg {
    color: #fff !important;
    filter: brightness(0) invert(1) !important;
  }
}


/* ========================================================================== 
   Die Cut Mart PDP — hover navigation arrows on the MAIN product media
   Desktop / web view
   Transparent glass style like mobile.
   ========================================================================== */
@media screen and (min-width: 992px) {
  .product--thumbnail media-gallery > slider-component[id^="GalleryViewer-"],
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryViewer-"],
  media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryViewer-"],
  media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryViewer-"] {
    position: relative !important;
  }

  .dcm-main-media-nav {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
  }

  .dcm-main-media-nav__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.94);

    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    margin: 0;

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

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #ee2761;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    
    cursor: pointer;
    pointer-events: auto;

    opacity: 0;
    visibility: hidden;

    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 180ms ease,
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .dcm-main-media-nav__button--prev {
    left: 14px;
  }

  .dcm-main-media-nav__button--next {
    right: 14px;
  }

  .dcm-main-media-nav__button svg {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    color: currentColor;
  }

  .dcm-main-media-nav__button svg path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

  .product--thumbnail media-gallery > slider-component[id^="GalleryViewer-"]:hover .dcm-main-media-nav__button,
  .product--thumbnail_slider media-gallery > slider-component[id^="GalleryViewer-"]:hover .dcm-main-media-nav__button,
  media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryViewer-"]:hover .dcm-main-media-nav__button,
  media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryViewer-"]:hover .dcm-main-media-nav__button,
  .dcm-main-media-nav__button:focus-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  .dcm-main-media-nav__button:hover,
  .dcm-main-media-nav__button:focus-visible {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    outline: none;
  }

  .dcm-main-media-nav__button:active {
    background: rgba(255, 255, 255, 0.38);
    transform: translateY(-50%) scale(0.96);
  }
}

/* ========================================================================== 
   Die Cut Mart PDP — MOBILE Figma gallery + client purchase controls
   - Keeps desktop PDP customisations untouched.
   - Mobile gallery remains functional, with the thumbnail rail on the LEFT.
   - Figma gallery target: 382px wide / 355.06px high at a 430px viewport.
   - Thumbnail target: 63.26px × 77.91px.
   - Quantity, Add to Cart and Buy it now are three separate rows.
   ========================================================================== */
@media screen and (max-width: 749px) {
  /* Remove the old mobile gallery overflow offsets so the gallery follows the
     same 24px page start/end used by the Figma mobile composition. */
  .product--mobile-show .product__media-wrapper,
  .product--mobile-show .product__media_container,
  .product--mobile-show media-gallery {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .product--mobile-show .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Viewer + thumbnails in one horizontal row. The thumbnail component is
     after the viewer in the theme markup, so row-reverse puts it on the left. */
  .product--mobile-show media-gallery {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 auto !important;
  }

  /* Main media viewer — take all remaining width beside the 63.26px rail. */
  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 355.06px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .product__media-list {
    width: 100% !important;
    height: 355.06px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .product__media-item,
  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .product__media-item--variant:first-child {
    width: 100% !important;
    min-width: 100% !important;
    height: 355.06px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .product__modal-opener,
  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .product__media,
  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .media,
  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .main--product__media--small.media,
  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .main--product__media--medium.media,
  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .main--product__media--large.media {
    width: 100% !important;
    height: 355.06px !important;
    min-height: 355.06px !important;
    max-height: 355.06px !important;
    padding-bottom: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .media img,
  .product--mobile-show media-gallery > slider-component[id^="GalleryViewer-"] .media > a > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Figma mobile thumbnail rail: 63.26 × 77.91px thumbnails, vertically
     scrollable when more images are available. */
  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] {
    flex: 0 0 63.26px !important;
    width: 63.26px !important;
    min-width: 63.26px !important;
    max-width: 63.26px !important;
    height: 355.06px !important;
    max-height: 355.06px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    overflow: hidden !important;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list,
  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list.slider {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: 63.26px !important;
    height: 355.06px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list::-webkit-scrollbar {
    display: none;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item,
  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item.slider__slide {
    flex: 0 0 77.91px !important;
    width: 63.26px !important;
    min-width: 63.26px !important;
    max-width: 63.26px !important;
    height: 77.91px !important;
    min-height: 77.91px !important;
    max-height: 77.91px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before {
    content: none !important;
    display: none !important;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 63.26px !important;
    height: 77.91px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(62, 59, 60, 0.33) !important;
    border-radius: 14.64px !important;
    background: transparent !important;
  }

  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
  }

  /* Keep the selected thumbnail clear without changing the Figma geometry. */
  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail[aria-current] {
    border-color: #ee2761 !important;
  }

  /* The left thumbnail rail is the navigation on mobile; the theme's extra
     slider controls underneath are not needed. */
  .product--mobile-show media-gallery .slider-buttons,
  .product--mobile-show media-gallery > slider-component[id^="GalleryThumbnails-"] .slider-button {
    display: none !important;
  }

  /* Product information follows the media closely instead of the theme's old
     6.5rem mobile top padding. */
  .product__info-container {
    width: 100% !important;
    max-width: none !important;
    padding-top: 24px !important;
  }

  /* ------------------------------------------------------------------------
     Client purchase layout on mobile
     Row 1: Quantity
     Row 2: Add to Cart
     Row 3: Buy it now
     ------------------------------------------------------------------------ */
  .product_buy_button_form,
  .product_buy_button_form form,
  .product_buy_button_form .product-form__buttons {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product_buy_button_form .product-form__buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 20px 0 0 !important;
  }

  /* Quantity — own row. */
  .product_buy_button_form .product-form__quantity {
    grid-row: 1 !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 0 4px !important;
  }

  .product_buy_button_form .product-form__quantity .form__label {
    display: none !important;
  }

  .product_buy_button_form .product-form__quantity .quantity {
    width: 117px !important;
    height: 40px !important;
    min-height: 40px !important;
    border: 0.6px solid #ee2761 !important;
    border-radius: 26px !important;
    background: #fff !important;
  }

  .product_buy_button_form .product-form__quantity .quantity__input {
    color: #ee2761 !important;
    font-weight: 600 !important;
  }

  .product_buy_button_form .product-form__quantity .quantity__button {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: auto 5px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ee2761 !important;
    color: #fff !important;
  }

  .product_buy_button_form .product-form__quantity .quantity__button svg,
  .product_buy_button_form .product-form__quantity .quantity__button svg path {
    color: #fff !important;
    stroke: #fff !important;
  }

  /* Add to Cart — full width, pink, text first then white cart icon. */
  .product_buy_button_form .product__add__cart__button {
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .product_buy_button_form .product__add__cart__button .product-form__submit {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48.52px !important;
    min-height: 48.52px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 0.93px solid #ee2761 !important;
    border-radius: 27.06px !important;
    background: #ee2761 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .product_buy_button_form .product__add__cart__button .product-form__submit::before,
  .product_buy_button_form .product__add__cart__button .product-form__submit::after {
    border-radius: 27.06px !important;
  }

  .product_buy_button_form .product__add__cart__button .cart--button-text {
    order: 1 !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  .product_buy_button_form .product__add__cart__button .product-form__submit svg {
    order: 2 !important;
    position: static !important;
    display: block !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    color: #fff !important;
    filter: brightness(0) invert(1) !important;
    transform: none !important;
  }

  /* Buy it now — own full-width outlined row. */
  .product_buy_button_form .shopify-payment-button {
    grid-row: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .product_buy_button_form .shopify-payment-button__button,
  .product_buy_button_form .shopify-payment-button__button--unbranded {
    width: 100% !important;
    max-width: 100% !important;
    height: 48.52px !important;
    min-height: 48.52px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 0.93px solid #ee2761 !important;
    border-radius: 27.06px !important;
    background: #fff !important;
    color: #ee2761 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .product_buy_button_form .shopify-payment-button__button--unbranded:hover,
  .product_buy_button_form .shopify-payment-button__button--unbranded:focus {
    background: #fff !important;
    color: #ee2761 !important;
  }

  .product_buy_button_form .shopify-payment-button iframe {
    width: 100% !important;
    min-width: 100% !important;
    height: 48.52px !important;
  }

  .product_buy_button_form .shopify-payment-button__more-options {
    display: none !important;
  }
}
/* ==========================================================================
   Die Cut Mart PDP — MOBILE main image navigation arrows
   Uses the SAME working navigation as desktop.
   Semi-transparent buttons, always visible on touch devices.
   ========================================================================== */

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

  /* Main image must be the positioning parent */
  .product--mobile-show
    media-gallery
    > slider-component[id^="GalleryViewer-"] {
    position: relative !important;
  }


  /* Navigation overlay */
  .product--mobile-show .dcm-main-media-nav {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

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

    z-index: 15 !important;

    pointer-events: none !important;
  }


  /* Both arrow buttons */
  .product--mobile-show .dcm-main-media-nav__button {
    position: absolute !important;

    top: 50% !important;
    transform: translateY(-50%) !important;

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

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;

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

    /* Transparent / glass-like */
    background: rgba(255, 255, 255, 0.20) !important;

    border: 2px solid rgba(245, 242, 243, 0.28) !important;
    border-radius: 50% !important;

    color: #ee2761 !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;

    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    opacity: 1 !important;
    visibility: visible !important;

    cursor: pointer;
    pointer-events: auto !important;

    z-index: 16 !important;
  }


  /* Previous */
  .product--mobile-show
    .dcm-main-media-nav__button--prev {
    left: 8px !important;
    right: auto !important;
  }


  /* Next */
  .product--mobile-show
    .dcm-main-media-nav__button--next {
    right: 8px !important;
    left: auto !important;
  }


  /* Arrow SVG */
  .product--mobile-show
    .dcm-main-media-nav__button svg {
    display: block !important;

    width: 16px !important;
    height: 16px !important;

    margin: 0 !important;

    color: #ee2761 !important;
  }


  .product--mobile-show
    .dcm-main-media-nav__button svg path {
    fill: none !important;
    stroke: currentColor !important;
  }


  /* Small feedback when tapped */
  .product--mobile-show
    .dcm-main-media-nav__button:active {
    background: rgba(255, 255, 255, 0.38) !important;

    transform:
      translateY(-50%)
      scale(0.94) !important;
  }
}
/* ==========================================================================
   DIE CUT MART — PDP FINAL CORRECTIONS
   --------------------------------------------------------------------------
   1. Media gallery + information entrance parallax
   2. Media starts on the same container line as the header logo
   3. Tablet (750–991px): full 4-thumbnail vertical rail
   4. Tablet: Add to Cart + Buy it now / Notify me on one row
   5. Sold-out: hide Buy it now and style Notify me like Add to Cart
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared container alignment
   -------------------------------------------------------------------------- */

/*
  main-product uses "container-fluid px-0" in the full-width mode.
  The header uses the theme's --offset-fluid for its visible content line.
  Put the PDP back onto that same line.
*/
.dcm-pdp.px-0 {
  padding-left: var(--offset-fluid, 1.5rem) !important;
  padding-right: var(--offset-fluid, 1.5rem) !important;
  box-sizing: border-box !important;
}

.dcm-pdp > .product {
  box-sizing: border-box !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.dcm-pdp > .product > div {
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Entrance parallax — media from LEFT / information from RIGHT
   -------------------------------------------------------------------------- */

@keyframes dcm-pdp-media-from-left {
  0% {
    opacity: 0;
    transform: translate3d(-56px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dcm-pdp-info-from-right {
  0% {
    opacity: 0;
    transform: translate3d(56px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.dcm-pdp > .product > div:first-child .product__media_container {
  animation: dcm-pdp-media-from-left 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}

.dcm-pdp > .product > div:last-child .product__info-container {
  animation: dcm-pdp-info-from-right 760ms cubic-bezier(0.22, 1, 0.36, 1) 70ms both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .dcm-pdp > .product > div:first-child .product__media_container,
  .dcm-pdp > .product > div:last-child .product__info-container {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }
}

/* --------------------------------------------------------------------------
   DESKTOP — keep media pinned to the header/container LEFT edge
   -------------------------------------------------------------------------- */

@media screen and (min-width: 992px) {
  .dcm-pdp > .product {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    column-gap: 54px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .dcm-pdp > .product > div:first-child {
    flex: 1 1 663.81px !important;
    width: auto !important;
    max-width: 663.81px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }

  .dcm-pdp > .product > div:last-child {
    flex: 0 1 518.8180541992188px !important;
    width: 518.8180541992188px !important;
    max-width: 518.8180541992188px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dcm-pdp .product__info-wrapper,
  .dcm-pdp .product__info-wrapper--extra-padding {
    padding-left: 0 !important;
  }

  .dcm-pdp .product__info-container {
    width: 100% !important;
    max-width: 518.8180541992188px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dcm-pdp > .product > div:first-child .product__media_container,
  .dcm-pdp > .product > div:first-child .product__media-gallery {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   TABLET — 750px to 991px
   -------------------------------------------------------------------------- */

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

  /* One full-width product column on tablet. */
  .dcm-pdp > .product {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .dcm-pdp > .product > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* -----------------------------
     Gallery: thumbnails LEFT
     ----------------------------- */
  .dcm-pdp .product--thumbnail media-gallery,
  .dcm-pdp .product--thumbnail_slider media-gallery,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"],
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryViewer-"],
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryViewer-"],
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryViewer-"],
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryViewer-"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /*
    The tablet gallery height is controlled by the main viewer.
    Make the thumbnail rail use that exact height.
  */
  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"],
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"],
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"],
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /*
    Show all four thumbnails instead of the old "3 + half of 4th" peek.
    Four fixed items fill the rail height; no vertical clipping.
  */
  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 110px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item {
    flex: 0 0 calc((100% - 30px) / 4) !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    height: calc((100% - 30px) / 4) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before {
    content: none !important;
    display: none !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 110px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail img,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail img,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail img,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .slider-button,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .slider-button,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .slider-button,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .slider-button {
    display: none !important;
  }

  /* -----------------------------
     Product information
     ----------------------------- */
  .dcm-pdp .product__info-wrapper,
  .dcm-pdp .product__info-wrapper--extra-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dcm-pdp .product__info-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* -----------------------------
     Tablet purchase controls
     Quantity stays on its own row.
     Buttons share the next row.
     ----------------------------- */
  .dcm-pdp .product_buy_button_form,
  .dcm-pdp .product_buy_button_form form,
  .dcm-pdp .product_buy_button_form .product-form__buttons {
    width: 100% !important;
    max-width: 100% !important;
  }

  .dcm-pdp .product_buy_button_form .product-form__buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    margin: 20px 0 0 !important;
  }

  .dcm-pdp .product_buy_button_form .product-form__quantity {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 0 4px !important;
  }

  .dcm-pdp .product_buy_button_form .product__add__cart__button {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .dcm-pdp .product_buy_button_form .product__add__cart__button .product-form__submit,
  .dcm-pdp .product_buy_button_form .product__add__cart__button button {
    width: 100% !important;
    max-width: none !important;
    height: 48.52px !important;
    min-height: 48.52px !important;
    margin: 0 !important;
    border-radius: 27.06px !important;
  }

  .dcm-pdp .product_buy_button_form .shopify-payment-button {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .dcm-pdp .product_buy_button_form .shopify-payment-button__button,
  .dcm-pdp .product_buy_button_form .shopify-payment-button__button--unbranded {
    width: 100% !important;
    max-width: none !important;
    height: 48.52px !important;
    min-height: 48.52px !important;
    margin: 0 !important;
    border-radius: 27.06px !important;
  }

  /* When the payment button is hidden for sold-out, let Notify Me occupy both columns. */
  .dcm-pdp .product_buy_button_form:has(.product-form__submit[disabled]) .shopify-payment-button {
    display: none !important;
  }

  .dcm-pdp .product_buy_button_form:has(.product-form__submit[disabled]) .product__add__cart__button {
    grid-column: 1 / -1 !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — keep the header/container line and the existing Figma gallery
   -------------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  .dcm-pdp > .product {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .dcm-pdp > .product > div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dcm-pdp .product__media-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .dcm-pdp .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   SOLD OUT / NOTIFY ME
   -------------------------------------------------------------------------- */

/*
  The theme's back-in-stock trigger is a <modal-opener> pointing at
  #PopupModal-4. This keeps the functionality intact and only redesigns the
  trigger to match Add to Cart.
*/
.dcm-pdp .product_buy_button_form modal-opener[data-modal="#PopupModal-4"],
.dcm-pdp .product_buy_button_form modal-opener[aria-controls="PopupModal-4"],
.dcm-pdp .product_buy_button_form [data-modal="#PopupModal-4"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dcm-pdp .product_buy_button_form modal-opener[data-modal="#PopupModal-4"] > button,
.dcm-pdp .product_buy_button_form modal-opener[aria-controls="PopupModal-4"] > button,
.dcm-pdp .product_buy_button_form [data-modal="#PopupModal-4"] > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  height: 48.52px !important;
  min-height: 48.52px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 0.93px solid #ee2761 !important;
  border-radius: 27.06px !important;
  background: #ee2761 !important;
  color: #fff !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transform: none !important;
}

/* Common alternate markup: the trigger itself may be the button. */
.dcm-pdp .product_buy_button_form button[data-modal="#PopupModal-4"],
.dcm-pdp .product_buy_button_form button[aria-controls="PopupModal-4"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  height: 48.52px !important;
  min-height: 48.52px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 0.93px solid #ee2761 !important;
  border-radius: 27.06px !important;
  background: #ee2761 !important;
  color: #fff !important;
}

/* Do not allow the payment button back in when Add to Cart is disabled. */
.dcm-pdp .product_buy_button_form:has(.product-form__submit[disabled]) .shopify-payment-button,
.dcm-pdp .product_buy_button_form:has(button[name="add"][disabled]) .shopify-payment-button {
  display: none !important;
}

/* Sold-out Add-to-Cart/Notify wrapper gets the same full-width treatment. */
.dcm-pdp .product_buy_button_form:has(.product-form__submit[disabled]) modal-opener[data-modal="#PopupModal-4"],
.dcm-pdp .product_buy_button_form:has(button[name="add"][disabled]) modal-opener[data-modal="#PopupModal-4"] {
  width: 100% !important;
}

/* Keep the Notify Me text above any theme pseudo-element. */
.dcm-pdp .product_buy_button_form modal-opener[data-modal="#PopupModal-4"] > button > *,
.dcm-pdp .product_buy_button_form button[data-modal="#PopupModal-4"] > *,
.dcm-pdp .product_buy_button_form button[aria-controls="PopupModal-4"] > * {
  position: relative;
  z-index: 1;
}
/* Liquid marks the initial selected variant as sold out. This is the
   authoritative fallback for products whose Notify Me trigger replaces
   Add to Cart rather than rendering a disabled submit button. */
.dcm-pdp.dcm-pdp--sold-out .product_buy_button_form .shopify-payment-button {
  display: none !important;
}

@media screen and (min-width: 750px) and (max-width: 991px) {
  .dcm-pdp.dcm-pdp--sold-out .product_buy_button_form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .dcm-pdp.dcm-pdp--sold-out .product_buy_button_form .product-form__buttons modal-opener[data-modal="#PopupModal-4"],
  .dcm-pdp.dcm-pdp--sold-out .product_buy_button_form .product-form__buttons modal-opener[aria-controls="PopupModal-4"],
  .dcm-pdp.dcm-pdp--sold-out .product_buy_button_form .product-form__buttons [data-modal="#PopupModal-4"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .dcm-pdp.dcm-pdp--sold-out .product_buy_button_form .product-form__buttons .product__add__cart__button:has(modal-opener[data-modal="#PopupModal-4"]),
  .dcm-pdp.dcm-pdp--sold-out .product_buy_button_form .product-form__buttons .product__add__cart__button:has(modal-opener[aria-controls="PopupModal-4"]) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}


/* ==========================================================================
   FINAL TABLET THUMBNAIL FIX — DO NOT STRETCH
   --------------------------------------------------------------------------
   Keep the original thumbnail geometry:
     width  : 109.93px
     height : 135.38px

   Tablet viewport:
     3 thumbnails fully visible
     + approximately half of the 4th thumbnail

   IMPORTANT:
   Do NOT use height: 100%, flex-grow, or calc(... / 4) on thumbnail items.
   ========================================================================== */
@media screen and (min-width: 750px) and (max-width: 991px) {

  .dcm-pdp .product--thumbnail media-gallery,
  .dcm-pdp .product--thumbnail_slider media-gallery,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"],
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] {
    align-items: flex-start !important;
  }

  /* Thumbnail rail itself: fixed width + fixed 3.5-item viewport. */
  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"],
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"],
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"],
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] {
    flex: 0 0 109.93px !important;
    width: 109.93px !important;
    min-width: 109.93px !important;
    max-width: 109.93px !important;

    height: 493.03px !important;
    min-height: 493.03px !important;
    max-height: 493.03px !important;

    align-self: flex-start !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The list must be content-sized, NOT stretched to the gallery height. */
  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;

    width: 109.93px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 9.6px !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list::-webkit-scrollbar,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list::-webkit-scrollbar,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list::-webkit-scrollbar,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list::-webkit-scrollbar {
    display: none !important;
  }

  /* NEVER allow the individual thumbnail to grow/shrink vertically. */
  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item {
    flex: 0 0 135.38px !important;
    width: 109.93px !important;
    min-width: 109.93px !important;
    max-width: 109.93px !important;

    height: 135.38px !important;
    min-height: 135.38px !important;
    max-height: 135.38px !important;

    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail-list__item::before {
    content: none !important;
    display: none !important;
    padding: 0 !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail {
    display: block !important;
    position: relative !important;

    width: 109.93px !important;
    min-width: 109.93px !important;
    max-width: 109.93px !important;

    height: 135.38px !important;
    min-height: 135.38px !important;
    max-height: 135.38px !important;

    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13.23px !important;
    overflow: hidden !important;
  }

  .dcm-pdp .product--thumbnail media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail img,
  .dcm-pdp .product--thumbnail_slider media-gallery > slider-component[id^="GalleryThumbnails-"] .thumbnail img,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail"] > slider-component[id^="GalleryThumbnails-"] .thumbnail img,
  .dcm-pdp media-gallery[data-desktop-layout="thumbnail_slider"] > slider-component[id^="GalleryThumbnails-"] .thumbnail img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }
}


/* ==========================================================================
   SOLD OUT — FINAL NOTIFY ME / BUY IT NOW FIX
   --------------------------------------------------------------------------
   Current theme markup (confirmed from the live DOM):
     button.button__notify--product

   Required behavior:
     1. When Notify Me exists, hide Buy It Now completely.
     2. Notify Me uses the SAME visual treatment as Buy It Now:
        white background + pink border + pink text + pill shape.
     3. Keep Notify Me full width.
   ========================================================================== */

/* If the Notify Me trigger exists, the product is sold out.
   Hide Shopify's dynamic Buy It Now button completely. */
.dcm-pdp .product_buy_button_form:has(button.button__notify--product) .shopify-payment-button,
.dcm-pdp .product_buy_button_form:has(modal-opener button.button__notify--product) .shopify-payment-button,
.product_buy_button_form:has(button.button__notify--product) .shopify-payment-button,
.product_buy_button_form:has(modal-opener button.button__notify--product) .shopify-payment-button {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Notify Me — exactly like the current Buy It Now button. */
.dcm-pdp .product_buy_button_form button.button__notify--product,
.product_buy_button_form button.button__notify--product {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 48.52px !important;
  min-height: 48.52px !important;
  max-height: 48.52px !important;

  margin: 0 !important;
  padding: 0 20px !important;

  border: 0.93px solid #ee2761 !important;
  border-radius: 27.06px !important;

  background: #fff !important;
  color: #ee2761 !important;

  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;

  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: center !important;

  cursor: pointer !important;
  transform: none !important;
}

/* Remove theme pseudo-element backgrounds/borders from Notify Me. */
.dcm-pdp .product_buy_button_form button.button__notify--product::before,
.dcm-pdp .product_buy_button_form button.button__notify--product::after,
.product_buy_button_form button.button__notify--product::before,
.product_buy_button_form button.button__notify--product::after {
  border-radius: 27.06px !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Notify Me hover/focus — same behavior as Buy It Now. */
.dcm-pdp .product_buy_button_form button.button__notify--product:hover,
.dcm-pdp .product_buy_button_form button.button__notify--product:focus,
.product_buy_button_form button.button__notify--product:hover,
.product_buy_button_form button.button__notify--product:focus {
  background: #fff !important;
  color: #ee2761 !important;
  border-color: #ee2761 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Make the Notify Me wrapper consume the full button row. */
.dcm-pdp .product_buy_button_form .product__add__cart__button:has(button.button__notify--product),
.product_buy_button_form .product__add__cart__button:has(button.button__notify--product) {
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
}

/* Tablet: sold-out controls must not reserve a second Buy It Now row. */
@media screen and (min-width: 750px) and (max-width: 991px) {
  .dcm-pdp .product_buy_button_form:has(button.button__notify--product),
  .product_buy_button_form:has(button.button__notify--product) {
    display: block !important;
  }

  .dcm-pdp .product_buy_button_form:has(button.button__notify--product) .product__add__cart__button,
  .product_buy_button_form:has(button.button__notify--product) .product__add__cart__button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* If the Notify button is wrapped by modal-opener, keep the wrapper full width. */
.dcm-pdp .product_buy_button_form modal-opener:has(> button.button__notify--product),
.product_buy_button_form modal-opener:has(> button.button__notify--product) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   SOLD-OUT LAYOUT — NOTIFY ME REPLACES BUY IT NOW'S POSITION
   --------------------------------------------------------------------------
   Live DOM behavior:
   - The normal product submit becomes a disabled "Sold out" button.
   - Notify Me is a separate button/wrapper.
   - Buy It Now is the Shopify payment-button element.

   Required sold-out layout:
     Quantity
     Notify Me        <-- same position Buy It Now normally occupies

   Therefore:
     - hide the disabled Sold out submit button + its row
     - hide Buy It Now
     - move Notify Me wrapper into row 2
   ========================================================================== */

/* Hide the disabled "Sold out" Add-to-Cart row when Notify Me exists. */
.product_buy_button_form .product__add__cart__button:has(.product-form__submit[disabled]):has(~ * button.button__notify--product),
.product_buy_button_form .product__add__cart__button:has(.product-form__submit[disabled]):has(~ * modal-opener button.button__notify--product),
.product-form__buttons .product__add__cart__button:has(.product-form__submit[disabled]):has(~ * button.button__notify--product),
.product-form__buttons .product__add__cart__button:has(.product-form__submit[disabled]):has(~ * modal-opener button.button__notify--product) {
  display: none !important;
}

/* Fallback: if Notify Me is nested elsewhere in the same form, the
   disabled submit itself must never remain visible. */
.product_buy_button_form:has(button.button__notify--product) .product-form__submit[disabled] {
  display: none !important;
  visibility: hidden !important;
}

/* Hide the complete disabled-submit wrapper as well, preventing its
   empty row/height from remaining in the layout. */
.product_buy_button_form:has(button.button__notify--product) .product__add__cart__button:has(.product-form__submit[disabled]),
.product-form__buttons:has(button.button__notify--product) .product__add__cart__button:has(.product-form__submit[disabled]) {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Buy It Now must also disappear on sold-out products. */
.product_buy_button_form:has(button.button__notify--product) .shopify-payment-button,
.product-form__buttons:has(button.button__notify--product) .shopify-payment-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Notify wrapper replaces the Buy It Now row. */
.product_buy_button_form:has(button.button__notify--product) .main__buy_buttons,
.product-form__buttons:has(button.button__notify--product) .main__buy_buttons,
.product_buy_button_form:has(button.button__notify--product) modal-opener:has(button.button__notify--product),
.product-form__buttons:has(button.button__notify--product) modal-opener:has(button.button__notify--product) {
  order: 2 !important;
  grid-row: 3 !important;
  display: block !important;
  width: 100% !important;
  max-width: 518.8180541992188px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Notify button itself: same exact outlined pill treatment as Buy It Now. */
.product_buy_button_form:has(button.button__notify--product) button.button__notify--product,
.product-form__buttons:has(button.button__notify--product) button.button__notify--product {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 518.8180541992188px !important;
  height: 48.52254867553711px !important;
  min-height: 48.52254867553711px !important;
  max-height: 48.52254867553711px !important;
  margin: 0 !important;
  padding: 0 24px !important;

  border: 0.93px solid #ee2761 !important;
  border-radius: 27.06px !important;
  background: #ffffff !important;
  color: #ee2761 !important;

  box-shadow: none !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: none !important;
}

/* Desktop: the form uses a 3-row grid.
   Notify is row 3 — exactly where Buy It Now normally sits. */
@media screen and (min-width: 992px) {
  .product_buy_button_form:has(button.button__notify--product) .product-form__buttons,
  .product-form__buttons:has(button.button__notify--product) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    gap: 11px !important;
  }

  .product_buy_button_form:has(button.button__notify--product) .main__buy_buttons,
  .product-form__buttons:has(button.button__notify--product) .main__buy_buttons {
    grid-row: 3 !important;
    order: unset !important;
  }
}

/* Tablet + mobile: same vertical position as Buy It Now.
   There must be no blank Sold-out/Add-to-Cart row. */
@media screen and (max-width: 991px) {
  .product_buy_button_form:has(button.button__notify--product) .product-form__buttons,
  .product-form__buttons:has(button.button__notify--product) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 11px !important;
  }

  .product_buy_button_form:has(button.button__notify--product) .main__buy_buttons,
  .product-form__buttons:has(button.button__notify--product) .main__buy_buttons {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   SOLD OUT - NOTIFY ME
   Match Notify Me to the existing Buy It Now button
   ========================================================= */

.notify__me--available-{{ section.id }} .button__notify--product {
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 0 30px !important;
  padding: 0 24px !important;

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

  border: 1px solid #ee2761 !important;
  border-radius: 27px !important;

  background: #fff !important;
  color: #ee2761 !important;

  font: inherit !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;

  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease !important;
}

.notify__me--available-{{ section.id }} .button__notify--product:hover {
  background: #ee2761 !important;
  border-color: #ee2761 !important;
  color: #fff !important;
}
/* Mobile: reduce product title Wishlist + Share icons */
@media screen and (max-width: 749px) {
  .product__title_wishlist .wishlist__button,
  .product__title_wishlist .wishlist__button svg,
  .product__title_share,
  .product__title_share svg {
    width: 3rem !important;
    height: 3rem !important;
  }

  .product__title_icons {
    gap: 0.5rem;
  }
}
/* =========================================================
   TABLET ONLY — Product media Previous / Next arrows
   Mobile and Desktop are NOT affected
   ========================================================= */

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

  .dcm-main-media-nav {
    display: block !important;
    pointer-events: none !important;
  }

  .dcm-main-media-nav__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;

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

    /* Keep the existing gallery positioning */
    position: absolute !important;
    top: 50% !important;

    border-radius: 50% !important;

    /* Glass effect */
    background: rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;

    border: 1px solid rgba(255, 255, 255, 0.55) !important;

    color: #ee2761 !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
  }

  .dcm-main-media-nav__button--prev {
    left: 14px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
  }

  .dcm-main-media-nav__button--next {
    right: 14px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }

  .dcm-main-media-nav__button svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
  }
}
.product .price-item {
  font-family: "Baloo Da 2", sans-serif !important;
  font-weight: 700 !important;
}