@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
* { box-sizing: border-box; }
:root {
--pup-font: 'Roboto', Helvetica, Arial, sans-serif;
--pup-primary: #0072ce;
--pup-dark: #222;
--pup-muted: #6b7280;
--pup-border: #d7dadd;
--pup-bg-light: #f7f8fa;
}
html, body { background: #fff; margin: 0; }
.pup-body { font-family: var(--pup-font); font-size: 11px; color: var(--pup-dark); line-height: 1.5; }
.pup-page { width: 100%; padding: 0; margin: 0; } .pup-content-header, .pup-content-footer { font-size: 9px; color: var(--pup-muted); padding: 5mm 0; margin-bottom: 10mm; }
.pup-content-header { border-bottom: 1px solid var(--pup-border); }
.pup-content-footer { margin-top: 15mm; border-top: 1px solid var(--pup-border); }
.header-logo { max-height: 15mm; max-width: 50mm; width: auto; height: auto; }
.header-text-wrap { text-align: right; } .pup-main-content { width: 100%; } .pup-header-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 10mm;
}
.pup-header-text-cell {
width: 60%;
vertical-align: top;
padding-right: 10mm;
}
.pup-header-image-cell {
width: 40%;
vertical-align: top;
text-align: center;
} .pup-title-section { text-align: left; margin-bottom: 0; }
.pup-title { font-size: 28px; line-height: 1.2; margin: 0 0 5px 0; color: var(--pup-dark); font-weight: 700; }
.pup-sku { font-size: 12px; color: var(--pup-muted); }
.pup-image-section { text-align: center; margin-bottom: 0; }
.pup-product-image { max-width: 100%; height: auto; }
.pup-separator { border: none; height: 2px; background-color: var(--pup-primary); margin: 0 0 12mm 0; }
.pup-content-flow img { max-width: 100% !important; height: auto !important; } .pup-content-flow .pup-section { margin-bottom: 10mm; }
.pup-section-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 4mm;
padding-bottom: 2mm;
border-bottom: 1px solid var(--pup-border);
color: #005eb8;
text-transform: uppercase;
}
.pup-text-content p, .pup-text-content li { margin-bottom: 3mm; }
.pup-table-content table { width: 100%; border-collapse: collapse; }
.pup-table-content th, .pup-table-content td { border: 1px solid var(--pup-border); padding: 6px 8px; vertical-align: top; text-align: left; }
.pup-table-content tr > td:first-child { font-weight: 700; background-color: var(--pup-bg-light); width: 35%; } table, tr {
break-inside: avoid;
page-break-inside: avoid;
}
.pup-section, p, li, td, th {
break-inside: auto;
page-break-inside: auto;
}