/* =========================================================================
   BuyTides — My Account
   Skin for /my-account/ and every endpoint hanging off it. Paired with
   inc/account.php and the woocommerce/myaccount/*.php template overrides.
   ========================================================================= */

.bt-acct {
	--bt-a-navy: #2b3754;
	--bt-a-navy-hover: #12406c;
	--bt-a-navy-deep: #082238;
	--bt-a-cyan: #61ddeb;
	--bt-a-cyan-hover: #3ecfe0;
	--bt-a-cyan-pale: #9eedf6;
	--bt-a-teal: #1b7fa8;
	--bt-a-active-bg: #eaf9fc;
	--bt-a-active-fg: #12657f;
	--bt-a-hover-bg: #eaf7fb;
	--bt-a-line: #dde7ee;
	--bt-a-line-soft: #eef2f4;
	--bt-a-muted: #4b6479;
	--bt-a-faint: #7c93a3;
	--bt-a-page: #f4f7f9;
	--bt-a-white: #fff;

	--bt-a-radius: 16px;
	--bt-a-radius-sm: 11px;
	--bt-a-wrap: 1240px;

	--bt-a-sans: "Inter", system-ui, -apple-system, sans-serif;
	--bt-a-display: "Outfit", "Inter", system-ui, sans-serif;

	font-family: var(--bt-a-sans);
	color: var(--bt-a-navy);

	/* The comp is built on a plain 16px body with the default line-height. The
	   theme hands this wrapper a fluid 21.8px and 1.5, which inflates every
	   padded box — nav items, stat tiles, table rows — well past the design.
	   Pinning both here restores the comp's rhythm; prose sets its own below. */
	font-size: 16px;
	line-height: normal;
}

.bt-acct *,
.bt-acct *::before,
.bt-acct *::after {
	box-sizing: border-box;
}

.bt-acct p {
	margin: 0;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Page shell
   The account page renders inside Twenty Twenty-Five's constrained layout,
   which caps the content at the theme's content width and adds global side
   padding. The hero band is full-bleed, so both are neutralised here — on the
   account route only, via the body class Woo already sets.
   ---------------------------------------------------------------------- */

body.woocommerce-account .wp-block-post-title,
body.woocommerce-account .entry-content > .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* The account page is edge to edge: the hero band and the body tint run the
   full width and the gutters come from .bt-acct__wrap instead. The theme's
   global padding and the negative margins its alignfull wrappers use to escape
   that padding both have to go, or they compound into a horizontal overflow. */
body.woocommerce-account main.wp-block-group,
body.woocommerce-account main > .wp-block-group,
body.woocommerce-account .entry-content {
	max-width: none;
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}

body.woocommerce-account .entry-content > .woocommerce,
body.woocommerce-account .entry-content > .wp-block-shortcode {
	max-width: none;
	width: 100%;
	margin: 0;
}

body.woocommerce-account .entry-content > * {
	margin-block: 0;
}

/* The hero band sits flush under the site chrome: the block theme's own top
   spacing on main and on the content group would otherwise leave a white strip
   between the marquee and the navy. */
body.woocommerce-account main.wp-block-group {
	/* The theme sets this with the logical margin-block-start from its global
	   styles, which land after this file in the cascade — hence !important. */
	margin-block-start: 0 !important;
}

body.woocommerce-account main > .wp-block-group {
	padding-block-start: 0 !important;
}

/* Same story at the foot of the page: the content group carries 70px of bottom
   padding, which sits below the body tint and lets the page's own background
   (#eef2f4) show through as a grey band above the footer. The tint runs to the
   footer instead - .bt-acct__body supplies the closing space itself. */
body.woocommerce-account main > .wp-block-group {
	padding-block-end: 0 !important;
}

body.woocommerce-account .entry-content {
	margin-block-start: 0 !important;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.bt-acct__hero {
	background: var(--bt-a-navy);
	background-image: radial-gradient(110% 90% at 92% 0%, #17587e 0%, rgba(43, 55, 84, 0) 62%);
	color: var(--bt-a-white);
}

.bt-acct__wrap {
	max-width: var(--bt-a-wrap);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

.bt-acct__hero-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	padding-block: clamp(34px, 4vw, 56px);
}

.bt-acct__crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.6);
}

.bt-acct__crumbs a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.bt-acct__crumbs a:hover {
	color: var(--bt-a-white);
}

.bt-acct__crumbs [aria-current] {
	color: var(--bt-a-cyan-pale);
}

/* Element + class: the generic h1–h3 and p resets further down would otherwise
   win on equal specificity and flatten the hero's own margins and leading. */
.bt-acct h1.bt-acct__title {
	font-family: var(--bt-a-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	margin: 14px 0 10px;
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.05;
	color: var(--bt-a-white);
}

.bt-acct p.bt-acct__lede {
	font-size: 16.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
	max-width: 540px;
	margin: 0;
}

.bt-acct__id {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.07);
}

.bt-acct__initials {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--bt-a-cyan);
	color: var(--bt-a-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bt-a-display);
	font-size: 19px;
	font-weight: 600;
}

.bt-acct__id-lines {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bt-acct__id-name {
	font-family: var(--bt-a-display);
	font-size: 16.5px;
	font-weight: 600;
}

.bt-acct__id-meta {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.62);
}

.bt-acct__id-ref {
	font-size: 13px;
	color: var(--bt-a-cyan-pale);
}

/* -------------------------------------------------------------------------
   Body + shell
   ---------------------------------------------------------------------- */

/* 200px of extra height, split evenly above and below so the shell sits nearer
   the vertical middle of the page rather than riding up against the hero. The
   clamps stay: they are the responsive rhythm, and the 100px is added on top of
   whatever they resolve to at the current viewport. */
.bt-acct__body {
	background: var(--bt-a-page);
	padding-block-start: calc(clamp(36px, 4.5vw, 64px) + 100px);
	padding-block-end: calc(clamp(56px, 7vw, 96px) + 100px);
	padding-inline: 0;
}

.bt-acct__shell {
	display: grid;
	grid-template-columns: 268px 1fr;
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}

.bt-acct__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* WooCommerce's own stylesheet floats the two columns and sizes them at 30% /
   68%, which collapses both inside the grid above. */
.bt-acct .woocommerce-MyAccount-navigation,
.bt-acct .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Panels
   ---------------------------------------------------------------------- */

.bt-acct__panel {
	border: 1.5px solid var(--bt-a-line);
	border-radius: var(--bt-a-radius);
	background: var(--bt-a-white);
}

.bt-acct__panel--pad {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bt-acct h1,
.bt-acct h2,
.bt-acct h3 {
	font-family: var(--bt-a-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	margin: 0;
}

.bt-acct__panel h2 {
	font-size: 21px;
}

.bt-acct__panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 24px 18px;
}

.bt-acct__panel-head h2 {
	font-size: 22px;
}

.bt-acct__link {
	font-family: var(--bt-a-display);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bt-a-teal);
	text-decoration: none;
}

.bt-acct__link:hover {
	color: var(--bt-a-navy);
}

.bt-acct__note {
	font-size: 13px;
	line-height: 1.6;
	color: var(--bt-a-faint);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------------- */

.bt-acct__nav {
	border: 1.5px solid var(--bt-a-line);
	border-radius: var(--bt-a-radius);
	background: var(--bt-a-white);
	padding: 14px;
	position: sticky;
	top: 96px;
}

/* woocommerce-blocktheme.css styles this list at .woocommerce-account
   .woocommerce-MyAccount-navigation …, which outranks a single class here: 1em
   of padding per row, 2em under the list, and an underline on the active tab.
   All three are scoped up so the comp's 46px rows and clean pills survive. */
body.woocommerce-account .bt-acct__nav ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-account .bt-acct__nav li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.woocommerce-account .bt-acct__nav li.is-active a {
	text-decoration: none;
}

/* No ring on a mouse click — the active pill already says where you are.
   Keyboard focus keeps a visible target. */
.bt-acct__nav a:focus,
.bt-acct__logout a:focus {
	outline: none;
	box-shadow: none;
}

.bt-acct__nav a:focus-visible,
.bt-acct__logout a:focus-visible {
	outline: 2px solid var(--bt-a-cyan);
	outline-offset: 2px;
}

.bt-acct__nav a,
.bt-acct__logout a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-radius: var(--bt-a-radius-sm);
	font-family: var(--bt-a-display);
	font-size: 15.5px;
	font-weight: 500;
	color: var(--bt-a-navy);
	text-decoration: none;
	transition: background 0.14s ease, color 0.14s ease;
}

.bt-acct__nav a:hover,
.bt-acct__logout a:hover {
	background: var(--bt-a-hover-bg);
	color: var(--bt-a-teal);
}

.bt-acct__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bt-a-line);
}

.bt-acct__nav .is-active > a {
	background: var(--bt-a-active-bg);
	color: var(--bt-a-active-fg);
	font-weight: 600;
}

.bt-acct__nav .is-active .bt-acct__dot {
	background: var(--bt-a-cyan);
}

.bt-acct__badge {
	margin-left: auto;
	font-family: var(--bt-a-display);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bt-a-faint);
	font-variant-numeric: tabular-nums;
}

.bt-acct__logout {
	margin: 12px 4px 4px;
	padding-top: 14px;
	border-top: 1px solid var(--bt-a-line);
}

.bt-acct__logout a {
	color: var(--bt-a-muted);
}

.bt-acct__nav-toggle {
	display: none;
}

/* -------------------------------------------------------------------------
   Stat tiles
   ---------------------------------------------------------------------- */

.bt-acct__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}

.bt-acct__stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
}

.bt-acct__stat-label {
	font-family: var(--bt-a-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bt-a-faint);
}

.bt-acct__stat-value {
	font-family: var(--bt-a-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--bt-a-navy);
	font-variant-numeric: tabular-nums;
}

.bt-acct__stat-note {
	font-size: 13.5px;
	color: var(--bt-a-muted);
}

/* -------------------------------------------------------------------------
   Tables — the dashboard summary table and every Woo table inside an endpoint
   ---------------------------------------------------------------------- */

.bt-acct__scroll {
	overflow-x: auto;
	overflow-y: hidden;
}

.bt-acct table,
.bt-acct .woocommerce-orders-table,
.bt-acct .woocommerce-MyAccount-downloads,
.bt-acct .woocommerce-MyAccount-paymentMethods,
.bt-acct .shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 0;
}

.bt-acct th,
.bt-acct td {
	padding: 16px 18px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--bt-a-line);
	font-size: 14.5px;
	line-height: normal;
	vertical-align: top;
	background: transparent;
}

.bt-acct th {
	font-family: var(--bt-a-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bt-a-faint);
	white-space: nowrap;
}

.bt-acct tbody tr:last-child td {
	border-bottom: 0;
}

.bt-acct__cell-id {
	font-family: var(--bt-a-display);
	font-weight: 600;
	color: var(--bt-a-navy);
}

.bt-acct__cell-muted {
	color: var(--bt-a-muted);
}

.bt-acct__cell-total,
.bt-acct td.woocommerce-orders-table__cell-order-total {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--bt-a-navy);
}

.bt-acct__cell-action {
	text-align: right;
	white-space: nowrap;
}

.bt-acct__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--bt-a-line-soft);
	color: var(--bt-a-muted);
	font-family: var(--bt-a-display);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.bt-acct__chip--completed { background: #e7f7ee; color: #166f45; }
.bt-acct__chip--processing,
.bt-acct__chip--shipped { background: #eaf9fc; color: #12657f; }
.bt-acct__chip--cancelled,
.bt-acct__chip--failed,
.bt-acct__chip--refunded { background: #fbecec; color: #8c2b2b; }
.bt-acct__chip--on-hold,
.bt-acct__chip--pending { background: #fdf3e3; color: #8a5a0f; }

/* -------------------------------------------------------------------------
   Rows (Prescription & referral, Addresses)
   ---------------------------------------------------------------------- */

.bt-acct__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bt-a-line-soft);
}

.bt-acct__row-label {
	font-size: 14.5px;
	color: var(--bt-a-muted);
}

.bt-acct__row-value {
	font-family: var(--bt-a-display);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bt-a-navy);
	text-align: right;
}

.bt-acct__row-value--good {
	color: #166f45;
}

.bt-acct__pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.bt-acct__addr {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.bt-acct__addr-kind {
	font-family: var(--bt-a-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bt-a-faint);
}

.bt-acct__addr address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bt-a-navy);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Buttons — ours and every Woo button inside the account area
   ---------------------------------------------------------------------- */

.bt-acct .bt-acct__btn,
.bt-acct .woocommerce-Button,
.bt-acct .button,
.bt-acct button[type="submit"],
.bt-acct input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--bt-a-navy);
	color: var(--bt-a-white);
	font-family: var(--bt-a-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
	width: auto;
}

.bt-acct .bt-acct__btn:hover,
.bt-acct .woocommerce-Button:hover,
.bt-acct .button:hover,
.bt-acct button[type="submit"]:hover,
.bt-acct input[type="submit"]:hover {
	background: var(--bt-a-navy-hover);
	color: var(--bt-a-white);
}

.bt-acct .bt-acct__btn--cyan {
	background: var(--bt-a-cyan);
	color: var(--bt-a-navy);
}

.bt-acct .bt-acct__btn--cyan:hover {
	background: var(--bt-a-cyan-hover);
	color: var(--bt-a-navy);
}

.bt-acct .bt-acct__btn--ghost {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	color: var(--bt-a-white);
}

.bt-acct .bt-acct__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
}

.bt-acct__btn--block {
	margin-top: auto;
}

/* -------------------------------------------------------------------------
   Support CTA
   ---------------------------------------------------------------------- */

.bt-acct__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px;
	background: var(--bt-a-navy);
	border-color: var(--bt-a-navy);
	color: var(--bt-a-white);
}

.bt-acct__cta h2 {
	color: var(--bt-a-white);
}

.bt-acct__cta-copy {
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-width: 520px;
}

.bt-acct__cta p {
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}

.bt-acct__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* -------------------------------------------------------------------------
   Endpoint content — Woo's own markup, wrapped in a panel
   ---------------------------------------------------------------------- */

/* Woo's content div is the comp's right-hand column: the 20px rhythm between
   the stat row, the orders panel, the pair and the support card lives here,
   not on .bt-acct__main, because Woo prints this wrapper inside it. */
.bt-acct .woocommerce-MyAccount-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* An empty notices wrapper would otherwise eat one gap. */
.bt-acct .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty {
	display: none;
}

.bt-acct__endpoint {
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bt-acct__endpoint > h2,
.bt-acct__endpoint > h3 {
	font-size: 22px;
}

.bt-acct__endpoint p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bt-a-muted);
	margin: 0;
}

.bt-acct__endpoint a:not(.button):not(.bt-acct__btn) {
	color: var(--bt-a-teal);
	text-decoration: none;
}

.bt-acct__endpoint a:not(.button):not(.bt-acct__btn):hover {
	color: var(--bt-a-navy);
	text-decoration: underline;
}

/* Tables inside an endpoint sit flush to the panel edge. */
.bt-acct__endpoint .shop_table,
.bt-acct__endpoint .woocommerce-orders-table {
	margin-inline: -26px;
	width: calc(100% + 52px);
}

.bt-acct__endpoint .shop_table th:first-child,
.bt-acct__endpoint .shop_table td:first-child,
.bt-acct__endpoint .woocommerce-orders-table th:first-child,
.bt-acct__endpoint .woocommerce-orders-table td:first-child {
	padding-left: 26px;
}

.bt-acct__endpoint .shop_table th:last-child,
.bt-acct__endpoint .shop_table td:last-child,
.bt-acct__endpoint .woocommerce-orders-table th:last-child,
.bt-acct__endpoint .woocommerce-orders-table td:last-child {
	padding-right: 26px;
}

/* Forms: edit-account, edit-address, lost-password. */
.bt-acct .woocommerce-form-row,
.bt-acct .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 18px;
	padding: 0;
}

.bt-acct label {
	font-family: var(--bt-a-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bt-a-faint);
}

.bt-acct .required {
	color: #8c2b2b;
	text-decoration: none;
}

.bt-acct input[type="text"],
.bt-acct input[type="email"],
.bt-acct input[type="tel"],
.bt-acct input[type="password"],
.bt-acct input[type="date"],
.bt-acct input[type="number"],
.bt-acct select,
.bt-acct textarea,
.bt-acct .select2-container .select2-selection--single {
	width: 100%;
	/* 54px matches the .lg-field control on the login and register screens, and
	   the .bt-acct__field wrappers on order tracking and the address forms. */
	height: 54px;
	padding: 0 14px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	background: var(--bt-a-white);
	font-family: var(--bt-a-sans);
	font-size: 15px;
	color: var(--bt-a-navy);
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.bt-acct textarea {
	height: auto;
	padding: 12px 14px;
	min-height: 110px;
}

.bt-acct input:focus,
.bt-acct select:focus,
.bt-acct textarea:focus {
	outline: none;
	border-color: var(--bt-a-cyan);
	box-shadow: 0 0 0 3px rgba(97, 221, 235, 0.28);
}

.bt-acct fieldset {
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	padding: 20px;
	margin: 0 0 18px;
}

.bt-acct legend {
	font-family: var(--bt-a-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--bt-a-navy);
	padding: 0 8px;
}

/* Woo lays the two address cards out with its own float grid (.col2-set with
   .col-1 / .col-2), which collapses them into a stack of slivers here. */
body.woocommerce-account .bt-acct .woocommerce-Addresses,
body.woocommerce-account .bt-acct .col2-set,
body.woocommerce-account .bt-acct .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	width: auto;
	margin: 0;
}

.bt-acct .woocommerce-Addresses .col-1,
.bt-acct .woocommerce-Addresses .col-2,
.bt-acct .col2-set > div,
.bt-acct .u-columns > div {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Woo clears those floats with ::before / ::after on the same wrapper. As a
   grid container it turns both pseudo-elements into grid items, which pushes
   the two real cards into the wrong cells. */
.bt-acct .woocommerce-Addresses::before,
.bt-acct .woocommerce-Addresses::after,
.bt-acct .col2-set::before,
.bt-acct .col2-set::after,
.bt-acct .u-columns::before,
.bt-acct .u-columns::after {
	display: none;
}

body.woocommerce-account .bt-acct .woocommerce-Address {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	padding: 22px;
	height: 100%;
}

body.woocommerce-account .bt-acct .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* Woo's clearfix again: as flex items the pseudo-elements sit before the
   heading and shove it toward the middle of the card. */
body.woocommerce-account .bt-acct .woocommerce-Address-title::before,
body.woocommerce-account .bt-acct .woocommerce-Address-title::after {
	display: none;
}

/* The heading reads as the card's label, matching the dashboard's
   Shipping / Billing kickers rather than a second-level page heading. */
body.woocommerce-account .bt-acct .woocommerce-Address-title h2,
body.woocommerce-account .bt-acct .woocommerce-Address-title h3 {
	font-family: var(--bt-a-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bt-a-faint);
	line-height: normal;
	margin: 0;
}

body.woocommerce-account .bt-acct .woocommerce-Address-title .edit {
	font-family: var(--bt-a-display);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bt-a-teal);
	white-space: nowrap;
	margin: 0;
}

body.woocommerce-account .bt-acct .woocommerce-Address address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bt-a-navy);
	margin: 0;
}

/* Nothing to show yet — Woo prints the notice as body text in the card. */
body.woocommerce-account .bt-acct .woocommerce-Address > p {
	font-size: 14.5px;
	color: var(--bt-a-muted);
}

/* Notices. */
.bt-acct .woocommerce-message,
.bt-acct .woocommerce-info,
.bt-acct .woocommerce-error,
.bt-acct .woocommerce-notice {
	list-style: none;
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	background: var(--bt-a-white);
	font-size: 14.5px;
	color: var(--bt-a-navy);
}

.bt-acct .woocommerce-info {
	border-color: #cfeaf3;
	background: var(--bt-a-active-bg);
	color: var(--bt-a-active-fg);
}

.bt-acct .woocommerce-error {
	border-color: #f0d2d2;
	background: #fbecec;
	color: #8c2b2b;
}

.bt-acct .woocommerce-message {
	border-color: #cbe9d8;
	background: #e7f7ee;
	color: #166f45;
}

.bt-acct .woocommerce-pagination ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	border: 0;
}

.bt-acct .woocommerce-pagination a,
.bt-acct .woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 10px;
	font-family: var(--bt-a-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--bt-a-navy);
	text-decoration: none;
	background: var(--bt-a-white);
}

.bt-acct .woocommerce-pagination .current {
	background: var(--bt-a-active-bg);
	border-color: var(--bt-a-cyan);
	color: var(--bt-a-active-fg);
}

/* -------------------------------------------------------------------------
   Loyalty plugin (Revo) — keep its markup, borrow our surface
   ---------------------------------------------------------------------- */

.bt-acct .revolr-card-points {
	border: 1.5px solid var(--bt-a-line);
	border-radius: var(--bt-a-radius);
	overflow: hidden;
	max-width: 340px;
}

/* The plugin prints an empty membership-card filename when no card image is
   set, which resolves to a 404 and renders as a broken image. */
.bt-acct .revolr-card-points img[src$="/membership-card/.webp"],
.bt-acct .revolr-card-points img[src=""] {
	display: none;
}

.bt-acct .revolr-text-primary {
	color: var(--bt-a-teal);
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 960px) {
	.bt-acct__shell {
		grid-template-columns: 1fr;
	}

	.bt-acct__nav {
		position: static;
	}

	body.woocommerce-account .bt-acct__nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px 10px;
	}

	.bt-acct__nav a {
		padding: 10px 14px;
		font-size: 14.5px;
	}

	.bt-acct__badge {
		margin-left: 6px;
	}
}

@media (max-width: 700px) {
	.bt-acct__hero-inner {
		align-items: flex-start;
	}

	.bt-acct__id {
		width: 100%;
	}

	.bt-acct__endpoint {
		padding: 20px;
	}

	.bt-acct__endpoint .shop_table,
	.bt-acct__endpoint .woocommerce-orders-table {
		margin-inline: -20px;
		width: calc(100% + 40px);
	}

	.bt-acct__endpoint .shop_table th:first-child,
	.bt-acct__endpoint .shop_table td:first-child,
	.bt-acct__endpoint .woocommerce-orders-table th:first-child,
	.bt-acct__endpoint .woocommerce-orders-table td:first-child {
		padding-left: 20px;
	}

	.bt-acct__endpoint .shop_table th:last-child,
	.bt-acct__endpoint .shop_table td:last-child,
	.bt-acct__endpoint .woocommerce-orders-table th:last-child,
	.bt-acct__endpoint .woocommerce-orders-table td:last-child {
		padding-right: 20px;
	}
}

/* Refer a friend: the link field and its Copy button share a row. The panel is
   full width, so the row is capped rather than letting the field run the whole
   way across. */
.bt-acct__share {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	max-width: 560px;
}

.bt-acct .bt-acct__share-link {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	font-size: 14px;
}

.bt-acct__share-copy {
	flex: 0 0 auto;
}

.bt-acct__share-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Outline button for white panels. --ghost is white-on-transparent and only
   reads inside the navy .bt-acct__cta. */
.bt-acct__btn--line {
	background: transparent;
	border: 1.5px solid var(--bt-a-line);
	color: var(--bt-a-navy);
}

.bt-acct__btn--line:hover {
	background: rgba(11, 31, 59, 0.06);
	color: var(--bt-a-navy);
}

/* -------------------------------------------------------------------------
   Rewards
   /my-account/rewards/, rendered by inc/rewards.php over the loyalty plugin's
   data. The .lfw_* class names in that markup are the plugin's JavaScript
   contract and drag its own stylesheet along with them, so every rule here is
   deliberately one step more specific than the plugin's: its #id modal rules
   are met with #id.bt-rw__modal, its .lfw_tab.active with a longer chain.
   ---------------------------------------------------------------------- */

.bt-rw {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Balance */

.bt-rw__balance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 22px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: var(--bt-a-radius);
	background: var(--bt-a-white);
}

.bt-rw__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: var(--bt-a-cyan-pale);
	color: var(--bt-a-navy);
}

.bt-rw__star svg {
	width: 26px;
	height: 26px;
}

.bt-rw__balance-lines {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-right: auto;
}

.bt-rw__balance-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.bt-rw__rate {
	font-size: 13px;
	color: var(--bt-a-faint);
	font-variant-numeric: tabular-nums;
}

/* The convert control is a button here, but it keeps the plugin's
   .lfw_summary_card hook - frontend-script.js opens the modal off that class,
   and the plugin's own rule turns anything wearing it into a 150px card. */
.bt-acct .bt-rw__balance .lfw_summary_card {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--bt-a-navy);
	color: var(--bt-a-white);
	font-family: var(--bt-a-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.bt-acct .bt-rw__balance .lfw_summary_card:hover {
	background: var(--bt-a-navy-hover);
}

.bt-acct p.bt-rw__short {
	margin: -8px 0 0;
}

/* Tabs */

.bt-rw__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	border-bottom: 1.5px solid var(--bt-a-line);
}

.bt-acct .bt-rw__tabs .bt-rw__tab {
	height: 40px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 10px 10px 0 0;
	background: transparent;
	color: var(--bt-a-muted);
	font-family: var(--bt-a-display);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.bt-acct .bt-rw__tabs .bt-rw__tab:hover {
	background: var(--bt-a-hover-bg);
	color: var(--bt-a-navy);
}

.bt-acct .bt-rw__tabs .bt-rw__tab.active {
	background: var(--bt-a-active-bg);
	color: var(--bt-a-active-fg);
}

/* Panes - the .active class is toggled by the plugin's loyltyLogShowTab(). */

.bt-acct .bt-rw__pane {
	display: none;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.bt-acct .bt-rw__pane.active {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bt-rw__section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bt-acct .bt-rw__section h3 {
	font-size: 17px;
}

.bt-acct .bt-rw__delta {
	font-family: var(--bt-a-display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bt-acct .bt-rw__delta.is-earned {
	color: #166f45;
}

.bt-acct .bt-rw__delta.is-spent {
	color: var(--bt-a-muted);
}

/* Convert-to-coupon modal
   Printed in the footer, outside .bt-acct, so it carries the tokens it uses. */

.bt-rw__modal *,
.bt-rw__modal *::before,
.bt-rw__modal *::after {
	box-sizing: border-box;
}

.bt-rw__modal {
	--bt-a-navy: #2b3754;
	--bt-a-navy-hover: #12406c;
	--bt-a-line: #dde7ee;
	--bt-a-line-soft: #eef2f4;
	--bt-a-muted: #4b6479;
	--bt-a-faint: #7c93a3;
	--bt-a-white: #fff;
	--bt-a-display: "Outfit", "Inter", system-ui, sans-serif;
	--bt-a-sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* The open and close handlers toggle style.display between block and none, so
   the card is centred with margin rather than by making this a flex box. */
#lfw_point_convert_to_coupon_modal.bt-rw__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	padding: 24px;
	overflow-y: auto;
	background: rgba(8, 34, 56, 0.55);
	font-family: var(--bt-a-sans);
	color: var(--bt-a-navy);
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_content {
	width: min(420px, 100%);
	margin: 8vh auto 0;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--bt-a-white);
	box-shadow: 0 24px 60px rgba(8, 34, 56, 0.28);
	animation: none;
}

/* The close control is first in the markup because the plugin's close handler
   walks exactly three parents up from it; order puts it back on the right. */
#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 22px 0;
	color: var(--bt-a-navy);
	text-align: left;
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_header h2 {
	order: 1;
	margin: 0 auto 0 0;
	font-family: var(--bt-a-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.028em;
	color: var(--bt-a-navy);
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_close {
	order: 2;
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--bt-a-line-soft);
	color: var(--bt-a-muted);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_body {
	padding: 16px 22px 24px;
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_convert_to_coupon_form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal label {
	font-family: var(--bt-a-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--bt-a-muted);
}

/* color carries !important because the loyalty plugin pins black on every
   input it can reach - see the note in the cart drawer's stylesheet. */
#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_body input {
	/* flex is reset because the plugin gives this input flex: 1 1 0%, and a zero
	   basis in the column form above collapses it to its content height - the
	   height below is ignored until the basis is auto again. */
	flex: none;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	background: var(--bt-a-white);
	color: var(--bt-a-navy) !important;
	font-family: var(--bt-a-sans);
	font-size: 15px;
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_body input:focus {
	outline: 0;
	border-color: var(--bt-a-navy);
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_body button {
	height: 46px;
	min-width: 0;
	margin: 6px 0 0;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--bt-a-navy);
	color: var(--bt-a-white);
	font-family: var(--bt-a-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_body button:hover {
	background: var(--bt-a-navy-hover);
}

.bt-rw__modal-message {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
}

.bt-rw__modal-message:empty {
	display: none;
}

@media (max-width: 700px) {
	.bt-rw__balance {
		align-items: flex-start;
	}

	.bt-rw__balance-actions {
		align-items: stretch;
		width: 100%;
	}

	.bt-acct .bt-rw__balance .lfw_summary_card {
		width: 100%;
	}

	.bt-rw__rate {
		text-align: center;
	}

	#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_content {
		margin-top: 4vh;
	}
}

/* -------------------------------------------------------------------------
   Block notices
   WooCommerce prints its newer notices as .wc-block-components-notice-banner
   rather than the .woocommerce-info family above, and styles them from the
   block editor's own presets - a 1px accent border, a filled circular icon and
   near-black text. Same palette as the classic notices, restated here.
   ---------------------------------------------------------------------- */

.bt-acct .wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	background: var(--bt-a-white);
	font-family: var(--bt-a-sans);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--bt-a-navy);
}

/* The icon ships as a filled disc in the accent colour; here it is a plain
   glyph in the notice's own text colour. */
.bt-acct .wc-block-components-notice-banner > svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	fill: currentColor;
}

.bt-acct .wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	flex: 1 1 auto;
}

.bt-acct .wc-block-components-notice-banner a {
	color: currentColor;
	font-weight: 600;
}

.bt-acct .wc-block-components-notice-banner.is-info {
	border-color: #cfeaf3;
	background: var(--bt-a-active-bg);
	color: var(--bt-a-active-fg);
}

.bt-acct .wc-block-components-notice-banner.is-success {
	border-color: #cbe9d8;
	background: #e7f7ee;
	color: #166f45;
}

.bt-acct .wc-block-components-notice-banner.is-error {
	border-color: #f0d2d2;
	background: #fbecec;
	color: #8c2b2b;
}

.bt-acct .wc-block-components-notice-banner.is-warning {
	border-color: #f0e0c2;
	background: #fdf4e3;
	color: #8a5a12;
}

/* -------------------------------------------------------------------------
   Orders table actions
   woocommerce-blocktheme.css sets display: block on this cell's link, four
   classes deep, which drops the button's flex centring and stretches it across
   the whole column - the label ends up pinned to the top of a full-width box.
   ---------------------------------------------------------------------- */

body.woocommerce-account .bt-acct .woocommerce-orders-table__cell-order-actions a {
	display: inline-flex;
	width: auto;
}

.bt-acct .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

.bt-acct .woocommerce-orders-table__cell-order-actions a + a {
	margin-left: 8px;
}

/* -------------------------------------------------------------------------
   Order tracking
   The same field control the login and register screens use: the border and
   the cyan focus ring sit on the wrapper, the input inside is borderless, and
   a leading icon names the field. Paired with
   woocommerce/order/form-tracking.php, which supplies the wrapper and icon
   Woo's own template has nowhere to put.
   ---------------------------------------------------------------------- */

.bt-acct__track-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* Woo floats these two rows at 47%; as grid items the floats are inert, but
   the widths are not. */
.bt-acct .bt-acct__track-grid .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	float: none;
	width: auto;
	margin: 0;
}

.bt-acct__field {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 14px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	background: var(--bt-a-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bt-acct__field:focus-within {
	border-color: var(--bt-a-cyan);
	box-shadow: 0 0 0 3px rgba(97, 221, 235, 0.22);
}

.bt-acct__field > svg {
	flex: none;
	color: var(--bt-a-faint);
}

/* One step past the generic .bt-acct input rule, which gives every field its
   own border, height and radius - all of which now live on the wrapper. */
.bt-acct .bt-acct__field input[type="text"],
.bt-acct .bt-acct__field input[type="email"] {
	flex: 1;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 15.5px;
	color: var(--bt-a-navy);
}

.bt-acct .bt-acct__field input:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.bt-acct .bt-acct__field input::placeholder {
	color: #a8bcc7;
}

.bt-acct .bt-acct__track > p.form-row {
	margin: 18px 0 0;
}

@media (max-width: 700px) {
	.bt-acct__track-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Address forms
   The login screen's field control again, this time without a template
   override: woocommerce_form_field() already wraps every control in a
   .woocommerce-input-wrapper, so the border, the cyan focus ring and the icon
   hang off that and the control inside is stripped bare. Icons are background
   images keyed to the row id rather than markup, so a WooCommerce template
   update cannot drop them.
   ---------------------------------------------------------------------- */

.bt-acct .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.bt-acct .woocommerce-address-fields__field-wrapper > .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	float: none;
	width: auto;
	margin: 0;
}

.bt-acct .woocommerce-address-fields__field-wrapper > .form-row-wide {
	grid-column: 1 / -1;
}

.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper {
	display: flex;
	align-items: center;
	height: 54px;
	padding: 0 14px 0 42px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	background-color: var(--bt-a-white);
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 18px 18px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper:focus-within {
	border-color: var(--bt-a-cyan);
	box-shadow: 0 0 0 3px rgba(97, 221, 235, 0.22);
}

/* One step past the generic .bt-acct input rule: the box now belongs to the
   wrapper, so the control itself keeps none of it. */
.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper input,
.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper select,
.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper .select2-container {
	flex: 1;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--bt-a-sans);
	font-size: 15.5px;
	color: var(--bt-a-navy);
}

.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper input:focus,
.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper select:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper input::placeholder {
	color: #a8bcc7;
}

/* Country and state come through select2, which builds its own bordered box
   inside the wrapper. */
.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper .select2-container--default .select2-selection--single {
	height: 51px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper .select2-selection__rendered {
	padding: 0;
	line-height: 51px;
	color: var(--bt-a-navy);
}

.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper .select2-selection__arrow {
	height: 51px;
	right: 0;
}

/* A single allowed country prints as static text rather than a control. */
.bt-acct .woocommerce-address-fields .woocommerce-input-wrapper > strong {
	font-family: var(--bt-a-sans);
	font-size: 15.5px;
	font-weight: 400;
	color: var(--bt-a-navy);
}

@media (max-width: 700px) {
	.bt-acct .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.bt-acct .woocommerce-address-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
	}
}

/* Field icons. Encoded here rather than added to the markup so a WooCommerce
   template update cannot drop them, and so billing and shipping share one
   declaration each. */

.bt-acct #billing_first_name_field .woocommerce-input-wrapper,
.bt-acct #shipping_first_name_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M4.5%2020a7.5%207.5%200%200%201%2015%200%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_last_name_field .woocommerce-input-wrapper,
.bt-acct #shipping_last_name_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M4.5%2020a7.5%207.5%200%200%201%2015%200%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_company_field .woocommerce-input-wrapper,
.bt-acct #shipping_company_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%277.5%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M9%207.5V6a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v1.5%27%2F%3E%3Cpath%20d%3D%27M3%2012.5h18%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_country_field .woocommerce-input-wrapper,
.bt-acct #shipping_country_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M12%203a15%2015%200%200%201%200%2018a15%2015%200%200%201%200-18%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_address_1_field .woocommerce-input-wrapper,
.bt-acct #shipping_address_1_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s7-5.7%207-11a7%207%200%201%200-14%200c0%205.3%207%2011%207%2011z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_address_2_field .woocommerce-input-wrapper,
.bt-acct #shipping_address_2_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%2714%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M9%208.5h2%27%2F%3E%3Cpath%20d%3D%27M13%208.5h2%27%2F%3E%3Cpath%20d%3D%27M9%2012.5h2%27%2F%3E%3Cpath%20d%3D%27M13%2012.5h2%27%2F%3E%3Cpath%20d%3D%27M10.5%2020v-3.5h3V20%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_city_field .woocommerce-input-wrapper,
.bt-acct #shipping_city_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020V9l6-4v15%27%2F%3E%3Cpath%20d%3D%27M10%2020V11l8-3v12%27%2F%3E%3Cpath%20d%3D%27M3%2020h18%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_state_field .woocommerce-input-wrapper,
.bt-acct #shipping_state_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%204L4%206.2v13.6L9%2017.6l6%202.2%205-2.2V4l-5%202.2z%27%2F%3E%3Cpath%20d%3D%27M9%204v13.6%27%2F%3E%3Cpath%20d%3D%27M15%206.2V19.8%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_postcode_field .woocommerce-input-wrapper,
.bt-acct #shipping_postcode_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%209.5h14%27%2F%3E%3Cpath%20d%3D%27M5%2014.5h14%27%2F%3E%3Cpath%20d%3D%27M10.5%204L9%2020%27%2F%3E%3Cpath%20d%3D%27M16.5%204L15%2020%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_phone_field .woocommerce-input-wrapper,
.bt-acct #shipping_phone_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.5h3.1l1.5%204-2.1%201.5a12%2012%200%200%200%206.1%206.1l1.5-2.1%204%201.5v3.1a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.7a2%202%200%200%201%202-2.2z%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct #billing_email_field .woocommerce-input-wrapper,
.bt-acct #shipping_email_field .woocommerce-input-wrapper {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274.5%27%20width%3D%2719%27%20height%3D%2715%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3%206.5l9%206.5%209-6.5%27%2F%3E%3C%2Fsvg%3E");
}

/* -------------------------------------------------------------------------
   SweetAlert dialogs
   The loyalty plugin reports the result of a points conversion through
   SweetAlert2, which ships its own purple-and-grey theme. Version 11 drives
   almost all of it from --swal2-* custom properties, so most of this is a
   token swap set on the body; only type, the button metrics and the icon
   colours need real rules.

   The dialog mounts on <body>, outside .bt-acct, hence the body prefix and the
   repeated --bt-a-* tokens.
   ---------------------------------------------------------------------- */

body.woocommerce-account {
	--swal2-backdrop: rgba(8, 34, 56, 0.1);
	--swal2-background: #fff;
	--swal2-color: #2b3754;
	--swal2-width: 26em;
	--swal2-padding: 26px;
	--swal2-border-radius: 16px;
	--swal2-border: 1.5px solid #dde7ee;
	--swal2-confirm-button-background-color: #2b3754;
	--swal2-confirm-button-color: #fff;
	--swal2-confirm-button-border-radius: 12px;
	--swal2-confirm-button-box-shadow: none;
	--swal2-cancel-button-background-color: #fff;
	--swal2-cancel-button-color: #2b3754;
	--swal2-cancel-button-border-radius: 12px;
	--swal2-outline: 0 0 0 3px rgba(97, 221, 235, 0.35);
}

body.woocommerce-account .swal2-popup {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	box-shadow: 0 24px 60px rgba(8, 34, 56, 0.28);
}

/* The success dialog puts the coupon code in the title, so it has to be able
   to wrap. */
body.woocommerce-account .swal2-title {
	padding: 0 0 6px;
	font-family: "Outfit", "Inter", system-ui, sans-serif;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.028em;
	color: #2b3754;
	overflow-wrap: anywhere;
}

body.woocommerce-account .swal2-html-container {
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4b6479;
}

body.woocommerce-account .swal2-actions {
	margin: 22px 0 0;
}

body.woocommerce-account .swal2-styled.swal2-confirm,
body.woocommerce-account .swal2-styled.swal2-cancel {
	height: 46px;
	margin: 0 5px;
	padding: 0 26px;
	border: 0;
	font-family: "Outfit", "Inter", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

body.woocommerce-account .swal2-styled.swal2-cancel {
	border: 1.5px solid #dde7ee;
}

/* Icons. SweetAlert draws these from bordered boxes and positioned bars, and
   the two "circular line" pieces plus .swal2-success-fix are masks that have
   to stay the same colour as the dialog or the check draws over itself. Its
   own rules are written as div:where(.swal2-icon)..., which carries no
   specificity, so a single class each is enough here. */

body.woocommerce-account .swal2-icon {
	margin: 4px auto 20px;
}

body.woocommerce-account .swal2-icon.swal2-success {
	border-color: #cbe9d8;
	color: #166f45;
}

body.woocommerce-account .swal2-icon.swal2-success .swal2-success-ring {
	border-color: rgba(22, 111, 69, 0.18);
}

body.woocommerce-account .swal2-icon.swal2-success .swal2-success-line-tip,
body.woocommerce-account .swal2-icon.swal2-success .swal2-success-line-long {
	background-color: #166f45;
}

body.woocommerce-account .swal2-icon.swal2-success .swal2-success-circular-line-left,
body.woocommerce-account .swal2-icon.swal2-success .swal2-success-circular-line-right,
body.woocommerce-account .swal2-icon.swal2-success .swal2-success-fix {
	background-color: #fff;
}

body.woocommerce-account .swal2-icon.swal2-error {
	border-color: #f0d2d2;
	color: #8c2b2b;
}

body.woocommerce-account .swal2-icon.swal2-error .swal2-x-mark-line-left,
body.woocommerce-account .swal2-icon.swal2-error .swal2-x-mark-line-right {
	background-color: #8c2b2b;
}

body.woocommerce-account .swal2-icon.swal2-warning {
	border-color: #f0e0c2;
	color: #8a5a12;
}

body.woocommerce-account .swal2-icon.swal2-info,
body.woocommerce-account .swal2-icon.swal2-question {
	border-color: #cfeaf3;
	color: #12657f;
}

/* -------------------------------------------------------------------------
   Account details
   Woo prints this form by hand rather than through woocommerce_form_field(),
   so there is no .woocommerce-input-wrapper to hang an icon on the way the
   address forms do. The icon sits on the control itself instead - same look,
   no template override. The cyan focus ring is the generic .bt-acct input
   rule further up; nothing here needs to restate it.
   ---------------------------------------------------------------------- */

.bt-acct .woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* Woo's float clears become stray grid items. */
.bt-acct .woocommerce-EditAccountForm > .clear {
	display: none;
}

.bt-acct .woocommerce-EditAccountForm > * {
	grid-column: 1 / -1;
}

.bt-acct .woocommerce-EditAccountForm > .form-row-first {
	grid-column: 1;
}

.bt-acct .woocommerce-EditAccountForm > .form-row-last {
	grid-column: 2;
}

.bt-acct .woocommerce-EditAccountForm .form-row,
.bt-acct .woocommerce-EditAccountForm .woocommerce-form-row {
	float: none;
	width: auto;
	margin: 0;
}

.bt-acct .woocommerce-EditAccountForm > p > em,
.bt-acct .woocommerce-EditAccountForm > .form-row span em {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-style: normal;
	color: var(--bt-a-faint);
}

/* Password change and Loyalty Information each read as their own card. A
   legend is pulled out of the fieldset's flow by the browser and painted over
   the border; floating it full width puts it back inside the box, which is
   what lets the card carry a tint. */
.bt-acct .woocommerce-EditAccountForm fieldset {
	margin: 6px 0 0;
	padding: 24px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: var(--bt-a-radius);
	background: var(--bt-a-page);
}

.bt-acct .woocommerce-EditAccountForm fieldset legend {
	float: left;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	font-family: var(--bt-a-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.028em;
	color: var(--bt-a-navy);
}

.bt-acct .woocommerce-EditAccountForm fieldset .form-row + .form-row {
	margin-top: 16px;
}

/* The tinted card would otherwise show through the controls. */
.bt-acct .woocommerce-EditAccountForm fieldset input {
	background-color: var(--bt-a-white);
}

/* Woo's own show/hide control: a button whose ::before is a black SVG baked
   into its stylesheet, so the icon is replaced rather than recoloured. */
.bt-acct .password-input {
	position: relative;
}

.bt-acct .woocommerce-EditAccountForm .show-password-input {
	right: 14px;
	color: var(--bt-a-faint);
}

.bt-acct .woocommerce-EditAccountForm .password-input input[type="password"],
.bt-acct .woocommerce-EditAccountForm .password-input input[type="text"] {
	padding-right: 44px;
}

.bt-acct .woocommerce-EditAccountForm input[type="text"],
.bt-acct .woocommerce-EditAccountForm input[type="email"],
.bt-acct .woocommerce-EditAccountForm input[type="password"],
.bt-acct .woocommerce-EditAccountForm input[type="date"] {
	padding-left: 42px;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 18px 18px;
}

/* Field icons, encoded rather than added to the markup - Woo writes this form
   by hand and a core update would drop anything injected into it. */

.bt-acct .woocommerce-EditAccountForm #account_first_name {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M4.5%2020a7.5%207.5%200%200%201%2015%200%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm #account_last_name {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M4.5%2020a7.5%207.5%200%200%201%2015%200%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm #account_display_name {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2711%27%20r%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M5.8%2016.4a3.7%203.7%200%200%201%206.4%200%27%2F%3E%3Cpath%20d%3D%27M15%2010.2h4%27%2F%3E%3Cpath%20d%3D%27M15%2013.8h4%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm #account_email {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274.5%27%20width%3D%2719%27%20height%3D%2715%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3%206.5l9%206.5%209-6.5%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm #password_current {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710.5%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7.5a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm #password_1 {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710.5%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7.5a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm #password_2 {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710.5%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7.5a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm #lfw_user_dob {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%275%27%20width%3D%2717%27%20height%3D%2715%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3.5%2010h17%27%2F%3E%3Cpath%20d%3D%27M8%203.5v3%27%2F%3E%3Cpath%20d%3D%27M16%203.5v3%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm .show-password-input::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2012s3.6-6.2%209.5-6.2S21.5%2012%2021.5%2012s-3.6%206.2-9.5%206.2S2.5%2012%202.5%2012z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.9%27%2F%3E%3Cpath%20d%3D%27M4%2020L20%204%27%2F%3E%3C%2Fsvg%3E");
}

.bt-acct .woocommerce-EditAccountForm .show-password-input.display-password::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%237c93a3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2012s3.6-6.2%209.5-6.2S21.5%2012%2021.5%2012s-3.6%206.2-9.5%206.2S2.5%2012%202.5%2012z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.9%27%2F%3E%3C%2Fsvg%3E");
}

/* -------------------------------------------------------------------------
   Form control override
   woocommerce-blocktheme.css styles every control as
   `.woocommerce-page form .form-row input.input-text` - three classes and two
   elements, which outranks the generic .bt-acct input rule further up and was
   quietly restoring Woo's own padding, height and border on the account
   forms. Restated here with one more class so the design wins, and kept in one
   block rather than raising the specificity of every rule above it.
   ---------------------------------------------------------------------- */

body.woocommerce-account .bt-acct .form-row input.input-text,
body.woocommerce-account .bt-acct .form-row textarea.input-text,
body.woocommerce-account .bt-acct .form-row select,
body.woocommerce-account .bt-acct .woocommerce-form-row input.input-text {
	height: 54px;
	padding: 0 14px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	background-color: var(--bt-a-white);
	font-family: var(--bt-a-sans);
	font-size: 15px;
	line-height: normal;
	color: var(--bt-a-navy);
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

body.woocommerce-account .bt-acct .form-row textarea.input-text {
	height: auto;
	min-height: 110px;
	padding: 12px 14px;
}

body.woocommerce-account .bt-acct .form-row input.input-text:focus,
body.woocommerce-account .bt-acct .form-row textarea.input-text:focus,
body.woocommerce-account .bt-acct .form-row select:focus,
body.woocommerce-account .bt-acct .woocommerce-form-row input.input-text:focus {
	outline: 0;
	border-color: var(--bt-a-cyan);
	box-shadow: 0 0 0 3px rgba(97, 221, 235, 0.28);
}

/* Account details: room for the leading icon, and for the show/hide eye. */
body.woocommerce-account .bt-acct .woocommerce-EditAccountForm .form-row input.input-text {
	padding-left: 42px;
}

body.woocommerce-account .bt-acct .woocommerce-EditAccountForm .password-input input.input-text {
	padding-right: 44px;
}

/* Address forms: the box belongs to .woocommerce-input-wrapper, so the control
   inside it keeps none of Woo's own. */
body.woocommerce-account .bt-acct .woocommerce-address-fields .woocommerce-input-wrapper input.input-text,
body.woocommerce-account .bt-acct .woocommerce-address-fields .woocommerce-input-wrapper select {
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

body.woocommerce-account .bt-acct .woocommerce-address-fields .woocommerce-input-wrapper input.input-text:focus,
body.woocommerce-account .bt-acct .woocommerce-address-fields .woocommerce-input-wrapper select:focus {
	border: 0;
	box-shadow: none;
}

/* Order tracking uses the same wrapper control. */
body.woocommerce-account .bt-acct .bt-acct__field input.input-text {
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

body.woocommerce-account .bt-acct .bt-acct__field input.input-text:focus {
	border: 0;
	box-shadow: none;
}

/* select2 pads its own rendered value, which pushed the state and country
   values out of line with every other field's text. */
body.woocommerce-account .bt-acct .woocommerce-input-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 0;
	padding-right: 24px;
}

/* A section heading inside an endpoint panel, one step under the panel's own
   h2 - used by the Prescriptions tab's Approved peptides list. */
.bt-acct .bt-acct__subhead {
	margin: 6px 0 0;
	font-family: var(--bt-a-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.028em;
	color: var(--bt-a-navy);
}

.bt-acct .bt-acct__row .bt-acct__row-label a {
	color: inherit;
	text-decoration: none;
}

.bt-acct .bt-acct__row .bt-acct__row-label a:hover {
	color: var(--bt-a-teal);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Woo's own tables — Orders, Order details, Downloads
   The table rules near the top of this file are single-class
   (`.bt-acct .shop_table`, 0-2-0). WooCommerce styles the same tables at
   `.woocommerce table.shop_table` and `.woocommerce-page table.shop_table th`
   (0-2-1), which outranks them wherever the shortcode's own `.woocommerce`
   wrapper is an ancestor — that is, on every endpoint that prints Woo's markup
   rather than ours. The result was a bordered, rounded, 9px-padded stock table
   sitting inside the design's panels. The same design is restated here at a
   weight that wins: flush to the panel edge, hairline row rules, no outer box.
   ---------------------------------------------------------------------- */

body.woocommerce-account .bt-acct table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: transparent;
	color: var(--bt-a-navy);
}

/* Tables run to the panel's edge; the cells carry the panel's padding back. */
body.woocommerce-account .bt-acct__endpoint table.shop_table,
body.woocommerce-account .bt-acct__endpoint .bt-acct__scroll--bleed {
	margin-inline: -26px;
	width: calc(100% + 52px);
}

/* A table inside the scroller gets the bleed from the scroller, not itself. */
body.woocommerce-account .bt-acct .bt-acct__scroll table.shop_table {
	margin-inline: 0;
	width: 100%;
}

body.woocommerce-account .bt-acct table.shop_table th,
body.woocommerce-account .bt-acct table.shop_table td {
	padding: 15px 18px;
	border: 0;
	border-bottom: 1px solid var(--bt-a-line);
	font-size: 14.5px;
	font-weight: 400;
	line-height: normal;
	text-align: left;
	vertical-align: middle;
	background: transparent;
}

body.woocommerce-account .bt-acct__endpoint table.shop_table th:first-child,
body.woocommerce-account .bt-acct__endpoint table.shop_table td:first-child {
	padding-left: 26px;
}

body.woocommerce-account .bt-acct__endpoint table.shop_table th:last-child,
body.woocommerce-account .bt-acct__endpoint table.shop_table td:last-child {
	padding-right: 26px;
}

body.woocommerce-account .bt-acct table.shop_table thead th {
	font-family: var(--bt-a-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bt-a-faint);
	white-space: nowrap;
}

/* The order number is a row header, not a column header: Woo prints it as
   <th scope="row">, which would otherwise take the uppercase column look. */
body.woocommerce-account .bt-acct table.shop_table tbody th {
	font-family: var(--bt-a-display);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bt-a-navy);
	white-space: nowrap;
}

body.woocommerce-account .bt-acct table.shop_table tbody th a,
body.woocommerce-account .bt-acct table.shop_table tbody td.product-name a {
	color: inherit;
	text-decoration: none;
}

body.woocommerce-account .bt-acct table.shop_table tbody th a:hover,
body.woocommerce-account .bt-acct table.shop_table tbody td.product-name a:hover {
	color: var(--bt-a-teal);
}

/* The last row only loses its rule when nothing follows it: on an order the
   tbody is followed by a totals tfoot, which needs the divider above it. */
body.woocommerce-account .bt-acct table.shop_table tbody:last-child tr:last-child > *,
body.woocommerce-account .bt-acct table.shop_table tfoot tr:last-child > * {
	border-bottom: 0;
}

/* Totals. Woo prints the label in a <th scope="row">, so the tbody rule above
   would give it the order-number treatment; these are quiet labels instead. */
body.woocommerce-account .bt-acct table.shop_table tfoot th {
	font-family: var(--bt-a-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bt-a-faint);
	white-space: nowrap;
}

body.woocommerce-account .bt-acct table.shop_table tfoot td {
	font-family: var(--bt-a-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--bt-a-navy);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Money and quantity sit on the right of a two-column order table. */
body.woocommerce-account .bt-acct table.order_details th:last-child,
body.woocommerce-account .bt-acct table.order_details td:last-child {
	text-align: right;
}

body.woocommerce-account .bt-acct table.order_details td.product-name .product-quantity {
	font-weight: 600;
	color: var(--bt-a-muted);
}

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

/* Six columns of dates, money and actions need more room than a phone has;
   the scroller supplies it rather than letting the cells crush. */
.bt-acct__orders {
	min-width: 720px;
}

body.woocommerce-account .bt-acct .bt-acct__cell-note {
	display: block;
	margin-top: 3px;
	font-family: var(--bt-a-sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--bt-a-faint);
}

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

body.woocommerce-account .bt-acct .woocommerce-orders-table__cell-order-actions a {
	display: inline;
	width: auto;
	height: auto;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

body.woocommerce-account .bt-acct .woocommerce-orders-table__cell-order-actions a + a {
	margin-left: 14px;
}

body.woocommerce-account .bt-acct .woocommerce-orders-table__cell-order-actions a:hover {
	background: transparent;
	color: var(--bt-a-navy);
}

/* No orders yet. */
.bt-acct__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* -------------------------------------------------------------------------
   View order
   ---------------------------------------------------------------------- */

.bt-acct__ordermeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.bt-acct__ordermeta-date {
	font-size: 14.5px;
	color: var(--bt-a-muted);
}

/* Woo's own section headings inside the panel. woocommerce-blocktheme.css sets
   these to the theme's `large` preset at weight 300, which reads as a second
   page title under our own; they are kickers for the block below instead. */
body.woocommerce-account .bt-acct .woocommerce-order-details__title,
body.woocommerce-account .bt-acct .woocommerce-column__title,
body.woocommerce-account .bt-acct .woocommerce-customer-details h2 {
	font-family: var(--bt-a-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: normal;
	text-transform: uppercase;
	color: var(--bt-a-faint);
	margin: 0;
}

body.woocommerce-account .bt-acct .woocommerce-order-details,
body.woocommerce-account .bt-acct .woocommerce-order-updates,
body.woocommerce-account .bt-acct .woocommerce-customer-details {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

/* The two address cards. Their wrapper picks up the .col2-set grid defined
   with the account addresses above; only the cards themselves are new. */
body.woocommerce-account .bt-acct .woocommerce-customer-details .woocommerce-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	padding: 22px;
	height: 100%;
}

/* woocommerce.css draws its own box here — a 5px-radius rule with heavier
   bottom and right edges. The card above is the box now. */
body.woocommerce-account .bt-acct .woocommerce-customer-details address {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bt-a-navy);
}

body.woocommerce-account .bt-acct .woocommerce-customer-details--phone,
body.woocommerce-account .bt-acct .woocommerce-customer-details--email {
	margin: 8px 0 0;
	padding-left: 0;
	font-size: 14.5px;
	color: var(--bt-a-muted);
}

/* Order updates: Woo's comment list markup, carded like everything else. */
body.woocommerce-account .bt-acct .woocommerce-OrderUpdates {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-account .bt-acct .woocommerce-OrderUpdate {
	border: 1.5px solid var(--bt-a-line);
	border-radius: 12px;
	padding: 16px 18px;
	margin: 0;
}

body.woocommerce-account .bt-acct .woocommerce-OrderUpdate-meta {
	font-family: var(--bt-a-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bt-a-faint);
	margin: 0 0 6px;
}

/* Anything still printing Woo's <mark> pair — the order-received sentence, a
   plugin reusing the filter — reads as emphasis, not as a highlighter pen. */
.bt-acct mark {
	background: transparent;
	color: var(--bt-a-navy);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Woo tables — small screens
   The 700px block earlier in this file narrows the panel to 20px; these are
   the same overrides at the weight the shop_table rules above need.
   ---------------------------------------------------------------------- */

@media (max-width: 700px) {
	body.woocommerce-account .bt-acct__endpoint table.shop_table,
	body.woocommerce-account .bt-acct__endpoint .bt-acct__scroll--bleed {
		margin-inline: -20px;
		width: calc(100% + 40px);
	}

	body.woocommerce-account .bt-acct .bt-acct__scroll table.shop_table {
		margin-inline: 0;
		width: 100%;
	}

	body.woocommerce-account .bt-acct__endpoint table.shop_table th:first-child,
	body.woocommerce-account .bt-acct__endpoint table.shop_table td:first-child {
		padding-left: 20px;
	}

	body.woocommerce-account .bt-acct__endpoint table.shop_table th:last-child,
	body.woocommerce-account .bt-acct__endpoint table.shop_table td:last-child {
		padding-right: 20px;
	}
}

/* woocommerce-layout.css floats these at 48% from `.woocommerce .col2-set
   .col-1` (0-3-0), which outranks the float reset written for the account
   addresses further up and leaves the view-order cards shrink-wrapped around
   their own text inside a grid cell twice their width. Same reset, one class
   heavier, so the two cards fill the pair of tracks the way the Addresses tab
   does. */
body.woocommerce-account .bt-acct .col2-set > div,
body.woocommerce-account .bt-acct .u-columns > div,
body.woocommerce-account .bt-acct .woocommerce-columns > div {
	float: none;
	width: auto;
	margin: 0;
}

/* The phone and email lines are the only rows Woo indents, for an icon it
   draws with ::before. The glyph reads as part of the line, not as a hanging
   marker, so the row starts where the address does. */
body.woocommerce-account .bt-acct .woocommerce-customer-details address > p {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Woo hangs the glyph outside the text column with `margin-left: -1.5em`,
   the other half of the 1.5em padding removed above. */
body.woocommerce-account .bt-acct .woocommerce-customer-details--phone::before,
body.woocommerce-account .bt-acct .woocommerce-customer-details--email::before {
	position: static;
	margin: 0;
	color: var(--bt-a-faint);
}