/*
Theme Name: クラボ (Twenty Twenty-Five 子テーマ)
Template: twentytwentyfive
Version: 0.1.0
Description: クラボ専用デザイン(モノトーン+深緑、明朝×ゴシック)
*/

:root {
	--ggd-bg: #FAFAF8;
	--ggd-surface: #FFFFFF;
	--ggd-text-main: #2B2B2B;
	--ggd-text-sub: #6B6B6B;
	--ggd-border: #E4E4E0;
	--ggd-accent: #1F5E45;
	--ggd-accent-bg: #EAF2EE;
}

body {
	background: var(--ggd-bg);
	color: var(--ggd-text-main);
	overflow-x: hidden;
}

/* 見出しは明朝体 */
h1, h2, h3, h4,
.wp-block-post-title,
.entry-title {
	font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
	letter-spacing: 0.02em;
}

/* 本文・数値はゴシック体(テーマ本体のデフォルトを踏襲、明示指定) */
body, p, li, input, select, button {
	font-family: "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

a {
	color: var(--ggd-accent);
}

/* サイトロゴエリア */
.wp-block-site-title a {
	font-family: "游明朝", "Yu Mincho", serif;
	font-size: 22px;
}
.wp-block-site-tagline {
	font-size: 12px;
	color: var(--ggd-text-sub);
}

/* --- クラブ一覧・絞り込みバー --- */
.ggd-filter-bar {
	background: var(--ggd-surface);
	border: 1px solid var(--ggd-border);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 32px;
}
.ggd-filter-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin-bottom: 14px;
}
.ggd-filter-item label {
	font-size: 12px;
	color: var(--ggd-text-sub);
	display: block;
	margin-bottom: 6px;
}
.ggd-filter-item .row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ggd-filter-item input[type=range] {
	flex: 1;
	accent-color: var(--ggd-accent);
}
.ggd-filter-item input[type=number] {
	width: 70px;
	border: 1px solid var(--ggd-border);
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 13px;
}
.ggd-filter-item select {
	border: 1px solid var(--ggd-border);
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 13px;
	background: var(--ggd-surface);
	color: var(--ggd-text-main);
}
.ggd-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ggd-tag {
	font-size: 12px;
	border: 1px solid var(--ggd-border);
	border-radius: 999px;
	padding: 4px 12px;
	color: var(--ggd-text-sub);
	background: none;
	cursor: pointer;
}
.ggd-tag.active {
	background: var(--ggd-accent-bg);
	color: var(--ggd-accent);
	border-color: var(--ggd-accent-bg);
}

/* --- クラブカード --- */
.ggd-club-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
.ggd-club-card {
	background: var(--ggd-surface);
	border: 1px solid var(--ggd-border);
	border-radius: 14px;
	padding: 22px;
}
.ggd-club-card .maker {
	font-size: 12px;
	color: var(--ggd-text-sub);
	margin-bottom: 2px;
}
.ggd-club-card .model {
	font-family: "游明朝", "Yu Mincho", serif;
	font-size: 19px;
	margin-bottom: 16px;
}
.ggd-spec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.ggd-spec-box {
	background: var(--ggd-bg);
	border-radius: 8px;
	padding: 10px 12px;
}
.ggd-spec-box .label {
	font-size: 10px;
	color: var(--ggd-text-sub);
	margin-bottom: 2px;
}
.ggd-spec-box .value {
	font-size: 15px;
	font-weight: 600;
}
.ggd-spec-box-empty {
	opacity: 0.72;
}
.ggd-value-placeholder {
	font-size: 13px;
	font-weight: 400;
	font-style: italic;
	color: var(--ggd-text-sub);
}
.ggd-badge {
	display: inline-block;
	margin-top: 14px;
	font-size: 11px;
	background: var(--ggd-accent-bg);
	color: var(--ggd-accent);
	padding: 3px 10px;
	border-radius: 4px;
}
.ggd-btn {
	display: inline-block;
	margin-top: 16px;
	background: var(--ggd-accent);
	color: #fff;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
}
.ggd-btn:hover {
	background: #174936;
	color: #fff;
}

/* --- 楽天/Amazon商品パネル(クラブ詳細ページ) --- */
.ggd-commerce-panel {
	margin-top: 24px;
	padding: 20px;
	background: var(--ggd-bg);
	border-radius: 12px;
}
.ggd-commerce-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--ggd-text-sub);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ggd-r-badge {
	background: #BF0000;
	color: #fff;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 3px;
	font-weight: 700;
}
.ggd-a-badge {
	background: #232F3E;
	color: #FF9900;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 3px;
	font-weight: 700;
}
.ggd-product-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--ggd-surface);
	border: 1px solid var(--ggd-border);
	border-radius: 10px;
	padding: 14px 16px;
	flex-wrap: wrap;
}
.ggd-product-thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}
.ggd-product-info {
	flex: 1;
	min-width: 160px;
}
.ggd-product-shop {
	font-size: 10px;
	color: var(--ggd-text-sub);
}
.ggd-product-name {
	font-size: 13px;
	margin: 2px 0 6px;
	line-height: 1.4;
}
.ggd-product-price {
	font-size: 16px;
	font-weight: 600;
	color: #B12704;
}
.ggd-product-price span {
	font-size: 10px;
	color: var(--ggd-text-sub);
	font-weight: 400;
}
.ggd-status-ended {
	font-size: 12px;
	color: var(--ggd-text-sub);
	background: var(--ggd-bg);
	padding: 4px 10px;
	border-radius: 4px;
}
.ggd-status-upcoming {
	font-size: 12px;
	color: var(--ggd-accent);
	background: var(--ggd-accent-bg);
	padding: 4px 10px;
	border-radius: 4px;
}
.ggd-commerce-panel-upcoming {
	opacity: 0.85;
}
.ggd-upcoming-badge {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ggd-accent);
	background: var(--ggd-accent-bg);
	padding: 4px 12px;
	border-radius: 999px;
}
.ggd-release-info {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--ggd-text-sub);
}
.ggd-lefty-badge {
	display: inline-block;
	margin-top: 8px;
	margin-right: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ggd-text-sub);
	background: var(--ggd-bg-soft, #f0f0f0);
	padding: 3px 10px;
	border-radius: 999px;
}
.ggd-gender-variant-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
}
.ggd-gender-variant-link a {
	color: var(--ggd-accent);
	text-decoration: none;
}
.ggd-gender-variant-link a:hover {
	text-decoration: underline;
}
.ggd-commerce-disclosure {
	margin-top: 12px;
	font-size: 10px;
	color: #9B9B95;
	line-height: 1.6;
}
.ggd-auth-form {
	background: var(--ggd-surface);
	border: 1px solid var(--ggd-border);
	border-radius: 14px;
	padding: 28px;
	max-width: 420px;
}
.ggd-auth-form label {
	font-size: 12px;
	color: var(--ggd-text-sub);
}
.ggd-auth-form input[type=text],
.ggd-auth-form input[type=email],
.ggd-auth-form input[type=password] {
	width: 100%;
	border: 1px solid var(--ggd-border);
	border-radius: 8px;
	padding: 10px 12px;
	margin-top: 4px;
	font-size: 14px;
}
.ggd-auth-form button {
	background: var(--ggd-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
}

/* --- ページ全体のラップ・カード --- */
.ggd-page-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px;
}
.ggd-card {
	background: var(--ggd-surface);
	border: 1px solid var(--ggd-border);
	border-radius: 16px;
	padding: 32px;
}

/* --- 詳細ページヘッダー(画像+基本情報+技術メモ) --- */
.ggd-detail-header {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.ggd-detail-thumb img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--ggd-border);
}
.ggd-detail-header-info {
	flex: 1;
	min-width: 220px;
}
.ggd-detail-header-info .maker {
	font-size: 13px;
	color: var(--ggd-text-sub);
}
.ggd-detail-header-info .model {
	font-family: "游明朝", "Yu Mincho", serif;
	font-size: 26px;
	margin: 4px 0 0;
}
.ggd-tech-note {
	margin-top: 12px;
	background: var(--ggd-accent-bg);
	border-radius: 10px;
	padding: 14px 16px;
}
.ggd-tech-note-title {
	font-size: 11px;
	font-weight: 600;
	color: var(--ggd-accent);
	margin-bottom: 6px;
}
.ggd-tech-note-body {
	font-size: 12px;
	line-height: 1.7;
	color: var(--ggd-text-main);
}

/* --- 出典欄内のバッジ --- */
.ggd-source-note .ggd-badge {
	margin-right: 8px;
}

/* --- セクションブロック --- */
.ggd-section-list {
	margin-top: 32px;
	display: grid;
	gap: 24px;
}
.ggd-section-list > * {
	/* gridアイテムはデフォルトでmin-width:autoのため、横スクロール要素
	   (番手別スペックのカルーセル等)が中身の実サイズまで親を押し広げて
	   ページ全体が横スクロールしてしまう。min-width:0でこれを防ぐ。 */
	min-width: 0;
}
.ggd-section-heading {
	font-size: 15px;
	font-weight: 600;
	color: var(--ggd-text-main);
	margin-bottom: 12px;
	padding-left: 10px;
	border-left: 3px solid var(--ggd-accent);
}

.ggd-subheading {
	font-size: 13px;
	font-weight: 600;
	color: var(--ggd-text-sub);
	margin: 16px 0 8px;
}

.ggd-source-note {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--ggd-border);
	font-size: 12px;
	color: var(--ggd-text-sub);
}
.ggd-back-link {
	margin-top: 28px;
}
.ggd-back-link a {
	font-size: 13px;
}

/* --- 商品パネル内の購入ボタン(ブランド色別) --- */
.ggd-buy-btn {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	padding: 9px 20px;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
}
.ggd-buy-btn-rakuten {
	background: #BF0000;
	color: #fff;
}
.ggd-buy-btn-amazon {
	background: #FF9900;
	color: #0F1111;
}
.ggd-commerce-panel-ended {
	opacity: 0.6;
}

/* --- 平均値注釈・セクション脚注 --- */
.ggd-avg-note {
	display: block;
	font-size: 10px;
	font-weight: 400;
	color: var(--ggd-text-sub);
	margin-top: 2px;
}
.ggd-section-footnote {
	margin-top: 8px;
	font-size: 11px;
	color: var(--ggd-text-sub);
}

/* --- 調整機能・解説(折りたたみ) --- */
.ggd-details-block {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--ggd-border);
}
.ggd-details-block summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--ggd-accent);
	list-style: none;
}
.ggd-details-block summary::-webkit-details-marker {
	display: none;
}
.ggd-details-block summary::before {
	content: "▸ ";
}
.ggd-details-block[open] summary::before {
	content: "▾ ";
}
.ggd-details-body {
	margin-top: 12px;
}

/* --- 傾向表示(3軸スライダー) --- */
.ggd-tendency-block {
	margin-top: 28px;
	padding: 20px 22px;
	background: var(--ggd-bg);
	border-radius: 12px;
}
.ggd-tendency-title {
	font-size: 12px;
	color: var(--ggd-text-sub);
	margin-bottom: 14px;
}
.ggd-tendency-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.ggd-tendency-row {
	margin-bottom: 0;
	background: var(--ggd-surface);
	border-radius: 10px;
	padding: 14px 16px;
}
.ggd-tendency-category {
	font-size: 11px;
	color: var(--ggd-accent);
	font-weight: 600;
	margin-bottom: 6px;
}
.ggd-tendency-category span {
	font-weight: 400;
	color: var(--ggd-text-sub);
}
.ggd-tendency-labels {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--ggd-text-sub);
	margin-bottom: 6px;
}
.ggd-slider-track {
	position: relative;
	height: 6px;
	background: var(--ggd-border);
	border-radius: 4px;
	margin-top: 4px;
}
.ggd-tick {
	position: absolute;
	top: 50%;
	width: 2px;
	height: 10px;
	background: var(--ggd-surface);
	transform: translate(-50%, -50%);
}
.ggd-slider-marker {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ggd-accent);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 2px var(--ggd-surface);
}
.ggd-tendency-placeholder {
	margin-top: 4px;
	font-size: 12px;
	font-style: italic;
	color: var(--ggd-text-sub);
}

@media (max-width: 640px) {
	.ggd-tendency-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* --- 素材ガイドへのリンク --- */
.ggd-material-link {
	margin-top: 20px;
	font-size: 12px;
	color: var(--ggd-text-sub);
}

/* --- サマリーエリア(画像・名前の直下) --- */
.ggd-summary-area {
	margin-top: 20px;
	display: grid;
	gap: 16px;
}
.ggd-summary-area .ggd-tendency-block {
	margin-top: 0;
}

/* --- セクション内の解説(折りたたみ) --- */
.ggd-explainer {
	margin-top: 8px;
	padding-top: 0;
	border-top: none;
}
/* 折りたたみ内の文章は、どの種類の折りたたみでも自動的にこのサイズになる(今後追加する折りたたみにも共通適用) */
.ggd-details-block .ggd-details-body p {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--ggd-text-main);
}
.ggd-details-block .ggd-details-body p:last-child {
	margin-bottom: 0;
}

/* --- アイアン番手別スペック表 --- */
.ggd-iron-spec-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.ggd-iron-spec-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 480px;
	font-size: 13px;
}
.ggd-iron-spec-table th,
.ggd-iron-spec-table td {
	border: 1px solid var(--ggd-border, #ddd);
	padding: 8px 10px;
	text-align: center;
	white-space: nowrap;
}
.ggd-iron-spec-table thead th {
	background: var(--ggd-bg-soft, #f5f5f5);
	font-weight: 600;
}
.ggd-iron-th-label {
	text-align: left;
	font-weight: 600;
	background: var(--ggd-bg-soft, #f5f5f5);
	white-space: nowrap;
}
.ggd-iron-col-custom {
	background: rgba(120, 120, 120, 0.08);
}


/* 案8: 横スクロールカルーセル。番手ごとにカードを横並びにし、
   スマホの商品カルーセルのようにスワイプ/スクロールで見せる
   (表組みではなくカードレイアウトのため、PHP側で別マークアップを出力)。 */
.ggd-iron-carousel-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	box-sizing: border-box;
	padding-bottom: 8px;
	margin: -2px;
	padding: 2px 2px 10px;
}
.ggd-iron-carousel {
	display: flex;
	gap: 10px;
	width: max-content;
}
.ggd-iron-carousel-card {
	flex: 0 0 152px;
	scroll-snap-align: start;
	border: 1px solid var(--ggd-border);
	border-radius: 12px;
	padding: 12px;
	background: var(--ggd-bg-soft, #fafaf8);
}
.ggd-iron-carousel-card.is-base {
	border-color: var(--ggd-text-main);
	border-width: 2px;
}
.ggd-iron-carousel-number {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
	text-align: center;
	color: var(--ggd-text-main);
}
.ggd-iron-carousel-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	padding: 5px 0;
	border-top: 1px solid var(--ggd-border);
}
.ggd-iron-carousel-row:first-of-type {
	border-top: none;
}
.ggd-iron-carousel-label {
	color: var(--ggd-text-sub);
	white-space: nowrap;
}
.ggd-iron-carousel-value {
	font-weight: 600;
	color: var(--ggd-text-main);
	white-space: nowrap;
}


.ggd-iron-custom-tag {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 5px;
	font-size: 10px;
	border-radius: 3px;
	background: rgba(120, 120, 120, 0.25);
	color: var(--ggd-text-sub, #666);
	white-space: nowrap;
	vertical-align: middle;
}
.ggd-iron-footnote-mark {
	font-size: 10px;
	color: var(--ggd-text-sub, #888);
	margin-left: 2px;
}
.ggd-iron-number-specs .ggd-section-footnote {
	margin-top: 8px;
}

/* --- 平均値の詳細コメント --- */
.ggd-avg-detail {
	margin-top: 6px;
	font-size: 10px;
	color: var(--ggd-text-sub);
	line-height: 1.6;
}

/* --- 調整機能の効果解説文 --- */
.ggd-explainer-text {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ggd-border);
	font-size: 12px;
	color: var(--ggd-text-main);
	line-height: 1.8;
}

/* --- 素材名の強調表示 --- */
.ggd-material-name {
	font-weight: 700;
	color: var(--ggd-accent);
}

/* --- レスポンシブ対応(スマートフォン) --- */
@media (max-width: 600px) {
	.ggd-page-wrap {
		padding: 20px 12px;
	}
	.ggd-card {
		padding: 20px;
	}
	.ggd-detail-thumb img {
		width: 110px;
		height: 110px;
	}
	.ggd-detail-header-info .model {
		font-size: 20px;
	}
	.ggd-spec-grid {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.ggd-product-item {
		flex-direction: column;
		align-items: flex-start;
	}
	.ggd-buy-btn {
		width: 100%;
		text-align: center;
	}
}

/* --- シャフト図解 --- */
.ggd-shaft-diagram-wrap {
	margin-top: 20px;
}
.ggd-shaft-diagram {
	position: relative;
	height: 70px;
	margin-bottom: 8px;
}
.ggd-kick-marker {
	position: absolute;
	top: 4px;
	width: 2px;
	height: 56px;
	background: #D85A30;
	transform: translateX(-50%);
}
.ggd-kick-label {
	position: absolute;
	top: -14px;
	transform: translateX(-50%);
	font-size: 11px;
	color: #D85A30;
	white-space: nowrap;
}
.ggd-shaft-axis-label {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--ggd-text-sub);
}
.ggd-shaft-note {
	margin-top: 6px;
	font-size: 10px;
	color: var(--ggd-text-sub);
}
.ggd-shaft-meta {
	margin-top: 20px;
}

/* --- シャフト カットシミュレーション --- */
.ggd-cutsim-panel {
	padding: 18px 20px;
	background: var(--ggd-accent-bg);
	border-radius: 10px;
	margin-bottom: 14px;
}
.ggd-cutsim-controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 16px;
}
.ggd-cutsim-item label {
	font-size: 11px;
	color: var(--ggd-text-sub);
	display: block;
	margin-bottom: 6px;
}
.ggd-cutsim-item .row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ggd-cutsim-item input[type=range] {
	flex: 1;
	accent-color: var(--ggd-accent);
}
.ggd-cutsim-value {
	font-size: 12px;
	font-weight: 600;
	width: 56px;
	text-align: right;
}
.ggd-cutsim-result {
	background: var(--ggd-surface);
	border-radius: 8px;
	padding: 12px 14px;
}
.ggd-cutsim-result .l {
	font-size: 10px;
	color: var(--ggd-text-sub);
	margin-bottom: 2px;
}
.ggd-cutsim-result .v {
	font-size: 16px;
	font-weight: 600;
}
.ggd-cutsim-result .diff {
	font-size: 11px;
	color: var(--ggd-accent);
	margin-left: 4px;
}
.ggd-cutsim-note {
	margin-top: 10px;
	font-size: 11px;
	color: var(--ggd-text-sub);
}

@media (max-width: 600px) {
	.ggd-cutsim-controls {
		grid-template-columns: 1fr;
	}
}

/* --- グリップ用の中立バッジ(グレー系) --- */
.ggd-badge-neutral {
	background: var(--ggd-bg);
	color: var(--ggd-text-sub);
	margin-right: 6px;
	margin-top: 8px;
	display: inline-block;
}

/* --- パター:ヘッド形状イラスト(4種類並べて現在の種類を強調) --- */
.ggd-headshape-row {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.ggd-headshape-item {
	flex: 1;
	min-width: 100px;
	text-align: center;
	padding: 12px 8px;
	border-radius: 10px;
	background: var(--ggd-bg);
	color: var(--ggd-text-sub);
	opacity: 0.5;
}
.ggd-headshape-item.is-current {
	background: var(--ggd-accent-bg);
	color: var(--ggd-accent);
	opacity: 1;
}
.ggd-headshape-icon svg {
	width: 48px;
	height: 32px;
}
.ggd-headshape-icon img {
	width: 60px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
}
.ggd-headshape-label {
	font-size: 11px;
	margin-top: 6px;
}

/* --- パター:トゥハング角度図解 --- */
.ggd-toehang-diagram {
	margin-bottom: 14px;
}
.ggd-toehang-svg {
	width: 100%;
	max-width: 260px;
	height: auto;
}
.ggd-toehang-ref {
	margin-top: 10px;
}
.ggd-toehang-ref img {
	width: 100%;
	max-width: 200px;
	border-radius: 8px;
}
.ggd-toehang-ref-caption {
	font-size: 10px;
	color: var(--ggd-text-sub);
	margin-top: 4px;
}

/* --- グリップ:素材比較行(現在の素材を緑枠で強調) --- */
.ggd-material-row {
	display: flex;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.ggd-material-item {
	flex: 1;
	min-width: 140px;
	text-align: center;
	padding: 14px 10px;
	border-radius: 10px;
	background: var(--ggd-bg);
	border: 2px solid transparent;
}
.ggd-material-item.is-current {
	background: var(--ggd-accent-bg);
	border-color: var(--ggd-accent);
}
.ggd-material-icon {
	color: var(--ggd-text-sub);
}
.ggd-material-item.is-current .ggd-material-icon {
	color: var(--ggd-accent);
}
.ggd-material-icon svg {
	width: 44px;
	height: 44px;
}
.ggd-material-icon img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 8px;
}
.ggd-material-label {
	font-size: 12px;
	font-weight: 600;
	margin-top: 8px;
}
.ggd-material-item.is-current .ggd-material-label {
	color: var(--ggd-accent);
}
.ggd-material-caption {
	font-size: 10px;
	color: var(--ggd-text-sub);
	margin-top: 4px;
	line-height: 1.5;
}

/* --- グリップ:テープ巻き解説 --- */
.ggd-tapewind-block {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--ggd-border);
}
.ggd-tapewind-img {
	width: 100%;
	max-width: 320px;
	border-radius: 10px;
	margin: 10px 0;
}
.ggd-tapewind-text {
	font-size: 12px;
	line-height: 1.8;
	color: var(--ggd-text-main);
	margin: 0 0 10px;
}

/* --- パター:純正グリップへのリンク表示 --- */
.ggd-related-grip-list {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.ggd-related-grip-item {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ggd-bg);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 12px;
	color: var(--ggd-text-main);
	text-decoration: none;
}
.ggd-related-grip-item img {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: 4px;
}

/* --- 新品/中古 バッジ --- */
.ggd-condition-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	margin-bottom: 4px;
}
.ggd-condition-new {
	background: var(--ggd-accent-bg);
	color: var(--ggd-accent);
}
.ggd-condition-used {
	background: #F0E6D2;
	color: #8A6D2F;
}
.ggd-commerce-panel .ggd-product-item + .ggd-product-item {
	margin-top: 10px;
}

/* --- 自動算出バッジ --- */
.ggd-auto-calc-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 400;
	color: var(--ggd-text-sub);
	background: var(--ggd-bg);
	padding: 2px 8px;
	border-radius: 4px;
	margin-left: 8px;
	vertical-align: middle;
}