<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
/* Ember ombre - the ONE brand voice */
--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 - backgrounds */
--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-hero: var(--carbon);
--bg-section: var(--carbon);
--bg-section-alt: var(--void);
--bg-card: var(--hull-panel);
--bg-card-nested: var(--hull-panel-lift);
--bg-card-recessed: var(--hull-panel-dark);
--bg-footer: var(--carbon);
/* Semantic text roles */
--text-heading: var(--chrome-highlight);
--text-primary: var(--chrome-warm);
--text-muted: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
/* Type sizes */
--fs-display: 128px;
--fs-h1: 84px;
--fs-h2: 60px;
--fs-h3: 32px;
--fs-h4: 22px;
--fs-body: 16px;
--fs-small: 14px;
--fs-micro: 12px;
--fs-label: 12px;
/* Fonts */
--font-display: "Space Grotesk", system-ui, sans-serif;
--font-body: "Manrope", system-ui, sans-serif;
/* 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 16px 40px -8px rgba(0,0,0,0.95);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 24px rgba(255,122,46,0.55);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);
--chrome-top-hint: inset 0 1px 0 rgba(250,250,250,0.20);
/* Layout */
--page-max: 1440px;
--page-gutter: 48px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--carbon);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select { font-family: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
/* ============================================================
PANEL SEAM — the brand signature
============================================================ */
.panel-seam {
position: relative;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,122,46,0.4) 15%,
rgba(255,180,71,0.85) 50%,
rgba(255,122,46,0.4) 85%,
transparent 100%);
box-shadow:
0 0 24px rgba(255,122,46,0.45),
0 -8px 32px rgba(255,122,46,0.15),
0 8px 32px rgba(255,122,46,0.15);
}
/* ============================================================
HEADER BAND — patterned Variant G with overlay
============================================================ */
.header-band {
position: relative;
padding: 96px 0 56px;
background-color: var(--void);
background-image:
linear-gradient(rgba(6,6,6,0.68), rgba(6,6,6,0.74)),
linear-gradient(90deg,
#0A0A0A 0%,
#131313 30%,
#0F0F0F 49.4%,
rgba(255,122,46,0.9) 49.7%,
rgba(255,180,71,1) 50%,
rgba(255,122,46,0.9) 50.3%,
#0F0F0F 50.6%,
#131313 70%,
#0A0A0A 100%);
box-shadow: var(--chrome-top-soft), inset 0 -1px 0 rgba(0,0,0,0.9);
overflow: hidden;
}
.header-band::after {
/* vertical seam bleed */
content: "";
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 220px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(255,122,46,0.28) 0%, transparent 68%);
pointer-events: none;
}
.header-band__inner {
position: relative;
z-index: 2;
max-width: var(--page-max);
margin: 0 auto;
padding: 0 var(--page-gutter);
}
.header-band__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 24px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.header-band__eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.header-band__title {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 700;
letter-spacing: 0.06em;
line-height: 0.98;
text-transform: uppercase;
color: var(--text-heading);
margin-bottom: 28px;
max-width: 820px;
}
.header-band__title-accent {
color: var(--ember);
text-shadow: 0 0 24px rgba(255,122,46,0.4);
}
.header-band__description {
font-family: var(--font-body);
font-size: 18px;
font-weight: 300;
line-height: 1.6;
color: var(--text-primary);
max-width: 640px;
margin-bottom: 56px;
}
.header-band__meta {
display: flex;
align-items: center;
gap: 40px;
padding-top: 24px;
border-top: 1px solid rgba(250,250,250,0.08);
max-width: 820px;
}
.header-band__meta-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.header-band__meta-label {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.header-band__meta-value {
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.header-band__meta-value--ember {
color: var(--ember);
}
/* Trust chip strip at base of header */
.trust-strip {
position: relative;
z-index: 2;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid rgba(250,250,250,0.08);
display: flex;
flex-wrap: wrap;
gap: 20px 44px;
align-items: center;
}
.trust-strip__item {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-primary);
}
.trust-strip__dot {
width: 4px;
height: 4px;
background: var(--ember);
box-shadow: 0 0 6px rgba(255,122,46,0.9);
}
/* ============================================================
TRUST BAR — HUD-style 4 chip band on plain carbon
============================================================ */
.trust-bar {
background: var(--carbon);
padding: 64px 0;
position: relative;
}
.trust-bar__inner {
max-width: var(--page-max);
margin: 0 auto;
padding: 0 var(--page-gutter);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(250,250,250,0.06);
border-bottom: 1px solid rgba(250,250,250,0.06);
}
.trust-chip {
padding: 40px 32px;
display: flex;
gap: 20px;
align-items: flex-start;
position: relative;
}
.trust-chip + .trust-chip {
border-left: 1px solid rgba(250,250,250,0.06);
}
.trust-chip__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ember);
filter: drop-shadow(0 0 8px rgba(255,122,46,0.35));
}
.trust-chip__icon svg {
width: 28px;
height: 28px;
stroke: currentColor;
stroke-width: 1.3;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.trust-chip__body {
display: flex;
flex-direction: column;
gap: 6px;
}
.trust-chip__title {
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-heading);
}
.trust-chip__note {
font-family: var(--font-body);
font-size: var(--fs-micro);
color: var(--text-muted);
line-height: 1.5;
}
/* ============================================================
SHOP AREA — sidebar + right column
============================================================ */
.shop-area {
background: var(--carbon);
padding: 40px 0 96px;
}
.shop-area__inner {
max-width: var(--page-max);
margin: 0 auto;
padding: 0 var(--page-gutter);
display: grid;
grid-template-columns: 280px 1fr;
gap: 56px;
align-items: start;
}
/* ============================================================
FILTER SIDEBAR
============================================================ */
.filters {
position: sticky;
top: 24px;
}
.filters__header {
padding-bottom: 16px;
margin-bottom: 24px;
border-bottom: 1px solid rgba(250,250,250,0.08);
display: flex;
align-items: center;
justify-content: space-between;
}
.filters__title {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-heading);
}
.filters__active {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(250,250,250,0.08);
}
.filters__active-label {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
}
.filters__active-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--hull-panel);
box-shadow: var(--chrome-top-hint);
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-primary);
}
.chip__x {
color: var(--ember);
font-weight: 600;
}
.filters__clear {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ember);
border-bottom: 1px solid rgba(255,122,46,0.4);
padding-bottom: 2px;
}
.filter-group {
padding: 20px 0;
border-bottom: 1px solid rgba(250,250,250,0.06);
}
.filter-group__header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0;
width: 100%;
}
.filter-group__label {
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-heading);
}
.filter-group__chev {
color: var(--text-muted);
font-size: 14px;
transition: transform 0.2s;
}
.filter-group--closed .filter-group__chev { transform: rotate(-90deg); }
.filter-group__list {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-group--closed .filter-group__list { display: none; }
.filter-option {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--text-primary);
}
.filter-option__box {
width: 14px;
height: 14px;
flex-shrink: 0;
border: 1px solid rgba(250,250,250,0.2);
background: var(--void);
position: relative;
}
.filter-option--checked .filter-option__box {
background: var(--ember);
border-color: var(--ember);
box-shadow: var(--ember-glow-sm);
}
.filter-option--checked .filter-option__box::after {
content: "";
position: absolute;
left: 3px;
top: 0px;
width: 4px;
height: 8px;
border-right: 1.5px solid var(--on-primary-fixed);
border-bottom: 1.5px solid var(--on-primary-fixed);
transform: rotate(45deg);
}
.filter-option__text {
flex: 1;
}
.filter-option__count {
font-family: var(--font-display);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.filter-option--checked .filter-option__count { color: var(--ember); }
.price-range {
padding: 12px 0 4px;
display: flex;
gap: 12px;
align-items: center;
}
.price-range__input {
flex: 1;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(250,250,250,0.15);
padding: 6px 0;
color: var(--text-primary);
font-family: var(--font-display);
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
outline: none;
}
.price-range__input:focus {
border-bottom-color: var(--ember);
box-shadow: 0 1px 8px -2px rgba(255,122,46,0.5);
}
.price-range__sep {
color: var(--text-muted);
font-size: 11px;
}
/* ============================================================
SHOP MAIN COLUMN
============================================================ */
.shop-main {
min-width: 0;
}
/* Toolbar */
.shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: var(--hull-panel);
box-shadow: var(--chrome-top-hint);
margin-bottom: 32px;
}
.shop-toolbar__count {
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-primary);
}
.shop-toolbar__count-num {
color: var(--ember);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.shop-toolbar__sort {
display: flex;
align-items: center;
gap: 12px;
}
.shop-toolbar__sort-label {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.shop-toolbar__select {
background: var(--hull-panel-lift);
color: var(--text-primary);
border: 0;
padding: 10px 32px 10px 14px;
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.06em;
box-shadow: var(--chrome-top-hint);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FF7A2E' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px;
outline: none;
}
/* ============================================================
PRODUCT GRID + CARDS
============================================================ */
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.product-grid__banner {
grid-column: 1 / -1;
}
.product-card {
position: relative;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
transition: box-shadow 0.25s ease, transform 0.25s ease;
display: flex;
flex-direction: column;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-2px);
}
.product-card--hot {
box-shadow: var(--ember-hot-rim), var(--panel-lift);
}
.product-card__media {
position: relative;
aspect-ratio: 1 / 1;
background: var(--hull-panel-dark);
overflow: hidden;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6);
}
/* Saber silhouette placeholder */
.product-card__saber {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255,122,46,0.08), transparent 70%),
linear-gradient(180deg, #131313 0%, #0A0A0A 100%);
}
.product-card__hilt {
position: relative;
width: 60px;
height: 200px;
transform: rotate(-32deg);
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.8));
}
.product-card__hilt-body {
position: absolute;
bottom: 0;
left: 50%;
width: 22px;
height: 82px;
transform: translateX(-50%);
background: linear-gradient(90deg, #3a3a3a 0%, #6a6a6a 40%, #8a8a8a 55%, #4a4a4a 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
inset -1px 0 0 rgba(0,0,0,0.6);
}
.product-card__hilt-body::before {
content: "";
position: absolute;
top: 14px; left: 2px; right: 2px;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(255,122,46,0.7), transparent);
box-shadow: 0 0 6px rgba(255,122,46,0.5);
}
.product-card__hilt-body::after {
content: "";
position: absolute;
bottom: 8px; left: 3px; right: 3px;
height: 2px;
background: linear-gradient(90deg, #1a1a1a, #4a4a4a, #1a1a1a);
}
.product-card__blade {
position: absolute;
bottom: 82px;
left: 50%;
width: 10px;
height: 118px;
transform: translateX(-50%);
border-radius: 4px 4px 0 0;
}
.product-card__blade--ember {
background: linear-gradient(180deg, #FFFDF6, #FFB347 30%, #FF7A2E 70%, #FF7A2E 100%);
box-shadow:
0 0 24px rgba(255,122,46,0.8),
0 0 48px rgba(255,122,46,0.4),
inset 0 0 4px rgba(255,255,255,0.6);
}
.product-card__blade--blue {
background: linear-gradient(180deg, #F5F9FF, #7DB6FF 30%, #3B7EDD 70%, #2C5EB0 100%);
box-shadow:
0 0 24px rgba(59,126,221,0.7),
0 0 48px rgba(59,126,221,0.35),
inset 0 0 4px rgba(255,255,255,0.6);
}
.product-card__blade--green {
background: linear-gradient(180deg, #F0FFF3, #7DE896 30%, #2FBB55 70%, #1E8A3E 100%);
box-shadow:
0 0 24px rgba(47,187,85,0.7),
0 0 48px rgba(47,187,85,0.35),
inset 0 0 4px rgba(255,255,255,0.6);
}
.product-card__blade--red {
background: linear-gradient(180deg, #FFF5F5, #FF7676 30%, #E32222 70%, #A81616 100%);
box-shadow:
0 0 24px rgba(227,34,34,0.75),
0 0 48px rgba(227,34,34,0.35),
inset 0 0 4px rgba(255,255,255,0.6);
}
.product-card__blade--purple {
background: linear-gradient(180deg, #FBF5FF, #C284FF 30%, #8A2BE2 70%, #5A1798 100%);
box-shadow:
0 0 24px rgba(138,43,226,0.75),
0 0 48px rgba(138,43,226,0.35),
inset 0 0 4px rgba(255,255,255,0.6);
}
.product-card__blade--yellow {
background: linear-gradient(180deg, #FFFEE8, #FFE96A 30%, #E5B713 70%, #A98600 100%);
box-shadow:
0 0 24px rgba(229,183,19,0.75),
0 0 48px rgba(229,183,19,0.35),
inset 0 0 4px rgba(255,255,255,0.6);
}
/* Stock badge overlay */
.stock-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(20,20,20,0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: var(--chrome-top-hint);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-primary);
}
.stock-badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2FBB55;
box-shadow: 0 0 6px rgba(47,187,85,0.8);
}
.stock-badge--low .stock-badge__dot {
background: var(--ember);
box-shadow: 0 0 6px rgba(255,122,46,0.9);
}
.stock-badge--exclusive {
background: rgba(43,8,0,0.85);
color: var(--ember-glow);
}
.stock-badge--exclusive .stock-badge__dot {
background: var(--ember-glow);
box-shadow: 0 0 8px rgba(255,180,71,0.9);
}
/* Product card body */
.product-card__body {
padding: 20px 22px 24px;
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-hint);
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.product-card__meta {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
.product-card__meta-sep {
width: 3px;
height: 3px;
background: var(--text-muted);
border-radius: 50%;
opacity: 0.6;
}
.product-card__meta-tier {
color: var(--chrome-warm);
}
.product-card__title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.25;
color: var(--text-heading);
margin-top: 2px;
min-height: 42px;
}
.product-card__price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: auto;
padding-top: 8px;
}
.product-card__price {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.product-card__price-from {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-right: 4px;
}
.product-card__rating {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.product-card__stars {
display: inline-flex;
gap: 2px;
color: var(--ember);
}
.product-card__stars svg {
width: 10px;
height: 10px;
fill: currentColor;
}
/* ============================================================
IN-GRID MARKETING BANNER
============================================================ */
.grid-banner {
position: relative;
min-height: 220px;
padding: 44px 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
background:
linear-gradient(90deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0.25) 55%, rgba(6,6,6,0.75) 100%),
linear-gradient(180deg,
#0A0A0A 0%,
#131313 20%,
rgba(255,122,46,0.9) 49.7%,
rgba(255,180,71,1) 50%,
rgba(255,122,46,0.9) 50.3%,
#131313 80%,
#0A0A0A 100%);
box-shadow: var(--panel-lift);
overflow: hidden;
}
.grid-banner::before {
/* horizontal seam glow bleed */
content: "";
position: absolute;
left: 0; right: 0;
top: 50%;
height: 120px;
transform: translateY(-50%);
background: radial-gradient(ellipse at center, rgba(255,122,46,0.35) 0%, transparent 70%);
pointer-events: none;
}
.grid-banner__inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 32px;
}
.grid-banner__text {
max-width: 620px;
}
.grid-banner__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember-glow);
margin-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.grid-banner__eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: var(--ember-glow);
}
.grid-banner__title {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: 10px;
}
.grid-banner__title strong {
color: var(--ember-glow);
font-weight: 700;
}
.grid-banner__sub {
font-family: var(--font-body);
font-size: 14px;
color: var(--text-primary);
line-height: 1.5;
}
/* Primary CTA — three-stop orange ombre */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 28px;
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: var(--fs-small);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255,255,255,0.35);
transition: box-shadow 0.2s ease, transform 0.15s ease;
white-space: nowrap;
}
.btn-primary:hover {
box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255,255,255,0.45);
transform: translateY(-1px);
}
.btn-primary__arrow {
font-size: 16px;
font-weight: 700;
}
/* Ghost button */
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
background: transparent;
color: var(--chrome-warm);
border: 1px solid rgba(62,62,62,0.9);
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-ghost:hover {
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-soft);
}
/* ============================================================
EMPTY STATE (rendered as demonstration below grid)
============================================================ */
.empty-state {
position: relative;
margin-top: 56px;
padding: 64px 48px;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
text-align: center;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.empty-state::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,122,46,0.4) 15%,
rgba(255,180,71,0.85) 50%,
rgba(255,122,46,0.4) 85%,
transparent 100%);
box-shadow: 0 0 16px rgba(255,122,46,0.5);
}
.empty-state__tag {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
}
.empty-state__title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-heading);
max-width: 480px;
}
.empty-state__note {
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--text-primary);
max-width: 520px;
margin-bottom: 12px;
}
/* ============================================================
PAGINATION
============================================================ */
.pagination {
margin-top: 56px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 0;
}
.pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
background: var(--hull-panel);
box-shadow: var(--chrome-top-hint);
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.08em;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
transition: background 0.2s;
}
.pagination__link:hover {
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-soft);
}
.pagination__link--active {
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
color: var(--on-primary-fixed);
font-weight: 700;
box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255,255,255,0.35);
}
.pagination__link--nav {
padding: 0 18px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.pagination__ellipsis {
color: var(--text-muted);
padding: 0 4px;
font-family: var(--font-display);
}
/* ============================================================
POST-GRID BRAND REINFORCEMENT BAND — Variant F (horizontal)
============================================================ */
.reinforcement-band {
position: relative;
min-height: 120px;
padding: 40px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--void);
background-image:
linear-gradient(rgba(6,6,6,0.68), rgba(6,6,6,0.72)),
linear-gradient(180deg,
#0A0A0A 0%,
#131313 30%,
#0F0F0F 49.4%,
rgba(255,122,46,0.9) 49.7%,
rgba(255,180,71,1) 50%,
rgba(255,122,46,0.9) 50.3%,
#0F0F0F 50.6%,
#131313 70%,
#0A0A0A 100%);
box-shadow: var(--chrome-top-soft), inset 0 -1px 0 rgba(0,0,0,0.9);
overflow: hidden;
}
.reinforcement-band::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 50%;
height: 220px;
transform: translateY(-50%);
background: radial-gradient(ellipse at center, rgba(255,122,46,0.22) 0%, transparent 65%);
pointer-events: none;
}
.reinforcement-band__text {
position: relative;
z-index: 2;
max-width: var(--page-max);
padding: 0 var(--page-gutter);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-highlight);
text-align: center;
}
.reinforcement-band__dot {
width: 5px;
height: 5px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.9);
flex-shrink: 0;
}
/* ============================================================
SITE FOOTER
============================================================ */
.site-footer {
background: var(--carbon);
padding: 72px 0 32px;
color: var(--text-muted);
}
.site-footer__inner {
max-width: var(--page-max);
margin: 0 auto;
padding: 0 var(--page-gutter);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(250,250,250,0.06);
}
.site-footer__brand {
display: flex;
flex-direction: column;
gap: 20px;
}
.site-footer__logo {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--chrome-highlight);
}
.site-footer__logo-mark {
color: var(--ember);
text-shadow: 0 0 12px rgba(255,122,46,0.6);
}
.site-footer__tag {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--text-primary);
line-height: 1.55;
max-width: 300px;
}
.site-footer__col-title {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: 20px;
}
.site-footer__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer__list a {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--text-muted);
transition: color 0.2s;
}
.site-footer__list a:hover { color: var(--ember); }
.site-footer__bottom {
padding-top: 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.site-footer__legal {
display: flex;
gap: 24px;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 1080px) {
:root {
--page-gutter: 32px;
--fs-h1: 56px;
}
.shop-area__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.filters { position: static; }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.trust-bar__inner { grid-template-columns: repeat(2, 1fr); }
.trust-chip:nth-child(2) { border-left: 1px solid rgba(250,250,250,0.06); }
.trust-chip:nth-child(3) { border-left: 0; border-top: 1px solid rgba(250,250,250,0.06); }
.trust-chip:nth-child(4) { border-top: 1px solid rgba(250,250,250,0.06); }
.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
:root {
--page-gutter: 20px;
--fs-h1: 40px;
}
.header-band { padding: 64px 0 40px; }
.header-band__meta { flex-wrap: wrap; gap: 24px; }
.grid-banner {
padding: 32px 28px;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 24px;
}
.grid-banner__inner { flex-direction: column; align-items: flex-start; }
.grid-banner__title { font-size: 24px; }
.site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 520px) {
.product-grid { grid-template-columns: 1fr; }
.product-grid__banner { order: 6; }
.trust-bar__inner { grid-template-columns: 1fr; }
.trust-chip { border-left: 0 !important; }
.trust-chip + .trust-chip { border-top: 1px solid rgba(250,250,250,0.06); }
.shop-toolbar {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.empty-state { padding: 40px 20px; }
}
</style>
</head>
<body>
<!-- ============================================================
HEADER BAND (Variant G patterned + overlay)
============================================================ -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<header class="header-band">
<div class="header-band__inner">
<div class="header-band__eyebrow">Shop / Lightsabers</div>
<h1 class="header-band__title">
Every character. Every Saber Core.<br>
<span class="header-band__title-accent">Every duelling grade.</span>
</h1>
<p class="header-band__description">
Roughly 350 unique saber models, from budget baselit builds to Xenopixel V3 and Proffie 2.2 flagships. Filter by character, blade colour, hilt style, or Saber Core tier — every hilt hand-tested before it leaves the factory floor.
</p>
<div class="header-band__meta">
<div class="header-band__meta-item">
<span class="header-band__meta-label">Specimens</span>
<span class="header-band__meta-value header-band__meta-value--ember">1,100 SKUs</span>
</div>
<div class="header-band__meta-item">
<span class="header-band__meta-label">Unique models</span>
<span class="header-band__meta-value">~350</span>
</div>
<div class="header-band__meta-item">
<span class="header-band__meta-label">Saber Core tiers</span>
<span class="header-band__meta-value">5</span>
</div>
<div class="header-band__meta-item">
<span class="header-band__meta-label">Duelling grades</span>
<span class="header-band__meta-value">Light & Heavy</span>
</div>
</div>
<a id="tf-trust-chip-strip-1" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="trust-strip">
<div class="trust-strip__item"><span class="trust-strip__dot"></span>24-hour UK dispatch</div>
<div class="trust-strip__item"><span class="trust-strip__dot"></span>UK customer service</div>
<div class="trust-strip__item"><span class="trust-strip__dot"></span>1-year duelling warranty</div>
<div class="trust-strip__item"><span class="trust-strip__dot"></span>2,400+ five-star reviews</div>
</div>
</div>
</header>
<div class="panel-seam"></div>
<!-- ============================================================
TRUST BAR (4 chips on plain carbon)
============================================================ -->
<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 24 24"><path d="M12 2 3 6v6c0 5 3.5 9 9 10 5.5-1 9-5 9-10V6l-9-4z"/><path d="m9 12 2 2 4-4"/></svg>
</div>
<div class="trust-chip__body">
<div class="trust-chip__title">24-hour UK dispatch</div>
<div class="trust-chip__note">Order by 3pm, gone the same day from our UK hub. Global delivery in 7–10 days.</div>
</div>
</div>
<div class="trust-chip">
<div class="trust-chip__icon">
<svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9-6-18-3 9H2"/></svg>
</div>
<div class="trust-chip__body">
<div class="trust-chip__title">UK customer service</div>
<div class="trust-chip__note">Named single point of contact after purchase — 24-hour response window on every ticket.</div>
</div>
</div>
<div class="trust-chip">
<div class="trust-chip__icon">
<svg viewBox="0 0 24 24"><path d="M4 4h16v6a8 8 0 0 1-8 8 8 8 0 0 1-8-8V4z"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
</div>
<div class="trust-chip__body">
<div class="trust-chip__title">1-year duelling warranty</div>
<div class="trust-chip__note">Heavy-duel grade covered end-to-end. Damage a hilt in fair combat, we replace it.</div>
</div>
</div>
<div class="trust-chip">
<div class="trust-chip__icon">
<svg viewBox="0 0 24 24"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77 5.82 21l1.18-6.88-5-4.87 6.91-1.01L12 2z"/></svg>
</div>
<div class="trust-chip__body">
<div class="trust-chip__title">2,400+ five-star reviews</div>
<div class="trust-chip__note">Independently collected from real customers across four continents since 2020.</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
MAIN SHOP AREA (sidebar + right column)
============================================================ -->
<section class="shop-area">
<div class="shop-area__inner">
<!-- Filter sidebar -->
<aside class="filters">
<div class="filters__header">
<span class="filters__title">Refine catalogue</span>
</div>
<a id="tf-filter-chip-strip" data-tf-family="filter-chip-strip" style="display:contents"></a>
<div class="filters__active">
<div class="filters__active-label">Active filters</div>
<div class="filters__active-chips">
<span class="chip">Xenopixel V3 <span class="chip__x">✕</span></span>
<span class="chip">Heavy duel <span class="chip__x">✕</span></span>
<span class="chip">Ember <span class="chip__x">✕</span></span>
</div>
<a href="#" class="filters__clear">Clear all</a>
</div>
<div class="filter-group">
<button class="filter-group__header">
<span class="filter-group__label">Saber Core</span>
<span class="filter-group__chev">▾</span>
</button>
<ul class="filter-group__list">
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">S-RGB</span><span class="filter-option__count">84</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">RGB-X</span><span class="filter-option__count">112</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">SNV4 PRO</span><span class="filter-option__count">76</span></li>
<li class="filter-option filter-option--checked"><span class="filter-option__box"></span><span class="filter-option__text">Xenopixel V3</span><span class="filter-option__count">128</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Proffie 2.2</span><span class="filter-option__count">46</span></li>
</ul>
</div>
<div class="filter-group">
<button class="filter-group__header">
<span class="filter-group__label">Hilt style</span>
<span class="filter-group__chev">▾</span>
</button>
<ul class="filter-group__list">
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Character replica</span><span class="filter-option__count">184</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">ARTSABERS Exclusive</span><span class="filter-option__count">42</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Curved / Dooku-style</span><span class="filter-option__count">28</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Crossguard</span><span class="filter-option__count">14</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Dual / staff</span><span class="filter-option__count">22</span></li>
</ul>
</div>
<div class="filter-group">
<button class="filter-group__header">
<span class="filter-group__label">Blade colour</span>
<span class="filter-group__chev">▾</span>
</button>
<ul class="filter-group__list">
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Blue</span><span class="filter-option__count">112</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Green</span><span class="filter-option__count">86</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Red</span><span class="filter-option__count">94</span></li>
<li class="filter-option filter-option--checked"><span class="filter-option__box"></span><span class="filter-option__text">Ember / orange</span><span class="filter-option__count">18</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Purple</span><span class="filter-option__count">24</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Yellow</span><span class="filter-option__count">16</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">White</span><span class="filter-option__count">12</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Infinite (baselit)</span><span class="filter-option__count">142</span></li>
</ul>
</div>
<div class="filter-group">
<button class="filter-group__header">
<span class="filter-group__label">Duelling grade</span>
<span class="filter-group__chev">▾</span>
</button>
<ul class="filter-group__list">
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Light duel</span><span class="filter-option__count">168</span></li>
<li class="filter-option filter-option--checked"><span class="filter-option__box"></span><span class="filter-option__text">Heavy duel</span><span class="filter-option__count">182</span></li>
</ul>
</div>
<div class="filter-group">
<button class="filter-group__header">
<span class="filter-group__label">Blade length</span>
<span class="filter-group__chev">▾</span>
</button>
<ul class="filter-group__list">
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">24″ (short)</span><span class="filter-option__count">32</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">32″ (standard)</span><span class="filter-option__count">218</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">36″ (extended)</span><span class="filter-option__count">96</span></li>
</ul>
</div>
<div class="filter-group">
<button class="filter-group__header">
<span class="filter-group__label">Features</span>
<span class="filter-group__chev">▾</span>
</button>
<ul class="filter-group__list">
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Bluetooth app</span><span class="filter-option__count">248</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Smooth swing</span><span class="filter-option__count">312</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Flash on clash</span><span class="filter-option__count">296</span></li>
<li class="filter-option"><span class="filter-option__box"></span><span class="filter-option__text">Removable blade</span><span class="filter-option__count">204</span></li>
</ul>
</div>
<div class="filter-group filter-group--closed">
<button class="filter-group__header">
<span class="filter-group__label">Allegiance</span>
<span class="filter-group__chev">▾</span>
</button>
</div>
<div class="filter-group">
<button class="filter-group__header">
<span class="filter-group__label">Price range (USD)</span>
<span class="filter-group__chev">▾</span>
</button>
<div class="price-range">
<input class="price-range__input" type="text" value="$60" aria-label="Minimum price">
<span class="price-range__sep">—</span>
<input class="price-range__input" type="text" value="$725" aria-label="Maximum price">
</div>
</div>
<div class="filter-group filter-group--closed">
<button class="filter-group__header">
<span class="filter-group__label">Stock status</span>
<span class="filter-group__chev">▾</span>
</button>
</div>
</aside>
<!-- Main column -->
<div class="shop-main">
<!-- Toolbar -->
<div class="shop-toolbar">
<div class="shop-toolbar__count"><span class="shop-toolbar__count-num">128</span> Products</div>
<div class="shop-toolbar__sort">
<span class="shop-toolbar__sort-label">Sort</span>
<select class="shop-toolbar__select">
<option>Featured</option>
<option>Newest</option>
<option>Price ascending</option>
<option>Price descending</option>
<option>Best selling</option>
</select>
</div>
</div>
<!-- Product grid with in-grid banner -->
<a id="tf-product-grid" data-tf-family="product-grid" style="display:contents"></a>
<div class="product-grid">
<!-- Row 1 -->
<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">
<a id="tf-tier-badge" data-tf-family="tier-badge" style="display:contents"></a>
<div class="stock-badge stock-badge--exclusive">
<span class="stock-badge__dot"></span>ARTSABERS Exclusive
</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--ember"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Ember</span>
</div>
<div class="product-card__title">Carbon Strike — Ember Signature</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$589</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.9 · 218</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<a id="tf-stock-status-chip-1" data-tf-family="stock-status-chip" style="display:contents"></a>
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--purple"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Proffie 2.2</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Purple</span>
</div>
<div class="product-card__title">Mace Windu SE — Purple Signature</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$725</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.8 · 96</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--red"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Red</span>
</div>
<div class="product-card__title">Darth Vader EP6 ROTJ</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$539</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.9 · 342</span>
</div>
</div>
</div>
</article>
<!-- Row 2 -->
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--blue"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">SNV4 PRO</span>
<span class="product-card__meta-sep"></span>
<span>Light duel</span>
<span class="product-card__meta-sep"></span>
<span>Blue</span>
</div>
<div class="product-card__title">Obi-Wan Kenobi ROTS Legacy</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$389</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.8 · 174</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<a id="tf-stock-status-chip-2" data-tf-family="stock-status-chip" style="display:contents"></a>
<div class="stock-badge stock-badge--low"><span class="stock-badge__dot"></span>Low stock · 4 left</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--green"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Green</span>
</div>
<div class="product-card__title">Ahsoka Tano Clone Wars Duelling</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$479</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.9 · 268</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--red"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Red</span>
</div>
<div class="product-card__title">Starkiller SE — Signature Build</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$629</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.8 · 154</span>
</div>
</div>
</div>
</article>
<!-- In-grid marketing banner (after product 6, before product 7) -->
<a id="tf-inpage-cta" data-tf-family="inpage-cta" style="display:contents"></a>
<div class="product-grid__banner">
<div class="grid-banner">
<div class="grid-banner__inner">
<div class="grid-banner__text">
<div class="grid-banner__eyebrow">Free with every order over $350</div>
<h3 class="grid-banner__title">Add a <strong>free RGB Baselit</strong> to any hilt over $350.</h3>
<p class="grid-banner__sub">Bluetooth app connectivity, infinite colours, above-baseline sound font count — added to your order automatically at checkout.</p>
</div>
<a href="#" class="btn-primary">Claim the drop <span class="btn-primary__arrow">›</span></a>
</div>
</div>
</div>
<!-- Row 3 (products 7-9) -->
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--red"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Proffie 2.2</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Red</span>
</div>
<div class="product-card__title">Kylo Ren TFA Crossguard</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$669</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.9 · 208</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--green"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Light duel</span>
<span class="product-card__meta-sep"></span>
<span>Green</span>
</div>
<div class="product-card__title">Luke Skywalker ROTJ Reforged</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$449</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.8 · 186</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--yellow"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">SNV4 PRO</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Yellow</span>
</div>
<div class="product-card__title">Rey Skywalker Reforged Legacy</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$419</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.7 · 128</span>
</div>
</div>
</div>
</article>
<!-- Row 4 (products 10-12) -->
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--blue"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Blue</span>
</div>
<div class="product-card__title">Anakin ROTS Duelling</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$489</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.9 · 296</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge stock-badge--low"><span class="stock-badge__dot"></span>Low stock · 2 left</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--blue"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Proffie 2.2</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Blue</span>
</div>
<div class="product-card__title">General Grievous Quad-Wield</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$549</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.7 · 82</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--red"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Red</span>
</div>
<div class="product-card__title">Count Dooku SE Curved-Hilt</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$509</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.8 · 114</span>
</div>
</div>
</div>
</article>
<!-- Row 5 (products 13-15) -->
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--blue"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">SNV4 PRO</span>
<span class="product-card__meta-sep"></span>
<span>Light duel</span>
<span class="product-card__meta-sep"></span>
<span>Blue</span>
</div>
<div class="product-card__title">Plo Koon Council Legacy</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$369</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.6 · 68</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--green"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Light duel</span>
<span class="product-card__meta-sep"></span>
<span>Green</span>
</div>
<div class="product-card__title">Yoda Grandmaster Legacy Shoto</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$399</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.9 · 224</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--blue"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Blue</span>
</div>
<div class="product-card__title">Ezra Bridger Rebels Reforged</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$429</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.7 · 92</span>
</div>
</div>
</div>
</article>
<!-- Row 6 (products 16-18) -->
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge stock-badge--exclusive"><span class="stock-badge__dot"></span>ARTSABERS Exclusive</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--ember"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Proffie 2.2</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Ember</span>
</div>
<div class="product-card__title">Forge Warden — Exclusive Design</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$649</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.9 · 78</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--blue"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">SNV4 PRO</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Blue</span>
</div>
<div class="product-card__title">Ki-Adi-Mundi Council SE</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$359</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.6 · 48</span>
</div>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="stock-badge"><span class="stock-badge__dot"></span>In stock · Ships today</div>
<div class="product-card__saber">
<div class="product-card__hilt">
<div class="product-card__blade product-card__blade--blue"></div>
<div class="product-card__hilt-body"></div>
</div>
</div>
</div>
<div class="product-card__body">
<div class="product-card__meta">
<span class="product-card__meta-tier">Xenopixel V3</span>
<span class="product-card__meta-sep"></span>
<span>Heavy duel</span>
<span class="product-card__meta-sep"></span>
<span>Blue</span>
</div>
<div class="product-card__title">Barriss Offee Duelling Reforged</div>
<div class="product-card__price-row">
<div>
<span class="product-card__price-from">From</span>
<span class="product-card__price">$449</span>
</div>
<div class="product-card__rating">
<span class="product-card__stars">
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
<svg viewBox="0 0 12 12"><path d="M6 0l1.7 3.9L12 4.5l-3 3 .9 4.5L6 9.5 2.1 12 3 7.5 0 4.5l4.3-.6L6 0z"/></svg>
</span>
<span>4.7 · 104</span>
</div>
</div>
</div>
</article>
</div><!-- /.product-grid -->
<!-- Pagination -->
<nav class="pagination" aria-label="Product pages">
<a href="#" class="pagination__link pagination__link--nav">‹ Prev</a>
<a href="#" class="pagination__link pagination__link--active">1</a>
<a href="#" class="pagination__link">2</a>
<a href="#" class="pagination__link">3</a>
<a href="#" class="pagination__link">4</a>
<span class="pagination__ellipsis">…</span>
<a href="#" class="pagination__link">8</a>
<a href="#" class="pagination__link pagination__link--nav">Next ›</a>
</nav>
<!-- Empty-state demonstration (rendered inline when filters return zero) -->
<a id="tf-empty-state" data-tf-family="empty-state" style="display:contents"></a>
<div class="empty-state" aria-label="Empty state demonstration">
<div class="empty-state__tag">Zero-result state</div>
<h3 class="empty-state__title">No sabers match those filters yet.</h3>
<p class="empty-state__note">Loosen a filter to broaden the field — or clear all to browse the full 1,100-strong catalogue.</p>
<a href="#" class="btn-primary">Clear filters <span class="btn-primary__arrow">›</span></a>
</div>
</div><!-- /.shop-main -->
</div><!-- /.shop-area__inner -->
</section>
<div class="panel-seam"></div>
<!-- ============================================================
POST-GRID BRAND-REINFORCEMENT BAND (Variant F horizontal)
============================================================ -->
<a id="tf-trust-chip-strip-3" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="reinforcement-band">
<div class="reinforcement-band__text">
<span>Every hilt tracked from workshop dispatch</span>
<span class="reinforcement-band__dot"></span>
<span>Global 7–10 day delivery</span>
<span class="reinforcement-band__dot"></span>
<span>2,400+ five-star reviews</span>
<span class="reinforcement-band__dot"></span>
<span>ARTSABERS Exclusive designs</span>
</div>
</section>
<!-- ============================================================
SITE FOOTER
============================================================ -->
<footer class="site-footer">
<div class="site-footer__inner">
<div class="site-footer__grid">
<div class="site-footer__brand">
<div class="site-footer__logo">ART<span class="site-footer__logo-mark">SABERS</span></div>
<p class="site-footer__tag">From factory floor to your door. Hundreds of sabers, one trusted retailer — every character, every Saber Core, every duelling grade.</p>
</div>
<div>
<div class="site-footer__col-title">Shop</div>
<ul class="site-footer__list">
<li><a href="#">All lightsabers</a></li>
<li><a href="#">Character replicas</a></li>
<li><a href="#">ARTSABERS Exclusive</a></li>
<li><a href="#">Cosplay helmets</a></li>
<li><a href="#">Parts & accessories</a></li>
<li><a href="#">Under $100</a></li>
</ul>
</div>
<div>
<div class="site-footer__col-title">By Saber Core</div>
<ul class="site-footer__list">
<li><a href="#">S-RGB</a></li>
<li><a href="#">RGB-X</a></li>
<li><a href="#">SNV4 PRO</a></li>
<li><a href="#">Xenopixel V3</a></li>
<li><a href="#">Proffie 2.2</a></li>
</ul>
</div>
<div>
<div class="site-footer__col-title">Support</div>
<ul class="site-footer__list">
<li><a href="#">Delivery & timing</a></li>
<li><a href="#">Warranty & returns</a></li>
<li><a href="#">Contact — 24-hr response</a></li>
<li><a href="#">XenoConfigurator</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div>
<div class="site-footer__col-title">Brand</div>
<ul class="site-footer__list">
<li><a href="#">Our story</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">UK visitors — Saber 66</a></li>
<li><a href="#">Fan community</a></li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<div>© 2026 ARTSABERS · A Nerdworks brand</div>
<div class="site-footer__legal">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Cookies</a>
</div>
</div>
</div>
</footer>
</body>
</html>