.co-page {
  width: 210mm;
  height: auto;
  min-height: 297mm;
  padding: 7.5mm 8mm 5mm;
  box-sizing: border-box;
  position: relative;
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Geometry follows the second page of templates/cert.pdf. The shared markup
   stays live text: it can grow and remains editable at every display scale. */
.co-header {
  display: grid;
  grid-template-columns: 28mm minmax(0, 1fr);
  align-items: start;
  column-gap: 3mm;
  row-gap: 1.2mm;
  margin-bottom: 4.5mm;
  flex: 0 0 auto;
}
.co-logo { width: 28mm; padding-top: .2mm; }
.co-logo img { display: block; width: 28mm; height: 13mm; object-fit: contain; }
.co-org { min-width: 0; text-align: left; }
.co-org-line { font-size: 10pt; font-weight: 400; line-height: 1.32; text-transform: uppercase; white-space: nowrap; }
.co-org-line:first-child { font-weight: 700; font-size: 10.2pt; }
.co-legal { grid-column: 1 / -1; margin: 0; font-size: 6.2pt; line-height: 1.15; white-space: nowrap; text-align: center; }

.co-body {
  flex: 0 0 auto;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.co-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #000;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
}

.co-row:last-child {
  border-bottom: 0;
}

.box {
  box-sizing: border-box;
  border-right: 1px solid #000;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.box:last-child {
  border-right: 0;
}

.w-left { width: 53%; flex: 0 0 53%; }
.w-right { width: 47%; flex: 0 0 47%; }
.w-goods { width: 70.5%; flex: 0 0 70.5%; }
.w-qty { width: 29.5%; flex: 0 0 29.5%; }
.w-full { width: 100%; flex: 0 0 auto; }
.w-date { width: 52%; flex: 0 0 52%; }
.w-stamp { width: 48%; flex: 0 0 48%; }

/* A single grid row owns both cells, including when either description wraps. */
.goods-section { display: block; }
.goods-legacy { display: flex; align-items: stretch; width: 100%; }
.goods-paired { width: 100%; }
.goods-pair { display: grid; grid-template-columns: minmax(0, 70.5fr) minmax(0, 29.5fr); align-items: stretch; break-inside: avoid; }
.goods-pair > .goods-cell { width: auto; min-width: 0; border-right: 1px solid #000; border-bottom: 0; }
.goods-pair > .goods-cell:nth-child(2) { border-right: 0; }
.goods-pair-head .box-label { padding-bottom: 1mm; }
.goods-section [hidden] { display: none !important; }
.goods-cell .box-field { width: 100%; box-sizing: border-box; }
.goods-cell .certificate-rich-text { overflow-wrap: anywhere; }
.certificate-date-fields { padding: 2mm; font-size: 9pt; }
.certificate-date-fields label { display: block; margin: 0 0 2mm; font-size: 9pt; }
.certificate-date-fields input { display: block; width: 100%; box-sizing: border-box; margin-top: 1mm; font: inherit; }
.certificate-date-hint, .certificate-date-warning { margin: 1mm 0; font-size: 8pt; line-height: 1.35; }
.certificate-date-box.field-review-low { background: #fce8e6; box-shadow: inset 0 0 0 2px #c4302b; }
.certificate-date-box.field-review-low input[name="certificate_date"] { color: #a12727; border-color: #c4302b; }
.certificate-date-box.field-review-mid { background: #fff5d9; box-shadow: inset 0 0 0 2px #c49212; }
.certificate-date-warning { color: #8a2923; }
.certificate-date-box.field-review-mid .certificate-date-warning { color: #795600; }

@media print {
  .co-row.goods-section { display: block !important; }
  .goods-legacy { flex-direction: row !important; }
  .goods-pair > .goods-cell:nth-child(2) { border-right: 0 !important; }
  .goods-pair > .goods-cell { break-inside: avoid; }
  .certificate-date-box.field-review-low, .certificate-date-box.field-review-mid { background: transparent; box-shadow: none; }
}

/* Title and country share the right column; the consignee occupies the
   lower two rows on the left, as in the supplied certificate. */
.co-upper { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); grid-template-rows: minmax(20mm, auto) minmax(33mm, auto) minmax(11mm, auto); border-bottom: 1px solid #000; }
.co-upper > .r1, .co-upper > .r2 { display: contents; }
.co-upper .box { width: auto; min-width: 0; }
.co-upper .r1 > .w-left { grid-column: 1; grid-row: 1; border-bottom: 1px solid #000; }
.co-upper .r1 > .title-cell { grid-column: 2; grid-row: 1 / 3; border-right: 0; border-bottom: 1px solid #000; }
.co-upper .r2 > .w-left { grid-column: 1; grid-row: 2 / 4; }
.co-upper .r2 > .w-right { grid-column: 2; grid-row: 3; border-right: 0; }
.r3 { min-height: 31mm; }
.r4 { min-height: 58mm; }
.r5 { min-height: 71mm; }
.co-end { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; }
.co-end > .r5 { border: 1px solid #000; }

.box-label {
  flex: 0 0 auto;
  font-size: 9pt;
  line-height: 1.3;
  padding: .7mm 1.3mm .3mm;
  border-bottom: 1px solid #000;
}

.box-label-long {
  font-size: 9pt;
  line-height: 1.3;
  padding-bottom: .6mm;
}
.box-label-long span { display: block; }

.box-label .pt {
  font-weight: 700;
}

.box-label .tr {
  font-style: italic;
  font-weight: 400;
}

.box-label-bottom {
  margin-top: auto;
  padding-top: 1mm;
  padding-bottom: 1mm;
}

.box-field {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0 1.5mm 1.5mm;
  overflow: visible;
}

.box-field textarea,
.box-field input,
.box-field select {
  width: 100%;
  height: auto;
  min-height: 2.4em;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.5pt;
  line-height: 1.25;
  color: #111;
  padding: 0.6mm;
  margin: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  field-sizing: content;
}

.box-field select {
  min-height: 2em;
  height: 2em;
  overflow: visible;
}

.box-field textarea.auto-grow {
  min-height: 2.4em;
}

.box-field textarea::placeholder,
.box-field input::placeholder {
  color: #9aa3af;
  font-style: italic;
}

.co-page.editable .box:has(textarea),
.co-page.editable .box:has(select) {
  transition: background-color 0.12s ease;
}

.co-page.editable .box:has(textarea:hover),
.co-page.editable .box:has(select:hover) {
  background: rgba(0, 163, 224, 0.05);
}

.co-page.editable .box:has(textarea:focus),
.co-page.editable .box:has(select:focus) {
  background: rgba(0, 163, 224, 0.08);
  box-shadow: inset 0 0 0 1.5px #00a3e0;
}

.co-page.editable .box.field-review {
  position: relative;
}

.co-page.editable .box.field-review-mid {
  background: rgba(212, 160, 23, 0.16);
  box-shadow: inset 0 0 0 2px #c49212;
}

.co-page.editable .box.field-review-low {
  background: rgba(196, 48, 43, 0.12);
  box-shadow: inset 0 0 0 2px #c4302b;
}

.co-page.editable .box.field-review-mid:has(textarea:hover),
.co-page.editable .box.field-review-mid:has(select:hover),
.co-page.editable .box.field-review-mid:has(textarea:focus),
.co-page.editable .box.field-review-mid:has(select:focus) {
  background: rgba(212, 160, 23, 0.22);
  box-shadow: inset 0 0 0 2px #c49212;
}

.co-page.editable .box.field-review-low:has(textarea:hover),
.co-page.editable .box.field-review-low:has(select:hover),
.co-page.editable .box.field-review-low:has(textarea:focus),
.co-page.editable .box.field-review-low:has(select:focus) {
  background: rgba(196, 48, 43, 0.18);
  box-shadow: inset 0 0 0 2px #c4302b;
}

.co-page .box.field-review .box-label {
  padding-right: 16mm;
}

.co-page .box.field-review .review-mark {
  position: absolute;
  top: 1.2mm;
  right: 1.8mm;
  z-index: 3;
  margin: 0;
}

.co-page .box.field-review .review-tip {
  left: auto;
  right: 1.8mm;
  top: 7mm;
  width: min(72mm, calc(100% - 4mm));
}

.box-field textarea:focus,
.box-field input:focus,
.box-field select:focus {
  outline: none;
}

.box-field .readonly-value {
  font-size: 9.5pt;
  line-height: 1.25;
  white-space: pre-wrap;
  word-break: break-word;
}

.title-cell { padding: 0; text-align: center; justify-content: flex-start; overflow: visible; }
.title-top { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin: 0; border-bottom: 1px solid #000; font-size: 9pt; font-weight: 700; line-height: 1.3; }
.title-top .serial { padding: .5mm 1.2mm; border-right: 1px solid #000; text-align: left; white-space: nowrap; }
.title-top .original { padding: .5mm 1.2mm; text-align: center; white-space: nowrap; }
.title-eu, .title-co { font-family: Arial, Helvetica, sans-serif; font-size: 14.5pt; line-height: 1.33; margin: 0; padding: .5mm 1mm; font-weight: 400; text-transform: uppercase; }
.title-eu strong, .title-co strong, .title-eu em, .title-co em { display: block; }
.title-eu strong, .title-co strong { font-weight: 700; }
.title-eu em, .title-co em { font-style: italic; font-weight: 400; }
.title-rule { width: auto; border: 0; border-top: 2px solid #000; margin: 1.7mm 8mm 3mm; flex: 0 0 auto; }
.box8-inner { display: flex; flex-direction: column; min-height: 71mm; overflow: visible; }
.box8-text { flex: 0 0 auto; font-size: 9pt; line-height: 1.3; padding: .8mm 1.3mm 1mm; }
.box8-text .pt { font-weight: 700; text-transform: uppercase; }
.box8-text .tr { font-style: italic; text-transform: uppercase; }
.box8-split { flex: 1 0 auto; display: flex; align-items: end; border-top: 0; min-height: 40mm; overflow: visible; padding: 0 6mm 4mm; gap: 14mm; }
.box8-split .box { padding: 0; min-height: 0; border-right: 0; flex: 1 1 0; width: auto; }
.box8-split .box-label { border: 0; padding: .8mm 0 0; text-align: center; font-size: 9pt; line-height: 1.3; }
.box8-split .box-label span { display: block; }
.issue-date { font-size: 9pt; font-weight: 700; text-align: center; padding: 1mm 0 .3mm; min-height: 6mm; border-bottom: 1px solid #000; flex: 0 0 auto; }
.issue-date span:last-child { display: inline-block; white-space: nowrap; }
.stamp-space { flex: 0 0 auto; min-height: 9mm; border-bottom: 1px solid #000; }
.certificate-date-fields { border-bottom: 1px solid #000; }
.r3 > .box > .box-label { min-height: 14mm; box-sizing: border-box; display: block; }
.r3 > .w-right > .box-label { display: flex; align-items: center; gap: .25em; flex-wrap: wrap; align-content: center; }
.r3 > .w-left > .box-label .tr { display: block; }
.goods-legacy > .box > .box-label, .goods-pair-head .box-label { min-height: 22mm; box-sizing: border-box; }
.goods-legacy > .w-qty > .box-label, .goods-pair-head > .goods-cell:nth-child(2) .box-label { display: flex; align-items: center; align-content: center; flex-wrap: wrap; gap: .25em; }
.goods-legacy { min-height: inherit; }
.goods-paired { min-height: inherit; }

.co-page.editable .r5.box-locked {
  background: #ececec;
  color: #8a8a8a;
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}

.co-page.editable .r5.box-locked .box8-text,
.co-page.editable .r5.box-locked .box8-text .pt,
.co-page.editable .r5.box-locked .box8-text .tr,
.co-page.editable .r5.box-locked .box-label,
.co-page.editable .r5.box-locked .box-label .pt,
.co-page.editable .r5.box-locked .box-label .tr,
.co-page.editable .r5.box-locked .issue-date {
  color: #8a8a8a;
}

.co-page.editable .r5.box-locked .stamp-space {
  background: #e2e2e2;
}

.co-page.editable .r5.box-locked .w-date,
.co-page.editable .r5.box-locked .w-stamp {
  background: #ececec;
}

.co-footer { margin-top: auto; padding-top: 3mm; font-size: 6.3pt; line-height: 1.3; text-align: center; flex: 0 0 auto; }

@media screen {
  /* Native zoom reserves the scaled height, including later content edits. */
  .sheet-stage .co-page { zoom: var(--certificate-sheet-scale, 1); }
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

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

  .co-page {
    width: 210mm !important;
    max-width: 210mm !important;
    height: auto !important;
    min-height: 297mm !important;
    padding: 7.5mm 8mm 5mm !important;
    margin: 0;
    overflow: visible !important;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .co-row {
    flex-direction: row !important;
    flex: 0 0 auto !important;
    height: auto !important;
    align-items: stretch !important;
  }

  .w-left { width: 53% !important; flex: 0 0 53% !important; }
  .w-right { width: 47% !important; flex: 0 0 47% !important; }
  .w-goods { width: 70.5% !important; flex: 0 0 70.5% !important; }
  .w-qty { width: 29.5% !important; flex: 0 0 29.5% !important; }

  .box {
    border-right: 1px solid #000 !important;
    border-bottom: 0 !important;
    overflow: visible !important;
  }

  .box-field {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .box:last-child {
    border-right: 0 !important;
  }

  .co-upper .box { width: auto !important; }
  .co-upper .r1 > .title-cell { border-bottom: 1px solid #000 !important; }
  .co-upper .r1 > .w-left { border-bottom: 1px solid #000 !important; }
  .box8-split .box { border: 0 !important; }
  .box8-split { flex-direction: row !important; }
  .co-end, .r5 { break-inside: avoid; }

  .box-field textarea,
  .box-field input,
  .box-field select {
    outline: none !important;
    font-size: 9.5pt !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.6mm !important;
    overflow: visible !important;
    field-sizing: content !important;
  }

  .box-field select {
    height: 2em !important;
  }

  .box-field .readonly-value {
    overflow: visible !important;
  }

  .co-page.editable .box:has(textarea),
  .co-page.editable .box:has(select),
  .co-page.editable .box:has(textarea:hover),
  .co-page.editable .box:has(select:hover),
  .co-page.editable .box:has(textarea:focus),
  .co-page.editable .box:has(select:focus) {
    background: transparent !important;
    box-shadow: none !important;
  }

  .co-page.editable .r5.box-locked,
  .co-page.editable .r5.box-locked .stamp-space,
  .co-page.editable .r5.box-locked .w-date,
  .co-page.editable .r5.box-locked .w-stamp {
    background: transparent !important;
    color: #111 !important;
    pointer-events: auto !important;
    user-select: auto !important;
  }

  .co-page.editable .r5.box-locked .box8-text,
  .co-page.editable .r5.box-locked .box8-text .pt,
  .co-page.editable .r5.box-locked .box8-text .tr,
  .co-page.editable .r5.box-locked .box-label,
  .co-page.editable .r5.box-locked .box-label .pt,
  .co-page.editable .r5.box-locked .box-label .tr,
  .co-page.editable .r5.box-locked .issue-date {
    color: #111 !important;
  }

  .co-footer {
    font-size: 6.3pt !important;
    text-align: center !important;
  }
}

/* Shared rich-text layout for the editor and issued original/copy PDFs. */
.certificate-rich-text p { margin: 0; min-height: 1.25em; white-space: pre-wrap; }
.certificate-rich-text span { white-space: pre-wrap; }