← ARTSABERS

ARTSABERS — Cart Build Brief · Variant D · The Shipment Cart

MAS57 Approved Cart ARTSABERS
Open in New Tab ✓ Accepted
Template type: WooCommerce — ready for /wire-template.

Mockup HTML

Open in New Tab 
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Cart — ARTSABERS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* ---------- Tokens (verbatim from SAS1 Kyber Hull styleguide) ---------- */
:root {
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;

  /* Ember ombre */
  --ember-glow: #FFB347;
  --ember-bright: #FF9540;
  --ember: #FF7A2E;
  --ember-forge: #E85D18;
  --ember-deep: #D14810;
  --ember-smoulder: #8B2E08;
  --ember-scar: #5A1A00;
  --on-primary-fixed: #2A0800;

  /* Hull ladder */
  --carbon: #060606;
  --void: #0A0A0A;
  --charcoal: #141414;
  --charcoal-warm: #161412;
  --hull-panel: #1A1A1A;
  --hull-panel-lift: #242424;
  --hull-panel-dark: #0F0F0F;
  --hull-chrome-shadow: #2E2E2E;
  --hull-edge: #363636;

  /* Chrome */
  --chrome-highlight: #FAFAFA;
  --chrome-glint: #E8E4DD;
  --chrome-warm: #F5F0E8;
  --chrome-dim: #B8B0A6;

  /* MAS52 forge-red (error) */
  --forge-red: #E63929;
  --forge-red-deep: #A82212;

  /* Surface semantics */
  --bg-page: var(--charcoal);
  --bg-panel: var(--hull-panel);
  --bg-input: var(--hull-panel-lift);
  --bg-panel-dark: var(--hull-panel-dark);
  --text-primary: var(--chrome-warm);
  --text-dim: var(--chrome-dim);
  --text-heading: var(--chrome-highlight);
  --text-on-ember: var(--on-primary-fixed);

  /* Shadow tokens */
  --panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
  --panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 12px 32px -8px rgba(0,0,0,0.95);
  --ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
  --ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
  --input-focus-glow: 0 0 12px rgba(255,122,46,0.35);
  --chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--carbon); color: var(--chrome-warm); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }

button { cursor: pointer; }

fieldset { border: none; padding: 0; margin: 0; min-width: 0; }

legend { padding: 0; }

/* ---------- Utilities ---------- */
.container { max-width: 1440px; margin: 0 auto; padding: 0 48px; }

.label-sm {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-dim);
}

/* ============================================================
   SITE NAV (reused verbatim from MAS51 shop archive)
   ============================================================ */
.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 — compact (reused from MAS51 archive-header)
   ============================================================ */
.cart-header {
  position: relative;
  min-height: 220px;
  max-height: 260px;
  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: 44px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}

.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(44px, 6.5vw, 76px);
  line-height: 0.98;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-highlight);
  margin-top: 2px;
}

.cart-header__title .accent { color: var(--ember); }

.cart-header__desc {
  max-width: 720px;
  font-family: var(--font-body);
  font-size: 16px;
  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__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 STRIP — restrained pre-selected treatment
   ============================================================ */
.gift-strip {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255,122,46,0.14) 0%, rgba(255,122,46,0.06) 45%, rgba(6,6,6,0.30) 100%),
    var(--carbon);
  padding: 28px 0 30px;
  isolation: isolate;
}

.gift-strip::before,
.gift-strip::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: rgba(255,122,46,0.55);
  box-shadow: 0 0 14px rgba(255,122,46,0.40);
  z-index: 2;
}

.gift-strip::before { top: 0; }

.gift-strip::after { bottom: 0; }

.gift-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 72px;
}

.gift-strip__body {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex: 1;
}

.gift-strip__glyph {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(255,122,46,0.14);
  color: var(--ember);
  border: 1px solid rgba(255,122,46,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,179,71,0.30),
    0 0 24px rgba(255,122,46,0.30);
  flex: 0 0 56px;
}

.gift-strip__glyph svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.gift-strip__text {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--chrome-warm);
  line-height: 1.45;
}

.gift-strip__text .tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--ember);
  margin-right: 12px;
  padding: 3px 10px 3px 0;
  border-right: 1px solid rgba(255,122,46,0.35);
}

.gift-strip__text strong { color: var(--chrome-highlight); font-weight: 600; }

.gift-strip__preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  background: rgba(6,6,6,0.55);
  border: 1px solid rgba(255,122,46,0.35);
  box-shadow: inset 0 1px 0 rgba(255,179,71,0.15);
  flex: 0 0 auto;
}

.gift-strip__preview-media {
  width: 48px; height: 48px;
  background-color: var(--void);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(250,250,250,0.06);
  flex: 0 0 48px;
}

.gift-strip__preview-body { display: flex; flex-direction: column; gap: 3px; }

.gift-strip__preview-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--chrome-highlight);
}

.gift-strip__preview-tag {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--ember);
}

.gift-strip__change {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ember);
  border-bottom: 1px dotted rgba(255,122,46,0.6);
  padding-bottom: 2px;
  white-space: nowrap;
}

.gift-strip__change:hover { border-bottom-style: solid; }

/* ============================================================
   3. MAIN CART AREA (2-column split)
   ============================================================ */
.cart-main {
  position: relative;
  background:
    radial-gradient(ellipse 55% 40% at 3% 4%, rgba(255,122,46,0.13), transparent 55%),
    radial-gradient(ellipse 35% 25% at 97% 96%, rgba(255,122,46,0.06), transparent 55%),
    repeating-linear-gradient(180deg, transparent 0px, transparent 239px, rgba(250,250,250,0.024) 239px, rgba(250,250,250,0.024) 240px),
    linear-gradient(180deg, #0d0d0d 0%, var(--carbon) 25%, var(--void) 70%, #0a0a0a 100%),
    var(--carbon);
  padding: 56px 0 80px;
  isolation: isolate;
}

.cart-main > * { position: relative; z-index: 1; }

.cart-main__layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: start;
}

/* Left-column head row */
.cart-main__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 34px;
  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.8px;
  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); }

/* ---------- Shipment content-group (MAS52 form-fieldset pattern) ---------- */
.shipment-group {
  border: 1px solid var(--hull-edge);
  padding: 30px 34px 32px;
  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);
}

.shipment-group__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 0 14px;
  margin-inline-start: -4px;
  margin-top: -46px;
  margin-bottom: 8px;
  background: var(--carbon);
  width: fit-content;
}

.shipment-group__legend-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  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: 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);
  margin-left: 10px;
  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; }

.shipment-group__lede {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-dim);
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
  margin-bottom: 16px;
  font-style: italic;
}

.shipment-group__lede::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1px;
  background: var(--ember);
  box-shadow: 0 0 4px rgba(255,122,46,0.6);
}

/* ---------- WC composite line item — PARENT row ---------- */
.cart-line {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 24px;
  padding: 22px 0 18px;
  border-top: 1px solid rgba(250,250,250,0.06);
  align-items: flex-start;
  position: relative;
}

.cart-line:first-of-type { border-top: none; padding-top: 8px; }

.cart-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);
}

.cart-line__body { display: flex; flex-direction: column; gap: 8px; 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.15;
}

.cart-line__name .core {
  color: var(--chrome-warm);
  font-weight: 500;
  margin-left: 6px;
}

.cart-line__actions {
  display: flex;
  gap: 22px;
  margin-top: 4px;
  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;
  margin-top: 4px;
}

.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;
}

/* ---------- WC composite line item — CHILD row (blade component) ---------- */
.cart-line--child {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 10px 0 22px 40px;
  border-top: none;
  align-items: center;
  position: relative;
  min-height: 60px;
}

.cart-line--child::before {
  content: '';
  position: absolute;
  left: 22px; top: 0;
  width: 12px; height: 26px;
  border-left: 1px solid rgba(255,122,46,0.28);
  border-bottom: 1px solid rgba(255,122,46,0.28);
}

.cart-line--child::after {
  content: 'COMPONENT';
  position: absolute;
  left: 40px; top: -6px;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--ember);
  background: linear-gradient(180deg, rgba(15,15,15,0) 0%, rgba(15,15,15,0.9) 40%);
  padding: 0 6px 0 0;
  opacity: 0;
}

.blade-slot {
  width: 60px; height: 60px;
  background-color: var(--void);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(250,250,250,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  isolation: isolate;
}

.blade-slot::before {
  /* subtle ambient tint — neutral polycarbonate */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(250,250,250,0.08) 0%, transparent 65%);
  z-index: 1;
}

.blade-slot__silhouette {
  position: absolute;
  left: 50%; top: 8px; bottom: 8px;
  width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(250,250,250,0.92) 0%, rgba(230,225,215,0.78) 45%, rgba(180,175,165,0.62) 100%);
  box-shadow:
    0 0 4px rgba(255,255,255,0.35),
    0 0 10px rgba(255,255,255,0.20),
    0 0 18px rgba(255,255,255,0.10);
  z-index: 2;
}

.blade-slot__silhouette::after {
  /* emitter cap */
  content: '';
  position: absolute;
  left: -3px; right: -3px; bottom: -3px;
  height: 6px;
  background: linear-gradient(180deg, var(--hull-edge) 0%, var(--hull-chrome-shadow) 100%);
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.35);
  z-index: 3;
}

/* Blade slot is neutral polycarbonate — no colour presets needed */
.cart-line__component {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cart-line__component-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ember);
  opacity: 0.85;
}

.cart-line__component-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--chrome-warm);
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.cart-line__component-name strong { color: var(--chrome-highlight); font-weight: 600; }

.cart-line__component-name .sep { color: var(--chrome-dim); margin: 0 8px; opacity: 0.6; }

/* ---------- 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 — single compact line (not radios) ---------- */
.delivery-row {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,122,46,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.delivery-row__body {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--chrome-warm);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.delivery-row__label {
  color: var(--chrome-dim);
  font-weight: 500;
}

.delivery-row__body strong { color: var(--chrome-highlight); font-weight: 600; }

.delivery-row__body .sep { color: var(--chrome-dim); opacity: 0.55; }

.delivery-row__body .free { color: var(--ember); font-weight: 700; letter-spacing: 0.16em; }

.delivery-row__change {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ember);
  border-bottom: 1px dotted rgba(255,122,46,0.5);
  padding-bottom: 1px;
  white-space: nowrap;
}

.delivery-row__change:hover { border-bottom-style: solid; }

/* ============================================================
   DELIVERY OPTIONS — 3-box radio group per shipment (kept for future UI)
   ============================================================ */
.delivery-options {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,122,46,0.18);
}

.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.8px;
  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; }

/* ============================================================
   ORDER SUMMARY (right column, MAS52 fieldset pattern)
   ============================================================ */
.cart-main__right {
  position: sticky;
  top: 24px;
  align-self: start;
}

.order-summary {
  border: 1px solid var(--hull-edge);
  padding: 34px 32px 30px;
  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: 24px;
  background: var(--carbon);
  width: fit-content;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--chrome-highlight);
}

.order-summary__legend .accent { color: var(--ember); }

.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: 10px;
}

.summary-row__label .idx {
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.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: 20px 0 18px;
  opacity: 0.6;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0 0;
}

.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: 34px;
  font-weight: 700;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 0 24px rgba(255,122,46,0.35);
}

.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: 6px;
}

.summary-loyalty-earn .val { color: var(--ember); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- Loyalty redeem — compact teaser (future feature) ---------- */
.loyalty-redeem {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255,122,46,0.05);
  border: 1px solid rgba(255,122,46,0.20);
  box-shadow: inset 0 1px 0 rgba(255,179,71,0.10);
}

.loyalty-redeem__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.loyalty-redeem__title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--chrome-highlight);
}

.loyalty-redeem__tag {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ember);
  padding: 3px 8px;
  background: rgba(255,122,46,0.10);
  border: 1px solid rgba(255,122,46,0.30);
}

.loyalty-redeem__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.loyalty-redeem__balance {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-warm);
}

.loyalty-redeem__balance strong {
  color: var(--chrome-highlight);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.loyalty-redeem__balance .sep { color: var(--chrome-dim); opacity: 0.55; margin: 0 6px; }

.loyalty-redeem__note {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--chrome-dim);
  font-style: italic;
}

/* ---------- Coupon — VISIBLE labelled input + inline Apply + applied chip ---------- */
.coupon-visible {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coupon-visible__label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  font-weight: 500;
}

.coupon-visible__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

.coupon-visible__input {
  background: var(--bg-input);
  border: none;
  border-bottom: 1px solid var(--hull-edge);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--chrome-warm);
  outline: none;
  letter-spacing: 0.04em;
  border-radius: 0;
  transition: border-color 120ms, box-shadow 120ms;
}

.coupon-visible__input::placeholder { color: var(--chrome-dim); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }

.coupon-visible__input:focus {
  border-bottom-color: var(--ember);
  box-shadow: var(--input-focus-glow);
}

.coupon-visible__apply {
  padding: 10px 20px 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--chrome-warm);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--ember);
  border: 1px solid rgba(255,122,46,0.35);
}

.coupon-visible__apply:hover {
  color: var(--on-primary-fixed);
  background: var(--ember);
}

.coupon-visible__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,122,46,0.08);
  border: 1px solid var(--ember);
  box-shadow: inset 0 1px 0 rgba(255,179,71,0.25), 0 0 12px rgba(255,122,46,0.15);
}

.coupon-visible__applied-code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-highlight);
}

.coupon-visible__applied-code::before {
  content: '';
  width: 10px; height: 10px;
  background: var(--ember);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(255,122,46,0.7);
  display: inline-block;
}

.coupon-visible__applied-value {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 0 12px;
}

.coupon-visible__applied-remove {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--chrome-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: 1px dotted rgba(184,176,166,0.5);
  padding-bottom: 1px;
}

.coupon-visible__applied-remove:hover { color: var(--forge-red); border-bottom-color: var(--forge-red); }

/* ---------- Trust row (three prominent chips, directly above CTA) ---------- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px 0 6px;
}

.trust-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  text-align: center;
  background: rgba(255,122,46,0.04);
  border: 1px solid rgba(255,122,46,0.22);
  box-shadow: inset 0 1px 0 rgba(255,179,71,0.10);
}

.trust-chip__glyph {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ember);
}

.trust-chip__glyph svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.trust-chip__title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--chrome-highlight);
  line-height: 1.15;
}

.trust-chip__sub {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--chrome-dim);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* ---------- Secure checkout CTA ---------- */
.checkout-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--on-primary-fixed);
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
  box-shadow: var(--ember-glow-md);
  border: none;
  border-radius: 0;
}

.checkout-cta__arrow {
  font-size: 18px;
  transform: translateY(-1px);
}

/* Persistence signal + payments row (below CTA) */
.persist-note {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--chrome-dim);
  text-align: center;
}

.persist-note .link {
  color: var(--ember);
  border-bottom: 1px dotted rgba(255,122,46,0.5);
  padding-bottom: 1px;
  margin-left: 6px;
}

.persist-note .link:hover { border-bottom-style: solid; }

.pay-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(250,250,250,0.06);
}

.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;
}

/* ============================================================
   INFO CARD — reads-once reassurance ("Good to know")
   Sits below Order Summary in the right column
   ============================================================ */
.info-card {
  margin-top: 20px;
  border: 1px solid var(--hull-edge);
  padding: 30px 28px 26px;
  background: linear-gradient(180deg, rgba(26,26,26,0.45) 0%, rgba(15,15,15,0.60) 100%);
  box-shadow:
    inset 0 1px 0 rgba(250,250,250,0.08),
    0 8px 24px -12px rgba(0,0,0,0.85);
}

.info-card__legend {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-highlight);
  padding: 0 12px;
  margin-inline-start: -4px;
  margin-bottom: 22px;
}

.info-card__legend .accent { color: var(--ember); }

.info-card__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(250,250,250,0.05);
}

.info-item:last-child { padding-bottom: 0; border-bottom: 0; }

.info-item__glyph {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,122,46,0.08);
  color: var(--ember);
  border: 1px solid rgba(255,122,46,0.30);
  box-shadow: inset 0 1px 0 rgba(255,179,71,0.15);
  flex: 0 0 36px;
}

.info-item__glyph svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.info-item__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.info-item__title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--chrome-highlight);
}

.info-item__text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-warm);
  line-height: 1.5;
}

/* ============================================================
   4. CROSS-SELL STRIP
   ============================================================ */
.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: 76px 0 84px;
  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: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(250,250,250,0.06);
}

.cross-sell__title-wrap { display: flex; flex-direction: column; gap: 8px; 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(30px, 3.8vw, 44px);
  line-height: 1.02;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}

.cross-sell__title .accent { color: var(--ember); }

.cross-sell__sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--chrome-warm);
}

.cross-sell__view-all {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ember);
  border-bottom: 1px solid rgba(255,122,46,0.4);
  padding-bottom: 2px;
  white-space: nowrap;
}

.cross-sell__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.accessory-tile {
  background: rgba(20,20,20,0.94);
  backdrop-filter: blur(3px);
  box-shadow: var(--panel-lift);
  display: flex;
  flex-direction: column;
  transition: box-shadow 200ms, transform 200ms;
}

.accessory-tile:hover {
  box-shadow: var(--panel-lift-hover), 0 0 32px rgba(255,122,46,0.18);
  transform: translateY(-3px);
}

.accessory-tile__media {
  aspect-ratio: 1/1;
  background-color: var(--hull-panel-dark);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.accessory-tile__body {
  background: var(--hull-panel-lift);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.accessory-tile__cat {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-dim);
}

.accessory-tile__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--chrome-highlight);
  line-height: 1.2;
  margin-bottom: 4px;
}

.accessory-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dotted rgba(184,176,166,0.2);
}

.accessory-tile__price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}

.accessory-tile__add {
  padding: 8px 14px 9px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-warm);
  border: 1px solid rgba(250,250,250,0.10);
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}

.accessory-tile__add:hover {
  color: var(--on-primary-fixed);
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: var(--ember-glow-sm);
}

/* ============================================================
   5. REINFORCEMENT BAND (reused verbatim 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__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 (compact, 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.8px;
  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); letter-spacing: 0.8px; }
  .gift-strip__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cart-main__layout { grid-template-columns: 1fr; gap: 32px; }
  .cart-main__right { position: static; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .site-nav__links { display: none; }
  .cart-header { min-height: 180px; }
  .cart-header__inner { padding: 32px 0 20px; min-height: 180px; }
  .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; }
  .shipment-group { padding: 26px 18px 22px; }
  .shipment-group__legend { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: -60px; }
  .shipment-group__legend-eta { border-left: none; padding-left: 0; margin-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%; flex-wrap: wrap; }
  .cart-line--child { padding-left: 24px; }
  .cart-line--child::before { left: 8px; }
  .delivery-row { flex-direction: column; align-items: flex-start; }
  .trust-row { grid-template-columns: 1fr; gap: 10px; }
  .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; }
}

/* orbitron-retrofit: title-em italic kill */
[class*="__title"] em, [class*="__title"] i,
[class*="-title"] em, [class*="-title"] i,
[class*="__heading"] em, [class*="__heading"] i,
[class*="-heading"] em, [class*="-heading"] i { font-style: normal; }

/* -- Reconciled from family 14037 canonical 13078:tf-other-3 -- */
/* ---------- Delivery radio group ---------- */
.delivery-options {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,122,46,0.15);
}

.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; }

@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; }
}

/* -- Reconciled from family 13994 canonical 13078:tf-trust-chip-strip-3 -- */
/* ---------- Utilities ---------- */
.container { max-width: 1440px; margin: 0 auto; padding: 0 48px; }

/* ============================================================
   6. REINFORCEMENT BAND (reused verbatim 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;
}

@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; }
  .shipment-group { padding: 28px 20px 24px; }
  .shipment-group__legend { flex-direction: column; align-items: flex-start; gap: 4px; }
  .shipment-group__legend-eta { border-left: none; padding-left: 0; margin-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; }
  .empty-cart { padding: 44px 24px 48px; }
  .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; }
}
/* -- Reconciled from family 14003 canonical 13078:tf-breadcrumb-1 -- */
.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-line__meta .sep { margin: 0 8px; opacity: 0.5; }
</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 (compact, MAS51 pattern) -->
<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 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">UK customer service</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 strip — restrained pre-selected treatment -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section class="gift-strip">
  <div class="container gift-strip__inner">
    <div class="gift-strip__body">
      <span class="gift-strip__glyph" aria-hidden="true">
        <svg viewbox="0 0 24 24"><path d="M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7C8 7 6 3 8 3s4 4 4 4c0-4 2-4 4-4s0 4-4 4z"></path></svg>
      </span>
      <span class="gift-strip__text">
        <span class="tag">Free gift · order $350+</span>
        <strong>Silver Lightsaber Coupler</strong> included with Shipment 1.
      </span>
    </div>
    <div class="gift-strip__preview">
      <div class="gift-strip__preview-media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Silver-coupler-2-1-768x768.jpg');"></div>
      <div class="gift-strip__preview-body">
        <span class="gift-strip__preview-name">Silver Coupler</span>
        <span class="gift-strip__preview-tag">✓ Selected</span>
      </div>
    </div>
    <a href="#" class="gift-strip__change">Change gift →</a>
  </div>
</section>

<!-- 3. Main cart area — 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 sabers</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, tracked worldwide.</p>

        <!-- Composite line 1: Carbon Strike (parent + blade child) -->
        <div class="cart-line">
          <a href="https://artsabers.com/product/carbon-strike-lightsaber/" class="cart-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg');"></a>
          <div class="cart-line__body">
            <a href="https://artsabers.com/product/carbon-strike-lightsaber/" class="cart-line__name">Carbon Strike Lightsaber <span class="core">— Xenopixel V3</span></a>
            <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" aria-label="Decrease quantity">−</button>
              <input class="stepper__value" value="1" readonly>
              <button class="stepper__btn" aria-label="Increase quantity">+</button>
            </div>
            <div class="cart-line__prices">
              <div class="cart-line__total">$459.99</div>
            </div>
          </div>
        </div>
        <div class="cart-line cart-line--child">
          <div class="blade-slot" aria-hidden="true">
            <div class="blade-slot__silhouette"></div>
          </div>
          <div class="cart-line__component">
            <span class="cart-line__component-label">Blade component</span>
            <span class="cart-line__component-name">Blade — <strong>36″</strong> <span class="sep">·</span> Neopixel</span>
          </div>
        </div>

        <!-- Composite line 2: Starkiller SE (parent + blade child) -->
        <div class="cart-line">
          <a href="https://artsabers.com/product/starkiller-se-lightsaber/" class="cart-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg');"></a>
          <div class="cart-line__body">
            <a href="https://artsabers.com/product/starkiller-se-lightsaber/" class="cart-line__name">Starkiller SE Lightsaber <span class="core">— Proffie 2.2</span></a>
            <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" aria-label="Decrease quantity">−</button>
              <input class="stepper__value" value="1" readonly>
              <button class="stepper__btn" aria-label="Increase quantity">+</button>
            </div>
            <div class="cart-line__prices">
              <div class="cart-line__total">$299.99</div>
            </div>
          </div>
        </div>
        <div class="cart-line cart-line--child">
          <div class="blade-slot" aria-hidden="true">
            <div class="blade-slot__silhouette"></div>
          </div>
          <div class="cart-line__component">
            <span class="cart-line__component-label">Blade component</span>
            <span class="cart-line__component-name">Blade — <strong>32″</strong> <span class="sep">·</span> Neopixel</span>
          </div>
        </div>

        <a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
        <div class="delivery-options">
          <div class="delivery-options__legend">Delivery for this shipment</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>

      <!-- 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 at the workshop on payment. Tracked from dispatch onwards.</p>

        <!-- Composite line 3: Mace Windu SE (parent + blade child) -->
        <div class="cart-line">
          <a href="https://artsabers.com/product/mace-windu-se-duelling-lightsaber/" class="cart-line__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg');"></a>
          <div class="cart-line__body">
            <a href="https://artsabers.com/product/mace-windu-se-duelling-lightsaber/" class="cart-line__name">Mace Windu SE Duelling Lightsaber <span class="core">— S-RGB</span></a>
            <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" aria-label="Decrease quantity">−</button>
              <input class="stepper__value" value="1" readonly>
              <button class="stepper__btn" aria-label="Increase quantity">+</button>
            </div>
            <div class="cart-line__prices">
              <div class="cart-line__total">$164.99</div>
            </div>
          </div>
        </div>
        <div class="cart-line cart-line--child">
          <div class="blade-slot" aria-hidden="true">
            <div class="blade-slot__silhouette"></div>
          </div>
          <div class="cart-line__component">
            <span class="cart-line__component-label">Blade component</span>
            <span class="cart-line__component-name">Blade — <strong>32″</strong> <span class="sep">·</span> Baselit</span>
          </div>
        </div>

        <div class="delivery-options">
          <div class="delivery-options__legend">Delivery for Shipment 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>
      </fieldset>

    </div>

    <!-- RIGHT COLUMN: sticky order summary -->
    <a id="tf-other-4" data-tf-family="other" style="display:contents"></a>
    <aside class="cart-main__right">
      <fieldset class="order-summary">
        <legend class="order-summary__legend">Order <span class="accent">Summary</span></legend>

        <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">S1</span>Shipment 1 shipping</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">S2</span>Shipment 2 shipping</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">At checkout</span>
          </div>
        </div>

        <div class="summary-divider"></div>

        <div class="summary-total">
          <span class="summary-total__label">Estimated total</span>
          <span class="summary-total__value">$832.47</span>
        </div>
        <div class="summary-loyalty-earn">
          <span>You'll earn</span>
          <span class="val">+240 points on this order</span>
        </div>

        <div class="summary-divider"></div>

        <!-- Loyalty redeem — compact teaser for the future feature -->
        <div class="loyalty-redeem">
          <div class="loyalty-redeem__head">
            <span class="loyalty-redeem__title">Loyalty points</span>
            <span class="loyalty-redeem__tag">Coming soon</span>
          </div>
          <div class="loyalty-redeem__body">
            <span class="loyalty-redeem__balance"><strong>2,400 points</strong> available <span class="sep">·</span> $24 value</span>
            <span class="loyalty-redeem__note">Redeem toward your next order once live.</span>
          </div>
        </div>

        <div class="summary-divider"></div>

        <!-- Coupon — VISIBLE labelled input + inline Apply + applied chip -->
        <a id="tf-form-1" data-tf-family="form" style="display:contents"></a>
        <div class="coupon-visible">
          <label class="coupon-visible__label" for="discount-code">Discount code</label>
          <div class="coupon-visible__row">
            <input id="discount-code" type="text" class="coupon-visible__input" placeholder="Enter code">
            <button class="coupon-visible__apply">Apply</button>
          </div>
          <div class="coupon-visible__applied">
            <span class="coupon-visible__applied-code">SAVE10</span>
            <span class="coupon-visible__applied-value">−$92.50</span>
            <a href="#" class="coupon-visible__applied-remove">Remove</a>
          </div>
        </div>

        <div class="summary-divider"></div>

        <!-- Trust row — three prominent chips directly above CTA -->
        <a id="tf-trust-chip-strip-2" data-tf-family="trust-chip-strip" style="display:contents"></a>
        <div class="trust-row">
          <div class="trust-chip">
            <span class="trust-chip__glyph" aria-hidden="true">
              <svg viewbox="0 0 24 24"><path d="M7 11V8a5 5 0 0 1 10 0v3M5 11h14v10H5zM12 15v3"></path></svg>
            </span>
            <span class="trust-chip__title">Secure checkout</span>
            <span class="trust-chip__sub">SSL encrypted payment</span>
          </div>
          <div class="trust-chip">
            <span class="trust-chip__glyph" aria-hidden="true">
              <svg viewbox="0 0 24 24"><path d="M3 12a9 9 0 1 0 3-6.7M3 4v5h5"></path><path d="M12 8v5l3 2"></path></svg>
            </span>
            <span class="trust-chip__title">Free returns</span>
            <span class="trust-chip__sub">30-day money-back</span>
          </div>
          <div class="trust-chip">
            <span class="trust-chip__glyph" aria-hidden="true">
              <svg viewbox="0 0 24 24"><path d="M12 3l8 4v6c0 5-3.5 7.5-8 8-4.5-.5-8-3-8-8V7z"></path><path d="M9 12l2 2 4-4"></path></svg>
            </span>
            <span class="trust-chip__title">1-year warranty</span>
            <span class="trust-chip__sub">Duelling grade covered</span>
          </div>
        </div>

        <!-- Primary CTA -->
        <button class="checkout-cta">
          <span>Secure Checkout</span>
          <span class="checkout-cta__arrow">→</span>
        </button>

        <!-- Cart persistence signal -->
        <div class="persist-note">
          Cart saved for 7 days<a href="#" class="link">Email me my cart</a>
        </div>

        <!-- Payment methods (no Klarna, no BNPL callout) -->
        <div class="pay-row">
          <span>Visa</span>
          <span>Mastercard</span>
          <span>Amex</span>
          <span>Apple Pay</span>
          <span>Google Pay</span>
        </div>
      </fieldset>

      <!-- Good to know — reassurance card -->
      <a id="tf-trust-prose-cells-1" data-tf-family="trust-prose-cells" style="display:contents"></a>
      <fieldset class="info-card">
        <legend class="info-card__legend">Good to <span class="accent">know</span></legend>
        <div class="info-card__list">
          <div class="info-item">
            <span class="info-item__glyph" aria-hidden="true">
              <svg viewbox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
            </span>
            <div class="info-item__body">
              <span class="info-item__title">Same-day UK dispatch</span>
              <span class="info-item__text">Orders placed before 2pm UK Mon–Fri dispatch the same day.</span>
            </div>
          </div>
          <div class="info-item">
            <span class="info-item__glyph" aria-hidden="true">
              <svg viewbox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18"></path><path d="M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"></path></svg>
            </span>
            <div class="info-item__body">
              <span class="info-item__title">Duties + taxes paid by us</span>
              <span class="info-item__text">We cover all import duties + local taxes. No surprise charges at delivery, wherever you are.</span>
            </div>
          </div>
          <div class="info-item">
            <span class="info-item__glyph" aria-hidden="true">
              <svg viewbox="0 0 24 24"><path d="M3 12a9 9 0 1 0 3-6.7M3 4v5h5"></path><path d="M12 8v5l3 2"></path></svg>
            </span>
            <div class="info-item__body">
              <span class="info-item__title">30-day money-back guarantee</span>
              <span class="info-item__text">Not what you expected? Return within 30 days for a full refund.</span>
            </div>
          </div>
          <div class="info-item">
            <span class="info-item__glyph" aria-hidden="true">
              <svg viewbox="0 0 24 24"><path d="M4 5h16v11H8l-4 4z"></path><path d="M8 10h8M8 13h5"></path></svg>
            </span>
            <div class="info-item__body">
              <span class="info-item__title">UK-based customer service</span>
              <span class="info-item__text">Real people, real answers. 24-hour response, 7 days a week.</span>
            </div>
          </div>
          <div class="info-item">
            <span class="info-item__glyph" aria-hidden="true">
              <svg viewbox="0 0 24 24"><path d="M12 3v18M8 6h6a3 3 0 0 1 0 6H8m0 0h7a3 3 0 0 1 0 6H8"></path></svg>
            </span>
            <div class="info-item__body">
              <span class="info-item__title">6 currencies at checkout</span>
              <span class="info-item__text">Prices shown in your local currency. GBP · USD · EUR · CAD · AUD · NZD.</span>
            </div>
          </div>
        </div>
      </fieldset>
    </aside>

  </div>
</section>

<!-- 4. Cross-sell strip -->
<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">
        <a href="https://artsabers.com/product/rgb-triple-lightsaber-tiered-stand/" 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');"></a>
        <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">
        <a href="https://artsabers.com/product/type-c-s-rgb-charging-kit/" 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');"></a>
        <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">
        <a href="https://artsabers.com/product/type-c-proffie-2-2-charging-kit/" 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');"></a>
        <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">
        <a href="https://nerdworks.uk/product/silver-covertec-wheel-adapter/" 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');"></a>
        <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 verbatim 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>