/* ============ SD Addons Full – Front ============ */

.sdaf-front{
  margin:16px 0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.sdaf-front .sec{ padding:0; }
/* Titles */
.sdaf-front .title{
  color:#121212;
  font-family: Archivo, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:1.146vw;     /* как ты просил */
  line-height:112%;
  font-weight:400;
}

/* Sub/description */
.sdaf-front .sub{
  color:#00000099;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:0.833vw;
  line-height:1.146vw;
  font-weight:400;
  margin-top:0.833vw;    /* от заголовка до описания */
}

/* spacing between description and controls */
.sdaf-front .radioRow,
.sdaf-front .toggleRow,
.sdaf-front .plusList{
  margin-top:1.563vw;    /* от описания до контролов */
}

/* Radio row */
.sdaf-front .radioRow{
  display:flex;
  gap:0.729vw;
  flex-wrap:wrap;
}

/* Radio buttons */
.sdaf-front .radioBtn{
  cursor:pointer;
  border:none;
  border-radius:0.417vw;
  background:#F6F6F4;
  color:#00000099;

  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:0.833vw;
  line-height:100%;
  font-weight:500;

  padding:0.625vw 1.25vw;  /* как ты просил: top/bottom 0.625vw */
}

.sdaf-front .radioBtn.is-on{
  background:#4A8854;
  color:#FFFFFF;
}

/* Row with + and label */
.sdaf-front .toggleRow{
  display:flex;
  align-items:center;
  gap:0.729vw;
}

/* Label near + */
.sdaf-front .optLabel{
  color:#00000099;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:0.938vw;
  font-weight:400;
  line-height:100%;
}

/* Divider (green line) */
.sdaf-front .divider{
  border-top:1px solid #4A885480;
  margin:1.354vw 0;
}

/* Plus lists (door/vent) */
.plusList{
  display:flex;
  flex-direction:column;
  gap:1.042vw;
  margin:1.354vw 0;
}

.plusRow{
  display:flex;
  align-items:center;
  gap:0.729vw;
}

/* =========================
   ✅ PLUS/MINUS BUTTON (VW)
   - знак рисуем псевдоэлементами (идеально по центру)
   - больше по размеру
   - одинаковый на всех вью
   ========================= */

.sdaf-front .plus{
  width:1.927vw;          /* УВЕЛИЧИЛ (было 1.927vw) */
  height:1.927vw;
  min-height: 1.1927vw;
  
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:0.521vw;  /* ближе к твоему примеру */
  border:0.26vw solid #4A8854;

  background:#4A8854;
  color:transparent;      /* текст не нужен — рисуем линиями */
  font-size:0;            /* убираем влияние шрифта */
  line-height:0;

  cursor:pointer;
  padding:0;
  position:relative;
  box-sizing:border-box;
}

/* горизонтальная линия (и для + и для −) */
.sdaf-front .plus::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:0.7vw;            /* размер знака */
  height:0.1vw;         /* толщина линии */
  background:#fff;
  transform:translate(-50%,-50%);
  border-radius:0.2vw;
}

/* вертикальная линия (только для "+") */
.sdaf-front .plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:0.1vw;
  height:0.7vw;
  background:#fff;
  transform:translate(-50%,-50%);
  border-radius:0.2vw;
}

/* активная (когда выбран пункт) — становится "минус" */
.sdaf-front .plus.is-on{
  background:#63A56E;     /* светлее */
  border-color:#63A56E;
}

/* когда активна — убираем вертикальную линию => получаем "−" */
.sdaf-front .plus.is-on::after{
  display:none;
}

/* =========================
   2 columns for Door + Vent
   ========================= */

.sdaf-front__mount{
  position:relative;
}

/* 3-я и 4-я секции в 2 колонки */
.sdaf-front__mount .sec:nth-of-type(3),
.sdaf-front__mount .sec:nth-of-type(4){
  width:calc(50% - 1.0vw);
}

.sdaf-front__mount .sec:nth-of-type(3){
  float:left;
  margin-right:2.0vw;
}

.sdaf-front__mount .sec:nth-of-type(4){
  float:left;
}

/* FIX: divider внутри этих секций скрываем, чтобы линия не рвалась */
.sdaf-front__mount .sec:nth-of-type(3) .divider,
.sdaf-front__mount .sec:nth-of-type(4) .divider{
  display:none !important;
}

/* одна общая линия под двумя колонками */
.sdaf-front__mount::after{
  content:"";
  display:block;
  clear:both;
  border-top:1px solid #4A885480;
  margin:1.354vw 0;
}

/* -------- Totals block (если используешь) -------- */
.sdaf-totals{
  margin-top:1.354vw;
  padding-top:0.833vw;
  border-top:1px solid #4A885480;
}

.sdaf-totals__addons{
  font-size:0.938vw;
  font-weight:400;
  color:#00000099;
  line-height:100%;
}

.sdaf-totals__total{
  margin-top:0.833vw;
  font-size:0.677vw;
  font-weight:400;
  color:#121212;
  line-height:112%;
  font-family: Archivo, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Mobile fallback ---------- */
@media (max-width:900px){
  .sdaf-front .title{ font-size:4.2vw; }
  .sdaf-front .sub{ font-size:3.6vw; line-height:4.2vw; margin-top:3vw; }

  .sdaf-front .radioBtn{
    font-size:4vw;
    padding:3.2vw 4.6vw;
    border-radius:3vw;
  }

  .sdaf-front .optLabel{ font-size:4vw; }

  /* плюс/минус тоже масштабируем на мобиле */
  .sdaf-front .plus{
    width:14vw;
    height:14vw;
    border-radius:3vw;
    border-width:1vw;
  }
  .sdaf-front .plus::before{ width:6vw; height:1vw; }
  .sdaf-front .plus::after{ width:1vw; height:6vw; }

  .sdaf-front .divider{ margin:4.5vw 0; }

  /* 2 columns -> 1 column */
  .sdaf-front__mount .sec:nth-of-type(3),
  .sdaf-front__mount .sec:nth-of-type(4){
    width:100% !important;
    float:none !important;
    margin-right:0 !important;
  }
}

/* -------- MODAL -------- */
.sdaf-bd{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:99999;
}

.sdaf-modal{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(980px,92vw);
  background:#fff;
  border-radius:1vw;
  overflow:hidden;
}

.sdaf-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:1vw 1vw 0.6vw;
}

.sdaf-h1{
  font-size:2.2vw;
  font-weight:900;
  letter-spacing:-.02em;
  text-transform:uppercase;
}

.sdaf-sub{
  padding:0 1vw 0.8vw;
  font-size:1.2vw;
  opacity:.9;
}

.sdaf-x{
  border:0;
  background:transparent;
  font-size:2.6vw;
  line-height:1;
  cursor:pointer;
  padding:0 0.6vw;
}

.sdaf-grid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:0.6vw;
  padding:1vw;
}

@media(max-width:900px){
  .sdaf-grid{ grid-template-columns:repeat(5,1fr); }
  .sdaf-h1{ font-size:6vw; }
  .sdaf-sub{ font-size:4vw; }
  .sdaf-x{ font-size:8vw; }
}

.sdaf-c{
  aspect-ratio:1/1;
  border-radius:0.7vw;
  border:1px solid rgba(0,0,0,.12);
  cursor:pointer;
  position:relative;
}

.sdaf-c span{
  position:absolute;
  left:0.4vw;
  right:0.4vw;
  bottom:0.4vw;
  font-size:0.65vw;
  background:rgba(255,255,255,.8);
  padding:0.3vw 0.35vw;
  border-radius:0.6vw;
}


@media(max-width:700px){
.sdaf-front .title{
  font-size:4.267vw;     /* как ты просил */
}

.sdaf-front .sub{
font-size:3.2vw;
}

.sdaf-front .plus{
  width:5.867vw; /* УВЕЛИЧИЛ (было 1.927vw) */
  height:5.867vw;
  border-radius: 0.8vw;
  min-height: 5.867vw;
}

.sdaf-front .plus::before{      /* горизонтальная */
  width:2vw;
  height:0.4vw;
}

.sdaf-front .plus::after{       /* вертикальная */
  width:0.4vw;
  height:2vw;
}

/* Plus lists (door/vent) */
.plusList{
  margin:5vw 0;
}

.sdaf-c span{
    font-size:3.2vw;
}

/*******************/
  .sdaf-modal{
    width: min(420px, 86vw);   /* было min(980px,92vw) -> компактнее */
    max-height: 70vh;          /* окно ниже */
    overflow: hidden;          /* скроллим внутри, не сам контейнер */
    border-radius: 4vw;
    padding: 3vw;
  }
  
 .sdaf-grid{
    max-height: calc(70vh - 16vw); /* высота окна минус шапка/отступы */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    row-gap: 8vw;   /* вверх-вниз */
   column-gap: 0.6vw; /* влево-вправо — как было */
  }

}