/* ═══════════════════════════════════════════════════════════════════════════
   Grace Pearls — styles.css
   Theme system : [data-theme] attribute + CSS custom properties
   Light / dark : prefers-color-scheme + [data-color-scheme] manual override
   Responsive   : mobile-first
   ═══════════════════════════════════════════════════════════════════════════ */


@import url('./themes/march26/style.css');
@import url('./themes/springer/style.css');
/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { cursor: pointer; background: none; border: none; font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 1.65;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Document base
   ═══════════════════════════════════════════════════════════════════════════ */

body {
background: var(--bg);
color: var(--text);
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-top: var(--nav-h);
transition: background-color 0.2s ease, color 0.2s ease;
}

.site-main {
flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Navigation
   ═══════════════════════════════════════════════════════════════════════════ */

.gp-nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--nav-h);
background: var(--nav-bg);
border-bottom: 1px solid var(--nav-border);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: background 0.2s, border-color 0.2s;
}

.nav-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
height: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
}

/* Brand */
.nav-brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--text);
flex-shrink: 0;
}

.nav-brand-gem {
color: var(--accent);
flex-shrink: 0;
}

/* Inline nav links (desktop) */
.nav-menu {
display: none;
flex: 1;
align-items: center;
gap: 0.125rem;
}

.nav-link {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.875rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-muted);
border-radius: var(--radius-sm);
transition: color 0.15s, background 0.15s;
}

.nav-link:hover,
.nav-link.active {
color: var(--accent);
background: var(--accent-subtle);
}

/* Controls (right side — always visible) */
.nav-controls {
display: flex;
align-items: center;
gap: 0.125rem;
margin-left: auto;
}

/* Locale switcher */
.nav-locale {
display: flex;
align-items: center;
}

.locale-btn {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.45rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--text-muted);
border-radius: var(--radius-sm);
transition: color 0.15s, background 0.15s;
}

.locale-btn:hover,
.locale-btn.active {
color: var(--accent);
background: var(--accent-subtle);
}

/* Icon buttons (dark toggle, hamburger) */
.gp-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
color: var(--text-muted);
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}

.gp-icon-btn:hover {
color: var(--accent);
background: var(--accent-subtle);
}

/* Dark-mode toggle icons — CSS controls visibility (no JS flash) */
.icon-sun  { display: none; }
.icon-moon { display: block; }

/* Auto dark (OS) */
@media (prefers-color-scheme: dark) {
	[data-theme="march26"]:not([data-color-scheme="light"]) .icon-moon,
	[data-theme="springer"]:not([data-color-scheme="light"]) .icon-moon { display: none; }
	[data-theme="march26"]:not([data-color-scheme="light"]) .icon-sun,
	[data-theme="springer"]:not([data-color-scheme="light"]) .icon-sun  { display: block; }
/* Forced dark */
[data-color-scheme="dark"] .icon-moon { display: none; }
[data-color-scheme="dark"] .icon-sun  { display: block; }

/* Hamburger bars */
.nav-hamburger {
flex-direction: column;
justify-content: center;
gap: 5px;
}

.ham-bar {
display: block;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.2s ease;
transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] .ham-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .ham-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}

.nav-hamburger[aria-expanded="true"] .ham-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

/* ─── Mobile nav drawer ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
.nav-menu {
display: flex;
flex-direction: column;
align-items: stretch;
position: fixed;
inset: var(--nav-h) 0 auto 0;
background: var(--nav-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
padding: 0.75rem 1rem 1.25rem;
gap: 0.25rem;
z-index: 99;
transform: translateY(-110%);
opacity: 0;
pointer-events: none;
transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-menu.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}

.nav-link {
font-size: 1rem;
padding: 0.625rem 0.75rem;
}

.nav-locale--desktop { display: none; }

.nav-locale--mobile {
display: flex;
padding-top: 0.625rem;
border-top: 1px solid var(--border);
margin-top: 0.25rem;
}
}

/* ─── Desktop nav ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
.nav-menu { display: flex; }
.nav-hamburger,
.nav-locale--mobile { display: none; }
.nav-locale--desktop { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
background: var(--footer-bg);
color: var(--footer-text);
margin-top: auto;
}

.footer-container {
max-width: 1280px;
margin: 0 auto;
padding: 3rem 1.5rem 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}

.footer-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 1rem;
color: var(--footer-text);
margin-bottom: 0.75rem;
}

.footer-logo svg { color: var(--accent); }

.footer-tagline {
font-size: 0.875rem;
color: var(--footer-muted);
max-width: 28ch;
line-height: 1.5;
}

.footer-nav {
display: flex;
flex-direction: column;
gap: 0.625rem;
}

.footer-nav a {
font-size: 0.875rem;
color: var(--footer-muted);
transition: color 0.15s;
}

.footer-nav a:hover { color: var(--accent); }

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 1rem 1.5rem;
text-align: center;
}

.footer-bottom p {
font-size: 0.78rem;
color: var(--footer-muted);
}

@media (min-width: 640px) {
.footer-container {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}

.footer-nav {
flex-direction: row;
gap: 2.5rem;
}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Store header (brand pages + outlet)
   ═══════════════════════════════════════════════════════════════════════════ */

.store-header {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
color: #fff;
padding: 2.5rem 1.5rem 2rem;
}

/* Per-brand accent gradients */
.store-header[data-brand="mary-kay"] {
background: linear-gradient(135deg, #E8185C 0%, #9C0F3C 100%);
}

.store-header[data-brand="amway"] {
background: linear-gradient(135deg, #2A1028 0%, #0E060C 100%);
}

.store-header[data-brand="outlet"] {
background: linear-gradient(135deg, #6A404E 0%, #1A1018 100%);
}

.store-header-inner {
max-width: 1280px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
gap: 1.25rem;
}

.brand-hero-logo {
height: 52px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
flex-shrink: 0;
}

.outlet-icon { font-size: 2rem; line-height: 1; }

.store-header-eyebrow {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 0.2rem;
}

.store-header-title {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}

/* Breadcrumb */
.breadcrumb {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
font-size: 0.82rem;
opacity: 0.8;
}

.breadcrumb a { opacity: 0.85; transition: opacity 0.15s; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb-current { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   Brand store layout (sidebar + products)
   ═══════════════════════════════════════════════════════════════════════════ */

.store-layout {
max-width: 1280px;
margin: 0 auto;
padding: 2rem 1.5rem;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}

@media (min-width: 700px) {
.store-layout {
grid-template-columns: 210px 1fr;
}
}

/* ─── Category sidebar ───────────────────────────────────────────────────── */

@media (min-width: 700px) {
.category-sidebar {
position: sticky;
top: calc(var(--nav-h) + 1.5rem);
align-self: start;
max-height: calc(100dvh - var(--nav-h) - 3rem);
overflow-y: auto;
}
}

.sidebar-title {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}

.cat-tree {
display: flex;
flex-direction: column;
gap: 0.125rem;
}

.cat-link {
display: block;
padding: 0.375rem 0.625rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
color: var(--text-muted);
transition: color 0.15s, background 0.15s;
}

.cat-link:hover {
color: var(--accent);
background: var(--accent-subtle);
}

.cat-link.active {
color: var(--accent);
background: var(--accent-subtle);
font-weight: 600;
}

.cat-sub {
display: none;
flex-direction: column;
gap: 0.1rem;
margin-left: 0.75rem;
padding-left: 0.75rem;
border-left: 2px solid var(--border);
margin-top: 0.125rem;
margin-bottom: 0.25rem;
}

.cat-sub.visible { display: flex; }
.cat-link--child { font-size: 0.82rem; }

/* ─── Product area ───────────────────────────────────────────────────────── */

.product-area,
.outlet-area {
min-width: 0;
}

.area-title {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 1.5rem;
color: var(--text);
}

.empty-msg {
color: var(--text-muted);
font-size: 0.95rem;
padding: 3rem;
text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Category cards (shown when a category has no direct products)
   ═══════════════════════════════════════════════════════════════════════════ */

.category-card-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}

/*
 * Pearl placeholder — a CSS-only iridescent grey pearl.
 * Replace the background per-category once real images are available.
 */
.category-card-img {
aspect-ratio: 1;
background:
  radial-gradient(circle at 35% 32%, rgba(255,255,255,0.55) 0%, transparent 55%),
  radial-gradient(circle at 68% 72%, rgba(180,180,200,0.35) 0%, transparent 45%),
  radial-gradient(ellipse at 50% 50%, #c8c8d4 0%, #9ea0ad 60%, #7b7d8a 100%);
}

.category-card .product-info {
align-items: center;
text-align: center;
}

.category-card .product-name {
font-size: 0.9rem;
color: var(--text-muted);
}

.category-card:hover .category-card-img {
filter: brightness(1.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product grid & cards
   ═══════════════════════════════════════════════════════════════════════════ */

.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}

@media (min-width: 480px) {
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 1.25rem;
}
}

.product-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--accent-border);
}

.product-img-wrap {
aspect-ratio: 1;
background: var(--bg-alt);
overflow: hidden;
}

.product-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.product-card:hover .product-img-wrap img {
transform: scale(1.04);
}

.product-info {
padding: 0.875rem;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.product-sku,
.product-brand-tag {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}

.product-name {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.35;
color: var(--text);
margin-top: 0.1rem;
}

.product-price {
font-size: 1rem;
font-weight: 700;
color: var(--accent);
margin-top: auto;
padding-top: 0.5rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
}

.original-price {
font-size: 0.8rem;
font-weight: 400;
color: var(--text-muted);
text-decoration: line-through;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */

.product-badge {
position: absolute;
top: 0.625rem;
right: 0.625rem;
z-index: 1;
padding: 0.2rem 0.5rem;
border-radius: var(--radius-full);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.badge--new              { background: var(--accent); color: #fff; }
.badge--hot,
.badge--sale             { background: #FF3B30; color: #fff; }
.badge--top              { background: var(--gp-black); color: var(--gp-pink-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   Outlet — filter bar
   ═══════════════════════════════════════════════════════════════════════════ */

.outlet-area {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem 2.5rem;
}

.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 1.5rem 1.5rem 0;
max-width: 1280px;
margin: 0 auto;
}

.filter-btn {
display: inline-flex;
align-items: center;
padding: 0.45rem 1rem;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 500;
border: 1px solid var(--border);
color: var(--text-muted);
background: var(--surface);
transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.filter-btn:hover,
.filter-btn.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Legal pages  (privacy policy, terms of use)
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

/* ─── Last-updated stamp ─────────────────────────────────────────────────── */
.legal-page .legal-updated {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-subtle);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-full);
	padding: 0.25rem 0.875rem;
	margin-bottom: 2rem;
}

/* ─── Section headings ───────────────────────────────────────────────────── */
.legal-page h2 {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text);
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--accent-border);
}

.legal-page h2:first-of-type {
	margin-top: 0;
}

/* ─── Body copy ──────────────────────────────────────────────────────────── */
.legal-page p {
	font-size: 0.975rem;
	color: var(--text-muted);
	line-height: 1.8;
	margin-bottom: 1rem;
}

.legal-page p:last-child {
	margin-bottom: 0;
}

.legal-page strong {
	color: var(--text);
	font-weight: 600;
}

.legal-page em {
	color: var(--accent);
	font-style: normal;
	font-weight: 600;
}

/* ─── Lists ──────────────────────────────────────────────────────────────── */
.legal-page ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.legal-page ul li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.975rem;
	color: var(--text-muted);
	line-height: 1.75;
}

.legal-page ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.625em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
}

/* ─── Links ──────────────────────────────────────────────────────────────── */
.legal-page a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.15s;
}

.legal-page a:hover {
	opacity: 0.75;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
	.legal-page h2 {
		font-size: 1.2rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Contact page
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
}

/* ─── Two-column layout ──────────────────────────────────────────────────── */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 768px) {
	.contact-layout {
		grid-template-columns: 280px 1fr;
		gap: 3rem;
	}
}

/* ─── Aside ──────────────────────────────────────────────────────────────── */
.contact-aside {
	padding: 1.5rem 0;
}

.contact-gem {
	color: var(--accent);
	margin-bottom: 1.25rem;
}

.contact-aside-title {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text);
	margin-bottom: 0.875rem;
}

.contact-aside-body {
	font-size: 0.925rem;
	color: var(--text-muted);
	line-height: 1.75;
	margin-bottom: 1.25rem;
}

.contact-aside-email a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.15s;
}

.contact-aside-email a:hover {
	opacity: 0.75;
}

/* ─── Card ───────────────────────────────────────────────────────────────── */
.contact-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 2rem 1.5rem;
	box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) {
	.contact-card {
		padding: 2.5rem 2rem;
	}
}

/* ─── Form ───────────────────────────────────────────────────────────────── */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 480px) {
	.form-row--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.form-label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text);
}

.form-input {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--text);
	background: var(--bg);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	appearance: none;
	-webkit-appearance: none;
}

.form-input:hover {
	border-color: var(--accent-border);
}

.form-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-input::placeholder {
	color: var(--text-muted);
	opacity: 0.6;
}

.form-textarea {
	resize: vertical;
	min-height: 9rem;
	line-height: 1.65;
}

/* ─── Field-level error ──────────────────────────────────────────────────── */
.form-group--error .form-input {
	border-color: #E84040;
	box-shadow: 0 0 0 3px rgba(232, 64, 64, 0.12);
}

.field-error {
	font-size: 0.78rem;
	font-weight: 600;
	color: #E84040;
}

/* ─── Alert banner ───────────────────────────────────────────────────────── */
.form-alert {
	padding: 0.875rem 1rem;
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	margin-bottom: 0.25rem;
}

.form-alert--error {
	background: rgba(232, 64, 64, 0.1);
	border: 1px solid rgba(232, 64, 64, 0.3);
	color: #c0392b;
}

[data-color-scheme="dark"] .form-alert--error,
@media (prefers-color-scheme: dark) {
	[data-theme]:not([data-color-scheme="light"]) .form-alert--error {
		color: #ff7070;
	}
}

/* ─── Form footer ─────────────────────────────────────────────────────────── */
.form-footer {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.25rem;
}

/* ─── Primary button ─────────────────────────────────────────────────────── */
.gp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--accent);
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
	text-decoration: none;
}

.gp-btn:hover {
	background: var(--accent-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.gp-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.gp-btn--ghost {
	color: var(--accent);
	background: var(--accent-subtle);
	border: 1.5px solid var(--accent-border);
}

.gp-btn--ghost:hover {
	background: var(--accent-border);
}

/* ─── Success state ──────────────────────────────────────────────────────── */
.contact-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1rem;
	gap: 1rem;
}

.contact-success-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--accent-subtle);
	border: 2px solid var(--accent-border);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.contact-success-title {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text);
}

.contact-success-body {
	font-size: 0.95rem;
	color: var(--text-muted);
	line-height: 1.75;
	max-width: 42ch;
}

/* ─── Responsive padding ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
	.contact-page {
		padding: 4rem 2rem 6rem;
	}
}

@media (min-width: 1024px) {
	.contact-page {
		padding: 5rem 2.5rem 7rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage — Mary Kay CTA banner
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mary Kay pink — refine this variable to retheme the banner */
:root { --mk-pink: #f6d7dc; }

.hp-section {
	padding-inline: 1.5rem;
	margin-block: 3rem;
}

.hp-mk-banner {
}

.hp-mk-banner-link {
	display: block;
	max-width: 1280px;
	margin: 0 auto;
	padding: 1.25rem 2rem;
	background: var(--mk-pink);
	border: 2px solid #000;
	border-radius: var(--radius);
	color: #000;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.01em;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.hp-mk-banner-link:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage — Highlights section
   ═══════════════════════════════════════════════════════════════════════════ */

.hp-highlights-inner {
	max-width: 1280px;
	margin: 0 auto;
}

.hp-section-title {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
	margin-bottom: 1.75rem;
}

.hp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 480px) {
	.hp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.hp-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Full card as anchor */
a.hp-card {
	color: inherit;
}

/* Short description inside card */
.product-desc {
	font-size: 0.825rem;
	color: var(--text-muted);
	line-height: 1.5;
	margin-top: 0.2rem;
}

/* Image placeholder — lavender pearl gradient */
.hp-card-placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 35% 32%, rgba(255,255,255,0.55) 0%, transparent 55%),
		radial-gradient(circle at 68% 72%, rgba(180,170,210,0.35) 0%, transparent 45%),
		radial-gradient(ellipse at 50% 50%, #d4c8e8 0%, #b0a0c8 60%, #8878a8 100%);
}