/*
 * 結帳頁（WooCommerce 結帳區塊）：仿 Shopify 的左右分欄，左邊表單、右邊灰底的訂單摘要延伸到畫面邊緣。
 * 區塊元件的顏色寫死白底，這裡全部改用主題 token，深色模式才會完整。
 */

/* 精簡 header：結帳頁不固定在頂端 */

.ks-header--checkout {
	position: relative;
	/* 一般 header 的 top 是工具列高度（給 sticky 用），relative 時會變成往下位移，要歸零 */
	top: 0;
}

.ks-header--checkout .ks-header__inner {
	justify-content: space-between;
}

/* 結帳頁最少一個畫面高，頁尾永遠貼在最底（內容比畫面短時，下面不會露出半邊灰底） */
body.woocommerce-checkout {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

body.woocommerce-checkout > .ks-main {
	flex: 1 0 auto;
}

body.woocommerce-checkout > .ks-header,
body.woocommerce-checkout > .ks-footer {
	flex-shrink: 0;
}

/* 版面：背景左右各半，剛好對齊兩欄的分界 */

@media (min-width: 1000px) {
	body.woocommerce-checkout {
		background: linear-gradient(90deg, var(--ks-bg) 50%, var(--ks-surface) 50%);
	}

	body.woocommerce-checkout .ks-header,
	body.woocommerce-checkout .ks-footer {
		background: var(--ks-bg);
	}

	body.woocommerce-checkout .ks-footer {
		border-top: var(--ks-bw) solid var(--ks-line);
	}

	body.woocommerce-checkout .ks-content {
		padding-top: 0;
		padding-bottom: 0;
	}

	body .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 0;
	}

	body .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	body .wp-block-woocommerce-checkout .wc-block-components-sidebar {
		width: auto;
		padding-top: 48px;
		padding-bottom: 64px;
	}

	/* 左欄內容靠右、右欄內容靠左，中間留出對稱的空白 */
	body .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
		padding-right: clamp(32px, 4vw, 64px);
		padding-left: 0;
	}

	body .wp-block-woocommerce-checkout .wc-block-components-main > * {
		max-width: 580px;
		margin-left: auto;
	}

	/* 結帳錯誤等通知：Woo 放在兩欄外面，這裡縮成左半、跟左欄內容同寬對齊 */
	body .wp-block-woocommerce-checkout > .wc-block-components-notices {
		box-sizing: border-box;
		width: 50%;
		padding-top: 48px;
		padding-right: clamp(32px, 4vw, 64px);
	}

	body .wp-block-woocommerce-checkout > .wc-block-components-notices:empty {
		display: none;
	}

	body .wp-block-woocommerce-checkout > .wc-block-components-notices > * {
		max-width: 580px;
		margin-right: 0;
		margin-left: auto;
	}

	body .wp-block-woocommerce-checkout > .wc-block-components-notices:not(:empty) + .wc-block-components-notices__snackbar + .wc-block-components-sidebar-layout .wc-block-components-main {
		padding-top: 24px;
	}

	body .wp-block-woocommerce-checkout .wc-block-components-sidebar {
		padding-left: clamp(32px, 4vw, 64px);
	}

	body .wp-block-woocommerce-checkout .wc-block-components-sidebar > * {
		max-width: 460px;
	}

	/* 訂單摘要整欄跟著捲動固定在畫面上；Woo 預設讓側欄只有內容高，sticky 要放在側欄本身 */
	body .wp-block-woocommerce-checkout .wc-block-components-sidebar {
		position: sticky;
		top: var(--ks-adminbar);
		align-self: start;
	}
}

/* 區塊標題 */

body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
body .wp-block-woocommerce-checkout .wc-block-components-title {
	color: var(--ks-text);
	font-size: 1.25rem;
	font-weight: 700;
}

body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__description,
body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-content {
	color: var(--ks-muted);
}

/* 輸入框（浮動標籤） */

body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-block-components-text-input input[type],
body .wc-block-components-textarea {
	min-height: 52px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: var(--ks-bg);
	color: var(--ks-text);
	box-shadow: none;
}

body .wc-block-components-form .wc-block-components-text-input input[type]:focus,
body .wc-block-components-text-input input[type]:focus,
body .wc-block-components-textarea:focus {
	border-color: var(--ks-text);
	background: var(--ks-bg);
	color: var(--ks-text);
	box-shadow: none;
	outline: none;
}

/* Woo 聚焦時把文字與標籤換成固定深灰（#2b2d2f），深色模式會看不到；一律跟著主題色 */
body .wc-block-components-text-input.is-active label,
body .wc-block-components-text-input input[type]:focus + label,
body .wc-block-components-textarea:focus + label {
	color: var(--ks-muted);
}

body .wc-block-components-text-input input[type]:-webkit-autofill {
	-webkit-text-fill-color: var(--ks-text);
	-webkit-box-shadow: 0 0 0 100px var(--ks-bg) inset;
	caret-color: var(--ks-text);
}

/* 欄位間距統一 12px：Woo 預設文字欄、下拉 12px，勾選框 16px，手機窄版又各自不同 */
body .wc-block-checkout__form .wc-block-components-address-form > *,
body .wc-block-checkout__form .wc-block-components-address-form .wc-block-components-checkbox,
body .wc-block-checkout__form .wc-blocks-components-select,
body .wc-block-checkout__form .wc-block-components-textarea,
body .wc-block-checkout__form .wc-block-checkout__use-address-for-billing,
body .wc-block-checkout__form .wc-block-components-address-form__address_2-toggle {
	margin-top: 12px;
}

body .wc-block-checkout__form .wc-block-components-address-form > :first-child,
body .wc-block-checkout__form .wc-block-components-address-form__country .wc-blocks-components-select {
	margin-top: 0;
}

body .wc-block-checkout__form .wc-block-components-address-address-wrapper {
	margin-bottom: 0;
}

/* 國家欄位不是第一個欄位時（例如名、姓在前），Woo 用更具體的選擇器把上距設成 0，這裡補回 12px */
body .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-address-form > .wc-block-components-country-input:not(:first-child),
body .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-address-form > .wc-block-components-state-input:not(:first-child) {
	margin-top: 12px;
}

/* 電腦版名、姓並排：第二欄跟第一欄同一列，不另外加上距 */
@container (min-width: 400px) {
	body .wc-block-checkout__form .wc-block-components-address-form > .wc-block-components-text-input:first-child + .wc-block-components-text-input {
		margin-top: 0;
	}
}

body .wc-block-components-text-input label,
body .wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--ks-muted);
}

body .wc-block-components-text-input.has-error input[type],
body .wc-blocks-components-select.has-error .wc-blocks-components-select__select {
	border-color: var(--ks-danger);
}

body .wc-block-components-validation-error {
	color: var(--ks-danger);
}

/* 國家、縣市下拉 */

body .wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: var(--ks-radius);
	background: var(--ks-bg);
}

body .wc-blocks-components-select .wc-blocks-components-select__select {
	min-height: 52px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: transparent;
	color: var(--ks-text);
}

body .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-width: var(--ks-bw);
	border-color: var(--ks-text);
	color: var(--ks-text);
}

body .wc-blocks-components-select .wc-blocks-components-select__select option {
	background: var(--ks-elevated);
	color: var(--ks-text);
}

body .wc-blocks-components-select .wc-blocks-components-select__expand {
	fill: var(--ks-text);
}

/* 單選：運送選項、付款選項（照 Shopify）。整組一個外框、選項之間分隔線；
   選到的那一項淺灰底＋標題色外框（疊在整組外框上），第一項與最後一項跟外框同圓角。
   Woo 原本用內陰影畫框，主題不用陰影，這裡全部改成真正的框線。 */

body .wc-block-components-radio-control--highlight-checked {
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: none;
}

body .wc-block-components-radio-control--highlight-checked::after,
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option::after {
	display: none;
}

body .wc-block-components-radio-control--highlight-checked > * {
	border-radius: 0;
	box-shadow: none;
}

body .wc-block-components-radio-control--highlight-checked > * + * {
	border-top: var(--ks-bw) solid var(--ks-line);
}

body .wc-block-components-radio-control--highlight-checked > :first-child {
	border-top-left-radius: calc(var(--ks-radius) - var(--ks-bw));
	border-top-right-radius: calc(var(--ks-radius) - var(--ks-bw));
}

body .wc-block-components-radio-control--highlight-checked > :last-child {
	border-bottom-left-radius: calc(var(--ks-radius) - var(--ks-bw));
	border-bottom-right-radius: calc(var(--ks-radius) - var(--ks-bw));
}

body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted,
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	position: relative;
	z-index: 1;
	background: var(--ks-surface);
	outline: var(--ks-bw) solid var(--ks-text);
	outline-offset: 0;
	box-shadow: none;
}

/* 選項文字與右側說明（例如「免費」） */
body .wc-block-components-radio-control__option {
	padding-top: 18px;
	padding-bottom: 18px;
}

body .wc-block-components-radio-control__label {
	font-weight: 600;
}

body .wc-block-components-radio-control__secondary-label,
body .wc-block-components-radio-control__description {
	color: var(--ks-muted);
}

/* 到貨方式（運送／取貨）：同樣一整組外框，左右兩個選項 */
body .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container {
	gap: 0;
	padding: 0;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: none;
}

body .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option {
	flex: 1;
	min-height: 60px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--ks-text);
}

body .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option + .wc-block-checkout__shipping-method-option {
	border-left: var(--ks-bw) solid var(--ks-line);
}

body .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option:first-child {
	border-radius: calc(var(--ks-radius) - var(--ks-bw)) 0 0 calc(var(--ks-radius) - var(--ks-bw));
}

body .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option:last-child {
	border-radius: 0 calc(var(--ks-radius) - var(--ks-bw)) calc(var(--ks-radius) - var(--ks-bw)) 0;
}

body .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
	position: relative;
	border: 0;
	z-index: 1;
	background: var(--ks-surface);
	outline: var(--ks-bw) solid var(--ks-text);
	outline-offset: 0;
}

body .wc-block-checkout__shipping-method-option-title {
	font-weight: 600;
}

body .wc-block-checkout__shipping-method-option svg {
	fill: currentColor;
}

/* 單選鈕：未選是淺色外框，選到是實心圓＋中間白點 */
body .wc-block-components-radio-control .wc-block-components-radio-control__input {
	border: var(--ks-bw) solid var(--ks-line);
	background: var(--ks-bg);
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--ks-text);
	background: var(--ks-text);
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	width: 8px;
	height: 8px;
	background: var(--ks-bg);
}

/* 勾選：區塊自己用 SVG 畫勾，主題的勾拿掉避免重複 */

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: 5px;
	background: var(--ks-bg);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]::before {
	display: none;
}

/* 勾選框、單選鈕聚焦時不要外圈，只換邊框顏色 */
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus,
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible,
body .wc-block-components-radio-control .wc-block-components-radio-control__input:focus,
body .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible {
	outline: none;
	box-shadow: none;
	border-color: var(--ks-text);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--ks-text);
	background: var(--ks-text);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--ks-bg);
}

/* 通知 */

body .wc-block-components-notice-banner {
	--ks-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M12 17V11' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='1' cy='1' r='1' transform='matrix%281 0 0 -1 11 9%29' fill='black'/%3E%3C/svg%3E");
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	border: 0;
	border-radius: var(--ks-radius);
	background: var(--ks-notice-info-bg);
	color: var(--ks-text);
	font-weight: 600;
}

body .wc-block-components-notice-banner.is-success {
	--ks-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8.5 12.5L10.5 14.5L15.5 9.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background: var(--ks-notice-success-bg);
}

body .wc-block-components-notice-banner.is-error,
body .wc-block-components-notice-banner.is-warning {
	--ks-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M12 7V13' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16' r='1' fill='black'/%3E%3C/svg%3E");
	background: var(--ks-notice-error-bg);
}

/* 區塊的圖示換成主題的線條圖示 */
body .wc-block-components-notice-banner > svg {
	display: none;
}

body .wc-block-components-notice-banner::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: var(--ks-notice-info);
	-webkit-mask: var(--ks-notice-icon) center / contain no-repeat;
	mask: var(--ks-notice-icon) center / contain no-repeat;
}

body .wc-block-components-notice-banner.is-success::before {
	background: var(--ks-notice-success);
}

body .wc-block-components-notice-banner.is-error::before,
body .wc-block-components-notice-banner.is-warning::before {
	background: var(--ks-notice-error);
}

/* 訂單摘要：不要外框，商品縮圖右上角掛數量徽章 */

body .wp-block-woocommerce-checkout-order-summary-block,
body .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
	border: 0;
	font-size: 0.9375rem;
}

body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text {
	font-size: 1.25rem;
	font-weight: 700;
}

/* 左右不留內距：商品列、優惠券、小計與總計都貼齊欄位兩側 */

body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary,
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon,
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item,
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title,
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
	padding-right: 0;
	padding-left: 0;
}

/* Woo 11 用更具體的選擇器加了左右 16px，一起蓋掉 */
body .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary,
body .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-order-summary,
body .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-coupon,
body .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-item,
body .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-panel,
body .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-wrapper {
	padding-right: 0;
	padding-left: 0;
}

body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description {
	padding-right: 0;
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item {
	padding-top: 12px;
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	width: 64px;
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
	width: 64px;
	max-width: 64px;
	aspect-ratio: 1 / 1;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: var(--ks-bg);
	object-fit: cover;
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	min-width: 22px;
	height: 22px;
	border: 0;
	background: var(--ks-muted);
	box-shadow: none;
	color: var(--ks-bg);
	font-size: 12px;
	font-weight: 700;
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: var(--ks-bg);
}

body .wc-block-components-order-summary .wc-block-components-product-name {
	font-size: 0.9375rem;
}

body .wc-block-components-order-summary .wc-block-components-product-metadata,
body .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices {
	color: var(--ks-muted);
	font-size: 0.8125rem;
}

body .wc-block-components-totals-wrapper,
body .wc-block-components-checkout-order-summary__content.is-open,
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
	border-color: var(--ks-line);
}

body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.375rem;
	font-weight: 700;
}

/* 優惠券 */

body .wc-block-components-totals-coupon .wc-block-components-panel__button,
body .wc-block-components-panel__button {
	color: var(--ks-text);
}

body .wc-block-components-panel__button-icon {
	fill: currentColor;
}

/* 按鈕：下單按鈕加高 */

body .wc-block-components-button:not(.is-link) {
	min-height: var(--ks-control-h);
	border: 0;
	border-radius: var(--ks-radius);
	background: var(--ks-btn);
	color: var(--ks-btn-text);
	box-shadow: none;
}

body .wc-block-components-button:not(.is-link):hover {
	background: var(--ks-btn-hover);
	color: var(--ks-btn-text);
}

body .wc-block-components-checkout-place-order-button {
	height: var(--ks-control-h-lg);
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

body .wc-block-components-checkout-place-order-button .wc-block-components-button__text > svg {
	fill: currentColor;
}

body .wc-block-components-checkout-return-to-cart-button {
	color: var(--ks-muted);
}

/* 地址卡、自動完成清單 */

body .wc-block-components-address-card {
	border-color: var(--ks-line);
	border-radius: var(--ks-radius);
}

body .wc-block-components-address-autocomplete-suggestions {
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: var(--ks-elevated);
	color: var(--ks-text);
}

/* 快速結帳區（Apple Pay 等）的外框 */

body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after,
body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
	border-color: var(--ks-line);
}

/* 結帳頁的幣別提示：由 theme.js 移進左欄（表單上方），移好之前先不顯示，避免在左右分欄上方跑版 */

body.woocommerce-checkout .ks-currency-checkout:not(.is-placed) {
	display: none;
}

body.woocommerce-checkout .wc-block-components-main > .ks-currency-checkout {
	margin: 0 0 24px auto;
}

/* 購物車在結帳頁被清空：Woo 改顯示空購物車，這時不要左右分欄與雙色背景 */

body.woocommerce-checkout:has(.wc-block-checkout-empty) {
	background: var(--ks-bg);
}

body .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout:has(.wc-block-checkout-empty) {
	display: block;
}

body .wc-block-checkout-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 64px 0 80px;
	text-align: center;
}

body .wc-block-checkout-empty .wc-block-checkout-empty__image {
	width: 56px;
	height: 56px;
	margin: 0 0 8px;
	fill: var(--ks-muted);
}

body .wc-block-checkout-empty .wc-block-checkout-empty__title {
	color: var(--ks-text);
	font-size: 1.25rem;
	font-weight: 700;
}

body .wc-block-checkout-empty .wc-block-checkout-empty__description {
	max-width: 520px;
	margin: 0;
	color: var(--ks-muted);
}

body .wc-block-checkout-empty .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: var(--ks-control-h);
	margin-top: 12px;
	padding: 0 28px;
	border-radius: var(--ks-radius);
	background: var(--ks-btn);
	color: var(--ks-btn-text);
	font-weight: 700;
	text-decoration: none;
}

body .wc-block-checkout-empty .wp-block-button__link:hover {
	background: var(--ks-btn-hover);
}

/* ======================================================================
 * 傳統結帳（[woocommerce_checkout]，inc/checkout-classic.php）：跟區塊結帳一樣的 Shopify 版面。
 * ====================================================================== */

body.woocommerce-checkout form.checkout.woocommerce-checkout::before,
body.woocommerce-checkout form.checkout.woocommerce-checkout::after,
body.woocommerce-checkout #customer_details::before,
body.woocommerce-checkout #customer_details::after,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::before,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::before,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after {
	display: none;
}

/* 標題 */
body.woocommerce-checkout .ks-co-main h3,
body.woocommerce-checkout #order_review_heading {
	margin: 0 0 16px;
	font-size: 1.25rem;
	font-weight: 700;
}

body.woocommerce-checkout .ks-co-main h3:not(:first-child),
body.woocommerce-checkout .ks-co-heading {
	margin-top: 40px;
}

/* 地址欄位：兩欄格線，名／姓、城市／郵遞區號這類 first／last 並排，其他整列 */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

body.woocommerce-checkout form.checkout .form-row {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout form.checkout .form-row-first {
	grid-column: 1;
}

body.woocommerce-checkout form.checkout .form-row-last {
	grid-column: 2;
}

body.woocommerce-checkout form.checkout .form-row label {
	display: block;
	margin-bottom: 10px;
	color: var(--ks-muted);
	font-size: 0.9375rem;
	line-height: 1.4;
}

body.woocommerce-checkout form.checkout .form-row .required {
	color: var(--ks-text);
	text-decoration: none;
}

body.woocommerce-checkout form.checkout .form-row :is(input.input-text, select, textarea) {
	box-sizing: border-box;
	width: 100%;
}

body.woocommerce-checkout form.checkout .form-row textarea {
	min-height: 96px;
	padding: 12px 16px;
}

body.woocommerce-checkout #ship-to-different-address {
	font-size: 1rem;
	font-weight: 600;
}

body.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ks-text);
	cursor: pointer;
}

body.woocommerce-checkout #ship-to-different-address span::before,
body.woocommerce-checkout #ship-to-different-address span::after {
	display: none;
}

body.woocommerce-checkout .woocommerce-shipping-fields .shipping_address {
	margin-top: 16px;
}

body.woocommerce-checkout .woocommerce-account-fields {
	margin-top: 16px;
}

/* 付款方式（照 Shopify）：整組一個圓角框、選項之間細線；選到的標題列淺灰底＋標題色外框，說明在下方灰底；付款 logo 不顯示 */
body.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.5;
}

body.woocommerce-checkout #payment ul.payment_methods > li + li {
	border-top: var(--ks-bw) solid var(--ks-line);
}

body.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"] {
	margin: 0 0 0 18px;
}

body.woocommerce-checkout #payment ul.payment_methods > li > label {
	display: block;
	padding: 18px 18px 18px 0;
	font-weight: 600;
	cursor: pointer;
}

body.woocommerce-checkout #payment ul.payment_methods > li img {
	display: none;
}

/* 選到的：標題列淺灰底＋標題色外框（用 outline 疊在分隔線上） */
body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked) {
	position: relative;
	z-index: 1;
	background: var(--ks-surface);
	outline: var(--ks-bw) solid var(--ks-text);
	outline-offset: calc(-1 * var(--ks-bw));
}

body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked):first-child {
	border-radius: var(--ks-radius) var(--ks-radius) 0 0;
}

body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked):last-child {
	border-radius: 0 0 var(--ks-radius) var(--ks-radius);
}

body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked):only-child {
	border-radius: var(--ks-radius);
}

/* 說明／刷卡欄位：整列、下方灰底 */
body.woocommerce-checkout #payment div.payment_box {
	grid-column: 1 / -1;
	margin: 0;
	padding: 16px 18px 18px;
	border-top: var(--ks-bw) solid var(--ks-line);
	border-radius: 0;
	background: var(--ks-bg);
	color: var(--ks-muted);
	font-size: 0.9375rem;
}

body.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

body.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

body.woocommerce-checkout #payment div.payment_box :is(input.input-text, select) {
	background: var(--ks-bg);
}

/* 沒有可用的付款方式等通知 */
body.woocommerce-checkout #payment ul.payment_methods > li.woocommerce-notice,
body.woocommerce-checkout #payment ul.payment_methods > li:has(> .woocommerce-info) {
	padding: 0;
	border: 0;
	background: none;
}

body.woocommerce-checkout #payment div.form-row.place-order {
	margin: 24px 0 0;
	padding: 0;
}

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 16px;
	color: var(--ks-muted);
	font-size: 0.875rem;
}

body.woocommerce-checkout #payment #place_order {
	float: none;
	width: 100%;
	height: 54px;
	font-size: 1.0625rem;
}

/* 訂單摘要表格：沒有表格框線，商品列有縮圖＋數量徽章，金額靠右 */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table :is(th, td) {
	padding: 14px 0;
	border: 0;
	border-top: var(--ks-bw) solid var(--ks-line);
	background: none;
	font-weight: 500;
	text-align: left;
	vertical-align: middle;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
	display: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
	border-top: 0;
	padding: 8px 0;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:last-child td {
	padding-bottom: 20px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table :is(td.product-total, tfoot td) {
	padding-left: 16px;
	text-align: right;
	white-space: nowrap;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
	color: var(--ks-muted);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total :is(th, td) {
	color: var(--ks-text);
	font-size: 1.375rem;
	font-weight: 700;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
	text-align: right;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table #shipping_method li {
	margin: 0 0 6px;
}

.ks-co-item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ks-co-item__media {
	position: relative;
	flex: none;
	width: 64px;
	height: 64px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: var(--ks-bg);
}

.ks-co-item__media img {
	width: 100%;
	height: 100%;
	border-radius: calc(var(--ks-radius) - 1px);
	object-fit: cover;
}

.ks-co-item__qty {
	position: absolute;
	top: -8px;
	right: -8px;
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--ks-muted);
	color: var(--ks-bg);
	font-size: 0.75rem;
	font-weight: 700;
}

.ks-co-item__name {
	line-height: 1.5;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation {
	margin: 4px 0 0 80px;
	color: var(--ks-muted);
	font-size: 0.8125rem;
}

/* 電腦版：左欄表單、右欄灰底摘要（背景左右各半在上面的 body 設定），摘要跟著捲動 */
@media (min-width: 1000px) {
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
		grid-column: 1;
		padding-top: 48px;
		padding-right: clamp(32px, 4vw, 64px);
	}

	body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup > * {
		max-width: 580px;
		margin-left: auto;
	}

	body.woocommerce-checkout .ks-co-main {
		grid-column: 1;
		padding: 48px clamp(32px, 4vw, 64px) 64px 0;
	}

	body.woocommerce-checkout .ks-co-main > * {
		max-width: 580px;
		margin-left: auto;
	}

	body.woocommerce-checkout .ks-co-summary {
		position: sticky;
		top: var(--ks-adminbar);
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: start;
		padding: 48px 0 64px clamp(32px, 4vw, 64px);
	}

	body.woocommerce-checkout .ks-co-summary__inner {
		max-width: 540px;
	}

	/* 表單外面的折價券、登入提示、幣別說明：也收在左半邊、跟表單同寬 */
	body.woocommerce-checkout .woocommerce > :not(form.checkout):not(.woocommerce-order):not(.ks-order-page) {
		box-sizing: border-box;
		width: 50%;
		padding-right: clamp(32px, 4vw, 64px);
		padding-left: max(0px, calc(50% - 580px - clamp(32px, 4vw, 64px)));
	}

	body.woocommerce-checkout .woocommerce > :not(form.checkout):not(.woocommerce-order):not(.ks-order-page):first-child {
		margin-top: 48px;
	}
}

/* 手機與平板：單欄，順序不變（表單在上、訂單摘要在下，一般底色）；最上方另有一份可收合的訂單摘要 */
@media (max-width: 999px) {
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: flex;
		flex-direction: column;
	}

	body.woocommerce-checkout .ks-co-summary {
		margin: 0 0 48px;
		padding: 32px 0 0;
		border-top: var(--ks-bw) solid var(--ks-line);
		background: none;
	}

	body.woocommerce-checkout #order_review_heading {
		display: block;
	}

	body.woocommerce-checkout .ks-co-main {
		padding-bottom: 40px;
	}
}

/* 左欄直接放的標題（付款方式）也要跟表單同寬對齊 */
@media (min-width: 1000px) {
	body.woocommerce-checkout .ks-co-main > h3 {
		margin-right: 0;
		margin-left: auto;
	}
}

/* 「運送到不同的地址」與訂單備註：跟帳單欄位之間留出距離 */
body.woocommerce-checkout #customer_details .col-2 {
	margin-top: 28px;
}

body.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: 16px;
}

/* 訂單備註的文字框跟其他欄位一樣（深色模式也是） */
body.woocommerce-checkout form.checkout .form-row textarea {
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: var(--ks-bg);
	color: var(--ks-text);
	font: inherit;
}

/* Woo 更新結帳內容時蓋上的遮罩：預設是白色半透明，深色模式會把摘要蓋成另一個顏色；改成跟所在區塊同底色 */
body.woocommerce-checkout .ks-co-summary .blockUI.blockOverlay {
	background: var(--ks-surface) !important;
}

body.woocommerce-checkout .ks-co-main .blockUI.blockOverlay,
body.woocommerce-checkout form.checkout > .blockUI.blockOverlay {
	background: var(--ks-bg) !important;
}

/* 沒有可用的付款方式：只顯示通知，不要外框 */
body.woocommerce-checkout #payment ul.payment_methods:has(> li.woocommerce-notice),
body.woocommerce-checkout #payment ul.payment_methods:has(> li > .woocommerce-info) {
	border: 0;
	border-radius: 0;
}

/* Woo 在付款選項加的 clearfix 偽元素會被當成格線的格子，關掉 */
body.woocommerce-checkout #payment ul.payment_methods > li:not(.ks-none)::before,
body.woocommerce-checkout #payment ul.payment_methods > li:not(.ks-none)::after,
body.woocommerce-checkout #payment ul.payment_methods::before,
body.woocommerce-checkout #payment ul.payment_methods::after {
	display: none;
}

/* ---------- 傳統結帳：欄位標籤放在框內（跟區塊結帳一樣） ---------- */

body.woocommerce-checkout form.checkout .form-row:has(> .woocommerce-input-wrapper > :is(input.input-text, select)) {
	position: relative;
}

body.woocommerce-checkout form.checkout .form-row:has(> .woocommerce-input-wrapper > :is(input.input-text, select)) > label {
	position: absolute;
	top: 28px;
	left: 17px;
	z-index: 2;
	max-width: calc(100% - 50px);
	margin: 0;
	overflow: hidden;
	color: var(--ks-muted);
	font-size: 1rem;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	transform: translateY(-50%);
	transition: top 0.15s, font-size 0.15s, transform 0.15s;
	pointer-events: none;
}

body.woocommerce-checkout form.checkout .form-row.is-filled:has(> .woocommerce-input-wrapper > :is(input.input-text, select)) > label,
body.woocommerce-checkout form.checkout .form-row:focus-within:has(> .woocommerce-input-wrapper > :is(input.input-text, select)) > label {
	top: 8px;
	font-size: 0.8125rem;
	transform: none;
}

/* 必填星號不顯示（選填的欄位標籤本身有「（選填）」） */
body.woocommerce-checkout form.checkout .form-row > label .required {
	display: none;
}

body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper > input.input-text,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper > select {
	height: 56px;
	padding: 22px 16px 6px;
	font-size: 1rem;
}

body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper > input.input-text::placeholder {
	color: transparent;
}

body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper > input.input-text:focus::placeholder {
	color: var(--ks-muted);
}

/* 國家、縣市的下拉（select2） */
body.woocommerce-checkout form.checkout .form-row .select2-container .select2-selection--single {
	height: 56px;
}

body.woocommerce-checkout form.checkout .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding-top: 20px;
	padding-left: 16px;
	line-height: 30px;
}

body.woocommerce-checkout form.checkout .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: 54px;
}

/* 只有一個國家時 Woo 顯示成純文字：也放進一個框裡 */
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper > strong {
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	height: 56px;
	padding: 0 16px 8px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	font-weight: 500;
}

body.woocommerce-checkout form.checkout .form-row:has(> .woocommerce-input-wrapper > strong) > label {
	position: absolute;
	top: 8px;
	left: 17px;
	z-index: 2;
	margin: 0;
	font-size: 0.8125rem;
}

body.woocommerce-checkout form.checkout .form-row:has(> .woocommerce-input-wrapper > strong) {
	position: relative;
}

/* 城市｜縣市、郵遞區號｜電話 兩兩並排 */
body.woocommerce-checkout :is(#billing_city_field, #billing_postcode_field, #shipping_city_field, #shipping_postcode_field) {
	grid-column: 1;
}

body.woocommerce-checkout :is(#billing_state_field, #billing_phone_field, #shipping_state_field, #shipping_phone_field) {
	grid-column: 2;
}

/* ---------- 傳統結帳：左欄的運送方式（跟付款方式同一種群組框，運費靠右） ---------- */

body.woocommerce-checkout .ks-co-shipping__table,
body.woocommerce-checkout .ks-co-shipping__table tbody,
body.woocommerce-checkout .ks-co-shipping__table tr,
body.woocommerce-checkout .ks-co-shipping__table td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

body.woocommerce-checkout .ks-co-shipping__table th {
	display: none;
}

body.woocommerce-checkout .ks-co-shipping__table tr + tr {
	margin-top: 12px;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	list-style: none;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding: 0;
	text-indent: 0;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li::before,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li::after {
	display: none;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li + li {
	border-top: var(--ks-bw) solid var(--ks-line);
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li > input[type="radio"] {
	margin: 0 0 0 18px;
}

/* 只有一種運送方式時 Woo 用隱藏欄位，不顯示單選鈕 */
body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input[type="hidden"]) {
	grid-template-columns: minmax(0, 1fr);
	padding-left: 18px;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li > label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 18px 18px 0;
	font-weight: 600;
	cursor: pointer;
}

body.woocommerce-checkout .ks-co-shipping .ks-rate__cost {
	color: var(--ks-muted);
	font-weight: 500;
	white-space: nowrap;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:checked) {
	position: relative;
	z-index: 1;
	background: var(--ks-surface);
	outline: var(--ks-bw) solid var(--ks-text);
	outline-offset: calc(-1 * var(--ks-bw));
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:checked):first-child {
	border-radius: var(--ks-radius) var(--ks-radius) 0 0;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:checked):last-child {
	border-radius: 0 0 var(--ks-radius) var(--ks-radius);
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:checked):only-child {
	border-radius: var(--ks-radius);
}

/* 沒有可用的運送方式、運送地址說明 */
body.woocommerce-checkout .ks-co-shipping .woocommerce-shipping-destination,
body.woocommerce-checkout .ks-co-shipping td > p {
	margin: 12px 0 0;
	color: var(--ks-muted);
	font-size: 0.9375rem;
}

/* 付款方式的標題也跟區塊結帳一樣大；訂單摘要的運費一行 */
body.woocommerce-checkout .ks-co-main h3.ks-co-heading {
	margin-top: 40px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .ks-co-shipping-total td {
	text-align: right;
}

/* Woo 11 只有一個國家時是一個不能選的 select（country_to_state--single），Woo 把框拿掉了；畫回跟其他欄位一樣的框 */
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper > select.country_to_state--single {
	border: var(--ks-bw) solid var(--ks-line) !important;
	border-radius: var(--ks-radius);
	background: var(--ks-bg) !important;
	color: var(--ks-text);
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

/* 沒有顯示標籤的欄位（地址第二行）：提示字照常顯示 */
body.woocommerce-checkout form.checkout .form-row:has(> label.screen-reader-text) .woocommerce-input-wrapper > input.input-text {
	padding-top: 6px;
}

body.woocommerce-checkout form.checkout .form-row:has(> label.screen-reader-text) .woocommerce-input-wrapper > input.input-text::placeholder {
	color: var(--ks-muted);
}

/* 瀏覽器自動填入不會觸發 input 事件：用 :autofill 判斷，標籤一樣縮到上方 */
body.woocommerce-checkout form.checkout .form-row:has(> .woocommerce-input-wrapper > input:autofill) > label,
body.woocommerce-checkout form.checkout .form-row:has(> .woocommerce-input-wrapper > input:-webkit-autofill) > label {
	top: 8px;
	font-size: 0.8125rem;
	transform: none;
}

/* 自動填入的淺藍底：延遲到看不到（不能用陰影蓋） */
body.woocommerce-checkout form.checkout input:-webkit-autofill,
body.woocommerce-checkout form.checkout input:autofill {
	-webkit-text-fill-color: var(--ks-text);
	transition: background-color 99999s ease-in-out 0s;
}

/* Woo 驗證通過的綠框、錯誤的紅框：框線維持主題色，聚焦才換成標題色；錯誤用紅色 */
body.woocommerce-checkout form.checkout .form-row.woocommerce-validated :is(input.input-text, select),
body.woocommerce-checkout form.checkout .form-row.woocommerce-validated .select2-container .select2-selection {
	border-color: var(--ks-line);
}

body.woocommerce-checkout form.checkout .form-row :is(input.input-text, select):focus {
	border-color: var(--ks-text);
}

/* 錯誤的紅框只在按過「立即付款」之後顯示（.ks-submitted，inc/checkout-classic.php 的 JS 加上） */
body.woocommerce-checkout form.checkout.ks-submitted .form-row.woocommerce-invalid :is(input.input-text, select),
body.woocommerce-checkout form.checkout.ks-submitted .form-row.woocommerce-invalid .select2-container .select2-selection {
	border-color: var(--ks-danger, #d63638);
}

/* 選到的付款方式：說明在同一個灰底外框裡（跟區塊結帳一樣），對齊名稱 */
body.woocommerce-checkout #payment div.payment_box {
	position: static;
	padding: 0 18px 18px 50px;
	border-top: 0;
	background: transparent;
}

/* ---------- 傳統結帳：右欄訂單摘要（照 Shopify：沒有分隔線、數量徽章、摘要裡直接輸入折扣碼） ---------- */

/* 上方的「有折價券嗎？」提示與表單藏起來（折扣碼改在摘要裡輸入，背後照樣用這個表單送出） */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon {
	display: none !important;
}

body.woocommerce-checkout #order_review_heading {
	display: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table :is(th, td) {
	border-top: 0;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
	padding: 10px 0;
	vertical-align: top;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total {
	padding-top: 18px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot :is(th, td) {
	padding: 5px 0;
	color: var(--ks-text);
	font-weight: 500;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child :is(th, td) {
	padding-top: 20px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total :is(th, td) {
	padding-top: 16px;
	font-size: 1.375rem;
	font-weight: 700;
}

.ks-co-currency {
	margin-right: 6px;
	color: var(--ks-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	vertical-align: 0.15em;
}

.ks-co-item {
	align-items: center;
}

.ks-co-item__media {
	width: 64px;
	height: 64px;
	border-width: var(--ks-bw);
}

.ks-co-item__qty {
	top: -9px;
	right: -9px;
	background: var(--ks-text);
	color: var(--ks-bg);
}

.ks-co-item__name {
	display: grid;
	gap: 2px;
	font-weight: 500;
}

.ks-co-item__meta {
	color: var(--ks-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation {
	display: none;
}

/* 折扣碼：輸入框＋灰色「套用」按鈕同一列 */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.ks-co-coupon td {
	padding: 14px 0 0;
}

.ks-co-coupon__field {
	display: flex;
	gap: 10px;
}

.ks-co-coupon__field input.input-text {
	flex: 1;
	min-width: 0;
	height: var(--ks-control-h);
	padding: 0 16px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: var(--ks-bg);
	color: var(--ks-text);
	font: inherit;
	font-size: 1rem;
}

.ks-co-coupon__field input.input-text:focus {
	border-color: var(--ks-text);
	outline: none;
}

.ks-co-coupon__apply {
	flex: none;
	height: var(--ks-control-h);
	padding: 0 22px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: var(--ks-btn-2, var(--ks-surface));
	color: var(--ks-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.ks-co-coupon__apply:hover {
	background: var(--ks-btn-2-hover, var(--ks-line));
}

/* 已套用的折價券一列：代碼與移除連結 */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-discount td {
	color: var(--ks-text);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-remove-coupon {
	margin-left: 6px;
	color: var(--ks-muted);
	font-size: 0.8125rem;
}

body.woocommerce-checkout .ks-co-summary table.woocommerce-checkout-review-order-table,
body.woocommerce-checkout .ks-co-summary table.woocommerce-checkout-review-order-table :is(tr, th, td) {
	border: 0 !important;
}

/* 只填 Email＋運送地址：「運送到不同的地址？」的勾選框藏起來，文字當標題用 */
body.ks-co-email-only #ship-to-different-address input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body.ks-co-email-only #ship-to-different-address label {
	cursor: default;
}

body.ks-co-email-only #ship-to-different-address span {
	font-size: 1.25rem;
	font-weight: 700;
}

body.ks-co-email-only .woocommerce-shipping-fields .shipping_address {
	display: block !important;
	margin-top: 0;
}

body.ks-co-email-only #customer_details .col-2 {
	margin-top: 40px;
}

body.ks-co-email-only #ship-to-different-address {
	margin: 0 0 16px;
}

body.ks-co-email-only .woocommerce-additional-fields:not(:has(.form-row)) {
	display: none;
}

/* 運送方式的 logo（黑貓…）放在名稱前面 */
body.woocommerce-checkout .ks-co-shipping .ks-rate__name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

body.woocommerce-checkout .ks-co-shipping .ks-rate__logo {
	display: block;
	flex: none;
	width: auto;
	height: 26px;
}

/* 手機版最上方的「訂單摘要」手風琴 */
.ks-co-mobile-summary {
	display: none;
}

@media (max-width: 999px) {
	.ks-co-mobile-summary {
		display: block;
		margin: 0 0 24px;
		border-bottom: var(--ks-bw) solid var(--ks-line);
	}

	.ks-co-mobile-summary > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 18px 0;
		font-weight: 600;
		list-style: none;
		cursor: pointer;
	}

	.ks-co-mobile-summary > summary::-webkit-details-marker {
		display: none;
	}

	.ks-co-mobile-summary__label {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.ks-co-mobile-summary__label svg {
		transition: transform 0.2s;
	}

	.ks-co-mobile-summary[open] .ks-co-mobile-summary__label svg {
		transform: rotate(180deg);
	}

	.ks-co-mobile-summary__total {
		font-size: 1.125rem;
		font-weight: 700;
	}

	.ks-co-mobile-summary__body {
		padding-bottom: 20px;
	}

	/* 手風琴裡的是複製品：表格樣式跟右欄一樣 */
	.ks-co-mobile-summary__body table.woocommerce-checkout-review-order-table,
	.ks-co-mobile-summary__body table.woocommerce-checkout-review-order-table :is(tr, th, td) {
		border: 0 !important;
		background: none;
	}
}

@media (max-width: 999px) {
	body.woocommerce-checkout #order_review_heading {
		display: block;
	}
}

/* ---------- 傳統結帳：運送方式、付款方式的群組框（最後的版本） ----------
 * 外框不再疊在整組框線上：每個選項用自己的框線，相鄰的往上疊一條線寬；選到的只把自己的框線換成標題色（不會變雙線）。
 * 選到的底色是標題色 10%；單選鈕沒有底色；付款說明貼近標題、左邊對齊單選鈕。 */

body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout .ks-co-shipping #shipping_method {
	overflow: visible;
	border: 0;
	border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods > li,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li {
	position: relative;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: 0;
	outline: 0;
}

body.woocommerce-checkout #payment ul.payment_methods > li + li,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li + li {
	margin-top: calc(-1 * var(--ks-bw));
	border-top: var(--ks-bw) solid var(--ks-line);
}

body.woocommerce-checkout #payment ul.payment_methods > li:first-child,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li:first-child {
	border-top-left-radius: var(--ks-radius);
	border-top-right-radius: var(--ks-radius);
}

body.woocommerce-checkout #payment ul.payment_methods > li:last-child,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li:last-child {
	border-bottom-right-radius: var(--ks-radius);
	border-bottom-left-radius: var(--ks-radius);
}

body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked),
body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:checked) {
	z-index: 1;
	border-color: var(--ks-text);
	outline: 0;
	background: color-mix(in srgb, var(--ks-text) 10%, transparent);
}

body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked) + li,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:checked) + li {
	border-top-color: var(--ks-text);
}

/* 單選鈕不要底色（在灰底上才不會是一個白圓） */
body.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"],
body.woocommerce-checkout .ks-co-shipping #shipping_method > li > input[type="radio"] {
	background: transparent;
}

/* 付款說明：貼近標題、左邊對齊單選鈕 */
body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked):has(> div.payment_box) > label {
	padding-bottom: 8px;
}

body.woocommerce-checkout #payment div.payment_box {
	margin: 0;
	padding: 0 18px 16px;
}

/* RY Tools 的「選擇超商門市」按鈕與門市資訊：跟運送方式之間留距離 */
body.woocommerce-checkout .ks-co-shipping__table tr:not(.woocommerce-shipping-totals) td {
	padding-top: 4px;
	line-height: 1.7;
}

/* 聯絡資訊標題右邊的「登入」 */
body.woocommerce-checkout .woocommerce-billing-fields {
	position: relative;
}

body.woocommerce-checkout .ks-co-login {
	position: absolute;
	top: 2px;
	right: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Woo 結帳頁自己的「老客戶？按此登入」提示與表單不顯示（只限頁面上那份；登入彈窗裡的表單要照常顯示） */
body.woocommerce-checkout .woocommerce > .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce > form.woocommerce-form-login {
	display: none !important;
}

/* 付款方式的單選鈕垂直置中：名稱上下留白一樣，說明用負邊距往上貼 */
body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked):has(> div.payment_box) > label {
	padding-bottom: 18px;
}

body.woocommerce-checkout #payment div.payment_box {
	margin-top: -8px;
}

/* 手機：每個欄位都是整列 */
@media (max-width: 767px) {
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-checkout form.checkout .form-row,
	body.woocommerce-checkout form.checkout .form-row-first,
	body.woocommerce-checkout form.checkout .form-row-last,
	body.woocommerce-checkout form.checkout .form-row:is([id$="_city_field"], [id$="_state_field"], [id$="_postcode_field"], [id$="_phone_field"]) {
		grid-column: 1 / -1;
	}
}

/* 手機與平板：下方的訂單摘要放在付款方式與「立即付款」之間。
   左欄與付款區塊用 display: contents 攤平，讓付款選項、摘要、下單按鈕變成同一層再排順序。 */
@media (max-width: 999px) {
	body.woocommerce-checkout form.checkout .ks-co-main,
	body.woocommerce-checkout form.checkout #payment {
		display: contents;
	}

	body.woocommerce-checkout form.checkout .ks-co-summary {
		order: 1;
		margin: 32px 0 0;
	}

	body.woocommerce-checkout form.checkout #payment > .form-row.place-order,
	body.woocommerce-checkout form.checkout #payment > .place-order {
		order: 2;
		margin-top: 24px;
		padding-bottom: 40px;
	}
}

/* 手機：欄位一律一個一排、全寬（要蓋過城市／縣市這幾個用 ID 指定欄位的規則） */
@media (max-width: 767px) {
	body.woocommerce-checkout form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.woocommerce-checkout form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row {
		grid-column: 1 / -1 !important;
		width: 100% !important;
	}
}

/* 運送方式的 logo：固定高度、寬度照比例，名稱對齊 */
body.woocommerce-checkout .ks-co-shipping .ks-rate__logo {
	width: auto;
	max-width: 44px;
	height: 26px;
	object-fit: contain;
}

/* ---------- RY Tools 選擇超商門市（woocommerce/cart/cart-choose-cvs.php） ---------- */

body.woocommerce-checkout .ks-co-shipping .ks-cvs td {
	padding-top: 12px;
}

body.woocommerce-checkout .ks-cvs .ry-choose-cvs {
	width: 100%;
}

/* 門市資訊：跟結帳欄位一樣的框，兩欄格線；有門市電話時名稱與電話各半 */
body.woocommerce-checkout .ks-cvs-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	margin-top: 12px;
}

body.woocommerce-checkout .ks-cvs-fields > .ks-cvs-field {
	display: grid;
	grid-column: 1 / -1;
	align-content: center;
	gap: 2px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 8px 16px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	background: var(--ks-bg);
}

body.woocommerce-checkout .ks-cvs-fields:has(> .ks-cvs-field--telephone:not([style*="none"])) > .ks-cvs-field--name,
body.woocommerce-checkout .ks-cvs-fields > .ks-cvs-field--telephone {
	grid-column: auto;
}

body.woocommerce-checkout .ks-cvs-fields > .ks-cvs-field[style*="none"] {
	display: none;
}

.ks-cvs-field__label {
	color: var(--ks-muted);
	font-size: 0.8125rem;
	line-height: 1.2;
}

.ks-cvs-field__value {
	font-size: 1rem;
	line-height: 1.5;
}

/* 原本的電話欄位：整列 */
body.woocommerce-checkout #shipping_phone_field,
body.woocommerce-checkout #billing_phone_field {
	grid-column: 1 / -1 !important;
}

@media (max-width: 767px) {
	body.woocommerce-checkout .ks-cvs-fields > .ks-cvs-field {
		grid-column: 1 / -1 !important;
	}
}

/* 運送方式的說明（手風琴）：只有選到的（或只有一種運送方式時）展開，左邊對齊單選鈕 */
body.woocommerce-checkout .ks-co-shipping #shipping_method > li > .ks-rate__panel {
	display: none;
	grid-column: 1 / -1;
	margin-top: -8px;
	padding: 0 18px 16px;
	color: var(--ks-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:checked) > .ks-rate__panel,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input[type="hidden"]) > .ks-rate__panel {
	display: block;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input[type="hidden"]) > .ks-rate__panel {
	padding-left: 0;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:checked) > label {
	padding-bottom: 18px;
}

body.woocommerce-checkout .ks-rate__desc {
	margin: 0;
}

body.woocommerce-checkout .ks-rate__extra:empty {
	display: none;
}

body.woocommerce-checkout .ks-rate__extra {
	margin-top: 12px;
	color: var(--ks-text);
}

body.woocommerce-checkout .ks-rate__extra .ry-choose-cvs {
	width: 100%;
}

/* 選好門市後按鈕變成次要樣式（更換門市），門市資訊在按鈕下方 */
body.woocommerce-checkout .ks-rate__extra .ks-cvs-fields {
	margin-top: 12px;
}

body.woocommerce-checkout .ks-co-shipping tr.ks-cvs[hidden] {
	display: none;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li > .ks-rate__panel:not(:has(.ks-rate__desc)):has(> .ks-rate__extra:empty) {
	display: none !important;
}

/* 摘要標題：電腦版右欄不顯示；手機版下方那份叫「訂單明細」，而且不放折扣碼（最上方那份有） */
body.woocommerce-checkout .ks-co-summary__title {
	display: none;
	margin: 0 0 16px;
	font-size: 1.25rem;
	font-weight: 700;
}

@media (max-width: 999px) {
	body.woocommerce-checkout .ks-co-summary__title {
		display: block;
	}

	body.woocommerce-checkout #order_review_heading {
		display: none !important;
	}

	body.woocommerce-checkout .ks-co-summary tr.ks-co-coupon {
		display: none;
	}
}

/* 隱私權：必須勾選的核取方塊 */
body.woocommerce-checkout .ks-co-privacy {
	margin: 0 0 16px;
}

body.woocommerce-checkout .ks-co-privacy label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--ks-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	cursor: pointer;
}

body.woocommerce-checkout .ks-co-privacy input[type="checkbox"] {
	display: inline-grid;
	flex: none;
	margin: 3px 0 0;
}

body.woocommerce-checkout .ks-co-privacy a {
	color: var(--ks-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
	display: none;
}

/* 付款方式、運送方式的說明：上下留白一樣（說明在中間），下方比原本大一點 */
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li > .ks-rate__panel {
	margin-top: -6px;
	padding-bottom: 20px;
}

/* 門市資訊搬到「運送地址」欄位最後：整列，裡面照原本的兩欄格線 */
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .ks-cvs-fields,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .ks-cvs-fields {
	grid-column: 1 / -1;
	margin-top: 0;
}

/* 免運：「免運」標籤（跟特價徽章一樣直角、紅底白字）＋劃掉的原價＋NT$0 */
.ks-free-shipping {
	display: inline-flex;
	align-items: center;
	height: 22px;
	margin-right: 8px;
	padding: 0 8px;
	border-radius: 0;
	background: var(--ks-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	vertical-align: middle;
}

body.woocommerce-checkout .ks-rate__cost del,
body.woocommerce-checkout .ks-co-shipping-total del {
	margin-right: 4px;
	color: var(--ks-muted);
	font-weight: 400;
}

body.woocommerce-checkout .ks-rate__cost {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* 電腦版右欄窄一點 */
@media (min-width: 1000px) {
	body.woocommerce-checkout .ks-co-summary__inner {
		max-width: 460px;
	}
}

/* 付款方式名稱右邊的卡片圖示（Visa、Mastercard、JCB） */
body.woocommerce-checkout #payment ul.payment_methods > li > label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

body.woocommerce-checkout #payment ul.payment_methods > li .ks-pay-icons {
	display: inline-flex;
	flex: none;
	gap: 6px;
}

body.woocommerce-checkout #payment ul.payment_methods > li .ks-pay-icons img {
	display: block;
	width: 38px;
	height: 24px;
	margin: 0;
	border-radius: 4px;
}

/* 結帳頁的單選鈕大一點；選到的是實心（見 main.css），不能被「沒有底色」的規則蓋掉 */
body.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"],
body.woocommerce-checkout .ks-co-shipping #shipping_method > li > input[type="radio"] {
	width: 20px;
	height: 20px;
}

body.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"]:checked,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li > input[type="radio"]:checked {
	background: var(--ks-text);
}

/* 隱私權核取方塊：Woo 的 .woocommerce form .form-row label.checkbox 會設 display: inline，要用更高的權重蓋掉 */
body.woocommerce-checkout form.checkout .form-row.ks-co-privacy label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

body.woocommerce-checkout form.checkout .form-row.ks-co-privacy label.checkbox input[type="checkbox"] {
	display: inline-grid;
	flex: none;
	margin: 3px 0 0;
}

/* 付款方式的說明置中（例如「系統會將您重新導向至 ECPay 以完成購買」） */
body.woocommerce-checkout #payment div.payment_box {
	text-align: center;
}

/* 運送方式、付款方式不顯示單選鈕（藏起來但照樣可以選，點名稱即可），
   左邊留白保留原本單選鈕的位置；只有一種付款方式（Woo 不輸出單選鈕）時也一樣留白。 */
body.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"],
body.woocommerce-checkout .ks-co-shipping #shipping_method > li > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

body.woocommerce-checkout #payment ul.payment_methods > li,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li {
	grid-template-columns: minmax(0, 1fr);
}

body.woocommerce-checkout #payment ul.payment_methods > li > label,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li > label {
	grid-column: 1 / -1;
	padding-left: 20px;
	padding-right: 20px;
}

body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input[type="hidden"]) {
	padding-left: 0;
}

body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li > .ks-rate__panel,
body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input[type="hidden"]) > .ks-rate__panel {
	padding-right: 20px;
	padding-left: 20px;
}

/* 鍵盤操作時看得出目前在哪一項 */
body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:focus-visible),
body.woocommerce-checkout .ks-co-shipping #shipping_method > li:has(> input:focus-visible) {
	z-index: 2;
	border-color: var(--ks-text);
}

/* 運費金額與劃掉的原價：標題色 */
body.woocommerce-checkout .ks-co-shipping .ks-rate__cost,
body.woocommerce-checkout .ks-rate__cost del,
body.woocommerce-checkout .ks-co-shipping-total del {
	color: var(--ks-text);
}

/* 折扣碼上下的距離縮小一點 */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item:last-of-type td {
	padding-bottom: 6px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.ks-co-coupon td {
	padding: 6px 0 0 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child :is(th, td) {
	padding-top: 14px;
}

/* 地址：郵遞區號整列在上，縣市｜鄉鎮市各半（RY City Select 的順序是郵遞區號→縣市→鄉鎮市）；
   用 dense 讓縣市補進鄉鎮市左邊的空位，欄位順序不同時也能排成一列 */
@media (min-width: 768px) {
	body.woocommerce-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) {
		grid-auto-flow: row dense;
	}

	body.woocommerce-checkout :is(#billing_postcode_field, #shipping_postcode_field) {
		grid-column: 1 / -1;
	}

	body.woocommerce-checkout :is(#billing_state_field, #shipping_state_field) {
		grid-column: 1;
	}

	body.woocommerce-checkout :is(#billing_city_field, #shipping_city_field) {
		grid-column: 2;
	}
}

/* 劃掉的運費原價：小一點、灰色、一般字重 */
body.woocommerce-checkout .ks-rate__cost del,
body.woocommerce-checkout .ks-co-shipping-total del {
	color: var(--ks-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

body.woocommerce-checkout .ks-rate__cost del .woocommerce-Price-amount,
body.woocommerce-checkout .ks-co-shipping-total del .woocommerce-Price-amount {
	font-weight: 400;
}

/* 付款說明上方的圖示（瀏覽器視窗，灰色）：用遮罩畫，顏色跟著 --ks-muted（深淺色都對） */
body.woocommerce-checkout #payment div.payment_box::before {
	content: "";
	position: static;
	display: block;
	width: 40px;
	height: 40px;
	margin: 4px auto 10px;
	border: 0;
	background: var(--ks-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6Z' fill='black'/%3E%3Cpath d='M10 6C10 6.55228 9.55228 7 9 7C8.44772 7 8 6.55228 8 6C8 5.44772 8.44772 5 9 5C9.55228 5 10 5.44772 10 6Z' fill='black'/%3E%3Cpath d='M13 6C13 6.55228 12.5523 7 12 7C11.4477 7 11 6.55228 11 6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6Z' fill='black'/%3E%3Cpath d='M2 9.5H22' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M9 21L9 10' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6Z' fill='black'/%3E%3Cpath d='M10 6C10 6.55228 9.55228 7 9 7C8.44772 7 8 6.55228 8 6C8 5.44772 8.44772 5 9 5C9.55228 5 10 5.44772 10 6Z' fill='black'/%3E%3Cpath d='M13 6C13 6.55228 12.5523 7 12 7C11.4477 7 11 6.55228 11 6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6Z' fill='black'/%3E%3Cpath d='M2 9.5H22' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M9 21L9 10' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: none;
}

/* 表單離 header 近一點：空的 Woo 通知容器不佔位置，兩欄上距縮小 */
body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

@media (min-width: 1000px) {
	body.woocommerce-checkout .ks-co-main {
		padding-top: 32px;
	}

	body.woocommerce-checkout .ks-co-summary {
		padding-top: 32px;
	}

	body.woocommerce-checkout .woocommerce > :not(form.checkout):not(.woocommerce-order):not(.ks-order-page):not(:empty):first-child {
		margin-top: 32px;
	}
}

/* 付款說明文字加粗 */
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-checkout #payment div.payment_box p {
	font-weight: 600;
}

/* 折扣碼：跟上方商品近一點、跟下方小計遠一點（:last-of-type 會抓到折扣碼那一列，改用 :has） */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item:has(+ tr.ks-co-coupon) td {
	padding-bottom: 4px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.ks-co-coupon td {
	padding: 4px 0 10px !important;
}

/* 結帳表單裡所有的核取方塊（建立帳號、訂閱等）：Woo 把 label.checkbox 設成 inline，方塊會被擠成一條線 */
body.woocommerce-checkout form.checkout .form-row label.checkbox,
body.woocommerce-checkout form.checkout .woocommerce-account-fields label.checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ks-text);
	font-size: 0.9375rem;
	cursor: pointer;
}

body.woocommerce-checkout form.checkout .form-row label.checkbox input[type="checkbox"] {
	display: inline-grid;
	flex: none;
	margin: 0;
}

body.woocommerce-checkout form.checkout .woocommerce-account-fields {
	margin-top: 12px;
}

body.woocommerce-checkout form.checkout .woocommerce-account-fields .create-account:not(.form-row) {
	display: grid;
	gap: 12px;
	margin-top: 12px;
}

/* 摘要的商品列：名稱欄盡量寬，價格欄只佔需要的寬度 */
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
	width: 100%;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
	width: 1%;
	padding-left: 12px;
	white-space: nowrap;
}

/* 付款說明的上下留白再大一點 */
body.woocommerce-checkout #payment div.payment_box {
	margin-top: 0;
	padding-top: 4px;
	padding-bottom: 24px;
}

/* 運送方式在運送地址上方（放在右半欄 col-2 的最前面） */
body.woocommerce-checkout #customer_details .col-2 > .ks-co-shipping {
	margin-bottom: 40px;
}

body.woocommerce-checkout #customer_details .col-2 > .ks-co-shipping .ks-co-heading {
	margin-top: 0;
}

/* 商品列不跟下方金額列共用表格欄寬（總計字大，會把價格欄撐得很寬）：改成自己排，名稱撐滿、價格靠右 */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-name {
	flex: 1;
	width: auto;
	min-width: 0;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-total {
	flex: none;
	width: auto;
	padding-left: 0;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.ks-co-coupon {
	display: block;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.ks-co-coupon > td {
	display: block;
}

/* 訂單摘要整張表不用表格排版：每一列自己左右排（商品名稱撐滿、金額靠右），欄寬互不影響 */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot {
	display: block;
	width: 100%;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.cart_item {
	align-items: flex-start;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr > :is(th, td),
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr > :is(th, td) {
	display: block;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.ks-co-coupon > td {
	flex: 1;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr > td {
	margin-left: auto;
}

/* 還沒按「立即付款」之前：Woo 邊填邊檢查加上的紅框與欄位下方的錯誤文字都不顯示 */
body.woocommerce-checkout form.checkout:not(.ks-submitted) .form-row.woocommerce-invalid :is(input.input-text, select, textarea),
body.woocommerce-checkout form.checkout:not(.ks-submitted) .form-row.woocommerce-invalid .select2-container .select2-selection {
	border-color: var(--ks-line);
}

body.woocommerce-checkout form.checkout:not(.ks-submitted) .form-row.woocommerce-invalid :is(input.input-text, select, textarea):focus {
	border-color: var(--ks-text);
}

body.woocommerce-checkout form.checkout:not(.ks-submitted) .form-row.woocommerce-invalid label {
	color: var(--ks-muted);
}

body.woocommerce-checkout form.checkout:not(.ks-submitted) .checkout-inline-error-message {
	display: none;
}