/*
 * My Account: login and register, lost password, and every logged-in screen.
 *
 * Loaded only where dairysuvidha_renders_the_account() is true (inc/assets.php),
 * so none of it weighs on the budgeted storefront pages. WooCommerce's own
 * woocommerce.css, -layout.css, -smallscreen.css and -blocktheme.css all load
 * here (the account is outside the budget), and most rules below overrule one
 * of them. `body.woocommerce-account` leads every selector that has to win on
 * specificity rather than on load order.
 *
 * What was wrong, measured on the live page at 1366px before this file:
 * the title started at x=183 and the forms at x=83; the whole account sat in a
 * 720px column with the right half of the page empty; inputs were 13px, which
 * makes iOS zoom the page on every tap into a field; "Remember me" was a 44px
 * empty square; the menu was a column of bare links 27px tall.
 *
 * Icons are CSS masks, as in style.css: the data URIs carry stroke='%23000'
 * only because a mask keeps the shape's alpha and throws its colour away. The
 * visible colour is each pseudo-element's background-color.
 */

body.woocommerce-account {
	--ds-icon-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4.5v-5.5h-5V20H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	--ds-icon-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 12 4l8 3.5v9L12 20l-8-3.5z'/%3E%3Cpath d='M4 7.5 12 11l8-3.5M12 11v9'/%3E%3C/svg%3E");
	--ds-icon-downloads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
	--ds-icon-address: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	--ds-icon-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
	--ds-icon-payment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
	--ds-icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E");
	--ds-icon-branch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.5 5h13L20 9.5M4 9.5h16M5 9.5V20h14V9.5M9.5 20v-5h5v5'/%3E%3C/svg%3E");
	--ds-icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--ds-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10' stroke-width='2.2'/%3E%3C/svg%3E");
}

/* ---- Shell: one left edge for the title and everything under it ---------
 * woocommerce-blocktheme.css caps `.woocommerce-account .wp-block-post-title`
 * and `.woocommerce-account main .woocommerce` at 1000px (written for its own
 * centred templates), and style.css's prose rule caps every direct child of
 * .entry-content at 720px. Restating the shell's 1200px lets core's
 * constrained layout centre the title exactly as it centres the content, the
 * same fix style.css makes for the checkout title. */
body.woocommerce-account .ds-page .wp-block-post-title {
	max-width: 1200px;
	margin-bottom: var(--wp--preset--spacing--ds-24);
}

body.woocommerce-account .entry-content:not(.alignwide):not(.alignfull) > .woocommerce {
	max-width: none;
	margin: 0 0 var(--wp--preset--spacing--ds-48);
}

/* ---- Logged in: menu beside the screen ------------------------------------
 * :has() keys the grid to the menu actually being there, so the login and
 * lost-password screens (no menu) never get an empty first column. A browser
 * without :has() keeps WooCommerce's own 30% / 68% floats, which still work.
 *
 * From 1000px, not the theme's usual 782px: at 820px a 248px menu left the
 * orders table ~410px for five columns, and its View buttons ran out of the
 * card. Below 1000px the menu is the chip row instead (further down). */
@media (min-width: 1000px) {
	body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 248px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--ds-32);
		align-items: start;
	}

	body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation,
	body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}

	body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
	body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
		content: none;
	}
}

/* ---- The menu ------------------------------------------------------------ */

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--ds-8);
	background: var(--wp--preset--color--ds-surface);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--card);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	--ds-account-icon: var(--ds-icon-dot);
	padding: 0;
}

/* li.<class>, so each beats the default above on specificity, not on order. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard { --ds-account-icon: var(--ds-icon-dashboard); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders { --ds-account-icon: var(--ds-icon-orders); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads { --ds-account-icon: var(--ds-icon-downloads); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address { --ds-account-icon: var(--ds-icon-address); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account { --ds-account-icon: var(--ds-icon-account); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods { --ds-account-icon: var(--ds-icon-payment); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { --ds-account-icon: var(--ds-icon-logout); }

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--ds-12);
	min-height: var(--wp--custom--tap-target);
	padding: 0 var(--wp--preset--spacing--ds-12);
	border-radius: var(--wp--custom--radius--tile);
	color: var(--wp--preset--color--ds-ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background-color: var(--wp--preset--color--ds-muted);
	-webkit-mask-image: var(--ds-account-icon);
	mask-image: var(--ds-account-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--ds-plate);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--ds-tint);
	color: var(--wp--preset--color--ds-primary);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
	background-color: var(--wp--preset--color--ds-primary);
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--wp--preset--color--ds-muted);
	font-weight: 400;
}

/* Phones and tablets: the menu is a row of chips above the screen, the same
 * pattern as the category row under the header, instead of six full-width rows
 * the customer has to scroll past to reach the screen they opened. */
@media (max-width: 999px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation,
	body.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		margin: 0 calc(-1 * var(--wp--style--root--padding-right)) var(--wp--preset--spacing--ds-16) calc(-1 * var(--wp--style--root--padding-left));
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: var(--wp--preset--spacing--ds-8);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 var(--wp--style--root--padding-right) var(--wp--preset--spacing--ds-4) var(--wp--style--root--padding-left);
		background: none;
		border: 0;
		border-radius: 0;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		gap: var(--wp--preset--spacing--ds-8);
		border: 1px solid var(--wp--preset--color--ds-border);
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--ds-surface);
		white-space: nowrap;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
		flex-basis: 18px;
		height: 18px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		border-color: var(--wp--preset--color--ds-primary);
		background: var(--wp--preset--color--ds-primary);
		color: var(--wp--preset--color--ds-surface);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
		background-color: var(--wp--preset--color--ds-surface);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0;
		padding: 0;
		border: 0;
	}
}

/* ---- The screen itself --------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-content {
	padding: var(--wp--preset--spacing--ds-32);
	background: var(--wp--preset--color--ds-surface);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--card);
}

body.woocommerce-account .woocommerce-MyAccount-content > :first-child,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:first-child + * {
	margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	body.woocommerce-account .woocommerce-MyAccount-content {
		padding: var(--wp--preset--spacing--ds-24) var(--wp--preset--spacing--ds-16);
	}
}

/* Section headings inside a screen, one size for all of them.
 * woocommerce-blocktheme.css drew "Billing address" at its `large` size and
 * weight 300 while "Order details" beside it kept the theme's h2: two headings
 * of the same rank, a size and a weight apart. */
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title {
	margin: var(--wp--preset--spacing--ds-32) 0 var(--wp--preset--spacing--ds-12);
	font-size: var(--wp--preset--font-size--ds-lg);
	font-weight: 800;
	line-height: 1.3;
}

body.woocommerce-account .woocommerce-MyAccount-content form > h2:first-child,
body.woocommerce-account .woocommerce-MyAccount-content form > h3:first-child {
	margin-top: 0;
}

/* ---- Fields ---------------------------------------------------------------
 * 16px, not WooCommerce's `small` (13px): below 16px iOS Safari zooms the page
 * into every field it focuses and leaves it zoomed. Border and radius are the
 * theme's control tokens, the same as every other field on the site. */
body.woocommerce-account .woocommerce form .form-row {
	margin: 0 0 var(--wp--preset--spacing--ds-16);
	padding: 0;
}

body.woocommerce-account .woocommerce form .form-row label {
	display: block;
	margin: 0 0 6px;
	color: var(--wp--preset--color--ds-label);
	font-size: var(--wp--preset--font-size--ds-sm);
	font-weight: 600;
	line-height: 1.4;
}

body.woocommerce-account .woocommerce form .form-row .required {
	text-decoration: none;
}

body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce form .form-row select,
body.woocommerce-account .woocommerce form .form-row textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--wp--preset--spacing--ds-16);
	border: 1px solid var(--wp--preset--color--ds-control-border);
	border-radius: var(--wp--custom--radius--input);
	background-color: var(--wp--preset--color--ds-surface);
	box-shadow: none;
	color: var(--wp--preset--color--ds-ink);
	font-size: var(--wp--preset--font-size--ds-base);
	line-height: 1.4;
}

body.woocommerce-account .woocommerce form .form-row textarea {
	min-height: 96px;
	padding-top: var(--wp--preset--spacing--ds-12);
	padding-bottom: var(--wp--preset--spacing--ds-12);
}

body.woocommerce-account .woocommerce form .form-row input.input-text:focus,
body.woocommerce-account .woocommerce form .form-row select:focus,
body.woocommerce-account .woocommerce form .form-row textarea:focus {
	border-color: var(--wp--preset--color--ds-primary);
}

body.woocommerce-account .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-account .woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--wc-red, #a00);
}

/* The show/hide-password eye: the theme's global button rule makes it a 44px
 * target; this centres it in the taller field instead of hanging off its top. */
body.woocommerce-account .woocommerce form .password-input input.input-text {
	padding-right: 52px;
}

body.woocommerce-account .woocommerce form .show-password-input {
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
}

/* Country and state, when WooCommerce upgrades them to selectWoo. */
body.woocommerce-account .woocommerce form .form-row .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 48px;
	border: 1px solid var(--wp--preset--color--ds-control-border);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--ds-surface);
}

body.woocommerce-account .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 44px 0 var(--wp--preset--spacing--ds-16);
	color: var(--wp--preset--color--ds-ink);
	font-size: var(--wp--preset--font-size--ds-base);
	line-height: 1.4;
}

body.woocommerce-account .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 8px;
	height: 46px;
}

/* "This will be how your name will be displayed…" is a hint, not a quote. */
body.woocommerce-account .woocommerce form .form-row em,
body.woocommerce-account #account_display_name_description {
	display: block;
	margin-top: 6px;
	color: var(--wp--preset--color--ds-muted);
	font-size: var(--wp--preset--font-size--ds-sm);
	font-style: normal;
}

body.woocommerce-account .woocommerce form fieldset {
	margin: var(--wp--preset--spacing--ds-24) 0;
	padding: var(--wp--preset--spacing--ds-12) var(--wp--preset--spacing--ds-24) var(--wp--preset--spacing--ds-8);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--color--ds-background);
}

body.woocommerce-account .woocommerce form fieldset legend {
	padding: 0 var(--wp--preset--spacing--ds-8);
	color: var(--wp--preset--color--ds-ink);
	font-weight: 600;
}

@media (max-width: 781px) {
	body.woocommerce-account .woocommerce form fieldset {
		padding-left: var(--wp--preset--spacing--ds-16);
		padding-right: var(--wp--preset--spacing--ds-16);
	}
}

/* "Remember me". The global tap-target rule (style.css) gives every checkbox a
 * 44px minimum, which drew this one as an empty 44px square. The box goes back
 * to 20px and the LABEL carries the 44px target instead, so the tap area is
 * the box and its words together, which is also how a label behaves. */
body.woocommerce-account .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--wp--custom--tap-target);
	margin: 0;
	color: var(--wp--preset--color--ds-ink);
	font-size: var(--wp--preset--font-size--ds-base);
	font-weight: 400;
	cursor: pointer;
}

body.woocommerce-account .woocommerce .woocommerce-form__input-checkbox {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	margin: 0;
	accent-color: var(--wp--preset--color--ds-primary);
}

/* ---- Notices --------------------------------------------------------------
 * The blocks notice banner WooCommerce prints on account screens ("Confirm
 * your email address…", "Address changed successfully.") arrives in
 * WordPress-admin blue. Errors keep WooCommerce's red: it means something. */
body.woocommerce-account .wc-block-components-notice-banner {
	border-radius: var(--wp--custom--radius--tile);
	font-size: var(--wp--preset--font-size--ds-sm);
}

body.woocommerce-account .wc-block-components-notice-banner.is-info,
body.woocommerce-account .wc-block-components-notice-banner.is-success {
	border-color: var(--wp--preset--color--ds-primary);
	background-color: var(--wp--preset--color--ds-tint);
	color: var(--wp--preset--color--ds-ink);
}

body.woocommerce-account .wc-block-components-notice-banner.is-info > svg,
body.woocommerce-account .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--wp--preset--color--ds-primary);
}

body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message {
	border-top-color: var(--wp--preset--color--ds-primary);
}

/* The notice's link ("Confirm email address") comes first in the markup and
 * floats right; on a phone that split the sentence around it. Below it there. */
@media (max-width: 781px) {
	body.woocommerce-account .wc-block-components-notice-banner__content:has(> .wc-forward) {
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--ds-8);
	}

	body.woocommerce-account .wc-block-components-notice-banner__content > .wc-forward {
		float: none;
		margin: 0;
	}
}

/* ---- Login and register ---------------------------------------------------
 * Two cards side by side, Register on the tint: the returning customer's form
 * and the new customer's are told apart before either is read. */
body.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--ds-24);
	max-width: 960px;
}

body.woocommerce-account #customer_login::before,
body.woocommerce-account #customer_login::after {
	content: none;
}

body.woocommerce-account #customer_login > .u-column1,
body.woocommerce-account #customer_login > .u-column2 {
	float: none;
	width: auto;
	padding: var(--wp--preset--spacing--ds-32);
	background: var(--wp--preset--color--ds-surface);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--card);
}

body.woocommerce-account #customer_login > .u-column2 {
	background: var(--wp--preset--color--ds-tint);
	border-color: transparent;
}

body.woocommerce-account #customer_login h2,
body.woocommerce-account .woocommerce > h2 {
	margin: 0 0 var(--wp--preset--spacing--ds-16);
	font-size: var(--wp--preset--font-size--ds-xl);
}

/* WooCommerce draws its own box around each form; the column is the card now. */
body.woocommerce-account .woocommerce form.login,
body.woocommerce-account .woocommerce form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Login alone (registration switched off) and lost password: one card. */
body.woocommerce-account .woocommerce > form.login,
body.woocommerce-account .woocommerce > form.lost_reset_password {
	max-width: 480px;
	margin: 0;
	padding: var(--wp--preset--spacing--ds-32);
	background: var(--wp--preset--color--ds-surface);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--card);
}

body.woocommerce-account .woocommerce form.lost_reset_password > p:first-child {
	margin-top: 0;
}

body.woocommerce-account .woocommerce .lost_reset_password .form-row-first,
body.woocommerce-account .woocommerce .lost_reset_password .form-row-last {
	float: none;
	width: 100%;
}

/* Remember me above a full-width Log in button, instead of a button and a
 * checkbox floated side by side. */
body.woocommerce-account .woocommerce form.login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--ds-8);
}

body.woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme {
	align-self: flex-start;
}

body.woocommerce-account .woocommerce form.login .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce form.register .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce form.lost_reset_password button[type="submit"] {
	float: none;
	width: 100%;
	min-height: 48px;
	margin: 0;
}

body.woocommerce-account .woocommerce .woocommerce-LostPassword {
	margin: var(--wp--preset--spacing--ds-16) 0 0;
	text-align: center;
}

body.woocommerce-account .woocommerce form.register > p:not(.form-row),
body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text p {
	color: var(--wp--preset--color--ds-hero-sub);
	font-size: var(--wp--preset--font-size--ds-sm);
}

/* Site Kit's "Sign in with Google" button, when the client has it switched on:
 * centred, with an "or" rule between it and the password form. :not(:empty),
 * because the slot is printed empty and filled by Google's script. The
 * divider's text is decoration ("or" / "" hides it from screen readers where
 * the alt-text syntax is supported; elsewhere the first value is used). */
/* max-width: Site Kit caps this slot at 320px, which cut the "or" rule short
 * of the fields below it. */
body.woocommerce-account .woocommerce .googlesitekit-sign-in-with-google__frontend-output-button:not(:empty) {
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--ds-16);
	margin-bottom: var(--wp--preset--spacing--ds-16);
}

body.woocommerce-account .woocommerce .googlesitekit-sign-in-with-google__frontend-output-button:not(:empty)::after {
	content: "or";
	content: "or" / "";
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--ds-12);
	color: var(--wp--preset--color--ds-muted);
	font-size: var(--wp--preset--font-size--ds-sm);
	background:
		linear-gradient(var(--wp--preset--color--ds-border), var(--wp--preset--color--ds-border)) left center / calc(50% - 20px) 1px no-repeat,
		linear-gradient(var(--wp--preset--color--ds-border), var(--wp--preset--color--ds-border)) right center / calc(50% - 20px) 1px no-repeat;
	justify-content: center;
}

/* What an account is for (dairysuvidha_register_perks()). */
.ds-account-perks {
	display: grid;
	gap: var(--wp--preset--spacing--ds-8);
	margin: 0 0 var(--wp--preset--spacing--ds-24);
	padding: 0;
	list-style: none;
}

.ds-account-perks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--wp--preset--color--ds-ink);
}

.ds-account-perks li::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	margin-top: 2px;
	background-color: var(--wp--preset--color--ds-primary);
	-webkit-mask: var(--ds-icon-check) center / contain no-repeat;
	mask: var(--ds-icon-check) center / contain no-repeat;
}

@media (max-width: 781px) {
	body.woocommerce-account #customer_login {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--ds-16);
	}

	body.woocommerce-account #customer_login > .u-column1,
	body.woocommerce-account #customer_login > .u-column2,
	body.woocommerce-account .woocommerce > form.login,
	body.woocommerce-account .woocommerce > form.lost_reset_password {
		padding: var(--wp--preset--spacing--ds-24) var(--wp--preset--spacing--ds-16);
	}
}

/* ---- Dashboard ------------------------------------------------------------ */

body.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--ds-lg);
}

/* WooCommerce's "From your account dashboard you can view your recent
 * orders…" names the same three places the tiles below link to. Hidden only
 * when the tiles follow it, so a failed hook never leaves the dashboard bare. */
body.woocommerce-account .woocommerce-MyAccount-content > p:has(+ .ds-account-tiles) {
	display: none;
}

/* Two by two: four tiles in a row of three left one stranded underneath. */
.ds-account-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--ds-16);
	margin: var(--wp--preset--spacing--ds-24) 0 0;
	padding: 0;
	list-style: none;
}

.ds-account-tile {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--wp--preset--spacing--ds-12);
	align-items: center;
	height: 100%;
	padding: var(--wp--preset--spacing--ds-16);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--color--ds-background);
	color: var(--wp--preset--color--ds-ink);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.ds-account-tile:hover {
	border-color: var(--wp--preset--color--ds-primary);
	background: var(--wp--preset--color--ds-surface);
	color: var(--wp--preset--color--ds-ink);
}

.ds-account-tile__icon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--ds-tint);
}

.ds-account-tile__icon::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--ds-primary);
	-webkit-mask: var(--ds-tile-icon, var(--ds-icon-dot)) center / contain no-repeat;
	mask: var(--ds-tile-icon, var(--ds-icon-dot)) center / contain no-repeat;
}

.ds-account-tile__icon--orders { --ds-tile-icon: var(--ds-icon-orders); }
.ds-account-tile__icon--address { --ds-tile-icon: var(--ds-icon-address); }
.ds-account-tile__icon--account { --ds-tile-icon: var(--ds-icon-account); }
.ds-account-tile__icon--branch { --ds-tile-icon: var(--ds-icon-branch); }

.ds-account-tile__title {
	align-self: end;
	font-weight: 600;
}

.ds-account-tile__detail {
	align-self: start;
	color: var(--wp--preset--color--ds-muted);
	font-size: var(--wp--preset--font-size--ds-sm);
	line-height: 1.4;
}

@media (max-width: 599px) {
	.ds-account-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Tables: orders, and the items in one order ---------------------------
 * woocommerce-blocktheme.css sets every shop_table to 70% wide with collapsed
 * borders; these are full-width cards. */
body.woocommerce-account .woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--ds-24);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--color--ds-surface);
	overflow: hidden;
}

body.woocommerce-account .woocommerce table.shop_table th,
body.woocommerce-account .woocommerce table.shop_table td {
	padding: var(--wp--preset--spacing--ds-12) var(--wp--preset--spacing--ds-16);
	border-top: 1px solid var(--wp--preset--color--ds-border);
	vertical-align: middle;
	line-height: 1.5;
}

body.woocommerce-account .woocommerce table.shop_table thead th {
	border-top: 0;
	background: var(--wp--preset--color--ds-plate);
	color: var(--wp--preset--color--ds-label);
	font-size: var(--wp--preset--font-size--ds-sm);
	font-weight: 600;
}

body.woocommerce-account .woocommerce table.shop_table tfoot th {
	font-weight: 600;
	text-align: left;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	font-weight: 600;
}

body.woocommerce-account .woocommerce-orders-table__header-order-actions,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

/* WooCommerce's a.button is inline-block, so with a min-height its label sat
 * on the top edge of the box. */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 2px 0 2px var(--wp--preset--spacing--ds-8);
	padding: 0 var(--wp--preset--spacing--ds-16);
	font-size: var(--wp--preset--font-size--ds-sm);
}

/* "View" is the routine action on every row: an outline, so a row's "Pay"
 * (an unpaid order) is the one filled button the eye lands on. */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view {
	border: 1px solid var(--wp--preset--color--ds-primary);
	background: transparent;
	color: var(--wp--preset--color--ds-primary);
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view:hover {
	background: var(--wp--preset--color--ds-tint);
}

/* Phones: woocommerce-smallscreen.css turns each row into label/value lines
 * and hides every tbody <th>, which on this table is the order number. Each
 * order becomes a card, and its number is the card's heading again. */
@media (max-width: 768px) {
	body.woocommerce-account .woocommerce table.shop_table_responsive {
		border: 0;
		background: none;
		overflow: visible;
	}

	body.woocommerce-account .woocommerce table.shop_table_responsive tbody tr {
		margin: 0 0 var(--wp--preset--spacing--ds-12);
		padding: var(--wp--preset--spacing--ds-4) var(--wp--preset--spacing--ds-16);
		border: 1px solid var(--wp--preset--color--ds-border);
		border-radius: var(--wp--custom--radius--tile);
		background: var(--wp--preset--color--ds-surface);
	}

	body.woocommerce-account .woocommerce table.shop_table_responsive tbody tr th.woocommerce-orders-table__cell-order-number {
		display: block;
		padding: var(--wp--preset--spacing--ds-12) 0 var(--wp--preset--spacing--ds-8);
		border-top: 0;
		font-size: var(--wp--preset--font-size--ds-lg);
	}

	/* Block, not flex: "₹38,500 for 1 item" is a price element and a text
	 * node, and a flex row pushed them to opposite edges as two items. The
	 * label stays WooCommerce's float. */
	body.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td {
		padding: var(--wp--preset--spacing--ds-8) 0;
		background: none;
	}

	body.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td::before {
		margin-right: var(--wp--preset--spacing--ds-12);
		color: var(--wp--preset--color--ds-muted);
		font-weight: 400;
	}

	body.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td.woocommerce-orders-table__cell-order-actions {
		display: flex;
		gap: var(--wp--preset--spacing--ds-8);
		padding-bottom: var(--wp--preset--spacing--ds-12);
	}

	body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
		flex: 1 1 0;
		min-height: var(--wp--custom--tap-target);
		margin: 0;
	}
}

/* ---- Order status ---------------------------------------------------------
 * Amber while the order is still moving, green once it is done, grey when it
 * stopped. The colour repeats the word; it never replaces it. The same class
 * and the same rules carry both screens: the orders list (the <span> in
 * dairysuvidha_order_status_cell()) and a single order's "is currently …"
 * mark (dairysuvidha_order_details_status() adds the class to it). */
.ds-order-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ds-plate);
	color: var(--wp--preset--color--ds-label);
	font-size: var(--wp--preset--font-size--ds-sm);
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.ds-order-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.ds-order-status--pending,
.ds-order-status--processing,
.ds-order-status--on-hold {
	background: var(--wp--preset--color--ds-online-bg);
	color: var(--wp--preset--color--ds-online-text);
}

.ds-order-status--completed {
	background: var(--wp--preset--color--ds-cod-bg);
	color: var(--wp--preset--color--ds-cod-text);
}

/* ---- One order ------------------------------------------------------------ */

/* "Order #7551 was placed on … and is currently Processing." */
body.woocommerce-account.woocommerce-view-order .woocommerce-MyAccount-content > p:first-of-type {
	padding: var(--wp--preset--spacing--ds-16);
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--color--ds-background);
	line-height: 1.8;
}

body.woocommerce-account .woocommerce-MyAccount-content mark.order-number,
body.woocommerce-account .woocommerce-MyAccount-content mark.order-date {
	background: none;
	color: inherit;
	font-weight: 600;
}

/* The single-order status is a .ds-order-status <span> too
 * (dairysuvidha_order_details_status()), so the shared rules above colour it
 * with no override needed here — the same pill as the orders list. */

body.woocommerce-account .woocommerce-order-details .order-again {
	margin: 0 0 var(--wp--preset--spacing--ds-24);
}

body.woocommerce-account .woocommerce-OrderUpdates {
	margin: 0 0 var(--wp--preset--spacing--ds-24);
	padding: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-OrderUpdate {
	padding: var(--wp--preset--spacing--ds-12) var(--wp--preset--spacing--ds-16);
	border-left: 3px solid var(--wp--preset--color--ds-primary);
	background: var(--wp--preset--color--ds-background);
}

body.woocommerce-account .woocommerce-OrderUpdate + .woocommerce-OrderUpdate {
	margin-top: var(--wp--preset--spacing--ds-8);
}

body.woocommerce-account .woocommerce-OrderUpdate-meta {
	margin: 0 0 4px;
	color: var(--wp--preset--color--ds-muted);
	font-size: var(--wp--preset--font-size--ds-sm);
}

body.woocommerce-account .woocommerce-OrderUpdate-description p {
	margin: 0;
}

/* ---- Addresses: on the Addresses screen and under an order ---------------- */

body.woocommerce-account .woocommerce-MyAccount-content .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--ds-16);
}

body.woocommerce-account .woocommerce-MyAccount-content .col2-set::before,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set::after {
	content: none;
}

body.woocommerce-account .woocommerce-MyAccount-content .col2-set > .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set > .col-2 {
	float: none;
	width: auto;
}

body.woocommerce-account .woocommerce-Address {
	padding: var(--wp--preset--spacing--ds-16) var(--wp--preset--spacing--ds-24) var(--wp--preset--spacing--ds-24);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--color--ds-background);
}

/* .title carries WooCommerce's clearfix ::before/::after, which a flex row
 * would lay out as two empty items and push the heading off the card's edge. */
body.woocommerce-account .addresses .woocommerce-Address-title::before,
body.woocommerce-account .addresses .woocommerce-Address-title::after {
	content: none;
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--ds-8);
	margin-bottom: var(--wp--preset--spacing--ds-8);
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	float: none;
	margin: 0;
}

/* .addresses in the selector: WooCommerce's own `.woocommerce-account
 * .addresses .title .edit` (display:block; float:right) is (0,4,0). */
body.woocommerce-account .addresses .woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	float: none;
	min-height: var(--wp--custom--tap-target);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--ds-12);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--ds-surface);
	font-size: var(--wp--preset--font-size--ds-sm);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-account .addresses .woocommerce-Address-title .edit:hover {
	border-color: var(--wp--preset--color--ds-primary);
}

body.woocommerce-account .woocommerce-MyAccount-content address {
	width: auto;
	margin: 0;
	color: var(--wp--preset--color--ds-ink);
	font-style: normal;
	line-height: 1.7;
}

body.woocommerce-account .woocommerce-customer-details address {
	padding: var(--wp--preset--spacing--ds-16) var(--wp--preset--spacing--ds-24);
	border: 1px solid var(--wp--preset--color--ds-border);
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--color--ds-background);
}

body.woocommerce-account .woocommerce-customer-details address p {
	margin: var(--wp--preset--spacing--ds-8) 0 0;
}