/**
 * 門市查詢樣式
 * 沿用主題 token（--color-primary 等），未載入主題時退回同色系預設值。
 */
.flm-sf {
	--sf-g: var( --color-primary, #4e7661 );
	--sf-gd: #35543f;
	--sf-line: #e7e1d5;
	--sf-bg: #f7f5ef;
	color: #3a3a37;
}

/* ---------- 篩選列 ---------- */
.flm-sf__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	background: var( --sf-bg );
	border: 1px solid var( --sf-line );
	border-radius: 14px;
	padding: 18px 20px;
	margin: 0 0 18px;
}

.flm-sf__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 180px;
	flex: 1 1 180px;
}

.flm-sf__field label {
	font-size: .86em;
	font-weight: 700;
	color: var( --sf-gd );
	letter-spacing: .04em;
}

.flm-sf__field select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --sf-line );
	border-radius: 9px;
	background: #fff;
	font-size: .95em;
	color: #3a3a37;
}

.flm-sf__field select:disabled {
	background: #f0eee8;
	color: #9a958a;
}

.flm-sf__reset {
	padding: 10px 20px;
	border: 1px solid var( --sf-g );
	border-radius: 999px;
	background: transparent;
	color: var( --sf-g );
	font-weight: 700;
	font-size: .9em;
	cursor: pointer;
	transition: background .18s, color .18s;
}

.flm-sf__reset:hover {
	background: var( --sf-g );
	color: #fff;
}

.flm-sf__count {
	margin: 0 0 12px;
	font-size: .92em;
	color: #6f6a60;
}

/* ---------- 地圖 ---------- */
.flm-sf__map {
	height: 420px;
	border-radius: 14px;
	border: 1px solid var( --sf-line );
	overflow: hidden;
	margin: 0 0 22px;
	z-index: 0;
}

.flm-sf__map .leaflet-popup-content {
	font-size: 14px;
	line-height: 1.7;
}

/* ---------- 卡片 ---------- */
.flm-sf__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ) );
	gap: 20px;
}

.flm-sf-card {
	border: 1px solid var( --sf-line );
	border-radius: 14px;
	overflow: hidden;
	background: #fffefb;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s, border-color .2s;
	cursor: pointer;
}

.flm-sf-card:hover,
.flm-sf-card.is-active {
	border-color: var( --sf-g );
	box-shadow: 0 6px 22px rgba( 78, 118, 97, .16 );
}

.flm-sf-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var( --sf-bg );
}

.flm-sf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.flm-sf-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.flm-sf-card__title {
	margin: 0;
	font-size: 1.18em;
	color: var( --sf-gd );
	line-height: 1.4;
}

.flm-sf-card__area {
	margin: 0;
	font-size: .84em;
	color: var( --sf-g );
	font-weight: 700;
	letter-spacing: .06em;
}

.flm-sf-card__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .9em;
	color: #54534d;
}

.flm-sf-card__meta li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	line-height: 1.6;
}

.flm-sf-card__meta span {
	flex: 0 0 auto;
	opacity: .75;
}

.flm-sf-card__meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

/* ---------- 徽章 ---------- */
.flm-sf-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.flm-sf-badge {
	font-size: .78em;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 999px;
	letter-spacing: .03em;
}

.flm-sf-badge--cash {
	background: #eaf3ec;
	color: #35543f;
	border: 1px solid #cfe2d5;
}

.flm-sf-badge--pts {
	background: #fdf3e3;
	color: #8a5c1b;
	border: 1px solid #f0dcb9;
}

/* ---------- 服務 ---------- */
.flm-sf-card__services {
	border-top: 1px dashed var( --sf-line );
	padding-top: 12px;
	margin-top: 2px;
}

.flm-sf-card__services h4 {
	margin: 0 0 10px;
	font-size: .88em;
	color: var( --sf-gd );
	letter-spacing: .05em;
}

.flm-sf-svc {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.flm-sf-svc__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.flm-sf-svc__item img {
	width: 46px;
	height: 46px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
}

.flm-sf-svc__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.flm-sf-svc__name {
	color: #3a3a37;
	text-decoration: none;
	font-size: .93em;
	font-weight: 600;
	line-height: 1.45;
}

.flm-sf-svc__name:hover {
	color: var( --sf-g );
}

.flm-sf-svc__price {
	font-size: .84em;
	color: #8a8479;
}

.flm-sf-svc__btn {
	flex: 0 0 auto;
	background: var( --sf-g );
	color: #fff;
	text-decoration: none;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: .82em;
	font-weight: 700;
	white-space: nowrap;
	transition: background .18s;
}

.flm-sf-svc__btn:hover {
	background: var( --sf-gd );
	color: #fff;
}

.flm-sf-card__none {
	margin: 0;
	font-size: .88em;
	color: #8a8479;
}

.flm-sf-card__actions {
	margin: auto 0 0;
	padding-top: 6px;
}

.flm-sf-card__nav {
	color: var( --sf-g );
	text-decoration: none;
	font-weight: 700;
	font-size: .88em;
}

.flm-sf-card__nav:hover {
	color: var( --sf-gd );
}

.flm-sf__empty {
	text-align: center;
	color: #8a8479;
	padding: 34px 20px;
	background: var( --sf-bg );
	border: 1px dashed var( --sf-line );
	border-radius: 14px;
}

/* ---------- 單品頁的門市選擇 ---------- */
.flm-store-picker {
	margin: 0 0 18px;
}

.flm-store-picker__hint {
	margin: 6px 0 0;
	font-size: .86em;
	color: #6f6a60;
	line-height: 1.6;
}

@media ( max-width: 782px ) {
	.flm-sf__map {
		height: 320px;
	}

	.flm-sf__list {
		grid-template-columns: 1fr;
	}

	.flm-sf__field {
		flex: 1 1 100%;
	}
}

/* ---------- 外送平台式版面：門市卡在左、地圖在右（sticky） ---------- */
@media ( min-width: 900px ) {
	.flm-sf {
		display: grid;
		grid-template-columns: 1.12fr 0.88fr;
		column-gap: 28px;
		grid-template-areas:
			"filters filters"
			"count   count"
			"list    map";
		align-items: start;
	}
	.flm-sf__filters { grid-area: filters; }
	.flm-sf__count   { grid-area: count; }
	.flm-sf__list {
		grid-area: list;
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.flm-sf__empty { grid-area: list; }
	.flm-sf__map {
		grid-area: map;
		height: 640px;
		min-height: 640px;
		position: sticky;
		top: 92px;
		margin: 0;
	}
}

/* 卡片微調：門市名更醒目、卡片橫向留白 */
.flm-sf-card__media { aspect-ratio: 16 / 8; }
.flm-sf-card__title { font-size: 1.12em; }
