/*
 Theme Name:   Magneet Agency Child
 Theme URI:    https://bureaumagneet.nl/
 Description:  Thema voor custom code
 Author:       Magneet Agency
 Author URI:   https://bureaumagneet.nl/
 Template:     bricks
 Version:      januari 2024
 Text Domain:  bricks
*/


/* Menu logo */

.sticky img.bricks-site-logo.css-filter {
    width: 80px;
}

.scrolling img.bricks-site-logo.css-filter {
	padding-top: 1rem;
	padding-bottom: 1rem;
    width: 200px;
}

/*Witte tekst*/
.witte-tekst{
	color:#ffffff;
}

.gouden-tekst{
	color:#A18740;
}

/* Checkout */

form.woocommerce-checkout.bricks-default-checkout {
    display: flex !important;
	flex-direction: column;
}

.woocommerce-billing-fields {
	background-color: #f1f2f3;
    padding: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 4.1667)), 6rem);
	border-radius: 10px;
}

div#order_review {
	background-color: #f1f2f3;
    padding: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 4.1667)), 6rem);
	border-radius: 10px;	
}

.zoomImg{
	margin-top: 20px !important;
}

button#place_order {
    background-color: #5AB927;
    color: white;
    border-radius: 50px;
    margin-top: 3rem;
}

.woocommerce-info {
    background-color: #DCCDA7 !important;
    color: #a18740 !important;
	border-radius: 10px;
}


/* Tekst */

.bm-t-container.bm-t-center.ref-schreef {
    font-family: "Besley";
}

.s-tekst a {
    text-decoration: underline;
}

/* Underline */

.woocommerce-product-details__short-description li a {
    text-decoration: underline;
}

/*Nav*/
.bm-nav-desktop nav {
    justify-items: center;
}

.sub-menu .menu-item a:hover {
    color: #a18740;
}

.brx-submenu-toggle.icon-right button {
    display: none;
}

/*Section aanpassen media*/
.s-bm-media-klein {
width: 100%;
display: flex;
justify-content: center;
}

.c-bm-media-klein {
width: 100%;
max-width: 1280px;
display:flex;
justify-content: center;
}

.mc-bm-media-klein {
width: 100%;
max-width: 765px;
}

.s-bm-media-groot {
width: 100%;
display: flex;
justify-content: center;
}

.c-bm-media-groot {
width: 100%;
max-width: 1280px;
}

.mc-bm-media-groot {
width: 100%;
}

.s-bm-media-fullscreen {
width: 100%;
}

.c-bm-media-fullscreen {
width: 100%;
}

.mc-bm-media-fullscreen {
width: 100%;
}

.iframe-img-bm-media-klein {
	width:100%;
	aspect-ratio: 2/1;
	object-fit: cover;	
	object-position: center;
}

.iframe-img-bm-media-groot {
	width: 100%;
}

.iframe-img-bm-media-fullscreen {
	width:100%;
	min-width:100%;
}

/*Placeholder*/
.media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-v-play-btn {
    font-size: 10rem;
}

/*Grid classes*/
.twee-items{
	grid-template-columns:repeat(auto-fill, minmax(490px, 1fr));
}

.drie-items{
	grid-template-columns:repeat(auto-fill, minmax(390px, 1fr));
}

.vier-items {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
}

.vier-items-ovz {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/*Bovenruimte*/
.ge-top{
	padding-top:0rem;
}

.k-top{
	padding-top:clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 1.0417)), 3rem);
}

.m-top{
	padding-top:clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 3.125)), 6rem);
}

.gr-top{
	padding-top:clamp(5rem, calc(5rem + ((1vw - 0.32rem) * 4.1667)), 9rem);
}
/*Onderruimte*/
.ge-bottom{
	padding-bottom:0rem;
}

.k-bottom{
	padding-bottom:clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 1.0417)), 3rem);
}

.m-bottom{
	padding-bottom:clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 3.125)), 6rem);
}

.gr-bottom{
	padding-bottom:clamp(5rem, calc(5rem + ((1vw - 0.32rem) * 4.1667)), 9rem);
}

/* Variatie product */

form.variations_form.cart {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*CTA*/
.bm-header-cta-container {
    display: flex;
    flex-direction: row;
    align-items: center;	
    gap: 10px;
}

.cta-container {
    display: flex;
    gap: 10px;
	margin-top: 2rem;
}

.cta-space {
	margin-top: 6rem;
}

.pri-cta, .sec-cta {
    padding: 6px 40px 9px 40px;
	transition: all 0.2s ease-in-out;
	display: flex;
    align-items: center;
    gap: 5px;
	border-radius:50px;
	font-size: 20px;
}

.pri-cta {
    background-color: #F82E3A;
    color: #fff;
}

.sec-cta {
    background-color: #fff;
    color: #000;
}

.pri-cta:hover {
    background-color: #DA0715;
    color: #fff;
}

.sec-cta:hover {
    background-color: #000;
    color: #fff;
}

.button-icon {
    width: 15px;
    height: 15px;
	fill:currentColor;
	display: flex;
}

/* Embed code */
.embed-container { 
    position: relative; 
    overflow: hidden;
    padding-top: 56.25%; /* voor 16:9 verhouding */
    height: 100%;
    width: 100%;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Grid */
.bm-grid-items-container {
	display: grid;
	gap: 15px;
	width:100%;
}

.c-grid{
	max-width:755px;
	width:100%!important;
}

/* Tekst */
/* Standaard styling voor de tekstcontainer */
.bm-t-container {
    /* Andere stijlen die je mogelijk al hebt ingesteld. */
}

/* Als centreren is ingeschakeld */
.bm-t-center {
    max-width: 765px;
    margin-left: auto;
    margin-right: auto;
}

/* Als smalle tekst is ingeschakeld */
.bm-t-small {
    max-width: 765px;
}

/* Stijlen om de knoppen te centreren wanneer tekst gecentreerd is */
.bm-t-center .cta-container {
    text-align: center; /* dit is om de knoppen te centreren */
	justify-content:center;
}


/* Tekst met media */

/* Basisopmaak voor de container */
.brxe-container.c-t-img {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 80px;
    grid-row-gap: 30px;
	align-items:center;
}

/* Standaard opmaak voor afbeeldingen */
.dr-t-img img.t-img {
    width: 100%;
}

/* Als huisstijl is ingeschakeld */
.dr-t-img img.t-img.tidesign {
    width: 100%;
    height: 440px;
    object-fit: cover;
}

/* Standaard order voor kinderelementen */
.brxe-container.c-t-img .dl-t-img {
    order: 0;
}
.brxe-container.c-t-img .dr-t-img {
    order: 1;
}

/* Wanneer de volgorde is veranderd */
.brxe-container.c-t-img.t-img-order .dl-t-img {
    order: 1;
}
.brxe-container.c-t-img.t-img-order .dr-t-img {
    order: 1;
}

/*andere styling voor mobiel*/
@media screen and (max-width: 992px) { /* Pas deze breakpoint aan indien nodig */
    .mobile-order {
        display: flex;
        flex-direction: column;
    }

    .mobile-order .<?php echo $text_class; ?> {
        order: 2;
    }

    .mobile-order .<?php echo $base_class; ?> {
        order: 1;
    }
}

/*Wanneer fullscreen is ingeschakeld*/
.t-m-section-full {
    padding: 0rem!important;
	height:90vh;
}

.t-m-fullscreen {
    width: 100%!important;
	padding: 0rem!important;
	height:100%;
}

.t-m-fullscreen .t-img-text {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.t-m-fullscreen .t-m-fullscreen-center {
    max-width: 500px;
}

.t-m-fullscreen .bm-media{
	height:100%;
	min-height:100%;
}

.t-m-fullscreen .iframe-img-bm-media {
    min-width: 100%;
	min-height:100%;
}

.light-text {
  color: white;
}

.dark-text {
  color: black;
}

.t-img-titel{
	width:100%;
	max-width:1280px;
}

.t-img-titel h2, .t-m-fullscreen-center h2{
    font-size: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 1.25)), 3.2rem);
}

/* Zoekresultaten */
.bm-search-results {
    margin: 20px 0;
    padding: 0;
}

.bm-search-result {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
}

.bm-search-result-image {
    flex: 1 1 100px;
    margin-right: 20px;
}

.bm-search-result-image img {
    max-width: 100%;
    height: auto;
}

.bm-search-result-content {
    flex: 1 1 calc(100% - 120px);
}

.bm-search-result-content h3 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
}

.bm-search-excerpt {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* Overzicht */
.c-ovz h2 {
    margin-bottom: 2rem;
}

.cta-container.ovz-cta {
    width: 100%;
    justify-content: center;
}

.bm-ovz-container {
    display: grid;
	width: 100%;
	gap: 30px;
}

.bm-ovz-img-wrapper .bm-ovz-title h3 {
	font-size: 18px;
}

.bm-ovz-img-wrapper {
    display: block;
    overflow: hidden; /* Voor het geval dat je specifieke styling of extra bescherming tegen overloop wilt toevoegen */
}

.bm-ovz-block:hover .bm-ovz-img {
    transform: scale(1.1); /* Inzoomen met een factor van 1.1 */
}

.bm-ovz-img {
	width: 100%;
    object-fit: cover;
    object-position: center;
	transition: transform 0.3s ease; /* Soepele overgang gedurende 0.3 seconden */
    display: block; /* Zorgt ervoor dat de afbeelding zich correct gedraagt tijdens de overgang */
	overflow: hidden;
}
.bm-ovz-content {
	text-align:center;
}

.bm-ovz-price {
    color: #A18740;
    font-size: 14px;
}

.ter-cta {
	font-weight: 700;
	font-style: italic;
	color: var(--bricks-color-suagdr);
    display: inline-block;
    margin-top: 5px; /* wat ruimte tussen de titel en de knop */
}

.bm-ovz-block:hover .ter-cta {
    color: #ff0000;
}

.bm-ovz-block {
    overflow: hidden;
}

.bm-ovz-title {
    margin: 10px 0 0 0; /* wat ruimte tussen de afbeelding en de titel */
	font-size: 20px;
}

.bm-ovz-container {
    margin-bottom: clamp(3rem, calc(3rem + ((1vw - 0.48rem) * 2.5)), 5rem);
}

.cta-container.ovz-cta-c {
    width: 100%;
    justify-content: center;
}

img.bm-grid-items-img {
    height: 100%;
    object-fit: cover;
}

/*Slider*/
p.slider-tools-p-titel {
    font-size: 20px;
    text-align: center;
    margin-top: 2rem;
}

div#tools-slider {
    width: 100%;
}

.splide__list{
	gap:10px;
}

.splide__slide img{
    width: 100%;
}

.splide__arrow {
    background-color: transparent!important;
}

.splide__arrow--prev {
    position: absolute!important;
    left: -5%!important;
}

.splide__arrow--next{
	position:absolute!important;
	right:-5%!important;
}

.splide__pagination{
	display:none!important;
}

/*tekst en 2 afbeeldingen*/
.brxe-container.c-t-2-img {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.t-2-img-tekst-wrap {
    width: 100%;
    max-width: 760px;
}

.t-2-img-tekst-wrap h2{
	color:#A18740;
	font-size:clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 1.25)), 3.2rem);
}

.t-2-img-afbeelding-links, .t-2-img-afbeelding-rechts {
    width: 100%;
    max-width: 272px;
}

/*3 teksblokken*/
.brxe-container.c-3-tekstblokken {
    align-items: center;
}

.tekstblok-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}

img.tekstblok-afbeelding {
    width: 100%;
	object-fit: cover;
	object-position: center;
	height: 300px;
}

.tekstblok-item {
    font-size: 20px;
}

/*Achtergrond afbeelding met tekst*/
.bgimg-wrap {
    width: 100%;
    max-width: 765px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
	flex-direction:column;
}

.bgimg-image {
    margin-top: 19rem;
}

.bgimg-text {
    margin-top: 19rem;
}

/*2 afbeeldingen*/
.bm-2-afbeeldingen-img-1 {
    height: 260px;
    object-fit: cover;
}

/*quote*/
.bm-q-container {
    font-size: clamp(4rem, calc(4rem + ((1vw - 0.32rem) * 5.625)), 9.4rem);
    text-align: center;
	font-weight:600;
	font-family: "Besley";
}


/*Media*/
@media screen and (max-width: 992px) {
	.splide__arrow--prev{
		left:0!important;
	}
	.splide__arrow--next{
		right:0!important;
	}
	
	.brxe-container.c-t-2-img{
		justify-content: center;
		gap:30px;
	}
	
	.tekstblok-wrap{
		flex-direction:column;
	}
	
	.bgimg-image {
    	margin-top: 2rem;
	}
	.bgimg-text{
		margin-top:2rem;
	}
	.bgimg-wrap .pri-cta {
    	margin-top: 4rem;
	}
	
	.vier-items-ovz, .vier-items  {
    	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
	
	.splide {
   		width: 100%;
	}
	.splide__list{
		gap:0!important;
	}
	
	.pri-cta, .sec-cta {
    	padding: 5px 20px 8px 20px;
	}
	
	.cta-space {
		margin-top: 1rem;
	}
	
	.s-bm-header-home.brxe-section {
    background-image: none;
    background-color: #24294a;
}
	
	#brxe-znjwrk{
		margin:0!important;
	}
	
	.bgimg-wrap {
		display: flex;
		flex-direction:column;
	}
	
	.brxe-woocommerce-mini-cart .cart-detail{
		width:fit-content!important;
	}
}

/* Hero 1 */

.s-hero-1 .cta-container.cta-space {
    justify-content: center;
}

/* 2 producten */

.ref-container {
		display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	
}

.ref-title {
	display: flex;
    flex-direction: column;
    align-items: center;
	font-size: 20px;
	font-family: 'Outfit'
}

.ref-item {
	display: flex;
    flex-direction: column;
	row-gap: 10px;
}

img.ref-thumbnail.wp-post-image {
    width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Product */
tr.woocommerce-product-attributes-item.woocommerce-product-attributes-item--weight {
    display: none;
}

/* producten slider */

.ref-ps-swiper-container {
	position: relative;
    width: 100%;
    margin: 0 auto;
		overflow: hidden;

}
.swiper-wrapper {
}
.ref-ps-swiper-wrapper {
    display: flex;
    align-items: center;
}

.ref-ps-swiper-slide {
    text-align: center;
    padding: 10px;
    flex-shrink: 0;
    width: auto;
}

.ref-ps-slide-link {
    text-decoration: none;
    color: inherit;
}


.ref-ps-slide-image-container img {
    width: 100%;
    height: auto;
background-color: #ededed;
  transition: transform 0.3s ease;
}

.ref-ps-slide-image-container img:hover {
    transform: scale(1.05);
}

.ref-ps-slide-title h3 {
    font-size: 15px;
	font-weight: 400;
	font-family: 'Outfit';
    margin-top: 10px;
    color: #333;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.ref-ps-swiper-button-prev, 
.ref-ps-swiper-button-next {
    color: #000 !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
}

.ref-slider-con {
    position: relative;
    overflow: hidden; /* Zorg dat inhoud buiten de slider niet zichtbaar is */
}

.ref-ps-swiper-container {
    position: relative;
}

.ref-ps-swiper-button-prev {
    left: 0px; /* Plaats binnen de linkerzijde van de slider */
}

.ref-ps-swiper-button-next {
    right: 0px; /* Plaats binnen de rechterzijde van de slider */
}

.ref-ps-swiper-pagination {
    bottom: 10px; /* Houd paginatie dicht bij de onderkant van de slider */
}



.swiper-button-lock {
    display: block !important;
}



/* Styling voor hover-effect */
.ref-ps-swiper-button-prev:hover, 
.ref-ps-swiper-button-next:hover {
    color: #555; /* Lichtere kleur bij hover */
}

/* Woocommerce */
form.cart {
    display: flex;
    flex-direction: row;
    align-items: center;
}

form.cart .quantity, form.woocommerce-cart-form .quantity {
    width: 100px !important;
	margin-right: 2rem;
}

form.cart .quantity .qty, form.woocommerce-cart-form .quantity .qty {
border-style: none !important;

}

form.cart .quantity .qty, form.woocommerce-cart-form .quantity .qty {
    background-color: #fff;
}

form.cart .quantity+button,form.woocommerce-cart-form .quantity+button {
    margin-top: 0px !important;
}
form.cart .quantity .minus, form.cart .quantity .plus, form.woocommerce-cart-form .quantity .minus, form.woocommerce-cart-form .quantity .plus {
display: none !important;
}

.woocommerce-product-attributes-item {
width: 100%;
max-width: 480px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-column-gap: 30px;
grid-row-gap: 30px;
}

p.woocommerce-mini-cart__buttons.buttons {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
}

a.button.checkout.wc-forward {
    background-color: #F82E3A !important;
}

.woocommerce-message{
	margin-top: 95px !important;
	width: 100% !important;
}

.woocommerce-notices-wrapper:not(:empty) {
    	margin-bottom: 0px !important;
}

@media only screen and (max-width: 991px) {
	.woocommerce-message{
	margin-top: 100px !important;
	width: 100%;
	}
}

@media only screen and (max-width: 468px) {
	.woocommerce-product-attributes-item{
		max-width: unset !important;
		grid-row-gap: unset !important;
	}
	
	.woocommerce table th {
/* 		margin-top: 15px; */
	}
}



.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	margin-top: 60px !important;
}

#brxe-c27305{
	padding: 2rem;
}