← ARTSABERS

ARTSABERS — Checkout

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

Mockup HTML

Open in New Tab 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Secure Checkout</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@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
   ARTSABERS — Kyber Hull tokens (from Styleguide, verbatim)
   ============================================================ */
:root {
  /* Ember ombre (accents only) */
  --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 (surface roles) */
  --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 / light-catch */
  --chrome-highlight: #FAFAFA;
  --chrome-glint: #E8E4DD;
  --chrome-warm: #F5F0E8;
  --chrome-dim: #B8B0A6;

  /* Semantic surface roles */
  --bg-page: var(--charcoal);
  --bg-card: var(--hull-panel);
  --bg-card-lift: var(--hull-panel-lift);
  --bg-card-recess: var(--hull-panel-dark);
  --bg-input: #1E1E1E;
  --bg-input-focus: #262524;

  /* Text roles */
  --text-body: var(--chrome-warm);
  --text-title: var(--chrome-highlight);
  --text-muted: var(--chrome-dim);
  --text-on-ember: var(--on-primary-fixed);

  /* Accent role */
  --accent: var(--ember);
  --accent-hot: var(--ember-glow);

  /* Feedback */
  --forge-red: #E63929;
  --success: var(--ember);

  /* Fonts */
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;

  /* Sizing */
  --hairline: rgba(250, 250, 250, 0.08);
  --hairline-strong: rgba(250, 250, 250, 0.16);
  --ember-hairline: rgba(255, 122, 46, 0.6);
  --chrome-top-inset: inset 0 1px 0 rgba(250, 250, 250, 0.30);
  --chrome-top-soft: inset 0 1px 0 rgba(250, 250, 250, 0.14);
  --panel-lift: inset 0 1px 0 rgba(250, 250, 250, 0.08), 0 8px 24px -8px rgba(0, 0, 0, 0.9);
  --ember-glow-sm: 0 0 16px rgba(255, 122, 46, 0.35);
  --ember-glow-md: 0 0 28px rgba(255, 122, 46, 0.55);
  --ember-focus: 0 0 0 1px var(--ember), 0 0 12px rgba(255, 122, 46, 0.35);
}

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

html, body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Panel-joint background — every 240px hairlines + warm ember bloom
   positioned so its top edge aligns with the ember separator below the header */
body {
  background:
    radial-gradient(1200px 900px at 8% 660px, rgba(255, 122, 46, 0.12), transparent 60%),
    radial-gradient(900px 700px at 95% calc(40% + 60px), rgba(255, 122, 46, 0.04), transparent 65%),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 239px,
      rgba(250, 250, 250, 0.035) 239px,
      rgba(250, 250, 250, 0.035) 240px
    ),
    linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-warm) 40%, var(--charcoal) 100%);
  background-attachment: fixed;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ember-glow); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ============================================================
   Site header (brand mark strip)
   ============================================================ */
.brand-strip {
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--void) 0%, var(--carbon) 100%);
  box-shadow: var(--chrome-top-soft);
}
.brand-strip__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.brand-mark__accent { color: var(--ember); }
.brand-strip__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.brand-strip__meta span::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--ember);
  margin-right: 8px;
  transform: translateY(-2px);
  box-shadow: 0 0 6px var(--ember);
}

/* ============================================================
   Compact page header (block: page-header)
   ============================================================ */
.page-header {
  position: relative;
  padding: 44px 32px 32px;
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, var(--carbon) 0%, var(--charcoal) 100%);
  box-shadow: var(--chrome-top-inset);
}
.page-header::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ember) 40%, var(--ember-glow) 50%, var(--ember) 60%, transparent 100%);
  opacity: 0.5;
}
.page-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -120px;
  height: 120px;
  background: radial-gradient(ellipse at center top, rgba(255, 122, 46, 0.20), transparent 70%);
  pointer-events: none;
}
.page-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
}
.page-header__crumbs {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-bottom: 20px;
}
.page-header__crumbs a { color: var(--chrome-dim); }
.page-header__crumbs a:hover { color: var(--chrome-warm); }
.page-header__crumbs .sep { margin: 0 10px; color: var(--hull-edge); }
.page-header__crumbs .current { color: var(--ember); }
.page-header__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 14px;
}
.page-header__sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--chrome-warm);
  margin-bottom: 26px;
}
.page-header__sub strong {
  color: var(--chrome-highlight);
  font-weight: 600;
}

/* Trust chip strip */
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.trust-chip {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust-chip::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--ember);
  box-shadow: 0 0 8px var(--ember);
  flex-shrink: 0;
}

/* ============================================================
   Main layout
   ============================================================ */
.cart-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 32px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 40px;
  align-items: start;
}
.cart-main__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.cart-main__right {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============================================================
   Fieldset content-group (block: content-group) — MAS52 pattern
   ============================================================ */
.content-group {
  position: relative;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-card);
  padding: 32px 30px 30px;
  box-shadow: var(--panel-lift);
}
.content-group__legend {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 0 12px;
  background: var(--charcoal);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.content-group__sub {
  font-size: 13px;
  color: var(--chrome-dim);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* --flat modifier: strip framing, use section-header pattern
   for stacked left-column sections. Bordered treatment preserved
   for the sticky sidebar cards only. */
.content-group--flat {
  border: 0;
  background: transparent;
  padding: 44px 0 40px;
  box-shadow: none;
  border-top: 1px solid rgba(255,122,46,0.20);
}
.content-group--flat:first-of-type { border-top: 0; padding-top: 8px; }
.content-group--flat .content-group__legend {
  position: static;
  padding: 0;
  background: transparent;
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--chrome-highlight);
  margin-bottom: 6px;
  display: block;
}
.content-group--flat .content-group__sub {
  margin-bottom: 28px;
}

/* ============================================================
   Express payment row (block: express-pay)
   ============================================================ */
.express-pay {
  padding: 24px 26px 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.express-pay__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 14px;
}
.express-pay__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.express-btn {
  height: 48px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--chrome-top-soft);
}
.express-btn:hover { transform: translateY(-1px); }
.express-btn--apple {
  background: #000;
  color: #fff;
}
.express-btn--apple .glyph { font-size: 16px; }
.express-btn--google {
  background: #202124;
  color: #fff;
  border-color: #303236;
}
.express-btn--shop {
  background: #5A31F4;
  color: #fff;
}
.express-btn__mark-google {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: 'Arial', sans-serif; font-weight: 700; letter-spacing: -0.02em;
}
.g-b { color: #4285F4; } .g-r { color: #EA4335; } .g-y { color: #FBBC05; } .g-g { color: #34A853; }
.express-pay__divider {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.express-pay__divider::before, .express-pay__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
}

/* ============================================================
   Form primitives (block: form) — MAS52 verbatim
   ============================================================ */
.form-row { margin-bottom: 20px; }
.form-row:last-child { margin-bottom: 0; }
.form-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: 2fr 1fr 1.4fr; }
.form-grid--expiry { grid-template-columns: 1fr 1fr; }

.form-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  margin-bottom: 8px;
}
.form-label .req {
  color: var(--ember);
  font-size: 10px;
  vertical-align: super;
}
.form-label .opt {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--chrome-dim);
  font-weight: 500;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--bg-input);
  border: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hull-edge);
  color: var(--chrome-warm);
  font-family: var(--font-body);
  font-size: 16px;
  border-radius: 0;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--ember);
  border-bottom-color: var(--ember);
  background: var(--bg-input-focus);
  box-shadow: var(--ember-focus);
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(184, 176, 166, 0.4); }
.form-textarea { resize: vertical; min-height: 88px; }
.form-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--chrome-dim) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--chrome-dim) 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.form-help {
  margin-top: 6px;
  font-size: 12px;
  color: var(--chrome-dim);
  line-height: 1.4;
}

/* Input with inline icon adornment (card networks) */
.form-input-wrap { position: relative; }
.form-input-wrap .form-input { padding-right: 130px; }
.form-input-adorn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
  opacity: 0.75;
}

/* Country select with flag */
.form-country {
  position: relative;
}
.form-country__flag {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}
.form-country .form-select { padding-left: 42px; }

/* Signin note */
.form-signin-note {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px dashed var(--hairline-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--chrome-dim);
}
.form-signin-note a {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ember);
}

/* ============================================================
   Delivery shipment sub-group (block: shipment-choice)
   ============================================================ */
.shipment-choice {
  padding: 22px 0 4px;
  border-top: 1px dashed var(--hairline-strong);
  margin-top: 22px;
}
.shipment-choice:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.shipment-choice__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  position: relative;
}
.shipment-choice__head::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px; left: 0;
  width: 60px; height: 1px;
  background: var(--ember);
  box-shadow: 0 0 6px var(--ember);
}
.shipment-choice__tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.shipment-choice__arriving {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}
.shipment-choice__lede {
  margin: 12px 0 18px;
  font-size: 14px;
  color: var(--chrome-warm);
  line-height: 1.5;
}
.shipment-choice__radios {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   Radio box (block: radio-box) — 3-column pattern from MAS57
   ============================================================ */
.radio-box {
  position: relative;
  padding: 16px 16px 14px;
  border: 1px solid var(--hairline);
  background: var(--hull-panel-lift);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-shadow: var(--chrome-top-soft);
}
.radio-box:hover {
  border-color: var(--hull-edge);
  background: #2A2A2A;
}
.radio-box--selected {
  border-color: var(--ember);
  background: linear-gradient(180deg, #2A211B 0%, var(--hull-panel-lift) 100%);
  box-shadow: var(--chrome-top-inset), var(--ember-glow-sm);
}
.radio-box__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.radio-box__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.radio-box__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.radio-box__price--free {
  color: var(--ember-glow);
}
.radio-box__meta {
  font-size: 11px;
  color: var(--chrome-dim);
  line-height: 1.4;
}
.radio-box__dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 12px; height: 12px;
  border: 1px solid var(--hull-edge);
  background: transparent;
  border-radius: 50%;
  display: none;
}
.radio-box--selected .radio-box__dot {
  display: block;
  border-color: var(--ember);
  background: radial-gradient(circle, var(--ember) 40%, transparent 44%);
  box-shadow: 0 0 8px var(--ember);
}

/* Layout tweak: radio box head has room for dot */
.radio-box__head { padding-right: 22px; }

/* ============================================================
   Payment method tiles (block: payment-tiles)
   ============================================================ */
.payment-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 26px;
}
.payment-tile {
  position: relative;
  padding: 18px 16px;
  border: 1px solid var(--hairline);
  background: var(--hull-panel-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  min-height: 72px;
  box-shadow: var(--chrome-top-soft);
}
.payment-tile:hover { border-color: var(--hull-edge); }
.payment-tile--selected {
  border-color: var(--ember);
  background: linear-gradient(180deg, #2A211B 0%, var(--hull-panel-lift) 100%);
  box-shadow: var(--chrome-top-inset), var(--ember-glow-sm);
}
.payment-tile__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.payment-tile__marks {
  display: flex;
  gap: 4px;
}
.card-mark {
  display: inline-block;
  height: 20px; padding: 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 20px;
  color: #fff;
  border-radius: 2px;
}
.card-mark--visa { background: #1A1F71; color: #F7B600; letter-spacing: 0; font-style: italic; }
.card-mark--mc { background: #EB001B; position: relative; padding-left: 22px; }
.card-mark--mc::before {
  content: ''; position: absolute; left: 5px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #F79E1B;
  mix-blend-mode: multiply;
}
.card-mark--amex { background: #006FCF; font-size: 9px; letter-spacing: 0.06em; }
.payment-tile__dot {
  position: absolute;
  top: 10px; right: 10px;
  width: 10px; height: 10px;
  border: 1px solid var(--hull-edge);
  border-radius: 50%;
}
.payment-tile--selected .payment-tile__dot {
  border-color: var(--ember);
  background: radial-gradient(circle, var(--ember) 40%, transparent 44%);
  box-shadow: 0 0 6px var(--ember);
}

/* Payment tile glyphs — Apple, PayPal */
.pay-glyph {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.pay-glyph--paypal { color: #009cde; }
.pay-glyph--paypal em { color: #003087; font-style: normal; }
.pay-glyph--apple { color: var(--chrome-highlight); }

/* ============================================================
   Checkbox (block: checkbox-row)
   ============================================================ */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--chrome-warm);
  line-height: 1.5;
}
.checkbox-row input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--hull-edge);
  background: var(--bg-input);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: border-color .15s, box-shadow .15s;
  border-radius: 0;
}
.checkbox-row input[type="checkbox"]:checked {
  border-color: var(--ember);
  background: var(--ember);
  box-shadow: var(--ember-glow-sm);
}
.checkbox-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--on-primary-fixed);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============================================================
   Legal / consent block
   ============================================================ */
.legal-consent {
  padding: 20px 4px 0;
  font-size: 13px;
  color: var(--chrome-dim);
  line-height: 1.6;
}
.legal-consent p { margin-bottom: 16px; }
.legal-consent a { color: var(--ember); font-weight: 500; }
.legal-consent .checkbox-row { font-size: 13px; color: var(--chrome-warm); }

/* ============================================================
   Order Summary card (block: order-summary) — enriched for checkout
   ============================================================ */
.order-summary .content-group__legend {
  background: var(--charcoal);
}

.summary-items {
  display: flex;
  flex-direction: column;
}

/* Compact item preview strip — checkout summary lean pattern
   (customer already verified full items on cart) */
.item-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
.item-preview__strip {
  display: flex;
  gap: 8px;
}
.item-preview__thumb {
  width: 52px;
  height: 52px;
  background-color: var(--void);
  border: 1px solid rgba(250,250,250,0.06);
  overflow: hidden;
  position: relative;
}
.item-preview__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.item-preview__thumb--gift {
  border-color: rgba(255,122,46,0.55);
  box-shadow: 0 0 12px rgba(255,122,46,0.20);
}
.item-preview__thumb--gift::after {
  content: 'GIFT';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1px 0;
  font-family: var(--font-display);
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ember);
  background: rgba(6,6,6,0.85);
  text-align: center;
}
.item-preview__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.item-preview__count {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-warm);
}
.item-preview__count strong {
  color: var(--chrome-highlight);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.item-preview__toggle {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  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;
}

/* Compact SSL chip — single trust surface at checkout */
.ssl-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(6,6,6,0.35);
  border: 1px solid rgba(255,122,46,0.20);
  box-shadow: inset 0 1px 0 rgba(255,179,71,0.10);
}
.ssl-chip__icon {
  font-size: 16px;
  color: var(--ember);
  line-height: 1;
}
.ssl-chip__text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--chrome-warm);
}
.ssl-chip__text .sep { color: var(--chrome-dim); opacity: 0.4; margin: 0 4px; }

/* WC composite parent+child row (block: composite-row) — grammar from MAS57 */
.composite-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.composite-row:first-child { padding-top: 4px; }
.composite-row:last-of-type { border-bottom: 0; }

.composite-row__parent {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
}
.composite-row__media {
  width: 60px; height: 60px;
  background: var(--hull-panel-dark);
  border: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
  box-shadow: var(--chrome-top-soft);
}
.composite-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.composite-row__body { min-width: 0; }
.composite-row__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.8px;
  color: var(--chrome-warm);
  line-height: 1.3;
  margin-bottom: 4px;
}
.composite-row__meta {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.composite-row__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.composite-row__qty {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  font-weight: 500;
  margin-top: 3px;
}

/* Child row (neutral polycarbonate blade slot) */
.composite-row__child {
  margin-top: 10px;
  margin-left: 12px;
  padding-left: 20px;
  border-left: 1px dashed var(--hairline-strong);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
}
.blade-slot {
  width: 36px; height: 36px;
  background:
    linear-gradient(90deg, transparent 40%, rgba(245, 240, 232, 0.35) 50%, transparent 60%),
    linear-gradient(180deg, var(--hull-panel-dark) 0%, var(--carbon) 100%);
  border: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  box-shadow: var(--chrome-top-soft);
}
.blade-slot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 24px;
  background: linear-gradient(180deg, rgba(245, 240, 232, 0.75) 0%, rgba(184, 176, 166, 0.5) 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(245, 240, 232, 0.35);
}
.composite-row__child-body {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.composite-row__child-title {
  color: var(--chrome-warm);
  font-weight: 500; letter-spacing: 0.8px; }

/* Free-gift pinned mini-row */
.gift-row {
  margin-top: 10px;
  padding: 12px 12px;
  border: 1px solid var(--ember-hairline);
  background: linear-gradient(180deg, rgba(255, 122, 46, 0.06) 0%, rgba(255, 122, 46, 0.02) 100%);
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: var(--chrome-top-soft);
}
.gift-row__media {
  width: 36px; height: 36px;
  overflow: hidden;
  background: var(--hull-panel-dark);
  border: 1px solid var(--hairline);
}
.gift-row__media img { width: 100%; height: 100%; object-fit: cover; }
.gift-row__body { min-width: 0; }
.gift-row__pill {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-primary-fixed);
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 100%);
  padding: 3px 6px;
  margin-right: 8px;
  box-shadow: var(--ember-glow-sm);
}
.gift-row__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--chrome-warm);
  font-weight: 500;
}
.gift-row__meta {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-top: 3px;
}
.gift-row__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-glow);
}

/* Hairline separator */
.hairline-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
  margin: 18px 0;
}

/* Cost table */
.cost-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--chrome-warm);
}
.cost-row__label {
  color: var(--chrome-dim);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cost-row__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--chrome-warm);
}
.cost-row--discount .cost-row__value { color: var(--ember-glow); }
.cost-row--free .cost-row__value { color: var(--ember-glow); font-weight: 700; }
.cost-row--tax .cost-row__value { color: var(--chrome-dim); font-size: 12px; text-transform: none; letter-spacing: 0.02em; }

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0 6px;
}
.total-row__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.total-row__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(255, 122, 46, 0.45);
}
.loyalty-earn {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  text-align: right;
}
.loyalty-earn strong { color: var(--ember); font-weight: 600; }

/* Loyalty coming-soon teaser (block: loyalty-teaser) */
.loyalty-teaser {
  padding: 14px 14px;
  border: 1px dashed var(--hairline-strong);
  background: var(--hull-panel-dark);
  display: flex;
  align-items: center;
  gap: 12px;
}
.loyalty-teaser__tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-primary-fixed);
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 100%);
  padding: 4px 7px;
  white-space: nowrap;
  box-shadow: var(--ember-glow-sm);
}
.loyalty-teaser__body { min-width: 0; }
.loyalty-teaser__points {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--chrome-warm);
}
.loyalty-teaser__points span { color: var(--ember); }
.loyalty-teaser__hint {
  font-size: 11px;
  color: var(--chrome-dim);
  margin-top: 2px;
  line-height: 1.4;
}

/* Coupon field (block: coupon) — MAS57 with applied chip */
.coupon {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coupon__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.coupon__input {
  padding: 11px 12px;
  background: var(--bg-input);
  border: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hull-edge);
  color: var(--chrome-warm);
  font-family: var(--font-body);
  font-size: 13px;
  border-radius: 0;
  outline: none;
}
.coupon__input:focus {
  border-color: var(--ember);
  box-shadow: var(--ember-focus);
}
.coupon__btn {
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(62, 62, 62, 0.6);
  color: var(--chrome-warm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background .15s, box-shadow .15s;
}
.coupon__btn:hover {
  background: var(--hull-panel-lift);
  box-shadow: var(--chrome-top-soft);
}
.coupon__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ember-hairline);
  background: linear-gradient(180deg, rgba(255, 122, 46, 0.08) 0%, rgba(255, 122, 46, 0.02) 100%);
  box-shadow: var(--chrome-top-soft);
}
.coupon__chip-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-glow);
}
.coupon__chip-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ember-glow);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  margin-right: 12px;
}
.coupon__chip-remove {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  cursor: pointer;
}
.coupon__chip-remove:hover { color: var(--chrome-warm); }

/* Trust row above CTA (block: trust-row) */
.trust-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 4px 0 18px;
}
.trust-row__item {
  text-align: center;
  padding: 0 4px;
}
.trust-row__icon {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ember);
  margin-bottom: 4px;
}
.trust-row__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-warm);
  margin-bottom: 2px;
  line-height: 1.2;
}
.trust-row__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--chrome-dim);
  line-height: 1.3;
}

/* Primary CTA (block: btn-primary) */
.btn-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px;
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
  color: var(--on-primary-fixed);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  box-shadow: var(--ember-glow-sm), var(--chrome-top-inset);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--ember-glow-md), var(--chrome-top-inset);
}
.btn-primary__arrow { font-size: 18px; transform: translateY(-1px); }

.cta-legal {
  margin-top: 10px;
  font-size: 11px;
  color: var(--chrome-dim);
  text-align: center;
  line-height: 1.5;
}
.cta-legal a { color: var(--ember); }

/* Payment method icons row */
.pay-icons {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.pay-icons .card-mark { opacity: 0.85; }
.pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  background: var(--hull-panel-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

/* ============================================================
   Good to know card (block: good-to-know) — MAS57 verbatim
   ============================================================ */
.good-to-know .content-group__legend {
  background: var(--charcoal);
}
.gtk-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.gtk-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}
.gtk-icon {
  width: 28px; height: 28px;
  border: 1px solid var(--ember-hairline);
  background: linear-gradient(180deg, rgba(255, 122, 46, 0.14) 0%, rgba(255, 122, 46, 0.04) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ember);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  box-shadow: inset 0 0 12px rgba(255, 122, 46, 0.2), var(--chrome-top-soft);
}
.gtk-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-highlight);
  margin-bottom: 4px;
  line-height: 1.3;
}
.gtk-body {
  font-size: 12.5px;
  color: var(--chrome-warm);
  line-height: 1.5;
}

/* ============================================================
   Post-checkout reinforcement band
   ============================================================ */
.reinforcement {
  border-top: 1px solid var(--ember-hairline);
  background: var(--carbon);
  padding: 26px 32px;
  position: relative;
}
.reinforcement::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 40px;
  background: radial-gradient(ellipse at center top, rgba(255, 122, 46, 0.20), transparent 70%);
  pointer-events: none;
}
.reinforcement__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 14px 32px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  text-align: center;
}
.reinforcement__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.reinforcement__item + .reinforcement__item::before {
  content: '·';
  color: var(--ember);
  font-size: 20px;
  transform: translateY(-2px);
}

/* ============================================================
   Site footer
   ============================================================ */
.site-footer {
  background: var(--carbon);
  color: var(--chrome-dim);
  padding: 56px 32px 32px;
  border-top: 1px solid var(--hairline);
  box-shadow: var(--chrome-top-soft);
}
.site-footer__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline);
}
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
  margin-bottom: 12px;
}
.site-footer__brand span { color: var(--ember); }
.site-footer__tag {
  font-size: 13px;
  color: var(--chrome-warm);
  max-width: 320px;
  line-height: 1.55;
  margin-bottom: 20px;
}
.site-footer__meta {
  display: flex;
  gap: 20px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.footer-col__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-warm);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 13px;
  color: var(--chrome-dim);
}
.footer-col a:hover { color: var(--chrome-warm); }
.site-footer__base {
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .cart-main {
    grid-template-columns: 1fr;
    padding: 32px 24px 48px;
  }
  .cart-main__right {
    position: static;
    top: auto;
  }
  .page-header { padding: 32px 24px 24px; }
  .page-header__title { font-size: 44px; letter-spacing: 0.8px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .brand-strip__inner { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
  .brand-strip__meta { display: none; }
  .page-header { padding: 28px 20px 22px; }
  .page-header__title { font-size: 34px; letter-spacing: 0.8px; }
  .page-header__sub { font-size: 14px; }
  .trust-chips { gap: 10px 18px; }
  .trust-chip { font-size: 10px; }
  .cart-main { padding: 24px 16px 40px; gap: 24px; }
  .content-group { padding: 30px 20px 22px; }
  .content-group__legend { left: 16px; }
  .form-grid--2, .form-grid--3, .form-grid--expiry { grid-template-columns: 1fr; }
  .shipment-choice__radios { grid-template-columns: 1fr; }
  .payment-tiles { grid-template-columns: 1fr; }
  .express-pay__buttons { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .trust-row__item { text-align: left; display: grid; grid-template-columns: 20px 1fr 1fr; gap: 8px; align-items: center; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__base { flex-direction: column; align-items: flex-start; }
  .total-row__value { font-size: 22px; }
}

/* 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; }
</style>
</head>
<body>

<!-- Brand strip -->
<div class="brand-strip">
  <div class="brand-strip__inner">
    <div class="brand-mark">ART<span class="brand-mark__accent">SABERS</span></div>
    <div class="brand-strip__meta">
      <span>Secure Checkout</span>
      <span>Encrypted End-to-End</span>
    </div>
  </div>
</div>

<!-- Compact page header -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<header class="page-header">
  <div class="page-header__inner">
    <a id="tf-breadcrumb" data-tf-family="breadcrumb" style="display:contents"></a>
    <nav class="page-header__crumbs" aria-label="Breadcrumb">
      <a href="#">Home</a>
      <span class="sep">/</span>
      <a href="#">Cart</a>
      <span class="sep">/</span>
      <span class="current">Checkout</span>
    </nav>
    <h1 class="page-header__title">Secure Checkout</h1>
    <p class="page-header__sub"><strong>3 items</strong> · <strong>2 shipments</strong> · <strong>$832.47</strong></p>
    <a id="tf-trust-chip-strip-1" data-tf-family="trust-chip-strip" style="display:contents"></a>
    <div class="trust-chips">
      <div class="trust-chip">24-hour UK dispatch</div>
      <div class="trust-chip">30-day money-back</div>
      <div class="trust-chip">1-year duelling warranty</div>
      <div class="trust-chip">2,400+ five-star reviews</div>
    </div>
  </div>
</header>

<!-- Main cart / checkout body -->
<a id="tf-form" data-tf-family="form" style="display:contents"></a>
<main class="cart-main">

  <!-- LEFT COLUMN -->
  <div class="cart-main__left">

    <!-- Express payment (NOT a fieldset) -->
    <a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
    <section class="express-pay">
      <div class="express-pay__eyebrow">Fastest checkout</div>
      <div class="express-pay__buttons">
        <button class="express-btn express-btn--apple" type="button">
          <span class="pay-glyph pay-glyph--apple"></span>
          <span>Pay</span>
        </button>
        <button class="express-btn express-btn--google" type="button">
          <span class="express-btn__mark-google">
            <span class="g-b">G</span><span class="g-r">o</span><span class="g-y">o</span><span class="g-b">g</span><span class="g-g">l</span><span class="g-r">e</span>
          </span>
          <span>Pay</span>
        </button>
        <button class="express-btn express-btn--shop" type="button">
          <span>Shop</span><span>Pay</span>
        </button>
      </div>
      <div class="express-pay__divider">
        <span>— or continue with contact + payment below —</span>
      </div>
    </section>

    <!-- Contact information -->
    <fieldset class="content-group content-group--flat">
      <legend class="content-group__legend">Contact information</legend>
      <p class="content-group__sub">For order confirmation, delivery updates, and post-purchase support.</p>

      <div class="form-row">
        <label class="form-label" for="email">Email address <span class="req">*</span></label>
        <input class="form-input" type="email" id="email" value="alex@example.com" required>
        <p class="form-help">Order confirmation and dispatch alerts sent here.</p>
      </div>

      <div class="form-row">
        <label class="form-label" for="phone">Phone <span class="req">*</span></label>
        <input class="form-input" type="tel" id="phone" value="+44 20 7946 0958" required>
        <p class="form-help">For dispatch courier updates only.</p>
      </div>

      <div class="form-signin-note">
        <span>Guest checkout is default — account creation is optional after order.</span>
        <a href="#">Sign in for faster checkout →</a>
      </div>
    </fieldset>

    <!-- Delivery address -->
    <fieldset class="content-group content-group--flat">
      <legend class="content-group__legend">Delivery address</legend>
      <p class="content-group__sub">One address per order. Both shipments arrive here.</p>

      <div class="form-grid form-grid--2">
        <div>
          <label class="form-label" for="fname">First name <span class="req">*</span></label>
          <input class="form-input" type="text" id="fname" value="Alex" required>
        </div>
        <div>
          <label class="form-label" for="lname">Last name <span class="req">*</span></label>
          <input class="form-input" type="text" id="lname" value="Doe" required>
        </div>
      </div>

      <div class="form-row">
        <label class="form-label" for="country">Country / Region <span class="req">*</span></label>
        <div class="form-country">
          <span class="form-country__flag">🇬🇧</span>
          <select class="form-select" id="country">
            <option selected>United Kingdom</option>
            <option>United States</option>
            <option>Canada</option>
            <option>Australia</option>
            <option>New Zealand</option>
            <option>Ireland</option>
          </select>
        </div>
      </div>

      <div class="form-row">
        <label class="form-label" for="addr1">Address line 1 <span class="req">*</span></label>
        <input class="form-input" type="text" id="addr1" value="42 Rebel Yard" required>
      </div>

      <div class="form-row">
        <label class="form-label" for="addr2">Address line 2 <span class="opt">Optional</span></label>
        <input class="form-input" type="text" id="addr2" placeholder="Apartment, suite, unit, building">
      </div>

      <div class="form-grid form-grid--3">
        <div>
          <label class="form-label" for="city">Town / City <span class="req">*</span></label>
          <input class="form-input" type="text" id="city" value="London" required>
        </div>
        <div>
          <label class="form-label" for="postcode">Postcode <span class="req">*</span></label>
          <input class="form-input" type="text" id="postcode" value="SW1A 2AA" required>
        </div>
        <div>
          <label class="form-label" for="county">County <span class="req">*</span></label>
          <input class="form-input" type="text" id="county" value="Greater London" required>
        </div>
      </div>

      <div class="form-row">
        <label class="form-label" for="notes">Order notes <span class="opt">Optional</span></label>
        <textarea class="form-textarea" id="notes" rows="3" placeholder=""></textarea>
        <p class="form-help">Delivery instructions, buzzer codes, safe places to leave, etc.</p>
      </div>
    </fieldset>

    <!-- Payment -->
    <fieldset class="content-group content-group--flat">
      <legend class="content-group__legend">Payment</legend>
      <p class="content-group__sub">Encrypted end-to-end. Card details never touch our servers.</p>

      <div class="payment-tiles">
        <label class="payment-tile payment-tile--selected">
          <span class="payment-tile__dot"></span>
          <span class="payment-tile__label">Credit card</span>
          <span class="payment-tile__marks">
            <span class="card-mark card-mark--visa">VISA</span>
            <span class="card-mark card-mark--mc">MC</span>
            <span class="card-mark card-mark--amex">AMEX</span>
          </span>
        </label>
        <label class="payment-tile">
          <span class="payment-tile__dot"></span>
          <span class="pay-glyph pay-glyph--paypal">Pay<em>Pal</em></span>
        </label>
        <label class="payment-tile">
          <span class="payment-tile__dot"></span>
          <span class="pay-glyph pay-glyph--apple"></span>
          <span class="payment-tile__label">Pay</span>
        </label>
      </div>

      <!-- Card fields expanded -->
      <div class="form-row">
        <label class="form-label" for="card">Card number <span class="req">*</span></label>
        <div class="form-input-wrap">
          <input class="form-input" type="text" id="card" placeholder="1234 1234 1234 1234">
          <div class="form-input-adorn">
            <span class="card-mark card-mark--visa">VISA</span>
            <span class="card-mark card-mark--mc">MC</span>
            <span class="card-mark card-mark--amex">AMEX</span>
          </div>
        </div>
        <p class="form-help">16 digits from the front of your card.</p>
      </div>

      <div class="form-grid form-grid--expiry">
        <div>
          <label class="form-label" for="expiry">Expiry (MM / YY) <span class="req">*</span></label>
          <input class="form-input" type="text" id="expiry" placeholder="MM / YY">
        </div>
        <div>
          <label class="form-label" for="cvc">Security code (CVC) <span class="req">*</span></label>
          <input class="form-input" type="text" id="cvc" placeholder="123">
          <p class="form-help">3 or 4 digits on the back.</p>
        </div>
      </div>

      <div class="form-row">
        <label class="form-label" for="cardname">Name on card <span class="req">*</span></label>
        <input class="form-input" type="text" id="cardname" placeholder="As it appears on your card">
      </div>

      <div class="form-row" style="margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--hairline-strong);">
        <label class="checkbox-row">
          <input type="checkbox" checked>
          <span>Billing address same as delivery</span>
        </label>
      </div>
    </fieldset>

    <!-- Legal / consent -->
    <div class="legal-consent">
      <p>By placing your order, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>. We'll email your order confirmation and dispatch updates to the address above.</p>
      <label class="checkbox-row">
        <input type="checkbox">
        <span>Subscribe to occasional updates about new hilts, community events, and duelling grade drops.</span>
      </label>
    </div>

  </div>

  <!-- RIGHT COLUMN (sticky) -->
  <aside class="cart-main__right">

    <!-- Order Summary card -->
    <a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
    <fieldset class="content-group order-summary">
      <legend class="content-group__legend">Order Summary</legend>

      <!-- Compact item preview (checkout — customer already verified on cart) -->
      <div class="item-preview">
        <div class="item-preview__strip">
          <div class="item-preview__thumb"><img src="https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg" alt="Carbon Strike"></div>
          <div class="item-preview__thumb"><img src="https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg" alt="Starkiller SE"></div>
          <div class="item-preview__thumb"><img src="https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg" alt="Mace Windu SE"></div>
          <div class="item-preview__thumb item-preview__thumb--gift" title="Free Silver Lightsaber Coupler"><img src="https://nerdworks.uk/wp-content/uploads/2025/08/Silver-coupler-2-1-768x768.jpg" alt="Silver Coupler"></div>
        </div>
        <div class="item-preview__meta">
          <span class="item-preview__count"><strong>3 items</strong> · 2 shipments · 1 free gift</span>
          <a href="#" class="item-preview__toggle">Show details</a>
        </div>
      </div>

      <div class="hairline-sep"></div>

      <!-- Cost table -->
      <div class="cost-table">
        <div class="cost-row">
          <span class="cost-row__label">Subtotal</span>
          <span class="cost-row__value">$924.97</span>
        </div>
        <div class="cost-row cost-row--free">
          <span class="cost-row__label">Shipment 1 · Standard</span>
          <span class="cost-row__value">FREE</span>
        </div>
        <div class="cost-row cost-row--free">
          <span class="cost-row__label">Shipment 2 · Standard</span>
          <span class="cost-row__value">FREE</span>
        </div>
        <div class="cost-row cost-row--discount">
          <span class="cost-row__label">Discount (SAVE10)</span>
          <span class="cost-row__value">−$92.50</span>
        </div>
        <div class="cost-row cost-row--tax">
          <span class="cost-row__label">Tax</span>
          <span class="cost-row__value">Included at checkout</span>
        </div>
      </div>

      <div class="hairline-sep"></div>

      <div class="total-row">
        <span class="total-row__label">Estimated total</span>
        <span class="total-row__value">$832.47</span>
      </div>
      <div class="loyalty-earn"><strong>+240 points</strong> on this order</div>

      <div class="hairline-sep"></div>

      <!-- Coupon field with applied chip -->
      <div class="coupon">
        <label class="form-label" for="coupon-input" style="margin-bottom: 4px;">Discount code</label>
        <div class="coupon__row">
          <input class="coupon__input" type="text" id="coupon-input" placeholder="Enter code">
          <button class="coupon__btn" type="button">Apply</button>
        </div>
        <div class="coupon__chip">
          <span class="coupon__chip-code">SAVE10</span>
          <span class="coupon__chip-amount">−$92.50</span>
          <span class="coupon__chip-remove">Remove</span>
        </div>
      </div>

      <div class="hairline-sep"></div>

      <!-- Compact SSL chip (single trust surface at checkout — see MAS60 v2 rationale) -->
      <a id="tf-trust-chip-strip-2" data-tf-family="trust-chip-strip" style="display:contents"></a>
      <div class="ssl-chip">
        <span class="ssl-chip__icon">🔒</span>
        <span class="ssl-chip__text">Secure checkout <span class="sep">·</span> SSL encrypted end-to-end</span>
      </div>

      <!-- Primary CTA -->
      <button class="btn-primary" type="button">
        <span>Place Order</span>
        <span class="btn-primary__arrow">→</span>
      </button>
      <p class="cta-legal">By placing your order you agree to our <a href="#">Terms</a> + <a href="#">Privacy Policy</a>.</p>

    </fieldset>

  </aside>

</main>

<!-- Post-checkout reinforcement band -->
<a id="tf-trust-chip-strip-3" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="reinforcement">
  <div class="reinforcement__inner">
    <span class="reinforcement__item">Every hilt tracked from workshop dispatch</span>
    <span class="reinforcement__item">Global 7–10 day delivery</span>
    <span class="reinforcement__item">2,400+ five-star reviews</span>
  </div>
</section>

<!-- Site footer -->
<footer class="site-footer">
  <div class="site-footer__inner">
    <div>
      <div class="site-footer__brand">ART<span>SABERS</span></div>
      <p class="site-footer__tag">The replica saber catalogue, built for fans. Every character, every Saber Core, every duelling grade — with real customer service after payment.</p>
      <div class="site-footer__meta">
        <span>US · CA · AU · NZ</span>
        <span>USD · EUR · GBP</span>
      </div>
    </div>
    <div class="footer-col">
      <div class="footer-col__title">Shop</div>
      <ul>
        <li><a href="#">All Lightsabers</a></li>
        <li><a href="#">By Character</a></li>
        <li><a href="#">By Saber Core</a></li>
        <li><a href="#">Cosplay Helmets</a></li>
        <li><a href="#">Parts + Accessories</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <div class="footer-col__title">Support</div>
      <ul>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Shipping + Delivery</a></li>
        <li><a href="#">Returns</a></li>
        <li><a href="#">Warranty</a></li>
        <li><a href="#">Track Order</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <div class="footer-col__title">Brand</div>
      <ul>
        <li><a href="#">Our Story</a></li>
        <li><a href="#">The Workshop</a></li>
        <li><a href="#">Journal</a></li>
        <li><a href="#">Ambassadors</a></li>
        <li><a href="#">Terms + Privacy</a></li>
      </ul>
    </div>
  </div>
  <div class="site-footer__base">
    <span>© 2026 ARTSABERS · Operated by Nerdworks Ltd</span>
    <span>Unlicensed replica sabers · Fan-made, not affiliated with Lucasfilm</span>
  </div>
</footer>

</body>
</html>