/*
   Dealzenohub Theme - CouponFollow Inspired Design (2025-2026)
   Mobile-First, Responsive, Performance-Optimized
   Using: CSS Layers, Container Queries, CSS Grid, Flexbox
   ========================================================================== */

/* ===== CSS Layers for Cascade Management ===== */
@layer reset, base, layout, components, utilities;

/* ===== Layer: Reset ===== */
@layer reset {
	*,
	*::before,
	*::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	body {
		min-height: 100dvh;
	}

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

	input, button, textarea, select {
		font: inherit;
		color: inherit;
	}

	button {
		cursor: pointer;
		border: none;
		background: none;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	ul, ol {
		list-style: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
}

/* ===== Layer: Base ===== */
@layer base {
	:root {
		/* Colors - CouponFollow Inspired */
		--color-primary: #00B050;
		--color-primary-dark: #008C3A;
		--color-primary-light: #4CD964;
		--color-secondary: #1E3A8A;
		--color-secondary-dark: #0F172A;
		--color-accent-red: #EF4444;
		--color-accent-gold: #FBBF24;
		--color-accent-blue: #3B82F6;

		--color-neutral-50: #FAFAFA;
		--color-neutral-100: #F3F4F6;
		--color-neutral-200: #E5E7EB;
		--color-neutral-300: #D1D5DB;
		--color-neutral-400: #9CA3AF;
		--color-neutral-500: #6B7280;
		--color-neutral-600: #4B5563;
		--color-neutral-700: #374151;
		--color-neutral-800: #1F2937;
		--color-neutral-900: #111827;

		/* Typography */
		--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		--font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

		/* Fluid Typography */
		--font-size-xs: clamp(0.75rem, 2vw, 0.875rem);
		--font-size-sm: clamp(0.875rem, 2.5vw, 1rem);
		--font-size-base: clamp(1rem, 3vw, 1.125rem);
		--font-size-lg: clamp(1.125rem, 3.5vw, 1.375rem);
		--font-size-xl: clamp(1.375rem, 4vw, 1.75rem);
		--font-size-2xl: clamp(1.75rem, 5vw, 2.25rem);
		--font-size-3xl: clamp(2.25rem, 6vw, 3rem);

		/* Spacing */
		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 0.75rem;
		--space-4: 1rem;
		--space-5: 1.25rem;
		--space-6: 1.5rem;
		--space-8: 2rem;
		--space-10: 2.5rem;
		--space-12: 3rem;
		--space-16: 4rem;
		--space-20: 5rem;

		/* Border Radius */
		--radius-sm: 0.375rem;
		--radius-md: 0.5rem;
		--radius-lg: 0.75rem;
		--radius-xl: 1rem;
		--radius-2xl: 1.5rem;
		--radius-full: 9999px;

		/* Shadows */
		--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

		/* Transitions */
		--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
		--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
		--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

		/* Container Queries */
		--container-xs: 20rem;
		--container-sm: 24rem;
		--container-md: 28rem;
		--container-lg: 32rem;
		--container-xl: 36rem;
		--container-2xl: 42rem;
	}

	body {
		font-family: var(--font-family-base);
		font-size: var(--font-size-base);
		line-height: 1.6;
		color: var(--color-neutral-900);
		background-color: var(--color-neutral-50);
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-family-heading);
		font-weight: 700;
		line-height: 1.2;
	}

	h1 { font-size: var(--font-size-3xl); }
	h2 { font-size: var(--font-size-2xl); }
	h3 { font-size: var(--font-size-xl); }
	h4 { font-size: var(--font-size-lg); }
	h5 { font-size: var(--font-size-base); }
	h6 { font-size: var(--font-size-sm); }

	p {
		margin-bottom: var(--space-4);
	}

	a {
		color: var(--color-primary);
		transition: color var(--transition-fast);

		&:hover {
			color: var(--color-primary-dark);
		}
	}
}

/* ===== Layer: Layout ===== */
@layer layout {
	.container {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--space-4);
		padding-right: var(--space-4);

		@media (min-width: 640px) {
			max-width: 640px;
		}

		@media (min-width: 768px) {
			max-width: 768px;
			padding-left: var(--space-6);
			padding-right: var(--space-6);
		}

		@media (min-width: 1024px) {
			max-width: 1024px;
		}

		@media (min-width: 1280px) {
			max-width: 1280px;
		}
	}

	.site {
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
	}

	main {
		flex: 1;
		width: 100%;
	}

	.layout-sidebar {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-8);

		@media (min-width: 768px) {
			grid-template-columns: 1fr 300px;
		}

		@media (min-width: 1024px) {
			grid-template-columns: 1fr 320px;
		}
	}

	.layout-sidebar-content {
		min-width: 0;
	}

	.layout-sidebar-aside {
		display: none;

		@media (min-width: 768px) {
			display: block;
		}
	}
}

/* ===== Layer: Components ===== */
@layer components {
	/* ===== Header ===== */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 1000;
		background-color: var(--color-neutral-900);
		color: white;
		border-bottom: 2px solid var(--color-primary);
		box-shadow: var(--shadow-md);
	}

	.site-header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-3) var(--space-4);
		gap: var(--space-4);

		@media (min-width: 768px) {
			padding: var(--space-4) var(--space-6);
		}
	}

	.site-branding {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		font-weight: 700;
		font-size: var(--font-size-lg);
		color: white;
		text-decoration: none;
		flex-shrink: 0;

		&:hover {
			color: var(--color-primary);
		}
	}

	.site-branding-logo {
		width: 32px;
		height: 32px;
		background-color: var(--color-primary);
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 900;
		color: white;
		font-size: var(--font-size-sm);
	}

	/* ===== Navigation ===== */
	.site-navigation {
		display: none;
		align-items: center;
		gap: var(--space-6);

		@media (min-width: 768px) {
			display: flex;
		}
	}

	.site-navigation a {
		color: white;
		font-size: var(--font-size-sm);
		font-weight: 500;
		transition: color var(--transition-fast);

		&:hover {
			color: var(--color-primary);
		}
	}

	/* ===== Search Bar ===== */
	.hero-search-form {
		display: flex;
		gap: var(--space-2);
		width: 100%;
		max-width: 400px;
		flex: 1;

		@media (max-width: 767px) {
			max-width: none;
		}
	}

	.hero-search-field {
		flex: 1;
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--color-neutral-300);
		border-radius: var(--radius-lg);
		font-size: var(--font-size-sm);
		background-color: white;
		transition: border-color var(--transition-fast);

		&:focus {
			outline: none;
			border-color: var(--color-primary);
			box-shadow: 0 0 0 3px rgba(0, 176, 80, 0.1);
		}

		&::placeholder {
			color: var(--color-neutral-500);
		}
	}

	.hero-search-submit {
		padding: var(--space-3) var(--space-5);
		background-color: var(--color-primary);
		color: white;
		border-radius: var(--radius-lg);
		font-weight: 600;
		font-size: var(--font-size-sm);
		transition: background-color var(--transition-fast);
		white-space: nowrap;

		&:hover {
			background-color: var(--color-primary-dark);
		}

		&:active {
			transform: scale(0.98);
		}
	}

	/* ===== Auth Links ===== */
	.header-auth {
		display: flex;
		gap: var(--space-3);
		align-items: center;

		@media (max-width: 767px) {
			display: none;
		}
	}

	.header-auth a {
		font-size: var(--font-size-sm);
		padding: var(--space-2) var(--space-4);
		border-radius: var(--radius-md);
		transition: all var(--transition-fast);

		&:first-child {
			color: white;

			&:hover {
				background-color: rgba(255, 255, 255, 0.1);
			}
		}

		&:last-child {
			background-color: var(--color-primary);
			color: white;
			font-weight: 600;

			&:hover {
				background-color: var(--color-primary-dark);
			}
		}
	}

	/* ===== Promotional Banner ===== */
	.promo-banner {
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
		color: white;
		padding: var(--space-3) var(--space-4);
		text-align: center;
		font-size: var(--font-size-sm);
		font-weight: 600;
		animation: slideDown 0.5s ease-out;
	}

	@keyframes slideDown {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* ===== Coupon Card ===== */
	.coupon-card {
		background-color: white;
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		transition: all var(--transition-base);
		display: flex;
		flex-direction: column;
		height: 100%;
		position: relative;

		&:hover {
			box-shadow: var(--shadow-lg);
			transform: translateY(-4px);
		}

		&.expired {
			opacity: 0.6;
		}
	}

	.coupon-card-inner {
		display: flex;
		flex-direction: column;
		padding: var(--space-4);
		flex: 1;
	}

	.coupon-store-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64px;
		height: 64px;
		background-color: var(--color-neutral-100);
		border-radius: var(--radius-md);
		margin-bottom: var(--space-4);
		flex-shrink: 0;

		img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
	}

	.logo-placeholder {
		font-weight: 700;
		font-size: var(--font-size-lg);
		color: var(--color-primary);
	}

	.coupon-discount-badge {
		display: inline-block;
		background-color: var(--color-accent-red);
		color: white;
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-md);
		font-weight: 700;
		font-size: var(--font-size-lg);
		margin-bottom: var(--space-3);
		width: fit-content;
	}

	.coupon-title {
		font-size: var(--font-size-base);
		font-weight: 700;
		margin-bottom: var(--space-2);
		line-height: 1.3;

		a {
			color: var(--color-neutral-900);

			&:hover {
				color: var(--color-primary);
			}
		}
	}

	.coupon-description {
		font-size: var(--font-size-sm);
		color: var(--color-neutral-600);
		margin-bottom: var(--space-3);
		line-height: 1.5;
	}

	.coupon-meta {
		display: flex;
		gap: var(--space-2);
		margin-bottom: var(--space-4);
		flex-wrap: wrap;
		font-size: var(--font-size-xs);
	}

	.coupon-expiry {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		color: var(--color-neutral-600);

		&.ending-soon {
			color: var(--color-accent-red);
			font-weight: 600;
		}

		&.expired {
			color: var(--color-accent-red);
		}

		svg {
			width: 12px;
			height: 12px;
		}
	}

	.coupon-actions {
		display: flex;
		gap: var(--space-2);
		margin-top: auto;
	}

	.copy-coupon-btn {
		flex: 1;
		padding: var(--space-3) var(--space-4);
		background-color: var(--color-primary);
		color: white;
		border-radius: var(--radius-md);
		font-weight: 600;
		font-size: var(--font-size-sm);
		transition: all var(--transition-fast);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		cursor: pointer;

		&:hover {
			background-color: var(--color-primary-dark);
		}

		&:active {
			transform: scale(0.98);
		}

		&.copied {
			background-color: var(--color-accent-gold);
			animation: pulse 0.5s ease-out;
		}

		svg {
			width: 14px;
			height: 14px;
		}
	}

	@keyframes pulse {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.05); }
	}

	.visit-store-btn {
		flex: 1;
		padding: var(--space-3) var(--space-4);
		background-color: var(--color-neutral-200);
		color: var(--color-neutral-900);
		border-radius: var(--radius-md);
		font-weight: 600;
		font-size: var(--font-size-sm);
		transition: all var(--transition-fast);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);

		&:hover {
			background-color: var(--color-neutral-300);
		}

		svg {
			width: 12px;
			height: 12px;
		}
	}

	.coupon-expired-overlay {
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-lg);
	}

	.expired-label {
		background-color: var(--color-accent-red);
		color: white;
		padding: var(--space-2) var(--space-4);
		border-radius: var(--radius-md);
		font-weight: 700;
		font-size: var(--font-size-lg);
	}

	/* ===== Exclusive Badge ===== */
	.exclusive-badge {
		position: absolute;
		top: var(--space-3);
		right: var(--space-3);
		background-color: var(--color-accent-gold);
		color: var(--color-neutral-900);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-full);
		font-size: var(--font-size-xs);
		font-weight: 700;
		display: flex;
		align-items: center;
		gap: var(--space-1);
		box-shadow: var(--shadow-md);

		&::before {
			content: '★';
			font-size: var(--font-size-sm);
		}
	}

	/* ===== Store Card ===== */
	.store-card {
		background-color: white;
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		transition: all var(--transition-base);
		text-align: center;

		&:hover {
			box-shadow: var(--shadow-lg);
			transform: translateY(-4px);
		}
	}

	.store-card-inner {
		padding: var(--space-6) var(--space-4);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
	}

	.store-card-logo {
		width: 80px;
		height: 80px;
		background-color: var(--color-neutral-100);
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
	}

	.store-title {
		font-size: var(--font-size-base);
		font-weight: 700;

		a {
			color: var(--color-neutral-900);

			&:hover {
				color: var(--color-primary);
			}
		}
	}

	.store-meta {
		font-size: var(--font-size-sm);
		color: var(--color-neutral-600);
	}

	.store-actions {
		width: 100%;
		display: flex;
		gap: var(--space-2);
	}

	/* ===== Buttons ===== */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-5);
		border-radius: var(--radius-lg);
		font-weight: 600;
		font-size: var(--font-size-sm);
		transition: all var(--transition-fast);
		cursor: pointer;
		border: none;
		text-decoration: none;
		white-space: nowrap;

		&:hover {
			transform: translateY(-2px);
		}

		&:active {
			transform: translateY(0);
		}
	}

	.btn--primary {
		background-color: var(--color-primary);
		color: white;

		&:hover {
			background-color: var(--color-primary-dark);
		}
	}

	.btn--secondary {
		background-color: var(--color-neutral-200);
		color: var(--color-neutral-900);

		&:hover {
			background-color: var(--color-neutral-300);
		}
	}

	.btn--ghost {
		background-color: transparent;
		color: var(--color-primary);
		border: 1px solid var(--color-primary);

		&:hover {
			background-color: rgba(0, 176, 80, 0.1);
		}
	}

	.btn--lg {
		padding: var(--space-4) var(--space-6);
		font-size: var(--font-size-base);
	}

	/* ===== Tabs ===== */
	.tab-buttons {
		display: flex;
		gap: var(--space-2);
		margin-bottom: var(--space-6);
		border-bottom: 2px solid var(--color-neutral-200);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;

		@media (max-width: 640px) {
			margin-bottom: var(--space-4);
		}
	}

	.tab-button {
		padding: var(--space-3) var(--space-4);
		background-color: transparent;
		color: var(--color-neutral-600);
		border: none;
		border-bottom: 3px solid transparent;
		font-weight: 600;
		font-size: var(--font-size-sm);
		cursor: pointer;
		transition: all var(--transition-fast);
		white-space: nowrap;

		&:hover {
			color: var(--color-primary);
		}

		&.active {
			color: var(--color-primary);
			border-bottom-color: var(--color-primary);
		}
	}

	/* ===== Coupons Container ===== */
	.coupons-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: var(--space-4);

		@media (max-width: 640px) {
			grid-template-columns: 1fr;
			gap: var(--space-3);
		}

		@media (min-width: 641px) and (max-width: 1023px) {
			grid-template-columns: repeat(2, 1fr);
		}

		&.list-view {
			grid-template-columns: 1fr;

			.coupon-card-inner {
				flex-direction: row;
				align-items: center;
				gap: var(--space-4);
			}

			.coupon-store-logo {
				margin-bottom: 0;
				flex-shrink: 0;
			}

			.coupon-content {
				flex: 1;
				min-width: 0;
			}

			.coupon-actions {
				flex-direction: column;
				margin-top: 0;
				align-self: flex-start;
			}
		}
	}

	/* ===== View Toggle ===== */
	.view-toggle {
		display: flex;
		gap: var(--space-2);
		margin-bottom: var(--space-6);
		justify-content: flex-end;

		@media (max-width: 640px) {
			display: none;
		}
	}

	.view-btn {
		padding: var(--space-2) var(--space-3);
		background-color: var(--color-neutral-200);
		color: var(--color-neutral-600);
		border-radius: var(--radius-md);
		border: none;
		cursor: pointer;
		transition: all var(--transition-fast);
		font-size: var(--font-size-sm);

		&:hover {
			background-color: var(--color-neutral-300);
		}

		&.active {
			background-color: var(--color-primary);
			color: white;
		}

		svg {
			width: 16px;
			height: 16px;
		}
	}

	/* ===== Categories ===== */
	.categories-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: var(--space-4);
		margin-bottom: var(--space-8);

		@media (max-width: 640px) {
			grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
			gap: var(--space-3);
		}
	}

	.category-card {
		background-color: white;
		border-radius: var(--radius-lg);
		padding: var(--space-4);
		text-align: center;
		box-shadow: var(--shadow-sm);
		transition: all var(--transition-base);
		cursor: pointer;

		&:hover {
			box-shadow: var(--shadow-lg);
			transform: translateY(-4px);
		}

		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-2);
			color: var(--color-neutral-900);
			text-decoration: none;
		}
	}

	.category-icon {
		font-size: var(--font-size-2xl);
	}

	.category-name {
		font-weight: 600;
		font-size: var(--font-size-sm);
	}

	/* ===== Trending Searches ===== */
	.trending-searches {
		margin-bottom: var(--space-8);
		padding: var(--space-6);
		background-color: white;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
	}

	.trending-title {
		font-size: var(--font-size-lg);
		font-weight: 700;
		margin-bottom: var(--space-4);
	}

	.trending-tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.trending-tag {
		display: inline-block;
		padding: var(--space-2) var(--space-4);
		background-color: var(--color-neutral-100);
		color: var(--color-primary);
		border-radius: var(--radius-full);
		font-size: var(--font-size-sm);
		font-weight: 500;
		transition: all var(--transition-fast);
		text-decoration: none;

		&:hover {
			background-color: var(--color-primary);
			color: white;
		}
	}

	/* ===== Newsletter Section ===== */
	.newsletter-section {
		background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
		color: white;
		padding: var(--space-8) var(--space-4);
		border-radius: var(--radius-xl);
		text-align: center;
		margin-bottom: var(--space-8);
	}

	.newsletter-title {
		font-size: var(--font-size-xl);
		font-weight: 700;
		margin-bottom: var(--space-2);
	}

	.newsletter-description {
		font-size: var(--font-size-sm);
		margin-bottom: var(--space-6);
		opacity: 0.9;
	}

	.newsletter-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		max-width: 400px;
		margin: 0 auto;

		@media (min-width: 640px) {
			flex-direction: row;
		}
	}

	.newsletter-email {
		flex: 1;
		padding: var(--space-3) var(--space-4);
		border: none;
		border-radius: var(--radius-lg);
		font-size: var(--font-size-sm);

		&::placeholder {
			color: var(--color-neutral-400);
		}
	}

	.newsletter-submit {
		padding: var(--space-3) var(--space-6);
		background-color: var(--color-primary);
		color: white;
		border: none;
		border-radius: var(--radius-lg);
		font-weight: 600;
		font-size: var(--font-size-sm);
		cursor: pointer;
		transition: background-color var(--transition-fast);
		white-space: nowrap;

		&:hover {
			background-color: var(--color-primary-dark);
		}
	}

	/* ===== FAQ ===== */
	.faq-items {
		background-color: white;
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		margin-bottom: var(--space-8);
	}

	.faq-item {
		border-bottom: 1px solid var(--color-neutral-200);

		&:last-child {
			border-bottom: none;
		}

		&.active {
			.faq-question {
				background-color: var(--color-neutral-100);
				color: var(--color-primary);
			}

			.faq-answer {
				display: block;
			}
		}
	}

	.faq-question {
		padding: var(--space-4);
		background-color: white;
		color: var(--color-neutral-900);
		border: none;
		width: 100%;
		text-align: left;
		font-weight: 600;
		font-size: var(--font-size-base);
		cursor: pointer;
		transition: all var(--transition-fast);
		display: flex;
		justify-content: space-between;
		align-items: center;

		&:hover {
			background-color: var(--color-neutral-50);
		}

		&::after {
			content: '▼';
			font-size: var(--font-size-xs);
			transition: transform var(--transition-fast);
		}
	}

	.faq-item.active .faq-question::after {
		transform: rotate(180deg);
	}

	.faq-answer {
		display: none;
		padding: var(--space-4);
		background-color: var(--color-neutral-50);
		color: var(--color-neutral-700);
		line-height: 1.6;
	}

	/* ===== Breadcrumbs ===== */
	.breadcrumbs-wrapper {
		margin-bottom: var(--space-6);
	}

	.breadcrumbs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		font-size: var(--font-size-sm);
		color: var(--color-neutral-600);

		a {
			color: var(--color-primary);

			&:hover {
				text-decoration: underline;
			}
		}

		span {
			color: var(--color-neutral-400);
		}
	}

	/* ===== Pagination ===== */
	.pagination {
		display: flex;
		justify-content: center;
		gap: var(--space-2);
		margin-top: var(--space-8);
		flex-wrap: wrap;
	}

	.pagination a,
	.pagination span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 40px;
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-md);
		font-size: var(--font-size-sm);
		font-weight: 500;
		transition: all var(--transition-fast);
	}

	.pagination a {
		background-color: var(--color-neutral-200);
		color: var(--color-neutral-900);
		text-decoration: none;

		&:hover {
			background-color: var(--color-primary);
			color: white;
		}
	}

	.pagination .current {
		background-color: var(--color-primary);
		color: white;
	}

	/* ===== Footer ===== */
	.site-footer {
		background-color: var(--color-neutral-900);
		color: white;
		padding: var(--space-8) var(--space-4);
		margin-top: auto;
	}

	.footer-content {
		max-width: 1280px;
		margin: 0 auto;
	}

	.footer-widgets {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: var(--space-8);
		margin-bottom: var(--space-8);

		@media (max-width: 640px) {
			grid-template-columns: 1fr;
			gap: var(--space-6);
		}
	}

	.footer-widget-area {
		h3, h4 {
			color: white;
			margin-bottom: var(--space-4);
		}

		a {
			color: var(--color-neutral-300);
			font-size: var(--font-size-sm);

			&:hover {
				color: var(--color-primary);
			}
		}

		ul {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
		}
	}

	.footer-bottom {
		border-top: 1px solid var(--color-neutral-700);
		padding-top: var(--space-6);
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-4);
		flex-wrap: wrap;

		@media (max-width: 640px) {
			flex-direction: column;
			text-align: center;
		}
	}

	.site-info {
		font-size: var(--font-size-sm);
		color: var(--color-neutral-400);
	}

	.footer-navigation a {
		color: var(--color-neutral-300);
		margin-right: var(--space-6);
		font-size: var(--font-size-sm);

		&:hover {
			color: var(--color-primary);
		}
	}

	/* ===== 404 Page ===== */
	.error-404 {
		text-align: center;
		padding: var(--space-12) var(--space-4);
	}

	.error-404-title {
		font-size: var(--font-size-3xl);
		font-weight: 900;
		color: var(--color-accent-red);
		margin-bottom: var(--space-4);
	}

	.error-404-message {
		font-size: var(--font-size-lg);
		margin-bottom: var(--space-6);
	}

	/* ===== Archive Header ===== */
	.archive-header {
		margin-bottom: var(--space-8);
		padding-bottom: var(--space-6);
		border-bottom: 2px solid var(--color-neutral-200);
	}

	.archive-title {
		margin-bottom: var(--space-2);
	}

	.archive-description {
		color: var(--color-neutral-600);
		font-size: var(--font-size-base);
	}

	/* ===== Store Header ===== */
	.store-header {
		background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
		color: white;
		padding: var(--space-8) var(--space-4);
		margin-bottom: var(--space-8);
		border-radius: var(--radius-xl);
	}

	.store-header-inner {
		display: flex;
		align-items: flex-start;
		gap: var(--space-6);

		@media (max-width: 640px) {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}
	}

	.store-header-logo {
		width: 120px;
		height: 120px;
		background-color: white;
		border-radius: var(--radius-lg);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
	}

	.store-header-content {
		flex: 1;
	}

	.store-header .store-title {
		font-size: var(--font-size-2xl);
		color: white;
		margin-bottom: var(--space-2);
	}

	.store-header .store-description {
		color: var(--color-neutral-200);
		margin-bottom: var(--space-4);
	}

	/* ===== Single Post ===== */
	.single-post-wrapper {
		background-color: white;
		border-radius: var(--radius-lg);
		padding: var(--space-6);
		box-shadow: var(--shadow-sm);
	}

	.single-post-wrapper .post-header {
		margin-bottom: var(--space-6);
		padding-bottom: var(--space-6);
		border-bottom: 1px solid var(--color-neutral-200);
	}

	.single-post-wrapper .post-featured-image {
		margin-bottom: var(--space-6);
		border-radius: var(--radius-lg);
		overflow: hidden;

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

	.post-tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-top: var(--space-4);
	}

	.post-tag {
		display: inline-block;
		padding: var(--space-2) var(--space-3);
		background-color: var(--color-neutral-100);
		color: var(--color-primary);
		border-radius: var(--radius-full);
		font-size: var(--font-size-xs);
		text-decoration: none;
		transition: all var(--transition-fast);

		&:hover {
			background-color: var(--color-primary);
			color: white;
		}
	}

	/* ===== Sidebar Widget ===== */
	.sidebar-widget {
		background-color: white;
		border-radius: var(--radius-lg);
		padding: var(--space-4);
		margin-bottom: var(--space-6);
		box-shadow: var(--shadow-sm);

		h3 {
			margin-bottom: var(--space-4);
			font-size: var(--font-size-lg);
		}

		ul {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
		}

		a {
			color: var(--color-primary);
			font-size: var(--font-size-sm);

			&:hover {
				text-decoration: underline;
			}
		}
	}

	/* ===== Reveal Animation ===== */
	[data-reveal] {
		opacity: 0;
		transform: translateY(20px);
		animation: revealIn 0.6s ease-out forwards;
	}

	@keyframes revealIn {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	[data-reveal].revealed {
		opacity: 1;
		transform: translateY(0);
	}

	/* ===== Accessibility ===== */
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}

	/* ===== Focus Visible ===== */
	*:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}
}

/* ===== Layer: Utilities ===== */
@layer utilities {
	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	.flex {
		display: flex;
	}

	.flex-col {
		flex-direction: column;
	}

	.gap-4 {
		gap: var(--space-4);
	}

	.mb-4 {
		margin-bottom: var(--space-4);
	}

	.mt-4 {
		margin-top: var(--space-4);
	}

	.p-4 {
		padding: var(--space-4);
	}

	.rounded-lg {
		border-radius: var(--radius-lg);
	}

	.shadow-md {
		box-shadow: var(--shadow-md);
	}

	.opacity-50 {
		opacity: 0.5;
	}

	.opacity-75 {
		opacity: 0.75;
	}
}