/*
    Ext.ProductGuarantees - the two standalone pages (/productguarantees/garan/{id}, /productguarantees/notice/{iso}).

    Served through the asset endpoint like product-guarantees.css; the font addresses are relative to it. They carry
    no ?v= - an exchanged font needs a new file name, because the answer is cached as immutable.

    The official GARAN templates name two families each: "Inter-ExtraBold, Inter" (weight 700 plus
    font-variation-settings 800) and "Inter-Regular, Inter". A static cut ignores font-variation-settings, so the
    weight decides, and the templates ask for 700 while plainly meaning 800. The EXTRA BOLD cut is therefore declared as
    800: CSS font matching answers a request for 700 with the only bold face the family has. The official files stay
    untouched - GaranLabelFactory cuts them at their literal opening tags.
*/
@font-face {
    font-family: "Inter-Regular";
    src: url("Inter_18pt-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Inter-ExtraBold";
    src: url("Inter_18pt-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Inter";
    src: url("Inter_18pt-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Inter";
    src: url("Inter_18pt-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: block;
}

html, body { margin: 0; padding: 0; background: #fff; }
.pg-page {
    margin: 0 auto;
    padding: 12px;
    max-width: 760px;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.pg-page--notice { max-width: 900px; }
.pg-page--embedded { padding: 0; max-width: none; }
.pg-label { display: block; width: 100%; height: auto; }
/* Without display:block the SVG stays inline and inherits the line height - a few pixels below the baseline that
   make exactly one scrollbar in the embedded frame. */
.pg-label svg { display: block; width: 100%; height: auto; }
.pg-notice { display: block; width: 100%; height: auto; }
.pg-link { margin: 12px 0 4px; font-size: 13px; line-height: 1.5; word-break: break-word; }
.pg-link a { color: #0b4f9e; }