body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #241e1c;
            color: #fff;
        }

        h2 {
            color: #e1b382;
            text-align: center;
        }

        #searchInput {
            width: 300px;
            padding: 12px;
			margin-bottom: 10px;
			margin-right: 10px;
            box-sizing: border-box;
            border: none;
            background-color: #4d433b;
            color: #fff;
        }

        #searchInput:focus {
            outline: none;
        }
		
		.filterContainer {
			position: relative;
			display: inline-block; /* Ensure the filter containers align horizontally */
			margin-right: 10px;
			margin-bottom: 10px;
			width: 300px;
		}

		.filterDropdown {
			width: 100%;
			overflow-y: auto;
			border: 1px solid #bdc3c7;
			border-radius: 5px;
			background-color: #fff;
			position: absolute;
			top: 100%;
			display: none;
			left: 0;
		}

		.filterOptions {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			gap: 10px;
			padding: 10px;
			background-color: #4d433b;
			border: none;
			border-radius: 5px;
			position: relative;
			z-index: 1000;
		}

		.filterOption {
			padding: 5px;
			border: none;
			border-radius: 5px;
			text-align: center;
			cursor: pointer;
			color: #fff;
			background-color: #7d6d5e;
		}

		.filterOption.active {
			background-color: #e1b382;
			color: #241e1c;
		}

		.filterSelect {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			cursor: pointer;
			background-color: #4d433b;
			color: #fff;
		}

		.filterDropdown.active {
			display: block;
		}

        #productGrid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
            padding: 0 20px;
			height: auto;
			overflow-y: auto;
		}
        .productItem {
            background-color: #00332b27;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            transition: background-color 0.3s ease-in-out;
			max-height: 800px;
        }

        .productItem > .productInfoWrapper > img {
			max-height: 200px;
			width: auto;
			height: auto;
			object-fit: cover;
		}

        .productItem:hover {
            background-color: #804d433b; /* Dark brown color on hover */
            cursor: pointer;
        }

        .productLink {
            text-decoration: none;
            color: #e1b382; /* Light brown color for text */
            display: block;
        }

        .productName {
            font-weight: bold;
        }

        .productTalpa {
            font-weight: bold;
        }
		
		.viewButton {
			display: block;
			width: 80%;
			height: auto;
			padding: 0;
			margin: 10px auto;
			border: none;
			border-radius: 20px;
			background-color: #fdbf0f; 
			cursor: pointer;
			transition: background-color 0.3s ease-in-out;
		}

		.viewButton img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 20px;
			padding: 0;
			margin: 0;
		}

		.viewButton:hover {
			background-color: #fde80f;
		}
		
		.productItem .buttonContainer {
			display: flex;
			flex-direction: column;
		}

		.productItem .buttonContainer > a, .productItem .buttonContainer > div {
			margin-right: 40px;
			margin-left: 40px;
			margin-top: 5px;
			border-radius: 20px;
			padding: 10px;
			background-color: #4d433b;
			text-align: center;
			text-decoration: none;
			color: #fff;
		}

		.pageSelector {
			text-align: center;
			margin-top: 20px;
		}

		.pageSelector button {
			margin-bottom: 20px;
			margin-left: 5px;
			margin-top: 20px;
			margin-right: 5px;
			padding: 13px 16px;
			border: none;
			background-color: #4d433b; 
			color: #fff;
			cursor: pointer;
			transition: background-color 0.3s ease-in-out;
		}
		
		#popupContainer {
			display: none;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 1000;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}

		#popupContent {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: rgba(128, 128, 128, 0.3);
			border-radius: 8px;
			text-align: center;
			overflow: hidden; /* Prevents scrollbars on the popup */
			padding: 20px; /* Padding around the image */
			box-sizing: border-box;
		}

		#popupImage {
			max-width: 95%; /* Limits image size to not exceed the popup */
			max-height: 95vh; /* Limits image height to not exceed the viewport */
			object-fit: contain; /* Ensures the image is fully visible */
		}

		#closePopup {
			position: absolute;
			top: 10px;
			right: 10px;
			cursor: pointer;
			font-size: 24px;
			line-height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: #ccc;
			color: #333;
		}
		
		#popupBottomBar {
			padding: 0px 20px 0px 20px;
			background-color: #444; /* Dark background for contrast */
			color: #fff;
			text-align: center;
			transition: background-color 0.3s ease;
		}

		#popupBottomBar a {
			color: #fff;
			text-decoration: none;
			transition: color 0.3s ease;
		}

        #popupBottomBar a:hover {
			color: #d7b369; /* Change link color on hover */
		}

        .beersRangeDisplay {
			color: #d7b369;
			text-align: center;
			font-size: 16px;
			margin-top: 20px;
		}

        .separator {
            display: block;
            text-align: center;
            margin-bottom: 30px;
            color: #d7b369;
        }

        h1 {
			display: block;
			margin: 60px auto 10px !important;
			text-align: center;
			color: #d7b369 !important;
			font-size: 40px;
        }