.calc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding: 16px;
  overflow-y: auto;
}
.calc-card {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 720px;
  padding: 24px;
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}
header{display:flex;gap:16px;align-items:center;}

header h2{flex:1;font-size:18px;line-height:1.3;}
.x-btn{border:none;background:none;font-size:28px;cursor:pointer;}

.inputs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));font-size:14px;}

.sup-type{display:flex;gap:12px;border:none;padding:0;margin:0;align-items:center;}

.warehouse-picker{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
.wh-select{width:100%;font-size:14px;}

.warehouses{display:grid;gap:12px;}
@media(min-width:1024px){.warehouses{grid-template-columns:repeat(3,1fr);}}
@media(min-width:640px) and (max-width:1023px){.warehouses{grid-template-columns:repeat(2,1fr);}}
@media(max-width:639px){.warehouses{grid-template-columns:1fr;}}

.warehouse-card{border:1px solid #ddd;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:13px;}
.warehouse-card h3{font-size:14px;margin:0 0 6px;}
.warehouse-row{display:flex;justify-content:space-between;}

.primary{background:#306aff;color:#fff;border:none;border-radius:8px;padding:8px 24px;font-size:14px;cursor:pointer;}

.sup-type label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.sup-type input[type="radio"] {
  accent-color: #306aff;
}

.sup-type input[type="radio"] {
  accent-color: #306aff;
  transform: scale(1.2);
  cursor: pointer;
}
.sup-type label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
input[type="number"]:focus {
  outline: 2px solid #306aff;
}

.inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  font-size: 14px;
}

.inputs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100px;
}

.inputs input[type="number"] {
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  cursor: text;
}

input[type="number"]:focus {
  outline: 2px solid #306aff;
}
header img {
  width: 54px;                  /* 9*6 */
  height: 72px;                 /* 12*6 */
  aspect-ratio: 9 / 12;
  object-fit: contain;         /* ⬅️ чтобы не обрезало */
  border-radius: 8px;
  background: #f2f2f2;
  display: block;
}