/*
    Ext.ProductGuarantees - styling for both notices.

    Delivered via the asset endpoint and included ONCE per page. That is the reason this file
    exists instead of a <style> block in the view: a separate file stays out of the markup, can be
    cached, and is identical across both theme generations - bundling works differently between V3
    (theme.config) and V4 (bundles.json), and the notice should not depend on the customer theme in
    either one.

    All classes are prefixed with "pg-". Deliberately restrained: the blocks should blend into the
    theme, not stand out. Colors only where they are officially mandated.

    ⭐ The measurements come from the draft dated 2026-09-18 (draft/4sellers/v2), measured on the
    image: purchase box 407 px wide, inner width 359 px, gray box flush inside it, 8 px top/bottom
    and 16 px left/right padding, shield 56 px tall, nested label 237 x 37 px, 24 px between the
    blocks. The gray is #f5f5f5 - and that is NOT a value of our own, but the theme's --bs-gray-200
    resp. --bs-secondary-bg, measured on the live page. That is why the variable comes first and
    the numeric value is only a fallback for R3, which knows no CSS variables.
*/

/*
    The font for the INLINE nested label. Without this rule it draws its figure in the theme's
    font - the official artwork requires Inter, and without this rule the switch from Bold to
    ExtraBold would have no effect on the article page.

    The template requests "font-family: Inter-ExtraBold, Inter" with "font-weight: 700". A static
    cut knows no font-variation-settings, so the weight decides: the family has exactly one face,
    and the font selection answers the 700 with it.

    ⚠ The address is relative, and in the form "Asset?name=<file>". This stylesheet is served from
    /ProductGuarantees/Asset?name=product-guarantees.css - Shopsystem-1 has no route of its own for the endpoint.
    Relative to that address, "Asset?name=<file>" resolves to the same endpoint under whatever prefix the shop runs;
    a bare file name would resolve to /ProductGuarantees/<file> and answer 404 (measured 23.09.2026 on both
    instances), and the nested label would draw its figure in a substitute face. The address carries no &v=, so an
    exchanged font needs a new file name - the answer is cached as immutable.

    The full form does not need this: it sits in an iframe on the endpoint page, which brings its
    own @font-face rules.
*/
@font-face {
    font-family: "Inter-ExtraBold";
    src: url("Asset?name=Inter_18pt-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/*
    NO margin of our own. Measured 2026-09-18 on the live shop: the purchase box of Responsive 4
    is itself a flex column with gap: 24px and padding: 24px. A margin of ours would add to that -
    the 25 px of the draft would become 48. The block therefore takes on its container's rhythm
    instead of bringing its own.

    ⚠ For a theme that gives its containers no spacing, zero is too little - in Responsive 3 the
    two blocks would otherwise touch (measured: 0 px). That is what the --pg-block-spacing knob is
    for: it defaults to 0 and is set at the integration point where the container brings nothing.
    That way nothing doubles up, and nobody has to override our rules.
*/
.pg-notice,
.pg-garan {
    margin: var(--pg-block-spacing, 0) 0 0;

    /* Clears floating neighbors. Responsive 3 places "Fragen zum Artikel" and "Zum
       Artikelvergleich" in the purchase box with float resp. pull-left - without this line the
       headline would sit next to them instead of below. In a flex or grid container the property
       has no effect, so it costs nothing in Responsive 4. */
    clear: both;
}

.pg-notice__headline,
.pg-garan__headline {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}

/* ----- Warranty notice: compact AND preview -------------------------------------------------- */

/*
    One box for two forms. Image on the left, text column on the right - compact shows the
    cut-out shield on the left, preview shows the shrunk official notice. Nothing else
    distinguishes the two, which is exactly why they share these rules.
*/
.pg-notice__box {
    display: flex;
    align-items: center;
    gap: 16px;

    /* Reference frame for the stretched area further below. */
    position: relative;
    cursor: pointer;
}

/*
    The WHOLE box opens the notice, not just the link inside it.

    Implemented as a stretched link: the existing anchor lays an invisible area over the whole
    box. The obvious approach - wrapping the box in an <a> - does NOT work: the box itself
    contains an anchor, nested anchors are invalid markup, and the browser splits them into
    siblings on its own. That keeps it at ONE anchor, ONE tab stop and ONE accessible name.
    Bootstrap 5 calls this .stretched-link; we write it ourselves because Bootstrap 3 does not
    know the class.

    ⛔ Deliberately bound to .pg-notice__box instead of a class of its own: the FULL form has no
    box. There the link stays an ordinary link, and the official graphic next to it stays
    clickable.

    ⚠ The price of this pattern: no text can be selected over the box anymore. That is acceptable
    for a reference box - the full wording is on the target page.

    No z-index. Positioned elements are drawn after the content anyway, and a z-index here would
    only open a new stacking context - exactly the trap that once put the modal under the overlay.
*/
.pg-notice__box .pg-notice__open::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Visible feedback that the whole box is clickable. Deliberately without a color change: a
   matching tone is not available as a variable in Responsive 3, and nothing here is guessed. */
.pg-notice__box:hover .pg-notice__open {
    text-decoration: underline;
}

/*
    The light gray background belongs to the COMPACT form. It is the theme's background, not
    ours: --bs-gray-200 and --bs-secondary-bg both carry #f5f5f5 in Responsive 4. R3 knows no
    variables and falls back to the numeric value, which is the gray of .well there.
*/
.pg-notice--compact .pg-notice__box {
    padding: 8px 16px;
    background: var(--bs-secondary-bg, #f5f5f5);
}

/*
    The cut-out shield brings NO width/height, only a viewBox - without this rule the browser
    defaults to 300 x 150 px.
*/
.pg-notice__shield {
    flex: 0 0 auto;
}

.pg-notice__shield svg {
    display: block;
    height: 56px;
    width: auto;
}

.pg-notice__text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.pg-notice__lead {
    font-weight: 700;
}

/* ----- Warranty notice, preview (order summary) ----------------------------------------------- */

/*
    ⛔ The preview shows the official notice DELIBERATELY below the readability threshold of about
    570 px. It is a reference to the notice, not a display of it - the readable version is one
    click away. Commissioned in writing this way, see ProductGuaranteeDisplayMode.Preview.
*/
.pg-notice--preview .pg-notice__box {
    gap: 24px;
}

.pg-notice__thumb {
    /* NOT shrinkable: the text column wants more width than remains, and with a shrinkable
       basis the preview gives way - measured 187 instead of 250 px.

       250 px is measured on the "Checkout (1920px) 1" draft, which is drawn 1:1 in CSS pixels
       (content width there 1221 px, 1219 px on the live page). The measuring edge is the blue
       header bar of the official notice - in notice_de.png it runs across the full file width
       (x = 0 to 1653 measured at y = 40/100/200), so it works as an image edge. The bottom edge
       does NOT work: the image ends in white on a white background. */
    flex: 0 0 250px;
    max-width: 250px;
    display: block;
    line-height: 0;
}

.pg-notice__thumb-image {
    display: block;
    width: 100%;
    height: auto;
}

.pg-notice--preview .pg-notice__lead {
    font-size: 1.15em;
    line-height: 1.3;
}

.pg-notice__explanation {
    margin-top: 12px;
    line-height: 1.6;
}

.pg-notice--preview .pg-notice__open-wrap {
    margin-top: 16px;
}

/*
    Narrow display: the row becomes a column. Without this the preview squeezes the text column
    down to a few characters - and that text is the part that actually stays readable on a phone.
*/
@media (max-width: 575.98px) {
    .pg-notice--preview .pg-notice__box {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .pg-notice__thumb {
        flex: 0 0 auto;
        max-width: 200px;
    }
}

/* ----- Warranty notice, full -------------------------------------------------------------------- */

/*
    No maximum width of our own. The guidelines require the notice to be readable at its display
    size; where that holds, the integration point decides.
    ⚠ Below about 570 px width the body text drops under 11 px (font size = width x 32 / 1654).
*/
.pg-notice__image {
    display: block;
    width: 100%;
    height: auto;
}

.pg-notice__link {
    margin: 8px 0 0;
    font-size: .85em;
    line-height: 1.5;
    word-break: break-word;
}

/* ----- GARAN label ------------------------------------------------------------------------------ */

/*
    NO border. The official file itself has none, its first rectangle is white without a stroke,
    and the draft also shows the label without one. Anyone who wants it back sets
    border: 1px solid #231f20; that is the label's own line color.

    The width is capped instead of set to 100%: the label is a mark, not a banner, and in a wide
    column it would otherwise grow to poster size. 240 px correspond to the 237 px of the draft;
    at an aspect ratio of 368.5 : 56.69 that works out to about 37 px height.
*/
.pg-garan__nested {
    display: block;
    line-height: 0;
    text-decoration: none;
    max-width: var(--pg-garan-nested-width, 240px);
}

.pg-garan__nested svg {
    display: block;
    width: 100%;
    height: auto;
}

/*
    If the label stands ALONE - without a headline, without a text link -, it sits in a position
    row: order summary or cart. There the row height is the measure, not the column width, and
    240 px would be too bulky. 30 px height corresponds quite closely to the 188 px the draft
    shows for the order line item.

    ⛔ The height is set via the WIDTH, not via height - that is the trap one inevitably falls
    into here. An SVG with a viewBox and "height: 30px" at "width: 100%" fits its content CENTERED
    into the full width (preserveAspectRatio is xMidYMid meet). Space then remains on the left and
    right, and the number no longer sits at the left edge. The width therefore follows from the
    desired height and the aspect ratio of the official template (viewBox 368.5 x 56.69):
    30 px * 368.5 / 56.69 = 195 px.

    Anyone who wants it bigger or smaller sets --pg-garan-bare-height; the width is computed
    along with it.
*/
.pg-garan--bare .pg-garan__nested {
    width: calc(var(--pg-garan-bare-height, 30px) * 368.5 / 56.69);
    max-width: 100%;
}

/*
    Aspect ratio of the template (viewBox 269.29 x 283.46). Without a fixed height the iframe
    would fall back to the browser default of 150 px.
*/
.pg-garan__full {
    display: block;
    width: 100%;
    aspect-ratio: 269.29 / 283.46;
    border: 0;
}

.pg-garan__link {
    margin: 8px 0 0;
    font-size: .85em;
    line-height: 1.5;
    word-break: break-word;
}

.pg-notice__open-wrap,
.pg-garan__open {
    font-size: .9em;
}

.pg-garan__open,
.pg-notice--full .pg-notice__open-wrap {
    margin-top: 8px;
}

/*
    In the compact box the link sits directly under the bold text. The wrapper keeps the link and
    the zoom icon on ONE line - the box is a column, without it the icon would slip onto its own
    line.
*/
.pg-notice--compact .pg-notice__open-wrap {
    white-space: nowrap;
}

.pg-icon {
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-left: .35em;
    vertical-align: -.05em;
    fill: currentColor;
}

/* ----- Modal -------------------------------------------------------------------------------------- */

/*
    The modal sits at the END OF THE BODY, not where the notice itself is - see
    ProductGuaranteeModals. That is why no z-index rule is needed here: the theme's own applies
    at this location, and it is correct.

    The header is deliberately not implemented with theme classes: Bootstrap 3 and 5 name it
    differently. The dismiss attributes of both generations are on the button.
*/
.pg-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.pg-modal__title {
    flex: 1 1 auto;
    font-weight: 600;
    line-height: 1.3;
}

.pg-modal__close {
    flex: 0 0 auto;
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.pg-modal__body {
    padding: 0;
}

.pg-modal__body iframe {
    display: block;
    width: 100%;
    height: 78vh;
    border: 0;
}