*{ box-sizing:border-box; }

:root{
  --font-main: "Russo One", sans-serif;
  --text:#111;
  --accent:#d60000;
}

body{
  margin:0;
  font-family:system-ui;
  background:#f2f2f2;
}

.print-only{ display:none; }
.no-print{ display:flex; }

.app{
  display:flex;
  height:100vh;
}

/* PANEL */
.panel{
  width:420px;
  background:#fff;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-right:1px solid #e5e5e5;
  overflow:auto;
}

.productCard{
  border:1px solid #eee;
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#fafafa;
}

input, select{
  padding:10px;
  border-radius:10px;
  border:1px solid #ddd;
}

/* PRINT BUTTON */
.btnPrintTop{
  padding:12px;
  border-radius:14px;
  border:none;
  background:#111;
  color:#fff;
  cursor:pointer;
  font-size:14px;

  position: sticky;
  top: 0;
  z-index: 10;
}

/* PREVIEW */
.preview{
  flex:1;
  overflow:auto;
  padding:20px;
}

#previewSurface{
  width: fit-content;
}

/* A4 PORTRAIT */
.page{
  width:210mm;
  height:297mm;
  background:#fff;
  display:grid;
}

.page.products-2{ grid-template-rows:1fr 1fr; }
.page.products-3{ grid-template-rows:1fr 1fr 1fr; }
.page.products-4{ grid-template-rows:1fr 1fr 1fr 1fr; }

.poster{
  border-bottom:1px dashed rgba(0,0,0,0.25);
  padding:10mm;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3mm;
}

.poster:last-child{ border-bottom:none; }

.productName{
  font-family:var(--font-main);
  font-size:calc(12mm * var(--title-scale,1));
  text-align:center;
  color:var(--text);
}

/* PRICE */
.priceWrap{
  display:flex;
  align-items:flex-end;
  gap:3mm;
  font-family:var(--font-main);
}

.priceInt{
  font-size:calc(34mm * var(--price-scale,1));
  line-height:1;
  color:var(--accent);
}

.priceDec{
  font-size:calc(14mm * var(--price-scale,1));
  color:var(--accent);
}

.currency{
  font-size:calc(9mm * var(--price-scale,1));
  color:var(--accent);
  transform: translateY(-2mm);
  opacity:0.9;
}

.priceOld{
  font-size:9mm;
  text-decoration:line-through;
  color:rgba(0,0,0,0.5);
}

.discount{
  font-size:9mm;
  background:var(--accent);
  color:#fff;
  padding:2mm 5mm;
  border-radius:999px;
}

.sgr{
  font-size:5.5mm;
  font-weight:700;
}

.footer{
  margin-top:4mm;
}

.footer svg{
  width:70mm;
  height:10mm;
}

/* PRINT */
@media print{
  body{ margin:0; }

  .no-print{ display:none !important; }
  .print-only{ display:block !important; }

  #printRoot{
    position:absolute;
    left:0;
    top:0;
  }
}