body {
	box-sizing: border-box;
}

.font-heading {
	font-family: "Cormorant Garamond", Georgia, serif;
}

.font-body {
	font-family: "Outfit", sans-serif;
}

.gradient-bg {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.gold-gradient {
	background: linear-gradient(135deg, #d4af37, #f4e4bc, #d4af37);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.oil-drop {
	animation: float 3s ease-in-out infinite;
}

.oil-drop:nth-child(2) {
	animation-delay: 0.5s;
}

.oil-drop:nth-child(3) {
	animation-delay: 1s;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% center;
	}

	100% {
		background-position: 200% center;
	}
}

.shimmer-btn {
	background: linear-gradient(90deg, #d4af37, #f4e4bc, #d4af37, #f4e4bc, #d4af37);
	background-size: 200% auto;
	animation: shimmer 3s linear infinite;
}

.card-hover {
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-hover:hover {
	transform: translateY(-8px);
}

.logo-placeholder {
	border: 2px dashed #d4af37;
	background: rgba(212, 175, 55, 0.1);
	transition: all 0.3s ease;
}

.logo-placeholder:hover {
	background: rgba(212, 175, 55, 0.2);
	border-color: #f4e4bc;
}

.product-placeholder {
	border: 2px dashed #d4af37;
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(15, 52, 96, 0.3));
	transition: all 0.3s ease;
}

.product-placeholder:hover {
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(15, 52, 96, 0.4));
}

.organic-badge {
	background: linear-gradient(135deg, #2d5a27, #4a7c43);
}

@view-transition {
	navigation: auto;
}