.vppt-wrap { max-width: 1100px; margin: 0 auto; display: grid; gap: 18px; grid-template-columns: 360px 1fr; }
@media (max-width: 900px){ .vppt-wrap { grid-template-columns: 1fr; } }

.vppt-controls { border: 1px solid #e7e7e7; border-radius: 14px; padding: 16px; background: #fff; }
.vppt-field { margin-bottom: 12px; }
.vppt-field label { display:block; font-weight: 700; margin-bottom: 6px; }
.vppt-field input, .vppt-field textarea, .vppt-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}
.vppt-field textarea { resize: vertical; }

.vppt-actions { display:flex; gap:10px; margin-top: 10px; }
.vppt-btn { cursor:pointer; border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 800; background:#111; color:#fff; }
.vppt-btn-secondary { background:#f1f1f1; color:#111; }
.vppt-hint { margin-top: 10px; font-size: 13px; color:#555; }

.vppt-preview { display:flex; align-items:flex-start; justify-content:center; padding: 10px; }
.vppt-tag {
  position: relative;
  width: 320px;
  height: 460px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow:hidden;
}

/* === Positions tuned to your template (320×460) === */
/* Title area */
.vppt-title{
  position:absolute;
  left: 18px;        /* ~6% */
  top: 118px;        /* tuned to sit under logo */
  width: 210px;      /* keep inside left block */
  height: 160px;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.05;
  color: #111;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Price box (inside the contour) */
.vppt-price-box{
  position:absolute;
  left: 18px;
  top: 307px;
  width: 187px;  /* 205-18 */
  height: 125px; /* 432-307 */
  display:flex;
  align-items:center;
  justify-content:center; /* PRICE CENTERED */
  padding: 10px;
  box-sizing: border-box;
}
.vppt-price{
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  color:#111;
  text-align:center;
  width:100%;
  word-break: break-word;
}

/* Print layout */
.vppt-print-area { display:none; }

@media print {
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vppt-controls, .vppt-preview { display:none !important; }
  .vppt-wrap { display:block; max-width:none; margin:0; }
  .vppt-print-area { display:block !important; }

  @page { size: A4; margin: 8mm; }

  .vppt-sheet{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gapmm);
  }

  .vppt-cell{
    display:flex;
    align-items:center;
    justify-content:center;
    height: var(--cellhmm);
  }

  .vppt-tag-print{
    position:relative;
    width: var(--tagwmm);
    height: var(--taghmm);
    background-size: cover;
    background-position: center;
    overflow:hidden;
  }

  /* scale positions relative to 320x460 using CSS variables */
  .vppt-tag-print .vppt-title{
    left: calc(var(--tagw) * 18 / 320);
    top:  calc(var(--tagh) * 118 / 460);
    width: calc(var(--tagw) * 210 / 320);
    height: calc(var(--tagh) * 160 / 460);
    font-size: calc(var(--tagh) * 26 / 460);
  }
  .vppt-tag-print .vppt-price-box{
    left: calc(var(--tagw) * 18 / 320);
    top:  calc(var(--tagh) * 307 / 460);
    width: calc(var(--tagw) * 187 / 320);
    height: calc(var(--tagh) * 125 / 460);
    padding: calc(var(--tagh) * 10 / 460);
  }
  .vppt-tag-print .vppt-price{
    font-size: calc(var(--tagh) * 44 / 460);
  }
}