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

/* The value's text beside its picture: hidden from the eye only, the way
   .visually-hidden hides. It is the radio's name — display: none took it out of the
   accessibility tree, and a screen reader announced a radio button and nothing more. */
.variant-img-label-wrapper .variant-img-label + .label__text{
  color: transparent;
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

/* ---------------------------------------------------------------------------
   Theme addition: picture chips — a variant option shown as images.
   init.js §4 moves each radio INSIDE its label and tags the label
   .variant-option__button-label, so the base rules above that hang a state on
   `input:checked + label` / `input.disabled + label` match nothing, and the
   reference marks the chosen chip by FILLING the label — which the picture
   (.variant-img-label, absolutely positioned over the whole label) hides. Every
   picture looked the same whichever was chosen; only "Color: Blue" told.
   So a picture chip shows its states around and over the picture instead. Shared
   by the product page and the quick view (the modal snippet loads this sheet on
   every page); text chips keep the reference's fill. Keyboard focus is the
   reference's own ring on the label's ::after, which already sits above the
   picture — leave ::after to it.
   --------------------------------------------------------------------------- */
.product-form__input .variant-option__button-label:has(> .variant-img-label) {
  /* the fill shows only through a cut-out PNG, as a black backdrop */
  background-color: transparent;
}

/* chosen: a ring in the foreground colour, a small gap outside the picture */
.product-form__input .variant-option__button-label:has(> .variant-img-label):has(:checked) {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.2rem;
}

/* hover: the same ring, lighter, so it never reads as the chosen one */
@media (hover: hover) {
  .product-form__input .variant-option__button-label:has(> .variant-img-label):not(:has(:checked)):hover {
    outline: 0.2rem solid rgb(var(--color-foreground) / 40%);
    outline-offset: 0.2rem;
  }
}

/* sold out: global.js updateVariantsUnavailable flags the value's radio with
   .disabled, on the product page and in the quick view, from the moment the picker
   is built. The value can still be chosen, to look at it: dim the picture, strike the chip. */
.product-form__input .variant-option__button-label:has(> input:is(.disabled, :disabled)) > .variant-img-label {
  opacity: 0.45;
}

.product-form__input .variant-option__button-label:has(> .variant-img-label):has(> input:is(.disabled, :disabled))::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right bottom, transparent calc(50% - 1px), rgb(var(--color-foreground)), transparent calc(50% + 1px));
}

/* A sold-out value shown as text: the base rule for it hangs on
   `input.disabled + label` as well, so nothing told it from one in stock. */
.product-form__input .variant-option__button-label:not(:has(> .variant-img-label)):has(> input:is(.disabled, :disabled)) {
  opacity: 0.45;
  text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Theme addition: the Product Property app's fields.
   The app prints <div class="product-properties-wrapper"> between the option
   groups and the quantity row (app snippet product/field_middle; the quick view
   carries the same div) and its script fills it with one .selector-wrapper per
   property: text, dropdown, radio, checkbox, file upload, date + timeslot. The
   classes it writes (form__label, field__input, select__select, button) are the
   base theme's, whose form CSS this theme does not ship, so every field fell
   back to a near browser default.
   They wear the reference's own input recipe here (.form-control: the input
   tokens, the pill radius, 5rem tall like the stepper and the buttons, the
   foreground ring on focus), its select arrow and its checkbox / radio, in the
   form's rhythm: a label like the option labels, 2.4rem between fields. Styled
   as the app writes it; nothing here needs its markup changed.
   !important appears only where the app pins a value inline (the date box and
   its input, the timeslot select, the upload button's 5rem max-width, the red
   of the required mark); each is marked.
   Missing required field: the app relies on the browser (required attributes,
   and for checkboxes / files / the date a hidden text input that carries the
   value), so the message is the browser's own bubble; :user-invalid marks the
   field after that first try and until it is filled.
   The date opens flatpickr's calendar, which the app loads itself and which is
   appended to <body>: the last part re-skins it, only while one of the app's
   date fields is on the page (the account pages use flatpickr too, untouched).
   --------------------------------------------------------------------------- */
.product-properties-wrapper {
  /* the reference's own knob: its .select arrow sits this far from the edge too.
     2rem is where a chip's label starts */
  --input-padding-inline: 2rem;
  /* the upload button's arrow, in the reference icons' 2px round stroke */
  --property-upload-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E");
}

/* one field. The app's own sheet says 20px at the same weight, hence the div. */
.product-properties-wrapper > div.selector-wrapper {
  margin: 0 0 2.4rem;
}

/* the browser scrolls to the first required field left empty and focuses it: keep
   it clear of the sticky header, and of the quick view's sticky Add to cart bar
   (the field was parked underneath it, the browser's message pointing at the bar) */
.product-properties-wrapper :is(input, select, textarea) {
  scroll-margin-top: 10rem;
}

.product-quickview .product-properties-wrapper :is(input, select, textarea) {
  scroll-margin-bottom: 12rem;
}

/* the quick view has no wrapper around its option groups, so the first field
   started 1.2rem closer to the chips than on the product page */
.product-quickview .product-properties-wrapper:has(> .selector-wrapper) {
  padding-top: 1.2rem;
}

/* ---- label: the option labels' type. The gap under it is padding, because the
   app pins `margin: 0` inline on the date field's label. ---- */
.product-properties-wrapper .form__label {
  display: block;
  padding: 0 0 1.2rem;
  color: rgb(var(--color-foreground));
  line-height: var(--font-paragraph--line-height, 1.6);
}

/* the required mark */
.product-properties-wrapper .form__label > span {
  color: rgb(var(--color-notification-error)) !important; /* inline: color: red */
}

/* ---- text, dropdown, the date and its timeslot: one field. :where() keeps the
   shared recipe at (0,2,0), under the per-control rules that follow. ---- */
.product-properties-wrapper .selector-wrapper :where(.field__input, textarea, select, .input-control > input) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--input-height, 5rem);
  margin: 0;
  padding: var(--input-padding-block, 0.8rem) var(--input-padding-inline, 2rem);
  border: 0;
  border-radius: var(--input-border-radius, 6rem);
  outline: 0;
  background-color: rgb(var(--color-input-background));
  /* the edge is a variable so that hover, focus and the invalid state recolour it
     without out-shouting the inline styles this has to beat on the date input */
  box-shadow: inset 0 0 0 var(--input-border-width, 0.1rem) var(--property-edge, var(--input-border-color, transparent));
  color: rgb(var(--color-input-text));
  line-height: var(--font-paragraph--line-height, 1.6);
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--animation-duration--fast, 0.25s) ease, background-color var(--animation-duration--fast, 0.25s) ease, box-shadow var(--animation-duration--fast, 0.25s) ease;
}

/* a multi-line field, should the app grow one */
.product-properties-wrapper .selector-wrapper textarea {
  height: auto;
  min-height: 10rem;
  padding-block: 1.2rem;
  border-radius: var(--textareas-radius, 1rem);
  resize: vertical;
}

/* the app's own <style> dims this placeholder to 0.7 at (0,3,1) */
.product-properties-wrapper .selector-wrapper :is(input, textarea)::placeholder,
.product-properties-wrapper div.selector-wrapper input.field__input::placeholder {
  color: rgb(var(--color-input-text) / 55%);
  opacity: 1;
}

/* ---- dropdown. The reference's .select wrapper already draws the arrow. ---- */
.product-properties-wrapper .selector-wrapper select {
  padding-inline-end: 4.8rem;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* nothing chosen yet: the prompt reads as a placeholder */
.product-properties-wrapper .selector-wrapper select:has(> option[value=""]:checked) {
  color: rgb(var(--color-input-text) / 55%);
}

.product-properties-wrapper .selector-wrapper select > option {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
}

.product-properties-wrapper .selector-wrapper select > option:disabled {
  color: rgb(var(--color-foreground) / 40%);
}

/* ---- radio and checkbox groups. The boxes are the reference's; this is the row:
   a 4.4rem tap line each, the box level with the first line of a long label. ---- */
.product-properties-wrapper label.product-properties_option {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.8rem;
  max-width: 100%;
  min-height: 4.4rem;
  margin: 0;
  margin-inline-end: 2.4rem;
  padding-block: 1rem;
  vertical-align: top;
  cursor: pointer;
}

.product-properties-wrapper .product-properties_option > input:is([type="checkbox"], [type="radio"]) {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
}

/* the rows carry their own 1rem above and below */
.product-properties-wrapper .form__label:has(+ div > .product-properties_option) {
  padding-bottom: 0.2rem;
}

.product-properties-wrapper > div.selector-wrapper:has(.product-properties_option) {
  margin-bottom: 1.4rem;
}

@media (hover: hover) {
  .product-properties-wrapper .product-properties_option:hover > input:not(:disabled, :focus-visible) {
    box-shadow: 0 0 0 3px rgb(var(--color-foreground) / 10%);
  }
}

/* ---- file upload: the theme's outline pill, with the arrow that says what it does ---- */
.product-properties-wrapper .selector-wrapper a.btn {
  max-width: none !important; /* inline: max-width: 5rem, which clipped the label */
  min-height: 4.4rem;
  padding: 0.8rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* uploading: the theme's in-flight ring takes the arrow's place; the button keeps its width */
.product-properties-wrapper .selector-wrapper a.btn.btn--loading {
  padding-inline: 3.2rem;
}

/* ::before is the reference's hover fill and ::after its in-flight ring */
.product-properties-wrapper .selector-wrapper a.btn:not(.btn--loading)::after {
  content: "";
  order: -1;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: var(--property-upload-icon) center / contain no-repeat;
  mask: var(--property-upload-icon) center / contain no-repeat;
}

.product-properties-wrapper .selector-wrapper a.btn:focus-visible {
  outline: 0.2rem solid rgb(var(--color-focus-ring));
  outline-offset: 0.2rem;
}

/* the uploaded files: one pill each, the name (a link to the file) and its remove
   cross. The app spaces them with an inline margin-right of 1rem. */
.product-properties-wrapper [id^="uploaded-files-div"] {
  row-gap: 0.8rem;
}

.product-properties-wrapper [id^="uploaded-files-div"]:not(:empty) {
  padding-top: 1rem;
}

.product-properties-wrapper [id^="uploaded-files-div"] > div {
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 1rem);
  min-height: 4.4rem;
  padding-inline: 1.6rem 0.4rem;
  border: 0.1rem solid rgb(var(--color-foreground) / 20%);
  border-radius: var(--button-corner-radius, 6rem);
  font-size: var(--font-size--paragraph-small, 1.35rem);
}

.product-properties-wrapper [id^="uploaded-files-div"] > div > a {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(var(--color-foreground) / 30%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-properties-wrapper [id^="uploaded-files-div"] > div > span {
  flex: 0 0 auto;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  color: rgb(var(--color-foreground) / 60%);
  transition: background-color var(--animation-duration--fast, 0.25s) ease, color var(--animation-duration--fast, 0.25s) ease;
}

.product-properties-wrapper [id^="uploaded-files-div"] > div > span > svg {
  width: 1.8rem;
  height: 1.8rem;
  stroke: currentColor;
}

@media (hover: hover) {
  .product-properties-wrapper [id^="uploaded-files-div"] > div > a:hover {
    text-decoration-color: currentColor;
  }

  .product-properties-wrapper [id^="uploaded-files-div"] > div > span:hover {
    background-color: rgb(var(--color-foreground) / 8%);
    color: rgb(var(--color-foreground));
  }
}

/* ---- date + timeslot. The app draws a small bordered box around a bare input
   and its calendar icon, all inline; the box steps aside and the input itself
   is the field, so the focus ring and the calendar line up with its edge. ---- */
.product-properties-wrapper div.input-control {
  position: relative;
  /* inline: height: 40px; max-width: 146.5px; padding: 0 10px; border: 1px solid #b1b1b1; background-color: white */
  height: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}

.product-properties-wrapper div.input-control > input {
  flex: 1 1 auto;
  /* inline: width: 80%; padding: 0; box-shadow: none */
  width: 100% !important;
  padding-block: 0 !important;
  padding-inline: var(--input-padding-inline, 2rem) 5.6rem !important;
  box-shadow: inset 0 0 0 var(--input-border-width, 0.1rem) var(--property-edge, var(--input-border-color, transparent)) !important;
  cursor: pointer;
}

/* the calendar icon, inside the field's right end; a click on it lands on the input */
.product-properties-wrapper div.input-control > label {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--input-padding-inline, 2rem);
  color: rgb(var(--color-input-text) / 60%);
  pointer-events: none;
}

.product-properties-wrapper div.input-control > label > svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

/* "Timeslot": a second label inside the same property (inline: margin-top: 0.8rem) */
.product-properties-wrapper div.input-control + div {
  padding-top: 0.8rem;
}

.product-properties-wrapper .selector-wrapper select.input-control {
  /* inline: width: auto; height: 40px; padding: 10px 40px 10px 10px; border-radius: 5px; text-align: center */
  width: 100% !important;
  height: var(--input-height, 5rem) !important;
  padding-block: var(--input-padding-block, 0.8rem) !important;
  padding-inline: var(--input-padding-inline, 2rem) 4.8rem !important;
  border-radius: var(--input-border-radius, 6rem) !important;
  text-align: start !important;
}

/* the timeslot select has no .select wrapper, so no arrow: the reference's, on
   the block that holds it (the select is its last line) */
.product-properties-wrapper .selector-wrapper > div:not(.select):has(> select) {
  position: relative;
}

.product-properties-wrapper .selector-wrapper > div:not(.select):has(> select)::after {
  content: "";
  position: absolute;
  bottom: calc((var(--input-height, 5rem) - var(--select-arrow-size, 1.2rem)) / 2);
  inset-inline-end: var(--input-padding-inline, 2rem);
  width: var(--select-arrow-size, 1.2rem);
  aspect-ratio: 1;
  background-color: rgb(var(--color-input-text));
  -webkit-mask-image: var(--select-arrow-icon);
  mask-image: var(--select-arrow-icon);
  pointer-events: none;
}

/* ---- states ---- */
@media (hover: hover) {
  .product-properties-wrapper .selector-wrapper :where(.field__input, textarea, select, .input-control > input):hover {
    --property-edge: rgb(var(--color-foreground) / 20%);
  }
}

/* focus, by pointer or keyboard: the reference's .form-control:focus. flatpickr
   flags the date input .active while its calendar is open. */
.product-properties-wrapper .selector-wrapper :where(.field__input, textarea, select, .input-control > input):is(:focus, :focus-visible, .active) {
  --property-edge: rgb(var(--color-foreground));
  background-color: rgb(var(--color-input-focus-background, var(--color-background)));
  color: rgb(var(--color-input-focus-text, var(--color-input-text)));
}

.product-properties-wrapper .selector-wrapper :where(.field__input, textarea, select, .input-control > input):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.product-properties-wrapper .product-properties_option:has(> input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* a required field left empty, once Add to cart has been tried: the label and
   the control's edge take the theme's error colour. Kept in rules of their own —
   a browser that does not know :user-invalid drops only these. */
.product-properties-wrapper .selector-wrapper:has(:user-invalid) > .form__label {
  color: rgb(var(--color-notification-error));
}

.product-properties-wrapper .selector-wrapper:has(:user-invalid) :is(.field__input, textarea, .select > select, .input-control > input) {
  --property-edge: rgb(var(--color-notification-error));
}

.product-properties-wrapper .selector-wrapper:has(:user-invalid) :is(input[type="checkbox"], input[type="radio"], a.btn) {
  border-color: rgb(var(--color-notification-error));
}

/* ---- the date's calendar (flatpickr, appended to <body>) ---- */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar {
  /* a day: 4rem, less on a phone too narrow for seven of them */
  --property-day: min(4rem, calc((100vw - 5.8rem) / 7));
  width: auto;
  margin-top: 0.6rem;
  border: 0.1rem solid rgb(var(--color-foreground) / 10%);
  border-radius: 1.6rem;
  background: rgb(var(--color-background));
  box-shadow: 0 1.6rem 4rem rgb(0 0 0 / 10%);
  color: rgb(var(--color-foreground));
  font-family: var(--font-body--family);
  font-size: 1.4rem;
  line-height: 1.4;
}

/* opened above the field instead */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar.arrowBottom {
  margin-top: -0.8rem;
}

/* its pointer triangle */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar::before,
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar::after {
  display: none;
}

/* month row: previous / "October 2026" / next */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-months {
  position: relative;
  padding: 1.2rem 1.2rem 0.4rem;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-months .flatpickr-month {
  height: 3.6rem;
  color: inherit;
  fill: currentColor;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.6rem;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-current-month :is(.flatpickr-monthDropdown-months, input.cur-year) {
  font-weight: inherit;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  margin: 0;
  border-radius: 0.6rem;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months > option {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-weight: 400;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .numInputWrapper {
  border-radius: 0.6rem;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar :is(.flatpickr-monthDropdown-months, .numInputWrapper):hover {
  background: rgb(var(--color-foreground) / 6%);
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .numInputWrapper span {
  border-color: rgb(var(--color-foreground) / 15%);
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .numInputWrapper span.arrowUp::after {
  border-bottom-color: rgb(var(--color-foreground) / 60%);
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .numInputWrapper span.arrowDown::after {
  border-top-color: rgb(var(--color-foreground) / 60%);
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month) {
  top: 1.2rem;
  width: 3.6rem;
  height: 3.6rem;
  padding: 1.1rem;
  border-radius: 50%;
  color: inherit;
  fill: currentColor;
  transition: background-color var(--animation-duration--fast, 0.25s) ease;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
  left: 1.2rem;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  right: 1.2rem;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month):hover {
  background-color: rgb(var(--color-foreground) / 8%);
  color: inherit;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month) svg {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

/* weekday row + the day grid */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-innerContainer {
  padding: 0 1.2rem 1.2rem;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-weekdays {
  height: 3.2rem;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar span.flatpickr-weekday {
  color: rgb(var(--color-foreground) / 55%);
  font-size: 1.2rem;
  font-weight: 600;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar :is(.flatpickr-days, .dayContainer) {
  width: calc(var(--property-day) * 7);
  min-width: 0;
  max-width: none;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day {
  flex-basis: var(--property-day);
  width: var(--property-day);
  max-width: var(--property-day);
  height: var(--property-day);
  border-radius: 50%;
  color: rgb(var(--color-foreground));
  /* said here: the platform's promotion.css has a bare `span.selected` (30px,
     bolder, gold) that lands on the chosen day */
  font-size: 1.4rem;
  font-weight: 400;
  line-height: calc(var(--property-day) - 0.2rem);
  transition: background-color var(--animation-duration--fast, 0.25s) ease;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day:is(:hover, :focus) {
  border-color: transparent;
  background: rgb(var(--color-foreground) / 8%);
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day:focus-visible {
  box-shadow: inset 0 0 0 0.2rem rgb(var(--color-focus-ring));
}

/* today: a ring */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day.today,
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day.today:is(:hover, :focus) {
  border-color: rgb(var(--color-foreground) / 40%);
  color: rgb(var(--color-foreground));
}

/* the neighbouring months' days */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day:is(.prevMonthDay, .nextMonthDay) {
  color: rgb(var(--color-foreground) / 45%);
}

/* a day the shop does not deliver on */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day:is(.flatpickr-disabled, .notAllowed),
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day:is(.flatpickr-disabled, .notAllowed):is(:hover, :focus) {
  border-color: transparent;
  background: transparent;
  color: rgb(var(--color-foreground) / 22%);
  cursor: not-allowed;
}

body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day.today:is(.flatpickr-disabled, .notAllowed) {
  border-color: rgb(var(--color-foreground) / 15%);
}

/* the chosen day: filled, like a chosen option chip */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day.selected,
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .flatpickr-day.selected:is(:hover, :focus) {
  border-color: rgb(var(--color-foreground));
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .product-properties-wrapper .selector-wrapper :where(.field__input, textarea, select, .input-control > input),
  .product-properties-wrapper [id^="uploaded-files-div"] > div > span {
    transition: none;
  }

  body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar.animate.open {
    animation: none;
  }

  body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar :is(.flatpickr-day, .flatpickr-prev-month, .flatpickr-next-month) {
    transition: none;
  }
}