/* Project E — "החשבון שלי" / מועדון הלקוחות.
 *
 * Two rules govern this file, both learned the hard way on this codebase:
 *
 * 1. No literal brand colour. Everything paints from the custom properties
 *    Jett_Woo_Account::css_vars() prints, so one setting restyles the page.
 * 2. Anything that decides a control's box or colour is !important. This page
 *    renders inside the merchant's theme, and an Elementor kit styling bare
 *    `button` / `a` / `input` outranks a single class — that is what put a pink
 *    border on the points controls and a black hairline on the checkout fields.
 *
 * RTL-first: logical properties throughout, nav rail on the right.
 */

.jw-account .woocommerce-MyAccount-navigation,
.jw-account .woocommerce-MyAccount-content,
.jw-ac {
	--jwac-primary: #111827;
	--jwac-on-primary: #ffffff;
	--jwac-accent: #2563eb;
	--jwac-radius: 14px;

	--jwac-ink: #16181c;
	--jwac-ink-soft: #666e78;
	--jwac-ink-faint: #99a0a8;
	--jwac-line: #e4e7eb;
	--jwac-surface: #ffffff;
	--jwac-tint: #f6f7f9;
	--jwac-tint-2: #eceff3;
	--jwac-line-soft: #eef0f3;
	--jwac-field-line: #dfe3e8;
	--jwac-field-line-hover: #c3c9d2;
	--jwac-danger: #b3261e;
	--jwac-shadow: 0 1px 1px rgba(16, 24, 40, .04), 0 6px 20px -12px rgba(16, 24, 40, .18);
}

.jw-ac,
.jw-ac * { box-sizing: border-box; }

/* ------------------------------------------------------------------ layout */

/* Elementor Pro's My Account widget sizes both panels itself — joseph's page
   carries `e-my-account-tabs-vertical`, whose CSS hands the rail and the content
   a width/flex-basis pair. Everything that could decide their box is
   neutralised, not just float and width: one leftover flex-basis or max-width
   is enough to keep our own layout from being used. */
.jw-account .woocommerce-MyAccount-navigation,
.jw-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	inline-size: auto !important;
	max-width: none !important;
	max-inline-size: none !important;
	flex: 0 1 auto !important;
	flex-basis: auto !important;
	margin-inline: 0 !important;
}

/* The wrappers Elementor puts between its widget and the shortcode output.
   Each one is a potential width cap on everything below it. */
body.jw-account .elementor-widget-woocommerce-my-account .elementor-widget-container,
body.jw-account .e-my-account-tab,
body.jw-account .e-my-account-tab > .woocommerce {
	display: block !important;
	inline-size: auto !important;
	max-inline-size: none !important;
	float: none !important;
}

/* THE LAYOUT LIVES ON OUR OWN ELEMENT.
   .jw-ac-shell is printed by templates/myaccount/my-account.php and nothing else
   styles it, so the two columns land the same way inside WooCommerce's plain
   `.woocommerce` div and inside Elementor's My Account widget. Styling whatever
   element happens to be the panels' parent is a guess that has to be re-made for
   every page builder; owning one is not.

   Flex rather than grid, because the children carry explicit flex values that
   override whatever a builder set on them. RTL needs no directional rule: the
   rail is the first child, so the default row direction puts it on the right. */
.jw-ac-shell {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 26px !important;
	inline-size: auto !important;
	max-inline-size: none !important;
}

.jw-ac-shell > .woocommerce-MyAccount-navigation {
	flex: 0 0 290px !important;
	inline-size: 290px !important;
	max-inline-size: 290px !important;
	min-inline-size: 0 !important;
}

.jw-ac-shell > .woocommerce-MyAccount-content {
	flex: 1 1 auto !important;
	inline-size: auto !important;
	max-inline-size: none !important;
	min-inline-size: 0 !important;
}

@media (max-width: 860px) {
	.jw-ac-shell { flex-direction: column !important; gap: 0 !important; }

	/* min-inline-size is the whole fix. A flex item defaults to `min-width:auto`
	   and REFUSES to shrink below its content — and the rail's content is a
	   nowrap row of tabs, so on a phone it pushed the column wider than the
	   screen and the whole page scrolled sideways. Zero lets it shrink, and the
	   list's own overflow-x does the scrolling instead. */
	.jw-ac-shell > .woocommerce-MyAccount-navigation,
	.jw-ac-shell > .woocommerce-MyAccount-content {
		flex: 0 0 auto !important;
		inline-size: auto !important;
		min-inline-size: 0 !important;
		max-inline-size: 100% !important;
	}
	.jw-ac-shell > .woocommerce-MyAccount-content { overflow-x: hidden; }
}

/* ---------------------------------------------------------------- nav rail */

.jw-ac-nav {
	padding: 18px;
	border: 1px solid var(--jwac-line);
	border-radius: var(--jwac-radius);
	background: var(--jwac-surface);
	box-shadow: var(--jwac-shadow);
}

.jw-ac-me { display: flex; align-items: center; gap: 12px; padding-block-end: 16px; margin-block-end: 14px; border-block-end: 1px solid var(--jwac-line); }
.jw-ac-me__avatar { flex: none; }
.jw-ac-me__avatar img { display: block; inline-size: 44px !important; block-size: 44px !important; border-radius: 50% !important; object-fit: cover; }
.jw-ac-me__text { display: flex; flex-direction: column; min-inline-size: 0; gap: 1px; }
.jw-ac-me__hello { font-size: 12.5px; color: var(--jwac-ink-soft); }
.jw-ac-me__name { font-size: 15px; font-weight: 700; color: var(--jwac-ink); overflow-wrap: anywhere; }
.jw-ac-nav a.jw-ac-me__points {
	margin-block-start: 3px;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: var(--jwac-accent) !important;
	text-decoration: none !important;
}

.jw-ac-nav__list { display: flex; flex-direction: column; gap: 2px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.jw-ac-nav__list li { margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; }

.jw-ac-nav__list li a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 11px 12px !important;
	border: 0 !important;
	border-radius: calc(var(--jwac-radius) - 6px) !important;
	background: transparent !important;
	color: var(--jwac-ink-soft) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}

.jw-ac-nav__list li a:hover { background: var(--jwac-tint) !important; color: var(--jwac-ink) !important; }

/* The selected tab is a quiet grey, not a filled slab. A black block was
   reading as a button — the loudest thing on the page competing with the
   member card for attention, when all it has to say is "you are here". The ink
   text and the weight carry that on their own. */
.jw-ac-nav__list li.is-active a {
	background: var(--jwac-tint-2) !important;
	color: var(--jwac-ink) !important;
	font-weight: 700 !important;
}
.jw-ac-nav__list li.is-active .jw-ac-nav__icon { color: var(--jwac-accent); }
.jw-ac-nav__list li a:focus-visible { outline: 2px solid var(--jwac-accent) !important; outline-offset: 2px !important; }
.jw-ac-nav__icon { display: inline-flex; flex: none; }
.jw-ac-nav__label { min-inline-size: 0; overflow-wrap: anywhere; }

/* The way out is not a tab. */
.jw-ac-nav__list li.woocommerce-MyAccount-navigation-link--customer-logout { margin-block-start: 8px !important; padding-block-start: 8px !important; border-block-start: 1px solid var(--jwac-line) !important; }

@media (max-width: 860px) {
	.jw-ac-nav { padding: 14px; margin-block-end: 18px; max-inline-size: 100%; overflow: hidden; }
	.jw-ac-nav__list {
		min-inline-size: 0;
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		padding-block-end: 4px !important;
		scrollbar-width: none;
	}
	.jw-ac-nav__list::-webkit-scrollbar { display: none; }
	.jw-ac-nav__list li { flex: none; }
	.jw-ac-nav__list li a { white-space: nowrap; }
	.jw-ac-nav__list li.woocommerce-MyAccount-navigation-link--customer-logout { margin: 0 !important; padding-block-start: 11px !important; border: 0 !important; }
}

/* ------------------------------------------------------------------ shared */

.jw-ac-h { margin: 0 0 14px !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--jwac-ink) !important; }
.jw-ac-welcome { margin: 0 0 18px; color: var(--jwac-ink-soft); font-size: 14.5px; line-height: 1.55; }
.jw-ac-empty { margin: 0; color: var(--jwac-ink-soft); font-size: 14px; line-height: 1.6; }

.jw-ac-card {
	padding: 18px;
	margin-block-end: 18px;
	border: 1px solid var(--jwac-line);
	border-radius: var(--jwac-radius);
	background: var(--jwac-surface);
	box-shadow: var(--jwac-shadow);
}

.jw-ac-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jw-ac-card__head .jw-ac-h { margin: 0 !important; }

.jw-ac-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-inline-size: 26px; padding: 3px 9px;
	border-radius: 999px; background: var(--jwac-tint);
	color: var(--jwac-ink-soft); font-size: 12.5px; font-weight: 700;
}
.jw-ac-pill--accent { background: color-mix(in srgb, var(--jwac-accent) 12%, #fff); color: var(--jwac-accent); }

/* line-height 1 in a fixed-height box clips Hebrew — the glyphs are taller than
   the Latin ones this kind of rule is usually written against. Padding sets the
   height instead, with min-block-size only as the tap-target floor. */
.jw-ac a.jw-ac-btn,
.jw-ac button.jw-ac-btn {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	gap: 8px;
	min-block-size: 46px !important;
	inline-size: auto !important;
	margin: 0 !important;
	padding: 12px 22px !important;
	border: 1px solid var(--jwac-line) !important;
	border-radius: calc(var(--jwac-radius) - 4px) !important;
	background: var(--jwac-surface) !important;
	color: var(--jwac-ink) !important;
	font-family: inherit !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
	cursor: pointer !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.jw-ac a.jw-ac-btn:hover { transform: translateY(-1px); }
.jw-ac a.jw-ac-btn:active { transform: none; }

.jw-ac a.jw-ac-btn--primary,
.jw-ac button.jw-ac-btn--primary {
	border-color: var(--jwac-primary) !important;
	background: var(--jwac-primary) !important;
	color: var(--jwac-on-primary) !important;
}
.jw-ac a.jw-ac-btn--primary:hover { filter: brightness(1.12); }
.jw-ac a.jw-ac-btn--sm { min-block-size: 36px !important; padding: 0 14px !important; font-size: 13px !important; }
.jw-ac a.jw-ac-btn:focus-visible { outline: 2px solid var(--jwac-accent) !important; outline-offset: 2px !important; }

/* --------------------------------------------------------------- dashboard */

/* A white card, like every other panel on the page. The dark version read as a
   banner dropped on top of the account rather than part of it, and it fought
   the product photography this shop is full of. The accent now arrives as a
   wash and on the numbers, which is enough to make it the first thing read. */
.jw-ac-member {
	position: relative;
	overflow: hidden;
	padding: 20px;
	margin-block-end: 18px;
	border: 1px solid var(--jwac-line);
	border-radius: var(--jwac-radius);
	background: var(--jwac-surface);
	color: var(--jwac-ink);
	box-shadow: var(--jwac-shadow);
}

.jw-ac-member::after {
	content: "";
	position: absolute;
	inset-block-start: -55%;
	inset-inline-start: -8%;
	inline-size: 240px; block-size: 240px;
	border-radius: 50%;
	background: var(--jwac-accent);
	opacity: .07;
	pointer-events: none;
}

.jw-ac-member > * { position: relative; z-index: 1; }
.jw-ac-member__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.jw-ac-member__label { display: block; font-size: 13px; color: var(--jwac-ink-soft); }
.jw-ac-member__value { display: block; font-size: 38px; font-weight: 800; line-height: 1.1; color: var(--jwac-ink); font-variant-numeric: tabular-nums; }
.jw-ac-member__worth { display: block; margin-block-start: 2px; font-size: 13.5px; color: var(--jwac-ink-soft); }
.jw-ac-member__level {
	flex: none;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--jwac-tint-2);
	color: var(--jwac-ink);
	font-size: 12.5px; font-weight: 700;
}
.jw-ac-member__bar { margin-block-start: 16px; block-size: 8px; border-radius: 999px; background: var(--jwac-tint-2); overflow: hidden; }
.jw-ac-member__fill { display: block; block-size: 100%; border-radius: 999px; background: var(--jwac-accent); }
.jw-ac-member__next { margin: 8px 0 0; font-size: 13px; color: var(--jwac-ink-soft); }
/* The card's one action: filled, sized to its text, sitting clear of the
   progress line above it. */
.jw-ac-member .jw-ac-btn {
	align-self: flex-start;
	margin-block-start: 18px !important;
	border-color: var(--jwac-primary) !important;
	background: var(--jwac-primary) !important;
	color: var(--jwac-on-primary) !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .12) !important;
}
.jw-ac-member .jw-ac-btn:hover { filter: brightness(1.15); }

.jw-ac-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block-end: 18px; }
.jw-ac-stat {
	padding: 16px 12px;
	border: 1px solid var(--jwac-line);
	border-radius: var(--jwac-radius);
	background: var(--jwac-surface);
	text-align: center;
	box-shadow: var(--jwac-shadow);
}
.jw-ac-stat__value { display: block; font-size: 24px; font-weight: 800; color: var(--jwac-ink); font-variant-numeric: tabular-nums; }
.jw-ac-stat__label { display: block; margin-block-start: 2px; font-size: 12.5px; color: var(--jwac-ink-soft); }

.jw-ac-earn { margin-block-end: 18px; }
.jw-ac-earn__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.jw-ac a.jw-ac-earn__card {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	padding: 16px !important;
	border: 1px solid var(--jwac-line) !important;
	border-radius: var(--jwac-radius) !important;
	background: var(--jwac-surface) !important;
	color: var(--jwac-ink) !important;
	text-decoration: none !important;
	box-shadow: var(--jwac-shadow);
	transition: border-color .15s ease, transform .15s ease;
}
.jw-ac a.jw-ac-earn__card:hover { border-color: var(--jwac-accent) !important; transform: translateY(-1px); }
.jw-ac-earn__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--jwac-tint); color: var(--jwac-accent); }
.jw-ac-earn__body { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.jw-ac-earn__body strong { font-size: 14.5px; font-weight: 700; }
.jw-ac-earn__body span { font-size: 13px; color: var(--jwac-ink-soft); line-height: 1.5; }

.jw-ac-logout { margin: 18px 0 0; font-size: 13px; color: var(--jwac-ink-faint); }
.jw-ac-logout a { color: var(--jwac-ink-soft) !important; text-decoration: underline !important; }

/* ----------------------------------------------------------------- reviews */

.jw-ac-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 0 !important; padding: 0 !important; list-style: none !important; }
.jw-ac-products li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.jw-ac-product { display: flex; flex-direction: column; gap: 8px; }
.jw-ac-product__media { display: block; border-radius: calc(var(--jwac-radius) - 4px); overflow: hidden; background: var(--jwac-tint); }
.jw-ac-product__media img { display: block; inline-size: 100%; block-size: auto; }
.jw-ac-product__body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.jw-ac a.jw-ac-product__name { font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--jwac-ink) !important; text-decoration: none !important; }
.jw-ac a.jw-ac-product__name:hover { text-decoration: underline !important; }

.jw-ac-reviews__list { margin: 14px 0 0 !important; padding: 0 !important; list-style: none !important; display: flex; flex-direction: column; gap: 14px; }
.jw-ac-review { margin: 0 !important; padding: 14px; border: 1px solid var(--jwac-line); border-radius: calc(var(--jwac-radius) - 4px); background: var(--jwac-surface); list-style: none !important; }
.jw-ac-review__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jw-ac a.jw-ac-review__product { font-size: 14.5px !important; font-weight: 700 !important; color: var(--jwac-ink) !important; text-decoration: none !important; }
.jw-ac a.jw-ac-review__product:hover { text-decoration: underline !important; }
.jw-ac-review__title { margin: 8px 0 0 !important; font-size: 14px; font-weight: 600; color: var(--jwac-ink); }
.jw-ac-review__text { margin: 5px 0 0 !important; font-size: 13.5px; line-height: 1.6; color: var(--jwac-ink-soft); }
.jw-ac-review__date { display: block; margin-block-start: 8px; font-size: 12px; color: var(--jwac-ink-faint); }

.jw-ac-status { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.jw-ac-status--approved { background: #e9f7ef; color: #0f7b3f; }
.jw-ac-status--pending { background: #fff4e5; color: #92400e; }
.jw-ac-status--rejected,
.jw-ac-status--spam { background: #fdecea; color: #b3261e; }

.jw-ac-stars { display: flex; align-items: center; gap: 2px; margin-block-start: 6px; }
.jw-ac-star { color: #d7dbe0; font-size: 15px; line-height: 1; }
.jw-ac-star.is-on { color: #f5a623; }
.jw-ac-earned { margin-inline-start: 8px; font-size: 12.5px; font-weight: 700; color: #0f7b3f; }

/* The points endpoint keeps its own stylesheet; this only seats it in the new
   shell, so the two do not fight over the same box. */
.jw-account .woocommerce-MyAccount-content .jw-account-points { margin-block-start: 0; }

/* =========================================================================
   WOOCOMMERCE'S OWN TABS

   Orders, downloads, addresses, payment methods, account details and the
   order-detail view are rendered by WooCommerce's templates and are NOT
   overridden — rewriting them is how a store loses the things other plugins
   hook into them. They are dressed here instead, from the same tokens as the
   rest of the page, so the club tabs and the transactional ones read as one
   design.

   Scoped to .woocommerce-MyAccount-content, so nothing here can reach the cart,
   the checkout, or a shortcode someone dropped on another page.
   ========================================================================= */

body.jw-account .woocommerce-MyAccount-content {
	color: var(--jwac-ink);
	font-size: 14.5px;
	line-height: 1.6;
}

body.jw-account .woocommerce-MyAccount-content > p:first-child { margin-block-start: 0; }

body.jw-account .woocommerce-MyAccount-content h2,
body.jw-account .woocommerce-MyAccount-content h3 {
	margin: 0 0 14px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--jwac-ink) !important;
}

body.jw-account .woocommerce-MyAccount-content legend {
	margin: 24px 0 10px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--jwac-ink);
}

body.jw-account .woocommerce-MyAccount-content fieldset { margin: 0; padding: 0; border: 0; }

/* ------------------------------------------------------------------ tables */

body.jw-account .woocommerce-MyAccount-content table.shop_table,
body.jw-account .woocommerce-MyAccount-content table.woocommerce-orders-table,
body.jw-account .woocommerce-MyAccount-content table.woocommerce-table {
	inline-size: 100%;
	margin: 0 0 20px !important;
	border: 1px solid var(--jwac-line) !important;
	border-radius: var(--jwac-radius) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: var(--jwac-surface) !important;
	box-shadow: var(--jwac-shadow);
	overflow: hidden;
	font-size: 14px;
}

body.jw-account .woocommerce-MyAccount-content table.shop_table th,
body.jw-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 14px 16px !important;
	border: 0 !important;
	border-block-end: 1px solid var(--jwac-line-soft) !important;
	text-align: start !important;
	vertical-align: middle !important;
	background: none !important;
}

body.jw-account .woocommerce-MyAccount-content table.shop_table thead th {
	background: var(--jwac-tint) !important;
	color: var(--jwac-ink-soft) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	white-space: nowrap;
}

body.jw-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-block-end: 0 !important; }
body.jw-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td { background: var(--jwac-tint) !important; }

body.jw-account .woocommerce-MyAccount-content table.shop_table tfoot th,
body.jw-account .woocommerce-MyAccount-content table.shop_table tfoot td {
	border-block-start: 1px solid var(--jwac-line) !important;
	font-weight: 700 !important;
}

body.jw-account .woocommerce-MyAccount-content table.shop_table a:not(.button) {
	color: var(--jwac-ink) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
body.jw-account .woocommerce-MyAccount-content table.shop_table a:not(.button):hover { text-decoration: underline !important; }

/* The order number is the row's identity. */
body.jw-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a { font-weight: 700 !important; }

/* WooCommerce wraps the status in <mark>, which browsers paint yellow. */
body.jw-account .woocommerce-MyAccount-content mark {
	background: none !important;
	color: inherit !important;
}
body.jw-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status { color: var(--jwac-ink-soft) !important; }

/* ----------------------------------------------------------------- buttons */

body.jw-account .woocommerce-MyAccount-content .button,
body.jw-account .woocommerce-MyAccount-content .woocommerce-Button,
body.jw-account .woocommerce-MyAccount-content button[type="submit"],
body.jw-account .woocommerce-MyAccount-content input[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-block-size: 42px !important;
	inline-size: auto !important;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 1px solid var(--jwac-line) !important;
	border-radius: calc(var(--jwac-radius) - 5px) !important;
	background: var(--jwac-surface) !important;
	color: var(--jwac-ink) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: border-color .15s ease, background-color .15s ease;
}

body.jw-account .woocommerce-MyAccount-content .button:hover,
body.jw-account .woocommerce-MyAccount-content .woocommerce-Button:hover {
	border-color: var(--jwac-field-line-hover) !important;
	background: var(--jwac-tint) !important;
}

/* The one control on a form that commits is filled, so it is obvious. */
body.jw-account .woocommerce-MyAccount-content button[type="submit"],
body.jw-account .woocommerce-MyAccount-content input[type="submit"],
body.jw-account .woocommerce-MyAccount-content .button.woocommerce-Button--pay {
	border-color: var(--jwac-primary) !important;
	background: var(--jwac-primary) !important;
	color: var(--jwac-on-primary) !important;
}
body.jw-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.jw-account .woocommerce-MyAccount-content input[type="submit"]:hover { filter: brightness(1.12); }

/* Cancelling is not a primary action, whatever the markup calls it. */
body.jw-account .woocommerce-MyAccount-content .woocommerce-button--cancel,
body.jw-account .woocommerce-MyAccount-content .button.cancel {
	border-color: var(--jwac-line) !important;
	background: var(--jwac-surface) !important;
	color: var(--jwac-ink-soft) !important;
}

body.jw-account .woocommerce-MyAccount-content .button:focus-visible,
body.jw-account .woocommerce-MyAccount-content button:focus-visible {
	outline: 2px solid var(--jwac-accent) !important;
	outline-offset: 2px !important;
}

/* ------------------------------------------------------------------- forms */

body.jw-account .woocommerce-MyAccount-content .woocommerce-form-row,
body.jw-account .woocommerce-MyAccount-content .form-row {
	display: block;
	inline-size: auto !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	float: none !important;
}

body.jw-account .woocommerce-MyAccount-content .form-row label,
body.jw-account .woocommerce-MyAccount-content .woocommerce-form-row label {
	display: block !important;
	margin: 0 0 7px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--jwac-ink-soft) !important;
}

body.jw-account .woocommerce-MyAccount-content input[type="text"],
body.jw-account .woocommerce-MyAccount-content input[type="email"],
body.jw-account .woocommerce-MyAccount-content input[type="tel"],
body.jw-account .woocommerce-MyAccount-content input[type="password"],
body.jw-account .woocommerce-MyAccount-content input[type="number"],
body.jw-account .woocommerce-MyAccount-content select,
body.jw-account .woocommerce-MyAccount-content textarea {
	display: block !important;
	inline-size: 100% !important;
	max-inline-size: 460px !important;
	min-block-size: 46px !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	border: 1px solid var(--jwac-field-line) !important;
	border-radius: calc(var(--jwac-radius) - 6px) !important;
	background: var(--jwac-surface) !important;
	color: var(--jwac-ink) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	box-shadow: 0 1px 1px rgba(16, 24, 40, .04) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.jw-account .woocommerce-MyAccount-content textarea { min-block-size: 110px !important; }

body.jw-account .woocommerce-MyAccount-content input:focus,
body.jw-account .woocommerce-MyAccount-content select:focus,
body.jw-account .woocommerce-MyAccount-content textarea:focus {
	outline: none !important;
	border-color: var(--jwac-ink) !important;
	box-shadow: 0 0 0 3px rgba(26, 28, 30, .10) !important;
}

body.jw-account .woocommerce-MyAccount-content .required {
	color: var(--jwac-danger) !important;
	border: 0 !important;
	text-decoration: none !important;
}

body.jw-account .woocommerce-MyAccount-content em { font-size: 12.5px; color: var(--jwac-ink-faint); font-style: normal; }

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

body.jw-account .woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 0 !important;
}

body.jw-account .woocommerce-MyAccount-content .woocommerce-Address {
	inline-size: auto !important;
	float: none !important;
	padding: 18px;
	border: 1px solid var(--jwac-line);
	border-radius: var(--jwac-radius);
	background: var(--jwac-surface);
	box-shadow: var(--jwac-shadow);
}

body.jw-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-block-end: 10px;
}

body.jw-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.jw-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0 !important; font-size: 15px !important; }
body.jw-account .woocommerce-MyAccount-content .woocommerce-Address address { font-style: normal; color: var(--jwac-ink-soft); line-height: 1.7; }

/* ----------------------------------------------------------------- notices */

body.jw-account .woocommerce-MyAccount-content .woocommerce-message,
body.jw-account .woocommerce-MyAccount-content .woocommerce-info,
body.jw-account .woocommerce-MyAccount-content .woocommerce-error,
body.jw-account .woocommerce-MyAccount-content .woocommerce-notice {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px !important;
	padding: 14px 16px !important;
	border: 1px solid var(--jwac-line) !important;
	border-radius: calc(var(--jwac-radius) - 4px) !important;
	background: var(--jwac-tint) !important;
	color: var(--jwac-ink) !important;
	font-size: 14px !important;
	list-style: none !important;
}

/* WooCommerce's ::before glyph comes from an icon font the theme may not load,
   and lands as a stray square when it does not. */
body.jw-account .woocommerce-MyAccount-content .woocommerce-message::before,
body.jw-account .woocommerce-MyAccount-content .woocommerce-info::before,
body.jw-account .woocommerce-MyAccount-content .woocommerce-error::before { display: none !important; }

body.jw-account .woocommerce-MyAccount-content .woocommerce-message { background: #e9f7ef !important; border-color: #b7e4c7 !important; }
body.jw-account .woocommerce-MyAccount-content .woocommerce-error { background: #fdecea !important; border-color: #f5c2bd !important; }
body.jw-account .woocommerce-MyAccount-content .woocommerce-message .button,
body.jw-account .woocommerce-MyAccount-content .woocommerce-info .button { margin-inline-start: auto !important; }

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

body.jw-account .woocommerce-MyAccount-content .woocommerce-pagination { margin: 0 0 20px; }
body.jw-account .woocommerce-MyAccount-content .woocommerce-pagination .button {
	min-block-size: 38px !important;
	margin-inline-end: 8px !important;
}

/* ---------------------------------------------------- order detail screens */

body.jw-account .woocommerce-MyAccount-content .woocommerce-order-details,
body.jw-account .woocommerce-MyAccount-content .woocommerce-customer-details { margin-block-end: 22px; }

body.jw-account .woocommerce-MyAccount-content .woocommerce-columns {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

body.jw-account .woocommerce-MyAccount-content .woocommerce-column {
	inline-size: auto !important;
	float: none !important;
	padding: 18px;
	border: 1px solid var(--jwac-line);
	border-radius: var(--jwac-radius);
	background: var(--jwac-surface);
	box-shadow: var(--jwac-shadow);
}

body.jw-account .woocommerce-MyAccount-content .woocommerce-column address { font-style: normal; color: var(--jwac-ink-soft); line-height: 1.7; }

/* ------------------------------------------------------- tables on a phone */

/* WooCommerce stamps every cell with its column heading as data-title, which is
   what makes a real card layout possible instead of a squeezed table. */
@media (max-width: 700px) {
	body.jw-account .woocommerce-MyAccount-content table.shop_table thead { display: none !important; }

	body.jw-account .woocommerce-MyAccount-content table.shop_table tbody tr {
		display: block !important;
		padding: 6px 0;
		border-block-end: 1px solid var(--jwac-line) !important;
	}
	body.jw-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child { border-block-end: 0 !important; }

	body.jw-account .woocommerce-MyAccount-content table.shop_table tbody td {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 16px !important;
		border: 0 !important;
		text-align: start !important;
	}

	body.jw-account .woocommerce-MyAccount-content table.shop_table tbody td::before {
		content: attr(data-title);
		flex: none;
		font-size: 12.5px;
		font-weight: 700;
		color: var(--jwac-ink-soft);
	}

	body.jw-account .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions { justify-content: flex-start; }
	body.jw-account .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions::before { display: none; }

	body.jw-account .woocommerce-MyAccount-content input[type="text"],
	body.jw-account .woocommerce-MyAccount-content input[type="email"],
	body.jw-account .woocommerce-MyAccount-content input[type="tel"],
	body.jw-account .woocommerce-MyAccount-content input[type="password"],
	body.jw-account .woocommerce-MyAccount-content select,
	body.jw-account .woocommerce-MyAccount-content textarea { max-inline-size: none !important; }
}