/**
 * WA SHOP Order Style — 和モダン・ラグジュアリーな注文詳細スタイル
 * 生成り × 漆黒 × 金彩
 *
 * 対象: 注文確認ページ / マイアカウント（注文一覧・詳細）/ 注文支払いページ
 * WooCommerce 標準のクラスをベースに、テーマ非依存で動作します。
 * テーマが CSS 変数（--wa-*）を定義していれば自動的に調和します。
 */

/* =====================================================
   1. デザイントークン（テーマ未定義時のフォールバック）
===================================================== */
.woocommerce {
	--wa-bg: #FBF9F4;          /* 生成り */
	--wa-bg-deep: #F2ECE1;     /* 生成り（濃） */
	--wa-surface: #FFFFFF;
	--wa-ink: #201C18;         /* 墨 */
	--wa-sub: #7A7268;
	--wa-line: #E7E0D3;
	--wa-accent: #17130F;      /* 漆黒 */
	--wa-gold: #A68A56;        /* 金彩 */
	--wa-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--wa-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* =====================================================
   2. 注文確認ページ：サンクスメッセージ
===================================================== */
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-thankyou-order-received {
	position: relative;
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-left: 4px solid var(--wa-gold);
	border-radius: 14px;
	padding: 22px 28px;
	margin: 0 0 28px !important;
	font-family: var(--wa-serif);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--wa-ink);
	box-shadow: 0 4px 18px rgba(23, 19, 15, .05);
}

/* =====================================================
   3. 注文概要（注文番号・日付・合計・支払い方法）
===================================================== */
.woocommerce-order-overview {
	list-style: none !important;
	margin: 0 0 36px !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.woocommerce-order-overview li {
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-radius: 16px;
	padding: 18px 20px 16px;
	margin: 0 !important;
	box-shadow: 0 4px 18px rgba(23, 19, 15, .04);
}

/* WooCommerce 標準のアイコン行（::before）を非表示にして独自ラベルへ */
.woocommerce-order-overview li::before {
	content: "";
	display: none;
}

.woocommerce-order-overview li span {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wa-sub);
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-family: var(--wa-serif);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--wa-ink);
}

.woocommerce-order-overview li.woocommerce-order-overview__payment strong {
	color: var(--wa-gold);
}

/* =====================================================
   4. 注文詳細テーブル（カード化）
===================================================== */
.woocommerce-order-details {
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-radius: 20px;
	padding: 30px 34px 20px;
	margin: 0 0 36px;
	box-shadow: 0 6px 24px rgba(23, 19, 15, .05);
	overflow: hidden;
}

.woocommerce-order-details .woocommerce-order-details__title,
.woocommerce-order-details h2 {
	font-family: var(--wa-serif);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--wa-ink);
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 2px solid var(--wa-ink);
}

.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	border: 0 !important;
	margin: 0 !important;
	font-family: var(--wa-sans);
}

.woocommerce-table--order-details thead th {
	border: 0 !important;
	border-bottom: 2px solid var(--wa-line) !important;
	padding: 12px 14px !important;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--wa-sub);
	text-align: left;
}

.woocommerce-table--order-details tbody td {
	border: 0 !important;
	border-bottom: 1px solid var(--wa-line) !important;
	padding: 16px 14px !important;
	vertical-align: middle;
}

.woocommerce-table--order-details tbody .product-name {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wa-ink);
}

.woocommerce-table--order-details tbody .product-name .product-quantity {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--wa-bg-deep);
	color: var(--wa-sub);
	font-size: 11.5px;
	font-weight: 700;
	vertical-align: middle;
}

.woocommerce-table--order-details tbody .product-total,
.woocommerce-table--order-details .woocommerce-Price-amount.amount {
	color: var(--wa-ink);
	font-weight: 700;
	font-size: 14.5px;
}

.woocommerce-table--order-details tfoot th {
	border: 0 !important;
	border-top: 1px solid var(--wa-line) !important;
	padding: 13px 14px !important;
	font-size: 13px;
	font-weight: 600;
	color: var(--wa-sub);
	text-align: left;
}

.woocommerce-table--order-details tfoot td {
	border: 0 !important;
	border-top: 1px solid var(--wa-line) !important;
	padding: 13px 14px !important;
	font-weight: 700;
	color: var(--wa-ink);
	text-align: right;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	border-top: 2px solid var(--wa-ink) !important;
	font-family: var(--wa-serif);
	font-size: 16px;
	letter-spacing: .04em;
}

/* =====================================================
   5. お届け先 / 請求先（アドレスカード）
===================================================== */
.woocommerce-customer-details,
.woocommerce-columns--addresses .woocommerce-column {
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-radius: 16px;
	padding: 24px 28px 22px;
	box-shadow: 0 4px 18px rgba(23, 19, 15, .04);
}

.woocommerce-customer-details h2,
.woocommerce-columns--addresses .woocommerce-column__title {
	font-family: var(--wa-serif);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--wa-ink);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wa-line);
}

.woocommerce-customer-details address,
.woocommerce-columns--addresses address {
	font-style: normal !important;
	font-family: var(--wa-sans);
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--wa-ink);
	border: 0 !important;
	padding: 0 !important;
	margin: 0;
}

.woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 0 0 36px;
}

/* =====================================================
   6. マイアカウント：注文一覧テーブル
===================================================== */
.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	border: 0 !important;
	background: var(--wa-surface);
	border-radius: 16px;
	overflow: hidden;
	font-family: var(--wa-sans);
}

.woocommerce-orders-table thead th {
	border: 0 !important;
	background: var(--wa-bg-deep);
	padding: 13px 16px !important;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wa-sub);
	text-align: left;
}

.woocommerce-orders-table tbody td {
	border: 0 !important;
	border-bottom: 1px solid var(--wa-line) !important;
	padding: 16px !important;
	vertical-align: middle;
	font-size: 13.5px;
}

.woocommerce-orders-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.woocommerce-orders-table__cell-order-number a {
	color: var(--wa-ink);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-orders-table__cell-order-number a:hover {
	color: var(--wa-gold);
}

/* 注文ステータスバッジ（和モダン・低彩度） */
.woocommerce-orders-table__status,
.order-status {
	display: inline-block;
	padding: 5px 16px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
	background: var(--wa-bg-deep);
	color: #5C534A;
	border: 1px solid var(--wa-line);
}

.woocommerce-orders-table__status.status-processing,
.order-status.status-processing {
	background: var(--wa-accent);
	border-color: var(--wa-accent);
	color: #F4EFE4;
}

.woocommerce-orders-table__status.status-completed,
.order-status.status-completed {
	background: var(--wa-gold);
	border-color: var(--wa-gold);
	color: #FFFFFF;
}

.woocommerce-orders-table__status.status-on-hold,
.order-status.status-on-hold {
	background: var(--wa-surface);
	border-color: var(--wa-gold);
	color: var(--wa-gold);
}

.woocommerce-orders-table__status.status-cancelled,
.order-status.status-cancelled,
.woocommerce-orders-table__status.status-refunded,
.order-status.status-refunded,
.woocommerce-orders-table__status.status-failed,
.order-status.status-failed {
	background: #EDE7DB;
	border-color: #D9D1C2;
	color: #9C948A;
}

/* 注文詳細の「もう一度購入」「支払い」ボタン */
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-order-again .button,
.order-again .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--wa-accent);
	color: #FFFFFF;
	font-family: var(--wa-sans);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-decoration: none;
	transition: background .2s ease;
}

.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-order-again .button:hover,
.order-again .button:hover {
	background: var(--wa-gold);
	color: #FFFFFF;
}

/* 注文詳細ページの注文情報ヘッダ */
.woocommerce-MyAccount-content .order-info,
.woocommerce-MyAccount-content p.order_details + p {
	font-size: 13.5px;
	color: var(--wa-sub);
}

/* =====================================================
   7. 注文支払いページ（order-pay）
===================================================== */
.woocommerce-order-pay table.shop_table {
	background: var(--wa-surface);
	border: 1px solid var(--wa-line) !important;
	border-radius: 16px;
	overflow: hidden;
	font-family: var(--wa-sans);
}

.woocommerce-order-pay table.shop_table th {
	background: var(--wa-bg-deep);
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--wa-sub);
}

/* =====================================================
   8. モバイル（カード型・アプリ風）
===================================================== */
@media (max-width: 768px) {

	/* 注文概要 2 列化 */
	.woocommerce-order-overview {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.woocommerce-order-overview li {
		padding: 14px 16px 12px;
		border-radius: 14px;
	}

	.woocommerce-order-overview li strong {
		font-size: 13.5px;
	}

	/* 注文詳細カードの余白調整 */
	.woocommerce-order-details {
		padding: 22px 16px 14px;
		border-radius: 16px;
	}

	.woocommerce-order-details .woocommerce-order-details__title,
	.woocommerce-order-details h2 {
		font-size: 18px;
	}

	/* 注文詳細テーブル：商品行をカード行に */
	.woocommerce-table--order-details thead {
		display: none;
	}

	.woocommerce-table--order-details tbody,
	.woocommerce-table--order-details tfoot {
		display: block;
	}

	.woocommerce-table--order-details tbody tr,
	.woocommerce-table--order-details tfoot tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 14px 2px;
		border-bottom: 1px solid var(--wa-line);
	}

	.woocommerce-table--order-details tbody tr:last-child {
		border-bottom: 0;
	}

	.woocommerce-table--order-details tbody td,
	.woocommerce-table--order-details tfoot th,
	.woocommerce-table--order-details tfoot td {
		display: block;
		border: 0 !important;
		padding: 0 !important;
	}

	.woocommerce-table--order-details tbody .product-name {
		flex: 1 1 auto;
		font-size: 13.5px;
		text-align: left;
	}

	.woocommerce-table--order-details tbody .product-total {
		flex: 0 0 auto;
		font-size: 13.5px;
		text-align: right;
	}

	.woocommerce-table--order-details tbody .product-name .product-quantity {
		margin-left: 6px;
		padding: 1px 8px;
		font-size: 10.5px;
	}

	.woocommerce-table--order-details tfoot th {
		flex: 1 1 auto;
		font-size: 12px;
		text-align: left;
	}

	.woocommerce-table--order-details tfoot td {
		flex: 0 0 auto;
		font-size: 13px;
		text-align: right;
	}

	.woocommerce-table--order-details tfoot tr:last-child th,
	.woocommerce-table--order-details tfoot tr:last-child td {
		font-size: 15px;
	}

	/* アドレス 1 列化 */
	.woocommerce-columns--addresses {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.woocommerce-customer-details,
	.woocommerce-columns--addresses .woocommerce-column {
		padding: 20px 18px 18px;
		border-radius: 14px;
	}

	/* 注文一覧：カード化 */
	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr {
		display: block;
	}

	.woocommerce-orders-table tbody tr {
		background: var(--wa-surface);
		border: 1px solid var(--wa-line);
		border-radius: 14px;
		padding: 6px 14px;
		margin-bottom: 12px;
	}

	.woocommerce-orders-table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 0 !important;
		padding: 8px 0 !important;
		font-size: 12.5px;
	}

	.woocommerce-orders-table tbody td::before {
		content: attr(data-title);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .06em;
		color: var(--wa-sub);
		margin-right: 12px;
	}

	.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before {
		content: none;
	}

	.woocommerce-orders-table__cell-order-number {
		font-size: 13.5px;
	}

	/* サンクスメッセージ */
	.woocommerce-order-received .woocommerce-notice--success,
	.woocommerce-thankyou-order-received {
		padding: 18px 20px;
		font-size: 15px;
	}
}