/* ---- Банер «Електровелосипеди» ---- */
.ebb-wrap { margin: 40px 0 10px; }
.ebb-wrap--list { margin: 0 0 18px; }
.ebb { position: relative; display: block; min-height: 460px; overflow: hidden; isolation: isolate; background: #1b1d1f; color: #fff; text-decoration: none; }
.ebb:hover { color: #fff; }
.ebb__bg { position: absolute; inset: 0; z-index: -2; }
.ebb__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.ebb:hover .ebb__bg img { transform: scale(1.06); }
.ebb::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,12,14,.92) 0%, rgba(10,12,14,.78) 30%, rgba(10,12,14,.15) 58%, rgba(10,12,14,0) 75%), linear-gradient(0deg, rgba(10,12,14,.55), transparent 40%); }
.ebb__in { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; padding: clamp(28px, 4vw, 56px); min-height: inherit; justify-content: center; }
.ebb__kick { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; background: rgba(0,135,81,.18); border: 1px solid rgba(111,211,160,.35); color: #8fe3b6; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ebb__kick svg { width: 15px; height: 15px; }
.ebb__h { font-family: 'Geologica', sans-serif; font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.02; letter-spacing: -.035em; }
.ebb__p { font-size: .98rem; line-height: 1.55; color: rgba(255,255,255,.76); max-width: 460px; }
.ebb__facts { display: flex; gap: 0; margin-top: 4px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.ebb__facts > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; }
.ebb__facts > span + span { border-left: 1px solid rgba(255,255,255,.14); }
.ebb__facts b { font-family: 'Geologica', sans-serif; font-size: 1rem; white-space: nowrap; }
.ebb__facts small { font-size: .72rem; color: rgba(255,255,255,.6); }
.ebb__cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--cta); color: #fff; font-weight: 700; font-size: .95rem; transition: background .2s, gap .2s; }
.ebb:hover .ebb__cta { background: #00a062; gap: 14px; }

/* компактний (списки, сторінка велосипеда) */
.ebb--slim { min-height: 260px; }
.ebb--slim .ebb__in { gap: 10px; padding: 26px 32px; max-width: 520px; }
.ebb--slim .ebb__h { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.ebb--slim .ebb__p, .ebb--slim .ebb__facts > span:nth-child(3) { display: none; }
.ebb--slim .ebb__cta { padding: 11px 18px; font-size: .88rem; }

@media (max-width: 760px) {
  .ebb-wrap { margin: 28px 0 8px; }
  .ebb, .ebb--slim { min-height: 0; }
  .ebb__bg { position: relative; display: block; height: 220px; }
  .ebb__bg img { object-position: 50% 50%; }
  .ebb::after { background: linear-gradient(180deg, rgba(10,12,14,0) 0, rgba(10,12,14,0) 150px, rgba(10,12,14,.96) 220px, #0d0f11 100%); }
  .ebb__in, .ebb--slim .ebb__in { margin-top: -40px; padding: 0 18px 22px; gap: 10px; max-width: none; }
  .ebb__h { font-size: 1.7rem; }
  .ebb--slim .ebb__h { font-size: 1.4rem; }
  .ebb__p { font-size: .88rem; }
  .ebb__facts { width: 100%; }
  .ebb__facts > span { flex: 1 1 0; padding: 9px 10px; min-width: 0; }
  .ebb__facts > span:nth-child(3) { display: none; }
  .ebb__facts b { font-size: .88rem; }
  .ebb__cta { width: 100%; justify-content: center; }
}
@media (min-width: 761px) {
  .ebb--slim { background: #1a1b1d; }
  .ebb--slim .ebb__bg img { object-fit: cover; object-position: 100% 50%; }
  .ebb--slim::after { background: linear-gradient(90deg, rgba(10,12,14,.9) 0%, rgba(10,12,14,.55) 32%, rgba(10,12,14,0) 50%); }
}

/* Плитка «Електровелосипеди» в сітці товарів — розміром як картка */
.ebt { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #16181a; color: #fff; text-decoration: none; border: 1px solid #16181a; }
.ebt:hover { color: #fff; }
.ebt__img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #2a2a2a; }
.ebt__img img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ebt:hover .ebt__img img { transform: scale(1.05); }
.ebt__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; flex: 1; }
.ebt__kick { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fe3b6; }
.ebt__kick svg { width: 14px; height: 14px; }
.ebt__h { font-family: 'Geologica', sans-serif; font-size: 1.1rem; line-height: 1.15; letter-spacing: -.02em; }
.ebt__f { font-size: .8rem; color: rgba(255,255,255,.7); }
.ebt__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--cta); color: #fff; font-weight: 600; font-size: .82rem; }
.ebt:hover .ebt__cta { background: #00a062; }
@media (max-width: 760px) { .ebt__body { padding: 10px 10px 12px; gap: 4px; } .ebt__h { font-size: .95rem; } .ebt__f { font-size: .72rem; } .ebt__cta { padding: 7px 10px; font-size: .76rem; } }