.vs-wrap { width: 100%; }
.vs-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.vs-title { margin:0; }
.vs-intro { margin-top:10px; }

.vs-body { display:flex; gap:32px; margin-top:24px; }
.vs-sidebar { width: 280px; }
.vs-sidebar-inner { position: sticky; top: 20px; }

.vs-filter-title { font-weight:600; margin-bottom:12px; }
.vs-filter-group { margin-bottom:18px; }
.vs-filter-heading { font-weight:600; margin-bottom:10px; }
.vs-muted { opacity:.7; font-size: 14px; margin: 0; }

.vs-chips { display:flex; flex-wrap:wrap; gap:10px; }

.vs-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  color: #111;
  cursor: pointer;
  text-decoration:none;
  font-size: 14px;
  line-height: 1;
}

.vs-chip.is-active {
  background: #0b3b4b;
  border-color: #0b3b4b;
  color: #fff;
}

.vs-reset {
  margin-top: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: .7;
}

.vs-grid-area { flex:1; min-width: 0; }

.vs-grid.is-loading { opacity: .55; pointer-events:none; }

.vs-grid-inner {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(var(--vs-cols, 3), minmax(0, 1fr));
}

/* Forceer jouw "Voeg toe" knop stijl in de cards */
a.button.add_to_cart_button.ajax_add_to_cart.vs-add-btn{
	background-color: var(--gcid-secondary-color);
    font-weight: 400;
    color: #ffffff !important;
    font-size: var(--gvid-lry5abnd4f) !important;
    border-top-left-radius: 141px;
    border-top-right-radius: 141px;
    border-bottom-left-radius: 141px;
    border-bottom-right-radius: 141px;
    border-width: 0px;
    border-color: #333;
    border-style: solid;
    transition-property: background-color, color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
    padding: 5px 18px;
    margin-top: 25px;
    margin-bottom: 15px;
}

/* hover */
a.button.add_to_cart_button.ajax_add_to_cart.vs-add-btn:hover{
background-color: var(--gcid-primary-color);
}

/* als WooCommerce er een border op zet */
.vs-card .vs-add-btn:focus,
.vs-card .vs-add-btn:active{
  outline:none;
  box-shadow:none;
}


.vs-card { text-align:center; }
.vs-card-img img { width: 100%; height: auto; border-radius: 18px; display:block; }
.vs-card-title { display:block; margin-top: 10px; text-decoration:none; }
.vs-card-img img { border: solid #EFEFEF 1px; aspect-ratio: 4 / 3; object-fit: contain;
}


.vs-card-price { margin-top: 6px; opacity:.8; }

.vs-pager-inner { display:flex; gap:8px; justify-content:center; margin-top: 22px; }
.vs-page { padding: 6px 10px; border:1px solid #ddd; background:#fff; border-radius: 10px; cursor:pointer; }
.vs-page.is-active { background:#0b3b4b; border-color:#0b3b4b; color:#fff; }
.vs-ellipsis { display:inline-flex; align-items:center; padding: 0 6px; opacity:.6; }

@media (max-width: 980px) {
  .vs-body { flex-direction: column; }
  .vs-sidebar { width: 100%; }
  .vs-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .vs-grid-inner { grid-template-columns: 1fr; }
}

a.vs-hoofditems {
    color: #989898 !important;
	font-weight: 400 !important;
}

a.vs-hoofditems.is-active{
  color: #038FD7 !important;
  font-weight: 600 !important;
}


.vs-hoofd {
    display: flex;
    flex-direction: column;
}

.vs-reset { display: none; }
.vs-reset.is-visible { display: inline-block; }

/* header verbergen tot JS klaar is */
.vs-header.is-hydrating { opacity: 0; }
.vs-header.is-ready { opacity: 1; transition: opacity .15s ease; }

.vs-sidebarsticky {
    position: sticky;
    top: 85px;
}

.vs-card-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:10px;
  flex-wrap: wrap;
}

.vs-qty{
  display:flex;
  align-items:center;
  gap:8px;
}

.vs-qty-minus,
.vs-qty-plus{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid #d9d9d9;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}

.vs-qty-input{
  width:34px;
  text-align:center;
  border:0;
  background:transparent;
  font-weight:600;
  outline:none;
  -moz-appearance:textfield;
}
.vs-qty-input::-webkit-outer-spin-button,
.vs-qty-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

input.vs-global-search-input{
    background: transparent;
    border: 0;
    border-bottom: 1px solid #013550;
    padding: 10px 0px;
    font-size: 20px;
    color: #013550;
}