/* ============================================
	 Miloto Skincare — Design System v3
	 Korean formula · French essential oils · Hong Kong handmade
	 ============================================ */

:root {
	--font-serif: 'Shippori Mincho', 'Noto Serif KR', 'Noto Serif JP', 'Noto Serif TC', 'Georgia', serif;
	--font-sans: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
	--cream-50: #fdfcfa;
	--cream-100: #faf7f2;
	--cream-200: #f3ede3;
	--cream-300: #e6d9c6;
	--earth-700: #73553a;
	--earth-900: #4a3728;
	--earth-950: #33221a;
	--sage-300: #a3bfa3;
	--sage-500: #5e855e;
	--sage-700: #3b553b;
	--rose-400: #f28b9a;
	--gold-400: #d4a843;
	--shadow-soft: 0 18px 60px rgba(51, 34, 26, 0.08);
	--shadow-card: 0 24px 60px rgba(51, 34, 26, 0.12);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-serif);
}

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

a {
	transition: color 0.22s ease, opacity 0.22s ease, transform 0.22s ease;
}

hr {
	border: none;
	border-top: 1px solid var(--cream-300);
	margin: 1.25rem 0;
}

:focus-visible {
	outline: 2px solid #7da37d;
	outline-offset: 2px;
	border-radius: 0.5rem;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='tel'],
input[type='url'],
textarea,
select {
	width: 100%;
	padding: 0.7rem 0.95rem;
	border: 1px solid var(--cream-300);
	border-radius: 0.75rem;
	background: #fff;
	color: var(--earth-950);
	font-family: var(--font-sans);
	font-size: 0.925rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--sage-500);
	box-shadow: 0 0 0 4px rgba(125, 163, 125, 0.12);
}

input::placeholder,
textarea::placeholder {
	color: #bea489;
}

textarea {
	min-height: 5rem;
	resize: vertical;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a88560' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	padding-right: 2.5rem;
}

.errorlist {
	list-style: none;
	margin: 0.3rem 0 0;
	padding: 0;
}

.errorlist li {
	color: #c44e4e;
	font-size: 0.8rem;
}

#cart-sidebar-panel {
	transition: transform 0.35s var(--ease-out);
}

.toast-enter {
	animation: toastSlideIn 0.35s var(--ease-out);
}

.cart-submit-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 3.5rem;
	transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.25s ease;
}

.cart-submit-button::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.24) 38%, transparent 74%);
	transform: translateX(-140%);
	opacity: 0;
}

.cart-submit-button.is-submitting {
	transform: scale(0.985);
	box-shadow: 0 12px 28px rgba(51, 34, 26, 0.18);
}

.cart-submit-button.is-submitting::after {
	opacity: 1;
	animation: cartButtonSweep 0.9s linear infinite;
}

.cart-submit-button.is-success {
	background: var(--sage-500);
	animation: cartButtonSuccess 0.55s var(--ease-out);
}

.cart-submit-label,
.cart-submit-success {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-height: 1.25rem;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.cart-submit-success {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(35%);
	white-space: nowrap;
}

.cart-submit-button.is-success .cart-submit-label {
	opacity: 0;
	transform: translateY(-35%);
}

.cart-submit-button.is-success .cart-submit-success {
	opacity: 1;
	transform: translateY(0);
}

.cart-count-bump {
	animation: cartBadgeBump 0.48s var(--ease-out);
}

.miloto-hero {
	background:
		radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.82), transparent 26%),
		radial-gradient(circle at 85% 10%, rgba(163, 191, 163, 0.18), transparent 24%),
		linear-gradient(180deg, #fbf8f3 0%, #f8f1e8 46%, #f3ede3 100%);
}

.miloto-hero__backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: transform 0.2s ease-out;
}

.miloto-hero__orb,
.miloto-hero__ring,
.miloto-hero__grain,
.miloto-hero__aurora,
.miloto-hero__beam,
.miloto-hero__petal {
	position: absolute;
}

.miloto-hero__aurora {
	inset: -18% -14% auto -14%;
	height: 88%;
	background:
		radial-gradient(circle at 18% 45%, rgba(163, 191, 163, 0.34) 0%, transparent 31%),
		radial-gradient(circle at 78% 24%, rgba(213, 192, 163, 0.42) 0%, transparent 27%),
		linear-gradient(115deg, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0.42) 49%, rgba(255, 255, 255, 0) 80%);
	filter: blur(12px);
	opacity: 0.98;
	animation: milotoHeroAurora 12s ease-in-out infinite;
}

.miloto-hero__beam {
	width: 28rem;
	height: 140%;
	top: -22%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 249, 240, 0.4) 22%, rgba(246, 232, 210, 0.58) 50%, rgba(255, 255, 255, 0) 100%);
	filter: blur(10px);
	mix-blend-mode: screen;
	opacity: 0.62;
	transform-origin: center top;
	animation: milotoHeroBeam 9s ease-in-out infinite;
}

.miloto-hero__beam--one {
	left: 10%;
	transform: rotate(18deg);
}

.miloto-hero__beam--two {
	right: 8%;
	width: 22rem;
	opacity: 0.52;
	transform: rotate(-20deg);
	animation-name: milotoHeroBeamTwo;
	animation-delay: -4.5s;
}

.miloto-hero__orb {
	border-radius: 999px;
	filter: blur(8px);
	opacity: 0.92;
	animation: milotoHeroFloat 7.2s ease-in-out infinite;
}

.miloto-hero__orb--sage {
	width: 30rem;
	height: 30rem;
	top: -7rem;
	left: -8rem;
	background: radial-gradient(circle, rgba(163, 191, 163, 0.62) 0%, rgba(163, 191, 163, 0.2) 58%, transparent 80%);
}

.miloto-hero__orb--earth {
	width: 24rem;
	height: 24rem;
	right: 4%;
	top: 8%;
	background: radial-gradient(circle, rgba(213, 192, 163, 0.66) 0%, rgba(213, 192, 163, 0.24) 58%, transparent 80%);
	animation-delay: -2.5s;
}

.miloto-hero__orb--cream {
	width: 18rem;
	height: 18rem;
	left: 10%;
	bottom: -1%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.26) 58%, transparent 82%);
	animation-delay: -5s;
}

.miloto-hero__petal {
	width: 14rem;
	height: 6rem;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(233, 201, 177, 0.34));
	box-shadow: 0 18px 42px rgba(92, 68, 48, 0.09);
	opacity: 0.82;
	filter: blur(1px);
	animation: milotoHeroPetal 8.5s ease-in-out infinite;
}

.miloto-hero__petal--one {
	top: 16%;
	right: 14%;
	transform: rotate(-18deg);
}

.miloto-hero__petal--two {
	bottom: 10%;
	left: 12%;
	width: 10.5rem;
	height: 4.4rem;
	transform: rotate(16deg);
	animation-name: milotoHeroPetalTwo;
	animation-delay: -3.5s;
}

.miloto-hero__petal--three {
	top: 38%;
	right: 34%;
	width: 9.75rem;
	height: 4.1rem;
	opacity: 0.74;
	transform: rotate(-8deg);
	animation: milotoHeroPetalThree 7.6s ease-in-out infinite;
	animation-delay: -1.8s;
}

.miloto-hero__ring {
	border-radius: 999px;
	border: 1px solid rgba(168, 133, 96, 0.28);
	animation: milotoHeroPulse 8s ease-in-out infinite;
}

.miloto-hero__ring--left {
	width: 36rem;
	height: 36rem;
	left: -11rem;
	bottom: -15rem;
}

.miloto-hero__ring--right {
	width: 28rem;
	height: 28rem;
	right: -6rem;
	top: -8rem;
	animation-delay: -3s;
}

.miloto-hero__grain {
	inset: 0;
	opacity: 0.38;
	background-image:
		radial-gradient(circle at 20% 20%, rgba(92, 68, 48, 0.06) 0, rgba(92, 68, 48, 0.06) 1px, transparent 1px),
		radial-gradient(circle at 80% 35%, rgba(125, 163, 125, 0.05) 0, rgba(125, 163, 125, 0.05) 1px, transparent 1px),
		radial-gradient(circle at 45% 80%, rgba(168, 133, 96, 0.05) 0, rgba(168, 133, 96, 0.05) 1px, transparent 1px);
	background-size: 180px 180px, 220px 220px, 200px 200px;
	animation: milotoHeroDrift 12s linear infinite;
}

.hero-grid {
	position: relative;
}

.glass-card {
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
	backdrop-filter: blur(16px);
	box-shadow: var(--shadow-soft);
}

.section-shell {
	position: relative;
}

.section-shell::before {
	content: '';
	position: absolute;
	inset: auto 8% 0 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(168, 133, 96, 0.18), transparent);
}

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
	opacity: 0;
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal {
	transform: translateY(28px);
}

.reveal-left {
	transform: translateX(-34px);
}

.reveal-right {
	transform: translateX(34px);
}

.reveal-scale {
	transform: scale(0.94);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
	opacity: 1;
	transform: none;
}

.stagger-children > * {
	transition-delay: calc(var(--i, 0) * 90ms);
}

.text-shimmer {
	background: linear-gradient(120deg, #4a3728 10%, #b08a2e 36%, #4a3728 62%);
	background-size: 240% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: textShimmer 4.4s linear infinite;
}

.marquee {
	overflow: hidden;
	white-space: nowrap;
}

.marquee-track {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	min-width: max-content;
	animation: marqueeDrift 28s linear infinite;
}

.promise-icon {
	width: 3.5rem;
	height: 3.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 237, 227, 0.85));
	box-shadow: 0 12px 30px rgba(51, 34, 26, 0.08);
}

.ingredient-card,
.note-card,
.ritual-card,
.category-card {
	border: 1px solid rgba(230, 217, 198, 0.8);
	background: rgba(255, 255, 255, 0.8);
	box-shadow: var(--shadow-soft);
}

.dark-panel {
	background:
		radial-gradient(circle at top right, rgba(212, 168, 67, 0.12), transparent 28%),
		linear-gradient(160deg, #3c2c20 0%, #33221a 100%);
	color: #f7f0e7;
}

.product-card {
	border-radius: 1.5rem;
	overflow: hidden;
	border: 1px solid rgba(230, 217, 198, 0.82);
	box-shadow: 0 16px 40px rgba(51, 34, 26, 0.06);
	transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s ease;
}

.product-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-card);
	border-color: rgba(163, 191, 163, 0.85);
}

.product-card__media {
	overflow: hidden;
	background: linear-gradient(145deg, #faf7f2, #f3ede3);
}

.product-card__media img {
	object-fit: contain;
	transition: transform 0.65s var(--ease-out), filter 0.45s ease;
}

.product-card:hover .product-card__media img {
	transform: scale(1.02);
	filter: saturate(1.05);
}

.product-card__overlay {
	background: linear-gradient(180deg, rgba(51, 34, 26, 0) 42%, rgba(51, 34, 26, 0.18) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.product-card:hover .product-card__overlay {
	opacity: 1;
}

.hover-line {
	position: relative;
}

.hover-line::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -0.15rem;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.group:hover .hover-line::after {
	transform: scaleX(1);
}

.float-badge {
	animation: floatBadge 3.8s ease-in-out infinite;
}

.aroma-glow {
	position: relative;
	overflow: hidden;
}

.aroma-glow::before {
	content: '';
	position: absolute;
	inset: -30% auto auto -20%;
	width: 10rem;
	height: 10rem;
	border-radius: 999px;
	opacity: 0.7;
	filter: blur(26px);
}

.aroma-glow--chamomile::before {
	background: rgba(212, 168, 67, 0.28);
}

.aroma-glow--geranium::before {
	background: rgba(242, 139, 154, 0.24);
}

.aroma-glow--mandarin::before {
	background: rgba(245, 158, 11, 0.24);
}

.counter-value {
	font-variant-numeric: tabular-nums;
}

.header-scrolled {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 28px rgba(51, 34, 26, 0.08);
	border-color: rgba(230, 217, 198, 0.9);
}

.grain-panel {
	position: relative;
	overflow: hidden;
}

.grain-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 25% 20%, rgba(92, 68, 48, 0.06) 0, rgba(92, 68, 48, 0.06) 1px, transparent 1px),
		radial-gradient(circle at 80% 65%, rgba(163, 191, 163, 0.06) 0, rgba(163, 191, 163, 0.06) 1px, transparent 1px);
	background-size: 180px 180px, 220px 220px;
	pointer-events: none;
	opacity: 0.45;
}

@keyframes toastSlideIn {
	from {
		transform: translateX(1.5rem);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes cartButtonSweep {
	from {
		transform: translateX(-140%);
	}
	to {
		transform: translateX(140%);
	}
}

@keyframes cartButtonSuccess {
	0% {
		transform: scale(0.98);
	}
	45% {
		transform: scale(1.03);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes cartBadgeBump {
	0% {
		transform: scale(0.86);
	}
	40% {
		transform: scale(1.18);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes milotoHeroFloat {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(3.8rem, -4rem, 0) scale(1.14);
	}
}

@keyframes milotoHeroAurora {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.88;
	}
	50% {
		transform: translate3d(4rem, -1.6rem, 0) scale(1.07);
		opacity: 1;
	}
}

@keyframes milotoHeroBeam {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(18deg) scaleY(1);
		opacity: 0.46;
	}
	50% {
		transform: translate3d(-1.6rem, 1.2rem, 0) rotate(24deg) scaleY(1.08);
		opacity: 0.74;
	}
}

@keyframes milotoHeroBeamTwo {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(-20deg) scaleY(1);
		opacity: 0.38;
	}
	50% {
		transform: translate3d(1.4rem, 1rem, 0) rotate(-26deg) scaleY(1.1);
		opacity: 0.68;
	}
}

@keyframes milotoHeroPulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.75;
	}
	50% {
		transform: scale(1.08);
		opacity: 0.22;
	}
}

@keyframes milotoHeroPetal {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(-18deg);
	}
	50% {
		transform: translate3d(-2.4rem, 2rem, 0) rotate(-4deg);
	}
}

@keyframes milotoHeroPetalTwo {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(16deg);
	}
	50% {
		transform: translate3d(2.8rem, -1.9rem, 0) rotate(6deg);
	}
}

@keyframes milotoHeroPetalThree {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(-8deg);
	}
	50% {
		transform: translate3d(-2rem, -1.5rem, 0) rotate(6deg);
	}
}

@keyframes milotoHeroDrift {
	0% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(2.4rem, -2rem, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes textShimmer {
	from {
		background-position: 0% center;
	}
	to {
		background-position: 240% center;
	}
}

@keyframes marqueeDrift {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes floatBadge {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-3px);
	}
}

@media (max-width: 767px) {
	.miloto-hero__beam,
	.miloto-hero__petal,
	.miloto-hero__ring {
		display: none;
	}

	.marquee-track {
		gap: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.miloto-hero__orb,
	.miloto-hero__ring,
	.miloto-hero__grain,
	.miloto-hero__aurora,
	.miloto-hero__beam,
	.miloto-hero__petal,
	.float-badge,
	.marquee-track,
	.text-shimmer,
	.toast-enter,
	.cart-count-bump {
		animation: none !important;
	}

	.reveal,
	.reveal-left,
	.reveal-right,
	.reveal-scale {
		opacity: 1;
		transform: none;
		transition: none;
	}
}