/* EEMC Bricks — Used Bikes Archive (Phase 2: hero, intro, grid, Layout B card)
 * Tokens come from assets/shared/tokens.css. Never hard-code colours, sizes,
 * or radii here — always reference the tokens.
 */

.eemc-ubarc {
  background: var(--eemc-color-bg);
  color: var(--eemc-color-text);
  padding: 0 var(--eemc-gutter);
  max-width: 100%;
}

/* ----- Hero ----- */
.eemc-ubarc__hero {
  width: 100%;
  overflow: hidden;
  background: var(--eemc-color-bg-muted);
}
.eemc-ubarc__hero[data-height="small"]    { max-height: 320px; }
.eemc-ubarc__hero[data-height="medium"]   { max-height: 480px; }
.eemc-ubarc__hero[data-height="large"]    { max-height: 640px; }
.eemc-ubarc__hero[data-height="viewport"] { max-height: 100vh; }
.eemc-ubarc__hero-link {
  display: block;
  width: 100%;
  height: 100%;
}
.eemc-ubarc__hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .eemc-ubarc__hero { max-height: min(50vh, 360px); }
}

/* ----- Intro ----- */
.eemc-ubarc__intro {
  max-width: var(--eemc-container-max);
  margin: var(--eemc-space-8) auto var(--eemc-space-6) auto;
  padding: 0 var(--eemc-gutter);
}
.eemc-ubarc__h1 {
  font-size: var(--eemc-font-h1);
  font-weight: var(--eemc-font-weight-bold);
  line-height: var(--eemc-line-height-tight);
  letter-spacing: var(--eemc-letter-tight);
  color: var(--eemc-color-text);
  margin: 0 0 var(--eemc-space-3) 0;
}
.eemc-ubarc__intro-copy {
  color: var(--eemc-color-text-muted);
  line-height: 1.6;
  max-width: 70ch;
  font-size: 1.53rem;
}

/* ----- Grid ----- */
.eemc-ubarc__grid {
  display: grid;
  gap: var(--eemc-space-5);
  max-width: var(--eemc-container-max);
  margin: 0 auto var(--eemc-space-10) auto;
  padding: 0 var(--eemc-gutter);
  grid-template-columns: repeat(var(--eemc-cols-mobile, 1), 1fr);
}
@media (min-width: 768px) {
  .eemc-ubarc__grid {
    grid-template-columns: repeat(var(--eemc-cols-tablet, 2), 1fr);
  }
}
@media (min-width: 1024px) {
  .eemc-ubarc__grid {
    grid-template-columns: repeat(var(--eemc-cols-desktop, 3), 1fr);
  }
}

.eemc-ubarc[data-cols-mobile="1"]  .eemc-ubarc__grid { --eemc-cols-mobile: 1; }
.eemc-ubarc[data-cols-mobile="2"]  .eemc-ubarc__grid { --eemc-cols-mobile: 2; }
.eemc-ubarc[data-cols-tablet="1"]  .eemc-ubarc__grid { --eemc-cols-tablet: 1; }
.eemc-ubarc[data-cols-tablet="2"]  .eemc-ubarc__grid { --eemc-cols-tablet: 2; }
.eemc-ubarc[data-cols-desktop="2"] .eemc-ubarc__grid { --eemc-cols-desktop: 2; }
.eemc-ubarc[data-cols-desktop="3"] .eemc-ubarc__grid { --eemc-cols-desktop: 3; }
.eemc-ubarc[data-cols-desktop="4"] .eemc-ubarc__grid { --eemc-cols-desktop: 4; }

/* ----- Card (Layout B) ----- */
.eemc-ubarc__card {
  background: var(--eemc-color-bg-card);
  border: 1px solid var(--eemc-color-border-subtle);
  border-radius: var(--eemc-radius-lg);
  overflow: hidden;
  box-shadow: var(--eemc-shadow-card-rest);
  transition: transform var(--eemc-transition-elastic),
              box-shadow var(--eemc-transition-elastic),
              border-color var(--eemc-transition-elastic);
}
.eemc-ubarc__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--eemc-shadow-card-lifted);
  border-color: var(--eemc-color-accent);
}
.eemc-ubarc__card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.eemc-ubarc__card-link:focus-visible {
  outline: none;
  box-shadow: var(--eemc-focus-ring);
}
.eemc-ubarc__card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0;
  background: var(--eemc-color-bg-muted);
  overflow: hidden;
}
.eemc-ubarc__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--eemc-transition-elastic);
}
.eemc-ubarc__card:hover .eemc-ubarc__card-media img {
  transform: scale(1.04);
}
.eemc-ubarc__card-media-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    var(--eemc-color-bg-muted) 0%,
    var(--eemc-color-bg-card) 100%);
}
.eemc-ubarc__card-badge {
  position: absolute;
  top: var(--eemc-space-3);
  left: var(--eemc-space-3);
  padding: var(--eemc-space-1) var(--eemc-space-3);
  border-radius: var(--eemc-radius-chip);
  font-size: var(--eemc-font-small);
  font-weight: var(--eemc-font-weight-bold);
  letter-spacing: var(--eemc-letter-wide);
  text-transform: uppercase;
  font-size: 1.008rem;
}
.eemc-ubarc__card-badge--save {
  background: var(--eemc-gradient-gold);
  color: var(--eemc-color-accent-ink);
  box-shadow: var(--eemc-shadow-button);
}
.eemc-ubarc__card-body {
  padding: var(--eemc-space-5);
}
.eemc-ubarc__card-title {
  font-size: clamp(1.62rem, 1.44rem + 0.4vw, 1.98rem);
  line-height: 1.25;
  letter-spacing: var(--eemc-letter-tight);
  margin: 0 0 var(--eemc-space-2) 0;
  color: var(--eemc-color-text);
}
.eemc-ubarc__card-price {
  font-size: 1.95rem;
  font-weight: var(--eemc-font-weight-bold);
  margin: 0 0 var(--eemc-space-1) 0;
  color: var(--eemc-color-text);
  font-feature-settings: "tnum";
  letter-spacing: var(--eemc-letter-tight);
}
.eemc-ubarc__card-finance {
  color: var(--eemc-color-text-muted);
  font-size: var(--eemc-font-small);
  margin: 0 0 var(--eemc-space-3) 0;
  font-feature-settings: "tnum";
}
.eemc-ubarc__card-specs {
  list-style: none;
  padding: 0;
  margin: var(--eemc-space-2) 0 0 0;
  display: flex;
  gap: var(--eemc-space-2);
  flex-wrap: wrap;
}
.eemc-ubarc__card-spec {
  display: inline-flex;
  align-items: center;
  padding: var(--eemc-space-1) var(--eemc-space-3);
  background: var(--eemc-color-bg-muted);
  border-radius: var(--eemc-radius-chip);
  color: var(--eemc-color-text-muted);
  font-size: 1.404rem;
  border: 1px solid var(--eemc-color-border-subtle);
}

/* ----- Print ----- */
@media print {
  .eemc-ubarc { background: white; color: black; }
  .eemc-ubarc__hero { display: none; }
  .eemc-ubarc__grid { grid-template-columns: 1fr; }
}

/* ----- Layout (sidebar + grid) ----- */
.eemc-ubarc__layout {
  display: grid;
  gap: var(--eemc-space-6);
  max-width: var(--eemc-container-max);
  margin: 0 auto var(--eemc-space-8) auto;
  padding: 0 var(--eemc-gutter);
}
@media (min-width: 1024px) {
  .eemc-ubarc__layout {
    grid-template-columns: var(--eemc-sidebar-width) 1fr;
  }
  .eemc-ubarc[data-sidebar="right"] .eemc-ubarc__layout {
    grid-template-columns: 1fr var(--eemc-sidebar-width);
  }
  .eemc-ubarc[data-sidebar="right"] .eemc-ubarc__filters {
    order: 2;
  }
}

/* ----- Toolbar ----- */
.eemc-ubarc__toolbar {
  display: flex;
  gap: var(--eemc-space-3);
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto var(--eemc-space-5) auto;
  padding: var(--eemc-space-3) var(--eemc-gutter);
  max-width: var(--eemc-container-max);
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 10;
  transition: background var(--eemc-transition-elastic),
              padding var(--eemc-transition-elastic),
              border-color var(--eemc-transition-elastic);
  border-bottom: 1px solid transparent;
}
.eemc-ubarc__toolbar.is-stuck {
  background: var(--eemc-color-bg-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--eemc-color-border-subtle);
  padding: var(--eemc-space-2) var(--eemc-gutter);
}
.eemc-ubarc__filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--eemc-space-2);
  padding: var(--eemc-space-2) var(--eemc-space-4);
  background: transparent;
  border: 1.5px solid var(--eemc-color-border);
  border-radius: var(--eemc-radius-chip);
  color: var(--eemc-color-text);
  min-height: 44px;
  font: inherit;
  cursor: pointer;
  transition: background var(--eemc-transition-fast),
              color var(--eemc-transition-fast);
}
.eemc-ubarc__filter-trigger:hover {
  background: var(--eemc-color-accent-soft);
}
.eemc-ubarc__filter-trigger[aria-expanded="true"] {
  background: var(--eemc-color-accent);
  color: var(--eemc-color-accent-ink);
}
@media (min-width: 1024px) {
  .eemc-ubarc__filter-trigger { display: none; }
}
.eemc-ubarc__filter-count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 var(--eemc-space-1);
  border-radius: var(--eemc-radius-chip);
  background: var(--eemc-color-accent);
  color: var(--eemc-color-accent-ink);
  font-size: 1.08rem;
  font-weight: var(--eemc-font-weight-bold);
  text-align: center;
}
.eemc-ubarc__filter-trigger[aria-expanded="true"] .eemc-ubarc__filter-count {
  background: var(--eemc-color-accent-ink);
  color: var(--eemc-color-accent);
}
.eemc-ubarc__result-count {
  font-feature-settings: "tnum";
}
.eemc-ubarc__sort select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 calc(var(--eemc-space-5) + 8px) 0 var(--eemc-space-3);
  background: var(--eemc-color-bg-card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFC603'><path d='M4 6l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--eemc-space-3) center;
  color: var(--eemc-color-text);
  border: 1px solid var(--eemc-color-border-subtle);
  border-radius: var(--eemc-radius-md);
  font: inherit;
  cursor: pointer;
}
.eemc-ubarc__sort select:hover {
  border-color: var(--eemc-color-accent);
}
.eemc-ubarc__sort select:focus-visible {
  outline: none;
  box-shadow: var(--eemc-focus-ring);
}

/* ----- Filters (sidebar + drawer) ----- */
.eemc-ubarc__filters {
  background: var(--eemc-color-bg-card);
  border: 1px solid var(--eemc-color-border-subtle);
  border-radius: var(--eemc-radius-md);
  padding: var(--eemc-space-5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(90vw, 360px);
  overflow-y: auto;
  transform: translateX(-110%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
  box-shadow: var(--eemc-shadow-drawer);
}
.eemc-ubarc__filters[data-open="true"] {
  transform: translateX(0);
}
@media (min-width: 1024px) {
  .eemc-ubarc__filters {
    position: sticky;
    top: var(--eemc-space-5);
    transform: none;
    width: auto;
    height: fit-content;
    box-shadow: none;
  }
}

/* Drawer backdrop overlay (mobile only) */
@media (max-width: 1023px) {
  body.eemc-ubarc-drawer-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    z-index: 15;
    animation: eemc-ubarc-fade-in 200ms ease-out;
  }
}
@keyframes eemc-ubarc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.eemc-ubarc__filter-close {
  background: transparent;
  border: none;
  color: var(--eemc-color-text);
  font-size: 2.88rem;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  top: var(--eemc-space-3);
  right: var(--eemc-space-3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background var(--eemc-transition-fast);
}
.eemc-ubarc__filter-close:hover {
  background: var(--eemc-color-accent-soft);
}
@media (min-width: 1024px) {
  /* Close button is mobile-drawer-only; desktop sidebar is always visible. */
  .eemc-ubarc__filter-close {
    display: none;
  }
}
.eemc-ubarc__filter-form {
  display: flex;
  flex-direction: column;
  gap: var(--eemc-space-4);
}
.eemc-ubarc__filter-form input[type="search"],
.eemc-ubarc__filter-form input[type="number"],
.eemc-ubarc__filter-form select {
  width: 100%;
  min-height: 44px;
  padding: var(--eemc-space-2) var(--eemc-space-3);
  background: var(--eemc-color-bg);
  border: 1px solid var(--eemc-color-border-subtle);
  border-radius: var(--eemc-radius-sm);
  color: var(--eemc-color-text);
}
.eemc-ubarc__filter-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eemc-space-2);
}
.eemc-ubarc__filter-form legend {
  color: var(--eemc-color-accent);
  font-weight: var(--eemc-font-weight-bold);
  font-size: 1.08rem;
  letter-spacing: var(--eemc-letter-wide);
  text-transform: uppercase;
  margin-bottom: var(--eemc-space-3);
  padding-bottom: var(--eemc-space-2);
  border-bottom: 1px solid var(--eemc-color-border-subtle);
  width: 100%;
}
.eemc-ubarc__filter-form label {
  color: var(--eemc-color-text-muted);
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: var(--eemc-space-3);
  transition: color var(--eemc-transition-fast);
}
.eemc-ubarc__filter-form label:hover {
  color: var(--eemc-color-text);
}
.eemc-ubarc__filter-form input[type="checkbox"],
.eemc-ubarc__filter-form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--eemc-color-border-subtle);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color var(--eemc-transition-fast),
              background var(--eemc-transition-fast);
}
.eemc-ubarc__filter-form input[type="checkbox"] {
  border-radius: var(--eemc-radius-sm);
}
.eemc-ubarc__filter-form input[type="radio"] {
  border-radius: 50%;
}
.eemc-ubarc__filter-form input[type="checkbox"]:hover,
.eemc-ubarc__filter-form input[type="radio"]:hover {
  border-color: var(--eemc-color-accent);
}
.eemc-ubarc__filter-form input[type="checkbox"]:checked {
  background: var(--eemc-color-accent);
  border-color: var(--eemc-color-accent);
}
.eemc-ubarc__filter-form input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 9px;
  border-right: 2px solid var(--eemc-color-accent-ink);
  border-bottom: 2px solid var(--eemc-color-accent-ink);
  transform: rotate(45deg);
}
.eemc-ubarc__filter-form input[type="radio"]:checked {
  border-color: var(--eemc-color-accent);
}
.eemc-ubarc__filter-form input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--eemc-color-accent);
}
.eemc-ubarc__filter-form input:focus-visible {
  outline: none;
  box-shadow: var(--eemc-focus-ring);
}
.eemc-ubarc__filter-form input[type="search"],
.eemc-ubarc__filter-form input[type="number"] {
  background: var(--eemc-color-bg);
  border: 1px solid var(--eemc-color-border-subtle);
  color: var(--eemc-color-text);
  transition: border-color var(--eemc-transition-fast),
              box-shadow var(--eemc-transition-fast);
}
.eemc-ubarc__filter-form input[type="search"]:focus,
.eemc-ubarc__filter-form input[type="number"]:focus {
  outline: none;
  border-color: var(--eemc-color-accent);
  box-shadow: var(--eemc-focus-ring);
}
.eemc-ubarc__range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--eemc-space-2);
}
.eemc-ubarc__apply {
  background: var(--eemc-color-accent);
  color: var(--eemc-color-accent-ink);
  border: none;
  border-radius: var(--eemc-radius-md);
  padding: var(--eemc-space-3) var(--eemc-space-4);
  font-weight: var(--eemc-font-weight-bold);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--eemc-transition-fast),
              box-shadow var(--eemc-transition-fast),
              transform var(--eemc-transition-fast);
}
.eemc-ubarc__apply:hover {
  background: var(--eemc-color-accent-strong);
  box-shadow: var(--eemc-shadow-button);
}
.eemc-ubarc__apply:active {
  transform: translateY(1px);
}
.eemc-ubarc__clear {
  color: var(--eemc-color-text-muted);
  font-size: var(--eemc-font-small);
  text-decoration: underline;
  text-decoration-color: var(--eemc-color-border-subtle);
  text-underline-offset: 3px;
  text-align: right;
  transition: color var(--eemc-transition-fast),
              text-decoration-color var(--eemc-transition-fast);
}
.eemc-ubarc__clear:hover {
  color: var(--eemc-color-accent);
  text-decoration-color: var(--eemc-color-accent);
}

/* ----- Active filter chips ----- */
.eemc-ubarc__active-filters {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--eemc-space-2);
  margin: 0 auto var(--eemc-space-5) auto;
  padding: 0 var(--eemc-gutter);
  max-width: var(--eemc-container-max);
}
.eemc-ubarc__active-filters a {
  display: inline-flex;
  align-items: center;
  gap: var(--eemc-space-2);
  padding: var(--eemc-space-1) var(--eemc-space-3);
  background: transparent;
  border: 1px solid var(--eemc-color-border-subtle);
  border-radius: var(--eemc-radius-chip);
  color: var(--eemc-color-text);
  text-decoration: none;
  font-size: var(--eemc-font-small);
  transition: background var(--eemc-transition-fast),
              border-color var(--eemc-transition-fast);
}
.eemc-ubarc__active-filters a:hover {
  background: var(--eemc-color-accent-soft);
  border-color: var(--eemc-color-accent);
}
.eemc-ubarc__active-filters a span[aria-hidden="true"] {
  color: var(--eemc-color-text-dim);
  font-size: 1.584em;
}
.eemc-ubarc__active-filters a:hover span[aria-hidden="true"] {
  color: var(--eemc-color-accent);
}

/* ----- Pagination ----- */
.eemc-ubarc__pagination {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--eemc-space-10) auto;
  padding: 0 var(--eemc-gutter);
  max-width: var(--eemc-container-max);
}

.eemc-ubarc__pagination ul {
  list-style: none;
  display: flex;
  gap: var(--eemc-space-2);
  padding: 0;
  margin: 0;
  align-items: center;
}
.eemc-ubarc__pagination a,
.eemc-ubarc__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--eemc-space-3);
  border-radius: var(--eemc-radius-md);
  border: 1px solid var(--eemc-color-border-subtle);
  color: var(--eemc-color-text);
  text-decoration: none;
  font-weight: var(--eemc-font-weight-medium);
  font-feature-settings: "tnum";
  transition: background var(--eemc-transition-fast),
              border-color var(--eemc-transition-fast),
              color var(--eemc-transition-fast);
}
.eemc-ubarc__pagination a:hover {
  border-color: var(--eemc-color-accent);
  color: var(--eemc-color-accent);
}
.eemc-ubarc__pagination .current {
  background: var(--eemc-color-accent);
  color: var(--eemc-color-accent-ink);
  border-color: var(--eemc-color-accent);
  box-shadow: var(--eemc-shadow-button);
}
.eemc-ubarc__pagination .prev,
.eemc-ubarc__pagination .next {
  padding: 0 var(--eemc-space-4);
}

/* ----- Body scroll lock when drawer is open ----- */
body.eemc-ubarc-drawer-open {
  overflow: hidden;
}

/* ----- Layout A: Full detail ----- */
.eemc-ubarc__card--layout-a .eemc-ubarc__card-body {
  padding: var(--eemc-space-5);
}
.eemc-ubarc__card-tagline {
  color: var(--eemc-color-text-muted);
  font-size: var(--eemc-font-small);
  margin: 0 0 var(--eemc-space-3) 0;
}
/* Layout A — striped spec rows */
.eemc-ubarc__card-specs-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--eemc-space-4) 0 0 0;
  font-size: var(--eemc-font-small);
  border-top: 1px solid var(--eemc-color-border-subtle);
}
.eemc-ubarc__card-specs-full > div {
  display: flex;
  justify-content: space-between;
  gap: var(--eemc-space-3);
  padding: var(--eemc-space-2) 0;
  border-bottom: 1px solid var(--eemc-color-border-subtle);
}
.eemc-ubarc__card-specs-full > div:nth-child(even) {
  background: var(--eemc-color-row-stripe);
  margin: 0 calc(var(--eemc-space-5) * -1);
  padding-left: var(--eemc-space-5);
  padding-right: var(--eemc-space-5);
}
.eemc-ubarc__card-specs-full dt {
  color: var(--eemc-color-text-dim);
  font-weight: var(--eemc-font-weight-regular);
}
.eemc-ubarc__card-specs-full dd {
  margin: 0;
  color: var(--eemc-color-text);
  font-weight: var(--eemc-font-weight-medium);
  font-feature-settings: "tnum";
}

/* ----- Layout C: Responsive hybrid ----- */
.eemc-ubarc__card--layout-c .eemc-ubarc__card-link {
  display: block;
}
/* Layout C — better proportions at tablet+ */
@media (min-width: 768px) {
  .eemc-ubarc__card--layout-c .eemc-ubarc__card-link {
    display: grid;
    grid-template-columns: 35% 1fr;
    align-items: stretch;
  }
  .eemc-ubarc__card--layout-c .eemc-ubarc__card-media {
    aspect-ratio: auto;
    height: 100%;
  }
  .eemc-ubarc__card--layout-c .eemc-ubarc__card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--eemc-space-5) var(--eemc-space-6);
  }
}

/* ----- Coming-soon section ----- */
.eemc-ubarc__coming-soon {
  background: var(--eemc-color-bg-muted);
  border-top: 1px solid var(--eemc-color-border-subtle);
  border-bottom: 1px solid var(--eemc-color-border-subtle);
}
.eemc-ubarc__coming-soon-intro {
  color: var(--eemc-color-text-muted);
  max-width: 70ch;
  margin: 0 0 var(--eemc-space-6) 0;
  line-height: 1.6;
}
.eemc-ubarc__grid--coming-soon {
  padding: 0;
  margin: 0;
}

/* ----- Coming-soon card variant ----- */
.eemc-ubarc__card--coming-soon {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--eemc-color-comingsoon-border);
}
.eemc-ubarc__card--coming-soon:hover {
  border-color: var(--eemc-color-accent);
  transform: translateY(-2px);
}
.eemc-ubarc__card--coming-soon .eemc-ubarc__card-media-placeholder svg {
  width: 38%;
  height: auto;
  opacity: 0.5;
  color: var(--eemc-color-accent);
  filter: drop-shadow(0 0 12px rgba(255, 198, 3, 0.25));
}
.eemc-ubarc__card-badge--coming-soon {
  background: transparent;
  color: var(--eemc-color-text);
  border: 1px solid var(--eemc-color-accent);
  letter-spacing: var(--eemc-letter-wide);
  top: var(--eemc-space-3);
  right: var(--eemc-space-3);
  left: auto;
}
.eemc-ubarc__card-cta {
  display: inline-block;
  margin-top: var(--eemc-space-4);
  padding: var(--eemc-space-2) var(--eemc-space-5);
  background: transparent;
  color: var(--eemc-color-accent);
  border: 1.5px solid var(--eemc-color-accent);
  border-radius: var(--eemc-radius-md);
  text-decoration: none;
  font-weight: var(--eemc-font-weight-bold);
  font-size: var(--eemc-font-small);
  letter-spacing: var(--eemc-letter-wide);
  text-transform: uppercase;
  min-height: 44px;
  line-height: 1.2;
  transition: background var(--eemc-transition-fast),
              color var(--eemc-transition-fast);
}
.eemc-ubarc__card-cta:hover,
.eemc-ubarc__card-cta:focus {
  background: var(--eemc-color-accent);
  color: var(--eemc-color-accent-ink);
}

/* ----- Empty state ----- */
.eemc-ubarc__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: var(--eemc-space-8) var(--eemc-gutter);
  color: var(--eemc-color-text-muted);
  text-align: center;
  font-size: 1.584rem;
  line-height: 1.5;
  background: var(--eemc-color-bg-muted);
  border: 1px dashed var(--eemc-color-border-subtle);
  border-radius: var(--eemc-radius-lg);
  margin: 0 auto;
  max-width: 720px;
}
.eemc-ubarc__empty p {
  margin: 0;
}

/* Universal accessible focus ring */
.eemc-ubarc a:focus-visible,
.eemc-ubarc button:focus-visible,
.eemc-ubarc input:focus-visible,
.eemc-ubarc select:focus-visible {
  outline: none;
  box-shadow: var(--eemc-focus-ring);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .eemc-ubarc *,
  .eemc-ubarc *::before,
  .eemc-ubarc *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .eemc-ubarc__card:hover .eemc-ubarc__card-media img {
    transform: none;
  }
}

/* ============================================================
 * Post-Phase-4 polish round 2 — autotrader-style fill + isolation
 * ============================================================ */

/* Style isolation — defensive reset within plugin scope so the
 * element renders identically regardless of host theme. */
.eemc-ubarc,
.eemc-ubarc *,
.eemc-ubarc *::before,
.eemc-ubarc *::after {
  box-sizing: border-box;
}
.eemc-ubarc h1,
.eemc-ubarc h2,
.eemc-ubarc h3,
.eemc-ubarc h4,
.eemc-ubarc p,
.eemc-ubarc ul,
.eemc-ubarc ol,
.eemc-ubarc dl,
.eemc-ubarc dt,
.eemc-ubarc dd,
.eemc-ubarc figure,
.eemc-ubarc article,
.eemc-ubarc fieldset {
  margin: 0;
}
.eemc-ubarc ul,
.eemc-ubarc ol {
  list-style: none;
  padding: 0;
}
.eemc-ubarc a {
  color: inherit;
}
.eemc-ubarc img {
  max-width: 100%;
  height: auto;
}

/* Card height consistency — flex so cards in the same grid row
 * are always equal-height and spec chips stick to the bottom. */
.eemc-ubarc__card {
  display: flex;
  flex-direction: column;
}
.eemc-ubarc__card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.eemc-ubarc__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.eemc-ubarc__card-specs {
  margin-top: auto;
}

/* Wider-screen grid: bump to 4 columns at 1440px+ so we make
 * full use of available width (Autotrader / eBay Motors vibe). */
@media (min-width: 1440px) {
  .eemc-ubarc[data-cols-desktop="3"] .eemc-ubarc__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1800px) {
  .eemc-ubarc[data-cols-desktop="3"] .eemc-ubarc__grid,
  .eemc-ubarc[data-cols-desktop="4"] .eemc-ubarc__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================================
 * Phase 4 redesign — Autotrader-style split layout, luxury feel
 * ============================================================
 * Filter rail anchors to the left viewport edge; right content
 * panel uses a subtly lifted background. Borders dialled back;
 * elevation via shadow does the work. WP admin bar accounted for
 * on the sticky toolbar.
 */

/* ----- Split layout ----- */
.eemc-ubarc__split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .eemc-ubarc__split {
    grid-template-columns: 300px 1fr;
    align-items: stretch;
  }
}

/* Filter rail — full-bleed left edge at desktop */
.eemc-ubarc__rail {
  background: var(--eemc-color-bg);
  /* mobile: rail is invisible; drawer takes over via existing .eemc-ubarc__filters position:fixed */
}
@media (min-width: 1024px) {
  .eemc-ubarc__rail {
    background: var(--eemc-color-bg);
    border-right: 1px solid var(--eemc-color-border-subtle);
    align-self: stretch;
    min-height: 100vh;
  }
  /* The inner filters become static at desktop — they sit naturally inside the rail. */
  .eemc-ubarc__rail .eemc-ubarc__filters {
    position: sticky;
    top: 64px; /* default offset — toolbar height + breathing room */
    transform: none !important;
    box-shadow: none;
    background: transparent;
    border: none;
    border-radius: 0;
    width: auto;
    height: auto;
    padding: var(--eemc-space-6) var(--eemc-space-5);
    overflow-y: auto;
    max-height: calc(100vh - 64px);
  }
}

/* Right content panel — subtly lifted off-black */
.eemc-ubarc__content {
  background: var(--eemc-color-bg-muted);
  padding: var(--eemc-space-5) var(--eemc-gutter) var(--eemc-space-10);
  min-width: 0; /* prevents children with overflow from stretching the grid column */
}
@media (min-width: 1024px) {
  .eemc-ubarc__content {
    padding: var(--eemc-space-6) var(--eemc-space-8) var(--eemc-space-10);
  }
}

/* The intro container is no longer a max-width wrapper — it inherits the content panel's width. */
.eemc-ubarc__intro {
  max-width: 80ch;
  margin: 0 0 var(--eemc-space-6) 0;
  padding: 0;
}

/* The grid sits inside the content panel — no auto-margin needed. */
.eemc-ubarc__grid {
  max-width: none;
  margin: 0 0 var(--eemc-space-8) 0;
  padding: 0;
  gap: var(--eemc-space-5);
}
@media (min-width: 1024px) {
  /* Content panel already gives column count via available width;
   * cards-per-row scales with --eemc-cols-desktop. */
}

/* Toolbar — full bleed within content panel, sticky, solid black, z-999, admin-bar aware */
.eemc-ubarc__toolbar {
  margin: 0 calc(var(--eemc-gutter) * -1) var(--eemc-space-5);
  padding: var(--eemc-space-3) var(--eemc-gutter);
  background: var(--eemc-color-bg);
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid var(--eemc-color-border-subtle);
  max-width: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (min-width: 1024px) {
  .eemc-ubarc__toolbar {
    margin: 0 calc(var(--eemc-space-8) * -1) var(--eemc-space-5);
    padding: var(--eemc-space-3) var(--eemc-space-8);
  }
}
.eemc-ubarc__toolbar.is-stuck {
  background: var(--eemc-color-bg);
  padding: var(--eemc-space-3) var(--eemc-gutter);
  border-bottom-color: var(--eemc-color-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
@media (min-width: 1024px) {
  .eemc-ubarc__toolbar.is-stuck {
    padding: var(--eemc-space-3) var(--eemc-space-8);
  }
}

/* WP admin bar offset (logged-in users) */
body.admin-bar .eemc-ubarc__toolbar {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .eemc-ubarc__toolbar {
    top: 46px;
  }
}

/* Active filter chips — inside content panel, no extra margin */
.eemc-ubarc__active-filters {
  margin: 0 0 var(--eemc-space-5) 0;
  padding: 0;
  max-width: none;
}

/* Pagination — inside content panel */
.eemc-ubarc__pagination {
  margin: 0 0 var(--eemc-space-6) 0;
  padding: 0;
  max-width: none;
  justify-content: flex-start;
}

/* ----- Cards: tighter, less Tron, more luxury ----- */
.eemc-ubarc__card {
  background: var(--eemc-color-bg-card);
  border: none; /* drop the gold hairline — let shadow do the lifting */
  border-radius: var(--eemc-radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.03);
}
.eemc-ubarc__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55),
              0 0 0 1px var(--eemc-color-accent),
              0 0 24px rgba(255, 198, 3, 0.18);
  border-color: transparent;
}
.eemc-ubarc__card-body {
  padding: var(--eemc-space-4) var(--eemc-space-5) var(--eemc-space-5);
  gap: var(--eemc-space-2);
}
.eemc-ubarc__card-title {
  margin: 0;
}
.eemc-ubarc__card-price {
  margin: var(--eemc-space-1) 0 0;
  font-size: 1.8rem;
}
.eemc-ubarc__card-finance {
  margin: 0;
}

/* Specs as horizontal data rows — label + value, not chip pills */
.eemc-ubarc__card-specs {
  list-style: none;
  padding: 0;
  margin: var(--eemc-space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.eemc-ubarc__card-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--eemc-space-2) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  font-size: var(--eemc-font-small);
  color: var(--eemc-color-text);
}
.eemc-ubarc__card-spec-label {
  color: var(--eemc-color-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--eemc-letter-wide);
  font-size: 1.2096rem;
}
.eemc-ubarc__card-spec-value {
  color: var(--eemc-color-text);
  font-weight: var(--eemc-font-weight-medium);
  font-feature-settings: "tnum";
}

/* View details action — filled gold, primary CTA at bottom of card */
.eemc-ubarc__card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--eemc-space-2);
  margin-top: var(--eemc-space-4);
  padding: var(--eemc-space-3) var(--eemc-space-4);
  background: var(--eemc-color-accent);
  color: var(--eemc-color-accent-ink);
  border-radius: var(--eemc-radius-md);
  font-weight: var(--eemc-font-weight-bold);
  font-size: var(--eemc-font-small);
  letter-spacing: var(--eemc-letter-wide);
  text-transform: uppercase;
  min-height: 44px;
  transition: background var(--eemc-transition-fast);
}
.eemc-ubarc__card:hover .eemc-ubarc__card-action {
  background: var(--eemc-color-accent-strong);
}
.eemc-ubarc__card-action-chevron {
  font-size: 1.584em;
  transition: transform var(--eemc-transition-fast);
}
.eemc-ubarc__card:hover .eemc-ubarc__card-action-chevron {
  transform: translateX(3px);
}

/* ----- Filter rail polish ----- */
.eemc-ubarc__filter-form {
  gap: var(--eemc-space-5);
}
.eemc-ubarc__filter-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eemc-space-1);
}
.eemc-ubarc__filter-form legend {
  padding: 0 0 var(--eemc-space-2);
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
}
.eemc-ubarc__filter-form label {
  display: flex;
  align-items: center;
  gap: var(--eemc-space-3);
  padding: var(--eemc-space-1) 0;
  min-height: auto;
  cursor: pointer;
  color: var(--eemc-color-text-muted);
  font-size: 1.35rem;
}
.eemc-ubarc__filter-form label:hover {
  color: var(--eemc-color-text);
}

/* Refined checkbox: smaller, crisper, no weird stretch */
.eemc-ubarc__filter-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}
.eemc-ubarc__filter-form input[type="checkbox"]:checked::after {
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}
.eemc-ubarc__filter-form input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.eemc-ubarc__filter-form input[type="radio"]:checked::after {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
}

/* Search input — full width inside the rail */
.eemc-ubarc__filter-search-label {
  display: block;
}

/* "Apply filters" — filled gold, full-width inside rail */
.eemc-ubarc__apply {
  width: 100%;
}

/* Active chip — smaller, lighter weight */
.eemc-ubarc__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eemc-space-2);
  list-style: none;
}
.eemc-ubarc__active-filters a {
  padding: 4px 10px;
  font-size: 1.17rem;
  background: rgba(255, 255, 255, 0.04);
  border: none;
}

/* ----- Coming-soon: integrated, luxury feel ----- */
.eemc-ubarc__coming-soon {
  background: transparent;
  border: none;
  margin: var(--eemc-space-10) 0 0;
  padding: var(--eemc-space-8) 0 0;
  position: relative;
}
.eemc-ubarc__coming-soon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eemc-color-accent), transparent);
  opacity: 0.5;
  transform: none;
}
.eemc-ubarc__coming-soon-heading {
  font-size: clamp(2.52rem, 2.016rem + 1.5vw, 3.6rem);
  color: var(--eemc-color-accent);
  margin: 0 0 var(--eemc-space-3);
  letter-spacing: var(--eemc-letter-tight);
}
.eemc-ubarc__coming-soon-intro {
  margin: 0 0 var(--eemc-space-6);
  max-width: 70ch;
  color: var(--eemc-color-text-muted);
  font-size: 1.53rem;
  line-height: 1.6;
}

/* Coming-soon card variants now use the same card frame, no special bg */
.eemc-ubarc__card--coming-soon {
  background: var(--eemc-color-bg-card);
  border: none;
}
.eemc-ubarc__card--coming-soon:hover {
  border-color: transparent;
}
.eemc-ubarc__card-badge--coming-soon {
  top: var(--eemc-space-3);
  right: var(--eemc-space-3);
  left: auto;
  background: rgba(0, 0, 0, 0.72);
  color: var(--eemc-color-accent);
  border: 1px solid var(--eemc-color-accent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Filled "Register interest" CTA — same primary style as View details */
.eemc-ubarc__card-cta--filled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--eemc-space-2);
  margin-top: var(--eemc-space-4);
  padding: var(--eemc-space-3) var(--eemc-space-4);
  background: var(--eemc-color-accent);
  color: var(--eemc-color-accent-ink);
  border: none;
  border-radius: var(--eemc-radius-md);
  font-weight: var(--eemc-font-weight-bold);
  font-size: var(--eemc-font-small);
  letter-spacing: var(--eemc-letter-wide);
  text-transform: uppercase;
  text-decoration: none;
  min-height: 44px;
  transition: background var(--eemc-transition-fast);
}
.eemc-ubarc__card-cta--filled:hover,
.eemc-ubarc__card-cta--filled:focus {
  background: var(--eemc-color-accent-strong);
  color: var(--eemc-color-accent-ink);
}

/* ----- Tron de-emphasis: remove redundant edge borders ----- */
.eemc-ubarc__intro-copy {
  font-size: 1.53rem;
  line-height: 1.6;
}

/* ============================================================
 * Round 4 — base 16px font, uniform card heights, checkbox reset
 * ============================================================ */

/* Lock the base font-size to 16px in the plugin scope so the
 * page never inherits a smaller theme html font-size. All rem
 * values below are calibrated to a 16px root. */
.eemc-ubarc {
  font-size: 23.04px;
  line-height: 1.5;
}

/* Bump body copy upward so the spec details, finance line, and
 * chips never read smaller than 14px (the user explicitly asked
 * for a 16px floor on content; small uppercase microcopy labels
 * stay smaller because they're labels, not content). */
.eemc-ubarc__intro-copy {
  font-size: 1.53rem;       /* 17px */
}
.eemc-ubarc__card-price {
  font-size: 1.95rem;         /* 26px */
}
.eemc-ubarc__card-finance {
  font-size: 1.44rem;             /* 16px floor */
}
.eemc-ubarc__card-spec {
  font-size: 1.728rem;             /* 16px row */
  padding: var(--eemc-space-3) 0;
}
.eemc-ubarc__card-spec-value {
  font-size: 1.728rem;             /* 16px floor */
  font-weight: var(--eemc-font-weight-bold);
}
.eemc-ubarc__card-spec-label {
  font-size: 1.296rem;          /* 12px — microcopy label, intentionally smaller */
}
.eemc-ubarc__card-action,
.eemc-ubarc__card-cta--filled {
  font-size: 1.35rem;        /* 15px button label — uppercase + tracked = legible */
}
.eemc-ubarc__result-count {
  font-size: 1.44rem;
}
.eemc-ubarc__sort select,
.eemc-ubarc__filter-form input[type="search"],
.eemc-ubarc__filter-form input[type="number"] {
  font-size: 1.44rem;
}
.eemc-ubarc__filter-form label {
  font-size: 1.44rem;             /* was 0.9375rem — bump filter rows to 16px */
}

/* ----- Uniform card heights ----- */
.eemc-ubarc__grid {
  align-items: stretch;
}
.eemc-ubarc__card {
  height: 100%;
}
.eemc-ubarc__card-link {
  height: 100%;
}

/* ----- Spec details emphasised: stronger visual rhythm ----- */
.eemc-ubarc__card-specs {
  margin-top: var(--eemc-space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0;
}
.eemc-ubarc__card-spec {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.eemc-ubarc__card-spec:last-child {
  border-bottom: none;
}
.eemc-ubarc__card-spec-value {
  color: var(--eemc-color-text);
}
.eemc-ubarc__card-spec-label {
  color: var(--eemc-color-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--eemc-letter-wide);
  font-weight: var(--eemc-font-weight-medium);
}

/* ----- Filter checkbox / radio — hard reset against theme bleed ----- */
.eemc-ubarc__filter-form input[type="checkbox"],
.eemc-ubarc__filter-form input[type="radio"] {
  /* Aggressive reset: theme might have set width:100% or flex:1
   * on form inputs. Lock dimensions hard. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: content-box;     /* border outside the 18×18 inner box */
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex: 0 0 18px;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--eemc-color-border-subtle);
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.eemc-ubarc__filter-form input[type="checkbox"] {
  border-radius: var(--eemc-radius-sm);
}
.eemc-ubarc__filter-form input[type="radio"] {
  border-radius: 50%;
}
/* Checked state — gold fill, recentered tick now that box-sizing is content-box */
.eemc-ubarc__filter-form input[type="checkbox"]:checked {
  background: var(--eemc-color-accent);
  border-color: var(--eemc-color-accent);
}
.eemc-ubarc__filter-form input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--eemc-color-accent-ink);
  border-bottom: 2px solid var(--eemc-color-accent-ink);
  transform: rotate(45deg);
}
.eemc-ubarc__filter-form input[type="radio"]:checked {
  border-color: var(--eemc-color-accent);
}
.eemc-ubarc__filter-form input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--eemc-color-accent);
}

/* ============================================================
 * Round 5 — buttons pinned to card bottom + filters title + scroll affordance
 * ============================================================ */

/* Buttons always at card bottom regardless of content variance above */
.eemc-ubarc__card-specs {
  margin-top: 0;
}
.eemc-ubarc__card-action,
.eemc-ubarc__card-cta--filled {
  margin-top: auto;
}

/* The card body is a flex column that fills card height — already true
 * from earlier rules. Re-affirm to ensure auto margin works. */
.eemc-ubarc__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

/* ----- Filters header (title + close) ----- */
.eemc-ubarc__filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--eemc-space-5);
  padding-bottom: var(--eemc-space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.eemc-ubarc__filters-title {
  font-size: 1.62rem;        /* 18px */
  font-weight: var(--eemc-font-weight-bold);
  letter-spacing: var(--eemc-letter-tight);
  margin: 0;
  color: var(--eemc-color-text);
}

/* ----- Filter rail scroll affordance (desktop) ----- */
@media (min-width: 1024px) {
  /* Custom scrollbar — slim gold thumb on dark track */
  .eemc-ubarc__rail .eemc-ubarc__filters {
    scrollbar-width: thin;
    scrollbar-color: var(--eemc-color-accent) transparent;
  }
  .eemc-ubarc__rail .eemc-ubarc__filters::-webkit-scrollbar {
    width: 8px;
  }
  .eemc-ubarc__rail .eemc-ubarc__filters::-webkit-scrollbar-track {
    background: transparent;
  }
  .eemc-ubarc__rail .eemc-ubarc__filters::-webkit-scrollbar-thumb {
    background: var(--eemc-color-accent);
    border-radius: 4px;
    border: 2px solid var(--eemc-color-bg);
  }
  .eemc-ubarc__rail .eemc-ubarc__filters::-webkit-scrollbar-thumb:hover {
    background: var(--eemc-color-accent-strong);
  }

  /* Fade gradient at the bottom of the rail hints "more content below" */
  .eemc-ubarc__rail {
    position: relative;
  }
  .eemc-ubarc__rail::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: 48px;
    margin-top: -48px;
    background: linear-gradient(to top, var(--eemc-color-bg) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }
}

/* Mobile drawer header — same title pattern */
@media (max-width: 1023px) {
  .eemc-ubarc__filters-header {
    position: sticky;
    top: 0;
    background: var(--eemc-color-bg-card);
    padding: var(--eemc-space-3) 0 var(--eemc-space-3);
    margin: calc(var(--eemc-space-5) * -1) calc(var(--eemc-space-5) * -1) var(--eemc-space-4);
    padding-left: var(--eemc-space-5);
    padding-right: var(--eemc-space-5);
    z-index: 2;
  }
}

/* ============================================================
 * Round 6 — full-width edge-to-edge layout
 * ============================================================
 * Remove all outer left/right padding so the design genuinely
 * fills 100% of the viewport. Filter rail hugs the left edge;
 * content panel and its children (toolbar, grid, pagination,
 * coming-soon) extend to the right edge.
 */

.eemc-ubarc {
  padding: 0;
  max-width: 100%;
}

.eemc-ubarc__content {
  padding: var(--eemc-space-5) 0 var(--eemc-space-10);
}
@media (min-width: 1024px) {
  .eemc-ubarc__content {
    padding: var(--eemc-space-6) 0 var(--eemc-space-10);
  }
}

/* Toolbar — full-width within the content panel; drop the
 * negative-margin trick because the panel itself no longer
 * has left/right padding to escape. */
.eemc-ubarc__toolbar {
  margin: 0 0 var(--eemc-space-5);
  padding: var(--eemc-space-3) var(--eemc-space-5);
  max-width: none;
}
@media (min-width: 1024px) {
  .eemc-ubarc__toolbar {
    padding: var(--eemc-space-3) var(--eemc-space-6);
    margin: 0 0 var(--eemc-space-5);
  }
}
.eemc-ubarc__toolbar.is-stuck {
  padding: var(--eemc-space-3) var(--eemc-space-5);
}
@media (min-width: 1024px) {
  .eemc-ubarc__toolbar.is-stuck {
    padding: var(--eemc-space-3) var(--eemc-space-6);
  }
}

/* Intro, active chips, grid, pagination, coming-soon get a
 * small inner gutter so content doesn't kiss the viewport edge.
 * The design is full-width but cards/text retain breathing room. */
.eemc-ubarc__intro,
.eemc-ubarc__active-filters,
.eemc-ubarc__grid,
.eemc-ubarc__pagination,
.eemc-ubarc__coming-soon {
  padding-left: var(--eemc-space-5);
  padding-right: var(--eemc-space-5);
}
@media (min-width: 1024px) {
  .eemc-ubarc__intro,
  .eemc-ubarc__active-filters,
  .eemc-ubarc__grid,
  .eemc-ubarc__pagination,
  .eemc-ubarc__coming-soon {
    padding-left: var(--eemc-space-6);
    padding-right: var(--eemc-space-6);
  }
}

/* The coming-soon hairline + section break sits inside the panel
 * — reset margins so the gradient line spans full content panel width. */
.eemc-ubarc__coming-soon::before {
  left: 0;
  width: 100%;
}

/* ============================================================
 * Round 7 — active-filters row + full-image cards + text bump
 * ============================================================ */

/* ----- Active filters row ----- */
.eemc-ubarc__active-filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--eemc-space-3);
  margin: 0 0 var(--eemc-space-5);
  padding: var(--eemc-space-3) var(--eemc-space-5);
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
@media (min-width: 1024px) {
  .eemc-ubarc__active-filters-row {
    padding: var(--eemc-space-3) var(--eemc-space-6);
  }
}
.eemc-ubarc__active-filters-title {
  font-size: 1.17rem;             /* 13px */
  font-weight: var(--eemc-font-weight-bold);
  letter-spacing: var(--eemc-letter-wide);
  text-transform: uppercase;
  color: var(--eemc-color-accent);
  flex-shrink: 0;
}
.eemc-ubarc__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eemc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}
.eemc-ubarc__active-filters li {
  margin: 0;
  padding: 0;
}
.eemc-ubarc__active-filters-clear {
  font-size: 1.26rem;              /* 14px */
  color: var(--eemc-color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--eemc-color-border-subtle);
  text-underline-offset: 3px;
  flex-shrink: 0;
}
.eemc-ubarc__active-filters-clear:hover {
  color: var(--eemc-color-accent);
  text-decoration-color: var(--eemc-color-accent);
}

/* ----- Card media — show the whole bike (4:3) ----- */
.eemc-ubarc__card-media {
  aspect-ratio: 4 / 3;
  background: var(--eemc-color-bg-muted);
}
.eemc-ubarc__card-media img {
  object-fit: contain;
  object-position: center;
  background: var(--eemc-color-bg-muted);
}
.eemc-ubarc__card--coming-soon .eemc-ubarc__card-media-placeholder {
  aspect-ratio: 4 / 3;
}

/* ----- Bigger, more confident text scale ----- */
.eemc-ubarc__h1 {
  font-size: clamp(3.24rem, 2.304rem + 2.4vw, 5.04rem);
}
.eemc-ubarc__intro-copy {
  font-size: 1.62rem;             /* 18px */
  line-height: 1.65;
}
.eemc-ubarc__coming-soon-heading {
  font-size: clamp(2.88rem, 2.16rem + 1.8vw, 4.32rem);
}
.eemc-ubarc__coming-soon-intro {
  font-size: 1.62rem;
}
.eemc-ubarc__card-title {
  font-size: clamp(1.8rem, 1.512rem + 0.6vw, 2.16rem);   /* 20-24px */
  line-height: 1.25;
}
.eemc-ubarc__card-price {
  font-size: clamp(2.1rem, 1.68rem + 1vw, 2.55rem);    /* 28-34px */
  margin-top: var(--eemc-space-2);
}
.eemc-ubarc__card-finance {
  font-size: 1.53rem;            /* 17px */
}
.eemc-ubarc__card-tagline {
  font-size: 1.44rem;                 /* 16px floor */
  line-height: 1.4;
  margin: var(--eemc-space-1) 0 0;
}
.eemc-ubarc__card-spec {
  font-size: 1.836rem;            /* 17px row */
  padding: var(--eemc-space-3) 0;
}
.eemc-ubarc__card-spec-value {
  font-size: 1.836rem;            /* 17px bold */
}
.eemc-ubarc__card-spec-label {
  font-size: 1.404rem;            /* 13px microcopy */
}
.eemc-ubarc__card-action,
.eemc-ubarc__card-cta--filled {
  font-size: 1.44rem;                 /* 16px button label */
  padding: var(--eemc-space-3) var(--eemc-space-5);
}
.eemc-ubarc__result-count {
  font-size: 1.53rem;            /* 17px */
}
.eemc-ubarc__filter-form label {
  font-size: 1.53rem;            /* 17px filter rows */
}
.eemc-ubarc__filters-title {
  font-size: 1.8rem;              /* 20px section title */
}
.eemc-ubarc__filter-form legend {
  font-size: 1.26rem;             /* 14px group heading */
}

/* ----- Hero image: show the entire image ----- */
.eemc-ubarc__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--eemc-color-bg);
}
.eemc-ubarc__hero-image {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ----- Hero: natural image aspect ratio, no height clamp ----- */
.eemc-ubarc__hero[data-height="small"],
.eemc-ubarc__hero[data-height="medium"],
.eemc-ubarc__hero[data-height="large"] {
  max-height: none;
}
.eemc-ubarc__hero[data-height="viewport"] {
  max-height: none;
}
@media (max-width: 767px) {
  .eemc-ubarc__hero {
    max-height: none;
  }
}
.eemc-ubarc__hero {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.eemc-ubarc__hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
  object-position: initial;
}

/* ----- Card media: image dictates own height, never cropped ----- */
.eemc-ubarc__card-media {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.eemc-ubarc__card-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: initial;
  object-position: initial;
}
/* Hover image-scale stays but limited to within container; remove
 * transform to avoid clipping when overflow is visible. */
.eemc-ubarc__card:hover .eemc-ubarc__card-media img {
  transform: none;
}
.eemc-ubarc__card-media-placeholder {
  aspect-ratio: 4 / 3;
}

/* ============================================================
 * Round 8 — Layout B card: richer info, stronger hierarchy
 * ============================================================ */

/* Re-establish position context on media so the absolute badges/condition pill anchor. */
.eemc-ubarc__card-media {
  position: relative;
}

/* Condition pill (top-right of image): "Used · 2023" */
.eemc-ubarc__card-condition {
  position: absolute;
  top: var(--eemc-space-3);
  right: var(--eemc-space-3);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--eemc-color-text);
  border-radius: var(--eemc-radius-pill);
  font-size: 1.08rem;
  font-weight: var(--eemc-font-weight-bold);
  letter-spacing: var(--eemc-letter-wide);
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eemc-ubarc__card-condition-divider {
  color: var(--eemc-color-accent);
  font-weight: var(--eemc-font-weight-bold);
}

/* Save badge (top-left) — keep existing styling but reinforce position */
.eemc-ubarc__card-badge--save {
  left: var(--eemc-space-3);
  top: var(--eemc-space-3);
  font-size: 1.08rem;
  padding: 6px 12px;
}

/* ----- Layout B body: clear vertical rhythm ----- */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-body {
  padding: var(--eemc-space-5);
  gap: 0;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-header {
  margin-bottom: var(--eemc-space-4);
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-title {
  font-size: clamp(1.944rem, 1.512rem + 1vw, 2.34rem);   /* 21.6 – 26px */
  font-weight: var(--eemc-font-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--eemc-letter-tight);
  margin: 0;
  color: var(--eemc-color-text);
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-tagline {
  font-size: 1.35rem;
  color: var(--eemc-color-accent);
  margin: 6px 0 0;
  font-weight: var(--eemc-font-weight-medium);
  letter-spacing: 0.01em;
}

/* Price row — big price, "From £X/mo" under it */
.eemc-ubarc__card-price-row {
  padding: var(--eemc-space-3) 0 var(--eemc-space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: var(--eemc-space-4);
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-price {
  font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3rem);       /* 32 – 40px */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--eemc-color-text);
  font-feature-settings: "tnum";
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-finance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 1.44rem;
  color: var(--eemc-color-text-muted);
}
.eemc-ubarc__card-finance-from {
  color: var(--eemc-color-text-dim);
  font-size: 1.26rem;
  text-transform: uppercase;
  letter-spacing: var(--eemc-letter-wide);
  font-weight: var(--eemc-font-weight-bold);
}
.eemc-ubarc__card-finance-amount {
  color: var(--eemc-color-accent);
  font-size: 1.35rem;
  font-weight: 800;
  font-feature-settings: "tnum";
}
.eemc-ubarc__card-finance-period {
  color: var(--eemc-color-text-muted);
}

/* ----- Spec grid (2x2 with icons) ----- */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--eemc-space-3) var(--eemc-space-4);
  list-style: none;
  margin: 0 0 var(--eemc-space-4);
  padding: 0;
  border: none;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec {
  display: flex;
  align-items: center;
  gap: var(--eemc-space-3);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  border-bottom: none;
}
.eemc-ubarc__card-spec-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 198, 3, 0.08);
  color: var(--eemc-color-accent);
  border-radius: 8px;
  border: 1px solid rgba(255, 198, 3, 0.15);
}
.eemc-ubarc__card-spec-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-label {
  font-size: 1.188rem;
  color: var(--eemc-color-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--eemc-letter-wide);
  font-weight: var(--eemc-font-weight-bold);
  line-height: 1.2;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-value {
  font-size: 1.62rem;
  color: var(--eemc-color-text);
  font-weight: var(--eemc-font-weight-bold);
  font-feature-settings: "tnum";
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Trust strip (perks list) ----- */
.eemc-ubarc__card-perks {
  list-style: none;
  margin: 0 0 var(--eemc-space-4);
  padding: var(--eemc-space-3) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eemc-ubarc__card-perk {
  display: flex;
  align-items: center;
  gap: var(--eemc-space-2);
  font-size: 1.512rem;
  color: var(--eemc-color-text-muted);
}
.eemc-ubarc__card-perk-icon {
  flex-shrink: 0;
  color: var(--eemc-color-accent);
}

/* Hover micro-interaction: condition pill shifts subtly */
.eemc-ubarc__card:hover .eemc-ubarc__card-condition {
  background: rgba(0, 0, 0, 0.88);
}

/* ============================================================
 * Round 9 — Card-level container queries for true responsiveness
 * ============================================================
 * Cards adapt based on their OWN width (not viewport width). Works
 * the same in the Bricks editor iframe as on the front end, in a
 * 4-col desktop grid as in a 1-col mobile stack.
 */

.eemc-ubarc__card {
  container-type: inline-size;
  container-name: eemc-ubarc-card;
}

/* Allow values to wrap when there isn't space for a single line */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-value {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: anywhere;
}
.eemc-ubarc__card-title,
.eemc-ubarc__card-tagline,
.eemc-ubarc__card-perk span {
  overflow-wrap: anywhere;
}

/* Narrow card (≤ 360px): collapse 2x2 grid to 1 column, dial things back */
@container eemc-ubarc-card (max-width: 360px) {
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-body {
    padding: var(--eemc-space-4);
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-title {
    font-size: 1.8rem;            /* 20px */
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-price {
    font-size: 2.1rem;            /* 28px */
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-specs {
    grid-template-columns: 1fr;
    gap: var(--eemc-space-2);
  }
  .eemc-ubarc__card-spec-icon {
    width: 32px;
    height: 32px;
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-value {
    font-size: 1.62rem;
  }
  .eemc-ubarc__card-finance-amount {
    font-size: 1.2rem;
  }
  .eemc-ubarc__card-condition {
    padding: 4px 8px;
    font-size: 0.99rem;
  }
  .eemc-ubarc__card-badge--save {
    font-size: 0.99rem;
    padding: 4px 10px;
  }
}

/* Very narrow card (≤ 280px) — minimal density */
@container eemc-ubarc-card (max-width: 280px) {
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-body {
    padding: var(--eemc-space-3);
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-title {
    font-size: 1.62rem;           /* 18px */
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-price {
    font-size: 1.8rem;             /* 24px */
  }
  .eemc-ubarc__card-spec-icon {
    width: 28px;
    height: 28px;
  }
  .eemc-ubarc__card-spec-icon svg {
    width: 16px;
    height: 16px;
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-value {
    font-size: 1.512rem;
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-label {
    font-size: 1.08rem;
  }
  .eemc-ubarc__card-action,
  .eemc-ubarc__card-cta--filled {
    font-size: 1.26rem;
    padding: var(--eemc-space-2) var(--eemc-space-3);
  }
  .eemc-ubarc__card-finance-from {
    font-size: 1.08rem;
  }
}

/* Wide card (>= 480px): give the price even more emphasis */
@container eemc-ubarc-card (min-width: 480px) {
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-price {
    font-size: 3rem;             /* 40px */
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-title {
    font-size: 2.34rem;           /* 26px */
  }
}

/* Browser fallback for very old browsers without container queries:
 * use a viewport media query that approximates "narrow card" at
 * mobile/tablet sizes. This is purely insurance — container queries
 * are supported by Chrome 105+/Firefox 110+/Safari 16+. */
@supports not (container-type: inline-size) {
  @media (max-width: 480px) {
    .eemc-ubarc__card--layout-b .eemc-ubarc__card-specs {
      grid-template-columns: 1fr;
    }
    .eemc-ubarc__card--layout-b .eemc-ubarc__card-price {
      font-size: 2.1rem;
    }
    .eemc-ubarc__card--layout-b .eemc-ubarc__card-title {
      font-size: 1.8rem;
    }
  }
}

/* ============================================================
 * Round 10 — bulletproof title + horizontal spec rows + bigger type
 * ============================================================ */

/* Defensive title rules — overrides whatever the host theme might
 * have set (font-size: 0, color: transparent, display: none, etc.) */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-title,
.eemc-ubarc__card .eemc-ubarc__card-title {
  display: block;
  visibility: visible;
  opacity: 1;
  color: var(--eemc-color-text);
  font-size: clamp(1.98rem, 1.584rem + 0.8vw, 2.52rem);  /* 22-28px */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--eemc-letter-tight);
  margin: 0 0 4px 0;
  padding: 0;
  text-transform: none;
  text-decoration: none;
}

.eemc-ubarc__card--layout-b .eemc-ubarc__card-header {
  margin-bottom: var(--eemc-space-3);
  padding-bottom: var(--eemc-space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ----- Spec rows: horizontal table-row style ----- */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-specs {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-template-columns: none;
  margin: 0 0 var(--eemc-space-4);
  padding: 0;
  list-style: none;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--eemc-space-3);
  padding: var(--eemc-space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  border-radius: 0;
  font-size: 1.728rem;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec:last-child {
  border-bottom: none;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 198, 3, 0.1);
  border: 1px solid rgba(255, 198, 3, 0.18);
  color: var(--eemc-color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon svg {
  width: 18px;
  height: 18px;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-text {
  display: contents;             /* let the label and value participate in the parent grid */
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-label {
  font-size: 1.512rem;
  color: var(--eemc-color-text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--eemc-font-weight-medium);
  white-space: nowrap;
  text-align: left;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-value {
  font-size: 1.728rem;
  color: var(--eemc-color-text);
  font-weight: var(--eemc-font-weight-bold);
  font-feature-settings: "tnum";
  white-space: nowrap;
  text-align: right;
  letter-spacing: 0;
}

/* Bigger type across the board — bumped up another level */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-tagline {
  font-size: 1.44rem;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-price {
  font-size: clamp(2.55rem, 1.92rem + 1.8vw, 3.3rem);   /* 34-44px */
}
.eemc-ubarc__card-finance-from {
  font-size: 1.35rem;
}
.eemc-ubarc__card-finance-amount {
  font-size: 1.5rem;
}
.eemc-ubarc__card-finance-period {
  font-size: 1.2rem;
}
.eemc-ubarc__card-perk {
  font-size: 1.62rem;
}
.eemc-ubarc__card-action,
.eemc-ubarc__card-cta--filled {
  font-size: 1.53rem;
  padding: var(--eemc-space-3) var(--eemc-space-5);
}

/* Container-query adjustments for the new horizontal spec rows */
@container eemc-ubarc-card (max-width: 360px) {
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec {
    grid-template-columns: auto 1fr auto;
    gap: var(--eemc-space-2);
    padding: var(--eemc-space-2) 0;
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon {
    width: 28px;
    height: 28px;
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon svg {
    width: 16px;
    height: 16px;
  }
}
@container eemc-ubarc-card (max-width: 280px) {
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-label {
    display: none;            /* on very narrow cards, drop the label and rely on the icon */
  }
}

/* ============================================================
 * Round 11 — fix title/price clipping + tighten card bottom
 * ============================================================ */

/* Card-body fix: drop the conflicting `height: 100%` so the body
 * stacks normally below the figure in the flex column. The earlier
 * height: 100% was making the body claim the full card height,
 * which under some sizing edge-cases overlapped the figure and
 * clipped the title/price at the top. flex: 1 1 auto alone is
 * enough to grow the body into remaining card height. */
.eemc-ubarc__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  position: relative;
  z-index: 1;
}

/* Belt-and-braces: the link/card chain explicitly stacks the figure
 * THEN the body, with body's content guaranteed visible. */
.eemc-ubarc__card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  position: relative;
}
.eemc-ubarc__card-media {
  flex: 0 0 auto;
  position: relative;
}

/* Drop the auto-margin gap before the CTA — button now hugs the
 * perks list. Cards in the same grid row still match heights via
 * grid stretch + card height:100%; any leftover space lives at the
 * bottom of the card (after the button) rather than as an awkward
 * gap above it. */
.eemc-ubarc__card-action,
.eemc-ubarc__card-cta--filled {
  margin-top: var(--eemc-space-3);
}

/* Tighten the card body bottom so the button doesn't float on a sea
 * of padding inside short-content cards. */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-body {
  padding: var(--eemc-space-5) var(--eemc-space-5) var(--eemc-space-4);
}

/* ============================================================
 * Round 12 — forced same-row equal heights
 * ============================================================ */

/* Explicit align-items: stretch on the grid (default but bullet-proofing) */
.eemc-ubarc__grid {
  align-items: stretch;
  align-content: start;          /* rows hug content, not space-out */
}

/* Card explicitly stretches to the row's tallest item */
.eemc-ubarc__card {
  align-self: stretch;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* The link fills the card vertically so the body's flex-grow has
 * a real container to expand into. */
.eemc-ubarc__card-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* The body grows to fill any leftover vertical space inside the
 * link. With perks/cta sitting at content height, the extra height
 * goes to flex grow which empties out as bottom space — but card
 * heights now match across the row. */
.eemc-ubarc__card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ============================================================
 * Round 13 — pin CTA to card bottom (now that row heights match)
 * ============================================================
 * With same-row equal heights in place, anchoring the View Details /
 * Register Interest button to the card foot means every CTA in a row
 * lines up at the same y-position. Looks like a deliberate row of
 * buttons, not a jagged baseline.
 */
.eemc-ubarc__card-action,
.eemc-ubarc__card-cta--filled {
  margin-top: auto;
}

/* ============================================================
 * Round 14 — gap below perks + visual rhythm tightening
 * ============================================================ */

/* Guaranteed 16px minimum gap between the perks list and the CTA.
 * The auto-margin on the action still consumes leftover space, so
 * the gap grows on shorter cards — but never shrinks below 16px. */
.eemc-ubarc__card-perks {
  margin-bottom: 16px;
  border-top: none;          /* drop the hairline above the perks — feels heavy with the spec dividers above */
  padding-top: var(--eemc-space-2);
}

/* Slightly tighter spec rows so the body has more air around the price */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec {
  padding: 10px 0;
}

/* Reduce the price-row bottom divider weight so it doesn't compete
 * with the spec row dividers below */
.eemc-ubarc__card-price-row {
  padding: 0 0 var(--eemc-space-4);
  border-bottom-color: rgba(255, 255, 255, 0.04);
  margin-bottom: var(--eemc-space-3);
}

/* Tighter, less "boxed" feel — image meets body with smaller gap */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-body {
  padding-top: var(--eemc-space-4);
}

/* ============================================================
 * Round 15 — flow-oriented redesign: drop the boxes, let it breathe
 * ============================================================
 * No more rectangles-inside-rectangles. Sections separated by
 * whitespace and weight, not borders. Icons sit inline in gold,
 * not in tile boxes. Trust strip becomes a single bullet-separated
 * row. Larger radius on the card for a softer, luxury feel.
 */

/* Card frame: softer corners, subtle vertical gradient, generous body */
.eemc-ubarc__card {
  border-radius: 20px;
  background: linear-gradient(180deg, var(--eemc-color-bg-card) 0%, #060606 100%);
}
.eemc-ubarc__card-media {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-body {
  padding: var(--eemc-space-5) var(--eemc-space-5) var(--eemc-space-5);
  gap: var(--eemc-space-4);
}

/* ----- Header: no divider, just whitespace ----- */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-header {
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-tagline {
  margin: 4px 0 0;
}

/* ----- Price area: no divider line; weight + space do the work ----- */
.eemc-ubarc__card-price-row {
  padding: 0;
  margin: 0;
  border-bottom: none;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-finance {
  margin-top: 4px;
}

/* ----- Specs: inline gold icons, no tile boxes, no row dividers ----- */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-specs {
  display: flex;
  flex-direction: column;
  gap: var(--eemc-space-2);
  margin: 0;
  padding: 0;
  border: none;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--eemc-space-3);
  padding: 0;
  border: none;
  background: transparent;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon {
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--eemc-color-accent);
  border-radius: 0;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon svg {
  width: 22px;
  height: 22px;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-label {
  font-size: 1.62rem;
  color: var(--eemc-color-text-muted);
  font-weight: var(--eemc-font-weight-regular);
  letter-spacing: 0;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-value {
  font-size: 1.62rem;
  color: var(--eemc-color-text);
  font-weight: var(--eemc-font-weight-bold);
}

/* ----- Trust strip: single inline line with bullet separators ----- */
.eemc-ubarc__card-perks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 0;
  margin: 0;
  border-top: none;
  list-style: none;
  font-size: 1.404rem;
  color: var(--eemc-color-text-muted);
}
.eemc-ubarc__card-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.404rem;
}
/* Hide the check icon inside the chip; the inline bullet separator
 * carries the rhythm now. */
.eemc-ubarc__card-perk-icon {
  display: none;
}
/* Bullet separator between perks (rendered via ::before on every
 * perk except the first) */
.eemc-ubarc__card-perk + .eemc-ubarc__card-perk::before {
  content: '·';
  color: var(--eemc-color-accent);
  font-weight: var(--eemc-font-weight-bold);
  font-size: 1.9008em;
  line-height: 1;
}

/* ----- CTA: softer corners, subtle gold gradient ----- */
.eemc-ubarc__card-action,
.eemc-ubarc__card-cta--filled {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--eemc-color-accent) 0%, var(--eemc-color-accent-strong) 100%);
  padding: var(--eemc-space-3) var(--eemc-space-5);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--eemc-font-weight-bold);
  font-size: 1.44rem;
  margin-top: auto;
  box-shadow: 0 4px 16px rgba(255, 198, 3, 0.18);
}
.eemc-ubarc__card:hover .eemc-ubarc__card-action {
  background: linear-gradient(135deg, var(--eemc-color-accent-strong) 0%, var(--eemc-color-accent) 100%);
  box-shadow: 0 6px 24px rgba(255, 198, 3, 0.28);
}

/* ----- Condition pill (top-right of image): softer, smaller ----- */
.eemc-ubarc__card-condition {
  padding: 5px 10px;
  font-size: 1.008rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 198, 3, 0.18);
  border-radius: 999px;
  letter-spacing: 0.05em;
}

/* ----- Save badge: softer pill, less stamp feel ----- */
.eemc-ubarc__card-badge--save {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  text-transform: none;
  background: linear-gradient(135deg, #B8860B 0%, #FFC603 50%, #B8860B 100%);
}

/* Soften card hover — gentler lift and warmer halo (no harsh ring) */
.eemc-ubarc__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 198, 3, 0.18),
              0 0 40px rgba(255, 198, 3, 0.10);
  border-color: transparent;
}

/* Container-query: keep adjustments aligned with new layout */
@container eemc-ubarc-card (max-width: 360px) {
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-body {
    padding: var(--eemc-space-4);
    gap: var(--eemc-space-3);
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon {
    width: 18px;
    height: 18px;
  }
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
 * Round 16 — tonal off-black depth + animated trust strip
 * ============================================================ */

/* ----- Tonal background depth ----- */
/* Content panel gets a subtle vertical gradient — top slightly warmer
 * than bottom — so the dark surface has tonal range instead of reading
 * as one flat plane. Filter rail keeps pure black for contrast. */
.eemc-ubarc__content {
  background: linear-gradient(180deg, #0c0c0c 0%, #080808 100%);
}

/* Cards get a richer gradient with a warmer top edge */
.eemc-ubarc__card {
  background: linear-gradient(165deg, #0d0d0d 0%, #050505 60%, #040404 100%);
}

/* Coming-soon section background varies tonally from the in-stock grid */
.eemc-ubarc__coming-soon {
  background: linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
}

/* Subtle inset highlight at the top of cards (catches the eye like a
 * polished bevel on a luxury watch) */
.eemc-ubarc__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 198, 3, 0.18) 50%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
  border-radius: 20px 20px 0 0;
}
.eemc-ubarc__card {
  position: relative;
}

/* ----- Animated "every bike includes" trust strip ----- */
.eemc-ubarc__card-perks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  padding: var(--eemc-space-3) 0 0;
  margin: 0;
  border: none;
  list-style: none;
  position: relative;
  font-size: 1.404rem;
}

/* Each perk is a flowing inline item with a small icon */
.eemc-ubarc__card-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 1.404rem;
  color: var(--eemc-color-text-muted);
  position: relative;
  background: linear-gradient(
    90deg,
    var(--eemc-color-text-muted) 0%,
    var(--eemc-color-text-muted) 30%,
    var(--eemc-color-accent) 50%,
    var(--eemc-color-text-muted) 70%,
    var(--eemc-color-text-muted) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: eemc-ubarc-perks-sheen 7s ease-in-out infinite;
}

/* Stagger so the sheen passes each perk in sequence */
.eemc-ubarc__card-perk:nth-child(2) { animation-delay: 0.4s; }
.eemc-ubarc__card-perk:nth-child(3) { animation-delay: 0.8s; }
.eemc-ubarc__card-perk:nth-child(4) { animation-delay: 1.2s; }

/* Vertical gold separator between perks */
.eemc-ubarc__card-perk + .eemc-ubarc__card-perk::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255, 198, 3, 0.35);
}

/* Make sure first perk doesn't have left padding (no separator before it) */
.eemc-ubarc__card-perk:first-child {
  padding-left: 0;
}

/* Hide the check icon — the sheen animation IS the visual cue */
.eemc-ubarc__card-perk-icon {
  display: none;
}

@keyframes eemc-ubarc-perks-sheen {
  0% {
    background-position: 200% 0;
  }
  50% {
    background-position: -100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Hover: speed up the sheen on card-hover so it feels alive */
.eemc-ubarc__card:hover .eemc-ubarc__card-perk {
  animation-duration: 2.5s;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .eemc-ubarc__card-perk {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--eemc-color-text-muted);
    color: var(--eemc-color-text-muted);
  }
}

/* ============================================================
 * Round 17 — perks as compact horizontal chips, no animation
 * ============================================================ */

.eemc-ubarc__card-perks {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 0 0;
  border: none;
  list-style: none;
  /* Drop the previous gradient background + sheen animation */
  background: none;
  animation: none;
  font-size: 1.404rem;
  min-width: 0;
}

.eemc-ubarc__card-perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 198, 3, 0.06);
  border: 1px solid rgba(255, 198, 3, 0.18);
  color: var(--eemc-color-text);
  font-size: 1.296rem;
  font-weight: var(--eemc-font-weight-medium);
  white-space: nowrap;
  /* Cancel previous animation rules */
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--eemc-color-text);
  animation: none;
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}

/* Remove the vertical separator between perks (replaced by chip borders) */
.eemc-ubarc__card-perk + .eemc-ubarc__card-perk::before {
  display: none;
  content: none;
}

.eemc-ubarc__card-perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--eemc-color-accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.eemc-ubarc__card-perk-icon svg {
  width: 14px;
  height: 14px;
}

.eemc-ubarc__card-perk-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

/* Subtle hover wave: each chip lifts on card hover, staggered */
.eemc-ubarc__card:hover .eemc-ubarc__card-perk {
  background: rgba(255, 198, 3, 0.12);
  border-color: rgba(255, 198, 3, 0.32);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.eemc-ubarc__card:hover .eemc-ubarc__card-perk:nth-child(1) {
  transition-delay: 0ms;
}
.eemc-ubarc__card:hover .eemc-ubarc__card-perk:nth-child(2) {
  transition-delay: 60ms;
}
.eemc-ubarc__card:hover .eemc-ubarc__card-perk:nth-child(3) {
  transition-delay: 120ms;
}

/* Container-query: very narrow cards — chips collapse to icon-only */
@container eemc-ubarc-card (max-width: 320px) {
  .eemc-ubarc__card-perk {
    padding: 6px;
  }
  .eemc-ubarc__card-perk-label {
    display: none;
  }
  .eemc-ubarc__card-perks {
    justify-content: center;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eemc-ubarc__card:hover .eemc-ubarc__card-perk {
    transition: none;
    transition-delay: 0ms !important;
  }
}

/* ============================================================
 * Round 18 — perks as a single-line flowing inline strip
 * ============================================================
 * Drop the chip pills. Full labels back. One horizontal line of
 * icon+text items separated by gold dots. Compact typography so
 * three full labels physically fit.
 */
.eemc-ubarc__card-perks {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 0 0;
  border: none;
  list-style: none;
  font-size: 1.188rem;        /* 11px — compact so full labels fit */
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

.eemc-ubarc__card-perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--eemc-color-text-muted);
  font-size: 1.188rem;
  font-weight: var(--eemc-font-weight-medium);
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  /* Reset any animation/clip-path inherited from earlier rounds */
  -webkit-text-fill-color: var(--eemc-color-text-muted);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  animation: none;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gold dot separator between perks */
.eemc-ubarc__card-perk + .eemc-ubarc__card-perk::before {
  content: '•';
  position: static;
  display: inline-block;
  transform: none;
  width: auto;
  height: auto;
  margin-right: 10px;
  color: var(--eemc-color-accent);
  font-size: 1.728em;
  line-height: 1;
  background: none;
  flex-shrink: 0;
}

.eemc-ubarc__card-perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--eemc-color-accent);
}
.eemc-ubarc__card-perk-icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.eemc-ubarc__card-perk-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover: brighten the strip — no per-chip animation */
.eemc-ubarc__card:hover .eemc-ubarc__card-perks {
  color: var(--eemc-color-text);
}
.eemc-ubarc__card:hover .eemc-ubarc__card-perk {
  color: var(--eemc-color-text);
  transition: color 250ms ease;
}

/* Very narrow cards — collapse to icon-only via container query */
@container eemc-ubarc-card (max-width: 360px) {
  .eemc-ubarc__card-perks {
    justify-content: center;
    gap: 14px;
  }
  .eemc-ubarc__card-perk-label {
    display: none;
  }
  .eemc-ubarc__card-perk + .eemc-ubarc__card-perk::before {
    display: none;
  }
  .eemc-ubarc__card-perk-icon {
    width: 16px;
    height: 16px;
  }
  .eemc-ubarc__card-perk-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
 * Round 19 — FIX flex-direction column inheritance + 3-col badge grid
 * ============================================================
 * Earlier rounds set `flex-direction: column` on the perks list and
 * later rounds didn't reset it, so even with `display: flex` set
 * again, the items kept stacking vertically. Switch to an explicit
 * 3-column grid so each perk badge sits side-by-side. Icon on top,
 * label below — fits at every card width without ellipsizing.
 */
.eemc-ubarc__card-perks {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: column;
  flex-direction: row;          /* reset any inherited column */
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 0 var(--eemc-space-5);
  padding: var(--eemc-space-5) 0 0;
  border: none;
  list-style: none;
  align-items: start;
  width: 100%;
  font-size: 19.008px;
  /* Reset any sheen/gradient leftover from earlier rounds */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--eemc-color-text-muted);
  animation: none;
}

.eemc-ubarc__card-perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--eemc-color-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.08rem;          /* 10px label */
  font-weight: var(--eemc-font-weight-bold);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-text-fill-color: var(--eemc-color-text-muted);
  animation: none;
  min-width: 0;
}

/* Drop the bullet separator from earlier rounds — grid handles spacing */
.eemc-ubarc__card-perk + .eemc-ubarc__card-perk::before {
  content: none;
  display: none;
}

.eemc-ubarc__card-perk-icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--eemc-color-accent);
  flex-shrink: 0;
  background: rgba(255, 198, 3, 0.08);
  border: 1px solid rgba(255, 198, 3, 0.2);
  border-radius: 50%;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.eemc-ubarc__card-perk-icon svg {
  width: 14px;
  height: 14px;
}

.eemc-ubarc__card-perk-label {
  display: block;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--eemc-color-text-muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
}

.eemc-ubarc__card:hover .eemc-ubarc__card-perk-icon {
  background: rgba(255, 198, 3, 0.18);
  border-color: rgba(255, 198, 3, 0.4);
  transform: translateY(-1px);
}
.eemc-ubarc__card:hover .eemc-ubarc__card-perk:nth-child(2) .eemc-ubarc__card-perk-icon {
  transition-delay: 60ms;
}
.eemc-ubarc__card:hover .eemc-ubarc__card-perk:nth-child(3) .eemc-ubarc__card-perk-icon {
  transition-delay: 120ms;
}

/* Narrow cards keep the 3-up layout, just smaller */
@container eemc-ubarc-card (max-width: 360px) {
  .eemc-ubarc__card-perks {
    gap: 8px;
  }
  .eemc-ubarc__card-perk-icon {
    width: 32px;
    height: 32px;
    padding: 7px;
  }
  .eemc-ubarc__card-perk-label {
    font-size: 0.972rem;
    letter-spacing: 0.04em;
  }
}
@container eemc-ubarc-card (max-width: 280px) {
  .eemc-ubarc__card-perk-label {
    display: none;
  }
}

/* ============================================================
 * Round 29 — Even vertical distribution inside the card body.
 *
 * Until now the card body stacked everything at the top and used
 * margin-top:auto on the CTA to push the button to the bottom,
 * leaving a single big gap between the perks row and the button.
 * Switch to flex space-between so the title pins top, the View
 * details button pins bottom, and the price row / spec pills /
 * perks distribute evenly in the space between.
 * ============================================================ */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-action,
.eemc-ubarc__card--layout-b .eemc-ubarc__card-cta--filled {
  margin-top: 10px !important;
}
/* Drop the residual bottom margins on intermediate blocks — the
 * flex distribution now handles spacing for us. */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-header,
.eemc-ubarc__card--layout-b .eemc-ubarc__card-price-row,
.eemc-ubarc__card--layout-b .eemc-ubarc__card-specs,
.eemc-ubarc__card--layout-b .eemc-ubarc__card-perks {
  margin-bottom: 0 !important;
}

/* ============================================================
 * Round 30 — Cinch-style price + mileage select dropdowns.
 *
 * Replace the free-form number inputs with native <select> menus
 * showing bucketed values ("£500 / £1,000 / £1,500…" for price,
 * "Up to 1,000 / Up to 2,000…" for mileage). Each select sits in
 * a labelled column with the descriptor above and the dropdown
 * below — same hierarchy as Cinch's filter rail.
 * ============================================================ */
.eemc-ubarc__range--select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0;
}
.eemc-ubarc__select-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.eemc-ubarc__select-field--full {
  grid-column: 1 / -1;
}
.eemc-ubarc__select-label {
  font-size: 0.8125rem;
  font-weight: var(--eemc-font-weight-medium);
  color: var(--eemc-color-text-muted);
  letter-spacing: 0;
}
.eemc-ubarc__select-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 10px 36px 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.04);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'><path fill='none' stroke='%23FFC603' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--eemc-color-text);
  font-size: 0.9375rem;
  font-weight: var(--eemc-font-weight-medium);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.eemc-ubarc__select-field select:hover,
.eemc-ubarc__select-field select:focus {
  border-color: var(--eemc-color-accent);
  outline: none;
}
.eemc-ubarc__select-field select option {
  background: #0b0b0b;
  color: var(--eemc-color-text);
}

/* ============================================================
 * Round 28 — Pagination text shrink.
 *
 * Pagination buttons inherited the body font-size, which after
 * the two global +20% rounds read oversized for an unobtrusive
 * footer nav. Pin to an explicit small size (about half their
 * inherited size) so "1 / 2 / Next" reads as a quiet secondary
 * control rather than a primary action.
 * ============================================================ */
.eemc-ubarc__pagination a,
.eemc-ubarc__pagination span {
  font-size: 0.9375rem !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  font-weight: var(--eemc-font-weight-medium) !important;
  letter-spacing: 0 !important;
}
.eemc-ubarc__pagination .prev,
.eemc-ubarc__pagination .next {
  padding: 0 15px !important;
}

/* ============================================================
 * Round 27 — Kill every perk hover effect.
 *
 * The perks row (Nationwide delivery / Inspected & prepared /
 * Finance available) should be visually static: no halo tint,
 * no border brightening, no lift, no colour shift on the labels
 * or icons when any card is hovered. Earlier rounds layered
 * several different hover treatments; this overrides them all.
 * ============================================================ */
.eemc-ubarc__card:hover .eemc-ubarc__card-perks,
.eemc-ubarc__card:hover .eemc-ubarc__card-perk,
.eemc-ubarc__card:hover .eemc-ubarc__card-perk-label {
  background: transparent !important;
  border: none !important;
  color: var(--eemc-color-text-muted) !important;
  -webkit-text-fill-color: var(--eemc-color-text-muted) !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.eemc-ubarc__card:hover .eemc-ubarc__card-perk-icon,
.eemc-ubarc__card:hover .eemc-ubarc__card-perk:nth-child(1) .eemc-ubarc__card-perk-icon,
.eemc-ubarc__card:hover .eemc-ubarc__card-perk:nth-child(2) .eemc-ubarc__card-perk-icon,
.eemc-ubarc__card:hover .eemc-ubarc__card-perk:nth-child(3) .eemc-ubarc__card-perk-icon {
  background: rgba(255, 198, 3, 0.08) !important;
  border: 1px solid rgba(255, 198, 3, 0.2) !important;
  color: var(--eemc-color-accent) !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ============================================================
 * Round 26 — Coming-soon badge placement.
 *
 * An earlier round positioned the coming-soon badge top-right,
 * where it collided with the year condition pill. Move it back
 * to the top-left where the in-stock "Save £X" badge sits, so
 * the year stays alone on the right and the two never overlap.
 * ============================================================ */
.eemc-ubarc__card--coming-soon .eemc-ubarc__card-badge--coming-soon {
  top: var(--eemc-space-3) !important;
  left: var(--eemc-space-3) !important;
  right: auto !important;
}

/* ============================================================
 * Round 25 — Content panel breathing room.
 *
 * The H1 / lede / Coming-soon block were sitting flush against
 * the left edge of the dark content panel. Add an inner horizontal
 * padding so headings line up visually with the cards below
 * (which already sit inside the grid's own padding). Also widen
 * the intro/coming-soon descriptor to span the full reading
 * column rather than capping at 720px — more breathing room for
 * longer SEO copy.
 * ============================================================ */
.eemc-ubarc__content {
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem) !important;
  padding-right: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}
.eemc-ubarc__intro,
.eemc-ubarc__coming-soon {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.eemc-ubarc__intro-copy,
.eemc-ubarc__coming-soon-intro {
  max-width: min(960px, 100%) !important;
  font-size: 1.53rem !important;
  line-height: 1.65 !important;
}

/* ============================================================
 * Round 24 — Refined hero copy + coming-soon section.
 *
 * Intro H1 and lede paragraph get the Cinch-style hierarchy:
 * a large editorial display heading sitting tight against a
 * single muted descriptor paragraph below. The coming-soon
 * section mirrors that exact treatment so the page reads as
 * two coordinated sections rather than one big block.
 * ============================================================ */
.eemc-ubarc__intro,
.eemc-ubarc__coming-soon {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem) !important;
  background: none !important;
  border: none !important;
  margin: 0 !important;
}
.eemc-ubarc__coming-soon {
  padding-top: clamp(3rem, 6vw, 5rem) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: clamp(3rem, 5vw, 4rem) !important;
}
.eemc-ubarc__coming-soon::before {
  display: none !important;
  content: none !important;
}
.eemc-ubarc__h1,
.eemc-ubarc__coming-soon-heading {
  font-size: clamp(2.52rem, 3vw, 3.6rem) !important;
  font-weight: var(--eemc-font-weight-bold) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--eemc-color-text) !important;
  margin: 0 0 var(--eemc-space-3) !important;
  text-transform: none !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--eemc-color-text) !important;
  animation: none !important;
}
.eemc-ubarc__intro-copy,
.eemc-ubarc__coming-soon-intro {
  font-size: 1.44rem !important;
  line-height: 1.6 !important;
  color: var(--eemc-color-text-muted) !important;
  max-width: 720px;
  margin: 0 0 var(--eemc-space-4) !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: var(--eemc-font-weight-regular) !important;
}
.eemc-ubarc__intro-copy p,
.eemc-ubarc__coming-soon-intro p {
  margin: 0 0 var(--eemc-space-3);
}
.eemc-ubarc__intro-copy p:last-child,
.eemc-ubarc__coming-soon-intro p:last-child {
  margin-bottom: 0;
}

/* ============================================================
 * Round 23 — Cinch-style filter accordion sidebar.
 *
 * Each filter section is a native <details> element with an
 * icon + label + chevron summary row. Thin hairline dividers
 * separate them. Open state animates a 90° chevron rotation
 * and reveals checkbox/radio/range options indented below.
 * ============================================================ */
.eemc-ubarc__filter-acc {
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
  padding: 0;
  background: none;
}
.eemc-ubarc__filter-acc:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.eemc-ubarc__filter-acc > summary {
  list-style: none;
}
.eemc-ubarc__filter-acc > summary::-webkit-details-marker {
  display: none;
}
.eemc-ubarc__filter-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  cursor: pointer;
  color: var(--eemc-color-text);
  font-size: 1.35rem;
  font-weight: var(--eemc-font-weight-bold);
  letter-spacing: 0.01em;
  user-select: none;
  transition: color 200ms ease;
}
.eemc-ubarc__filter-summary:hover {
  color: var(--eemc-color-accent);
}
.eemc-ubarc__filter-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--eemc-color-accent);
  flex-shrink: 0;
}
.eemc-ubarc__filter-summary-icon svg {
  width: 20px;
  height: 20px;
}
.eemc-ubarc__filter-summary-label {
  flex: 1 1 auto;
  min-width: 0;
}
.eemc-ubarc__filter-summary-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
  margin-right: 4px;
  opacity: 0.7;
}
.eemc-ubarc__filter-acc[open] > .eemc-ubarc__filter-summary .eemc-ubarc__filter-summary-chevron {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.eemc-ubarc__filter-acc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 4px 16px 34px;
  animation: eemc-ubarc-acc-in 200ms ease;
}
.eemc-ubarc__filter-acc-body label {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 1.26rem;
  color: var(--eemc-color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eemc-ubarc__filter-acc-body .eemc-ubarc__range {
  display: flex;
  gap: 8px;
  padding: 0;
}
.eemc-ubarc__filter-acc-body .eemc-ubarc__range label {
  flex: 1 1 0;
  min-width: 0;
}
.eemc-ubarc__filter-acc-body .eemc-ubarc__range input[type="number"] {
  width: 100%;
}
@keyframes eemc-ubarc-acc-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Refresh the filters-title to match the heavier accordion type */
.eemc-ubarc__filters-title {
  font-size: 1.8rem !important;
  font-weight: var(--eemc-font-weight-bold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--eemc-color-text) !important;
  margin: 0 0 12px !important;
}

/* The search bar and Clear-all link sit above the accordion stack */
.eemc-ubarc__filter-search-label {
  display: block;
  margin: 0 0 12px;
}
.eemc-ubarc__filter-search-label input[type="search"] {
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--eemc-color-text);
  font-size: 1.26rem;
}
.eemc-ubarc__clear {
  display: inline-block;
  margin: 0 0 12px;
  font-size: 1.17rem;
  color: var(--eemc-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.eemc-ubarc__apply {
  margin-top: 16px;
  font-size: 1.1rem !important;
  padding: 12px 20px !important;
  min-height: 44px !important;
  width: auto !important;
  align-self: flex-start;
}

/* ============================================================
 * Round 22 — Cinch-style price row labels.
 * Small uppercase muted label sits above each price block; the
 * value below carries the weight. Matches the "Our price"/"HP
 * Finance" treatment in the reference designs.
 * ============================================================ */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-price-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: var(--eemc-space-4) !important;
  margin: 0 0 var(--eemc-space-4) !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.eemc-ubarc__card-price-col,
.eemc-ubarc__card-finance-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eemc-ubarc__card-finance-col {
  text-align: right;
  align-items: flex-end;
}
.eemc-ubarc__card-price-label,
.eemc-ubarc__card-finance-label {
  display: block;
  font-size: 0.9rem;
  font-weight: var(--eemc-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eemc-color-text-muted);
  line-height: 1;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-finance-label {
  font-size: 1rem !important;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-finance {
  display: inline-flex !important;
  align-items: baseline;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  color: var(--eemc-color-accent) !important;
  -webkit-text-fill-color: var(--eemc-color-accent) !important;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-finance-amount {
  font-size: 1.5rem !important;
  font-weight: var(--eemc-font-weight-bold);
  color: var(--eemc-color-accent);
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-finance-period {
  font-size: 1.1rem !important;
  font-weight: var(--eemc-font-weight-medium);
  color: var(--eemc-color-accent);
  opacity: 0.85;
}

/* ============================================================
 * Round 21 — Cinch-style spec pills.
 *
 * Replace the 2x2 icon-grid spec block with a single horizontal row
 * of soft pill chips ("5,384 mi", "2023", "A2", "~70 mi"). Hide the
 * inline SVG icon and the descriptor label so each pill is just the
 * value text — clean, scannable, no gold treatment competing with
 * the perk halos below.
 *
 * Uses !important to defeat the many earlier `.card--layout-b
 * .card-spec*` rules without rewriting them all in place.
 * ============================================================ */
.eemc-ubarc__card--layout-b .eemc-ubarc__card-specs {
  display: flex !important;
  flex-direction: row !important;          /* defeat the column flex from earlier rounds */
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 0 var(--eemc-space-4) !important;
  border: none !important;
  background: none !important;
  list-style: none !important;
  width: auto !important;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 5px 11px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 999px !important;
  color: var(--eemc-color-text) !important;
  font-size: 1.404rem !important;
  font-weight: var(--eemc-font-weight-medium) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: var(--eemc-color-text) !important;
  animation: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  text-align: center !important;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-icon,
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-label {
  display: none !important;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-text {
  display: inline !important;
  flex-direction: row !important;
  gap: 0 !important;
}
.eemc-ubarc__card--layout-b .eemc-ubarc__card-spec-value {
  display: inline !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  -webkit-text-fill-color: var(--eemc-color-text) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
}

@container eemc-ubarc-card (max-width: 360px) {
  .eemc-ubarc__card--layout-b .eemc-ubarc__card-spec {
    padding: 4px 9px !important;
    font-size: 1.296rem !important;
  }
}

/* ============================================================
 * Round 20 — strip the rectangle behind each perk chip.
 * Earlier rounds painted a faint gold-tinted box + border on the
 * perk container (both at rest and on hover). The icon circle is
 * the only element that should carry the gold treatment now.
 * ============================================================ */
.eemc-ubarc__card-perk,
.eemc-ubarc__card:hover .eemc-ubarc__card-perk {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ============================================================
 * Round 31 — Mobile filter button & drawer z-index fix.
 *
 * Two related issues caught on mobile:
 *
 *  1. The .filter-trigger button uses `font: inherit`, which means
 *     it inherits the body font-size — and after the two global
 *     typography scaling passes (+20% each, cumulative 1.44x) that
 *     value is bigger than a regular control should be. Pin to
 *     1.1rem with tighter padding so the chip-shaped button reads
 *     at the size a control should.
 *
 *  2. The .toolbar has z-index: 999 so it stays above scrolling
 *     content as a sticky header. The .filter-trigger button lives
 *     INSIDE the toolbar, so when the drawer (.filters) slides in at
 *     z-index: 20, the toolbar — and the trigger button — sit on
 *     top of the drawer. Bump the drawer above the toolbar.
 * ============================================================ */

@media (max-width: 1023px) {
	.eemc-ubarc__filter-trigger {
		font-size: 1.1rem !important;
		padding: 8px 14px !important;
		min-height: 40px !important;
		line-height: 1.2 !important;
	}
	.eemc-ubarc__filter-trigger .eemc-ubarc__filter-count {
		font-size: 0.9rem !important;
	}
}

/* Drawer needs to sit above the sticky toolbar (z-index: 999). */
.eemc-ubarc__filters {
	z-index: 1100 !important;
}

/* ============================================================
 * Round 32 — "Extendable warranty available" pill on the card image.
 *
 * Universal brand-level perk that overlays the card photo. Centered
 * horizontally, sitting in the lower-middle band of the image so it
 * doesn't completely obscure the bike. Gold-accented pill on a
 * blurred dark backdrop so it reads cleanly over any background.
 * ============================================================ */
.eemc-ubarc__card-media {
	/* Ensure the figure forms a positioning context for the overlay. */
	position: relative;
}
.eemc-ubarc__card-warranty {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	max-width: calc(100% - 24px);
	padding: 8px 16px;
	font-size: 1.2rem;
	font-weight: var(--eemc-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eemc-color-accent);
	background: rgba(0, 0, 0, 0.72);
	border: 1px solid rgba(255, 198, 3, 0.45);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 3;
	pointer-events: none;
}

/* Narrow cards: shrink slightly so the pill still fits the image. */
@container eemc-ubarc-card (max-width: 320px) {
	.eemc-ubarc__card-warranty {
		font-size: 1.05rem;
		padding: 6px 12px;
		bottom: 10px;
		letter-spacing: 0.03em;
	}
}

/* ============================================================
 * Round 33 — In-grid CTA card.
 *
 * Replaces a single grid slot with a brand-perks image tile. The
 * card has no body content — the picture fills the slot, matching
 * the height of sibling bike cards via `align-self: stretch` (the
 * grid's default). object-fit:cover keeps the image clipped to the
 * card silhouette regardless of column count.
 * ============================================================ */
.eemc-ubarc__card--cta {
	overflow: hidden;
	background: var(--eemc-color-surface-2, #0f0f10);
	border-radius: var(--eemc-radius-card, 12px);
	display: flex;
	flex-direction: column;
	/* Dashed brand-gold outline reads as "feature/info tile" rather than
	 * a purchasable card, while keeping the card silhouette identical
	 * to its siblings so the grid rhythm holds. */
	border: 1px dashed rgba(255, 198, 3, 0.55);
	cursor: default;
	/* Slightly desaturated so it doesn't out-shout adjacent bike cards. */
	filter: saturate(0.92);
}
/* Disable the standard card hover lift/zoom — this tile isn't clickable. */
.eemc-ubarc__card--cta:hover {
	transform: none;
	box-shadow: none;
}
.eemc-ubarc__card--cta:hover .eemc-ubarc__card-cta-img {
	transform: none;
}
.eemc-ubarc__card-cta-media {
	position: relative;
	flex: 1 1 auto;
	min-height: 100%;
	display: block;
}
.eemc-ubarc__card-cta-media picture,
.eemc-ubarc__card-cta-media img {
	display: block;
	width: 100%;
	height: 100%;
}
.eemc-ubarc__card-cta-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: none;
}

/* "Why EEMC" / info overlay badge — top-left, matches the visual
 * weight of the USED · YYYY year badge on bike cards so the grid feels
 * consistent, but the wording + info-circle glyph make it unmistakably
 * non-purchasable. */
.eemc-ubarc__card-cta-label {
	position: absolute;
	top: var(--eemc-space-3, 12px);
	left: var(--eemc-space-3, 12px);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.78);
	color: var(--eemc-color-accent, #ffc603);
	border: 1px solid rgba(255, 198, 3, 0.55);
	border-radius: var(--eemc-radius-pill, 999px);
	font-size: 0.72rem;
	font-weight: var(--eemc-font-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	z-index: 3;
	pointer-events: none;
}
.eemc-ubarc__card-cta-label-icon {
	flex: 0 0 auto;
}
.eemc-ubarc__card-cta-label-text {
	line-height: 1;
}

@container eemc-ubarc-card (max-width: 360px) {
	.eemc-ubarc__card-cta-label {
		font-size: 0.62rem;
		padding: 4px 8px;
		letter-spacing: 0.06em;
	}
}