/* ===================================================
   Boost Your Day — Custom Styles
   Premium dark & gold aesthetic
   =================================================== */

:root {
	--color-bg:        #0a0a0a;
	--color-bg-alt:    #111111;
	--color-gold:      #d4a843;
	--color-gold-light:#e8c874;
	--color-text:      #e0e0e0;
	--color-text-muted:#999999;
	--color-white:     #ffffff;
	--font-heading:    'Playfair Display', Georgia, serif;
	--font-body:       'Lato', 'Segoe UI', sans-serif;
}

/* ---- Base ---- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 70px;
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 300;
	line-height: 1.7;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-white);
	font-weight: 700;
}

a { color: var(--color-gold); }
a:hover { color: var(--color-gold-light); }

img { max-width: 100%; height: auto; }

.text-gold { color: var(--color-gold) !important; }

/* ---- Shared ---- */
.section-padding {
	padding: 100px 0;
}

.section-title {
	font-size: 2.4rem;
	margin-bottom: .5rem;
}

.section-lead {
	font-size: 1.15rem;
	color: var(--color-text-muted);
	max-width: 640px;
	margin: 0 auto;
}

.title-divider {
	width: 60px;
	height: 3px;
	background: var(--color-gold);
	margin: 16px auto 30px;
	border-radius: 2px;
}

.bg-dark-alt {
	background-color: var(--color-bg-alt);
}

/* ---- Buttons ---- */
.btn-gold {
	background: linear-gradient(135deg, var(--color-gold), #b8912e);
	color: #0a0a0a;
	border: none;
	font-weight: 700;
	letter-spacing: .5px;
	padding: 12px 36px;
	border-radius: 50px;
	transition: all .3s ease;
}
.btn-gold:hover,
.btn-gold:focus {
	background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
	color: #0a0a0a;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(212, 168, 67, .35);
}
.btn-outline-gold {
	background: transparent;
	color: var(--color-gold);
	border: 2px solid var(--color-gold);
	font-weight: 700;
	letter-spacing: .5px;
	padding: 10px 34px;
	border-radius: 50px;
	transition: all .3s ease;
}
.btn-outline-gold:hover,
.btn-outline-gold:focus {
	background: var(--color-gold);
	color: #0a0a0a;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(212, 168, 67, .25);
}

/* ---- Navbar ---- */
#mainNav {
	padding: 14px 0;
	transition: background .4s ease, padding .3s ease;
	background: transparent;
}
#mainNav.scrolled {
	background: rgba(10, 10, 10, .95);
	backdrop-filter: blur(10px);
	padding: 8px 0;
	box-shadow: 0 2px 20px rgba(0,0,0,.5);
}

.navbar-brand {
	font-family: var(--font-heading);
	font-size: 1.3rem;
}
.brand-melitis { color: var(--color-white); font-weight: 400; }
.brand-boost   { color: var(--color-gold); font-weight: 700; }

.navbar-nav .nav-link {
	color: rgba(255,255,255,.8);
	font-weight: 400;
	letter-spacing: .5px;
	margin-left: 10px;
	transition: color .3s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	color: var(--color-gold);
}

/* ---- Hero ---- */
.hero-section {
	min-height: 100vh;
	position: relative;
	background: radial-gradient(ellipse at 30% 50%, #1a1200 0%, #0a0a0a 70%);
	overflow: hidden;
}
.hero-overlay {
	position: absolute; inset: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%230a0a0a" opacity="0.3"/><rect width="1" height="1" fill="%23d4a843" opacity="0.02"/></svg>');
	pointer-events: none;
}

.hero-product-img {
	max-height: 520px;
	filter: drop-shadow(0 20px 50px rgba(212,168,67,.25));
	transition: transform .6s ease;
}
.hero-product-img:hover {
	transform: scale(1.03);
}

.hero-sub {
	font-family: var(--font-body);
	font-size: .9rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: .5rem;
}
.hero-title {
	font-size: 3.5rem;
	line-height: 1.1;
	margin-bottom: .75rem;
}
.hero-title sup {
	color: var(--color-gold);
	font-size: .5em;
}
.hero-tagline {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.35rem;
	color: var(--color-text-muted);
}
.hero-desc {
	font-size: 1rem;
	color: var(--color-text-muted);
	margin-top: .5rem;
}

/* ---- About Cards ---- */
.about-card {
	background: var(--color-bg-alt);
	border: 1px solid rgba(212,168,67,.15);
	border-radius: 12px;
	padding: 40px 28px;
	height: 100%;
	transition: border-color .3s, transform .3s;
}
.about-card:hover {
	border-color: var(--color-gold);
	transform: translateY(-4px);
}
.about-icon {
	color: var(--color-gold);
	margin-bottom: 18px;
}
.about-card h5 {
	font-size: 1.15rem;
	margin-bottom: 10px;
}
.about-card p {
	color: var(--color-text-muted);
	font-size: .95rem;
	margin-bottom: 0;
}

/* ---- Ingredient Background Sections ---- */
.ingredient-bg-section {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.ingredient-bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(10,10,10,.3) 0%,
		rgba(10,10,10,.75) 35%,
		rgba(10,10,10,.92) 55%,
		rgba(10,10,10,.97) 100%
	);
	pointer-events: none;
}

/* ---- Ingredients ---- */
.ingredient-img-wrap {
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(212,168,67,.15);
}
.ingredient-img-wrap img {
	transition: transform .5s ease;
	display: block;
	width: 100%;
}
.ingredient-img-wrap:hover img {
	transform: scale(1.05);
}

.ingredient-title {
	font-size: 1.8rem;
	margin-bottom: .4rem;
}
.ingredient-subtitle {
	font-family: var(--font-heading);
	font-style: italic;
	color: var(--color-text-muted);
	margin-bottom: 1rem;
}
.ingredient-list {
	list-style: none;
	padding: 0;
}
.ingredient-list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 10px;
	color: var(--color-text);
}
.ingredient-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 8px;
	height: 8px;
	background: var(--color-gold);
	border-radius: 50%;
}

/* ---- Benefit Cards ---- */
.benefit-card {
	background: var(--color-bg);
	border: 1px solid rgba(212,168,67,.12);
	border-radius: 12px;
	padding: 40px 24px;
	height: 100%;
	transition: border-color .3s, transform .3s;
}
.benefit-card:hover {
	border-color: var(--color-gold);
	transform: translateY(-4px);
}
.benefit-number {
	font-family: var(--font-heading);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--color-gold);
	margin-bottom: 12px;
}
.benefit-card h5 {
	font-size: 1.05rem;
	margin-bottom: 10px;
}
.benefit-card p {
	color: var(--color-text-muted);
	font-size: .9rem;
	margin-bottom: 0;
}

/* ---- Footer ---- */
.site-footer {
	background: #050505;
	padding: 40px 0;
	border-top: 1px solid rgba(212,168,67,.1);
}
.site-footer p {
	color: var(--color-text-muted);
	font-size: .85rem;
	margin-bottom: 0;
}
.footer-brand {
	font-family: var(--font-heading);
	color: var(--color-gold);
	font-size: 1.1rem;
}

/* ---- Animations ---- */
[data-animate] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .7s ease, transform .7s ease;
}
[data-animate].visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Caution Box ---- */
.caution-box {
	background: rgba(229, 115, 115, .06);
	border-left: 3px solid #e57373;
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	margin-top: 18px;
	font-size: .88rem;
	color: var(--color-text-muted);
	line-height: 1.6;
}
.caution-box strong {
	color: #e57373;
}

/* ---- Accordion (References) ---- */
.accordion {
	--bs-accordion-bg: #0a0a0a;
	--bs-accordion-btn-bg: #0a0a0a;
	--bs-accordion-active-bg: #111111;
	--bs-accordion-active-color: var(--color-gold-light);
	--bs-accordion-border-color: rgba(212,168,67,.12);
	--bs-accordion-btn-color: var(--color-text-muted);
	--bs-accordion-btn-focus-box-shadow: none;
}
.accordion-item {
	background: #0a0a0a !important;
	border: 1px solid rgba(212,168,67,.12);
	border-radius: 0;
	margin-bottom: -1px;
}
.accordion-item:first-child { border-radius: 8px 8px 0 0; }
.accordion-item:last-child  { border-radius: 0 0 8px 8px; }

.accordion-button {
	background: #0a0a0a !important;
	color: var(--color-gold);
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	padding: 16px 20px;
	box-shadow: none !important;
}
.accordion-button::after {
	filter: invert(1) sepia(1) saturate(3) hue-rotate(10deg);
}
.accordion-button:not(.collapsed) {
	background: #111111 !important;
	color: var(--color-gold-light);
}
.accordion-button.collapsed {
	color: var(--color-text-muted);
}
.accordion-body {
	background: #0a0a0a !important;
	padding: 20px 24px;
}

.ref-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ref-list li {
	padding: 6px 0;
	border-bottom: 1px solid rgba(255,255,255,.04);
	font-size: .85rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}
.ref-list li:last-child { border-bottom: none; }
.ref-list li em { color: var(--color-gold); font-style: italic; }

/* ---- Contact Form 7 ---- */
.wpcf7 {
	max-width: 640px;
	margin: 0 auto;
}
.wpcf7 .form-row {
	display: flex;
	gap: 20px;
}
.wpcf7 .form-row > label {
	flex: 1;
}
.wpcf7 label {
	display: block;
	margin-bottom: 20px;
	color: var(--color-text-muted);
	font-size: .9rem;
	letter-spacing: .3px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	margin-top: 6px;
	padding: 12px 16px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(212,168,67,.2);
	border-radius: 8px;
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: .95rem;
	transition: border-color .3s, box-shadow .3s;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(212,168,67,.15);
}
.wpcf7 textarea {
	min-height: 130px;
	resize: vertical;
}
.wpcf7 input[type="submit"] {
	display: inline-block;
	background: linear-gradient(135deg, var(--color-gold), #b8912e);
	color: #0a0a0a;
	border: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .5px;
	padding: 12px 40px;
	border-radius: 50px;
	cursor: pointer;
	transition: all .3s ease;
}
.wpcf7 input[type="submit"]:hover {
	background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(212,168,67,.35);
}
.wpcf7 .wpcf7-response-output {
	border-color: var(--color-gold) !important;
	color: var(--color-text);
	border-radius: 8px;
	margin-top: 20px;
}
.wpcf7 .wpcf7-not-valid-tip {
	color: #e57373;
	font-size: .8rem;
	margin-top: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
	.hero-section { text-align: center; }
	.hero-title { font-size: 2.6rem; }
	.hero-product-img { max-height: 360px; margin-bottom: 2rem; }
	.section-title { font-size: 2rem; }
	.ingredient-title { margin-top: 1.5rem; }
	.ingredient-bg-section { background-attachment: scroll; }
	.ingredient-bg-overlay {
		background: linear-gradient(
			to bottom,
			rgba(10,10,10,.5) 0%,
			rgba(10,10,10,.9) 40%,
			rgba(10,10,10,.97) 100%
		);
	}
	.ingredient-bg-section .row { justify-content: center !important; }
}

@media (max-width: 575.98px) {
	.hero-title { font-size: 2rem; }
	.section-padding { padding: 60px 0; }
	.btn-gold { padding: 10px 28px; }
	.wpcf7 .form-row { flex-direction: column; gap: 0; }
}