<style>
.price-accordion {
font-family: "Tilda Sans", sans-serif;
font-size: 20px;
color: #2C2C2C;
max-width: 1000px;
margin: 0 auto;
background-color: #FFFFFF;
}

.accordion-item {
border-bottom: 1px solid #E0E0E0;
margin-bottom: 16px;
background-color: #FFFFFF;
}

.accordion-header {
font-family: "Tilda Sans", sans-serif;
font-weight: 600;
cursor: pointer;
padding: 4px 0 15px;
position: relative;
transition: color 0.3s ease;
}

.accordion-header::after {
content: '+';
position: absolute;
right: 0;
color: #7DCA8E; /* зелёный акцент */
font-weight: 1100; /* толще */
font-size: 28px; /* крупнее */
}

.accordion-item.open .accordion-header::after {
content: '−';
}

.accordion-item.open .accordion-header {
color: #7DCA8E;
}

.accordion-content {
font-family: "Tilda Sans", sans-serif;
display: none;
padding: 5px 0 12px;
background-color: #FFFFFF;
}

.accordion-item.open .accordion-content {
display: block;
}

.price-table {
width: 100%;
border-collapse: collapse;
margin-top: 7px;
font-family: "Tilda Sans", sans-serif;
}

.price-table th,
.price-table td {
padding: 5px 7px;
border-bottom: 1px solid #E0E0E0;
text-align: left;
font-size: 16px;
}

.price-table th {
background-color: #F9F9F9;
font-weight: 600;
color: #444;
}
</style>

<div class="price-accordion">

<div class="accordion-item">
<div class="accordion-header">Стрижка</div>
<div class="accordion-content">
<table class="price-table">
<thead>
<tr><th>Услуга</th><th>Мастер</th><th>Стилист</th><th>Топ-стилист</th></tr>
</thead>
<tbody>
<tr><td>Стрижка + укладка</td><td>2 500 ₽</td><td>3 000 ₽</td><td>5 000 ₽</td></tr>
<tr><td>Стрижка чёлки</td><td>1 000 ₽</td><td>1 200 ₽</td><td>1 600 ₽</td></tr>
<tr><td>Стрижка + K-18</td><td>4 000 ₽</td><td>4 500 ₽</td><td>6 500 ₽</td></tr>
</tbody>
</table>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">Укладка</div>
<div class="accordion-content">
<table class="price-table">
<thead>
<tr><th>Услуга</th><th>Мастер</th><th>Стилист</th><th>Топ-стилист</th></tr>
</thead>
<tbody>
<tr><td>Укладка (дневная)</td><td>2 000 ₽</td><td>2 500 ₽</td><td>3 500 ₽</td></tr>
<tr><td>Укладка (вечерняя)</td><td>2 700 ₽</td><td>3 100 ₽</td><td>4 100 ₽</td></tr>
</tbody>
</table>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">Окрашивание</div>
<div class="accordion-content">
<table class="price-table">
<thead>
<tr><th>Услуга</th><th>Мастер</th><th>Стилист</th><th>Топ-стилист</th></tr>
</thead>
<tbody>
<tr><td>Окрашивание в 1 тон S.</td><td>3 500 - 5 000 ₽</td><td>5 000 - 6 500 ₽</td><td>6 500 - 8 000 ₽</td></tr>
<tr><td>Окрашивание в 1 тон M.</td><td>4 500 - 6 500 ₽</td><td>6 000 - 7 500 ₽</td><td>7 500 - 8 500 ₽</td></tr>
<tr><td>Окрашивание в 1 тон L.</td><td>6 500 - 8 000 ₽</td><td>7 500 - 9 000 ₽</td><td>8 500 - 10 000 ₽</td></tr>
</tbody>
</table>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">Контуринг</div>
<div class="accordion-content">
<table class="price-table">
<thead>
<tr><th>Услуга</th><th>Мастер</th><th>Стилист</th><th>Топ-стилист</th></tr>
</thead>
<tbody>
<tr><td>Контуринг</td><td>6 000 ₽</td><td>8 000 ₽</td><td>10 500 ₽</td></tr>
</tbody>
</table>
</div>
</div>


<div class="accordion-item">
<div class="accordion-header">Тонирование</div>
<div class="accordion-content">
<table class="price-table">
<thead>
<tr><th>Услуга</th><th>Мастер</th><th>Стилист</th><th>Топ-стилист</th></tr>
</thead>
<tbody>
<tr><td>Тонирование S.</td><td>3 000 - 4 000 ₽</td><td>4 000 - 5 000 ₽</td><td>5 000 - 6 000 ₽</td></tr>
<tr><td>Тонирование M.</td><td>3 500 - 4 500 ₽</td><td>4 500 - 5 500 ₽</td><td>5 500 - 6 500 ₽</td></tr>
<tr><td>Тонирование L.</td><td>5 000 - 6 000 ₽</td><td>6 000 - 7 000 ₽</td><td>7 000 - 8 000 ₽</td></tr>
</tbody>
</table>
</div>
</div>


<div class="accordion-item">
<div class="accordion-header">Тотал блонд</div>
<div class="accordion-content">
<table class="price-table">
<thead>
<tr><th>Услуга</th><th>Мастер</th><th>Стилист</th><th>Топ-стилист</th></tr>
</thead>
<tbody>
<tr><td>Тотал блонд S.</td><td>8 000 ₽</td><td>10 500 ₽</td><td>12 500 - 16 000 ₽</td></tr>
<tr><td>Тотал блонд M.</td><td>9 500 ₽</td><td>12 000 ₽</td><td>14 500 - 18 000 ₽</td></tr>
<tr><td>Тотал блонд L.</td><td>10 500 ₽</td><td>14 000 ₽</td><td>17 000 - 22 000 ₽</td></tr>
</tbody>
</table>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">Уход</div>
<div class="accordion-content">
<table class="price-table">
<thead>
<tr><th>Услуга</th><th>Мастер</th><th>Стилист</th><th>Топ-стилист</th></tr>
</thead>
<tbody>
<tr><td>Уход К-18</td><td>3 000 ₽</td><td>3 000 ₽</td><td>3 000 ₽</td></tr>
<tr><td>Стрижка + К-18</td><td>4 000 ₽</td><td>4 500 ₽</td><td>6 500 ₽</td></tr>
<tr><td>Пилинг кожи головы от Keune</td><td>4 500 ₽</td><td>4 500 ₽</td><td>4 500 ₽</td></tr>
<tr><td>Keune спа-уход (+ к услуге)</td><td>1 500 ₽</td><td>1 500 ₽</td><td>1 500 ₽</td></tr>
<tr><td>Milk shake (уход для сухих волос, + к услуге)</td><td>1 500 ₽</td><td>1 500 ₽</td><td>1 500 ₽</td></tr>
</tbody>
</table>
</div>
</div>

<!-- Остальные категории добавляются по аналогии -->

</div>

<script>
document.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', () => {
const item = header.parentElement;

// 🔹 ДОБАВЛЕНО: закрываем все остальные аккордеоны
document.querySelectorAll('.accordion-item').forEach(otherItem => {
if (otherItem !== item) {
otherItem.classList.remove('open');
}
});

// переключаем текущий
item.classList.toggle('open');
});
});
</script>

You will study History of Art, which covers the period from the fall of the Roman Empire until the end of the Counter-Reformation. This will include non-Western material. You will also choose an optional course from another subject area.