* {
	box-sizing: border-box;
}

body {
	font-family: bembo-book-mt-pro, sans-serif;
	font-weight: normal;
	font-style: normal;;
	max-width: 800px;
	margin: 20px auto;
	padding: 20px;
	line-height: 115%;
	font-size: 20px;
	font-variant-numeric: oldstyle-nums;

}
h1 {
	font-family: p22-stickley-pro-headline, serif;
	font-weight: 500;
	font-style: normal;
	font-size: 24px;
	margin-bottom: 10px;
	font-weight: normal;
	color: #4d7d78;
	color: color(display-p3 0.304 0.493 0.47);
}
h3 {
	font-family: p22-stickley-pro-caption, serif;
	font-weight: 300;
	font-style: normal;
	font-variant: small-caps;
	letter-spacing: 2px;
	margin-bottom: -15px;
	color: #4d7d78;
	color: color(display-p3 0.304 0.493 0.47);
}
.extra-bottom {
	
	margin-bottom: 10px !important;
}
button {
	font-family: bembo-book-mt-pro, sans-serif;
	font-weight: 500;

}
p {
	font-variant-numeric: oldstyle-nums;
}
p.bigger {
	font-size: 120%;
	line-height: 115%;
	margin-bottom: -5px;
}
p.bigger.bigger-tagline {
	margin-top: 12px;
	text-indent: -0.5em; /* Adjust based on your font */
	 margin-left: 3em;
 }
.error-message {
	color: red;
}
.fig-caption {
	font-size: 90%;
	font-style: italic;
}
.small-after { margin-bottom: -12px; }
.product-option {
	margin: 10px 0;
	padding: 10px;
	border: 1px solid #ddd;
	cursor: pointer;
}
.fine-print {
	font-family: bembo-book-mt-pro, sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 85%;
	line-height: 1.1;
}
.tinted-section {
	hanging-punctuation: first allow-end last;
	position: relative; /* Required for absolute positioning of pseudo-element */
	margin-top: 35px;
	margin-bottom: 35px;
}

.tinted-section::before {
	content: '';
	position: absolute;
	top: -10px;    /* Adjust how far beyond the content */
	left: -20px;   /* Adjust how far beyond the content */
	right: -20px;  /* Adjust how far beyond the content */
	bottom: -10px; /* Adjust how far beyond the content */
	background: rgba(123, 203, 195, 0.626);
	border-radius: 8px;
	z-index: -1; 

}
/* Header Styles */
header {
	background: #4d7d78;
	background: color(display-p3 0.304 0.493 0.47);
	color: white;
	padding: 1rem 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

header a:link, header a:visited {
	color: white;
}

.header-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo {
	font-size: 2rem;
	text-decoration: none;
	color: white;
	text-align: center;
	font-style: italic;
	
}

/* Navigation Styles */
nav {
	background-color: #fff;
	position: sticky;
	top: 50px;
	z-index: 1002;
	border: 0.5px solid rgb(77, 125, 120) ;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;

}

.nav-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	
}

.tab-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tab-list li {
	flex: 1; /* Ensure equal width distribution */
}

.tab-button {
	font-family: p22-stickley-pro-text, serif;
	font-weight: 400;
	font-style: normal;
	flex: 1;
	padding: 1rem 1.5rem;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.2rem;
	letter-spacing: 2px;
	color: #666;
	transition: all 0.3s ease;
	position: relative;
	font-variant-caps: all-small-caps;
}

.tab-button:hover {
	color: #4d7d78;
	color: color(display-p3 0.304 0.493 0.47);
	background-color: #f8f9fa;
}

.tab-button.active {
	color: #4d7d78;
	color: color(display-p3 0.304 0.493 0.47);
	font-weight: 600;
}

.tab-button.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #4d7d78;
	background: color(display-p3 0.304 0.493 0.47);
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Mobile Menu Toggle */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}

.menu-toggle span {
	display: block;
	width: 25px;
	height: 3px;
	background-color: #333;
	margin: 5px 0;
	transition: 0.3s;
	background: white;
}

/* Main Content */
main {
	max-width: 800px;
	margin: 2rem auto;
	padding: 0 2rem;
}

.tab-content {
	display: none;
	// animation: fadeIn 0.5s ease;
}

.tab-content.active {
	display: block;
}

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

.content-card {
	background: white;
	padding: 2rem;
	margin-bottom: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}


.product-option.selected {
	background-color: #f0f0f0;
	border-color: #333;
}
/* .addon-section {
	margin: 15px 0;
	padding: 10px;
	background-color: #f9f9f9;
	display: none;
} */
.form-group {
//	margin: 10px 0;
}
label {
	display: inline-block;
	margin-bottom: 3px;
	white-space: normal;
}
label.inline-label {
	display: inline-block;
	white-space: normal;
}
a:link {
	color: #4d7d78;
	color: color(display-p3 0.304 0.493 0.47);
	text-decoration: none;
}

/* input, select {
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
} */
input[type="number"] {
	width: 60px;
}

#shipping-info-block {
	margin-bottom: 15px;
}
.summary {
	margin: 20px 0;
	padding: 15px;
	background: rgba(123, 203, 195, 0.626);
	border-radius: 12px;

}
.summary > h3 {
	padding-top: 0px;
	margin-top: 0px;
	margin-bottom: 10px;
}
.summary-line {
	display: flex;
	justify-content: space-between;
	margin: 0px 0;
}
.subtotal-line, .total {
	border-top: 1px solid #333;
	padding-top: 10px;
	margin-top: 10px;

}
.total {
	border-top: 2px solid #333;
	font-weight: bold;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.feature-item {
	background: #f8f9fa;
	padding: 1.5rem;
	border-radius: 8px;
	text-align: center;
	transition: all 0.3s ease;
}

.feature-item:hover {
	background: #e9ecef;
	transform: scale(1.05);
}

.feature-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}


.note {
	font-size: 1em;
	line-height: 110%;
	color: #666;
	font-style: italic;
}


#form-table {
	box-sizing: border-box;
}

#shipping-info {
	margin: 0 auto;
}
.success-container {
	max-width: 600px;
	margin: 40px auto;
	padding: 20px;
}

.shipping-info {
	margin: 20px 0;
	padding: 15px;
	background: #f5f5f5;
	border-radius: 5px;
}

.shipping-info p {
	margin: 0px 0;
}


.form-table {
	width: 100%;
	border-collapse: collapse;
}

.form-row {
	display: table;
	width: 100%;
	margin-bottom: 5px;
}

.form-label,
.form-input {
	display: table-cell;
	vertical-align: middle;
	padding: 2px;
}

.form-label {
	width: 35%;
	text-align: right;
	padding-right: 15px;
}

.form-input {
	width: 65%;
}

.form-input input {
	font-family: bembo-book-mt-pro, sans-serif;
	width: 92%;
	padding: 2px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 17px;
	transition: border-color 0.3s;
}

.form-input input:focus {
	outline: none;
	border-color: #4CAF50;
}

/* Responsive design for mobile */
@media (max-width: 480px) {
	.form-row {
		display: block;
	}
	
	.form-label,
	.form-input {
		display: block;
		width: 100%;
		text-align: left;
	}
	
	.form-label {
		padding-right: 8px;
		margin-bottom: 5px;
	}
	
	.form-input {
		padding-top: 0;
	}
}

/* Optional: Add hover effects */
.form-row:hover .form-input input {
	border-color: #999;
}
.product-select, #country, #checkout-button, .order-button {
	font-family: p22-stickley-pro-caption, serif;
	font-weight: 300;
	font-style: normal;
	width: auto;
	padding: 6px 50px 6px 10px;
	font-size: 18px;
	border: none;
	border-radius: 12px;
	background: #4d7d78; /* Fallback for browsers that don't support display-p3 */
	background: color(display-p3 0.304 0.493 0.47);
	color: white;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	// transition: all 0.3s ease;
}
.order-button {
	padding: 6px 10px 6px 10px;
}
.order-button a { color: white; }
.book-tab-order {
	color: white;
	text-align: center;
	width: 250px;
}
.book-tab-order-frame {
	display: none;
	margin-top: -25px;
	margin-bottom: -30px;
	justify-content: center;
	align-items: center;
	width: 100%; /* Or any width you prefer */
}

.book-tab-order a { color: white; }

.product-select, #country {
	/* Add custom arrow */
	background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2714%27%20height%3D%278%27%20viewBox%3D%270%200%2014%208%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1%201l6%206%206-6%27%20stroke%3D%27%23fff%27%20stroke-width%3D%272%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: right 20px center;
}
#country { font-size: 14px; }
#checkout-button { margin-top: 10px; padding-right: 12px; }

.product-select option {
	background-color: #333;
	color: white;
	padding: 10px;
}

/* Hover effect */
.product-select:hover {
	background: #3d6d68; /* Fallback */
	background: color(display-p3 0.254 0.443 0.42);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(77, 125, 120, 0.3);
}

/* Focus effect */
.product-select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(77, 125, 120, 0.3);
}


/* Responsive Styles */
@media (max-width: 768px) {
	.header-content {
		padding: 0 1rem;
		text-align: right !important;
		padding-right: 15%;

	}
	.logo {
		font-size: 125%;
		text-align: right;
	}
	nav {
		border: 0px;

	}
	 header {
		position: fixed;
		top: 30px;  /* 30px space from top */
		z-index: 100;
		left: 0;
		right: 0;
		margin: 0 auto;

		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px !important;
		padding-bottom: 20px;
		margin: 0 auto;
		width: calc(95% - 2rem);  /* Match main's padding */

	} 
	

	main {
		margin-top: 80px;  /* Adjust based on header height + 30px top + padding */
		padding: 0 1rem;
		
	}

	.nav-container {
		padding: 0;
		/* Remove margin-top: -80px; */
	}
	

	.menu-toggle {
		display: block;
		position: absolute;
		right: 1rem;
		top: 10px;
		transform: translateY(-50%);
		z-index: 1005;
		/* Remove margin-top: -10px; since transform handles centering */
	}
	

	.tab-list {
		position: fixed;
		top: 90px;  /* Adjust to align with header bottom */
		left: -100%;
		width: 175px;
		height: 170px;
		padding-bottom: 50px;
		background-color: white;
		flex-direction: column;
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
		transition: left 0.3s ease;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		z-index: 1000;
	}
	.tab-button {
		font-family: p22-stickley-pro-caption, serif;
		
		font-weight: 500;
		font-style: normal;

	}
	.tab-list li {
		height: 30px;
		border: 0px;
	}

	.tab-list.active {
		left: 0;
	}

	.tab-button {
		text-align: left;
		margin-left: 20px;
		padding: 0.5rem 1.0rem;
		// border-bottom: 1px solid #eee;
	}

	.tab-button.active::after {
		height: 100%;
		width: 3px;
		top: 0;
		bottom: auto;
	}
	.content-card {
		padding: 1.5rem;
	}
	.book-tab-order-frame {
		display: flex;
	}
	
}

@media (max-width: 480px) {
	.feature-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 420px) {
	.logo {
		font-size: 90%;
	}
}

/* Menu toggle animation */
.menu-toggle.active span:nth-child(1) {
	transform: rotate(-45deg) translate(-5px, 6px);
}

.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
	transform: rotate(45deg) translate(-5px, -6px);
}

/* Overlay for mobile menu */
.overlay {
	position: fixed;
	top: 00px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	z-index: 998;
}

.overlay.active {
	display: block;
}

/**
 * Component: Image sizing
 * --------------------------------------------------
 */

/* Full-width figure container */
 .figure,
 figure {
	 margin: 20px 0;
	 text-align: center;
	 width: 100%;
 }
 
 /* OR if you want a specific class for full-width */
 .figure-full {
	 margin: 20px 0;
	 text-align: center;
	 width: 100%;
 }
 
 /* Ensure images in full-width figures are also full width */
 .figure img,
 .figure-full img,
 figure img {
	 width: 100%;
	 height: auto;
	 display: block;
	 margin: 0 auto 10px auto;
 }
/* Add figure containers for floated images with captions */
.figure-left {
	float: left;
	width: 50%;
	margin: 0 20px 20px 0;
	text-align: center; /* Center caption under image */
}

.figure-right {
	float: right;
	width: 50%;
	margin: 0 0 20px 20px;
	text-align: center; /* Center caption under image */
}

.figure-center {
	margin: 20px auto;
	width: 50%;
	text-align: center;
}

/* Images inside figure containers */
.figure-left img,
.figure-right img,
.figure-center img {
	width: 100%; /* Fill the figure container */
	height: auto;
	display: block;
	margin: 0 auto 10px auto;
}
.fig-round {
	border-radius: 20px;
}

/* Update caption styling to work with all figure types */
.figure-left .fig-caption,
.figure-right .fig-caption,
.figure-center .fig-caption,
.figure .fig-caption {
	font-style: italic;
	color: #666;
	font-size: 0.9em;
	line-height: 1.2;
	margin-top: 10px;
	padding: 0 10px;
	text-align: center; /* Center caption text */
	clear: both; /* Ensure caption clears any floats */
}

/* Mobile responsive */
@media (max-width: 768px) {
	/* Make all figure containers 50% and centered on mobile */
	.figure-left,
	.figure-right,
	.figure-center {
		width: 50%;
		max-width: 50%;
		float: none;
		margin: 20px auto;
		display: block;
	}
	
	/* Images stay full width of their container */
	.figure-left img,
	.figure-right img,
	.figure-center img {
		width: 100%;
	}
}
 /* Optional: Even smaller screens */
 @media (max-width: 480px) {
	 .content-container {
		 padding: 10px;
	 }
	 
	 .content-container img {
		 margin: 15px auto;
	 }
 }
 
 
 
 /* Clickable images */
 img.lightbox-enabled {
	 cursor: pointer;
	 transition: opacity 0.3s ease;
 }
 
 img.lightbox-enabled:hover {
	 opacity: 0.9;
 }
 
 /* Lightbox overlay */
 .lightbox-overlay {
	 display: none;
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.9);
	 z-index: 9999;
	 cursor: pointer;
	 animation: lightboxFadeIn 0.3s ease;
 }
 
 .lightbox-overlay.active {
	 display: flex;
	 justify-content: center;
	 align-items: center;
 }
 
 /* Expanded image */
 .lightbox-overlay img {
	 max-width: 90vw;
	 max-height: 90vh;
	 width: auto;
	 height: auto;
	 box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	 animation: lightboxZoomIn 0.3s ease;
 }
 
 /* Close button */
 .lightbox-close {
	 position: absolute;
	 top: 20px;
	 right: 40px;
	 color: #fff;
	 font-size: 40px;
	 font-weight: 300;
	 cursor: pointer;
	 transition: color 0.3s ease;
 }
 
 .lightbox-close:hover {
	 color: #ff6b6b;
 }
 
 /* Animations */
 @keyframes lightboxFadeIn {
	 from { opacity: 0; }
	 to { opacity: 1; }
 }
 
 @keyframes lightboxZoomIn {
	 from {
		 transform: scale(0.8);
		 opacity: 0;
	 }
	 to {
		 transform: scale(1);
		 opacity: 1;
	 }
 }
 .audio-player {
	 max-width: 600px;
	 margin: 50px auto;
	 padding: 20px;
	 text-align: center;
	 font-family: Arial, sans-serif;
 }
 
 audio {
	 width: 100%;
	 max-width: 500px;
	 margin: 20px 0;
 }