/* her wedding 商品篩選 — 前台樣式 */

.opf-facet { margin: 0; }
.opf-facet.opf-empty { color: #888; }
/* 清掉佈景主題常對表單元素加的 margin,避免搜尋框下方多出空白 */
.opf-facet input,
.opf-facet select { margin: 0; }
.opf-group__title { font-weight: 700; margin-bottom: 8px; }

/* 選項容器 */
.opf-options { display: flex; flex-wrap: wrap; gap: 8px; }
.opf-cat-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* 排列方式 (由「商品分類」小工具的『排列』控制) */
.opf-arrange-wrap .opf-options,
.opf-arrange-wrap .opf-cat-links { display: flex; flex-wrap: wrap; }
.opf-arrange-column .opf-options,
.opf-arrange-column .opf-cat-links { display: flex; flex-direction: column; align-items: flex-start; }
.opf-arrange-grid .opf-options,
.opf-arrange-grid .opf-cat-links {
	display: grid;
	grid-template-columns: repeat(var(--opf-cat-cols, 3), minmax(0, 1fr));
}
.opf-arrange-grid .opf-opt,
.opf-arrange-grid .opf-cat-link { display: flex; justify-content: center; text-align: center; }

/* 藥丸 / 方形按鈕 (核取與純連結共用外觀) */
.opf-ui-pills .opf-opt,
.opf-ui-buttons .opf-opt,
.opf-cat-link {
	display: inline-flex; align-items: center;
	border: 1px solid #ddd; padding: 6px 14px;
	cursor: pointer; user-select: none; text-decoration: none; color: inherit;
	transition: background .15s, color .15s, border-color .15s;
}
.opf-ui-pills .opf-opt,
.opf-cat-links.opf-ui-pills .opf-cat-link { border-radius: 999px; }
.opf-ui-buttons .opf-opt,
.opf-cat-links.opf-ui-buttons .opf-cat-link { border-radius: 6px; }

.opf-ui-pills .opf-opt input,
.opf-ui-buttons .opf-opt input { display: none; }

.opf-ui-pills .opf-opt.is-on,
.opf-ui-buttons .opf-opt.is-on { background: #d2795a; color: #fff; border-color: #d2795a; }
.opf-cat-link:hover { background: #d2795a; color: #fff; border-color: #d2795a; }

/* 核取方塊 (直排勾選) */
.opf-ui-checkbox .opf-options { flex-direction: column; gap: 6px; }
.opf-ui-checkbox .opf-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* 下拉 */
.opf-select { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; width: 100%; max-width: 320px; }

/* 商品排序下拉 */
.opf-sort { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; max-width: 100%; }

/* 搜尋 */
.opf-search { display: flex; max-width: 420px; }
.opf-search-input {
	flex: 1; padding: 10px 12px; border: 1px solid #ddd;
	border-radius: 8px 0 0 8px; min-width: 0;
}
.opf-search-btn {
	padding: 10px 16px; border: none; cursor: pointer;
	background: #333; color: #fff; border-radius: 0 8px 8px 0;
}

/* 價格 */
.opf-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opf-price input {
	width: 90px; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px;
}
.opf-price-sep { color: #999; }
.opf-price-btn {
	padding: 8px 16px; border: none; cursor: pointer;
	background: #333; color: #fff; border-radius: 8px;
}

/* ---------- 格線 ---------- */
.opf-grid {
	display: grid;
	grid-template-columns: repeat(var(--opf-cols, 3), minmax(0, 1fr));
	gap: 24px; position: relative;
}
.opf-grid.opf-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }
.opf-noresult { grid-column: 1 / -1; padding: 30px 0; color: #888; text-align: center; }

/* ---------- 商品卡 ---------- */
.opf-card { display: flex; flex-direction: column; }
.opf-card__media { align-self: stretch; display: block; overflow: hidden; }
.opf-card__media img { width: 100%; height: auto; display: block; }
.opf-card__title { display: block; font-weight: 600; margin: 12px 0 4px; text-decoration: none; color: inherit; line-height: 1.4; }
.opf-card__title:hover { text-decoration: underline; }
.opf-card__price { margin-bottom: 12px; }
.opf-card__price .amount { font-weight: 600; }
.opf-card__btn {
	display: inline-block; margin-top: auto; text-align: center;
	padding: 10px 16px; background: #333; color: #fff;
	text-decoration: none; border-radius: 8px;
	transition: background .15s, color .15s;
}

/* Loop Item 範本卡片:作為格線子項 */
.opf-loop-item { min-width: 0; }

/* ---------- 手機篩選鈕 / 抽屜 ---------- */
.opf-drawer-toggle {
	display: none; align-items: center; gap: 8px;
	border: none; cursor: pointer; background: #333; color: #fff;
	padding: 10px 16px; border-radius: 8px; font-size: 15px; line-height: 1;
}
.opf-drawer-toggle__ico { display: inline-flex; font-size: 18px; }
.opf-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100000; }
body.opf-drawer-lock { overflow: hidden; }
.opf-drawer-close {
	position: absolute; top: 10px; right: 12px; z-index: 3;
	border: none; background: transparent; font-size: 28px; line-height: 1;
	cursor: pointer; color: #666; padding: 0; width: 34px; height: 34px;
}

/* ---------- 動態大標題 ---------- */
.opf-cat-heading { margin: 0; }

/* ---------- 分類手風琴 (大分類 / 小分類展開) ---------- */
.opf-acc-list { display: flex; flex-direction: column; gap: 6px; }
.opf-acc { display: block; }
.opf-acc__head { display: flex; align-items: center; gap: 6px; }
.opf-acc__head > .opf-opt { flex: 1 1 auto; }
.opf-acc__title {
	flex: 1 1 auto; font-weight: 600; cursor: pointer;
	background: none; border: none; text-align: left; padding: 6px 0;
	color: inherit; font: inherit;
}
.opf-acc__toggle {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; padding: 0; border: none; background: none;
	cursor: pointer; color: inherit;
}
.opf-chev {
	width: 9px; height: 9px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease; margin-top: -3px;
}
.opf-acc.is-open > .opf-acc__head .opf-chev { transform: rotate(-135deg); margin-top: 3px; }
.opf-acc__body {
	display: none; flex-direction: column; gap: 6px;
	padding-left: 16px; margin-top: 6px;
}
.opf-acc.is-open > .opf-acc__body { display: flex; }

/* ---------- 篩選彈窗 (icon) ---------- */
.opf-popup-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	border: none; cursor: pointer; background: #333; color: #fff;
	padding: 10px 16px; border-radius: 8px; font-size: 15px; line-height: 1;
}
.opf-popup-toggle__ico { display: inline-flex; font-size: 18px; }
.opf-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100000; }
.opf-popup-close {
	position: absolute; top: 10px; right: 12px; z-index: 3;
	border: none; background: transparent; font-size: 28px; line-height: 1;
	cursor: pointer; color: #666; padding: 0; width: 34px; height: 34px;
}