/* ════════════════════════════════════════════════════════════
   ORGANIC LIFE BD — Main Design System
   Conversion-focused · Mobile-first · Bengali typography
   ════════════════════════════════════════════════════════════ */

:root {
	/* Brand palette */
	--olb-green:        #16a34a;
	--olb-green-dark:   #15803d;
	--olb-green-light:  #dcfce7;
	--olb-amber:        #f59e0b;
	--olb-amber-dark:   #d97706;
	--olb-amber-light:  #fef3c7;
	--olb-red:          #dc2626;

	/* Neutrals */
	--olb-text:         #1e293b;
	--olb-text-soft:    #475569;
	--olb-text-mute:    #64748b;
	--olb-bg:           #fafaf9;
	--olb-bg-alt:       #f1f5f9;
	--olb-border:       #e2e8f0;
	--olb-white:        #ffffff;

	/* Spacing */
	--olb-radius-sm: 8px;
	--olb-radius:    12px;
	--olb-radius-lg: 18px;
	--olb-shadow:    0 2px 6px rgba(0,0,0,0.05);
	--olb-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
	--olb-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

	/* Layout */
	--olb-container: 1240px;
	--olb-header-h:  76px;
}

/* ──────────── Base ──────────── */
* { box-sizing: border-box; }
body {
	font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'Inter', -apple-system, system-ui, sans-serif;
	color: var(--olb-text);
	background: var(--olb-bg);
	line-height: 1.65;
	margin: 0;
}
h1, h2, h3, h4 { margin: 0 0 0.5em; color: var(--olb-text); line-height: 1.25; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; color: var(--olb-text-soft); }
a  { color: var(--olb-green); transition: color 0.2s; }
a:hover { color: var(--olb-green-dark); }
img { max-width: 100%; height: auto; display: block; }

/* ──────────── Layout helpers ──────────── */
.olb-wrap {
	max-width: var(--olb-container);
	margin: 0 auto;
	padding: 0 20px;
}
.olb-grid { display: grid; gap: 24px; }
.olb-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.olb-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.olb-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.olb-grid-products { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.olb-hide-mobile { display: inline; }
@media (max-width: 768px) {
	.olb-hide-mobile { display: none; }
}

/* ──────────── Top trust strip (sticky above the main header) ──────────── */
.olb-topstrip {
	background: var(--olb-green-dark);
	color: white;
	font-size: 13px;
	padding: 8px 0;
	position: relative;
	z-index: 2;
}
/* (Admin-bar offset now lives on .olb-header-stack — see Header section.) */
.olb-topstrip-inner {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.olb-topstrip a { color: white; font-weight: 700; }
.olb-topstrip-item { white-space: nowrap; }

/* ──────────── Header ──────────── */
/* Sits BELOW the sticky topstrip — `--olb-topstrip-h` is the green strip's
   height (set in :root). Both elements stack-stick: green strip on top,
   white nav header right under it. Calculated via calc() because the
   value changes when the WP admin bar is present (logged-in users). */
:root { --olb-topstrip-h: 38px; }
.olb-header {
	position: relative;
	background: white;
	box-shadow: var(--olb-shadow);
	z-index: 1;
	transition: padding 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* 🔝 Green strip + white header stick together as ONE unit — so there is never
   a transparent gap between them where the page content peeks through. */
.olb-header-stack {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* WordPress admin bar offset — push the sticky header stack below the bar. */
.admin-bar .olb-header-stack { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .olb-header-stack { top: 46px; }
}

/* Compact + visually-deeper header when the page has been scrolled.
   The `is-scrolled` class is toggled by assets/js/main.js. */
.olb-header.is-scrolled {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.olb-header.is-scrolled .olb-header-inner {
	min-height: 64px; /* shrinks from 76px to 64px when scrolled */
}
.olb-header.is-scrolled .olb-logo-leaf { font-size: 26px; }
.olb-header.is-scrolled .olb-logo-main { font-size: 16px; }
.olb-header.is-scrolled .olb-logo-tag { display: none; }
.olb-header.is-scrolled .olb-cta { padding: 10px 18px; font-size: 14px; }
.olb-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--olb-header-h);
}
.olb-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}
.olb-logo:hover { text-decoration: none; }
.olb-logo-leaf {
	font-size: 32px;
	filter: drop-shadow(0 2px 4px rgba(22,163,74,0.3));
}
.olb-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.olb-logo-main {
	font-size: 18px;
	font-weight: 800;
	color: var(--olb-green-dark);
	letter-spacing: -0.01em;
}
.olb-logo-tag {
	font-size: 11px;
	color: var(--olb-text-mute);
	font-weight: 500;
}
.custom-logo { max-height: 50px; width: auto; }
.olb-nav { display: flex; align-items: center; gap: 30px; }
.olb-nav-list {
	display: flex;
	gap: 28px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.olb-nav-list a {
	color: var(--olb-text);
	font-weight: 600;
	font-size: 15px;
	transition: color 0.2s;
}
.olb-nav-list a:hover { color: var(--olb-green); text-decoration: none; }
.olb-nav-cta {
	display: flex;
	gap: 10px;
	align-items: center;
}
.olb-burger {
	display: none;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
}
.olb-burger span {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--olb-text);
	border-radius: 2px;
	transition: all 0.3s;
}
.olb-burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.olb-burger.is-open span:nth-child(2) { opacity: 0; }
.olb-burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

@media (max-width: 1024px) {
	.olb-burger { display: flex; }
	.olb-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
		flex-direction: column;
		padding: 20px;
		gap: 16px;
		border-top: 1px solid var(--olb-border);
		box-shadow: var(--olb-shadow-md);
		transform: translateY(-10px);
		opacity: 0;
		pointer-events: none;
		transition: all 0.25s;
	}
	.olb-nav.is-open {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	.olb-nav-list {
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}
	.olb-nav-cta {
		width: 100%;
		flex-direction: column;
	}
	.olb-nav-cta .olb-cta { width: 100%; text-align: center; }
}

/* ──────────── CTAs ──────────── */
.olb-cta {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--olb-radius);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	white-space: nowrap;
}
.olb-cta:hover { text-decoration: none; transform: translateY(-2px); }
.olb-cta-primary {
	background: linear-gradient(135deg, var(--olb-green), var(--olb-green-dark));
	color: white !important;
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}
.olb-cta-primary:hover {
	background: linear-gradient(135deg, var(--olb-green-dark), #166534);
	box-shadow: 0 6px 18px rgba(22, 163, 74, 0.4);
	color: white !important;
}
.olb-cta-ghost {
	background: white;
	color: var(--olb-text) !important;
	border: 2px solid var(--olb-border);
}
.olb-cta-ghost:hover {
	border-color: var(--olb-green);
	color: var(--olb-green) !important;
}
.olb-cta-white {
	background: white;
	color: var(--olb-green-dark) !important;
	box-shadow: var(--olb-shadow-md);
}
.olb-cta-white:hover { background: #f8fafc; color: var(--olb-green-dark) !important; }
.olb-cta-lg { padding: 16px 32px; font-size: 16px; }
.olb-cta-block { display: block; width: 100%; }

/* ──────────── HERO ──────────── */
.olb-hero {
	background:
		radial-gradient(circle at 80% 20%, rgba(22, 163, 74, 0.08), transparent 50%),
		radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.08), transparent 50%),
		linear-gradient(135deg, #fafaf9, #f0fdf4);
	padding: 60px 0 80px;
	overflow: hidden;
	position: relative;
}

/* ──────────── HERO with FAMILY PHOTO BACKGROUND ──────────── */
.olb-hero-photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll; /* avoid jank on mobile */
	padding: 90px 0 110px;
	color: white;
}
.olb-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg,
			rgba(20, 83, 45, calc(var(--overlay-strength) + 0.1)),
			rgba(15, 60, 30, var(--overlay-strength)) 50%,
			rgba(0, 0, 0, calc(var(--overlay-strength) - 0.05))
		);
	z-index: 0;
}
.olb-hero-photo .olb-hero-inner { position: relative; z-index: 1; }

/* All hero text turns light on the photo */
.olb-hero-photo .olb-hero-pill {
	background: rgba(255, 255, 255, 0.18);
	color: white;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.25);
}
.olb-hero-photo .olb-hero-title { color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.olb-hero-photo .olb-hero-accent {
	background: linear-gradient(135deg, #fbbf24, #fb923c);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.olb-hero-photo .olb-hero-sub {
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.olb-hero-photo .olb-stat {
	border-left-color: #fbbf24;
}
.olb-hero-photo .olb-stat-num {
	color: #fbbf24;
	text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.olb-hero-photo .olb-stat-label {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
}
.olb-hero-photo .olb-hero-trust {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Glass-effect product card sits on the photo */
.olb-hero-photo .olb-hero-product-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Make the ghost CTA legible on dark photo (force white-on-dark variant) */
.olb-hero-photo .olb-cta-ghost {
	background: rgba(255, 255, 255, 0.12);
	color: white !important;
	border-color: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(10px);
}
.olb-hero-photo .olb-cta-ghost:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: white;
	color: white !important;
}

/* If there's NO background image yet, also apply a subtle overlay so layout
   doesn't break — fallback colourful gradient */
.olb-hero:not(.olb-hero-photo) .olb-hero-overlay {
	display: none;
}

/* Mobile: stronger overlay for better text readability on busy photos */
@media (max-width: 768px) {
	.olb-hero-photo {
		padding: 60px 0 70px;
	}
	.olb-hero-photo .olb-hero-overlay {
		background:
			linear-gradient(160deg,
				rgba(20, 83, 45, 0.85),
				rgba(15, 60, 30, 0.78) 50%,
				rgba(0, 0, 0, 0.6)
			);
	}
}
.olb-hero-inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 60px;
	align-items: center;
}
@media (max-width: 900px) {
	.olb-hero-inner { grid-template-columns: 1fr; gap: 40px; }
}
.olb-hero-pill {
	display: inline-block;
	background: var(--olb-green-light);
	color: var(--olb-green-dark);
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 20px;
}
.olb-hero-title {
	font-size: clamp(2rem, 5.5vw, 3.6rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
}
.olb-hero-accent {
	display: inline-block;
	background: linear-gradient(135deg, var(--olb-green), var(--olb-amber));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.olb-hero-sub {
	font-size: clamp(15px, 2vw, 17px);
	color: var(--olb-text-soft);
	line-height: 1.7;
	margin-bottom: 28px;
	max-width: 540px;
}
.olb-hero-stats {
	display: flex;
	gap: 30px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}
.olb-stat {
	padding-left: 16px;
	border-left: 3px solid var(--olb-green);
}
.olb-stat-num {
	font-size: 30px;
	font-weight: 800;
	color: var(--olb-green-dark);
	line-height: 1;
	margin-bottom: 4px;
}
.olb-stat-label {
	font-size: 13px;
	color: var(--olb-text-mute);
	font-weight: 500;
}
.olb-hero-cta {
	display: flex;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.olb-hero-trust {
	font-size: 13px;
	color: var(--olb-text-mute);
	font-weight: 500;
}

/* Hero product card */
.olb-hero-product { display: flex; justify-content: center; }
.olb-hero-product-card {
	background: white;
	border-radius: var(--olb-radius-lg);
	overflow: hidden;
	box-shadow: var(--olb-shadow-lg);
	width: 100%;
	max-width: 380px;
	position: relative;
	transform: rotate(-2deg);
	transition: transform 0.3s;
}
.olb-hero-product-card:hover { transform: rotate(0deg) scale(1.02); }
.olb-hero-product-img,
.olb-hero-product-placeholder {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--olb-green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 100px;
}
.olb-hero-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: linear-gradient(135deg, var(--olb-amber), var(--olb-amber-dark));
	color: white;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	box-shadow: var(--olb-shadow-md);
}
.olb-hero-product-info { padding: 20px; }
.olb-hero-product-stars { color: var(--olb-amber); font-size: 14px; margin-bottom: 6px; letter-spacing: 1px; }
.olb-hero-product-stars span { color: var(--olb-text-mute); font-size: 12px; margin-left: 4px; }
.olb-hero-product-name {
	font-size: 18px;
	margin: 0 0 10px;
}
.olb-hero-product-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
}
.olb-price-now {
	font-size: 24px;
	font-weight: 800;
	color: var(--olb-green-dark);
}
.olb-price-was {
	font-size: 15px;
	color: var(--olb-text-mute);
	text-decoration: line-through;
}

/* ──────────── Trust strip ──────────── */
.olb-trust-strip {
	background: white;
	border-top: 1px solid var(--olb-border);
	border-bottom: 1px solid var(--olb-border);
	padding: 20px 0;
}
.olb-trust-inner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}
.olb-trust-item {
	color: var(--olb-text-soft);
	font-size: 14px;
	white-space: nowrap;
}
.olb-trust-item strong { color: var(--olb-text); }

/* ──────────── Section base ──────────── */
.olb-section { padding: 70px 0; }
.olb-section-alt { background: white; }
.olb-section-head {
	text-align: center;
	margin-bottom: 50px;
}
.olb-section-title { margin-bottom: 10px; }
.olb-section-sub {
	color: var(--olb-text-mute);
	font-size: 16px;
	max-width: 600px;
	margin: 0 auto;
}
.olb-section-pill {
	display: inline-block;
	background: var(--olb-green-light);
	color: var(--olb-green-dark);
	padding: 6px 14px;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
}

/* ──────────── Features (Why choose us) ──────────── */
.olb-feature {
	text-align: center;
	padding: 24px;
	border-radius: var(--olb-radius);
	background: white;
	box-shadow: var(--olb-shadow);
	transition: transform 0.2s, box-shadow 0.2s;
}
.olb-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--olb-shadow-md);
}
.olb-feature-icon {
	font-size: 48px;
	margin-bottom: 12px;
	display: inline-block;
}
.olb-feature h3 { color: var(--olb-text); margin-bottom: 10px; }
.olb-feature p { color: var(--olb-text-mute); font-size: 14px; margin: 0; }

/* ──────────── Product cards ──────────── */
.olb-product-card {
	background: white;
	border-radius: var(--olb-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--olb-shadow);
	transition: all 0.25s;
	display: flex;
	flex-direction: column;
}
.olb-product-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--olb-shadow-lg);
	text-decoration: none;
}
.olb-product-img-wrap {
	position: relative;
	aspect-ratio: 1;
	background: var(--olb-bg-alt);
	overflow: hidden;
}
.olb-product-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}
.olb-product-card:hover .olb-product-img-wrap img { transform: scale(1.06); }
.olb-product-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80px;
	background: linear-gradient(135deg, var(--olb-green-light), var(--olb-amber-light));
}
.olb-product-sale-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--olb-red);
	color: white;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
}

/* ════════════════════════════════════════════════════════════
   DISCOUNT % BADGE — "৫২% ছাড়" attention-grabber
   3 variants: corner (round, big), pill (small inline), wc (WC override)
   ════════════════════════════════════════════════════════════ */
.olb-discount-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-family: inherit;
	line-height: 1;
	z-index: 4;
}

/* ─── Corner variant — big round badge for product cards ─── */
.olb-discount-corner {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex-direction: column;
	gap: 1px;
	color: white;
	background:
		radial-gradient(circle at 30% 30%, #ef4444, #b91c1c 65%, #7f1d1d);
	box-shadow:
		0 6px 14px rgba(220, 38, 38, 0.4),
		inset 0 -2px 6px rgba(0,0,0,0.2),
		inset 0 2px 4px rgba(255,255,255,0.2);
	transform: rotate(-8deg);
	border: 3px solid white;
	animation: olbDiscountPulse 2.4s ease-in-out infinite;
}
.olb-discount-corner::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
	pointer-events: none;
}
.olb-discount-corner .olb-discount-num {
	font-size: 19px;
	letter-spacing: -0.5px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.olb-discount-corner .olb-discount-label {
	font-size: 10px;
	font-weight: 700;
	opacity: 0.95;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
@keyframes olbDiscountPulse {
	0%, 100% { transform: rotate(-8deg) scale(1); }
	50%      { transform: rotate(-8deg) scale(1.06); }
}

/* Smaller corner badge on hero product card (already has Bestseller) */
.olb-hero-product-card .olb-discount-corner {
	top: 60px;
	width: 56px;
	height: 56px;
}
.olb-hero-product-card .olb-discount-corner .olb-discount-num { font-size: 16px; }

/* ─── Pill variant — compact for tight spots ─── */
.olb-discount-pill {
	background: linear-gradient(135deg, #ef4444, #b91c1c);
	color: white;
	padding: 4px 10px;
	border-radius: 14px;
	font-size: 11px;
	gap: 4px;
	margin-left: 8px;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
	letter-spacing: -0.2px;
}
.olb-discount-pill .olb-discount-num { font-size: 12px; font-weight: 800; }
.olb-discount-pill .olb-discount-label { font-size: 10px; font-weight: 600; opacity: 0.95; }

/* ─── WooCommerce variant — drops into WC's default .onsale slot ─── */
.olb-discount-wc {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-direction: column;
	color: white;
	background: radial-gradient(circle at 30% 30%, #ef4444, #b91c1c 65%);
	box-shadow: 0 6px 14px rgba(220, 38, 38, 0.4);
	border: 3px solid white;
	transform: rotate(-6deg);
	z-index: 9;
}
.olb-discount-wc .olb-discount-num { font-size: 18px; }
.olb-discount-wc .olb-discount-label { font-size: 9px; opacity: 0.95; }

/* WC pages where .onsale floats — keep our badge looking the same */
.woocommerce span.onsale.olb-discount-badge,
.woocommerce ul.products li.product .onsale.olb-discount-badge {
	min-height: 60px !important;
	min-width: 60px !important;
	line-height: normal !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.olb-discount-corner { animation: none; }
}

/* Mobile: slightly smaller badges so they don't dominate small images */
@media (max-width: 600px) {
	.olb-discount-corner { width: 56px; height: 56px; }
	.olb-discount-corner .olb-discount-num { font-size: 16px; }
	.olb-discount-corner .olb-discount-label { font-size: 9px; }
	.olb-hero-product-card .olb-discount-corner {
		width: 48px;
		height: 48px;
	}
	.olb-hero-product-card .olb-discount-corner .olb-discount-num { font-size: 14px; }
}
.olb-product-body { padding: 16px; }
.olb-product-stars { color: var(--olb-amber); font-size: 13px; letter-spacing: 1px; margin-bottom: 4px; }
.olb-product-name {
	font-size: 15px;
	color: var(--olb-text);
	margin-bottom: 8px;
	line-height: 1.3;
}
.olb-product-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 12px;
}
.olb-product-price .olb-price-now { font-size: 18px; }
.olb-product-price .olb-price-was { font-size: 13px; }

/* ──────────── Review cards ──────────── */
.olb-review-card {
	background: white;
	padding: 24px;
	border-radius: var(--olb-radius);
	box-shadow: var(--olb-shadow);
	position: relative;
	transition: all 0.2s;
}
.olb-review-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--olb-shadow-md);
}
.olb-review-card::before {
	content: '"';
	position: absolute;
	top: 6px;
	right: 18px;
	font-size: 70px;
	color: var(--olb-green-light);
	font-family: serif;
	line-height: 1;
}
.olb-review-stars {
	color: var(--olb-amber);
	font-size: 18px;
	letter-spacing: 2px;
	margin-bottom: 12px;
}
.olb-review-text {
	font-size: 14px;
	line-height: 1.7;
	color: var(--olb-text-soft);
	margin-bottom: 16px;
	font-style: italic;
}
.olb-review-author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.olb-review-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 17px;
	flex-shrink: 0;
}
.olb-review-name { font-weight: 700; font-size: 14px; color: var(--olb-text); }
.olb-review-loc { font-size: 12px; color: var(--olb-text-mute); }

/* ──────────── About section ──────────── */
.olb-about-wrap {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 60px;
	align-items: center;
}
@media (max-width: 900px) {
	.olb-about-wrap { grid-template-columns: 1fr; gap: 40px; }
}
.olb-about-list {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: grid;
	gap: 10px;
}
.olb-about-list li {
	font-size: 15px;
	color: var(--olb-text-soft);
}
.olb-about-visual {
	position: relative;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.olb-about-emoji {
	font-size: 220px;
	filter: drop-shadow(0 10px 30px rgba(22, 163, 74, 0.25));
	animation: olb-float 4s ease-in-out infinite;
}
@keyframes olb-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
.olb-about-card {
	position: absolute;
	background: white;
	padding: 14px 18px;
	border-radius: var(--olb-radius);
	box-shadow: var(--olb-shadow-md);
	min-width: 130px;
}
.olb-about-card:nth-child(2) { top: 10%; left: 0; transform: rotate(-3deg); }
.olb-about-card-2 { bottom: 18%; right: 4%; transform: rotate(3deg) !important; }
.olb-about-card-3 { bottom: 0; left: 18%; transform: rotate(-2deg) !important; }
.olb-about-card-num {
	font-size: 22px;
	font-weight: 800;
	color: var(--olb-green-dark);
	line-height: 1;
}
.olb-about-card-text {
	font-size: 11px;
	color: var(--olb-text-mute);
	margin-top: 4px;
	font-weight: 600;
}

/* ──────────── FAQ ──────────── */
.olb-faq { display: grid; gap: 12px; }
.olb-faq-item {
	background: white;
	border-radius: var(--olb-radius);
	padding: 18px 22px;
	box-shadow: var(--olb-shadow);
	border-left: 4px solid var(--olb-green);
	cursor: pointer;
	transition: all 0.2s;
}
.olb-faq-item:hover { box-shadow: var(--olb-shadow-md); }
.olb-faq-item summary {
	font-weight: 700;
	font-size: 16px;
	color: var(--olb-text);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 30px;
}
.olb-faq-item summary::-webkit-details-marker { display: none; }
.olb-faq-item summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	color: var(--olb-green);
	font-weight: 300;
	transition: transform 0.2s;
}
.olb-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.olb-faq-item p {
	margin-top: 12px;
	color: var(--olb-text-soft);
	font-size: 15px;
	line-height: 1.7;
}

/* ──────────── Final CTA strip ──────────── */
.olb-final-cta {
	background: linear-gradient(135deg, var(--olb-green-dark), var(--olb-green));
	color: white;
	padding: 70px 0;
	position: relative;
	overflow: hidden;
}
.olb-final-cta::before, .olb-final-cta::after {
	content: '🌿';
	position: absolute;
	font-size: 200px;
	opacity: 0.08;
}
.olb-final-cta::before { top: -50px; left: -30px; }
.olb-final-cta::after  { bottom: -80px; right: -30px; transform: rotate(180deg); }
.olb-final-cta-inner { text-align: center; position: relative; z-index: 1; }
.olb-final-cta h2 { color: white; margin-bottom: 14px; }
.olb-final-cta p { color: rgba(255,255,255,0.9); font-size: 17px; margin-bottom: 30px; }
.olb-final-cta-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ──────────── Footer ──────────── */
.olb-footer {
	background: #0f172a;
	color: #cbd5e1;
	padding: 60px 0 24px;
}
.olb-footer-badges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 50px;
	padding-bottom: 40px;
	border-bottom: 1px solid #334155;
}
.olb-badge-card {
	text-align: center;
	padding: 16px;
	background: rgba(255,255,255,0.03);
	border-radius: var(--olb-radius);
	border: 1px solid #334155;
}
.olb-badge-icon { font-size: 32px; margin-bottom: 8px; }
.olb-badge-title { font-weight: 700; color: white; font-size: 14px; }
.olb-badge-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.olb-badge-sub a { color: var(--olb-green); font-weight: 700; }
.olb-footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}
.olb-footer-h {
	color: white;
	font-size: 15px;
	margin-bottom: 14px;
	letter-spacing: 0.5px;
}
.olb-footer-about {
	font-size: 14px;
	color: #94a3b8;
	line-height: 1.7;
	margin-bottom: 12px;
}
.olb-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}
.olb-footer-list li, .olb-footer-list a {
	color: #94a3b8;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s;
}
.olb-footer-list a:hover { color: white; }

/* ──────────── Footer social icons ──────────── */
.olb-footer-social {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #334155;
}
.olb-footer-social-label {
	font-size: 12px;
	color: #94a3b8;
	margin-bottom: 10px;
	font-weight: 600;
}
.olb-footer-social-icons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.olb-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.olb-social svg { flex-shrink: 0; }
.olb-social:hover { transform: translateY(-2px); text-decoration: none; }

/* Facebook brand color */
.olb-social-fb {
	background: #1877F2;
	color: white !important;
	box-shadow: 0 3px 8px rgba(24, 119, 242, 0.3);
}
.olb-social-fb:hover {
	background: #0d65d9;
	color: white !important;
	box-shadow: 0 6px 14px rgba(24, 119, 242, 0.45);
}
.olb-footer-bottom {
	padding-top: 24px;
	border-top: 1px solid #334155;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.olb-footer-bottom p {
	margin: 0;
	font-size: 13px;
	color: #94a3b8;
}
.olb-payment-icons span {
	background: rgba(255,255,255,0.05);
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	color: #cbd5e1;
}

/* ──────────── Generic pages / posts ──────────── */
.olb-main { padding: 40px 0 80px; min-height: 60vh; }
.olb-page-header { padding: 30px 0; background: white; border-bottom: 1px solid var(--olb-border); margin-bottom: 40px; }
.olb-page-hero { padding: 80px 0; background-size: cover; background-position: center; color: white; margin-bottom: 40px; }
.olb-page-title { color: inherit; }
.olb-page-content { max-width: 800px; }
.olb-page-content p, .olb-page-content li { font-size: 17px; line-height: 1.8; color: var(--olb-text-soft); }
.olb-posts { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.olb-post-card { background: white; padding: 20px; border-radius: var(--olb-radius); box-shadow: var(--olb-shadow); }
.olb-post-title a { color: var(--olb-text); text-decoration: none; }
.olb-post-title a:hover { color: var(--olb-green); }
.olb-post-meta { font-size: 13px; color: var(--olb-text-mute); margin-bottom: 12px; }
.olb-empty { text-align: center; padding: 60px 0; }
.olb-empty h2 { margin-bottom: 12px; }

/* ──────────── WooCommerce overrides (light touch) ──────────── */
.woocommerce ul.products li.product {
	background: white;
	padding: 16px !important;
	border-radius: var(--olb-radius);
	box-shadow: var(--olb-shadow);
	transition: transform 0.2s, box-shadow 0.2s;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--olb-shadow-md);
}
.woocommerce ul.products li.product .button {
	background: linear-gradient(135deg, var(--olb-green), var(--olb-green-dark));
	color: white !important;
	border-radius: var(--olb-radius);
	font-weight: 700;
	padding: 10px 18px;
}
.woocommerce ul.products li.product .price { color: var(--olb-green-dark); font-weight: 800; }
.woocommerce span.onsale {
	background: var(--olb-red);
	border-radius: 6px;
	padding: 4px 10px;
	font-weight: 700;
	min-height: auto;
	min-width: auto;
	line-height: 1.4;
}
.single-product .product .single_add_to_cart_button {
	background: linear-gradient(135deg, var(--olb-green), var(--olb-green-dark)) !important;
	color: white !important;
	padding: 14px 28px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: var(--olb-radius) !important;
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}
.single-product .product .price {
	color: var(--olb-green-dark) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
}

/* ──────────── Print-friendly + reduced motion ──────────── */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE PERFECTION PASS — iOS / Android touch UX
   ════════════════════════════════════════════════════════════ */

/* iOS safe-area insets (notch / Dynamic Island / home indicator) */
@supports (padding: env(safe-area-inset-top)) {
	.olb-header { padding-top: env(safe-area-inset-top); }
	.olb-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Prevent iOS Safari auto-zoom on input focus — needs ≥16px font */
input, textarea, select { font-size: 16px !important; }

/* Better tap-highlight (no ugly default grey box) */
* { -webkit-tap-highlight-color: rgba(22, 163, 74, 0.15); }
button, a { -webkit-tap-highlight-color: rgba(22, 163, 74, 0.2); }

/* Min touch target 44×44 for all interactive elements (Apple HIG / Material) */
@media (max-width: 768px) {
	.olb-cta { min-height: 48px; padding: 14px 22px; }
	.olb-cta-lg { min-height: 54px; }
	.olb-nav-list a { min-height: 44px; display: flex; align-items: center; }
	.olb-burger { width: 44px; height: 44px; padding: 0; }
	button { min-height: 44px; }
}

/* Slightly tighter padding on phones for content density */
@media (max-width: 600px) {
	.olb-wrap { padding: 0 16px; }
	.olb-section { padding: 50px 0; }
	.olb-hero { padding: 40px 0 50px; }
	.olb-hero-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
	.olb-hero-sub { font-size: 14px; }
	.olb-hero-stats { gap: 18px; }
	.olb-stat-num { font-size: 24px; }
	.olb-hero-cta { flex-direction: column; }
	.olb-hero-cta .olb-cta { width: 100%; }
	.olb-hero-product-card { max-width: 100%; transform: rotate(0) !important; }
	.olb-section-head { margin-bottom: 32px; }
	.olb-feature { padding: 18px; }
	.olb-product-body { padding: 14px; }
	.olb-final-cta { padding: 50px 0; }
	.olb-final-cta-buttons { flex-direction: column; }
	.olb-final-cta-buttons .olb-cta { width: 100%; }
}

/* Smooth scroll input into view on focus (avoids keyboard covering field) */
@media (max-width: 768px) {
	input:focus, textarea:focus, select:focus {
		scroll-margin-top: 100px;
	}
}

/* ════════════════════════════════════════════════════════════
   STICKY BOTTOM CTA — Mobile only, on single product pages
   Massive BD COD conversion booster — always-visible "Order Now"
   button at the bottom of phone screens. Hidden when the user scrolls
   to the desktop nav CTA or when the Quick Order modal is open.
   ════════════════════════════════════════════════════════════ */
.olb-sticky-cta {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: white;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
	z-index: 90;
	gap: 10px;
	border-top: 1px solid #e5e7eb;
	animation: olbStickySlide 0.4s ease-out;
}
@keyframes olbStickySlide {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
.olb-sticky-cta-info {
	display: flex; flex-direction: column; justify-content: center;
	flex: 1; min-width: 0;
}
.olb-sticky-cta-price {
	font-size: 18px; font-weight: 800; color: #15803d; line-height: 1; margin-bottom: 2px;
}
.olb-sticky-cta-price-was {
	font-size: 13px; color: #94a3b8; text-decoration: line-through;
	font-weight: 500; margin-left: 6px;
}
.olb-sticky-cta-label {
	font-size: 11px; color: #64748b; font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.olb-sticky-cta button, .olb-sticky-cta a {
	flex-shrink: 0;
	background: linear-gradient(135deg, #f59e0b, #ea580c);
	color: white;
	border: none;
	padding: 14px 22px;
	font-size: 15px;
	font-weight: 800;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
	font-family: inherit;
	min-height: 48px;
	white-space: nowrap;
}
.olb-sticky-cta button:active { transform: translateY(1px); }
@media (max-width: 768px) {
	body.single-product .olb-sticky-cta { display: flex; }
	/* Extra bottom padding on product page so sticky CTA doesn't cover content */
	body.single-product { padding-bottom: 80px; }
}

/* Hide sticky CTA when modal is open (visual clutter) */
body.olb-qo-locked .olb-sticky-cta { display: none !important; }

/* ── Keep the floating chat widget clear of the order CTA ──
   The Nexus AI Chat bubble + teaser callout are fixed bottom-right and were
   overlapping the sticky "Order Now" bar and the Quick Order modal's confirm
   button. Lift them above the sticky CTA on mobile product pages, and hide
   them entirely while the Quick Order modal is open. */
@media (max-width: 768px) {
	body.single-product .nac-w-bubble { bottom: 96px; }
	body.single-product .nac-w-teaser { bottom: 168px; }
}
body.olb-qo-locked .nac-w-bubble,
body.olb-qo-locked .nac-w-teaser { display: none !important; }

/* ════════════════════════════════════════════════════════════
   SITE-WIDE CAMPAIGN PROMO BANNER (auto-shows on live campaign)
   ════════════════════════════════════════════════════════════ */
.olb-promo-banner {
	background: linear-gradient(90deg, #dc2626, #ea580c, #f59e0b, #ea580c, #dc2626);
	background-size: 300% 100%;
	color: white;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 700;
	animation: olbPromoGradient 8s ease-in-out infinite;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	position: relative;
	z-index: 99;
}
@keyframes olbPromoGradient {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}
.olb-promo-banner-inner {
	max-width: var(--olb-container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.olb-promo-banner-text { display: flex; align-items: center; gap: 8px; }
.olb-promo-discount {
	background: white;
	color: #dc2626;
	padding: 2px 10px;
	border-radius: 12px;
	font-weight: 900;
	font-size: 12px;
	margin-left: 6px;
}
.olb-promo-banner-timer {
	font-family: monospace;
	font-weight: 800;
	background: rgba(0,0,0,0.2);
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 13px;
	letter-spacing: 1px;
}
.olb-promo-banner-cta {
	background: white;
	color: #dc2626 !important;
	padding: 6px 16px;
	border-radius: 20px;
	font-weight: 800;
	text-decoration: none;
	font-size: 13px;
	transition: transform 0.2s;
}
.olb-promo-banner-cta:hover {
	transform: scale(1.05);
	text-decoration: none;
	color: #dc2626 !important;
}
.olb-promo-banner-close {
	background: rgba(255,255,255,0.2);
	border: none;
	color: white;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.olb-promo-banner-close:hover { background: rgba(255,255,255,0.35); }

@media (max-width: 700px) {
	.olb-promo-banner { padding: 8px 12px; font-size: 12px; }
	.olb-promo-banner-inner { gap: 10px; }
	.olb-promo-banner-cta { padding: 4px 12px; font-size: 12px; }
	.olb-promo-discount { font-size: 11px; padding: 1px 8px; }
}