/* Plaza Global — PDP trust block: badge over the gallery + quality box under the CTA.
   Own component, zero inherited rules on purpose: .topline-badges lives inside .slide
   (dies on a context switch) and .catalog-item__label already carries a PDP-scoped
   rule a modifier would have to fight (plan §3).
   Theme language, literals only — the theme has no CSS variables: radius 0,
   Gilroy, accent #ff0083, text #3a3a3a, muted #898989, hairline #ededed,
   vertical rhythm 8/15/20, breakpoint 574. */

/* --- Badge over the gallery -------------------------------------------------
   Anchored as the first child of .product-slider-pool. The pool is a containing
   block already (computed position: sticky at 1440, relative at 390), so the badge
   needs no position on the parent — only its own absolute. z-index must clear the
   slides: .slide is 999 when active, 998 otherwise. */
.plaza-trust-badge {
    position: absolute;
    top: 10px;
    left: -10px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 0;
    background: #ff0083;
    font-family: Gilroy, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    /* "3 JAAR GARANTIE" stays on one line down to 360px */
    white-space: nowrap;
    box-shadow: 0 0 8px 4px #b795a67d;
}
.plaza-trust-badge:after {
    content: '';
    position: absolute;
    left: 100%;
    aspect-ratio: 1;
    z-index: -1;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ff0083;
}
.plaza-trust-badge:before {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    --flag-ltg-size: 10px;
    border-top: var(--flag-ltg-size) solid #ba0361;
    border-bottom: var(--flag-ltg-size) solid transparent;
    border-left: var(--flag-ltg-size) solid transparent;
    left: 0;
    top: 100%;
}

.plaza-trust-badge__icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

/* The icon paints with fill="#3A3A3A" set as a PRESENTATION attribute on its paths —
   the lowest priority in the cascade, so a plain rule wins. The selector must target
   `path`: the attribute sits on the paths, not on the root <svg>, and an element's
   own attribute beats what it would inherit from the parent. */
.plaza-trust-badge__icon path {
    fill: #fff;
}

@media only screen and (max-width: 574px) {
    .plaza-trust-badge {
        gap: 6px;
        padding: 6px 10px;
        font-size: 14px;
        line-height: 20px;
    }

    .plaza-trust-badge__icon {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
    }
}

/* --- Quality box under the add-to-cart button -------------------------------
   Sibling of the USP list inside .woocommerce-variation-add-to-cart (a plain
   block, 610px on desktop / 360 on mobile). */
.plaza-trust-box {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #f8d7e8;
    border-radius: 0;
    font-family: Gilroy, sans-serif;
    background: #ffffff;
    box-shadow: 0 0 8px 4px #f8d7e8;
}

.plaza-trust-box__title {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #3a3a3a;
}

/* Divs, not a list: a <ul> would pick up the theme's global list rules
   (.addition-usp-list li:before and friends) we deliberately do not inherit. */
.plaza-trust-box__item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.plaza-trust-box__item + .plaza-trust-box__item {
    margin-top: 15px;
}

.plaza-trust-box__icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

/* The three icons are 24, 17x16 and 40 in their own viewBoxes — normalised here.
   preserveAspectRatio defaults to "xMidYMid meet", so nothing is distorted. */
.plaza-trust-box__icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* Paints are split on purpose: `icon/boxes` draws with stroke on paths that inherit
   fill:none from the root <svg>, `checkmark-green` and `banner/medal` draw with fill.
   One shared rule would blob the outline icon or outline the filled ones. */
.plaza-trust-box__icon--stroke svg path {
    stroke: #ff0083;
}

.plaza-trust-box__icon--fill svg path {
    fill: #ff0083;
}

.plaza-trust-box__heading {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #3a3a3a;
}

.plaza-trust-box__note {
    display: block;
    margin-top: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #898989;
}

@media only screen and (max-width: 574px) {
    .plaza-trust-box {
        margin-top: 15px;
        padding: 15px;
    }

    .plaza-trust-box__title {
        font-size: 18px;
        line-height: 26px;
    }

    .plaza-trust-box__heading {
        font-size: 14px;
        line-height: 20px;
    }

    .plaza-trust-box__note {
        font-size: 13px;
        line-height: 18px;
    }
}