/*
 * sticky-product-bar.css
 *
 * リス記事の商品セクション（h3.spk-product）スクロール中、
 * 画面下に固定表示する商品バー（PC・タブレット・スマホ全対応）。
 *
 * レイアウト（CSS Grid 3行3列）:
 *   ┌───────┬─────────────────────────────────┬──────────┐
 *   │       │ 商品名（行1・col 2-3 横断・下寄せ）       │           │
 *   │ 画像   ├──────────────────────────┤ ボタン     │
 *   │       │ 価格（行2・上寄せ）                       │（rowspan3 │
 *   │       ├──────────────────────────┤ 縦中央）   │
 *   │       │ 評価（行3）                              │           │
 *   └───────┴─────────────────────────────────┴──────────┘
 *
 * 商品名は折り返し禁止・省略なし。長い商品名はその行だけ左右スクロール可能。
 * 商品名（下寄せ）と価格（上寄せ）が密接して情報量を視覚的にまとめる。
 */

/* ============================================
 * 共通レイアウト（PC / タブレット / スマホ）
 * ============================================ */

.rk-sticky-bar {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	background: #ffffff;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
	padding: 8px 12px;
	padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	transform: translateY(100%);
	transition: transform 0.25s ease-out;
	pointer-events: none;
}

.rk-sticky-bar.is-active {
	transform: translateY(0);
	pointer-events: auto;
}

.rk-sticky-bar-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: 1fr auto auto;
	column-gap: 12px;
	row-gap: 0;
	text-decoration: none;
	color: #1f1f1f;
	max-width: 880px;
	margin: 0 auto;
}

.rk-sticky-bar-img {
	grid-row: 1 / span 3;
	grid-column: 1;
	align-self: center;
	width: 70px;
	height: 70px;
	object-fit: contain;
	background: #f7f7f7;
	border-radius: 6px;
}

/* 商品名：行1の col 2-3 を横断（フル幅）、行内で縦中央揃え。
 * ボタンは行2-3 rowspan 2 で col 3 を占有するため、行1 col 3 は空いてる → 商品名はそこも使う。
 * white-space: pre-wrap で折り返し許容＋手動改行も保持 */
.rk-sticky-bar-name {
	grid-row: 1;
	grid-column: 2 / span 2;
	align-self: center;
	min-width: 0;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 600;
	color: #1f1f1f;
	white-space: pre-wrap;
}

/* 価格：行2 col2、上寄せで商品名にぴったり接近 */
.rk-sticky-bar-price {
	grid-row: 2;
	grid-column: 2;
	align-self: start;
	min-width: 0;
	font-size: 14px;
	line-height: 1.25;
	font-weight: 700;
	color: #c0392b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

/* 評価：行3 col2 */
.rk-sticky-bar-rating {
	grid-row: 3;
	grid-column: 2;
	align-self: start;
	min-width: 0;
	font-size: 11px;
	line-height: 1.25;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.rk-sticky-bar-stars {
	color: #f5a623;
	letter-spacing: 0.5px;
}

.rk-sticky-bar-count {
	color: #888;
	font-size: 11px;
}

/* ボタン：行2-3 を rowspan 2 で占有・縦中央。
 * 行1 col 3 は空けて、商品名（col 2-3 横断）が使えるようにする */
.rk-sticky-bar-cta {
	grid-row: 2 / span 2;
	grid-column: 3;
	align-self: center;
	background: #bf0000;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 12px 14px;
	border-radius: 6px;
	white-space: nowrap;
	letter-spacing: 0.02em;
	text-align: center;
}

.rk-sticky-bar-link:hover .rk-sticky-bar-cta {
	background: #a60000;
}

/* バーが出ているとき、本文末尾とフッター手前に余白を入れる */
body.has-rk-sticky-bar {
	padding-bottom: 120px;
}

/* ============================================
 * PC・タブレット（769px以上）：少し大きめ
 * ============================================ */

@media (min-width: 769px) {
	.rk-sticky-bar {
		padding: 12px 24px;
	}

	.rk-sticky-bar-link {
		column-gap: 18px;
	}

	.rk-sticky-bar-img {
		width: 70px;
		height: 70px;
	}

	.rk-sticky-bar-name {
		font-size: 15px;
	}

	.rk-sticky-bar-price {
		font-size: 16px;
	}

	.rk-sticky-bar-rating {
		font-size: 12px;
	}

	.rk-sticky-bar-cta {
		font-size: 15px;
		padding: 14px 24px;
		border-radius: 8px;
	}

	body.has-rk-sticky-bar {
		padding-bottom: 130px;
	}
}