/* ==========================================================================
   この計算に使う道具（物販アフィリエイト）— 共通部品
   低侵襲：結果の後に、静かな枠で。派手な色やアニメーションは使わない。
   ========================================================================== */

.tool-shopping {
	margin: 20px 0 0;
	padding: 18px 20px 14px;
	background: #fbfaf7;
	border: 1px solid var(--color-border, #e0dcd6);
	border-radius: 12px;
}

.tool-shopping-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.tool-shopping-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text, #333);
	margin: 0;
}

.tool-shopping-ad {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #b9b3aa;
	border-radius: 4px;
	font-size: 11px;
	line-height: 1.4;
	color: #6b655d;
	background: #fff;
}

.tool-shopping-lead {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--color-text-secondary, #666);
}

.tool-shopping-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.tool-shopping-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--color-border, #e0dcd6);
	border-radius: 8px;
}

.tool-shopping-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text, #333);
}

.tool-shopping-links {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.tool-shopping-link {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	white-space: nowrap;
}

.tool-shopping-link--amazon {
	color: #7a4b00;
	background: #fff3d6;
	border-color: #f1d28a;
}

.tool-shopping-link--rakuten {
	color: #8f1616;
	background: #fde9e9;
	border-color: #f3b4b4;
}

.tool-shopping-link--yahoo {
	color: #8a2b6e;
	background: #f9e6f3;
	border-color: #e9b5d8;
}

.tool-shopping-link:hover {
	filter: brightness(0.97);
	text-decoration: none;
}

.tool-shopping-note {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--color-text-muted, #888);
}

@media (max-width: 600px) {
	.tool-shopping {
		padding: 16px 14px 12px;
	}

	.tool-shopping-item {
		flex-direction: column;
		align-items: flex-start;
	}
}