/**
 * CEREAL Wishlist — Zara 式黑白極簡；字體/排版全部繼承站上 theme。
 * 動畫原則：只動 transform/opacity；150-250ms；custom ease-out；不彈跳；exit 快於 enter。
 */

:root {
	--cw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--cw-ink: #181818;
}

/* ---------- 共用 ---------- */

.cw-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- 書籤按鈕（線框→實心） ---------- */

.cw-bookmark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: transform 150ms var(--cw-ease-out);
}
/* theme 全域 button:hover{background:#3e3e3e;color:#fff} 會把 icon button 變成大色塊——全狀態強制透明 */
.cw-bookmark,
.cw-bookmark:hover,
.cw-bookmark:focus,
.cw-bookmark:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--cw-ink) !important;
}
.cw-bookmark:active {
	transform: scale(0.97);
}
.cw-bookmark:focus-visible {
	outline: 2px solid var(--cw-ink);
	outline-offset: 2px;
}
.cw-bookmark .cw-icon {
	display: block;
}
.cw-bookmark .cw-icon-path {
	transition: fill-opacity 150ms var(--cw-ease-out);
	fill: currentColor;
	fill-opacity: 0;
}
.cw-bookmark.is-saved .cw-icon-path {
	fill-opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.cw-bookmark .cw-icon {
		transition: opacity 150ms var(--cw-ease-out);
	}
	.cw-bookmark:hover .cw-icon {
		opacity: 0.65;
	}
}

/* PDP 商品資訊區書籤：標題行右端（Zara 式）。
   summary 由 theme 控制，這裡用 absolute 靠右、與標題第一行對齊。 */
.summary.entry-summary {
	position: relative;
}
.cw-bookmark--pdp {
	position: absolute;
	top: -4px; /* 對齊 h1 第一行的視覺中心（實測 h1 y=187/18px、btn 44px） */
	right: 0;
	z-index: 2;
}

/* mobile（<=1024px，跟站上 header icons 同 breakpoint）：
   summary 內書籤隱藏，header clone 顯示。 */
.cw-bookmark--header {
	display: none;
}
@media (max-width: 1024px) {
	.cw-bookmark--pdp {
		display: none;
	}
	/* .right-column 是 table-cell（ALD mu-plugin 已設 relative）；不改 display/width，absolute 定位（三陷阱）。
	   search right:38、bag right:4 → 書籤在 search 左側；
	   right:55 讓 icon 落在置中 logo 右緣（~260px）與 search 左緣（~305px）的間隙。 */
	.cw-bookmark--header {
		display: inline-flex;
		position: absolute !important;
		right: 55px !important;
		top: 50% !important;
		transform: translateY(-50%);
		z-index: 3;
	}
	.cw-bookmark--header:active {
		transform: translateY(-50%) scale(0.97);
	}
	.cw-bookmark--header .cw-icon {
		width: 19px;  /* 對齊 ALD 細線 icon 尺度（search 17×19、bag 18×21） */
		height: 19px;
	}
}

/* ---------- cart / FAVOURITES 導覽 ---------- */

.cw-shop-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0 0 28px;
}
/* mobile：fixed header(55px) 下的 jose956 分類列（~45px）沒被一般 page 的 offset 計入，
   會蓋住 content 頂部 —— 對本 nav 補償下推。
   44px 是 7/16 七輪迭代定案值；7/18 曾誤升 72px（結帳頁貼死的真因是 CSS 沒載，
   不是 44 不夠），Jose 反饋書籤頁留白變多後改回。 */
@media (max-width: 1024px) {
	.cw-shop-nav {
		margin-top: 44px;
	}
}
.cw-shop-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--cw-ink);
	text-decoration: none;
	letter-spacing: 0.04em;
	font-size: 14px;
}
.cw-shop-nav__item.is-active {
	font-weight: 700;
}
.cw-shop-nav__item .cw-icon {
	width: 16px;
	height: 16px;
}
.cw-shop-nav__count {
	font-variant-numeric: tabular-nums;
}

/* ---------- 收藏頁 ---------- */

.cw-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 12px;
	margin: 0 !important;   /* theme 對 entry-content ul 有 margin/padding-left:40px */
	padding: 0 !important;
	list-style: none;
}
@media (min-width: 768px) {
	.cw-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px 16px;
	}
}
@media (min-width: 1200px) {
	.cw-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cw-card {
	margin: 0;
	transition: opacity 200ms var(--cw-ease-out);
}
/* Basel 對 entry-content 的 ul li 用 ::before(basel-font) 畫箭頭 bullet —— 移除 */
.cw-grid .cw-card::before {
	content: none !important;
}
.cw-card.is-removing {
	opacity: 0.25;
	pointer-events: none;
}

.cw-card__media {
	display: block;
	line-height: 0;
}
.cw-card__img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.cw-card__body {
	padding-top: 10px;
}
.cw-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 4px;
}
.cw-card__title {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cw-ink);
	overflow-wrap: anywhere;
}
.cw-bookmark--card {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: -10px -12px 0 0; /* hit 44 不變，視覺貼右上 */
}
.cw-bookmark--card .cw-icon {
	width: 18px;
	height: 18px;
}
.cw-card__color {
	margin: 2px 0 0;
	font-size: 12px;
	color: #767676;
}
.cw-card__price {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--cw-ink);
}

/* Zara 實測：add 按鈕全寬 ×32px 高（視覺）；hit target 用偽元素補到 44px */
.cw-card__add {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 32px;
	margin-top: 10px;
	padding: 0 12px;
	border: 1px solid var(--cw-ink);
	background: transparent;
	color: var(--cw-ink);
	font-size: 12px;
	letter-spacing: 0.08em;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: transform 150ms var(--cw-ease-out), background-color 150ms var(--cw-ease-out), color 150ms var(--cw-ease-out);
}
.cw-card__add::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -6px;
	bottom: -6px;
}
.cw-card__add,
.cw-card__add:focus {
	background: transparent !important;
	border: 1px solid var(--cw-ink) !important;
	color: var(--cw-ink) !important;
	box-shadow: none !important;
}
.cw-card__add:active {
	transform: scale(0.98);
}
.cw-card__add:focus-visible {
	outline: 2px solid var(--cw-ink);
	outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
	.cw-card__add:hover {
		background: var(--cw-ink) !important;
		color: #fff !important;
		border-color: var(--cw-ink) !important;
	}
}

/* 卡片內的 sizes 容器只當內容庫（ADD 時搬進 bottom sheet），永遠隱藏 */
.cw-card__sizes {
	display: none;
}

/* ---------- 尺寸 bottom sheet（對標站上 PDP #cereal-size-sheet / Zara） ---------- */

#cw-size-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 99990;
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease;
}
body.cw-sheet-open #cw-size-backdrop {
	opacity: 1;
	pointer-events: auto;
}
#cw-size-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 99991;
	transform: translateY(105%);
	transition: transform 250ms ease;
	padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
	max-height: 70vh;
	overflow-y: auto;
	outline: none;
}
body.cw-sheet-open #cw-size-sheet {
	transform: translateY(0);
}
.cw-sheet-handle {
	height: 16px;
}
/* WC add-to-cart handler 可能插入的「查看購物車」link——sheet/卡片內一律不顯示 */
#cw-size-sheet .added_to_cart,
.cw-card .added_to_cart {
	display: none !important;
}
/* sheet 內尺寸列＝站上 sheet row（置中、16px 字、間距 16、無框線） */
#cw-size-sheet .cw-size,
#cw-size-sheet .cw-size:focus,
#cw-size-sheet .cw-size:active {
	border: 0 !important;
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 16px;
}
#cw-size-sheet .cw-size:first-child {
	margin-top: 4px;
}
#cw-size-sheet .cw-size:last-child {
	margin-bottom: 4px;
}

/* Zara 實測：尺寸列 40px 高（缺貨含 BIS 提示列自然增高） */
.cw-size {
	display: flex;
	width: 100%;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid #e5e5e5;
	background: transparent;
	color: var(--cw-ink);
	font-size: 13px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color 150ms var(--cw-ease-out);
}
.cw-size:first-child {
	border-top: 1px solid #e5e5e5;
	margin-top: 10px;
}
.cw-size,
.cw-size:focus,
.cw-size:active {
	background: transparent !important;
	color: var(--cw-ink) !important;
	box-shadow: none !important;
	border-width: 0 0 1px !important;
	border-style: solid !important;
	border-color: #e5e5e5 !important;
}
.cw-size:first-child {
	border-top-width: 1px !important;
}
.cw-size:focus-visible {
	outline: 2px solid var(--cw-ink);
	outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
	.cw-size:not(.cw-size--oos):hover {
		background: #f5f5f5 !important;
		color: var(--cw-ink) !important;
	}
}
.cw-size.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

/* 缺貨尺寸＝Zara 兩行式（圖 14）：尺寸置中灰、下行信封＋補貨通知（列高 ~62px） */
.cw-size--oos {
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
}
.cw-size--oos .cw-size__label {
	color: #9b9b9b;
}
.cw-size__bis {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--cw-ink);
}
.cw-size--oos.is-done .cw-size__bis {
	color: #767676;
}
.cw-sizes-empty {
	margin: 10px 0 0;
	font-size: 12px;
	color: #767676;
}

/* ---------- 訪客收藏頁：方案 A 一行細字登入提示（Jose 7/17 定案） ---------- */

.cw-guest-hint {
	margin: -12px 0 24px;
	font-size: 12.5px;
	color: #767676;
}
/* theme 全域 button:hover{background:#3e3e3e} 會把行內登入連結變色塊——全狀態顯式覆蓋 */
.cw-guest-hint__login,
.cw-guest-hint__login:hover,
.cw-guest-hint__login:focus,
.cw-guest-hint__login:active {
	display: inline;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cw-ink) !important;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
}
.cw-guest-hint__login:focus-visible {
	outline: 2px solid var(--cw-ink);
	outline-offset: 2px;
}

/* ---------- 空狀態 / 訪客 ---------- */

.cw-wishlist-empty {
	padding: 48px 0 64px;
	text-align: left;
}
.cw-wishlist-empty p {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--cw-ink);
}
.cw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 160px;
	padding: 10px 24px;
	border: 1px solid var(--cw-ink);
	background: transparent;
	color: var(--cw-ink);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms var(--cw-ease-out), color 150ms var(--cw-ease-out), transform 150ms var(--cw-ease-out);
}
.cw-btn,
.cw-btn:focus {
	background: transparent !important;
	border: 1px solid var(--cw-ink) !important;
	color: var(--cw-ink) !important;
	box-shadow: none !important;
}
.cw-btn:active {
	transform: scale(0.98);
}
@media (hover: hover) and (pointer: fine) {
	.cw-btn:hover {
		background: var(--cw-ink) !important;
		color: #fff !important;
		border-color: var(--cw-ink) !important;
	}
}
/* ---------- Toast：Zara 式全寬黑 bar（左訊息、右 action＋×） ---------- */

.cw-toast {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99995; /* 高於尺寸 sheet(99991) */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
	min-height: 48px;
	background: var(--cw-ink);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
	transition: opacity 180ms var(--cw-ease-out), transform 180ms var(--cw-ease-out);
}
.cw-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition-duration: 250ms;
}
.cw-toast__msg {
	min-width: 0;
	overflow-wrap: anywhere;
}
.cw-toast__actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}
.cw-toast__action,
.cw-toast__action:hover,
.cw-toast__action:focus,
.cw-toast__action:active {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	border: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
	box-shadow: none !important;
}
.cw-toast__close,
.cw-toast__close:hover,
.cw-toast__close:focus,
.cw-toast__close:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
}
.cw-toast__action:focus-visible,
.cw-toast__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------- reduced motion：去移動、留 opacity ---------- */

@media (prefers-reduced-motion: reduce) {
	.cw-bookmark,
	.cw-bookmark--header,
	.cw-card,
	.cw-card__add,
	.cw-btn,
	.cw-size {
		transition-property: opacity, background-color, color, fill-opacity;
	}
	.cw-bookmark:active,
	.cw-card__add:active,
	.cw-btn:active {
		transform: none;
	}
	.cw-bookmark--header:active {
		transform: translateY(-50%);
	}
	.cw-toast {
		transform: translateY(0);
		transition: opacity 200ms ease;
	}
	#cw-size-sheet {
		transition: none;
	}
	#cw-size-backdrop {
		transition: opacity 200ms ease;
	}
}