/* =============================================================================
   07-product.css
   商品 CPT のアーカイブ・シングルテンプレートと、お見積もりフォーム。
   - archive-product.php
   - single-product.php
   - estimate-form (estimate/* および page-est.php から使われる)
   ============================================================================= */

@layer product {

	/* ==========================================================================
	   Product Archive (商品一覧)
	   ========================================================================== */
	.product-archive-section {
		padding: 40px 20px 60px;

		.section-title { font-size: 28px; }
	}
	.archive-description {
		max-width: 760px;
		margin: 0 auto 30px;
		color: #555;
		font-size: 14px;
		line-height: 1.7;
		text-align: center;
	}
	.product-card-link {
		display: block;
		text-decoration: none;
		color: inherit;

		h3 { transition: color 0.2s; }
		&:hover h3 { color: var(--color-primary); }
	}

	.archive-pagination {
		margin-top: 50px;
		text-align: center;

		.page-numbers {
			display: inline-block;
			padding: 8px 14px;
			margin: 0 4px;
			border: 1px solid #ddd;
			border-radius: 4px;
			color: #333;
			text-decoration: none;
			font-size: 14px;

			&.current {
				background: var(--color-primary);
				color: #fff;
				border-color: var(--color-primary);
			}
		}
	}
	.archive-empty { text-align: center; color: #777; padding: 40px 0; }

	/* ==========================================================================
	   Single Product
	   ========================================================================== */
	.single-product { text-align: left; }
	.product-detail {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		margin-bottom: 60px;

		@media (max-width: 768px) { grid-template-columns: 1fr; gap: 24px; }
	}
	.product-detail-image .img-box {
		width: 100%;
		aspect-ratio: 1 / 1;
	}
	.product-cats {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		margin-bottom: 12px;
	}
	.cat-tag {
		display: inline-block;
		padding: 3px 10px;
		background: #f4f7fa;
		color: #004494;
		font-size: 11px;
		border-radius: 3px;
		text-decoration: none;
		font-weight: bold;

		&:hover { background: #004494; color: #fff; }
	}
	.product-title {
		font-size: 28px;
		margin: 0 0 20px;
		line-height: 1.3;

		@media (max-width: 768px) { font-size: 22px; }
	}
	.product-price {
		color: #004494;
		margin-bottom: 25px;
		padding-bottom: 20px;
		border-bottom: 1px solid #eee;

		.currency { font-size: 16px; }
		.amount {
			font-size: 36px;
			font-weight: bold;

			@media (max-width: 768px) { font-size: 28px; }
		}
		.suffix { font-size: 18px; }
		.tax-info { font-size: 11px; color: #888; margin-left: 8px; }
	}

	.product-spec-table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 30px;

		th, td {
			padding: 12px 8px;
			border-bottom: 1px solid #eee;
			font-size: 14px;
			text-align: left;
			vertical-align: top;
		}
		th {
			width: 130px;
			background: #fafafa;
			font-weight: bold;
			color: #555;
		}
	}

	.product-detail-actions {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;

		.btn-outline,
		.btn-primary {
			flex: 1;
			min-width: 200px;
			justify-content: center;
		}
	}

	.product-description {
		background: #f8fbff;
		padding: 40px;
		border-radius: 10px;
		margin-bottom: 60px;

		h2 {
			font-size: 20px;
			margin-bottom: 16px;
			color: #004494;
		}
		p { line-height: 1.8; }
	}

	/* ==========================================================================
	   Estimate Form (お見積もりフォーム)
	   ========================================================================== */
	.estimate-section {
		max-width: 920px;
		padding: 40px 20px 60px;
		text-align: left;

		.section-title { text-align: center; }
	}
	.estimate-lead {
		text-align: center;
		color: #555;
		margin-bottom: 40px;
		font-size: 14px;
	}

	.estimate-product-context {
		display: flex;
		gap: 16px;
		align-items: center;
		max-width: 720px;
		margin: 0 auto 24px;
		padding: 16px 20px;
		background: #fff8f3;
		border: 1px solid #ffd9bf;
		border-radius: 8px;

		.estimate-product-context-thumb {
			flex: 0 0 80px;
			width: 80px;
			height: 80px;
			border-radius: 6px;
			overflow: hidden;
			background: #fff;
			border: 1px solid #f0d4be;

			img { width: 100%; height: 100%; object-fit: cover; display: block; }
		}
		.estimate-product-context-body {
			flex: 1 1 auto;
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: 2px;
		}
		.estimate-product-context-label {
			font-size: 11px;
			color: var(--jamble-color-accent, #f24e00);
			font-weight: 600;
			letter-spacing: .03em;
		}
		.estimate-product-context-title {
			font-size: 16px;
			font-weight: 700;
			color: var(--jamble-color-text, #222);
			line-height: 1.4;
		}
		.estimate-product-context-code {
			font-size: 12px;
			color: var(--jamble-color-text-muted, #666);
		}
		.estimate-product-context-link {
			align-self: flex-start;
			margin-top: 4px;
			font-size: 12px;
			color: var(--jamble-color-accent, #f24e00);
			text-decoration: none;

			&:hover { text-decoration: underline; }
		}
	}
	@media (max-width: 480px) {
		.estimate-product-context {
			.estimate-product-context-thumb { flex-basis: 60px; width: 60px; height: 60px; }
			.estimate-product-context-title { font-size: 14px; }
		}
	}

	.estimate-form {

		.form-fieldset {
			border: 1px solid #e0e0e0;
			border-radius: 8px;
			padding: 25px 30px 10px;
			margin-bottom: 30px;
			background: #fff;

			@media (max-width: 768px) { padding: 20px 18px 10px; }

			.form-row:last-of-type { border-bottom: none; }
		}
		.form-legend {
			padding: 6px 16px;
			background: #004494;
			color: #fff;
			font-weight: bold;
			font-size: 14px;
			border-radius: 4px;
		}

		.form-row {
			display: grid;
			grid-template-columns: 200px 1fr;
			gap: 16px;
			align-items: flex-start;
			padding: 16px 0;
			border-bottom: 1px solid #f0f0f0;

			@media (max-width: 768px) { grid-template-columns: 1fr; gap: 8px; }
		}
		.form-control-wrap { min-width: 0; }
		.form-label {
			font-size: 13px;
			font-weight: bold;
			color: #333;
			padding-top: 10px;

			@media (max-width: 768px) { padding-top: 0; }

			&.required::after {
				content: '必須';
				display: inline-block;
				margin-left: 8px;
				padding: 1px 6px;
				font-size: 10px;
				background: #f24e00;
				color: #fff;
				border-radius: 3px;
				font-weight: bold;
			}
		}
		.form-control {
			width: 100%;
			padding: 10px 12px;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 14px;
			font-family: inherit;
			background: #fff;
			transition: border-color 0.2s;

			&:focus {
				outline: none;
				border-color: #004494;
				box-shadow: 0 0 0 2px rgba(0, 68, 148, 0.1);
			}
		}
		textarea.form-control { resize: vertical; min-height: 120px; }
		select.form-control { appearance: auto; }

		/* 数量自由入力（規格サイズ紙袋など） */
		.product-inline-form-qty {
			display: inline-flex;
			align-items: center;
			gap: 8px;
		}
		.product-inline-form-qty .form-control { width: 200px; }
		.product-inline-form-qty-unit { color: #555; font-size: 14px; }

		/* ハニーポット完全非表示 */
		.hp-field {
			position: absolute !important;
			left: -9999px;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}

		.form-actions { text-align: center; margin-top: 30px; }
		.form-submit {
			border: none;
			cursor: pointer;
			font-family: inherit;
			padding: 14px 40px;
			font-size: 15px;
			/* 送信ボタン色：未入力のうちはグレーアウト気味、必須項目がすべて
			   正しく入力されると validation-init.js が .is-ready を付与し、
			   送信OKを示す緑に変化する。 */
			color: #fff;
			background: #9e9e9e;
			border-radius: 6px;
			box-shadow: none;
			transition: background-color .2s ease, box-shadow .2s ease;

			&:hover { background: #8a8a8a; }

			&.is-ready {
				background: #28a745;
				box-shadow: 0 4px 12px rgba(40, 167, 69, .25);
			}
			&.is-ready:hover { background: #218838; }
		}

		/* バリデーションエラー吹き出し（validation-init.js が生成） */
		.jb-form-error {
			position: relative;
			display: inline-block;
			margin-top: 8px;
			padding: 6px 12px;
			background: #f24e00;
			color: #fff;
			font-size: 12px;
			font-weight: 600;
			line-height: 1.4;
			border-radius: 4px;
			box-shadow: 0 2px 8px rgba(242, 78, 0, 0.25);
			animation: jb-form-error-in 0.15s ease-out;
		}
		.jb-form-error::before {
			content: '';
			position: absolute;
			top: -6px;
			left: 14px;
			width: 0; height: 0;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 6px solid #f24e00;
		}
		.has-error > input,
		.has-error > select,
		.has-error > textarea,
		.has-error input.form-control,
		.has-error select.form-control,
		.has-error textarea.form-control {
			border-color: #f24e00 !important;
			background: #fff5f0;
		}
		@keyframes jb-form-error-in {
			from { opacity: 0; transform: translateY(-4px); }
			to   { opacity: 1; transform: translateY(0); }
		}
		/* Radio / Checkbox 横並び（チェックボックスもラジオと同じグリッド配置・リストマーカー無し） */
		.radio-row,
		.check-row {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			gap: 8px;

			&.col-2 { grid-template-columns: repeat(2, 1fr); }
			&.col-3 {
				grid-template-columns: repeat(3, 1fr);
				@media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); }
			}
			&.col-4 {
				grid-template-columns: repeat(4, 1fr);
				@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
			}
			&.col-5 {
				grid-template-columns: repeat(5, 1fr);
				@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
			}
		}

		.check-block {
			display: block;
			padding: 10px 12px;
			border: 1px solid #ddd;
			border-radius: 4px;
			background: #fafafa;
			font-size: 13px;
			cursor: pointer;
			transition: all 0.2s;
			text-align: center;

			&:hover { background: #f0f4f8; border-color: #004494; }
			&:has(input:checked) {
				background: #fff5ef;
				border-color: #f24e00;
				color: #f24e00;
				font-weight: bold;
			}

			input[type="radio"],
			input[type="checkbox"] {
				margin-right: 4px;
				vertical-align: middle;
			}
		}
		.size-name { display: block; font-weight: bold; }
		.size-spec { display: block; font-size: 10px; color: #888; margin-top: 2px; }

		/* 住所: 都道府県は従来幅のまま、市区町村以降・番地は1カラムで幅いっぱい */
		.address-row {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: 1fr;
			gap: 10px;

			/* 都道府県（先頭）だけは今までと同じ 200px 幅を維持 */
			li:first-child { max-width: 200px; }
		}

		/* サイズ W/H/G 横並び */
		.size-input-row {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			gap: 16px;
			align-items: center;
			flex-wrap: wrap;

			li {
				display: flex;
				align-items: center;
				gap: 6px;
				font-weight: bold;
			}
			input.form-control { width: 120px; }
		}

		/* 同意欄 */
		.form-row-consent {
			background: #f8fbff;
			border-radius: 6px;
			padding: 20px;
			margin: 30px 0;
			border-bottom: none;

			/* 「個人情報の取り扱いについての同意」の項目名を1行に収めるため、
			   この行だけラベル列を内容幅に合わせて広げる（他の行は 200px のまま） */
			grid-template-columns: auto 1fr;

			.form-label { white-space: nowrap; }

			@media (max-width: 768px) {
				grid-template-columns: 1fr;
				.form-label { white-space: normal; }
			}
		}
		.check-inline {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 14px;
			font-weight: bold;
		}

		/* 注釈文 */
		.form-note-inline {
			font-size: 11px;
			color: #888;
			margin-top: 6px;
			line-height: 1.5;
		}
	}

}

/* ===========================================================================
 * single-product 共通ブロック（紙袋／ポリ袋／不織布）
 * inc/product-blocks/ から呼ばれるパーツのスタイル
 * =========================================================================== */

.single-product {
	.product-breadcrumb {
		padding: 12px 0;
		font-size: 13px;
		color: var(--jamble-color-text-muted, #666);
		background: var(--jamble-color-bg-soft, #f7f7f7);

		.container { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
		a { color: inherit; text-decoration: none; }
		a:hover { color: var(--jamble-color-accent, #f24e00); }
		.sep { color: #bbb; }
		.current { color: var(--jamble-color-text, #222); font-weight: 600; }
	}

	.product-main {
		padding: 32px 0;

		.product-main-grid {
			display: grid;
			gap: 32px;
			grid-template-columns: minmax(0, 1fr);
		}
		@media (min-width: 768px) {
			.product-main-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
		}
	}

	.product-gallery {
		.product-gallery-image {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 6px;
			background: #fafafa;
		}

		/* Splide 未マウント時のフォールバック：メインは 1 枚目だけ見せる */
		.product-gallery-main:not(.is-initialized) {
			.splide__list { list-style: none; padding: 0; margin: 0; }
			.splide__slide { display: none; }
			.splide__slide:first-child { display: block; }
		}

		.product-gallery-thumbs {
			margin-top: 12px;

			/* Splide 未マウント時：5列でラップ表示 */
			&:not(.is-initialized) {
				.splide__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
				.splide__slide { width: calc((100% - 32px) / 5); cursor: pointer; }
			}
			/* マウント後：Splide が幅・配置を制御するので干渉しない */
			&.is-initialized .splide__slide { cursor: pointer; }

			.product-gallery-thumb {
				display: block;
				width: 100%;
				height: auto;
				border: 2px solid transparent;
				border-radius: 4px;
				transition: border-color .15s ease;
			}
			.is-active .product-gallery-thumb,
			.product-gallery-thumb:hover { border-color: var(--jamble-color-accent, #f24e00); }
		}
	}

	.product-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
	}
	.product-badge {
		display: inline-flex;
		align-items: center;
		padding: 4px 12px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.4;
		background: #eee;
		color: #333;

		small { font-size: 10px; font-weight: 400; margin-left: 2px; }
	}
	.product-badge-category {
		background: #333; color: #fff;
		&.is-standard  { background: #2670cc; }
		&.is-onepoint  { background: #f24e00; }
		&.is-quick,
		&.is-opp       { background: #d33; }
		&.is-flexo     { background: #2c8a6a; }
		&.is-foil,
		&.is-hakuoshi  { background: #b48b1c; }
		&.is-naire     { background: #6b3d20; }
		&.is-fullorder { background: #444; }
	}
	.product-badge-material {
		background: #555; color: #fff;
		&.is-opp       { background: #2670cc; }
		&.is-nashiji   { background: #e07a2b; }
		&.is-ldpe      { background: #2c8a6a; }
		&.is-hdpe      { background: #8c43c1; }
	}
	.product-badge-print {
		background: #d33; color: #fff;
		&.is-print-1 { background: #d33; }
		&.is-print-2 { background: #b94800; }
		&.is-print-4 { background: linear-gradient(45deg, #d33, #f5b517, #2c8a6a, #2670cc); }
	}

	.product-title {
		margin: 0 0 12px;
		font-size: clamp(20px, 2.4vw, 28px);
		font-weight: 700;
		line-height: 1.4;
	}
	.product-introduction {
		margin: 0 0 16px;
		font-size: 14px;
		color: #555;
	}

	.product-price-block {
		margin: 16px 0;
		padding: 16px;
		border-radius: 6px;
		background: #fff8f3;
		.product-price-lead {
			display: block;
			font-size: 12px;
			color: #888;
			margin-bottom: 4px;
		}
		.product-price-total {
			font-size: clamp(22px, 3vw, 32px);
			font-weight: 700;
			color: #d33;
		}
		.product-price-unit {
			font-size: 16px;
			color: #555;
			margin-left: 6px;
		}
		.product-price-tax {
			font-size: 11px;
			color: #888;
			margin-left: 6px;
		}
	}

	.product-spec-table {
		width: 100%;
		margin: 16px 0;
		border-collapse: collapse;
		font-size: 14px;

		th, td {
			padding: 10px 12px;
			border: 1px solid #e5e5e5;
			text-align: left;
			vertical-align: top;
		}
		th {
			width: 30%;
			background: #f7f7f7;
			font-weight: 600;
			color: #333;
		}
	}

	.product-colors {
		margin: 16px 0;
		.product-colors-heading {
			margin: 0 0 8px;
			font-size: 14px;
			font-weight: 600;
		}
		.product-colors-count {
			color: #888;
			font-weight: 400;
		}
		.product-colors-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
			gap: 8px;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.product-colors-item {
			text-align: center;
		}
		.product-colors-button {
			display: block;
			width: 100%;
			padding: 0;
			background: transparent;
			border: 0;
			cursor: pointer;
			font: inherit;
			color: inherit;
			text-align: center;
		}
		.product-colors-swatch {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 4px;
			border: 2px solid #eee;
			transition: border-color .15s ease, transform .15s ease;
		}
		.product-colors-button:hover .product-colors-swatch,
		.product-colors-button:focus-visible .product-colors-swatch {
			border-color: var(--jamble-color-accent, #f24e00);
		}
		.product-colors-item.is-active .product-colors-swatch {
			border-color: var(--jamble-color-accent, #f24e00);
			box-shadow: 0 0 0 1px var(--jamble-color-accent, #f24e00) inset;
		}
		.product-colors-name {
			display: block;
			margin-top: 4px;
			font-size: 11px;
			color: #555;
		}
	}

	.product-actions {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 24px 0;

		.product-estimate-form { display: contents; }

		.product-actions-reassure {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
			margin: 0;
			padding: 8px 12px;
			background: #fff8f3;
			border-radius: 6px;
			font-size: 12px;
			color: var(--jamble-color-accent, #f24e00);
			font-weight: 600;
		}
		.product-actions-reassure-sep { color: #f5a880; font-weight: 400; }
		.product-actions-helper {
			margin: 0;
			font-size: 12px;
			color: var(--jamble-color-text-muted, #666);
			text-align: center;
		}

		.btn-primary,
		.btn-outline {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			gap: 4px;
			padding: 14px 24px;
			border-radius: 6px;
			font-size: 16px;
			font-weight: 700;
			text-decoration: none;
			line-height: 1.4;
			border: 2px solid transparent;
			cursor: pointer;
		}
		.btn-primary {
			background: var(--jamble-color-accent, #f24e00);
			color: #fff;
			box-shadow: 0 4px 12px rgba(242, 78, 0, .2);
		}
		.btn-primary:hover { background: #d63f00; transform: translateY(-1px); color: #fff; }
		.btn-outline {
			background: var(--jamble-color-accent, #f24e00);
			color: #fff;
			box-shadow: 0 4px 12px rgba(242, 78, 0, .2);
		}
		.btn-outline:hover { background: #d63f00; transform: translateY(-1px); color: #fff; }
	}

	/* モバイル（< 768px）: 画面下の sticky CTA が見積もり導線を担うため、
	   インライン CTA 下の「お見積もり」ボタンは非表示にする */
	@media (max-width: 767px) {
		.product-actions .product-contact-btn { display: none; }
	}

	/* PC（>= 768px）: インライン CTA ボタン / 安心訴求 / ヘルパーは inline-form が代替するので隠す */
	@media (min-width: 768px) {
		.product-actions {
			.product-actions-reassure,
			.product-actions-helper,
			.product-estimate-btn--inline { display: none; }
			.product-estimate-form { display: none; }
		}
	}

	/* 商品詳細埋め込みフォーム（PC のみ）。content-visibility で初期描画コスト削減 */
	.product-inline-form {
		display: none;
		padding: 40px 0 60px;
		background: #fafafa;
		border-top: 1px solid #ececec;
		content-visibility: auto;
		contain-intrinsic-size: 1px 1200px;

		/* .container から継承される text-align:center を打ち消す。
		   見出し・リード・送信ボタンは個別に center を維持。 */
		text-align: left;

		.container {
			max-width: 920px;
			text-align: left; /* グローバル .container の center を上書き */
		}

		.product-inline-form-heading {
			margin: 0 0 8px;
			font-size: 22px;
			font-weight: 700;
			text-align: center;
		}
		.product-inline-form-lead {
			margin: 0 0 24px;
			text-align: center;
			font-size: 14px;
			color: var(--jamble-color-text-muted, #555);
			line-height: 1.7;

			.product-inline-form-lead-meta {
				display: inline-block;
				margin-left: 4px;
				padding: 2px 10px;
				background: #fff8f3;
				color: var(--jamble-color-accent, #f24e00);
				border-radius: 999px;
				font-size: 12px;
				font-weight: 600;
			}
		}

		.product-inline-form-summary {
			background: #fff;

			.product-inline-form-summary-grid {
				display: grid;
				grid-template-columns: 160px 1fr;
				gap: 16px;
				align-items: start;
			}
			.product-inline-form-summary-thumb {
				width: 160px;
				height: 160px;
				border-radius: 6px;
				overflow: hidden;
				background: #fafafa;
				border: 1px solid #eee;

				img { width: 100%; height: 100%; object-fit: cover; display: block; }
			}
			.product-inline-form-summary-table {
				width: 100%;
				border-collapse: collapse;
				font-size: 14px;

				th, td {
					padding: 8px 12px;
					border-bottom: 1px solid #f0f0f0;
					text-align: left;
					vertical-align: top;
				}
				th { width: 80px; color: #666; font-weight: 600; background: #fafafa; }
				tr:last-child th, tr:last-child td { border-bottom: 0; }
				a { color: var(--jamble-color-accent, #f24e00); text-decoration: none; }
				a:hover { text-decoration: underline; }
				small { color: #888; }
			}
		}

		.product-inline-form-colors,
		.product-inline-form-print {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
			gap: 8px;

			li { margin: 0; }
		}
		.product-inline-form-color,
		.product-inline-form-print-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4px;
			padding: 8px;
			border: 2px solid #e5e5e5;
			border-radius: 6px;
			background: #fff;
			cursor: pointer;
			text-align: center;
			font-size: 12px;
			transition: border-color .15s ease;

			input { margin: 0; }
			img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }

			&:hover { border-color: var(--jamble-color-accent, #f24e00); }
			&:has(input:checked) {
				border-color: var(--jamble-color-accent, #f24e00);
				background: #fff8f3;
			}
		}

		.product-inline-form-print--method {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;

			li { flex: 1 1 auto; }
			.product-inline-form-print-item { white-space: nowrap; }
		}

		.product-inline-form-qty {
			display: inline-flex;
			align-items: center;
			gap: 8px;

			.form-control { width: 160px; }
		}
		.product-inline-form-qty-unit { color: #555; font-size: 14px; }

		/* 数量行のみ「ラベル + 入力欄」を隣接させる（1fr 拡張で間延びするのを抑止） */
		.product-inline-form-qty-row {
			grid-template-columns: 200px auto;
			align-items: center;

			.form-label { padding-top: 0; }
		}
		@media (max-width: 768px) {
			.product-inline-form-qty-row { grid-template-columns: 1fr; }
		}

		.product-inline-form-radios {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-wrap: wrap;
			gap: 8px;

			&.product-inline-form-radios--column {
				flex-direction: column;
				gap: 8px;
			}
			li { margin: 0; }
		}
		/* 各ラジオを枠付きのボタン状にする（印刷色数の画像付き版とビジュアル統一） */
		.product-inline-form-radio-item {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 14px;
			border: 2px solid #e5e5e5;
			border-radius: 6px;
			background: #fff;
			cursor: pointer;
			font-size: 14px;
			line-height: 1.4;
			transition: border-color .15s ease, background-color .15s ease;

			input { margin: 0; flex: 0 0 auto; }

			&:hover { border-color: var(--jamble-color-accent, #f24e00); }
			&:has(input:checked) {
				border-color: var(--jamble-color-accent, #f24e00);
				background: #fff8f3;
			}
		}
		/* 縦並びリストの場合は枠を横いっぱいに広げる（納期未定理由・決済方法など） */
		.product-inline-form-radios--column .product-inline-form-radio-item {
			display: flex;
			width: 100%;
		}

		.form-actions { display: flex; justify-content: center; margin-top: 24px; }
		.form-submit {
			min-width: 280px;
			padding: 16px 32px;
			font-size: 16px;
			/* 送信ボタン色（見積フォームと共通の挙動）：未入力時はグレー、
			   必須が揃うと .is-ready が付いて送信OKの緑に変化する。 */
			color: #fff;
			background: #9e9e9e;
			border: none;
			border-radius: 6px;
			box-shadow: none;
			cursor: pointer;
			transition: background-color .2s ease, box-shadow .2s ease;

			&:hover { background: #8a8a8a; }

			&.is-ready {
				background: #28a745;
				box-shadow: 0 4px 12px rgba(40, 167, 69, .25);
			}
			&.is-ready:hover { background: #218838; }
		}
	}
	@media (min-width: 768px) {
		.product-inline-form { display: block; }
	}

	/* モバイル下部に固定する CTA バー（インライン CTA が画面外のときだけ表示） */
	.product-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		background: #fff;
		border-top: 1px solid var(--jamble-color-border, #e5e5e5);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform .2s ease;
		pointer-events: none;

		/* デフォルトは非表示。JS が .is-visible を付けたとき＆モバイル幅でのみ出現 */
		display: none;

		.product-sticky-cta-inner {
			display: flex;
			align-items: center;
			gap: 10px;
			max-width: 720px;
			margin: 0 auto;
		}
		.product-sticky-cta-text {
			flex: 1 1 auto;
			min-width: 0;
			display: flex;
			flex-direction: column;
			line-height: 1.3;
		}
		.product-sticky-cta-title {
			font-size: 13px;
			font-weight: 700;
			color: var(--jamble-color-text, #222);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.product-sticky-cta-note {
			font-size: 11px;
			color: var(--jamble-color-accent, #f24e00);
			font-weight: 600;
		}
		.product-estimate-form { display: contents; }
		.product-estimate-btn--sticky {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			padding: 10px 16px;
			border-radius: 6px;
			background: var(--jamble-color-accent, #f24e00);
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.2;
			border: 0;
			cursor: pointer;
			text-decoration: none;
			white-space: nowrap;
		}
		.product-estimate-btn--sticky:hover { background: #d63f00; color: #fff; }
	}
	.product-sticky-cta.is-visible {
		transform: translateY(0);
		pointer-events: auto;
	}
	@media (max-width: 767px) {
		.product-sticky-cta { display: block; }
	}

	.product-notices,
	.product-templates {
		margin: 24px 0;
	}
	.product-notice {
		padding: 12px 16px;
		border-left: 4px solid var(--jamble-color-accent, #f24e00);
		background: #fff8f3;
		margin-bottom: 12px;
		.product-notice-heading {
			margin: 0 0 6px;
			font-size: 14px;
			font-weight: 700;
		}
		.product-notice-body { font-size: 13px; line-height: 1.7; }
	}
	.product-templates-heading {
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 8px;
	}
	.product-templates-list {
		display: flex; flex-wrap: wrap; gap: 8px;
		list-style: none; padding: 0; margin: 0;
		.product-templates-btn {
			display: inline-block;
			padding: 8px 16px;
			background: #ffc107;
			color: #333;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 600;
			text-decoration: none;
		}
		.product-templates-btn:hover { background: #e0a800; }
	}

	.product-description {
		padding: 32px 0;
		background: #fafafa;
		.product-description-heading {
			margin: 0 0 16px;
			font-size: 20px;
			font-weight: 700;
		}
		.product-description-body { line-height: 1.8; font-size: 14px; }
	}

	.product-price-table {
		padding: 32px 0;

		.product-price-table-heading {
			margin: 0 0 8px;
			font-size: 20px;
			font-weight: 700;
		}
		.product-price-table-note {
			margin: 0 0 16px;
			font-size: 13px;
			color: var(--jamble-color-text-muted, #666);
		}
		.product-price-table-wrap {
			overflow-x: auto;
			border: 1px solid #e5e5e5;
			border-radius: 6px;
		}
		table {
			width: 100%;
			border-collapse: collapse;
			background: #fff;
			font-size: 14px;
		}
		thead th {
			background: #f5f5f5;
			color: #333;
			font-weight: 600;
			padding: 12px 16px;
			text-align: center;
			border-bottom: 1px solid #e5e5e5;
		}
		tbody th,
		tbody td {
			padding: 12px 16px;
			text-align: center;
			border-bottom: 1px solid #f0f0f0;
		}
		tbody tr:last-child th,
		tbody tr:last-child td { border-bottom: 0; }
		tbody th {
			font-weight: 600;
			background: #fafafa;
		}
		tbody td:last-child { font-weight: 700; }
		.product-price-table-tax {
			margin: 8px 0 0;
			font-size: 12px;
			color: var(--jamble-color-text-muted, #666);
		}
	}

	.product-related {
		padding: 32px 0;

		.product-related-heading {
			margin: 0 0 16px;
			font-size: 20px;
			font-weight: 700;
		}
		.product-related-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
			gap: 16px;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.product-related-link {
			display: block;
			text-decoration: none;
			color: inherit;
		}
		.product-related-image {
			width: 100%;
			height: auto;
			border-radius: 4px;
		}
		.product-related-title {
			display: block;
			margin-top: 8px;
			font-size: 13px;
			font-weight: 600;
			line-height: 1.4;
		}
		.product-related-caption {
			display: block;
			margin-top: 4px;
			font-size: 11px;
			color: #888;
		}
	}
}