:root {
  --echo-official-logo-light: #f7f5ef;
  --echo-official-logo-dark: #0a0f15;
  --echo-official-logo-line: rgba(255, 255, 255, 0.14);
}

.echo-official-logo-frame[data-echo-official-logo-applied] {
  position: relative;
  z-index: 5;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(145deg, #171d24, #0b0f14);
}

.echo-official-logo-frame[data-echo-official-logo-applied][data-echo-logo-frame="light"] {
  border-color: rgba(17, 24, 32, 0.12);
  background: var(--echo-official-logo-light);
}

.echo-official-logo-frame[data-echo-official-logo-applied][data-echo-logo-frame="dark"],
.echo-official-logo-frame[data-echo-official-logo-applied][data-echo-logo-frame="neutral"] {
  background: var(--echo-official-logo-dark);
}

.echo-official-logo-frame[data-echo-official-logo-applied] > .echo-official-brand-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: min(100%, var(--echo-official-logo-max-width, 100%)) !important;
  max-height: min(100%, var(--echo-official-logo-max-height, 100%)) !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  image-rendering: auto !important;
}

/* On hanging-card surfaces, the flag itself is the logo canvas. The approved
   light/dark treatment belongs to the whole banner, never to a smaller box
   floating inside it. */
.echo-brand-flag[data-echo-official-logo-applied][data-echo-logo-frame="light"],
body.echo-brands-directory-page .ebl-card[data-echo-official-logo-applied][data-echo-logo-frame="light"] {
  --echo-flag-bg: var(--echo-official-logo-light) !important;
  --echo-flag-ink: #111820 !important;
}

.echo-brand-flag[data-echo-official-logo-applied][data-echo-logo-frame="dark"],
body.echo-brands-directory-page .ebl-card[data-echo-official-logo-applied][data-echo-logo-frame="dark"] {
  --echo-flag-bg: var(--echo-official-logo-dark) !important;
  --echo-flag-ink: #f7f5ef !important;
}

.echo-brand-flag[data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-official-logo-applied],
body.echo-brands-directory-page .ebl-card[data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-official-logo-applied] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* High-resolution and vector marks may use the full safe canvas. Raster marks
   explicitly flagged as density-limited keep their frozen native-size cap. */
.echo-brand-flag[data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-logo-density-limited="false"] > .echo-official-brand-logo,
body.echo-brands-directory-page .ebl-card[data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-logo-density-limited="false"] > .echo-official-brand-logo {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Brand directory: logo-only identity. The original name remains in the DOM
   for existing search/sort code, but neither it nor an action caption is
   painted. The complete card remains the link and keeps its accessible name. */
body.echo-brands-directory-page .ebl-card {
  position: relative;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
}

body.echo-brands-directory-page .echo-brand-directory-flag .ebl-logo {
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.echo-brands-directory-page .echo-brand-directory-flag[data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-official-logo-applied] {
  padding: clamp(6px, 0.9vw, 10px);
}

body.echo-brands-directory-page .ebl-card > strong {
  grid-row: 1 !important;
  z-index: 12 !important;
  display: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 0 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

body.echo-brands-directory-page .ebl-card > strong::after {
  content: none !important;
  display: none !important;
  color: var(--echo-flag-ink) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Individual brand page. */
.em-catalog-brand-plate[data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-official-logo-applied] {
  min-width: min(100%, 248px);
  min-height: 104px;
  padding: 18px 22px;
}

/* Homepage swipe wall: logo only inside every fully clickable card. */
.echo-brand-flag .echo-brand-flag__caption {
  display: none !important;
  gap: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
}

.echo-brand-flag .echo-brand-flag__caption::after {
  content: none !important;
  display: none !important;
  color: var(--echo-flag-ink) !important;
  font-size: clamp(10px, 1vw, 12px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Fill the hanging flag instead of centering a smaller picture card inside it. */
.echo-brand-flag[data-echo-official-logo-applied] .echo-brand-flag__logo-wrap {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

.echo-brand-flag[data-echo-official-logo-applied] .echo-brand-flag__logo-wrap .echo-official-logo-frame[data-echo-official-logo-applied] {
  padding: clamp(30px, 3.2vw, 42px) clamp(22px, 3vw, 32px) clamp(18px, 2.5vw, 28px);
}

.echo-brand-flag[data-echo-official-logo-applied].is-previous,
.echo-brand-flag[data-echo-official-logo-applied].is-next {
  filter: none !important;
  opacity: 1 !important;
}

/* Preserve the existing side-card positions and scale without perspective-
   skewing the official marks themselves. Depth stays on the background layer. */
.echo-brand-flag[data-echo-official-logo-applied].is-previous {
  transform: translateX(-109%) translateY(20px) rotateY(0) rotateZ(0) scale(0.8) !important;
}

.echo-brand-flag[data-echo-official-logo-applied].is-next {
  transform: translateX(9%) translateY(20px) rotateY(0) rotateZ(0) scale(0.8) !important;
}

.echo-brand-flag[data-echo-official-logo-applied].is-previous::after {
  opacity: 0.9;
  background:
    linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    radial-gradient(circle at 8% 14%, color-mix(in srgb, var(--echo-flag-accent) 58%, transparent) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 0 66%, color-mix(in srgb, var(--echo-flag-accent) 12%, transparent) 66% 100%);
}

.echo-brand-flag[data-echo-official-logo-applied].is-next::after {
  opacity: 0.86;
  background:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    radial-gradient(circle at 8% 14%, color-mix(in srgb, var(--echo-flag-accent) 58%, transparent) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 0 66%, color-mix(in srgb, var(--echo-flag-accent) 12%, transparent) 66% 100%);
}

.em-brand-nav-dropdown [data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-official-logo-applied],
.em-brand-grid [data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-official-logo-applied],
.em-mobile-brand-rail [data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-official-logo-applied] {
  padding: 10px;
}

@media (max-width: 820px) {
  .echo-brand-flag[data-echo-official-logo-applied].is-previous {
    transform: translateX(-113%) translateY(14px) rotateY(0) rotateZ(0) scale(0.76) !important;
  }

  .echo-brand-flag[data-echo-official-logo-applied].is-next {
    transform: translateX(13%) translateY(14px) rotateY(0) rotateZ(0) scale(0.76) !important;
  }

  .echo-brand-flag[data-echo-official-logo-applied] .echo-brand-flag__logo-wrap {
    width: 100% !important;
    height: 100% !important;
  }

  .echo-brand-flag[data-echo-official-logo-applied] .echo-brand-flag__logo-wrap .echo-official-logo-frame[data-echo-official-logo-applied] {
    padding: clamp(24px, 7vw, 36px) clamp(22px, 7.5vw, 38px) clamp(18px, 5.5vw, 30px);
  }

  body.echo-brands-directory-page .echo-brand-directory-flag[data-echo-official-logo-applied] .echo-official-logo-frame[data-echo-official-logo-applied] {
    padding: 6px;
  }

  body.echo-brands-directory-page .ebl-card > strong {
    display: none !important;
    padding: 3px 0 0 !important;
  }

  body.echo-brands-directory-page .ebl-card > strong::after {
    display: none !important;
    font-size: 9px !important;
  }
}

@media (max-width: 390px) {
  .echo-brand-flag[data-echo-official-logo-applied] .echo-brand-flag__logo-wrap .echo-official-logo-frame[data-echo-official-logo-applied] {
    padding: 18px 16px 14px;
  }
}