/wire-template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pokémon Prismatic Evolutions Booster Box — Nerdworks</title>
<link rel="stylesheet" href="https://use.typekit.net/vlm3jnu.css">
<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=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<style>
:root {
/* Colour palette — verbatim from styleguide */
--anchor: #1f231f;
--anchor-elevated: #262a26;
--bright: #f0f2ee;
--primary: #266038;
--saffron: #f5c840;
/* Fonts */
--font-heading: "proxima-nova", system-ui, sans-serif;
--font-body: "proxima-nova", system-ui, sans-serif;
--font-label: "JetBrains Mono", ui-monospace, monospace;
/* Type scale */
--fs-display: 52px;
--fs-h2: 30px;
--fs-h3: 21px;
--fs-h4: 17px;
--fs-body: 16px;
--fs-lead: 19px;
--fs-meta: 13px;
--fs-eyebrow: 13px;
--fs-label: 14px;
--fs-label-card: 22px;
/* Spacing */
--gutter: 20px;
--space-15: 15px;
--space-20: 20px;
--space-30: 30px;
--space-40: 40px;
--space-60: 60px;
--container-max: 1400px;
/* Radii */
--radius-interactive: 4px;
--radius-card: 8px;
/* Shadows */
--card-shadow: 0 8px 24px rgba(25, 28, 25, 0.1);
--card-shadow-hover: 0 16px 32px rgba(25, 28, 25, 0.2);
/* Hairline rules */
--rule-on-anchor: rgba(240, 242, 238, 0.12);
--rule-on-bright: rgba(25, 28, 25, 0.12);
--rule-on-primary: rgba(240, 242, 238, 0.18);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--anchor);
color: var(--bright);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
font-weight: 400;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
/* ---- Section frame ---- */
.section { width: 100%; }
.section--anchor { background: var(--anchor); color: var(--bright); }
.section--bright { background: var(--bright); color: var(--anchor); }
.section--primary { background: var(--primary); color: var(--bright); }
.section__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
padding-block: var(--space-60);
}
/* ============================================================
site-header [REUSED VERBATIM]
============================================================ */
.site-header { background: var(--anchor); color: var(--bright); border-bottom: 1px solid var(--rule-on-anchor); }
.site-header__inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-20) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-30); }
.site-header__brand { font-family: var(--font-heading); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--bright); }
.site-header__brand span { color: var(--saffron); }
.site-header__nav { display: flex; gap: var(--space-30); flex-wrap: wrap; }
.site-header__link { font-size: var(--fs-h4); font-weight: 600; color: var(--bright); }
.site-header__link:hover { color: var(--saffron); }
.site-header__actions { display: flex; gap: var(--space-15); align-items: center; }
.site-header__cart { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); color: var(--saffron); }
@media (max-width: 560px) { .site-header__nav { display: none; } }
/* ============================================================
btn [REUSED VERBATIM]
============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; border-radius: var(--radius-interactive); font-family: var(--font-heading); font-size: var(--fs-body); font-weight: 600; line-height: 1; border: 1px solid transparent; transition: filter .15s ease, background .15s ease, color .15s ease; cursor: pointer; }
.btn--anchor.btn--primary { background: var(--saffron); color: var(--anchor); }
.btn--bright.btn--primary { background: var(--primary); color: var(--bright); }
.btn--primary.btn--primary-ground { background: var(--anchor); color: var(--bright); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--anchor.btn--secondary { background: transparent; border-color: var(--saffron); color: var(--saffron); }
.btn--bright.btn--secondary { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn--secondary.btn--primary-ground { background: transparent; border-color: var(--saffron); color: var(--saffron); }
.btn--anchor.btn--secondary:hover { background: rgba(245,200,64,0.12); }
.btn--bright.btn--secondary:hover { background: rgba(38,96,56,0.08); }
.btn--secondary.btn--primary-ground:hover { background: rgba(245,200,64,0.12); }
.btn-row { display: flex; gap: var(--space-15); flex-wrap: wrap; }
.btn-row--center { justify-content: center; }
/* ============================================================
section-header [REUSED VERBATIM]
============================================================ */
.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-30); margin-bottom: var(--space-40); }
.section-header--center { flex-direction: column; align-items: center; text-align: center; }
.section-header__group { max-width: 760px; }
.section-header__eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-15); }
.section-header__title { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.section-header__lead { font-size: var(--fs-lead); line-height: 1.5; margin-top: var(--space-15); }
.section-header__link { flex: 0 0 auto; font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; white-space: nowrap; }
.section-header__link::after { content: " \2192"; }
.section-header__link:hover { text-decoration: underline; }
.section-header--anchor .section-header__eyebrow, .section-header--anchor .section-header__link { color: var(--saffron); }
.section-header--bright .section-header__eyebrow, .section-header--bright .section-header__link { color: var(--primary); }
.section-header--primary .section-header__eyebrow, .section-header--primary .section-header__link { color: var(--saffron); }
@media (max-width: 960px) { .section-header { flex-direction: column; align-items: flex-start; } }
/* ============================================================
product-card [REUSED VERBATIM]
============================================================ */
.product-card { border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--card-shadow); transition: box-shadow .2s ease, transform .2s ease; }
.product-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.product-card__media { width: 100%; }
.product-card__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.product-card__body { padding: var(--space-15); display: flex; flex-direction: column; gap: var(--space-15); flex: 1; }
.product-card__eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.product-card__title { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.product-card__price { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label-card); }
.product-card__cta { margin-top: auto; }
.product-card--anchor { background: var(--anchor-elevated); color: var(--bright); }
.product-card--anchor .product-card__title { color: var(--bright); }
.product-card--anchor .product-card__eyebrow, .product-card--anchor .product-card__price { color: var(--saffron); }
.product-card--bright { background: var(--anchor); color: var(--bright); }
.product-card--bright .product-card__title { color: var(--bright); }
.product-card--bright .product-card__eyebrow, .product-card--bright .product-card__price { color: var(--saffron); }
.product-card--primary { background: var(--bright); color: var(--anchor); }
.product-card--primary .product-card__title { color: var(--anchor); }
.product-card--primary .product-card__eyebrow, .product-card--primary .product-card__price { color: var(--primary); }
.product-card--anchor .btn--secondary, .product-card--bright .btn--secondary { background: transparent; border-color: var(--saffron); color: var(--saffron); }
.product-card--anchor .btn--secondary:hover, .product-card--bright .btn--secondary:hover { background: rgba(245,200,64,0.12); }
.product-card--primary .btn--secondary { background: transparent; border-color: var(--primary); color: var(--primary); }
.product-card--primary .btn--secondary:hover { background: rgba(38,96,56,0.08); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
@media (max-width: 960px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }
/* ============================================================
event-card [REUSED VERBATIM]
============================================================ */
.event-card { border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--card-shadow); transition: box-shadow .2s ease, transform .2s ease; }
.event-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.event-card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.event-card__body { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-15); flex: 1; }
.event-card__eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.event-card__title { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.event-card__date { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); }
.event-card__desc { font-size: var(--fs-body); line-height: 1.65; }
.event-card__cta { margin-top: auto; }
.event-card--primary { background: var(--bright); color: var(--anchor); }
.event-card--primary .event-card__title { color: var(--anchor); }
.event-card--primary .event-card__eyebrow, .event-card--primary .event-card__date { color: var(--primary); }
.event-card--primary .btn--secondary { border-color: var(--primary); color: var(--primary); }
.event-card--primary .btn--secondary:hover { background: rgba(38,96,56,0.08); }
.event-card--anchor { background: var(--anchor-elevated); color: var(--bright); }
.event-card--anchor .event-card__title { color: var(--bright); }
.event-card--anchor .event-card__eyebrow, .event-card--anchor .event-card__date { color: var(--saffron); }
.event-card--anchor .btn--secondary { border-color: var(--saffron); color: var(--saffron); }
.event-card--anchor .btn--secondary:hover { background: rgba(245,200,64,0.12); }
.event-card--bright { background: var(--anchor); color: var(--bright); }
.event-card--bright .event-card__title { color: var(--bright); }
.event-card--bright .event-card__eyebrow, .event-card--bright .event-card__date { color: var(--saffron); }
.event-card--bright .btn--secondary { border-color: var(--saffron); color: var(--saffron); }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
@media (max-width: 960px) { .event-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .event-grid { grid-template-columns: 1fr; } }
/* ============================================================
site-footer [REUSED VERBATIM]
============================================================ */
.site-footer { background: var(--anchor); color: var(--bright); padding-block: var(--space-40); border-top: 1px solid var(--rule-on-anchor); }
.site-footer__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; gap: var(--space-30); justify-content: space-between; align-items: center; }
.site-footer__brand { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--bright); }
.site-footer__brand span { color: var(--saffron); }
.site-footer__meta { font-size: var(--fs-meta); color: rgba(240,242,238,0.62); }
.site-footer__links { display: flex; gap: var(--space-20); flex-wrap: wrap; }
.site-footer__link { font-size: var(--fs-meta); font-weight: 600; }
.site-footer__link:hover { color: var(--saffron); }
/* ============================================================
breadcrumbs [NEW]
============================================================ */
.breadcrumbs { max-width: var(--container-max); margin-inline: auto; padding: var(--space-20) var(--gutter) 10px; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); }
.breadcrumbs__item { color: var(--saffron); }
.breadcrumbs__sep { color: rgba(245,200,64,0.55); }
.breadcrumbs__item a:hover { text-decoration: underline; }
.breadcrumbs__item--current { color: rgba(245,200,64,0.7); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ============================================================
product-hero [NEW]
============================================================ */
.product-hero { background: var(--anchor); color: var(--bright); }
.product-hero__inner { max-width: var(--container-max); margin-inline: auto; padding: 10px var(--gutter) var(--space-60); display: grid; grid-template-columns: 55% 45%; gap: var(--space-40); align-items: start; }
.product-hero__gallery { display: flex; flex-direction: column; gap: var(--space-15); }
.product-hero__main { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--card-shadow); }
.product-hero__main-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.product-hero__zoom { position: absolute; right: var(--space-15); bottom: var(--space-15); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-interactive); background: rgba(31,35,31,0.7); color: var(--saffron); }
.product-hero__zoom svg { width: 20px; height: 20px; }
.product-hero__thumbs { display: flex; gap: 10px; }
.product-hero__thumb { width: 80px; height: 80px; border-radius: var(--radius-interactive); overflow: hidden; border: 2px solid transparent; cursor: pointer; flex: 0 0 auto; }
.product-hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-hero__thumb--active { border-color: var(--saffron); }
.product-hero__panel { position: sticky; top: var(--space-20); display: flex; flex-direction: column; gap: var(--space-20); }
.product-hero__eyebrow-row { display: flex; align-items: center; gap: var(--space-15); flex-wrap: wrap; }
.product-hero__set-code { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--saffron); }
.product-hero__tag { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: var(--radius-interactive); background: var(--saffron); color: var(--anchor); }
.product-hero__title { font-family: var(--font-heading); font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--bright); margin: 0; }
.product-hero__reviews { display: flex; align-items: center; gap: 10px; }
.product-hero__stars { display: inline-flex; gap: 2px; color: var(--saffron); }
.product-hero__stars svg { width: 18px; height: 18px; }
.product-hero__star--empty { color: rgba(245,200,64,0.3); }
.product-hero__review-count { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); color: rgba(240,242,238,0.7); }
.product-hero__price-block { display: flex; flex-direction: column; gap: 4px; }
.product-hero__rrp { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-h4); color: rgba(240,242,238,0.5); text-decoration: line-through; }
.product-hero__price { font-family: var(--font-label); font-weight: 500; font-size: 30px; color: var(--saffron); }
.product-hero__klarna { font-family: var(--font-label); font-weight: 500; font-size: 12px; color: rgba(240,242,238,0.7); margin-top: 4px; }
.product-hero__stock { align-self: flex-start; font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); padding: 6px 14px; border-radius: 999px; }
.product-hero__stock--low { background: var(--anchor); color: var(--saffron); border: 1px solid var(--saffron); }
.product-hero__variants { display: flex; flex-direction: column; gap: 10px; }
.product-hero__variant-label { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--saffron); }
.product-hero__swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.product-hero__swatch { font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 600; color: var(--bright); padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(240,242,238,0.2); background: transparent; cursor: pointer; }
.product-hero__swatch--active { border: 2px solid var(--saffron); padding: 7px 15px; }
.product-hero__qty { display: flex; align-items: center; width: max-content; height: 44px; border-radius: var(--radius-interactive); overflow: hidden; background: var(--anchor-elevated); }
.product-hero__qty-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--bright); font-size: 20px; font-family: var(--font-heading); cursor: pointer; transition: color .15s ease; }
.product-hero__qty-btn:hover { color: var(--saffron); }
.product-hero__qty-value { min-width: 48px; text-align: center; font-family: var(--font-label); font-weight: 500; font-size: var(--fs-body); color: var(--bright); }
.product-hero__cta-primary { width: 100%; min-height: 52px; border-radius: var(--radius-interactive); background: var(--saffron); color: var(--anchor); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-body); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter .15s ease; }
.product-hero__cta-primary:hover { filter: brightness(1.08); }
.product-hero__cta-secondary { width: 100%; min-height: 44px; border-radius: var(--radius-interactive); background: transparent; border: 1px solid var(--saffron); color: var(--saffron); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-body); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease; }
.product-hero__cta-secondary:hover { background: rgba(245,200,64,0.12); }
.product-hero__cta-secondary svg { width: 18px; height: 18px; }
.product-hero__trust { display: flex; gap: var(--space-20); flex-wrap: wrap; padding-top: var(--space-15); border-top: 1px solid var(--rule-on-anchor); }
.product-hero__trust-item { display: flex; align-items: center; gap: 6px; font-family: var(--font-label); font-weight: 500; font-size: 12px; color: rgba(240,242,238,0.8); }
.product-hero__trust-item svg { width: 16px; height: 16px; color: var(--saffron); flex: 0 0 auto; }
.product-hero__payments { display: flex; align-items: center; gap: var(--space-15); flex-wrap: wrap; }
.product-hero__pay { font-family: var(--font-label); font-weight: 500; font-size: 12px; color: rgba(240,242,238,0.6); letter-spacing: 0.02em; }
@media (max-width: 960px) {
.product-hero__inner { grid-template-columns: 1fr; }
.product-hero__panel { position: static; }
}
/* ============================================================
product-meta-strip [NEW]
============================================================ */
.product-meta-strip { background: var(--anchor); color: var(--bright); }
.product-meta-strip__inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-20) var(--gutter); }
.product-meta-strip__row { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.product-meta-strip__slot { flex: 1; min-width: 140px; padding: 0 var(--space-20); display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--rule-on-anchor); }
.product-meta-strip__slot:first-child { border-left: none; padding-left: 0; }
.product-meta-strip__label { font-family: var(--font-label); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--saffron); }
.product-meta-strip__value { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); color: var(--bright); }
@media (max-width: 960px) {
.product-meta-strip__slot { flex: 1 1 30%; padding: var(--space-15) var(--space-15); border-left: none; border-top: 1px solid var(--rule-on-anchor); }
.product-meta-strip__slot:first-child { padding-left: var(--space-15); }
}
/* ============================================================
product-description [NEW]
============================================================ */
.product-description { display: grid; grid-template-columns: 60% 40%; gap: var(--space-40); }
.product-description__main { display: flex; flex-direction: column; gap: var(--space-20); }
.product-description__eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); }
.product-description__body { font-size: var(--fs-body); line-height: 1.65; color: var(--anchor); margin: 0; }
.product-description__pullquote { font-family: var(--font-heading); font-size: 22px; font-style: italic; line-height: 1.4; color: var(--anchor); border-left: 4px solid var(--primary); padding-left: var(--space-20); margin: var(--space-15) 0; }
.product-description__sidecar { display: flex; flex-direction: column; gap: var(--space-20); }
.product-description__card { border-radius: var(--radius-card); padding: var(--space-20); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: var(--space-15); }
.product-description__card-eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.product-description__card--anchor { background: var(--anchor); color: var(--bright); }
.product-description__card--anchor .product-description__card-eyebrow { color: var(--saffron); }
.product-description__card--primary { background: var(--primary); color: var(--bright); }
.product-description__card--primary .product-description__card-eyebrow { color: var(--saffron); }
.product-description__box-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.product-description__box-item { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); color: var(--bright); }
.product-description__check { flex: 0 0 auto; width: 16px; height: 16px; color: var(--saffron); margin-top: 2px; }
.product-description__spec-table { display: flex; flex-direction: column; }
.product-description__spec-row { display: flex; justify-content: space-between; gap: var(--space-15); padding: 8px 0; border-bottom: 1px solid var(--rule-on-anchor); font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); }
.product-description__spec-row:last-child { border-bottom: none; }
.product-description__spec-key { color: rgba(240,242,238,0.6); }
.product-description__spec-value { color: var(--bright); text-align: right; }
.product-description__staff-quote { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-h4); line-height: 1.5; color: var(--bright); margin: 0; }
.product-description__staff-byline { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); color: var(--saffron); }
@media (max-width: 960px) {
.product-description { grid-template-columns: 1fr; }
}
/* ============================================================
spec-panel [NEW] (ground-relative)
============================================================ */
.spec-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-40); align-items: start; }
.spec-panel__heading { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--space-15); }
.spec-panel__eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: var(--space-15); }
.spec-panel__lead { font-size: var(--fs-lead); line-height: 1.5; margin: 0; }
.spec-panel__list { display: flex; flex-direction: column; }
.spec-panel__row { display: flex; justify-content: space-between; gap: var(--space-20); padding: 12px 0; border-bottom: 1px solid transparent; }
.spec-panel__row:last-child { border-bottom: none; }
.spec-panel__key { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.spec-panel__value { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); text-align: right; }
.spec-panel--anchor { color: var(--bright); }
.spec-panel--anchor .spec-panel__eyebrow, .spec-panel--anchor .spec-panel__key { color: var(--saffron); }
.spec-panel--anchor .spec-panel__row { border-bottom-color: var(--rule-on-anchor); }
.spec-panel--bright { color: var(--anchor); }
.spec-panel--bright .spec-panel__eyebrow, .spec-panel--bright .spec-panel__key { color: var(--primary); }
.spec-panel--bright .spec-panel__row { border-bottom-color: var(--rule-on-bright); }
.spec-panel--primary { color: var(--bright); }
.spec-panel--primary .spec-panel__eyebrow, .spec-panel--primary .spec-panel__key { color: var(--saffron); }
.spec-panel--primary .spec-panel__row { border-bottom-color: var(--rule-on-primary); }
@media (max-width: 960px) { .spec-panel { grid-template-columns: 1fr; gap: var(--space-30); } }
/* ============================================================
chase-card [NEW]
============================================================ */
.chase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.chase-card { border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--card-shadow); transition: box-shadow .2s ease, transform .2s ease; }
.chase-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.chase-card__media { position: relative; }
.chase-card__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.chase-card__rarity { position: absolute; top: var(--space-15); left: var(--space-15); font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); padding: 4px 10px; border-radius: var(--radius-interactive); }
.chase-card__body { padding: var(--space-15); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.chase-card__name { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; }
.chase-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-15); margin-top: auto; padding-top: 10px; border-top: 1px solid transparent; }
.chase-card__pull { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); }
.chase-card__price { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label-card); }
.chase-card--anchor { background: var(--anchor-elevated); color: var(--bright); }
.chase-card--anchor .chase-card__name { color: var(--bright); }
.chase-card--anchor .chase-card__rarity { background: var(--saffron); color: var(--anchor); }
.chase-card--anchor .chase-card__pull { color: rgba(240,242,238,0.62); }
.chase-card--anchor .chase-card__price { color: var(--saffron); }
.chase-card--anchor .chase-card__meta { border-top-color: var(--rule-on-anchor); }
.chase-card--bright { background: var(--anchor); color: var(--bright); }
.chase-card--bright .chase-card__name { color: var(--bright); }
.chase-card--bright .chase-card__rarity { background: var(--saffron); color: var(--anchor); }
.chase-card--bright .chase-card__pull { color: rgba(240,242,238,0.62); }
.chase-card--bright .chase-card__price { color: var(--saffron); }
.chase-card--bright .chase-card__meta { border-top-color: var(--rule-on-anchor); }
.chase-card--primary { background: var(--bright); color: var(--anchor); }
.chase-card--primary .chase-card__name { color: var(--anchor); }
.chase-card--primary .chase-card__rarity { background: var(--saffron); color: var(--anchor); }
.chase-card--primary .chase-card__pull { color: rgba(31,35,31,0.6); }
.chase-card--primary .chase-card__price { color: var(--primary); }
.chase-card--primary .chase-card__meta { border-top-color: var(--rule-on-bright); }
@media (max-width: 960px) { .chase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chase-grid { grid-template-columns: 1fr; } }
/* ============================================================
lore-band [NEW]
============================================================ */
.lore-band { position: relative; min-height: 480px; display: flex; align-items: center; overflow: hidden; }
.lore-band__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lore-band__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(25,28,25,0.92) 0%, rgba(25,28,25,0.7) 40%, rgba(25,28,25,0.3) 100%); }
.lore-band__content { position: relative; max-width: 720px; margin-left: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter))); margin-right: var(--gutter); padding-block: var(--space-40); }
.lore-band__eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--saffron); margin-bottom: var(--space-15); display: block; }
.lore-band__title { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--bright); margin: 0; }
.lore-band__body { font-size: 18px; line-height: 1.65; color: rgba(240,242,238,0.95); margin-top: var(--space-20); text-align: justify; }
@media (max-width: 960px) {
.lore-band__scrim { background: linear-gradient(to top, rgba(25,28,25,0.92) 0%, rgba(25,28,25,0.7) 60%, rgba(25,28,25,0.4) 100%); }
.lore-band__content { margin-inline: var(--gutter); }
}
/* ============================================================
singles-banner [NEW]
============================================================ */
.singles-banner { position: relative; min-height: 320px; display: flex; align-items: center; overflow: hidden; background: var(--primary); }
.singles-banner__inner { position: relative; width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 50% 50%; align-items: center; }
.singles-banner__content { padding-block: var(--space-40); max-width: 520px; }
.singles-banner__eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--saffron); margin-bottom: var(--space-15); display: block; }
.singles-banner__title { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--bright); margin: 0; }
.singles-banner__sub { font-size: 18px; line-height: 1.5; color: var(--bright); margin-top: var(--space-15); }
.singles-banner__cta { margin-top: var(--space-30); }
.singles-banner__fan { position: relative; height: 100%; min-height: 320px; }
.singles-banner__card { position: absolute; top: 50%; width: 150px; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--card-shadow-hover); }
.singles-banner__card img { width: 100%; height: 100%; object-fit: cover; }
.singles-banner__card--a { left: 14%; transform: translateY(-50%) rotate(-6deg); z-index: 1; }
.singles-banner__card--b { left: 38%; transform: translateY(-50%) rotate(2deg); z-index: 3; }
.singles-banner__card--c { left: 62%; transform: translateY(-50%) rotate(8deg); z-index: 2; }
@media (max-width: 960px) {
.singles-banner__inner { grid-template-columns: 1fr; }
.singles-banner__fan { display: none; }
}
/* ============================================================
review-card [NEW] (standard WC customer review, ground-relative)
============================================================ */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { border-radius: var(--radius-card); padding: var(--space-20); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s ease, transform .2s ease; }
.review-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.review-card__meta { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); display: flex; gap: 8px; align-items: center; }
.review-card__stars { letter-spacing: 1px; }
.review-card__title { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; margin: 0; }
.review-card__text { font-size: var(--fs-label); line-height: 1.6; margin: 0; }
.review-card--anchor { background: var(--anchor-elevated); color: var(--bright); }
.review-card--anchor .review-card__title { color: var(--bright); }
.review-card--anchor .review-card__meta, .review-card--anchor .review-card__stars { color: var(--saffron); }
.review-card--bright { background: var(--anchor); color: var(--bright); }
.review-card--bright .review-card__title { color: var(--bright); }
.review-card--bright .review-card__meta, .review-card--bright .review-card__stars { color: var(--saffron); }
.review-card--primary { background: var(--bright); color: var(--anchor); }
.review-card--primary .review-card__title { color: var(--anchor); }
.review-card--primary .review-card__meta, .review-card--primary .review-card__stars { color: var(--primary); }
@media (max-width: 960px) { .review-grid { grid-template-columns: 1fr; } }
/* ============================================================
collector-card [NEW]
============================================================ */
.collector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.collector-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-20); border-radius: var(--radius-card); padding: var(--space-20); box-shadow: var(--card-shadow); transition: box-shadow .2s ease, transform .2s ease; background: var(--anchor); color: var(--bright); }
.collector-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.collector-card__ratings { display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--rule-on-anchor); padding-right: var(--space-15); }
.collector-card__dim { display: flex; flex-direction: column; gap: 3px; }
.collector-card__dim-label { font-family: var(--font-label); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(240,242,238,0.6); }
.collector-card__dim-stars { display: inline-flex; gap: 1px; color: var(--saffron); }
.collector-card__dim-stars svg { width: 12px; height: 12px; }
.collector-card__star--empty { color: rgba(245,200,64,0.3); }
.collector-card__main { display: flex; flex-direction: column; gap: 10px; }
.collector-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.collector-card__name { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; color: var(--bright); }
.collector-card__badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 24px; background: var(--saffron); color: var(--anchor); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); cursor: help; }
.collector-card__badge svg { width: 12px; height: 12px; }
.collector-card__badge::after { content: "Verified Collector"; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--anchor-elevated); color: var(--bright); font-family: var(--font-label); font-weight: 500; font-size: 11px; padding: 4px 8px; border-radius: var(--radius-interactive); border: 1px solid var(--rule-on-anchor); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.collector-card__badge:hover::after { opacity: 1; }
.collector-card__text { font-size: var(--fs-label); line-height: 1.55; color: var(--bright); margin: 0; }
.collector-card__readmore { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); color: var(--saffron); }
.collector-card__readmore:hover { text-decoration: underline; }
.collector-card__photos { display: flex; gap: 8px; }
.collector-card__photo { width: 48px; height: 48px; border-radius: var(--radius-interactive); object-fit: cover; }
.collector-card__time { font-family: var(--font-label); font-weight: 500; font-size: 11px; color: rgba(240,242,238,0.6); }
@media (max-width: 960px) { .collector-grid { grid-template-columns: 1fr; } }
/* ============================================================
pickup-strip [NEW]
============================================================ */
.pickup-strip { background: var(--primary); color: var(--bright); }
.pickup-strip__inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-30) var(--gutter); display: flex; align-items: center; gap: var(--space-40); flex-wrap: wrap; }
.pickup-strip__icon { width: 40px; height: 40px; color: var(--saffron); flex: 0 0 auto; }
.pickup-strip__status { display: flex; flex-direction: column; gap: 4px; }
.pickup-strip__status-line { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); color: var(--saffron); }
.pickup-strip__store { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); color: var(--bright); }
.pickup-strip__detail { display: flex; flex-direction: column; gap: 4px; padding-left: var(--space-40); border-left: 1px solid var(--rule-on-primary); }
.pickup-strip__label { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--saffron); }
.pickup-strip__value { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); color: var(--bright); }
@media (max-width: 700px) {
.pickup-strip__detail { padding-left: 0; border-left: none; }
}
</style>
</head>
<body>
<!-- ===================== site-header [REUSED] ===================== -->
<header class="site-header">
<div class="site-header__inner">
<a class="site-header__brand" href="#">Nerd<span>works</span></a>
<nav class="site-header__nav">
<a class="site-header__link" href="#">Trading cards</a>
<a class="site-header__link" href="#">Singles</a>
<a class="site-header__link" href="#">Warhammer</a>
<a class="site-header__link" href="#">Star Wars</a>
<a class="site-header__link" href="#">Events</a>
<a class="site-header__link" href="#">Journal</a>
</nav>
<div class="site-header__actions">
<span class="site-header__cart">Basket (0)</span>
</div>
</div>
</header>
<!-- ===================== breadcrumbs [NEW] · anchor ===================== -->
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item"><a href="#">Home</a></li>
<li class="breadcrumbs__sep">›</li>
<li class="breadcrumbs__item"><a href="#">Trading cards</a></li>
<li class="breadcrumbs__sep">›</li>
<li class="breadcrumbs__item"><a href="#">Pokémon</a></li>
<li class="breadcrumbs__sep">›</li>
<li class="breadcrumbs__item"><a href="#">Sealed</a></li>
<li class="breadcrumbs__sep">›</li>
<li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">Prismatic Evolutions Booster Box</li>
</ol>
</nav>
<!-- ===================== Hero / product-hero [NEW] · anchor (pinned) ===================== -->
<section class="product-hero" aria-label="Product">
<div class="product-hero__inner">
<div class="product-hero__gallery">
<div class="product-hero__main">
<img class="product-hero__main-image" src="https://picsum.photos/seed/nw-pe-main/1280/720" alt="Pokémon Prismatic Evolutions sealed booster box, front of display">
<span class="product-hero__zoom" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/><path d="M11 8v6M8 11h6"/></svg>
</span>
</div>
<div class="product-hero__thumbs">
<div class="product-hero__thumb product-hero__thumb--active"><img src="https://picsum.photos/seed/nw-pe-main/160/160" alt="Box front"></div>
<div class="product-hero__thumb"><img src="https://picsum.photos/seed/nw-pe-2/160/160" alt="Box rear with set details"></div>
<div class="product-hero__thumb"><img src="https://picsum.photos/seed/nw-pe-3/160/160" alt="Booster packs lined up"></div>
<div class="product-hero__thumb"><img src="https://picsum.photos/seed/nw-pe-4/160/160" alt="Single booster pack art"></div>
<div class="product-hero__thumb"><img src="https://picsum.photos/seed/nw-pe-5/160/160" alt="Box on the shop counter"></div>
</div>
</div>
<div class="product-hero__panel">
<div class="product-hero__eyebrow-row">
<span class="product-hero__set-code">Pokémon · SV8.5</span>
<span class="product-hero__tag">Sealed booster box</span>
</div>
<h1 class="product-hero__title">Prismatic Evolutions Booster Box</h1>
<div class="product-hero__reviews">
<span class="product-hero__stars" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8L2.2 9.5l6.9-.6z"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8L2.2 9.5l6.9-.6z"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8L2.2 9.5l6.9-.6z"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8L2.2 9.5l6.9-.6z"/></svg>
<svg class="product-hero__star--empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8L2.2 9.5l6.9-.6z"/></svg>
</span>
<span class="product-hero__review-count">4.6 · (38 reviews)</span>
</div>
<div class="product-hero__price-block">
<span class="product-hero__rrp">£124.95</span>
<span class="product-hero__price">£109.95</span>
<span class="product-hero__klarna">Klarna from £18.32/month</span>
</div>
<span class="product-hero__stock product-hero__stock--low">Only 4 left in stock</span>
<div class="product-hero__variants">
<span class="product-hero__variant-label">Language</span>
<div class="product-hero__swatch-row">
<button class="product-hero__swatch product-hero__swatch--active" type="button">English</button>
<button class="product-hero__swatch" type="button">Japanese</button>
</div>
</div>
<div class="product-hero__qty" role="group" aria-label="Quantity">
<button class="product-hero__qty-btn" type="button" aria-label="Decrease quantity">−</button>
<span class="product-hero__qty-value">1</span>
<button class="product-hero__qty-btn" type="button" aria-label="Increase quantity">+</button>
</div>
<button class="product-hero__cta-primary" type="button">Add to cart</button>
<button class="product-hero__cta-secondary" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-4.5-9.5-9C1 9 2.5 5.5 6 5.5c2.1 0 3.4 1.2 4 2.2.6-1 1.9-2.2 4-2.2 3.5 0 5 3.5 3.5 6.5C19 16.5 12 21 12 21z"/></svg>
Add to wishlist
</button>
<div class="product-hero__trust">
<span class="product-hero__trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h11v8H3z"/><path d="M14 10h4l3 3v2h-7z"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>
Free UK delivery over £50
</span>
<span class="product-hero__trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 1 3 6.7"/><path d="M3 12v5h5"/></svg>
30-day returns
</span>
<span class="product-hero__trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="1"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
Secure checkout
</span>
</div>
<div class="product-hero__payments" aria-label="Accepted payment methods">
<span class="product-hero__pay">VISA</span>
<span class="product-hero__pay">Mastercard</span>
<span class="product-hero__pay">Klarna</span>
<span class="product-hero__pay">PayPal</span>
<span class="product-hero__pay">Apple Pay</span>
</div>
</div>
</div>
</section>
<!-- ===================== Meta Strip / product-meta-strip [NEW] · anchor (pinned) ===================== -->
<section class="product-meta-strip" aria-label="Product metadata">
<div class="product-meta-strip__inner">
<div class="product-meta-strip__row">
<div class="product-meta-strip__slot">
<span class="product-meta-strip__label">Publisher / Brand</span>
<span class="product-meta-strip__value">The Pokémon Company</span>
</div>
<div class="product-meta-strip__slot">
<span class="product-meta-strip__label">Game system</span>
<span class="product-meta-strip__value">Pokémon TCG · Standard</span>
</div>
<div class="product-meta-strip__slot">
<span class="product-meta-strip__label">SKU</span>
<span class="product-meta-strip__value">NW-PKM-PE-BB</span>
</div>
<div class="product-meta-strip__slot">
<span class="product-meta-strip__label">Release date</span>
<span class="product-meta-strip__value">17 Jan 2025</span>
</div>
<div class="product-meta-strip__slot">
<span class="product-meta-strip__label">Edition</span>
<span class="product-meta-strip__value">First print run</span>
</div>
<div class="product-meta-strip__slot">
<span class="product-meta-strip__label">Category tags</span>
<span class="product-meta-strip__value">Sealed · Booster box · Eeveelutions</span>
</div>
</div>
</div>
</section>
<!-- ===================== Description / product-description [NEW] · bright ===================== -->
<section class="section section--bright" aria-label="Description">
<div class="section__inner">
<div class="product-description">
<div class="product-description__main">
<span class="product-description__eyebrow">About</span>
<p class="product-description__body">Prismatic Evolutions is the Scarlet & Violet special set that everyone spent the start of the year chasing — and the one that sent the secondary market sideways within a fortnight of release. Built around the Eeveelutions, it leans into the collector instinct harder than any Pokémon release in recent memory: textured ex cards, a deep Special Illustration Rare pool, and the kind of pull spread that makes cracking a sealed box feel like an event rather than a chore.</p>
<p class="product-description__body">A sealed booster box holds 18 packs, each with the standard 10-card spread and a guaranteed hit slate that tilts toward the chase. We have weighed, candled and logged every box that has come through the counter, and the case ratios have held up to the published numbers — no light boxes, no resealed weights. This is genuine first-print English stock, not repacked singles or a search-and-reseal job.</p>
<p class="product-description__pullquote">If you want one set on the shelf that holds value and still rewards a Friday-night rip, this is the one we keep pointing people at.</p>
<p class="product-description__body">We stock this for the collector who wants the box intact for display, the player topping up Eeveelutions for a Standard build, and the gift-buyer who wants something that will not be worthless by the time it is unwrapped. If you are buying multiple for a case break, talk to the desk — we hold sealed cases back and can quote on a full twelve.</p>
<p class="product-description__body">Every sealed box ships double-boxed and corner-protected. We do not shrink-tamper, we do not weigh-and-pick, and we will tell you honestly if a print run is running soft before you commit.</p>
</div>
<aside class="product-description__sidecar">
<div class="product-description__card product-description__card--anchor">
<span class="product-description__card-eyebrow">What is in the box</span>
<ul class="product-description__box-list">
<li class="product-description__box-item"><svg class="product-description__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg>18 sealed booster packs</li>
<li class="product-description__box-item"><svg class="product-description__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg>10 cards per pack (180 total)</li>
<li class="product-description__box-item"><svg class="product-description__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg>Outer display box with set artwork</li>
<li class="product-description__box-item"><svg class="product-description__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg>Factory-sealed, first English print</li>
</ul>
</div>
<div class="product-description__card product-description__card--anchor">
<span class="product-description__card-eyebrow">Specifications</span>
<div class="product-description__spec-table">
<div class="product-description__spec-row"><span class="product-description__spec-key">Set code</span><span class="product-description__spec-value">SV8.5</span></div>
<div class="product-description__spec-row"><span class="product-description__spec-key">Packs per box</span><span class="product-description__spec-value">18</span></div>
<div class="product-description__spec-row"><span class="product-description__spec-key">Cards per pack</span><span class="product-description__spec-value">10</span></div>
<div class="product-description__spec-row"><span class="product-description__spec-key">Set size</span><span class="product-description__spec-value">131 + secret rares</span></div>
<div class="product-description__spec-row"><span class="product-description__spec-key">Format legality</span><span class="product-description__spec-value">Standard 2025</span></div>
<div class="product-description__spec-row"><span class="product-description__spec-key">Box weight</span><span class="product-description__spec-value">612 g (verified)</span></div>
</div>
</div>
<div class="product-description__card product-description__card--primary">
<span class="product-description__card-eyebrow">From the shop floor</span>
<p class="product-description__staff-quote">"I have opened a fair few of these at the counter and the SIR pulls genuinely land. It is the one set I tell collectors to keep sealed and players to crack — both are right."</p>
<span class="product-description__staff-byline">— Dan, buying desk</span>
</div>
</aside>
</div>
</div>
</section>
<!-- ===================== Set Technical Specs / spec-panel [NEW] · anchor ===================== -->
<section class="section section--anchor" aria-label="Set technical specs">
<div class="section__inner">
<div class="spec-panel spec-panel--anchor">
<div>
<span class="spec-panel__eyebrow">Set facts</span>
<h2 class="spec-panel__heading">Prismatic Evolutions, by the numbers</h2>
<p class="spec-panel__lead">The figures collectors and competitive players actually check before buying a sealed box — set scope, print run, and where it sits in the Standard format.</p>
</div>
<div class="spec-panel__list">
<div class="spec-panel__row"><span class="spec-panel__key">Set name</span><span class="spec-panel__value">Prismatic Evolutions</span></div>
<div class="spec-panel__row"><span class="spec-panel__key">Set code</span><span class="spec-panel__value">SV8.5</span></div>
<div class="spec-panel__row"><span class="spec-panel__key">Release date</span><span class="spec-panel__value">17 January 2025</span></div>
<div class="spec-panel__row"><span class="spec-panel__key">Card count</span><span class="spec-panel__value">131 base + secret rares</span></div>
<div class="spec-panel__row"><span class="spec-panel__key">Booster contents</span><span class="spec-panel__value">10 cards · 1 guaranteed hit</span></div>
<div class="spec-panel__row"><span class="spec-panel__key">Format legality</span><span class="spec-panel__value">Standard 2025 · legal</span></div>
<div class="spec-panel__row"><span class="spec-panel__key">Theme</span><span class="spec-panel__value">Eeveelutions</span></div>
</div>
</div>
</div>
</section>
<!-- ===================== Chase Cards / chase-card [NEW] · primary ===================== -->
<section class="section section--primary" aria-label="Chase cards">
<div class="section__inner">
<!-- section-header [REUSED] -->
<div class="section-header section-header--primary">
<div class="section-header__group">
<span class="section-header__eyebrow">What you could pull</span>
<h2 class="section-header__title">The chase cards</h2>
<p class="section-header__lead">The hits that move the market. Pull rates are the published case ratios; market prices are the live Cardmarket average we track at the buying desk.</p>
</div>
</div>
<div class="chase-grid">
<article class="chase-card chase-card--primary">
<div class="chase-card__media">
<img class="chase-card__image" src="https://picsum.photos/seed/nw-chase-a/600/750" alt="Umbreon ex Special Illustration Rare">
<span class="chase-card__rarity">SIR</span>
</div>
<div class="chase-card__body">
<h3 class="chase-card__name">Umbreon ex — Special Illustration Rare</h3>
<div class="chase-card__meta">
<span class="chase-card__pull">Pull rate 0.4%</span>
<span class="chase-card__price">£480.00</span>
</div>
</div>
</article>
<article class="chase-card chase-card--primary">
<div class="chase-card__media">
<img class="chase-card__image" src="https://picsum.photos/seed/nw-chase-b/600/750" alt="Sylveon ex Special Illustration Rare">
<span class="chase-card__rarity">SIR</span>
</div>
<div class="chase-card__body">
<h3 class="chase-card__name">Sylveon ex — Special Illustration Rare</h3>
<div class="chase-card__meta">
<span class="chase-card__pull">Pull rate 0.5%</span>
<span class="chase-card__price">£182.00</span>
</div>
</div>
</article>
<article class="chase-card chase-card--primary">
<div class="chase-card__media">
<img class="chase-card__image" src="https://picsum.photos/seed/nw-chase-c/600/750" alt="Espeon ex alternate art">
<span class="chase-card__rarity">Alt art</span>
</div>
<div class="chase-card__body">
<h3 class="chase-card__name">Espeon ex — Alternate Art</h3>
<div class="chase-card__meta">
<span class="chase-card__pull">Pull rate 0.8%</span>
<span class="chase-card__price">£96.00</span>
</div>
</div>
</article>
<article class="chase-card chase-card--primary">
<div class="chase-card__media">
<img class="chase-card__image" src="https://picsum.photos/seed/nw-chase-d/600/750" alt="Eevee gold numbered variant">
<span class="chase-card__rarity">Numbered</span>
</div>
<div class="chase-card__body">
<h3 class="chase-card__name">Eevee — Gold Numbered Variant</h3>
<div class="chase-card__meta">
<span class="chase-card__pull">Pull rate 1.2%</span>
<span class="chase-card__price">£58.00</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ===================== Lore / lore-band [NEW] · anchor (pinned full-bleed) ===================== -->
<section class="lore-band" aria-label="The story">
<img class="lore-band__image" src="https://picsum.photos/seed/nw-lore/1600/600" alt="Eeveelutions key art across a prismatic landscape">
<span class="lore-band__scrim"></span>
<div class="lore-band__content">
<span class="lore-band__eyebrow">The story</span>
<h2 class="lore-band__title">The Eeveelutions set you are buying into</h2>
<p class="lore-band__body">Eevee has always been the Pokémon that refuses to be one thing. Prismatic Evolutions makes that the whole point of the set — eight evolutions, each pulled toward its own element, rendered in the prismatic foil treatment that gives the release its name. The Special Illustration Rares lean into that split personality: Umbreon under a low moon, Sylveon ringed in ribbon-light, Espeon caught mid-shimmer. Pokémon designed this set to be displayed as much as played, and it shows in every textured holo and full-art frame. For collectors, the appeal is completeness — finishing the Eeveelutions line in a single set rather than chasing them across half a dozen. For players, it is the strongest the Eeveelutions have looked in Standard for years. Either way, this is a set that earns its shelf space, and a sealed box is the cleanest way in.</p>
</div>
</section>
<!-- ===================== Play In-Store / event-card [REUSED] · bright ===================== -->
<section class="section section--bright" aria-label="Play in-store">
<div class="section__inner">
<!-- section-header [REUSED] -->
<div class="section-header section-header--bright">
<div class="section-header__group">
<span class="section-header__eyebrow">Play it at the shop</span>
<h2 class="section-header__title">Pokémon events near you</h2>
<p class="section-header__lead">Bring what you pull. We run weekly Pokémon play across both stores — casual league through to sanctioned events.</p>
</div>
<a class="section-header__link" href="#">See the full events calendar</a>
</div>
<div class="event-grid">
<article class="event-card event-card--bright">
<img class="event-card__image" src="https://picsum.photos/seed/nw-evt-1/600/400" alt="Pokémon League night">
<div class="event-card__body">
<span class="event-card__eyebrow">Pokémon TCG</span>
<h3 class="event-card__title">Tuesday Pokémon League</h3>
<div class="event-card__date">Tue 3 Jun · 18:00</div>
<p class="event-card__desc">Casual league night, all ages and decks welcome. Promo cards while they last.</p>
<a class="btn btn--secondary event-card__cta" href="#">Book</a>
</div>
</article>
<article class="event-card event-card--bright">
<img class="event-card__image" src="https://picsum.photos/seed/nw-evt-2/600/400" alt="Standard tournament">
<div class="event-card__body">
<span class="event-card__eyebrow">Pokémon TCG</span>
<h3 class="event-card__title">Standard Showdown — Prismatic legal</h3>
<div class="event-card__date">Sat 7 Jun · 11:00</div>
<p class="event-card__desc">Six rounds Swiss, Standard 2025. Booster prize support to top tables.</p>
<a class="btn btn--secondary event-card__cta" href="#">Book</a>
</div>
</article>
<article class="event-card event-card--bright">
<img class="event-card__image" src="https://picsum.photos/seed/nw-evt-3/600/400" alt="Pre-release event">
<div class="event-card__body">
<span class="event-card__eyebrow">Pokémon TCG</span>
<h3 class="event-card__title">Build & Battle afternoon</h3>
<div class="event-card__date">Sun 8 Jun · 13:00</div>
<p class="event-card__desc">Crack packs, build a 40-card deck on the spot, and play four rounds for keeps.</p>
<a class="btn btn--secondary event-card__cta" href="#">Book</a>
</div>
</article>
</div>
</div>
</section>
<!-- ===================== Singles Link / singles-banner [NEW] · primary (pinned) ===================== -->
<section class="singles-banner" aria-label="Browse singles">
<div class="singles-banner__inner">
<div class="singles-banner__content">
<span class="singles-banner__eyebrow">Trade at the shop</span>
<h2 class="singles-banner__title">Browse the SV8.5 singles catalogue</h2>
<p class="singles-banner__sub">Don't want the whole box? We list Prismatic Evolutions singles individually, condition-checked at intake. Hunt the exact card your build is missing without gambling on a pack.</p>
<a class="btn btn--primary btn--primary-ground singles-banner__cta" href="#">Browse SV8.5 singles →</a>
</div>
<div class="singles-banner__fan" aria-hidden="true">
<div class="singles-banner__card singles-banner__card--a"><img src="https://picsum.photos/seed/nw-fan-a/300/375" alt=""></div>
<div class="singles-banner__card singles-banner__card--b"><img src="https://picsum.photos/seed/nw-fan-b/300/375" alt=""></div>
<div class="singles-banner__card singles-banner__card--c"><img src="https://picsum.photos/seed/nw-fan-c/300/375" alt=""></div>
</div>
</div>
</section>
<!-- ===================== Related Products / product-card [REUSED] · anchor ===================== -->
<section class="section section--anchor" aria-label="Related products">
<div class="section__inner">
<!-- section-header [REUSED] -->
<div class="section-header section-header--anchor">
<div class="section-header__group">
<span class="section-header__eyebrow">More Pokémon sealed</span>
<h2 class="section-header__title">You might also like</h2>
</div>
<a class="section-header__link" href="#">Shop all Pokémon sealed</a>
</div>
<div class="product-grid">
<article class="product-card product-card--anchor">
<div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-rel-1/600/750" alt="Prismatic Evolutions Elite Trainer Box"></div>
<div class="product-card__body">
<span class="product-card__eyebrow">Pokémon · SV8.5</span>
<h3 class="product-card__title">Prismatic Evolutions Elite Trainer Box</h3>
<div class="product-card__price">£49.95</div>
<a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
</div>
</article>
<article class="product-card product-card--anchor">
<div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-rel-2/600/750" alt="Prismatic Evolutions Surprise Box"></div>
<div class="product-card__body">
<span class="product-card__eyebrow">Pokémon · SV8.5</span>
<h3 class="product-card__title">Prismatic Evolutions Surprise Box</h3>
<div class="product-card__price">£32.00</div>
<a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
</div>
</article>
<article class="product-card product-card--anchor">
<div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-rel-3/600/750" alt="Surging Sparks Booster Box"></div>
<div class="product-card__body">
<span class="product-card__eyebrow">Pokémon · SV8</span>
<h3 class="product-card__title">Surging Sparks Booster Box</h3>
<div class="product-card__price">£99.95</div>
<a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
</div>
</article>
<article class="product-card product-card--anchor">
<div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-rel-4/600/750" alt="Stellar Crown Booster Bundle"></div>
<div class="product-card__body">
<span class="product-card__eyebrow">Pokémon · SV7</span>
<h3 class="product-card__title">Stellar Crown Booster Bundle</h3>
<div class="product-card__price">£26.50</div>
<a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
</div>
</article>
<article class="product-card product-card--anchor">
<div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-rel-5/600/750" alt="Premium card sleeves"></div>
<div class="product-card__body">
<span class="product-card__eyebrow">Accessories</span>
<h3 class="product-card__title">Eeveelutions Matte Sleeves (65)</h3>
<div class="product-card__price">£8.50</div>
<a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
</div>
</article>
<article class="product-card product-card--anchor">
<div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-rel-6/600/750" alt="9-pocket binder"></div>
<div class="product-card__body">
<span class="product-card__eyebrow">Accessories</span>
<h3 class="product-card__title">Pro-Binder 9-Pocket — Black</h3>
<div class="product-card__price">£21.00</div>
<a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
</div>
</article>
<article class="product-card product-card--anchor">
<div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-rel-7/600/750" alt="Top loaders pack"></div>
<div class="product-card__body">
<span class="product-card__eyebrow">Accessories</span>
<h3 class="product-card__title">Top Loaders — 35pt (25)</h3>
<div class="product-card__price">£6.00</div>
<a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
</div>
</article>
<article class="product-card product-card--anchor">
<div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-rel-8/600/750" alt="Twilight Masquerade Booster Box"></div>
<div class="product-card__body">
<span class="product-card__eyebrow">Pokémon · SV6</span>
<h3 class="product-card__title">Twilight Masquerade Booster Box</h3>
<div class="product-card__price">£94.95</div>
<a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
</div>
</article>
</div>
</div>
</section>
<!-- ===================== Customer Reviews / review-card [NEW] · primary ===================== -->
<section class="section section--primary" aria-label="Customer reviews">
<div class="section__inner">
<!-- section-header [REUSED] -->
<div class="section-header section-header--primary">
<div class="section-header__group">
<span class="section-header__eyebrow">Customer reviews</span>
<h2 class="section-header__title">4.6 out of 5 · 38 reviews</h2>
<p class="section-header__lead">Standard verified-purchase reviews from customers who bought this box.</p>
</div>
<a class="section-header__link" href="#">Write a review</a>
</div>
<div class="review-grid">
<article class="review-card review-card--primary">
<div class="review-card__meta"><span class="review-card__stars">★★★★★</span><span>18 May 2026 · James R.</span></div>
<h3 class="review-card__title">Sealed and double-boxed, no complaints</h3>
<p class="review-card__text">Box arrived in 48 hours, genuinely sealed and weighted right. Cracked half for the league and saved half.</p>
</article>
<article class="review-card review-card--primary">
<div class="review-card__meta"><span class="review-card__stars">★★★★★</span><span>11 May 2026 · Priya K.</span></div>
<h3 class="review-card__title">Pulled the Sylveon SIR</h3>
<p class="review-card__text">Worth it on the first box. Packaging was careful and the desk answered my questions before I bought.</p>
</article>
<article class="review-card review-card--primary">
<div class="review-card__meta"><span class="review-card__stars">★★★★☆</span><span>2 May 2026 · Tom B.</span></div>
<h3 class="review-card__title">Good box, slightly pricey</h3>
<p class="review-card__text">Genuine first print and honest about stock. A touch over marketplace pricing but you pay for the trust.</p>
</article>
</div>
</div>
</section>
<!-- ===================== Collector Reviews / collector-card [NEW] · bright (pinned) ===================== -->
<section class="section section--bright" aria-label="Collector reviews">
<div class="section__inner">
<!-- section-header [REUSED] -->
<div class="section-header section-header--bright section-header--center">
<div class="section-header__group">
<span class="section-header__eyebrow">From the community</span>
<h2 class="section-header__title">Collector reviews</h2>
<p class="section-header__lead">Collector reviews go deeper than a star rating — condition, authenticity, pull-rate experience and shipping care, with photos of the actual product received.</p>
</div>
</div>
<div class="collector-grid">
<article class="collector-card">
<div class="collector-card__ratings">
<div class="collector-card__dim"><span class="collector-card__dim-label">Condition</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Authenticity</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Pull rate</span><span class="collector-card__dim-stars">★★★★<span class="collector-card__star--empty">★</span></span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Shipping</span><span class="collector-card__dim-stars">★★★★★</span></div>
</div>
<div class="collector-card__main">
<div class="collector-card__head">
<span class="collector-card__name">EeveeHunter_UK</span>
<span class="collector-card__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg></span>
</div>
<p class="collector-card__text">Bought two for a case break. Both sealed correctly, weights matched, and Nerdworks held them aside for me as promised. Hit a Sylveon SIR in the second box. <a class="collector-card__readmore" href="#">Read more</a></p>
<div class="collector-card__photos">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr1a/96/96" alt="Sealed box received">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr1b/96/96" alt="Pulled cards laid out">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr1c/96/96" alt="Sylveon SIR close-up">
</div>
<span class="collector-card__time">19 May 2026</span>
</div>
</article>
<article class="collector-card">
<div class="collector-card__ratings">
<div class="collector-card__dim"><span class="collector-card__dim-label">Condition</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Authenticity</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Pull rate</span><span class="collector-card__dim-stars">★★★<span class="collector-card__star--empty">★</span><span class="collector-card__star--empty">★</span></span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Shipping</span><span class="collector-card__dim-stars">★★★★★</span></div>
</div>
<div class="collector-card__main">
<div class="collector-card__head">
<span class="collector-card__name">BinderBuilder</span>
<span class="collector-card__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg></span>
</div>
<p class="collector-card__text">Kept this one sealed for the shelf — the display box art is gorgeous and arrived corner-perfect. Pull luck was average but that is variance, not the seller. <a class="collector-card__readmore" href="#">Read more</a></p>
<div class="collector-card__photos">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr2a/96/96" alt="Sealed box on a shelf">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr2b/96/96" alt="Packaging condition">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr2c/96/96" alt="Box corner detail">
</div>
<span class="collector-card__time">14 May 2026</span>
</div>
</article>
<article class="collector-card">
<div class="collector-card__ratings">
<div class="collector-card__dim"><span class="collector-card__dim-label">Condition</span><span class="collector-card__dim-stars">★★★★<span class="collector-card__star--empty">★</span></span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Authenticity</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Pull rate</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Shipping</span><span class="collector-card__dim-stars">★★★★<span class="collector-card__star--empty">★</span></span></div>
</div>
<div class="collector-card__main">
<div class="collector-card__head">
<span class="collector-card__name">N_TheGrader</span>
<span class="collector-card__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg></span>
</div>
<p class="collector-card__text">Cracked for grading candidates and the centring out of this box was strong. Outer sleeve had a tiny crease but the cards were untouched. Would buy again. <a class="collector-card__readmore" href="#">Read more</a></p>
<div class="collector-card__photos">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr3a/96/96" alt="Cards in sleeves">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr3b/96/96" alt="Centring check">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr3c/96/96" alt="Grading submission stack">
</div>
<span class="collector-card__time">9 May 2026</span>
</div>
</article>
<article class="collector-card">
<div class="collector-card__ratings">
<div class="collector-card__dim"><span class="collector-card__dim-label">Condition</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Authenticity</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Pull rate</span><span class="collector-card__dim-stars">★★★★<span class="collector-card__star--empty">★</span></span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Shipping</span><span class="collector-card__dim-stars">★★★★★</span></div>
</div>
<div class="collector-card__main">
<div class="collector-card__head">
<span class="collector-card__name">KantoCompletes</span>
<span class="collector-card__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg></span>
</div>
<p class="collector-card__text">Finished my Eeveelutions master set off the back of two boxes from here. Honest stock, sleeved hits, and they threw in a top-loader for the chase. <a class="collector-card__readmore" href="#">Read more</a></p>
<div class="collector-card__photos">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr4a/96/96" alt="Completed binder page">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr4b/96/96" alt="Chase card sleeved">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr4c/96/96" alt="Packaging">
</div>
<span class="collector-card__time">5 May 2026</span>
</div>
</article>
<article class="collector-card">
<div class="collector-card__ratings">
<div class="collector-card__dim"><span class="collector-card__dim-label">Condition</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Authenticity</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Pull rate</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Shipping</span><span class="collector-card__dim-stars">★★★★★</span></div>
</div>
<div class="collector-card__main">
<div class="collector-card__head">
<span class="collector-card__name">RouteOneRips</span>
<span class="collector-card__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg></span>
</div>
<p class="collector-card__text">Best box-opening I have filmed all year. Two SIRs and an alt-art in one box. Nerdworks packed it like glass. Subscribed to their drop list now. <a class="collector-card__readmore" href="#">Read more</a></p>
<div class="collector-card__photos">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr5a/96/96" alt="Opening setup">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr5b/96/96" alt="Hits fanned out">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr5c/96/96" alt="Two SIRs side by side">
</div>
<span class="collector-card__time">28 Apr 2026</span>
</div>
</article>
<article class="collector-card">
<div class="collector-card__ratings">
<div class="collector-card__dim"><span class="collector-card__dim-label">Condition</span><span class="collector-card__dim-stars">★★★★<span class="collector-card__star--empty">★</span></span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Authenticity</span><span class="collector-card__dim-stars">★★★★★</span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Pull rate</span><span class="collector-card__dim-stars">★★★<span class="collector-card__star--empty">★</span><span class="collector-card__star--empty">★</span></span></div>
<div class="collector-card__dim"><span class="collector-card__dim-label">Shipping</span><span class="collector-card__dim-stars">★★★★★</span></div>
</div>
<div class="collector-card__main">
<div class="collector-card__head">
<span class="collector-card__name">SleeveAndStore</span>
<span class="collector-card__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M4 12l5 5L20 6"/></svg></span>
</div>
<p class="collector-card__text">Solid box, honest service. Pull luck was quiet but the desk was upfront that variance is variance. The shipping care is what brings me back. <a class="collector-card__readmore" href="#">Read more</a></p>
<div class="collector-card__photos">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr6a/96/96" alt="Box received">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr6b/96/96" alt="Packing materials">
<img class="collector-card__photo" src="https://picsum.photos/seed/nw-cr6c/96/96" alt="Cards stored">
</div>
<span class="collector-card__time">21 Apr 2026</span>
</div>
</article>
</div>
<div class="btn-row btn-row--center" style="margin-top: var(--space-40);">
<a class="btn btn--secondary btn--bright" href="#">Submit a collector review</a>
</div>
</div>
</section>
<!-- ===================== In-Store Pickup / pickup-strip [NEW] · primary ===================== -->
<section class="pickup-strip" aria-label="In-store pickup">
<div class="pickup-strip__inner">
<span class="pickup-strip__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l1-4h16l1 4"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg>
</span>
<div class="pickup-strip__status">
<span class="pickup-strip__status-line">In stock for click & collect</span>
<span class="pickup-strip__store">Nerdworks — 14 Castle Street, Norwich NR2 1PJ</span>
</div>
<div class="pickup-strip__detail">
<span class="pickup-strip__label">Opening hours</span>
<span class="pickup-strip__value">Mon–Sat 10:00–18:00 · Sun 11:00–16:00</span>
</div>
<div class="pickup-strip__detail">
<span class="pickup-strip__label">Pickup lead time</span>
<span class="pickup-strip__value">Ready in 2 hours · hold for 7 days</span>
</div>
</div>
</section>
<!-- ===================== site-footer [REUSED] · anchor (resolves) ===================== -->
<footer class="site-footer">
<div class="site-footer__inner">
<div>
<div class="site-footer__brand">Nerd<span>works</span></div>
<p class="site-footer__meta">A real game store, online and on the high street. © 2026 Nerdworks Ltd.</p>
</div>
<nav class="site-footer__links">
<a class="site-footer__link" href="#">Shop</a>
<a class="site-footer__link" href="#">Singles</a>
<a class="site-footer__link" href="#">Events</a>
<a class="site-footer__link" href="#">Sell to us</a>
<a class="site-footer__link" href="#">Find the shop</a>
<a class="site-footer__link" href="#">Contact</a>
</nav>
</div>
</footer>
</body>
</html>