← ARTSABERS

ARTSABERS — Product Type Category

MAS49 Category Page ARTSABERS
Open in New Tab
Template type: WooCommerce — 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"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightsabers — ARTSABERS</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=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>: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);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================
   Panel-seam glow — reusable rhythm mark
   ============================================ */
.seam-glow {
  position: relative;
  height: 0;
}

.seam-glow::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ember) 20%, var(--ember-glow) 50%, var(--ember) 80%, transparent 100%);
  opacity: 0.75;
}

.seam-glow::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -20px;
  height: 60px;
  background: radial-gradient(ellipse 40% 100% at center 40px, rgba(255,122,46,0.25) 0%, transparent 70%);
  pointer-events: none;
}

/* ============================================
   Global Chrome (nav + promo)
   ============================================ */
.promo-bar {
  background: var(--carbon);
  border-bottom: 1px solid rgba(255,122,46,0.15);
  padding: 8px 40px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--chrome-dim);
}

.promo-bar__accent {
  color: var(--ember);
  font-weight: 600;
}

.nav {
  background: var(--carbon);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.06), 0 4px 24px -4px rgba(0,0,0,0.6);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.16em;
  color: var(--chrome-highlight);
}

.nav__brand-accent { color: var(--ember); }

.nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav__link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--chrome-warm);
  text-decoration: none;
  transition: color 0.2s;
}

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

.nav__link--active { color: var(--ember); }

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

.nav__action {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--chrome-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.nav__action:hover { color: var(--chrome-warm); }

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumbs {
  background: var(--carbon);
  padding: 20px 40px;
  border-bottom: 1px solid rgba(54,54,54,0.4);
}

.breadcrumbs__list {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  list-style: none;
}

.breadcrumbs__item {
  color: var(--chrome-dim);
}

.breadcrumbs__item--current {
  color: var(--ember);
}

.breadcrumbs__sep {
  color: var(--hull-edge);
}

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

.breadcrumbs a:hover { color: var(--chrome-warm); }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 36px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn--primary {
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
  color: var(--on-primary-fixed);
  box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn--primary:hover {
  box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  border: 1px solid rgba(62,62,62,0.7);
  color: var(--chrome-warm);
}

.btn--ghost:hover {
  background: var(--hull-panel-lift);
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.15);
  border-color: rgba(184,176,166,0.4);
}

.btn--large {
  padding: 22px 48px;
  font-size: 16px;
}

/* ============================================
   HERO — plain carbon
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--carbon);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T23-01-19-300Z-mxvbj5.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0.35) 40%, rgba(6,6,6,0.75) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 120px 40px 100px;
  width: 100%;
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ember);
  margin-bottom: 32px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 168px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.8px;
  color: var(--chrome-highlight);
  margin-bottom: 28px;
  text-shadow: 0 8px 32px rgba(0,0,0,0.9);
}

.hero__sub {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  color: var(--chrome-warm);
  max-width: 720px;
  margin: 0 auto 36px;
  line-height: 1.5;
}

/* Trust chip strip (in hero descriptor) */
.trust-strip {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-glint);
  margin-bottom: 44px;
}

.trust-strip__item {
  display: inline-flex;
  align-items: center;
}

.trust-strip__sep {
  width: 4px;
  height: 4px;
  background: var(--ember);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(255,122,46,0.6);
}

.hero__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__descriptor {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--chrome-dim);
}

.hero__descriptor-item strong {
  color: var(--ember);
  font-weight: 600;
}

/* ============================================
   Sub-category browse tiles — PATTERNED (Variant F)
   ============================================ */
.subcat {
  position: relative;
  padding: var(--space-section) 40px;
  background-image: linear-gradient(180deg, rgba(6,6,6,0.68), rgba(6,6,6,0.72)), url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--carbon);
}

.subcat__inner {
  max-width: 1360px;
  margin: 0 auto;
}

.subcat__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 40px;
}

.subcat__title-block {
  max-width: 720px;
}

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ember);
  margin-bottom: 20px;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.02;
  color: var(--chrome-highlight);
}

.subcat__desc {
  max-width: 380px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--chrome-dim);
  line-height: 1.6;
}

.subcat__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.subcat-tile {
  background: var(--bg-patterned-card);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: var(--panel-lift);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
}

.subcat-tile:hover {
  box-shadow: var(--panel-lift-hover), 0 0 24px rgba(255,122,46,0.25);
  transform: translateY(-4px);
}

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

.subcat-tile__body {
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.subcat-tile__count {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ember);
  margin-bottom: 10px;
  font-weight: 600;
}

.subcat-tile__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--chrome-highlight);
  margin-bottom: 12px;
  line-height: 1.05;
}

.subcat-tile__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-dim);
  line-height: 1.55;
  margin-bottom: 20px;
  flex: 1;
}

.subcat-tile__cta {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-warm);
  margin-top: auto;
  transition: color 0.2s;
  font-weight: 600;
}

.subcat-tile:hover .subcat-tile__cta { color: var(--ember); }

/* ============================================
   TRUST BAR SECTION — plain carbon
   ============================================ */
.trust-bar {
  background: var(--void);
  padding: 80px 40px;
  border-top: 1px solid rgba(255,122,46,0.18);
  border-bottom: 1px solid rgba(255,122,46,0.18);
  position: relative;
}

.trust-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: radial-gradient(ellipse 50% 100% at center top, rgba(255,122,46,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.trust-bar__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.trust-chip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.trust-chip__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ember);
  margin-bottom: 4px;
}

.trust-chip__icon svg {
  width: 32px; height: 32px;
}

.trust-chip__claim {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--chrome-highlight);
  line-height: 1.15;
}

.trust-chip__evidence {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-dim);
  line-height: 1.5;
}

/* ============================================
   ELECTRONICS TIER LADDER — PATTERNED (Variant G vertical)
   ============================================ */
.tiers {
  position: relative;
  padding: var(--space-section) 40px;
  background-image: linear-gradient(180deg, rgba(6,6,6,0.68), rgba(6,6,6,0.72)), url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-48-07-970Z-oehwsm.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--carbon);
}

.tiers__inner {
  max-width: 1360px;
  margin: 0 auto;
}

.tiers__head {
  text-align: center;
  margin-bottom: 64px;
}

.tiers__head .section-title {
  margin: 0 auto;
  max-width: 900px; letter-spacing: 0.8px; }

.tiers__desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--chrome-dim);
  max-width: 640px;
  margin: 24px auto 0;
  line-height: 1.6;
}

.tiers__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.tier-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;
}

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

.tier-card__media {
  aspect-ratio: 1/1;
  background-color: #0a0a0a;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(54,54,54,0.4);
}

.tier-card__body {
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tier-card__index {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ember);
  margin-bottom: 8px;
}

.tier-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--chrome-highlight);
  margin-bottom: 6px;
  line-height: 1.05;
}

.tier-card__price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dotted rgba(184,176,166,0.2);
}

.tier-card__specs {
  list-style: none;
  margin-bottom: 24px;
  flex: 1;
}

.tier-card__specs li {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-warm);
  line-height: 1.5;
  padding: 6px 0;
  padding-left: 18px;
  position: relative;
}

.tier-card__specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 1px;
  background: var(--ember);
}

.tier-card__cta {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-warm);
  font-weight: 600;
  padding-top: 16px;
  border-top: 1px solid rgba(54,54,54,0.4);
  text-decoration: none;
  transition: color 0.2s;
}

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

/* ============================================
   Shop CTA band — plain carbon
   ============================================ */
.cta-band {
  background: var(--carbon);
  padding: 32px 40px;
  border-top: 1px solid rgba(255,122,46,0.2);
  border-bottom: 1px solid rgba(255,122,46,0.2);
  position: relative;
}

.cta-band__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band__copy {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chrome-highlight);
}

.cta-band__copy strong {
  color: var(--ember);
  font-weight: 700;
}

/* ============================================
   FEATURED BESTSELLERS — PATTERNED (Variant F horizontal)
   ============================================ */
.featured {
  position: relative;
  padding: var(--space-section) 40px;
  background-image: linear-gradient(180deg, rgba(6,6,6,0.68), rgba(6,6,6,0.72)), url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--carbon);
}

.featured__inner {
  max-width: 1360px;
  margin: 0 auto;
}

.featured__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 40px;
}

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

.featured__cta-link:hover { color: var(--ember); }

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

.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 {
  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);
}

.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); }

/* ============================================
   Craftsmanship editorial split — PATTERNED (Variant G vertical)
   ============================================ */
.craft {
  position: relative;
  padding: var(--space-section) 40px;
  background-image: linear-gradient(180deg, rgba(6,6,6,0.68), rgba(6,6,6,0.72)), url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-48-07-970Z-oehwsm.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--carbon);
}

.craft__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}

.craft__copy {
  padding: 40px 0;
}

.craft__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ember);
  margin-bottom: 24px;
}

.craft__title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.8px;
  color: var(--chrome-highlight);
  margin-bottom: 32px;
}

.craft__prose p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--chrome-warm);
  margin-bottom: 24px;
}

.stat-callout {
  padding: 32px 0;
  margin: 8px 0 32px;
  border-top: 1px solid rgba(255,122,46,0.2);
  border-bottom: 1px solid rgba(255,122,46,0.2);
  position: relative;
}

.stat-callout__big {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ember);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.stat-callout__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--chrome-dim);
}

.craft__media {
  aspect-ratio: 4/3;
  background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T23-01-31-702Z-8ays5r.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: var(--panel-lift), 0 0 40px rgba(0,0,0,0.6);
  position: relative;
}

.craft__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(6,6,6,0.4) 100%);
  pointer-events: none;
}

/* ============================================
   Warm capture band — orange ombre (mandatory)
   ============================================ */
.capture {
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-forge) 100%);
  padding: 100px 40px;
  position: relative;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(42,8,0,0.3);
}

.capture::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,179,71,0.9) 50%, transparent 100%);
}

.capture__input::placeholder {
  color: rgba(42,8,0,0.55);
}

.capture__input:focus {
  border-bottom-color: var(--ember-scar);
}

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

/* ============================================
   Footer — plain carbon
   ============================================ */
.footer {
  background: var(--carbon);
  padding: 80px 40px 40px;
  position: relative;
}

.footer__inner {
  max-width: 1360px;
  margin: 0 auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--chrome-highlight);
  margin-bottom: 16px;
}

.footer__brand-accent { color: var(--ember); }

.footer__tag {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--chrome-dim);
  line-height: 1.6;
  max-width: 300px;
}

.footer__col-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--chrome-warm);
  margin-bottom: 20px;
}

.footer__list {
  list-style: none;
}

.footer__list li {
  margin-bottom: 12px;
}

.footer__list a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.footer__list a:hover { color: var(--ember); }

.footer__base {
  padding-top: 32px;
  border-top: 1px solid rgba(54,54,54,0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--chrome-dim);
}

.footer__legal { display: flex; gap: 24px; }

.footer__legal a { color: inherit; text-decoration: none; transition: color 0.2s; }

.footer__legal a:hover { color: var(--chrome-warm); }

/* ============================================
   Sticky floating shop launcher
   ============================================ */
.sticky-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  padding: 14px 22px;
  background: rgba(20,20,20,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--chrome-highlight);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(250,250,250,0.1);
  border-top: 1px solid rgba(255,122,46,0.7);
  transition: all 0.25s ease;
  min-width: 240px;
}

.sticky-launcher:hover {
  background: rgba(28,28,28,0.95);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.85), inset 0 1px 0 rgba(250,250,250,0.15), 0 0 24px rgba(255,122,46,0.35);
  transform: translateY(-2px);
}

.sticky-launcher__count {
  color: var(--ember);
  font-weight: 700;
}

.sticky-launcher__arrow {
  color: var(--ember);
  margin-left: auto;
  font-size: 16px;
}

/* ============================================
   RESPONSIVE — mobile ~390px
   ============================================ */
@media (max-width: 900px) {
  .nav { padding: 16px 20px; }
  .nav__links { display: none; }
  .breadcrumbs { padding: 16px 20px; }

  .hero__inner { padding: 100px 20px 80px; }
  .hero__title { font-size: 56px; letter-spacing: 0.8px; }
  .hero__sub { font-size: 17px; }
  .trust-strip { gap: 10px; font-size: 10px; }
  .hero__ctas { flex-direction: column; align-items: center; }
  .hero__descriptor { position: static; margin-top: 40px; flex-direction: column; gap: 10px; padding: 0 20px; }

  .subcat, .tiers, .featured, .craft { padding: 72px 20px; }
  .subcat__head, .featured__head { flex-direction: column; align-items: start; }
  .subcat__grid { grid-template-columns: 1fr 1fr; }
  .subcat__grid > *:last-child { grid-column: 1 / -1; }
  .section-title { font-size: 40px; letter-spacing: 0.8px; }

  .trust-bar { padding: 56px 20px; }
  .trust-bar__inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }

  .tiers__grid { grid-template-columns: 1fr 1fr; }
  .tiers__grid > *:last-child { grid-column: 1 / -1; }

  .cta-band__inner { flex-direction: column; align-items: start; }
  .cta-band__copy { font-size: 14px; }

  .featured__grid { grid-template-columns: 1fr; }

  .craft__inner { grid-template-columns: 1fr; gap: 40px; }
  .craft__title { font-size: 36px; letter-spacing: 0.8px; }
  .craft__media { aspect-ratio: 4/3; min-height: 280px; }

  .capture { padding: 72px 20px; }
  .capture__title { font-size: 36px; letter-spacing: 0.8px; }
  .capture__form { flex-direction: column; }

  .footer { padding: 56px 20px 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__base { flex-direction: column; gap: 16px; text-align: center; }

  .sticky-launcher { left: 20px; right: 20px; min-width: 0; }
}

/* 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; }
}
</style>
</head>
<body>

<!-- Global chrome: promo + nav -->
<div class="promo-bar">
  <span class="promo-bar__accent">GLOBAL DELIVERY 7-10 DAYS</span> · Free UK returns · 24-hour customer service response · <span class="promo-bar__accent">1,100 hilts available</span>
</div>

<nav class="nav">
  <div class="nav__brand">ART<span class="nav__brand-accent">SABERS</span></div>
  <ul class="nav__links">
    <li><a href="#" class="nav__link nav__link--active">Lightsabers</a></li>
    <li><a href="#" class="nav__link">Characters</a></li>
    <li><a href="#" class="nav__link">Saber Core</a></li>
    <li><a href="#" class="nav__link">Helmets</a></li>
    <li><a href="#" class="nav__link">Parts & Accessories</a></li>
    <li><a href="#" class="nav__link">Deals</a></li>
  </ul>
  <div class="nav__actions">
    <a href="#" class="nav__action">Search</a>
    <a href="#" class="nav__action">Account</a>
    <a href="#" class="nav__action">Cart · 0</a>
  </div>
</nav>

<!-- Breadcrumbs -->
<a id="tf-breadcrumb" data-tf-family="breadcrumb" style="display:contents"></a>
<div class="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item"><a href="/">Home</a></li>
    <li class="breadcrumbs__sep">/</li>
    <li class="breadcrumbs__item breadcrumbs__item--current">Lightsabers</li>
  </ol>
</div>

<!-- HERO (plain carbon, cinematic) -->
<a id="tf-hero-atmospheric" data-tf-family="hero-atmospheric" style="display:contents"></a>
<section class="hero">
  <div class="hero__bg"></div>
  <div class="hero__inner">
    <div class="hero__eyebrow">— The Full Collection · Since 2020 —</div>
    <h1 class="hero__title">LIGHTSABERS.</h1>
    <p class="hero__sub">Every blade shape, every electronics tier, every duelling grade — since 2020.</p>

    <!-- Trust chip strip (in hero descriptor) — TRUST SIGNAL PLACEMENT #1 -->
    <a id="tf-trust-chip-strip-1" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="trust-strip">
      <span class="trust-strip__item">24-hour UK dispatch</span>
      <span class="trust-strip__sep"></span>
      <span class="trust-strip__item">Real UK customer service</span>
      <span class="trust-strip__sep"></span>
      <span class="trust-strip__item">1-year duelling warranty</span>
      <span class="trust-strip__sep"></span>
      <span class="trust-strip__item">2,400+ five-star reviews</span>
    </div>

    <div class="hero__ctas">
      <a href="#shop" class="btn btn--primary btn--large">Shop all 1,100 lightsabers →</a>
      <a href="#finder" class="btn btn--ghost btn--large">Find your saber</a>
    </div>
  </div>
  <div class="hero__descriptor">
    <div class="hero__descriptor-item">Category · <strong>Top-level product family</strong></div>
    <div class="hero__descriptor-item">Total SKUs · <strong>1,100</strong></div>
    <div class="hero__descriptor-item">Electronics tiers · <strong>Five</strong></div>
    <div class="hero__descriptor-item">Duelling grades · <strong>Light & Heavy</strong></div>
  </div>
</section>

<!-- Panel-seam glow -->
<div class="seam-glow"></div>

<!-- SUB-CATEGORY BROWSE TILES (patterned Variant F) -->
<section class="subcat">
  <div class="subcat__inner">
    <div class="subcat__head">
      <div class="subcat__title-block">
        <a id="tf-section-eyebrow" data-tf-family="section-eyebrow" style="display:contents"></a>
<div class="section-eyebrow">01 · Browse by hilt style</div>
        <h2 class="section-title">Five ways to hold a lightsaber.</h2>
      </div>
      <p class="subcat__desc">Every hilt style in the ARTSABERS collection, sorted by silhouette. Single-blade duellists, double-bladed showpieces, cross-guard cinema replicas, curved-hilt Sith form, and one-off custom builds.</p>
    </div>

    <a id="tf-category-browse-tiles" data-tf-family="category-browse-tiles" style="display:contents"></a>
<div class="subcat__grid">
      <a href="#single" class="subcat-tile">
        <div class="subcat-tile__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Obi-Wan-Ep3-V2-Lightsaber-Xenopixel-V3.jpg');"></div>
        <div class="subcat-tile__body">
          <div class="subcat-tile__count">218 hilts</div>
          <div class="subcat-tile__name">Single-Blade</div>
          <p class="subcat-tile__desc">The classic silhouette — one hilt, one blade. From Jedi to Sith, every canonical form.</p>
          <div class="subcat-tile__cta">Browse single-blade →</div>
        </div>
      </a>

      <a href="#double" class="subcat-tile">
        <div class="subcat-tile__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Weathered-Darth-Maul-Double-Bladed-Lightsaber-Proffie-2.2.jpg');"></div>
        <div class="subcat-tile__body">
          <div class="subcat-tile__count">96 hilts</div>
          <div class="subcat-tile__name">Double-Bladed</div>
          <p class="subcat-tile__desc">Twin-emitter staff hilts. Assembled full-length or split into two independent sabers.</p>
          <div class="subcat-tile__cta">Browse double-bladed →</div>
        </div>
      </a>

      <a href="#cross" class="subcat-tile">
        <div class="subcat-tile__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Weathered-Kylo-Ren-Crossguard-Lightsaber-Xenopixel-V3.jpg');"></div>
        <div class="subcat-tile__body">
          <div class="subcat-tile__count">68 hilts</div>
          <div class="subcat-tile__name">Cross-Guard</div>
          <p class="subcat-tile__desc">Twin quillon emitters at the guard. The Sequel-era silhouette that broke the internet.</p>
          <div class="subcat-tile__cta">Browse cross-guard →</div>
        </div>
      </a>

      <a href="#curved" class="subcat-tile">
        <div class="subcat-tile__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/10/Count-Dooku-Sith-SE-Lightsaber-1.jpg');"></div>
        <div class="subcat-tile__body">
          <div class="subcat-tile__count">34 hilts</div>
          <div class="subcat-tile__name">Curved-Hilt</div>
          <p class="subcat-tile__desc">Form II Makashi curvature. Precision duellists' geometry — Dooku, Ventress, Vosa.</p>
          <div class="subcat-tile__cta">Browse curved-hilt →</div>
        </div>
      </a>

      <a href="#custom" class="subcat-tile">
        <div class="subcat-tile__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1.jpg');"></div>
        <div class="subcat-tile__body">
          <div class="subcat-tile__count">142 hilts</div>
          <div class="subcat-tile__name">Custom-Built</div>
          <p class="subcat-tile__desc">ARTSABERS Exclusive designs — original silhouettes, unavailable anywhere else.</p>
          <div class="subcat-tile__cta">Browse custom-built →</div>
        </div>
      </a>
    </div>
  </div>
</section>

<!-- TRUST BAR SECTION — TRUST SIGNAL PLACEMENT #2 -->
<a id="tf-trust-chip-strip-2" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="trust-bar">
  <div class="trust-bar__inner">
    <div class="trust-chip">
      <div class="trust-chip__icon">
        <svg viewbox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M4 20l6-14h12l6 14v6H4z"></path><circle cx="10" cy="24" r="2.5"></circle><circle cx="22" cy="24" r="2.5"></circle>
        </svg>
      </div>
      <div class="trust-chip__claim">24-hour UK dispatch</div>
      <div class="trust-chip__evidence">Ordered before 3pm ships today. Signed-for tracking on every parcel.</div>
    </div>

    <div class="trust-chip">
      <div class="trust-chip__icon">
        <svg viewbox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M6 8h20v14a4 4 0 01-4 4h-6l-6 4v-4H6z"></path><path d="M11 14h10M11 18h6"></path>
        </svg>
      </div>
      <div class="trust-chip__claim">Real UK customer service</div>
      <div class="trust-chip__evidence">Chat, call or email — humans, not bots, based in Nottingham.</div>
    </div>

    <div class="trust-chip">
      <div class="trust-chip__icon">
        <svg viewbox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M16 3l11 4v9c0 7-4.5 12-11 14C9.5 28 5 23 5 16V7z"></path><path d="M11 16l4 4 6-8"></path>
        </svg>
      </div>
      <div class="trust-chip__claim">1-year impact warranty</div>
      <div class="trust-chip__evidence">Duelling-grade hilts covered against normal-play impact damage.</div>
    </div>

    <div class="trust-chip">
      <div class="trust-chip__icon">
        <svg viewbox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M16 3l3.7 8.5 9.3 0.7-7 6.4 2 9-8-4.8-8 4.8 2-9-7-6.4 9.3-0.7z"></path>
        </svg>
      </div>
      <div class="trust-chip__claim">2,400+ five-star reviews</div>
      <div class="trust-chip__evidence">Verified purchases across all four Saber Core tiers.</div>
    </div>
  </div>
</section>

<!-- ELECTRONICS TIER LADDER (patterned Variant G vertical) -->
<section class="tiers">
  <div class="tiers__inner">
    <div class="tiers__head">
      <div class="section-eyebrow">02 · Choose your Saber Core</div>
      <h2 class="section-title">Five electronics tiers. One shared build quality.</h2>
      <p class="tiers__desc">Every tier ships with Bluetooth app connectivity, infinite blade colours, and above-baseline sound-font counts as standard — including the entry-price S-RGB.</p>
    </div>

    <a id="tf-product-tier-comparison" data-tf-family="product-tier-comparison" style="display:contents"></a>
<div class="tiers__grid">
      <div class="tier-card">
        <div class="tier-card__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Hammer-Double-Bladed-Black-Lightsaber-Proffie-2.2.jpg');"></div>
        <div class="tier-card__body">
          <div class="tier-card__index">Tier · 01</div>
          <div class="tier-card__name">S-RGB</div>
          <div class="tier-card__price">From $89</div>
          <ul class="tier-card__specs">
            <li>Bluetooth app connectivity</li>
            <li>Infinite blade colour range</li>
            <li>12 sound fonts pre-loaded</li>
          </ul>
          <a href="#" class="tier-card__cta">Browse tier →</a>
        </div>
      </div>

      <div class="tier-card">
        <div class="tier-card__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Black-Hela-Lightsaber-Proffie-2.2.jpg');"></div>
        <div class="tier-card__body">
          <div class="tier-card__index">Tier · 02</div>
          <div class="tier-card__name">RGB-X</div>
          <div class="tier-card__price">From $149</div>
          <ul class="tier-card__specs">
            <li>Blade flash-on-clash effects</li>
            <li>Motion-controlled blaster deflect</li>
            <li>24 sound fonts pre-loaded</li>
          </ul>
          <a href="#" class="tier-card__cta">Browse tier →</a>
        </div>
      </div>

      <div class="tier-card">
        <div class="tier-card__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Black-Smasher-V2-Lightsaber-Proffie-2.2.jpg');"></div>
        <div class="tier-card__body">
          <div class="tier-card__index">Tier · 03</div>
          <div class="tier-card__name">Xenopixel V3</div>
          <div class="tier-card__price">From $299</div>
          <ul class="tier-card__specs">
            <li>Neopixel blade — per-pixel colour</li>
            <li>Cinematic ignition & retraction</li>
            <li>34 sound fonts + custom upload</li>
          </ul>
          <a href="#" class="tier-card__cta">Browse tier →</a>
        </div>
      </div>

      <div class="tier-card">
        <div class="tier-card__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mando-Black-Lightsaber-Proffie-2.2.jpg');"></div>
        <div class="tier-card__body">
          <div class="tier-card__index">Tier · 04</div>
          <div class="tier-card__name">Proffie 2.2</div>
          <div class="tier-card__price">From $459</div>
          <ul class="tier-card__specs">
            <li>Fully user-programmable board</li>
            <li>Unlimited sound-font capacity</li>
            <li>Advanced smooth-swing physics</li>
          </ul>
          <a href="#" class="tier-card__cta">Browse tier →</a>
        </div>
      </div>

      <div class="tier-card">
        <div class="tier-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Ordo-V2-Double-Bladed-Lightsaber-1.jpg');"></div>
        <div class="tier-card__body">
          <div class="tier-card__index">Tier · 05</div>
          <div class="tier-card__name">Proffie 2.2 Duelling Pro</div>
          <div class="tier-card__price">From $599</div>
          <ul class="tier-card__specs">
            <li>Reinforced heavy-duty pixel blade</li>
            <li>Impact-hardened emitter housing</li>
            <li>1-year duelling warranty</li>
          </ul>
          <a href="#" class="tier-card__cta">Browse tier →</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SHOP CTA BAND #1 — plain carbon -->
<a id="tf-inpage-cta" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="cta-band">
  <div class="cta-band__inner">
    <div class="cta-band__copy">Ready to browse? <strong>1,100 hilts.</strong> Every style. Every tier.</div>
    <a href="#shop" class="btn btn--primary">Shop all lightsabers →</a>
  </div>
</section>

<!-- FEATURED BESTSELLERS (patterned Variant F horizontal) — TRUST SIGNAL PLACEMENT #3 (inline badges) -->
<section class="featured">
  <div class="featured__inner">
    <div class="featured__head">
      <div>
        <div class="section-eyebrow">03 · Fan favourites</div>
        <h2 class="section-title">The three hilts collectors keep coming back to.</h2>
      </div>
      <a href="#" class="featured__cta-link">See all bestsellers →</a>
    </div>

    <a id="tf-product-grid" data-tf-family="product-grid" style="display:contents"></a>
<div class="featured__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">
        <div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/09/Luke-Skywalker-ROTJ-Weathered-Lightsaber-1.jpg');">
          <span class="product-card__badge product-card__badge--low">Low stock · 3 left</span>
        </div>
        <div class="product-card__body">
          <div class="product-card__meta">Character · Original Trilogy</div>
          <h3 class="product-card__name">Luke ROTJ Weathered</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">Proffie 2.2</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">Unlimited</span>
            </div>
          </div>
          <div class="product-card__foot">
            <div class="product-card__price">$419.99</div>
            <a href="#" class="product-card__cta">View saber →</a>
          </div>
        </div>
      </article>

      <article class="product-card">
        <div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Ordo-V2-Double-Bladed-Lightsaber-1.jpg');">
          <span class="product-card__badge">In stock · Ships today</span>
        </div>
        <div class="product-card__body">
          <div class="product-card__meta">ARTSABERS Exclusive · Double-bladed</div>
          <h3 class="product-card__name">Ordo V2 Double-Bladed</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">Proffie 2.2 Duelling Pro</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Blade type</span>
              <span class="product-card__spec-value">Heavy duelling</span>
            </div>
            <div class="product-card__spec">
              <span class="product-card__spec-label">Sound fonts</span>
              <span class="product-card__spec-value">Unlimited</span>
            </div>
          </div>
          <div class="product-card__foot">
            <div class="product-card__price">$549.99</div>
            <a href="#" class="product-card__cta">View saber →</a>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- SHOP CTA BAND #2 -->
<section class="cta-band">
  <div class="cta-band__inner">
    <div class="cta-band__copy">Prefer to narrow it down? <strong>Filter by character, style, or tier.</strong></div>
    <a href="#shop" class="btn btn--primary">Shop all lightsabers →</a>
  </div>
</section>

<!-- CRAFTSMANSHIP EDITORIAL SPLIT (patterned Variant G vertical) — TRUST SIGNAL PLACEMENT #4 (stat callout) -->
<a id="tf-workshop-split" data-tf-family="workshop-split" style="display:contents"></a>
<section class="craft">
  <div class="craft__inner">
    <div class="craft__copy">
      <div class="craft__eyebrow">04 · Craftsmanship</div>
      <h2 class="craft__title">What goes into a lightsaber worth buying.</h2>
      <div class="craft__prose">
        <p>Every hilt in our catalogue starts as raw aircraft-grade aluminium — workshop-turned, workshop-milled, and workshop-fitted by the same manufacturing partners that have supplied our range since 2020. The Saber Core electronics — the soundboard, the pixel driver, the Bluetooth radio — are seated, calibrated to the specific hilt, and burn-tested for a full ignition cycle before a single unit leaves the workshop floor. That's the manufacturer's spec, and it's the only standard our catalogue accepts.</p>

        <div class="stat-callout">
          <div class="stat-callout__big">10,000+ hilts shipped</div>
          <div class="stat-callout__label">Factory-direct · Since 2020</div>
        </div>

        <p>When your saber arrives, our support team already has your build sheet on file. If something is off — the blade won't ignite, the sound font is wrong, the app won't pair — you get a real person in Nottingham replying within 24 hours, not a chatbot pointing you at a knowledge-base article. That's the ARTSABERS difference. From factory floor to your door.</p>
      </div>
    </div>
    <div class="craft__media" role="img" aria-label="A lightsaber hilt on a workbench, mid-assembly, with precision tools and Saber Core electronics laid out around it."></div>
  </div>
</section>

<!-- WARM CAPTURE BAND -->
<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>

<!-- FOOTER -->
<footer class="footer">
  <div class="footer__inner">
    <div class="footer__grid">
      <div class="footer__col">
        <div class="footer__brand">ART<span class="footer__brand-accent">SABERS</span></div>
        <p class="footer__tag">From factory floor to your door. The replica saber catalogue, built for fans — since 2020.</p>
      </div>
      <div class="footer__col">
        <div class="footer__col-title">Shop</div>
        <ul class="footer__list">
          <li><a href="#">Lightsabers</a></li>
          <li><a href="#">Cosplay Helmets</a></li>
          <li><a href="#">Parts & Accessories</a></li>
          <li><a href="#">Offers & Deals</a></li>
          <li><a href="#">Under $100</a></li>
        </ul>
      </div>
      <div class="footer__col">
        <div class="footer__col-title">Saber Core</div>
        <ul class="footer__list">
          <li><a href="#">S-RGB</a></li>
          <li><a href="#">RGB-X</a></li>
          <li><a href="#">Xenopixel V3</a></li>
          <li><a href="#">Proffie 2.2</a></li>
          <li><a href="#">Proffie 2.2 Duelling Pro</a></li>
        </ul>
      </div>
      <div class="footer__col">
        <div class="footer__col-title">Support</div>
        <ul class="footer__list">
          <li><a href="#">Contact us</a></li>
          <li><a href="#">Delivery & returns</a></li>
          <li><a href="#">Warranty</a></li>
          <li><a href="#">Saber Core guide</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </div>
      <div class="footer__col">
        <div class="footer__col-title">The brand</div>
        <ul class="footer__list">
          <li><a href="#">Our story</a></li>
          <li><a href="#">The workshop</a></li>
          <li><a href="#">ARTSABERS Exclusive</a></li>
          <li><a href="#">Saber 66 (UK/EU)</a></li>
          <li><a href="#">Reviews</a></li>
        </ul>
      </div>
    </div>
    <div class="footer__base">
      <div>© 2026 ARTSABERS · A Nerdworks Company</div>
      <div class="footer__legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Cookies</a>
      </div>
    </div>
  </div>
</footer>

<!-- STICKY FLOATING SHOP LAUNCHER -->
<a href="#shop" class="sticky-launcher">
  <span>Shop</span>
  <span class="sticky-launcher__count">1,100 lightsabers</span>
  <span class="sticky-launcher__arrow">→</span>
</a>

</body>
</html>