<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combat Patrols — Space Marines · War Dungeon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://use.typekit.net/onl7dxx.css" rel="stylesheet">
<style>
/* ========== TOKENS ========== */
:root {
/* Palette — verbatim from Frontier styleguide */
--primary: #C5A688;
--secondary: #D8C3B1;
--tertiary: #F4A479;
--dark: #1B1314;
--light: #FFFFFF;
--text: #613F34;
--neutral: #2B1B1C;
--accent: #832D15;
--positive: #4A6E50;
--negative: #C8442D;
/* Brand-named hues */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--white: #FFFFFF;
/* Surface semantics (resolve to grounds, NOT to chromatic hues) */
--bg-page: var(--rodeo);
--bg-card-on-light: var(--rodeo-light);
--bg-card-on-dark: var(--liquourice);
--bg-panel-darker: var(--liquourice);
--bg-panel-inverted: var(--cowboy);
--bg-panel-stamp: var(--sienna);
--bg-surface-alt: var(--rodeo-light);
/* Text-on-ground roles */
--text-on-light: var(--caput);
--text-on-dark: var(--white);
--text-on-card-light: var(--caput);
--text-on-card-dark: var(--white);
--text-on-stamp: var(--white);
--text-on-accent: var(--white);
--text-eyebrow-on-light: var(--sienna);
--text-eyebrow-on-dark: var(--bronze);
/* Typography */
--font-display: "modesto-condensed", "Literata", "Palatino Linotype", "EB Garamond", Georgia, serif;
--font-body: "Literata", "Palatino Linotype", "EB Garamond", Georgia, serif;
/* Type scale */
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 48px;
--fs-h3: 36px;
--fs-h4: 24px;
--fs-body-lg: 22px;
--fs-body: 18px;
--fs-body-sm: 16px;
--fs-eyebrow: 13px;
--fs-micro: 12px;
--body-lg: 22px;
--body: 18px;
--body-sm: 16px;
--micro: 12px;
--h3: 36px;
/* Line height */
--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-heading: 0;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* Spacing */
--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: 0;
--r-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
--r-xl: 21px;
/* Shadows — hard-edged, 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);
--shadow-stamp: 2px 2px 0 var(--caput);
/* Borders */
--bw-hairline: 1px;
--bw-regular: 2px;
--bw-thick: 4px;
/* Bronze gear pattern at ~10% opacity, for inverted panels */
--gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><g fill='none' stroke='%23F4A479' stroke-opacity='0.10' stroke-width='1'><circle cx='80' cy='80' r='22'/><circle cx='80' cy='80' r='36'/><circle cx='80' cy='80' r='3' fill='%23F4A479' fill-opacity='0.10'/><path d='M80 36v8M80 116v8M36 80h8M116 80h8M48 48l6 6M106 106l6 6M112 48l-6 6M48 112l6-6'/></g></svg>");
}
/* ========== RESET / BASE ========== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
font-size: 20px;
line-height: var(--lh-body);
color: var(--text-on-light);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
/* ========== RIVET UTILITY (base, used by reused + new inverted panels) ========== */
.rivet-panel { position: relative; }
.rivet { position: absolute; width: 10px; height: 10px; background: var(--bronze); border: 1px solid var(--caput); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(27,19,20,0.4); z-index: 3; }
.rivet--tl { top: 8px; left: 8px; }
.rivet--tr { top: 8px; right: 8px; }
.rivet--bl { bottom: 8px; left: 8px; }
.rivet--br { bottom: 8px; right: 8px; }
/* ========== REUSED: preheader-bar (announcement) ========== */
.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; } }
/* ========== REUSED: site-header ========== */
.site-header { background: var(--bg-panel-darker); border-bottom: 2px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 16px 40px; max-width: 1440px; margin: 0 auto; }
.site-header__brand { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); background: var(--liquourice); }
.site-header__cog { width: 28px; height: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23F4A479' stroke-width='1.4'><circle cx='14' cy='14' r='5'/><circle cx='14' cy='14' r='9'/><path d='M14 1v4M14 23v4M1 14h4M23 14h4M5 5l3 3M20 20l3 3M23 5l-3 3M5 23l3-3'/></svg>"); }
.site-header__word { font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); line-height: 1; }
.site-header__word small { display: block; font-size: 9px; color: var(--rodeo-light); margin-top: 2px; }
.site-header__nav { display: flex; gap: 0; justify-content: center; }
.site-header__nav-item { position: relative; padding: 12px 16px; font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--rodeo-light); text-decoration: none; }
.site-header__nav-item + .site-header__nav-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 999px; background: var(--bronze); transform: translate(-3px, -50%); }
.site-header__nav-item--has-mega::after { content: " ▾"; font-size: 10px; color: var(--bronze); }
.site-header__nav-item--active { color: var(--bronze); }
.site-header__nav-item--active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 3px; background: var(--bronze); }
.site-header__tools { display: flex; gap: 12px; align-items: center; }
.site-header__tool { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); color: var(--bronze); text-decoration: none; }
.site-header__tool--basket { width: auto; padding: 0 12px; gap: 8px; font-family: var(--font-display); font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.site-header__points { padding: 2px 6px; font-size: 10px; background: var(--bronze); color: var(--liquourice); border-radius: 999px; border: 1px solid var(--caput); margin-left: 6px; }
@media (max-width: 980px) { .site-header__nav { display: none; } .site-header__inner { grid-template-columns: auto 1fr; } }
/* ========== REUSED: breadcrumbs ========== */
.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); }
/* ========== REUSED: gear-divider ========== */
.gear-divider { height: 36px; background-color: var(--liquourice); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='36' viewBox='0 0 200 36'><g fill='none' stroke='%23F4A479' stroke-width='1.4'><line x1='0' y1='18' x2='200' y2='18'/><line x1='0' y1='14' x2='200' y2='14' stroke-opacity='0.35'/><line x1='0' y1='22' x2='200' y2='22' stroke-opacity='0.35'/><circle cx='50' cy='18' r='8'/><circle cx='50' cy='18' r='12'/><path d='M50 3v3M50 30v3M35 18h3M62 18h3'/><circle cx='50' cy='18' r='3' fill='%23F4A479'/><circle cx='150' cy='18' r='8'/><circle cx='150' cy='18' r='12'/><path d='M150 3v3M150 30v3M135 18h3M162 18h3'/><circle cx='150' cy='18' r='3' fill='%23F4A479'/></g></svg>"); background-repeat: repeat-x; border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); }
/* ========== REUSED: eyebrow-stamp ========== */
.eyebrow-stamp { display: inline-block; padding: 6px 16px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); }
/* ========== REUSED: btn ========== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: var(--font-display); font-size: var(--fs-body-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--light); background: var(--sienna); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); text-decoration: none; cursor: pointer; transition: transform 120ms linear; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: inset 0 0 0 1px var(--caput), 3px 3px 0 var(--caput); }
.btn--ghost { color: var(--bronze); background: transparent; }
.btn--lg { padding: 18px 36px; font-size: var(--fs-h4); }
.btn--block { display: flex; width: 100%; }
/* ========== REUSED: section-head ========== */
.section-head { text-align: center; margin-bottom: 48px; }
.section-head__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(40px, 6vw, var(--fs-h1)); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-on-dark); }
.section-head--on-light .section-head__title { color: var(--text-on-light); }
.section-head__rule { display: block; width: 120px; height: 4px; margin: 12px auto 16px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.section-head__lede { max-width: 640px; margin: 0 auto; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--rodeo-light); }
.section-head--on-light .section-head__lede { color: var(--caput); }
/* ========== NEW: archive-header ========== */
.archive-header { background-color: var(--cowboy); background-image: var(--gear-pattern); color: var(--text-on-dark); padding: var(--sp-8) 0 var(--sp-7); border-bottom: 2px solid var(--caput); position: relative; }
.archive-header__panel { position: relative; padding: var(--sp-6) var(--sp-7); border: 4px ridge var(--bronze); background: var(--liquourice); background-image: var(--gear-pattern); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); }
.archive-header__top { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: end; }
.archive-header__eyebrow { color: var(--bronze); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; margin-bottom: var(--sp-3); display: inline-block; }
.archive-header__title { margin: 0; font-family: var(--font-display); font-size: clamp(48px, 6vw, var(--fs-h1)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 0.95; color: var(--white); }
.archive-header__rule { display: block; width: 120px; height: 4px; background: var(--bronze); border-top: 1px solid var(--caput); border-bottom: 1px solid var(--caput); margin: var(--sp-4) 0; }
.archive-header__lede { margin: var(--sp-3) 0 0; font-family: var(--font-body); font-style: italic; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--rodeo-light); max-width: 720px; }
.archive-header__count-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); white-space: nowrap; }
.archive-header__count-pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bronze); border: 1px solid var(--caput); }
@media (max-width: 880px) { .archive-header__top { grid-template-columns: 1fr; } .archive-header__panel { padding: var(--sp-5); } }
/* ========== NEW: sort-bar ========== */
.sort-bar { background: var(--rodeo-light); border-top: 1px solid var(--caput); border-bottom: 2px solid var(--caput); padding: var(--sp-4) 0; color: var(--caput); }
.sort-bar__inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center; }
.sort-bar__left { display: flex; align-items: center; gap: var(--sp-3); }
.sort-bar__label { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); }
.sort-bar__select { font-family: var(--font-display); font-size: 14px; letter-spacing: var(--ls-wider); text-transform: uppercase; padding: 8px 32px 8px 14px; background: var(--liquourice) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F4A479' stroke-width='1.6'><path d='M1 1l5 5 5-5'/></svg>") no-repeat right 12px center; background-size: 10px 8px; color: var(--bronze); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); appearance: none; -webkit-appearance: none; }
.sort-bar__chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.sort-bar__chips-label { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); margin-right: var(--sp-2); }
.sort-bar__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); }
.sort-bar__chip-close { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--liquourice); color: var(--bronze); border: 1px solid var(--caput); border-radius: 50%; font-family: var(--font-display); font-size: 12px; line-height: 1; cursor: pointer; }
.sort-bar__clear { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--sienna); border-bottom: 1px dashed var(--sienna); padding-bottom: 1px; margin-left: var(--sp-3); cursor: pointer; }
.sort-bar__right { display: flex; align-items: center; gap: var(--sp-4); justify-content: flex-end; }
.sort-bar__count { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); }
.sort-bar__view-toggle { display: inline-flex; border: 2px ridge var(--bronze); background: var(--liquourice); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); border-radius: var(--r-md); overflow: hidden; }
.sort-bar__view-btn { background: transparent; border: 0; padding: 8px 12px; color: var(--bronze); font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wide); text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.sort-bar__view-btn--active { background: var(--bronze); color: var(--liquourice); }
.sort-bar__view-btn svg { width: 14px; height: 14px; }
.sort-bar__view-btn + .sort-bar__view-btn { border-left: 1px solid var(--caput); }
@media (max-width: 980px) { .sort-bar__inner { grid-template-columns: 1fr; gap: var(--sp-3); } .sort-bar__right, .sort-bar__chips { justify-content: flex-start; } }
/* ========== NEW: filter-sidebar + filter-group ========== */
.archive-body { background: var(--rodeo); padding: var(--sp-7) 0 var(--sp-8); }
.archive-body__inner { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items: start; }
.filter-sidebar { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); }
.filter-sidebar__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--sp-2) var(--sp-2); border-bottom: 2px solid var(--caput); }
.filter-sidebar__title { font-family: var(--font-display); font-size: 22px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--caput); margin: 0; }
.filter-sidebar__clear { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--sienna); border-bottom: 1px dashed var(--sienna); padding-bottom: 1px; cursor: pointer; background: transparent; border-top: 0; border-left: 0; border-right: 0; }
.filter-group { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); padding: var(--sp-4); color: var(--rodeo-light); }
.filter-group .rivet { width: 6px; height: 6px; }
.filter-group__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--caput); cursor: pointer; }
.filter-group__title { margin: 0; font-family: var(--font-display); font-size: 14px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.filter-group__chevron { color: var(--bronze); font-family: var(--font-display); font-size: 12px; line-height: 1; }
.filter-group__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.filter-option { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: var(--sp-3); font-family: var(--font-body); font-size: 15px; color: var(--rodeo-light); cursor: pointer; line-height: 1.2; }
.filter-option__box { width: 18px; height: 18px; background: var(--liquourice); border: 2px solid var(--bronze); border-radius: 2px; position: relative; box-shadow: inset 0 0 0 1px var(--caput); }
.filter-option__box--radio { border-radius: 50%; }
.filter-option--checked .filter-option__box { background: var(--sienna); }
.filter-option--checked .filter-option__box::after { content: ""; position: absolute; left: 3px; top: 0px; width: 6px; height: 10px; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg); }
.filter-option--checked .filter-option__box--radio::after { content: ""; position: absolute; inset: 3px; border: 0; background: var(--bronze); border-radius: 50%; transform: none; }
.filter-option__count { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wider); color: var(--bronze); }
.filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-family: var(--font-body); font-size: 15px; color: var(--rodeo-light); }
.filter-toggle__switch { position: relative; width: 44px; height: 24px; background: var(--cowboy); border: 2px solid var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput); flex-shrink: 0; }
.filter-toggle__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--rodeo-light); border: 1px solid var(--caput); border-radius: 50%; transition: left 120ms linear; }
.filter-toggle--on .filter-toggle__switch { background: var(--sienna); }
.filter-toggle--on .filter-toggle__switch::after { left: 22px; background: var(--bronze); }
.filter-range { display: flex; flex-direction: column; gap: var(--sp-3); }
.filter-range__track { position: relative; height: 4px; background: var(--cowboy); border: 1px solid var(--caput); border-radius: 2px; margin: var(--sp-3) 6px; }
.filter-range__fill { position: absolute; left: 18%; right: 28%; top: -1px; bottom: -1px; background: var(--bronze); border: 1px solid var(--caput); }
.filter-range__handle { position: absolute; top: 50%; width: 14px; height: 14px; background: var(--bronze); border: 2px solid var(--caput); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: var(--shadow-sm); }
.filter-range__handle--lo { left: 18%; }
.filter-range__handle--hi { left: 72%; }
.filter-range__inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); align-items: center; }
.filter-range__field { display: flex; align-items: center; gap: 4px; background: var(--cowboy); border: 1px solid var(--bronze); padding: 6px 8px; font-family: var(--font-display); font-size: 13px; color: var(--bronze); }
.filter-range__field input { background: transparent; border: 0; color: var(--white); font-family: var(--font-display); font-size: 14px; width: 100%; min-width: 0; outline: none; }
.filter-range__dash { color: var(--bronze); font-family: var(--font-display); }
/* ========== NEW: archive-product-card (extended product card) ========== */
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.archive-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .archive-grid { grid-template-columns: 1fr; } }
.archive-product-card { position: relative; display: flex; flex-direction: column; background: var(--bg-card-on-dark); background-image: var(--gear-pattern); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); color: var(--text-on-card-dark); overflow: hidden; }
.archive-product-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--white); border-bottom: 2px ridge var(--bronze); }
.archive-product-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms linear; }
.archive-product-card__image--placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--liquourice); font-family: var(--font-display); font-size: 22px; letter-spacing: var(--ls-wider); text-transform: uppercase; text-align: center; padding: var(--sp-5); }
.archive-product-card__eyebrow-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); }
.archive-product-card__loyalty { position: absolute; top: 12px; right: 56px; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-family: var(--font-display); font-size: 11px; line-height: 1; color: var(--liquourice); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); text-align: center; }
.archive-product-card__wishlist { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--liquourice); color: var(--bronze); border: 2px ridge var(--bronze); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); font-size: 18px; cursor: pointer; }
.archive-product-card__sale-pill { position: absolute; bottom: 12px; left: 12px; padding: 4px 10px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--white); background: var(--sienna); border: 1px solid var(--caput); border-radius: var(--r-sm); box-shadow: var(--shadow-stamp); }
.archive-product-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); flex: 1 1 auto; }
.archive-product-card__chapter { font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.archive-product-card__title { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1.05; color: var(--white); }
.archive-product-card__rating { display: inline-flex; align-items: center; gap: 8px; color: var(--bronze); font-size: 13px; }
.archive-product-card__rating em { font-style: normal; color: var(--rodeo-light); font-family: var(--font-body); }
.archive-product-card__price-line { display: flex; align-items: baseline; gap: 10px; }
.archive-product-card__price { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--bronze); }
.archive-product-card__price-rrp { font-family: var(--font-body); font-size: 14px; color: var(--rodeo-light); text-decoration: line-through; text-decoration-color: var(--bronze); }
.archive-product-card__stock { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--rodeo-light); }
.archive-product-card__stock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--positive); border: 1px solid var(--caput); box-shadow: 0 0 0 2px var(--bronze); }
.archive-product-card__stock--out { color: var(--rodeo-light); opacity: 0.6; }
.archive-product-card__stock--out .archive-product-card__stock-dot { background: var(--negative); }
.archive-product-card__cta-row { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px dashed var(--caput); }
.archive-product-card__quickview { padding: 10px 12px; font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: transparent; border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: var(--shadow-stamp); cursor: pointer; }
.archive-product-card__atc { padding: 10px 12px; font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--white); background: var(--sienna); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); cursor: pointer; }
.archive-product-card--out-of-stock .archive-product-card__image-wrap { filter: grayscale(1) brightness(0.85); }
.archive-product-card--out-of-stock .archive-product-card__atc { background: var(--cowboy); color: var(--rodeo-light); }
/* Visual placeholders for product imagery (mockup only) */
.product-placeholder { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-placeholder__box { width: 70%; height: 78%; border: 3px solid var(--caput); background: var(--liquourice); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 6px 6px 0 rgba(27,19,20,0.18); }
.product-placeholder__box::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--bronze); opacity: 0.5; }
.product-placeholder__cog { width: 56%; height: 56%; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23F4A479' stroke-width='2'><circle cx='50' cy='50' r='18'/><circle cx='50' cy='50' r='30'/><circle cx='50' cy='50' r='6' fill='%23F4A479'/><path d='M50 6v10M50 84v10M6 50h10M84 50h10M22 22l7 7M71 71l7 7M78 22l-7 7M22 78l7-7'/></svg>"); }
.product-placeholder__label { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.product-placeholder--sal { background: linear-gradient(180deg, #1f3a26 0%, #0f1b13 100%); }
.product-placeholder--if { background: linear-gradient(180deg, #6b4a17 0%, #3a2807 100%); }
.product-placeholder--ba { background: linear-gradient(180deg, #7a1818 0%, #2e0a0a 100%); }
.product-placeholder--um { background: linear-gradient(180deg, #1b3878 0%, #0c1a3d 100%); }
.product-placeholder--da { background: linear-gradient(180deg, #163024 0%, #0a1611 100%); }
.product-placeholder--rg { background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%); }
.product-placeholder--gen { background: linear-gradient(180deg, #5c4a3a 0%, #2a221a 100%); }
.product-placeholder--bt { background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%); }
.product-placeholder--ih { background: linear-gradient(180deg, #2c2c30 0%, #14141a 100%); }
.product-placeholder--ws { background: linear-gradient(180deg, #d8c8a0 0%, #8e7f55 100%); }
.product-placeholder--dw { background: linear-gradient(180deg, #131313 0%, #000000 100%); }
.product-placeholder--gk { background: linear-gradient(180deg, #7d8693 0%, #3a3f48 100%); }
.product-placeholder--start { background: linear-gradient(180deg, #1f3a78 0%, #0f1f3d 100%); }
.product-placeholder--cust { background: linear-gradient(180deg, #b08b3a 0%, #6b5417 100%); }
/* ========== NEW: pagination ========== */
.pagination { padding: var(--sp-6) 0; }
.pagination__inner { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 14px; font-family: var(--font-display); font-size: 14px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); cursor: pointer; }
.pagination__btn--current { background: var(--bronze); color: var(--liquourice); }
.pagination__btn--disabled { opacity: 0.4; cursor: not-allowed; }
.pagination__btn--label { padding: 0 22px; }
.pagination__ellipsis { padding: 0 6px; font-family: var(--font-display); color: var(--caput); letter-spacing: var(--ls-widest); }
.pagination__loadmore { margin-top: var(--sp-5); text-align: center; }
.pagination__loadmore-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: var(--font-display); font-size: 16px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: transparent; border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: var(--shadow-stamp); cursor: pointer; }
/* ========== NEW: curated-bottom-slot ========== */
.curated-bottom-slot { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0 var(--sp-9); color: var(--text-on-dark); }
.curated-bottom-slot__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.curated-card { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px ridge var(--bronze); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; color: var(--rodeo-light); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); }
.curated-card .rivet { width: 9px; height: 9px; }
.curated-card__cover { position: relative; min-height: 320px; background: var(--cowboy); border-right: 2px solid var(--bronze); overflow: hidden; }
.curated-card__cover-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #2b1b1c 0%, #1b1314 100%); }
.curated-card__cover-art--paint { background: linear-gradient(160deg, #1f3a26 0%, #0a1611 100%); }
.curated-card__cover-cog { width: 60%; height: 60%; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23F4A479' stroke-opacity='0.55' stroke-width='1.6'><circle cx='50' cy='50' r='18'/><circle cx='50' cy='50' r='30'/><circle cx='50' cy='50' r='5' fill='%23F4A479' fill-opacity='0.5'/><path d='M50 8v8M50 84v8M8 50h8M84 50h8M22 22l5 5M73 73l5 5M78 22l-5 5M22 78l5-5'/></svg>"); }
.curated-card__body { padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.curated-card__meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.curated-card__pill { padding: 4px 10px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; background: var(--bronze); color: var(--liquourice); border: 1px solid var(--caput); }
.curated-card__pill--ghost { background: transparent; color: var(--bronze); border: 1px solid var(--bronze); }
.curated-card__kicker { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.curated-card__title { font-family: var(--font-display); font-size: 26px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); margin: 0; line-height: 1.1; }
.curated-card__copy { font-family: var(--font-body); font-size: var(--fs-body-sm); font-style: italic; color: var(--rodeo-light); line-height: var(--lh-body); margin: 0; }
.curated-card__cta { margin-top: auto; align-self: flex-start; background: transparent; color: var(--bronze); border: 2px ridge var(--bronze); border-radius: var(--r-md); font-family: var(--font-display); font-size: 13px; letter-spacing: var(--ls-widest); text-transform: uppercase; padding: 10px 16px; box-shadow: var(--shadow-stamp); cursor: pointer; }
.curated-card__author { position: absolute; left: 12px; bottom: 12px; right: 12px; padding: 6px 10px; background: rgba(27, 19, 20, 0.78); border: 1px solid var(--bronze); color: var(--bronze); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; }
@media (max-width: 980px) { .curated-bottom-slot__grid { grid-template-columns: 1fr; } .curated-card { grid-template-columns: 1fr; } .curated-card__cover { border-right: 0; border-bottom: 2px solid var(--bronze); min-height: 220px; } }
/* ========== NEW: quick-view-modal (rendered OPEN for review) ========== */
.quick-view-overlay { position: relative; background: rgba(27, 19, 20, 0.82); padding: var(--sp-7) 0; border-top: 4px solid var(--bronze); border-bottom: 4px solid var(--bronze); }
.quick-view-overlay::before { content: "Quick view modal — open state for review"; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; background: var(--bronze); color: var(--liquourice); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; border: 1px solid var(--caput); border-radius: 999px; }
.quick-view-modal { position: relative; max-width: 920px; margin: var(--sp-7) auto 0; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput), 8px 8px 0 rgba(27,19,20,1); color: var(--text-on-dark); padding: var(--sp-6); }
.quick-view-modal .rivet { width: 10px; height: 10px; }
.quick-view-modal__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: 50%; color: var(--bronze); font-family: var(--font-display); font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); cursor: pointer; z-index: 4; }
.quick-view-modal__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-6); align-items: start; }
.quick-view-modal__gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.quick-view-modal__main { position: relative; aspect-ratio: 1/1; background: var(--white); border: 4px ridge var(--bronze); overflow: hidden; box-shadow: inset 0 0 0 1px var(--caput); }
.quick-view-modal__main .product-placeholder__box { background: var(--liquourice); }
.quick-view-modal__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.quick-view-modal__thumb { position: relative; aspect-ratio: 1/1; background: var(--cowboy); border: 2px ridge var(--bronze); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; }
.quick-view-modal__thumb--active { outline: 2px solid var(--bronze); outline-offset: 2px; }
.quick-view-modal__thumb .product-placeholder__box { width: 80%; height: 80%; }
.quick-view-modal__content { display: flex; flex-direction: column; gap: var(--sp-4); color: var(--rodeo-light); }
.quick-view-modal__eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.quick-view-modal__title { margin: 0; font-family: var(--font-display); font-size: 34px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); line-height: 1.05; }
.quick-view-modal__rating-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.quick-view-modal__stars { color: var(--bronze); font-size: 16px; letter-spacing: 2px; }
.quick-view-modal__rating-count { font-family: var(--font-body); font-style: italic; color: var(--rodeo-light); font-size: 14px; }
.quick-view-modal__rule { width: 80px; height: 3px; background: var(--bronze); border-top: 1px solid var(--caput); border-bottom: 1px solid var(--caput); }
.quick-view-modal__variation { display: flex; flex-direction: column; gap: var(--sp-2); }
.quick-view-modal__variation-label { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.quick-view-modal__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.quick-view-modal__chip { background: transparent; color: var(--rodeo-light); font-family: var(--font-display); font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase; padding: 8px 12px; border: 2px ridge var(--bronze); cursor: pointer; }
.quick-view-modal__chip--selected { background: var(--bronze); color: var(--liquourice); }
.quick-view-modal__clean-zone { background: var(--cowboy); padding: var(--sp-5); border: 2px solid var(--caput); position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.quick-view-modal__clean-zone::before { content: "Clean zone — price + ATC stay free of ornament"; position: absolute; left: 12px; top: -10px; padding: 2px 8px; background: var(--liquourice); border: 1px solid var(--bronze); color: var(--bronze); font-family: var(--font-display); font-size: 9px; letter-spacing: var(--ls-widest); text-transform: uppercase; }
.quick-view-modal__price-line { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.quick-view-modal__price-current { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--white); letter-spacing: var(--ls-wide); }
.quick-view-modal__price-rrp { font-family: var(--font-body); font-size: 16px; color: var(--rodeo-light); text-decoration: line-through; text-decoration-color: var(--bronze); }
.quick-view-modal__loyalty { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--bronze); color: var(--liquourice); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; border: 1px solid var(--caput); }
.quick-view-modal__stock { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 14px; color: var(--rodeo-light); }
.quick-view-modal__stock-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 2px var(--bronze); }
.quick-view-modal__qty-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: stretch; }
.quick-view-modal__qty { display: flex; align-items: stretch; border: 2px solid var(--bronze); background: var(--liquourice); }
.quick-view-modal__qty button { width: 40px; background: transparent; border: 0; color: var(--bronze); font-family: var(--font-display); font-size: 22px; }
.quick-view-modal__qty input { width: 44px; background: transparent; border: 0; color: var(--white); font-family: var(--font-display); font-size: 20px; text-align: center; outline: none; }
.quick-view-modal__atc { background: var(--sienna); color: var(--white); font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: var(--ls-wide); padding: 14px var(--sp-5); border: 2px ridge var(--bronze); box-shadow: var(--shadow-stamp); cursor: pointer; }
.quick-view-modal__wishlist-btn { width: 48px; background: transparent; color: var(--bronze); border: 2px ridge var(--bronze); font-size: 22px; cursor: pointer; }
.quick-view-modal__details-link { font-family: var(--font-display); font-size: 14px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bronze); border-bottom: 1px dashed var(--bronze); padding-bottom: 2px; align-self: flex-start; cursor: pointer; }
@media (max-width: 880px) { .quick-view-modal__inner { grid-template-columns: 1fr; } }
/* ========== REUSED: newsletter-garrison ========== */
.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); cursor: pointer; }
@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%; } }
/* ========== REUSED: site-footer ========== */
.site-footer { background: var(--bg-panel-darker); color: var(--text-on-dark); border-top: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.site-footer__columns { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding: 96px 40px 48px; max-width: 1200px; margin: 0 auto; }
.site-footer__brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-footer__word { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__copy { margin: 0 0 24px; color: var(--rodeo-light); font-size: var(--fs-body-sm); }
.site-footer__badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__col-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px ridge var(--bronze); font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__list a { color: var(--rodeo-light); font-size: var(--fs-body-sm); text-decoration: none; }
.site-footer__list a:hover { color: var(--bronze); }
.site-footer__baseline { border-top: 2px ridge var(--bronze); background: var(--cowboy); }
.site-footer__baseline-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 40px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.site-footer__pay { display: flex; gap: 8px; }
.site-footer__pay span { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__legal { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); color: var(--rodeo-light); }
@media (max-width: 880px) { .site-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .site-footer__columns { grid-template-columns: 1fr; } }
/* ========== ARCHIVE SIDEBAR RESPONSIVE ========== */
@media (max-width: 980px) {
.archive-body__inner { grid-template-columns: 1fr; }
.filter-sidebar { order: 2; }
}
</style>
</head>
<body>
<!-- ========== ANNOUNCEMENT BAR (REUSED: preheader-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>
<!-- ========== GLOBAL HEADER (REUSED: site-header) ========== -->
<header class="site-header">
<div class="site-header__inner">
<a class="site-header__brand" href="/">
<span class="site-header__cog" aria-hidden="true"></span>
<span class="site-header__word">War Dungeon<small>The Workbench of Warriors</small></span>
</a>
<nav class="site-header__nav" aria-label="Primary">
<a class="site-header__nav-item site-header__nav-item--has-mega site-header__nav-item--active" href="#">Warhammer</a>
<a class="site-header__nav-item" href="#">Dungeons & Dragons</a>
<a class="site-header__nav-item" href="#">Tools</a>
<a class="site-header__nav-item site-header__nav-item--has-mega" href="#">Learn</a>
<a class="site-header__nav-item" href="#">Creators</a>
</nav>
<div class="site-header__tools">
<a class="site-header__tool" href="#" aria-label="Search">⌕</a>
<a class="site-header__tool" href="#" aria-label="Account">☉</a>
<a class="site-header__tool" href="#" aria-label="Wishlist">♥</a>
<a class="site-header__tool site-header__tool--basket" href="#"><span>Basket · 2</span><span class="site-header__points">+340 PTS</span></a>
</div>
</div>
</header>
<!-- ========== BREADCRUMBS (REUSED) ========== -->
<nav class="breadcrumbs" aria-label="Breadcrumb">
<div class="container breadcrumbs__inner">
<a href="#">Home</a><span class="breadcrumbs__sep">/</span>
<a href="#">Warhammer</a><span class="breadcrumbs__sep">/</span>
<a href="#">Warhammer 40,000</a><span class="breadcrumbs__sep">/</span>
<a href="#">Space Marines</a><span class="breadcrumbs__sep">/</span>
<span class="breadcrumbs__item--current">Combat Patrols</span>
</div>
</nav>
<!-- ========== ARCHIVE HEADER (NEW) ========== -->
<section class="archive-header">
<div class="container">
<div class="archive-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>
<div class="archive-header__top">
<div>
<span class="archive-header__eyebrow">Warhammer 40,000 · Space Marines</span>
<h1 class="archive-header__title">Combat Patrols</h1>
<span class="archive-header__rule" aria-hidden="true"></span>
<p class="archive-header__lede">Ten miniatures, one starter army, every chapter in the Imperium — pick a colour, walk it home, and let the workbench do the rest.</p>
</div>
<span class="archive-header__count-pill">Showing 14 of 14 Combat Patrols</span>
</div>
</div>
</div>
</section>
<!-- ========== GEAR DIVIDER between archive header and sort row ========== -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ========== SORT + ACTIVE FILTER CHIPS + VIEW TOGGLE (NEW: sort-bar) ========== -->
<div class="sort-bar">
<div class="container sort-bar__inner">
<div class="sort-bar__left">
<span class="sort-bar__label">Sort by</span>
<select class="sort-bar__select" aria-label="Sort products">
<option>Featured</option>
<option>Newest</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Top rated</option>
<option>Bestsellers</option>
</select>
</div>
<div class="sort-bar__chips">
<span class="sort-bar__chips-label">Active:</span>
<span class="sort-bar__chip">In stock<button class="sort-bar__chip-close" aria-label="Remove filter">×</button></span>
<span class="sort-bar__chip">Salamanders<button class="sort-bar__chip-close" aria-label="Remove filter">×</button></span>
<span class="sort-bar__chip">Imperial Fists<button class="sort-bar__chip-close" aria-label="Remove filter">×</button></span>
<span class="sort-bar__chip">£95 – £130<button class="sort-bar__chip-close" aria-label="Remove filter">×</button></span>
<button class="sort-bar__clear">Clear all</button>
</div>
<div class="sort-bar__right">
<span class="sort-bar__count">14 results</span>
<div class="sort-bar__view-toggle" role="group" aria-label="View toggle">
<button class="sort-bar__view-btn sort-bar__view-btn--active" aria-pressed="true">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="1" y="1" width="4" height="4"/><rect x="9" y="1" width="4" height="4"/><rect x="1" y="9" width="4" height="4"/><rect x="9" y="9" width="4" height="4"/></svg>
3-up
</button>
<button class="sort-bar__view-btn" aria-pressed="false">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="1" y="1" width="2.5" height="2.5"/><rect x="5.75" y="1" width="2.5" height="2.5"/><rect x="10.5" y="1" width="2.5" height="2.5"/><rect x="1" y="5.75" width="2.5" height="2.5"/><rect x="5.75" y="5.75" width="2.5" height="2.5"/><rect x="10.5" y="5.75" width="2.5" height="2.5"/></svg>
4-up
</button>
</div>
</div>
</div>
</div>
<!-- ========== BODY: FILTER SIDEBAR + PRODUCT GRID ========== -->
<section class="archive-body">
<div class="container archive-body__inner">
<!-- FILTER SIDEBAR (NEW) -->
<aside class="filter-sidebar" aria-label="Filter products">
<div class="filter-sidebar__head">
<h2 class="filter-sidebar__title">Refine</h2>
<button class="filter-sidebar__clear">Reset filters</button>
</div>
<!-- FILTER GROUP: Faction (checkbox) -->
<div class="filter-group rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="filter-group__head">
<h3 class="filter-group__title">Chapter / Faction</h3>
<span class="filter-group__chevron">▾</span>
</div>
<div class="filter-group__body">
<label class="filter-option filter-option--checked"><span class="filter-option__box"></span><span>Salamanders</span><span class="filter-option__count">2</span></label>
<label class="filter-option filter-option--checked"><span class="filter-option__box"></span><span>Imperial Fists</span><span class="filter-option__count">1</span></label>
<label class="filter-option"><span class="filter-option__box"></span><span>Blood Angels</span><span class="filter-option__count">2</span></label>
<label class="filter-option"><span class="filter-option__box"></span><span>Ultramarines</span><span class="filter-option__count">2</span></label>
<label class="filter-option"><span class="filter-option__box"></span><span>Dark Angels</span><span class="filter-option__count">1</span></label>
<label class="filter-option"><span class="filter-option__box"></span><span>Raven Guard</span><span class="filter-option__count">1</span></label>
<label class="filter-option"><span class="filter-option__box"></span><span>Black Templars</span><span class="filter-option__count">1</span></label>
<label class="filter-option"><span class="filter-option__box"></span><span>Deathwatch / Grey Knights</span><span class="filter-option__count">2</span></label>
<label class="filter-option"><span class="filter-option__box"></span><span>Generic / Starter</span><span class="filter-option__count">2</span></label>
</div>
</div>
<!-- FILTER GROUP: Points cost (radio) -->
<div class="filter-group rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="filter-group__head">
<h3 class="filter-group__title">Points Cost</h3>
<span class="filter-group__chevron">▾</span>
</div>
<div class="filter-group__body">
<label class="filter-option"><span class="filter-option__box filter-option__box--radio"></span><span>Under 500</span><span class="filter-option__count">0</span></label>
<label class="filter-option filter-option--checked"><span class="filter-option__box filter-option__box--radio"></span><span>500 – 1,000</span><span class="filter-option__count">9</span></label>
<label class="filter-option"><span class="filter-option__box filter-option__box--radio"></span><span>1,000 – 2,000</span><span class="filter-option__count">5</span></label>
<label class="filter-option"><span class="filter-option__box filter-option__box--radio"></span><span>2,000+</span><span class="filter-option__count">0</span></label>
</div>
</div>
<!-- FILTER GROUP: In stock + On sale toggles -->
<div class="filter-group rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="filter-group__head">
<h3 class="filter-group__title">Availability</h3>
<span class="filter-group__chevron">▾</span>
</div>
<div class="filter-group__body">
<label class="filter-toggle filter-toggle--on">
<span>In stock only</span>
<span class="filter-toggle__switch"></span>
</label>
<label class="filter-toggle">
<span>On sale</span>
<span class="filter-toggle__switch"></span>
</label>
<label class="filter-toggle">
<span>Pre-order</span>
<span class="filter-toggle__switch"></span>
</label>
</div>
</div>
<!-- FILTER GROUP: Price range -->
<div class="filter-group rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="filter-group__head">
<h3 class="filter-group__title">Price</h3>
<span class="filter-group__chevron">▾</span>
</div>
<div class="filter-group__body">
<div class="filter-range">
<div class="filter-range__track">
<span class="filter-range__fill"></span>
<span class="filter-range__handle filter-range__handle--lo"></span>
<span class="filter-range__handle filter-range__handle--hi"></span>
</div>
<div class="filter-range__inputs">
<span class="filter-range__field"><span>£</span><input type="text" value="95"></span>
<span class="filter-range__dash">—</span>
<span class="filter-range__field"><span>£</span><input type="text" value="130"></span>
</div>
</div>
</div>
</div>
<!-- FILTER GROUP: Game system -->
<div class="filter-group rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="filter-group__head">
<h3 class="filter-group__title">Game System</h3>
<span class="filter-group__chevron">▾</span>
</div>
<div class="filter-group__body">
<label class="filter-option filter-option--checked"><span class="filter-option__box"></span><span>40K — 10th Edition</span><span class="filter-option__count">13</span></label>
<label class="filter-option"><span class="filter-option__box"></span><span>40K — 9th Edition (legacy)</span><span class="filter-option__count">1</span></label>
</div>
</div>
</aside>
<!-- PRODUCT GRID -->
<div class="archive-grid" id="results-grid">
<!-- Card 1: Salamanders -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--sal">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Salamanders Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+100 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
<span class="archive-product-card__sale-pill">Save £15</span>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Salamanders</span>
<h3 class="archive-product-card__title">Combat Patrol: Salamanders</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.9 (184)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£100.00</span>
<span class="archive-product-card__price-rrp">£115.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 2: Imperial Fists -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--if">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Imperial Fists Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+100 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Imperial Fists</span>
<h3 class="archive-product-card__title">Combat Patrol: Imperial Fists</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.8 (142)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£100.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 3: Blood Angels -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--ba">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Blood Angels Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+100 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Blood Angels</span>
<h3 class="archive-product-card__title">Combat Patrol: Blood Angels</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.9 (203)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£100.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 4: Ultramarines -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--um">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Ultramarines Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+95 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Ultramarines</span>
<h3 class="archive-product-card__title">Combat Patrol: Ultramarines</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.8 (197)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£95.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 5: Dark Angels -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--da">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Dark Angels Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+105 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Dark Angels</span>
<h3 class="archive-product-card__title">Combat Patrol: Dark Angels</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.7 (156)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£105.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 6: Raven Guard -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--rg">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Raven Guard Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+100 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Raven Guard</span>
<h3 class="archive-product-card__title">Combat Patrol: Raven Guard</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.6 (98)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£100.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 7: Generic Space Marines (highlighted Quick view source — open in modal below) -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--gen">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Space Marines Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+95 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Generic · Space Marines</span>
<h3 class="archive-product-card__title">Combat Patrol: Space Marines</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.9 (218)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£95.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 8: Black Templars -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--bt">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Black Templars Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+105 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Black Templars</span>
<h3 class="archive-product-card__title">Combat Patrol: Black Templars</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.8 (134)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£105.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 9: Iron Hands -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--ih">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Iron Hands Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+100 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Iron Hands</span>
<h3 class="archive-product-card__title">Combat Patrol: Iron Hands</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.7 (78)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£100.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 10: White Scars -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--ws">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">White Scars Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+105 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · White Scars</span>
<h3 class="archive-product-card__title">Combat Patrol: White Scars</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.6 (62)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£105.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 11: Deathwatch -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--dw">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Deathwatch Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+125 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Chapter · Deathwatch</span>
<h3 class="archive-product-card__title">Combat Patrol: Deathwatch</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.8 (89)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£125.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 12: Grey Knights -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--gk">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Grey Knights Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+130 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Allied · Grey Knights</span>
<h3 class="archive-product-card__title">Combat Patrol: Grey Knights</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.7 (74)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£130.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 13: Starter Set: Space Marines -->
<article class="archive-product-card">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--start">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Starter Set · Space Marines</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · Starter</span>
<span class="archive-product-card__loyalty">+125 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
<span class="archive-product-card__sale-pill">Newcomer pick</span>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Starter · First Army</span>
<h3 class="archive-product-card__title">Starter Set: Space Marines</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.9 (167)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£125.00</span>
</div>
<div class="archive-product-card__stock"><span class="archive-product-card__stock-dot"></span>In stock — ships 24h</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Add to Cart</button>
</div>
</div>
</article>
<!-- Card 14: Adeptus Custodes (out of stock state demo) -->
<article class="archive-product-card archive-product-card--out-of-stock">
<div class="archive-product-card__media">
<div class="archive-product-card__image-wrap">
<div class="product-placeholder product-placeholder--cust">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Adeptus Custodes Combat Patrol</div>
</div>
</div>
<span class="archive-product-card__eyebrow-tag">40K · 10th Ed</span>
<span class="archive-product-card__loyalty">+135 PTS</span>
<button class="archive-product-card__wishlist" aria-label="Add to wishlist">♥</button>
</div>
<div class="archive-product-card__body">
<span class="archive-product-card__chapter">Allied · Custodes</span>
<h3 class="archive-product-card__title">Combat Patrol: Adeptus Custodes</h3>
<div class="archive-product-card__rating">★ ★ ★ ★ ★ <em>4.8 (51)</em></div>
<div class="archive-product-card__price-line">
<span class="archive-product-card__price">£135.00</span>
</div>
<div class="archive-product-card__stock archive-product-card__stock--out"><span class="archive-product-card__stock-dot"></span>Out of stock — notify me</div>
<div class="archive-product-card__cta-row">
<button class="archive-product-card__quickview">Quick View</button>
<button class="archive-product-card__atc">Notify me</button>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ========== GEAR DIVIDER between grid and pagination ========== -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ========== PAGINATION (NEW) ========== -->
<div class="pagination" style="background: var(--rodeo);">
<div class="container">
<div class="pagination__inner">
<button class="pagination__btn pagination__btn--label pagination__btn--disabled">← Previous</button>
<button class="pagination__btn pagination__btn--current" aria-current="page">1</button>
<button class="pagination__btn">2</button>
<button class="pagination__btn">3</button>
<span class="pagination__ellipsis">…</span>
<button class="pagination__btn">7</button>
<button class="pagination__btn pagination__btn--label">Next →</button>
</div>
<div class="pagination__loadmore">
<button class="pagination__loadmore-btn">Load more — show the next 12</button>
</div>
</div>
</div>
<!-- ========== QUICK VIEW MODAL — OPEN STATE (NEW) ========== -->
<div class="quick-view-overlay" aria-label="Quick view preview">
<div class="container">
<div class="quick-view-modal rivet-panel" role="dialog" aria-modal="true" aria-labelledby="qv-title">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<button class="quick-view-modal__close" aria-label="Close quick view">×</button>
<div class="quick-view-modal__inner">
<!-- Gallery -->
<div class="quick-view-modal__gallery">
<div class="quick-view-modal__main">
<div class="product-placeholder product-placeholder--gen">
<div class="product-placeholder__box"><div class="product-placeholder__cog"></div></div>
<div class="product-placeholder__label">Space Marines Combat Patrol</div>
</div>
</div>
<div class="quick-view-modal__thumbs">
<div class="quick-view-modal__thumb quick-view-modal__thumb--active">
<div class="product-placeholder product-placeholder--gen"><div class="product-placeholder__box"></div></div>
</div>
<div class="quick-view-modal__thumb">
<div class="product-placeholder product-placeholder--gen"><div class="product-placeholder__box"></div></div>
</div>
<div class="quick-view-modal__thumb">
<div class="product-placeholder product-placeholder--gen"><div class="product-placeholder__box"></div></div>
</div>
<div class="quick-view-modal__thumb">
<div class="product-placeholder product-placeholder--gen"><div class="product-placeholder__box"></div></div>
</div>
</div>
</div>
<!-- Content -->
<div class="quick-view-modal__content">
<span class="quick-view-modal__eyebrow">Generic · Space Marines · 40K 10th Edition</span>
<h2 class="quick-view-modal__title" id="qv-title">Combat Patrol: Space Marines</h2>
<span class="quick-view-modal__rule" aria-hidden="true"></span>
<div class="quick-view-modal__rating-row">
<span class="quick-view-modal__stars">★ ★ ★ ★ ★</span>
<span class="quick-view-modal__rating-count">4.9 — 218 reviews</span>
</div>
<div class="quick-view-modal__variation">
<span class="quick-view-modal__variation-label">Build option</span>
<div class="quick-view-modal__chips">
<button class="quick-view-modal__chip quick-view-modal__chip--selected">Standard box</button>
<button class="quick-view-modal__chip">+ Paint Bundle</button>
<button class="quick-view-modal__chip">+ Codex</button>
</div>
</div>
<!-- CLEAN ZONE — price + ATC kept free of ornament -->
<div class="quick-view-modal__clean-zone">
<div class="quick-view-modal__price-line">
<span class="quick-view-modal__price-current">£95.00</span>
<span class="quick-view-modal__price-rrp">£110.00</span>
<span class="quick-view-modal__loyalty">+95 PTS earned</span>
</div>
<div class="quick-view-modal__stock"><span class="quick-view-modal__stock-dot"></span>In stock — ships within 24h, weather permitting.</div>
<div class="quick-view-modal__qty-row">
<div class="quick-view-modal__qty">
<button aria-label="Decrease quantity">−</button>
<input type="text" value="1" aria-label="Quantity">
<button aria-label="Increase quantity">+</button>
</div>
<button class="quick-view-modal__atc">Add to Cart</button>
<button class="quick-view-modal__wishlist-btn" aria-label="Add to wishlist">♥</button>
</div>
</div>
<a href="#" class="quick-view-modal__details-link">View full details →</a>
</div>
</div>
</div>
</div>
</div>
<!-- ========== GEAR DIVIDER between modal and curated slot ========== -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ========== CURATED BOTTOM SLOT (NEW) ========== -->
<section class="curated-bottom-slot">
<div class="container">
<div class="section-head">
<span class="eyebrow-stamp">From the Workbench</span>
<h2 class="section-head__title">Workbench Picks for Combat Patrols</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Didn't quite find your fit? A guide for the brush hand and a finished kit from the bench next door — both worth a minute.</p>
</div>
<div class="curated-bottom-slot__grid">
<!-- Curated card 1: How-to guide -->
<article class="curated-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="curated-card__cover">
<div class="curated-card__cover-art"><div class="curated-card__cover-cog"></div></div>
</div>
<div class="curated-card__body">
<div class="curated-card__meta">
<span class="curated-card__pill">How-To Guide</span>
<span class="curated-card__pill curated-card__pill--ghost">14 min read</span>
<span class="curated-card__pill curated-card__pill--ghost">Beginner</span>
</div>
<span class="curated-card__kicker">Painting · Combat Patrol Marines</span>
<h3 class="curated-card__title">Edge Highlighting a Combat Patrol in an Evening</h3>
<p class="curated-card__copy">A workbench-tested route from grey plastic to tabletop-ready ten — no airbrush, no expensive subscriptions, no shame in a clean drybrush.</p>
<button class="curated-card__cta">Read the guide →</button>
</div>
</article>
<!-- Curated card 2: Painting showcase highlight -->
<article class="curated-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="curated-card__cover">
<div class="curated-card__cover-art curated-card__cover-art--paint"><div class="curated-card__cover-cog"></div></div>
<div class="curated-card__author">@brushhand · Salamanders</div>
</div>
<div class="curated-card__body">
<div class="curated-card__meta">
<span class="curated-card__pill">Painting Showcase</span>
<span class="curated-card__pill curated-card__pill--ghost">Salamanders</span>
<span class="curated-card__pill curated-card__pill--ghost">Featured</span>
</div>
<span class="curated-card__kicker">Painted by · Mara Halloran</span>
<h3 class="curated-card__title">A Salamanders Combat Patrol, Worked Slow</h3>
<p class="curated-card__copy">Three glazes of fire on the shoulder plates, oil-pin wash in the rivets, and a halo of metallic that took two weekends — Mara's run of the Salamander box, the long way round.</p>
<button class="curated-card__cta">See the full gallery →</button>
</div>
</article>
</div>
</div>
</section>
<!-- ========== NEWSLETTER STRIP (REUSED: newsletter-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, pre-orders, and paint-night invites — sent when there's something worth sending.</p>
</div>
<form class="newsletter-garrison__form" onsubmit="return false;">
<input type="email" placeholder="your.signal@dispatch.com" aria-label="Email">
<button type="submit">Enlist</button>
</form>
</div>
</div>
</section>
<!-- ========== GLOBAL FOOTER (REUSED: site-footer) ========== -->
<footer class="site-footer">
<div class="site-footer__columns">
<div class="site-footer__brand">
<div class="site-footer__brand-mark">
<span class="site-header__cog" aria-hidden="true"></span>
<span class="site-footer__word">War Dungeon</span>
</div>
<p class="site-footer__copy">The workbench of warriors — Warhammer and Dungeons & Dragons, packed with the bits no one else bothers to.</p>
<span class="site-footer__badge">⬡ A Nerdworks Brand</span>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__list">
<li><a href="#">Warhammer 40,000</a></li>
<li><a href="#">Age of Sigmar</a></li>
<li><a href="#">The Old World</a></li>
<li><a href="#">Dungeons & Dragons</a></li>
<li><a href="#">Paints & Hobby</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Discover</h4>
<ul class="site-footer__list">
<li><a href="#">Tools</a></li>
<li><a href="#">Learn</a></li>
<li><a href="#">Creators</a></li>
<li><a href="#">Painting Showcase</a></li>
<li><a href="#">Community</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Help</h4>
<ul class="site-footer__list">
<li><a href="#">Contact</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Track Order</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Brand & Loyalty</h4>
<ul class="site-footer__list">
<li><a href="#">About War Dungeon</a></li>
<li><a href="#">Sister Brands</a></li>
<li><a href="#">Loyalty Programme</a></li>
<li><a href="#">Affiliate</a></li>
</ul>
</div>
</div>
<div class="site-footer__baseline">
<div class="site-footer__baseline-inner">
<div class="site-footer__pay">
<span>Visa</span><span>MC</span><span>Amex</span><span>PayPal</span><span>Apple Pay</span>
</div>
<div class="site-footer__legal">© 2026 War Dungeon · A Nerdworks Brand · Privacy · Terms · Cookies</div>
</div>
</div>
</footer>
</body>
</html>