<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Cart · The Bench</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>
/* ========================================================================
TOKENS — Kyber Hull, verbatim from styleguide
======================================================================== */
: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 / white highlights */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surfaces + text roles */
--bg-page: var(--carbon);
--bg-band: var(--charcoal);
--bg-band-warm: var(--charcoal-warm);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-recess: var(--hull-panel-dark);
--text-on-dark: var(--chrome-warm);
--text-on-dark-heading: var(--chrome-highlight);
--text-on-dark-muted: var(--chrome-dim);
--accent-on-dark: var(--ember);
/* MAS52 error */
--forge-red: #E63929;
/* 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 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 24px rgba(255,122,46,0.5);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);
--chrome-top-hard: inset 0 1px 0 rgba(250,250,250,0.40);
}
/* ========================================================================
RESET + BASE
======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--text-on-dark);
background: var(--bg-page);
/* Panel-joint hairlines every 240px + warm ember bloom top-left */
background-image:
radial-gradient(ellipse 800px 500px at 12% 0%, rgba(255,122,46,0.09), transparent 60%),
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 239px,
rgba(250,250,250,0.025) 239px,
rgba(250,250,250,0.025) 240px
),
linear-gradient(180deg, var(--carbon) 0%, var(--charcoal) 15%, var(--charcoal) 85%, var(--carbon) 100%);
background-attachment: fixed, fixed, fixed;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
/* ========================================================================
LAYOUT PRIMITIVES
======================================================================== */
.container {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
.section-band { position: relative; }
/* Panel seam glow — sparse, used between deliberate boundaries */
.seam-glow {
position: relative;
height: 1px;
background: rgba(255,122,46,0.65);
box-shadow: 0 0 24px 2px rgba(255,122,46,0.35), 0 8px 40px rgba(255,122,46,0.12);
}
/* ========================================================================
PAGE HEADER (block: page-header — REUSED from MAS51, tighter)
======================================================================== */
.page-header {
padding: 40px 0 44px;
position: relative;
box-shadow: var(--chrome-top-soft);
}
.page-header__breadcrumb {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-on-dark-muted);
margin-bottom: 20px;
}
.page-header__breadcrumb a { color: var(--text-on-dark-muted); }
.page-header__breadcrumb a:hover { color: var(--accent-on-dark); }
.page-header__crumb-sep {
margin: 0 10px;
color: var(--hull-edge);
}
.page-header__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 56px;
line-height: 1;
color: var(--ember);
margin: 0 0 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.page-header__subline {
font-family: var(--font-display);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-on-dark);
margin-bottom: 20px;
}
.page-header__subline .dot { color: var(--hull-edge); margin: 0 10px; }
/* ========================================================================
TRUST CHIP STRIP (block: trust-chip-strip — REUSED from MAS51)
======================================================================== */
.trust-chip-strip {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: center;
padding: 12px 0;
border-top: 1px solid rgba(250,250,250,0.06);
border-bottom: 1px solid rgba(250,250,250,0.04);
}
.trust-chip-strip__item {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-on-dark-muted);
padding: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.trust-chip-strip__item::before {
content: "";
width: 4px;
height: 4px;
background: var(--ember);
display: inline-block;
box-shadow: 0 0 6px var(--ember);
}
.trust-chip-strip__sep {
color: var(--hull-edge);
margin: 0 20px;
font-size: 11px;
}
/* ========================================================================
FREE GIFT BAND — COMPACT (block: gift-band-compact)
======================================================================== */
.gift-band {
background: var(--charcoal-warm);
padding: 20px 0;
position: relative;
border-top: 1px solid rgba(255,122,46,0.55);
box-shadow: 0 -1px 0 rgba(255,122,46,0.15), 0 4px 32px -8px rgba(255,122,46,0.18) inset;
}
.gift-band__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
}
.gift-band__lead {
display: flex;
align-items: center;
gap: 16px;
}
.gift-band__icon {
width: 36px;
height: 36px;
background: var(--hull-panel);
border: 1px solid rgba(255,122,46,0.4);
display: grid;
place-items: center;
color: var(--ember);
box-shadow: 0 0 12px rgba(255,122,46,0.25) inset;
flex-shrink: 0;
}
.gift-band__copy {
font-family: var(--font-display);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-on-dark);
}
.gift-band__copy strong {
color: var(--ember);
font-weight: 600;
}
.gift-band__tiles {
display: flex;
gap: 12px;
}
.gift-tile {
width: 120px;
background: var(--hull-panel);
padding: 0;
border: 0;
position: relative;
cursor: pointer;
box-shadow: var(--chrome-top-soft), 0 6px 18px -6px rgba(0,0,0,0.8);
transition: box-shadow 0.15s ease;
}
.gift-tile:hover {
box-shadow: var(--chrome-top-hard), 0 8px 22px -6px rgba(0,0,0,0.9);
}
.gift-tile__img {
width: 100%;
height: 96px;
object-fit: cover;
background: var(--hull-panel-dark);
}
.gift-tile__meta {
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
.gift-tile__name {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-on-dark);
line-height: 1.3;
}
.gift-tile__price {
font-family: var(--font-display);
font-size: 10px;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
}
.gift-tile--selected {
box-shadow: var(--ember-hot-rim);
}
.gift-tile--selected::after {
content: "✓";
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
background: var(--ember);
color: var(--on-primary-fixed);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
/* ========================================================================
MAIN CART BODY — two-column grid
======================================================================== */
.cart-body {
padding: 48px 0 56px;
}
.cart-body__grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 40px;
align-items: start;
}
.cart-body__main { min-width: 0; }
.cart-body__side { position: sticky; top: 32px; }
/* ========================================================================
LINE ITEM ROW (block: line-item-row — NEW for Variant C)
======================================================================== */
.line-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.line-item {
background: var(--bg-card);
padding: 16px;
box-shadow: var(--panel-lift);
transition: box-shadow 0.15s ease;
position: relative;
}
.line-item:hover { box-shadow: var(--panel-lift-hover); }
.line-item__row {
display: grid;
grid-template-columns: 100px 1fr auto;
gap: 20px;
align-items: center;
}
.line-item__media {
width: 100px;
height: 100px;
background: var(--hull-panel-dark);
overflow: hidden;
box-shadow: var(--chrome-top-soft);
}
.line-item__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.line-item__mid {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.dispatch-tag {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 8px;
background: rgba(255,122,46,0.10);
border: 1px solid rgba(255,122,46,0.45);
color: var(--ember);
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
.dispatch-tag::before {
content: "";
width: 5px;
height: 5px;
background: var(--ember);
box-shadow: 0 0 6px var(--ember);
}
.line-item__name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--chrome-warm);
line-height: 1.2;
margin: 0;
letter-spacing: 0.005em;
}
.line-item__summary {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chrome-dim);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.line-item__summary .dot { color: var(--hull-edge); }
.swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(250,250,250,0.15), 0 0 8px currentColor;
}
.swatch--ember { color: #FF9540; background: #FF9540; }
.swatch--red { color: #E63929; background: #E63929; }
.swatch--purple { color: #A855F7; background: #A855F7; }
.line-item__controls {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.qty-stepper {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--hull-edge);
background: var(--hull-panel-dark);
height: 30px;
}
.qty-stepper__btn {
width: 28px;
background: transparent;
border: 0;
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 14px;
padding: 0;
transition: background 0.12s;
}
.qty-stepper__btn:hover { background: var(--hull-panel-lift); color: var(--ember); }
.qty-stepper__val {
min-width: 32px;
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--chrome-warm);
border-left: 1px solid var(--hull-edge);
border-right: 1px solid var(--hull-edge);
padding: 0 4px;
}
.line-item__actions {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.line-item__action {
background: transparent;
border: 0;
padding: 0;
color: var(--chrome-dim);
font-family: inherit;
font-size: inherit;
letter-spacing: inherit;
text-transform: inherit;
transition: color 0.12s;
}
.line-item__action:hover { color: var(--ember); }
.line-item__action--danger:hover { color: var(--forge-red); }
.line-item__action-sep { color: var(--hull-edge); }
.line-item__right {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.line-item__unit {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
font-variant-numeric: tabular-nums;
}
.line-item__total {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* Expanded drawer */
.line-item--expanded .line-item__drawer { display: block; }
.line-item__drawer {
display: none;
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed rgba(250,250,250,0.08);
background: var(--hull-panel-dark);
padding: 16px;
margin: 16px -16px -16px;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
}
.line-item__drawer-title {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ember);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 10px;
}
.line-item__drawer-title::before {
content: "";
width: 12px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 4px var(--ember);
}
.spec-sheet {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 40px;
margin-bottom: 14px;
}
.spec-row {
display: flex;
align-items: baseline;
gap: 8px;
padding: 4px 0;
border-bottom: 1px dotted rgba(184,176,166,0.15);
}
.spec-row__label {
font-family: var(--font-body);
font-size: 11px;
color: var(--chrome-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.spec-row__dots {
flex: 1;
border-bottom: 1px dotted rgba(184,176,166,0.15);
margin: 0 6px 3px;
min-width: 12px;
}
.spec-row__val {
font-family: var(--font-display);
font-size: 12px;
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
text-align: right;
letter-spacing: 0.02em;
}
.feature-list {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
margin: 10px 0 14px;
padding: 0;
list-style: none;
}
.feature-list__item {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chrome-warm);
display: flex;
align-items: center;
gap: 6px;
}
.feature-list__item::before {
content: "▸";
color: var(--ember);
font-size: 8px;
}
.line-item__edit-link {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.15s;
}
.line-item__edit-link:hover { gap: 10px; color: var(--ember-glow); }
/* ========================================================================
DISPATCH SUMMARY STRIP (block: dispatch-summary-strip — NEW for Variant C)
======================================================================== */
.dispatch-summary {
margin-top: 20px;
background: var(--hull-panel-dark);
padding: 18px 20px;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.05);
border-left: 2px solid var(--ember);
}
.dispatch-summary__title {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
margin: 0 0 12px;
}
.dispatch-summary__rows {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.dispatch-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 16px;
align-items: center;
padding: 8px 0;
border-bottom: 1px dotted rgba(184,176,166,0.15);
}
.dispatch-row:last-child { border-bottom: 0; }
.dispatch-row__num {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ember);
font-weight: 600;
min-width: 100px;
}
.dispatch-row__date {
font-family: var(--font-display);
font-size: 12px;
color: var(--chrome-warm);
text-transform: uppercase;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
}
.dispatch-row__price {
font-family: var(--font-display);
font-size: 11px;
color: var(--ember);
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 600;
}
.dispatch-row__link {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ember);
transition: color 0.12s;
}
.dispatch-row__link:hover { color: var(--ember-glow); }
.dispatch-summary__explainer {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.5;
margin: 0;
font-style: italic;
}
/* ========================================================================
OPTIONS FOOTER ROW (block: options-icon-row — NEW for Variant C)
======================================================================== */
.options-row {
margin-top: 28px;
padding: 20px;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
}
.options-row__title {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
margin: 0 0 14px;
}
.options-row__icons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.opt-icon {
background: var(--hull-panel-dark);
padding: 12px 14px;
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
cursor: pointer;
border: 0;
text-align: left;
transition: background 0.12s;
position: relative;
}
.opt-icon:hover { background: var(--hull-panel-lift); }
.opt-icon__glyph {
width: 32px;
height: 32px;
border: 1px solid var(--hull-edge);
display: grid;
place-items: center;
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 14px;
}
.opt-icon--on .opt-icon__glyph {
border-color: var(--ember);
color: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.25) inset;
}
.opt-icon__label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.opt-icon__name {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chrome-warm);
font-weight: 500;
}
.opt-icon__sub {
font-family: var(--font-body);
font-size: 11px;
color: var(--chrome-dim);
line-height: 1.3;
}
.opt-icon__state {
font-family: var(--font-display);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.opt-icon--on .opt-icon__state {
color: var(--ember);
}
.opt-icon--on .opt-icon__state::before {
content: "●";
margin-right: 4px;
color: var(--ember);
text-shadow: 0 0 6px var(--ember);
}
.opt-icon__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
background: rgba(255,122,46,0.15);
border: 1px solid rgba(255,122,46,0.5);
color: var(--ember);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.10em;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
font-weight: 600;
}
.opt-icon__chip-x {
cursor: pointer;
color: var(--ember);
transition: color 0.12s;
font-weight: 700;
}
.opt-icon__chip-x:hover { color: var(--forge-red); }
/* Expanded panel for gift-wrap */
.gift-wrap-panel {
margin-top: 12px;
padding: 16px;
background: var(--hull-panel-dark);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.5);
border-top: 1px solid rgba(255,122,46,0.35);
}
.gift-wrap-panel__desc {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
margin: 0 0 12px;
line-height: 1.5;
}
.gift-wrap-panel__desc strong { color: var(--chrome-warm); font-weight: 500; }
.textarea-field {
position: relative;
}
.textarea-field__label {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
display: block;
margin-bottom: 6px;
}
.textarea-field__input {
width: 100%;
min-height: 68px;
background: transparent;
color: var(--chrome-warm);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
padding: 10px 12px;
border: 0;
border-bottom: 1px solid var(--hull-edge);
resize: vertical;
outline: none;
transition: border-color 0.15s;
}
.textarea-field__input:focus {
border-bottom-color: var(--ember);
box-shadow: 0 1px 0 var(--ember), 0 4px 12px -6px rgba(255,122,46,0.5);
}
.textarea-field__counter {
font-family: var(--font-display);
font-size: 10px;
color: var(--chrome-dim);
text-align: right;
margin-top: 4px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
}
/* ========================================================================
ORDER TOTAL (block: order-total-minimal — NEW for Variant C)
======================================================================== */
.order-total {
background: var(--hull-panel);
padding: 24px;
box-shadow: var(--panel-lift);
position: relative;
}
.order-total__title {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--chrome-dim);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(250,250,250,0.05);
}
.order-total__rows {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.total-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-family: var(--font-body);
font-size: 13px;
}
.total-row__label {
color: var(--chrome-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-display);
font-size: 11px;
}
.total-row__value {
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.01em;
}
.total-row--discount .total-row__value { color: var(--ember); }
.total-row--free .total-row__value {
color: var(--ember);
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
font-size: 11px;
}
.order-total__hair {
border-top: 1px solid rgba(250,250,250,0.06);
margin: 8px 0 16px;
}
.order-total__grand {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 20px;
}
.order-total__grand-label {
font-family: var(--font-display);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-warm);
font-weight: 500;
}
.order-total__grand-val {
font-family: var(--font-display);
font-size: 40px;
line-height: 1;
font-weight: 700;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.005em;
text-shadow: 0 0 24px rgba(255,122,46,0.35);
}
.order-total__bnpl {
padding: 12px 14px;
background: var(--hull-panel-dark);
border-left: 2px solid var(--hull-edge);
margin-bottom: 12px;
}
.order-total__bnpl-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.order-total__bnpl-label {
font-family: var(--font-display);
font-size: 11px;
color: var(--chrome-warm);
text-transform: uppercase;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
}
.order-total__bnpl-label strong { color: var(--ember); font-weight: 600; }
.order-total__bnpl-tag {
font-family: var(--font-display);
font-size: 9px;
padding: 2px 6px;
background: rgba(255,122,46,0.1);
border: 1px solid rgba(255,122,46,0.4);
color: var(--ember);
letter-spacing: 0.14em;
font-weight: 600;
}
.order-total__bnpl-sub {
font-family: var(--font-body);
font-size: 11px;
color: var(--chrome-dim);
margin: 0;
font-style: italic;
line-height: 1.4;
}
.order-total__loyalty {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 16px;
}
.order-total__loyalty::before {
content: "+";
color: var(--ember);
font-family: var(--font-display);
font-weight: 600;
}
.order-total__loyalty strong { color: var(--ember); font-weight: 600; }
/* Primary CTA — ember ombre gradient */
.btn-primary {
width: 100%;
padding: 16px 24px;
border: 0;
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: 14px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
box-shadow: var(--ember-glow-sm);
transition: box-shadow 0.15s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
}
.btn-primary:hover {
box-shadow: var(--ember-glow-md);
}
.order-total__cta { margin-bottom: 16px; }
.order-total__trust {
display: flex;
align-items: center;
gap: 10px;
padding-top: 14px;
border-top: 1px solid rgba(250,250,250,0.05);
flex-wrap: wrap;
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-display);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chrome-dim);
}
.trust-badge__glyph {
color: var(--ember);
font-size: 11px;
}
.trust-badge__soon {
font-size: 8px;
padding: 1px 4px;
background: rgba(255,122,46,0.15);
color: var(--ember);
letter-spacing: 0.14em;
margin-left: 3px;
font-weight: 600;
}
/* ========================================================================
REINFORCEMENT BAND (block: reinforcement-band — REUSED from MAS51)
======================================================================== */
.reinforcement-band {
background: var(--carbon);
border-top: 1px solid rgba(255,122,46,0.5);
box-shadow: 0 -1px 0 rgba(255,122,46,0.2), 0 -8px 32px -12px rgba(255,122,46,0.15);
padding: 26px 0;
}
.reinforcement-band__inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
}
.reinforcement-band__item {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--chrome-warm);
display: flex;
align-items: center;
gap: 10px;
}
.reinforcement-band__item::before {
content: "";
width: 5px;
height: 5px;
background: var(--ember);
box-shadow: 0 0 8px var(--ember);
}
.reinforcement-band__sep {
color: var(--hull-edge);
margin: 0 24px;
font-size: 12px;
}
/* ========================================================================
SITE FOOTER (block: site-footer — REUSED from MAS51)
======================================================================== */
.site-footer {
background: var(--carbon);
padding: 56px 0 32px;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.03);
}
.site-footer__cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.site-footer__brand {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--chrome-highlight);
text-transform: uppercase;
margin: 0 0 12px;
}
.site-footer__tagline {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.6;
margin: 0 0 20px;
max-width: 260px;
}
.site-footer__col-head {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ember);
margin: 0 0 14px;
font-weight: 600;
}
.site-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.site-footer__list a {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
transition: color 0.12s;
}
.site-footer__list a:hover { color: var(--ember); }
.site-footer__base {
padding-top: 24px;
border-top: 1px solid rgba(250,250,250,0.05);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.site-footer__legal {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.site-footer__socials {
display: flex;
gap: 12px;
}
.site-footer__socials a {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
transition: color 0.12s;
}
.site-footer__socials a:hover { color: var(--ember); }
/* ========================================================================
RESPONSIVE
======================================================================== */
@media (max-width: 900px) {
.cart-body__grid { grid-template-columns: 1fr; }
.cart-body__side { position: static; }
.options-row__icons { grid-template-columns: 1fr; }
.site-footer__cols { grid-template-columns: 1fr 1fr; }
.spec-sheet { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
.page-header__title { font-size: 40px; }
.gift-band__inner { grid-template-columns: 1fr; gap: 16px; }
.gift-band__tiles { justify-content: flex-start; overflow-x: auto; }
.gift-tile { width: 100px; flex-shrink: 0; }
.line-item__row { grid-template-columns: 72px 1fr; }
.line-item__media { width: 72px; height: 72px; }
.line-item__right { grid-column: 2; align-items: flex-start; }
.dispatch-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
.dispatch-row__num { grid-column: 1 / -1; }
.trust-chip-strip { flex-direction: column; align-items: flex-start; gap: 6px; }
.trust-chip-strip__sep { display: none; }
.reinforcement-band__sep { display: none; }
.reinforcement-band__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer__cols { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- ============================================================
PAGE HEADER
============================================================ -->
<header class="page-header">
<div class="container">
<a id="tf-breadcrumb-1" data-tf-family="breadcrumb" style="display:contents"></a>
<nav class="page-header__breadcrumb" aria-label="Breadcrumb">
<a href="#">Home</a><span class="page-header__crumb-sep">/</span><span>Cart</span>
</nav>
<h1 class="page-header__title">Cart</h1>
<p class="page-header__subline">
3 items<span class="dot">·</span>2 dispatches<span class="dot">·</span>Ships direct from workshop
</p>
<a id="tf-trust-chip-strip-1" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="trust-chip-strip">
<span class="trust-chip-strip__item">24-hour UK dispatch</span>
<span class="trust-chip-strip__sep">·</span>
<span class="trust-chip-strip__item">Factory-direct, tracked worldwide</span>
<span class="trust-chip-strip__sep">·</span>
<span class="trust-chip-strip__item">1-year duelling warranty</span>
<span class="trust-chip-strip__sep">·</span>
<span class="trust-chip-strip__item">2,400+ five-star reviews</span>
</div>
</div>
</header>
<!-- ============================================================
FREE GIFT BAND — COMPACT
============================================================ -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section class="gift-band">
<div class="container gift-band__inner">
<div class="gift-band__lead">
<div class="gift-band__icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
<rect x="3" y="8" width="18" height="4"></rect>
<rect x="5" y="12" width="14" height="9"></rect>
<line x1="12" y1="8" x2="12" y2="21"></line>
<path d="M12 8 C 9 8 7 6 8 4 C 9 2 11 4 12 8"></path>
<path d="M12 8 C 15 8 17 6 16 4 C 15 2 13 4 12 8"></path>
</svg>
</div>
<div class="gift-band__copy">
<strong>Free gift unlocked</strong><span class="dot" style="color:var(--hull-edge);margin:0 8px;">·</span>Choose one for Dispatch 1
</div>
</div>
<div class="gift-band__tiles">
<button class="gift-tile gift-tile--selected" aria-label="Silver Coupler — selected">
<img class="gift-tile__img" src="https://nerdworks.uk/wp-content/uploads/2025/08/Silver-coupler-2-1-768x768.jpg" alt="Silver Coupler">
<div class="gift-tile__meta">
<span class="gift-tile__name">Silver Coupler</span>
<span class="gift-tile__price">$19.99</span>
</div>
</button>
<button class="gift-tile" aria-label="Grey Coupler">
<img class="gift-tile__img" src="https://nerdworks.uk/wp-content/uploads/2025/08/Grey-coupler-2-1-768x768.jpg" alt="Grey Coupler">
<div class="gift-tile__meta">
<span class="gift-tile__name">Grey Coupler</span>
<span class="gift-tile__price">$19.99</span>
</div>
</button>
<button class="gift-tile" aria-label="Black Covertec">
<img class="gift-tile__img" src="https://nerdworks.uk/wp-content/uploads/2025/08/Black-Covertec-Wheel-Adapter-for-S-RGB-SNV4-PRO-and-Proffie-2.2-Lightsabers-768x768.jpg" alt="Black Covertec Wheel Adapter">
<div class="gift-tile__meta">
<span class="gift-tile__name">Black Covertec</span>
<span class="gift-tile__price">$19.99</span>
</div>
</button>
</div>
</div>
</section>
<!-- ============================================================
MAIN CART BODY
============================================================ -->
<main class="cart-body">
<div class="container cart-body__grid">
<!-- LEFT COLUMN -->
<div class="cart-body__main">
<!-- LINE ITEMS -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<div class="line-items">
<!-- LINE ITEM 1 — Carbon Strike (compact / default) -->
<article class="line-item">
<div class="line-item__row">
<div class="line-item__media">
<img class="line-item__img" src="https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg" alt="Carbon Strike Lightsaber">
</div>
<div class="line-item__mid">
<span class="dispatch-tag">Dispatch 1 · 12–14 Aug</span>
<h3 class="line-item__name">Carbon Strike Lightsaber — Xenopixel V3</h3>
<div class="line-item__summary">
<span class="swatch swatch--ember"></span>
<span>Ember-orange</span>
<span class="dot">·</span>
<span>Neopixel</span>
<span class="dot">·</span>
<span>36"</span>
</div>
<div class="line-item__controls">
<div class="qty-stepper" role="group" aria-label="Quantity">
<button class="qty-stepper__btn" aria-label="Decrease quantity">−</button>
<span class="qty-stepper__val">1</span>
<button class="qty-stepper__btn" aria-label="Increase quantity">+</button>
</div>
<div class="line-item__actions">
<button class="line-item__action">Save for later</button>
<span class="line-item__action-sep">·</span>
<button class="line-item__action line-item__action--danger">Remove</button>
<span class="line-item__action-sep">·</span>
<button class="line-item__action">Show configuration ▾</button>
</div>
</div>
</div>
<div class="line-item__right">
<span class="line-item__unit">Unit $459.99</span>
<span class="line-item__total">$459.99</span>
</div>
</div>
</article>
<!-- LINE ITEM 2 — Starkiller SE (EXPANDED) -->
<article class="line-item line-item--expanded">
<div class="line-item__row">
<div class="line-item__media">
<img class="line-item__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg" alt="Starkiller SE Lightsaber">
</div>
<div class="line-item__mid">
<span class="dispatch-tag">Dispatch 1 · 12–14 Aug</span>
<h3 class="line-item__name">Starkiller SE Lightsaber — Proffie 2.2</h3>
<div class="line-item__summary">
<span class="swatch swatch--red"></span>
<span>Red</span>
<span class="dot">·</span>
<span>Neopixel</span>
<span class="dot">·</span>
<span>32"</span>
<span class="dot">·</span>
<span>Duelling</span>
</div>
<div class="line-item__controls">
<div class="qty-stepper" role="group" aria-label="Quantity">
<button class="qty-stepper__btn" aria-label="Decrease quantity">−</button>
<span class="qty-stepper__val">1</span>
<button class="qty-stepper__btn" aria-label="Increase quantity">+</button>
</div>
<div class="line-item__actions">
<button class="line-item__action">Save for later</button>
<span class="line-item__action-sep">·</span>
<button class="line-item__action line-item__action--danger">Remove</button>
<span class="line-item__action-sep">·</span>
<button class="line-item__action" style="color: var(--ember);">Hide configuration ▴</button>
</div>
</div>
</div>
<div class="line-item__right">
<span class="line-item__unit">Unit $299.99</span>
<span class="line-item__total">$299.99</span>
</div>
</div>
<!-- EXPANDED DRAWER -->
<div class="line-item__drawer">
<h4 class="line-item__drawer-title">Configuration</h4>
<a id="tf-product-tech-specs-1" data-tf-family="product-tech-specs" style="display:contents"></a>
<div class="spec-sheet">
<div class="spec-row">
<span class="spec-row__label">Blade colour</span>
<span class="spec-row__dots"></span>
<span class="spec-row__val">Red</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Blade type</span>
<span class="spec-row__dots"></span>
<span class="spec-row__val">Neopixel Duelling</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Duelling grade</span>
<span class="spec-row__dots"></span>
<span class="spec-row__val">Heavy</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Blade length</span>
<span class="spec-row__dots"></span>
<span class="spec-row__val">32"</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Sound fonts</span>
<span class="spec-row__dots"></span>
<span class="spec-row__val">34 stock + custom</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Saber Core</span>
<span class="spec-row__dots"></span>
<span class="spec-row__val">Proffie 2.2</span>
</div>
</div>
<ul class="feature-list">
<li class="feature-list__item">Bluetooth</li>
<li class="feature-list__item">Smooth swing</li>
<li class="feature-list__item">Flash on clash</li>
<li class="feature-list__item">Removable blade</li>
</ul>
<a href="#" class="line-item__edit-link">Edit configuration →</a>
</div>
</article>
<!-- LINE ITEM 3 — Mace Windu SE (compact / default) -->
<article class="line-item">
<div class="line-item__row">
<div class="line-item__media">
<img class="line-item__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg" alt="Mace Windu SE Duelling Lightsaber">
</div>
<div class="line-item__mid">
<span class="dispatch-tag">Dispatch 2 · 25 Aug – 2 Sep</span>
<h3 class="line-item__name">Mace Windu SE Duelling Lightsaber — S-RGB</h3>
<div class="line-item__summary">
<span class="swatch swatch--purple"></span>
<span>Purple</span>
<span class="dot">·</span>
<span>Baselit</span>
<span class="dot">·</span>
<span>32"</span>
</div>
<div class="line-item__controls">
<div class="qty-stepper" role="group" aria-label="Quantity">
<button class="qty-stepper__btn" aria-label="Decrease quantity">−</button>
<span class="qty-stepper__val">1</span>
<button class="qty-stepper__btn" aria-label="Increase quantity">+</button>
</div>
<div class="line-item__actions">
<button class="line-item__action">Save for later</button>
<span class="line-item__action-sep">·</span>
<button class="line-item__action line-item__action--danger">Remove</button>
<span class="line-item__action-sep">·</span>
<button class="line-item__action">Show configuration ▾</button>
</div>
</div>
</div>
<div class="line-item__right">
<span class="line-item__unit">Unit $164.99</span>
<span class="line-item__total">$164.99</span>
</div>
</div>
</article>
</div>
<!-- /line-items -->
<!-- DISPATCH SUMMARY STRIP -->
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<div class="dispatch-summary">
<h3 class="dispatch-summary__title">Dispatch summary</h3>
<div class="dispatch-summary__rows">
<div class="dispatch-row">
<span class="dispatch-row__num">Dispatch 1</span>
<span class="dispatch-row__date">12–14 Aug</span>
<span class="dispatch-row__price">FREE Standard</span>
<a href="#" class="dispatch-row__link">Change delivery →</a>
</div>
<div class="dispatch-row">
<span class="dispatch-row__num">Dispatch 2</span>
<span class="dispatch-row__date">25 Aug – 2 Sep</span>
<span class="dispatch-row__price">FREE Standard</span>
<a href="#" class="dispatch-row__link">Change delivery →</a>
</div>
</div>
<p class="dispatch-summary__explainer">Ships direct from the workshop floor, tracked worldwide. Every hilt is played, tuned, and tested before dispatch.</p>
</div>
<!-- OPTIONS FOOTER ROW -->
<a id="tf-form-1" data-tf-family="form" style="display:contents"></a>
<div class="options-row">
<h3 class="options-row__title">Options</h3>
<div class="options-row__icons">
<!-- Discount code — applied -->
<div class="opt-icon opt-icon--on">
<span class="opt-icon__glyph" aria-hidden="true">%</span>
<div class="opt-icon__label">
<span class="opt-icon__name">Discount code</span>
<span class="opt-icon__chip">SAVE10 · -$92.50 <span class="opt-icon__chip-x" role="button" aria-label="Remove discount">×</span></span>
</div>
<span class="opt-icon__state">Applied</span>
</div>
<!-- Gift wrap — ON -->
<button class="opt-icon opt-icon--on" type="button">
<span class="opt-icon__glyph" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
<rect x="3" y="8" width="18" height="13"></rect>
<path d="M3 12h18"></path>
<path d="M12 8v13"></path>
<path d="M8 8 C 6 8 5 6 6 4.5 C 7 3 10 5 12 8 C 14 5 17 3 18 4.5 C 19 6 18 8 16 8"></path>
</svg>
</span>
<div class="opt-icon__label">
<span class="opt-icon__name">Gift wrap</span>
<span class="opt-icon__sub">Kraft paper + workshop ribbon · $4.99</span>
</div>
<span class="opt-icon__state">On</span>
</button>
<!-- Loyalty — OFF -->
<button class="opt-icon" type="button">
<span class="opt-icon__glyph" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
<polygon points="12,3 15,10 22,10 16.5,14 18.5,21 12,17 5.5,21 7.5,14 2,10 9,10"></polygon>
</svg>
</span>
<div class="opt-icon__label">
<span class="opt-icon__name">Loyalty points</span>
<span class="opt-icon__sub">2,400 pts available ($24 off)</span>
</div>
<span class="opt-icon__state">Off</span>
</button>
</div>
<!-- INLINE EXPANDED PANEL — Gift wrap -->
<div class="gift-wrap-panel">
<p class="gift-wrap-panel__desc"><strong>Kraft-paper wrap + workshop ribbon.</strong> Tracked from workshop dispatch onwards. Add an optional message on the enclosed card.</p>
<div class="textarea-field">
<label class="textarea-field__label" for="gift-msg">Gift message</label>
<textarea class="textarea-field__input" id="gift-msg" maxlength="180" placeholder="Write your message…">Happy birthday, brother. May the Force be with you — always. — Ben</textarea>
<div class="textarea-field__counter">78 / 180</div>
</div>
</div>
</div>
<!-- /options-row -->
</div>
<!-- /cart-body__main -->
<!-- RIGHT COLUMN — ORDER TOTAL (ultra-minimal) -->
<a id="tf-other-4" data-tf-family="other" style="display:contents"></a>
<aside class="cart-body__side">
<div class="order-total">
<h2 class="order-total__title">Total</h2>
<div class="order-total__rows">
<div class="total-row">
<span class="total-row__label">Subtotal</span>
<span class="total-row__value">$924.97</span>
</div>
<div class="total-row total-row--discount">
<span class="total-row__label">Discount</span>
<span class="total-row__value">−$92.50</span>
</div>
<div class="total-row">
<span class="total-row__label">Gift wrap</span>
<span class="total-row__value">$4.99</span>
</div>
<div class="total-row total-row--free">
<span class="total-row__label">Shipping</span>
<span class="total-row__value">FREE</span>
</div>
<div class="total-row">
<span class="total-row__label">Tax</span>
<span class="total-row__value" style="color:var(--chrome-dim);text-transform:uppercase;letter-spacing:0.08em;font-size:11px;">at checkout</span>
</div>
</div>
<div class="order-total__hair"></div>
<div class="order-total__grand">
<span class="order-total__grand-label">Total</span>
<span class="order-total__grand-val">$837.46</span>
</div>
<div class="order-total__bnpl">
<div class="order-total__bnpl-head">
<span class="order-total__bnpl-label">Or <strong>4 × $210</strong> with Klarna</span>
<span class="order-total__bnpl-tag">Coming soon</span>
</div>
<p class="order-total__bnpl-sub">Under review with our shipping partners.</p>
</div>
<p class="order-total__loyalty">Earn <strong>240 pts</strong> with this order</p>
<button class="btn-primary order-total__cta" type="button">
Checkout <span aria-hidden="true">→</span>
</button>
<a id="tf-trust-chip-strip-2" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="order-total__trust">
<span class="trust-badge"><span class="trust-badge__glyph">🔒</span>SSL secure</span>
<span class="trust-badge">30-day returns</span>
<span class="trust-badge">VISA · MC · AMEX</span>
<span class="trust-badge">Klarna<span class="trust-badge__soon">Soon</span></span>
</div>
</div>
</aside>
</div>
</main>
<!-- ============================================================
REINFORCEMENT BAND (compact, per MAS51)
============================================================ -->
<a id="tf-trust-chip-strip-3" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="reinforcement-band">
<div class="container reinforcement-band__inner">
<span class="reinforcement-band__item">Every hilt tracked from workshop dispatch</span>
<span class="reinforcement-band__sep">·</span>
<span class="reinforcement-band__item">Global 7–10 day delivery</span>
<span class="reinforcement-band__sep">·</span>
<span class="reinforcement-band__item">2,400+ five-star reviews</span>
</div>
</section>
<!-- ============================================================
SITE FOOTER
============================================================ -->
<footer class="site-footer">
<div class="container">
<div class="site-footer__cols">
<div>
<h4 class="site-footer__brand">ARTSABERS</h4>
<p class="site-footer__tagline">From factory floor to your door. Every character, every Saber Core, every duelling grade — backed by real support that doesn't disappear after the order ships.</p>
</div>
<div>
<h5 class="site-footer__col-head">Shop</h5>
<ul class="site-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="#">ARTSABERS Exclusive</a></li>
<li><a href="#">Offers & deals</a></li>
</ul>
</div>
<div>
<h5 class="site-footer__col-head">Support</h5>
<ul class="site-footer__list">
<li><a href="#">Contact us</a></li>
<li><a href="#">Order tracking</a></li>
<li><a href="#">Shipping & delivery</a></li>
<li><a href="#">Returns policy</a></li>
<li><a href="#">Warranty</a></li>
</ul>
</div>
<div>
<h5 class="site-footer__col-head">The workshop</h5>
<ul class="site-footer__list">
<li><a href="#">Our story</a></li>
<li><a href="#">Saber Core guide</a></li>
<li><a href="#">XenoConfigurator app</a></li>
<li><a href="#">Blog & fan wall</a></li>
</ul>
</div>
<div>
<h5 class="site-footer__col-head">Region</h5>
<ul class="site-footer__list">
<li><a href="#">USD · United States</a></li>
<li><a href="#">CAD · Canada</a></li>
<li><a href="#">AUD · Australia</a></li>
<li><a href="#">UK & EU → Saber 66</a></li>
</ul>
</div>
</div>
<div class="site-footer__base">
<span class="site-footer__legal">© 2026 ARTSABERS · Nerdworks Ltd · All rights reserved</span>
<div class="site-footer__socials">
<a href="#">Instagram</a>
<a href="#">TikTok</a>
<a href="#">YouTube</a>
<a href="#">Discord</a>
</div>
</div>
</div>
</footer>
</body>
</html>