.vps-cart-next-tier,
.vps-cart-recommendations {
	width: 100%;
	max-width: none;
}

.woocommerce-cart-form > table.shop_table {
	margin-bottom: 16px;
}

.vps-cart-next-tier {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(90deg, rgba(255, 22, 22, 1), rgba(5, 0, 255, 1));
}

.vps-cart-next-tier--attached {
	margin-bottom: 0;
}

.vps-cart-next-tier__eyebrow {
	flex: 0 0 auto;
	margin: 0;
	padding: 6px 10px;
	border-radius: 100px;
	background: #fff;
	color: #111;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.vps-cart-next-tier__title {
	margin: 0;
	color: #fff;
	font-size: clamp(16px, 1.65vw, 20px);
	font-weight: 800;
	line-height: 1.35;
}

.vps-cart-next-tier__title strong {
	color: inherit;
	font-weight: 900;
}

.related.products.vps-cart-recommendations {
	margin: 14px 0 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.related.products.vps-cart-recommendations--attached {
	margin-top: 14px;
}

.related.products.vps-cart-recommendations > h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.25;
	text-align: left !important;
}

.related.products.vps-cart-recommendations > h2::after {
	flex: 1;
	height: 1px;
	background: #e2e2e2;
	content: "";
}

.vps-cart-recommendations .item_list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	margin-bottom: 0;
}

.vps-cart-recommendations .item_list li.product {
	width: auto;
	margin: 0;
}

.vps-cart-recommendations .item_list li.product > a {
	display: grid;
	/* 3行目の 1fr・min-height・矢印を避ける右44/下34 の padding が、
	   中身と無関係な空白を作っていた。行は中身ぶんだけにする */
	grid-template-columns: 96px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: center;
	column-gap: 12px;
	row-gap: 2px;
	padding: 12px;
	border-radius: 10px;
}

.vps-cart-recommendations .item_list li.product > a > img {
	grid-row: 1 / 4;
	width: 96px;
	height: 96px;
	margin: 0;
	object-fit: contain;
}

.vps-cart-recommendations .woocommerce-loop-product__title {
	grid-column: 2;
	align-self: end;
	margin: 0 0 6px;
	padding-left: 0;
	font-size: 15px;
	line-height: 1.3;
}

.vps-cart-recommendations .item_list .price {
	grid-column: 2;
	align-self: start;
	margin-bottom: 0;
	font-size: 14px;
}

/* 矢印を出さない。カード全体がリンクなので情報を足しておらず、
   右下に絶対配置するために上の padding と min-height が必要になっていた */
.vps-cart-recommendations .item_list li.product > a::after {
	content: none;
}

/* 対応ソフトのアイコンを商品画像に重ねない。
   markup 上 .softwareIcon は <a> の兄弟(= <li> 直下)なので static にすると
   カードの外へ落ちる。絶対配置のまま、**テキスト列の下端**へ移す。
   left = padding 12 + 画像 96 + 溝 12。矢印が消えた場所がそのまま空く */
.vps-cart-recommendations .item_list .softwareIcon {
	top: auto;
	left: 120px;
	bottom: 12px;
	align-items: center;
	gap: 6px;
}
.vps-cart-recommendations .item_list .softwareIcon img {
	width: 16px;
	height: 16px;
	padding-right: 0;
	border-radius: 4px;
}

@media (max-width: 767px) {
	.vps-cart-next-tier {
		display: block;
		padding: 12px;
	}

	.vps-cart-next-tier__eyebrow {
		display: inline-block;
		margin-bottom: 7px;
	}

	.related.products.vps-cart-recommendations {
		margin-bottom: 20px;
	}

	.related.products.vps-cart-recommendations > h2 {
		margin-bottom: 8px !important;
		font-size: 16px !important;
	}

	.vps-cart-recommendations .item_list {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 6px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.vps-cart-recommendations .item_list li.product {
		flex: 0 0 calc(88% - 8px);
		scroll-snap-align: start;
	}

	.vps-cart-recommendations .item_list li.product > a {
		grid-template-columns: 80px minmax(0, 1fr);
		min-height: 108px;
		padding: 10px 40px 30px 10px;
	}

	.vps-cart-recommendations .item_list li.product > a > img {
		width: 80px;
		height: 80px;
	}

	.vps-cart-recommendations .woocommerce-loop-product__title {
		margin: 6px 0;
		font-size: 14px;
	}
}

/* ==========================================================================
   カートの構造 — 2026-09-24
   ==========================================================================
   1. 2カラム化。明細・クーポン・おすすめを左、合計を右へ。
      合計は追従させ、おすすめを見ている間も金額と CTA を視界に残す。
      以前は合計が右半分だけにあり、**左半分が丸ごと空いていた**
   2. セット割引を赤→青のグラデーションから細い進捗へ。
      あのバーはページで最も彩度が高く、**CTA(黒)より目立っていた**。
      飽和した色は CTA と進捗だけに使う
   3. 金額が ¥0 の行を出さない
   ========================================================================== */

/* --- 1. 2カラム --- */
@media screen and (min-width: 900px) {
	body.woocommerce-cart,
	body.woocommerce-cart #page {
		overflow-x: clip;
		overflow-y: visible;
	}

	body.woocommerce-cart div.woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 336px;
		grid-template-areas:
			"notice notice"
			"note   note"
			"form   totals";
		column-gap: 32px;
		row-gap: 0;
		align-items: start;
	}
	body.woocommerce-cart div.woocommerce > .woocommerce-notices-wrapper { grid-area: notice; }
	body.woocommerce-cart div.woocommerce > .set_discount_note { grid-area: note; }
	body.woocommerce-cart div.woocommerce > .woocommerce-cart-form { grid-area: form; min-width: 0; }
	body.woocommerce-cart div.woocommerce > .cart-collaterals {
		position: sticky;
		top: 24px;
		grid-area: totals;
		align-self: start;
		min-width: 0;
		width: auto;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		position: static;
		width: auto;
		float: none;
	}
}

/* 合計の見出し。font-weight が 400 で見出しに見えていなかった */
body.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
}

/* スマホでは合計が明細の下へ回り込むので、境目に余白を入れる。
   1カラムになると 2カラム時の column-gap が効かず、明細と合計が
   くっついていた */
@media screen and (max-width: 899px) {
	body.woocommerce-cart div.woocommerce > .cart-collaterals {
		margin-top: 40px;
	}
}

/* --- 2. 割引の案内 --- */
/* 独立したバー（.vps-cart-next-tier）は廃止した。おすすめの箱の見出し行に
   文字だけで畳んである。下の CSS は残骸を出さないための保険 */
.vps-cart-next-tier {
	display: none;
}

/* --- 3. 金額が ¥0 の行を隠す --- */
/* WooCommerce は fee 行を金額に関わらず出すため、チップ 0 円の行が毎回並ぶ。
   落とす判定は CSS ではなくテンプレート側(cart/cart-totals.php の上書き)で行う。
   ここは念のための保険 */
body.woocommerce-cart .cart_totals tr.vps-zero-fee {
	display: none;
}

/* ==========================================================================
   おすすめ — カート専用の行（2026-09-24）
   ==========================================================================
   商品一覧のカード（.item_list）の流用をやめ、自前の markup にした。
   上にある .vps-cart-recommendations .item_list 系の指定は、この markup では
   当たらない（残してあるのは、万一ロールバックしたときのため）。
   ========================================================================== */

.vps-reco-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e2e6e4;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.vps-reco {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 12px 16px;
}

.vps-reco + .vps-reco {
	border-top: 1px solid #e2e6e4;
}

.vps-reco__thumb {
	display: block;
	width: 56px;
	line-height: 0;
}

.vps-reco__thumb img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.vps-reco__name {
	display: block;
	color: #16191b;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	text-decoration: none;
}

.vps-reco__name:hover {
	text-decoration: underline;
}

.vps-reco__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 2px 0 0;
	line-height: 1.5;
}

.vps-reco__price {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #5c6663;
}

/* 対応ソフトのアイコン。**商品画像には重ねない。価格の隣に置く** */
.vps-reco__softs {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.vps-reco__softs img {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 4px;
}

.vps-reco__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 16px;
	border: 1px solid #16191b;
	border-radius: 8px;
	background: #fff;
	color: #16191b;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.vps-reco__add:hover {
	background: #16191b;
	color: #fff;
}

.vps-reco__add--link {
	border-color: #cbd2cf;
	color: #5c6663;
	font-weight: 500;
}

@media screen and (max-width: 767px) {
	.vps-reco {
		grid-template-columns: 48px minmax(0, 1fr);
		row-gap: 12px;
		padding: 12px;
	}

	.vps-reco__thumb {
		width: 48px;
	}

	.vps-reco__add {
		grid-column: 1 / -1;
		width: 100%;
	}
}

/* ==========================================================================
   おすすめの箱（2026-09-24）
   ==========================================================================
   見出しと割引の案内を**箱の中**に入れた。見出しは大きくしない。
   割引は文字だけ（バーにしない）。
   ========================================================================== */

.vps-reco-box {
	border: 1px solid #e2e6e4;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.vps-reco-box__head {
	display: flex;
	align-items: baseline;
	gap: 4px 16px;
	padding: 10px 16px;
	border-bottom: 1px solid #e2e6e4;
	background: #fafbfa;
}

.vps-reco-box__title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: #16191b;
}

/* 一覧側の h2 装飾（下線・::after）を持ち込まない */
.vps-reco-box__title::after,
.vps-reco-box__title::before {
	content: none;
}

/* 割引の案内は**箱の外・上**。文字だけ（バーにしない） */
.vps-reco-nudge {
	margin: 32px 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #16191b;
}

.vps-reco-nudge strong {
	color: #1a7f6b;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* 箱に入ったので、中のリストからは枠を外す */
.vps-reco-box .vps-reco-list {
	border: 0;
	border-radius: 0;
}

/* ==========================================================================
   明細の行を詰める（2026-09-24）
   ==========================================================================
   全セルの padding が上下 25.9px あり、画像 51px に対して行が 103px だった
   （**高さの半分が余白**）。PC で 3 点入ると、おすすめと割引の案内が
   ファーストビューから落ちる。

   12px へ落とすと 1 行 103px → 75px。3 点で 84px ぶん上がる。
   画像は 51px なので窮屈にはならない。**削っているのは余白だけで、
   情報は何も減らしていない。**
   ========================================================================== */

body.woocommerce-cart .woocommerce-cart-form table.shop_table td {
	padding-top: 12px;
	padding-bottom: 12px;
	/* 全セルが vertical-align:top だった。padding が 25.9px あるうちは
	   目立たなかったが、詰めたことで画像・価格・数量の高さの差が
	   そのまま段差になる。中央で揃える */
	vertical-align: middle;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table th {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* 数量の入力が行の高さを押し上げないように */
body.woocommerce-cart .woocommerce-cart-form td.product-quantity .qty {
	height: 34px;
	padding-top: 0;
	padding-bottom: 0;
}