/*
 Theme Name:   Begarit Studio
 Theme URI:    https://begarit-studio.ru/
 Description:  WordPress theme for Begarit Shop
 Author:       by Begarit Studio
 Template:     storefront
 Version:      1.0.0
*/

/*
* {
  padding: 0px;
  margin: 0px;
  border: none;
}
*/

/* БАЗОВЫЙ СТИЛЬ (СВЕТЛЫЙ) */
body {
  background-color: #ffffff;
  color: #000000;
  font-family: "SF-Pro-Display-Semibold", sans-serif;
}





:focus {
    outline: none !important;
    box-shadow: none !important;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
a,
a:link,
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
aside,
nav,
footer,
header,
section,
main {
  display: block;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: inherit;
  font-weight: inherit;
}
ul,
ul li {
  list-style: none;
}
img {
  vertical-align: top;
}
img,
svg {
  max-width: 100%;
  height: auto;
}
address {
  font-style: normal;
}
input,
textarea,
button,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}
input::-ms-clear {
  display: none;
}
button,
input[type="submit"] {
  display: inline-block;
  box-shadow: none;
  background-color: transparent;
  background: none;
  cursor: pointer;
}
input:focus,
input:active,
button:focus,
button:active {
  outline: none;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
label {
  cursor: pointer;
}
legend {
  display: block;
}
input[type="file"] {
  max-width: 100%;
}


.edit-link,
.entry-title {
  display: none;
}

@font-face {
  font-family: "SF-Pro-Display-Bold";
  src: url("assets/fonts/SF-Pro-Display-Bold.otf");
  font-display: swap;
}

@font-face {
  font-family: "SF-Pro-Display-Semibold";
  src: url("assets/fonts/SF-Pro-Display-Semibold.otf");
  font-display: swap;
}

@font-face {
  font-family: "SF-Pro-Display-Regular";
  src: url("assets//fonts/SF-Pro-Display-Regular.otf");
  font-display: swap;
}

html {
    scroll-behavior: smooth;
}

.container {
  max-width: 1820px;
  margin: auto;
  padding: 0 20px;
}

.entry-content {
  max-width: 1820px;
  margin: auto;
  padding: 0 20px;
}


#primary,
#main,
.storefront-full-width-content .content-area {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}


.entry-content {
    width: 100% !important;        
    max-width: 1820px !important;
    margin-left: auto !important;  
    margin-right: auto !important; 
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

:root {
  /* --- БАЗОВЫЕ НАСТРОЙКИ (СВЕТЛАЯ ТЕМА ПО УМОЛЧАНИЮ) --- */
  /* Здесь прописываем значения для БЕЛОЙ темы. Они работают сразу, без JS. */
  --button-theme: #000;
  --icons-svg: #000; 
  
  --button: #ffffff;
  --button-bg: #000; /* Черная кнопка на белом фоне */
  
  --text-color: #000000; /* Черный текст */
  --text-botton-color: #fff;
  
  --nav-bg: #ffffff;
  --company-name-bg: #ffffff;
  --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  
  --service-card-bg: #fafafa;
  --service-card-border: #e4e4e7;
  --elips-bg: #fff;
  
  --tb-bg: #FAFAFA;
  --tb-br: #E4E4E7;
  --form-text-color: #000000;
  
  --hero-bg: url('assets/img/hero-bg-light.png');
  --vignette-left: linear-gradient(to right,#ffffff 10%,rgba(255, 255, 255, 0) 100%);
  --vignette-right: linear-gradient(to left,#ffffff 10%,rgba(255, 255, 255, 0) 100%);
  
  --burder-mune-span: #000;
  --bg-profile-menu: #fff;
  --order-bg: #FAFAFA;
  --order-border: #626262;
}

body.light {
  /* --- БАЗОВЫЕ НАСТРОЙКИ (СВЕТЛАЯ ТЕМА ПО УМОЛЧАНИЮ) --- */
  /* Здесь прописываем значения для БЕЛОЙ темы. Они работают сразу, без JS. */
  --button-theme: #000;
  --icons-svg: #000; 
  
  --button: #ffffff;
  --button-bg: #000; /* Черная кнопка на белом фоне */
  
  --text-color: #000000; /* Черный текст */
  --text-botton-color: #fff;
  
  --nav-bg: #ffffff;
  --company-name-bg: #ffffff;
  --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  
  --service-card-bg: #fafafa;
  --service-card-border: #e4e4e7;
  --elips-bg: #fff;
  
  --tb-bg: #FAFAFA;
  --tb-br: #E4E4E7;
  --form-text-color: #000000;
  
  --hero-bg: url('assets/img/hero-bg-light.png');
  --vignette-left: linear-gradient(to right,#ffffff 10%,rgba(255, 255, 255, 0) 100%);
  --vignette-right: linear-gradient(to left,#ffffff 10%,rgba(255, 255, 255, 0) 100%);
  
  --burder-mune-span: #000;
  --bg-profile-menu: #fff;
  --order-bg: #FAFAFA;
  --order-border: #626262;
}

/* --- СТИЛИ ДЛЯ ТЕМНОЙ ТЕМЫ (ПЕРЕОПРЕДЕЛЕНИЕ) --- */
/* Эти переменные сработают только если добавлен класс .dark */
body.dark {
  --button-theme: #fff;
  --icons-svg: #fff;
  
  --button: #000;
  --button-bg: #fff; /* Белая кнопка на черном фоне */
  
  --text-color: #ffffff; /* Белый текст */
  --text-botton-color: #000;
  
  --hero-bg: url('assets/img/hero-bg-dark.png');
  --vignette-left: linear-gradient(to right, #000 10%, rgba(0, 0, 0, 0) 100%);
  --vignette-right: linear-gradient(to left, #000 10%, rgba(0, 0, 0, 0) 100%);
  
  --nav-bg: #000;
  --company-name-bg: #0a0a0a;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  --service-card-bg: #070707;
  --service-card-border: #323232;
  --elips-bg: #000;
  
  --tb-bg: #070707;
  --tb-br: #565656;
  --form-text-color: #ffffff;
  
  --burder-mune-span: #fff;
  --bg-profile-menu: #000;
  --order-bg: #070707;
  --order-border: #323232;
  
  background-color: #000000;
  color: #ffffff;
}

/* Базовый Body (Светлый) */
body {
  background-color: #ffffff;
  color: #000000;
  font-family: "SF-Pro-Display-Semibold", sans-serif;
  /* Плавный переход цвета при смене темы */

}

/* Удалите блок body.light, он больше не нужен, так как светлая тема теперь в :root */


.dark-svg {
  display: block;
}
.light-svg {
  display: none;
}

body.dark .dark-svg {
  display: none;
}
body.dark .light-svg {
  display: block;
}

body.dark .dark-svg {
  display: none;
}
body.dark .light-svg {
  display: block;
}

h1 {
  font-family: "SF-Pro-Display-Bold", sans-serif;
  font-weight: 500;
}

p {
    font-family: "SF-Pro-Display-Regular", sans-serif;
    font-weight: 400;
};

/* foms */
/* 1. Контейнер формы */
/* Используем ID (#gform_wrapper_1) для перебивания стилей плагина */

#gform_1 {
   max-width: 800px;
   margin: auto;
}


#gform_wrapper_1,
.gform_wrapper.gravity-theme {
    background-color: var(--service-card-bg) !important;
    border: 1px solid var(--service-card-border) !important;
    border-radius: 15px !important;
    padding: 40px !important;
    max-width: 798px;
    margin: auto;
    margin-top: 60px;
}

#input_1_5_3_container > label {
	display: none;
}

/* 2. Заголовки и описания */
#gform_wrapper_1 .gform_heading .gform_title {
    font-family: "SF-Pro-Display-Semibold", sans-serif !important;
    color: var(--text-color) !important;
    font-size: 36px !important;
    text-align: center !important;
    margin-bottom: 10px !important;
}

#gform_wrapper_1 .gform_heading .gform_description {
    color: var(--color-grey-text, #626262) !important;
    text-align: center !important;
    font-family: "SF-Pro-Display-Regular", sans-serif !important;
    margin-bottom: 40px !important;
}



/* 3. Лейблы (Надписи над полями) */
#gform_wrapper_1 .gfield_label {
    font-family: "SF-Pro-Display-Regular", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-bottom: 8px !important;
    color: var(--text-color);
}

/* Звездочка обязательного поля */
#gform_wrapper_1 .gfield_required {
    color: #6E62FF !important;
}

/* 4. Поля ввода  */
#gform_wrapper_1 input[type=text],
#gform_wrapper_1 input[type=url],
#gform_wrapper_1 input[type=email],
#gform_wrapper_1 input[type=tel],
#gform_wrapper_1 input[type=number],
#gform_wrapper_1 textarea {
    background-color: transparent !important;
    background: transparent !important; /* Дублируем для надежности */
    border: 1px solid var(--border-card, #323232) !important;
    border-radius: 12px !important;
    padding: 20px 20px !important;
    font-family: "SF-Pro-Display-Regular", sans-serif !important;
    font-size: 16px !important;
    color: var(--text-main, #fff) !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Убираем внутренние отступы Gravity Forms, которые ломают высоту */
#gform_wrapper_1 .ginput_container {
    margin-top: 0 !important;
}

/* 5. Состояние фокуса (Активное поле) */
#gform_wrapper_1 input:focus,
#gform_wrapper_1 textarea:focus {
    border-color: #6E62FF !important;
    box-shadow: 0 0 0 4px rgba(110, 98, 255, 0.1) !important;
    outline: none !important;
}

/* 6. Кнопка отправки */
#gform_wrapper_1 .gform_footer input[type=submit] {
    background-color: var(--button-bg) !important;
    color: var(--text-botton-color) !important;
    font-family: "SF-Pro-Display-Semibold", sans-serif !important;
    font-size: 16px !important;
    padding: 18px 30px !important;
    border-radius: 12px !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity 0.3s, transform 0.2s !important;
    margin-top: 10px !important;
}

#gform_wrapper_1 .gform_footer input[type=submit]:hover {
    opacity: 0.9 !important;
    transform: scale(1.01) !important;
}

.gfield_required {
 font-size: 16px; 
}

#gform_1_validation_container {
  border-radius: 10px;
}

/* 2. Применяем этот цвет к полям ввода */
#gform_wrapper_1 input[type=text],
#gform_wrapper_1 input[type=email],
#gform_wrapper_1 input[type=tel],
#gform_wrapper_1 textarea {
    color: var(--form-text-color) !important;
    -webkit-text-fill-color: var(--form-text-color) !important; 
}

#gfield_description_1_7 {
  font-weight: 400;
  font-family: "SF-Pro-Display-Regular", sans-serif;
}

/* Страница входа */
#post-10 > div > div > form {
  max-width: 453px;
  margin: auto;
}

#post-10 > div > div > h2 {
  max-width: 453px;
  margin: auto;
  text-align: center;
  margin-bottom: 30px;
  font-size: 32px;
  font-family: "SF-Pro-Display-Semibold", sans-serif;
  color: var(--text-color);
}

#username, #password {
 border-radius: 10px !important;
  box-shadow: none !important;
  background-color: var(--service-card-bg) !important;
  border: 1px solid var(--service-card-border) !important;
  color: var(--text-color) !important;
}

#post-10 > div > div > form > p > label {
  font-size:  16px;
  font-family: "SF-Pro-Display-Regular", sans-serif;
  color: var(--text-color);
  padding-bottom: 10px;
}

#post-10 > div > div > form > p:nth-child(3) > label > span {
  color: #626262;
  padding: 0;
}

#post-10 > div > div > form > p:nth-child(3) > button {
  border-radius: 10px;
  margin-top: 25px;
  max-width: 453px;
  width: 100%;
  color: #fff;
  background-color: #6E62FF;
  font-weight: 300;
  margin-top: 0;
}

#post-10 > div > div > form > p:nth-child(2) > span > button {
  padding-top: 12px;
}

#post-10 > div > div > form > p:nth-child(2) > span > button:active {
    color: #6E62FF !important; 
}
/* 1. Цвет глазика в обычном состоянии (пароль скрыт) */
.show-password-input::after {
    color: var(--text-color) !important; /* Или любой другой цвет */
    transition: color 0.3s ease; /* Плавная анимация */
}

/* 2. Цвет глазика в АКТИВНОМ состоянии (когда пароль виден) */
.show-password-input.is-active::after {
    color: #6E62FF !important; /* Ваш фирменный фиолетовый */
}

/* 3. (Опционально) Цвет при наведении мышки */
.show-password-input:hover::after {
    color: #6E62FF !important; 
}

/* НОВЫЙ КОД ДЛЯ АВТОЗАПОЛНЕНИЯ */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
#username:-webkit-autofill,
#password:-webkit-autofill {
    /* 1. Используем переменную фона темы для перекрытия стандартного желтого фона */
    -webkit-box-shadow: 0 0 0 1000px var(--service-card-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--service-card-bg) inset !important;
    
    /* 2. Принудительно красим текст в цвет темы (решает проблему черного текста на черном) */
    -webkit-text-fill-color: var(--text-color) !important;
    
    /* 3. Цвет каретки (курсора ввода) */
    caret-color: var(--text-color) !important;
    
    /* 4. Убираем долгую транзицию, чтобы цвет менялся мгновенно при смене темы */
    transition: background-color 0s ease-in-out 0s !important;
    background-color: transparent !important;
}


/* Класс, который отменяет любые изменения при наведении */
#post-10 > div > div > form > p:nth-child(2) > span > button:hover,
#post-10 > div > div > form > p:nth-child(2) > span > button:focus,
#post-10 > div > div > form > p:nth-child(2) > span > button:active {
    background: inherit !important;      /* Не менять фон */
    color: inherit !important;           /* Не менять цвет текста */
    transform: none !important;          /* Не увеличивать/не двигать */
    box-shadow: none !important;         /* Убрать тень */
    opacity: 1 !important;               /* Не менять прозрачность */
    border-color: inherit !important;    /* Не менять цвет рамки */
    cursor: default !important;          /* (Опционально) Убрать курсор "рука" */
}


#post-10 > div > div > form > p.woocommerce-LostPassword.lost_password {
	display: none;
}
/* Адаптив */

@media (max-width: 1064px) {
  .hero .container h1 {
    font-size: 54px;
  }
}

@media (max-width: 768px) {
    #gform_wrapper_1 {
        padding: 20px !important;
    }
  
  body > main > div.hero > div.container > div {
    padding-top: 25px;
  }
}

@media (max-width: 512px) {
  .hero .container h1 {
    font-size: 48px;
    margin-bottom: 20px;
  }
  
  body > main > div.hero > div.container > div > p:nth-child(3) {
    font-size: 14px; 
  }
  
 .our-service .our-service-info h1 {
     font-size: 32px
  }
  
 .road-map  h1{
     font-size: 32px
  }
 
 .road-map > div > div > div > h1 {
    font-size: 28px
  }
  
   .road-map > div > div > div > p {
    font-size: 18px
  }
}

@media (max-width: 393px) {
  .hero .container h1 {
    font-size: 32px;
  }
  
    .hero .container p {
    font-size: 14px;
  }
}


/* -------------------------------- Отключение скрола -------------------------------- */

.no-scroll {
    overflow: hidden !important;
    height: 100vh !important; /* Критично для Safari/iOS */
    touch-action: none;       /* Отключает жесты прокрутки */
    width: 100% !important;
    position: fixed !important; /* Фиксируем страницу, чтобы она не "уезжала" */
}

/* -------------------------------- Профиль -------------------------------- */


#my-account-menu > div > div.user-avatar.avatar-upload > img {
 border-radius: 50%; 
}

#my-account-menu > div > div.user-avatar.avatar-upload:after {
 background-color: #6E62FF;
}

#my-account-menu > div > div.user-info > span.logout > a {
  padding: 13px 60px;
  margin-top: 20px !important;
  border-radius: 10px;
  background-color: var(--service-card-bg);
  border: 1px solid var(--service-card-border);
  color: var(--text-color);
}

#my-account-menu > div > div.user-info > span.user-email {
  padding-bottom: 20px !important;
}

#my-account-menu > ul > li > a {
   background-color: var(--service-card-bg);
   color: var(--text-color) !important;
}

#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > thead > tr > th,
#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr > td,
#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr > th,
#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr {
   background-color: var(--bg-profile-menu);
}

#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table {
  border-radius: 15px;
  border: 1px solid var(--order-border);
  
  /* Обязательные свойства для скругления таблиц: */
  border-collapse: separate !important; 
  border-spacing: 0;      /* Убирает щели между ячейками */
  overflow: hidden;       /* Обрезает фон ячеек по форме радиуса таблицы */
}


#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr.woocommerce-orders-table__row.woocommerce-orders-table__row--status-pending.order > td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions > a.woocommerce-button.button.view {
  display: none;
}

#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr.woocommerce-orders-table__row.woocommerce-orders-table__row--status-pending.order > td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions > a.woocommerce-button.button.cancel {
  max-width: 76px;
  width: 100%;
  text-align: center; 
}


#my-account-menu.layout-simple.position-vertical-left .myaccount-menu:before, #my-account-menu.layout-simple.position-vertical-left .myaccount-menu:after,
#my-account-menu.layout-simple.position-vertical-left .myaccount-menu:before, #my-account-menu.layout-simple.position-vertical-left .myaccount-menu:after,
#my-account-menu > ul > li > a {
   border: 1px solid var(--bg-profile-menu) !important;
  text-align: center;
}

#my-account-menu > ul > li > a{
  background-color: var(--bg-profile-menu) !important;
}

#my-account-menu > ul {
   max-width: 310px; 
}

#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr > td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
      display: flex;
      justify-content: space-between;
      align-items: center; 
}

#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr.woocommerce-orders-table__row.woocommerce-orders-table__row--status-completed.order > td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions > a {
  max-width: 230px;
  width: 100%; 
  text-align: center;
  border-radius: 10px;
  margin: 0;
  background-color: var(--bg-profile-menu) !important;
  border: 1px solid var(--order-border) !important;
  font-weight: 400;
  font-family: "SF-Pro-Display-Regular", sans-serif;
  color: var(--text-color);
}

#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr > td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions > a.woocommerce-button.button.pay {
  width: 50%!important; 
  text-align: center;
  border-radius: 10px;
  margin-right: 10px;
  color: var(--text-botton-color);
  background-color: #6E62FF;
  font-weight: 400;
  font-family: "SF-Pro-Display-Regular", sans-serif;
}

#post-10 > div.entry-content > div > div.woocommerce-MyAccount-content > table > tbody > tr > td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions > a.woocommerce-button.button.cancel {
  max-width: 90px;
  width: 100% !important; 
  text-align: center;
  border-radius: 10px;
  margin: 0;
  background-color: var(--bg-profile-menu) !important;
  border: 1px solid var(--order-border) !important;
  font-weight: 400;
  font-family: "SF-Pro-Display-Regular", sans-serif;
  color: var(--text-color)
}


/* ========================================================== */
/* FIX: ФУТЕР ВНИЗУ + КОНТЕНТ ВВЕРХУ (FINAL)                  */
/* ========================================================== */

/* 1. Настройка "каркаса" страницы */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    justify-content: flex-start !important; /* ЖЕСТКО прижимаем всё к верху */
}

/* 2. Настройка блока с контентом */
#primary.content-area{flex:1 0 auto!important;width:100%!important;max-width:1820px!important;margin:0 auto!important;padding:40px 20px 60px!important;box-sizing:border-box!important}

/* 3. Настройка футера */
.footer {
    flex-shrink: 0 !important;    
    width: 100% !important;
    margin-top: auto !important; 
}

body > header + .container:empty {
    display: none !important;
}


/* --- FIX: ПРОБЛЕМА С КЛАВИАТУРОЙ НА МОБИЛЬНЫХ --- */
input,input[type=email],input[type=password],input[type=tel],input[type=text],select,textarea{-webkit-user-select:text!important;user-select:text!important;pointer-events:auto!important;touch-action:manipulation!important}



/* Главная */


.card-img,.hero{background-repeat:no-repeat}.slide,.vignette{top:0;position:absolute}.hero-info h1,.hero-info p,.our-service-info p,.road-map-h1,.sm-btn,.studio-info h1,.studio-info p{text-align:center}.hero{background-size:cover;height:fit-content;background-position:center center;width:100%}@media (max-width:840px){.hero{background-size:contain;background-position:0 50px}}#smImage,.card-img{background-size:cover;background-position:center}.hero-info{padding-top:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-info h1{font-size:86px;margin-bottom:40px;font-family:SF-Pro-Display-Bold,sans-serif;color:var(--text-color)}.hero-info p{font-size:16px;color:#626262}.hero-info h1 span,.hero-info p span{color:#6e62ff}.hero-info p:first-child{margin-bottom:20px;display:flex;gap:10px;align-items:center}.hero-info p:nth-child(3){max-width:650px}.custom-slider-container{position:relative;width:100%;height:650px;overflow:hidden;perspective:2000px;margin-top:120px;contain:layout paint;will-change:transform}.custom-slider-wrapper{position:relative;width:100%;height:100%;transform-style:preserve-3d}.slide{width:768px;height:480px;left:50%;transition:transform .6s ease-in-out,opacity .6s ease-in-out;opacity:0;transform:translateX(-50%) scale(.5);border-radius:45px;box-shadow:0 5px 15px rgba(0,0,0,.15);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;will-change:transform,opacity}.slide.slide-active{opacity:1;transform:translateX(-50%) translateY(0) rotate(0) scale(1);z-index:10}.slide.slide-next-1{opacity:1;transform:translateX(calc(-50% + 350px)) translateY(32px) rotate(5deg) scale(.9);z-index:9}.slide.slide-next-2{opacity:1;transform:translateX(calc(-50% + 600px)) translateY(120px) rotate(10deg) scale(.8);z-index:8}.slide.slide-prev-1{opacity:1;transform:translateX(calc(-50% - 350px)) translateY(32px) rotate(-5deg) scale(.9);z-index:9}.slide.slide-prev-2{opacity:1;transform:translateX(calc(-50% - 600px)) translateY(120px) rotate(-10deg) scale(.8);z-index:8}.slide img{width:100%;height:100%;object-fit:cover}.vignette{bottom:0;z-index:11;pointer-events:none;width:350px}.vignette-left{left:0}.vignette-right{right:0}.vignette::after,.vignette::before{content:'';position:absolute;top:0;bottom:0;left:0;right:0}.vignette-left::before{background:linear-gradient(to right,#000 10%,rgba(0,0,0,0) 100%)}.vignette-right::before{background:linear-gradient(to left,#000 10%,rgba(0,0,0,0) 100%)}.vignette-left::after{background:linear-gradient(to right,#fff 10%,rgba(255,255,255,0) 100%);opacity:0}.vignette-right::after{background:linear-gradient(to left,#fff 10%,rgba(255,255,255,0) 100%);opacity:0}body.light .vignette::before{opacity:0}.sm-overlay.show,body.light .vignette::after{opacity:1}@media (max-width:1600px){.vignette{width:200px}.custom-slider-container{height:583px;margin-top:100px}.slide{width:640px;height:400px}.slide.slide-next-1{transform:translateX(calc(-50% + 292px)) translateY(27px) rotate(5deg) scale(.9)}.slide.slide-next-2{transform:translateX(calc(-50% + 500px)) translateY(100px) rotate(10deg) scale(.8)}.slide.slide-prev-1{transform:translateX(calc(-50% - 292px)) translateY(27px) rotate(-5deg) scale(.9)}.slide.slide-prev-2{transform:translateX(calc(-50% - 500px)) translateY(100px) rotate(-10deg) scale(.8)}}@media (max-width:1366px){.vignette{width:150px}.custom-slider-container{height:498px;margin-top:85px}.slide{width:546px;height:341px}.slide.slide-next-1{transform:translateX(calc(-50% + 249px)) translateY(23px) rotate(5deg) scale(.9)}.slide.slide-next-2{transform:translateX(calc(-50% + 427px)) translateY(85px) rotate(10deg) scale(.8)}.slide.slide-prev-1{transform:translateX(calc(-50% - 249px)) translateY(23px) rotate(-5deg) scale(.9)}.slide.slide-prev-2{transform:translateX(calc(-50% - 427px)) translateY(85px) rotate(-10deg) scale(.8)}}@media (max-width:1024px){.vignette{width:100px}.custom-slider-container{height:373px;margin-top:64px}.slide{width:410px;height:256px}.slide.slide-next-1{transform:translateX(calc(-50% + 187px)) translateY(17px) rotate(5deg) scale(.9)}.slide.slide-next-2{transform:translateX(calc(-50% + 320px)) translateY(64px) rotate(10deg) scale(.8)}.slide.slide-prev-1{transform:translateX(calc(-50% - 187px)) translateY(17px) rotate(-5deg) scale(.9)}.slide.slide-prev-2{transform:translateX(calc(-50% - 320px)) translateY(64px) rotate(-10deg) scale(.8)}}.our-service-info{display:flex;flex-direction:column;justify-self:center;align-items:center;margin-bottom:30px}.our-service-info h1{font-family:SF-Pro-Display-Semibold,sans-serif;font-size:48px;padding-bottom:15px;color:var(--text-color);margin:0;text-align:center}.our-service-info p{font-family:SF-Pro-Display-Regular,sans-serif;font-size:16px;padding-bottom:20px;color:#626262;color:var(--text-color);margin:0}.service-card-info h1,.sm-title{font-family:SF-Pro-Display-Semibold,sans-serif}.our-service-info a{color:var(--button);font-size:13px;background-color:var(--button-bg);padding:15px 20px;border-radius:12px}.service-card{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;gap:40px;padding-bottom:20px;max-width:1200px;margin:auto}.service-card-item{cursor:pointer;max-width:100%;width:100%;height:100%;display:flex;flex-direction:column;border:1px var(--service-card-border) solid;border-radius:15px;background-color:var(--service-card-bg);box-shadow:0 10px 10px -4px rgba(0,0,0,.04),0 2px 2px -2px rgba(0,0,0,.1),0 1px 1px -1px rgba(0,0,0,.11);margin:0;transition:transform .2s,box-shadow .2s}.service-card-item:hover{transform:translateY(-5px);box-shadow:0 15px 25px rgba(0,0,0,.1)}.card-img{height:280px;width:auto;margin:20px;border-radius:10px;display:flex;justify-content:flex-end}.card-img span{font-size:14px;color:#000;background-color:rgba(255,255,255,.7);padding:6px 11px;border-radius:20px;height:fit-content;margin-top:20px;margin-right:20px}.service-card-info{padding:20px;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between}.service-card-info h1{font-size:24px;color:var(--text-color);max-width:290px;padding-bottom:20px;margin:0}.div2 img,.div3 img,.div4 img,.div5 img{max-width:32px;max-height:32px}.service-price{display:flex;align-items:center;justify-content:space-between}.service-price p,.service-price span{font-size:16px;font-family:SF-Pro-Display-Regular,sans-serif;color:var(--text-color);margin:0}.service-price span{font-size:14px}@media (max-width:1250px){.service-card{grid-template-columns:repeat(2,1fr);max-width:800px}}@media (max-width:800px){.vignette{width:75px}.custom-slider-container{height:291px;margin-top:50px}.slide{width:320px;height:200px}.slide.slide-next-1{transform:translateX(calc(-50% + 146px)) translateY(13px) rotate(5deg) scale(.9)}.slide.slide-next-2{transform:translateX(calc(-50% + 250px)) translateY(50px) rotate(10deg) scale(.8)}.slide.slide-prev-1{transform:translateX(calc(-50% - 146px)) translateY(13px) rotate(-5deg) scale(.9)}.slide.slide-prev-2{transform:translateX(calc(-50% - 250px)) translateY(50px) rotate(-10deg) scale(.8)}.service-card{grid-template-columns:1fr}.service-card-item{max-width:380px!important;width:100%}.service-card-info,.service-card-info h1{min-height:auto}}.sm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);backdrop-filter:blur(1px);z-index:99999;display:none;justify-content:center;align-items:center;padding:15px;opacity:0;transition:opacity .3s}.sm-body,.sm-modal{flex-direction:column;display:flex}body.modal-open{overflow:hidden!important}.sm-modal{background-color:var(--service-card-bg);border:1px solid var(--service-card-border);width:100%;max-width:580px;border-radius:20px;padding:0;position:relative;box-shadow:0 20px 40px rgba(0,0,0,.3);max-height:90vh;overflow:hidden}#simpleModalOverlay .sm-close{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex-shrink:0!important;position:absolute;top:25px;right:25px;background:rgba(255,255,255,.9)!important;border-radius:50%;border:none!important;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:20;padding:0!important;margin:0!important;box-shadow:0 4px 12px rgba(0,0,0,.1);color:#000!important;transition:.3s}#simpleModalOverlay .sm-close:hover{transform:scale(1.1);background:#fff!important}body.dark .sm-close{background:rgba(0,0,0,.6);color:#fff}#smImage{width:100%;height:480px;flex-shrink:0}@media (max-width:685px){#smImage{width:100%;height:380px;background-size:cover;background-position:center;flex-shrink:0}}@media (max-width:485px){#smImage{width:100%;height:280px;background-size:cover;background-position:center;flex-shrink:0}}.sm-body{padding:25px;overflow-y:auto;height:100%}.sm-title{font-size:26px;color:var(--text-color);margin:0 0 15px;line-height:1.2}.sm-meta{display:flex;gap:20px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid rgba(128,128,128,.2)}.sm-meta-item{display:flex;flex-direction:column}.sm-label{font-size:13px;color:#888;font-family:SF-Pro-Display-Regular,sans-serif}.sm-desc,.sm-value{color:var(--text-color)}.sm-value{font-size:18px;font-family:SF-Pro-Display-Semibold,sans-serif}.sm-desc{font-family:SF-Pro-Display-Regular,sans-serif;font-size:16px;line-height:1.5;opacity:.9;margin-bottom:25px}.sm-btn{margin-top:auto;display:block;width:100%;background-color:var(--button-bg);color:var(--text-botton-color);padding:16px;border-radius:12px;text-decoration:none;font-family:SF-Pro-Display-Semibold,sans-serif;font-size:16px}.div10 h1,.div11 h1,.div6 h1,.div7 h1,.div8 h1,.div9 h1,.road-map-h1{font-family:SF-Pro-Display-Semibold,sans-serif;color:var(--text-color);margin:0}@media (max-width:480px){.vignette{opacity:0;width:0}.slide,.slide img{border-radius:15px}.custom-slider-container{height:175px;margin-top:30px}.slide{width:192px;height:120px}.slide.slide-next-1{transform:translateX(calc(-50% + 88px)) translateY(8px) rotate(5deg) scale(.9)}.slide.slide-next-2{transform:translateX(calc(-50% + 150px)) translateY(30px) rotate(10deg) scale(.8)}.slide.slide-prev-1{transform:translateX(calc(-50% - 88px)) translateY(8px) rotate(-5deg) scale(.9)}.slide.slide-prev-2{transform:translateX(calc(-50% - 150px)) translateY(30px) rotate(-10deg) scale(.8)}.sm-image{height:180px}.sm-body{padding:20px}.sm-title{font-size:22px}.sm-desc{font-size:15px}}@media (max-width:320px){.sm-image{height:150px}.sm-title{font-size:20px}}.road-map-h1{font-size:48px;padding-bottom:30px;padding-top:30px}.parent{display:grid;grid-template-columns:1fr 80px 1fr;grid-template-rows:repeat(4,1fr);height:900px}.div2,.div3,.div4,.div5{grid-column-start:2;background-repeat:no-repeat;background-position:center;display:flex}.div2,.div3,.div4{background-image:var(--road-mapbg);justify-content:center}.div3{grid-row-start:2}.div4{grid-row-start:3}.div2 img,.div3 img,.div4 img{background-color:var(--elips-bg)}.div5{grid-row-start:4;justify-content:center}.div6,.div8{grid-column-start:3}.div6{grid-row-start:1}.div8{grid-row-start:3}.div7,.div9{grid-column-start:1;text-align:right}.div7{grid-row-start:2;justify-self:right}.div9{grid-row-start:4;justify-self:right}.div10,.div11{grid-column-start:3}.div10 h1,.div11 h1,.div6 h1,.div7 h1,.div8 h1,.div9 h1{font-size:32px;padding-bottom:15px}.div10 p,.div11 p,.div6 p,.div7 p,.div8 p,.div9 p{font-size:20px;font-family:SF-Pro-Display-Regular,sans-serif;color:#626262;max-width:385px;margin:0}.div10,.div11{display:none}.div10{grid-row-start:2}.div11{grid-row-start:4}@media (max-width:785px){.div10,.div11{display:block}.parent{grid-template-columns:80px 1fr;height:900px;padding:40px 15px}.div2,.div3,.div4,.div5{grid-column-start:1}.div10,.div11,.div6,.div8{grid-column-start:2}.div7,.div9{display:none}.div10 p,.div11 p,.div6 p,.div8 p{max-width:645px}}.studio-info h1{color:var(--text-color);font-size:48px;font-family:SF-Pro-Display-Semibold,sans-serif}.studio-info p{color:#626262;font-size:16px;font-family:SF-Pro-Display-Regular,sans-serif}.studio-info a{color:#6e62ff;text-decoration:underline}.table-container{max-width:1200px;width:100%;height:444px;border:1px solid var(--tb-br);border-radius:19px;background-color:var(--tb-bg);color:#fff;padding:5px 60px;box-sizing:border-box;display:flex;flex-direction:column;margin:auto auto 100px}table{width:100%;border-collapse:collapse;table-layout:fixed;height:434px}td,th{text-align:left;vertical-align:top;padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--tb-br);border-top:none}th{color:#a0a0a0;padding-top:15px!important;padding-bottom:15px!important}thead tr{border-top:1px solid var(--tb-br)}tbody tr:last-child td{border-bottom:none}td:first-child,th:first-child{width:290px;color:var(--text-color)}td:last-child,th:last-child{padding-left:120px;color:var(--text-color)}body>main>div.container>div.table-container>table>tbody>tr>td{background-color:var(--tb-bg)}body>main>div.container>div.table-container>table>thead>tr>th:first-child,body>main>div.container>div.table-container>table>thead>tr>th:nth-child(2){border-top:1px solid var(--tb-bg)}@media (max-width:1240px){.table-container{width:100%;height:auto;padding:20px}td:last-child,th:last-child{padding-left:20px}td:first-child,th:first-child{width:40%}}body>main>div.container>div>table>thead>tr>th{background-color:var(--tb-bg);font-weight:500}body>main>div.container>div>table>tbody>tr>td{background-color:var(--tb-bg);font-family:SF-Pro-Display-Regular,sans-serif;font-size:17px}@media (max-width:896px){.studio-info,.table-container{display:none}}



/* Футер */

.footer,.footer-container{width:100%;box-sizing:border-box}.footer-legal a,.footer-link{text-decoration:none;transition:color .3s}.footer{background-color:#000;color:#fff;padding:80px 0 40px;position:relative;left:50%;transform:translateX(-50%);clear:both;flex-shrink:0;min-height:522px}.footer-container{max-width:1820px;margin:0 auto;padding-left:32px;padding-right:32px}.footer-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:60px;align-items:start;padding-bottom:17px;display:flex;justify-content:space-between;flex-wrap:wrap;padding-top:40px}.footer-info{max-width:100%}.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:24px}.footer-logo-img{width:32px;height:32px;flex-shrink:0}.footer-logo-text{font-family:Unbounded,sans-serif;font-size:32px;font-weight:600;color:#fff}.footer-description,.footer-link{font-family:"Open Sans",sans-serif}.footer-description,.footer-legal a:hover{color:rgba(255,255,255,.8)}.footer-description{font-size:13px;line-height:1.6;margin-top:16px;max-width:640px}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;max-width:572px}.footer-column h3{font-family:Unbounded,sans-serif;font-size:20px;font-weight:500;margin-bottom:32px;color:#fff}.footer-column a{font-size:15px;margin-bottom:20px;color:#fff}.footer-link{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:12px;color:#fff}.footer-link:hover{color:#fff}.footer-link svg{flex-shrink:0}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap;gap:16px;font-size:16px;color:#fff}.footer-credits,.footer-legal{font-family:"Open Sans",sans-serif;font-size:12px;gap:16px;display:flex}.footer-bottom a{font-size:13px;color:#fff}.footer-credits,.footer-legal,.footer-legal a{color:rgba(255,255,255,.5)}.footer-legal{align-items:center;flex-wrap:wrap}.footer-legal a{white-space:nowrap}.footer-credits{flex-wrap:wrap;white-space:nowrap}@media (max-width:1200px){.footer-content{gap:80px}.footer-info{max-width:480px}}@media (max-width:1024px){.footer{padding:80px 0 40px}.footer-content{grid-template-columns:1fr;gap:60px}}@media (max-width:768px){.footer-links{grid-template-columns:repeat(2,1fr);gap:40px}.footer-bottom{flex-direction:column;gap:20px;text-align:center}.footer-legal{flex-direction:column;justify-content:left;gap:8px}.footer-credits{display:flex;justify-content:space-between;width:100%}.footer-legal{align-items:start;width:100%}}@media (max-width:480px){.footer{padding:60px 0 30px}.footer-links{grid-template-columns:1fr;gap:30px}.footer-logo-text{font-size:24px}.footer-description{font-size:14px}.footer-credits,.footer-legal{font-size:12px}}@media (max-width:370px){#app{padding:24px}.footer-credits,.footer-legal{font-size:11px}.footer-description,.footer-link{font-size:14px}.footer-column h3{font-size:16px}}@media (max-width:330px){.footer-credits,.footer-legal{font-size:9px}}html{overflow-x:hidden}body{padding:0;margin:0}.site-content{width:100%;display:flex;justify-content:center}#primary.content-area{width:100%;max-width:1600px;margin:5% auto 0;padding:0 32px;box-sizing:border-box;flex:0 1 auto}body>footer>div>div.footer-content>div.footer-info>p:nth-child(3){color:#ccc!important}

/* Нав меню */

.left-nav,nav{display:flex;align-items:center}.site-header-wrapper,.site-header-wrapper:before,.site-header:after{border:none;box-shadow:none;margin:0!important}.site-header{position:sticky;position:-webkit-sticky;top:0;width:100%;z-index:1000;background-color:var(--nav-bg,#fff);box-shadow:var(--box-shadow);padding-top:30px;padding-bottom:30px;transition:padding .3s}#themeButton,.burger-btn{background:0 0;cursor:pointer}@media (max-width:782px){.site-header{padding-top:20px;padding-bottom:20px}}nav{justify-content:space-between;margin-top:0;margin-bottom:0;height:77px}.right-nav a{background-color:var(--button-bg);color:var(--text-botton-color);padding:9px 27px;border-radius:10px}.left-nav{gap:50px}.left-nav ul,.right-nav{align-items:center;display:flex}.left-nav svg{padding-right:10px}.left-nav ul{gap:50px;margin:0}.left-nav ul li a{text-decoration:none;color:var(--text-color);font-size:16px;font-weight:500}.right-nav{gap:20px}.left-nav h1,.mm-header h1{align-items:center;margin:0}.left-nav h1{display:flex;font-size:28px;font-family:SF-Pro-Display-Bold,sans-serif;color:var(--text-color)}.mm-header h1,.mm-links a{font-size:24px;color:#000}#themeButton{border:none;padding:0}.right-nav .header-avatar-link{background-color:transparent;padding:0;border-radius:50%}.right-nav .header-avatar-link .avatar{width:57px;height:57px;border-radius:50%;object-fit:cover;display:block}.burger-btn{display:none;border:none;padding:5px;z-index:1001}#mobileMenu>div.mm-header>button>svg,.mobile-menu-overlay{background-color:#fff}.burger-icon{width:24px;height:18px;display:flex;flex-direction:column;justify-content:space-between}.burger-icon span{display:block;width:100%;height:2px;background-color:#000;border-radius:2px}.mobile-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;height:100dvh;z-index:2000;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4, 0, .2, 1);display:flex;flex-direction:column;overflow-y:auto}.mobile-menu-overlay.active{transform:translateX(0)}.mm-header{display:flex;justify-content:space-between;align-items:center;padding:40px 30px 20px}.mm-header h1{display:flex;gap:10px}.mm-close-btn{background:0 0;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#000}.mm-links{flex-grow:1;padding:20px 30px;list-style:none;margin:0;display:flex;flex-direction:column;gap:20px}.mm-auth-btn,.mm-links a{display:block;text-decoration:none}.mm-footer{padding:30px 30px 50px;margin-top:auto;padding-bottom:calc(30px + env(safe-area-inset-bottom))}.mm-auth-btn{width:100%;background-color:#000;color:#fff;text-align:center;padding:12px 0;border-radius:10px;font-size:18px}.mm-user-profile{display:flex;align-items:center;justify-content:space-between;padding-top:10px}.mm-user-info{display:flex;align-items:center;gap:25px;text-decoration:none;color:inherit}.mm-user-info .avatar{width:57px;height:57px;border-radius:50%;object-fit:cover}.mm-user-details{display:flex;flex-direction:column}.mm-user-name{font-size:18px;color:#000;line-height:1.2}.mm-user-role{font-size:16px;color:#666;margin-top:5px}.mm-logout-link{color:#000;padding:8px;display:flex}@media (max-width:992px){.site-header{position:relative!important;top:auto!important;left:auto!important;transform:none!important;height:auto!important;padding-top:20px;padding-bottom:20px}body{padding-top:0!important}.site-header+.container{margin-top:20px!important}#themeButton,.left-nav ul,.right-nav .header-avatar-link,.right-nav a{display:none!important}.burger-btn{display:block}.container{padding:0 20px}}body>header>div.container>nav>div.right-nav>button.burger-btn>div>span{background-color:var(--burder-mune-span)}body>header>div.container>nav>div.right-nav>button.burger-btn:hover{background-color:var(--button)} 




/* --- ИСПРАВЛЕННЫЙ КОД ДЛЯ ВИНЬЕТКИ --- */

/* Общие настройки виньетки */
.vignette {
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 11;
  pointer-events: none;
  width: 350px;
  /* Плавный переход цвета при смене темы */
  transition: background 0.3s ease-in-out; 
}

/* Левая виньетка берет цвет из переменной */
.vignette-left {
  left: 0;
  background: var(--vignette-left); 
}

/* Правая виньетка берет цвет из переменной */
.vignette-right {
  right: 0;
  background: var(--vignette-right);
}

/* Удаляем старую сложную логику с ::before и ::after */
.vignette::after,
.vignette::before {
  display: none !important;
  content: none !important;
}

/* Адаптив (размеры оставляем как были у тебя) */
@media (max-width: 1600px) { .vignette { width: 200px; } }
@media (max-width: 1366px) { .vignette { width: 150px; } }
@media (max-width: 1024px) { .vignette { width: 100px; } }
@media (max-width: 800px)  { .vignette { width: 75px; } }
@media (max-width: 480px)  { .vignette { width: 0; opacity: 0; } }


@media (max-width: 393px) {
 body > header {
   margin-bottom: 20px !important;
  }
}