/* Union Market — Directorio (archive marca) */
.um-directorio-block,
.um-directorio-block * { box-sizing: border-box; }

.um-directorio-block {
	background: var(--um-cream);
	color: var(--um-warm-ink);
	font-family: var(--font-display);
	overflow-x: hidden;
}
.um-directorio-block h1,
.um-directorio-block h2 { font-family: var(--font-heading); margin: 0; letter-spacing: -0.02em; }
.um-directorio-block a { text-decoration: none; color: inherit; }
.um-directorio-block .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.um-directorio-block .fade-up.in { opacity: 1; transform: translateY(0); }

.um-dir__hero {
	padding: 56px 24px 40px; background: var(--um-cream-warm);
	border-bottom: 1px solid color-mix(in oklab, var(--um-navy) 10%, transparent);
}
.um-dir__hero-inner { max-width: 1180px; margin: 0 auto; }
.um-dir__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.um-dir__eyebrow .bar { width: 30px; height: 2px; background: var(--um-terracotta); }
.um-dir__eyebrow .label { font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--um-terracotta); }
.um-dir__hero h1 {
	font-weight: 800; line-height: .94; letter-spacing: -0.035em;
	font-size: clamp(44px, 7vw, 80px); color: var(--um-navy);
}
.um-dir__hero h1 .dot { color: var(--um-terracotta); }
.um-dir__hero p {
	margin-top: 20px; max-width: 560px; font-size: 18px; line-height: 1.6;
	font-weight: 500; color: var(--um-warm-ink-soft);
}
.um-dir__stats { display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap; }
.um-dir__stats .n { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--um-navy); }
.um-dir__stats .l { font-size: 11px; font-weight: 600; letter-spacing: .16em; margin-top: 4px; color: var(--um-warm-mute); }

.um-dir__tools {
	position: sticky; top: var(--um-header-offset, 68px); z-index: 30;
	background: color-mix(in oklab, var(--um-cream) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid color-mix(in oklab, var(--um-navy) 10%, transparent);
	padding: 18px 24px;
}
.um-dir__tools-inner {
	max-width: 1180px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 16px;
}
.um-dir__tools-inner--chips { margin-top: 14px; }
.um-dir__searchbar {
	display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px;
	background: var(--um-cream-soft); border: 1px solid color-mix(in oklab, var(--um-navy) 16%, transparent);
	color: var(--um-warm-mute);
}
.um-dir__searchbar input {
	flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
	font-size: 15px; font-weight: 500; color: var(--um-warm-ink); font-family: inherit;
}
.um-dir__loc { display: flex; align-items: center; gap: 10px; }
.um-dir__loc .lb { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--um-warm-mute); }
.um-dir__loc select {
	padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
	outline: none; cursor: pointer; background: var(--um-cream-soft); color: var(--um-navy);
	font-family: inherit; border: 1px solid color-mix(in oklab, var(--um-navy) 20%, transparent);
}
.um-dir__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.um-directorio-block .um-chip {
	padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700;
	cursor: pointer; background: var(--um-cream-soft); color: var(--um-navy);
	border: 1px solid color-mix(in oklab, var(--um-navy) 18%, transparent);
	font-family: inherit; transition: all .2s;
}
.um-directorio-block .um-chip.is-active { background: var(--um-navy); color: var(--um-cream); border-color: var(--um-navy); }

.um-dir__results { padding: 32px 24px 96px; }
.um-dir__results-inner { max-width: 1180px; margin: 0 auto; }
.um-dir__count { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--um-warm-mute); margin-bottom: 20px; }
.um-dir__count b { color: var(--um-navy); }
.um-dir__grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }

.um-mcard {
	display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
	background: var(--um-cream-soft); border: 1px solid color-mix(in oklab, var(--um-navy) 8%, transparent);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.um-mcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: color-mix(in oklab, var(--um-navy) 22%, transparent); }
.um-mcard__top { position: relative; height: 96px; overflow: hidden; }
.um-mcard__cat {
	position: absolute; right: 14px; top: 14px; padding: 5px 12px; border-radius: 999px;
	font-size: 10px; font-weight: 700; letter-spacing: .08em;
	background: color-mix(in oklab, var(--um-cream) 88%, transparent); color: var(--um-navy);
}
.um-mcard__body { padding: 0 22px 22px; margin-top: -28px; position: relative; }
.um-mcard__av {
	width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
	font-size: 22px; font-weight: 800; color: var(--um-cream);
	border: 3px solid var(--um-cream-soft); box-shadow: var(--shadow-soft);
}
.um-mcard__name { margin-top: 14px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--um-navy); }
.um-mcard__loc { margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--um-warm-mute); }
.um-mcard__tags { margin-top: 14px; display: flex; gap: 7px; flex-wrap: wrap; }
.um-mcard__tags .t {
	padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700;
	background: var(--um-cream-warm); color: var(--um-warm-ink-soft);
	border: 1px solid color-mix(in oklab, var(--um-navy) 10%, transparent);
}
.um-mcard__foot {
	margin-top: 18px; padding-top: 16px;
	border-top: 1px solid color-mix(in oklab, var(--um-navy) 10%, transparent);
	display: flex; align-items: center; justify-content: space-between;
}
.um-mcard__est { font-size: 12px; font-weight: 600; color: var(--um-warm-mute); }
.um-mcard__cta { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--um-terracotta); }

.um-dir__empty,
.um-dir__empty-server { padding: 64px 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--um-warm-mute); }
.um-dir__empty button {
	margin-top: 14px; padding: 10px 20px; border-radius: 999px;
	border: 1.5px solid var(--um-navy); background: transparent; color: var(--um-navy);
	font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
}

.um-dir__sumate { padding: 0 24px 96px; }
.um-dir__sumate-inner {
	max-width: 1180px; margin: 0 auto; border-radius: 24px; padding: 44px 40px;
	background: var(--um-burgundy); display: flex; align-items: center; justify-content: space-between;
	gap: 28px; flex-wrap: wrap;
}
.um-dir__sumate h2 {
	font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
	font-size: clamp(24px, 3.4vw, 36px); color: var(--um-cream); max-width: 560px;
}
.um-dir__sumate h2 .dot { color: var(--um-orange); }
.um-dir__sumate-btn {
	flex: none; padding: 16px 32px; border-radius: 999px; font-size: 14px; font-weight: 700;
	letter-spacing: .08em; background: var(--um-orange); color: var(--um-cream); transition: transform .2s;
}
.um-dir__sumate-btn:hover { transform: translateY(-2px); }

@media (min-width: 768px) {
	.um-dir__hero { padding: 64px 56px 48px; }
	.um-dir__tools { padding-left: 56px; padding-right: 56px; }
	.um-dir__results,
	.um-dir__sumate { padding-left: 56px; padding-right: 56px; }
	.um-dir__searchbar { max-width: 520px; }
	.um-dir__tools-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.um-directorio-block .fade-up { opacity: 1; transform: none; transition: none; }
}