/* Pine Peptides — My Account redesign
 * ponytail: pure CSS over stock WooCommerce account markup — no template
 * overrides, so Woo updates can't break it. Loaded only on account pages.
 * Tokens mirror css/pn-cart-checkout.css so the two read as one system. */

:root {
	--ppa-panel: rgba(8, 23, 17, .34);
	--ppa-panel-2: rgba(8, 23, 17, .55);
	--ppa-line: rgba(255, 255, 255, .12);
	--ppa-line-2: rgba(255, 255, 255, .22);
	--ppa-gold: #c6a662;
	--ppa-gold-2: #fec13d;
	--ppa-dark: #0f2919;
	--ppa-muted: rgba(255, 255, 255, .62);
	--ppa-r: 18px;
}

/* ============================================================
 * SHELL
 * ============================================================ */
/* Same reasoning as cart/checkout: the page wrapper carries the green so no
 * band of body background shows above or below the content. */
.woocommerce-account #innerpage-wrapper { background-color: #1b4332; }
body.woocommerce-account { background: #1b4332 !important; }

.woocommerce-account .woocommerce {
	font-family: "Jost", sans-serif;
	color: #fff;
	padding: 0 20px 10px;
}
@media (min-width: 992px) {
	.woocommerce-account .woocommerce { padding: 0 0 10px; }
}

.woocommerce-account .woocommerce p,
.woocommerce-account .woocommerce li,
.woocommerce-account .woocommerce td,
.woocommerce-account .woocommerce th,
.woocommerce-account .woocommerce label,
.woocommerce-account .woocommerce legend,
.woocommerce-account .woocommerce address { color: #fff; }

.woocommerce-account .woocommerce a:not(.button):not(.pnf-link) {
	color: var(--ppa-gold-2);
	text-decoration: none;
}
.woocommerce-account .woocommerce a:not(.button):not(.pnf-link):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Headings */
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce h3,
.woocommerce-account .woocommerce legend {
	font-family: "Parkinsans", "Jost", sans-serif;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	margin: 0 0 18px;
	letter-spacing: -.01em;
}

/* ============================================================
 * LAYOUT — sidebar + content
 * ============================================================ */
@media (min-width: 992px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 26%;
		margin-right: 4%;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		float: left;
		width: 70%;
	}
}

/* ============================================================
 * NAVIGATION — stock Woo renders a bare white <ul>
 * ============================================================ */
/* !important throughout: the theme paints list items white with dividing
 * borders (a generic `#main ul li` style), which outranks a plain class
 * selector here and left the nav as a white card on the dark page. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 0 28px !important;
	padding: 8px !important;
	background: var(--ppa-panel) !important;
	border: 1px solid var(--ppa-line) !important;
	border-radius: var(--ppa-r);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
	overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	list-style: none !important;
}

/* Kills any ::before bullet/marker the theme adds to list items. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li::before,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li::marker {
	content: none !important;
	display: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 13px 16px;
	border-radius: 12px;
	color: #fff !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none !important;
	transition: background .18s ease, color .18s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: rgba(255, 255, 255, .07);
	color: #fff !important;
}

/* Active tab: gold bar + tint, so it reads at a glance without shouting. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: rgba(198, 166, 98, .16) !important;
	color: var(--ppa-gold-2) !important;
	box-shadow: inset 3px 0 0 var(--ppa-gold);
	font-weight: 600;
}

/* Log out sits apart from the navigation items. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li--customer-logout {
	margin-top: 6px !important;
	border-top: 1px solid var(--ppa-line) !important;
	padding-top: 6px !important;
}

/* ============================================================
 * CONTENT PANELS
 * ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--ppa-panel);
	border: 1px solid var(--ppa-line);
	border-radius: var(--ppa-r);
	padding: 26px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

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

/* Addresses: two cards side by side instead of two bare columns. */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	background: var(--ppa-panel-2);
	border: 1px solid var(--ppa-line);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 20px;
}

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

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	font-size: 20px;
	margin: 0;
}

/* "Add" / "Edit" reads as a link in stock Woo — make it a real control. */
.woocommerce-account .woocommerce-Address-title a.edit {
	flex: 0 0 auto;
	border: 1px solid var(--ppa-line-2);
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 14px;
	font-weight: 500;
	color: #fff !important;
	text-decoration: none !important;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.woocommerce-account .woocommerce-Address-title a.edit:hover {
	background: var(--ppa-gold);
	border-color: var(--ppa-gold);
	color: var(--ppa-dark) !important;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: var(--ppa-muted);
	margin: 0;
}

/* ============================================================
 * TABLES — orders, downloads
 * ============================================================ */
.woocommerce-account .woocommerce table.shop_table {
	width: 100%;
	background: transparent;
	border: 1px solid var(--ppa-line);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0;
}

.woocommerce-account .woocommerce table.shop_table thead th {
	background: rgba(255, 255, 255, .05);
	border: 0;
	border-bottom: 1px solid var(--ppa-line);
	color: #fff;
	font-family: "Jost", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 14px 16px;
}

.woocommerce-account .woocommerce table.shop_table tbody td {
	border: 0;
	border-bottom: 1px solid var(--ppa-line);
	padding: 16px;
	font-size: 16px;
	vertical-align: middle;
}

.woocommerce-account .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }

/* Empty states — "No order has been made yet." */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
	background: rgba(198, 166, 98, .14) !important;
	border: 1px solid rgba(198, 166, 98, .38) !important;
	border-left: 3px solid var(--ppa-gold) !important;
	border-radius: 12px !important;
	color: #fff !important;
	padding: 16px 20px !important;
	font-size: 16px;
	line-height: 24px;
	list-style: none;
	margin: 0 0 24px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before { display: none !important; }

.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button { margin-left: auto; }

/* ============================================================
 * FORMS — account details, address edit, login
 * ============================================================ */
/* display:block is the important one. Bootstrap (Understrap) also defines
 * .form-row, as `display:flex;flex-wrap:wrap` — the same class name Woo uses.
 * Under flex the label and input become siblings on one line, so a short label
 * left its input squeezed beside it while longer ones wrapped: the ragged
 * "Password change" fieldset. Blocking the row restores label-above-input. */
.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce-MyAccount-content form .form-row {
	display: block;
	float: none !important;
	width: auto !important;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce-account .woocommerce-input-wrapper,
.woocommerce-account .password-input {
	display: block;
	width: 100%;
	position: relative;
}

/* Show/hide-password eye is styled globally in style.css (.password-input /
 * .show-password-input) so login, register, checkout and reset all match. */

.woocommerce-account .woocommerce form label {
	display: block;
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 6px;
	color: #fff;
}

.woocommerce-account .woocommerce .required { color: var(--ppa-gold-2); border: 0; }

.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce textarea,
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce .select2-selection {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid var(--ppa-line-2) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: "Jost", sans-serif;
	font-size: 16px;
	line-height: 24px;
	padding: 14px 16px !important;
	height: auto !important;
	width: 100%;
	transition: border-color .18s ease, background .18s ease;
}

.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce textarea:focus,
.woocommerce-account .woocommerce select:focus {
	border-color: var(--ppa-gold) !important;
	background: rgba(255, 255, 255, .09) !important;
	outline: none;
}

/* .38 alpha on a dark green panel lands around 2:1 contrast — legible on a
 * bright monitor, invisible on most. .62 clears WCAG AA for placeholder-sized
 * text while still reading as secondary to a filled-in value. */
.woocommerce-account .woocommerce input.input-text::placeholder,
.woocommerce-account .woocommerce textarea::placeholder {
	color: rgba(255, 255, 255, .62);
	opacity: 1; /* Firefox dims placeholders again on top of the colour */
}

/* ---------- Select2 (country / state) ----------
 * Woo ships it styled for a light form: dark grey text, white dropdown. Every
 * piece has to be recoloured or something ends up dark-on-dark. Not scoped to
 * .woocommerce-account for the dropdown — Select2 appends it to <body>, outside
 * the account markup, so a scoped selector would never match. */
.woocommerce-account .select2-container--default .select2-selection--single,
.woocommerce-account .select2-container--default .select2-selection--multiple {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid var(--ppa-line-2) !important;
	border-radius: 12px !important;
	height: auto !important;
	padding: 13px 16px !important;
}

.woocommerce-account .select2-container--default .select2-selection__rendered {
	color: #fff !important;
	line-height: 24px !important;
	padding: 0 !important;
}

.woocommerce-account .select2-container--default .select2-selection__placeholder {
	color: rgba(255, 255, 255, .62) !important;
}

.woocommerce-account .select2-container--default .select2-selection__arrow {
	top: 50% !important;
	right: 12px !important;
	transform: translateY(-50%);
	height: auto !important;
}
.woocommerce-account .select2-container--default .select2-selection__arrow b {
	border-top-color: rgba(255, 255, 255, .7) !important;
}

/* Native <select> fallback: the closed control inherits our white text, but the
 * option list is painted by the OS and needs a dark colour of its own. */
.woocommerce-account .woocommerce select option { color: #14331f; background: #fff; }

/* The dropdown panel itself, rendered at the end of <body>. */
body.woocommerce-account .select2-dropdown {
	background: #14331f;
	border: 1px solid var(--ppa-line-2);
	border-radius: 12px;
	overflow: hidden;
}

body.woocommerce-account .select2-container--default .select2-results__option {
	color: #fff;
	background: transparent;
	padding: 10px 14px;
	font-size: 15px;
}

body.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-account .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--ppa-gold);
	color: #14331f;
}

body.woocommerce-account .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-account .select2-container--default .select2-results__option[data-selected="true"] {
	background: rgba(198, 166, 98, .18);
	color: var(--ppa-gold-2);
}

/* Search box inside the dropdown. */
body.woocommerce-account .select2-search--dropdown { padding: 10px; }
body.woocommerce-account .select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--ppa-line-2);
	border-radius: 8px;
	color: #fff;
	padding: 9px 12px;
}
body.woocommerce-account .select2-search--dropdown .select2-search__field::placeholder {
	color: rgba(255, 255, 255, .62);
	opacity: 1;
}

/* First/last name and the address pairs sit side by side on desktop — stock
 * Woo floats them, which collapses under the block rule above. */
@media (min-width: 768px) {
	.woocommerce-account .woocommerce form .form-row-first,
	.woocommerce-account .woocommerce form .form-row-last {
		display: inline-block;
		width: calc(50% - 9px) !important;
		vertical-align: top;
	}
	.woocommerce-account .woocommerce form .form-row-first { margin-right: 14px; }
}

.woocommerce-account .woocommerce fieldset {
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--ppa-line);
	border-radius: 14px;
	padding: 24px 22px 22px;
	margin: 28px 0 0;
}

/* Legend inside the box rather than notched into its border — the notch needs
 * a solid background behind the text, which a translucent panel can't give. */
.woocommerce-account .woocommerce fieldset legend {
	float: left;
	width: 100%;
	font-size: 18px;
	padding: 0;
	margin: 0 0 18px;
	border: 0;
}

.woocommerce-account .woocommerce fieldset .form-row:last-child { margin-bottom: 0; }

.woocommerce-account .woocommerce form .description,
.woocommerce-account .woocommerce em { color: var(--ppa-muted); font-size: 14px; font-style: normal; }

/* The submit row: Woo emits a bare <p> after the fieldset, so it inherits no
 * spacing of its own and the button ends up crowding the panel above it. */
.woocommerce-account .woocommerce-MyAccount-content form > p:last-of-type,
.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-account .woocommerce-address-fields > p:last-of-type {
	margin: 26px 0 0;
	clear: both;
}

/* ============================================================
 * BUTTONS — same gold as cart/checkout
 * ============================================================ */
/* Matched on the body class and the content wrapper rather than a `.woocommerce`
 * ancestor: the address and account-details forms submit with a plain
 * <button type="submit">, and on some templates Woo doesn't wrap them in
 * .woocommerce at all — which is why "Save address" kept the theme's default
 * grey/blue treatment. */
body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
	display: inline-block;
	width: auto;
	background: linear-gradient(90deg, #c4892f 0%, #fccb55 40%, #e3a95f 72%, #c88a37 100%) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #14331f !important;
	font-family: "Parkinsans", "Jost", sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 15px 30px !important;
	text-align: center;
	text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	box-shadow: 0 10px 24px rgba(198, 166, 98, .22);
}

body.woocommerce-account .woocommerce .button:hover,
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce input[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 14px 30px rgba(198, 166, 98, .32);
	color: #14331f !important;
}

/* Secondary actions in order tables (View, Download) stay quiet. */
.woocommerce-account .woocommerce table.shop_table .button {
	background: transparent !important;
	border: 1px solid var(--ppa-line-2) !important;
	color: #fff !important;
	font-size: 14px !important;
	padding: 9px 20px !important;
	box-shadow: none;
}
.woocommerce-account .woocommerce table.shop_table .button:hover {
	background: var(--ppa-gold) !important;
	border-color: var(--ppa-gold) !important;
	color: var(--ppa-dark) !important;
	transform: none;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 991px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
	.woocommerce-account .woocommerce-MyAccount-content { padding: 20px; }
	.woocommerce-account .woocommerce h2,
	.woocommerce-account .woocommerce h3 { font-size: 21px; }
}

@media (max-width: 575px) {
	.woocommerce-account .woocommerce-MyAccount-content { padding: 16px; }
	.woocommerce-account .woocommerce-Address-title { flex-wrap: wrap; }
	/* Stacked tables: Woo drops the header row, so each cell needs its label. */
	.woocommerce-account .woocommerce table.shop_table tbody td { padding: 12px 14px; }
	.woocommerce-account .woocommerce .button,
	.woocommerce-account .woocommerce input[type="submit"] { width: 100%; }
	.woocommerce-account .woocommerce-info .button,
	.woocommerce-account .woocommerce-message .button { margin-left: 0; }
}

/* ============================================================
 * LOGIN / REGISTER (logged-out my-account)
 * ============================================================ */
/* Floats already put the two columns side by side, but floats can't equalise
 * height. Flex (not grid) does it without re-placing anything: DOM order is
 * kept, and any extra wrapper a plugin injects collapses to zero width instead
 * of eating a cell — which is what threw the cards onto separate rows before. */
@media (min-width: 768px) {
	.woocommerce-account #customer_login {
		display: flex;
		align-items: stretch;
		gap: 28px;
	}
	.woocommerce-account #customer_login > .u-column1,
	.woocommerce-account #customer_login > .u-column2 {
		flex: 1 1 0;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex;
		flex-direction: column;
	}
}

/* The heading sits outside the form in Woo's markup — keep it above the card. */
.woocommerce-account #customer_login h2 {
	margin: 0 0 14px;
	font-size: 22px;
}

/* The card is the <form>, not the column, so both cards start at the same y. */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--ppa-panel);
	border: 1px solid var(--ppa-line);
	border-radius: var(--ppa-r);
	padding: 26px;
	margin: 0;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.woocommerce-account #customer_login form.register p:not(.form-row) {
	color: var(--ppa-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 14px;
}

/* Push the submit row to the bottom so both cards' buttons line up. */
.woocommerce-account #customer_login form.login .form-row-wide:last-of-type,
.woocommerce-account #customer_login form.register .woocommerce-form-register__submit {
	margin-top: auto;
}

/* Woo wraps the login submit + "Remember me" in one .form-row. */
.woocommerce-account #customer_login form.login .form-row:last-of-type {
	margin-top: auto;
	margin-bottom: 0;
}

/* ---------- Remember me ---------- */
.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 400 !important;
	color: var(--ppa-muted) !important;
	margin: 0 0 18px !important;
	cursor: pointer;
	user-select: none;
}
.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--ppa-line-2);
	border-radius: 5px;
	background: rgba(255, 255, 255, .06);
	cursor: pointer;
	position: relative;
	transition: background .18s ease, border-color .18s ease;
}
.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"]:checked {
	background: var(--ppa-gold-2);
	border-color: var(--ppa-gold-2);
}
/* Drawn as a rotated L rather than a glyph — no icon font dependency. */
.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #14331f;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ppa-gold);
	outline-offset: 2px;
}

/* ---------- Buttons ----------
 * The register submit is a bare <button class="woocommerce-Button button"> that
 * lives outside .woocommerce-MyAccount-content, so the button block above never
 * reached it and Understrap's default blue outline won. */
body.woocommerce-account #customer_login button.woocommerce-Button,
body.woocommerce-account #customer_login button[type="submit"],
body.woocommerce-account #customer_login .woocommerce-form-login__submit,
body.woocommerce-account #customer_login .woocommerce-form-register__submit,
body.woocommerce-account form.lost_reset_password button[type="submit"] {
	display: inline-block;
	width: auto;
	align-self: flex-start;
	background: linear-gradient(90deg, #c4892f 0%, #fccb55 40%, #e3a95f 72%, #c88a37 100%) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #14331f !important;
	font-family: "Parkinsans", "Jost", sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 15px 32px !important;
	text-decoration: none !important;
	box-shadow: 0 10px 24px rgba(198, 166, 98, .22);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.woocommerce-account #customer_login button.woocommerce-Button:hover,
body.woocommerce-account #customer_login button[type="submit"]:hover,
body.woocommerce-account #customer_login .woocommerce-form-login__submit:hover,
body.woocommerce-account #customer_login .woocommerce-form-register__submit:hover,
body.woocommerce-account form.lost_reset_password button[type="submit"]:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 14px 30px rgba(198, 166, 98, .32);
	color: #14331f !important;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-size: 15px;
}

/* ---------- Autofill ----------
 * Chrome paints its own pale-blue over any background on autofilled inputs.
 * An inset shadow the size of the field is the only way to repaint it. */
.woocommerce-account .woocommerce input:-webkit-autofill,
.woocommerce-account .woocommerce input:-webkit-autofill:hover,
.woocommerce-account .woocommerce input:-webkit-autofill:focus,
.woocommerce-account .woocommerce input:-webkit-autofill:active {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #16382a inset !important;
	box-shadow: 0 0 0 1000px #16382a inset !important;
	caret-color: #fff;
	transition: background-color 9999s ease-out 0s;
}