html {
		scroll-behavior: smooth;
	}
	html, body {
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		background: url('https://png.pngtree.com/background/20231101/original/pngtree-intense-close-up-of-falling-coffee-beans-on-vibrant-yellow-background-picture-image_5836024.jpg');
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}

	/* Top Navigation Bar */
	.top-navbar {
		position: relative;
		background: linear-gradient(135deg, #5c3d2e 0%, #4a2f1f 100%);
		box-shadow: 0 2px 20px rgba(0,0,0,0.3);
		z-index: 1000;
		padding: 15px 0;
	}
	.top-navbar__container {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.top-navbar__logo {
		display: flex;
		align-items: center;
		gap: 15px;
		text-decoration: none;
		color: #ffffff;
	}
	.top-navbar__logo img {
		width: 50px;
		height: 50px;
		object-fit: cover;
		border-radius: 50%;
	}
	.top-navbar__logo-text {
		font-size: 1.5rem;
		font-weight: 700;
		color: #ffd700;
		letter-spacing: 1px;
	}
	.top-navbar__menu {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 5px;
		align-items: center;
	}
	.top-navbar__menu > li {
		position: relative;
	}
	.top-navbar__menu a {
		display: block;
		padding: 10px 18px;
		color: #ffffff;
		text-decoration: none;
		font-weight: 500;
		font-size: 0.95rem;
		transition: all 0.3s ease;
		border-radius: 8px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	.top-navbar__menu a:hover,
	.top-navbar__menu a.active {
		background: #d4a017;
		color: #2c1810;
	}
	.top-navbar__menu .dropdown {
		position: relative;
	}
	.top-navbar__menu .dropdown-content {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: #4a2f1f;
		box-shadow: 0 8px 24px rgba(0,0,0,0.3);
		border-radius: 8px;
		min-width: 200px;
		padding: 8px 0;
		margin-top: 5px;
		list-style: none;
		z-index: 100;
	}
	.top-navbar__menu .dropdown:hover .dropdown-content {
		display: block;
	}
	.top-navbar__menu .dropdown-content a {
		padding: 12px 20px;
		border-radius: 0;
	}
	.top-navbar__menu .dropdown-content a:hover {
		background: #d4a017;
		color: #2c1810;
	}
	.top-navbar__actions {
		display: flex;
		gap: 10px;
		align-items: center;
	}
	.top-navbar__btn {
		padding: 10px 20px;
		border-radius: 25px;
		text-decoration: none;
		font-weight: 600;
		transition: all 0.3s ease;
		font-size: 0.9rem;
	}
	.top-navbar__btn--primary {
		background: linear-gradient(135deg, #f4a624 0%, #f39c12 100%);
		color: #fff;
		box-shadow: 0 4px 12px rgba(244, 166, 36, 0.4);
		text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	}
	.top-navbar__btn--primary:hover {
		background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(244, 166, 36, 0.5);
	}
	.top-navbar__btn--secondary {
		background: transparent;
		color: #8b4513;
		border: 2px solid #8b4513;
	}
	.top-navbar__btn--secondary:hover {
		background: #8b4513;
		color: #fff;
	}

	/* Store Locations Page */
	.store-page {
		margin-top: 80px;
		padding: 60px 30px 80px;
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
	.store-page__header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 50px;
		gap: 30px;
		flex-wrap: wrap;
	}
	.store-page__header-center {
		flex: 1;
		text-align: center;
	}
	.store-page__title {
		font-size: 3rem;
		color: #2c1810;
		margin: 0 0 15px 0;
		font-weight: 800;
	}
	.store-page__subtitle {
		font-size: 1.2rem;
		color: #6b3e26;
		margin: 0;
	}
	.store-page__stats {
		display: flex;
		gap: 20px;
	}
	.store-stat {
		text-align: center;
		padding: 20px 40px;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		border: 2px solid rgba(74, 44, 26, 0.3);
		transition: all 0.3s ease;
		min-width: 180px;
	}
	.store-stat.active {
		background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
		border-color: #2c1810;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	}
	.store-stat__number {
		font-size: 3rem;
		font-weight: 800;
		color: #2c1810;
		margin: 0;
		transition: color 0.3s ease;
	}
	.store-stat.active .store-stat__number {
		color: #ffd700;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	}
	.store-stat__label {
		font-size: 1rem;
		color: #4a2c1a;
		margin: 5px 0 0 0;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 600;
		transition: color 0.3s ease;
	}
	.store-stat.active .store-stat__label {
		color: #ffd700;
	}

	/* Filter Tabs */
	.store-filters {
		display: flex;
		justify-content: center;
		gap: 15px;
		margin-bottom: 0;
		flex-wrap: wrap;
	}
	.filter-btn {
		padding: 12px 30px;
		background: rgba(255, 255, 255, 0.95);
		color: #4a2c1a;
		border: 2px solid rgba(74, 44, 26, 0.3);
		border-radius: 25px;
		cursor: pointer;
		font-weight: 600;
		font-size: 0.95rem;
		transition: all 0.3s ease;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
	.filter-btn:hover {
		background: #2c1810;
		color: #ffd700;
		border-color: #2c1810;
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	}
	.filter-btn.active {
		background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
		color: #ffd700;
		border-color: #2c1810;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
		transform: translateY(-2px);
	}

	/* Store Carousel Container */
	.store-carousel-wrapper {
		position: relative;
		margin-top: 40px;
		padding: 0 60px;
		perspective: 1500px;
		min-height: 500px;
	}
	
	.store-carousel {
		overflow: hidden;
		position: relative;
		padding: 20px 0;
		min-height: 450px;
	}
	
	.store-grid {
		display: flex;
		gap: 25px;
		transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		will-change: transform;
	}
	
	.store-card {
		background: #fff;
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 8px 24px rgba(0,0,0,0.1);
		transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
		border: 2px solid transparent;
		flex: 0 0 calc(25% - 19px);
		min-width: calc(25% - 19px);
		position: relative;
		transform-style: preserve-3d;
		opacity: 0.7;
		filter: blur(1px) brightness(0.9);
		scale: 0.95;
	}
	
	.store-card.active {
		opacity: 1;
		filter: blur(0) brightness(1);
		scale: 1;
		z-index: 2;
	}
	
	.store-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		transition: left 0.5s;
		z-index: 10;
		pointer-events: none;
	}
	
	.store-card:hover::before {
		left: 100%;
	}
	
	.store-card:hover {
		transform: translateY(-15px) rotateY(5deg) scale(1.05);
		box-shadow: 0 20px 50px rgba(244, 166, 36, 0.5);
		border-color: #f4a624;
		filter: blur(0) brightness(1.1);
		opacity: 1;
		z-index: 10;
	}
	
	/* Navigation Arrows */
	.carousel-nav {
		position: absolute;
		top: 250px;
		transform: translateY(-50%);
		background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
		color: #ffd700;
		border: none;
		width: 55px;
		height: 55px;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.8rem;
		font-weight: bold;
		transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		box-shadow: 0 8px 25px rgba(44, 24, 16, 0.5);
		z-index: 10;
		overflow: hidden;
		position: absolute;
	}
	
	.carousel-nav::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, #ffd700 0%, #f4a624 100%);
		opacity: 0;
		transition: opacity 0.4s ease;
	}
	
	.carousel-nav span {
		position: relative;
		z-index: 1;
	}
	
	.carousel-nav:hover {
		background: linear-gradient(135deg, #ffd700 0%, #f4a624 100%);
		color: #2c1810;
		transform: scale(1.15) rotate(360deg);
		box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
	}
	
	.carousel-nav:active {
		transform: scale(0.95);
	}
	
	.carousel-nav:disabled {
		opacity: 0.3;
		cursor: not-allowed;
		transform: scale(0.9);
	}
	
	.carousel-nav:disabled:hover {
		transform: scale(0.9);
		background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
		color: #ffd700;
	}
	
	.carousel-nav--prev {
		left: 10px;
	}
	
	.carousel-nav--prev:not(:disabled) {
		animation: pulse-left 2s ease-in-out infinite;
	}
	
	.carousel-nav--next {
		right: 10px;
	}
	
	.carousel-nav--next:not(:disabled) {
		animation: pulse-right 2s ease-in-out infinite;
	}
	
	@keyframes pulse-left {
		0%, 100% { transform: translateX(0); }
		50% { transform: translateX(-8px); }
	}
	
	@keyframes pulse-right {
		0%, 100% { transform: translateX(0); }
		50% { transform: translateX(8px); }
	}
	
	/* Carousel Indicators */
	.carousel-indicators {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 30px;
	}
	
	.carousel-indicator {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: rgba(44, 24, 16, 0.3);
		border: none;
		cursor: pointer;
		transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		position: relative;
		overflow: hidden;
	}
	
	.carousel-indicator::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, #ffd700 0%, #f4a624 100%);
		border-radius: 50%;
		transform: scale(0);
		transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
	
	.carousel-indicator:hover {
		transform: scale(1.3);
		background: rgba(44, 24, 16, 0.5);
	}
	
	.carousel-indicator.active {
		background: #2c1810;
		width: 35px;
		border-radius: 6px;
		box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
	}
	
	.carousel-indicator.active::after {
		transform: scale(1);
		border-radius: 6px;
	}
	
	/* Store card image effects */
	.store-card__image {
		width: 100%;
		height: 280px;
		object-fit: cover;
		object-position: center;
		display: block;
		transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
		filter: brightness(0.95);
	}
	
	.store-card:hover .store-card__image {
		transform: scale(1.1) rotate(2deg);
		filter: brightness(1.1) saturate(1.2);
	}
	
	/* Content animations */
	.store-card__content {
		padding: 25px;
		position: relative;
		background: white;
	}
	
	.store-card__name,
	.store-card__location,
	.store-card__badge,
	.store-card__map-btn {
		transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	
	.store-card:hover .store-card__name {
		color: #f4a624;
		transform: translateX(5px);
	}
	
	.store-card:hover .store-card__location {
		transform: translateX(8px);
	}
	
	.store-card:hover .store-card__badge {
		transform: scale(1.1) rotate(-2deg);
		box-shadow: 0 4px 15px rgba(244, 166, 36, 0.4);
	}
	
	.store-card:hover .store-card__map-btn {
		transform: translateY(-3px) scale(1.05);
		box-shadow: 0 8px 25px rgba(44, 24, 16, 0.5);
	}
	
	/* Floating animation for cards */
	@keyframes float {
		0%, 100% { transform: translateY(0px); }
		50% { transform: translateY(-10px); }
	}
	
	.store-card.active {
		animation: float 3s ease-in-out infinite;
	}
	
	/* Glow effect on hover */
	@keyframes glow {
		0%, 100% { box-shadow: 0 20px 50px rgba(244, 166, 36, 0.5); }
		50% { box-shadow: 0 20px 60px rgba(255, 215, 0, 0.8), 0 0 30px rgba(244, 166, 36, 0.6); }
	}
	
	.store-card:hover {
		animation: glow 2s ease-in-out infinite;
	}
	.store-card__image {
		width: 100%;
		height: 280px;
		object-fit: cover;
		object-position: center;
		display: block;
	}
	.store-card__content {
		padding: 25px;
	}
	.store-card__name {
		font-size: 1.5rem;
		font-weight: 700;
		color: #2c1810;
		margin: 0 0 10px 0;
	}
	.store-card__location {
		font-size: 1rem;
		color: #6b3e26;
		margin: 0 0 15px 0;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.store-card__location::before {
		content: '📍';
		font-size: 1.2rem;
	}
	.store-card__badge {
		display: inline-block;
		padding: 6px 15px;
		background: linear-gradient(135deg, #f4a624 0%, #f39c12 100%);
		color: #fff;
		border-radius: 20px;
		font-size: 0.85rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	.store-card__actions {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-top: 15px;
	}
	.store-card__map-btn {
		padding: 6px 15px;
		background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
		color: #ffd700;
		border: none;
		border-radius: 20px;
		font-weight: 600;
		font-size: 0.85rem;
		cursor: pointer;
		transition: all 0.3s ease;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		box-shadow: 0 4px 15px rgba(44, 24, 16, 0.3);
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	.store-card__map-btn:hover {
		background: linear-gradient(135deg, #4a2c1a 0%, #6b3e26 100%);
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(44, 24, 16, 0.4);
	}

	/* Mobile Menu Toggle */
	.mobile-menu-toggle {
		display: none;
		background: none;
		border: none;
		color: #fff;
		font-size: 1.8rem;
		cursor: pointer;
		padding: 8px;
		transition: all 0.3s ease;
	}
	
	.mobile-menu-toggle:hover {
		color: #ffd700;
		transform: scale(1.1);
	}

	@media (max-width: 1200px) {
		.store-card {
			flex: 0 0 calc(33.333% - 17px);
			min-width: calc(33.333% - 17px);
		}
	}
	
	@media (max-width: 768px) {
		.mobile-menu-toggle {
			display: flex;
		}
		
		.top-navbar__menu {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: linear-gradient(135deg, #5c3d2e 0%, #4a2f1f 100%);
			flex-direction: column;
			padding: 20px;
			box-shadow: 0 5px 20px rgba(0,0,0,0.3);
			border-radius: 0 0 15px 15px;
		}
		
		.top-navbar__menu.active {
			display: flex;
		}

		.top-navbar__menu-item {
			width: 100%;
			text-align: center;
			padding: 15px;
		}

		.top-navbar__dropdown {
			position: static;
		}
		
		.top-navbar__menu > li {
			width: 100%;
		}
		
		.top-navbar__menu a {
			width: 100%;
			padding: 15px;
		}
		
		.top-navbar__menu .dropdown-content {
			position: static;
			box-shadow: none;
			background: #4a2f1f;
			margin-top: 10px;
		}
		
		.store-page__title {
			font-size: 2rem;
		}
		.store-carousel-wrapper {
			padding: 0 50px;
		}
		.carousel-nav {
			width: 40px;
			height: 40px;
			font-size: 1.2rem;
		}
		.store-card {
			flex: 0 0 calc(50% - 13px);
			min-width: calc(50% - 13px);
		}
		.store-page__stats {
			flex-direction: column;
			gap: 20px;
		}
	}
	
	@media (max-width: 480px) {
		.store-card {
			flex: 0 0 100%;
			min-width: 100%;
		}
		.store-carousel-wrapper {
			padding: 0 45px;
		}
	}
	
	/* Page Hero Section */
	.page-hero {
		position: relative;
		height: 80vh;
		min-height: 500px;
		max-height: 900px;
		overflow: hidden;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
	}
	
	.page-hero__background {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}
	
	.page-hero__background img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
	}
	
	.page-hero__overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, rgba(44, 24, 16, 0.75) 0%, rgba(74, 44, 26, 0.65) 100%);
		z-index: 1;
	}
	
	.page-hero__content {
		position: relative;
		z-index: 2;
		text-align: center;
		color: white;
		padding: 0 20px;
	}
	
	.page-hero__title {
		font-size: 4rem;
		font-weight: 900;
		margin: 0 0 20px 0;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: #ffd700;
		text-shadow: 0 4px 20px rgba(0,0,0,0.5);
		animation: fadeInUp 0.8s ease;
	}
	
	.page-hero__subtitle {
		font-size: 1.3rem;
		font-weight: 300;
		margin: 0;
		letter-spacing: 1px;
		text-shadow: 0 2px 10px rgba(0,0,0,0.5);
		animation: fadeInUp 0.8s ease 0.2s both;
	}
	
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}