/**
 * Account — login / register / lost-password card + branded My Account shell.
 *
 * Loaded on:
 *   - The Login / Register page (page-login.php)
 *   - Every WooCommerce My Account view (dashboard, orders, etc.)
 *
 * Tokens come from base.css (--terra, --gold, --charcoal, --cream, etc.).
 * The page-id bar + hero strip mirror cart-checkout.css so all branded shells
 * read consistently.
 */

/* ── Page id bar — match cart-checkout shell ── */
.ts-account-main .page-id-bar,
body.woocommerce-account .page-id-bar {
	display: flex;
	align-items: center;
	justify-content: center;.ts-account-actions
	gap: 10px;
	padding: 8px 24px;
	background: var(--charcoal);
	color: var(--gold);
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.ts-account-main .page-id-bar .page-id-divider,
body.woocommerce-account .page-id-bar .page-id-divider {
	color: rgba(201,169,110,0.5);
}
.ts-account-main .page-id-bar .page-id-name,
body.woocommerce-account .page-id-bar .page-id-name {
	color: rgba(255,255,255,0.85);
	letter-spacing: 0.1em;
}

/* ── Hero ── */
.ts-account-hero {
	background: linear-gradient(180deg, var(--cream) 0%, var(--bg) 100%);
	border-bottom: 1px solid var(--border);
	padding: 56px 24px 64px;
	text-align: center;
}
.ts-account-hero-inner {
	max-width: 720px;
	margin: 0 auto;
}
.ts-account-hero-title {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--charcoal);
	margin-bottom: 12px;
}
.ts-account-hero-title em {
	font-family: var(--ff-accent);
	font-style: normal;
	font-weight: 400;
	font-size: 1.05em;
	color: var(--terra);
}
.ts-account-hero-sub {
	font-size: 15px;
	color: var(--stone);
	max-width: 560px;
	margin: 0 auto;
}

/* ── Login wrap ── */
.ts-login-wrap {
	max-width: 1100px;
	padding: 60px 24px 90px;
	margin: auto;
}
.ts-login-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	gap: 40px;
	align-items: stretch;
}

/* ── Editorial aside ── */
.ts-login-aside {
	padding: 8px 0;
}
.ts-login-aside-eyebrow {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--terra);
	margin-bottom: 16px;
	font-weight: 600;
}
.ts-login-aside-title {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 38px;
	line-height: 1.15;
	color: var(--charcoal);
	margin-bottom: 14px;
}
.ts-login-aside-title em {
	font-family: var(--ff-accent);
	font-style: normal;
	font-size: 1.05em;
	color: var(--gold);
}
.ts-login-aside-sub {
	font-size: 15px;
	color: var(--stone);
	margin-bottom: 28px;
	max-width: 480px;
}
.ts-login-perks {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: grid;
	gap: 14px;
}
.ts-login-perks li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 16px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
}
.ts-login-perks li i {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--gold-light);
	color: var(--charcoal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-style: normal;
}
.ts-login-perks li div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ts-login-perks li strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--charcoal);
}
.ts-login-perks li span {
	font-size: 13px;
	color: var(--stone);
}
.ts-login-aside-quote {
	border-left: 2px solid var(--gold);
	padding: 4px 0 4px 16px;
	margin-top: 8px;
}
.ts-login-aside-quote p {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 18px;
	line-height: 1.45;
	color: var(--charcoal);
	margin-bottom: 6px;
}
.ts-login-aside-quote span {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stone);
}

/* ── Card ── */
.ts-login-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-top: 3px solid var(--charcoal);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md);
	padding: 36px 36px 32px;
	align-self: start;
}

.ts-login-tabs {
	display: flex;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 4px;
	margin-bottom: 28px;
}
.ts-login-tab {
	flex: 1 1 0;
	background: transparent;
	border: none;
	padding: 10px 16px;
	font-family: var(--ff-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--stone);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: all 0.2s var(--ease-out);
}
.ts-login-tab.is-active {
	background: var(--charcoal);
	color: #fff;
	box-shadow: 0 2px 8px rgba(28,26,24,0.15);
}

.ts-login-pane { display: none; animation: fadeIn 0.25s var(--ease-out); }
.ts-login-pane.is-active { display: block; }

/* ── Form fields ── */
.ts-login-form { display: grid; gap: 14px; }
.ts-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.ts-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ts-field label {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--charcoal);
	font-weight: 600;
}
.ts-field input[type="text"],
.ts-field input[type="email"],
.ts-field input[type="password"],
.ts-field input[type="tel"],
.ts-field input[type="url"],
.ts-field input[type="number"] {
	width: 100%;
	padding: 13px 14px;
	font-family: var(--ff-body);
	font-size: 14px;
	color: var(--charcoal);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
	transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.ts-field input:focus {
	outline: none;
	border-color: var(--charcoal);
	box-shadow: 0 0 0 3px rgba(28,26,24,0.08);
}
.ts-field input.is-invalid {
	border-color: #c0524a;
	box-shadow: 0 0 0 3px rgba(192,82,74,0.08);
}
.ts-field-help {
	font-size: 12px;
	color: var(--stone);
}

/* ── Password + reveal toggle ── */
.ts-field-password { position: relative; }
.ts-field-password input { padding-right: 44px; }
.ts-pw-toggle {
	position: absolute;
	right: 8px;
	top: 30px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: var(--stone);
	transition: color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.ts-pw-toggle:hover { color: var(--charcoal); background: var(--cream); }
.ts-pw-toggle i { font-size: 16px; font-style: normal; }

/* ── Row: remember + forgot ── */
.ts-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}
.ts-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--charcoal);
	cursor: pointer;
}
.ts-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--border);
	border-radius: 4px;
	background: var(--white);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: all 0.15s var(--ease-out);
}
.ts-checkbox input[type="checkbox"]:checked {
	background: var(--charcoal);
	border-color: var(--charcoal);
}
.ts-checkbox input[type="checkbox"]:checked::after {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
}
.ts-checkbox-tos {
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--stone);
	margin: 10px 0;
}
.ts-checkbox-tos a { color: var(--charcoal); text-decoration: underline; }

/* ── Dokan / WC injected register fields (vendor radios, shop name/url, subscription pack) ──
   Scoped to .ts-register-extras so we don't bleed into WC's own templates. */
.ts-register-extras { display: grid; gap: 14px; margin-top: 4px; display: none;	 }
.ts-register-extras p,
.ts-register-extras .form-row,
.ts-register-extras .woocommerce-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.ts-register-extras label {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--charcoal);
	font-weight: 600;
}
.ts-register-extras input[type="text"],
.ts-register-extras input[type="email"],
.ts-register-extras input[type="url"],
.ts-register-extras input[type="tel"],
.ts-register-extras input[type="password"],
.ts-register-extras select,
.ts-register-extras textarea {
	width: 100%;
	padding: 13px 14px;
	font-family: var(--ff-body);
	font-size: 14px;
	color: var(--charcoal);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
	transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.ts-register-extras input:focus,
.ts-register-extras select:focus,
.ts-register-extras textarea:focus {
	outline: none;
	border-color: var(--charcoal);
	box-shadow: 0 0 0 3px rgba(28,26,24,0.08);
}
/* Vendor "Are you a customer or a vendor?" radio strip — Dokan renders these
   inline; render as two pill-style options that match our checkbox aesthetic. */
.ts-register-extras .user-type,
.ts-register-extras .form-row.user-type {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}
.ts-register-extras .user-type label,
.ts-register-extras input[type="radio"] + label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
	color: var(--charcoal);
	cursor: pointer;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 8px;
	transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.ts-register-extras input[type="radio"] {
	accent-color: var(--charcoal);
}
.ts-register-extras small,
.ts-register-extras .description {
	font-size: 12px;
	color: var(--stone);
}

/* ── Vendor signup block (custom) ── */
.ts-checkbox-vendor {
	display: none !important;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 4px;
	padding: 14px;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--charcoal);
}
.ts-checkbox-vendor strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
}
.ts-checkbox-vendor .ts-checkbox-help {
	display: block;
	font-style: normal;
	color: var(--stone);
	font-size: 12px;
	margin-top: 2px;
}

.ts-vendor-fields {
	display: grid;
	gap: 14px;
	margin: 8px 0 4px;
	padding: 16px;
	border: 1px dashed var(--border);
	border-radius: 10px;
	background: rgba(255,255,255,0.5);
}
.ts-vendor-fields[hidden] { display: none; }

.ts-field-shopurl { position: relative; }
.ts-shopurl-preview {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--stone);
	word-break: break-all;
}
.ts-shopurl-preview .ts-shopurl-base { color: var(--stone); }
.ts-shopurl-preview strong { color: var(--charcoal); font-weight: 600; }

/* Right-side spinner overlay while the AJAX availability check is in
   flight. The .is-checking class is toggled by JS on the parent .ts-field. */
.ts-field-shopurl input[data-ts-shopurl] { padding-right: 42px; }
.ts-field-shopurl::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 38px;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(28,26,24,0.15);
	border-top-color: var(--charcoal);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: ts-shopurl-spin 0.7s linear infinite;
	transition: opacity 0.15s var(--ease-out);
}
.ts-field-shopurl.is-checking::after { opacity: 1; }
@keyframes ts-shopurl-spin {
	to { transform: rotate(360deg); }
}

.ts-shopurl-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	min-height: 18px;
}
.ts-shopurl-status:empty { display: none; }
.ts-shopurl-status i {
	font-size: 16px;
	line-height: 1;
}
.ts-shopurl-status.is-checking { color: var(--stone); }
.ts-shopurl-status.is-checking i {
	animation: ts-shopurl-spin 0.7s linear infinite;
}
.ts-shopurl-status.is-ok { color: #2f7d4f; }
.ts-shopurl-status.is-ok i { color: #2f7d4f; }
.ts-shopurl-status.is-bad { color: #b3422f; }
.ts-shopurl-status.is-bad i { color: #b3422f; }

/* Dokan PRO subscription pack picker (rendered into .ts-vendor-fields via
   the `dokan_seller_registration_field_after` action). Pack list comes
   wrapped in .dps-pack-wrappper with .dps-pack children. The JS hides all
   .dps-pack blocks and only reveals the one matching the current <select>
   value, so this CSS just frames whichever block is visible. */
.ts-vendor-fields .dps-pack-wrappper {
	border: 1px solid var(--border) !important;
	border-radius: 8px;
	padding: 12px;
	background: var(--white);
	display: grid;
	gap: 10px;
}
.ts-vendor-fields .dps-pack-wrappper select {
	width: 100%;
	/* padding: 13px 14px; */
	font-family: var(--ff-body);
	font-size: 14px;
	color: var(--charcoal);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
}
.ts-vendor-fields .dps-pack {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--cream);
	font-size: 13px;
	line-height: 1.5;
}
.ts-vendor-fields .dps-pack-price {
	font-weight: 600;
	color: var(--terra);
	white-space: nowrap;
	font-size: 16px;
}
.ts-vendor-fields .dps-pack b { color: var(--charcoal); display: block; margin-bottom: 4px; }
.ts-vendor-fields .dps-rec-period { color: var(--stone); font-size: 12px; }

.ts-link-btn {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--ff-body);
	font-size: 13px;
	color: var(--terra);
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ts-link-btn:hover { color: var(--terra-hover); text-decoration: underline; }
.ts-link-btn i { font-size: 14px; font-style: normal; }

/* ── Submit ── */
.ts-login-submit {
	margin-top: 6px;
	height: 50px;
}
.ts-login-submit i { font-size: 16px; font-style: normal; }
.ts-login-submit[disabled] { opacity: 0.6; pointer-events: none; }
.ts-login-submit.is-loading .ts-btn-icon {
	animation: ts-icon-spin 0.8s linear infinite;
}

.ts-login-foot {
	margin-top: 8px;
	font-size: 13px;
	color: var(--stone);
	text-align: center;
}
.ts-login-foot .ts-link-btn { font-weight: 600; }

.ts-lost-intro {
	font-size: 14px;
	color: var(--stone);
	margin-bottom: 6px;
}

/* ── Form messages (success / error) ── */
.ts-form-message {
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.ts-form-message::before {
	font-family: 'remixicon';
	font-size: 16px;
	line-height: 1;
	flex: 0 0 auto;
}
.ts-form-message.is-error {
	padding: 12px 14px;
	background: #fbecea;
	color: #8a3530;
	border: 1px solid #f0c6c0;
}
.ts-form-message.is-error::before {
	content: "\eca1"; /* ri-error-warning-line */
	color: #c0524a;
}
.ts-form-message.is-success {
	padding: 12px 14px;
	background: var(--sage-light);
	color: #2d5945;
	border: 1px solid #b8d6c5;
}
.ts-form-message.is-success::before {
	content: "\eb80"; /* ri-check-line */
	color: #2d5945;
}

/* ════════════════════════════════════════════════════════════════
   MY ACCOUNT
   ════════════════════════════════════════════════════════════════ */

body.woocommerce-account .ts-account-wrap {
	max-width: 1200px;
	padding: 48px 24px 80px;
	margin: auto;
}

.ts-myaccount {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

/* Hide the page title (would duplicate the hero). */
body.woocommerce-account .entry-title { display: none; }

/* ── Sidebar ── */
.ts-account-sidebar {
	background: var(--white);
	border: 1px solid var(--border);
	border-top: 3px solid var(--charcoal);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	position: sticky;
	top: 24px;
}
.ts-account-card-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 18px;
	background: var(--cream);
	border-bottom: 1px solid var(--border);
}
.ts-account-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gold-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 0 0 auto;
}
.ts-account-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ts-account-avatar i {
	font-size: 22px;
	color: var(--charcoal);
	font-style: normal;
}
.ts-account-user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-account-user-name {
	font-family: var(--ff-display);
	font-size: 16px;
	color: var(--charcoal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ts-account-user-role {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--terra);
	font-weight: 600;
}

.ts-account-nav { padding: 8px 0; }
.ts-account-nav ul { list-style: none; padding: 0; margin: 0; }
.ts-account-nav-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 18px;
	font-size: 14px;
	color: var(--charcoal);
	transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
	border-left: 3px solid transparent;
}
.ts-account-nav-item a i {
	font-size: 18px;
	color: var(--stone);
	font-style: normal;
}
.ts-account-nav-item a:hover { background: var(--cream); color: var(--terra); }
.ts-account-nav-item a:hover i { color: var(--terra); }
.ts-account-nav-item.is-active a {
	background: var(--gold-light);
	color: var(--charcoal);
	border-left-color: var(--gold);
	font-weight: 600;
}
.ts-account-nav-item.is-active a i { color: var(--charcoal); }
.ts-account-nav-vendor a {
	color: var(--terra);
	border-top: 1px solid var(--border);
	margin-top: 6px;
	font-weight: 600;
}
.ts-account-nav-vendor a i { color: var(--terra); }

/* ── Content area ── */
.ts-myaccount-content {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 32px;
	box-shadow: var(--shadow-sm);
	min-width: 0;
	width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content{
	width: 100%;
}

/* ── Dashboard greet + stats + actions ── */
.ts-account-dashboard { display: grid; gap: 28px; }
.ts-account-greet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--border);
}
.ts-account-greet-eyebrow {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--terra);
	font-weight: 600;
	margin-bottom: 6px;
}
.ts-account-greet h2 {
	font-family: var(--ff-display);
	font-size: 30px;
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 4px;
	line-height: 1.15;
}
.ts-account-greet p { color: var(--stone); font-size: 14px; margin: 0; }

.ts-account-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.ts-stat-card {
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 20px;
	display: grid;
	grid-template-areas:
		"icon num"
		"icon label";
	grid-template-columns: 44px 1fr;
	gap: 0 14px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s;
}
a.ts-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(28,26,24,0.06);
	border-color: var(--fri-yay);
}
a.ts-stat-card:hover .ts-stat-num { color: var(--fri-yay); }
.ts-stat-card i {
	grid-area: icon;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gold-light);
	color: var(--charcoal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-style: normal;
	align-self: center;
	grid-row: 1 / span 2;
}
.ts-stat-num {
	grid-area: num;
	font-family: var(--ff-display);
	font-size: 26px;
	font-weight: 500;
	color: var(--charcoal);
	line-height: 1;
}
.ts-stat-label {
	grid-area: label;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--stone);
	text-transform: uppercase;
	font-weight: 500;
}

.ts-account-actions {
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	grid-template-columns: 1fr;
	gap: 14px;
}
.ts-action-card {
	display: grid;
	grid-template-columns: 44px 1fr 24px;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	transition: all 0.18s var(--ease-out);
}
.ts-action-card:hover {
	border-color: var(--charcoal);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.ts-action-card > i:first-child {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--terra-light);
	color: var(--terra);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-style: normal;
}
.ts-action-card h3 {
	font-family: var(--ff-display);
	font-size: 18px;
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 2px;
}
.ts-action-card p {
	font-size: 13px;
	color: var(--stone);
	margin: 0;
}
.ts-action-arrow {
	color: var(--stone);
	font-size: 18px;
	font-style: normal;
	transition: color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.ts-action-card:hover .ts-action-arrow { color: var(--terra); transform: translate(2px, -2px); }

/* ── WC inner content polish (orders table, addresses, edit-account) ── */
.ts-myaccount-content h2,
.ts-myaccount-content h3 {
	font-family: var(--ff-display);
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 14px;
}
.ts-myaccount-content > h2:first-child,
.ts-myaccount-content > h3:first-child { margin-top: 0; }
.ts-myaccount-content p { color: var(--stone); }

.ts-myaccount-content .woocommerce-message,
.ts-myaccount-content .woocommerce-info,
.ts-myaccount-content .woocommerce-error {
	background: var(--cream);
	border: 0;
	border-left: 3px solid var(--gold);
	padding: 14px 16px;
	border-radius: 0 8px 8px 0;
	color: var(--charcoal);
	margin: 0 0 18px;
	list-style: none;
}
.woocommerce-info::before{
	position: relative;
	color: var(--gold);
	margin-right: 8px;
	top: 1px;
    left: 0;
}
.ts-myaccount-content .woocommerce-error { border-left-color: #c0524a; background: #fbecea; color: #8a3530; }
.ts-myaccount-content .woocommerce-message { border-left-color: var(--sage); background: var(--sage-light); color: #2d5945; }

.ts-myaccount-content .woocommerce-orders-table,
.ts-myaccount-content .shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	font-size: 14px;
}
.ts-myaccount-content .woocommerce-orders-table th,
.ts-myaccount-content .shop_table th {
	background: var(--cream);
	padding: 12px 14px;
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--charcoal);
	font-weight: 600;
	border-bottom: 1px solid var(--border);
}
.ts-myaccount-content .woocommerce-orders-table td,
.ts-myaccount-content .shop_table td {
	padding: 14px;
	border-bottom: 1px solid var(--border);
	color: var(--charcoal);
	vertical-align: middle;
}
.ts-myaccount-content .woocommerce-orders-table tr:last-child td,
.ts-myaccount-content .shop_table tr:last-child td { border-bottom: none; }
.ts-myaccount-content .woocommerce-orders-table .button,
.ts-myaccount-content .shop_table .button,
.ts-myaccount-content .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--charcoal);
	color: #fff;
	padding: 8px 16px;
	border-radius: var(--radius-btn);
	font-size: 12px;
	letter-spacing: 0.04em;
	font-weight: 600;
	border: none;
	transition: all 0.18s var(--ease-out);
	text-decoration: none;
}
.ts-myaccount-content .woocommerce-orders-table .button:hover,
.ts-myaccount-content .shop_table .button:hover,
.ts-myaccount-content .woocommerce-Button:hover {
	background: #333;
	transform: translateY(-1px);
}

/* Forms (edit-account, edit-address) */
.ts-myaccount-content .woocommerce-EditAccountForm .form-row,
.ts-myaccount-content .woocommerce-address-fields .form-row,
.ts-myaccount-content .woocommerce-form-row {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ts-myaccount-content .woocommerce-form-row.form-row-first,
.ts-myaccount-content .woocommerce-form-row.form-row-last { display: inline-flex; width: calc(50% - 8px); }
.ts-myaccount-content .woocommerce-form-row.form-row-first { margin-right: 16px; }
.ts-myaccount-content fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin: 18px 0; }
.ts-myaccount-content legend { font-family: var(--ff-display); font-size: 18px; padding: 0 8px; }

.ts-myaccount-content label {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--charcoal);
	font-weight: 600;
}
.ts-myaccount-content input[type="text"],
.ts-myaccount-content input[type="email"],
.ts-myaccount-content input[type="tel"],
.ts-myaccount-content input[type="password"],
.ts-myaccount-content select,
.ts-myaccount-content textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--ff-body);
	font-size: 14px;
	color: var(--charcoal);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
	transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.ts-myaccount-content input:focus,
.ts-myaccount-content select:focus,
.ts-myaccount-content textarea:focus {
	outline: none;
	border-color: var(--charcoal);
	box-shadow: 0 0 0 3px rgba(28,26,24,0.08);
}
.ts-myaccount-content button[type="submit"],
.ts-myaccount-content .button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--terra);
	color: #fff;
	padding: 13px 28px;
	border-radius: var(--radius-btn);
	font-size: 13px;
	letter-spacing: 0.04em;
	font-weight: 600;
	border: none;
	transition: all 0.18s var(--ease-out);
	cursor: pointer;
}
.ts-myaccount-content button[type="submit"]:hover { background: var(--terra-hover); }

/* ── Higher-specificity input rules so WC plugin defaults don't win ── */
/* WC ships rules like `.woocommerce form .form-row input.input-text` — match
 * that specificity (and the address form's own classes) so our theme styling
 * actually paints. Mirrors the cart-checkout.css form-row treatment. */
.ts-myaccount-content .woocommerce-EditAccountForm input.input-text,
.ts-myaccount-content .woocommerce-EditAccountForm textarea,
.ts-myaccount-content .woocommerce-address-fields input.input-text,
.ts-myaccount-content .woocommerce-address-fields textarea,
.ts-myaccount-content .woocommerce-address-fields .select2-container .select2-selection--single,
.ts-myaccount-content form .form-row input.input-text,
.ts-myaccount-content form .form-row textarea,
.ts-myaccount-content form .form-row select {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--ff-body);
	font-size: 14px;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.ts-myaccount-content form .form-row .required { color: var(--terra); text-decoration: none; }
.ts-myaccount-content form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--charcoal);
	font-weight: 600;
}
.ts-myaccount-content form .form-row input.input-text:focus,
.ts-myaccount-content form .form-row textarea:focus,
.ts-myaccount-content form .form-row select:focus,
.ts-myaccount-content .woocommerce-address-fields input.input-text:focus,
.ts-myaccount-content .woocommerce-address-fields textarea:focus {
	border-color: var(--charcoal);
	box-shadow: 0 0 0 3px rgba(28,26,24,0.06);
}
.ts-myaccount-content form .form-row.woocommerce-invalid input.input-text,
.ts-myaccount-content form .form-row.woocommerce-invalid textarea,
.ts-myaccount-content form .form-row.woocommerce-invalid select {
	border-color: #B5453B;
	box-shadow: 0 0 0 3px rgba(181,69,59,0.08);
}
.ts-myaccount-content form .form-row.woocommerce-validated input.input-text {
	border-color: var(--sage);
}

/* Select2 (country/state pickers on edit-address) — match checkout. */
.ts-myaccount-content .select2-container .select2-selection--single {
	height: 46px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
}
.ts-myaccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-left: 14px;
	font-family: var(--ff-body);
	font-size: 14px;
	color: var(--ink);
}
.ts-myaccount-content .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
.ts-myaccount-content .select2-dropdown { border-color: var(--border); border-radius: 8px; overflow: hidden; }

/* WC `<small>` field hint text */
.ts-myaccount-content form .form-row em,
.ts-myaccount-content form .form-row small { font-size: 12px; color: var(--stone); font-style: normal; display: block; margin-top: 6px; }

/* ── Global Button — order/edit/save buttons rendered outside of a table cell.
 * (My Account address page "Add address" link, "Save address" submit, etc.) ── */
.ts-myaccount-content a.button,
.ts-myaccount-content .woocommerce-Button,
.ts-myaccount-content button.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--charcoal);
	color: #fff;
	padding: 12px 24px;
	border-radius: var(--radius-btn);
	font-size: 13px;
	letter-spacing: 0.04em;
	font-weight: 600;
	border: none;
	transition: all 0.18s var(--ease-out);
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
}
.ts-myaccount-content a.button:hover,
.ts-myaccount-content .woocommerce-Button:hover,
.ts-myaccount-content button.button:hover {
	background: #333;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(28,26,24,0.18);
}
.ts-myaccount-content .woocommerce-Button--next,
.ts-myaccount-content .button.button-primary,
.ts-myaccount-content button[type="submit"].woocommerce-Button {
	background: var(--terra);
}
.ts-myaccount-content .woocommerce-Button--next:hover,
.ts-myaccount-content .button.button-primary:hover,
.ts-myaccount-content button[type="submit"].woocommerce-Button:hover {
	background: var(--terra-hover);
}

/* ── Addresses page — stack the two columns full-width instead of side-by-side. ── */
.ts-myaccount-content .woocommerce-Addresses{
	margin-top: 20px !important;
}
.ts-myaccount-content .woocommerce-Addresses,
.ts-myaccount-content .u-columns,
.ts-myaccount-content .addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin: 0;
}
.ts-myaccount-content .woocommerce-Addresses::before,
.ts-myaccount-content .woocommerce-Addresses::after,
.ts-myaccount-content .u-columns::before,
.ts-myaccount-content .u-columns::after { content: none; display: none; }
.ts-myaccount-content .woocommerce-Address,
.ts-myaccount-content .u-column1,
.ts-myaccount-content .u-column2 {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 22px 24px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
}

/* Address title — display as a header bar with the "edit" link inline next to
 * the heading (no float-right). Kill WC's default float on the .edit anchor. */
.ts-myaccount-content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}
.ts-myaccount-content .woocommerce-Address-title h2,
.ts-myaccount-content .woocommerce-Address-title h3 {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--charcoal);
	line-height: 1.2;
	flex: 1;
}
.ts-myaccount-content .woocommerce-Address-title .edit,
.ts-myaccount-content .woocommerce-Address-title a.edit {
	float: none !important;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: transparent;
	color: var(--charcoal);
	border: 1px solid var(--border);
	border-radius: var(--radius-btn);
	font-size: 12px;
	letter-spacing: 0.04em;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.18s var(--ease-out);
}
.ts-myaccount-content .woocommerce-Address-title .edit::before {
	content: "\efdf"; /* ri-pencil-line */
	font-family: 'remixicon';
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
}
.ts-myaccount-content .woocommerce-Address-title .edit:hover {
	background: var(--charcoal);
	color: #fff;
	border-color: var(--charcoal);
}

.ts-myaccount-content .woocommerce-Address address {
	font-style: normal;
	color: var(--charcoal);
	font-size: 14px;
	line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 980px) {
	.ts-login-grid { grid-template-columns: 1fr; gap: 40px; }
	.ts-login-card { order: -1; }
	.ts-login-aside-title { font-size: 30px; }
	.ts-account-hero-title { font-size: 42px; }
	.ts-account-hero { padding: 44px 20px 50px; }

	.ts-myaccount { grid-template-columns: 1fr; gap: 20px; }
	.ts-account-sidebar { position: static; }
	.ts-account-stats { grid-template-columns: 1fr; }
	.ts-account-actions { grid-template-columns: 1fr; }
	.ts-account-greet h2 { font-size: 26px; }
}

@media (max-width: 560px) {
	.ts-login-card { padding: 24px 20px; }
	.ts-login-wrap { padding: 36px 16px 60px; }
	.ts-account-hero-title { font-size: 34px; }
	.ts-account-hero { padding: 36px 16px 40px; }
	.ts-field-row { grid-template-columns: 1fr; }
	.ts-myaccount-content { padding: 22px 18px; }
	.ts-myaccount-content .woocommerce-form-row.form-row-first,
	.ts-myaccount-content .woocommerce-form-row.form-row-last { display: flex; width: 100%; }
	.ts-myaccount-content .woocommerce-form-row.form-row-first { margin-right: 0; }
	.ts-myaccount-content .woocommerce-orders-table thead { display: none; }
	.ts-myaccount-content .woocommerce-orders-table tr {
		display: block;
		border-bottom: 1px solid var(--border);
		padding: 10px 0;
	}
	.ts-myaccount-content .woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 14px;
		border: none;
		font-size: 13px;
	}
	.ts-myaccount-content .woocommerce-orders-table td::before {
		content: attr(data-title);
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--stone);
		font-weight: 600;
		margin-right: 12px;
	}
}

/* ─────────────────────────────────────────────────────────────
   Become A Seller — branded shell for Dokan subscription packs.
   The Dokan plugin renders its pack listing inside .entry-content
   (either via filter on the_content or the [dps_show_pack] shortcode).
   We don't know the exact markup Dokan ships, so we style the common
   table + grid containers it uses and let everything else inherit.
   ───────────────────────────────────────────────────────────── */
.ts-become-seller-wrap {
	padding: 48px 24px 80px;
	max-width: 1100px;
	margin: 0 auto;
}
.ts-become-seller-article .entry-content {
	display: grid;
	gap: 24px;
}
/* Generic copy / headings inside the page body. */
.ts-become-seller-article .entry-content h2,
.ts-become-seller-article .entry-content h3 {
	font-family: var(--ff-display);
	color: var(--charcoal);
	margin: 8px 0 4px;
}
.ts-become-seller-article .entry-content p {
	color: var(--stone);
	line-height: 1.65;
	margin: 0 0 12px;
}

/* Dokan pack listing — table layout (default Dokan output). */
.ts-become-seller-article table.dps_pack_table,
.ts-become-seller-article table.dokan-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 12px;
	background: transparent;
}
.ts-become-seller-article table.dps_pack_table th,
.ts-become-seller-article table.dokan-table th {
	font-family: var(--ff-body);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--charcoal);
	font-weight: 600;
	text-align: left;
	padding: 8px 16px;
	border: none;
}
.ts-become-seller-article table.dps_pack_table td,
.ts-become-seller-article table.dokan-table td {
	background: var(--white);
	padding: 18px 16px;
	border: 1px solid var(--border);
	border-left: none;
	border-right: none;
	color: var(--charcoal);
	font-size: 14px;
}
.ts-become-seller-article table.dps_pack_table td:first-child,
.ts-become-seller-article table.dokan-table td:first-child {
	border-left: 1px solid var(--border);
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	font-family: var(--ff-display);
	font-size: 18px;
}
.ts-become-seller-article table.dps_pack_table td:last-child,
.ts-become-seller-article table.dokan-table td:last-child {
	border-right: 1px solid var(--border);
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* "Subscribe" / "Buy now" pack buttons — Dokan emits an <a class="button">. */
.ts-become-seller-article .entry-content a.button,
.ts-become-seller-article .entry-content .dps_pack_table a,
.ts-become-seller-article .entry-content .dokan-btn-theme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--charcoal);
	color: var(--white) !important;
	font-family: var(--ff-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 8px;
	border: 1px solid var(--charcoal);
	text-decoration: none;
	transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.ts-become-seller-article .entry-content a.button:hover,
.ts-become-seller-article .entry-content .dokan-btn-theme:hover {
	background: var(--terra);
	border-color: var(--terra);
}

/* Shortcode-rendered pack grid (Dokan PRO sometimes uses card layout). */
.ts-become-seller-article .dps_pack_features {
	margin: 0;
	padding: 12px 0 0 18px;
	color: var(--stone);
	font-size: 13px;
	line-height: 1.6;
}



/* ======== new card styling start ========== */

.ts-become-seller-article .pack_content_wrapper .product_pack_item{
	width: 48%;
	padding: 30px 15px;
	flex-direction: column;
    align-items: center;
	border-radius: 25px;
    border: 1px solid var(--terra);
	box-shadow: none;
	transition: all 0.3s ease-in-out;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item:hover{
	box-shadow: 0px 0px 25px 0px #ddd;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item .pack_price {
	position: relative;
	top: unset;
	left: unset;
	background: transparent;
	color: var(--terra);
	height: unset;
	width: unset;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item .pack_price .dps-amount {
	line-height: 1;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item .pack_price .amount bdi {
	font-size: 45px;
	font-weight: 800;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item .pack_price .dps-rec-period {
	font-size: 14px;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item .pack_content {
	margin-top: 20px;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item .buy_pack_button {
	position: relative;
	width: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item .buy_pack_button .dokan-btn-theme {
	background: var(--terra);
    border-color: var(--terra);
    width: 80%;
    text-align: center;
    align-items: center;
    justify-content: center;
	padding: 16px 18px;
	border-radius: 50px;
	transition: all 0.3s ease-in-out;
}
.ts-become-seller-article .pack_content_wrapper .product_pack_item .buy_pack_button .dokan-btn-theme:hover {
	background: #000;
	border-color: #000;
}


/* ======== new card styling end ========== */


/* "Already have an account?" CTA strip below the packs. */
.ts-become-seller-cta {
	margin-top: 32px;
	padding: 18px 22px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: 12px;
	color: var(--charcoal);
}
.ts-become-seller-cta i {
	font-size: 22px;
	color: var(--terra);
	font-style: normal;
	flex: 0 0 auto;
}
.ts-become-seller-cta strong {
	display: block;
	font-family: var(--ff-display);
	font-size: 18px;
	margin-bottom: 2px;
}
.ts-become-seller-cta span { font-size: 14px; color: var(--stone); }
.ts-become-seller-cta a { color: var(--terra); font-weight: 600; text-decoration: underline; }

@media (max-width: 640px) {
	.ts-become-seller-wrap { padding: 32px 16px 60px; }
	.ts-become-seller-article table.dps_pack_table,
	.ts-become-seller-article table.dokan-table { display: block; overflow-x: auto; }
}

/* ────────────────────────────────────────────────────────────────────
 * LOYALTY POINTS — My Account → Points tab.
 *
 * Three blocks, top to bottom:
 *   .ts-points-balance-hero   — big terra/gold gradient card with the
 *                               balance number, the unit label, and the
 *                               "Worth $X — at Y pts per $1" line.
 *   .ts-points-redeem-card    — form (number input + submit) and a
 *                               post-redemption coupon-code result panel.
 *   .ts-points-log            — chronological activity table.
 * ──────────────────────────────────────────────────────────────────── */

.ts-points-tab { display: flex; flex-direction: column; gap: 24px; }

/* ── Balance hero ── */
.ts-points-balance-hero {
	background: linear-gradient(135deg, var(--terra) 0%, #d68a6e 100%);
	color: #fff;
	border-radius: 16px;
	padding: 36px 32px;
	text-align: center;
	box-shadow: 0 8px 28px rgba(196,115,90,0.25);
	position: relative;
	overflow: hidden;
}
.ts-points-balance-hero::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	pointer-events: none;
}
.ts-points-balance-hero::after {
	content: '\f163';
	font-family: 'remixicon';
	position: absolute;
	bottom: -30px;
	left: -10px;
	font-size: 140px;
	line-height: 1;
	color: rgba(255,255,255,0.08);
	pointer-events: none;
}
.ts-points-balance-num {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(48px, 8vw, 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
	position: relative;
	z-index: 1;
}
.ts-points-balance-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-top: 8px;
	opacity: 0.9;
	position: relative;
	z-index: 1;
}
.ts-points-balance-value {
	font-size: 13px;
	margin-top: 14px;
	opacity: 0.85;
	position: relative;
	z-index: 1;
}

/* ── Redeem card ── */
.ts-points-redeem-card {
	background: #fff;
	border: 1px solid #ECE7E0;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(28,26,24,0.04);
}
.ts-points-redeem-head { margin-bottom: 18px; }
.ts-points-redeem-title {
	margin: 0 0 4px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--ink);
}
.ts-points-redeem-sub {
	margin: 0;
	font-size: 13px;
	color: var(--dust, #8A8276);
	line-height: 1.55;
}
.ts-points-redeem-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
}
.ts-points-redeem-field { flex: 1; min-width: 200px; }
.ts-points-redeem-field input[type="number"] {
	width: 100%;
	height: 100%;
	min-height: 46px;
	padding: 11px 16px;
	background: var(--cream, #FAF8F4);
	border: 1.5px solid #ECE7E0;
	border-radius: 999px;
	font-size: 14px;
	color: var(--ink);
	font-family: inherit;
	transition: border-color 0.15s, background 0.15s;
}
.ts-points-redeem-field input[type="number"]:focus {
	outline: none;
	border-color: var(--terra);
	background: #fff;
}
.ts-points-redeem-field input[type="number"]:disabled {
	background: #F5F2EC;
	color: var(--dust);
	cursor: not-allowed;
}
.ts-points-redeem-submit {
	white-space: nowrap;
}
.ts-points-redeem-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.ts-points-redeem-form[aria-disabled="true"] { opacity: 0.7; }

/* Post-redemption result — the coupon code chip + copy button. */
.ts-points-redeem-result {
	margin-top: 18px;
	padding: 18px 20px;
	background: linear-gradient(135deg, #F5E8E2 0%, #F6EFE1 100%);
	border: 1px dashed var(--terra);
	border-radius: 10px;
}
.ts-points-redeem-result-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--terra);
	margin-bottom: 8px;
}
.ts-points-redeem-result-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.ts-points-redeem-code {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	background: #fff;
	border: 1px solid #ECE7E0;
	border-radius: 8px;
	padding: 8px 14px;
	letter-spacing: 0.04em;
	flex: 1;
	min-width: 180px;
}
.ts-points-redeem-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ink);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.18s, transform 0.15s;
	font-family: inherit;
}
.ts-points-redeem-copy:hover { background: var(--terra); transform: translateY(-1px); }
.ts-points-redeem-copy.is-copied { background: #4F7A4A; }
.ts-points-redeem-result-value {
	width: 100%;
	margin-top: 10px;
	font-size: 13px;
	color: var(--ink);
}

/* ── Log table ── */
.ts-points-log {
	background: #fff;
	border: 1px solid #ECE7E0;
	border-radius: 14px;
	padding: 20px 24px;
}
.ts-points-log-title {
	margin: 0 0 14px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--ink);
}
.ts-points-log-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.ts-points-log-table thead th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dust);
	padding: 8px 8px;
	border-bottom: 1px solid #ECE7E0;
}
.ts-points-log-table tbody td {
	padding: 12px 8px;
	border-bottom: 1px solid #F4F0EA;
	color: var(--ink);
	vertical-align: middle;
}
.ts-points-log-table tbody tr:last-child td { border-bottom: none; }
.ts-points-log-amount { text-align: right; font-weight: 600; white-space: nowrap; }
.ts-points-log-amount.is-positive { color: #4F7A4A; }
.ts-points-log-amount.is-negative { color: var(--terra); }

.ts-points-disabled {
	background: #FAF8F4;
	border: 1px dashed #ECE7E0;
	border-radius: 14px;
	padding: 40px;
	text-align: center;
	color: var(--dust);
}

@media (max-width: 640px) {
	.ts-points-balance-hero { padding: 28px 20px; }
	.ts-points-redeem-card { padding: 18px; }
	.ts-points-redeem-form { flex-direction: column; }
	.ts-points-log { padding: 16px; }
	.ts-points-log-table thead { display: none; }
	.ts-points-log-table, .ts-points-log-table tbody, .ts-points-log-table tr, .ts-points-log-table td { display: block; width: 100%; }
	.ts-points-log-table tbody tr { border-bottom: 1px solid #F4F0EA; padding: 10px 0; }
	.ts-points-log-table tbody td { padding: 4px 0; border: none; }
	.ts-points-log-amount { text-align: left; }
}

/* ══ LOGIN PAGE (login.html, Changes 20-10-2026): 4:5 photo + one welcome
 * line + the sign-in box (unchanged) + a quiet "Become a seller" pointer.
 * Replaces the old hero band, ACCOUNT bar, "Members get more" panel, perks
 * and quote. Photo + copy: Theme Options → Login / Register Page. ══ */
.ts-login { max-width: 1040px; margin: 0 auto; padding: 64px 40px 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 72px; align-items: center; }
.ts-login-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--ivory, #F1ECE4); }
.ts-login-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-login-side { width: 100%; min-width: 0; }
.ts-login-title { font-family: var(--ff-body); font-size: 34px; white-space: nowrap; font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; color: var(--ink); margin: 0 0 8px; }
.ts-login-sub { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 28px; min-height: 1.5em; }
.ts-login .ts-login-card { max-width: none; width: 100%; margin: 0; }
.ts-login-seller { text-align: center; font-size: 13px; color: var(--stone); margin: 20px 0 0; }
.ts-login-seller a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ts-login-seller a:hover { color: var(--mascot); }
@media (max-width: 860px) {
	.ts-login { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 36px 20px 64px; max-width: 480px; }
	.ts-login-photo { display: none; } /* phones/tablets: the sign-in box comes first; no photo */
	.ts-login-title { font-size: 30px; text-align: center; white-space: normal; }
	.ts-login-sub { text-align: center; }
}
/* login.html: the page body sits on the soft page background. */
.ts-login-main { background: var(--bg, #FAFAF6); }