/* =======================================================
   DESIGN SYSTEM CORE (DEEP SYNAPSE)
   Version: 2.1 — CLAMP (type) + STEPS (spacing) [MAX-WIDTH]
   ======================================================= */
   

   :root { color-scheme: light; }  

html, body {
  height: 100%;
  min-height: 100%;
  background: #fff;                /* ваш цвет панели для светлой темы */
}


/* === TOKENS — базовые (десктоп) === */
:root{
    
    /* Палитра */
    --white: #FFFFFF;
    --red: #BB3637;
    --red-hover: #A63031;
    --gray-background: #F3F3F7;
    --black: #15172C;
    --gray: #7D7F8A;
    --gray-hover: #E7E7EB;
    --gray-line: #D4D4DA;

  /* ===== Семантика ===== */
  
  --color-bg: var(--white); 
  --color-bg-muted: var(--gray-background);
  --color-bg-muted-hover: color-mix(in srgb, var(--color-bg-muted), var(--black) 7%);
  --color-text: var(--black); 
  --color-text-muted: var(--gray);
  --color-accent: var(--red);
  --color-accent-hover: color-mix(in srgb, var(--color-accent), black 15%);
  --color-line: var(--gray-line);

  /* Контейнеры/эффекты */
  --container-max: 1920px; --container-narrow: 1280px;
  
  --shadow-sm: 0px 54px 22px rgba(145, 145, 145, 0.01), 0px 31px 18px rgba(145, 145, 145, 0.03), 0px 14px 14px rgba(145, 145, 145, 0.04), 0px 3px 7px rgba(145, 145, 145, 0.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:0 12px 24px rgba(0,0,0,.20);
  
  --transition-base:.3s ease-in-out;
  --transition-cubic:.5s cubic-bezier(.4,0,.2,1);

  /* Типографика — однострочные clamp (универсальные pref) */
  --font-numbers: clamp(52px, 7vw, 104px);
  --font-h1:      clamp(36px, 2.6vw + 16px, 64px);
  --font-h2:      clamp(28px, 2vw + 16px, 48px);
  --font-h3:      clamp(24px, 1.2vw + 15px, 32px);
  --font-h4:      clamp(22px, 0.9vw + 14px, 26px);
  --font-h5:      clamp(20px, 0.6vw + 14px, 22px);
  --font-body-lg: clamp(17px, 0.4vw + 14px, 20px);
  --font-body-md: clamp(16px, 0.3vw + 13px, 18px);
  --font-body-sm: clamp(14px, 0.2vw + 12px, 16px);
  --font-caption: clamp(16px, 0.5vw + 14px, 20px);

  /* Spacing — базовые (десктоп) */
  --space-2xs: 12px; 
  --space-xs: 16px; 
  --space-sm: 24px; 
  --space-md: 32px; 
  --space-lg: 48px; 
  --space-xl: 64px; 
  --space-2xl: 96px;
  
  --space-gap: 16px;
  --space-section: 64px;   /* вертикальные межблоковые */
  --space-title: 48px;     /* от заголовка */
  --space-page-x: 32px;    /* боковые поля страницы/контейнера */

  /* Радиусы/иконки — базовые (десктоп) */
  --radius-xs: 8px; 
  --radius-sm: 16px; 
  --radius-md: 24px; 
  --radius-lg: 48px;
  
  --icon-sm: 16px; 
  --icon-md: 24px; 
  --icon-lg: 32px; 
  --icon-xl: 48px;

  /* Карточки — оси + совместимые шорткаты */
  --card-sm-v: 24px; --card-sm-h: 16px;
  --card-md-v: 32px; --card-md-h: 24px;
  --card-lg-v: 48px; --card-lg-h: 32px;
  --card-xl-v: 96px; --card-xl-h: 64px;
  
  --card-padding-sm: var(--card-sm-v) var(--card-sm-h);
  --card-padding-md: var(--card-md-v) var(--card-md-h);
  --card-padding-lg: var(--card-lg-v) var(--card-lg-h);
  --card-padding-xl: var(--card-xl-v) var(--card-xl-h);

  /* Кнопки — оси + совместимые шорткаты */
  --btn-sm-v: 12px; --btn-sm-h: 18px;
  --btn-md-v: 16px; --btn-md-h: 32px;
  --btn-lg-v: 24px; --btn-lg-h: 48px;
  
  --btn-padding-sm: var(--btn-sm-v) var(--btn-sm-h);
  --btn-padding-md: var(--btn-md-v) var(--btn-md-h);
  --btn-padding-lg: var(--btn-lg-v) var(--btn-lg-h);
  
    /* === Маска-уголок === */
   --mask-corner-right: url("https://static.tildacdn.com/tild6134-3039-4465-b762-643165626437/Corner.svg");
   --mask-corner-left: url(" https://static.tildacdn.com/tild6434-3836-4331-b935-356630373431/Corner-left.svg");
  
   /* === Размеры уголков === */
  --corner-size-lg: clamp(32px, 3.333vw, 64px); /* большие панели, секции */
  --corner-size-md: clamp(32px, 2.5vw, 48px);  /* карточки, меньшие панели */
  --corner-size-sm: clamp(24px, 2.5vw, 32px);  /* карточки, меньшие панели */
  
    /* --- Слои (z-index) --- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-overlay: 500;
    --z-modal: 900;
    --z-fixed: 990;
    --z-tooltip: 999;
}

/* === STEPS — сужаем экран → уменьшаем значения (max-width) === */

/* ≤ 1200px */
@media (max-width:1200px){
  :root{
    --space-section: 48px; 
    
    --radius-md: 20px; 
    --radius-lg: 40px;
    
    --icon-md: 22px; 
    --icon-lg: 28px; 
    --icon-xl: 42px;
    
    --card-md-v: 28px; 
    --card-md-h: 20px; 
    --card-lg-v: 36px; 
    --card-lg-h: 28px;
    
    --btn-lg-v: 14px; --btn-lg-h: 28px;
  }
}

/* ≤ 980px */
@media (max-width: 960px){
  :root{
    --space-2xs: 8px; 
    --space-xs: 12px; 
    --space-sm: 16px; 
    --space-md: 24px; 
    --space-lg: 32px; 
    --space-xl: 48px; 
    --space-2xl: 64px;
    
    --space-gap: 12px;
    
    --space-title: 32px;
    --space-section: 48px; 
    --space-page-x: 20px;
    
    --radius-md:18px; 
    --radius-lg:36px;
    
    --card-sm-v: 20px; --card-sm-h: 14px; 
    --card-md-v: 24px; --card-md-h: 16px; 
    --card-lg-v: 32px; --card-lg-h: 24px;
    
    --btn-sm-v: 10px; --btn-sm-h: 16px; 
    --btn-md-v: 16px; --btn-md-h: 24px; 
    --btn-lg-v: 20px; --btn-lg-h: 36px;
  }
}

/* ≤ 640px */
@media (max-width:640px){
  :root{
    
    --space-section: 32px; 
    --space-page-x: 16px;
    
    --radius-sm: 12px; 
    --radius-md: 16px; 
    --radius-lg: 32px;
    
    --icon-sm: 14px; 
    --icon-md: 20px; 
    --icon-lg: 26px; 
    --icon-xl: 36px;
    
  }
}

/* === BASE / TILDA === */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ background:var(--color-bg); color:var(--color-text); }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* Типографика */
h1{ 
    font-size: var(--font-h1) !important; 
    line-height: 110% !important; 
    font-weight: 500 !important;
    text-wrap: balance;  
}

h2{ 
    font-size: var(--font-h2) !important; 
    line-height: 110% !important; 
    text-wrap: balance;  
    font-weight: 500 !important;
}

h3{ 
    font-size: var(--font-h3) !important; 
    line-height: 120% !important; 
    text-wrap: balance;  
    font-weight: 500 !important;
}

h4{ 
    font-size: var(--font-h4) !important; 
    line-height: 120% !important; 
    text-wrap: balance;  
    font-weight: 500 !important;
}

h5{ 
    font-size: var(--font-h5) !important; 
    line-height: 120% !important; 
    text-wrap: balance;  
    font-weight: 500 !important;
}

/* Кнопки (Tilda) */
.t-btn, .sw-reviews-btn-form{
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
  height: auto !important; 
  gap: var(--space-gap) !important; 
  border-radius: var(--radius-xs) !important; 
  font-weight: 500 !important; 
  line-height: 130% !important; 
  font-size: var(--font-body-md) !important;
  padding: var(--btn-padding-md) !important;
  transition: 
      transform var(--transition-base), 
      background-color var(--transition-base), 
      box-shadow var(--transition-base);
  background-color: var(--color-text) !important;  
  color: var(--color-bg)!important;  
}

.t-submit{
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
  height: auto !important; 
  gap: var(--space-gap) !important; 
  border-radius: var(--radius-xs) !important; 
  font-weight: 500 !important; 
  line-height: 130% !important; 
  font-size: var(--font-body-lg) !important;
  padding: var(--btn-padding-lg) !important;
  transition: 
      transform var(--transition-base), 
      background-color var(--transition-base), 
      box-shadow var(--transition-base);
  background-color: var(--red) !important;  
  color: var(--color-bg)!important;  
}

/*.t-btnflex_md  { padding:var(--btn-padding-lg); font-size:var(--font-body-lg) !important; }*/
/*.t-btnflex_smd { padding:var(--btn-padding-md); font-size:var(--font-body-md) !important; }*/
/*.t-btnflex_sm  { padding:var(--btn-padding-sm); font-size:var(--font-body-md) !important; }*/

/* Контейнеры Tilda */
.t-container,
.t896, .t649, .t605, .t951, .t-cover-outer,
.t823__container,.t897__container,.t280__menu__container,
.t280__container,.t228__maincontainer,.t-card__container,
.t389__maincontainer, .js-feed-container, .t456__maincontainer, .t-store__prod-popup__close-txt-wr{
  max-width:var(--container-max) !important;
  padding:0 var(--space-page-x, 24px) !important;  /* фолбэк для Tilda inline */
  box-sizing:border-box; margin:0 auto;
}
.t-col{ padding:0 !important; margin:0 !important; max-width:100% !important; }
.t-col_12{ max-width:var(--container-max) !important; }

/* Межблоковые (сохраняю твою схему) */
.t-rec_pt_195{ padding-top: calc(var(--space-section)*3) !important; }
.t-rec_pb_195{ padding-bottom: calc(var(--space-section)*3) !important; }
.t-rec_pt_180{ padding-top: 178px !important; }
.t-rec_pb_180{ padding-bottom: 178px !important; }
.t-rec_pt_120{ padding-top: calc(var(--space-section)*2) !important; }
.t-rec_pb_120{ padding-bottom: calc(var(--space-section)*2) !important; }
.t-rec_pt_90 { padding-top: 96px !important; }
.t-rec_pb_90 { padding-bottom: 96px !important; }
.t-rec_pt_60 { padding-top: var(--space-section) !important; }
.t-rec_pb_60 { padding-bottom: var(--space-section) !important; }
.t-rec_pt_45 { padding-top: 48px !important; }
.t-rec_pb_45 { padding-bottom: var(--space-title) !important; }
.t-rec_pt_30 { padding-top: 32px !important; }
.t-rec_pb_30 { padding-bottom: 32px !important; }
.t-rec_pt_15 { padding-top: 24px !important; }
.t-rec_pb_15 { padding-bottom: 24px !important; }

/* Доп. мобильные коррекции классов Tilda (под max-width) */
@media (max-width:1200px){
  .t-rec_pt_90 { padding-top:64px !important; }
  .t-rec_pb_90 { padding-bottom:64px !important; }
  .t-rec_pt_45 { padding-top:32px !important; }
  .t-rec_pt_30 { padding-top:24px !important; }
  .t-rec_pb_30 { padding-bottom:24px !important; }
}
@media (max-width:980px){
  .t-rec_pt_180{ padding-top: 100px !important; }
  .t-rec_pb_180{ padding-bottom: 100px !important; }
}
@media (max-width:640px){
  .t-rec_pt_180{ padding-top:96px !important; }
  .t-rec_pb_180{ padding-bottom:96px !important; }
  .t-rec_pt_90 { padding-top:48px !important; }
  .t-rec_pb_90 { padding-bottom:48px !important; }
  .t-rec_pt_45 { padding-top:24px !important; }
  .t-rec_pt_30 { padding-top:16px !important; }
  .t-rec_pb_30 { padding-bottom:16px !important; }
  .t-rec_pt_15 { padding-top:12px !important; }
  .t-rec_pb_15 { padding-bottom:12px !important; }
}

/* Прочее / утилиты */
.t228__padding40px{ display:none !important; width:0 !important; }
.hr,.divider{ height:1px; background:var(--color-line); width:100%; }
.icon--sm{ width:var(--icon-sm); height:var(--icon-sm); }
.icon--md{ width:var(--icon-md); height:var(--icon-md); }
.icon--lg{ width:var(--icon-lg); height:var(--icon-lg); }
.icon--xl{ width:var(--icon-xl); height:var(--icon-xl); }
.card{
  background:var(--color-bg);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:var(--card-padding-md, 24px 16px); /* фолбэк на случай обрыва var() */
  box-shadow:var(--shadow-sm);
}
.card--sm{ border-radius:var(--radius-md); padding:var(--card-padding-sm, 20px 14px); }
.card--lg{ border-radius:var(--radius-lg); padding:var(--card-padding-lg, 32px 24px); }