/* ==========================================================
 * 歡喜緣 商品篩選 — 前台
 * 依 Figma「3-商品分類」node 1457:8484
 * 篩選欄 1457:8656、工具列 1457:8710、分頁 1457:8735
 * ========================================================== */
.twh-sf,
.twh-sf-toolbar,
.twh-sf-dropdown,
.woocommerce-pagination {
	--twh-sf-white: #ffffff;
	--twh-sf-ink: #292421;      /* 主-木墨黑 */
	--twh-sf-gold: #b58a45;     /* 主-古銅金 */
	--twh-sf-gold-a: #b67b19;
	--twh-sf-gold-b: #d1a64f;
	--twh-sf-gold-c: #a96f14;
	--twh-sf-gold-gradient: linear-gradient(180deg, #b67b19 0%, #d1a64f 50%, #a96f14 100%);
	--twh-sf-font: "Noto Serif TC", serif;
}

/* 共用：向下箭頭 */
.twh-sf__caret {
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 10l-4 4-4-4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
	transition: transform 0.2s ease;
}

/* AJAX 載入中：商品區淡化 */
.twh-sf-loading .elementor-widget-wc-archive-products,
.twh-sf-loading .elementor-widget-woocommerce-products,
.twh-sf-loading [data-twh-sf-region="toolbar"] {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* ==========================================================
 * 左側篩選欄
 * ========================================================== */
.twh-sf {
	box-sizing: border-box;
	width: 100%;
	padding: 8px;
	font-family: var(--twh-sf-font);
	color: var(--twh-sf-white);
}

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

/* 手機版才顯示的展開按鈕 */
.twh-sf__toggle {
	display: none;
}

/* 金框 + 極淡金漸層底，內距 20px */
.twh-sf__panel {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 0;
	padding: 20px;
	background: linear-gradient(180deg, rgba(182, 123, 25, 0.04) 0%, rgba(209, 166, 79, 0.04) 50%, rgba(169, 111, 20, 0.04) 100%);
	border: 1px solid var(--twh-sf-gold-a);
}

.twh-sf__section {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.twh-sf__section--filters {
	gap: 40px;
}

/* 區塊大標：32px Bold */
.twh-sf__heading {
	margin: 0;
	padding: 0;
	font-family: var(--twh-sf-font);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--twh-sf-white);
}

/* 分隔線：燙金 1px */
.twh-sf__divider {
	width: 100%;
	height: 1px;
	margin: 0;
	background: var(--twh-sf-gold-gradient);
	border: 0;
}

/* ---------- 搜尋 ---------- */
.twh-sf__search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 54px;
	padding: 8px;
	border: 1px solid var(--twh-sf-white);
	border-radius: 4px;
	cursor: text;
}

.twh-sf__search-icon {
	flex-shrink: 0;
	width: 21px;
	height: 20px;
	margin: 0 1px;
	color: var(--twh-sf-white);
}

.twh-sf__search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	font-family: var(--twh-sf-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08px;
	color: var(--twh-sf-white);
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.twh-sf__search input::placeholder {
	color: var(--twh-sf-white);
	opacity: 1;
}

.twh-sf__search:focus-within {
	border-color: var(--twh-sf-gold-b);
}

/* ---------- 篩選條件標題 + 清除全部 ---------- */
.twh-sf__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: -20px; /* 與套用按鈕間距 20px（section gap 40 - 20） */
}

.twh-sf__clear,
.twh-sf__clear:visited {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--twh-sf-white);
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.twh-sf__clear:hover {
	color: var(--twh-sf-white);
	opacity: 1;
}

/* 套用篩選器：古銅金 54px */
.twh-sf .twh-sf__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 8px 24px;
	font-family: var(--twh-sf-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08px;
	color: var(--twh-sf-white);
	background: var(--twh-sf-gold);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.twh-sf .twh-sf__apply:hover,
.twh-sf .twh-sf__apply:focus {
	color: var(--twh-sf-white);
	background: var(--twh-sf-gold-c);
}

/* ---------- 分組 ---------- */
.twh-sf__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* 小標：20px Bold 白字（價格區間） */
.twh-sf__label {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.twh-sf__group--cat > .twh-sf__heading {
	margin-bottom: 20px;
}

/* 可收合分組標題：20px 燙金 + 箭頭 */
.twh-sf__legend {
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
}

.twh-sf .twh-sf__collapse {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--twh-sf-font);
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.twh-sf .twh-sf__collapse:hover,
.twh-sf .twh-sf__collapse:focus {
	background: none;
}

.twh-sf__legend-text {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: transparent;
	background: var(--twh-sf-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 箭頭改金色，展開時朝上 */
.twh-sf__collapse .twh-sf__caret {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 10l-4 4-4-4' stroke='%23d1a64f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.twh-sf__group.is-open .twh-sf__collapse .twh-sf__caret {
	transform: rotate(180deg);
}

.twh-sf__group--attr:not(.is-open) .twh-sf__options {
	display: none;
}

.twh-sf__group--attr:not(.is-open) .twh-sf__legend {
	margin-bottom: 0;
}

/* ---------- 選項：圓圈 24px + 20px Bold，未選 60% ---------- */
.twh-sf__options {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.twh-sf__options li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.twh-sf__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.twh-sf__option:hover,
.twh-sf__option:has(input:checked) {
	opacity: 1;
}

/* 原生輸入框隱藏但保留可聚焦 */
.twh-sf__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.twh-sf__mark {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 1px solid var(--twh-sf-white);
	border-radius: 999px;
}

/* 勾選：金框 + 金色實心點 */
.twh-sf__option input:checked + .twh-sf__mark {
	border-color: var(--twh-sf-gold-b);
}

.twh-sf__option input:checked + .twh-sf__mark::after {
	content: "";
	position: absolute;
	inset: 5px;
	background: var(--twh-sf-gold-gradient);
	border-radius: 999px;
}

.twh-sf__option input:focus-visible + .twh-sf__mark {
	outline: 2px solid var(--twh-sf-gold-b);
	outline-offset: 2px;
}

.twh-sf__text {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--twh-sf-white);
}

.twh-sf__option:has(input:checked) .twh-sf__text {
	color: transparent;
	background: var(--twh-sf-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---------- 價格區間 ---------- */
.twh-sf__price {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 8px 0;
}

.twh-sf__price-inputs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.twh-sf__price-inputs input[type="number"] {
	width: 110px;
	height: 40px;
	margin: 0;
	padding: 8px;
	font-family: var(--twh-sf-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08px;
	color: var(--twh-sf-white);
	background: transparent;
	border: 1px solid var(--twh-sf-white);
	border-radius: 4px;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.twh-sf__price-inputs label:first-child input {
	width: 90px;
}

.twh-sf__price-inputs input::-webkit-outer-spin-button,
.twh-sf__price-inputs input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.twh-sf__price-inputs input:focus {
	border-color: var(--twh-sf-gold-b);
	outline: none;
}

/* 雙滑桿：2px 白線 + 金色選取段 + 白點 */
.twh-sf__range {
	position: relative;
	height: 16px;
}

.twh-sf__range-track,
.twh-sf__range-fill {
	position: absolute;
	top: 7px;
	height: 2px;
	border-radius: 100px;
	pointer-events: none;
}

.twh-sf__range-track {
	right: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.4);
}

.twh-sf__range-fill {
	background: var(--twh-sf-white);
}

.twh-sf__range input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 16px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.twh-sf__range input[type="range"]::-webkit-slider-runnable-track {
	height: 16px;
	background: none;
}

.twh-sf__range input[type="range"]::-webkit-slider-thumb {
	width: 14px;
	height: 14px;
	margin-top: 1px;
	background: var(--twh-sf-white);
	border: 0;
	border-radius: 100px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.twh-sf__range input[type="range"]::-moz-range-track {
	background: none;
}

.twh-sf__range input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	background: var(--twh-sf-white);
	border: 0;
	border-radius: 100px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	pointer-events: auto;
}

/* ==========================================================
 * 工具列：標題 + 數量 / 排序 / 每頁顯示
 * ========================================================== */
.twh-sf-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--twh-sf-font);
	color: var(--twh-sf-white);
}

.twh-sf-toolbar__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 8px;
}

.twh-sf-toolbar__heading {
	margin: 0;
	font-family: var(--twh-sf-font);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--twh-sf-white);
}

.twh-sf-toolbar__count {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	opacity: 0.6;
}

.twh-sf-toolbar__controls {
	display: flex;
	gap: 18px;
	padding: 8px 0;
}

/* ---------- 下拉選單：306×54 白框 ---------- */
.twh-sf-dropdown {
	position: relative;
	width: 306px;
	max-width: 100%;
	font-family: var(--twh-sf-font);
}

.twh-sf-dropdown .twh-sf-dropdown__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 9px;
	font-family: var(--twh-sf-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--twh-sf-white);
	text-align: left;
	background: transparent;
	border: 1px solid var(--twh-sf-white);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.twh-sf-dropdown .twh-sf-dropdown__toggle:hover,
.twh-sf-dropdown .twh-sf-dropdown__toggle:focus {
	color: var(--twh-sf-white);
	background: transparent;
}

.twh-sf-dropdown__toggle svg {
	flex-shrink: 0;
}

.twh-sf-dropdown__label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.twh-sf-dropdown.is-open .twh-sf__caret {
	transform: rotate(180deg);
}

/* 選單：每列 54px、木墨黑底、白框（無上框，與按鈕相接） */
.twh-sf-dropdown__menu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 30;
	margin: 0;
	padding: 0;
	list-style: none;
}

.twh-sf-dropdown__menu[hidden] {
	display: none;
}

.twh-sf-dropdown__menu li {
	margin: 0;
	list-style: none;
}

.twh-sf-dropdown__menu a,
.twh-sf-dropdown__menu a:visited {
	display: flex;
	align-items: center;
	height: 54px;
	padding: 8px 40px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--twh-sf-white);
	text-decoration: none;
	background: var(--twh-sf-ink);
	border: 1px solid var(--twh-sf-white);
	border-top: 0;
	transition: background-color 0.2s ease;
}

.twh-sf-dropdown__menu a:hover,
.twh-sf-dropdown__menu a:focus {
	color: var(--twh-sf-white);
	background: #3a332f;
}

.twh-sf-dropdown__menu li[aria-selected="true"] a {
	color: var(--twh-sf-gold-b);
}

/* ==========================================================
 * 分頁：40px 圓形數字、60% 透明，目前頁燙金
 * ========================================================== */
.woocommerce-pagination {
	margin-top: 40px;
	font-family: var(--twh-sf-font);
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	float: none !important;
}

.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0 !important;
	padding: 4px !important;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.4;
	color: var(--twh-sf-white) !important;
	text-decoration: none;
	background: none !important;
	border: 0 !important;
	border-radius: 999px;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
	opacity: 1;
}

/* 目前頁 */
.woocommerce-pagination ul.page-numbers li span.current {
	color: transparent !important;
	background: var(--twh-sf-gold-gradient) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent;
	opacity: 1;
}

/* 上一頁 / 下一頁 / 最後頁：不透明、左右留白 */
.woocommerce-pagination ul.page-numbers li .prev,
.woocommerce-pagination ul.page-numbers li .next,
.woocommerce-pagination ul.page-numbers li .twh-sf-last {
	gap: 8px;
	padding: 4px 10px !important;
	opacity: 1;
}

.woocommerce-pagination ul.page-numbers li .next {
	margin-left: 20px !important;
}

.woocommerce-pagination ul.page-numbers li .prev {
	margin-right: 20px !important;
}

.twh-sf-page-arrow {
	font-size: 20px;
	line-height: 1;
}

/* ==========================================================
 * 商品列表 [twh_shop_products]
 * Figma 商品卡片「常駐商品」960:28934 / hover 960:28933
 * 卡片 346px、名稱 20px、價格 20px 燙金、原價 60% 刪除線
 * hover：圖片 1px 古銅金框 + 金色光暈 + 40% 古銅金遮罩，
 *        「加入購物車」浮現，名稱降為 60%
 * ========================================================== */
.twh-sf-products {
	--twh-sf-cols: 3;
	--twh-sf-white: #ffffff;
	--twh-sf-ink: #292421;
	--twh-sf-gold: #b58a45;
	--twh-sf-gold-gradient: linear-gradient(180deg, #b67b19 0%, #d1a64f 50%, #a96f14 100%);
	--twh-sf-font: "Noto Serif TC", serif;
	--twh-card-btn-h: 44px;
	margin-top: 40px;
	font-family: var(--twh-sf-font);
}

.twh-sf-loading [data-twh-sf-region="products"] {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* 格線 */
.twh-sf-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--twh-sf-cols), minmax(0, 1fr));
	gap: 40px 20px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.twh-sf-products ul.products::before,
.twh-sf-products ul.products::after {
	display: none !important;
}

/* 卡片：container query 讓按鈕位置依卡片寬度等比 */
.twh-sf-products ul.products li.product {
	position: relative;
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
	float: none !important;
	container-type: inline-size;
}

.twh-sf-products ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 !important;
}

.twh-sf-products ul.products li.product a {
	color: inherit;
	text-decoration: none;
}

/* 圖片外層：hover 金框、光暈、遮罩 */
.twh-sf-products ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	margin: 0 !important;
	border: 1px solid transparent;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.twh-sf-products ul.products li.product .astra-shop-thumbnail-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: rgba(181, 138, 69, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.twh-sf-products ul.products li.product img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	object-fit: cover;
	border: 0 !important;
	box-shadow: none !important;
}

/* 名稱 20px 白字、最多兩行 */
.twh-sf-products ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	font-family: var(--twh-sf-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--twh-sf-white) !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: opacity 0.25s ease;
}

/* 價格：售價燙金在上、原價刪除線在下 */
.twh-sf-products ul.products li.product .price {
	display: flex !important;
	flex-direction: column-reverse;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	font-family: var(--twh-sf-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: transparent !important;
	background: var(--twh-sf-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent !important;
}

.twh-sf-products ul.products li.product .price .woocommerce-Price-amount {
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
}

.twh-sf-products ul.products li.product .price del {
	opacity: 1;
	color: rgba(255, 255, 255, 0.6) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

.twh-sf-products ul.products li.product .price ins {
	text-decoration: none;
	background: none;
}

/* 不顯示：分類文字、其他按鈕、特價標籤 */
.twh-sf-products ul.products li.product .ast-woo-product-category,
.twh-sf-products ul.products li.product .button:not(.twh-card-cart),
.twh-sf-products ul.products li.product .added_to_cart,
.twh-sf-products ul.products li.product .onsale {
	display: none !important;
}

/* 追蹤愛心疊在遮罩上方 */
.twh-sf-products ul.products li.product .twh-wl-btn--icon {
	z-index: 5;
}

/* hover 按鈕：木墨黑底、白框、20px，圖片 82% 高度處置中 */
.twh-sf-products ul.products li.product .twh-card-cart {
	position: absolute !important;
	top: calc(100cqw * 0.82);
	left: 50%;
	z-index: 4;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 50%;
	height: var(--twh-card-btn-h);
	margin: 0 !important;
	padding: 9px 24px !important;
	font-family: var(--twh-sf-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--twh-sf-white) !important;
	white-space: nowrap;
	background: var(--twh-sf-ink) !important;
	border: 1px solid var(--twh-sf-white) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity 0.25s ease, background-color 0.2s ease;
}

.twh-sf-products ul.products li.product .twh-card-cart:hover {
	background: #3a332f !important;
}

/* 加入購物車中 / 已加入 */
.twh-sf-products ul.products li.product .twh-card-cart.loading {
	opacity: 0.6 !important;
}

.twh-sf-products ul.products li.product .twh-card-cart.added::after {
	content: " ✓";
	margin-left: 4px;
}

/* 只在有滑鼠的裝置套用 hover 效果 */
@media (hover: hover) {
	.twh-sf-products ul.products li.product:hover .astra-shop-thumbnail-wrap {
		border-color: var(--twh-sf-gold);
		box-shadow: 0 4px 40px var(--twh-sf-gold);
	}

	.twh-sf-products ul.products li.product:hover .astra-shop-thumbnail-wrap::after {
		opacity: 1;
	}

	.twh-sf-products ul.products li.product:hover .woocommerce-loop-product__title {
		opacity: 0.6;
	}

	.twh-sf-products ul.products li.product:hover .twh-card-cart,
	.twh-sf-products ul.products li.product .twh-card-cart:focus-visible {
		opacity: 1;
		pointer-events: auto;
	}
}

/* 找不到商品 */
.twh-sf-products .woocommerce-info,
.twh-sf-products .woocommerce-no-products-found {
	margin: 0;
	padding: 40px 20px;
	font-family: var(--twh-sf-font);
	font-size: 20px;
	color: var(--twh-sf-white);
	text-align: center;
	background: none;
	border: 1px solid #b67b19;
}

.twh-sf-products .woocommerce-info::before {
	display: none;
}

@media (max-width: 1024px) {
	.twh-sf-products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.twh-sf-products {
		margin-top: 24px;
	}

	.twh-sf-products ul.products {
		gap: 24px 12px;
	}

	.twh-sf-products ul.products li.product .woocommerce-loop-product__title,
	.twh-sf-products ul.products li.product .price {
		font-size: 16px !important;
	}
}

/* ==========================================================
 * RWD
 * ========================================================== */
@media (max-width: 1024px) {
	.twh-sf-toolbar__controls {
		width: 100%;
	}

	.twh-sf-dropdown {
		flex: 1;
		width: auto;
	}
}

@media (max-width: 768px) {
	/* 篩選欄改為可展開的面板 */
	.twh-sf {
		padding: 0;
	}

	.twh-sf .twh-sf__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 54px;
		margin: 0;
		padding: 8px 16px;
		font-family: var(--twh-sf-font);
		font-size: 20px;
		font-weight: 700;
		color: var(--twh-sf-white);
		background: transparent;
		border: 1px solid var(--twh-sf-gold-a);
		border-radius: 0;
		box-shadow: none;
		cursor: pointer;
	}

	.twh-sf .twh-sf__toggle:hover,
	.twh-sf .twh-sf__toggle:focus {
		color: var(--twh-sf-white);
		background: transparent;
	}

	.twh-sf.is-open .twh-sf__toggle .twh-sf__caret {
		transform: rotate(180deg);
	}

	.twh-sf__panel {
		display: none;
		border-top: 0;
	}

	.twh-sf.is-open .twh-sf__panel {
		display: flex;
	}

	.twh-sf__heading,
	.twh-sf-toolbar__heading {
		font-size: 24px;
	}

	.twh-sf__text,
	.twh-sf__legend-text,
	.twh-sf__label,
	.twh-sf__clear {
		font-size: 17px;
	}

	.twh-sf-toolbar__count {
		font-size: 16px;
	}

	.twh-sf-toolbar__controls {
		gap: 10px;
	}

	.twh-sf-dropdown .twh-sf-dropdown__toggle,
	.twh-sf-dropdown__menu a {
		height: 48px;
		font-size: 16px;
	}

	.twh-sf-dropdown__menu a {
		padding: 8px 16px;
	}

	.woocommerce-pagination ul.page-numbers li .page-numbers {
		min-width: 34px;
		height: 34px;
		font-size: 15px !important;
	}

	.woocommerce-pagination ul.page-numbers li .next,
	.woocommerce-pagination ul.page-numbers li .prev {
		margin: 0 !important;
	}
}