/* Section */
#page.site .c-single-product-order-list {
  position                  : fixed;
  top                       : 50%;
  left                      : 50%;
  transform                 : translate(-50%, -50%);
  width                     : 100%;
  height                    : 100vh;
  z-index                   : 1100;
  overflow-x                : auto;
  overscroll-behavior-block : contain;
  scrollbar-width           : thin ;
  scrollbar-color           : rgba(137, 133, 111, 0.4) rgba(137, 133, 111, 0.1);
  padding                   : 8px;
  background-color          : white;
  border                    : 1px solid var(--c-border);
  border-radius             : 0;
  box-shadow                : 2px 2px 5px 2px rgba(100, 100, 100, 0.2);
}
@media (min-width: 744px) {
  #page.site .c-single-product-order-list {
    padding                   : 24px 24px 0 24px;
    height : 457px;
    width  : 100%;
  }
}
@media (min-width: 1024px) {
  #page.site .c-single-product-order-list {
    width         : 811px;
    border-radius : var(--c-radius);
  }
}
/* no overflow if spinner overlay */
#page.site .c-single-product-order-list.c-overflow-hidden {
  overflow: hidden;
}

/* Header */
#page.site .c-single-product-order-list header {
  height                : 88px;
  display               : grid;
  grid-template-columns : 1fr auto;

}
#page.site .c-single-product-order-list header button {
  background-color  : white;
}
#page.site .c-single-product-order-list header button::before {
  background-image  : url(/wp-content/plugins/custom/assets/close-icon.svg);
}

#page.site .c-single-product-order-list header h2 {
  margin      : 0;
}

/* Items */
#page.site .c-single-product-order-list fieldset {
  margin                : 0 0 5px 0;
  padding               : 0 8px;
  display               : grid;
  grid-template-columns : 1fr auto;
  column-gap            : 24px;
  align-items           : center;
  border                : 1px solid var(--c-border);
  border-radius         : var(--c-radius);
  font-family           : var(--c-font-familiy-text);
  background-color      : white;
}
@media(min-width: 744px) {
  #page.site .c-single-product-order-list fieldset {
    padding               : 0 16px 0 0;
    grid-template-columns : 80px 1fr auto;
  }
}
#page.site .c-single-product-order-list fieldset::before {
  display: none;
}
@media(min-width: 744px) {
  #page.site .c-single-product-order-list fieldset::before {
    display       : block;
    content       : url(/wp-content/plugins/custom/assets/list-image.svg);
    border-radius : 5px 0 0 5px;
    height        : 80px;
  }
}

/* Text */
#page.site .c-single-product-order-list fieldset > div {
  padding: 12px 0;
}

/* Input */
#page.site .c-single-product-order-list fieldset:first-child input {
  border : none;
  padding-left: 0;
}
@media(min-width: 744px) {
  #page.site .c-single-product-order-list fieldset:first-child input {
    border : 1px solid var(--c-border);
    padding-left: 12px;
  }
}
#page.site .c-single-product-order-list fieldset:first-child input:focus {
  outline: none;
}
@media(min-width: 744px) {
  #page.site .c-single-product-order-list fieldset:first-child input:focus {
    outline : 1px solid var(--c-outline);
  }
}
#page.site .c-single-product-order-list fieldset:first-child input.c--error-marker {
  outline: none;
}
@media(min-width: 744px) {
  #page.site .c-single-product-order-list fieldset:first-child input.c--error-marker {
    outline : 2px solid var(--c-error);
  }
}
#page.site .c-single-product-order-list fieldset:first-child div {
  grid-column   : 1 / 2;
  margin        : 0;
  color         : var(--c-error);
  padding       : 0;
}
@media(min-width: 744px) {
  #page.site .c-single-product-order-list fieldset:first-child div {
    margin-top    : -18px;
    grid-column  : 2 / 3;
  }
}

/* item/input buttons */
#page.site .c-single-product-order-list fieldset .c-button {
  display : none ;
}
@media(min-width: 744px) {
  #page.site .c-single-product-order-list fieldset .c-button {
    display : grid;
  }
}
#page.site .c-single-product-order-list fieldset .c-button-icon {
  background-color : white;
}
@media(min-width: 744px) {
  #page.site .c-single-product-order-list fieldset .c-button-icon {
    display          : none;
  }
}
#page.site .c-single-product-order-list fieldset > .c-button::before {
  background-image : url(/wp-content/plugins/custom/assets/plus-icon.svg);
}
#page.site .c-single-product-order-list fieldset > .c-button-icon::before {
  background-image : url(/wp-content/plugins/custom/assets/plus-icon-dark.svg);
}


/* Footer */
#page.site .c-single-product-order-list footer {
  height                : 96px;
  display               : grid;
  grid-template-columns : 1fr;
  align-items           : center;
  justify-items         : center;
  border-top            : 1px solid var(--c-border);
  margin-top            : 20px;
}

/* spinner */
#page.site .c-single-product-order-list > div:first-of-type {
  position: absolute;
  top                  : 0;
  bottom               : 0;
  left                 : 0;
  right                : 0;
  display              : grid;
  grid-template-columns: 1fr;
  grid-template-rows   : 1fr;
  align-items          : center;
  justify-items        : center;
  backdrop-filter      : blur(3px);
}
#page.site .c-single-product-order-list > div:first-of-type span {
  font-size     : 10px;
  width         : 1em;
  height        : 1em;
  border-radius : 50%;
  position      : relative;
  text-indent   : -9999em;
  animation     : mulShdSpin 1.1s infinite ease;
  transform     : translateZ(0);
}
@keyframes mulShdSpin {
  0%,
  100%  {box-shadow: 0em -2.6em 0em 0em rgba(137, 133, 111, 1.0), 1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2), 2.5em 0em 0 0em rgba(137, 133, 111, 0.2), 1.75em 1.75em 0 0em rgba(137, 133, 111, 0.2), 0em 2.5em 0 0em rgba(137, 133, 111, 0.2), -1.8em 1.8em 0 0em rgba(137, 133, 111, 0.2), -2.6em 0em 0 0em rgba(137, 133, 111, 0.5), -1.8em -1.8em 0 0em rgba(137, 133, 111, 0.7);}
  12.5% {box-shadow: 0em -2.6em 0em 0em rgba(137, 133, 111, 0.7), 1.8em -1.8em 0 0em rgba(137, 133, 111, 1.0), 2.5em 0em 0 0em rgba(137, 133, 111, 0.2), 1.75em 1.75em 0 0em rgba(137, 133, 111, 0.2), 0em 2.5em 0 0em rgba(137, 133, 111, 0.2), -1.8em 1.8em 0 0em rgba(137, 133, 111, 0.2), -2.6em 0em 0 0em rgba(137, 133, 111, 0.2), -1.8em -1.8em 0 0em rgba(137, 133, 111, 0.5);}
  25%   {box-shadow: 0em -2.6em 0em 0em rgba(137, 133, 111, 0.5), 1.8em -1.8em 0 0em rgba(137, 133, 111, 0.7), 2.5em 0em 0 0em rgba(137, 133, 111, 1.0), 1.75em 1.75em 0 0em rgba(137, 133, 111, 0.2), 0em 2.5em 0 0em rgba(137, 133, 111, 0.2), -1.8em 1.8em 0 0em rgba(137, 133, 111, 0.2), -2.6em 0em 0 0em rgba(137, 133, 111, 0.2), -1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2);}
  37.5% {box-shadow: 0em -2.6em 0em 0em rgba(137, 133, 111, 0.2), 1.8em -1.8em 0 0em rgba(137, 133, 111, 0.5), 2.5em 0em 0 0em rgba(137, 133, 111, 0.7), 1.75em 1.75em 0 0em rgba(137, 133, 111, 1.0), 0em 2.5em 0 0em rgba(137, 133, 111, 0.2), -1.8em 1.8em 0 0em rgba(137, 133, 111, 0.2), -2.6em 0em 0 0em rgba(137, 133, 111, 0.2), -1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2);}
  50%   {box-shadow: 0em -2.6em 0em 0em rgba(137, 133, 111, 0.2), 1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2), 2.5em 0em 0 0em rgba(137, 133, 111, 0.5), 1.75em 1.75em 0 0em rgba(137, 133, 111, 0.7), 0em 2.5em 0 0em rgba(137, 133, 111, 1.0), -1.8em 1.8em 0 0em rgba(137, 133, 111, 0.2), -2.6em 0em 0 0em rgba(137, 133, 111, 0.2), -1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2);}
  62.5% {box-shadow: 0em -2.6em 0em 0em rgba(137, 133, 111, 0.2), 1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2), 2.5em 0em 0 0em rgba(137, 133, 111, 0.2), 1.75em 1.75em 0 0em rgba(137, 133, 111, 0.5), 0em 2.5em 0 0em rgba(137, 133, 111, 0.7), -1.8em 1.8em 0 0em rgba(137, 133, 111, 1.0), -2.6em 0em 0 0em rgba(137, 133, 111, 0.2), -1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2);}
  75%   {box-shadow: 0em -2.6em 0em 0em rgba(137, 133, 111, 0.2), 1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2), 2.5em 0em 0 0em rgba(137, 133, 111, 0.2), 1.75em 1.75em 0 0em rgba(137, 133, 111, 0.2), 0em 2.5em 0 0em rgba(137, 133, 111, 0.5), -1.8em 1.8em 0 0em rgba(137, 133, 111, 0.7), -2.6em 0em 0 0em rgba(137, 133, 111, 1.0), -1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2);}
  87.5% {box-shadow: 0em -2.6em 0em 0em rgba(137, 133, 111, 0.2), 1.8em -1.8em 0 0em rgba(137, 133, 111, 0.2), 2.5em 0em 0 0em rgba(137, 133, 111, 0.2), 1.75em 1.75em 0 0em rgba(137, 133, 111, 0.2), 0em 2.5em 0 0em rgba(137, 133, 111, 0.2), -1.8em 1.8em 0 0em rgba(137, 133, 111, 0.5), -2.6em 0em 0 0em rgba(137, 133, 111, 0.7), -1.8em -1.8em 0 0em rgba(137, 133, 111, 1.0);}
}