<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combat Patrol: Space Marines — War Dungeon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Yeseva+One&family=Big+Shoulders+Stencil+Display:wght@500;700;800;900&display=swap">
<link rel="stylesheet" href="https://use.typekit.net/onl7dxx.css">
<style>
/* ============================================================
TOKENS — Frontier (SWD1) styleguide
============================================================ */
:root {
/* Chromatic identifiers (accents only — never bare backgrounds) */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--white: #FFFFFF;
--positive: #4A6E50;
--negative: #C8442D;
/* Surface semantics */
--bg-section-dark: var(--cowboy);
--bg-section-dark-deepest: var(--liquourice);
--bg-section-light: var(--rodeo);
--bg-card-on-dark: var(--liquourice);
--bg-card-on-light: var(--rodeo-light);
--bg-clean-zone: var(--cowboy);
/* Text semantics */
--text-on-dark: var(--rodeo-light);
--text-on-dark-strong: var(--white);
--text-on-light: var(--caput);
--text-on-bronze: var(--liquourice);
--text-eyebrow-on-dark: var(--bronze);
--text-eyebrow-on-light: var(--sienna);
/* Typography */
--font-display: "modesto-condensed", "Big Shoulders Stencil Display", "Yeseva One", Georgia, serif;
--font-body: "Literata", "palatino-linotype", "EB Garamond", Georgia, serif;
/* Type scale (px) */
--display: 96px;
--h1: 64px;
--h2: 48px;
--h3: 36px;
--h4: 24px;
--body-lg: 22px;
--body: 18px;
--body-sm: 16px;
--eyebrow: 13px;
--micro: 12px;
/* Line heights */
--lh-tight: 1.2;
--lh-heading: 1.35;
--lh-body: 1.5;
--lh-card: 1.35;
--lh-ui: 1.2;
/* Letter spacing */
--ls-tight: -0.01em;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* Spacing scale (px) */
--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;
/* Radii */
--r-none: 0px;
--r-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
--r-xl: 21px;
/* Hard-edged offset shadows (no blur) */
--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);
/* Borders */
--b-hairline: 1px;
--b-regular: 2px;
--b-thick: 4px;
/* Container widths */
--container-narrow: 720px;
--container: 1200px;
--container-wide: 1440px;
/* Maximalist Industrial — gear pattern + rivet primitives */
--gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%23F4A479' stroke-opacity='0.10' stroke-width='1.5'><g transform='translate(80,80)'><circle r='42'/><circle r='14'/><g><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(30)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(60)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(90)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(120)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(150)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(180)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(210)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(240)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(270)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(300)'><rect x='-3.5' y='-54' width='7' height='14'/></g><g transform='rotate(330)'><rect x='-3.5' y='-54' width='7' height='14'/></g></g><g transform='translate(230,210)'><circle r='58'/><circle r='18'/><g><rect x='-4' y='-72' width='8' height='16'/></g><g transform='rotate(40)'><rect x='-4' y='-72' width='8' height='16'/></g><g transform='rotate(80)'><rect x='-4' y='-72' width='8' height='16'/></g><g transform='rotate(120)'><rect x='-4' y='-72' width='8' height='16'/></g><g transform='rotate(160)'><rect x='-4' y='-72' width='8' height='16'/></g><g transform='rotate(200)'><rect x='-4' y='-72' width='8' height='16'/></g><g transform='rotate(240)'><rect x='-4' y='-72' width='8' height='16'/></g><g transform='rotate(280)'><rect x='-4' y='-72' width='8' height='16'/></g><g transform='rotate(320)'><rect x='-4' y='-72' width='8' height='16'/></g></g></g></svg>");
}
/* ============================================================
RESET / GLOBALS
============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--body);
line-height: var(--lh-body);
color: var(--text-on-light);
background: var(--rodeo);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--sp-7); }
.container--narrow { max-width: var(--container); }
/* ============================================================
GEAR DIVIDER — engraved gear strip between sections
(full bronze opacity; the rhythm break between dark panels)
============================================================ */
.gear-divider {
height: 28px;
background-color: var(--liquourice);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='28' viewBox='0 0 280 28'><g fill='none' stroke='%23F4A479' stroke-width='1.5'><line x1='0' y1='14' x2='280' y2='14'/><g transform='translate(40,14)'><circle r='8'/><circle r='3'/><line x1='0' y1='-11' x2='0' y2='-13'/><line x1='0' y1='11' x2='0' y2='13'/><line x1='-11' y1='0' x2='-13' y2='0'/><line x1='11' y1='0' x2='13' y2='0'/><line x1='-8' y1='-8' x2='-9.5' y2='-9.5'/><line x1='8' y1='-8' x2='9.5' y2='-9.5'/><line x1='-8' y1='8' x2='-9.5' y2='9.5'/><line x1='8' y1='8' x2='9.5' y2='9.5'/></g><g transform='translate(140,14)'><circle r='10'/><circle r='4'/><line x1='0' y1='-13' x2='0' y2='-15.5'/><line x1='0' y1='13' x2='0' y2='15.5'/><line x1='-13' y1='0' x2='-15.5' y2='0'/><line x1='13' y1='0' x2='15.5' y2='0'/><line x1='-10' y1='-10' x2='-12' y2='-12'/><line x1='10' y1='-10' x2='12' y2='-12'/><line x1='-10' y1='10' x2='-12' y2='12'/><line x1='10' y1='10' x2='12' y2='12'/></g><g transform='translate(240,14)'><circle r='8'/><circle r='3'/><line x1='0' y1='-11' x2='0' y2='-13'/><line x1='0' y1='11' x2='0' y2='13'/><line x1='-11' y1='0' x2='-13' y2='0'/><line x1='11' y1='0' x2='13' y2='0'/><line x1='-8' y1='-8' x2='-9.5' y2='-9.5'/><line x1='8' y1='-8' x2='9.5' y2='-9.5'/><line x1='-8' y1='8' x2='-9.5' y2='9.5'/><line x1='8' y1='8' x2='9.5' y2='9.5'/></g></g></svg>");
background-repeat: repeat-x;
background-position: center;
}
/* ============================================================
SECTION HEADING — modesto-condensed at max scale + bronze underline
============================================================ */
.section-head {
text-align: center;
margin: 0 auto var(--sp-7);
max-width: var(--container-narrow);
}
.section-head__eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
margin-bottom: var(--sp-4);
}
.section-head__title {
margin: 0 0 var(--sp-4);
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 64px);
line-height: var(--lh-tight);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--white);
}
.section-head__rule {
width: 120px;
height: 6px;
margin: 0 auto;
background: var(--bronze);
border-top: 1px solid var(--caput);
border-bottom: 1px solid var(--caput);
}
.section-head__sub {
font-family: var(--font-body);
color: var(--rodeo-light);
font-style: italic;
margin-top: var(--sp-4);
font-size: var(--body);
}
/* ============================================================
RIVET PRIMITIVES — small bronze CSS dots at panel corners
============================================================ */
.rivet-panel { position: relative; }
.rivet-panel > .rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%;
background: var(--bronze);
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.5);
z-index: 2;
}
.rivet--tl { top: 12px; left: 12px; }
.rivet--tr { top: 12px; right: 12px; }
.rivet--bl { bottom: 12px; left: 12px; }
.rivet--br { bottom: 12px; right: 12px; }
/* ============================================================
BLOCK: preheader-bar
============================================================ */
.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; }
}
/* ============================================================
BLOCK: global-header
============================================================ */
.global-header {
background: var(--cowboy);
background-image: var(--gear-pattern);
background-blend-mode: normal;
color: var(--rodeo-light);
border-bottom: 4px solid var(--bronze);
padding: var(--sp-5) 0;
position: relative;
}
.global-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-5); }
.global-header__brand {
font-family: var(--font-display);
font-size: 36px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--white);
}
.global-header__brand-mark {
display: inline-block; width: 36px; height: 36px; margin-right: var(--sp-3); vertical-align: middle;
background: var(--bronze);
border: 2px solid var(--caput);
border-radius: 50%;
position: relative;
}
.global-header__brand-mark::after {
content: "WD"; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; color: var(--liquourice);
}
.global-header__nav { display: flex; gap: var(--sp-6); justify-content: center; }
.global-header__nav a {
font-family: var(--font-display);
font-size: 18px;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--rodeo-light);
position: relative;
padding: var(--sp-2) 0;
}
.global-header__nav a:hover { color: var(--bronze); }
.global-header__nav a.is-active { color: var(--bronze); }
.global-header__nav a.is-active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bronze);
}
.global-header__utils { display: flex; gap: var(--sp-4); justify-content: flex-end; align-items: center; font-family: var(--font-body); font-size: var(--body-sm); }
.global-header__icon-btn {
background: transparent; border: 1px solid var(--bronze); color: var(--rodeo-light);
width: 40px; height: 40px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.global-header__basket {
position: relative;
background: var(--liquourice); color: var(--bronze);
border: 2px solid var(--bronze);
padding: 8px var(--sp-4);
font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.global-header__basket-points {
position: absolute; top: -12px; right: -12px;
background: var(--bronze); color: var(--liquourice);
border: 2px solid var(--caput); border-radius: 50%;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 11px; letter-spacing: 0;
}
@media (max-width: 880px) {
.global-header__inner { grid-template-columns: auto 1fr; }
.global-header__nav { display: none; }
}
/* ============================================================
BLOCK: breadcrumbs (the page's one light band — atmospheric pause)
============================================================ */
.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); }
/* ============================================================
BLOCK: product-header — dark cowboy panel
Gallery LEFT, content RIGHT. The price+ATC clean zone lives here.
============================================================ */
.product-header {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
color: var(--rodeo-light);
padding: var(--sp-9) 0;
position: relative;
border-bottom: none;
}
.product-header__panel {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: var(--sp-8);
padding: var(--sp-7);
border: 4px solid var(--bronze);
border-style: ridge;
background: var(--liquourice);
background-image: var(--gear-pattern);
}
.product-header .rivet { width: 14px; height: 14px; }
.product-header .rivet--tl { top: 16px; left: 16px; }
.product-header .rivet--tr { top: 16px; right: 16px; }
.product-header .rivet--bl { bottom: 16px; left: 16px; }
.product-header .rivet--br { bottom: 16px; right: 16px; }
/* Gallery (LEFT) */
.product-gallery { position: relative; }
.product-gallery__main {
position: relative;
aspect-ratio: 4 / 5;
background: var(--liquourice);
border: 4px solid var(--bronze);
border-style: ridge;
overflow: hidden;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__main .rivet { width: 10px; height: 10px; z-index: 3; }
.product-gallery__zoom {
position: absolute; bottom: 16px; left: 16px;
background: var(--liquourice); color: var(--bronze);
border: 2px solid var(--bronze);
padding: 6px 12px;
font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.product-gallery__wishlist {
position: absolute; top: 20px; right: 20px;
width: 48px; height: 48px; border-radius: 50%;
background: var(--liquourice); color: var(--bronze);
border: 2px solid var(--bronze);
display: flex; align-items: center; justify-content: center;
font-size: 20px; z-index: 4;
box-shadow: var(--shadow-sm);
}
.product-gallery__thumbs {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3); margin-top: var(--sp-4);
}
.product-gallery__thumb {
position: relative;
aspect-ratio: 1 / 1;
background: var(--liquourice);
border: 4px solid var(--bronze);
border-style: ridge;
overflow: hidden;
cursor: pointer;
}
.product-gallery__thumb.is-active { outline: 2px solid var(--bronze); outline-offset: 2px; }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb .rivet { width: 6px; height: 6px; }
.product-gallery__thumb .rivet--tl { top: 4px; left: 4px; }
.product-gallery__thumb .rivet--tr { top: 4px; right: 4px; }
.product-gallery__thumb .rivet--bl { bottom: 4px; left: 4px; }
.product-gallery__thumb .rivet--br { bottom: 4px; right: 4px; }
/* Content (RIGHT) */
.product-content { display: flex; flex-direction: column; gap: var(--sp-5); }
.product-content__eyebrow {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.product-content__title {
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 72px);
line-height: 1.0;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--white);
margin: 0;
}
.product-content__rule {
width: 80px; height: 4px; background: var(--bronze);
border-top: 1px solid var(--caput); border-bottom: 1px solid var(--caput);
}
.product-content__rating-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.product-content__short {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--rodeo-light);
margin: 0;
font-style: italic;
}
.product-content__loyalty-row { display: flex; gap: var(--sp-5); align-items: center; }
.product-content__variation {
display: flex; flex-direction: column; gap: var(--sp-2);
border-top: 1px solid var(--caput);
padding-top: var(--sp-4);
}
.product-content__variation-label {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.product-content__variation-options { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.product-content__variation-option {
background: transparent;
color: var(--rodeo-light);
font-family: var(--font-display);
font-size: 16px;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
padding: var(--sp-3) var(--sp-4);
border: 2px solid var(--bronze);
border-style: ridge;
}
.product-content__variation-option.is-selected {
background: var(--bronze); color: var(--liquourice);
}
.product-content__express {
display: flex; gap: var(--sp-3); flex-wrap: wrap;
}
.product-content__express-btn {
flex: 1 1 calc(50% - var(--sp-3));
min-width: 140px;
padding: var(--sp-3) var(--sp-4);
background: var(--liquourice);
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-wide);
box-shadow: 2px 2px 0 var(--caput);
}
.product-content__delivery-progress {
border-top: 1px solid var(--caput);
padding-top: var(--sp-4);
display: flex; align-items: center; gap: var(--sp-3);
font-family: var(--font-body);
color: var(--rodeo-light);
font-size: var(--body-sm);
}
.product-content__delivery-tick {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--positive);
color: var(--white);
border: 2px solid var(--bronze);
font-weight: 700;
flex-shrink: 0;
}
.product-content__secondary-cluster {
display: flex; gap: var(--sp-4);
font-family: var(--font-display);
font-size: 14px;
text-transform: uppercase;
letter-spacing: var(--ls-wider);
color: var(--bronze);
}
.product-content__secondary-cluster a { border-bottom: 1px dashed var(--bronze); padding-bottom: 2px; }
/* Stamped brass roundel (review-rating, loyalty earn — same construct, different scale) */
.stamped-roundel {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
width: 110px; height: 110px; border-radius: 50%;
background: var(--bronze);
color: var(--liquourice);
border: 4px solid var(--caput);
border-style: ridge;
text-align: center;
box-shadow: var(--shadow-md);
flex-shrink: 0;
font-family: var(--font-display);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
position: relative;
}
.stamped-roundel::before {
content: ""; position: absolute; inset: 4px; border-radius: 50%;
border: 1px solid var(--caput);
opacity: 0.5;
pointer-events: none;
}
.stamped-roundel--review {
width: 86px; height: 86px;
font-size: 13px;
}
.stamped-roundel--review .stars { font-size: 22px; line-height: 1; }
.stamped-roundel--loyalty { width: 140px; height: 140px; }
.stamped-roundel--loyalty .num { font-family: var(--font-display); font-size: 32px; line-height: 1; }
.stamped-roundel--loyalty .label { font-size: 10px; letter-spacing: var(--ls-widest); margin-top: 4px; line-height: 1.1; }
.review-count-link {
font-family: var(--font-body);
color: var(--rodeo-light);
font-size: var(--body-sm);
border-bottom: 1px dashed var(--bronze);
}
/* Stamped pill — micro trust signals (in-stock, save, etc.) */
.stamped-pill {
display: inline-flex; align-items: center; gap: var(--sp-2);
padding: 6px 14px;
background: var(--bronze);
color: var(--liquourice);
border: 2px solid var(--caput);
border-style: ridge;
font-family: var(--font-display);
font-size: 13px;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
box-shadow: var(--shadow-sm);
}
.stamped-pill--save { background: var(--sienna); color: var(--white); border-color: var(--caput); }
.stamped-pill--stock {
background: var(--positive); color: var(--white); border-color: var(--bronze); border-style: ridge;
}
.stamped-pill--stock::before {
content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
background: var(--white); box-shadow: 0 0 0 2px var(--positive);
}
/* ============================================================
THE CLEAN ZONE — price + ATC. NO gear pattern, NO rivets,
NO badges crossing it. Loyalty roundel sits ADJACENT, not inside.
============================================================ */
.clean-zone {
/* Solid dark fill that blocks the parent gear pattern */
background: var(--cowboy);
padding: var(--sp-5) var(--sp-5) var(--sp-6);
border: 1px solid var(--caput);
/* No rivets, no gear-pattern overlay. This is the conversion peak. */
position: relative;
/* keep generous internal whitespace — no decorative crowding */
}
.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: 56px;
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: 48px; background: transparent; border: 0; color: var(--bronze);
font-family: var(--font-display); font-size: 24px; line-height: 1;
}
.clean-zone__qty input {
width: 56px; background: transparent; border: 0; color: var(--white);
font-family: var(--font-display); font-size: 22px; 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: 28px;
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);
transition: transform 0.05s ease;
}
.clean-zone__atc:hover { background: #6B2410; }
.clean-zone__atc:active { transform: translate(2px, 2px); box-shadow: 0 0 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: 16px;
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);
}
@media (max-width: 980px) {
.product-header__panel { grid-template-columns: 1fr; padding: var(--sp-5); }
.product-content__title { font-size: clamp(36px, 8vw, 56px); }
.clean-zone__price-current { font-size: 44px; }
.clean-zone__atc { font-size: 22px; }
}
/* ============================================================
BLOCK: trust-strip-stamped — 4 cells, each a stamped marker
============================================================ */
.trust-strip-stamped {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
color: var(--rodeo-light);
padding: var(--sp-7) 0;
}
.trust-strip-stamped__panel {
position: relative;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
padding: var(--sp-7);
border: 4px solid var(--bronze);
border-style: ridge;
background: var(--liquourice);
background-image: var(--gear-pattern);
}
.trust-strip-stamped__cell {
display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
text-align: center;
padding: var(--sp-4);
}
.trust-strip-stamped__stamp {
width: 76px; height: 76px; border-radius: 50%;
background: var(--bronze); color: var(--liquourice);
border: 4px solid var(--caput);
border-style: ridge;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 30px;
box-shadow: var(--shadow-sm);
position: relative;
}
.trust-strip-stamped__stamp::before {
content: ""; position: absolute; inset: 4px; border-radius: 50%;
border: 1px solid var(--caput);
opacity: 0.6;
}
.trust-strip-stamped__title {
font-family: var(--font-display);
font-size: 18px;
text-transform: uppercase;
letter-spacing: var(--ls-wider);
color: var(--white);
margin: 0;
}
.trust-strip-stamped__body {
font-family: var(--font-body);
font-size: var(--body-sm);
color: var(--rodeo-light);
font-style: italic;
margin: 0;
}
@media (max-width: 880px) {
.trust-strip-stamped__panel { grid-template-columns: repeat(2, 1fr); padding: var(--sp-5); }
}
@media (max-width: 480px) {
.trust-strip-stamped__panel { grid-template-columns: 1fr; }
}
/* ============================================================
BLOCK: product-tabs — dark panel, four-pane tabs
============================================================ */
.product-tabs {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
padding: var(--sp-9) 0;
}
.product-tabs__panel {
position: relative;
background: var(--liquourice);
background-image: var(--gear-pattern);
border: 4px solid var(--bronze);
border-style: ridge;
padding: var(--sp-7);
}
.product-tabs__nav {
display: flex; gap: 0;
border-bottom: 4px solid var(--bronze);
margin-bottom: var(--sp-7);
flex-wrap: wrap;
}
.product-tabs__nav button {
background: transparent;
color: var(--rodeo-light);
border: 0;
font-family: var(--font-display);
font-size: 20px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
padding: var(--sp-4) var(--sp-5);
border-bottom: 4px solid transparent;
margin-bottom: -4px;
}
.product-tabs__nav button.is-active {
color: var(--bronze);
border-bottom-color: var(--bronze);
background: var(--cowboy);
}
.product-tabs__pane { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-7); color: var(--rodeo-light); }
.product-tabs__pane h3 {
font-family: var(--font-display);
font-size: var(--h3);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--white);
margin: 0 0 var(--sp-4);
}
.product-tabs__pane p { font-family: var(--font-body); font-size: var(--body-lg); line-height: var(--lh-body); margin: 0 0 var(--sp-4); }
.product-tabs__pane ul { list-style: none; padding: 0; margin: 0; }
.product-tabs__pane ul li {
padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
border-bottom: 1px dashed var(--caput);
position: relative;
font-family: var(--font-body);
font-size: var(--body);
}
.product-tabs__pane ul li::before {
content: ""; position: absolute; left: 0; top: 18px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--bronze); border: 1px solid var(--caput);
}
.product-tabs__aside {
padding: var(--sp-5);
border: 4px solid var(--bronze);
border-style: ridge;
background: var(--cowboy);
position: relative;
}
.product-tabs__aside .rivet--tl { top: 8px; left: 8px; }
.product-tabs__aside .rivet--tr { top: 8px; right: 8px; }
.product-tabs__aside .rivet--bl { bottom: 8px; left: 8px; }
.product-tabs__aside .rivet--br { bottom: 8px; right: 8px; }
.product-tabs__aside img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--bronze); }
.product-tabs__aside h4 {
font-family: var(--font-display);
font-size: 18px;
text-transform: uppercase;
letter-spacing: var(--ls-wider);
color: var(--bronze);
margin: var(--sp-4) 0 var(--sp-2);
}
.product-tabs__aside p { font-size: var(--body-sm); margin: 0; font-style: italic; }
/* Specifications table */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px dashed var(--caput);
text-align: left;
font-family: var(--font-body);
}
.spec-table th {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: var(--ls-wider);
font-size: 14px;
color: var(--bronze);
width: 30%;
font-weight: 500;
}
.spec-table td { color: var(--rodeo-light); font-size: var(--body); }
/* Reviews */
.reviews-summary { display: flex; gap: var(--sp-7); align-items: center; margin-bottom: var(--sp-6); flex-wrap: wrap; }
.reviews-summary__score {
font-family: var(--font-display);
font-size: 84px;
line-height: 1;
color: var(--bronze);
}
.reviews-summary__stars { font-size: 24px; color: var(--bronze); margin-bottom: var(--sp-2); }
.reviews-summary__count { font-family: var(--font-body); font-style: italic; color: var(--rodeo-light); }
.reviews-summary__histogram { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.reviews-summary__hist-row { display: grid; grid-template-columns: 40px 1fr 40px; gap: var(--sp-3); align-items: center; font-family: var(--font-body); font-size: var(--body-sm); color: var(--rodeo-light); }
.reviews-summary__hist-bar { height: 10px; background: var(--cowboy); border: 1px solid var(--caput); position: relative; }
.reviews-summary__hist-bar span { display: block; height: 100%; background: var(--bronze); }
.review-item {
padding: var(--sp-5) 0;
border-top: 1px dashed var(--caput);
display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-5);
}
.review-item__author { font-family: var(--font-display); font-size: 18px; color: var(--white); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.review-item__date { font-family: var(--font-body); font-style: italic; color: var(--rodeo-light); font-size: var(--body-sm); }
.review-item__stars { color: var(--bronze); }
.review-item__body { font-family: var(--font-body); font-size: var(--body); color: var(--rodeo-light); line-height: var(--lh-body); margin: 0 0 var(--sp-3); }
.review-item__helpful { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--bronze); display: flex; gap: var(--sp-3); align-items: center; }
.review-item__helpful button { background: transparent; border: 1px solid var(--bronze); color: var(--bronze); padding: 4px 10px; font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.write-review-cta {
margin-top: var(--sp-6);
background: var(--sienna); color: var(--white);
border: 2px solid var(--bronze); border-style: ridge;
font-family: var(--font-display); font-size: 20px;
text-transform: uppercase; letter-spacing: var(--ls-wide);
padding: var(--sp-3) var(--sp-6);
box-shadow: 2px 2px 0 var(--caput);
}
@media (max-width: 880px) {
.product-tabs__pane { grid-template-columns: 1fr; }
.review-item { grid-template-columns: 1fr; }
}
/* ============================================================
BLOCK: ugc-painted-strip — Painted by the Community
============================================================ */
.ugc-painted-strip {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
padding: var(--sp-9) 0;
color: var(--rodeo-light);
}
.ugc-painted-strip__grid {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: var(--sp-5);
margin-bottom: var(--sp-7);
}
.ugc-painted-strip__tile {
position: relative;
aspect-ratio: 1;
border: 4px solid var(--bronze);
border-style: ridge;
overflow: hidden;
background: var(--liquourice);
}
.ugc-painted-strip__tile img { width: 100%; height: 100%; object-fit: cover; }
.ugc-painted-strip__tile .rivet { width: 7px; height: 7px; }
.ugc-painted-strip__tile .rivet--tl { top: 5px; left: 5px; }
.ugc-painted-strip__tile .rivet--tr { top: 5px; right: 5px; }
.ugc-painted-strip__tile .rivet--bl { bottom: 5px; left: 5px; }
.ugc-painted-strip__tile .rivet--br { bottom: 5px; right: 5px; }
.ugc-painted-strip__tile-author {
position: absolute; bottom: 0; left: 0; right: 0;
background: rgba(27, 19, 20, 0.85);
color: var(--bronze);
padding: 8px 12px;
font-family: var(--font-display); font-size: 12px;
text-transform: uppercase; letter-spacing: var(--ls-wider);
border-top: 2px solid var(--bronze);
}
.ugc-painted-strip__cta {
text-align: center;
}
.ugc-painted-strip__cta button {
background: transparent;
color: var(--bronze);
border: 2px solid var(--bronze);
border-style: ridge;
font-family: var(--font-display);
font-size: 18px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
padding: var(--sp-3) var(--sp-6);
box-shadow: 2px 2px 0 var(--caput);
}
@media (max-width: 880px) {
.ugc-painted-strip__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
.ugc-painted-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
BLOCK: cross-sell-paints — Pairs well with
============================================================ */
.cross-sell-paints {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
padding: var(--sp-9) 0;
}
.cross-sell-paints__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.cross-sell-paints__card {
position: relative;
background: var(--liquourice);
background-image: var(--gear-pattern);
border: 4px solid var(--bronze);
border-style: ridge;
padding: var(--sp-5);
display: flex; flex-direction: column; gap: var(--sp-3);
color: var(--rodeo-light);
}
.cross-sell-paints__card .rivet { width: 8px; height: 8px; }
.cross-sell-paints__card .rivet--tl { top: 6px; left: 6px; }
.cross-sell-paints__card .rivet--tr { top: 6px; right: 6px; }
.cross-sell-paints__card .rivet--bl { bottom: 6px; left: 6px; }
.cross-sell-paints__card .rivet--br { bottom: 6px; right: 6px; }
.cross-sell-paints__img {
aspect-ratio: 1;
background: var(--cowboy);
border: 2px solid var(--bronze);
overflow: hidden;
}
.cross-sell-paints__img img { width: 100%; height: 100%; object-fit: cover; }
.cross-sell-paints__cat {
font-family: var(--font-display);
font-size: 12px;
text-transform: uppercase; letter-spacing: var(--ls-widest);
color: var(--bronze);
margin-top: var(--sp-3);
}
.cross-sell-paints__name {
font-family: var(--font-display);
font-size: 20px;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--white);
margin: 0;
line-height: 1.1;
}
.cross-sell-paints__price-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--sp-3); border-top: 1px dashed var(--caput); }
.cross-sell-paints__price { font-family: var(--font-display); font-size: 22px; color: var(--bronze); }
.cross-sell-paints__add {
background: var(--sienna); color: var(--white);
border: 2px solid var(--bronze); border-style: ridge;
font-family: var(--font-display); font-size: 13px;
text-transform: uppercase; letter-spacing: var(--ls-wide);
padding: 8px 12px;
box-shadow: 2px 2px 0 var(--caput);
}
@media (max-width: 880px) {
.cross-sell-paints__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.cross-sell-paints__grid { grid-template-columns: 1fr; }
}
/* ============================================================
BLOCK: workbench-cards — From the workbench (how-to relevance)
============================================================ */
.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__card .rivet--tl { top: 8px; left: 8px; }
.workbench-cards__card .rivet--tr { top: 8px; right: 8px; }
.workbench-cards__card .rivet--bl { bottom: 8px; left: 8px; }
.workbench-cards__card .rivet--br { bottom: 8px; right: 8px; }
.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);
}
@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); }
}
/* ============================================================
BLOCK: related-products — You may also like
============================================================ */
.related-products {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
padding: var(--sp-9) 0;
}
.related-products__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.related-products__card {
position: relative;
background: var(--liquourice);
background-image: var(--gear-pattern);
border: 4px solid var(--bronze);
border-style: ridge;
padding: var(--sp-4);
display: flex; flex-direction: column; gap: var(--sp-3);
color: var(--rodeo-light);
}
.related-products__card .rivet { width: 8px; height: 8px; }
.related-products__card .rivet--tl { top: 6px; left: 6px; }
.related-products__card .rivet--tr { top: 6px; right: 6px; }
.related-products__card .rivet--bl { bottom: 6px; left: 6px; }
.related-products__card .rivet--br { bottom: 6px; right: 6px; }
.related-products__img { aspect-ratio: 4 / 5; background: var(--cowboy); border: 2px solid var(--bronze); overflow: hidden; position: relative; }
.related-products__img img { width: 100%; height: 100%; object-fit: cover; }
.related-products__badge {
position: absolute; top: 8px; right: 8px;
background: var(--bronze); color: var(--liquourice);
border: 1px solid var(--caput);
padding: 4px 8px;
font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.related-products__cat { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--bronze); }
.related-products__name { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white); margin: 0; line-height: 1.1; }
.related-products__stars { color: var(--bronze); font-size: 14px; }
.related-products__price-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--sp-3); border-top: 1px dashed var(--caput); }
.related-products__price { font-family: var(--font-display); font-size: 22px; color: var(--bronze); }
.related-products__view {
background: transparent; color: var(--bronze);
border: 2px solid var(--bronze); border-style: ridge;
font-family: var(--font-display); font-size: 12px;
text-transform: uppercase; letter-spacing: var(--ls-wider);
padding: 6px 12px;
box-shadow: 2px 2px 0 var(--caput);
}
@media (max-width: 880px) {
.related-products__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
BLOCK: recently-viewed — light treatment, smaller
============================================================ */
.recently-viewed {
background-color: var(--rodeo);
padding: var(--sp-8) 0;
color: var(--caput);
}
.recently-viewed__head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: var(--sp-5);
border-bottom: 2px solid var(--caput);
padding-bottom: var(--sp-3);
}
.recently-viewed__title {
font-family: var(--font-display);
font-size: 28px;
text-transform: uppercase; letter-spacing: var(--ls-wider);
color: var(--caput);
margin: 0;
}
.recently-viewed__see-all {
font-family: var(--font-display);
font-size: 13px;
text-transform: uppercase; letter-spacing: var(--ls-wider);
color: var(--sienna);
border-bottom: 1px dashed var(--sienna);
padding-bottom: 2px;
}
.recently-viewed__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.recently-viewed__card {
background: var(--rodeo-light);
border: 2px solid var(--caput);
padding: var(--sp-3);
display: flex; gap: var(--sp-3); align-items: center;
}
.recently-viewed__img { width: 64px; height: 80px; flex-shrink: 0; border: 1px solid var(--caput); overflow: hidden; }
.recently-viewed__img img { width: 100%; height: 100%; object-fit: cover; }
.recently-viewed__name { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--caput); margin: 0 0 var(--sp-1); line-height: 1.1; }
.recently-viewed__price { font-family: var(--font-display); font-size: 16px; color: var(--sienna); }
@media (max-width: 880px) {
.recently-viewed__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
BLOCK: newsletter-garrison — single-row strip
============================================================ */
.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);
}
.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 p { font-family: var(--font-body); font-style: italic; font-size: var(--body); margin: 0; color: var(--rodeo-light); }
.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: 280px;
}
.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%; }
}
/* ============================================================
BLOCK: global-footer — 4 cols + utility strip
============================================================ */
.global-footer {
background: var(--liquourice);
background-image: var(--gear-pattern);
color: var(--rodeo-light);
padding: var(--sp-8) 0 0;
border-top: 4px solid var(--bronze);
}
.global-footer__cols {
display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap: var(--sp-7);
padding-bottom: var(--sp-7);
}
.global-footer__brand-block { display: flex; flex-direction: column; gap: var(--sp-4); }
.global-footer__brand-wordmark {
font-family: var(--font-display);
font-size: 32px;
text-transform: uppercase; letter-spacing: var(--ls-wider);
color: var(--white);
}
.global-footer__nerdworks-badge {
display: inline-flex; align-items: center; gap: var(--sp-2);
padding: 6px 12px;
border: 2px solid var(--bronze); border-style: ridge;
background: var(--cowboy); color: var(--bronze);
font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wider); text-transform: uppercase;
align-self: flex-start;
}
.global-footer__col h4 {
font-family: var(--font-display);
font-size: 16px;
text-transform: uppercase; letter-spacing: var(--ls-widest);
color: var(--bronze);
margin: 0 0 var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 2px solid var(--bronze);
}
.global-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.global-footer__col ul li a { font-family: var(--font-body); font-size: var(--body-sm); color: var(--rodeo-light); }
.global-footer__col ul li a:hover { color: var(--bronze); }
.global-footer__util {
border-top: 1px solid var(--caput);
padding: var(--sp-4) 0;
display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--rodeo-light);
}
.global-footer__util-links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.global-footer__pay-icons { display: flex; gap: var(--sp-3); }
.global-footer__pay-icons span {
display: inline-block; padding: 4px 8px;
background: var(--cowboy); border: 1px solid var(--bronze); color: var(--bronze);
font-size: 10px;
}
@media (max-width: 880px) {
.global-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.global-footer__cols { grid-template-columns: 1fr; }
}
/* ============================================================
BLOCK: sticky-mobile-atc — small dark inverted bar
(visible at <=880px to demonstrate)
============================================================ */
.sticky-mobile-atc {
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--liquourice);
background-image: var(--gear-pattern);
color: var(--rodeo-light);
border-top: 4px solid var(--bronze);
border-top-style: ridge;
padding: var(--sp-3) var(--sp-4);
display: none;
align-items: center; gap: var(--sp-3);
z-index: 30;
}
.sticky-mobile-atc__thumb {
width: 48px; height: 48px;
border: 2px solid var(--bronze);
background: var(--cowboy);
flex-shrink: 0; overflow: hidden;
}
.sticky-mobile-atc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sticky-mobile-atc__name {
font-family: var(--font-display); font-size: 13px;
text-transform: uppercase; letter-spacing: var(--ls-wide);
color: var(--white);
line-height: 1.1;
margin: 0;
}
.sticky-mobile-atc__price {
font-family: var(--font-display); font-size: 18px;
color: var(--bronze);
}
.sticky-mobile-atc__atc {
margin-left: auto;
background: var(--sienna); color: var(--white);
border: 2px solid var(--bronze); border-style: ridge;
font-family: var(--font-display); font-size: 16px;
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) {
.sticky-mobile-atc { display: flex; }
body { padding-bottom: 80px; }
}
</style>
</head>
<body>
<!-- ============================================================ -->
<!-- 1. PRE-HEADER ANNOUNCEMENT BAR -->
<!-- ============================================================ -->
<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>
<!-- ============================================================ -->
<!-- 2. GLOBAL HEADER -->
<!-- ============================================================ -->
<header class="global-header 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="container global-header__inner">
<a href="#" class="global-header__brand">
<span class="global-header__brand-mark"></span>War Dungeon
</a>
<nav class="global-header__nav">
<a href="#" class="is-active">Warhammer</a>
<a href="#">Dungeons & Dragons</a>
<a href="#">Painting</a>
<a href="#">Tools</a>
<a href="#">Learn</a>
</nav>
<div class="global-header__utils">
<button class="global-header__icon-btn" aria-label="Search">⚲</button>
<button class="global-header__icon-btn" aria-label="Account">☉</button>
<button class="global-header__icon-btn" aria-label="Wishlist">♥</button>
<button class="global-header__basket">
Basket · 0
<span class="global-header__basket-points">2,140</span>
</button>
</div>
</div>
</header>
<!-- ============================================================ -->
<!-- 3. BREADCRUMBS -->
<!-- ============================================================ -->
<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 Patrol: Space Marines</span>
</div>
</nav>
<!-- GEAR DIVIDER -->
<!-- (No gear divider between breadcrumbs and product header — the product header
owns its own bronze ridge framing and we don't crowd the gallery's eye-flow.) -->
<!-- ============================================================ -->
<!-- 4. PRODUCT HEADER — gallery LEFT, content RIGHT -->
<!-- Inverted dark cowboy panel, bronze ridge frame, -->
<!-- rivets at outer panel corners. NO gear divider inside. -->
<!-- ============================================================ -->
<section class="product-header">
<div class="container">
<div class="product-header__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>
<!-- GALLERY (LEFT) — every photo plated in bronze ridge frame -->
<div class="product-gallery">
<div class="product-gallery__main 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>
<img src="https://images.unsplash.com/photo-1612396516812-0a78fb0d748c?auto=format&fit=crop&w=1200&q=80" alt="Combat Patrol: Space Marines — assembled and painted, primary diorama angle.">
<button class="product-gallery__zoom">⌕ Tap to zoom</button>
<button class="product-gallery__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="product-gallery__thumbs">
<div class="product-gallery__thumb rivet-panel is-active">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?auto=format&fit=crop&w=600&q=80" alt="Front angle">
</div>
<div class="product-gallery__thumb 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>
<img src="https://images.unsplash.com/photo-1547700055-b61cacebece9?auto=format&fit=crop&w=600&q=80" alt="Scale reference">
</div>
<div class="product-gallery__thumb 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>
<img src="https://images.unsplash.com/photo-1640264108533-d97fc20bef83?auto=format&fit=crop&w=600&q=80" alt="Unboxing detail">
</div>
<div class="product-gallery__thumb 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>
<img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?auto=format&fit=crop&w=600&q=80" alt="Painted reference">
</div>
</div>
</div>
<!-- CONTENT (RIGHT) -->
<div class="product-content">
<div class="product-content__eyebrow">Warhammer 40,000 · Space Marines</div>
<h1 class="product-content__title">Combat Patrol: Space Marines</h1>
<div class="product-content__rule"></div>
<div class="product-content__rating-row">
<div class="stamped-roundel stamped-roundel--review">
<div class="stars">★ 4.8</div>
<div>Rated</div>
</div>
<a href="#reviews" class="review-count-link">124 reviews — read what the regulars say</a>
</div>
<p class="product-content__short">
Ten miniatures. One starter army. Every chapter in the Imperium, near as
dammit. Push-fit, paint-ready, on your gaming table by sundown.
</p>
<!-- LOYALTY ROW — stamped brass roundel ADJACENT to the price+ATC zone -->
<div class="product-content__loyalty-row">
<div class="stamped-roundel stamped-roundel--loyalty" title="595 = round(£119 × 5)">
<div class="num">595</div>
<div class="label">Loyalty<br>Points<br>Earned</div>
</div>
<div style="flex: 1 1 auto;">
<div class="product-content__eyebrow">Spend it across the family</div>
<p style="font-family: var(--font-body); font-style: italic; color: var(--rodeo-light); margin: var(--sp-2) 0 0; font-size: var(--body-sm);">
Redeem at War Dungeon, Nerdworks, ArtSabers, or Paragon. No expiry, no fuss.
<a href="#" style="color: var(--bronze); border-bottom: 1px dashed var(--bronze);">How earning works</a>
</p>
</div>
</div>
<!-- ===================================================== -->
<!-- CLEAN ZONE — the price + ATC. NO gear pattern overlay,-->
<!-- NO rivets, NO stamped badges crossing it, no decorative-->
<!-- ornament. This is the conversion peak. Solid cowboy. -->
<!-- ===================================================== -->
<div class="clean-zone">
<div class="clean-zone__price-line">
<span class="clean-zone__price-current">£119.00</span>
<span class="clean-zone__price-rrp">£135.00</span>
<span class="clean-zone__price-save">Save £16</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 aria-label="Decrease">−</button>
<input type="text" value="1" aria-label="Quantity">
<button aria-label="Increase">+</button>
</div>
<button class="clean-zone__atc">Add to Cart</button>
</div>
<button class="clean-zone__wishlist">♥ Add to Wishlist</button>
</div>
<!-- Variation selector — sits BELOW the clean zone so it doesn't
compete with the conversion peak. (Order-of-operations note for
operator: render-direction asked for variation above stock; we
pushed it to live with express checkout to preserve the clean
zone — flag for review.) -->
<div class="product-content__variation">
<div class="product-content__variation-label">Configuration</div>
<div class="product-content__variation-options">
<button class="product-content__variation-option is-selected">Standard box</button>
<button class="product-content__variation-option">+ Chapter transfer pack (£8)</button>
<button class="product-content__variation-option">+ Macragge Blue primer (£12)</button>
</div>
</div>
<!-- EXPRESS CHECKOUT ROW -->
<div class="product-content__express">
<button class="product-content__express-btn"> Apple Pay</button>
<button class="product-content__express-btn">G Google Pay</button>
<button class="product-content__express-btn">Shop Pay</button>
<button class="product-content__express-btn">Klarna · 3 payments</button>
</div>
<!-- FREE DELIVERY TICK -->
<div class="product-content__delivery-progress">
<span class="product-content__delivery-tick">✓</span>
Free UK shipping unlocked — this saddle clears the £75 threshold by £44.
</div>
<!-- SECONDARY CTA CLUSTER -->
<div class="product-content__secondary-cluster">
<a href="#">Ask the shopkeeper about this kit</a>
<a href="#">Compare against other Combat Patrols</a>
</div>
</div>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- ============================================================ -->
<!-- 5. UNIVERSAL TRUST SIGNALS STRIP -->
<!-- 4 stamped cells — each a brass roundel + caption. -->
<!-- ============================================================ -->
<section class="trust-strip-stamped">
<div class="container">
<div class="trust-strip-stamped__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="trust-strip-stamped__cell">
<div class="trust-strip-stamped__stamp">⚲</div>
<h3 class="trust-strip-stamped__title">Free UK Shipping</h3>
<p class="trust-strip-stamped__body">Over £75 — saddle's on us. 2–3 working days, tracked.</p>
</div>
<div class="trust-strip-stamped__cell">
<div class="trust-strip-stamped__stamp">↩</div>
<h3 class="trust-strip-stamped__title">30-Day Returns</h3>
<p class="trust-strip-stamped__body">Don't take to the kit? Send it back, no questions asked.</p>
</div>
<div class="trust-strip-stamped__cell">
<div class="trust-strip-stamped__stamp">⚙</div>
<h3 class="trust-strip-stamped__title">Multi-Game Expertise</h3>
<p class="trust-strip-stamped__body">40K, Age of Sigmar, Old World, D&D — we play 'em all.</p>
</div>
<div class="trust-strip-stamped__cell">
<div class="trust-strip-stamped__stamp">★</div>
<h3 class="trust-strip-stamped__title">A Nerdworks Brand</h3>
<p class="trust-strip-stamped__body">Sister to Nerdworks, ArtSabers & Paragon. Loyalty redeems across the family.</p>
</div>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- ============================================================ -->
<!-- 6. PRODUCT TABS — Description / Box / Specs / Reviews -->
<!-- ============================================================ -->
<section class="product-tabs">
<div class="container">
<div class="product-tabs__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="product-tabs__nav" role="tablist">
<button class="is-active">Description</button>
<button>What's in the Box</button>
<button>Specifications</button>
<button id="reviews">Reviews · 124</button>
</div>
<!-- DESCRIPTION pane (the displayed/active one in the mockup) -->
<div class="product-tabs__pane">
<div>
<h3>The fastest road into the Imperium</h3>
<p>
If you've been eyeing the Astartes from across the saloon and waiting
for the right moment to walk in, this is it. Combat Patrol: Space
Marines is Games Workshop's calling-card kit — ten plastic miniatures
covering the whole shape of a 10th-edition Space Marines force in one
box.
</p>
<p>
You get a Captain in Terminator Armour to lead the boys, five Tactical
Marines for the rifle line, three Aggressors with thunder gauntlets
for when things get up close, and an Apothecary to keep the chapter
roster honest. It plays the official Combat Patrol mission deck out of
the box — quick games, decisive battles, low table-space cost.
</p>
<p>
Push-fit construction means no glue if you're in a hurry; the kit
assembles in a couple of evenings at hobby pace. The chapter symbol
transfer sheet covers the major Founding Chapters and most of the
Successor lot besides, so whether you're flying Ultramarines blue,
Salamanders green, Imperial Fists yellow or your own homebrew
heraldry, you're set.
</p>
<p style="font-style: italic; color: var(--bronze);">
New to the hobby? Walk through our Edge Highlighting tutorial below
after you've finished assembly — it's the single move that takes a
Combat Patrol from "table-ready" to "table-talked-about."
</p>
</div>
<aside class="product-tabs__aside 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>
<img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?auto=format&fit=crop&w=600&q=80" alt="In-progress paint reference">
<h4>From the painter's bench</h4>
<p>
Ultramarines scheme, mid-highlight stage. Captain inked, Aggressors
base-coated, Tactical squad awaiting the first edge pass.
</p>
</aside>
</div>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- Inline the second tab pane (What's in the Box) as a visible section so
the mockup shows the full anatomy — operator decides whether to keep it
as a stacked-panel layout or as JS-driven tabs. Flag for confirmation. -->
<section class="product-tabs">
<div class="container">
<div class="product-tabs__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="section-head" style="margin-bottom: var(--sp-6);">
<span class="section-head__eyebrow">In the crate</span>
<h2 class="section-head__title">What's in the Box</h2>
<div class="section-head__rule"></div>
</div>
<div class="product-tabs__pane">
<div>
<ul>
<li><strong style="color: var(--bronze); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-wide);">10 plastic Space Marines miniatures</strong> — 1 Captain in Terminator Armour, 5 Tactical Marines, 3 Aggressors, 1 Apothecary</li>
<li><strong style="color: var(--bronze); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-wide);">1 Combat Patrol mission deck</strong> — official 10th-edition cards covering objectives and rule overlays</li>
<li><strong style="color: var(--bronze); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-wide);">1 chapter transfer sheet</strong> — 200+ icons covering the major Founding Chapters and successors</li>
<li><strong style="color: var(--bronze); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-wide);">1 base sheet</strong> — Citadel 32mm and 40mm round bases, pre-cut</li>
<li><strong style="color: var(--bronze); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-wide);">Assembly instructions</strong> — printed in 8 languages, fully illustrated, push-fit guide</li>
</ul>
</div>
<aside class="product-tabs__aside 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>
<img src="https://images.unsplash.com/photo-1640264108533-d97fc20bef83?auto=format&fit=crop&w=600&q=80" alt="Sprue overview">
<h4>Sprue schematic</h4>
<p>
Two sprues per kit. All cuts are push-fit; glue optional for tighter joins.
</p>
</aside>
</div>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- SPECIFICATIONS pane -->
<section class="product-tabs">
<div class="container">
<div class="product-tabs__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="section-head" style="margin-bottom: var(--sp-6);">
<span class="section-head__eyebrow">Stat sheet</span>
<h2 class="section-head__title">Specifications</h2>
<div class="section-head__rule"></div>
</div>
<div class="product-tabs__pane">
<div>
<table class="spec-table">
<tbody>
<tr><th>Scale</th><td>28mm heroic — standard Warhammer 40,000 scale</td></tr>
<tr><th>Material</th><td>Polystyrene plastic, injection-moulded</td></tr>
<tr><th>Paint required</th><td>Yes — sold unpainted (see "Pairs well with" below for the starter paints)</td></tr>
<tr><th>Assembly</th><td>Push-fit — glue optional. Suitable for first-time assemblers.</td></tr>
<tr><th>Game compatibility</th><td>Warhammer 40,000 (10th edition) Combat Patrol missions, matched-play legal</td></tr>
<tr><th>Recommended skill</th><td>Beginner to intermediate — ideal for a first Space Marines force</td></tr>
<tr><th>Box contents weight</th><td>620g</td></tr>
<tr><th>Manufacturer</th><td>Games Workshop, Nottingham — official UK trade partner</td></tr>
</tbody>
</table>
</div>
<aside class="product-tabs__aside 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>
<img src="https://images.unsplash.com/photo-1547700055-b61cacebece9?auto=format&fit=crop&w=600&q=80" alt="Scale reference">
<h4>Scale reference</h4>
<p>
Captain in Terminator Armour next to a 32mm Tactical Marine — for first-timers comparing scale to D&D minis.
</p>
</aside>
</div>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- REVIEWS pane -->
<section class="product-tabs">
<div class="container">
<div class="product-tabs__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="section-head" style="margin-bottom: var(--sp-6);">
<span class="section-head__eyebrow">What the regulars say</span>
<h2 class="section-head__title">Reviews</h2>
<div class="section-head__rule"></div>
</div>
<div class="reviews-summary">
<div>
<div class="reviews-summary__score">4.8</div>
<div class="reviews-summary__stars">★ ★ ★ ★ ★</div>
<div class="reviews-summary__count">From 124 verified reviews</div>
</div>
<div class="reviews-summary__histogram">
<div class="reviews-summary__hist-row"><span>5★</span><div class="reviews-summary__hist-bar"><span style="width: 82%;"></span></div><span>102</span></div>
<div class="reviews-summary__hist-row"><span>4★</span><div class="reviews-summary__hist-bar"><span style="width: 12%;"></span></div><span>15</span></div>
<div class="reviews-summary__hist-row"><span>3★</span><div class="reviews-summary__hist-bar"><span style="width: 3%;"></span></div><span>4</span></div>
<div class="reviews-summary__hist-row"><span>2★</span><div class="reviews-summary__hist-bar"><span style="width: 2%;"></span></div><span>2</span></div>
<div class="reviews-summary__hist-row"><span>1★</span><div class="reviews-summary__hist-bar"><span style="width: 1%;"></span></div><span>1</span></div>
</div>
</div>
<div class="review-item">
<div>
<div class="review-item__author">Greg P.</div>
<div class="review-item__date">14 March 2026 · Verified buyer</div>
<div class="review-item__stars">★ ★ ★ ★ ★</div>
</div>
<div>
<p class="review-item__body">
"Picked this up as my first 40K force after a fifteen-year break. Push-fit
assembly is honest-to-god foolproof — I had the Captain done in twenty
minutes. Transfer sheet alone is worth the difference vs grabbing it on
the high street. Shipped next day, packed properly. War Dungeon's box is
now in my regular rotation."
</p>
<div class="review-item__helpful">Was this helpful? <button>Yes · 18</button><button>No · 1</button></div>
</div>
</div>
<div class="review-item">
<div>
<div class="review-item__author">Hannah M.</div>
<div class="review-item__date">2 March 2026 · Verified buyer</div>
<div class="review-item__stars">★ ★ ★ ★ ★</div>
</div>
<div>
<p class="review-item__body">
"Bought for my partner's birthday with the Macragge primer bundle. He had
the Apothecary painted before the cake came out. Loyalty points landed
same day — straight into a redemption at Nerdworks for an MTG bundle.
Cross-brand setup actually works as advertised."
</p>
<div class="review-item__helpful">Was this helpful? <button>Yes · 11</button><button>No · 0</button></div>
</div>
</div>
<div class="review-item">
<div>
<div class="review-item__author">Tom W.</div>
<div class="review-item__date">26 February 2026 · Verified buyer</div>
<div class="review-item__stars">★ ★ ★ ★ ☆</div>
</div>
<div>
<p class="review-item__body">
"Solid kit, no complaints with the contents. Knocking a star off for the
transfer sheet creasing in transit — got a replacement out same week,
so no harm done. The Edge Highlighting tutorial linked under the kit
page is genuinely the best beginner resource I've seen anywhere."
</p>
<div class="review-item__helpful">Was this helpful? <button>Yes · 7</button><button>No · 0</button></div>
</div>
</div>
<div style="text-align: center;">
<button class="write-review-cta">Write your review</button>
</div>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- ============================================================ -->
<!-- 7. PAINTED BY THE COMMUNITY -->
<!-- ============================================================ -->
<section class="ugc-painted-strip">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">Real tables · real paint jobs</span>
<h2 class="section-head__title">Painted by the Community</h2>
<div class="section-head__rule"></div>
<p class="section-head__sub">Submitted by regulars and creator partners. Click any tile for the full breakdown.</p>
</div>
<div class="ugc-painted-strip__grid">
<div class="ugc-painted-strip__tile 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>
<img src="https://images.unsplash.com/photo-1612396516812-0a78fb0d748c?auto=format&fit=crop&w=600&q=80" alt="Painted Ultramarines patrol">
<div class="ugc-painted-strip__tile-author">@brushwright_greg · Ultramarines</div>
</div>
<div class="ugc-painted-strip__tile 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>
<img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?auto=format&fit=crop&w=600&q=80" alt="Painted Salamanders patrol">
<div class="ugc-painted-strip__tile-author">@lana.paints · Salamanders</div>
</div>
<div class="ugc-painted-strip__tile 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>
<img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?auto=format&fit=crop&w=600&q=80" alt="Painted Blood Angels patrol">
<div class="ugc-painted-strip__tile-author">@nine_o_clock · Blood Angels</div>
</div>
<div class="ugc-painted-strip__tile 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>
<img src="https://images.unsplash.com/photo-1640264108533-d97fc20bef83?auto=format&fit=crop&w=600&q=80" alt="Painted Imperial Fists patrol">
<div class="ugc-painted-strip__tile-author">@cantor_paints · Imperial Fists</div>
</div>
<div class="ugc-painted-strip__tile 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>
<img src="https://images.unsplash.com/photo-1547700055-b61cacebece9?auto=format&fit=crop&w=600&q=80" alt="Painted Dark Angels patrol">
<div class="ugc-painted-strip__tile-author">@tuesday_hobbyist · Dark Angels</div>
</div>
<div class="ugc-painted-strip__tile 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>
<img src="https://images.unsplash.com/photo-1612396516812-0a78fb0d748c?auto=format&fit=crop&w=600&q=80" alt="Painted Iron Hands patrol">
<div class="ugc-painted-strip__tile-author">@steve.brushed · Iron Hands</div>
</div>
</div>
<div class="ugc-painted-strip__cta">
<button>Submit your painting</button>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- ============================================================ -->
<!-- 8. PAIRS WELL WITH — cross-sell (3 paints + 1 tool) -->
<!-- ============================================================ -->
<section class="cross-sell-paints">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">Get the kit table-ready</span>
<h2 class="section-head__title">Pairs well with</h2>
<div class="section-head__rule"></div>
<p class="section-head__sub">The paints and one tool you'll need to get this Combat Patrol on the board. Curation, not upsell.</p>
</div>
<div class="cross-sell-paints__grid">
<article class="cross-sell-paints__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="cross-sell-paints__img"><img src="https://images.unsplash.com/photo-1626218174358-7769486c2b66?auto=format&fit=crop&w=600&q=80" alt="Macragge Blue spray"></div>
<div class="cross-sell-paints__cat">Citadel · Spray Primer</div>
<h3 class="cross-sell-paints__name">Macragge Blue Spray</h3>
<div class="cross-sell-paints__price-row">
<span class="cross-sell-paints__price">£14.50</span>
<button class="cross-sell-paints__add">+ Add</button>
</div>
</article>
<article class="cross-sell-paints__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="cross-sell-paints__img"><img src="https://images.unsplash.com/photo-1604111950101-79c97e1ade48?auto=format&fit=crop&w=600&q=80" alt="Mephiston Red"></div>
<div class="cross-sell-paints__cat">Citadel · Base</div>
<h3 class="cross-sell-paints__name">Mephiston Red</h3>
<div class="cross-sell-paints__price-row">
<span class="cross-sell-paints__price">£3.50</span>
<button class="cross-sell-paints__add">+ Add</button>
</div>
</article>
<article class="cross-sell-paints__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="cross-sell-paints__img"><img src="https://images.unsplash.com/photo-1532634726-8b9fb99825bd?auto=format&fit=crop&w=600&q=80" alt="Leadbelcher"></div>
<div class="cross-sell-paints__cat">Citadel · Base</div>
<h3 class="cross-sell-paints__name">Leadbelcher</h3>
<div class="cross-sell-paints__price-row">
<span class="cross-sell-paints__price">£3.50</span>
<button class="cross-sell-paints__add">+ Add</button>
</div>
</article>
<article class="cross-sell-paints__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="cross-sell-paints__img"><img src="https://images.unsplash.com/photo-1572197920430-c049b9b3fcaa?auto=format&fit=crop&w=600&q=80" alt="Citadel hobby knife"></div>
<div class="cross-sell-paints__cat">Tools · Cutting</div>
<h3 class="cross-sell-paints__name">Citadel Hobby Knife</h3>
<div class="cross-sell-paints__price-row">
<span class="cross-sell-paints__price">£11.00</span>
<button class="cross-sell-paints__add">+ Add</button>
</div>
</article>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- ============================================================ -->
<!-- 9. FROM THE WORKBENCH -->
<!-- ============================================================ -->
<section class="workbench-cards">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">Tutorials for this kit</span>
<h2 class="section-head__title">From the Workbench</h2>
<div class="section-head__rule"></div>
<p class="section-head__sub">Hand-picked how-tos written by painters who've put hands on this exact box.</p>
</div>
<div class="workbench-cards__grid">
<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://images.unsplash.com/photo-1605000797499-95a51c5269ae?auto=format&fit=crop&w=900&q=80" alt="Edge highlighting tutorial"></div>
<div class="workbench-cards__body">
<div class="workbench-cards__meta">
<span class="workbench-cards__pill">Beginner</span>
<span class="workbench-cards__pill workbench-cards__pill--time">18 min read</span>
</div>
<h3 class="workbench-cards__title">Edge highlighting Space Marines power armour</h3>
<p class="workbench-cards__excerpt">
The single move that takes Ultramarines blue from "table-ready" to
"table-talked-about". Brush angle, paint thinning ratio, the
two-pass rule. Worked example on a Tactical Marine.
</p>
<button class="workbench-cards__cta">Read the guide</button>
</div>
</article>
<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://images.unsplash.com/photo-1640264108533-d97fc20bef83?auto=format&fit=crop&w=900&q=80" alt="Magnetising tutorial"></div>
<div class="workbench-cards__body">
<div class="workbench-cards__meta">
<span class="workbench-cards__pill">Intermediate</span>
<span class="workbench-cards__pill workbench-cards__pill--time">26 min watch</span>
</div>
<h3 class="workbench-cards__title">Magnetising Combat Patrol weapon options</h3>
<p class="workbench-cards__excerpt">
Aggressors with thunder gauntlets one game, flame gauntlets the next.
Drill size, magnet polarity, what to glue and what to leave loose.
One-evening project, lifetime of swappable load-outs.
</p>
<button class="workbench-cards__cta">Watch the tutorial</button>
</div>
</article>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- ============================================================ -->
<!-- 10. YOU MAY ALSO LIKE — related products -->
<!-- ============================================================ -->
<section class="related-products">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">More boxes worth your time</span>
<h2 class="section-head__title">You may also like</h2>
<div class="section-head__rule"></div>
</div>
<div class="related-products__grid">
<article class="related-products__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="related-products__img">
<img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?auto=format&fit=crop&w=600&q=80" alt="Combat Patrol: Necrons">
<span class="related-products__badge">In stock</span>
</div>
<div class="related-products__cat">Warhammer 40,000 · Necrons</div>
<h3 class="related-products__name">Combat Patrol: Necrons</h3>
<div class="related-products__stars">★ ★ ★ ★ ★ <span style="color: var(--rodeo-light); font-family: var(--font-body); font-size: var(--micro);">· 96</span></div>
<div class="related-products__price-row">
<span class="related-products__price">£115.00</span>
<button class="related-products__view">View</button>
</div>
</article>
<article class="related-products__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="related-products__img">
<img src="https://images.unsplash.com/photo-1547700055-b61cacebece9?auto=format&fit=crop&w=600&q=80" alt="Combat Patrol: T'au Empire">
<span class="related-products__badge">In stock</span>
</div>
<div class="related-products__cat">Warhammer 40,000 · T'au Empire</div>
<h3 class="related-products__name">Combat Patrol: T'au Empire</h3>
<div class="related-products__stars">★ ★ ★ ★ ☆ <span style="color: var(--rodeo-light); font-family: var(--font-body); font-size: var(--micro);">· 71</span></div>
<div class="related-products__price-row">
<span class="related-products__price">£119.00</span>
<button class="related-products__view">View</button>
</div>
</article>
<article class="related-products__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="related-products__img">
<img src="https://images.unsplash.com/photo-1640264108533-d97fc20bef83?auto=format&fit=crop&w=600&q=80" alt="Space Marines Strike Force">
<span class="related-products__badge">Pre-order</span>
</div>
<div class="related-products__cat">Warhammer 40,000 · Space Marines</div>
<h3 class="related-products__name">Space Marines Strike Force</h3>
<div class="related-products__stars">★ ★ ★ ★ ★ <span style="color: var(--rodeo-light); font-family: var(--font-body); font-size: var(--micro);">· 42</span></div>
<div class="related-products__price-row">
<span class="related-products__price">£195.00</span>
<button class="related-products__view">View</button>
</div>
</article>
<article class="related-products__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="related-products__img">
<img src="https://images.unsplash.com/photo-1612396516812-0a78fb0d748c?auto=format&fit=crop&w=600&q=80" alt="Space Marines Hero Series">
<span class="related-products__badge">In stock</span>
</div>
<div class="related-products__cat">Warhammer 40,000 · Space Marines</div>
<h3 class="related-products__name">Space Marines Hero Series</h3>
<div class="related-products__stars">★ ★ ★ ★ ★ <span style="color: var(--rodeo-light); font-family: var(--font-body); font-size: var(--micro);">· 58</span></div>
<div class="related-products__price-row">
<span class="related-products__price">£32.50</span>
<button class="related-products__view">View</button>
</div>
</article>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- ============================================================ -->
<!-- 11. RECENTLY VIEWED — light treatment -->
<!-- ============================================================ -->
<section class="recently-viewed">
<div class="container">
<div class="recently-viewed__head">
<h3 class="recently-viewed__title">Recently viewed</h3>
<a href="#" class="recently-viewed__see-all">Clear history</a>
</div>
<div class="recently-viewed__grid">
<div class="recently-viewed__card">
<div class="recently-viewed__img"><img src="https://images.unsplash.com/photo-1626218174358-7769486c2b66?auto=format&fit=crop&w=200&q=80" alt="Macragge Blue Spray"></div>
<div>
<h4 class="recently-viewed__name">Macragge Blue Spray</h4>
<div class="recently-viewed__price">£14.50</div>
</div>
</div>
<div class="recently-viewed__card">
<div class="recently-viewed__img"><img src="https://images.unsplash.com/photo-1547700055-b61cacebece9?auto=format&fit=crop&w=200&q=80" alt="Combat Patrol T'au"></div>
<div>
<h4 class="recently-viewed__name">Combat Patrol: T'au Empire</h4>
<div class="recently-viewed__price">£119.00</div>
</div>
</div>
<div class="recently-viewed__card">
<div class="recently-viewed__img"><img src="https://images.unsplash.com/photo-1572197920430-c049b9b3fcaa?auto=format&fit=crop&w=200&q=80" alt="Citadel Hobby Knife"></div>
<div>
<h4 class="recently-viewed__name">Citadel Hobby Knife</h4>
<div class="recently-viewed__price">£11.00</div>
</div>
</div>
<div class="recently-viewed__card">
<div class="recently-viewed__img"><img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?auto=format&fit=crop&w=200&q=80" alt="Codex Space Marines"></div>
<div>
<h4 class="recently-viewed__name">Codex: Space Marines (10th ed)</h4>
<div class="recently-viewed__price">£32.50</div>
</div>
</div>
</div>
</div>
</section>
<!-- GEAR DIVIDER -->
<div class="gear-divider" aria-hidden="true"></div>
<!-- ============================================================ -->
<!-- 12. NEWSLETTER — Join the Garrison -->
<!-- ============================================================ -->
<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">
<h3>Join the Garrison</h3>
<p>New kit drops, tutorial releases, and the occasional regiment-only deal. No spam — shopkeeper's word.</p>
</div>
<form class="newsletter-garrison__form" onsubmit="return false;">
<input type="email" placeholder="your.signal@dispatch.com" aria-label="Email address">
<button type="submit">Enlist</button>
</form>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- 13. GLOBAL FOOTER -->
<!-- ============================================================ -->
<footer class="global-footer rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<div class="container">
<div class="global-footer__cols">
<div class="global-footer__brand-block">
<div class="global-footer__brand-wordmark">War Dungeon</div>
<p style="font-family: var(--font-body); font-style: italic; color: var(--rodeo-light); margin: 0; font-size: var(--body-sm);">
Warhammer & Dungeons & Dragons specialists. We play the games we sell.
</p>
<a href="#" class="global-footer__nerdworks-badge">⬡ A Nerdworks Brand</a>
</div>
<div class="global-footer__col">
<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 & Tools</a></li>
<li><a href="#">Terrain</a></li>
</ul>
</div>
<div class="global-footer__col">
<h4>Discover</h4>
<ul>
<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="global-footer__col">
<h4>Help & Loyalty</h4>
<ul>
<li><a href="#">Contact the shopkeeper</a></li>
<li><a href="#">Shipping & delivery</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Track your order</a></li>
<li><a href="#">Loyalty programme</a></li>
<li><a href="#">Sister-brand redemption</a></li>
</ul>
</div>
</div>
<div class="global-footer__util">
<div class="global-footer__util-links">
<span>© 2026 War Dungeon — A Nerdworks Brand</span>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Cookies</a>
</div>
<div class="global-footer__pay-icons">
<span>VISA</span><span>MC</span><span>AMEX</span><span>PAYPAL</span><span>APPLE</span><span>KLARNA</span>
</div>
</div>
</div>
</footer>
<!-- ============================================================ -->
<!-- 14. STICKY MOBILE ATC (visible at <=880px) -->
<!-- ============================================================ -->
<aside class="sticky-mobile-atc" aria-label="Quick add to cart">
<div class="sticky-mobile-atc__thumb">
<img src="https://images.unsplash.com/photo-1612396516812-0a78fb0d748c?auto=format&fit=crop&w=200&q=80" alt="Combat Patrol thumbnail">
</div>
<div>
<h4 class="sticky-mobile-atc__name">Combat Patrol: Space Marines</h4>
<div class="sticky-mobile-atc__price">£119.00</div>
</div>
<button class="sticky-mobile-atc__atc">Add to Cart</button>
</aside>
</body>
</html>