:root {
  --black: #000;
  --gray-light: #e5e5e5;
  --gray-border: #ddd;
  /* --radius-lg: 2rem;
  --radius-md: 0.75rem; */
  --transition: 0.2s ease;
}

/* ===============================
   Layout
================================= */


.productPage .like-btn{
  color:#000;
}

/* ===============================
   Card styling
================================= */

.card-product .card-footer {
  padding-bottom: 1rem;
  background: #fff;
  border-top: none;
}
.priceIntro{
  font-size: 0.8em;

}
.priceIntro del{
  color:#c00;
}
.viewPrice {
  color: #060;
  font-weight: 700;
  font-size: 1.5em;
}

/* ===============================
   Text fade effects
================================= */
.productTitle{font-weight: 700;}

/* .productTitle,
.productDescription {
  position: relative;
  overflow: hidden;
}

.productTitle {
  max-height: 1.3em;
}

.productDescription {
  max-height: 4.5em;
}

.productTitle::after,
.productDescription::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1.3em;
  background: linear-gradient(to right, transparent, #fff);
}

.productTitle::after {
  width: 25%;
}

.productDescription::after {
  width: 50%;
} */

/* ===============================
   Offcanvas
================================= */

/* .offcanvas.offcanvasProductInfo {
  width: 40vw !important;
} */



/* ===============================
   Masonry layout
================================= */
.masonryHolder {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width:50%;
}

.masonry.masonryGrid {
  flex-grow: 1;
}
/*
.display: flex;
  flex-direction: row;
  gap: var(--gutter); */

.masonryGrid {
  width:100%;
}

/* ===============================
   Size selector
================================= */

ul.configSelector {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.configSelector li {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  margin: 0 6px 6px 0;

  border: 2px solid var(--gray-border);
  border-radius: var(--radius-md);

  background-color: #fff;
  color: var(--black);

  font-size: 0.95rem;
  font-weight: 500;

  cursor: pointer;
  transition: all var(--transition);
}

/* Hover */
ul.configSelector li:hover {
  border-color: var(--black);
  transform: translateY(-2px);
}

/* Active */
ul.configSelector li.active {
  background-color: var(--black);
  color: #fff;
  border-color: var(--black);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* ===============================
   Buttons
================================= */

/* .form-row .col-6,
.form-row .col-7 {
  display: flex;
  align-items: stretch;
}

.form-row .btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all var(--transition);
} */


.shadowBox a:not(.btn) 
  color:#000;
}
.brandSubstitute {
  border: solid 1px #222;
  padding: 0.25em;
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
}

.card-product .card-footer {
    padding-top: 1.5rem !important;
}

/* Terug */
.btn-outline-dark {
  border-width: 1.5px;
}

.btn-outline-dark:hover {
  background-color: var(--black);
  color: #fff;
}

/* Bestellen CTA */
#addToCartBut {
  font-weight: 600;
  border-width: 2px;
}

#addToCartBut:not(:disabled) {
  background-color: #198754;
  color: #fff;
}

#addToCartBut:not(:disabled):hover {
  background-color: #157347;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Disabled */
#addToCartBut:disabled {
  background-color: #f1f3f5;
  border-color: #e2e6ea;
  color: #adb5bd;
  cursor: not-allowed;
}

/* Brand knop */
.col-lg-2 .btn {
  font-size: 0.9rem;
}


/* @media (min-width: 1600px) {
  .mainHolder>.masonryHolder{
    width:66.6667%;
    max-width:66.6667%;
  }

  .productHolder {
    width:33.3333%;
    max-width:33.3333%;
  }
} */