.kleurgroep-selector{--kleurgroep-primary: 149 142 92;--kleurgroep-primary-dark: 110 105 66;--kleurgroep-border: 209 213 219;--kleurgroep-card-border: 229 231 235}.kleurgroep-selector__controls{display:flex;flex-direction:column;gap:1.6rem;margin-block-end:1.6rem}.kleurgroep-selector__field{display:flex;flex-direction:column}.kleurgroep-selector__label{display:block;margin-block-end:.8rem;font-size:1.4rem;font-weight:500;color:rgb(var(--color-foreground))}.kleurgroep-selector__search,.kleurgroep-selector__select{width:100%;height:auto;min-height:4.2rem;padding:.8rem 1.2rem;border:1px solid rgb(var(--kleurgroep-border));border-radius:.6rem;box-shadow:0 1px 2px #0000000d;background:#fff;color:rgb(var(--color-input-text, var(--color-foreground)));transition:border-color .15s ease,box-shadow .15s ease}.kleurgroep-selector__search:focus,.kleurgroep-selector__search:focus-visible,.kleurgroep-selector__select:focus,.kleurgroep-selector__select:focus-visible{outline:none;border-color:rgb(var(--kleurgroep-primary));box-shadow:0 0 0 2px rgb(var(--kleurgroep-primary) / .25),0 1px 2px #0000000d}.kleurgroep-grid__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}@media(min-width:640px){.kleurgroep-grid__list{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:768px){.kleurgroep-grid__list{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(min-width:1280px){.kleurgroep-grid__list{grid-template-columns:repeat(6,minmax(0,1fr))}}.kleurgroep-grid__item{display:flex;flex-direction:column;padding:.6rem;border:1px solid rgb(var(--kleurgroep-card-border));border-radius:.8rem;overflow:hidden;text-align:center;text-decoration:none;transition:border-color .2s ease}.kleurgroep-grid__item[hidden]{display:none}.kleurgroep-grid__item:hover{border-color:rgb(var(--kleurgroep-primary))}.kleurgroep-grid__item--current{border:2px solid rgb(var(--kleurgroep-primary))}.kleurgroep-grid__media{position:relative;margin-block-end:.4rem;aspect-ratio:var(--ratio, 1);border-radius:.6rem;overflow:hidden}.kleurgroep-grid__image,.kleurgroep-grid__media img{width:100%;height:100%;object-fit:cover;display:block}.kleurgroep-grid__label{font-size:1.2rem;font-weight:500;line-height:1.25;color:rgb(var(--color-foreground))}
/*# sourceMappingURL=/cdn/shop/t/7/assets/kleurgroep.css.map */