/**
 * jp-440-lagerverwaltung.css — Lagerverwaltung (/de/lagerverwaltung-software/)
 * cascade-audit fix (JP-440, Story JP-433).
 *
 * Page:  https://dev-jtl-vietanh.betterscale.dev/de/lagerverwaltung-software/
 * Figma: pricing panel 351:7269 (Preisboxen-Desktop 1440)
 *
 * ── Finding: pricing-panel heading is dark-on-dark (illegible) ──────────────
 * The "dark_card_price" widget (`.dark-card-widget`) renders its heading block
 * INSIDE a baked dark panel (bg #142830). The Figma panel header is a Light
 * Blue eyebrow + WHITE title on that dark fill.
 *
 * custom-clone.css ships those colour tokens, but every one of them is scoped
 * to the `.orange` section variant:
 *   - 2581: `.product-price-plan-section.orange .dark-card-widget__overtitle { #89d2ff }`
 *   - 2704: `.product-price-plan-section.orange .dark-card-widget__title { #fff }`
 * This page's pricing section is the `.green` variant
 * (`section.product-price-plan-section.green`), so NONE of those rules match —
 * the eyebrow falls back to theme grey rgb(51,51,51) and the title to theme
 * Dark Blue rgb(11,27,69), both nearly invisible on the #142830 panel.
 *
 * Fix: re-assert the same Figma tokens variant-agnostically (no `.orange`
 * gate). Scoped to the widget inside `.product-price-plan-section`, not to one
 * page-id, so every non-orange instance of this panel gets a legible heading.
 * The `.orange` rules in custom-clone.css already set these same values, so
 * this does not change the orange variant. (Root-cause cleanup — folding the
 * colour tokens into the existing global `.dark-card-widget` block at
 * custom-clone.css:4578 — is left for a shared-file consolidation pass.)
 */

/* Eyebrow → Light Blue (Figma I351:7269;206:1410), was theme grey #333. */
.product-price-plan-section .dark-card-widget .dark-card-widget__overtitle {
    color: #89d2ff !important;
    -webkit-text-fill-color: #89d2ff !important;
}

/* Title → white (Figma I351:7269;206:1411), was theme Dark Blue #0b1b45. */
.product-price-plan-section .dark-card-widget .dark-card-widget__title {
    color: #ffffff !important;
}

/* ── Finding: "Top Versandlogistiker" navy divider was a crude ellipse ───────
 * Figma 723:8910 shows the navy (#0B1B45) logo panel meeting the light-blue
 * (#89D2FF) text panel along a specific gentle S-curve — the navy's left edge
 * bulges left into the blue, furthest at mid-height. custom-clone.css:10980
 * approximates it with `clip-path: ellipse(85% 150% at 100% 50%)`, which is
 * too round/deep and doesn't match the Figma vector (723:8911).
 *
 * Fix: replace the ellipse clip with the EXACT Figma curve, painted as an SVG
 * (traced 1:1 from the 723:8910 render, normalised to the pseudo's box). The
 * `.card` already has `overflow:hidden` + 46px radius, so only the curved LEFT
 * edge needs defining; the navy fills to the right and the card rounds the
 * outer corners. `preserveAspectRatio="none"` + `background-size:100% 100%`
 * lets the one curve scale across the responsive card width.
 * Same selector + later load order as custom-clone.css:10979 → this wins. */
.product-payments-section .container-product-payments-card.card::before {
    clip-path: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%201000%20360%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M221.3%2C0%20L210.8%2C12.7%20L200.3%2C25.5%20L191%2C38.2%20L180.5%2C50.9%20L171.3%2C63.6%20L163.4%2C76.4%20L156.8%2C89.1%20L150.2%2C101.8%20L144.9%2C114.5%20L141%2C127.3%20L138.3%2C140%20L135.7%2C152.7%20L134.4%2C165.5%20L133.1%2C178.2%20L133.1%2C190.9%20L134.4%2C203.6%20L137%2C216.4%20L139.7%2C229.1%20L142.3%2C241.8%20L147.6%2C254.5%20L152.8%2C267.3%20L158.1%2C280%20L166%2C292.7%20L173.9%2C305.5%20L184.5%2C318.2%20L193.7%2C330.9%20L204.2%2C343.6%20L214.8%2C356.4%20L220%2C360%20L1000%2C360%20L1000%2C0%20Z%22%20fill%3D%22%230B1B45%22%2F%3E%3C%2Fsvg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ── Panel height 400px + logos 3-over-2 centred (Figma 723:8910) ────────────
 * Desktop only (the navy panel/curve is desktop; ≤767 keeps the stacked all-
 * blue layout). The card was content-height (~353px); pin it to 400px and
 * vertically centre the heading + logo block. The navy pseudo stretches to the
 * full height (top/bottom:0). The gallery was a 3-col grid that left the bottom
 * 2 tiles LEFT-aligned; switch to flex-wrap + justify-center with a max-width
 * that forces a wrap after the 3rd tile at any desktop width, so the layout is
 * always 3 on top and the remaining 2 centred below. */
@media (min-width: 768px) {
    .product-payments-section .container-product-payments-card.card {
        min-height: 400px !important;
    }
    .product-payments-section .container-product-payments-card .card-body > .row.no-gutters {
        min-height: 400px !important;
        align-items: center !important;
    }
    .product-payments-section .container-product-payments-card.card::before {
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
    }
    /* 6-col grid: each tile spans 2 cols → 3 per row, auto-sized to fit the
       column (no fixed width to overflow). The 5 tiles flow 3 on row 1; the
       last 2 are explicitly placed on row 2 at cols 2-3 and 4-5, leaving col 1
       and col 6 empty → centred under the top row. All 5 tiles are siblings in
       one display:contents slide, so nth-child targets them directly. */
    .product-payments-section .container-product-payments-card .product-payments-section__gallery-wrapper {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 24px !important;
        align-content: center !important;
    }
    .product-payments-section .container-product-payments-card .product-payments-section__gallery-item {
        grid-column: span 2 !important;
        width: 100% !important;
        max-width: 160px !important;
        justify-self: center !important;
    }
    .product-payments-section .container-product-payments-card .product-payments-section__gallery-item:nth-child(4) {
        grid-column: 2 / span 2 !important;
        grid-row: 2 !important;
    }
    .product-payments-section .container-product-payments-card .product-payments-section__gallery-item:nth-child(5) {
        grid-column: 4 / span 2 !important;
        grid-row: 2 !important;
    }
}

/* ── Mobile + tablet centring — page-scoped to this page (id 93818) ──────────
 * Below the desktop breakpoint several blocks render left-aligned (and on
 * tablet sit pushed to the left with empty space beside them); Figma centres
 * them. Hero CTAs only stack at mobile (≤767); the rest are centred across the
 * whole ≤991 band so tablet matches mobile. Page-id scoped so the other
 * product-landing pages that reuse these widgets are untouched. */

/* Hero CTAs — stack the two pills full-width + centre their labels (mobile). */
@media (max-width: 767.98px) {
    body.page-id-93818 .hero-product-section .product-buttons-group {
        align-items: center !important;
    }
    body.page-id-93818 .hero-product-section .product-buttons-group a {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
}

@media (max-width: 991.98px) {
    /* Hero mockup image — keep it centred within its column at all widths. */
    body.page-id-93818 .hero-product-section .hero-product-section__image img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* "Weitere verwandte Features + Produkte" — centre heading, the stacked
       card column itself (it sat left of centre on tablet), and each card's
       title / text / "Mehr erfahren" link. */
    body.page-id-93818 .cross-chanel-product-landing {
        text-align: center !important;
    }
    body.page-id-93818 .cross-chanel-product-landing .row.no-gutters {
        flex-direction: column !important;
        align-items: center !important;
    }
    /* The 4 cards live in .chanel-content-wrapper (a grid on desktop); make it a
       centred column below lg so the stacked cards sit in the middle. */
    body.page-id-93818 .cross-chanel-product-landing .chanel-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    body.page-id-93818 .cross-chanel-product-landing .content-link,
    body.page-id-93818 .cross-chanel-product-landing a {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Success-story testimonial — centre image, quote, link, logo + author. */
    body.page-id-93818 .testimonial-single-product-landing {
        text-align: center !important;
    }
    body.page-id-93818 .testimonial-single-product-landing img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.page-id-93818 .testimonial-single-product-landing .testimonial-single-text__link,
    body.page-id-93818 .testimonial-single-product-landing a {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Author row (Genuss Berlin logo + Darius Okra) is a left-aligned flex row. */
    body.page-id-93818 .testimonial-single-product-landing .user-data {
        justify-content: center !important;
    }

    /* ERP "Autarke Lagerlösung" section — the gallery image sat left; centre it
       (it's a display:block img with margin-left:0). */
    /* The image col carries a big desktop right-pad (pr-10 = 112px) for the
       2-col layout; stacked below lg it shoves the image left. Symmetrise the
       padding on the gallery's col so the image centres. */
    body.page-id-93818 .product-management-section [class*="col-lg-6"]:has(.product-management-section__gallery) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    body.page-id-93818 .product-management-section .product-management-section__gallery {
        width: 100% !important;
        justify-content: center !important;
    }
    body.page-id-93818 .product-management-section .product-management-section__gallery-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    body.page-id-93818 .product-management-section .product-management-section__gallery-column img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ── Hero image cut-off — icon badge clipped (JP-440 follow-up) ──────────────
 * The hero image on this page is 1260×1204 (≈square), but the shared hero
 * widget locks the picture box to aspect-ratio 703/733 (portrait) with
 * object-fit:cover (wpb-oop-widget-with-global › hero-product-section style.css).
 * cover fills the portrait box and crops the image's left edge → the
 * "ERP-UNABHÄNGIG" gear badge gets cut off.
 * Page-scoped fix (id 93818 only — other product heroes match the 703/733 box):
 * match the picture box to THIS image's native ratio and use object-fit:contain
 * so the full composed graphic (all badges) is always shown, never cropped. */
body.page-id-93818 .hero-product-section .hero-product-section__image picture {
    aspect-ratio: 1260 / 1204 !important;
}
body.page-id-93818 .hero-product-section .hero-product-section__image picture img {
    object-fit: contain !important;
}