.product {

  margin: 0;

}



.product--no-media {

  max-width: 57rem;

  margin: 0 auto;

}



.product__media-wrapper {

  padding-left: 0;

}



.product__info-wrapper {

  padding-left: 0;

  padding-bottom: 0;

}



.product__media-wrapper .slider-component .splide__slide img{

  display: block;

  width: auto;

  max-width: 100%;

  max-height: 100%;

  margin: 0 auto;

}



.product__media-wrapper .slider-component .splide__slide{

  display: flex;

  justify-content: center;

  align-items: center;

}



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

  .product-section {

    margin-top: 0;

  }

}



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

  .product__info-container--sticky {

    position: sticky;

    top: 3rem;

    z-index: 2;

  }



  .product__info-wrapper {

    padding-left: 5rem;

  }



  .product__media-container .slider-buttons {

    display: none;

  }

}



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

  .product:not(.product--no-media):not(.featured-product) .product__media-wrapper {

    max-width: 55%;

    width: calc(55% - 1rem / 2);

  }



  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {

    padding-left: 4rem;

    max-width: 45%;

    width: calc(45% - 1rem / 2);

  }



  .product:not(.product--no-media) .product__info-container .product-form{

    max-width: 450px;

  }

}



/* Product form */



.product-form {

  display: block;

}



/* Form Elements */

.product-form__input{

  flex: 0 0 100%;

  padding: 0;

  margin: 0 0 1.2rem 0;

  min-width: fit-content;

  border: none;

  position: relative;

  display: flex;

  flex-wrap: wrap;

}



.variants-selector-wrapper > div.product-form__input::after,

.selector-wrapper.product-form__input::after{

  content: '';

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-caret' viewBox='0 0 10 6'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");

  height: 0.6rem;

  width: 1rem;

  pointer-events: none;

  position: absolute;

  bottom: 1.6rem;

  right: 1.5rem;

}



variant-radios,

variant-selects {

  display: block;

}



.product-form__input--dropdown {

  margin-bottom: 1.6rem;

}



.product-form__input .form__label {

  padding-left: 0;

}



fieldset.product-form__input .form__label {

  margin-bottom: 0.2rem;

}



.product-form__input input[type='radio'] {

  clip: rect(0, 0, 0, 0);

  overflow: hidden;

  position: absolute;

  height: 1px;

  width: 1px;

}



.product-form__input input[type='radio'] + label {

  border: 0.2rem solid rgba(var(--color-foreground), 0.15);

  border-radius: 0.5rem;

  color: rgb(var(--color-foreground));

  display: inline-block;

  margin: 0.7rem 0.5rem 0.2rem 0;

  padding: 1.5rem 2rem;

  font-size: 1.4rem;

  letter-spacing: 0.1rem;

  line-height: 1;

  text-align: center;

  transition: border var(--duration-short) ease;

  cursor: pointer;

  display: inline-flex;

  justify-content: center;

  align-items: center;

}



.product-form__input input[type='radio'] + label:hover {

  border-color: rgb(var(--color-foreground));

}



.product-form__input input[type='radio']:checked + label {

  border-color: rgba(var(--color-foreground), 1);

}



.product-form__input input[type='radio']:disabled + label ,

.product-form__input input[type='radio'].disabled + label {

  opacity: 0.4;

  border-color: rgba(var(--color-foreground), 0.1);

  background-color: rgba(var(--color-foreground), 0.1);

  color: rgba(var(--color-foreground), 0.6);

  /* text-decoration: line-through; */

}

.product-form__input input[type='radio']:focus-visible + label {

  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),

    0 0 0 0.5rem rgba(var(--color-foreground), 0.55);

}



/* Fallback */

.product-form__input input[type='radio'].focused + label {

  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),

    0 0 0 0.5rem rgba(var(--color-foreground), 0.55);

}



/* No outline when focus-visible is available in the browser */

.no-js .product-form__input input[type='radio']:focus:not(:focus-visible) + label {

  box-shadow: none;

}



.variant-img-label-wrapper .variant-img-label + .label__text{

  color: transparent;

  overflow: hidden;

  display: none;

}



.product-form__input input[type='radio'] + .variant-img-label-wrapper{

  position: relative;

  min-width: 60px;

  min-height: 60px;

  overflow: hidden;

  border-radius: 0.5rem;

  white-space: nowrap;

}



.product-form__input .variant-img-label{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.product-form__input .select {

  max-width: 25rem;

}



.product-form__submit {

  margin-top: 1rem;

  margin-bottom: 1rem;

}



.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 info */



.product__info-container > * + * {

  margin: 1rem 0;

}



.product__info-container .product-form,

.product__info-container .product__description {

  margin: 2.5rem 0;

}



.product__text {

  margin-bottom: 0;

}



a.product__text {

  display: block;

  text-decoration: none;

  color: rgba(var(--color-foreground), 0.75);

}



.product__text.caption-with-letter-spacing {

  text-transform: uppercase;

}



.product__title {

  word-break: break-word;

  margin-top: 1rem;

  margin-bottom: 1rem;

}



.product__title + .product__text.caption-with-letter-spacing {

  margin-top: -1.5rem;

}



.product__text.caption-with-letter-spacing + .product__title {

  margin-top: 0;

}



.product__accordion .accordion__content {

  padding: 0 1rem;

}



.product .price {

  align-items: flex-start;

}



.product .price--on-sale dl {

  margin-bottom: 0.5rem;

}



.product .price--sold-out .price__badge-sale {

  display: none;

}



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

  .product__info-container .price--on-sale .price-item--regular {

    font-size: 1.6rem;

  }



  .product__info-container > *:first-child {

    margin-top: 0;

  }

}



.product__description-title {

  font-weight: 600;

}



.product--no-media .product__title,

.product--no-media .product__text,

.product--no-media noscript .product-form__input {

  text-align: center;

}



.product--no-media noscript .product-form__input,

.product--no-media .share-button {

  max-width: 100%;

}



.product--no-media fieldset.product-form__input,

.product--no-media .product-form__quantity,

.product--no-media .product-form__input--dropdown,

.product--no-media .share-button,

.product--no-media .product__view-details,

.product--no-media .store-availability-container,

.product--no-media .product-form {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



.product--no-media .product-form > .form {

  max-width: 30rem;

  width: 100%;

}



.product--no-media .product-form__quantity,

.product--no-media .product-form__input--dropdown {

  flex-direction: column;

  max-width: 100%;

}



.product--no-media fieldset.product-form__input {

  flex-wrap: wrap;

  margin: 0 auto 1.2rem auto;

}



.product--no-media .product__info-container > modal-opener {

  display: block;

  text-align: center;

}



.product--no-media .product-popup-modal__button {

  padding-right: 0;

}



.product--no-media .price {

  justify-content: center;

}



.product--no-media .product__info-wrapper {

  padding-left: 0;

}



/* Product media */



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

  .product__media-list {

    margin-left: -2.5rem;

    padding-bottom: 2rem;

    margin-bottom: 3rem;

    width: calc(100% + 4rem);

  }



  .product__media-wrapper .slider-component {

    margin-left: -1.5rem;

    margin-right: -1.5rem;

    margin-top: 2rem;

  }



  .slider.slider--mobile.product__media-list {

    padding-bottom: 0;

    margin-bottom: 0.5rem;

  }



  .slider.product__media-list::-webkit-scrollbar {

    height: 0.2rem;

    width: 0.2rem;

  }



  .product__media-list::-webkit-scrollbar-thumb {

    background-color: rgb(var(--color-foreground));

  }



  .product__media-list::-webkit-scrollbar-track {

    background-color: rgba(var(--color-foreground), 0.2);

  }



  .product__media-list .product__media-item {

    width: calc(100% - 3rem);

  }



  .slider.product__media-list .product__media-item:first-of-type {

    padding-left: 1.5rem;

  }

}



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

  .product__media-item:first-child {

    width: 100%;

  }



  .product-media-modal__content > .product__media-item--variant.product__media-item--variant {

    display: none;

  }



  .product-media-modal__content > .product__media-item--variant:first-child {

    display: block;

  }

}



.product__media-item--variant {

  display: none;

}



.product__media-item--variant:first-child {

  display: block;

}



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

  .product__media-list .product__media-item:first-child {

    padding-left: 0;

  }



  .product__media-list .product__media-item {

    padding: 0 0 0.5rem;

    width: 100%;

  }

}



.product__media-icon .icon {

  width: 1.2rem;

  height: 1.4rem;

}



.product__media-icon {

  background-color: rgb(var(--color-background));

  border-radius: 50%;

  border: 0.1rem solid rgba(var(--color-foreground), 0.1);

  color: rgb(var(--color-foreground));

  display: flex;

  align-items: center;

  justify-content: center;

  height: 3rem;

  width: 3rem;

  position: absolute;

  left: 1.5rem;

  top: 1.5rem;

  z-index: 1;

  transition: color var(--duration-short) ease,

    opacity var(--duration-short) ease;

}



.product__media-video .product__media-icon {

  opacity: 1;

}



.product__modal-opener--image .product__media-toggle:hover {

  cursor: zoom-in;

}



.product__modal-opener:hover .product__media-icon {

  border: 0.1rem solid rgba(var(--color-foreground), 0.1);

}



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

  .grid__item.product__media-item--full {

    width: 100%;

  }

}



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

  .product__modal-opener .product__media-icon {

    opacity: 0;

  }



  .product__modal-opener:hover .product__media-icon,

  .product__modal-opener:focus .product__media-icon {

    opacity: 1;

  }

}



.product__media-item > * {

  display: block;

  position: relative;

}



.product__media-toggle {

  background-color: transparent;

  border: none;

  cursor: pointer;

  display: block;

  margin: 0;

  padding: 0;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 2;

  height: 100%;

  width: 100%;

}



.image-modal-wrapper.is-active,

.product-media-modal {

  background-color: rgb(var(--color-background));

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  visibility: hidden;

  opacity: 0;

  z-index: -1;

}



.image-modal-wrapper.is-active,

.product-media-modal[open] {

  visibility: visible;

  opacity: 1;

  z-index: 110000;

}



.image-modal-wrapper.is-active{

  display: flex;

  align-items: center;

  justify-content: center;

}



.product-media-modal__dialog {

  display: flex;

  align-items: center;

  height: 100vh;

}



.product-media-modal__content {

  max-height: 100vh;

  width: 100%;

  overflow: auto;

}



.product-media-modal__content > *:not(.active),

.product__media-list .deferred-media {

  display: none;

}



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

  .product-media-modal__content {

    padding-bottom: 2rem;

  }



  .product-media-modal__content > *:not(.active) {

    display: block;

  }



  .product__modal-opener:not(.product__modal-opener--image) {

    display: none;

  }



  .product__media-list .deferred-media {

    display: block;

  }

}



.product__media-list .deferred-media,

.product__media-list .product__modal-opener {

  border: 0.1rem solid rgba(var(--color-foreground), 0.04);

}



.product-media-modal__content > * {

  display: block;

  height: auto;

  margin: auto;

  border: 0.1rem solid rgba(var(--color-foreground), 0.04);

}



.product-media-modal__content .media {

  background: none;

}



.product-media-modal__model {

  width: 100%;

}



.js-image-modal-close,

.product-media-modal__toggle {

  background-color: rgb(var(--color-background));

  border: 0.1rem solid rgba(var(--color-foreground), 0.5);

  border-radius: 50%;

  color: rgba(var(--color-foreground), 0.9);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  right: 2rem;

  padding: 1.2rem;

  position: fixed;

  z-index: 2;

  top: 2rem;

  width: 4rem;

}



.product-media-modal__content .deferred-media {

  width: 100%;

}



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

  .product-media-modal__content {

    padding: 2rem 11rem;

  }



  .product-media-modal__content > * {

    width: 100%;

  }



  .product-media-modal__content > * + * {

    margin-top: 2rem;

  }



  .product-media-modal__toggle {

    right: 5rem;

    top: 2.2rem;

  }

}



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

  .product-media-modal__content {

    padding: 2rem 11rem;

  }



  .product-media-modal__content > * + * {

    margin-top: 1.5rem;

  }



  .product-media-modal__content {

    padding-bottom: 1.5rem;

  }



  .product-media-modal__toggle {

    right: 5rem;

  }

}



.product-media-modal__toggle:hover {

  color: rgba(var(--color-foreground), 0.75);

}



.product-media-modal__toggle .icon {

  height: auto;

  margin: 0;

  width: 2.2rem;

}



/* Product popup */



.product-popup-modal {

  box-sizing: border-box;

  opacity: 0;

  position: fixed;

  visibility: hidden;

  z-index: -1;

  margin: 0 auto;

  top: 0;

  left: 0;

  overflow: auto;

  width: 100%;

  background: rgba(var(--color-foreground), 0.2);

  height: 100%;

}



.product-popup-modal[open] {

  opacity: 1;

  visibility: visible;

  z-index: 101;

}



.product-popup-modal__content {

  background-color: rgb(var(--color-background));

  overflow: auto;

  height: 80%;

  margin: 0 auto;

  left: 50%;

  transform: translateX(-50%);

  margin-top: 5rem;

  width: 92%;

  position: absolute;

  top: 0;

  padding: 0 1.5rem 0 3rem;

}



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

  .product-popup-modal__content {

    padding-right: 1.5rem;

    margin-top: 10rem;

    width: 70%;

    padding: 0 3rem;

  }

}



.product-popup-modal__content img {

  max-width: 100%;

}



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

  .product-popup-modal__content table {

    display: block;

    max-width: fit-content;

    overflow-x: auto;

    white-space: nowrap;

    margin: 0;

  }

}



.product-popup-modal__opener {

  display: inline-block;

}



.product-popup-modal__button {

  font-size: 1.6rem;

  padding-right: 1.3rem;

  padding-left: 0;

  height: 4.4rem;

  text-underline-offset: 0.3rem;

  text-decoration-thickness: 0.1rem;

  transition: text-decoration-thickness var(--duration-short) ease;

}



.product-popup-modal__button:hover {

  text-decoration-thickness: 0.2rem;

}



.product-popup-modal__content-info {

  padding-right: 4.4rem;

}



.product-popup-modal__content-info > * {

  height: auto;

  margin: 0 auto;

  max-width: 100%;

  width: 100%;

}



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

  .product-popup-modal__content-info > * {

    max-height: 100%;

  }

}



.product-popup-modal__toggle {

  background-color: rgb(var(--color-background));

  border: 0.1rem solid rgba(var(--color-foreground), 0.1);

  border-radius: 50%;

  color: rgba(var(--color-foreground), 0.55);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  position: sticky;

  padding: 1.2rem;

  z-index: 2;

  top: 1.5rem;

  width: 4rem;

  margin: 0 0 0 auto;

}



.product-popup-modal__toggle:hover {

  color: rgba(var(--color-foreground), 0.75);

}



.product-popup-modal__toggle .icon {

  height: auto;

  margin: 0;

  width: 2.2rem;

}



.product-form__buttons{

  margin-top: 2.5rem;

}



.product-form__buttons .btn{

  display: flex;

  width: 100%;

}



.product__description.rte{

  margin-top: 3rem;

}



.float-bottom-modal{

  position: fixed;

  top: initial;

  bottom: 1px;

  left: 1px;

  right: 1px;

  width: auto;

  max-width: none;

  min-width: none;

  z-index: 100;

  padding: 20px 10px 30px;

}



.slider-component .icons-wrapper{

  position: absolute;

  top: 20px;

  right: 15px;

}



.button-circle{

  display: flex;

  line-height: 1;

  color: #fff;

  background: rgba(0,0,0,0.5);

  border-radius: 50%;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

}



.button-circle svg,

.button-circle svg.icon-share{

  margin: 0;

}



.float-bottom-modal-overlay{

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 5;

}



.float-bottom-modal-overlay::after{

  top: 0 !important;

}



.btn--radius{

  border-radius: 4rem;

}



.product_upsell-info{

  margin: 1.5rem 0;

}



.product_upsell-box{

  margin-bottom: 1.2rem;

}



.product_upsell-box,

.product_upsell-icon{

  display: flex;

  align-items: center;

}



.product_upsell-icon{

  width: 24px;

}



.product_upsell-icon + .product_upsell-text{

  margin-left: 1.5rem;

}



  /* The Modal (background) */

.modal {

  position: fixed; /* Stay in place */

  z-index: 11; /* Sit on top */

  padding-top: 70px; /* Location of the box */

  padding-bottom: 30px; 

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */

}



/* Modal Content (image) */

.modal-content {

  margin: auto;

  display: block;

  width: auto;

  height: auto;

  max-width: 100%;

  max-height: 1000px;

}



/* Caption of Modal Image */

#caption {

  margin: auto;

  display: block;

  width: 80%;

  max-width: 700px;

  text-align: center;

  color: #ccc;

  padding: 10px 0;

  height: 150px;

}



/* Add Animation */

.modal-content, #caption {  

  -webkit-animation-name: zoom;

  -webkit-animation-duration: 0.6s;

  animation-name: zoom;

  animation-duration: 0.6s;

}



@-webkit-keyframes zoom {

  from {-webkit-transform:scale(0)} 

  to {-webkit-transform:scale(1)}

}



@keyframes zoom {

  from {transform:scale(0)} 

  to {transform:scale(1)}

}



/* The Close Button */

.product-modal-close {

  position: absolute;

  top: 15px;

  right: 35px;

  color: #000;

  font-size: 40px;

  font-weight: bold;

  transition: 0.3s;

}



.product-modal-close:hover,

.product-modal-close:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

}



/* 100% Image Width on Smaller Screens */

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

  .modal-content {

    width: auto;

    height: auto;

    max-width: 90%;

    max-height: 700px;

  }



  .product-modal-close {

    right: 20px;

  }

}



.show{

display:block;

}



.hide{

  display:none; 

}