
/* Custom CSS theme */
/* BOLT Amsterdam: Montserrat Alternates 800 for the category titles.
   @import must be the very first thing in the stylesheet. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@800&display=swap");
/*Button color*/
.ec-size .ec-store .form-control--primary .form-control__button {
  background-color: #00ff0c;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
  background: #999999;
}

/*Text color*/
.ec-size .ec-store .form-control--primary .form-control__button {
  color: black;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
  color: black;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .label--notice {
  background-color: #00d60b;
}

.mollie-payment-methods-list-container .ec-radiogroup__item .ec-radiogroup__label {
  color: #000 !important;
}

.ecwid-popup .popupContent {
  border: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}

.ecwid-overlay {
  background: #000 !important;
  opacity: 1 !important;
}

.ecwid-productBrowser, .grid-product__wrap-inner {
  background: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ecwid-productBrowser h1 {
  color: #fff !important;
}

/* ---- Corner ribbons on product cards (Sold out + Pre-order) ---- */
/* clip the ribbon tails to the image */
.ec-size .ec-store .grid-product__image-wrap {
  overflow: hidden !important;
}

/* 120x120 box in the top-right corner that holds the ribbon */
.ec-size .ec-store .grid-product__label .ec-label {
  position: absolute !important;
  top: 32px !important;
  right: -54px !important;
  left: auto !important;
  width: 200px !important;
  transform: rotate(45deg);
  text-align: center;
  padding: 6px 0 !important;
  border: 0 !important;
  border-top: 2px solid #fff !important;
  /* white stroke on the outside */
  border-bottom: 2px solid #fff !important;
  border-radius: 0 !important;
  box-shadow: inset 0 2px 0 #000, inset 0 -2px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ec-size .ec-store .grid-product__label .label__text {
  color: #000 !important;
  font-size: 10px !important;
  /* was 11px */
  font-weight: 800 !important;
  letter-spacing: .05em;
  /* was .08em */
  text-transform: uppercase;
  line-height: 1.2 !important;
}

/* Sold out = yellow */
.ec-size .ec-store .grid-product__label .label--attention {
  background: #FDFF00 !important;
}

/* Pre-order = your green */
.ec-size .ec-store .grid-product__label .label--notice {
  background: #00d60b !important;
}

/* ribbon text: black, small, bold. Ecwid forces white 14px, hence !important */
.ec-size .ec-store .grid-product__label .label__text {
  color: #000 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2 !important;
}

/* Remove Ecwid's tint over product images (also on hover) */
.ec-size .ec-store .grid-product__shadow,
.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__shadow,
.ec-size .ec-store .grid__products .grid-product--dark .grid-product__wrap-inner:hover .grid-product__shadow {
  background-color: transparent !important;
}

/* Match the hover image's backdrop to your black background */
.ec-size .ec-store .grid-product__picture-additional {
  background-color: #000 !important;
}

/* ---- BOLT category titles on the diagonal band ---- */
.grid-category__card {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
}

/* put the name on the image, centred on the band, no Ecwid overlay */
a.grid-category__title {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.grid-category__title-inner {
  position: absolute !important;
  left: 50%;
  top: 39.583%;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) rotate(-29.05deg) !important;
  font-family: "Montserrat Alternates",Arial,sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: .95 !important;
  font-size: 9.833cqw !important;
  color: #fff !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  text-transform: none !important;
}

/* ---- Category grid: 5 in a row, no grey stroke ---- */
.ec-size .ec-store .grid__categories {
  justify-content: center !important;
}

.ec-size .ec-store .grid__categories .grid-category {
  flex: 0 0 20% !important;
  width: 20% !important;
  max-width: 20% !important;
}

.ec-size .ec-store .grid-category__wrap {
  padding: 6px !important;
}

/* remove the thin grey stroke around each tile */
.ec-size .ec-store .grid-category__shadow {
  box-shadow: none !important;
  background: none !important;
}

.ec-size .ec-store .grid-category__bg-color {
  background-color: #000 !important;
}

/* mobile: 3 on the first row, 2 centred on the second */
@media (max-width: 768px) {
  .ec-size .ec-store .grid__categories .grid-category {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    max-width: 33.3333% !important;
  }
  .ec-size .ec-store .grid-category__wrap {
    padding: 3px !important;
  }
}
