/*
    Ext.ProductGuarantees - the two standalone pages (GaranPage, NoticePage).

    Served through the asset endpoint like product-guarantees.css. Shopsystem-1 has no route of its own for it, so
    the address is /ProductGuarantees/Asset?name=<file> and a font is referenced as "Asset?name=<file>": relative to
    this stylesheet that is the same endpoint, whatever prefix the shop runs under. No &v= on the font addresses -
    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("Asset?name=Inter_18pt-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Inter-ExtraBold";
    src: url("Asset?name=Inter_18pt-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Inter";
    src: url("Asset?name=Inter_18pt-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Inter";
    src: url("Asset?name=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; }