.collection-main-body.grid-uniform{margin-left:0}.collection_grid .pagination{margin-top:30px;text-align:center}.collection_grid .btn--underlined{color:var(--primary-btn-bg-color)}.mobile-facets__open{margin:0 0 15px 0}.facets__form-inner{gap:30px}@media screen and (min-width:768px){.facets__form-inner{column-gap:var(--grid-spacing)}}@media screen and (min-width:768px){.grid-area--filtering{grid-area:filtering}.grid-area--collection{grid-area:collection}.collection_grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"collection"}.collection_grid.filtering_enabled--topbar{grid-template-columns:1fr;grid-template-rows:repeat(2,auto);grid-template-areas:"filtering" "collection"}.collection_grid.filtering_enabled--topbar .collection-info__description{text-align:center}.collection_grid.filtering_enabled--sidebar{grid-template-columns:250px 1fr;grid-template-rows:auto;grid-template-areas:"filtering collection";column-gap:30px}.collection_grid.filtering_enabled--sidebar .collection-info{margin-bottom:30px}.collection_grid.filtering_enabled--sidebar .collection-info .page--title{text-align:left}}

/* =========================
   GEGShop – Facets (simple + double-line)
   - Accent geel: #feed01 (subtiele inner line op de button)
   - Dropdown: inner line WIT, outer line ZWART
   ========================= */

.facets__wrapper{
  --green:#228b22;
  --yellow:#feed01;
  --black:#111;
  --white:#fff;
  --radius:14px;
  --outer:2px;
  --inner:2px;
}

/* Theme borders/lines uitzetten */
.facets__wrapper details{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.facets__wrapper .facets__summary::before,
.facets__wrapper .facets__summary::after{
  content:none !important;
  display:none !important;
}

/* ===== Filter button (summary) =====
   Outer: zwart | Inner: geel hairline */
.facets__wrapper .facets__summary,
.facets__wrapper summary.facets__summary{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px;

  padding:12px 14px !important;
  border-radius:var(--radius) !important;

  background:var(--white);
  color:var(--black);
  border:var(--outer) solid var(--black);

  /* inner line + geen “oude” shadows */
  box-shadow: inset 0 0 0 1px var(--yellow) !important;

  outline:none !important;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Chevron/icon netjes */
.facets__wrapper .facets__summary svg,
.facets__wrapper .facets__summary .icon{
  position:static !important;
  margin:0 !important;
  align-self:center !important;
  height:1em;
  color:currentColor;
  fill:currentColor;
  transform:none !important;
  transition:none !important;
}

/* Hover: kleine lift, verder clean */
.facets__wrapper .facets__summary:hover{
  transform:translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--yellow) !important;
}

/* Open: outer rand groen, inner line blijft geel */
.facets__wrapper details[open] > .facets__summary{
  border-color:var(--green);
  box-shadow: inset 0 0 0 1px var(--yellow) !important;
}

/* ===== Dropdown panel =====
   Inner: WIT | Outer: ZWART (zoals je vroeg) */
.facets__wrapper .facets__display,
.facets__wrapper .facets__list,
.facets__wrapper .facets__content,
.facets__wrapper .disclosure__list-wrapper{
  margin-top:10px;
  padding:10px 12px;

  background:var(--white);
  border:var(--outer) solid var(--black);
  border-radius:var(--radius);

  /* inner white line */
  box-shadow: inset 0 0 0 var(--inner) var(--white) !important;
}

/* Option hover subtiel */
.facets__wrapper .facets__item:hover,
.facets__wrapper .facet-checkbox:hover{
  background:rgba(0,0,0,.04);
}

/* Checkbox/radio accent (groen) */
.facets__wrapper input[type="checkbox"],
.facets__wrapper input[type="radio"]{
  accent-color:var(--green);
}

/* ===== Active filter chips (clean) ===== */
.active-facets__button,
.active-facets__button-remove,
.active-facets__button.button--secondary,
.active-facets__button.button--tertiary,
.active-facets__button.js-clear-all-filters,
.active-facets__button.js-facet-remove{
  background:var(--white) !important;
  color:var(--black) !important;
  border:1px solid rgba(17,17,17,.65) !important;
  border-radius:999px !important;
  padding:6px 10px !important;
  line-height:1 !important;
  font-weight:650 !important;
  box-shadow:none !important;
  transition:background .15s ease, transform .15s ease !important;
}
.active-facets__button button{
  background:transparent !important;
  color:inherit !important;
  border:0 !important;
  padding:0 !important;
  font:inherit !important;
  line-height:inherit !important;
}
.active-facets__button:hover,
.active-facets__button-remove:hover{
  background:rgba(0,0,0,.05) !important;
  transform:translateY(-1px);
}

/* Clear all: licht groen, hover groen */
.active-facets__button.js-clear-all-filters{
  background:rgba(34,139,34,.10) !important;
}
.active-facets__button.js-clear-all-filters:hover{
  background:var(--green) !important;
  color:var(--white) !important;
}

/* kleine icon sizing in chips */
.active-facets__button svg,
.active-facets__button .icon{
  width:14px !important;
  height:14px !important;
  vertical-align:middle !important;
  margin-left:6px !important;
  color:currentColor !important;
}


/* =========================
   GEGShop – Facets (clean double border)
   ========================= */

.facets__wrapper{
  --green:#228b22;
  --yellow:#feed01;
  --black:#111;
  --white:#fff;
  --radius:14px;
}

/* Reset theme lijnen */
.facets__wrapper details{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.facets__wrapper .facets__summary::before,
.facets__wrapper .facets__summary::after{
  content:none !important;
  display:none !important;
}

/* ===== FILTER BUTTON ===== */
/* Outer zwart + subtiele gele inner line */
.facets__wrapper .facets__summary{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:12px 14px !important;

  background:#fff;
  color:#111;

  border:2px solid var(--black);
  border-radius:var(--radius);

  box-shadow: inset 0 0 0 1px var(--yellow) !important;
  transition:transform .15s ease;
}

.facets__wrapper .facets__summary:hover{
  transform:translateY(-1px);
}

.facets__wrapper details[open] > .facets__summary{
  border-color:var(--green);
}

/* ===== DROPDOWN STRUCTUUR ===== */

/* OUTER LINE (zwart) */
.facets__wrapper .facets__display{
  background:#fff;
  border:2px solid var(--black);
  border-radius:var(--radius);
  padding:8px;
}

/* INNER LINE (wit) */
.facets__wrapper 
.facets__list.list-unstyled.swatch-labels--enabled{
  background:#fff;
  border:2px solid #fff;
  border-radius:calc(var(--radius) - 4px);
  padding:10px 12px;
}

/* Optie hover subtiel */
.facets__wrapper .facets__item:hover,
.facets__wrapper .facet-checkbox:hover{
  background:rgba(0,0,0,.04);
}

/* Checkbox accent */
.facets__wrapper input[type="checkbox"],
.facets__wrapper input[type="radio"]{
  accent-color:var(--green);
}

/* ===== ACTIVE FILTER CHIPS ===== */

.active-facets__button,
.active-facets__button-remove{
  background:#fff !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.65) !important;
  border-radius:999px !important;
  padding:6px 10px !important;
  line-height:1 !important;
  font-weight:600 !important;
  box-shadow:none !important;
  transition:background .15s ease, transform .15s ease !important;
}

.active-facets__button:hover,
.active-facets__button-remove:hover{
  background:rgba(0,0,0,.05) !important;
  transform:translateY(-1px);
}

.active-facets__button.js-clear-all-filters{
  background:rgba(34,139,34,.10) !important;
}

.active-facets__button.js-clear-all-filters:hover{
  background:var(--green) !important;
  color:#fff !important;
}



/* ===========================
   GEGShop – Active filter chips (premium)
   =========================== */

/* basis voor alle active facet buttons + de theme varianten */
.active-facets__button,
.active-facets__button.button--secondary,
.active-facets__button.button--tertiary,
.active-facets__button.js-clear-all-filters,
.active-facets__button.js-facet-remove{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #111 !important;
  border-radius:999px !important;
  padding:6px 10px !important;
  line-height:1 !important;
  font-weight:650 !important;
  box-shadow: inset 0 0 0 1px #feed01 !important; /* dun geel lijntje */
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

/* als er een <button> binnen zit: ook netjes meenemen */
.active-facets__button button{
  background:transparent !important;
  color:inherit !important;
  border:0 !important;
  padding:0 !important;
  font:inherit !important;
  line-height:inherit !important;
}

/* hover: geel, geen dikke randen */
.active-facets__button:hover,
.active-facets__button.button--secondary:hover,
.active-facets__button.button--tertiary:hover,
.active-facets__button.js-clear-all-filters:hover,
.active-facets__button.js-facet-remove:hover{
  background:#feed01 !important;
  box-shadow: inset 0 0 0 1px #111 !important;
  transform: translateY(-1px);
}

/* "Clear all" iets meer “actie” maar nog steeds chip */
.active-facets__button.js-clear-all-filters{
  background: rgba(34,139,34,.10) !important;
  border-color: rgba(17,17,17,.65) !important;
}

/* Clear all hover: groen i.p.v. geel (net wat logischer) */
.active-facets__button.js-clear-all-filters:hover{
  background:#228b22 !important;
  color:#fff !important;
  box-shadow: inset 0 0 0 1px #feed01 !important;
}

/* kleine “x”/icon in chip netjes uitlijnen */
.active-facets__button svg,
.active-facets__button .icon{
  width:14px !important;
  height:14px !important;
  vertical-align:middle !important;
  margin-left:6px !important;
  color: currentColor !important;
}


/* =========================
   GEGShop – Sort dropdown (clean, no double border)
   ========================= */

:root{
  --green:#228b22;
  --yellow:#feed01;
  --black:#111;
  --white:#fff;
  --radius:14px;
  --outer:2px;
}

/* Alleen de echte select wrapper */
.select.inline-icon--wrapper.dropdown-icon{
  border:var(--outer) solid var(--black) !important;
  border-radius:var(--radius) !important;
  background:var(--white) !important;

  /* subtiele inner hairline */
  box-shadow: inset 0 0 0 1px var(--yellow) !important;

  transition:transform .15s ease, border-color .15s ease;
}

/* De select zelf */
select.select__select.collection-filters__sort{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  width:100%;
  background:transparent !important;
  color:var(--black) !important;

  border:0 !important;   /* geen dubbele rand */
  box-shadow:none !important;

  padding:12px 42px 12px 14px !important;
  font-weight:650 !important;
}

/* Hover lift */
.select.inline-icon--wrapper.dropdown-icon:hover{
  transform:translateY(-1px);
}

/* Focus / open = groene buitenrand */
.select.inline-icon--wrapper.dropdown-icon:focus-within{
  border-color:var(--green) !important;
}

/* Geen browser outline */
select.select__select.collection-filters__sort:focus,
select.select__select.collection-filters__sort:focus-visible{
  outline:none !important;
}