:root {
    /* ═══════════ БАЗА (переопределяется из настроек) ═══════════ */
    --bg-body: #0E0E0E;
    --bg-surface: #181818;
    --bg-input: #1F1F1F;
    --text-main: #F5F0EB;
    --text-muted: #9A9A9A;
    --accent: #C22A42;
    --accent-hover: #A12235;
    --accent-rgb: 194, 42, 66;
    --accent-hover-rgb: 161, 34, 53;
    --border: #2A2A2A;

    /* ═══════════ ШАПКА / ОВЕРЛЕИ ═══════════ */
    --header-bg: rgba(14, 14, 14, 0.85);
    --overlay-filter-bg: rgba(0, 0, 0, 0.75);
    --overlay-cart-bg: rgba(0, 0, 0, 0.7);
    --overlay-menu-bg: rgba(0, 0, 0, 0.7);
    --overlay-modal-bg: rgba(0, 0, 0, 0.7);
    --modal-backdrop: rgba(10, 10, 10, 0.95);
    --cookie-bg: rgba(24, 24, 24, 0.97);
    --hero-glass: rgba(24, 24, 24, 0.7);
    --btn-overlay-bg: rgba(0, 0, 0, 0.4);
    --btn-overlay-bg-hover: rgba(0, 0, 0, 0.6);

    /* ═══════════ СТЕКЛО / GLASS ═══════════ */
    --bg-surface-glass:        rgba(24, 24, 24, 0.85);
    --bg-surface-glass-strong: rgba(24, 24, 24, 0.97);

    /* ═══════════ ФУНКЦИОНАЛЬНЫЕ ═══════════ */
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #F57C00;
    --info: #2196f3;
    --rating-gold: #F5B301;

    /* ═══════════ ТЕНИ ═══════════ */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-strong: rgba(0, 0, 0, 0.6);
    --shadow-soft: rgba(0, 0, 0, 0.25);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-catalog-desktop: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-catalog-mobile: 0 -10px 40px rgba(0, 0, 0, 0.6);

    /* ═══════════ SKELETON / ПЛЕЙСХОЛДЕРЫ ═══════════ */
    --skeleton-base: rgba(255, 255, 255, 0.03);
    --skeleton-highlight: rgba(255, 255, 255, 0.08);
    --placeholder-color: #666;

    /* ═══════════ ЭЛЕМЕНТЫ ═══════════ */
    --tag-bg: rgba(255, 255, 255, 0.04);
    --tag-bg-hover: rgba(255, 255, 255, 0.08);
    --thumb-bg: #111111;
    --video-bg: #0a0a0a;
    --white-on-accent: #ffffff;
    --checkmark-color: #ffffff;
    --button-hover-lighten: rgba(255, 255, 255, 0.04);

    /* ═══════════ ТИПОГРАФИКА ═══════════ */
    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --text-xs: 13px;
    --text-sm: 15px;
    --text-base: 16px;
    --text-lg: 19px;
    --text-xl: 25px;
    --text-2xl: 34px;
    --text-3xl: 52px;
    --text-hero: clamp(34px, 4.5vw, 64px);
    --radius-lg: 32px;
    --radius-md: 20px;
    --radius-pill: 100px;
    --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    touch-action: manipulation;
}
h1, h2, h3, h4, .logo-main {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
button { cursor: pointer; font-family: inherit; border: none; transition: var(--transition); }

@keyframes skeleton-pulse {
    0%   { background-color: var(--skeleton-base); }
    50%  { background-color: var(--skeleton-highlight); }
    100% { background-color: var(--skeleton-base); }
}
.skeleton-bg {
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    background-color: var(--skeleton-base);
    position: relative;
    overflow: hidden;
}
.skeleton-bg img { opacity: 0; transition: opacity 0.4s ease; }
.skeleton-bg img.loaded { opacity: 1; }

mark { background: var(--accent); color: var(--white-on-accent); border-radius: 3px; padding: 0 2px; }

.btn-reset-inline {
    background: none;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    font-family: inherit;
}
.btn-reset-inline:hover { color: var(--accent-hover); }