/* =========================================================
   SJ Account — Responsive Layer
   Loaded AFTER account.css
   Breakpoints: ≤399 | ≤479 | ≤640 | ≤767 | ≤900 | ≤991
   ========================================================= */

body.sj-account-page,
body.sj-account-page .sj-site__main {
	overflow-x: clip;
	max-width: 100%;
}

/* ── Page shell ── */
@media (max-width: 991px) {
	.sj-account {
		padding-inline: max(var(--sj-space-4), env(safe-area-inset-left)) max(var(--sj-space-4), env(safe-area-inset-right));
		padding-bottom: clamp(2.5rem, 6vw, 4rem);
	}
}

/* =========================================================
   HERO — profile + stats reflow
   ========================================================= */
@media (max-width: 900px) {
	.sj-account__hero {
		margin-bottom: var(--sj-space-5);
		padding: clamp(1rem, 4vw, 1.25rem);
	}

	.sj-account__hero-inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 0.85rem;
		align-items: stretch;
	}

	.sj-account__profile {
		grid-row: 1;
	}

	.sj-account__stats {
		grid-row: 2;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 0.45rem;
		margin: 0 calc(var(--sj-space-4) * -0.15);
		padding: 0.2rem calc(var(--sj-space-4) * 0.15) 0.1rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.sj-account__stats::-webkit-scrollbar {
		display: none;
	}

	.sj-account__stat,
	.sj-account__stat--action {
		flex: 0 0 auto;
		scroll-snap-align: start;
		min-width: 5.25rem;
	}

	.sj-account__stat--wallet {
		min-width: 6.5rem;
	}

	.sj-account__stat-link {
		min-width: 4.75rem;
		padding: 0.15rem;
	}
}

@media (max-width: 767px) {
	.sj-account__hero {
		border-radius: calc(var(--sj-ac-radius) + 2px);
	}

	.sj-account__profile {
		gap: 0.75rem;
	}

	.sj-account__avatar,
	.sj-account__avatar--fallback {
		width: 52px;
		height: 52px;
		border-radius: 14px;
	}

	.sj-account__title {
		font-size: clamp(1.05rem, 4.5vw, 1.3rem);
	}

	.sj-account__subtitle {
		font-size: 0.78rem;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.sj-account__eyebrow {
		font-size: 0.6rem;
		padding: 0.2rem 0.5rem;
		margin-bottom: 0.3rem;
	}

	.sj-account__stat {
		padding: 0.55rem 0.75rem;
		border-radius: 10px;
	}

	.sj-account__stat-value {
		font-size: 0.95rem;
	}

	.sj-account__stat-value--text {
		font-size: 0.72rem;
	}

	.sj-account__stat-label {
		font-size: 0.58rem;
	}
}

@media (max-width: 479px) {
	.sj-account__hero-inner--guest .sj-account__profile {
		flex-direction: column;
		text-align: center;
	}

	.sj-account__hero-inner--guest .sj-account__eyebrow {
		justify-content: center;
	}

	.sj-account__profile:not(.sj-account__profile--guest) {
		align-items: flex-start;
	}

	.sj-account__stat {
		min-width: 4.85rem;
	}
}

/* =========================================================
   WC LAYOUT — nav strip + content
   ========================================================= */
@media (max-width: 900px) {
	.sj-account__wc {
		gap: var(--sj-space-4);
	}

	.sj-account-page .woocommerce-MyAccount-navigation.sj-account__nav,
	.sj-account-page nav.sj-account__nav {
		position: static;
		top: auto;
		z-index: auto;
		border-radius: calc(var(--sj-ac-radius) + 2px);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.9) inset,
			0 12px 32px -20px rgba(20, 17, 13, 0.18);
	}

	.sj-account__nav-head {
		padding: 0.65rem 0.85rem;
	}

	.sj-account__nav-head-text {
		display: none;
	}

	.sj-account__nav-head-icon {
		width: 32px;
		height: 32px;
		font-size: 1rem;
		border-radius: 9px;
	}

	.sj-account-page .sj-account__nav .sj-account__nav-list--main,
	.sj-account__nav-foot .sj-account__nav-list {
		padding: 0.55rem 0.65rem;
		gap: 0.4rem;
	}

	.sj-account-page .sj-account__nav .sj-account__nav-link {
		min-width: 4.85rem;
		min-height: 4.15rem;
		padding: 0.5rem 0.55rem;
		border-radius: 12px;
		border-inline-start: 0;
	}

	.sj-account-page .sj-account__nav .sj-account__nav-item.is-active .sj-account__nav-link,
	.sj-account-page .woocommerce-MyAccount-navigation-link.is-active .sj-account__nav-link {
		background: linear-gradient(180deg, rgba(246, 241, 230, 0.95) 0%, #fff 100%);
		border: 1px solid var(--sj-ac-line-gold);
		box-shadow:
			inset 0 -3px 0 var(--sj-ac-gold),
			0 6px 16px -10px rgba(183, 149, 103, 0.4);
	}

	.sj-account__wc-content,
	.sj-account-page .sj-account__wc .woocommerce-MyAccount-content {
		padding: var(--sj-space-4);
		border-radius: calc(var(--sj-ac-radius) + 2px);
	}
}

@media (max-width: 640px) {
	.sj-account__wc-content,
	.sj-account-page .sj-account__wc .woocommerce-MyAccount-content {
		padding: var(--sj-space-3);
	}

	.sj-account__dashboard-welcome {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--sj-space-3);
	}

	.sj-account-page .woocommerce-MyAccount-content > h2:first-child {
		font-size: 1.05rem;
		margin-bottom: var(--sj-space-4);
	}

	.sj-account-page .woocommerce .button,
	.sj-account-page .woocommerce a.button {
		width: 100%;
		justify-content: center;
	}

	.sj-account-form__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sj-account-page form.woocommerce-EditAccountForm .sj-account-form__submit,
	.sj-account-page form.sj-address-form .sj-account-form__submit {
		width: 100%;
		min-width: 0;
	}
}

/* =========================================================
   LOGIN / REGISTER (guest)
   ========================================================= */
@media (max-width: 900px) {
	.sj-account-page .sj-account__body .woocommerce > .u-columns,
	.sj-account-page .sj-account__body .woocommerce #customer_login {
		gap: var(--sj-space-4);
	}
}

/* =========================================================
   TABLES — order cards on small screens
   ========================================================= */
@media (max-width: 640px) {
	.sj-account-page .woocommerce table.shop_table_responsive tbody tr {
		border-radius: 12px;
		box-shadow: 0 6px 18px -14px rgba(20, 17, 13, 0.12);
	}

	.sj-account-page .woocommerce table.shop_table_responsive tbody td {
		font-size: 0.82rem;
	}

	.sj-account-page .woocommerce table.shop_table_responsive tbody td .button {
		width: auto;
		min-height: var(--sj-ac-touch);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sj-account__hero-orb,
	.sj-account__hero-shine,
	.sj-account__stat {
		animation: none;
		transition: none;
	}
}