← ARTSABERS

ARTSABERS — My Account ·

MAS75 Approved My Account ARTSABERS
Open in New Tab ✓ Accepted
Template type: WooCommerce + Standard — ready for /wire-template.

Mockup HTML

Open in New Tab 
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Your Workshop</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* ============================================================
   TOKENS — Kyber Hull styleguide (SAS1 v4.2.1)
   ============================================================ */
:root {
  /* Chromatic identifiers — accents only (never backgrounds/surfaces) */
  --ember-glow: #FFB347;
  --ember-bright: #FF9540;
  --ember: #FF7A2E;
  --ember-forge: #E85D18;
  --ember-deep: #D14810;
  --ember-smoulder: #8B2E08;
  --ember-scar: #5A1A00;
  --on-primary-fixed: #2A0800;

  /* Hull ladder — surface hues (used via semantic aliases below) */
  --carbon: #060606;
  --void: #0A0A0A;
  --charcoal: #141414;
  --charcoal-warm: #161412;
  --hull-panel: #1A1A1A;
  --hull-panel-lift: #242424;
  --hull-panel-dark: #0F0F0F;
  --hull-chrome-shadow: #2E2E2E;
  --hull-edge: #363636;

  /* Chrome hues */
  --chrome-highlight: #FAFAFA;
  --chrome-glint: #E8E4DD;
  --chrome-warm: #F5F0E8;
  --chrome-dim: #B8B0A6;

  /* Surface semantics — always use these for background/text */
  --bg-page: var(--carbon);
  --bg-hero: var(--charcoal);
  --bg-sidebar: var(--charcoal-warm);
  --bg-main: var(--carbon);
  --bg-card: var(--hull-panel);
  --bg-card-lift: var(--hull-panel-lift);
  --bg-recess: var(--hull-panel-dark);
  --bg-nav: var(--void);
  --bg-footer: var(--carbon);

  --outline-variant: var(--hull-panel-lift);
  --outline-edge: var(--hull-edge);

  --text-body: var(--chrome-warm);
  --text-highlight: var(--chrome-highlight);
  --text-dim: var(--chrome-dim);
  --text-on-primary: var(--on-primary-fixed);
  --text-on-ember-band: var(--on-primary-fixed);

  --accent: var(--ember);

  /* Typography */
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;

  /* Elevation */
  --panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
  --chrome-top: inset 0 1px 0 rgba(250,250,250,0.30);
  --chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.15);
  --ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
  --ember-glow-md: 0 0 24px rgba(255,122,46,0.5);
  --ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.45);
  --ember-seam-glow: 0 -8px 16px -4px rgba(255,122,46,0.45);

  --shell-max: 1440px;
  --gutter: 40px;
  --sidebar-w: 240px;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg-page); color: var(--text-body); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

input, select, textarea { font-family: inherit; }

.page { min-height: 100vh; }

/* Utility */
.container { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }

.hud-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }

.chrome-title { font-family: var(--font-display); color: var(--text-highlight); font-weight: 700; letter-spacing: 0.8px; }

/* ============================================================
   SITE NAV — signed-in state (site-nav)
   ============================================================ */
.site-nav { background: var(--bg-nav); border-bottom: 1px solid rgba(255,255,255,0.04); box-shadow: var(--chrome-top-soft); position: sticky; top: 0; z-index: 100; }

.site-nav__row { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.site-nav__brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.22em; color: var(--text-highlight); text-transform: uppercase; }

.site-nav__brand em { font-style: normal; color: var(--accent); }

.site-nav__links { display: flex; gap: 34px; }

.site-nav__link { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-body); font-weight: 500; padding: 8px 0; position: relative; }

.site-nav__link:hover { color: var(--text-highlight); }

.site-nav__actions { display: flex; align-items: center; gap: 22px; }

.site-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-body); position: relative; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; }

.site-nav__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.site-nav__account { position: relative; }

.site-nav__account::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 10px rgba(255,122,46,0.7); }

.site-nav__account-name { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-left: 6px; font-weight: 600; }

.site-nav__cart-count { position: absolute; top: -2px; right: -6px; background: var(--accent); color: var(--on-primary-fixed); font-family: var(--font-display); font-size: 10px; font-weight: 700; padding: 2px 5px; letter-spacing: 0; }

/* ============================================================
   COMPACT HERO — account-hero
   ============================================================ */
.account-hero { position: relative; background: var(--bg-hero); padding: 46px 0 42px; overflow: hidden; box-shadow: var(--chrome-top); }

.account-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent 0 78px, rgba(250,250,250,0.02) 78px 79px, transparent 79px 156px), repeating-linear-gradient(90deg, transparent 0 220px, rgba(255,122,46,0.04) 220px 221px, transparent 221px 480px); pointer-events: none; }

.account-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); opacity: 0.55; box-shadow: 0 6px 20px -2px rgba(255,122,46,0.4); }

.account-hero__inner { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }

.account-hero__col { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }

.account-hero__crumb { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }

.account-hero__crumb span { color: var(--accent); }

.account-hero__title { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: 0.8px; color: var(--text-highlight); line-height: 1.05; }

.account-hero__sub { font-family: var(--font-body); font-size: 16px; color: var(--text-body); max-width: 640px; line-height: 1.55; }

.account-hero__logout { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid rgba(255,122,46,0.45); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; background: transparent; }

.account-hero__logout::before { content: ""; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 8px rgba(255,122,46,0.6); }

/* ============================================================
   ACCOUNT SHELL — account-shell
   ============================================================ */
.account-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: 0; align-items: start; max-width: var(--shell-max); margin: 0 auto; padding: 0; background: var(--bg-main); position: relative; }

.account-shell__sidebar-wrap { position: relative; background: var(--bg-sidebar); border-right: 1px solid rgba(255,122,46,0.28); box-shadow: 1px 0 24px -12px rgba(255,122,46,0.15); }

.account-shell__main { padding: 44px var(--gutter) 60px 46px; background: var(--bg-main); }

/* ============================================================
   ACCOUNT SIDEBAR — account-sidebar
   ============================================================ */
.account-sidebar { position: sticky; top: 92px; padding: 32px 0 32px; }

.account-sidebar__header { padding: 0 22px 20px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 700; border-bottom: 1px solid rgba(255,122,46,0.2); }

.account-sidebar__list { display: flex; flex-direction: column; }

.account-sidebar__item { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--text-body); border-bottom: 1px solid rgba(255,122,46,0.14); position: relative; min-height: 52px; }

.account-sidebar__item:hover { background: rgba(255,122,46,0.05); color: var(--text-highlight); }

.account-sidebar__item--nested { padding-left: 40px; font-size: 12px; letter-spacing: 0.08em; }

.account-sidebar__item--active { background: rgba(255,122,46,0.09); color: var(--text-highlight); }

.account-sidebar__item--active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); box-shadow: 0 0 12px rgba(255,122,46,0.55); }

.account-sidebar__count { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); background: rgba(255,255,255,0.03); padding: 3px 8px; font-weight: 600; }

.account-sidebar__item--active .account-sidebar__count { color: var(--accent); background: rgba(255,122,46,0.14); }

.account-sidebar__loyalty { margin-top: 24px; padding: 20px 22px; border-top: 1px solid rgba(255,122,46,0.2); display: flex; flex-direction: column; gap: 6px; }

.account-sidebar__loyalty-points { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

.account-sidebar__loyalty-tier { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }

/* ============================================================
   SUB-SCREEN BREAK — subscreen-break
   ============================================================ */
.subscreen-break { position: relative; padding: 46px 0 38px; background: var(--bg-main); text-align: center; }

.subscreen-break::before, .subscreen-break::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--accent); opacity: 0.55; box-shadow: 0 0 14px rgba(255,122,46,0.5); }

.subscreen-break::before { top: 24px; }

.subscreen-break::after { bottom: 16px; }

.subscreen-break__label { display: inline-block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding: 10px 22px; background: var(--bg-main); position: relative; z-index: 1; }

/* ============================================================
   BORDERED CONTENT-GROUP — content-group (MAS52 fieldset pattern)
   ============================================================ */
.content-group { position: relative; border: 1px solid rgba(255,122,46,0.28); background: var(--bg-card); padding: 34px 32px 32px; margin-top: 18px; box-shadow: var(--panel-lift); }

.content-group__legend { position: absolute; top: -10px; left: 24px; padding: 0 12px; background: var(--bg-main); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 700; }

.content-group__legend em { font-style: normal; color: var(--text-dim); padding-left: 6px; }

.content-group__body { display: flex; flex-direction: column; gap: 18px; }

.content-group--recess { background: var(--bg-recess); }

/* ============================================================
   RECENT ORDER CARD — recent-order-card (composite)
   ============================================================ */
.recent-order { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: start; }

.recent-order__left { display: flex; flex-direction: column; gap: 18px; }

.recent-order__number { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text-highlight); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

.recent-order__meta { font-family: var(--font-body); font-size: 14px; color: var(--text-dim); }

.recent-order__stage { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(232,93,24,0.16); border: 1px solid rgba(255,122,46,0.4); color: var(--ember-glow); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; align-self: flex-start; }

.recent-order__stage::before { content: ""; width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 10px rgba(255,122,46,0.7); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.recent-order__item-summary { font-family: var(--font-body); font-size: 16px; color: var(--text-body); line-height: 1.5; }

.recent-order__item-summary strong { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

.recent-order__footer { margin-top: 24px; display: flex; gap: 14px; }

/* Vertical tracking timeline */
.recent-order__track { position: relative; padding-left: 26px; }

.recent-order__track::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: rgba(255,122,46,0.25); }

.recent-order__stage-row { position: relative; padding: 10px 0 22px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; }

.recent-order__stage-row::before { content: ""; position: absolute; left: -26px; top: 14px; width: 12px; height: 12px; border: 1.5px solid rgba(255,122,46,0.4); background: var(--bg-card); }

.recent-order__stage-row--done::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(255,122,46,0.7); }

.recent-order__stage-row--active::before { background: var(--ember-glow); border-color: var(--ember-glow); box-shadow: 0 0 16px rgba(255,179,71,0.9); }

.recent-order__stage-name { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-highlight); font-weight: 600; }

.recent-order__stage-row--pending .recent-order__stage-name { color: var(--text-dim); }

.recent-order__stage-date { font-family: var(--font-display); font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

/* Composite line-item (MAS57 pattern) — neutral polycarbonate rendering */
.line-item { display: grid; grid-template-columns: 78px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.05); }

.line-item + .line-item { margin-top: 0; }

.line-item__thumb { position: relative; width: 78px; height: 96px; background: var(--bg-recess); box-shadow: var(--chrome-top-soft); display: flex; align-items: center; justify-content: center; padding: 8px 0; overflow: hidden; }

.line-item__thumb::before { content: ""; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 22px; height: 30px; background: linear-gradient(180deg, var(--hull-edge) 0%, var(--hull-panel-lift) 100%); box-shadow: var(--chrome-top-soft); }

.line-item__blade { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 5px; height: 40px; background: linear-gradient(180deg, rgba(232,228,221,0.85) 0%, rgba(232,228,221,0.15) 100%); box-shadow: 0 0 8px rgba(232,228,221,0.35); }

.line-item__body { display: flex; flex-direction: column; gap: 4px; }

.line-item__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-highlight); letter-spacing: 0.8px; }

.line-item__spec { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }

.line-item__spec span { color: var(--text-body); }

.line-item__price { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ============================================================
   BUTTONS — btn-primary, btn-ghost
   ============================================================ */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%); color: var(--text-on-primary); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: var(--ember-glow-sm); border: 0; transition: box-shadow 0.2s; }

.btn-primary:hover { box-shadow: var(--ember-glow-md); }

.btn-primary--wide { padding: 16px 34px; }

.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; background: transparent; color: var(--accent); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid rgba(255,122,46,0.5); transition: background 0.2s, box-shadow 0.2s; }

.btn-ghost:hover { background: var(--hull-panel-lift); box-shadow: var(--chrome-top-soft); }

.btn-inline { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid rgba(255,122,46,0.35); padding-bottom: 2px; }

.btn-inline:hover { color: var(--ember-glow); border-bottom-color: var(--ember-glow); }

/* ============================================================
   LOYALTY BAND — loyalty-band (ember-forge tinted)
   ============================================================ */
.loyalty-band { margin: 34px 0 0; position: relative; padding: 30px 34px; background: linear-gradient(180deg, rgba(232,93,24,0.14) 0%, rgba(139,46,8,0.18) 100%); border-top: 1px solid rgba(255,122,46,0.5); border-bottom: 1px solid rgba(255,122,46,0.5); box-shadow: 0 -4px 20px -8px rgba(255,122,46,0.35), 0 4px 20px -8px rgba(255,122,46,0.35); }

.loyalty-band__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }

.loyalty-band__title { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--text-highlight); letter-spacing: 0.8px; margin-top: 8px; line-height: 1.15; }

.loyalty-band__sub { font-family: var(--font-body); font-size: 14px; color: var(--text-body); margin-top: 8px; max-width: 460px; }

.loyalty-band__progress { position: relative; }

.loyalty-band__bar { position: relative; height: 10px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,122,46,0.35); overflow: hidden; }

.loyalty-band__fill { position: absolute; top: 0; left: 0; bottom: 0; width: 78%; background: linear-gradient(90deg, var(--ember-glow) 0%, var(--ember) 60%, var(--ember-deep) 100%); box-shadow: 0 0 12px rgba(255,122,46,0.5); }

.loyalty-band__tiers { display: flex; justify-content: space-between; margin-top: 12px; }

.loyalty-band__tier { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }

.loyalty-band__tier--current { color: var(--accent); font-weight: 700; position: relative; }

.loyalty-band__tier--current::before { content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: var(--ember-glow); box-shadow: 0 0 8px rgba(255,179,71,0.9); }

/* ============================================================
   ADDRESS PAIR — address-summary-pair
   ============================================================ */
.address-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }

.address-summary { font-family: var(--font-body); font-size: 14px; color: var(--text-body); line-height: 1.75; }

.address-summary strong { color: var(--text-highlight); font-weight: 600; }

.address-summary__actions { margin-top: 18px; display: flex; gap: 20px; }

/* ============================================================
   RECOMMENDED ACTIONS BAND — recommended-actions
   ============================================================ */
.recommended { margin-top: 46px; padding-top: 34px; border-top: 1px solid rgba(255,122,46,0.28); }

.rec-card { padding: 22px 22px 24px; background: var(--bg-card); box-shadow: var(--panel-lift); border: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 12px; }

.rec-card__glyph { width: 32px; height: 32px; border: 1px solid rgba(255,122,46,0.4); display: flex; align-items: center; justify-content: center; color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 16px; }

.rec-card__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-highlight); letter-spacing: 0.8px; }

.rec-card__body { font-family: var(--font-body); font-size: 13px; color: var(--text-body); line-height: 1.5; flex: 1; }

.rec-card__cta { margin-top: 8px; }

/* ============================================================
   SUB-SCREEN HEADER — subscreen-header
   ============================================================ */
.subscreen-header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding-top: 4px; }

.subscreen-header__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-highlight); letter-spacing: 0.8px; text-transform: uppercase; }

.subscreen-header__title--ember { color: var(--accent); letter-spacing: 0.8px; }

/* ============================================================
   FILTER CHIPS — filter-chips
   ============================================================ */
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.06); }

.filter-chip { padding: 8px 16px; border: 1px solid rgba(255,255,255,0.1); background: transparent; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }

.filter-chip--active { border-color: var(--accent); color: var(--accent); background: rgba(255,122,46,0.08); box-shadow: var(--ember-glow-sm); }

/* ============================================================
   ORDERS TABLE — orders-table
   ============================================================ */
.orders-table { width: 100%; border-collapse: collapse; background: var(--bg-card); box-shadow: var(--panel-lift); }

.orders-table thead th { padding: 16px 18px; text-align: left; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid rgba(255,122,46,0.3); background: var(--bg-recess); }

.orders-table tbody td { padding: 22px 18px; font-family: var(--font-body); font-size: 14px; color: var(--text-body); border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }

.orders-table__id { font-family: var(--font-display); font-weight: 700; color: var(--text-highlight); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }

.orders-table__total { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

.orders-table__thumbs { display: flex; gap: 6px; }

.orders-table__thumb { width: 32px; height: 40px; background: var(--bg-recess); border: 1px solid rgba(255,255,255,0.06); position: relative; box-shadow: var(--chrome-top-soft); }

.orders-table__thumb::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 3px; height: 16px; background: linear-gradient(180deg, rgba(232,228,221,0.85) 0%, rgba(232,228,221,0.2) 100%); box-shadow: 0 0 4px rgba(232,228,221,0.35); }

.orders-table__thumb::after { content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 12px; height: 16px; background: var(--hull-edge); }

.orders-table__actions { display: flex; gap: 16px; justify-content: flex-end; }

.orders-table__pagination { margin-top: 20px; padding: 14px 18px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }

.status-pill::before { content: ""; width: 6px; height: 6px; background: currentColor; }

.status-pill--workshop { color: var(--ember-glow); background: rgba(232,93,24,0.14); border: 1px solid rgba(255,122,46,0.5); box-shadow: var(--ember-glow-sm); }

.status-pill--dispatched { color: var(--accent); border: 1px solid rgba(255,122,46,0.35); background: transparent; }

.status-pill--delivered { color: var(--text-highlight); border: 1px solid rgba(250,250,250,0.35); background: rgba(250,250,250,0.03); }

.status-pill--delivered::before { background: var(--chrome-highlight); }

/* ============================================================
   HORIZONTAL TIMELINE — tracking-timeline-h (MAS62)
   ============================================================ */
.timeline-h { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 30px 0 12px; margin-top: 6px; }

.timeline-h::before { content: ""; position: absolute; top: 43px; left: 8%; right: 8%; height: 1px; background: rgba(255,122,46,0.25); z-index: 0; }

.timeline-h__stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

.timeline-h__dot { width: 26px; height: 26px; border: 1.5px solid rgba(255,122,46,0.4); background: var(--bg-main); position: relative; }

.timeline-h__stage--done .timeline-h__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px rgba(255,122,46,0.6); }

.timeline-h__stage--active .timeline-h__dot { background: var(--ember-glow); border-color: var(--ember-glow); box-shadow: 0 0 20px rgba(255,179,71,0.9); }

.timeline-h__stage--active .timeline-h__dot::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(255,179,71,0.4); }

.timeline-h__name { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-highlight); }

.timeline-h__stage--pending .timeline-h__name { color: var(--text-dim); }

.timeline-h__date { font-family: var(--font-display); font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

/* ============================================================
   ORDER DETAIL LAYOUT — order-detail
   ============================================================ */
.order-detail { display: grid; grid-template-columns: 1.85fr 1fr; gap: 34px; align-items: start; margin-top: 8px; }

.order-detail__col-left { display: flex; flex-direction: column; gap: 24px; }

.order-detail__col-right { position: sticky; top: 100px; }

/* Order Summary — sticky (MAS60) */
.order-summary { background: var(--bg-card); padding: 26px 24px; box-shadow: var(--panel-lift); border-top: 1px solid rgba(255,122,46,0.4); }

.order-summary__title { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 20px; }

.order-summary__row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; font-family: var(--font-body); font-size: 14px; color: var(--text-body); }

.order-summary__row + .order-summary__row { border-top: 1px dashed rgba(255,255,255,0.08); }

.order-summary__row--total { padding-top: 18px; margin-top: 4px; border-top: 1px solid rgba(255,122,46,0.4); }

.order-summary__row--total .order-summary__value { color: var(--accent); font-size: 20px; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

.order-summary__label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

.order-summary__value { font-family: var(--font-display); color: var(--text-body); font-variant-numeric: tabular-nums; font-weight: 600; }

.order-summary__payment { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); font-family: var(--font-body); font-size: 13px; color: var(--text-body); display: flex; align-items: center; gap: 10px; }

.order-summary__payment-brand { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 28px; background: var(--bg-recess); border: 1px solid rgba(255,255,255,0.1); font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--text-highlight); letter-spacing: 0.08em; }

.order-summary__actions { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 14px; }

.shipment-lines { display: flex; flex-direction: column; }

/* ============================================================
   ADDRESS FORM — address-form (MAS52 primitives)
   ============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }

.form-grid__row--full { grid-column: 1 / -1; }

.form-field { display: flex; flex-direction: column; gap: 8px; }

.form-field__label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }

.form-field__input { padding: 12px 0 12px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.14); color: var(--text-highlight); font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }

.form-field__input:focus { border-bottom-color: var(--accent); box-shadow: 0 4px 10px -6px rgba(255,122,46,0.6); }

.form-field__input--focused { border-bottom-color: var(--accent); box-shadow: 0 4px 10px -6px rgba(255,122,46,0.6); }

.form-field__select { padding: 12px 0 12px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.14); color: var(--text-highlight); font-family: var(--font-body); font-size: 16px; outline: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 6px) calc(50% - 2px); background-size: 6px 6px; background-repeat: no-repeat; }

.form-field__hint { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

.form-field__counter { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.1em; color: var(--text-dim); text-align: right; }

.form-actions { margin-top: 28px; display: flex; gap: 14px; align-items: center; }

/* Password strength meter */
.strength-meter { display: flex; gap: 4px; margin-top: 8px; }

.strength-meter__seg { flex: 1; height: 3px; background: rgba(255,255,255,0.08); }

.strength-meter__seg--on { background: linear-gradient(90deg, var(--ember-glow) 0%, var(--ember) 100%); box-shadow: 0 0 6px rgba(255,122,46,0.5); }

.strength-meter__label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: 6px; font-weight: 600; }

/* Match indicator */
.form-field__match { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 6px; margin-top: 4px; }

.form-field__match::before { content: ""; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 6px rgba(255,122,46,0.7); }

/* Toggle rows (checkboxes) */
.toggle-row { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.06); align-items: start; }

.toggle-row:first-child { border-top: 0; padding-top: 6px; }

.toggle-check { position: relative; width: 22px; height: 22px; border: 1.5px solid rgba(255,122,46,0.4); background: var(--bg-recess); margin-top: 2px; }

.toggle-check--on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(255,122,46,0.5); }

.toggle-check--on::after { content: ""; position: absolute; top: 3px; left: 7px; width: 5px; height: 11px; border: solid var(--on-primary-fixed); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.toggle-check--locked { opacity: 0.75; }

.toggle-row__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-highlight); letter-spacing: 0.8px; }

.toggle-row__desc { font-family: var(--font-body); font-size: 13px; color: var(--text-body); margin-top: 4px; line-height: 1.5; }

.toggle-row__meta { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; }

/* ============================================================
   PAYMENT METHODS — payment-methods
   ============================================================ */
.pay-card { display: flex; flex-direction: column; gap: 16px; }

.pay-card__brand-row { display: flex; align-items: center; gap: 16px; }

.pay-card__brand { display: flex; align-items: center; justify-content: center; width: 54px; height: 34px; background: var(--bg-recess); border: 1px solid rgba(255,255,255,0.1); font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--text-highlight); letter-spacing: 0.1em; box-shadow: var(--chrome-top-soft); }

.pay-card__number { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-highlight); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.pay-card__meta { font-family: var(--font-body); font-size: 13px; color: var(--text-body); }

.pay-card__meta strong { color: var(--text-highlight); font-weight: 600; }

.pay-card__actions { margin-top: 8px; display: flex; gap: 20px; }

.wallet-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }

.wallet-row__label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; padding: 8px 0; margin-right: 8px; }

.wallet-chip { padding: 8px 16px; border: 1px solid rgba(255,122,46,0.35); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-body); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

.wallet-chip--soon { color: var(--text-dim); border-color: rgba(255,255,255,0.1); }

.wallet-chip__meta { color: var(--text-dim); font-size: 9px; letter-spacing: 0.12em; }

/* ============================================================
   WISHLIST — wishlist-grid + product-card
   ============================================================ */
.wishlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 6px; }

.product-card__media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 90%, rgba(255,122,46,0.14) 0%, transparent 55%); pointer-events: none; }

/* ============================================================
   NEWSLETTER CAPTURE — capture-band (MAS73 ember-ombre)
   ============================================================ */
.capture-band { position: relative; padding: 100px 0 96px; background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 42%, var(--ember-forge) 100%); overflow: hidden; margin-top: 40px; }

.capture-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 12%, rgba(255,235,180,0.65) 0%, transparent 45%); pointer-events: none; }

.capture-band::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,235,180,0.85); box-shadow: 0 2px 20px rgba(255,235,180,0.7); }

.capture-band__inner { position: relative; max-width: 780px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }

.capture-band__eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-on-ember-band); font-weight: 700; opacity: 0.85; }

.capture-band__title { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: var(--text-on-ember-band); letter-spacing: 0.8px; margin-top: 20px; line-height: 1.05; }

.capture-band__sub { font-family: var(--font-body); font-size: 16px; color: var(--text-on-ember-band); opacity: 0.82; margin-top: 20px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.55; }

.capture-band__form { display: flex; gap: 12px; margin-top: 40px; align-items: stretch; max-width: 520px; margin-left: auto; margin-right: auto; }

.capture-band__input { flex: 1; padding: 16px 20px; background: rgba(42,8,0,0.2); border: 1px solid rgba(42,8,0,0.35); font-family: var(--font-body); font-size: 16px; color: var(--text-on-ember-band); outline: none; }

.capture-band__input::placeholder { color: rgba(42,8,0,0.55); }

.capture-band__input:focus { border-color: var(--on-primary-fixed); background: rgba(42,8,0,0.28); }

.capture-band__cta { padding: 16px 28px; background: transparent; border: 1.5px solid var(--on-primary-fixed); color: var(--text-on-ember-band); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

.capture-band__cta:hover { background: var(--on-primary-fixed); color: var(--ember-glow); }

/* ============================================================
   SITE FOOTER — site-footer
   ============================================================ */
.site-footer { background: var(--bg-footer); position: relative; padding: 74px 0 30px; }

.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--accent); opacity: 0.55; box-shadow: 0 -6px 20px rgba(255,122,46,0.4); }

.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 44px; }

.site-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }

.site-footer__brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.22em; color: var(--text-highlight); text-transform: uppercase; }

.site-footer__brand-name em { font-style: normal; color: var(--accent); }

.site-footer__tag { font-family: var(--font-body); font-size: 13px; color: var(--text-body); line-height: 1.6; }

.site-footer__col-title { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 18px; }

.site-footer__link-list { display: flex; flex-direction: column; gap: 12px; }

.site-footer__link { font-family: var(--font-body); font-size: 13px; color: var(--text-dim); }

.site-footer__link:hover { color: var(--text-highlight); }

.site-footer__bottom { margin-top: 60px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; gap: 20px; }

.site-footer__legal { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }

.site-footer__pay-methods { display: flex; gap: 10px; align-items: center; }

.site-footer__pay-methods span { display: flex; align-items: center; justify-content: center; width: 42px; height: 26px; background: var(--bg-recess); border: 1px solid rgba(255,255,255,0.08); font-family: var(--font-display); font-size: 9px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.06em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .site-nav__links { display: none; }
  .account-hero__title { font-size: 32px; letter-spacing: 0.8px; }
  .account-shell { grid-template-columns: 1fr; }
  .account-shell__sidebar-wrap { border-right: 0; border-bottom: 1px solid rgba(255,122,46,0.3); }
  .account-sidebar { position: relative; top: 0; padding: 22px 0; }
  .recent-order { grid-template-columns: 1fr; gap: 30px; }
  .loyalty-band__inner { grid-template-columns: 1fr; gap: 24px; }
  .address-pair { grid-template-columns: 1fr; }
  .recommended__grid { grid-template-columns: 1fr; }
  .order-detail { grid-template-columns: 1fr; }
  .order-detail__col-right { position: static; }
  .form-grid { grid-template-columns: 1fr; }
  .wishlist-grid { grid-template-columns: 1fr; }
  .capture-band__title { font-size: 36px; letter-spacing: 0.8px; }
  .capture-band__form { flex-direction: column; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .orders-table { display: block; overflow-x: auto; }
}

/* orbitron-retrofit: title-em italic kill */
[class*="__title"] em, [class*="__title"] i,
[class*="-title"] em, [class*="-title"] i,
[class*="__heading"] em, [class*="__heading"] i,
[class*="-heading"] em, [class*="-heading"] i { font-style: normal; }

/* -- Reconciled from family 14002 canonical 12840:tf-newsletter-signup -- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }

/* =========================================================
   CAPTURE BAND — full orange ombre (biggest ember moment)
   ========================================================= */
.capture {
  position: relative;
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember-bright) 25%, var(--ember) 55%, var(--ember-forge) 100%);
  padding: 140px 0;
  box-shadow:
    inset 0 2px 0 rgba(255,235,180,0.55),
    inset 0 -1px 0 rgba(90,26,0,0.55),
    0 -12px 40px -8px rgba(255,122,46,0.55);
  overflow: hidden;
}

.capture::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,235,180,0.35) 0%, rgba(255,235,180,0) 55%),
    radial-gradient(ellipse at 80% 70%, rgba(209,72,16,0.35) 0%, rgba(209,72,16,0) 60%);
  pointer-events: none;
}

.capture__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  z-index: 2;
}

.capture__copy { max-width: 620px; }

.capture__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-primary-fixed);
  opacity: 0.72;
  margin-bottom: 20px;
}

.capture__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.5vw, 78px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--on-primary-fixed);
  margin-bottom: 24px;
}

.capture__sub {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-primary-fixed);
  opacity: 0.86;
  max-width: 520px;
}

.capture__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 44px;
  background: rgba(20,20,20,0.94);
  box-shadow:
    inset 0 1px 0 rgba(250,250,250,0.2),
    0 30px 60px -20px rgba(0,0,0,0.7);
}

.capture__form-lbl {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember-glow);
}

.capture__form-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(184,176,166,0.35);
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--chrome-warm);
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.capture__form-input::placeholder { color: var(--chrome-dim); opacity: 0.7; }

.capture__form-input:focus {
  border-bottom-color: var(--ember);
  box-shadow: 0 2px 12px -2px rgba(255,122,46,0.4);
}

.capture__form-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 30px;
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
  color: var(--on-primary-fixed);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  box-shadow: var(--ember-glow-sm);
  transition: box-shadow 200ms ease;
  margin-top: 8px;
}

.capture__form-cta:hover { box-shadow: var(--ember-glow-md); }

.capture__form-fine {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--chrome-dim);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .container { padding: 0 24px; }
  .promo-bar__inner { gap: 16px; font-size: 10px; }
  .promo-bar__item { gap: 16px; }
  .hero__telemetry-row { flex-wrap: wrap; gap: 20px; }
  .hero__tagline { display: none; }
  .trust-bar__row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .trust-bar__cell { border-right: 0; padding: 4px 12px; }
  .saber-core__grid { grid-template-columns: 1fr; }
  .faction-grid { grid-template-columns: 1fr; }
  .faction-tile { height: 340px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .section-head__right { text-align: left; }
  .capture { padding: 90px 0; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__base { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* -- Reconciled from family 13999 canonical 13492:tf-trust-prose-cells-1 -- */
:root {
  /* Orange ombre */
  --ember-glow: #FFB347;
  --ember-bright: #FF9540;
  --ember: #FF7A2E;
  --ember-forge: #E85D18;
  --ember-deep: #D14810;
  --ember-smoulder: #8B2E08;
  --ember-scar: #5A1A00;
  --on-primary-fixed: #2A0800;

  /* Hull ladder */
  --carbon: #060606;
  --void: #0A0A0A;
  --charcoal: #141414;
  --charcoal-warm: #161412;
  --hull-panel: #1A1A1A;
  --hull-panel-lift: #242424;
  --hull-panel-dark: #0F0F0F;
  --hull-chrome-shadow: #2E2E2E;
  --hull-edge: #363636;

  /* Chrome / white highlights */
  --chrome-highlight: #FAFAFA;
  --chrome-glint: #E8E4DD;
  --chrome-warm: #F5F0E8;
  --chrome-dim: #B8B0A6;

  /* Semantic surface roles */
  --bg-carbon: var(--carbon);
  --bg-void: var(--void);
  --bg-charcoal: var(--charcoal);
  --bg-charcoal-warm: var(--charcoal-warm);
  --bg-card: rgba(20,20,20,0.94);
  --bg-card-dark: rgba(15,15,15,0.90);
  --bg-card-lift: var(--hull-panel-lift);

  /* Text roles */
  --text-primary: var(--chrome-warm);
  --text-headline: var(--chrome-highlight);
  --text-dim: var(--chrome-dim);
  --text-accent: var(--ember);
  --text-on-ember: var(--on-primary-fixed);

  /* Elevation */
  --panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
  --panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 16px 40px -12px rgba(0,0,0,0.95);
  --ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
  --ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
  --ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
  --chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);

  /* Type */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Onest', sans-serif;
}

/* ---------- Global helpers ---------- */
.container { max-width: 1320px; margin: 0 auto; padding: 0 48px; }

.container--narrow { max-width: 880px; margin: 0 auto; padding: 0 48px; }

.container--reading { max-width: 1120px; margin: 0 auto; padding: 0 48px; }

.cta-primary .arrow { font-size: 16px; margin-left: 2px; }

.results-band--patterned > .container { position: relative; z-index: 1; }

.pagination-cta__link .arrow { color: var(--ember); font-size: 14px; }

.category-hit__chip .arrow { color: var(--ember); font-size: 16px; }

/* ============================================================
   BLOCK — deflection-band + deflection-cell
============================================================ */
.deflection {
  background: var(--carbon);
  padding: 88px 0 96px;
  position: relative;
}

.deflection__head {
  max-width: 780px;
  margin-bottom: 44px;
}

.deflection__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.deflection__eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(255,122,46,0.6);
}

.deflection__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.8px;
  color: var(--chrome-highlight);
  margin: 0;
}

.deflection__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.deflection-cell {
  padding: 36px 32px 32px;
  background: var(--hull-panel);
  box-shadow: var(--panel-lift);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 260px;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.deflection-cell:hover { box-shadow: var(--panel-lift-hover); transform: translateY(-2px); }

.deflection-cell__index {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 10px;
}

.deflection-cell__index .num { color: var(--chrome-highlight); font-weight: 700; }

.deflection-cell__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--chrome-warm);
  line-height: 1.3;
  margin: 0; letter-spacing: 0.8px; }

.deflection-cell__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--chrome-dim);
  margin: 0;
  flex: 1;
}

.deflection-cell__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  padding-top: 16px;
  border-top: 1px solid rgba(46,46,46,0.6);
  transition: color 160ms ease, gap 160ms ease;
}

.deflection-cell__cta:hover { color: var(--ember-glow); gap: 12px; }

/* -- Reconciled from family 14002 canonical 12840:tf-newsletter-signup -- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }

@media (max-width: 640px) {
  .container { padding: 0 24px; }
  .promo-bar__inner { gap: 16px; font-size: 10px; }
  .promo-bar__item { gap: 16px; }
  .hero__telemetry-row { flex-wrap: wrap; gap: 20px; }
  .hero__tagline { display: none; }
  .trust-bar__row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .trust-bar__cell { border-right: 0; padding: 4px 12px; }
  .saber-core__grid { grid-template-columns: 1fr; }
  .faction-grid { grid-template-columns: 1fr; }
  .faction-tile { height: 340px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .section-head__right { text-align: left; }
  .capture { padding: 90px 0; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__base { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
   channels above/below were removed 2026-07-07 because they read as a
   second seam next to the ember line rather than a physical join. */

/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
  box-shadow:
    inset 0 1px 0 rgba(250,250,250,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 10px 28px -10px rgba(0,0,0,0.95),
    0 2px 6px -2px rgba(0,0,0,0.7);
  position: relative;
}

.product-card:hover {
  box-shadow: var(--panel-lift-hover);
  transform: translateY(-3px);
}

.product-card--featured:hover {
  box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}

.product-card:hover .product-card__img { transform: scale(1.03); }

.product-card__stage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
  z-index: 1;
  pointer-events: none;
}

.product-card__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
  z-index: 2;
  filter: blur(3px);
}

/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
   channels above/below were removed 2026-07-07 because they read as a
   second seam next to the ember line rather than a physical join. */

/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
  box-shadow:
    inset 0 1px 0 rgba(250,250,250,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 10px 28px -10px rgba(0,0,0,0.95),
    0 2px 6px -2px rgba(0,0,0,0.7);
  position: relative;
}

.product-card:hover {
  box-shadow: var(--panel-lift-hover);
  transform: translateY(-3px);
}

.product-card--featured:hover {
  box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}

.product-card:hover .product-card__img { transform: scale(1.03); }

.product-card__stage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
  z-index: 1;
  pointer-events: none;
}

.product-card__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
  z-index: 2;
  filter: blur(3px);
}

/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
   channels above/below were removed 2026-07-07 because they read as a
   second seam next to the ember line rather than a physical join. */

/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
  box-shadow:
    inset 0 1px 0 rgba(250,250,250,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 10px 28px -10px rgba(0,0,0,0.95),
    0 2px 6px -2px rgba(0,0,0,0.7);
  position: relative;
}

.product-card:hover {
  box-shadow: var(--panel-lift-hover);
  transform: translateY(-3px);
}

.product-card--featured:hover {
  box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}

.product-card:hover .product-card__img { transform: scale(1.03); }

.product-card__stage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
  z-index: 1;
  pointer-events: none;
}

.product-card__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
  z-index: 2;
  filter: blur(3px);
}

.product-card {
  background: var(--bg-patterned-card);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: var(--panel-lift);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
}

.product-card:hover {
  box-shadow: var(--panel-lift-hover), 0 0 32px rgba(255,122,46,0.2);
  transform: translateY(-4px);
}

.product-card--hot { box-shadow: var(--panel-lift), var(--ember-hot-rim); }

.product-card--hot:hover { box-shadow: var(--panel-lift-hover), var(--ember-hot-rim), 0 0 40px rgba(255,122,46,0.4); }

.product-card__media {
  position: relative;
  aspect-ratio: 1/1;
  background-color: #0a0a0a;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.product-card__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(255,122,46,0.8);
}

.product-card__badge--low::before {
  background: var(--ember-glow);
}

.product-card__body {
  background: var(--hull-panel-lift);
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__meta {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-dim);
  margin-bottom: 10px;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--chrome-highlight);
  margin-bottom: 14px;
  line-height: 1.1;
}

.product-card__specs {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dotted rgba(184,176,166,0.2);
}

.product-card__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 12px;
  padding: 4px 0;
}

.product-card__spec-label {
  color: var(--chrome-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-display);
}

.product-card__spec-value {
  color: var(--chrome-warm);
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.product-card__price {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}

.product-card__cta {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-warm);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ember);
  transition: color 0.2s;
}

.product-card__cta:hover { color: var(--ember); }

/* -- Reconciled from family 14007 canonical 12913:tf-stock-status-chip -- */
:root {
  /* Ember ombre */
  --ember-glow: #FFB347;
  --ember-bright: #FF9540;
  --ember: #FF7A2E;
  --ember-forge: #E85D18;
  --ember-deep: #D14810;
  --ember-smoulder: #8B2E08;
  --ember-scar: #5A1A00;
  --on-primary-fixed: #2A0800;

  /* Hull ladder */
  --carbon: #060606;
  --void: #0A0A0A;
  --charcoal: #141414;
  --charcoal-warm: #161412;
  --hull-panel: #1A1A1A;
  --hull-panel-lift: #242424;
  --hull-panel-dark: #0F0F0F;
  --hull-chrome-shadow: #2E2E2E;
  --hull-edge: #363636;

  /* Chrome */
  --chrome-highlight: #FAFAFA;
  --chrome-glint: #E8E4DD;
  --chrome-warm: #F5F0E8;
  --chrome-dim: #B8B0A6;

  /* Semantic surfaces */
  --bg-page: var(--carbon);
  --bg-card: var(--hull-panel);
  --bg-card-lift: var(--hull-panel-lift);
  --bg-card-dark: var(--hull-panel-dark);
  --bg-patterned-card: rgba(20, 20, 20, 0.94);
  --bg-patterned-tile: rgba(15, 15, 15, 0.90);

  /* Text roles */
  --text-primary: var(--chrome-warm);
  --text-heading: var(--chrome-highlight);
  --text-dim: var(--chrome-dim);
  --text-on-ember: var(--on-primary-fixed);
  --text-accent: var(--ember);

  /* Fonts */
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;

  /* Type scale */
  --type-hero: 128px;
  --type-h1: 84px;
  --type-h2: 60px;
  --type-h3: 40px;
  --type-h4: 28px;
  --type-body: 16px;
  --type-small: 14px;
  --type-label: 12px;

  /* Spacing */
  --space-hero: 160px;
  --space-section: 120px;
  --space-band: 32px;
  --space-card: 32px;

  /* Shadows */
  --panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
  --panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 12px 32px -8px rgba(0,0,0,0.95);
  --ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
  --ember-glow-md: 0 0 28px rgba(255,122,46,0.5);
  --ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
  --modal-glow: 0 24px 64px -12px rgba(0,0,0,0.9), 0 0 32px rgba(255,122,46,0.2);
}

.product-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  background: rgba(6,6,6,0.85);
  color: var(--ember);
  border: 1px solid rgba(255,122,46,0.4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-card__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(255,122,46,0.8);
}

.product-card__badge--low {
  color: var(--ember-glow);
  border-color: rgba(255,179,71,0.5);
}

.product-card__badge--low::before {
  background: var(--ember-glow);
}
/* -- Reconciled from family 14019 canonical 13493:tf-filter-chip-strip-1 -- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ============================================================
   FILTER CHIPS — filter-chips
   ============================================================ */
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.06); }

.filter-chip { padding: 8px 16px; border: 1px solid rgba(255,255,255,0.1); background: transparent; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }

.filter-chip--active { border-color: var(--accent); color: var(--accent); background: rgba(255,122,46,0.08); box-shadow: var(--ember-glow-sm); }
</style>
</head>
<body>
<div class="page">

<!-- ============================================================
     SITE NAV — signed-in state
     ============================================================ -->
<nav class="site-nav">
  <div class="container site-nav__row">
    <a class="site-nav__brand" href="#">ART<em>SABERS</em></a>
    <div class="site-nav__links">
      <a class="site-nav__link" href="#">Sabers</a>
      <a class="site-nav__link" href="#">Helmets</a>
      <a class="site-nav__link" href="#">Parts</a>
      <a class="site-nav__link" href="#">Bundles</a>
      <a class="site-nav__link" href="#">Guides</a>
      <a class="site-nav__link" href="#">Support</a>
    </div>
    <div class="site-nav__actions">
      <a class="site-nav__icon" href="#" aria-label="Search">
        <svg viewbox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg>
      </a>
      <a class="site-nav__icon site-nav__account" href="#" aria-label="Your workshop">
        <svg viewbox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4.5 3.5-8 8-8s8 3.5 8 8"></path></svg>
        <span class="site-nav__account-name">Alex</span>
      </a>
      <a class="site-nav__icon" href="#" aria-label="Cart" style="position:relative;">
        <svg viewbox="0 0 24 24"><path d="M4 6h16l-2 12H6L4 6z"></path><path d="M9 6V4a3 3 0 0 1 6 0v2"></path></svg>
        <span class="site-nav__cart-count">1</span>
      </a>
    </div>
  </div>
</nav>

<!-- ============================================================
     COMPACT HERO
     ============================================================ -->
<a id="tf-hero-utility" data-tf-family="hero-utility" style="display:contents"></a>
<section class="account-hero">
  <div class="container account-hero__inner">
    <div class="account-hero__col">
      <div class="account-hero__crumb">HOME  /  <span>YOUR WORKSHOP</span></div>
      <div class="eyebrow">YOUR WORKSHOP</div>
      <h1 class="account-hero__title">Welcome back, Alex.</h1>
      <p class="account-hero__sub">Your orders, saved addresses, and payment methods live here. And so does your loyalty status.</p>
    </div>
    <button class="account-hero__logout" type="button">Log out</button>
  </div>
</section>

<!-- ============================================================
     SHELL 1 — DASHBOARD ACTIVE (fully rendered)
     ============================================================ -->
<a id="tf-account-dashboard-shell" data-tf-family="account-dashboard-shell" style="display:contents"></a>
<div class="account-shell">
  <div class="account-shell__sidebar-wrap">
    <aside class="account-sidebar">
      <div class="account-sidebar__header">YOUR WORKSHOP</div>
      <a id="tf-account-tab-nav" data-tf-family="account-tab-nav" style="display:contents"></a>
<nav class="account-sidebar__list">
        <a class="account-sidebar__item account-sidebar__item--active" href="#">Dashboard</a>
        <a class="account-sidebar__item" href="#">Orders <span class="account-sidebar__count">4</span></a>
        <a class="account-sidebar__item account-sidebar__item--nested" href="#">Order Detail</a>
        <a class="account-sidebar__item" href="#">Addresses</a>
        <a class="account-sidebar__item" href="#">Payment methods</a>
        <a class="account-sidebar__item" href="#">Security</a>
        <a class="account-sidebar__item" href="#">Wishlist <span class="account-sidebar__count">6</span></a>
      </nav>
      <div class="account-sidebar__loyalty">
        <div class="account-sidebar__loyalty-points">2,340 POINTS</div>
        <div class="account-sidebar__loyalty-tier">Gold tier</div>
      </div>
    </aside>
  </div>
  <main class="account-shell__main">

    <!-- Recent order card -->
    <div class="content-group">
      <div class="content-group__legend">YOUR MOST RECENT ORDER</div>
      <a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<div class="recent-order">
        <div class="recent-order__left">
          <div class="recent-order__number">#12345</div>
          <div class="recent-order__meta">Placed 8 July 2026</div>
          <span class="recent-order__stage">In workshop</span>
          <div class="recent-order__item-summary">2 items  ·  <strong>£745.00</strong>  ·  Delivery 12–14 August (Shipment 1 of 2)</div>

          <div class="line-item">
            <div class="line-item__thumb"><div class="line-item__blade"></div></div>
            <div class="line-item__body">
              <div class="line-item__title">Starkiller SE</div>
              <div class="line-item__spec">Neopixel  ·  <span>92cm blade</span>  ·  Heavy duelling</div>
            </div>
            <div class="line-item__price">£399.00</div>
          </div>
          <div class="line-item">
            <div class="line-item__thumb"><div class="line-item__blade"></div></div>
            <div class="line-item__body">
              <div class="line-item__title">Ahsoka Tano Duelling</div>
              <div class="line-item__spec">Xenopixel V3  ·  <span>86cm blade</span>  ·  Light duelling</div>
            </div>
            <div class="line-item__price">£346.00</div>
          </div>

          <div class="recent-order__footer">
            <a class="btn-primary" href="#">View order detail →</a>
            <a class="btn-ghost" href="#">Track shipment →</a>
          </div>
        </div>

        <div class="recent-order__right">
          <a id="tf-progress-step-strip-1" data-tf-family="progress-step-strip" style="display:contents"></a>
<div class="recent-order__track">
            <div class="recent-order__stage-row recent-order__stage-row--done">
              <div class="recent-order__stage-name">Order confirmed</div>
              <div class="recent-order__stage-date">8 Jul</div>
            </div>
            <div class="recent-order__stage-row recent-order__stage-row--active">
              <div class="recent-order__stage-name">In workshop</div>
              <div class="recent-order__stage-date">9 Jul</div>
            </div>
            <div class="recent-order__stage-row recent-order__stage-row--pending">
              <div class="recent-order__stage-name">Dispatched</div>
              <div class="recent-order__stage-date">Est. 11 Jul</div>
            </div>
            <div class="recent-order__stage-row recent-order__stage-row--pending">
              <div class="recent-order__stage-name">Delivered</div>
              <div class="recent-order__stage-date">Est. 12–14 Aug</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Loyalty band -->
    <a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<div class="loyalty-band">
      <div class="loyalty-band__inner">
        <div>
          <div class="eyebrow">LOYALTY</div>
          <div class="loyalty-band__title">2,340 points earned. 660 to Titan.</div>
          <div class="loyalty-band__sub">Every order earns points. Every hilt owned earns you closer to the next tier.</div>
        </div>
        <div class="loyalty-band__progress">
          <div class="loyalty-band__bar">
            <div class="loyalty-band__fill"></div>
          </div>
          <div class="loyalty-band__tiers">
            <span class="loyalty-band__tier">Warrior</span>
            <span class="loyalty-band__tier">Battle</span>
            <span class="loyalty-band__tier loyalty-band__tier--current">Gold</span>
            <span class="loyalty-band__tier">Titan</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Saved addresses summary -->
    <a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<div class="address-pair">
      <div class="content-group">
        <div class="content-group__legend">BILLING ADDRESS</div>
        <div class="address-summary">
          <strong>Alex Marlowe</strong><br>
          14 Ridgeworks Lane<br>
          Sheffield, S3 8HA<br>
          United Kingdom
          <div class="address-summary__actions">
            <a class="btn-inline" href="#">Edit →</a>
          </div>
        </div>
      </div>
      <div class="content-group">
        <div class="content-group__legend">SHIPPING ADDRESS</div>
        <div class="address-summary">
          <strong>Alex Marlowe</strong><br>
          14 Ridgeworks Lane<br>
          Sheffield, S3 8HA<br>
          United Kingdom
          <div class="address-summary__actions">
            <a class="btn-inline" href="#">Edit →</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Recommended actions -->
    <a id="tf-trust-prose-cells" data-tf-family="trust-prose-cells" style="display:contents"></a>
<section class="deflection" aria-labelledby="deflection-heading">
  <div class="container">
    <div class="deflection__head">
      <div class="deflection__eyebrow">Try one of these</div>
      <h2 class="deflection__title" id="deflection-heading">Three ways to find what you’re after.</h2>
    </div>
    <div class="deflection__grid">
      <a class="deflection-cell" href="/collections/by-character/">
        <div class="deflection-cell__index"><span class="num">01</span> Browse by character</div>
        <h3 class="deflection-cell__title">Browse by character</h3>
        <p class="deflection-cell__text">20+ characters, 100+ hilts. Faster than typing.</p>
        <span class="deflection-cell__cta">See all characters <span class="arrow">→</span></span>
      </a>
      <a class="deflection-cell" href="/collections/by-electronics/">
        <div class="deflection-cell__index"><span class="num">02</span> Browse by electronics</div>
        <h3 class="deflection-cell__title">Browse by electronics</h3>
        <p class="deflection-cell__text">Xenopixel V3, Proffie 2.2, Neopixel, or base-lit — start from the core.</p>
        <span class="deflection-cell__cta">Choose an electronics tier <span class="arrow">→</span></span>
      </a>
      <a class="deflection-cell" href="#thrivedesk-chat" onclick="return false;">
        <div class="deflection-cell__index"><span class="num">03</span> Ask a real person</div>
        <h3 class="deflection-cell__title">Ask a real person</h3>
        <p class="deflection-cell__text">If you have a specific build in mind, live chat is faster than search.</p>
        <span class="deflection-cell__cta">Open chat <span class="arrow">→</span></span>
      </a>
    </div>
  </div>
</section>

  </main>
</div>

<!-- ============================================================
     BREAK — ORDERS
     ============================================================ -->
<div class="subscreen-break"><span class="subscreen-break__label">· ORDERS ·</span></div>

<!-- ============================================================
     SHELL 2 — ORDERS ACTIVE
     ============================================================ -->
<div class="account-shell">
  <div class="account-shell__sidebar-wrap">
    <aside class="account-sidebar">
      <div class="account-sidebar__header">YOUR WORKSHOP</div>
      <nav class="account-sidebar__list">
        <a class="account-sidebar__item" href="#">Dashboard</a>
        <a class="account-sidebar__item account-sidebar__item--active" href="#">Orders <span class="account-sidebar__count">4</span></a>
        <a class="account-sidebar__item account-sidebar__item--nested" href="#">Order Detail</a>
        <a class="account-sidebar__item" href="#">Addresses</a>
        <a class="account-sidebar__item" href="#">Payment methods</a>
        <a class="account-sidebar__item" href="#">Security</a>
        <a class="account-sidebar__item" href="#">Wishlist <span class="account-sidebar__count">6</span></a>
      </nav>
      <div class="account-sidebar__loyalty">
        <div class="account-sidebar__loyalty-points">2,340 POINTS</div>
        <div class="account-sidebar__loyalty-tier">Gold tier</div>
      </div>
    </aside>
  </div>
  <main class="account-shell__main">
    <div class="subscreen-header">
      <div class="eyebrow">YOUR ORDERS</div>
      <div class="hud-label">4 ORDERS  ·  SHOWING ALL</div>
    </div>
    <a id="tf-filter-chip-strip-1" data-tf-family="filter-chip-strip" style="display:contents"></a>
<div class="filter-chips">
      <button class="filter-chip filter-chip--active" type="button">ALL (4)</button>
      <button class="filter-chip" type="button">IN WORKSHOP (1)</button>
      <button class="filter-chip" type="button">DISPATCHED (1)</button>
      <button class="filter-chip" type="button">DELIVERED (2)</button>
    </div>
    <a id="tf-other-4" data-tf-family="other" style="display:contents"></a>
<table class="orders-table">
      <thead>
        <tr>
          <th>ORDER</th>
          <th>DATE</th>
          <th>ITEMS</th>
          <th>TOTAL</th>
          <th>STATUS</th>
          <th style="text-align:right;">ACTION</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="orders-table__id">#12345</td>
          <td>8 Jul 2026</td>
          <td><div class="orders-table__thumbs"><span class="orders-table__thumb"></span><span class="orders-table__thumb"></span></div></td>
          <td class="orders-table__total">£745.00</td>
          <td><span class="status-pill status-pill--workshop">In workshop</span></td>
          <td><div class="orders-table__actions"><a class="btn-inline" href="#">View →</a></div></td>
        </tr>
        <tr>
          <td class="orders-table__id">#12102</td>
          <td>15 Jun 2026</td>
          <td><div class="orders-table__thumbs"><span class="orders-table__thumb"></span></div></td>
          <td class="orders-table__total">£399.00</td>
          <td><span class="status-pill status-pill--dispatched">Dispatched</span></td>
          <td><div class="orders-table__actions"><a class="btn-inline" href="#">View →</a></div></td>
        </tr>
        <tr>
          <td class="orders-table__id">#11894</td>
          <td>3 May 2026</td>
          <td><div class="orders-table__thumbs"><span class="orders-table__thumb"></span><span class="orders-table__thumb"></span><span class="orders-table__thumb"></span></div></td>
          <td class="orders-table__total">£1,120.00</td>
          <td><span class="status-pill status-pill--delivered">Delivered</span></td>
          <td><div class="orders-table__actions"><a class="btn-inline" href="#">View →</a> <a class="btn-inline" href="#">Reorder →</a></div></td>
        </tr>
        <tr>
          <td class="orders-table__id">#11603</td>
          <td>12 Apr 2026</td>
          <td><div class="orders-table__thumbs"><span class="orders-table__thumb"></span></div></td>
          <td class="orders-table__total">£249.00</td>
          <td><span class="status-pill status-pill--delivered">Delivered</span></td>
          <td><div class="orders-table__actions"><a class="btn-inline" href="#">View →</a> <a class="btn-inline" href="#">Reorder →</a></div></td>
        </tr>
      </tbody>
    </table>
    <div class="orders-table__pagination">Showing 4 of 4 orders</div>
  </main>
</div>

<!-- ============================================================
     BREAK — ORDER DETAIL
     ============================================================ -->
<div class="subscreen-break"><span class="subscreen-break__label">· ORDER DETAIL ·</span></div>

<!-- ============================================================
     SHELL 3 — ORDER DETAIL ACTIVE
     ============================================================ -->
<div class="account-shell">
  <div class="account-shell__sidebar-wrap">
    <aside class="account-sidebar">
      <div class="account-sidebar__header">YOUR WORKSHOP</div>
      <nav class="account-sidebar__list">
        <a class="account-sidebar__item" href="#">Dashboard</a>
        <a class="account-sidebar__item" href="#">Orders <span class="account-sidebar__count">4</span></a>
        <a class="account-sidebar__item account-sidebar__item--nested account-sidebar__item--active" href="#">Order Detail</a>
        <a class="account-sidebar__item" href="#">Addresses</a>
        <a class="account-sidebar__item" href="#">Payment methods</a>
        <a class="account-sidebar__item" href="#">Security</a>
        <a class="account-sidebar__item" href="#">Wishlist <span class="account-sidebar__count">6</span></a>
      </nav>
      <div class="account-sidebar__loyalty">
        <div class="account-sidebar__loyalty-points">2,340 POINTS</div>
        <div class="account-sidebar__loyalty-tier">Gold tier</div>
      </div>
    </aside>
  </div>
  <main class="account-shell__main">
    <div class="subscreen-header">
      <div class="eyebrow">ORDER #12345</div>
      <div class="hud-label">PLACED 8 JUL 2026</div>
    </div>

    <div class="order-detail">
      <div class="order-detail__col-left">

        <a id="tf-progress-step-strip-2" data-tf-family="progress-step-strip" style="display:contents"></a>
<div class="timeline-h">
          <div class="timeline-h__stage timeline-h__stage--done">
            <div class="timeline-h__dot"></div>
            <div class="timeline-h__name">Order confirmed</div>
            <div class="timeline-h__date">8 Jul 2026</div>
          </div>
          <div class="timeline-h__stage timeline-h__stage--active">
            <div class="timeline-h__dot"></div>
            <div class="timeline-h__name">In workshop</div>
            <div class="timeline-h__date">9 Jul — now</div>
          </div>
          <div class="timeline-h__stage timeline-h__stage--pending">
            <div class="timeline-h__dot"></div>
            <div class="timeline-h__name">Dispatched</div>
            <div class="timeline-h__date">Est. 11 Jul</div>
          </div>
          <div class="timeline-h__stage timeline-h__stage--pending">
            <div class="timeline-h__dot"></div>
            <div class="timeline-h__name">Delivered</div>
            <div class="timeline-h__date">Est. 12–14 Aug</div>
          </div>
        </div>

        <div class="content-group">
          <div class="content-group__legend">SHIPMENT 1 OF 2  ·  ARRIVING 12–14 AUGUST  ·  FREE</div>
          <div class="shipment-lines">
            <div class="line-item">
              <div class="line-item__thumb"><div class="line-item__blade"></div></div>
              <div class="line-item__body">
                <div class="line-item__title">Starkiller SE</div>
                <div class="line-item__spec">Neopixel  ·  <span>92cm blade</span>  ·  Heavy duelling</div>
              </div>
              <div class="line-item__price">£399.00</div>
            </div>
          </div>
        </div>

        <div class="content-group">
          <div class="content-group__legend">SHIPMENT 2 OF 2  ·  ARRIVING 25 AUGUST – 2 SEPTEMBER  ·  FREE</div>
          <div class="shipment-lines">
            <div class="line-item">
              <div class="line-item__thumb"><div class="line-item__blade"></div></div>
              <div class="line-item__body">
                <div class="line-item__title">Ahsoka Tano Duelling</div>
                <div class="line-item__spec">Xenopixel V3  ·  <span>86cm blade</span>  ·  Light duelling</div>
              </div>
              <div class="line-item__price">£346.00</div>
            </div>
          </div>
        </div>
      </div>

      <aside class="order-detail__col-right">
        <a id="tf-other-5" data-tf-family="other" style="display:contents"></a>
<div class="order-summary">
          <div class="order-summary__title">ORDER SUMMARY</div>
          <div class="order-summary__row">
            <span class="order-summary__label">Subtotal</span>
            <span class="order-summary__value">£745.00</span>
          </div>
          <div class="order-summary__row">
            <span class="order-summary__label">Shipping</span>
            <span class="order-summary__value">FREE</span>
          </div>
          <div class="order-summary__row">
            <span class="order-summary__label">Tax</span>
            <span class="order-summary__value">Included</span>
          </div>
          <div class="order-summary__row order-summary__row--total">
            <span class="order-summary__label">Total</span>
            <span class="order-summary__value">£745.00</span>
          </div>
          <div class="order-summary__payment">
            <span class="order-summary__payment-brand">VISA</span>
            <span>···· 4242</span>
          </div>
          <div class="order-summary__actions">
            <a class="btn-ghost" href="#">Reorder →</a>
            <a class="btn-inline" href="#">Contact support →</a>
            <a class="btn-inline" href="#">Return an item →</a>
          </div>
        </div>
      </aside>
    </div>
  </main>
</div>

<!-- ============================================================
     BREAK — ADDRESSES
     ============================================================ -->
<div class="subscreen-break"><span class="subscreen-break__label">· ADDRESSES ·</span></div>

<!-- ============================================================
     SHELL 4 — ADDRESSES ACTIVE
     ============================================================ -->
<div class="account-shell">
  <div class="account-shell__sidebar-wrap">
    <aside class="account-sidebar">
      <div class="account-sidebar__header">YOUR WORKSHOP</div>
      <nav class="account-sidebar__list">
        <a class="account-sidebar__item" href="#">Dashboard</a>
        <a class="account-sidebar__item" href="#">Orders <span class="account-sidebar__count">4</span></a>
        <a class="account-sidebar__item account-sidebar__item--nested" href="#">Order Detail</a>
        <a class="account-sidebar__item account-sidebar__item--active" href="#">Addresses</a>
        <a class="account-sidebar__item" href="#">Payment methods</a>
        <a class="account-sidebar__item" href="#">Security</a>
        <a class="account-sidebar__item" href="#">Wishlist <span class="account-sidebar__count">6</span></a>
      </nav>
      <div class="account-sidebar__loyalty">
        <div class="account-sidebar__loyalty-points">2,340 POINTS</div>
        <div class="account-sidebar__loyalty-tier">Gold tier</div>
      </div>
    </aside>
  </div>
  <main class="account-shell__main">
    <div class="subscreen-header">
      <div class="eyebrow">YOUR ADDRESSES</div>
      <div class="hud-label">2 SAVED  ·  1 DEFAULT</div>
    </div>

    <a id="tf-other-6" data-tf-family="other" style="display:contents"></a>
<div class="address-pair">
      <div class="content-group">
        <div class="content-group__legend">BILLING ADDRESS <em>· DEFAULT</em></div>
        <div class="address-summary">
          <strong>Alex Marlowe</strong><br>
          14 Ridgeworks Lane<br>
          Sheffield, S3 8HA<br>
          United Kingdom<br>
           <br>
          <span style="color:var(--text-dim);font-family:var(--font-display);letter-spacing:0.08em;font-size:12px;">+44 7700 900 214</span>
          <div class="address-summary__actions">
            <a class="btn-inline" href="#">Edit →</a>
            <a class="btn-inline" href="#" style="color:var(--text-dim);border-bottom-color:rgba(255,255,255,0.15);">Remove →</a>
          </div>
        </div>
      </div>
      <div class="content-group">
        <div class="content-group__legend">SHIPPING ADDRESS <em>· DEFAULT</em></div>
        <div class="address-summary">
          <strong>Alex Marlowe</strong><br>
          14 Ridgeworks Lane<br>
          Sheffield, S3 8HA<br>
          United Kingdom<br>
           <br>
          <span style="color:var(--text-dim);font-family:var(--font-display);letter-spacing:0.08em;font-size:12px;">+44 7700 900 214</span>
          <div class="address-summary__actions">
            <a class="btn-inline" href="#">Edit →</a>
            <a class="btn-inline" href="#" style="color:var(--text-dim);border-bottom-color:rgba(255,255,255,0.15);">Remove →</a>
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top:36px;text-align:center;">
      <a class="btn-primary btn-primary--wide" href="#">Add a new address →</a>
    </div>

    <div class="content-group" style="margin-top:38px;">
      <div class="content-group__legend">ADD A NEW ADDRESS</div>
      <a id="tf-form-1" data-tf-family="form" style="display:contents"></a>
<div class="form-grid">
        <div class="form-field">
          <label class="form-field__label">First name</label>
          <input class="form-field__input" type="text" value="Alex">
        </div>
        <div class="form-field">
          <label class="form-field__label">Last name</label>
          <input class="form-field__input" type="text" value="Marlowe">
        </div>
        <div class="form-field form-grid__row--full">
          <label class="form-field__label">Street address</label>
          <input class="form-field__input form-field__input--focused" type="text" value="14 Ridgeworks Lane">
        </div>
        <div class="form-field">
          <label class="form-field__label">Town / city</label>
          <input class="form-field__input" type="text" value="Sheffield">
        </div>
        <div class="form-field">
          <label class="form-field__label">Postcode</label>
          <input class="form-field__input" type="text" value="S3 8HA">
        </div>
        <div class="form-field">
          <label class="form-field__label">Country</label>
          <select class="form-field__select">
            <option>United Kingdom</option>
            <option>United States</option>
            <option>Canada</option>
            <option>Australia</option>
          </select>
        </div>
        <div class="form-field">
          <label class="form-field__label">Phone</label>
          <input class="form-field__input" type="tel" value="+44 7700 900 214">
        </div>
      </div>
      <div class="form-actions">
        <button class="btn-primary" type="button">Save address →</button>
        <a class="btn-inline" href="#" style="color:var(--text-dim);border-bottom-color:rgba(255,255,255,0.15);">Cancel</a>
      </div>
    </div>
  </main>
</div>

<!-- ============================================================
     BREAK — PAYMENT METHODS
     ============================================================ -->
<div class="subscreen-break"><span class="subscreen-break__label">· PAYMENT METHODS ·</span></div>

<!-- ============================================================
     SHELL 5 — PAYMENT METHODS ACTIVE
     ============================================================ -->
<div class="account-shell">
  <div class="account-shell__sidebar-wrap">
    <aside class="account-sidebar">
      <div class="account-sidebar__header">YOUR WORKSHOP</div>
      <nav class="account-sidebar__list">
        <a class="account-sidebar__item" href="#">Dashboard</a>
        <a class="account-sidebar__item" href="#">Orders <span class="account-sidebar__count">4</span></a>
        <a class="account-sidebar__item account-sidebar__item--nested" href="#">Order Detail</a>
        <a class="account-sidebar__item" href="#">Addresses</a>
        <a class="account-sidebar__item account-sidebar__item--active" href="#">Payment methods</a>
        <a class="account-sidebar__item" href="#">Security</a>
        <a class="account-sidebar__item" href="#">Wishlist <span class="account-sidebar__count">6</span></a>
      </nav>
      <div class="account-sidebar__loyalty">
        <div class="account-sidebar__loyalty-points">2,340 POINTS</div>
        <div class="account-sidebar__loyalty-tier">Gold tier</div>
      </div>
    </aside>
  </div>
  <main class="account-shell__main">
    <div class="subscreen-header">
      <div class="eyebrow">SAVED PAYMENT METHODS</div>
      <div class="hud-label">2 SAVED  ·  1 DEFAULT</div>
    </div>

    <div class="address-pair">
      <div class="content-group">
        <div class="content-group__legend">VISA ···· 4242 <em>· DEFAULT</em></div>
        <a id="tf-other-7" data-tf-family="other" style="display:contents"></a>
<div class="pay-card">
          <div class="pay-card__brand-row">
            <div class="pay-card__brand">VISA</div>
            <div class="pay-card__number">···· ···· ···· 4242</div>
          </div>
          <div class="pay-card__meta"><strong>Alex Marlowe</strong>  ·  Expires 08 / 27</div>
          <div class="pay-card__actions">
            <a class="btn-inline" href="#">Make secondary →</a>
            <a class="btn-inline" href="#" style="color:var(--text-dim);border-bottom-color:rgba(255,255,255,0.15);">Remove →</a>
          </div>
        </div>
      </div>
      <div class="content-group">
        <div class="content-group__legend">MASTERCARD ···· 8109</div>
        <div class="pay-card">
          <div class="pay-card__brand-row">
            <div class="pay-card__brand">MC</div>
            <div class="pay-card__number">···· ···· ···· 8109</div>
          </div>
          <div class="pay-card__meta"><strong>Alex Marlowe</strong>  ·  Expires 03 / 28</div>
          <div class="pay-card__actions">
            <a class="btn-inline" href="#">Make default →</a>
            <a class="btn-inline" href="#" style="color:var(--text-dim);border-bottom-color:rgba(255,255,255,0.15);">Remove →</a>
          </div>
        </div>
      </div>
    </div>

    <a id="tf-other-8" data-tf-family="other" style="display:contents"></a>
<div class="wallet-row">
      <span class="wallet-row__label">Wallets available ·</span>
      <span class="wallet-chip">Apple Pay</span>
      <span class="wallet-chip">Google Pay</span>
      <span class="wallet-chip wallet-chip--soon">Klarna <span class="wallet-chip__meta">Coming soon</span></span>
    </div>

    <div style="margin-top:16px;text-align:center;">
      <a class="btn-primary btn-primary--wide" href="#">Add a new card →</a>
    </div>
  </main>
</div>

<!-- ============================================================
     BREAK — SECURITY
     ============================================================ -->
<div class="subscreen-break"><span class="subscreen-break__label">· SECURITY ·</span></div>

<!-- ============================================================
     SHELL 6 — SECURITY ACTIVE
     ============================================================ -->
<div class="account-shell">
  <div class="account-shell__sidebar-wrap">
    <aside class="account-sidebar">
      <div class="account-sidebar__header">YOUR WORKSHOP</div>
      <nav class="account-sidebar__list">
        <a class="account-sidebar__item" href="#">Dashboard</a>
        <a class="account-sidebar__item" href="#">Orders <span class="account-sidebar__count">4</span></a>
        <a class="account-sidebar__item account-sidebar__item--nested" href="#">Order Detail</a>
        <a class="account-sidebar__item" href="#">Addresses</a>
        <a class="account-sidebar__item" href="#">Payment methods</a>
        <a class="account-sidebar__item account-sidebar__item--active" href="#">Security</a>
        <a class="account-sidebar__item" href="#">Wishlist <span class="account-sidebar__count">6</span></a>
      </nav>
      <div class="account-sidebar__loyalty">
        <div class="account-sidebar__loyalty-points">2,340 POINTS</div>
        <div class="account-sidebar__loyalty-tier">Gold tier</div>
      </div>
    </aside>
  </div>
  <main class="account-shell__main">
    <div class="subscreen-header">
      <div class="eyebrow">YOUR SECURITY</div>
      <div class="hud-label">ACCOUNT: alex@marlowe.dev</div>
    </div>

    <div class="content-group">
      <div class="content-group__legend">PASSWORD</div>
      <a id="tf-form-2" data-tf-family="form" style="display:contents"></a>
<div class="form-grid">
        <div class="form-field form-grid__row--full">
          <label class="form-field__label">Current password</label>
          <input class="form-field__input" type="password" value="............">
        </div>
        <div class="form-field form-grid__row--full">
          <label class="form-field__label">New password</label>
          <input class="form-field__input form-field__input--focused" type="password" value="................">
          <div class="strength-meter">
            <div class="strength-meter__seg strength-meter__seg--on"></div>
            <div class="strength-meter__seg strength-meter__seg--on"></div>
            <div class="strength-meter__seg strength-meter__seg--on"></div>
            <div class="strength-meter__seg"></div>
          </div>
          <div class="strength-meter__label">Strength: strong</div>
        </div>
        <div class="form-field form-grid__row--full">
          <label class="form-field__label">Confirm new password</label>
          <input class="form-field__input" type="password" value="................">
          <div class="form-field__match">Passwords match</div>
        </div>
      </div>
      <div class="form-actions">
        <button class="btn-primary" type="button">Update password →</button>
      </div>
    </div>

    <a id="tf-form-3" data-tf-family="form" style="display:contents"></a>
<div class="content-group" style="margin-top:38px;">
      <div class="content-group__legend">EMAIL PREFERENCES</div>
      <div>
        <div class="toggle-row">
          <div class="toggle-check toggle-check--on toggle-check--locked"></div>
          <div>
            <div class="toggle-row__title">Order updates</div>
            <div class="toggle-row__desc">Order confirmations, dispatch notifications, delivery updates.</div>
            <div class="toggle-row__meta">Required for orders · locked on</div>
          </div>
        </div>
        <div class="toggle-row">
          <div class="toggle-check toggle-check--on"></div>
          <div>
            <div class="toggle-row__title">The ARTSABERS Dispatch</div>
            <div class="toggle-row__desc">One editorial email a month. Guides, new releases, workshop stories.</div>
          </div>
        </div>
        <div class="toggle-row">
          <div class="toggle-check"></div>
          <div>
            <div class="toggle-row__title">Partner drops</div>
            <div class="toggle-row__desc">New training partners join the roster. Rarer than the Dispatch — max quarterly.</div>
          </div>
        </div>
      </div>
      <div class="form-actions">
        <button class="btn-primary" type="button">Save preferences →</button>
      </div>
    </div>
  </main>
</div>

<!-- ============================================================
     BREAK — WISHLIST
     ============================================================ -->
<div class="subscreen-break"><span class="subscreen-break__label">· WISHLIST ·</span></div>

<!-- ============================================================
     SHELL 7 — WISHLIST ACTIVE
     ============================================================ -->
<div class="account-shell">
  <div class="account-shell__sidebar-wrap">
    <aside class="account-sidebar">
      <div class="account-sidebar__header">YOUR WORKSHOP</div>
      <nav class="account-sidebar__list">
        <a class="account-sidebar__item" href="#">Dashboard</a>
        <a class="account-sidebar__item" href="#">Orders <span class="account-sidebar__count">4</span></a>
        <a class="account-sidebar__item account-sidebar__item--nested" href="#">Order Detail</a>
        <a class="account-sidebar__item" href="#">Addresses</a>
        <a class="account-sidebar__item" href="#">Payment methods</a>
        <a class="account-sidebar__item" href="#">Security</a>
        <a class="account-sidebar__item account-sidebar__item--active" href="#">Wishlist <span class="account-sidebar__count">6</span></a>
      </nav>
      <div class="account-sidebar__loyalty">
        <div class="account-sidebar__loyalty-points">2,340 POINTS</div>
        <div class="account-sidebar__loyalty-tier">Gold tier</div>
      </div>
    </aside>
  </div>
  <main class="account-shell__main">
    <div class="subscreen-header">
      <div class="eyebrow">YOUR WISHLIST</div>
      <div class="hud-label">6 HILTS  ·  2 ON SALE</div>
    </div>
    <a id="tf-filter-chip-strip-2" data-tf-family="filter-chip-strip" style="display:contents"></a>
<div class="filter-chips">
      <button class="filter-chip filter-chip--active" type="button">ALL (4)</button>
      <button class="filter-chip" type="button">IN WORKSHOP (1)</button>
      <button class="filter-chip" type="button">DISPATCHED (1)</button>
      <button class="filter-chip" type="button">DELIVERED (2)</button>
    </div>

    <a id="tf-product-grid" data-tf-family="product-grid" style="display:contents"></a>
<div class="wishlist-grid">
      <a id="tf-product-card" data-tf-family="product-card" style="display:contents"></a>
<article class="product-card product-card--hot">
        <div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
          <a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
        </div>
        <div class="product-card__body">
          <div class="product-card__meta">Character · Prequel Era</div>
          <h3 class="product-card__name">Anakin Skywalker EP3</h3>
          <div class="product-card__specs">
            <div class="product-card__spec">
              <span class="product-card__spec-label">Saber Core</span>
              <span class="product-card__spec-value">Xenopixel V3</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Blade type</span>
              <span class="product-card__spec-value">Neopixel · Duelling</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Sound fonts</span>
              <span class="product-card__spec-value">34 + custom</span>
            </div>
          </div>
          <div class="product-card__foot">
            <div class="product-card__price">$459.99</div>
            <a href="#" class="product-card__cta">View saber →</a>
          </div>
        </div>
      </article>

      <article class="product-card product-card--hot">
        <div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
          <a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
        </div>
        <div class="product-card__body">
          <div class="product-card__meta">Character · Prequel Era</div>
          <h3 class="product-card__name">Anakin Skywalker EP3</h3>
          <div class="product-card__specs">
            <div class="product-card__spec">
              <span class="product-card__spec-label">Saber Core</span>
              <span class="product-card__spec-value">Xenopixel V3</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Blade type</span>
              <span class="product-card__spec-value">Neopixel · Duelling</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Sound fonts</span>
              <span class="product-card__spec-value">34 + custom</span>
            </div>
          </div>
          <div class="product-card__foot">
            <div class="product-card__price">$459.99</div>
            <a href="#" class="product-card__cta">View saber →</a>
          </div>
        </div>
      </article>

      <article class="product-card product-card--hot">
        <div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
          <a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
        </div>
        <div class="product-card__body">
          <div class="product-card__meta">Character · Prequel Era</div>
          <h3 class="product-card__name">Anakin Skywalker EP3</h3>
          <div class="product-card__specs">
            <div class="product-card__spec">
              <span class="product-card__spec-label">Saber Core</span>
              <span class="product-card__spec-value">Xenopixel V3</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Blade type</span>
              <span class="product-card__spec-value">Neopixel · Duelling</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Sound fonts</span>
              <span class="product-card__spec-value">34 + custom</span>
            </div>
          </div>
          <div class="product-card__foot">
            <div class="product-card__price">$459.99</div>
            <a href="#" class="product-card__cta">View saber →</a>
          </div>
        </div>
      </article>

      <article class="product-card product-card--hot">
        <div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
          <a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
        </div>
        <div class="product-card__body">
          <div class="product-card__meta">Character · Prequel Era</div>
          <h3 class="product-card__name">Anakin Skywalker EP3</h3>
          <div class="product-card__specs">
            <div class="product-card__spec">
              <span class="product-card__spec-label">Saber Core</span>
              <span class="product-card__spec-value">Xenopixel V3</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Blade type</span>
              <span class="product-card__spec-value">Neopixel · Duelling</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Sound fonts</span>
              <span class="product-card__spec-value">34 + custom</span>
            </div>
          </div>
          <div class="product-card__foot">
            <div class="product-card__price">$459.99</div>
            <a href="#" class="product-card__cta">View saber →</a>
          </div>
        </div>
      </article>

      <article class="product-card product-card--hot">
        <div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
          <a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
        </div>
        <div class="product-card__body">
          <div class="product-card__meta">Character · Prequel Era</div>
          <h3 class="product-card__name">Anakin Skywalker EP3</h3>
          <div class="product-card__specs">
            <div class="product-card__spec">
              <span class="product-card__spec-label">Saber Core</span>
              <span class="product-card__spec-value">Xenopixel V3</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Blade type</span>
              <span class="product-card__spec-value">Neopixel · Duelling</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Sound fonts</span>
              <span class="product-card__spec-value">34 + custom</span>
            </div>
          </div>
          <div class="product-card__foot">
            <div class="product-card__price">$459.99</div>
            <a href="#" class="product-card__cta">View saber →</a>
          </div>
        </div>
      </article>

      <article class="product-card product-card--hot">
        <div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
          <a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
        </div>
        <div class="product-card__body">
          <div class="product-card__meta">Character · Prequel Era</div>
          <h3 class="product-card__name">Anakin Skywalker EP3</h3>
          <div class="product-card__specs">
            <div class="product-card__spec">
              <span class="product-card__spec-label">Saber Core</span>
              <span class="product-card__spec-value">Xenopixel V3</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Blade type</span>
              <span class="product-card__spec-value">Neopixel · Duelling</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Sound fonts</span>
              <span class="product-card__spec-value">34 + custom</span>
            </div>
          </div>
          <div class="product-card__foot">
            <div class="product-card__price">$459.99</div>
            <a href="#" class="product-card__cta">View saber →</a>
          </div>
        </div>
      </article>
    </div>
  </main>
</div>

<!-- ============================================================
     NEWSLETTER CAPTURE — MAS73 canonical
     ============================================================ -->
<a id="tf-newsletter-signup" data-tf-family="newsletter-signup" style="display:contents"></a>
<section class="capture">
  <div class="container">
    <div class="capture__inner">
      <div class="capture__copy">
        <div class="capture__eyebrow">◆  Join the comms</div>
        <h2 class="capture__title">From factory floor<br>to your inbox.</h2>
        <p class="capture__sub">Get 10% off your first saber, plus early access to new drops, ARTSABERS Exclusives, and the workshop pieces that never make it to the public catalogue.</p>
      </div>
      <div class="capture__form">
        <span class="capture__form-lbl">Comms · Signal In</span>
        <input class="capture__form-input" type="email" placeholder="your@email.com">
        <button class="capture__form-cta">Open the signal →</button>
        <span class="capture__form-fine">One drop a week. Unsubscribe with one click. We never share your details.</span>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     SITE FOOTER
     ============================================================ -->
<footer class="site-footer">
  <div class="container">
    <div class="site-footer__grid">
      <div class="site-footer__brand">
        <div class="site-footer__brand-name">ART<em>SABERS</em></div>
        <p class="site-footer__tag">Every character, every Saber Core, every duelling grade. From factory floor to your door in 7–10 days.</p>
      </div>
      <div>
        <div class="site-footer__col-title">Sabers</div>
        <div class="site-footer__link-list">
          <a class="site-footer__link" href="#">By character</a>
          <a class="site-footer__link" href="#">By Saber Core</a>
          <a class="site-footer__link" href="#">By faction</a>
          <a class="site-footer__link" href="#">Bundles</a>
          <a class="site-footer__link" href="#">Under $100</a>
        </div>
      </div>
      <div>
        <div class="site-footer__col-title">Support</div>
        <div class="site-footer__link-list">
          <a class="site-footer__link" href="#">Contact us</a>
          <a class="site-footer__link" href="#">Shipping</a>
          <a class="site-footer__link" href="#">Returns</a>
          <a class="site-footer__link" href="#">Warranty</a>
          <a class="site-footer__link" href="#">FAQ</a>
        </div>
      </div>
      <div>
        <div class="site-footer__col-title">Company</div>
        <div class="site-footer__link-list">
          <a class="site-footer__link" href="#">About</a>
          <a class="site-footer__link" href="#">Journal</a>
          <a class="site-footer__link" href="#">The workshop</a>
          <a class="site-footer__link" href="#">Reviews</a>
          <a class="site-footer__link" href="#">Affiliates</a>
        </div>
      </div>
      <div>
        <div class="site-footer__col-title">Your workshop</div>
        <div class="site-footer__link-list">
          <a class="site-footer__link" href="#">Dashboard</a>
          <a class="site-footer__link" href="#">Orders</a>
          <a class="site-footer__link" href="#">Addresses</a>
          <a class="site-footer__link" href="#">Wishlist</a>
          <a class="site-footer__link" href="#">Log out</a>
        </div>
      </div>
    </div>
    <div class="site-footer__bottom">
      <div class="site-footer__legal">© 2026 ARTSABERS · A NERDWORKS BRAND · ALL RIGHTS RESERVED</div>
      <div class="site-footer__pay-methods">
        <span>VISA</span><span>MC</span><span>AMEX</span><span>APAY</span><span>GPAY</span>
      </div>
    </div>
  </div>
</footer>

</div>
</body>
</html>