<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Cart — ARTSABERS · Variant A · The Assembly Bay</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(--carbon);
--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; border-radius: 0; }
button { cursor: pointer; }
fieldset { border: none; padding: 0; margin: 0; }
legend { padding: 0; }
/* Utilities */
.container { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
/* ============================================================
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 (reused from MAS51, subtitle reframed)
============================================================ */
.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: 52px 0 30px;
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(--chrome-highlight);
margin-top: 4px;
}
.cart-header__title .accent { color: var(--ember); }
.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 from MAS51, copy locks updated)
============================================================ */
.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: 30px 0 32px;
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.82;
}
.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. MAIN CART AREA — Variant A treatment
============================================================ */
.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: 60px 0 84px;
isolation: isolate;
}
.cart-main > * { position: relative; z-index: 1; }
.cart-main__layout {
display: grid;
grid-template-columns: 1fr 440px;
gap: 48px;
align-items: start;
}
/* ---------- Left-column head row ---------- */
.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.16em;
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); }
/* ---------- Assembly Bay content-group (MAS52 fieldset border pattern, reframed) ---------- */
.bay-group {
border: 1px solid var(--hull-edge);
padding: 32px 36px 34px;
margin-bottom: 32px;
background: linear-gradient(180deg, rgba(26,26,26,0.4) 0%, rgba(15,15,15,0.55) 100%);
position: relative;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}
.bay-group__legend {
display: flex;
align-items: baseline;
gap: 14px;
padding: 0 14px;
margin-inline-start: -4px;
margin-top: -46px;
margin-bottom: 26px;
background: var(--carbon);
width: fit-content;
}
.bay-group__legend-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
}
.bay-group__legend-title .idx {
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.bay-group__legend-eta {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
padding-left: 14px;
border-left: 1px solid rgba(184,176,166,0.25);
white-space: nowrap;
}
.bay-group__legend-eta strong { color: var(--chrome-warm); font-weight: 500; margin: 0 4px; }
.bay-group__legend-eta .free { color: var(--ember); font-weight: 600; margin-left: 8px; }
.bay-group__legend-eta .facility { color: var(--chrome-warm); font-weight: 500; }
/* ---------- Cart line-item — Variant A: blade-only meta with swatch ---------- */
.cart-line {
display: grid;
grid-template-columns: 108px 1fr auto;
gap: 24px;
padding: 22px 0;
border-bottom: 1px solid rgba(250,250,250,0.06);
align-items: flex-start;
}
.cart-line:last-of-type { border-bottom: none; }
.cart-line__media {
width: 108px; height: 108px;
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);
}
.cart-line__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cart-line__name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--chrome-highlight);
line-height: 1.18;
}
.cart-line__name .core {
color: var(--chrome-warm);
font-weight: 500;
letter-spacing: 0.04em;
}
.cart-line__blade {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-warm);
}
.cart-line__blade-swatch {
width: 12px;
height: 12px;
display: inline-block;
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.4),
inset 0 0 0 1px rgba(0,0,0,0.5),
0 0 8px var(--swatch-glow, rgba(255,122,46,0.6));
background: var(--swatch, var(--ember));
}
.cart-line__blade .sep { color: var(--chrome-dim); opacity: 0.6; margin: 0 4px; }
.cart-line__blade .flag {
color: var(--ember);
font-weight: 600;
letter-spacing: 0.18em;
}
.cart-line__actions {
display: flex;
gap: 22px;
margin-top: 2px;
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
}
.cart-line__actions a {
border-bottom: 1px dotted rgba(184,176,166,0.4);
padding-bottom: 1px;
}
.cart-line__actions a:hover { color: var(--ember); border-bottom-color: var(--ember); }
.cart-line__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
min-width: 180px;
}
.cart-line__prices {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.cart-line__unit {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.cart-line__unit .val { color: var(--chrome-warm); font-variant-numeric: tabular-nums; margin-left: 4px; }
.cart-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;
}
/* ---------- Quantity stepper (reused from MAS52) ---------- */
.stepper {
display: inline-flex;
align-items: stretch;
background: var(--bg-input);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}
.stepper__btn {
width: 36px;
height: 40px;
background: transparent;
border: none;
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--hull-panel-dark);
}
.stepper__btn:last-child { border-right: none; border-left: 1px solid var(--hull-panel-dark); }
.stepper__btn:hover { color: var(--ember); background: rgba(255,122,46,0.06); }
.stepper__value {
width: 44px;
text-align: center;
background: transparent;
border: none;
color: var(--chrome-highlight);
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
font-variant-numeric: tabular-nums;
outline: none;
}
/* ---------- Delivery radio group (reused from MAS51) ---------- */
.delivery-options {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid rgba(255,122,46,0.18);
}
.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);
transition: background 120ms, border-color 120ms;
}
.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; }
.bay-group__note {
margin-top: 20px;
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
line-height: 1.55;
padding-left: 18px;
position: relative;
}
.bay-group__note::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);
}
/* ============================================================
ORDER SUMMARY — Variant A transparency-first hierarchy
============================================================ */
.order-summary {
position: sticky;
top: 24px;
border: 1px solid var(--hull-edge);
padding: 36px 32px 32px;
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-summary__legend {
padding: 0 14px;
margin-inline-start: -4px;
margin-top: -50px;
margin-bottom: 26px;
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-summary__legend .accent { color: var(--ember); }
/* Cost table */
.summary-rows { display: flex; flex-direction: column; gap: 10px; }
.summary-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
}
.summary-row__label {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.summary-row__label .idx {
color: var(--ember);
font-variant-numeric: tabular-nums;
font-weight: 600;
letter-spacing: 0.10em;
}
.summary-row__label .facility {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--chrome-dim);
opacity: 0.7;
}
.summary-row__value {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
}
.summary-row__value--free { color: var(--ember); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; }
.summary-row__value--discount { color: var(--ember); }
.summary-row__value--muted { color: var(--chrome-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.10em; }
.summary-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.4) 50%, transparent 100%);
margin: 22px 0 20px;
opacity: 0.6;
}
.summary-divider--hairline {
background: rgba(250,250,250,0.08);
opacity: 1;
margin: 20px 0 18px;
}
/* Estimated total — the dominant moment */
.summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0 4px;
}
.summary-total__label {
font-family: var(--font-display);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-highlight);
font-weight: 600;
}
.summary-total__value {
font-family: var(--font-display);
font-size: 40px;
font-weight: 700;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
text-shadow: 0 0 28px rgba(255,122,46,0.4);
line-height: 1;
}
/* BNPL preview row */
.summary-bnpl {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 14px;
padding: 12px 14px;
background: rgba(255,122,46,0.04);
border-left: 2px solid rgba(255,122,46,0.5);
}
.summary-bnpl__head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.summary-bnpl__text {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chrome-warm);
}
.summary-bnpl__text .amt { color: var(--ember); font-variant-numeric: tabular-nums; }
.summary-bnpl__text .brand { color: var(--chrome-highlight); letter-spacing: 0.10em; }
.summary-bnpl__tag {
display: inline-block;
padding: 3px 8px;
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: var(--ember-glow);
box-shadow: 0 0 10px rgba(255,179,71,0.4);
}
.summary-bnpl__sub {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
font-style: italic;
line-height: 1.45;
}
/* Loyalty earned line */
.summary-loyalty-earn {
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: 14px;
padding: 8px 0;
}
.summary-loyalty-earn .glyph {
color: var(--ember);
margin-right: 6px;
font-weight: 700;
}
.summary-loyalty-earn .val { color: var(--ember); font-variant-numeric: tabular-nums; font-weight: 500; }
/* ---------- Secure checkout CTA ---------- */
.checkout-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 22px 24px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
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 */
.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__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);
}
.trust-signal__glyph svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.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;
display: inline-flex;
align-items: center;
gap: 5px;
}
.trust-badges__pay span .soon {
font-size: 8px;
letter-spacing: 0.18em;
color: var(--on-primary-fixed);
background: var(--ember-glow);
padding: 1px 4px;
font-weight: 700;
}
.trust-note {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.5;
}
/* ============================================================
Options accordion — below the CTA, collapsed by default
Variant A: doesn't compete with the total
============================================================ */
.options-accordion {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.options-accordion__hint {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-dim);
padding-bottom: 10px;
margin-bottom: 4px;
border-bottom: 1px dotted rgba(184,176,166,0.2);
display: flex;
align-items: center;
gap: 10px;
}
.options-accordion__hint::before {
content: '';
width: 6px; height: 6px;
background: var(--chrome-dim);
border-radius: 50%;
opacity: 0.6;
}
.accordion-row {
background: var(--hull-panel-dark);
border: 1px solid rgba(250,250,250,0.05);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.04);
}
.accordion-row__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
cursor: pointer;
}
.accordion-row__caret {
display: inline-block;
width: 12px;
color: var(--ember);
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
text-align: center;
transition: transform 200ms;
}
.accordion-row__caret--open { transform: rotate(90deg); }
.accordion-row__label {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
display: flex;
align-items: baseline;
gap: 10px;
flex: 1;
padding-left: 12px;
}
.accordion-row__meta {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
font-style: italic;
letter-spacing: 0;
text-transform: none;
font-weight: 400;
}
.accordion-row__meta strong { color: var(--chrome-warm); font-weight: 500; }
.accordion-row__price {
font-family: var(--font-display);
font-size: 12px;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.10em;
font-weight: 600;
white-space: nowrap;
}
.accordion-row--open .accordion-row__caret {
color: var(--ember);
}
.accordion-row--open {
border-color: rgba(255,122,46,0.3);
box-shadow: inset 0 1px 0 rgba(255,179,71,0.15), 0 0 12px rgba(255,122,46,0.08);
}
.accordion-row__body {
padding: 4px 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px dotted rgba(255,122,46,0.2);
margin: 0 0 0;
}
/* Gift wrap expanded body (uses form primitives from MAS52) */
.giftwrap-toggle-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding-top: 12px;
}
.toggle-box {
width: 18px; height: 18px;
background: var(--bg-input);
border: 1px solid var(--hull-edge);
flex: 0 0 18px;
position: relative;
margin-top: 2px;
}
.toggle-box--checked { border-color: var(--ember); }
.toggle-box--checked::after {
content: '';
position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border-right: 2px solid var(--ember);
border-bottom: 2px solid var(--ember);
transform: rotate(45deg);
}
.toggle-copy { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.toggle-title {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
}
.toggle-sub {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
line-height: 1.5;
}
.toggle-sub strong { color: var(--chrome-warm); font-weight: 500; }
.giftwrap-textarea-wrap {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.giftwrap-textarea-wrap__label {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.giftwrap-textarea {
display: block;
width: 100%;
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;
resize: vertical;
line-height: 1.5;
border-radius: 0;
min-height: 72px;
}
.giftwrap-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. CROSS-SELL STRIP (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: 30px;
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: 15px;
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);
}
/* ============================================================
5. 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;
}
/* ============================================================
6. 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 380px; gap: 32px; }
.cross-sell__grid { grid-template-columns: repeat(2, 1fr); }
.site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@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-summary { 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: 260px; }
.cart-header__inner { padding: 40px 0 24px; min-height: 260px; }
.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; }
.bay-group { padding: 28px 20px 24px; }
.bay-group__legend { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 10px; }
.bay-group__legend-eta { border-left: none; padding-left: 0; }
.cart-line { grid-template-columns: 80px 1fr; gap: 16px; }
.cart-line__right { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
.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; }
.summary-total__value { font-size: 34px; }
}
</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. Cart 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 <span class="accent">Cart</span></h1>
<p class="cart-header__desc">
<strong>3 items</strong><span class="dot">·</span>
<strong>2 assembly bays</strong><span class="dot">·</span>
Inspect the assembly plan below, then hit Secure Checkout.
</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 ═════ -->
<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 Assembly Bay 1.</div>
</div>
<div class="gift-band__picker">
<!-- Tile 1 — SELECTED -->
<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 -->
<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 -->
<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. Main cart area — 2-column split ═════ -->
<section class="cart-main">
<div class="container cart-main__layout">
<!-- ─── LEFT COLUMN: Assembly Bay groups ─── -->
<div class="cart-main__left">
<div class="cart-main__head">
<div class="cart-main__head-title"><strong>3</strong> items across <strong style="margin-left:0;">2</strong> assembly bays</div>
<a href="#" class="cart-main__continue">← Continue browsing sabers</a>
</div>
<!-- Assembly Bay 1 -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<fieldset class="bay-group">
<legend class="bay-group__legend">
<span class="bay-group__legend-title">Assembly Bay <span class="idx">1</span> of <span class="idx">2</span></span>
<span class="bay-group__legend-eta">
<span class="facility">Factory-direct</span>
<span class="sep">·</span>
Arriving <strong>12–14 August</strong>
<span class="free">FREE</span>
</span>
</legend>
<!-- Line 1: Carbon Strike -->
<div class="cart-line">
<div class="cart-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg');"></div>
<div class="cart-line__body">
<div class="cart-line__name">Carbon Strike Lightsaber <span class="core">— Xenopixel V3</span></div>
<div class="cart-line__blade">
<span class="cart-line__blade-swatch" style="--swatch: #FF7A2E; --swatch-glow: rgba(255,122,46,0.7);"></span>
Ember-orange<span class="sep">·</span>Neopixel<span class="sep">·</span>36″<span class="sep">·</span><span class="flag">Duelling</span>
</div>
<div class="cart-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="cart-line__right">
<div class="stepper">
<button class="stepper__btn">−</button>
<input class="stepper__value" value="1" readonly>
<button class="stepper__btn">+</button>
</div>
<div class="cart-line__prices">
<div class="cart-line__unit">Unit<span class="val">$459.99</span></div>
<div class="cart-line__total">$459.99</div>
</div>
</div>
</div>
<!-- Line 2: Starkiller SE -->
<div class="cart-line">
<div class="cart-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg');"></div>
<div class="cart-line__body">
<div class="cart-line__name">Starkiller SE Lightsaber <span class="core">— Proffie 2.2</span></div>
<div class="cart-line__blade">
<span class="cart-line__blade-swatch" style="--swatch: #E63929; --swatch-glow: rgba(230,57,41,0.7);"></span>
Red<span class="sep">·</span>Neopixel<span class="sep">·</span>32″<span class="sep">·</span><span class="flag">Duelling</span>
</div>
<div class="cart-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="cart-line__right">
<div class="stepper">
<button class="stepper__btn">−</button>
<input class="stepper__value" value="1" readonly>
<button class="stepper__btn">+</button>
</div>
<div class="cart-line__prices">
<div class="cart-line__unit">Unit<span class="val">$299.99</span></div>
<div class="cart-line__total">$299.99</div>
</div>
</div>
</div>
<!-- Delivery options for Bay 1 -->
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<div class="delivery-options">
<div class="delivery-options__legend">Delivery for Assembly Bay 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>
</fieldset>
<!-- Assembly Bay 2 -->
<fieldset class="bay-group">
<legend class="bay-group__legend">
<span class="bay-group__legend-title">Assembly Bay <span class="idx">2</span> of <span class="idx">2</span></span>
<span class="bay-group__legend-eta">
<span class="facility">Factory-direct</span>
<span class="sep">·</span>
Arriving <strong>25 August – 2 September</strong>
<span class="free">FREE</span>
</span>
</legend>
<!-- Line 3: Mace Windu SE -->
<div class="cart-line">
<div class="cart-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="cart-line__body">
<div class="cart-line__name">Mace Windu SE Duelling Lightsaber <span class="core">— S-RGB</span></div>
<div class="cart-line__blade">
<span class="cart-line__blade-swatch" style="--swatch: #8A3EE8; --swatch-glow: rgba(138,62,232,0.7);"></span>
Purple<span class="sep">·</span>Baselit<span class="sep">·</span>32″
</div>
<div class="cart-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="cart-line__right">
<div class="stepper">
<button class="stepper__btn">−</button>
<input class="stepper__value" value="1" readonly>
<button class="stepper__btn">+</button>
</div>
<div class="cart-line__prices">
<div class="cart-line__unit">Unit<span class="val">$164.99</span></div>
<div class="cart-line__total">$164.99</div>
</div>
</div>
</div>
<!-- Delivery options for Bay 2 -->
<div class="delivery-options">
<div class="delivery-options__legend">Delivery for Assembly Bay 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>
<p class="bay-group__note">Ships direct from the workshop floor, tracked worldwide. Every hilt is played, tuned, and tested before dispatch.</p>
</fieldset>
</div>
<!-- ─── RIGHT COLUMN: sticky order summary (transparency-first) ─── -->
<a id="tf-other-4" data-tf-family="other" style="display:contents"></a>
<aside class="cart-main__right">
<div class="order-summary">
<div class="order-summary__legend">Order <span class="accent">Summary</span></div>
<!-- Cost table -->
<div class="summary-rows">
<div class="summary-row">
<span class="summary-row__label">Subtotal</span>
<span class="summary-row__value">$924.97</span>
</div>
<div class="summary-row">
<span class="summary-row__label">
<span class="idx">B1</span>Bay 1 shipping
<span class="facility">· factory-direct</span>
</span>
<span class="summary-row__value summary-row__value--free">Free</span>
</div>
<div class="summary-row">
<span class="summary-row__label">
<span class="idx">B2</span>Bay 2 shipping
<span class="facility">· factory-direct</span>
</span>
<span class="summary-row__value summary-row__value--free">Free</span>
</div>
<div class="summary-row">
<span class="summary-row__label">Discount (SAVE10)</span>
<span class="summary-row__value summary-row__value--discount">−$92.50</span>
</div>
<div class="summary-row">
<span class="summary-row__label">Tax</span>
<span class="summary-row__value summary-row__value--muted">Shown at checkout</span>
</div>
</div>
<div class="summary-divider"></div>
<!-- BIG estimated total — the dominant moment -->
<div class="summary-total">
<span class="summary-total__label">Estimated total</span>
<span class="summary-total__value">$832.47</span>
</div>
<!-- BNPL preview -->
<div class="summary-bnpl">
<div class="summary-bnpl__head">
<span class="summary-bnpl__text">Or 4 × <span class="amt">$208</span> with <span class="brand">Klarna</span></span>
<span class="summary-bnpl__tag">Coming soon</span>
</div>
<span class="summary-bnpl__sub">Currently under review with our shipping partners.</span>
</div>
<!-- Loyalty earned -->
<div class="summary-loyalty-earn">
<span><span class="glyph">+</span>You'll earn</span>
<span class="val">240 points on this order</span>
</div>
<div class="summary-divider summary-divider--hairline"></div>
<!-- Primary CTA -->
<button class="checkout-cta">
<span>Secure Checkout</span>
<span class="checkout-cta__arrow">→</span>
</button>
<!-- Trust badges -->
<a id="tf-trust-chip-strip-2" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="trust-badges">
<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>
<div class="trust-badges__pay">
<span>Visa</span>
<span>Mastercard</span>
<span>Amex</span>
<span>Apple Pay</span>
<span>Google Pay</span>
<span>Klarna <span class="soon">Soon</span></span>
</div>
<p class="trust-note">Free returns within 30 days. Duty and taxes calculated at checkout.</p>
</div>
<!-- Options accordion — collapsed by default so it doesn't compete with the total -->
<div class="options-accordion">
<div class="options-accordion__hint">More options</div>
<!-- Row 1: Discount code (collapsed) -->
<div class="accordion-row">
<div class="accordion-row__head">
<span class="accordion-row__caret">▸</span>
<span class="accordion-row__label">Have a discount code?</span>
</div>
</div>
<!-- Row 2: Loyalty points (collapsed) -->
<div class="accordion-row">
<div class="accordion-row__head">
<span class="accordion-row__caret">▸</span>
<span class="accordion-row__label">
Apply loyalty points
<span class="accordion-row__meta">You have <strong>2,400 points</strong> ($24 value)</span>
</span>
</div>
</div>
<!-- Row 3: Gift wrap (EXPANDED — demonstrates the pattern) -->
<div class="accordion-row accordion-row--open">
<div class="accordion-row__head">
<span class="accordion-row__caret accordion-row__caret--open">▸</span>
<span class="accordion-row__label">
Add gift wrap + message
</span>
<span class="accordion-row__price">$4.99</span>
</div>
<div class="accordion-row__body">
<div class="giftwrap-toggle-row">
<span class="toggle-box toggle-box--checked"></span>
<div class="toggle-copy">
<div class="toggle-title">Gift-wrap this order</div>
<div class="toggle-sub">Kraft-paper wrap in ARTSABERS ember sleeve. Discreet packing slip — no prices on the receipt.</div>
</div>
</div>
<div class="giftwrap-textarea-wrap">
<span class="giftwrap-textarea-wrap__label">Message on the gift card</span>
<textarea class="giftwrap-textarea" placeholder="Optional gift message · appears on your gift card">May the Force be with you — from Dad. Happy 18th, kid.</textarea>
<span class="giftwrap-counter">62 / 240</span>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</section>
<!-- ═════ 4. Cross-sell strip — Complete your setup ═════ -->
<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>
<!-- ═════ 5. 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>
<!-- ═════ 6. 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>