/*
 * JP-783 — "AGENTIC COMMERCE · EARLY ACCESS" section → match Figma 188:11339
 * ---------------------------------------------------------------------------
 * Pages: /de/ki/  (body.page-id-302458)
 *        /en/ai/  (body.page-id-310462)
 * Section: #content section.product-management-section.purple ("Der nächste Schritt: KI
 *          geht für deine Kunden auf Shoppingtour")
 *
 * Figma (node 188:11339, file NGhRnXhpI8bbeDQhA9mUzD) vs the live render diffed
 * on three points — text colours were already aligned by jp-446-ki-overview.css:
 *   1. Section background — Figma #89d2ff (--jtl-light-blue); live = transparent
 *      (cream page bg showed through).
 *   2. Bullet check icons — Figma tech-blue #2722f8; live = orange #fb581f.
 *   3. "MEHR ERFAHREN" button — Figma "Secondary" = OUTLINE pill (transparent
 *      fill, 2px #0b1b45 border, #0b1b45 text); live = solid orange #fb581f fill.
 *
 * Padding/vertical rhythm set to the Figma spec (py-80) with the section made
 * flush (the light-blue band is full-bleed in Figma, no cream inset margins).
 */

/* 1. Section background → cream, full-bleed with Figma py-80 rhythm.
 * JP-720: background changed from the original Figma light-blue #89d2ff to cream
 * #eeeee7 per client direction, on BOTH /de/ki/ (302458) and /en/ai/ (310462). */
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple {
    background-color: #eeeee7 !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Bullet check icons → tech-blue (was orange) */
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .list-icon,
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .list-icon::before,
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .fa-check,
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .fa-check::before {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
}

/* 3. Button → outline (Figma "Secondary"): transparent fill, 2px navy border, navy text */
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .product-button-group__button--with-icon,
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple a.product-button-group__button--with-icon {
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid #0b1b45 !important;
    color: #0b1b45 !important;
}
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .product-button-group__button--with-icon .text,
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .product-button-group__button--with-icon .product-button-group__button--with-icon__text {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
}
/* hover: invert to filled navy for affordance */
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .product-button-group__button--with-icon:hover {
    background-color: #0b1b45 !important;
    color: #ffffff !important;
}
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .product-button-group__button--with-icon:hover .text,
body:is(.page-id-302458, .page-id-310462) #content section.product-management-section.purple .product-button-group__button--with-icon:hover .product-button-group__button--with-icon__text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}