/*
    Ext.ProductGuarantees - styling for the two labels.

    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 in V3 (theme.config)
    and V4 (bundles.json), and the labels must not depend on the customer theme in either.

    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.

    ⭐ Measurements are taken from the draft/4sellers/v2 design (18.09.2026), 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 its own value but the theme's --bs-gray-200 resp.
    --bs-secondary-bg, measured on the live page. Hence the variable comes first and the numeric
    value is only a fallback for R3, which does not know CSS variables.
*/

/*
    The font for the INLINE nested label. Without this rule it draws its number in the theme's font -
    the official artifact requires Inter.

    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. That works because this file is delivered via the same route as the
    font - but it therefore carries NO ?v=. Replacing the file under the same name later would stay
    invisible for a year because of "immutable"; a new file name is then required.

    The full-size version 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("Inter_18pt-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/*
    NO margin of our own. Measured on the live shop on 18.09.2026: 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 draft's 25 px 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. Nothing
    doubles up this way, and nobody has to override our rules.
*/
.pg-notice,
.pg-garan {
    margin: var(--pg-block-spacing, 0) 0 0;

    /* Clears floated 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
       beside 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;
}

/* ----- Legal guarantee 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 entire 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.
    This way there stays exactly 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 dedicated class: 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: text over the box can no longer be selected. That is acceptable for
    a reference box - the full wording is available one click away 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 our own:
    --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;
}

/* ----- Legal guarantee notice, preview (order overview) ----------------------------------- */

/*
    ⛔ The preview DELIBERATELY shows the official notice below the readability threshold of roughly
    570 px. It is a reference to the notice, not a rendering 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 base
       value the preview gives way - measured 187 instead of 250 px.

       250 px is measured from the "Checkout (1920px) 1" design, which is drawn 1:1 in CSS pixels
       (content width there 1221 px, on the live page 1219 px). The measuring edge is the blue
       header bar of the official notice - it runs across the full file width in notice_de.png
       (x = 0 to 1653 measured at y = 40/100/200), so it serves 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 the text next to it is the part that stays readable at all 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;
    }
}

/* ----- Legal guarantee 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 roughly 570 px width the body text falls 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 corresponds to the draft's 237 px; at an
    aspect ratio of 368.5 : 56.69 that yields roughly 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;
}

/*
    When the label stands ALONE - without a headline, without a text link -, it sits in a position
    row: order overview or cart. There the row height is what matters, not the column width, and
    240 px would be too heavy. 30 px height corresponds pretty 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 both sides, and the
    number no longer sits at the left edge. The width therefore follows from the desired height and
    the official template's aspect ratio (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
    end up with 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 enlarge 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 label sits - see ProductGuaranteeModals.
    That is why it needs no z-index rule 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 sit 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;
}