/*
 * SnapWeb presentation bridge.
 *
 * ShopiChain keeps its provider-neutral dashboard CSS for every host. When the
 * SnapWeb shell owns the document, this layer maps the dashboard to SnapWeb's
 * live design contract instead of maintaining a second palette or radius set.
 */
body.snapweb-app-shell .shopichain-customer-dashboard-host {
	--fcom-primary-color: var(--snapweb-color-brand);
	--fcom-card-bg: var(--snapweb-color-surface);
	--fcom-secondary-bg: var(--snapweb-color-surface-muted);
	--fcom-text-color: var(--snapweb-color-heading);
	--fcom-secondary-text-color: var(--snapweb-color-text);
	--fcom-border-color: var(--snapweb-color-border);
	--el-color-primary: var(--snapweb-color-brand);
	--el-bg-color: var(--snapweb-color-surface);
	--el-fill-color-light: var(--snapweb-color-surface-muted);
	--el-text-color-primary: var(--snapweb-color-heading);
	--el-text-color-regular: var(--snapweb-color-text);
	--el-border-color-lighter: var(--snapweb-color-border);
	container-type: inline-size;
	width: min(calc(100% - var(--snapweb-shell-inline-gutter, 1rem) - var(--snapweb-shell-inline-gutter, 1rem)), var(--snapweb-shell-width, 1360px));
	min-width: 0;
	margin-inline: auto;
	padding-block: var(--snapweb-route-spacing);
	color: var(--snapweb-color-text);
	font: inherit;
}

@media (min-width: 901px) {
	body.snapweb-app-shell .snapweb-shell-layout.is-sidebar-visible .shopichain-customer-dashboard-host {
		width: 100%;
		margin-inline: 0;
	}
}

body.snapweb-app-shell .shopichain-customer-dashboard {
	display: grid;
	grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(18px, 2.2vw, 30px);
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--snapweb-color-text);
	overflow: visible;
}

body.snapweb-app-shell .shopichain-customer-dashboard__nav {
	position: sticky;
	top: calc(var(--snapweb-header-height, 76px) + 20px);
	display: flex;
	align-self: start;
	gap: 4px;
	padding: 14px;
	border: 1px solid var(--snapweb-color-border);
	border-radius: var(--snapweb-radius-md);
	background: color-mix(in srgb, var(--snapweb-color-surface) 96%, transparent);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--snapweb-color-heading) 5%, transparent);
}

body.snapweb-app-shell .shopichain-customer-dashboard__nav-head {
	margin: 0 2px 10px;
	padding: 4px 6px 16px;
	border-color: var(--snapweb-color-border);
}

body.snapweb-app-shell .shopichain-customer-dashboard__avatar {
	border-color: var(--snapweb-color-border);
	background: var(--snapweb-color-surface-muted);
	color: var(--snapweb-color-brand);
	box-shadow: none;
}

body.snapweb-app-shell .shopichain-customer-dashboard__identity small,
body.snapweb-app-shell .shopichain-customer-dashboard__identity em {
	color: var(--snapweb-color-text);
}

body.snapweb-app-shell .shopichain-customer-dashboard__identity strong,
body.snapweb-app-shell .shopichain-dashboard-heading h1,
body.snapweb-app-shell .shopichain-dashboard-heading h2,
body.snapweb-app-shell .shopichain-dashboard-panel h3,
body.snapweb-app-shell .shopichain-dashboard-empty h1,
body.snapweb-app-shell .shopichain-dashboard-empty h2 {
	color: var(--snapweb-color-heading);
}

body.snapweb-app-shell .shopichain-customer-dashboard__nav a {
	position: relative;
	min-height: 44px;
	gap: 12px;
	padding: 0 12px;
	border-radius: var(--snapweb-menu-radius, var(--snapweb-control-radius));
	background: transparent;
	color: var(--snapweb-color-text);
	font-size: .9rem;
	font-weight: 720;
	transition: color var(--snapweb-transition), background var(--snapweb-transition);
}

body.snapweb-app-shell .shopichain-customer-dashboard__nav a > span:first-child,
body.snapweb-app-shell .shopichain-customer-dashboard__nav a svg {
	display: grid;
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	place-items: center;
}

body.snapweb-app-shell .shopichain-customer-dashboard__nav a:hover,
body.snapweb-app-shell .shopichain-customer-dashboard__nav a:focus-visible,
body.snapweb-app-shell .shopichain-customer-dashboard__nav a.is-active {
	color: var(--snapweb-color-brand);
}

body.snapweb-app-shell.snapweb-menu-state--indicator .shopichain-customer-dashboard__nav a::before {
	position: absolute;
	top: 9px;
	bottom: 9px;
	left: -14px;
	width: 3px;
	border-radius: 99px;
	background: var(--snapweb-color-brand);
	content: "";
	opacity: 0;
	transform: scaleY(.45);
	transition: opacity var(--snapweb-transition), transform var(--snapweb-transition);
}

body.snapweb-app-shell.snapweb-menu-state--indicator .shopichain-customer-dashboard__nav a:is(:hover, :focus-visible, .is-active) {
	background: transparent;
}

body.snapweb-app-shell.snapweb-menu-state--indicator .shopichain-customer-dashboard__nav a:is(:hover, :focus-visible, .is-active)::before {
	opacity: 1;
	transform: scaleY(1);
}

body.snapweb-app-shell.snapweb-menu-state--background .shopichain-customer-dashboard__nav a:is(:hover, :focus-visible, .is-active) {
	background: color-mix(in srgb, var(--snapweb-color-brand) 11%, transparent);
}

body.snapweb-app-shell .shopichain-customer-dashboard__nav .shopichain-customer-dashboard__native {
	border-color: var(--snapweb-color-border);
}

body.snapweb-app-shell .shopichain-customer-dashboard__content {
	min-width: 0;
	min-height: calc(100dvh - var(--snapweb-header-height, 76px) - var(--snapweb-route-spacing-start, 24px) - var(--snapweb-route-spacing-end, 48px));
	padding: 0;
	background: transparent;
	overflow-anchor: none;
}

@container (max-width: 720px) {
	body.snapweb-app-shell .shopichain-customer-dashboard {
		display: block;
	}

	body.snapweb-app-shell .shopichain-customer-dashboard__nav {
		position: static;
		flex-direction: row;
		margin-bottom: 22px;
		overflow-x: auto;
	}

	body.snapweb-app-shell .shopichain-customer-dashboard__nav-head,
	body.snapweb-app-shell .shopichain-customer-dashboard__nav .shopichain-customer-dashboard__native {
		display: none;
	}

	body.snapweb-app-shell .shopichain-customer-dashboard__nav a {
		flex: 0 0 auto;
	}
}

body.snapweb-app-shell .shopichain-dashboard-heading {
	margin-bottom: clamp(20px, 2.5vw, 30px);
}

body.snapweb-app-shell .shopichain-dashboard-heading > span {
	color: var(--snapweb-color-brand);
	font-size: .72rem;
	letter-spacing: .075em;
}

body.snapweb-app-shell .shopichain-dashboard-heading h1,
body.snapweb-app-shell .shopichain-dashboard-heading h2 {
	font-size: clamp(1.65rem, 3vw, 2.25rem);
	line-height: 1.08;
	letter-spacing: -.035em;
}

body.snapweb-app-shell .shopichain-dashboard-heading p,
body.snapweb-app-shell .shopichain-dashboard-empty p {
	color: var(--snapweb-color-text);
}

body.snapweb-app-shell :is(.shopichain-dashboard-empty, .shopichain-dashboard-panel, .shopichain-dashboard-table-wrap, .shopichain-dashboard-profile, .shopichain-dashboard-downloads article, .shopichain-dashboard-subscriptions article, .shopichain-dashboard-related-order) {
	max-width: none;
	border-color: var(--snapweb-color-border);
	border-radius: var(--snapweb-radius-md);
	background: var(--snapweb-color-surface);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--snapweb-color-heading) 5%, transparent);
}

body.snapweb-app-shell .shopichain-dashboard-empty {
	padding: clamp(22px, 3vw, 34px);
}

body.snapweb-app-shell :is(.shopichain-dashboard-empty, .shopichain-dashboard-panel) h2,
body.snapweb-app-shell :is(.shopichain-dashboard-empty, .shopichain-dashboard-panel) h3 {
	letter-spacing: -.02em;
}

body.snapweb-app-shell :is(.shopichain-dashboard-table-wrap, .shopichain-dashboard-profile) {
	overflow: hidden;
}

body.snapweb-app-shell .shopichain-dashboard-table th {
	background: var(--snapweb-color-surface-muted);
	color: var(--snapweb-color-text);
}

body.snapweb-app-shell :is(.shopichain-dashboard-table th, .shopichain-dashboard-table td, .shopichain-dashboard-profile div, .shopichain-dashboard-order-items article) {
	border-color: var(--snapweb-color-border);
}

body.snapweb-app-shell :is(.shopichain-dashboard-downloads a, .shopichain-dashboard-button, .shopichain-dashboard-empty button, .shopichain-dashboard-payment > .shopichain-dashboard-button) {
	min-height: var(--snapweb-control-size, 40px);
	border-radius: var(--snapweb-button-radius);
	background: var(--snapweb-color-brand);
	color: var(--snapweb-color-on-brand);
}

body.snapweb-app-shell :is(.shopichain-dashboard-downloads a, .shopichain-dashboard-button, .shopichain-dashboard-empty button, .shopichain-dashboard-payment > .shopichain-dashboard-button):hover {
	background: var(--snapweb-color-brand-hover);
}

body.snapweb-app-shell :is(.shopichain-dashboard-pagination button, .shopichain-dashboard-back, .shopichain-dashboard-button-secondary, .shopichain-dashboard-button-quiet, .shopichain-dashboard-payment > select) {
	border-color: var(--snapweb-color-border);
	border-radius: var(--snapweb-control-radius);
	background: var(--snapweb-color-surface-muted);
	color: var(--snapweb-color-heading);
}

body.snapweb-app-shell .shopichain-dashboard-row-open {
	border-radius: var(--snapweb-control-radius);
}

body.snapweb-app-shell :is(.shopichain-dashboard-loading i, .shopichain-dashboard-status) {
	background: var(--snapweb-color-surface-muted);
}

body.snapweb-app-shell :is(.shopichain-customer-dashboard__nav a, .shopichain-dashboard-text-link, .shopichain-dashboard-table a):focus-visible {
	outline: 2px solid var(--snapweb-color-brand);
	outline-offset: 2px;
}

@media (max-width: 820px) {
	body.snapweb-app-shell .shopichain-customer-dashboard {
		display: block;
	}

	body.snapweb-app-shell .shopichain-customer-dashboard__nav {
		position: static;
		flex-direction: row;
		margin-bottom: 22px;
		overflow-x: auto;
		border: 1px solid var(--snapweb-color-border);
		border-radius: var(--snapweb-radius-md);
	}

	body.snapweb-app-shell .shopichain-customer-dashboard__nav a {
		flex: 0 0 auto;
	}

	body.snapweb-app-shell.snapweb-menu-state--indicator .shopichain-customer-dashboard__nav a::before {
		top: auto;
		right: 12px;
		bottom: -14px;
		left: 12px;
		width: auto;
		height: 3px;
		transform: scaleX(.45);
	}

	body.snapweb-app-shell.snapweb-menu-state--indicator .shopichain-customer-dashboard__nav a:is(:hover, :focus-visible, .is-active)::before {
		transform: scaleX(1);
	}
}

@media (max-width: 520px) {
	body.snapweb-app-shell .shopichain-customer-dashboard__nav a {
		width: var(--snapweb-control-size, 42px);
		padding: 0;
		justify-content: center;
	}

	body.snapweb-app-shell .shopichain-customer-dashboard__nav a > span:last-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.snapweb-app-shell .shopichain-customer-dashboard__nav a,
	body.snapweb-app-shell .shopichain-customer-dashboard__nav a::before {
		transition: none;
	}
}
html.dark .shopichain-dashboard-modal,html[data-color-mode="dark"] .shopichain-dashboard-modal,html[data-snapweb-color-mode="dark"] .shopichain-dashboard-modal,body.dark .shopichain-dashboard-modal,body[data-color-mode="dark"] .shopichain-dashboard-modal,html[data-snapweb-theme="dark"] .shopichain-dashboard-modal,body.snapweb-dark .shopichain-dashboard-modal{color-scheme:dark;--shopichain-dashboard-surface:var(--snapweb-color-surface,var(--snapweb-community-surface,var(--fcom-primary-bg,var(--wp--preset--color--card-base,#191b1f))));--shopichain-dashboard-text:var(--snapweb-color-heading,var(--snapweb-community-text,var(--fcom-primary-text,var(--wp--preset--color--textcolor,#fafafa))));--shopichain-dashboard-muted:var(--snapweb-color-text,var(--snapweb-community-muted,var(--fcom-secondary-text,var(--wp--preset--color--textcolor,#d1d5db))));--shopichain-dashboard-border:var(--snapweb-color-border,var(--snapweb-community-border,var(--fcom-border-color,var(--wp--preset--color--border,#343840))))}
html.dark .shopichain-dashboard-modal__button.is-secondary,html[data-color-mode="dark"] .shopichain-dashboard-modal__button.is-secondary,html[data-snapweb-color-mode="dark"] .shopichain-dashboard-modal__button.is-secondary,body.dark .shopichain-dashboard-modal__button.is-secondary,body[data-color-mode="dark"] .shopichain-dashboard-modal__button.is-secondary,html[data-snapweb-theme="dark"] .shopichain-dashboard-modal__button.is-secondary,body.snapweb-dark .shopichain-dashboard-modal__button.is-secondary{background:var(--snapweb-color-surface-muted,var(--snapweb-community-surface-muted,var(--fcom-secondary-bg,#23262c)));color:var(--shopichain-dashboard-text,#fafafa)}