@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap&text=0123456789);

:root {
  --cart-badge-right: 0;
  --cart-badge-bottom: 20px;
  --cart-badge-background-hsl: var(--button-color-h), calc(var(--button-color-s)*1%), calc(var(--button-color-l)*1%);
  --cart-badge-background: hsla(var(--cart-badge-background-hsl), 1);
  --cart-badge-foreground-hsl: var(--button-color-h), calc(var(--button-color-s)*1%), calc((var(--button-color-l) - 75)*-100%);
  --cart-badge-foreground: hsla(var(--cart-badge-foreground-hsl), var(--button-color-a))
}

.has-swmp {
  --cart-badge-bottom: calc(var(--swmp-height, 0px) + 20px)
}

@-webkit-keyframes showCartBadge {
  0% {
    opacity: 0;
    pointer-events: none
  }

  to {
    opacity: 1
  }
}

@keyframes showCartBadge {
  0% {
    opacity: 0;
    pointer-events: none
  }

  to {
    opacity: 1
  }
}

.cart-badge {
  display: block;
  position: fixed;
  bottom: 20px;
  bottom: var(--cart-badge-bottom);
  right: 0;
  background: transparent !important;
  z-index: 9900;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: showCartBadge;
  animation-name: showCartBadge;
  -webkit-animation-duration: .25s;
  animation-duration: .25s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

.cart-badge[data-cart--badge-tally="0"] {
  animation-direction: reverse
}

.cart-badge.-empty-on-load {
  display: none
}

.cart-badge__button {
  display: flex;
  background-color: hsla(var(--button-color-h), calc(var(--button-color-s)*1%), calc(var(--button-color-l)*1%), .5);
  background-color: hsla(var(--cart-badge-background-hsl), .5);
  color: hsla(var(--button-color-h), calc(var(--button-color-s)*1%), calc((var(--button-color-l) - 75)*-100%), var(--button-color-a));
  color: var(--cart-badge-foreground);
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
  border: none !important;
  transition: background-color .25s ease-in-out
}

.cart-badge__button:hover {
  background-color: hsla(var(--button-color-h), calc(var(--button-color-s)*1%), calc(var(--button-color-l)*1%), 1);
  background-color: var(--cart-badge-background)
}

.cart-badge__button svg {
  fill: hsla(var(--button-color-h), calc(var(--button-color-s)*1%), calc((var(--button-color-l) - 75)*-100%), var(--button-color-a));
  fill: var(--cart-badge-foreground)
}

.cart-badge__icon {
  width: 38px;
  height: 38px;
  position: relative;
  margin-top: .5ch;
  font-weight: 600;
  font-size: 14px;
  font-family: Source Sans Pro
}

.cart-badge__bubble,
.cart-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center
}

.cart-badge__bubble {
  position: absolute;
  top: -1ch;
  left: 10px;
  background-color: hsla(var(--button-color-h), calc(var(--button-color-s)*1%), calc((var(--button-color-l) - 75)*-100%), var(--button-color-a));
  background-color: var(--cart-badge-foreground);
  color: hsla(var(--button-color-h), calc(var(--button-color-s)*1%), calc(var(--button-color-l)*1%), 1);
  color: var(--cart-badge-background);
  min-height: 24px;
  min-width: 24px;
  text-align: center;
  border-radius: 999em;
  border: 2px solid var(--cart-badge-background);
  letter-spacing: 0;
  padding: 0 .25em;
  box-sizing: border-box !important
}

:root {
  --cart-summary-width: 100vw;
  --cart-summary-bottom: 0
}

@media(min-width:760px) {
  :root {
    --cart-summary-width: 375px
  }
}

@-webkit-keyframes hideCartContent {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes hideCartContent {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@-webkit-keyframes showCartContent {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes showCartContent {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes openNewCart {
  0% {
    transform: translateX(100%);
    opacity: 1
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes openNewCart {
  0% {
    transform: translateX(100%);
    opacity: 1
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

@-webkit-keyframes openExistingCart {
  0% {
    overflow: hidden;
    pointer-events: none;
    top: 100%;
    bottom: 20px;
    bottom: var(--cart-badge-bottom);
    width: 0
  }

  to {
    overflow: hidden;
    pointer-events: all;
    top: 0;
    bottom: 0;
    bottom: var(--cart-summary-bottom);
    width: 100vw;
    width: var(--cart-summary-width)
  }
}

@keyframes openExistingCart {
  0% {
    overflow: hidden;
    pointer-events: none;
    top: 100%;
    bottom: 20px;
    bottom: var(--cart-badge-bottom);
    width: 0
  }

  to {
    overflow: hidden;
    pointer-events: all;
    top: 0;
    bottom: 0;
    bottom: var(--cart-summary-bottom);
    width: 100vw;
    width: var(--cart-summary-width)
  }
}

@-webkit-keyframes closeCart {
  0% {
    overflow: hidden;
    pointer-events: none;
    top: 0;
    bottom: 0;
    bottom: var(--cart-summary-bottom);
    width: 100vw;
    width: var(--cart-summary-width)
  }

  to {
    overflow: hidden;
    pointer-events: none;
    top: 100%;
    bottom: 20px;
    bottom: var(--cart-badge-bottom);
    width: 0
  }
}

@keyframes closeCart {
  0% {
    overflow: hidden;
    pointer-events: none;
    top: 0;
    bottom: 0;
    bottom: var(--cart-summary-bottom);
    width: 100vw;
    width: var(--cart-summary-width)
  }

  to {
    overflow: hidden;
    pointer-events: none;
    top: 100%;
    bottom: 20px;
    bottom: var(--cart-badge-bottom);
    width: 0
  }
}

#usersite-container .cart-summary {
  font-size: clamp(12px, var(--content-typeface-size-number), 16px);
  position: fixed;
  top: 0;
  right: 0;
  right: var(--cart-badge-right);
  bottom: 0;
  bottom: var(--cart-summary-bottom);
  width: 100vw;
  width: var(--cart-summary-width);
  z-index: 9901;
  -webkit-animation-name: openNewCart;
  animation-name: openNewCart;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  display: flex;
  flex-direction: column;
  padding: var(--section-padding-x-small) 0
}

#usersite-container .cart-summary__body,
#usersite-container .cart-summary__footer,
#usersite-container .cart-summary__heading {
  padding: 0 var(--section-padding-x-small)
}

#usersite-container .cart-summary#cart-summary {
  background-color: var(--section-background-color) !important
}

#usersite-container .cart-summary__heading {
  display: flex;
  align-items: center
}

#usersite-container .cart-summary__heading h2 {
  flex: 1 1;
  margin: 0
}

#usersite-container .cart-summary__close,
#usersite-container .cart-summary__close:hover {
  text-decoration: none !important
}

#usersite-container .cart-summary__close:hover {
  text-decoration: none;
  transform: rotate(1turn)
}

#usersite-container .cart-summary__body {
  flex: 1 1;
  overflow: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: none
}

#usersite-container .cart-summary__body table {
  margin: 0
}

#usersite-container .cart-summary input[name=quantity][type=tel] {
  width: 5.5ch
}

#usersite-container .cart-summary__content {
  -webkit-animation-duration: .15s;
  animation-duration: .15s
}

#usersite-container .cart-summary__footer {
  text-align: center
}

#usersite-container .cart-summary__subtotal {
  text-align: right
}

#usersite-container .cart-summary,
#usersite-container .cart-summary__content {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

#usersite-container .cart-summary[data-cart--cart-open=false] {
  -webkit-animation-name: closeCart;
  animation-name: closeCart;
  -webkit-animation-delay: .05s;
  animation-delay: .05s
}

#usersite-container .cart-summary[data-cart--cart-open=false] .cart-summary__content {
  -webkit-animation-name: hideCartContent;
  animation-name: hideCartContent
}

#usersite-container .cart-summary.-existing[data-cart--cart-open=true] {
  -webkit-animation-name: openExistingCart;
  animation-name: openExistingCart
}

#usersite-container .cart-summary.-existing[data-cart--cart-open=true] .cart-summary__content {
  -webkit-animation-name: showCartContent;
  animation-name: showCartContent;
  -webkit-animation-delay: .3s;
  animation-delay: .3s
}

#usersite-container .cart-items {
  border-collapse: collapse
}

#usersite-container .cart-item>td {
  padding-top: 1.5em;
  padding-bottom: 1.5em
}

#usersite-container .cart-item>td,
#usersite-container .cart-item__bundle-item>td {
  border-width: 0 0 1px;
  border-style: solid
}

#usersite-container .cart-item.-borderless>td,
#usersite-container .cart-item__bundle-item.-borderless>td {
  border-width: 0
}

#usersite-container .cart-item .cart-image,
#usersite-container .cart-item__details {
  padding: 1em 0 1em 1em !important
}

#usersite-container .cart-item__product-options {
  display: flex;
  flex-wrap: wrap
}

#usersite-container .cart-item__product-option {
  font-weight: 700 !important
}

#usersite-container .cart-item__product-option:last-child .delimiter {
  display: none
}

#usersite-container .cart-item__product-option+.cart-item__product-option {
  margin-left: 1em
}

#usersite-container .cart-item__actions {
  margin-top: .25em;
  display: flex;
  align-items: center;
  justify-content: flex-start
}

#usersite-container .cart-item__action {
  margin-right: .5em
}

#usersite-container .cart-item__price {
  margin-left: auto;
  text-align: right
}

#usersite-container .cart-item__price [class*=-price] {
  display: block
}

#usersite-container .cart-item__price .old-price {
  padding-right: 0
}

#usersite-container .cart-item__bundle-item>td {
  padding-top: 1em;
  padding-bottom: 1em
}

#usersite-container .cart-item__bundle-item .cart-item__product-options {
  flex-direction: column
}

#usersite-container .cart-item__bundle-item .cart-item__product-options .delimiter {
  display: none
}

media-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden
}

media-background img {
  vertical-align: bottom
}

media-background[mode=cropped]:not(:defined) img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
  width: 100%;
  height: 100%
}

media-background[mode=cropped]:defined img {
  position: absolute;
  top: 0;
  top: calc(var(--y, 0)*-1px);
  left: 0;
  left: calc(var(--x, 0)*-1px);
  width: auto;
  width: var(--width, auto);
  height: auto;
  height: var(--height, auto)
}

media-background[mode=contained] {
  background-color: transparent;
  background-color: var(--media-background-color, transparent)
}

media-background[mode=contained] media-background-content,
media-background[mode=contained] picture {
  width: 100%;
  height: 100%
}

media-background[mode=contained] picture {
  display: flex;
  align-items: center;
  justify-content: center
}

media-background[mode=contained] img {
  width: auto;
  height: 100%
}

media-background[mode=contained][fit=horizontal] img {
  height: 100%
}

media-background[mode=contained][fit=vertical] img {
  width: 100%;
  height: auto
}

media-background[background-style=image] picture:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(1.2);
  background-image: none;
  background-image: var(--image-url, none);
  background-position: 50%;
  background-size: cover;
  filter: blur(5px)
}

media-background[background-style=image] img {
  z-index: 2
}

media-background[overflow] {
  overflow: visible
}

media-background[mode=contained][vignette=start][fit=horizontal] img {
  -webkit-mask: linear-gradient(90deg, transparent 1%, #fff 12% 99%);
  mask: linear-gradient(90deg, transparent 1%, #fff 12% 99%)
}

media-background[mode=contained][vignette=start][fit=vertical] img {
  -webkit-mask: linear-gradient(180deg, transparent 1%, #fff 12% 99%);
  mask: linear-gradient(180deg, transparent 1%, #fff 12% 99%)
}

media-background[mode=contained][vignette=both][fit=horizontal] img {
  -webkit-mask: linear-gradient(90deg, transparent 1%, #fff 12% 88%, transparent 99%);
  mask: linear-gradient(90deg, transparent 1%, #fff 12% 88%, transparent 99%)
}

media-background[mode=contained][vignette=both][fit=vertical] img {
  -webkit-mask: linear-gradient(180deg, transparent 1%, #fff 12% 88%, transparent 99%);
  mask: linear-gradient(180deg, transparent 1%, #fff 12% 88%, transparent 99%)
}

media-background[mode=contained][vignette=end][fit=horizontal] img {
  -webkit-mask: linear-gradient(90deg, #fff 0 88%, transparent 99%);
  mask: linear-gradient(90deg, #fff 0 88%, transparent 99%)
}

media-background[mode=contained][vignette=end][fit=vertical] img {
  -webkit-mask: linear-gradient(180deg, #fff 0 88%, transparent 99%);
  mask: linear-gradient(180deg, #fff 0 88%, transparent 99%)
}

media-background[mode=contained][image-align=top] picture {
  align-items: flex-start
}

media-background[mode=contained][image-align=top] picture:before {
  background-position-y: top
}

media-background[mode=contained][image-align=bottom] picture {
  align-items: flex-end
}

media-background[mode=contained][image-align=bottom] picture:before {
  background-position-y: bottom
}

media-background[mode=contained][image-justify=left] picture {
  justify-content: flex-start
}

media-background[mode=contained][image-justify=left] picture:before {
  background-position-x: left
}

media-background[mode=contained][image-justify=right] picture {
  justify-content: flex-end
}

media-background[mode=contained][image-justify=right] picture:before {
  background-position-y: right
}

@-webkit-keyframes mediaBackgroundFadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes mediaBackgroundFadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes mediaBackgroundSlideLeft {
  0% {
    transform: translateX(0)
  }

  to {
    transform: translateX(-100%)
  }
}

@keyframes mediaBackgroundSlideLeft {
  0% {
    transform: translateX(0)
  }

  to {
    transform: translateX(-100%)
  }
}

@-webkit-keyframes mediaBackgroundSlideRight {
  0% {
    transform: translateX(0)
  }

  to {
    transform: translateX(100%)
  }
}

@keyframes mediaBackgroundSlideRight {
  0% {
    transform: translateX(0)
  }

  to {
    transform: translateX(100%)
  }
}

media-background-container {
  display: block;
  position: relative;
  overflow: hidden;
  --media-background-duration: 0.5s
}

media-background-container media-background {
  -webkit-animation-duration: var(--media-background-duration);
  animation-duration: var(--media-background-duration);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 1
}

media-background-container media-background.-is-active,
media-background-container media-background.-transition-out {
  z-index: 2
}

media-background-container media-background.-transition-in {
  z-index: 3;
  -webkit-animation-name: mediaBackgroundFadeIn;
  animation-name: mediaBackgroundFadeIn
}

media-background-container[speed=slow] {
  --media-background-duration: 1s
}

media-background-container[speed=fast] {
  --media-background-duration: 0.2s
}

media-background-container[transition=slide-left] media-background.-transition-in,
media-background-container[transition=slide-right] media-background.-transition-in {
  z-index: 3;
  -webkit-animation-name: none;
  animation-name: none
}

media-background-container[transition=slide-left] media-background.-transition-out,
media-background-container[transition=slide-right] media-background.-transition-out {
  z-index: 4
}

media-background-container[transition=slide-left] media-background.-transition-out {
  -webkit-animation-name: mediaBackgroundSlideLeft;
  animation-name: mediaBackgroundSlideLeft
}

media-background-container[transition=slide-right] media-background.-transition-out {
  -webkit-animation-name: mediaBackgroundSlideRight;
  animation-name: mediaBackgroundSlideRight
}