/*
 * スタイルギャラリー — washoku-demos の Gallery.tsx / StyleDetailPage.tsx /
 * StylistsPage.tsx / StylistDetailPage.tsx のレイアウトを忠実移植したCSS。
 *
 * テーマがデザイントークン(--color-*)を提供していればそれを継承し、
 * 無ければAZUNOAブランドの既定値にフォールバックする。
 * これで「AZUNOAテーマ上では完全に馴染む／他テーマに入れても単体で成立する」を両立する。
 */
.azsg-page {
	--azsg-shell: var(--color-shell, #fffcfc);
	--azsg-shell-2: var(--color-shell-2, #fdf1f0);
	--azsg-ink: var(--color-ink, #1c1a17);
	--azsg-sumi: var(--color-sumi, #2b2426);
	--azsg-stone: var(--color-stone, #6f6669);
	--azsg-gold: var(--color-gold, #b83a4e);
	--azsg-gold-deep: var(--color-gold-deep, #932b3d);
	--azsg-sage: var(--color-sage, #9a9096);
	--azsg-line: var(--color-line, #f6e3e1);
	--azsg-mincho: var(--font-mincho, "Shippori Mincho", serif);
	--azsg-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
	--azsg-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--azsg-expo: cubic-bezier(0.16, 1, 0.3, 1);
	font-family: var(--font-sans, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif);
	color: var(--azsg-sumi);
	background: var(--azsg-shell);
}

.azsg-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- ページヘッダー（header.wrap pt-16 pb-10 md:pt-24 md:pb-14） ---------- */
.azsg-header { padding-top: 4rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .azsg-header { padding-top: 6rem; padding-bottom: 3.5rem; } }
.azsg-header--stylists { padding-bottom: 3rem; }
@media (min-width: 768px) { .azsg-header--stylists { padding-bottom: 5rem; } }
/* .wrap(1280px)の直下なので、見出しも本文と同じ48remに収める。
   ここが無いと見出しだけ1280px幅で組まれ、本サイトと改行位置がずれる。 */
.azsg-header > * { max-width: 48rem; }

.azsg-body { padding-bottom: 6rem; }
@media (min-width: 768px) { .azsg-body { padding-bottom: 8rem; } }

/* ---------- 絞り込み（border-y border-line py-8） ---------- */
.azsg-filters {
	border-top: 1px solid var(--azsg-line);
	border-bottom: 1px solid var(--azsg-line);
	padding-block: 2rem;
}
.azsg-filter-rows { display: flex; flex-direction: column; gap: 1.5rem; }

.azsg-filter-row { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .azsg-filter-row { grid-template-columns: 5rem 1fr; align-items: baseline; } }
.azsg-filter-row__label { font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azsg-stone); }
.azsg-filter-row__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.azsg-filter__chip {
	border: 1px solid var(--azsg-line);
	background: transparent;
	color: var(--azsg-stone);
	padding: 0.375rem 0.875rem;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	font-family: inherit;
	cursor: pointer;
	transition: all 300ms var(--azsg-quint);
}
.azsg-filter__chip:hover { border-color: var(--azsg-stone); color: var(--azsg-sumi); }
.azsg-filter__chip[aria-pressed="true"] { border-color: var(--azsg-sumi); background: var(--azsg-sumi); color: var(--azsg-shell); }

.azsg-filter-summary {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--azsg-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.azsg-filter-count { margin: 0; font-size: 0.8125rem; color: var(--azsg-sumi); }
.azsg-filter-count .num { font-variant-numeric: tabular-nums; font-size: 1.125rem; }
.azsg-filter-count .unit { margin-left: 0.375rem; color: var(--azsg-stone); }
.azsg-filter-count .active-note { margin-left: 0.75rem; font-size: 0.75rem; color: var(--azsg-stone); }

.azsg-filter-reset {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 0.8125rem;
	color: var(--azsg-stone);
	cursor: pointer;
}
.azsg-filter-reset::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 500ms var(--azsg-quint);
}
.azsg-filter-reset:hover::after { transform: scaleX(1); }

/* ---------- masonry（columns 2→3→4） ---------- */
.azsg-masonry { columns: 2; column-gap: 0.75rem; margin-top: 3rem; }
.azsg-masonry .azsg-card { break-inside: avoid; margin: 0 0 0.75rem; }
@media (min-width: 768px) { .azsg-masonry { columns: 3; column-gap: 1.25rem; } .azsg-masonry .azsg-card { margin-bottom: 1.25rem; } }
@media (min-width: 1280px) { .azsg-masonry { columns: 4; } }

.azsg-card { animation: azsg-gal-in 620ms var(--azsg-expo) both; }
@keyframes azsg-gal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.azsg-card a { display: block; text-decoration: none; color: inherit; }
.azsg-card__media { overflow: hidden; }
.azsg-card img { width: 100%; display: block; object-fit: cover; transition: transform 700ms var(--azsg-quint); }
.azsg-card a:hover img { transform: scale(1.04); }
.azsg-card__placeholder { width: 100%; background: linear-gradient(135deg, var(--azsg-line), var(--azsg-shell-2)); }
.azsg-card__title { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.375; color: var(--azsg-sumi); font-weight: 400; }
.azsg-card__meta { margin: 0.25rem 0 0; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azsg-stone); }
.azsg-card.is-hidden { display: none; }

.azsg-empty { padding-block: 7rem; text-align: center; }
.azsg-empty__title { font-family: var(--azsg-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin: 0; }
.azsg-empty__note { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azsg-stone); }
.azsg-empty .azsg-btn { margin-top: 2rem; }

.azsg-loadmore-wrap { margin-top: 3rem; text-align: center; }

/* ---------- ボタン（テーマの .btn と同じ寸法） ---------- */
.azsg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3.25rem;
	padding-inline: 2rem;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	font-family: inherit;
	border: 1px solid transparent;
	transition: all 400ms var(--azsg-quint);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	background: none;
}
.azsg-btn--outline { border-color: var(--azsg-sumi); color: var(--azsg-sumi); }
.azsg-btn--outline:hover { background: var(--azsg-sumi); color: var(--azsg-shell); }
.azsg-btn--solid { background: var(--azsg-sumi); color: var(--azsg-shell); }
.azsg-btn--solid:hover { background: var(--azsg-gold-deep); }
.azsg-btn--full { width: 100%; }

/* ---------- 戻るリンク ---------- */
.azsg-backbar { padding-top: 2.5rem; padding-bottom: 1.5rem; }
@media (min-width: 768px) { .azsg-backbar { padding-top: 3.5rem; } }
.azsg-back-link { position: relative; display: inline-block; padding-bottom: 2px; font-size: 0.8125rem; color: var(--azsg-stone); text-decoration: none; }
.azsg-back-link::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--azsg-quint); }
.azsg-back-link:hover::after { transform: scaleX(1); }

/* ---------- スタイル詳細 ---------- */
.azsg-single { padding-bottom: 6rem; }
@media (min-width: 768px) { .azsg-single { padding-bottom: 8rem; } }
.azsg-single__layout { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .azsg-single__layout { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; } }
@media (min-width: 1024px) { .azsg-single__info { position: sticky; top: 8rem; align-self: start; } }

.azsg-single__eyebrow { font-family: var(--azsg-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--azsg-gold); margin: 0; }
.azsg-single__title { font-family: var(--azsg-mincho); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.45; letter-spacing: 0.04em; font-weight: 400; margin: 1rem 0 0; }
.azsg-single__note { margin: 1.75rem 0 0; font-size: 0.9375rem; line-height: 2; color: var(--azsg-stone); }

.azsg-tags { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.azsg-tags li { border: 1px solid var(--azsg-line); padding: 0.25rem 0.75rem; font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--azsg-stone); }

.azsg-info-box { margin-top: 2.5rem; border: 1px solid var(--azsg-line); }
.azsg-info-box__head { margin: 0; border-bottom: 1px solid var(--azsg-line); padding: 1rem 1.5rem; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--azsg-sumi); }
.azsg-info-box dl { margin: 0; padding-inline: 1.5rem; }
.azsg-info-box dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-top: 1px solid var(--azsg-line); }
.azsg-info-box dl > div:first-child { border-top: 0; }
.azsg-info-box dt { font-size: 0.8125rem; color: var(--azsg-sumi); }
.azsg-info-box dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--azsg-sumi); }
.azsg-info-box__foot { border-top: 1px solid var(--azsg-sumi); padding: 1.25rem 1.5rem; }
.azsg-info-box__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.azsg-info-box__row + .azsg-info-box__row { margin-top: 0.5rem; }
.azsg-info-box__row .label { font-size: 0.8125rem; color: var(--azsg-stone); }
.azsg-info-box__row .total { font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--azsg-sumi); }
.azsg-info-box__row .dur { font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--azsg-sumi); }

.azsg-note-caption { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azsg-stone); }

.azsg-stylist-card {
	display: flex; align-items: center; gap: 1.25rem;
	margin-top: 2rem; padding: 1.25rem;
	border: 1px solid var(--azsg-line);
	text-decoration: none; color: inherit;
	transition: border-color 400ms var(--azsg-quint);
}
.azsg-stylist-card:hover { border-color: var(--azsg-stone); }
.azsg-stylist-card img { width: 5rem; height: 5rem; flex-shrink: 0; object-fit: cover; }
.azsg-stylist-card__body { min-width: 0; }
.azsg-stylist-card__rank { display: block; font-family: var(--azsg-display); font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--azsg-stone); }
.azsg-stylist-card__name { display: block; font-family: var(--azsg-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin-top: 0.25rem; }
.azsg-stylist-card__title { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--azsg-stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azsg-stylist-card__arrow { margin-left: auto; flex-shrink: 0; color: var(--azsg-stone); }
.azsg-stylist-card:hover .azsg-stylist-card__arrow { color: var(--azsg-gold); }

.azsg-single .azsg-btn--solid { margin-top: 2rem; }

/* ---------- 関連セクション（近い雰囲気のスタイル／担当スタイル／他のスタイリスト） ---------- */
.azsg-related { margin-top: 6rem; border-top: 1px solid var(--azsg-line); padding-top: 4rem; }
@media (min-width: 768px) { .azsg-related { margin-top: 8rem; } }
.azsg-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.azsg-related h2 { font-family: var(--azsg-mincho); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.58; letter-spacing: 0.04em; font-weight: 400; margin: 0; }
.azsg-related__grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .azsg-related__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.azsg-related__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) { .azsg-related__grid--3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.azsg-related__grid a { display: block; text-decoration: none; color: inherit; }
.azsg-related__grid .media { overflow: hidden; }
.azsg-related__grid img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; transition: transform 700ms var(--azsg-quint); }
.azsg-related__grid a:hover img { transform: scale(1.04); }
.azsg-related__grid p { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.375; color: var(--azsg-sumi); }
.azsg-related .azsg-masonry { margin-top: 2.5rem; }

/* ---------- スタイリスト一覧 ---------- */
.azsg-stylists-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 1.5rem; row-gap: 4rem; }
@media (min-width: 768px) { .azsg-stylists-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .azsg-stylists-list { column-gap: 2.5rem; row-gap: 6rem; } }
@media (min-width: 768px) { .azsg-stylists-list > li:nth-child(2n) .azsg-stylist-item { margin-top: 4rem; } }

.azsg-stylist-item { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .azsg-stylist-item { grid-template-columns: 0.9fr 1.1fr; gap: 2rem; } }
.azsg-stylist-item__photo { display: block; overflow: hidden; }
.azsg-stylist-item__photo img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; transition: transform 700ms var(--azsg-quint); }
.azsg-stylist-item:hover .azsg-stylist-item__photo img { transform: scale(1.04); }
.azsg-stylist-item__body { display: flex; flex-direction: column; }
.azsg-stylist-item__rank { font-family: var(--azsg-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--azsg-gold); margin: 0; }
.azsg-stylist-item__name { font-family: var(--azsg-mincho); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.58; letter-spacing: 0.04em; font-weight: 400; margin: 0.75rem 0 0; }
.azsg-stylist-item__name a { position: relative; display: inline-block; padding-bottom: 2px; text-decoration: none; color: inherit; }
.azsg-stylist-item__name a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--azsg-quint); }
.azsg-stylist-item__name a:hover::after { transform: scaleX(1); }
.azsg-stylist-item__meta { margin: 0.375rem 0 0; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--azsg-stone); }
.azsg-stylist-item__title { font-family: var(--azsg-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; color: var(--azsg-gold); margin: 1.25rem 0 0; }
.azsg-stylist-item__bio { margin: 1rem 0 0; font-size: 0.8125rem; line-height: 2; color: var(--azsg-stone); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.azsg-stylist-item__specialties { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.azsg-stylist-item__specialties li { border: 1px solid var(--azsg-line); padding: 0.25rem 0.625rem; font-size: 0.6875rem; color: var(--azsg-stone); }
.azsg-stylist-item__stats { margin: 1.5rem 0 0; display: flex; gap: 2rem; border-top: 1px solid var(--azsg-line); padding-top: 1rem; font-size: 0.8125rem; }
.azsg-stylist-item__stats dt { font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azsg-stone); }
.azsg-stylist-item__stats dd { margin: 0.125rem 0 0; font-variant-numeric: tabular-nums; color: var(--azsg-sumi); }
.azsg-stylist-item__cta { margin-top: auto; padding-top: 1.75rem; }
.azsg-stylist-item__cta .azsg-btn { min-height: 3rem; padding-inline: 1.5rem; }

/* ---------- スタイリスト一覧下部の診断CTAバンド ---------- */
.azsg-diagnosis-band { background: var(--azsg-shell-2); }
.azsg-diagnosis-band__inner { padding-block: 4rem; text-align: center; }
@media (min-width: 768px) { .azsg-diagnosis-band__inner { padding-block: 5rem; } }
.azsg-diagnosis-band__title { font-family: var(--azsg-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin: 0; }
.azsg-diagnosis-band__lead { max-width: 36rem; margin: 1rem auto 0; font-size: 0.875rem; line-height: 2; color: var(--azsg-stone); }
.azsg-diagnosis-band .azsg-btn { margin-top: 2rem; }

/* ---------- スタイリスト詳細 ---------- */
.azsg-stylist-detail__layout { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .azsg-stylist-detail__layout { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; } }
.azsg-stylist-detail__photo { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }
.azsg-stylist-detail__name { font-family: var(--azsg-mincho); font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.22; letter-spacing: 0.02em; font-weight: 400; margin: 1rem 0 0; }
.azsg-stylist-detail__meta { margin: 0.75rem 0 0; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--azsg-stone); }
.azsg-stylist-detail__title { font-family: var(--azsg-mincho); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.58; letter-spacing: 0.04em; font-weight: 400; color: var(--azsg-gold); margin: 2.5rem 0 0; }
.azsg-stylist-detail__bio { margin: 1.5rem 0 0; font-size: 0.9375rem; line-height: 2; color: var(--azsg-stone); }
.azsg-stylist-detail__specialties-wrap { margin-top: 2.5rem; }
.azsg-stylist-detail__specialties-wrap > p { font-family: var(--azsg-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--azsg-stone); margin: 0; }
.azsg-stylist-detail__specialties { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.azsg-stylist-detail__specialties li { border: 1px solid var(--azsg-line); padding: 0.375rem 0.75rem; font-size: 0.75rem; color: var(--azsg-sumi); }
.azsg-stylist-detail__stats { margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; border-top: 1px solid var(--azsg-line); border-bottom: 1px solid var(--azsg-line); padding-block: 1.5rem; }
@media (min-width: 640px) { .azsg-stylist-detail__stats { grid-template-columns: repeat(3, 1fr); } }
.azsg-stylist-detail__stats dt { font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azsg-stone); }
.azsg-stylist-detail__stats dd { margin: 0.25rem 0 0; font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--azsg-sumi); }

/* ---------- 直近の空き（AvailabilityStrip） ---------- */
.azsg-availability { margin-top: 3rem; }
.azsg-availability__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.azsg-availability__head .label { font-family: var(--azsg-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--azsg-stone); margin: 0; }
.azsg-availability__head .note { margin: 0; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azsg-stone); }
.azsg-availability__list { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--azsg-line); border-bottom: 1px solid var(--azsg-line); }
.azsg-availability__list li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: start; gap: 1rem; padding-block: 0.875rem; border-top: 1px solid var(--azsg-line); }
.azsg-availability__list li:first-child { border-top: 0; }
.azsg-availability__date { display: flex; align-items: baseline; gap: 0.5rem; }
.azsg-availability__date .d { font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--azsg-sumi); }
.azsg-availability__date .w { font-size: 0.75rem; color: var(--azsg-stone); }
.azsg-availability__date .w.sun { color: #b4544a; }
.azsg-availability__date .w.sat { color: var(--azsg-sage); }
.azsg-availability__state { font-size: 0.8125rem; color: var(--azsg-stone); }
.azsg-availability__slots { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.azsg-availability__slots a {
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--azsg-line);
	padding: 0.125rem 0.5rem;
	font-size: 0.75rem;
	color: var(--azsg-sumi);
	text-decoration: none;
	transition: all 300ms var(--azsg-quint);
}
.azsg-availability__slots a:hover { border-color: var(--azsg-gold); color: var(--azsg-gold); }
.azsg-availability__slots .more { padding: 0.125rem 0.25rem; font-size: 0.75rem; color: var(--azsg-stone); }

/* ---------- Before/Afterスライダー ---------- */
.azsg-ba { position: relative; overflow: hidden; user-select: none; }
.azsg-ba img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.azsg-ba__before-wrap { position: absolute; inset: 0; overflow: hidden; }
.azsg-ba__divider { position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(255 252 252 / 0.9); box-shadow: 0 0 12px rgba(28, 26, 23, 0.35); pointer-events: none; }
.azsg-ba__handle {
	position: absolute; top: 50%;
	width: 2.75rem; height: 2.75rem;
	margin-left: -1.375rem; margin-top: -1.375rem;
	border-radius: 50%;
	border: 1px solid rgb(255 252 252 / 0.8);
	background: rgb(28 26 23 / 0.55);
	backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	color: var(--azsg-shell);
	font-size: 0.625rem; letter-spacing: 0.1em;
	pointer-events: none;
}
.azsg-ba__label { position: absolute; top: 0.75rem; font-size: 0.625rem; letter-spacing: 0.16em; padding: 0.25rem 0.625rem; pointer-events: none; }
.azsg-ba__label--before { left: 0.75rem; background: rgb(28 26 23 / 0.7); color: var(--azsg-shell); }
.azsg-ba__label--after { right: 0.75rem; background: rgb(184 58 78 / 0.85); color: #fff; }
.azsg-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: transparent; }