/* ============================================================
   ANDERSON'S — WooCommerce My Account dashboard branding
   Loaded via inc/customizations.php on /my-account/ pages.
   ============================================================ */

.woocommerce-account .woocommerce {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 1.5rem 4rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	background: var(--swatch-white);
	border: 1px solid rgba(14, 41, 60, 0.1);
	border-radius: var(--radius-frame);
	padding: 0.75rem;
	margin: 0 0 1.5rem;
	box-shadow: 0 1px 2px rgba(15, 30, 61, 0.04), 0 4px 12px rgba(15, 30, 61, 0.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 0.875rem;
	font-family: var(--font-heading-bold);
	font-size: 1rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--swatch-dark);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--swatch-extra-light);
	color: var(--swatch-brand-blue);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--swatch-brand-red);
	color: var(--swatch-white);
}

/* Content area sits below the nav strip */
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

/* Welcome paragraph + intro copy */
.woocommerce-account .woocommerce-MyAccount-content p {
	color: rgba(14, 41, 60, 0.85);
	line-height: 1.6;
}
.woocommerce-account .woocommerce-MyAccount-content p strong {
	color: var(--swatch-dark);
}
.woocommerce-account .woocommerce-MyAccount-content p a {
	color: var(--swatch-brand-blue);
	text-decoration: none;
	font-weight: 700;
}
.woocommerce-account .woocommerce-MyAccount-content p a:hover {
	text-decoration: underline;
}

/* Orders / downloads / addresses tables */
.woocommerce-account table.shop_table,
.woocommerce-account table.account-orders-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--swatch-white);
	border: 1px solid rgba(14, 41, 60, 0.1);
	border-radius: var(--radius-frame);
	overflow: hidden;
	margin: 0 0 1.5rem;
}
.woocommerce-account table.shop_table thead th {
	background: var(--swatch-dark);
	color: var(--swatch-white);
	padding: 0.875rem 1rem;
	text-align: left;
	font-family: var(--font-heading-bold);
	font-size: 0.6875rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.woocommerce-account table.shop_table tbody td {
	padding: 0.875rem 1rem;
	border-top: 1px solid rgba(14, 41, 60, 0.08);
	font-size: 0.9375rem;
	color: var(--swatch-dark);
}
.woocommerce-account table.shop_table tbody tr:hover td {
	background: var(--swatch-extra-light);
}
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
}
.woocommerce-account table.shop_table .woocommerce-button.button,
.woocommerce-account table.shop_table .button {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 0.875rem;
	background: var(--swatch-brand-blue);
	color: var(--swatch-white);
	border: 1.5px solid var(--swatch-brand-blue);
	border-radius: var(--radius-sm);
	font-family: var(--font-heading-bold);
	font-size: 0.6875rem;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 200ms ease;
}
.woocommerce-account table.shop_table .woocommerce-button.button + .woocommerce-button.button,
.woocommerce-account table.shop_table .button + .button {
	margin-left: 0; /* gap handled by flex parent above */
}
.woocommerce-account table.shop_table .woocommerce-button.button:hover,
.woocommerce-account table.shop_table .button:hover {
	background: var(--swatch-brand-blue-deep);
	border-color: var(--swatch-brand-blue-deep);
}
.woocommerce-account table.shop_table .button.cancel,
.woocommerce-account table.shop_table .button.delete {
	background: transparent;
	color: var(--swatch-brand-red);
	border-color: var(--swatch-brand-red);
}
.woocommerce-account table.shop_table .button.cancel:hover,
.woocommerce-account table.shop_table .button.delete:hover {
	background: var(--swatch-brand-red);
	color: var(--swatch-white);
}

/* Status badges */
.woocommerce-account .order-status {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	background: var(--swatch-extra-light);
	color: var(--swatch-dark);
	border-radius: 999px;
	font-family: var(--font-heading-bold);
	font-size: 0.6875rem;
	letter-spacing: 1.25px;
	text-transform: uppercase;
}
.woocommerce-account .order-status.status-completed { background: rgba(46, 125, 50, 0.12); color: #2E7D32; }
.woocommerce-account .order-status.status-processing { background: rgba(0, 110, 199, 0.12); color: var(--swatch-brand-blue); }
.woocommerce-account .order-status.status-cancelled,
.woocommerce-account .order-status.status-failed { background: rgba(230, 58, 61, 0.12); color: var(--swatch-brand-red); }

/* Addresses block — the "My Addresses" page (/my-account/edit-address/)
   wraps both address cards in `.u-columns.col2-set.woocommerce-Addresses`.
   WC's default styling uses floats with width: 48% which staggers the
   cards on most themes. Force a 2-column CSS grid so Billing + Shipping
   sit side-by-side, with proper stacking on narrow viewports. */
.woocommerce-account .addresses,
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns.col2-set {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	width: 100%;
}
/* Specificity bumped to (0,5,0)+ to outrank WC core's float rule:
   `.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column1 {
      float: left; width: 48%; margin-right: 4%; }`
   which was producing the staggered Billing-top-right / Shipping-bottom-left
   layout despite the parent being display: grid. */
.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2,
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2,
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
@media (max-width: 720px) {
	.woocommerce-account .addresses,
	.woocommerce-account .woocommerce-Addresses,
	.woocommerce-account .u-columns.col2-set {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}
.woocommerce-account .woocommerce-Address {
	background: var(--swatch-white);
	border: 1px solid rgba(14, 41, 60, 0.1);
	border-radius: var(--radius-frame);
	padding: 1.25rem 1.375rem;
	box-shadow: 0 1px 2px rgba(15, 30, 61, 0.04), 0 4px 12px rgba(15, 30, 61, 0.06);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	font-family: var(--font-heading-bold);
	font-size: 1.125rem;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	color: var(--swatch-dark);
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--swatch-brand-red);
}
.woocommerce-account .woocommerce-Address-title a {
	font-family: var(--font-heading-bold);
	font-size: 0.6875rem;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	color: var(--swatch-brand-blue);
	text-decoration: none;
}
.woocommerce-account .woocommerce-Address-title a:hover { text-decoration: underline; }
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--swatch-dark);
}

/* Forms inside my-account (edit profile, change password) */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
	background: var(--swatch-white);
	border: 1px solid rgba(14, 41, 60, 0.1);
	border-radius: var(--radius-frame);
	padding: 1.5rem 1.75rem 1.75rem;
	box-shadow: 0 1px 2px rgba(15, 30, 61, 0.04), 0 4px 12px rgba(15, 30, 61, 0.06);
}
.woocommerce-account fieldset legend {
	font-family: var(--font-heading-bold);
	font-size: 1rem;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	color: var(--swatch-dark);
	padding: 0 0 0.5rem;
}

/* Submit buttons — Save Changes / Update / etc.
   Add top spacing so the button doesn't kiss the field above it on
   the Account Details and Edit Address forms (especially the
   description textarea on Account Details). */
.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-account .woocommerce-address-fields > p:last-of-type,
.woocommerce-account .woocommerce-EditAccountForm > .form-row:last-of-type,
.woocommerce-account .woocommerce-address-fields > .form-row:last-of-type {
	margin-top: 1.5rem;
}
.woocommerce-account button[type="submit"],
.woocommerce-account .woocommerce-Button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
	height: 48px;
	padding: 0 1.5rem;
	background: var(--swatch-brand-red);
	color: var(--swatch-white);
	border: 1.5px solid var(--swatch-brand-red);
	border-radius: var(--radius-sm);
	font-family: var(--font-heading-bold);
	font-size: 0.875rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease;
}
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button.button:hover {
	background: var(--swatch-brand-red-deep);
	border-color: var(--swatch-brand-red-deep);
}

@media (max-width: 720px) {
	.woocommerce-account .addresses { grid-template-columns: 1fr; }
	.woocommerce-account table.shop_table thead { display: none; }
	.woocommerce-account table.shop_table tbody tr {
		display: block;
		padding: 0.875rem 1rem;
		border-top: 1px solid rgba(14, 41, 60, 0.08);
	}
	.woocommerce-account table.shop_table tbody td {
		display: flex;
		justify-content: space-between;
		padding: 0.25rem 0;
		border: 0;
	}
	.woocommerce-account table.shop_table tbody td::before {
		content: attr(data-title);
		font-family: var(--font-heading-bold);
		font-size: 0.625rem;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: rgba(14, 41, 60, 0.55);
	}
}

/* =========================================================
   View Order — billing + shipping address blocks
   Two-column grid on desktop, stacked on mobile. WC's
   default uses a `.col2-set` wrapper with `.col-1` /
   `.col-2` children that don't lay out cleanly without
   theme styling — boxes were rendering full-width and
   stacked vertically with cramped padding.
   ========================================================= */
.woocommerce-customer-details {
	margin-top: 2rem;
}
.woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	width: 100%;
}
.woocommerce-customer-details .woocommerce-column {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.woocommerce-customer-details .woocommerce-column h2,
.woocommerce-customer-details .woocommerce-column .woocommerce-column__title {
	font-family: var(--font-heading) !important;
	font-size: 2rem !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--swatch-brand-red) !important;
	margin: 0 0 0.875rem !important;
}
.woocommerce-customer-details .woocommerce-column address {
	display: block;
	padding: 1.25rem 1.5rem !important;
	background: var(--swatch-white) !important;
	border: 1px solid rgba(14, 41, 60, 0.12) !important;
	border-radius: var(--radius-sm) !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	font-style: normal !important;
	line-height: 1.6 !important;
	color: var(--swatch-dark) !important;
	width: 100%;
	box-sizing: border-box;
}
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	margin-top: 0.5rem;
	color: var(--swatch-brand-blue);
}
@media (max-width: 720px) {
	.woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}