/* #################################### Моя ##################################*/
/* 1. Делаем контейнер фильма главным боксом отсчета */
.pg-item-box {
    position: relative !important;
}

/* 2. Разрешаем ссылке внутри блока растягиваться наверх */
.pg-item-box-icons-box {
    position: static !important;
}

/* 3. Натягиваем невидимую ссылку Rutube поверх всей картинки */
.pg-item-box .pg-item-box-icons-box a[href*="rutube.ru"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    background: transparent !important;
    display: block !important;
}

/* 4. Скрываем только саму мелкую иконку Rutube */
.pg-item-box svg.ph-si-ext-link1 {
    display: none !important;
}

/* 5. Скрываем только иконку лупы ("Детали") */
.pg-item-box-icons-box a.pg-photoswipe-button-copy {
    display: none !important;
}

/* 6. Схлопываем нижнюю панель в ноль по высоте, чтобы убрать пустую прозрачную область под картинкой */
.pg-item-box-info {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important; /* Важно: оставляет ссылку Rutube рабочей снаружи */
}
/* Включаем скрытие выезжающих краев картинки при увеличении */
.pg-item-box,
.pg-item-box-image {
    overflow: hidden !important;
}

/* Задаем картинке плавность анимации при наведении и уходе мыши */
.pg-item-box-image img {
    transition: transform 0.4s ease, filter 0.4s ease !important;
}

/* Крутой эффект при наведении: плавно увеличиваем картинку на 7% и прибавляем ей яркости */
.pg-item-box:hover .pg-item-box-image img {
    transform: scale(1.07) !important;
    filter: brightness(1.1) !important;
}





/* Кнопка валюты, созданная через JS */
/* Контейнер для центрирования кнопки валюты */
.currency-switcher {
    margin-top: 20px;
    margin-bottom: 25px;
    clear: both;
    display: flex;
    justify-content: center; /* Центрирует кнопку на любых экранах */
    width: 100%;
}
/* Твой стиль для кнопки изменения валюты */
.currency-toggle-btn {
    padding: 14px 30px;
    background: #3b82f6; /* цвет кнопки */
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}
.currency-toggle-btn:hover {
    background: #1d4ed8;
    transform: scale(1.05);
    color: white; /* Текст остается белым при наведении */
}

/* ########################### Чтобы звезды не глючили в joomshopping #################### */
.js-backend-stars-wrapper {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    height: 20px;
}
/* Скрываем стандартные круглые радио-кнопки */
.js-backend-stars-wrapper input[type="radio"] {
    display: none !important;
}

/* Базовый вид звезды (выключена) */
.js-backend-stars-wrapper label {
    display: block;
    width: 20px;
    height: 20px;
    background: url(/components/com_jshopping/images/star.png) no-repeat 0 0px !important;
    cursor: pointer;
    margin: 0 2px 0 0;
    padding: 0;
}
/* Подсвечиваем звезду при наведении и все перед ней */
.js-backend-stars-wrapper label:hover,
.js-backend-stars-wrapper label:hover ~ label {
    background-position: 0 -19px !important;
}
/* Подсвечиваем выбранную звезду и все перед ней */
.js-backend-stars-wrapper input[type="radio"]:checked ~ label {
    background-position: 0 -19px !important;
}
/* Поддержка правильной подсветки при наведении */
.js-backend-stars-wrapper input[type="radio"]:checked ~ label:hover,
.js-backend-stars-wrapper input[type="radio"]:checked ~ label:hover ~ label,
.js-backend-stars-wrapper label:hover ~ input[type="radio"]:checked ~ label {
    background-position: 0 -19px !important;}


/* Подгоняем карусель под высоту экрана на компьютерах и ноутбуках */
@media (min-width: 992px) {
    #carouselexamplecaptions .carousel-item img {
        max-height: 60vh; /* Картинка не превысит 70% высоты экрана */
        object-fit: contain; /* Картинка сжимается пропорционально и видна целиком */
        width: 100%;
    }
}

/* 1. Выделяем карточку модуля "Родителям посвящается" и задаем фиолетовую рамку и тень */
.container-top-b .top-b.card.hide-in-gallery:has(#mod-custom133),
.top-b.card.hide-in-gallery:has(#mod-custom133) {
    border: 2px solid rgba(138, 43, 226, 0.7) !important; /* Фиолетовая рамка в тон */
    border-radius: 12px !important; /* Скругление */
    box-shadow: 0 6px 15px rgba(138, 43, 226, 0.7) !important; /* Фиолетовое свечение */
    overflow: hidden !important;
    background-color: #ffffff !important;
}
/* 2. Настраиваем фиолетовую плашку фона для заголовка "Родителям посвящается" */
.container-top-b .top-b.card.hide-in-gallery:has(#mod-custom133) .card-header,
.top-b.card.hide-in-gallery:has(#mod-custom133) .card-header {
    background-color: rgba(138, 43, 226, 0.4) !important; /* Полупрозрачный фиолетовый фон плашки */
    color: #ffffff !important;      /* Насыщенный фиолетовый цвет букв */
    font-weight: 800 !important;    /* Жирный шрифт */
    text-align: center !important;   /* Текст строго посередине */
    letter-spacing: 1px !important;  /* Отступ между буквами */
    padding: 15px 10px !important;   /* Объемные отступы */
    border-bottom: none !important;  /* Убираем лишние рамки снизу */
}
/* 3. Оформление внутреннего текста */
#mod-custom133 {
    padding: 15px 10px !important;
    color: #333333 !important; /* Основной читаемый цвет текста */
}




/* 1. Выделяем карточку модуля "Разместить Икону" и задаем рамку в тон */
.container-bottom-b .bottom-b.card:has(#mod-custom136),
.bottom-b.card:has(#mod-custom136) {
    border: 2px solid rgba(0, 76, 255, 0.7) !important; /* Рамка точно такого же цвета, как у О нас */
    border-radius: 12px !important;
    box-shadow: 0 6px 15px rgba(0, 76, 255, 0.7) !important; /* Мягкое синее свечение по краям */
    overflow: hidden !important;
    background-color: #ffffff !important; /* Белый или светлый фон самой карточки */
    margin-bottom: 25px !important;
    background: #3a62ff3d !important;
}
/* 2. Настраиваем сине-голубую плашку фона для заголовка "Лучший подарок" */
.container-bottom-b .bottom-b.card:has(#mod-custom136) .card-header,
.bottom-b.card:has(#mod-custom136) .card-header {
    background-color: rgba(58, 98, 255, 0.4) !important; /* ТОЧНЫЙ ЦВЕТ ПЛАШКИ О НАС */
    color: #ffffff !important;      /* Синий цвет текста заголовка */
    font-weight: 800 !important;    /* Жирный шрифт */
    text-align: center !important;   /* Текст строго посередине */
    letter-spacing: 1px !important;  /* Отступ между буквами */
    padding: 15px 10px !important;   /* Объёмные внутренние отступы */
    border-bottom: none !important;  /* Убираем лишние рамки */
    font-size: 1.5rem !important;
}
/* 3. Оформление внутреннего контента модуля (текст и списки) */
#mod-custom136 {
    padding: 10px 5px !important;
    color: #333333 !important; /* Основной читаемый темно-серый цвет для текста */
}
/* Красиво оформляем маркированные списки, убирая лишние технические стили */
#mod-custom136 ul {
    list-style-type: disc !important;
    padding-left: 20px !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}
#mod-custom136 li {
    margin-bottom: 8px !important;
    font-family: inherit !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
}






/* Эффект анимации для текста при смене слайдов */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-item .carousel-caption {
    opacity: 0;
    transform: translateY(10px); /* Слегка опускаем текст перед появлением */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out !important;
}

/* Когда слайд становится активным, текст плавно проявляется и встает на место */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-item.active .carousel-caption {
    opacity: 1;
    transform: translateY(0);
}
/* Делаем стрелочки слайдера видимыми на светлом фоне */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-control-prev-icon,
.container-top-b .top-b.card:has(#mod-custom114) .carousel-control-next-icon {
    /* Перекрашиваем иконку стрелочки в ваш фирменный синий цвет */
    filter: invert(31%) sepia(85%) saturate(2443%) hue-rotate(212deg) brightness(98%) contrast(105%) !important;
}

/* Настраиваем область вокруг стрелочек, чтобы на них было удобно нажимать */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-control-prev,
.container-top-b .top-b.card:has(#mod-custom114) .carousel-control-next {
    opacity: 0.7 !important; /* Делаем их чуть отчетливее в обычном состоянии */
    transition: opacity 0.2s ease;
}

/* При наведении курсора стрелочки становятся еще ярче */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-control-prev:hover,
.container-top-b .top-b.card:has(#mod-custom114) .carousel-control-next:hover {
    opacity: 1 !important;
}


/* 1. Переносим текст строго под слайдер */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-item {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Настраиваем блок с текстом: прозрачный фон и выравнивание по центру */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-caption {
    position: static !important; /* Опускает текст вниз под картинку */
    width: 100% !important;
    padding: 15px 10px !important;
    margin-top: 15px !important;
    background-color: transparent !important; /* Полностью убираем серую подложку */
    border: none !important;
    box-shadow: none !important;
    text-align: center !important; /* ВЫРАВНИВАНИЕ СТРОГО ПО ЦЕНТРУ */
    
    /* Эффект анимации: плавное появление и легкий сдвиг вверх */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out !important;
}

/* Когда слайд становится активным, текст плавно проявляется */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-item.active .carousel-caption {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Делаем весь текст синим в тон заголовка О НАС */
.container-top-b .top-b.card:has(#mod-custom114) .carousel-caption h5,
.container-top-b .top-b.card:has(#mod-custom114) .carousel-caption p,
.container-top-b .top-b.card:has(#mod-custom114) .carousel-caption span {
    color: #2a00f7ad !important; /* ВАШ ТОЧНЫЙ СИНИЙ ЦВЕТ ТЕКСТА */
    background-color: transparent !important; /* Принудительно стираем серый фон из HTML */
}

/* 4. Адаптивные шрифты и настройки для мобильных устройств */
@media (max-width: 768px) {
    .container-top-b .top-b.card:has(#mod-custom114) .carousel-caption {
        margin-top: 10px !important;
    }
    
    /* Уменьшаем главный заголовок слайда на телефонах */
    .container-top-b .top-b.card:has(#mod-custom114) .carousel-caption h5 span {
        font-size: 16pt !important; /* Вместо исходных 24pt */
        line-height: 1.3 !important;
    }
    
    /* Уменьшаем описание под заголовком на телефонах */
    .container-top-b .top-b.card:has(#mod-custom114) .carousel-caption p span {
        font-size: 11pt !important; /* Вместо исходных 12pt */
        line-height: 1.4 !important;
    }
    
    /* Скрываем точки индикаторов на мобильных, чтобы освободить место */
    .container-top-b .top-b.card:has(#mod-custom114) .carousel-indicators {
        display: none !important;
    }
}




/* #################################### О нас ##################################*/
/* 1. Выделяем карточку модуля "О нас" и задаем рамку в тон */
.container-top-b .top-b.card:has(#mod-custom114) {
    border: 2px solid rgba(0, 76, 255, 0.7) !important; /* Рамка точно такого же цвета, как фон плашки */
    border-radius: 12px !important;
    box-shadow: 0 6px 15px rgba(0, 76, 255, 0.7) !important;
    overflow: hidden !important;
}
/* 2. Настраиваем ту самую сине-голубую плашку фона для заголовка */
.container-top-b .top-b.card:has(#mod-custom114) .card-header {
    background-color: rgba(58, 98, 255, 0.4) !important; /* ВАШ ТОЧНЫЙ ЦВЕТ ФОНА ПЛАШКИ */
    color: #000ff7e0 !important;      /* Делаем буквы БЕЛЫМИ, чтобы они круто смотрелись на синем */
    font-weight: 800 !important;    /* Шрифт толстый и жирный */
    text-align: center !important;   /* Текст строго посередине */
    letter-spacing: 1px !important;  /* Благородный отступ между буквами */
    padding: 15px 10px !important;   /* Внутренние отступы, чтобы плашка выглядела объемно */
    border-bottom: none !important;  /* Убираем лишние рамки снизу */
}
/* ################################ меню Иконы ##################################*/
/* 1. Карточки икон: персиковый фон, разделение и заметные объемные тени */
.com-content-category-blog__item.blog-item {
    background-color: #fff1e6 !important; 
    border: 1px solid #ffd8be !important; 
    border-radius: 16px !important;       
    padding: 25px !important;             
    margin-bottom: 35px !important;        
/* Новая сочная, плотная тень, которую точно видно */
    box-shadow: 0 8px 24px rgba(139, 69, 19, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
}
/* Эффект «оживания» карточки при наведении мыши (становится еще объемнее) */
.com-content-category-blog__item.blog-item:hover {
    transform: translateY(-5px) !important; /* Приподнимается повыше */
    box-shadow: 0 16px 36px rgba(255, 107, 1, 0.5) !important; /* Тень становится густой и глубокой */
}
/* Удаляем отступ у самой последней карточки */
.com-content-category-blog__item.blog-item:last-child {
    margin-bottom: 0 !important;
}
/* 2. Картинка внутри блога: оранжевый ободок и своя мягкая тень */
.com-content-category-blog__item.blog-item figure.item-image img {
    border: 3px solid #ff7f50 !important; /* Сочный оранжевый ободок */
    padding: 4px !important;              /* Зазор между картинкой и ободком */
    background-color: #fff !important;    /* Белая подложка под картинкой */
    border-radius: 10px !important;       /* Аккуратное скругление ободка */
}
/* 3. ШРИФТЫ: Благородный кофейно-шоколадный цвет вместо черного */
.com-content-category-blog__item.blog-item p,
.com-content-category-blog__item.blog-item span,
.com-content-category-blog__item.blog-item strong {
    color: #4a3321 !important; /* Глубокий кофейный цвет (очень мягкий для глаз) */
}
/* Стильные изменения для нашей кнопки Назад */
/* Полная покраска кнопки в цвет ободков икон */
#backToIconModule.btn-primary {
    background-color: #ff7f50 !important; /* Наш сочный оранжевый коралловый */
    border-color: #ff7f50 !important;
    color: #ffffff !important; /* Белый цвет текста */
    box-shadow: 0 4px 15px rgba(255, 127, 80, 0.3) !important; /* Мягкое оранжевое свечение */
}
/* Эффект янтарного цвета при наведении мышки */
#backToIconModule.btn-primary:hover {
    background-color: #ff6a33 !important; /* Насыщенный янтарный */
    border-color: #ff6a33 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(255, 127, 80, 0.45) !important;
}




/* ################################ модуль Описание Икон ##################################*/
/* Плавный скролл до модуля Описание Икон*/
html { scroll-behavior: smooth; }
/* Полностью стираем фон, рамку и тени внешней карточки Cassiopeia ТОЛЬКО вокруг модуля 135 */
.container-bottom-a .bottom-a.card:has(#mod-custom135),
.container-bottom-a .bottom-a.card:has(#mod-custom135) .card-body {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* === ОФОРМЛЕНИЕ КАРТОЧКИ И ПЛАШКИ ПОД СТИЛЬ МОДУЛЯ "О НАС" === */
.sidebar-left.card.mod-small-images {
    border: 2px solid rgba(0, 76, 255, 0.7) !important; /* Точная синяя рамка */
    box-shadow: 0 6px 15px rgba(0, 76, 255, 0.7) !important; /* Ваша сочная синяя тень */
    background: #3a62ff3d !important; /* Легкий чистый фон под списком */
    padding: 0 !important; /* Убираем дефолтные отступы, чтобы плашка легла в края */
    overflow: hidden !important; /* Защита скругления уголков */
    border-radius: 12px !important;
}
/* Настраиваем ту самую полупрозрачную сине-голубую плашку фона для заголовка */
.sidebar-left.card.mod-small-images .card-header {
    background-color: rgba(58, 98, 255, 0.4) !important; /* Ваш точный цвет полупрозрачной плашки */
    color: #ffffff !important;      /* Сине-голубой цвет текста заголовка #0076f7*/
    font-weight: 800 !important;    /* Шрифт толстый и жирный */
    text-align: center !important;   /* Текст строго посередине */
    letter-spacing: 1px !important;  /* Благородный отступ между буквами */
    padding: 15px 10px !important;   /* Внутренние отступы для объема */
    border-bottom: none !important;  /* Убираем лишние рамки снизу */
    margin: 0 !important;
}
/* Настройка внутренних отступов для тела модуля (где список икон) */
.sidebar-left.card.mod-small-images .card-body {
    padding: 20px 15px !important;
}
/* 2. Настройка списков */
.sidebar-left.card.mod-small-images ul { padding: 0 !important; margin: 0 !important; }
.sidebar-left.card.mod-small-images li { list-style: none !important; margin-bottom: 22px !important; }
.sidebar-left.card.mod-small-images li:last-child { margin-bottom: 0 !important; 
}
/* 3. Контейнер: картинка СЛЕВА, текст СПРАВА, защита от вылезания */
.sidebar-left.card.mod-small-images .mod-articles-item-content {
    display: flex !important;
    flex-wrap: nowrap !important; 
    align-items: flex-start !important;
    overflow: hidden !important;
}
/* 4. Картинка: РАЗМЕР МЕНЯТЬ ТУТ (вместо 70px) */
.sidebar-left.card.mod-small-images figure.mod-articles-image {
    flex: 0 0 100px !important; /* Фиксированная ширина картинки */
    margin: 0 12px 0 0 !important; /* Отступ только справа, до текста */
}
.sidebar-left.card.mod-small-images figure.mod-articles-image img {
    width: 100% !important; height: auto !important;
    border: 1px solid #00cfff !important;
    padding: 3px !important; background: #fff !important;
    border-radius: 6px !important;
    transition: transform 0.15s ease !important; /* Плавность нажатия */
}
/* Эффект физического нажатия при наведении */
.sidebar-left.card.mod-small-images figure.mod-articles-image:hover img {
    transform: scale(0.93) !important; 
}
/* 5. Общий блок для текста: защита от вылезания слов */
.sidebar-left.card.mod-small-images .mod-articles-item-content p {
    flex: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    word-break: break-word !important;
    color: #444444 !important;
}
/* 6. ШРИФТ ДЛЯ ВСЕГО ТЕКСТА: МЕНЯТЬ ТУТ (вместо 11pt) */
.sidebar-left.card.mod-small-images .mod-articles-item-content p,
.sidebar-left.card.mod-small-images .mod-articles-item-content span {
    font-size: 11pt !important; /* Сжимает и название 14pt, и текст за ним */
    line-height: 1.3 !important;
}
.sidebar-left.card.mod-small-images .mod-articles-item-content span {
    display: inline !important; /* Оставляем описание на той же строке */
}

/* ==========================================================================
   АДАПТИВНОСТЬ: Перенос текста ПОД картинку на узких экранах (от 991px до 1340px)
   ========================================================================== */
@media (min-width: 991px) and (max-width: 1340px) {
    /* Разрешаем перенос элементов, если им тесно */
    .sidebar-left.card.mod-small-images .mod-articles-item-content {
        flex-wrap: wrap !important;
    }
    
    /* Заставляем текст занять всю ширину под картинкой */
    .sidebar-left.card.mod-small-images .mod-articles-item-content p {
        flex: none !important;
        width: 100% !important;
        margin-top: 8px !important; /* Отступ текста от картинки сверху */
    }
}





/* ==========================================================================
   СТИЛИЗАЦИЯ БЛОКА КОММЕНТАРИЕВ И ПРЕДУПРЕЖДЕНИЙ PHOCA GALLERY
   ========================================================================== */
/* 1. Делаем красивую обертку для всего блока комментариев */
#phocagallery-comments {
    max-width: 800px;
    margin: 40px auto;
    padding: 25px;
    background: #f8f9fa; /* Мягкий светлый фон */
    border: 1px solid #e9ecef;
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* Легкая тень */
}
/* 2. Оформляем заголовок "Отправить комментарий" */
#phocagallery-comments h4 {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #6c757d; /* Стильная подчеркивающая линия */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* 3. Превращаем скучный текст предупреждения в красивое уведомление */
#phocagallery-comments p:has(text),
#phocagallery-comments p {
    background-color: #fff3cd; /* Приятный пастельно-желтый цвет предупреждения */
    color: #856404; /* Темно-золотой цвет текста для читаемости */
    padding: 15px 20px;
    border-left: 5px solid #ffc107; /* Яркая акцентная полоса слева */
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    margin: 15px 0 0 0;
    display: flex;
    align-items: center;
}
/* Добавляем перед текстом предупреждения иконку замочка (опционально, через встроенный шрифт) */
#phocagallery-comments p::before {
    content: "🔒 ";
    margin-right: 10px;
    font-size: 18px;
}
/* 4. Наводим порядок во вкладках phTabsContainer, чтобы убрать лишние рамки */
.phTabsContainer {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
/* ==========================================================================
  СТИЛИЗАЦИЯ ФОРМЫ КОММЕНТАРИЕВ ДЛЯ АВТОРИЗОВАННЫХ ПОЛЬЗОВАТЕЛЕЙ PHOCA GALLERY
   ========================================================================== */
/* 1. Сбрасываем жесткую табличную верстку, делаем её адаптивной */
#phocagallery-comments-form table,
#phocagallery-comments-form tbody,
#phocagallery-comments-form tr {
    display: block !important;
    width: 100% !important;
}
#phocagallery-comments-form tr {
    margin-bottom: 20px !important;
}
/* Делаем ячейки таблицы блочными, чтобы они переносились на мобильных */
#phocagallery-comments-form td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    color: #495057 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 5px !important;
    text-align: left !important;
}
/* Скрываем пустые технические ячейки, которые использовались для отступов */
#phocagallery-comments-form td:first-child:contains(' '),
#phocagallery-comments-form td:empty {
    display: none !important;
}
/* 2. Стилизуем текстовые поля ввода (Имя, Заголовок, Текст) */
#phocagallery-comments-form input[type="text"],
#phocagallery-comments-form textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    font-size: 15px !important;
    color: #212529 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
#phocagallery-comments-form input[type="text"]:focus,
#phocagallery-comments-form textarea:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
/* Текстовое поле делаем чуть выше и удобнее для набора */
#phocagallery-comments-form textarea {
    min-height: 120px !important;
    resize: vertical !important;
}
/* 3. Превращаем текстовые BB-коды (B, I, U) и смайлики в красивые кнопки */
.pg-comment-btn {
    display: inline-block !important;
    padding: 6px 12px !important;
    margin: 0 4px 6px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #495057 !important;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.pg-comment-btn:hover {
    background-color: #dee2e6 !important;
    color: #212529 !important;
    border-color: #adb5bd !important;
}
/* Делаем жирный, курсив и подчеркнутый визуально понятными */
.pg-comment-btn.pg-b { font-weight: bold !important; }
.pg-comment-btn.pg-i { font-style: italic !important; }
.pg-comment-btn.pg-u { text-decoration: underline !important; }
/* 4. Оформляем счетчик символов, чтобы он не выглядел как каша из инпутов */
#phocagallery-comments-form td:has(input[name="phocagallerycommentscountin"]) {
    font-size: 13px !important;
    color: #6c757d !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: -10px !important;
}
/* Стилизуем маленькие поля счетчиков */
#phocagallery-comments-form input.comment-input2 {
    display: inline-block !important;
    width: 50px !important;
    padding: 2px 5px !important;
    background: transparent !important;
    border: none !important;
    font-weight: bold !important;
    color: #212529 !important;
    text-align: center !important;
}
/* 5. Выравниваем по центру и укрупняем главную кнопку "Отправить" */
#phocagallery-comments-form td[align="right"] {
    text-align: center !important;
    margin-top: 15px !important;
}
#phocagallerycommentssubmit {
    padding: 12px 30px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
}
/* Посвящается родителям скрываем модуль на страницах внутри папок Phocagallery */
body[class*="view-category"] .hide-in-gallery, 
body:has(div.pg-category-view) .hide-in-gallery {
    display: none !important;
}
/* Полностью убираем кнопку Share из всплывающего окна PhotoSwipe */
.pswp__button--share {
    display: none !important;
}


/* ############################### Красивый ФУТЕР ###################### */
.footer {
    z-index: 2;
    /* Мягкий статический перелив слева направо (синий -> зеленый -> оранжевый -> фиолетовый) */
    background: linear-gradient(90deg, #152141 0%, #163a30 35%, #965315 70%, #4c1d73 100%);
}
/* ############################### СТИЛИЗАЦИЯ СТРАНИЦЫ КОНТАКТОВ ###################### */
.sidebar-right.card { box-shadow: 0 6px 18px rgba(0, 76, 255, 0.7);}
/* Контейнер для текста контактов */
.item-pageforlogin .com-content-article__body {
    padding: 20px;
    background-color: #f8f9fac2; /* Мягкий светлый фон */
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 76, 255, 0.7); /* Легкая тень вокруг блока */
    max-width: 600px; /* Ограничиваем ширину, чтобы текст не растягивался во весь экран */
    margin-top: 15px;}
/* Стили для главного заголовка "Наши контакты" */
.item-pageforlogin .com-content-article__body p:first-child {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cassiopeia-color-primary, #11365d); /* Фирменный синий цвет Cassiopeia */
    margin-bottom: 25px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 10px;}
/* Общие стили для строк с контактами (email, телефон, адрес) */
.item-pageforlogin .com-content-article__body p:not(:first-child) {
    font-size: 1.05rem;
    color: #212529; /* Насыщенный черный цвет для текста */
    font-weight: 500;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px; /* Отступ между иконкой и текстом */}
/* Ссылка на email */
.item-pageforlogin .com-content-article__body a {
    color: #0d6efd !important; /* Красивый синий цвет для ссылки */
    text-decoration: none;
    font-weight: 600;}
.item-pageforlogin .com-content-article__body a:hover {
    text-decoration: underline;}
/* ДОБАВЛЕНИЕ ИКОНОК ЧЕРЕЗ FONT AWESOME */
/* Общие настройки для всех иконок перед строками */
.item-pageforlogin .com-content-article__body p:not(:first-child)::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    display: inline-block;}
/* 1. Иконка Конвертика перед e-mail */
.item-pageforlogin .com-content-article__body p:nth-child(2)::before {
    content: "\f0e0"; /* Код иконки конверта */
    color: #fd7e14; /* Оранжевый цвет */}
/* 2. Иконка Телефончика перед телефоном */
.item-pageforlogin .com-content-article__body p:nth-child(3)::before {
    content: "\f095"; /* Код иконки трубки телефона */
    color: #198754; /* Зеленый цвет */}
/* 3. Иконка Карты/Маркера перед адресом */
.item-pageforlogin .com-content-article__body p:nth-child(4)::before {
    content: "\f3c5"; /* Код иконки геолокации (капли) */
    color: #dc3545; /* Красный цвет */}
/* Скрываем пустые абзацы, которые создают лишние дыры на странице */
.item-pageforlogin .com-content-article__body p:empty,
.item-pageforlogin .com-content-article__body div:empty {
    display: none !important;}
/* ######################################################################## */

@keyframes glowmove {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}
/* Чтобы модуль не заходил за хедер, а оставался все время видимым на странице*/
/* для модуля sticky-top */
.sticky-top {
  z-index: 999;
  position: sticky;
  top: 105px;
}
/* Для МЕНЮ изменение формы и цвета кнопок */
/* Базовый вид всех кнопок (и обычных, и активных) */
.container-header .mod-menu li a,
.container-header .mod-menu li.active a,
.container-header .mod-menu li.current a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.2rem;
    border-radius: 100px; 
    transition: all 0.3s ease;
    text-decoration: none !important;
    background-color: transparent !important; /* Убираем фон у всех */
    color: inherit !important;                /* Цвет текста как у всех */
}
/* убираем МЕНЮ налево */
.container-header .container-nav {
    justify-content: flex-start !important;
    gap: 20px; /* Задает расстояние между логотипом и началом меню */
}
/* Эффект ПРИ НАВЕДЕНИИ на МЕНЮ для абсолютно любой кнопки */
.container-header .mod-menu li a:hover,
.container-header .mod-menu li.active a:hover,
.container-header .mod-menu li.current a:hover {
    background-color: #0056b3 !important; /* Цвет засветки */
    color: #ffffff !important;           /* Цвет текста при наведении */
    text-decoration: none !important;}
/* 1-й пункт — Синий фон */
.container-header .mod-menu li:nth-child(1) a:hover {
    background-color: #0056b3 !important;}
/* 2-й пункт — Зеленый фон */
.container-header .mod-menu li:nth-child(2) a:hover {
    background-color: #28a745 !important;}
/* 3-й пункт — Оранжевый фон */
.container-header .mod-menu li:nth-child(4) a:hover {
    background-color: #19692c !important;}
/* 4-й пункт — Фиолетовый фон */
.container-header .mod-menu li:nth-child(3) a:hover {
    background-color: #6f42c1 !important;}
/* все меню сузить */
.metismenu.mod-menu .metismenu-item {
    padding-left: 0.1em !important;  /* Было 1em, уменьшили левый отступ */
    padding-right: 0.1em !important; /* Было 1em, уменьшили правый отступ */
}

/* Изменение фона футера */
/*.footer {background: #152141; z-index: 2;}*/

/* ################# делаем хедер прозрачным forhome ################## */
.forhome .container-header {
  background-color: transparent;
  background-image: unset;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: background-color 0.5s;
}
.forhome .container-banner .banner-overlay {
  height: 100vh;
}
/* Появляющаяся шапка с эффектом стекла */
.forhome .container-header.scrolled {
  position: fixed;
  /*top: 0; при этом значении top, весь экран становиться под хедером*/
  left: 0;
  width: 100%;
  background: rgba(0, 50, 150, 0.4); /* эффект стекла */
  backdrop-filter: blur(4px) saturate(180%);
  z-index: 1000;
}
/* Светящаяся полоса снизу */
.forhome .container-header.scrolled::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, #0059ff, #193c9c, #18054d);
  background-size: 400% 400%;
  animation: glowmove 4s linear infinite;
  box-shadow: 0 0 20px 6px rgba(0, 89, 255, 0.7);
}

/* ######################### делаем хедер для nothomemenu ################# */
.nothomemenu .container-header {
  position: fixed;  
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 96, 0, 0.5); /* эффект стекла */
  backdrop-filter: blur(4px) saturate(180%);
  z-index: 1000;
}
.nothomemenu .container-banner .banner-overlay {
  height: 100vh;
}
/* Светящаяся полоса снизу (постоянная) */
.nothomemenu .container-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, #dfff009c, #ff8300, #ff3000);
  background-size: 400% 400%;
  animation: glowmove 4s linear infinite;
  box-shadow: 0 0 20px 6px rgba(255, 245, 94, 0.7);
}
/* тело будет начинаться от хедера forphotos*/
body.nothomemenu {
  padding-top: 102px;
  background: rgba(91, 0, 253, 0.26);
}

/* ############################### Оформление для страниц JoomShopping ################## */
/* Удаление ненужного текста в joomshopping */
#mxcpr {font-size: 0.1px !important;}
#mxcpr a {font-size: 0.1px !important;}
/* Удаление ненужной подложки в joomshopping */
#div_delivery { display: none !important;}
/* Делаем ОТЗЫВЫ МОГУТ ОСТАВЛЯТЬ как текст с ссылкой */
/* Скрываем старый текст Отзывов */
.review_text_not_login { font-size: 0 !important;}
/* Скрываем модули Письма и Звонка на странице деталей заказа */
body.task-order .bottom-a.card,
body.task-order .bottom-b.card {
    display: none !important;
}
/* Скрываем модули Письма и Звонка на странице информации о группах пользователей */
body.task-groupsinfo .bottom-a.card,
body.task-groupsinfo .bottom-b.card {
    display: none !important;
}
/* Выводим новый текст */
.review_text_not_login::after {
    content: "Отзывы могут оставлять,\A только зарегистрированные пользователи."; 
    font-size: 16px !important; 
    color: #222222 !important; 
    white-space: pre-wrap !important; 
    display: block !important; 
    line-height: 1.5 !important; 
}
/* Базовый контейнер магазина — делаем его полностью прозрачным */
.com_jshopping {
    position: relative;
    z-index: 1;
    padding: 0px;
    background: transparent !important;}
/* Фиксированный фон на весь экран */
.com_jshopping::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('/images/bg/LAVM-Иконы-01.jpg'); /* Путь к картинке */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}
/* Контент поверх фона, всё будет нажиматься */
/*.com_jshopping > * { position: relative; z-index: 2;}*/
/* Отменяем общие крупные фоны JoomShopping, чтобы открыть картинку */
.com_jshopping .row, .jshop .block_products {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/*####### Индивидуальная ПОДЛОЖКА для КАЖДОГО товара в списке #######*/
.com_jshopping .product_item,
.com_jshopping .product_block, 
.com_jshopping .jshop_list_product .product {
/* Прозрачный и белый фон (пропускает максимум заднего плана) */
   background-color: rgba(255, 255, 255, 0.07) !important; 
   backdrop-filter: blur(3px) saturate(120%) !important;
   -webkit-backdrop-filter: blur(3px) saturate(120%) !important; 
/* Тонкий чистый кант по краям  */
   border: 1px solid rgba(255, 255, 255, 0.7) !important; 
   border-radius: 28px !important; 
   box-shadow: 0 8px 18px rgba(55, 186, 19, 0.4) !important;
   padding: 24px !important;
   margin-bottom: 20px;
   display: block !important; 
   width: 40% !important; 
   margin-left: auto !important; 
   margin-right: auto !important; 
   box-sizing: border-box;
   transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}
/* Эффект активируется ИСКЛЮЧИТЕЛЬНО когда карточка находится по центру экрана */ 
.com_jshopping .product_item.is-centered,
.com_jshopping .product_block.is-centered,
.com_jshopping .jshop_list_product .product.is-centered { 
    background-color: rgba(255, 255, 255, 0.85) !important; 
    transform: translate(6px, -6px) scale(1.01) !important; 
    box-shadow: 6px 30px 60px rgba(0, 0, 0, 0.10) !important; 
}
/* Индивидуальная ПОДЛОЖКА для карточки внутри страницы товара */
.com_jshopping .productfull {
    background-color: rgba(255, 255, 255, 0.87) !important;
    padding: 20px !important;
    border-radius: 18px !important;
    /*box-shadow: 0 8px 24px rgba(55, 186, 19, 0.6) !important;*/
    margin-bottom: 20px;
    /* Центрирование блока шириной 60% */
    display: block !important;   /* Меняем inline-block на block для работы margin */
    width: 60% !important;        /* Ваша ширина */
    margin-left: auto !important;  /* Авто-отступ слева сдвигает блок к центру */
    margin-right: auto !important; /* Авто-отступ справа сдвигает блок к центру */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
/* рейтинг слева */
.block_rating_hits table { float: left !important; width: auto; border: 0px;}
/* цена и кнопки снизу */
@media (width >= 992px) {
  .col-lg-8 {
    flex: none;
    width: 100%;
  }
}
/* Центрирование контейнеров кнопок в JoomShopping */
.jshop.cart_buttons,
.jshop.wishlish_buttons,
.button_back {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    float: none !important;}
/* кнопки next ставим посередине */
#payment_submit.button,
.com_jshopping input[type="submit"][name="next"].btn-success,
.com_jshopping input[type="submit"].btn-success.button {
    display: block !important;
    margin: 20px auto !important;
    float: none !important;            /* Сбрасываем возможное прижатие к боку */
    padding: 12px 35px !important;
    font-size: 16px !important;
}
/* кнопки регистрироваться ставим посередине */
.com_jshopping .btn-primary {
    display: table !important;
    margin: 20px auto !important; 
}
/* меняем Логин на Авторизация, в магазине */
/* 1. Полностью скрываем старое слово "Логин" */
.jshop.pagelogin h1, 
.comjshop h1 {
    font-size: 0 !important;
    margin-bottom: 20px !important; /* Сохраняем аккуратный отступ снизу */
}
/* 2. Подставляем новое слово */
.jshop.pagelogin h1::before, 
.comjshop h1::before {
    content: "Авторизация" !important; /* НАПИШИТЕ ЗДЕСЬ СВОЙ ТЕКСТ */
    font-size: 2.25rem !important;    /* Стандартный размер h1 в шаблоне Cassiopeia */
    font-weight: 700 !important;       /* Жирность букв */
    color: #212529 !important;        /* Родной цвет текста шаблона */
    visibility: visible !important;
    display: block !important;
}
/* 1. Нацеливаемся строго на ОДИН конкретный абзац "Спасибо за заказ" */
.com_jshopping .container-component main > p:first-of-type {
    color: #e1e4e6 !important;            /* Почти белый, слегка сероватый цвет */
    font-size: 32px !important;           /* Крупный размер */
    font-weight: 800 !important;          /* Максимально толстый (жирный) шрифт */
    text-shadow: 1px 1px 2px rgba(128, 255, 0, 0.8) !important; /* Тень для читаемости */
    margin: 0 0 20px 0 !important;        
    display: block !important;
}
/* 2. Добавляем вторую строчку строго к этому же абзацу */
.com_jshopping .container-component main > p:first-of-type:after {
    content: "Мы отправили подтверждение и детали чека на вашу электронную почту."; 
    display: block !important;            /* Перенос на новую строку */
    color: #e1e4e6 !important;            /* Чуть более серый, но почти белый */
    font-size: 20px !important;           /* Тоже крупный размер */
    font-weight: 700 !important;          /* Толстый (жирный) шрифт */
    text-shadow: 1px 1px 2px rgba(128, 255, 0, 0.8) !important; /* Тень для четкости букв */
    margin-top: 20px !important;          
    line-height: 1.5 !important;          
}
/* Нацеливаемся на Вы ничего не заказали */
.com_jshopping div.myorders_no_orders:first-of-type {
    color: #e1e4e6 !important;            /* Почти белый, слегка сероватый цвет */
    font-size: 32px !important;           /* Крупный размер */
    font-weight: 800 !important;          /* Максимально толстый (жирный) шрифт */
    text-shadow: 1px 1px 2px rgba(128, 255, 0, 0.8) !important; /* Тень для четкости */
    text-align: center !important;        /* Центрирование текста */
    margin: 30px 0 !important;            /* Отступы сверху и снизу */
    display: block !important;
}

/* кнопка выйти */
/* Стилизация конкретно этой кнопки по её атрибуту onclick */
input[type="button"][onclick*="logout"].btn.button {
    background-color: #1e3a8a !important; /* Тёмно-синий цвет */
    color: #ffffff !important;            /* Белый текст */
    padding: 10px 20px;                   /* Внутренние отступы */
    border: none;                         /* Убираем стандартную рамку */
    border-radius: 4px;                   /* Легкое скругление углов */
    cursor: pointer;                      /* Курсор в виде руки */
    font-weight: bold;                    /* Жирный текст */
    transition: background-color 0.3s;    /* Плавная анимация при наведении */
}

/* Эффект при наведении курсора (кнопка станет чуть светлее) */
input[type="button"][onclick*="logout"].btn.button:hover {
    background-color: #2563eb !important; /* Яркий синий цвет */
}

/* Сброс старых отступов и фиксация зазора в 20px между любыми кнопками */
.jshop.cart_buttons .pull-left,
.jshop.cart_buttons .pull-right,
.jshop.wishlish_buttons .pull-left,
.jshop.wishlish_buttons .pull-right,
.button_back .pull-left,
.button_back .pull-right,
.button_back a, 
.button_back input {
    margin: 0 10px !important; /* Ровно 20px между кнопками, когда они рядом */
}
/* Подложка для категорий, производителя, текстовых описаний, отзывов и корзины */
/* ОБНОВЛЕННЫЙ СПИСОК: Сюда добавлены все скрытые страницы магазина */
/*.com_jshopping .form-validate, оставить отзыв (имя, емайл, прочее на подложку) */
/*.com_jshopping .form-validate,  под отзывы, имя, емейл ... */
/*.com_jshopping .container-component, */
/*.com_jshopping .grid-child.container-component,  не нужно*/
.com_jshopping #jshop_review_write,
.com_jshopping .jshop.jshop_subtotal,
.com_jshopping .jshop .groups_list,
.com_jshopping .myorders_total,
.com_jshopping .myorders_block_info,
.com_jshopping .jshop.myorderinfo,
.com_jshopping .myaccount_urls,
.com_jshopping .jshop_profile_data,
.com_jshopping span.review, /* оставить отзыв */
.com_jshopping .other_delivery_adress,
.com_jshopping .checkout_pfinish_block .checkoutinfo,
.com_jshopping .checkout_shipping_block #table_shippings,
/*.com_jshopping .requiredtext,*/
.com_jshopping .checkout_payment_block #table_payments,
/*.com_jshopping .jshop.cart .name,*/
.com_jshopping .jshop.checkout .name,
.com_jshopping .discount_code .name,
.com_jshopping .coupon_box .name,
.com_jshopping #discount_code_block .name,
.com_jshopping .discount_code,             
.com_jshopping .coupon_box,
.com_jshopping .jshop.checkout,      /* Вся анкета заказа целиком */
/*.com_jshopping .jshop.cart,          Вся страница корзины целиком */
.com_jshopping .jshop.pagelogin,     /* Страница входа/регистрации */
.com_jshopping .jshop.myaccount,     /* Весь личный кабинет */
.com_jshopping .jshop.editaccount,   /* Страница редактирования профиля */
.com_jshopping .jshop_rules_page,    /* Страница правил/условий доставки */
.com_jshopping .jshop.pagelogin,
.com_jshopping .wishlist_empty_text,
.com_jshopping .cart_empty_text,
.com_jshopping .table.jshop,         
.com_jshopping .category,
.com_jshopping .review_item,
.com_jshopping .review_header,
.com_jshopping .review_text_not_login,
.com_jshopping .jhop_list_category .category,
.com_jshopping .cart_table_list,
.com_jshopping .checkout_block,
.com_jshopping .manufacturer_block,
.com_jshopping .jshop_list_manufacturer .manufacturer,
.com_jshopping .jshop.checkout,            /* Вся страница чекаута целиком */
.com_jshopping .checkout_step,             /* Отдельные шаги оформления */
.com_jshopping .register_block,            /* Блок регистрации при заказе */
.com_jshopping .jshop.myaccount,           /* Личный кабинет */
.com_jshopping .jshop_list_order,          /* Список заказов */
.com_jshopping .jshop_order_details,       /* Детали заказа */
.com_jshopping .jshop.editaccount,         /* Редактирование профиля */
.com_jshopping .block_sorting_count,       /* Панель сортировки товаров */
.com_jshopping .pagination,                /* Кнопки страниц (1, 2, 3...) */
.com_jshopping .product_compare            /* Страница сравнения */ {
    background-color: rgba(255, 255, 255, 0.87) !important;
    padding: 20px !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(55, 186, 19, 0.5) !important;
    margin-bottom: 20px;
    display: block !important;   /* Меняем inline-block на block для работы margin */
    width: 60% !important;        /* Ваша ширина */
    margin-left: auto !important;  /* Авто-отступ слева сдвигает блок к центру */
    margin-right: auto !important; /* Авто-отступ справа сдвигает блок к центру */
    box-sizing: border-box;
    margin-top: 20px;
}
.com_jshopping div.jshop_register, /* форма под регистрацию */
.com_jshopping .jshop h1,
.com_jshopping .cart_block_discount .name,
.com_jshopping .row_agb,
.com_jshopping .pfinish_comment_block .name {
    background-color: rgba(255, 255, 255, 0.87) !important;
    padding: 20px !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(55, 186, 19, 0.5) !important;
    margin-bottom: 20px;
  display: block !important;   /* Меняем inline-block на block для работы margin */
    width: 100% !important;        /* Ваша ширина */
    margin-left: auto !important;  /* Авто-отступ слева сдвигает блок к центру */
    margin-right: auto !important; /* Авто-отступ справа сдвигает блок к центру */
    box-sizing: border-box;
}
.com_jshopping #jshop_menu_order {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background-color: rgba(255, 255, 255, 0.87) !important;
  border-radius: 0.25rem;
  display: flex;
  justify-content: space-around;
}
/* Настраиваем стиль и размер блока с обязательными полями */
.com_jshopping .requiredtext {
    font-size: 15px !important; /* Увеличиваем размер шрифта */
    /*font-weight: bold !important;  Делаем текст жирным (толстым) */
    color: #c0392b !important; /* Делаем текст красивым темно-красным цветом для привлечения внимания */
    /*margin-top: 15px !important;  Отступ сверху */
    /*margin-bottom: 15px !important;  Отступ снизу */
    /*display: block !important;*/
    text-align: left !important; /* Выравнивание по левому краю (можно заменить на center, если нужно по центру) */
    visibility: hidden; /* Временно скрываем старый текст, чтобы заменить его */
}
.com_jshopping .cart_block_discount {
    display: flex !important;
    flex-direction: column !important; /* Выстраиваем элементы (надпись, поле, кнопку) друг под другом */
    align-items: center !important;    /* Центрируем их по горизонтали */
    justify-content: center !important; /* Центрируем по вертикали */
    text-align: center !important;
    width: 100% !important;
    margin: 20px auto !important;       /* Автоматические отступы по бокам для центрирования на экране */
}
/* Вставляем ваш новый, развернутый текст вместо старого */
.com_jshopping .requiredtext::before {
    content: "* Звездочкой отмечены поля для обязательного заполнения!" !important;
    visibility: visible; /* Делаем видимым только новый текст */
  background-color: rgba(255, 255, 255, 0.87) !important;
    padding: 20px !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(55, 186, 19, 0.5) !important;
    margin-bottom: 20px;
  display: block !important;   /* Меняем inline-block на block для работы margin */
    width: 100% !important;        /* Ваша ширина */
    margin-left: auto !important;  /* Авто-отступ слева сдвигает блок к центру */
    margin-right: auto !important; /* Авто-отступ справа сдвигает блок к центру */
    box-sizing: border-box;
}
/* Фиксация хедера на всех страницах магазина */
.com_jshopping .container-header {
  position: fixed;  
  top: 0;
  left: 0;
  right: 0;
  background: rgba(55, 186, 19, 0.4) !important; /* Эффект стекла зеленоватый*/
  backdrop-filter: blur(4px) saturate(180%);
  z-index: 1000;
}
/* Настройка высоты оверлея баннера (если используется) */
.com_jshopping .container-banner .banner-overlay {
  height: 100vh;}
/* Светящаяся полоса снизу хедера зеленая */
.com_jshopping .container-header::after,
.com_jshopping .container-header.scrolled::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, #00ffbf, #00a26c, #005035);
  background-size: 400% 400%;
  animation: glowmove 4s linear infinite;
  box-shadow: 0 0 20px 7px rgba(55, 255, 0, 0.8);
}
/* Отступ сверху для основного контента, чтобы его не перекрывал фиксированный хедер */
.com_jshopping .site-grid {
  margin-top: 105px; /* Изменить значение, если хедер слишком сильно перекрывает товары */
}
/* убрать все рамочки у этого элемента продукта */
.jshop_list_product .block_product {border: none !important;}
/* Полное удаление СТАРЫХ следов и теней наведения от шаблона joomshopping*/
.com_jshopping .jshop_list_product .block_product:hover {
    box-shadow: none !important;
    border-radius: 0 !important; /* Убираем старое скругление, если оно мешает */
}
/* ############## Контейнер Мой кабинет ############## */
.custom-cabinet-grid {
    display: flex;
    flex-direction: column;
    margin-top: 25px;}
.cabinet-row {
    display: flex;
    align-items: center;
    gap: 20px; /* Расстояние между кнопкой и текстом по горизонтали */
    margin-bottom: 25px !important; /* Отступ между кнопками по вертикали */}
.cabinet-row:last-child {
    margin-bottom: 0 !important;
}
.btn-cabinet {
    display: inline-block;
    width: 220px;
    text-align: center;
    padding: 12px 15px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.btn-cabinet:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);}
.btn-cabinet:active {
    transform: scale(0.98);
}
/* Цветовая палитра кнопок */
.btn-profile { background-color: #0d6efd; }
.btn-profile:hover { background-color: #0b5ed7; }

.btn-orders { background-color: #198754; }
.btn-orders:hover { background-color: #157347; }

.btn-review { background-color: #6f42c1; }
.btn-review:hover { background-color: #59359a; }

.btn-discount { background-color: #fd7e14; }
.btn-discount:hover { background-color: #e6710f; }

.btn-logout { background-color: #dc3545; }
.btn-logout:hover { background-color: #bb2d3b; }
/* Текст описания */
.cabinet-text {
    font-size: 0.95rem;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1.4;
}
/* Адаптивность для мобильных экранов */
@media (max-width: 576px) {
    .cabinet-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .btn-cabinet {
        width: 100%;
    }
}


/* ######################## делаем хедер для forphotos ####################### */
/* Убираем лишние надписи */
div[style*="display:block;color:#ccc;text-align:right;"] {
    display: none !important;
}
.forphotos .container-header {
  position: fixed;  
  top: 0;
  left: 0;
  right: 0;
  background: rgba(209, 29, 225, 0.4); /* эффект стекла */
  backdrop-filter: blur(4px) saturate(180%);
  z-index: 1000;
}
/*.forphotos .container-banner .banner-overlay {
  height: 100vh;
}*/
/* Светящаяся полоса снизу (постоянная) */
.forphotos .container-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, #8000ff, #eb00ff, #800030);
  background-size: 400% 400%;
  animation: glowmove 4s linear infinite;
  box-shadow: 0 0 20px 7px rgba(103, 0, 227, 0.7);
}
/* тело будет начинаться от хедера forphotos*/
body.forphotos {
  padding-top: 98px;
  background: rgba(0, 2, 150, 0.30);
}

/* ################################ делаем хедер для forlogin ################## */
.forlogin .container-header {
  position: fixed;  
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 124, 255, 0.4); /* эффект стекла */
  backdrop-filter: blur(4px) saturate(180%);
  z-index: 1000;
}
.forlogin .container-banner .banner-overlay {
  height: 100vh;
}
/* Светящаяся полоса снизу (постоянная) */
.forlogin .container-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, #00b7ff, #0044fd, #3700cf);
  background-size: 400% 400%;
  animation: glowmove 4s linear infinite;
  box-shadow: 0 0 20px 7px rgba(0, 89, 255, 0.7);
}
/* тело будет начинаться от хедера forlogin*/
body.forlogin {
  padding-top: 98px;
  background: rgba(58, 98, 255, 0.4);
}

/* ################################ делаем хедер для formachine ################## */
.formachine .container-header {
  position: fixed;  
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 124, 255, 0.4); /* эффект стекла */
  backdrop-filter: blur(4px) saturate(180%);
  z-index: 1000;
}
.formachine .container-banner .banner-overlay {
  height: 100vh;
}
/* Светящаяся полоса снизу (постоянная) */
.formachine .container-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, #00b7ff, #0044fd, #3700cf);
  background-size: 400% 400%;
  animation: glowmove 4s linear infinite;
  box-shadow: 0 0 20px 7px rgba(0, 89, 255, 0.7);
}
/* тело будет начинаться от хедера formachine*/
body.formachine {
  padding-top: 98px;
  background: rgba(58, 98, 255, 0.4);
}


/* убрать лишнее подчеркивание, чтобы лого встало на место */
.mod-custom p {margin: 0;}
/* Меню сделать посередине (center)*/
/* Изменение шрифтов */
.page-header h2 {text-decoration:none;}
h1,h2,h3,h4,h5,h6 {font-weight:400;}

/* Убираем подчеркивание у активного пункта меню */
.container-header .metismenu > li.active > a::after {background: none;}
/* Опционально: убираем подчеркивание при наведении на пункты меню */
.container-header .metismenu > li > a::after {content: none;}

/* без подчеркивания, для логина */
.list-unstyled li a {text-decoration: none;}
/* Тени для Login form */
/*.card {box-shadow:6px 6px 12px 0px rgba(0, 50, 150, 0.5); border-radius: 18px !important;}*/
/* Тени для Блог категории */
/*.blog-items .blog-item {
    box-shadow: 6px 6px 12px 0px rgba(100, 200, 255, 0.7);
}*/

/* ############# Для HERO! ############ */
/* ЦЕНТРАЛЬНЫЙ БЛОК */
  .lavm-center {
  position: relative; /*relative*/
  z-index: 1; /* чтобы сделать поверх меню, задать 10 */
  text-align: center;
  padding: 0px 20px;
  overflow: hidden;
  color: var(--blue); /* white; */
}
/* КНОПКА на главной Смотреть каталог */
.lavm-btn {
  padding: 14px 30px;
  background: #3b82f6; /* цвет кнопки */
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.lavm-btn:hover {
  background: #1d4ed8;
  transform: scale(1.05);
}
/* КНОПКА на главной Контакты */
.lavmk-btn {
  padding: 14px 30px;
  background: #3b82f6; /* цвет кнопки */
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.lavmk-btn:hover {
  background: #1d4ed8;
  transform: scale(1.05);
}
/* LAVM СНЕЖИНКИ */
.lavm-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden; /*выйдут за границы, они будут обрезаны, и полосы прокрутки не появятся*/
  z-index: 1; /* Поверх фона, но под текстом */
  pointer-events: none; /* Пропускает клики сквозь себя */
} 
/* ОБЁРТКА (падает вниз) */
.lavm-item {
  position: fixed; /* fixed; */
  will-change: transform;
  animation: lavm-fall linear infinite;
}
/* ВНУТРЕННИЙ ЭЛЕМЕНТ (двигается от мышки) */
.lavm-inner {
  display: inline-block; /*элемент ведет себя как текст*/
  font-weight: bold; /*делает шрифт жирным*/
  font-size: clamp(16px, 3vw, 36px) !important; /*3vw; текст 3vw-увеличивается в зависимости от ширины экрана*/
  color: rgba(255,255,255,0.07); /*белый цвет с очень высокой прозрачностью*/
  will-change: transform; /*этот элемент будет анимироваться*/
}
/* ТОЛЬКО ВЕРТИКАЛЬНОЕ ДВИЖЕНИЕ */
@keyframes lavm-fall {
  0% { transform: translateY(-50vh); }
  100% { transform: translateY(100vh); }
}

/* ######################### ОПТИМИЗАЦИЯ ВИДА ДЛЯ МОБИЛЬНЫХ ###################*/
/* Для поиска, на сайте разные позиции */
.container-top-a {
 display: none;
  visibility: hidden; } 
@media (max-width: 1163px) {
.container-header .container-search {
  display: none;
  visibility: hidden;}
.container-top-a {
 display: flex;
  visibility: visible; 
}  
}
/* ######################### ОПТИМИЗАЦИЯ ВИДА ДЛЯ МОБИЛЬНЫХ forhome ###################*/
@media (max-width: 991.98px) { 
.forhome .container-header {
  background-color: transparent;
  background-image: unset;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  transition: background-color 0.5s;
}
/* Растягиваем контейнер баннера на всю высоту мобильного экрана */
  .container-banner {
   height: 100vh !important; /* vh — это % от высоты экрана телефона */
   min-height: -webkit-fill-available; /* Корректный учет высоты для Safari на iOS */
   margin: 0 !important;
   padding: 0 !important;
}
/* Растягиваем саму картинку внутри баннера */
  .container-banner .banner-overlay {
   height: 100% !important;
   background-size: cover !important; /* Обрезает края, но заполняет экран */
   background-position: center center !important; /* Центрирует самое важное */
   background-attachment: scroll !important; /* Отключает фиксацию фона на iOS во избежание багов */
}
/* ################## Бургер меню ####################*/
   .navbar-toggler {
   position: fixed;
   top: 20px;
   right: 10px;
   z-index: 9999;
   display: block;
   width: 70px; /*делает кнопку бургер меню крупной и квадратной*/
   height: 70px; /*делает кнопку бургер меню крупной и квадратной*/
   background: #060c29;
   border: 4px solid white !important;
   border-radius: 20px; /* скругляет углы, превращая кнопку в круг*/      
}
   .navbar-collapse {
   position: fixed;
   top: 98px; /*Меню остается на одном месте, находясь в 98пикселях от нижнего края*/
   bottom: auto;
   right: 0;
   padding: 15px;  
   height: auto; /*Меню подстраивается под высоту контента*/
   overflow-y: auto;
   background-color: rgba(6, 12, 41, 0.9); /* Полупрозрачный белый (или темный) */ 
   border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Тонкая грань снизу */
   border-top: 1px solid rgba(255, 255, 255, 0.5); /* Тонкая грань сверху */  
   box-shadow: 0 -5px 20px rgba(0, 100, 255, 0.5); /* Легкая тень */  
}
   .navbar-collapse.collapsing {
   height: auto;
   transition: transform 0.3s ease;
   transform: translateX(100%);
}
   .navbar-collapse.show {
   transform: translateX(0);
   transition: transform 0.3s ease-out;
}
.metismenu.mod-menu .metismenu-item.active > a {
  text-decoration: none;
}
/* --- Исправление принудительного макета и зависания скрипта --- */

/* Отменяет абсолютное позиционирование подпунктов */
.navbar-collapse .metismenu .mm-collapse {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100%;
}

/* 
  УБИРАЕМ !IMPORTANT: 
  Мы разрешаем скрипту Joomla плавно менять класс .mm-collapsing 
  и высоту подпунктов. Браузер больше не будет принудительно 
  перестраивать макет экрана до завершения работы скрипта.
*/
.navbar-collapse .metismenu .mm-collapsing {
  display: block;
  transition: height 0.35s ease; 
}

/* Когда меню полностью открылось, мягко фиксируем его блочным */
.navbar-collapse .metismenu .mm-collapse.mm-show {
  display: block;
}

/* Стилизация ссылок внутри выпадающего списка */
.navbar-collapse .metismenu .mm-collapse a {
  padding-left: 20px !important; 
  display: block !important;
}

/* Убирает принудительное расширение меню влево (ваша рабочая строка) */
.container-header .metismenu > li.level-1 > ul {
  min-width: 0rem;
}



  
/* ######################### ОПТИМИЗАЦИЯ ВИДА ДЛЯ МОБИЛЬНЫХ joomshopping ###################*/
  .com_jshopping .container-header {
   position: fixed !important;
   top: 0;
   bottom: auto;
   width: 100%;
   padding: 0;
   background: rgba(55, 186, 19, 0.4); /* эффект стекла */
   backdrop-filter: blur(4px) saturate(180%);
   z-index: 1000;
}
.com_jshopping .container-header::after {
   content: "";
   position: absolute;
   bottom: 0; 
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(135deg, #28a082, #146e50, #0a3a2a);
   background-size: 400% 400%;
   animation: glowmove 4s linear infinite;
   box-shadow: 0 0 20px 7px rgba(55, 186, 19, 0.8);
}
.com_jshopping .site-grid { margin-top: 98px !important;}
.com_jshopping::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url('/images/bg/LAVM-Иконы-01.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none; /* Клик проходит сквозь фон на товары */
}
/* убрать полосочку ниже продукта */
.jshop_list_product .block_product { border: none !important;}
.jshop.cart tr { border-bottom: none !important;}
/* оставить полную ширину товара */
.com_jshopping #jshop_review_write,
.com_jshopping .jshop.jshop_subtotal,
.com_jshopping .jshop .groups_list,
.com_jshopping .myorders_total,
.com_jshopping .myorders_block_info,
.com_jshopping .jshop.myorderinfo,
.com_jshopping .myaccount_urls,
.com_jshopping .jshop_profile_data,
.com_jshopping .form-validate, /*оставить отзыв (имя, емайл, прочее на подложку) */
.com_jshopping span.review, /* оставить отзыв */
.com_jshopping .productfull,
.com_jshopping .product_item,
.com_jshopping .product_block, 
.com_jshopping .jshop_list_product .product,
.com_jshopping .other_delivery_adress,
.com_jshopping .checkout_pfinish_block .checkoutinfo,
.com_jshopping .checkout_shipping_block #table_shippings,
.com_jshopping .requiredtext,
.com_jshopping .checkout_payment_block #table_payments,
.com_jshopping div.jshop_register,
.com_jshopping .jshop.cart .name,
.com_jshopping .jshop.checkout .name,
.com_jshopping .discount_code .name,
.com_jshopping .coupon_box .name,
.com_jshopping #discount_code_block .name,
.com_jshopping .discount_code,             
.com_jshopping .coupon_box,
.com_jshopping .jshop.checkout,      /* Вся анкета заказа целиком */
.com_jshopping .jshop.cart,          /* Вся страница корзины целиком */
.com_jshopping .jshop.pagelogin,     /* Страница входа/регистрации */
.com_jshopping .jshop.myaccount,     /* Весь личный кабинет */
.com_jshopping .jshop.editaccount,   /* Страница редактирования профиля */
.com_jshopping .jshop_rules_page,    /* Страница правил/условий доставки */
.com_jshopping .jshop.pagelogin,
.com_jshopping .wishlist_empty_text,
.com_jshopping .cart_empty_text,
.com_jshopping table.jshop,           
.com_jshopping .category,
.com_jshopping .review_item,
.com_jshopping .review_header,
.com_jshopping .review_text_not_login,
.com_jshopping .jhop_list_category .category,
.com_jshopping .cart_table_list,
.com_jshopping .checkout_block,
.com_jshopping .manufacturer_block,
.com_jshopping .jshop_list_manufacturer .manufacturer,
.com_jshopping .jshop.checkout,            /* Вся страница чекаута целиком */
.com_jshopping .checkout_step,             /* Отдельные шаги оформления */
.com_jshopping .register_block,            /* Блок регистрации при заказе */
.com_jshopping .jshop.myaccount,           /* Личный кабинет */
.com_jshopping .jshop_list_order,          /* Список заказов */
.com_jshopping .jshop_order_details,       /* Детали заказа */
.com_jshopping .jshop.editaccount,         /* Редактирование профиля */
.com_jshopping .block_sorting_count,       /* Панель сортировки товаров */
.com_jshopping .pagination,                /* Кнопки страниц (1, 2, 3...) */
.com_jshopping .product_compare            /* Страница сравнения */  {
    /* На смартфонах карточка занимает всю ширину экрана */
    width: 100% !important; 
    padding: 15px !important; /* Чуть уменьшаем внутренние отступы для экономии места */
    /*box-shadow: 0 6px 18px rgba(55, 186, 19, 0.5) !important;*/
}

/* ########## ОПТИМИЗАЦИЯ ВИДА ДЛЯ МОБИЛЬНЫХ nothomemenu #########*/
.nothomemenu .container-header {
   position: fixed !important;
   top: 0;
   bottom: auto;
   width: 100%;
   padding: 0;
   background: rgba(255, 96, 0, 0.5); /* эффект стекла */
   backdrop-filter: blur(4px) saturate(180%);
   z-index: 1000;
}

/* ########## ОПТИМИЗАЦИЯ ВИДА ДЛЯ МОБИЛЬНЫХ forphotos #########*/
.forphotos .container-header {
   position: fixed !important;
   top: 0;
   bottom: auto;
   width: 100%;
   padding: 0;
   background: rgba(209, 29, 225, 0.4); /* эффект стекла */
   backdrop-filter: blur(4px) saturate(180%);
   z-index: 1000;
}
.forphotos .container-header::after {
   content: "";
   position: absolute;
   bottom: 0; 
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(135deg, #8000ff, #eb00ff, #800030);
   background-size: 400% 400%;
   animation: glowmove 4s linear infinite;
   box-shadow: 0 0 20px 6px rgba(103, 0, 227, 0.7);
}
body.forphotos {
    padding-top: 98px !important; /* Настройте это число под фактическую высоту вашей шапки */
}
/* ########## ОПТИМИЗАЦИЯ ВИДА ДЛЯ МОБИЛЬНЫХ forlogin #########*/
.forlogin .container-header {
   position: fixed !important;
   top: 0;
   bottom: auto;
   width: 100%;
   padding: 0;
   background: rgba(0, 124, 255, 0.4); /* эффект стекла */
   backdrop-filter: blur(4px) saturate(180%);
   z-index: 1000;
}
.forlogin .container-header::after {
   content: "";
   position: absolute;
   bottom: 0; 
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(135deg, #00b7ff, #0044fd, #3700cf);
   background-size: 400% 400%;
   animation: glowmove 4s linear infinite;
   box-shadow: 0 0 20px 7px rgba(0, 89, 255, 0.7);
}
body.forlogin {
    padding-top: 98px !important; /* Настройте это число под фактическую высоту вашей шапки */
}
/* ########## ОПТИМИЗАЦИЯ ВИДА ДЛЯ МОБИЛЬНЫХ formachine #########*/
.formachine .container-header {
   position: fixed !important;
   top: 0;
   bottom: auto;
   width: 100%;
   padding: 0;
   background: rgba(0, 124, 255, 0.4); /* эффект стекла */
   backdrop-filter: blur(4px) saturate(180%);
   z-index: 1000;
}
.formachine .container-header::after {
   content: "";
   position: absolute;
   bottom: 0; 
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(135deg, #00b7ff, #0044fd, #3700cf);
   background-size: 400% 400%;
   animation: glowmove 4s linear infinite;
   box-shadow: 0 0 20px 7px rgba(0, 89, 255, 0.7);
}
body.formachine {
    padding-top: 98px !important; /* Настройте это число под фактическую высоту вашей шапки */
}
}