/* Site-wide base — applies on every page (landing, shop, product, cart, checkout). */

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

html {
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	color-scheme: light;
}

body.pc-body {
	margin: 0;
	min-height: 100dvh;
	font-family: var(--pc-font-body);
	font-size: var(--pc-fs-body);
	line-height: var(--pc-lh-body);
	color: var(--pc-fg);
	background: var(--pc-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image:
		radial-gradient(1200px 600px at 80% -10%, rgba(232, 166, 161, 0.18), transparent 60%),
		radial-gradient(900px 600px at -10% 30%, rgba(157, 184, 154, 0.14), transparent 60%);
	background-attachment: fixed;
}

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

a {
	color: var(--pc-accent-deep);
	text-decoration: none;
	transition: color var(--pc-dur-1) var(--pc-ease);
}
a:hover { color: var(--pc-ink); }

h1, h2, h3, h4 {
	font-family: var(--pc-font-display);
	font-weight: 500;
	line-height: var(--pc-lh-display);
	letter-spacing: -0.01em;
	color: var(--pc-ink);
	margin: 0 0 var(--pc-s4);
	font-variation-settings: 'opsz' 96, 'SOFT' 100;
}

h1 { font-size: var(--pc-fs-1); line-height: var(--pc-lh-tight); }
h2 { font-size: var(--pc-fs-2); }
h3 { font-size: var(--pc-fs-3); }
h4 { font-size: var(--pc-fs-4); }

p { margin: 0 0 var(--pc-s4); }

::selection { background: var(--pc-pink-soft); color: var(--pc-ink); }

/* Layout primitives */
.pc-container { width: var(--pc-container); margin-inline: auto; }
.pc-container--narrow { width: var(--pc-container-narrow); margin-inline: auto; }

.pc-stack > * + * { margin-top: var(--pc-s4); }
.pc-stack-lg > * + * { margin-top: var(--pc-s6); }

/* Skip link */
.pc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: var(--pc-s3) var(--pc-s4);
	background: var(--pc-ink);
	color: var(--pc-cream);
	border-radius: 0 0 var(--pc-r-md) 0;
	z-index: var(--pc-z-toast);
}
.pc-skip:focus { left: 0; }

/* Buttons — used everywhere, including WooCommerce overrides below. */
.pc-btn,
.button,
button.button,
input[type='submit'],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-s2);
	padding: 0.85rem 1.55rem;
	font-family: var(--pc-font-body);
	font-weight: 600;
	font-size: 0.97rem;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	border-radius: var(--pc-r-pill);
	cursor: pointer;
	text-decoration: none;
	background: var(--pc-ink);
	color: var(--pc-cream);
	box-shadow: var(--pc-shadow-1);
	transition: transform var(--pc-dur-1) var(--pc-ease), box-shadow var(--pc-dur-1) var(--pc-ease), background var(--pc-dur-1) var(--pc-ease), color var(--pc-dur-1) var(--pc-ease);
}
.pc-btn:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-1px);
	box-shadow: var(--pc-shadow-2);
	background: var(--pc-ink);
	color: var(--pc-cream);
}

.pc-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--pc-pink-deep);
	color: var(--pc-cream);
}
.pc-btn--primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--pc-ink);
	color: var(--pc-cream);
}

.pc-btn--ghost {
	background: transparent;
	color: var(--pc-ink);
	border-color: var(--pc-line);
	box-shadow: none;
}
.pc-btn--ghost:hover {
	background: var(--pc-cream-2);
	color: var(--pc-ink);
}

.pc-btn--small { padding: 0.55rem 1.05rem; font-size: 0.88rem; }

/* Form fields */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='number'],
input[type='search'],
textarea,
select,
.pc-field input,
.pc-field select {
	font-family: var(--pc-font-body);
	font-size: 1rem;
	color: var(--pc-ink);
	background: #fff;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-r-md);
	padding: 0.85rem 1rem;
	width: 100%;
	transition: border-color var(--pc-dur-1) var(--pc-ease), box-shadow var(--pc-dur-1) var(--pc-ease);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--pc-pink-deep);
	box-shadow: 0 0 0 4px rgba(232, 166, 161, 0.25);
}

.pc-field { display: flex; gap: var(--pc-s3); }
.pc-field input { flex: 1; }
.pc-field__hint { font-size: var(--pc-fs-small); color: var(--pc-fg-soft); margin-top: var(--pc-s2); }

/* Badges */
.pc-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.7rem;
	border-radius: var(--pc-r-pill);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	background: var(--pc-pink-soft);
	color: var(--pc-ink);
}
.pc-badge--sale { background: var(--pc-terracotta); color: var(--pc-cream); }
.pc-badge--new  { background: var(--pc-sage); color: var(--pc-cream); }

/* Soft card */
.pc-card {
	background: #fff;
	border-radius: var(--pc-r-lg);
	box-shadow: var(--pc-shadow-1);
	overflow: hidden;
	transition: transform var(--pc-dur-2) var(--pc-ease), box-shadow var(--pc-dur-2) var(--pc-ease);
}
.pc-card:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow-2); }

/* Section spacing */
.pc-section { padding-block: var(--pc-s9); position: relative; }
.pc-section--snug { padding-block: var(--pc-s8); }
.pc-section--alt { background: var(--pc-bg-alt); }

@media (max-width: 640px) {
	.pc-section { padding-block: var(--pc-s8); }
}