ARTSABERS — Shop Archive Build Brief

Purpose

The universal WooCommerce shop archive template. Serves /shop/ and every /product-category/*/ URL. Header title, description, and result set are dynamically populated per URL by WooCommerce; this brief describes slots and layout, not fixed content. The archive is the end of the funnel — the category landers direct users here for the filter/sort/grid experience.

Direction

Kyber Hull — apply the direction from SAS1. Carbon / void / charcoal grounds; warm orange ember forge accent on CTAs, hairlines, and one-line ember accents; warm off-white body text; pure white reserved for physical light-catch points only; heading font on display copy, body font on prose; zero border-radius sitewide; alternating plain and hull-plate patterned rhythm across sections.

Sections (top to bottom)

1. Header — compact hull-plate imagery band with overlay

MANDATORY HEIGHT: 500px maximum rendered height (target ~400–500px). This is a compact archive header, NOT an editorial hero. Do not inflate with meta rows, HUD telemetry, or extra prose. The archive’s identity is the product grid — the header is a small brand-consistent frame above it.

• MANDATORY IMAGERY: the background MUST load this URL as background-image: url('...'): https://camcom.dev/generated_imgs/generated-2026-07-07T15-48-07-970Z-oehwsm.jpg — this is Variant G, the vertical smooth-architectural hull-plate. Do NOT substitute a CSS-authored ember-glow / panel-seam effect. The image must be loaded via an <img> tag or background-image. Dark linear-gradient overlay 58–74% sits on top for text legibility.
• Renders the dynamic category name (or “Shop All” on /shop/) in ember accent display type — large heading scale.
• Short category description below in warm off-white body — dynamic, may be short (WC category description) or absent (/shop/ carries a brand-level tagline). One line or two, not a paragraph.
• At the base of the header, a trust chip strip. Verbatim copy: 24-hour UK dispatch · UK customer service · 1-year duelling warranty · 2,400+ five-star reviews. Same as the category landers, for direct-landing reassurance.
• Do NOT include a meta/HUD stats row (SKU counts, tier counts, etc). Explicitly banned from this section.

2. Trust bar section

• Full-width horizontal 4-chip band on carbon ground.
• Each chip = icon + primary claim + one-line evidence.
• Same shape and copy as MAS49’s dedicated trust bar section — direct-landing users need this reinforcement.

3. Main shop area — two-column split (sidebar filter + grid)

Sidebar (left column):

• Sits on the carbon section ground, no distinct panel treatment.
• Filter groups, collapsible: Category (if not already URL-scoped), Electronics, Hilt Style, Colour, Blade Length, Allegiance, Features, Accessories, Stock Status, Price Range.
• Each filter group: title + expandable list of options with checkboxes and result counts.
• Active-filter chips row at the top of the sidebar (visible only when filters are active) + a “Clear all” link in ember accent.

Right column: toolbar + grid + banner + pagination.

Toolbar row (above grid):

• Left: result count text — “N products” (dynamic).
• Right: sort dropdown — options: Featured / Newest / Price ↑ / Price ↓ / Best selling.

3-across product grid — USE THE PROVIDED CARD BLOCK VERBATIM:

The product card block below is lifted verbatim from MAS49 (the approved reference mockup). Use its markup and CSS EXACTLY — do NOT re-author, do NOT invent placeholder CSS silhouettes, do NOT substitute a different card shape. Paste this into your page CSS + repeat the markup pattern for every card in the grid, substituting real product data. This is a strict “use this block verbatim” instruction, not a reference.

PURPOSE: Featured-bestseller product card — square real-hilt media with inline trust badge (in-stock / low-stock), spec table (Saber Core, blade type, sound fonts), tabular ember price, view-saber CTA. Modifier --hot for ember-hot-rim glow on featured hero card.

MARKUP (per card):
<article class="product-card">
  <div class="product-card__media" style="background-image: url('PRODUCT_IMAGE_URL');">
    <span class="product-card__badge">In stock · Ships today</span>
  </div>
  <div class="product-card__body">
    <div class="product-card__meta">Character · Prequel Era</div>
    <h3 class="product-card__name">PRODUCT NAME</h3>
    <div class="product-card__specs">
      <div class="product-card__spec"><span class="product-card__spec-label">Saber Core</span><span class="product-card__spec-value">Xenopixel V3</span></div>
      <div class="product-card__spec"><span class="product-card__spec-label">Blade type</span><span class="product-card__spec-value">Neopixel · Duelling</span></div>
      <div class="product-card__spec"><span class="product-card__spec-label">Sound fonts</span><span class="product-card__spec-value">34 + custom</span></div>
    </div>
    <div class="product-card__foot">
      <div class="product-card__price">$PRICE</div>
      <a href="#" class="product-card__cta">View saber &rarr;</a>
    </div>
  </div>
</article>

CSS (paste verbatim into the page's <style> block):
.product-card { background: rgba(20,20,20,0.94); backdrop-filter: blur(3px); box-shadow: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9); display: flex; flex-direction: column; transition: all 0.3s ease; position: relative; }
.product-card:hover { box-shadow: inset 0 1px 0 rgba(250,250,250,0.15), 0 12px 32px -8px rgba(0,0,0,0.95), 0 0 32px rgba(255,122,46,0.2); transform: translateY(-4px); }
.product-card--hot { box-shadow: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5); }
.product-card__media { position: relative; aspect-ratio: 1/1; background-color: #0a0a0a; background-size: contain; background-position: center; background-repeat: no-repeat; }
.product-card__badge { position: absolute; top: 16px; right: 16px; font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; padding: 6px 10px; background: rgba(6,6,6,0.85); color: var(--ember); border: 1px solid rgba(255,122,46,0.4); display: inline-flex; align-items: center; gap: 6px; }
.product-card__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px rgba(255,122,46,0.8); }
.product-card__badge--low { color: var(--ember-glow); border-color: rgba(255,179,71,0.5); }
.product-card__badge--low::before { background: var(--ember-glow); }
.product-card__body { background: var(--hull-panel-lift); padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.product-card__meta { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--chrome-dim); margin-bottom: 10px; }
.product-card__name { font-family: var(--font-display); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--chrome-highlight); margin-bottom: 14px; line-height: 1.1; }
.product-card__specs { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted rgba(184,176,166,0.2); }
.product-card__spec { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-body); font-size: 12px; padding: 4px 0; }
.product-card__spec-label { color: var(--chrome-dim); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-display); }
.product-card__spec-value { color: var(--chrome-warm); font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.product-card__price { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--ember); font-variant-numeric: tabular-nums; }
.product-card__cta { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--chrome-warm); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--ember); transition: color 0.2s; }
.product-card__cta:hover { color: var(--ember); }

Real ARTSABERS product data — use these 8 real products from the live catalogue as the first 8 cards in the grid; use them again with tier/blade variations for the remaining 10 cards to fill the 18-card grid:

1. Carbon Strike Lightsaber – Xenopixel V3 — $459.99, in stock — https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg
2. Clone Wars Ahsoka Tano Duelling Lightsabers – RGB-X — $534.99, in stock — https://artsabers.com/wp-content/uploads/sites/10/2025/01/Clone_Wars_Ahsoka_Combo_1-768x768.jpg
3. Clone Wars Ahsoka Tano Lightsabers – Xenopixel V3 — $724.99, in stock — https://artsabers.com/wp-content/uploads/sites/10/2025/01/Clone_Wars_Ahsoka_Combo_1-768x768.jpg
4. Starkiller SE Duelling Lightsaber – S-RGB — $179.99, in stock — https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg
5. Starkiller SE Lightsaber – Proffie 2.2 — $299.99, in stock — https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg
6. Mace Windu SE Duelling Lightsaber – S-RGB — $164.99, in stock — https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg
7. Mace Windu SE Lightsaber – Proffie 2.2 — $284.99, in stock — https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg
8. Dark Hunter Duelling Lightsaber – S-RGB — $184.99, in stock — https://artsabers.com/wp-content/uploads/sites/10/2025/12/Dark_Hunter_1-768x768.jpg

Use the appropriate Character · Prequel Era style meta line per product (Character · Original Trilogy / Character · Prequel Era / Character · Sequel Era / etc. — pick believably per hilt). Vary the Saber Core spec (Xenopixel V3, SNV4 PRO, Proffie 2.2, S-RGB), blade type (Neopixel · Duelling / Baselit · Standard / Pixel-in-tube · Duelling), and sound fonts (34 + custom, 26 + custom, 18 stock) per card so the grid reads varied. Apply product-card--hot to ONE featured card in the top row for the ember-rim glow. Use product-card__badge--low on a couple of cards showing “Low stock · N left”.

Grid density: 3-across desktop, 18 cards per page.

In-grid marketing banner slot:

• Desktop (3-col): banner sits between grid row 2 and row 3 — after product 6, before product 7. Spans all 3 columns (grid-column: 1 / -1).
• Mobile (2-col at ~900px): grid collapses 3→2 columns; banner re-positions between row 5 and row 6 (after product 10, before product 11) via CSS grid order. Single DOM node, viewport-repositioned.
• Small phones (1-col fallback at ~480px): banner sits mid-scroll of page 1.
• Shape: wider than tall, roughly 1:3 to 1:4 aspect ratio.
• Content: an operator-controlled marketing beat — a promo message (“FREE RGB SABER WITH ORDERS OVER $350”), a featured collection tease, a video callout, or a UGC feature. Mockup should render one plausible example so the shape reads.
• Direction: Kyber Hull styling — hull-plate imagery variant with overlay, or dark carbon with ember accent, or ember gradient. Match brand voice.
• Note: the backing store (per-category ACF field / global option / block pattern) is a conversion-phase decision — not resolved here.

Pagination:

• Bottom of the grid. Page numbers + prev/next, ember accent on the active page.

4. Empty-state / no-results state

• Renders inline when filters return zero products.
• Panel treatment: Kyber Hull hull-plate slice with ember hairline at the top border.
• Verbatim copy: No sabers match those filters yet.
• Primary CTA in ember accent: Clear filters.
• For the mockup: do NOT render this state inline below the populated grid — the mockup shows the populated-grid state. Show the empty-state elsewhere (a compact preview aside or a documented but unrendered spec) or omit from the primary rendering.

5. SEO body-copy section — NEW

Full-width, sits below the main shop area (below both the sidebar and the grid), above the post-grid reinforcement band. Long-form editorial content targeting informational search queries for this category. On carbon ground.

• Column-constrained max-width (~800–960px), centred within a full-width band.
• Structure: eyebrow label (“ABOUT ARTSABERS LIGHTSABERS” or similar dynamic-per-category), a display-scale H2 headline in ember accent, then 3–5 short prose sections with H3 sub-headings and body-font paragraphs. The prose should read as genuine buyer-guide editorial — the kind of long-form content that ranks for informational queries.
• Example section headings for the /shop/ page (the mockup should render one plausible set): “What makes an ARTSABERS lightsaber different?”, “Choosing your first saber core (S-RGB / SNV4 PRO / Proffie 2.2 / Xenopixel V3)”, “Duelling grade vs display grade — which is right for you?”, “Blade colour and character authenticity”. Each 40–80 words of believable, brand-voice prose.
• Optional: a small link cluster at the bottom of the section pointing to internal category pages (“Explore by character”, “Explore by saber core”, “Explore by duelling grade”) — three ember-accent text links, one line.
• Kyber Hull styling — carbon ground, no distinct panel treatment, subtle rule between the section and the reinforcement band below (an ember hairline or a panel-seam).

6. Post-grid brand-reinforcement band

• MANDATORY IMAGERY: the background MUST load this URL as background-image: url('...'): https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg — this is Variant F, the horizontal smooth-architectural hull-plate. Do NOT substitute a CSS-authored ember-glow effect. Dark linear-gradient overlay sits on top for text legibility.
• Single-line brand-reinforcement copy in the Kyber Hull voice — e.g. “Every hilt hand-tested in-house · Global 7–10 day delivery · 2,400+ five-star reviews” (subagent may propose consistent voice).
• Compact — a beat, not a full section (~120px rendered height).
• Closes the archive before the site footer.

7. Site footer

Standard site chrome. Not brief content.

Alternation rhythm

• Header — Variant G patterned with overlay (loaded via URL)
• Trust bar — plain carbon
• Main shop area — plain carbon
• SEO body-copy — plain carbon (subtle rule below)
• Post-grid reinforcement — Variant F patterned with overlay (loaded via URL)
• Site footer — chrome

What this template deliberately does NOT include

• No sticky floating shop-launcher — user is already at the funnel bottom.
• No sub-category browse tiles — end of funnel; the category landers own that entry-point.
• No hero-scale bespoke editorial header — the header band is compact (≤500px) and dynamic-content-scaled.
• No meta/HUD stats row in the header.
• No CSS-authored placeholder saber silhouettes in product cards — cards use real product imagery URLs (listed above) and the verbatim card block from MAS49.

Copy locks (verbatim)

• Trust chip strip: 24-hour UK dispatch · UK customer service · 1-year duelling warranty · 2,400+ five-star reviews
• Empty state: No sabers match those filters yet. + CTA Clear filters
• All other prose (category name, description, sort options, filter labels) is standard WooCommerce or brand voice.