/**
 * カートと購入手続きの後押し。
 * 配色はテーマの変数に合わせ、無ければオレンジ×黒の既定値を使います。
 */

/* ---------- 安心材料 ---------- */
.sl-trust {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--hs-border, #2b2b2b);
	border-radius: var(--hs-radius, 10px);
	background: var(--hs-surface, #141414);
}

.sl-trust__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-trust__item {
	display: grid;
	grid-template-columns: 1.6em 5.5em 1fr;
	gap: 6px;
	align-items: baseline;
	margin: 0;
	padding: 5px 0;
	font-size: .85rem;
	line-height: 1.6;
}

.sl-trust__icon {
	font-size: .95rem;
	line-height: 1.5;
}

.sl-trust__label {
	font-weight: 700;
	color: var(--hs-text-muted, #a3a3a3);
}

.sl-trust__value {
	color: var(--hs-text, #f5f5f5);
}

.sl-trust__contact {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--hs-border, #2b2b2b);
	font-size: .8rem;
	line-height: 1.7;
	color: var(--hs-text-muted, #a3a3a3);
}

.sl-trust__contact a {
	color: var(--hs-orange, #ff6b1a) !important;
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- クーポン欄の案内 ---------- */
/* カートと購入手続きのページは明るい背景のため、
   ダークテーマ用の薄いグレーだと読めません。濃い色を直に指定します。 */
.sl-coupon-help {
	margin: 6px 0 14px;
	font-size: .8rem;
	line-height: 1.7;
	color: #4a4a4a;
}

.sl-coupon-help a {
	color: var(--hs-orange, #ff6b1a) !important;
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- 下に固定するバー（カートのみ） ---------- */
.sl-cart-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--hs-border, #2b2b2b);
	background: rgba(10, 10, 10, .96);
	backdrop-filter: blur(8px);
}

.sl-cart-bar__inner {
	display: flex;
	gap: 12px;
	align-items: center;
	max-width: 980px;
	margin: 0 auto;
}

.sl-cart-bar__sum {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 0 0 auto;
	line-height: 1.25;
}

.sl-cart-bar__count {
	font-size: .7rem;
	color: var(--hs-text-muted, #a3a3a3);
}

.sl-cart-bar__total {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--hs-text, #f5f5f5);
}

.sl-cart-bar__total .woocommerce-Price-amount { color: inherit; }

.sl-cart-bar__button {
	flex: 1 1 auto;
	display: block;
	padding: 13px 16px;
	border-radius: 999px;
	background: var(--hs-orange, #ff6b1a);
	color: #0a0a0a !important;
	font-size: .95rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none !important;
}

.sl-cart-bar__button:hover,
.sl-cart-bar__button:focus {
	background: var(--hs-orange-light, #ff8440);
	color: #0a0a0a !important;
}

/* バーの下に本文が隠れないようにする */
body.woocommerce-cart {
	padding-bottom: 86px;
}

@media (min-width: 782px) {
	body.woocommerce-cart { padding-bottom: 92px; }
}

/* 年齢確認が出ているあいだはバーを隠す（二重の保険） */
body.sl-age-gate-active .sl-cart-bar { display: none; }

/* ---------- 最終確認画面を縦に詰める ---------- */
/* 法律で必要な項目はそのまま。行間と余白だけを詰めて、
   注文ボタンが遠くなりすぎないようにします。 */
.sl-final-confirm {
	margin: 16px 0;
	padding: 14px 16px;
}

.sl-final-confirm__title {
	margin: 0 0 10px;
	font-size: 1rem;
}

.sl-final-confirm__row {
	gap: 1px;
	padding: 7px 0;
}

.sl-final-confirm__row dt { font-size: .75rem; }

.sl-final-confirm__row dd {
	font-size: .82rem;
	line-height: 1.55;
}

.sl-final-confirm__note {
	margin: 10px 0 0;
	padding-top: 10px;
	font-size: .75rem;
	line-height: 1.6;
}

@media (min-width: 600px) {
	.sl-final-confirm__row {
		grid-template-columns: 170px 1fr;
		gap: 14px;
	}
}

/* ---------- 代金引換が出ない理由 ---------- */
.sl-cod-reason {
	margin: 0 0 12px;
	padding: 9px 12px;
	border-left: 3px solid #ff6b1a;
	background: #fff4ec;
	font-size: .8rem;
	line-height: 1.7;
	color: #4a4a4a;
}