<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cart — ARTSABERS · Variant F · The Focused Cart</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: 1360px; 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 — Variant F: the smallest of any variant
Reused shape from MAS51 (cart-header block), compact modifier
============================================================ */
.cart-header {
position: relative;
min-height: 190px;
max-height: 220px;
background:
radial-gradient(ellipse 55% 60% at 3% 10%, rgba(255,122,46,0.13), 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.30) 0%, rgba(6,6,6,0.15) 40%, rgba(6,6,6,0.50) 100%),
radial-gradient(60% 90% at 92% 40%, rgba(255,122,46,0.07), 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: 32px 0 22px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 190px;
}
.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(40px, 5.6vw, 64px);
line-height: 0.98;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ember);
margin-top: 2px;
}
.cart-header__desc {
font-family: var(--font-body);
font-size: 14px;
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 10px; opacity: 0.7; }
.cart-header__spacer { flex: 1; }
.cart-header__chips {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: center;
padding-top: 14px;
border-top: 1px solid rgba(250,250,250,0.08);
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--chrome-warm);
}
.cart-header__chip {
display: inline-flex; align-items: center; gap: 10px;
padding: 0 20px;
color: var(--chrome-warm);
}
.cart-header__chip:not(:last-child)::after {
content: '';
width: 3px; height: 3px;
background: var(--ember);
border-radius: 50%;
margin-left: 20px;
box-shadow: 0 0 8px rgba(255,122,46,0.9);
}
.cart-header__chip:first-child { padding-left: 0; }
.cart-header__chip .dot {
width: 5px; height: 5px;
background: var(--ember);
border-radius: 50%;
box-shadow: 0 0 8px rgba(255,122,46,0.9);
}
/* ============================================================
2. FREE GIFT NOTE — Variant F: passive one-liner only
NEW block: gift-note. NO banner, NO picker.
Sits directly above the shipment groups, ~40px tall.
============================================================ */
.gift-note {
position: relative;
background:
linear-gradient(180deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0.85) 100%),
var(--carbon);
border-top: 1px solid rgba(255,122,46,0.14);
border-bottom: 1px solid rgba(255,122,46,0.14);
}
.gift-note__inner {
display: flex;
align-items: center;
gap: 14px;
min-height: 40px;
padding: 10px 0;
font-family: var(--font-display);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-warm);
}
.gift-note__icon {
width: 22px; height: 22px;
display: inline-grid; place-items: center;
color: var(--ember);
border: 1px solid rgba(255,122,46,0.45);
background: rgba(255,122,46,0.08);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
flex: 0 0 22px;
}
.gift-note__icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.gift-note__text .item { color: var(--chrome-highlight); font-weight: 500; }
.gift-note__text .sep { color: var(--ember); margin: 0 10px; opacity: 0.8; }
.gift-note__change {
color: var(--chrome-dim);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
border-bottom: 1px dotted rgba(184,176,166,0.5);
padding-bottom: 1px;
margin-left: auto;
}
.gift-note__change:hover { color: var(--ember); border-bottom-color: var(--ember); }
/* ============================================================
3. MAIN CART AREA — Variant F: 2-col split, compact rhythm
============================================================ */
.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.05), 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: 44px 0 72px;
isolation: isolate;
}
.cart-main > * { position: relative; z-index: 1; }
.cart-main__layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 40px;
align-items: start;
}
/* ---------- Left-column head row (compact) ---------- */
.cart-main__head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 16px;
margin-bottom: 32px;
border-bottom: 1px solid rgba(250,250,250,0.06);
}
.cart-main__head-title {
font-family: var(--font-display);
font-size: 12px;
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: 4px;
}
.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); }
/* ---------- Shipment content-group (MAS52 fieldset border pattern) ---------- */
.shipment-group {
border: 1px solid var(--hull-edge);
padding: 24px 28px 26px;
margin-bottom: 26px;
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);
}
.shipment-group__legend {
display: flex;
align-items: baseline;
gap: 12px;
padding: 0 12px;
margin-inline-start: -4px;
margin-top: -40px;
margin-bottom: 18px;
background: var(--carbon);
width: fit-content;
}
.shipment-group__legend-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
}
.shipment-group__legend-title .idx {
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.shipment-group__legend-eta {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
padding-left: 12px;
border-left: 1px solid rgba(184,176,166,0.25);
white-space: nowrap;
}
.shipment-group__legend-eta strong { color: var(--chrome-warm); font-weight: 500; margin: 0 4px; }
.shipment-group__legend-eta .free { color: var(--ember); font-weight: 600; margin-left: 8px; letter-spacing: 0.18em; }
.shipment-group__lede {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
font-style: italic;
margin-bottom: 4px;
padding-left: 16px;
position: relative;
line-height: 1.5;
}
.shipment-group__lede::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);
}
/* ============================================================
COMPOSITE LINE ITEM — Variant F: WC parent + child grammar
NEW block: composite-line — parent row (hilt) + indented
child row (blade component). Child has NO qty/price/actions.
============================================================ */
.composite-line {
border-bottom: 1px solid rgba(250,250,250,0.06);
}
.composite-line:last-of-type { border-bottom: none; }
/* Parent row */
.composite-line__parent {
display: grid;
grid-template-columns: 100px 1fr auto;
gap: 22px;
padding: 20px 0 12px;
align-items: flex-start;
}
.composite-line__media {
width: 100px; height: 100px;
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);
}
.composite-line__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.composite-line__name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--chrome-highlight);
line-height: 1.2;
}
.composite-line__name .core {
color: var(--chrome-warm);
font-weight: 500;
letter-spacing: 0.04em;
}
.composite-line__actions {
display: flex;
gap: 18px;
margin-top: 4px;
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
}
.composite-line__actions a {
border-bottom: 1px dotted rgba(184,176,166,0.4);
padding-bottom: 1px;
}
.composite-line__actions a:hover { color: var(--ember); border-bottom-color: var(--ember); }
.composite-line__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
min-width: 150px;
}
.composite-line__total {
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Child row (blade component) — indented, no qty/price/actions */
.composite-line__child {
display: grid;
grid-template-columns: 60px 1fr;
gap: 22px;
padding: 0 0 20px 40px;
align-items: center;
position: relative;
}
.composite-line__child::before {
content: '';
position: absolute;
left: 16px; top: 30px;
width: 16px; height: 1px;
background: rgba(255,122,46,0.35);
box-shadow: 0 0 6px rgba(255,122,46,0.5);
}
.composite-line__child::after {
content: '';
position: absolute;
left: 16px; top: 0; bottom: 30px;
width: 1px;
background: rgba(255,122,46,0.18);
}
/* Blade slot — CSS-authored: dark carbon ground + blade glow + silhouette */
.blade-slot {
width: 60px; height: 60px;
background-color: var(--hull-panel-dark);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.06),
inset 0 0 0 1px rgba(0,0,0,0.4),
inset 0 0 18px var(--blade-glow, rgba(255,122,46,0.5));
position: relative;
overflow: hidden;
}
.blade-slot::before {
/* Blade silhouette — vertical bar with soft glow */
content: '';
position: absolute;
left: 50%;
top: 8px; bottom: 8px;
width: 6px;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--blade-tip, #FFB347) 0%, var(--blade, #FF7A2E) 45%, var(--blade-hilt, #8B2E08) 100%);
box-shadow:
0 0 8px var(--blade-glow, rgba(255,122,46,0.9)),
0 0 16px var(--blade-glow, rgba(255,122,46,0.6));
opacity: 0.92;
}
.blade-slot::after {
/* Hilt base at the bottom */
content: '';
position: absolute;
left: 50%;
bottom: 4px;
width: 14px; height: 5px;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--hull-edge) 0%, var(--hull-panel-dark) 100%);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.25);
}
.composite-line__child-body { display: flex; flex-direction: column; gap: 4px; }
.composite-line__child-label {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.20em;
color: var(--ember);
}
.composite-line__child-meta {
font-family: var(--font-display);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--chrome-warm);
line-height: 1.35;
}
.composite-line__child-meta .sep { color: var(--chrome-dim); opacity: 0.6; margin: 0 6px; }
.composite-line__child-meta .flag {
color: var(--ember);
font-weight: 600;
letter-spacing: 0.14em;
}
/* ---------- 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: 32px;
height: 36px;
background: transparent;
border: none;
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 15px;
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: 40px;
text-align: center;
background: transparent;
border: none;
color: var(--chrome-highlight);
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
font-variant-numeric: tabular-nums;
outline: none;
}
/* ---------- Delivery single line (Variant F: no radios) ---------- */
.shipment-delivery {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255,122,46,0.16);
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-warm);
flex-wrap: wrap;
}
.shipment-delivery__label {
color: var(--chrome-dim);
letter-spacing: 0.18em;
}
.shipment-delivery__sep { color: var(--ember); opacity: 0.6; }
.shipment-delivery__mode { color: var(--chrome-highlight); font-weight: 500; }
.shipment-delivery__free { color: var(--ember); font-weight: 600; letter-spacing: 0.18em; }
.shipment-delivery__change {
color: var(--chrome-dim);
border-bottom: 1px dotted rgba(184,176,166,0.5);
padding-bottom: 1px;
margin-left: auto;
font-size: 11px;
}
.shipment-delivery__change:hover { color: var(--ember); border-bottom-color: var(--ember); }
/* ============================================================
ORDER SUMMARY — Variant F: ultra-lean, labelled "Total"
Reuses the fieldset-border pattern; contents ultra-compact.
============================================================ */
.order-summary {
position: sticky;
top: 24px;
border: 1px solid var(--hull-edge);
padding: 30px 26px 26px;
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 12px;
margin-inline-start: -4px;
margin-top: -44px;
margin-bottom: 20px;
background: var(--carbon);
width: fit-content;
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ember);
}
/* Cost table (ultra compact) */
.summary-rows { display: flex; flex-direction: column; gap: 8px; }
.summary-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-warm);
}
.summary-row__label {
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.summary-row__value {
font-family: var(--font-display);
font-size: 13px;
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: 11px; font-weight: 600; }
.summary-row__value--discount { color: var(--ember); }
.summary-row__value--muted { color: var(--chrome-dim); font-size: 11px; 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: 16px 0 14px;
opacity: 0.6;
}
.summary-divider--hairline {
background: rgba(250,250,250,0.08);
opacity: 1;
margin: 16px 0 14px;
}
/* Total — the largest ember on the page */
.summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0 2px;
}
.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;
}
/* Loyalty earned line — kept ultra small */
.summary-loyalty-earn {
display: flex;
justify-content: flex-end;
align-items: baseline;
gap: 6px;
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-dim);
margin-top: 6px;
}
.summary-loyalty-earn .glyph { color: var(--ember); font-weight: 700; }
.summary-loyalty-earn .val { color: var(--ember); font-variant-numeric: tabular-nums; font-weight: 500; }
/* Coupon — VISIBLE above the CTA, with applied chip */
.coupon {
display: flex;
flex-direction: column;
gap: 10px;
}
.coupon__label {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.coupon__row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.coupon__input {
background: var(--bg-input);
border: none;
border-bottom: 1px solid var(--hull-edge);
padding: 10px 12px;
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-warm);
outline: none;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.04);
}
.coupon__input::placeholder { color: var(--chrome-dim); opacity: 0.7; }
.coupon__input:focus { border-bottom-color: var(--ember); box-shadow: inset 0 1px 0 rgba(250,250,250,0.04), var(--input-focus-glow); }
.coupon__apply {
padding: 0 16px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
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);
}
.coupon__apply:hover { color: var(--on-primary-fixed); background: var(--ember); border-color: var(--ember); box-shadow: var(--ember-glow-sm); }
.coupon__chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
background: rgba(255,122,46,0.10);
border: 1px solid rgba(255,122,46,0.45);
color: var(--ember);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
align-self: flex-start;
box-shadow: inset 0 1px 0 rgba(255,179,71,0.14);
}
.coupon__chip::before {
content: '';
width: 6px; height: 6px;
background: var(--ember);
border-radius: 50%;
box-shadow: 0 0 6px rgba(255,122,46,0.9);
}
.coupon__chip .code { color: var(--chrome-highlight); font-weight: 700; }
.coupon__chip .sep { color: var(--chrome-dim); opacity: 0.6; }
.coupon__chip .val { color: var(--ember); font-variant-numeric: tabular-nums; }
.coupon__chip .remove {
color: var(--chrome-dim);
border-bottom: 1px dotted rgba(184,176,166,0.5);
padding-bottom: 1px;
cursor: pointer;
letter-spacing: 0.16em;
}
.coupon__chip .remove:hover { color: var(--forge-red); border-bottom-color: var(--forge-red); }
/* Trust row above CTA — SSL padlock prominent + two chips */
.trust-row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 12px;
background: rgba(6,6,6,0.55);
border: 1px solid rgba(255,122,46,0.20);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.05);
}
.trust-row__ssl {
width: 32px; height: 32px;
display: inline-grid; place-items: center;
color: var(--ember);
background: rgba(255,122,46,0.10);
border: 1px solid rgba(255,122,46,0.55);
box-shadow:
inset 0 1px 0 rgba(255,179,71,0.30),
0 0 14px rgba(255,122,46,0.35);
flex: 0 0 32px;
}
.trust-row__ssl svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.trust-row__chips {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.trust-row__chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--chrome-warm);
}
.trust-row__chip .tick {
color: var(--ember);
font-weight: 700;
font-size: 11px;
}
/* Primary CTA — Variant F: terse "Checkout →" */
.checkout-cta {
margin-top: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 18px 20px;
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); }
/* Below-CTA line: cart persistence signal */
.summary-persist {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-display);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
}
.summary-persist .dot { color: var(--ember); opacity: 0.8; }
.summary-persist a {
color: var(--chrome-warm);
border-bottom: 1px dotted rgba(184,176,166,0.5);
padding-bottom: 1px;
}
.summary-persist a:hover { color: var(--ember); border-bottom-color: var(--ember); }
/* Payment icons row — no BNPL, no Klarna */
.pay-row {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(250,250,250,0.06);
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.pay-row 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;
}
/* ============================================================
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 340px; gap: 28px; }
.site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
.cart-header__title { font-size: clamp(36px, 8vw, 52px); }
.cart-main__layout { grid-template-columns: 1fr; gap: 32px; }
.order-summary { position: static; }
.gift-note__inner { flex-wrap: wrap; }
.gift-note__change { margin-left: 0; }
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
.site-nav__links { display: none; }
.cart-header { min-height: 180px; }
.cart-header__inner { padding: 24px 0 18px; min-height: 180px; }
.cart-header__chips { flex-direction: column; align-items: flex-start; gap: 10px; }
.cart-header__chip { padding: 0; }
.cart-header__chip:not(:last-child)::after { display: none; }
.shipment-group { padding: 22px 18px 22px; }
.shipment-group__legend { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 10px; }
.shipment-group__legend-eta { border-left: none; padding-left: 0; }
.composite-line__parent { grid-template-columns: 80px 1fr; gap: 14px; }
.composite-line__right { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
.composite-line__child { padding-left: 24px; gap: 14px; }
.composite-line__child::before { left: 8px; }
.composite-line__child::after { left: 8px; }
.shipment-delivery { gap: 8px; }
.shipment-delivery__change { margin-left: 0; }
.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 — Variant F: compact ═════ -->
<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">Cart</h1>
<p class="cart-header__desc">
<strong>3 items</strong><span class="dot">·</span><strong>2 shipments</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">30-day money-back</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 note — Variant F: passive one-liner only ═════ -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section class="gift-note">
<div class="container gift-note__inner">
<span class="gift-note__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M3 8h18v4H3zM4 12v9h16v-9M12 8v13M8 8a2 2 0 0 1 4-2 2 2 0 0 1 4 2"/></svg>
</span>
<span class="gift-note__text">
Free <span class="item">Silver Coupler</span> included with Shipment 1
</span>
<a href="#" class="gift-note__change">Change →</a>
</div>
</section>
<!-- ═════ 3. Main cart area — 2-column split ═════ -->
<section class="cart-main">
<div class="container cart-main__layout">
<!-- ─── LEFT COLUMN: shipment 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> shipments</div>
<a href="#" class="cart-main__continue">← Continue browsing</a>
</div>
<!-- Shipment 1 -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<fieldset class="shipment-group">
<legend class="shipment-group__legend">
<span class="shipment-group__legend-title">Shipment <span class="idx">1</span> of <span class="idx">2</span></span>
<span class="shipment-group__legend-eta">
Arriving <strong>12–14 August</strong>
<span class="free">FREE</span>
</span>
</legend>
<p class="shipment-group__lede">Ships direct from the workshop floor.</p>
<!-- Composite line 1: Carbon Strike Lightsaber (parent) + blade (child) -->
<div class="composite-line">
<div class="composite-line__parent">
<div class="composite-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg');"></div>
<div class="composite-line__body">
<a href="https://artsabers.com/product/carbon-strike-lightsaber/" class="composite-line__name">Carbon Strike Lightsaber <span class="core">— Xenopixel V3</span></a>
<div class="composite-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="composite-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="composite-line__total">$459.99</div>
</div>
</div>
<div class="composite-line__child">
<div class="blade-slot" style="--blade-tip: #FFB347; --blade: #FF7A2E; --blade-hilt: #8B2E08; --blade-glow: rgba(255,122,46,0.85);"></div>
<div class="composite-line__child-body">
<span class="composite-line__child-label">Component</span>
<div class="composite-line__child-meta">
Blade — Ember-orange<span class="sep">·</span>Neopixel<span class="sep">·</span>36″<span class="sep">·</span><span class="flag">Duelling</span>
</div>
</div>
</div>
</div>
<!-- Composite line 2: Starkiller SE Lightsaber (parent) + blade (child) -->
<div class="composite-line">
<div class="composite-line__parent">
<div class="composite-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg');"></div>
<div class="composite-line__body">
<a href="https://artsabers.com/product/starkiller-se-lightsaber/" class="composite-line__name">Starkiller SE Lightsaber <span class="core">— Proffie 2.2</span></a>
<div class="composite-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="composite-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="composite-line__total">$299.99</div>
</div>
</div>
<div class="composite-line__child">
<div class="blade-slot" style="--blade-tip: #FFAFAF; --blade: #E63929; --blade-hilt: #5A0F0A; --blade-glow: rgba(230,57,41,0.85);"></div>
<div class="composite-line__child-body">
<span class="composite-line__child-label">Component</span>
<div class="composite-line__child-meta">
Blade — Red<span class="sep">·</span>Neopixel<span class="sep">·</span>32″<span class="sep">·</span><span class="flag">Duelling</span>
</div>
</div>
</div>
</div>
<!-- Delivery: single compact line -->
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<div class="shipment-delivery">
<span class="shipment-delivery__label">Delivery</span>
<span class="shipment-delivery__sep">·</span>
<span class="shipment-delivery__mode">Standard</span>
<span class="shipment-delivery__sep">·</span>
<span>12–14 Aug</span>
<span class="shipment-delivery__sep">·</span>
<span class="shipment-delivery__free">FREE</span>
<a href="#" class="shipment-delivery__change">Change →</a>
</div>
</fieldset>
<!-- Shipment 2 -->
<fieldset class="shipment-group">
<legend class="shipment-group__legend">
<span class="shipment-group__legend-title">Shipment <span class="idx">2</span> of <span class="idx">2</span></span>
<span class="shipment-group__legend-eta">
Arriving <strong>25 August – 2 September</strong>
<span class="free">FREE</span>
</span>
</legend>
<p class="shipment-group__lede">Assembly begins on payment.</p>
<!-- Composite line 3: Mace Windu SE Duelling Lightsaber (parent) + blade (child) -->
<div class="composite-line">
<div class="composite-line__parent">
<div class="composite-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="composite-line__body">
<a href="https://artsabers.com/product/mace-windu-se-duelling-lightsaber/" class="composite-line__name">Mace Windu SE Duelling Lightsaber <span class="core">— S-RGB</span></a>
<div class="composite-line__actions">
<a href="#">Save for later</a>
<a href="#">Remove</a>
</div>
</div>
<div class="composite-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="composite-line__total">$164.99</div>
</div>
</div>
<div class="composite-line__child">
<div class="blade-slot" style="--blade-tip: #D9B0FF; --blade: #8A3EE8; --blade-hilt: #3A175E; --blade-glow: rgba(138,62,232,0.85);"></div>
<div class="composite-line__child-body">
<span class="composite-line__child-label">Component</span>
<div class="composite-line__child-meta">
Blade — Purple<span class="sep">·</span>Baselit<span class="sep">·</span>32″
</div>
</div>
</div>
</div>
<!-- Delivery: single compact line -->
<div class="shipment-delivery">
<span class="shipment-delivery__label">Delivery</span>
<span class="shipment-delivery__sep">·</span>
<span class="shipment-delivery__mode">Standard</span>
<span class="shipment-delivery__sep">·</span>
<span>25 Aug – 2 Sep</span>
<span class="shipment-delivery__sep">·</span>
<span class="shipment-delivery__free">FREE</span>
<a href="#" class="shipment-delivery__change">Change →</a>
</div>
</fieldset>
</div>
<!-- ─── RIGHT COLUMN: sticky order summary (ultra-lean) ─── -->
<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">Total</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">Shipping</span>
<span class="summary-row__value summary-row__value--free">Free</span>
</div>
<div class="summary-row">
<span class="summary-row__label">Discount</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">At checkout</span>
</div>
</div>
<div class="summary-divider"></div>
<!-- Total — the largest ember moment -->
<div class="summary-total">
<span class="summary-total__label">Total</span>
<span class="summary-total__value">$832.47</span>
</div>
<div class="summary-loyalty-earn">
<span class="glyph">+</span><span class="val">240 points</span><span>earned</span>
</div>
<div class="summary-divider summary-divider--hairline"></div>
<!-- Coupon — VISIBLE with applied chip -->
<a id="tf-form-1" data-tf-family="form" style="display:contents"></a>
<div class="coupon">
<span class="coupon__label">Discount code</span>
<div class="coupon__row">
<input class="coupon__input" type="text" placeholder="Enter code">
<button class="coupon__apply">Apply</button>
</div>
<span class="coupon__chip">
<span class="code">SAVE10</span>
<span class="sep">·</span>
<span class="val">−$92.50</span>
<span class="sep">·</span>
<a href="#" class="remove">Remove</a>
</span>
</div>
<div class="summary-divider summary-divider--hairline"></div>
<!-- Trust row directly above CTA -->
<a id="tf-trust-chip-strip-2" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="trust-row">
<span class="trust-row__ssl" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M6 11V8a6 6 0 0 1 12 0v3M5 11h14v10H5zM12 15v2"/></svg>
</span>
<div class="trust-row__chips">
<span class="trust-row__chip"><span class="tick">✓</span>SSL secure checkout</span>
<span class="trust-row__chip"><span class="tick">✓</span>30-day money-back</span>
<span class="trust-row__chip"><span class="tick">✓</span>1-year duelling warranty</span>
</div>
</div>
<!-- Primary CTA — terse "Checkout →" -->
<button class="checkout-cta">
<span>Checkout</span>
<span class="checkout-cta__arrow">→</span>
</button>
<!-- Cart persistence signal directly below CTA -->
<div class="summary-persist">
<span>Cart auto-saved</span>
<span class="dot">·</span>
<a href="#">Sign in to sync</a>
</div>
<!-- Payment icons — NO BNPL, NO Klarna -->
<div class="pay-row">
<span>Visa</span>
<span>Mastercard</span>
<span>Amex</span>
<span>Apple Pay</span>
<span>Google Pay</span>
</div>
</div>
</aside>
</div>
</section>
<!-- ═════ 4. NO cross-sell strip — deliberately absent (Variant F) ═════ -->
<!-- ═════ 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>