.products-grid__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--page-margin-inline) * 0.5);

  @media screen and (width >= 720px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media screen and (width >= 1120px) {
    grid-template-columns: repeat(6, 1fr);
  }

	.products-grid__item {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: subgrid;
		grid-row: auto / span 4;
		gap: calc(var(--page-margin-inline) * 0.5);
		z-index: 1;

		/* 売り切れ時のボタンスタイル */
		&[data-variant-available="false"] {
			.products-grid__link {
				opacity: 0.4;
			}
		}

		/* 売り切れ時とCOMINNG SOON時は料金非表示 */
		&:has(.products-grid__actions-cart[disabled]) {
			.products-grid__price {
				display: none;
			}
		}

		/* カート追加済み時は料金表示 */
		&:has(.products-grid__actions-cart.is-added) {
			.products-grid__price {
				display: grid;
			}
		}
	}

	.products-grid__link {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: subgrid;
		grid-row: span 3;

		.products-grid__image {
			width: 100%;
			height: auto;
			object-fit: cover;
		}

		.products-grid__title {
			font-family: var(--font-family-product-title);
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			color: var(--primary-color);
		}

		.products-grid__price {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2px;
			text-align: right;
		}

		.products-grid__price--sale,
		.products-grid__price--compare,
		.products-grid__price--regular {
			font-family: var(--font-family-product-price);
			font-size: 1.2rem;
			font-weight: 700;
			line-height: 1;
			letter-spacing: -0.02rem;
			color: var(--primary-color);

			.products-grid__tax {
				position: relative;
				top: -0.5px;
				margin-inline: -2px;
				font-family: var(--font-family-japanese);
				font-size: 0.8rem;
				font-weight: 700;
				line-height: 1;
				color: var(--primary-color);
				
				small {
					margin-left: -4px;
					font-size: 0.8rem;
					font-weight: 400;
				}
			}
		}

		/* .products-grid__discount-price {
		} */

		/* 割引前価格 */
		.products-grid__price--compare {
			text-decoration: line-through;
			font-size: 1.1rem;
			font-weight: 400;
			opacity: 0.5;

			.products-grid__tax {
				margin-inline: -1px -2px;
			}
		}

		/* 割引率 */
		.products-grid__price--discount {
			position: relative;
			top: -1px;
			width: fit-content;
			margin-right: 4px;
			padding-block: 3px 2px;
			padding-inline: 4px;
			color: var(--primary-bg-color);
			background-color: var(--secondary-color);
			border-radius: 4px;
			font-family: var(--font-family-product-price);
			font-size: 0.7rem;
			font-weight: 700;
			line-height: 1;
			letter-spacing: -0.02rem;
		}
	}

	.products-grid__actions {
		--favorite-button-size: 22px;
		display: grid;
		grid-template-columns: 1fr var(--favorite-button-size);
		grid-template-rows: var(--favorite-button-size);
		gap: calc(var(--page-margin-inline) * 0.2);

		.products-grid__actions-cart,
		.products-grid__actions-favorite {
			background-color: var(--primary-bg-color);
			border: 1px solid rgb(var(--gray-color) / 0.1);
			border-radius: 4px;
			font-size: 0.8rem;
			text-align: center;
			transition: background-color 0.2s ease;
		}

		.products-grid__actions-cart {
			width: stretch;
			width: -webkit-fill-available;
			height: var(--favorite-button-size);
			font-size: 0.8rem;

			/* 売り切れボタン */
			&:disabled {
				border: none;
				font-size: 0.8rem;
				opacity: 0.7;
				cursor: not-allowed;
			}

			/* カート追加済みボタン */
			&.is-added {
				border: none;
				background-color: var(--color-button-gray);
				font-size: 0.8rem;
			}
		}

		.products-grid__actions-favorite {
			display: grid;
			place-items: center;
			/* ボタンサイズ - 線幅 */
			width: calc(var(--favorite-button-size) - 0px);
			height: calc(var(--favorite-button-size) - 0px);
			padding: 3px;

			&.is-active {
				background-color: var(--secondary-color);

				svg {
					fill: var(--primary-bg-color);
				}
			}

			svg {
				width: stretch;
				width: -webkit-fill-available;
				height: stretch;
				height: -webkit-fill-available;
				fill: var(--primary-color);
			}
		}
	}
}

.products-grid-end__wrap {
	display: grid;
	place-items: center;
	margin-block: calc(var(--page-margin-inline) * 2) calc(var(--page-margin-inline) * 1);

	.products-grid-end__link {
		--end-link-padding: 8px;
		display: inline-flex;
		align-items: center;
		gap: calc(var(--end-link-padding) * 0.5);
		padding-block: var(--end-link-padding) calc(var(--end-link-padding) * 1.25);
		padding-inline: calc(var(--end-link-padding) * 4) calc(var(--end-link-padding) * 3);
		color: var(--primary-bg-color);
		background-color: var(--tertiary-bg-color);
		border: 1px solid var(--color-border-gray);
		border-radius: 100vw;
		font-size: 1rem;
		font-weight: 400;
		text-align: center;

		&::after {
			content: "";
			position: relative;
			top: 1px;
			width: 12px;
			height: 12px;
			flex-shrink: 0;
		
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
		}
	}
}