/**
 * 色選択（商品ページのスウォッチ）と色見本ショートコード [wcop_color_chart]
 * テーマ slowtowel-ec の商品ページ（.group-add-item .skuform .item-option）に合わせた見た目
 */

/* ---------- 商品ページ: 色選択 ---------- */
.wcop-color-select {
	margin: 0 0 1.7rem;
}

.group-add-item .skuform .wcop-color-select .item-option,
.wcop-color-select .wcop-color-option {
	margin: 0 0 1.3rem;
}

.wcop-color-select .wcop-color-option dt {
	margin-bottom: 0.5rem;
	font-weight: bold;
}

.wcop-color-select .wcop-color-option dd {
	margin: 0;
}

.wcop-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}

/* label（radio を包む） */
.wcop-color-select .wcop-swatch-item {
	position: relative;
	display: inline-flex;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

/* radio は見た目だけ隠す（キーボード操作・読み上げは radio のまま） */
.wcop-color-select .wcop-swatch-input[type=radio] {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	pointer-events: none;
}

.wcop-color-select .wcop-swatch-input[type=radio]::after {
	content: none;
}

.wcop-swatch {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	width: 42px;
	min-height: 42px;
	margin: 0;
	padding: 4px 0 3px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wcop-swatch-item:hover .wcop-swatch {
	background-color: #f5f5f2;
}

.wcop-swatch__chip {
	display: block;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.wcop-swatch__no {
	margin-top: 2px;
	color: #555;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0;
}

.wcop-swatch__badge {
	position: absolute;
	top: -5px;
	right: -4px;
	padding: 1px 3px;
	border: 1px solid #c2185b;
	border-radius: 6px;
	background: #fff;
	color: #c2185b;
	font-size: 9px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: 0;
}

/* 選択中 */
.wcop-swatch-input:checked + .wcop-swatch {
	border-color: #203b35;
	background-color: #f2f7f5;
}

.wcop-swatch-input:checked + .wcop-swatch .wcop-swatch__chip {
	box-shadow: inset 0 0 0 2px #fff;
}

/* キーボードフォーカス（白・淡色の背景に対してコントラスト 3:1 以上。選択中の枠 #203b35 とは別の色にする） */
.wcop-swatch-input:focus + .wcop-swatch {
	outline: 2px solid #3d7d62;
	outline-offset: 2px;
}

.wcop-swatch-input:focus:not(:focus-visible) + .wcop-swatch {
	outline: none;
}

/* 一覧にない色（要相談） */
.wcop-swatch--other {
	flex-direction: row;
	gap: 6px;
	width: auto;
	padding: 4px 10px 4px 5px;
	border: 1px dashed #b5b5b5;
	border-radius: 999px;
}

.wcop-swatch-input:checked + .wcop-swatch--other {
	border: 2px solid #203b35;
	padding: 3px 9px 3px 4px;
}

.wcop-swatch__chip--other,
.wcop-color-current__chip.is-other {
	background: conic-gradient(#e60042, #f49c00, #fff796, #04a969, #009ce1, #8481bd, #e60042);
}

.wcop-swatch__chip--other {
	width: 22px;
	height: 22px;
}

.wcop-swatch__other-text {
	color: #424242;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}

/* 選択中の色の表示 */
.wcop-color-current {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0.5rem 0 0;
	color: #424242;
	font-size: 0.9rem;
	line-height: 1.5;
}

.wcop-color-current__label {
	color: #777;
}

.wcop-color-current__chip {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
}

.wcop-color-option.is-selected .wcop-color-current__value {
	font-weight: bold;
}

/* 蛍光バッジ（選択中表示・色見本） */
.wcop-color-badge {
	display: inline-block;
	padding: 0 0.4em;
	border: 1px solid #c2185b;
	border-radius: 4px;
	color: #c2185b;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 1.5;
	vertical-align: middle;
}

/* 要相談の記入欄: 「一覧にない色」を選んだときだけ表示 */
.wcop-color-note-field {
	display: none;
	margin: 0.6rem 0 0;
}

.wcop-color-option.is-other .wcop-color-note-field {
	display: block;
}

/* JS が動かない環境向け（:has 非対応ブラウザでは上の .is-other が効く） */
.wcop-color-option:has(.wcop-swatch-input[value="other"]:checked) .wcop-color-note-field {
	display: block;
}

.wcop-color-note-field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
}

.wcop-color-note-field input[type=text] {
	max-width: 100%;
	box-sizing: border-box;
}

.wcop-color-hint {
	margin: 0.4rem 0 0;
	color: #666;
	font-size: 0.8rem;
	line-height: 1.6;
}

/* 刺繍糸の色: 「＋刺繍糸の色を追加」「この色を削除」（テーマの button のリセットを打ち消して欄の見た目に合わせる） */
.wcop-color-select .wcop-thread-actions {
	margin: 0;
}

.wcop-color-select .wcop-thread-add,
.wcop-color-select .wcop-thread-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wcop-color-select .wcop-thread-add {
	min-height: 44px;
	margin: 0 0 1.3rem;
	padding: 6px 16px;
	border: 1px dashed #3d7d62;
	color: #203b35;
	font-size: 0.9rem;
	font-weight: bold;
}

.wcop-color-select .wcop-thread-add:hover {
	border-style: solid;
	background-color: #f2f7f5;
}

.wcop-color-select .wcop-thread-remove {
	min-height: 36px;
	margin: 0.6rem 0 0;
	padding: 4px 12px;
	border: 1px solid #c8c8c8;
	color: #555;
	font-size: 0.8rem;
}

.wcop-color-select .wcop-thread-remove:hover {
	border-color: #555;
	background-color: #f5f5f2;
	color: #333;
}

.wcop-color-select .wcop-thread-add:focus-visible,
.wcop-color-select .wcop-thread-remove:focus-visible {
	outline: 2px solid #3d7d62;
	outline-offset: 2px;
}

.wcop-color-select .wcop-thread-add[hidden],
.wcop-color-select .wcop-thread-remove[hidden] {
	display: none;
}

/* 注記と色見本へのリンク */
.wcop-color-disclaimer {
	margin: 0;
	color: #666;
	font-size: 0.8rem;
	line-height: 1.6;
}

.wcop-color-disclaimer a {
	color: #3d7d62;
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
	white-space: nowrap;
}

.wcop-color-disclaimer a:hover {
	color: #2a5c47;
	border-bottom-style: solid;
}

.wcop-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media screen and (max-width: 480px) {
	.wcop-swatches {
		gap: 4px;
	}

	.wcop-swatch:not(.wcop-swatch--other) {
		width: 40px;
	}
}

/* ---------- 色見本ショートコード ---------- */
.wcop-color-chart {
	margin: 1.5em 0 2em;
}

.wcop-color-chart__heading {
	margin: 0 0 0.8em;
}

.wcop-color-chart__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcop-color-chart__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcop-color-chart__item::before {
	content: none;
}

.wcop-color-chart__chip {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.wcop-color-chart__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 0.85rem;
	line-height: 1.45;
}

.wcop-color-chart__no,
.wcop-color-chart__pantone {
	color: #666;
	font-size: 0.75rem;
}

.wcop-color-chart__name {
	font-weight: bold;
}

@media screen and (max-width: 480px) {
	.wcop-color-chart__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 12px;
	}
}