← War Dungeon

War Dungeon — Shop Archive — Combat Patrols (desktop-first)

MWD15 Category Page War Dungeon
Open in New Tab
Pick a template type (suggested from BBWD12: WooCommerce + Gutenberg Content):

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>Combat Patrols · Space Marines — War Dungeon</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=Literata:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400&family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
<style>
/* ==========================================================
   TOKENS — verbatim from War Dungeon · Frontier styleguide
   Chromatic identifiers and surface semantics live in
   strictly separate namespaces (fidelity checklist LAW).
   ========================================================== */
:root {
  /* --- Chromatic identifiers (hues; ACCENT use only) --- */
  --primary: #C5A688;
  --secondary: #D8C3B1;
  --tertiary: #F4A479;
  --dark: #1B1314;
  --light: #FFFFFF;
  --text: #613F34;
  --neutral: #2B1B1C;
  --accent: #832D15;
  --positive: #4A6E50;
  --negative: #C8442D;
  --rodeo: #C5A688;
  --rodeo-light: #D8C3B1;
  --caput: #613F34;
  --cowboy: #2B1B1C;
  --liquourice: #1B1314;
  --sienna: #832D15;
  --bronze: #F4A479;
  --white: #FFFFFF;

  /* --- Surface semantics (roles; BG / TEXT use only) --- */
  --bg-page: var(--rodeo);
  --bg-dark: var(--liquourice);
  --bg-panel-darker: var(--liquourice);
  --bg-panel-stamp: var(--sienna);
  --bg-card-on-light: var(--rodeo-light);
  --bg-card-on-dark: var(--liquourice);
  --bg-elevated: var(--cowboy);
  --bg-inverted-panel: var(--cowboy);
  --bg-filter-group: var(--liquourice);

  --text-on-light: var(--caput);
  --text-on-dark: var(--white);
  --text-on-stamp: var(--white);
  --text-on-card-dark: var(--white);
  --text-on-card-light: var(--caput);
  --text-eyebrow: var(--sienna);
  --text-eyebrow-on-dark: var(--bronze);
  --text-muted-on-dark: var(--rodeo-light);

  /* --- Typography --- */
  --font-display: 'Literata', 'Modesto Condensed', 'modesto-condensed', 'Playfair Display', 'EB Garamond', Georgia, serif;
  --font-body: 'EB Garamond', 'Palatino Linotype', 'palatino-linotype', Georgia, serif;
  --font-mono: 'Courier Prime', 'Courier New', monospace;

  --fs-display: 96px;
  --fs-h1: 64px;
  --fs-h2: 48px;
  --fs-h3: 36px;
  --fs-h4: 24px;
  --fs-body-lg: 22px;
  --fs-body: 18px;
  --fs-body-sm: 16px;
  --fs-eyebrow: 13px;
  --micro: 12px;

  /* Legacy aliases used by catalogue blocks */
  --body-lg: var(--fs-body-lg);
  --body: var(--fs-body);
  --body-sm: var(--fs-body-sm);
  --h3: var(--fs-h3);

  --lh-tight: 1.2;
  --lh-heading: 1.35;
  --lh-body: 1.5;
  --lh-card: 1.35;
  --lh-ui: 1.2;

  --ls-tight: -0.01em;
  --ls-heading: 0;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;
  --ls-widest: 0.16em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --r-none: 0;  --r-sm: 4px; --r-md: 7px; --r-lg: 14px; --r-xl: 21px;

  --shadow-sm: 2px 2px 0 rgba(27,19,20,0.85);
  --shadow-md: 4px 4px 0 rgba(27,19,20,0.9);
  --shadow-lg: 6px 6px 0 rgba(27,19,20,0.95);
  --shadow-xl: 8px 8px 0 rgba(27,19,20,1);
  --shadow-stamp: 3px 3px 0 var(--caput);

  --gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><g fill='none' stroke='%23F4A479' stroke-opacity='0.07' stroke-width='1'><circle cx='110' cy='110' r='28'/><circle cx='110' cy='110' r='44'/><circle cx='110' cy='110' r='62'/><circle cx='30' cy='30' r='12'/><circle cx='190' cy='30' r='12'/><circle cx='30' cy='190' r='12'/><circle cx='190' cy='190' r='12'/><path d='M110 70v8M110 142v8M70 110h8M142 110h8'/></g></svg>");
}

/* ==========================================================
   BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-light);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* Rivet utility (catalogue) */
.rivet-panel { position: relative; }
.rivet {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bronze);
  border: 2px solid var(--caput);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 1px 1px 0 var(--caput);
  z-index: 2;
}
.rivet--tl { top: 8px; left: 8px; }
.rivet--tr { top: 8px; right: 8px; }
.rivet--bl { bottom: 8px; left: 8px; }
.rivet--br { bottom: 8px; right: 8px; }

/* ==========================================================
   eyebrow-stamp  [REUSE — catalogue verbatim]
   ========================================================== */
.eyebrow-stamp {
  display: inline-block;
  padding: 6px 16px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--caput);
  background: var(--bronze);
  border: 2px ridge var(--bronze);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp);
}

/* ==========================================================
   btn  [REUSE — catalogue verbatim]
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--light);
  background: var(--sienna);
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms linear;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: inset 0 0 0 1px var(--caput), 3px 3px 0 var(--caput); }
.btn--ghost { color: var(--bronze); background: transparent; }
.btn--lg { padding: 18px 36px; font-size: var(--fs-h4); }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 10px 18px; font-size: var(--fs-body-sm); }

/* ==========================================================
   preheader-bar  [REUSE — catalogue verbatim]
   ========================================================== */
.preheader-bar {
  background: var(--liquourice);
  color: var(--rodeo-light);
  font-family: var(--font-body);
  font-size: var(--micro);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--caput);
}
.preheader-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.preheader-bar__msg { display: flex; align-items: center; gap: var(--sp-3); }
.preheader-bar__msg::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bronze);
}
.preheader-bar__links { display: flex; gap: var(--sp-5); }
.preheader-bar__links a { color: var(--bronze); }
@media (max-width: 640px) { .preheader-bar__links { display: none; } }

/* ==========================================================
   site-header  [REUSE — catalogue verbatim]
   ========================================================== */
.site-header {
  background: var(--bg-panel-darker);
  border-bottom: 2px ridge var(--bronze);
  box-shadow: inset 0 0 0 1px var(--caput);
}
.site-header__inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
  padding: 16px 40px;
  max-width: 1440px; margin: 0 auto;
}
.site-header__brand {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--caput);
  background: var(--liquourice);
}
.site-header__cog {
  width: 28px; height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23F4A479' stroke-width='1.4'><circle cx='14' cy='14' r='5'/><circle cx='14' cy='14' r='9'/><path d='M14 1v4M14 23v4M1 14h4M23 14h4M5 5l3 3M20 20l3 3M23 5l-3 3M5 23l3-3'/></svg>");
}
.site-header__word {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
  line-height: 1;
}
.site-header__word small { display: block; font-size: 9px; color: var(--rodeo-light); margin-top: 2px; letter-spacing: var(--ls-wider); }
.site-header__nav { display: flex; gap: 0; justify-content: center; }
.site-header__nav-item {
  position: relative;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--rodeo-light);
}
.site-header__nav-item + .site-header__nav-item::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--bronze); transform: translate(-3px, -50%);
}
.site-header__nav-item--has-mega::after { content: " ▾"; font-size: 10px; color: var(--bronze); }
.site-header__nav-item.is-active { color: var(--bronze); }
.site-header__tools { display: flex; gap: 12px; align-items: center; }
.site-header__tool {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cowboy);
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--caput);
  color: var(--bronze);
}
.site-header__tool--basket {
  width: auto; padding: 0 12px; gap: 8px;
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.site-header__points {
  padding: 2px 6px; font-size: 10px;
  background: var(--bronze); color: var(--liquourice);
  border-radius: 999px; border: 1px solid var(--caput);
}
@media (max-width: 980px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; gap: 16px; padding: 12px 20px; }
  .site-header__nav { display: none; }
}

/* ==========================================================
   breadcrumbs  [REUSE — catalogue verbatim]
   ========================================================== */
.breadcrumbs {
  background: var(--rodeo);
  border-top: 1px solid var(--caput);
  border-bottom: 1px solid var(--caput);
  padding: var(--sp-4) 0;
  color: var(--caput);
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
.breadcrumbs__inner { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.breadcrumbs__sep { color: var(--sienna); margin: 0 var(--sp-1); }
.breadcrumbs__item--current { color: var(--sienna); }

/* ==========================================================
   archive-toolbar  [NEW — desktop pairing rule for this page]
   Archive header (LEFT) + sort bar (RIGHT) in the same horizontal band.
   Inverted panel ground; conversation-density on the right side.
   ========================================================== */
.archive-toolbar {
  background-color: var(--cowboy);
  background-image: var(--gear-pattern);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--caput);
}
.archive-toolbar__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: stretch;
  padding: var(--sp-7);
  background: var(--liquourice);
  background-image: var(--gear-pattern);
  border: 4px solid var(--bronze);
  border-style: ridge;
  box-shadow: inset 0 0 0 1px var(--caput);
}
.archive-toolbar__header {
  display: flex; flex-direction: column; gap: var(--sp-4);
  color: var(--text-on-dark);
  padding-right: var(--sp-7);
  border-right: 1px dashed var(--caput);
}
.archive-toolbar__eyebrow-row {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
}
.archive-toolbar__trail {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--rodeo-light);
  display: inline-flex; align-items: center; gap: 6px;
}
.archive-toolbar__trail::before {
  content: ""; width: 22px; height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 6'><path d='M0 3h22' stroke='%23F4A479' stroke-width='1.2'/><circle cx='11' cy='3' r='2' fill='%23F4A479'/></svg>");
  background-repeat: no-repeat;
}
.archive-toolbar__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
}
.archive-toolbar__title em { font-style: normal; color: var(--bronze); }
.archive-toolbar__rule {
  display: block; width: 200px; height: 6px;
  background: var(--bronze);
  border: 1px ridge var(--bronze);
  box-shadow: inset 0 0 0 1px var(--caput);
  margin: 4px 0 var(--sp-2);
}
.archive-toolbar__lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  font-style: italic;
  color: var(--rodeo-light);
  max-width: 540px;
}
.archive-toolbar__meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.archive-toolbar__result-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 16px;
  background: var(--bronze); color: var(--liquourice);
  border: 2px ridge var(--bronze);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.archive-toolbar__result-pill strong { font-weight: 700; }
.archive-toolbar__meta-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--bronze);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
}
.archive-toolbar__meta-chip::before {
  content: ""; width: 6px; height: 6px; background: var(--bronze);
  border: 1px solid var(--caput); transform: rotate(45deg);
}

/* sort area inside the right half */
.archive-toolbar__sort {
  display: flex; flex-direction: column; gap: var(--sp-5);
  color: var(--rodeo-light);
}
.archive-toolbar__sort-head {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex; align-items: center; gap: var(--sp-3);
}
.archive-toolbar__sort-head::after {
  content: ""; flex: 1; height: 1px;
  background-image: linear-gradient(to right, var(--bronze) 0, var(--bronze) 6px, transparent 6px, transparent 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
  opacity: 0.6;
}
.archive-toolbar__sort-select {
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--cowboy);
  color: var(--white);
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.archive-toolbar__sort-select::after {
  content: "▾"; color: var(--bronze); font-size: 16px; margin-left: 12px;
}
.archive-toolbar__sort-select strong { font-weight: 700; color: var(--bronze); margin-right: var(--sp-3); font-family: var(--font-display); }
.archive-toolbar__chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.archive-toolbar__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 14px;
  background: var(--liquourice);
  border: 1px solid var(--bronze);
  color: var(--bronze);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.archive-toolbar__chip--clear {
  background: transparent; color: var(--rodeo-light); border-color: var(--caput);
  border-bottom: 1px dashed var(--bronze);
  padding: 6px 10px;
}
.archive-toolbar__chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--cowboy);
  color: var(--bronze);
  border: 1px solid var(--bronze);
  border-radius: 50%;
  font-size: 10px; line-height: 1;
}
.archive-toolbar__view-toggle {
  display: inline-flex;
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cowboy);
  width: fit-content;
}
.archive-toolbar__view-btn {
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--rodeo-light);
  border: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.archive-toolbar__view-btn + .archive-toolbar__view-btn { border-left: 1px solid var(--caput); }
.archive-toolbar__view-btn.is-active { background: var(--bronze); color: var(--liquourice); }
.archive-toolbar__view-glyph {
  display: inline-block; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='0' y='0' width='6' height='6'/><rect x='8' y='0' width='6' height='6'/><rect x='0' y='8' width='6' height='6'/><rect x='8' y='8' width='6' height='6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='0' y='0' width='6' height='6'/><rect x='8' y='0' width='6' height='6'/><rect x='0' y='8' width='6' height='6'/><rect x='8' y='8' width='6' height='6'/></svg>");
}
.archive-toolbar__view-glyph--dense {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='0' y='0' width='4' height='4'/><rect x='5' y='0' width='4' height='4'/><rect x='10' y='0' width='4' height='4'/><rect x='0' y='5' width='4' height='4'/><rect x='5' y='5' width='4' height='4'/><rect x='10' y='5' width='4' height='4'/><rect x='0' y='10' width='4' height='4'/><rect x='5' y='10' width='4' height='4'/><rect x='10' y='10' width='4' height='4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='0' y='0' width='4' height='4'/><rect x='5' y='0' width='4' height='4'/><rect x='10' y='0' width='4' height='4'/><rect x='0' y='5' width='4' height='4'/><rect x='5' y='5' width='4' height='4'/><rect x='10' y='5' width='4' height='4'/><rect x='0' y='10' width='4' height='4'/><rect x='5' y='10' width='4' height='4'/><rect x='10' y='10' width='4' height='4'/></svg>");
}
@media (max-width: 880px) {
  .archive-toolbar__panel { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-6); }
  .archive-toolbar__header { padding-right: 0; border-right: 0; border-bottom: 1px dashed var(--caput); padding-bottom: var(--sp-5); }
}

/* ==========================================================
   gear-divider  [REUSE — catalogue verbatim]
   ========================================================== */
.gear-divider {
  height: 36px;
  background-color: var(--liquourice);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='36' viewBox='0 0 200 36'><g fill='none' stroke='%23F4A479' stroke-width='1.4'><line x1='0' y1='18' x2='200' y2='18'/><line x1='0' y1='14' x2='200' y2='14' stroke-opacity='0.35'/><line x1='0' y1='22' x2='200' y2='22' stroke-opacity='0.35'/><circle cx='50' cy='18' r='8'/><circle cx='50' cy='18' r='12'/><path d='M50 3v3M50 30v3M35 18h3M62 18h3'/><circle cx='50' cy='18' r='3' fill='%23F4A479'/><circle cx='150' cy='18' r='8'/><circle cx='150' cy='18' r='12'/><path d='M150 3v3M150 30v3M135 18h3M162 18h3'/><circle cx='150' cy='18' r='3' fill='%23F4A479'/></g></svg>");
  background-repeat: repeat-x;
  border-top: 1px solid var(--bronze);
  border-bottom: 1px solid var(--bronze);
}

/* ==========================================================
   archive-layout  [NEW — desktop 2-col wrapper for sidebar + grid]
   ========================================================== */
.archive-layout {
  background-color: var(--cowboy);
  background-image: var(--gear-pattern);
  padding: var(--sp-8) 0 var(--sp-9);
}
.archive-layout__inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.archive-layout__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.archive-layout__mobile-filter-btn {
  display: none;
  width: 100%;
  padding: 14px 18px;
  background: var(--liquourice);
  color: var(--bronze);
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
@media (max-width: 1080px) {
  .archive-layout__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .archive-layout__inner { grid-template-columns: 1fr; }
  .archive-layout__sidebar { display: none; }
  .archive-layout__mobile-filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
}
@media (max-width: 640px) {
  .archive-layout__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   filter-sidebar  [NEW]
   Thinner 2px ridge bronze + 6px rivets vs hero-panel 10-14px.
   Option rows are typography-only — no per-option borders.
   ========================================================== */
.filter-sidebar {
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: sticky; top: var(--sp-4);
}
.filter-sidebar__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--liquourice);
  border: 2px ridge var(--bronze);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--bronze);
}
.filter-sidebar__head-title { font-size: var(--fs-body); }
.filter-sidebar__head-clear {
  font-size: 11px; color: var(--rodeo-light);
  border-bottom: 1px dashed var(--bronze); padding-bottom: 2px;
}
.filter-group {
  position: relative;
  background: var(--bg-filter-group);
  background-image: var(--gear-pattern);
  border: 2px ridge var(--bronze);
  box-shadow: inset 0 0 0 1px var(--caput);
  padding: var(--sp-4) var(--sp-5);
  color: var(--rodeo-light);
}
.filter-group .rivet { width: 6px; height: 6px; }
.filter-group__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--caput);
}
.filter-group__chev {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bronze); color: var(--bronze); font-size: 10px;
}
.filter-group__opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.filter-group__opt {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--rodeo-light);
  cursor: pointer;
}
.filter-group__opt-box {
  width: 16px; height: 16px;
  background: var(--cowboy);
  border: 1.5px solid var(--bronze);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.filter-group__opt-box--checked { background: var(--bronze); }
.filter-group__opt-box--checked::after {
  content: ""; width: 8px; height: 8px;
  background: var(--liquourice); display: block;
}
.filter-group__opt-box--radio { border-radius: 50%; }
.filter-group__opt-box--radio.filter-group__opt-box--checked::after { border-radius: 50%; }
.filter-group__opt-label {
  flex: 1; display: inline-flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.filter-group__opt-count {
  font-family: var(--font-mono);
  font-size: var(--micro);
  color: var(--bronze);
  opacity: 0.85;
}
.filter-group__toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--rodeo-light);
}
.filter-group__toggle-switch {
  width: 38px; height: 20px;
  background: var(--cowboy);
  border: 1.5px solid var(--bronze);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
}
.filter-group__toggle-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--bronze);
  border: 1px solid var(--caput);
  border-radius: 50%;
  transition: transform 120ms linear;
}
.filter-group__toggle-switch--on { background: var(--sienna); border-color: var(--bronze); }
.filter-group__toggle-switch--on::after { transform: translateX(18px); }
.filter-group__slider {
  display: flex; flex-direction: column; gap: var(--sp-3);
  font-family: var(--font-body); font-size: var(--fs-body-sm);
}
.filter-group__slider-track {
  position: relative;
  height: 6px;
  background: var(--cowboy);
  border: 1px solid var(--caput);
}
.filter-group__slider-fill {
  position: absolute; top: 0; bottom: 0;
  background: var(--bronze);
}
.filter-group__slider-handle {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: var(--bronze);
  border: 2px solid var(--caput);
  border-radius: 50%;
}
.filter-group__slider-inputs {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); align-items: center;
}
.filter-group__slider-input {
  background: var(--cowboy);
  border: 1.5px solid var(--bronze);
  color: var(--white);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  width: 100%;
}
.filter-group__slider-sep {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--bronze);
}
.filter-sidebar__apply {
  margin-top: var(--sp-2);
}

/* ==========================================================
   archive-product-card  [NEW]
   Extended density: loyalty pip, wishlist heart, eyebrow tag,
   star+count, price block, in-stock signal, Quick view + ATC.
   Dark cowboy ground with 4px ridge bronze, on-white catalogue shot.
   ========================================================== */
.archive-product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-card-on-dark);
  border: 4px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
  color: var(--text-on-card-dark);
  overflow: hidden;
  transition: transform 120ms linear;
}
.archive-product-card:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-lg); }
.archive-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--white);
  border-bottom: 2px ridge var(--bronze);
  overflow: hidden;
}
.archive-product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.archive-product-card__eyebrow-tag {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
  background: var(--liquourice);
  border: 1px solid var(--bronze);
  border-radius: var(--r-sm);
  box-shadow: 1px 1px 0 var(--caput);
}
.archive-product-card__loyalty {
  position: absolute; top: 12px; right: 12px;
  min-width: 48px; height: 48px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 8px;
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1;
  color: var(--liquourice);
  background: var(--bronze);
  border: 2px ridge var(--bronze);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
}
.archive-product-card__loyalty strong { font-size: 14px; line-height: 1; }
.archive-product-card__loyalty small { font-size: 8px; letter-spacing: var(--ls-widest); margin-top: 2px; }
.archive-product-card__wishlist {
  position: absolute; bottom: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--liquourice);
  color: var(--bronze);
  border: 2px ridge var(--bronze);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.archive-product-card__sale-flag {
  position: absolute; bottom: 12px; left: 12px;
  padding: 4px 10px;
  background: var(--sienna);
  color: var(--white);
  border: 1px solid var(--caput);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.archive-product-card__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  flex: 1 1 auto;
}
.archive-product-card__chapter {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
}
.archive-product-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  color: var(--text-on-card-dark);
}
.archive-product-card__rating-row {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--bronze);
}
.archive-product-card__stars { letter-spacing: 1px; }
.archive-product-card__rating-num { font-family: var(--font-display); color: var(--bronze); }
.archive-product-card__rating-count {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--rodeo-light);
}
.archive-product-card__price-row {
  display: flex; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap;
}
.archive-product-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--bronze);
}
.archive-product-card__rrp {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--rodeo-light);
  text-decoration: line-through;
  text-decoration-color: var(--bronze);
}
.archive-product-card__save {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--white);
  background: var(--sienna);
  padding: 3px 8px;
  border: 1px solid var(--caput);
}
.archive-product-card__stock {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--rodeo-light);
}
.archive-product-card__stock-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 2px var(--bronze);
}
.archive-product-card__stock-dot--low { background: var(--bronze); }
.archive-product-card__stock-dot--out { background: var(--negative); }
.archive-product-card__ctas {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--caput);
}
.archive-product-card__quickview {
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
  background: transparent;
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: 2px 2px 0 var(--caput);
}
.archive-product-card__atc {
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
  background: var(--sienna);
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
}
/* Out-of-stock variant */
.archive-product-card--oos .archive-product-card__media img { filter: grayscale(1) brightness(0.7); }
.archive-product-card--oos .archive-product-card__atc {
  background: var(--cowboy); color: var(--rodeo-light); cursor: not-allowed;
}
.archive-product-card--oos .archive-product-card__sale-flag,
.archive-product-card--oos .archive-product-card__loyalty { opacity: 0.6; }

/* ==========================================================
   pagination  [NEW]
   Single horizontal band, pagination tiles centred, "Load more"
   alt button beside on desktop; both stay in one row.
   ========================================================== */
.pagination {
  background-color: var(--cowboy);
  background-image: var(--gear-pattern);
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--caput);
}
.pagination__panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-7);
  background: var(--liquourice);
  background-image: var(--gear-pattern);
  border: 4px solid var(--bronze);
  border-style: ridge;
  box-shadow: inset 0 0 0 1px var(--caput);
  position: relative;
}
.pagination__summary {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--rodeo-light);
}
.pagination__summary strong { color: var(--bronze); }
.pagination__tiles {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  justify-self: center;
}
.pagination__tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--cowboy);
  color: var(--rodeo-light);
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.pagination__tile--active { background: var(--bronze); color: var(--liquourice); }
.pagination__tile--nav { width: auto; padding: 0 16px; gap: 6px; }
.pagination__tile--disabled { opacity: 0.4; }
.pagination__tile--ellipsis {
  background: transparent; border: 0;
  box-shadow: none; color: var(--bronze);
}
.pagination__loadmore {
  justify-self: end;
}
@media (max-width: 880px) {
  .pagination__panel { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }
  .pagination__summary { text-align: center; }
  .pagination__tiles { justify-self: center; }
  .pagination__loadmore { justify-self: center; }
}

/* ==========================================================
   quick-view-modal  [NEW]
   Rendered OPEN inside a dimmed band for operator review.
   Two-column at desktop: gallery LEFT half, content RIGHT half.
   Max 1100px wide. Clean-zone discipline preserved.
   ========================================================== */
.quick-view-band {
  position: relative;
  background-color: var(--liquourice);
  background-image: var(--gear-pattern);
  padding: var(--sp-9) 0 var(--sp-10);
  border-top: 1px solid var(--caput);
  border-bottom: 1px solid var(--caput);
}
.quick-view-band::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(11, 7, 8, 0.6);
  pointer-events: none;
}
.quick-view-band__label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: 6px 14px;
  background: var(--liquourice);
  color: var(--bronze);
  border: 1px dashed var(--bronze);
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.quick-view-band__label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bronze); animation: none;
}

.quick-view-modal {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--liquourice);
  background-image: var(--gear-pattern);
  border: 4px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-xl);
  color: var(--text-on-dark);
}
.quick-view-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 2px solid var(--bronze);
  background: var(--cowboy);
}
.quick-view-modal__head-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex; align-items: center; gap: var(--sp-3);
}
.quick-view-modal__close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px ridge var(--bronze);
  border-radius: 50%;
  background: var(--liquourice);
  color: var(--bronze);
  font-size: 18px;
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
}
.quick-view-modal__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
  align-items: start;
}
.quick-view-modal__gallery {
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.quick-view-modal__main-frame {
  position: relative;
  border: 4px ridge var(--bronze);
  padding: 6px;
  background: var(--liquourice);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
}
.quick-view-modal__main {
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1px solid var(--caput);
  overflow: hidden;
}
.quick-view-modal__main img { width: 100%; height: 100%; object-fit: cover; }
.quick-view-modal__main-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 10px;
  background: var(--liquourice);
  color: var(--bronze);
  border: 1px solid var(--bronze);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.quick-view-modal__thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
.quick-view-modal__thumb {
  aspect-ratio: 1/1;
  background: var(--white);
  border: 2px ridge var(--bronze);
  padding: 3px;
  box-shadow: inset 0 0 0 1px var(--caput);
  overflow: hidden;
}
.quick-view-modal__thumb.is-active { outline: 2px solid var(--bronze); outline-offset: 2px; }
.quick-view-modal__thumb img { width: 100%; height: 100%; object-fit: cover; }

.quick-view-modal__content {
  display: flex; flex-direction: column; gap: var(--sp-4);
  color: var(--rodeo-light);
}
.quick-view-modal__chapter {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
}
.quick-view-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
}
.quick-view-modal__rating-row {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--bronze);
}
.quick-view-modal__rating-stars { font-size: 18px; letter-spacing: 2px; }
.quick-view-modal__rating-num { font-family: var(--font-display); font-size: var(--fs-body); }
.quick-view-modal__rating-count {
  font-family: var(--font-body); font-style: italic;
  color: var(--rodeo-light); font-size: var(--fs-body-sm);
  border-bottom: 1px dashed var(--bronze); padding-bottom: 1px;
}
.quick-view-modal__short {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-style: italic;
  line-height: var(--lh-body);
  color: var(--rodeo-light);
}
.quick-view-modal__loyalty-line {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--rodeo-light);
}
.quick-view-modal__loyalty-pip {
  min-width: 56px; height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bronze); color: var(--liquourice);
  border: 2px ridge var(--bronze);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: var(--ls-wide);
  box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
}
.quick-view-modal__variation {
  border-top: 1px solid var(--caput);
  padding-top: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.quick-view-modal__variation-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bronze);
}
.quick-view-modal__variation-opts {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.quick-view-modal__variation-chip {
  padding: 8px 14px;
  background: transparent;
  color: var(--rodeo-light);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 2px ridge var(--bronze);
  border-radius: var(--r-md);
  box-shadow: 2px 2px 0 var(--caput);
}
.quick-view-modal__variation-chip.is-selected {
  background: var(--bronze); color: var(--liquourice);
}
.quick-view-modal__view-full {
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--bronze);
  border-bottom: 1px dashed var(--bronze);
  padding-bottom: 2px;
  align-self: flex-start;
  display: inline-flex; gap: 8px; align-items: center;
}
.quick-view-modal__view-full::after { content: "→"; }
@media (max-width: 720px) {
  .quick-view-modal__inner { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-5); }
}

/* ==========================================================
   clean-zone-price-atc  [REUSE — catalogue verbatim]
   Used inside the quick-view modal right column.
   ========================================================== */
.clean-zone {
  background: var(--cowboy);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border: 1px solid var(--caput);
  position: relative;
}
.clean-zone__price-line { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.clean-zone__price-current { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--white); letter-spacing: var(--ls-wide); }
.clean-zone__price-rrp { font-family: var(--font-body); font-size: var(--body-lg); color: var(--rodeo-light); text-decoration: line-through; text-decoration-color: var(--bronze); }
.clean-zone__price-save { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--white); background: var(--sienna); padding: 4px 10px; border: 1px solid var(--caput); }
.clean-zone__stock { margin-bottom: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-body); font-size: var(--body-sm); color: var(--rodeo-light); }
.clean-zone__stock-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 2px var(--bronze); }
.clean-zone__qty-row { display: flex; gap: var(--sp-3); align-items: stretch; }
.clean-zone__qty { display: flex; align-items: stretch; border: 2px solid var(--bronze); background: var(--liquourice); }
.clean-zone__qty button { width: 44px; background: transparent; border: 0; color: var(--bronze); font-family: var(--font-display); font-size: 22px; line-height: 1; }
.clean-zone__qty input { width: 52px; background: transparent; border: 0; color: var(--white); font-family: var(--font-display); font-size: 20px; text-align: center; outline: none; }
.clean-zone__atc { flex: 1 1 auto; background: var(--sienna); color: var(--white); font-family: var(--font-display); font-size: 24px; text-transform: uppercase; letter-spacing: var(--ls-wide); padding: var(--sp-4) var(--sp-5); border: 2px solid var(--bronze); border-style: ridge; box-shadow: 2px 2px 0 var(--caput); }
.clean-zone__wishlist { margin-top: var(--sp-3); width: 100%; background: transparent; color: var(--bronze); font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--ls-wider); padding: var(--sp-3) var(--sp-4); border: 2px solid var(--bronze); border-style: ridge; box-shadow: 2px 2px 0 var(--caput); }

/* ==========================================================
   workbench-cards  [REUSE — catalogue verbatim]
   Used here for the curated bottom slot: 1 how-to + 1 painting
   showcase, side-by-side at desktop. Section head spans both.
   ========================================================== */
.workbench-cards { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; }
.workbench-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.workbench-cards__card { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; color: var(--rodeo-light); }
.workbench-cards__card .rivet { width: 9px; height: 9px; }
.workbench-cards__cover { background: var(--cowboy); overflow: hidden; min-height: 280px; position: relative; border-right: 2px solid var(--bronze); }
.workbench-cards__cover img { width: 100%; height: 100%; object-fit: cover; }
.workbench-cards__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.workbench-cards__meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.workbench-cards__pill { padding: 4px 10px; background: var(--bronze); color: var(--liquourice); font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-wider); border: 1px solid var(--caput); }
.workbench-cards__pill--time { background: transparent; color: var(--bronze); border: 1px solid var(--bronze); }
.workbench-cards__title { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white); margin: 0; line-height: 1.1; }
.workbench-cards__excerpt { font-family: var(--font-body); font-size: var(--body-sm); font-style: italic; color: var(--rodeo-light); line-height: var(--lh-body); margin: 0; }
.workbench-cards__cta { margin-top: auto; align-self: flex-start; background: transparent; color: var(--bronze); border: 2px solid var(--bronze); border-style: ridge; font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--ls-wider); padding: 8px 16px; box-shadow: 2px 2px 0 var(--caput); }
.workbench-cards__section-head { text-align: center; margin-bottom: var(--sp-7); }
.workbench-cards__section-title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.workbench-cards__section-rule { display: block; width: 120px; height: 4px; margin: 12px auto 16px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.workbench-cards__section-lede { max-width: 640px; margin: 0 auto; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--rodeo-light); font-style: italic; }
@media (max-width: 880px) {
  .workbench-cards__grid { grid-template-columns: 1fr; }
  .workbench-cards__card { grid-template-columns: 1fr; }
  .workbench-cards__cover { min-height: 200px; border-right: 0; border-bottom: 2px solid var(--bronze); }
}

/* ==========================================================
   newsletter-garrison  [REUSE — catalogue verbatim]
   Copy LEFT / form RIGHT pairing matches brief explicitly.
   ========================================================== */
.newsletter-garrison { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-7) 0; }
.newsletter-garrison__panel { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; padding: var(--sp-6) var(--sp-7); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; color: var(--rodeo-light); box-shadow: inset 0 0 0 1px var(--caput); }
.newsletter-garrison__copy h3 { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white); margin: 0 0 var(--sp-2); }
.newsletter-garrison__copy .eyebrow-stamp { margin-bottom: var(--sp-3); }
.newsletter-garrison__copy p { font-family: var(--font-body); font-style: italic; font-size: var(--body); margin: 0; color: var(--rodeo-light); max-width: 580px; }
.newsletter-garrison__perks { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.newsletter-garrison__perks span { display: inline-flex; align-items: center; gap: 8px; }
.newsletter-garrison__perks span::before { content: ""; width: 10px; height: 10px; background: var(--bronze); border: 1px solid var(--caput); transform: rotate(45deg); }
.newsletter-garrison__form { display: flex; gap: var(--sp-3); align-items: stretch; }
.newsletter-garrison__form input { background: var(--cowboy); color: var(--white); border: 2px solid var(--bronze); padding: var(--sp-3) var(--sp-4); font-family: var(--font-body); font-size: var(--body); width: 320px; }
.newsletter-garrison__form input::placeholder { color: var(--rodeo-light); font-style: italic; }
.newsletter-garrison__form button { background: var(--sienna); color: var(--white); border: 2px solid var(--bronze); border-style: ridge; font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: var(--ls-wide); padding: var(--sp-3) var(--sp-5); box-shadow: 2px 2px 0 var(--caput); }
@media (max-width: 880px) {
  .newsletter-garrison__panel { grid-template-columns: 1fr; padding: var(--sp-5); }
  .newsletter-garrison__form { flex-direction: column; }
  .newsletter-garrison__form input { width: 100%; }
}

/* ==========================================================
   site-footer  [REUSE — catalogue verbatim]
   ========================================================== */
.site-footer { background: var(--bg-panel-darker); color: var(--text-on-dark); border-top: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.site-footer__columns { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding: 96px 40px 48px; max-width: 1440px; margin: 0 auto; }
.site-footer__brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-footer__word { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__copy { margin: 0 0 24px; color: var(--rodeo-light); font-size: var(--fs-body-sm); font-style: italic; max-width: 280px; }
.site-footer__badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__col-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px ridge var(--bronze); font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__list a { color: var(--rodeo-light); font-size: var(--fs-body-sm); text-decoration: none; }
.site-footer__list a:hover { color: var(--bronze); }
.site-footer__baseline { border-top: 2px ridge var(--bronze); background: var(--cowboy); }
.site-footer__baseline-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 40px; max-width: 1440px; margin: 0 auto; flex-wrap: wrap; }
.site-footer__pay { display: flex; gap: 8px; }
.site-footer__pay span { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__social { display: flex; gap: 8px; }
.site-footer__social a { width: 32px; height: 32px; border: 1px solid var(--bronze); display: inline-flex; align-items: center; justify-content: center; color: var(--bronze); font-family: var(--font-display); font-size: 12px; border-radius: 50%; }
.site-footer__legal { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); color: var(--rodeo-light); font-family: var(--font-display); text-transform: uppercase; }
@media (max-width: 880px) {
  .site-footer__columns { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 64px 24px 32px; }
}
@media (max-width: 640px) {
  .site-footer__columns { grid-template-columns: 1fr; }
}

</style>
</head>
<body>

<!-- ========== preheader-bar [REUSE] ========== -->
<div class="preheader-bar">
  <div class="container preheader-bar__inner">
    <div class="preheader-bar__msg">Free UK shipping over £75 — saddle's on us</div>
    <div class="preheader-bar__links">
      <a href="#">Earn loyalty points across all Nerdworks brands</a>
      <a href="#">Find a store</a>
    </div>
  </div>
</div>

<!-- ========== site-header [REUSE] ========== -->
<header class="site-header">
  <div class="site-header__inner">
    <a class="site-header__brand" href="/">
      <span class="site-header__cog" aria-hidden="true"></span>
      <span class="site-header__word">War Dungeon<small>The Workbench of Warriors</small></span>
    </a>
    <nav class="site-header__nav" aria-label="Primary">
      <a class="site-header__nav-item site-header__nav-item--has-mega is-active" href="#">Warhammer</a>
      <a class="site-header__nav-item" href="#">Dungeons & Dragons</a>
      <a class="site-header__nav-item" href="#">Tools</a>
      <a class="site-header__nav-item site-header__nav-item--has-mega" href="#">Learn</a>
      <a class="site-header__nav-item" href="#">Creators</a>
    </nav>
    <div class="site-header__tools">
      <a class="site-header__tool" href="#" aria-label="Search">⌕</a>
      <a class="site-header__tool" href="#" aria-label="Account">☉</a>
      <a class="site-header__tool" href="#" aria-label="Wishlist">♥</a>
      <a class="site-header__tool site-header__tool--basket" href="#"><span>Basket · 2</span><span class="site-header__points">+340 PTS</span></a>
    </div>
  </div>
</header>

<!-- ========== breadcrumbs [REUSE] ========== -->
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <div class="container breadcrumbs__inner">
    <a href="#">Home</a><span class="breadcrumbs__sep">/</span>
    <a href="#">Warhammer</a><span class="breadcrumbs__sep">/</span>
    <a href="#">Warhammer 40,000</a><span class="breadcrumbs__sep">/</span>
    <a href="#">Space Marines</a><span class="breadcrumbs__sep">/</span>
    <span class="breadcrumbs__item--current">Combat Patrols</span>
  </div>
</nav>

<!-- ========== archive-toolbar [NEW] — header LEFT + sort RIGHT in one band ========== -->
<section class="archive-toolbar">
  <div class="container">
    <div class="archive-toolbar__panel rivet-panel">
      <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
      <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>

      <div class="archive-toolbar__header">
        <div class="archive-toolbar__eyebrow-row">
          <span class="eyebrow-stamp">Leaf Aisle · Space Marines</span>
          <span class="archive-toolbar__trail">Warhammer 40,000 → Space Marines → Combat Patrols</span>
        </div>
        <h1 class="archive-toolbar__title">Combat <em>Patrols</em></h1>
        <span class="archive-toolbar__rule" aria-hidden="true"></span>
        <p class="archive-toolbar__lede">Ten plastic marines, a transport, a character, and enough to call it a starter army — every chapter in the Imperium, sat in stock on the workbench.</p>
        <div class="archive-toolbar__meta-row">
          <span class="archive-toolbar__result-pill"><strong>Showing 14 of 14</strong> · Combat Patrols</span>
          <span class="archive-toolbar__meta-chip">10th edition · current</span>
          <span class="archive-toolbar__meta-chip">All in stock</span>
        </div>
      </div>

      <div class="archive-toolbar__sort">
        <div class="archive-toolbar__sort-head">Refine the rack</div>
        <button class="archive-toolbar__sort-select" aria-label="Sort">
          <span><strong>Sort by</strong> Featured (operator curated)</span>
        </button>
        <div>
          <div class="archive-toolbar__sort-head" style="margin-bottom: 12px;">Active filters</div>
          <div class="archive-toolbar__chips">
            <span class="archive-toolbar__chip">In stock only <span class="archive-toolbar__chip-x">×</span></span>
            <span class="archive-toolbar__chip">40K 10th ed <span class="archive-toolbar__chip-x">×</span></span>
            <span class="archive-toolbar__chip">£95 – £135 <span class="archive-toolbar__chip-x">×</span></span>
            <span class="archive-toolbar__chip archive-toolbar__chip--clear">Clear all</span>
          </div>
        </div>
        <div>
          <div class="archive-toolbar__sort-head" style="margin-bottom: 12px;">View</div>
          <div class="archive-toolbar__view-toggle" role="group" aria-label="View density">
            <button class="archive-toolbar__view-btn is-active"><span class="archive-toolbar__view-glyph" aria-hidden="true"></span>3-up</button>
            <button class="archive-toolbar__view-btn"><span class="archive-toolbar__view-glyph archive-toolbar__view-glyph--dense" aria-hidden="true"></span>4-up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ========== gear-divider [REUSE] ========== -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>

<!-- ========== archive-layout [NEW] — sidebar LEFT + grid RIGHT ========== -->
<section class="archive-layout">
  <div class="container">

    <button class="archive-layout__mobile-filter-btn" type="button">⚙ Filter results (3 active)</button>

    <div class="archive-layout__inner">

      <!-- filter-sidebar [NEW] -->
      <aside class="archive-layout__sidebar">
        <div class="filter-sidebar">
          <div class="filter-sidebar__head">
            <span class="filter-sidebar__head-title">Filter</span>
            <a href="#" class="filter-sidebar__head-clear">Reset all</a>
          </div>

          <!-- Faction -->
          <div class="filter-group rivet-panel">
            <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
            <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
            <div class="filter-group__head">Faction <span class="filter-group__chev">−</span></div>
            <div class="filter-group__opts">
              <label class="filter-group__opt"><span class="filter-group__opt-box"></span><span class="filter-group__opt-label">Salamanders <span class="filter-group__opt-count">2</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box filter-group__opt-box--checked"></span><span class="filter-group__opt-label">Imperial Fists <span class="filter-group__opt-count">1</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box"></span><span class="filter-group__opt-label">Blood Angels <span class="filter-group__opt-count">2</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box filter-group__opt-box--checked"></span><span class="filter-group__opt-label">Ultramarines <span class="filter-group__opt-count">1</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box"></span><span class="filter-group__opt-label">Dark Angels <span class="filter-group__opt-count">2</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box"></span><span class="filter-group__opt-label">Raven Guard <span class="filter-group__opt-count">1</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box"></span><span class="filter-group__opt-label">Space Wolves <span class="filter-group__opt-count">1</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box"></span><span class="filter-group__opt-label">Black Templars <span class="filter-group__opt-count">1</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box"></span><span class="filter-group__opt-label">Deathwatch · Grey Knights · other <span class="filter-group__opt-count">3</span></span></label>
            </div>
          </div>

          <!-- Points cost -->
          <div class="filter-group rivet-panel">
            <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
            <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
            <div class="filter-group__head">Points cost <span class="filter-group__chev">−</span></div>
            <div class="filter-group__opts">
              <label class="filter-group__opt"><span class="filter-group__opt-box filter-group__opt-box--radio"></span><span class="filter-group__opt-label">Under 500 <span class="filter-group__opt-count">1</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box filter-group__opt-box--radio filter-group__opt-box--checked"></span><span class="filter-group__opt-label">500 – 1,000 <span class="filter-group__opt-count">8</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box filter-group__opt-box--radio"></span><span class="filter-group__opt-label">1,000 – 2,000 <span class="filter-group__opt-count">5</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box filter-group__opt-box--radio"></span><span class="filter-group__opt-label">2,000+ <span class="filter-group__opt-count">0</span></span></label>
            </div>
          </div>

          <!-- In stock only -->
          <div class="filter-group rivet-panel">
            <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
            <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
            <div class="filter-group__toggle">
              <span>In stock only</span>
              <span class="filter-group__toggle-switch filter-group__toggle-switch--on" aria-hidden="true"></span>
            </div>
          </div>

          <!-- Price -->
          <div class="filter-group rivet-panel">
            <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
            <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
            <div class="filter-group__head">Price <span class="filter-group__chev">−</span></div>
            <div class="filter-group__slider">
              <div class="filter-group__slider-track">
                <span class="filter-group__slider-fill" style="left: 0%; right: 0%;"></span>
                <span class="filter-group__slider-handle" style="left: 0%;"></span>
                <span class="filter-group__slider-handle" style="left: 100%;"></span>
              </div>
              <div class="filter-group__slider-inputs">
                <input class="filter-group__slider-input" type="text" value="£95">
                <span class="filter-group__slider-sep">→</span>
                <input class="filter-group__slider-input" type="text" value="£135">
              </div>
            </div>
          </div>

          <!-- Game system -->
          <div class="filter-group rivet-panel">
            <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
            <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
            <div class="filter-group__head">Game system <span class="filter-group__chev">−</span></div>
            <div class="filter-group__opts">
              <label class="filter-group__opt"><span class="filter-group__opt-box filter-group__opt-box--checked"></span><span class="filter-group__opt-label">40K · 10th edition <span class="filter-group__opt-count">14</span></span></label>
              <label class="filter-group__opt"><span class="filter-group__opt-box"></span><span class="filter-group__opt-label">40K · 9th ed (legacy) <span class="filter-group__opt-count">0</span></span></label>
            </div>
          </div>

          <!-- On sale -->
          <div class="filter-group rivet-panel">
            <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
            <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
            <div class="filter-group__toggle">
              <span>On sale</span>
              <span class="filter-group__toggle-switch" aria-hidden="true"></span>
            </div>
          </div>

          <div class="filter-sidebar__apply">
            <a href="#" class="btn btn--block btn--sm">Apply filters</a>
          </div>
        </div>
      </aside>

      <!-- product grid -->
      <div class="archive-layout__grid">

        <!-- 1. Salamanders -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+115</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/5a7a3e?font=playfair&text=Salamanders" alt="Combat Patrol: Salamanders box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Salamanders</div>
            <h3 class="archive-product-card__title">Combat Patrol: Salamanders</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.7</span>
              <span class="archive-product-card__rating-count">(128 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£115.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 2. Imperial Fists -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+115</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/d9b450?font=playfair&text=Imperial+Fists" alt="Combat Patrol: Imperial Fists box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Imperial Fists</div>
            <h3 class="archive-product-card__title">Combat Patrol: Imperial Fists</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.8</span>
              <span class="archive-product-card__rating-count">(96 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£115.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 3. Blood Angels (on sale) -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+125</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/aa3025?font=playfair&text=Blood+Angels" alt="Combat Patrol: Blood Angels box">
            <span class="archive-product-card__sale-flag">Save £10</span>
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Blood Angels</div>
            <h3 class="archive-product-card__title">Combat Patrol: Blood Angels</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.9</span>
              <span class="archive-product-card__rating-count">(204 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£125.00</span>
              <span class="archive-product-card__rrp">£135.00</span>
              <span class="archive-product-card__save">−7%</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 4. Ultramarines -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+115</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/3850a0?font=playfair&text=Ultramarines" alt="Combat Patrol: Ultramarines box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Ultramarines</div>
            <h3 class="archive-product-card__title">Combat Patrol: Ultramarines</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.8</span>
              <span class="archive-product-card__rating-count">(186 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£115.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 5. Dark Angels -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+125</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/1c3a2f?font=playfair&text=Dark+Angels" alt="Combat Patrol: Dark Angels box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Dark Angels</div>
            <h3 class="archive-product-card__title">Combat Patrol: Dark Angels</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.7</span>
              <span class="archive-product-card__rating-count">(142 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£125.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot archive-product-card__stock-dot--low"></span> Low stock · 3 left
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 6. Raven Guard -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+115</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/222831?font=playfair&text=Raven+Guard" alt="Combat Patrol: Raven Guard box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Raven Guard</div>
            <h3 class="archive-product-card__title">Combat Patrol: Raven Guard</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.6</span>
              <span class="archive-product-card__rating-count">(74 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£115.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 7. Space Marines (Generic) -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · Starter</span>
            <div class="archive-product-card__loyalty"><strong>+95</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/7f8488?font=playfair&text=Space+Marines" alt="Combat Patrol: Space Marines (generic) box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Generic Codex Astartes</div>
            <h3 class="archive-product-card__title">Combat Patrol: Space Marines</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.8</span>
              <span class="archive-product-card__rating-count">(218 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£95.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 8. Black Templars -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+125</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/1a1a1a?font=playfair&text=Black+Templars" alt="Combat Patrol: Black Templars box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Black Templars</div>
            <h3 class="archive-product-card__title">Combat Patrol: Black Templars</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.9</span>
              <span class="archive-product-card__rating-count">(156 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£125.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 9. Space Wolves -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+125</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/5b6c7c?font=playfair&text=Space+Wolves" alt="Combat Patrol: Space Wolves box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Space Wolves</div>
            <h3 class="archive-product-card__title">Combat Patrol: Space Wolves</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.8</span>
              <span class="archive-product-card__rating-count">(98 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£125.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 10. Iron Hands (out of stock) -->
        <article class="archive-product-card archive-product-card--oos">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+115</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/3a3d40?font=playfair&text=Iron+Hands" alt="Combat Patrol: Iron Hands box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Iron Hands</div>
            <h3 class="archive-product-card__title">Combat Patrol: Iron Hands</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.6</span>
              <span class="archive-product-card__rating-count">(52 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£115.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot archive-product-card__stock-dot--out"></span> Out of stock · notify me
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc" disabled>Email when in</button>
            </div>
          </div>
        </article>

        <!-- 11. White Scars -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+115</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/9a8470?font=playfair&text=White+Scars" alt="Combat Patrol: White Scars box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">White Scars</div>
            <h3 class="archive-product-card__title">Combat Patrol: White Scars</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.7</span>
              <span class="archive-product-card__rating-count">(64 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£115.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 12. First Strike Starter Set -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · Starter</span>
            <div class="archive-product-card__loyalty"><strong>+55</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/5a4a3a?font=playfair&text=First+Strike" alt="Starter Set: First Strike Marines box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Beginner · all-chapter</div>
            <h3 class="archive-product-card__title">Starter Set: First Strike Marines</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.6</span>
              <span class="archive-product-card__rating-count">(88 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£95.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 13. Deathwatch -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+130</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/0f0f0f?font=playfair&text=Deathwatch" alt="Combat Patrol: Deathwatch box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Deathwatch</div>
            <h3 class="archive-product-card__title">Combat Patrol: Deathwatch</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.8</span>
              <span class="archive-product-card__rating-count">(134 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£130.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

        <!-- 14. Grey Knights -->
        <article class="archive-product-card">
          <div class="archive-product-card__media">
            <span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
            <div class="archive-product-card__loyalty"><strong>+135</strong><small>PTS</small></div>
            <img src="https://placehold.co/600x600/EEEEEE/a8b8c0?font=playfair&text=Grey+Knights" alt="Combat Patrol: Grey Knights box">
            <button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
          </div>
          <div class="archive-product-card__body">
            <div class="archive-product-card__chapter">Grey Knights</div>
            <h3 class="archive-product-card__title">Combat Patrol: Grey Knights</h3>
            <div class="archive-product-card__rating-row">
              <span class="archive-product-card__stars">★★★★★</span>
              <span class="archive-product-card__rating-num">4.9</span>
              <span class="archive-product-card__rating-count">(172 reviews)</span>
            </div>
            <div class="archive-product-card__price-row">
              <span class="archive-product-card__price">£135.00</span>
            </div>
            <div class="archive-product-card__stock">
              <span class="archive-product-card__stock-dot"></span> In stock · ships 24h
            </div>
            <div class="archive-product-card__ctas">
              <button class="archive-product-card__quickview">Quick View</button>
              <button class="archive-product-card__atc">Add to Cart</button>
            </div>
          </div>
        </article>

      </div><!-- /grid -->
    </div><!-- /inner -->
  </div>
</section>

<!-- ========== gear-divider [REUSE] ========== -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>

<!-- ========== pagination [NEW] — single horizontal band ========== -->
<section class="pagination">
  <div class="container">
    <div class="pagination__panel rivet-panel">
      <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
      <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>

      <div class="pagination__summary">
        Page <strong>1</strong> of <strong>1</strong> · all 14 patrols on the rack
      </div>
      <div class="pagination__tiles">
        <button class="pagination__tile pagination__tile--nav pagination__tile--disabled">← Prev</button>
        <button class="pagination__tile pagination__tile--active">1</button>
        <button class="pagination__tile">2</button>
        <button class="pagination__tile">3</button>
        <span class="pagination__tile pagination__tile--ellipsis">⋯</span>
        <button class="pagination__tile pagination__tile--nav pagination__tile--disabled">Next →</button>
      </div>
      <div class="pagination__loadmore">
        <a class="btn btn--ghost" href="#">Load more patrols ↓</a>
      </div>
    </div>
  </div>
</section>

<!-- ========== gear-divider [REUSE] ========== -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>

<!-- ========== quick-view-modal [NEW] — rendered OPEN in dimmed band ========== -->
<section class="quick-view-band" aria-label="Quick view modal (rendered open for design review)">
  <div class="container">
    <span class="quick-view-band__label">Operator review · modal rendered in open state (no JS)</span>
    <div class="quick-view-modal" role="dialog" aria-label="Quick view: Combat Patrol Blood Angels">
      <div class="quick-view-modal__head">
        <span class="quick-view-modal__head-eyebrow">Quick view · Combat Patrol</span>
        <button class="quick-view-modal__close" aria-label="Close quick view">×</button>
      </div>
      <div class="quick-view-modal__inner">

        <!-- LEFT half: compact gallery -->
        <div class="quick-view-modal__gallery">
          <div class="quick-view-modal__main-frame">
            <span class="quick-view-modal__main-tag">Combat Patrol · 10th Ed</span>
            <div class="quick-view-modal__main">
              <img src="https://placehold.co/700x700/EEEEEE/aa3025?font=playfair&text=Blood+Angels" alt="Blood Angels Combat Patrol main shot">
            </div>
          </div>
          <div class="quick-view-modal__thumbs">
            <div class="quick-view-modal__thumb is-active"><img src="https://placehold.co/200x200/EEEEEE/aa3025?text=01" alt=""></div>
            <div class="quick-view-modal__thumb"><img src="https://placehold.co/200x200/EEEEEE/aa3025?text=02" alt=""></div>
            <div class="quick-view-modal__thumb"><img src="https://placehold.co/200x200/EEEEEE/aa3025?text=03" alt=""></div>
            <div class="quick-view-modal__thumb"><img src="https://placehold.co/200x200/EEEEEE/aa3025?text=04" alt=""></div>
          </div>
        </div>

        <!-- RIGHT half: title, rating, short, loyalty, variation chips, CLEAN ZONE, view-full -->
        <div class="quick-view-modal__content">
          <span class="quick-view-modal__chapter">Blood Angels · Codex Astartes</span>
          <h2 class="quick-view-modal__title">Combat Patrol: Blood Angels</h2>
          <div class="quick-view-modal__rating-row">
            <span class="quick-view-modal__rating-stars">★★★★★</span>
            <span class="quick-view-modal__rating-num">4.9</span>
            <a href="#" class="quick-view-modal__rating-count">204 reviews</a>
          </div>
          <p class="quick-view-modal__short">A son-of-Sanguinius starter rack — Captain on bike, a unit of Death Company, Sanguinary Guard wings, the lot. Painted up, this one starts arguments at the table.</p>

          <div class="quick-view-modal__loyalty-line">
            <span class="quick-view-modal__loyalty-pip">+125 PTS</span>
            <span>earned on this purchase — redeem at any Nerdworks brand</span>
          </div>

          <div class="quick-view-modal__variation">
            <span class="quick-view-modal__variation-label">Edition · format</span>
            <div class="quick-view-modal__variation-opts">
              <button class="quick-view-modal__variation-chip is-selected">10th edition</button>
              <button class="quick-view-modal__variation-chip">+ Paint set bundle (+£28)</button>
              <button class="quick-view-modal__variation-chip">+ Codex (+£35)</button>
            </div>
          </div>

          <!-- CLEAN ZONE (catalogue verbatim) — the conversion peak inside the modal -->
          <div class="clean-zone">
            <div class="clean-zone__price-line">
              <span class="clean-zone__price-current">£125.00</span>
              <span class="clean-zone__price-rrp">£135.00</span>
              <span class="clean-zone__price-save">Save £10</span>
            </div>
            <div class="clean-zone__stock">
              <span class="clean-zone__stock-dot"></span>
              In stock — ships within 24h, weather permitting.
            </div>
            <div class="clean-zone__qty-row">
              <div class="clean-zone__qty">
                <button>−</button><input type="text" value="1"><button>+</button>
              </div>
              <button class="clean-zone__atc">Add to Cart</button>
            </div>
            <button class="clean-zone__wishlist">♥ Add to Wishlist</button>
          </div>

          <a href="#" class="quick-view-modal__view-full">View full product details</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ========== gear-divider [REUSE] ========== -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>

<!-- ========== workbench-cards [REUSE] — curated bottom slot, 2 cards side-by-side ========== -->
<section class="workbench-cards">
  <div class="container">
    <div class="workbench-cards__section-head">
      <span class="eyebrow-stamp">Workbench Picks · For Combat Patrols</span>
      <h2 class="workbench-cards__section-title">Once The Patrol's On The Mat</h2>
      <span class="workbench-cards__section-rule" aria-hidden="true"></span>
      <p class="workbench-cards__section-lede">Two from the bench — a workshop guide for the chapter you've just picked, and a painted-up patrol from a regular to show you where the job ends.</p>
    </div>

    <div class="workbench-cards__grid">

      <!-- Card 1: how-to guide -->
      <article class="workbench-cards__card rivet-panel">
        <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
        <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
        <div class="workbench-cards__cover">
          <img src="https://placehold.co/800x600/2B1B1C/F4A479?font=playfair&text=How-To+Guide" alt="Edge-highlighting tutorial cover">
        </div>
        <div class="workbench-cards__body">
          <div class="workbench-cards__meta">
            <span class="workbench-cards__pill">Beginner-friendly</span>
            <span class="workbench-cards__pill workbench-cards__pill--time">18 min read</span>
          </div>
          <h3 class="workbench-cards__title">Edge-Highlighting a Combat Patrol of Marines</h3>
          <p class="workbench-cards__excerpt">Six brushes, four paints, one mug of tea. The bare-bones edge routine that gets a ten-mini patrol off the bench and onto the mat in a weekend — without flubbing the gold trim.</p>
          <button class="workbench-cards__cta">Read the guide →</button>
        </div>
      </article>

      <!-- Card 2: painting showcase highlight -->
      <article class="workbench-cards__card rivet-panel">
        <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
        <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
        <div class="workbench-cards__cover">
          <img src="https://placehold.co/800x600/1B1314/F4A479?font=playfair&text=Painting+Showcase" alt="Painted Combat Patrol showcase cover">
        </div>
        <div class="workbench-cards__body">
          <div class="workbench-cards__meta">
            <span class="workbench-cards__pill">Painting Showcase</span>
            <span class="workbench-cards__pill workbench-cards__pill--time">Featured · @brushhand</span>
          </div>
          <h3 class="workbench-cards__title">Mara's Salamanders: A Patrol, Painted Slow</h3>
          <p class="workbench-cards__excerpt">Three weeks at the bench, four glazes per pauldron, and a fire-effect on the flamer the camera barely catches. Mara walks us through the chapter scheme she's been refining since 2023.</p>
          <button class="workbench-cards__cta">See the showcase →</button>
        </div>
      </article>

    </div>
  </div>
</section>

<!-- ========== newsletter-garrison [REUSE] — copy LEFT / form RIGHT ========== -->
<section class="newsletter-garrison">
  <div class="container">
    <div class="newsletter-garrison__panel rivet-panel">
      <span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
      <span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
      <div class="newsletter-garrison__copy">
        <span class="eyebrow-stamp">Newsletter · Cross-Brand Loyalty</span>
        <h3>Join the Garrison</h3>
        <p>New Combat Patrols, pre-orders, paint-night invites, and the odd 10% nudge when the wagon comes in. Sent only when there's something worth sending.</p>
        <div class="newsletter-garrison__perks">
          <span>10% off first order</span>
          <span>500 bonus loyalty points</span>
          <span>One mailout a fortnight</span>
        </div>
      </div>
      <form class="newsletter-garrison__form">
        <input type="email" placeholder="ranger@your-garrison.uk">
        <button type="submit">Enlist</button>
      </form>
    </div>
  </div>
</section>

<!-- ========== site-footer [REUSE] ========== -->
<footer class="site-footer">
  <div class="site-footer__columns">
    <div class="site-footer__brand">
      <div class="site-footer__brand-mark">
        <span class="site-header__cog" style="width:36px;height:36px;"></span>
        <span class="site-footer__word">War Dungeon</span>
      </div>
      <p class="site-footer__copy">The workbench of warriors. Warhammer and Dungeons & Dragons, stocked, painted, and explained — from the corner of every workshop, since 2018.</p>
      <span class="site-footer__badge">⬡ A Nerdworks Brand</span>
    </div>
    <div class="site-footer__col">
      <h4 class="site-footer__col-title">Shop</h4>
      <ul class="site-footer__list">
        <li><a href="#">Warhammer 40,000</a></li>
        <li><a href="#">Age of Sigmar</a></li>
        <li><a href="#">The Old World</a></li>
        <li><a href="#">Dungeons & Dragons</a></li>
        <li><a href="#">Paints & Hobby</a></li>
        <li><a href="#">New Releases</a></li>
        <li><a href="#">On Sale</a></li>
      </ul>
    </div>
    <div class="site-footer__col">
      <h4 class="site-footer__col-title">Discover</h4>
      <ul class="site-footer__list">
        <li><a href="#">Army Builder</a></li>
        <li><a href="#">Battle Simulator</a></li>
        <li><a href="#">How-To Guides</a></li>
        <li><a href="#">Painting Showcase</a></li>
        <li><a href="#">Creator Partners</a></li>
        <li><a href="#">Community</a></li>
      </ul>
    </div>
    <div class="site-footer__col">
      <h4 class="site-footer__col-title">Help</h4>
      <ul class="site-footer__list">
        <li><a href="#">Contact</a></li>
        <li><a href="#">Shipping</a></li>
        <li><a href="#">Returns</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Track your order</a></li>
        <li><a href="#">Store finder</a></li>
      </ul>
    </div>
    <div class="site-footer__col">
      <h4 class="site-footer__col-title">Brand & Loyalty</h4>
      <ul class="site-footer__list">
        <li><a href="#">About War Dungeon</a></li>
        <li><a href="#">Sister Brands</a></li>
        <li><a href="#">Loyalty programme</a></li>
        <li><a href="#">Exchange for gifts</a></li>
        <li><a href="#">Affiliate</a></li>
        <li><a href="#">Press</a></li>
      </ul>
    </div>
  </div>
  <div class="site-footer__baseline">
    <div class="site-footer__baseline-inner">
      <div class="site-footer__pay">
        <span>Visa</span><span>MC</span><span>Amex</span><span>PayPal</span><span>Klarna</span><span>Apple Pay</span>
      </div>
      <div class="site-footer__social">
        <a href="#" aria-label="Instagram">IG</a>
        <a href="#" aria-label="YouTube">YT</a>
        <a href="#" aria-label="TikTok">TT</a>
        <a href="#" aria-label="X">X</a>
      </div>
      <div class="site-footer__legal">© 2026 War Dungeon · Privacy · Terms · Cookies</div>
    </div>
  </div>
</footer>

</body>
</html>