/**
 * "Salone" operational settings tab — Phase E.
 *
 * Renders inside the HairColorGPT user-settings app shell as the
 * `[hcgpt_salon_admin]` tab. The canonical `.hcgpt-settings-page__content`
 * wrapper already supplies the card chrome (surface + border + radius +
 * padding); the `.hcgpt-mb-card` primitive (shipped by hcgpt-membership's
 * app-shell-bridge.css) supplies the inner card chrome. This file adds ONLY
 * the Salone-specific layout: pill sub-tabs, weekly-hours rows, list rows.
 *
 * Contract (docs/plugins/haircolorgpt/contracts/APP_SHELL_TAB_CONTRACT.md):
 *   - no double-card chrome on `.hcgpt-mb-salone` itself,
 *   - only `--hcgpt-color-*` tokens (no hardcoded surface/text/border),
 *   - light AND dark via the token cascade.
 */

/* Let .hcgpt-settings-page__content own the chrome — no double card. */
.hcgpt-mb-salone {
	margin: 0;
	padding: 0;
}

.hcgpt-salone .hcgpt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.hcgpt-salone .hcgpt-btn--sm {
	min-height: 36px;
	padding: 8px 16px;
	font-size: 12px;
}

.hcgpt-salone .hcgpt-btn--primary {
	background: var(--hcgpt-brand-gradient, var(--hcgpt-brand-1, #6e3aff));
	color: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.hcgpt-salone .hcgpt-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(16, 24, 40, .16);
}

.hcgpt-salone .hcgpt-btn--secondary {
	background: transparent;
	color: var(--hcgpt-color-text, #262626);
	border-color: rgba(23, 23, 23, .15);
}

.hcgpt-salone .hcgpt-btn--secondary:hover {
	background: var(--hcgpt-brand-bg, rgba(110, 58, 255, .08));
	border-color: var(--hcgpt-brand-1, #6e3aff);
	color: var(--hcgpt-brand-1, #6e3aff);
}

.hcgpt-salone .hcgpt-btn--ghost {
	background: transparent;
	color: var(--hcgpt-color-text-muted, #737373);
	border: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}

.hcgpt-salone .hcgpt-btn--danger {
	background: color-mix(in srgb, var(--hcgpt-danger, #ef4444) 10%, transparent);
	color: var(--hcgpt-danger, #ef4444);
	border-color: var(--hcgpt-danger, #ef4444);
}

/* ===== Form fields (label + input/select/textarea pairs) =====
   Inputs without these rules render side-by-side inline because the browser
   default for <label> is inline — the form looked like a single squashed row.
   Stack each pair, label-above-input, with consistent spacing. */
.hcgpt-salone form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--hcgpt-space-3, 14px);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	color: var(--hcgpt-color-text);
}

.hcgpt-salone form label > span {
	display: block;
	font-weight: 600;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone form label > input,
.hcgpt-salone form label > select,
.hcgpt-salone form label > textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: var(--hcgpt-radius-md, 8px);
	background: var(--hcgpt-color-surface);
	color: var(--hcgpt-color-text);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	line-height: 1.4;
	font-family: inherit;
}

.hcgpt-salone form label > input:focus,
.hcgpt-salone form label > select:focus,
.hcgpt-salone form label > textarea:focus {
	outline: 0;
	border-color: var(--hcgpt-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hcgpt-primary) 18%, transparent);
}

.hcgpt-salone form label > textarea {
	min-height: 84px;
	resize: vertical;
}

/* Inline toggle: keep label horizontal (overrides the form-label flex-column). */
.hcgpt-salone form label.hcgpt-salone__toggle {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
.hcgpt-salone form label.hcgpt-salone__toggle > input {
	width: auto;
}

/* Field labels inside the two-column row keep the stacked layout. */
.hcgpt-salone__field2 label {
	margin: 0;
}

/* NOTE: `.hcgpt-mb-card` / `.hcgpt-mb-card__title` are owned by Membership's
   app-shell-bridge.css. Salon only adds scoped structure for the operational
   Workspace cards so they match the new settings card hierarchy. */
.hcgpt-salone > .hcgpt-mb-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	box-shadow: none;
	overflow: hidden;
}

.hcgpt-salone > .hcgpt-mb-card > :not(.hcgpt-salone__cardhead):not(.hcgpt-salone__cardfoot) {
	margin-left: 22px;
	margin-right: 22px;
}

.hcgpt-salone > .hcgpt-mb-card > .hcgpt-salone__cardhead + * {
	margin-top: 18px;
}

.hcgpt-salone > .hcgpt-mb-card > :last-child:not(.hcgpt-salone__cardfoot) {
	margin-bottom: 22px;
}

/* ===== Pill sub-tabs (legacy — kept for any standalone embed) ===== */
.hcgpt-salone__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hcgpt-space-2, 8px);
	margin: 0 0 var(--hcgpt-space-4, 18px);
}

.hcgpt-salone__pill {
	appearance: none;
	cursor: pointer;
	border: 1px solid var(--hcgpt-color-border);
	background: var(--hcgpt-color-surface-2);
	color: var(--hcgpt-color-text-muted);
	border-radius: 999px;
	padding: var(--hcgpt-space-2, 8px) var(--hcgpt-space-4, 16px);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.2;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hcgpt-salone__pill:hover {
	border-color: var(--hcgpt-color-border-strong);
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__pill.is-on {
	background: var(--hcgpt-primary);
	border-color: var(--hcgpt-primary);
	color: var(--hcgpt-color-on-primary);
}

/* ===== Panels ===== */
.hcgpt-salone__panel[hidden] {
	display: none;
}

.hcgpt-salone__flash {
	margin: 0 0 var(--hcgpt-space-3, 12px);
	padding: var(--hcgpt-space-2, 8px) var(--hcgpt-space-3, 12px);
	border-radius: var(--hcgpt-radius-md, 8px);
	background: var(--hcgpt-color-surface-2);
	border: 1px solid var(--hcgpt-color-border);
	color: var(--hcgpt-color-text);
	font-size: var(--hcgpt-text-sm, 0.875rem);
}

.hcgpt-salone__flash[hidden] {
	display: none;
}

.hcgpt-salone__subtitle {
	margin: var(--hcgpt-space-4, 18px) 0 var(--hcgpt-space-2, 8px);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__error {
	margin: var(--hcgpt-space-2, 8px) 0 0;
	color: var(--hcgpt-danger);
	font-size: var(--hcgpt-text-sm, 0.875rem);
}

.hcgpt-salone__error[hidden] {
	display: none;
}

.hcgpt-salone__hint {
	margin: var(--hcgpt-space-3, 12px) 0 0;
	color: var(--hcgpt-color-text-muted);
	font-size: var(--hcgpt-text-sm, 0.8125rem);
}

.hcgpt-salone__services-intro {
	margin: var(--hcgpt-space-3, 12px) 0 var(--hcgpt-space-4, 16px);
	padding: 14px 16px;
	border: 0;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
	color: var(--hcgpt-color-text);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	line-height: 1.45;
}

.hcgpt-salone__services-intro strong {
	display: block;
	margin-bottom: var(--hcgpt-space-1, 4px);
	font-weight: 700;
}

.hcgpt-salone__services-intro p {
	margin: var(--hcgpt-space-1, 4px) 0 0;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salone__custom-service {
	margin-top: var(--hcgpt-space-5, 24px);
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	border: 0;
	border-radius: 18px;
	box-shadow: none;
	overflow: hidden;
}

.hcgpt-salone__custom-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	min-height: 96px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
	cursor: pointer;
	list-style: none;
}

.hcgpt-salone__custom-summary::-webkit-details-marker {
	display: none;
}

.hcgpt-salone__section-kicker {
	display: block;
	margin: 0 0 var(--hcgpt-space-1, 4px);
	font-size: var(--hcgpt-text-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salone__custom-summary strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__custom-summary small {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salone__custom-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 14px;
	border: 1px solid rgba(110, 58, 255, .24);
	background: var(--hcgpt-brand-bg, rgba(110, 58, 255, .08));
	color: var(--hcgpt-brand-1, #6e3aff);
	font-size: 0;
	transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.hcgpt-salone__custom-chevron::before {
	content: "";
	width: 10px;
	height: 10px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.hcgpt-salone__custom-service[open] .hcgpt-salone__custom-chevron {
	transform: rotate(180deg);
	background: var(--hcgpt-brand-gradient, var(--hcgpt-brand-1, #6e3aff));
	border-color: transparent;
	color: #fff;
}

.hcgpt-salone__custom-copy {
	margin: 0 0 var(--hcgpt-space-3, 14px);
	color: var(--hcgpt-color-text-muted);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	line-height: 1.45;
}

.hcgpt-salone__addform {
	margin: 0;
	padding: 0 24px 24px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
}

.hcgpt-salone__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--hcgpt-space-2, 8px);
	margin-top: var(--hcgpt-space-4, 16px);
	padding: 13px 22px;
	min-height: 54px;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-3, var(--hcgpt-color-surface-2, #e8e8eb));
}

/* ===== Two-column field rows ===== */
.hcgpt-salone__field2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--hcgpt-space-3, 14px);
}

.hcgpt-salone__field3 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(96px, 0.45fr) minmax(136px, 0.75fr);
	gap: var(--hcgpt-space-3, 14px);
}

@media (max-width: 560px) {
	.hcgpt-salone__field2,
	.hcgpt-salone__field3 {
		grid-template-columns: 1fr;
	}
}

/* ===== Public page profile editor ===== */
.hcgpt-salone__profile-shell {
	display: flex;
	flex-direction: column;
	gap: var(--hcgpt-space-4, 18px);
}

.hcgpt-salone__profile-title {
	margin: 0;
	color: var(--hcgpt-color-text);
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	line-height: 1.15;
}

.hcgpt-salone__cardcopy {
	margin: var(--hcgpt-space-2, 8px) 0 0;
	color: var(--hcgpt-color-text-muted);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	line-height: 1.5;
}

.hcgpt-salone__cardcopy {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hcgpt-salone__profile-head {
	align-items: center;
}

.hcgpt-salone__profile-head .hcgpt-salone__profile-title {
	margin-top: 2px;
	font-size: 18px;
	line-height: 1.25;
}

.hcgpt-salone__profile-head .hcgpt-salone__cardcopy {
	max-width: 640px;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hcgpt-salone__profile-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	box-shadow: none;
	overflow: hidden;
}

.hcgpt-salone__profile-card .hcgpt-salone__cardhead {
	align-items: center;
}

.hcgpt-salone__profile-card > :not(.hcgpt-salone__cardhead):not(.hcgpt-salone__cardfoot) {
	margin-left: 22px;
	margin-right: 22px;
}

.hcgpt-salone__profile-card > .hcgpt-salone__cardhead + * {
	margin-top: 18px;
}

.hcgpt-salone__profile-card > :last-child:not(.hcgpt-salone__cardfoot) {
	margin-bottom: 22px;
}

.hcgpt-salone__cardfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hcgpt-space-2, 8px);
	margin: 0;
	padding: 15px 22px;
	min-height: 62px;
	background: var(--hcgpt-settings-surface-3, var(--hcgpt-color-surface-2, #e8e8eb));
	color: var(--hcgpt-color-text-muted);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	line-height: 1.45;
}

.hcgpt-salone__cardfoot--note {
	justify-content: flex-start;
}

.hcgpt-salone__cardfoot--note span {
	max-width: 680px;
}

.hcgpt-salone__services-actions span {
	max-width: 520px;
}

.hcgpt-salone__color-field {
	display: grid !important;
	grid-template-columns: auto minmax(160px, 240px);
	align-items: end;
	gap: var(--hcgpt-space-2, 8px) var(--hcgpt-space-3, 12px);
}

.hcgpt-salone__color-field > span {
	grid-column: 1 / -1;
}

.hcgpt-salone__color-field input[type="color"] {
	width: 52px;
	height: 40px;
	padding: 2px;
	border-radius: var(--hcgpt-radius-md, 8px);
	cursor: pointer;
}

.hcgpt-salone__profile-actions {
	align-items: center;
	justify-content: flex-end;
}

@media (max-width: 560px) {
	.hcgpt-salone__color-field {
		grid-template-columns: 1fr;
	}

	.hcgpt-salone__color-field input[type="color"] {
		width: 100%;
	}

	.hcgpt-salone__profile-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.hcgpt-salone__services-actions {
		align-items: stretch;
		flex-direction: column;
	}
}

/* ===== Inline toggle (checkbox + label on one row) ===== */
.hcgpt-salone__toggle {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--hcgpt-space-2, 8px);
}

.hcgpt-salone__toggle input {
	width: auto;
}

/* ===== Weekly hours editor ===== */
.hcgpt-salone__hours-shell {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	box-shadow: none;
	overflow: hidden;
}

.hcgpt-salone__hours-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hcgpt-space-3, 14px);
	margin: 0;
	padding: 20px 22px 18px;
	min-height: 96px;
	border-bottom: 0;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__hours-title {
	margin: 0;
	font-size: 17px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__hours-copy {
	margin: 4px 0 0;
	max-width: 520px;
	color: var(--hcgpt-color-text-muted);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	line-height: 1.45;
}

.hcgpt-salone__hours-summary {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 10px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: 999px;
	background: var(--hcgpt-color-surface-2);
	color: var(--hcgpt-color-text-muted);
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

.hcgpt-salone__hours {
	display: flex;
	flex-direction: column;
	gap: var(--hcgpt-space-2, 10px);
	margin: 18px 22px 0;
}

.hcgpt-salone__hours-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr);
	align-items: center;
	gap: var(--hcgpt-space-3, 14px);
	min-height: 74px;
	padding: 14px 16px;
	border: 0;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hcgpt-salone__hours-card[data-closed="1"] {
	background: var(--hcgpt-settings-surface-3, var(--hcgpt-color-surface-2, #e8e8eb));
}

.hcgpt-salone__hours-daywrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hcgpt-salone__hours-day {
	font-weight: 600;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__hours-state {
	color: var(--hcgpt-color-text-muted);
	font-size: 12px;
	font-weight: 600;
}

.hcgpt-salone__hours-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 26px;
	margin: 0;
	cursor: pointer;
}

.hcgpt-salone__hours-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.hcgpt-salone__hours-switch span {
	position: relative;
	display: block;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: var(--hcgpt-color-border);
	transition: background 0.15s ease;
}

.hcgpt-salone__hours-switch span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hcgpt-color-surface);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}

.hcgpt-salone__hours-switch input:checked + span {
	background: var(--hcgpt-primary);
}

.hcgpt-salone__hours-switch input:checked + span::after {
	transform: translateX(20px);
}

.hcgpt-salone__hours-times {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--hcgpt-space-2, 6px);
	min-width: 0;
}

.hcgpt-salone__hours-time {
	min-width: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
	padding: 8px 12px;
	border: 0;
	border-radius: 12px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	font-size: 14px;
	outline: none;
	transition: border-color .15s ease;
	box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .04);
}
.hcgpt-salone__hours-time:focus {
	border-color: var(--hcgpt-primary, #6e3aff);
}

.hcgpt-salone__hours-arrow {
	color: var(--hcgpt-color-text-muted);
	font-size: 14px;
}

.hcgpt-salone__hours-card[data-closed="1"] .hcgpt-salone__hours-times {
	opacity: 0.38;
	pointer-events: none;
}

.hcgpt-salone__slot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hcgpt-space-3, 14px);
	margin: var(--hcgpt-space-4, 18px) 0 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__hours-shell > .hcgpt-salone__slot,
.hcgpt-salone__hours-shell > .hcgpt-salone__error,
.hcgpt-salone__hours-shell > .hcgpt-salone__actions {
	margin-left: 22px;
	margin-right: 22px;
}

.hcgpt-salone__hours-shell > .hcgpt-salone__actions {
	margin-bottom: 22px;
}

.hcgpt-salone__slot-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__slot-help {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salone__slot-options {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
}

.hcgpt-salone__slot-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	gap: 0;
	cursor: pointer;
}

.hcgpt-salone__slot-choice input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.hcgpt-salone__slot-choice span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--hcgpt-color-text-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}

.hcgpt-salone__slot-choice span:hover {
	background: rgba(23, 23, 23, .06);
}

.hcgpt-salone__slot-choice input:checked + span {
	color: #fff;
	background: var(--hcgpt-primary, #6e3aff);
	box-shadow: 0 1px 4px rgba(110, 58, 255, .24);
}

@media (max-width: 560px) {
	.hcgpt-salone__hours-head,
	.hcgpt-salone__slot {
		flex-direction: column;
		align-items: stretch;
	}

	.hcgpt-salone__hours-summary {
		width: max-content;
	}

	.hcgpt-salone__hours-card {
		grid-template-columns: 1fr auto;
	}

	.hcgpt-salone__hours-times {
		grid-column: 1 / -1;
	}

	.hcgpt-salone__slot-options {
		width: 100%;
		justify-content: space-between;
	}

	.hcgpt-salone__slot-choice {
		flex: 1 1 0;
	}

	.hcgpt-salone__slot-choice span {
		width: 100%;
	}
}

/* ===== List rows (services + staff) ===== */
.hcgpt-salone__list {
	display: flex;
	flex-direction: column;
	gap: var(--hcgpt-space-2, 8px);
	margin-bottom: var(--hcgpt-space-3, 12px);
}

.hcgpt-salone__row {
	display: flex;
	align-items: center;
	gap: var(--hcgpt-space-3, 12px);
	min-height: 74px;
	padding: 14px 16px;
	border: 0;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__service {
	display: flex;
	flex-direction: column;
	gap: var(--hcgpt-space-2, 8px);
}

.hcgpt-salone__service + .hcgpt-salone__service {
	margin-top: var(--hcgpt-space-2, 8px);
}

/* Operator photo (or initials fallback) in the Team list rows. */
.hcgpt-salone__staff-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hcgpt-color-text);
	background: var(--hcgpt-color-surface);
	border: 1px solid var(--hcgpt-color-border);
	overflow: hidden;
}

.hcgpt-salone__staff-avatar.has-photo {
	border-radius: var(--hcgpt-photo-shape-left-sm, 12px 0 0 12px);
}

.hcgpt-salone__staff-avatar.has-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hcgpt-salone__row-main {
	flex: 1 1 auto;
	min-width: 0;
}

.hcgpt-salone__row-name {
	font-weight: 600;
	color: var(--hcgpt-color-text);
	overflow-wrap: anywhere;
}

.hcgpt-salone__row-meta {
	color: var(--hcgpt-color-text-muted);
	font-size: var(--hcgpt-text-sm, 0.8125rem);
	margin-top: 2px;
}

.hcgpt-salone__row-actions {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hcgpt-space-2, 6px);
	white-space: nowrap;
}

/* Status pill (Active / Inactive) — cascade-safe colours. */
.hcgpt-salone__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border: 1px solid rgba(23, 23, 23, .08);
	color: var(--hcgpt-color-text-muted);
	background: var(--hcgpt-color-surface-2);
}

.hcgpt-salone__badge--on {
	color: var(--hcgpt-brand-1, #6e3aff);
	background: var(--hcgpt-brand-bg, rgba(110, 58, 255, .08));
	border-color: rgba(110, 58, 255, .24);
}

/* Inline edit form below a row (toggled by salon-admin.js). */
.hcgpt-salone__row-edit[hidden] {
	display: none;
}

.hcgpt-salone__row-edit {
	padding: 14px;
	border: 0;
	border-radius: 14px;
	margin-top: -4px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__row-edit-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(120px, 0.85fr) minmax(120px, 0.85fr);
	gap: var(--hcgpt-space-3, 12px);
}

.hcgpt-salone__row-edit-grid label {
	margin: 0;
}

@media (max-width: 720px) {
	.hcgpt-salone__row {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.hcgpt-salone__row-actions {
		width: 100%;
		flex-wrap: wrap;
	}

	.hcgpt-salone__row-edit-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Service catalog + beauty toggle (2026-06) --- */
.hcgpt-salone__beauty-inline {
	margin: 4px 22px 0;
	padding: 14px 18px;
	border: 0;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}
.hcgpt-salone__beauty-inline > strong {
	display: block;
	font-size: 14px;
	margin-bottom: 4px;
}
.hcgpt-salone__beauty-inline > p {
	font-size: 13px;
	color: var(--hcgpt-color-text-muted, #737373);
	margin: 0 0 10px;
}

.hcgpt-salone__cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 22px 18px;
	min-height: 96px;
	border-bottom: 0;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__cardhead::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 14px;
	border: 1px solid rgba(110, 58, 255, .22);
	background: var(--hcgpt-brand-bg, rgba(110, 58, 255, .08));
	font-family: dashicons;
	font-size: 20px;
	color: rgba(110, 58, 255, .7);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hcgpt-salone__cardhead[data-card-icon="identity"]::before { content: "\f513"; }
.hcgpt-salone__cardhead[data-card-icon="images"]::before   { content: "\f128"; }
.hcgpt-salone__cardhead[data-card-icon="copy"]::before     { content: "\f464"; }
.hcgpt-salone__cardhead[data-card-icon="services"]::before { content: "\f323"; }

.hcgpt-salone__cardhead > div {
	min-width: 0;
	margin-right: auto;
}

.hcgpt-salone__cardhead > .hcgpt-mb-card__title {
	margin-right: auto;
}

.hcgpt-salone__cardhead .hcgpt-mb-card__title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18px;
	line-height: 1.25;
}

.hcgpt-salone__cardhead > .hcgpt-btn {
	margin-top: 2px;
	flex: 0 0 auto;
}

.hcgpt-salone__group {
	margin-bottom: var(--hcgpt-space-4, 18px);
}

.hcgpt-salone__group-title {
	margin: 0 0 var(--hcgpt-space-2, 8px);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hcgpt-color-text-muted);
}

/* Catalog picker modal */
.hcgpt-salone__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--hcgpt-space-4, 16px);
}

.hcgpt-salone__modal[hidden] {
	display: none;
}

.hcgpt-salone__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.hcgpt-salone__modal-panel {
	position: relative;
	width: min(640px, 100%);
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: var(--hcgpt-color-surface);
	color: var(--hcgpt-color-text);
	border: 1px solid var(--hcgpt-color-border);
	border-radius: var(--hcgpt-radius-md, 12px);
	overflow: hidden;
}

.hcgpt-salone__modal-head,
.hcgpt-salone__modal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hcgpt-space-2, 8px);
	padding: var(--hcgpt-space-3, 14px) var(--hcgpt-space-4, 16px);
}

.hcgpt-salone__modal-head {
	border-bottom: 1px solid var(--hcgpt-color-border);
}

.hcgpt-salone__modal-head h3 {
	margin: 0;
	font-size: var(--hcgpt-text-md, 1rem);
}

.hcgpt-salone__modal-foot {
	border-top: 1px solid var(--hcgpt-color-border);
}

.hcgpt-salone__modal-body {
	padding: var(--hcgpt-space-3, 12px) var(--hcgpt-space-4, 16px);
	overflow-y: auto;
}

.hcgpt-salone__modal-count {
	font-size: var(--hcgpt-text-sm, 0.875rem);
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salone__catalog-domain {
	margin-bottom: var(--hcgpt-space-4, 18px);
}

.hcgpt-salone__catalog-grouplabel {
	margin: var(--hcgpt-space-3, 12px) 0 var(--hcgpt-space-1, 4px);
	font-size: var(--hcgpt-text-sm, 0.8125rem);
	font-weight: 600;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salone__catalog-item {
	display: flex;
	align-items: center;
	gap: var(--hcgpt-space-2, 10px);
	padding: var(--hcgpt-space-2, 8px);
	border-radius: var(--hcgpt-radius-md, 8px);
	cursor: pointer;
}

.hcgpt-salone__catalog-item:hover {
	background: var(--hcgpt-color-surface-2);
}

.hcgpt-salone__catalog-item.is-added {
	opacity: 0.5;
	cursor: default;
}

.hcgpt-salone__catalog-name {
	flex: 1;
}

.hcgpt-salone__catalog-dur {
	font-size: var(--hcgpt-text-sm, 0.8125rem);
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salone__catalog-added {
	font-size: var(--hcgpt-text-xs, 0.75rem);
	color: var(--hcgpt-color-text-muted);
}

/* ---- Workspace sections (merged Public page + Hours + Services tab) ---- */
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone-ws,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone-ws__section,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone-ws__section > .hcgpt-salone,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone-ws .hcgpt-mb-card {
	max-width: 100%;
	min-width: 0;
}

.hcgpt-salone-ws__section {
	margin: 0;
}

.hcgpt-salone-ws__section + .hcgpt-salone-ws__section {
	margin-top: var(--hcgpt-space-6, 32px);
	padding-top: 0;
	border-top: 0;
}

.hcgpt-salone-ws__section-title {
	margin: 0 0 var(--hcgpt-space-3, 14px);
	font-size: var(--hcgpt-text-lg, 1.125rem);
	font-weight: 700;
	color: var(--hcgpt-color-text);
}

/* Workspace completion pass: keep every nested editor on the same Settings
   card grammar as Usage. White cards get grey field shells; controls inside
   those grey fields stay white and stable. */
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone-ws {
	display: flex;
	flex-direction: column;
	gap: 0;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label:not(.hcgpt-salone__toggle):not(.hcgpt-salone__slot-choice):not(.hcgpt-salone__hours-switch) {
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
	margin: 0;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label > input,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label > select,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label > textarea {
	min-height: 44px;
	border: 0;
	border-radius: 12px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .04);
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label > textarea {
	min-height: 112px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__field2,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__field3 {
	gap: 12px;
	margin-top: 0;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > label,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > .hcgpt-salone__field2,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > .hcgpt-salone__field3,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > .hcgpt-salone__uploadfield,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > .hcgpt-salone__gallery {
	margin-top: 12px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > .hcgpt-salone__cardhead + .hcgpt-salone__field2,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > .hcgpt-salone__cardhead + label {
	margin-top: 18px;
}

/* ---- Image upload control (logo / hero) ---- */
.hcgpt-salone__uploadfield {
	display: flex;
	flex-direction: column;
	gap: var(--hcgpt-space-2, 8px);
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__uploadlabel {
	font-size: var(--hcgpt-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__upload {
	display: flex;
	align-items: center;
	gap: var(--hcgpt-space-3, 12px);
	flex-wrap: wrap;
	min-width: 0;
}

.hcgpt-salone__upload-drop {
	display: flex;
	align-items: center;
	gap: var(--hcgpt-space-3, 12px);
	flex: 1 1 auto;
	min-width: 0;
	min-height: 74px;
	padding: 12px 14px;
	border: 0;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	color: var(--hcgpt-color-text-muted);
	cursor: pointer;
	text-align: left;
	transition: color 0.15s, box-shadow 0.15s;
	box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .04);
}

.hcgpt-salone__upload-drop:hover,
.hcgpt-salone__upload-drop:focus-visible {
	color: var(--hcgpt-color-text);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hcgpt-primary) 32%, transparent);
	outline: none;
}

.hcgpt-salone__upload-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
	border: 0;
	overflow: hidden;
}

.hcgpt-salone__upload-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hcgpt-salone__upload:not(.has-image) .hcgpt-salone__upload-thumb {
	display: none;
}

.hcgpt-salone__upload-cta {
	font-size: var(--hcgpt-text-sm, 0.875rem);
	font-weight: 600;
}

.hcgpt-salone__upload.is-busy .hcgpt-salone__upload-drop {
	opacity: 0.6;
	pointer-events: none;
}

/* ---- Gallery upload (multi-image) ---- */
.hcgpt-salone__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--hcgpt-space-3, 12px);
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
}

.hcgpt-salone__gallery-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 14px;
	border: 0;
	overflow: hidden;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
}

.hcgpt-salone__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hcgpt-salone__gallery-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.65);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s;
}

.hcgpt-salone__gallery-remove:hover,
.hcgpt-salone__gallery-remove:focus-visible {
	background: rgba(15, 23, 42, 0.9);
	outline: none;
}

.hcgpt-salone__gallery-add {
	justify-content: center;
}

.hcgpt-salone__gallery.is-busy .hcgpt-salone__gallery-add {
	opacity: 0.6;
	pointer-events: none;
}

/* ===== Staff Working Hours (Team hours editor) ===== */
.hcgpt-salone__staff-hours-shell {
	border: 0;
	border-radius: 18px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	box-shadow: none;
	overflow: hidden;
}

.hcgpt-salone__staff-hours-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hcgpt-space-3, 14px);
	padding: 20px 22px 18px;
	min-height: 96px;
	border-bottom: 0;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__staff-hours-title {
	margin: 0;
	font-size: 17px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__staff-hours-copy {
	margin: 4px 0 0;
	max-width: 560px;
	color: var(--hcgpt-color-text-muted);
	font-size: var(--hcgpt-text-sm, 0.875rem);
	line-height: 1.45;
}

.hcgpt-salone__staff-hours-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 18px 22px 0;
	padding: 0 0 22px;
}

/* --- Staff member card --- */
.hcgpt-salone__staff-hours-member {
	border: 0;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .04);
	overflow: hidden;
}

.hcgpt-salone__staff-hours-header {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 74px;
	padding: 14px 16px;
	cursor: pointer;
	transition: background .12s ease;
	width: 100%;
	border: 0;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
	font: inherit;
	color: inherit;
	text-align: left;
}

.hcgpt-salone__staff-hours-header:hover {
	background: var(--hcgpt-settings-surface-3, var(--hcgpt-color-surface-2, #e8e8eb));
}

.hcgpt-salone__staff-hours-info {
	flex: 1 1 auto;
	min-width: 0;
}

.hcgpt-salone__staff-hours-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border: 1px solid rgba(23, 23, 23, .08);
	color: var(--hcgpt-color-text-muted);
	background: var(--hcgpt-color-surface-2);
	white-space: nowrap;
}

.hcgpt-salone__staff-hours-badge--custom {
	color: var(--hcgpt-brand-1, #6e3aff);
	background: var(--hcgpt-brand-bg, rgba(110, 58, 255, .08));
	border-color: rgba(110, 58, 255, .24);
}

.hcgpt-salone__staff-hours-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	border-radius: 8px;
	color: var(--hcgpt-color-text-muted);
	transition: transform .18s ease;
}

.hcgpt-salone__staff-hours-chevron::before {
	content: "";
	width: 8px;
	height: 8px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.hcgpt-salone__staff-hours-member.is-open .hcgpt-salone__staff-hours-chevron {
	transform: rotate(180deg);
}

/* --- Panel (collapsible) --- */
.hcgpt-salone__staff-hours-panel {
	padding: 16px;
}

.hcgpt-salone__staff-hours-panel[hidden] {
	display: none;
}

.hcgpt-salone__staff-hours-inherit-toggle {
	margin: 0 0 16px;
}

/* --- Weekly editor --- */
.hcgpt-salone__staff-hours-week {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.hcgpt-salone__staff-hours-week[hidden] {
	display: none;
}

.hcgpt-salone__staff-hours-day {
	padding: 12px 14px;
	border: 0;
	border-radius: 14px;
	background: var(--hcgpt-settings-surface-2, var(--hcgpt-color-surface-2, #f4f4f5));
}

.hcgpt-salone__staff-hours-day-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.hcgpt-salone__staff-hours-day-label {
	font-weight: 600;
	font-size: 13px;
	color: var(--hcgpt-color-text);
}

.hcgpt-salone__staff-hours-day-off {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
	background: var(--hcgpt-color-surface-2, rgba(23, 23, 23, .04));
	border: 1px solid rgba(23, 23, 23, .06);
}

.hcgpt-salone__staff-hours-windows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hcgpt-salone__staff-hours-window {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hcgpt-salone__staff-hours-time {
	min-width: 0;
	width: 110px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	padding: 7px 10px;
	border: 0;
	border-radius: 12px;
	background: var(--hcgpt-settings-surface-1, var(--hcgpt-color-surface, #fff));
	font-size: 14px;
	outline: none;
	transition: border-color .15s ease;
	box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .04);
}

.hcgpt-salone__staff-hours-time:focus {
	border-color: var(--hcgpt-primary, #6e3aff);
}

.hcgpt-salone__staff-hours-day-actions {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

/* Workspace final alignment: keep the embedded Salon Suite panels on the same
   stable header/body/footer rhythm as the accepted Settings Usage cards. */
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone-ws {
	gap: 24px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone {
	--hcgpt-salone-workspace-inset: 16px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone-ws__section + .hcgpt-salone-ws__section {
	margin-top: 0;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-shell {
	gap: 20px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone > .hcgpt-mb-card {
	gap: 14px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > :not(.hcgpt-salone__cardhead):not(.hcgpt-salone__cardfoot),
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone > .hcgpt-mb-card > :not(.hcgpt-salone__cardhead):not(.hcgpt-salone__cardfoot) {
	margin-top: 0;
	margin-left: var(--hcgpt-salone-workspace-inset);
	margin-right: var(--hcgpt-salone-workspace-inset);
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > .hcgpt-salone__cardhead + *,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone > .hcgpt-mb-card > .hcgpt-salone__cardhead + * {
	margin-top: 4px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > :last-child:not(.hcgpt-salone__cardfoot),
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone > .hcgpt-mb-card > :last-child:not(.hcgpt-salone__cardfoot) {
	margin-bottom: var(--hcgpt-salone-workspace-inset);
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__field2,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__field3 {
	gap: 14px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label:not(.hcgpt-salone__toggle):not(.hcgpt-salone__slot-choice):not(.hcgpt-salone__hours-switch),
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__uploadfield,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__gallery,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__services-intro,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__beauty-inline {
	padding: 14px 16px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__addform {
	padding: 0 var(--hcgpt-salone-workspace-inset) var(--hcgpt-salone-workspace-inset);
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label > span,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__uploadlabel {
	min-height: 16px;
	line-height: 1.25;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label > input,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label > select {
	min-height: 46px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone form label > textarea {
	min-height: 132px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__upload,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__gallery {
	gap: 12px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__upload-drop {
	min-height: 76px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__gallery-grid {
	grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
	gap: 10px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__color-field {
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	row-gap: 10px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__color-field input[type="color"] {
	width: 64px;
	height: 46px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__profile-card > .hcgpt-salone__cardfoot {
	margin-top: 4px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__hours,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__hours-shell > .hcgpt-salone__slot,
#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__hours-shell > .hcgpt-salone__error {
	margin-left: var(--hcgpt-salone-workspace-inset);
	margin-right: var(--hcgpt-salone-workspace-inset);
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__hours-shell > .hcgpt-salone__slot {
	margin-top: 18px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__hours-shell > .hcgpt-salone__actions {
	margin: 18px 0 0;
	border-radius: 0;
	min-height: 64px;
	padding: 15px 22px;
}

#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__staff-hours-list {
	margin-top: 18px;
	margin-left: var(--hcgpt-salone-workspace-inset);
	margin-right: var(--hcgpt-salone-workspace-inset);
	padding-bottom: var(--hcgpt-salone-workspace-inset);
}

@media (max-width: 560px) {
	.hcgpt-salone__staff-hours-header {
		flex-wrap: wrap;
		padding: 12px 16px;
	}

	.hcgpt-salone__staff-hours-badge {
		font-size: 10px;
		padding: 3px 8px;
	}

	.hcgpt-salone__staff-hours-panel {
		padding: 0 16px 16px;
	}

	.hcgpt-salone__staff-hours-window {
		flex-wrap: wrap;
	}

	.hcgpt-salone__staff-hours-time {
		width: 90px;
	}

	#hcgpt-app-view-settings .hcgpt-mb-salon .hcgpt-salone__color-field {
		grid-template-columns: 1fr;
	}
}