<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Combat Patrol: Space Marines — War Dungeon</title>
<link rel="stylesheet" href="https://use.typekit.net/onl7dxx.css">
<style>
/* =========================================================
TOKENS — Frontier / SWD1 (verbatim from styleguide)
========================================================= */
:root {
/* palette */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--positive: #4A6E50;
--negative: #C8442D;
--white: #FFFFFF;
--white-dark: #EDEDED;
/* surface roles */
--bg-page: var(--rodeo);
--bg-panel-dark: var(--cowboy);
--bg-chrome: var(--liquourice);
--bg-inset-light: var(--rodeo-light);
/* text per ground */
--text-on-page: var(--caput);
--text-on-dark: var(--rodeo-light);
--text-on-light: var(--caput);
--eyebrow-on-dark: var(--bronze);
--eyebrow-on-light:var(--sienna);
/* typography */
--f-display: "modesto-condensed", "Playfair Display", "Palatino Linotype", Georgia, serif;
--f-body: "palatino-linotype", "Palatino Linotype", "Book Antiqua", Palatino, "EB Garamond", Georgia, serif;
--t-display: 96px;
--t-h1: 64px;
--t-h2: 48px;
--t-h3: 36px;
--t-h4: 24px;
--t-body-lg: 22px;
--t-body: 20px; /* Product-Page-Grounded base — lived v1 */
--t-body-sm: 16px;
--t-eyebrow: 13px;
--t-micro: 12px;
--lh-tight: 1.2;
--lh-heading: 1.35;
--lh-body: 1.5;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* spacing */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
--s-9: 96px; --s-10:128px;
/* radii */
--r-sm: 4px; --r-md: 7px; --r-lg: 14px; --r-xl: 21px;
/* borders */
--b-hair: 1px; --b-reg: 2px; --b-thick: 4px;
/* container */
--max-w: 1440px;
--gutter: 40px;
}
/* =========================================================
RESET / BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-page);
color: var(--text-on-page);
font-family: var(--f-body);
font-size: var(--t-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, h5 {
font-family: var(--f-display);
font-weight: 500;
letter-spacing: var(--ls-wide);
line-height: var(--lh-heading);
margin: 0;
}
/* page container */
.wd-wrap {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* =========================================================
GEAR-PATTERN FILL — bronze stroke @ 10% opacity
integral to every dark panel surface
========================================================= */
.has-gear {
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23F4A479' stroke-opacity='0.10' stroke-width='1.2'><circle cx='60' cy='60' r='34'/><circle cx='60' cy='60' r='24'/><circle cx='60' cy='60' r='10'/><g stroke-width='2.4' stroke-linecap='round'><line x1='60' y1='16' x2='60' y2='26'/><line x1='60' y1='94' x2='60' y2='104'/><line x1='16' y1='60' x2='26' y2='60'/><line x1='94' y1='60' x2='104' y2='60'/><line x1='28' y1='28' x2='35' y2='35'/><line x1='85' y1='85' x2='92' y2='92'/><line x1='28' y1='92' x2='35' y2='85'/><line x1='85' y1='35' x2='92' y2='28'/></g><circle cx='180' cy='180' r='22'/><circle cx='180' cy='180' r='14'/><circle cx='180' cy='180' r='5'/><g stroke-width='2' stroke-linecap='round'><line x1='180' y1='150' x2='180' y2='158'/><line x1='180' y1='202' x2='180' y2='210'/><line x1='150' y1='180' x2='158' y2='180'/><line x1='202' y1='180' x2='210' y2='180'/></g></g></svg>");
background-repeat: repeat;
background-position: center;
}
/* =========================================================
SET-IN PANEL — the structural primitive
sharp top corners, 7px rounded bottom corners, dark cowboy,
gear-pattern fill. Margin-bottom carries section rhythm.
========================================================= */
.wd-band {
background-color: var(--bg-panel-dark);
color: var(--text-on-dark);
border-radius: 0 0 var(--r-md) var(--r-md);
margin-bottom: var(--s-8);
}
.wd-band__inner {
padding: var(--s-7) var(--s-7);
}
.wd-band__eyebrow {
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--eyebrow-on-dark);
margin: 0 0 var(--s-3);
}
.wd-band__title {
font-size: var(--t-h3);
color: var(--rodeo-light);
margin: 0 0 var(--s-6);
}
.wd-band__lede {
max-width: 56ch;
color: var(--rodeo-light);
opacity: 0.85;
margin: 0 0 var(--s-6);
}
/* =========================================================
1. PRE-HEADER ANNOUNCEMENT BAR
chrome — no set-in geometry
========================================================= */
.wd-promo {
background: var(--bg-chrome);
color: var(--rodeo-light);
font-family: var(--f-display);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-size: var(--t-eyebrow);
border-bottom: var(--b-hair) solid rgba(244,164,121,0.18);
}
.wd-promo__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s-3) var(--gutter);
max-width: var(--max-w);
margin: 0 auto;
}
.wd-promo__msg { display: flex; align-items: center; gap: var(--s-3); }
.wd-promo__msg svg { width: 16px; height: 16px; fill: var(--bronze); }
.wd-promo__loyalty { color: var(--bronze); }
/* =========================================================
2. GLOBAL HEADER
========================================================= */
.wd-header {
background: var(--bg-chrome);
color: var(--rodeo-light);
border-bottom: var(--b-reg) solid var(--bronze);
}
.wd-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-7);
padding: var(--s-5) var(--gutter);
max-width: var(--max-w);
margin: 0 auto;
}
.wd-logo {
font-family: var(--f-display);
font-size: 32px;
letter-spacing: var(--ls-wide);
color: var(--rodeo-light);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--s-3);
}
.wd-logo svg { width: 36px; height: 36px; fill: var(--bronze); }
.wd-nav {
display: flex;
gap: var(--s-6);
list-style: none;
margin: 0;
padding: 0;
font-family: var(--f-display);
font-size: 16px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
}
.wd-nav a {
text-decoration: none;
color: var(--rodeo-light);
padding: var(--s-2) 0;
border-bottom: var(--b-reg) solid transparent;
}
.wd-nav a:hover { border-bottom-color: var(--bronze); color: var(--bronze); }
.wd-tools { display: flex; align-items: center; gap: var(--s-5); }
.wd-tool {
background: transparent;
border: var(--b-reg) ridge var(--bronze);
color: var(--rodeo-light);
width: 42px; height: 42px;
border-radius: var(--r-md);
display: inline-flex; align-items: center; justify-content: center;
position: relative;
}
.wd-tool svg { width: 18px; height: 18px; fill: var(--rodeo-light); }
.wd-tool__badge {
position: absolute; top: -8px; right: -8px;
background: var(--sienna);
color: var(--white);
border: var(--b-reg) ridge var(--bronze);
font-family: var(--f-display);
font-size: 11px;
letter-spacing: var(--ls-wider);
border-radius: 999px;
padding: 2px 6px;
}
/* =========================================================
3. BREADCRUMBS
========================================================= */
.wd-crumbs {
padding: var(--s-5) var(--gutter) var(--s-3);
max-width: var(--max-w);
margin: 0 auto;
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--caput);
}
.wd-crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.wd-crumbs a { text-decoration: none; color: var(--caput); opacity: 0.75; }
.wd-crumbs a:hover { color: var(--sienna); opacity: 1; }
.wd-crumbs .sep { opacity: 0.4; }
.wd-crumbs [aria-current="page"] { color: var(--sienna); }
/* =========================================================
4-5. PRODUCT HEADER — inverted dark panel, gallery LEFT, content RIGHT
========================================================= */
.wd-product { /* uses .wd-band + .has-gear */
margin-bottom: var(--s-7);
}
.wd-product__grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 0;
align-items: stretch;
}
.wd-product__gallery {
padding: var(--s-7) 0 var(--s-7) var(--s-7);
position: relative;
}
.wd-product__content {
padding: var(--s-7) var(--s-7) var(--s-7) var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-4);
}
/* gallery main image + fade overlay */
.wd-gallery__main {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--r-md);
overflow: hidden;
background:
radial-gradient(ellipse at 40% 35%, #6c3826 0%, #2e1614 55%, #150909 100%);
}
.wd-gallery__main::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.45) 100%);
}
.wd-gallery__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.wd-gallery__placeholder svg {
width: 55%;
height: auto;
opacity: 0.85;
filter: drop-shadow(0 0 18px rgba(0,0,0,0.6));
}
/* hard linear-gradient fade — image's right edge bleeds into dark panel */
.wd-gallery__main::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 45%, var(--cowboy) 96%);
pointer-events: none;
}
.wd-gallery__zoom {
position: absolute;
top: var(--s-4); left: var(--s-4);
background: rgba(27,19,20,0.75);
color: var(--rodeo-light);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 6px 12px;
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 2;
}
.wd-gallery__wishlist {
position: absolute;
top: var(--s-4); right: var(--s-4);
width: 46px; height: 46px;
border-radius: var(--r-md);
background: rgba(27,19,20,0.78);
border: var(--b-reg) ridge var(--bronze);
color: var(--rodeo-light);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.wd-gallery__wishlist svg { width: 18px; height: 18px; fill: none; stroke: var(--bronze); stroke-width: 2; }
/* thumbnail strip */
.wd-gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-3);
margin-top: var(--s-4);
}
.wd-gallery__thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--r-md);
overflow: hidden;
border: var(--b-reg) ridge var(--bronze);
background: radial-gradient(ellipse at 50% 45%, #5a3322 0%, #281312 70%, #110707 100%);
cursor: pointer;
}
.wd-gallery__thumb--active { border-width: var(--b-thick); }
.wd-gallery__thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 50%, var(--cowboy) 100%);
pointer-events: none;
}
.wd-gallery__thumb-label {
position: absolute;
bottom: 4px; left: 6px;
font-family: var(--f-display);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--rodeo-light);
opacity: 0.85;
z-index: 2;
}
/* product content column */
.wd-product__eyebrow {
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
margin: 0;
}
.wd-product__title {
font-family: var(--f-display);
font-size: 44px;
line-height: 1.05;
color: var(--rodeo-light);
letter-spacing: 0;
margin: 0;
}
.wd-product__rating {
display: flex;
align-items: center;
gap: var(--s-3);
font-family: var(--f-body);
font-size: var(--t-body-sm);
color: var(--rodeo-light);
}
.wd-stars { color: var(--bronze); letter-spacing: 0.1em; font-size: 18px; }
.wd-product__rating a {
color: var(--rodeo-light);
text-decoration: underline;
text-decoration-color: rgba(244,164,121,0.45);
text-underline-offset: 3px;
}
.wd-product__lede {
font-family: var(--f-body);
font-size: var(--t-body);
line-height: var(--lh-body);
color: var(--rodeo-light);
opacity: 0.92;
margin: var(--s-2) 0 var(--s-3);
}
.wd-product__price {
display: flex;
align-items: baseline;
gap: var(--s-4);
flex-wrap: wrap;
margin-top: var(--s-2);
}
.wd-product__price-now {
font-family: var(--f-display);
font-size: 44px;
color: var(--rodeo-light);
}
.wd-product__price-was {
font-family: var(--f-body);
font-size: var(--t-body-lg);
color: var(--rodeo-light);
opacity: 0.55;
text-decoration: line-through;
}
.wd-product__price-save {
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
background: var(--sienna);
color: var(--white);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 4px 10px;
}
/* loyalty roundel — bronze badge, ridge border, condensed caps */
.wd-loyalty {
display: inline-flex;
align-items: center;
gap: var(--s-3);
background: var(--cowboy);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: var(--s-3) var(--s-4);
align-self: flex-start;
}
.wd-loyalty__icon {
width: 32px; height: 32px;
border-radius: 999px;
background: var(--bronze);
color: var(--cowboy);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--f-display);
font-size: 18px;
border: var(--b-reg) ridge var(--sienna);
}
.wd-loyalty__copy {
font-family: var(--f-display);
font-size: 16px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--bronze);
line-height: 1.1;
}
.wd-loyalty__copy small {
display: block;
font-family: var(--f-body);
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: var(--rodeo-light);
opacity: 0.75;
margin-top: 2px;
}
/* variation selector */
.wd-variation { margin-top: var(--s-2); }
.wd-variation__label {
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
display: block;
margin-bottom: var(--s-2);
}
.wd-variation__opts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.wd-variation__chip {
background: transparent;
color: var(--rodeo-light);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 8px 14px;
font-family: var(--f-display);
font-size: 14px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
}
.wd-variation__chip--active { background: var(--sienna); color: var(--white); }
/* in-stock signal */
.wd-stock {
display: inline-flex;
align-items: center;
gap: var(--s-3);
background: var(--liquourice);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 8px 14px;
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--rodeo-light);
align-self: flex-start;
}
.wd-stock__dot {
width: 10px; height: 10px; border-radius: 999px;
background: var(--positive);
box-shadow: 0 0 0 2px rgba(74,110,80,0.35);
}
/* ATC row */
.wd-atc-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--s-3);
align-items: stretch;
margin-top: var(--s-3);
}
.wd-qty {
display: inline-flex;
align-items: stretch;
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
overflow: hidden;
background: var(--liquourice);
}
.wd-qty button {
background: transparent;
color: var(--rodeo-light);
border: 0;
width: 42px;
font-family: var(--f-display);
font-size: 22px;
}
.wd-qty input {
width: 44px;
background: transparent;
border: 0;
color: var(--rodeo-light);
text-align: center;
font-family: var(--f-display);
font-size: 18px;
letter-spacing: var(--ls-wide);
}
/* primary CTA — sienna with 2px ridge bronze */
.wd-cta {
background: var(--sienna);
color: var(--white);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
font-family: var(--f-display);
font-size: 22px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
padding: var(--s-3) var(--s-6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-3);
text-decoration: none;
}
.wd-cta:hover { background: var(--liquourice); color: var(--bronze); }
.wd-cta svg { width: 18px; height: 18px; fill: currentColor; }
.wd-cta--block { width: 100%; }
/* wishlist (ghost) */
.wd-wishlist {
background: transparent;
color: var(--rodeo-light);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: var(--s-3) var(--s-5);
font-family: var(--f-display);
font-size: 16px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: var(--s-2);
}
.wd-wishlist svg { width: 16px; height: 16px; stroke: var(--bronze); fill: none; stroke-width: 2; }
/* express checkout row */
.wd-express {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-2);
margin-top: var(--s-3);
}
.wd-express__btn {
background: var(--liquourice);
color: var(--rodeo-light);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 10px 8px;
font-family: var(--f-display);
font-size: 13px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.wd-express__btn svg { width: 14px; height: 14px; fill: var(--bronze); }
/* free delivery threshold */
.wd-freedel {
display: flex;
align-items: center;
gap: var(--s-3);
background: var(--liquourice);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: var(--s-3) var(--s-4);
font-family: var(--f-display);
font-size: 14px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--rodeo-light);
}
.wd-freedel__tick {
width: 28px; height: 28px;
border-radius: 999px;
background: var(--bronze);
color: var(--cowboy);
display: inline-flex; align-items: center; justify-content: center;
border: var(--b-reg) ridge var(--sienna);
flex: 0 0 auto;
}
.wd-freedel__tick svg { width: 14px; height: 14px; fill: currentColor; }
.wd-freedel__bar {
flex: 1;
height: 6px;
background: rgba(244,164,121,0.18);
border-radius: 999px;
overflow: hidden;
}
.wd-freedel__fill {
display: block;
height: 100%;
width: 100%;
background: var(--bronze);
}
/* secondary cluster */
.wd-secondary {
display: flex;
gap: var(--s-4);
margin-top: var(--s-2);
font-family: var(--f-display);
font-size: 14px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
}
.wd-secondary a {
color: var(--bronze);
text-decoration: none;
border-bottom: var(--b-hair) solid rgba(244,164,121,0.45);
padding-bottom: 2px;
}
/* =========================================================
6. UNIVERSAL TRUST STRIP — dark cowboy panel, set-in geometry
4 compact badge cells with bronze gear icon + condensed caption
========================================================= */
.wd-trust { /* uses .wd-band + .has-gear */ }
.wd-trust__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
padding: var(--s-6) var(--s-7);
}
.wd-trust__cell {
background: var(--liquourice);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: var(--s-5);
display: flex;
align-items: center;
gap: var(--s-4);
}
.wd-trust__icon {
width: 52px; height: 52px;
border-radius: var(--r-md);
background: var(--cowboy);
border: var(--b-reg) ridge var(--bronze);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.wd-trust__icon svg { width: 30px; height: 30px; fill: var(--bronze); }
.wd-trust__copy {
font-family: var(--f-display);
font-size: 15px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--rodeo-light);
line-height: 1.25;
}
.wd-trust__copy small {
display: block;
font-family: var(--f-body);
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: var(--rodeo-light);
opacity: 0.65;
margin-top: 2px;
}
/* =========================================================
7. TABS — dark cowboy panel, bronze ridge buttons, rodeo-light inset
========================================================= */
.wd-tabs { /* uses .wd-band + .has-gear */ }
.wd-tabs__head {
display: flex;
gap: var(--s-2);
padding: var(--s-6) var(--s-7) 0;
flex-wrap: wrap;
}
.wd-tabs__btn {
background: var(--liquourice);
color: var(--rodeo-light);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md) var(--r-md) 0 0;
padding: var(--s-3) var(--s-5);
font-family: var(--f-display);
font-size: 17px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
}
.wd-tabs__btn--active {
background: var(--sienna);
color: var(--white);
}
.wd-tabs__body {
margin: 0 var(--s-7) var(--s-7);
background: var(--bg-inset-light);
color: var(--text-on-light);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: var(--s-7);
}
.wd-tabs__body h3 {
font-family: var(--f-display);
font-size: var(--t-h3);
color: var(--sienna);
margin: 0 0 var(--s-3);
}
.wd-tabs__body h4 {
font-family: var(--f-display);
font-size: var(--t-h4);
color: var(--caput);
margin: var(--s-6) 0 var(--s-3);
letter-spacing: var(--ls-wide);
}
.wd-tabs__body p {
font-family: var(--f-body);
font-size: var(--t-body);
line-height: var(--lh-body);
color: var(--caput);
max-width: 64ch;
margin: 0 0 var(--s-4);
}
.wd-tabs__body ul {
margin: 0 0 var(--s-4);
padding-left: var(--s-5);
font-family: var(--f-body);
font-size: var(--t-body);
line-height: 1.55;
color: var(--caput);
}
.wd-tabs__eyebrow {
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
margin: 0 0 var(--s-3);
}
.wd-tabs__lede {
font-family: var(--f-body);
font-size: var(--t-body-lg);
color: var(--caput);
margin: 0 0 var(--s-5);
max-width: 56ch;
}
.wd-tabs__pullout {
display: flex;
gap: var(--s-5);
background: var(--rodeo);
border: var(--b-reg) ridge var(--caput);
border-radius: var(--r-md);
padding: var(--s-5);
margin: var(--s-5) 0;
font-family: var(--f-body);
font-size: 17px;
color: var(--caput);
font-style: italic;
}
.wd-tabs__pullout::before {
content: "“";
font-family: var(--f-display);
font-size: 72px;
line-height: 0.7;
color: var(--sienna);
}
/* =========================================================
8. PAINTED BY THE COMMUNITY
========================================================= */
.wd-community { /* uses .wd-band + .has-gear */ }
.wd-community__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s-4);
padding: 0 var(--s-7) var(--s-6);
}
.wd-tile {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--r-md);
overflow: hidden;
background: var(--cowboy);
border: var(--b-thick) ridge var(--bronze);
}
.wd-tile__art {
position: absolute; inset: 0;
}
.wd-tile--1 .wd-tile__art { background: radial-gradient(circle at 50% 45%, #8b4a2a 0%, #3a1c14 60%, #170a08 100%); }
.wd-tile--2 .wd-tile__art { background: radial-gradient(circle at 55% 40%, #c2a256 0%, #5a3a18 65%, #1b0d05 100%); }
.wd-tile--3 .wd-tile__art { background: radial-gradient(circle at 50% 50%, #7a1614 0%, #340908 65%, #110404 100%); }
.wd-tile--4 .wd-tile__art { background: radial-gradient(circle at 45% 40%, #214b6a 0%, #0e1f2c 65%, #050a10 100%); }
.wd-tile--5 .wd-tile__art { background: radial-gradient(circle at 50% 45%, #2e3d2c 0%, #0f1610 65%, #060805 100%); }
.wd-tile--6 .wd-tile__art { background: radial-gradient(circle at 50% 50%, #3a3a3a 0%, #161616 65%, #050505 100%); }
.wd-tile__fade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(27,19,20,0.95) 100%);
}
.wd-tile__caption {
position: absolute;
left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
font-family: var(--f-display);
font-size: 12px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--rodeo-light);
z-index: 2;
}
.wd-tile__caption small {
display: block;
font-family: var(--f-body);
font-size: 11px;
letter-spacing: 0;
text-transform: none;
color: var(--bronze);
opacity: 0.85;
margin-top: 2px;
}
.wd-community__cta {
text-align: center;
padding: 0 var(--s-7) var(--s-7);
}
/* =========================================================
9. PAIRS WELL WITH — cross-sell strip
========================================================= */
.wd-pairs { /* uses .wd-band + .has-gear */ }
.wd-pairs__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
padding: 0 var(--s-7) var(--s-7);
}
.wd-pcard {
background: var(--cowboy);
border: var(--b-thick) ridge var(--bronze);
border-radius: var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
}
.wd-pcard__media {
position: relative;
aspect-ratio: 1 / 1;
background: radial-gradient(circle at 50% 45%, #4a2616 0%, #1d0c08 70%, #0b0403 100%);
border-bottom: var(--b-reg) ridge var(--bronze);
}
.wd-pcard--paint1 .wd-pcard__media { background: radial-gradient(circle at 50% 45%, #2a4d8b 0%, #112341 70%, #060c1a 100%); }
.wd-pcard--paint2 .wd-pcard__media { background: radial-gradient(circle at 50% 45%, #8e1a10 0%, #3a0a06 70%, #150302 100%); }
.wd-pcard--paint3 .wd-pcard__media { background: radial-gradient(circle at 50% 45%, #7a7a85 0%, #2b2b30 70%, #0f0f12 100%); }
.wd-pcard--tool .wd-pcard__media { background: radial-gradient(circle at 50% 45%, #4d2f1f 0%, #1c0f08 70%, #0a0503 100%); }
.wd-pcard__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(27,19,20,0.85) 100%);
}
.wd-pcard__media-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
opacity: 0.85;
}
.wd-pcard__media-icon svg { width: 55%; height: auto; }
.wd-pcard__body {
padding: var(--s-4) var(--s-4) var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-2);
flex: 1;
}
.wd-pcard__eyebrow {
font-family: var(--f-display);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.wd-pcard__title {
font-family: var(--f-display);
font-size: 19px;
color: var(--rodeo-light);
margin: 0;
letter-spacing: 0;
line-height: 1.15;
}
.wd-pcard__meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: var(--s-3);
}
.wd-pcard__price {
font-family: var(--f-display);
font-size: 20px;
color: var(--rodeo-light);
}
.wd-pcard__atc {
background: var(--sienna);
color: var(--white);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 6px 12px;
font-family: var(--f-display);
font-size: 12px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
}
.wd-pcard__atc svg { width: 12px; height: 12px; fill: currentColor; }
.wd-pcard__atc:hover { background: var(--liquourice); color: var(--bronze); }
/* =========================================================
10. FROM THE WORKBENCH
========================================================= */
.wd-workbench { /* uses .wd-band + .has-gear */ }
.wd-workbench__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-5);
padding: 0 var(--s-7) var(--s-7);
}
.wd-wbcard {
background: var(--cowboy);
border: var(--b-thick) ridge var(--bronze);
border-radius: var(--r-md);
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1.1fr;
}
.wd-wbcard__media {
position: relative;
background: radial-gradient(ellipse at 40% 45%, #6a3a25 0%, #2c1612 65%, #110707 100%);
min-height: 240px;
border-right: var(--b-reg) ridge var(--bronze);
}
.wd-wbcard--2 .wd-wbcard__media { background: radial-gradient(ellipse at 50% 40%, #5b3a1f 0%, #271811 65%, #100807 100%); }
.wd-wbcard__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 50%, var(--cowboy) 100%);
}
.wd-wbcard__media-icon {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0.8;
}
.wd-wbcard__media-icon svg { width: 50%; height: auto; }
.wd-wbcard__body {
padding: var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.wd-wbcard__eyebrow {
font-family: var(--f-display);
font-size: var(--t-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.wd-wbcard__title {
font-family: var(--f-display);
font-size: 24px;
color: var(--rodeo-light);
margin: 0;
line-height: 1.2;
}
.wd-wbcard__lede {
font-family: var(--f-body);
font-size: 16px;
color: var(--rodeo-light);
opacity: 0.78;
margin: 0;
}
.wd-wbcard__meta {
display: flex;
gap: var(--s-2);
align-items: center;
margin-top: var(--s-2);
flex-wrap: wrap;
}
.wd-pill {
font-family: var(--f-display);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
background: var(--liquourice);
color: var(--bronze);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 4px 10px;
}
.wd-wbcard__cta {
margin-top: auto;
background: transparent;
color: var(--rodeo-light);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 8px 14px;
font-family: var(--f-display);
font-size: 13px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
align-self: flex-start;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.wd-wbcard__cta:hover { background: var(--sienna); color: var(--white); }
/* =========================================================
11. RELATED PRODUCTS — standard product card grid
========================================================= */
.wd-related { /* uses .wd-band + .has-gear */ }
.wd-related__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
padding: 0 var(--s-7) var(--s-7);
}
.wd-rcard {
background: var(--cowboy);
border: var(--b-thick) ridge var(--bronze);
border-radius: var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
}
.wd-rcard__media {
position: relative;
aspect-ratio: 1 / 1;
background: radial-gradient(ellipse at 45% 40%, #5d3424 0%, #251210 65%, #110707 100%);
border-bottom: var(--b-reg) ridge var(--bronze);
}
.wd-rcard--2 .wd-rcard__media { background: radial-gradient(ellipse at 45% 40%, #2d4438 0%, #0e1a14 65%, #050807 100%); }
.wd-rcard--3 .wd-rcard__media { background: radial-gradient(ellipse at 45% 40%, #6a4e1c 0%, #2a1f0a 65%, #110b04 100%); }
.wd-rcard--4 .wd-rcard__media { background: radial-gradient(ellipse at 45% 40%, #4a3a55 0%, #1b1426 65%, #090611 100%); }
.wd-rcard__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(27,19,20,0.92) 100%);
}
.wd-rcard__media-icon {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0.78;
}
.wd-rcard__media-icon svg { width: 55%; height: auto; }
.wd-rcard__loyalty {
position: absolute;
top: var(--s-3); right: var(--s-3);
background: var(--cowboy);
color: var(--bronze);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 4px 8px;
font-family: var(--f-display);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
z-index: 2;
}
.wd-rcard__body {
padding: var(--s-4);
display: flex;
flex-direction: column;
gap: var(--s-2);
flex: 1;
}
.wd-rcard__eyebrow {
font-family: var(--f-display);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.wd-rcard__title {
font-family: var(--f-display);
font-size: 21px;
color: var(--rodeo-light);
margin: 0;
line-height: 1.15;
}
.wd-rcard__rating {
font-family: var(--f-body);
font-size: 13px;
color: var(--rodeo-light);
opacity: 0.75;
}
.wd-rcard__stars { color: var(--bronze); letter-spacing: 0.08em; }
.wd-rcard__foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: var(--s-3);
}
.wd-rcard__price {
font-family: var(--f-display);
font-size: 22px;
color: var(--rodeo-light);
}
.wd-rcard__price-was {
display: inline-block;
font-family: var(--f-body);
font-size: 13px;
opacity: 0.55;
text-decoration: line-through;
margin-left: 6px;
color: var(--rodeo-light);
}
.wd-rcard__atc {
background: var(--sienna);
color: var(--white);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 6px 12px;
font-family: var(--f-display);
font-size: 12px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
.wd-rcard__atc:hover { background: var(--liquourice); color: var(--bronze); }
/* =========================================================
12. NEWSLETTER — "Join the Garrison" single-row strip
========================================================= */
.wd-garrison { /* uses .wd-band + .has-gear */ }
.wd-garrison__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s-7);
padding: var(--s-7);
align-items: center;
}
.wd-garrison__title {
font-family: var(--f-display);
font-size: 36px;
color: var(--rodeo-light);
margin: 0 0 var(--s-2);
}
.wd-garrison__lede {
font-family: var(--f-body);
font-size: 17px;
color: var(--rodeo-light);
opacity: 0.78;
margin: 0;
max-width: 56ch;
}
.wd-garrison__form {
display: flex;
gap: var(--s-2);
align-items: stretch;
}
.wd-garrison__input {
background: var(--liquourice);
color: var(--rodeo-light);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: var(--s-3) var(--s-4);
font-family: var(--f-body);
font-size: var(--t-body);
width: 320px;
}
.wd-garrison__input::placeholder { color: var(--rodeo-light); opacity: 0.55; }
/* =========================================================
13. FOOTER
========================================================= */
.wd-footer {
background: var(--bg-chrome);
color: var(--rodeo-light);
margin-top: var(--s-7);
border-top: var(--b-thick) ridge var(--bronze);
}
.wd-footer__inner {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--s-8) var(--gutter) var(--s-6);
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
gap: var(--s-7);
}
.wd-footer__brand .wd-logo { font-size: 28px; }
.wd-footer__brand p {
font-family: var(--f-body);
font-size: 14px;
color: var(--rodeo-light);
opacity: 0.7;
margin: var(--s-4) 0 0;
max-width: 30ch;
}
.wd-footer h4 {
font-family: var(--f-display);
font-size: 14px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
margin: 0 0 var(--s-4);
}
.wd-footer ul {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--f-body);
font-size: 15px;
}
.wd-footer ul li { margin-bottom: var(--s-2); }
.wd-footer ul a {
color: var(--rodeo-light);
text-decoration: none;
opacity: 0.85;
}
.wd-footer ul a:hover { color: var(--bronze); opacity: 1; }
.wd-footer__base {
border-top: var(--b-hair) solid rgba(244,164,121,0.2);
padding: var(--s-5) var(--gutter);
max-width: var(--max-w);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--s-4);
font-family: var(--f-display);
font-size: 12px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--rodeo-light);
opacity: 0.85;
}
.wd-footer__pay, .wd-footer__social { display: flex; gap: var(--s-2); align-items: center; }
.wd-footer__pay span,
.wd-footer__social a {
background: var(--cowboy);
border: var(--b-hair) solid var(--bronze);
border-radius: var(--r-sm);
padding: 4px 8px;
font-family: var(--f-display);
font-size: 11px;
color: var(--rodeo-light);
text-decoration: none;
}
.wd-footer__nerd {
background: var(--sienna);
color: var(--white);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 6px 10px;
font-family: var(--f-display);
letter-spacing: var(--ls-widest);
}
/* =========================================================
STICKY MOBILE ATC BAR — permanent fixture, 0 radius top
========================================================= */
.wd-stickyatc {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--cowboy);
border-top: var(--b-thick) ridge var(--bronze);
border-radius: 0;
padding: var(--s-3) var(--s-4);
display: none;
align-items: center;
gap: var(--s-3);
z-index: 100;
}
.wd-stickyatc__thumb {
width: 52px; height: 52px;
border-radius: var(--r-md);
border: var(--b-reg) ridge var(--bronze);
background: radial-gradient(circle at 50% 45%, #6c3826 0%, #2e1614 65%, #150909 100%);
flex: 0 0 auto;
}
.wd-stickyatc__info {
flex: 1;
display: flex;
flex-direction: column;
}
.wd-stickyatc__title {
font-family: var(--f-display);
font-size: 14px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--rodeo-light);
line-height: 1.1;
}
.wd-stickyatc__price {
font-family: var(--f-display);
font-size: 18px;
color: var(--bronze);
}
.wd-stickyatc__cta {
background: var(--sienna);
color: var(--white);
border: var(--b-reg) ridge var(--bronze);
border-radius: var(--r-md);
font-family: var(--f-display);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
padding: var(--s-3) var(--s-4);
font-size: 14px;
}
/* =========================================================
RESPONSIVE — no ornament simplification; layouts stack
========================================================= */
@media (max-width: 1100px) {
.wd-product__grid { grid-template-columns: 1fr; }
.wd-product__gallery { padding: var(--s-6); }
.wd-product__content { padding: var(--s-6); }
.wd-gallery__main::after { background: linear-gradient(180deg, transparent 60%, var(--cowboy) 100%); }
.wd-pairs__grid { grid-template-columns: repeat(2, 1fr); }
.wd-related__grid { grid-template-columns: repeat(2, 1fr); }
.wd-community__grid { grid-template-columns: repeat(3, 1fr); }
.wd-workbench__grid { grid-template-columns: 1fr; }
.wd-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
.wd-footer__brand { grid-column: 1 / -1; }
.wd-garrison__inner { grid-template-columns: 1fr; }
.wd-garrison__form { flex-wrap: wrap; }
.wd-garrison__input { width: 100%; }
}
@media (max-width: 768px) {
:root { --t-h3: 28px; --gutter: 20px; }
.wd-product__title { font-size: 36px; }
.wd-product__price-now { font-size: 36px; }
.wd-nav, .wd-promo__msg { display: none; }
.wd-trust__grid { grid-template-columns: 1fr 1fr; }
.wd-related__grid { grid-template-columns: 1fr 1fr; }
.wd-community__grid { grid-template-columns: 1fr 1fr; }
.wd-footer__inner { grid-template-columns: 1fr 1fr; }
.wd-express { grid-template-columns: 1fr 1fr; }
.wd-tabs__head { padding: var(--s-4) var(--s-4) 0; }
.wd-tabs__body { margin: 0 var(--s-4) var(--s-4); padding: var(--s-5); }
.wd-stickyatc { display: flex; }
body { padding-bottom: 80px; }
.wd-band__inner, .wd-trust__grid, .wd-pairs__grid, .wd-related__grid, .wd-workbench__grid, .wd-community__grid {
padding-left: var(--s-4); padding-right: var(--s-4);
}
.wd-garrison__inner { padding: var(--s-5); }
}
@media (max-width: 480px) {
.wd-trust__grid, .wd-community__grid, .wd-pairs__grid, .wd-related__grid { grid-template-columns: 1fr; }
.wd-footer__inner { grid-template-columns: 1fr; }
.wd-product__title { font-size: 32px; }
}
</style>
</head>
<body>
<!-- ===== 1. PRE-HEADER ANNOUNCEMENT ===== -->
<div class="wd-promo" role="region" aria-label="Announcements">
<div class="wd-promo__inner">
<div class="wd-promo__msg">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 8h-3V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v9h2a2 2 0 0 0 4 0h6a2 2 0 0 0 4 0h2v-4a3 3 0 0 0-3-3z"/></svg>
<span>Free UK shipping over £75 — Dispatched within 24 hours</span>
</div>
<div class="wd-promo__msg">
<span class="wd-promo__loyalty">★ Earn loyalty points across every Nerdworks brand</span>
</div>
</div>
</div>
<!-- ===== 2. GLOBAL HEADER ===== -->
<header class="wd-header" role="banner">
<div class="wd-header__inner">
<a href="#" class="wd-logo" aria-label="War Dungeon home">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 4 6v6c0 5.55 3.84 10 8 10s8-4.45 8-10V6l-8-4z"/></svg>
War Dungeon
</a>
<nav aria-label="Primary">
<ul class="wd-nav">
<li><a href="#">Warhammer 40,000</a></li>
<li><a href="#">Age of Sigmar</a></li>
<li><a href="#">Old World</a></li>
<li><a href="#">D&D</a></li>
<li><a href="#">Paints & Hobby</a></li>
</ul>
</nav>
<div class="wd-tools">
<button class="wd-tool" aria-label="Search">
<svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 5.3 14L21 21.7 22.7 20 17 14.3A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/></svg>
</button>
<button class="wd-tool" aria-label="Account">
<svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-3.3 0-8 1.7-8 5v3h16v-3c0-3.3-4.7-5-8-5z"/></svg>
</button>
<button class="wd-tool" aria-label="Wishlist">
<svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9.3-9.1A5.2 5.2 0 0 1 12 6.1a5.2 5.2 0 0 1 9.3 5.8C19 16.5 12 21 12 21z"/></svg>
</button>
<button class="wd-tool" aria-label="Basket — 0 items">
<svg viewBox="0 0 24 24"><path d="M7 4h-2l-1 2v2h2l3.6 9.6a2 2 0 0 0 1.9 1.4h7a2 2 0 0 0 1.9-1.3l3-7.7H8.1L7 4zm2 16a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
<span class="wd-tool__badge">+595</span>
</button>
</div>
</div>
</header>
<!-- ===== 3. BREADCRUMBS ===== -->
<nav class="wd-crumbs" aria-label="Breadcrumb">
<ol>
<li><a href="#">Home</a></li><li class="sep">/</li>
<li><a href="#">Warhammer</a></li><li class="sep">/</li>
<li><a href="#">Warhammer 40,000</a></li><li class="sep">/</li>
<li><a href="#">Space Marines</a></li><li class="sep">/</li>
<li aria-current="page">Combat Patrol: Space Marines</li>
</ol>
</nav>
<!-- ===== 4-5. PRODUCT HEADER — inverted dark panel ===== -->
<div class="wd-wrap">
<section class="wd-band has-gear wd-product" aria-label="Product overview">
<div class="wd-product__grid">
<!-- gallery LEFT -->
<div class="wd-product__gallery">
<div class="wd-gallery__main" role="img" aria-label="Combat Patrol: Space Marines — assembled diorama">
<span class="wd-gallery__zoom">
<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M10 2a8 8 0 1 0 5.3 14L21 21.7 22.7 20 17 14.3A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm-1 3v2H7v2h2v2h2V9h2V7h-2V5H9z"/></svg>
Click to zoom
</span>
<button class="wd-gallery__wishlist" aria-label="Add to wishlist">
<svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9.3-9.1A5.2 5.2 0 0 1 12 6.1a5.2 5.2 0 0 1 9.3 5.8C19 16.5 12 21 12 21z"/></svg>
</button>
<div class="wd-gallery__placeholder" aria-hidden="true">
<svg viewBox="0 0 200 240" xmlns="http://www.w3.org/2000/svg">
<g fill="#d8c3b1" fill-opacity="0.85" stroke="#1B1314" stroke-width="2">
<path d="M100 12 L70 28 L62 56 L62 90 L52 110 L42 138 L46 178 L60 198 L72 218 L100 228 L128 218 L140 198 L154 178 L158 138 L148 110 L138 90 L138 56 L130 28 Z"/>
<path d="M70 60 Q100 50 130 60 L130 96 Q100 88 70 96 Z" fill="#F4A479"/>
<circle cx="86" cy="76" r="6" fill="#1B1314"/>
<circle cx="114" cy="76" r="6" fill="#1B1314"/>
<path d="M58 140 L100 130 L142 140 L138 178 L100 168 L62 178 Z" fill="#832D15"/>
</g>
</svg>
</div>
</div>
<div class="wd-gallery__thumbs">
<button class="wd-gallery__thumb wd-gallery__thumb--active" aria-label="Front view">
<span class="wd-gallery__thumb-label">Front</span>
</button>
<button class="wd-gallery__thumb" aria-label="Sprue detail">
<span class="wd-gallery__thumb-label">Sprue</span>
</button>
<button class="wd-gallery__thumb" aria-label="Scale comparison">
<span class="wd-gallery__thumb-label">Scale</span>
</button>
<button class="wd-gallery__thumb" aria-label="Painted reference">
<span class="wd-gallery__thumb-label">Painted</span>
</button>
</div>
</div>
<!-- content RIGHT -->
<div class="wd-product__content">
<p class="wd-product__eyebrow">Warhammer 40,000 · Space Marines</p>
<h1 class="wd-product__title">Combat Patrol: Space Marines</h1>
<div class="wd-product__rating">
<span class="wd-stars" aria-hidden="true">★★★★★</span>
<span>4.8</span>
<a href="#reviews">124 reviews</a>
</div>
<p class="wd-product__lede">
Ten miniatures. One starter army. Every chapter in the Imperium.
Push-fit, paint-ready — the fastest way to a Space Marines force
standing in formation on your gaming table by sundown.
</p>
<div class="wd-product__price">
<span class="wd-product__price-now">£119.00</span>
<span class="wd-product__price-was">£135.00</span>
<span class="wd-product__price-save">Save £16</span>
</div>
<div class="wd-loyalty" role="status" aria-label="Loyalty earn">
<span class="wd-loyalty__icon" aria-hidden="true">★</span>
<span class="wd-loyalty__copy">
Earn 595 loyalty points
<small>Redeemable across every Nerdworks brand — tap for the maths</small>
</span>
</div>
<div class="wd-variation">
<span class="wd-variation__label">Edition</span>
<div class="wd-variation__opts">
<button class="wd-variation__chip wd-variation__chip--active">Standard box</button>
<button class="wd-variation__chip">+ Primer add-on</button>
<button class="wd-variation__chip">+ Transfer pack</button>
</div>
</div>
<div class="wd-stock" role="status">
<span class="wd-stock__dot" aria-hidden="true"></span>
In stock — ships within 24h, weather permitting
</div>
<div class="wd-atc-row">
<div class="wd-qty" role="group" aria-label="Quantity">
<button aria-label="Decrease">−</button>
<input type="text" inputmode="numeric" value="1" aria-label="Quantity">
<button aria-label="Increase">+</button>
</div>
<button class="wd-cta wd-cta--block" type="button">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h-2l-1 2v2h2l3.6 9.6a2 2 0 0 0 1.9 1.4h7a2 2 0 0 0 1.9-1.3l3-7.7H8.1L7 4zm2 16a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
Add to Saddle
</button>
<button class="wd-wishlist" type="button">
<svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9.3-9.1A5.2 5.2 0 0 1 12 6.1a5.2 5.2 0 0 1 9.3 5.8C19 16.5 12 21 12 21z"/></svg>
Save
</button>
</div>
<div class="wd-express" role="group" aria-label="Express checkout">
<button class="wd-express__btn"><svg viewBox="0 0 24 24"><path d="M12 2C8.5 2 6 4 6 7c0 2 1 4 3 4-1 .5-3 2-3 5 0 2 1 4 3 5h6c2-1 3-3 3-5 0-3-2-4.5-3-5 2 0 3-2 3-4 0-3-2.5-5-6-5z"/></svg>Apple Pay</button>
<button class="wd-express__btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>Google Pay</button>
<button class="wd-express__btn"><svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/></svg>Shop Pay</button>
<button class="wd-express__btn"><svg viewBox="0 0 24 24"><path d="M6 4h12v16H6z"/></svg>Klarna · pay in 3</button>
</div>
<div class="wd-freedel" role="status">
<span class="wd-freedel__tick" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>
</span>
<span>You’re £44 over the £75 free UK shipping threshold</span>
<span class="wd-freedel__bar" aria-hidden="true"><span class="wd-freedel__fill"></span></span>
</div>
<div class="wd-secondary">
<a href="#">Ask about this kit</a>
<a href="#">Compare to other Combat Patrols</a>
</div>
</div>
</div>
</section>
<!-- ===== 6. UNIVERSAL TRUST STRIP ===== -->
<section class="wd-band has-gear wd-trust" aria-label="Trust signals">
<div class="wd-trust__grid">
<div class="wd-trust__cell">
<span class="wd-trust__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M20 8h-3V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v9h2a2 2 0 0 0 4 0h6a2 2 0 0 0 4 0h2v-4a3 3 0 0 0-3-3z"/></svg>
</span>
<span class="wd-trust__copy">
Free UK Shipping
<small>Over £75, dispatched within 24h</small>
</span>
</div>
<div class="wd-trust__cell">
<span class="wd-trust__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 7 17l-2-2a7 7 0 1 1 2-9h-3v2h6V4h-2v2A10 10 0 0 0 12 2z"/></svg>
</span>
<span class="wd-trust__copy">
30-Day Returns
<small>No quibbles, no resaddling fee</small>
</span>
</div>
<div class="wd-trust__cell">
<span class="wd-trust__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M12 1 3 5v6c0 5 4 9 9 11 5-2 9-6 9-11V5l-9-4zm0 4 6 2v4c0 4-3 7-6 8-3-1-6-4-6-8V7l6-2z"/></svg>
</span>
<span class="wd-trust__copy">
Multi-Game Expertise
<small>40K, Sigmar, Old World, D&D — we play ’em all</small>
</span>
</div>
<div class="wd-trust__cell">
<span class="wd-trust__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M12 2 4 6v6c0 5.55 3.84 10 8 10s8-4.45 8-10V6l-8-4z"/></svg>
</span>
<span class="wd-trust__copy">
A Nerdworks Brand
<small>Minted in-house, alongside Nerdworks & ArtSabers</small>
</span>
</div>
</div>
</section>
<!-- ===== 7. TABS — Description / What's in the box / Specs / Reviews ===== -->
<section class="wd-band has-gear wd-tabs" aria-label="Product information">
<div class="wd-tabs__head" role="tablist">
<button class="wd-tabs__btn wd-tabs__btn--active" role="tab" aria-selected="true">Description</button>
<button class="wd-tabs__btn" role="tab">What’s in the box</button>
<button class="wd-tabs__btn" role="tab">Specifications</button>
<button class="wd-tabs__btn" role="tab" id="reviews">Reviews (124)</button>
</div>
<div class="wd-tabs__body" role="tabpanel">
<p class="wd-tabs__eyebrow">The shopkeep’s notes</p>
<h3>One box, one army, every chapter you fancy</h3>
<p class="wd-tabs__lede">
Combat Patrol: Space Marines is the cleanest on-ramp the Imperium offers.
Ten push-fit miniatures, a Combat Patrol mission deck, and a transfer
sheet thick enough to letter your sergeants until first frost — ready
to play before the kettle’s off the stove.
</p>
<p>
You get a Captain in Terminator Armour to anchor the line, five Tactical
Marines for objectives, three Aggressors to throw weight at the centre,
and an Apothecary to keep the wounded standing one more turn. It’s a
legal Combat Patrol roster the moment the glue dries — no waiting on
a second box, no reading the rulebook sideways.
</p>
<h4>Who it’s for</h4>
<p>
First-time-buyers chasing a paintable, playable starter army.
Returning players wanting a clean second detachment for a different
chapter. Veterans hunting Aggressors at a saner price than the standalone
kit. We’ve sold this to all three and never had the box come back.
</p>
<div class="wd-tabs__pullout">
<p>
“Push-fit means snap-together. Paint-ready means no rough mould
lines around the helmets. The transfer sheet is twice the size of the
last edition’s. Sit down with the Citadel Macragge Blue spray and
you’ll be table-ready inside an evening.”
</p>
</div>
<h4>How it fits in the army</h4>
<p>
Use it as your starter detachment, then bolt on a Space Marines Hero Series
character and a Strike Force box for tournament-grade size. The Aggressors
in this kit are the same sculpts as the standalone — magnetise the
weapons (see the Workbench tutorial below) and they’ll see service for
years.
</p>
</div>
</section>
<!-- ===== 8. PAINTED BY THE COMMUNITY ===== -->
<section class="wd-band has-gear wd-community" aria-label="Painted by the community">
<div class="wd-band__inner">
<p class="wd-band__eyebrow">Painted by the community</p>
<h2 class="wd-band__title">Six painters, six chapters, one box</h2>
<p class="wd-band__lede">
Submissions from the wider garrison — same kit, every painter’s
own colours. Tap a tile to read the painter’s notes on schemes,
basing and shading.
</p>
</div>
<div class="wd-community__grid">
<a class="wd-tile wd-tile--1" href="#" aria-label="Salamanders by Tom Rivers">
<span class="wd-tile__art"></span><span class="wd-tile__fade"></span>
<span class="wd-tile__caption">Salamanders<small>by Tom Rivers · Yorkshire</small></span>
</a>
<a class="wd-tile wd-tile--2" href="#" aria-label="Imperial Fists by Caleb Morrow">
<span class="wd-tile__art"></span><span class="wd-tile__fade"></span>
<span class="wd-tile__caption">Imperial Fists<small>by Caleb Morrow · Bath</small></span>
</a>
<a class="wd-tile wd-tile--3" href="#" aria-label="Blood Angels by Linnea P">
<span class="wd-tile__art"></span><span class="wd-tile__fade"></span>
<span class="wd-tile__caption">Blood Angels<small>by Linnea P. · Stockholm</small></span>
</a>
<a class="wd-tile wd-tile--4" href="#" aria-label="Ultramarines by Sgt Alphonse">
<span class="wd-tile__art"></span><span class="wd-tile__fade"></span>
<span class="wd-tile__caption">Ultramarines<small>by Sgt. Alphonse · Brest</small></span>
</a>
<a class="wd-tile wd-tile--5" href="#" aria-label="Dark Angels by Jett Hollow">
<span class="wd-tile__art"></span><span class="wd-tile__fade"></span>
<span class="wd-tile__caption">Dark Angels<small>by Jett Hollow · Manchester</small></span>
</a>
<a class="wd-tile wd-tile--6" href="#" aria-label="Raven Guard by Sukoshi K">
<span class="wd-tile__art"></span><span class="wd-tile__fade"></span>
<span class="wd-tile__caption">Raven Guard<small>by Sukoshi K. · Osaka</small></span>
</a>
</div>
<div class="wd-community__cta">
<a href="#" class="wd-wishlist" style="display:inline-flex;">
<svg viewBox="0 0 24 24"><path d="M12 4v16M4 12h16"/></svg>
Submit your painting
</a>
</div>
</section>
<!-- ===== 9. PAIRS WELL WITH — cross-sell ===== -->
<section class="wd-band has-gear wd-pairs" aria-label="Pairs well with">
<div class="wd-band__inner">
<p class="wd-band__eyebrow">Pairs well with</p>
<h2 class="wd-band__title">Three paints and a sharp blade away from table-ready</h2>
<p class="wd-band__lede">
The shortest path from box to gaming table — the paints we’d hand
you over the counter if you’d asked at the till. No upsell, just the
kit that finishes the job.
</p>
</div>
<div class="wd-pairs__grid">
<article class="wd-pcard wd-pcard--paint1">
<div class="wd-pcard__media" aria-hidden="true">
<div class="wd-pcard__media-icon">
<svg viewBox="0 0 100 120"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><rect x="25" y="20" width="50" height="80" rx="6"/><rect x="32" y="8" width="36" height="14" rx="3"/><rect x="34" y="35" width="32" height="50" fill="#2a4d8b"/></g></svg>
</div>
</div>
<div class="wd-pcard__body">
<span class="wd-pcard__eyebrow">Citadel · Spray</span>
<h3 class="wd-pcard__title">Macragge Blue Spray</h3>
<div class="wd-pcard__meta">
<span class="wd-pcard__price">£18.50</span>
<button class="wd-pcard__atc"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>Add</button>
</div>
</div>
</article>
<article class="wd-pcard wd-pcard--paint2">
<div class="wd-pcard__media" aria-hidden="true">
<div class="wd-pcard__media-icon">
<svg viewBox="0 0 100 120"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><rect x="30" y="30" width="40" height="60" rx="4"/><rect x="34" y="22" width="32" height="12" rx="2"/><rect x="35" y="42" width="30" height="40" fill="#8e1a10"/></g></svg>
</div>
</div>
<div class="wd-pcard__body">
<span class="wd-pcard__eyebrow">Citadel · Base</span>
<h3 class="wd-pcard__title">Mephiston Red (12ml)</h3>
<div class="wd-pcard__meta">
<span class="wd-pcard__price">£3.10</span>
<button class="wd-pcard__atc"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>Add</button>
</div>
</div>
</article>
<article class="wd-pcard wd-pcard--paint3">
<div class="wd-pcard__media" aria-hidden="true">
<div class="wd-pcard__media-icon">
<svg viewBox="0 0 100 120"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><rect x="30" y="30" width="40" height="60" rx="4"/><rect x="34" y="22" width="32" height="12" rx="2"/><rect x="35" y="42" width="30" height="40" fill="#7a7a85"/></g></svg>
</div>
</div>
<div class="wd-pcard__body">
<span class="wd-pcard__eyebrow">Citadel · Base</span>
<h3 class="wd-pcard__title">Leadbelcher (12ml)</h3>
<div class="wd-pcard__meta">
<span class="wd-pcard__price">£3.10</span>
<button class="wd-pcard__atc"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>Add</button>
</div>
</div>
</article>
<article class="wd-pcard wd-pcard--tool">
<div class="wd-pcard__media" aria-hidden="true">
<div class="wd-pcard__media-icon">
<svg viewBox="0 0 120 80"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><rect x="10" y="30" width="60" height="14" rx="3"/><polygon points="70,30 110,33 110,41 70,44" fill="#F4A479"/></g></svg>
</div>
</div>
<div class="wd-pcard__body">
<span class="wd-pcard__eyebrow">Citadel · Tool</span>
<h3 class="wd-pcard__title">Hobby Knife & Blades</h3>
<div class="wd-pcard__meta">
<span class="wd-pcard__price">£14.00</span>
<button class="wd-pcard__atc"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>Add</button>
</div>
</div>
</article>
</div>
</section>
<!-- ===== 10. FROM THE WORKBENCH ===== -->
<section class="wd-band has-gear wd-workbench" aria-label="From the workbench">
<div class="wd-band__inner">
<p class="wd-band__eyebrow">From the workbench</p>
<h2 class="wd-band__title">Two tutorials cut to this kit</h2>
<p class="wd-band__lede">
Written and filmed by the shop — no licensed how-tos, no reposts.
Both apply directly to the miniatures in this box.
</p>
</div>
<div class="wd-workbench__grid">
<article class="wd-wbcard">
<div class="wd-wbcard__media" aria-hidden="true">
<div class="wd-wbcard__media-icon">
<svg viewBox="0 0 100 100"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><rect x="20" y="35" width="60" height="40" rx="4"/><circle cx="35" cy="48" r="6" fill="#F4A479"/><rect x="48" y="44" width="28" height="6"/><rect x="48" y="56" width="22" height="6"/></g></svg>
</div>
</div>
<div class="wd-wbcard__body">
<span class="wd-wbcard__eyebrow">How-to guide</span>
<h3 class="wd-wbcard__title">Edge Highlighting Power Armour — A First Pass</h3>
<p class="wd-wbcard__lede">
The trick that takes a flat blue Marine and turns him into a
tournament-display piece. Brush angle, paint thinning, layer order.
Cuts the technique to twenty minutes per squad.
</p>
<div class="wd-wbcard__meta">
<span class="wd-pill">Intermediate</span>
<span class="wd-pill">12 min read</span>
<span class="wd-pill">Step-by-step</span>
</div>
<a class="wd-wbcard__cta" href="#">
Read the guide
<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M5 12h12l-4-4 1.4-1.4L20.8 12l-6.4 5.4L13 16l4-4H5z"/></svg>
</a>
</div>
</article>
<article class="wd-wbcard wd-wbcard--2">
<div class="wd-wbcard__media" aria-hidden="true">
<div class="wd-wbcard__media-icon">
<svg viewBox="0 0 100 100"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><circle cx="50" cy="50" r="22"/><circle cx="50" cy="50" r="6" fill="#F4A479"/><rect x="46" y="14" width="8" height="14"/><rect x="46" y="72" width="8" height="14"/><rect x="14" y="46" width="14" height="8"/><rect x="72" y="46" width="14" height="8"/></g></svg>
</div>
</div>
<div class="wd-wbcard__body">
<span class="wd-wbcard__eyebrow">Tutorial · video</span>
<h3 class="wd-wbcard__title">Magnetising Combat Patrol Weapon Options</h3>
<p class="wd-wbcard__lede">
Three 1mm magnets, ten minutes of drilling, and the same Captain runs
a thunder hammer one week and a power sword the next. The Aggressors
can swap auto boltstorm gauntlets for flamestorm without touching glue.
</p>
<div class="wd-wbcard__meta">
<span class="wd-pill">Advanced</span>
<span class="wd-pill">18 min watch</span>
<span class="wd-pill">Video</span>
</div>
<a class="wd-wbcard__cta" href="#">
Watch the tutorial
<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M5 12h12l-4-4 1.4-1.4L20.8 12l-6.4 5.4L13 16l4-4H5z"/></svg>
</a>
</div>
</article>
</div>
</section>
<!-- ===== 11. RELATED PRODUCTS ===== -->
<section class="wd-band has-gear wd-related" aria-label="You may also like">
<div class="wd-band__inner">
<p class="wd-band__eyebrow">You may also like</p>
<h2 class="wd-band__title">Four kits from the same shelf</h2>
<p class="wd-band__lede">
If the Space Marines start to feel familiar, here’s the next box on
the shelf — or the rival force that’ll face them across the table.
</p>
</div>
<div class="wd-related__grid">
<article class="wd-rcard">
<div class="wd-rcard__media" aria-hidden="true">
<span class="wd-rcard__loyalty">+595 pts</span>
<div class="wd-rcard__media-icon">
<svg viewBox="0 0 120 140"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><path d="M60 10 L30 28 L24 60 L24 100 L60 130 L96 100 L96 60 L90 28 Z" fill="#5d3424"/><circle cx="60" cy="60" r="14" fill="#F4A479"/></g></svg>
</div>
</div>
<div class="wd-rcard__body">
<span class="wd-rcard__eyebrow">Warhammer 40,000</span>
<h3 class="wd-rcard__title">Combat Patrol: Necrons</h3>
<p class="wd-rcard__rating"><span class="wd-rcard__stars">★★★★★</span> 4.7 · 89 reviews</p>
<div class="wd-rcard__foot">
<span class="wd-rcard__price">£119<span class="wd-rcard__price-was">£135</span></span>
<button class="wd-rcard__atc">Add</button>
</div>
</div>
</article>
<article class="wd-rcard wd-rcard--2">
<div class="wd-rcard__media" aria-hidden="true">
<span class="wd-rcard__loyalty">+595 pts</span>
<div class="wd-rcard__media-icon">
<svg viewBox="0 0 120 140"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><path d="M60 10 L30 28 L24 60 L24 100 L60 130 L96 100 L96 60 L90 28 Z" fill="#2d4438"/><circle cx="60" cy="60" r="14" fill="#F4A479"/></g></svg>
</div>
</div>
<div class="wd-rcard__body">
<span class="wd-rcard__eyebrow">Warhammer 40,000</span>
<h3 class="wd-rcard__title">Combat Patrol: T’au Empire</h3>
<p class="wd-rcard__rating"><span class="wd-rcard__stars">★★★★★</span> 4.6 · 71 reviews</p>
<div class="wd-rcard__foot">
<span class="wd-rcard__price">£119<span class="wd-rcard__price-was">£135</span></span>
<button class="wd-rcard__atc">Add</button>
</div>
</div>
</article>
<article class="wd-rcard wd-rcard--3">
<div class="wd-rcard__media" aria-hidden="true">
<span class="wd-rcard__loyalty">+800 pts</span>
<div class="wd-rcard__media-icon">
<svg viewBox="0 0 120 140"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><rect x="20" y="30" width="80" height="80" fill="#6a4e1c"/><rect x="32" y="42" width="56" height="14" fill="#F4A479"/><rect x="32" y="62" width="56" height="36" fill="#1B1314" stroke="none"/></g></svg>
</div>
</div>
<div class="wd-rcard__body">
<span class="wd-rcard__eyebrow">Space Marines · Set</span>
<h3 class="wd-rcard__title">Strike Force: Ultramarines</h3>
<p class="wd-rcard__rating"><span class="wd-rcard__stars">★★★★★</span> 4.9 · 42 reviews</p>
<div class="wd-rcard__foot">
<span class="wd-rcard__price">£160</span>
<button class="wd-rcard__atc">Add</button>
</div>
</div>
</article>
<article class="wd-rcard wd-rcard--4">
<div class="wd-rcard__media" aria-hidden="true">
<span class="wd-rcard__loyalty">+145 pts</span>
<div class="wd-rcard__media-icon">
<svg viewBox="0 0 120 140"><g fill="#D8C3B1" stroke="#1B1314" stroke-width="2"><path d="M60 14 L42 30 L40 60 L40 90 L60 110 L80 90 L80 60 L78 30 Z" fill="#4a3a55"/><rect x="50" y="40" width="20" height="30" fill="#F4A479"/></g></svg>
</div>
</div>
<div class="wd-rcard__body">
<span class="wd-rcard__eyebrow">Space Marines · Character</span>
<h3 class="wd-rcard__title">Hero Series: Captain in Gravis</h3>
<p class="wd-rcard__rating"><span class="wd-rcard__stars">★★★★★</span> 4.8 · 28 reviews</p>
<div class="wd-rcard__foot">
<span class="wd-rcard__price">£29</span>
<button class="wd-rcard__atc">Add</button>
</div>
</div>
</article>
</div>
</section>
<!-- ===== 12. NEWSLETTER ===== -->
<section class="wd-band has-gear wd-garrison" aria-label="Newsletter">
<div class="wd-garrison__inner">
<div>
<p class="wd-band__eyebrow" style="margin-bottom:8px;">Join the Garrison</p>
<h2 class="wd-garrison__title">Sundown dispatches, fresh off the wagon</h2>
<p class="wd-garrison__lede">
New kits, paint-night tutorials and shipments unboxed at the counter
— sent once a fortnight, never on Sundays. No spam, ever.
</p>
</div>
<form class="wd-garrison__form" action="#" method="post">
<input class="wd-garrison__input" type="email" placeholder="your@email.com" aria-label="Email">
<button class="wd-cta" type="submit">Sign on</button>
</form>
</div>
</section>
</div><!-- /.wd-wrap -->
<!-- ===== 13. GLOBAL FOOTER ===== -->
<footer class="wd-footer" role="contentinfo">
<div class="wd-footer__inner">
<div class="wd-footer__brand">
<a href="#" class="wd-logo">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 4 6v6c0 5.55 3.84 10 8 10s8-4.45 8-10V6l-8-4z"/></svg>
War Dungeon
</a>
<p>Specialty retail for Warhammer and Dungeons & Dragons. A Nerdworks brand, run by hobbyists who play the games they sell.</p>
</div>
<div>
<h4>Shop</h4>
<ul>
<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>
</ul>
</div>
<div>
<h4>Discover</h4>
<ul>
<li><a href="#">Army Builder</a></li>
<li><a href="#">Battle Simulator</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Painting Showcase</a></li>
<li><a href="#">Creator Partners</a></li>
</ul>
</div>
<div>
<h4>Help</h4>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Shipping & Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Track Order</a></li>
<li><a href="#">Size & Scale Guide</a></li>
</ul>
</div>
<div>
<h4>Brand & Loyalty</h4>
<ul>
<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="#">Affiliate Programme</a></li>
<li><a href="#">Privacy & Policies</a></li>
</ul>
</div>
</div>
<div class="wd-footer__base">
<div class="wd-footer__pay" aria-label="Payment methods">
<span>VISA</span><span>MC</span><span>AMEX</span><span>PayPal</span><span>Apple Pay</span><span>Klarna</span>
</div>
<div class="wd-footer__social" aria-label="Social">
<a href="#">IG</a><a href="#">YT</a><a href="#">TikTok</a><a href="#">Discord</a>
</div>
<div>© 2026 War Dungeon Ltd.</div>
<div class="wd-footer__nerd">A Nerdworks Brand</div>
</div>
</footer>
<!-- ===== STICKY MOBILE ATC BAR — viewport-fixed ===== -->
<div class="wd-stickyatc" role="region" aria-label="Sticky add to cart">
<span class="wd-stickyatc__thumb" aria-hidden="true"></span>
<div class="wd-stickyatc__info">
<span class="wd-stickyatc__title">Combat Patrol: Space Marines</span>
<span class="wd-stickyatc__price">£119.00</span>
</div>
<button class="wd-stickyatc__cta">Add to Saddle</button>
</div>
</body>
</html>