/* =========================================================================
   Krieg - account, login and reviews
   ========================================================================= */

/* Account */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--k-1);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--k-3) var(--k-4);
	border-radius: var(--k-radius-sm);
	text-decoration: none;
	font-size: var(--k-t-sm);
	font-weight: 500;
	border: 1px solid transparent;
	transition: background var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease),
		padding-left var(--k-fast) var(--k-ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--k-paper);
	color: var(--k-accent);
	padding-left: calc(var(--k-4) + 4px);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--k-grad-accent);
	color: var(--k-white);
	box-shadow: 0 4px 12px -6px rgba(216, 35, 42, 0.7);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a:hover {
	color: var(--k-white);
	padding-left: var(--k-4);
}

.woocommerce-account .woocommerce-MyAccount-content {
	font-size: var(--k-t-sm);
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
		padding: var(--k-4);
		background: var(--k-paper);
		border: 1px solid var(--k-line);
		border-radius: var(--k-radius-lg);
		position: sticky;
		top: calc(var(--k-header-h-stuck) + var(--k-5));
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}

	.k-accountlayout {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: var(--k-8);
		align-items: start;
	}
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 460px;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	padding: var(--k-7);
	background: var(--k-white);
	box-shadow: var(--k-shadow-md);
}

.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-ResetPassword .button {
	width: 100%;
	padding: 17px var(--k-6);
	border: 0;
	border-radius: var(--k-radius);
	background: var(--k-grad-accent);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: var(--k-t-sm);
	box-shadow: 0 4px 14px -6px rgba(216, 35, 42, 0.5);
	transition: box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover,
.woocommerce-ResetPassword .button:hover {
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-accent);
}

/* Reviews */

#reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--k-5);
}

#reviews .comment_container {
	display: flex;
	gap: var(--k-4);
	padding: var(--k-5);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	background: var(--k-white);
}

#reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: none;
}

.star-rating {
	color: #f5a524;
}

/* WooCommerce styles its own .button at a higher specificity than the panel
   rules above can reach, so the account form's submit is restated here. */

body.woocommerce .woocommerce-form-login button.button,
body.woocommerce .woocommerce-form-register button.button,
body.woocommerce .woocommerce-ResetPassword button.button,
body.woocommerce-page .woocommerce-form-login button.button,
body.woocommerce-page .woocommerce-form-register button.button,
body.woocommerce-page .woocommerce-ResetPassword button.button {
	width: 100%;
	padding: 17px var(--k-6);
	border: 0;
	border-radius: var(--k-radius);
	background: var(--k-grad-accent);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: var(--k-t-sm);
	box-shadow: 0 4px 14px -6px rgba(216, 35, 42, 0.5);
	transition: box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

body.woocommerce .woocommerce-form-login button.button:hover,
body.woocommerce .woocommerce-form-register button.button:hover,
body.woocommerce .woocommerce-ResetPassword button.button:hover,
body.woocommerce-page .woocommerce-form-login button.button:hover,
body.woocommerce-page .woocommerce-form-register button.button:hover,
body.woocommerce-page .woocommerce-ResetPassword button.button:hover {
	background: var(--k-grad-accent);
	color: var(--k-white);
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-accent);
}

.woocommerce-form-login .woocommerce-form-login__rememberme,
.woocommerce-form-register label.checkbox {
	display: flex;
	align-items: center;
	gap: var(--k-2);
	font-size: var(--k-t-sm);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	margin-bottom: var(--k-4);
}

.woocommerce-form-login .woocommerce-form-login__rememberme input,
.woocommerce-form-register label.checkbox input {
	width: 17px;
	height: 17px;
	accent-color: var(--k-accent);
	margin: 0;
}

.woocommerce-LostPassword {
	margin: var(--k-4) 0 0;
	font-size: var(--k-t-sm);
}

.woocommerce-LostPassword a {
	color: var(--k-accent);
	text-decoration: none;
	font-weight: 600;
}

/* =========================================================================
   Account audit fixes
   ========================================================================= */

/*
 * The field styling the rest of the site uses lives in cart.css and
 * checkout.css, neither of which loads on an account page. The login and
 * registration forms therefore fell back to WooCommerce's defaults: 38px
 * fields and sentence-case 16px labels, against 51px fields and small
 * uppercase labels two clicks away on the checkout. The same rules are
 * restated here so a customer sees one form style across the whole site.
 */

.woocommerce-account .woocommerce form .form-row {
	display: grid;
	gap: var(--k-2);
	margin-bottom: var(--k-4);
	padding: 0;
}

.woocommerce-account .woocommerce form .form-row label {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.woocommerce-account .woocommerce form .form-row .required {
	color: var(--k-accent);
	text-decoration: none;
	border: 0;
}

.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row input[type="text"],
.woocommerce-account .woocommerce form .form-row input[type="email"],
.woocommerce-account .woocommerce form .form-row input[type="password"],
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce form .form-row textarea {
	width: 100%;
	padding: 14px var(--k-4);
	min-height: 51px;
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	background: var(--k-paper);
	font-size: var(--k-t-sm);
	line-height: 1.5;
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease),
		background var(--k-fast) var(--k-ease);
}

.woocommerce-account .woocommerce form .form-row input:focus,
.woocommerce-account .woocommerce form .form-row select:focus,
.woocommerce-account .woocommerce form .form-row textarea:focus {
	outline: none;
	background: var(--k-white);
	border-color: var(--k-accent);
	box-shadow: 0 0 0 4px var(--k-accent-ring);
}

/* The field wrapper is relative so the reveal button can sit inside it. */
.woocommerce-account .woocommerce-form__input-wrapper,
.woocommerce .woocommerce-form__input-wrapper {
	position: relative;
	display: block;
}

/* WooCommerce's show-password control is a 22px glyph. It is the only way to
   check a typed password, so it gets a real hit area. */
.woocommerce .show-password-input,
.woocommerce button.show-password-input {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--k-radius-sm);
	cursor: pointer;
}

body.woocommerce .woocommerce-form-login button.button,
body.woocommerce .woocommerce-form-register button.button,
body.woocommerce .woocommerce-ResetPassword button.button,
body.woocommerce-page .woocommerce-form-login button.button,
body.woocommerce-page .woocommerce-form-register button.button,
body.woocommerce-page .woocommerce-ResetPassword button.button {
	min-height: 52px;
}

/*
 * The signed-in account screen never got its two-column layout: .k-accountlayout
 * was styled but no template ever rendered it, so WooCommerce's navigation and
 * content stacked full width. The shortcode puts both inside .woocommerce, and
 * WordPress only adds the logged-in body class once there is a session, so the
 * grid can be applied there without disturbing the logged-out login form.
 */
@media (min-width: 900px) {
	body.woocommerce-account.logged-in .woocommerce {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--k-8);
		align-items: start;
	}

	body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}
}

.woocommerce-MyAccount-content > p:first-child {
	font-size: 1rem;
	color: var(--k-ink-soft);
}

.woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-MyAccount-content .woocommerce-info {
	margin-bottom: var(--k-5);
}

/* The uppercase treatment above is for field labels. A checkbox label is read
   as a sentence beside the control, so it keeps normal casing and size. */
.woocommerce-account .woocommerce form .form-row label.woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form-login__rememberme,
.woocommerce form .form-row label.checkbox {
	display: flex;
	align-items: center;
	gap: var(--k-2);
	font-family: var(--k-font-body);
	font-size: var(--k-t-sm);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--k-ink);
	cursor: pointer;
}

.woocommerce form .form-row label.woocommerce-form-login__rememberme input,
.woocommerce form .form-row label.checkbox input {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	accent-color: var(--k-accent);
	flex: none;
}
/* =========================================================================
   PASS 7 - My account and order received
   ========================================================================= */

/* ------------------------------------------------------------ Signed out */

/* Signed out this page was a 460px form with 800px of empty white beside it.
   The second column answers the question a sign-in prompt raises. */
.k-loginlayout {
	display: grid;
	gap: var(--k-6);
	align-items: start;
}

@media (min-width: 900px) {
	.k-loginlayout {
		grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
		gap: var(--k-8);
	}
}

/* "Login" belongs to the whole layout, not to one column. */
.k-loginlayout > h2 {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--k-t-h3);
	text-transform: uppercase;
}

body.woocommerce-account .k-loginlayout form.woocommerce-form-login,
body.woocommerce-account .k-loginlayout form.woocommerce-form-register {
	width: auto;
	/* The rule further up caps these forms at 460px, which made sense when the
	   form was alone on the page. Inside the layout the grid track is the
	   constraint, so the cap has to be lifted or the card sits inset in its
	   own column. */
	max-width: none;
	margin: 0;
	padding: var(--k-5);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow);
}

/* With registration enabled WooCommerce wraps both forms in #customer_login
   and moves each heading inside its own column, so the rules above - which
   assume one bare form and a top-level h2 - stop matching. The sign-in column
   also stops being the only thing on the left, so the track splits. */
.k-loginlayout #customer_login {
	display: grid;
	gap: var(--k-6);
	min-width: 0;
}

@media (min-width: 1100px) {
	.k-loginlayout #customer_login {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {
	.k-loginlayout:has(#customer_login) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	}
}

/* WooCommerce lays this pair out with floats and 48% widths
   (.woocommerce .col2-set .col-1). Inside a grid the floats are ignored, but
   the 48% is not: each card came out 259px wide in a 540px track, and the
   two ended up the wrong way round - Register on the left of Login. The
   track is told to size them, and each column is pinned to its own track so
   the order cannot drift. The ID in this selector is what beats
   WooCommerce's (0,3,0). */
.k-loginlayout #customer_login > div {
	min-width: 0;
	width: auto;
	float: none;
	padding: var(--k-5);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	background: var(--k-white);
	box-shadow: var(--k-shadow);
}

@media (min-width: 1100px) {
	.k-loginlayout #customer_login > .col-1 {
		grid-column: 1;
	}

	.k-loginlayout #customer_login > .col-2 {
		grid-column: 2;
	}
}

.k-loginlayout #customer_login h2 {
	margin: 0 0 var(--k-4);
	padding-bottom: var(--k-4);
	border-bottom: 1px solid var(--k-line);
	color: var(--k-ink);
	font-family: var(--k-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

/* The forms sit inside the column cards now, so they give up their own. */
.k-loginlayout #customer_login form.woocommerce-form-login,
.k-loginlayout #customer_login form.woocommerce-form-register {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* The note under Register is legal copy, not body copy. */
.k-loginlayout .woocommerce-privacy-policy-text p {
	color: var(--k-muted);
	font-size: var(--k-t-xs);
	line-height: 1.6;
}

.k-loginaside {
	padding: var(--k-5);
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
}

.k-loginaside__title {
	display: flex;
	align-items: center;
	gap: var(--k-2);
	margin: 0 0 var(--k-4);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.k-loginaside__title svg {
	flex: 0 0 auto;
	color: var(--k-accent);
}

.k-loginaside__list {
	display: grid;
	gap: var(--k-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-loginaside__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--k-3);
	margin: 0;
}

.k-loginaside__list li > svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--k-ink);
}

.k-loginaside__list strong {
	display: block;
	font-family: var(--k-font-display);
	font-size: 0.9375rem;
	line-height: 1.3;
}

.k-loginaside__list span span {
	display: block;
	margin-top: 2px;
	color: var(--k-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.k-loginaside__note {
	display: flex;
	align-items: flex-start;
	gap: var(--k-2);
	margin: var(--k-5) 0 0;
	padding-top: var(--k-4);
	border-top: 1px solid var(--k-line);
	color: var(--k-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.k-loginaside__note svg {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--k-accent);
}

/* ----------------------------------------------------- Account navigation */

.k-accountnav__who {
	display: flex;
	align-items: center;
	gap: var(--k-3);
	margin-bottom: var(--k-4);
	padding-bottom: var(--k-4);
	border-bottom: 1px solid var(--k-line);
}

.k-accountnav__avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--k-ink);
	color: var(--k-white);
}

.k-accountnav__who-text {
	min-width: 0;
}

.k-accountnav__hello {
	display: block;
	color: var(--k-muted);
	font-size: var(--k-t-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.k-accountnav__name {
	display: block;
	overflow: hidden;
	font-family: var(--k-font-display);
	font-size: 0.9375rem;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* These need the page class to outrank the block rule further up this file,
   which sets display: block and a left-padding hover that would shunt the
   icon sideways on every pointer-over. */
.woocommerce-account .k-accountnav a {
	display: flex;
	align-items: center;
	gap: var(--k-3);
	padding: var(--k-3);
	color: var(--k-ink);
}

.woocommerce-account .k-accountnav a:hover {
	padding-left: var(--k-3);
	background: var(--k-white);
	color: var(--k-accent);
}

.k-accountnav__label {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-account .k-accountnav a > svg:first-of-type {
	flex: 0 0 auto;
}

.woocommerce-account .k-accountnav a > svg:last-of-type {
	flex: 0 0 auto;
	opacity: 0.45;
	transition: transform var(--k-fast) var(--k-ease);
}

.woocommerce-account .k-accountnav a:hover > svg:last-of-type {
	transform: translateX(2px);
}

.woocommerce-account .k-accountnav .is-active a,
.woocommerce-account .k-accountnav .is-active a:hover {
	color: var(--k-white);
}

.woocommerce-account .k-accountnav .is-active a > svg:last-of-type {
	opacity: 0.85;
}

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

.k-accounthello {
	margin: 0 0 var(--k-5);
	font-family: var(--k-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
}

.k-accountcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--k-4);
}

.k-accountcard {
	display: grid;
	gap: 6px;
	padding: var(--k-5);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow);
	color: var(--k-ink);
	text-decoration: none;
	transition: transform var(--k-base) var(--k-spring), box-shadow var(--k-base) var(--k-ease),
		border-color var(--k-fast) var(--k-ease);
}

.k-accountcard:hover {
	transform: translateY(-3px);
	border-color: var(--k-line-strong);
	box-shadow: var(--k-shadow-md);
}

.k-accountcard__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: var(--k-2);
	border-radius: var(--k-radius-sm);
	background: var(--k-accent-soft);
	color: var(--k-accent);
}

.k-accountcard__title {
	font-family: var(--k-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.k-accountcard__text {
	color: var(--k-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.k-accountcard__go {
	margin-top: var(--k-2);
	color: var(--k-accent);
	transition: transform var(--k-fast) var(--k-ease);
}

.k-accountcard:hover .k-accountcard__go {
	transform: translateX(3px);
}

.k-accounthelp {
	display: flex;
	align-items: center;
	gap: var(--k-2);
	margin: var(--k-5) 0 0;
	padding: var(--k-4);
	border-radius: var(--k-radius-sm);
	background: var(--k-paper);
	font-size: 0.875rem;
}

.k-accounthelp svg {
	flex: 0 0 auto;
	color: var(--k-accent);
}

.k-accounthelp a {
	font-weight: 700;
	white-space: nowrap;
}

/* ------------------------------------------------------------- Orders */

.k-orders {
	display: grid;
	gap: var(--k-4);
}

.k-order {
	padding: var(--k-5);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow);
}

.k-order__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--k-3);
	margin-bottom: var(--k-4);
	padding-bottom: var(--k-4);
	border-bottom: 1px solid var(--k-line);
}

.k-order__num {
	color: var(--k-ink);
	font-family: var(--k-font-display);
	font-size: 1.125rem;
	font-weight: 800;
	text-decoration: none;
}

.k-order__num:hover {
	color: var(--k-accent);
}

.k-order__status {
	padding: 4px 11px;
	border-radius: 999px;
	font-family: var(--k-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.k-order__status--ok {
	background: var(--k-ok-soft);
	color: var(--k-ok);
}

.k-order__status--live {
	background: rgba(30, 133, 190, 0.12);
	color: #1065a0;
}

.k-order__status--warn {
	background: var(--k-warn-soft);
	color: var(--k-warn);
}

.k-order__status--off {
	background: var(--k-accent-soft);
	color: var(--k-accent);
}

.k-order__status--neutral {
	background: var(--k-paper);
	color: var(--k-muted);
}

.k-order__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--k-3);
}

.k-order__label {
	display: block;
	margin-bottom: 2px;
	color: var(--k-muted);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.k-order__value {
	display: block;
	color: var(--k-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.k-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-2);
	margin-top: var(--k-4);
	padding-top: var(--k-4);
	border-top: 1px solid var(--k-line);
}

.k-orderpager {
	display: flex;
	justify-content: space-between;
	gap: var(--k-3);
	margin-top: var(--k-5);
}

/* --------------------------------------------------------- Empty state */

/* An empty orders tab is not an error, so it does not get an error's
   furniture: it says what will appear here and points at the shop. */
.k-emptystate {
	display: grid;
	justify-items: center;
	gap: var(--k-2);
	padding: var(--k-8) var(--k-5);
	border: 1px dashed var(--k-line-strong);
	border-radius: var(--k-radius-lg);
	background: var(--k-paper);
	text-align: center;
}

.k-emptystate__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--k-2);
	border: 1px solid var(--k-line);
	border-radius: 50%;
	background: var(--k-white);
	color: var(--k-muted);
}

.k-emptystate__title {
	margin: 0;
	font-family: var(--k-font-display);
	font-size: 1.25rem;
	font-weight: 700;
}

.k-emptystate__text {
	margin: 0 0 var(--k-3);
	max-width: 42ch;
	color: var(--k-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.k-order,
	.k-accountcard,
	.k-loginaside {
		padding: var(--k-4);
	}

	.k-accounthello {
		font-size: 1.25rem;
	}

	.k-emptystate {
		padding: var(--k-6) var(--k-4);
	}
}