<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,600;0,800;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=IM+Fell+English+SC&display=swap" rel="stylesheet">
<style>
:root {
--primary: #C5A688;
--secondary: #D8C3B1;
--tertiary: #F4A479;
--dark: #1B1314;
--light: #FFFFFF;
--text: #613F34;
--neutral: #2B1B1C;
--accent: #832D15;
--positive: #4A6E50;
--negative: #C8442D;
--rodeo: #C5A688;
--caput: #613F34;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--sienna: #832D15;
--bronze: #F4A479;
--rodeo-light: #D8C3B1;
--bg-page: var(--rodeo);
--bg-card: var(--rodeo-light);
--bg-panel-dark: var(--cowboy);
--bg-chrome: var(--liquourice);
--text-on-light: var(--caput);
--text-on-dark: var(--light);
--eyebrow-color: var(--sienna);
--font-display: 'Literata', 'EB Garamond', 'Palatino Linotype', Georgia, serif;
--font-body: 'EB Garamond', 'Literata', 'Palatino Linotype', Georgia, serif;
--font-eyebrow: 'IM Fell English SC', '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: 18px;
--t-body-sm: 16px;
--t-eyebrow: 13px;
--t-micro: 12px;
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
--r-sm: 4px; --r-md: 7px; --r-lg: 14px; --r-xl: 21px;
--sh-sm: 2px 2px 0 rgba(27, 19, 20, 0.85);
--sh-md: 4px 4px 0 rgba(27, 19, 20, 0.9);
--sh-lg: 6px 6px 0 rgba(27, 19, 20, 0.95);
--sh-xl: 8px 8px 0 rgba(27, 19, 20, 1);
--paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0 0.20 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
--paper-grain-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0 0.20 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
--paper-grain-strong: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0 0.20 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
--leather-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0 0.65 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body {
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.5;
color: var(--text-on-light);
background-color: var(--bg-page);
background-image: var(--paper-grain-faint);
margin: 0;
padding-bottom: 90px;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.container--wide { max-width: 1440px; }
.eyebrow {
font-family: var(--font-eyebrow);
font-size: var(--t-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--eyebrow-color);
font-style: italic;
border-bottom: 1px solid var(--caput);
display: inline-block;
padding: 0 1px 2px;
}
.distress-divider {
height: 1px;
width: calc(100% - 80px);
max-width: 1120px;
margin: var(--s9) auto;
background-image: repeating-linear-gradient(90deg,
var(--caput) 0px, var(--caput) 14px,
transparent 14px, transparent 16px,
var(--caput) 16px, var(--caput) 32px,
transparent 32px, transparent 33px);
opacity: 0.55;
border: none;
}
/* ===== ANNOUNCEMENT BAR ===== */
.announcement {
background: var(--liquourice);
color: var(--light);
font-family: var(--font-eyebrow);
font-size: var(--t-eyebrow);
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
padding: 10px 20px;
position: relative;
overflow: hidden;
}
.announcement::before {
content: ''; position: absolute; inset: 0;
background-image: var(--leather-noise);
opacity: 0.6; pointer-events: none;
}
.announcement__inner { position: relative; display: flex; justify-content: center; gap: var(--s7); flex-wrap: wrap; }
.announcement__item { color: var(--bronze); }
.announcement__item--mid { color: var(--light); opacity: 0.85; }
.announcement__sep { opacity: 0.4; }
/* ===== HEADER ===== */
.header {
background: var(--cowboy);
color: var(--light);
border-bottom: 1px solid var(--caput);
box-shadow: 0 1px 0 var(--caput);
position: relative;
}
.header::before {
content: ''; position: absolute; inset: 0;
background-image: var(--leather-noise);
opacity: 0.6; pointer-events: none;
}
.header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s7);
padding: var(--s4) 40px;
position: relative;
max-width: 1440px;
margin: 0 auto;
}
.header__brand {
font-family: var(--font-display);
font-weight: 800;
font-size: 24px;
letter-spacing: 0.06em;
color: var(--bronze);
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
}
.header__brand-mark {
width: 36px; height: 36px;
border: 1px solid var(--bronze);
display: flex; align-items: center; justify-content: center;
font-size: 16px;
position: relative;
font-family: var(--font-display);
}
.header__brand-mark::after {
content: ''; position: absolute; inset: 3px;
border: 1px solid var(--bronze);
}
.header__nav { display: flex; gap: var(--s7); justify-content: center; }
.header__nav a {
font-family: var(--font-eyebrow);
font-size: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--light);
padding: 6px 0;
border-bottom: 1px solid transparent;
transition: border-color 200ms, color 200ms;
}
.header__nav a:hover { border-bottom-color: var(--bronze); color: var(--bronze); }
.header__utility { display: flex; gap: var(--s4); align-items: center; }
.header__icon {
font-family: var(--font-eyebrow);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--light);
display: flex; gap: 5px; align-items: center;
}
.header__cart {
border: 1px solid var(--caput);
background: var(--liquourice);
padding: 8px 14px;
}
.header__cart-badge {
background: var(--bronze);
color: var(--liquourice);
font-family: var(--font-display);
font-weight: 700;
padding: 1px 8px;
border-radius: 999px;
font-size: 10px;
margin-left: 6px;
letter-spacing: 0.04em;
}
/* ===== BREADCRUMBS ===== */
.breadcrumbs {
padding: var(--s5) 0 var(--s4);
font-family: var(--font-eyebrow);
font-size: var(--t-eyebrow);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--caput);
}
.breadcrumbs a:hover { color: var(--sienna); }
.breadcrumbs__sep { opacity: 0.45; margin: 0 var(--s3); }
.breadcrumbs__current { color: var(--sienna); }
/* ===== PRODUCT HEADER ===== */
.product-header {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: var(--s8);
padding: var(--s4) 0 var(--s7);
}
/* GALLERY */
.gallery__main {
aspect-ratio: 4/5;
background:
radial-gradient(ellipse at 32% 28%, rgba(255,255,255,0.42), transparent 55%),
radial-gradient(ellipse at 70% 80%, rgba(244,164,121,0.18), transparent 60%),
linear-gradient(150deg, #4d3a35 0%, #2a1b1a 60%, #1b1314 100%);
position: relative;
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
overflow: hidden;
margin: 3px;
}
.gallery__main::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
pointer-events: none;
mix-blend-mode: overlay;
}
.gallery__placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 22px;
z-index: 2;
}
.gallery__placeholder-label {
color: rgba(255,255,255,0.6);
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
text-align: center;
padding: 0 24px;
}
.gallery__wishlist {
position: absolute;
top: 16px; right: 16px;
width: 44px; height: 44px;
background: var(--liquourice);
border: 1px solid var(--caput);
display: flex; align-items: center; justify-content: center;
color: var(--bronze); font-size: 22px;
z-index: 3;
}
.gallery__wishlist:hover { background: var(--sienna); color: var(--light); }
.gallery__zoom-hint {
position: absolute;
bottom: 16px; left: 16px;
background: rgba(27,19,20,0.82);
color: var(--light);
padding: 6px 12px;
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid var(--caput);
z-index: 3;
}
.gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s3);
margin: var(--s5) 3px 0;
}
.gallery__thumb {
aspect-ratio: 1/1;
position: relative;
border: 1px solid var(--caput);
overflow: hidden;
}
.gallery__thumb--active {
outline: 1px solid var(--sienna);
outline-offset: 2px;
}
.gallery__thumb::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 28%, rgba(255,255,255,0.35), transparent 55%),
var(--thumb-bg, linear-gradient(135deg, #4a3a35, #1f1314));
}
.gallery__thumb:nth-child(2)::before { --thumb-bg: linear-gradient(135deg, #3a3530, #1a1310); }
.gallery__thumb:nth-child(3)::before { --thumb-bg: linear-gradient(135deg, #5a4030, #2a1d12); }
.gallery__thumb:nth-child(4)::before { --thumb-bg: linear-gradient(135deg, #45352a, #1c1208); }
.gallery__thumb::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
opacity: 0.85;
mix-blend-mode: overlay;
pointer-events: none;
}
.gallery__thumb-label {
position: absolute;
bottom: 6px; left: 6px;
font-family: var(--font-eyebrow);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
z-index: 2;
}
/* PURCHASE COLUMN */
.purchase { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s2); }
.purchase__title {
font-family: var(--font-display);
font-size: var(--t-h2);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.005em;
color: var(--caput);
margin-top: var(--s2);
}
.purchase__rating { display: flex; align-items: center; gap: var(--s3); }
.purchase__stars { color: var(--sienna); font-size: 20px; letter-spacing: 1px; }
.purchase__rating-num { font-family: var(--font-display); font-weight: 800; color: var(--caput); }
.purchase__review-link {
font-family: var(--font-eyebrow);
font-size: var(--t-eyebrow);
letter-spacing: 0.12em;
text-transform: uppercase;
border-bottom: 1px solid var(--caput);
color: var(--caput);
}
.purchase__shortdesc {
font-family: var(--font-body);
font-size: var(--t-body-lg);
line-height: 1.45;
font-style: italic;
color: var(--caput);
padding-left: var(--s4);
border-left: 2px solid var(--sienna);
margin: var(--s2) 0 var(--s2);
}
/* ===== BRUSHED-STEEL ATC PANEL — the focal mechanism ===== */
.atc-panel {
position: relative;
padding: var(--s6);
margin-top: var(--s3);
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 38%, rgba(0,0,0,0.06) 100%),
repeating-linear-gradient(90deg,
rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px,
transparent 1px, transparent 2px,
rgba(97,63,52,0.05) 2px, rgba(97,63,52,0.05) 3px,
transparent 3px, transparent 4px),
radial-gradient(ellipse at 38% 22%, #E0CDB8 0%, var(--rodeo-light) 45%, var(--rodeo) 100%);
box-shadow: 0 1px 0 var(--caput);
}
.atc-panel::after {
content: ''; position: absolute; inset: 0;
background-image: var(--leather-noise);
pointer-events: none;
}
.atc-panel > * { position: relative; z-index: 1; }
.price { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.price__current {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
color: var(--sienna);
letter-spacing: -0.015em;
line-height: 1;
}
.price__rrp {
font-family: var(--font-display);
font-size: 24px;
color: var(--caput);
text-decoration: line-through;
opacity: 0.7;
}
.price__save {
background: var(--sienna);
color: var(--light);
font-family: var(--font-eyebrow);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 11px;
border: 1px solid var(--caput);
}
.loyalty-roundel {
display: flex; align-items: center; gap: var(--s4);
background: var(--bronze);
color: var(--liquourice);
padding: var(--s3) var(--s4);
border: 1px solid var(--caput);
margin-top: var(--s4);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.35;
}
.loyalty-roundel__coin {
width: 54px; height: 54px;
border-radius: 50%;
background: var(--liquourice);
display: flex; align-items: center; justify-content: center;
flex-direction: column;
border: 2px solid var(--liquourice);
box-shadow: 0 0 0 1px var(--bronze), 0 0 0 3px var(--liquourice), 0 0 0 4px var(--bronze);
flex-shrink: 0;
}
.loyalty-roundel__coin strong {
font-family: var(--font-display);
font-weight: 800;
font-size: 16px;
color: var(--bronze);
line-height: 1;
}
.loyalty-roundel__coin em {
font-family: var(--font-eyebrow);
font-size: 9px;
letter-spacing: 0.12em;
color: var(--bronze);
font-style: italic;
line-height: 1;
margin-top: 2px;
}
.loyalty-roundel__copy strong {
font-family: var(--font-display);
font-weight: 800;
color: var(--liquourice);
}
.variation { margin-top: var(--s4); }
.variation__label {
font-family: var(--font-eyebrow);
font-size: var(--t-eyebrow);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--caput);
margin-bottom: 6px;
display: block;
font-style: italic;
}
.variation__options { display: flex; gap: var(--s2); flex-wrap: wrap; }
.variation__opt {
font-family: var(--font-body);
font-size: 15px;
padding: 8px 14px;
border: 1px solid var(--caput);
background: transparent;
color: var(--caput);
}
.variation__opt--active {
background: var(--caput);
color: var(--light);
box-shadow: var(--sh-sm);
}
.in-stock {
display: flex; align-items: center; gap: var(--s3);
margin-top: var(--s4);
font-family: var(--font-body);
font-size: 16px;
color: var(--caput);
font-weight: 600;
}
.in-stock__dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--positive);
box-shadow: 0 0 0 3px rgba(74,110,80,0.22);
flex-shrink: 0;
}
.purchase-row {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s3);
margin-top: var(--s5);
}
.qty-stepper {
display: flex;
border: 1px solid var(--caput);
background: rgba(255,255,255,0.18);
}
.qty-stepper button {
width: 42px; height: 56px;
background: transparent;
border: none;
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
color: var(--caput);
}
.qty-stepper button:hover { background: rgba(97,63,52,0.12); }
.qty-stepper input {
width: 50px;
text-align: center;
border: none;
background: transparent;
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
color: var(--caput);
}
.btn-atc {
background: var(--sienna);
color: var(--light);
border: 1px solid var(--caput);
font-family: var(--font-display);
font-weight: 800;
font-size: 19px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0 var(--s5);
box-shadow: var(--sh-md);
height: 56px;
display: flex; align-items: center; justify-content: center; gap: var(--s2);
}
.btn-atc:hover { background: #6b240f; }
.btn-atc__sep { opacity: 0.6; font-weight: 400; }
.express {
display: flex; gap: var(--s2);
margin-top: var(--s4);
align-items: center;
flex-wrap: wrap;
}
.express__label {
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--caput);
margin-right: var(--s2);
font-style: italic;
}
.express__btn {
height: 40px;
padding: 0 14px;
background: var(--liquourice);
color: var(--light);
border: 1px solid var(--caput);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
display: flex; align-items: center;
}
.express__btn--klarna { background: #FFB3C7; color: var(--liquourice); }
.delivery-meter {
margin-top: var(--s5);
background: rgba(255,255,255,0.22);
border: 1px solid var(--caput);
padding: var(--s3) var(--s4);
}
.delivery-meter__copy {
font-family: var(--font-body);
font-size: 14px;
color: var(--caput);
margin-bottom: 8px;
line-height: 1.4;
}
.delivery-meter__copy strong { color: var(--sienna); font-family: var(--font-display); font-weight: 800; }
.delivery-meter__bar {
height: 7px;
background: rgba(97,63,52,0.18);
border: 1px solid var(--caput);
overflow: hidden;
}
.delivery-meter__fill {
height: 100%; width: 100%;
background: var(--positive);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.purchase__secondary {
display: flex; gap: var(--s5);
margin-top: var(--s4);
flex-wrap: wrap;
}
.purchase__secondary a {
font-family: var(--font-eyebrow);
font-size: var(--t-eyebrow);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--caput);
border-bottom: 1px solid var(--caput);
padding-bottom: 1px;
}
.purchase__secondary a:hover { color: var(--sienna); border-color: var(--sienna); }
/* ===== TRUST STRIP ===== */
.trust-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s5);
padding: var(--s5) 4px;
}
.trust-cell {
position: relative;
padding: var(--s6) var(--s4);
background: var(--rodeo-light);
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
text-align: center;
overflow: hidden;
}
.trust-cell::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
pointer-events: none;
mix-blend-mode: multiply;
}
.trust-cell > * { position: relative; z-index: 1; }
.trust-cell__icon {
width: 60px; height: 60px;
margin: 0 auto var(--s3);
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--bronze);
background: var(--liquourice);
}
.trust-cell__icon svg { stroke: var(--bronze); stroke-width: 1.4; fill: none; }
.trust-cell__title {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
color: var(--caput);
margin-bottom: 4px;
letter-spacing: 0.02em;
line-height: 1.2;
}
.trust-cell__copy {
font-family: var(--font-body);
font-size: 14px;
color: var(--caput);
font-style: italic;
line-height: 1.4;
}
/* ===== SECTION HEAD ===== */
.section-head { margin-bottom: var(--s7); max-width: 880px; }
.section-head__eyebrow { margin-bottom: var(--s3); }
.section-head__title {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--t-h3);
color: var(--caput);
letter-spacing: -0.005em;
line-height: 1.1;
}
.section-head__lede {
font-family: var(--font-body);
font-size: 17px;
font-style: italic;
color: var(--caput);
margin-top: var(--s3);
max-width: 720px;
line-height: 1.5;
}
/* ===== TABS ===== */
.tabs { margin-bottom: var(--s5); }
.tabs__nav {
display: flex;
gap: 0;
border-bottom: 1px solid var(--caput);
margin-bottom: var(--s6);
flex-wrap: wrap;
}
.tabs__tab {
padding: var(--s4) var(--s5) var(--s3);
font-family: var(--font-display);
font-weight: 800;
font-size: 17px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--caput);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
position: relative;
}
.tabs__tab--active {
border-bottom: 2px solid var(--sienna);
color: var(--sienna);
}
.tabs__tab--active::before {
content: 'Open';
position: absolute;
top: 0;
left: var(--s5);
font-family: var(--font-eyebrow);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--sienna);
font-style: italic;
text-transform: uppercase;
padding: 0 4px;
border-bottom: 1px solid var(--sienna);
}
.tabs__panel {
position: relative;
padding: var(--s7);
background: var(--rodeo);
border: 1px solid var(--caput);
margin-bottom: var(--s5);
overflow: hidden;
}
.tabs__panel::before {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
pointer-events: none;
mix-blend-mode: multiply;
}
.tabs__panel > * { position: relative; z-index: 1; }
.tabs__panel-eyebrow { margin-bottom: var(--s4); }
.tabs__panel-title {
font-family: var(--font-display);
font-size: var(--t-h3);
font-weight: 800;
color: var(--caput);
margin-bottom: var(--s5);
line-height: 1.1;
letter-spacing: -0.005em;
max-width: 760px;
}
.tabs__panel p { margin-bottom: var(--s4); font-size: var(--t-body); max-width: 760px; }
.tabs__panel ul { padding-left: var(--s5); margin-bottom: var(--s4); }
.tabs__panel li { margin-bottom: var(--s2); }
.tabs__panel ul ul { margin-top: var(--s2); margin-bottom: var(--s2); }
.box-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--s7);
align-items: start;
}
.box-grid__schematic {
border: 1px solid var(--caput);
padding: var(--s4);
background: var(--rodeo-light);
text-align: center;
}
.box-grid__schematic-label {
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--caput);
margin-top: var(--s2);
font-style: italic;
}
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.spec-row {
display: grid;
grid-template-columns: 170px 1fr;
gap: var(--s4);
padding: var(--s3) 0;
border-bottom: 1px solid rgba(97,63,52,0.28);
align-items: baseline;
}
.spec-row__label {
font-family: var(--font-eyebrow);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sienna);
font-style: italic;
}
.spec-row__value {
font-family: var(--font-body);
font-size: 16px;
color: var(--caput);
}
/* REVIEWS */
.reviews-summary {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s7);
margin-bottom: var(--s7);
align-items: center;
}
.reviews-avg {
text-align: center;
padding-right: var(--s7);
border-right: 1px solid var(--caput);
}
.reviews-avg__num {
font-family: var(--font-display);
font-size: 80px;
font-weight: 800;
line-height: 1;
color: var(--sienna);
letter-spacing: -0.02em;
}
.reviews-avg__stars { font-size: 22px; color: var(--sienna); letter-spacing: 2px; margin-top: 4px; }
.reviews-avg__count {
font-family: var(--font-eyebrow);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--caput);
margin-top: 6px;
font-style: italic;
}
.review-distribution { display: flex; flex-direction: column; gap: 8px; }
.review-bar { display: grid; grid-template-columns: 64px 1fr 40px; gap: var(--s3); align-items: center; font-size: 14px; color: var(--caput); }
.review-bar__track {
height: 8px;
background: var(--rodeo-light);
border: 1px solid var(--caput);
}
.review-bar__fill { height: 100%; background: var(--sienna); }
.review-bar__count { font-family: var(--font-display); font-weight: 700; text-align: right; }
.review-list { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s5); }
.review {
padding: var(--s5);
border: 1px solid var(--caput);
background: var(--rodeo-light);
position: relative;
overflow: hidden;
}
.review::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
pointer-events: none;
mix-blend-mode: multiply;
}
.review > * { position: relative; z-index: 1; }
.review__head { display: flex; gap: var(--s4); justify-content: space-between; align-items: baseline; margin-bottom: var(--s2); flex-wrap: wrap; }
.review__name { font-family: var(--font-display); font-weight: 800; color: var(--caput); font-size: 17px; }
.review__date { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.12em; color: var(--caput); text-transform: uppercase; font-style: italic; }
.review__stars { color: var(--sienna); margin-bottom: var(--s2); letter-spacing: 1px; }
.review__body { font-style: italic; color: var(--caput); font-size: 16px; line-height: 1.5; }
.review__helpful { margin-top: var(--s3); font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--caput); font-style: italic; }
.review__helpful a { border-bottom: 1px solid var(--caput); }
.btn-ghost {
display: inline-block;
padding: var(--s3) var(--s5);
border: 2px solid var(--sienna);
background: transparent;
color: var(--sienna);
font-family: var(--font-display);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 14px;
margin-top: var(--s2);
}
.btn-ghost:hover { background: var(--sienna); color: var(--light); }
/* ===== UGC (Painted by the Community) ===== */
.ugc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s4); }
.ugc-tile {
aspect-ratio: 1/1;
position: relative;
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
overflow: hidden;
}
.ugc-tile__photo {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 28%, rgba(255,255,255,0.22), transparent 55%),
linear-gradient(140deg, var(--photo-from, #4a3a2a), var(--photo-to, #2a1a1a));
}
.ugc-tile--p1 { --photo-from: #2a4570; --photo-to: #0e1c30; }
.ugc-tile--p2 { --photo-from: #6e1f1c; --photo-to: #2a0d0a; }
.ugc-tile--p3 { --photo-from: #2a4a35; --photo-to: #102015; }
.ugc-tile--p4 { --photo-from: #b88a25; --photo-to: #5a3f10; }
.ugc-tile--p5 { --photo-from: #3a5a2a; --photo-to: #18250e; }
.ugc-tile--p6 { --photo-from: #5a3a55; --photo-to: #20132a; }
.ugc-tile__figure {
position: absolute;
inset: 12% 18%;
z-index: 1;
opacity: 0.55;
}
.ugc-tile::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain-strong);
pointer-events: none;
mix-blend-mode: overlay;
z-index: 2;
}
.ugc-tile__caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: rgba(20,12,12,0.82);
color: var(--light);
padding: var(--s3) var(--s4);
z-index: 3;
border-top: 1px solid var(--caput);
font-family: var(--font-body);
}
.ugc-tile__caption::before {
content: ''; position: absolute;
top: -3px; left: 0; right: 0;
height: 1px;
background: var(--caput);
}
.ugc-tile__caption strong {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.03em;
color: var(--bronze);
display: block;
font-weight: 800;
line-height: 1.2;
}
.ugc-tile__caption em {
font-family: var(--font-eyebrow);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-style: italic;
color: var(--rodeo);
display: block;
margin-top: 2px;
}
.ugc-cta { text-align: center; margin-top: var(--s6); }
/* ===== CROSS-SELL ===== */
.cross-sell { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.product-card {
position: relative;
padding: var(--s5);
background: var(--rodeo-light);
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
overflow: hidden;
display: flex; flex-direction: column;
}
.product-card::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
pointer-events: none;
mix-blend-mode: multiply;
}
.product-card > * { position: relative; z-index: 1; }
.product-card__media {
aspect-ratio: 1/1;
background:
radial-gradient(ellipse at 35% 25%, rgba(255,255,255,0.45), transparent 55%),
linear-gradient(180deg, var(--rodeo) 0%, var(--rodeo-light) 100%);
border: 1px solid var(--caput);
margin-bottom: var(--s4);
position: relative;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.product-card__media-shape {
width: 55%;
height: 65%;
background: linear-gradient(180deg, var(--shape-from, #832D15) 0%, var(--shape-to, #4a1808) 100%);
border-radius: 4px;
box-shadow: var(--sh-sm);
border: 1px solid rgba(27,19,20,0.6);
}
.product-card--paint .product-card__media-shape {
width: 32%;
height: 70%;
border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px;
}
.product-card--tool .product-card__media-shape {
width: 76%;
height: 14%;
border-radius: 3px;
background: linear-gradient(180deg, #c9b48a, #7a6539);
}
.product-card__eyebrow {
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sienna);
font-style: italic;
margin-bottom: 6px;
}
.product-card__title {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
color: var(--caput);
line-height: 1.2;
margin-bottom: 6px;
}
.product-card__sub {
font-family: var(--font-body);
font-size: 14px;
font-style: italic;
color: var(--caput);
margin-bottom: var(--s3);
opacity: 0.88;
line-height: 1.4;
}
.product-card__price {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
color: var(--sienna);
margin-top: auto;
margin-bottom: var(--s3);
line-height: 1;
}
.product-card__atc {
position: relative;
padding: 8px;
background:
linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 50%),
repeating-linear-gradient(90deg,
rgba(255,255,255,0.05) 0 1px, transparent 1px 2px,
rgba(97,63,52,0.04) 2px 3px, transparent 3px 4px),
radial-gradient(ellipse at 40% 30%, #DDC8B0, var(--rodeo));
border: 1px solid var(--caput);
text-align: center;
}
.product-card__atc-btn {
display: block;
background: var(--sienna);
color: var(--light);
padding: 8px 14px;
font-family: var(--font-display);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--caput);
box-shadow: var(--sh-sm);
}
/* ===== WORKBENCH SECTION (DARK COWBOY BAND) ===== */
.workbench-section {
background: var(--cowboy);
color: var(--light);
padding: var(--s9) 0;
margin: var(--s9) 0;
position: relative;
overflow: hidden;
}
.workbench-section::before {
content: ''; position: absolute; inset: 0;
background-image: var(--leather-noise);
pointer-events: none;
}
.workbench-section::after {
content: ''; position: absolute; inset: 0;
background-image: 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-width='1.4'><circle cx='80' cy='80' r='34'/><circle cx='80' cy='80' r='22'/><circle cx='80' cy='80' r='5'/><g stroke-linecap='round'><line x1='80' y1='34' x2='80' y2='44'/><line x1='80' y1='116' x2='80' y2='126'/><line x1='34' y1='80' x2='44' y2='80'/><line x1='116' y1='80' x2='126' y2='80'/><line x1='49' y1='49' x2='56' y2='56'/><line x1='104' y1='104' x2='111' y2='111'/><line x1='49' y1='111' x2='56' y2='104'/><line x1='104' y1='56' x2='111' y2='49'/></g><circle cx='230' cy='220' r='26'/><circle cx='230' cy='220' r='16'/><circle cx='230' cy='220' r='4'/><g stroke-linecap='round'><line x1='230' y1='188' x2='230' y2='196'/><line x1='230' y1='244' x2='230' y2='252'/><line x1='198' y1='220' x2='206' y2='220'/><line x1='254' y1='220' x2='262' y2='220'/></g></g></svg>");
background-size: 360px 360px;
background-repeat: repeat;
opacity: 0.04;
pointer-events: none;
}
.workbench-section > .container { position: relative; z-index: 1; }
.workbench-section .section-head__title { color: var(--light); }
.workbench-section .section-head__lede { color: var(--rodeo); }
.workbench-section .eyebrow {
color: var(--bronze);
border-color: var(--bronze);
}
.workbench-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
.workbench-card {
position: relative;
background: var(--liquourice);
border: 1px solid var(--bronze);
outline: 1px solid var(--bronze);
outline-offset: 3px;
overflow: hidden;
display: grid;
grid-template-columns: 220px 1fr;
}
.workbench-card__media {
position: relative;
background:
radial-gradient(ellipse at 35% 30%, rgba(244,164,121,0.32), transparent 65%),
linear-gradient(160deg, #3e2622 0%, #15080a 100%);
min-height: 220px;
}
.workbench-card__media::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
mix-blend-mode: overlay;
pointer-events: none;
}
.workbench-card__media-art {
position: absolute;
inset: 20%;
display: flex;
align-items: center; justify-content: center;
}
.workbench-card__body { padding: var(--s5); display: flex; flex-direction: column; }
.workbench-card__meta { display: flex; gap: var(--s3); margin-bottom: var(--s3); align-items: center; flex-wrap: wrap; }
.workbench-card__diff {
background: var(--sienna);
color: var(--light);
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 10px;
border: 1px solid var(--bronze);
}
.workbench-card__time {
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bronze);
font-style: italic;
}
.workbench-card__eyebrow {
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--bronze);
font-style: italic;
text-transform: uppercase;
margin-bottom: 6px;
border-bottom: 1px solid var(--bronze);
display: inline-block;
padding-bottom: 2px;
}
.workbench-card__title {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
color: var(--light);
line-height: 1.2;
margin: 6px 0 var(--s3);
letter-spacing: -0.005em;
}
.workbench-card__sub {
font-family: var(--font-body);
font-size: 15px;
color: var(--rodeo);
font-style: italic;
margin-bottom: var(--s4);
line-height: 1.5;
}
.workbench-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bronze);
margin-top: auto;
border-bottom: 1px solid var(--bronze);
padding-bottom: 3px;
align-self: flex-start;
}
.workbench-card__cta::after { content: '\2192'; }
/* ===== RELATED ===== */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
/* ===== RECENTLY VIEWED ===== */
.recent-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.recent-card {
position: relative;
border: 1px solid var(--caput);
background: var(--rodeo);
overflow: hidden;
display: grid;
grid-template-columns: 72px 1fr;
align-items: center;
padding: var(--s2);
gap: var(--s3);
}
.recent-card::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
pointer-events: none;
mix-blend-mode: multiply;
}
.recent-card > * { position: relative; z-index: 1; }
.recent-card__media {
aspect-ratio: 1/1;
background:
radial-gradient(ellipse at 30% 28%, rgba(255,255,255,0.32), transparent 60%),
linear-gradient(160deg, var(--media-from, var(--rodeo-light)), var(--media-to, var(--rodeo)));
border: 1px solid var(--caput);
}
.recent-card:nth-child(1) .recent-card__media { --media-from: #3a5070; --media-to: #1a2535; }
.recent-card:nth-child(2) .recent-card__media { --media-from: #c0a570; --media-to: #6a4f25; }
.recent-card:nth-child(3) .recent-card__media { --media-from: #5e4a35; --media-to: #2a1f15; }
.recent-card:nth-child(4) .recent-card__media { --media-from: #4a4540; --media-to: #1f1c18; }
.recent-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
color: var(--caput);
line-height: 1.2;
}
.recent-card__price {
font-family: var(--font-display);
font-weight: 800;
font-size: 15px;
color: var(--sienna);
margin-top: 4px;
}
/* ===== NEWSLETTER ===== */
.newsletter {
background: var(--rodeo-light);
border-top: 1px solid var(--caput);
border-bottom: 1px solid var(--caput);
padding: var(--s7) 0;
position: relative;
overflow: hidden;
margin-top: var(--s9);
}
.newsletter::after {
content: ''; position: absolute; inset: 0;
background-image: var(--paper-grain);
pointer-events: none;
mix-blend-mode: multiply;
}
.newsletter__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s7);
align-items: center;
position: relative;
z-index: 1;
}
.newsletter__title {
font-family: var(--font-display);
font-weight: 800;
font-size: 32px;
color: var(--caput);
letter-spacing: -0.005em;
line-height: 1.1;
}
.newsletter__sub {
font-family: var(--font-body);
font-size: 16px;
color: var(--caput);
font-style: italic;
margin-top: 6px;
}
.newsletter__form { display: flex; gap: var(--s2); }
.newsletter__input {
height: 52px;
padding: 0 var(--s4);
width: 320px;
border: 1px solid var(--caput);
background: var(--light);
font-family: var(--font-body);
font-size: 16px;
color: var(--caput);
}
.newsletter__btn {
background: var(--sienna);
color: var(--light);
border: 1px solid var(--caput);
font-family: var(--font-display);
font-weight: 800;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0 var(--s6);
box-shadow: var(--sh-sm);
}
/* ===== FOOTER ===== */
.footer {
background: var(--liquourice);
color: var(--light);
padding: var(--s9) 0 var(--s5);
position: relative;
margin-top: 0;
}
.footer::before {
content: ''; position: absolute; inset: 0;
background-image: var(--leather-noise);
pointer-events: none;
}
.footer > .container { position: relative; }
.footer__cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--s7);
padding-bottom: var(--s7);
border-bottom: 1px solid var(--caput);
}
.footer__brand {
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
color: var(--bronze);
letter-spacing: 0.06em;
margin-bottom: var(--s3);
text-transform: uppercase;
}
.footer__lede {
font-family: var(--font-body);
font-size: 15px;
font-style: italic;
color: var(--rodeo);
line-height: 1.55;
margin-bottom: var(--s4);
}
.footer__badge-tag {
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bronze);
font-style: italic;
border: 1px solid var(--bronze);
padding: 6px 12px;
display: inline-block;
}
.footer__col-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
margin-bottom: var(--s4);
padding-bottom: var(--s2);
border-bottom: 1px solid var(--caput);
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 10px; }
.footer__col a {
font-family: var(--font-body);
font-size: 15px;
color: var(--rodeo);
}
.footer__col a:hover { color: var(--bronze); }
.footer__base {
padding-top: var(--s5);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s5);
flex-wrap: wrap;
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rodeo);
}
.footer__pay { display: flex; gap: 6px; align-items: center; }
.footer__pay span {
display: inline-block;
padding: 5px 10px;
border: 1px solid var(--caput);
background: var(--cowboy);
color: var(--bronze);
font-size: 10px;
letter-spacing: 0.12em;
}
.footer__legal a { border-bottom: 1px solid var(--caput); padding-bottom: 1px; }
.footer__legal a:hover { color: var(--bronze); border-color: var(--bronze); }
/* ===== STICKY MOBILE ATC ===== */
.sticky-atc {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 100;
display: grid;
grid-template-columns: 56px 1fr auto;
gap: var(--s3);
align-items: center;
padding: 10px 16px;
background:
linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 40%, rgba(0,0,0,0.06) 100%),
repeating-linear-gradient(90deg,
rgba(255,255,255,0.06) 0 1px, transparent 1px 2px,
rgba(97,63,52,0.04) 2px 3px, transparent 3px 4px),
radial-gradient(ellipse at 40% 25%, #E0CDB8, var(--rodeo));
border-top: 1px solid var(--caput);
}
.sticky-atc::before {
content: ''; position: absolute;
top: -3px; left: 0; right: 0;
height: 1px;
background: var(--caput);
}
.sticky-atc::after {
content: ''; position: absolute; inset: 0;
background-image: var(--leather-noise);
pointer-events: none;
}
.sticky-atc > * { position: relative; z-index: 1; }
.sticky-atc__thumb {
width: 56px; height: 56px;
background:
radial-gradient(ellipse at 30% 28%, rgba(255,255,255,0.32), transparent 55%),
linear-gradient(140deg, #4a3a35, #1f1418);
border: 1px solid var(--caput);
}
.sticky-atc__meta { display: flex; flex-direction: column; min-width: 0; }
.sticky-atc__title {
font-family: var(--font-display);
font-weight: 800;
font-size: 13px;
color: var(--caput);
line-height: 1.1;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sticky-atc__row { display: flex; align-items: baseline; gap: var(--s2); margin-top: 2px; }
.sticky-atc__price {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
color: var(--sienna);
line-height: 1;
}
.sticky-atc__stock {
font-family: var(--font-body);
font-size: 11px;
color: var(--caput);
font-style: italic;
}
.sticky-atc__btn {
background: var(--sienna);
color: var(--light);
border: 1px solid var(--caput);
font-family: var(--font-display);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 14px 18px;
box-shadow: var(--sh-sm);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.product-header { grid-template-columns: 1fr; gap: var(--s7); }
.trust-strip { grid-template-columns: repeat(2, 1fr); }
.ugc-grid { grid-template-columns: repeat(3, 1fr); }
.cross-sell, .related-grid { grid-template-columns: repeat(2, 1fr); }
.workbench-grid { grid-template-columns: 1fr; }
.recent-strip { grid-template-columns: repeat(2, 1fr); }
.footer__cols { grid-template-columns: 1fr 1fr; }
.header__nav { display: none; }
.header__inner { grid-template-columns: auto 1fr; }
.newsletter__inner { grid-template-columns: 1fr; }
.newsletter__input { width: 100%; }
.reviews-summary { grid-template-columns: 1fr; }
.reviews-avg { border-right: none; border-bottom: 1px solid var(--caput); padding: 0 0 var(--s4) 0; }
.box-grid, .spec-grid { grid-template-columns: 1fr; }
.container { padding: 0 24px; }
.purchase__title { font-size: 40px; }
.price__current { font-size: 46px; }
.workbench-card { grid-template-columns: 1fr; }
.workbench-card__media { min-height: 200px; }
}
@media (max-width: 560px) {
.trust-strip { grid-template-columns: 1fr; }
.ugc-grid { grid-template-columns: repeat(2, 1fr); }
.cross-sell, .related-grid, .recent-strip { grid-template-columns: 1fr; }
.footer__cols { grid-template-columns: 1fr; }
.tabs__nav { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; }
.tabs__tab { flex-shrink: 0; }
.purchase-row { grid-template-columns: 1fr; }
.qty-stepper { justify-self: start; }
.announcement__inner { gap: var(--s3); font-size: 11px; }
.container { padding: 0 20px; }
.purchase__title { font-size: 34px; }
.price__current { font-size: 40px; }
.atc-panel { padding: var(--s5); }
.tabs__panel { padding: var(--s5); }
.reviews-avg__num { font-size: 60px; }
.newsletter__title { font-size: 26px; }
.footer__base { justify-content: flex-start; gap: var(--s4); }
}
</style>
</head>
<body>
<!-- 1. Pre-header announcement bar -->
<div class="announcement">
<div class="announcement__inner">
<span class="announcement__item">Free UK shipping over £75</span>
<span class="announcement__sep">·</span>
<span class="announcement__item announcement__item--mid">Loyalty points spend across all Nerdworks brands</span>
<span class="announcement__sep">·</span>
<span class="announcement__item">Combat Patrol restocks landing this week</span>
</div>
</div>
<!-- 2. Global header -->
<header class="header">
<div class="header__inner">
<a href="#" class="header__brand">
<span class="header__brand-mark">W</span>
<span>War Dungeon</span>
</a>
<nav class="header__nav">
<a href="#">Warhammer</a>
<a href="#">D&D</a>
<a href="#">Painting & Hobby</a>
<a href="#">Tools</a>
<a href="#">Workbench</a>
</nav>
<div class="header__utility">
<a class="header__icon" href="#">Search</a>
<a class="header__icon" href="#">Account</a>
<a class="header__icon header__cart" href="#">Saddlebag <span class="header__cart-badge">2 · 1,420 pts</span></a>
</div>
</div>
</header>
<!-- 3. Breadcrumbs -->
<div class="container">
<nav class="breadcrumbs">
<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__current">Combat Patrol: Space Marines</span>
</nav>
</div>
<!-- 4. Product header (gallery + purchase) -->
<main class="container">
<section class="product-header">
<!-- Gallery -->
<div class="gallery">
<div class="gallery__main">
<div class="gallery__placeholder">
<svg width="170" height="210" viewBox="0 0 170 210" fill="none" aria-hidden="true">
<rect x="60" y="14" width="50" height="22" rx="3" stroke="rgba(255,255,255,0.55)" stroke-width="2"/>
<rect x="46" y="40" width="78" height="56" rx="6" stroke="rgba(255,255,255,0.60)" stroke-width="2"/>
<rect x="30" y="56" width="22" height="36" stroke="rgba(255,255,255,0.40)" stroke-width="2"/>
<rect x="118" y="56" width="22" height="36" stroke="rgba(255,255,255,0.40)" stroke-width="2"/>
<rect x="54" y="102" width="62" height="60" stroke="rgba(255,255,255,0.55)" stroke-width="2"/>
<rect x="54" y="164" width="22" height="38" stroke="rgba(255,255,255,0.40)" stroke-width="2"/>
<rect x="94" y="164" width="22" height="38" stroke="rgba(255,255,255,0.40)" stroke-width="2"/>
<line x1="20" y1="200" x2="150" y2="200" stroke="rgba(255,255,255,0.35)" stroke-width="1"/>
</svg>
<span class="gallery__placeholder-label">Hero photograph · Combat Patrol assembled and primed</span>
</div>
<button class="gallery__wishlist" aria-label="Add to wishlist">♥</button>
<div class="gallery__zoom-hint">Click to zoom · 1500×1875</div>
</div>
<div class="gallery__thumbs">
<div class="gallery__thumb gallery__thumb--active"><span class="gallery__thumb-label">Front</span></div>
<div class="gallery__thumb"><span class="gallery__thumb-label">Angle</span></div>
<div class="gallery__thumb"><span class="gallery__thumb-label">Scale</span></div>
<div class="gallery__thumb"><span class="gallery__thumb-label">Painted</span></div>
</div>
</div>
<!-- Purchase column -->
<div class="purchase">
<span class="eyebrow">Warhammer 40,000 · Space Marines</span>
<h1 class="purchase__title">Combat Patrol: Space Marines</h1>
<div class="purchase__rating">
<span class="purchase__stars" aria-label="4.8 out of 5">★★★★★</span>
<span class="purchase__rating-num">4.8</span>
<a href="#reviews" class="purchase__review-link">124 reviews</a>
</div>
<p class="purchase__shortdesc">Ten miniatures. One starter army. Every chapter in the Imperium under one box. Push-fit, paint-ready, on your gaming table by sundown.</p>
<!-- BRUSHED-STEEL ATC PANEL (the focal mechanism) -->
<div class="atc-panel">
<div class="price">
<span class="price__current">£119.00</span>
<span class="price__rrp">£135.00</span>
<span class="price__save">Save £16</span>
</div>
<div class="loyalty-roundel">
<span class="loyalty-roundel__coin">
<strong>595</strong>
<em>pts</em>
</span>
<span class="loyalty-roundel__copy">Earn <strong>595 loyalty points</strong> on this kit — redeemable across Nerdworks, ArtSabers, Paragon and here.</span>
</div>
<div class="variation">
<label class="variation__label">Configuration</label>
<div class="variation__options">
<button class="variation__opt variation__opt--active">Standard Box</button>
<button class="variation__opt">+ Primer Add-on</button>
<button class="variation__opt">+ Chapter Decal Pack</button>
</div>
</div>
<div class="in-stock">
<span class="in-stock__dot"></span>
<span>In stock — ships within 24h, weather permitting.</span>
</div>
<div class="purchase-row">
<div class="qty-stepper">
<button aria-label="Decrease quantity">−</button>
<input type="text" value="1" aria-label="Quantity">
<button aria-label="Increase quantity">+</button>
</div>
<button class="btn-atc">Add to Saddlebag <span class="btn-atc__sep">·</span> £119.00</button>
</div>
<div class="express">
<span class="express__label">Or saddle up with</span>
<button class="express__btn"> Pay</button>
<button class="express__btn">G Pay</button>
<button class="express__btn">Shop Pay</button>
<button class="express__btn express__btn--klarna">Klarna · 3</button>
</div>
<div class="delivery-meter">
<p class="delivery-meter__copy"><strong>Free UK shipping unlocked.</strong> You're £44 clear of the £75 threshold — saddlebag rides home on us.</p>
<div class="delivery-meter__bar"><div class="delivery-meter__fill"></div></div>
</div>
<div class="purchase__secondary">
<a href="#">Ask the shopkeeper</a>
<a href="#">Compare kits</a>
<a href="#">Save to wishlist</a>
</div>
</div>
</div>
</section>
</main>
<hr class="distress-divider">
<!-- 5. Universal trust strip -->
<section class="container">
<div class="trust-strip">
<div class="trust-cell">
<div class="trust-cell__icon">
<svg width="30" height="30" viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><circle cx="16" cy="16" r="4"/><line x1="16" y1="3" x2="16" y2="8"/><line x1="16" y1="24" x2="16" y2="29"/><line x1="3" y1="16" x2="8" y2="16"/><line x1="24" y1="16" x2="29" y2="16"/></svg>
</div>
<div class="trust-cell__title">Free UK Shipping</div>
<div class="trust-cell__copy">On every order over £75. Rides out the same day.</div>
</div>
<div class="trust-cell">
<div class="trust-cell__icon">
<svg width="30" height="30" viewBox="0 0 32 32"><rect x="5" y="8" width="22" height="17" rx="1"/><path d="M5 13h22"/><circle cx="10" cy="19" r="1.5"/><path d="M14 4l-2 4 8 0 -2 -4"/></svg>
</div>
<div class="trust-cell__title">30-Day Returns</div>
<div class="trust-cell__copy">If the kit doesn't suit the bench, send it back.</div>
</div>
<div class="trust-cell">
<div class="trust-cell__icon">
<svg width="30" height="30" viewBox="0 0 32 32"><path d="M16 4l3.3 7.2 7.7 1 -5.6 5.5 1.3 7.7 -6.7 -3.5 -6.7 3.5 1.3 -7.7 -5.6 -5.5 7.7 -1z"/></svg>
</div>
<div class="trust-cell__title">Multi-Game Expertise</div>
<div class="trust-cell__copy">40K, Sigmar, Old World, D&D — we play 'em too.</div>
</div>
<div class="trust-cell">
<div class="trust-cell__icon">
<svg width="30" height="30" viewBox="0 0 32 32"><circle cx="16" cy="12" r="6"/><path d="M6 27c0-5 4-8 10-8s10 3 10 8"/></svg>
</div>
<div class="trust-cell__title">A Nerdworks Brand</div>
<div class="trust-cell__copy">Family-owned, four storefronts, one loyalty book.</div>
</div>
</div>
</section>
<hr class="distress-divider">
<!-- 6. Tabs -->
<section class="container tabs">
<div class="tabs__nav">
<button class="tabs__tab tabs__tab--active">Description</button>
<button class="tabs__tab">What's in the box</button>
<button class="tabs__tab">Specifications</button>
<button class="tabs__tab">Reviews (124)</button>
</div>
<!-- Description -->
<div class="tabs__panel">
<span class="eyebrow tabs__panel-eyebrow">The Shopkeeper's Take</span>
<h3 class="tabs__panel-title">One box, ten Marines, every chapter on the table by sundown.</h3>
<p>Combat Patrol: Space Marines is the cleanest path into 40K we stock. The push-fit sprues mean no glue, no clamps, no all-night vigil over a half-built Aggressor — clip 'em out, slot 'em together, and you're ready for paint by morning. The roster is a proper starter cocktail: a Captain in Terminator Armour to anchor the line, five Tactical Marines for objective work, three Aggressors for close-range punishment, and an Apothecary to keep the wounded standing.</p>
<p>The included Combat Patrol mission deck pairs with the 10th-edition starter rules — three suggested army lists, six mission scenarios, and a points sheet that scales to 500 or 1,000 with one or two more boxes added on. If you've been eyeing 40K from the saloon door, this is where to step through.</p>
<p>Comes unpainted in heroic 28mm scale. Chapter colour is yours to choose — Ultramarine, Blood Angels, Dark Angels, Imperial Fists, or roll your own Successor in the Army Builder.</p>
</div>
<!-- What's in the box -->
<div class="tabs__panel">
<span class="eyebrow tabs__panel-eyebrow">What's in the box</span>
<h3 class="tabs__panel-title">Ten miniatures, one mission deck, every sprue accounted for.</h3>
<div class="box-grid">
<div>
<ul>
<li><strong>10 plastic Space Marines miniatures</strong>
<ul>
<li>1 Captain in Terminator Armour</li>
<li>5 Tactical Marines</li>
<li>3 Aggressors</li>
<li>1 Apothecary</li>
</ul>
</li>
<li>1 Combat Patrol mission deck — 40 cards, 6 scenarios</li>
<li>1 transfer sheet — 200+ chapter icons and squad markings</li>
<li>1 base sheet — textured and flat options</li>
<li>Assembly instructions in 8 languages</li>
<li>Recommended-paints chart for Ultramarine, Blood Angels, Dark Angels and Imperial Fists schemes</li>
</ul>
</div>
<div class="box-grid__schematic">
<svg width="220" height="240" viewBox="0 0 220 240" fill="none" stroke="#613F34" stroke-width="1.4">
<rect x="14" y="14" width="192" height="212" stroke-dasharray="4 3"/>
<rect x="30" y="30" width="76" height="84"/>
<rect x="114" y="30" width="76" height="84"/>
<rect x="30" y="122" width="76" height="84"/>
<rect x="114" y="122" width="76" height="84"/>
<circle cx="68" cy="72" r="3" fill="#613F34"/>
<circle cx="152" cy="72" r="3" fill="#613F34"/>
<circle cx="68" cy="164" r="3" fill="#613F34"/>
<circle cx="152" cy="164" r="3" fill="#613F34"/>
</svg>
<div class="box-grid__schematic-label">Sprue layout · 4 frames</div>
</div>
</div>
</div>
<!-- Specifications -->
<div class="tabs__panel">
<span class="eyebrow tabs__panel-eyebrow">Specifications</span>
<h3 class="tabs__panel-title">The dry details, for those who like 'em.</h3>
<div class="spec-grid">
<div>
<div class="spec-row"><span class="spec-row__label">Scale</span><span class="spec-row__value">28mm heroic</span></div>
<div class="spec-row"><span class="spec-row__label">Material</span><span class="spec-row__value">Polystyrene plastic</span></div>
<div class="spec-row"><span class="spec-row__label">Assembly</span><span class="spec-row__value">Push-fit, no glue required</span></div>
<div class="spec-row"><span class="spec-row__label">Paint</span><span class="spec-row__value">Sold unpainted</span></div>
</div>
<div>
<div class="spec-row"><span class="spec-row__label">Compatibility</span><span class="spec-row__value">Warhammer 40,000 (10th edition)</span></div>
<div class="spec-row"><span class="spec-row__label">Game Mode</span><span class="spec-row__value">Combat Patrol missions</span></div>
<div class="spec-row"><span class="spec-row__label">Skill Level</span><span class="spec-row__value">Beginner-friendly</span></div>
<div class="spec-row"><span class="spec-row__label">SKU</span><span class="spec-row__value">WD-40K-CP-SM-001</span></div>
</div>
</div>
</div>
<!-- Reviews -->
<div class="tabs__panel" id="reviews">
<span class="eyebrow tabs__panel-eyebrow">Reviews · 124 verified</span>
<h3 class="tabs__panel-title">What other players reckon.</h3>
<div class="reviews-summary">
<div class="reviews-avg">
<div class="reviews-avg__num">4.8</div>
<div class="reviews-avg__stars">★★★★★</div>
<div class="reviews-avg__count">124 reviews</div>
</div>
<div class="review-distribution">
<div class="review-bar"><span>5 stars</span><div class="review-bar__track"><div class="review-bar__fill" style="width: 82%"></div></div><span class="review-bar__count">102</span></div>
<div class="review-bar"><span>4 stars</span><div class="review-bar__track"><div class="review-bar__fill" style="width: 12%"></div></div><span class="review-bar__count">15</span></div>
<div class="review-bar"><span>3 stars</span><div class="review-bar__track"><div class="review-bar__fill" style="width: 4%"></div></div><span class="review-bar__count">5</span></div>
<div class="review-bar"><span>2 stars</span><div class="review-bar__track"><div class="review-bar__fill" style="width: 1%"></div></div><span class="review-bar__count">1</span></div>
<div class="review-bar"><span>1 star</span><div class="review-bar__track"><div class="review-bar__fill" style="width: 1%"></div></div><span class="review-bar__count">1</span></div>
</div>
</div>
<div class="review-list">
<article class="review">
<div class="review__head">
<span class="review__name">Daniel R. — Ultramarines veteran</span>
<span class="review__date">12 May 2026</span>
</div>
<div class="review__stars">★★★★★</div>
<p class="review__body">"Bought this for my nephew's first army and ended up assembling the whole box in an afternoon myself. Push-fit is genuinely push-fit — no clamps, no swearing. Aggressors look meaner than I remembered."</p>
<div class="review__helpful">Was this helpful? <a href="#">Yes (24)</a> · <a href="#">No (1)</a></div>
</article>
<article class="review">
<div class="review__head">
<span class="review__name">Maya P. — Brand new to 40K</span>
<span class="review__date">04 May 2026</span>
</div>
<div class="review__stars">★★★★★</div>
<p class="review__body">"Walked in cold. The mission deck got me through my first three games at the FLGS without needing to read the core rulebook end-to-end. Marines feel solid on the table — they hold ground."</p>
<div class="review__helpful">Was this helpful? <a href="#">Yes (18)</a> · <a href="#">No (0)</a></div>
</article>
<article class="review">
<div class="review__head">
<span class="review__name">Theo M. — Tournament regular</span>
<span class="review__date">28 April 2026</span>
</div>
<div class="review__stars">★★★★☆</div>
<p class="review__body">"For the points, the value is hard to argue with. Captain's pose is a touch static for my taste, but the magnetising guide on the Workbench fixed that in an evening's tinker."</p>
<div class="review__helpful">Was this helpful? <a href="#">Yes (11)</a> · <a href="#">No (0)</a></div>
</article>
</div>
<button class="btn-ghost">Write a review</button>
</div>
</section>
<hr class="distress-divider">
<!-- 7. Painted by the Community -->
<section class="container">
<div class="section-head">
<span class="eyebrow section-head__eyebrow">Painted by the community</span>
<h2 class="section-head__title">How others took it from the box to the table.</h2>
<p class="section-head__lede">Six paint jobs, six different chapters, all from this same kit. Tap any tile to read the full build log.</p>
</div>
<div class="ugc-grid">
<div class="ugc-tile ugc-tile--p1">
<div class="ugc-tile__photo"></div>
<div class="ugc-tile__caption"><strong>Ultramarines</strong><em>by Hannah K. · Creator Partner</em></div>
</div>
<div class="ugc-tile ugc-tile--p2">
<div class="ugc-tile__photo"></div>
<div class="ugc-tile__caption"><strong>Blood Angels</strong><em>by Marcus T.</em></div>
</div>
<div class="ugc-tile ugc-tile--p3">
<div class="ugc-tile__photo"></div>
<div class="ugc-tile__caption"><strong>Dark Angels</strong><em>by Anika L. · Creator Partner</em></div>
</div>
<div class="ugc-tile ugc-tile--p4">
<div class="ugc-tile__photo"></div>
<div class="ugc-tile__caption"><strong>Imperial Fists</strong><em>by Pete W.</em></div>
</div>
<div class="ugc-tile ugc-tile--p5">
<div class="ugc-tile__photo"></div>
<div class="ugc-tile__caption"><strong>Salamanders</strong><em>by Devi N.</em></div>
</div>
<div class="ugc-tile ugc-tile--p6">
<div class="ugc-tile__photo"></div>
<div class="ugc-tile__caption"><strong>Crimson Owls (Successor)</strong><em>by James O. · Creator Partner</em></div>
</div>
</div>
<div class="ugc-cta">
<button class="btn-ghost">Submit your painting</button>
</div>
</section>
<hr class="distress-divider">
<!-- 8. Pairs well with (cross-sell) -->
<section class="container">
<div class="section-head">
<span class="eyebrow section-head__eyebrow">Pairs well with</span>
<h2 class="section-head__title">The shopkeeper's recommended kit-out.</h2>
<p class="section-head__lede">Three paints and one tool that'll see you from sprue to first game. Add them in one click — no need to hunt the aisles.</p>
</div>
<div class="cross-sell">
<div class="product-card product-card--paint">
<div class="product-card__media"><div class="product-card__media-shape" style="--shape-from:#3a5a8a;--shape-to:#1c2d49"></div></div>
<span class="product-card__eyebrow">Citadel · Spray</span>
<h4 class="product-card__title">Macragge Blue Primer</h4>
<p class="product-card__sub">Ultramarines basecoat in a single can.</p>
<span class="product-card__price">£12.50</span>
<div class="product-card__atc"><span class="product-card__atc-btn">Add to saddlebag</span></div>
</div>
<div class="product-card product-card--paint">
<div class="product-card__media"><div class="product-card__media-shape" style="--shape-from:#8a1f1f;--shape-to:#3f0d0d"></div></div>
<span class="product-card__eyebrow">Citadel · Base</span>
<h4 class="product-card__title">Mephiston Red</h4>
<p class="product-card__sub">For Blood Angels chapter colour.</p>
<span class="product-card__price">£3.55</span>
<div class="product-card__atc"><span class="product-card__atc-btn">Add to saddlebag</span></div>
</div>
<div class="product-card product-card--paint">
<div class="product-card__media"><div class="product-card__media-shape" style="--shape-from:#888888;--shape-to:#3a3a3a"></div></div>
<span class="product-card__eyebrow">Citadel · Base</span>
<h4 class="product-card__title">Leadbelcher</h4>
<p class="product-card__sub">Bolters, blades, and weapon trim.</p>
<span class="product-card__price">£3.55</span>
<div class="product-card__atc"><span class="product-card__atc-btn">Add to saddlebag</span></div>
</div>
<div class="product-card product-card--tool">
<div class="product-card__media"><div class="product-card__media-shape"></div></div>
<span class="product-card__eyebrow">Citadel · Tool</span>
<h4 class="product-card__title">Citadel Hobby Knife</h4>
<p class="product-card__sub">For mould lines and clean cuts.</p>
<span class="product-card__price">£8.00</span>
<div class="product-card__atc"><span class="product-card__atc-btn">Add to saddlebag</span></div>
</div>
</div>
</section>
<!-- 9. From the Workbench (DARK COWBOY BAND) -->
<section class="workbench-section">
<div class="container">
<div class="section-head">
<span class="eyebrow section-head__eyebrow">From the workbench</span>
<h2 class="section-head__title">Guides written for this exact kit.</h2>
<p class="section-head__lede">Two how-tos from the back room. Read 'em before you crack the box and you'll thank yourself by game three.</p>
</div>
<div class="workbench-grid">
<article class="workbench-card">
<div class="workbench-card__media">
<div class="workbench-card__media-art">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none">
<circle cx="50" cy="50" r="38" stroke="#F4A479" stroke-opacity="0.55" stroke-width="1.4"/>
<circle cx="50" cy="50" r="22" stroke="#F4A479" stroke-opacity="0.4" stroke-width="1.2"/>
<path d="M30 78 L50 22 L70 78" stroke="#F4A479" stroke-opacity="0.6" stroke-width="1.4"/>
<path d="M30 78 L70 78" stroke="#F4A479" stroke-opacity="0.6" stroke-width="1.4"/>
</svg>
</div>
</div>
<div class="workbench-card__body">
<div class="workbench-card__meta">
<span class="workbench-card__diff">Beginner</span>
<span class="workbench-card__time">12 min read</span>
</div>
<span class="workbench-card__eyebrow">Painting Tutorial</span>
<h3 class="workbench-card__title">Edge highlighting Space Marines power armour</h3>
<p class="workbench-card__sub">The exact brush, the exact angle, the 30-second-per-edge cadence that gets you respectable highlights without sacrificing your weekend.</p>
<a href="#" class="workbench-card__cta">Read the guide</a>
</div>
</article>
<article class="workbench-card">
<div class="workbench-card__media">
<div class="workbench-card__media-art">
<svg width="110" height="100" viewBox="0 0 110 100" fill="none">
<rect x="20" y="35" width="70" height="40" stroke="#F4A479" stroke-opacity="0.6" stroke-width="1.4"/>
<circle cx="35" cy="55" r="5" stroke="#F4A479" stroke-opacity="0.5" stroke-width="1.2"/>
<circle cx="75" cy="55" r="5" stroke="#F4A479" stroke-opacity="0.5" stroke-width="1.2"/>
<line x1="55" y1="20" x2="55" y2="35" stroke="#F4A479" stroke-opacity="0.5" stroke-width="1.2"/>
<line x1="55" y1="75" x2="55" y2="92" stroke="#F4A479" stroke-opacity="0.5" stroke-width="1.2"/>
</svg>
</div>
</div>
<div class="workbench-card__body">
<div class="workbench-card__meta">
<span class="workbench-card__diff">Intermediate</span>
<span class="workbench-card__time">18 min · video</span>
</div>
<span class="workbench-card__eyebrow">Modification Guide</span>
<h3 class="workbench-card__title">Magnetising Combat Patrol weapon options</h3>
<p class="workbench-card__sub">Swap bolters for plasma in seconds. The 1mm drill, the right magnet polarity, and the parts to leave un-glued for tournament-legal flexibility.</p>
<a href="#" class="workbench-card__cta">Watch and read</a>
</div>
</article>
</div>
</div>
</section>
<!-- 10. You may also like -->
<section class="container">
<div class="section-head">
<span class="eyebrow section-head__eyebrow">You may also like</span>
<h2 class="section-head__title">Other corners of the Imperium worth visiting.</h2>
</div>
<div class="related-grid">
<div class="product-card">
<div class="product-card__media"><div class="product-card__media-shape" style="--shape-from:#2a4a3a;--shape-to:#0e2015;width:60%;height:70%"></div></div>
<span class="product-card__eyebrow">Warhammer 40,000</span>
<h4 class="product-card__title">Combat Patrol: Necrons</h4>
<p class="product-card__sub">The waking dead, in 11 metal-rendered minis.</p>
<span class="product-card__price">£119.00</span>
<div class="product-card__atc"><span class="product-card__atc-btn">View kit</span></div>
</div>
<div class="product-card">
<div class="product-card__media"><div class="product-card__media-shape" style="--shape-from:#a85020;--shape-to:#4a2010;width:60%;height:70%"></div></div>
<span class="product-card__eyebrow">Warhammer 40,000</span>
<h4 class="product-card__title">Combat Patrol: T'au Empire</h4>
<p class="product-card__sub">For the Greater Good — and gun-line builds.</p>
<span class="product-card__price">£119.00</span>
<div class="product-card__atc"><span class="product-card__atc-btn">View kit</span></div>
</div>
<div class="product-card">
<div class="product-card__media"><div class="product-card__media-shape" style="--shape-from:#3a5a8a;--shape-to:#1c2d49;width:65%;height:75%"></div></div>
<span class="product-card__eyebrow">Warhammer 40,000</span>
<h4 class="product-card__title">Space Marines Strike Force</h4>
<p class="product-card__sub">Three squads, two tanks, a captain. Tournament scale.</p>
<span class="product-card__price">£199.00</span>
<div class="product-card__atc"><span class="product-card__atc-btn">View kit</span></div>
</div>
<div class="product-card">
<div class="product-card__media"><div class="product-card__media-shape" style="--shape-from:#5a3a3a;--shape-to:#2a1515;width:45%;height:80%"></div></div>
<span class="product-card__eyebrow">Warhammer 40,000</span>
<h4 class="product-card__title">Space Marines Hero Series</h4>
<p class="product-card__sub">A single character mini, sculpted for collectors.</p>
<span class="product-card__price">£32.50</span>
<div class="product-card__atc"><span class="product-card__atc-btn">View kit</span></div>
</div>
</div>
</section>
<hr class="distress-divider">
<!-- 11. Recently viewed -->
<section class="container">
<div class="section-head" style="margin-bottom: var(--s5);">
<span class="eyebrow section-head__eyebrow">Recently viewed</span>
<h2 class="section-head__title" style="font-size: var(--t-h4);">Where you've been this evening.</h2>
</div>
<div class="recent-strip">
<div class="recent-card">
<div class="recent-card__media"></div>
<div>
<div class="recent-card__title">Citadel Paint Bundle — Starter Set</div>
<div class="recent-card__price">£45.00</div>
</div>
</div>
<div class="recent-card">
<div class="recent-card__media"></div>
<div>
<div class="recent-card__title">Codex: Space Marines (10th ed)</div>
<div class="recent-card__price">£35.00</div>
</div>
</div>
<div class="recent-card">
<div class="recent-card__media"></div>
<div>
<div class="recent-card__title">Realm of Battle: Imperial Ruins</div>
<div class="recent-card__price">£75.00</div>
</div>
</div>
<div class="recent-card">
<div class="recent-card__media"></div>
<div>
<div class="recent-card__title">Hobby Cutters & Files Set</div>
<div class="recent-card__price">£22.00</div>
</div>
</div>
</div>
</section>
<!-- 12. Newsletter -->
<section class="newsletter">
<div class="container">
<div class="newsletter__inner">
<div>
<span class="eyebrow" style="margin-bottom: var(--s2); display: inline-block;">Join the Garrison</span>
<h3 class="newsletter__title">One short letter, once a month.</h3>
<p class="newsletter__sub">Restocks, painting guides, tournament dispatches. No clutter, no salesmen.</p>
</div>
<form class="newsletter__form" onsubmit="return false;">
<input type="email" class="newsletter__input" placeholder="your.email@example.com" aria-label="Email">
<button type="submit" class="newsletter__btn">Enlist</button>
</form>
</div>
</div>
</section>
<!-- 13. Footer -->
<footer class="footer">
<div class="container">
<div class="footer__cols">
<div class="footer__col">
<div class="footer__brand">War Dungeon</div>
<p class="footer__lede">Warhammer, Dungeons & Dragons, and the trade between them — stocked, guided, and shipped from a back-of-shop in the Imperium.</p>
<span class="footer__badge-tag">A Nerdworks Brand</span>
</div>
<div class="footer__col">
<div class="footer__col-title">Shop</div>
<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="#">Paint & hobby</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</div>
<div class="footer__col">
<div class="footer__col-title">Discover</div>
<ul>
<li><a href="#">Army Builder</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Creator Partners</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Painting Showcase</a></li>
</ul>
</div>
<div class="footer__col">
<div class="footer__col-title">Help & Loyalty</div>
<ul>
<li><a href="#">Contact the shopkeeper</a></li>
<li><a href="#">Shipping & returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Track your order</a></li>
<li><a href="#">Loyalty programme</a></li>
<li><a href="#">Become an Affiliate</a></li>
</ul>
</div>
</div>
<div class="footer__base">
<div>© 2026 War Dungeon · Nerdworks Ltd</div>
<div class="footer__pay">
<span>VISA</span><span>MC</span><span>AMEX</span><span>PAYPAL</span><span>KLARNA</span><span>APPLE</span>
</div>
<div class="footer__legal">
<a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Cookies</a>
</div>
</div>
</div>
</footer>
<!-- 14. Sticky mobile ATC -->
<aside class="sticky-atc" aria-label="Quick add to cart">
<div class="sticky-atc__thumb"></div>
<div class="sticky-atc__meta">
<span class="sticky-atc__title">Combat Patrol: Space Marines</span>
<div class="sticky-atc__row">
<span class="sticky-atc__price">£119.00</span>
<span class="sticky-atc__stock">In stock</span>
</div>
</div>
<button class="sticky-atc__btn">Add to Saddlebag</button>
</aside>
</body>
</html>