/* ============================================================================
   JP-552 — /de/pos-system "Weitere Informationen zu Kassenbetrieb und Hardware"
   sub-card aligned to the Infoboxen widget look.
   ----------------------------------------------------------------------------
   Client (C11, 2026-06-02, Low): "'How to get started with JTL POS' — purple
   box still old design."

   Per user direction: update the "Weitere Informationen zu Kassenbetrieb und
   Hardware findest du hier:" sub-card at the bottom of the purple
   `.pos-system-cta-section` based on the Infoboxen widget (JP-362,
   theme/jtl/assets/css/infobox-box.css). The Infoboxen highlight panel
   tokens (mirroring `.jtl-infobox-box__highlight` + `.jtl-infobox-box__cta`):

     - Light Blue `#89d2ff` panel (matches current bg, kept)
     - Border-radius 46 px (was 20 px)
     - Padding 46 px (was 32 px)
     - CTA pills: solid JTL-Orange `#fb581f` + Dark Blue `#0b1b45` text +
       145.323 px full pill + 12 / 24 padding (was outlined Dark-Blue ring
       with transparent fill — the legacy bordered-transparent-link variant)

   Page-scoped to body.page-id-96380 (DE /de/pos-system). The sub-card
   ships with a per-instance auto-generated class
   (`.product-subcard-widget-6a22b951dea61`) which is unstable across edits,
   so we anchor on the parent section (`.pos-system-cta-section.purple`)
   plus a `:has` content match so this rule only fires on the specific
   "Weitere Informationen…" sub-card and not the sibling Hardware Store
   sub-card above it (which has a different bg + intent).
   ============================================================================ */

body.page-id-96380 section.pos-system-cta-section.purple .product-subcard-widget:has(> .mb-4 > p:first-child),
body.page-id-96380 section.pos-system-cta-section.purple .product-subcard-widget:has(.product-button-group__button--with-icon) {
    background-color: #ffffff !important;     /* was Light Blue #89d2ff — switch to white per user feedback */
    border-radius: 46px !important;
    padding: 32px !important;                  /* was 46px; right edge felt too generous */
    width: -moz-fit-content !important;
    width: fit-content !important;             /* shrink to button-row width so the ~90 px blank gap on the right is gone */
    max-width: 100% !important;                /* but never overflow the parent column */
}

/* CTA pills inside the sub-card → JTL Primary pill (Infoboxen spec). */
body.page-id-96380 section.pos-system-cta-section.purple .product-subcard-widget .product-button-group__button--with-icon,
body.page-id-96380 section.pos-system-cta-section.purple .product-subcard-widget a.product-button-group__button--with-icon {
    background-color: #fb581f !important;
    background-image: none !important;
    color: #0b1b45 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 145.323px !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
}
body.page-id-96380 section.pos-system-cta-section.purple .product-subcard-widget .product-button-group__button--with-icon:hover,
body.page-id-96380 section.pos-system-cta-section.purple .product-subcard-widget a.product-button-group__button--with-icon:hover {
    background-color: #e74914 !important;
    color: #0b1b45 !important;
}
/* Inner label span — picks up the Dark-Blue text. */
body.page-id-96380 section.pos-system-cta-section.purple .product-subcard-widget .product-button-group__button--with-icon span,
body.page-id-96380 section.pos-system-cta-section.purple .product-subcard-widget .product-button-group__button--with-icon strong {
    color: #0b1b45 !important;
}