/* Bconnect Home & Living Kanalen en systemen — bron: ingekort-homeliving2.css,
   upgrade-homeliving2.css (witte sectie + grijze integratie-band, gecentreerd blok 1)
   + au-ks/au-int/au-iw uit ingekort-automotive.css en upgrade-automotive.css */
.hl-ks > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }

/* sectie-ritme; witte achtergrond i.p.v. lavendel (upgrade-homeliving2.css) */
.hl-ks.hl-sec { padding: var(--space-8) 0; }
.hl-ks.hl-white { background: var(--c-white); }

/* gedeelde sectiekop (hl-head + hl-eyebrow) */
.hl-ks .hl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hl-ks .hl-head { max-width: 800px; margin: 0 auto var(--space-8); text-align: center; }
.hl-ks .hl-head .hl-eyebrow { justify-content: center; }
.hl-ks .hl-head h2 { color: var(--c-navy); margin: 0 0 16px; text-wrap: pretty; }
.hl-ks .hl-head .hl-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-text-muted); margin: 0 auto; max-width: 46em; }

/* blokken */
.hl-ks .au-ks-block + .au-ks-block { margin-top: var(--space-9); }
.hl-ks .au-ks-blockhead { margin-bottom: var(--space-6); text-align: center; }
.hl-ks .au-ks-subhead {
  font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-semibold);
  letter-spacing: -0.005em; color: var(--c-navy); margin: 0 0 6px;
}
.hl-ks .au-ks-subline { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 0 auto; max-width: 52ch; }

/* ---- BLOK 1: kanaal-tiles (vier kanalen) ---- */
.hl-ks .au-ks-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hl-ks .au-ks-tile {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: var(--space-6) 16px; text-align: center;
  background: var(--c-white); border-radius: 18px;
  border: 1.5px solid transparent;
  background-image: linear-gradient(var(--c-white), var(--c-white)), var(--gradient-brand);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.hl-ks .au-ks-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.hl-ks .au-ks-tile-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--c-magenta);
  background: var(--c-white);
  border: 1.5px solid transparent;
  background-image: linear-gradient(var(--c-white), var(--c-white)), var(--gradient-brand);
  background-origin: border-box; background-clip: padding-box, border-box;
  transition: background-image .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.hl-ks .au-ks-tile-icon svg { width: 26px; height: 26px; }
.hl-ks .au-ks-tile:hover .au-ks-tile-icon {
  background-image: var(--gradient-brand), var(--gradient-brand);
  color: #fff; box-shadow: 0 8px 18px rgba(168,2,142,.28);
}
.hl-ks .au-ks-tile-name { font-family: var(--font-head); font-size: 14px; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--c-navy); text-wrap: balance; }

/* per-tile stagger ~120ms (overschrijft de gedeelde 70ms-cadans) */
@media (prefers-reduced-motion: no-preference) {
  .hl-ks .au-ks-tile { transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .22s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
  .hl-ks:not(.is-inview) .au-ks-tile { opacity: 0; transform: translateY(16px); }
  .hl-ks.is-settled .au-ks-tile { transition: box-shadow .22s var(--ease); opacity: 1; transform: none; }
}

/* convergerende gradient-lijnen -> één inbox-punt (stroke via inline url(#...)) */
.hl-ks .au-ks-converge { margin-top: 4px; }
.hl-ks .au-ks-lines { display: block; width: 100%; height: 56px; }
.hl-ks .au-ks-lines path { fill: none; stroke-width: 1.4; }
.hl-ks .au-ks-inbox { display: flex; justify-content: center; margin-top: -4px; }
.hl-ks .au-ks-inbox-card {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 11px 22px 11px 13px; border-radius: var(--radius-pill);
  background: var(--c-white); border: 1px solid var(--c-border);
  box-shadow: 0 2px 4px rgba(20,20,100,.06), 0 14px 32px rgba(35,1,123,.13);
}
.hl-ks .au-ks-inbox-node {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168,2,142,.26);
}
.hl-ks .au-ks-inbox-node svg { width: 22px; height: 22px; }
.hl-ks .au-ks-inbox-label { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -0.005em; color: var(--c-navy); }

/* ---- BLOK 2: INTEGRATIES — lichtgrijze full-bleed band binnen de witte sectie ---- */
.hl-ks .au-int-simple { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hl-ks .au-ks-block-int {
  background: #F4F5FA;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.hl-ks .au-ks-block-int > .au-int-head,
.hl-ks .au-ks-block-int > .au-int-more {
  padding-inline: clamp(20px, 5vw, 56px);
}
.hl-ks .au-int-head { max-width: 720px; margin: 0 0 var(--space-7); }
.hl-ks .au-int-simple .au-int-head { max-width: 640px; }
.hl-ks .au-int-simple .au-int-kicker { justify-content: center; }
.hl-ks .au-int-simple .au-int-h2 { max-width: 18em; }
.hl-ks .au-int-simple .au-int-body { margin-left: auto; margin-right: auto; }
.hl-ks .au-int-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hl-ks .au-int-tick { width: 18px; height: 3px; border-radius: 999px; background: var(--gradient-brand); flex: 0 0 auto; }
.hl-ks .au-int-h2 {
  font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  font-weight: var(--fw-semibold); color: var(--c-navy); margin: 0 0 16px; text-wrap: pretty;
}
.hl-ks .au-int-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--c-text-muted); max-width: 56ch; margin: 0; text-wrap: pretty;
}

/* doorlopende logo-carousel — gedeelde marquee-schil (full-bleed, rand-fade, pauze bij hover) */
.hl-ks .au-int-marquee {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: var(--space-7);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.hl-ks .au-int-marquee-track {
  display: flex; align-items: center; width: max-content; gap: 0;
  animation: hl-ks-int-marquee var(--mq-duration, 40s) linear infinite; will-change: transform;
}
.hl-ks .au-int-marquee:hover .au-int-marquee-track { animation-play-state: paused; }
@keyframes hl-ks-int-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .hl-ks .au-int-marquee-track { animation: none; } }

/* logotegels: egale witte kaartjes, merklogo in eigen kleur; wordmark als fallback */
.hl-ks .au-iw-card {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hl-ks .au-iw-logo {
  max-width: 90%;
  max-height: 40px;          /* standaard; per logo verfijnd via inline max-height */
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.hl-ks .au-iw-name {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  text-align: center;
  line-height: 1.2;
}
/* carousel-variant: vaste kaartbreedte; verticale padding zodat de schaduw niet afknipt */
.hl-ks .au-iw-marquee { margin-top: var(--space-7); }
.hl-ks .au-iw-marquee .au-int-marquee-track { padding: 20px 0; }
.hl-ks .au-iw-marquee .au-iw-card {
  flex: 0 0 auto;
  width: 200px;
  min-width: 0;
  min-height: 116px;
  margin: 0 10px;
  box-shadow: 0 1px 2px rgba(20, 20, 100, .05), 0 5px 14px rgba(20, 20, 100, .06);
}
.hl-ks .au-iw-marquee .au-iw-card:hover {
  transform: none;
  border-color: var(--c-border);
  box-shadow: 0 1px 2px rgba(20, 20, 100, .05), 0 5px 14px rgba(20, 20, 100, .06);
}
.hl-ks .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* afsluitregel — tekstlink met gradient-accent, zonder icoon */
.hl-ks .au-int-more {
  display: inline-flex; align-items: center; gap: 0;
  margin: var(--space-7) auto 0; max-width: 60ch;
  text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--c-text-muted); transition: color .18s var(--ease);
}
.hl-ks .au-int-more-text { text-wrap: pretty; }
.hl-ks .au-int-more:hover { color: var(--c-navy); }
.hl-ks .au-int-more-accent {
  font-weight: var(--fw-semibold);
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

@media (max-width: 920px) {
  .hl-ks .au-ks-tiles { grid-template-columns: repeat(2, 1fr); }
  .hl-ks .au-ks-converge { display: none; }
  .hl-ks .au-ks-inbox { margin-top: var(--space-6); }
}
@media (max-width: 620px) {
  .hl-ks .au-iw-marquee .au-iw-card { width: 156px; min-height: 96px; padding: 14px 12px; }
  .hl-ks .au-iw-logo { max-height: 34px; }
  .hl-ks .au-iw-name { font-size: 15px; }
}
@media (max-width: 560px) {
  .hl-ks .au-ks-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) { .hl-ks.hl-sec { padding: var(--space-8) 0; } }
@media (max-width: 520px) { .hl-ks.hl-sec { padding: var(--space-7) 0; } }

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_hl_ks { margin: 0 !important; }
.elementor-widget-bconnect_hl_ks .accent { background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; display: inline-block; }

/* =====================================================================
   KANALEN — lijst + inbox-mockup (31-07-2026)
   Zelfde opzet als op /automotive/ (au-ks.css). De klassen zijn gelijk;
   beide stylesheets worden alleen op hun eigen pagina geladen, dus de
   dubbeling is bewust (zoals bij de andere hl-/au-paren).
   De oude tegel-opzet (.au-ks-tiles/.au-ks-converge/.au-ks-inbox) wordt
   hier niet meer gerenderd.
   ===================================================================== */
.au-ks-split { display: grid; gap: clamp(28px, 3vw, 44px); align-items: center; }
.au-ks-split .au-ks-blockhead { margin-bottom: clamp(18px, 2vw, 26px); }
.au-ks-split + .au-ks-block { margin-top: var(--space-9); }

/* ---- Kanalenlijst (links) ---- */
.au-ks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.au-ks-litem {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--c-white); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-feature); padding: 18px 22px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s var(--ease), box-shadow .22s var(--ease), border-color .2s var(--ease);
}
.au-ks-litem:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--c-border); }
.au-ks-litem-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--c-lavender); border: 1px solid var(--c-border-soft); color: var(--c-grad-blue);
}
.au-ks-litem-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.au-ks-litem-name { font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-navy); }
.au-ks-litem-sub { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--c-text-muted); text-wrap: pretty; }

/* ---- Draden ----
   Absoluut naast de LIJST (niet naast de hele kolom): zo dekt de SVG
   exact de lijsthoogte en vallen de y-waarden 12,5/37,5/62,5/87,5%
   samen met de middens van de vier kaarten. */
.au-ks-listwrap { position: relative; }
.au-ks-wires { display: none; position: absolute; left: 100%; top: 0; height: 100%; width: 92px; pointer-events: none; }
.au-ks-wires path { fill: none; stroke-width: 1.4; }

/* ---- Inbox-mockup (rechts) ---- */
.ksm {
  position: relative; overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-feature);
  box-shadow:
    0 2px 4px rgba(20, 20, 100, 0.05),
    0 26px 54px -24px rgba(20, 20, 100, 0.34),
    0 12px 28px -16px rgba(170, 2, 142, 0.16);
}
.ksm::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-brand); }
.ksm-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 16px; }
.ksm-mark {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168, 2, 142, .24);
}
.ksm-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ksm-title { font-family: var(--font-head); font-size: 15.5px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-navy); }
.ksm-sub { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--c-text-soft); text-wrap: pretty; }
.ksm-live {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; color: #1E8A32;
  background: rgba(57, 181, 74, .12); border-radius: var(--radius-pill); padding: 5px 10px;
}
.ksm-live-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-success); }

.ksm-rows { list-style: none; margin: 0; padding: 0; }
.ksm-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 22px; border-top: 1px solid var(--c-border-soft); }
.ksm-av {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--c-bg-soft); color: var(--c-navy);
  font-family: var(--font-head); font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .02em;
}
.ksm-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ksm-top { display: flex; align-items: center; gap: 8px; }
.ksm-name { font-family: var(--font-head); font-size: 14px; font-weight: var(--fw-bold); color: var(--c-navy); }
.ksm-time { margin-left: auto; font-family: var(--font-body); font-size: 12px; color: var(--c-text-soft); white-space: nowrap; }
.ksm-msg { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--c-text-muted); text-wrap: pretty; }
.ksm-tag {
  font-family: var(--font-head); font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: .07em; text-transform: uppercase; border-radius: var(--radius-pill);
  padding: 3px 8px; white-space: nowrap;
}
/* Kanaaltinten uit de merkgradient, geen merkkleuren van derden. */
.ksm-tag--chat { background: rgba(35, 1, 251, .10); color: #2301fb; }
.ksm-tag--wa   { background: rgba(120, 20, 200, .10); color: #7814c8; }
.ksm-tag--ms   { background: rgba(0, 122, 255, .12); color: #0069d9; }
.ksm-tag--sms  { background: rgba(168, 2, 144, .10); color: #a80290; }
.ksm-tag--mail { background: rgba(20, 20, 100, .09); color: var(--c-navy); }

.ksm-foot {
  display: flex; align-items: center; gap: 9px; margin: 0;
  padding: 13px 22px; border-top: 1px solid var(--c-border-soft); background: var(--c-lavender);
  font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--c-text-muted);
}
.ksm-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
  background: var(--c-success); color: #fff;
}

@media (min-width: 1025px) {
  /* Twee kolommen, twee rijen: de kop staat links bovenaan en de mockup
     begint op dezelfde hoogte als de eerste kanaalkaart. Daardoor valt het
     midden van de mockup samen met het midden van de lijst, en dus met het
     punt waar de vier draden samenkomen. */
  .au-ks-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    grid-template-rows: auto auto;
    /* de kolomruimte is precies de breedte van de draden-SVG */
    gap: 0 92px;
    align-items: start;
  }
  .au-ks-split .au-ks-blockhead { grid-column: 1; grid-row: 1; }
  .au-ks-split .au-ks-listwrap { grid-column: 1; grid-row: 2; }
  .au-ks-split .au-ks-visual { grid-column: 2; grid-row: 2; }
  .au-ks-wires { display: block; }
}
@media (max-width: 1024px) {
  .au-ks-split { grid-template-columns: minmax(0, 1fr); }
  .au-ks-visual { max-width: 560px; }
}
@media (max-width: 560px) {
  .au-ks-litem { padding: 16px 18px; gap: 13px; }
  .ksm-head, .ksm-row, .ksm-foot { padding-left: 16px; padding-right: 16px; }
  .ksm-top { flex-wrap: wrap; }
  .ksm-time { margin-left: 0; }
}

/* =====================================================================
   INTEGRATIES — nieuwe layout (31-07-2026)
   Kop + intro links, vier koppelingscategorieën rechts, daaronder één
   kaart met de logo-marquee (en op /automotive/ de OEM-regel), en als
   afsluiter de maatwerk-regel als pil met ronde pijl.
   `.au-int-simple` centreerde alles; binnen deze splitsing zetten we de
   kop weer links uit.
   ===================================================================== */
.int-split { display: grid; gap: clamp(26px, 3vw, 56px); align-items: start; text-align: left; width: 100%; }
.au-int-simple .int-split .au-int-head { max-width: 34em; margin: 0; text-align: left; }
.au-int-simple .int-split .au-int-kicker { justify-content: flex-start; }
.au-int-simple .int-split .au-int-h2 { max-width: 20em; margin-left: 0; margin-right: 0; text-align: left; }
.au-int-simple .int-split .au-int-body { margin-left: 0; margin-right: 0; text-align: left; }

.int-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.int-cat { display: flex; align-items: flex-start; gap: 13px; text-align: left; }
.int-cat-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--c-white); border: 1px solid var(--c-border-soft); color: var(--c-grad-blue);
  box-shadow: var(--shadow-soft);
}
.int-cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.int-cat-name { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -0.005em; color: var(--c-navy); }
.int-cat-sub { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--c-text-muted); text-wrap: pretty; }

/* ---- Logokaart ---- */
.int-card {
  width: 100%; margin-top: clamp(26px, 3vw, 44px); overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-feature); box-shadow: var(--shadow-soft);
}
.int-card-head {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 15px 20px; border-bottom: 1px solid var(--c-border-soft);
  font-family: var(--font-head); font-size: 14px; font-weight: var(--fw-bold);
  letter-spacing: -0.005em; color: var(--c-navy);
}
.int-card-ico {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 6px 14px rgba(168, 2, 142, .22);
}
/* De marquee is buiten deze kaart full-bleed (100vw); binnen de kaart
   loopt hij netjes tot de kaartranden. */
.int-card .au-int-marquee,
.int-card .au-iw-marquee { width: 100%; margin: 0; padding: 0; }
.int-card .au-iw-marquee .au-int-marquee-track { padding: 16px 0; }
/* OEM-regel als onderste balk in de kaart i.p.v. losse kaart eronder. */
.int-card .au-int-oem {
  max-width: none; margin: 0; border: 0; border-top: 1px solid var(--c-border-soft);
  border-radius: 0; box-shadow: none; background: var(--c-lavender);
  padding: 14px 20px;
}

/* ---- Maatwerk-regel als pil ---- */
.au-int-simple .au-int-more {
  margin: clamp(20px, 2.4vw, 30px) auto 0; max-width: none; gap: 14px;
  align-items: center; text-align: left;
  background: var(--c-white); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-pill); padding: 12px 12px 12px 22px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease);
}
.au-int-simple .au-int-more:hover { box-shadow: var(--shadow-card-hover); border-color: var(--c-border); transform: translateY(-1px); }
.au-int-more-arrow {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 6px 14px rgba(168, 2, 142, .26);
  transition: transform .18s var(--ease);
}
.au-int-simple .au-int-more:hover .au-int-more-arrow { transform: translateX(3px); }

@media (min-width: 1025px) {
  .int-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}
@media (max-width: 560px) {
  .au-int-simple .au-int-more { border-radius: var(--radius-feature); padding: 14px 14px 14px 18px; }
  .int-card-head, .int-card .au-int-oem { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------
   FIX: op /home-en-living/ is de integratieband full-bleed (100vw met
   negatieve marges). De oude binnenmarge gold alleen voor de DIRECTE
   kinderen .au-int-head en .au-int-more; in de nieuwe layout zitten kop
   en categorieën in .int-split en de logo's in .int-card, dus die kregen
   geen marge meer en liepen tot buiten het venster. Deze regels zetten
   de inhoud weer in de sitecontainer (zelfde breedte en gutter als de
   rest van de pagina).
   --------------------------------------------------------------------- */
.hl-ks .au-ks-block-int {
  /* --gutter blijft sitewide 56px; de responsieve zijmarge zit als padding
     op .container (24px onder 1024px, 20px onder 767px). Die breekpunten
     hier nabouwen, anders staat deze band op tablet/mobiel smaller dan de
     secties erboven. */
  --bc-band-gutter: var(--gutter, 56px);
}
@media (max-width: 1024px) { .hl-ks .au-ks-block-int { --bc-band-gutter: 24px; } }
@media (max-width: 767px)  { .hl-ks .au-ks-block-int { --bc-band-gutter: 20px; } }
.hl-ks .au-ks-block-int > .int-split,
.hl-ks .au-ks-block-int > .int-card {
  width: min(100% - 2 * var(--bc-band-gutter), var(--container, 1520px) - 2 * var(--gutter, 56px));
  margin-inline: auto;
}
.hl-ks .au-ks-block-int > .au-int-more {
  max-width: calc(100% - 2 * var(--bc-band-gutter));
}