/* perennial — header
   Sticky glass bar, 64px, no rule under it. Mobile: ☰ · wordmark · icons.
   From 768px the utilities drop their icons and read as text — only the bag
   stays a heart, at every width. */

.pn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg-page);
}

/* Liquid glass: the bar is paper you can see through, and what passes under it
   is blurred and warmed rather than hidden. Only ever applied where the browser
   can actually blur — otherwise the paper above stands, opaque. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pn-header {
		background: color-mix(in srgb, var(--bg-page) 72%, transparent);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
	}

	/* Asked for less see-through, the bar goes back to plain paper. */
	@media (prefers-reduced-transparency: reduce) {
		.pn-header {
			background: var(--bg-page);
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
		}
	}
}

.pn-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 64px;
	column-gap: var(--space-4);
}

/* ☰ — mobile only */
.pn-header__menu { justify-self: start; margin-left: calc(-1 * var(--space-2)); }

/* Wordmark: 350×100 PNG rendered at 119×34; scales down proportionally if the cell is narrower */
.pn-header__wordmark { display: block; justify-self: center; min-width: 0; max-width: 100%; }
.pn-header__wordmark .pn-wordmark { width: 119px; max-width: 100%; height: auto; }

/* Nav. The current page is carried by aria-current alone — no mark. */
.pn-nav { display: none; }
.pn-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	font-size: var(--text-small);
	color: var(--text-primary);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn-nav__link:hover { opacity: var(--hover-opacity); }

/* Utilities. Buttons and links share .pn-util; the resets here outrank any
   parent-theme `button` rule (.pn .pn-util = 0,2,0). */
.pn-utils {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0;
	margin-right: calc(-1 * var(--space-2));
}
.pn .pn-util {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-2);
	color: var(--text-primary);
	font-size: var(--text-small);
	line-height: 1;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn .pn-util:hover { opacity: var(--hover-opacity); }
.pn-util__label { display: none; }

/* Bag — cart and wishlist behind one heart. Outline while both are empty,
   filled the moment either has something in it. Mobile keeps the plan's
   search-and-account header; the cart lives in the menu sheet there. */
.pn .pn-util--bag { display: none; }
.pn-bag__icon { display: inline-flex; }
.pn-bag__icon.is-filled .pn-icon--heart {
	fill: currentColor;
	transition: fill var(--dur-base) var(--ease-out);
}

@media (min-width: 768px) {
	.pn-header__inner { grid-template-columns: auto auto 1fr; column-gap: var(--space-7); }
	.pn .pn-header__menu { display: none; }
	.pn-header__wordmark { justify-self: start; }
	.pn-nav { display: flex; gap: var(--space-6); }
	.pn-utils { gap: var(--space-1); }
	.pn .pn-util--bag { display: inline-flex; }

	/* Tablet up reads as words. Only the bag keeps a mark, because a heart says
	   in one glyph what two labels would. */
	.pn-util__label { display: inline; }
	.pn-util--search .pn-icon,
	.pn-util--account .pn-icon,
	.pn-util--lang .pn-icon { display: none; }
	.pn .pn-util--search,
	.pn .pn-util--account,
	.pn .pn-util--lang { padding: 0 var(--space-3); }
}

/* ── Sheets: the mobile menu, the off-canvas search and the bag ────────── */
.pn-sheet {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: flex;
	flex-direction: column;
	padding: 0 var(--pn-gutter) var(--space-7);
	background: var(--bg-page);
	color: var(--text-primary);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.pn-sheet[hidden] { display: none; }

/* Opening and closing. The sheet slides in from the edge its trigger sits on —
   menu from the left, search and bag from the right — as one plane of paper:
   horizontal travel only, nothing rises. site.js holds `hidden` off until the
   closing slide has finished. */
.pn-sheet {
	transform: translateX(100%);
	opacity: 0;
	transition:
		transform var(--dur-base) var(--ease-out),
		opacity var(--dur-fast) var(--ease-out);
}
.pn-sheet--menu { transform: translateX(-100%); }
.pn-sheet.is-open { transform: none; opacity: 1; }

/* The bar repeats the header's own 64px row, so the sheet's title lands at the
   same height as the trigger that opened it and the sheet reads as a sideways
   move rather than a new plane. */
.pn-sheet__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	margin: 0 0 var(--space-7);
}
.pn-sheet__title {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-sans);
	font-size: var(--text-small);
	line-height: 1;
	color: var(--text-primary);
}
.pn-sheet__bar .pn-wordmark { width: 119px; height: auto; }
.pn-sheet__close { margin-right: calc(-1 * var(--space-2)); }

.pn-sheet__nav { display: flex; flex-direction: column; gap: var(--space-4); }
.pn-sheet__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 44px;
	font-family: var(--font-serif);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	color: var(--text-primary);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn-sheet__link:hover { opacity: var(--hover-opacity); }

.pn-sheet__utils {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-top: auto;
	padding-top: var(--space-6);
	font-size: var(--text-small);
	color: var(--text-secondary);
}
.pn .pn-sheet__util { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: inherit; background: none; border: 0; border-radius: 0; font-size: inherit; box-shadow: none; }
.pn-sheet__util:hover { opacity: var(--hover-opacity); }

/* Backdrop: only ever seen behind the sheets that do not fill the screen. */
.pn-backdrop {
	position: fixed;
	inset: 0;
	z-index: 105;
	background: var(--surface-overlay);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}
.pn-backdrop.is-open { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	/* No travel — the sheet simply is there, and so is the submit label. */
	.pn-sheet,
	.pn-sheet--menu { transform: none; }
	.pn-sheet,
	.pn-backdrop { transition-duration: 1ms; }
	.pn-js .pn-search__submit { transform: none; }
}

html.pn-sheet-open { overflow: hidden; }

/* ── Off-canvas search: a paper sheet on the right, hairline edge ──────── */
.pn-sheet--search,
.pn-sheet--bag { padding-bottom: var(--space-8); }
.pn-sheet--search .pn-sheet__bar,
.pn-sheet--bag .pn-sheet__bar { justify-content: space-between; }

.pn-search { display: flex; flex-direction: column; gap: var(--space-5); }

/* Which of the two you are searching is said in colour: the live mode is ink,
   the other one is quiet. No boxes. */
.pn-search__modes {
	display: flex;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	border: 0;
}
.pn-search__mode {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--text-small);
	color: var(--text-tertiary);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}
.pn-search__mode input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
/* Baseline for browsers without :has() — the label text alone marks the mode. */
.pn-search__mode input:checked + span { color: var(--text-primary); font-weight: var(--weight-medium); }
.pn-search__mode:has(input:checked) { color: var(--text-primary); }
.pn-search__mode:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* One rule under the input, nothing around it. The label starts at the same
   left edge as the sheet's title. */
.pn-search__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
}
.pn .pn-search .pn-input {
	padding: 0;
	background: none;
	border: 0;
	border-bottom: var(--line-weight) solid var(--line-hair);
	border-radius: 0;
	transition: border-color var(--dur-fast) var(--ease-out);
}
.pn .pn-search .pn-input:focus,
.pn .pn-search .pn-input:focus-visible {
	border-bottom-color: var(--line-strong);
	box-shadow: none;
	outline: none;
}

/* The submit reads as a word, not a block, and it is only there once there is
   something to submit. Without JavaScript it simply stays visible. */
.pn .pn-search__submit {
	min-height: 44px;
	padding: 0;
	background: none;
	color: var(--text-primary);
	border: 0;
}
/* .pn-btn turns its label to paper on hover, which is right on a filled block
   and invisible on this one; the colour is pinned and base.css's fade carries
   the hover. */
.pn .pn-search__submit:hover,
.pn .pn-search__submit:focus-visible { color: var(--text-primary); }
.pn-js .pn-search__submit {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition:
		opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		visibility 0s linear var(--dur-base);
}
.pn-js .pn-search.is-typing .pn-search__submit {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}


/* ── Search results: rows, not cards ───────────────────────────────────────
   The same row the mini cart uses one sheet over — 4:5 thumbnail, title, one
   line of meta — so the two sheets read as one system. Empty until there is a
   query; the region collapses to nothing rather than holding open space. */
.pn-results { margin-top: var(--space-6); }
.pn-results:not(.is-active) { display: none; }

/* Results scroll, the field does not: in a sheet this tall the question has to
   stay in sight while the answers move under it. Same for the bag's panels,
   which keeps the two sheets behaving alike. */
.pn-sheet--search,
.pn-sheet--bag { overflow: hidden; }
.pn-results.is-active,
.pn-bag__panel {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.pn-results__status {
	font-size: var(--text-label);
	letter-spacing: var(--ls-label);
	color: var(--text-tertiary);
}
.pn-results__status:empty { display: none; }

.pn-results__list { margin-top: var(--space-4); }
.pn-result + .pn-result { border-top: var(--line-weight) solid var(--line-hair); }

.pn .pn-result__link {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-3) 0;
	color: var(--text-primary);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn .pn-result__link:hover { opacity: var(--hover-opacity); }
.pn .pn-result__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pn-result__img {
	display: block;
	width: 56px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--bg-muted);
}

.pn-result__body { display: grid; gap: var(--space-1); min-width: 0; }
.pn-result__title {
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-primary);
}
.pn-result__meta {
	font-size: var(--text-label);
	line-height: var(--lh-label);
	color: var(--text-secondary);
}

/* The way out to the full results page sits where the next row would. */
.pn-result--all { padding: var(--space-4) 0 0; }
.pn-result--all .pn-link { font-size: var(--text-small); }

/* ── Off-canvas bag: the same paper sheet, with 購物車 / 收藏 as tabs ────── */
.pn-bag__panel[hidden] { display: none; }

.pn-tabs {
	display: flex;
	gap: var(--space-5);
	margin: 0 0 var(--space-6);
}
.pn .pn-tab {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: var(--text-small);
	color: var(--text-tertiary);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}
.pn .pn-tab[aria-selected="true"] {
	color: var(--text-primary);
	font-weight: var(--weight-medium);
}
.pn .pn-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pn-bag__panel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pn-bag__empty { font-size: var(--text-small); color: var(--text-secondary); }

/* WooCommerce's mini cart, dressed as paper: one hairline per line item, the
   total on its own rule, its two buttons stacked. */
.pn-bag__minicart .woocommerce-mini-cart { display: flex; flex-direction: column; }
.pn .pn-bag__minicart .woocommerce-mini-cart__empty-message { font-size: var(--text-small); color: var(--text-secondary); }
/* WooCommerce nests the thumbnail inside the product link, so the photograph is
   lifted out of the flow rather than made a column of its own. */
.pn .pn-bag__minicart li {
	position: relative;
	padding: var(--space-4) var(--space-5) var(--space-4) 72px;
	border-bottom: var(--line-weight) solid var(--line-hair);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}
.pn .pn-bag__minicart li img {
	position: absolute;
	top: var(--space-4);
	left: 0;
	width: 56px;
	height: auto;
}
.pn .pn-bag__minicart li a { display: block; color: var(--text-primary); }
.pn-bag__minicart .quantity { display: block; margin-top: var(--space-1); color: var(--text-secondary); }
.pn .pn-bag__minicart .remove_from_cart_button {
	position: absolute;
	top: var(--space-4);
	right: 0;
	width: auto;
	color: var(--text-tertiary);
	font-size: var(--text-body);
	line-height: 1;
}
.pn .pn-bag__minicart .remove_from_cart_button:hover { color: var(--text-primary); }
.pn .pn-bag__minicart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	font-size: var(--text-small);
}
.pn-bag__minicart .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
/* WooCommerce writes its own buttons; give them the theme's two, outline then filled. */
.pn .pn-bag__minicart .woocommerce-mini-cart__buttons .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	background: transparent;
	color: var(--text-primary);
	border: var(--line-weight) solid var(--line-strong);
	border-radius: var(--radius-none);
	font-family: var(--font-sans);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.pn .pn-bag__minicart .woocommerce-mini-cart__buttons .checkout {
	background: var(--bg-brand);
	color: var(--text-on-brand);
	border-color: var(--bg-brand);
}

/* The 收藏 panel: the theme's own rows, cut to the same shape as the mini
   cart's beside them — one hairline per line, the photograph lifted out of the
   flow rather than given a column. */
.pn .pn-bag__wish {
	position: relative;
	padding: var(--space-4) var(--space-5) var(--space-4) 72px;
	border-bottom: var(--line-weight) solid var(--line-hair);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}
.pn .pn-bag__wish a { display: block; color: var(--text-primary); }
.pn .pn-bag__wish img {
	position: absolute;
	top: var(--space-4);
	left: 0;
	width: 56px;
	height: auto;
}
.pn-bag__wish-name { display: block; }
.pn-bag__wish-price { display: block; margin-top: var(--space-1); color: var(--text-secondary); }
.pn-bag__wishlist-more { padding: var(--space-5) 0; font-size: var(--text-small); }

@media (min-width: 768px) {
	/* The menu sheet is mobile-only; the search panel and the bag are not. */
	.pn-sheet--menu { display: none; }

	.pn-sheet--search,
	.pn-sheet--bag {
		inset: 0 0 0 auto;
		width: min(440px, 100%);
		border-left: var(--line-weight) solid var(--line-hair);
	}
}