/* ===========================================================================
   Bio Vedik, Header, footer and home-page sections
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Sticky glassmorphic header
   ------------------------------------------------------------------------- */

/* Astra's sticky header is a Pro feature, so the child theme provides it.
   position: sticky on the header wrapper keeps it in normal flow (no layout
   jump and no need to pad the body). */
.site-header,
#masthead {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 99;
}

/* The admin bar occupies the first 32px, so offset beneath it. */
body.admin-bar .site-header,
body.admin-bar #masthead { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar #masthead { top: 46px; }
}


.ast-primary-header-bar,
.site-header .main-header-bar {
	background: rgba(247, 249, 246, 0.72) !important;
	backdrop-filter: var(--bv-blur);
	-webkit-backdrop-filter: var(--bv-blur);
	border-bottom: 1px solid rgba(27, 61, 47, 0.08);
	transition: background-color var(--bv-dur) var(--bv-ease),
	            box-shadow var(--bv-dur) var(--bv-ease);
}

/* Applied by JS once the page scrolls past the hero lip. */
body.bv-scrolled .ast-primary-header-bar,
body.bv-scrolled .site-header .main-header-bar {
	background: rgba(247, 249, 246, 0.92) !important;
	box-shadow: 0 4px 24px rgba(27, 61, 47, 0.10);
}

.site-title,
.site-title a {
	font-family: var(--bv-font-display) !important;
	font-weight: 600 !important;
	color: var(--bv-green) !important;
	letter-spacing: -0.02em;
}

.site-description {
	font-family: var(--bv-font-body) !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--bv-gold-700) !important;
	font-weight: 600 !important;
}

/* Navigation links with a gold underline that grows from the centre.
   The :not() guards are not enough on their own: Astra colours
   .current-menu-item links with its own accent (#045CB4, a blue), at a higher
   specificity than a plain .menu-link rule, so the active item has to be named
   explicitly or it renders bright blue against the brand palette. */
.main-header-menu > .menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current_page_item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
	font-family: var(--bv-font-body);
	font-size: var(--bv-text-sm);
	font-weight: 550;
	color: var(--bv-green-800);
	position: relative;
}

.main-header-menu > .menu-item.current-menu-item > .menu-link { color: var(--bv-green); }

/* The off-canvas menu inherits Astra's slate defaults; bring it onto palette. */
#ast-mobile-header .main-header-menu .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-link {
	color: var(--bv-green-800);
	font-weight: 550;
}

#ast-mobile-header .main-header-menu .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link {
	color: var(--bv-green);
}

#ast-mobile-header .main-header-menu .menu-link:hover,
.ast-mobile-popup-drawer .main-header-menu .menu-link:hover { color: var(--bv-gold-600); }

.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 24%;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--bv-gold);
	transform: translateX(-50%);
	transition: width var(--bv-dur) var(--bv-ease-out);
}

.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .menu-item.current-menu-item > .menu-link::after {
	width: calc(100% - 2.2rem);
}

/* The gold "Order Now" pill, any menu item given the CSS class bv-nav-cta. */
/* Astra stretches every .menu-link to the full height of the header row, which
   turned this pill into an 80px-tall oval. Giving it its own fixed height and
   centring it inside the row keeps it a button-sized button. */
.main-header-menu .menu-item.bv-nav-cta {
	display: flex;
	align-items: center;
}

.main-header-menu .menu-item.bv-nav-cta > .menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	min-height: 0;
	padding: 0 1.35rem !important;
	margin-inline-start: 0.75rem;
	background: var(--bv-gold);
	color: var(--bv-green-900) !important;
	border-radius: var(--bv-radius-pill);
	font-size: 0.85rem;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	transition: transform var(--bv-dur) var(--bv-ease-out),
	            box-shadow var(--bv-dur) var(--bv-ease-out),
	            background-color var(--bv-dur-fast) var(--bv-ease);
}

.main-header-menu .menu-item.bv-nav-cta > .menu-link:hover {
	background: var(--bv-gold-400);
	transform: translateY(-2px);
	box-shadow: var(--bv-shadow-gold);
}

.main-header-menu .menu-item.bv-nav-cta > .menu-link::after { display: none; }

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */

.bv-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 1.8rem + 6vw, 6.5rem) clamp(3.5rem, 2.2rem + 5vw, 6rem);
	background:
		radial-gradient(52% 46% at 8% 6%,   rgba(197, 155, 39, 0.14), transparent 60%),
		radial-gradient(46% 52% at 96% 22%, rgba(27, 61, 47, 0.10),  transparent 62%),
		linear-gradient(175deg, var(--bv-white) 0%, var(--bv-cream) 55%, var(--bv-cream-dark) 100%);
}

/* Soft botanical wash, decorative only, never interactive. */
.bv-hero__wash {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: right -80px top -60px, left -120px bottom -140px;
	background-size: 420px, 520px;
	opacity: 0.5;
	pointer-events: none;
}

.bv-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

.bv-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 1.05rem;
	border-radius: var(--bv-radius-pill);
	background: var(--bv-glass-strong);
	backdrop-filter: var(--bv-blur);
	-webkit-backdrop-filter: var(--bv-blur);
	border: 1px solid var(--bv-glass-border);
	box-shadow: var(--bv-shadow-sm);
	font-size: var(--bv-text-xs);
	font-weight: 600;
	color: var(--bv-green-700);
	margin-bottom: 1.5rem;
	animation: bv-float 5s var(--bv-ease) infinite;
}

@keyframes bv-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	.bv-hero__badge { animation: none; }
}

.bv-hero h1 {
	margin: 0 0 1.1rem;
	font-size: var(--bv-h1);
	letter-spacing: -0.03em;
}

/* "Grow." picks up the gold gradient. */
.bv-hero h1 .bv-accent {
	background: linear-gradient(120deg, var(--bv-gold-700), var(--bv-gold), var(--bv-gold-400));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.bv-hero__sub {
	font-size: var(--bv-text-lg);
	color: var(--bv-ink-soft);
	max-width: 46ch;
	margin-bottom: 1.9rem;
}

.bv-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 2rem;
}

.bv-hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bv-line);
}

.bv-hero__proof-item { display: flex; flex-direction: column; gap: 0.1rem; }

.bv-hero__proof-num {
	font-family: var(--bv-font-display);
	font-size: 1.5rem;
	font-weight: 650;
	color: var(--bv-green);
	line-height: 1;
}

.bv-hero__proof-label {
	font-size: var(--bv-text-xs);
	color: var(--bv-ink-muted);
	letter-spacing: 0.04em;
}

/* ── Product highlight card ─────────────────────────────────────────────── */

.bv-hero__card {
	position: relative;
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	background: var(--bv-glass);
	backdrop-filter: var(--bv-blur);
	-webkit-backdrop-filter: var(--bv-blur);
	border: 1px solid var(--bv-glass-border);
	border-radius: var(--bv-radius-xl);
	box-shadow: var(--bv-shadow-lg);
	transition: transform var(--bv-dur) var(--bv-ease-out),
	            box-shadow var(--bv-dur) var(--bv-ease-out);
}

.bv-hero__card:hover {
	transform: translateY(-8px);
	box-shadow: 0 32px 72px rgba(27, 61, 47, 0.20);
}

.bv-hero__card-media {
	position: relative;
	display: grid;
	place-items: center;
	border-radius: var(--bv-radius-lg);
	background: linear-gradient(160deg, var(--bv-gold-50), var(--bv-green-50));
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	min-height: 260px;
	overflow: hidden;
}

.bv-hero__card-media img {
	max-height: 320px;
	width: auto;
	filter: drop-shadow(0 18px 28px rgba(27, 61, 47, 0.22));
	transition: transform 600ms var(--bv-ease-out);
}

.bv-hero__card:hover .bv-hero__card-media img { transform: scale(1.04) rotate(-1.5deg); }

/* Anchored to the card, not the media box, because .bv-hero__card-media clips
   overflow, which was slicing the ribbon in half. */
.bv-hero__card-ribbon {
	position: absolute;
	z-index: 2;
	top: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	right: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	padding: 0.35rem 0.8rem;
	border-radius: var(--bv-radius-pill);
	background: var(--bv-green);
	color: var(--bv-gold-400);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bv-hero__card h3 { margin: 0 0 0.3rem; font-size: var(--bv-text-xl); }

.bv-hero__card-price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.bv-hero__card-price strong {
	font-family: var(--bv-font-display);
	font-size: 1.45rem;
	color: var(--bv-green);
}

.bv-hero__card-price del { color: var(--bv-ink-muted); font-size: var(--bv-text-sm); }

/* The four badges from the brief. */
.bv-hero__card-badges {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.bv-hero__card-badges span {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.65rem;
	border-radius: var(--bv-radius-sm);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--bv-line);
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--bv-green-700);
	transition: background-color var(--bv-dur-fast) var(--bv-ease),
	            border-color var(--bv-dur-fast) var(--bv-ease),
	            transform var(--bv-dur-fast) var(--bv-ease-out);
}

.bv-hero__card-badges span:hover {
	background: var(--bv-white);
	border-color: var(--bv-gold);
	transform: translateY(-2px);
}

.bv-hero__card-badges svg { width: 15px; height: 15px; color: var(--bv-gold-600); flex: none; }

@media (max-width: 880px) {
	.bv-hero__inner { grid-template-columns: 1fr; }
	.bv-hero__card  { max-width: 480px; margin-inline: auto; }
	.bv-hero__proof { gap: 1rem 1.6rem; }
}

/* ---------------------------------------------------------------------------
   TRUST BAR
   ------------------------------------------------------------------------- */

.bv-trust {
	background: var(--bv-green);
	color: var(--bv-cream);
	padding-block: 1.1rem;
}

.bv-trust__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 0.85rem 1.5rem;
}

.bv-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-size: var(--bv-text-sm);
	font-weight: 550;
	color: rgba(247, 249, 246, 0.92);
	text-align: center;
}

.bv-trust__item svg { width: 20px; height: 20px; color: var(--bv-gold-400); flex: none; }

/* ---------------------------------------------------------------------------
   BENEFITS
   ------------------------------------------------------------------------- */

.bv-benefit {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: var(--bv-white);
	border: 1px solid var(--bv-line);
	border-radius: var(--bv-radius-lg);
	padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	box-shadow: var(--bv-shadow-sm);
	position: relative;
	overflow: hidden;
	transition: transform var(--bv-dur) var(--bv-ease-out),
	            box-shadow var(--bv-dur) var(--bv-ease-out),
	            border-color var(--bv-dur) var(--bv-ease);
}

.bv-benefit:hover {
	transform: translateY(-6px);
	box-shadow: var(--bv-shadow-lg);
	border-color: rgba(197, 155, 39, 0.38);
}

.bv-benefit__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--bv-radius);
	background: linear-gradient(145deg, var(--bv-green-50), var(--bv-gold-50));
	border: 1px solid var(--bv-line);
	transition: transform var(--bv-dur) var(--bv-ease-out),
	            background var(--bv-dur) var(--bv-ease);
}

.bv-benefit:hover .bv-benefit__icon {
	transform: rotate(-6deg) scale(1.06);
	background: linear-gradient(145deg, var(--bv-gold-100), var(--bv-green-100));
}

.bv-benefit__icon svg { width: 26px; height: 26px; color: var(--bv-green); }
.bv-benefit h3 { margin: 0; font-size: var(--bv-text-xl); }
.bv-benefit p  { margin: 0; color: var(--bv-ink-soft); font-size: var(--bv-text-sm); }

/* Large watermark numeral. */
.bv-benefit__num {
	position: absolute;
	top: -0.6rem;
	inset-inline-end: 0.4rem;
	font-family: var(--bv-font-display);
	font-size: 4.5rem;
	font-weight: 700;
	color: rgba(27, 61, 47, 0.045);
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

/* ---------------------------------------------------------------------------
   INGREDIENTS
   ------------------------------------------------------------------------- */

.bv-ingredient {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 1.1rem;
	align-items: start;
	background: var(--bv-white);
	border: 1px solid var(--bv-line);
	border-radius: var(--bv-radius-lg);
	padding: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
	box-shadow: var(--bv-shadow-xs);
	transition: transform var(--bv-dur) var(--bv-ease-out),
	            box-shadow var(--bv-dur) var(--bv-ease-out),
	            border-color var(--bv-dur) var(--bv-ease);
}

.bv-ingredient:hover {
	transform: translateY(-4px);
	box-shadow: var(--bv-shadow-md);
	border-color: rgba(197, 155, 39, 0.4);
}

.bv-ingredient__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--bv-green-50);
	border: 1px solid var(--bv-green-100);
}

.bv-ingredient__icon svg { width: 32px; height: 32px; }

.bv-ingredient h3 { margin: 0 0 0.15rem; font-size: var(--bv-text-lg); }

.bv-ingredient__latin {
	display: block;
	font-family: var(--bv-font-body);
	font-size: var(--bv-text-xs);
	font-style: italic;
	color: var(--bv-gold-700);
	margin-bottom: 0.5rem;
}

.bv-ingredient p { margin: 0; font-size: var(--bv-text-sm); color: var(--bv-ink-soft); }

/* ---------------------------------------------------------------------------
   HOW TO USE
   ------------------------------------------------------------------------- */

.bv-step { position: relative; padding-top: 2.4rem; }

.bv-step__num {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bv-green);
	color: var(--bv-gold-400);
	font-family: var(--bv-font-display);
	font-size: 1.15rem;
	font-weight: 650;
	box-shadow: var(--bv-shadow-sm);
}

.bv-step h3 { margin: 0.5rem 0 0.4rem; font-size: var(--bv-text-lg); }
.bv-step p  { margin: 0; color: var(--bv-ink-soft); font-size: var(--bv-text-sm); }

/* ---------------------------------------------------------------------------
   TESTIMONIALS
   ------------------------------------------------------------------------- */

.bv-quote {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	background: var(--bv-white);
	border: 1px solid var(--bv-line);
	border-radius: var(--bv-radius-lg);
	padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	box-shadow: var(--bv-shadow-sm);
	height: 100%;
	transition: transform var(--bv-dur) var(--bv-ease-out),
	            box-shadow var(--bv-dur) var(--bv-ease-out);
}

.bv-quote:hover { transform: translateY(-5px); box-shadow: var(--bv-shadow-md); }

.bv-quote__stars { display: flex; gap: 2px; color: var(--bv-gold); }
.bv-quote__stars svg { width: 17px; height: 17px; }

.bv-quote p {
	margin: 0;
	font-size: var(--bv-text-sm);
	color: var(--bv-ink-soft);
	line-height: 1.7;
}

.bv-quote__author {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--bv-line);
}

.bv-quote__avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--bv-green-50);
	color: var(--bv-green);
	font-family: var(--bv-font-display);
	font-weight: 650;
	font-size: 0.95rem;
	flex: none;
}

.bv-quote__name  { font-size: var(--bv-text-sm); font-weight: 600; color: var(--bv-green-800); line-height: 1.3; }
.bv-quote__meta  { font-size: var(--bv-text-xs); color: var(--bv-ink-muted); }

/* ---------------------------------------------------------------------------
   SOCIALS
   ------------------------------------------------------------------------- */

.bv-social-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	border-radius: var(--bv-radius-lg);
	background: var(--bv-white);
	border: 1px solid var(--bv-line);
	box-shadow: var(--bv-shadow-sm);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--bv-dur) var(--bv-ease-out),
	            box-shadow var(--bv-dur) var(--bv-ease-out);
}

.bv-social-card:hover { transform: translateY(-6px); box-shadow: var(--bv-shadow-lg); }

/* Brand-tinted wash that fades in on hover. */
.bv-social-card::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--bv-dur) var(--bv-ease);
	pointer-events: none;
}

.bv-social-card--ig::before {
	background: linear-gradient(135deg, rgba(240, 148, 51, 0.10), rgba(220, 39, 67, 0.10) 45%, rgba(188, 24, 136, 0.10));
}

.bv-social-card--tt::before {
	background: linear-gradient(135deg, rgba(37, 244, 238, 0.10), rgba(254, 44, 85, 0.10));
}

.bv-social-card:hover::before { opacity: 1; }

.bv-social-card__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: var(--bv-radius);
	background: var(--bv-green);
	color: var(--bv-white);
	transition: transform var(--bv-dur) var(--bv-ease-out);
}

.bv-social-card:hover .bv-social-card__icon { transform: scale(1.08) rotate(-5deg); }
.bv-social-card__icon svg { width: 27px; height: 27px; }

.bv-social-card h3     { position: relative; margin: 0; font-size: var(--bv-text-xl); }
.bv-social-card__handle{ position: relative; font-size: var(--bv-text-sm); color: var(--bv-gold-700); font-weight: 600; }
.bv-social-card p      { position: relative; margin: 0; font-size: var(--bv-text-sm); color: var(--bv-ink-soft); }

.bv-social-card__go {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 0.4rem;
	font-size: var(--bv-text-sm);
	font-weight: 650;
	color: var(--bv-green);
}

.bv-social-card__go svg {
	width: 16px;
	height: 16px;
	transition: transform var(--bv-dur) var(--bv-ease-out);
}

.bv-social-card:hover .bv-social-card__go svg { transform: translateX(5px); }

/* ---------------------------------------------------------------------------
   CTA BANNER
   ------------------------------------------------------------------------- */

.bv-cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--bv-radius-xl);
	padding: clamp(2.25rem, 1.6rem + 3vw, 4rem);
	background:
		radial-gradient(60% 120% at 88% 10%, rgba(197, 155, 39, 0.26), transparent 62%),
		linear-gradient(140deg, var(--bv-green-800), var(--bv-green) 60%, var(--bv-green-600));
	color: var(--bv-cream);
	text-align: center;
	box-shadow: var(--bv-shadow-lg);
}

.bv-cta h2 { color: var(--bv-white); margin: 0 0 0.75rem; }

.bv-cta p {
	color: rgba(247, 249, 246, 0.82);
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: 1.75rem;
	font-size: var(--bv-text-lg);
}

.bv-cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */

.site-footer,
.ast-small-footer,
.site-below-footer-wrap,
.site-primary-footer-wrap {
	background: var(--bv-green-900) !important;
	color: rgba(247, 249, 246, 0.72);
	border: 0 !important;
}

.site-footer a,
.site-below-footer-wrap a,
.site-primary-footer-wrap a { color: rgba(247, 249, 246, 0.78); text-decoration: none; }
.site-footer a:hover,
.site-below-footer-wrap a:hover,
.site-primary-footer-wrap a:hover { color: var(--bv-gold-400); }

.site-footer h2,
.site-footer h3,
.site-footer .widget-title { color: var(--bv-white) !important; font-size: var(--bv-text-base) !important; }

.bv-footer {
	background: var(--bv-green-900);
	color: rgba(247, 249, 246, 0.85);
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 0;
}

.bv-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	padding-bottom: 2.5rem;
}

@media (max-width: 900px) {
	.bv-footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}

.bv-footer__brand { font-family: var(--bv-font-display); font-size: 1.6rem; color: var(--bv-white); line-height: 1.1; }
.bv-footer__brand span { display: block; font-family: var(--bv-font-body); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bv-gold-400); margin-top: 0.35rem; }
.bv-footer__about { margin: 1rem 0 1.25rem; font-size: var(--bv-text-sm); max-width: 34ch; }

.bv-footer h3 {
	color: var(--bv-white);
	font-family: var(--bv-font-body);
	font-size: var(--bv-text-sm);
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.bv-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

/* Every link inside the footer must be set explicitly. The brand footer uses
   .bv-footer, not Astra's .site-footer, so without this the links fell back to
   the global link colour (#2A5442) on a near-black green ground: a contrast
   ratio of 1.9:1, effectively invisible until hovered. */
.bv-footer a,
.bv-footer ul a,
.bv-footer__contact a {
	color: rgba(247, 249, 246, 0.82);
	text-decoration: none;
	transition: color var(--bv-dur-fast) var(--bv-ease),
	            padding-inline-start var(--bv-dur-fast) var(--bv-ease);
}

.bv-footer ul a { font-size: var(--bv-text-sm); }

.bv-footer a:hover,
.bv-footer ul a:hover,
.bv-footer__contact a:hover { color: var(--bv-gold-400); }

.bv-footer ul a:hover { padding-inline-start: 5px; }

.bv-footer__socials a { color: rgba(247, 249, 246, 0.9); }

.bv-footer__socials { display: flex; gap: 0.6rem; }

.bv-footer__socials a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--bv-radius);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(247, 249, 246, 0.85);
	transition: transform var(--bv-dur) var(--bv-ease-out),
	            background-color var(--bv-dur) var(--bv-ease),
	            color var(--bv-dur) var(--bv-ease);
}

.bv-footer__socials a:hover {
	transform: translateY(-3px);
	background: var(--bv-gold);
	color: var(--bv-green-900);
	border-color: var(--bv-gold);
}

.bv-footer__socials svg { width: 20px; height: 20px; }

.bv-footer__contact { display: grid; gap: 0.5rem; font-size: var(--bv-text-sm); }
.bv-footer__contact div { display: flex; gap: 0.55rem; align-items: flex-start; }
.bv-footer__contact svg { width: 16px; height: 16px; color: var(--bv-gold-400); flex: none; margin-top: 3px; }

.bv-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-block: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	font-size: var(--bv-text-xs);
	color: rgba(247, 249, 246, 0.72);
}

.bv-footer__owner { color: var(--bv-gold-400); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Floating WhatsApp / back-to-top
   ------------------------------------------------------------------------- */

.bv-totop {
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-start: 1.25rem;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bv-line);
	border-radius: 50%;
	background: var(--bv-glass-strong);
	backdrop-filter: var(--bv-blur);
	-webkit-backdrop-filter: var(--bv-blur);
	color: var(--bv-green);
	box-shadow: var(--bv-shadow);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--bv-dur) var(--bv-ease),
	            transform var(--bv-dur) var(--bv-ease-out),
	            visibility var(--bv-dur);
}

.bv-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.bv-totop:hover { background: var(--bv-green); color: var(--bv-gold-400); }
.bv-totop svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   Toast (AJAX add-to-cart feedback)
   ------------------------------------------------------------------------- */

.bv-toast {
	position: fixed;
	inset-block-start: calc(var(--bv-header-h) + 12px);
	inset-inline-end: 1rem;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: min(92vw, 340px);
	padding: 0.85rem 1.1rem;
	border-radius: var(--bv-radius);
	background: var(--bv-green);
	color: var(--bv-cream);
	font-size: var(--bv-text-sm);
	font-weight: 550;
	box-shadow: var(--bv-shadow-lg);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity var(--bv-dur) var(--bv-ease), transform var(--bv-dur) var(--bv-ease-out);
	pointer-events: none;
}

.bv-toast.is-visible { opacity: 1; transform: none; }
.bv-toast svg { width: 18px; height: 18px; color: var(--bv-gold-400); flex: none; }

/* ===========================================================================
   Block-editor bridge
   ---------------------------------------------------------------------------
   The patterns are built from core blocks, so these rules map WordPress's
   generated markup onto the brand layout system above.
   =========================================================================== */

/* Full-width sections still need the site gutter and max width inside. */
.bv-section > .wp-block-group__inner-container,
.bv-section > .bv-container,
.bv-hero > .wp-block-group__inner-container {
	width: 100%;
	max-width: var(--bv-maxw);
	margin-inline: auto;
	padding-inline: var(--bv-gutter);
}

/* The hero's two columns. */
.bv-hero__inner { gap: clamp(2rem, 1rem + 4vw, 4rem) !important; }
.bv-hero__inner > .wp-block-column { min-width: 0; }

@media (max-width: 880px) {
	.bv-hero__inner { flex-wrap: wrap !important; }
	.bv-hero__inner > .wp-block-column { flex-basis: 100% !important; }
	.bv-hero__card { max-width: 460px; margin-inline: auto; }
	.bv-hero__ctas .bv-btn { flex: 1 1 auto; }
}

/* Patterns place a .bv-section__head group before each grid. */
.bv-section__head > .wp-block-group__inner-container > * { margin-block: 0; }
.bv-section__head h2 { margin-bottom: 0.75rem; }

/* A shortcode block wraps its output in a bare <p> in some contexts; make
   sure that never introduces stray vertical rhythm. */
.bv-section .wp-block-shortcode { margin: 0; }

/* Checkout reassurance note (rendered by inc/woocommerce.php). */
.bv-checkout-note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--bv-radius-sm);
	background: var(--bv-green-50);
	color: var(--bv-green-800);
	font-size: var(--bv-text-xs);
	line-height: 1.5;
}

.bv-checkout-note svg { color: var(--bv-gold-600); flex: none; }

/* ---------------------------------------------------------------------------
   Full-bleed pattern pages
   ---------------------------------------------------------------------------
   Astra nests page content as
     #content.site-content > .ast-container > #primary > main > article
       > header.entry-header
       > .entry-content > .alignfull…
   so the container's max-width and padding have to be neutralised at every
   level for a coloured band to actually reach the viewport edge.
   ------------------------------------------------------------------------- */

.bv-fullwidth-page .site-content > .ast-container {
	max-width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}

.bv-fullwidth-page .site-content #primary,
.bv-fullwidth-page .site-content #main,
.bv-fullwidth-page .site-content .ast-article-single {
	margin: 0;
	padding: 0;
	max-width: 100%;
	border: 0;
	background: transparent;
}

/* Astra implements .alignfull as `width: 100vw` with negative side margins.
   100vw includes the scrollbar, so on a scrolling page every full-width band
   sat ~8px wider than the viewport and forced a horizontal scroll. Because the
   container above is already neutralised, plain 100% is both correct and
   scrollbar-safe. !important is needed to beat Astra's own rule. */
.bv-fullwidth-page .entry-content > .alignfull,
.bv-fullwidth-page .entry-content > .wp-block-group.alignfull {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.bv-fullwidth-page .entry-content { overflow-x: clip; }

/* The hero already states the page's name; Astra's "Home" title above it is
   noise, so it is hidden (and kept for screen readers). */
.bv-fullwidth-page .entry-header {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Interior prose pages keep the container but gain the brand rhythm. */
.page .entry-content > .bv-section:first-child { padding-top: clamp(2rem, 1.4rem + 2vw, 3.5rem); }

/* The trust bar is a bare <section> dropped in by shortcode, so its wrapper
   group must not re-introduce the block editor's content padding, the band
   is meant to run edge to edge like the other coloured sections. */
/* In flow layout there is no __inner-container, so Astra's alignfull side
   padding lands on the group element itself and must be cleared there. */
.bv-fullwidth-page .entry-content > .bv-trust-wrap,
.bv-trust-wrap > .wp-block-group__inner-container {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0 !important;
}

.bv-trust { width: 100%; }

/* ===========================================================================
   Header identity
   ---------------------------------------------------------------------------
   The logo image already spells out "Bio Vedik / Ayurvedic Hair Care", so the
   text site-title beside it is a duplicate. Astra emits `.site-title{display:
   block}` in its dynamic CSS whatever the customiser option says, so it is
   hidden here, visually only, leaving it readable by assistive tech and
   crawlers.
   =========================================================================== */

.site-header .site-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ===========================================================================
   Interior prose pages
   ---------------------------------------------------------------------------
   Policy, FAQ and story pages centre their body in a narrow measure, which
   left the page title stranded at the far edge. Centring the header puts it
   back on the same axis as the text it introduces.
   =========================================================================== */

.page:not(.bv-fullwidth-page) .entry-header {
	max-width: var(--bv-maxw-narrow);
	margin: 0 auto;
	padding-block: clamp(2rem, 1.4rem + 2vw, 3.25rem) 0;
	text-align: center;
}

.page:not(.bv-fullwidth-page) .entry-header .entry-title {
	font-size: var(--bv-h2) !important;
	margin: 0;
}

/* A slim gold rule under the title, echoing the section eyebrows. */
.page:not(.bv-fullwidth-page) .entry-header::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin: 1rem auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--bv-gold), transparent);
}

/* Prose rhythm inside the narrow measure. */
.bv-narrow > h2 { margin-top: 2.5rem; }
.bv-narrow > h3 { margin-top: 1.75rem; }
.bv-narrow > h2:first-child,
.bv-narrow > h3:first-child { margin-top: 0; }
.bv-narrow ul,
.bv-narrow ol { margin: 0 0 1rem; padding-inline-start: 1.35rem; }
.bv-narrow li { margin-bottom: 0.4rem; }

/* Policy tables (shipping rates) need to stay readable on a phone. */
.bv-narrow table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: var(--bv-text-sm);
}

.bv-narrow th,
.bv-narrow td {
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--bv-line);
	text-align: start;
}

.bv-narrow th {
	background: var(--bv-cream-dark);
	font-weight: 650;
	color: var(--bv-green-800);
}

/* ===========================================================================
   Off-canvas (mobile) menu
   ---------------------------------------------------------------------------
   The desktop nav's centre-growing gold underline is drawn with ::after sized
   against the link box. In the stacked mobile list each row is full width, so
   that rule painted a long rule across the panel. Mobile gets a left accent
   bar for the active item instead.
   =========================================================================== */

#ast-mobile-header .main-header-menu .menu-link::after,
.ast-mobile-popup-drawer .main-header-menu .menu-link::after {
	display: none !important;
}

#ast-mobile-header .main-header-menu,
.ast-mobile-popup-drawer .main-header-menu {
	background: var(--bv-cream);
	border-top: 1px solid var(--bv-line);
}

#ast-mobile-header .main-header-menu .menu-item,
.ast-mobile-popup-drawer .main-header-menu .menu-item {
	border-bottom: 1px solid rgba(27, 61, 47, 0.07);
}

#ast-mobile-header .main-header-menu .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-link {
	/* 48px min keeps every row a comfortable tap target. */
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-block: 0.7rem;
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid transparent;
	font-size: 0.95rem;
	transition: background-color var(--bv-dur-fast) var(--bv-ease),
	            border-color var(--bv-dur-fast) var(--bv-ease);
}

#ast-mobile-header .main-header-menu .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link {
	background: var(--bv-green-50);
	border-inline-start-color: var(--bv-gold);
	font-weight: 650;
}

/* The "Order Now" item becomes a full-width gold button at the end of the list. */
#ast-mobile-header .main-header-menu .menu-item.bv-nav-cta,
.ast-mobile-popup-drawer .main-header-menu .menu-item.bv-nav-cta {
	border-bottom: 0;
	padding: 1rem 1.25rem 1.25rem;
	display: block;
}

#ast-mobile-header .main-header-menu .menu-item.bv-nav-cta > .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-item.bv-nav-cta > .menu-link {
	justify-content: center;
	height: 48px;
	padding: 0 1.5rem !important;
	margin: 0;
	border: 0;
	border-radius: var(--bv-radius-pill);
	background: var(--bv-gold);
	color: var(--bv-green-900) !important;
	font-size: 0.95rem;
	font-weight: 650;
}

/* Close button: give it the brand colour rather than Astra's default. */
#ast-mobile-header .menu-toggle,
.ast-mobile-popup-drawer .menu-toggle-close {
	color: var(--bv-green);
}

/* ===========================================================================
   Reading size on small screens
   ---------------------------------------------------------------------------
   Astra's responsive typography drops the body to ~14.6px on a phone, and the
   policy tables inherited ~12.8px from that. That is uncomfortably small for
   the long-form pages (policies, FAQ, journal articles) where people actually
   read rather than scan, so prose gets a 16px floor on mobile.
   =========================================================================== */

@media (max-width: 768px) {
	.bv-narrow,
	.bv-narrow p,
	.bv-narrow li,
	.single .entry-content p,
	.single .entry-content li {
		font-size: 1rem;
		line-height: 1.7;
	}

	.bv-narrow table { font-size: 0.9375rem; }

	.bv-narrow th,
	.bv-narrow td { padding: 0.65rem 0.7rem; }

	/* Headings inside prose need a little more room once the body grows. */
	.bv-narrow > h2 { margin-top: 2rem; }
	.bv-narrow > h3 { margin-top: 1.5rem; }
}

/* Astra's own archive / search / 404 title, brought onto the brand palette.
   These pages keep Astra's heading rather than gaining a second one. */
.ast-archive-title,
.search .page-title,
.error404 .page-title {
	font-family: var(--bv-font-display);
	font-size: var(--bv-h2) !important;
	color: var(--bv-green) !important;
	margin-bottom: 0.75rem;
}

.search .page-title,
.error404 .page-title { text-align: center; }

/* The testimonials block renders its own section wrapper (so it can vanish
   entirely when there are no genuine reviews), which means its group must not
   add the editor's side padding on top. */
.bv-fullwidth-page .entry-content > .bv-testimonials-wrap,
.bv-testimonials-wrap > .wp-block-group__inner-container {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0 !important;
}