@media screen and (max-width: 1440px) {
   /* Header стилі */
    header {
        max-width: 1400px;
		padding-right: 0;
    }

    .nav-icons {
        margin-right: -10px; /* Зміщуємо мови і кошик вліво */
    }

    /* Секції */
    .section {
        max-width: 1400px;
    }
	
	 /* Стилі для сторінки 404 */
    .error-page {
        max-width: 700px;
        margin: 50px auto;
    }
    
    .error-container {
        padding: 35px 25px;
    }
    
    .error-icon img {
        width: 110px;
    }
    
    .error-page h1 {
        font-size: 2.3em;
    }
	
	/* СВІТ */
    .container {
        max-width: 1300px; /* Обмежуємо максимальну ширину контейнера */
        margin: 0 auto;
        gap: 30px;
    }

    .details-section .icons-container {
        top: -140px; /* Піднімаємо іконки ближче до header */
        right: -50px;
    }

    /* Поля вводу на сторінці delivery1 */
    .contact-info .form-control,
    .delivery-address .form-control {
        border: 1px solid #666;
        border-radius: 4px;
    }

    .form-group {
        margin-bottom: 16px;
        width: 100%;
    }

    /* Для галереї */
    .gallery-column:first-child {
        margin-right: -65px;
    }

    .gallery-column:last-child {
        margin-left: -65px;
    }

    .gallery-item {
        width: 75%;
    }
	    .exhibition-banner-container {
        max-width: 380px;
    }
}

/* Медіа-запити для екрану 1280px */
@media screen and (max-width: 1280px) {
   /* Header стилі */
    header {
        max-width: 1200px;
		padding-right: 0;
    }
	
	.nav-icons {
        margin-right: -25px; /* Зменшуємо від'ємний відступ зправа */
    }

    /* Hero секція */
    .hero {
        height: 70vh;
    }

    .hero h2 {
        font-size: 40px;
    }

    /* About секція */
    .about-container {
        padding: 0 20px;
    }

    .artist-tagline {
        font-size: 2.4rem;
    }

    .artist-image {
        width: 30vw;
        height: 30vw;
    }

    /* Галерея */
    .gallery {
        max-width: 1200px;
        gap: 20px;
        padding: 20px;
    }

    .gallery-category {
        width: 280px;
        height: 280px;
        flex: 0 0 280px;
    }

    .gallery-category img {
        width: 280px;
        height: 280px;
    }

    /* Футер */
    .footer-container {
        max-width: 1200px;
        padding: 0 30px;
    }

    .footer-tagline {
        font-size: 2rem;
    }
	
	 /* Стилі для сторінки 404 */
    .error-page {
        max-width: 650px;
        margin: 45px auto;
    }
    
    .error-container {
        padding: 30px 25px;
    }
    
    .error-icon img {
        width: 100px;
    }
    
    .error-page h1 {
        font-size: 2.1em;
    }
    
    .button-container {
        gap: 15px;
    }
	
	/* Галерея на сторінці various */
    .gallery-item {
        width: 70%; /* Зменшуємо ширину контейнера */
    }

    .gallery-item a {
        width: 100%;
    }

    .gallery-item .main-image,
    .gallery-item .interior-view {
        width: 100%;
        height: auto;
    }
	
	/* Налаштування колонок галереї */
    .gallery-column:first-child {
        margin-right: -80px; /* Зменшуємо відступ (було -50px) */
    }

    .gallery-column:last-child {
        margin-left: -80px; /* Зменшуємо відступ (було -50px) */
    }

    /* Специфічні стилі для сторінки "світ" */
	.container {
        max-width: 1100px; /* Зменшуємо максимальну ширину */
        margin: 0 auto;
        gap: 30px;
        display: flex;
        align-items: flex-start;
    }
	
    .details-section .icons-container {
        position: absolute;
        top: -30px;
        right: -70px;
    }

    .image-section {
        flex: 1.5;
        padding-top: 40px;
    }

    .details-section {
        flex: 1;
        padding-top: 40vh;
    }
	
	.details-section .artwork-description {
        width: 125%;
        margin-left: 0;
    } 
	
    .main-image {
        width: 60%;
        margin: 0 auto;
    }

    .thumbnail-container {
        width: 65%;
        margin: 15px auto;
    }

    .video-container {
        width: 60%;
        margin: 40px auto;
    }
	
	 /* DELIVERY1 */
    .contact-info .form-control,
    .delivery-address .form-control {
        border: 1px solid #666; /* Явно вказуємо border для полів вводу */
        border-radius: 4px; /* Додаємо заокруглення кутів */
    }

    .form-group {
        margin-bottom: 16px; /* Відступ між полями */
        width: 100%; /* Повна ширина */
    }
	    .exhibition-banner-container {
        max-width: 360px;
    }
}

/* Адаптація для ширини екрану 900-1100px */
@media screen and (min-width: 800px) and (max-width: 1100px){
	/* Базова структура */
    .container {
        width: 100%;
        padding: 0 20px;
    }

    .section {
        width: 100%;
        padding: 0 20px;
        overflow-x: hidden;
    }

    /* Фіксація overflow */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    /* Header */
    .decorative-element {
        width: 220px;
    }

    .artist-name {
        font-size: 2.2rem;
        left: 35px;
    }

    header .nav-links {
        gap: 15px;
        margin-right: 5px;
        justify-content: flex-end;
        margin-left: 240px;
    }

    .nav-links a {
        white-space: nowrap;
        font-size: 0.95rem;
    }

    header .nav-icons {
        margin-right: 15px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .icons-container {
        right: 25px;
        top: 90px;
    }
	
	 /* Модальне вікно кошика */
    .cart-modal {
        width: 320px; /* Зменшуємо ширину */
        max-width: 90%;
        right: 0;
    }

    /* Hero секція */
    .hero {
        min-height: 400px;
        padding: 40px 0;
        width: 100vw;
        margin-top: 0;
        background-size: cover;
        background-position: center;
    }

    .hero h2 {
        font-size: 38px;
        line-height: 1.6;
    }

    .hero-line {
        margin-bottom: 25px;
    }

    .hero-line.first {
        margin-left: 10%;
    }

    .hero-line.second {
        margin-left: 25%;
    }

    .hero-line.third {
        margin-left: 45%;
    }

    /* About секція */
    .about-container {
        flex-direction: row;
        margin-top: 20px;
        padding: 0 20px;
        max-width: 100%;
    }

    .tagline-container {
        flex: 0 0 50%;
    }

    .about-content {
        flex: 0 0 45%;
        padding-right: 15px;
        margin-top: 40px;
    }

    .about-content h3 {
        font-size: 1.6em;
        margin-bottom: 20px;
        text-align: center;  /* Змінюємо з left на center */
        width: 100%;        /* Переконуємось, що заголовок займає всю ширину */
    }

    .about-content p {
        font-size: 0.9em;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .artist-tagline {
        font-size: 1.7rem;
        margin-left: 5%;
        margin-top: 20px;
        white-space: normal;
    }

    /* Gallery */
    .section:not(.about-page) .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
    }

    .gallery-category {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        flex: none;
    }

    .gallery-category img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .category-title {
        min-width: 120px;
        font-size: 15px;
    }

    /* Футер */
    .footer {
        padding: 40px 0; /* Відновлюємо оригінальні відступи */
    }

    .footer-container {
        padding: 0 40px; /* Відновлюємо оригінальні бічні відступи */
        max-width: 1400px;
        display: flex;
        justify-content: space-between;
    }

    .footer-tagline {
        flex: 0 0 35%;
        font-size: 1.8rem;
        line-height: 1.4;
        padding-right: 40px;
    }

    .footer-columns {
        flex: 0 0 60%;
        display: flex;
        justify-content: space-between;
        padding-right: 20px;
    }

    /* Сторінка various  */
	/* Заголовок на сторінці various */
    h1 {
        font-size: 2rem; /* Зменшуємо розмір з 2.5rem до 2rem */
        margin-bottom: 15px;
    }
	
    .gallery-column:first-child {
        margin-right: -70px; /* Збільшуємо відступ */
    }

    .gallery-column:last-child {
        margin-left: -70px; /* Збільшуємо відступ */
    }
	
	 /* СТОРІНКА 404 */
    .error-page {
        max-width: 600px;
        margin: 40px auto;
    }
    
    .error-container {
        padding: 30px 20px;
    }
    
    .error-icon img {
        width: 95px;
    }
    
    .error-page h1 {
        font-size: 2em;
        margin-bottom: 15px;
    }
    
    .error-message {
        margin: 15px 0;
    }
    
    .error-message p {
        font-size: 16px;
        line-height: 1.4;
    }
    
    .button-container {
        gap: 15px;
        margin-top: 25px;
    }
    
    .return-button,
    .browse-more-button {
        padding: 10px 22px;
        font-size: 15px;
    }

    /* Світ */
    .container .details-section .icons-container {
        right: 5px;
        top: -30px;
        position: absolute;
        z-index: 10;
    }

    .container .details-section .title {
        width: 120%;
        margin-left: -50px;
        margin-top: -50px;
        font-size: 1.6em;
    }

    .container .details-section .artwork-description {
        width: 120%;
        margin: 20px 0;
        margin-left: -50px;
        padding-right: 20px;
    }

    .container .image-section .main-image,
    .details-page .main-image {
        width: 60%;
        margin: -20px auto 0;
    }

    .container .image-section .video-container {
        width: 60%;
        padding-bottom: 33.75%;
        margin: 30px auto 0;
    }

    /* Мініатюри */
    .thumbnail-container {
        width: 400px;
        margin: 15px auto;
        margin-top: 20px;
        position: relative;
        overflow: hidden;
        padding: 0 25px; /* Додаємо відступи для кнопок */
    }

    .thumbnails {
        display: flex;
        gap: 5px;
        padding: 0; /* Прибираємо внутрішні відступи */
        margin: 0;
        align-items: center;
        justify-content: flex-start;
    }

    .thumbnail {
        width: 55px;
        height: 55px;
        min-width: 55px;
        flex: 0 0 auto;
        object-fit: cover;
    }

    .nav-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 25px;
        height: 100%;
        background: none;
        border: none;
        cursor: pointer;
		z-index: 2;
        padding: 0;
    }

    .prev-button {
        left: 0;
    }

    .next-button {
        right: 0;
    }

    /* Checkout сторінка */
    .checkout-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .progress-bar {
        width: 70%;
        max-width: 1000px;
    }

    .contact-info,
    .delivery-address {
        flex: 0 0 40%;
        padding: 0;
        margin-bottom: 0;
    }

    .contact-info-text,
    .delivery-address-text {
        flex: 0 0 35%;
        margin-top: 50px;
    }
	
	 /* Сторінка delivery - налаштування списку в розділі упаковка */
	.delivery-section p {
        margin-left: 60px;  /* Зміщуємо текст вправо */
    }
	 
    .delivery-section {
        padding-left: 20px; /* Додаємо відступ зліва для всього розділу */
    }

    .delivery-section ul {
        margin-left: 60px; /* Збільшуємо відступ зліва для списку */
        padding-left: 20px; /* Додатковий відступ для маркерів списку */
        list-style-position: outside; /* Маркери списку будуть за межами тексту */
    }

    .delivery-section li {
        padding-left: 10px; /* Відступ від маркера до тексту */
        margin-bottom: 8px; /* Відступ між пунктами списку */
    }
	    .exhibition-banner-container {
        max-width: 340px;
    }
}

/* Адаптація для ширини екрану 710-800px */
@media screen and (min-width: 710px) and (max-width: 800px) {
	/* Базові налаштування для правильної ширини */
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .section {
        width: 100%;
        max-width: 100vw;
        padding: 0;
        overflow: hidden;
    }

    .about-container {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        position: relative;
    }
	
	/* Модальне вікно кошика */
    .cart-modal {
        width: 300px; /* Зменшуємо ширину */
        max-width: 90%;
        right: 0;
    }
	
	#checkoutButton.add-to-cart {
        padding: 8px 15px;
        font-size: 14px;
        width: 80%;
        margin: 10px auto;
    }
	
    /* Header */
    .decorative-element {
        width: 180px;
        left: 10px;
    }
	
	/* Зменшення іконок соцмереж */
    .social-icons img {
        width: 22px;    /* Зменшуємо з 24px */
        height: 22px;
    }

    .artist-name {
        font-size: 1.7rem;
        left: 20px;
    }

    .nav-links {
        gap: 6px;
        margin-left: 190px;
        margin-right: 5px;
    }

    .nav-links a {
    font-size: 0.75rem;  /* Зменшуємо розмір шрифту */
    white-space: nowrap; /* Забороняємо перенос */
    padding: 0 5px;     /* Зменшуємо бічні відступи */
}

    .nav-icons {
        margin-right: 8px;
        gap: 8px;
    }

    /* Hero секція */
    .hero {
        min-height: 400px;
        padding: 40px 0;
    }

    .hero h2 {
        font-size: 38px;
        line-height: 1.6;
    }

    .hero-line.first {
        margin-left: 10%;
    }

    .hero-line.second {
        margin-left: 25%;
    }

    .hero-line.third {
        margin-left: 45%;
    }

    /* Базовий контейнер */
.about-container {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative; /* Додаємо для правильного позиціонування дочірніх елементів */
    display: block; /* Змінюємо на block для кращого контролю розташування */
}

    .artist-tagline {
        font-size: 1.4rem;
        margin-left: 15%;
        margin-top: 30px; /* Збільшуємо відступ зверху */
        margin-bottom: 20px;
        width: 90%;
    }
	
	/* Фото автора */
    .artist-image {
        width: 40vw;
        height: 40vw;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }
	
	.content-wrapper {
        position: relative;
        width: 100%;
        clear: both;
    }

    .container {
        width: 100%;
        padding: 0 20px;
    }

    .section {
        width: 100%;
        padding: 0 20px;
        overflow-x: hidden;
    }

    .about-content {
        width: 100%;
        max-width: 738px;
        margin: 0 auto;
        position: relative;
        padding: 0 15px;
    }

    /* Заголовок "Про автора" */
    .about-content h3 {
        margin: 0;
        padding-left: calc(40vw + 30px);
        text-align: center !important;
        position: relative;
        width: auto;
        white-space: nowrap; /* Щоб текст був в один рядок */
        margin-top: -210px; /* Підняти заголовок вище */
        margin-bottom: 20px;
    }

    /* Перший абзац (праворуч від фото) */
    .about-content p:first-of-type {
        padding-left: calc(40vw + 30px);
        margin-top: 0; /* Піднімаємо текст до заголовка */
        margin-bottom: 20px;
        line-height: 1.6; /* Покращуємо читабельність */
    }

    /* Решта тексту під фото */
    .about-content p:not(:first-of-type) {
        clear: both;
        width: 100%;
        margin-top: 20px;
        padding: 0;
    }

    .about-content p {
        font-size: 0.9em;
    }

    /* Gallery */
    .section:not(.about-page) .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .gallery-category {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        flex: none;
    }

    .gallery-category img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
	
	 /* Стилі для сторінки 404 */
    .error-page {
        max-width: 500px;
        margin: 40px auto;
        padding: 0 20px;
    }
    
    .error-container {
        padding: 25px 20px;
    }
    
    .error-icon img {
        width: 90px;
    }
    
    .error-page h1 {
        font-size: 1.9em;
        margin-bottom: 15px;
    }
    
    .error-message {
        margin: 15px 0;
    }
    
    .error-message p {
        font-size: 15px;
        line-height: 1.4;
    }
    
    .button-container {
        gap: 12px;
    }
    
    .return-button,
    .browse-more-button {
        padding: 10px 20px;
        font-size: 15px;
    }
	
	/* VARIOUS */
	/* Заголовок сторінки */
    h1 {
        font-size: 1.7rem; /* Зменшуємо розмір заголовка */
        margin-bottom: 20px;
    }
	
    .gallery {
        width: 100%;
        max-width: 768px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    /* Колонки галереї */
    .gallery-column:first-child {
        margin-right: -55px; /* Від'ємний відступ для накладання */
    }

    .gallery-column:last-child {
        margin-left: -55px; /* Від'ємний відступ для накладання */
    }

    /* Елементи галереї */
    .gallery-item {
        width: 250px;
        margin-bottom: 8px;
    }

    /* Зображення в галереї */
    .gallery-item a {
        width: 250px;
        display: block;
    }

    .gallery-item a img {
        width: 250px;
        height: 250px;
        object-fit: cover;
    }

    /* Стилі для тексту під картинами */
    .gallery-item-info .title-and-size {
        font-size: 12px; /* Зменшуємо розмір шрифту заголовка */
    }

    .gallery-item-info .price {
        font-size: 12px; /* Зменшуємо розмір шрифту ціни */
    }

    /* СВІТ */
    .container .image-section .main-image,
    .details-page .main-image {
        width: 80%;
        max-width: 800px;
        margin: -50px auto 0;
    }

    .container .image-section .video-container {
        width: 80%;
        max-width: 800px;
        padding-bottom: 45%;
        margin: 30px auto 0;
    }

    /* Мініатюри */
    .thumbnail-container {
        width: 340px;
        margin: 15px auto;
        margin-top: 20px;
        position: relative;
        overflow: visible;
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .thumbnails {
        display: flex;
        gap: 5px;
        padding: 0;
        margin: 0;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .thumbnail {
        width: 45px;
        height: 45px;
        min-width: 45px;
        min-height: 45px;
        flex: 0 0 45px;
        object-fit: cover;
        display: block;
    }

    .nav-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 100%;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2;
        padding: 0;
    }
	
	/* Змінюємо layout контейнера на вертикальний */
    .container {
        width: 100%;
        max-width: 768px;
        margin: 0 auto;
        display: flex;
        gap: 30px;
    }

    /* Зміщення іконок соцмереж */
    .details-section .icons-container {
        right: -5px; /* Змінюємо з -70px (або поточного значення) */
    }

    /* Повертаємо позиціонування правої колонки */
    .details-section {
        width: 40%;
        position: relative;
        padding-top: 0;  /* Прибирає відступ зверху - важливо для позиції назви */
        margin-top: 0;   /* Прибирає відступ зверху - важливо для позиції назви */
    }
	
    /* Заголовок */
    .details-section .title {
        font-size: 22px; /* Зменшуємо розмір шрифту */
		margin-top: 150px;    /* Відступ зверху щоб вирівняти з фото */
	    padding-top: 0;      /* Прибираємо внутрішній відступ */
        position: relative;  /* Для правильного позиціонування */
    }
	
	 /* Зменшення розміру ціни */
     .details-section .price {
        font-size: 1.0em; /* Зменшуємо розмір ціни */
        margin-bottom: 15px;
    }
	

    #currencySelector {
        font-size: 0.8em; /* Зменшуємо розмір селектора валют */
        padding: 2px 8px;
        height: 22px;
    }
	
	.details-section .artwork-description {
        display: none;
    }
	
	/* Показуємо мобільний опис під відео */
    .mobile-description {
        display: block;
        width: 180%;         /* Зменшуємо ширину */
        margin: 20px auto;  /* Центруємо */
        padding: 0 40px;    /* Збільшуємо відступи з боків */
        position: relative; /* Для контролю позиції */
        left: 40px;        /* Зміщуємо вправо */
    }

    .mobile-description p {
        margin-bottom: 15px;
        line-height: 1.4;
        font-size: 13px;
        text-indent: 20px;
    }

    /* Футер */
    .footer-container {
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .footer-tagline {
        font-size: 1.6rem;
        line-height: 1.2;
        margin-bottom: 40px;
        padding-left: 20px;
        width: 100%;
    }

    .footer-columns {
        width: 100%;
        display: flex;
        flex-direction: row; /* Змінюємо на row для розташування в ряд */
        justify-content: flex-start;
        gap: 20px; /* Збільшуємо відступ між колонками */
        padding-left: 20px;
    }

    .footer-links,
    .footer-contact {
        font-size: 0.8rem;
        min-width: 160px;
    }

    /* Стилі для зображень */
    .footer .social-icons img {
        width: 22px;
        height: 22px;
    }

    /* Blog */
    .blog-post-image img {
        height: auto;
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
    }
	
	/* СТОРІНКА ПРО АВТОРА 768 */
    .about-page {
        margin: 20px auto;
        padding: 0 15px;
    }

    /* Hero секція */
    .about-hero {
        height: 300px; /* Зменшуємо висоту hero */
        margin-bottom: 30px;
    }

    .about-hero h1 {
        font-size: 2.2em;
    }
	
	 /* Заголовки */
    .about-section h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* Основний текст */
    .about-text p {
        font-size: 13px;
        line-height: 1.4; /* Зменшуємо міжрядковий інтервал */
        margin-bottom: 12px; /* Зменшуємо відступ між абзацами */
        text-indent: 20px;
    }

    /* Якщо є підзаголовки */
    .about-text h3 {
        font-size: 16px;
        margin: 15px 0 10px;
    }
	
	 /* Сторінка delivery  */
	  /* Контейнер для блоків доставки */
    .delivery-options {
        gap: 15px; /* Зменшуємо відступ між блоками */
    }

    /* Блоки з інформацією про доставку */
    .delivery-option {
        padding: 15px; /* Зменшуємо внутрішні відступи */
        min-height: 220px; /* Фіксуємо мінімальну висоту */
    }

    /* Заголовок блоку */
    .delivery-option h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    /* Текст в блоках */
    .delivery-option p {
        font-size: 15px;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    /* Заголовок секції */
    .delivery-section h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }
	 
	.delivery-section p {
        margin-left: 60px;  /* Зміщуємо текст вправо */
    }
	 
    .delivery-section {
        padding-left: 20px; /* Додаємо відступ зліва для всього розділу */
    }

    .delivery-section ul {
        margin-left: 60px; /* Збільшуємо відступ зліва для списку */
        padding-left: 20px; /* Додатковий відступ для маркерів списку */
        list-style-position: outside; /* Маркери списку будуть за межами тексту */
    }

    .delivery-section li {
        padding-left: 10px; /* Відступ від маркера до тексту */
        margin-bottom: 8px; /* Відступ між пунктами списку */
    }
	
	/* Стилі для статей блогу */
    .blog-post-content h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .blog-post-content .date,
    .blog-post-content .blog {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .blog-post-content p {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    /* Стилі для кнопки "Читати далі" */
    .read-more {
        font-size: 13px;
        padding: 8px 20px;
    }

    /* Розгорнутий контент */
    .full-content p {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
	
	/* Загальні стилі для текстових сторінок */
    .content-page h1 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .content-page h2 {
        font-size: 18px;
        margin: 20px 0 10px;
    }

    .text-content p {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 10px;
        text-indent: 20px;
    }

    .text-content ul li {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    /* Специфічні стилі для сторінки контактів */
	.content-page h1 {
        font-size: 30px;      /* розмір шрифту */
    }
	
    .contact-form label {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 13px;
        padding: 8px;
        margin-bottom: 12px;
    }

    .contact-info p {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .contact-info a {
        font-size: 13px;
    }

    .contact-form button {
        font-size: 14px;
        padding: 8px 20px;
    }

    /* Checkout сторінка */
    body.checkout-page header nav .nav-links {
        margin-left: 160px !important;
    }
	
	/* Контейнер чекаута */
    .checkout-container {
        margin-top: 40px; /* Відступ від хедера */
    }

    /* Прогрес-бар */
    .progress-bar {
        margin-bottom: 40px; /* Відступ від нижніх елементів */
    }

    .contact-info,
    .delivery-address {
        flex: 0 0 40%;
        padding: 0;
		margin-bottom: 10px; /* Зменшуємо відступ знизу */
    }

    .contact-info-text,
    .delivery-address-text {
        flex: 0 0 35%;
        margin-top: -10px;
		padding-bottom: 20px; /* Додаємо відступ знизу */
    }
	
	/* Загальний контейнер */
    .checkout-container {
        max-width: 768px;
        padding: 0 25px;
    }

    /* Зміщення розділів вліво */
    .form-section,
    .contact-info,
    .delivery-address {
        margin-left: 20px; /* Зменшуємо відступ зліва */
        width: 60%; /* Обмежуємо ширину */
    }

    /* Розділи доставки та оплати */
    #deliverySection,
    #paymentSection {
        margin-left: 20px;
        width: 90%;
    }
	
	    .painting-filters {
        gap: 10px;
        margin: 20px auto 30px;
        padding: 0 15px;
    }
    
    .filter-button {
        padding: 8px 16px;
        font-size: 13px;
    }
		.exhibition-banner-container {
        max-width: 320px;
    }
    .exhibition-banner-close {
        top: -12px;
        right: -8px;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* Модифікації для екрану 320-400px */
@media screen and (min-width: 320px) and (max-width: 400px) {	
	 /* Hero секція */
    .hero {
        height: auto; /* автовисота замість фіксованої */
        min-height: 60vh; /* мінімальна висота, щоб контент помістився */
        width: 100%; /* повна ширина */
        margin: 0; /* прибираємо зовнішні відступи */
        padding: 40px 10px; /* зменшуємо внутрішні відступи */
        box-sizing: border-box; /* включаємо padding до загальних розмірів */
        background-size: cover; /* покриття фоновим зображенням */
        background-position: center; /* центрування фонового зображення */
		margin-top: 10px; /* Додатковий відступ для іконок соцмереж */
    }

    .hero h2 {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .hero-line {
        margin: 5px 0;
    }
    
    .hero-line.first {
        margin-left: 15px;
    }
    
    .hero-line.second {
        margin-left: 15%;
    }
    
    .hero-line.third {
        margin-left: 25%;
    }

/* About секція */
    .about-container {
        flex-direction: column;
        padding: 0 20px;
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }
    
    .artist-tagline {
        font-size: 1.3rem;
        text-align: center;
        width: 100%;
        margin: 10px 0;
    }
    
    .content-wrapper img {
        width: 80%;
        height: auto;
        margin: 10px auto;
        display: block;
    }
    
    .about-content {
        width: 100%;
        padding: 0 5px;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .about-content h3 {
        font-size: 1.7rem;
        margin: 15px 0;
        text-align: center;
        width: 100%;
    }
    
    .about-content p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 12px;
        text-align: justify;
        padding: 0 5px;
    }
    
    /* Галерея */
    .gallery {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 15px;
        box-sizing: border-box;
        gap: 15px;
    }
    
    .gallery-category {
        width: 280px; /* Фіксована ширина */
        height: 280px; /* Фіксована висота = ширині */
        margin: 0 auto 15px; /* Зменшуємо нижній відступ */
    }
    
    .gallery-category a {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    .gallery-category img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Важливо для збереження пропорцій */
    }
    
    .category-title {
        min-width: 120px;
        font-size: 14px;
    }
	
	/* Зменшуємо відстань між галереєю та футером */
    .section:last-of-type {
        margin-bottom: 30px; /* Зменшуємо нижній відступ останньої секції */
    }
    
    /* Футер */
	.footer {
        padding-top: 20px; /* Зменшуємо верхній padding футера */
        margin-top: -15px; /* Трохи піднімаємо весь футер */
    }
	
    .footer-container {
        flex-direction: column;
        padding: 15px;
		padding-top: 0; /* Прибираємо верхній padding контейнера */
    }
    
    .footer-tagline {
        font-size: 1.4rem;
        text-align: center;
        width: 100%;
		margin-top: 10px; /* Зменшуємо верхній відступ тагліне у футері */
        margin-bottom: 20px;
        padding: 0;
    }
    
    .footer-columns {
        width: 100%;
        flex-direction: column;
        padding: 0;
        gap: 20px;
    }
    
    .footer-links, 
    .footer-contact {
        width: 100%;
        text-align: center;
    }
    
    .footer-contact .social-icons {
        justify-content: center;
        margin: 10px 0;
    }
    
    .bottom-footer {
        padding: 15px;
    }
    
    .payment-methods {
        flex-wrap: wrap;
        justify-content: left;
        gap: 10px;
    }
    
    .payment-methods img {
        height: 20px;
    }
    
    .copyright {
        font-size: 0.7rem;
        text-align: left;
        margin-top: 10px;
    }
    
    /* Модальне вікно кошика */
    .cart-modal {
        width: 90%;
        right: 0;
		z-index: 2000;
    }
	
	 /* Основна структура сторінки - обмежуємо ширину */
     body {
        max-width: 100vw; /* обмежує максимальну ширину розміром вікна */
        overflow-x: hidden; /* приховує горизонтальну прокрутку */
        margin: 0; /* прибирає зовнішні відступи */
        padding: 0; /* прибирає внутрішні відступи */
    }
	
	 html {
        max-width: 100vw;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    
    .section, .hero, .about-container, .gallery, .footer-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Header адаптація */
    header {
        height: 120px; /* повертаємо оригінальну висоту хедера */
        padding: 0 15px; /* зменшуємо бічні відступи */
        max-width: 100%; /* обмежуємо ширину розміром екрану */
        position: relative; /* для правильного позиціонування дочірніх елементів */
        box-sizing: border-box; /* враховує padding в загальній ширині */
    }

    /* Логотип і декоративний елемент */
    .decorative-element {
        width: 180px;
        left: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
    }
    
    .artist-name {
        font-size: 1.7rem;
        left: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 6;
    }
	
	/* Фіксуємо розмір і стилі іконки меню, щоб запобігти горизонтальній прокрутці */
    .menu-icon {
        max-width: 24px; /* обмежуємо максимальну ширину */
        max-height: 24px; /* обмежуємо максимальну висоту */
        width: 24px; /* фіксована ширина */
        height: 24px; /* фіксована висота */
        overflow: hidden; /* обрізаємо контент, що виходить за межі */
        padding: 0; /* прибираємо внутрішні відступи */
        margin: 0; /* прибираємо зовнішні відступи */
        box-sizing: border-box; /* включаємо padding і border в розміри елемента */
    }
    
    /* Підлаштовуємо розмір SVG або зображень всередині іконки меню */
    .menu-icon img,
    .menu-icon svg {
        width: 100%; /* на всю ширину контейнера */
        height: 100%; /* на всю висоту контейнера */
        max-width: 24px; /* обмежуємо максимальну ширину */
        max-height: 24px; /* обмежуємо максимальну висоту */
        display: block; /* блоковий елемент для коректного відображення */
        object-fit: contain; /* зберігаємо пропорції зображення */
    }
    
    /* Прибираємо будь-які інші стилі, що можуть впливати на розмір */
    .menu-icon *,
    .menu-icon ::before,
    .menu-icon ::after {
        box-sizing: border-box; /* включаємо padding і border в розміри елемента */
        max-width: 100%; /* обмежуємо максимальну ширину */
        max-height: 100%; /* обмежуємо максимальну висоту */
    }
    
    /* МЕНЮ */
    .nav-links {
        display: none; /* приховуємо меню за замовчуванням */
        position: absolute; /* абсолютне позиціонування */
        top: 150px; /* розташовуємо під хедером */
        left: 0; /* без відступу зліва */
        width: 60%; /* на всю ширину екрану */
        background-color: white; /* білий фон */
        flex-direction: column; /* елементи в стовпчик */
        padding: 15px 0; /* вертикальні відступи */
        box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* тінь для виділення */
        z-index: 900; /* поверх інших елементів */
		border-radius: 8px; /* заокруглені кути для кращого вигляду */
		margin-top: 10px; /* додатковий відступ зверху */
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links a {
        padding: 8px 15px; /* зменшуємо вертикальний padding з 12px до 8px */
        margin: 2px 0; /* мінімальний відступ між елементами */
        width: 100%; /* на всю ширину контейнера */
        text-align: left; /* вирівнюємо текст зліва */
        box-sizing: border-box; /* включаємо padding до ширини */
		font-size: 1.2rem; /* збільшуємо розмір шрифту */
        font-weight: 500; /* трохи збільшуємо товщину шрифту для кращої видимості */
        line-height: 1.3; /* збільшуємо міжрядковий інтервал */
    }
	
	/* Додаємо розділювач між пунктами меню для кращої читабельності */
    .nav-links a:not(:last-child) {
        border-bottom: 1px solid #f0f0f0; /* тонка сіра лінія між пунктами */
    }
    
    /* Іконки справа (кошик і мови) - зміщуємо трохи вліво */
    .nav-icons {
        position: absolute; /* залишаємо абсолютне позиціонування */
        right: 55px; /* залишаємо відступ справа */
        top: 47px; /* змінюємо з bottom: 47px на top: 45px */
        margin-right: 0; /* прибираємо правий margin */
        z-index: 1001; /* поверх інших елементів */
        display: flex; /* використовуємо flexbox */
        gap: 12px; /* відступ між іконками */
    }
	
	/* Стилі для іконки кошика */
.cart-icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* Стилі для лічильника кошика */
#cartCounter {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    font-size: 10px;
    background-color: #b08f2d;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* Додаємо стилі для контейнера з іконкою кошика */
    .nav-icons > div:first-child {
        position: relative;
        margin-right: 3px; /* Невеликий додатковий відступ */
    }
	
	.nav-icons .language-switcher {
        margin-left: 40px; /* Відступ для розділення іконок */
    }
	
	/* Стилі для перемикача мов */
    .language-switcher {
        position: relative;
        display: inline-block;
		margin-left: 5px;
    }
	
    /* Опускаємо іконки різних мов */
    .language-dropdown {
        top: 35px; /* змінюємо з top: calc(100% + 70px) на top: 35px */
        right: -10px; /* позиціонуємо зі зміщенням вправо */
        z-index: 1500; /* підвищуємо z-index, щоб меню було поверх hero */
        position: absolute; /* абсолютне позиціонування */
		margin-top: 20px;
    }
	
	/* Додаємо стилі для іконки мови */
    .language-icon {
        width: 22px;
        height: 22px;
        display: block;
    }
    
    /* Соціальні іконки */
    .icons-container {
        top: 115px; /* опускаємо трохи нижче */
        right: 15px; /* відступ справа */
        z-index: 100; /* поверх інших елементів */
    }
    
    .social-icons img {
        width: 22px;
        height: 22px;
    }
	
	/* VARIOUS */
	/* Прибираємо зайвий простір зверху */
    .container, main, body, .section {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Прибираємо зайвий простір у хедера */
    header {
        margin-bottom: 5px;
    }
	
     /* Зменшуємо розмір шрифта заголовка "Вся колекція" */
    h1 {
        font-size: 1.7rem; /* розмір шрифту як у вже існуючих стилях */
        margin-top: 30px; /* збільшений відступ зверху */
        margin-bottom: -10px; /* відступ внизу */
    }
    
    /* Фіксуємо z-index для меню та мов */
    .nav-links.active, 
    .language-dropdown.show {
        z-index: 1500; /* високий z-index для відображення поверх контенту */
    }
	
	.title-and-size {
        font-size: 14px;
        white-space: normal; /* Allow text to wrap */
        line-height: 1.3;
    }

    .price {
        font-size: 14px;
        margin-top: 4px;
    }
	
	/*  "Про автора" */
    .about-hero {
        height: 200px; /* Зменшуємо висоту з 300px до 200px */
    }

    /* Вертикальне розташування для about-section */
    .about-page .about-section {
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }
 
    /* Стилі для зображень */
    .about-image {
        width: 100%;
        margin-bottom: 15px; /* Додаємо відступ між фото і текстом */
    }

    .about-image img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* Стилі для тексту */
    .about-text {
        width: 100%;
    }

    .about-text h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .about-text p {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    /* Зменшуємо відступи для сторінки */
    .about-page {
        padding: 0 15px;
        margin: 20px auto;
    }
	
	 /* ДОСТАВКА */
    .delivery-options {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    
    .delivery-option {
        width: 100%;
        margin-bottom: 15px;
    }
	
	/* Зміщення списку упаковки вправо */
    .delivery-section ul {
        padding-left: 30px; /* Збільшуємо відступ зліва для списку */
        margin-left: 10px; /* Додатковий відступ від краю */
    }
    
    .delivery-section li {
        margin-bottom: 5px; /* Відступ між елементами списку */
    }
	
	 /* БЛОГ */
    .blog-post {
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        width: 100%;
    }
    
    /* Скасовуємо реверсивний порядок для парних блоків */
    .blog-post:nth-child(even) {
        flex-direction: column;
    }
    
    /* Налаштування для зображень і тексту */
    .blog-post-image, 
    .blog-post-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
	
	.blog-post-image img {
        height: auto;     /* Дозволяє зберігати пропорції */
        max-height: 200px; /* Обмежує максимальну висоту */
        width: 100%;      /* Займає всю доступну ширину */
        object-fit: cover; /* Зберігає пропорції, обрізаючи зайве */
    }
    
    /* Додаємо відступ між фото і текстом */
    .blog-post-content {
        margin-top: 15px;
    }
    
    /* Зменшуємо розмір шрифту заголовків */
    .blog-post-content h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
	
	 /* ТЕКСТОВІ БЛОКИ */
    .content-page {
        padding: 0 15px;
        margin: 20px auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .content-container {
        padding: 15px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
	
	/* Зменшуємо розмір заголовка для текстових сторінок */
    .content-container h1 {
        font-size: 24px; /* Зменшуємо розмір шрифту */
        line-height: 1.3; /* Зменшуємо міжрядковий інтервал */
        margin-bottom: 15px;
        text-align: center;
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
    }
    
    .text-content {
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    
    .text-content h1 {
        font-size: 22px;
        margin-bottom: 15px;
    }
    
    .text-content h2 {
        font-size: 18px;
        margin: 20px 0 10px;
    }
    
    .text-content p, 
    .text-content ul {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    
    .text-content ul {
        padding-left: 20px;
    }
    
    .text-content li {
        margin-bottom: 5px;
    }
	
	/* DELIVERY1 */
    
	body.checkout-page .nav-icons .language-switcher {
        position: absolute;
        right: -35px; /* Зміщуємо вліво від поточної позиції */
        top: 5px; /* Зберігаємо поточну вертикальну позицію */
    }
	
    /* Прогрес-бар */
    .progress-bar {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    
    .progress-step {
        min-width: 85px;
        margin-right: 5px;
    }
    
    /* Контактні дані та адреса доставки */
    .contact-info,
    .delivery-address,
    .contact-info-text,
    .delivery-address-text {
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
        padding: 0 10px;
        box-sizing: border-box;
    }
	
	/* Підіймаємо текстові блоки з описами ближче до форм */
    .contact-info-text,
    .delivery-address-text {
        margin-top: -15px; /* Негативний відступ зверху для підняття блоку */
        margin-bottom: 20px; /* Відступ знизу для відділення від наступного блоку */
        padding: 0 10px; /* Бічні відступи для кращого вигляду */
        box-sizing: border-box;
        width: 100%;
        position: relative; /* Встановлюємо позиціонування */
    }
    
    /* Налаштування стилів для тексту в цих блоках */
    .contact-info-text p,
    .delivery-address-text p {
        font-size: 13px; /* Зменшуємо розмір шрифту */
        line-height: 1.3; /* Зменшуємо міжрядковий інтервал */
        margin-bottom: 0; /* Прибираємо зайвий відступ знизу */
        font-style: italic; /* Додатково можна додати курсив для виділення тексту */
        color: #666; /* Світліший колір тексту */
    }
    
    .form-group {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .form-control {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Вертикальне розташування блоків доставки */
    .delivery-options {
        flex-direction: column;
        width: 100%;
    }
    
    .delivery-option {
        width: 100%;
        margin-bottom: 15px;
    }
    
    /* Вертикальне розташування блоків оплати */
    .payment-options {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .payment-option {
        width: 100%;
    }
    
    /* Розділи форми */
    .form-section {
        margin-left: 0;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    /* Заголовки розділів */
    .form-section h3,
    .contact-info h3,
    .delivery-address h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }
	
	/* Золоті рамки для елементів доставки та оплати */
    .delivery-option,
    .payment-option {
        border: 2px solid #b08f2d; /* Фірмовий золотистий колір */
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
        transition: all 0.3s ease; /* Плавна анімація для тапу */
        position: relative;
    }
    
    /* Стилі для тексту всередині блоків */
    .delivery-option h4,
    .payment-option h4 {
        color: #b08f2d; /* Золотисто-коричневий колір заголовків */
        margin-bottom: 8px;
        font-size: 16px;
    }
    
    /* Загальний контейнер сторінки */
    .checkout-container {
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
    }
	
	 /* Адаптивні стилі для сторінки 404 */
    .error-page {
        margin: 30px auto;
        padding: 0 15px;
    }
    
    .error-container {
        padding: 25px 15px;
    }
    
    .error-icon img {
        width: 80px;
    }
    
    .error-page h1 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .error-message {
        margin: 15px 0;
    }
    
    .error-message p {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 8px;
    }
    
    .button-container {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    
    .return-button,
    .browse-more-button {
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
    }
	
	/* СВІТ */
	/* Основна структура сторінки */
    body {
        display: flex;
        flex-direction: column;
        max-width: 100vw;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    
    /* Для правильного відображення елементів у стеку */
    .container > * {
        position: relative;
        z-index: 1;
    }
    
    /* Фіксуємо z-index для меню та мов */
    .nav-links.active, 
    .language-dropdown.show {
        z-index: 1500; /* високий z-index для відображення поверх контенту */
    }
    
    /* Фіксуємо розмір і стилі іконки меню */
    .menu-icon {
        display: block;
        position: absolute;
        left: 15px;
        top: auto;
        bottom: -20px;
        transform: none;
        z-index: 10;
        width: 24px;
        height: 24px;
    }
	
	 /* Контейнер для всієї сторінки */
    body .container {
        display: grid;
        grid-template-areas: 
            "images"
            "video"
            "description"
            "details";
        grid-template-rows: auto;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
     /* Секція з зображеннями */
    body .container .image-section {
        grid-area: images;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Головне зображення */
    body .container .image-section .main-image {
        width: 90%;
        height: auto;
        margin: 10px auto;
        max-width: 320px;
        transform: none;
    }
    
    /* Контейнер мініатюр */
    body .container .image-section .thumbnail-container {
        width: 90%;
        margin: 10px auto;
        max-width: 320px;
    }
    
    /* Мініатюри зображень */
    .thumbnail {
        width: 45px;
        height: 45px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    
    /* Відео контейнер */
    body .container .image-section .video-container {
        grid-area: video;
        width: 90%;
        margin: 15px auto;
        max-width: 320px;
    }
    
    /* Секція з деталями */
    body .container .details-section {
        grid-area: details;
        width: 100%;
        padding: 0;
        margin: 10px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Заголовок картини */
    body .container .details-section .title {
        font-size: 1.7rem;
        margin: 10px 0;
        text-align: center;
        width: 90%;
    }
    
    /* Ціна */
    body .container .details-section .price {
        font-size: 1.5rem;
        margin: 10px 0;
        width: 90%;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    /* Кнопка "Додати в кошик" */
    body .container .details-section .add-to-cart {
        width: 90%;
        max-width: 280px;
        margin: 10px auto;
    }
    
    /* Іконки соцмереж під хедером */
    body > .icons-container {
        position: fixed;
        top: 80px;
        right: 15px;
        z-index: 100;
        display: flex;
    }
    
    /* Іконки соцмереж в секції деталей */
    body .container .details-section .icons-container {
        display: none;
    }
    
    /* Іконки соцмереж під хедером */
    header + .icons-container {
        position: absolute;
        top: 115px;
        right: 15px;
        z-index: 100;
    }
    
    .social-icons img {
        width: 22px;
        height: 22px;
    }
    
    /* Приховуємо оригінальний опис */
    body .container .details-section .artwork-description {
        display: none;
    }
    
     /* Мобільний опис */
    body .container .mobile-description {
        grid-area: description;
        display: block;
        width: 90%;
        margin: 15px auto;
    }
    
    /* Зменшуємо відступи у абзаців опису */
    body .container .mobile-description p {
        margin-bottom: 10px;
        font-size: 0.95rem;
        line-height: 1.4;
        text-indent: 20px;
    }
	
	/* Забезпечуємо відступ від футера */
    footer {
        margin-top: 20px; /* додатковий відступ зверху для футера */
    }
	
	/* Стилі для галереї */
    .gallery-column {
        width: 100%;
        margin: 0 !important; /* Використовуємо !important щоб перекрити від'ємні відступи */
        padding: 0;
    }

    .gallery-item {
        width: 100%;
        max-width: 280px;
        margin: 0 auto 20px !important;
    }

    /* Строго квадратний контейнер для зображень */
    .gallery-item a {
        display: block;
        position: relative;
        width: 100%;
        padding-top: 100% !important; /* Забезпечує квадратні пропорції */
        overflow: hidden;
    }

    /* Позиціонування зображень в контейнері */
    .gallery-item a .main-image,
    .gallery-item a .interior-view {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Обрізає зображення, зберігаючи пропорції */
    }

    /* Напис "Швидкий перегляд" */
    .gallery-item a .quick-view {
        position: absolute;
        bottom: -60px; /* Початково сховано */
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        text-align: center;
        padding: 10px 0;
        transition: bottom 0.3s ease;
    }

    /* Показуємо напис при натисканні */
    .gallery-item a.active .quick-view {
        bottom: 0;
    }
	
	/* Fix content layout on contact page */
    .content-page .content-container {
        flex-direction: column;
        padding: 15px;
        gap: 20px;
        min-height: auto;
        width: 100%;
    }
    
    /* Fix each content section to take full width */
    .content-page .content-container > div {
        flex: none;
        width: 100%;
        padding: 0;
    }
    
    /* Adjust contact form */
    #contactForm {
        width: 100%;
    }
    
    /* Fix headings size */
    .content-container h1 {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .content-container h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    /* Make business info section look better */
    .content-container div[style*="margin-bottom: 30px"] {
        margin-bottom: 15px;
    }
    
    /* Fix phone links and email to look better on mobile */
    .content-container a[href^="tel"],
    .content-container a[href^="mailto"] {
        font-size: 16px;
    }
    
    /* Fix form inputs */
    #contactForm input,
    #contactForm textarea {
        padding: 10px;
        font-size: 16px; /* Better size for mobile input */
        margin-bottom: 10px;
    }
    
    /* Make submit button full width */
    #submitButton {
        width: 100%;
        padding: 12px 0;
        margin-top: 5px;
    }
    
    /* Fix spacing between business info section */
    .content-container div:first-child {
        margin-bottom: 0;
    }
    
    /* Adjust the business information section */
    .content-container div[style*="margin-bottom: 30px"]:nth-child(3) {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Fix spacing for form */
    .content-container div:last-child {
        margin-top: 10px;
    }
    
    /* Fix textarea height */
    #message {
        min-height: 120px;
    }
	
	    .painting-filters {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin: 15px auto 25px;
    }
    
    .filter-button {
        width: 100%;
        max-width: 250px;
        padding: 4px 15px;
        font-size: 14px;
		overflow: hidden;        /* НОВИЙ параметр - обрізає текст що не поміщається */
        text-overflow: ellipsis; /* НОВИЙ параметр - додає "..." якщо текст довгий */
    }
	.exhibition-banner-container {
        max-width: 300px;
    }
    .exhibition-banner-close {
        top: -10px;
        right: -6px;
        width: 26px;
        height: 26px;
        font-size: 15px;
    }
}

/* ===== ВИПРАВЛЕННЯ ДЛЯ INSTAGRAM / FACEBOOK WEBVIEW ===== */
@media screen and (max-width: 900px) {
    /* Фіксуємо ширину хедера — overflow: visible щоб меню не обрізалось */
    header {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        box-sizing: border-box;
    }
    /* Обмежуємо ширину лого */
    .header-link {
        max-width: 55%;
        overflow: visible;
    }
    /* Декоративний елемент */
    .decorative-element {
        width: 185px;
        left: 5px;
    }
    /* Ім'я художниці */
    .artist-name {
        font-size: 1.35rem;
        left: 5px;
        white-space: nowrap;
    }
}


/* ВИПАДНЕ МЕНЮ ФІЛЬТРІВ НА МОБІЛЬНИХ: показуємо тільки активну кнопку + стрілку.
   Натискання стрілки відкриває повний список, вибір фільтру - закриває його. */
@media screen and (max-width: 767px) {
    .painting-filters {
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .painting-filters:not(.filters-open) .filter-button:not(.active) {
        display: none;
    }

    .filter-toggle {
        display: inline-block;
    }
}