/* 
 * Custom theme classes for volib.com.ua
 * This file contains custom CSS classes that override or extend UIKit
 * Loaded after all other CSS files
 */

/* ========================================================================
   Custom Fonts - @font-face Declarations
 ========================================================================== */

/* 
 * Пример подключения кастомных шрифтов из папки /fonts/
 * Раскомментируйте и настройте под ваши шрифты
 */

/* 
   Пример 1: Подключение одного шрифта с разными начертаниями
   
   @font-face {
       font-family: 'CustomSans';
       src: url('/fonts/CustomSans-Regular.woff2') format('woff2'),
            url('/fonts/CustomSans-Regular.woff') format('woff');
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
       font-family: 'CustomSans';
       src: url('/fonts/CustomSans-Bold.woff2') format('woff2'),
            url('/fonts/CustomSans-Bold.woff') format('woff');
       font-weight: 700;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
       font-family: 'CustomSans';
       src: url('/fonts/CustomSans-Italic.woff2') format('woff2'),
            url('/fonts/CustomSans-Italic.woff') format('woff');
       font-weight: 400;
       font-style: italic;
       font-display: swap;
   }
*/

/* 
   Пример 2: Подключение шрифта для заголовков
   
   @font-face {
       font-family: 'DisplayFont';
       src: url('/fonts/DisplayFont-Bold.woff2') format('woff2'),
            url('/fonts/DisplayFont-Bold.woff') format('woff');
       font-weight: 700;
       font-style: normal;
       font-display: swap;
   }
*/

/* 
   Пример 3: Подключение Variable Font (современный формат)
   
   @font-face {
       font-family: 'InterVariable';
       src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
       font-weight: 100 900;
       font-style: normal;
       font-display: swap;
   }
*/

/* 
   После подключения используйте шрифты в переменных ниже:
   
   :root {
       --theme-font-family-heading: 'DisplayFont', sans-serif;
       --theme-font-family-body: 'CustomSans', -apple-system, sans-serif;
   }
*/

/* ========================================================================
   Roboto — единственный шрифт сайта (загружен локально, /fonts/Roboto/)
   Подмножества: cyrillic, cyrillic-ext, latin, latin-ext
   Начертания: 400 (regular), 500 (medium), 700 (bold) + 400 italic
   Источник файлов: @fontsource/roboto (woff2)
 ========================================================================== */

/* roboto-400 - normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-cyrillic-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* roboto-500 - normal (medium) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-cyrillic-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* roboto-700 - normal (bold) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-cyrillic-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* roboto-400 - italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-cyrillic-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-cyrillic-400-italic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/roboto-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========================================================================
   CSS Variables - Theme Colors
 ========================================================================== */
:root {
    /* ===== Brand palette (см. css-палитру) =====
       Primary #455A64 | Secondary #4FC3F7 | Tertiary #EF5350 | Neutral #777778 */

    /* Primary (slate blue-grey) */
    --theme-primary: #455A64;
    --theme-primary-hover: #37474F;
    --theme-primary-active: #263238;

    /* Secondary (light blue) */
    --theme-secondary: #4FC3F7;
    --theme-secondary-hover: #29B6F6;
    --theme-secondary-active: #03A9F4;
    --theme-secondary-dark: #0277BD;   /* для текста/ссылок на светлом фоне */

    /* Tertiary (red) — используется и как danger */
    --theme-tertiary: #EF5350;
    --theme-tertiary-hover: #E53935;
    --theme-tertiary-active: #D32F2F;

    /* Neutral (grey) */
    --theme-neutral: #777778;
    --theme-neutral-hover: #616162;
    --theme-neutral-active: #4D4D4E;

    /* Success (вне основной палитры, для статусов/форм) */
    --theme-success: #32d296;
    --theme-success-hover: #2ec487;
    --theme-success-active: #29b378;

    /* Warning (вне основной палитры, для статусов/форм) */
    --theme-warning: #faa05a;
    --theme-warning-hover: #f98f43;
    --theme-warning-active: #f77f2c;

    /* Danger = Tertiary */
    --theme-danger: var(--theme-tertiary);
    --theme-danger-hover: var(--theme-tertiary-hover);
    --theme-danger-active: var(--theme-tertiary-active);

    /* Text colors */
    --theme-text-primary: #2e2e2e;
    --theme-text-secondary: #5a5a5a;
    --theme-text-muted: var(--theme-neutral);

    /* Background colors */
    --theme-bg-default: #fff;
    --theme-bg-muted: #f5f6f8;
    --theme-bg-primary: var(--theme-primary);
    --theme-bg-secondary: #263238;

    /* Border colors */
    --theme-border-default: #e2e5e8;

    /* Link colors */
    --theme-link-color: var(--theme-secondary-dark);
    --theme-link-hover: var(--theme-primary);
    --theme-link-heading: var(--theme-tertiary);

    /* Header/Navbar colors (белое меню — тёмные ссылки, акцент slate) */
    --theme-header-link-color: var(--theme-text-secondary);
    --theme-header-link-hover-color: var(--theme-primary);
    --theme-header-link-active-color: var(--theme-primary);
    --theme-header-bg-color: #ffffff;
    
    /* ========================================================================
       Typography - Font Families
     ========================================================================== */
    
    /* === Base Font Stacks === */
    
    /* Primary font stack — Roboto (единственный шрифт сайта) */
    --theme-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    
    /* Monospace font for code */
    --theme-font-family-mono: Consolas, monaco, monospace;
    
    /* === Zone-Specific Font Families === */
    
    /* Header (шапка сайта - navbar, меню, мобильное меню) */
    --theme-font-family-header: var(--theme-font-family);
    
    /* Footer (подвал сайта) */
    --theme-font-family-footer: var(--theme-font-family-header);
    
    /* Sidebar (боковая панель, виджеты) */
    --theme-font-family-sidebar: var(--theme-font-family-header);
    
    /* Headings (все заголовки H1-H6) */
    --theme-font-family-heading: var(--theme-font-family);
    
    /* Body (основной текст контента страницы) */
    --theme-font-family-body: var(--theme-font-family);
    
    /* ========================================================================
       Typography - Zone-Specific Properties
     ========================================================================== */
    
    /* === HEADER ZONE (Шапка: navbar, меню, мобильное меню) === */
    --theme-header-font-size: 1.5rem;
    --theme-header-font-weight: var(--theme-font-weight-normal);
    --theme-header-line-height: 1.5;
    --theme-header-letter-spacing: 0.05em;
    --theme-header-text-transform: none;
    
    /* === FOOTER ZONE (Подвал сайта) === */
    --theme-footer-font-size: 1rem;
    --theme-footer-font-weight: var(--theme-font-weight-normal);
    --theme-footer-line-height: 1.6;
    --theme-footer-letter-spacing: var(--theme-letter-spacing-normal);
    --theme-footer-text-transform: none;
    
    /* Footer headings */
    --theme-footer-heading-font-size: 1rem;          /* 16px */
    --theme-footer-heading-font-weight: var(--theme-font-weight-semibold);
    --theme-footer-heading-text-transform: uppercase;
    --theme-footer-heading-letter-spacing: 0.05em;
    
    /* === SIDEBAR ZONE (Боковая панель, виджеты) === */
    --theme-sidebar-font-size: 0.875rem;             /* 14px */
    --theme-sidebar-font-weight: var(--theme-font-weight-normal);
    --theme-sidebar-line-height: 1.6;
    --theme-sidebar-letter-spacing: var(--theme-letter-spacing-normal);
    --theme-sidebar-text-transform: none;
    
    /* Sidebar headings */
    --theme-sidebar-heading-font-size: 1.125rem;     /* 18px */
    --theme-sidebar-heading-font-weight: var(--theme-font-weight-semibold);
    --theme-sidebar-heading-text-transform: none;
    --theme-sidebar-heading-letter-spacing: var(--theme-letter-spacing-normal);
    
    /* === HEADINGS ZONE (Все заголовки H1-H6 в контенте) === */
    --theme-heading-font-weight: var(--theme-font-weight-bold);
    --theme-heading-letter-spacing: var(--theme-letter-spacing-tight);
    --theme-heading-text-transform: none;
    
    /* === BODY ZONE (Основной текст контента) === */
    --theme-body-font-size: 16px;
    --theme-body-font-weight: var(--theme-font-weight-normal);
    --theme-body-line-height: 1.6;
    --theme-body-letter-spacing: var(--theme-letter-spacing-normal);
    --theme-body-text-transform: none;
    
    /* ========================================================================
       Typography - Font Sizes
     ========================================================================== */
    
    /* Base size */
    --theme-font-size-base: 16px;
    
    /* Headings - Mobile */
    --theme-font-size-h1: 2.4rem !important;  /* ~35.7px */
    --theme-font-size-h2: 2rem !important;      /* ~27.2px */
    --theme-font-size-h3: 1.8rem !important;      /* 24px */
    --theme-font-size-h4: 1.25rem;     /* 20px */
    --theme-font-size-h5: 16px;
    --theme-font-size-h6: 0.875rem;    /* ~14px */
    
    /* Headings - Tablet+ (≥960px) */
    --theme-font-size-h1-large: 2.625rem;  /* 42px */
    --theme-font-size-h2-large: 2rem;      /* 32px */
    
    /* Display sizes */
    --theme-font-size-small: 0.875rem;     /* 14px */
    --theme-font-size-large: 1.25rem;      /* 20px */
    --theme-font-size-xlarge: 2.625rem;    /* 42px */
    --theme-font-size-2xlarge: 3.25rem;    /* 52px */
    --theme-font-size-3xlarge: 4rem;       /* 64px */
    
    /* Hero sizes */
    --theme-font-size-hero: 2.6rem;        /* 41.6px */
    --theme-font-size-hero-medium: 2.8875rem;  /* ~46px */
    --theme-font-size-hero-large: 3.4rem;      /* ~54px */
    --theme-font-size-hero-xlarge: 4rem;       /* 64px */
    --theme-font-size-hero-2xlarge: 6rem;      /* 96px */
    --theme-font-size-hero-3xlarge: 8rem;      /* 128px */
    
    /* ========================================================================
       Typography - Line Heights
     ========================================================================== */
    
    /* Base line height */
    --theme-line-height-base: 1.5;
    
    /* Headings line heights */
    --theme-line-height-h1: 1.2;
    --theme-line-height-h2: 1.3;
    --theme-line-height-h3: 1.4;
    --theme-line-height-h4: 1.4;
    --theme-line-height-h5: 1.4;
    --theme-line-height-h6: 1.4;
    
    /* Display line heights */
    --theme-line-height-small: 1.5;
    --theme-line-height-large: 1.5;
    --theme-line-height-xlarge: 1.4;
    
    /* Hero line heights */
    --theme-line-height-hero: 1.1;
    --theme-line-height-hero-large: 1;
    
    /* ========================================================================
       Typography - Font Weights
     ========================================================================== */
    
    --theme-font-weight-light: 300;
    --theme-font-weight-normal: 400;
    --theme-font-weight-medium: 500;
    --theme-font-weight-semibold: 600;
    --theme-font-weight-bold: 700;
    --theme-font-weight-bolder: bolder;
    
    /* ========================================================================
       Typography - Letter Spacing
     ========================================================================== */
    
    --theme-letter-spacing-tight: -0.02em;
    --theme-letter-spacing-normal: 0;
    --theme-letter-spacing-wide: 0.05em;
    --theme-letter-spacing-wider: 0.1em;
    
    /* ========================================================================
       Typography - Component-Specific (Navbar, Menu, Buttons, etc.)
     ========================================================================== */
    
    /* === NAVBAR (Главное меню сайта) === */
    --theme-navbar-font-family: var(--theme-font-family-header);
    --theme-navbar-font-size: var(--theme-header-font-size);
    --theme-navbar-font-weight: var(--theme-header-font-weight);
    --theme-navbar-letter-spacing: var(--theme-header-letter-spacing);
    --theme-navbar-text-transform: var(--theme-header-text-transform);
    --theme-navbar-line-height: var(--theme-header-line-height);
    
    /* Navbar dropdown (подменю) */
    --theme-navbar-dropdown-font-family: var(--theme-font-family-header);
    --theme-navbar-dropdown-font-size: var(--theme-header-font-size);
    --theme-navbar-dropdown-font-weight: var(--theme-header-font-weight);
    --theme-navbar-dropdown-letter-spacing: var(--theme-letter-spacing-normal);
    --theme-navbar-dropdown-text-transform: none;
    
    /* === NAV (Боковое меню, nav компонент) === */
    --theme-nav-font-family: var(--theme-font-family);
    --theme-nav-font-size: var(--theme-header-font-size);
    --theme-nav-font-weight: var(--theme-font-weight-normal);
    --theme-nav-letter-spacing: var(--theme-letter-spacing-normal);
    --theme-nav-line-height: 1.5;
    
    /* Nav primary (крупное боковое меню) */
    --theme-nav-primary-font-size: 1.5rem;
    --theme-nav-primary-line-height: 1.5;
    
    /* Nav secondary (меню с фоном) */
    --theme-nav-secondary-font-size: 16px;
    --theme-nav-secondary-line-height: 1.5;
    
    /* === BUTTONS === */
    --theme-button-font-family: var(--theme-font-family);
    --theme-button-font-size: 0.875rem;
    --theme-button-font-weight: var(--theme-font-weight-normal);
    --theme-button-letter-spacing: var(--theme-letter-spacing-normal);
    --theme-button-text-transform: uppercase;
    --theme-button-line-height: 1.5;
    
    /* Button small */
    --theme-button-small-font-size: 0.75rem;   /* 12px */
    
    /* Button large */
    --theme-button-large-font-size: 1rem;      /* 16px */
    
    /* === BREADCRUMB === */
    --theme-breadcrumb-font-family: var(--theme-font-family-header);
    --theme-breadcrumb-font-size: 1.3rem;
    --theme-breadcrumb-font-weight: var(--theme-font-weight-normal);
    --theme-breadcrumb-color: var(--theme-text-muted-color);
    
    /* === SUBNAV (подменю / табы) === */
    --theme-subnav-font-family: var(--theme-font-family);
    --theme-subnav-font-size: 0.875rem;
    --theme-subnav-font-weight: var(--theme-font-weight-normal);
    --theme-subnav-letter-spacing: var(--theme-letter-spacing-normal);
    --theme-subnav-text-transform: uppercase;
    
    /* === TAB (вкладки) === */
    --theme-tab-font-family: var(--theme-font-family);
    --theme-tab-font-size: 0.875rem;
    --theme-tab-font-weight: var(--theme-font-weight-normal);
    --theme-tab-letter-spacing: var(--theme-letter-spacing-normal);
    
    /* === LABELS & BADGES === */
    --theme-label-font-family: var(--theme-font-family);
    --theme-label-font-size: 0.6875rem;        /* 11px */
    --theme-label-font-weight: var(--theme-font-weight-normal);
    --theme-label-text-transform: uppercase;
    --theme-label-letter-spacing: var(--theme-letter-spacing-wide);
    
    --theme-badge-font-family: var(--theme-font-family);
    --theme-badge-font-size: 10px;
    --theme-badge-font-weight: var(--theme-font-weight-bold);
    
    /* === FORM ELEMENTS === */
    --theme-input-font-family: var(--theme-font-family);
    --theme-input-font-size: 0.875rem;
    --theme-input-font-weight: var(--theme-font-weight-normal);
    
    /* === TABLE === */
    --theme-table-font-family: var(--theme-font-family);
    --theme-table-font-size: 0.875rem;
    --theme-table-header-font-weight: var(--theme-font-weight-semibold);
    --theme-table-header-text-transform: uppercase;
    
    /* === ARTICLE / BLOG === */
    --theme-article-title-font-family: var(--theme-font-family);
    --theme-article-title-font-weight: var(--theme-font-weight-bold);
    --theme-article-meta-font-size: 0.75rem;   /* 12px */
    --theme-article-meta-font-weight: var(--theme-font-weight-normal);
    
    /* === CARD === */
    --theme-card-title-font-family: var(--theme-font-family);
    --theme-card-title-font-size: 1.25rem;
    --theme-card-title-font-weight: var(--theme-font-weight-semibold);
    
    /* === NOTIFICATION / ALERT === */
    --theme-notification-font-family: var(--theme-font-family);
    --theme-notification-font-size: 0.875rem;
    --theme-notification-font-weight: var(--theme-font-weight-normal);
}

/* ========================================================================
   ANTI-FOUC (Flash of Unstyled Content) - КРИТИЧНО ДЛЯ CLS
 ========================================================================== */

/* 1. Скрываем dropdown меню до инициализации UIKit */
.uk-navbar-dropdown:not(.uk-open) {
    display: none !important;
}

/* 2. Скрываем мобильное меню до клика */
#mobile-menu:not(.uk-open) {
    display: none !important;
}

/* 3. Предотвращаем скачки sticky navbar */
[uk-sticky] {
    transition: none !important;
}

[uk-sticky].uk-sticky-fixed {
    animation: none !important;
}

/* 4. Фиксируем высоту navbar чтобы не прыгал при sticky */
.uk-navbar-container {
    min-height: 80px;
}

/* 5. Скрываем nav до полной загрузки */
.uk-navbar-nav > li > a {
    visibility: visible;
}

/* 6. Предотвращаем показ подменю до hover/click */
.uk-navbar-nav > li > .uk-navbar-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.uk-navbar-nav > li:hover > .uk-navbar-dropdown,
.uk-navbar-nav > li > a[aria-expanded="true"] + .uk-navbar-dropdown,
.uk-navbar-dropdown.uk-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
}

/* 7. Резервируем пространство для dropdown чтобы не было layout shift */
.uk-navbar-dropdown-grid {
    min-height: 200px;
}

/* 8. Убираем анимацию и отступ сверху у dropdown */
.uk-navbar-dropdown {
    transition: none !important;
    animation: none !important;
    margin-top: 0 !important;
    top: 100% !important;
}

/* 9. Фиксируем мобильное меню */
.uk-dropbar {
    transition: none;
}

/* ========================================================================
   Color Overrides - UIKit Classes
 ========================================================================== */

/* Primary color overrides */
.uk-button-primary,
.uk-label-primary,
.uk-badge-primary,
.uk-alert-primary {
    background-color: var(--theme-primary) !important;
}

.uk-button-primary:hover {
    background-color: var(--theme-primary-hover) !important;
}

.uk-button-primary:active {
    background-color: var(--theme-primary-active) !important;
}

/* Success color overrides */
.uk-button-success,
.uk-label-success,
.uk-alert-success {
    background-color: var(--theme-success) !important;
}

.uk-button-success:hover {
    background-color: var(--theme-success-hover) !important;
}

/* Warning color overrides */
.uk-button-warning,
.uk-label-warning,
.uk-alert-warning {
    background-color: var(--theme-warning) !important;
}

.uk-button-warning:hover {
    background-color: var(--theme-warning-hover) !important;
}

/* Danger color overrides */
.uk-button-danger,
.uk-label-danger,
.uk-alert-danger {
    background-color: var(--theme-danger) !important;
}

.uk-button-danger:hover {
    background-color: var(--theme-danger-hover) !important;
}

/* Text color overrides */
.uk-text-primary {
    color: var(--theme-text-primary) !important;
}

.uk-text-secondary {
    color: var(--theme-text-secondary) !important;
}

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

/* Link color overrides */
a:not([class]),
.uk-link {
    color: var(--theme-link-color);
}

a:not([class]):hover,
.uk-link:hover {
    color: var(--theme-link-hover);
}

.uk-link-heading:hover {
    color: var(--theme-link-heading);
}

/* Border color overrides */
.uk-card-default,
.uk-section-default,
.uk-tile-default,
.uk-navbar-container:not(.uk-navbar-transparent) {
    border-color: var(--theme-border-default);
}

/* Background color overrides */
.uk-background-default {
    background-color: var(--theme-bg-default) !important;
}

.uk-background-muted {
    background-color: var(--theme-bg-muted) !important;
}

.uk-background-primary {
    background-color: var(--theme-bg-primary) !important;
}

.uk-background-secondary {
    background-color: var(--theme-bg-secondary) !important;
}

/* Navbar colors */
.uk-navbar-container:not(.uk-navbar-transparent) {
    background: var(--theme-header-bg-color);
    border-bottom: 1px solid var(--theme-border-default);
}

.uk-navbar-nav > li > a {
    color: var(--theme-header-link-color);
}

.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a[aria-expanded="true"] {
    color: var(--theme-header-link-hover-color);
}

.uk-navbar-nav > li.uk-active > a {
    color: var(--theme-header-link-active-color);
}

/* Navbar dropdown background */
.uk-navbar-dropdown {
    background: var(--theme-header-bg-color);
}

/* ========================================================================
   Custom Classes
 ========================================================================== */

/* Header Cart Icon Styling */
.cart-icon-large {
    font-size: 1.8em !important;
}

.cart-count-inline {
    display: inline !important;
    font-size: 1.3em !important;
    vertical-align: super !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================================================
   Typography Utility Classes
 ========================================================================== */

/* Font Family Utilities */
.theme-font-primary {
    font-family: var(--theme-font-family) !important;
}

.theme-font-mono {
    font-family: var(--theme-font-family-mono) !important;
}

/* Font Size Utilities */
.theme-text-small {
    font-size: var(--theme-font-size-small) !important;
}

.theme-text-base {
    font-size: var(--theme-font-size-base) !important;
}

.theme-text-large {
    font-size: var(--theme-font-size-large) !important;
}

.theme-text-xlarge {
    font-size: var(--theme-font-size-xlarge) !important;
}

.theme-text-2xlarge {
    font-size: var(--theme-font-size-2xlarge) !important;
}

.theme-text-3xlarge {
    font-size: var(--theme-font-size-3xlarge) !important;
}

/* Font Weight Utilities */
.theme-font-light {
    font-weight: var(--theme-font-weight-light) !important;
}

.theme-font-normal {
    font-weight: var(--theme-font-weight-normal) !important;
}

.theme-font-medium {
    font-weight: var(--theme-font-weight-medium) !important;
}

.theme-font-semibold {
    font-weight: var(--theme-font-weight-semibold) !important;
}

.theme-font-bold {
    font-weight: var(--theme-font-weight-bold) !important;
}

/* Line Height Utilities */
.theme-leading-tight {
    line-height: 1.2 !important;
}

.theme-leading-normal {
    line-height: var(--theme-line-height-base) !important;
}

.theme-leading-relaxed {
    line-height: 1.75 !important;
}

.theme-leading-loose {
    line-height: 2 !important;
}

/* Letter Spacing Utilities */
.theme-tracking-tight {
    letter-spacing: var(--theme-letter-spacing-tight) !important;
}

.theme-tracking-normal {
    letter-spacing: var(--theme-letter-spacing-normal) !important;
}

.theme-tracking-wide {
    letter-spacing: var(--theme-letter-spacing-wide) !important;
}

.theme-tracking-wider {
    letter-spacing: var(--theme-letter-spacing-wider) !important;
}

/* Text Transform Utilities */
.theme-uppercase {
    text-transform: uppercase !important;
}

.theme-lowercase {
    text-transform: lowercase !important;
}

.theme-capitalize {
    text-transform: capitalize !important;
}

.theme-normal-case {
    text-transform: none !important;
}

/* ========================================================================
   Typography Overrides - Apply variables to existing UIKit classes
 ========================================================================== */

/* Override body font */
body {
    font-family: var(--theme-font-family-body);
    font-size: var(--theme-body-font-size);
    line-height: var(--theme-body-line-height);
    font-weight: var(--theme-body-font-weight);
    letter-spacing: var(--theme-body-letter-spacing);
    /* Светлый фон страницы (основное содержание) */
    background-color: var(--theme-bg-muted);
    color: var(--theme-text-primary);
}

/* Override heading fonts */
h1, .uk-h1, .uk-heading-small {
    font-family: var(--theme-font-family-heading);
    font-size: var(--theme-font-size-h1);
    line-height: var(--theme-line-height-h1);
    font-weight: var(--theme-heading-font-weight);
    letter-spacing: var(--theme-heading-letter-spacing);
}

h2, .uk-h2, .uk-heading-medium {
    font-family: var(--theme-font-family-heading);
    font-size: var(--theme-font-size-h2);
    line-height: var(--theme-line-height-h2);
    font-weight: var(--theme-heading-font-weight);
    letter-spacing: var(--theme-heading-letter-spacing);
}

h3, .uk-h3 {
    font-family: var(--theme-font-family-heading);
    font-size: var(--theme-font-size-h3);
    line-height: var(--theme-line-height-h3);
    font-weight: var(--theme-heading-font-weight);
    letter-spacing: var(--theme-heading-letter-spacing);
}

h4, .uk-h4 {
    font-family: var(--theme-font-family-heading);
    font-size: var(--theme-font-size-h4);
    line-height: var(--theme-line-height-h4);
    font-weight: var(--theme-heading-font-weight);
    letter-spacing: var(--theme-heading-letter-spacing);
}

h5, .uk-h5 {
    font-family: var(--theme-font-family-heading);
    font-size: var(--theme-font-size-h5);
    line-height: var(--theme-line-height-h5);
    font-weight: var(--theme-heading-font-weight);
    letter-spacing: var(--theme-heading-letter-spacing);
}

h6, .uk-h6 {
    font-family: var(--theme-font-family-heading);
    font-size: var(--theme-font-size-h6);
    line-height: var(--theme-line-height-h6);
    font-weight: var(--theme-heading-font-weight);
    letter-spacing: var(--theme-heading-letter-spacing);
}

/* Responsive heading sizes - Tablet+ */
@media (min-width: 960px) {
    h1, .uk-h1, .uk-heading-small {
        font-size: var(--theme-font-size-h1-large);
    }
    
    h2, .uk-h2, .uk-heading-medium {
        font-size: var(--theme-font-size-h2-large);
    }
}

/* Override hero sizes */
.uk-heading-hero {
    font-size: var(--theme-font-size-hero);
    line-height: var(--theme-line-height-hero);
}

.uk-heading-xlarge {
    font-size: var(--theme-font-size-hero-xlarge);
    line-height: var(--theme-line-height-hero-large);
}

.uk-heading-2xlarge {
    font-size: var(--theme-font-size-hero-2xlarge);
    line-height: var(--theme-line-height-hero-large);
}

/* Override code fonts */
code,
kbd,
samp,
pre,
.uk-text-code {
    font-family: var(--theme-font-family-mono);
}

/* Override small text */
small,
.uk-text-small {
    font-size: var(--theme-font-size-small);
    line-height: var(--theme-line-height-small);
}

/* Override large text */
.uk-text-large {
    font-size: var(--theme-font-size-large);
    line-height: var(--theme-line-height-large);
}

/* Override lead text */
.uk-text-lead {
    font-size: var(--theme-font-size-large);
    line-height: var(--theme-line-height-large);
}

/* Override meta text */
.uk-text-meta {
    font-size: var(--theme-font-size-small);
    line-height: var(--theme-line-height-small);
}

/* ========================================================================
   Component-Specific Typography Overrides
 ========================================================================== */

/* === NAVBAR (Главное меню) === */
.uk-navbar-nav > li > a {
    font-family: var(--theme-navbar-font-family);
    font-size: var(--theme-navbar-font-size);
    font-weight: var(--theme-navbar-font-weight);
    letter-spacing: var(--theme-navbar-letter-spacing);
    text-transform: var(--theme-navbar-text-transform);
    line-height: var(--theme-navbar-line-height);
}

/* Navbar dropdown (выпадающее подменю) */
.uk-navbar-dropdown-nav,
.uk-navbar-dropdown-nav > li > a {
    font-family: var(--theme-navbar-dropdown-font-family) !important;
    font-size: var(--theme-navbar-dropdown-font-size);
    font-weight: var(--theme-navbar-dropdown-font-weight);
    letter-spacing: var(--theme-navbar-dropdown-letter-spacing);
    text-transform: var(--theme-navbar-dropdown-text-transform);
}

/* Navbar item & toggle */
.uk-navbar-item,
.uk-navbar-toggle {
    font-family: var(--theme-navbar-font-family);
    font-size: var(--theme-navbar-font-size);
}

/* Navbar item colors (user icon, cart, etc.) */
.uk-navbar-item {
    color: var(--theme-header-link-color);
}

.uk-navbar-item:hover {
    color: var(--theme-header-link-hover-color);
}

/* Active states for navbar items */
.uk-navbar-item .icon-cart3.active,
.uk-navbar-item .cart-count-inline.active {
    color: var(--theme-header-link-active-color) !important;
}

/* User icon in navbar */
.uk-navbar-item .icon-user168 {
    color: var(--theme-header-link-color) !important;
}

.uk-navbar-item:hover .icon-user168 {
    color: var(--theme-header-link-hover-color) !important;
}

/* Cart icon and count in navbar */
.uk-navbar-item .icon-cart3,
.uk-navbar-item .cart-count-inline {
    color: var(--theme-header-link-color) !important;
}

.uk-navbar-item:hover .icon-cart3,
.uk-navbar-item:hover .cart-count-inline {
    color: var(--theme-header-link-hover-color) !important;
}

/* Navbar dropdown с картинками (grid) - выравниваем размер текста с обычным dropdown */
.uk-navbar-dropdown-grid .uk-text-small {
    font-family: var(--theme-navbar-dropdown-font-family) !important;
    font-size: var(--theme-navbar-dropdown-font-size) !important;
    font-weight: var(--theme-navbar-dropdown-font-weight);
    letter-spacing: var(--theme-navbar-dropdown-letter-spacing);
}

/* Navbar dropdown - все элементы внутри должны наследовать шрифт header */
.uk-navbar-dropdown,
.uk-navbar-dropdown * {
    font-family: var(--theme-navbar-dropdown-font-family);
}

/* Language switcher in navbar - используем размер navbar */
.uk-navbar-item .uk-iconnav > li > a {
    font-family: var(--theme-navbar-font-family);
    font-size: var(--theme-navbar-font-size) !important;
    font-weight: var(--theme-navbar-font-weight);
    letter-spacing: var(--theme-navbar-letter-spacing);
    text-transform: var(--theme-navbar-text-transform);
    color: var(--theme-header-link-color);
}

.uk-navbar-item .uk-iconnav > li > a:hover {
    color: var(--theme-header-link-hover-color);
}

.uk-navbar-item .uk-iconnav > li.uk-active > a {
    color: var(--theme-header-link-active-color);
}

/* === NAV (Боковое меню) === */
.uk-nav,
.uk-nav > li > a {
    font-family: var(--theme-nav-font-family);
    font-size: var(--theme-nav-font-size);
    font-weight: var(--theme-nav-font-weight);
    letter-spacing: var(--theme-nav-letter-spacing);
    line-height: var(--theme-nav-line-height);
}

/* Nav primary */
.uk-nav-primary,
.uk-nav-primary > li > a {
    font-size: var(--theme-nav-primary-font-size);
    line-height: var(--theme-nav-primary-line-height);
}

/* Nav secondary */
.uk-nav-secondary,
.uk-nav-secondary > li > a {
    font-size: var(--theme-nav-secondary-font-size);
    line-height: var(--theme-nav-secondary-line-height);
}

/* === BUTTONS === */
.uk-button {
    font-family: var(--theme-button-font-family);
    font-size: var(--theme-button-font-size);
    font-weight: var(--theme-button-font-weight);
    letter-spacing: var(--theme-button-letter-spacing);
    text-transform: var(--theme-button-text-transform);
    line-height: var(--theme-button-line-height);
}

.uk-button-small {
    font-size: var(--theme-button-small-font-size);
}

.uk-button-large {
    font-size: var(--theme-button-large-font-size);
}

/* === BREADCRUMB === */
.uk-breadcrumb:not([class*="icon-"]):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
.uk-breadcrumb > * > *:not([class*="icon-"]):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti) {
    font-family: var(--theme-breadcrumb-font-family) !important;
    font-size: var(--theme-breadcrumb-font-size) !important;
    font-weight: var(--theme-breadcrumb-font-weight) !important;
    color: var(--theme-breadcrumb-color) !important;
}

/* Breadcrumb для мобильных устройств */
@media (max-width: 767px) {
    .breadcrumb:not([class*="icon-"]):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
    .breadcrumb > li > a:not([class*="icon-"]):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
    .breadcrumb > li > span:not([class*="icon-"]):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti) {
        font-family: var(--theme-breadcrumb-font-family) !important;
        font-size: var(--theme-breadcrumb-font-size) !important;
        font-weight: var(--theme-breadcrumb-font-weight) !important;
        color: var(--theme-breadcrumb-color) !important;
    }
}

/* === SUBNAV === */
.uk-subnav > * > :first-child {
    font-family: var(--theme-subnav-font-family);
    font-size: var(--theme-subnav-font-size);
    font-weight: var(--theme-subnav-font-weight);
    letter-spacing: var(--theme-subnav-letter-spacing);
    text-transform: var(--theme-subnav-text-transform);
}

/* === TAB === */
.uk-tab > * > a {
    font-family: var(--theme-tab-font-family);
    font-size: var(--theme-tab-font-size);
    font-weight: var(--theme-tab-font-weight);
    letter-spacing: var(--theme-tab-letter-spacing);
}

/* === LABELS & BADGES === */
.uk-label {
    font-family: var(--theme-label-font-family);
    font-size: var(--theme-label-font-size);
    font-weight: var(--theme-label-font-weight);
    text-transform: var(--theme-label-text-transform);
    letter-spacing: var(--theme-label-letter-spacing);
}

.uk-badge {
    font-family: var(--theme-badge-font-family);
    font-size: var(--theme-badge-font-size);
    font-weight: var(--theme-badge-font-weight);
}

/* === FORM ELEMENTS === */
.uk-input,
.uk-select,
.uk-textarea {
    font-family: var(--theme-input-font-family);
    font-size: var(--theme-input-font-size);
    font-weight: var(--theme-input-font-weight);
}

/* === TABLE === */
.uk-table {
    font-family: var(--theme-table-font-family);
    font-size: var(--theme-table-font-size);
}

.uk-table th {
    font-weight: var(--theme-table-header-font-weight);
    text-transform: var(--theme-table-header-text-transform);
}

/* === ARTICLE === */
.uk-article-title {
    font-family: var(--theme-article-title-font-family);
    font-weight: var(--theme-article-title-font-weight);
}

.uk-article-meta {
    font-size: var(--theme-article-meta-font-size);
    font-weight: var(--theme-article-meta-font-weight);
}

/* === CARD === */
.uk-card-title {
    font-family: var(--theme-card-title-font-family);
    font-size: var(--theme-card-title-font-size);
    font-weight: var(--theme-card-title-font-weight);
}

/* === NOTIFICATION / ALERT === */
.uk-notification-message,
.uk-alert {
    font-family: var(--theme-notification-font-family);
    font-size: var(--theme-notification-font-size);
    font-weight: var(--theme-notification-font-weight);
}

/* ========================================================================
   Zone-Specific Typography Classes
 ========================================================================== */

/* === HEADER ZONE === */
.theme-header,
.theme-header * {
    font-family: var(--theme-font-family-header) !important;
}

.theme-header-text {
    font-family: var(--theme-font-family-header);
    font-size: var(--theme-header-font-size);
    font-weight: var(--theme-header-font-weight);
    line-height: var(--theme-header-line-height);
    letter-spacing: var(--theme-header-letter-spacing);
    text-transform: var(--theme-header-text-transform);
}

/* === FOOTER ZONE === */
.theme-footer,
.theme-footer * {
    font-family: var(--theme-font-family-footer) !important;
}

.theme-footer-text {
    font-family: var(--theme-font-family-footer);
    font-size: var(--theme-footer-font-size);
    font-weight: var(--theme-footer-font-weight);
    line-height: var(--theme-footer-line-height);
    letter-spacing: var(--theme-footer-letter-spacing);
    text-transform: var(--theme-footer-text-transform);
}

.theme-footer-heading {
    font-family: var(--theme-font-family-footer);
    font-size: var(--theme-footer-heading-font-size);
    font-weight: var(--theme-footer-heading-font-weight);
    letter-spacing: var(--theme-footer-heading-letter-spacing);
    text-transform: var(--theme-footer-heading-text-transform);
}

/* Применяем шрифт footer ко всем элементам в подвале */
footer,
footer *:not([class*="icon-"]):not(.material-icons):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
[class*="footer"] *:not([class*="icon-"]):not(.material-icons):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti) {
    font-family: var(--theme-font-family-footer) !important;
}

/* === SIDEBAR ZONE === */
.theme-sidebar,
.theme-sidebar * {
    font-family: var(--theme-font-family-sidebar) !important;
}

.theme-sidebar-text {
    font-family: var(--theme-font-family-sidebar);
    font-size: var(--theme-sidebar-font-size);
    font-weight: var(--theme-sidebar-font-weight);
    line-height: var(--theme-sidebar-line-height);
    letter-spacing: var(--theme-sidebar-letter-spacing);
    text-transform: var(--theme-sidebar-text-transform);
}

.theme-sidebar-heading {
    font-family: var(--theme-font-family-sidebar);
    font-size: var(--theme-sidebar-heading-font-size);
    font-weight: var(--theme-sidebar-heading-font-weight);
    letter-spacing: var(--theme-sidebar-heading-letter-spacing);
    text-transform: var(--theme-sidebar-heading-text-transform);
}

/* Применяем шрифт sidebar к правой колонке (типичная структура для sidebar) */
aside,
[class*="uk-width-1-3"],
[class*="uk-width-1-4"],
.uk-section-default aside,
.uk-sidebar {
    font-family: var(--theme-font-family-sidebar) !important;
}

/* Применяем к навигации в sidebar */
aside .uk-nav,
aside .uk-nav > li > a,
[class*="uk-width-1-3"] .uk-nav,
[class*="uk-width-1-3"] .uk-nav > li > a,
[class*="uk-width-1-4"] .uk-nav,
[class*="uk-width-1-4"] .uk-nav > li > a {
    font-family: var(--theme-font-family-sidebar) !important;
}

/* Применяем к блокам статей/виджетов в sidebar */
aside .articles,
aside .article-item,
[class*="uk-width-1-3"] .articles,
[class*="uk-width-1-3"] .article-item,
[class*="uk-width-1-4"] .articles,
[class*="uk-width-1-4"] .article-item {
    font-family: var(--theme-font-family-sidebar) !important;
}

/* Применяем ко всем элементам внутри блоков статей в sidebar */
aside .articles *:not([class*="icon-"]):not(.material-icons):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
aside .article-item *:not([class*="icon-"]):not(.material-icons):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
[class*="uk-width-1-3"] .articles *:not([class*="icon-"]):not(.material-icons):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
[class*="uk-width-1-3"] .article-item *:not([class*="icon-"]):not(.material-icons):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
[class*="uk-width-1-4"] .articles *:not([class*="icon-"]):not(.material-icons):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti),
[class*="uk-width-1-4"] .article-item *:not([class*="icon-"]):not(.material-icons):not([class*="fa-"]):not([class*="glyphicon-"]):not(.ti) {
    font-family: var(--theme-font-family-sidebar) !important;
}

/* === HEADING ZONE === */
.theme-heading {
    font-family: var(--theme-font-family-heading);
    font-weight: var(--theme-heading-font-weight);
    letter-spacing: var(--theme-heading-letter-spacing);
    text-transform: var(--theme-heading-text-transform);
}

/* === BODY ZONE === */
.theme-body,
.theme-body * {
    font-family: var(--theme-font-family-body) !important;
}

.theme-body-text {
    font-family: var(--theme-font-family-body);
    font-size: var(--theme-body-font-size);
    font-weight: var(--theme-body-font-weight);
    line-height: var(--theme-body-line-height);
    letter-spacing: var(--theme-body-letter-spacing);
    text-transform: var(--theme-body-text-transform);
}

/* ========================================================================
   Mobile Menu Styles
 ========================================================================== */

/* Фон мобильного меню */
#mobile-menu.uk-dropbar {
    background: var(--theme-header-bg-color) !important;
}

/* Мобильное меню - применяем шрифт header */
#mobile-menu .uk-nav > li > a {
    font-family: var(--theme-font-family-header) !important;
    /* font-size: 1rem !important; */
    font-weight: var(--theme-header-font-weight);
    letter-spacing: var(--theme-header-letter-spacing);
    color: var(--theme-header-link-color);
}

#mobile-menu .uk-nav > li > a:hover {
    color: var(--theme-header-link-hover-color);
}

#mobile-menu .uk-nav > li.uk-active > a {
    color: var(--theme-header-link-active-color);
}

/* Подменю в мобильном меню */
#mobile-menu .uk-nav-sub > li > a {
    font-family: var(--theme-font-family-header) !important;
    /* font-size: 0.9rem !important; */
    color: var(--theme-header-link-color);
}

#mobile-menu .uk-nav-sub > li > a:hover {
    color: var(--theme-header-link-hover-color);
}

#mobile-menu .uk-nav-sub > li.uk-active > a {
    color: var(--theme-header-link-active-color);
}

/* Заголовки в мобильном меню (Вход/Регистрация) */
#mobile-menu .uk-nav-header {
    font-family: var(--theme-font-family-header) !important;
    /* font-size: 1rem !important; */
    color: var(--theme-header-link-color) !important;
}

/* Иконки в заголовках мобильного меню */
#mobile-menu .uk-nav-header .icon-user168 {
    color: var(--theme-header-link-color) !important;
}

/* Иконки в мобильном меню (Вход и Корзина) */
#mobile-menu .icon-user168,
#mobile-menu .icon-cart3 {
    font-size: 2em !important;
    color: var(--theme-header-link-color) !important;
}

#mobile-menu .icon-cart3.active {
    color: var(--theme-header-link-active-color) !important;
}

/* Кнопка корзины в мобильном меню */
#mobile-menu .uk-button {
    font-family: var(--theme-font-family-header) !important;
    font-size: 1.1rem !important;
    color: var(--theme-header-link-color);
}

#mobile-menu .uk-button:hover {
    color: var(--theme-header-link-hover-color);
}

#mobile-menu .uk-button.uk-active {
    color: var(--theme-header-link-active-color);
}

/* Переключатель языков в мобильном меню */
#mobile-menu .uk-iconnav > li > a {
    font-family: var(--theme-font-family-header) !important;
    font-size: 1.2rem !important;
    font-weight: var(--theme-header-font-weight);
    color: var(--theme-header-link-color);
}

#mobile-menu .uk-iconnav > li > a:hover {
    color: var(--theme-header-link-hover-color);
}

#mobile-menu .uk-iconnav > li.uk-active > a {
    color: var(--theme-header-link-active-color);
}

.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
    margin: 0 4px 0 0px;
}

.uk-section-default {
    padding-top: 30px !important;
    background: var(--theme-bg-muted);
}

.item-list-header, .addItem, .btn, .compare-bottom {
    font-family: var(--theme-font-family-header);
}

.item-goods-tile .a-hdr-div a {
        height: auto;
}

/* ========================================================================
   Zone backgrounds (по макету): белый сайдбар + светлый подвал
   theme-cls.css грузится последним, поэтому переопределяет main.css
 ========================================================================== */

/* === SIDEBAR — белые карточки-виджеты === */
aside .article-item {
    background: #ffffff;
    border: 1px solid var(--theme-border-default);
    border-radius: 4px;
    /* добавляем горизонтальные отступы, т.к. исходно padding: 22px 0 */
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 18px;
}

/* === FOOTER — светлый фон, тёмный текст (убираем тёмно-серый + зелёный градиент) === */
footer {
    background: #ffffff !important;
    border-top: 1px solid var(--theme-border-default);
}
footer .footer {
    background: #ffffff !important;
}
footer .bottom-footer {
    background: var(--theme-bg-muted) !important;
}

/* Основной текст/иконки подвала — тёмные */
footer,
footer p,
footer address,
footer .adress,
footer .footer .footer-contact a,
footer .footer .ftr-number-sm a,
footer .footer .footer-contact .numbers-ul a > i,
footer .footer .ftr-number-sm .numbers-ul a > i,
footer .footer .footer-contact .numbers-ul a > span,
footer .footer .ftr-number-sm .numbers-ul a > span,
footer .footer .footer-contact .adress .geo,
footer .footer .ftr-number-sm .adress .geo,
footer .footer .footer-contact .adress address,
footer .footer .ftr-number-sm .adress address,
footer .footer .footer-contact .adress address a > i,
footer .footer .ftr-number-sm .adress address a > i,
footer .bottom-footer {
    color: var(--theme-text-secondary) !important;
}

/* Ссылки подвала */
footer a,
footer .bottom-footer a,
footer .footer .footer-contact .adress address a,
footer .footer .ftr-number-sm .adress address a {
    color: var(--theme-text-primary) !important;
}
footer a:hover,
footer .bottom-footer a:hover,
footer .footer .footer-contact .adress address a:hover,
footer .footer .ftr-number-sm .adress address a:hover {
    color: var(--theme-link-hover) !important;
}

/* Заголовки колонок подвала — фирменный slate (Primary) */
footer .h5,
footer .footer .h2,
footer .footer .h3,
footer .footer .h4 {
    color: var(--theme-primary) !important;
}

/* ========================================================================
   Логотип — отменяем глобальное правило img { max-width: 90% } (main.css)
 ========================================================================== */

/* Лого в шапке (.uk-navbar-item.uk-logo, в т.ч. мобильное меню) — без ограничения */
.uk-logo img {
    max-width: none;
}

/* Лого в подвале — до 100% ширины */
.footer-logo img {
    max-width: 100%;
}

/* ========================================================================
   Никакого зелёного: .btn-success (Bootstrap) → Primary slate
   (фон уже заменён в main, здесь убираем зелёные рамку и hover/active)
 ========================================================================== */
.btn-success,
.btn-success:focus,
.btn-success.focus {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success:active:hover,
.btn-success:active:focus,
.open > .dropdown-toggle.btn-success {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
    color: #fff !important;
}

/* ========================================================================
   Mini hero (только на главной /index.html) — кораблики на фоне
   Картинка: /images/hero/hero-boats.jpg (1920×1100).
   Композиция фото: красный кораблик (смысловой акцент) — внизу-слева,
   синие «догоняющие» — справа, вверху пустая вода. Поэтому:
   • фото прижато к НИЗУ (background-position: center bottom) — кораблики
     и, главное, красный всегда в кадре;
   • затемнение — СВЕРХУ (под текст), низ с корабликами остаётся ярким.
 ========================================================================== */
.theme-hero {
    position: relative;
    min-height: 300px;
    margin-bottom: 24px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;        /* текст сверху, кораблики снизу не перекрыты */
    justify-content: flex-start;
    color: #fff;
    background-color: #7d9a98; /* fallback-«вода», если картинка не загрузилась */
    background-image:
        linear-gradient(180deg, rgba(38,50,56,0.70) 0%, rgba(38,50,56,0.32) 26%, rgba(38,50,56,0) 52%),
        url('/images/hero/hero-boats.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: cover, cover;
    background-attachment: scroll, scroll;
}

.theme-hero__overlay {
    padding: 22px 32px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.theme-hero__title {
    font-family: var(--theme-font-family-heading);
    font-weight: var(--theme-font-weight-bold);
    font-size: 2.2rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.theme-hero__subtitle {
    font-family: var(--theme-font-family-heading);
    font-weight: var(--theme-font-weight-medium);
    font-size: 1.1rem;
    margin-top: 6px;
    opacity: 0.95;
}

/* Планшет: компактнее */
@media (max-width: 959px) {
    .theme-hero {
        min-height: 180px;
        margin-bottom: 16px;
        border-radius: 4px;
    }
    .theme-hero__title { font-size: 1.6rem; }
    .theme-hero__subtitle { font-size: 0.95rem; }
}

/* Телефон: небольшой блок, но кораблики (включая красный) видно */
@media (max-width: 639px) {
    .theme-hero {
        min-height: 130px;
        margin-bottom: 12px;
    }
    .theme-hero__overlay { padding: 14px 18px; }
    .theme-hero__title { font-size: 1.25rem; }
    .theme-hero__subtitle { font-size: 0.85rem; }
}

/* ========================================================================
   Сайдбар: подразделы (дети) в карточке меню
   Структура карточки: .article-item > .articles >
       <p class="h4"> = родитель (18px) + <ul class="articles-ul"><li><a> = подразделы
 ========================================================================== */

/* Правый отступ — длинные названия не липнут к краю, переносятся на след. строку */
aside .article-item .articles {
    padding-right: 14px;
}

/* Подразделы — заметный отступ слева (родитель ~16px, дети ~32px → видно вложенность) */
aside .article-item .articles-ul li {
    padding-left: 14px;
}

/* Подразделы — немного меньше шрифт, чем у родителя (.h4 = 18px) */
aside .article-item .articles-ul li a {
    font-size: 14px;
}