:root :where(.wp-block-woocommerce-product-template) {
	gap: var(--wp--preset--spacing--6);

	@media (width >= 768px) {
		row-gap: var(--wp--preset--spacing--12);
	}


	&.wc-block-product-template__responsive.columns-3,
	&.wc-block-product-template__responsive.columns-4,
	&.wc-block-product-template__responsive.columns-5,
	&.wc-block-product-template__responsive.columns-6 {

		@media (min-width: 768px) and (max-width: 1023px) {
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		}
	}

	.star-rating-value {
		display: none;
	}

	.wc-block-components-product-rating .wc-block-components-product-rating__stars {
		font-size: 0.625rem;
		letter-spacing: 2px;
		width: 6em;
	}

	.wc-block-components-product-image {
		background-color: var(--wp--preset--color--slate-100);
		border-radius: 20px;
	}

	.wp-block-woocommerce-product-button {
		display: grid;
		justify-content: inherit;

		> button,
		> span {
			grid-row-start: 1;
			grid-column-start: 1;
		}

		> span {
			position: relative;
			z-index: 1;
			background: transparent;
			border: 1px solid transparent;
		}

		a.added_to_cart {
			display: block;
			text-align: center;
			margin-top: 0;
			font-weight: 500;
			line-height: 20px;
			border-radius: 12px;
			border: 2px solid var(--wp--preset--color--slate-300);
			font-size: 14px;
			color: var(--wp--preset--color--slate-900);
			text-decoration: none;
			background-color: var(--wp--preset--color--slate-100);
			padding-top: 0.75rem;
			padding-right: 1.25rem;
			padding-bottom: 0.75rem;
			padding-left: 1.25rem;
		}
	}

	.wp-block-post-title {
		color: var(--wp--preset--color--slate-800);
		font-size: var(--wp--preset--font-size--base);
		font-weight: 525;
		line-height: 1.5;

		a {
			color: var(--wp--preset--color--slate-800);
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;

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

	.wc-block-components-product-price {
		font-size: var(--wp--preset--font-size--x-large);
		line-height: 1.4;
		font-weight: 525;
		color: var(--wp--preset--color--slate-800);

		ins {
			color: var(--wp--preset--color--rose-600);
			float: left;
			margin-right: 8px;
			margin-left: 0 !important;
		}

		del {
			font-size: 16px;
			line-height: 1.5;
			color: var(--wp--preset--color--slate-500);
		}
	}

	&.list-style {
		row-gap: 40px;

		.wc-block-components-product-summary p {
			margin: 0 !important;
		}

		.wp-block-post-title {

			a {
				position: relative;
				display: inline-flex;
				align-items: center;
				gap: 4px;
				text-decoration: none;

				&::after {
					content: "";
					width: 16px;
					height: 16px;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.667 8c0-.368.298-.667.666-.667h9.334c.368 0 .667.299.667.667 0 .368-.299.667-.667.667H3.333A.667.667 0 0 1 2.667 8Z' fill='currentColor'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.528 2.862a.667.667 0 0 1 .943 0l4.667 4.666a.667.667 0 0 1 0 .943l-4.667 4.667a.667.667 0 1 1-.943-.943L11.724 8 7.528 3.805a.667.667 0 0 1 0-.943Z' fill='currentColor'/%3E%3C/svg%3E");
					background-size: contain;
					background-repeat: no-repeat;
					opacity: 0;
					transform: translateX(-4px);
					transition: opacity 0.3s ease, transform 0.3s ease;
				}

				&::before {
					content: "";
					position: absolute;
					left: 0;
					bottom: 4px;
					width: 0;
					height: 1px;
					background: currentcolor;
					transition: width 0.3s ease;
				}

				&:hover {

					&::before {
						width: 100%;
					}

					&::after {
						opacity: 1;
						transform: translateX(4px);
					}
				}
			}
		}
	}

	li:hover {

		.wp-block-post-title {

			a {
				text-decoration: underline;
				text-underline-offset: 2px;
			}
		}
	}
}

:root body:not(.single-product) :where(.wp-block-woocommerce-product-template) {
	margin-top: 0 !important;
}