<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokémon Prismatic Evolutions ETB — Nerdworks</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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
:root {
--green: #266038;
--green-light: #217E52;
--green-pale: #D4EAD9;
--black: #1A1E1A;
--charcoal: #28302A;
--white: #FFFFFF;
--near-white: #F8F9F8;
--off-white: #F0F2F0;
--light-grey: #E2E6E2;
--mid-grey: #9AA49A;
--dark-grey: #5A645A;
--red: #CC2222;
--gold: #CCAA00;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { font-size: 16px; }
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--black);
color: var(--white);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
/* ========================================
NAV
======================================== */
.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--black);
border-bottom: 1px solid var(--green);
height: 64px;
display: flex;
align-items: center;
}
.site-nav .container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.nav-logo {
font-size: 20px;
font-weight: 800;
letter-spacing: 0.12em;
text-decoration: none;
text-transform: uppercase;
line-height: 1;
}
.nav-logo .nerd { color: var(--white); }
.nav-logo .works { color: var(--green); }
.nav-links {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
}
.nav-links a {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mid-grey);
text-decoration: none;
padding: 6px 14px;
transition: color 150ms;
}
.nav-links a:hover { color: var(--white); }
.nav-actions {
display: flex;
align-items: center;
gap: 16px;
}
.nav-icon-btn {
background: none;
border: none;
cursor: pointer;
color: var(--mid-grey);
font-size: 18px;
line-height: 1;
padding: 4px;
transition: color 150ms;
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}
.nav-icon-btn:hover { color: var(--white); }
.basket-badge {
position: absolute;
top: -4px;
right: -6px;
background: var(--green);
color: var(--white);
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 600;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* ========================================
BREADCRUMB
======================================== */
.breadcrumb {
background: var(--black);
border-bottom: 1px solid var(--dark-grey);
padding: 14px 0;
}
.breadcrumb-inner {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--dark-grey);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.breadcrumb-inner a {
color: var(--dark-grey);
text-decoration: none;
transition: color 150ms;
}
.breadcrumb-inner a:hover { color: var(--mid-grey); }
.breadcrumb-sep {
margin: 0 8px;
color: var(--dark-grey);
opacity: 0.5;
}
.breadcrumb-current { color: var(--green-pale); }
/* ========================================
PRODUCT HERO
======================================== */
.product-hero {
background: var(--black);
padding: 48px 0 64px;
}
.product-hero-inner {
display: grid;
grid-template-columns: 55% 45%;
gap: 56px;
align-items: start;
}
/* LEFT — Image gallery */
.image-gallery {
position: sticky;
top: 80px;
}
.main-image-wrap {
position: relative;
background: var(--charcoal);
border: 1px solid var(--dark-grey);
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 440px;
overflow: hidden;
}
/* Corner bracket decorations */
.main-image-wrap::before,
.main-image-wrap::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-color: var(--green-light);
border-style: solid;
z-index: 2;
}
.main-image-wrap::before {
top: 8px;
left: 8px;
border-width: 2px 0 0 2px;
}
.main-image-wrap::after {
bottom: 8px;
right: 8px;
border-width: 0 2px 2px 0;
}
/* Extra corner brackets via inner spans */
.main-image-wrap .corner-tr,
.main-image-wrap .corner-bl {
position: absolute;
width: 20px;
height: 20px;
border-color: var(--green-light);
border-style: solid;
z-index: 2;
}
.main-image-wrap .corner-tr {
top: 8px;
right: 8px;
border-width: 2px 2px 0 0;
}
.main-image-wrap .corner-bl {
bottom: 8px;
left: 8px;
border-width: 0 0 2px 2px;
}
.main-image {
width: 100%;
max-height: 400px;
object-fit: contain;
display: block;
position: relative;
z-index: 1;
}
.thumbnail-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
margin-top: 2px;
}
.thumb {
background: var(--charcoal);
border: 1px solid var(--dark-grey);
padding: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
transition: border-color 150ms;
}
.thumb.active { border: 2px solid var(--green); }
.thumb:hover { border-color: var(--green-light); }
.thumb-img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* RIGHT — Product info */
.product-info {
padding-top: 4px;
}
.product-meta-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
color: var(--dark-grey);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.product-meta-label::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
background: var(--green);
flex-shrink: 0;
}
.product-name {
font-size: 28px;
font-weight: 800;
color: var(--white);
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 16px;
}
.rating-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.stars {
color: var(--gold);
font-size: 16px;
letter-spacing: 1px;
line-height: 1;
}
.rating-score {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.rating-count {
font-size: 13px;
color: var(--mid-grey);
}
.price-block {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.price-current {
font-family: 'JetBrains Mono', monospace;
font-size: 32px;
font-weight: 700;
color: var(--green-pale);
line-height: 1;
}
.price-was {
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
font-weight: 400;
color: var(--mid-grey);
text-decoration: line-through;
line-height: 1;
}
.price-badge {
background: var(--red);
color: var(--white);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
border-radius: 0;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sku-row {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--dark-grey);
margin-bottom: 10px;
letter-spacing: 0.04em;
}
.stock-row {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--mid-grey);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 6px;
}
.stock-dot {
color: var(--green);
font-size: 10px;
}
.stock-status { color: var(--green); }
.product-divider {
border: none;
border-top: 1px solid var(--dark-grey);
margin: 20px 0;
}
.product-description {
font-size: 15px;
color: var(--near-white);
line-height: 1.7;
margin-bottom: 28px;
}
/* Quantity selector */
.qty-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--dark-grey);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.qty-row {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 16px;
width: fit-content;
}
.qty-btn {
width: 40px;
height: 40px;
background: var(--charcoal);
border: 1px solid var(--dark-grey);
color: var(--green);
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 150ms, border-color 150ms;
border-radius: 0;
user-select: none;
}
.qty-btn:hover {
background: var(--black);
border-color: var(--green);
}
.qty-input {
width: 60px;
height: 40px;
background: var(--charcoal);
border: 1px solid var(--dark-grey);
border-left: none;
border-right: none;
color: var(--white);
font-family: 'JetBrains Mono', monospace;
font-size: 15px;
font-weight: 600;
text-align: center;
outline: none;
border-radius: 0;
}
.qty-input:focus { border-color: var(--green); }
/* CTA buttons */
.btn-add-to-cart {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 52px;
background: var(--green);
color: var(--white);
border: none;
border-radius: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
transition: background-color 150ms;
margin-bottom: 12px;
}
.btn-add-to-cart:hover { background: var(--green-light); }
.wishlist-link {
display: block;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--mid-grey);
text-decoration: none;
letter-spacing: 0.06em;
transition: color 150ms;
}
.wishlist-link:hover { color: var(--green-pale); }
/* ========================================
TABS
======================================== */
.product-tabs {
background: var(--black);
border-top: 1px solid var(--dark-grey);
padding: 0 0 64px;
}
.tab-bar {
display: flex;
border-bottom: 1px solid var(--dark-grey);
margin-bottom: 0;
}
.tab-btn {
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: 16px 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--mid-grey);
cursor: pointer;
transition: color 150ms, border-color 150ms;
}
.tab-btn:hover { color: var(--white); }
.tab-btn.active {
color: var(--white);
border-bottom-color: var(--green);
}
.tab-content {
display: none;
padding: 40px 0 0;
}
.tab-content.active { display: block; }
/* Specs table */
.specs-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--dark-grey);
}
.specs-table tr:nth-child(odd) { background: var(--black); }
.specs-table tr:nth-child(even) { background: var(--charcoal); }
.specs-table td {
padding: 14px 20px;
font-size: 14px;
border-bottom: 1px solid var(--dark-grey);
vertical-align: top;
}
.specs-table .spec-label {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--mid-grey);
text-transform: uppercase;
letter-spacing: 0.06em;
width: 200px;
white-space: nowrap;
}
.specs-table .spec-value {
color: var(--white);
}
/* Reviews tab */
.reviews-placeholder {
padding: 40px;
border: 1px solid var(--dark-grey);
text-align: center;
background: var(--charcoal);
}
.reviews-placeholder p {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--dark-grey);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Shipping tab */
.shipping-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.shipping-item {
background: var(--charcoal);
border: 1px solid var(--dark-grey);
padding: 24px;
}
.shipping-item-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--green);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.shipping-item-title {
font-size: 15px;
font-weight: 700;
color: var(--white);
margin-bottom: 6px;
}
.shipping-item-desc {
font-size: 13px;
color: var(--mid-grey);
line-height: 1.6;
}
/* ========================================
FEATURES LIST
======================================== */
.features-section {
background: var(--black);
padding: 0 0 64px;
}
.section-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
color: var(--dark-grey);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.section-label::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
background: var(--green);
flex-shrink: 0;
}
.section-title {
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
color: var(--white);
margin-bottom: 28px;
}
.features-block {
border: 1px solid var(--dark-grey);
padding: 32px;
background: var(--charcoal);
}
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 32px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--near-white);
line-height: 1.5;
}
.feature-bullet {
flex-shrink: 0;
width: 8px;
height: 8px;
background: var(--green);
margin-top: 4px;
}
/* ========================================
RELATED PRODUCTS
======================================== */
.related-section {
background: var(--black);
border-top: 1px solid var(--dark-grey);
padding: 64px 0 80px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
.product-card {
background: var(--charcoal);
border: 1px solid var(--dark-grey);
overflow: hidden;
transition: transform 150ms, border-color 150ms;
cursor: pointer;
text-decoration: none;
display: block;
color: inherit;
}
.product-card:hover {
transform: translateY(-2px);
border-color: var(--green);
}
.card-img-wrap {
background: var(--black);
height: 180px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
border-bottom: 1px solid var(--dark-grey);
}
.card-body {
padding: 14px;
}
.card-name {
font-size: 13px;
font-weight: 600;
color: var(--white);
line-height: 1.4;
margin-bottom: 8px;
}
.card-price {
font-family: 'JetBrains Mono', monospace;
font-size: 15px;
font-weight: 600;
color: var(--green-pale);
}
/* ========================================
FOOTER
======================================== */
.site-footer {
background: var(--black);
border-top: 1px solid var(--dark-grey);
padding: 64px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
}
.footer-heading {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--green);
margin-bottom: 16px;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
font-size: 14px;
color: var(--mid-grey);
text-decoration: none;
transition: color 150ms;
}
.footer-links a:hover { color: var(--white); }
.footer-tagline {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--dark-grey);
margin-top: 8px;
}
.footer-bottom {
border-top: 1px solid var(--dark-grey);
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copy,
.footer-pay {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--dark-grey);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.container { padding: 0 24px; }
.product-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.image-gallery { position: static; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.features-grid { grid-template-columns: 1fr; }
.shipping-grid { grid-template-columns: 1fr; }
.thumbnail-strip { gap: 2px; }
.thumb { height: 64px; }
.related-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}
</style>
</head>
<body>
<!-- NAV -->
<header class="site-nav">
<div class="container">
<a href="#" class="nav-logo">
<span class="nerd">NERD</span><span class="works">WORKS</span>
</a>
<ul class="nav-links">
<li><a href="#">Shop</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="nav-actions">
<button class="nav-icon-btn" aria-label="Search">⚲</button>
<a href="#" class="nav-icon-btn" aria-label="Basket">
☖
<span class="basket-badge">3</span>
</a>
</div>
</div>
</header>
<!-- BREADCRUMB -->
<div class="breadcrumb">
<div class="container">
<span class="breadcrumb-inner">
<a href="#">Home</a>
<span class="breadcrumb-sep">/</span>
<a href="#">Trading Card Games</a>
<span class="breadcrumb-sep">/</span>
<a href="#">Pokémon</a>
<span class="breadcrumb-sep">/</span>
<span class="breadcrumb-current">Prismatic Evolutions ETB</span>
</span>
</div>
</div>
<!-- PRODUCT HERO -->
<section class="product-hero">
<div class="container">
<div class="product-hero-inner">
<!-- LEFT: Image gallery -->
<div class="image-gallery">
<div class="main-image-wrap" id="main-image-wrap">
<span class="corner-tr"></span>
<span class="corner-bl"></span>
<img class="main-image" id="main-img" src="https://camcom.dev/wp-content/uploads/2026/04/product-pokemon-etb.jpg" alt="Pokémon Prismatic Evolutions ETB">
</div>
<div class="thumbnail-strip">
<div class="thumb active" data-img="https://camcom.dev/wp-content/uploads/2026/04/product-pokemon-etb.jpg">
<img class="thumb-img" src="https://camcom.dev/wp-content/uploads/2026/04/product-pokemon-etb.jpg" alt="Product shot" loading="lazy">
</div>
<div class="thumb" data-img="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-table.jpg">
<img class="thumb-img" src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-table.jpg" alt="Cards on table" loading="lazy">
</div>
<div class="thumb" data-img="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-stack.jpg">
<img class="thumb-img" src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-stack.jpg" alt="Pack stack" loading="lazy">
</div>
<div class="thumb" data-img="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-playing.jpg">
<img class="thumb-img" src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-playing.jpg" alt="Playing cards" loading="lazy">
</div>
</div>
</div>
<!-- RIGHT: Product info -->
<div class="product-info">
<p class="product-meta-label">PRODUCT // TCG_POKEMON</p>
<h1 class="product-name">Pokémon Prismatic Evolutions Elite Trainer Box</h1>
<div class="rating-row">
<span class="stars">★★★★★</span>
<span class="rating-score">4.8</span>
<span class="rating-count">(48 reviews)</span>
</div>
<div class="price-block">
<span class="price-current">£54.99</span>
<span class="price-was">£64.99</span>
<span class="price-badge">SAVE 15%</span>
</div>
<p class="sku-row">SKU: PKM-PRISM-ETB-001</p>
<div class="stock-row">
<span class="stock-dot stock-status">●</span>
<span class="stock-status">IN STOCK</span>
<span>— 200 units available</span>
</div>
<hr class="product-divider">
<p class="product-description">The Prismatic Evolutions Elite Trainer Box contains 9 booster packs from the highly sought-after Prismatic Evolutions expansion, plus a full suite of gameplay accessories. Each pack contains 10 cards with a guaranteed holographic rare or better. This set features stunning prismatic artwork across all Eeveelutions and is one of the most anticipated Pokémon TCG releases of the year.</p>
<p class="qty-label">QUANTITY</p>
<div class="qty-row">
<button class="qty-btn" id="qty-minus">−</button>
<input type="number" class="qty-input" id="qty-input" value="1" min="1" max="200" readonly>
<button class="qty-btn" id="qty-plus">+</button>
</div>
<button class="btn-add-to-cart">⚔ ADD TO ARSENAL</button>
<a href="#" class="wishlist-link">+ Add to Wishlist</a>
</div>
</div>
</div>
</section>
<!-- PRODUCT TABS -->
<section class="product-tabs">
<div class="container">
<div class="tab-bar">
<button class="tab-btn active" data-tab="specifications">Specifications</button>
<button class="tab-btn" data-tab="reviews">Reviews (48)</button>
<button class="tab-btn" data-tab="shipping">Shipping</button>
</div>
<!-- Specifications -->
<div class="tab-content active" id="tab-specifications">
<table class="specs-table">
<tbody>
<tr>
<td class="spec-label">Set</td>
<td class="spec-value">Prismatic Evolutions</td>
</tr>
<tr>
<td class="spec-label">Series</td>
<td class="spec-value">Scarlet & Violet</td>
</tr>
<tr>
<td class="spec-label">Release Date</td>
<td class="spec-value">2025</td>
</tr>
<tr>
<td class="spec-label">Card Count</td>
<td class="spec-value">9 packs × 10 cards</td>
</tr>
<tr>
<td class="spec-label">Includes</td>
<td class="spec-value">Sleeves, dice, energy cards, collector's guidebook</td>
</tr>
<tr>
<td class="spec-label">Condition</td>
<td class="spec-value">Factory sealed</td>
</tr>
<tr>
<td class="spec-label">Age Rating</td>
<td class="spec-value">6+</td>
</tr>
</tbody>
</table>
</div>
<!-- Reviews -->
<div class="tab-content" id="tab-reviews">
<div class="reviews-placeholder">
<p>REVIEWS_MODULE // 48 ENTRIES LOADED</p>
</div>
</div>
<!-- Shipping -->
<div class="tab-content" id="tab-shipping">
<div class="shipping-grid">
<div class="shipping-item">
<p class="shipping-item-label">Standard</p>
<p class="shipping-item-title">3–5 Working Days</p>
<p class="shipping-item-desc">Free on orders over £30. £3.99 below threshold. Tracked Royal Mail 48.</p>
</div>
<div class="shipping-item">
<p class="shipping-item-label">Express</p>
<p class="shipping-item-title">Next Working Day</p>
<p class="shipping-item-desc">Order before 2pm. £6.99. DPD tracked with 1-hour delivery window.</p>
</div>
<div class="shipping-item">
<p class="shipping-item-label">Click & Collect</p>
<p class="shipping-item-title">Same Day Available</p>
<p class="shipping-item-desc">Free. Collect in-store from Nerdworks. Ready in 30 minutes when in stock.</p>
</div>
<div class="shipping-item">
<p class="shipping-item-label">Returns</p>
<p class="shipping-item-title">28-Day Policy</p>
<p class="shipping-item-desc">Sealed products only. Must be factory sealed and undamaged. Free returns portal.</p>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features-section">
<div class="container">
<p class="section-label">CONTENTS // WHAT'S IN THE BOX</p>
<h2 class="section-title">Included Components</h2>
<div class="features-block">
<div class="features-grid">
<div class="feature-item">
<span class="feature-bullet"></span>
<span>9 Prismatic Evolutions booster packs</span>
</div>
<div class="feature-item">
<span class="feature-bullet"></span>
<span>65 card sleeves featuring Eevee</span>
</div>
<div class="feature-item">
<span class="feature-bullet"></span>
<span>45 Pokémon TCG energy cards</span>
</div>
<div class="feature-item">
<span class="feature-bullet"></span>
<span>A player's guide to the expansion</span>
</div>
<div class="feature-item">
<span class="feature-bullet"></span>
<span>6 damage-counter dice</span>
</div>
<div class="feature-item">
<span class="feature-bullet"></span>
<span>1 competition-legal coin-flip die</span>
</div>
<div class="feature-item">
<span class="feature-bullet"></span>
<span>2 acrylic condition markers</span>
</div>
<div class="feature-item">
<span class="feature-bullet"></span>
<span>Collector's box with 4 card dividers</span>
</div>
</div>
</div>
</div>
</section>
<!-- RELATED PRODUCTS -->
<section class="related-section">
<div class="container">
<p class="section-label">RELATED // YOU MAY ALSO NEED</p>
<h2 class="section-title">Recommended Deployments</h2>
<div class="related-grid">
<a href="#" class="product-card">
<div class="card-img-wrap"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-display.jpg" alt="MTG Foundations Collector Box" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
<div class="card-body">
<p class="card-name">MTG Foundations Collector Box</p>
<p class="card-price">£189.99</p>
</div>
</a>
<a href="#" class="product-card">
<div class="card-img-wrap"><img src="https://camcom.dev/wp-content/uploads/2026/04/dice-polyhedral.jpg" alt="Polyhedral Dice Set" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
<div class="card-body">
<p class="card-name">Polyhedral Dice Set</p>
<p class="card-price">£12.99</p>
</div>
</a>
<a href="#" class="product-card">
<div class="card-img-wrap"><img src="https://camcom.dev/wp-content/uploads/2026/04/product-ps5-controller.jpg" alt="DualSense Controller" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
<div class="card-body">
<p class="card-name">DualSense Controller</p>
<p class="card-price">£59.99</p>
</div>
</a>
<a href="#" class="product-card">
<div class="card-img-wrap"><img src="https://camcom.dev/wp-content/uploads/2026/04/product-switch.jpg" alt="Nintendo Switch OLED" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
<div class="card-body">
<p class="card-name">Nintendo Switch OLED</p>
<p class="card-price">£299.99</p>
</div>
</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div>
<a href="#" class="nav-logo" style="font-size:18px; display:inline-block; text-decoration:none;">
<span class="nerd">NERD</span><span class="works">WORKS</span>
</a>
<p class="footer-tagline">Est. 2024</p>
<p style="font-size:13px; color:var(--mid-grey); margin-top:12px; line-height:1.6;">Your local hub for competitive gaming, collecting, and community.</p>
</div>
<div>
<p class="footer-heading">Navigate</p>
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Clearance</a></li>
</ul>
</div>
<div>
<p class="footer-heading">Support</p>
<ul class="footer-links">
<li><a href="#">My Account</a></li>
<li><a href="#">Orders & Returns</a></li>
<li><a href="#">Shipping Info</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div>
<p class="footer-heading">Connect</p>
<ul class="footer-links">
<li><a href="#">Instagram</a></li>
<li><a href="#">TikTok</a></li>
<li><a href="#">Discord Server</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p class="footer-copy">© 2024 Nerdworks Ltd. All rights reserved.</p>
<p class="footer-pay">Visa • Mastercard • PayPal • Apple Pay</p>
</div>
</div>
</footer>
<script>
$(function() {
/* Thumbnail swap */
$('.thumb').on('click', function() {
var src = $(this).data('img');
$('.thumb').removeClass('active');
$(this).addClass('active');
$('#main-img').attr('src', src);
});
/* Tab toggle */
$('.tab-btn').on('click', function() {
var tabId = $(this).data('tab');
$('.tab-btn').removeClass('active');
$(this).addClass('active');
$('.tab-content').removeClass('active');
$('#tab-' + tabId).addClass('active');
});
/* Quantity +/- */
$('#qty-minus').on('click', function() {
var val = parseInt($('#qty-input').val(), 10);
if (val > 1) { $('#qty-input').val(val - 1); }
});
$('#qty-plus').on('click', function() {
var val = parseInt($('#qty-input').val(), 10);
if (val < 200) { $('#qty-input').val(val + 1); }
});
});
</script>
</body>
</html>