/*
Theme Name: Green Scape Calm 2.0
File: product-page.css
Purpose: Welcart 商品詳細ページ専用
*/

.gs22-item,
	.gs22-item * {
		box-sizing: border-box;
	}

	.gs22-item {
		width: min(1180px, calc(100% - 40px));
		margin: 0 auto;
		padding: 64px 0 90px;
		color: #333a35;
		font-family:
			"Hiragino Kaku Gothic ProN",
			"Yu Gothic",
			YuGothic,
			Meiryo,
			sans-serif;
		line-height: 1.8;
	}

	.gs22-item a {
		color: inherit;
	}

	.gs22-item-main {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
		gap: 56px;
		align-items: start;
	}

	.gs22-item-gallery {
		min-width: 0;
	}

	.gs22-item-main-image,
	.gs22-item-sub-image {
		position: relative;
		overflow: hidden;
		background: #f5f4ef;
		cursor: zoom-in;
	}

	.gs22-item-main-image img,
	.gs22-item-sub-image img,
	.gs22-item-main-image a img,
	.gs22-item-sub-image a img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		object-fit: contain;
		transition: transform 0.35s ease;
	}

	.gs22-item-main-image::after {
		position: absolute;
		right: 14px;
		bottom: 14px;
		display: flex;
		width: 38px;
		height: 38px;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(255, 255, 255, 0.75);
		border-radius: 50%;
		background: rgba(25, 54, 41, 0.65);
		color: #fff;
		content: "＋";
		font-size: 20px;
		line-height: 1;
		pointer-events: none;
	}

	@media (hover: hover) {
		.gs22-item-main-image:hover img,
		.gs22-item-sub-image:hover img {
			transform: scale(1.045);
		}
	}

	.gs22-item-sub-images {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
		margin-top: 12px;
	}

	.gs22-item-info {
		min-width: 0;
	}

	.gs22-item-eyebrow {
		margin: 0 0 8px;
		color: #748074;
		font-size: 11px;
		letter-spacing: 0.18em;
	}

	.gs22-item-title {
		margin: 0;
		padding: 0 0 22px;
		border-bottom: 1px solid #dfe3dc;
		color: #28382f;
		font-family:
			"Yu Mincho",
			"Hiragino Mincho ProN",
			"Hiragino Mincho Pro",
			serif;
		font-size: clamp(26px, 3vw, 38px);
		font-weight: 500;
		letter-spacing: 0.04em;
		line-height: 1.5;
	}

	.gs22-item-description {
		margin-top: 28px;
		color: #414741;
		font-size: 14px;
	}

	.gs22-item-description > *:first-child {
		margin-top: 0;
	}

	.gs22-item-description > *:last-child {
		margin-bottom: 0;
	}

	.gs22-item-description p {
		margin: 0 0 18px;
	}

	.gs22-item-description img {
		max-width: 100%;
		height: auto;
	}

	.gs22-item-description h2,
	.gs22-item-description h3,
	.gs22-item-description h4 {
		margin: 30px 0 12px;
		color: #304438;
		line-height: 1.6;
	}

	.gs22-item-description table {
		width: 100%;
		border-collapse: collapse;
	}

	.gs22-item-description th,
	.gs22-item-description td {
		padding: 12px;
		border: 1px solid #dfe3dc;
		text-align: left;
	}

	.gs22-order {
		margin-top: 32px;
		padding: 28px;
		border: 1px solid #dfe3dc;
		background: #f7f6f1;
	}

	.gs22-price-list {
		display: grid;
		margin: 0 0 22px;
		padding: 0;
	}

	.gs22-price-row {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
		padding: 11px 0;
		border-bottom: 1px solid #dedfd9;
	}

	.gs22-price-label {
		color: #687168;
		font-size: 12px;
	}

	.gs22-price-value {
		font-size: 14px;
		text-align: right;
	}

	.gs22-price-value.field_price {
		color: #263d31;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 24px;
		font-weight: 600;
	}

	.gs22-item .field_cprice {
		color: #777;
		text-decoration: line-through;
	}

	.gs22-item-options {
		width: 100%;
		margin: 20px 0;
		border-collapse: collapse;
	}

	.gs22-item-options th,
	.gs22-item-options td {
		padding: 10px 0;
		border-bottom: 1px solid #dedfd9;
		text-align: left;
		vertical-align: middle;
	}

	.gs22-item-options th {
		width: 34%;
		color: #5f685f;
		font-size: 12px;
		font-weight: 500;
	}

	.gs22-item-options select,
	.gs22-item-options input {
		max-width: 100%;
		min-height: 42px;
		padding: 7px 10px;
		border: 1px solid #cbd1c9;
		background: #fff;
		font-size: 14px;
	}

	.gs22-item .addtocart {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
		margin-top: 20px;
		font-size: 13px;
	}

	.gs22-item .addtocart input[type="text"],
	.gs22-item .addtocart input[type="number"],
	.gs22-item .addtocart select {
		width: 74px;
		min-height: 46px;
		padding: 8px;
		border: 1px solid #cbd1c9;
		background: #fff;
		text-align: center;
	}

	.gs22-item .addtocart input[type="submit"],
	.gs22-item .skubutton {
		flex: 1 1 210px;
		min-height: 50px;
		padding: 12px 24px;
		border: 1px solid #284537;
		border-radius: 0;
		background: #284537;
		color: #fff;
		font-size: 14px;
		letter-spacing: 0.04em;
		cursor: pointer;
		transition: background-color 0.25s ease, color 0.25s ease;
	}

	.gs22-item .addtocart input[type="submit"]:hover,
	.gs22-item .skubutton:hover {
		background: #fff;
		color: #284537;
	}

	.gs22-item .zaiko_status {
		margin-top: 18px;
		padding: 14px;
		background: #e9e9e5;
		color: #555;
		font-size: 14px;
		text-align: center;
	}

	.gs22-item .error_message,
	.gs22-item .error {
		margin: 10px 0 0;
		color: #a34036;
		font-size: 12px;
	}

	.gs22-item .field {
		margin-top: 24px;
	}

	.gs22-sku-box {
		margin-top: 20px;
		padding: 22px;
		border: 1px solid #dfe3dc;
		background: #fff;
	}

	.gs22-sku-box:first-child {
		margin-top: 0;
	}

	.gs22-sku-title {
		margin: 0 0 16px;
		padding: 10px 14px;
		background: #536654;
		color: #fff;
		font-size: 15px;
		font-weight: 500;
	}

	.gs22-sku-title span {
		margin-left: 8px;
		color: rgba(255, 255, 255, 0.7);
		font-size: 11px;
	}

	.gs22-related {
		margin-top: 80px;
		padding-top: 42px;
		border-top: 1px solid #dfe3dc;
	}

	.gs22-related-title {
		margin: 0 0 28px;
		color: #304438;
		font-family:
			"Yu Mincho",
			"Hiragino Mincho ProN",
			serif;
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-align: center;
	}

	.gs22-related .thumbindex {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}

	.gs22-related .thumbindex::before,
	.gs22-related .thumbindex::after {
		display: none;
	}

	.gs22-related img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	.gs22-back {
		margin-top: 50px;
		text-align: center;
	}

	.gs22-back a {
		display: inline-block;
		padding-bottom: 4px;
		border-bottom: 1px solid #667467;
		color: #435347;
		font-size: 13px;
		text-decoration: none;
	}

	.gs22-image-modal {
		position: fixed;
		inset: 0;
		z-index: 999999;
		display: none;
		align-items: center;
		justify-content: center;
		padding: 32px;
		background: rgba(15, 24, 19, 0.9);
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.gs22-image-modal.is-open {
		display: flex;
		opacity: 1;
	}

	.gs22-image-modal-inner {
		display: flex;
		max-width: 100%;
		max-height: 100%;
		align-items: center;
		justify-content: center;
	}

	.gs22-image-modal-image {
		display: block;
		width: auto;
		max-width: min(94vw, 1500px);
		height: auto;
		max-height: 88vh;
		margin: 0;
		object-fit: contain;
		box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
	}

	.gs22-image-modal-close {
		position: fixed;
		top: 18px;
		right: 22px;
		z-index: 2;
		display: flex;
		width: 46px;
		height: 46px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.55);
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.24);
		color: #fff;
		font-size: 30px;
		line-height: 1;
		cursor: pointer;
	}

	.gs22-image-modal-caption {
		position: fixed;
		right: 24px;
		bottom: 18px;
		left: 24px;
		margin: 0;
		color: rgba(255, 255, 255, 0.78);
		font-size: 12px;
		text-align: center;
	}

	body.gs22-modal-open {
		overflow: hidden;
	}

	@media screen and (max-width: 900px) {
		.gs22-item {
			width: min(100% - 32px, 1180px);
			padding-top: 48px;
		}

		.gs22-item-main {
			grid-template-columns: 1fr;
			gap: 38px;
		}

		.gs22-related .thumbindex {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media screen and (max-width: 600px) {
		.gs22-item {
			width: calc(100% - 24px);
			padding: 34px 0 65px;
		}

		.gs22-item-main {
			gap: 28px;
		}

		.gs22-item-sub-images {
			gap: 8px;
			margin-top: 8px;
		}

		.gs22-item-title {
			padding-bottom: 16px;
			font-size: 26px;
		}

		.gs22-item-description {
			margin-top: 22px;
			font-size: 13px;
		}

		.gs22-order {
			margin-top: 24px;
			padding: 20px 16px;
		}

		.gs22-price-row {
			grid-template-columns: 100px minmax(0, 1fr);
		}

		.gs22-price-value.field_price {
			font-size: 21px;
		}

		.gs22-item .addtocart {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
		}

		.gs22-item .addtocart input[type="submit"],
		.gs22-item .skubutton {
			grid-column: 1 / -1;
			width: 100%;
		}

		.gs22-image-modal {
			padding: 16px;
		}

		.gs22-image-modal-image {
			max-width: 100%;
			max-height: 82vh;
		}

		.gs22-image-modal-close {
			top: 10px;
			right: 10px;
			width: 42px;
			height: 42px;
			font-size: 27px;
		}

		.gs22-image-modal-caption {
			right: 16px;
			bottom: 12px;
			left: 16px;
			font-size: 10px;
		}
	}