/* ==========================================================================
   LoverCare Babymac — Base design system
   Variables, reset, typography, buttons, layout utilities.
   Mobile-first: base rules target small screens, min-width queries enhance.
   ========================================================================== */

:root {
	/* Brand colors (overridden live by the Customizer, see inc/customizer.php) */
	--lcbm-color-primary: #5B2C82;
	--lcbm-color-secondary: #4A2160;
	--lcbm-color-accent: #B8935A;
	--lcbm-color-highlight: #A97FD1;
	--lcbm-color-bg: #FFFFFF;
	--lcbm-color-bg-light: #F5EFFA;
	--lcbm-color-text: #241A2E;
	--lcbm-color-text-muted: #6B5D7A;
	--lcbm-color-border: #E4D9F0;
	--lcbm-color-success: #4CAF6D;
	--lcbm-color-danger: #E85D75;
	--lcbm-color-star: #B8935A;
	--lcbm-color-bg-dark: #2D1541;
	--lcbm-footer-bg: #23112F;

	/* Typography */
	--lcbm-font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--lcbm-font-body: 'Inter', 'Segoe UI', sans-serif;
	--lcbm-font-accent: 'Fraunces', 'Georgia', serif;

	/* Spacing scale */
	--lcbm-space-xs: 0.5rem;
	--lcbm-space-sm: 1rem;
	--lcbm-space-md: 1.5rem;
	--lcbm-space-lg: 2.5rem;
	--lcbm-space-xl: 4rem;

	/* Shape */
	--lcbm-radius-sm: 10px;
	--lcbm-radius-md: 16px;
	--lcbm-radius-lg: 18px;
	--lcbm-radius-pill: 999px;

	/* Shadow */
	--lcbm-shadow-sm: 0 2px 10px rgba(34, 34, 34, 0.06);
	--lcbm-shadow-md: 0 10px 30px rgba(34, 34, 34, 0.08);
	--lcbm-shadow-lg: 0 20px 45px rgba(34, 34, 34, 0.12);

	--lcbm-container-width: 1280px;
	--lcbm-header-height: 76px;
	--lcbm-logo-height: 56px;
}

/* --------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------- */
* , *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Root font size drives every rem-based size in the theme — lower this
	   one number to scale all text down (or up) site-wide. */
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
	margin: 0;
	background: var(--lcbm-color-bg);
	color: var(--lcbm-color-text);
	font-family: var(--lcbm-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lcbm-font-heading);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var(--lcbm-space-sm);
	color: var(--lcbm-color-text);
}

h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }

p { margin: 0 0 var(--lcbm-space-sm); }

a {
	color: var(--lcbm-color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}
a:hover { color: var(--lcbm-color-primary); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select {
	font-family: inherit;
	font-size: 1rem;
	border: 1px solid var(--lcbm-color-border);
	border-radius: var(--lcbm-radius-sm);
	padding: 0.7rem 1rem;
	background: var(--lcbm-color-bg);
	color: var(--lcbm-color-text);
}
input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--lcbm-color-primary);
	outline-offset: 1px;
}

/* Focus visibility for keyboard users (WCAG 2.2) */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--lcbm-color-primary);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	background: var(--lcbm-color-primary);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: var(--lcbm-radius-sm);
	transition: top 0.2s ease;
}
.skip-link:focus {
	top: 1rem;
	color: #fff;
}

/* --------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------- */
.lcbm-container {
	width: 100%;
	max-width: var(--lcbm-container-width);
	margin-inline: auto;
	padding-inline: var(--lcbm-space-sm);
}

.lcbm-section { padding-block: var(--lcbm-space-lg); }
.lcbm-section.lcbm-fade-init { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.lcbm-section.lcbm-fade-init.is-visible { opacity: 1; transform: none; }
.lcbm-section-inner {
	width: 100%;
	max-width: var(--lcbm-container-width);
	margin-inline: auto;
	padding-inline: var(--lcbm-space-sm);
}

.lcbm-section-header {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--lcbm-space-md);
}
.lcbm-section-header p { color: var(--lcbm-color-text-muted); }

.lcbm-section-cta { text-align: center; margin-top: var(--lcbm-space-md); }

.lcbm-content-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lcbm-space-lg);
	padding-block: var(--lcbm-space-lg);
}

@media (min-width: 1024px) {
	.lcbm-content-layout:has(.lcbm-sidebar) {
		grid-template-columns: 1fr 320px;
	}
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.9rem;
	border-radius: var(--lcbm-radius-pill);
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	box-shadow: var(--lcbm-shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--lcbm-shadow-md); }

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

.btn-secondary {
	background: var(--lcbm-color-secondary);
	color: #fff;
}
.btn-secondary:hover { color: #fff; opacity: 0.9; }

.btn-outline {
	background: transparent;
	border-color: var(--lcbm-color-text);
	color: var(--lcbm-color-text);
	box-shadow: none;
}
.btn-outline:hover {
	background: var(--lcbm-color-text);
	color: #fff;
}

.btn:disabled, .btn.disabled {
	opacity: 0.5;
	pointer-events: none;
	transform: none;
}

/* --------------------------------------------------------------------
   Cards / badges shared across the theme
   -------------------------------------------------------------------- */
.lcbm-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.75rem;
	border-radius: var(--lcbm-radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
}
.lcbm-badge-sale { background: var(--lcbm-color-secondary); }
.lcbm-badge-bestseller { background: var(--lcbm-color-highlight); color: var(--lcbm-color-text); }
.lcbm-badge-out-of-stock { background: var(--lcbm-color-text-muted); }

/* --------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------- */
.lcbm-breadcrumbs {
	padding-block: var(--lcbm-space-sm);
	font-size: 0.875rem;
	color: var(--lcbm-color-text-muted);
}
.lcbm-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.lcbm-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 0.4rem; color: var(--lcbm-color-border); }
.lcbm-breadcrumbs a { color: var(--lcbm-color-text-muted); }
.lcbm-breadcrumbs a:hover { color: var(--lcbm-color-primary); }

/* --------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------- */
.lcbm-announcement-bar {
	background: var(--lcbm-color-bg-dark);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
}
.lcbm-announcement-bar-inner {
	max-width: var(--lcbm-container-width);
	margin-inline: auto;
	padding: 0.55rem var(--lcbm-space-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lcbm-space-sm);
	text-align: center;
}
.lcbm-announcement-bar a { color: #fff; }
.lcbm-announcement-bar-help { display: none; white-space: nowrap; opacity: 0.9; }
@media (min-width: 768px) {
	.lcbm-announcement-bar-inner { justify-content: space-between; text-align: left; }
	.lcbm-announcement-bar-help { display: inline; }
}

/* --------------------------------------------------------------------
   404 page
   -------------------------------------------------------------------- */
.lcbm-404 { text-align: center; padding-block: var(--lcbm-space-xl); }
.lcbm-404-content { max-width: 520px; margin-inline: auto; }
.lcbm-404-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-block: var(--lcbm-space-md); }
.lcbm-404-search { max-width: 400px; margin-inline: auto; }