/* ═══════════════════════════════════════════════════
   BIKELEY MARKETPLACE v5 – Complete Redesign
   Append after the base marketplace.css content
   ═══════════════════════════════════════════════════ */

/* ── Hide all old layout elements ── */
.market-head{ display:none !important; }
.market-type-row{ display:none !important; }
.market-toolbar-bar{ display:none !important; }
.market-compare-toggle{ display:none !important; }

/* ════════════════════════════════
   LANDING PAGE (marketplace_home)
   ════════════════════════════════ */

.mkt-landing{ width:min(1400px, calc(100vw - 32px)); margin:0 auto; padding-bottom:64px; }

/* Hero */
.mkt-hero{
  position:relative;
  min-height:380px;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:48px;
  background:var(--hero-bg) center/cover no-repeat;
}
.mkt-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
}
.mkt-hero__content{
  position:relative; z-index:1;
  padding:64px 48px;
  max-width:560px;
}
.mkt-hero__title{
  margin:0 0 12px;
  font-size:40px; font-weight:600; letter-spacing:-0.03em;
  color:#fff; line-height:1.1;
}
.mkt-hero__lead{
  margin:0 0 24px;
  font-size:16px; line-height:1.55; color:rgba(255,255,255,0.85);
}
.mkt-hero__cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 24px; border-radius:8px;
  background:#fff; color:#1a1a1a;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:background 0.15s ease;
}
.mkt-hero__cta:hover{ background:#f5f5f5; }

/* Sections */
.mkt-section{ margin-bottom:48px; }
.mkt-section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:20px;
}
.mkt-section__head h2{
  margin:0; font-size:22px; font-weight:600; letter-spacing:-0.02em; color:#1a1a1a;
}
.mkt-section__head p{ margin:4px 0 0; font-size:14px; color:#6b7280; }
.mkt-section__link{
  font-size:14px; font-weight:600; color:#1a1a1a; text-decoration:none; white-space:nowrap;
}
.mkt-section__link:hover{ text-decoration:underline; }

/* Category grid */
.mkt-cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
.mkt-cat-tile{
  display:flex; flex-direction:column; gap:4px;
  padding:20px; border:1px solid rgba(0,0,0,0.08); border-radius:10px;
  text-decoration:none; color:#1a1a1a; background:#fff;
  transition:border-color 0.15s ease, box-shadow 0.2s ease;
  position:relative;
}
.mkt-cat-tile:hover{
  border-color:rgba(0,0,0,0.18);
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
.mkt-cat-tile__label{ font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.mkt-cat-tile__desc{ font-size:13px; color:#6b7280; }
.mkt-cat-tile__count{ font-size:12px; color:#9ca3af; margin-top:4px; }
.mkt-cat-tile__arrow{
  position:absolute; top:20px; right:20px; font-size:16px; color:#d1d5db;
  transition:color 0.15s ease;
}
.mkt-cat-tile:hover .mkt-cat-tile__arrow{ color:#1a1a1a; }

/* Featured bikes grid (on landing) */
.mkt-featured-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px;
}

/* Info bar */
.mkt-info-bar{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(0,0,0,0.04); border-radius:10px; overflow:hidden;
  margin-top:48px;
}
.mkt-info-item{
  display:flex; flex-direction:column; gap:4px;
  padding:24px; background:#fff; text-align:center;
}
.mkt-info-item strong{ font-size:15px; font-weight:600; color:#1a1a1a; }
.mkt-info-item span{ font-size:13px; color:#6b7280; }

@media(max-width:900px){
  .mkt-hero__content{ padding:40px 28px; }
  .mkt-hero__title{ font-size:30px; }
  .mkt-featured-grid{ grid-template-columns:repeat(2, 1fr); }
  .mkt-cat-grid{ grid-template-columns:repeat(2, 1fr); }
  .mkt-info-bar{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .mkt-hero{ min-height:280px; border-radius:0; margin-left:-16px; margin-right:-16px; width:auto; }
  .mkt-hero__content{ padding:32px 20px; }
  .mkt-hero__title{ font-size:26px; }
  .mkt-featured-grid{ grid-template-columns:1fr; }
  .mkt-cat-grid{ grid-template-columns:1fr; }
}


/* ════════════════════════════════
   SEARCH RESULTS PAGE
   ════════════════════════════════ */

/* Breadcrumb – with back arrow like BikeExchange */
.mkt-breadcrumb{
  display:flex; align-items:center; gap:8px;
  padding:20px 0 0; font-size:13px; color:#9ca3af;
  overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.mkt-breadcrumb::-webkit-scrollbar{ display:none; }
.mkt-breadcrumb a{ color:#6b7280; text-decoration:none; font-weight:500; white-space:nowrap; flex-shrink:0; }
.mkt-breadcrumb a:hover{ color:#1a1a1a; text-decoration:underline; }
.mkt-breadcrumb span[aria-hidden]{ color:#d1d5db; font-size:11px; flex-shrink:0; }
.mkt-breadcrumb__back{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(0,0,0,.08); background:#fff;
  color:#6b7280; text-decoration:none; flex-shrink:0;
  margin-right:6px;
  transition:border-color .15s ease, color .15s ease;
}
.mkt-breadcrumb__back:hover{ border-color:rgba(0,0,0,.2); color:#1a1a1a; }

/* Page head – larger title like BikeExchange */
.mkt-page-head{ padding:24px 0 0; margin-bottom:0; }
.mkt-page-head h1{
  margin:0 0 8px; font-size:36px; font-weight:350;
  letter-spacing:-0.03em; color:#1a1a1a; line-height:1.15;
}
.mkt-page-head h1 span{
  font-weight:600;
}
.mkt-page-head p{
  margin:0; font-size:15px; color:#6b7280; max-width:62ch; line-height:1.55;
}

/* Search context: "Ergebnisse für X" with clear button */
.mkt-search-context{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.mkt-search-context h1{
  font-size:28px; font-weight:300;
}
.mkt-search-context h1 span{
  font-weight:600; color:#1a1a1a;
}
.mkt-search-clear{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; margin-top:4px;
  border:1px solid rgba(0,0,0,.1); border-radius:8px;
  color:#6b7280 !important; text-decoration:none; font-size:13px; font-weight:600;
  white-space:nowrap; flex-shrink:0;
  transition:all .15s ease;
}
.mkt-search-clear:hover{
  border-color:rgba(0,0,0,.2); color:#1a1a1a !important; background:#f9f9f9;
}
.mkt-search-clear svg{ flex-shrink:0; }

/* Filter badge count */
.mkt-toolbar__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#1a1a1a; color:#fff;
  font-size:11px; font-weight:700; line-height:1;
}

@media(max-width:768px){
  .mkt-search-context{ flex-direction:column; gap:8px; }
  .mkt-search-context h1{ font-size:22px; }
  .mkt-page-head h1{ font-size:24px; }
}

/* Type bar – BikeExchange-style underlined tabs */
.mkt-type-bar{
  display:flex; gap:0; overflow-x:auto; overflow-y:hidden; padding:20px 0 0;
  scrollbar-width:none; -ms-overflow-style:none;
  border-bottom:1px solid rgba(0,0,0,0.08);
  -webkit-overflow-scrolling:touch;
  flex-wrap:nowrap;
}
.mkt-type-bar::-webkit-scrollbar{ display:none; }

.mkt-type{
  display:flex; align-items:center; justify-content:center;
  padding:12px 24px;
  background:transparent; text-decoration:none; color:#6b7280;
  font-size:15px; font-weight:500; white-space:nowrap;
  border:none; border-bottom:2px solid transparent;
  transition:color 0.15s ease, border-color 0.15s ease;
  margin-bottom:-1px;
}
.mkt-type:hover{ color:#1a1a1a; }
.mkt-type.is-active{
  color:#1a1a1a; font-weight:600;
  border-bottom-color:#1a1a1a;
}

/* ═══ TOOLBAR – BikeExchange style ═══ */
.mkt-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  margin-bottom:24px;
}
.mkt-toolbar__filter{
  appearance:none; display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border:1px solid rgba(0,0,0,0.12); border-radius:8px;
  background:#fff; font:inherit; font-size:14px; font-weight:600;
  color:#1a1a1a; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mkt-toolbar__filter:hover{
  border-color:rgba(0,0,0,0.25); background:#fafafa;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.mkt-toolbar__filter svg{ color:#6b7280; flex-shrink:0; }
.mkt-toolbar__right{
  display:flex; align-items:center; gap:14px; flex-shrink:0;
}
.mkt-toolbar__count{ font-size:14px; color:#6b7280; white-space:nowrap; }
.mkt-toolbar__sort-label{
  font-size:14px; font-weight:600; color:#1a1a1a; white-space:nowrap;
}
.mkt-toolbar__sort{
  appearance:none; -webkit-appearance:none; border:none; background:transparent;
  font:inherit; font-size:14px; font-weight:700; color:#1a1a1a;
  cursor:pointer; padding:2px 4px;
  border-bottom:1px dashed rgba(0,0,0,.2);
  transition:border-color .15s ease;
}
.mkt-toolbar__sort:hover{ border-color:rgba(0,0,0,.5); }
.mkt-toolbar__sort:focus{ outline:none; }



/* ════════════════════════════════
   PRODUCT CARDS (Bikeley style)
   ════════════════════════════════ */

/* Grid */
.market-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px 16px;
}
@media(max-width:1440px){ .market-grid{ grid-template-columns:repeat(3, 1fr); } }
@media(max-width:1000px){ .market-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:640px){ .market-grid{ grid-template-columns:1fr; } }

.mkt-card{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid rgba(0,0,0,0.07);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  transition:all 0.3s cubic-bezier(.22,1,.36,1);
}
.mkt-card:hover{
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 16px 44px rgba(0,0,0,.10);
  transform:translateY(-6px);
}
.mkt-card__link{ position:absolute; inset:0; z-index:1; }

/* Media area — matches homepage bike card */
.mkt-card__media{
  position:relative;
  aspect-ratio:4/3;
  background:#f5f5f5;
  overflow:hidden;
}
.mkt-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.mkt-card:hover .mkt-card__media img{ transform:scale(1.05); }

/* Badges - glassmorphism */
.mkt-card__badges{
  position:absolute; top:10px; left:10px; z-index:3;
  display:flex; gap:6px;
}
.mkt-badge{
  display:inline-flex; align-items:center;
  padding:5px 10px;
  border-radius:8px; font-size:11px; font-weight:700;
  border:none; line-height:1;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.mkt-badge--sale{ background:rgba(185,28,28,.88); color:#fff; }
.mkt-badge--year{ background:rgba(255,255,255,.88); color:#374151; border:1px solid rgba(0,0,0,.06); }

/* Heart (Favorit) */
.mkt-card__heart{
  appearance:none; position:absolute; top:10px; right:10px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.88);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  transition:all 0.15s ease;
}
.mkt-card__heart:hover{ background:#fff; color:#e11d48; transform:scale(1.1); }
.mkt-card__heart svg{ width:16px; height:16px; color:#9ca3af; transition:color 0.12s ease; }
.mkt-card__heart:hover svg{ color:#e11d48; }

/* Size overlay - slides up on hover */
.mkt-card__sizes-overlay{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  display:flex; gap:6px; padding:10px 12px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid rgba(0,0,0,.06);
  opacity:0; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.mkt-card:hover .mkt-card__sizes-overlay{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.mkt-card__size-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:28px; padding:0 8px;
  border:1px solid rgba(0,0,0,.12); border-radius:6px;
  font-size:12px; font-weight:700; color:#1a1a1a; background:#fff;
}

/* Card body — matches homepage bike card */
.mkt-card__body{
  padding:16px 18px 18px;
  display:flex; flex-direction:column; gap:2px;
  flex:1;
}

/* Meta row: color dots + brand */
.mkt-card__meta-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.mkt-card__color-dots{
  display:flex; gap:4px; align-items:center;
}
.mkt-card__dot{
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid rgba(0,0,0,.1); flex-shrink:0;
}

.mkt-card__brand{
  font-size:14px; font-weight:850;
  text-transform:none; letter-spacing:-.01em;
  color:#1a1a1a;
  margin-left:auto;
}

.mkt-card__size{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:4px;
  height:26px; padding:0 10px;
  border:1px solid rgba(0,0,0,0.08); border-radius:4px;
  font-size:12px; font-weight:600; color:#374151;
  width:fit-content;
}

.mkt-card__type{
  font-size:11px; font-weight:600;
  color:#9ca3af; letter-spacing:0.04em;
  text-transform:uppercase;
  margin-top:6px;
}

.mkt-card__title{
  margin:2px 0 6px; font-size:15px; font-weight:700;
  line-height:1.3; letter-spacing:-0.01em; color:#1a1a1a;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.mkt-card__specs{
  font-size:12px; color:#9ca3af; margin-top:2px; margin-bottom:12px; line-height:1.4;
}

/* Price */
.mkt-card__price{
  display:flex; align-items:baseline; gap:8px;
  margin-top:auto;
}
.mkt-card__price strong{
  font-size:19px; font-weight:800; color:#1a1a1a; letter-spacing:-.02em;
}
.mkt-card__price strong.is-sale{ color:#b42318; }
.mkt-card__price span{
  font-size:13px; color:#9ca3af;
  text-decoration:line-through; font-weight:500;
}

/* Footer: dealer + compare */
.mkt-card__footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-top:auto; padding-top:10px;
  border-top:1px solid rgba(0,0,0,0.04);
}
.mkt-card__dealer{
  font-size:12px; font-weight:500; color:#6b7280;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Compare button (separate from heart/favorit) */
.mkt-card__compare{
  appearance:none; position:relative; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border:1px solid rgba(0,0,0,0.08);
  border-radius:4px; background:#fff;
  font:inherit; font-size:11px; font-weight:600; color:#6b7280;
  cursor:pointer; white-space:nowrap;
  transition:border-color 0.12s ease, color 0.12s ease;
}
.mkt-card__compare:hover{
  border-color:rgba(0,0,0,0.20); color:#1a1a1a;
  background:#f8fafc;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}
.mkt-card__compare svg{ flex-shrink:0; color:inherit; }
.mkt-card__compare.is-selected{
  background:#f0fdf4; border-color:#22c55e; color:#16a34a;
}


/* ════════════════════════════════
   SHARED: Bike card (landing page)
   ════════════════════════════════ */

.mkt-bike-card{
  display:flex; flex-direction:column;
  border:1px solid rgba(0,0,0,0.06); border-radius:10px;
  background:#fff; text-decoration:none; color:#1a1a1a;
  overflow:hidden;
  transition:border-color 0.15s ease, box-shadow 0.2s ease;
}
.mkt-bike-card:hover{
  border-color:rgba(0,0,0,0.14);
  box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.mkt-bike-card__media{
  position:relative; aspect-ratio:4/3; background:#f7f7f7;
}
.mkt-bike-card__media img{
  width:100%; height:100%; object-fit:contain; padding:16px;
}
.mkt-bike-card__badges{
  position:absolute; top:10px; left:10px; display:flex; gap:6px;
}
.mkt-bike-card__body{
  padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:2px;
}
.mkt-bike-card__brand{
  font-size:14px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.01em; color:#1a1a1a; font-style:italic;
}
.mkt-bike-card__type{
  font-size:11px; font-weight:600; color:#9ca3af;
  letter-spacing:0.04em; text-transform:uppercase; margin-top:4px;
}
.mkt-bike-card__title{
  margin:2px 0 0; font-size:15px; font-weight:600;
  line-height:1.3; color:#1a1a1a;
}
.mkt-bike-card__specs{
  font-size:12px; color:#9ca3af; margin-top:2px;
}
.mkt-bike-card__price{
  display:flex; align-items:baseline; gap:8px; margin-top:8px;
}
.mkt-bike-card__price strong{ font-size:16px; font-weight:700; color:#1a1a1a; }
.mkt-bike-card__price span{ font-size:13px; color:#9ca3af; text-decoration:line-through; }
.mkt-bike-card__dealer{
  font-size:12px; color:#6b7280; margin-top:4px;
}

/* Pagination */
.market-pagination{
  border-radius:8px; border:1px solid rgba(0,0,0,0.06);
  box-shadow:none; margin-top:28px;
}
.market-pagination__page,
.market-pagination__nav{
  border-radius:6px; min-height:36px;
  border-color:rgba(0,0,0,0.06); font-size:14px;
}
.market-pagination__page.is-active{
  background:#1a1a1a; color:#fff;
  border-color:#1a1a1a;
}

/* Empty state */
.market-empty-state{
  border-radius:10px; padding:48px 24px;
  border:1px dashed rgba(0,0,0,0.12);
}
.market-empty-state h2{ font-size:24px; letter-spacing:-0.02em; }


/* Step 0022 – stability fixes from current live direction */
body.is-marketplace-page main{
  overflow-x:clip;
}
body.is-marketplace-page .market-shell,
body.is-marketplace-page .market-product,
body.is-marketplace-page .mkt-landing{
  width:auto;
  max-width:1920px;
  margin-inline:auto;
  padding-inline:16px;
  box-sizing:border-box;
}
body.is-marketplace-page .ml-wrap{
  max-width:1680px;
}
.mkt-card__heart.is-active{
  background:#fff1f2;
  border-color:#fda4af;
}
.mkt-card__heart.is-active svg{
  color:#e11d48;
  fill:rgba(225, 29, 72, 0.16);
}
.market-detail-action-stack{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.market-detail-favorite{
  appearance:none;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.10);
  background:#fff;
  color:#1a1a1a;
  font:inherit;
  font-size:14px;
  font-weight:650;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.market-detail-favorite:hover{
  border-color:rgba(0,0,0,0.22);
}
.market-detail-favorite.is-active{
  background:#fff1f2;
  border-color:#fda4af;
  color:#be123c;
}
.market-detail-favorite.is-active svg{
  color:#e11d48;
  fill:rgba(225, 29, 72, 0.16);
}
@media(max-width:900px){
  body.is-marketplace-page .market-shell,
  body.is-marketplace-page .market-product,
  body.is-marketplace-page .mkt-landing{
    padding-inline:12px;
  }
}
@media(max-width:768px){
  .market-filters{
    padding:16px;
  }
  .mkt-page-head{
    padding-top:18px;
  }
  .mkt-page-head h1{
    font-size:24px;
  }
  .mkt-card__body{
    padding:12px 14px 14px;
  }
  .mkt-card__title{
    font-size:14px;
  }
  .mkt-card__specs{
    font-size:11px;
    line-height:1.45;
  }
  .mkt-card__footer{
    align-items:flex-start;
    gap:10px;
    flex-direction:column;
  }
  .mkt-card__compare{
    width:100%;
    justify-content:center;
  }
}

/* ═══════════════════════════════════════
   Step 0030 – filter dropdown / sheet
   ═══════════════════════════════════════ */
.market-search-frame{position:relative}

/* ═══ TOOLBAR MOBILE ═══ */
@media(max-width:768px){
  .mkt-toolbar{ flex-direction:row; align-items:center; padding:12px 0; gap:10px; }
  .mkt-toolbar__filter{ display:none; }
  .mkt-toolbar__right{ justify-content:space-between; flex:1; }
  .mkt-toolbar__count{ font-size:13px; }
  .mkt-toolbar__sort-label{ display:none; }
  .mkt-toolbar__sort{ font-size:13px; }
  .mkt-type{ min-width:auto; height:36px; padding:0 14px; font-size:13px; flex-shrink:0; }
  .mkt-type-bar{
    padding:14px 0 0;
    -webkit-mask-image:linear-gradient(to right, #000 85%, transparent 100%);
    mask-image:linear-gradient(to right, #000 85%, transparent 100%);
  }
  .mkt-page-head h1{ font-size:24px; }
}

/* ═══ MOBILE FILTER FAB ═══ */
.mkt-filter-fab{
  display:none;
  position:fixed; bottom:24px; left:24px;
  z-index:100;
  align-items:center; gap:8px;
  padding:14px 20px;
  background:#1a1a1a; color:#fff;
  border:none; border-radius:999px;
  font:inherit; font-size:14px; font-weight:700;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.mkt-filter-fab:hover{ transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,0,0,.3); }
.mkt-filter-fab svg{ flex-shrink:0; }
.mkt-filter-fab__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:#fff; color:#1a1a1a;
  font-size:11px; font-weight:800;
}
@media(max-width:768px){
  .mkt-filter-fab{ display:inline-flex; }
}

/* ═══ FILTER BADGE ON TOOLBAR BUTTON ═══ */
.mkt-toolbar__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#1a1a1a; color:#fff;
  font-size:11px; font-weight:700; line-height:1;
}

/* ═══ FILTER MODAL ═══ */
.market-filters{
  position:fixed !important; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:0 !important; margin:0 !important;
  border:none !important; background:none !important;
  box-shadow:none !important; max-height:none !important;
  opacity:1 !important; overflow:visible !important;
  border-radius:0 !important; pointer-events:auto;
  transform:none !important;
}
.market-filters[hidden]{ display:none !important; }

.market-filters__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer;
}
.market-filters__dialog{
  position:relative; z-index:1;
  width:min(720px, calc(100vw - 32px));
  max-height:min(85vh, 85dvh);
  background:#fff; border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.2);
  display:flex; flex-direction:column; overflow:hidden;
  animation:mkt-filter-in .3s cubic-bezier(.22,1,.36,1);
}
@keyframes mkt-filter-in{ from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none} }

.market-filters__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid rgba(0,0,0,.06); flex-shrink:0;
}
.market-filters__header strong{ font-size:18px; font-weight:600; letter-spacing:-.02em; }
.market-filters__close-btn{
  appearance:none; border:none; background:transparent;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; color:#666; transition:background .15s ease;
}
.market-filters__close-btn:hover{ background:rgba(0,0,0,.04); }

.market-filters__body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 22px 16px; overscroll-behavior-y:contain; }

.market-filter-section{ padding:16px 0; border-bottom:1px solid rgba(0,0,0,.04); }
.market-filter-section:last-child{ border-bottom:none; }
.market-filter-section__label{
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#9ca3af; margin-bottom:10px;
}

.market-filter-input{
  width:100%; height:42px; border:1.5px solid rgba(0,0,0,.1); border-radius:10px;
  padding:0 14px; font:inherit; font-size:14px; color:#1a1a1a; background:#fff;
  transition:border-color .15s ease; box-sizing:border-box;
}
.market-filter-input:focus{ border-color:#1a1a1a; outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.market-filter-input--half{ flex:1; min-width:0; }
.market-filter-row{ display:flex; align-items:center; gap:10px; }
.market-filter-dash{ color:#ccc; font-weight:600; }

.market-filter-select{
  width:100%; height:42px; border:1.5px solid rgba(0,0,0,.1); border-radius:10px;
  padding:0 14px; font:inherit; font-size:14px; color:#1a1a1a; background:#fff;
  appearance:none; -webkit-appearance:none; box-sizing:border-box;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; cursor:pointer;
}
.market-filter-select:focus{ border-color:#1a1a1a; outline:none; }

.market-filter-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.market-chip{
  display:inline-flex; align-items:center; cursor:pointer; position:relative;
  padding:7px 14px; border:1.5px solid rgba(0,0,0,.1); border-radius:999px;
  background:#fff; font-size:13px; font-weight:500; color:#374151; transition:all .15s ease;
}
.market-chip input{ position:absolute; opacity:0; pointer-events:none; }
.market-chip:has(input:checked){ background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.market-chip:hover{ border-color:rgba(0,0,0,.2); background:#f9f9f9; }
.market-chip:has(input:checked):hover{ background:#333; }
.market-chip small{ color:#9ca3af; margin-left:2px; }
.market-chip:has(input:checked) small{ color:rgba(255,255,255,.6); }

.market-filter-colors{ display:flex; flex-wrap:wrap; gap:8px; }
.market-color-chip{
  position:relative;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 12px 6px 6px; border:1.5px solid rgba(0,0,0,.08); border-radius:999px;
  background:#fff; font-size:12px; font-weight:500; color:#374151; transition:all .15s ease;
}
.market-color-chip input{ position:absolute; opacity:0; pointer-events:none; }
.market-color-chip:has(input:checked){ border-color:#1a1a1a; background:#f5f5f5; }
.market-color-chip:hover{ border-color:rgba(0,0,0,.18); }
.market-color-chip__dot{ width:20px; height:20px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,.08); }
.market-color-chip__name{ white-space:nowrap; }

.market-filter-checks-row{ display:flex; flex-wrap:wrap; gap:6px; }

.market-filters__footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 22px; border-top:1px solid rgba(0,0,0,.06); flex-shrink:0; background:#fff;
}
.market-filters__reset{ font-size:14px; font-weight:600; color:#6b7280 !important; text-decoration:underline; text-underline-offset:3px; }
.market-filters__reset:hover{ color:#1a1a1a !important; }
.market-filters__apply{
  appearance:none; border:none; padding:12px 28px; border-radius:12px;
  background:#1a1a1a; color:#fff; font:inherit; font-size:14px; font-weight:700;
  cursor:pointer; transition:background .15s ease;
}
.market-filters__apply:hover{ background:#333; }

@media(max-width:640px){
  .market-filters__dialog{
    width:100%; max-width:none;
    max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px);
    border-radius:20px 20px 0 0;
    position:fixed; bottom:0; left:0; right:0;
    animation:mkt-filter-mobile-in .35s cubic-bezier(.22,1,.36,1);
  }
  @keyframes mkt-filter-mobile-in{ from{transform:translateY(100%)} to{transform:translateY(0)} }
  .market-filters__body{ padding:8px 16px 16px; }
  .market-filters__header{ padding:16px; }
  .market-filters__footer{ padding:14px 16px; }
}


/* ============================================================
   TOP-LEVEL MARKETPLACE NAV (Fahrräder, E-Bikes, Marken, Sale)
   ============================================================ */

.mkt-main-nav{
  display:flex;
  gap:0;
  border-bottom:1px solid rgba(0,0,0,0.08);
  padding:0;
  margin-top:16px;
}

.mkt-main-nav__item{
  display:flex;
  align-items:center;
  padding:14px 20px;
  font-size:15px;
  font-weight:600;
  color:#6b7280;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}

.mkt-main-nav__item:hover{
  color:#1a1a1a;
}

.mkt-main-nav__item.is-active{
  color:#1a1a1a;
  font-weight:700;
  border-bottom-color:#1a1a1a;
}


/* ============================================================
   FIX: Type bar – softer active state (no black block)
   ============================================================ */

.mkt-type.is-active{
  background:rgba(15,23,42,0.06);
  color:#1a1a1a;
  border-color:rgba(0,0,0,0.14);
  font-weight:700;
}

.mkt-type.is-active+.mkt-type{
  border-left-color:rgba(0,0,0,0.14);
}


/* ============================================================
   BRAND LOGOS in bike cards (replaces text where available)
   ============================================================ */

.mkt-card__brand--logo{
  font-size:0;
  letter-spacing:0;
  text-transform:none;
  margin-left:auto;
}
.mkt-card__brand--logo img{
  height:44px;
  width:auto;
  max-width:180px;
  object-fit:contain;
}

/* Filter FAB + WA: smooth transition on bottom position */
.mkt-filter-fab{
  transition:bottom .3s cubic-bezier(.22,1,.36,1);
}
.wa-float{
  transition:all .3s cubic-bezier(.22,1,.36,1);
}

/* ═══ PROVIDER BANNER (bike detail + marketplace) ═══ */
.mkt-provider-banner{
  background:linear-gradient(135deg, #18181b 0%, #27272a 100%);
  color:#fff;
  padding:0 18px;
}
.mkt-provider-banner__inner{
  max-width:1560px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
}
.mkt-provider-banner__icon{
  flex-shrink:0;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.1);
  border-radius:10px;
}
.mkt-provider-banner__icon svg{ color:#a1a1aa; }
.mkt-provider-banner__text{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.mkt-provider-banner__text strong{
  font-size:13px; font-weight:800; letter-spacing:.01em;
}
.mkt-provider-banner__text span{
  font-size:12px; color:#a1a1aa; line-height:1.4;
}
.mkt-provider-banner__btn{
  flex-shrink:0;
  padding:8px 18px;
  border-radius:8px;
  background:#fff;
  color:#18181b;
  font-size:13px; font-weight:700;
  text-decoration:none;
  transition:all .15s ease;
  white-space:nowrap;
}
.mkt-provider-banner__btn:hover{
  background:#f4f4f5;
  transform:translateY(-1px);
}
.mkt-provider-banner__close{
  appearance:none; border:0; background:transparent;
  color:#71717a; font-size:20px; cursor:pointer;
  padding:4px 8px; border-radius:6px;
  transition:color .15s ease;
}
.mkt-provider-banner__close:hover{ color:#fff; }

@media(max-width:640px){
  .mkt-provider-banner__inner{
    flex-wrap:wrap;
  }
  .mkt-provider-banner__btn{
    width:100%; text-align:center;
  }
}


/* ── Global fix: all filter labels with hidden inputs must contain them ── */
.market-filter-chips label,
.market-filter-colors label,
.market-filter-checks-row label{
  position:relative;
}
/* Prevent focus-scroll on hidden inputs inside filters */
[data-market-filters] input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
  top:0;
  left:0;
  width:1px;
  height:1px;
  overflow:hidden;
}