/* SnapHub studio list.
 * Single source of truth for base, responsive, and page-specific interaction styles.
 */

/* ==========================================================================
   Base
   ========================================================================== */

.page-studio-list.theme--pink {
	--page-header-bg: transparent;
	--studio-list-bg: linear-gradient(180deg,var(--primary-hero) 0,#fff 244px) no-repeat,
		#fff;
}

.page-studio-list.theme--white {
	--studio-list-bg: #fff;
}

.page-studio-list {
	color: var(--ink);
	background: var(--studio-list-bg,#fff);
}

.fig-list {
	min-height: 0;
	padding-top: 80px;
	background: transparent;
}

.fig-list__head {
	padding-top: 34px;
}

.fig-list__head h1 {
	font-family: var(--font-display);
	font-size: 48px;
	line-height: 60px;
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
}

.fig-list__head .fig-list__brand-highlight {
	margin: 0;
	padding: 3px 6px;
	border: 0;
	background: var(--primary);
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.fig-search {
	display: grid;
	grid-template-columns: 343px 309px 309px 309px 124px;
	align-items: center;
	width: calc(100% - 2px);
	height: 96px;
	margin: 30px 0 0;
	border: 2px solid var(--primary);
	border-radius: 48px;
	background: #fff;
	box-sizing: border-box;
}

.fig-search>button[data-filter],
.fig-search>label {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 34px;
}

.fig-search>button[data-filter] {
	justify-content: flex-start;
	gap: 16px;
	padding: 0 34px 0 48px;
	color: #222;
	font-size: 20px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: -1px;
}

.fig-search>button[data-filter="district"],
.fig-search>button[data-filter="type"],
.fig-search>button[data-filter="budget"] {
	padding-left: 34px;
}

.fig-search>button[data-filter]::after,
.fig-search>label::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 34px;
	background: var(--primary);
}

.fig-search>label::after {
	display: none;
}

.fig-search__chevron {
	display: block;
	width: 13px;
	height: 9px;
	flex: 0 0 13px;
	background: var(--primary);
	-webkit-mask: url("../svg/common/icon-chevron-down-hero.svg") center / 13px 9px no-repeat;
	mask: url("../svg/common/icon-chevron-down-hero.svg") center / 13px 9px no-repeat;
}

.fig-search>label {
	padding: 0 30px 0 34px;
}

.fig-search input {
	width: 100%;
	min-width: 0;
	height: 34px;
	border: 0;
	outline: 0;
	color: #222;
	background: transparent;
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: -1px;
}

.fig-search input::placeholder {
	color: #444;
	opacity: 1;
}

/* Keyword is a direct-entry field, so keep it visually distinct from select-type filters. */
.fig-search > label.fig-search__keyword-field {
	cursor: text;
}

.fig-search > label.fig-search__keyword-field input {
	color: #333;
	font-weight: 500;
	letter-spacing: -.4px;
	caret-color: var(--primary);
}

.fig-search > label.fig-search__keyword-field input::placeholder {
	color: #888;
	font-weight: 400;
	letter-spacing: -.4px;
	opacity: 1;
}

.fig-search__submit {
	width: 95px;
	height: 50px;
	justify-self: start;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.fig-search__icon {
	width: 20px;
	height: 20px;
	overflow: visible;
}

.fig-search__submit-text {
	display: none;
}

.fig-list__results {
	display: flex;
	flex-direction: column;
	padding-top: 31px;
	padding-bottom: 55px;
}

.fig-result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 71px;
	padding-bottom: 24px;
	border-bottom: 1px solid #ededed;
	box-sizing: border-box;
}

.fig-result-head h2 {
	position: relative;
	top: 0;
	margin-left: 0;
	color: var(--ink);
	font-size: 20px;
	line-height: 21px;
	font-weight: 600;
	letter-spacing: 0;
}

.fig-result-head h2 strong {
	color: var(--primary);
	font-weight: 600;
	letter-spacing: 0;
}

.fig-sort {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border-radius: 999px;
	background: var(--primary-surface);
}

.fig-sort > button[data-sort] {
	min-width: 64px;
	height: 36px;
	padding-inline: 14px;
	border-radius: 999px;
	color: #555;
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	letter-spacing: 0;
}

.fig-sort > button[data-sort].is-active {
	border: 1px solid var(--primary-border);
	background: #fff;
	color: var(--primary);
}

.fig-card-grid {
	display: grid;
	grid-template-columns: repeat(3,438px);
	column-gap: 42px;
	row-gap: 57px;
	width: calc(100% - 2px);
	margin-top: 40px;
}

.search-card {
	min-width: 0;
	width: 438px;
}

.search-card__media {
	position: relative;
	width: 438px;
	height: 300px;
	overflow: hidden;
	border-radius: 20px;
	background-color: #f4f4f4;
	isolation: isolate;
}

.search-card__media-link,
.search-card__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.search-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .45s ease;
}

.search-card__media::after {
	content: none;
	position: absolute;
	z-index: 1;
	inset: auto 0 0;
	height: 42%;
	background: linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.1) 30%,rgba(0,0,0,.72) 100%);
	pointer-events: none;
}

.search-card__badges {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.search-card__badge {
	min-width: 52px;
	height: 24px;
	padding-inline: 11px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: 12px;
	font-weight: 750;
}

.search-card__badge--new {
	background: #fff;
	color: var(--primary);
}

.search-card__badge--popular {
	background: var(--primary);
	color: #fff;
}

.search-card__body {
	padding-top: 16px;
}

.search-card__meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.search-card__tags {
	display: flex;
	gap: 7px;
	min-width: 0;
}

.search-card__location {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	color: #222;
	font-size: 16px;
	line-height: 19px;
	font-weight: 400;
	letter-spacing: -.8px;
	white-space: nowrap;
}

.search-card__location-icon {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;

	display: block;
	background: currentColor;
	-webkit-mask: url("../svg/common/icon-location-compass.svg") center / contain no-repeat;
	mask: url("../svg/common/icon-location-compass.svg") center / contain no-repeat;
}

.search-card__title-row {
	display: grid;
	grid-template-columns: 48px minmax(0,1fr) auto;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}

.search-card__avatar {
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 50%;
}

.search-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.search-card h2 {
	min-width: 0;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: 0;
}

.search-card h2 a {
	display: block;
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-card__description {
	overflow: hidden;
	margin-top: 10px;
	color: var(--text-tertiary);
	font-size: 16px;
	line-height: 19px;
	letter-spacing: -.8px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-card__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-top: 10px;
}

.search-card__price strong {
	font-size: 24px;
	line-height: 29px;
	font-weight: 700;
	letter-spacing: 0;
}

.search-card__price span {
	color: var(--text-disabled);
	font-size: 16px;
	line-height: 19px;
	font-weight: 500;
}

.fig-empty {
	order: 2;
	display: flex;
	width: 100%;
	height: 160px;
	margin-top: 49px;
	border-radius: 20px;
	background: var(--primary-surface);
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--primary-soft);
	font-size: 16px;
}

.fig-empty__icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background: url("../svg/common/icon-list-empty.svg") center / contain no-repeat;
}

.fig-empty[hidden] {
	display: none;
}

.fig-pagination {
	order: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 47px;
}

.fig-pagination a,
.fig-pagination button {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #6f6f6f;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.fig-pagination svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.fig-pagination a.is-current {
	background: #f59fa3;
	color: #fff;
	font-weight: 800;
}

.fig-pagination button:disabled {
	opacity: 1;
	color: #d5d5d5;
}

@media (hover: hover) and (pointer: fine) {
	.search-card:hover .search-card__image {
		transform: scale(1.025);
	}
}

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

	.search-card:hover .search-card__image {
		transform: none;
	}
}

.search-card__avatar picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Dynamic list state: semantic hidden attribute controls pagination visibility. */
.fig-pagination[hidden] {
	display: none;
}

/* List title stays inline by default; phone layout overrides the studio line. */
.page-studio-list .fig-list__title-with,
.page-studio-list .fig-list__title-studio {
	display: inline;
}

/* Infinite list state */
.fig-list-sentinel {
	order: 2;
	width: 100%;
	height: 1px;
	margin-top: 8px;
	pointer-events: none;
}

.fig-list-sentinel[hidden],
.fig-list-loading[hidden] {
	display: none;
}

/* Reusable branded async loader: viewport-centered, non-blocking and visually light. */
.fig-list-loading {
	position: fixed;
	z-index: 1100;
	inset: 0;
	padding: 20px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	background: rgba(255,255,255,.34);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, visibility 0s linear .18s;
}

.fig-list-loading.is-visible {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.fig-list-loading__stage {
	position: relative;
	width: 176px;
	height: 116px;
	display: block;
	overflow: hidden;
	border: 1px solid rgba(255,125,125,.14);
	border-radius: 26px;
	background: rgba(255,255,255,.88);
	box-shadow: 0 18px 48px rgba(42,33,33,.12), 0 4px 16px rgba(255,125,125,.09);
}

.fig-list-loading__brand {
	position: absolute;
	left: 17px;
	top: 15px;
	width: 68px;
	height: auto;
	display: block;
	animation: fig-list-brand-pulse 2.20s ease-in-out infinite;
}

.fig-list-loading__camera {
	position: absolute;
	left: 50%;
	top: 56%;
	width: 48px;
	height: 38px;
	display: block;
	transform: translate(-50%,-50%);
	animation: fig-list-camera-float 2.20s ease-in-out infinite;
}

.fig-list-loading__camera-body {
	position: absolute;
	left: 3px;
	bottom: 2px;
	width: 42px;
	height: 29px;
	border: 2px solid var(--primary);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(255,125,125,.12);
	box-sizing: border-box;
}

.fig-list-loading__camera-top {
	position: absolute;
	left: 11px;
	top: 2px;
	width: 14px;
	height: 9px;
	border: 2px solid var(--primary);
	border-bottom: 0;
	border-radius: 5px 5px 2px 2px;
	background: var(--primary-surface);
	box-sizing: border-box;
}

.fig-list-loading__lens {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 19px;
	height: 19px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	background: var(--primary-surface);
	transform: translate(-50%,-50%);
	animation: fig-list-camera-focus 2.20s ease-in-out infinite;
	box-sizing: border-box;
}

.fig-list-loading__lens-core {
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--primary);
	opacity: .64;
	animation: fig-list-camera-lens-pulse 2.20s ease-in-out infinite;
}

.fig-list-loading__shutter {
	position: absolute;
	right: 3px;
	top: 4px;
	width: 5px;
	height: 3px;
	border-radius: 99px;
	background: var(--primary);
	transform-origin: center bottom;
	animation: fig-list-camera-shutter 2.20s ease-in-out infinite;
}

.fig-list-loading__flash {
	position: absolute;
	right: -5px;
	top: -4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--primary-surface);
	opacity: 0;
	transform: scale(.4);
	box-shadow: 0 0 0 5px rgba(255,125,125,.08);
	animation: fig-list-camera-flash 2.20s ease-out infinite;
}

.fig-list-loading__shutter-dots {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 28px;
	height: 8px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
}

.fig-list-loading__shutter-dot {
	width: 4px;
	height: 4px;
	flex: 0 0 4px;
	display: block;
	border-radius: 50%;
	opacity: 0;
	transform: scale(.45);
	transform-origin: center;
	box-shadow: 0 0 0 rgba(255,85,85,0);
}

.fig-list-loading__shutter-dot:nth-child(1) {
	animation: fig-list-shutter-dot-first 2.20s ease-out infinite;
}

.fig-list-loading__shutter-dot:nth-child(2) {
	animation: fig-list-shutter-dot-second 2.20s ease-out infinite;
}

.fig-list-loading__shutter-dot:nth-child(3) {
	animation: fig-list-shutter-dot-third 2.20s ease-out infinite;
}

.fig-list-loading__shutter-dot--red {
	background: var(--primary);
}

.fig-list-loading__shutter-dot--black {
	background: #1f1f1f;
}

@keyframes fig-list-camera-float {
	0%,100% { transform: translate(-50%,calc(-50% + 1px)); }
	45% { transform: translate(-50%,calc(-50% - 2px)); }
	58% { transform: translate(-50%,-50%); }
}

@keyframes fig-list-camera-focus {
	0%,34%,100% { transform: translate(-50%,-50%) scale(1); }
	46% { transform: translate(-50%,-50%) scale(.88); }
	58% { transform: translate(-50%,-50%) scale(1.04); }
}

@keyframes fig-list-camera-lens-pulse {
	0%,34%,100% { opacity: .58; transform: scale(.92); }
	46% { opacity: .9; transform: scale(.72); }
	60% { opacity: .66; transform: scale(1); }
}

@keyframes fig-list-camera-shutter {
	0%,3%,8%,32%,40%,63%,71%,100% {
		transform: translateY(0) scaleY(1);
		background: var(--primary);
	}
	5% {
		transform: translateY(1px) scaleY(.45);
		background: var(--primary);
	}
	36% {
		transform: translateY(1px) scaleY(.45);
		background: #1f1f1f;
	}
	67% {
		transform: translateY(1px) scaleY(.45);
		background: var(--primary);
	}
}

@keyframes fig-list-camera-flash {
	0%,3%,8%,34%,39%,65%,70%,100% {
		opacity: 0;
		transform: scale(.4);
		background: transparent;
		box-shadow: none;
	}
	5% {
		opacity: .9;
		transform: scale(1);
		background: rgba(255,85,85,.22);
		box-shadow: 0 0 0 5px rgba(255,85,85,.10);
	}
	36% {
		opacity: .82;
		transform: scale(.96);
		background: rgba(31,31,31,.16);
		box-shadow: 0 0 0 5px rgba(31,31,31,.07);
	}
	67% {
		opacity: .9;
		transform: scale(1);
		background: rgba(255,85,85,.22);
		box-shadow: 0 0 0 5px rgba(255,85,85,.10);
	}
	8%,39%,70% {
		opacity: 0;
		transform: scale(1.65);
	}
}

@keyframes fig-list-brand-pulse {
	0%,42%,100% { opacity: .88; }
	47% { opacity: 1; }
	58% { opacity: .92; }
}

@keyframes fig-list-shutter-dot-first {
	0%,3% { opacity: 0; transform: scale(.45); box-shadow: 0 0 0 rgba(255,85,85,0); }
	5% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 4px rgba(255,85,85,.10); }
	10%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 rgba(255,85,85,0); }
}

@keyframes fig-list-shutter-dot-second {
	0%,34% { opacity: 0; transform: scale(.45); box-shadow: 0 0 0 rgba(31,31,31,0); }
	36% { opacity: 1; transform: scale(1.30); box-shadow: 0 0 0 4px rgba(31,31,31,.08); }
	41%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 rgba(31,31,31,0); }
}

@keyframes fig-list-shutter-dot-third {
	0%,65% { opacity: 0; transform: scale(.45); box-shadow: 0 0 0 rgba(255,85,85,0); }
	67% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 4px rgba(255,85,85,.10); }
	72%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 rgba(255,85,85,0); }
}

@media (prefers-reduced-motion: reduce) {
	.fig-list-loading {
		transition: none;
	}

	.fig-list-loading__brand,
	.fig-list-loading__camera,
	.fig-list-loading__lens,
	.fig-list-loading__lens-core,
	.fig-list-loading__shutter,
	.fig-list-loading__flash,
	.fig-list-loading__shutter-dots,
	.fig-list-loading__shutter-dot {
		animation: none;
	}

	.fig-list-loading__shutter-dot {
		opacity: 1;
		transform: none;
		box-shadow: none;
	}

	.fig-list-loading__flash {
		display: none;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1599px) and (min-width: 1025px) {
	.fig-card-grid {
		grid-template-columns: repeat(3,minmax(0,1fr));
		column-gap: clamp(24px,3vw,42px);
		width: 100%;
	}

	.search-card,
	.search-card__media {
		width: 100%;
	}

	.search-card__media {
		height: auto;
		aspect-ratio: 438/300;
	}

	.fig-search {
		grid-template-columns: repeat(4,minmax(0,1fr)) 124px;
		width: 100%;
	}

	.fig-search>button[data-filter] {
		padding-left: clamp(24px,3vw,48px);
		padding-right: clamp(18px,2.2vw,34px);
	}
}

@media (max-width: 1024px) {
	.page-studio-list.theme--pink {
		--studio-list-bg: linear-gradient(180deg,#ffe8e8 0,#fff 332px) no-repeat,
			#fff;
	}

	.fig-list {
		padding-top: 0;
		background: transparent;
	}

	.fig-list__head {
		padding: 16px 14px 0;
	}

	.fig-list__head h1 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		column-gap: 8px;
		row-gap: 4px;

		margin-inline: auto;
		font-family: var(--font-display);
		font-size: 28px;
		line-height: 32px;
		font-weight: 700;
		letter-spacing: 0;
		text-align: center;
	}

	.fig-list__head .fig-list__brand-highlight {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 8px 3px;
		text-align: center;
	}

	.fig-search {
		display: flex;
		width: auto;
		height: 52px;
		margin: 34px 0 0;
		padding: 0 8px 0 18px;
		border-width: 1.5px;
		border-radius: 999px;
	}

	.fig-search>button[data-filter=region] {
		display: flex;
		flex: 1;
		height: 48px;
		padding: 0;
		border: 0;
		color: #444;
		font-size: 14px;
		justify-content: flex-start;
	}

	.fig-search>button[data-filter=region]::after {
		display: none;
	}

	.fig-search>button[data-filter=region] > span:not(.fig-search__mobile-summary),
	.fig-search>button[data-filter=region] .fig-search__chevron {
		display: none;
	}

	.fig-search>button[data-filter=district],
	.fig-search>button[data-filter=type],
	.fig-search>button[data-filter=budget],
	.fig-search>label {
		display: none;
	}

	.fig-search__submit {
		width: 34px;
		height: 34px;
		margin-left: auto;
	}

	.fig-search__icon {
		width: 18px;
		height: 18px;
	}

	.fig-list__results {
		padding: 14px 0 0;
	}

	.fig-result-head {
		width: calc(100% - 26px);
		height: 45px;
		margin-inline: 13px;
		padding: 0 0 14px;
		border-bottom: 1px solid #eee;
	}

	.fig-result-head h2 {
		top: 0;
		margin-left: 0;
		font-size: 16px;
		line-height: 21px;
		font-weight: 600;
		letter-spacing: 0;
	}

	.fig-result-head h2 strong {
		font-size: inherit;
		line-height: inherit;
		font-weight: 600;
		letter-spacing: 0;
	}

	.fig-card-grid {
		margin-top: 20px;
	}

	.search-card__media {
		border-radius: 20px;
	}

	.search-card__badges {
		top: 19px;
		left: 21px;
	}

	.search-card__badge {
		height: 25px;
		min-width: 52px;
	}

	.search-card__badge--new {
		min-width: 59px;
	}

	.search-card__body {
		padding-top: 16px;
	}

	.search-card__tags {
		gap: 6px;
	}

	.search-card__meta-row {
		min-height: 22px;
		align-items: center;
	}

	.search-card__location {
		font-size: 14px;
		line-height: 17px;
		font-weight: 400;
		letter-spacing: -.7px;
		gap: 6px;
	}

	.search-card__location-icon {
		width: 22px;
		height: 20px;
		flex-basis: 22px;
	}

	.search-card__title-row {
		grid-template-columns: 32px minmax(0,1fr) auto;
		min-height: 32px;
		gap: 10px;
		margin-top: 10px;
	}

	.search-card__avatar {
		width: 32px;
		height: 32px;
	}

	.search-card h2 {
		font-size: 18px;
		line-height: 21px;
		font-weight: 700;
		letter-spacing: 0;
	}

	.search-card__description {
		margin-top: 10px;
		font-size: 14px;
		line-height: 17px;
		letter-spacing: -.7px;
	}

	.search-card__price {
		margin-top: 10px;
	}

	.search-card__price strong {
		font-size: 20px;
		line-height: 24px;
		font-weight: 700;
	}

	.search-card__price span {
		font-size: 14px;
		line-height: 17px;
		font-weight: 500;
	}

	.fig-pagination {
		order: 2;
		gap: 8px;
		margin-top: 38px;
		flex-wrap: wrap;
	}

	.fig-pagination a,
	.fig-pagination button {
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	.fig-pagination svg {
		width: 13px;
		height: 13px;
	}

	.fig-empty {
		order: 3;
		width: calc(100% - 28px);
		height: 160px;
		margin: 25px 14px 0;
		border-radius: 10px;
		font-size: 14px;
	}

	.fig-empty__icon {
		width: 22px;
		height: 22px;
	}
}





@media (max-width: 359px) {
	.fig-list__head h1 {
		font-size: 27px;
		line-height: 31px;
		letter-spacing: 0;
	}

	.fig-search {
		margin-top: 25px;
	}

	.search-card__location {
		font-size: 11px;
	}

}

/*
 * Figma PC fidelity — SNAPHUB_목록 (260:1287)
 * Apply only when the 1400px Figma content frame fits without fluid compression.
 * The <=1024px list interaction rules above remain unchanged.
 */
@media (min-width: 1448px) {

	.fig-list__head {
		padding-top: 34px;
	}

	.fig-list__head h1 {
		display: flex;
		align-items: flex-start;
		gap: 9px;
		width: 843px;
		height: 61px;
		margin: 0 0 0 258px;
		font-family: var(--font-display);
		font-size: 48px;
		line-height: 60px;
		font-weight: 700;
		letter-spacing: 0;
		text-align: left;
		white-space: nowrap;
	}

	.fig-list__title-copy {
		display: block;
		width: 627px;
		height: 60px;
		flex: 0 0 627px;
		color: var(--ink);
		font: inherit;
		line-height: 60px;
		white-space: nowrap;
	}

	.fig-search {
		grid-template-columns: 346px 309px 309px 309px 127px;
		width: 1400px;
		height: 98px;
		margin-top: 28px;
		border-width: 2px;
		border-radius: 100px;
	}

	.fig-search>button[data-filter],
	.fig-search>label {
		height: 33px;
	}

	.fig-search>button[data-filter] {
		gap: 16px;
		padding: 0 30px;
		color: var(--ink);
		font-size: 20px;
		line-height: 20px;
		font-weight: 600;
		letter-spacing: -1px;
	}

	.fig-search>button[data-filter="region"] {
		padding-left: 67px;
	}

	.fig-search>button[data-filter="district"],
	.fig-search>button[data-filter="type"],
	.fig-search>button[data-filter="budget"] {
		padding-left: 30px;
	}

	.fig-search>button[data-filter]::after {
		height: 33px;
		background: var(--primary);
	}

	.fig-search>label {
		padding: 0 30px;
	}

	.fig-search input {
		height: 24px;
		color: var(--ink);
		font-family: var(--font-body);
		font-size: 20px;
		line-height: 20px;
		font-weight: 600;
		letter-spacing: -1px;
	}

	.fig-search input::placeholder {
		color: var(--ink);
	}

	.fig-search__chevron {
		width: 13px;
		height: 9px;
		flex-basis: 13px;
	}

	.fig-search__submit {
		width: 95px;
		height: 50px;
		justify-self: start;
		border-radius: 50px;
	}

	.fig-list__results {
		padding-top: 32px;
	}

	.fig-result-head {
		height: 70px;
		padding: 0 0 20px;
		border-bottom-color: #f2f2f2;
	}

	.fig-result-head h2 {
		top: 0;
		margin-left: 8px;
		font-size: 20px;
		line-height: 21px;
		font-weight: 600;
		letter-spacing: 0;
	}

	.fig-result-head h2 strong {
		font-size: 20px;
		line-height: 21px;
		font-weight: 600;
		letter-spacing: 0;
	}

	.fig-sort {
		box-sizing: border-box;
		display: inline-flex;
		width: fit-content;
		height: 49px;
		flex: 0 0 auto;
		margin-right: 3px;
		gap: 7px;
		padding: 8px 10px;
		border-radius: 50px;
		background: var(--primary-surface);
	}

	.fig-sort > button[data-sort] {
		box-sizing: border-box;
		width: auto;
		min-width: 64px;
		height: 33px;
		padding: 0 14px;
		border-radius: 50px;
		color: #555;
		font-size: 14px;
		line-height: 21px;
		font-weight: 400;
		letter-spacing: 0;
	}

	.fig-sort > button[data-sort].is-active {
		border: 1px solid var(--primary);
		background: #fff;
		color: var(--primary);
	}

	.fig-card-grid {
		grid-template-columns: repeat(3,438px);
		column-gap: 42.0574px;
		row-gap: 62px;
		width: 1400px;
		margin-top: 40px;
		margin-left: 2px;
	}

	.search-card {
		width: 438px;
	}

	.search-card__media {
		width: 438px;
		height: 300px;
		aspect-ratio: auto;
	}

	.search-card__media::after {
		height: 151.3698px;
		background: linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);
	}

	.search-card__badges {
		top: 22.5px;
		left: 30px;
	}

	.search-card__badge {
		min-width: 52px;
		height: 23.4375px;
		padding: 0 10px;
		font-size: 14px;
		line-height: 17px;
		font-weight: 700;
		letter-spacing: -.7px;
	}

	.search-card__body {
		padding-top: 16px;
	}

	.search-card__tags {
		gap: 6px;
	}

	.search-card__location {
		gap: 3px;
		color: var(--ink);
		font-size: 16px;
		line-height: 19px;
		font-weight: 400;
		letter-spacing: -.8px;
	}

	.search-card__location-icon {
		width: 24px;
		height: 24px;
		flex-basis: 24px;
	}

	.search-card__title-row {
		grid-template-columns: 48px minmax(0,1fr) auto;
		gap: 18px;
		margin-top: 10px;
	}

	.search-card__avatar {
		width: 48px;
		height: 48px;
	}

	.search-card h2 {
		font-size: 20px;
		line-height: 24px;
		font-weight: 700;
		letter-spacing: 0;
	}

	.search-card__description {
		margin-top: 10px;
		color: var(--text-secondary);
		font-size: 16px;
		line-height: 19px;
		font-weight: 400;
		letter-spacing: -.8px;
	}

	.search-card__price {
		gap: 4px;
		margin-top: 10px;
	}

	.search-card__price strong {
		font-size: 24px;
		line-height: 29px;
		font-weight: 700;
		letter-spacing: 0;
	}

	.search-card__price span {
		color: var(--text-disabled);
		font-size: 16px;
		line-height: 19px;
		font-weight: 500;
		letter-spacing: 0;
	}
	.fig-empty {
		height: 160px;
		margin-top: 55px;
		border-radius: 20px;
		background: var(--primary-surface);
		color: var(--primary-border);
		font-size: 20px;
		line-height: 20px;
		font-weight: 700;
		letter-spacing: 0;
		gap: 10px;
	}

	.fig-empty__icon {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
	}

	.fig-pagination {
		gap: 14px;
		margin-top: 47px;
	}

	.fig-pagination a,
	.fig-pagination button {
		width: 40px;
		height: 40px;
		color: #6f6f6f;
		font-size: 16px;
		line-height: 19px;
		font-weight: 500;
	}

	.fig-pagination svg {
		width: 14px;
		height: 14px;
		stroke-width: 1.6;
	}

	.fig-pagination a.is-current {
		background: #f59fa3;
		color: #fff;
		font-weight: 800;
	}

	.fig-pagination button:disabled {
		opacity: 1;
		color: #d5d5d5;
	}

}

/* ==========================================================================
	 Studio list mobile geometry — Figma SANPHUB_MO 400x2367
	 Source-verified mobile geometry. The approved mobile composition is used unchanged through 1024px, including tablets.
	 ========================================================================== */
@media (max-width: 1024px) {
	.page-studio-list {
		--studio-list-phone-gutter: 14px;
		--studio-list-phone-rail: 620px;
	}

	/* One phone content rail owns search, result header, and cards.
	   This removes duplicated width/margin calculations that can round
	   differently on narrow viewports and high-DPR devices. */
	.page-studio-list .fig-list__head,
	.page-studio-list .fig-list__results {
		box-sizing: border-box;
		width: min(
			var(--studio-list-phone-rail),
			calc(100% - (var(--studio-list-phone-gutter) * 2))
		);
		margin-inline: auto;
	}

	.page-studio-list .fig-list__head {
		padding-inline: 0;
	}

	.page-studio-list .fig-list__results {
		padding-inline: 0;
	}

	.page-studio-list .fig-result-head,
	.page-studio-list .fig-card-grid,
	.page-studio-list .search-card,
	.page-studio-list .fig-empty {
		width: 100%;
		margin-inline: 0;
	}

	.fig-list__head {
		margin-top: 0;
	}

	.fig-list__head h1 {
		width: min(259px, 100%);
		max-width: 259px;
	}

	.fig-card-grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		width: 100%;
	}

	.search-card {
		width: 100%;
		height: auto;
		margin-inline: 0;
	}

	.search-card__media {
		width: 100%;
		height: auto;
		aspect-ratio: 372/232;
	}

	.search-card__image {
		object-fit: fill;
	}

	.search-card__media::after {
		height: 50%;
		background: linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.08) 22%,rgba(0,0,0,.74) 100%);
	}

	/* Figma title: "스냅허브 와 함께" / "스튜디오를 찾아봐요!" */
	.page-studio-list .fig-list__head h1 {
		display: block;

		margin-inline: auto;
		text-align: center;
	}

	.page-studio-list .fig-list__head .fig-list__brand-highlight,
	.page-studio-list .fig-list__title-copy {
		display: inline;
		width: auto;
		height: auto;
		white-space: normal;
	}

	.page-studio-list .fig-list__head .fig-list__brand-highlight {
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
	}

	/* Source: rect x14.5 y211.5 w371 h51 + 1px var(--primary) stroke. */
	.page-studio-list .fig-search {
		height: 52px;

		border-width: 1px;
	}

	.page-studio-list .fig-search__submit {
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
	}

	/* Source: sort x298 y277 w87 h33; divider y321.5 #F2F2F2. */
	.page-studio-list .fig-result-head {
		border-bottom-color: #f2f2f2;
	}

	/* Source card: 372x373, media 372x232. Body starts at y248 (16px gap) and keeps 10px content steps. */
	.page-studio-list .search-card__image {
		object-fit: cover;
		object-position: center;
	}

	/* Source overlay: y456..573 = 117px, transparent -> #000. */
	.page-studio-list .search-card__media::after {
		height: 117px;
		background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
	}

	/* Studio tags use the shared component; this block owns only list spacing. */
	.page-studio-list .search-card__tags {
		gap: 5px;
	}

	/* Source favorite component: clip x331.518 y189, 26.2588x24 inside the 372x232 media.
		 Keep the 36px touch target, but render the Figma icon at its exported visual size. */

	/* Match the original compact glyph scale rather than desktop icon sizing. */
	.page-studio-list .search-card__location-icon {
		width: 18px;
		height: 18px;
		flex-basis: 18px;
	}

	/* Source current page: rect x142 y1547 w32 h32. */
	.page-studio-list .fig-pagination {
		position: relative;
		left: -2px;
		gap: 8px;

	}

	.page-studio-list .fig-pagination a.is-current {
		background: var(--primary-border);

	}

	.page-studio-list .fig-pagination a:not(.is-current) {
		color: #3a3a3a;
	}

	.page-studio-list .fig-pagination button:not(:disabled) {
		color: #1f1f1f;
	}

	.page-studio-list .fig-pagination button:disabled {
		opacity: 1;
		color: var(--line-strong);
	}

	/* Source SVG: 259x78. First line centers the 123x38 brand mark with "와 함께"; second line follows after 8px. */
	.page-studio-list .fig-list__head h1 {
		width: min(259px, 100%);
		max-width: 259px;
		font-size: 28px;
		line-height: 32px;
		font-weight: 700;
	}

	.page-studio-list .fig-list__head .fig-list__brand-highlight,
	.page-studio-list .fig-list__title-copy,
	.page-studio-list .fig-list__title-with {
		display: inline;
	}

	.page-studio-list .fig-list__title-copy {
		width: auto;
		height: auto;
	}

	.page-studio-list .fig-list__title-studio {
		display: block;
		margin-top: 8px;
	}

	/* Keep the source vertical rhythm around the two-line title instead of compressing it. */
	.page-studio-list .fig-list__head {
		padding-top: 16px;
	}

	.page-studio-list .fig-search {
		margin-top: 21px;
	}

	/* Pagination source: 32px visual cells with source-sized glyphs/numerals. */
	.page-studio-list .fig-pagination a,
	.page-studio-list .fig-pagination button {
		width: 32px;
		height: 32px;
		font-size: 16px;
		line-height: 19px;
		font-weight: 500;
	}

	.page-studio-list .fig-pagination a.is-current {
		font-weight: 700;
	}

	.page-studio-list .fig-pagination svg {
		width: 16px;
		height: 16px;
		stroke-width: 1.7;
	}

	/* Remove list-only whitespace before the footer. */

	/* Figma mobile source: frame 123x38, text 112x32 at x=5/y=3. */
	.page-studio-list .fig-list__head .fig-list__brand-highlight {
		box-sizing: border-box;
		display: inline-flex;
		width: auto;
		height: auto;
		padding: 3px 6px 3px 5px;
		align-items: center;
		justify-content: center;
		line-height: 32px;
	}

	/* Search glyph uses the extracted Figma asset: visual bbox 14x14 inside 32x32 circle. */
	.page-studio-list .fig-search__icon {
		width: 14px;
		height: 14px;
		object-fit: contain;
	}

	/* Source gives 20px above the first card; custom request keeps clearer card-to-card breathing room. */
	.page-studio-list .fig-card-grid {
		margin-top: 20px;
		gap: 32px;
	}

	/* Keep pagination separated from the variable-height mobile cards. */
	.page-studio-list .fig-pagination {
		margin-top: 46px;
	}

	/* Infinite list: pagination is disabled, so keep only a compact card-to-footer gap. */
	.page-studio-list .site-footer {
		height: auto;
		min-height: 229px;
		margin-top: 36px;
	}

	.page-studio-list .site-footer__inner {
		height: auto;
		min-height: 229px;
	}

	.page-studio-list .footer-policy { top: 66px; }
	.page-studio-list .footer-notice { top: 91px; }
	.page-studio-list .mobile-footer-links { top: 138px; height: 38px; }
	.page-studio-list .copyright { bottom: 24px; }
	.page-studio-list .top-button.is-docked { top: 14px; right: 19px; }

	.page-studio-list .fig-search > button[data-filter=region] {
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 20px;
		font-weight: 500;
	}

	.page-studio-list .fig-search > button[data-filter=region] > .fig-search__mobile-summary {
		display: block;
		max-width: 100%;
		color: rgba(68,68,68,.9);
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 20px;
		font-weight: 500;
		letter-spacing: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

}

@media (min-width: 1600px) {
	/* PC source precision: divider y455 (2px), first card x261/y496. */
	.page-studio-list .fig-result-head {
		height: 69px;
		border-bottom-width: 2px;
	}

	.page-studio-list .fig-sort {
		align-self: flex-start;
		margin-right: 4px;
	}

	.page-studio-list .fig-card-grid {
		margin-left: 1px;
	}
}

/* ==========================================================================
	 Studio list phone controls — source-verified adjustments
	 Parent: 42b9254468113e33008575cb48ce14093c1a35fe0f984837e8e4d1b82174a336
	 ========================================================================== */

/* ==========================================================================
	 Studio list phone spacing — source comparison + practical flow
	 Parent: 0640f561460b621a8eec517eaa0043b1fd018dd923816a3e4838e721f4993477
	 ========================================================================== */
.fig-sort__mobile { display: none; }

/* Mobile search summary: real DOM state, matched to Figma 16/20 Medium. */
.fig-search__mobile-summary { display: none; }

/* ==========================================================================
	 Studio list responsive sort dropdown — SnapHub custom UI
	 PC keeps the existing segmented controls; <=1024px uses one accessible menu.
	 ========================================================================== */
@media (max-width: 1024px) {
	.page-studio-list .fig-sort {
		position: relative;
		z-index: 8;
		width: auto;
		height: 34px;
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 17px;
		background: transparent;
		overflow: visible;
	}

	.page-studio-list .fig-sort > button[data-sort] {
		display: none;
	}

	.page-studio-list .fig-sort__mobile {
		position: relative;
		display: inline-flex;
		width: auto;
		height: 34px;
	}

	.page-studio-list .fig-sort__mobile-trigger {
		position: relative;
		z-index: 2;
		width: auto;
		min-width: 87px;
		height: 34px;
		padding: 0 29px 0 15px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border: 1px solid var(--primary-border);
		border-radius: 17px;
		background: #fff;
		color: var(--primary);
		font-family: var(--font-body);
		font-size: 14px;
		line-height: 20px;
		font-weight: 600;
		letter-spacing: 0;
		white-space: nowrap;
		box-sizing: border-box;
	}

	.page-studio-list .fig-sort__mobile-trigger:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	.page-studio-list .fig-sort__mobile.is-open .fig-sort__mobile-trigger {
		border-color: var(--primary);
		background: #fff;
	}

	.page-studio-list .fig-sort__mobile-chevron {
		position: absolute;
		right: 14px;
		top: 50%;
		width: 7px;
		height: 7px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-68%) rotate(45deg);
		transform-origin: 60% 60%;
		transition: transform .18s ease;
		pointer-events: none;
	}

	.page-studio-list .fig-sort__mobile.is-open .fig-sort__mobile-chevron {
		transform: translateY(-25%) rotate(225deg);
	}

	.page-studio-list .fig-sort__mobile-menu {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		z-index: 12;
		width: 132px;
		padding: 6px;
		border: 1px solid rgba(255,125,125,.24);
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 12px 30px rgba(42,33,33,.14);
		box-sizing: border-box;
	}

	.page-studio-list .fig-sort__mobile-menu[hidden] {
		display: none;
	}

	.page-studio-list .fig-sort__mobile-list {
		display: grid;
		gap: 2px;
	}

	.page-studio-list .fig-sort__mobile-option {
		position: relative;
		width: 100%;
		min-width: 0;
		height: 40px;
		padding: 0 10px 0 32px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: #333;
		font-family: var(--font-body);
		font-size: 14px;
		line-height: 20px;
		font-weight: 500;
		text-align: left;
		box-sizing: border-box;
	}

	.page-studio-list .fig-sort__mobile-option::before {
		content: "";
		position: absolute;
		left: 12px;
		top: 50%;
		width: 8px;
		height: 4px;
		border-left: 1.5px solid transparent;
		border-bottom: 1.5px solid transparent;
		transform: translateY(-65%) rotate(-45deg);
	}

	.page-studio-list .fig-sort__mobile-option:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: -2px;
		background: #fff7f7;
		color: var(--primary);
	}

	@media (hover: hover) and (pointer: fine) {
		.page-studio-list .fig-sort__mobile-option:hover {
			background: #fff7f7;
			color: var(--primary);
		}
	}

	.page-studio-list .fig-sort__mobile-option.is-selected {
		background: var(--primary-surface);
		color: var(--primary);
		font-weight: 700;
	}

	.page-studio-list .fig-sort__mobile-option.is-selected::before {
		border-left-color: currentColor;
		border-bottom-color: currentColor;
	}

	.page-studio-list .fig-list-sentinel {
		margin-top: 6px;
	}

	.page-studio-list .fig-list-loading {
		padding: 16px;
		background: rgba(255,255,255,.3);
		-webkit-backdrop-filter: blur(1.5px);
		backdrop-filter: blur(1.5px);
	}

	.page-studio-list .fig-list-loading__stage {
		width: 148px;
		height: 98px;
		border-radius: 22px;
	}

	.page-studio-list .fig-list-loading__brand {
		left: 14px;
		top: 13px;
		width: 58px;
	}

	.page-studio-list .fig-list-loading__camera {
		top: 57%;
	}

}

@media (prefers-reduced-motion: reduce) {
	.page-studio-list .fig-sort__mobile-chevron {
		transition: none;
	}
}

/* ==========================================================================
   Card and interaction UI
   ========================================================================== */

[data-page-variant="studio-list"] .search-card__title-row {
	grid-template-columns: 48px minmax(0, 1fr) auto;
}

[data-page-variant="studio-list"] .search-card__favorite {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	align-self: center;
	flex: 0 0 auto;
	gap: 4px;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--primary);
	font: 700 16px/19px var(--font-body);
	letter-spacing: -.8px;
	white-space: nowrap;
	cursor: pointer;
}

[data-page-variant="studio-list"] .favorite-inline::before {
	content: none;
}

[data-page-variant="studio-list"] .favorite-inline__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	transform-origin: center;
	will-change: transform;
	line-height: 1;
	transition: transform .16s var(--ease-out);
}

[data-page-variant="studio-list"] .favorite-inline__icon--on {
	display: none;
}

[data-page-variant="studio-list"] .favorite-inline[aria-pressed="true"] .favorite-inline__icon--off {
	display: none;
}

[data-page-variant="studio-list"] .favorite-inline[aria-pressed="true"] .favorite-inline__icon--on {
	display: inline-flex;
}

[data-page-variant="studio-list"] .favorite-inline [data-role="favorite-count-value"] {
	font-style: normal;
	font-variant-numeric: tabular-nums;
}

[data-page-variant="studio-list"] .favorite-inline__icon--on::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.75em;
	height: 1.75em;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.42);
}

[data-page-variant="studio-list"] .favorite-inline.is-favorite-adding .favorite-inline__icon--on {
	animation: snaphub-list-heart-jelly .38s cubic-bezier(.22, .9, .32, 1);
}

[data-page-variant="studio-list"] .favorite-inline.is-favorite-adding .favorite-inline__icon--on::after {
	animation: snaphub-list-heart-ring .30s ease-out;
}

[data-page-variant="studio-list"] .favorite-inline.is-favorite-removing .favorite-inline__icon--off {
	animation: snaphub-list-heart-release .22s var(--ease-out);
}

[data-page-variant="studio-list"] .favorite-inline.is-count-updating [data-role="favorite-count-value"]:not([hidden]) {
	animation: snaphub-list-favorite-count .30s var(--ease-out);
}

[data-page-variant="studio-list"] .favorite-inline:active .favorite-inline__icon {
	transform: scale(.82);
	transition-duration: .08s;
}

[data-page-variant="studio-list"] .search-card__price-row {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}

[data-page-variant="studio-list"] .search-card__price-row .search-card__price {
	min-width: 0;
	margin-top: 0;
}

[data-page-variant="studio-list"] .search-card__price--empty {
	align-items: center;
}

[data-page-variant="studio-list"] .search-card__price > .search-card__price-empty {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

[data-page-variant="studio-list"] .search-card__managed {
	flex: 0 0 auto;
	gap: 4px;
}

[data-page-variant="studio-list"] .search-card__managed-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
	[data-page-variant="studio-list"] .favorite-inline:not(.is-favorite-adding):not(.is-favorite-removing):hover .favorite-inline__icon--off,
	[data-page-variant="studio-list"] .favorite-inline[aria-pressed="true"]:not(.is-favorite-adding):not(.is-favorite-removing):hover .favorite-inline__icon--on {
		transform: scale(1.08);
	}
}

/* The list's first trigger already sits on the search field's left boundary.
 * Unlike the main hero, it needs no internal-controls compensation. */
@media (min-width: 1025px) {
	[data-page-variant="studio-list"]
	.desktop-filter-layer[data-filter-key="region"]
	.desktop-filter-layer__panel,
	[data-page-variant="studio-list"]
	.desktop-filter-layer[data-filter-key="district"][data-anchor-filter-key="region"]
	.desktop-filter-layer__panel {
		left: clamp(20px, var(--layer-left), calc(100vw - 380px));
	}
}

@keyframes snaphub-list-heart-jelly {
	0% { transform: scale(1); }
	18% { transform: scale(.78); }
	42% { transform: scale(1.22); }
	64% { transform: scale(.93); }
	82% { transform: scale(1.07); }
	100% { transform: scale(1); }
}

@keyframes snaphub-list-heart-ring {
	0% { opacity: .52; transform: translate(-50%, -50%) scale(.42); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes snaphub-list-heart-release {
	0% { transform: scale(1); }
	45% { transform: scale(.84); }
	100% { transform: scale(1); }
}

@keyframes snaphub-list-favorite-count {
	0% { opacity: 1; transform: translateY(0); }
	45% { opacity: .68; transform: translateY(-3px); }
	100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
	[data-page-variant="studio-list"] .search-card__title-row {
		grid-template-columns: 32px minmax(0, 1fr) auto;
	}

	[data-page-variant="studio-list"] .search-card__favorite {
		font-size: 14px;
		line-height: 17px;
		letter-spacing: -.7px;
	}

	[data-page-variant="studio-list"] .search-card__price > .search-card__price-empty {
		font-size: 14px;
		line-height: 17px;
	}
}

@media (max-width: 359px) {
	[data-page-variant="studio-list"] .search-card__favorite {
		font-size: 13px;
		letter-spacing: -.5px;
	}

	[data-page-variant="studio-list"] .search-card__price-row {
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-page-variant="studio-list"] .favorite-inline__icon,
	[data-page-variant="studio-list"] .favorite-inline [data-role="favorite-count-value"] {
		transition: none;
	}

	[data-page-variant="studio-list"] .favorite-inline.is-favorite-adding .favorite-inline__icon--on,
	[data-page-variant="studio-list"] .favorite-inline.is-favorite-adding .favorite-inline__icon--on::after,
	[data-page-variant="studio-list"] .favorite-inline.is-favorite-removing .favorite-inline__icon--off,
	[data-page-variant="studio-list"] .favorite-inline.is-count-updating [data-role="favorite-count-value"] {
		animation: none;
	}

	[data-page-variant="studio-list"] .favorite-inline:active .favorite-inline__icon {
		transform: none;
	}
}