/* JP-1190 — Ratgeber Shopsystem: vertical spacing of the "UX-Design" blue callout.
 *
 * The light-blue callout box between the intro paragraph ("... So lassen sich
 * Stolpersteine früh erkennen.") and the "Wie funktioniert SEO / How does SEO
 * work" heading sits too tight top and bottom vs Figma (node 2248:8689):
 * ~24px above / ~48px below live, Figma wants ~68px above / ~64px below.
 *
 * Scope: `body.page-id-288138` matches BOTH WPML twins — the EN twin
 * (/en/topics/ecommerce, post 294026) carries the DE original's page-id on its
 * <body> as well — so one rule fixes DE and EN identically.
 *
 * Target: of the five blue callouts on this page, only this one is `.mb-7`
 * without `.mt-5`; that combination is identical on both twins. The other blue
 * boxes have their own spacing and are intentionally left untouched.
 *
 * Values win the margin-collapse: 68px beats the intro's collapsing 24px top
 * margin, 64px beats the next column's collapsing 48px (mt-6) — landing the box
 * on the Figma gaps. !important is required because the box carries an inline
 * `margin-top:0` and its `mb-7` bottom margin is pinned to 24px by an existing
 * page rule (`.product-management-section .mb-7`).
 *
 * Desktop only: the two-column intro/heading layout and the reported tight gaps
 * exist at >=992px; the stacked mobile layout already has comfortable spacing.
 */
@media (min-width: 992px) {
    body.page-id-288138 .product-subcard-widget.jtl-box--blue.mb-7:not(.mt-5) {
        margin-top: 68px !important;
        margin-bottom: 64px !important;
    }
}
