/* 20250418135446 - v2 */
.gui,
.gui-block-linklist li a {
  color: #000000;
}

.gui-page-title,
.gui a.gui-bold,
.gui-block-subtitle,
.gui-table thead tr th,
.gui ul.gui-products li .gui-products-title a,
.gui-form label,
.gui-block-title.gui-dark strong,
.gui-block-title.gui-dark strong a,
.gui-content-subtitle {
  color: #000000;
}

.gui-block-inner strong {
  color: #fcdae9;
}

.gui a {
  color: #0b0101;
}

.gui-input.gui-focus,
.gui-text.gui-focus,
.gui-select.gui-focus {
  border-color: #0b0101;
  box-shadow: 0 0 2px #0b0101;
}

.gui-select.gui-focus .gui-handle {
  border-color: #0b0101;
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
  border-color: #000000;
}

.gui-block-title {
  color: #fac2db;
  background-color: #fac2db;
}

.gui-content-title {
  color: #fac2db;
}

.gui-form .gui-field .gui-description span {
  color: #000000;
}

.gui-block-inner {
  background-color: #f0bad2;
}

.gui-block-option {
  border-color: #d8d8d8;
  background-color: #f2f2f2;
}

.gui-block-option-block {
  border-color: #d8d8d8;
}

.gui-block-title strong {
  color: #fac2db;
}

.gui-line,
.gui-cart-sum .gui-line {
  background-color: #8c8c8c;
}

.gui ul.gui-products li {
  border-color: #b2b2b2;
}

.gui-block-subcontent,
.gui-content-subtitle {
  border-color: #b2b2b2;
}

.gui-faq,
.gui-login,
.gui-password,
.gui-register,
.gui-review,
.gui-sitemap,
.gui-block-linklist li,
.gui-table {
  border-color: #b2b2b2;
}

.gui-block-content .gui-table {
  border-color: #d8d8d8;
}

.gui-table thead tr th {
  border-color: #8c8c8c;
  background-color: #f2f2f2;
}

.gui-table tbody tr td {
  border-color: #d8d8d8;
}

.gui a.gui-button-large,
.gui a.gui-button-small {
  border-color: #000000;
  color: #000000;
  background-color: #fac2db;
}

.gui a.gui-button-large.gui-button-action,
.gui a.gui-button-small.gui-button-action {
  border-color: #bc7e7e;
  color: #000000;
  background-color: #fac2db;
}

.gui a.gui-button-large:active,
.gui a.gui-button-small:active {
  background-color: #c89baf;
  border-color: #000000;
}

.gui a.gui-button-large.gui-button-action:active,
.gui a.gui-button-small.gui-button-action:active {
  background-color: #c89baf;
  border-color: #966464;
}

.gui-input,
.gui-text,
.gui-select,
.gui-number {
  border-color: #000000;
  background-color: #fac2db;
}

.gui-select .gui-handle,
.gui-number .gui-handle {
  border-color: #000000;
}

.gui-number .gui-handle a {
  background-color: #fac2db;
}

.gui-input input,
.gui-number input,
.gui-text textarea,
.gui-select .gui-value {
  color: #000000;
}

.gui-progressbar {
  background-color: #fac2db;
}

/* custom */
/*  =====================================================  Toegevoegd door Durk  ===================================================== */
/*  =====================================================    17 oktober 2024      ===================================================== */

/*  ===================================================== Command + F om te zoeken  ===================================================== */

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Achtergrond Kleur (hele website) */
#root {
  background: linear-gradient(to bottom, #fbe9f1 0%, #fbe9f1 50%, #d16998 100%) !important;
}



hr {border-top: 1px solid white;}

/* winkel tour pagina */
img.imagep { width: 190px; padding: 2px;}
.imageo { display: inline-flex;flex-wrap: wrap;justify-content: center;}

/*  ===================================================== Algemeen ===================================================== */
/*  ===================================================== Algemeen  ===================================================== */

[data-whatintent="mouse"] .list-btn.a a:hover {border-color:#d16998 !important; color: white !important;}
[data-whatintent="mouse"] .list-btn.a a:hover:after {border-color: white !important;}
#root .module-featured .owl-dots button.active:after {background: #d16998;}
#root .module-featured .owl-dots button:after {border: 1px solid #d16998;}
/* icoonen */ .material-icons.hero {font-size: 40px !important;}
/* log-in icoon */ .side-login-button::before {content: "login"; font-family: 'Material Icons'; font-size: 20px; color: white; margin-right: 15px; text-transform: none; transition: transform 0.3s ease;}
.side-login-button {display: flex !important; justify-content: center; align-items: center;}
.side-login-button:hover::before {transform: translateX(3px);}
/* account maken icoontje */ #login .link-btn a::before {content: "person_add"; font-family: 'Material Icons'; font-size: 20px; color: white; margin-right: 15px; text-transform: none; transition: transform 0.3s ease;}
#login .link-btn a {display: flex !important; justify-content: center; align-items: center;}
#login .link-btn a:hover::before {transform: translateX(3px);}
/* bestel icoon winkelwagen */ #cart .submit a:before {content: "shopping_cart"; font-family: 'Material Icons'; font-size: 20px; color: white; margin-right: 15px; text-transform: none; transition: transform 0.3s ease;}
#cart .submit a:hover::before {transform: translateX(3px);}
#cart .submit a {display: flex !important; justify-content: center; align-items: center;}
/* icoon toevoegen aan winkelwagen */ .add-size-to-cart::before, .add-to-cart-button::before {content: "add_shopping_cart"; font-family: 'Material Icons'; font-size: 20px; color: white; margin-right: 10px; text-transform: none; margin-left: 10px;}
#product_configure_form .add-size-to-cart::before, .add-to-cart-button::before {color:#d16998 !Important;}
.list-collection .variant-select-snippet button, .form-product .submit button {display: flex; align-items: center;}
/* direct betalen icoon */ #checkoutButton::before {content: "add_card"; font-family: 'Material Icons'; font-size: 20px; color: white; margin-right: 10px; text-transform: none; margin-left: 10px;}
#checkoutButton {display: flex; align-items: center; justify-content: center;}
/* instagram feed */ #dmws_f-instagram .dmws-instagram-post .dmws-instagram-caption .text {font-weight: normal;}
#dmws_f-instagram a.dmws-instagram-post.template-1 .dmws-instagram-user {border-top: 2px solid #d16998; padding-bottom: 10px; padding-top: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.25);}
/*reviews dmws*/ .new #top .bar p {position: absolute; right: 0px; top: 8px; margin: 0; font-size: 14px; color: #000000; background: #ffffff; padding-left: 30px; padding-right: 30px; padding-top: 8px; padding-bottom: 3px; line-height: 0px; box-shadow: 0 4px 6px rgba(0,0,0,0.25); transition: transform 0.3s ease;}
.rating-a.c, .new #top .bar p a {color: black !important;}
.new #top .bar p:hover {transform: translateY(-3px);}
.list-comments.a li:before {left: 0px; top: 30px; bottom: 0px;}
.list-comments li {position: relative; margin: 0; padding: 48px 20px 18px 20px; border-top: 3px solid #e897bc; font-size: 1em; border-radius: 0px; margin-bottom: 30px;}
li.dmws-plus-review-pros-cons-item {margin-bottom: -25px!important; border: none;}
.list-comments li:first-child {margin-top: 0px;}
.list-comments.a {border-top: 1px solid lightgray; border-radius: 0px;}
.dmws-p_86c1ztmuk-title {color: black !important; border-bottom: 3px solid; border-radius: 0px; padding-bottom: 5px; font-size: 28px; font-family: var(--headings); font-weight: 900 !important;}
@media (max-width: 480px){.dmws-p_86c1ztmuk-title {font-size: 2.5em;}}
h5.s28.m10 {padding-bottom: 10px !important; border-bottom: 3px solid; border-radius: 0px;}
#dmws-p_86c1ztmuk-collapsible-content {margin-bottom: 40px !important;}
@media only screen and (max-width: 47.5em){.heading-rating .header a.toggle {color: #ffffff; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;} #section-reviews .s28 {padding-left: 15px; color: white;} header .rating-a.strong {padding-left: 15px;} #root .heading-rating h5 {background-color: #d16998; border-top-right-radius: 15px; border-top-left-radius: 15px;} .heading-rating .header a.toggle:before {right: 15px; font-size: 10px;} .list-comments.a h3 {border-radius: 0px;} .list-comments li:after {height: 35px;} .list-comments.a li {padding-top: 30px;} .list-comments.a li:first-child {margin-top: 30px;} .list-slider .label > .btn i {color: #ffffff;}}
#root .m70 {border-radius: 0px;}
#mobile a {border-radius: 0px;}
html {scroll-behavior: smooth;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Titels ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
h3 a {font-size: 15px !important;}
h2 a {font-size: 15px !important;}
h1.m20 {font-size: 40px; border-bottom: 3px solid black; border-radius: 0px;}
h4.gui-page-title {font-size: 40px;}
a {font-weight: 800; color:#d16998;}
#nav > ul + ul > li:hover > a i {transform: translateY(-2px); color:white;}
#nav i {transition: transform 0.3s ease;}
h1, h2, h3, h4, h5, h6, legend, .gui-page-title, html .gui-page-title, .gui-content-title {color: var(--headingsColor); font-family: var(--headings); font-size: 40px; line-height: 1.3928571429; font-weight: 900;}
@media (max-width: 480px){h1, h2, h3, h4, h5, h6, legend, .gui-page-title, html .gui-page-title, .gui-content-title {font-size: 30px; line-height: 1.3928571429; font-weight: 900;}}
/* Beoordeling pagina */ .gui-block-title {color: #e897bc !important; font-weight: 700 !important;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <Hr> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ hr {margin-bottom: 15px; margin-top: 0px;}
/* infogram usp */ .list-collection.triple .infogram:before {box-shadow: 0 4px 6px rgba(0,0,0,0.25);}
.list-collection.triple .infogram h5 {color:#333; display: flex; justify-content: center; border-bottom: 2px solid; border-radius: 0px; padding: 10px; font-size: 20px;}
.list-collection.triple .infogram p {color:black; padding: 10px;}
.list-collection.triple .infogram {margin-bottom: 0; padding-left: 15px; padding-right: 15px; padding-bottom: 5px;}
.infogram .material-symbols-outlined {margin-left: 10px; font-size: 30px;}
.contact-button .material-symbols-outlined {padding-right: 8px;}
.contact-button {display: flex; align-items: center;}
.section-6 h2, .section-6 p, .section-6.module-wide ul.list-inline li a {color: #ffffff; display: flex; justify-content: center; align-items: center; text-decoration: none;}
.list-inline li a .material-symbols-outlined:hover {transform: translateX(5px);}
.material-symbols-outlined {transition: all 0.2s ease; padding-right: 10px}
/*  ===================================================== Algemeen eind  ===================================================== */

/* ===================================================== homepagina ===================================================== */
/* ===================================================== homepagina ===================================================== */
.list-catalog li {width: 7.5%; transition: all 0.3s ease !important; border: 1px solid white; padding: 1%; box-shadow: 0 4px 6px rgba(0,0,0,0.25); margin-left: 8px;} .list-catalog li:hover {transform: translateY(-5px) !important; color: white !important; background-color: #d16998;} .list-catalog span {font-weight: 700; font-size: 13px;} .list-catalog li:hover span {color: white;} .list-catalog.categories li:hover img, .list-catalog.small-images li:hover img {filter: invert(100%) grayscale(100%) brightness(200%);} .list-inline.text-uppercase a {display: inline-flex; padding: 10px 20px; font-size: 14px; color: white; background-color: #d16998; text-decoration: none; border-radius: 20px; transition: transform 0.3s ease, color 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.25); border: 1px solid white; margin-bottom: 10px; align-content: center;} .list-inline.text-uppercase a:hover {transform: translateX(5px) !important;} .module-aside img {border: 1px solid white; box-shadow: 0 4px 6px rgba(0,0,0,0.25);}
/* ===================================================== homepagina eind ===================================================== */

/* ===================================================== buttons ===================================================== */
/* ===================================================== buttons ===================================================== */
@media (max-width:480px) {
  .link-btn a {border: 1px solid white !important; border-color: white !important;}
  #root .desktop-hide {border-radius: 0;}
  h5.desktop-hide {font-size: 40px !important; font-weight: 700; background: #D16998; color: white;}
  .form-filter > .close {color: white; font-size: 20px !important;}
  #footer nav h3 {font-size: 20px;}
  #footer nav h3:before {font-size: 10px;}
  #footer nav a {font-size: 15px;}
}
.form-filter .header {color: #D16998 !important; border-radius: 0; font-weight: 900 !important; border-bottom: solid 3px; font-size: 20px;}
.form-filter li input:checked ~ label:before {border-color: #D16998; background: #D16998;}
.form-cart a.btn,
.buy-button.link-btn a,
.rewards-wrapper .loyalty-learn-more .btn {
  border: 1px solid white !important; color: white; background-color: #d16998; box-shadow: 0 4px 6px rgba(0,0,0,0.25);
  transition: all 0.3s ease !important; padding: 10px !important; font-size: 15px !important;
  justify-content: space-evenly; display: flex; flex-direction: row-reverse;
}
.form-cart a.btn:hover,
.buy-button.link-btn a:hover,
.rewards-wrapper .loyalty-learn-more .btn:hover {transform: translateY(-5px) !important; color: white !important;}
.buy-button.link-btn a::before {content:"shopping_cart_checkout"; font-family: material symbols outlined; font-size: 30px; font-weight: 500; position: relative;}
#root .semantic-number a {box-shadow: none; border: none !important;}
.list-checkout p .semantic-number input {border-radius: 15px;}
#root .semantic-number a:hover {transform: none !important; color: black !important;}
.buttontest {
  display: flex; padding: 10px 20px; font-size: 16px; color: white; background-color: #d16998;
  text-decoration: none; border-radius: 20px; transition: transform 0.3s ease, color 0.3s ease;
  margin: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.25); border: 1px solid white;
  Align-items: center; justify-content: space-evenly; width: fit-content;
}
@media (max-width:480px){ .buttontest {margin: 15px;}}
.buttontest:hover {background-color: #f79cbf; transform: scale(1.1);}
.buttonservice {
  display: inline-block; padding: 10px 20px; font-size: 16px; color: white; background-color: #d16998;
  text-decoration: none; border-radius: 20px; transition: transform 0.3s ease, color 0.3s ease;
  margin: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.25); border: 1px solid white;
}
@media (max-width:480px){ .buttonservice {margin: 15px;}}
.buttonservice:hover {background-color: #f79cbf; transform: scale(1.1);}
.social-buttons {display: flex; gap: 15px; justify-content: center; margin-top: 20px;}
.social-button {display: inline-flex; align-items: center; padding: 8px 25px; border-radius: 30px; color: #fff; text-decoration: none; font-weight: bold; font-size: 1.2em; transition: background-color 0.3s ease;}
.social-button i {margin-right: 10px; font-size: 1.5em;}
.instagram {background-color: #E1306C;} .instagram:hover {background-color: #C13584;}
.facebook {background-color: #3b5998;} .facebook:hover {background-color: #2d4373;}
.icontest {width: 50px; height: 50px;}
.module-featured .hero-3 ul.list-btn li a {
  padding: 5% 20%; color: #ffffff; background-color: #d16998; text-decoration: none; font-weight: bold;
  border-radius: 20px; transition: all 0.3s ease; position: relative; overflow: hidden;
  box-shadow: 0px 4px 15px rgba(250,194,219,0.4); text-align: center; border: 1px solid white;
}
.module-featured .hero-3 ul.list-btn li a:hover {color: #fff; background-color: #FAC2DB; transform: scale(1.05);}
.module-featured .hero-1 ul.list-btn li a {
  padding: 8px 20px; color: #ffffff; background-color: #d16998; text-decoration: none; font-weight: bold;
  border-radius: 5px; transition: all 0.3s ease; position: relative; overflow: hidden;
  box-shadow: 0px 4px 15px rgba(250,194,219,0.4); text-align: center; white-space: nowrap; line-height: 1.2;
  font-size: 1rem; max-width: 100%;
}
.module-featured .hero-1 ul.list-btn li a:hover {color: #fff; background-color: #FAC2DB; transform: scale(1.05);}
@media (max-width:768px){ .module-featured .hero-3 ul.list-btn li a {padding: 10px 15px; font-size: 0.9rem; width: auto;}}
/* ===================================================== buttons eind ===================================================== */

/*  ===================================================== Rondevormen ===================================================== */
/*  ===================================================== Rondevormen ===================================================== */
.new #root { border-radius: 0px; }
.material-symbols-outlined li.dmws-plus-review-pros-cons-item { margin-bottom: 5px; }
*, *:before, *:after { border-radius: 10px; }
.new #nav:before { border-radius: 0px; background-color: #fbe9f1 !important; }
.new #top .bar:before { border-radius: 0px; }
@media only screen and (max-width: 767px) { .form-newsletter input { border-radius: 15px; } }
.form-filter ul { border-radius: 0; }
#dmws_f-instagram img { border-radius: 15px; border: 1px solid; }
#top:before { border-radius: 0px; }
/*  ===================================================== Rondevormen eind ===================================================== */
  
/* ===================================================== navigatie menu ===================================================== */
/* ===================================================== navigatie menu ===================================================== */
.new #top > form input, .form-sort select { /* zoekbalk */
  border-radius: 20px; border: 1px solid #e48bb3; box-shadow: 0 4px 6px rgba(0,0,0,0.25);
}
nav ul li ul { box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; }
/* services tabs */
ul.list-btn li.active a { background-color: #d16998; color: white; border: 2px solid white;}
.link-btn text-center { border-radius: 20px; }
@media only screen and (max-width: 62.5em) { #mobile .title { display: block; padding: 16.5px 20px; font-size: 16px; background: #d16998; color: white; border-radius: 0px; } 
  #mobile .close, .form-filter > .close { color: white;} }
/* ===================================================== navigatie menu eind ===================================================== */

/*  ===================================================== Footer menu ===================================================== */
/*  ===================================================== Footer menu ===================================================== */
#footer li a:hover {text-decoration: underline;}
#footer a {font-weight: 600; color: #ccc; transition: color 0.3s ease, text-shadow 0.3s ease;}
#footer a:hover {color: white; text-shadow: 0 0 5px rgba(255,255,255,0.8);}
#footer nav h3:hover {color: white !important; font-weight: 900 !important; transition: scale(1.1);}
#footer nav:before {border-radius: 0;}
.buttonfooter {display: inline-block; padding: 1px 20px; font-size: 12px; color: white; background-color: #d16998; text-decoration: none !important; border-radius: 20px; transition: transform 0.3s ease, color 0.3s ease; margin: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.25); margin-left: -5px; border: 1px solid white; width: 200px !important;}
@media (max-width:480px){.buttonfooter {display: block; width: 100%; margin: 10px 0; font-size: 14px; text-align: center;}}
@media only screen and (max-width:47.5em){#root .double, #footer .header-toggle, #footer nav h3:after, #root .list-collection form, .tabs-b .tabs-inner.toggle, .tabs-b .tabs-header {display: block; border-radius: 0;}}
#footer nav h3, #footer nav a, #footer p.copyright, #footer nav .contact-footer li {color: #fff !important;}
.list-btn.a a, .link-btn a, .form-comment button {background: #d16998 !important; border-radius: 10px; color: white !important; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.25); border: 1px solid white; padding: 10px;}
.list-btn.a a:hover:after {background: #d16998 !important; border-color: white !important; border: 1px solid;}
@media (min-width:1024px){a.header-toggle {border-bottom: solid white 3px; border-radius: 2px; padding-top: 25px; width: 150px;}}
.link-btn a.a, #root #footer .link-btn a.a {border: 1px solid white !important; text-decoration: none !important;}
#root #footer .link-btn li:nth-of-type(1) a::before {content: "phone_in_talk"; font-family: 'Material Icons' !important; font-size: 20px; color: white; margin-right: 8px; text-transform: none;}
#root #footer .link-btn li:nth-of-type(2) a::before {content: "outgoing_mail"; font-family: 'Material Icons' !important; font-size: 20px; color: white; margin-right: 8px; text-transform: none;}
.form-newsletter button {display: flex; align-items: center; justify-content: center;}
.form-newsletter button::before {content: "outgoing_mail" !important; font-family: 'Material Icons'; font-size: 20px; color: white; margin-left: -130px; position: absolute; text-transform: none; align-content: center;}
@media only screen and (max-width:47.5em){
  .form-newsletter button {font-size: 12px; width: 130px;}
  .form-newsletter button::before {margin-left: -90px;}
  button.submit-newsletter {display: inline-flex; align-items: center; padding: 0 15px;}
  button.submit-newsletter::before {position: static !important; display: inline-block !important; margin-right: 5px !important; content: "outgoing_mail";}
  button.submit-newsletter::before, #text {margin-left: 0;}
}
#footer nav .link-btn a.a:after {border: none;}
#footer nav div:nth-child(1) h3::before {content: "support_agent"; font-family: 'Material Icons' !important; font-size: 24px; color: white; margin-left: 40px;}
#footer nav div:nth-child(2) h3::before {content: "account_circle"; font-family: 'Material Icons' !important; font-size: 24px; color: white; margin-left: 40px;}
#footer nav div:nth-child(3) h3::before {content: "category"; font-family: 'Material Icons' !important; font-size: 24px; color: white; margin-left: 40px;}
#footer nav div:nth-child(4) h3::before {content: "groups_2"; font-family: 'Material Icons' !important; font-size: 24px; color: white; margin-left: -20px;}
.link-btn a, .gui a.gui-button-large, .gui a.gui-button-small {display: flex; align-items: center; padding: 5px 15px !important;}
.material-icons {margin-left: 5px; vertical-align: middle;}
.buttonfooter:nth-child(1)::before {content: "question_mark"; font-family: 'Material Icons'; margin-right: 5px; margin-left: -5px; font-size: 15px;}
.buttonfooter:nth-child(2)::before {content: "favorite"; font-family: 'Material Icons'; margin-right: 5px; font-size: 15px;}
.buttonfooter {display: flex; align-items: center; justify-content: center;}
ul.contact-footer.m10 a {display: flex; flex-direction: row-reverse; justify-content: space-evenly;}
.hover-effect {float: right; margin-top: 50px; margin-bottom: 10px; width: 300px; height: auto; cursor: pointer; transition: 0.3s ease-in-out;}

/*  ===================================================== Footer menu eind ===================================================== */

/*  ===================================================== Nieuwsbrief ===================================================== */
/*  ===================================================== Nieuwsbrief ===================================================== */
@media only screen and (max-width:47.5em){button.submit-newsletter{border:1px solid white;}}
.form-newsletter .gui-page-title::after {content:"\1F338";}
.submit-newsletter {border-radius:15px; background-color:#D16998; transition:transform 0.3s ease, color 0.3s ease; border:1px solid white; box-shadow:0 4px 6px rgba(0,0,0,0.25);}
.submit-newsletter:hover {border-radius:15px !important; background-color:#FAC2DB; transform:scale(1.1);}
.form-newsletter input {border-bottom-width:2px; border-color:#D16998;}
/*  ===================================================== Nieuwsbrief eind ===================================================== */

/*  ===================================================== Payments button ===================================================== */
/*  ===================================================== Payments button ===================================================== */
@media (max-width:480px){
  .dmws-payments.dmws-payments-buttons-style::before { left:50% !important; }
  .dmws-payments.dmws-payments-buttons-style { justify-content:center; }
}
.dmws-payments.dmws-payments-buttons-style > span > img { border:1px solid #d16998 !important; }
#content ~ #cart ~ #login ~ #footer > nav + ul.dmws-payments.list-payments { border-radius:0; margin:20px; }
.hover-effect { transition: transform 0.3s ease, filter 0.3s ease; }
.hover-effect:hover { transform: scale(1.1); }
/*  ===================================================== Payments button eind ===================================================== */

/*  ===================================================== team beautyvol ===================================================== */
/*  ===================================================== team beautyvol  ===================================================== */
a#tab-2:hover { color: #FAC2DB; }
/* Uit vanwege test 
.list-catalog img { border-bottom-left-radius: 70px; border-bottom-right-radius: 70px; } */
/*  ===================================================== team beautyvol eind ===================================================== */

/*  ===================================================== custom hr  ===================================================== */
/*  ===================================================== custom hr  ===================================================== */
.custom-hr { border: none; height: 5px; width: 80%; background-color: #d16998; margin: 20px auto; }
.custom-hr2 { border: none; height: 2px; width: 70%; background-color: #d16998; margin: 10px auto; }
@media (min-width: 321px) and (max-width: 375px) { .custom-hr { margin: 20px 0; text-align: center; } }
u.custom-underline { border-bottom: 5px solid #d16998; border-radius: 3px; padding-bottom: 2px; text-decoration: none; color: inherit; }
u.custom-underline2 { border-bottom: 2px solid #333333; border-radius: 2px; padding-bottom: 2px; text-decoration: none; color: #333333; font-weight: 700; }
u.custom-underline3 { border-bottom: 5px solid #D16998; border-radius: 3px; padding-bottom: 2px; text-decoration: none; color: inherit; }
u.custom-underline4 { border-bottom: 5px solid #D16998; border-radius: 3px; padding-bottom: 2px; text-decoration: none; color: inherit; }
u.custom-underline5-home { border-bottom: 5px solid #FAC2DB; border-radius: 3px; padding-bottom: 2px; text-decoration: none; color: inherit; }
/*  ===================================================== custom hr eind ===================================================== */

/*  ===================================================== contact pagina  ===================================================== */
/*  ===================================================== contact pagina ===================================================== */
.contact-container { text-align: center; padding: 20px; max-width: 800px; margin: 0 auto; }
.contact-container h2 { font-size: 28px; margin-bottom: 10px; }
.contact-container p { font-size: 18px; margin-bottom: 20px; }
.button-container { display: flex; justify-content: center; gap: 15px; flex-wrap: nowrap; }
.contact-button { flex: 1 1 auto; max-width: 200px; padding: 12px 20px; font-size: 16px; text-align: center; text-decoration: none; color: #fff; background-color: #d16998; border: 1px solid white; border-radius: 20px; transition: transform 0.3s ease, color 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.25); }
.contact-button:hover { background-color: #f4b1cd; color: white; transform: scale(1.1); }
@media (max-width:600px){ .button-container { flex-direction: column; gap: 10px; } .contact-button { width: 100%; max-width: none; } }
/*  ===================================================== contact pagina eind ===================================================== */



/* ===================================================== USP Section ===================================================== */
/* ===================================================== USP Section ===================================================== */

h3, .gui-content-title { margin: 0 0 12px !important; }
.usp-section { display: flex; justify-content: space-between; max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fbe9f1; border-radius: 8px; gap: 20px; }
.usp-item { display: block; flex: 1; max-width: 250px; padding: 20px; text-align: center; box-sizing: border-box; background-color: white; border-radius: 50px; -webkit-box-shadow: 0 0 58px 8px rgba(250,194,219,0.78); -moz-box-shadow: 0 0 58px 8px rgba(250,194,219,0.78); box-shadow: 0 0 58px 8px rgba(250,194,219,0.78); text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid #d16998; }
.usp-item:hover { transform: scale(1.1); border-radius: 30px; }
.usp-item img { width: 60px; height: 80px; max-width: 100%; border-radius: 50%; }
.usp-item h3 { font-size: 15px; color: #333; margin-bottom: 10px; }
.usp-item p { font-size: 11px; color: #333; line-height: 1.4; }
@media (max-width:768px) { .usp-section { flex-wrap: wrap; } .usp-item { flex: 1 1 45%; max-width: 100%; } }
@media (max-width:480px) { .usp-item { flex: 1 1 100%; max-width: 45%; padding: 5px; } .usp-item h3 { font-size: 10px; } }
@media (max-width:480px) { .usp-section h3, .usp-section p { text-align: center !important; } }
/* ===================================================== Einde USP ===================================================== */

/* ===================================================== WINKELWAGEN ===================================================== */
/* ===================================================== WINKELWAGEN ===================================================== */

.form-cart a.btn {padding:10px;font-size:11px;}
.buy-button.link-btn a {font-size:18px;border-radius:20px;}
.accordion-a > h3 {border-top:2px solid #d16998;}
.accordion-a {border-bottom:2px solid #d16998;}
.winkelwagenteksttest h3 {margin-bottom:35px !important;}
@media (max-width:480px){.winkelwagenteksttest h3{font-size:23px;} article .gui-page-title{font-size:27px;} .list-payments{margin-left:0;}}
.winkelwagenteksttest li:last-child::after {content:"\1F6CD";display:inline;}
.winkelwagenteksttest h3::after {content:"\1F50D";margin-left:10px;}
article:first-of-type .gui-page-title::after {content:"\1F440";margin-left:10px;}
article:nth-of-type(2) .gui-page-title::after {content:"\1F45A";margin-left:10px;}
.list-total li > span:first-child {font-size:15px;font-weight:500;}
#cart .submit a {background:#d16998;border:3px solid white;box-shadow:0 4px 6px rgba(0,0,0,0.25);}
#cart > .inner > h5 {font-size:30px;border-bottom: 4px solid #d16998; border-radius: 0px; }
#cart .close:hover {color:#D16998;}
#cart .close {font-size:20px;}
.cols-b > aside > .accordion-a:first-child {border-radius:0px;}
.dmws-payments.dmws-payments-buttons-style > span > img {border:1px solid #FAC2DB;width:65px !important;height:50px !important;padding:10px !important;box-shadow:0 4px 6px rgba(0,0,0,0.25);}
.list-payments {margin-left:73px;}
.dmws-payments.dmws-payments-buttons-style::before {content:"Beschikbare Betaalopties:";position:absolute;top:-43px;left:35%;transform:translateX(-50%);font-size:14px;color:#333;text-align:center;font-weight:700;margin-top:20px;}
.dmws-payments.dmws-payments-buttons-style {position:relative;}
.form-inline input {border-bottom-left-radius:15px;border-top-left-radius:15px;}
.form-inline button {border-bottom-right-radius:15px;border-top-right-radius:15px;background-color:#d16998 !important;border:1px solid white !important;box-shadow:0 4px 6px rgba(0,0,0,0.25);}
#login button, #login .link-btn a {border-radius:20px;background-color:#D16998;border:1px solid white;box-shadow:0 4px 6px rgba(0,0,0,0.25);padding:5px !important;}
#root .gui-login .gui-buttons .gui-button-small {border-radius:20px !important;background-color:#FAC2DB;border:none;text-transform:none;justify-content:center;font-weight:600;font-size:14px;}
.gui-input input, .gui-text textarea, .gui-select select {border-radius:20px; !important}
.gui-block-title strong {color:#d16998;font-size:30px !important;font-weight:700 !important;}
#root .gui-buttons.gui-border .gui-right .gui-button-small, #root .gui a.gui-button-large, #root .gui a.gui-button-small, .form-comment p.submit button {color:white;border:5px solid white !important;background:#d16998 !important;Border-radius:20px !important;box-shadow:0 4px 6px rgba(0,0,0,0.25);justify-content:center;}
.gui-faq, .gui-login, .gui-password, .gui-register, .gui-review, .gui-sitemap, .gui-block-linklist li, .gui-table {border-color:#d16998;border-radius:0px;}
.gui-block-linklist li a:hover {display:block;overflow:hidden;color:#FAC2DB;padding:10px 0;border-radius:0px;}
.gui-block-content .gui-table {border-color:#d8d8d8;border-radius:20px !important;}
.list-collection .owl-nav button:before {background:#d16998c7;border:1px solid white;transition:transform 0.3s ease;box-shadow:0 4px 6px rgba(0,0,0,0.25);}
#root .owl-nav button:after {color:white;}
[data-whatintent="mouse"] .list-collection .owl-nav button:hover:before {background-color:#d16998;transform:scale(1.1);}
.gui-block-subtitle, .gui-table thead tr th, .gui ul.gui-products li .gui-products-title a, .gui-form label, .gui-block-title.gui-dark strong, .gui-block-title.gui-dark strong a, .gui-content-subtitle {color:black;font-weight:700 !important;font-size:20px !important;margin-top:30px;}
.form-cart button, .form-cart a.btn {border-radius:20px;}
.list-payments li, span.list-payments img {border-radius:0px;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight:700;font-size:30px;}
.btn, button {background-color:#d16998;border:none;}
#content.shipment .checkout-shipping-method.selected {border:1px solid #FAC2DB;}
h4.gui-page-title {font-size:40px !important;}
.list-total:before {background:white;box-shadow:0 4px 6px rgba(0,0,0,0.25)!important;opacity:1;border:1px solid #D16998;}
.list-checkout li {border-radius:0px;}
.list-checkout figure {border:1px solid black;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,0.25)!important;}
.link-btn.wide {margin-bottom:70px;}
.list-checkout ul a {color:#D16998;}
aside h3.header[data-id="1"]::after {content:"redeem";font-family: material symbols outlined;padding-right:10px;font-weight:400;}
aside h3.header[data-id="2"]::after {content:"local_shipping";font-family: material symbols outlined;padding-right:10px;font-weight:400;}
aside h3.header[data-id="3"]::after {content:"question_exchange";font-family: material symbols outlined;padding-right:10px;font-weight:400;}
aside h3.header[data-id="4"]::after {content:"rewarded_ads";font-family: material symbols outlined;padding-right:10px;font-weight:400;}
h3.header {display:flex;flex-direction:row-reverse;justify-content:flex-end;}
.accordion-a > h3 {font-size:21px;}
.accordion-a > .header {transition:transform 0.2s ease;border-radius:0;font-weight:700;}
.accordion-a > .header:hover {transform:translateY(-5px)!important;}
.list-total {padding:25px 45px 25px 45px !important;}
#gui-form-cart a.btn::before {Content:"arrow_back";display:contents;font-family: material symbols outlined;}
.list-total li.strong:last-child {border-bottom:1px solid;border-radius:0px;padding-top:10px;}
.form-cart a.btn {border:1px solid #d16998!important;color:#d16998;background-color:#fafafa;font-weight:800;}
.form-cart a.btn:hover {color:#d16998!important;}
.gui-input, .gui-text, .gui-select, .gui-number {border-color:#000;background-color:white!important;border-radius:20px!important;}
#cart .submit > span { border: 1px solid #D16998;}
/* ===================================================== WINKELWAGEN EINDE ===================================================== */

/* ===================================================== LOGIN SIDEBAR =====================================================  */
/* ===================================================== LOGIN SIDEBAR =====================================================  */

#login .link-btn{border-radius:0}
#lc,#ld{border-radius:15px}
#login h5{font-size:30px;border-bottom:4px solid #d16998;border-radius:2px;display:flex;align-items:center;font-weight:700}
#login h5::before{content:"account_circle";font-family:material symbols outlined;font-weight:400;padding-right:10px}
#login .close:hover{color:#D16998}
#login .close::before{font-weight:900}
ul.list-checks{border:1px solid #d16998;padding:20px;box-shadow:0 4px 6px rgba(0,0,0,.25)!important}
ul.list-checks li:before{margin-right:10px;font-size:20px;content:"✓  ";display:contents;color:#d16998}
ul.list-checks li p{padding-left:20px}
#login label{display:flex;align-items:center}
#login label[for="ld"]::after,#login label[for="lc"]::after{font-family:'Material Symbols Outlined';font-weight:500;font-size:20px;padding-left:5px}
#login label[for="ld"]::after{content:"key"}
#login label[for="lc"]::after{content:"mail"}
#login .material-symbols-outlined::before{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* ===================================================== LOGIN SIDEBAR EINDE =====================================================  */

/* ===================================================== @ Mobiel knoppen @ ===================================================== */
/* ===================================================== @ Mobiel knoppen @ ===================================================== */

@media (max-width: 480px) {
  .gui-button-link, .gui .gui-buttons .gui-left a {
    width: 194%;
  }
  .gui-left {
    width: 50%;
  }
  .gui-col2-left-col1 .gui-block-subtitle a {
  margin-top: 52px;
}
  .gui-account-loyalty-content {
    height: 120px !important;
  }
}

/* ===================================================== @ Mobiel knoppen einde @ ===================================================== */

/*  ===================================================== Account dashboard  =====================================================  */
/*  ===================================================== Account dashboard  =====================================================  */

/* === BASIS === */
.qui-block,.gui-border,.gui-block-productlist li{border-radius:0!important}

/* === KNOPPEN === */
.gui a.gui-button-link,.gui-block-subtitle a,.gui-block-title a{display:inline-block;padding:5px;width:36%;text-align:center;font:600 14px/1 sans-serif;color:#fff;background:#d16998;border:1px solid #fff;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,.25);transition:all .3s ease}
.gui a.gui-button-link{width:140%;border-width:5px;font-size:13px;border-radius:20px;margin:10px 0}
.gui a.gui-button-link:hover,.gui-block-subtitle a:hover,.gui-block-title a:hover{transform:translateY(-5px)}
.gui a.gui-action-delete{margin-top:9px}
.gui a.gui-action-delete:hover{background:#fac;border-radius:50px}

/* === TITELS & TEKST === */
.gui-col2-left-col2 .gui-page-title{color:#333;border-bottom:5px solid #333;margin:17px 0 50px;border-radius:0px;}
.gui-col2-left-col2 .gui-block-title{border:1px solid #d16998!important;border-top:1px solid #333;border-radius:5px}
.gui-col2-left-col2 p strong{color:#d16998;font-weight:800}

/* === TABELLEN & LINKS === */
.gui-table thead tr th{background:#d16998!important;color:#fff;border-radius:0px;}
.gui-table a{text-decoration:underline;font-style:italic}

/* === LAYOUT === */
.gui-col2-left-col1{border-right:1px solid rgba(51,51,51,.2);padding-right:20px}
.gui-block-subtitle::after{content:"";display:block;height:1px;background:rgba(153,153,153,.6);margin:20px 0}
.gui-blog-nav {  border:none;}

/* === SPECIALS === */
.gui-right .gui-button-small{margin:8px 0;padding:10px!important;min-width:133px!important}
.gui-col2-left-col1 .gui-block-subtitle a{width:60%;margin-top:52px}
.gui a.gui-bold{font-size:12px!important}

/* === PRODUCTPAGINA === */
.form-product .submit button,
.form-product .submit input,
.form-product select,
[id^=dmws-p_w8g0f1-color-picker] .dmws-p_w8g0f1-color-picker--options select{border-radius:10px}
.link-btn a{color:#fff!important;background:#d16998!important;transition:transform .3s ease,color .3s ease}
.link-btn a:hover:after{background:#e897bc!important;transform:scale(1.1)}
.module-product .price{font-size:40px!important}
.form-product .open-login{background:#fff;border:1px solid #d16998;box-shadow:0 4px 6px rgba(0,0,0,.25);transition:all .3s ease}
.form-product .open-login:hover{transform:translateY(-3px)}
.icon-heart-outline{color:#d16998!important;font-weight:900!important}
.module-product-bar .link-btn a{border-color:#fff!important;justify-content:center}
.module-product-bar h3,.module-product-bar p.price{color:#000}
[id^=dmws-p_w8g0f1-color-picker] .dmws-p_w8g0f1-color-picker--custom-color span>div{border-bottom:4px solid #d16998}
.tabs-a{display:none}
.list-info.dmws-specs li:nth-child(odd){background:#fff}
.list-info.dmws-specs li:nth-child(even){background:#fbe9f1}
button.add-to-cart-button,a.add-bundle-btn{background:#fff;border:1px solid #d16998;box-shadow:0 4px 6px rgba(0,0,0,.25);color:#d16998!important;font-size:13px}
[id^=dmws-p_w8g0f1-color-picker] .dmws-p_w8g0f1-color-picker--custom-color a{transition:all .3s ease}
[id^=dmws-p_w8g0f1-color-picker] .dmws-p_w8g0f1-color-picker--custom-color a:hover{transform:translateY(-3px)}
.s28,#root .s28{margin-bottom:30px;font-size:28px!important;border-bottom:3px solid}
.list-info li{padding:0 0 0 190px!important;position:relative;clear:both}
.link-btn a.b,.link-btn a.b:hover{border:1px solid #fff}
select{border:none}
#form-filter #sortselect{width:200px!important}
.list-collection.compact li form p button{background:#d16998;border:1px solid #fff;border-radius:0 0 10px 10px}
.list-info{border:1px solid #000}
.module-product-bar:before{border:0 solid #d16998;border-bottom-width:2px;background:#fff}
#dmws-a_w8g7dw_payment-info>p>img{border-radius:50px}
@media (max-width:768px){.icon-heart-outline{color:#fff!important}}
/*  ===================================================== Account dashboard einde =====================================================  */

/* ===================================================== RESPONSIVE IFRAME ===================================================== */
.responsive-iframe{width:100%;max-width:600px;height:450px}
@media (min-width:768px){.responsive-iframe{width:48%}}
/* ===================================================== RESPONSIVE IFRAME EINDE ===================================================== */


/* ===================================================== live chat announchment bar ===================================================== */
.dmws-announcement .dmws-announcement-button:active, .dmws-announcement .dmws-announcement-button:focus, .dmws-announcement .dmws-announcement-button:hover {
  background-color: #EF8DB9;
}
    #dmws-plus-popup-discount, #dmws-plus-popup-discount-manual {
        border-radius: 20px!important;
    }
@media (max-width: 480px) { 
  #dmws-plus-popup-discount .dmws-f-popup-close, #dmws-plus-popup-discount-manual .dmws-f-popup-close {
    z-index: 2;
    width: 35px;
    height: 35px;
}
  .dmws-announcement-close .close-icon {
    width: 35px;
    height: 35px;
}
}
/* ===================================================== live chat announchment bar einde ===================================================== */

/* ===================================================== !! Ongeorganiseerd !!  ===================================================== */
/* ===================================================== !! Ongeorganiseerd !! ===================================================== */

.form-filter li label:before, .list-select ul label:before { border: 1px solid #d16998; color: #f8ecf0; }
.list-filters a:before, .list-filters label:before { color: #d16998; }

.heading-wide img { filter: blur(3px) brightness(0.5); border-radius: 0px; }
.heading-wide figure { filter: drop-shadow(0px 4px 6px black); border-radius: 0px; }
.heading-wide figure:before { border-radius: 0px;}

.form-newsletter:before { background: #fac2db; }



/* Animaties */
.list-inline a:hover i {transform: translateX(5px) !important;} 
.list-inline a i {transition: transform 0.3s ease;} 
.list-collection.triple li:hover i {transform: translateX(5px) !important;} 
.list-collection.triple li i {transition: transform 0.3s ease;} 
.list-big figure:hover i {transform: translateX(5px) !important;}

/* mobiel fix */
@media only screen and (max-width:47.5em){
  #root .text-mobile-left .list-btn.a { -webkit-justify-content: center !important; justify-content: center !important;} 
.list-collection.triple h4 { justify-content:left; } 
}

/* Filters productpagina. */
.form-filter .header:before {font-size:8px;} 
.form-sort {border-bottom:3px solid; border-radius:0;} 
.dmws-p_86c1ztmuk-title {color:var(--dmws-plus-86c1ztmuk_titleColour); border-bottom:3px solid; border-radius:0; padding-bottom:5px;} 
.dmws-p_86c1ztmuk-faq-summary:hover, .dmws-p_86c1ztmuk-faq-icon:hover {color:#fac; transform:translateY(-3px) !important;} 
.dmws-p_86c1ztmuk-faq-summary:hover ~ .dmws-p_86c1ztmuk-faq-icon, .dmws-p_86c1ztmuk-faq-icon:hover ~ .dmws-p_86c1ztmuk-faq-summary {color:#fac; fill:#fac;}

/* Overige */
.heading-wide h2::after {content:"☀️"; font-size:1em; margin-left:5px;} 
@media (min-width: 992px) { .list-collection.triple h4 {display:flex; justify-content:center; align-items:center;} }
.tabs-b > nav ul li.active a {color:#D16998;} 
.list-collection .img {border:3px solid white; box-shadow: 0 4px 6px rgba(0,0,0,0.25); border-radius: 13px;}
.single getted-image filled {box-shadow:0 4px 8px rgba(0,0,0,0.1),0 6px 20px rgba(0,0,0,0.1);}

/* Responsief & banners */
@media (max-width:480px){ 
  .list-big figure {box-shadow:0 4px 8px rgba(0,0,0,0.1),0 6px 20px rgba(0,0,0,0.1) !important;} 
  .list-collection.aside li.aside figure, .list-collection.aside li.aside {display:none;} 
  .list-collection.triple h1, .list-collection.triple h2, .list-collection.triple h3, .list-collection.triple h4, .list-collection.triple h5, .list-collection.triple h6 {font-size:20px; padding-bottom:20px;} 
  .list-big h3 {color:red !important;} 
}
body .list-collection .img.home-custom-banners.banner-1.lazy-bg-loaded, 
body .list-collection .img.home-custom-banners.banner-2.lazy-bg-loaded, 
body .list-collection .img.home-custom-banners.banner-3.lazy-bg-loaded {box-shadow:0px 8px 24px rgba(34,34,34,0.6)!important; margin-bottom:15px;}

/* Knoppen */
#root .list-collection .btn, .list-product .label .btn, .list-slider .label .btn {position:absolute; right:0; top:0; width:44px; min-width:0; height:44px; margin:10px 10px 0 0; padding:0; box-shadow:0 4px 6px rgba(0,0,0,0.25)!important; border-radius:99px; border-color:var(--mercury); background:#d16998 !important; color:white; line-height:1.3846153846; text-indent:-3000em; text-align:left; border:1px solid; transition:all 0.3s ease;}
#root .list-collection .btn:hover {transform:translateY(-5px);} 
#root .list-collection .btn:hover::before {content:"\e91a" !important;} 
.list-collection .btn i, .list-product .label > .btn i, .list-slider .label > .btn i::after {color:white;}

/* Navigatie */
#nav > ul > li > a.overlay-g, #mobile > ul > li > a.overlay-g > span {background:#b3417d; box-shadow:0 4px 6px rgba(0,0,0,0.2); color:white !important; border:1px solid white;} 
#nav > ul > li > a {color:#b3417d !important;}

/* Overige add-ons */
.dmws_perfect-label_sale {background-color:#D16998 !important;} 
#dmws-p_1r579bz-banner {box-shadow:0 4px 6px rgba(0,0,0,0.25); border:5px solid white; border-radius:10px;}

/* USP bar tekst */
#top .list-usp li, .list-usp i {font-weight:900 !important;} 
.module-product .list-usp, .form-product .list-usp i {color:black; font-weight 900 !important;} 
.overlay-g {color:white; font-weight:900;} 
.module-product .list-usp, .form-product .list-usp i {color:white; background:#d16998;} 
.module-product .list-usp, .form-product .list-usp {max-width:500px; padding:10px 40px; border:1px solid white; font-size:11px; box-shadow:0 4px 6px rgba(0,0,0,0.25);} 
@media only screen and (max-width:47.5em){ .form-product .list-usp li {margin:10px 0;} .module-product .list-usp, .form-product .list-usp {padding-top:20px; padding:10px 8px; max-width:400px;} }

/* Hover en transities */
.list-collection.triple li:hover {transform:translateY(-10px) !important;} 
.list-collection.triple li {transition:all 0.3s ease;}

/* Productcard en select */
.list-collection .variant-select-snippet button {border-bottom-right-radius:10px !important; border:1px solid; font-size:10px; border-radius:0;} 
.list-collection select {border-bottom-left-radius:11px !important;}

/* Productpagina */
.s28, #root .s28 {border-radius:0;}

select#limit { border: 1px solid #d16998;}
.nav-pagination li.active a { color: #d16998; font-weight: 900; !important}
.nav-pagination li > a { font-weight: 400 !important;}

h1, .gui-content-title {
  border-bottom: 5px solid black; border-radius: 0px;
}

/* ===================================================== klantenservice ===================================================== */
/* ===================================================== klantenservice ===================================================== */
/* Klantenservice - Afbeelding pagina betalen */
.payment-logos { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 1em; margin-bottom: 2em; }
.payment-logos img { max-width: 100px; height: auto; flex: 1 1 auto; object-fit: contain; }
@media (max-width:768px){ 
  .payment-logos { flex-direction: column; align-items: center; } 
  .payment-logos img { max-width: 80%; margin-bottom: 1em; } 
}
/* Klantenservice - List-catalog small-images */
@media (min-width:1025px){
  .list-catalog.small-images li { border: 2px solid #333; margin-left: 21.4px; margin-top: -15px; transition: transform 0.3s ease, color 0.3s ease; width: 9.5%; box-shadow: 0 4px 6px rgba(0,0,0,0.25)!important; padding: 15px; margin-bottom: 0px;}
}
.list-catalog.small-images li:hover { transform: scale(1.1); color: #Fac; border-color: white; }
.list-catalog.small-images li:hover span { color: white; font-weight: 900; }
@media (max-width:600px){ 
  .list-catalog.small-images li { width: 100%; text-align: center; } 
}
h1, .gui-content-title { font-size: 40px; }
.list-catalog.small-images li span { color: #333333; font-weight: 800; font-size: 12px; transition: color 0.3s ease; }

/* ===================================================== Openingstijden ===================================================== */
/* Algemene styling */
.openingstijden {
  font-family: Arial, sans-serif;
  margin: 20px;
}
.openingstijden * {
  border-radius: 0px;
}
.openingstijden h2 {
  text-align: center;
  font-size: 40px;
}

/* Tabel styling */
.openingstijden table {
  width: 100%;
  margin: auto;
  border: 5px solid #d16998;
  border-radius: 15px;
  border-collapse: collapse;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}
.openingstijden th, .openingstijden td {
  border: 1px solid #545454;
  padding: 15px;
  text-align: center;
}
.openingstijden th {
  background-color: #d16998;
  color: white;
}
.openingstijden tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Location map styling */
#locatiemap {
  position: relative;
  margin-top: 20px;
}

.responsive-iframe {
  width: 93%;
  height: 520px;
  margin-top: 9px;
  border: 5px solid #d16998;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  border-radius: 0px;
}

/* Styling voor iconen */
.h2material .material-symbols-outlined {
  font-size: 45px;
  padding-right: 10px;
}

/* Styling voor kopjes */
#openingstijden h2, #locatiemap h2 {
  text-align: center;
  border-bottom: 4px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
  border-radius: 0px;
  font-size: 30px;
  border-bottom-style: double;
}

/* Desktop styling (naast elkaar) */
#openingstijden-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Ruimte tussen de elementen */
  flex-wrap: wrap; /* Zorgt ervoor dat de elementen onder elkaar komen bij kleinere schermen */
  align-items: flex-start;
}

/* Stijl voor de tabel */
#openingstijden {
  flex: 1;
  max-width: 48%; /* Zorg ervoor dat de tabel niet te breed wordt */
  border-right: 2px solid white;
  padding-right: 40px;
  border-radius: 0px;
  border-right-style: double;
}

/* Stijl voor de map */
#locatiemap {
  flex: 1;
  max-width: 48%; /* Zorg ervoor dat de map niet te breed wordt */
}
/* Mobile styling (voor schermen kleiner dan 768px) */
@media (max-width: 768px) {
  /* Zorg ervoor dat de container zich stapelt op mobiel */
  #openingstijden-container {
    display: block; /* Stapelt de elementen onder elkaar op mobiel */
    margin-top: 20px;
  }
#openingstijden {
  border-right: none;
  padding-right: 0px;
  }
  /* Tabel styling voor mobiel */
  .openingstijden table {
    width: 100%;
    font-size: 14px; /* Verklein de tekst op mobiel */
    margin-top: 10px;
  }

  .openingstijden th, .openingstijden td {
    padding: 10px; /* Minder padding op mobiel */
    font-size: 14px; /* Verklein de tekst voor mobiel */
  }

  /* Verklein de iconen voor mobiel */
  .material-symbols-outlined {
    font-size: 30px;
  }

  /* Verklein de iframe voor mobiel */
  .responsive-iframe {
    height: 300px;
  }

  /* Zorg ervoor dat de tabel en map 100% breed zijn op mobiel */
  #openingstijden, #locatiemap {
    max-width: 100%; /* Verwijder de max-width van 48% voor mobiel */
  }
}
/* ===================================================== Einde Openingstijden ===================================================== */

/* Mobile styling */
@media (max-width: 768px) {
  ul.list-catalog {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Vier kolommen */
    gap: 10px; /* Ruimte tussen de items */
    padding: 0;
    margin: 0;
  }

  ul.list-catalog li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Ruimte tussen de items */
  }

  /* Zorg ervoor dat de afbeeldingen dezelfde grootte hebben en niet buiten de kolom komen */
  ul.list-catalog img {
    width: 100%; /* Zorg ervoor dat de afbeelding schaalt naar de breedte van de kolom */
    height: auto; /* Behoud de verhoudingen van de afbeelding */
    max-height: 200px; /* Stel een maximale hoogte in zodat de afbeeldingen niet te groot worden */
    object-fit: cover; /* Zorg ervoor dat de afbeelding goed binnen de container past zonder vervormd te worden */
  }

  /* Zorg ervoor dat de tekst goed zichtbaar is en niet te groot is */
  ul.list-catalog span {
    display: block;
    margin-top: 10px; /* Ruimte tussen de afbeelding en de tekst */
    font-size: 14px; /* Verklein de tekst voor mobiel */
    color: #333; /* Zorg ervoor dat de tekst goed leesbaar is */
  }

  /* Verklein de tekstgrootte voor de mobiele weergave van de tekst */
  ul.list-catalog li a {
    display: block;
    text-decoration: none;
  }

  /* Verklein de kopjes van de afbeeldingen voor mobiel */
  ul.list-catalog li span {
    font-size: 14px;
  }
  h1, .gui-content-title { font-size: 30px;}
}
/* ===================================================== Eind klantenservice ===================================================== */

#live .material-symbols-outlined {
  font-size: 30px !important;
}

/* Klantenservice - List-btn en categorie knoppen */

[data-whatintent="mouse"] .list-btn a:hover { color:white; ;} .list-btn li { border: 2px solid #d16998; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);} 
@media (min-width:1024px){
  .list-btn li { font-size: 15px; width: 19%; transition: transform 0.3s ease, color 0.3s ease; }
  .list-btn li:hover { background-color: #d16998 !important; color: white; border: 2px solid white; transform:translateY(-2px)}
  .list-btn.a li { width: 15%; }
  .list-btn.a { max-width: none; background: none !important;}
}
.list-btn.a a { background: #FAC2DB; }
.list-btn.a a:hover { color: white;}
[data-whatintent="mouse"] .list-btn a:hover:after { border-color: none; background: none; }
.list-btn li:hover a { color: white; }

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  max-width: 1300px;
  margin: auto;
  padding: 1rem;
}

.image-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.image-grid img:hover {
  transform: scale(1.03);
}

.list-collection.triple h4 { color: #333333; display: flex; align-items: flex-end; flex-direction: row;}
.list-collection.triple h4 .material-symbols-outlined { margin-left: 10px;}
.list-collection.triple :hover .material-symbols-outlined { transform: translateX(2px); color: #d16998;}
.list-collection.triple :hover h4 { color: #d16998; }

.extra-knoppen { display: flex; justify-content: center;}
.buttonklanten {
    display: flex
;
    padding: 5px 20px;
    font-size: 13px;
    color: white;
    background-color: #d16998;
    text-decoration: none;
    border-radius: 13px;
    transition: transform 0.3s ease, color 0.3s ease;
    margin: 25px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    border: 1px solid white;
    Align-items: center;
    justify-content: center;
    width: 250px;
    line-height: 10px;
}
.buttonklanten .material-symbols-outlined {
  padding-left: 10px;
}

@media (max-width: 768px) {
  .extra-knoppen {
    flex-direction: column;
    align-items: center;
  }

  .buttonklanten {
    width: 100%;
    max-width: 90%;
  }
}
@media (max-width:480px){ .buttonklanten {margin: 15px;}}
.buttonklanten:hover {background-color: #f79cbf; transform: translateY(-4px);}

ul.list-catalog.small-images { justify-content: center; }
.openingstijden th .material-symbols-outlined { font-size: 20px !important; padding-left: 10px;}
.openingstijden strong {display: flex; align-items: center; justify-content: center; flex-direction: column-reverse;}

.dmws_p-86c29n4qr-sale-banner-block {
  border: 2px solid white;
}
