/*
 * 顏色都走 token。深色模式有兩種觸發：系統設定（沒手動選過時），或 <html data-theme="dark">。
 * 兩段深色 token 必須保持一致。
 */
:root {
	--ks-bg: #ffffff;
	--ks-surface: #f4f4f2;
	--ks-elevated: #ffffff;
	--ks-text: #151515;
	--ks-muted: #6c6c6a;
	--ks-line: #ececec;
	--ks-btn: #151515;
	--ks-btn-hover: #333333;
	--ks-btn-text: #ffffff;
	--ks-btn-2: #ececec;
	--ks-btn-2-hover: #e0e0e0;
	/* 放在彈窗、卡片（elevated 底色）上的灰色按鈕 */
	--ks-btn-2-raised: #ececec;
	/* 側邊抽屜、彈窗、選單面板的底色：跟 header 一樣 */
	/* 通知：成功綠、錯誤紅，一般通知是灰色（底色＋圖示色） */
	--ks-notice-success-bg: #d6f5de;
	--ks-notice-success: #16a34a;
	--ks-notice-error-bg: #fde0dc;
	--ks-notice-error: #dc2626;
	--ks-notice-info-bg: #f4f4f2;
	--ks-notice-info: #151515;
	--ks-panel: #ffffff;
	/* 強調按鈕（追蹤、訂閱）：淺色版黑底白字，深色版白底黑字 */
	--ks-btn-strong: #151515;
	--ks-btn-strong-hover: #333333;
	--ks-btn-strong-text: #ffffff;
	--ks-btn-2-raised-hover: #e0e0e0;
	--ks-overlay: rgba(0, 0, 0, 0.45);
	--ks-success: #2f7a3d;
	--ks-danger: #b3261e;
	--ks-sale: #d92d20;

	--ks-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	/* 全寬版面，左右留白：電腦 4vw、平板 5vw、手機 6vw */
	--ks-container: none;
	--ks-gutter: 4vw;
	--ks-header-height: 72px;

	/* 商品頁圖庫 sticky 的位置：header 出現時要讓出它的高度（JS 在 header 收起時加上 .ks-header-hidden）。 */
	--ks-sticky-top: calc(var(--ks-header-height) + 24px + var(--ks-adminbar));

	/* 全站一致：圓角、邊框粗細、輸入框與按鈕高度 */
	--ks-radius: 10px;
	--ks-bw: 1.5px;
	--ks-control-h: 47.5px;
	--ks-control-h-lg: 54px;

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ks-bg: #151515;
		--ks-surface: #1f1f1f;
		--ks-elevated: #262626;
		--ks-text: #f2f2ef;
		--ks-muted: #a3a3a0;
		--ks-line: #202020;
		--ks-btn: #ffffff;
		--ks-btn-hover: #e6e6e6;
		--ks-btn-text: #000000;
		--ks-btn-2: #262626;
		--ks-btn-2-hover: #303030;
		--ks-btn-2-raised: #333333;
		--ks-btn-2-raised-hover: #3d3d3d;
		--ks-notice-success-bg: #0f3a1e;
		--ks-notice-success: #4ade80;
		--ks-notice-error-bg: #451513;
		--ks-notice-error: #f87171;
		--ks-notice-info-bg: #1f1f1f;
		--ks-notice-info: #f2f2ef;
		--ks-panel: #151515;
		--ks-btn-strong: #ffffff;
		--ks-btn-strong-hover: #e6e6e6;
		--ks-btn-strong-text: #000000;
		--ks-overlay: rgba(0, 0, 0, 0.6);
		--ks-success: #7cc88a;
		--ks-danger: #f2877e;

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--ks-bg: #151515;
	--ks-surface: #1f1f1f;
	--ks-elevated: #262626;
	--ks-text: #f2f2ef;
	--ks-muted: #a3a3a0;
	--ks-line: #202020;
	--ks-btn: #ffffff;
	--ks-btn-hover: #e6e6e6;
	--ks-btn-text: #000000;
	--ks-btn-2: #262626;
	--ks-btn-2-hover: #303030;
	--ks-btn-2-raised: #333333;
	--ks-btn-2-raised-hover: #3d3d3d;
	--ks-notice-success-bg: #0f3a1e;
	--ks-notice-success: #4ade80;
	--ks-notice-error-bg: #451513;
	--ks-notice-error: #f87171;
	--ks-notice-info-bg: #1f1f1f;
	--ks-notice-info: #f2f2ef;
	--ks-panel: #151515;
	--ks-btn-strong: #ffffff;
	--ks-btn-strong-hover: #e6e6e6;
	--ks-btn-strong-text: #000000;
	--ks-overlay: rgba(0, 0, 0, 0.6);
	--ks-success: #7cc88a;
	--ks-danger: #f2877e;

	color-scheme: dark;
}

@media (max-width: 1024px) {
	:root {
		--ks-gutter: 5vw;
	}
}

@media (max-width: 600px) {
	:root {
		--ks-gutter: 6vw;
	}
}

/* 基本 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* hidden 屬性一定要藏起來，不被元件自己的 display 蓋掉 */
[hidden] {
	display: none !important;
}

/* 橫向不允許超出畫面。用 clip 而不是 hidden：hidden 會讓 body 變成捲動容器，header 與圖庫的 sticky 就失效了。 */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--ks-bg);
	color: var(--ks-text);
	font-family: var(--ks-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

/* 連結不加底線，文字連結滑過時淡一點。按鈕、圖卡有自己的 hover。 */
:where(.ks-mega__heading, .ks-card__title a, .ks-featured__title a, .ks-article__content a, .ks-mobile-menu a, .ks-link, .ks-cart-item__name a, .ks-ticker__link, .ks-footer a):hover {
	opacity: 0.7;
}

img {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3 {
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

:focus-visible {
	outline: var(--ks-bw) solid var(--ks-text);
	outline-offset: 2px;
}

/* 輸入框聚焦時不加外框光暈，只換邊框顏色。 */
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
	border-radius: var(--ks-radius);
	transition: border-color 0.15s;
}

/* checkbox、radio、select 自己畫，深淺色都一致 */

input[type="checkbox"],
input[type="radio"] {
	display: inline-grid;
	flex: none;
	place-content: center;
	width: 18px;
	height: 18px;
	margin: 0;
	border: var(--ks-bw) solid var(--ks-line);
	background: var(--ks-bg);
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

input[type="checkbox"] {
	border-radius: 5px;
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]::before,
input[type="radio"]::before {
	content: "";
	transform: scale(0);
	transition: transform 0.12s;
}

input[type="checkbox"]::before {
	width: 10px;
	height: 10px;
	background: var(--ks-bg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

input[type="radio"]::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ks-text);
}

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

input[type="checkbox"]:checked {
	border-color: var(--ks-text);
	background: var(--ks-text);
}

/* 單選鈕選到時：整顆實心（標題色），中間一個底色小圓點 */
input[type="radio"]:checked {
	border-color: var(--ks-text);
	background: var(--ks-text);
}

input[type="radio"]:checked::before {
	width: 6px;
	height: 6px;
	background: var(--ks-bg);
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
	transform: scale(1);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: var(--ks-bw) solid var(--ks-text);
	outline-offset: 2px;
}

select {
	height: var(--ks-control-h);
	padding: 0 40px 0 14px;
	border: var(--ks-bw) solid var(--ks-line);
	background-color: var(--ks-bg);
	background-image: var(--ks-select-arrow);
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 12px;
	color: var(--ks-text);
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

:root {
	--ks-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9L12 15L5 9' stroke='%23151515' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ks-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9L12 15L5 9' stroke='%23f2f2ef' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

:root[data-theme="dark"] {
	--ks-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9L12 15L5 9' stroke='%23f2f2ef' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--ks-text) !important;
	outline: none;
	box-shadow: none;
}

.ks-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ks-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 8px 16px;
	background: var(--ks-btn);
	color: var(--ks-btn-text);
}

.ks-skip-link:focus {
	top: 16px;
}

.ks-container {
	width: 100%;
	max-width: var(--ks-container);
	margin: 0 auto;
	padding: 0 var(--ks-gutter);
}

.ks-content {
	padding-top: 16px;
	padding-bottom: 64px;
}

/* 按鈕與連結 */

.ks-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ks-control-h);
	padding: 0 28px;
	border: 0;
	border-radius: var(--ks-radius);
	background: var(--ks-btn);
	color: var(--ks-btn-text);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}

.ks-btn:hover {
	background: var(--ks-btn-hover);
	color: var(--ks-btn-text);
}

.ks-btn--small {
	padding: 0 20px;
	font-size: 0.9375rem;
}

.ks-btn--ghost {
	border: var(--ks-bw) solid var(--ks-line);
	background: transparent;
	color: var(--ks-text);
}

.ks-btn--ghost:hover {
	border-color: var(--ks-text);
	background: transparent;
	color: var(--ks-text);
}

.ks-btn--block {
	display: flex;
	width: 100%;
}

.ks-link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* 純圖示按鈕：沒有外框、背景、留白，點擊範圍用偽元素往外擴。 */
.ks-icon-button,
.ks-drawer__close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s;
}

.ks-icon-button::after,
.ks-drawer__close::after {
	content: "";
	position: absolute;
	inset: -10px;
}

.ks-icon-button:hover,
.ks-drawer__close:hover {
	opacity: 0.6;
}

/* 所有抽屜、彈出視窗的關閉鈕：統一 22px */
.ks-drawer__close svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* 公告列（外觀 → 公告列）：一次一則，往上捲到下一則 */

.ks-announcement {
	--ks-ticker-h: 52px;
	background: var(--ks-announcement-bg, var(--ks-surface));
	color: var(--ks-announcement-color, var(--ks-text));
	font-size: 0.9375rem;
}

.ks-ticker {
	height: var(--ks-ticker-h);
	overflow: hidden;
}

.ks-ticker__list {
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ks-ticker__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: var(--ks-ticker-h);
	padding: 0 var(--ks-gutter);
	white-space: nowrap;
}

.ks-ticker__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ks-ticker__link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	color: inherit;
	font-weight: 600;
}

/* 整則公告都可以點：連結的點擊範圍撐滿這一則 */
.ks-ticker__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* 登入時的 WordPress 工具列：電腦版 32px、平板 46px 固定在最上方；600px 以下會跟著頁面捲走，不用讓位 */
:root {
	--ks-adminbar: 0px;
}

:root:has(> body.admin-bar) {
	--ks-adminbar: 32px;
}

@media (max-width: 782px) {
	:root:has(> body.admin-bar) {
		--ks-adminbar: 46px;
	}
}

@media (max-width: 600px) {
	:root:has(> body.admin-bar) {
		--ks-adminbar: 0px;
	}
}

/* Header：往下捲時收起、往上捲時出現 */

.ks-header {
	position: sticky;
	top: var(--ks-adminbar);
	/* 要高過 Woo 圖庫燈箱按鈕（z-index 99），低於抽屜與彈窗（1000） */
	z-index: 100;
	border-bottom: var(--ks-bw) solid var(--ks-line);
	background: var(--ks-bg);
	transition: transform 0.3s;
}

.ks-header.is-hidden {
	transform: translateY(calc(-100% - var(--ks-adminbar)));
}

.ks-header-hidden {
	--ks-sticky-top: calc(24px + var(--ks-adminbar));
}

/* 大型下拉選單展開時不要被收起 */
.ks-header:focus-within,
.ks-header:has(.ks-nav__item--mega:hover),
.ks-header:has(.ks-nav__item--dropdown:hover),
.ks-header:has(.ks-search-menu:hover) {
	transform: none;
}

.ks-header__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: var(--ks-header-height);
}

.ks-brand__name {
	font-size: 1.75rem;
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.03em;
	text-decoration: none;
	white-space: nowrap;
}

.ks-brand img {
	display: block;
	max-height: 44px;
	width: auto;
}

.ks-nav__list,
.ks-small-menu {
	display: flex;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

/* 選單項目撐滿 header 的高度，底線才會剛好疊在 header 的下框線上 */
.ks-nav,
.ks-small-menu,
.ks-nav__list,
.ks-nav__item,
.ks-small-menu li {
	display: flex;
	align-self: stretch;
}

.ks-nav__link,
.ks-small-menu a {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	text-decoration: none;
}

/* 滑過時由左往右畫出 2px 的標題色底線，疊在 header 下框線上 */
.ks-nav__link::after,
.ks-small-menu a::after {
	content: "";
	position: absolute;
	/* 要疊在大型下拉選單的上框線上面，否則展開時會蓋住底線 */
	z-index: 2;
	right: 0;
	bottom: calc(-1 * var(--ks-bw));
	left: 0;
	height: 2px;
	background: var(--ks-text);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ks-nav__link:hover::after,
.ks-nav__link:focus-visible::after,
.ks-nav__item--mega:hover > .ks-nav__link::after,
.ks-nav__item--mega:focus-within > .ks-nav__link::after,
.ks-nav__item--dropdown:hover > .ks-nav__link::after,
.ks-nav__item--dropdown:focus-within > .ks-nav__link::after,
.ks-small-menu a:hover::after,
.ks-small-menu a:focus-visible::after {
	transform: scaleX(1);
}

/* 電腦版 header 右側的 icon 滑過時也畫同一條底線（Logo 除外），取代淡出效果。
   底線用 ::before，::after 已經拿來放大點擊範圍；位置從按鈕中心往下推到 header 下框線。 */
@media (min-width: 1100px) and (hover: hover) {
	.ks-header__actions .ks-icon-button:hover {
		opacity: 1;
	}

	.ks-header__actions .ks-icon-button::before {
		content: "";
		position: absolute;
		/* 要疊在搜尋面板的上框線上面，展開時才不會被蓋住 */
		z-index: 2;
		right: 0;
		bottom: calc(50% - var(--ks-header-height) / 2 - var(--ks-bw));
		left: 0;
		height: 2px;
		background: var(--ks-text);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
	}

	.ks-header__actions .ks-icon-button:hover::before,
	.ks-header__actions .ks-icon-button:focus-visible::before,
	.ks-search-menu:hover .ks-search-toggle::before,
	.ks-search-menu.is-open .ks-search-toggle::before {
		transform: scaleX(1);
	}
}

.ks-nav__link[aria-current],
.ks-small-menu a[aria-current] {
	font-weight: 600;
}

.ks-header__end {
	display: flex;
	align-self: stretch;
	align-items: center;
	gap: 32px;
	margin-left: auto;
}

.ks-header__actions {
	display: flex;
	align-items: center;
	gap: 22px;
}

.ks-header .ks-icon-button svg {
	width: 26px;
	height: 26px;
}

.ks-menu-toggle {
	display: none;
}

/* 大型下拉選單 */

.ks-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	border-top: var(--ks-bw) solid var(--ks-line);
	border-bottom: var(--ks-bw) solid var(--ks-line);
	background: var(--ks-bg);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}

.ks-nav__item--mega:hover .ks-mega,
.ks-nav__item--mega:focus-within .ks-mega {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.2s, transform 0.2s;
}

.ks-mega__inner {
	display: flex;
	gap: 48px;
	padding-top: 40px;
	padding-bottom: 48px;
}

.ks-mega__columns {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	align-content: start;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-mega__heading {
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
}

.ks-mega__links {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ks-mega__links li + li {
	margin-top: 10px;
}

.ks-mega__links a {
	color: var(--ks-muted);
	text-decoration: none;
}

.ks-mega__links a:hover {
	color: var(--ks-text);
}

/* 推廣圖卡：圖片疊暗色遮罩，白字 */
.ks-promo {
	position: relative;
	border-radius: var(--ks-radius);
	display: flex;
	flex: 0 0 min(420px, 38%);
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
}

.ks-promo__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

.ks-promo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
}

.ks-promo:hover .ks-promo__image {
	transform: scale(1.04);
}

.ks-promo__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 28px;
}

.ks-promo__eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.ks-promo__title {
	font-size: 1.75rem;
	line-height: 1.2;
}

.ks-promo__button {
	margin-top: 10px;
	padding: 10px 20px;
	border: var(--ks-bw) solid currentColor;
	border-radius: var(--ks-radius);
	font-weight: 600;
}

/* 麵包屑 */

.ks-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 24px;
	padding-bottom: 24px;
	color: var(--ks-muted);
	font-size: 1rem;
}

@media (min-width: 769px) {
	.ks-breadcrumb {
		padding-top: 32px;
		padding-bottom: 32px;
		font-size: 1.0625rem;
	}
}

/* 麵包屑下面緊接的內容不再加上方留白，上下距離才會一樣。 */
.ks-breadcrumb + .ks-main > .ks-content:first-child,
.ks-breadcrumb + .ks-main > .ks-article > .ks-article__header {
	padding-top: 0;
}

.ks-breadcrumb a {
	text-decoration: none;
}

.ks-breadcrumb a:hover {
	color: var(--ks-text);
}

/* 手機選單用 <dialog>，瀏覽器會處理 Esc 與焦點。 */

.ks-sheet {
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ks-panel);
	color: var(--ks-text);
}

.ks-sheet::backdrop {
	top: var(--ks-sheet-top, 0px);
	background: var(--ks-overlay);
}

.ks-sheet {
	inset: var(--ks-sheet-top, 0px) auto 0 0;
	width: min(420px, 100vw);
	height: calc(100dvh - var(--ks-sheet-top, 0px));
	flex-direction: column;
}

.ks-sheet[open] {
	display: flex;
	animation: ks-slide-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes ks-slide-in {
	from {
		transform: translateX(-100%);
	}
}

.ks-sheet__head {
	display: flex;
	justify-content: flex-end;
	padding: 16px;
}

.ks-mobile-menu {
	flex: 1;
	overflow-y: auto;
	padding: 0 24px;
}

.ks-mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-mobile-menu__list .ks-mobile-menu__list {
	padding: 4px 0 12px 16px;
}

.ks-mobile-menu > .ks-mobile-menu__list > li {
	border-bottom: var(--ks-bw) solid var(--ks-line);
}

.ks-mobile-menu a,
.ks-mobile-menu summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	font-size: 1.125rem;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

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

.ks-mobile-menu details[open] > summary svg {
	transform: rotate(90deg);
}

.ks-mobile-menu .ks-mobile-menu__list .ks-mobile-menu__list a,
.ks-mobile-menu__all {
	padding: 8px 0;
	color: var(--ks-muted);
	font-size: 1rem;
}

.ks-mobile-menu a[aria-current] {
	font-weight: 600;
}

.ks-sheet__foot {
	padding: 16px 24px 24px;
	border-top: var(--ks-bw) solid var(--ks-line);
}

/* 搜尋面板：滑過搜尋圖示時從 header 下方展開，跟大型下拉選單一樣（手機版用點擊開關） */

.ks-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100dvh - var(--ks-header-height));
	overflow-y: auto;
	border-top: var(--ks-bw) solid var(--ks-line);
	border-bottom: var(--ks-bw) solid var(--ks-line);
	background: var(--ks-bg);
	color: var(--ks-text);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}

.ks-search__inner {
	padding-top: 32px;
	padding-bottom: 48px;
}

.ks-search-menu {
	display: flex;
	align-items: center;
}

/* 搜尋列：圖示放在輸入框裡，送出按鈕接在右邊（手機版隱藏，用鍵盤的搜尋鍵送出） */
.ks-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.ks-search__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 20px;
	height: 20px;
	color: var(--ks-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.ks-search__form input[type="search"] {
	flex: 1;
	min-width: 0;
	height: var(--ks-control-h);
	padding: 0 16px 0 48px;
	border: var(--ks-bw) solid var(--ks-line);
	background: var(--ks-bg);
	color: var(--ks-text);
	font: inherit;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ks-search__form input[type="search"]:focus {
	border-color: var(--ks-text);
}

.ks-search__form input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

.ks-search__submit {
	flex: none;
	height: var(--ks-control-h);
	padding: 0 28px;
}

@media (hover: hover) {
	.ks-search-menu:hover .ks-search {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s, transform 0.2s;
	}
}

.ks-search-menu.is-open .ks-search,
.ks-search:focus-within {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.2s, transform 0.2s;
}

/* 從圖示移到面板的途中不要斷掉：圖示的點擊範圍往下延伸到 header 底部 */
.ks-header .ks-search-toggle::after {
	bottom: -30px;
}

/* 熱門分類與推廣圖卡 */

.ks-search__suggest {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 48px;
	margin-top: 40px;
}

.ks-search__popular ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ks-search__popular a {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
}

.ks-search__popular a:hover {
	border-color: var(--ks-text);
}

.ks-search__promos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* 推廣圖卡的上一張／下一張：只有手機版用得到 */
.ks-search__promo-nav {
	display: none;
	gap: 8px;
	margin-top: 16px;
}

.ks-round-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 100%;
	background: var(--ks-surface);
	color: var(--ks-text);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, opacity 0.15s;
}

.ks-round-button:not(:disabled):hover {
	background: var(--ks-text);
	color: var(--ks-bg);
}

.ks-round-button:disabled {
	cursor: default;
	opacity: 0.35;
}

.ks-search__promos .ks-promo {
	flex: none;
	aspect-ratio: 4 / 3;
}

/* 即時搜尋結果 */

.ks-search__results {
	margin-top: 32px;
}

.ks-search__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-search__list a {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px;
	border-radius: var(--ks-radius);
}

.ks-search__list a:hover {
	background: var(--ks-surface);
}

.ks-search__thumb {
	flex: none;
	width: 64px;
	/* 跟商品圖一樣 1:1 */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--ks-radius);
	background: var(--ks-surface);
}

.ks-search__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ks-search__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ks-search__name {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 600;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ks-search__price {
	color: var(--ks-muted);
	font-size: 0.9375rem;
}

.ks-search__price del {
	margin-right: 6px;
	opacity: 0.6;
}

.ks-search__price ins {
	text-decoration: none;
}

.ks-search__empty {
	margin: 0;
	color: var(--ks-muted);
}

.ks-search__all {
	display: inline-flex;
	margin-top: 24px;
	font-weight: 600;
}

@media (max-width: 767px) {
	.ks-search__suggest {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* 手機版：推廣圖卡橫向排成一列，一次一張，可滑動或用按鈕切換 */
	/* 左右都延伸到畫面邊緣，停在第一張、最後一張時才跟留白對齊；下一張露出一點，看得出可以滑 */
	.ks-search__promos {
		display: flex;
		gap: 12px;
		margin: 0 calc(-1 * var(--ks-gutter));
		padding: 0 var(--ks-gutter);
		scroll-padding-inline: var(--ks-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ks-search__promos::-webkit-scrollbar {
		display: none;
	}

	.ks-search__promos .ks-promo {
		flex: 0 0 88%;
		aspect-ratio: 16 / 9;
		scroll-snap-align: start;
		/* 一次滑動只前進一張，不會甩過好幾張 */
		scroll-snap-stop: always;
	}

	.ks-search__promo-nav {
		display: flex;
	}

	.ks-search__promos .ks-promo__body {
		padding: 20px;
	}

	.ks-search__promos .ks-promo__title {
		font-size: 1.375rem;
	}

	.ks-search__submit {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ks-nav__link::after,
	.ks-small-menu a::after,
	.ks-header__actions .ks-icon-button::before,
	.ks-search,
	.ks-header,
	.ks-mega,
	.ks-promo__image {
		transition: none;
	}

	.ks-sheet[open] {
		animation: none;
	}
}

/* 1100px 以下改用手機選單 */
@media (max-width: 1099px) {
	.ks-nav,
	.ks-small-menu {
		display: none;
	}

	.ks-menu-toggle {
		display: inline-flex;
	}

	.ks-header__inner {
		gap: 18px;
		min-height: 64px;
	}

	.ks-brand {
		flex: 1;
	}
}

@media (max-width: 480px) {
	.ks-header .ks-account-link,
	.ks-header .ks-account-menu {
		display: none;
	}
}

/* 會員選單：電腦版滑過會員圖示時，在圖示下方展開（手機版直接進會員中心） */
.ks-account-menu {
	position: relative;
	display: flex;
}

.ks-account-dropdown {
	display: none;
}

@media (min-width: 1100px) and (hover: hover) {
	.ks-account-dropdown {
		position: absolute;
		/* header 下框線再往下 10px 的直角面板 */
		top: calc(50% + var(--ks-header-height) / 2 + var(--ks-bw) + 10px);
		right: -16px;
		z-index: 60;
		display: grid;
		gap: 6px;
		width: 340px;
		padding: 24px;
		border: var(--ks-bw) solid var(--ks-line);
		border-radius: 0;
		background: var(--ks-panel);
		color: var(--ks-text);
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
	}

	/* 圖示與面板之間的空隙也算在滑過範圍內，滑鼠移過去時面板不會關起來 */
	.ks-account-dropdown::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: calc(var(--ks-header-height) / 2 + 12px);
	}

	.ks-account-menu:hover .ks-account-dropdown,
	.ks-account-menu:focus-within .ks-account-dropdown {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.ks-account-menu.is-closed .ks-account-dropdown {
		visibility: hidden;
		opacity: 0;
	}

	.ks-account-menu:hover .ks-account-link::before,
	.ks-account-menu:focus-within .ks-account-link::before {
		transform: scaleX(1);
	}
}

.ks-account-dropdown__close {
	position: absolute;
	top: 16px;
	right: 16px;
}

.ks-account-dropdown__hi {
	margin: 0;
	padding-right: 48px;
	font-size: 1.375rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ks-account-dropdown__email {
	margin: 0 0 12px;
	color: var(--ks-muted);
	overflow-wrap: anywhere;
}

.ks-account-dropdown__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.ks-account-dropdown__links a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--ks-control-h);
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s;
}

.ks-account-dropdown__links a:hover {
	border-color: var(--ks-text);
}

/* 登出：標題色底，全寬 */
.ks-account-dropdown .ks-account-dropdown__logout {
	gap: 8px;
	margin-top: 8px;
	background: var(--ks-text);
	color: var(--ks-bg);
}

.ks-account-dropdown .ks-account-dropdown__logout:hover {
	background: var(--ks-text);
	color: var(--ks-bg);
	opacity: 0.85;
}

/* 深色模式按鈕：顯示「按下去會變成」的圖示 */
.ks-scheme-toggle__sun {
	display: none;
}

.ks-scheme-toggle[aria-pressed="true"] .ks-scheme-toggle__sun {
	display: block;
}

.ks-scheme-toggle[aria-pressed="true"] .ks-scheme-toggle__moon {
	display: none;
}

/* 徽章：購物車數量、篩選數量、特價標籤共用 */
.ks-badge,
.ks-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--ks-text);
	color: var(--ks-bg);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0.02em;
}

.ks-cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	/* 疊在圖示上時跟底色之間留一圈空隙，看起來才不會黏在一起 */
	outline: 2px solid var(--ks-bg);
}

.ks-cart-count[data-count="0"] {
	display: none;
}

/* 共用文字樣式 */

.ks-eyebrow {
	margin: 0;
	color: var(--ks-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ks-eyebrow a {
	text-decoration: none;
}

/* 收藏清單頁的空狀態 */
.ks-wishlist__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 360px;
	margin: 48px auto 80px;
	text-align: center;
}

.ks-wishlist__empty-title {
	margin: 0;
	font-size: 1.5rem;
}

.ks-wishlist__empty p {
	margin: 0 0 16px;
	color: var(--ks-muted);
}

.ks-wishlist__empty .ks-btn {
	width: 100%;
}

/* 頁面開頭：麵包屑與標題同一個區塊 */
.ks-page-head {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 40px;
	padding-top: 40px;
}

.ks-page-head .ks-breadcrumb {
	padding: 0;
}

.ks-page-head .ks-page-title {
	margin: 0;
}

.ks-page-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

/* 有圖片的標題組（品牌頁）：電腦版圖片在左、跟右邊文字等高；手機版不顯示圖片 */
.ks-page-head--media .ks-page-head__body {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ks-page-head__media {
	display: none;
}

@media (min-width: 990px) {
	.ks-page-head--media {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: stretch;
		gap: clamp(32px, 4vw, 64px);
	}

	.ks-page-head--media .ks-page-head__body {
		justify-content: center;
		padding: 8px 0;
	}

	.ks-page-head__media {
		position: relative;
		display: block;
		min-height: 320px;
		overflow: hidden;
		border-radius: var(--ks-radius);
		background: var(--ks-surface);
	}

	.ks-page-head__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* 標題下方的說明（分類、品牌頁） */
.ks-page-head__desc {
	max-width: 720px;
	color: var(--ks-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.ks-page-head__desc :where(p, .term-description, .page-description) {
	margin: 0;
}

.ks-page-head__desc p + p {
	margin-top: 0.75em;
}

/* 說明超過一段：只露出第一段＋下一段的開頭（淡出、微模糊），按「閱讀更多」展開 */
.ks-page-head__desc.is-collapsed .ks-readmore__body {
	position: relative;
	max-height: var(--ks-readmore-h, 5.1em);
	overflow: hidden;
}

.ks-page-head__desc.is-collapsed .ks-readmore__body::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1.3em;
	background: linear-gradient(to bottom, transparent, var(--ks-bg));
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%);
	mask-image: linear-gradient(to bottom, transparent, #000 60%);
	pointer-events: none;
}

.ks-readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ks-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ks-readmore__toggle svg {
	transition: transform 0.2s;
}

.ks-readmore__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.ks-readmore__toggle:hover {
	opacity: 0.7;
}

/* 文字連結加右箭頭（例如「繼續購物」） */
.ks-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.ks-link-arrow svg {
	transition: transform 0.2s;
}

.ks-link-arrow:hover svg {
	transform: translateX(3px);
}

/* 開頭已經有麵包屑區塊，內容區不再加上方留白 */
.ks-main > .ks-content:has(.ks-page-head) {
	padding-top: 0;
}

@media (max-width: 768px) {
	.ks-page-head .ks-page-title {
		font-size: 2.5rem;
	}
}

@media (min-width: 769px) {
	.ks-page-head {
		gap: 15px;
		margin-bottom: 48px;
		padding-top: 48px;
		padding-bottom: 5px;
	}
}

.ks-page-title {
	margin: 0 0 32px;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.02em;
}

/* Footer */


/* 變體色票與按鈕（KaiyiShop Theme for WooCommerce 外掛）跟著主題配色 */

body .ks-swatches {
	--ks-size: 2.25rem;
	--ks-gap: 14px;
	--ks-tooltip-bg: var(--ks-text);
	--ks-tooltip-color: var(--ks-bg);
	--ks-ring: var(--ks-text);
	--ks-border: var(--ks-line);
	--ks-border-width: var(--ks-bw);
}

/* 電腦版商品頁的顏色色票再大一點 */
@media (min-width: 769px) {
	body .ks-swatches--swatch {
		--ks-size: 2.75rem;
	}
}

body .ks-swatches--button {
	--ks-size: 42px;
	--ks-button-radius: var(--ks-radius);
}

/* 屬性按鈕：上下緊一點、左右寬一點 */
body .ks-swatches .ks-swatch--text,
body .ks-swatches .ks-swatch--text:hover,
body .ks-swatches .ks-swatch--text:focus {
	padding: 0 18px;
}

/* 按鈕選到時變成實心（標題色底、背景色字） */
body .ks-swatches .ks-swatch--text.is-selected,
body .ks-swatches .ks-swatch--text.is-selected:hover,
body .ks-swatches .ks-swatch--text.is-selected:focus {
	border-color: var(--ks-text);
	background: var(--ks-text);
	color: var(--ks-bg);
	outline: 0;
}

/* 顏色色票：外層一圈框線，框線跟色塊之間留一點空隙；選到時框線變標題色 */
body .ks-swatches--swatch .ks-swatch:not(.ks-swatch--text),
body .ks-swatches--swatch .ks-swatch:not(.ks-swatch--text):hover,
body .ks-swatches--swatch .ks-swatch:not(.ks-swatch--text):focus {
	padding: 3px;
	border: var(--ks-bw) solid var(--ks-line);
	background-clip: content-box;
	background-origin: content-box;
	outline: 0;
}

body .ks-swatches--swatch .ks-swatch:not(.ks-swatch--text):hover {
	border-color: var(--ks-muted);
}

body .ks-swatches--swatch .ks-swatch:not(.ks-swatch--text).is-selected {
	border-color: var(--ks-text);
	outline: 0;
}

body .ks-swatches--swatch .ks-swatch:not(.ks-swatch--text):focus-visible {
	outline: var(--ks-bw) solid var(--ks-text);
	outline-offset: 2px;
}

/* 缺貨：從左下到右上一條斜線劃過整顆按鈕（取代外掛的刪除線） */
body .ks-swatches .ks-swatch--text.is-disabled {
	overflow: hidden;
	text-decoration: none;
}

body .ks-swatches .ks-swatch--text.is-disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px));
	pointer-events: none;
}

/* 全站不用陰影：選取框、聚焦框都改用 outline 或邊框。 */
*,
*::before,
*::after {
	box-shadow: none !important;
	text-shadow: none !important;
}

/* 提示框：色票等只看得到顏色的元素，滑過或聚焦時顯示名稱 */
[data-ks-tooltip] {
	position: relative;
}

[data-ks-tooltip]::before {
	content: attr(data-ks-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 5;
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--ks-text);
	color: var(--ks-bg);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity 0.15s, transform 0.15s;
}

[data-ks-tooltip]:hover::before,
[data-ks-tooltip]:focus-visible::before,
[data-ks-tooltip]:focus-within::before {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* 手機版商品頁不顯示麵包屑，圖片直接接在 header 下面 */
@media (max-width: 768px) {
	.single-product .ks-breadcrumb {
		display: none;
	}
}

/* 次要按鈕（灰底） */
.ks-btn--secondary {
	background: var(--ks-btn-2);
	color: var(--ks-text);
}

.ks-btn--secondary:hover {
	background: var(--ks-btn-2-hover);
	color: var(--ks-text);
}

/* 手機選單：從 header 下方展開蓋住整個畫面，header 保持可用（漢堡鈕變關閉鈕），下方是深淺色切換與登入 */
.ks-mobile-nav.ks-sheet {
	position: fixed;
	z-index: 99;
	width: 100vw;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ks-mobile-nav .ks-mobile-menu {
	flex: 1;
}

/* 抽屜、選單、彈窗打開時鎖住頁面捲動。
   只鎖 html：body 也設 overflow 的話會變成捲動容器，sticky 的 header 會跑回頁面最上方而看不到 */
.ks-menu-open,
.ks-drawer-open,
html:has(dialog:modal) {
	overflow: hidden;
}

.ks-menu-open .ks-header {
	border-bottom-color: var(--ks-line);
	transform: none;
}

.ks-menu-toggle__close,
.ks-menu-toggle[aria-expanded="true"] .ks-menu-toggle__open {
	display: none;
}

.ks-menu-toggle[aria-expanded="true"] .ks-menu-toggle__close {
	display: block;
}

.ks-mobile-nav .ks-mobile-menu {
	padding: 16px var(--ks-gutter);
}

.ks-mobile-nav .ks-mobile-menu > .ks-mobile-menu__list > li {
	border-bottom: 0;
}

/* 子選單不內縮，跟第一層對齊左邊，層級靠字級與顏色區分 */
.ks-mobile-nav .ks-mobile-menu__list .ks-mobile-menu__list {
	padding-left: 0;
}

.ks-mobile-nav .ks-mobile-menu a,
.ks-mobile-nav .ks-mobile-menu summary {
	padding: 12px 0;
	font-size: 1.375rem;
}

.ks-mobile-nav .ks-mobile-menu summary svg {
	flex: none;
	width: 24px;
	height: 24px;
}

.ks-mobile-nav .ks-mobile-menu details[open] > summary svg {
	transform: rotate(180deg);
}

.ks-mobile-nav .ks-mobile-menu .ks-mobile-menu__list .ks-mobile-menu__list a,
.ks-mobile-nav .ks-mobile-menu__all {
	padding: 8px 0;
	font-size: 1.0625rem;
}

.ks-mobile-nav__foot {
	display: grid;
	gap: 12px;
	padding: 16px var(--ks-gutter) 24px;
	border-top: var(--ks-bw) solid var(--ks-line);
}

.ks-mobile-nav__foot .ks-btn {
	gap: 10px;
}

.ks-mobile-nav__foot .ks-btn svg {
	width: 20px;
	height: 20px;
}


/* 帶文字的深淺色切換：文字說明按下去會切到哪個模式 */
.ks-scheme-toggle--labeled {
	justify-content: flex-start;
	gap: 10px;
	width: auto;
	height: var(--ks-control-h);
	font: inherit;
}

.ks-scheme-toggle--labeled svg {
	width: 22px;
	height: 22px;
}

.ks-scheme-toggle__label--light,
.ks-scheme-toggle[aria-pressed="true"] .ks-scheme-toggle__label--dark {
	display: none;
}

.ks-scheme-toggle[aria-pressed="true"] .ks-scheme-toggle__label--light {
	display: inline;
}

/* 彈出視窗（登入、分享共用）：電腦版置中，手機版從底部滑上來 */

.ks-modal {
	width: min(440px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 28px;
	border: 0;
	border-radius: var(--ks-radius);
	background: var(--ks-panel);
	color: var(--ks-text);
}

.ks-modal::backdrop {
	background: var(--ks-overlay);
}

.ks-modal[open] {
	animation: ks-modal-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes ks-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/* 手機版：改成從底部滑上來的抽屜 */
@media (max-width: 749px) {
	.ks-modal {
		inset: auto 0 0;
		width: 100vw;
		max-width: none;
		max-height: calc(100dvh - 48px);
		margin: 0;
		padding: 32px var(--ks-gutter) calc(24px + env(safe-area-inset-bottom));
		border-radius: var(--ks-radius) var(--ks-radius) 0 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* 頂端的拖曳把手（dock）：所有底部抽屜都有，往下拖可以關閉（見 theme.js） */
	.ks-modal::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 999px;
		background: var(--ks-line);
	}

	.ks-modal.is-dragging {
		transition: none;
	}

	.ks-modal.is-releasing {
		transition: transform 0.2s ease;
	}

	.ks-modal[open] {
		animation: ks-modal-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
}

@keyframes ks-modal-up {
	from {
		transform: translateY(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ks-modal[open] {
		animation: none;
	}
}

.ks-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.ks-modal__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 500;
}

/* 找不到頁面 */

.ks-404 {
	padding-bottom: 96px;
}

.ks-404__text {
	max-width: 640px;
	margin: 0 0 28px;
	color: var(--ks-muted);
}

.ks-404__search {
	display: flex;
	gap: 8px;
}

.ks-404__search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: var(--ks-control-h);
	padding: 0 16px;
	border: var(--ks-bw) solid var(--ks-line);
	background: var(--ks-bg);
	color: var(--ks-text);
	font: inherit;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ks-404__search input[type="search"]:focus {
	border-color: var(--ks-text);
}

.ks-404__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 28px;
}

.ks-404__label {
	color: var(--ks-muted);
	font-size: 0.9375rem;
}

.ks-404__popular ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-404__popular a {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: var(--ks-radius);
	transition: border-color 0.15s;
}

.ks-404__popular a:hover {
	border-color: var(--ks-text);
}

/* 手風琴（<details>）的箭頭：全站統一 24px */
details > summary > svg,
details > summary .ks-accordion-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* 首頁第一個區塊是輪播時，header（不含公告列）透明疊在輪播上，白字；
   滑過、展開選單或往下捲之後恢復一般樣式。 */
.ks-header-overlay .ks-header {
	/* 往下疊的距離＝header 實際高度（theme.js 量好寫進 --ks-header-offset；手機版 header 比電腦版矮） */
	margin-bottom: calc(-1 * var(--ks-header-offset, calc(var(--ks-header-height) + var(--ks-bw))));
	transition: transform 0.3s, background-color 0.25s, border-color 0.25s, color 0.25s;
}

.ks-header-overlay .ks-header:not(:hover, :focus-within, .is-stuck, :has(.is-open)) {
	/* 透明時一樣有下框線，改成半透明白 */
	border-bottom-color: rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
}

.ks-header-overlay .ks-header:not(:hover, :focus-within, .is-stuck, :has(.is-open)) .ks-brand img {
	filter: brightness(0) invert(1);
}

/* 透明 header 上的購物車數量：白底黑字、不加外圈（淺色、深色模式都一樣） */
.ks-header-overlay .ks-header:not(:hover, :focus-within, .is-stuck, :has(.is-open)) .ks-cart-count {
	outline: 0;
	background: #fff;
	color: #151515;
}

.ks-menu-open .ks-header-overlay .ks-header {
	border-bottom-color: var(--ks-line);
	background: var(--ks-bg);
	color: var(--ks-text);
}

/* 幣別與語言切換：header 右側的小下拉選單（位置與樣式跟會員下拉面板一致）；手機版在選單底部，跟深色模式同一列靠右 */
.ks-switches {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ks-switch {
	position: relative;
	display: flex;
}

.ks-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 40px;
	padding: 0 2px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	/* 跟左邊的選單（關於我們、文章專欄）一樣大 */
	font-size: 1.125rem;
	white-space: nowrap;
	cursor: pointer;
}

.ks-switch__toggle svg {
	transition: transform 0.2s;
}

.ks-switch__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.ks-switch__menu {
	position: absolute;
	top: calc(50% + var(--ks-header-height) / 2 + var(--ks-bw) + 10px);
	right: -16px;
	z-index: 60;
	display: grid;
	gap: 2px;
	min-width: 180px;
	margin: 0;
	padding: 8px;
	border: var(--ks-bw) solid var(--ks-line);
	border-radius: 0;
	background: var(--ks-panel);
	color: var(--ks-text);
	list-style: none;
}

.ks-switch__menu button {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	background: none;
	color: var(--ks-muted);
	font: inherit;
	font-size: 1.125rem;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s, background-color 0.15s;
}

.ks-switch__menu button:hover,
.ks-switch__menu button[aria-pressed="true"] {
	background: var(--ks-surface);
	color: var(--ks-text);
}

/* Header：選單｜幣別與語言｜圖示群組之間各一條直線分隔（左右各留約 20px） */
.ks-header .ks-switches::before,
.ks-header .ks-switches::after {
	content: "";
	flex: none;
	width: var(--ks-bw);
	height: 20px;
	background: currentColor;
	opacity: 0.2;
}

.ks-header .ks-switches::before {
	margin-right: 4px;
	margin-left: -10px;
}

.ks-header .ks-switches::after {
	margin-left: 4px;
	margin-right: -2px;
}

@media (max-width: 1099px) {
	.ks-header .ks-switches {
		display: none;
	}
}

/* 手機選單底部：深色模式在左，幣別與語言在右，選單往上展開 */
.ks-mobile-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ks-mobile-nav__row .ks-switch__toggle {
	height: var(--ks-control-h);
	font-size: 1rem;
}

.ks-mobile-nav__row .ks-switch__menu {
	top: auto;
	right: 0;
	bottom: calc(100% + 8px);
}

/* 美金顯示時：提示實際以新台幣結帳 */
.ks-currency-note {
	margin: 8px 0 0;
	color: var(--ks-muted);
	font-size: 0.875rem;
}

.ks-currency-note .amount {
	color: var(--ks-text);
	font-weight: 600;
}

/* Lenis 平滑捲動需要的樣式（取自 lenis.css） */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

.lenis [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* 內容裡的項目符號清單：圓點對齊左側、稍大、用標題色 */
/* 內文清單的圓點：只給一般的清單（沒有 class 的 ul 或區塊編輯器的清單），商品列表、選單等元件的清單不套用 */
:where(.ks-accordion__content, .ks-entry__content, .ks-article__content, .ks-brand-info__text, .ks-faq__body, .ks-qa__body, .woocommerce-product-details__short-description, .ks-about__content) ul:where(:not([class]), .wp-block-list) {
	padding-left: 0;
	list-style: none;
}

:where(.ks-accordion__content, .ks-entry__content, .ks-article__content, .ks-brand-info__text, .ks-faq__body, .ks-qa__body, .woocommerce-product-details__short-description, .ks-about__content) ul:where(:not([class]), .wp-block-list) > li {
	position: relative;
	padding-left: 1.1em;
}

:where(.ks-accordion__content, .ks-entry__content, .ks-article__content, .ks-brand-info__text, .ks-faq__body, .ks-qa__body, .woocommerce-product-details__short-description, .ks-about__content) ul:where(:not([class]), .wp-block-list) > li::before {
	content: "";
	position: absolute;
	top: calc(0.5lh - 3.5px);
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ks-text);
}

/* 手風琴收起動畫期間 details 還是 open，箭頭先轉回來 */
details.is-closing > summary svg {
	transform: none !important;
}




/* 提示訊息（toast）：右下角 */
.ks-toasts {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100001;
	display: grid;
	justify-items: end;
	gap: 8px;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}

.ks-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: var(--ks-radius);
	background: var(--ks-text);
	color: var(--ks-bg);
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s, transform 0.25s;
}

.ks-toast.is-visible {
	opacity: 1;
	transform: none;
}

.ks-toast svg {
	flex: none;
}

/* 錯誤訊息：紅底 */
.ks-toast--error {
	background: var(--ks-danger, #b3261e);
	color: #fff;
}

@media (max-width: 767px) {
	.ks-toasts {
		right: 16px;
		bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ks-toast {
		transition: none;
	}
}

/* 分頁切換：新出現的內容淡入並稍微上移（首頁精選分頁、常見問題分類、登入／註冊…） */
[role="tabpanel"]:not([hidden]) {
	animation: ks-tab-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes ks-tab-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	[role="tabpanel"]:not([hidden]) {
		animation: none;
	}
}

/* 手機版 header 的 logo 小一點 */
@media (max-width: 767px) {
	.ks-header .ks-brand__name {
		font-size: 1.5rem;
	}

	.ks-header .ks-brand img {
		max-height: 34px;
	}
}

/* 主選單：簡單下拉（單欄清單），跟會員下拉一樣貼齊 header 下框線、直角 */
.ks-nav__item--dropdown {
	position: relative;
}

.ks-dropdown {
	position: absolute;
	top: 100%;
	left: -20px;
	z-index: 50;
	min-width: 220px;
	margin: 0;
	padding: 12px 0;
	border: var(--ks-bw) solid var(--ks-line);
	background: var(--ks-bg);
	list-style: none;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}

.ks-nav__item--dropdown:hover .ks-dropdown,
.ks-nav__item--dropdown:focus-within .ks-dropdown {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.2s, transform 0.2s;
}

.ks-dropdown a {
	display: block;
	padding: 8px 20px;
	color: var(--ks-text);
	text-decoration: none;
	white-space: nowrap;
}

.ks-dropdown a:hover {
	background: var(--ks-surface);
}

.ks-dropdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-dropdown ul a {
	padding-left: 32px;
	color: var(--ks-muted);
	font-size: 0.9375rem;
}

/* 大型選單：圖片卡片（分類、品牌） */
.ks-mega__cards {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-mega-card {
	display: grid;
	gap: 10px;
	color: var(--ks-text);
	text-decoration: none;
}

.ks-mega-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--ks-radius);
	background: var(--ks-surface);
}

.ks-mega-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.ks-mega-card:hover .ks-mega-card__media img {
	transform: scale(1.04);
}

.ks-mega-card__initial {
	font-size: 2rem;
	font-weight: 700;
}

.ks-mega-card__title {
	font-weight: 600;
}

/* 用滑鼠／觸控打開選單、抽屜時自動聚焦的元素不顯示焦點外框（見 theme.js） */
.ks-no-ring,
.ks-no-ring:focus,
.ks-no-ring:focus-visible {
	outline: none !important;
}

/* 訪客訂單查詢（彈出視窗；手機版是底部抽屜，樣式沿用 .ks-modal） */

@media (min-width: 750px) {
	.ks-lookup {
		width: min(520px, calc(100vw - 32px));
	}
}

.ks-lookup__intro {
	margin: 0 0 20px;
	color: var(--ks-muted);
	font-size: 0.9375rem;
}

.ks-lookup .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 16px;
}

.ks-lookup label {
	font-size: 0.875rem;
	font-weight: 600;
}

.ks-lookup .input-text {
	width: 100%;
	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;
}

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

.ks-lookup__error {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--ks-radius);
	border-left: 3px solid var(--ks-notice-error);
	background: var(--ks-surface);
	font-size: 0.875rem;
}

.ks-lookup__submit {
	width: 100%;
}

.ks-lookup__submit.loading {
	opacity: 0.7;
}

.ks-lookup__member {
	margin: 16px 0 0;
	color: var(--ks-muted);
	font-size: 0.875rem;
	text-align: center;
}

.ks-lookup__member a {
	color: var(--ks-text);
	font-weight: 600;
}

.ks-lookup__summary {
	padding: 18px 20px;
	border-radius: var(--ks-radius);
	background: var(--ks-surface);
}

.ks-lookup__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-weight: 700;
}

.ks-lookup__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ks-muted);
}

.ks-lookup__status--ok::before {
	background: #2f9e5b;
}

.ks-lookup__status--wait::before {
	background: #d98a1c;
}

.ks-lookup__status--bad::before {
	background: #d0443a;
}

.ks-lookup__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin: 0;
}

.ks-lookup__meta dt {
	color: var(--ks-muted);
	font-size: 0.8125rem;
}

.ks-lookup__meta dd {
	margin: 2px 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.ks-lookup__items {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ks-lookup__items li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: var(--ks-bw) solid var(--ks-line);
}

.ks-lookup__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--ks-radius);
	object-fit: cover;
}

.ks-lookup__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 0.875rem;
}

.ks-lookup__name {
	font-weight: 600;
}

.ks-lookup__variation,
.ks-lookup__qty {
	color: var(--ks-muted);
	font-size: 0.8125rem;
}

.ks-lookup__price {
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.ks-lookup__total {
	display: flex;
	justify-content: space-between;
	margin: 16px 0 0;
	font-size: 1.0625rem;
}

.ks-lookup__notes {
	margin-top: 24px;
}

.ks-lookup__notes h3 {
	margin: 0 0 12px;
	font-size: 1rem;
}

.ks-lookup__notes ol {
	margin: 0;
	padding: 0 0 0 16px;
	border-left: var(--ks-bw) solid var(--ks-line);
	list-style: none;
}

.ks-lookup__notes li + li {
	margin-top: 14px;
}

.ks-lookup__notes time {
	color: var(--ks-muted);
	font-size: 0.8125rem;
}

.ks-lookup__notes p {
	margin: 4px 0 0;
	font-size: 0.9375rem;
}

.ks-lookup__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 24px;
}

/* 主選單「更多」：header 放不下時收進來的項目（theme.js 判斷），平常隱藏 */
.ks-nav .is-overflow,
.ks-small-menu .is-overflow {
	display: none !important;
}

.ks-nav__more-toggle {
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
	cursor: pointer;
}

.ks-nav__more-toggle svg {
	transition: transform 0.2s;
}

.ks-nav__more:hover .ks-nav__more-toggle svg,
.ks-nav__more:focus-within .ks-nav__more-toggle svg {
	transform: rotate(180deg);
}

.ks-nav__more-list > li {
	position: relative;
}

.ks-nav__more-list > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* 第三層：往右展開 */
.ks-nav__item--dropdown.ks-nav__more:hover .ks-dropdown--flyout,
.ks-nav__item--dropdown.ks-nav__more:focus-within .ks-dropdown--flyout {
	visibility: hidden;
	opacity: 0;
}

.ks-dropdown.ks-dropdown--flyout {
	top: -13px;
	left: 100%;
	transform: translateX(-6px);
}

.ks-nav__more .ks-nav__more-list > li:hover > .ks-dropdown--flyout,
.ks-nav__more .ks-nav__more-list > li:focus-within > .ks-dropdown--flyout {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.2s, transform 0.2s;
}

.ks-dropdown .ks-dropdown--flyout a {
	padding-left: 20px;
	color: var(--ks-text);
	font-size: inherit;
}

.ks-dropdown .ks-dropdown--flyout ul a {
	padding-left: 32px;
	color: var(--ks-muted);
	font-size: 0.9375rem;
}

/* ---------- 區塊大型選單（外觀 → 大型選單，inc/mega-menu.php） ---------- */

.ks-mega-content {
	display: block;
}

.ks-mega-content > .wp-block-columns,
.ks-mega-content .ks-mega-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	align-items: stretch;
	gap: clamp(32px, 4vw, 64px);
	margin: 0;
}

.ks-mega-content .wp-block-column {
	min-width: 0;
	margin: 0;
}

/* 左欄：主要內容在上，橫排連結貼底 */
.ks-mega-content .ks-mega-layout__main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

.ks-mega-content :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-mega-content a {
	color: inherit;
	text-decoration: none;
}

/* 分類分頁：左邊大字分類（沒選到的淡色），右邊是目前分類的連結 */
.ks-mega-tabs {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: start;
}

.ks-mega-tabs__list {
	display: grid;
	gap: 8px;
}

.ks-mega-tabs__tab {
	display: block;
	color: var(--ks-muted);
	font-size: clamp(1.75rem, 2.4vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	opacity: 0.55;
	cursor: pointer;
	transition: color 0.2s, opacity 0.2s;
}

.ks-mega-tabs__tab[aria-current="true"],
.ks-mega-tabs__tab:hover,
.ks-mega-tabs__tab:focus-visible {
	color: var(--ks-text);
	opacity: 1;
}

.ks-mega-tabs__panel {
	padding-top: 8px;
	animation: ks-tab-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ks-mega-content .ks-mega-tabs .ks-mega-tabs__panel li + li {
	margin-top: 14px;
}

.ks-mega-content .ks-mega-tabs .ks-mega-tabs__panel li a,
.ks-mega-tabs__panel a {
	color: var(--ks-text);
	font-size: 1.25rem;
	font-weight: 500;
}

.ks-mega-content .ks-mega-tabs .ks-mega-tabs__panel li a:hover {
	color: var(--ks-text);
	opacity: 0.6;
}

/* 欄位：欄位標題是小標題，下面淡色連結 */
.ks-mega-content .ks-mega-columns,
.ks-mega-content .wp-block-columns .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 24px 32px;
}

.ks-mega-content :is(h2, h3, h4) {
	margin: 0 0 18px;
	font-size: 1.0625rem;
	font-weight: 600;
}

.ks-mega-content .wp-block-column li + li {
	margin-top: 12px;
}

.ks-mega-content .wp-block-column li a {
	color: var(--ks-muted);
	font-size: 1.0625rem;
}

.ks-mega-content .wp-block-column li a:hover {
	color: var(--ks-text);
}

/* 清單的「橫排連結」樣式：左欄底部的連結列 */
.ks-mega-content .is-style-ks-inline,
.is-style-ks-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-mega-content .is-style-ks-inline li + li {
	margin-top: 0;
}

.ks-mega-content .is-style-ks-inline a {
	color: var(--ks-text);
	font-size: 1rem;
	font-weight: 500;
}

.ks-mega-content .is-style-ks-inline a:hover {
	opacity: 0.6;
}

/* 推廣圖卡：圖片滿版、左上小標與標題 */
.ks-mega-promo {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: 320px;
	height: 100%;
	overflow: hidden;
	border-radius: var(--ks-radius);
	background: var(--ks-surface);
	color: #fff;
	text-decoration: none;
}

.ks-mega-promo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, var(--ks-overlay, 0.25));
	pointer-events: none;
}

.ks-mega-promo--empty {
	color: var(--ks-text);
}

.ks-mega-promo--empty::before {
	display: none;
}

.ks-mega-promo__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

a.ks-mega-promo:hover .ks-mega-promo__image {
	transform: scale(1.03);
}

.ks-mega-promo__body {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 8px;
	padding: clamp(24px, 2.4vw, 40px);
}

.ks-mega-promo__eyebrow {
	font-size: 0.9375rem;
	font-weight: 500;
	opacity: 0.85;
}

.ks-mega-promo__title {
	font-size: clamp(1.75rem, 2.6vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* ---------- 一般下拉選單（電腦版） ---------- */

.ks-nav__item--dropdown > .ks-dropdown {
	min-width: 240px;
	margin-top: 12px;
	padding: 10px;
}

/* 下拉往下移一點；中間的空隙用透明區塊接起來，滑鼠移過去時選單不會關掉 */
.ks-nav__item--dropdown > .ks-dropdown::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 14px;
}

.ks-dropdown > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 14px;
	border-radius: calc(var(--ks-radius) - 2px);
	font-size: 1rem;
	font-weight: 500;
	transition: background-color 0.15s, padding-left 0.2s;
}

.ks-dropdown > li > a:hover,
.ks-dropdown > li > a:focus-visible {
	padding-left: 18px;
	background: var(--ks-surface);
}

.ks-dropdown > li > a[aria-current] {
	font-weight: 700;
}

/* 第三層：在第二層下方縮排、淡色小字，左邊一條細線 */
.ks-dropdown > li > ul:not(.ks-dropdown) {
	margin: 2px 0 8px 14px;
	padding-left: 12px;
	border-left: var(--ks-bw) solid var(--ks-line);
}

.ks-dropdown > li > ul:not(.ks-dropdown) a {
	padding: 6px 10px;
	border-radius: calc(var(--ks-radius) - 2px);
}

.ks-dropdown > li > ul:not(.ks-dropdown) a:hover {
	background: var(--ks-surface);
	color: var(--ks-text);
}

.ks-dropdown > li + li {
	margin-top: 2px;
}

.ks-dropdown.ks-dropdown--flyout {
	min-width: 220px;
	padding: 10px;
}

/* 商品頁麵包屑：分類層級收在「…」後面，點了展開 */
.ks-breadcrumb__collapsed:not([hidden]) {
	display: contents;
}

.ks-breadcrumb__more {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
}

.ks-breadcrumb__more:hover {
	color: var(--ks-text);
}

/* 搜尋框的清除鈕：換掉瀏覽器預設的藍色 ✕，改用主題的線條關閉圖示（標題色） */
input[type="search"]::-webkit-search-cancel-button {
	width: 18px;
	height: 18px;
	margin: 0 0 0 8px;
	background: var(--ks-text);
	cursor: pointer;
	opacity: 0.7;
	-webkit-appearance: none;
	appearance: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6 18M6 6L18 18' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6 18M6 6L18 18' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

input[type="search"]::-webkit-search-cancel-button:hover {
	opacity: 1;
}