<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Delivery Manifest — 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>
/* ---------- Tokens (verbatim from SAS1 Kyber Hull styleguide) ---------- */
:root {
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
/* Ember ombre */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-fixed: #2A0800;
/* Hull ladder */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
/* Chrome */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* MAS52 forge-red (error) */
--forge-red: #E63929;
--forge-red-deep: #A82212;
/* Surface semantics */
--bg-page: var(--charcoal);
--bg-panel: var(--hull-panel);
--bg-input: var(--hull-panel-lift);
--bg-panel-dark: var(--hull-panel-dark);
--text-primary: var(--chrome-warm);
--text-dim: var(--chrome-dim);
--text-heading: var(--chrome-highlight);
--text-on-ember: var(--on-primary-fixed);
/* Shadow tokens */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 12px 32px -8px rgba(0,0,0,0.95);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
--input-focus-glow: 0 0 12px rgba(255,122,46,0.35);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);
}
/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--carbon); color: var(--chrome-warm); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
/* ---------- Utilities ---------- */
.container { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.label-sm {
font-family: var(--font-display);
font-size: 11px; font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
}
/* ============================================================
SITE NAV (reused verbatim from MAS51)
============================================================ */
.site-nav {
background: var(--void);
border-bottom: 1px solid rgba(255,255,255,0.03);
position: relative;
z-index: 10;
}
.site-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.site-nav__brand {
font-family: var(--font-display);
font-size: 22px; font-weight: 700;
letter-spacing: 0.18em;
color: var(--chrome-highlight);
text-transform: uppercase;
}
.site-nav__brand span { color: var(--ember); }
.site-nav__links { display: flex; gap: 36px; }
.site-nav__link {
font-family: var(--font-display);
font-size: 12px; font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-warm);
}
.site-nav__link--active { color: var(--ember); }
.site-nav__utils { display: flex; align-items: center; gap: 20px; }
.site-nav__util {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.site-nav__cart {
color: var(--ember);
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.4);
background: rgba(255,122,46,0.06);
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}
.site-nav__cart strong { color: var(--chrome-highlight); font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; }
/* ============================================================
1. CART HEADER (adapted from MAS51 archive-header — compact, ember accent title)
============================================================ */
.cart-header {
position: relative;
min-height: 300px;
max-height: 340px;
background:
radial-gradient(ellipse 55% 60% at 3% 10%, rgba(255,122,46,0.14), transparent 55%),
repeating-linear-gradient(180deg, transparent 0px, transparent 239px, rgba(250,250,250,0.028) 239px, rgba(250,250,250,0.028) 240px),
linear-gradient(180deg, var(--carbon) 0%, var(--void) 60%, var(--carbon) 100%);
background-color: var(--carbon);
overflow: hidden;
isolation: isolate;
}
.cart-header::before {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,6,6,0.35) 0%, rgba(6,6,6,0.2) 40%, rgba(6,6,6,0.55) 100%),
radial-gradient(60% 90% at 92% 40%, rgba(255,122,46,0.08), transparent 55%);
z-index: 1;
}
.cart-header::after {
content: '';
position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: rgba(250,250,250,0.28);
z-index: 2;
}
.cart-header__inner {
position: relative;
z-index: 3;
padding: 56px 0 32px;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 300px;
}
.cart-header__crumbs {
display: flex; gap: 10px; align-items: center;
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--chrome-dim);
}
.cart-header__crumbs .sep { opacity: 0.6; }
.cart-header__crumbs .curr { color: var(--ember); }
.cart-header__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(48px, 7vw, 84px);
line-height: 0.98;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ember);
margin-top: 4px;
text-shadow: 0 0 32px rgba(255,122,46,0.28);
}
.cart-header__title .accent { color: var(--chrome-highlight); }
.cart-header__desc {
max-width: 720px;
font-family: var(--font-body);
font-size: 17px;
color: var(--chrome-warm);
line-height: 1.5;
}
.cart-header__desc strong { color: var(--chrome-highlight); font-weight: 500; }
.cart-header__desc .dot { color: var(--ember); margin: 0 12px; opacity: 0.7; }
.cart-header__spacer { flex: 1; }
.cart-header__chips {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: center;
padding-top: 18px;
border-top: 1px solid rgba(250,250,250,0.08);
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--chrome-warm);
}
.cart-header__chip {
display: inline-flex; align-items: center; gap: 10px;
padding: 0 22px;
color: var(--chrome-warm);
}
.cart-header__chip:not(:last-child)::after {
content: '';
width: 4px; height: 4px;
background: var(--ember);
border-radius: 50%;
margin-left: 22px;
box-shadow: 0 0 8px rgba(255,122,46,0.9);
}
.cart-header__chip:first-child { padding-left: 0; }
.cart-header__chip .dot {
width: 6px; height: 6px;
background: var(--ember);
border-radius: 50%;
box-shadow: 0 0 8px rgba(255,122,46,0.9);
}
/* ============================================================
2. FREE GIFT BAND (reused verbatim from MAS51)
============================================================ */
.gift-band {
position: relative;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 55%, var(--ember-forge) 100%);
box-shadow:
0 0 48px rgba(255,122,46,0.35),
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -1px 0 rgba(90,26,0,0.4);
overflow: hidden;
isolation: isolate;
}
.gift-band::before {
content: '';
position: absolute;
left: -80px; top: -60px;
width: 480px; height: 480px;
background: radial-gradient(closest-side, rgba(255,255,255,0.28), transparent 70%);
z-index: 0;
pointer-events: none;
}
.gift-band__inner {
position: relative;
z-index: 1;
padding: 32px 0 34px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 40px;
}
.gift-band__body { display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.gift-band__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--on-primary-fixed);
opacity: 0.78;
}
.gift-band__eyebrow-glyph {
width: 22px; height: 22px;
display: inline-grid; place-items: center;
background: var(--on-primary-fixed);
color: var(--ember-glow);
font-family: var(--font-display); font-size: 12px; font-weight: 700;
}
.gift-band__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(26px, 3vw, 36px);
line-height: 1.02;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--on-primary-fixed);
}
.gift-band__sub {
font-family: var(--font-body);
font-size: 14px;
color: var(--ember-scar);
margin-top: 4px;
}
.gift-band__picker {
display: grid;
grid-template-columns: repeat(3, 220px);
gap: 14px;
z-index: 1;
}
.gift-tile {
display: grid;
grid-template-columns: 60px 1fr;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: rgba(6,6,6,0.55);
border: 1px solid rgba(42,8,0,0.35);
box-shadow: inset 0 1px 0 rgba(255,179,71,0.25);
position: relative;
}
.gift-tile--selected {
border: 1px solid var(--on-primary-fixed);
background: rgba(6,6,6,0.85);
box-shadow:
inset 0 1px 0 rgba(255,179,71,0.45),
inset 0 0 0 1px var(--ember-glow),
0 0 20px rgba(0,0,0,0.5);
}
.gift-tile__media {
width: 60px; height: 60px;
background-color: var(--carbon);
background-size: cover;
background-position: center;
}
.gift-tile__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gift-tile__name {
font-family: var(--font-display);
font-size: 12px; font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--chrome-highlight);
line-height: 1.25;
}
.gift-tile__value {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ember-glow);
}
.gift-tile__pick {
align-self: flex-start;
margin-top: 4px;
padding: 4px 10px;
font-family: var(--font-display);
font-size: 10px; font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-highlight);
border: 1px solid rgba(250,250,250,0.35);
background: transparent;
}
.gift-tile__selected-tag {
align-self: flex-start;
margin-top: 4px;
padding: 4px 10px;
font-family: var(--font-display);
font-size: 10px; font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: var(--ember-glow);
display: inline-flex; align-items: center; gap: 6px;
}
.gift-tile__selected-tag::before {
content: '';
width: 8px; height: 8px;
background: var(--on-primary-fixed);
clip-path: polygon(20% 45%, 0% 65%, 40% 100%, 100% 20%, 82% 5%, 40% 65%);
}
/* ============================================================
3. OPTIONS CHIP ROW (NEW — Variant B signature)
============================================================ */
.options-band {
position: relative;
background:
radial-gradient(ellipse 45% 40% at 3% 4%, rgba(255,122,46,0.10), transparent 55%),
repeating-linear-gradient(180deg, transparent 0px, transparent 239px, rgba(250,250,250,0.024) 239px, rgba(250,250,250,0.024) 240px),
linear-gradient(180deg, #0a0a0a 0%, var(--carbon) 100%);
padding: 48px 0 40px;
isolation: isolate;
}
.options-band__eyebrow {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--chrome-dim);
margin-bottom: 14px;
display: flex; align-items: center; gap: 12px;
}
.options-band__eyebrow::before {
content: '';
width: 24px; height: 1px;
background: var(--ember);
box-shadow: 0 0 6px rgba(255,122,46,0.7);
}
.options-band__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--chrome-highlight);
margin-bottom: 22px;
}
.options-band__title .accent { color: var(--ember); }
.options-chips {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 18px;
align-items: start;
}
.option-chip {
display: flex;
flex-direction: column;
gap: 0;
}
.option-chip__button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 20px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-warm);
background: var(--hull-panel-dark);
border: 1px solid rgba(250,250,250,0.08);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
cursor: pointer;
text-align: left;
transition: border-color 120ms, background 120ms;
}
.option-chip__button:hover { border-color: rgba(255,122,46,0.4); color: var(--ember); }
.option-chip__button .caret {
color: var(--ember);
font-family: var(--font-display);
font-size: 14px;
transform: translateY(-1px);
}
.option-chip__button--on {
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 55%, var(--ember-deep) 100%);
color: var(--on-primary-fixed);
border: 1px solid var(--ember-deep);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -1px 0 rgba(90,26,0,0.4),
var(--ember-glow-sm);
}
.option-chip__button--on .caret { color: var(--on-primary-fixed); }
.option-chip__button--on:hover { color: var(--on-primary-fixed); border-color: var(--ember-deep); }
.option-chip__button--expanded {
border-bottom-color: rgba(255,122,46,0.5);
color: var(--chrome-highlight);
}
.option-chip__icon {
width: 12px; height: 12px;
border: 1px solid currentColor;
transform: rotate(45deg);
display: inline-block;
flex: 0 0 12px;
}
.option-chip__label { flex: 1; }
.option-chip__label .savings {
color: var(--ember);
font-weight: 700;
margin-left: 8px;
font-variant-numeric: tabular-nums;
}
.option-chip__button--on .option-chip__label .savings { color: var(--on-primary-fixed); }
.option-chip__button--off .option-chip__label {
color: var(--chrome-dim);
}
.option-chip__button--off .option-chip__label strong { color: var(--chrome-warm); font-weight: 500; }
.option-chip__button--off .caret { color: var(--chrome-dim); }
.option-chip__panel {
padding: 18px 20px 20px;
background: var(--hull-panel-dark);
border: 1px solid rgba(255,122,46,0.28);
border-top: none;
box-shadow: inset 0 1px 0 rgba(255,122,46,0.15);
display: flex;
flex-direction: column;
gap: 12px;
}
.option-chip__panel--on {
background: rgba(20,10,4,0.85);
border-color: rgba(255,122,46,0.35);
}
.option-chip__field-label {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
font-weight: 500;
}
.option-chip__input-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: stretch;
}
.option-chip__input {
background: var(--bg-input);
border: none;
border-bottom: 1px solid var(--ember);
box-shadow: var(--input-focus-glow);
padding: 12px 14px;
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
outline: none;
letter-spacing: 0.06em;
border-radius: 0;
}
.option-chip__apply {
padding: 10px 18px 12px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-warm);
background: transparent;
box-shadow: inset 0 -1px 0 var(--ember);
}
.option-chip__apply:hover { color: var(--ember); }
.option-chip__applied {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: rgba(255,122,46,0.10);
border: 1px solid var(--ember);
box-shadow: inset 0 1px 0 rgba(255,179,71,0.28), 0 0 12px rgba(255,122,46,0.18);
margin-top: 4px;
}
.option-chip__applied-code {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-highlight);
}
.option-chip__applied-code::before {
content: '';
width: 10px; height: 10px;
background: var(--ember);
transform: rotate(45deg);
display: inline-block;
box-shadow: 0 0 8px rgba(255,122,46,0.7);
}
.option-chip__applied-value {
font-family: var(--font-display);
font-size: 13px;
color: var(--ember);
font-variant-numeric: tabular-nums;
font-weight: 700;
padding: 0 6px;
white-space: nowrap;
}
.option-chip__applied-remove {
font-family: var(--font-display);
font-size: 10px;
color: var(--chrome-dim);
text-transform: uppercase;
letter-spacing: 0.14em;
border-bottom: 1px dotted rgba(184,176,166,0.5);
padding-bottom: 1px;
}
.option-chip__applied-remove:hover { color: var(--forge-red); border-bottom-color: var(--forge-red); }
.option-chip__textarea {
display: block;
width: 100%;
background: var(--bg-input);
border: none;
border-bottom: 1px solid var(--hull-edge);
padding: 12px 14px;
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
outline: none;
resize: vertical;
line-height: 1.5;
border-radius: 0;
min-height: 74px;
}
.option-chip__textarea:focus {
border: 1px solid var(--ember);
box-shadow: var(--input-focus-glow);
}
.option-chip__counter {
align-self: flex-end;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--chrome-dim);
font-variant-numeric: tabular-nums;
text-transform: uppercase;
}
/* ============================================================
4. MAIN — 2-column layout, manifest LEFT + order total RIGHT
============================================================ */
.cart-main {
position: relative;
background:
radial-gradient(ellipse 55% 40% at 3% 4%, rgba(255,122,46,0.13), transparent 55%),
radial-gradient(ellipse 35% 25% at 97% 96%, rgba(255,122,46,0.06), transparent 55%),
repeating-linear-gradient(180deg, transparent 0px, transparent 239px, rgba(250,250,250,0.024) 239px, rgba(250,250,250,0.024) 240px),
linear-gradient(180deg, #0d0d0d 0%, var(--carbon) 25%, var(--void) 70%, #0a0a0a 100%),
var(--carbon);
padding: 56px 0 80px;
isolation: isolate;
}
.cart-main > * { position: relative; z-index: 1; }
.cart-main__layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 56px;
align-items: start;
}
.cart-main__head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 22px;
margin-bottom: 40px;
border-bottom: 1px solid rgba(250,250,250,0.06);
}
.cart-main__head-title {
font-family: var(--font-display);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--chrome-warm);
}
.cart-main__head-title strong {
color: var(--ember);
font-weight: 700;
font-variant-numeric: tabular-nums;
margin-right: 6px;
}
.cart-main__continue {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
border-bottom: 1px dotted rgba(184,176,166,0.5);
padding-bottom: 1px;
}
.cart-main__continue:hover { color: var(--ember); border-bottom-color: var(--ember); }
.cart-main__intro {
max-width: 640px;
font-family: var(--font-body);
font-size: 15px;
color: var(--chrome-warm);
line-height: 1.6;
margin-bottom: 40px;
}
.cart-main__intro strong { color: var(--chrome-highlight); font-weight: 500; }
/* ============================================================
5. MANIFEST TIMELINE (NEW — Variant B signature)
============================================================ */
.manifest {
position: relative;
padding-left: 72px;
}
.manifest::before {
content: '';
position: absolute;
left: 8px; top: 0; bottom: 120px;
width: 2px;
background: linear-gradient(180deg,
var(--ember) 0%,
var(--ember) 85%,
rgba(255,122,46,0.4) 96%,
transparent 100%);
box-shadow: 0 0 12px rgba(255,122,46,0.5);
}
.dispatch {
position: relative;
margin-bottom: 56px;
}
.dispatch__marker {
position: absolute;
left: -72px;
top: 6px;
display: flex;
align-items: center;
gap: 20px;
width: 100%;
}
.dispatch__dot {
width: 18px; height: 18px;
background: var(--ember);
border-radius: 50%;
box-shadow:
0 0 18px rgba(255,122,46,0.9),
inset 0 0 0 3px var(--carbon),
inset 0 0 0 4px var(--ember-glow);
flex: 0 0 18px;
transform: translateX(-8px);
position: relative;
z-index: 2;
}
.dispatch__heading {
display: flex;
align-items: baseline;
gap: 18px;
flex: 1;
}
.dispatch__title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
color: var(--ember);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
text-shadow: 0 0 24px rgba(255,122,46,0.35);
}
.dispatch__title .idx {
color: var(--chrome-highlight);
font-variant-numeric: tabular-nums;
}
.dispatch__eta {
font-family: var(--font-display);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
padding-left: 14px;
border-left: 1px solid rgba(184,176,166,0.25);
}
.dispatch__eta strong { color: var(--chrome-warm); font-weight: 500; margin: 0 4px; }
.dispatch__free {
margin-left: auto;
padding: 4px 10px 5px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--on-primary-fixed);
background: var(--ember);
box-shadow: 0 0 12px rgba(255,122,46,0.5);
}
.dispatch__body {
margin-top: 62px;
display: flex;
flex-direction: column;
gap: 0;
}
.dispatch__explainer {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
line-height: 1.5;
padding-left: 18px;
position: relative;
margin-bottom: 22px;
}
.dispatch__explainer::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 8px; height: 1px;
background: var(--ember);
box-shadow: 0 0 4px rgba(255,122,46,0.6);
}
.dispatch__items {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--hull-edge);
background: linear-gradient(180deg, rgba(26,26,26,0.4) 0%, rgba(15,15,15,0.55) 100%);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
padding: 6px 28px;
}
/* ============================================================
6. MANIFEST LINE ITEM (NEW — blade-only meta, Variant B)
============================================================ */
.manifest-line {
display: grid;
grid-template-columns: 92px 1fr auto;
gap: 22px;
padding: 22px 0;
border-bottom: 1px solid rgba(250,250,250,0.06);
align-items: flex-start;
}
.manifest-line:last-of-type { border-bottom: none; }
.manifest-line__media {
width: 92px; height: 92px;
background-color: var(--hull-panel-dark);
background-size: cover;
background-position: center;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.08), inset 0 0 0 1px rgba(255,122,46,0.15);
}
.manifest-line__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.manifest-line__name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--chrome-highlight);
line-height: 1.15;
}
.manifest-line__blade {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.manifest-line__blade strong { color: var(--chrome-warm); font-weight: 500; }
.manifest-line__blade .sep { margin: 0 6px; opacity: 0.5; }
.manifest-line__swatch {
width: 12px; height: 12px;
border-radius: 50%;
border: 1px solid rgba(250,250,250,0.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 8px currentColor;
flex: 0 0 12px;
}
.manifest-line__swatch--ember { background: var(--ember); color: rgba(255,122,46,0.7); }
.manifest-line__swatch--red { background: #E23838; color: rgba(226,56,56,0.7); }
.manifest-line__swatch--purple { background: #7A3EE0; color: rgba(122,62,224,0.7); }
.manifest-line__actions {
display: flex;
gap: 20px;
margin-top: 2px;
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
}
.manifest-line__actions a {
border-bottom: 1px dotted rgba(184,176,166,0.4);
padding-bottom: 1px;
}
.manifest-line__actions a:hover { color: var(--ember); border-bottom-color: var(--ember); }
.manifest-line__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
min-width: 170px;
}
.manifest-line__stepper {
display: inline-flex;
align-items: stretch;
background: var(--bg-input);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}
.manifest-line__stepper button {
width: 32px;
height: 36px;
background: transparent;
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 15px;
border-right: 1px solid var(--hull-panel-dark);
}
.manifest-line__stepper button:last-child { border-right: none; border-left: 1px solid var(--hull-panel-dark); }
.manifest-line__stepper input {
width: 40px;
text-align: center;
color: var(--chrome-highlight);
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
font-variant-numeric: tabular-nums;
outline: none;
}
.manifest-line__prices {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.manifest-line__unit {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.manifest-line__unit .val { color: var(--chrome-warm); font-variant-numeric: tabular-nums; margin-left: 4px; }
.manifest-line__total {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Delivery options — reused pattern from MAS51 */
.delivery-options {
margin: 22px 28px 0;
padding: 22px 0 4px;
border-top: 1px solid rgba(255,122,46,0.20);
}
.delivery-options__legend {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
font-weight: 500;
margin-bottom: 14px;
}
.delivery-options__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.delivery-radio {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--hull-panel-dark);
cursor: pointer;
border: 1px solid rgba(250,250,250,0.04);
}
.delivery-radio__dot {
width: 18px; height: 18px;
background: var(--bg-input);
border: 1px solid var(--hull-edge);
border-radius: 50%;
flex: 0 0 18px;
position: relative;
margin-top: 2px;
}
.delivery-radio--checked {
border-color: var(--ember);
background: rgba(255,122,46,0.05);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.08);
}
.delivery-radio--checked .delivery-radio__dot { border-color: var(--ember); }
.delivery-radio--checked .delivery-radio__dot::after {
content: '';
position: absolute;
left: 4px; top: 4px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 6px rgba(255,122,46,0.55);
}
.delivery-radio__body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.delivery-radio__title {
font-family: var(--font-display);
font-size: 12px; font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chrome-highlight);
}
.delivery-radio__eta {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
}
.delivery-radio__price {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
.delivery-radio__price--free { color: var(--ember); letter-spacing: 0.10em; text-transform: uppercase; }
/* ============================================================
7. MANIFEST TERMINUS (NEW)
============================================================ */
.manifest-terminus {
position: relative;
margin-top: -8px;
padding: 32px 0 0;
}
.manifest-terminus__tag {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--chrome-dim);
padding: 6px 14px;
border: 1px dashed rgba(184,176,166,0.30);
transform: translateX(-32px);
}
.manifest-terminus__tag::before {
content: '';
width: 8px; height: 8px;
background: var(--chrome-dim);
border-radius: 50%;
opacity: 0.5;
}
.manifest-terminus__trust {
margin-top: 28px;
padding: 22px 28px;
background: linear-gradient(180deg, rgba(20,20,20,0.55), rgba(15,15,15,0.75));
border: 1px solid var(--hull-edge);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.08);
transform: translateX(-32px);
}
.manifest-terminus__trust-eyebrow {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.20em;
color: var(--ember);
font-weight: 600;
margin-bottom: 8px;
display: flex; align-items: center; gap: 10px;
}
.manifest-terminus__trust-eyebrow::before {
content: '';
width: 14px; height: 1px;
background: var(--ember);
box-shadow: 0 0 6px rgba(255,122,46,0.7);
}
.manifest-terminus__trust-line {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
line-height: 1.55;
}
.manifest-terminus__trust-line strong { color: var(--chrome-highlight); font-weight: 500; }
.manifest-terminus__trust-line .sep { color: var(--ember); margin: 0 10px; opacity: 0.7; }
/* ============================================================
8. ORDER TOTAL — right column, minimal
============================================================ */
.order-total {
position: sticky;
top: 24px;
border: 1px solid var(--hull-edge);
padding: 34px 28px 28px;
background:
linear-gradient(180deg, rgba(26,26,26,0.55) 0%, rgba(15,15,15,0.7) 100%);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.10),
0 12px 40px -12px rgba(0,0,0,0.9);
}
.order-total__legend {
padding: 0 14px;
margin-inline-start: -4px;
margin-top: -50px;
margin-bottom: 22px;
background: var(--carbon);
width: fit-content;
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
}
.order-total__legend .accent { color: var(--ember); }
.total-rows { display: flex; flex-direction: column; gap: 10px; }
.total-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
}
.total-row__label {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.total-row__value {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
}
.total-row__value--free { color: var(--ember); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; }
.total-row__value--discount { color: var(--ember); }
.total-row__value--muted { color: var(--chrome-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.10em; }
.total-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.4) 50%, transparent 100%);
margin: 20px 0 18px;
opacity: 0.6;
}
.total-final {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0 4px;
}
.total-final__label {
font-family: var(--font-display);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-highlight);
font-weight: 600;
}
.total-final__value {
font-family: var(--font-display);
font-size: 34px;
font-weight: 700;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
text-shadow: 0 0 24px rgba(255,122,46,0.4);
}
/* BNPL preview */
.bnpl {
margin-top: 18px;
padding: 14px 16px;
border: 1px dashed rgba(255,122,46,0.35);
background: rgba(255,122,46,0.04);
display: flex;
flex-direction: column;
gap: 6px;
}
.bnpl__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
font-family: var(--font-display);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chrome-warm);
}
.bnpl__head strong { color: var(--chrome-highlight); font-variant-numeric: tabular-nums; font-weight: 600; }
.bnpl__head .brand { color: var(--ember); font-weight: 700; letter-spacing: 0.16em; }
.bnpl__tag {
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--on-primary-fixed);
background: var(--ember);
padding: 3px 8px;
box-shadow: 0 0 10px rgba(255,122,46,0.5);
align-self: flex-start;
}
.bnpl__note {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.5;
}
.total-loyalty {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
margin-top: 18px;
}
.total-loyalty .val { color: var(--ember); font-variant-numeric: tabular-nums; font-weight: 500; }
/* Primary CTA */
.checkout-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
margin-top: 20px;
padding: 20px 24px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--on-primary-fixed);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
box-shadow: var(--ember-glow-md);
border: none;
border-radius: 0;
}
.checkout-cta__arrow {
font-size: 18px;
transform: translateY(-1px);
}
/* Trust badges — reused from MAS51 */
.trust-badges {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid rgba(250,250,250,0.06);
display: flex;
flex-direction: column;
gap: 14px;
}
.trust-badges__pay {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.trust-badges__pay span {
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--chrome-warm);
padding: 5px 8px;
border: 1px solid rgba(250,250,250,0.10);
background: var(--hull-panel-dark);
text-transform: uppercase;
}
.trust-badges__signals {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.trust-signal {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.trust-signal__glyph {
width: 20px; height: 20px;
display: inline-grid; place-items: center;
border: 1px solid rgba(255,122,46,0.4);
color: var(--ember);
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
}
.trust-signal__glyph svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.trust-note {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.5;
}
/* ============================================================
9. CROSS-SELL (reused from MAS51)
============================================================ */
.cross-sell {
position: relative;
background:
radial-gradient(ellipse 40% 55% at 100% 50%, rgba(255,122,46,0.10), transparent 55%),
linear-gradient(180deg, var(--void) 0%, var(--carbon) 100%);
padding: 88px 0 96px;
isolation: isolate;
}
.cross-sell::before {
content: '';
position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--ember) 50%, transparent 100%);
opacity: 0.5;
box-shadow: 0 0 16px rgba(255,122,46,0.3);
}
.cross-sell__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 40px;
padding-bottom: 32px;
margin-bottom: 40px;
border-bottom: 1px solid rgba(250,250,250,0.06);
}
.cross-sell__title-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.cross-sell__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--ember);
}
.cross-sell__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.02;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.cross-sell__title .accent { color: var(--ember); }
.cross-sell__sub {
font-family: var(--font-body);
font-size: 15px;
color: var(--chrome-warm);
}
.cross-sell__view-all {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ember);
border-bottom: 1px solid rgba(255,122,46,0.4);
padding-bottom: 2px;
white-space: nowrap;
}
.cross-sell__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.accessory-tile {
background: rgba(20,20,20,0.94);
backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: box-shadow 200ms, transform 200ms;
}
.accessory-tile:hover {
box-shadow: var(--panel-lift-hover), 0 0 32px rgba(255,122,46,0.18);
transform: translateY(-3px);
}
.accessory-tile__media {
aspect-ratio: 1/1;
background-color: var(--hull-panel-dark);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.accessory-tile__body {
background: var(--hull-panel-lift);
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.accessory-tile__cat {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
}
.accessory-tile__name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--chrome-highlight);
line-height: 1.2;
margin-bottom: 4px;
}
.accessory-tile__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 14px;
border-top: 1px dotted rgba(184,176,166,0.2);
}
.accessory-tile__price {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.accessory-tile__add {
padding: 8px 14px 9px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-warm);
border: 1px solid rgba(250,250,250,0.10);
background: transparent;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}
.accessory-tile__add:hover {
color: var(--on-primary-fixed);
background: var(--ember);
border-color: var(--ember);
box-shadow: var(--ember-glow-sm);
}
/* ============================================================
10. REINFORCEMENT BAND (reused from MAS51)
============================================================ */
.reinforcement {
position: relative;
min-height: 140px;
background-color: var(--carbon);
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
}
.reinforcement::before {
content: '';
position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--ember) 50%, transparent 100%);
opacity: 0.6;
box-shadow: 0 0 12px rgba(255,122,46,0.35);
z-index: 2;
}
.reinforcement__inner {
position: relative;
z-index: 3;
width: 100%;
padding: 32px 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--chrome-highlight);
text-align: center;
}
.reinforcement__phrase {
display: inline-flex; align-items: center; gap: 18px;
padding: 0 26px;
}
.reinforcement__phrase:not(:last-child)::after {
content: '';
width: 5px; height: 5px;
background: var(--ember);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255,122,46,0.9);
margin-left: 26px;
}
/* ============================================================
11. FOOTER (reused from MAS51)
============================================================ */
.site-footer {
background: var(--carbon);
position: relative;
padding: 72px 0 40px;
}
.site-footer::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 1px;
background: rgba(255,122,46,0.55);
box-shadow: 0 0 20px 2px rgba(255,122,46,0.3);
}
.site-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(250,250,250,0.05);
}
.site-footer__brand-col { display: flex; flex-direction: column; gap: 18px; }
.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;
}
.site-footer__brand span { color: var(--ember); }
.site-footer__tagline {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
max-width: 340px;
line-height: 1.55;
}
.site-footer__col-title {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--chrome-highlight);
margin-bottom: 18px;
}
.site-footer__col ul {
list-style: none;
display: flex; flex-direction: column; gap: 10px;
}
.site-footer__col a {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
}
.site-footer__col a:hover { color: var(--ember); }
.site-footer__meta {
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1180px) {
.container { padding: 0 32px; }
.cart-main__layout { grid-template-columns: 1fr 340px; gap: 40px; }
.cross-sell__grid { grid-template-columns: repeat(2, 1fr); }
.site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
.options-chips { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 900px) {
.cart-header__title { font-size: clamp(40px, 8vw, 64px); }
.gift-band__inner { grid-template-columns: 1fr; gap: 24px; }
.gift-band__picker { grid-template-columns: repeat(3, 1fr); }
.cart-main__layout { grid-template-columns: 1fr; gap: 32px; }
.order-total { position: static; }
.delivery-options__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
.site-nav__links { display: none; }
.cart-header { min-height: 240px; }
.cart-header__inner { padding: 40px 0 24px; min-height: 240px; }
.cart-header__chips { flex-direction: column; align-items: flex-start; gap: 12px; }
.cart-header__chip { padding: 0; }
.cart-header__chip:not(:last-child)::after { display: none; }
.gift-band__picker { grid-template-columns: 1fr; }
.manifest { padding-left: 40px; }
.manifest::before { left: 4px; }
.dispatch__marker { left: -40px; gap: 12px; }
.dispatch__title { font-size: 22px; }
.dispatch__eta { padding-left: 8px; margin-left: 4px; font-size: 10px; }
.dispatch__body { margin-top: 54px; }
.dispatch__items { padding: 6px 16px; }
.delivery-options { margin: 22px 16px 0; }
.manifest-line { grid-template-columns: 68px 1fr; gap: 14px; }
.manifest-line__right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.manifest-terminus__tag,
.manifest-terminus__trust { transform: translateX(-16px); }
.cross-sell__grid { grid-template-columns: 1fr; }
.cross-sell__head { flex-direction: column; align-items: flex-start; gap: 16px; }
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.site-footer__brand-col { grid-column: 1 / -1; }
.site-footer__meta { flex-direction: column; gap: 16px; align-items: flex-start; }
.reinforcement__phrase { padding: 0 12px; font-size: 12px; }
.reinforcement__phrase:not(:last-child)::after { margin-left: 12px; }
}
</style>
</head>
<body>
<!-- ═════ Site nav (reused from MAS51) ═════ -->
<nav class="site-nav">
<div class="container site-nav__inner">
<div class="site-nav__brand">ART<span>SABERS</span></div>
<div class="site-nav__links">
<a href="#" class="site-nav__link">Shop</a>
<a href="#" class="site-nav__link">Saber Cores</a>
<a href="#" class="site-nav__link">Characters</a>
<a href="#" class="site-nav__link">Helmets</a>
<a href="#" class="site-nav__link">Support</a>
</div>
<div class="site-nav__utils">
<span class="site-nav__util">USD</span>
<span class="site-nav__util">Account</span>
<a href="#" class="site-nav__cart site-nav__link--active">Cart<strong>3</strong></a>
</div>
</div>
</nav>
<!-- ═════ 1. Compact page header ═════ -->
<header class="cart-header">
<div class="container cart-header__inner">
<a id="tf-breadcrumb-1" data-tf-family="breadcrumb" style="display:contents"></a>
<div class="cart-header__crumbs">
<span>Home</span>
<span class="sep">/</span>
<span class="curr">Cart</span>
</div>
<h1 class="cart-header__title">Your Delivery <span class="accent">Manifest</span></h1>
<p class="cart-header__desc">
<strong>3 items</strong><span class="dot">·</span>
<strong>2 dispatches</strong><span class="dot">·</span>
Arriving <strong>12 Aug – 2 Sep</strong>
</p>
<div class="cart-header__spacer"></div>
<a id="tf-trust-chip-strip-1" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="cart-header__chips">
<span class="cart-header__chip"><span class="dot"></span>24-hour UK dispatch</span>
<span class="cart-header__chip">Factory-direct, tracked worldwide</span>
<span class="cart-header__chip">1-year duelling warranty</span>
<span class="cart-header__chip">2,400+ five-star reviews</span>
</div>
</div>
</header>
<!-- ═════ 2. Free gift band — unlocked ═════ -->
<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__body">
<div class="gift-band__eyebrow"><span class="gift-band__eyebrow-glyph">+</span>You crossed $350</div>
<div class="gift-band__title">You've unlocked a free gift.</div>
<div class="gift-band__sub">Choose one below. Ships with Dispatch 1.</div>
</div>
<div class="gift-band__picker">
<!-- Tile 1 — SELECTED (Silver Coupler) -->
<div class="gift-tile gift-tile--selected">
<div class="gift-tile__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Silver-coupler-2-1-768x768.jpg');"></div>
<div class="gift-tile__body">
<div class="gift-tile__name">Silver Lightsaber Coupler</div>
<div class="gift-tile__value">$19.99 value</div>
<span class="gift-tile__selected-tag">Selected</span>
</div>
</div>
<!-- Tile 2 — default -->
<div class="gift-tile">
<div class="gift-tile__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Grey-coupler-2-1-768x768.jpg');"></div>
<div class="gift-tile__body">
<div class="gift-tile__name">Grey Lightsaber Coupler</div>
<div class="gift-tile__value">$19.99 value</div>
<button class="gift-tile__pick">Select</button>
</div>
</div>
<!-- Tile 3 — default -->
<div class="gift-tile">
<div class="gift-tile__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Black-Covertec-Wheel-Adapter-for-S-RGB-SNV4-PRO-and-Proffie-2.2-Lightsabers-768x768.jpg');"></div>
<div class="gift-tile__body">
<div class="gift-tile__name">Black Covertec Wheel Adapter</div>
<div class="gift-tile__value">$19.99 value</div>
<button class="gift-tile__pick">Select</button>
</div>
</div>
</div>
</div>
</section>
<!-- ═════ 3. Options chip row — Variant B signature ═════ -->
<a id="tf-form-1" data-tf-family="form" style="display:contents"></a>
<section class="options-band">
<div class="container">
<div class="options-band__eyebrow">Order options</div>
<h2 class="options-band__title">Tune your <span class="accent">order</span></h2>
<div class="options-chips">
<!-- Chip 1: Discount code — EXPANDED + APPLIED -->
<div class="option-chip">
<button class="option-chip__button option-chip__button--expanded">
<span class="option-chip__icon"></span>
<span class="option-chip__label">Discount code <span class="savings">−$92.50</span></span>
<span class="caret">−</span>
</button>
<div class="option-chip__panel">
<span class="option-chip__field-label">Promo or gift-card code</span>
<div class="option-chip__input-row">
<input type="text" class="option-chip__input" value="SAVE10" placeholder="Enter code">
<button class="option-chip__apply">Apply</button>
</div>
<div class="option-chip__applied">
<span class="option-chip__applied-code">SAVE10 applied</span>
<span class="option-chip__applied-value">−$92.50</span>
<a href="#" class="option-chip__applied-remove">Remove</a>
</div>
</div>
</div>
<!-- Chip 2: Gift wrap + message — ON, EXPANDED -->
<div class="option-chip">
<button class="option-chip__button option-chip__button--on">
<span class="option-chip__icon"></span>
<span class="option-chip__label">Gift wrap + message <span class="savings">+$4.99</span></span>
<span class="caret">−</span>
</button>
<div class="option-chip__panel option-chip__panel--on">
<span class="option-chip__field-label">Message on the gift card</span>
<textarea class="option-chip__textarea" placeholder="Optional gift message · appears on your gift card">May the Force be with you — from Dad. Happy 18th, kid.</textarea>
<span class="option-chip__counter">62 / 240</span>
</div>
</div>
<!-- Chip 3: Loyalty — OFF, ghost -->
<div class="option-chip">
<button class="option-chip__button option-chip__button--off">
<span class="option-chip__icon"></span>
<span class="option-chip__label">Apply <strong>2,400 loyalty points</strong> · $24 off</span>
<span class="caret">+</span>
</button>
</div>
</div>
</div>
</section>
<!-- ═════ 4. Main content — manifest LEFT, order total RIGHT ═════ -->
<section class="cart-main">
<div class="container cart-main__layout">
<!-- ─── LEFT: manifest timeline ─── -->
<div class="cart-main__left">
<div class="cart-main__head">
<div class="cart-main__head-title">Your delivery <strong style="margin-left:8px;">manifest</strong></div>
<a href="#" class="cart-main__continue">← Continue browsing sabers</a>
</div>
<p class="cart-main__intro">
Your order ships direct from our workshop in <strong>two dispatches</strong>. Every hilt is assembled, tuned, and hand-tested before it leaves the factory floor. Here's the schedule.
</p>
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<div class="manifest">
<!-- Dispatch 1 -->
<div class="dispatch">
<div class="dispatch__marker">
<span class="dispatch__dot"></span>
<div class="dispatch__heading">
<h3 class="dispatch__title">Dispatch <span class="idx">1</span></h3>
<span class="dispatch__eta">Arriving <strong>12–14 August</strong></span>
<span class="dispatch__free">Free</span>
</div>
</div>
<div class="dispatch__body">
<p class="dispatch__explainer">Ships direct from the workshop floor after hand-testing.</p>
<div class="dispatch__items">
<!-- Line 1: Carbon Strike -->
<div class="manifest-line">
<div class="manifest-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg');"></div>
<div class="manifest-line__body">
<div class="manifest-line__name">Carbon Strike Lightsaber — Xenopixel V3</div>
<div class="manifest-line__blade">
<span class="manifest-line__swatch manifest-line__swatch--ember"></span>
<strong>Ember-orange</strong>
<span class="sep">·</span> Neopixel
<span class="sep">·</span> 36"
<span class="sep">·</span> Duelling
</div>
<div class="manifest-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="manifest-line__right">
<div class="manifest-line__stepper">
<button>−</button>
<input value="1" readonly>
<button>+</button>
</div>
<div class="manifest-line__prices">
<div class="manifest-line__unit">Unit<span class="val">$459.99</span></div>
<div class="manifest-line__total">$459.99</div>
</div>
</div>
</div>
<!-- Line 2: Starkiller SE -->
<div class="manifest-line">
<div class="manifest-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg');"></div>
<div class="manifest-line__body">
<div class="manifest-line__name">Starkiller SE Lightsaber — Proffie 2.2</div>
<div class="manifest-line__blade">
<span class="manifest-line__swatch manifest-line__swatch--red"></span>
<strong>Red</strong>
<span class="sep">·</span> Neopixel
<span class="sep">·</span> 32"
<span class="sep">·</span> Duelling
</div>
<div class="manifest-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="manifest-line__right">
<div class="manifest-line__stepper">
<button>−</button>
<input value="1" readonly>
<button>+</button>
</div>
<div class="manifest-line__prices">
<div class="manifest-line__unit">Unit<span class="val">$299.99</span></div>
<div class="manifest-line__total">$299.99</div>
</div>
</div>
</div>
</div>
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<div class="delivery-options">
<div class="delivery-options__legend">Delivery for Dispatch 1</div>
<div class="delivery-options__list">
<label class="delivery-radio delivery-radio--checked">
<span class="delivery-radio__dot"></span>
<div class="delivery-radio__body">
<div class="delivery-radio__title">Standard</div>
<div class="delivery-radio__eta">Arrives 12–14 August</div>
<div class="delivery-radio__price delivery-radio__price--free">Free</div>
</div>
</label>
<label class="delivery-radio">
<span class="delivery-radio__dot"></span>
<div class="delivery-radio__body">
<div class="delivery-radio__title">Express</div>
<div class="delivery-radio__eta">Arrives 9–10 August</div>
<div class="delivery-radio__price">+$14.99</div>
</div>
</label>
<label class="delivery-radio">
<span class="delivery-radio__dot"></span>
<div class="delivery-radio__body">
<div class="delivery-radio__title">Weekend</div>
<div class="delivery-radio__eta">Saturday 10 August</div>
<div class="delivery-radio__price">+$19.99</div>
</div>
</label>
</div>
</div>
</div>
</div>
<!-- Dispatch 2 -->
<div class="dispatch">
<div class="dispatch__marker">
<span class="dispatch__dot"></span>
<div class="dispatch__heading">
<h3 class="dispatch__title">Dispatch <span class="idx">2</span></h3>
<span class="dispatch__eta">Arriving <strong>25 August – 2 September</strong></span>
<span class="dispatch__free">Free</span>
</div>
</div>
<div class="dispatch__body">
<p class="dispatch__explainer">Assembly begins on payment confirmation.</p>
<div class="dispatch__items">
<!-- Line 3: Mace Windu SE -->
<div class="manifest-line">
<div class="manifest-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg');"></div>
<div class="manifest-line__body">
<div class="manifest-line__name">Mace Windu SE Duelling Lightsaber — S-RGB</div>
<div class="manifest-line__blade">
<span class="manifest-line__swatch manifest-line__swatch--purple"></span>
<strong>Purple</strong>
<span class="sep">·</span> Baselit
<span class="sep">·</span> 32"
</div>
<div class="manifest-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="manifest-line__right">
<div class="manifest-line__stepper">
<button>−</button>
<input value="1" readonly>
<button>+</button>
</div>
<div class="manifest-line__prices">
<div class="manifest-line__unit">Unit<span class="val">$164.99</span></div>
<div class="manifest-line__total">$164.99</div>
</div>
</div>
</div>
</div>
<div class="delivery-options">
<div class="delivery-options__legend">Delivery for Dispatch 2</div>
<div class="delivery-options__list">
<label class="delivery-radio delivery-radio--checked">
<span class="delivery-radio__dot"></span>
<div class="delivery-radio__body">
<div class="delivery-radio__title">Standard</div>
<div class="delivery-radio__eta">Arrives 25 Aug – 2 Sep</div>
<div class="delivery-radio__price delivery-radio__price--free">Free</div>
</div>
</label>
<label class="delivery-radio">
<span class="delivery-radio__dot"></span>
<div class="delivery-radio__body">
<div class="delivery-radio__title">Express</div>
<div class="delivery-radio__eta">Arrives 20–22 August</div>
<div class="delivery-radio__price">+$14.99</div>
</div>
</label>
<label class="delivery-radio">
<span class="delivery-radio__dot"></span>
<div class="delivery-radio__body">
<div class="delivery-radio__title">Weekend</div>
<div class="delivery-radio__eta">Saturday 23 August</div>
<div class="delivery-radio__price">+$19.99</div>
</div>
</label>
</div>
</div>
</div>
</div>
<!-- Manifest terminus -->
<div class="manifest-terminus">
<span class="manifest-terminus__tag">End of Manifest</span>
<a id="tf-trust-chip-strip-2" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="manifest-terminus__trust">
<div class="manifest-terminus__trust-eyebrow">Both dispatches include</div>
<div class="manifest-terminus__trust-line">
<strong>30-day money-back guarantee</strong>
<span class="sep">·</span>
<strong>1-year duelling warranty</strong>
<span class="sep">·</span>
<strong>Free returns worldwide</strong>
</div>
</div>
</div>
</div>
</div>
<!-- ─── RIGHT: minimal order total ─── -->
<a id="tf-other-4" data-tf-family="other" style="display:contents"></a>
<aside class="cart-main__right">
<div class="order-total">
<div class="order-total__legend">Order <span class="accent">Total</span></div>
<div class="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">
<span class="total-row__label">Discount (SAVE10)</span>
<span class="total-row__value total-row__value--discount">−$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">
<span class="total-row__label">Shipping</span>
<span class="total-row__value total-row__value--free">Free</span>
</div>
<div class="total-row">
<span class="total-row__label">Tax</span>
<span class="total-row__value total-row__value--muted">Shown at checkout</span>
</div>
</div>
<div class="total-divider"></div>
<div class="total-final">
<span class="total-final__label">Total</span>
<span class="total-final__value">$837.46</span>
</div>
<!-- BNPL preview -->
<div class="bnpl">
<div class="bnpl__head">
<span>Or <strong>4 × $210</strong> with <span class="brand">Klarna</span></span>
<span class="bnpl__tag">Coming soon</span>
</div>
<p class="bnpl__note">Currently under review with our shipping partners.</p>
</div>
<div class="total-loyalty">
<span>You'll earn</span>
<span class="val">+240 points on this order</span>
</div>
<button class="checkout-cta">
<span>Proceed to Checkout</span>
<span class="checkout-cta__arrow">→</span>
</button>
<div class="trust-badges">
<div class="trust-badges__pay">
<span>Visa</span>
<span>Mastercard</span>
<span>Amex</span>
<span>Apple Pay</span>
<span>Google Pay</span>
</div>
<div class="trust-badges__signals">
<span class="trust-signal">
<span class="trust-signal__glyph">
<svg viewBox="0 0 24 24"><path d="M6 11V8a6 6 0 0 1 12 0v3M5 11h14v10H5z"/></svg>
</span>
SSL secure checkout
</span>
<span class="trust-signal">
<span class="trust-signal__glyph">
<svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 14-5l3-2v6h-6l3-2a6 6 0 1 0 1 5"/></svg>
</span>
30-day returns
</span>
</div>
<p class="trust-note">Free returns within 30 days · Duty and taxes at checkout.</p>
</div>
</div>
</aside>
</div>
</section>
<!-- ═════ 5. Cross-sell (reused from MAS51) ═════ -->
<a id="tf-cross-sell-strip-1" data-tf-family="cross-sell-strip" style="display:contents"></a>
<section class="cross-sell">
<div class="container">
<div class="cross-sell__head">
<div class="cross-sell__title-wrap">
<div class="cross-sell__eyebrow">Complete Your Setup</div>
<h2 class="cross-sell__title">Complete your <span class="accent">setup</span></h2>
<p class="cross-sell__sub">Accessories other duellists picked up with theirs.</p>
</div>
<a href="#" class="cross-sell__view-all">View all accessories →</a>
</div>
<div class="cross-sell__grid">
<article class="accessory-tile">
<div class="accessory-tile__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2026/05/GD_7767-%E6%8B%B7%E8%B4%9D-768x768.jpg');"></div>
<div class="accessory-tile__body">
<div class="accessory-tile__cat">Stands</div>
<h3 class="accessory-tile__name">RGB Triple Lightsaber Tiered Stand</h3>
<div class="accessory-tile__foot">
<div class="accessory-tile__price">$99.99</div>
<button class="accessory-tile__add">Add +</button>
</div>
</div>
</article>
<article class="accessory-tile">
<div class="accessory-tile__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/11/Type-C-S-RGB-Kit-768x768.jpg');"></div>
<div class="accessory-tile__body">
<div class="accessory-tile__cat">Charging Kits</div>
<h3 class="accessory-tile__name">Type-C S-RGB Charging Kit</h3>
<div class="accessory-tile__foot">
<div class="accessory-tile__price">$84.99</div>
<button class="accessory-tile__add">Add +</button>
</div>
</div>
</article>
<article class="accessory-tile">
<div class="accessory-tile__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/11/Type-C-Proffie-2.2-PRO-Kit-768x768.jpg');"></div>
<div class="accessory-tile__body">
<div class="accessory-tile__cat">Charging Kits</div>
<h3 class="accessory-tile__name">Type-C Proffie 2.2 Charging Kit</h3>
<div class="accessory-tile__foot">
<div class="accessory-tile__price">$109.99</div>
<button class="accessory-tile__add">Add +</button>
</div>
</div>
</article>
<article class="accessory-tile">
<div class="accessory-tile__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Silver-Covertec-Wheel-Adapter-for-S-RGB-SNV4-PRO-and-Proffie-2.2-Lightsabers-768x768.jpg');"></div>
<div class="accessory-tile__body">
<div class="accessory-tile__cat">Belt Adapters</div>
<h3 class="accessory-tile__name">Silver Covertec Wheel Adapter</h3>
<div class="accessory-tile__foot">
<div class="accessory-tile__price">$19.99</div>
<button class="accessory-tile__add">Add +</button>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ═════ 6. Reinforcement band (reused from MAS51) ═════ -->
<a id="tf-trust-chip-strip-3" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="reinforcement">
<div class="container">
<div class="reinforcement__inner">
<span class="reinforcement__phrase">Every hilt tracked from workshop dispatch</span>
<span class="reinforcement__phrase">Global 7–10 day delivery</span>
<span class="reinforcement__phrase">2,400+ five-star reviews</span>
</div>
</div>
</section>
<!-- ═════ 7. Site footer (reused from MAS51) ═════ -->
<footer class="site-footer">
<div class="container">
<div class="site-footer__grid">
<div class="site-footer__brand-col">
<div class="site-footer__brand">ART<span>SABERS</span></div>
<p class="site-footer__tagline">From factory floor to your door. Hundreds of hilts, every Saber Core tier, every duelling grade — backed by real customer service.</p>
</div>
<div class="site-footer__col">
<div class="site-footer__col-title">Shop</div>
<ul>
<li><a href="#">All sabers</a></li>
<li><a href="#">By character</a></li>
<li><a href="#">By Saber Core</a></li>
<li><a href="#">Helmets</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</div>
<div class="site-footer__col">
<div class="site-footer__col-title">Support</div>
<ul>
<li><a href="#">Contact us</a></li>
<li><a href="#">Order status</a></li>
<li><a href="#">Warranty claim</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="site-footer__col">
<div class="site-footer__col-title">Company</div>
<ul>
<li><a href="#">Our story</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Wholesale</a></li>
</ul>
</div>
<div class="site-footer__col">
<div class="site-footer__col-title">Legal</div>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</div>
</div>
<div class="site-footer__meta">
<span>© 2026 ARTSABERS · Part of Nerdworks</span>
<span>USD · CAD · AUD · NZD · EUR · GBP</span>
</div>
</div>
</footer>
</body>
</html>