/*
 * TJL Account — My account area.
 *
 * Everything is scoped under body.tjl-acc. Two layouts: a navigation rail
 * beside the content from 992px up, and a scrollable pill row above it
 * below that, with every table turning into cards at 768px.
 */

body.tjl-acc {
	--ac-ink: #2A1040;
	--ac-ink-soft: #6B6675;
	--ac-line: #E8E0F2;
	--ac-line-soft: #F1EBF8;
	--ac-wash: #FBF7FE;
	--ac-wash-2: #F7F4FA;
	--ac-gold: #D9A62E;
	--ac-gold-soft: #FBF3DF;
	--ac-gold-ink: #4A3405;
	--ac-plum: #3A1259;
	--ac-radius: 14px;
}

body.tjl-acc .woocommerce-MyAccount-navigation,
body.tjl-acc .woocommerce-MyAccount-content {
	font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--ac-ink);
}

body.tjl-acc .woocommerce-MyAccount-navigation *,
body.tjl-acc .woocommerce-MyAccount-content * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- the shell */

@media (min-width: 992px) {
	body.tjl-acc .woocommerce-account .woocommerce,
	body.tjl-acc .woocommerce .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content {
		/* nothing structural -- the theme already floats these; the widths
		   below are what make the pair read as a pair. */
	}

	body.tjl-acc .woocommerce-MyAccount-navigation {
		float: left;
		width: 262px;
		margin: 0 0 32px;
	}

	body.tjl-acc .woocommerce-MyAccount-content {
		float: right;
		width: calc(100% - 294px);
		margin: 0 0 32px;
	}

	body.tjl-acc .woocommerce-account .woocommerce::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* -------------------------------------------------------- the navigation */

body.tjl-acc .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

body.tjl-acc .woocommerce-MyAccount-navigation li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

body.tjl-acc .woocommerce-MyAccount-navigation li::marker {
	content: "";
}

body.tjl-acc .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 11px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	color: var(--ac-ink-soft);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* The icon is a mask so it takes the link's own colour in every state. */
body.tjl-acc .woocommerce-MyAccount-navigation a::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
}

body.tjl-acc .woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 3.5h11l1.5 3.5v10a1 1 0 0 1-1 1h-12a1 1 0 0 1-1-1v-10Z'/%3E%3Cpath d='M3 7h14M7.5 10.5h5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 3.5h11l1.5 3.5v10a1 1 0 0 1-1 1h-12a1 1 0 0 1-1-1v-10Z'/%3E%3Cpath d='M3 7h14M7.5 10.5h5'/%3E%3C/svg%3E");
}

body.tjl-acc .woocommerce-MyAccount-navigation-link--downloads a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5'/%3E%3Cpath d='M3.5 14.5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5'/%3E%3Cpath d='M3.5 14.5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2'/%3E%3C/svg%3E");
}

body.tjl-acc .woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17.5s5.5-4.9 5.5-9a5.5 5.5 0 0 0-11 0c0 4.1 5.5 9 5.5 9Z'/%3E%3Ccircle cx='10' cy='8.3' r='2.1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17.5s5.5-4.9 5.5-9a5.5 5.5 0 0 0-11 0c0 4.1 5.5 9 5.5 9Z'/%3E%3Ccircle cx='10' cy='8.3' r='2.1'/%3E%3C/svg%3E");
}

body.tjl-acc .woocommerce-MyAccount-navigation-link--edit-account a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='3.1'/%3E%3Cpath d='M4.2 17c0-2.9 2.6-4.6 5.8-4.6S15.8 14.1 15.8 17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='3.1'/%3E%3Cpath d='M4.2 17c0-2.9 2.6-4.6 5.8-4.6S15.8 14.1 15.8 17'/%3E%3C/svg%3E");
}

body.tjl-acc .woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 3.5h-6a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h6'/%3E%3Cpath d='M13 10h4.5m0 0-2.3-2.3M17.5 10l-2.3 2.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 3.5h-6a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h6'/%3E%3Cpath d='M13 10h4.5m0 0-2.3-2.3M17.5 10l-2.3 2.3'/%3E%3C/svg%3E");
}

@media (hover: hover) {
	body.tjl-acc .woocommerce-MyAccount-navigation a:hover {
		background: var(--ac-wash);
		color: var(--ac-plum);
	}
}

body.tjl-acc .woocommerce-MyAccount-navigation .is-active a {
	background: var(--ac-plum);
	border-color: var(--ac-plum);
	color: #FFF;
}

body.tjl-acc .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #8A5A5A;
}

/* ---------------------------------------------- desktop: a rail of links */

@media (min-width: 992px) {
	body.tjl-acc .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 10px;
		background: #FFF;
		border: 1px solid var(--ac-line);
		border-radius: var(--ac-radius);
	}

	body.tjl-acc .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 6px;
		padding-top: 10px;
		border-top: 1px solid var(--ac-line-soft);
	}
}

/* ------------------------------------- phone + tablet: a row of pills ---
   A column of full-width buttons eats the whole first screen, so the rail
   becomes one horizontally scrollable row. The row keeps its own padding
   as scroll padding so the first and last pill are never clipped. */

@media (max-width: 991px) {
	body.tjl-acc .woocommerce-MyAccount-navigation {
		margin: 0 0 18px;
		border-bottom: 1px solid var(--ac-line);
	}

	body.tjl-acc .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 0 12px;
		scroll-padding-inline: 2px;
	}

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

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

	body.tjl-acc .woocommerce-MyAccount-navigation a {
		white-space: nowrap;
		border-radius: 999px;
		border-color: var(--ac-line);
		background: #FFF;
		padding: 10px 16px;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------- content */

body.tjl-acc .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

body.tjl-acc .woocommerce-MyAccount-content h2,
body.tjl-acc .woocommerce-MyAccount-content h3 {
	font-family: "Jost", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ac-plum);
	margin: 0 0 12px;
}

/* ------------------------------------------------------- orders table */

body.tjl-acc .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}

body.tjl-acc .woocommerce-orders-table th,
body.tjl-acc .woocommerce-orders-table td {
	padding: 13px 14px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--ac-line-soft);
	background: none;
}

body.tjl-acc .woocommerce-orders-table thead th {
	background: var(--ac-wash);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ac-ink-soft);
	border-bottom: 1px solid var(--ac-line);
	white-space: nowrap;
}

body.tjl-acc .woocommerce-orders-table__cell-order-number a {
	font-weight: 600;
	color: var(--ac-plum);
	text-decoration: none;
}

body.tjl-acc .woocommerce-orders-table__cell-order-status {
	white-space: nowrap;
}

body.tjl-acc .woocommerce-orders-table .woocommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin: 2px 4px 2px 0;
	padding: 8px 16px;
	border: 1px solid var(--ac-line);
	border-radius: 999px;
	background: #FFF;
	font-size: 13px;
	font-weight: 600;
	color: var(--ac-ink-soft);
	text-decoration: none;
}

body.tjl-acc .woocommerce-orders-table .woocommerce-button.pay {
	background: var(--ac-plum);
	border-color: var(--ac-plum);
	color: #FFF;
}

@media (hover: hover) {
	body.tjl-acc .woocommerce-orders-table .woocommerce-button:hover {
		border-color: var(--ac-plum);
		color: var(--ac-plum);
	}
	body.tjl-acc .woocommerce-orders-table .woocommerce-button.pay:hover {
		background: #4C1A73;
		color: #FFF;
	}
}

@media (min-width: 769px) {
	body.tjl-acc .woocommerce-orders-table {
		border: 1px solid var(--ac-line);
		border-radius: var(--ac-radius);
		overflow: hidden;
	}

	body.tjl-acc .woocommerce-orders-table tbody tr:last-child th,
	body.tjl-acc .woocommerce-orders-table tbody tr:last-child td {
		border-bottom: 0;
	}
}

/* ------------------------------------------- orders as cards on a phone
   WooCommerce's own small-screen stylesheet stacks the cells and hides
   the <th>, which is exactly the cell holding the order number -- so the
   customer loses the one label that says which order a block is. These
   rules rebuild the row as a card and put the number back at the top of
   it as a heading. */

@media (max-width: 768px) {
	body.tjl-acc .woocommerce-orders-table,
	body.tjl-acc .woocommerce-orders-table tbody,
	body.tjl-acc .woocommerce-orders-table tr,
	body.tjl-acc .woocommerce-orders-table th,
	body.tjl-acc .woocommerce-orders-table td {
		display: block;
		width: 100%;
	}

	body.tjl-acc .woocommerce-orders-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	body.tjl-acc .woocommerce-orders-table tr {
		margin: 0 0 12px;
		border: 1px solid var(--ac-line);
		border-radius: var(--ac-radius);
		overflow: hidden;
		background: #FFF;
	}

	body.tjl-acc .woocommerce-orders-table tr:last-child {
		margin-bottom: 0;
	}

	/* the order number, back from the dead, as the card's header */
	body.tjl-acc .woocommerce-orders-table__cell-order-number {
		display: block !important;
		padding: 12px 14px;
		background: var(--ac-wash);
		border-bottom: 1px solid var(--ac-line);
		text-align: left;
	}

	body.tjl-acc .woocommerce-orders-table__cell-order-number::before {
		content: "";
		display: none;
	}

	body.tjl-acc .woocommerce-orders-table__cell-order-number a {
		font-size: 16px;
	}

	body.tjl-acc .woocommerce-orders-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 10px 14px;
		border-bottom: 1px dashed var(--ac-line-soft);
		text-align: right;
	}

	body.tjl-acc .woocommerce-orders-table td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--ac-ink-soft);
		text-align: left;
	}

	body.tjl-acc .woocommerce-orders-table__cell-order-actions {
		display: block;
		border-bottom: 0;
		text-align: left;
		background: var(--ac-wash-2);
		padding: 12px 14px;
	}

	body.tjl-acc .woocommerce-orders-table__cell-order-actions::before {
		display: block;
		margin-bottom: 8px;
	}

	body.tjl-acc .woocommerce-orders-table__cell-order-actions .woocommerce-button {
		width: 100%;
		margin: 0 0 8px;
	}

	body.tjl-acc .woocommerce-orders-table__cell-order-actions .woocommerce-button:last-child {
		margin-bottom: 0;
	}
}

/* ----------------------------------------------------------- addresses */

body.tjl-acc .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}

body.tjl-acc .woocommerce-Address {
	width: auto !important;
	float: none !important;
	padding: 16px 18px;
	background: #FFF;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
}

body.tjl-acc .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
}

body.tjl-acc .woocommerce-Address-title h2,
body.tjl-acc .woocommerce-Address-title h3 {
	margin: 0;
}

body.tjl-acc .woocommerce-Address-title a {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ac-plum);
	white-space: nowrap;
}

body.tjl-acc .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ac-ink-soft);
}

@media (max-width: 768px) {
	body.tjl-acc .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------- forms + account details */

body.tjl-acc .woocommerce-MyAccount-content form .woocommerce-form-row,
body.tjl-acc .woocommerce-MyAccount-content form p.form-row {
	margin: 0 0 14px;
	padding: 0;
	width: 100%;
	float: none;
}

body.tjl-acc .woocommerce-MyAccount-content form label {
	display: block;
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ac-ink);
}

body.tjl-acc .woocommerce-MyAccount-content form .woocommerce-Input,
body.tjl-acc .woocommerce-MyAccount-content form input[type="text"],
body.tjl-acc .woocommerce-MyAccount-content form input[type="email"],
body.tjl-acc .woocommerce-MyAccount-content form input[type="tel"],
body.tjl-acc .woocommerce-MyAccount-content form input[type="password"],
body.tjl-acc .woocommerce-MyAccount-content form select,
body.tjl-acc .woocommerce-MyAccount-content form textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--ac-line);
	border-radius: 10px;
	background: #FFF;
	font-family: inherit;
	font-size: 15px;      /* 16px-ish keeps iOS from zooming the field */
	color: var(--ac-ink);
}

body.tjl-acc .woocommerce-MyAccount-content form input:focus,
body.tjl-acc .woocommerce-MyAccount-content form select:focus,
body.tjl-acc .woocommerce-MyAccount-content form textarea:focus {
	outline: 2px solid rgba(132, 65, 192, .35);
	outline-offset: 1px;
	border-color: var(--ac-plum);
}

body.tjl-acc .woocommerce-MyAccount-content fieldset {
	margin: 18px 0;
	padding: 16px 18px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
	background: var(--ac-wash);
}

body.tjl-acc .woocommerce-MyAccount-content fieldset legend {
	padding: 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ac-plum);
}

body.tjl-acc .woocommerce-MyAccount-content form em,
body.tjl-acc .woocommerce-MyAccount-content span.description {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.5;
	color: var(--ac-ink-soft);
}

body.tjl-acc .woocommerce-MyAccount-content button[type="submit"],
body.tjl-acc .woocommerce-MyAccount-content .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 26px;
	border: 1px solid var(--ac-plum);
	border-radius: 999px;
	background: var(--ac-plum);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: #FFF;
	text-decoration: none;
	cursor: pointer;
}

@media (hover: hover) {
	body.tjl-acc .woocommerce-MyAccount-content button[type="submit"]:hover,
	body.tjl-acc .woocommerce-MyAccount-content .woocommerce-Button:hover {
		background: #4C1A73;
		color: #FFF;
	}
}

@media (max-width: 768px) {
	body.tjl-acc .woocommerce-MyAccount-content button[type="submit"],
	body.tjl-acc .woocommerce-MyAccount-content .woocommerce-Button {
		width: 100%;
	}
}

/* Two-up name fields on anything wider than a phone. */
@media (min-width: 560px) {
	body.tjl-acc .woocommerce-MyAccount-content form .form-row-first,
	body.tjl-acc .woocommerce-MyAccount-content form .form-row-last {
		display: inline-block;
		width: calc(50% - 7px);
		vertical-align: top;
	}

	body.tjl-acc .woocommerce-MyAccount-content form .form-row-first {
		margin-right: 12px;
	}
}

/* ------------------------------------------------- notices + empty states */

body.tjl-acc .woocommerce-message,
body.tjl-acc .woocommerce-info,
body.tjl-acc .woocommerce-error,
body.tjl-acc .woocommerce-Message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding: 14px 18px;
	background: var(--ac-wash);
	border: 1px solid var(--ac-line);
	border-left: 3px solid var(--ac-gold);
	border-radius: 12px;
	font-size: 14px;
	color: var(--ac-ink);
	list-style: none;
}

body.tjl-acc .woocommerce-message::before,
body.tjl-acc .woocommerce-info::before,
body.tjl-acc .woocommerce-error::before {
	display: none;
}

body.tjl-acc .woocommerce-message .button,
body.tjl-acc .woocommerce-info .button {
	margin-left: auto;
}

@media (max-width: 768px) {
	body.tjl-acc .woocommerce-message .button,
	body.tjl-acc .woocommerce-info .button {
		margin-left: 0;
		width: 100%;
	}
}

/* --------------------------------------------------------- pagination */

body.tjl-acc .woocommerce-pagination {
	margin: 18px 0 0;
}

body.tjl-acc .woocommerce-pagination .button,
body.tjl-acc .woocommerce-Pagination .button {
	border-radius: 999px;
}

/* ------------------------------------------------------- status as a pill
   Rendered by the plugin through
   woocommerce_my_account_my_orders_column_order-status, so this is a real
   element with a real class rather than generated content. */

body.tjl-acc .tjl-acc-status {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--ac-wash-2);
	border: 1px solid var(--ac-line);
	color: var(--ac-ink-soft);
}

body.tjl-acc .tjl-acc-status--completed,
body.tjl-acc .tjl-acc-status--processing {
	background: #E9F7EE;
	border-color: #BEE5CB;
	color: #1C6B37;
}

body.tjl-acc .tjl-acc-status--partially-paid,
body.tjl-acc .tjl-acc-status--on-hold,
body.tjl-acc .tjl-acc-status--firstpayreceived,
body.tjl-acc .tjl-acc-status--tjl-production,
body.tjl-acc .tjl-acc-status--tjl-final-weight {
	background: var(--ac-gold-soft);
	border-color: #EBD69B;
	color: var(--ac-gold-ink);
}

body.tjl-acc .tjl-acc-status--pending,
body.tjl-acc .tjl-acc-status--tjl-balance-due {
	background: #FFF4E5;
	border-color: #F3D5A7;
	color: #7A4A06;
}

body.tjl-acc .tjl-acc-status--cancelled,
body.tjl-acc .tjl-acc-status--failed,
body.tjl-acc .tjl-acc-status--refunded {
	background: #FDECEC;
	border-color: #F2C4C4;
	color: #8A2020;
}

/* ------------------------------------------- buttons living inside notices
   The empty-state "Browse products" link carries .button as well as
   .woocommerce-Button, and WooCommerce's own grey .button rule wins on
   specificity unless it is named here too. */

body.tjl-acc .woocommerce-MyAccount-content .woocommerce-info .button,
body.tjl-acc .woocommerce-MyAccount-content .woocommerce-message .button,
body.tjl-acc .woocommerce-MyAccount-content .woocommerce-Message .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 22px;
	border: 1px solid var(--ac-plum);
	border-radius: 999px;
	background: var(--ac-plum);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #FFF;
	text-decoration: none;
}

@media (hover: hover) {
	body.tjl-acc .woocommerce-MyAccount-content .woocommerce-info .button:hover,
	body.tjl-acc .woocommerce-MyAccount-content .woocommerce-message .button:hover {
		background: #4C1A73;
		color: #FFF;
	}
}

/* A fade at the right edge of the pill row, so it reads as scrollable. */
@media (max-width: 991px) {
	body.tjl-acc .woocommerce-MyAccount-navigation {
		position: relative;
	}

	body.tjl-acc .woocommerce-MyAccount-navigation::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 13px;
		width: 34px;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(247, 244, 250, 0) 0%, var(--ac-wash-2) 100%);
	}
}

/* =========================================================================
   11. NARROW-SCREEN OVERFLOW  (added 2026-10-15)
   -------------------------------------------------------------------------
   Measured on live at 390x844 after the widget was widened from 90% to 100%
   and its 40px inner padding dropped (Elementor element e17ebac on post
   4083). Content went from a 235px column to 350px, and 18 of the 19
   overflowing nodes went with it. These are the three that survived, all of
   them rows whose children refuse to wrap:

     orders    tr with PAY/VIEW/CANCEL   scrollWidth 395 vs clientWidth 318
     orders    td.order-actions          scrollWidth 395 vs clientWidth 318
     addresses header.Address-title      scrollWidth 332 vs clientWidth 316

   The stacking rules for these already existed in section 6, but The Plus's
   own widget CSS is generated per element -- `.elementor-4083
   .elementor-element.elementor-element-e17ebac …`, (0,4,x) with the element
   class counted twice -- and loads after this file, so a (0,3,x) selector
   ties at best and loses on order. Scoping through the widget class is what
   wins the cascade here; `!important` would also beat the Elementor editor
   and make a future change in the UI look broken.
   ========================================================================= */

@media (max-width: 768px) {

	/* Order actions: one full-width button per line. Three 108px buttons on
	   a single line need 395px of a 318px card. */
	body.tjl-acc .elementor-widget-tp-woo-myaccount .woocommerce-orders-table__cell-order-actions {
		display: block;
		text-align: left;
	}

	body.tjl-acc .elementor-widget-tp-woo-myaccount .woocommerce-orders-table__cell-order-actions .woocommerce-button,
	body.tjl-acc .elementor-widget-tp-woo-myaccount .woocommerce-orders-table__cell-order-actions a.button {
		display: block;
		width: 100%;
		min-width: 0;
		margin: 0 0 8px;
		text-align: center;
		box-sizing: border-box;
	}

	body.tjl-acc .elementor-widget-tp-woo-myaccount .woocommerce-orders-table__cell-order-actions .woocommerce-button:last-child,
	body.tjl-acc .elementor-widget-tp-woo-myaccount .woocommerce-orders-table__cell-order-actions a.button:last-child {
		margin-bottom: 0;
	}

	/* A label/value row must be able to break rather than push the card
	   open -- "₹464,303.40 for 1 item" against a TOTAL: label is already
	   close to the limit at 350px. */
	body.tjl-acc .elementor-widget-tp-woo-myaccount .woocommerce-orders-table td {
		flex-wrap: wrap;
	}

	/* Address card header: the Edit link is a full pill from the widget's own
	   settings, so it cannot sit on the title's line at this width. */
	body.tjl-acc .elementor-widget-tp-woo-myaccount .woocommerce-Address-title {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px;
	}

	body.tjl-acc .elementor-widget-tp-woo-myaccount .woocommerce-Address-title a {
		white-space: normal;
		max-width: 100%;
	}
}

/* An email address is one unbreakable token and the longest string on the
   account screens; at 318px of card it is the first thing to hang out of its
   own box. Breaking anywhere is correct for an address -- it is never read
   aloud as syllables. */
body.tjl-acc .woocommerce-MyAccount-content,
body.tjl-acc .woocommerce-MyAccount-content address,
body.tjl-acc .woocommerce-MyAccount-content p,
body.tjl-acc .woocommerce-MyAccount-content td,
body.tjl-acc .woocommerce-MyAccount-content li {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ---- 11b. address-card heading -----------------------------------------
 * Measured after the width fix: the card title rendered as a 30px serif
 * flush RIGHT over a left-aligned Edit pill — two alignments in one 350px
 * card.
 *
 * The rule that wins it is Elementor's own, and it is heavy:
 *
 *   .elementor-4083 .elementor-element.elementor-element-e17ebac
 *   .tp-myaccount-page-wrapper .woocommerce h2          -> (0,5,1)
 *
 * Section 7's rule is (0,3,1) and the first attempt here was (0,3,2); both
 * lost. Specificity is bought by REPEATING the two classes this file already
 * relies on rather than by hardcoding `.elementor-4083` and the element id —
 * repetition survives a page rebuild and a new element id, the hardcoded pair
 * does not. (0,5,2) beats (0,5,1). No !important: that would also beat the
 * Elementor editor and make a future change in the UI look broken. */
body.tjl-acc .elementor-widget-tp-woo-myaccount.elementor-widget-tp-woo-myaccount .woocommerce-Address-title.woocommerce-Address-title h2,
body.tjl-acc .elementor-widget-tp-woo-myaccount.elementor-widget-tp-woo-myaccount .woocommerce-Address-title.woocommerce-Address-title h3 {
	margin: 0;
	font-family: "Jost", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: left;
	color: var(--ac-plum);
}

body.tjl-acc .elementor-widget-tp-woo-myaccount.elementor-widget-tp-woo-myaccount .woocommerce-Address-title.woocommerce-Address-title {
	text-align: left;
	justify-content: flex-start;
}