reroute-js 0.46.0 → 1.0.0-alpha.0

package/_/store/src/client/theme.css

@@ -1,6 +1,4 @@
-@import "tailwindcss";
-
-@theme {
+:root {
 	/* Primary Brand Colors */
 	--color-primary-50: #eff6ff;
 	--color-primary-100: #dbeafe;
@@ -14,12 +12,28 @@
 	--color-primary-900: #1e3a8a;
 	--color-primary-950: #172554;
 
+	/* Neutrals */
+	--color-gray-50: #f9fafb;
+	--color-gray-100: #f3f4f6;
+	--color-gray-200: #e5e7eb;
+	--color-gray-300: #d1d5db;
+	--color-gray-600: #4b5563;
+	--color-gray-700: #374151;
+	--color-gray-900: #111827;
+
+	/* Semantic */
+	--color-red-50: #fef2f2;
+	--color-red-600: #dc2626;
+	--color-green-600: #16a34a;
+
 	/* Custom Shadows */
 	--shadow-soft:
 		0 2px 15px -3px rgb(0 0 0 / 0.07), 0 10px 20px -2px rgb(0 0 0 / 0.04);
 	--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
 	--shadow-card-hover:
 		0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
+	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
 
 	/* Custom Animations */
 	--animate-fade-in: fadeIn 0.3s ease-in-out;
@@ -58,17 +72,149 @@
 	}
 }
 
-@layer base {
-	body {
-		@apply antialiased bg-gray-50 text-gray-900;
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+/* Base */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	border-color: #e5e7eb;
+}
+
+body {
+	margin: 0;
+	background: #f9fafb;
+	color: #111827;
+	-webkit-font-smoothing: antialiased;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+img {
+	display: block;
+	max-width: 100%;
+}
+
+button,
+input,
+select {
+	font: inherit;
+}
+
+/* Layout */
+.page-main {
+	max-width: 80rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 2rem 1rem;
+}
+
+@media (min-width: 640px) {
+	.page-main {
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
 	}
+}
 
-	* {
-		@apply border-gray-200;
+@media (min-width: 1024px) {
+	.page-main {
+		padding-left: 2rem;
+		padding-right: 2rem;
 	}
 }
 
-@utility btn {
+.page-main-lg {
+	padding-top: 4rem;
+	padding-bottom: 4rem;
+}
+
+.container-custom {
+	max-width: 80rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+	.container-custom {
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
+	}
+}
+
+@media (min-width: 1024px) {
+	.container-custom {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
+/* Header */
+.site-header {
+	position: sticky;
+	top: 0;
+	z-index: 50;
+	background-color: white;
+	border-bottom: 1px solid var(--color-gray-200);
+	box-shadow: var(--shadow-sm);
+}
+
+.header-inner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 4rem;
+}
+
+.header-logo {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: var(--color-primary-600);
+	transition: color 0.15s;
+}
+
+.header-logo:hover {
+	color: var(--color-primary-700);
+}
+
+.header-logo-icon {
+	font-size: 1.875rem;
+}
+
+.header-nav {
+	display: flex;
+	align-items: center;
+	gap: 2rem;
+}
+
+.nav-link {
+	color: var(--color-gray-600);
+	font-weight: 500;
+	transition: color 0.15s;
+}
+
+.nav-link:hover {
+	color: var(--color-primary-600);
+}
+
+/* Buttons */
+.btn {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -76,87 +222,155 @@
 	border-radius: 0.5rem;
 	font-weight: 600;
 	transition: all 0.2s;
+	border: none;
+	cursor: pointer;
+}
 
-	&:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
+.btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
 }
 
-@utility btn-primary {
+.btn-primary {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.75rem 1.5rem;
+	border-radius: 0.5rem;
+	font-weight: 600;
+	transition: all 0.2s;
+	border: none;
+	cursor: pointer;
 	background-color: var(--color-primary-600);
 	color: white;
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	box-shadow: var(--shadow-sm);
+}
 
-	&:hover:not(:disabled) {
-		background-color: var(--color-primary-700);
-		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-		transform: translateY(-1px);
-	}
+.btn-primary:hover:not(:disabled) {
+	background-color: var(--color-primary-700);
+	box-shadow: var(--shadow-md);
+	transform: translateY(-1px);
+}
 
-	&:active:not(:disabled) {
-		background-color: var(--color-primary-800);
-	}
+.btn-primary:active:not(:disabled) {
+	background-color: var(--color-primary-800);
+}
+
+.btn-primary:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
 }
 
-@utility btn-secondary {
+.btn-secondary {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.75rem 1.5rem;
+	border-radius: 0.5rem;
+	font-weight: 600;
+	transition: all 0.2s;
+	cursor: pointer;
 	background-color: white;
 	color: var(--color-primary-600);
 	border: 2px solid var(--color-primary-600);
+}
 
-	&:hover:not(:disabled) {
-		background-color: var(--color-primary-50);
-		transform: translateY(-1px);
-	}
+.btn-secondary:hover:not(:disabled) {
+	background-color: var(--color-primary-50);
+	transform: translateY(-1px);
+}
 
-	&:active:not(:disabled) {
-		background-color: var(--color-primary-100);
-	}
+.btn-secondary:active:not(:disabled) {
+	background-color: var(--color-primary-100);
 }
 
-@utility btn-sm {
+.btn-secondary:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.btn-sm {
 	padding: 0.5rem 1rem;
 	font-size: 0.875rem;
 }
 
-@utility btn-lg {
+.btn-lg {
 	padding: 1rem 2rem;
 	font-size: 1.125rem;
 }
 
-@utility card {
+.btn-grow {
+	flex: 1;
+}
+
+.sort-btn {
+	padding: 0.5rem 1rem;
+	font-size: 0.875rem;
+	font-weight: 600;
+	border-radius: 0.5rem;
+	border: 1px solid var(--color-gray-300);
+	background-color: white;
+	color: var(--color-gray-700);
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.sort-btn:hover {
+	background-color: var(--color-gray-50);
+}
+
+.sort-btn.is-active {
+	background-color: var(--color-primary-600);
+	color: white;
+	border-color: var(--color-primary-600);
+}
+
+/* Cards */
+.card {
 	background-color: white;
 	border-radius: 0.75rem;
 	box-shadow: var(--shadow-card);
 	transition: all 0.2s;
 }
 
-@utility card-hover {
-	&:hover {
-		box-shadow: var(--shadow-card-hover);
-		transform: translateY(-4px);
-	}
+.card-hover:hover {
+	box-shadow: var(--shadow-card-hover);
+	transform: translateY(-4px);
+}
+
+.card-padded {
+	padding: 1.5rem;
 }
 
-@utility link {
+/* Links */
+.link {
 	color: var(--color-primary-600);
 	transition: color 0.15s;
+}
 
-	&:hover {
-		color: var(--color-primary-700);
-	}
+.link:hover {
+	color: var(--color-primary-700);
 }
 
-@utility link-muted {
-	color: rgb(75 85 99);
+.link-muted {
+	color: var(--color-gray-600);
 	transition: color 0.15s;
+}
 
-	&:hover {
-		color: rgb(17 24 39);
-	}
+.link-muted:hover {
+	color: var(--color-gray-900);
+}
+
+.link-semibold {
+	font-weight: 600;
+}
+
+.link-lg {
+	font-size: 1.125rem;
 }
 
-@utility badge {
+/* Badges */
+.badge {
 	display: inline-flex;
 	align-items: center;
 	padding: 0.25rem 0.75rem;
@@ -167,123 +381,721 @@
 	letter-spacing: 0.05em;
 }
 
-@utility badge-primary {
+.badge-primary {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.25rem 0.75rem;
+	border-radius: 9999px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
 	background-color: var(--color-primary-100);
 	color: var(--color-primary-700);
 }
 
-@utility badge-success {
+.badge-success {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.25rem 0.75rem;
+	border-radius: 9999px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
 	background-color: rgb(220 252 231);
 	color: rgb(21 128 61);
 }
 
-@utility input {
+/* Form controls */
+.input {
 	width: 100%;
 	padding: 0.625rem 1rem;
 	border-radius: 0.5rem;
-	border: 1px solid rgb(209 213 219);
+	border: 1px solid var(--color-gray-300);
 	outline: none;
 	transition: all 0.15s;
+}
 
-	&:focus {
-		border-color: var(--color-primary-500);
-		box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
-	}
+.input:focus {
+	border-color: var(--color-primary-500);
+	box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
 }
 
-@utility select {
+.input-grow {
+	flex: 1;
+	min-width: 250px;
+}
+
+.select {
 	width: 100%;
 	padding: 0.625rem 1rem;
 	border-radius: 0.5rem;
-	border: 1px solid rgb(209 213 219);
+	border: 1px solid var(--color-gray-300);
 	background-color: white;
 	cursor: pointer;
 	outline: none;
 	transition: all 0.15s;
-
-	&:focus {
-		border-color: var(--color-primary-500);
-		box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
-	}
 }
 
-@utility container-custom {
-	max-width: 80rem;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-
-	@media (min-width: 640px) {
-		padding-left: 1.5rem;
-		padding-right: 1.5rem;
-	}
+.select:focus {
+	border-color: var(--color-primary-500);
+	box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
+}
 
-	@media (min-width: 1024px) {
-		padding-left: 2rem;
-		padding-right: 2rem;
-	}
+.select-min {
+	min-width: 200px;
 }
 
-@utility section-heading {
+/* Typography / sections */
+.section-heading {
 	font-size: 1.875rem;
 	font-weight: 700;
-	color: rgb(17 24 39);
+	color: var(--color-gray-900);
 	margin-bottom: 0.5rem;
+}
 
-	@media (min-width: 768px) {
+@media (min-width: 768px) {
+	.section-heading {
 		font-size: 2.25rem;
 	}
 }
 
-@utility section-subheading {
+.section-heading-flush {
+	margin-bottom: 0;
+}
+
+.section-subheading {
 	font-size: 1.125rem;
-	color: rgb(107 114 128);
+	color: var(--color-gray-600);
 	margin-bottom: 2rem;
 }
 
-@utility product-grid {
+.section-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1.5rem;
+}
+
+.section-block {
+	margin-bottom: 4rem;
+}
+
+.page-title {
+	font-size: 2.25rem;
+	font-weight: 700;
+	color: var(--color-gray-900);
+	margin-bottom: 2rem;
+}
+
+/* Hero */
+.hero {
+	text-align: center;
+	padding: 3rem 0;
+	margin-bottom: 3rem;
+}
+
+.hero-title {
+	font-size: 3rem;
+	font-weight: 700;
+	color: var(--color-gray-900);
+	margin-bottom: 1rem;
+	line-height: 1.1;
+}
+
+@media (min-width: 768px) {
+	.hero-title {
+		font-size: 3.75rem;
+	}
+}
+
+.hero-lead {
+	font-size: 1.25rem;
+	color: var(--color-gray-600);
+	margin-bottom: 2rem;
+	max-width: 42rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.hero-actions {
+	display: flex;
+	gap: 1rem;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+/* Grids */
+.product-grid {
 	display: grid;
 	grid-template-columns: repeat(1, minmax(0, 1fr));
 	gap: 1.5rem;
+}
 
-	@media (min-width: 640px) {
+@media (min-width: 640px) {
+	.product-grid {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
+}
+
+@media (min-width: 1024px) {
+	.product-grid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+
+@media (min-width: 1280px) {
+	.product-grid {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+}
+
+.features-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 2rem;
+	margin-top: 3rem;
+	padding-top: 2rem;
+}
+
+@media (min-width: 768px) {
+	.features-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+@media (min-width: 1024px) {
+	.features-grid {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+}
+
+.category-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 2rem;
+	margin-bottom: 3rem;
+}
+
+@media (min-width: 640px) {
+	.category-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+@media (min-width: 1024px) {
+	.category-grid {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+}
+
+.not-found-links {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 1.5rem;
+	margin-top: 4rem;
+}
 
-	@media (min-width: 1024px) {
+@media (min-width: 768px) {
+	.not-found-links {
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 	}
+}
 
-	@media (min-width: 1280px) {
+.why-shop-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 2rem;
+}
+
+@media (min-width: 640px) {
+	.why-shop-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+@media (min-width: 1024px) {
+	.why-shop-grid {
 		grid-template-columns: repeat(4, minmax(0, 1fr));
 	}
 }
 
-@utility feature-card {
+/* Feature cards */
+.feature-card {
 	text-align: center;
 	padding: 1.5rem;
 	border-radius: 0.75rem;
 	transition: all 0.2s;
+}
+
+.feature-card:hover {
+	background-color: white;
+	box-shadow: var(--shadow-soft);
+}
+
+.feature-icon {
+	font-size: 3rem;
+	margin-bottom: 1rem;
+}
+
+.feature-title {
+	font-size: 1.25rem;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+	color: var(--color-gray-900);
+}
+
+.feature-text {
+	color: var(--color-gray-600);
+	line-height: 1.625;
+}
+
+/* Product card */
+.product-card {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.product-card-link {
+	display: block;
+	height: 100%;
+	color: inherit;
+}
+
+.product-card-image-wrap {
+	width: 100%;
+	height: 15rem;
+	background-color: var(--color-gray-50);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+}
+
+.product-card-image {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+	position: relative;
+	z-index: 10;
+	background-color: white;
+}
+
+.product-card-body {
+	padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	flex: 1;
+}
+
+.product-card-title {
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--color-gray-900);
+	line-height: 1.5;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	min-height: 3em;
+	transition: color 0.15s;
+}
+
+.product-card:hover .product-card-title {
+	color: var(--color-primary-600);
+}
+
+.product-card-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: auto;
+	padding-top: 0.5rem;
+}
+
+.price {
+	font-size: 1.25rem;
+	font-weight: 700;
+	color: var(--color-primary-600);
+}
+
+.price-lg {
+	font-size: 2.25rem;
+	font-weight: 700;
+	color: var(--color-primary-600);
+}
+
+.product-rating {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	font-size: 0.875rem;
+	color: var(--color-gray-600);
+}
+
+.product-rating-lg {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 1rem;
+	color: var(--color-gray-600);
+}
+
+.product-rating-star {
+	font-size: 1.5rem;
+}
+
+.product-rating-value {
+	font-weight: 600;
+	font-size: 1.25rem;
+}
+
+/* Category card */
+.category-card {
+	display: block;
+	padding: 2rem;
+	color: var(--color-gray-900);
+}
+
+.category-card-icon {
+	font-size: 3rem;
+	margin-bottom: 1rem;
+}
+
+.category-card-title {
+	font-size: 1.5rem;
+	font-weight: 700;
+	margin-bottom: 0.5rem;
+	text-transform: capitalize;
+	transition: color 0.15s;
+}
+
+.category-card:hover .category-card-title {
+	color: var(--color-primary-600);
+}
+
+.category-card-desc {
+	color: var(--color-gray-600);
+	font-size: 0.875rem;
+	margin-bottom: 1rem;
+}
+
+.category-card-cta {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+}
 
-	&:hover {
-		background-color: white;
-		box-shadow: var(--shadow-soft);
+/* Filter bar */
+.filter-bar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 1rem;
+	margin-bottom: 2rem;
+	padding: 1.5rem;
+	background-color: white;
+	border-radius: 0.75rem;
+	box-shadow: var(--shadow-card);
+}
+
+.filter-group {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.filter-label {
+	font-weight: 600;
+	color: var(--color-gray-700);
+}
+
+.filter-sort-group {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
+.filter-count {
+	margin-left: auto;
+	font-size: 0.875rem;
+	color: var(--color-gray-600);
+}
+
+/* Breadcrumb */
+.breadcrumb {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 0.875rem;
+	color: var(--color-gray-600);
+	margin-bottom: 2rem;
+	flex-wrap: wrap;
+}
+
+.breadcrumb-current {
+	color: var(--color-gray-900);
+}
+
+/* States */
+.state-loading {
+	text-align: center;
+	padding: 4rem 0;
+	color: var(--color-gray-600);
+	font-size: 1.125rem;
+}
+
+.state-loading-pulse {
+	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.state-error {
+	text-align: center;
+	padding: 3rem 0;
+	background-color: var(--color-red-50);
+	color: var(--color-red-600);
+	font-size: 1.125rem;
+	border-radius: 0.75rem;
+}
+
+.state-error-inline {
+	text-align: center;
+	padding: 3rem 0;
+	background-color: var(--color-red-50);
+	color: var(--color-red-600);
+	font-size: 1.125rem;
+	border-radius: 0.75rem;
+}
+
+.state-error-action {
+	margin-top: 1rem;
+}
+
+.state-empty {
+	text-align: center;
+	padding: 4rem 0;
+	color: var(--color-gray-600);
+	font-size: 1.125rem;
+}
+
+.state-empty-icon {
+	font-size: 3.75rem;
+	margin-bottom: 1rem;
+}
+
+.state-empty-action {
+	margin-bottom: 1rem;
+}
+
+/* Product detail */
+.product-detail-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 3rem;
+	margin-bottom: 4rem;
+}
+
+@media (min-width: 1024px) {
+	.product-detail-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 }
 
-@utility animate-in {
+.product-detail-image {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2rem;
+	min-height: 500px;
+}
+
+.product-detail-image-img {
+	max-width: 100%;
+	max-height: 500px;
+	object-fit: contain;
+	position: relative;
+	z-index: 10;
+}
+
+.product-detail-info {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.product-detail-title {
+	font-size: 2.25rem;
+	font-weight: 700;
+	color: var(--color-gray-900);
+	line-height: 1.1;
+}
+
+.product-detail-description {
+	font-size: 1.125rem;
+	color: var(--color-gray-700);
+	line-height: 1.625;
+}
+
+.product-actions {
+	display: flex;
+	gap: 1rem;
+	margin-top: 1rem;
+}
+
+.product-perks {
+	padding: 1rem;
+	background-color: var(--color-gray-50);
+	border-radius: 0.75rem;
+	font-size: 0.875rem;
+	color: var(--color-gray-600);
+}
+
+.product-perk {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.product-perk + .product-perk {
+	margin-top: 0.5rem;
+}
+
+.product-perk-check {
+	color: var(--color-green-600);
+	font-weight: 700;
+}
+
+/* Category page header */
+.category-header {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 0.5rem;
+}
+
+.category-header-icon {
+	font-size: 3rem;
+}
+
+/* Why shop block */
+.why-shop {
+	margin-top: 4rem;
+	padding: 2rem;
+	background-color: var(--color-gray-50);
+	border-radius: 0.75rem;
+	text-align: center;
+}
+
+.why-shop-title {
+	font-size: 1.5rem;
+	font-weight: 700;
+	margin-bottom: 1.5rem;
+	color: var(--color-gray-900);
+}
+
+.why-shop-item-icon {
+	font-size: 2.25rem;
+	margin-bottom: 0.5rem;
+}
+
+.why-shop-item-title {
+	font-weight: 600;
+	color: var(--color-gray-700);
+	margin-bottom: 0.25rem;
+}
+
+.why-shop-item-desc {
+	font-size: 0.875rem;
+	color: var(--color-gray-600);
+}
+
+/* 404 */
+.not-found-content {
+	max-width: 42rem;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+}
+
+.not-found-code {
+	font-size: 6rem;
+	font-weight: 700;
+	color: var(--color-primary-600);
+	margin-bottom: 1rem;
+	line-height: 1;
+}
+
+.not-found-title {
+	font-size: 2.25rem;
+	font-weight: 700;
+	color: var(--color-gray-900);
+	margin-bottom: 1rem;
+}
+
+.not-found-lead {
+	font-size: 1.25rem;
+	color: var(--color-gray-600);
+	margin-bottom: 2rem;
+}
+
+.not-found-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	justify-content: center;
+	margin-bottom: 3rem;
+}
+
+@media (min-width: 640px) {
+	.not-found-actions {
+		flex-direction: row;
+	}
+}
+
+.not-found-card-icon {
+	font-size: 2.25rem;
+	margin-bottom: 0.75rem;
+}
+
+.not-found-card-title {
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+
+.not-found-card-desc {
+	font-size: 0.875rem;
+	color: var(--color-gray-600);
+}
+
+/* Page intro */
+.page-intro {
+	margin-bottom: 2rem;
+}
+
+.page-intro-lg {
+	margin-bottom: 3rem;
+}
+
+/* Animations */
+.animate-in {
 	animation: var(--animate-fade-in);
 }
 
-@utility animate-slide-up {
+.animate-slide-up {
 	animation: var(--animate-slide-up);
 }
 
-@utility animate-scale {
+.animate-scale {
 	animation: var(--animate-scale-in);
 }
 
+.shadow-card {
+	box-shadow: var(--shadow-card);
+}
+
 /* View Transition API Configuration */
 ::view-transition-old(root) {
 	animation: 0.25s cubic-bezier(0.4, 0, 1, 1) both fade-out;