← ARTSABERS

ARTSABERS — FAQ ·

MAS71 Approved Content Page ARTSABERS
Open in New Tab ✓ Accepted
Template type: Standard — ready for /wire-template.

Mockup HTML

Open in New Tab
<!DOCTYPE html>
<?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Workshop FAQ</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>:root {
    /* Orange 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 / whites */
    --chrome-highlight:#FAFAFA;
    --chrome-glint:    #E8E4DD;
    --chrome-warm:     #F5F0E8;
    --chrome-dim:      #B8B0A6;

    /* Semantic surfaces */
    --bg-page:         var(--carbon);
    --bg-section-primary: var(--charcoal);
    --bg-section-warm: var(--charcoal-warm);
    --bg-section-deep: var(--void);
    --bg-hero:         var(--carbon);
    --bg-footer:       var(--carbon);
    --bg-card:         var(--hull-panel);
    --bg-card-lift:    var(--hull-panel-lift);
    --bg-recess:       var(--hull-panel-dark);

    /* Semantic text */
    --text-on-dark:    var(--chrome-warm);
    --text-heading:    var(--chrome-highlight);
    --text-muted:      var(--chrome-dim);
    --text-on-ember:   var(--on-primary-fixed);

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

    /* Elevation */
    --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 14px 34px -8px rgba(0,0,0,0.95);
    --ember-glow-sm:   0 0 16px rgba(255,122,46,0.35);
    --ember-glow-md:   0 0 26px rgba(255,122,46,0.55);
    --ember-hot-rim:   inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
    --chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);

    /* Spacing */
    --section-pad-y:   96px;
    --gutter:          32px;
    --reading-col:     68ch;
  }

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-on-dark);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

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

/* ============ SITE HEADER (BLOCK: site-header) ============ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(6,6,6,0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(46,46,46,0.6);
    box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
  }

.site-header__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 48px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 48px;
  }

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

.site-header__brand-mark {
    width: 26px;
    height: 26px;
    background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
    box-shadow: var(--ember-glow-sm);
    position: relative;
  }

.site-header__brand-mark::after {
    content:'';
    position: absolute;
    inset: 4px 12px;
    background: var(--chrome-highlight);
    opacity: 0.9;
  }

.site-header__nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--chrome-warm);
  }

.site-header__nav a { transition: color 0.2s; }

.site-header__nav a:hover { color: var(--ember); }

.site-header__nav a.is-active { color: var(--ember); }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 22px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--chrome-dim);
  }

.site-header__cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--hull-panel-lift);
    box-shadow: var(--chrome-top-soft);
    color: var(--chrome-warm);
  }

.site-header__cart-badge {
    color: var(--ember);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

/* ============ COMPACT HERO (BLOCK: hero-compact) ============ */
  .hero-compact {
    position: relative;
    background: var(--bg-hero);
    padding: 96px 48px 88px;
    overflow: hidden;
    isolation: isolate;
  }

.hero-compact::before {
    /* Panel-joint hairline pattern — faint horizontal seams suggesting hull plates */
    content:'';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, transparent 0%, transparent 22%, rgba(255,122,46,0.06) 22.15%, transparent 22.35%, transparent 44%, rgba(250,250,250,0.03) 44.1%, transparent 44.2%, transparent 66%, rgba(255,122,46,0.05) 66.15%, transparent 66.35%, transparent 88%, rgba(250,250,250,0.02) 88.1%, transparent 88.2%),
      radial-gradient(ellipse at 15% 40%, rgba(255,122,46,0.08) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 60%, rgba(232,93,24,0.05) 0%, transparent 60%);
    z-index: -1;
  }

.hero-compact::after {
    /* Ember-backlight at bottom marking panel end */
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,122,46,0.7) 100%);
    box-shadow: 0 0 34px 6px rgba(255,122,46,0.35);
  }

.hero-compact__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
  }

.hero-compact__eyebrow {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

.hero-compact__eyebrow::before {
    content:'';
    width: 28px;
    height: 1px;
    background: var(--ember);
    box-shadow: 0 0 8px rgba(255,122,46,0.6);
  }

.hero-compact__title {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-heading);
    letter-spacing: 0.8px;
    margin-bottom: 20px;
    max-width: 22ch;
  }

.hero-compact__lede {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--chrome-warm);
    max-width: 58ch;
  }

.hero-compact__breadcrumb {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--chrome-dim);
    margin-bottom: 28px;
  }

.hero-compact__breadcrumb a { color: var(--chrome-dim); }

.hero-compact__breadcrumb a:hover { color: var(--ember); }

.hero-compact__breadcrumb .sep { color: var(--hull-edge); margin: 0 10px; }

/* Panel seam glow (between hero and controls) */
  .panel-seam {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.75) 12%, var(--ember) 50%, rgba(255,122,46,0.75) 88%, transparent 100%);
    box-shadow: 0 0 22px rgba(255,122,46,0.55), 0 -1px 0 rgba(250,250,250,0.05);
    position: relative;
  }

.panel-seam::after {
    content:'';
    position: absolute;
    left: 0; right: 0; top: 1px;
    height: 40px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,122,46,0.28) 0%, transparent 70%);
    pointer-events: none;
  }

/* ============ FAQ CONTROLS (BLOCK: faq-controls) ============ */
  .faq-controls {
    background: var(--bg-page);
    padding: 40px 48px;
    box-shadow: var(--chrome-top-soft);
  }

.faq-controls__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

.faq-controls__chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

.faq-chip {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--chrome-dim);
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(62,62,62,0.6);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

.faq-chip__count {
    font-variant-numeric: tabular-nums;
    color: var(--hull-edge);
    font-weight: 500;
  }

.faq-chip:hover {
    color: var(--chrome-warm);
    border-color: rgba(255,122,46,0.4);
  }

.faq-chip.is-active {
    color: var(--ember);
    border-color: var(--ember);
    background: rgba(232,93,24,0.09);
    box-shadow: inset 0 0 20px rgba(232,93,24,0.05), 0 0 12px rgba(255,122,46,0.15);
  }

.faq-chip.is-active .faq-chip__count { color: var(--ember-bright); }

.faq-controls__search-row {
    display: flex;
    justify-content: flex-end;
  }

.faq-search__input::placeholder { color: var(--chrome-dim); font-style: italic; }

.faq-search__input:focus {
    border-bottom-color: var(--ember);
    box-shadow: 0 4px 12px -6px rgba(255,122,46,0.55);
  }

/* ============ FAQ ACCORDION SECTION (BLOCK: faq-accordion-group, faq-item) ============ */
  .faq-accordion-section {
    background: var(--bg-page);
    padding: 72px 48px 128px;
  }

.faq-accordion-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 88px;
  }

.faq-group {
    /* Ember hairline top border */
    border-top: 1px solid rgba(255,122,46,0.35);
    padding-top: 40px;
    position: relative;
  }

.faq-group::before {
    /* Soft ember bleed above group heading */
    content:'';
    position: absolute;
    top: -1px;
    left: 0;
    width: 140px;
    height: 32px;
    background: radial-gradient(ellipse at 0% 0%, rgba(255,122,46,0.25) 0%, transparent 70%);
    pointer-events: none;
  }

.faq-group__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    padding: 0 24px 16px;
    border-bottom: 1px solid rgba(36,36,36,0.9);
  }

.faq-group__label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ember);
  }

.faq-group__index {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--chrome-dim);
    font-variant-numeric: tabular-nums;
  }

.faq-group__index-num { color: var(--chrome-warm); }

.faq-group__list {
    display: flex;
    flex-direction: column;
  }

.faq-item {
    border-bottom: 1px solid rgba(36,36,36,0.9);
    position: relative;
    transition: background 0.2s;
  }

.faq-item:hover {
    background: linear-gradient(90deg, rgba(255,122,46,0.03) 0%, transparent 60%);
  }

.faq-item[open] {
    border-bottom-color: rgba(255,122,46,0.25);
  }

.faq-item__summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--chrome-warm);
    transition: color 0.2s;
  }

.faq-item__summary::-webkit-details-marker { display: none; }

.faq-item__summary:hover { color: var(--chrome-highlight); }

.faq-item[open] .faq-item__summary { color: var(--chrome-highlight); }

.faq-item__q-text { max-width: 78ch; }

.faq-item__chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--ember);
    transition: transform 0.25s ease;
    transform-origin: center;
    margin-top: 6px;
    filter: drop-shadow(0 0 6px rgba(255,122,46,0.4));
  }

.faq-item[open] .faq-item__chevron {
    transform: rotate(90deg);
  }

.faq-item__answer {
    padding: 4px 24px 32px;
    max-width: var(--reading-col);
  }

.faq-item__answer p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--chrome-warm);
  }

.faq-item__answer p + p { margin-top: 14px; }

/* ============ CALLOUT BOX (BLOCK: callout-box) ============ */
  .callout {
    margin-top: 20px;
    padding: 18px 22px;
    background: var(--hull-panel);
    box-shadow: var(--chrome-top-soft), 0 6px 16px -8px rgba(0,0,0,0.7);
    position: relative;
  }

.callout__label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
  }

.callout__body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--chrome-warm);
  }

.callout--key {
    border-left: 2px solid var(--ember);
  }

.callout--key .callout__label { color: var(--ember); }

.callout--did {
    border-left: 2px solid var(--chrome-glint);
  }

.callout--did .callout__label { color: var(--chrome-glint); }

.callout--caution {
    border-left: 2px solid var(--ember-forge);
    background: linear-gradient(90deg, rgba(232,93,24,0.06) 0%, var(--hull-panel) 60%);
  }

.callout--caution .callout__label { color: var(--ember-forge); }

/* ============ STILL STUCK BAND (BLOCK: still-stuck-band) — hull-plate Variant G ============ */
  .still-stuck {
    position: relative;
    background: var(--bg-section-deep);
    padding: 128px 48px;
    overflow: hidden;
    isolation: isolate;
  }

.still-stuck::before {
    /* Variant G: two vertical hull plates + hair-thin ember seam vertical */
    content:'';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,
        #0B0B0B 0%,
        #0F0F0F 49.85%,
        rgba(255,179,71,0.75) 49.95%,
        var(--ember) 50%,
        rgba(255,179,71,0.75) 50.05%,
        #0F0F0F 50.15%,
        #0B0B0B 100%);
    z-index: -2;
  }

.still-stuck::after {
    /* Dark overlay 62% + ember bleed at seam */
    content:'';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(255,122,46,0.14) 0%, transparent 32%),
      linear-gradient(180deg, rgba(6,6,6,0.68) 0%, rgba(6,6,6,0.72) 100%);
    z-index: -1;
  }

.still-stuck__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

.still-stuck__eyebrow {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }

.still-stuck__eyebrow::before,
  .still-stuck__eyebrow::after {
    content:'';
    width: 32px;
    height: 1px;
    background: var(--ember);
    box-shadow: 0 0 8px rgba(255,122,46,0.6);
  }

.still-stuck__title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--chrome-highlight);
    letter-spacing: 0.8px;
    margin-bottom: 16px;
  }

.still-stuck__lede {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--chrome-warm);
    max-width: 52ch;
    margin: 0 auto 40px;
  }

.still-stuck__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 26px;
  }

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-on-ember);
    background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
    border: none;
    cursor: pointer;
    box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255,255,255,0.28);
    transition: box-shadow 0.2s;
  }

.btn-primary:hover { box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255,255,255,0.35); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--chrome-warm);
    background: transparent;
    border: 1px solid rgba(62,62,62,0.7);
    cursor: pointer;
    transition: all 0.2s;
  }

.btn-ghost:hover {
    background: var(--hull-panel-lift);
    box-shadow: var(--chrome-top-soft);
    color: var(--chrome-highlight);
    border-color: rgba(255,122,46,0.4);
  }

.still-stuck__response {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--chrome-dim);
    letter-spacing: 0.02em;
  }

.still-stuck__response .dot {
    color: var(--ember);
    margin: 0 10px;
  }

/* ============ TRUST CHIP BAND (BLOCK: trust-chip-band) ============ */
  .trust-band {
    background: var(--bg-page);
    padding: 40px 48px 48px;
    border-top: 1px solid rgba(255,122,46,0.28);
    position: relative;
  }

.trust-band::before {
    content:'';
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 22px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,122,46,0.24) 0%, transparent 70%);
    pointer-events: none;
  }

.trust-band__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

.trust-chip {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 4px;
  }

.trust-chip__glyph {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ember);
    filter: drop-shadow(0 0 6px rgba(255,122,46,0.5));
  }

.trust-chip__glyph svg { width: 100%; height: 100%; }

.trust-chip__label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ember);
    display: block;
    margin-bottom: 6px;
  }

.trust-chip__value {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--chrome-warm);
  }

/* ============ SITE FOOTER (BLOCK: site-footer) ============ */
  .site-footer {
    background: var(--bg-footer);
    padding: 80px 48px 40px;
    position: relative;
    border-top: 1px solid rgba(46,46,46,0.5);
    box-shadow: var(--chrome-top-soft);
  }

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
  }

.site-footer__cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(36,36,36,0.9);
  }

.site-footer__brand-col p {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--chrome-dim);
    margin-top: 18px;
    max-width: 32ch;
  }

.site-footer__col-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--chrome-warm);
    margin-bottom: 20px;
  }

.site-footer__links { display: flex; flex-direction: column; gap: 10px; }

.site-footer__links a {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--chrome-dim);
    transition: color 0.2s;
  }

.site-footer__links a:hover { color: var(--ember); }

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--chrome-dim);
  }

.site-footer__bottom .set { display: flex; gap: 22px; }

/* ============ RESPONSIVE ============ */
  @media (max-width: 960px) {
    .site-header__inner { grid-template-columns: auto auto; padding: 16px 24px; }
    .site-header__nav { display: none; }
    .hero-compact { padding: 64px 24px 56px; }
    .hero-compact__title { font-size: 38px; letter-spacing: 0.8px; }
    .faq-controls { padding: 32px 24px; }
    .faq-controls__search-row { justify-content: flex-start; }
    .faq-search { width: 100%; }
    .faq-accordion-section { padding: 56px 24px 96px; }
    .faq-accordion-section__inner { gap: 64px; }
    .faq-group__header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .faq-item__summary { font-size: 17px; gap: 16px; }
    .still-stuck { padding: 88px 24px; }
    .still-stuck__title { font-size: 30px; letter-spacing: 0.8px; }
    .still-stuck__ctas { flex-direction: column; align-items: stretch; }
    .btn-primary, .btn-ghost { justify-content: center; }
    .trust-band { padding: 32px 24px 40px; }
    .trust-band__inner { grid-template-columns: 1fr 1fr; gap: 20px; }
    .site-footer { padding: 56px 24px 32px; }
    .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
    .site-footer__bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
  }

@media (max-width: 480px) {
    .trust-band__inner { grid-template-columns: 1fr; }
    .site-footer__cols { grid-template-columns: 1fr; }
    .hero-compact__title { font-size: 32px; letter-spacing: 0.8px; }
  }

/* 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 14026 canonical 13492:tf-search-input-1 -- */
:root {
  /* Orange 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 / white highlights */
  --chrome-highlight: #FAFAFA;
  --chrome-glint: #E8E4DD;
  --chrome-warm: #F5F0E8;
  --chrome-dim: #B8B0A6;

  /* Semantic surface roles */
  --bg-carbon: var(--carbon);
  --bg-void: var(--void);
  --bg-charcoal: var(--charcoal);
  --bg-charcoal-warm: var(--charcoal-warm);
  --bg-card: rgba(20,20,20,0.94);
  --bg-card-dark: rgba(15,15,15,0.90);
  --bg-card-lift: var(--hull-panel-lift);

  /* Text roles */
  --text-primary: var(--chrome-warm);
  --text-headline: var(--chrome-highlight);
  --text-dim: var(--chrome-dim);
  --text-accent: var(--ember);
  --text-on-ember: var(--on-primary-fixed);

  /* Elevation */
  --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 16px 40px -12px rgba(0,0,0,0.95);
  --ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
  --ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
  --ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
  --chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);

  /* Type */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Onest', sans-serif;
}

.hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  max-width: 560px;
  padding: 14px 18px 14px 22px;
  border: 1px solid rgba(255,122,46,0.35);
  background: linear-gradient(180deg, rgba(255,122,46,0.06), rgba(6,6,6,0.35));
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-search:focus-within {
  border-color: var(--ember);
  box-shadow: 0 8px 26px -10px rgba(255,122,46,0.55);
}

.hero-search__glyph {
  font-size: 16px;
  color: var(--ember);
  flex-shrink: 0;
  line-height: 1;
}

.hero-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--chrome-highlight);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 2px 0;
  outline: none;
}

.hero-search__input::placeholder { color: var(--chrome-dim); }

.hero-search__submit {
  border: none;
  background: transparent;
  color: var(--ember);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 6px;
  flex-shrink: 0;
}

.hero-search__submit:hover { color: var(--ember-glow); }

.hero-search--empty {
  border-color: rgba(232,93,24,0.65);
  background: linear-gradient(180deg, rgba(232,93,24,0.10), rgba(6,6,6,0.4));
}

.hero-search--empty:focus-within {
  border-color: var(--ember-forge);
  box-shadow: 0 8px 26px -10px rgba(232,93,24,0.6);
}
</style>
</head>
<body>

<!-- ============ SITE HEADER ============ -->
<header class="site-header">
  <div class="site-header__inner">
    <a class="site-header__brand" href="/">
      <span class="site-header__brand-mark" aria-hidden="true"></span>
      ARTSABERS
    </a>
    <nav class="site-header__nav">
      <a href="/lightsabers/">Lightsabers</a>
      <a href="/helmets/">Helmets</a>
      <a href="/parts/">Parts & Accessories</a>
      <a href="/offers/">Offers</a>
      <a href="/about/">About</a>
    </nav>
    <div class="site-header__actions">
      <a href="/account/">Account</a>
      <a class="site-header__cart" href="/cart/">
        Cart <span class="site-header__cart-badge">0</span>
      </a>
    </div>
  </div>
</header>

<!-- ============ COMPACT HERO ============ -->
<a id="tf-hero-utility-1" data-tf-family="hero-utility" style="display:contents"></a>
<section class="hero-compact">
  <div class="hero-compact__inner">
    <div class="hero-compact__breadcrumb">
      <a href="/">Home</a><span class="sep">/</span><a href="/support/">Support</a><span class="sep">/</span>Workshop FAQ
    </div>
    <span class="hero-compact__eyebrow">Workshop FAQ</span>
    <h1 class="hero-compact__title">The questions people actually ask.</h1>
    <p class="hero-compact__lede">Straight answers. No corporate FAQ theatre — if a limitation exists, it's called out.</p>
  </div>
</section>

<div class="panel-seam" aria-hidden="true"></div>

<!-- ============ FAQ CONTROLS ============ -->
<section class="faq-controls">
  <div class="faq-controls__inner">
    <a id="tf-filter-chip-strip-1" data-tf-family="filter-chip-strip" style="display:contents"></a>
<div class="faq-controls__chip-row" role="tablist" aria-label="FAQ categories">
      <button class="faq-chip is-active" role="tab" aria-selected="true">All <span class="faq-chip__count">(28)</span></button>
      <button class="faq-chip" role="tab">Orders & Shipping <span class="faq-chip__count">(9)</span></button>
      <button class="faq-chip" role="tab">Products <span class="faq-chip__count">(8)</span></button>
      <button class="faq-chip" role="tab">Warranty <span class="faq-chip__count">(4)</span></button>
      <button class="faq-chip" role="tab">Returns & Refunds <span class="faq-chip__count">(4)</span></button>
      <button class="faq-chip" role="tab">Wholesale <span class="faq-chip__count">(3)</span></button>
    </div>
    <div class="faq-controls__search-row">
      <a id="tf-search-input-1" data-tf-family="search-input" style="display:contents"></a>
<form class="hero-search" action="/" method="get" role="search">
      <span class="hero-search__glyph" aria-hidden="true">⚲</span>
      <input class="hero-search__input" type="search" name="s" value="starkiller" placeholder="Search the workshop…" autocomplete="off" aria-label="Search the workshop">
      <button class="hero-search__submit" type="submit" aria-label="Search">›</button>
    </form>
    </div>
  </div>
</section>

<!-- ============ FAQ ACCORDION ============ -->
<a id="tf-faq-accordion-1" data-tf-family="faq-accordion" style="display:contents"></a>
<section class="faq-accordion-section">
  <div class="faq-accordion-section__inner">

    <!-- Group 1 — Orders & Shipping -->
    <div class="faq-group" id="orders-shipping">
      <div class="faq-group__header">
        <h2 class="faq-group__label">Orders & Shipping</h2>
        <span class="faq-group__index">Group 01 / <span class="faq-group__index-num">9 questions</span></span>
      </div>
      <div class="faq-group__list">
        <details class="faq-item" open>
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">How long will my order take to arrive?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Same-day dispatch if you order before 2PM UK, then 24 hours anywhere else. UK orders arrive next working day. US orders arrive in 2–3 working days from our US warehouse. EU orders arrive in 3–5 working days from our UK warehouse. Tracked, free.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Do you ship internationally?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Yes — we ship to 30+ countries. Free tracked shipping on every order. See the checkout for your specific country.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Where do you ship from?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>UK warehouse (via Saber 66) for UK + EU customers. US warehouse for North American customers. Your order is picked from the closest warehouse automatically — no wait, no international customs surprises for domestic orders.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Do I pay customs or duties?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>US customers: no. Your order ships from our US warehouse. UK customers: no. EU customers: no — VAT is included at checkout, no surprise charges on delivery. Rest of world: taxes and duties may apply on arrival, based on your country's rules.</p>
            <div class="callout callout--did">
              <span class="callout__label">Did you know</span>
              <p class="callout__body">EU customers pay VAT at checkout via IOSS, so there's nothing extra at the door. Rest-of-world buyers should check their national threshold before ordering.</p>
            </div>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Can I track my order?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Yes. You'll get a tracking number by email as soon as your order ships. Track it any time from the order confirmation page or your account.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Can I change my order after placing it?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>If it hasn't shipped, yes — email <a href="mailto:shopping@artsabers.com" style="color:var(--ember);">shopping@artsabers.com</a> or use live chat, and we'll amend it. Once it's shipped it's a return.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">What if my order hasn't arrived?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Give it one extra working day beyond the estimate, then reach out on live chat or email — we'll investigate with the carrier and either resend or refund.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Do you offer expedited shipping?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Standard tracked is free and fast. If you need it there faster, contact us before ordering and we'll see what's possible.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">What's the shipping cutoff time?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>2PM UK time for same-day dispatch, Monday to Friday. Weekend orders ship on the next working day.</p>
          </div>
        </details>
      </div>
    </div>

    <!-- Group 2 — Products -->
    <div class="faq-group" id="products">
      <div class="faq-group__header">
        <h2 class="faq-group__label">Products</h2>
        <span class="faq-group__index">Group 02 / <span class="faq-group__index-num">8 questions</span></span>
      </div>
      <div class="faq-group__list">
        <details class="faq-item" open>
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Xenopixel V3 vs Proffie 2.2 vs Neopixel — what's the difference?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Xenopixel V3 is the mid-tier smart core: hundreds of sound fonts + blade effects, blade-length calibration, motion control. Proffie 2.2 is the enthusiast core: fully customisable sound + effects, config file editing, expandable. Neopixel is the blade type — a pixel strip inside the polycarbonate blade for pixel-accurate colour + effects, works with Xenopixel V3 or Proffie 2.2. Base-lit is the entry-level LED-in-hilt approach — no pixel strip, single-colour, cheaper.</p>
            <p>If you're duelling and want visual effects, Neopixel + Xenopixel V3 is the sweet spot. If you want to tinker, Proffie 2.2.</p>
            <div class="callout callout--key">
              <span class="callout__label">Key takeaway</span>
              <p class="callout__body">Saber Core = the electronics. Blade type = the tube. Match a smart core to a pixel blade for the full visual + audio experience; pair a base-lit core with a standard blade to save money.</p>
            </div>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Which hilt is best for duelling?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Anything in the Duelling Grade filter. Look for reinforced blade emitters, thick-wall polycarbonate blades (2mm+), and impact-tested electronics. Every Duelling Grade hilt is duelled in-house before it ships.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Can I customise blade colours?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Yes — Neopixel blades change colour on the fly via the hilt's control button or motion gestures. Base-lit hilts are single-colour, chosen at order. RGB LEDs on base-lit models offer multiple pre-set colours.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">What's included in the box?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Hilt, blade (unless bought separately), USB-C charging cable, quick-start card, and duelling warranty paperwork. Xenopixel V3 and Proffie 2.2 models include the SD card pre-configured with default sound fonts.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Are these safe for duelling?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Every hilt in the Duelling Grade filter is built to duel. Impact-tested electronics, reinforced emitters, thick-wall blades. That said — safety glasses, no head shots, and know your partner's limits. Duelling is a contact sport.</p>
            <div class="callout callout--caution">
              <span class="callout__label">Caution</span>
              <p class="callout__body">Safety glasses at all times. Head shots and full-power thrusts are how blades crack and eyes get hurt — the warranty won't cover damage from either.</p>
            </div>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Can I add sound fonts to my saber?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Xenopixel V3: swap fonts via the SD card, up to hundreds available. Proffie 2.2: full custom, edit the config file to add anything. Base-lit: no sound. See the product page's Electronics tab for what your core supports.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Do you sell replacement parts?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Yes — replacement blades, batteries, chargers, connectors, and specific electronics parts. See Parts & Accessories in the main menu.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">What's a Covertec wheel?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>The metal wheel on the hilt that clips into a belt-clip so you can carry the saber hands-free. We sell replacement Covertec wheels + belt clips + adapters in Parts & Accessories.</p>
          </div>
        </details>
      </div>
    </div>

    <!-- Group 3 — Warranty -->
    <div class="faq-group" id="warranty">
      <div class="faq-group__header">
        <h2 class="faq-group__label">Warranty</h2>
        <span class="faq-group__index">Group 03 / <span class="faq-group__index-num">4 questions</span></span>
      </div>
      <div class="faq-group__list">
        <details class="faq-item" open>
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">What does the 1-year duelling warranty cover?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>One year of duelling wear from the date of purchase. Covers electronics failure, blade cracking under normal duelling load, and manufacturing defects. Does NOT cover accidental damage from drops onto hard surfaces, deliberate abuse, or modification beyond stock config.</p>
            <div class="callout callout--key">
              <span class="callout__label">Key takeaway</span>
              <p class="callout__body">This is a duelling warranty, not a total-loss insurance policy. If the build fails under normal use, we cover it. If the saber gets destroyed doing something the manual warns against, we don't.</p>
            </div>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">How do I make a warranty claim?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Email <a href="mailto:shopping@artsabers.com" style="color:var(--ember);">shopping@artsabers.com</a> with your order number and photos / video of the issue. We'll assess within one working day — most claims are resolved without needing the hilt returned first.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Does the warranty cover accidental damage?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>No — the warranty is about the build, not against everything that could happen. If your dog steals the hilt and it goes over a balcony, that's not us. If the electronics stop igniting after a normal duel, that is.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Do you offer extended warranty?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Not currently. One year of duelling covers the failure modes we've actually seen at scale.</p>
          </div>
        </details>
      </div>
    </div>

    <!-- Group 4 — Returns & Refunds -->
    <div class="faq-group" id="returns-refunds">
      <div class="faq-group__header">
        <h2 class="faq-group__label">Returns & Refunds</h2>
        <span class="faq-group__index">Group 04 / <span class="faq-group__index-num">4 questions</span></span>
      </div>
      <div class="faq-group__list">
        <details class="faq-item" open>
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">What's your return policy?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>30 days from delivery, unopened + unused, in original packaging. Refund goes back to the original payment method within 5 working days of receipt at our warehouse.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">How do I start a return?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Email <a href="mailto:shopping@artsabers.com" style="color:var(--ember);">shopping@artsabers.com</a> with your order number and reason. We'll send a return label with instructions.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Who pays for return shipping?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Customer pays return shipping unless the return is a warranty claim or our error, in which case we cover it.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">How long do refunds take?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Within 5 working days of your return arriving at our warehouse. You'll get an email when the refund is processed.</p>
          </div>
        </details>
      </div>
    </div>

    <!-- Group 5 — Wholesale -->
    <div class="faq-group" id="wholesale">
      <div class="faq-group__header">
        <h2 class="faq-group__label">Wholesale</h2>
        <span class="faq-group__index">Group 05 / <span class="faq-group__index-num">3 questions</span></span>
      </div>
      <div class="faq-group__list">
        <details class="faq-item" open>
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Do you offer wholesale pricing?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Yes — for retail stores, event organisers, and duelling clubs. Email <a href="mailto:shopping@artsabers.com" style="color:var(--ember);">shopping@artsabers.com</a> with your business details and the SKUs / volumes you're looking at.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">What's the minimum order for wholesale?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Depends on the SKU mix. We'll quote a package once we've seen your requirements.</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-item__summary">
            <span class="faq-item__q-text">Do you support event props / theatre productions?</span>
            <svg class="faq-item__chevron" viewbox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 2 L10 7 L4 12"></path></svg>
          </summary>
          <div class="faq-item__answer">
            <p>Yes — we've supplied stage productions and event operators. Same email route, tell us what you're producing.</p>
          </div>
        </details>
      </div>
    </div>

  </div>
</section>

<!-- ============ STILL STUCK? BAND ============ -->
<a id="tf-inpage-cta-1" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="still-stuck">
  <div class="still-stuck__inner">
    <span class="still-stuck__eyebrow">Still stuck?</span>
    <h2 class="still-stuck__title">Ask a real person.</h2>
    <p class="still-stuck__lede">If your question isn't answered above, one of the workshop team will pick it up.</p>
    <div class="still-stuck__ctas">
      <a class="btn-primary" href="#chat">Open live chat <span aria-hidden="true">→</span></a>
      <a class="btn-ghost" href="mailto:shopping@artsabers.com">shopping@artsabers.com</a>
      <a class="btn-ghost" href="/contact/">Contact form <span aria-hidden="true">→</span></a>
    </div>
    <p class="still-stuck__response">Response times: ∼2 min live chat <span class="dot">·</span> ∼4 hr email <span class="dot">·</span> same-day Instagram DM.</p>
  </div>
</section>

<!-- ============ TRUST CHIP BAND ============ -->
<a id="tf-trust-chip-strip-1" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="trust-band">
  <div class="trust-band__inner">
    <div class="trust-chip">
      <span class="trust-chip__glyph" aria-hidden="true">
        <svg viewbox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="4" y="9" width="20" height="14"></rect><path d="M24 13h4l4 4v6h-8z"></path><circle cx="10" cy="26" r="2.5"></circle><circle cx="24" cy="26" r="2.5"></circle></svg>
      </span>
      <div>
        <span class="trust-chip__label">24-hour dispatch</span>
        <span class="trust-chip__value">From UK + US warehouses</span>
      </div>
    </div>
    <div class="trust-chip">
      <span class="trust-chip__glyph" aria-hidden="true">
        <svg viewbox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 10h22v14H6z"></path><path d="M6 24l6-6h10l6 6"></path><circle cx="17" cy="15" r="3"></circle></svg>
      </span>
      <div>
        <span class="trust-chip__label">UK customer service</span>
        <span class="trust-chip__value">Live chat during working hours</span>
      </div>
    </div>
    <div class="trust-chip">
      <span class="trust-chip__glyph" aria-hidden="true">
        <svg viewbox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M17 4l12 4v10c0 7-5 12-12 14C10 30 5 25 5 18V8z"></path><path d="M12 17l4 4 7-7"></path></svg>
      </span>
      <div>
        <span class="trust-chip__label">1-year duelling warranty</span>
        <span class="trust-chip__value">Covers the way you'll actually use it</span>
      </div>
    </div>
    <div class="trust-chip">
      <span class="trust-chip__glyph" aria-hidden="true">
        <svg viewbox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M17 4l3.7 8.6L30 13.7l-7 6.4L24.6 30 17 25.4 9.4 30 11 20.1l-7-6.4 9.3-1.1z"></path></svg>
      </span>
      <div>
        <span class="trust-chip__label">2,400+ five-star reviews</span>
        <span class="trust-chip__value">From duellists and collectors</span>
      </div>
    </div>
  </div>
</section>

<!-- ============ SITE FOOTER ============ -->
<footer class="site-footer">
  <div class="site-footer__inner">
    <div class="site-footer__cols">
      <div class="site-footer__brand-col">
        <a class="site-header__brand" href="/">
          <span class="site-header__brand-mark" aria-hidden="true"></span>
          ARTSABERS
        </a>
        <p>From factory floor to your door. Every character, every Saber Core, every duelling grade — backed by real support.</p>
      </div>
      <div>
        <h3 class="site-footer__col-title">Shop</h3>
        <div class="site-footer__links">
          <a href="/lightsabers/">Lightsabers</a>
          <a href="/helmets/">Cosplay helmets</a>
          <a href="/parts/">Parts & accessories</a>
          <a href="/offers/">Offers & deals</a>
          <a href="/bundles/">Helmet + saber bundles</a>
        </div>
      </div>
      <div>
        <h3 class="site-footer__col-title">Support</h3>
        <div class="site-footer__links">
          <a href="/faq/">Workshop FAQ</a>
          <a href="/shipping/">Shipping & delivery</a>
          <a href="/returns/">Returns & refunds</a>
          <a href="/warranty/">Duelling warranty</a>
          <a href="/contact/">Contact us</a>
        </div>
      </div>
      <div>
        <h3 class="site-footer__col-title">Brand</h3>
        <div class="site-footer__links">
          <a href="/about/">About ARTSABERS</a>
          <a href="/workshop/">Inside the workshop</a>
          <a href="/blog/">Journal</a>
          <a href="/wholesale/">Wholesale</a>
          <a href="/press/">Press</a>
        </div>
      </div>
      <div>
        <h3 class="site-footer__col-title">Follow</h3>
        <div class="site-footer__links">
          <a href="#">Instagram</a>
          <a href="#">TikTok</a>
          <a href="#">YouTube</a>
          <a href="#">Discord</a>
          <a href="#">Reddit</a>
        </div>
      </div>
    </div>
    <div class="site-footer__bottom">
      <span>© 2026 ARTSABERS · Part of Nerdworks</span>
      <div class="set">
        <a href="/privacy/">Privacy</a>
        <a href="/terms/">Terms</a>
        <a href="/cookies/">Cookies</a>
        <a href="/accessibility/">Accessibility</a>
      </div>
    </div>
  </div>
</footer>

</body>
</html>