/* VerdePharma design tokens — home-v2 */
/* Loaded globally via wp_enqueue_style on wp_enqueue_scripts */

/* Override Astra's #primary { margin-top: 4em } for the homepage template.
   ID+class specificity beats Astra's plain #primary rule. */
#primary.vp-new-homepage-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* When admin bar is visible, WP shifts html { margin-top: 32px } and
   style.css moves #mainNav to top:32px — no extra offset on #primary needed. */

/* ─── RESPONSIVE OVERRIDES for home-v2 sections ─────────────────────
   These target the class names added to each section's inner grid
   so we can override inline grid-template-columns at breakpoints.
   ─────────────────────────────────────────────────────────────────── */

/* Tablet — 768px */
@media (max-width: 768px) {
	/* About: stack content + badge circle */
	.vp-about-inner       { grid-template-columns: 1fr !important; }
	.vp-about-badge       { display: none !important; }

	/* Why: 4 cols → 2 cols */
	.vp-why-grid          { grid-template-columns: repeat(2, 1fr) !important; }

	/* Shipping: 3 cols → 1 col */
	.vp-shipping-grid     { grid-template-columns: 1fr !important; }

	/* Collections: 6 cols → 3 cols */
	.vp-collections-grid  { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Mobile — 480px */
@media (max-width: 480px) {
	.vp-collections-grid  { grid-template-columns: repeat(2, 1fr) !important; }
	.vp-why-grid          { grid-template-columns: 1fr !important; }

	/* Product section header: stack heading + button */
	.vp-products-header   { flex-direction: column !important; align-items: flex-start !important; }

	/* About stats: 3-across → wrap */
	.vp-about-stats       { flex-wrap: wrap; gap: 20px !important; }
}