:root {
	--banner-height: 300px;
	}

body {
	background-color: #fff0F5;
	font-size: 16px;
	margin: 0px;
	font-family: "Cormorant Garamond", serif;
	}

body.checkout-open {
	overflow:hidden;
	}

.site-header {

	position: sticky;
	top: 0;
	z-index: 1000;

	display:flex;
	justify-content: space-between;
	align-items: center;

	padding: 12px 40px;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);

	border-bottom: 1px solid rgba(0, 0, 0, 0.08);

	}

.nav-left,
.nav-right {

		display:flex;
		align-items: center;
		gap: 32px;
		flex: 1;
	}

.nav-left {

		justify-content: flex-start;
	}

.nav-right {

		justify-content: flex-end;
	}


.nav-left .current,
.nav-right .current {

		font-weight: bold;
		text-decoration: none;
		cursor: default;
		color: #333;

	}

.site-header nav a,
.site-header nav span {

		font-family: 'Quicksand', sans-serif;
		font-size: 1.1rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;

		color: #2f2f2f;
		text-decoration: none;

		padding: 8px 4px;
	}

.site-header nav a:hover {

		color: #6b8f71;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

.site-header .current {

		font-weight:600;
		color: #3b2f2a;
		cursor: default;
		text-decoration: underline;
		text-underline-offset: 4px;

	}
.header-logo {

	height:90px;
	flex-shrink: 0;
	

	}
h1 {
	text-align: center;
	width: min(980px, 92%);
	margin: 28px auto 14px;
	font-size: clamp(2.6rem, 5vw, 4.4rem);
	font-family: "Allura", cursive;
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.15;
	color: #5a4a40;
	text-shadow: 0 1px 10px rgba(255,255,255,0.55);
	

	}


h2 {
	text-align: center;
	width: min(920px, 92%);
	margin: 0 auto 16px;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-family: "Allura", cursive;
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.18;
	font-style: italic;
	color: #6b5a4c;
	text-shadow: 0 1px 8px rgba(255,255,255,0.45);

	}
p { 
	text-align: center;
	max-width: 72ch;
	margin: 0.7rem auto;
	line-height: 1.65;
		
}


#banner {
		width: 100%;
		height: 200px;
		overflow: hidden;

	}

#banner img {
		width:100%;
		height: 100%;
		object-fit: cover;

		}


.content {
		min-height: calc(100vh - 120px);
		display:flex;
		justify-content: flex-start;
		flex-direction: column;
		align-items: stretch;
		box-sizing: border-box;
		background-image:
			linear-gradient(
				rgba(255,255,255,0.8),
				rgba(255,255,255,0.8)
				),
			url('/pics/collage.png');
		background-size:cover;
		background-repeat: no-repeat;
		background-position: center;
		background-color: rgba(255, 255, 255, 0.6);
		backdrop-filter: blur(6px);
		background-attachment: fixed;

	}

.top {
		width: 100%;
		height: auto;
		margin: 10px 0; 
	}

.top h1,
.top h2 {

		text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 2px rgba(255,255,255,0.9);

	}

.intro {
		top: 20%;
		padding: 20px;

	}
.intro p {
		font-size: 1.5em;
		text-shadow: 0 0 8px rgba(255,255,255,0.8);
		background: #d0ddc3;
		padding: 15px 20px;
		border-radius: 10px;



		gap: 20px;
		align-items: center;
	}

.container {

	}

#popUpOverlay {
		
		position:fixed;
		left: 0;
		top: var(--banner-height);
		width: 100%;
		height: calc(100vh - var(--banner-height));
		overflow: auto;	
		background-color: rgba(0, 0, 0, 0.5);
		display:none;
		justify-content: center;
		align-items:center;
		z-index: 10;
		
	}

#popUpContent {
		background-color: #ffffff;
		margin: 15% auto;
		padding: 20px;
		border-radius: 10px;
		width: 80%;
		max-width: 500px;
		text-align: center;
		position: relative;

	}

#popUpContent form {

		display:flex;
		flex-direction: column;
		gap: 15px;
	}

#popUpContent button {

		align-self: center;
	}

#closePopUpBtn {

		position:absolute;
		top: 10px;
		right: 15px;
		color: #aaa;
		float:right;
		font-size: 28px;
		font-weight: 700;
		background: transparent;
		border:none;
		line-height: 1;
		padding: 4px;
		cursor: pointer;
	}

#closePopUpBtn:hover,
#closePopUpBtn:focus {
		
		color: #000;
		text-decoration: none;
		outline: none;
		cursor: pointer;
	}

#openPopUpBtn {
		background: none;
		border:none;
		padding: 0;
		margin: 0;
		cursor: pointer;
		color: #0000EE;
		text-decoration: underline;
		font-size: 1em;
		font-family: inherit;

	}

#openPopUpBtn:hover,
#openPopUpBtn:focus {

		color: #FF0000;
		text-decoration:none;
	}

.wrappedImage {

		float:left;
		width: 100%;
		max-width:250px;
		margin: 0 0 20px 20px;

}

.wrappedImageR {

		float:right;
		width: 100%;
		max-width: 250px;
		margin: 0 0 20px 20px;


}

.gallery-page {

		max-width: 1200px;
		margin: 0 auto;
		padding: 60px 20px;
		text-align: center;

	}

.slideshow {

		position: relative;
		width: 100%;
		max-width: auto;
		aspect-ratio: 3 / 2;

		margin: 0 auto;
		overflow: hidden;
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.15);

	}

.slide {

		position:absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		
		opacity: 0;	
		transition: opacity 2s ease-in-out;
	}

.slide.active{

		opacity: 1;
	}

#checkout-overlay {
		position:fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		inset: 0;
		background-color: rgba(0,0,0,0.7);
		backdrop-filter: blur(6px);
		display:none;
		justify-content: center;
		align-items: flex-start;
		z-index: 9999;
		padding: 40px 20px;
		overflow-y: auto;
		box-sizing: border-box;
	}

#checkout-card {
		width: 100%;
		max-width: 500px;
		max-height: calc(90vh - 140px);
		overflow-y:auto;
		background: white;
		border-radius: 12px;
		padding: 30px;
		box-shadow: 0 10px 25px rgba(0,0,0,0.2);
		border: 1px solid rgba(0,0,0,0.04);
		animation: cardPop 0.35s ease-out;
		position:relative;
		scroll-behavior: smooth;
		box-sizing: border-box;
		margin: auto;
	}

@keyframes cardPop {
		from { transform: scale(0.94); opacity: 0; }
		to {transform: scale(1); opacity: 1; }
	}

#checkout-card h2 {
		font-size: 1.9rem;
		font-weight: 600;
		color: #2e2523;
		margin-bottom: 22px;
		text-align: center;
		font-family: "Libre Baskerville", serif;
	}

#checkout-card label {
		font-size: 0.92rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-weight: 600;
		color: #5a4e4b;
		display:block;
		margin: 16px 0 6px;
		font-family: 'Quicksand', sans-serif;
	}

#checkout-card input,
#checkout-card select {
		width:100%;
		font-size: 1.1rem;
		padding: 14px 16px;
		border-radius: 12px;
		border: 1px solid rgba(0,0,0,0.08);
		background: rgba(250,248,247,0.6);
		font-family: "Cormorant Garamond", serif;
		transition: border 0.18s, box-shadow 0.18s, background 0.18s;
	}

#checkout-card input:focus,
#checkout-card select:focus {
		border-color: #7a9c80;
		background: #fff;
		box-shadow: 0 0 0 4px rgba(122,156,128,0.18);
		outline: none;
	}

#checkout-close {
		position: absolute;
		top: 15px;
		right: 15px;
		width:13px;
		height: 32px;
		border-radius: 50%;
		border: none;
		background: none;
		font-size: 24px;
		font-weight: 700;
		cursor: pointer;
		transition: background 0.02s, transform 0.15s;
		color: #666;
	}

#checkout-close:hover {
		background: rgba(0,0,0,0.12);
		transform: scale(1.1);
	}


#payment-form {

		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 40px auto;
		padding: 32px;
		width: 90%;
		max-width: 520px;
		background: rgba(255,255,255,0.92);
		backdrop-filter: blur(6px);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.14);
		border: 1px solid rgba(0,0,0,0.06);
		text-align: center;
		
	}

#payment-form h2 {
		font-size: 1.8rem;
		font-weight: 600;
		margin-bottom: 24px;
		color: #3b2f2a;

	}






#card-container {

		width: 100%;
		margin-top: 18px;
		min-height: 110px;
		padding: 18px;
		border-radius: 14px;
		background: #fff;
		border: 1px solid rgba(0,0,0,0.03);
		box-shadow: 0 6px 20px rgba(0,0,0,0.06);
		margin-bottom: 20px;
	}

#pay-button {
		display: block;
		width: 100%;
		margin-top: 26px;
		max-width: 280px;
		padding: 15px;
		font-size: 1.8rem;
		font-family: "Allura", cursive;
		text-transform: none;
		letter-spacing: 0.02em;
		font-weight: 400;
		border: none;
		border-radius: 14px;
		cursor: pointer;
		background: #7a9c80;
		color: #fff;
		box-shadow: 0 8px 24px rgba(122,156,128,0.32);
		cursor: pointer;
		transition: transform 0.2s, box-shadow 0.2s,  opacity 0.2s;
	}

#pay-button:hover:not(:disabled) {
		transform: translateY(-2px);
		opacity: 0.97;
		box-shadow: 0 10px 28px rgba(122,156,128,0.42);
	}

#pay-button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
		box-shadow: none;
		transform: none;
	}

#payment-status {
		margin-top: 18px;
		font-size: 1rem;
		color: #7b6f6b;
		text-align: center;
		min-height: 22px;
		font-style: italic;
	}

#open-subscribe {
		display: block;
		margin: 50px auto;
		width: fit-content;
		min-width: 260px;
		text-align: center;
		padding: 14px 36px;
		font-size: 1.8rem;
		font-family: "Allura", cursive;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0.02em;
		background: #6b8f71;
		color: #fff;
		border: none;
		border-radius: 10px;
		box-shadow: 0 6px 18px rgba(107,143,113,0.22);
		cursor: pointer;
		transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
		
	}

#open-subscribe:hover,
#open-subscribe:focus {
		transform: translateY(-3px);
		opacity: 0.96;
		box-shadow: 0 8px 22px rgba(107,143,113,0.32);
		outline: none;
	}

#thankyou {
		display: none;
		text-align:center;
		background: rgba(255,255,255,0.94);
		backdrop-filter: blur(6px);
		border-radius: 16px;
		padding: 40px 24px;
		width: 90%;
		max-width: 600px;
		margin: 50px auto;
		box-shadow: 0 10px 30px rgba(0,0,0,0.12);
		border: 1px solid rgba(0,0,0,0.05);
	}

#thankyou h1 {
		font-size: 2.2rem;
		margin-bottom: 18px;
		color: #3b2f2a;
	}

#thankyou p {
		font-size: 1.2rem;
		line-height: 1.6;
		margin: 8px 0;
	}

.contact-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 1.5rem;
	max-width: 1100px;
	margin: 2rem auto;
	padding: 0 1.25rem;
	align-items: stretch;
	margin-bottom: 1.5rem;
	}

.contact-grid > * {
	max-height: 360px;
	}

.contact-info {
	align-self: start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 1.5rem 1.75rem;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.1);
	}

.contact-info h2 {
	margin-bottom: 1.2rem;
	font-size: 2rem;
	font-family: 'Quicksand', sans-serif;
	text-align: center;
	color: #3b2f2a;
	
}

.contact-info address {
	font-style: normal;
	line-height: 1.8;
	margin-bottom: 1.2rem;
	font-size: 1.15rem;
	color: 4a3b35;
	}

.contact-info a {
	text-decoration: underline;
	color: #6b8f71;
	border-bottom: 1px solid currentColor;
	font-weight:500;
	}

.contact-info a:hover {
	opacity: 0.85;
	}

.contact-image,
.contact-map {
	display:flex;
	}


.contact-image img,
.contact-map iframe {
	width: 100%;
	height:100%;
	border-radius: 16px;
	border: 0;
	box-shadow: 0 8px 22px rgba(0,0,0,0.12);
	object-fit: cover;
	object-position:center;
	}

.contact-card {
	background: rgba(255,255,255, 0.85);
	backdrop-filter: blur(4px);
	padding: 2rem 2.25rem;
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(0,0,0,0.12);
	max-width: 100%;
	}

.contact-card address strong {
	display: block;
	margin-bottom: 0.5rem;
	}

.contact-links {
	margin: 0;	
	font-size: 1.1rem;
	line-height: 1.8;
	}

.contact-links a {
	color: #6b8f71;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(107,143,113,0.5);
	}

.contact-links a:hover {
	opacity: 0.85;
	}

.contact-card,
.contact-image img,
.contact-map iframe {
	animation: fadeUp 0.8s ease both;
	}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(12px);
		}
	to {
		opacity: 1;
		transform: translateY(0);
		}

	}


@media (max-width: 768px) {

	.site-header {
	        flex-direction: column;
	        gap: 12px;
	        padding: 16px 20px;
	    }

	.nav-left,
	.nav-right {
		justify-content: center;
       		gap: 24px;
	    }

	  header-logo {
	        height: 80px;
	    }

	.slideshow {

		height: 300px;
		}

	

	#payment-form {
		padding: 24px;
		margin-top: 20px;
		}

	#payment-form h2 {
		font-size: 1.5rem;
		}

	#subscribe-fields input,
	#subscribe-fields select {
		font-size: 1rem;
		padding: 12px 16px;
		}

	#pay-button {
		font-size: 1.1rem;
		padding: 12px 16px;
		}

	.contact-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		}

	.gallery-page {
		padding: 18px 16px;
		}



	}

@media (max-width: 768px) and (orientation: portrait) {

		:root {

				--banner-height: 180px;
			}


		#banner {

				height: 180px;

			}
		h1 {
				font-size: 1.6rem;
			}

		h2 {
				font-size: 1.2rem;
			}

		p {
				
				padding: 0 15px;
				line-height: 1.5;
				font-size: 1rem;
			}
		.intro {

				margin-top: 20px;
			}

		.intro p{
				font-size: 1.2rem;
				line-height: 1.6;
				padding: 0 15px;
				text-align: center;


			}
		#popUpOverlay {
				top: 0;
				height: 100%;
				justify-content: center;
				align-items: center;
				display:flex; 
			}

		#popUpContent {

				width:90%;
			}		
		
		#popUpContent input[type="email"] {

				width: 100%;
				font-size: 1rem;
			}

		#popUpContent button {

				font-size: 1.1rem;
				padding: 12px 18px;

			}

		#top {

				height: auto;
				padding: 10px 0;
			}



		#closePopUpBtn {
				font-size: 32px;
				top: 8px;
				right: 12px;
				padding: 8px;
			}

		.wrappedImage {

				float:left;
				width: 30%;
				margin: 0 auto 20px;
				margin-top: 20px;

			}

		.wrappedImageR {
			float:right;
			width: 100%;
			max-width: 250px;
		margin: 0 0 20px 20px;

			}
	}

@media (max-width: 768px) and (orientation: landscape) {

		:root {

				--banner-height: 180px;
			}


		#banner {

				height: 180px;

			}
		h1 {
				font-size: 1.6rem;
			}

		h2 {
				font-size: 1.2rem;
			}

		p {
				
				padding: 0 15px;
				line-height: 1.5;
				font-size: 1rem;
			}
		.intro {

				margin-top: 20px;
			}

		.intro p{
				font-size: 1.2rem;
				line-height: 1.6;
				padding: 0 15px;
				text-align: center;

			}
		#popUpOverlay {
				top: 0;
				height: 100%;
				justify-content: center;
				align-items: center;
				display:flex; 
			}

		#popUpContent {

				width:90%;
			}		
		
		#popUpContent input[type="email"] {

				width: 100%;
				font-size: 1rem;
			}

		#popUpContent button {

				font-size: 1.1rem;
				padding: 12px 18px;

			}

		#top {

				height: auto;
				padding: 10px 0;
			}


		#closePopUpBtn {
				font-size: 32px;
				top: 8px;
				right: 12px;
				padding: 8px;
			}

		.wrappedImage {
				float:left;
				width: 30%;
				margin: 0 auto 20px;
				margin-top: 20px;

			}
		.wrappedImageR {

				float:right;
				width: 30%;
				margin: 0 0 20px 20px;
				margin-top: 20px;
			}
	}

		.md-intro { max-width: 780px; margin: 0 auto 2rem; text-align: center; }

		.bouquet-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 1.5rem;
			justify-content: center;
			padding: 0 1.25rem 2rem;
			max-width: 1100px;
			margin: 0 auto;
		}

		.bouquet-card {
			background: rgba(255,255,255,0.88);
			backdrop-filter: blur(6px);
			border-radius: 16px;
			box-shadow: 0 8px 24px rgba(0,0,0,0.10);
			border: 1px solid rgba(0,0,0,0.05);
			padding: 2rem 1.75rem 1.5rem;
			width: 280px;
			text-align: center;
			transition: transform 0.2s, box-shadow 0.2s;
		}

		.bouquet-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 14px 32px rgba(0,0,0,0.14);
		}

		.bouquet-card .price {
			font-family: 'Quicksand', sans-serif;
			font-size: 1.5rem;
			font-weight: 700;
			color: #6b8f71;
			margin: 0.4rem 0 0.6rem;
		}

		.bouquet-card .desc {
			font-size: 1rem;
			color: #5a4e4b;
			line-height: 1.55;
			margin-bottom: 1.25rem;
		}

		.bouquet-card .card-name {
			font-family: "Allura", cursive;
			font-size: 2rem;
			color: #5a4a40;
			margin: 0 0 0.2rem;
		}

		.order-btn {
			display: inline-block;
			padding: 11px 28px;
			font-family: "Allura", cursive;
			font-size: 1.6rem;
			background: #6b8f71;
			color: #fff;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			box-shadow: 0 5px 16px rgba(107,143,113,0.25);
			transition: transform 0.18s, opacity 0.18s;
		}

		.order-btn:hover { transform: translateY(-2px); opacity: 0.95; }



		.fulfillment-toggle {
			display: flex;
			gap: 0;
			border: 1px solid rgba(0,0,0,0.12);
			border-radius: 10px;
			overflow: hidden;
			margin: 10px 0 0;
		}

		.fulfillment-toggle label {
			flex: 1;
			text-align: center;
			padding: 12px;
			cursor: pointer;
			font-family: 'Quicksand', sans-serif;
			font-size: 0.9rem;
			text-transform: uppercase;
			letter-spacing: 0.06em;
			font-weight: 600;
			color: #5a4e4b;
			background: rgba(250,248,247,0.6);
			margin: 0;
			transition: background 0.15s, color 0.15s;
			border: none;
		}

		.fulfillment-toggle input[type="radio"] { display: none; }

		.fulfillment-toggle input[type="radio"]:checked + label {
			background: #6b8f71;
			color: #fff;
		}

		.fulfillment-section { margin-top: 4px; }

		#gift-section {
			border-top: 1px solid rgba(0,0,0,0.08);
			margin-top: 18px;
			padding-top: 14px;
		}

		.gift-toggle-row {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 6px;
		}

		.gift-toggle-row input[type="checkbox"] { width: auto; }

		.gift-toggle-row label {
			margin: 0;
			text-transform: none;
			font-size: 1rem;
			letter-spacing: 0;
		}

		#order-summary-line {
			background: rgba(107,143,113,0.1);
			border-radius: 10px;
			padding: 10px 16px;
			margin: 14px 0 6px;
			font-family: 'Quicksand', sans-serif;
			font-size: 0.95rem;
			color: #3b2f2a;
		}

		#order-summary-line strong { color: #6b8f71; }