:root{
    /* Основные цвета */
    --skton-primary: #1976d2;
    --skton-secondary: #42a5f5;
    --skton-accent: #ff6b35;
    --skton-success: #4caf50;
    --skton-warning: #ff9800;
    --skton-error: #f44336;
    --skton-info: #2196f3;
    
    /* Нейтральные цвета */
    --skton-white: #ffffff;
    --skton-light: #f8f9fa;
    --skton-gray: #6c757d;
    --skton-dark: #343a40;
    --skton-black: #000000;
    
    /* Фоны */
    --skton-body-bg: #ffffff;
    --skton-hero-bg: linear-gradient(135deg, var(--skton-primary) 0%, var(--skton-secondary) 100%);
    --skton-menu-bg: #1976d2;
    --skton-card-bg: var(--skton-white);
    --skton-footer-bg: #333333;
    
    /* Отступы */
    --skton-body-padding: 0;
    --skton-body-margin: 0;
    --skton-container-padding: 1rem;
    --skton-section-padding: 2rem 0;
    --skton-card-padding: 1.5rem;
    --skton-button-padding: 0.75rem 1.5rem;
    
    /* Размеры */
    --skton-body-width: 100%;
    --skton-body-height: 100vh;
    --skton-hero-height: 40vh;
    --skton-menu-height: 4rem;
    --skton-brand-height: 1.5rem;
    --skton-button-height: 2.5rem;
    --skton-card-height: auto;
    
    /* Тени */
    --skton-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --skton-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --skton-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --skton-shadow-xl: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    
    /* Радиусы */
    --skton-radius-sm: 4px;
    --skton-radius-md: 8px;
    --skton-radius-lg: 12px;
    --skton-radius-xl: 16px;
    --skton-radius-full: 50%;
    
    /* Шрифты */
    --skton-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --skton-font-size-sm: 0.875rem;
    --skton-font-size-base: 1rem;
    --skton-font-size-lg: 1.125rem;
    --skton-font-size-xl: 1.25rem;
    --skton-font-size-2xl: 1.5rem;
    --skton-font-size-3xl: 1.875rem;
    --skton-font-size-4xl: 2.25rem;
    
    /* Переходы */
    --skton-transition-fast: 0.15s ease-in-out;
    --skton-transition-base: 0.3s ease-in-out;
    --skton-transition-slow: 0.5s ease-in-out;

    /* Переменные для меню */
    --skton-menu-text: #ffffff;
    --skton-menu-hover-bg: rgba(255, 255, 255, 0.1);
    --skton-menu-link-padding-y: 10px;
    --skton-menu-link-padding-x: 12px;

    /* Dropdown/mega */
    --skton-mega-bg: #ffffff;
    --skton-mega-text: #333333;
    --skton-mega-shadow: 0 6px 20px rgba(0,0,0,.12);
    --skton-mega-min-width: 640px;
    --skton-mega-gap: 16px;
    --skton-mega-columns: 4; /* число колонок по умолчанию */
    --skton-mega-col-min: 180px; /* минимальная ширина колонки */
    
    /* Прочее */
    --skton-shadow-sm: 0 1px 3px rgba(0,0,0,.12);
}



.badge{ background: #1976d2; color: white; padding: 0.25rem 0.5rem; border-radius: 12px; font-size: 0.8rem; margin-right: 0.5rem; }
.bg-accent{ background-color: var(--skton-accent); }.bg-error{ background-color: var(--skton-error); }.bg-info{ background-color: var(--skton-info); }
.bg-primary{ background-color: var(--skton-primary); }.bg-secondary{ background-color: var(--skton-secondary); }.bg-success{ background-color: var(--skton-success); }.bg-warning{ background-color: var(--skton-warning); }.brand-image{ height: 2rem; width: auto; margin-right: 0.5rem; border-radius: var(--skton-radius-sm); }
.brand-logo{ display: flex; align-items: center; text-decoration: none; color: var(--skton-white); font-size: var(--skton-font-size-4xl); font-weight: bold; padding-left: 10px; }
.brand-text{ color: var(--skton-white); }
.breadcrumb{  padding: 1rem 0; }
.breadcrumb a{ color: #1976d2; text-decoration: none; } .breadcrumb a:hover{ text-decoration: underline; } .button{ padding: var(--skton-button-padding); height: var(--skton-button-height); border-radius: var(--skton-radius-sm); border: none; cursor: pointer; font-size: var(--skton-font-size-base); font-weight: 500; text-decoration: none; display: inline-block; text-align: center; transition: all var(--skton-transition-base); box-shadow: var(--skton-shadow-sm); line-height: 100%; margin: 0; }
.button-primary{ background: var(--skton-primary); color: var(--skton-white); }
.button-primary:hover{ background: #1565c0; box-shadow: var(--skton-shadow-md); transform: translateY(-1px); }
.button-secondary{ background: var(--skton-secondary); color: var(--skton-white); }
.button-secondary:hover{ background: #1976d2; box-shadow: var(--skton-shadow-md); transform: translateY(-1px); }
.card{ background: var(--skton-card-bg); padding: var(--skton-card-padding); border-radius: var(--skton-radius-md); box-shadow: var(--skton-shadow-sm); height: var(--skton-card-height); border: 1px solid #e0e0e0; }
.card img{ border-radius: 4px 4px 0 0;  width: calc(100% + 3rem); object-fit: cover; }
.card-content h4{ margin-bottom: 1rem; color: #333; }
.cart-count{ background: var(--skton-accent); color: var(--skton-white); font-weight: bold; padding: 0.2rem; border-radius: 50%; min-width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; position: absolute; top: -0.25rem; left: -0.25rem; }
.cart-link{ color: var(--skton-white); text-decoration: none;  display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border-radius: var(--skton-radius-sm); transition: all var(--skton-transition-base); position: relative; }
.cart-link:hover{ background: rgba(255, 255, 255, 0.1); color: var(--skton-secondary); }
.cart-section{ position: relative; }
.cart-text{ font-weight: 500; }
.category-description{ font-size: 1.1rem; color: #666; margin-top: 1rem; }
.category-header{ text-align: center; margin-bottom: 3rem; padding: 2rem; background: #f8f8f8; border-radius: 4px; }
.category-image{ border-radius: 4px; margin: 1rem 0; max-height: 300px; object-fit: cover; }
.contact-info{ display: flex; align-items: center; }
.contact-link{ color: var(--skton-white); text-decoration: none; font-size: var(--skton-font-size-2xl); display: flex; align-items: center; gap: 0.25rem; }
.contact-link:hover{ color: var(--skton-secondary); }
.container{ padding: var(--skton-container-padding); }
.cta{     background: #e1e4fe;
    background: radial-gradient(circle, #ffffff 0%, #e1e4fe  74%); background-repeat: no-repeat; background-size: cover;
    background-position: center center; padding: 3rem 0; text-align: center; }
.cta h3{ margin-bottom: 1rem; }
.cta p{ margin-bottom: 2rem; font-size: 1.1rem; }
.dropdown-link{ display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; color: var(--skton-text); text-decoration: none; font-size: var(--skton-font-size-sm); transition: all var(--skton-transition-base); border-bottom: 1px solid #f0f0f0; }
.dropdown-link i{ width: 16px; text-align: center; }
.dropdown-link:hover{ background: var(--skton-light); color: var(--skton-primary); }
.dropdown-link:last-child{ border-bottom: none; }
.empty-state{ text-align: center; padding: 3rem 0; color: #666; }
.featured-image{ border-radius: 4px; margin: 1rem 0; max-height: 400px; object-fit: cover; } .footer{ background: var(--skton-footer-bg); color: var(--skton-white); padding: var(--skton-section-padding); box-shadow: var(--skton-shadow-sm); }
.footer a{ color: #ccc; text-decoration: none; }
.footer a:hover{ color: white; }
.footer h5{ color: white; margin-bottom: 1rem; }
.footer li{ margin-bottom: 0.5rem; }
.footer ul{ list-style: none; margin: 0; padding: 0; }
.form-actions{ margin-top: 30px; padding-top: 20px; border-top: 1px solid #f1f2f6; display: flex; gap: 10px; }
textarea{ border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; font-size: 1.5rem; transition: border-color 0.3s ease; min-width: 500px; min-height: 400px; }
.form-control:focus{ border-color: #3498db; box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25); }
.h-full{ height: 100%; }.h-screen{ height: 100vh; }
.hero{ 
    border-radius: 0px 0px 50px 0px;
    box-shadow: 6px 6px 5px -6px rgba(0, 0, 0, 0.12);
    background: #7d87f5;
background: radial-gradient(circle, rgba(125, 135, 245, 1) 0%, rgba(70, 76, 252, 1) 100%); background-repeat: no-repeat; background-size: cover;
    background-position: center center;
    min-height: var(--skton-hero-height); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--skton-white); }
.hero h1{ color: white; margin-bottom: 1rem; }
.hero-subtitle{ font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; }
.main-content{ padding: 2rem 0; }
.mega-col-list{  list-style:none;  margin:0;  padding:0;  }
.mega-col-list li a{  display:block;  padding:4px 0;  color: var(--skton-mega-text);  text-decoration:none;  }
.mega-col-title{  font-weight:600;  display:block;  margin-bottom:6px;  color: var(--skton-mega-text);  }
.mega-columns{ display:grid; grid-template-columns: repeat(var(--skton-mega-columns), minmax(var(--skton-mega-col-min), 1fr)); gap: var(--skton-mega-gap); }
.mega-dropdown{ position:absolute;  left:0;  top:100%; background: var(--skton-mega-bg);  padding: var(--skton-mega-gap);  box-shadow: var(--skton-mega-shadow); z-index:999;  display:none;  min-width: var(--skton-mega-min-width); }
.mega-item{  position:relative;  }
.mega-item > a{  display:block;  padding:var(--skton-menu-link-padding-y) var(--skton-menu-link-padding-x);  color: var(--skton-menu-text);  text-decoration:none;  }
.mega-item:hover .mega-dropdown{  display:block;  }
.mega-menu{  display:flex;  gap:var(--skton-mega-gap);  list-style:none;  margin:0;  padding:0;  }
.mobile-menu{ display: none; background: var(--skton-menu-bg); border-top: 1px solid rgba(255, 255, 255, 0.1); position: absolute; top: 100%; left: 0; right: 0; z-index: 999; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-height: 80vh; overflow-y: auto; }
.mobile-menu-item{ border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; }
.mobile-menu-link{ color: var(--skton-menu-text); text-decoration: none; padding: 1rem; display: block; font-size: 1.1rem; padding-right: 3rem; }
.mobile-menu-link:hover{ background: rgba(255, 255, 255, 0.1); }
.mobile-menu-list{ list-style: none; margin: 0; padding: 0; }
.mobile-menu-toggle{ display: none; background: none; border: none; color: var(--skton-menu-text); font-size: 2rem; cursor: pointer; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); border-radius: 4px; transition: background-color 0.3s ease; height: 38px; padding: 0 10px; text-align: center; font-weight: 600; line-height: 100%; letter-spacing: .1rem;  text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; }
.mobile-menu-toggle i{ transition: transform 0.3s ease; }
.mobile-menu-toggle:hover{ background: rgba(255, 255, 255, 0.1); }
.mobile-menu.active{ display: block; animation: slideDown 0.3s ease-out; }
.mobile-submenu{ list-style: none; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.1); display: none; }
.mobile-submenu-link{ color: white; text-decoration: none; padding: 0.75rem 2rem; display: block; font-size: 0.9rem; }
.mobile-submenu-link:hover{ background: rgba(255, 255, 255, 0.1); }
.mobile-submenu-toggle{ position: absolute; right: 1rem; top: 0; background: none; border: none; color: var(--skton-menu-text); font-size: 1.2rem; cursor: pointer; display: inline-block; height: 38px; padding: 0 30px; text-align: center; font-weight: 600; cursor: pointer; box-sizing: border-box; }
.mobile-submenu-toggle:hover{ background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.mobile-submenu.active{ display: block; }
.navbar{ padding: 1rem 0; position: relative; background: var(--skton-menu-bg); height: var(--skton-menu-height); display: flex; align-items: center; box-shadow: var(--skton-shadow-sm); background-color: var(--skton-dark); }
.navbar-actions{ display: flex; align-items: flex-end; justify-content: flex-end; gap: 1rem; padding-right: 10px; }
.navbar-brand{ font-size: var(--skton-brand-height); font-weight: bold; color: var(--skton-white); text-decoration: none; }
.navbar-brand-section{ background: #7d87f5; background: radial-gradient(circle, rgba(125, 135, 245, 1) 0%, rgba(70, 76, 252, 1) 100%); background-repeat: no-repeat; background-size: cover;
    background-position: center center; padding: 1rem 0; box-shadow: var(--skton-shadow-sm); }
.page-actions{ margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #eee; } .page-actions .button{ margin-right: 1rem; }
.page-body{ margin: 2rem 0; line-height: 1.6; } .page-content{ background: white; padding: 2rem; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .page-meta{ background: #f8f8f8; padding: 1rem; border-radius: 4px; margin: 1rem 0; font-size: 0.9rem; color: #666; } .page-meta p{ margin: 0.25rem 0; } .pagination{ text-align: center; margin: 2rem 0; } .pagination .button{ margin: 0 0.5rem; } .rounded-full{ border-radius: var(--skton-radius-full); }.rounded-lg{ border-radius: var(--skton-radius-lg); }.rounded-md{ border-radius: var(--skton-radius-md); }.rounded-sm{ border-radius: var(--skton-radius-sm); }.rounded-xl{ border-radius: var(--skton-radius-xl); }.search-box{ position: relative; }
.search-button{ position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); background: var(--skton-primary); border: none; color: var(--skton-white); padding: 0.25rem 0.5rem; border-radius: var(--skton-radius-sm); cursor: pointer; }
.search-input{ padding: 0.5rem 2.5rem 0.5rem 0.75rem; border: 1px solid #ddd; border-radius: var(--skton-radius-sm); font-size: var(--skton-font-size-sm); width: 200px; }.section{ padding: var(--skton-section-padding); }
.shadow-lg{ box-shadow: var(--skton-shadow-lg); }.shadow-md{ box-shadow: var(--skton-shadow-md); }.shadow-sm{ box-shadow: var(--skton-shadow-sm); }.shadow-xl{ box-shadow: var(--skton-shadow-xl); }
.social-link{ color: var(--skton-white); text-decoration: none; font-size: 1.25rem; transition: all var(--skton-transition-base); }
.social-link:hover{ color: var(--skton-secondary); transform: scale(1.1); }
.social-links{ display: flex; align-items: center; gap: 0.5rem; }
.subcategories, .category-pages{ margin: 3rem 0; }
.text-accent{ color: var(--skton-accent); }.text-error{ color: var(--skton-error); }.text-info{ color: var(--skton-info); }
.text-primary{ color: var(--skton-primary); }.text-secondary{ color: var(--skton-secondary); }.text-success{ color: var(--skton-success); }.text-warning{ color: var(--skton-warning); }.user-account{ position: relative; }
.user-account:hover .user-dropdown{ opacity: 1; visibility: visible; transform: translateY(0); }
.user-actions{ display: flex; align-items: center; gap: 1rem; margin-left: 1rem; }
.user-dropdown{ position: absolute; top: 100%; right: 0; background: var(--skton-white); border-radius: var(--skton-radius-sm); box-shadow: var(--skton-shadow-lg); min-width: 180px; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--skton-transition-base); }
.user-link{ color: var(--skton-white); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border-radius: var(--skton-radius-sm); transition: all var(--skton-transition-base); cursor: pointer; }
.user-link:hover{ background: rgba(255, 255, 255, 0.1); color: var(--skton-secondary); }
.user-text{ font-weight: 500; }
.w-full{ width: 100%; }.w-screen{ width: 100vw; }.widget{ margin-bottom: 1rem; padding: 1rem; background: #f8f8f8; border-radius: 4px; }
body{ font-family: var(--skton-font-family); background-color: var(--skton-body-bg); padding: var(--skton-body-padding); margin: var(--skton-body-margin); width: var(--skton-body-width); min-height: var(--skton-body-height); }
form{ margin-bottom: 0; }
li{ margin: 0.5rem; }

.messages-wrapper { position: fixed; top: 20px; right: 20px; width: 100%; max-width: 350px; z-index: 1050; }
.message-box { padding: 15px 35px 15px 15px; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 4px; position: relative; font-size: 16px; line-height: 1.4; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.message-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.message-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.message-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.message-error { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.message-close { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); padding: 0; cursor: pointer; background: transparent; border: 0; font-size: 21px; font-weight: bold; line-height: 1; color: inherit; opacity: 0.5; transition: opacity 0.2s; }
.message-close:hover { opacity: 0.8; }

@keyframes slideDown{ from {     opacity: 0;     transform: translateY(-10px); } to {     opacity: 1;     transform: translateY(0); } }
@media (max-width: 768px){  .mobile-menu-toggle {     display: block; }  .navbar-actions {     flex-direction: column;     gap: 0.5rem; }  .search-input {     width: 150px; }  .user-actions {     flex-direction: column;     gap: 0.5rem;     margin-left: 0; }  .user-dropdown {     right: auto;     left: 0;     min-width: 160px; }  .user-text, .cart-text {     display: none; }  .user-link, .cart-link {     padding: 0.5rem;     justify-content: center; }  .desktop-menu{     display: none !important; } .mega-menu{     display: none !important; } .mobile-menu{     display: none; } .mobile-menu-link{     font-size: 1rem;     padding: 1.2rem 1rem; } .mobile-menu-toggle{     display: block; } .mobile-menu.active{     display: block; } .mobile-submenu-link{     font-size: 0.9rem;     padding: 0.8rem 2.5rem; }
 .navbar {     position: relative; }  :root{     --skton-hero-height: 50vh;     --skton-menu-height: 3.5rem;     --skton-container-padding: 0.5rem;     --skton-section-padding: 1.5rem 0;     --skton-card-padding: 1rem; } }
@media (max-width: 480px){ .mobile-menu{     max-height: 70vh; } .mobile-menu-link{     font-size: 0.95rem;     padding: 1rem 0.8rem; } .mobile-menu-toggle{     right: 0.5rem;     font-size: 1.3rem; } .mobile-submenu-link{     font-size: 0.85rem;     padding: 0.7rem 2rem; } .search-input{     width: 120px; }  .social-links{     gap: 0.25rem; }  :root{     --skton-hero-height: 40vh;     --skton-menu-height: 3rem;     --skton-container-padding: 0.25rem;     --skton-section-padding: 1rem 0;     --skton-card-padding: 0.75rem; } }
/* Стили для бокового меню */.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li { margin-bottom: 0.5rem; }
.sidebar-menu li:last-child { margin-bottom: 0; }
.sidebar-menu a { display: block; padding: 0.5rem 0.75rem; color: var(--skton-primary); text-decoration: none; border-radius: 4px; transition: all 0.3s ease; border-left: 3px solid transparent; }
.sidebar-menu a:hover { background-color: rgba(25, 118, 210, 0.1); border-left-color: var(--skton-primary); color: var(--skton-primary); text-decoration: none; }
.sidebar-menu a:active { background-color: rgba(25, 118, 210, 0.2); }

/* Вложенные элементы меню */.sidebar-menu ul { list-style: none; padding: 0; margin: 0.5rem 0 0 1rem; }
.sidebar-menu ul li { margin-bottom: 0.25rem; }
.sidebar-menu ul a { font-size: 0.9rem; padding: 0.25rem 0.5rem; color: var(--skton-secondary); }
.sidebar-menu ul a:hover { background-color: rgba(66, 165, 245, 0.1); border-left-color: var(--skton-secondary); color: var(--skton-secondary); }