/* Базовое: не даём элементам разрастаться шире контейнера */
  .calc-wrap, .calc-wrap * { box-sizing: border-box; }
  .calc-card{ 
    max-width:720px; margin:0 auto; padding:24px; 
    background:#fff; color:#111; border:1px solid #e5e7eb; 
    border-radius:20px; box-shadow:0 6px 24px rgba(0,0,0,.06);
    overflow:hidden; /* 
    
    /* === Жёсткое уменьшение превью цвета === */
.calc-wrap{ --swatch-size: 90px; }              /* было ~180px → теперь вдвое меньше */
@media (max-width:680px){
  .calc-wrap{ --swatch-size: 72px; }            /* на телефонах чуть меньше */
}

/* колонка под квадрат ровно по переменной */
.calc-wrap .color-chooser{
  grid-template-columns: var(--swatch-size) 1fr !important;
  align-items: center;
}

/* сам квадрат — фиксированная ширина/высота */
.calc-wrap .swatch{
  width: var(--swatch-size) !important;
  height: var(--swatch-size) !important;
  flex: 0 0 var(--swatch-size) !important;
  aspect-ratio: auto !important;                /* отключаем прежнее 1/1, чтобы не тянулось */
}