/* ============================================================
   Lunpe — design system (dark cozy, roxo)
   ============================================================ */

/* Tokens ---------------------------------------------------- */

:root {
	--background: #0d0a12;
	--surface: #15111d;
	--elevated: #1c1726;
	--border: #2a2336;
	--border-strong: #3a3149;

	--primary: #9b6dff;
	--primary-light: #c8aeff;
	--primary-strong: #8a5aee;
	--primary-glow: rgba(155, 109, 255, 0.28);

	--content: #f5f0fa;
	--muted: #aaa0b5;

	--success: #6fd39a;
	--danger: #ff7a8a;
	--warning: #ffc978;

	--radius-control: 0.625rem;
	--radius-card: 1rem;

	--shadow-soft: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -12px rgb(0 0 0 / 0.5);
	--shadow-raised: 0 4px 16px -2px rgb(0 0 0 / 0.45), 0 18px 48px -12px rgb(0 0 0 / 0.65);
	--shadow-glow: 0 0 28px -4px rgba(155, 109, 255, 0.3);

	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--container: 80rem;
}

/* Base ------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
	background-color: var(--background);
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -15%, rgba(120, 68, 220, 0.22), transparent 75%),
		radial-gradient(circle 600px at 15% 45%, rgba(90, 40, 180, 0.08), transparent 70%),
		radial-gradient(circle 600px at 85% 75%, rgba(130, 70, 240, 0.06), transparent 70%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: var(--content);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.01em;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

svg {
	display: block;
	max-width: 100%;
}

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

::selection {
	background-color: var(--primary);
	color: var(--background);
}

/* Layout ---------------------------------------------------- */

.shell {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (min-width: 40rem) {
	.shell {
		padding-inline: 1.5rem;
	}
}

@media (min-width: 64rem) {
	.shell {
		padding-inline: 2rem;
	}
}

.app {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.app-main {
	flex: 1;
}

/* Utilities ------------------------------------------------ */

.hidden {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.muted {
	color: var(--muted);
}

.text-sm {
	font-size: 0.875rem;
}

.text-xs {
	font-size: 0.75rem;
}

.font-medium {
	font-weight: 500;
}

.mono {
	font-family: var(--font-mono);
}

.mt-1 {
	margin-top: 0.25rem;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.row--lg {
	gap: 2rem;
}

.col {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.badge {
	display: inline-block;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: var(--surface);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	color: var(--muted);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Buttons --------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding-inline: 1rem;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	background: none;
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 0.15s,
		color 0.15s,
		border-color 0.15s,
		filter 0.15s;
}

.btn--sm {
	height: 2rem;
	padding-inline: 0.75rem;
	font-size: 0.875rem;
}

.btn--lg {
	height: 3rem;
	padding-inline: 1.5rem;
	font-size: 1rem;
}

.btn--primary {
	background: linear-gradient(135deg, #a87ffb 0%, #8b5cf6 50%, #7c3aed 100%);
	color: #ffffff;
	box-shadow: 0 4px 16px -2px rgba(139, 92, 246, 0.45);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn--primary:hover {
	background: linear-gradient(135deg, #b592fc 0%, #986cf7 50%, #8749f1 100%);
	box-shadow: 0 6px 24px -2px rgba(139, 92, 246, 0.65);
	transform: translateY(-1px);
}

.btn--primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px -2px rgba(139, 92, 246, 0.4);
}

.btn--secondary {
	border-color: var(--border-strong);
	background-color: var(--elevated);
	color: var(--content);
}

.btn--secondary:hover {
	border-color: var(--primary);
	color: var(--primary-light);
}

.btn--ghost {
	color: var(--muted);
}

.btn--ghost:hover {
	background-color: var(--elevated);
	color: var(--content);
}

.btn--danger {
	background-color: var(--danger);
	color: var(--background);
}

.btn--danger:hover {
	filter: brightness(1.1);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.5;
}

.btn__spinner {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 9999px;
	animation: spin 0.6s linear infinite;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: var(--radius-control);
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition:
		background-color 0.15s,
		color 0.15s;
}

.icon-btn svg {
	width: 1.25rem;
	height: 1.25rem;
}

.icon-btn--sm {
	width: 2rem;
	height: 2rem;
}

.icon-btn--sm svg {
	width: 1rem;
	height: 1rem;
}

.icon-btn--ghost:hover {
	background-color: var(--elevated);
	color: var(--content);
}

.icon-btn--solid {
	background-color: var(--elevated);
	color: var(--content);
}

.icon-btn--solid:hover {
	background-color: var(--border);
}

/* Inputs ---------------------------------------------------- */

.field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.field__label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--content);
}

.field__hint {
	font-size: 0.75rem;
	color: var(--muted);
}

.field__error {
	font-size: 0.75rem;
	color: var(--danger);
}

.input {
	height: 2.5rem;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	background-color: var(--surface);
	padding-inline: 0.75rem;
	font-size: 0.875rem;
	color: var(--content);
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.input::placeholder {
	color: color-mix(in srgb, var(--muted) 60%, transparent);
}

.input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

.input:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.input--error {
	border-color: var(--danger);
}

.input--error:focus {
	border-color: var(--danger);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent);
}

.input-wrap {
	position: relative;
}

.input-wrap__icon {
	position: absolute;
	inset-block: 0;
	left: 0;
	margin-block: auto;
	margin-left: 0.75rem;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--muted);
	pointer-events: none;
}

.input--search {
	padding-left: 2.5rem;
}

.input-wrap__toggle {
	position: absolute;
	inset-block: 0;
	right: 0;
	display: flex;
	width: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition: color 0.15s;
}

.input-wrap__toggle:hover {
	color: var(--content);
}

.input-wrap__toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

.input--password {
	padding-right: 2.75rem;
}

.select-wrap {
	position: relative;
}

.select {
	height: 2.5rem;
	width: 100%;
	appearance: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	background-color: var(--surface);
	padding-left: 0.75rem;
	padding-right: 2.5rem;
	font-size: 0.875rem;
	color: var(--content);
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

.select:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.select--error {
	border-color: var(--danger);
}

.select--error:focus {
	border-color: var(--danger);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent);
}

.select-wrap__icon {
	position: absolute;
	inset-block: 0;
	right: 0;
	margin-block: auto;
	margin-right: 0.75rem;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--muted);
	pointer-events: none;
}

/* Cards ----------------------------------------------------- */

.card {
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background-color: var(--surface);
	padding: 1.25rem;
}

.card--flush {
	padding: 0;
}

.card--link {
	display: block;
	transition:
		border-color 0.15s,
		background-color 0.15s;
}

.card--link:hover {
	border-color: color-mix(in srgb, var(--primary) 60%, transparent);
	background-color: var(--elevated);
}

.card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

/* Alerts ---------------------------------------------------- */

.alert {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	border: 1px solid;
	border-radius: var(--radius-card);
	padding: 1rem;
}

.alert__icon {
	margin-top: 0.125rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.alert__content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
}

.alert__title {
	font-weight: 500;
	color: var(--content);
}

.alert__body {
	color: var(--muted);
}

.alert--info {
	border-color: color-mix(in srgb, var(--primary) 40%, transparent);
	background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.alert--info .alert__icon {
	color: var(--primary-light);
}

.alert--success {
	border-color: color-mix(in srgb, var(--success) 40%, transparent);
	background-color: color-mix(in srgb, var(--success) 10%, transparent);
}

.alert--success .alert__icon {
	color: var(--success);
}

.alert--warning {
	border-color: color-mix(in srgb, var(--warning) 40%, transparent);
	background-color: color-mix(in srgb, var(--warning) 10%, transparent);
}

.alert--warning .alert__icon {
	color: var(--warning);
}

.alert--danger {
	border-color: color-mix(in srgb, var(--danger) 40%, transparent);
	background-color: color-mix(in srgb, var(--danger) 10%, transparent);
}

.alert--danger .alert__icon {
	color: var(--danger);
}

/* Estados (empty / error / loading) ------------------------- */

.state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	border: 1px dashed var(--border);
	border-radius: var(--radius-card);
	padding: 3.5rem 1.5rem;
	text-align: center;
}

.state__icon-wrap {
	display: flex;
	width: 3rem;
	height: 3rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: var(--elevated);
	color: var(--muted);
}

.state--danger .state__icon-wrap {
	background-color: color-mix(in srgb, var(--danger) 10%, transparent);
	color: var(--danger);
}

.state__icon {
	width: 1.5rem;
	height: 1.5rem;
}

.state__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.state__title {
	font-size: 1rem;
	font-weight: 500;
}

.state__desc {
	max-width: 24rem;
	font-size: 0.875rem;
	color: var(--muted);
	text-wrap: pretty;
}

.state__action {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.loading {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--muted);
}

.loading__spinner {
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 9999px;
	animation: spin 0.6s linear infinite;
}

.loading--sm .loading__spinner {
	width: 1rem;
	height: 1rem;
}

.loading--md .loading__spinner {
	width: 1.5rem;
	height: 1.5rem;
}

.loading--lg .loading__spinner {
	width: 2.25rem;
	height: 2.25rem;
	border-width: 3px;
}

.loading__label {
	font-size: 0.875rem;
}

/* Logo ------------------------------------------------------ */

.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	text-decoration: none;
}

.logo__svg {
	height: 2rem;
	width: auto;
	display: block;
}

.logo__mark {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--primary);
}

.logo__text {
	font-size: 1.125rem;
	letter-spacing: -0.01em;
}

/* Header / navegação ---------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--border);
	background-color: color-mix(in srgb, var(--background) 85%, transparent);
	backdrop-filter: blur(8px);
}

.site-header__inner {
	display: flex;
	height: 4rem;
	align-items: center;
	gap: 1.5rem;
}

.nav {
	display: none;
	align-items: center;
	gap: 0.25rem;
}

@media (min-width: 48rem) {
	.nav {
		display: flex;
	}
}

.nav__link {
	border-radius: var(--radius-control);
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--muted);
	transition:
		background-color 0.15s,
		color 0.15s;
}

.nav__link:hover {
	color: var(--content);
}

.nav__link--active {
	background-color: var(--elevated);
	color: var(--content);
}

.nav-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: var(--radius-control);
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition:
		background-color 0.15s,
		color 0.15s;
}

.menu-toggle:hover {
	background-color: var(--elevated);
	color: var(--content);
}

.menu-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

@media (min-width: 48rem) {
	.menu-toggle {
		display: none;
	}
}

.mobile-menu {
	border-top: 1px solid var(--border);
}

@media (min-width: 48rem) {
	.mobile-menu {
		display: none;
	}
}

.mobile-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-block: 0.75rem;
}

/* Footer ---------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--border);
	background-color: var(--surface);
	padding-block: 2.25rem 1.5rem;
}

.site-footer__main {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media (min-width: 52rem) {
	.site-footer__main {
		display: grid;
		grid-template-columns: 1.35fr 2fr;
		gap: 3.5rem;
		align-items: start;
	}
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.65rem;
}

.footer-brand .logo__svg {
	height: 1.75rem;
	width: auto;
}

.footer-brand__text {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 22rem;
}

.footer-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.225rem 0.6rem;
	border-radius: 9999px;
	background-color: rgba(111, 211, 154, 0.08);
	border: 1px solid rgba(111, 211, 154, 0.2);
	font-size: 0.6875rem;
	font-weight: 500;
	color: #8fe3b1;
	margin-top: 0.15rem;
}

.footer-status__dot {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 9999px;
	background-color: var(--success);
	box-shadow: 0 0 6px var(--success);
	animation: statusPulse 2.5s ease-in-out infinite;
}

@keyframes statusPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.55; transform: scale(0.85); }
}

.footer-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 1.25rem;
}

@media (min-width: 38rem) {
	.footer-nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.footer-col__title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--content);
}

.footer-col__list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-col__link {
	font-size: 0.8125rem;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-col__link:hover {
	color: var(--primary-light);
}

.site-footer__bottom {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

@media (min-width: 48rem) {
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.site-footer__legal {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.75rem;
	color: var(--muted);
}

.site-footer__copy {
	color: var(--muted);
	margin: 0;
}

.site-footer__sep {
	color: var(--border-strong);
	opacity: 0.5;
}

.site-footer__compliance {
	color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.footer-trust-badges {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius-control);
	background-color: var(--elevated);
	border: 1px solid var(--border);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.02em;
	transition: border-color 0.15s, color 0.15s;
}

.trust-badge:hover {
	border-color: rgba(155, 109, 255, 0.35);
	color: var(--content);
}

.trust-badge__icon {
	width: 0.8125rem;
	height: 0.8125rem;
	color: var(--muted);
	flex-shrink: 0;
}

.trust-badge--secure .trust-badge__icon {
	color: var(--primary-light);
}

/* Hero / páginas -------------------------------------------- */

.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding-block: 6rem;
	text-align: center;
}

.hero__title {
	max-width: 42rem;
	font-size: 2.25rem;
	font-weight: 600;
	text-wrap: balance;
}

@media (min-width: 40rem) {
	.hero__title {
		font-size: 3rem;
	}
}

.hero__lead {
	max-width: 36rem;
	font-size: 1rem;
	color: var(--muted);
	text-wrap: pretty;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.hero--home {
	padding-block: 4rem 5rem;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
	text-align: center;
	width: 100%;
}

@media (min-width: 60rem) {
	.hero__grid {
		grid-template-columns: 1.2fr 0.8fr;
		text-align: left;
		gap: 3.5rem;
	}
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	border-radius: 9999px;
	border: 1px solid rgba(155, 109, 255, 0.35);
	background-color: rgba(28, 22, 40, 0.7);
	padding: 0.35rem 0.85rem;
	font-size: 0.75rem;
	color: var(--primary-light);
	margin-bottom: 0.5rem;
}

.hero__main {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: center;
}

@media (min-width: 60rem) {
	.hero__main {
		align-items: flex-start;
	}
}

.hero__mascote-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__mascote-glow {
	position: absolute;
	width: 18rem;
	height: 18rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.35) 0%, transparent 70%);
	filter: blur(32px);
	z-index: 0;
}

.hero__mascote-img {
	position: relative;
	z-index: 1;
	width: 18rem;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 35px rgba(155, 109, 255, 0.4));
	animation: luFloat 5s ease-in-out infinite;
}

.hero__delivery-card {
	position: absolute;
	left: 0;
	bottom: 1rem;
	z-index: 2;
	width: 13.75rem;
	max-width: 100%;
	padding: 0.7rem 0.9rem;
	background-color: rgba(13, 10, 18, 0.88);
	border: 1px solid rgba(155, 109, 255, 0.4);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(10px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
	text-align: left;
}

@media (max-width: 48rem) {
	.hero__delivery-card {
		position: relative;
		left: auto;
		bottom: auto;
		margin-top: 1.25rem;
		width: 100%;
		max-width: 18rem;
	}
}

.hero__delivery-head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--primary-light);
	margin-bottom: 0.5rem;
}

.hero__delivery-dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background-color: var(--success);
	box-shadow: 0 0 6px rgba(111, 211, 154, 0.8);
	animation: deliveryPulse 2s ease-in-out infinite;
}

.hero__delivery-feed {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	height: 2.5rem;
}

.hero__delivery-feed li {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	opacity: 0;
	animation: deliveryCycle 9s ease-in-out infinite;
}

.hero__delivery-feed li:nth-child(2) {
	animation-delay: 3s;
}

.hero__delivery-feed li:nth-child(3) {
	animation-delay: 6s;
}

.hero__delivery-feed strong {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--content);
}

.hero__delivery-feed span {
	font-size: 0.6875rem;
	color: var(--muted);
}

@keyframes deliveryCycle {
	0% {
		opacity: 0;
		transform: translateY(6px);
	}
	4%,
	29% {
		opacity: 1;
		transform: translateY(0);
	}
	33%,
	100% {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@keyframes deliveryPulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}

.page {
	padding-block: 4rem;
}

.page__head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-bottom: 3rem;
}

.page__title {
	font-size: 1.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.page__lead {
	max-width: 36rem;
	font-size: 0.875rem;
	color: var(--muted);
	text-wrap: pretty;
}

/* Toast ----------------------------------------------------- */

.toaster {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	pointer-events: none;
}

@media (min-width: 40rem) {
	.toaster {
		align-items: flex-end;
	}
}

.toast {
	pointer-events: auto;
	display: flex;
	width: 100%;
	max-width: 24rem;
	align-items: flex-start;
	gap: 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background-color: var(--elevated);
	padding: 1rem;
	box-shadow: var(--shadow-raised);
}

.toast__icon {
	margin-top: 0.125rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.toast__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.125rem;
	font-size: 0.875rem;
}

.toast__title {
	font-weight: 500;
	color: var(--content);
}

.toast__msg {
	color: var(--muted);
}

.toast__close {
	margin: -0.25rem -0.25rem 0 0;
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--radius-control);
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition:
		background-color 0.15s,
		color 0.15s;
}

.toast__close:hover {
	background-color: var(--surface);
	color: var(--content);
}

.toast__close svg {
	width: 1rem;
	height: 1rem;
}

.toast--info .toast__icon {
	color: var(--primary-light);
}

.toast--success .toast__icon {
	color: var(--success);
}

.toast--warning .toast__icon {
	color: var(--warning);
}

.toast--danger .toast__icon {
	color: var(--danger);
}

/* Modal ----------------------------------------------------- */

.modal {
	margin: auto;
	width: calc(100% - 2rem);
	max-width: 32rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background-color: var(--elevated);
	padding: 0;
	color: var(--content);
}

.modal::backdrop {
	background-color: color-mix(in srgb, var(--background) 70%, transparent);
}

.modal[open] {
	box-shadow: var(--shadow-raised);
}

.modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--border);
	padding: 1.25rem;
}

.modal__heading {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.modal__title {
	font-size: 1rem;
	font-weight: 500;
}

.modal__desc {
	font-size: 0.875rem;
	color: var(--muted);
}

.modal__close {
	margin: -0.25rem -0.25rem 0 0;
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--radius-control);
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition:
		background-color 0.15s,
		color 0.15s;
}

.modal__close:hover {
	background-color: var(--surface);
	color: var(--content);
}

.modal__close svg {
	width: 1.25rem;
	height: 1.25rem;
}

.modal__body {
	padding: 1.25rem;
}

.modal__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.75rem;
	border-top: 1px solid var(--border);
	padding: 1.25rem;
}

/* Design system (página /design) ---------------------------- */

.ds-section {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	border-top: 1px solid var(--border);
	padding-block: 3rem;
}

.ds-section:first-of-type {
	border-top: 0;
}

.ds-heading {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ds-swatches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 40rem) {
	.ds-swatches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.ds-swatches {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.swatch {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background-color: var(--surface);
	padding: 0.75rem;
}

.swatch__chip {
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
}

.swatch__meta {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.swatch__name {
	font-size: 0.875rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.swatch__value {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--muted);
}

.type-scale {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.type-3xl {
	font-size: 1.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.type-xl {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.type-base {
	font-size: 1rem;
	font-weight: 500;
}

.ds-inputs {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 40rem) {
	.ds-inputs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ds-cards {
	display: grid;
	gap: 1rem;
}

@media (min-width: 40rem) {
	.ds-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.ds-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ds-states {
	display: grid;
	gap: 1rem;
}

@media (min-width: 64rem) {
	.ds-states {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* Auth ------------------------------------------------------ */

.auth-shell {
	max-width: 72rem;
	margin-inline: auto;
	padding-block: 1.75rem 3rem;
}

@media (min-width: 48rem) {
	.auth-shell {
		padding-block: 3.5rem 4.5rem;
	}
}

.auth-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 64rem) {
	.auth-split {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 3.5rem;
	}
}

/* Lado Esquerdo (Showcase PC) */
.auth-showcase {
	display: none;
	position: relative;
}

@media (min-width: 64rem) {
	.auth-showcase {
		display: block;
	}
}

.auth-showcase__ambient {
	position: absolute;
	top: -15%;
	left: -20%;
	width: 140%;
	height: 140%;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.18) 0%, transparent 65%);
	filter: blur(48px);
	pointer-events: none;
	z-index: 0;
}

.auth-showcase__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.auth-showcase__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	border-radius: 9999px;
	border: 1px solid rgba(155, 109, 255, 0.35);
	background-color: rgba(28, 22, 40, 0.75);
	backdrop-filter: blur(8px);
	padding: 0.35rem 0.85rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--primary-light);
}

.badge-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background-color: var(--success);
	box-shadow: 0 0 8px var(--success);
}

.auth-showcase__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	background: linear-gradient(135deg, #ffffff 40%, #c8aeff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.auth-showcase__desc {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--muted);
	max-width: 32rem;
}

/* Mascote Lu com aura e flutuação */
.auth-mascote-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: 0.5rem;
	padding: 1rem;
}

.auth-mascote-glow {
	position: absolute;
	width: 17rem;
	height: 17rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.32) 0%, rgba(138, 90, 238, 0.12) 50%, transparent 70%);
	filter: blur(28px);
	z-index: 0;
}

.auth-mascote-img {
	position: relative;
	z-index: 1;
	width: 16rem;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 35px rgba(155, 109, 255, 0.35));
	animation: luFloat 5s ease-in-out infinite;
}

@keyframes luFloat {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

.auth-mascote-pill {
	position: absolute;
	bottom: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	border: 1px solid rgba(155, 109, 255, 0.35);
	background-color: rgba(21, 17, 29, 0.9);
	backdrop-filter: blur(12px);
	padding: 0.4rem 0.9rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--content);
	box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
	z-index: 2;
}

.auth-features {
	display: grid;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin-top: 0.25rem;
}

.auth-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.auth-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-control);
	border: 1px solid rgba(155, 109, 255, 0.25);
	background-color: rgba(28, 22, 40, 0.8);
	color: var(--primary-light);
	flex-shrink: 0;
}

.auth-feature-item strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--content);
}

.auth-feature-item p {
	font-size: 0.8125rem;
	color: var(--muted);
	margin-top: 0.125rem;
}

/* Card de Autenticação */
.auth-card-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Apresentação da Mascote Lu em Destaque no Mobile */
.auth-mobile-mascote-spotlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 1.75rem;
	width: 100%;
	max-width: 27rem;
}

@media (min-width: 64rem) {
	.auth-mobile-mascote-spotlight {
		display: none;
	}
}

.auth-mobile-mascote-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.65rem;
}

.auth-mobile-mascote-glow {
	position: absolute;
	width: 11rem;
	height: 11rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.38) 0%, rgba(124, 58, 237, 0.15) 50%, transparent 70%);
	filter: blur(22px);
	z-index: 0;
	pointer-events: none;
}

.auth-mobile-mascote-img {
	position: relative;
	z-index: 1;
	width: 8.5rem;
	height: auto;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 28px rgba(155, 109, 255, 0.4));
	animation: luFloat 5s ease-in-out infinite;
}

.auth-mobile-mascote-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border-radius: 9999px;
	border: 1px solid rgba(155, 109, 255, 0.35);
	background-color: rgba(28, 22, 40, 0.75);
	backdrop-filter: blur(8px);
	padding: 0.25rem 0.8rem;
	font-size: 0.71875rem;
	font-weight: 500;
	color: var(--primary-light);
	margin-bottom: 0.5rem;
}

.auth-mobile-title {
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--content);
	margin-bottom: 0.25rem;
}

.auth-mobile-subtitle {
	font-size: 0.875rem;
	color: var(--muted);
	max-width: 20rem;
	line-height: 1.45;
}

.auth-card {
	width: 100%;
	max-width: 27rem;
	border: 1px solid rgba(155, 109, 255, 0.25);
	border-radius: var(--radius-card);
	background: linear-gradient(180deg, rgba(26, 20, 36, 0.9) 0%, rgba(19, 15, 27, 0.98) 100%);
	backdrop-filter: blur(16px);
	padding: 1.75rem 1.25rem;
	box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

@media (min-width: 32rem) {
	.auth-card {
		padding: 2.25rem 2rem;
	}
}

.auth-desktop-header {
	display: none;
	margin-bottom: 1.5rem;
}

@media (min-width: 64rem) {
	.auth-desktop-header {
		display: block;
	}
}

.auth-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--content);
	letter-spacing: -0.02em;
}

.auth-subtitle {
	font-size: 0.875rem;
	color: var(--muted);
	margin-top: 0.25rem;
}

.auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	padding: 0.25rem;
	margin-bottom: 1.5rem;
	gap: 0.25rem;
}

.auth-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.25rem;
	border: 0;
	border-radius: calc(var(--radius-control) - 2px);
	background: none;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.auth-tab:hover {
	color: var(--content);
}

.auth-tab--active {
	background-color: var(--surface);
	color: var(--content);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.auth-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 2.75rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-control);
	background-color: var(--elevated);
	color: var(--content);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.auth-social-btn:hover {
	background-color: color-mix(in srgb, var(--elevated) 80%, var(--primary-light));
	border-color: var(--primary);
	color: var(--content);
}

.auth-social-btn:active {
	transform: scale(0.99);
}

.auth-social-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.auth-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin-block: 1.5rem;
	color: var(--muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--border);
}

.auth-divider span {
	padding-inline: 0.75rem;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.auth-form .btn {
	width: 100%;
}

.auth-links-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	margin-top: -0.25rem;
}

.auth-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted);
	cursor: pointer;
	user-select: none;
}

.auth-checkbox-label input[type="checkbox"] {
	accent-color: var(--primary);
	width: 1rem;
	height: 1rem;
	cursor: pointer;
}

.auth-link {
	color: var(--primary-light);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s;
}

.auth-link:hover {
	color: var(--primary);
	text-decoration: underline;
}

.auth-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: var(--muted);
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}

.auth-switch-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--primary-light);
	font-weight: 500;
	cursor: pointer;
	font-size: inherit;
	transition: color 0.15s;
}

.auth-switch-btn:hover {
	color: var(--primary);
	text-decoration: underline;
}

.auth-terms {
	font-size: 0.75rem;
	color: var(--muted);
	line-height: 1.4;
	text-align: center;
	margin-top: -0.25rem;
}

@media (max-width: 48rem) {
	.auth-form .input {
		font-size: 1rem;
		height: 2.75rem;
	}
	.auth-social-btn {
		height: 2.875rem;
		font-size: 0.9375rem;
	}
	.auth-tab {
		height: 2.375rem;
		font-size: 0.9375rem;
	}
	.auth-form .btn {
		height: 2.875rem;
		font-size: 0.9375rem;
		font-weight: 600;
	}
	.auth-divider {
		margin-block: 1.25rem;
	}
}

.mb-4 {
	margin-bottom: 1rem;
}

.mb-5 {
	margin-bottom: 3rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

/* Legal Pages (Terms & Privacy) ----------------------------- */

.legal-shell {
	max-width: 72rem;
	margin-inline: auto;
	padding-block: 3.5rem 5rem;
}

.legal-hero {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 3.5rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: 2.5rem;
}

@media (min-width: 48rem) {
	.legal-hero {
		flex-direction: row;
		align-items: flex-end;
	}
}

.legal-hero__content {
	max-width: 42rem;
}

.badge--legal {
	display: inline-block;
	border-radius: 9999px;
	border: 1px solid rgba(155, 109, 255, 0.3);
	background-color: rgba(28, 22, 40, 0.7);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	color: var(--primary-light);
	margin-bottom: 0.75rem;
}

.legal-hero__title {
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--content);
}

@media (min-width: 48rem) {
	.legal-hero__title {
		font-size: 2.85rem;
	}
}

.legal-hero__desc {
	font-size: 1.05rem;
	color: var(--muted);
	margin-top: 0.75rem;
	line-height: 1.6;
}

.legal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--muted);
	margin-top: 1rem;
}

.legal-hero__mascote-wrap {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.legal-hero__mascote {
	width: 10.5rem;
	height: auto;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 25px rgba(155, 109, 255, 0.3));
	animation: luFloat 6s ease-in-out infinite;
}

.legal-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: flex-start;
}

@media (min-width: 60rem) {
	.legal-layout {
		grid-template-columns: 17rem 1fr;
	}
}

.legal-sidebar {
	position: sticky;
	top: 5rem;
}

.legal-sidebar__title {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin-bottom: 0.75rem;
}

.legal-nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.legal-nav__link {
	padding: 0.4rem 0.6rem;
	border-radius: var(--radius-control);
	font-size: 0.875rem;
	color: var(--muted);
	text-decoration: none;
	transition: all 0.15s;
}

.legal-nav__link:hover {
	color: var(--content);
	background-color: var(--elevated);
}

.legal-help__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--content);
}

.legal-help__text {
	font-size: 0.8125rem;
	color: var(--muted);
	line-height: 1.5;
	margin-top: 0.25rem;
}

.legal-shield-card {
	background: linear-gradient(180deg, rgba(30, 22, 45, 0.9) 0%, rgba(20, 16, 30, 0.9) 100%);
	border-color: rgba(155, 109, 255, 0.25);
}

.legal-shield-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
	color: var(--primary-light);
}

.legal-body {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding: 2.5rem;
	line-height: 1.7;
}

.legal-section h2 {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--content);
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(155, 109, 255, 0.1);
}

.legal-section p {
	color: #d1c8de;
	margin-bottom: 0.75rem;
}

.legal-section ul {
	margin-block: 0.75rem;
	padding-left: 1.25rem;
	color: #d1c8de;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.legal-notice {
	border-left: 3px solid var(--primary);
	background-color: rgba(28, 22, 40, 0.6);
	border-radius: 0 var(--radius-control) var(--radius-control) 0;
	padding: 0.85rem 1rem;
	font-size: 0.875rem;
	color: var(--primary-light);
	margin-block: 1rem;
}

.legal-link {
	color: var(--primary-light);
	text-decoration: underline;
}

.legal-link:hover {
	color: var(--primary);
}

/* Account page & Navbar User -------------------------------- */

.nav-user-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	border: 1.5px solid var(--primary);
	background-color: var(--elevated);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.15s, border-color 0.15s;
}

.nav-user-btn:hover {
	transform: scale(1.05);
	border-color: var(--primary-light);
}

.nav-user-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nav-user-initial {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--primary-light);
	text-transform: uppercase;
}

/* Account Page (Dual-Pane PC vs Mobile) -------------------------------- */
.account-shell {
	max-width: 76rem;
	margin-inline: auto;
	padding-block: 2rem 4rem;
}

.account-flash-wrap {
	max-width: 100%;
}

.account-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 64rem) {
	.account-split {
		grid-template-columns: 18.5rem 1fr;
		gap: 2rem;
		align-items: start;
	}
}

/* Lado Esquerdo (Showcase PC) */
.account-showcase {
	display: none;
	position: relative;
	background: linear-gradient(180deg, rgba(21, 17, 29, 0.95) 0%, rgba(13, 10, 18, 0.98) 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: 1.75rem;
	overflow: hidden;
}

@media (min-width: 64rem) {
	.account-showcase {
		display: block;
		position: sticky;
		top: 5.5rem;
	}
}

.account-showcase__ambient {
	position: absolute;
	top: -15%;
	left: -20%;
	width: 140%;
	height: 140%;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.16) 0%, transparent 65%);
	filter: blur(44px);
	pointer-events: none;
	z-index: 0;
}

.account-showcase__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.account-showcase__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	border-radius: 9999px;
	border: 1px solid rgba(155, 109, 255, 0.35);
	background-color: rgba(28, 22, 40, 0.75);
	backdrop-filter: blur(8px);
	padding: 0.35rem 0.85rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--primary-light);
}

.account-profile-box {
	display: flex;
	align-items: center;
	gap: 1.125rem;
}

.account-avatar-wrap {
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	overflow: hidden;
	border: 2px solid rgba(155, 109, 255, 0.4);
	background-color: var(--elevated);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 16px rgba(155, 109, 255, 0.2);
}

.account-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.account-avatar-placeholder {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-light);
	text-transform: uppercase;
}

.account-profile-meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.account-name-badge-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.account-user-name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--content);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-user-email {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-user-joined {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	color: var(--muted);
	margin: 0.2rem 0 0;
	opacity: 0.85;
}

/* Mascote Lú em destaque */
.account-mascote-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 0.5rem;
}

.account-mascote-glow {
	position: absolute;
	width: 12rem;
	height: 12rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.28) 0%, rgba(138, 90, 238, 0.08) 50%, transparent 70%);
	filter: blur(24px);
	z-index: 0;
}

.account-mascote-img {
	position: relative;
	z-index: 1;
	width: 11rem;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 25px rgba(155, 109, 255, 0.3));
	animation: luFloat 5s ease-in-out infinite;
}

.account-mascote-pill {
	position: absolute;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 9999px;
	border: 1px solid rgba(155, 109, 255, 0.35);
	background-color: rgba(21, 17, 29, 0.92);
	backdrop-filter: blur(12px);
	padding: 0.35rem 0.8rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--content);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
	z-index: 2;
}

.account-perks-list {
	display: grid;
	gap: 0.875rem;
}

.account-perk-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem;
	border-radius: var(--radius-md);
	background-color: rgba(28, 22, 40, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.04);
}

.account-perk-item strong {
	display: block;
	font-size: 0.8125rem;
	color: var(--content);
	margin-bottom: 0.15rem;
}

.account-perk-item p {
	font-size: 0.75rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.4;
}

.account-perk-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: var(--radius-control);
	border: 1px solid rgba(155, 109, 255, 0.25);
	background-color: rgba(28, 22, 40, 0.8);
	color: var(--primary-light);
	flex-shrink: 0;
}

.account-logout-action {
	margin-top: 0.5rem;
}

/* Mobile Spotlight Top Banner */
.account-mobile-spotlight {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	margin-bottom: 0.75rem;
}

.account-mobile-top {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

.account-mobile-top .account-avatar-wrap {
	width: 2.25rem;
	height: 2.25rem;
	box-shadow: none;
	border-width: 1.5px;
}

.account-mobile-top .account-user-name {
	font-size: 0.9375rem;
	font-weight: 600;
}

.account-mobile-top .account-user-email {
	font-size: 0.75rem;
}

@media (min-width: 64rem) {
	.account-mobile-spotlight {
		display: none;
	}
}

/* Lado Direito / Conteúdo Principal */
.account-main-content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.account-card {
	padding: 1.5rem;
	border-radius: var(--radius-xl);
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	transition: border-color var(--transition-fast);
}

.account-card:hover {
	border-color: rgba(155, 109, 255, 0.3);
}

.account-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.account-card__title-group {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.account-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-control);
	background-color: var(--elevated);
	border: 1px solid var(--border);
	color: var(--primary-light);
	flex-shrink: 0;
}

.account-card__icon--google {
	background-color: #ffffff;
	border-color: #ffffff;
}

.account-card__title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--content);
	margin: 0 0 0.2rem 0;
}

.account-card__subtitle {
	font-size: 0.875rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.4;
}

.account-card__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.account-text-desc {
	font-size: 0.875rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.5;
}

.account-status-box {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1rem 1.125rem;
	border-radius: var(--radius-lg);
	border: 1px solid transparent;
}

.account-status-box--success {
	background-color: rgba(111, 211, 154, 0.08);
	border-color: rgba(111, 211, 154, 0.25);
	color: var(--content);
}

.account-status-box--success .account-status-box__icon {
	color: var(--success);
}

.account-status-box--info {
	background-color: rgba(155, 109, 255, 0.08);
	border-color: rgba(155, 109, 255, 0.25);
	color: var(--content);
}

.account-status-box--info .account-status-box__icon {
	color: var(--primary-light);
}

.account-status-box__icon {
	margin-top: 0.1rem;
	flex-shrink: 0;
}

.account-status-box__text strong {
	display: block;
	font-size: 0.875rem;
	margin-bottom: 0.2rem;
}

.account-status-box__text p {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.45;
}

.account-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.account-grid-2col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 48rem) {
	.account-grid-2col {
		grid-template-columns: 1fr 1fr;
	}
}

.account-form-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.5rem;
}

.account-current-email-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.875rem 1rem;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	flex-wrap: wrap;
}

.account-current-email-label {
	font-size: 0.8125rem;
	color: var(--muted);
}

.account-current-email-value {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--content);
}

.account-empty-orders {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2.5rem 1.5rem;
	gap: 0.5rem;
}

.account-empty-orders__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 9999px;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	color: var(--muted);
	margin-bottom: 0.5rem;
}

.account-empty-orders h4 {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--content);
	margin: 0;
}

.account-empty-orders p {
	font-size: 0.875rem;
	color: var(--muted);
	max-width: 24rem;
	margin: 0;
	line-height: 1.5;
}

/* Tabbed Navigation & Orders Hub in Account Page -------------------- */
.account-tabs-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.35rem;
	padding: 0.35rem;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-bottom: 0.75rem;
}

@media (min-width: 64rem) {
	.account-tabs-nav {
		display: none !important; /* No PC o menu fica no canto (sidebar), não no topo! */
	}
}

.account-tab-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.55rem 0.25rem;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	background: transparent;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
}

.account-tab-btn svg {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	color: currentColor;
}

.account-tab-btn:hover {
	color: var(--content);
	background-color: rgba(255, 255, 255, 0.04);
}

.account-tab-btn.is-active {
	background: linear-gradient(135deg, rgba(155, 109, 255, 0.22) 0%, rgba(124, 58, 237, 0.22) 100%);
	border-color: rgba(155, 109, 255, 0.45);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(155, 109, 255, 0.2);
}

.account-tab-btn--danger.is-active {
	background: rgba(239, 68, 68, 0.2);
	border-color: rgba(239, 68, 68, 0.45);
	color: #fca5a5;
}

.account-tab-panel {
	display: none;
	flex-direction: column;
	gap: 1.5rem;
}

.account-tab-panel.is-active {
	display: flex;
	animation: fadeInTab 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInTab {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.account-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.875rem;
}

@media (min-width: 48rem) {
	.account-stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.account-stat-card {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 1.125rem;
	border-radius: var(--radius-lg);
	background-color: var(--surface);
	border: 1px solid var(--border);
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.account-stat-card:hover {
	border-color: rgba(155, 109, 255, 0.3);
	transform: translateY(-2px);
}

.account-stat-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--radius-md);
	background-color: rgba(155, 109, 255, 0.12);
	border: 1px solid rgba(155, 109, 255, 0.25);
	color: var(--primary-light);
	flex-shrink: 0;
}

.account-stat-card__icon--success {
	background-color: rgba(111, 211, 154, 0.12);
	border-color: rgba(111, 211, 154, 0.25);
	color: #6fd39a;
}

.account-stat-card__icon--gold {
	background-color: rgba(255, 201, 120, 0.12);
	border-color: rgba(255, 201, 120, 0.25);
	color: #ffc978;
}

.account-stat-card__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.account-stat-card__value {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--content);
	line-height: 1.2;
}

.account-stat-card__label {
	font-size: 0.75rem;
	color: var(--muted);
	margin-top: 0.15rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-orders-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.875rem 1.125rem;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.account-orders-search {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex: 1;
	min-width: 14rem;
	color: var(--muted);
}

.account-orders-search input {
	width: 100%;
	background: transparent;
	border: 0;
	outline: none;
	font-size: 0.875rem;
	color: var(--content);
}

.account-orders-search input::placeholder {
	color: var(--muted);
	opacity: 0.7;
}

.account-orders-filters {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.account-orders-filter-btn {
	padding: 0.25rem 0.65rem;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: var(--surface);
	color: var(--muted);
	font-size: 0.75rem;
	cursor: pointer;
	transition: all 0.15s;
}

.account-orders-filter-btn:hover,
.account-orders-filter-btn.is-active {
	border-color: rgba(155, 109, 255, 0.4);
	color: var(--primary-light);
	background-color: rgba(155, 109, 255, 0.12);
}

.account-perks-trio {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 48rem) {
	.account-perks-trio {
		grid-template-columns: repeat(3, 1fr);
	}
}

.account-perk-box {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	border-radius: var(--radius-lg);
	background-color: rgba(28, 22, 40, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.04);
}

.account-perk-box__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-control);
	background-color: rgba(155, 109, 255, 0.12);
	border: 1px solid rgba(155, 109, 255, 0.25);
	color: var(--primary-light);
	flex-shrink: 0;
}

.account-perk-box strong {
	display: block;
	font-size: 0.8125rem;
	color: var(--content);
	margin-bottom: 0.2rem;
}

.account-perk-box p {
	font-size: 0.75rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.4;
}

.account-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: -0.5rem;
}

.account-panel-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--content);
	margin: 0;
}

.account-panel-desc {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0.2rem 0 0 0;
}

.account-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.account-sidebar-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	border-radius: var(--radius-md);
	color: var(--muted);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	background: transparent;
	width: 100%;
	text-align: left;
	transition: all 0.15s ease;
}

.account-sidebar-link:hover {
	color: var(--content);
	background-color: var(--elevated);
}

.account-sidebar-link.is-active {
	color: #ffffff;
	background: linear-gradient(135deg, rgba(155, 109, 255, 0.22) 0%, rgba(124, 58, 237, 0.18) 100%);
	border-color: rgba(155, 109, 255, 0.4);
	box-shadow: 0 4px 12px rgba(155, 109, 255, 0.15);
	font-weight: 600;
}

.account-sidebar-link.is-active svg {
	color: var(--primary-light);
}

.account-sidebar-link--danger:hover {
	color: #fca5a5;
	background-color: rgba(239, 68, 68, 0.1);
}

.account-sidebar-link--danger.is-active {
	color: #fca5a5;
	background: rgba(239, 68, 68, 0.18);
	border-color: rgba(239, 68, 68, 0.4);
}

.account-sidebar-link--admin {
	border: 1px solid rgba(155, 109, 255, 0.35);
	background: linear-gradient(135deg, rgba(155, 109, 255, 0.12) 0%, rgba(124, 58, 237, 0.08) 100%);
	color: var(--primary-light);
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.account-sidebar-link--admin:hover {
	border-color: rgba(155, 109, 255, 0.7);
	background: linear-gradient(135deg, rgba(155, 109, 255, 0.22) 0%, rgba(124, 58, 237, 0.18) 100%);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(155, 109, 255, 0.2);
}

.account-sidebar-link-left {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.badge--vip {
	border-color: rgba(255, 201, 120, 0.4);
	background: linear-gradient(135deg, rgba(255, 201, 120, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
	color: #ffc978;
	font-weight: 600;
}

.badge--success-soft {
	border-color: rgba(111, 211, 154, 0.35);
	background-color: rgba(111, 211, 154, 0.15);
	color: #6fd39a;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.badge--danger-soft {
	border-color: rgba(239, 68, 68, 0.4);
	background-color: rgba(239, 68, 68, 0.15);
	color: #f87171;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* 2FA Card & Danger Zone Styles ------------------------------------ */
.account-card__icon--shield {
	background-color: rgba(155, 109, 255, 0.12);
	border-color: rgba(155, 109, 255, 0.3);
	color: var(--primary-light);
}

.account-card--danger {
	border-color: rgba(239, 68, 68, 0.25);
	background: linear-gradient(180deg, rgba(30, 18, 24, 0.9) 0%, rgba(21, 15, 20, 0.95) 100%);
}

.account-card--danger:hover {
	border-color: rgba(239, 68, 68, 0.45);
}

.account-card__icon--danger {
	background-color: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.3);
	color: #f87171;
}

.account-card__title--danger {
	color: #f87171;
}

.account-details-collapse {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background-color: rgba(21, 17, 29, 0.4);
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

.account-details-collapse[open] {
	border-color: rgba(155, 109, 255, 0.25);
	padding-bottom: 1.25rem;
}

.account-details-collapse__summary {
	padding: 0.875rem 1.125rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted);
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.account-details-collapse__summary:hover {
	color: var(--content);
	background-color: rgba(255, 255, 255, 0.02);
}

.account-details-collapse__summary--danger {
	color: #fca5a5;
}

.account-details-collapse__summary--danger:hover {
	color: #f87171;
}

.account-details-collapse .account-form {
	padding-inline: 1.125rem;
}

/* 2FA Setup Flow */
.account-2fa-setup-card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.25rem;
	background-color: rgba(21, 17, 29, 0.7);
	border: 1px solid rgba(155, 109, 255, 0.25);
	border-radius: var(--radius-xl);
}

.account-2fa-setup-header h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--content);
	margin: 0 0 0.25rem 0;
}

.account-2fa-steps {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.account-2fa-step {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.account-2fa-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background-color: var(--primary);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.875rem;
	flex-shrink: 0;
	box-shadow: 0 0 12px rgba(155, 109, 255, 0.4);
}

.account-2fa-step-content {
	flex: 1;
	min-width: 0;
}

.account-2fa-step-content strong {
	display: block;
	font-size: 0.9375rem;
	color: var(--content);
	margin-bottom: 0.25rem;
}

.account-2fa-step-content p {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.45;
}

.account-2fa-qr-wrap {
	display: inline-flex;
	padding: 0.75rem;
	background-color: #ffffff;
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
	margin-top: 0.875rem;
}

.account-2fa-qr-img {
	width: 11rem;
	height: 11rem;
	display: block;
}

.account-2fa-qr-placeholder {
	width: 11rem;
	height: 11rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	font-size: 0.75rem;
}

.account-2fa-secret-box {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius-md);
	background-color: var(--elevated);
	border: 1px dashed rgba(155, 109, 255, 0.4);
	width: fit-content;
	max-width: 100%;
	flex-wrap: wrap;
}

.account-2fa-secret-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--primary-light);
	word-break: break-all;
}

.account-2fa-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.account-2fa-perks {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-block: 0.25rem;
}

.account-2fa-perk {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.8125rem;
	color: var(--muted);
}

.account-2fa-perk svg {
	color: var(--primary-light);
	flex-shrink: 0;
}

.account-2fa-input-row {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--border);
}

.input--totp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 1.25rem;
	letter-spacing: 0.25em;
	text-align: center;
	font-weight: 700;
	color: var(--primary-light);
	background-color: rgba(28, 22, 40, 0.9);
	border: 1.5px solid rgba(155, 109, 255, 0.35);
}

.input--totp:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(155, 109, 255, 0.25);
}

/* Danger Zone Details */
.account-danger-box {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.125rem;
	border-radius: var(--radius-lg);
	background-color: rgba(239, 68, 68, 0.06);
	border: 1px solid rgba(239, 68, 68, 0.2);
}

.account-danger-box__item strong {
	display: block;
	font-size: 0.875rem;
	color: #f87171;
	margin-bottom: 0.2rem;
}

.account-danger-box__item p {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.45;
}

.account-danger-box__lgpd {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(239, 68, 68, 0.15);
	color: var(--muted);
}

.account-danger-box__lgpd svg {
	color: #f87171;
	flex-shrink: 0;
	margin-top: 0.15rem;
}

.account-danger-box__lgpd strong {
	display: block;
	font-size: 0.8125rem;
	color: #fca5a5;
	margin-bottom: 0.2rem;
}

.account-danger-box__lgpd p {
	font-size: 0.75rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.4;
}

.account-checkbox-wrap {
	margin-block: 0.5rem;
}

.checkbox-label--danger {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	cursor: pointer;
	font-size: 0.8125rem;
	color: #fca5a5;
	line-height: 1.45;
}

.checkbox-label--danger input[type="checkbox"] {
	margin-top: 0.2rem;
	accent-color: #ef4444;
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
}

/* Centered Auth Wrappers (2FA & Reactivate) */
.auth-card-wrap--center {
	max-width: 32rem;
	margin-inline: auto;
}

.auth-card-wrap--center .auth-card {
	width: 100%;
}

.auth-2fa-badge-row {
	display: flex;
	align-items: center;
	margin-bottom: 0.75rem;
}

/* 2FA OTP Segmented Input Component -------------------------------- */
.auth-card--2fa {
	position: relative;
	overflow: hidden;
}

.otp-field {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.otp-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-block: 0.5rem 0.25rem;
	user-select: none;
}

.otp-master-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
	font-size: 1.5rem;
	letter-spacing: 1.5rem;
	color: transparent;
	background: transparent;
	border: 0;
	outline: none;
}

.otp-slots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 25rem;
	position: relative;
	z-index: 1;
}

.otp-slot {
	width: 3.25rem;
	height: 3.75rem;
	border-radius: var(--radius-lg);
	background-color: rgba(21, 17, 29, 0.85);
	border: 1.5px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--content);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.otp-slot__char {
	display: inline-block;
	transform: translateY(0);
	transition: transform 0.15s ease-out;
}

.otp-slot.is-filled {
	border-color: rgba(155, 109, 255, 0.5);
	background-color: rgba(30, 22, 45, 0.95);
	color: var(--primary-light);
	box-shadow: 0 4px 16px rgba(155, 109, 255, 0.2);
}

.otp-slot.is-filled .otp-slot__char {
	animation: popIn 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
	0% {
		transform: scale(0.6);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.otp-slot.is-active {
	border-color: var(--primary);
	background-color: rgba(38, 27, 60, 0.95);
	box-shadow: 0 0 0 3px rgba(155, 109, 255, 0.35), 0 0 24px rgba(155, 109, 255, 0.25);
}

.otp-slot.is-active:empty::after,
.otp-slot.is-active:not(.is-filled)::after {
	content: "";
	width: 2px;
	height: 1.5rem;
	background-color: var(--primary-light);
	animation: blinkCaret 1s step-end infinite;
}

@keyframes blinkCaret {
	from, to { opacity: 1; }
	50% { opacity: 0; }
}

.otp-divider {
	width: 0.65rem;
	height: 2px;
	border-radius: 9999px;
	background-color: rgba(155, 109, 255, 0.3);
	margin-inline: 0.125rem;
	flex-shrink: 0;
}

.otp-helper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--muted);
	margin-top: 0.625rem;
	text-align: center;
}

.otp-helper__pulse {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background-color: var(--success);
	box-shadow: 0 0 8px var(--success);
	animation: pulse 2s infinite;
	flex-shrink: 0;
}

.otp-apps-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.875rem 1rem;
	border-radius: var(--radius-lg);
	background-color: rgba(28, 22, 40, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.04);
	margin-top: 1rem;
}

.otp-apps-label {
	font-size: 0.6875rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.otp-apps-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
}

.otp-app-pill {
	font-size: 0.75rem;
	color: var(--content);
	background-color: rgba(21, 17, 29, 0.8);
	border: 1px solid var(--border);
	padding: 0.25rem 0.65rem;
	border-radius: 9999px;
	font-weight: 500;
}

/* Fallback para noscript ou navegadores sem JS */
noscript .otp-master-input {
	position: static;
	opacity: 1;
	height: 3rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 1.5rem;
	letter-spacing: 0.5em;
	text-align: center;
	font-weight: 700;
	color: var(--primary-light);
	background-color: rgba(28, 22, 40, 0.9);
	border: 1.5px solid rgba(155, 109, 255, 0.35);
	border-radius: var(--radius-control);
}

noscript .otp-slots {
	display: none;
}

@media (max-width: 25rem) {
	.otp-slot {
		width: 2.625rem;
		height: 3.125rem;
		font-size: 1.25rem;
	}
	.otp-slots {
		gap: 0.3rem;
	}
	.otp-divider {
		width: 0.4rem;
	}
}

/* Brand & Mascot Lore Page (/brand) ------------------------------------ */
.brand-page {
	max-width: 76rem;
	margin-inline: auto;
	padding-block: 2.5rem 5rem;
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.brand-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.25rem;
	padding-block: 2rem 1rem;
}

.brand-hero__ambient {
	position: absolute;
	top: -30%;
	left: 50%;
	transform: translateX(-50%);
	width: 120%;
	max-width: 50rem;
	height: 120%;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.2) 0%, rgba(124, 58, 237, 0.05) 50%, transparent 70%);
	filter: blur(50px);
	pointer-events: none;
	z-index: 0;
}

.brand-hero__badge {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	border: 1px solid rgba(155, 109, 255, 0.35);
	background-color: rgba(28, 22, 40, 0.85);
	backdrop-filter: blur(8px);
	padding: 0.35rem 0.95rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--primary-light);
}

.brand-badge-moon {
	display: inline-flex;
	color: #d8b4fe;
}

.brand-hero__title {
	position: relative;
	z-index: 1;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	background: linear-gradient(135deg, #ffffff 40%, #c8aeff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	max-width: 50rem;
	margin: 0;
}

.brand-hero__lead {
	position: relative;
	z-index: 1;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--muted);
	max-width: 40rem;
	margin: 0;
}

.brand-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.brand-section__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.brand-section__pill {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-light);
}

.brand-section__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--content);
	letter-spacing: -0.02em;
	margin: 0;
}

.brand-section__desc {
	font-size: 1rem;
	color: var(--muted);
	max-width: 42rem;
	margin: 0;
	line-height: 1.5;
}

/* Grid de História */
.brand-story-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 52rem) {
	.brand-story-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.brand-story-card {
	padding: 1.75rem;
	border-radius: var(--radius-xl);
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: all var(--transition-fast);
}

.brand-story-card:hover {
	border-color: rgba(155, 109, 255, 0.4);
	transform: translateY(-2px);
}

.brand-story-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, rgba(155, 109, 255, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%);
	border: 1px solid rgba(155, 109, 255, 0.3);
	color: var(--primary-light);
}

.brand-story-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--content);
	margin: 0;
}

.brand-story-card__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--muted);
	margin: 0;
}

/* Grid de Mascotes */
.brand-mascote-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

@media (min-width: 56rem) {
	.brand-mascote-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.brand-mascote-card {
	padding: 1.75rem;
	border-radius: var(--radius-2xl);
	background: linear-gradient(180deg, rgba(21, 17, 29, 0.95) 0%, rgba(13, 10, 18, 0.95) 100%);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
	text-align: center;
	transition: all var(--transition-fast);
}

.brand-mascote-card:hover {
	border-color: rgba(155, 109, 255, 0.45);
	box-shadow: 0 12px 30px -8px rgba(155, 109, 255, 0.2);
	transform: translateY(-3px);
}

.brand-mascote-card__img-wrap {
	position: relative;
	width: 13rem;
	height: 13rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-mascote-card__glow {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.25) 0%, transparent 70%);
	filter: blur(20px);
	z-index: 0;
}

.brand-mascote-card__img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
	animation: luFloat 6s ease-in-out infinite;
}

.brand-mascote-card:nth-child(2) .brand-mascote-card__img {
	animation-delay: -2s;
}

.brand-mascote-card:nth-child(3) .brand-mascote-card__img {
	animation-delay: -4s;
}

.brand-mascote-card__content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
}

.brand-mascote-card__badge {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.25rem 0.65rem;
	border-radius: 9999px;
	background-color: var(--elevated);
	border: 1px solid var(--border-strong);
	color: var(--primary-light);
}

.brand-mascote-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--content);
	margin: 0;
}

.brand-mascote-card__desc {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--muted);
	margin: 0;
}

/* Feature Card (Lua sobre o U) */
.brand-feature-card {
	padding: 2.5rem;
	border-radius: var(--radius-2xl);
	background: linear-gradient(135deg, rgba(28, 22, 40, 0.95) 0%, rgba(20, 16, 28, 0.95) 100%);
	border: 1px solid rgba(155, 109, 255, 0.35);
	box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
}

.brand-feature-card__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 56rem) {
	.brand-feature-card__grid {
		grid-template-columns: 1.2fr 0.8fr;
	}
}

.brand-feature-card__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.brand-feature-card__title {
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 700;
	color: var(--content);
	margin: 0;
}

.brand-feature-card__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
	margin: 0;
}

.brand-checklist {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0 0;
	display: grid;
	gap: 0.625rem;
}

.brand-checklist li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: var(--content);
}

.brand-checklist svg {
	color: var(--success);
	flex-shrink: 0;
}

.brand-feature-card__preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.brand-feature-card__display {
	width: 100%;
	padding: 2rem 1.5rem;
	border-radius: var(--radius-xl);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-large-logo {
	width: 100%;
	max-width: 18rem;
	height: auto;
}

.brand-preview-caption {
	font-size: 0.75rem;
	color: var(--muted);
	opacity: 0.8;
}

/* Galeria de Ativos Vetoriais */
.brand-assets-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 52rem) {
	.brand-assets-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.brand-asset-card {
	padding: 1.5rem;
	border-radius: var(--radius-xl);
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.brand-asset-card__preview {
	height: 8rem;
	border-radius: var(--radius-lg);
	background-color: var(--elevated);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.brand-asset-card__preview--light {
	background-color: #F8F9FA;
	border-color: #E2E8F0;
}

.brand-asset-svg {
	width: 100%;
	max-width: 13rem;
	height: auto;
}

.brand-asset-icon-svg {
	width: 4rem;
	height: 4rem;
}

.brand-asset-card__info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.brand-asset-card__info h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--content);
	margin: 0;
}

.brand-asset-card__info p {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.45;
	flex: 1;
}

.brand-asset-card__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

/* Paleta de Cores */
.brand-palette-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (min-width: 48rem) {
	.brand-palette-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 64rem) {
	.brand-palette-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.brand-color-card {
	padding: 1rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.brand-color-card:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
}

.brand-color-swatch {
	width: 100%;
	height: 3.5rem;
	border-radius: var(--radius-md);
}

.brand-color-meta {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.brand-color-name {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--content);
}

.brand-color-code {
	font-size: 0.75rem;
	font-family: monospace;
	color: var(--primary-light);
	background: var(--elevated);
	padding: 0.15rem 0.35rem;
	border-radius: 4px;
	width: fit-content;
}

.brand-color-role {
	font-size: 0.6875rem;
	color: var(--muted);
	line-height: 1.35;
	margin-top: 0.1rem;
}

/* Diretrizes */
.brand-guidelines-card {
	padding: 2rem;
	border-radius: var(--radius-xl);
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.brand-guidelines-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 48rem) {
	.brand-guidelines-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.brand-guideline-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.brand-guideline-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.brand-guideline-col--do .brand-guideline-heading {
	color: var(--success);
}

.brand-guideline-col--dont .brand-guideline-heading {
	color: var(--danger);
}

.brand-guideline-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.75rem;
}

.brand-guideline-list li {
	font-size: 0.875rem;
	color: var(--muted);
	line-height: 1.5;
	position: relative;
	padding-left: 1.25rem;
}

.brand-guideline-col--do .brand-guideline-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--success);
	font-weight: bold;
}

.brand-guideline-col--dont .brand-guideline-list li::before {
	content: "✕";
	position: absolute;
	left: 0;
	color: var(--danger);
	font-weight: bold;
}

.mt-4 {
	margin-top: 1rem;
}

.text-danger {
	color: var(--danger) !important;
}

/* Admin / Ops Panel ----------------------------------------- */

.badge--admin {
	border-color: rgba(155, 109, 255, 0.45);
	background: linear-gradient(135deg, rgba(155, 109, 255, 0.25) 0%, rgba(124, 58, 237, 0.25) 100%);
	color: #d8b4fe;
	font-weight: 600;
}

.badge--customer {
	border-color: var(--border);
	background-color: var(--elevated);
	color: var(--muted);
}

.badge--ghost {
	border-color: transparent;
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--muted);
}

.badge--secure-env {
	border-color: rgba(111, 211, 154, 0.3);
	background-color: rgba(111, 211, 154, 0.1);
	color: #8fe3b1;
}

.account-admin-card {
	border: 1px solid rgba(155, 109, 255, 0.4);
	background: linear-gradient(135deg, rgba(32, 22, 50, 0.95) 0%, rgba(20, 15, 32, 0.98) 100%);
	box-shadow: 0 4px 24px rgba(155, 109, 255, 0.15);
	position: relative;
	overflow: hidden;
}

.account-admin-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #9b6dff, #c8aeff, #7c3aed);
}

.account-admin-card__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
}

@media (min-width: 48rem) {
	.account-admin-card__inner {
		flex-direction: row;
		align-items: center;
	}
}

.account-admin-pill-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.account-admin-pill {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--primary-light);
	background-color: rgba(155, 109, 255, 0.15);
	border: 1px solid rgba(155, 109, 255, 0.3);
	padding: 0.15rem 0.5rem;
	border-radius: var(--radius-sm);
}

.account-admin-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 47.99rem) {
	.account-admin-btn {
		width: 100%;
		justify-content: center;
	}
}

.ops-shell {
	max-width: 72rem;
	margin-inline: auto;
}

.ops-header {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border);
}

@media (min-width: 48rem) {
	.ops-header {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
}

.ops-header__badge-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.ops-header__title {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--content);
}

.ops-header__desc {
	font-size: 0.9375rem;
	color: var(--muted);
	margin-top: 0.25rem;
}

.ops-metrics-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

@media (min-width: 36rem) {
	.ops-metrics-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60rem) {
	.ops-metrics-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ops-metric-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem;
}

.ops-metric-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.ops-metric-value {
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--content);
	line-height: 1.2;
}

.ops-metric-value--primary {
	color: var(--primary-light);
}

.ops-metric-sub {
	font-size: 0.75rem;
	color: var(--muted);
}

.ops-db-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: #8fe3b1;
}

.ops-users-header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 52rem) {
	.ops-users-header {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
}

.ops-section-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--content);
}

.ops-section-sub {
	font-size: 0.8125rem;
	color: var(--muted);
	max-width: 38rem;
	margin-top: 0.25rem;
}

.ops-search-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ops-search-input {
	width: 16rem;
}

.ops-table-responsive {
	overflow-x: auto;
}

.ops-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 0.8125rem;
}

.ops-table th {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	color: var(--muted);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ops-table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	color: var(--content);
	vertical-align: middle;
}

.ops-table tr:hover td {
	background-color: rgba(255, 255, 255, 0.015);
}

.ops-user-cell {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ops-user-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--primary-light);
	overflow: hidden;
	flex-shrink: 0;
}

.ops-user-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ops-user-names {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.ops-user-name {
	font-weight: 600;
	color: var(--content);
}

.ops-self-indicator {
	font-size: 0.6875rem;
	color: var(--primary-light);
}

.ops-user-email {
	color: var(--muted);
}

.ops-date {
	color: var(--muted);
	white-space: nowrap;
}

.ops-locked-text {
	font-size: 0.75rem;
	color: var(--muted);
	font-style: italic;
}

.btn--danger-outline {
	border: 1px solid rgba(255, 122, 138, 0.4);
	color: var(--danger);
	background: transparent;
	border-radius: var(--radius-control);
	padding: 0.35rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
}

.btn--danger-outline:hover {
	background-color: rgba(255, 122, 138, 0.1);
	border-color: var(--danger);
}

.inline-form {
	display: inline-block;
}

.text-right {
	text-align: right;
}

.ops-empty-cell {
	padding: 2.5rem 1rem !important;
	text-align: center;
	color: var(--muted);
}

.ops-roadmap-card {
	background: linear-gradient(135deg, rgba(28, 22, 40, 0.6) 0%, rgba(20, 16, 30, 0.6) 100%);
	border-style: dashed;
}

.ops-roadmap-header {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.ops-roadmap-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--content);
}

.ops-roadmap-desc {
	font-size: 0.8125rem;
	color: var(--muted);
	margin-top: 0.25rem;
	line-height: 1.5;
}

/* ==============================================================================
   Admin Navigation & Sub-Tabs
   ============================================================================== */
.ops-nav-bar {
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.25rem;
}

.ops-tabs {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.ops-tabs::-webkit-scrollbar {
	display: none;
}

.ops-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	text-decoration: none;
	transition: all var(--duration-fast) var(--ease-default);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.ops-tab:hover {
	color: var(--content);
	background-color: rgba(255, 255, 255, 0.03);
}

.ops-tab--active {
	color: var(--primary-light);
	border-bottom-color: var(--primary);
	background-color: rgba(155, 109, 255, 0.06);
	font-weight: 600;
}

/* ==============================================================================
   Admin Presets Quick Creation Bar
   ============================================================================== */
.ops-presets-card {
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, rgba(28, 23, 38, 0.9) 0%, rgba(21, 17, 29, 0.9) 100%);
	border-color: rgba(155, 109, 255, 0.25);
}

.ops-presets-header {
	margin-bottom: 1rem;
}

.ops-presets-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--content);
	margin: 0;
}

.ops-presets-desc {
	font-size: 0.8125rem;
	color: var(--muted);
	margin-top: 0.25rem;
}

.ops-presets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.625rem;
}

.ops-preset-item-form {
	margin: 0;
}

.ops-preset-btn {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0.75rem 0.875rem;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
	text-align: left;
	transition: all var(--duration-fast) var(--ease-default);
}

.ops-preset-btn:hover {
	border-color: var(--primary);
	background-color: rgba(155, 109, 255, 0.1);
	transform: translateY(-1px);
}

.ops-preset-btn__brand {
	font-size: 0.6875rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--primary-light);
}

.ops-preset-btn__name {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--content);
	margin: 0.25rem 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.ops-preset-btn__tag {
	font-size: 0.6875rem;
	color: var(--muted);
}

.ops-presets-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ops-preset-pill {
	border-color: var(--border);
	background-color: var(--surface);
}

.ops-preset-pill:hover {
	border-color: var(--primary);
	color: var(--primary-light);
}

/* ==============================================================================
   Admin Product Cells & Badges
   ============================================================================== */
.ops-prod-cell {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.ops-prod-thumb {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	object-fit: cover;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	flex-shrink: 0;
}

.ops-prod-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--primary-light);
	font-size: 0.875rem;
	text-transform: uppercase;
}

.ops-prod-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ops-prod-title {
	font-weight: 600;
	color: var(--content);
	text-decoration: none;
	transition: color var(--duration-fast);
}

.ops-prod-title:hover {
	color: var(--primary-light);
}

.ops-prod-slug {
	font-size: 0.75rem;
	color: var(--muted);
}

.ops-variant-summary {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.ops-actions-group {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.375rem;
}

.btn--danger-ghost {
	background: transparent;
	color: var(--danger);
	border: 1px solid transparent;
}

.btn--danger-ghost:hover {
	background-color: rgba(255, 122, 138, 0.12);
	border-color: var(--danger);
}

.btn--xs {
	padding: 0.2rem 0.45rem;
	font-size: 0.75rem;
}

.ops-shell .btn svg,
.ops-actions-group svg,
.ops-nav-bar .ops-tab svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ==============================================================================
   Admin Product Detail & Denominations Management
   ============================================================================== */
.ops-detail-hero {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 0.75rem;
}

.ops-detail-thumb {
	width: 4rem;
	height: 4rem;
	border-radius: var(--radius-lg);
	object-fit: cover;
	border: 1px solid var(--border);
	background-color: var(--elevated);
}

.ops-sub-card {
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.25rem;
}

.ops-sub-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--content);
	margin-bottom: 1rem;
}

.ops-cost-col {
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	color: var(--muted);
}

/* ==============================================================================
   Admin Code Stock & Inventory
   ============================================================================== */
.ops-code-row {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ops-code-val {
	background-color: var(--surface);
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius-sm);
	font-family: monospace;
	font-size: 0.8125rem;
	border: 1px solid rgba(255, 255, 255, 0.05);
	letter-spacing: 0.05em;
}

.ops-codes-filters {
	display: flex;
	gap: 0.375rem;
}

.ops-textarea-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.375rem;
}

.ops-code-counter {
	font-size: 0.75rem;
	color: var(--primary-light);
	font-weight: 500;
}

.ops-code-textarea {
	font-family: monospace;
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* ==============================================================================
   Admin Forms & Layout
   ============================================================================== */
.ops-form-card {
	padding: 1.75rem;
}

.ops-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
}

.ops-form-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.form-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: var(--content);
	cursor: pointer;
}

.ops-form-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ops-quick-card {
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(28, 23, 38, 0.8) 0%, rgba(21, 17, 29, 0.8) 100%);
	border-color: rgba(155, 109, 255, 0.2);
}

.ops-quick-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.ops-metric-value--warning {
	color: var(--warning);
}

/* ==============================================================================
   Public Storefront Catalog & Product Detail
   ============================================================================== */
.catalog-section {
	padding-block: 2.5rem 4rem;
}

.catalog-header {
	margin-bottom: 2.5rem;
}

.catalog-header__top {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 48rem) {
	.catalog-header__top {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.catalog-header__title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--content);
	letter-spacing: -0.02em;
	margin-bottom: 0.5rem;
}

.catalog-header__lead {
	font-size: 1rem;
	color: var(--muted);
	max-width: 42rem;
}

.catalog-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.catalog-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 1rem;
	border-radius: var(--radius-full);
	font-size: 0.875rem;
	font-weight: 500;
	background-color: var(--surface);
	color: var(--muted);
	border: 1px solid var(--border);
	transition: all var(--transition-fast);
	cursor: pointer;
}

.catalog-pill:hover {
	color: var(--content);
	border-color: rgba(155, 109, 255, 0.4);
	background-color: var(--elevated);
}

.catalog-pill--active {
	background-color: rgba(155, 109, 255, 0.15);
	color: var(--primary-light);
	border-color: var(--primary);
}

.catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

@media (max-width: 48rem) {
	.catalog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.875rem;
	}
}

/* ==============================================================================
   Scalable Store Filter & Search Architecture
   ============================================================================== */
.catalog-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary-light);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.5rem;
}

.catalog-filter-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.5rem;
	margin-bottom: 2rem;
}

/* Modern Pill Search */
.catalog-search-wrap {
	position: relative;
	width: 100%;
	max-width: 600px;
}

.catalog-search-icon {
	position: absolute;
	left: 1.125rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
	pointer-events: none;
}

.catalog-search-field {
	width: 100%;
	height: 2.875rem;
	border-radius: 9999px;
	background: rgba(28, 23, 38, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0 2.75rem 0 3rem;
	font-size: 0.9375rem;
	color: #ffffff;
	outline: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.catalog-search-field:focus {
	border-color: var(--primary);
	background: rgba(28, 23, 38, 0.95);
	box-shadow: 0 0 20px rgba(155, 109, 255, 0.35);
}

.catalog-search-clear {
	position: absolute;
	right: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.15s ease;
}

.catalog-search-clear:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

/* Category Tabs (Evergreen) */
.catalog-categories-rail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.catalog-categories-rail::-webkit-scrollbar {
	display: none;
}

.catalog-cat-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1rem;
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
	background: rgba(28, 23, 38, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.08);
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-cat-pill:hover {
	color: #ffffff;
	border-color: rgba(155, 109, 255, 0.35);
	transform: translateY(-1px);
}

.catalog-cat-pill--active {
	background: linear-gradient(135deg, rgba(155, 109, 255, 0.25) 0%, rgba(155, 109, 255, 0.1) 100%);
	color: var(--primary-light);
	border-color: var(--primary);
	box-shadow: 0 0 14px rgba(155, 109, 255, 0.25);
}

/* Scalable Controls Toolbar */
.catalog-controls-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.catalog-controls-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

@media (max-width: 48rem) {
	.catalog-controls-left {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}
}

.catalog-select-box {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.catalog-select-control {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(28, 23, 38, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 0.5rem 2.25rem 0.5rem 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease;
	min-height: 2.375rem;
	width: 100%;
}

.catalog-select-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 10px rgba(155, 109, 255, 0.25);
}

.catalog-select-arrow {
	position: absolute;
	right: 0.75rem;
	pointer-events: none;
	color: var(--muted);
}

.catalog-toggle-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.875rem;
	border-radius: 12px;
	background: rgba(28, 23, 38, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
	min-height: 2.375rem;
}

@media (max-width: 48rem) {
	.catalog-toggle-chip {
		grid-column: span 2;
		justify-content: center;
	}
}

.catalog-toggle-chip:hover {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.18);
}

.catalog-toggle-chip--active {
	background: rgba(34, 197, 94, 0.12);
	color: #86efac;
	border-color: rgba(34, 197, 94, 0.35);
}

.catalog-toggle-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 6px currentColor;
}

.catalog-count-badge {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.02em;
}

/* Active Dismissible Filter Tags */
.catalog-active-filters {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding-top: 0.25rem;
}

.catalog-active-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
}

.catalog-active-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: rgba(155, 109, 255, 0.15);
	border: 1px solid rgba(155, 109, 255, 0.3);
	color: var(--primary-light);
	text-decoration: none;
	transition: all 0.15s ease;
}

.catalog-active-tag:hover {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.4);
	color: #fca5a5;
}

.catalog-clear-all-btn {
	font-size: 0.75rem;
	color: var(--muted);
	text-decoration: underline;
	margin-left: 0.25rem;
	transition: color 0.15s ease;
}

.catalog-clear-all-btn:hover {
	color: var(--primary-light);
}

/* Empty State */
.catalog-empty-state {
	padding: 4rem 1.5rem;
	text-align: center;
	border-radius: 20px;
	background: rgba(21, 17, 29, 0.6);
	border: 1px dashed rgba(255, 255, 255, 0.1);
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.catalog-empty-icon {
	color: var(--muted);
	opacity: 0.6;
}

.catalog-empty-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
}

.catalog-empty-desc {
	font-size: 0.875rem;
	color: var(--muted);
	max-width: 24rem;
	margin: 0 0 0.5rem;
}

/* ==============================================================================
   The Collectible Digital Voucher Card (.cat-card) — Clean & Borderless Photo
   ============================================================================== */
.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(28, 23, 38, 0.75) 0%, rgba(18, 14, 25, 0.95) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.3s ease,
	            box-shadow 0.3s ease;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

.cat-card__ambient-glow {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--card-glow, rgba(155, 109, 255, 0.25)) 0%, transparent 70%);
	filter: blur(35px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	z-index: 0;
}

.cat-card:hover {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--card-accent, #9b6dff) 50%, rgba(255, 255, 255, 0.2));
	box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.8),
	            0 0 25px -5px var(--card-glow, rgba(155, 109, 255, 0.25));
}

.cat-card:hover .cat-card__ambient-glow {
	opacity: 1;
}

/* Borderless Photo Stage */
.cat-card__media-wrap {
	position: relative;
	z-index: 1;
	padding: 0;
	text-decoration: none;
	display: block;
}

.cat-card__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
	background: transparent;
	border: none;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cat-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-card:hover .cat-card__img {
	transform: scale(1.03);
}

/* Hologram Foil Sheen */
.cat-card__foil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.1) 35%, rgba(155, 109, 255, 0.18) 48%, rgba(0, 210, 255, 0.18) 58%, transparent 75%);
	transform: translateX(-100%);
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 1;
}

.cat-card:hover .cat-card__foil {
	transform: translateX(100%);
}

/* Stock Status Badge ONLY */
.cat-card__stock-pill {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.65rem;
	border-radius: 9999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	backdrop-filter: blur(10px);
	z-index: 2;
}

.cat-card__stock-pill--in {
	background: rgba(13, 10, 18, 0.85);
	color: #86efac;
	border: 1px solid rgba(34, 197, 94, 0.35);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.cat-card__stock-pill--out {
	background: rgba(13, 10, 18, 0.85);
	color: #fca5a5;
	border: 1px solid rgba(239, 68, 68, 0.35);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.cat-card__stock-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: currentColor;
	box-shadow: 0 0 6px currentColor;
}

/* Card Body — Clean, Focused, No AI-clutter */
.cat-card__body {
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	z-index: 1;
}

@media (max-width: 48rem) {
	.cat-card__body {
		padding: 0.75rem 0.875rem 1rem;
	}
}

.cat-card__brand {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.cat-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
	margin-bottom: 0.75rem;
}

@media (max-width: 48rem) {
	.cat-card__title {
		font-size: 0.9375rem;
		margin-bottom: 0.5rem;
	}
}

.cat-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.cat-card__title a:hover {
	color: var(--primary-light);
}

/* Denomination Chips Preview */
.cat-card__denoms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

@media (max-width: 48rem) {
	.cat-card__denoms {
		margin-bottom: 0.75rem;
	}
}

.cat-card__denom-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.5rem;
	border-radius: 8px;
	font-size: 0.6875rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.04);
	color: var(--content);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.cat-card__denom-pill--more {
	color: var(--primary-light);
	background: rgba(155, 109, 255, 0.1);
	border-color: rgba(155, 109, 255, 0.25);
}

/* Card Footer */
.cat-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	margin-top: auto;
}

.cat-card__price-wrap {
	display: flex;
	flex-direction: column;
}

.cat-card__price-prefix {
	font-size: 0.6875rem;
	text-transform: uppercase;
	color: var(--muted);
	letter-spacing: 0.05em;
	font-weight: 600;
}

.cat-card__price {
	font-size: 1.25rem;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.1;
}

@media (max-width: 48rem) {
	.cat-card__price {
		font-size: 1.0625rem;
	}
}

.cat-card__action-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.8rem;
	border-radius: var(--radius-control);
	background: rgba(155, 109, 255, 0.12);
	color: var(--primary-light);
	border: 1px solid rgba(155, 109, 255, 0.3);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 48rem) {
	.cat-card__action-btn {
		padding: 0.35rem 0.6rem;
		font-size: 0.75rem;
	}
}

.cat-card__action-btn svg {
	transition: transform 0.2s ease;
}

.cat-card:hover .cat-card__action-btn {
	background: var(--primary);
	color: #ffffff;
	border-color: var(--primary);
	transform: translateX(2px);
	box-shadow: 0 0 15px rgba(155, 109, 255, 0.4);
}

.cat-card:hover .cat-card__action-btn svg {
	transform: translateX(3px);
}

/* ==============================================================================
   The Modern Interactive Purchase Experience (product-detail.html)
   ============================================================================== */
.pdetail-section {
	padding-block: 1.5rem 4rem;
}

@media (max-width: 48rem) {
	.pdetail-section {
		padding-block: 1rem 6.5rem; /* Room for safe mobile sticky purchase bar */
	}
}

.pdetail-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--muted);
	margin-bottom: 1.5rem;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pdetail-breadcrumbs::-webkit-scrollbar {
	display: none;
}

.pdetail-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.pdetail-breadcrumbs a:hover {
	color: var(--primary-light);
}

.pdetail-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 60rem) {
	.pdetail-layout {
		grid-template-columns: 5fr 7fr;
		gap: 3.5rem;
		align-items: start;
	}
}

/* Left Column: Modern Digital Vault Stage */
.pdetail-visual-col {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

@media (min-width: 60rem) {
	.pdetail-visual-col {
		position: sticky;
		top: 5.5rem;
	}
}

.pdetail-vault-stage {
	position: relative;
	width: 100%;
	border-radius: 28px;
	background: radial-gradient(circle at 50% 15%, rgba(45, 34, 62, 0.65) 0%, rgba(14, 11, 20, 0.98) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 45px -10px var(--brand-glow, rgba(155, 109, 255, 0.25));
	perspective: 1200px;
}

@media (max-width: 48rem) {
	.pdetail-vault-stage {
		padding: 1.125rem;
		border-radius: 22px;
	}
}

.pdetail-ambient-backlight {
	position: absolute;
	width: 320px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--brand-glow, rgba(155, 109, 255, 0.35)) 0%, transparent 70%);
	filter: blur(45px);
	pointer-events: none;
	z-index: 0;
	animation: vaultPulse 4s ease-in-out infinite alternate;
}

@keyframes vaultPulse {
	0% { transform: scale(0.9); opacity: 0.6; }
	100% { transform: scale(1.1); opacity: 0.9; }
}

.pdetail-vault-card {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px -5px var(--brand-glow, rgba(155, 109, 255, 0.25));
	border: none;
	transform-style: preserve-3d;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 1;
	cursor: grab;
}

@media (max-width: 48rem) {
	.pdetail-vault-card {
		border-radius: 16px;
	}
}

.pdetail-vault-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pdetail-vault-card-glare {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 65%);
	opacity: 0;
	transition: opacity 0.3s ease;
	mix-blend-mode: overlay;
	z-index: 2;
}

/* 4-Pillar Trust Grid below Card */
.pdetail-trust-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-top: 10px;
	background: rgba(22, 17, 31, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 22px;
	padding: 1.125rem;
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(12px);
}

@media (max-width: 34rem) {
	.pdetail-trust-list {
		padding: 0.875rem;
		gap: 0.625rem;
	}
}

.pdetail-trust-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.8125rem;
	color: #ffffff;
}

@media (max-width: 34rem) {
	.pdetail-trust-item {
		font-size: 0.75rem;
	}
}

.pdetail-trust-icon {
	color: var(--primary-light);
	flex-shrink: 0;
	padding: 0.45rem;
	border-radius: 12px;
	background: rgba(155, 109, 255, 0.12);
	border: 1px solid rgba(155, 109, 255, 0.25);
}

/* Right Column: Configuration & Purchase */
.pdetail-info-col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.pdetail-header {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.pdetail-meta-tags {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.pdetail-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: rgba(28, 23, 38, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--muted);
}

.pdetail-meta-chip--brand {
	background: rgba(155, 109, 255, 0.15);
	border-color: rgba(155, 109, 255, 0.35);
	color: var(--primary-light);
}

.pdetail-title {
	font-size: clamp(1.625rem, 3.5vw, 2.375rem);
	font-weight: 800;
	color: #ffffff;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Pricing Panel */
.pdetail-price-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, rgba(32, 25, 45, 0.75) 0%, rgba(20, 16, 28, 0.95) 100%);
	border: 1px solid rgba(155, 109, 255, 0.25);
	border-radius: 24px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(155, 109, 255, 0.12);
	backdrop-filter: blur(16px);
}

@media (max-width: 48rem) {
	.pdetail-price-box {
		padding: 1rem 1.25rem;
		border-radius: 20px;
	}
}

.pdetail-active-price {
	font-size: clamp(1.875rem, 4vw, 2.375rem);
	font-weight: 900;
	color: var(--primary-light);
	line-height: 1;
}

.pdetail-active-face {
	font-size: 0.875rem;
	color: var(--muted);
	font-weight: 500;
	margin-top: 0.25rem;
}

.pdetail-price-perk {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #86efac;
	background: rgba(34, 197, 94, 0.12);
	padding: 0.35rem 0.75rem;
	border-radius: 9999px;
	border: 1px solid rgba(34, 197, 94, 0.25);
}

/* Interactive Denomination Selector */
.pdetail-selector-card {
	background: linear-gradient(180deg, rgba(28, 22, 39, 0.75) 0%, rgba(20, 16, 28, 0.95) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	padding: 1.5rem;
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(16px);
}

@media (max-width: 48rem) {
	.pdetail-selector-card {
		padding: 1.125rem;
		border-radius: 20px;
	}
}

.pdetail-selector-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 0.25rem;
}

.pdetail-selector-sub {
	font-size: 0.8125rem;
	color: var(--muted);
	margin-bottom: 1.25rem;
}

.pdetail-variants-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.75rem;
}

@media (max-width: 34rem) {
	.pdetail-variants-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.625rem;
	}
}

.pdetail-vbtn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.875rem 0.75rem;
	background: rgba(28, 22, 39, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	text-align: center;
	min-height: 5.25rem;
}

.pdetail-vbtn:hover {
	border-color: rgba(155, 109, 255, 0.45);
	background: rgba(38, 30, 53, 0.9);
	transform: translateY(-2px);
}

.pdetail-vbtn--active {
	border-color: var(--primary);
	background: linear-gradient(145deg, rgba(155, 109, 255, 0.22) 0%, rgba(124, 58, 237, 0.08) 100%);
	box-shadow: 0 0 25px rgba(155, 109, 255, 0.35), inset 0 0 15px rgba(155, 109, 255, 0.15);
	transform: translateY(-1px);
}

.pdetail-vbtn-check {
	position: absolute;
	top: 0.45rem;
	right: 0.45rem;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--primary);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.6);
	transition: all 0.2s ease;
}

.pdetail-vbtn--active .pdetail-vbtn-check {
	opacity: 1;
	transform: scale(1);
}

.pdetail-vbtn-name {
	font-size: 1rem;
	font-weight: 800;
	color: #ffffff;
}

.pdetail-vbtn--active .pdetail-vbtn-name {
	color: var(--primary-light);
}

.pdetail-vbtn-price {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
}

.pdetail-vbtn-stock {
	font-size: 0.6875rem;
	font-weight: 600;
	color: #86efac;
}

.pdetail-vbtn-stock--out {
	color: #fca5a5;
}

/* Quantity Stepper & Instant Order Summary */
.pdetail-order-builder {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding: 1.25rem;
	background: rgba(22, 17, 31, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 22px;
	backdrop-filter: blur(12px);
}

@media (min-width: 36rem) {
	.pdetail-order-builder {
		grid-template-columns: auto 1fr;
		align-items: center;
	}
}

.pdetail-qty-control {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.pdetail-qty-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
}

.pdetail-stepper {
	display: inline-flex;
	align-items: center;
	background: rgba(30, 24, 44, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 9999px;
	padding: 0.2rem;
}

.pdetail-step-btn {
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #ffffff;
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.pdetail-step-btn:hover {
	background: rgba(155, 109, 255, 0.25);
	color: var(--primary-light);
}

.pdetail-step-input {
	width: 2.5rem;
	text-align: center;
	background: transparent;
	border: 0;
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 700;
}

.pdetail-summary-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
	color: var(--muted);
}

.pdetail-summary-total {
	font-size: 1.25rem;
	font-weight: 800;
	color: #ffffff;
}

.pdetail-buy-btn {
	width: 100%;
	justify-content: center;
	font-size: 1.125rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	border-radius: 9999px;
	padding: 0.9rem 1.75rem;
	box-shadow: 0 10px 30px rgba(155, 109, 255, 0.45);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdetail-buy-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px rgba(155, 109, 255, 0.6);
}

/* 3-Step Visual Delivery Pipeline */
.pdetail-delivery-pipeline {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding: 1.25rem;
	background: rgba(26, 20, 36, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 24px;
	backdrop-filter: blur(12px);
}

@media (min-width: 48rem) {
	.pdetail-delivery-pipeline {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pdetail-pipe-step {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.875rem;
	background: rgba(18, 14, 25, 0.6);
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.04);
}

.pdetail-pipe-step__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--primary-light);
	background: rgba(155, 109, 255, 0.15);
	border: 1px solid rgba(155, 109, 255, 0.25);
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
	width: fit-content;
}

.pdetail-pipe-step__title {
	font-size: 0.875rem;
	font-weight: 700;
	color: #ffffff;
}

.pdetail-pipe-step__desc {
	font-size: 0.75rem;
	color: var(--muted);
	line-height: 1.45;
}

/* Out of Stock VIP Waitlist Banner */
.pdetail-stock-banner {
	padding: 1.25rem;
	border-radius: 22px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pdetail-stock-banner--out {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(21, 17, 29, 0.9) 100%);
	border: 1px solid rgba(239, 68, 68, 0.3);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.pdetail-stock-banner__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.9375rem;
	color: #fca5a5;
}

.pdetail-stock-banner__desc {
	font-size: 0.8125rem;
	color: var(--muted);
	line-height: 1.5;
}

.pdetail-stock-line {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 0.5rem;
}

.pdetail-stock-line__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--success);
	box-shadow: 0 0 10px rgba(111, 211, 154, 0.8);
	flex-shrink: 0;
}

.pdetail-waitlist-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.pdetail-waitlist-input {
	flex: 1;
	min-width: 0;
	background: rgba(13, 10, 18, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 9999px;
	padding: 0.55rem 1rem;
	font-size: 0.875rem;
	color: #ffffff;
}

.pdetail-waitlist-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 10px rgba(155, 109, 255, 0.3);
}

/* Instructions Card */
.pdetail-instructions-card {
	background: linear-gradient(180deg, rgba(28, 22, 39, 0.75) 0%, rgba(18, 14, 25, 0.95) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	padding: 1.5rem;
	backdrop-filter: blur(12px);
}

@media (max-width: 48rem) {
	.pdetail-instructions-card {
		padding: 1.125rem;
		border-radius: 20px;
	}
}

.pdetail-instructions-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pdetail-instructions-body {
	font-size: 0.875rem;
	color: var(--muted);
	line-height: 1.7;
}

.pdetail-copy-instructions-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.85rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: rgba(155, 109, 255, 0.12);
	color: var(--primary-light);
	border: 1px solid rgba(155, 109, 255, 0.25);
	cursor: pointer;
	transition: all 0.2s ease;
}

.pdetail-copy-instructions-btn:hover {
	background: var(--primary);
	color: #ffffff;
}

/* Mobile Sticky Bottom Purchase Bar */
.pdetail-sticky-bar {
	display: none;
}

@media (max-width: 48rem) {
	.pdetail-sticky-bar {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 85;
		background: rgba(15, 11, 22, 0.93);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.75);
	}

	.pdetail-sticky-bar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		max-width: 540px;
		margin: 0 auto;
	}

	.pdetail-sticky-bar__info {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.pdetail-sticky-bar__label {
		font-size: 0.75rem;
		color: var(--muted);
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pdetail-sticky-bar__price {
		font-size: 1.25rem;
		font-weight: 800;
		color: var(--primary-light);
		line-height: 1.1;
	}

	.pdetail-sticky-btn {
		padding: 0.65rem 1.25rem;
		border-radius: 9999px;
		font-weight: 700;
		font-size: 0.875rem;
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		white-space: nowrap;
		box-shadow: 0 0 15px rgba(155, 109, 255, 0.4);
		flex-shrink: 0;
	}
}

.md-body p {
	margin: 0 0 0.75rem;
}

.md-body p:last-child {
	margin-bottom: 0;
}

.md-body ul,
.md-body ol {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
}

.md-body li {
	margin-bottom: 0.3rem;
}

.md-body ul li {
	list-style: disc;
}

.md-body ol li {
	list-style: decimal;
}

.md-body strong {
	color: var(--content);
	font-weight: 700;
}

.md-body a {
	color: var(--primary-light);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.md-body code {
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.1rem 0.35rem;
	font-size: 0.8125em;
}

.md-body h1,
.md-body h2,
.md-body h3,
.md-body h4 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--content);
	margin: 1rem 0 0.5rem;
}

.md-body blockquote {
	border-left: 3px solid var(--primary);
	margin: 0 0 0.75rem;
	padding-left: 0.875rem;
	color: var(--muted);
}

/* ==============================================================================
   Accessible Admin UX, Delete Modal, Live Card Preview & Quick Denomination Chips
   ============================================================================== */
.ops-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.ops-modal-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ops-modal-card {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: 2rem;
	max-width: 32rem;
	width: 100%;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(239, 68, 68, 0.15);
	transform: scale(0.95);
	transition: transform 0.2s ease;
}

.ops-modal-backdrop.is-open .ops-modal-card {
	transform: scale(1);
}

.ops-modal-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.ops-modal-icon-wrap {
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ops-modal-icon-wrap--danger {
	background-color: rgba(239, 68, 68, 0.15);
	color: #f87171;
	border: 1px solid rgba(239, 68, 68, 0.3);
}

.ops-modal-icon-wrap--primary {
	background-color: rgba(155, 109, 255, 0.15);
	color: var(--primary-light);
	border: 1px solid rgba(155, 109, 255, 0.3);
}

.ops-modal-icon-wrap--success {
	background-color: rgba(34, 197, 94, 0.15);
	color: #86efac;
	border: 1px solid rgba(34, 197, 94, 0.3);
}

.ops-modal-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--content);
	margin: 0;
}

.ops-modal-desc {
	font-size: 0.9375rem;
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.ops-modal-target-box {
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 0.875rem 1rem;
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ops-modal-target-title {
	font-weight: 700;
	color: var(--content);
	font-size: 1rem;
}

.ops-modal-target-sub {
	font-size: 0.8125rem;
	color: var(--muted);
}

.ops-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

/* Quick Denomination Chips for Admin */
.ops-quick-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.ops-chip-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-md);
	background-color: var(--elevated);
	border: 1px solid var(--border);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--content);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.ops-chip-btn:hover {
	border-color: var(--primary);
	background-color: rgba(155, 109, 255, 0.15);
	color: var(--primary-light);
}

/* Live Card Preview Box in Admin Form */
.ops-live-preview-box {
	background-color: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ops-live-preview-thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--surface);
	border: 1px solid rgba(155, 109, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.ops-live-preview-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Preset Cards in Admin Grid */
.ops-preset-card-visual {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 0.75rem 1rem;
	text-align: left;
	cursor: pointer;
	transition: all var(--transition-fast);
	width: 100%;
}

.ops-preset-card-visual:hover {
	border-color: var(--primary);
	background-color: var(--elevated);
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.ops-preset-thumb {
	width: 48px;
	height: 30px;
	border-radius: 4px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

/* Reset Password Link Card for Admin */
.ops-reset-link-banner {
	border: 1px solid rgba(155, 109, 255, 0.45);
	background: linear-gradient(135deg, rgba(35, 25, 55, 0.95) 0%, rgba(20, 15, 32, 0.98) 100%);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.5rem;
	box-shadow: 0 4px 24px rgba(155, 109, 255, 0.15);
	position: relative;
	overflow: hidden;
}

.ops-reset-link-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #9b6dff, #c8aeff, #6fd39a);
}

.ops-reset-link-banner__header {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
}

.ops-reset-link-banner__icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-md);
	background-color: rgba(155, 109, 255, 0.18);
	border: 1px solid rgba(155, 109, 255, 0.35);
	color: var(--primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ops-reset-link-banner__title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 0.25rem 0;
}

.ops-reset-link-banner__desc {
	font-size: 0.875rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.4;
}

.ops-copy-input-wrap {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.ops-copy-input-wrap input {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	background-color: rgba(0, 0, 0, 0.3);
	color: var(--primary-light);
}

.ops-action-cluster {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.btn-icon-only {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem;
	border-radius: var(--radius-sm);
	line-height: 1;
}

/* ==============================================================================
   Carrinho / Checkout (checkout.html)
   ============================================================================== */
.cart-section {
	padding-block: 1.5rem 4rem;
}

@media (max-width: 48rem) {
	.cart-section {
		padding-block: 1rem 6.5rem; /* Room for safe mobile sticky purchase bar */
	}
}

.cart-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--muted);
	margin-bottom: 1.5rem;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.cart-breadcrumbs::-webkit-scrollbar {
	display: none;
}

.cart-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.cart-breadcrumbs a:hover {
	color: var(--primary-light);
}

.cart-flash {
	margin-bottom: 1.25rem;
}

.cart-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.cart-title {
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, #f5f0fa 0%, #c8aeff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cart-sub {
	color: var(--muted);
	font-size: 0.9375rem;
	margin-top: 0.25rem;
}

.cart-steps {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
}

.cart-step {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background: var(--surface);
	white-space: nowrap;
}

.cart-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--border-strong);
	color: var(--content);
	font-size: 0.6875rem;
	font-weight: 700;
}

.cart-step--active {
	border-color: rgba(155, 109, 255, 0.55);
	background: rgba(155, 109, 255, 0.14);
	color: var(--primary-light);
	box-shadow: 0 0 18px -6px var(--primary-glow);
}

.cart-step--active .cart-step__num {
	background: linear-gradient(135deg, #a87ffb, #7c3aed);
	color: #ffffff;
}

.cart-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	align-items: start;
}

@media (min-width: 64rem) {
	.cart-layout {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 2rem;
	}
}

.cart-main {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

/* Item card ---------------------------------------------------------------- */
.cart-item-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	padding: 1.25rem;
	background: linear-gradient(180deg, rgba(26, 20, 38, 0.75) 0%, rgba(18, 14, 27, 0.9) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(12px);
}

@media (min-width: 48rem) {
	.cart-item-card {
		grid-template-columns: 132px minmax(0, 1fr) auto;
		align-items: center;
		padding: 1.5rem;
	}
}

.cart-item__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border-radius: 18px;
	background: radial-gradient(circle at 50% 20%, var(--brand-glow, rgba(155, 109, 255, 0.25)) 0%, transparent 75%),
		rgba(14, 11, 20, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.07);
	overflow: hidden;
}

.cart-item__thumb {
	width: 100%;
	max-width: 110px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.cart-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.cart-item__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.cart-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background: var(--surface);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}

.cart-chip--brand {
	border-color: color-mix(in srgb, var(--brand-accent, #9b6dff) 55%, transparent);
	background: color-mix(in srgb, var(--brand-accent, #9b6dff) 16%, transparent);
	color: var(--primary-light);
}

.cart-item__name {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cart-item__name a {
	transition: color 0.15s ease;
}

.cart-item__name a:hover {
	color: var(--primary-light);
}

.cart-item__variant {
	font-size: 0.8125rem;
	color: var(--muted);
}

.cart-item__variant strong {
	color: var(--content);
}

.cart-item__sep {
	margin-inline: 0.375rem;
	opacity: 0.6;
}

.cart-item__stock {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--success);
}

.cart-item__stock--low {
	color: var(--warning);
}

.cart-dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
	animation: cartPulse 2s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes cartPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.55; transform: scale(0.8); }
}

.cart-item__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.cart-stepper {
	display: inline-flex;
	align-items: center;
	background: rgba(30, 24, 44, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 9999px;
	padding: 0.2rem;
}

.cart-step-btn {
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #ffffff;
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.cart-step-btn:hover:not(:disabled) {
	background: rgba(155, 109, 255, 0.25);
	color: var(--primary-light);
}

.cart-step-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.cart-step-input {
	width: 2.5rem;
	text-align: center;
	background: transparent;
	border: 0;
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: transform 0.12s ease;
}

.cart-stepper[data-busy] .cart-step-input {
	transform: scale(1.12);
	color: var(--primary-light);
}

.cart-remove-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.45rem 0.75rem;
	border-radius: 9999px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cart-remove-btn:hover {
	color: var(--danger);
	border-color: rgba(255, 122, 138, 0.4);
	background: rgba(255, 122, 138, 0.08);
}

.cart-item__pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

@media (min-width: 48rem) {
	.cart-item__pricing {
		align-items: flex-end;
		text-align: right;
	}
}

.cart-item__unit {
	font-size: 0.75rem;
	color: var(--muted);
	white-space: nowrap;
}

.cart-item__total {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--primary-light);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cart-summary__total,
.cart-sticky-bar__price {
	font-variant-numeric: tabular-nums;
}

/* Trust strip -------------------------------------------------------------- */
.cart-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding: 1.25rem;
	background: rgba(26, 20, 36, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 24px;
	backdrop-filter: blur(12px);
}

@media (min-width: 40rem) {
	.cart-trust {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cart-trust__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--primary-light);
}

.cart-trust__item div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cart-trust__item strong {
	color: var(--content);
	font-size: 0.8125rem;
	font-weight: 600;
}

.cart-trust__item span {
	color: var(--muted);
	font-size: 0.75rem;
}

/* Summary aside ------------------------------------------------------------ */
.cart-aside {
	min-width: 0;
}

@media (min-width: 64rem) {
	.cart-aside {
		position: sticky;
		top: 5.5rem;
	}
}

.cart-summary {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem;
	background: linear-gradient(180deg, rgba(28, 22, 41, 0.92) 0%, rgba(18, 14, 27, 0.96) 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 24px;
	box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.75), 0 0 40px -14px var(--brand-glow, rgba(155, 109, 255, 0.25));
	backdrop-filter: blur(14px);
	overflow: hidden;
}

.cart-summary::before {
	content: "";
	position: absolute;
	top: 0;
	left: 15%;
	right: 15%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(200, 174, 255, 0.6), transparent);
}

.cart-summary__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.cart-summary__title {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cart-summary__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cart-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.cart-summary__row strong {
	color: var(--content);
	font-weight: 600;
	white-space: nowrap;
}

.cart-summary__row--savings strong {
	color: var(--success);
}

.cart-savings-label {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--success);
	font-weight: 600;
}

.cart-free {
	color: var(--success) !important;
	font-weight: 700 !important;
}

.cart-summary__divider {
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
}

.cart-summary__row--total {
	align-items: center;
}

.cart-summary__row--total span {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--content);
}

.cart-summary__total {
	font-size: 1.625rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-shadow: 0 0 24px var(--primary-glow);
}

/* Payment method selector --------------------------------------------------- */
.cart-pay {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.cart-pay__option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: rgba(21, 17, 29, 0.7);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.cart-pay__option--active {
	border-color: rgba(155, 109, 255, 0.6);
	background: rgba(155, 109, 255, 0.1);
	box-shadow: 0 0 22px -8px var(--primary-glow);
}

.cart-pay__option--disabled {
	opacity: 0.45;
}

.cart-pay__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--primary-light);
}

.cart-pay__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.cart-pay__info strong {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--content);
}

.cart-pay__info span {
	font-size: 0.75rem;
	color: var(--muted);
}

.cart-pay__check {
	color: var(--primary-light);
	flex-shrink: 0;
	filter: drop-shadow(0 0 6px var(--primary-glow));
}

/* CTA / misc --------------------------------------------------------------- */
.cart-cta {
	width: 100%;
	justify-content: center;
	font-size: 1.0625rem;
	font-weight: 700;
	border-radius: 9999px;
	box-shadow: 0 10px 30px rgba(155, 109, 255, 0.45);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px rgba(155, 109, 255, 0.6);
}

.cart-continue {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.cart-continue:hover {
	color: var(--primary-light);
}

.cart-secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
	font-size: 0.6875rem;
	color: var(--muted);
}

.cart-secure-note svg {
	flex-shrink: 0;
	opacity: 0.8;
}

/* Empty state -------------------------------------------------------------- */
.cart-empty {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cart-empty__hints {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	max-width: 30rem;
	margin: 0 auto;
	width: 100%;
}

@media (min-width: 40rem) {
	.cart-empty__hints {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 40rem;
	}
}

.cart-empty__hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1rem;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-empty__hint:hover {
	color: var(--primary-light);
	border-color: rgba(155, 109, 255, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -10px var(--primary-glow);
}

/* Mobile sticky bottom bar -------------------------------------------------- */
.cart-sticky-bar {
	display: none;
}

@media (max-width: 48rem) {
	.cart-sticky-bar {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 85;
		background: rgba(15, 11, 22, 0.93);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.75);
	}

	.cart-sticky-bar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		max-width: 540px;
		margin: 0 auto;
	}

	.cart-sticky-bar__info {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.cart-sticky-bar__label {
		font-size: 0.75rem;
		color: var(--muted);
		font-weight: 500;
		white-space: nowrap;
	}

	.cart-sticky-bar__price {
		font-size: 1.25rem;
		font-weight: 800;
		color: var(--primary-light);
		line-height: 1.1;
	}

	.cart-sticky-bar__btn {
		padding: 0.65rem 1.25rem;
		border-radius: 9999px;
		font-weight: 700;
		box-shadow: 0 0 15px rgba(155, 109, 255, 0.4);
		flex-shrink: 0;
	}
}

/* Badge do carrinho na navegação ------------------------------------------- */
.cart-nav-btn {
	position: relative;
}

.cart-nav-badge {
	position: absolute;
	top: 0.15rem;
	right: 0.05rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.0625rem;
	height: 1.0625rem;
	padding-inline: 0.25rem;
	border-radius: 9999px;
	background: linear-gradient(135deg, #a87ffb 0%, #7c3aed 100%);
	color: #ffffff;
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.6);
	pointer-events: none;
}

/* CTAs duplos da product-detail (Comprar + Adicionar) ------------------------ */
.pdetail-cta-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.625rem;
}

@media (min-width: 36rem) {
	.pdetail-cta-row {
		grid-template-columns: 1.4fr 1fr;
	}
}

.pdetail-cta-form {
	display: flex;
}

.pdetail-cta-form .btn {
	width: 100%;
}

.pdetail-add-btn {
	border-radius: 9999px;
	font-weight: 700;
}

.pdetail-sticky-form {
	display: flex;
}

.pdetail-login-hint {
	margin-top: 0.625rem;
	font-size: 0.8125rem;
	color: var(--muted);
	text-align: center;
}

/* Cupom de desconto no carrinho ---------------------------------------------- */
.cart-coupon {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	border-radius: 16px;
	border: 1px dashed rgba(155, 109, 255, 0.45);
	background: rgba(155, 109, 255, 0.07);
}

.cart-coupon__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--primary-light);
}

.cart-coupon__row {
	display: flex;
	gap: 0.5rem;
}

.cart-coupon__input {
	flex: 1;
	min-width: 0;
	height: 2.5rem;
	padding-inline: 0.875rem;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-strong);
	background: rgba(13, 10, 18, 0.7);
	color: var(--content);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cart-coupon__input::placeholder {
	color: var(--muted);
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 400;
}

.cart-coupon__input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-glow);
}

.cart-coupon__btn {
	flex-shrink: 0;
}

.cart-coupon__hint {
	font-size: 0.75rem;
	color: var(--muted);
}

.cart-coupon__applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.cart-coupon__info {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--success);
}

.cart-coupon__info div {
	display: flex;
	flex-direction: column;
}

.cart-coupon__info strong {
	color: var(--content);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
}

.cart-coupon__info span {
	color: var(--muted);
	font-size: 0.75rem;
}

.cart-coupon__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cart-coupon__remove:hover {
	color: var(--danger);
	border-color: rgba(255, 122, 138, 0.4);
	background: rgba(255, 122, 138, 0.08);
}

/* Chips e estados extras do carrinho ------------------------------------------ */
.cart-chip--ok {
	border-color: rgba(111, 211, 154, 0.4);
	background: rgba(111, 211, 154, 0.1);
	color: var(--success);
}

.cart-chip--warning {
	border-color: rgba(255, 201, 120, 0.45);
	background: rgba(255, 201, 120, 0.1);
	color: var(--warning);
}

.cart-chip--danger {
	border-color: rgba(255, 122, 138, 0.45);
	background: rgba(255, 122, 138, 0.1);
	color: var(--danger);
}

.cart-item-card--unavailable {
	opacity: 0.75;
}

.cart-item__total--muted {
	color: var(--muted);
}

.cart-item__adjusted {
	font-size: 0.75rem;
	color: var(--warning);
	font-weight: 600;
}

.cart-item__stock--out {
	color: var(--danger);
}

.cart-stepper-form {
	display: inline-flex;
}

.cart-remove-form {
	display: inline-flex;
}

.cart-item__visual {
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.cart-item__visual:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--brand-accent, #9b6dff) 50%, transparent);
	box-shadow: 0 12px 32px -12px var(--brand-glow, rgba(155, 109, 255, 0.4));
}

/* Aviso de reabastecimento (loja toda sem estoque) --------------------------- */
.restock-notice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.375rem;
	margin-bottom: 2rem;
	padding: 1.375rem 1.5rem;
	border-radius: 24px;
	border: 1px solid rgba(155, 109, 255, 0.35);
	background:
		radial-gradient(ellipse 60% 120% at 12% 0%, rgba(155, 109, 255, 0.14) 0%, transparent 60%),
		linear-gradient(180deg, rgba(28, 22, 41, 0.92) 0%, rgba(18, 14, 27, 0.95) 100%);
	box-shadow: 0 18px 45px -18px rgba(0, 0, 0, 0.75), 0 0 35px -12px rgba(155, 109, 255, 0.35);
	backdrop-filter: blur(14px);
	overflow: hidden;
}

.restock-notice__aura {
	position: absolute;
	top: -60px;
	right: -40px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(155, 109, 255, 0.22) 0%, transparent 70%);
	filter: blur(40px);
	pointer-events: none;
	animation: restockPulse 4.5s ease-in-out infinite alternate;
}

@keyframes restockPulse {
	0% { transform: scale(0.92); opacity: 0.55; }
	100% { transform: scale(1.12); opacity: 0.9; }
}

.restock-notice__moon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	color: var(--primary-light);
	background: radial-gradient(circle at 35% 30%, rgba(200, 174, 255, 0.28) 0%, rgba(30, 23, 44, 0.95) 75%);
	border: 1px solid rgba(200, 174, 255, 0.45);
	box-shadow: 0 0 24px -4px rgba(155, 109, 255, 0.55);
}

.restock-notice__body {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.restock-notice__title {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}

.restock-notice__text {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 62ch;
}

.restock-notice__text strong {
	color: var(--content);
}

.restock-notice__text--sub {
	margin-top: 0.375rem;
}

.restock-notice__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin-top: 0.875rem;
}

.restock-notice__cta {
	border-radius: 9999px;
	font-weight: 700;
}

.restock-notice__hint {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.75rem;
	color: var(--success);
	font-weight: 600;
}

.restock-notice__hint-dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
	animation: cartPulse 2s ease-in-out infinite;
}

@media (max-width: 40rem) {
	.restock-notice {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding: 1.25rem;
	}

	.restock-notice__moon {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.hero__delivery-feed li {
		opacity: 0;
	}

	.hero__delivery-feed li:first-child {
		opacity: 1;
	}
}