/* Store finder (audit #46). Loaded only on the Visit page. */
.tsk-finder-page .sf { color: #222; }
.tsk-finder-page .sf * { box-sizing: border-box; }
.sf-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ── Hero: title, search, state filters ─────────────────────────────────────── */
.sf-hero { padding: 40px 0 8px; }
.sf-hero__title {
	font-family: Piepie, system-ui, sans-serif;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.05;
	color: #ec008c;
	margin: 0 0 8px;
}
.sf-hero__sub { font-size: 1.05rem; margin: 0 0 20px; max-width: 46rem; }

.sf-search { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 14px; }
.sf-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-search__input {
	flex: 1 1 320px;
	min-height: 52px;
	padding: 0 20px;
	border: 2px solid #d9d9d9;
	border-radius: 999px;
	font-size: 1rem;
	background: #fff;
}
.sf-search__input:focus { outline: 0; border-color: #ec008c; box-shadow: 0 0 0 3px rgba(236, 0, 140, .18); }
.sf-search__near {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 52px; padding: 0 22px;
	border: 2px solid #5d1c9e; border-radius: 999px;
	background: #5d1c9e; color: #fff;
	font-weight: 800; font-size: .95rem; cursor: pointer;
}
.sf-search__near svg { width: 20px; height: 20px; }
.sf-search__near:disabled { opacity: .6; cursor: wait; }

.sf-states-wrap { position: relative; min-width: 0; }
.sf-states-arrow {
	position: absolute; top: 0; bottom: 4px; z-index: 2; width: 44px; padding: 0; border: 0;
	background: #fff; color: #ec008c; font-size: 2rem; line-height: 1; cursor: pointer;
}
.sf-states-arrow[hidden] { display: none; }
.sf-states-arrow--left { left: 0; background: linear-gradient(to right, #fff 55%, rgba(255, 255, 255, 0)); text-align: left; padding-left: 6px; }
.sf-states-arrow--right { right: 0; background: linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0)); text-align: right; padding-right: 6px; }
.sf-states { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.sf-state {
	min-height: 44px; padding: 0 2px;
	border: 0; border-bottom: 3px solid transparent; border-radius: 0;
	background: none; color: #222; font-weight: 700; font-size: 1rem; cursor: pointer;
	white-space: nowrap;
}
.sf-state span { font-weight: 400; color: #666; }
.sf-state:hover, .sf-state:focus-visible { color: #ec008c; border-bottom-color: #f7a6d6; }
.sf-state--active, .sf-state--active:hover { color: #ec008c; border-bottom-color: #ec008c; }

/* ── Status row ─────────────────────────────────────────────────────────────── */
.sf-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 14px; padding-bottom: 6px; }
.sf-count { margin: 0; font-weight: 700; }
.sf-message { margin: 0; color: #5d1c9e; font-size: .95rem; }
.sf-view { display: none; margin-left: auto; }
.sf-view__btn {
	min-height: 44px; padding: 0 22px; border: 2px solid #ec008c; background: #fff; color: #ec008c;
	font-weight: 800; cursor: pointer;
}
.sf-view__btn:first-child { border-radius: 999px 0 0 999px; }
.sf-view__btn:last-child { border-radius: 0 999px 999px 0; border-left: 0; }
.sf-view__btn--active { background: #ec008c; color: #fff; }

/* ── List + map ─────────────────────────────────────────────────────────────── */
.sf-layout { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 28px; padding-top: 8px; padding-bottom: 48px; align-items: start; }
.sf-list { display: flex; flex-direction: column; gap: 14px; }
.sf-map-col { position: sticky; top: 110px; }
.sf-map { height: calc(100vh - 150px); min-height: 420px; border-radius: 20px; overflow: hidden; border: 1px solid #e5e7eb; z-index: 1; }

.sf-card {
	display: flex; flex-direction: column; gap: 14px;
	padding: 20px; background: #fff;
	border: 1px solid #e5e7eb; border-radius: 20px;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.sf-card[hidden] { display: none; }
.sf-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .08); border-color: #c8ccd5; }
.sf-card--active { border-color: #ec008c; box-shadow: 0 0 0 2px rgba(236, 0, 140, .25); }
.sf-card__name { margin: 0; font-family: Piepie, system-ui, sans-serif; font-size: 1.5rem; line-height: 1.1; }
.sf-card__name a { color: #5d1c9e; text-decoration: none; }
.sf-card__name a:hover { color: #ec008c; }
.sf-card__venue { margin: 2px 0 0; color: #555; font-weight: 600; }
.sf-card__rating { margin: 6px 0 0; font-weight: 700; color: #5d1c9e; }
.sf-card__addr { margin: 8px 0 0; font-style: normal; color: #333; }
.sf-card__phone { margin: 4px 0 0; }
.sf-card__phone a { color: #5d1c9e; font-weight: 700; text-decoration: none; }
.sf-card__hours { margin: 8px 0 0; }
.sf-card__hours summary { cursor: pointer; min-height: 32px; display: list-item; }
.sf-card__hours ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: .95rem; }
.sf-card__hours li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px dashed #eee; }
.sf-card__hours .sf-today-row { font-weight: 800; color: #ec008c; }
.sf-card__dist { margin: 8px 0 0; font-weight: 800; color: #ec008c; }
.sf-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.sf-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 0 20px; border: 2px solid #5d1c9e; border-radius: 999px;
	background: #fff; color: #5d1c9e; font-weight: 800; font-size: .9rem; text-decoration: none; text-transform: uppercase; letter-spacing: .03em;
}
.sf-btn:hover, .sf-btn:focus-visible { background: #f3e9fa; color: #5d1c9e; }
.sf-btn--primary { background: #ec008c; border-color: #ec008c; color: #fff; }
.sf-btn--primary:hover, .sf-btn--primary:focus-visible { background: #c4006f; border-color: #c4006f; color: #fff; }
.sf-btn--ghost { border-color: #d9d9d9; color: #333; }

.sf-empty { padding: 24px; background: #f6f6f6; border-radius: 16px; margin: 0; }

/* Map pins */
.sf-pin span { display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: #ec008c; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.sf-pin--hover span { background: #5d1c9e; }

/* ── Coming soon ────────────────────────────────────────────────────────────── */
.sf-soon { padding-bottom: 56px; }
.sf-soon__title { font-family: Piepie, system-ui, sans-serif; font-size: 1.6rem; color: #5d1c9e; margin: 0 0 12px; }
.sf-soon__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.sf-soon__item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 2px dashed #c8ccd5; border-radius: 16px; background: #fafafa; }
.sf-soon__item a { color: #222; font-weight: 700; text-decoration: none; }
.sf-soon__tag { padding: 4px 10px; border-radius: 999px; background: #5d1c9e; color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* ── Tablet and phone ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.sf-layout { grid-template-columns: 1fr; }
	.sf-view { display: inline-flex; }
	.sf-map-col { display: none; position: static; }
	.sf--map .sf-list { display: none; }
	.sf--map .sf-map-col { display: block; }
	.sf-map { height: 70vh; min-height: 360px; }
}

@media (max-width: 767px) {
	.sf-wrap { padding: 0 16px; }
	.sf-hero { padding-top: 24px; }
	.sf-search__near { width: 100%; justify-content: center; }
	.sf-states { flex-wrap: nowrap; overflow-x: auto; gap: 4px 22px; padding: 0 0 4px; scrollbar-width: none; }
	.sf-states::-webkit-scrollbar { display: none; }
	.sf-state { flex: 0 0 auto; }
	.sf-card__actions .sf-btn { flex: 1 1 calc(50% - 10px); }
	.sf-card__actions .sf-btn--primary { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-card { transition: none; }
}