/*----  ahorns ----*/

a {
    color: #E3000F;
}

body {
    font-size: 15px;
    line-height: 24px;
}

h1 {
    font-weight: 400;
    color: #E3000F;
}

hr.red {
    border: none; /* Убираем границу для браузера Firefox */
    color:#E3000F; /* Цвет линии для остальных браузеров */
    background-color: #E3000F; /* Цвет линии для браузера Firefox и Opera */
    height: 1px; /* Толщина линии */
}

#sp-before-header {
    padding: 10px 0;
}
#sp-top-wrapper {
    background-color: #E3000F;
    color: #fff;
}
#sp-top-wrapper .menutop a {
    color: #fff;
}    
#sp-header {
    border-top: #E3000F;
    border-top-width: 2px;
    border-top-style: solid;
}
.sppb-addon-content h1 {
	color: #fff;
}
.col-md-2-5 {
    width: 20%;
}
.top-categories .category {
    min-height: 200px;
}
.top-categories .overlay {
     min-height: 200px;
}
.entry-header.has-post-format h2 {
    font-size: 18px;
    font-weight: 400;
}
.entry-header.has-post-format h2 a {
	color: #E3000F!important
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
    width: 70px;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    width: 70px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item >a {
    text-transform: none;
}
#sp-page-title .breadcrumb {
    font-size: 12px;
    line-height: 12px;
    margin: 0 0 12px;
    padding: 12px 0;
}
.page-header {
    padding-bottom: 25px;
    margin: 10px 0 20px;
    border-bottom: 1px solid #eee;
}

/*галерея droppics*/
.droppicsgallerymasonry span {
    font-weight: normal;
    font-size: 0.9em;
}

/*стили с сайта аст*/
.tradein-title{
  position: absolute;
  left: 0;
  top:0;
  font-size: 26px;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  background-image: -webkit-linear-gradient(150deg,  #ea2026 40%, rgba(229, 0, 109, 0.7) 88%, rgba(229, 0, 109, .4) 100%);
  background-image: -moz-linear-gradient(150deg,  #ea2026 40%, rgba(229, 0, 109, 0.7) 88%, rgba(229, 0, 109, .4) 100%);
  background-image: -o-linear-gradient(150deg,  #ea2026 40%, rgba(229, 0, 109, 0.7) 88%, rgba(229, 0, 109, .4) 100%);
  background-image: linear-gradient(150deg, #ea2026 40%, rgba(229,0,109,0.7) 88%, rgba(229,0,109, .4) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2003', endColorstr='#e5006d',GradientType=0 );
  z-index: 2;
}
.tradein-title-middle {
    display: table-cell;
    vertical-align: middle;
    padding: 16px 27px;
}
.advantage-title{
  position: absolute;
  left: 0;
  top:0;
  font-size: 26px;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  background-image: -webkit-linear-gradient(150deg,  #ea2026 40%, rgba(229, 0, 109, 0.7) 88%, rgba(229, 0, 109, .4) 100%);
  background-image: -moz-linear-gradient(150deg,  #ea2026 40%, rgba(229, 0, 109, 0.7) 88%, rgba(229, 0, 109, .4) 100%);
  background-image: -o-linear-gradient(150deg,  #ea2026 40%, rgba(229, 0, 109, 0.7) 88%, rgba(229, 0, 109, .4) 100%);
  background-image: linear-gradient(150deg, #ea2026 40%, rgba(229,0,109,0.7) 88%, rgba(229,0,109, .4) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2003', endColorstr='#e5006d',GradientType=0 );
  z-index: 2;
}
.advantage-title-middle {
    display: table-cell;
    vertical-align: middle;
    padding: 16px 27px;
}
.advantage-picture {
    padding-left: 150px;
    padding-bottom: 20px;
    background-position: 0 0;
}

.col-xs-33 {
    width: 33%;
    float: left;
    padding-right: 20px;
    padding-top: 20px;
}

.col-xs-33 img {
    margin-top: -20px;
}
.col-xs-33 p {
    padding-left: 90px;
}
.col-xs-33 ul li {
    padding-left: 70px;
}

.response-single-title {
	font-weight: bold;
}
.response-single-date {
	color: #999999; 
	font-size: 8pt;
}

.cat1-good-row-inner > div {
    display: table-cell;
    padding: 20px 15px;
}
.cat1-good-image-cell {
    vertical-align: middle;
    width: 20%;
    float: none;
}
.btn-default {
    color: #fff;
    background-color: #ea2026;
    border-color: #ea2026;
}
.qa_question {
	padding-left: 50px;
}

#sp-main-body {
    padding-top: 30px;
}

ul.sp-contact-info {
    display: none;
}

.PricebasePrice  {color: #970808;}

/* ---- Список товаров (категория с товарами): изображение 25% / инфо 75% ---- */
.product-list-view .items-row {
    display: block;
}
.product-list-view article.item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}
/* Joomla оборачивает содержимое статьи в дополнительный div (например,
   .system-unpublished) - .entry-image/.product-info-block оказываются не
   прямыми потомками article.item, а flex на article.item тогда ни на что
   не влияет (внутри всего один flex-item - сам этот div). Делаем flex-
   контейнером именно тот div, в котором лежит картинка. */
.product-list-view article.item > div:has(> .entry-image) {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.product-list-view article.item .entry-image {
    flex: 0 0 25%;
    max-width: 25%;
    margin: 0;
}
.product-list-view article.item .entry-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ededed;
}
.product-list-view article.item .product-info-block {
    flex: 0 0 calc(75% - 30px);
    max-width: calc(75% - 30px);
}
.product-list-view article.item .entry-header h2 {
    margin: 0 0 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.product-list-view article.item .entry-header h2 a {
    color: #202020;
}
.product-list-view article.item .product-info-block p:first-of-type .price-label {
    color: #999999;
    font-weight: 400;
    font-size: 15px;
}
.product-list-view article.item .product-info-block p:first-of-type .price-value {
    color: #970808;
    font-size: 18px;
    font-weight: 700;
}
.product-list-view article.item .readmore a {
    background-color: #ea2026;
    border-color: #ea2026;
}
@media (max-width: 767px) {
    .product-list-view article.item,
    .product-list-view article.item > div:has(> .entry-image) {
        flex-direction: column;
    }
    .product-list-view article.item .entry-image,
    .product-list-view article.item .product-info-block {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- Верхняя полоса (соц.иконки/телефоны) ----
   Соц.иконки отключены через параметр темы show_social_icons (см. m2l6s_template_styles,
   стиль id=52). Колонка #sp-top1 остаётся в разметке Helix3 пустой - прячем её и
   растягиваем блок телефонов на всю ширину, текст по центру. */
#sp-top-wrapper #sp-top1 {
    display: none;
}
#sp-top-wrapper #sp-menu-top {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
#sp-top-wrapper #sp-menu-top .custom {
    text-align: center;
}

/* ---- Главная: слайдер-баннер (js_slideshow) ----
   Слайды - готовые изображения с текстом "внутри", background-size: cover
   (стандарт SPPB) обрезал их по бокам, т.к. пропорции картинки не совпадают
   с пропорциями блока. contain показывает картинку целиком по ширине. */
.addon-root-js-slideshow .sp-background {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: #fff;
}
/* Верхний отступ колонки со слайдером: было 50px (SPPB генерирует
   #column-id-1511190204113{padding:50px 0 0}), делаем 5px. !important,
   т.к. правило SPPB - тот же по силе ID-селектор. */
#column-id-1511190204113 {
    padding-top: 5px !important;
}
/* Стрелки слайдера (bottom_right, icon_only): размер 45x45, иконка по
   центру кнопки (flex, а не line-height - иначе съезжает вниз). Фон -
   непрозрачный светло-серый (не полупрозрачный белый, как было раньше -
   на светлых участках картинки кнопка становилась не видна), при
   наведении - фирменный красный, как на проде. Иконка тёмная на сером
   фоне и белая на красном фоне при наведении. */
#sppb-addon-1784862350334 .sp-nav-control .nav-control {
    width: 45px !important;
    height: 45px !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eaeaea !important;
    border: none !important;
    color: #555555 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}
#sppb-addon-1784862350334 .sp-nav-control .nav-control i {
    color: inherit !important;
}
#sppb-addon-1784862350334 .sp-nav-control .nav-control:hover {
    background: #E3000F !important;
    color: #ffffff !important;
}

/* ---- Главная: карусель товаров (#vina-carousel-home) ---- */

/* Стрелки - были сверху по центру (стандартный owl-theme .owl-nav),
   переносим вниз-вправо и делаем их такими же, как стрелки слайдера
   выше (45x45, светло-серый круг, красный фон при наведении). */
#vina-carousel-home.owl-theme {
    padding-top: 0;
    padding-bottom: 60px;
}
#vina-carousel-home .owl-nav {
    display: flex;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin: 0;
}
#vina-carousel-home .owl-nav:before {
    display: none;
}
#vina-carousel-home .owl-nav [class*="owl-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 0;
    margin: 0 0 0 10px;
    font-size: 18px;
    background: #eaeaea;
    color: #555555;
    border-radius: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}
#vina-carousel-home .owl-nav [class*="owl-"] i {
    display: inline-block;
    color: inherit;
}
#vina-carousel-home .owl-nav [class*="owl-"]:after {
    display: none;
}
#vina-carousel-home .owl-nav [class*="owl-"]:hover {
    background: #E3000F;
    color: #ffffff;
}

/* Карточки товаров одной высоты: у карусели нет общего flex-контейнера
   (owl-carousel позиционирует элементы через transform, а не flex), поэтому
   выравниваем через фиксированные размеры блоков картинки и заголовка -
   тогда высота карточки всегда одинаковая независимо от длины названия. */
#vina-carousel-home .vm-product-media-container {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#vina-carousel-home .image-block,
#vina-carousel-home .image-block > a,
#vina-carousel-home .pro-image {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#vina-carousel-home .browseProductImage {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}
#vina-carousel-home .product-title {
    min-height: 48px;
    max-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Тексты (название/цена) под картинками на одном уровне - см. выше
   фикс. высоты media-контейнера и заголовка; цена всегда сразу под
   двухстрочным блоком заголовка на одинаковом расстоянии. */
#vina-carousel-home .product-price {
    margin-top: 8px;
}

/* Цены красным (было светло-серым #cccccc, плохо читалось), старая
   цена при акции - серая и зачёркнутая, как на проде. */
#vina-carousel-home .product-price > span {
    color: #E3000F;
}
#vina-carousel-home .product-price > span.price-crossed {
    color: #999999;
    text-decoration: line-through;
    font-weight: 400;
}

/* ---- Страница "Награды и дипломы": галерея с попапом ----
   Оригинальный компонент Droppics не совместим с Joomla 5 (падает на
   старом require из com_categories), поэтому вместо него - простая
   HTML/CSS/JS галерея с той же картинкой + подписью, открывающаяся
   в увеличенном виде по клику. */
.awards-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 25px 20px;
    margin-top: 20px;
}
.awards-gallery-item {
    width: calc(25% - 15px);
    text-align: center;
    cursor: pointer;
}
.awards-gallery-thumb {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
}
.awards-gallery-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
}
.awards-gallery-item:hover .awards-gallery-thumb img {
    transform: scale(1.06);
}
.awards-gallery-caption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #E3000F;
}
@media (max-width: 991px) {
    .awards-gallery-item { width: calc(33.333% - 14px); }
}
@media (max-width: 767px) {
    .awards-gallery-item { width: calc(50% - 10px); }
}
@media (max-width: 480px) {
    .awards-gallery-item { width: 100%; }
}
.awards-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 50px;
}
.awards-lightbox-overlay.active {
    display: flex;
}
.awards-lightbox-overlay img {
    max-width: 90vw;
    max-height: 82vh;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.awards-lightbox-caption {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    padding: 0 60px;
}
.awards-lightbox-close {
    position: absolute;
    top: 15px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
}
.awards-lightbox-close:hover {
    color: #E3000F;
}

/* ---- Страница "Вопросы и ответы": аккордеон ----
   Оригинальный шорткод [spoiler]...[/spoiler] рендерился плагином
   bdthemes_shortcodes/shortcode_ultimate - тот несовместим с Joomla 5
   (падает на старом require из com_categories, кладёт весь сайт при
   включении). Заменили на нативные <details>/<summary> - раскрывающийся
   блок работает без единой строчки JS, стрелка поворачивается через CSS. */
.qa-item {
    margin-bottom: 10px;
    border: none;
}
.qa-title {
    list-style: none;
    cursor: pointer;
    background: #f5f5f5;
    border-radius: 3px;
    padding: 12px 20px 12px 35px;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    user-select: none;
}
.qa-title::-webkit-details-marker {
    display: none;
}
.qa-title::marker {
    content: "";
}
.qa-title::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #E3000F;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}
.qa-item[open] .qa-title::before {
    transform: translateY(-50%) rotate(90deg);
}
.qa-content {
    padding: 14px 20px 4px;
}
.qa-content p {
    margin: 0 0 14px;
}

/* ---- Страница товара (бывший VirtueMart, теперь статья): картинка слева,
   название/цена/описание справа, как на проде. Определяем такие статьи по
   наличию .price-label в тексте (это надёжный признак товара). Блок с
   характеристиками/комплектацией (fulltext, начинается с .ast-system-items)
   идёт full-width НИЖЕ, независимо от высоты фото - clear:both. */
article.item-page:has(.price-label) .entry-image.full-image {
    float: left;
    width: 45%;
    max-width: 500px;
    margin: 0 30px 20px 0;
}
article.item-page:has(.price-label) .entry-image.full-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ededed;
}

/* ---- Галерея фото товара (главное фото + миниатюры + попап с увеличением) ----
   См. templates/vina_sofasy/html/layouts/joomla/content/full_image.php -
   ищет соседние по имени файлы (product-alias-01.jpg, -02.jpg...) и строит
   миниатюры автоматически для любой статьи-товара. */
.product-gallery-main {
    cursor: zoom-in;
}
.product-gallery-main-img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ededed;
}
.product-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.product-gallery-thumb {
    width: 70px;
    height: 70px;
    border: 1px solid #ececec;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.product-gallery-thumb img {
    max-width: 100%;
    max-height: 100%;
}
.product-gallery-thumb:hover,
.product-gallery-thumb.active {
    opacity: 1;
    border-color: #E3000F;
}
.product-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 50px;
}
.product-lightbox-overlay.active {
    display: flex;
}
.product-lightbox-overlay img {
    max-width: 90vw;
    max-height: 88vh;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.product-lightbox-close {
    position: absolute;
    top: 15px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
}
.product-lightbox-close:hover {
    color: #E3000F;
}
article.item-page:has(.price-label) .entry-header h2 {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: #202020;
}
article.item-page:has(.price-label) .price-label {
    font-size: 16px;
    color: #999999;
}
article.item-page:has(.price-label) .price-value {
    font-size: 26px;
    color: #E3000F;
    font-weight: 700;
}
article.item-page:has(.price-label) [itemprop="articleBody"] .ast-system-items {
    clear: both;
}
@media (max-width: 767px) {
    article.item-page:has(.price-label) .entry-image.full-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px;
    }
}

/* ---- Товарные страницы (категория-каталог и карточка товара): убираем
   дублирующийся заголовок. Название категории показывается дважды - один
   раз в баннере шаблона #sp-title (серый H2, сразу под хлебными крошками),
   второй раз в родном заголовке Joomla .page-header (красный H1, ниже).
   На проде такого дубля нет - оставляем только красный вариант, серый
   прячем. Ограничиваем товарными страницами через .price-label (метка
   есть только в товарных статьях/категориях). */
body:has(.price-label) #sp-title h1,
body:has(.price-label) #sp-title h2 {
    display: none;
}

/* ---- Страница "Контакты": отступ между хлебными крошками и картинкой ----
   Было ~12px (margin-bottom крошек), нужно ~50px - добавляем разницу
   сверху колонки с картинкой. */
#column-id-1517199327730 {
    margin-top: 38px;
}