/* ========================================================================
   ArtDecoHome Premium Design System
   Template: cassiopeia_artdeco
   Joomla 6.1+
   ======================================================================== */

/* ------------------------------------------------------------------------
   CSS ПЕРЕМЕННЫЕ
------------------------------------------------------------------------- */
:root {
         /* Colors */
    --ad-color-bg: #ffffff;
    --ad-color-text: #1f1f1f;
    --ad-color-muted: #6f6a64;
    --ad-color-menu-bg: #f4f1ec;
    --ad-color-menu-text: #3c2f25;
    --ad-color-footer-bg: #b8aea1;
    --ad-color-accent: #89837b;
    --ad-color-hover: #7c726f;
    --ad-color-border: #e8e3dc;

    /* Typography */
    --ad-font-base: "Inter", sans-serif;
    --ad-font-ui: "Inter", sans-serif;
    
    /* Layout */
    --ad-max-width: 1440px;
    --ad-content-width: 1280px;

    /* Effects */
    --ad-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);

    /* Spacing */
    --ad-space-xs: 0.5rem;
    --ad-space-sm: 1rem;
    --ad-space-md: 2rem;
    --ad-space-lg: 4rem;
    --ad-space-xl: 6rem;
    --ad-space-xxl: 8rem;

    /* Header Icons */
    --ad-header-icon-size: 60px;
    --ad-header-icon-size-tablet: 48px;
    --ad-header-icon-size-mobile: 36px;
    --ad-header-icon-size-small: 28px;
}

/* ------------------------------------------------------------------------
   GLOBAL RESET-СБРОС
------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ad-color-bg);
  color: var(--ad-color-text);
  font-family: var(--ad-font-ui);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--ad-color-hover);
  text-decoration: none;
}
a:not([class]) {
    text-decoration: none;
}

/* ------------------------------------------------------------------------
   TYPOGRAPHY - ШРИФТ
------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 1rem;
    color: var(--ad-color-text);
    font-family: var(--ad-font-base);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.03em;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 2.5rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2.0rem);
}

p {
    margin: 0 0 1.25rem;
    color: var(--ad-color-muted);
}

/* ------------------------------------------------------------------------
  LAYOUT HELPERS - ПОМОЩНИКИ ПО ВЕРСТКЕ
------------------------------------------------------------------------- */
.container {
  max-width: var(--ad-content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-fluid {
  width: 100%;
  padding: 0 2rem;
}

.section-space {
  padding: var(--ad-space-xl) 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
    position: relative;
    background: #f9f7f4;
    z-index: 100;
}
/* --------------------------------------------------------------------------
   ANNOUNCEMENT BAR - ДОСКА ОБЪЯВЛЕНИЙ
   Полноформатные срочные сообщения и рекламные акции
   -------------------------------------------------------------------------- */
.announcement-bar {
    background: #f1f0ed;
    color: #6f6a64;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.announcement-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0.65rem 1.5rem;
    text-align: center;
}
/* Сбрасываем стандартные отступы и задаём цвет всем вложенным элементам */
.announcement-bar,
.announcement-bar .module,
.announcement-bar .moduletable,
.announcement-bar .module-content,
.announcement-bar p,
.announcement-bar span,
.announcement-bar div,
.announcement-bar strong,
.announcement-bar em,
.announcement-bar small,
.announcement-bar a {
    margin: 0;
    color: #6f6a64 !important;
}
/* Ссылки */
.announcement-bar a {
    border-bottom: 1px solid transparent;
}
.announcement-bar a:hover {
    color: #f4f1ec !important;
    border-bottom-color: currentColor;
}
/* ==========================================================
   MOBILE: Announcement Bar
   Улучшаем читаемость текста на телефонах
   ========================================================== */
@media (max-width: 991.98px) {
.announcement-bar {
    padding: 0.75rem 1rem;
}
    .announcement-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
}
    .announcement-bar,
    .announcement-bar a,
    .announcement-bar p,
    .announcement-bar span,
    .announcement-bar strong {
    font-size: 1.4rem !important;   /* 13 px */
    letter-spacing: 0.08em;
    font-weight: 400;
    line-height: 1.5;
}
/* Кнопка "ЗАПИСАТЬСЯ" */
    .announcement-bar .announcement-cta,
    .announcement-bar .btn,
    .announcement-bar .cta-link {
    display: inline-block;
    margin-left: 0.75rem;
    font-size: 1.5rem !important;     /* 12 px */
    font-weight: 600;
    letter-spacing: 0.12em;
    white-space: nowrap;
}
}
/* Для очень маленьких экранов (iPhone SE и т.п.) */
@media (max-width: 480px) {
    .announcement-bar {
    padding: 0.625rem 0.75rem;
}
    .announcement-bar,
    .announcement-bar a,
    .announcement-bar p,
    .announcement-bar span,
    .announcement-bar strong {
    font-size: 1.5rem !important;     /* 12 px */
    letter-spacing: 0.06em;
    line-height: 1.45;
}
    .announcement-bar .announcement-cta,
    .announcement-bar .btn,
    .announcement-bar .cta-link {
    display: block;
    margin: 0.35rem 0 0;
    font-size: 1.5rem !important;
}
}
/* --------------------------------------------------------------------------
   TOP BAR - ВЕРХНЯЯ ПАНЕЛЬ
   Адрес, часы работы, социальные ссылки
   -------------------------------------------------------------------------- */
.topbar {
    background: #f9f7f4;
    border-bottom: 1px solid #f9f7f4;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #6f675f;
}
.topbar-inner {
    max-width: var(--ad-content-width);
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
}
.topbar .module,
.topbar .moduletable {
    margin: 0;
}
.topbar a {
    color: inherit;
    text-decoration: none;
}
.topbar a:hover {
    color: var(--ad-color-accent);
}
.topbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.topbar-separator {
    opacity: 0.5;
}
.topbar-socials {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.topbar-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6f675f;
    text-decoration: none;
}
.topbar-socials a:hover {
    color: var(--ad-color-accent);
}
.topbar-socials svg {
    width: 18px;
    height: 18px;
    display: block;
}
@media (max-width: 991.98px) {
.topbar{
    display: none !important;
}
}

/* ==========================================================
   HEADER MAIN — RH STYLE- ГЛАВНЫЙ ЗАГОЛОВОК
   Logo + Search + Wishlist + Cart + Mobile Toggle
   ----------------------------------------------------------
      Трёхколоночная сетка:
   1fr | auto | 1fr
   Это гарантирует идеальное центрирование логотипа,
   независимо от ширины элементов справа и слева.
     Mobile:
   [ ☰ ]            [ LOGO ]        [ SEARCH ♡ 🛒 ]
   ========================================================== */

/* ----------------------------------------------------------
   HEADER MAIN WRAPPER - ОСНОВНАЯ ОБОЛОЧКА ЗАГОЛОВКА
   ---------------------------------------------------------- */
.header-main {
    position: relative;
    background: #f9f7f4;
    border-bottom: 1px solid #f9f7f4;
    z-index: 100;
}

.header-main-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: var(--ad-max-width);
    margin: 0 auto;
    padding: 1.5rem 2rem;
    gap: 1rem;
}

/* Левая колонка (desktop пустая, mobile содержит hamburger) */
.header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

/* Логотип */
.header-logo {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    z-index: 2;
}

.header-logo img,
.header-logo svg {
    display: block;
    width: auto;
    max-height: 60px;
    margin-top: 1.25rem;
}

.header-logo a,
.header-logo .site-title {
    display: inline-block;
    color: var(--ad-color-text);
    font-family: var(--ad-font-base);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* Правая колонка */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 1.25rem;   /* расстояние между поиском и блоком магазина */
    min-width: 0;
    line-height: 1;
    z-index: 10;
    flex-wrap: nowrap;          /* всегда в одну строку */
}

.header-actions > * {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Единый размер всех иконок */
.header-actions svg, .header-actions img {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}


/* ==========================================================================
   SHOP ACTIONS
   Wishlist + Cart (модуль Joomla Menu)
   ========================================================================== */

.header-shop-actions {
    display: flex;
    align-items: center;
    line-height: 1;
}

.header-shop-actions .mod-menu,
.header-shop-actions ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
    gap: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    line-height: 1;
}

.header-shop-actions li {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    line-height: 1;
}

.header-shop-actions a,
.header-shop-actions span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: var(--ad-color-menu-text);
    text-decoration: none;
}

.header-shop-actions a:hover {
    color: var(--ad-color-accent);
    transform: translateY(-1px);
}

.header-shop-actions svg {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}
/* Общий стиль для иконок header */
.header-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px;
    height: 24px;
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    position: relative;
}
/* Псевдоэлемент для SVG */
.header-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.header-icon:hover::before {
    transform: translateY(-1px);
    opacity: 0.8;
}
/* Корзина */
.header-icon-cart::before {
    background-image: url("/images/icons/cart_artdeco.svg");
}

/* Избранное */
.header-icon-heart::before {
    background-image: url("/images/icons/heart_artdeco.svg");
}
/* ========================================================================
   MOBILE FIX — .header-shop-actions не перекрывает область поиска
   ======================================================================== */
@media (max-width: 1280px) {

    /* Правая группа */
    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    /* Поиск занимает только свою ширину */
    .header-search {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ */
    .header-shop-actions {
        flex: 0 0 auto !important;     /* не растягиваться */
        width: auto !important;        /* только по содержимому */
        max-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Список меню также только по содержимому */
    .header-shop-actions .mod-menu {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Пункты меню */
    .header-shop-actions .mod-menu > li {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ссылки фиксированной ширины */
    .header-shop-actions .mod-menu > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 60px !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
 /* Псевдоэлемент для SVG в мобильной версии*/
.header-icon::before {
    width: 48px;
    height: 48px;
    } 
}
/* ==========================================================================
   MOBILE HAMBURGER
   ========================================================================== */

.mobile-navigation {
    display: none;
    align-items: center;
}

.mobile-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 40px;
    height: 2.5px;
    background: var(--ad-color-menu-text);
}

/* ==========================================================================
   DESKTOP NAVIGATION
   ========================================================================== */

.desktop-navigation {
    display: block;
    background: #f9f7f4;
    border-top: 1px solid #f9f7f4;
    border-bottom: 1px solid #f9f7f4;
}

.desktop-navigation-inner {
    max-width: var(--ad-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.desktop-navigation ul,
.desktop-navigation .mod-menu,
.desktop-navigation .navbar-nav,
.desktop-navigation .nav,
.desktop-navigation .menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 3rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.desktop-navigation ul > li,
.desktop-navigation .mod-menu > li,
.desktop-navigation .navbar-nav > li,
.desktop-navigation .nav > li,
.desktop-navigation .menu > li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.desktop-navigation ul > li > a,
.desktop-navigation ul > li > span {
    display: block !important;
    padding: 1.15rem 0 !important;
    color: var(--ad-color-menu-text) !important;
    font-family: var(--ad-font-ui) !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.desktop-navigation ul > li > a:hover,
.desktop-navigation ul > li > span:hover {
    color: var(--ad-color-accent) !important;
}

.desktop-navigation ul > li.active > a,
.desktop-navigation ul > li.current > a,
.desktop-navigation ul > li > a[aria-current="page"] {
    color: var(--ad-color-accent) !important;
}

/* ==========================================================================
   MOBILE OFFCANVAS
   ========================================================================== */

.mobile-menu-offcanvas {
    width: min(92vw, 75%);
    background: #f9f7f4;
    border-right: 1px solid var(--ad-color-border);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.12);
}

.mobile-menu-offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--ad-color-border);
}

.mobile-menu-logo img,
.mobile-menu-logo svg {
    max-height: 44px;
    width: auto;
    display: block;
}

.mobile-menu-offcanvas .btn-close {
    opacity: 1;
    font-size: 1.3rem;
    padding: 0.5rem;
    margin: 0;
}

.mobile-menu-offcanvas .offcanvas-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.mobile-menu-nav {
    margin-bottom: 2.5rem;
}

.mobile-menu-nav .mod-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu-nav .mod-menu > li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-menu-nav .mod-menu > li > a,
.mobile-menu-nav .mod-menu > li > span {
    display: block;
    padding: 1rem 0;
    color: var(--ad-color-text);
    font-family: var(--ad-font-ui);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.mobile-menu-contacts {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ad-color-border);
    font-size: 1.4rem;
    line-height: 1.9;
    text-transform: uppercase;
    color: var(--ad-color-muted);
}

.mobile-menu-contacts a {
    color: inherit;
}

.mobile-menu-contacts img {
    width: 60px;
    height: 60px;
    display: block;
}
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLETS (до 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .header-main-inner {
        padding: 1.25rem 1.5rem;
    }

    .header-actions {
        gap: 2rem;
    }

    .header-logo img,
    .header-logo svg {
        max-height: 70px;
    }
}

/* --------------------------------------------------------------------------
   MOBILE (до 992px)
   Layout: [☰] [LOGO] [🔍 ♡ 🛒]
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Topbar */
    .topbar {
        display: none !important;
    }

    /* Header Grid */
    .header-main-inner {
        grid-template-columns: auto 1fr auto;
        padding: 1rem;
        gap: 0.75rem;
    }

    /* Hamburger */
    .mobile-navigation {
        display: flex !important;
    }

    /* Logo */
    .header-logo {
        grid-column: 2;
        justify-self: center;
    }

    .header-logo img,
    .header-logo svg {
        max-height: 60px;
    }

    .header-logo a,
    .header-logo .site-title {
        font-size: 1.35rem;
        letter-spacing: 0.18em;
    }

    /* Desktop Navigation Hidden */
    .desktop-navigation {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   VERY SMALL DEVICES (до 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
   
    .header-main-inner {
        padding: 0.875rem;
    }

    .header-logo img,
    .header-logo svg {
        max-height: 46px;
    }

}

/* --------------------------------------------------------------------------
   DESKTOP ONLY (от 992px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .mobile-navigation,
    .mobile-menu-offcanvas {
        display: none !important;
    }
}

/* ========================================================================
   DESKTOP NAVIGATION
   Горизонтальное меню под логотипом (Restoration Hardware style)
   ======================================================================== */

.desktop-navigation {
    display: block;
    background: #f9f7f4;
    border-top: 1px solid #f9f7f4;
    border-bottom: 1px solid #f9f7f4;
}

.desktop-navigation-inner {
    max-width: var(--ad-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Возможные UL-классы Joomla */
.desktop-navigation ul,
.desktop-navigation .mod-menu,
.desktop-navigation .navbar-nav,
.desktop-navigation .nav,
.desktop-navigation .menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 3rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* LI */
.desktop-navigation ul > li,
.desktop-navigation .mod-menu > li,
.desktop-navigation .navbar-nav > li,
.desktop-navigation .nav > li,
.desktop-navigation .menu > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Ссылки верхнего уровня */
.desktop-navigation ul > li > a,
.desktop-navigation ul > li > span,
.desktop-navigation .mod-menu > li > a,
.desktop-navigation .mod-menu > li > span {
    display: block !important;
    padding: 1.15rem 0 !important;
    color: var(--ad-color-menu-text) !important;
    font-family: var(--ad-font-ui) !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.desktop-navigation ul > li > a:hover,
.desktop-navigation ul > li > span:hover,
.desktop-navigation .mod-menu > li > a:hover,
.desktop-navigation .mod-menu > li > span:hover {
    color: var(--ad-color-accent) !important;
}

.desktop-navigation ul > li.active > a,
.desktop-navigation ul > li.current > a,
.desktop-navigation ul > li > a[aria-current="page"],
.desktop-navigation .mod-menu > li.active > a,
.desktop-navigation .mod-menu > li.current > a,
.desktop-navigation .mod-menu > li > a[aria-current="page"] {
    color: var(--ad-color-accent) !important;
}

/* Скрываем на мобильных */
@media (max-width: 991.98px) {
    .desktop-navigation {
        display: none !important;
    }
}

/* ========================================================================
   MOBILE OFFCANVAS MENU
   Премиальное мобильное меню
   ======================================================================== */

@media (max-width: 991.98px) {

    /* Контейнер offcanvas */
    .mobile-menu-offcanvas {
        width: min(92vw, 75%) !important;
        background: #f9f7f4;
        border-right: 1px solid var(--ad-color-border);
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.12);
    }

    /* Header */
    .mobile-menu-offcanvas .offcanvas-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 1.5rem 1.25rem;
        border-bottom: 1px solid var(--ad-color-border);
    }

    /* Логотип */
    .mobile-menu-logo img,
    .mobile-menu-logo svg {
        display: block;
        width: auto;
        max-height: 44px;
    }

    /* Кнопка закрытия */
    .mobile-menu-offcanvas .btn-close {
        margin: 0;
        padding: 0.5rem;
        opacity: 1;
        font-size: 1.3rem;
    }

    /* Body */
    .mobile-menu-offcanvas .offcanvas-body {
        padding: 1.5rem;
        overflow-y: auto;
    }

    /* --------------------------------------------------------------------
       MOBILE NAVIGATION
       -------------------------------------------------------------------- */
    .mobile-menu-nav {
        margin-bottom: 2.5rem;
    }

    .mobile-menu-nav .mod-menu {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-menu-nav .mod-menu > li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .mobile-menu-nav .mod-menu > li > a,
    .mobile-menu-nav .mod-menu > li > span {
        display: block;
        padding: 1rem 0;
        color: var(--ad-color-text);
        font-family: var(--ad-font-ui);
        font-size: 1.7rem;
        font-weight: 300;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
    }

    /* --------------------------------------------------------------------
       CTA BUTTONS
       -------------------------------------------------------------------- */
    .mobile-menu-cta {
        margin-bottom: 1rem;
    }

    .mobile-menu-cta a,
    .mobile-menu-cta .btn {
        display: block;
        width: 100%;
        padding: 1rem 1.25rem;
        border: 1px solid var(--ad-color-accent);
        background: var(--ad-color-accent);
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.75rem;
        font-weight: 600;
    }

    /* --------------------------------------------------------------------
       CONTACTS
       -------------------------------------------------------------------- */
    .mobile-menu-contacts {
        margin-top: 2.5rem;
        padding-top: 2rem;
        border-top: 1px solid var(--ad-color-border);
        font-size: 1.4rem;
        line-height: 1.9;
        color: var(--ad-color-muted);
        text-transform: uppercase;
    }

    .mobile-menu-contacts a {
        color: inherit;
        text-decoration: none;
    }

    .mobile-menu-contacts img {
        display: block;
        width: 60px;
        height: 60px;
    }
}

/* На desktop скрываем offcanvas */
@media (min-width: 992px) {
    .mobile-menu-offcanvas {
        display: none !important;
    }
}

/* ========================================================================
   RH-STYLE HEADER SEARCH
   Desktop: поле раскрывается ВЛЕВО от иконки лупы
   Tablet/Mobile (<=1280px): панель открывается под header во всю ширину
   ======================================================================== */

/* Контейнер поиска в правой группе */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Общий контейнер поиска */
.rh-search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Кнопка-лупа */
.rh-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--ad-color-menu-text);
    cursor: pointer;
    line-height: 1;
}
.rh-search-toggle:hover {
    color: var(--ad-color-accent);
    transform: translateY(-1px);
}

.rh-search-toggle svg {
    width: 48px;
    height: 48px;
    display: block;
    flex-shrink: 0;
    transform: translateY(13px);
}
.rh-search-panel form {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
}
/* Панель поиска (desktop) */
.rh-search-panel {
    position: absolute;
    top: 50%;
    right: calc(100% + 1rem);
    left: auto;
    transform: translateY(-50%);
    width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 50;
}

/* Открытое состояние */
.rh-search.is-open .rh-search-panel {
    width: 280px;
    opacity: 1;
    visibility: visible;
}

/* Поле ввода */
.rh-search-panel input[type="text"],
.rh-search-panel input[type="search"] {
    width: 100%;
    height: 46px;
    padding: 0 1rem;
    border: 1px solid var(--ad-color-border);
    background: #ffffff;
    color: var(--ad-color-text);
    font-size: 0.95rem;
    box-shadow: none;
    outline: none;
}

/* По умолчанию скрываем кнопку submit (desktop) */
.rh-search-panel button,
.rh-search-panel input[type="submit"],
.rh-search-panel .btn {
    display: none !important;
}

/* ========================================================================
   MOBILE / TABLET HEADER SEARCH
   Поиск раскрывается под header во всю ширину
   ======================================================================== */
@media (max-width: 1280px) {

    /* Поиск должен быть привязан к header */
    .header-search {
        position: static;
    }

    .header-search .rh-search {
        position: static;
    }

    /* Панель поиска */
    .header-search .rh-search-panel {
        position: absolute !important;
        top: 100%;
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: none !important;
        padding: 1rem;
        background: #f9f7f4;
        border-top: 1px solid var(--ad-color-border);
        border-bottom: 1px solid var(--ad-color-border);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        opacity: 0;
        visibility: hidden;
        overflow: visible;
        pointer-events: none;
        transform: translateY(-8px);
   }

    /* Открытое состояние */
    .header-search .rh-search.is-open .rh-search-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Форма */
    .header-search .rh-search-panel form {
        display: flex;
        align-items: stretch;
        gap: 0.75rem;
        width: 100%;
        margin: 0;
    }

    /* Поле ввода */
    .header-search .rh-search-panel input[type="text"],
    .header-search .rh-search-panel input[type="search"] {
        flex: 1 1 auto;
        width: auto !important;
        height: 48px;
        padding: 0 1rem;
        border: 1px solid var(--ad-color-border);
        background: #ffffff;
        color: var(--ad-color-text);
        font-size: 1rem;
        box-shadow: none;
        outline: none;
    }
    /* Кнопка "НАЙТИ" */
    .header-search .rh-search-panel button,
    .header-search .rh-search-panel input[type="submit"],
    .header-search .rh-search-panel .btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: static !important;
        width: auto !important;
        min-width: 110px;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 1.5rem !important;
        border: 1px solid var(--ad-color-accent) !important;
        background: var(--ad-color-accent) !important;
        color: #ffffff !important;
        clip: auto !important;
        clip-path: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        box-shadow: none;
    }

    .header-search .rh-search-panel button:hover,
    .header-search .rh-search-panel input[type="submit"]:hover,
    .header-search .rh-search-panel .btn:hover {
        background: var(--ad-color-hover) !important;
        border-color: var(--ad-color-hover) !important;
        color: #ffffff !important;
        transform: none;
    }
  .rh-search-toggle svg {
    width: 90px;
    height: 90px;
    display: block;
    flex-shrink: 0;
    transform: translateY(25px);
}
}

/* ========================================================================
   SMALL MOBILE DEVICES
   ======================================================================== */
@media (max-width: 576px) {

    .header-search .rh-search-panel {
        padding: 0.75rem;
    }

    .header-search .rh-search-panel form {
        gap: 0.5rem;
    }

    .header-search .rh-search-panel input[type="text"],
    .header-search .rh-search-panel input[type="search"] {
        height: 44px;
        font-size: 0.95rem;
    }

    .header-search .rh-search-panel button,
    .header-search .rh-search-panel input[type="submit"],
    .header-search .rh-search-panel .btn {
        min-width: 96px;
        height: 44px !important;
        padding: 0 1.25rem !important;
        font-size: 0.7rem;
        letter-spacing: 0.06em;
    }
}
/* ========================================================================
   ARTDECO CONTENT - СТАТЬИ
   Красивое оформление статей
   ======================================================================== */
.mod-list li a, .page-header a {
    color: inherit;
    text-decoration: none;
}
.mod-list li a:hover, .page-header a:hover{
    color: var(--ad-color-hover);
    text-decoration: none;
}   
/* ========================================================================
   ARTDECO PREMIUM CONTENT LAYOUT (COM_CONTENT)
   Красивое оформление статей Joomla в стиле luxury editorial
   ======================================================================== */

/* Общий контейнер статьи */
.com-content-article.item-page {
    max-width: 100%;
    background: #ffffff;
}

/* Ограничиваем комфортную ширину текста */
.com-content-article.item-page .page-header,
.com-content-article.item-page .page-body,
.com-content-article.item-page .com-content-article__body,
.com-content-article.item-page .content-category,
.com-content-article.item-page p,
.com-content-article.item-page h1,
.com-content-article.item-page h2,
.com-content-article.item-page h3,
.com-content-article.item-page h4,
.com-content-article.item-page ul,
.com-content-article.item-page ol,
.com-content-article.item-page blockquote {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Заголовок статьи */
.com-content-article.item-page .page-header {
    margin-top: 3rem;
    margin-bottom: 2.5rem;
}

/* H1 */
.com-content-article.item-page h1, .page-header h1 {
    margin-top: 0;
    margin-bottom: 2rem;
    text-align: center;
}

/* H2 */
.com-content-article.item-page h2, .page-header h2 {
    margin-top: 4rem;
    margin-bottom: 1.5rem;
}

/* H3 */
.com-content-article.item-page h3, .page-header h3 {
    margin-top: 3rem;
    margin-bottom: 1.25rem;
}

/* Параграфы */
.com-content-article.item-page p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--ad-color-muted);
    margin-bottom: 1.5rem;
}

/* Списки */
.com-content-article.item-page ul,
.com-content-article.item-page ol {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    color: var(--ad-color-muted);
    line-height: 1.9;
}

.com-content-article.item-page li {
    margin-bottom: 0.5rem;
}

/* Изображения внутри текста */
.com-content-article.item-page img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: var(--ad-radius-lg);
}

/* Подписи к изображениям */
.com-content-article.item-page figcaption {
    max-width: 820px;
    margin: -2rem auto 2.5rem;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--ad-color-muted);
}

/* Цитаты */
.com-content-article.item-page blockquote {
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: 2rem 2.5rem;
    border-left: 2px solid var(--ad-color-accent);
    background: #f9f7f4;
    font-style: italic;
}

.com-content-article.item-page blockquote p:last-child {
    margin-bottom: 0;
}

/* Таблицы */
.com-content-article.item-page table {
    width: 100%;
    max-width: 820px;
    margin: 3rem auto;
    border-collapse: collapse;
}

.com-content-article.item-page th,
.com-content-article.item-page td {
    padding: 1rem;
    border: 1px solid var(--ad-color-border);
    text-align: left;
}

/* Метаданные статьи */
.com-content-article.item-page .article-info {
    max-width: 820px;
    margin: 0 auto 2rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ad-color-muted);
}

/* Навигация между статьями */
.com-content-article.item-page .pager {
    max-width: 820px;
    margin: 4rem auto;
}

/* ========================================================================
   MOBILE CONTENT TYPOGRAPHY
   ======================================================================== */
@media (max-width: 991.98px) {

    .com-content-article.item-page .page-header,
    .com-content-article.item-page .page-body,
    .com-content-article.item-page .com-content-article__body,
    .com-content-article.item-page .content-category,
    .com-content-article.item-page p,
    .com-content-article.item-page h1,
    .com-content-article.item-page h2,
    .com-content-article.item-page h3,
    .com-content-article.item-page h4,
    .com-content-article.item-page ul,
    .com-content-article.item-page ol,
    .com-content-article.item-page blockquote {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .com-content-article.item-page p {
        font-size: 1.4rem;
        line-height: 1.85;
    }

    .com-content-article.item-page blockquote {
        padding: 1.5rem;
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

/* ========================================================================
   SMALL MOBILE DEVICES
   ======================================================================== */
@media (max-width: 576px) {

    .com-content-article.item-page .page-header {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .com-content-article.item-page p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .com-content-article.item-page h2 {
        margin-top: 3rem;
    }

    .com-content-article.item-page blockquote {
        padding: 1.25rem;
    }
}

/* ========================================================================
   ARTDECO FOOTER — PREMIUM SHOWROOM STYLE
   Элегантный многоуровневый footer в стиле Restoration Hardware
   ======================================================================== */

/* ------------------------------------------------------------------------
   FOOTER BASE
   ------------------------------------------------------------------------ */
.site-footer {
    background: var(--ad-color-footer-bg);
    color: #ffffff;
    margin-top: var(--ad-space-xxl);
}

.site-footer a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff;
    opacity: 1;
}

/* ------------------------------------------------------------------------
   FOOTER TOP
   Три колонки: навигация, услуги, контакты
   ------------------------------------------------------------------------ */
.footer-top {
    padding: 5rem 0 3rem;
}

.footer-top .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

/* Модули */
.footer-top .module,
.footer-top .moduletable {
    margin: 0;
}

/* Заголовки модулей */
.footer-top h3,
.footer-top .module-title {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
}

/* Списки */
.footer-top ul,
.footer-top .mod-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-top li {
    margin: 0 0 0.65rem;
}

/* Ссылки */
.footer-top a {
    display: inline-block;
    opacity: 0.78;
    line-height: 1.7;
}

/* ------------------------------------------------------------------------
   FOOTER MIDDLE
   Логотип + философия бренда + CTA
   ------------------------------------------------------------------------ */
.footer-middle {
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.footer-middle .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Логотип */
.footer-middle img {
    max-height: 60px;
    width: auto;
    opacity: 0.92;
}

/* Текст */
.footer-middle p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* CTA-кнопка */
.footer-middle .btn,
.footer-middle a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-middle .btn:hover,
.footer-middle a.button:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
}

/* ------------------------------------------------------------------------
   FOOTER BOTTOM
   Copyright + legal links + socials
   ------------------------------------------------------------------------ */
.footer-bottom {
    padding: 2rem 0;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.7);
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    margin: 0;
    color: inherit;
}

/* Социальные ссылки */
.footer-bottom .social-links,
.footer-bottom .footer-socials {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-bottom .social-links a,
.footer-bottom .footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-bottom svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {

    .footer-top {
        padding: 4rem 0 2.5rem;
    }

    .footer-top .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .footer-middle {
        padding: 2.5rem 0;
    }

    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }
}

/* ------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------ */
@media (max-width: 576px) {

    .footer-top {
        padding: 3rem 0 2rem;
    }

    .footer-top .container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-top h3,
    .footer-top .module-title {
        margin-bottom: 1rem;
    }

    .footer-middle {
        padding: 2rem 0;
    }

    .footer-middle img {
        max-height: 52px;
    }

    .footer-middle p {
        font-size: 0.9rem;
    }

    .footer-middle .btn,
    .footer-middle a.button {
        width: 100%;
        max-width: 320px;
    }

    .footer-bottom {
        padding: 1.5rem 0;
        font-size: 0.75rem;
    }
}

/* ========================================================================
   UTILITY CLASSES
   Вспомогательные классы для премиальной верстки
   ======================================================================== */

/* ------------------------------------------------------------------------
   VISUALLY HIDDEN
   Для SEO и accessibility
   ------------------------------------------------------------------------ */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* ------------------------------------------------------------------------
   TEXT HELPERS
   ------------------------------------------------------------------------ */
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-muted {
    color: var(--ad-color-muted) !important;
}

/* ------------------------------------------------------------------------
   DISPLAY HELPERS
   ------------------------------------------------------------------------ */
.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

.d-block {
    display: block !important;
}

.d-inline-block {
    display: inline-block !important;
}

/* ------------------------------------------------------------------------
   FLEX HELPERS
   ------------------------------------------------------------------------ */
.align-center {
    align-items: center !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.gap-sm {
    gap: var(--ad-space-sm) !important;
}

.gap-md {
    gap: var(--ad-space-md) !important;
}

.gap-lg {
    gap: var(--ad-space-lg) !important;
}

/* ------------------------------------------------------------------------
   SPACING HELPERS
   ------------------------------------------------------------------------ */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

.section-space-sm {
    padding: var(--ad-space-lg) 0;
}

.section-space-md {
    padding: var(--ad-space-xl) 0;
}

.section-space-lg {
    padding: var(--ad-space-xxl) 0;
}

/* ------------------------------------------------------------------------
   PREMIUM DIVIDERS
   ------------------------------------------------------------------------ */
.divider {
    width: 100%;
    height: 1px;
    background: var(--ad-color-border);
}

.divider-accent {
    width: 60px;
    height: 1px;
    margin: 0 auto;
    background: var(--ad-color-accent);
}

/* ------------------------------------------------------------------------
   PREMIUM CARDS
   ------------------------------------------------------------------------ */
.card-premium {
    background: #ffffff;
    border: 1px solid var(--ad-color-border);
    box-shadow: var(--ad-shadow-soft);
}

.card-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------------------
   IMAGE HOVER EFFECT
   ------------------------------------------------------------------------ */
.image-zoom {
    overflow: hidden;
}

.image-zoom img {
}

.image-zoom:hover img {
    transform: scale(1.04);
}

/* ------------------------------------------------------------------------
   BUTTON HELPERS
   ------------------------------------------------------------------------ */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    border: 1px solid var(--ad-color-accent);
    background: transparent;
    color: var(--ad-color-menu-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.btn-premium:hover {
    background: var(--ad-color-accent);
    color: #ffffff;
    border-color: var(--ad-color-accent);
}

.btn-premium-filled {
    background: var(--ad-color-accent);
    color: #ffffff;
}

.btn-premium-filled:hover {
    background: var(--ad-color-hover);
    border-color: var(--ad-color-hover);
}

/* ------------------------------------------------------------------------
   RESPONSIVE HELPERS
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .hide-mobile {
        display: none !important;
    }

    .btn-premium,
    .btn-premium-filled {
        width: 100%;
        max-width: 320px;
    }
}

/* ========================================================================
   END OF FILE
   Template: cassiopeia_artdeco
   CMS: Joomla 6.1+
   Architecture: Child Template of Cassiopeia
   Design Language: Restoration Hardware Inspired Luxury
   E-commerce: JoomShopping
   ======================================================================== */

/* ==========================================================================
   CATALOG MENU (JOOMLA 6 / Cassiopeia / Menu Module)
   Позиция: catalog-menu
   HTML-структура:

   <section class="fullwidth-catalog">
       <div class="grid-child catalog-menu">
           <ul class="mod-menu mod-menu-list nav catalog">
               <li class="nav-item ...">
                   <a href="...">
                       <img ...>
                       <span class="image-title">Обои</span>
                   </a>
               </li>
           </ul>
       </div>
   </section>
   ========================================================================== */

/* --------------------------------------------------------------------------
   CATALOG-MENU
   -------------------------------------------------------------------------- */
.fullwidth-catalog {
    width: 100%;
    background: #b8aea1;
}
.catalog-menu .mod-menu {
    align-items: stretch;
}
.catalog-menu li {
    min-height: 151px;
}
/* --------------------------------------------------------------------------
   GRID CHILD (Cassiopeia standard container)
   -------------------------------------------------------------------------- */
.grid-child.catalog-menu {
    width: 100%;
    max-width: var(--ad-content-width, 1280px);
    margin: 0 auto;
    padding: 1.25rem;
    background: #b8aea1;
}

/* --------------------------------------------------------------------------
   ROOT UL (.mod-menu.mod-menu-list.nav.catalog)
   Joomla Menu Module
   -------------------------------------------------------------------------- */
.grid-child.catalog-menu > .mod-menu,
.grid-child.catalog-menu > ul.mod-menu,
.grid-child.catalog-menu > .mod-menu.mod-menu-list,
.grid-child.catalog-menu > .mod-menu.mod-menu-list.nav.catalog {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr); /* Desktop: 8 карточек в один ряд */
    gap: 1.5rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    justify-content: center;   /* центрируем всю сетку */
    justify-items: center;     /* центрируем содержимое каждой ячейки */
    align-items: start;
}
.mod-menu.mod-list.nav.catalog{
    justify-content: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
/* --------------------------------------------------------------------------
   LI (.nav-item)
   -------------------------------------------------------------------------- */
.grid-child.catalog-menu > .mod-menu > li,
.grid-child.catalog-menu > ul.mod-menu > li,
.grid-child.catalog-menu > .mod-menu.mod-menu-list > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* --------------------------------------------------------------------------
   LINK CARD
   -------------------------------------------------------------------------- */
.grid-child.catalog-menu > .mod-menu > li > a,
.grid-child.catalog-menu > ul.mod-menu > li > a,
.grid-child.catalog-menu > .mod-menu.mod-menu-list > li > a,
.grid-child.catalog-menu > .mod-menu > li > span {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    color: #3c2f25;
    line-height: 1.2;
}

/* Hover effect */
.grid-child.catalog-menu > .mod-menu > li > a:hover {
    color: #6e635b;
}

/* --------------------------------------------------------------------------
   IMAGE
   -------------------------------------------------------------------------- */
.grid-child.catalog-menu > .mod-menu > li > a img {
    width: 100%;
    display: block;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Image hover */
.grid-child.catalog-menu > .mod-menu > li > a:hover img {
   -webkit-filter: contrast(115%);
}

/* --------------------------------------------------------------------------
   TITLE (.image-title)
   -------------------------------------------------------------------------- */
.grid-child.catalog-menu .image-title {
    display: block;
    margin-top: 0.9rem;
    font-family: var(--ad-font-ui);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #3c2f25;
}
.grid-child.catalog-menu .image-title:hover{
    font-weight: 500;
    color: var(--ad-color-accent) !important;
}
/* --------------------------------------------------------------------------
   ACTIVE MENU ITEM
   -------------------------------------------------------------------------- */
.grid-child.catalog-menu > .mod-menu > li.active > a,
.grid-child.catalog-menu > .mod-menu > li.current > a {
    color: var(--ad-color-accent, #89837b);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .grid-child.catalog-menu > .mod-menu,
    .grid-child.catalog-menu > ul.mod-menu {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    justify-content: center;   /* центрируем всю сетку */
    justify-items: center;     /* центрируем содержимое каждой ячейки */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto !important;
    }
    .mod-menu.mod-list.nav.catalog{
    justify-content: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

/* --------------------------------------------------------------------------
   Mobile
   2 ряда по 4 карточки
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .grid-child.catalog-menu > .mod-menu,
    .grid-child.catalog-menu > ul.mod-menu {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.9rem;
    }

    .grid-child.catalog-menu .image-title {
        margin-top: 0.55rem;
        font-size: 1.1rem;
        letter-spacing: 0.03em;
        line-height: 1.15;
    }

    .grid-child.catalog-menu > .mod-menu > li > a img {
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    }
}

/* --------------------------------------------------------------------------
   Small Mobile (iPhone)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .grid-child.catalog-menu {
        padding: 0 0.75rem;
    }
    .grid-child.catalog-menu > .mod-menu,
    .grid-child.catalog-menu > ul.mod-menu {
        gap: 0.6rem;
    }
    .grid-child.catalog-menu .image-title {
        font-size: 0.62rem;
        letter-spacing: 0.025em;
    }
}

/* --------------------------------------------------------------------------
   Very Small Devices
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .grid-child.catalog-menu .image-title {
        font-size: 0.56rem;
    }
}   

/* --------------------------------------------------------------------------
   SLIDER
   -------------------------------------------------------------------------- */
.fullwidth-slider {
    width: 100%;
    padding: 0.5rem 0;
    background: #f9f7f4;
    border-bottom: 1px solid #f9f7f4;
}

/* ==========================================================================
   HOMEPAGE FEATURED BANNERS
   Premium Editorial Banner System
   ========================================================================== */

.homepage-featured-banners {
    background: #f9f7f4;
}

.homepage-featured-banners-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* GRID */

.featured-banner-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: repeat(2, 460px);
    gap: 1.5rem;
}

/* LEFT LARGE */

.featured-banner-large {
    grid-row: span 2;
}
/* RIGHT SMALL */
.featured-banner-small{
}

/* CARD */

.featured-banner {
    position: relative;
    overflow: hidden;
    background: #000;
}

.featured-banner-link {
    display: block;
    width: 100%;
    height: 100%;
    color: #ffffff;
    text-decoration: none;
}

/* IMAGE */

.featured-banner-image {
    position: absolute;
    inset: 0;
}

.featured-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DARK OVERLAY */

.featured-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(77,67,57,0.74) 0%,
            rgba(77,67,57,0.18) 45%,
            rgba(77,67,57,0.08) 100%
        );
    z-index: 1;
}

/* CONTENT */

.featured-banner-content {
    position: absolute;
    left: 3rem;
    bottom: 3rem;
    z-index: 2;
    max-width: 520px;
}

/* LABEL */

.featured-banner-label {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

/* TITLE */

.featured-banner h2 {
    margin: 0 0 1rem;
    color: #ffffff;
    font-size: clamp(2rem, 3vw, 2rem);
    line-height: 1.1;
}

/* TEXT */

.featured-banner p {
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,0.84);
    font-size: 1rem;
    line-height: 1.7;
}

/* CTA */

.featured-banner-cta {
    display: inline-block;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.7);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* HOVER */

.featured-banner-image img {
    transition:
        transform 0.9s ease,
        opacity 0.4s ease;
}

.featured-banner:hover img {
    transform: scale(1.04);
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 991.98px) {

    .featured-banner-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .featured-banner-large {
        grid-row: auto;
    }

    .featured-banner {
        min-height: 520px;
    }

    .featured-banner-content {
        left: 2rem;
        right: 2rem;
        bottom: 2rem;
    }
    .featured-banner-label {
    font-size: 1.3rem;
    }
    .featured-banner h2 {
    font-size: clamp(3rem, 3vw, 3.5rem);
    }
    .featured-banner p {
    font-size: 1.2rem;
    }
    
    .featured-banner-cta {
    font-size: 0.95rem;
    }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 576px) {

    .homepage-featured-banners {
        padding: 2rem 0;
    }

    .homepage-featured-banners-inner {
        padding: 0 1rem;
    }

    .featured-banner {
        min-height: 420px;
    }

    .featured-banner-content {
        left: 1.5rem;
        right: 1.5rem;
        bottom: 1.5rem;
    }
 
    .featured-banner h2 {
        font-size: 2rem;
    }

    .featured-banner p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* ==========================================================================
   HOMEPAGE JOURNAL
   Новости и текущие акции
   ========================================================================== */
.homepage-journal-header {
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
/* SECTION */
.homepage-journal.card {
    width: 100%;
    margin-top: 7rem;
    padding: 5rem;
    background: #f7f4ef;
}
/* SECTION TITLE */
.homepage-journal h3 {
    margin-bottom: 2rem;
    font-size: clamp(2rem, 4vw, 2rem);
    font-weight: 400;
    line-height: 1.05;
}
/* IMAGE */
.homepage-journal .item-image {
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.homepage-journal .item-image img {
    object-fit: cover;
    transition: transform 1.6s ease;
}
.homepage-journal .mod-articles-item:hover img {
    transform: scale(1.03);
}
/* DATE */
.homepage-journal .mod-articles-date {
    margin-bottom: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8f877d;
}

/* LIMIT TEXT */
.homepage-journal .mod-articles-item p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 991.98px) {

    .homepage-journal .mod-articles-items {
        grid-template-columns: 1fr !important;
    }
    .homepage-journal h3 {
        font-size: 3rem;
    }

}


/*Пагинация чтобы влезала в мобильной версии в одну строку 10 стр. */
@media (max-width: 500px){
.pagination {
    --pagination-padding-x: 0.375rem;
    --pagination-padding-y: 0.375rem;
}
}
.jshop_img:hover {
    -webkit-filter: contrast(115%);
}

.jshop_list_product .block_product:hover{
    border-radius: 0;
    box-shadow: none;
}
/*Кнопка "Далее" при оплате и кнопка "Теги" */
.btn-success, .btn-info {
    --btn-color: #fff;
    --btn-bg: #b8aea1;
    --btn-border-color: #b8aea1;
    --btn-hover-color: #fff;
    --btn-hover-bg: #7c726f;
    --btn-hover-border-color: #7c726f;
    --btn-focus-shadow-rgb: 96,150,96;
    --btn-active-color: #fff;
    --btn-active-bg: #655b55;
    --btn-active-border-color: #534c44;
    --btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #655549;
    --btn-disabled-border-color: #655549;
}
.btn:hover {
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    color: var(--btn-hover-color);
}
/*Убираем галочку "<" на кнопке Подробнее*/
span.icon-chevron-right{
  display: none;
}

/*Меню с сылками и личным кабинетом*/
.lincs{
}
.active>.page-link, .page-link.active {
    background-color: #7c726f;
    border-color: #504a48;
}

@media (max-width: 991px){
.btn-primary:hover{
    background-color: #7c726f;
    border-color: #7c726f;
}
.btn-primary{
  border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.inputbox{
    max-width: 100%;
    background-color: #fefefe;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: .6rem 1rem;
    line-height: 1.5;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
label.finder{
    display: none;
}
}

/*Меню БРЕНДЫ*/
.card-header {
    color: #3c2f25;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}
/*Конструктор форм- кнопка ВАША ЗАЯВКА ПРИНЯТА!*/
.convertforms.cf-success .cf-response{
    background-color: #6a774a;
    display: block;
}

/* HARD KILL JoomShopping copyright everywhere */
body #mxcpr,
.com-jshopping #mxcpr,
div#footer #mxcpr,
span#mxcpr{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
}
.com-jshopping span#mxcpr,
.com-jshopping .jshop_footer,
.com-jshopping [id="mxcpr"] {
    display: none !important;
}
.breadcrumb, .breadcrumbs, nav.mod-breadcrumbs__wrapper {
  background: #f1f0ed;
  padding: 0.5rem 0;
}