/*
 * Shaghaf shared Figma controls.
 * Reference colors sampled from the supplied design: orange #f96925, shell #d9d9d9.
 */
:root {
	--shaghaf-ui-orange: #f96925;
	--shaghaf-ui-orange-dark: #e95617;
	--shaghaf-ui-shell: #d9d9d9;
	--shaghaf-ui-ink: #4f4f4f;
	--shaghaf-ui-radius: 999px;
}

/* Keep all normal content buttons rounded without touching header icon toggles. */
.site-content button:not(.components-button),
.site-content input[type="submit"],
.site-content input[type="button"],
.site-content .button,
.site-content .wp-element-button,
.site-content .wp-block-button__link {
	border-radius: var(--shaghaf-ui-radius) !important;
}

/* Primary text actions use the same orange pill language site-wide. */
:where(
	.sj-global-cta,
	.sj-submit,
	.sj-btn-primary,
	.sj-btn.primary,
	.sj-action-primary,
	.sj404-btn.primary,
	.sj-legal-button.is-primary,
	.sj-job-apply.is-primary,
	.sj-filter-submit,
	.search-submit
) {
	color: #fff !important;
	background: var(--shaghaf-ui-orange) !important;
	border-color: var(--shaghaf-ui-orange) !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
}
:where(
	.sj-submit,
	.sj-btn-primary,
	.sj-btn.primary,
	.sj-action-primary,
	.sj404-btn.primary,
	.sj-legal-button.is-primary,
	.sj-job-apply.is-primary,
	.sj-filter-submit,
	.search-submit
):hover { background: var(--shaghaf-ui-orange-dark) !important; }
:where(.sj-submit, .sj-btn-primary, .sj-btn.primary, .sj-action-primary, .sj404-btn.primary, .sj-legal-button.is-primary, .sj-job-apply.is-primary, .sj-filter-submit, .search-submit):focus-visible { outline: 2px solid rgba(249, 105, 37, .34) !important; outline-offset: 2px !important; }

/* Shared search shell: grey capsule with orange action at the left in RTL. */
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search) {
	direction: rtl;
	background: var(--shaghaf-ui-shell) !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
	overflow: hidden !important;
}
:where(.search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search) {
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	padding: 2px !important;
}
.search-form > label,
.sjs-search > .sjs-search-field,
.sj-search-shell > .sj-search-field,
.sj-filter--hero > .sj-filter-field { flex: 1 1 auto !important; min-width: 0 !important; }
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search) input[type="search"] {
	min-height: 42px !important;
	color: #303033 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search) input[type="search"]::placeholder { color: #a2a2a2 !important; opacity: 1; }
.sjs-search-field > label,
.sj-search-field > label,
.sj-filter-field > .sj-filter-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
:where(.search-form > button, .sjs-search > button, .sj404-search > button, .sj-search-shell > button, .sj-filter--hero > button, .sj-global-search-form > button, .sj-jobs-search > button) {
	min-height: 42px !important;
	padding: 0 22px !important;
	color: #fff !important;
	background: var(--shaghaf-ui-orange) !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
	font-weight: 800 !important;
}
:where(.search-form > button, .sjs-search > button, .sj404-search > button, .sj-search-shell > button, .sj-filter--hero > button, .sj-global-search-form > button, .sj-jobs-search > button):hover { background: var(--shaghaf-ui-orange-dark) !important; }

/* Blog, guides, tools and jobs filters share the supplied segmented control. */
:where(.sj-quick-filters, .sj-tools-filters, .sj-jobs-quick) {
	display: flex !important;
	width: max-content !important;
	max-width: 100% !important;
	align-items: center !important;
	gap: 0 !important;
	padding: 2px !important;
	background: var(--shaghaf-ui-shell) !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
	overflow-x: auto !important;
	scrollbar-width: none;
}
:where(.sj-quick-filters, .sj-tools-filters, .sj-jobs-quick)::-webkit-scrollbar { display: none; }
:where(.sj-quick-filters, .sj-tools-filters, .sj-jobs-quick) :where(button, a) {
	min-height: 40px !important;
	flex: 0 0 auto !important;
	padding: 0 21px !important;
	color: var(--shaghaf-ui-ink) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	font-weight: 700 !important;
}
:where(.sj-quick-filters, .sj-tools-filters, .sj-jobs-quick) :where(button.is-current, button.is-active, a.is-current, a.is-active) {
	color: #fff !important;
	background: var(--shaghaf-ui-orange) !important;
}

/* Secondary textual controls keep a neutral capsule instead of square borders. */
:where(.sj-reset, .sj-action, .sj-mini-btn, .sj-tool-btn, .sj-legal-button:not(.is-primary), .sj-job-apply:not(.is-primary)) {
	border-radius: var(--shaghaf-ui-radius) !important;
}

@media (max-width: 640px) {
	:where(.search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search) { width: 100% !important; }
	:where(.search-form > button, .sjs-search > button, .sj404-search > button, .sj-search-shell > button, .sj-filter--hero > button, .sj-global-search-form > button, .sj-jobs-search > button) { padding-inline: 17px !important; }
}

/* Header controls keep the same pill geometry without changing icon behavior. */
.sj-global-search-toggle,
.sj-global-menu-toggle,
.sj-global-search-close,
.sj-global-cta { border-radius: var(--shaghaf-ui-radius) !important; }
.sj-mobile-search {
	background: var(--shaghaf-ui-shell) !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
}
.sj-mobile-search input { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.sj-mobile-search button {
	color: #fff !important;
	background: var(--shaghaf-ui-orange) !important;
	border-radius: var(--shaghaf-ui-radius) !important;
}


/* 3.1.6: keep search controls flat, borderless and free of white focus fills. */
:where(
	.search-form,
	.sj-global-search-form,
	.sjs-search,
	.sj404-search,
	.sj-search-shell,
	.sj-filter--hero,
	.sj-jobs-search,
	.sj-mobile-search
) {
	background-color: var(--shaghaf-ui-shell) !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

:where(
	.search-form,
	.sj-global-search-form,
	.sjs-search,
	.sj404-search,
	.sj-search-shell,
	.sj-filter--hero,
	.sj-jobs-search,
	.sj-mobile-search
):focus-within {
	border: 0 !important;
	box-shadow: 0 0 0 3px rgba(249, 105, 37, .16) !important;
	outline: 0 !important;
}

:where(
	.search-form,
	.sj-global-search-form,
	.sjs-search,
	.sj404-search,
	.sj-search-shell,
	.sj-filter--hero,
	.sj-jobs-search,
	.sj-mobile-search
) :where(input[type="search"], input[type="text"]) {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

:where(
	.search-form,
	.sj-global-search-form,
	.sjs-search,
	.sj404-search,
	.sj-search-shell,
	.sj-filter--hero,
	.sj-jobs-search,
	.sj-mobile-search
) :where(input[type="search"], input[type="text"]):focus,
:where(
	.search-form,
	.sj-global-search-form,
	.sjs-search,
	.sj404-search,
	.sj-search-shell,
	.sj-filter--hero,
	.sj-jobs-search,
	.sj-mobile-search
) :where(input[type="search"], input[type="text"]):focus-visible {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	outline-offset: 0 !important;
}

:where(.sj-jobs-search__field, .sj-search-field, .sjs-search-field, .search-form > label) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Avoid browser autofill painting a white slab inside the grey search capsule. */
:where(.sj-jobs-search, .search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-mobile-search)
input:-webkit-autofill,
:where(.sj-jobs-search, .search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-mobile-search)
input:-webkit-autofill:hover,
:where(.sj-jobs-search, .search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-mobile-search)
input:-webkit-autofill:focus {
	-webkit-text-fill-color: #303033 !important;
	-webkit-box-shadow: 0 0 0 1000px var(--shaghaf-ui-shell) inset !important;
	box-shadow: 0 0 0 1000px var(--shaghaf-ui-shell) inset !important;
	transition: background-color 9999s ease-out 0s;
}

:where(.search-form > button, .sjs-search > button, .sj404-search > button, .sj-search-shell > button, .sj-filter--hero > button, .sj-global-search-form > button, .sj-jobs-search > button, .sj-mobile-search > button):focus-visible {
	outline: 2px solid rgba(249, 105, 37, .34) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

:where(.sj-quick-filters, .sj-tools-filters, .sj-jobs-quick) :where(button, a):focus-visible {
	outline: 2px solid rgba(249, 105, 37, .34) !important;
	outline-offset: 2px !important;
}

/* Native-control reset: prevents browser/OS search styling from reintroducing the line or white fill. */
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search, .sj-mobile-search)
:where(input[type="search"], input[type="text"]) {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
}
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search, .sj-mobile-search)
input[type="search"]::-webkit-search-decoration,
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search, .sj-mobile-search)
input[type="search"]::-webkit-search-results-button,
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search, .sj-mobile-search)
input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none !important;
}


/* 3.3.1 jobs taxonomy overflow: keep the action circle fixed while chip rails may scroll. */
.sj-jobs-category-stack .sj-jobs-quick {
	overflow: hidden !important;
}
.sj-jobs-category-stack .sj-jobs-chip-list {
	display: flex !important;
	min-width: 0 !important;
	align-items: center !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none;
}
.sj-jobs-category-stack .sj-jobs-chip-list::-webkit-scrollbar { display: none; }
.sj-jobs-category-stack .sj-jobs-chip-toggle {
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	flex: 0 0 36px !important;
	padding: 0 !important;
	color: #fff !important;
	background: var(--shaghaf-ui-orange) !important;
}
.sj-jobs-category-stack .sj-jobs-quick--overflow {
	width: 100% !important;
	max-width: 100% !important;
}
@media (max-width: 620px) {
	.sj-jobs-category-stack .sj-jobs-chip-toggle {
		width: 34px !important;
		min-width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		flex-basis: 34px !important;
	}
	.sj-jobs-category-stack.has-overflow > .sj-jobs-quick:first-child { width: 100% !important; }
}

/* 3.3.2 — shared segmented category container from the supplied Figma reference. */
.sj-segment-stack {
	display: grid !important;
	width: 100% !important;
	min-width: 0 !important;
	gap: 0 !important;
}
.sj-segment-stack.is-expanded { gap: 10px !important; }

:where(.sj-segment-stack) .sj-segment-bar {
	display: flex !important;
	width: max-content !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 44px !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 2px !important;
	background: var(--shaghaf-ui-shell) !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
	overflow: hidden !important;
}
:where(.sj-segment-stack.has-overflow) > .sj-segment-bar:first-child {
	width: fit-content !important;
}
:where(.sj-segment-stack) .sj-segment-bar--overflow {
	width: 100% !important;
	max-width: 100% !important;
	transform-origin: top center;
}

/*
 * 3.3.3: `[hidden]` must win over the shared `display:flex !important` rule.
 * Without this, the overflow row is rendered even while collapsed, so the
 * compact and expanded capsules touch each other and the minus control looks
 * clipped. Keep the second row completely out of layout until JS opens it.
 */
:where(.sj-segment-stack) .sj-segment-bar--overflow[hidden],
:where(.sj-segment-stack):not(.is-expanded) .sj-segment-bar--overflow {
	display: none !important;
}
:where(.sj-segment-stack.is-expanded) .sj-segment-bar--overflow:not([hidden]) {
	display: flex !important;
	animation: sj-shared-segment-reveal .18s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sj-shared-segment-reveal {
	from { opacity: 0; transform: translateY(-6px) scaleY(.96); }
	to { opacity: 1; transform: translateY(0) scaleY(1); }
}

:where(.sj-segment-stack) .sj-segment-rail {
	display: flex !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
	align-items: center !important;
	gap: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
}
:where(.sj-segment-stack) .sj-segment-rail::-webkit-scrollbar { display: none; }

:where(.sj-segment-stack) .sj-segment-rail > :where(button, a, .sj-jobs-chip) {
	display: inline-flex !important;
	min-width: max-content !important;
	min-height: 40px !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 20px !important;
	color: var(--shaghaf-ui-ink) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	font-size: 12.5px !important;
	font-weight: 750 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	cursor: pointer;
	transition: color .16s ease, background .16s ease, transform .16s ease !important;
}
:where(.sj-segment-stack) .sj-segment-rail > :where(button, a, .sj-jobs-chip):hover:not(.is-current):not(.is-active) {
	color: #333337 !important;
	background: rgba(255,255,255,.30) !important;
}
:where(.sj-segment-stack) .sj-segment-rail > :where(.is-current, .is-active, [aria-pressed="true"], [aria-current="page"]) {
	color: #fff !important;
	background: var(--shaghaf-ui-orange) !important;
}
:where(.sj-segment-stack) .sj-segment-rail > :where(button, a, .sj-jobs-chip):focus-visible {
	outline: 2px solid rgba(249,105,37,.34) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

:where(.sj-segment-stack) .sj-segment-toggle {
	display: inline-grid !important;
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	flex: 0 0 36px !important;
	place-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #fff !important;
	background: var(--shaghaf-ui-orange) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	font: inherit !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background .16s ease, transform .16s ease !important;
}
:where(.sj-segment-stack) .sj-segment-toggle:hover,
:where(.sj-segment-stack) .sj-segment-toggle:focus-visible {
	background: var(--shaghaf-ui-orange-dark) !important;
}
:where(.sj-segment-stack) .sj-segment-toggle:focus-visible {
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(249,105,37,.18) !important;
}
:where(.sj-segment-stack) .sj-segment-toggle:active { transform: scale(.96) !important; }
:where(.sj-segment-stack) .sj-segment-toggle > span[aria-hidden="true"],
:where(.sj-segment-stack) .sj-jobs-chip-toggle__symbol {
	display: block !important;
	line-height: 1 !important;
	transform: translateY(-1px);
}

/* Preserve the existing vertical rhythm: the stack owns spacing, not each capsule row. */
#sjBlogClean .sj-segment-stack { margin-top: 12px !important; }
#sjBlogClean .sj-segment-stack .sj-quick-filters { margin-top: 0 !important; padding-bottom: 2px !important; }
#sjToolsUnified .sj-tools-filter-stack { margin-top: 15px !important; }
#sjToolsUnified .sj-tools-filter-stack .sj-tools-filters { margin-top: 0 !important; padding-bottom: 2px !important; }
.sj-jobs-category-stack.sj-segment-stack { margin-top: 0 !important; }

/* Search capsules now use the same geometry and exact grey/orange system everywhere. */
:where(
	.search-form,
	.sj-global-search-form,
	.sjs-search,
	.sj404-search,
	.sj-search-shell,
	.sj-filter--hero,
	.sj-jobs-search,
	.sj-mobile-search
) {
	min-height: 48px !important;
	padding: 2px !important;
	background: var(--shaghaf-ui-shell) !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
	overflow: hidden !important;
}
:where(.search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search) {
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
}
:where(.search-form > label, .sjs-search > .sjs-search-field, .sj404-search > :first-child, .sj-search-shell > .sj-search-field, .sj-filter--hero > .sj-filter-field, .sj-jobs-search > .sj-jobs-search__field) {
	min-width: 0 !important;
	flex: 1 1 auto !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search, .sj-mobile-search)
:where(input[type="search"], input[type="text"]) {
	min-height: 44px !important;
	padding-block: 0 !important;
	color: #303033 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	font-weight: 700 !important;
}
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search, .sj-mobile-search)
:where(input[type="search"], input[type="text"])::placeholder {
	color: #96969b !important;
	opacity: 1 !important;
	font-weight: 650 !important;
}
:where(.search-form > button, .sjs-search > button, .sj404-search > button, .sj-search-shell > button, .sj-filter--hero > button, .sj-global-search-form > button, .sj-jobs-search > button, .sj-mobile-search > button) {
	min-width: 78px !important;
	min-height: 44px !important;
	height: auto !important;
	padding: 0 20px !important;
	color: #fff !important;
	background: var(--shaghaf-ui-orange) !important;
	border: 0 !important;
	border-radius: var(--shaghaf-ui-radius) !important;
	box-shadow: none !important;
	font-size: 12.5px !important;
	font-weight: 850 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}
:where(.search-form > button, .sjs-search > button, .sj404-search > button, .sj-search-shell > button, .sj-filter--hero > button, .sj-global-search-form > button, .sj-jobs-search > button, .sj-mobile-search > button):hover {
	background: var(--shaghaf-ui-orange-dark) !important;
}
:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search, .sj-mobile-search):focus-within {
	box-shadow: 0 0 0 3px rgba(249,105,37,.15) !important;
}

/* Header search keeps its icon column while inheriting the same capsule. */
.sj-global-search-form {
	display: grid !important;
	grid-template-columns: auto minmax(0,1fr) auto !important;
	align-items: center !important;
	gap: 10px !important;
	padding-inline-start: 14px !important;
}
.sj-global-search-form > .sj-global-icon { color: #6f6f74 !important; }
.sj-mobile-search {
	display: grid !important;
	grid-template-columns: minmax(0,1fr) auto !important;
	align-items: center !important;
	padding-inline: 12px 2px !important;
}
.sj-mobile-search > button {
	width: 40px !important;
	min-width: 40px !important;
	padding: 0 !important;
}

@media (max-width: 720px) {
	#sjBlogClean .sj-segment-stack { margin-top: 10px !important; }
	:where(.sj-segment-stack.has-overflow) > .sj-segment-bar:first-child { width: 100% !important; }
	:where(.sj-segment-stack) .sj-segment-bar--overflow { width: 100% !important; }
	:where(.sj-segment-stack) .sj-segment-rail > :where(button, a, .sj-jobs-chip) {
		min-height: 38px !important;
		padding-inline: 16px !important;
		font-size: 11.5px !important;
	}
	:where(.sj-segment-stack) .sj-segment-toggle {
		width: 34px !important;
		min-width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		flex-basis: 34px !important;
		font-size: 22px !important;
	}
	:where(.search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search) {
		width: 100% !important;
		min-height: 44px !important;
	}
	:where(.search-form > button, .sjs-search > button, .sj404-search > button, .sj-search-shell > button, .sj-filter--hero > button, .sj-global-search-form > button, .sj-jobs-search > button) {
		min-width: 70px !important;
		min-height: 40px !important;
		padding-inline: 16px !important;
		font-size: 11.5px !important;
	}
	:where(.search-form, .sj-global-search-form, .sjs-search, .sj404-search, .sj-search-shell, .sj-filter--hero, .sj-jobs-search, .sj-mobile-search)
	:where(input[type="search"], input[type="text"]) {
		min-height: 40px !important;
	}
}


/* 3.3.3 — keep both capsules inside their own layout box and visibly separated. */
:where(.sj-segment-stack.is-expanded) {
	row-gap: 10px !important;
}
:where(.sj-segment-stack.is-expanded) > .sj-segment-bar--overflow:not([hidden]) {
	position: relative !important;
	inset: auto !important;
	margin: 0 !important;
	clear: both !important;
}
@media (max-width: 620px) {
	:where(.sj-segment-stack.is-expanded) { row-gap: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
	:where(.sj-segment-stack.is-expanded) .sj-segment-bar--overflow:not([hidden]) { animation: none !important; }
	:where(.sj-segment-stack) :where(.sj-segment-toggle, .sj-segment-chip) { transition: none !important; }
}