:root {
	--black: #1a1a1a;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
	@keyframes showBadge {
		0% {
			opacity: 0;
			transform: translateY(8px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.animate-show-badge {
		animation: showBadge 0.6s ease-out forwards;
	}
}
@keyframes scale-up {
	0% {
		transform: scale(0.95);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
.animate-scale-up {
	animation: scale-up 0.3s ease-out forwards;
}
#modalDetailBox {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	#modalDetailBox {
		max-width: 72rem; /* V3.12 product detail */
	}
}

/* V3.9 storefront refresh */
html { scroll-behavior: smooth; }
.home-grid {
  background-image:
    linear-gradient(to right, rgba(17, 24, 39, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.form-control {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: .8rem;
  background: #fff;
  padding: .75rem .9rem;
  color: #111827;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-control:focus {
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* V3.11 catalog/detail polish */
.product-description p + p { padding-top: .15rem; }
.product-description p { white-space: pre-line; }


/* V3.12 product detail + checkout */
.detail-image-grid {
  background-image:
    linear-gradient(to right, rgba(17,24,39,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.035) 1px, transparent 1px);
  background-size: 22px 22px;
}
.checkout-input {
  min-height: 48px;
  border-radius: 1rem;
  border-color: #e5e7eb;
  background: #f9fafb;
  padding-left: 1rem;
  padding-right: 1rem;
}
.checkout-input:hover { border-color: #d1d5db; }
.checkout-input:focus { background: #fff; }
@media (max-width: 767px) {
  #modalBox, #modalDetailBox { max-height: 94vh; }
  #modalCheckout, #modalDetail { overscroll-behavior: contain; }
}