/* =======================================================
   ГЛОБАЛЬНЫЕ СБРОСЫ И БАЗОВЫЕ СТИЛИ
   ======================================================= */
:root {
    --color-primary: #718c75;
    --color-dark: #26120b;
    --color-white: #ffffff;
    --color-promo-title: #f88813; 
}

html {
    overflow-y: scroll;
}

.mobile-contacts {
    display: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
    background-color: var(--color-white);
    color: var(--color-dark);
    /* Центрируем всю страницу 1200px на экране */
    display: flex;
    justify-content: center; 
}

.mobile-contacts {
    display: none;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.page-wrapper {
    width: 100%;
    max-width: 1200px;
    min-height: 100vh;
    position: relative;
    background-color: var(--color-white);
}

/* Контейнер для выравнивания элементов внутри секций */
.container {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
}

/* =======================================================
   1. HEADER 
   ======================================================= */
.header {
    width: 100%;
    height: 78px; 
    background-color: var(--color-primary); 
}

.header .container {
    height: 100%;
    justify-content: space-between; 
    padding: 0 60px; /* Отступ 60px от краев 1200px контейнера */
}

/* Бургер (слева) */
.header__burger {
    /* ИСПРАВЛЕНО: Увеличение ширины в 1.5 раза */
    width: 45px; 
    height: 25px; 
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
}
.header__burger .burger-line {
    height: 3px;
    background-color: var(--color-white);
    width: 100%;
    border-radius: 2px;
}

/* Контакты (по центру) */
.header__contact {
    display: flex;
    align-items: center;
    gap: 21px; 
    position: absolute; 
    left: 50%;
    transform: translateX(-50%);
}

.contact__icon {
    width: 78px; 
    height: 78px;
    object-fit: contain;
}

.contact__links {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap; 
}

.contact__link {
    color: var(--color-white); 
    font-weight: 500; 
    font-size: 16px; 
    text-decoration: none; 
    line-height: 1.2;
}

.header__social {
    display: flex;
    align-items: center;
    gap: 16px;          /* расстояние между иконками */
    margin-left: 8px;  /* отступ от блока ссылок */
}

.header__social-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

/* ИСПРАВЛЕНО: Подчеркивание при наведении */
.contact__link:hover {
    text-decoration: underline;
}

/* Переключатели языков (справа) */
.header__lang-switch a {
    color: var(--color-white);
    text-decoration: none; 
    font-weight: 700;
    font-size: 16px;
}
/* ИСПРАВЛЕНО: Подчеркивание при наведении */
.header__lang-switch a:hover {
    text-decoration: underline;
}
/* ИСПРАВЛЕНО: Белый разделитель языков */
.lang-separator {
    color: var(--color-white);
    font-weight: 700;
    font-size: 16px;
}


/* =======================================================
   2. PROMO SECTION (ТОЧНОЕ ПОЗИЦИОНИРОВАНИЕ)
   ======================================================= */

.promo-section {
    /* Отступ от хедера до лого 120px */
    padding-top: 120px; 
    padding-bottom: 50px; 
}

.promo-section .container {
    align-items: flex-start; 
}

/* ОБЕРТКА ДЛЯ ПРОМО КОНТЕНТА: ЦЕНТРИРОВАНИЕ И СМЕЩЕНИЕ */
.promo-content-wrapper {
    display: flex;
    align-items: center; 
    margin: 0 auto; 
    position: relative; 
    left: 35px; 
    gap: 140px; /* Расстояние между блоками */
    margin-top: -20px;
}

/* Логотип (Левая колонка) */
.promo-block--left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
}

.promo__logo {
    width: 181px; 
    height: 177px;
    object-fit: contain; 
}

.promo__title {
    margin-top: 49px; 
    font-weight: 700; 
    font-size: 21px; 
    color: var(--color-promo-title); 
    text-transform: uppercase;
    white-space: nowrap; 
    text-align: center;
}

/* Правый блок (Плюсы) */
.promo-block--right {
    display: flex;
    flex-direction: column;
    width: 400px;
    gap: 25px; 
}

.promo-item {
    display: flex;
    align-items: flex-start; 
}

.item__icon {
    width: 40px;
    height: 40px;
    margin-right: 27px; 
    flex-shrink: 0; 
    object-fit: contain;
}

.item__text {
    font-weight: 400; 
    font-size: 18px; 
    color: var(--color-dark); 
    margin: 0;
    line-height: 1.4; 
    max-width: 333px; 
}

/* =======================================================
   3. PRIJS / LIJST BAR (КОРИЧНЕВАЯ ПЛАШКА, ДЕСКТОП)
   ======================================================= */

.price-bar {
    width: 100%;
    height: 78px;
    background-color: var(--color-dark); /* #26120b */
    margin-top: 80px;
}

.price-bar__container {
    height: 100%;
    padding: 0 60px;              /* как у зелёной плашки */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;           /* база для абсолютных элементов */
}

.price-bar .header__nav {
    left: 60px;
    width: 380px;
}

/* бургер слева, по центру по высоте плашки */
.price-bar__burger {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

/* языки справа, по центру по высоте плашки */
.price-bar__lang-switch {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
}

/* центральный блок со словами и картинкой */
.price-bar__center {
    position: relative;
    display: flex;
    align-items: center;          /* слова по центру по вертикали плашки */
    justify-content: center;
    column-gap: 109px;            /* расстояние между словами */
    height: 78px;
}

/* слова "prijs" и "lijst" */
.price-bar__word {
    font-size: 32px;
    line-height: 1;
}

.price-bar__word--left {
    font-weight: 700;             /* Bold */
    color: var(--color-white);    /* белый */
    margin-right: -5px;
}

.price-bar__word--right {
    font-weight: 400;             /* Regular */
    color: var(--color-primary);  /* зелёный #718c75 */
    margin-left: -5px;
}

/* картинка строго по центру, съезжает вниз на 35px от верхнего края плашки */
.price-bar__image {
    position: absolute;
    top: 20px;                    /* смещение от верхнего края плашки */
    left: 50%;
    transform: translateX(-50%);
    width: 112px;
    height: 90px;
    object-fit: contain;
    z-index: 5;
}

/* =======================================================
   4. FOTO / GALERIJ BAR (ОРАНЖЕВАЯ ПЛАШКА, ДЕСКТОП+ПЛАНШЕТ)
   ======================================================= */

.foto-bar {
    width: 100%;
    height: 78px;
    background-color: #f88813; /* оранжевая плашка */
    margin-top: 10px;          /* как у коричневой, при необходимости потом подправим */
}

.foto-bar__container {
    height: 100%;
    padding: 0 60px;              /* как у зелёной и коричневой */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;           /* база для абсолютных элементов */
}

/* область навигации в пределах оранжевой плашки */
.foto-bar .header__nav {
    left: 60px;
    width: 380px;
}

/* бургер слева, по центру по высоте плашки */
.foto-bar__burger {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

/* языки справа, по центру по высоте плашки */
.foto-bar__lang-switch {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
}

/* центральный блок со словами и картинкой */
.foto-bar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
}

/* слова "foto" и "galerij" */
.foto-bar__word {
    font-size: 32px;
    line-height: 1;
}

.foto-bar__word--left {
    font-weight: 700;
    color: #26120b;    /* "foto" — коричневый */
    margin-right: -5px;
}

.foto-bar__word--right {
    font-weight: 400;
    color: #ffffff;
    margin-left: -3px;
}

/* картинка по центру, съезжает вниз аналогично коричневой */
.foto-bar__image {
    position: static;        /* больше не абсолютная */
    transform: none;
    width: 100px;
    height: auto;
    object-fit: contain;
    margin: 60px 15px 0;          /* ОДИНАКОВЫЙ отступ слева и справа */
}

/* ================================
   OVER MIJ BAR (десктоп / планшет)
   ================================ */

.about-bar {
    width: 100%;
    height: 78px;
    background-color: var(--color-dark);
    margin-top: 60px;
}

.about-bar__container {
    height: 100%;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* навигация внутри коричневой плашки */
.about-bar .header__nav {
    left: 60px;
    width: 380px;
}

/* бургер слева, по центру по высоте */
.about-bar__burger {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

/* языки справа, по центру по высоте */
.about-bar__lang-switch {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
}

/* центр: два слова + картинка (логика как у foto-bar__center) */
.about-bar__center {
    position: relative;
    display: flex;
    align-items: center;   /* слова по центру по вертикали плашки */
    justify-content: center;
    height: 78px;
}

/* базовый стиль слов */
.about-bar__word {
    font-size: 32px;
    line-height: 1;
}

/* "over" — зелёный, ближе к картинке */
.about-bar__word--left {
    font-weight: 700;
    color: var(--color-primary);
    margin-right: -22px;
}

/* "mij" — белый, симметрично */
.about-bar__word--right {
    font-weight: 400;
    color: var(--color-white);
    margin-left: -47px;
}

/* картинка по центру, свисает вниз, размеры как у файла 159×111 */
.about-bar__image {
    position: static;
    transform: none;
    width: 159px;
    height: 111px;
    object-fit: contain;
    margin: 52px 0px 0;  /* свисает вниз и слова прижаты с двух сторон */
}

/* OPVANG / IN OEKRAINE BAR (зелёная плашка, десктоп/планшет) */

.opvang-bar {
    width: 100%;
    height: 78px;
    background-color: var(--color-primary);  /* фирменный зелёный */
    margin-top: 60px;
}

.opvang-bar__container {
    height: 100%;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* навигация в пределах плашки */
.opvang-bar .header__nav {
    left: 0px;
    width: 100%;
}

/* бургер слева */
.opvang-bar .header__burger {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

/* языки справа */
.opvang-bar .header__lang-switch {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
}

/* центр: слова + картинка, как у Overmij */
.opvang-bar__center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
}

/* слова */
.opvang-bar__word {
    font-size: 30px;
    line-height: 1;
}

.opvang-bar__word--left {
    font-weight: 700;
    color: #ffffff;       /* "opvang" — белым */
    margin-right: -4px;
}

.opvang-bar__word--right {
    font-weight: 400;
    color: var(--color-dark);  /* "in Oekraïne" — тёмно-коричневым */
    margin-left: 2px;
}

/* картинка в центре, свисает вниз */
.opvang-bar__image {
    position: static;
    transform: none;
    width: 130px;
    height: 122px;
    object-fit: contain;
    margin: 60px 8px 0;
}

/* ================================
   FOOTER
   ================================ */

.site-footer {
    background-color: #ffffff;
    margin-top: 80px;              /* отступ от последней плашки */
    padding: 40px 0 30px;
    border-top: 1px solid #deeadf; /* тонкая линия сверху, можно убрать */
}

.site-footer__container {
    padding: 0 60px;
    justify-content: center;   /* было flex-start */
    align-items: center;       /* было flex-start */
    text-align: center;
    flex-direction: column;    /* добавляем, чтобы всё шло колонкой по центру */
}

.site-footer__left {
    flex-shrink: 0;
}

.site-footer__image {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.site-footer__right {
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer__text {
    margin: 0;
    font-size: 16px;
    color: var(--color-dark);
    line-height: 1.4;
}

.site-footer__text a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.site-footer__text a:hover {
    text-decoration: underline;
}

.site-footer__social {
    margin-top: 8px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.site-footer__social img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.site-footer__links {
    margin-top: 10px;
    font-size: 15px;
}

.site-footer__link {
    text-decoration: none;
    color: var(--color-dark);
}

.site-footer__link:hover {
    text-decoration: underline;
}

.site-footer__divider {
    margin: 0 6px;
    color: var(--color-dark);
}

.site-footer__copy {
    margin-top: 12px;
    font-size: 14px;
    color: var(--color-dark);
}

.site-footer__madeby {
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-dark);
}

/* ================================
   POPUP: legal modal
   ================================ */

.legal-modal {
    position: fixed;
    inset: 0;
    display: none;              /* по умолчанию скрыто */
    z-index: 2000;
    font-size: 16px;
}

.legal-modal--open {
    display: block;
}

.legal-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.legal-modal__content {
    position: relative;
    max-width: 700px;
    max-height: 80vh;
    margin: 60px auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 24px 20px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.legal-modal__title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark);
}

.legal-modal__text p {
    margin: 0 0 10px;
    line-height: 1.5;
    color: var(--color-dark);
}

.legal-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-dark);
}

/* мобилка: чуть компактнее */
@media (max-width: 750px) {
    .legal-modal__content {
        margin: 40px 16px;
        max-width: 100%;
        padding: 20px 16px 18px;
        overflow-y: auto;
        max-height: 80vh;
    }

    .legal-modal__title {
        font-size: 18px;
    }
}

/* =======================================================
   АДАПТИВНОСТЬ (Активируется, когда экран меньше 1200px)
   ======================================================= */
   /* ВЫПАДАЮЩЕЕ МЕНЮ СПРАВА ОТ БУРГЕРА (ДЕСКТОП) */
.header__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 380px;
    height: 78px;
}

/* меню сразу под хедером, от самого левого края */
.nav-menu {
    position: absolute;
    top: 78px;               /* высота хедера */
    left: 0;
    margin: 0;
    padding: 16px 24px;
    list-style: none;
    background-color: var(--color-white);  /* белый фон */
    border-radius: 0;
    min-width: 380px;        /* примерно в 2 раза шире */
    display: none;
    z-index: 1000;
}

.nav-menu li {
    padding: 12px 16px;
}

.nav-menu a {
    text-decoration: none;
    color: var(--color-dark);     /* тёмно-коричневый #26120a */
    font-size: 18px;              /* крупнее, «в два раза длиннее» визуально */
    font-weight: 500;
    white-space: nowrap;
}

.nav-menu a:hover {
    text-decoration: underline;   /* только подчёркивание, цвет не меняем */
}

/* показать меню при наведении на бургер или на само меню */
.header__burger:hover + .header__nav .nav-menu,
.header__nav:hover .nav-menu {
    display: block;
}

html {
    scroll-behavior: smooth;
}

.pricelist-placeholder {
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    color: #26120b;
    padding: 80px 20px 120px; /* красиво опускает текст вниз */
    line-height: 1.4;
}

/* ================================
   PRIJSLIJST SECTION
   ================================ */

.pricelist {
    padding: 60px 0 80px;
    background-color: #ffffff;
}

.pricelist__container {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 0 60px;
}

.pricelist__block {
    background-color: #d7ebd9; /* по умолчанию зелёная пастель */
    color: #26120b;
    border-radius: 12px;
    padding: 24px 28px 26px;
}

.pricelist__block--green {
    background-color: #d7ebd9; /* пастельный зелёный */
}

.pricelist__block--orange {
    background-color: #fcdbbf; /* пастельный оранжевый */
}

.pricelist__block--info {
    background-color: #ffffff;
    border: 1px solid #deeadf;
}

.pricelist__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #26120b;
}

.pricelist__note {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 400;
    color: #26120b;
}

.pricelist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pricelist__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 16px;
    font-weight: 400;
}

.pricelist__label {
    flex: 1 1 auto;
}

.pricelist__price {
    flex: 0 0 auto;
    font-weight: 500;
}

.pricelist__info-list {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
}

/* ================================
   FOTOGALERIJ SECTION
   ================================ */

.gallery-section {
    margin-top: 40px;
    padding: 60px 0 80px;
    background-color: #ffffff;
}

.gallery-section__container {
    flex-direction: column;
    align-items: center;
    padding: 0 60px;
}

/* Заголовок галереи */
.gallery-title {
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 50px; /* Отступ снизу до фотографий */
    line-height: 1.2;
}

@media (max-width: 750px) {
    .gallery-title {
        font-size: 24px;
        margin-bottom: 30px; /* Чуть меньше отступ на мобильном */
        padding: 0 10px;
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 картинки в ряд */
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}

.gallery-item {
    margin: 0;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

/* Кнопка "Показать больше" в галерее */
.gallery-toggle {
    margin-top: 24px;
    background: none;
    border: none;
    color: var(--color-primary); /* Зеленый, как в Over mij */
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    display: block;
    margin-left: auto;
    margin-right: auto; /* По центру */
}

/* ЛОГИКА СКРЫТИЯ ФОТОГРАФИЙ */

/* Мобильный (2 колонки): показываем только первые 4 фото (2 ряда) */
@media (max-width: 750px) {
    .gallery-grid.is-collapsed .gallery-item:nth-child(n+5) {
        display: none;
    }
}

/* Десктоп/Планшет: показываем первые 8 фото (2 ряда, по 4 в ряд) */
/* Если фото будет 9 и больше — они скроются, пока не нажмешь кнопку */
@media (min-width: 751px) {
    .gallery-grid.is-collapsed .gallery-item:nth-child(n+9) {
        display: none;
    }
}

/* ABOUT TEXT BLOCK */
.about-text {
    padding: 60px 0 80px;
    background-color: #ffffff;
}

.about-text__container {
    padding: 0 60px;           /* воздух по краям, как у pricelist */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-text__block {
    position: relative;
    overflow: hidden;          /* обрезаем лишний текст по низу */
    background-color: #d7ebd9;
    border: 1px solid #deeadf;
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 960px;
    font-size: 18px;
    line-height: 1.55;
    color: #26120b;
}

.about-text__block p {
    margin: 0 0 20px;
}

.about-text__block p:last-child {
    margin-bottom: 0;
}

/* Кнопка Lees verder / Lees minder */
.about-text__toggle {
    margin-top: 24px;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    display: block;
    margin-left: auto;
    margin-right: 0;
}

/* СВЁРНУТОЕ СОСТОЯНИЕ: ДЕСКТОП/ПЛАНШЕТ — показываем только первые 3 абзаца */
.about-text__block.is-collapsed p:nth-of-type(n+4) {
    display: none;
}

.no-wash-link {
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    margin-left: 8px;
}

.nowash-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.nowash-modal.is-visible {
    display: block;
}

.nowash-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.nowash-modal__content {
    position: relative;
    max-width: 520px;
    margin: 80px auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 28px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.nowash-modal__title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #26120b;
}

.nowash-modal__text p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #26120b;
}

.nowash-modal__text p:last-child {
    margin-bottom: 0;
}

.nowash-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #26120b;
}

/* МОБИЛА: показываем только первые 2 абзаца */
@media (max-width: 750px) {
    .about-text__container {
        padding: 0 20px;   /* как у других мобильных секций */
    }

    .about-text__block {
        padding: 22px 18px;
        font-size: 16px;
    }

    .about-text__block.is-collapsed p:nth-of-type(n+3) {
        display: none;
    }

    .about-text__toggle {
        margin-top: 20px;
        font-size: 15px;
    }
}

/* планшет: 2 колонки */
@media (min-width: 751px) and (max-width: 1199px) {
    .gallery-section__container {
        padding: 0 40px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* мобила: 2 колонки */
@media (max-width: 750px) {
    .gallery-section {
        padding: 40px 0 60px;
    }

    .gallery-section__container {
        padding: 0 20px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 картинки в ряд */
        gap: 10px; /* Уменьшили отступ, чтобы картинки были крупнее */
    }
}

@media (min-width: 751px) and (max-width: 1199px) {

    .promo-section {
        padding-top: 70px;
    }

    /* центрируем промо-блок и даём воздух по краям */
    .promo-section .container {
        justify-content: center;
        padding: 0 60px;  /* боковые отступы */
    }

    .promo-content-wrapper {
        left: 0;
        gap: 70px;       /* меньше, чем 192, но не впритык */
    }

    /* уменьшенные размеры под планшет */
    .promo__logo {
        width: 160px;
        height: auto;
    }

    .promo__title {
        font-size: 19px;
        margin-top: 40px;
    }

    .promo-block--right {
        width: 340px;
        max-width: 340px;
    }

    .item__icon {
        width: 34px;
        height: 34px;
        margin-right: 20px;
    }

    .item__text {
        font-size: 17px;
        max-width: 320px;
    }

}

@media (max-width: 750px) {

    /* общие настройки страницы на мобиле */
    .page-wrapper {
        width: 100%;
        max-width: 750px;
    }

    .header {
        height: 155px; /* высокая зелёная плашка как в макете */
        position: relative;
    }

    .header .container {
        padding: 0 20px;
        justify-content: center;
    }

    /* контакты в шапке на мобиле убираем */
    .header__contact {
        display: none;
    }

    /* бургер справа, по центру плашки по вертикали */
    .header__burger {
        position: absolute;
        top: 60px;
        right: 20px;
        width: 30px;
        height: 20px;
    }

    /* языки слева, EN / ND, капслок */
    .header__lang-switch {
        position: absolute;
        top: 60px;
        left: 20px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .header__burger .burger-line {
    background-color: #26120b;
    }

    .header__lang-switch a,
    .header__lang-switch .lang-separator {
        color: #26120b;
    }

    /* промо-секция сразу под плашкой */
    .promo-section {
        padding-top: 0;
        padding-bottom: 40px;
    }

    .promo-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 32px;
        left: 0;
        padding: 0 24px;
        width: 100%;
        margin-top: -40px; /* поднимаем логотип вверх, чтобы он «висел» на плашке */
    }

    .promo-block--left {
        align-items: center;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    /* ЛОГО НА МОБИЛЕ: размер как в макете */
    .promo__logo {
        width: 210px;
        height: auto;
        object-fit: contain;
        margin-bottom: 20px;
    }

    .promo__logo {
    position: relative;
    z-index: 10 !important;
    }

    /* исходный десктопный заголовок прячем на мобиле */
    .promo__title {
        display: none;
    }

    /* список услуг вертикально, слева лапка, справа текст */
    .promo-block--right {
    width: auto;        /* ширина по содержимому */
    max-width: 100%;    /* не вылезаем за экран */
    margin: 0 auto;     /* центрируем под логотипом */
    gap: 24px;
}

    .promo-item {
        align-items: center;
    }

    .item__icon {
        width: 58px;
        height: 58px;
        margin-right: 20px;
    }

    .item__text {
        font-size: 22px;     /* тексты услуг 26 regular */
        max-width: none;
    }

    /* ОРАНЖЕВЫЙ ЗАГОЛОВОК ПОД ПРОМО-СПИСКОМ */
    .promo-block--right::after {
        content: "JOUW POOTJES IN VEILIGE HANDEN!";
        display: block;
        margin-top: 32px;
        font-weight: 700;
        font-size: 24px;
        color: var(--color-promo-title);
        text-transform: uppercase;
        text-align: center;
    }

    /* мобильный блок контактов внизу страницы */
    .mobile-contacts {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 60px 20px 40px;
        margin-top: -40px;
    }

    .mobile-contacts__image {
        width: 100px;
        height: 100px;
        object-fit: contain;
        margin-bottom: 24px;
    }

    .mobile-contacts__links {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 24px;
    }

    .mobile-contacts .contact__link {
        color: #718c75;       /* фирменный зелёный */
        font-size: 20px;      /* ссылки 20 Medium */
        font-weight: 500;
        text-decoration: none;
    }

    .mobile-contacts .contact__link:hover {
        text-decoration: underline; /* подчёркивание, цвет не меняем */
    }

    .mobile-contacts__social {
        display: flex;
        gap: 26px;
        justify-content: center;
        margin-top: -12px;
    }

    .mobile-contacts__social img {
        width: 38px;
        height: 38px;
        object-fit: contain;
    }

    .promo-block--left {
        margin-top: -90px !important; /* было -26, поднимаем выше */
    }

    .promo-section .container {
        justify-content: center;
    }

    .header__nav {
        height: 175px;
        width: 100%;           /* как высота зелёной плашки */
    }

    .nav-menu {
        top: 98px;              /* меню сразу под плашкой */
        right: 0;                /* прижать к правому краю, под бургер */
        left: auto;              /* отменить left: 0 */
        min-width: 280px;        /* поменьше, чтобы не «улетало» влево */
    }

    .mobile-contacts__row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    }

    .price-bar {
        margin-top: -10px;
    }

        /* коричневая плашка — мобильная версия, только бургер и языки */
    .price-bar .header__burger {
        position: absolute;
        top: 25px;
        right: 25px;
        left: auto;
        width: 30px;
        height: 20px;
        transform: none;
    }

    .price-bar .header__burger .burger-line {
        background-color: #ffffff;
    }

    .price-bar .header__lang-switch {
        position: absolute;
        top: 50%;
        left: 25px;
        right: auto;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .price-bar .header__lang-switch a,
    .price-bar .header__lang-switch .lang-separator {
        color: #ffffff;
    }

    .header__lang-switch .lang-separator,
    .price-bar .header__lang-switch .lang-separator,
    .foto-bar .header__lang-switch .lang-separator {
        display: none;
    }

        /* навигация в коричневой плашке — выравниваем по экрану */
    .price-bar .header__nav {
        left: 0;
        width: 100%;
    }

        /* позиция выпадающего меню на коричневой плашке */
    .price-bar .nav-menu {
        top: 78px;   /* строго высота коричневой плашки */
        right: 35;
        left: auto;
    }

    .opvang-bar .nav-menu {
    top: 78px;          /* ровно под плашкой */
    right: 0;           /* прижато к правому краю */
    left: auto;
    min-width: 280px;   /* чтобы меню не было слишком узким */
    }

        /* оранжевая плашка — мобильная версия, бургер и языки как у коричневой */
    .foto-bar .header__burger {
        position: absolute;
        top: 25px;
        right: 25px;
        left: auto;
        width: 30px;
        height: 20px;
        transform: none;
    }

    .foto-bar .header__burger .burger-line {
        background-color: #ffffff; /* на оранжевом фоне — белый бургер */
    }

    .foto-bar .header__lang-switch {
        position: absolute;
        top: 50%;
        left: 25px;
        right: auto;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .foto-bar .header__lang-switch a,
    .foto-bar .header__lang-switch .lang-separator {
        color: #ffffff; /* языки белые, как на коричневой */
    }

        /* ================================
       OVER MIJ BAR (мобила)
       ================================ */

    .about-bar {
        width: 100%;
        height: 78px;
        background-color: var(--color-dark);
        margin-top: 40px;          /* чуть ближе к галерее на мобиле */
    }

    .about-bar__container {
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    /* навигация в коричневой плашке на мобиле */
    .about-bar .header__nav {
        left: 0;
        width: 100%;
    }

    /* бургер справа, как у price-bar и foto-bar */
    .about-bar .header__burger,
    .about-bar__burger {
        position: absolute;
        top: 25px;
        right: 25px;
        left: auto;
        width: 30px;
        height: 20px;
        transform: none;
    }

    .about-bar .header__burger .burger-line {
        background-color: #ffffff;
    }

    /* языки слева, вертикально, как на других плашках */
    .about-bar .header__lang-switch,
    .about-bar__lang-switch {
        position: absolute;
        top: 50%;
        left: 25px;
        right: auto;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .about-bar .header__lang-switch a,
    .about-bar .header__lang-switch .lang-separator {
        color: #ffffff;
    }

    /* центр: слова + картинка */
    .about-bar__center {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 78px;
    }

    .about-bar__word {
        font-size: 26px;           /* как у других плашек на мобиле */
        line-height: 1;
    }

    .about-bar__word--left {
        font-weight: 700;
        color: var(--color-primary);
        margin-right: 5px;
    }

    .about-bar__word--right {
        font-weight: 400;
        color: var(--color-white);
        margin-left: -15px;
    }

    .about-bar__image {
        position: static;
        transform: none;
        width: 85px;
        height: auto;
        object-fit: contain;
        margin: 48px 0px 0;   /* чуть выше, чем на десктопе, но без изменения реального размера */
    }

    /* навигация в оранжевой плашке — вытягиваем на ширину экрана */
    .foto-bar .header__nav {
        left: 0;
        width: 100%;
    }

    /* позиция выпадающего меню на оранжевой плашке */
    .foto-bar .nav-menu {
        top: 78px;       /* высота плашки */
        right: 0;
        left: auto;
        min-width: 280px;
    }

    /* уменьшенный размер слов на обеих плашках — коричневой и оранжевой */
    .foto-bar__word {
        font-size: 26px;
    }

        /* PRIJSLIJST — мобильная версия */
    .pricelist {
        padding: 60px 0 60px;
    }

    .pricelist__container {
        padding: 0 20px;
        gap: 20px;
    }

    .pricelist__block {
        padding: 18px 16px 20px;
    }

    .pricelist__title {
        font-size: 18px;
    }

    .pricelist__item {
        font-size: 15px;
    }

    .pricelist__info-list {
        font-size: 13px;
    }

    .price-bar__word {
        font-size: 26px;
    }

    /* OPVANG BAR — мобильная версия */

    .opvang-bar {
        width: 100%;
        height: 78px;
        background-color: var(--color-primary);
        margin-top: 40px;
    }

    .opvang-bar__container {
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    /* бургер справа, как на других мобильных плашках */
    .opvang-bar .header__burger {
        position: absolute;
        top: 25px;
        right: 25px;
        left: auto;
        width: 30px;
        height: 20px;
        transform: none;
    }

    .opvang-bar .header__burger .burger-line {
        background-color: #ffffff;
    }

    /* языки слева, колонкой */
    .opvang-bar .header__lang-switch {
        position: absolute;
        top: 50%;
        left: 25px;
        right: auto;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .opvang-bar .header__lang-switch a,
    .opvang-bar .header__lang-switch .lang-separator {
        color: #ffffff;
    }

    /* центр: слова + картинка */
    .opvang-bar__center {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 78px;
    }

    .opvang-bar__word {
        font-size: 24px;   /* уменьшили шрифт на мобиле */
        line-height: 1;
    }

    .opvang-bar__word--left {
        font-weight: 700;
        color: #ffffff;       /* "opvang" — белым */
        margin-right: -8px;
    }

    .opvang-bar__word--right {
        font-weight: 400;
        color: var(--color-dark);  /* "in Oekraïne" — тёмно-коричневым */
        margin-left: 0px;
    }

    .opvang-bar__image {
        position: static;
        transform: none;
        max-width: 120px;     /* картинка чуть меньше */
        width: 100%;
        height: auto;
        object-fit: contain;
        margin: 35px 8px 0;   /* чуть выше и ближе к словам */
    }

        /* FOOTER — мобильная версия */

    .site-footer {
        margin-top: 40px;
        padding: 32px 20px 24px;
        border-top: 1px solid #deeadf;
    }

    .site-footer__container {
        padding: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-footer__right {
        margin-left: 0;
        margin-top: 16px;
        align-items: center;
    }

    .site-footer__social {
        justify-content: center;
    }

    .site-footer__copy,
    .site-footer__madeby {
        font-size: 13px;
    }

        /* МЕНЬШЕ ШРИФТ НА ВСЕХ ПЛАШКАХ (МОБИЛА) */
    .price-bar__word,
    .foto-bar__word,
    .about-bar__word,
    .opvang-bar__word {
        font-size: 20px;   /* было 26–32, теперь компактнее */
    }

    /* МЕНЬШЕ КАРТИНКИ НА ПЛАШКАХ (МОБИЛА) */
    .price-bar__image {
        width: 90px;
        height: auto;
    }

    .foto-bar__image {
        width: 80px;
        height: auto;
    }

    .opvang-bar__image {
        width: 100px;
        height: auto;
    }

}

.seo-hidden {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.opvang-placeholder {
    width: 100%;
    text-align: center;
    font-size: 20px;
    padding: 120px 0 60px 0;
    color: #26120b;
}

.site-footer__copy,
.site-footer__madeby {
    font-size: 12px;   /* сделает меньше */
    opacity: 0.85;     /* чуть тише визуально, но не блекло */
}

html.nowash-open {
    overflow: hidden;
}

.nowash-modal__content {
    max-height: 80vh;
    overflow-y: auto;
}

.about-photo {
    float: right;
    width: 220px;
    height: auto;
    margin: 0 0 12px 24px;
    border-radius: 12px;
}

@media (max-width: 750px) {
    .about-photo {
        width: 130px;
        margin: 0 0 10px 16px;
    }
}

/* Мобильные стили для попапа "Waarom zonder wassen" */
@media (max-width: 750px) {
    .nowash-modal__content {
        margin: 40px 16px;     /* Поднимаем окно выше (было 80px) */
        padding: 20px 16px;    /* Немного уменьшаем внутренние отступы */
        max-height: 80vh;      /* Ограничиваем высоту экрана */
        overflow-y: auto;      /* Включаем прокрутку внутри окна */
    }
}

/* Текст о пожертвовании */
.opvang-statement {
    text-align: center;
    max-width: 900px;
    margin: 80px auto 0;   /* Отступ сверху от зеленой плашки */
    padding: 0 20px;
    font-size: 24px;       /* Крупный шрифт */
    font-weight: 500;      /* Жирнее обычного */
    line-height: 1.5;
    color: var(--color-primary); /* Фирменный зеленый */
}

/* Корректировка отступа у заглушки "в разработке" */
/* Находим старый класс .opvang-placeholder и меняем padding-top */
.opvang-placeholder {
    padding-top: 40px; /* Было 120px. Уменьшаем, чтобы подтянуть к тексту выше */
}

/* Адаптив для мобильного */
@media (max-width: 750px) {
    .opvang-statement {
        margin-top: 40px;
        font-size: 20px;   /* Чуть меньше на телефоне */
    }
}