.cc_llcvgyda_miRYbEvfkA .nisa-footer {
  --nisa-footer-side: clamp(16px, 1.39vw, 64px);
  --nisa-footer-line: var(--rYy2IWOx7T, #a5a3a0);
  width: 100%;
  border-top: 1px solid var(--nisa-footer-line);
  color: var(--yxsK6O1M8R, #000);
}

/* ===== Row 1: category preview =====
   Each FooterCategoryItem renders its own preview image, absolutely
   positioned to fill the left half of this row (its containing block —
   no element between the image and this row may set `position`). The
   first item's image is visible by default; hovering/focusing any other
   item's link reveals that item's own image on top via normal DOM stacking
   order, and it re-hides when no longer hovered/focused — no JS needed.

   IkasComponentRenderer renders every COMPONENT_LIST child into ONE
   `display:contents` wrapper div, and — confirmed live in devtools —
   EACH child is then wrapped a second time in its own per-instance
   `display:contents` CSS-scope div (one `.cc_<componentId>` div per
   FooterCategoryItem instance, all of them genuine siblings of each
   other under the renderer div). Neither wrapper generates a box, so
   flex layout and the absolute-positioning escape hatch both still
   work — but it means `.nisa-footer-category` is always the ONLY
   child of ITS OWN scope wrapper. `:first-child`/`:first-of-type`
   applied directly to `.nisa-footer-category` therefore matches EVERY
   instance (each trivially "first" among its own only-child parent),
   not just the actual first category — this was verified live: all
   images had opacity:1 simultaneously, so hover never visibly changed
   anything (nothing left to reveal).
   The real sibling relationship lives one level up, between the
   per-instance scope wrappers themselves (all direct children of the
   renderer div, which is `.nisa-footer__categories-list`'s only real
   DOM child). Target `:first-child` there — `> div > div:first-child`
   — instead of on `.nisa-footer-category`. */
.cc_llcvgyda_miRYbEvfkA .nisa-footer__categories {
  position: relative;
  display: flex;
  min-height: clamp(420px, 32vw, 760px);
  border-bottom: 1px solid var(--nisa-footer-line);
  overflow: hidden;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__categories-list {
  width: 50%;
  margin-left: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 4vw, 77px) clamp(16px, 4vw, 77px);
  border-left: 1px solid var(--nisa-footer-line);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__categories-list > div > div:first-child .nisa-footer-category__image {
  opacity: 1;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__view-all-link {
  position: relative;
  display: inline-block;
  color: var(--yxsK6O1M8R, #000);
  text-decoration: none;
  font-size: var(--nisa-footer-view-all-fs, clamp(34px, 9vw, 48px));
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__view-all-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__view-all-link:hover::after, .cc_llcvgyda_miRYbEvfkA .nisa-footer__view-all-link:focus-visible::after {
  transform: scaleX(1);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__view-all-link:focus-visible {
  outline: 2px solid var(--yxsK6O1M8R, #000);
  outline-offset: 4px;
}

/* ===== Row 2: trust badges =====
   Each TrustBadgeItem renders its own root (.nisa-trust-badge in its own
   styles.css) — Footer only owns the slider chrome here.
   Desktop: a plain N-up flex row (TrustBadgeItem sizes itself flex:1 1 0).
   Footer always writes a translateX inline on .nisa-footer__trust-track
   (mirroring HeroSlider's track, no JS media-query gate), but it can only
   ever be a 0% no-op here because .nisa-footer__trust-arrow is
   display:none on desktop — there's no way to move trustSlide off 0
   without those buttons.
   Mobile turns it into a real 1-at-a-time swipeable slider — but NOT via
   flex-basis:100% like desktop. Each slide is position:absolute with its
   `left` set per real list position below (:nth-child on the renderer's
   sibling wrapper divs), and the track's translateX pages between those
   slots. See TrustBadgeItem/styles.css's comment for why: flex-basis
   percentages don't reliably resolve for these items on some mobile
   browsers because of the nested display:contents wrappers
   IkasComponentRenderer inserts around COMPONENT_LIST children; absolute
   positioning's percentage sizing walks the real positioned-ancestor
   chain instead and isn't affected by that. */
.cc_llcvgyda_miRYbEvfkA .nisa-footer__trust {
  position: relative;
  border-bottom: 1px solid var(--nisa-footer-line);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__trust-track {
  display: flex;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__trust-arrow {
  display: none;
}

/* ===== Row 3: brand / newsletter / columns ===== */
.cc_llcvgyda_miRYbEvfkA .nisa-footer__main {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--nisa-footer-line);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__brand {
  flex: 361 1 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 70px) 16px;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__brand-logo {
  max-width: 48px;
  height: auto;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__brand-logo-text {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter {
  flex: 743 1 280px;
  padding: clamp(24px, 5vw, 70px) var(--nisa-footer-side);
  border-left: 1px solid var(--nisa-footer-line);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 32rem;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-input {
  height: 40px;
  padding: 0 16px;
  background: var(--4BzdyajXuX, #fff);
  border: 1px solid var(--rYy2IWOx7T, #949596);
  font-size: 14px;
  color: var(--fyLUpQhzWf, #000);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-input::placeholder {
  color: var(--rYy2IWOx7T, #767676);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-input:focus-visible {
  outline: 2px solid var(--yxsK6O1M8R, #000);
  outline-offset: 2px;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-error {
  margin: -6px 0 0;
  font-size: 12px;
  color: var(--5UwfHs0Yil, #b00020);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: none;
  background: var(--fyLUpQhzWf, #000);
  color: var(--j3Xiz3CkQn, #fff);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-button:hover {
  opacity: 0.8;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-button:focus-visible {
  outline: 2px solid var(--yxsK6O1M8R, #000);
  outline-offset: 2px;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-feedback {
  margin: 0;
  font-size: 13px;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-feedback--error {
  color: var(--5UwfHs0Yil, #b00020);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__columns {
  flex: 943 1 260px;
  display: flex;
  flex-wrap: wrap;
  padding-right: var(--nisa-footer-side);
}

/* Newsletter hidden (showNewsletter off): columns sit right after the
   brand, so they carry the divider the newsletter block normally draws. */
.cc_llcvgyda_miRYbEvfkA .nisa-footer__brand + .nisa-footer__columns {
  border-left: 1px solid var(--nisa-footer-line);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__column {
  flex: 1 1 33%;
  min-width: 140px;
  padding: clamp(24px, 5vw, 70px) 16px;
}

/* Only meaningful on the mobile 2-col grid below — CSS grid auto-flow
   leaves a row's second cell empty when the column count is odd, and an
   empty cell has no border box, so the divider between rows would only
   span the first column instead of the full row width. This filler
   occupies that empty cell so its border-top completes the line. Inert
   (not rendered) on desktop, where the flex-wrap layout has no such gap. */
.cc_llcvgyda_miRYbEvfkA .nisa-footer__column-filler {
  display: none;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__column-title {
  margin: 0 0 20px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__column-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__column-links a {
  position: relative;
  display: inline-block;
  width: fit-content;
  color: var(--yxsK6O1M8R, #000);
  text-decoration: none;
  font-size: 13px;
  font-weight: 300;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__column-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__column-links a:hover::after, .cc_llcvgyda_miRYbEvfkA .nisa-footer__column-links a:focus-visible::after {
  transform: scaleX(1);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__column-links a:focus-visible, .cc_llcvgyda_miRYbEvfkA .nisa-footer__bottom-credit:focus-visible {
  outline: 2px solid var(--yxsK6O1M8R, #000);
  outline-offset: 2px;
}

/* ===== Row 4: bottom bar ===== */
.cc_llcvgyda_miRYbEvfkA .nisa-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--nisa-footer-side);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__bottom-text {
  margin: 0;
  font-size: 13px;
  color: var(--rYy2IWOx7T, #5c5c5c);
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__bottom-credit {
  text-decoration: none;
}

.cc_llcvgyda_miRYbEvfkA .nisa-footer__bottom-credit:hover {
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 1023px) {
  /* iOS Safari zooms in on focus for any input under 16px. */
  .cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter-input {
    font-size: 16px;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__categories {
    min-height: 0;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__categories-list {
    width: 100%;
    margin-left: 0;
    border-left: none;
    padding: 24px 16px;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__view-all-link {
    font-size: var(--nisa-footer-view-all-fs-mobile, var(--nisa-footer-view-all-fs, clamp(34px, 9vw, 48px)));
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__trust {
    overflow: hidden;
    min-height: 220px;
  }

  /* `overflow: hidden` lives on the OUTER `.nisa-footer__trust` wrapper,
     not here — this element is the one that gets `transform: translateX`
     (inline, from Footer's trustSlide state). Clipping and sliding the
     same box cancels out: translating an element also drags its own
     clip boundary along by the same amount, so nothing new is ever
     revealed and every arrow click was a no-op. The slides need a fixed
     viewport (the wrapper) around a moving track (this element). */
  .cc_llcvgyda_miRYbEvfkA .nisa-footer__trust-track {
    position: relative;
    display: block;
    min-height: 220px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    touch-action: pan-y;
  }

  /* Per-slide `left` offsets are set directly in JS (Footer/index.tsx's
     trustTrackRef effect) against the real rendered .nisa-trust-badge
     elements — :nth-child selectors reaching through the nested
     display:contents wrappers IkasComponentRenderer inserts around each
     COMPONENT_LIST child don't reliably match here, so every badge fell
     back to TrustBadgeItem's own `left: 0` and only the first slide was
     ever visible. TrustBadgeItem's styles.css still sets the `left: 0`
     default (correct for index 0, and a safe fallback before the effect
     runs). */

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__trust-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 39px;
    height: 39px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--yxsK6O1M8R, #000);
    cursor: pointer;
    padding: 0;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__trust-arrow--prev {
    left: 16px;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__trust-arrow--next {
    right: 16px;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__trust-arrow:focus-visible {
    outline: 2px solid var(--yxsK6O1M8R, #000);
    outline-offset: 2px;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__main {
    flex-direction: column;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__brand {
    display: none;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__newsletter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: none;
    padding-left: 16px;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__columns, .cc_llcvgyda_miRYbEvfkA .nisa-footer__brand + .nisa-footer__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-left: none;
    padding-left: 0;
    padding-right: 0;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__column, .cc_llcvgyda_miRYbEvfkA .nisa-footer__column-filler {
    flex: initial;
    min-width: 0;
    padding: 24px 16px;
    border-top: 1px solid var(--nisa-footer-line);
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__column-filler {
    display: block;
  }

  .cc_llcvgyda_miRYbEvfkA .nisa-footer__bottom {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_llcvgyda_miRYbEvfkA .nisa-footer * {
    transition: none !important;
  }
}