.product-filter-wrap {
	display: grid;
	gap: min(10px, 2.67vw);
	width: 60%;

	@media screen and (max-width: 899px) {
		width: 100%;
	}

}

.product-filter {
	display: flex;
	flex-wrap: wrap;
	gap: min(10px, 2.67vw);
}

.product-filter--category {}

.product-filter--concern {}

.product-filter__button {
	font-size: var(--base-font-size);
	color: var(--primary-color);
	background-color: var(--color-white);
	border: 1px solid currentColor;
	padding: .5em;
	cursor: pointer;
	flex: 0 0 auto;
	min-width: 6.67cqw;

	@media screen and (max-width: 899px) {
		min-width: 22cqw;
		gap: 2.99cqw;
	}

	@media (hover: hover) {
		&:hover {
			color: var(--color-white);
			background-color: var(--primary-color);
			opacity: .7;
		}
	}

	@media (hover: none) {
		&:active {
			color: var(--color-white);
			background-color: var(--primary-color);
			opacity: .7;
		}
	}

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

.product-list {
	display: grid;
	grid-template-columns: repeat(3, 29.17cqw);
	justify-content: space-between;
	align-items: start;
	gap: 5.83cqw;

	@media screen and (max-width: 899px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 8vw 5.07vw;
	}
}

.product-list__item {
	display: grid;

	@media screen and (max-width: 899px) {
		grid-template-rows: subgrid;
		grid-row: span 5;
		gap: 0;
	}

	a {
		@media (hover: hover) {
			&:hover {
				text-decoration: underline;
			}
		}

		@media (hover: none) {
			&:active {
				text-decoration: underline;
			}
		}
	}
}

.product-list__title {
	margin: 0;
	/* 375px-899px:16px-18px */
	font-size: clamp(1rem, 0.911rem + 0.38vw, 1.125rem);
	text-align: center;
	font-weight: 400;
	line-height: 1;
	margin-bottom: min(14px, 3.73vw);

	@media screen and (max-width: 899px) {
		line-height: 1.5;
	}
}

.product-list__title-link {}

.product-list__image {
	margin-bottom: min(14px, 3.73vw);
}

.product-list__image-link {
	position: relative;
	display: block;

	@media (hover: hover) {
		&:hover img {
			opacity: .5;
		}
	}

	@media (hover: none) {
		&:active img {
			opacity: .5;
		}
	}

	/* 製品ラベル */
	&[data-label]:before {
		content: "";
		display: block;
		position: absolute;
		width: 23%;
		aspect-ratio: 1;
		left: 4%;
		top: 4%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	&[data-label*="new"]:before {
		background-image: url("/wp-content/themes/cligram2025/assets/img/icon_new.svg");
	}

	&[data-label*="renewal"]::before {
		background-image: url("/wp-content/themes/cligram2025/assets/img/icon_renewal.svg");
	}
}



.product-list__catch {
	background: var(--color-greyish);
	text-align: center;
	line-height: 2.3;
	padding-inline: .5em;
	margin-bottom: min(14px, 3.73vw);
	align-self: start;

	@media screen and (max-width: 899px) {
		text-align: left;
		line-height: 1.5;
		padding: .5em;
	}
}

.product-list__catch-link {
	color: var(--color-white);
}

.product-list__info {
	margin-bottom: min(14px, 3.73vw);
}

.product-list__info-link {
	display: flex;
	justify-content: center;
	gap: 1em;
	font-feature-settings: "palt";
	flex-wrap: wrap;
	font-size: .875rem;

	@media screen and (max-width: 899px) {
		justify-content: flex-start;
		gap: .5em 1em;
	}
}

.product-list__category {}

.product-list__volume {}

.product-list__price {}

.product-list__desc {
	font-size: .875rem;
	line-height: 2;
}

.product-list__desc-link {}