section.product-single {
	margin-bottom: 80px;
	div.product {
		display: grid;
		gap: 40px;
		grid-template-columns: 1fr 1fr;
		.images,
		.summary {
			float: none;
			width: 100%;
		}
		h2 {
			font-size: 2.1875rem;
			color: var(--black-text);
		}
		.woocommerce-product-gallery__wrapper {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto auto;
			gap: var(--gap);

			> div {
				aspect-ratio: 4 / 3;
				background-color: red;

				a {
					display: block;
					width: 100%;
					height: 100%;
					background-color: blue;
					position: relative;
				}
			}

			.product-image-caption {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 60, 114, 0.7);
				color: #fff;
				padding: 8px 12px;
				font-size: 1rem;
				z-index: 2;
				text-align: center;
				pointer-events: none;
				line-height: 1.1;
			}

			.woocommerce-product-gallery__image {
				position: relative;
			}

			.woocommerce-product-gallery__image:first-child {
				grid-column: 1 / 4;
				grid-row: 1 / 3;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				/* display: none; */
			}

			.woocommerce-product-gallery__image:nth-child(n + 2) {
				width: auto;
			}
		}
		.price {
			display: none;
		}
		.woocommerce-product-details__short-description {
			margin-bottom: 80px;
		}
		.product-description {
			margin-bottom: 80px;
		}
		.product-short-description {
			margin-bottom: 80px;
		}
		.woocommerce-tabs.wc-tabs-wrapper {
			.wc-tabs {
				display: none;
			}
			h4 {
				font-size: 1.25rem;
				color: var(--black-text);
				margin-bottom: 20px;
			}
			table.shop_attributes {
				margin-bottom: 40px;
				th {
					padding-left: 0;
					background-color: transparent;
					color: var(--black-text);
				}
				td {
					color: var(--black-text);
				}
				tr:nth-child(even) {
					background-color: transparent;
					th {
						background-color: transparent;
					}
					td {
						background-color: transparent;
					}
				}
			}
		}
		.product_meta {
			display: none;
		}
		.interest {
			background: var(--lighter-grey-bg);
			border-radius: var(--radius);
			padding: 20px 30px 20px 30px;
			margin-top: auto;

			.header {
				font-family: var(--bebas);
				color: var(--black-text);
				font-size: 1.875rem;
				margin: 0 0 20px 0;
				padding: 0;
				line-height: 1;
				text-transform: uppercase;
			}

			.sub-header {
				font-family: var(--bebas);
				color: var(--black-text);
				font-size: 1.25rem;
				margin: 0 0 15px 0;
				padding: 0;
				line-height: 1;
				text-transform: uppercase;

				&.two {
					margin-top: 40px;
				}
			}

			form.cart {
				display: flex;
				justify-content: flex-start;
				.quantity {
					float: none;
					margin-right: 20px;

					input {
						border-radius: var(--radius);
						border: 1px solid var(--dark-blue);
					}
				}
				button.button {
					margin: 0;
					float: none;
					padding: 0.3em 0.9em;
					border-radius: var(--radius);
					border: 1px solid var(--dark-blue);
					color: var(--dark-blue);
					background-color: white;

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

			P:last-child {
				margin-bottom: 0;
			}

			a {
				font-weight: bold;
			}
		}
	}
	@media (max-width: 800px) {
		div.product {
			grid-template-columns: 1fr;
			gap: var(--gap);
		}
	}
}

section.product-list {
	padding-bottom: 40px;
	.section-inner {
		display: flex;
		gap: var(--gap);
	}
	.intro {
		display: flex;
		margin-bottom: 80px;
	}
	.col-1 {
		flex: 1;
	}
	.col-2 {
		flex: 3;
	}
	.intro {
		p {
			font-size: 1.25rem;
		}
	}
	.product-sorting {
		form.woocommerce-ordering {
			float: none;
			width: 240px;
			margin-bottom: 40px;
		}
	}
	.col-1 {
		h3 {
			font-size: 1.875rem;
			color: var(--black-text);
			margin-bottom: 20px;
		}
	}
	form#product-filters {
		legend {
			font-family: var(--bebas);
			font-size: 1.5rem;
			color: var(--black-text);
			text-transform: uppercase;
		}
		fieldset {
			margin-bottom: 40px;
		}
	}

	ul.products {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: var(--gap); /* Space between products */
		list-style: none;
		padding: 0;
		margin: 0;
	}

	ul.products li.product {
		display: flex;
		flex-direction: column;
		background-color: var(--lighter-grey-bg);
		overflow: hidden;
		float: none;
		width: auto !important;
		padding: 0 0 10px 0;
		margin: 0 !important;
	}

	ul.products li.product .woocommerce-loop-product__link {
		display: flex;
		flex-direction: column;
	}

	ul.products li.product img {
		max-width: 100%;
		height: auto;
		margin-bottom: 0px;
		aspect-ratio: 1 / 1; /* Ensures images are square */
		object-fit: cover; /* Ensures images cover the area without distortion */
	}

	ul.products li.product .product-tag {
		color: white;
		font-size: 0.75rem;
		background-color: var(--dark-blue);
		border-bottom-left-radius: var(--radius);
		border-bottom-right-radius: var(--radius);
		padding: 2px 7px 2px 7px;
		margin: 0 0 20px 10px;
		align-self: flex-start;
		width: auto;
		display: inline-block;

		&.empty {
			visibility: hidden;
		}
	}

	ul.products li.product .price {
		display: none;
	}

	ul.products li.product h2.woocommerce-loop-product__title {
		font-size: 1.5rem;
		color: var(--black-text);
		margin: 0;
		padding: 0 20px 20px 20px;
	}

	ul.products li.product .price {
		font-size: 1rem;
		color: var(--dark-blue);
		margin-bottom: 10px;
	}

	ul.products li.product .button {
		background-color: transparent;
		color: var(--dark-blue);
		padding: 10px 20px; /* Adjust padding as needed */
		text-decoration: none;
		font-size: 1rem;
		transition: 0.3s;
		border-radius: 0;
		margin-top: auto;
		display: inline-block; /* Ensure the button only takes up as much space as its content */
		width: auto; /* Prevent the button from stretching to full width */
		text-align: right; /* Center the text inside the button */
		align-self: flex-end; /* Center the button within the flex container */
	}

	ul.products li.product .button:hover {
		background-color: var(--dark-blue);
		color: white;
	}

	@media (max-width: 1300px) {
		ul.products {
			grid-template-columns: 1fr 1fr 1fr;
		}
	}
	@media (max-width: 1000px) {
		ul.products {
			grid-template-columns: 1fr 1fr;
		}
	}
	@media (max-width: 750px) {
		.section-inner {
			display: block;
		}
		ul.products {
			grid-template-columns: 1fr;
		}
		ul.products li.product h2.woocommerce-loop-product__title {
			font-size: 1.625rem;
		}
		ul.products li.product .product-tag {
			font-size: 1rem;
		}
	}
}

.woocommerce .products ul::after,
.woocommerce .products ul::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before {
	content: " ";
	display: none;
}

section.product-category-grid {
	margin-bottom: 80px;
	.category-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
		gap: var(--gap);
	}
	.category-item {
		text-decoration: none;
		display: block;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		aspect-ratio: 1 / 1;
		position: relative;

		/* Gradient overlay */
		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 25%;
			background: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.9) 0%,
				rgba(0, 0, 0, 0) 100%
			);
			pointer-events: none;
			z-index: 1;
		}

		&:hover::after {
			height: 70%;
		}

		&:hover .category-thumb {
			transform: scale(1.05);
		}

		&:hover .category-description {
			display: block;
		}
	}
	.category-thumb {
		position: relative;
		background-size: cover;
		background-position: center;
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		z-index: -1;
		object-fit: cover;
		transition: all 0.3s ease;
	}
	.category-name {
		color: #fff;
		/* font-size: 2.5rem; */
		font-size: clamp(1.875rem, 4vw, 2.5rem);
		margin-bottom: 20px;
		text-align: center;
		position: relative;
		z-index: 2;
		padding: 0 20px 0 20px;
	}
	.category-description {
		color: #fff;
		font-size: 1rem;
		text-align: center;
		padding: 0 20px 20px 20px;
		margin-bottom: 0;
		display: none;
		position: relative;
		z-index: 2;
	}
}

section.product-category-grid-two {
	margin-bottom: 80px;
	.category-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--gap);
	}
	.category-item {
		text-decoration: none;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;

		position: relative;

		img {
			transition: all 0.3s ease;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		&:hover .category-image img {
			transform: scale(1.05);
		}
	}
	.category-image {
		object-fit: cover;
		transition: all 0.3s ease;
		flex: 0 1 50%;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}
	.category-text {
		flex: 0 1 50%;
		background-color: var(--light-grey-bg);
		padding: 20px;
	}
	.category-name {
		font-size: 2.1875rem;
		margin-bottom: 20px;
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	.category-description {
		font-size: 1rem;
		margin-bottom: 0;
		position: relative;
		line-height: 1.3;
	}

	@media (max-width: 1100px) {
		.category-grid {
			grid-template-columns: repeat(1, 1fr);
		}
		.category-name {
			font-size: 1.875rem;
		}
	}
	@media (max-width: 800px) {
		margin-bottom: 40px;
		.category-grid {
			grid-template-columns: repeat(1, 1fr);
		}
		.category-item {
			display: block;

			position: relative;

			img {
				transition: all 0.3s ease;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			&:hover .category-image img {
				transform: scale(1.05);
			}
		}
	}
}