/*
Theme Name: Vechtsportwinkel
Theme URI: https://oceanwp.org/
Description: Vechtsportwinkel WordPress theme. Child theme of WPocean
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/
/*
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1160px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1360px;
}
}
*/
@media only screen and (min-width: 960px) {
.content-area, .content-left-sidebar .content-area {
width: calc(100% - 336px) !important;
}
}
.sidebar-container {
max-width: 336px;
box-sizing: border-box;
}
@media only screen and (min-width: 960px) {
body.woocommerce.archive .sidebar-container {
max-height: calc(100vh - 136px);
overflow-y: auto;
overscroll-behavior: contain;
position: sticky;
top: 112px;
}
body.admin-bar.woocommerce.archive .sidebar-container {
max-height: calc(100vh - 168px);
top: 144px;
}
}
/* Parent stylesheet should be loaded from functions.php not using @import */
.wc-block-cart .wc-block-cart__submit-container {
background-color: #b9d531;
color: #fff;
}
span.wc-block-components-button__text {
color: #fff;
}
button.components-button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
background: #b9d531;
colr: #fff;
}
#site-header #site-logo #site-logo-inner a img {
float: left;
}
.page-header-title {
float: left;
}
.page-subheading {
position: absolute !important;
padding-top : 60px;
float: left;
}
#site-header.medium-header .top-col.col-2.top-col.col-2 {
text-align: right;
}
#site-header.medium-header #medium-searchform form {
width: 100%;
border: 1px solid #eaeaea;
}
#site-header.medium-header #medium-searchform label {
color: #b9d531;
-moz-opacity: .8;
-webkit-opacity: .8;
opacity: .8;
}
#site-header.medium-header #medium-searchform input {
max-width: 680px;
}
#footer-widgets .footer-box .widget-title {
color: #b9d531;
}
.site-breadcrumbs.position-under-title, .centered-page-header .site-breadcrumbs, .centered-minimal-page-header .site-breadcrumbs {
position: absolute;
margin-top: -24px;
}
.page-header {
padding-top: 5px;
padding-bottom: 5px;
}
#main #content-wrap {
padding-top: 0;
padding-bottom: 5px;
}
.page-header-title {
font-weight: 700;
}
.amount {
color: #b9d531 !important;
font-weight: 700;
}
.woocommerce div.product div.summary p.in-stock {
margin-top: 4px;
margin-bottom: 10px;
color: #226F54 !important;
font-weight: 700;
}
.woocommerce ul.products li.product .button {
float: none;
display: inline-block;
background-color: #b9d531 !important;
color: #fff !important;
padding: 5px 12px;
border: 3px solid #b9d531 !important;
font-size: 12px;
line-height: 1.5;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
text-transform: none;
}
.woocommerce ul.products li.product .button:hover {
background-color: #226F54 !important;
}
[class*=" si-"],[class^=si-] {
align-self: center;
display: inline-flex;
line-height: 1;
text-rendering: auto;
vertical-align: -.125em;
padding-right: 8px
}
[class*=" si-"]:before,[class^=si-]:before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor
}
.si-minus:before {
--si-icon-path: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 12L20 12'/%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--si-icon-path) no-repeat;
mask: var(--si-icon-path) no-repeat;
mask-size: 100% 100%;
-webkit-mask: var(--si-icon-path) no-repeat;
-webkit-mask-size: 100% 100%
}
.si-minus-circle:before {
--si-icon-path: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12L16 12M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z'/%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--si-icon-path) no-repeat;
mask: var(--si-icon-path) no-repeat;
mask-size: 100% 100%;
-webkit-mask: var(--si-icon-path) no-repeat;
-webkit-mask-size: 100% 100%
}
.si-plus:before {
--si-icon-path: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4L12 20M4 12L20 12'/%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--si-icon-path) no-repeat;
mask: var(--si-icon-path) no-repeat;
mask-size: 100% 100%;
-webkit-mask: var(--si-icon-path) no-repeat;
-webkit-mask-size: 100% 100%
}
.si-plus-circle:before {
--si-icon-path: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12L16 12M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM12 8L12 16'/%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--si-icon-path) no-repeat;
mask: var(--si-icon-path) no-repeat;
mask-size: 100% 100%;
-webkit-mask: var(--si-icon-path) no-repeat;
-webkit-mask-size: 100% 100%
}
ul.unsorted-list {
list-style: none !important;
--li-pl: 0 !important;
margin: 0 !important
}
.page-header.background-image-page-header .page-header-title {
color: #dae3e8 !important;
font-weight: 700;
}
h4 {
text-transform: none !important;
}
/**
* Megamenu columns
*/
.col-2 {
width: 50%;
}
.col-3 {
width: 33.33333333%;
}
.col-4 {
width: 25%;
}
.col-5 {
width: 20%;
}
.col-6 {
width: 16.66666667%;
}
.custom-oil-search-container {
width: auto !important;
max-width: 1400px !important; /* Set your desired width */
margin: 0 auto !important; /* Center the container */
padding: 0 0px !important; /* Add padding if necessary */
}
.oilsearch-container {
width: auto !important;
max-width: 1400px !important; /* Set your desired width */
margin: 0 auto !important; /* Center the container */
padding: 0 0px !important; /* Add padding if necessary */
background-color : #20425e;
}
.selectedtype-container {
width: auto !important;
max-width: 1400px !important; /* Set your desired width */
margin: 0 auto !important; /* Center the container */
padding: 0 0px !important; /* Add padding if necessary */
background-color : #20425e;
color: #fff;
}
.oilsearch-row {
background-color:#20425e;
padding-top: 10px;
padding-bottom: 10px;
position: relative !important; /* Zorgt ervoor dat het element niet sticky is */
top: auto; /* Zorgt ervoor dat het element zich niet meer aan de bovenkant hecht */
}
.woocommerce ul.products li.product li.title h2, .woocommerce ul.products li.product li.title a {
height: 40px;
}
#site-header.medium-header #site-navigation-wrap .dropdown-menu>li>a {
padding: 0 20px !important;
}
img.right-aligned-img.lazyloaded {
float: right !important;
margin-left: 20px; /* Ruimte tussen tekst en afbeelding */
max-width: 150px; /* Beperk de breedte van de afbeelding */
height: auto; /* Zorg ervoor dat de verhoudingen van de afbeelding behouden blijven */
margin-top:-30px;
}
/* Op mobiel: merk-thumbnail compleet verbergen (Mark's keuze 28-05-26). */
@media (max-width: 768px) {
.product_meta .merk-thumbnail {
display: none;
}
}
/* Zorg ervoor dat de merkafbeelding rechts van de meta komt op desktop */
@media (min-width: 769px) {
.product_meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.product_meta .merk-thumbnail {
margin-left: 20px;
display: block;
}
}
/**
.woocommerce.content-full-width div.product div.summary {
width: 54%;
background-color: #dae3e844;
padding-left: 30px;
padding-right: 30px;
}**/
.woocommerce div.product form.cart div.quantity {
background-color: #fff;
}
.product_meta {
padding-top: 0 !important;
}
.merk-thumbnail img {
height: 60px;
width: 60px;
}
#footer-widgets {
padding-top: 20px;
padding-bottom: 20px !important;
}
.nav-content {
display: none;
}
h4.widget-title {
color: #060807;
font-weight: 700;
}
.woocommerce div.product form.cart .variations {
display: inline-flex;
flex-direction: row;
}
/* Zorg ervoor dat de merkafbeelding rechts van de meta komt op desktop */
@media (min-width: 769px) {
.summary.entry-summary {
padding-left: 40px;
}
}
.woocommerce div.product div.summary p.in-stock {
margin-bottom: 0px !important;
color: #226F54 !important;
}
.woocommerce ul.products li.product .woo-entry-inner li.image-wrap {
margin: 0px !important;
}
li.product li.title a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Limit to 2 lines */
overflow: hidden;
font-family: inherit;
font-size: 14px;
line-height: 1.3; /* Adjust this based on your design */
max-height: calc(1.5em * 3); /* line-height * 2 lines */
color: #333;
}
.usp-wrapper {
padding-bottom: 20px;
}
.kiyoh-wrapper {
background-color: white;
text-align: left;
font-size: 12px;
font-weight: 700;
padding: 10px;
display: inline-block;
}
.kiyoh-rating {
color: #070707;
font-size: 12px;
font-weight: 700;
position: relative;
}
.stars-container {
display: inline-block;
position: relative;
line-height: 1;
margin-right: 8px;
width: 100px; /* Adjust width to fit 5 stars */
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 20px 20px;
background-repeat: repeat-x;
}
.stars-bar {
display: inline-block;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 20px 20px;
background-repeat: repeat-x;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.rating-number {
font-size: 12px;
color: #070707;
font-weight: 700;
}
.review-additional {
font-size: 12px;
color: #070707;
font-weight: 700;
margin-top: 5px;
}
#site-header.medium-header .oceanwp-social-menu .social-menu-inner {
display: flex !important;
}
#site-header.medium-header .top-col {
/* border-right: solid 1px #eaeaea; */
margin-right: 20px;
}
#site-header.medium-header .top-header-wrap {
padding: 12px 0 !important;
}
img.webwinkelkeur-header.alignnone.wp-image-629638.size-full {
border-right: 1px solid #eaeaea;
/* margin-block: 20px; */
padding-right: 20px;
}
.customer-reviews {
background-color: #f9f9f9;
padding: 20px;
text-align: center;
}
.overall-rating {
margin-bottom: 30px;
}
.average-score {
display: inline-block;
text-align: center;
}
.average-score .score {
font-size: 48px;
font-weight: bold;
}
.stars {
background: url('path-to-gray-star.svg') repeat-x;
height: 24px;
width: 120px;
position: relative;
}
.stars .star-bar {
background: url('path-to-yellow-star.svg') repeat-x;
height: 24px;
position: absolute;
top: 0;
left: 0;
}
.customer-reviews {
background-color: #f9f9f9;
padding: 20px;
text-align: center;
}
.overall-rating {
margin-bottom: 30px;
}
.average-score {
display: inline-block;
text-align: center;
}
.average-score .score {
font-size: 48px;
font-weight: bold;
}
.stars {
background: url('path-to-gray-star.svg') repeat-x;
height: 24px;
width: 120px;
position: relative;
}
.stars .star-bar {
background: url('path-to-yellow-star.svg') repeat-x;
height: 24px;
position: absolute;
top: 0;
left: 0;
}
.customer-reviews {
background-color: #f9f9f9;
padding: 20px;
text-align: center;
}
.overall-rating {
margin-bottom: 30px;
}
.average-score {
display: inline-block;
text-align: center;
}
.average-score .score {
font-size: 48px;
font-weight: bold;
}
.stars {
background: url('path-to-gray-star.svg') repeat-x;
height: 24px;
width: 120px;
position: relative;
}
.stars .star-bar {
background: url('path-to-yellow-star.svg') repeat-x;
height: 24px;
position: absolute;
top: 0;
left: 0;
}
.blog-post-author-content {
display: none;
}
/** REVIEWS **/
.customer-reviews {
background-color: #f9f9f9;
padding: 40px;
text-align: center;
}
.overall-rating {
margin-bottom: 40px;
}
.average-score {
display: inline-block;
text-align: center;
}
.average-score .score {
font-size: 48px;
font-weight: bold;
}
.stars {
background: url('path-to-gray-star.svg') repeat-x;
height: 24px;
width: 120px;
position: relative;
}
.stars .star-bar {
background: url('path-to-yellow-star.svg') repeat-x;
height: 24px;
position: absolute;
top: 0;
left: 0;
}
.review-cards {
display: flex;
gap: 20px;
justify-content: center;
}
.review-card {
background-color: white;
padding: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
width: 220px;
text-align: left;
border-radius: 8px;
}
.review-score {
font-size: 24px;
font-weight: bold;
background-color: black;
color: white;
padding: 5px 10px;
border-radius: 3px;
display: inline-block;
margin-bottom: 10px;
}
.review-stars {
font-size: 18px;
margin-bottom: 10px;
}
.review-meta {
font-size: 12px;
color: #666;
}
.woocommerce .oceanwp-grid-list a {
color: #090909 !important;
}
.woocommerce .result-count {
color: #090909 !important;
}
.woocommerce .result-count li.view-title {
color: #090909 !important;
}
.woocommerce .result-count li a {
color: #090909 !important;
}
.irs-grid-text {
color: #090909 !important;
}
.pf_rngstyle_flat .irs-from, .pf_rngstyle_flat .irs-to, .pf_rngstyle_flat .irs-single {
background: #090909 !important;
color: #fff !important;
}
#footer-widgets .col {
margin-bottom: 0px !important;
}
.owl-carousel .owl-item img {
display: inline;
width: auto !important;
max-height: 200px !important;
vertical-align: middle;
text-align: center;
}
.content-left-sidebar .content-area {
padding-left: 22px;
}
.woocommerce span.onsale {
top: 0.5rem !important;
left: 0.1rem !important;
}
/* Header bevat alleen logo - irritant */
@media (max-width: 768px) {
#site-header.medium-header .top-header-wrap {
padding: 10px 0;
}}
ul#shipping_method li label {
padding-left: 0px !important;
color: #090909 !important;
font-size: 15px !important;
letter-spacing: 0px !important;
}
b, strong {
font-weight: 700;
font-style: bold;
}
.outofstock-badge {
display: none;
}
li.wc_payment_method.payment_method_klarna_payments_pay_now {
display: none;
}
.woocommerce-form-coupon-toggle {
display: none;
}
#site-header.medium-header .top-header-wrap {
padding:10px 0 !important;
}
@media (max-width: 767px) {
.page-header .page-header-title,
.page-header.background-image-page-header .page-header-title {
font-size: 24px;
}
}
#site-header.medium-header #medium-searchform input:focus {
max-width : 100% !important;
}
ul.usps-footer {
margin: 0px !important;
}
menulink-content.lang {
width: 240px !important;
}
.menulink-wrp .container {
max-width: 1200px;
max-width: 90%;
margin: 0 auto;
}
.menulink-wrp .menulink-block {
padding: 65px 0 145px;
}
.menulink-wrp .menulink-block .row {
justify-content: space-between;
}
.menulink-wrp .menulink-block .row .col-md-3 {
width: fit-content;
}
.menulink-wrp .information-block {
padding: 0px 0;
background: linear-gradient(90deg, #b9d531 0%, #8cc63f 100%);
padding: 10px 0;
}
.menulink-wrp .information-block ul {
display: flex;
align-items: center;
justify-content: space-between;
list-style-type: none !important;
margin: 0px;
}
.menulink-wrp .information-block ul li {
display: flex;
align-items: center;
}
.menulink-wrp .information-block ul li .box-icon {
margin-right: 12px;
}
.menulink-wrp .information-block ul li .box-icon img {
max-width: 100%;
}
.menulink-wrp .information-block ul li .menulink-content {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
margin: 0;
text-transform: uppercase;
color: #060807;
}
.menulink-wrp .information-block ul li .menulink-content span {
display: block;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.5px;
text-align: left;
}
@media (max-width: 767px) {
.menulink-wrp .container{max-width: 540px;padding: 0 20px;}
.menulink-wrp .information-block { padding: 25px 0;}
.menulink-wrp .information-block{padding: 25px 0;}
.menulink-wrp .information-block ul {flex-wrap: wrap;list-style-type: none !important;}
.menulink-wrp .information-block ul li{margin: 0 0 20px;width: 100%;list-style-type: none !important;}
.menulink-wrp .information-block ul li:last-child{margin: 0}
.menulink-wrp .information-block ul li .box-icon{width: 46px;margin-right: 10px;min-width: 46px;}
.menulink-wrp .information-block ul li .box-icon img{margin: 0 auto;}
.menulink-wrp .information-block ul li .menulink-content{font-size: 12px;}
.menulink-wrp .information-block ul li .menulink-content span{text-align: left;}
}
.single-product .price, .products>.product .price, .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
color: #060807;
font-size: 32px;
line-height: 0.8em;
font-weight: 700;
margin-bottom: 0em;
font-family: 'Price', Sans Serif;
}
.wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
color: #060807;
line-height: 0.8em;
font-weight: 700;
margin-bottom: 0em;
font-family: 'Price', Sans Serif;
}
@font-face {
font-family: 'Price';
src: url(/fonts/price.woff2) format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}
.price, .price .amount, .amount, .decimal, .price ins {
font-family: "Price", Arial, Helvetica, sans-serif;
color: #060807;
font-style: normal;
font-weight: 700;
}
/* Prijzen altijd zwart (merk: bedragen niet in primair groen #b7d432).
OceanWP zet de primaire kleur op de prijs/.amount; hier dwingen we zwart af,
ook op de salesprijs (ins) en in de sitezilla productsliders. */
.woocommerce .price, .woocommerce .price .amount, .woocommerce .price ins,
.woocommerce .price ins .amount,
.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price ins, .woocommerce ul.products li.product .price ins .amount,
.woocommerce div.product .price, .woocommerce div.product .price .amount,
.woocommerce div.product .price ins, .woocommerce div.product .price ins .amount,
.sz-product-card__price, .sz-product-card__price ins, .sz-product-card__price ins .amount,
.sz-product-card__price .amount, .sz-product-card__price .woocommerce-Price-amount,
.sz-product-card__price bdi {
color: #060807 !important;
}
#site-header.medium-header #site-navigation-wrap.left-menu #site-navigation {
left: 0;
}
/**
* Beperk product titels tot 3 regels met ellipsis
* Voeg dit toe aan Customizer > Custom CSS
*/
/* Moderne browsers - Beste oplossing */
.woocommerce ul.products li.product li.title h2, .woocommerce ul.products li.product li.title a {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.woocommerce ul.products li.product li.title h2,
.woocommerce ul.products li.product li.title a {
font-size: 14px;
line-height: 1.5;
font-weight: 700;
min-height: 4.5em;
display: block; /* Belangrijk voor de truncate */
}
/* Zorg dat de link de volledige breedte gebruikt */
.woocommerce ul.products li.product li.title h2 a {
color: inherit;
text-decoration: none;
}
/* Hover effect */
.woocommerce ul.products li.product li.title h2 a:hover {
text-decoration: underline;
}
/* Fallback voor oudere browsers */
@supports not (-webkit-line-clamp: 3) {
.woocommerce ul.products li.product li.title {
max-height: 4.5em; /* 3 regels x 1.5 line-height */
overflow: hidden;
position: relative;
}
/* Fade-out effect voor oudere browsers */
.woocommerce ul.products li.product li.title:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 20px;
background: linear-gradient(to right, transparent, white 50%);
}
}
.page-header .page-header-title, .page-header.background-image-page-header .page-header-title, .woocommerce ul.products li.product li.title h2, .woocommerce ul.products li.product li.title a {
letter-spacing: -0.04em;
}
h1, h2, h3, h4, h5, h6, .theme-heading, .widget-title, .oceanwp-widget-recent-posts-title, .comment-reply-title, .entry-title, .sidebar-box .widget-title, h1, h2, h3, h4, h5, h6, .theme-heading, .widget-title, .oceanwp-widget-recent-posts-title, .comment-reply-title, .entry-title, .sidebar-box .widget-title {
letter-spacing: -0.04em;
}
.sidebar-box .widget-title, .sidebar-box.widget_block .wp-block-heading, h1, h2, h3, h4, h5, h6, .theme-heading, .widget-title, .oceanwp-widget-recent-posts-title, .comment-reply-title, .entry-title, .sidebar-box .widget-title, .blog-entry.post .blog-entry-header .entry-title a {
letter-spacing: -0.04em !important;
}
.single-header-ocean-3 .single-post-title {
color: #fff;
font-size: 50px;
margin: 0 0 60px;
text-transform: none !important;
letter-spacing: -0.04em !important;
}
.woocommerce-page .quantity .qty, .woocommerce-page .quantity .minus, .woocommerce-page .quantity .plus {
width: 30px !important;
min-height: 38px !important;
}
.woocommerce-variation-add-to-cart .quantity .qty {
margin: 0px !important;
font-size : 14px;
font-weight : 700;
}
/* Variable-product cart row: kleinere tussenruimte en add-to-cart pakt
de volle resterende breedte.
oceanwp-cro-tweaks/style.css zet `margin-right: 40px !important` op
.woocommerce div.product .quantity — die moeten we wegrukken, anders
blijft die 40px naast de `gap` staan.
Diezelfde file zet `align-items: flex-start` op form.variations_form,
waardoor .single_variation_wrap krimpt tot zijn content-breedte ipv
100% van de summary-kolom te pakken — vandaar de align-self stretch. */
body.single-product form.variations_form.cart > .single_variation_wrap {
align-self: stretch;
width: 100%;
}
body.single-product .woocommerce-variation-add-to-cart {
gap: 8px !important;
}
body.single-product .woocommerce-variation-add-to-cart > .quantity,
body.single-product .woocommerce div.product .woocommerce-variation-add-to-cart > .quantity {
flex: 0 0 auto !important;
margin-right: 0 !important;
}
body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
flex: 1 1 auto !important;
max-width: none !important;
text-align: center;
width: auto !important;
}
.woocommerce ul.products li.product .woo-entry-image {
text-align: center;
}
.woocommerce ul.products li.product .woo-entry-image a {
display: inline-block;
}
.woocommerce ul.products li.product .woo-entry-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
.woocommerce div.product div.summary .price del {
font-size: 18px;
color: #ccc;
}
.woocommerce del {
-moz-opacity: .3;
-webkit-opacity: .3;
opacity: .3;
}
del bdi {
color: #060807;
}
/* Productafbeelding centreren */
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
text-align: center;
}
.single-product .woocommerce-product-gallery__image a {
display: flex;
justify-content: center;
align-items: center;
}
.single-product .woocommerce-product-gallery__image img {
display: block;
margin: 0 auto;
max-width: 700px;
width: 100%;
height: auto;
}
.woocommerce div.product form.cart .variations .reset_variations {
display: none;
}
#site-header.medium-header .top-col {
-webkit-flex: 0 0 auto !important;
flex: 0 0 auto !important;
margin-right : 0px !important;
}
#site-header.medium-header .top-col.col-2.top-col.col-2 {
text-align: right;
padding-left: 20px;
padding-right: 20px;
}
#site-header.medium-header .top-header-inner {
display: flex !important;
align-items: center;
gap: 20px;
}
#site-header.medium-header .top-header-inner .logo-col {
-webkit-flex: 0 0 auto !important;
flex: 0 0 auto !important;
}
#site-header.medium-header .top-col.col-2.top-col.col-2 {
-webkit-flex: 1 1 auto !important;
flex: 1 1 auto !important;
min-width: 0;
padding-left: 0;
padding-right: 0;
width: auto !important;
}
#site-header.medium-header .top-col-3 {
margin-left: auto !important;
display: flex !important;
-webkit-flex: 0 0 auto !important;
flex: 0 0 auto !important;
justify-content: flex-end !important;
}
#site-header.medium-header .oceanwp-social-menu {
display: flex !important;
justify-content: flex-end !important;
}
#site-header.medium-header .oceanwp-social-menu .social-menu-inner {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
#footer-widgets {
position: relative !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
#footer-widgets .footer-box.col-4 {
position: static !important;
min-height: 260px !important;
overflow: visible !important;
}
#footer-widgets .footer-poppetje {
position: absolute !important;
right: 165px !important;
bottom: 0 !important;
height: 180px !important;
width: auto !important;
display: block !important;
z-index: 5 !important;
}
.woocommerce ul.products li.product .woo-entry-image, .woocommerce ul.products li.product .product-entry-slider-wrap, .woocommerce ul.products li.product .woo-entry-image a, .woocommerce ul.products li.product .woo-entry-image a {
mix-blend-mode: darken;
background-color: oklch(96% 0 0);
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
max-width : 100%;
width : auto;
max-height: 100%;
height : auto;
}
.woocommerce ul.products li.product .price-wrap .price {
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
}
.woocommerce ul.products li.product .price-wrap .price small {
float: none !important;
font-size: 12px !important;
color: #060807 !important;
order: 2;
}
#site-header.medium-header #medium-searchform form {
width: 100%;
border: 1px solid #eaeaea;
background-color: transparent;
border-radius: 20;
border-color: #eaeaea;
-webkit-box-shadow: 0 0 0 0.0625rem #eaeaea !important;
box-shadow: 0 0 0 0.0625rem #eaeaea !important;
}
#site-header.medium-header #medium-searchform .search-bg {
background-color: transparent;
}
#site-header.medium-header #medium-searchform button {
background-color: #b9d531;
color: #fff !important;
border-radius: 6px;
}
#site-header.medium-header #medium-searchform form,
#site-header.medium-header #medium-searchform form input {
border-radius: 9px;
}
/**
* WooCommerce archive sidebar filters
*/
.woocommerce .term-description {
margin-bottom: 10px !important;
}
body.woocommerce.archive .sidebar-container {
color: #111;
font-family: Poppins, sans-serif;
}
body.woocommerce.archive .sidebar-container .sidebar-box {
border: 0;
border-bottom: 1px solid #e2e2e2;
margin: 0;
padding: 0;
}
body.woocommerce.archive .sidebar-container .sidebar-box:last-child {
border-bottom: 0;
}
body.woocommerce.archive .sidebar-container .widget-title,
body.woocommerce.archive .sidebar-container .prdctfltr_widget_title {
align-items: center;
border: 0 !important;
color: #111 !important;
display: flex;
font-family: Poppins, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
justify-content: space-between;
letter-spacing: .6px !important;
line-height: 1.2 !important;
margin: 0 !important;
min-height: 52px;
padding: 0 !important;
text-transform: uppercase !important;
}
body.woocommerce.archive .sidebar-container .widget-title:before,
body.woocommerce.archive .sidebar-container .widget-title:after {
content: none !important;
display: none !important;
}
body.woocommerce.archive .sidebar-container .product-categories {
list-style: none;
margin: -2px 0 18px;
padding: 0;
}
body.woocommerce.archive .sidebar-container .product-categories li {
border: 0;
list-style: none;
margin: 0;
padding: 0;
}
body.woocommerce.archive .sidebar-container .product-categories li:before {
content: none !important;
display: none !important;
}
body.woocommerce.archive .sidebar-container .product-categories a {
align-items: center;
color: #b9d531;
display: flex;
font-size: 13px;
line-height: 1.35;
min-height: 30px;
text-decoration: none;
}
body.woocommerce.archive .sidebar-container .product-categories a:hover,
body.woocommerce.archive .sidebar-container .product-categories .current-cat > a {
color: #111;
}
body.woocommerce.archive .sidebar-container .prdctfltr_wc,
body.woocommerce.archive .sidebar-container .prdctfltr_filter_wrapper,
body.woocommerce.archive .sidebar-container .prdctfltr_filter_inner {
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce.archive .sidebar-container .prdctfltr_filter {
border-bottom: 1px solid #e2e2e2;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce.archive .sidebar-container .prdctfltr_filter:last-child {
border-bottom: 0;
}
body.woocommerce.archive .sidebar-container .prdctfltr_filter.vsw-filter-is-hidden {
display: none !important;
}
body.woocommerce.archive .sidebar-container .vsw-filter-is-hidden-option {
display: none !important;
}
body.woocommerce.archive .sidebar-container .pf-help-title {
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce.archive .sidebar-container .pf-help-title .widget-title {
cursor: pointer;
}
body.woocommerce.archive .sidebar-container .prdctfltr-down {
color: #111;
margin-left: auto;
}
body.woocommerce.archive .sidebar-container .prdctfltr_add_scroll {
margin: 0 0 18px !important;
max-height: 260px;
}
body.woocommerce.archive .sidebar-container .prdctfltr_checkboxes {
margin: -2px 0 0 !important;
padding: 0 !important;
}
body.woocommerce.archive .sidebar-container .prdctfltr_checkboxes label {
align-items: center;
color: #3d3d3d;
display: flex !important;
font-size: 13px;
font-weight: 400;
line-height: 1.35;
margin: 0 !important;
min-height: 30px;
padding: 0 !important;
}
body.woocommerce.archive .sidebar-container .prdctfltr_checkboxes label:hover,
body.woocommerce.archive .sidebar-container .prdctfltr_checkboxes label.prdctfltr_active {
color: #111;
}
body.woocommerce.archive .sidebar-container .prdctfltr_checkboxes input[type="checkbox"] {
accent-color: #b9d531;
flex: 0 0 auto;
margin: 0 10px 0 0;
}
body.woocommerce.archive .sidebar-container .prdctfltr_customize {
color: inherit;
}
body.woocommerce.archive .sidebar-container .prdctfltr_customize_select {
align-items: center;
background: transparent !important;
border: 0 !important;
color: inherit;
display: inline-flex;
padding: 0 !important;
}
body.woocommerce.archive .sidebar-container .prdctfltr_customize_name {
color: inherit;
}
@media only screen and (min-width: 960px) {
body.woocommerce.archive .sidebar-container {
background: #fff;
border-right: 1px solid #e2e2e2;
box-sizing: border-box;
max-height: calc(100vh - 136px);
overflow-y: auto;
overscroll-behavior: contain;
padding-left: 28px;
padding-right: 28px;
scrollbar-color: #b7b7b7 transparent;
scrollbar-width: thin;
}
body.admin-bar.woocommerce.archive .sidebar-container {
max-height: calc(100vh - 168px);
}
body.woocommerce.archive .sidebar-container::-webkit-scrollbar {
width: 6px;
}
body.woocommerce.archive .sidebar-container::-webkit-scrollbar-thumb {
background: #b7b7b7;
}
}
/**
* Product category descriptions
*/
body.woocommerce.archive .woocommerce-products-header .term-description.vsw-term-description {
max-height: none;
overflow: hidden;
position: relative;
transition: max-height .24s ease;
}
body.woocommerce.archive .woocommerce-products-header .term-description.vsw-term-description.is-collapsed {
max-height: var(--vsw-term-description-height, 68px);
}
body.woocommerce.archive .woocommerce-products-header .term-description.vsw-term-description.is-collapsed:after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
bottom: 0;
content: "";
height: 34px;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
}
body.woocommerce.archive .vsw-term-description-toggle {
align-items: center;
background: #111;
border: 1px solid #111;
border-radius: 0;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: Poppins, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .6px;
line-height: 1;
margin: 8px 0 18px;
min-height: 36px;
padding: 0 16px;
text-transform: uppercase;
}
body.woocommerce.archive .vsw-term-description-toggle:hover {
background: #b9d531;
border-color: #b9d531;
}
body.woocommerce.archive .vsw-category-long-description-section {
background: #fff;
border-top: 1px solid #e5e5e5;
margin-top: 36px;
padding: 40px 0 18px;
width: 100%;
}
body.woocommerce.archive .vsw-category-long-description-section .category-long-description {
max-width: none;
width: 100%;
}
body.woocommerce.archive .vsw-category-long-description-section .category-long-description h2,
body.woocommerce.archive .vsw-category-long-description-section .category-long-description h3 {
margin-top: 24px;
}
/**
* WooCommerce archive product cards
*/
body.woocommerce.archive ul.products li.product {
overflow: visible;
}
body.woocommerce.archive ul.products {
column-gap: 20px !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-left: 0 !important;
margin-right: 0 !important;
row-gap: 32px !important;
}
body.woocommerce.archive ul.products:before,
body.woocommerce.archive ul.products:after {
content: none !important;
display: none !important;
}
body.woocommerce.archive ul.products li.product {
clear: none !important;
float: none !important;
margin: 0 !important;
width: auto !important;
}
body.woocommerce.archive ul.products li.product .product-inner > .woo-entry-image:not(.vsw-product-image) {
display: none !important;
}
@media only screen and (max-width: 959px) {
body.woocommerce.archive ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only screen and (max-width: 767px) {
body.woocommerce.archive ul.products {
grid-template-columns: minmax(0, 1fr);
row-gap: 24px !important;
}
}
body.woocommerce.archive ul.products li.product .product-inner {
background: #f4f4f4;
background: oklch(96% 0 0);
border: 0;
height: 100%;
overflow: hidden;
position: relative;
transition: box-shadow .2s ease, transform .2s ease;
}
body.woocommerce.archive ul.products li.product .product-inner:hover {
box-shadow: 0 16px 34px rgba(0, 0, 0, .08);
transform: translateY(-2px);
}
body.woocommerce.archive ul.products li.product .woo-entry-inner {
background: #fff;
border: 2px solid #f4f4f4;
/* background: oklch(96% 0 0); */
/* background: #f4f4f4;
background: oklch(96% 0 0); */
display: grid;
grid-template-areas:
"image image"
"title title"
"sizes sizes"
"price brand"
"button button";
grid-template-columns: minmax(0, 1fr) auto;
height: 100%;
margin: 0;
padding: 0 16px 18px;
position: relative;
}
body.woocommerce.archive ul.products li.product .woo-entry-inner li {
margin-bottom: 0 !important;
}
body.woocommerce.archive ul.products li.product .woo-entry-inner li.image-wrap {
background: #f4f4f4;
background: oklch(96% 0 0);
grid-area: image;
margin: 0 -16px 14px !important;
overflow: hidden;
padding: 0 !important;
position: relative;
}
body.woocommerce.archive ul.products li.product .woo-entry-image,
body.woocommerce.archive ul.products li.product .product-entry-slider-wrap,
body.woocommerce.archive ul.products li.product .woo-entry-image a {
background: #f4f4f4;
background: oklch(96% 0 0);
display: block;
height: auto;
max-height: none;
max-width: none;
mix-blend-mode: normal;
padding: 0;
position: relative;
width: 100%;
}
body.woocommerce.archive ul.products li.product .vsw-product-image {
aspect-ratio: 1 / 1 !important;
background: #f4f4f4 !important;
background: oklch(96% 0 0) !important;
overflow: hidden !important;
--vsw-product-image-inset: 0px;
}
body.woocommerce.archive ul.products li.product .woo-entry-image a,
body.woocommerce.archive ul.products li.product .vsw-product-image > a.woocommerce-LoopProduct-link {
aspect-ratio: 1 / 1 !important;
background: #f4f4f4 !important;
background: oklch(96% 0 0) !important;
display: block !important;
height: 100% !important;
width: 100% !important;
line-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
position: relative !important;
}
body.woocommerce.archive ul.products li.product .vsw-product-main-image,
body.woocommerce.archive ul.products li.product .vsw-product-hover-image {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
display: block !important;
bottom: var(--vsw-product-image-inset) !important;
height: auto !important;
left: var(--vsw-product-image-inset) !important;
mix-blend-mode: darken;
opacity: 1 !important;
position: absolute !important;
right: var(--vsw-product-image-inset) !important;
top: var(--vsw-product-image-inset) !important;
width: auto !important;
transition: opacity .22s ease, transform .22s ease;
}
body.woocommerce.archive ul.products li.product .vsw-product-main-image {
opacity: 1 !important;
z-index: 1 !important;
}
body.woocommerce.archive ul.products li.product .vsw-product-hover-image {
opacity: 0 !important;
pointer-events: none;
z-index: 2 !important;
}
body.woocommerce.archive ul.products li.product .product-inner:hover .has-hover-image .vsw-product-main-image {
opacity: 0 !important;
}
body.woocommerce.archive ul.products li.product .product-inner:hover .has-hover-image .vsw-product-hover-image {
opacity: 1 !important;
transform: scale(1.015);
}
body.woocommerce.archive ul.products li.product .product-inner:hover .no-hover-image .vsw-product-main-image {
opacity: 1 !important;
transform: scale(1.025);
}
body.woocommerce.archive ul.products li.product .vsw-product-image img {
display: none !important;
}
/**
* Single product related product cards
*/
body.single-product :is(.related.products, .upsells.products) ul.products {
column-gap: 20px !important;
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
margin-left: 0 !important;
margin-right: 0 !important;
row-gap: 32px !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products:before,
body.single-product :is(.related.products, .upsells.products) ul.products:after {
content: none !important;
display: none !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product {
clear: none !important;
float: none !important;
margin: 0 !important;
overflow: visible;
width: auto !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .product-inner > .woo-entry-image:not(.vsw-product-image) {
display: none !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .product-inner {
background: #f4f4f4;
background: oklch(96% 0 0);
border: 0;
height: 100%;
overflow: hidden;
position: relative;
transition: box-shadow .2s ease, transform .2s ease;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .product-inner:hover {
box-shadow: 0 16px 34px rgba(0, 0, 0, .08);
transform: translateY(-2px);
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .woo-entry-inner {
background: #f4f4f4;
background: oklch(96% 0 0);
display: grid;
grid-template-areas:
"image image"
"title title"
"sizes sizes"
"price brand"
"button button";
grid-template-columns: minmax(0, 1fr) auto;
height: 100%;
margin: 0;
padding: 0 16px 18px;
position: relative;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .woo-entry-inner li {
/* margin-bottom: 0 !important; */
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .woo-entry-inner li.image-wrap {
background: #f4f4f4;
background: oklch(96% 0 0);
grid-area: image;
margin: 0 -16px 14px !important;
overflow: hidden;
padding: 0 !important;
position: relative;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .woo-entry-image,
body.single-product :is(.related.products, .upsells.products) ul.products li.product .product-entry-slider-wrap,
body.single-product :is(.related.products, .upsells.products) ul.products li.product .woo-entry-image a {
background: #f4f4f4;
background: oklch(96% 0 0);
display: block;
height: auto;
max-height: none;
max-width: none;
mix-blend-mode: normal;
padding: 0;
position: relative;
width: 100%;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-image {
aspect-ratio: 1 / 1 !important;
background: #f4f4f4 !important;
background: oklch(96% 0 0) !important;
overflow: hidden !important;
--vsw-product-image-inset: 0px;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .woo-entry-image a,
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-image > a.woocommerce-LoopProduct-link {
aspect-ratio: 1 / 1 !important;
background: #f4f4f4 !important;
background: oklch(96% 0 0) !important;
display: block !important;
height: 100% !important;
line-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
position: relative !important;
width: 100% !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-main-image,
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-hover-image {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
bottom: var(--vsw-product-image-inset) !important;
display: block !important;
height: auto !important;
left: var(--vsw-product-image-inset) !important;
mix-blend-mode: darken;
opacity: 1 !important;
position: absolute !important;
right: var(--vsw-product-image-inset) !important;
top: var(--vsw-product-image-inset) !important;
transition: opacity .22s ease, transform .22s ease;
width: auto !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-main-image {
opacity: 1 !important;
z-index: 1 !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-hover-image {
opacity: 0 !important;
pointer-events: none;
z-index: 2 !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .product-inner:hover .has-hover-image .vsw-product-main-image {
opacity: 0 !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .product-inner:hover .has-hover-image .vsw-product-hover-image {
opacity: 1 !important;
transform: scale(1.015);
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .product-inner:hover .no-hover-image .vsw-product-main-image {
opacity: 1 !important;
transform: scale(1.025);
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-image img {
display: none !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-sizes {
display: flex;
gap: 8px;
grid-area: sizes;
margin: 0 0 10px 0 !important;
min-height: 22px;
overflow-x: auto;
padding: 0 0 2px !important;
scrollbar-width: none;
white-space: nowrap;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-sizes::-webkit-scrollbar {
display: none;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-sizes span {
align-items: center;
border: 1px solid #cfcfcf;
border-radius: 999px;
color: #333;
display: inline-flex;
flex: 0 0 auto;
font-size: 11px;
font-weight: 500;
height: 18px;
justify-content: center;
line-height: 1;
min-width: 18px;
padding: 0 6px;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-sizes .vsw-product-sizes__more {
border-color: transparent;
color: #777;
padding: 0;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-brand-wrap {
align-self: end;
grid-area: brand;
justify-self: end;
margin: 0 !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-brand {
align-items: right;
/* background: #fff; */
display: inline-flex;
/* height: 34px; */
justify-content: center;
/* min-width: 54px; */
padding: 0px;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-brand img {
display: block;
height: auto;
max-height: 22px;
max-width: 64px;
object-fit: contain;
width: auto;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .vsw-product-brand--text {
color: #111;
font-size: 10px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product li.title {
grid-area: title;
margin: 0 0 8px 0 !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product li.title h2,
body.single-product :is(.related.products, .upsells.products) ul.products li.product li.title h4,
body.single-product :is(.related.products, .upsells.products) ul.products li.product li.title a {
color: #111;
font-size: 14px;
font-weight: 800;
/* letter-spacing: 0 !important; */
line-height: 1.25;
text-transform: uppercase;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .price-wrap {
align-self: end;
grid-area: price;
margin: 0 12px 0 0 !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .price-wrap .price,
body.single-product :is(.related.products, .upsells.products) ul.products li.product .price-wrap .amount {
color: #111 !important;
font-size: 22px;
line-height: 1;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .price-wrap .woocommerce-Price-currencySymbol {
display: none;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .price-wrap del .amount {
font-size: 16px;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .btn-wrap {
grid-area: button;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .button {
background: #111 !important;
border-color: #111 !important;
color: #fff !important;
margin-top: 10px;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .button:hover {
background: #b9d531 !important;
border-color: #b9d531 !important;
}
@media only screen and (max-width: 959px) {
body.single-product :is(.related.products, .upsells.products) ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only screen and (max-width: 767px) {
body.single-product :is(.related.products, .upsells.products) ul.products {
grid-template-columns: minmax(0, 1fr);
row-gap: 24px !important;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .woo-entry-inner {
padding: 0 14px 16px;
}
body.single-product :is(.related.products, .upsells.products) ul.products li.product .woo-entry-inner li.image-wrap {
margin-left: -14px !important;
margin-right: -14px !important;
}
}
/**
* Vechtsportwinkel price range filter
*/
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price {
padding-bottom: 18px !important;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .prdctfltr_add_scroll,
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .prdctfltr_checkboxes {
margin: 0 !important;
overflow: visible !important;
padding: 0 !important;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs,
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs--flat {
font-family: Poppins, sans-serif;
height: 56px;
margin-top: 2px;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-line,
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-bar {
border-radius: 0;
height: 6px;
top: 30px;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-line {
background: #e6e6e6;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-bar {
background: #b9d531;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-handle {
background: #fff;
border: 2px solid #b9d531;
border-radius: 50%;
box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
height: 18px;
top: 24px;
width: 18px;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-handle > i:first-child {
display: none;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-from,
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-to,
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-single {
background: #111;
border-radius: 3px;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
padding: 5px 7px;
top: 0;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-from:before,
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-to:before,
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-single:before {
border-top-color: #111;
}
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-min,
body.woocommerce.archive .sidebar-container .prdctfltr_rng_price .irs-max {
background: transparent;
color: #777;
font-size: 10px;
top: 42px;
}
body.woocommerce.archive ul.products li.product .vsw-product-sizes {
display: flex;
gap: 8px;
grid-area: sizes;
margin: 0 0 10px 0 !important;
min-height: 22px;
overflow-x: auto;
padding: 0 0 2px !important;
scrollbar-width: none;
white-space: nowrap;
}
body.woocommerce.archive ul.products li.product .vsw-product-sizes::-webkit-scrollbar {
display: none;
}
body.woocommerce.archive ul.products li.product .vsw-product-sizes span {
align-items: center;
border: 1px solid #cfcfcf;
border-radius: 999px;
color: #333;
display: inline-flex;
flex: 0 0 auto;
font-size: 11px;
font-weight: 500;
height: 18px;
justify-content: center;
line-height: 1;
min-width: 18px;
padding: 0 6px;
}
body.woocommerce.archive ul.products li.product .vsw-product-sizes .vsw-product-sizes__more {
border-color: transparent;
color: #777;
padding: 0;
}
body.woocommerce.archive ul.products li.product .vsw-product-brand-wrap {
align-self: end;
grid-area: brand;
margin: 0 !important;
justify-self: end;
}
body.woocommerce.archive ul.products li.product .vsw-product-brand {
align-items: center;
background: #fff;
display: inline-flex;
height: 34px;
justify-content: center;
min-width: 54px;
/* padding: 6px 8px; */
}
body.woocommerce.archive ul.products li.product .vsw-product-brand img {
display: block;
height: auto;
max-height: 48px;
max-width: 64px;
object-fit: contain;
width: auto;
}
body.woocommerce.archive ul.products li.product .vsw-product-brand--text {
color: #111;
font-size: 10px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
}
body.woocommerce.archive ul.products li.product li.title {
grid-area: title;
margin: 0 0 8px 0 !important;
}
body.woocommerce.archive ul.products li.product li.title h2,
body.woocommerce.archive ul.products li.product li.title h4,
body.woocommerce.archive ul.products li.product li.title a {
color: #111;
font-size: 14px;
font-weight: 800;
letter-spacing: 0 !important;
line-height: 1.25;
min-height: 0;
text-transform: uppercase;
}
body.woocommerce.archive ul.products li.product li.title a {
-webkit-line-clamp: 2;
}
body.woocommerce.archive ul.products li.product .price-wrap {
align-self: end;
grid-area: price;
margin: 0 12px 0 0 !important;
}
body.woocommerce.archive ul.products li.product .price-wrap .price,
body.woocommerce.archive ul.products li.product .price-wrap .amount {
color: #111 !important;
font-size: 22px;
line-height: 1;
}
body.woocommerce.archive ul.products li.product .price-wrap .woocommerce-Price-currencySymbol {
display: none;
}
body.woocommerce.archive ul.products li.product .price-wrap del .amount {
font-size: 16px;
}
body.woocommerce.archive ul.products li.product .button {
background: #111 !important;
border-color: #111 !important;
color: #fff !important;
margin-top: 10px;
}
body.woocommerce.archive ul.products li.product .btn-wrap {
grid-area: button;
}
body.woocommerce.archive ul.products li.product .button:hover {
background: #b9d531 !important;
border-color: #b9d531 !important;
}
body.woocommerce.archive span.onsale {
background: #060807 !important;
border-radius: 0;
color: #fff !important;
font-family: Poppins, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: .4px;
margin-top : 20px;
line-height: 1;
padding: 16px 16px;
text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
body.woocommerce.archive ul.products li.product .woo-entry-inner {
padding: 0 14px 16px;
}
body.woocommerce.archive ul.products li.product .woo-entry-inner li.image-wrap {
margin-left: -14px !important;
margin-right: -14px !important;
}
body.woocommerce.archive ul.products li.product .woo-entry-image img {
padding: 20px;
}
body.woocommerce.archive .vsw-category-long-description-section {
margin-top: 24px;
padding-top: 28px;
}
}
/**
* Mobile header, product page and footer polish
*/
.vsw-mobile-header-menu,
.vsw-mobile-header-actions,
.vsw-mobile-search-row,
.vsw-product-mobile-breadcrumb {
display: none;
}
.woocommerce div.product form.cart .variations .reset_variations {
display: none !important;
}
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.value {
display: block;
width: 100% !important;
}
.woocommerce div.product form.cart .variations th.label {
padding: 0 0 8px !important;
}
.woocommerce div.product form.cart .variations th.label label {
display: block;
line-height: 1.2;
margin: 0;
}
body.single-product .related.products ul.products li.product .product-inner > .woo-entry-image:not(.vsw-product-image),
body.single-product .upsells.products ul.products li.product .product-inner > .woo-entry-image:not(.vsw-product-image) {
display: none !important;
}
body.single-product .related.products ul.products li.product .vsw-product-image,
body.single-product .upsells.products ul.products li.product .vsw-product-image,
body.single-product .related.products ul.products li.product .vsw-product-image > a.woocommerce-LoopProduct-link,
body.single-product .upsells.products ul.products li.product .vsw-product-image > a.woocommerce-LoopProduct-link {
aspect-ratio: 1 / 1 !important;
background: #f4f4f4 !important;
background: oklch(96% 0 0) !important;
display: block !important;
overflow: hidden !important;
position: relative !important;
width: 100% !important;
}
body.single-product .related.products ul.products li.product .vsw-product-main-image,
body.single-product .related.products ul.products li.product .vsw-product-hover-image,
body.single-product .upsells.products ul.products li.product .vsw-product-main-image,
body.single-product .upsells.products ul.products li.product .vsw-product-hover-image {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
inset: var(--vsw-product-image-inset, 0px) !important;
position: absolute !important;
}
body.single-product .custom-review-slider-fullwidth .swiper-wrapper,
body.single-product .review-slider .swiper-wrapper,
body.single-product .reviews-slider .swiper-wrapper {
align-items: flex-start !important;
}
body.single-product .custom-review-slider-fullwidth .swiper-slide,
body.single-product .review-slider .swiper-slide,
body.single-product .reviews-slider .swiper-slide,
body.single-product .review-box {
height: auto !important;
min-height: 0 !important;
}
.owp-product-nav {
margin-top: 20px !important;
}
@media only screen and (max-width: 959px) {
#top-bar-wrap .topbar-content,
#top-bar-wrap .top-bar-right,
#top-bar-wrap #top-bar-content,
#top-bar-wrap #top-bar-social {
font-size: 10px !important;
line-height: 1.2 !important;
white-space: nowrap;
}
#top-bar-wrap .container {
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
#site-header.medium-header .top-header-wrap {
padding: 8px 0 !important;
}
#site-header.medium-header .top-header-wrap .container {
max-width: 100%;
padding-left: 12px;
padding-right: 12px;
}
#site-header.medium-header .top-header-inner {
align-items: center;
display: grid !important;
gap: 8px;
grid-template-columns: 42px minmax(0, 1fr) auto;
min-height: 58px;
}
#site-header.medium-header .top-header-inner .top-col {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
#site-header.medium-header .top-header-inner .logo-col {
grid-column: 2;
justify-self: center;
min-width: 0;
text-align: center;
}
#site-header.medium-header .top-header-inner .logo-col #site-logo,
#site-header.medium-header .top-header-inner .logo-col #site-logo-inner {
display: block;
max-width: 100%;
}
#site-header.medium-header #site-logo #site-logo-inner a img {
float: none;
height: auto;
max-height: 48px;
max-width: min(220px, calc(100vw - 132px));
width: auto;
}
#site-header.medium-header .top-header-inner .top-col.col-2,
#site-header.medium-header .top-header-inner .top-col.col-3,
#site-header.medium-header .top-header-inner .top-col-3 {
display: none !important;
}
.vsw-mobile-header-menu,
.vsw-mobile-header-actions {
align-items: center;
display: flex;
}
.vsw-mobile-header-menu {
grid-column: 1;
justify-self: start;
}
.vsw-mobile-header-actions {
gap: 6px;
grid-column: 3;
justify-self: end;
}
.vsw-mobile-icon-button {
align-items: center;
background: transparent;
color: #060807 !important;
display: inline-flex;
flex: 0 0 38px;
height: 38px;
justify-content: center;
line-height: 1;
position: relative;
text-decoration: none !important;
width: 38px;
}
.vsw-mobile-icon-button .owp-icon {
height: 18px;
width: 18px;
}
.vsw-mobile-cart-count {
align-items: center;
background: #b9d531;
border-radius: 999px;
color: #fff;
display: inline-flex;
font-size: 9px;
font-weight: 700;
height: 16px;
justify-content: center;
line-height: 1;
min-width: 16px;
padding: 0 4px;
position: absolute;
right: -3px;
top: -3px;
}
#site-header.medium-header .bottom-header-wrap {
background: #b9d531;
padding: 8px 12px;
}
.vsw-mobile-search-row {
display: block;
margin: 0 auto;
max-width: 1200px;
width: 100%;
}
#vsw-mobile-search {
align-items: center;
background: #fff;
border: 1px solid #fff;
border-radius: 8px;
box-shadow: none;
display: flex;
height: 44px;
overflow: hidden;
position: relative;
width: 100%;
}
#vsw-mobile-search-input {
background: #fff;
border: 0 !important;
box-shadow: none !important;
color: #111;
flex: 1 1 auto;
font-size: 14px;
height: 100%;
line-height: 1;
min-width: 0;
padding: 0 50px 0 14px;
}
#vsw-mobile-search .search-submit {
align-items: center;
background: #111 !important;
border: 0 !important;
border-radius: 0;
color: #fff !important;
display: flex;
height: 100%;
justify-content: center;
min-width: 46px;
padding: 0 !important;
position: absolute;
right: 0;
top: 0;
width: 46px;
}
#vsw-mobile-search .search-submit .owp-icon {
height: 17px;
width: 17px;
}
}
@media only screen and (max-width: 767px) {
body.single-product .page-header .page-header-title {
font-size: 20px !important;
letter-spacing: -0.04em !important;
line-height: 1.12 !important;
}
body.single-product .vsw-product-mobile-breadcrumb {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 11px;
font-weight: 600;
gap: 6px;
letter-spacing: .3px;
line-height: 1.25;
margin: 8px auto 0;
max-width: 90%;
text-transform: uppercase;
}
body.single-product .vsw-product-mobile-breadcrumb a {
color: #b9d531;
text-decoration: none;
}
.vsw-home-mobile-description.is-collapsed {
max-height: 150px;
overflow: hidden;
position: relative;
}
.vsw-home-mobile-description.is-collapsed:after {
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
bottom: 0;
content: "";
height: 52px;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
}
.vsw-home-mobile-description.is-expanded {
max-height: none;
}
.vsw-home-description-toggle {
background: #111;
border: 0;
color: #fff;
display: inline-flex;
font-size: 12px;
font-weight: 700;
letter-spacing: .4px;
line-height: 1;
margin: 8px 0 20px;
padding: 12px 16px;
text-transform: uppercase;
}
.sz-product-slider .sz-slider-arrow {
top: calc(50% - 40px);
}
.menulink-wrp .information-block {
padding: 12px 0;
}
.menulink-wrp .information-block ul.usps-footer {
display: grid;
gap: 10px 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menulink-wrp .information-block ul.usps-footer li {
align-items: center;
display: flex;
gap: 8px;
margin: 0 !important;
min-width: 0;
}
.menulink-wrp .box-icon {
align-items: center;
display: flex;
flex: 0 0 45px;
justify-content: center;
}
.menulink-wrp .menulink-content,
.menulink-wrp .menulink-content.lang {
font-size: 10px !important;
line-height: 1.18 !important;
min-width: 0;
white-space: normal;
width: auto !important;
}
.menulink-wrp .menulink-content span {
display: block;
}
#footer-widgets .footer-box.col-4 {
min-height: 210px !important;
overflow: visible !important;
position: relative !important;
}
#footer-widgets .footer-box.col-4 .textwidget {
padding-bottom: 130px;
}
#footer-widgets .footer-poppetje {
bottom: 0 !important;
height: 145px !important;
right: 18px !important;
}
body.single-product .woocommerce-tabs.vsw-tabs-description-only #tab-description > h2:first-child,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:only-of-type > h2:first-child {
display: none !important;
}
body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/**
* Mobile header correction: render responsive by viewport, not user agent
*/
@media only screen and (min-width: 960px) {
#site-header.medium-header .vsw-mobile-header-menu,
#site-header.medium-header .vsw-mobile-header-actions,
#site-header.medium-header .vsw-mobile-search-row,
#site-header.medium-header #mobile-dropdown {
display: none !important;
}
}
@media only screen and (max-width: 959px) {
#site-header.medium-header .top-header-inner:before,
#site-header.medium-header .top-header-inner:after,
#site-header.medium-header .bottom-header-wrap:before,
#site-header.medium-header .bottom-header-wrap:after {
content: none !important;
display: none !important;
}
#site-header.medium-header .top-header-inner {
align-items: center !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
justify-content: space-between !important;
min-height: 60px !important;
width: 100% !important;
}
#site-header.medium-header .top-header-inner .top-col {
clear: none !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
#site-header.medium-header .top-header-inner .logo-col {
align-items: center !important;
display: flex !important;
flex: 1 1 auto !important;
justify-content: center !important;
min-width: 0 !important;
order: 2 !important;
text-align: center !important;
width: auto !important;
}
#site-header.medium-header .top-header-inner .top-col.col-2,
#site-header.medium-header .top-header-inner .top-col.col-3,
#site-header.medium-header .top-header-inner .top-col-3 {
display: none !important;
}
#site-header.medium-header #site-logo,
#site-header.medium-header #site-logo-inner,
#site-header.medium-header #site-logo #site-logo-inner a {
align-items: center !important;
display: flex !important;
justify-content: center !important;
max-width: 100% !important;
min-width: 0 !important;
}
#site-header.medium-header #site-logo #site-logo-inner a img {
display: block !important;
float: none !important;
max-height: 48px !important;
max-width: min(230px, calc(100vw - 190px)) !important;
width: auto !important;
}
#site-header.medium-header .vsw-mobile-header-menu {
align-items: center !important;
display: flex !important;
flex: 0 0 48px !important;
justify-content: flex-start !important;
order: 1 !important;
}
#site-header.medium-header .vsw-mobile-header-actions {
align-items: center !important;
display: flex !important;
flex: 0 0 auto !important;
gap: 0 !important;
justify-content: flex-end !important;
order: 3 !important;
}
#site-header.medium-header .vsw-mobile-icon-button {
align-items: center !important;
background: transparent !important;
color: #060807 !important;
display: inline-flex !important;
flex: 0 0 46px !important;
height: 46px !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
min-height: 46px !important;
padding: 0 !important;
position: relative !important;
text-decoration: none !important;
width: 46px !important;
}
#site-header.medium-header .vsw-mobile-icon-button .owp-icon {
height: 23px !important;
width: 23px !important;
}
#site-header.medium-header .vsw-mobile-hamburger {
display: flex;
flex-direction: column;
gap: 5px;
width: 24px;
}
#site-header.medium-header .vsw-mobile-hamburger span {
background: #090909;
border-radius: 999px;
display: block;
height: 3px;
width: 24px;
}
#site-header.medium-header .vsw-mobile-cart-count {
background: #b9d531 !important;
font-size: 10px !important;
height: 18px !important;
min-width: 18px !important;
right: -4px !important;
top: -4px !important;
}
#site-header.medium-header .bottom-header-wrap {
background: #b9d531 !important;
display: block !important;
padding: 10px 12px !important;
}
#site-header.medium-header #site-navigation-wrap {
display: none !important;
}
#site-header.medium-header .vsw-mobile-search-row {
background: #b9d531 !important;
display: block !important;
margin: 0 auto !important;
max-width: 1200px !important;
padding: 0 !important;
width: 100% !important;
}
#site-header.medium-header .vsw-mobile-searchform,
#site-header.medium-header #vsw-mobile-search {
align-items: center !important;
background: #fff !important;
border: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
display: flex !important;
flex-wrap: nowrap !important;
height: 46px !important;
margin: 0 !important;
min-height: 46px !important;
overflow: hidden !important;
padding: 0 !important;
position: relative !important;
width: 100% !important;
}
#site-header.medium-header #vsw-mobile-search-input {
background: #fff !important;
border: 0 !important;
box-shadow: none !important;
color: #111 !important;
flex: 1 1 auto !important;
font-size: 14px !important;
height: 46px !important;
line-height: 46px !important;
margin: 0 !important;
min-height: 46px !important;
min-width: 0 !important;
padding: 0 58px 0 14px !important;
width: 100% !important;
}
#site-header.medium-header #vsw-mobile-search .search-submit {
align-items: center !important;
background: #111 !important;
border: 0 !important;
border-radius: 0 !important;
bottom: 0 !important;
color: #fff !important;
display: flex !important;
height: 46px !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
min-height: 46px !important;
min-width: 52px !important;
padding: 0 !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
width: 52px !important;
}
#site-header.medium-header #vsw-mobile-search .search-submit .owp-icon {
height: 19px !important;
width: 19px !important;
}
}
.variations th.label {
border: 0px;
}
.dropdown-menu li .sub-menu li.menu-item {
padding-left: 2px;
}
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > .sub-menu:not(.vsw-menu-item-mega) > li > a {
/* border-bottom: 1px solid rgba(0, 0, 0, .22); */
}
/* Kleurfilter — swatches in een nette rij i.p.v. gestapeld */
ul.product-search-filter-pa_kleur {
display: flex !important;
flex-wrap: wrap;
gap: 6px;
}
ul.product-search-filter-pa_kleur li.attribute-item {
margin: 0;
float: none;
}
h3.rt-Heading.rt-r-size-2.rt-r-weight-medium.rt-r-tw-wrap {
font-family: Poppins, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
justify-content: space-between;
letter-spacing: .6px !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
text-transform: uppercase !important;
}
.rt-BaseCheckboxRoot:where(.rt-variant-surface):where([data-state=unchecked]):before, .rt-BaseRadioRoot:where(.rt-variant-surface):where(:not(:checked),[data-state=unchecked]):before, .rt-SelectTrigger:where(.rt-variant-surface) {
box-shadow: inset 0 0 0 1px #cfcfcf !important;
}
.wcf-filter-horizontal-container .wcf-filter-horizontal-trigger {
box-shadow: inset 0 0 0 1px #cfcfcf !important;
color: #333 !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.rt-SelectTrigger, .wcf-option-label {
color: #333 !important;
font-size: 12px !important;
font-weight: 400 !important;
}
/* WCF kleurfilter — 32×32 swatches, strak naast elkaar */
.wcf-filter-kleur .rt-Grid {
grid-template-columns: repeat(auto-fill, 32px) !important;
gap: 6px !important;
}
.wcf-filter-kleur .wcf-image-card {
width: 32px !important;
height: 32px !important;
min-width: 0 !important;
padding: 0 !important;
overflow: hidden;
}
.wcf-filter-kleur .wcf-image-card .rt-Inset {
margin: 0 !important;
}
.wcf-filter-kleur .wcf-image-card img {
width: 32px !important;
height: 32px !important;
object-fit: cover !important;
}
span.wcf-total-results {
display: none;
}
/* Toolbar-indeling: WCF-filtergroep (Filters + Sorteren + chips + Wis) links,
Bekijken-schakelaar uiterst rechts, op één rij. Wraps op smalle schermen. */
.oceanwp-toolbar.clr {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: 12px !important;
row-gap: 8px !important;
}
.oceanwp-toolbar #wcf-horizontal-group {
width: auto !important;
flex: 0 1 auto !important;
}
.oceanwp-toolbar .result-count {
margin-left: auto !important;
width: auto !important;
flex: 0 0 auto !important;
}
/* WCF-chips/Wis: container niet 100% breed forceren — naast Sorteren i.p.v. een eigen rij */
.wcf-active-filters-container {
width: auto !important;
justify-content: flex-start !important;
}
@media only screen and (min-width: 960px) {
body.woocommerce.archive .sidebar-container {
scrollbar-width: auto;
}
}
article.entry-content.entry.clr {
padding-top: 10px;
}
#site-header {
border-bottom: 0px !important;
}
.woocommerce div.product div.summary p.in-stock {
margin-bottom: 0px !important;
color: #226F54 !important;
border: 1px solid #226F54 !important;
border-radius: .25em;
padding-inline: calc(.5em - 1px);
width: fit-content;
}
/**
* Sitewide newsletter banner (above USP strip in the footer).
*/
.vsw-newsletter-section {
background: #292929;
color: #fff;
padding: 48px 0;
width: 100%;
}
/* Let the theme's .container handle width/padding so we line up with the USP strip. */
.vsw-newsletter {
align-items: center;
display: grid;
gap: 40px;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.vsw-newsletter__text {
min-width: 0;
}
.vsw-newsletter__title {
color: #fff;
font-size: 26px;
font-weight: 800;
letter-spacing: 0;
line-height: 1.2;
margin: 0 0 12px;
}
.vsw-newsletter__intro {
color: #eaeaea;
font-size: 15px;
line-height: 1.6;
margin: 0;
max-width: 640px;
}
.vsw-newsletter__intro strong {
color: #fff;
font-weight: 800;
}
.vsw-newsletter__form {
min-width: 0;
}
/* One-field form: hide name + profile fields. */
.vsw-newsletter__form .tnp-field-firstname,
.vsw-newsletter__form .tnp-field-name,
.vsw-newsletter__form .tnp-field-gender,
.vsw-newsletter__form .tnp-field-profile,
.vsw-newsletter__form .tnp-field-list,
.vsw-newsletter__form .tnp-field-lists {
display: none !important;
}
.vsw-newsletter__form form,
.vsw-newsletter__form .tnp-subscription,
.vsw-newsletter__form .newsletter-subscription {
margin: 0;
}
.vsw-newsletter__form .tnp-field {
margin: 0 0 12px;
}
/* Labels visible above inputs. */
.vsw-newsletter__form .tnp-field-firstname label,
.vsw-newsletter__form .tnp-field-name label,
.vsw-newsletter__form .tnp-field-email label {
color: #fff;
display: block;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 6px;
}
.vsw-newsletter__form input[type="text"],
.vsw-newsletter__form input[type="email"] {
background: #fff;
border: 0;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
color: #111;
font-size: 15px;
height: 48px;
margin: 0;
padding: 0 14px;
width: 100%;
}
.vsw-newsletter__form input[type="text"]:focus,
.vsw-newsletter__form input[type="email"]:focus {
outline: 2px solid #b9d531;
outline-offset: -2px;
}
.vsw-newsletter__form .tnp-field-button {
margin: 4px 0 0;
}
.vsw-newsletter__form input[type="submit"],
.vsw-newsletter__form button[type="submit"] {
background: #b7d432 !important;
border: 0 !important;
border-radius: 6px !important;
color: #060807 !important;
cursor: pointer;
font-size: 14px !important;
font-weight: 800 !important;
height: 48px;
letter-spacing: .06em;
line-height: 1;
margin: 0 !important;
padding: 0 22px !important;
text-transform: uppercase;
transition: background .18s ease;
white-space: nowrap;
width: 100%;
}
.vsw-newsletter__form input[type="submit"]:hover,
.vsw-newsletter__form button[type="submit"]:hover {
background: #8cc63f !important;
color: #060807 !important;
}
/* Privacy checkbox row — below the button, smaller, subtler. */
.vsw-newsletter__form .tnp-field-checkbox {
color: #eaeaea;
font-size: 12px;
line-height: 1.45;
margin: 10px 0 0;
}
.vsw-newsletter__form .tnp-field-checkbox label {
align-items: flex-start;
color: #eaeaea;
display: inline-flex;
gap: 8px;
margin: 0;
}
.vsw-newsletter__footnote {
color: #c0c0c0;
font-size: 12px;
line-height: 1.45;
margin: 10px 0 0;
}
/* ==============================================================
* Winkelwagen — 2-kolom layout (artikelen links, totals rechts)
* ============================================================
* oceanwp-cro-tweaks wrapt de cart in `.custom-cart-layout >
* .custom-cart + .custom-cart-collaterals` (via hooks op
* `woocommerce_before_cart` / `woocommerce_after_cart`) en levert
* ook flex-styling — maar OceanWP/CRO-tweaks-load-order maakt 'm
* fragile. Hier sterke overrides + card-look op de collaterals. */
@media (min-width: 1024px) {
body.woocommerce-cart .custom-cart-layout {
align-items: flex-start !important;
display: grid !important;
grid-template-columns: 2fr 1fr !important;
gap: 30px !important;
}
body.woocommerce-cart .custom-cart-layout > .custom-cart,
body.woocommerce-cart .custom-cart-layout > .custom-cart-collaterals {
min-width: 0 !important;
}
body.woocommerce-cart .custom-cart-layout > .custom-cart-collaterals {
position: sticky;
top: 24px;
}
}
/* Card-look op de cart-totals rechts. */
body.woocommerce-cart .custom-cart-collaterals {
background: #fff;
border: 0;
padding: 0;
}
body.woocommerce-cart .custom-cart-collaterals .cart_totals > h2 {
display: none;
}
body.woocommerce-cart .custom-cart-collaterals .wc-proceed-to-checkout {
margin-top: 16px;
padding: 0;
}
/* Doorgaan naar afrekenen-knop. */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
font-family: 'Poppins';
font-size: 14px;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
/* Cross-sells horen niet in de smalle 40%-kolom — als de PHP-unhook
ooit faalt (andere plugin re-hooket), valt CSS terug. */
body.woocommerce-cart .custom-cart-collaterals .cross-sells {
display: none;
}
/* Cross-sells ONDER de cart-tabel (linker kolom) — 3-col grid, vaste
styling zodat afbeeldingen écht renderen en cards uniform zijn. */
body.woocommerce-cart .custom-cart .cross-sells {
margin: 40px 0 0;
}
body.woocommerce-cart .custom-cart .cross-sells > h2 {
border-bottom: 1px solid #eee;
color: #111;
font-size: 18px;
font-weight: 600;
letter-spacing: .1px;
line-height: 1.4;
margin: 0 0 20px;
padding-bottom: 12px;
text-transform: none;
}
body.woocommerce-cart .custom-cart .cross-sells ul.products {
display: grid !important;
gap: 20px !important;
grid-template-columns: repeat(3, 1fr) !important;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-cart .custom-cart .cross-sells ul.products li.product {
clear: none !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
body.woocommerce-cart .custom-cart .cross-sells ul.products li.product img {
display: block !important;
height: auto;
margin: 0 0 10px;
width: 100% !important;
}
/* Loop-template rendert de productafbeelding als met
background-image (zie themes/vechtsportwinkel/woocommerce/owp-archive-
product.php). Op archive-pages krijgt die span dimensies via
archive-grid CSS; in cross-sells op cart ontbreekt die scope, dus
geven we 'm hier expliciet aspect-ratio + background-cover.
Scope-only: alleen binnen `body.woocommerce-cart .custom-cart .cross-sells`. */
body.woocommerce-cart .custom-cart .cross-sells .vsw-product-image .vsw-product-image-link {
aspect-ratio: 1 / 1;
display: block;
margin: 0 0 10px;
position: relative;
width: 100%;
}
body.woocommerce-cart .custom-cart .cross-sells .vsw-product-image .vsw-product-main-image {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 100%;
width: 100%;
}
body.woocommerce-cart .custom-cart .cross-sells .vsw-product-image .vsw-product-hover-image {
display: none;
}
body.woocommerce-cart .custom-cart .cross-sells ul.products li.product .price {
color: #111;
display: block;
font-size: 14px;
margin-top: 4px;
}
/* USP-rij ná de afrekenen-knop: compact passend in de smalle kolom.
Geen border-top — de "Onze voordelen"-titel doet de scheiding al. */
body.woocommerce-cart .custom-cart-collaterals .usp-wrapper {
margin-top: 0;
padding-top: 0;
}
body.woocommerce-cart .custom-cart-collaterals .usp-wrapper .usp-item {
align-items: center;
display: flex;
font-size: 13px;
margin: 0 0 10px;
}
body.woocommerce-cart .custom-cart-collaterals .usp-wrapper .usp-text {
color: #333;
line-height: 1.35;
}
/* Alle sectie-h4's in de cart-sidebar — één regel zodat "Onze
voordelen" (.vsw-cart-section-title) en "Betaal gemakkelijk met o.a."
automatisch identiek zijn. */
body.woocommerce-cart .custom-cart-collaterals h4 {
color: #111;
font-size: 18px;
font-weight: 600;
letter-spacing: .1px;
line-height: 1.4;
margin: 20px 0 10px;
text-transform: none;
}
/* "Besteloverzicht" als eerste in de sidebar — geen top-margin, met
onderlijn voor visuele scheiding van de cart-tabel eronder. */
body.woocommerce-cart .custom-cart-collaterals > .vsw-cart-summary-title {
border-bottom: 1px solid #eee;
margin: 0 0 14px;
padding-bottom: 12px;
}
/* Payment-icons ná de USPs in de cart-sidebar — compacte grid,
geen border (h4-titel doet de scheiding). */
body.woocommerce-cart .custom-cart-collaterals .payment-methods-icons {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.woocommerce-cart .custom-cart-collaterals .payment-methods-icons .payment-method img {
display: block;
height: 22px;
width: auto;
}
/* Eventuele
binnen de cart-collaterals verbergen — h4-titels
doen de visuele scheiding. */
body.woocommerce-cart .custom-cart-collaterals hr {
display: none;
}
/* Update-winkelwagen-knop is overbodig (qty wijzigt via AJAX). */
body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"] {
display: none !important;
}
/* ==============================================================
* Cart-totals tabel rechts — zelfde fonts/spacing als de checkout
* review-order tabel zodat de twee schermen visueel rijmen.
* ============================================================*/
body.woocommerce-cart .cart_totals table.shop_table {
border: 1px solid #d8d8d8 !important;
border-collapse: collapse;
margin: 0;
width: 100%;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
border-bottom: 1px solid #eee;
padding: 8px 12px !important;
text-align: left;
vertical-align: middle;
}
/* Subtotaal-rij weg als hij identiek is aan totaal (geen kortingen). */
body.woocommerce-cart .cart_totals tr.cart-subtotal {
display: none;
}
/* Shipping als "geforceerde keuze"-card — gelijk aan checkout. */
body.woocommerce-cart .cart_totals tr.shipping th {
display: none;
}
body.woocommerce-cart .cart_totals tr.shipping td {
background: #eff9f1;
box-shadow: inset 0 0 0 1px #cbe5cf;
padding: 12px 14px !important;
text-align: left;
}
/* "Verzenden naar X" onder de shipping-rate — compact en strak. */
body.woocommerce-cart .cart_totals tr.shipping .woocommerce-shipping-destination {
color: #333;
font-size: 13px;
line-height: 1.4;
margin: 6px 0 0;
}
/* Adres-wijzigen-link (`change_address_button`) — alleen tonen
als bewust geactiveerd; standaard ingeklapt. */
body.woocommerce-cart .cart_totals tr.shipping .shipping-calculator-button {
color: #00782d;
font-size: 12px;
}
/* Totaal-rij — zelfde 15px/700/#111 + dikke top-rand als checkout. */
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
border-bottom: 0;
border-top: 2px solid #111;
color: #111 !important;
font-size: 15px !important;
font-weight: 700 !important;
padding-top: 12px !important;
}
body.woocommerce-cart .cart_totals tr.order-total td .amount {
font-size: 19px;
}
body.woocommerce-cart .cart_totals small.includes_tax {
display: block;
font-size: 12px;
font-weight: 400;
margin-top: 2px;
}
/* includes_tax wordt via JS verplaatst van td naar th in de order-total
rij (zie vsw-checkout-tweaks.php) — hier de styling als block-regel
onder "TOTAAL". Geldt voor cart én checkout. */
body.woocommerce-cart .cart_totals tr.order-total th small.includes_tax,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.order-total th small.includes_tax {
display: block;
font-size: 12px;
font-weight: 400;
margin-top: 4px;
text-transform: none;
}
/* ==============================================================
* Cart-items-tabel links — fonts consistent met USPs en sidebar.
* ============================================================*/
body.woocommerce-cart table.cart .cart_item > .product-thumbnail img {
height: auto;
max-width: 160px;
width: 100%;
}
body.woocommerce-cart table.cart .cart_item > .product-name,
body.woocommerce-cart table.cart .cart_item > .product-name a {
color: #111;
font-family: 'Poppins';
font-size: 18px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.5;
padding-left: 20px;
text-decoration: none;
}
/* Titel naar links — overrule de padding-left van hierboven. */
body.woocommerce-cart table.cart .cart_item > .product-name,
body.woocommerce-cart table.cart .cart_item > .product-name a {
padding-left: 5px !important;
}
/* Mobile: verberg de "Product:"-label die WC's responsive cart-stack
automatisch vóór de productnaam zet via ::before (uit data-title).
De "Prijs:"/"Aantal:"/"Subtotaal:"-labels op andere cellen blijven
wel staan — alleen "Product:" is overbodig, want het thumbnail-blok
maakt het al duidelijk. */
@media (max-width: 767px) {
body.woocommerce-cart table.cart .cart_item > .product-name::before {
content: '' !important;
display: none !important;
}
}
/* td.product-name links uitlijnen — WC mobile-stack zet 'm anders default
op text-align: right. */
body.woocommerce-cart table.cart td.product-name {
text-align: left !important;
}
/* Variation-attrs (bv. "Maat: L") onder de productnaam. WC rendert
ze als - Maat:
L
;
forceer inline + zichtbaar zodat OceanWP-defaults het niet inkapselen. */
body.woocommerce-cart table.cart .cart_item .product-name dl.variation {
color: #555;
display: block;
font-size: 13px;
margin: 4px 0 0;
}
body.woocommerce-cart table.cart .cart_item .product-name dl.variation dt,
body.woocommerce-cart table.cart .cart_item .product-name dl.variation dd {
display: inline;
margin: 0;
padding: 0;
}
body.woocommerce-cart table.cart .cart_item .product-name dl.variation dt {
font-weight: 600;
}
body.woocommerce-cart table.cart .cart_item .product-name dl.variation dd p {
display: inline;
margin: 0;
}
body.woocommerce-cart table.cart .cart_item .product-name dl.variation dd::after {
content: '\A';
white-space: pre;
}
body.woocommerce-cart table.cart .cart_item > .product-quantity {
color: #555;
font-size: 13px;
}
body.woocommerce-cart table.cart .cart_item > .product-subtotal {
color: #111;
font-size: 15px;
font-weight: 700;
}
/* Mobiel: gewoon 1-kolom (de wrapper is sowieso block-flow zonder
media query). Geen aparte regel nodig. */
/* Cart-item-rij als 2-rij grid: thumb links (spans beide rijen), naam
over de volle breedte bovenaan, prijs/qty/subtotaal samen eronder.
Tabel-semantics blijven (de behoudt z'n thead), maar elk
tr.cart_item wordt visueel een card-rij. */
@media (min-width: 768px) {
body.woocommerce-cart table.cart > thead {
display: none;
}
body.woocommerce-cart table.cart > tbody > tr.cart_item {
align-items: center;
border-bottom: 1px solid #eee;
column-gap: 16px;
display: grid;
grid-template-areas:
"name name name name"
"remove thumb qty subtotal";
grid-template-columns: 28px 160px 1fr auto;
padding: 18px 0;
row-gap: 12px;
}
/* Extra spacing-override op de cart-item-rij. */
body.woocommerce-cart table.cart > tbody > tr.cart_item {
column-gap: 10px;
padding: 20px 20px;
row-gap: 0px;
}
body.woocommerce-cart table.cart > tbody > tr.cart_item > td {
border: 0 !important;
padding: 0 !important;
}
body.woocommerce-cart table.cart .cart_item > .product-thumbnail { grid-area: thumb; }
body.woocommerce-cart table.cart .cart_item > .product-name {
align-self: start;
grid-area: name;
}
body.woocommerce-cart table.cart .cart_item > .product-remove {
grid-area: remove;
justify-self: end;
}
/* Per-stuk prijs is overbodig naast de subtotaal-kolom; we tonen
alleen de regelttotaal. */
body.woocommerce-cart table.cart .cart_item > .product-price {
display: none;
}
body.woocommerce-cart table.cart .cart_item > .product-quantity {
grid-area: qty;
justify-self: end;
}
body.woocommerce-cart table.cart .cart_item > .product-subtotal {
font-size: 20px;
grid-area: subtotal;
justify-self: end;
}
}
/* ==============================================================
* Checkout — algehele opmaak & polish
* ============================================================*/
/* Alle prijzen op cart, checkout én productpages in donker-zwart
i.p.v. het default rood van WC/theme. */
body.woocommerce-cart .amount,
body.woocommerce-cart .woocommerce-Price-amount,
body.woocommerce-cart .woocommerce-Price-currencySymbol,
body.woocommerce-checkout .amount,
body.woocommerce-checkout .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce-Price-currencySymbol,
body.single-product .amount,
body.single-product .woocommerce-Price-amount,
body.single-product .woocommerce-Price-currencySymbol {
color: #030303 !important;
}
/* Euro-teken verbergen op cart, checkout én productpages. */
body.woocommerce-cart .woocommerce-Price-currencySymbol,
body.woocommerce-checkout .woocommerce-Price-currencySymbol,
body.single-product .woocommerce-Price-currencySymbol {
display: none;
}
/* Section heading: "Factuurgegevens" — grote, prominente sectie-titel. */
body.woocommerce-checkout #customer_details h3 {
border-bottom: 2px solid #111;
font-size: 18px;
font-weight: 800;
letter-spacing: 0;
margin: 0 0 20px;
padding-bottom: 10px;
text-transform: uppercase;
}
/* Section heading: "Jouw bestelling" — compactere look matched
.vsw-payment-title ("KIES JE BETAALWIJZE") in de sidebar. */
body.woocommerce-checkout .woocommerce-checkout-review-order h3 {
border-bottom: 2px solid #111;
color: #111;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
margin: 24px 0 14px;
padding-bottom: 10px;
text-transform: uppercase;
}
/* Bare id-selector: garandeert font-weight 800 ongeacht welke andere
stylesheets verderop in de cascade nog komen. */
h3#order_review_heading {
font-weight: 800;
}
/* Table-header "PRODUCT" / "SUBTOTAAL" — OceanWP woo/woocommerce.min.css
zet 15px + 1px letter-spacing + 20px padding op dezelfde selector,
specificity gelijk maar later geladen → !important nodig. */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th {
color: #111 !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
padding: 10px 12px !important;
}
/* Form rows + labels. */
body.woocommerce-checkout .woocommerce form .form-row label {
color: #111;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
background: #fff;
border: 1px solid #d8d8d8;
border-radius: 0;
box-shadow: none;
color: #111;
font-size: 14px;
min-height: 44px;
padding: 10px 12px;
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus {
border-color: #b9d531;
outline: 0;
}
/* Order summary card. !important omdat `.woocommerce #order_review
table.shop_table` (oceanwp/cro-tweaks) een hogere specificity heeft
en de outer border anders niet doorkomt. */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
border: 1px solid #d8d8d8 !important;
border-collapse: collapse;
margin-bottom: 18px;
width: 100%;
}
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td {
border-bottom: 1px solid #eee;
padding: 8px 12px;
vertical-align: middle;
}
/* Subtotaal-row weg: bij gratis verzending en zonder kortingen is hij
identiek aan het totaal — alleen ruis. */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart-subtotal {
display: none;
}
/* "Verzending"-label-kolom weg: de cel-inhoud (carrier-logo + label +
levertijd-ETA) vertelt het verhaal al, en full-width is rustiger. */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.shipping th {
display: none;
}
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.shipping td {
background: #eff9f1;
box-shadow: inset 0 0 0 1px #cbe5cf;
padding: 12px 14px;
text-align: left;
}
/* Totaal-row meer prominent: dikke top-rand. Label matched Product/
Subtotaal-styling (15px/700/#111); bedrag iets groter via .amount. */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.order-total td {
border-bottom: 0;
border-top: 2px solid #111;
color: #111 !important;
font-size: 15px !important;
font-weight: 700 !important;
padding-top: 12px;
}
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.order-total td .amount {
font-size: 19px;
}
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.order-total small.includes_tax {
display: block;
font-size: 12px;
font-weight: 400;
margin-top: 2px;
}
/* BTW-bedrag binnen "(inclusief X BTW)" — donker ipv rood (.amount
default) en iets compacter. */
small.includes_tax .amount {
color: #333 !important;
font-size: 14px !important;
}
/* Inline quantity ("× 1") binnen de product-cell — geen losse regel. */
.vsw-checkout-product__qty {
color: #777;
font-weight: 600;
text-transform: none;
white-space: nowrap;
}
/* WC genereert de shipping-cel als | ;
de default browser-margin op die trekt de "Gratis Verzending"-tekst
optisch omhoog en breekt vertical-align: middle. Strip de ul/li chrome. */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.shipping td > ul,
body.woocommerce-cart table.shop_table tr.shipping td > ul {
list-style: none;
margin: 0;
padding: 0;
}
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.shipping td > ul > li,
body.woocommerce-cart table.shop_table tr.shipping td > ul > li {
margin: 0;
padding: 0;
}
/* Strip de bottom-padding op de shipping_method ul-wrapper én de li
daarbinnen — OceanWP woo/woocommerce.css:3818-3823 heeft exact
dezelfde selectors met 20px/10px en wint door later geladen te
worden; !important haalt 'm eroverheen. */
.woocommerce #order_review table.shop_table ul#shipping_method.woocommerce-shipping-methods {
padding-bottom: 0px !important;
}
.woocommerce #order_review table.shop_table ul#shipping_method.woocommerce-shipping-methods li {
padding-bottom: 0 !important;
}
/* Globale strip van shipping_method ul bottom-padding + verberg
het verzendadres-paragraafje "Verzenden naar X".
!important nodig: OceanWP woo/woocommerce.css regel 3818 zet
`padding-bottom: 20px` met hogere specificity. */
ul#shipping_method {
padding-bottom: 0px !important;
}
p.woocommerce-shipping-destination {
display: none !important;
}
/* Levertijd-suffix in de shipping-cel (cart + checkout): inline ná
"Gratis Verzending" met em-dash als scheidingsteken.
text-transform: none overrulet OceanWP's `.woocommerce table.shop_table td`
capitalize-default, anders krijg je "Donderdag Bij Je Geleverd". */
.vsw-cart-delivery-eta {
color: #00782d;
font-weight: 500;
margin-left: 6px;
text-transform: none;
}
.vsw-cart-delivery-eta::before {
color: #888;
content: ' \2014 ';
}
.vsw-cart-delivery-eta b {
font-weight: 700;
}
/* Cart-page: levertijd op een eigen regel onder het shipping-label
(in checkout blijft hij inline ná "Gratis Verzending"). */
body.woocommerce-cart .vsw-cart-delivery-eta {
display: block;
margin-left: 0;
margin-top: 4px;
}
body.woocommerce-cart .vsw-cart-delivery-eta::before {
display: none;
}
/* Carrier-logo (PostNL / Bpost) voor de shipping-label. */
.vsw-carrier-logo {
display: inline-block;
height: 22px;
margin-right: 8px;
vertical-align: middle;
width: auto;
}
/* Creditcard-merklogo's (Visa/Mastercard/Amex/Maestro) ná het
"Creditcard"-label van de multisafepay_creditcard-gateway. */
.vsw-cc-icon {
display: inline-block;
height: 22px;
margin-left: 3px;
vertical-align: middle;
width: auto;
}
/* ==============================================================
* Account benefits block (above "create an account?" checkbox)
* ============================================================*/
.vsw-account-benefits {
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-position: right -60px bottom -40px;
background-repeat: no-repeat;
background-size: 400px auto;
border: 2px solid #226F54;
border-left-width: 6px;
margin: 20px 0 16px;
padding: 18px 20px;
position: relative;
}
.vsw-account-benefits__head {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 10px;
}
.vsw-account-benefits__badge {
background: #226F54;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
line-height: 1;
padding: 5px 9px;
text-transform: uppercase;
}
.vsw-account-benefits__title {
color: #111;
font-size: 17px;
font-weight: 800;
line-height: 1.25;
margin: 0;
text-transform: none;
letter-spacing: 0;
border: 0;
padding: 0;
}
.vsw-account-benefits__intro {
color: #333;
font-size: 14px;
line-height: 1.5;
margin: 0 0 12px;
}
.vsw-account-benefits__list {
list-style: none;
margin: 0 0 12px;
padding: 0;
}
.vsw-account-benefits__list li {
color: #222;
font-size: 14px;
line-height: 1.5;
padding: 4px 0 4px 24px;
position: relative;
}
.vsw-account-benefits__list li::before {
color: #226F54;
content: "✓";
font-weight: 800;
left: 0;
position: absolute;
top: 4px;
}
.vsw-account-benefits__hint {
color: #555;
font-size: 12px;
line-height: 1.5;
margin: 0;
padding-top: 10px;
}
.vsw-account-benefits__hint a {
color: #226F54;
text-decoration: underline;
}
/* The "create an account?" checkbox row directly below the benefits block. */
body.woocommerce-checkout .woocommerce-account-fields p.create-account {
background: #f7f7f7;
border: 1px solid #eaeaea;
border-radius: 0;
margin: 0 0 14px;
padding: 12px 14px;
}
body.woocommerce-checkout .woocommerce-account-fields p.create-account label {
font-weight: 700;
margin: 0;
}
/* ==============================================================
* Payment methods (#payment .wc_payment_methods)
* ============================================================*/
/* Sectie-titel "Kies je betaalwijze" boven de payment-list. */
body.woocommerce-checkout .vsw-payment-title {
border-bottom-color: #eaeaea;
border-bottom-style: solid;
border-bottom-width: 1px;
font-size: 14px;
letter-spacing: .6px;
margin: 0 0 20px;
padding-bottom: 8px;
position: relative;
text-transform: uppercase !important;
}
body.woocommerce-checkout #payment {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods {
background: transparent;
border: 0;
list-style: none;
margin: 0 0 18px;
padding: 0;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
background: #fff;
border: 1px solid #d8d8d8;
list-style: none;
margin: 0 0 8px;
padding: 0;
transition: border-color .15s ease, background .15s ease;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:hover {
border-color: #00782d;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input[type="radio"]:checked),
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method.vsw-active {
background: #eff9f1;
border-color: #00782d;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
color: #111;
cursor: pointer;
font-size: 15px;
font-weight: 700;
margin: 0;
padding: 12px 14px;
width: 100%;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label img {
height: 22px !important;
margin: 0 0 0 4px !important;
max-height: 22px !important;
vertical-align: middle;
width: auto !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"] {
accent-color: #b9d531;
flex: 0 0 auto;
height: 18px;
margin: 0 10px 0 0;
width: 18px;
}
/* Payment box (description/extra fields for the selected method) — hidden. */
.woocommerce-checkout #payment div.payment_box {
display: none !important;
}
body.woocommerce-checkout #payment ul.payment_methods .payment_box::before {
display: none !important;
}
body.woocommerce-checkout #payment ul.payment_methods .payment_box p {
margin: 0;
}
/* Submit button "Plaats bestelling". */
body.woocommerce-checkout #payment .place-order .button#place_order {
background: #00782d !important;
border: 0 !important;
border-radius: 0 !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: .04em;
padding: 16px 22px !important;
text-transform: uppercase;
transition: background .18s ease;
width: 100%;
}
body.woocommerce-checkout #payment .place-order .button#place_order:hover {
background: #111 !important;
}
/* Terms & privacy paragraphs above place-order. */
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper p {
color: #555;
font-size: 13px;
line-height: 1.5;
}
/* Hide the WooCommerce Points & Rewards "earn points" notice — its message
* is now covered by the membership block. */
.wc_points_rewards_earn_points {
display: none !important;
}
/* WooCommerce default info notice — restyle to match membership greens. */
.woocommerce-info {
background-color: #eff9f1;
color: #333 !important;
border-color: #00782d !important;
}
.woocommerce-info:before {
color: #00782d !important;
}
/* Coupon "Waardebon toepassen" button — less prominent: white + red outline. */
body.woocommerce-checkout button[name="apply_coupon"],
body.woocommerce-cart button[name="apply_coupon"],
body.woocommerce-checkout .checkout_coupon button[type="submit"] {
background: #fff !important;
border: 1px solid #b9d531 !important;
color: #b9d531 !important;
font-weight: 700;
padding: 16px 24px !important;
}
body.woocommerce-checkout button[name="apply_coupon"]:hover,
body.woocommerce-cart button[name="apply_coupon"]:hover,
body.woocommerce-checkout .checkout_coupon button[type="submit"]:hover {
background: #b9d531 !important;
color: #fff !important;
}
/* Product thumbnail in "Jouw bestelling" review-order table. */
.vsw-checkout-product {
align-items: center;
display: inline-flex;
gap: 10px;
}
.vsw-checkout-product img,
.vsw-checkout-product .vsw-checkout-thumb {
border: 1px solid #eaeaea;
display: block;
flex: 0 0 auto;
height: 56px;
object-fit: contain;
width: 56px;
}
.vsw-checkout-product__name {
line-height: 1.35;
}
/* Toggle "Bedrijfsnaam toevoegen?" — minder prominent dan WC's default labels. */
.vsw-company-toggle label {
color: #555;
font-size: 13px;
font-weight: 400 !important;
}
.vsw-company-toggle .woocommerce-form__input-checkbox {
accent-color: #b9d531;
}
/* Newsletter opt-in moved below "Een account aanmaken?" — witte box.
Matched aan .create-account: zelfde padding/margin/border en
zelfde font-size, maar witte achtergrond en niet-bold label. */
.vsw-newsletter-optin {
background: #fff !important;
border: 1px solid #eaeaea !important;
border-radius: 0;
margin: 0 0 14px !important;
padding: 12px 14px !important;
}
.vsw-newsletter-optin label.woocommerce-form__label-for-checkbox {
color: #111;
font-size: 14px;
font-weight: 400 !important;
line-height: 1.5;
margin: 0;
}
/* Newsletter-plugin echo't een
direct na het openen van het label;
die loze regel breekt anders de uitlijning met de "Word gratis member"-rij. */
.vsw-newsletter-optin label.woocommerce-form__label-for-checkbox > br {
display: none;
}
.vsw-newsletter-optin input[type="checkbox"] {
accent-color: #b9d531;
}
.vsw-newsletter__form input[type="checkbox"] {
accent-color: #b9d531;
flex: 0 0 auto;
height: 16px;
margin: 2px 0 0;
width: 16px;
}
.vsw-newsletter__form .vsw-privacy-link {
color: #fff;
text-decoration: underline;
}
.vsw-newsletter__form .vsw-privacy-link:hover {
color: #b9d531;
}
/* Confirmation / error messages. */
.vsw-newsletter__form .tnp-subscription-confirm,
.vsw-newsletter__form .tnp-response {
background: rgba(255, 255, 255, .08);
color: #fff;
margin-top: 12px;
padding: 10px 14px;
}
@media (max-width: 900px) {
.vsw-newsletter-section {
padding: 32px 0;
}
.vsw-newsletter {
gap: 20px;
grid-template-columns: 1fr;
}
.vsw-newsletter__title {
font-size: 22px;
}
}
a.button.wc-forward {
padding: 14px !important;
}
.vsw-mega-menu__promo {
justify-content: center !important;
}
a.vsw-mega-menu__promo {
display: none;
}
a.sz-product-card__title {
text-decoration: none !important;
}
a.sz-product-card__button {
text-decoration: none !important;
}
/* My-account nav: verberg ::before icon op alle items (incl. logout). */
.woocommerce-MyAccount-navigation ul li a:before,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before {
content: "" !important;
display: none !important;
}
/* Header-action icons (mobile + desktop) -- toon ook op desktop. */
@media (min-width: 769px) {
.vsw-mobile-header-actions {
display: flex !important;
align-items: center;
gap: 10px;
margin-left: auto;
}
.vsw-mobile-icon-button {
align-items: center;
background: transparent;
color: #090909 !important;
display: inline-flex;
height: 38px;
justify-content: center;
line-height: 1;
position: relative;
text-decoration: none !important;
width: 38px;
}
}
/* Header + footer icons: enforce kleur #090909 voor alle Phosphor SVGs. */
.vsw-mobile-icon-button,
.vsw-mobile-icon-button svg,
.vsw-mobile-icon-button svg path {
color: #090909 !important;
fill: #090909 !important;
}
.box-icon svg,
.box-icon svg path {
color: #090909 !important;
fill: #090909 !important;
}
/* Desktop social-area: lijn de account/service iconen netjes uit met de
Webwinkel Keur logo + klantbeoordeling sterren. */
.oceanwp-social-menu .social-menu-inner {
align-items: center !important;
display: inline-flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
.oceanwp-social-menu .social-menu-inner a,
.oceanwp-social-menu .social-menu-inner .icon-valantic {
align-items: center;
display: inline-flex;
justify-content: center;
line-height: 0;
vertical-align: middle;
}
.oceanwp-social-menu .social-menu-inner .icon-valantic svg {
color: #090909 !important;
fill: #090909 !important;
height: 28px;
width: 28px;
}
.oceanwp-social-menu .kiyoh-wrapper {
align-self: center;
line-height: 1.3;
}
.oceanwp-social-menu img.webwinkelkeur-header,
.oceanwp-social-menu img.alignnone.size-full {
vertical-align: middle;
}
/* Footer USP subtitels: dichter bij hoofdregel. */
.menulink-wrp .information-block ul li .menulink-content span {
margin-top: -5px;
}
/* === Footer USPs op mobile + small tablet: 1 USP per rij, geen text-clip === */
@media (max-width: 991px) {
.menulink-wrp .information-block ul.usps-footer {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 14px;
align-items: stretch !important;
}
.menulink-wrp .information-block ul.usps-footer li {
align-items: center;
display: flex !important;
flex: 0 0 100% !important;
gap: 12px;
margin: 0 !important;
min-width: 0 !important;
width: 100% !important;
}
.menulink-wrp .information-block ul.usps-footer li .box-icon {
align-items: center;
display: flex;
flex: 0 0 46px;
justify-content: center;
margin: 0 !important;
min-width: 46px;
}
.menulink-wrp .information-block ul.usps-footer li .box-icon svg {
height: 36px;
width: 36px;
}
.menulink-wrp .information-block ul.usps-footer li .menulink-content,
.menulink-wrp .information-block ul.usps-footer li .menulink-content.lang {
flex: 1 1 auto !important;
font-size: 12px !important;
line-height: 1.25 !important;
min-width: 0 !important;
white-space: normal !important;
width: auto !important;
}
.menulink-wrp .information-block ul.usps-footer li .menulink-content span {
display: block !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 0.3px;
margin-top: 2px !important;
text-transform: none !important;
white-space: normal !important;
}
}
/* === Mobile header: 16px ademruimte naast logo + krappere icon-gaps === */
@media (max-width: 991px) {
#site-header.medium-header .top-header-inner {
gap: 8px !important;
}
#site-header.medium-header .top-header-inner .logo-col {
padding-left: 0 !important;
padding-right: 0 !important;
}
#site-header.medium-header #site-logo #site-logo-inner a img {
max-height: 52px !important;
max-width: min(220px, calc(100vw - 190px)) !important;
padding-left : 16px;
padding-right : 16px;
}
.vsw-mobile-header-actions {
gap: 2px !important;
}
}
/* === Mobile search button: vergrootglas wit op zwarte achtergrond ===
Het FA-replacement mu-plugin (vsw-fa-replacements.php) rendert de
magnifier via mask-image met `background-color: currentColor`. De
`color: #fff` van de button erft naar de en daarvan naar het
mask -> wit vergrootglas. Daarom alleen color zetten, NIET
background-color (dat conflict met de mask-inkt). */
#vsw-mobile-search .search-submit,
#vsw-mobile-search .search-submit i,
#vsw-mobile-search .search-submit i.icon-magnifier {
color: #fff !important;
}
#vsw-mobile-search .search-submit svg,
#vsw-mobile-search .search-submit svg path {
fill: #fff !important;
}
#vsw-mobile-search .search-submit i.icon-magnifier:before,
#vsw-mobile-search .search-submit .icon-magnifier:before {
width: 1.6em !important;
height: 1.6em !important;
}
/* === A11y: footer-widget headings nu h2 (heading-order),
styling identiek aan eerdere h4 zodat visueel niets verandert. === */
#footer-widgets h2.widget-title {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 20px;
text-transform: uppercase;
}
/* === A11y: sitezilla subcategory sublist links -- min 24x24 tap target.
Lighthouse rapporteerde 201x18.9px (te kort verticaal). Verhoog
line-height + verticale padding zodat clickable area >= 24px. === */
.sz-subcategory-card__sublist > li > a {
display: inline-block;
line-height: 1.5;
min-height: 24px;
padding-bottom: 4px;
padding-top: 4px;
}
.sz-subcategory-card__sublist > li {
margin-bottom: 2px;
}
/* === KSS: 4 Produkte pro Reihe — Kategorie-/Shop-Archiv (Desktop) === */
@media (min-width:1025px){
body.woocommerce.archive ul.products,.tax-product_cat ul.products,.post-type-archive-product ul.products{
display:flex !important;flex-wrap:wrap !important;gap:2.6% !important;grid-template-columns:none !important;
}
body.woocommerce.archive ul.products li.product,.tax-product_cat ul.products li.product,.post-type-archive-product ul.products li.product{
width:23.05% !important;margin:0 0 2.2em 0 !important;float:none !important;clear:none !important;
}
}