@media only screen and (max-width: 979px) {

	.rightBox { width: 100%; padding: 10px 0px 0px 0px; }
	#headerCntr .logo { width: 480px; margin: 0px auto; float: none; text-align: center; }
	#headerCntr .logo img { display: inline-block; margin-top:7px; }
	#headerCntr .logo .tagline { font-size: 14px; bottom: 20px; }

	#headerCntr .menuBox { display: none; }
	#headerCntr .mobileMenu {
		display: block;
		position: absolute;
		left: 0;
		width: 65px;
		height: 50px;
	}
	.hamburger-menu {
		display: inline-block;
		cursor: pointer;
		background-color: transparent; /* Achtergrondkleur van de knop */
		border: 1px solid #6b952d; /* Verwijder de rand indien het een knop is */
		border-radius: 3px;
		padding: 8px; /* Afstand rondom de lijnen */
		margin:7px;
	}

	.hamburger-menu span {
		display: block;
		width: 24px; /* Breedte van elke lijn */
		height: 4px; /* Hoogte van elke lijn */
		margin-bottom: 4px; /* Afstand tussen de lijnen */
		background-color: #6b952d; /* Kleur van de lijnen */
		transition: all 0.3s ease-in-out;
	}

	.hamburger-menu span:last-child {
		margin-bottom: 0; /* Geen marge voor de laatste lijn */
	}
	

	.greenBox { padding: 14px 0px; }
	.listBoxUsp li { width:100%; padding-bottom: 10px; }

	#leftCntr { width: 100%; padding: 0px 0px 20px 0px; }
	.rightCntr { width: 100%; }
	.deliveredBox p { line-height: 35px; }
	.whatsappBox { padding: 15px 10px 15px 74px;}

	.flowerBox li { width: 33.3%; }

	.breadcrumbsBox p{ display: none; }
}

@media only screen and (max-width: 767px) {
	.importantmessagebox {height:56px;}
	.center { padding: 0px; }
    h2.ProdTitleDesktop { display: none; }
	.rightBox { display: none; }
	.topBox { display: none; }
	.greenBox { display: none; }
	#headerCntr .mobileMenu { top: 0px; }
	#headerCntr a.mobileMenuLink { display: block; position: absolute; top:0px; left: 0; margin:18px 0 0 18px; color:#a1a1a1; font-size:14px; font-weight:bold; text-decoration: none; }
	.mobileHeaderBox { overflow: hidden; height: 52px; display: block; margin: 0px -10px; margin-bottom: 15px; background:#f9f9f9; border-bottom: 1px solid #e1e1e1; }
	.mobileHeaderBox .mobilelogo { width: 96px; height: 52px; position: absolute; left: 50%; top: 0px; margin-left: -48px; display: block;}
	.mobileHeaderBox .mobileicons { width: 70px; height: 52px; padding: 12px 20px 15px 20px; display: block; float: left; }
.mobileHeaderBox .mobilecart { float: right; border-left: 1px solid #e9e9e9;   background: url(../images/winkelwagen_123bloemen.png) center center no-repeat; background-size: 26px; }
.mobileHeaderBox .user { float: right; border-left: 1px solid #e9e9e9; background-size: 22px;}
.person-icon svg {
    width: 28px;
    height: 28px;
    fill: #b1b1b1;
}	
.logged-in svg {
    fill: #6b952d !important; 
}
	
.mobileHeaderBox .question { float: right; border-left: 1px solid #e9e9e9;  background: url(../images/info-icon.png) center center no-repeat; background-size: 26px;}
	
/* Trustpilot widget in mobileHeaderBox */
.mobile-trustpilot {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 10px;
	margin-top: 3px;
    max-width: 120px; /* Zorgt ervoor dat het niet teveel ruimte inneemt */
}

/* Zorgt ervoor dat de widget niet groter wordt dan nodig */
.mobile-trustpilot .trustpilot-widget {
    max-width: 100px;
    height: 30px; 
    overflow: hidden;
}
	

#headerCntr .logo { width: 300px; margin: 0px auto; }
.bannerBox.categories { display:none; height: 200px; }	
.bannerBox.home, .bannerBox.rozen, .bannerBox.fruit, .bannerBox { border-radius: 0px; border: none; }
.bannerBox.home { border-top: 1px solid #fff; }	
	
    #chat-window {
        position: fixed;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		max-width: 400px;
        max-height: 70vh;		
        overflow: hidden; /* voorkomt scrollen van de pagina */
    }

    #chat-messages {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* zorgt voor soepel scrollen op mobiel */
        max-height: calc(100vh - 150px); /* past hoogte aan om mobiel volledig te benutten */
    }	
	#chat-input {
		position: sticky;
		bottom: 0;
		z-index: 10;
	}	
	
	.CategorieTekst, .faq-section {
		border-radius: 15px;
		border: none;
		width:95%;
		margin: 0 auto;
		margin-top: 10px;
	}
	.CategorieTekst p,
	.CategorieTekst h1,
	.CategorieTekst h2,
	.CategorieTekst h3,
	.CategorieTekst h4,
	.CategorieTekst h5 {
		text-align: center !important;
		width:100%;
	}
	
	.faq-item { width:100%; }


	.listBoxUsp { background-color:#ffffff; }
	.listBoxUsp ul { max-width: 480px; margin: 0px auto; overflow: hidden; }
	.listBoxUsp li { width: 100%; display: block; float: left; text-align: center;}
		.listBoxUsp li::before {
			top: 3px; /* verschuift het vinkje 5 pixels naar beneden */
		}
	
/* #headerCntr .logo { display: none; } */
/* .mobilelogo2 { padding: 0px 0px 8px 0px; width: 370px; display: block; margin: 0px auto; } */
/* .mobilelogo2 .tagline {  line-height: 24px; width: 100%; text-align: center; font-size: 14px; color: #555;  } */	
	
.deliveryDate { padding: 6px 0px; background: #6b952d; display: block;  margin: 0px; }
.deliveryDate p { font-size: 14px; color: #fff; text-align: center; line-height: 22px; }
.deliveryDate strong { display: block; font-weight: bold; }
.sendBox { text-align: center;  }

.deliveredBox p { line-height: 20px; }

.mobileshow { padding: 10px 0; display: block; }
.mobilehide { display: none; }

.flowerBox { text-align: center; }
    .flowerBox ul li {
        width: calc(50% - 20px);
    }
    
    .flowerBox ul li:nth-child(2n + 1) {
        margin-left: 0;
    }
    
    .flowerBox ul li:nth-child(2n) {
        margin-right: 0;
    }	
.flowerBox li.related { width: 50%; }
    .flowerBox span.button {
        display: none !important;
    }
    .flowerBox span.buttonMobile {
        display: block !important;
		padding: 7px 21px; font-size: 12px; color: #fff; font-weight: normal; line-height: 18px; background: #6b952d;border-radius: 25px;width: 80%; margin:0 auto; margin-top: 8px;
    }
	
a.leesMeer { border-bottom: none; }	

    .product-detail {
        display: flex;
        flex-direction: column;
		border:none;
		padding:none;
    }
	
    .product-image,
    .product-info {
        flex-basis: 100%;
        max-width: 100%;
		box-shadow: none;
		padding: 0px;
		border:none;
		border-radius:0px;
    }
	
	h2.ProdTitleMobile { display: block; color:#6b952d; text-align: center; font-size: 24px; padding: 10px 0; }
	.breadcrumb.desktop { display: none; }
	.breadcrumb.mobile { display: block; margin: 0 auto; text-align: center; padding-bottom: 10px; }
	
	.product-info h1,
    .product-info h2,
	.product-info h3,
    .product-info p {
        text-align: center;
		margin: 0 auto;
		width:90%;
    }
	.product-info p { margin-bottom: 25px; margin-top: 25px; }
    .description-desktop {
        display: none;
    }

    .description-mobile {
        display: block;
    }	
    .product-detail {
        display: block;
    }

    .size-selection {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; /* Dit zorgt ervoor dat de knoppen gelijkmatig zijn verdeeld */
		width:80%;
		margin: 0 auto;
		margin-top: 25px;
    }

    .size-label {
        flex: calc(33.33% - 10px); /* Zorgt ervoor dat er 3 knoppen op een rij komen met een kleine ruimte ertussen */
        margin-bottom: 10px; /* Geeft wat ruimte onder elke button set op mobiel */
    }
	
    .card-container {
        flex-direction: column;
        align-items: flex-start;
		padding:0px;
		background: #fff;
		border:none;
    }
	
	div.AddonsBox {
		margin: 10px;
	}
	
	.AddonsBox h3 { text-align: center; margin-bottom: 20px; }
	
	.personal-card select {
		width: 100%;
		height: 40px;
	}
	
	.address-form select {
		width: 100%;
		height: 40px;
	}

    .mobile-text.show {
        display: block; /* Toon de mobiele tekst */
        margin-bottom: 10px;
    }
	
	input.ribbontextarea { width: 100%; }
	input[name^="ribbonText"] {
	  width: 315px;
	}	
	.input-container {
	  width: 315px;	

	}	
	
    .card-image,
    .card-textarea {
        width: 100%;
        max-width: none; /* Zet de maximale breedte uit */
		border:1px solid #e1e1e1;
		border-radius: 7px;
    }	
	div#charCounter { width: 100%; }
	
	.card-image { margin-bottom:15px;  }
	.card-textarea { height: 150px; }
	.card-textarea.preview {
	  border-radius:7px;
	  border: 1px solid #d1d1d1;
	}
	
	.groeneBestelKnop {
 		width: 90%;
		margin:0 auto;
		display: block;
		margin-top: 25px;
	}
	
	.usp-container {
		padding: 20px;
	}
	
    .additional-info-section {
        flex-direction: column; /* Kolommen worden onder elkaar gestapeld */
		width: 95%;
		margin: 0 auto;
    }

    .additional-info-left,
    .additional-info-right {
        flex: none; /* Reset flex-basis voor kolommen */
        width: 100%; /* Beide kolommen nemen 100% van de breedte in */
        border-left: none; /* Verwijder de scheidingslijn op mobiel */
    }
	.additional-info-right {
    	padding-left: 10px;
	}
	
    .popup {
        width: 90%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
	.popup button { margin-bottom: 15px; }
	
	.shopping-cart {
	 padding: 0px;	
	}
	
	.shopping-cart h1 {
		margin-top: 15px;	
	}
	
	div.cartnotification {
		width:90%;
		margin:0 auto;
		top: 0px;
	}
	
    .cart-item {
        flex-direction: column;
        align-items: flex-start;
		padding: 0px;
		border-radius: 0;
		border:none;
    }

    .cart-item-left, .cart-item-middle {
        width: 100%;
		padding:  0px;
		border:none;
    }

    .cart-item-left {
        display: flex;
        justify-content: center;
		text-align: center;
    }
	
	.cart-item-left { margin: 0 auto; }

    .cart-item-image img {
        max-width: 100%;
    }
	
	.checkout-right .cart-item-image {
		width: 55px;
		height: 55px;
	}	
	
	.cart-item-middle { padding-bottom:15px; }
	.cart-item-middle p, .cart-item-middle h2, .cart-item-middle h3 { text-align: center; }
	.cart-item-details p { font-size:14px; }
	.cart-item-details p.TextCardP { width: 85%; margin: 0 auto; }	
	.cart-item-middle .mobileCntrAddons { text-align: center; font-size:14px; }
	.cart-item-middle ul { padding: 0; margin: 0 auto; display: inline-block; text-align: left; }
	.cart-item-middle ul li { margin: 0 10px;  }
	.cart-item-middle .btn-addons { margin:0 auto; display: block; margin-top:15px; font-size:14px; }
	
	.cart-item-right { border-radius:10px; border: 1px solid #f1f1f1; margin: 0 auto; margin-bottom: 20px; width: 90%; box-shadow: none;position: relative; }
	/* Pijl toevoegen aan de top van de .cart-item-right */
	.cart-item-right::before {
		content: "";
		position: absolute;
		top: 0px; /* Aangepast naar gewenste positie */
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 25px solid transparent;
		border-right: 25px solid transparent;
		border-top: 15px solid #f1f1f1;
	}	
	.cart-item-right p, .cart-item-right h3 { text-align: center; }
	.cart-item-right .btn-address { margin:0 auto; display: block; margin-top:15px; padding:15px; font-size: 14px; font-weight: bold; width:80%; }
	
	.cart-item-details { padding: 0px; }
	
	.AddonsBoxItems {
		border-top:1px solid #f1f1f1;
		width: 100%;
	}	
	
    .quantity-wrapper {
        justify-content: center;
		margin-top:15px;
		padding: 20px;
    }	
	.quantity-input {
		border-radius: 0px;cart-item-right
		font-size: 13px;
		padding: 10px;
	}
	
	.quantity-button {
		width: 40px;
		height: 38px;
		font-size: 17px;
	}
	
	.quantity-button.plus {
		margin-right: 55px;	
	}

	.quantity-button.remove {
		border: none;
		margin-right: 15px;
		color: #777;
		background-color: transparent;
	}

	.quantity-button.remove img {
		width: 22px;
		height: auto;
	}	
	
	.address-row {
	 width: 100%;	
	}



    .date-form input[type="date"] {
        width: 100% !important; /* Forceer volledige breedte */
    }

    .btn-delete, .btn-addons, .btn-address {
        width: 60%;
		padding: 15px;
    }
	
	.btn-save, .btn-cancel {
        width: 50%;
		padding:15px;
		margin-right:10px;
		font-size: 14px;
		font-weight:bold;
    }
	
	.btn-cancel.small {
		padding:15px;
		width: 25%;
	}	

	.btn-save.big {
		width: 66%;
	}		
	
	.btn-save.invoices {
		width: 60%;
	}
	
	.btn-addons {
		padding:10px;
		margin:0 auto; display: block; margin-top:15px;
	}
	
	div#discount-code-field {
		width:90%;
		margin:0 auto;
	}	
	
	div.cartnotificationsmall {
		width:90%;
		margin: 0 auto;
    	margin-top: 15px;		
	}
	p.checkouterrormsg {
		width:75%;
		margin: 0 auto;
    	margin: 15px;		
	}
	div.save-warning-notification {
		width:75%;
		margin: 0 auto;
    	margin-top: 15px;
		margin-bottom: 15px;
		display: block;
	}
	
	.incompleteshoppingcart {
		width:90%;
		margin:0 auto;
		margin-top: 15px;
		margin-bottom: 15px;
	}	
	
    .checkout-container {
        flex-direction: column;
    }

    .checkout-left,
    .checkout-right {
        flex: 1;
        margin-bottom: 20px;
		border-radius: 0px;
		border-right: none;
		border-left: none;
    }	
	.checkout-right {
		box-shadow: none;
	}
	
	.checkout-left input[type="text"],
	.checkout-left input[type="email"],
	.checkout-left input[type="tel"],
	.checkout-left input[type="number"],
	.checkout-left select,
	.account-optin-box {
		width:100%;
	}    
	.btn-addons.invoices {
	 margin:0 auto;
	 display: block;
	}
	.btn-checkout { 
	    padding: 15px 25px;
		width: 95%;
	}
	.btn-checkout.top {
		padding: 7px 15px;
		width: 70%;
	}	
	.checkouterrormsg {
		width: 95%;	
	}
	
	.trustpilot-widget.shoppingcart { margin-bottom: 25px;}
	
    .klantlogin-container {
        flex-direction: column;
        gap: 20px;
    }

    .form-container {
        text-align: center;
		border-radius: 0px;
		box-shadow: none;
		border:none;
		
    }
	
    /* Maak de tabel scrollbaar op kleine schermen */
    .table-orders {
        min-width: 600px; /* Pas minimale breedte aan voor kleinere schermen */
    }
	
    .account-container {
        flex-direction: column;
    }

    .account-sidebar {
        width: 90%;
        margin-bottom: 20px;
        padding: 20px;
        box-shadow: none;
		border-radius: 0px 0px 10px 10px;
		border:none;
		margin: 0 auto;
    }

    .account-sidebar ul {
        display: none; /* Verberg het menu standaard */
    }

    .account-sidebar.active ul {
        display: block; /* Toon het menu als actief */
    }

    .account-sidebar::after {
        content: "Menu openen";
        display: block;
        background-color: #F68D1F;
        padding: 12px;
        border-radius: 10px;
		color: #fff;
        cursor: pointer;
        text-align: center;
        font-weight: bold;
		
    }

    .account-sidebar.active::after {
        content: "Menu sluiten";
    }

	.account-content {
		width: 100%;
		padding: 15px;
		border: none;
	}
	
	/* Formuliervelden: klantaccount: */
	.order-history { width:100%;}
	.order-history input[type="text"],
	.order-history input[type="email"],
	.order-history input[type="tel"],
	.order-history input[type="number"],
	.order-history input[type="password"],
	.order-history textarea,
	.order-history select {
		width: 95%;
		padding: 10px;
		margin-bottom: 10px;
		border: 1px solid #b9b9b9;
		border-radius: 5px;
		font-size: 16px;
		box-sizing: border-box;
	}
	
	div.photouploadbox{
		margin-bottom: 10px;
		background: #fff;
		padding:15px;
		width:95%;
		border-radius: 5px;
		border:1px solid #b9b9b9;
	}

    .order-products ul {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #333 !important;
    }

    .order-item-details {
        font-size: 12px !important; /* Specifieke, kleinere grootte voor mobiele apparaten */
        line-height: 1.4 !important;
    }

    .order-items-wrapper {
        gap: 10px; /* Iets minder ruimte tussen items op mobiele schermen */
    }
	
	.btn-login.orange.save {
		width: 100%;
	}
	.btn-login.green.save {
		width: 100%;
	}	
	
	.LokaalPagesContent {
    	border: 1px solid #ddd;
		border-left: none;
		border-right:none;
    	border-radius:0;
    	padding: 15px;	
	}
	.LokaalPages p { width: 90%;}
    .LokaalPagesContent .button-container {
        flex-direction: column;
        align-items: center;
    }	
	.popular-places {
		width: 100%;	
	}
    .usp-section {
        flex-direction: column;
        align-items: center;
    }

    .usp-block {
        flex: none; /* Schakel flex-grow en flex-shrink uit */
        width: 100%; /* Zorg dat alle blokken dezelfde breedte hebben */
        max-width: 100%;
        margin: 0 0 20px; /* Alleen marge aan de onderkant voor consistentie */
    }

    .usp-block:last-child {
        margin-bottom: 0; /* Geen marge onder het laatste blok */
    }

    .usp-block h3 {
        font-size: 1.1rem;
    }

    .usp-block p {
        font-size: 0.9rem;
    }
	
    .track-trace-page .container {
        padding: 15px;
    }

    .track-trace-page .order-item {
        flex-direction: column;
        text-align: center;
    }

    .track-trace-page .order-item div {
        padding-left: 0;
        margin-bottom: 10px;
    }

    .track-trace-page .order-item img {
        margin-bottom: 10px;
    }

    .track-trace-page .btn-view-all {
        width: 100%;
        padding: 10px 0;
    }	

.textBox { display: none; }

.productBox .button  { display: block; }
	.productBox .button.active { background: #999999 url(../images/arrow-down.png) no-repeat right 20px center; }
.productBox { padding: 13px; }
 .productBox .block { display: none;}
 .productBox h4 { text-align: center; }
 .productBox li { text-align:center;}
  .productBox .checkbox { display: block; }
 .checkoutBox h4 { text-align: center; }

.backtotop { width: 40px; height: 40px; display: none; position: fixed; bottom: 20px; right: 20px; margin-top: -29px; background: #52700E; border-radius: 10%; opacity: 0.7; }
.backtotop::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid white; transform: translate(-50%, -50%); }	

.newsletterBox .detail p { display: none;}
.newsletterBox .detail strong { padding-bottom: 10px; display: block;}

.productBox li { width:calc(50% - 10px);}

.paymentBox { padding: 0px 0px 10px 0px; width: 100%; }
	
	#footerCntr { padding: 20px; margin-top: 0px; }
	
    .footer-copyright-wrapper {
        flex-direction: column; /* Stapelelementen onder elkaar */
        align-items: center; /* Centreer de elementen */
        text-align: center;
    }

    .footer-copyright-left {
        margin-bottom: 20px; 
        justify-content: center;
    }

    .footer-copyright-right {
        text-align: center;
        margin: 0;
    }

}

@media only screen and (max-width: 479px) {

	.mobilelogo2 { width: 300px; }
	.mobilelogo2 img { max-width: 95%; margin: 0 auto; }

    .bannerBox.home {
        background: url("/assets/images/banners/mobile-banner-fleur.webp") center no-repeat;
        background-size: cover; /* Zorgt ervoor dat de afbeelding volledig zichtbaar blijft */
        height: 150px; /* Aanpassen aan een gepaste hoogte voor mobiel */
		display: none;
    }
    .bannerBox.rozen {
        background: url("/assets/images/banners/mobile-banner-rozen.webp") center no-repeat;
        background-size: cover; /* Schaal de afbeelding passend */
        height: 150px;
		display: none;
    }
    .bannerBox.fruit {
        background: url("/assets/images/banners/mobile-banner-fruit.webp") center no-repeat;
        background-size: cover;
        height: 150px;
		display: none;
    }

	.flowerBox h1 { font-size: 22px; color: #6b952d; font-weight: bold; }
	.flowerBox h2 { font-size: 18px; }
	.flowerBox ul { margin: 0px; margin-bottom: 10px; }
	.flowerBox li { height:300px; }
	.flowerBox.catimage ul { width:95%; margin: 0 auto; }
	.flowerBox.catimage li { width: 49%; border: 1px solid #f6f6f6; height:200px; margin: 1px; padding-right: 0px; }
    .flowerBox.catimage li .overlay-title {
        font-size: 14px;
        padding: 4px 8px;
        top: 5px;
        left: 5px;
		max-width: 100%;
    }	
	.flowerBox .title { height: 55px; width: 90%; font-size:14px; padding:5px; }
	.flowerBox span.button {
        display: none !important;
    }
	.flowerBox li a:hover,.flowerBox li.active a { box-shadow:none; border-radius:0px; }
	.flowerBox ul li:hover img { transform:none; }	
	.flowerBox span.buttonMobile {padding: 7px 15px; display: block; font-size: 14px; color: #fff; font-weight: normal; line-height: 18px; background: #6b952d;border-radius: 25px;width: 80%; margin:0 auto; margin-top: 8px;}

	.flowerBox a.BekijkCategorie { background: #F68D1F;}
   	.flowerBox a.BekijkCategorie:hover { background: #333; }

	.flowerBox .price { display: block;}
	.mobileHeaderBox .mobilelogo { margin-left: -44px;}
	.mobileHeaderBox .mobileicons { width: 65px; }
	
    .track-trace-page h2 {
        font-size: 20px;
    }

    .track-trace-page .btn-view-all {
        font-size: 14px;
    }	

}