/* PAW EU-Garantie- & Gewährleistungslabel – Frontend Styles
   Genau 3 amtliche Grafiken (DVO (EU) 2025/1960):
   Artikelseite (Kurzform), Popup (Voll-Label), Checkout (Mitteilung).
   ponytail: Inter wird nicht eingebettet – Font-Stack mit metrisch ähnlichem
   Fallback; Inter einbetten, falls Pixel-Perfektion gefordert wird. */

/* ── Gewährleistungsmitteilung (Checkout) ───────────── */
.paw-garan-checkout-notice { margin: 0 0 12px; }
.paw-garan-off-notice {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    border: 1px solid #e2e8f0;
}
.paw-garan-off-notice[data-paw-garan-zoom] { cursor: zoom-in; }

/* ── GARAN-Voll-Label (Popup) ───────────────────────── */
.paw-garan-off-label {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 360px; /* ~ Mindestgröße 95 mm */
    container-type: inline-size;
}
.paw-garan-off-label img { display: block; width: 100%; height: auto; }
.paw-garan-off-label i,
.paw-garan-off-nested i {
    position: absolute;
    background: #fff;
    font-style: normal;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    color: #000;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
}
.paw-garan-off-label .og-brand { left: 2.4%; top: 22.6%; width: 50%; height: 6.4%; font-size: 3.2cqw; }
.paw-garan-off-label .og-model { right: 2.4%; top: 22.6%; width: 42%; height: 6.4%; font-size: 3.2cqw; justify-content: flex-end; }
/* Overlay deckt das "XX" vollständig ab (Kalendersymbol beginnt bei ~44%) */
.paw-garan-off-label .og-years { left: 1.8%; top: 28.5%; width: 41%; height: 29.5%; font-size: 28cqw; font-weight: 800; }

/* ── GARAN-Kurzform (Artikelseite, geschachtelt) ────── */
.paw-garan-product { margin: 10px 0; }
.paw-garan-off-nested {
    position: relative;
    display: inline-block;
    width: 230px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    container-type: inline-size;
    cursor: pointer;
}
.paw-garan-off-nested img { display: block; width: 100%; height: auto; }
/* Overlay deckt das "XX" des Originals vollständig ab (endet knapp vor dem
   Kalendersymbol bei ~20% Bildbreite) */
.paw-garan-off-nested i { left: 1.8%; top: 8%; width: 17.6%; height: 84%; font-size: 11cqw; font-weight: 800; justify-content: center; }

/* ── Kurzform im Warenkorb / in Artikellisten ───────── */
.paw-garan-box { margin: 8px 0; }
.paw-garan-cart-item .paw-garan-off-nested { width: 170px; }
.paw-garan-listing .paw-garan-off-nested { width: 150px; }

/* ── Warenkorb: Mitteilung über der Bestellübersicht ── */
.paw-garan-cart-bottom { margin: 0 0 16px; }
.paw-garan-cart-bottom .paw-garan-off-notice { max-width: 100%; }

/* ── Popup ──────────────────────────────────────────── */
.paw-garan-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.paw-garan-modal {
    position: relative;
    background: #fff;
    color: #1e293b;
    border-radius: 14px;
    padding: 26px 28px;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    font-size: 14px;
    line-height: 1.6;
}
.paw-garan-modal p { margin: 12px 0 0; }
/* Im Popup das Voll-Label bzw. die Mitteilung in voller Modalbreite (GROSS) */
.paw-garan-modal .paw-garan-off-label { max-width: 100%; }
.paw-garan-modal .paw-garan-off-notice { max-width: 100%; border: 0; }
.paw-garan-modal-notice { padding: 40px 20px 20px; }
.paw-garan-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    font-family: inherit;
}
.paw-garan-close:hover { color: #0f172a; }