/* =============================================================================
   MyPacking — Home (Phase 2: premium CRO redesign)

   Scoped homepage design system. All tokens are namespaced --mp-* so they never
   collide with the global --mytheme-* tokens used across shop/account/checkout.
   This file is enqueued only on the front page.
   ============================================================================= */

:root {
	/* Brand — single, consistent orange system (replaces the 4 clashing shades) */
	--mp-brand: #ea580c;          /* primary actions */
	--mp-brand-strong: #c2410c;   /* hover / pressed */
	--mp-brand-soft: #fff7ed;     /* tinted surfaces */
	--mp-brand-ring: rgba(234, 88, 12, 0.30);

	/* Ink & neutrals */
	--mp-ink: #0f172a;
	--mp-ink-2: #1e293b;
	--mp-body: #475569;
	--mp-muted: #64748b;
	--mp-line: #e7e9ee;
	--mp-bg: #ffffff;
	--mp-bg-soft: #f8fafc;

	/* Signals */
	--mp-star: #f59e0b;
	--mp-good: #047857;

	/* Radius */
	--mp-r-sm: 10px;
	--mp-r: 14px;
	--mp-r-lg: 20px;
	--mp-r-pill: 999px;

	/* Elevation — soft, layered, premium */
	--mp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
	--mp-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
	--mp-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
	--mp-shadow-brand: 0 12px 30px var(--mp-brand-ring);

	/* Motion */
	--mp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -----------------------------------------------------------------------------
   Reusable button system (homepage)
   -------------------------------------------------------------------------- */
.mp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 24px;
	border-radius: var(--mp-r);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform 0.2s var(--mp-ease), box-shadow 0.2s var(--mp-ease), background 0.2s var(--mp-ease), border-color 0.2s var(--mp-ease);
}
.mp-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.mp-btn--lg { padding: 17px 30px; font-size: 16px; }
.mp-btn--primary { background: var(--mp-brand); color: #fff; box-shadow: var(--mp-shadow-brand); }
.mp-btn--primary:hover,
.mp-btn--primary:focus-visible { background: var(--mp-brand-strong); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px var(--mp-brand-ring); }
.mp-btn--ghost { background: #fff; color: var(--mp-ink); border-color: var(--mp-line); }
.mp-btn--ghost:hover,
.mp-btn--ghost:focus-visible { border-color: var(--mp-ink); color: var(--mp-ink); transform: translateY(-2px); }
.mp-btn--dark { background: var(--mp-ink); color: #fff; }
.mp-btn--dark:hover,
.mp-btn--dark:focus-visible { background: #000; color: #fff; transform: translateY(-2px); }
.mp-btn svg { transition: transform 0.2s var(--mp-ease); }
.mp-btn:hover svg.mp-btn__arrow { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
   Promo bar — single, calm price-match line above the hero
   -------------------------------------------------------------------------- */
.mp-promo-bar {
	background: var(--mp-ink);
	color: #fff;
	border-bottom: 3px solid var(--mp-brand);
}
.mp-promo-bar__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 11px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 14px;
	line-height: 1.45;
}
.mp-promo-bar__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	color: #fdba74;
	letter-spacing: 0.2px;
	white-space: nowrap;
}
.mp-promo-bar__badge svg { width: 15px; height: 15px; }
.mp-promo-bar__text { color: #cbd5e1; }
.mp-promo-bar__link {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 3px;
	white-space: nowrap;
	transition: text-decoration-color 0.2s var(--mp-ease);
}
.mp-promo-bar__link:hover { text-decoration-color: #fdba74; }

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.mp-hero {
	position: relative;
	background:
		radial-gradient(60% 60% at 85% 12%, rgba(234, 88, 12, 0.06) 0%, transparent 60%),
		linear-gradient(180deg, #ffffff 0%, var(--mp-bg-soft) 100%);
	overflow: hidden;
}
.mp-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 24px 80px;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 64px;
	align-items: center;
}
.mp-hero__content { max-width: 600px; }

.mp-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	background: var(--mp-brand-soft);
	color: var(--mp-brand-strong);
	border: 1px solid rgba(234, 88, 12, 0.18);
	border-radius: var(--mp-r-pill);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin-bottom: 22px;
}

.mp-hero__title {
	font-size: clamp(2.3rem, 4.6vw, 3.6rem);
	font-weight: 800;
	line-height: 1.07;
	letter-spacing: -0.025em;
	color: var(--mp-ink);
	margin: 0 0 18px;
}
.mp-hero__title-accent {
	color: var(--mp-brand);
}

.mp-hero__lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.62;
	color: var(--mp-body);
	margin: 0 0 30px;
	max-width: 540px;
}

.mp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 26px;
}

.mp-hero__trust {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}
.mp-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mp-ink-2);
}
.mp-hero__trust li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: no-repeat center / contain;
	/* check icon */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.mp-hero__trust li.mp-hero__trust--star::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.mp-hero__how {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mp-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mp-hero__how:hover { color: var(--mp-brand-strong); }

/* Hero visual — clean product showcase */
.mp-hero__visual { position: relative; }
.mp-hero__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.mp-hero__card {
	display: block;
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--mp-shadow-sm);
	transition: transform 0.25s var(--mp-ease), box-shadow 0.25s var(--mp-ease), border-color 0.25s var(--mp-ease);
	opacity: 0;
	transform: translateY(12px);
	animation: mp-rise 0.6s var(--mp-ease) forwards;
}
.mp-hero__card:nth-child(2) { animation-delay: 0.08s; }
.mp-hero__card:nth-child(3) { animation-delay: 0.16s; }
.mp-hero__card:nth-child(4) { animation-delay: 0.24s; }
.mp-hero__card:hover,
.mp-hero__card:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--mp-shadow);
	border-color: rgba(234, 88, 12, 0.35);
}
.mp-hero__card-media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	overflow: hidden;
}
.mp-hero__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-hero__card-body { padding: 13px 14px 15px; }
.mp-hero__card-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--mp-ink);
	line-height: 1.3;
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mp-hero__card-tag {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--mp-brand);
}
.mp-hero__visual-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mp-ink);
	text-decoration: none;
}
.mp-hero__visual-cta svg { width: 17px; height: 17px; transition: transform 0.2s var(--mp-ease); }
.mp-hero__visual-cta:hover { color: var(--mp-brand-strong); }
.mp-hero__visual-cta:hover svg { transform: translateX(3px); }

@keyframes mp-rise {
	to { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.mp-hero__inner {
		grid-template-columns: 1fr;
		gap: 44px;
		padding: 48px 20px 56px;
	}
	.mp-hero__content { max-width: 640px; }
	.mp-hero__lede { max-width: none; }
}

@media (max-width: 600px) {
	.mp-promo-bar__inner { padding: 10px 16px; font-size: 13px; gap: 8px; }
	.mp-promo-bar__text { display: none; } /* keep bar to one calm line on phones */
	.mp-hero__inner { padding: 32px 18px 44px; }
	.mp-hero__eyebrow { margin-bottom: 16px; }
	.mp-hero__actions { flex-direction: column; }
	.mp-hero__actions .mp-btn { width: 100%; }
	.mp-hero__trust { gap: 8px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mp-hero__card { animation: none; opacity: 1; transform: none; }
	.mp-btn, .mp-hero__card, .mp-hero__visual-cta svg, .mp-btn svg { transition: none; }
}

/* -----------------------------------------------------------------------------
   Vertical rhythm — the homepage is content-rich (12 sections). At 64px top/bottom
   per section it ran ~12,400px tall on mobile, which reads as "endless". Tighten
   the rhythm on smaller screens (scoped to the homepage via body.home so other
   pages are untouched). No content is removed — only the empty space between it.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	body.home .mytheme-section { padding-top: 44px; padding-bottom: 44px; }
	body.home .subscription-products-section { padding: 48px 0 !important; }
}
@media (max-width: 480px) {
	body.home .mytheme-section { padding-top: 36px; padding-bottom: 36px; }
	body.home .subscription-products-section { padding: 40px 0 !important; }
}