/* =========================================================================
   SuperFumetto — WooCommerce styles
   Loaded only on WC pages (account/cart/checkout/shop/product). Account
   nav, login/lost-password/reset forms, order tables, stats, summaries.
   ========================================================================= */

/* =========================================================================
   12. WooCommerce — Account area + login/lost-password + shared tweaks
   ========================================================================= */

/* ---- Nav account icon (desktop + mobile drawer) ---- */
.sf-nav__account {
	position: relative;
	width: 42px;
	height: 42px;
	display: inline-grid;
	place-items: center;
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: 999px;
	color: var(--c-ink);
	transition: border-color var(--t), background var(--t), color var(--t);
}
.sf-nav__account:hover {
	border-color: var(--c-ink);
	color: var(--c-accent);
	background: var(--c-paper);
}
.sf-nav__account svg { width: 20px; height: 20px; }
.sf-nav__account.is-logged { border-color: var(--c-ink); }
.sf-nav__account-dot {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--c-mint);
	border: 2px solid var(--c-card);
}
.sf-nav__account:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

/* Mobile drawer account row */
.sf-mnav__account {
	margin-top: var(--s-4);
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	color: var(--c-ink);
	font-family: var(--ff-ui);
	font-weight: 500;
	font-size: 1rem;
}
.sf-mnav__account.is-logged {
	border-color: var(--c-ink);
	background: color-mix(in srgb, var(--c-mint) 10%, var(--c-card));
}
.sf-mnav__account svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---- WC wrapper + notices ---- */
.sf-woo-main { padding-top: var(--s-7); padding-bottom: var(--s-9); }
.sf-woo { padding: var(--s-6) 0 var(--s-9); }

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper {
	margin-bottom: var(--s-5);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	padding: var(--s-3) var(--s-4);
	margin: 0 0 var(--s-3);
	border-radius: var(--r-md);
	border: var(--stroke) solid currentColor;
	font-size: 0.95rem;
	font-family: var(--ff-ui);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.woocommerce-message { background: color-mix(in srgb, var(--c-mint) 14%, var(--c-card)); color: var(--c-mint); }
.woocommerce-info    { background: color-mix(in srgb, var(--c-ocean) 10%, var(--c-card)); color: var(--c-ocean); }
.woocommerce-error   { background: color-mix(in srgb, var(--c-vermilion) 14%, var(--c-card)); color: var(--c-vermilion); }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { margin-left: auto; }

/* ---- Account hero ---- */
.sf-acc-hero {
	max-width: 760px;
	margin: 0 auto var(--s-8);
	text-align: center;
}
.sf-acc-hero + h2 { text-align: center; }
.sf-acc-hero .sf-eyebrow { justify-content: center; }
.sf-acc-hero .sf-eyebrow::before { display: none; }
.sf-acc-hero .sf-eyebrow::after {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	margin-left: var(--s-3);
}
.sf-acc-hero__title { margin: var(--s-3) 0 var(--s-3); }
.sf-acc-hero__lead  { color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.5; }

/* ---- Layout: nav + content (WC emits two sibling elements) ---- */
.woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content,
.sf-acc-nav + .woocommerce-MyAccount-content {
	/* Content sits below nav on narrow; grid kicks in at wider widths. */
}

/* Sidebar + content layout — ONLY when logged-in (account navigation exists).
   Logged-out state has only the hero + login card and stays block so the card
   centers naturally inside #customer_login. */
@media (min-width: 860px) {
	body.logged-in.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--s-7);
		align-items: start;
		max-width: 1100px;
		margin: 0 auto;
	}
	/* Hero spans full width above the two columns. */
	body.logged-in.woocommerce-account .woocommerce > .sf-acc-hero {
		grid-column: 1 / -1;
	}
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

/* ---- Custom account nav ----
   All selectors nested under .sf-acc-nav to beat WC's own defaults
   (.woocommerce-MyAccount-navigation li a has specificity 0-0-1-2). */
.sf-acc-nav {
	width: 100%!important;
	position: sticky;
	top: calc(var(--s-6) + 84px); /* below main nav */
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	padding: var(--s-3);
}
.sf-acc-nav .sf-acc-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: 0; /* reset WC li border-top/bottom */
}
.sf-acc-nav .sf-acc-nav__item {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}
.sf-acc-nav .sf-acc-nav__link {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
	border-radius: var(--r-md);
	color: var(--c-ink);
	font-family: var(--ff-ui);
	font-weight: 500;
	width: 100%;
	text-decoration: none;
	transition: background var(--t), color var(--t);
}
.sf-acc-nav .sf-acc-nav__link:hover {
	background: var(--c-paper-deep);
}
.sf-acc-nav .sf-acc-nav__num {
	font-family: var(--ff-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--c-ink-mute);
	min-width: 22px;
	flex-shrink: 0;
}
.sf-acc-nav .sf-acc-nav__icon {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--c-ink);
	flex-shrink: 0;
}
.sf-acc-nav .sf-acc-nav__icon svg { width: 18px; height: 18px; display: block; }
.sf-acc-nav .sf-acc-nav__label {
	font-size: 0.92rem;
	flex: 1;
	min-width: 0;
}
.sf-acc-nav .sf-acc-nav__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--c-accent);
	margin-left: auto;
	flex-shrink: 0;
}

/* Active state */
.sf-acc-nav .sf-acc-nav__item.sf-is-active .sf-acc-nav__link {
	background: var(--c-ink);
	color: var(--c-paper);
}
.sf-acc-nav .sf-acc-nav__item.sf-is-active .sf-acc-nav__num,
.sf-acc-nav .sf-acc-nav__item.sf-is-active .sf-acc-nav__icon { color: var(--c-paper); }

.sf-acc-nav .sf-acc-nav__item.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--s-3);
	border-top: var(--stroke) dashed var(--c-line-soft);
	padding-top: var(--s-3);
}
.sf-acc-nav .sf-acc-nav__item.woocommerce-MyAccount-navigation-link--customer-logout .sf-acc-nav__link {
	color: var(--c-ink-mute);
}
.sf-acc-nav .sf-acc-nav__item.woocommerce-MyAccount-navigation-link--customer-logout .sf-acc-nav__link:hover {
	color: var(--c-vermilion);
}

@media (max-width: 859px) {
	.sf-acc-nav {
		position: static;
		margin-bottom: var(--s-5);
	}
	.sf-acc-nav .sf-acc-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--s-2);
	}
	.sf-acc-nav .sf-acc-nav__link { padding: var(--s-2) var(--s-3); }
	.sf-acc-nav .sf-acc-nav__num  { display: none; }
	.sf-acc-nav .sf-acc-nav__label { font-size: 0.88rem; }
}

/* ---- Dashboard: stats cards ---- */
.sf-acc-dash {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}

.sf-acc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s-3);
}
.sf-acc-stat {
	padding: var(--s-5);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.sf-acc-stat__num {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem);
	line-height: 1;
	color: var(--c-ink);
}
.sf-acc-stat__label {
	font-family: var(--ff-mono);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}
.sf-acc-stat--cta {
	grid-column: span 2;
	background: var(--c-ink);
	color: var(--c-paper);
	align-items: flex-start;
	justify-content: center;
	gap: var(--s-3);
	position: relative;
	overflow: hidden;
}
.sf-acc-stat--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--c-accent) 40%, transparent) 0, transparent 45%),
		radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--c-sunshine) 30%, transparent) 0, transparent 40%);
	opacity: 0.7;
	pointer-events: none;
}
.sf-acc-stat--cta .sf-btn { position: relative; z-index: 1; }

@media (max-width: 560px) {
	.sf-acc-stats { grid-template-columns: 1fr 1fr; }
	.sf-acc-stat--cta { grid-column: span 2; }
}

/* ---- Orders list ---- */
.sf-acc-orders__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
}
.sf-acc-orders__title { margin: 0; }
.sf-acc-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-mono);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink);
	border-bottom: var(--stroke) solid var(--c-ink);
	padding-bottom: 2px;
	transition: color var(--t), border-color var(--t);
}
.sf-acc-link svg { width: 14px; height: 14px; }
.sf-acc-link:hover { color: var(--c-accent); border-color: var(--c-accent); }

.sf-acc-orders__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.sf-acc-order {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform var(--t), border-color var(--t);
}
.sf-acc-order:hover {
	transform: translateY(-1px);
	border-color: var(--c-line);
}
.sf-acc-order__ribbon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--c-ink-mute);
}
.sf-acc-order[data-status="processing"] .sf-acc-order__ribbon,
.sf-acc-order[data-status="on-hold"]    .sf-acc-order__ribbon { background: var(--c-sunshine); }
.sf-acc-order[data-status="completed"]  .sf-acc-order__ribbon { background: var(--c-mint); }
.sf-acc-order[data-status="pending"]    .sf-acc-order__ribbon { background: var(--c-ocean); }
.sf-acc-order[data-status="failed"]     .sf-acc-order__ribbon,
.sf-acc-order[data-status="cancelled"]  .sf-acc-order__ribbon,
.sf-acc-order[data-status="refunded"]   .sf-acc-order__ribbon { background: var(--c-vermilion); }

.sf-acc-order__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.sf-acc-order__num {
	font-family: var(--ff-mono);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--c-ink);
}
.sf-acc-order__date {
	font-size: 0.78rem;
	color: var(--c-ink-mute);
}

.sf-acc-order__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.sf-acc-order__count { font-size: 0.88rem; color: var(--c-ink-soft); }
.sf-acc-order__total {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--c-ink);
}

.sf-acc-order__tail {
	display: flex;
	align-items: center;
	gap: var(--s-4);
}
.sf-acc-order__status {
	font-family: var(--ff-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--c-paper-deep);
	color: var(--c-ink);
}
.sf-acc-order__status--processing,
.sf-acc-order__status--on-hold { background: var(--c-sunshine); color: var(--c-ink); }
.sf-acc-order__status--completed { background: var(--c-mint); color: #fff; }
.sf-acc-order__status--pending { background: var(--c-ocean); color: #fff; }
.sf-acc-order__status--failed,
.sf-acc-order__status--cancelled,
.sf-acc-order__status--refunded { background: var(--c-vermilion); color: #fff; }

.sf-acc-order__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--ff-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink);
	transition: color var(--t);
}
.sf-acc-order__cta svg { width: 14px; height: 14px; }
.sf-acc-order__cta:hover { color: var(--c-accent); }

@media (max-width: 640px) {
	.sf-acc-order {
		grid-template-columns: 1fr auto;
		gap: var(--s-3);
		padding: var(--s-4);
	}
	.sf-acc-order__body  { grid-column: 1; grid-row: 2; }
	.sf-acc-order__tail  { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; }
}

/* ---- Empty state ---- */
.sf-acc-empty {
	padding: var(--s-8) var(--s-6);
	background: var(--c-card);
	border: var(--stroke-bold) dashed var(--c-line-soft);
	border-radius: var(--r-xl);
	text-align: center;
}
.sf-acc-empty__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--s-4);
	color: var(--c-ink-mute);
}
.sf-acc-empty__title { margin: 0 0 var(--s-3); }
.sf-acc-empty__lead {
	color: var(--c-ink-soft);
	max-width: 44ch;
	margin: 0 auto var(--s-5);
}

/* ---- Quick actions ---- */
.sf-acc-quick__title { margin: 0 0 var(--s-3); }
.sf-acc-quick__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--s-3);
}
.sf-acc-quick__item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-md);
	color: var(--c-ink);
	font-family: var(--ff-ui);
	font-weight: 500;
	transition: border-color var(--t), transform var(--t);
}
.sf-acc-quick__item:hover {
	border-color: var(--c-ink);
	transform: translateY(-1px);
}
.sf-acc-quick__item svg {
	width: 22px;
	height: 22px;
	color: var(--c-ink-mute);
	flex-shrink: 0;
}
.sf-acc-quick__item:hover svg { color: var(--c-accent); }
.sf-acc-quick__item--danger:hover svg,
.sf-acc-quick__item--danger:hover { color: var(--c-vermilion); border-color: var(--c-vermilion); }

/* ---- Login / Lost password / Reset forms ---- */

/* Single centered column, 520px. WC's own myaccount.css floats .u-column1 /
   .u-column2 left with width: 48% — we override that with higher specificity
   (body class + id) and also neutralize float. Login + register stack. */
body.woocommerce-account #customer_login,
#customer_login {
	display: block;
	width: 100%;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	float: none;
}
body.woocommerce-account #customer_login > .u-column1,
body.woocommerce-account #customer_login > .u-column2,
#customer_login > .u-column1,
#customer_login > .u-column2 {
	float: none;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0 0 var(--s-6);
}
body.woocommerce-account #customer_login > .u-column1 > h2,
body.woocommerce-account #customer_login > .u-column2 > h2,
#customer_login > .u-column1 > h2,
#customer_login > .u-column2 > h2 {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
	text-align: center;
	margin: 0 0 var(--s-4);
}
/* Clear the float that WC inserts after .col2-set — otherwise the card can
   collapse over its own cleared space. */
body.woocommerce-account #customer_login::after,
#customer_login::after {
	content: "";
	display: table;
	clear: both;
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.edit-account {
	margin: 0 auto !important;
	max-width: 520px !important;
	padding: var(--s-6);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-xl);
	box-shadow: 5px 5px 0 var(--c-ink);
}
/* Inside #customer_login the form fills its column — no extra margin needed. */
#customer_login .woocommerce-form-login,
#customer_login .woocommerce-form-register {
	max-width: none;
	margin: 0;
}

.woocommerce-form-row {
	margin-bottom: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

/* Override WC's default 2-column row pattern (.form-row-first / .form-row-last
   sets width: 47% + float: left, specificity 0-0-3-0). Target BOTH .form-row
   and the -first/-last modifiers, with !important to beat the 30-spec rule. */
.woocommerce-form-login .form-row,
.woocommerce-form-login .form-row-first,
.woocommerce-form-login .form-row-last,
.woocommerce-form-register .form-row,
.woocommerce-form-register .form-row-first,
.woocommerce-form-register .form-row-last,
.woocommerce-ResetPassword .form-row,
.woocommerce-ResetPassword .form-row-first,
.woocommerce-ResetPassword .form-row-last,
.woocommerce-EditAccountForm .form-row,
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row,
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last,
#customer_login .form-row,
#customer_login .form-row-first,
#customer_login .form-row-last,
.woocommerce-MyAccount-content .form-row,
.woocommerce-MyAccount-content .form-row-first,
.woocommerce-MyAccount-content .form-row-last {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	clear: both !important;
}

/* Style the <fieldset> WC wraps the password section in (Modifica password). */
.woocommerce-EditAccountForm fieldset {
	margin: var(--s-6) 0 var(--s-4);
	padding: var(--s-5);
	border: var(--stroke) dashed var(--c-line-soft);
	border-radius: var(--r-md);
	background: var(--c-card-soft);
}
.woocommerce-EditAccountForm fieldset legend {
	padding: 0 var(--s-3);
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: var(--c-ink);
}
.woocommerce-form-row label,
.woocommerce-form-row > span {
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	font-weight: 500;
}
.woocommerce-form-row label .required,
.woocommerce-form-row label abbr { color: var(--c-vermilion); text-decoration: none; }

.woocommerce-Input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-EditAccountForm input.input-text,
.input-text {
	font-family: var(--ff-ui);
	font-size: 1rem;
	padding: var(--s-3) var(--s-4);
	background: var(--c-paper);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-md);
	color: var(--c-ink);
	transition: border-color var(--t), box-shadow var(--t);
	width: 100%;
}
.woocommerce-Input:focus,
.input-text:focus,
.woocommerce form .form-row input.input-text:focus {
	outline: none;
	border-color: var(--c-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent);
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-ui);
	font-size: 0.9rem;
	color: var(--c-ink-soft);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce button.button,
.woocommerce-EditAccountForm button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border: var(--stroke-bold) solid var(--c-ink);
	border-radius: var(--r-pill);
	font-family: var(--ff-ui);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	box-shadow: 0 3px 0 var(--c-ink);
	transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce button.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--c-ink);
}
.woocommerce-form-login__submit:active,
.woocommerce button.button:active {
	transform: translateY(1px);
	box-shadow: 0 1px 0 var(--c-ink);
}

.woocommerce-LostPassword a,
.lost_password a {
	color: var(--c-ink-mute);
	border-bottom: 1px dashed var(--c-ink-mute);
	font-size: 0.88rem;
}
.woocommerce-LostPassword a:hover,
.lost_password a:hover {
	color: var(--c-accent);
	border-color: var(--c-accent);
}

/* ---- WC tables (orders, downloads, address etc.) ---- */
.woocommerce-orders-table,
.woocommerce-MyAccount-downloads.shop_table,
table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
	font-family: var(--ff-ui);
}
table.shop_table th,
table.shop_table td {
	padding: var(--s-3) var(--s-4);
	text-align: left;
	border-bottom: var(--stroke) solid var(--c-line-soft);
	vertical-align: middle;
}
table.shop_table thead th {
	background: var(--c-paper-deep);
	font-family: var(--ff-mono);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	font-weight: 600;
}
table.shop_table tbody tr:last-child td { border-bottom: 0; }
table.shop_table .button {
	padding: 6px 12px;
	font-size: 0.82rem;
	box-shadow: 0 2px 0 var(--c-ink);
}

/* Compact tables on mobile — stack cells */
@media (max-width: 640px) {
	table.shop_table thead { display: none; }
	table.shop_table,
	table.shop_table tbody,
	table.shop_table tr,
	table.shop_table td {
		display: block;
		width: 100%;
	}
	table.shop_table tr {
		padding: var(--s-3);
		border-bottom: var(--stroke) solid var(--c-line-soft);
	}
	table.shop_table td {
		padding: 4px 0;
		border: 0;
	}
	table.shop_table td::before {
		content: attr(data-title) " ";
		font-family: var(--ff-mono);
		font-size: 0.72rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--c-ink-mute);
		display: inline-block;
		margin-right: var(--s-2);
	}
}

/* View single order layout */
.woocommerce-order-details,
.woocommerce-customer-details {
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	padding: var(--s-5);
	margin-bottom: var(--s-5);
}
.woocommerce-order-details__title,
.woocommerce-column__title {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	margin: 0 0 var(--s-4);
}

/* Wizard nav + /crea responsive rules moved to builder.css (this file
   loads only on WC pages; /crea is not a WC page). */