/**
 * "My Account" page (WooCommerce account shortcode: dashboard, orders,
 * downloads, addresses, account details). WooCommerce's own frontend
 * stylesheet still handles base layout (two-column split, small-screen
 * stacking); this file brands it to match the rest of the site.
 *
 * Matching markup: theme override wp-content/themes/zozia-beauty/woocommerce/
 * myaccount/dashboard.php, and the woocommerce_account_menu_items /
 * woocommerce_get_endpoint_url filters in functions.php (Wishlist tab).
 */

/* Two-column dashboard shell: nav sidebar + content card. Scoped with
   :has() to the logged-in dashboard specifically — on the logged-out
   screens (login, lost password, reset password) .woocommerce wraps just
   a notice and a form, no nav sidebar, and flexing those as side-by-side
   items (rather than stacking) is what put the "Invalid username or
   email" notice beside the Lost Password form instead of above it. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin-top: 8px;
}

/* This stylesheet gives several elements both a flex width/basis and
   padding/border; without border-box those add on top of the width and
   overflow their flex container (most visible on the mobile stacked
   layout, where nav/content go to width: 100%). */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-notice,
.woocommerce-MyAccount-content .wc-block-components-notice-banner,
.zozia-account-dashboard__link-card {
	box-sizing: border-box;
}

/* Nav sidebar */
.woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	padding: 8px;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--wp--preset--color--muted);
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: var(--wp--preset--color--sale);
	background: transparent;
}

/* Content card */
.woocommerce-MyAccount-content {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	padding: 28px 32px;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
}

.woocommerce-MyAccount-content p {
	line-height: 1.6;
}

.woocommerce-MyAccount-content a {
	color: var(--wp--preset--color--primary);
}

/*
 * Notices: "confirm email", "no orders yet", "no downloads yet", etc.
 * WooCommerce 9+ renders these as the Store Notice block
 * (.wc-block-components-notice-banner), not the classic .woocommerce-info /
 * .woocommerce-message markup — style both so this keeps working across
 * versions. The block CSS locks several properties with !important, so a
 * few rules below need !important too, to actually win.
 */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-notice,
.woocommerce-MyAccount-content .wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 16px;
	padding: 16px 20px;
	background: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border-light) !important;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	list-style: none;
}

.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .wc-block-components-notice-banner.is-error {
	background: #FBEAEF !important;
	border-color: var(--wp--preset--color--sale) !important;
}

/* Hide WooCommerce's default icon-font glyph; doesn't match the brand. */
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-error::before {
	display: none;
}

.woocommerce-MyAccount-content .woocommerce-info a,
.woocommerce-MyAccount-content .woocommerce-message a,
.woocommerce-MyAccount-content .woocommerce-error a,
.woocommerce-MyAccount-content .woocommerce-notice a,
.woocommerce-MyAccount-content .wc-block-components-notice-banner .wc-forward {
	padding: 8px 20px !important;
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	opacity: 1;
	/* Keep WC's float: right — it's what puts the button beside the
	   notice text instead of stacking above/below it. */
}

.woocommerce-MyAccount-content .woocommerce-info a:hover,
.woocommerce-MyAccount-content .woocommerce-message a:hover,
.woocommerce-MyAccount-content .woocommerce-error a:hover,
.woocommerce-MyAccount-content .woocommerce-notice a:hover,
.woocommerce-MyAccount-content .wc-block-components-notice-banner .wc-forward:hover {
	background: var(--wp--preset--color--primary-dark) !important;
}

/* Orders / downloads tables */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.woocommerce-MyAccount-downloads {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-MyAccount-content table.woocommerce-orders-table thead th,
.woocommerce-MyAccount-content table.woocommerce-MyAccount-downloads thead th {
	padding: 10px 12px;
	text-align: left;
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.woocommerce-MyAccount-content table.woocommerce-orders-table tbody td,
.woocommerce-MyAccount-content table.woocommerce-MyAccount-downloads tbody td {
	padding: 12px;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:hover,
.woocommerce-MyAccount-content table.woocommerce-MyAccount-downloads tbody tr:hover {
	background: var(--wp--preset--color--surface);
}

.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
	margin: 2px 4px 2px 0;
}

/*
 * Addresses. WooCommerce's own CSS still carries float/width rules from
 * its old .u-columns two-column layout (some unconditional, some meant
 * for small screens), at specificity that ties with a plain
 * ".woocommerce-Addresses" selector — so which one wins the cascade tie
 * is fragile, and in practice it was leaving the two cards oddly sized
 * and out of column order. Rather than fight that cascade, this pins
 * each card to an explicit grid line by its WC-assigned column class
 * (.u-column1 / .u-column2) and forces float/width, so layout no longer
 * depends on which legacy rule happens to win.
 */
.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.woocommerce-MyAccount-content .woocommerce-Addresses .u-column1 {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-MyAccount-content .woocommerce-Addresses .u-column2 {
	grid-column: 2;
	grid-row: 1;
}

.woocommerce-MyAccount-content .woocommerce-Address {
	float: none !important;
	width: 100% !important;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	padding: 20px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.woocommerce-MyAccount-content .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.woocommerce-MyAccount-content .woocommerce-Address .edit {
	padding: 6px 16px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-MyAccount-content .woocommerce-Address .edit:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Dashboard override (woocommerce/myaccount/dashboard.php) */
.zozia-account-dashboard__greeting {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
}

.zozia-account-dashboard__switch {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.zozia-account-dashboard__links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 24px;
	padding: 0;
	list-style: none;
}

/* Left-aligned label + trailing arrow rather than centered text: centered
   text made the two-line "Shipping & Billing" card visibly taller than its
   one-line neighbours, so the row read as jagged instead of as a grid. */
.zozia-account-dashboard__link-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 20px 20px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.zozia-account-dashboard__link-card::after {
	content: "\2192";
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 400;
	transition: transform 0.15s ease, color 0.15s ease;
}

.zozia-account-dashboard__link-card:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	box-shadow: 0 4px 14px rgba(236, 0, 140, 0.18);
}

.zozia-account-dashboard__link-card:hover::after {
	color: var(--wp--preset--color--white);
	transform: translateX(3px);
}

@media (max-width: 768px) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
		gap: 16px;
	}

	/* Desktop renders this as a boxed vertical list — Dashboard, Orders,
	   Wishlist, Addresses, Account details, Log out, one per row — which
	   stacked full-width on mobile ran ~300px tall before any real page
	   content appeared. Collapsed into the same horizontal-scrolling pill
	   row already used for the Shop archive's filters (.zozia-shop-filter-
	   pill in shop.css) so it reads as one compact strip instead, and the
	   current tab uses that same pill's "is-selected" treatment (white fill,
	   pink border/text) rather than desktop's solid-pink block. */
	.woocommerce-MyAccount-navigation {
		flex: 1 1 auto;
		width: 100%;
		background: none;
		border: none;
		padding: 0;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Room for the focus ring on the last pill — without it, tabbing to
		   that pill clips its outline against the scroll container edge. */
		padding: 2px 2px 4px;
	}

	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		flex-shrink: 0;
	}

	.woocommerce-MyAccount-navigation-link a {
		display: flex;
		align-items: center;
		height: 36px;
		box-sizing: border-box;
		border: 1px solid #E3E3E3;
		border-radius: var(--wp--custom--radius--pill);
		padding: 0 16px;
		background-color: #F2F2F2;
		font-size: 13px;
		white-space: nowrap;
	}

	.woocommerce-MyAccount-navigation-link.is-active a {
		background-color: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--primary);
		font-weight: 600;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}

	.woocommerce-MyAccount-content {
		padding: 20px;
	}

	.woocommerce-MyAccount-content .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
	.woocommerce-MyAccount-content .woocommerce-Addresses .u-column2 {
		grid-column: 1;
		grid-row: auto;
	}

	/* Title + "Edit … address" pill sit side by side on desktop, where the
	   heading fits on one line. At this width the x-large heading wraps to
	   two lines while align-items: center still vertically centers the
	   pill against it, leaving the pill floating oddly beside the wrap.
	   Stacking removes the wrap/center collision entirely. */
	.woocommerce-MyAccount-content .woocommerce-Address-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.zozia-account-dashboard__links {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Account forms, buttons and order views
   ==========================================================================
   Scoped to .woocommerce-account rather than .woocommerce-MyAccount-content
   so the logged-out Login/Register screen — which renders outside the
   account shell — picks up the same treatment. */

/* Order-table action buttons rendered invisible: they are <a> elements, so
   they inherit the theme's pink link colour, while wp-element-button paints
   the same pink as the background. "View" was pink-on-pink. */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.woocommerce-button,
.woocommerce-account .woocommerce button.woocommerce-Button,
.woocommerce-account .woocommerce input.button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 20px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	display: inline-block;
	transition: background-color 0.15s ease;
}

.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.woocommerce-button:hover,
.woocommerce-account .woocommerce button.woocommerce-Button:hover,
.woocommerce-account .woocommerce input.button:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

/* Form fields — edit-address, account details, login and register all use
   WooCommerce's classic .form-row / .input-text markup, which ships a hard
   near-black border that clashes with the softened checkout fields. */
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row textarea,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce form .form-row .select2-selection {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	padding: 10px 12px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce form .form-row textarea:focus,
.woocommerce-account .woocommerce form .form-row select:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
	outline: none;
}

.woocommerce-account .woocommerce form .form-row label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-account .woocommerce .required {
	color: var(--wp--preset--color--sale);
	text-decoration: none;
}

/* Login / Register cards on the logged-out account page. */
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-form-register {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--lg);
	box-sizing: border-box;
}

.woocommerce-account .woocommerce form.woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce form.woocommerce-form-register input.input-text {
	width: 100%;
}

.woocommerce-account .woocommerce .woocommerce-LostPassword a {
	color: var(--wp--preset--color--primary);
}

/* Order status as a pill. "On hold" is the state that matters most here —
   it means the order needs attention before it can proceed — so it should be
   readable at a glance rather than plain body text. */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--caption);
}

.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--primary-dark);
}

.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--accent-teal);
}

.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--sale);
}

/* View order: details table + the customer address blocks below it. */
.woocommerce-account .woocommerce-table--order-details {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce-account .woocommerce-table--order-details thead th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-table--order-details tfoot th {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

.woocommerce-account .woocommerce-customer-details address {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--md);
	font-style: normal;
}

@media (max-width: 782px) {
	.woocommerce-account .woocommerce form.woocommerce-form-login,
	.woocommerce-account .woocommerce form.woocommerce-form-register {
		padding: var(--wp--preset--spacing--md);
	}

	/* The notice button keeps WooCommerce's float: right so it sits beside
	   the notice text on desktop (see the rule above that preserves it
	   deliberately). Once the notice is only ~340px wide the text wraps
	   around the button instead, so stack it below on small screens. */
	.woocommerce-MyAccount-content .woocommerce-info a,
	.woocommerce-MyAccount-content .woocommerce-message a,
	.woocommerce-MyAccount-content .woocommerce-error a,
	.woocommerce-MyAccount-content .woocommerce-notice a,
	.woocommerce-MyAccount-content .wc-block-components-notice-banner .wc-forward {
		float: none !important;
		display: inline-block;
		margin-top: var(--wp--preset--spacing--sm);
	}
}

/* ==========================================================================
   "Cash on Delivery/Pickup" payment callout on View order
   ==========================================================================
   Printed by inc/wc-account-order.php. Deliberately the same treatment as the
   order-received page's callout (see cart-checkout.css) — it is the same
   content from the same gateway setting, so it should not look like a
   different thing in a different place. */

.woocommerce-account .zozia-order-payment-callout {
	background: var(--wp--preset--color--surface);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--lg);
	box-sizing: border-box;
	margin-bottom: var(--wp--preset--spacing--lg);
}

.woocommerce-account .zozia-order-payment-callout > p:first-child {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: var(--wp--preset--color--primary-dark);
	margin-top: 0;
}

.woocommerce-account .zozia-order-payment-callout > p:first-child strong {
	font-weight: inherit;
}

/* The gateway's instructions arrive as ordinary <p>/<ol>, each carrying a
   bottom margin — including the last one, which pushes dead space between the
   final line and the bottom of the card. Zeroing the last child rather than the
   paragraph keeps it correct if a future gateway's instructions end in a list
   instead of a sentence. */
.woocommerce-account .zozia-order-payment-callout > *:last-child {
	margin-bottom: 0;
}

.woocommerce-account .zozia-order-payment-callout ol {
	margin: var(--wp--preset--spacing--md) 0;
	padding-left: var(--wp--preset--spacing--lg);
}

.woocommerce-account .zozia-order-payment-callout li {
	margin-bottom: var(--wp--preset--spacing--xs);
}

.woocommerce-account .zozia-order-payment-callout a {
	color: var(--wp--preset--color--primary);
}

/* Unused while "Cash on Delivery/Pickup" instructions are plain text (no QR image), but
   kept in case a future payment method's instructions include one again — a
   tall portrait graphic needs a height cap as well as a width cap or it runs
   ~500px down the page. */
.woocommerce-account .zozia-order-payment-callout img {
	display: block;
	max-width: 200px;
	max-height: 340px;
	width: auto;
	height: auto;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
}

@media (max-width: 782px) {
	.woocommerce-account .zozia-order-payment-callout {
		padding: var(--wp--preset--spacing--md);
	}
}

/* ==========================================================================
   Courier tracking callout on View order
   ==========================================================================
   Printed by inc/wc-order-tracking.php. Deliberately quieter than the payment
   callout above it — that one is a thing the customer has to act on, this one
   is a thing they only need to read — so it borrows the same box but drops the
   pink border and the display-size first line. */

.woocommerce-account .zozia-order-tracking-callout {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--md);
	box-sizing: border-box;
	margin-bottom: var(--wp--preset--spacing--lg);
}

.woocommerce-account .zozia-order-tracking-callout p {
	margin: 0;
	line-height: 1.6;
}

.woocommerce-account .zozia-order-tracking-callout a {
	color: var(--wp--preset--color--primary);
}

/* The number is the one thing worth reading twice — it gets quoted back to the
   courier, so it wants to be legible rather than merely bold. */
.woocommerce-account .zozia-order-tracking-callout strong {
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary-dark);
}

/* When a tracking link is set, the number IS the link — so it has to look like
   one. The emphasis rule above sits on a <strong> nested inside the <a>, which
   means it repaints the anchor's colour and leaves a tappable number
   indistinguishable from bold text. Handing the colour back to the anchor and
   underlining it is what makes "tap it" true. */
.woocommerce-account .zozia-order-tracking-callout a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.woocommerce-account .zozia-order-tracking-callout a strong {
	color: inherit;
}

.woocommerce-account .zozia-order-tracking-callout a:hover,
.woocommerce-account .zozia-order-tracking-callout a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
	text-decoration-thickness: 2px;
}

/* The generic page template (templates/page.html) gives every simple page
   48px of top padding plus the root 24px header-to-content block gap —
   fine on desktop under the full nav bar, but on mobile (same header
   height problem as the shop archive, see .zozia-header-bar in
   header.css) it read as a large empty strip above "My account", with a
   second, smaller gap before the dashboard box below the title. Scoped to
   .zozia-page-main, which only affects account pages since this
   stylesheet only loads there (see is_account_page() in functions.php) —
   other pages using the same template (About Us, Terms, Wishlist…) are
   untouched. */
@media (max-width: 860px) {
	.zozia-page-main {
		margin-top: 8px;
		/* templates/page.html sets this padding inline (style=""), which
		   beats a plain class selector regardless of specificity — needs
		   !important to actually win. */
		padding-top: 16px !important;
	}

	.zozia-page-main .entry-content {
		margin-top: 8px;
	}
}