/* SP2s Glass — shared styles: tokens, glass material, header, footer, tab bar. */

:root {
	--text: #1d1d1f;
	--text-2: #515154;
	--text-3: #86868b;
	--blue: #0071e3;
	--pink: #e3245d;
	--glass: rgba(255, 255, 255, .52);
	--glass-strong: rgba(255, 255, 255, .74);
	--glass-solid: rgba(250, 251, 254, .94);
	--glass-edge: rgba(255, 255, 255, .85);
	--glass-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 50px rgba(30, 40, 80, .12);
	--blur: saturate(180%) blur(24px);
	--r-lg: 32px;
	--r-md: 24px;
	--wrap: 1120px;
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	color: var(--text);
	background: #eef1f7;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid rgba(0, 113, 227, .5); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	background: var(--text); color: #fff; padding: 10px 16px; border-radius: 12px;
}
.skip-link:focus { top: 16px; }

/* 背景光暈：用 radial-gradient 取代 filter: blur，手機上比較省效能 */
.backdrop {
	position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(36rem 36rem at 8% 2%, rgba(158, 201, 255, .85), transparent 70%),
		radial-gradient(32rem 32rem at 100% 22%, rgba(247, 181, 214, .75), transparent 70%),
		radial-gradient(34rem 34rem at 40% 105%, rgba(184, 240, 220, .8), transparent 70%),
		radial-gradient(24rem 24rem at 85% 68%, rgba(214, 196, 255, .7), transparent 70%),
		linear-gradient(180deg, #f5f7fb 0%, #eaeef6 100%);
}

/* 玻璃材質 */
.glass {
	background: var(--glass);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
	border: 1px solid var(--glass-edge);
	box-shadow: var(--glass-shadow);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.glass { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
	.glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 按鈕 */
.pill {
	height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent;
	display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;
	color: var(--text); cursor: pointer; white-space: nowrap;
}
.pill.ghost:hover { background: rgba(255, 255, 255, .6); }
.pill.solid { background: var(--text); color: #fff; }
.btn {
	height: 50px; padding: 0 26px; border-radius: 999px; display: inline-flex; align-items: center;
	font-size: 16px; font-weight: 600; transition: transform .2s;
}
.btn:hover { transform: scale(1.03); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(0, 113, 227, .3); }
.btn-glass { color: var(--blue); }
.cart-count {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700;
	display: inline-grid; place-items: center; background: rgba(255, 255, 255, .22);
}

/* 頁首：浮動玻璃膠囊 */
.nav-shell { position: sticky; top: 14px; z-index: 30; padding: 0 16px; }
.nav {
	position: relative; max-width: 980px; margin: 0 auto; height: 56px; border-radius: 999px;
	display: flex; align-items: center; gap: 28px; padding: 0 8px 0 24px;
}
.logo { font-weight: 800; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.logo small { font-weight: 700; font-size: 14px; margin-left: 4px; }
.logo-img { max-height: 32px; width: auto; }
.site-menu .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; font-size: 14px; color: var(--text-2); }
.site-menu a:hover, .site-menu .current-menu-item > a { color: var(--text); }
.nav-actions { display: flex; gap: 6px; }
/* 頁首搜尋框：佔滿選單與按鈕之間的空間，送出後到商店頁的搜尋結果 */
.site-menu { margin-right: auto; }
.nav-search {
	flex: 0 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
	border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
	transition: background .15s, box-shadow .15s, flex-basis .2s;
}
.nav-search:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); flex-basis: 300px; }
.nav-search .icon { flex: none; color: var(--text-3); }
.nav-search input[type="search"] {
	flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0; outline: none;
	font: inherit; font-size: 14px; color: var(--text);
}
.nav-search input[type="search"]::placeholder { color: var(--text-3); }
.account-icon { display: none; padding: 0 10px; }

/* 一般頁面與 WooCommerce 頁面的容器 */
.page-main { padding: 40px 0 96px; }
.page-card { border-radius: var(--r-lg); padding: clamp(24px, 4vw, 48px); }
.page-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 24px; }
.entry-content { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.75; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; letter-spacing: -.02em; }
.entry-content h1 span { font-size: inherit !important; }
.entry-content h2, .entry-content h3 { line-height: 1.3; margin-top: 1.6em; }
.entry-content a { color: var(--blue); }
.entry-content img { border-radius: 16px; }
.entry-content p:empty, .entry-content p:has(> br:only-child) { display: none; }
.ux-image { margin: 1em auto; }
.ux-image img { width: 100%; box-shadow: 0 10px 30px rgba(30, 40, 80, .1); }
/* WooCommerce 頁面（購物車、結帳、會員中心）不限制內文寬度 */
.woocommerce-page .entry-content { max-width: none; }

/* 頁尾 */
.site-footer { padding: 40px 0 60px; font-size: 13px; color: var(--text-3); }
.foot { border-radius: var(--r-lg); padding: 32px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.foot-title { color: var(--text); font-size: 13px; margin-bottom: 10px; }
.foot .menu { list-style: none; margin: 0; padding: 0; }
.foot .menu li { margin-bottom: 6px; }
.foot a:hover { color: var(--text); }
.legal { text-align: center; margin-top: 20px; }

/* 手機：浮動玻璃分頁列 */
.tabbar { display: none; }

/* 手機與平板：頁首只留 Logo、帳號、購物車；導覽改由底部分頁列與商店頁的分類標籤負責 */
@media (max-width: 900px) {
	.nav { gap: 8px; padding-left: 20px; }
	.site-menu, .nav-search { display: none; }
	.account-icon { display: inline-flex; }
	.logo { margin-right: auto; }
	.nav-actions { margin-left: 0; }
	.hide-sm { display: none; }
	.foot { grid-template-columns: 1fr 1fr; }
	.site-footer { padding-bottom: 120px; }
	.tabbar {
		display: flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 40;
		width: calc(100% - 32px); max-width: 480px; padding: 6px; gap: 4px; border-radius: 999px;
	}
	.tabbar a {
		flex: 1; height: 52px; border-radius: 999px; display: flex; flex-direction: column;
		align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--text-2);
	}
	.tabbar a.is-current { background: rgba(255, 255, 255, .9); color: var(--blue); }
	.tab-icon { position: relative; display: inline-flex; }
	.tab-icon .cart-count {
		position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; font-size: 11px;
		background: var(--pink); color: #fff;
	}
	.tab-icon .cart-count.is-empty { display: none; }
	/* 底部分頁列已有「客服」，隱藏 Chaty 的浮動 LINE 按鈕避免重疊 */
	.chaty, .chaty-widget { display: none !important; }
}

@media (max-width: 600px) {
	.wrap { padding: 0 16px; }
	.nav { padding-left: 16px; }
	.pill.solid { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}