Сделай на странице товара кнопку [Размерная сетка], 
которая показывается только если категория товара равна ID 15.. 
Кнопка должна быть [светло-серой (#e0e0e0)], при наведении [чуть темнее (#cfcfcf)], с [чёрным текстом]. 
При клике на кнопку открывается всплывающее окно по центру экрана 
с таблицей размеров обуви [Converse Chuck 70 Plus]. 
В таблице должны быть колонки: [Длина стопы (см)], [EU], [US], [UK]. 
Сетка: 
[25,1 см → EU 39 → US 7 → UK 5] 
[25,4 см → EU 40 → US 7,5 → UK 6] 
[26,3 см → EU 41 → US 8,5 → UK 7] 
[26,7 см → EU 42 → US 9 → UK 8] 
[27,6 см → EU 43 → US 10 → UK 9] 
[28 см → EU 44 → US 10,5 → UK 10] 

Добавь [плавное появление модального окна], [крестик для закрытия] и [закрытие по клику вне окна].
 

<?if($CID$=5)?>
<div class="product-grid-btn">
 <button class="grid-btn" id="openSizeChart">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
 viewBox="0 0 24 24" fill="none" stroke="currentColor"
 stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
 class="icon">
 <rect x="3" y="3" width="7" height="7"/>
 <rect x="14" y="3" width="7" height="7"/>
 <rect x="14" y="14" width="7" height="7"/>
 <rect x="3" y="14" width="7" height="7"/>
 </svg>
 Размерная сетка
 </button>
</div>
<!-- Модальное окно -->
<div id="sizeChartModal" class="modal">
 <div class="modal-content">
 <span class="close">&times;</span>
 <h2>Мужская размерная сетка обуви</h2>
 <table class="size-table">
 <thead>
 <tr>
 <th>Длина стопы (см)</th>
 <th>EU</th>
 <th>US</th>
 <th>UK</th>
 </tr>
 </thead>
 <tbody>
 <tr><td>25,1</td><td>39</td><td>7</td><td>5</td></tr>
 <tr><td>25,4</td><td>40</td><td>7,5</td><td>6</td></tr>
 <tr><td>25,8</td><td>40,5</td><td>8</td><td>6,5</td></tr>
 <tr><td>26,3</td><td>41</td><td>8,5</td><td>7</td></tr>
 <tr><td>26,7</td><td>42</td><td>9</td><td>8</td></tr>
 <tr><td>27,1</td><td>42,5</td><td>9,5</td><td>8,5</td></tr>
 <tr><td>27,6</td><td>43</td><td>10</td><td>9</td></tr>
 </tbody>
 </table>
 </div>
</div>
<?endif?>

/* Кнопка */
.grid-btn {
 background: #e0e0e0;
 border: none;
 border-radius: 10px;
 padding: 8px 14px;
 cursor: pointer;
 transition: background .3s ease;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: #000;
 font-weight: 500;
}

.grid-btn:hover {
 background: #cfcfcf;
 color: #000;
}

.grid-btn svg {
 stroke: currentColor;
}

/* Модалка */
.modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0; top: 0;
 width: 100%; height: 100%;
 background: rgba(0,0,0,0.6);
 align-items: center;
 justify-content: center;
}

.modal-content {
 background: #fff;
 padding: 20px 30px;
 border-radius: 12px;
 max-width: 700px;
 width: 95%;
 position: relative;
 animation: fadeIn .3s ease;
}

.modal-content h2 {
 margin-bottom: 20px;
 font-size: 22px;
 font-weight: bold;
}

.size-table {
 width: 100%;
 border-collapse: collapse;
 text-align: center;
}

.size-table th, .size-table td {
 padding: 10px;
 border: 1px solid #ddd;
}

.close {
 position: absolute;
 right: 15px; top: 10px;
 font-size: 28px;
 cursor: pointer;
}

@keyframes fadeIn {
 from {opacity: 0; transform: scale(0.9);}
 to {opacity: 1; transform: scale(1);}
}

<script>
document.addEventListener("DOMContentLoaded", function(){
 const modal = document.getElementById("sizeChartModal");
 const btn = document.getElementById("openSizeChart");
 const close = modal.querySelector(".close");

 btn.onclick = () => modal.style.display = "flex";
 close.onclick = () => modal.style.display = "none";
 window.onclick = (e) => { if(e.target === modal) modal.style.display = "none"; }
});
</script>