/* ================================================================
   VerdePharma Home v2 — Gutenberg Block Styles
   Loaded only on the home-v2 page via vp_enqueue_home_v2_assets()
   ================================================================ */

/* ── Shared utilities ────────────────────────────────────────────── */
.vp-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.vp-container--sm {
	max-width: 900px;
}

.vp-tag {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lc-primary);
	margin-bottom: 12px;
}

.vp-tag--light {
	color: var(--lc-primary-subtle);
}

.vp-section-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 300;
	color: #0d1b2a;
	margin: 0;
	line-height: 1.15;
}

.vp-section-title em {
	font-style: italic;
	color: var(--lc-primary);
}

.vp-section-title--light {
	color: #fff;
}

.vp-section-title--light em {
	color: var(--lc-primary-subtle);
}

.vp-section-title--lg {
	font-size: clamp(2rem, 4vw, 3.2rem);
}

.vp-section-subtitle {
	font-size: .95rem;
	color: var(--lc-text-muted);
	margin: 8px 0 0;
}

.vp-section-head {
	text-align: center;
}

.vp-section-head--mb36 {
	margin-bottom: 36px;
}

.vp-section-head--mb50 {
	margin-bottom: 50px;
}

.vp-section-head--mb60 {
	margin-bottom: 60px;
}

/* Product section header row: title left, CTA right */
.vp-section-hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 56px;
	gap: 24px;
	flex-wrap: wrap;
}

/* Buttons */
.vp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 30px;
	font-family: 'Lato', sans-serif;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: all .3s;
	border: none;
	cursor: pointer;
}

.vp-btn--primary {
	background: var(--lc-primary);
	color: #fff;
}

.vp-btn--primary:hover {
	background: var(--lc-primary-hover);
	color: #fff;
}

.vp-btn--outline {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .4);
	font-weight: 500;
}

.vp-btn--outline:hover {
	background: rgba(255, 255, 255, .08);
}

.vp-btn--dark {
	background: #0d0d1a;
	color: #fff;
}

.vp-btn--dark:hover {
	background: #1e2a4a;
}

.vp-btn--teal {
	background: var(--lc-primary);
	color: #0d1b2a;
}


.vph2-hero {
	font-family: 'Inter', system-ui, sans-serif;
	background: linear-gradient(135deg, #dceefb 0%, #eaf4ff 35%, #d6eaf8 70%, #c8e0f4 100%);
	border-radius: 16px;
	margin: 30px auto 20px auto;
	width: calc(100% - 48px);
	max-width: 1200px;
	overflow: hidden;
	position: relative
}

.vph2-hero::before {
	content: '';
	position: absolute;
	right: -60px;
	top: -60px;
	width: 480px;
	height: 520px;
	background: radial-gradient(ellipse at 60% 40%, rgba(24, 95, 165, .13) 0%, rgba(100, 180, 255, .08) 45%, transparent 75%);
	clip-path: polygon(50% 0%, 100% 18%, 100% 60%, 50% 100%, 0% 60%, 0% 18%);
	pointer-events: none;
	z-index: 0
}

.vph2-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(to top, rgba(180, 220, 255, .35) 0%, transparent 100%);
	pointer-events: none;
	z-index: 0
}

.vph2-bg-plus {
	position: absolute;
	font-weight: 300;
	color: rgba(24, 95, 165, .18);
	pointer-events: none;
	z-index: 0;
	line-height: 1;
	user-select: none
}

.vph2-bg-dots {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	opacity: .45
}

.vph2-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0
}

.vph2-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 520px;
	padding: 48px;
	gap: 40px;
	position: relative;
	z-index: 1
}

.vph2-left {
	position: relative;
	z-index: 2
}

.vph2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	color: #185FA5;
	text-transform: uppercase;
	margin-bottom: 16px
}

.vph2-h1 {
	font-size: clamp(28px, 3.5vw, 48px);
	font-weight: 900;
	line-height: 1.1;
	color: #0a1929;
	margin: 0 0 4px
}

.vph2-h1-blue {
	color: #1a7fc1
}

.vph2-sub {
	font-size: clamp(13px, 1.2vw, 15px);
	color: #4b6175;
	line-height: 1.6;
	margin-bottom: 24px;
	max-width: 420px
}

.vph2-trust-icons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px
}

.vph2-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px
}

.vph2-trust-icon-wrap {
	width: 40px;
	height: 40px;
	background: rgba(24, 95, 165, .1);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px
}

.vph2-trust-label {
	font-size: 10px;
	font-weight: 600;
	color: #374151;
	text-align: center;
	line-height: 1.3
}

.vph2-cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 28px
}

.vph2-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #185FA5;
	color: #fff;
	padding: 13px 22px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, transform .1s;
	white-space: nowrap
}

.vph2-btn-primary:hover {
	background: #0d4a87;
	transform: translateY(-1px);
	color: #fff
}

.vph2-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: #185FA5;
	padding: 13px 22px;
	border-radius: 8px;
	border: 2px solid #185FA5;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s;
	white-space: nowrap
}

.vph2-btn-outline:hover {
	background: rgba(24, 95, 165, .06);
	color: #185FA5
}

.vph2-badge-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap
}

.vph2-badge-stars-block {
	display: flex;
	align-items: center;
	gap: 8px
}

.vph2-stars {
	display: flex;
	gap: 2px;
	color: #38a169;
	font-size: 16px
}

.vph2-badge-text {
	font-size: 11px;
	color: #374151;
	line-height: 1.4
}

.vph2-badge-text strong {
	display: block;
	font-weight: 700;
	font-size: 12px
}

.vph2-badge-sep {
	width: 1px;
	height: 28px;
	background: #c9d5e0
}

.vph2-badge-item {
	display: flex;
	align-items: center;
	gap: 6px
}

.vph2-badge-icon {
	color: #185FA5;
	font-size: 16px
}

.vph2-right {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%
}

.vph2-img {
	width: 100%;
	max-width: 700px;
	object-fit: contain;
	display: block;
	border-radius: 12px
}

.vph2-float-card {
	position: absolute;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 14px;
	font-size: 10px;
	font-weight: 700;
	color: #1a1a2e;
	text-align: center;
	gap: 4px;
	line-height: 1.3
}

.vph2-float-secure {
	top: 50%;
	left: -20px;
	transform: translateY(-50%)
}

.vph2-float-delivery {
	top: 8%;
	right: 0
}

.vph2-authentic-badge {
	position: absolute;
	bottom: 10%;
	right: 5%;
	width: 80px;
	height: 80px;
	background: #185FA5;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	font-size: 8px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .04em;
	box-shadow: 0 4px 16px rgba(24, 95, 165, .4);
	padding: 6px
}

.vph2-auth-big {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2
}

@media(max-width:900px) {
	.vph2-hero {
		border-radius: 14px
	}

	.vph2-inner {
		grid-template-columns: 1fr;
		padding: 28px 22px 24px;
		min-height: auto;
		gap: 0
	}

	.vph2-right {
		order: -1;
		margin-bottom: 20px;
		min-height: 200px;
		margin-left: -20px
	}

	.vph2-img {
		width: 100%;
		max-width: 100%;
		max-height: 220px;
		object-fit: cover;
		object-position: center top;
		border-radius: 10px;
		transform: scale(1.05)
	}

	.vph2-float-card {
		display: none
	}

	.vph2-authentic-badge {
		width: 56px;
		height: 56px;
		bottom: 8px;
		right: 8px;
		font-size: 7px
	}

	.vph2-auth-big {
		font-size: 10px
	}

	.vph2-h1 {
		font-size: 26px
	}

	.vph2-sub {
		font-size: 13px;
		margin-bottom: 18px
	}

	.vph2-trust-icons {
		gap: 12px;
		margin-bottom: 20px
	}

	.vph2-trust-icon-wrap {
		width: 34px;
		height: 34px;
		font-size: 15px
	}

	.vph2-trust-label {
		font-size: 9px
	}

	.vph2-cta-row {
		margin-bottom: 20px
	}

	.vph2-btn-primary,
	.vph2-btn-outline {
		padding: 11px 16px;
		font-size: 12px
	}

	.vph2-badge-row {
		gap: 10px
	}

	.vph2-badge-sep {
		display: none
	}
}

@media(max-width:420px) {
	.vph2-h1 {
		font-size: 22px
	}

	.vph2-cta-row {
		flex-direction: column
	}

	.vph2-btn-primary,
	.vph2-btn-outline {
		justify-content: center
	}
}

.vp-strip {
	background: #185FA5;
	margin: 0 auto 24px;
	width: calc(100% - 48px);
	max-width: 1200px;
	border-radius: 14px;
	display: grid;
	grid-template-columns: repeat(4, 1fr)
}

.vp-strip-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 24px 22px;
	border-right: 1px solid rgba(255, 255, 255, .15)
}

.vp-strip-item:last-child {
	border-right: none
}

.vp-strip-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, .15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px
}

.vp-strip-text h4 {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 4px
}

.vp-strip-text p {
	font-size: 12px;
	color: rgba(255, 255, 255, .72);
	line-height: 1.5;
	margin: 0
}

@media(max-width:900px) {
	.vp-strip {
		grid-template-columns: 1fr 1fr;
		border-radius: 12px
	}

	.vp-strip-item {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
		padding: 18px 16px
	}

	.vp-strip-item:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, .15)
	}

	.vp-strip-item:nth-child(3),
	.vp-strip-item:nth-child(4) {
		border-bottom: none
	}
}

@media(max-width:420px) {
	.vp-strip {
		grid-template-columns: 1fr
	}

	.vp-strip-item {
		border-right: none !important
	}

	.vp-strip-item:nth-child(3) {
		border-bottom: 1px solid rgba(255, 255, 255, .15) !important
	}

	.vp-strip-item:nth-child(4) {
		border-bottom: none !important
	}
}

/* ── 1a. HERO IMAGE BANNER ──────────────────────────────────────── */
.verdepharma-frontpage #primary {
	margin-top: 0 !important;
}

#vp-hero-img {
	line-height: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 0 0;
	position: relative;
}

.vp-hero-fullimg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px 0px;
}

/* ── 3. COLLECTIONS ──────────────────────────────────────────────── */
#vp-collections {
	background: var(--lc-cream);
	padding: 50px 20px;
	font-family: 'Lato', sans-serif;
}

.vp-collections-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.vp-coll-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 140px;
	background: #fff;
	border: 1px solid #e0ecf4;
	border-radius: 12px;
	padding: 20px 16px;
	text-decoration: none;
	transition: all .3s;
	box-shadow: 0 2px 12px rgba(0, 102, 204, .08);
}

.vp-coll-card:hover {
	box-shadow: 0 14px 36px rgba(0, 102, 204, .22);
	transform: translateY(-4px);
}

.vp-coll-card h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1rem;
	font-weight: 600;
	color: #0d1b2a;
	margin: 0 0 6px;
}

.vp-coll-card p {
	font-size: .75rem;
	color: var(--lc-text-muted);
	margin: 0;
	line-height: 1.3;
}


/* ── 4. ABOUT ────────────────────────────────────────────────────── */
#vp-about {
	background: var(--lc-cream);
	padding: 50px 0;
	font-family: 'Lato', sans-serif;
}

.vp-about-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 60px;
	align-items: center;
}

.vp-about-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 300;
	line-height: 1.15;
	color: #0d1b2a;
	margin: 0 0 28px;
}

.vp-about-title em {
	font-style: italic;
	color: var(--lc-primary);
}

.vp-about-p {
	font-size: .95rem;
	color: var(--lc-text-muted);
	line-height: 1.85;
	margin: 0 0 16px;
}

.vp-about-p--mb36 {
	margin-bottom: 36px;
}

.vp-about-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.vp-about-card {
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	border: 1px solid rgba(0, 102, 204, .15);
}

.vp-about-card h4 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: #0d1b2a;
	margin: 0 0 10px;
}

.vp-about-card p {
	font-size: .85rem;
	color: var(--lc-text-muted);
	line-height: 1.6;
	margin: 0;
}

.vp-about-stats {
	display: flex;
	gap: 40px;
	margin-top: 36px;
}

.vp-about-stat-num {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 2.4rem;
	font-weight: 600;
	color: var(--lc-primary);
	line-height: 1;
	margin-bottom: 4px;
}

.vp-about-stat-label {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lc-text-muted);
}

.vp-about-badge {
	display: flex;
	justify-content: center;
	align-items: center;
}

.vp-about-badge-circle {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: var(--lc-primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 40px rgba(0, 102, 204, .28);
	gap: 6px;
	text-align: center;
}

.vp-about-badge-letter {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 2.8rem;
	font-weight: 600;
	color: #ffffff;
	line-height: 1;
}

.vp-about-badge-text {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ffffff;
	line-height: 1.3;
}


/* ── 5/6/8/10/11. PRODUCT SECTIONS ──────────────────────────────── */
.vp-products-section {
	padding: 20px 0;
	font-family: 'Lato', sans-serif;
}

.vp-products-section .vp-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	/* flex column to reorder: header → grid → button */
	display: flex;
	flex-direction: column;
}

/* Ghost the header so its children become direct flex items of .vp-container */
.vp-products-section .vp-section-hdr.vp-products-header {
	display: contents;
}

/* 1 — title + tag group stays first */
.vp-products-section .vp-section-hdr.vp-products-header>div:first-child {
	order: 1;
	margin-bottom: 40px;
}

/* Slider nav sits in its own row between title and grid */
.vp-products-section .vp-section-hdr.vp-products-header>.vp-slider-nav {
	order: 1;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

/* 2 — product grid */
.vp-products-section .vp-container>.woocommerce,
.vp-products-section .vp-container>ul.products {
	order: 2;
}

/* 3 — CTA button at bottom center */
.vp-products-section .vp-section-hdr.vp-products-header>.vp-btn {
	order: 3;
	align-self: center;
	margin-top: 48px;
}

#vp-sleep {
	background: #eef4ff;
}


/* ── 7. WHY CHOOSE US ────────────────────────────────────────────── */
#vp-why {
	background: #0d0d1a;
	color: var(--lc-cream);
	padding: 50px 0;
	font-family: 'Lato', sans-serif;
}

.vp-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.vp-why-card {
	padding: 42px 32px;
	border: 1px solid rgba(0, 102, 204, .2);
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
	text-align: center;
}

.vp-why-card svg {
	width: 48px;
	height: 48px;
	color: var(--lc-primary);
	margin: 0 auto 20px;
	display: block;
}

.vp-why-card h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.3rem;
	font-weight: 400;
	color: #fff;
	margin: 0 0 12px;
}

.vp-why-card p {
	font-size: .875rem;
	color: rgba(255, 255, 255, .55);
	line-height: 1.8;
	margin: 0;
}


/* ── 9. SHIPPING ─────────────────────────────────────────────────── */
#vp-shipping {
	background: #1e2a4a;
	color: var(--lc-cream);
	padding: 50px 0;
	font-family: 'Lato', sans-serif;
}

.vp-shipping-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.vp-shipping-card {
	text-align: center;
	padding: 36px 28px;
	background: rgba(255, 255, 255, .05);
	border-radius: 12px;
	border: 1px solid rgba(0, 102, 204, .15);
}

.vp-shipping-icon {
	font-size: 2.2rem;
	margin-bottom: 16px;
}

.vp-shipping-card h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 400;
	color: #fff;
	margin: 0 0 10px;
}

.vp-shipping-card p {
	font-size: .875rem;
	color: rgba(255, 255, 255, .6);
	line-height: 1.7;
	margin: 0;
}


/* ── 13. VALUES ──────────────────────────────────────────────────── */
#vp-values {
	position: relative;
	background: #0d0d1a;
	color: var(--lc-cream);
	padding: 50px 0;
	font-family: 'Lato', sans-serif;
	border-top: 2px solid rgba(0, 102, 204, 0.18);
}

.vp-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.vp-values-card {
	padding: 48px 40px;
	border: 1px solid rgba(0, 102, 204, .2);
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
}

.vp-values-icon {
	font-size: 2.2rem;
	margin-bottom: 20px;
}

.vp-values-card h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.55rem;
	font-weight: 400;
	color: #fff;
	margin: 0 0 14px;
}

.vp-values-card p {
	font-size: .875rem;
	color: rgba(255, 255, 255, .55);
	line-height: 1.8;
	margin: 0;
}


/* ── 14. TESTIMONIALS SLIDER ─────────────────────────────────────── */
#vp-testimonials {
	background: var(--lc-cream);
	padding: 20px 0;
	font-family: 'Lato', sans-serif;
	overflow: hidden;
}

#vp-testimonials .vp-section-hdr {
	margin-bottom: 32px;
}

.vp-testi-track {
	overflow-x: hidden;
}

.vp-testimonial-card {
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	border: 1px solid rgba(0, 102, 204, .1);
	box-shadow: 0 4px 20px rgba(0, 102, 204, .10);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	position: relative;
	overflow: hidden;
}

.vp-testimonial-card::before {
	content: '\201C';
	position: absolute;
	top: 50px;
	left: 16px;
	font-family: Georgia, serif;
	font-size: 8rem;
	line-height: 1;
	color: rgba(0, 102, 204, .05);
	pointer-events: none;
}

.vp-testi-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.vp-testi-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lc-primary);
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	padding: 3px 9px;
	border-radius: 50px;
}

.vp-testi-badge svg {
	width: 11px;
	height: 11px;
	stroke: var(--lc-primary);
	fill: none;
	flex-shrink: 0;
}

/* Loyal Patient badge — slightly deeper blue */
.vp-testi-badge--loyal {
	color: #004db3;
	background: var(--lc-primary-pale);
	border-color: #93c5fd;
}

.vp-testi-badge--loyal svg {
	stroke: #004db3;
}

.vp-testimonial-stars {
	display: flex;
	gap: 2px;
}

.vp-star {
	font-size: .95rem;
}

.vp-star--filled {
	color: #f59e0b;
}

.vp-star--empty {
	color: #cbd5e1;
}

.vp-testimonial-quote {
	font-size: .9rem;
	line-height: 1.78;
	color: #334155;
	margin: 0;
	font-style: italic;
	position: relative;
	z-index: 1;
}

.vp-testimonial-author {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #f1f5f9;
}

.vp-testi-author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vp-testimonial-author-name {
	font-weight: 700;
	font-size: .88rem;
	color: var(--lc-navy-darkest);
}

.vp-testimonial-author-role {
	font-size: .75rem;
	color: var(--lc-text-muted);
}

.vp-testi-secure {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--lc-primary);
	letter-spacing: .05em;
	flex-shrink: 0;
}

.vp-testi-secure svg {
	width: 13px;
	height: 13px;
}

/* slide widths inside the slider track */
.vp-testi-track.vp-slider-track>.vp-testimonial-card {
	flex: 0 0 calc(33.333% - 14px) !important;
	min-width: 0;
}

@media (max-width: 991px) {
	.vp-testi-track.vp-slider-track>.vp-testimonial-card {
		flex: 0 0 calc(50% - 10px) !important;
	}
}

@media (max-width: 540px) {
	.vp-testi-track.vp-slider-track>.vp-testimonial-card {
		flex: 0 0 300px !important;
	}
}


/* ── 15. BLOG ────────────────────────────────────────────────────── */
#vp-blog,
.vp-blog-query-wrap {
	background: #eef4ff;
}

#vp-blog {
	padding: 80px 0 0;
	overflow: hidden;
	/* prevents margin-bottom on .vp-section-head from collapsing out, which was creating a white gap between sections */
}

.vp-blog-query-wrap {
	padding: 0 40px 80px;
	margin-top: 0 !important;
}

/* Remove default WP block margin that causes the gap */
.wp-block-query.vp-blog-query-wrap {
	margin-top: 0 !important;
	padding-top: 0;
}

#vp-blog .vp-section-head {
	margin-bottom: 20px;
}

/* Blog card: featured image — always reserve height, show placeholder when missing */
.vp-blog-query-wrap .wp-block-post-featured-image {
	aspect-ratio: 16 / 10;
	background: var(--lc-primary-pale);
	border-radius: 12px 12px 0 0 !important;
	overflow: hidden;
	display: block;
	position: relative;
	width: 100%;
}

.vp-blog-query-wrap .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 12px 12px 0 0;
}

/* Placeholder icon when no image */
.vp-blog-query-wrap .wp-block-post-featured-image:not(:has(img))::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--lc-primary-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E") center/56px no-repeat;
	opacity: .45;
}

/* Blog card: restrict excerpt to 3 lines */
.vp-blog-query-wrap .wp-block-post-excerpt__excerpt,
.vp-blog-query-wrap .wp-block-post-excerpt p {
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Blog card consistent height so all cards align */
.vp-blog-query-wrap .wp-block-group.has-background {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.vp-blog-query-wrap .wp-block-group.has-background>.wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Placeholder banner when post has no featured image */
.vp-blog-query-wrap .wp-block-group.has-background:not(:has(.wp-block-post-featured-image))::before {
	content: '';
	display: block;
	aspect-ratio: 16 / 10;
	width: 100%;
	background: var(--lc-primary-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") center/64px no-repeat;
	border-radius: 12px 12px 0 0;
	opacity: .7;
	flex-shrink: 0;
}


/* ── 16. FAQ ─────────────────────────────────────────────────────── */
#vp-faq {
	background: var(--lc-cream);
	padding: 50px 0;
	font-family: 'Lato', sans-serif;
}

.vp-faq-item {
	border: 1px solid rgba(0, 102, 204, .15);
	border-radius: 10px;
	margin-bottom: 12px;
	overflow: hidden;
	background: #fff;
}

.vp-faq-item summary {
	padding: 20px 24px;
	font-weight: 600;
	font-size: .95rem;
	color: #0d1b2a;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.vp-faq-item summary::after {
	content: '+';
	font-size: 1.3rem;
	color: var(--lc-primary);
	transition: transform .2s;
}

.vp-faq-item[open] summary::after {
	transform: rotate(45deg);
}

.vp-faq-item p {
	padding: 0 24px 20px;
	font-size: .9rem;
	color: var(--lc-text-muted);
	line-height: 1.75;
	margin: 0;
}


/* ── About Us (reference style) ─────────────────────────────────── */
#vp-about-us {
	background: #fff;
	padding: 50px 0;
	font-family: 'Lato', sans-serif;
}

.vp-about-ref-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	align-items: flex-start;
}

.vp-about-ref-text {
	flex: 1 1 380px;
}

.vp-about-ref-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	font-weight: 300;
	color: #0d1b2a;
	margin: 0 0 20px;
	line-height: 1.2;
}

.vp-about-ref-title em {
	font-style: italic;
	color: var(--lc-primary);
}

.vp-about-ref-desc {
	font-size: .95rem;
	color: var(--lc-text-muted);
	line-height: 1.75;
	margin: 0 0 14px;
}

.vp-about-ref-cards {
	flex: 1 1 380px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vp-ref-card {
	background: #fff;
	border: 1px solid #e0ecf4;
	border-left: 3px solid var(--lc-primary);
	border-radius: 10px;
	padding: 22px 24px;
	transition: all .3s;
	box-shadow: 0 2px 12px rgba(0, 102, 204, .07);
}

.vp-ref-card:hover {
	border-left-color: var(--lc-primary);
	box-shadow: 0 10px 30px rgba(0, 102, 204, .20);
	transform: translateX(4px);
}

.vp-ref-card h4 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: #0d1b2a;
	margin: 0 0 8px;
}

.vp-ref-card p {
	font-size: .88rem;
	color: var(--lc-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* ── Browse by Category (arrow cards) ───────────────────────────── */
#vp-collections .vp-coll-card {
	position: relative;
	padding-top: 32px;
}

.vp-coll-arrow {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 18px;
	height: 18px;
	color: var(--lc-primary);
	opacity: .6;
	transition: opacity .2s, transform .2s;
}

.vp-coll-card:hover .vp-coll-arrow {
	opacity: 1;
	transform: translateX(3px);
}

/* ── Quick Links / Top Searches ──────────────────────────────────── */
#vp-quick-links {
	background: var(--lc-cream);
	padding: 20px 0;
	font-family: 'Lato', sans-serif;
}

.vp-ql-cloud {
	background: #fff;
	border: 1px solid #e0ecf4;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 4px 20px rgba(0, 102, 204, .08);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.vp-ql-tag {
	background: var(--lc-cream);
	color: #0d1b2a;
	text-decoration: none;
	font-size: .78rem;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 50px;
	border: 1px solid #d8e8f0;
	transition: all .25s;
	white-space: nowrap;
}

.vp-ql-tag:hover {
	background: var(--lc-primary);
	color: #fff;
	border-color: var(--lc-primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 102, 204, .28);
}

@media (max-width: 768px) {
	.vp-about-ref-inner {
		flex-direction: column;
	}

	.vp-values-grid {
		grid-template-columns: 1fr !important;
	}
}


/* ── Slider / Carousel ───────────────────────────────────────────── */

/* Track: horizontal scrollable flex row.
   scroll-snap intentionally omitted — RAF-based auto-scroll
   handles positioning; snap points cause jerkiness with RAF. */
.vp-slider-track,
.woocommerce ul.products.vp-slider-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: hidden !important;
	/* hidden lets RAF control position; no scrollbar */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 20px !important;
	/* remove WooCommerce / Gutenberg grid overrides — higher specificity
	   than style.css's `.woocommerce ul.products{display:grid!important}`
	   (0,2,1) so it wins regardless of stylesheet load order */
	grid-template-columns: none !important;
}

.vp-slider-track::-webkit-scrollbar {
	display: none;
}

/* Product slides — fixed width so clones fill seamlessly.
   `body .woocommerce ul.products.vp-slider-track>li.product` outranks
   style.css's `.woocommerce ul.products li.product{width:100%!important}`
   (0,3,2) regardless of stylesheet load order. */
.vp-slider-track.products>li.product,
body .woocommerce ul.products.vp-slider-track > li.product {
	flex: 0 0 calc(25% - 15px) !important;
	width: auto !important;
	margin: 0 !important;
}

/* Blog slides */
.vp-slider-track--blog>* {
	flex: 0 0 calc(33.333% - 14px) !important;
	min-width: 0;
}

/* Nav buttons container — sits inside .vp-section-hdr or .vp-section-head */
.vp-slider-nav {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
	margin-left: 16px;
}

/* For centered blog heading, allow nav to float right */
.vp-section-head .vp-slider-nav {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
}

/* Make the blog section head relatively positioned for the above */
#vp-blog .vp-section-head {
	position: relative;
}

.vp-slider-prev,
.vp-slider-next {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid rgba(0, 102, 204, .4);
	background: transparent;
	color: var(--lc-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s;
	flex-shrink: 0;
	padding: 0;
}

.vp-slider-prev:hover:not(:disabled),
.vp-slider-next:hover:not(:disabled) {
	background: var(--lc-primary);
	color: #fff;
	border-color: var(--lc-primary);
}

.vp-slider-prev:disabled,
.vp-slider-next:disabled {
	opacity: .3;
	cursor: not-allowed;
}

/* Light buttons on dark section backgrounds */
#vp-why .vp-slider-prev,
#vp-why .vp-slider-next {
	border-color: rgba(59, 130, 246, .45);
	color: var(--lc-primary-subtle);
}

#vp-why .vp-slider-prev:hover:not(:disabled),
#vp-why .vp-slider-next:hover:not(:disabled) {
	background: var(--lc-primary-subtle);
	color: #0d0d1a;
	border-color: var(--lc-primary-subtle);
}

#vp-blog .vp-slider-prev,
#vp-blog .vp-slider-next {
	border-color: rgba(0, 102, 204, .4);
}

/* Responsive slide widths */
@media (max-width: 991px) {
	.vp-slider-track.products>li.product,
	body .woocommerce ul.products.vp-slider-track > li.product {
		flex: 0 0 calc(50% - 10px) !important;
	}

	.vp-slider-track--blog>* {
		flex: 0 0 calc(50% - 10px) !important;
	}
}

@media (max-width: 480px) {
	.vp-slider-track.products>li.product,
	body .woocommerce ul.products.vp-slider-track > li.product {
		flex: 0 0 calc(50% - 10px) !important;
	}

	.vp-slider-track--blog>* {
		flex: 0 0 260px !important;
	}

	.vp-section-head .vp-slider-nav {
		position: static;
		transform: none;
		justify-content: center;
		margin: 16px 0 0;
	}
}

/* ── Mobile: Comprehensive layout & spacing fixes (≤ 768px) ─────── */
@media (max-width: 768px) {

	/* Shared container */
	.vp-container {
		padding: 0 20px;
	}

	/* Collections — 3 columns */
	#vp-collections {
		padding: 40px 20px;
	}

	.vp-collections-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	/* About Us section */
	#vp-about-us {
		padding: 50px 0;
	}

	.vp-about-ref-inner {
		padding: 0 20px;
		gap: 28px;
	}

	/* About (stats/badge section) */
	#vp-about {
		padding: 50px 0;
	}

	.vp-about-inner {
		grid-template-columns: 1fr;
		padding: 0 20px;
		gap: 32px;
	}

	.vp-about-badge {
		display: none;
	}

	/* Product sections */
	.vp-products-section {
		padding: 50px 0;
	}

	.vp-products-section .vp-container {
		padding: 0 20px;
	}

	.vp-section-hdr {
		margin-bottom: 28px;
	}

	/* Why Choose Us — 2×2 grid */
	#vp-why {
		padding: 50px 0;
	}

	.vp-why-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.vp-why-card {
		padding: 28px 20px;
	}

	/* Shipping */
	#vp-shipping {
		padding: 50px 0;
	}

	.vp-shipping-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Values */
	#vp-values {
		padding: 50px 0;
	}

	/* Testimonials */
	#vp-testimonials {
		padding: 50px 0;
	}

	/* Quick Links / Top Searches */
	#vp-quick-links {
		padding: 40px 0;
	}

	.vp-ql-cloud {
		padding: 20px;
		gap: 6px;
	}

	.vp-ql-tag {
		font-size: .72rem;
		padding: 5px 11px;
	}

	/* FAQ */
	#vp-faq {
		padding: 50px 0;
	}

	/* Hero image banner — add side padding once max-width no longer kicks in */
	#vp-hero-img {
		padding: 16px 20px 0;
	}

	.vp-hero-fullimg {
		border-radius: 12px;
	}
}

/* ── Mobile: Extra-small screens (≤ 480px) ──────────────────────── */
@media (max-width: 480px) {

	/* Collections — 2 columns on very small screens */
	.vp-collections-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Why — stack to single column */
	.vp-why-grid {
		grid-template-columns: 1fr;
	}

	/* Hero image */
	#vp-hero-img {
		padding: 12px 12px 0;
	}

	.vp-hero-fullimg {
		border-radius: 10px;
		min-height: 300px;
		object-fit: cover;
		object-position: center top;
	}

}