/**
 * jp-einstieg-startup.css — /de/einstieg-und-start-up/ modular restyle.
 *
 * Scope: page-id 106229 (SAME id on prod + staging + dev clone — this page was
 * NOT migrated with divergent ids, unlike logistik/One-JTL). One id is enough.
 *
 * The page renders a product-landing composite of LIVE widgets (rule 13 — we
 * restyle those, never a hand-built demo):
 *   COMPONENT 1  .hero-product-section              (hero banner)
 *   COMPONENT 2  .product-management-section  x5    (the 5 "Schritt" cards)
 *   COMPONENT 3  .cross-chanel-product-landing      ("Typische Kombinationen…")
 *
 * The hero already inherits the shared redesign in custom-clone.css
 * (`body:not(.home) .hero-product-section`, line ~4203): Light-Sand band, Dark
 * Blue Kurdis title, Tech-Blue eyebrow, pill CTAs. That block explicitly DEFERS
 * two things to a per-page ticket — "custom-clipped photo" + the floating badge.
 * This file adds exactly those, page-scoped, on top of the inherited redesign.
 *
 * JTL tokens: Dark Blue #0b1b45 · Tech Blue #2722f8 · Orange #fb581f ·
 *             Light Sand #eeeee7 (cream band) · white cards #ffffff.
 *
 * ── Build order (delivered step-by-step) ────────────────────────────────────
 * [1] COMPONENT 1 — Hero banner   ✓ (mask + rocket badge kept; CTAs deferred)
 * [2] COMPONENT 2 — Step cards    ← THIS STEP
 * [3] COMPONENT 3 — Combos grid   (pending)
 */

/* ========================================================================== */
/* [0] GLOBAL LAYOUT FRAMEWORK — centralized max-width column                 */
/* Constrain every section's .container to one centred 1280px column (≈ Tail- */
/* wind max-w-7xl) with 24px side padding, so text/grids align to a shared    */
/* boundary instead of drifting to the extreme edges (no center dead space).  */
/* Scoped to the SECTION containers only — the site header/nav pill keeps its */
/* own width. The theme's default is 1570px. */
/* ========================================================================== */
body.page-id-106229 section.hero-product-section > .container,
body.page-id-106229 section.product-management-section > .container,
body.page-id-106229 section.cross-chanel-product-landing > .container {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    width: 100%;
}

/* ========================================================================== */
/* [1] COMPONENT 1 — HERO BANNER                                              */
/* Left col: eyebrow + title + subtext (+ CTAs if the editor adds them).      */
/* Right col: lifestyle photo → asymmetric organic fluid mask + floating      */
/* circular orange rocket badge overlapping its bottom-left corner.           */
/* ========================================================================== */

/* Full-bleed to the very top: pull the hero up UNDER the site header so its
   cream band covers the whole top of the page, and pad the content back down so
   it clears the nav. The header is transparent except its white `.jtl-nav-pill`,
   which keeps its own z-index (1030) and therefore floats ON the hero — exactly
   "nav bar placed on the hero widget, same position". Header stays in normal
   flow (no position change) so the sticky-nav JS is untouched.
   132px = measured desktop header height. */
body.page-id-106229 header {
    background: transparent !important;
    background-color: transparent !important;
}
body.page-id-106229 section.hero-product-section {
    position: relative !important;      /* positioning context for the bleed image */
    background-color: #eeeee7 !important;
    margin-top: -175px !important;
    padding-top: 210px !important; /* keeps the copy clear of the nav after the -175 pull */
    padding-bottom: 72px;
    overflow: hidden;                   /* clip the full-bleed photo to the section */
}
/* Hero content sits in the SAME 1280px centred column as every other section
   (see [0]), so its two columns line up widths + edges with the widgets below —
   no full-bleed. The cream band still bleeds full-width via the section bg. */
body.page-id-106229 section.hero-product-section > .container {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Left copy sits ABOVE the absolute image. NB: only the .content is positioned
   (not the .container) — the image's containing block must stay the SECTION so
   it can bleed to the section's top edge (behind the nav), not the padded box. */
body.page-id-106229 .hero-product-section .hero-product-section__content {
    position: relative;
    z-index: 1;
    padding-right: 24px;
}
/* H1 → Kurdis Wide 40/56 (Figma H1-Pages) */
body.page-id-106229 .hero-product-section__content--title {
    font-size: 40px !important;
    line-height: 56px !important;
}
/* subtext first line (bold) → Inter Bold 20/28 */
body.page-id-106229 .hero-product-section__content--text p:first-child,
body.page-id-106229 .hero-product-section__content--text p:first-child strong {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
}
/* intro body → Inter Regular 20/28 */
body.page-id-106229 .hero-product-section__content--text p {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
}

/* ── Right: full-bleed masked photo (Figma "Subtract" 2258:20952) ─────────── */
/* Absolutely positioned to the section's TOP-RIGHT, bleeding to the viewport
   right edge. The webp already carries the organic left-curve + transparency,
   so cream shows through on the left. `auto 100%` renders it at natural width /
   full section height, right-aligned.
   `#app` + ID beats custom-clone.css:10272's `position:static !important`. */
body.page-id-106229 #app section.hero-product-section .hero-product-section__image {
    position: relative !important;   /* in-flow col-lg-6 → 50%, EQUAL width to the widgets below */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;          /* let the col-lg-6 grid define the width */
    max-width: none !important;
    min-height: 0 !important;
    align-self: center !important;
    aspect-ratio: 785 / 769 !important;   /* img4.svg native ratio → whole image, NEVER cut */
    margin: 0 !important;
    padding: 0 !important;
    /* A bit bigger than the text column: scale up ~10%, anchored bottom-right so
       the right edge stays aligned with the widgets below while it grows up/left. */
    transform: scale(1.04) !important;
    transform-origin: right bottom !important;
    background-image: url("assets/einstieg-hero-img4.svg");
    background-size: contain !important;   /* show the complete image inside the column */
    background-position: center right !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
    z-index: 0;
    pointer-events: none;
}
/* the widget's original <picture>/<img> is unused — the frame is the bg now */
body.page-id-106229 .hero-product-section__image picture,
body.page-id-106229 .hero-product-section__image img {
    display: none !important;
}
/* The rocket badge is now baked into img4.svg itself, so the separate CSS badge
   is removed to avoid a duplicate. */
body.page-id-106229 .hero-product-section__image::after {
    content: none !important;
    display: none !important;
}

/* ── Mobile: photo drops into flow, full-width beneath the copy ──────────── */
@media (max-width: 767px) {
    body.page-id-106229 section.hero-product-section {
        margin-top: -78px !important; /* mobile header measures 78px */
        padding-top: 100px !important;
        padding-bottom: 40px;
    }
    body.page-id-106229 .hero-product-section .hero-product-section__content {
        padding-right: 0;
    }
    body.page-id-106229 #app section.hero-product-section .hero-product-section__image {
        position: relative !important;
        top: auto !important; right: auto !important; bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 320px;
        margin-top: 24px !important;
        background-size: cover;
        background-position: center top;
    }
    body.page-id-106229 .hero-product-section__image::after {
        right: auto;
        left: 12px;
        bottom: 10px;
        width: 104px;
        height: 88px;
    }
}

/* ========================================================================== */
/* [2] COMPONENT 2 — STEP CARDS  →  Figma 2258:20998                          */
/* Authoritative design: the section sits directly on the cream band. There   */
/* is NO whole-section white card and NO blue/orange footer accent bar (that  */
/* was an earlier interpretation this Figma supersedes). Left column = plain  */
/* text on cream + a #89d2ff callout with an outlined Dark-Blue pill button.  */
/* Right column = a WHITE rounded "Was ist zu tun?" card (rounded 46px) plus  */
/* a solid Tech-Blue "Gratulation!" note below it.                            */
/* ========================================================================== */

/* Section on cream — strip the legacy orange/purple/green band; even gaps. */
body.page-id-106229 section.product-management-section {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    overflow: visible !important;
}
/* The .container is NOT a card here — just the normal centred container. */
body.page-id-106229 section.product-management-section > .container {
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible;
}
/* Retire any earlier footer accent bar. */
body.page-id-106229 section.product-management-section > .container::after {
    content: none !important;
    display: none !important;
}
body.page-id-106229 section.product-management-section > .container > .row {
    align-items: flex-start;
}

/* ── Left column ─────────────────────────────────────────────────────────── */
/* eyebrow "ERSTER SCHRITT" → plain Tech-Blue text (Inter SB 18/24, 0.9px).
   Scoped to the LEFT column so the right panel's "Schritt N" isn't matched. */
body.page-id-106229 section.product-management-section > .container > .row > .col-lg-6.mb-4 .product-management-section__subtitle {
    display: block;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #2722f8 !important;
    /* theme sets -webkit-text-fill-color:#89d2ff (pale), overriding `color` —
       reset it so the eyebrow is true Tech-Blue #2722f8 (Figma 2258:21001). */
    -webkit-text-fill-color: #2722f8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}
/* Title → Dark Blue Kurdis Wide 32/46. */
body.page-id-106229 section.product-management-section .product-management-section__title {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    font-weight: 700 !important;
    color: #0b1b45 !important;
}

/* Point 2 (Figma 2258:21995) — the callout's column is only col-xl-6 (~50% of
   the left column); make its row/col FULL-WIDTH so the callout spans the whole
   left column like the design. */
body.page-id-106229 section.product-management-section .col-lg-6 .row > [class*="col-"]:has(> .decorated-container-fluid) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
body.page-id-106229 section.product-management-section .col-lg-6 .row:has(> [class*="col-"] > .decorated-container-fluid) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Left callout (.decorated-container-fluid) → #89d2ff sky-blue, rounded 46px.
   `#app` beats the theme's `#app .basic-br { background:#fff !important }`. */
body.page-id-106229 #app section.product-management-section .decorated-container-fluid.basic-br {
    background: #89d2ff !important;
    background-color: #89d2ff !important;
    border: 0 !important;
    border-radius: 46px !important;
    padding: 32px !important;
}
/* callout heading text ("Online verkaufen – die Grundlagen", "Aufträge
   verwalten und Versand organisieren", "Der eigene Onlineshop" …) → Inter
   Semibold 24/29 Dark Blue. The small "Blogbeitrag(e) mit Videos" label (the
   <strong>) stays 18px. `#app` + -webkit-text-fill-color beat the theme's
   #333 fill. */
body.page-id-106229 #app section.product-management-section .decorated-container-fluid p {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 29px !important;
    margin-bottom: 0 !important;
}
body.page-id-106229 #app section.product-management-section .decorated-container-fluid p strong {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    -webkit-text-fill-color: #0b1b45 !important;
}

/* callout button "JETZT ANSCHAUEN" → OUTLINED Dark-Blue pill (Figma Secondary) */
body.page-id-106229 section.product-management-section .decorated-container-fluid .product-button-group__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-image: none !important;
    color: #0b1b45 !important;
    border: 1px solid #0b1b45 !important;
    border-radius: 50px !important;
    padding: 12px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
}
body.page-id-106229 section.product-management-section .decorated-container-fluid .product-button-group__button:hover {
    background: #0b1b45 !important;
    color: #ffffff !important;
}
body.page-id-106229 section.product-management-section .decorated-container-fluid .product-button-group__button__text {
    color: inherit !important;
}

/* ── Right column ────────────────────────────────────────────────────────── */
/* Hide the "Schritt N" label above "Was ist zu tun?" — not in Figma. */
body.page-id-106229 section.product-management-section .col-lg-6 .row.no-gutters .product-management-section__subtitle {
    display: none !important;
}
/* The WHITE "Was ist zu tun?" card. `#app` beats `#app .basic-br { …#fff }`. */
body.page-id-106229 #app section.product-management-section .col-lg-6 .row.no-gutters > .basic-br {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 46px !important;
    box-shadow: 0 30px 70px -46px rgba(11, 27, 69, 0.28);
}
/* "Was ist zu tun?" heading → Kurdis Wide 32/40 Dark Blue */
body.page-id-106229 section.product-management-section .col-lg-6 .row.no-gutters .product-management-section__title {
    font-size: 32px !important;
    line-height: 40px !important;
}

/* numbers 01/02/03 → plain Tech-Blue Inter Extra-Bold 24 (no disc). */
body.page-id-106229 section.product-management-section .numbered-list-widget__item--number {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
body.page-id-106229 section.product-management-section .numbered-list-widget__item--number span {
    color: #2722f8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    line-height: 32px !important;
}

/* group heading ("VORBEREITUNGEN") → Dark-Blue Inter Bold 20/28 uppercase */
body.page-id-106229 section.product-management-section .redesign-styles__overtitle {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    text-transform: uppercase !important;
}

/* task rows → PLAIN text (no pill border), Dark-Blue Inter 16/24 */
body.page-id-106229 section.product-management-section .list-widget__item {
    align-items: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
body.page-id-106229 section.product-management-section .list-widget__item .list-widget__item--rte,
body.page-id-106229 section.product-management-section .list-widget__item .list-widget__item--rte p {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
}
/* task-row info icon → dark grey #333 (Figma), overriding the legacy teal var */
body.page-id-106229 section.product-management-section .list-widget__item .list-widget__item--tooltip-button i,
body.page-id-106229 section.product-management-section .list-widget__item .fa-circle-info {
    color: #333333 !important;
}

/* step CTAs (DOWNLOAD JTL-WAWI, BUCHUNG …) → outlined Dark-Blue pill, #333 text */
body.page-id-106229 section.product-management-section .numbered-list-widget__item--content .product-button-group__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid #0b1b45 !important;
    border-radius: 50px !important;
    color: #333333 !important;
    padding: 12px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
}
body.page-id-106229 section.product-management-section .numbered-list-widget__item--content .product-button-group__button:hover {
    background: #0b1b45 !important;
    color: #ffffff !important;
}
body.page-id-106229 section.product-management-section .numbered-list-widget__item--content .product-button-group__button__text {
    color: inherit !important;
}

/* completion note "Gratulation!" → solid Tech-Blue card, white text, rounded 46.
   FLUSH 100% width of the white card: the note lives in a `pl-md-7 col` inside
   the SAME `.row.no-gutters` as the white card. Force both cols to full-row
   width and strip the note wrapper's left indent so the banner's outer edges
   lock exactly to the white card's boundary lines. */
body.page-id-106229 section.product-management-section .col-lg-6 .row.no-gutters > [class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
body.page-id-106229 section.product-management-section .col-lg-6 .row.no-gutters > [class*="pl-"]:has(> .product-subcard-widget) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.page-id-106229 section.product-management-section .product-subcard-widget {
    background: #2722f8 !important;
    background-color: #2722f8 !important;
    border-radius: 46px !important;
    padding: 28px 48px !important;
    margin: 38px 0 0 0 !important; /* Figma gap; flush left/right with the card */
    width: 100% !important;
    max-width: none !important;
}
/* White text on ALL completion notes. `#app` + explicit p/strong/b targets are
   REQUIRED: a shared `…product-subcard-widget p` rule (specificity 0,3,2) beats
   a plain `… .product-subcard-widget *` (0,3,1), which left the <p>/<strong>
   Dark-Blue on the blue banner (e.g. "Geschafft! Schritt 2 ist beendet."). */
body.page-id-106229 #app section.product-management-section .product-subcard-widget,
body.page-id-106229 #app section.product-management-section .product-subcard-widget *,
body.page-id-106229 #app section.product-management-section .product-subcard-widget p,
body.page-id-106229 #app section.product-management-section .product-subcard-widget p strong,
body.page-id-106229 #app section.product-management-section .product-subcard-widget p b,
body.page-id-106229 #app section.product-management-section .product-subcard-widget strong {
    color: #ffffff !important;
    /* the theme paints these glyphs with -webkit-text-fill-color:#0b1b45, which
       overrides `color` — must reset it too or the text stays dark on the blue. */
    -webkit-text-fill-color: #ffffff !important;
}

/* Point 4 (Figma 2258:20949) — step 5 ("Testen & optimieren") completion note
   is ORANGE, not blue. Target the LAST management section (no mgmt sibling after
   it). Figma shows Dark-Blue text on the orange banner. */
body.page-id-106229 section.product-management-section:not(:has(~ section.product-management-section)) .product-subcard-widget {
    background: #fb581f !important;
    background-color: #fb581f !important;
}
body.page-id-106229 #app section.product-management-section:not(:has(~ section.product-management-section)) .product-subcard-widget,
body.page-id-106229 #app section.product-management-section:not(:has(~ section.product-management-section)) .product-subcard-widget *,
body.page-id-106229 #app section.product-management-section:not(:has(~ section.product-management-section)) .product-subcard-widget p,
body.page-id-106229 #app section.product-management-section:not(:has(~ section.product-management-section)) .product-subcard-widget strong {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.page-id-106229 #app section.product-management-section .col-lg-6 .row.no-gutters > .basic-br,
    body.page-id-106229 #app section.product-management-section .decorated-container-fluid.basic-br {
        border-radius: 28px !important;
    }
    body.page-id-106229 section.product-management-section .product-subcard-widget {
        border-radius: 28px !important;
        padding: 22px 26px !important;
    }
}

/* ========================================================================== */
/* [3] COMPONENT 3 — "Typische Produktkombinationen"  →  Figma 2288:23385     */
/* One large Tech-Blue (#2722f8) rounded box; white Kurdis heading; a 4-up    */
/* grid of white cards, each = Inter-Bold title + a per-product Tech-Blue line */
/* icon TOP-RIGHT, Dark-Blue description, "Mehr erfahren" (Dark Blue) + ORANGE */
/* arrow.                                                                      */
/* ========================================================================== */

/* Section on cream; widen the container to the Figma px-64 gutter (~1312). */
body.page-id-106229 section.cross-chanel-product-landing {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 26px !important;
    padding-bottom: 64px !important;
}
/* Combos = FLEXIBLE full-width too (fluid, 64px gutter) — not hard-pinned to
   1280. Cards are %-based so they scale with the wider box. */
body.page-id-106229 section.cross-chanel-product-landing > .container {
    max-width: none !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
}

/* The Tech-Blue rounded container (was the legacy orange band / my dark navy). */
body.page-id-106229 #app section.cross-chanel-product-landing .chanel-wrapper {
    background: #2722f8 !important;
    background-image: none !important;
    border-radius: 46px !important;
    padding: 56px 56px !important;
    overflow: hidden;
}
body.page-id-106229 section.cross-chanel-product-landing .chanel-overlay {
    display: none !important;
}

/* heading → white Kurdis Wide 32/38 */
body.page-id-106229 section.cross-chanel-product-landing .chanel-heading__title,
body.page-id-106229 section.cross-chanel-product-landing .chanel-heading__title * {
    color: #ffffff !important;
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    font-size: 40px !important;
    line-height: 48px !important;
}
body.page-id-106229 section.cross-chanel-product-landing .chanel-heading {
    margin-bottom: 8px;
}

/* 4-up grid of white cards */
/* Flex row with justify-content: space-between — the cards keep a fixed width
   and the free space is distributed evenly between them (like the design),
   instead of grid's 1fr stretch. */
body.page-id-106229 section.cross-chanel-product-landing .chanel-content-wrapper.has-4-items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 16px 0 !important;             /* row-gap only; columns handled by space-between */
    margin-top: 40px !important;
}
body.page-id-106229 #app section.cross-chanel-product-landing .chanel-content {
    position: relative !important;   /* anchor the top-right icon */
    flex: 0 0 24% !important;        /* 4-up; slightly wider cards → tighter gaps */
    width: 24% !important;
    max-width: 24% !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 32px 22px !important;
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
    min-height: 259px;
}

/* per-product line icon, TOP-RIGHT (swap the generic fa-file glyph for the
   Figma vuesax icons; they default to #2722F8 so no recolour needed). */
body.page-id-106229 section.cross-chanel-product-landing .chanel-content__icon-deco {
    position: absolute !important;
    top: 26px;
    right: 22px;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
body.page-id-106229 section.cross-chanel-product-landing .chanel-content__icon-deco::before {
    content: none !important; /* hide the FontAwesome glyph */
}
body.page-id-106229 section.cross-chanel-product-landing .chanel-content:nth-child(1) .chanel-content__icon-deco { background-image: url("assets/combo-icon-cube.svg"); }
body.page-id-106229 section.cross-chanel-product-landing .chanel-content:nth-child(2) .chanel-content__icon-deco { background-image: url("assets/combo-icon-share.svg"); }
body.page-id-106229 section.cross-chanel-product-landing .chanel-content:nth-child(3) .chanel-content__icon-deco { background-image: url("assets/combo-icon-bag.svg"); }
body.page-id-106229 section.cross-chanel-product-landing .chanel-content:nth-child(4) .chanel-content__icon-deco { background-image: url("assets/combo-icon-truck.svg"); }

/* product name → Inter Bold 20/26 Dark Blue (leave room for the icon) */
body.page-id-106229 section.cross-chanel-product-landing .chanel-content__name {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 26px !important;
    padding-right: 52px;
    margin-bottom: 20px;
}
/* description → Dark Blue Inter 16/22 */
body.page-id-106229 section.cross-chanel-product-landing .chanel-content__description {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 22px !important;
    margin-bottom: 18px;
    flex-grow: 1;
}
/* "Mehr erfahren" row → text Dark Blue left, ORANGE arrow far right */
body.page-id-106229 section.cross-chanel-product-landing .chanel-content__link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
body.page-id-106229 section.cross-chanel-product-landing .content-link__title {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}
body.page-id-106229 section.cross-chanel-product-landing .chanel-content__link::after {
    color: #fb581f !important;      /* orange arrow (Figma) */
    font-size: 20px !important;
    -webkit-text-fill-color: #fb581f !important;
}

/* responsive: 2-up on tablet, 1-up on phone (card width drives the wrap) */
@media (max-width: 991px) {
    body.page-id-106229 #app section.cross-chanel-product-landing .chanel-content {
        flex: 0 0 48.5% !important;
        width: 48.5% !important;
        max-width: 48.5% !important;
    }
    body.page-id-106229 #app section.cross-chanel-product-landing .chanel-wrapper {
        padding: 40px 28px !important;
    }
}
@media (max-width: 575px) {
    body.page-id-106229 #app section.cross-chanel-product-landing .chanel-content {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}