/* RUNABLE THEME v2 (template-like)
   Scope: ONLY pages containing .runable-content (i.e., /runable/)
   NO Aspro edits (CSS override only)
*/

/* ---------- tokens (like the sample) ---------- */
.runable-content{
  --radius: 18px;
  --bg: #0A0A0A;
  --fg: rgba(255,255,255,.88);
  --muted: rgba(255,255,255,.55);
  --card: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.10);

  --primary: #FF6B6B;
  --secondary: #4ECDC4;
  --accent: #FFE66D;

  color: var(--fg);
}

/* ---------- stop Aspro squeezing (ONLY when runable-content exists) ---------- */
.page-wrapper:has(.runable-content) .container,
.page-wrapper:has(.runable-content) .maxwidth-theme{
  width: 100% !important;
  max-width: 100% !important;
}
.page-wrapper:has(.runable-content) .content-md{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-wrapper:has(.runable-content) .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-wrapper:has(.runable-content) .right_block,
.page-wrapper:has(.runable-content) .right_block.narrow_N{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ---------- page background (only /runable/) ---------- */
.page-wrapper:has(.runable-content) body#main{
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 420px at 72% 26%, rgba(78,205,196,.10), transparent 55%),
    radial-gradient(900px 420px at 52% 76%, rgba(255,107,107,.08), transparent 55%),
    var(--bg) !important;
}

/* ---------- main width + rhythm ---------- */
.runable-content{
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* ---------- “glass card” surface ---------- */
.runable-content .ebs-hero__inner,
.runable-content .ebs-block,
.runable-content .ebs-contacts__card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* ---------- typography ---------- */
.runable-content h1,
.runable-content h2,
.runable-content h3{
  letter-spacing: -0.01em;
}
.runable-content p{ color: var(--muted); }

/* ---------- HERO ---------- */
.runable-content .ebs-hero{ padding: 28px 0 14px; }
.runable-content .ebs-hero__inner{ padding: 22px 18px; position: relative; overflow: hidden; }
.runable-content .ebs-hero__inner:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 240px at 18% 22%, rgba(78,205,196,.18), transparent 60%),
    radial-gradient(520px 260px at 70% 30%, rgba(255,107,107,.14), transparent 60%);
  pointer-events:none;
  filter: blur(0.2px);
  opacity:.9;
}
.runable-content .ebs-hero__inner > *{ position: relative; }

.runable-content .ebs-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  font-size: 12px;
  color: rgba(255,255,255,.78);
  margin-bottom: 14px;
}

.runable-content .ebs-hero__title{
  margin: 0 0 10px 0;
  font-weight: 900;
  font-size: 36px;
  line-height: 1.12;
}
.runable-content .ebs-hero__lead{
  margin: 0 0 16px 0;
  max-width: 860px;
  line-height: 1.6;
}
.runable-content .ebs-hero__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- buttons / chips ---------- */
.runable-content .ebs-btn,
.runable-content .ebs-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .08s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
  color: rgba(255,255,255,.86);
}

.runable-content .ebs-btn{
  height: 46px;
  padding: 0 16px;
  background: rgba(0,0,0,.22);
}
.runable-content .ebs-btn--primary{
  background: rgba(255,107,107,.18);
  border-color: rgba(255,107,107,.28);
  box-shadow: 0 10px 26px rgba(255,107,107,.10);
}
.runable-content .ebs-btn--ghost{
  background: rgba(255,255,255,.06);
}
.runable-content .ebs-btn:hover,
.runable-content .ebs-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.24);
}
.runable-content .ebs-btn--primary:hover{
  background: rgba(255,107,107,.24);
  border-color: rgba(255,107,107,.36);
}

.runable-content .ebs-chip{
  height: 38px;
  padding: 0 12px;
  background: rgba(255,255,255,.06);
}

/* ---------- INFO GRID / CARDS ---------- */
.runable-content .ebs-info{ padding: 10px 0 16px; }
.runable-content .ebs-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.runable-content .ebs-card{
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.runable-content .ebs-card h3{ margin: 0 0 8px 0; font-size: 16px; font-weight: 900; }
.runable-content .ebs-card p{ margin: 0; line-height: 1.6; }

/* ---------- contacts ---------- */
.runable-content .ebs-contacts{ padding: 6px 0 18px; }
.runable-content .ebs-contacts__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}
.runable-content .ebs-kv__k{ color: rgba(255,255,255,.58); }
.runable-content .ebs-kv__v{ color: rgba(255,255,255,.86); }

/* ---------- responsive ---------- */
@media (max-width: 991px){
  .runable-content .ebs-hero__title{ font-size: 26px; }
  .runable-content .ebs-grid-3{ grid-template-columns: 1fr; }
  .runable-content .ebs-contacts__grid{ grid-template-columns: 1fr; }
}




/* ==========================================================
   RUNABLE POLISH v1 (popular + static blocks)
   Keep same container feel for blocks that are OUTSIDE .runable-content
   NO Aspro edits.
   ========================================================== */

.page-wrapper:has(.runable-content) #ebs-products-popular,
.page-wrapper:has(.runable-content) .ebs-runable-static{
  width: 100% !important;
  max-width: 1180px !important; /* same as .runable-content */
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* spacing between sections */
.page-wrapper:has(.runable-content) #ebs-products-popular{ margin-top: 18px !important; }
.page-wrapper:has(.runable-content) .ebs-runable-static{ margin-top: 18px !important; padding-bottom: 24px !important; }

/* make static blocks look like same “card surface” */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 16px;
}

/* prevent any accidental huge margins inside static area */
.page-wrapper:has(.runable-content) .ebs-runable-static h2{ margin-top: 0; }


/* ===== FIX: static blocks + FAQ separation / header look ===== */
.page-wrapper:has(.runable-content) .ebs-runable-static{
  margin-top: 22px !important;
}

/* each block becomes independent “card” with breathing space */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block{
  margin: 0 0 18px 0 !important;
  padding: 18px 18px 16px 18px !important;
}

/* header sits naturally, no “inner top border” feel */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block > h2{
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

/* if FAQ is inside a block: keep it visually separate */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-faq{
  margin-top: 10px !important;
}
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-faq details{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.18) !important;
  border-radius: 12px !important;
  margin: 0 0 10px 0 !important;
  overflow: hidden;
}
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-faq summary{
  padding: 14px 14px !important;
  list-style: none;
}
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-faq__body{
  padding: 0 14px 14px 14px !important;
  opacity: .75;
}

/* ===== FIX v2: static blocks header border + separation (NO Aspro edits) ===== */

/* extra spacing between static blocks */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block{
  margin: 0 0 22px 0 !important;
}

/* kill any pseudo borders/lines that can look like “inner top border” */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block:before,
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block:after,
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block > h2:before,
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block > h2:after{
  content: none !important;
  display: none !important;
}

/* header: no embedded feel */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block > h2{
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* FAQ: make each item feel separate, not “glued” */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-faq details{
  margin: 0 0 12px 0 !important;
}

/* ===== CAROUSEL CARD: title clamp + button look (NO basket) ===== */
.page-wrapper:has(.runable-content) .ebs-product-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
  max-height: calc(1.25em * 2);
}

.page-wrapper:has(.runable-content) .ebs-product-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  margin-top: 10px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  border-radius: 10px;
}
.page-wrapper:has(.runable-content) .ebs-product-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}



/* ===== FIX v3: STATIC (Подбор/FAQ) + CAROUSEL button/clamp (strong, CSS-only) ===== */

/* --- Static blocks: remove “inner top border” feel + unglue blocks --- */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block{
  margin: 0 0 22px 0 !important;
  border-top: 0 !important;
  overflow: hidden !important;
}

.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block > h2{
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block:before,
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block:after,
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block > h2:before,
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-block > h2:after{
  content: none !important;
  display: none !important;
}

/* FAQ items: less “glued” */
.page-wrapper:has(.runable-content) .ebs-runable-static .ebs-faq details{
  margin: 0 0 12px 0 !important;
}

/* --- Carousel card: clamp title (2 lines) + visible button --- */
.page-wrapper:has(.runable-content) .ebs-product-title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
  max-height: calc(1.25em * 2) !important;
}

.page-wrapper:has(.runable-content) .ebs-product-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin-top: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
}
.page-wrapper:has(.runable-content) .ebs-product-btn:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.22) !important;
}



/* ===== FIX: prevent carousel layout leaking to blocks below (flow/float isolation) ===== */

/* 1) Ensure popular container behaves as a full-width block */
.page-wrapper:has(.runable-content) #ebs-products-popular{
  display: block !important;
  width: 100% !important;
}

/* 2) Create a new formatting context for the carousel block to contain floats (if any) */
.page-wrapper:has(.runable-content) #ebs-products-popular .ebs-carousel-block{
  display: flow-root !important; /* best clearfix, safe */
}

/* 3) Hard clear before static blocks (safety net) */
.page-wrapper:has(.runable-content) .ebs-runable-static{
  clear: both !important;
}

/* 4) In case any inner elements still float, force track/grid to not float */
.page-wrapper:has(.runable-content) #ebs-products-popular .ebs-carousel-track,
.page-wrapper:has(.runable-content) #ebs-products-popular .ebs-products-grid{
  float: none !important;
}


/* ===== ANCHOR FIX: use .runable-landing (guaranteed) instead of .page-wrapper:has(...) ===== */

/* Static blocks (Подбор/FAQ): убрать “внутреннюю верхнюю обводку” и “склейку” */
.runable-landing .ebs-runable-static .ebs-block{
  margin: 0 0 22px 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.runable-landing .ebs-runable-static .ebs-block > h2{
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.runable-landing .ebs-runable-static .ebs-block:before,
.runable-landing .ebs-runable-static .ebs-block:after,
.runable-landing .ebs-runable-static .ebs-block > h2:before,
.runable-landing .ebs-runable-static .ebs-block > h2:after{
  content: none !important;
  display: none !important;
}

.runable-landing .ebs-runable-static .ebs-faq details{
  margin: 0 0 12px 0 !important;
}

/* Carousel: clamp title + button style */
.runable-landing .ebs-product-title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
  max-height: calc(1.25em * 2) !important;
}

.runable-landing .ebs-product-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin-top: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
}
.runable-landing .ebs-product-btn:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.22) !important;
}


/* ===== STATIC BLOCKS: internal layout (title / text / grid / buttons) ===== */

/* базовая “карточка” секции */
.runable-landing .ebs-runable-static .ebs-block{
  padding: 22px 22px 18px 22px !important;
  border-radius: 16px !important;
}

/* заголовок всегда первый, с нормальным отступом */
.runable-landing .ebs-runable-static .ebs-block > h2{
  display: block !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

/* текст под заголовком */
.runable-landing .ebs-runable-static .ebs-block > p{
  margin: 0 0 16px 0 !important;
  opacity: .85;
}

/* сетка внутренних карточек */
.runable-landing .ebs-runable-static .ebs-grid-3{
  margin-top: 0 !important;
  gap: 14px !important;
}

/* кнопки внизу блока — отделяем от сетки */
.runable-landing .ebs-runable-static .ebs-cta{
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* FAQ: чтобы не “липло” и было аккуратно */
.runable-landing .ebs-runable-static .ebs-faq{
  margin-top: 10px !important;
}
.runable-landing .ebs-runable-static .ebs-faq details{
  border-radius: 12px !important;
  overflow: hidden !important;
}


/* ===== RUNABLE: Popular products cards (force correct layout + title + button) ===== */
.runable-landing #ebs-products-popular .ebs-product-card{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* image block must NOT cover info */
.runable-landing #ebs-products-popular .ebs-product-image{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: rgba(255,255,255,.92) !important;
}

/* info is always visible under image */
.runable-landing #ebs-products-popular .ebs-product-info{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 12px 14px !important;
  background: transparent !important;
}

/* title: show and clamp to 2 lines */
.runable-landing #ebs-products-popular .ebs-product-title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
  max-height: calc(1.25em * 2) !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
  font-weight: 650 !important;
}

/* price */
.runable-landing #ebs-products-popular .ebs-product-price{
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
}

/* button */
.runable-landing #ebs-products-popular .ebs-product-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin-top: 2px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.92) !important;
}
.runable-landing #ebs-products-popular .ebs-product-btn:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.24) !important;
}


/* ===== RUNABLE: white background under product images ===== */
/* Works for ALL carousels on runable landing */

.runable-landing #ebs-products-popular .ebs-product-image,
.runable-landing .ebs-carousel-block .ebs-product-image{
  background-color: #ffffff !important;
}

/* Safety: if img tag is ever used inside */
.runable-landing #ebs-products-popular .ebs-product-image img,
.runable-landing .ebs-carousel-block .ebs-product-image img{
  background-color: #ffffff !important;
}

/* ===== RUNABLE: фиксируем заголовок товара ровно на 2 строки ===== */
/* Нужно, чтобы кнопка "В магазин" не прыгала */

.runable-landing #ebs-products-popular .ebs-product-title,
.runable-landing .ebs-carousel-block .ebs-product-title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;

  line-height: 1.25 !important;
  min-height: calc(1.25em * 2) !important;
  max-height: calc(1.25em * 2) !important;

  margin-bottom: 6px !important;
}

/* ===== RUNABLE: skeleton for ALL async carousels while container is empty ===== */
/* Работает для любого блока вида <div data-source="..."></div> на лендинге */

.runable-landing [data-source]:empty{
  display: block !important;
  width: 100% !important;
  min-height: 420px !important; /* чтобы не было скачка по высоте */
  margin: 22px 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

.runable-landing [data-source]:empty::before{
  content: "Загрузка товаров…" !important;
  position: absolute !important;
  left: 18px !important;
  top: 16px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.75) !important;
}

.runable-landing [data-source]:empty::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%
  ) !important;
  transform: translateX(-60%) !important;
  animation: ebsSkeletonMove 1.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes ebsSkeletonMove{
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

/* ===== RUNABLE: Brand Section (v1) ===== */
/* Safe scope: only /runable/ */
.runable-landing .ebs-brand{
  margin: 22px 0 !important;
}
.runable-landing .ebs-brand__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* head grid: meta + video */
.runable-landing .ebs-brand__head{
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin-bottom: 14px !important;
}

.runable-landing .ebs-brand__meta,
.runable-landing .ebs-brand__video{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
}

.runable-landing .ebs-brand__meta{
  padding: 18px 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.runable-landing .ebs-brand__label{
  display: inline-flex !important;
  align-items: center !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 700 !important;
  width: fit-content !important;
}

.runable-landing .ebs-brand__title{
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255,255,255,.95) !important;
}

.runable-landing .ebs-brand__desc{
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  line-height: 1.55 !important;
}

.runable-landing .ebs-brand__cta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

/* ===== EBS_BRAND_CSS_V2: Brand Section layout (meta + 9:16 video + 2 product rows) ===== */

.runable-landing .ebs-brand{
  margin: 22px 0 !important;
}

.runable-landing .ebs-brand__inner{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* Head: 2 columns on desktop, stacked on mobile */
.runable-landing .ebs-brand__head{
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 16px !important;
  align-items: stretch !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.05) !important;
}

.runable-landing .ebs-brand__meta{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.runable-landing .ebs-brand__label{
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: rgba(255,255,255,.65) !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

.runable-landing .ebs-brand__title{
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.92) !important;
}

.runable-landing .ebs-brand__desc{
  margin: 0 !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.78) !important;
  max-width: 60ch !important;
}

.runable-landing .ebs-brand__cta{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}

/* Video: real 9:16 box */
.runable-landing .ebs-brand__video{
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.22) !important;
  aspect-ratio: 9 / 16 !important;
  min-height: 260px !important;
}

/* stub centered */
.runable-landing .ebs-brand__videoStub{
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.65) !important;
  font-weight: 800 !important;
}

/* Rows */


/* Rows */
.runable-landing .ebs-brand__row{
  margin-top: 14px !important;
}

.runable-landing .ebs-brand__rowTitle{
  font-weight: 900 !important;
  color: rgba(255,255,255,.92) !important;
  margin: 0 0 10px !important;
  font-size: 16px !important;
}

/* Host should be a block */
.runable-landing .ebs-brand .ebs-carousel-host{
  display: block !important;
  width: 100% !important;
}



/* ===== EBS_BRAND_CSS_V2_PLUS: row cards + spacing ===== */

/* spacing between head and rows */
.runable-landing .ebs-brand__head{
  margin-bottom: 14px !important;
}

/* Row as glass card (same visual language as head) */
.runable-landing .ebs-brand__row{
  margin-top: 14px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.05) !important;
}

/* Row title inside card */
.runable-landing .ebs-brand__rowTitle{
  margin: 0 0 10px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.92) !important;
  letter-spacing: -0.01em !important;
}

/* Ensure host doesn't collapse */
.runable-landing .ebs-brand .ebs-carousel-host{
  display: block !important;
  width: 100% !important;
  min-height: 1px !important;
}

/* tighten on mobile */
@media (max-width: 480px){
  .runable-landing .ebs-brand__head{ padding: 14px !important; }
  .runable-landing .ebs-brand__row{ padding: 12px !important; }
}

/* ===== /EBS_BRAND_CSS_V2_PLUS ===== */

/* Responsive */
@media (max-width: 980px){
  .runable-landing .ebs-brand__head{
    grid-template-columns: 1fr !important;
  }
  .runable-landing .ebs-brand__video{
    aspect-ratio: 16 / 9 !important;
    min-height: 220px !important;
  }
}


/* ===== EBS_MOBILE_PADDING_V1: tighten side paddings on phones ===== */
@media (max-width: 480px){
  .runable-landing .ebs-hero__inner,
  .runable-landing .ebs-info__inner,
  .runable-landing .ebs-contacts__inner,
  .runable-landing .ebs-brand__inner,
  .runable-landing .ebs-runable-static__inner{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ===== EBS_RUNABLE_MOBILE_FIX_V2: overflow + padding tighten ===== */

/* 1) stop horizontal scrolling on /runable/ */
html.runable-landing, body.runable-landing{
  overflow-x: hidden !important;
}

/* 2) prevent grid children from pushing wider than viewport */
.runable-landing .ebs-brand__head,
.runable-landing .ebs-brand__meta,
.runable-landing .ebs-brand__video{
  min-width: 0 !important;
}

/* 3) mobile: remove extra side paddings coming from wrappers */
@media (max-width: 480px){
  .runable-landing .runable-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .runable-landing .ebs-hero__inner,
  .runable-landing .ebs-info__inner,
  .runable-landing .ebs-contacts__inner,
  .runable-landing .ebs-brand__inner,
  .runable-landing .ebs-runable-static__inner{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* ===== /EBS_RUNABLE_MOBILE_FIX_V2 ===== */

/* ===== EBS_HARD_MOBILE_FIX_V1: kill horizontal scroll + tighten paddings ===== */
.runable-landing,
.runable-landing *{
  box-sizing: border-box !important;
}

html.runable-landing,
body.runable-landing,
.runable-landing .main,
.runable-landing .runable-content{
  overflow-x: hidden !important;
}

/* stop any block from exceeding viewport */
.runable-landing img,
.runable-landing video,
.runable-landing iframe{
  max-width: 100% !important;
}

/* mobile paddings — hard override */
@media (max-width: 480px){
  .runable-landing .ebs-hero__inner,
  .runable-landing .ebs-info__inner,
  .runable-landing .ebs-contacts__inner,
  .runable-landing .ebs-brand__inner,
  .runable-landing .ebs-runable-static__inner{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* brand video must never push width */
  .runable-landing .ebs-brand__video{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ===== /EBS_HARD_MOBILE_FIX_V1 ===== */

/* ===== EBS_BRAND_CARDS_FIX_V1: force show title + button inside brand blocks ===== */
.runable-landing .ebs-brand .ebs-product-info{
  display: block !important;
}
.runable-landing .ebs-brand .ebs-product-title{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.runable-landing .ebs-brand .ebs-product-btn{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* ===== /EBS_BRAND_CARDS_FIX_V1 ===== */


/* ===== EBS_MOBILE_PADDING_V2: tighten REAL outer paddings on /runable/ ===== */
@media (max-width: 480px){
  /* часто большие поля даёт контейнер Aspro */
  .runable-landing .main .container,
  .runable-landing .main .maxwidth-theme,
  .runable-landing .main .wrapper_inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* а контент уже задаём сами */
  .runable-landing .ebs-hero__inner,
  .runable-landing .ebs-info__inner,
  .runable-landing .ebs-contacts__inner,
  .runable-landing .ebs-brand__inner,
  .runable-landing .ebs-runable-static__inner{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* ===== /EBS_MOBILE_PADDING_V2 ===== */

/* ===== EBS_BRAND_RENDER_FIX_V2: make brand carousels identical to top block ===== */

/* 1) In brand sections ALWAYS show product meta */
.runable-landing .ebs-brand .ebs-carousel-block .ebs-product-info{
  display: block !important;
}
.runable-landing .ebs-brand .ebs-carousel-block .ebs-product-title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;

  visibility: visible !important;
  opacity: 1 !important;
}
.runable-landing .ebs-brand .ebs-carousel-block .ebs-product-price{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.runable-landing .ebs-brand .ebs-carousel-block .ebs-product-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2) Remove “extra frame” while async content is loading INSIDE brand blocks */
.runable-landing .ebs-brand [data-source]:empty{
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  min-height: 260px !important; /* just keep height, no extra card */
}

/* 3) Mobile paddings: hard reset Aspro wrappers on /runable/ */
@media (max-width: 480px){
  .runable-landing .page-wrapper,
  .runable-landing .main,
  .runable-landing .main .container,
  .runable-landing .main .maxwidth-theme,
  .runable-landing .main .wrapper_inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .runable-landing .runable-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .runable-landing .ebs-hero__inner,
  .runable-landing .ebs-info__inner,
  .runable-landing .ebs-contacts__inner,
  .runable-landing .ebs-brand__inner,
  .runable-landing .ebs-runable-static__inner{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ===== /EBS_BRAND_RENDER_FIX_V2 ===== */

/* ===== EBS_BRAND_FIX_SAFE_V1: remove extra frame + force show title/button in brand carousels ===== */

/* 1) убираем лишнюю рамку/фон у карусели внутри бренда (сама карусель остаётся) */
.runable-landing .ebs-brand .ebs-carousel-block{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) гарантируем отображение meta у карточки в брендовых блоках */
.runable-landing .ebs-brand .ebs-carousel-block .ebs-product-info{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.runable-landing .ebs-brand .ebs-carousel-block .ebs-product-title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.runable-landing .ebs-brand .ebs-carousel-block .ebs-product-btn{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 3) НИЧЕГО не “выпирает”: оставляем overflow как есть, но подстрахуем ширины */
.runable-landing .ebs-brand,
.runable-landing .ebs-brand .ebs-brand__inner,
.runable-landing .ebs-brand .ebs-carousel-block{
  max-width: 100% !important;
}

/* ===== /EBS_BRAND_FIX_SAFE_V1 ===== */

/* ===== EBS_UNFRAME_BRAND_ROWS_V1: remove extra "card frame" around brand rows ===== */
.runable-landing .ebs-brand__row{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* ===== /EBS_UNFRAME_BRAND_ROWS_V1 ===== */

/* ===== EBS_BRAND_MATCH_POPULAR_V1: make brand cards same as #ebs-products-popular ===== */

/* card */
.runable-landing .ebs-brand .ebs-product-card{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* image */
.runable-landing .ebs-brand .ebs-product-image{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: rgba(255,255,255,.92) !important;
}

/* info */
.runable-landing .ebs-brand .ebs-product-info{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 12px 14px !important;
  background: transparent !important;
}

/* title */
.runable-landing .ebs-brand .ebs-product-title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
  max-height: calc(1.25em * 2) !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
  font-weight: 650 !important;
}

/* price */
.runable-landing .ebs-brand .ebs-product-price{
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
}

/* button */
.runable-landing .ebs-brand .ebs-product-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin-top: 2px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.92) !important;
}
.runable-landing .ebs-brand .ebs-product-btn:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.24) !important;
}

/* ===== /EBS_BRAND_MATCH_POPULAR_V1 ===== */

/* ===== EBS_RUNABLE_COMPACT_V1: reduce excessive vertical gaps + fix mobile side paddings ===== */

/* 1) Compact vertical rhythm */
.runable-landing .ebs-brand{
  margin: 14px 0 !important; /* was 22 */
}

.runable-landing .ebs-brand__head{
  margin-bottom: 10px !important;
}

.runable-landing .ebs-brand__row{
  margin-top: 10px !important;
}

.runable-landing .ebs-brand__rowTitle{
  margin: 0 0 8px !important;
}

/* tighten spacing after carousels and before next brand */
.runable-landing .ebs-carousel-block{
  margin: 0 !important;
}

/* 2) Mobile: kill outer paddings from Aspro wrappers (the real source of big side gaps) */
@media (max-width: 480px){
  .runable-landing .page-wrapper,
  .runable-landing .main,
  .runable-landing .main .container,
  .runable-landing .main .maxwidth-theme,
  .runable-landing .main .wrapper_inner,
  .runable-landing .content-md,
  .runable-landing .content_wrapper,
  .runable-landing .right_block,
  .runable-landing .left_block{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* and then we set the only desired padding inside our landing inners */
  .runable-landing .ebs-hero__inner,
  .runable-landing .ebs-info__inner,
  .runable-landing .ebs-contacts__inner,
  .runable-landing .ebs-brand__inner,
  .runable-landing .ebs-runable-static__inner{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ===== /EBS_RUNABLE_COMPACT_V1 ===== */

/* ===== EBS_RUNABLE_SIDE_GAPS_SAFE_V1: ONLY inside runable-content (do not affect Aspro header) ===== */
@media (max-width: 480px){

  /* ограничиваемся контентом лендинга */
  .runable-landing .runable-content .maxwidth-theme,
  .runable-landing .runable-content .wrapper_inner,
  .runable-landing .runable-content .container,
  .runable-landing .runable-content .content-md,
  .runable-landing .runable-content .content_wrapper,
  .runable-landing .runable-content .right_block,
  .runable-landing .runable-content .left_block{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* а нужные отступы задаём только внутренним блокам лендинга */
  .runable-landing .ebs-hero__inner,
  .runable-landing .ebs-info__inner,
  .runable-landing .ebs-contacts__inner,
  .runable-landing .ebs-brand__inner,
  .runable-landing .ebs-runable-static__inner{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
/* ===== /EBS_RUNABLE_SIDE_GAPS_SAFE_V1 ===== */


/* ===== EBS_BRAND_WHITE_BG_V1: force white image background in brand carousels ===== */
.runable-landing .ebs-brand .ebs-product-image,
.runable-landing .ebs-brand .ebs-product-image img{
  background-color: rgba(255,255,255,.92) !important;
}
/* ===== /EBS_BRAND_WHITE_BG_V1 ===== */



/* ===== EBS_ASPRO_HEADER_STICKY_RESTORE_V1: do not break sticky header/bottombar ===== */

/* IMPORTANT:
   Sticky breaks if any ancestor has overflow != visible.
   We previously set overflow-x hidden on .main / wrappers; revert it. */
.runable-landing .page-wrapper,
.runable-landing .main{
  overflow: visible !important;
  overflow-x: visible !important;
}

/* Keep horizontal scroll OFF only inside runable content area */
.runable-landing .runable-content{
  overflow-x: clip !important; /* if clip unsupported, next line will work */
  overflow-x: hidden !important;
}

/* Safety: don't create a new containing block for fixed/sticky */
.runable-landing .page-wrapper,
.runable-landing .main,
.runable-landing .runable-content{
  transform: none !important;
  will-change: auto !important;
}

/* ===== /EBS_ASPRO_HEADER_STICKY_RESTORE_V1 ===== */

/* ===== EBS_ASPRO_STICKY_RESTORE_V2: restore sticky by removing overflow from html/body ===== */
html.runable-landing,
body.runable-landing{
  overflow: visible !important;
  overflow-x: visible !important;
}

/* keep horizontal scroll OFF only in landing content */
.runable-landing .runable-content{
  overflow-x: clip !important;
  overflow-x: hidden !important;
}
/* ===== /EBS_ASPRO_STICKY_RESTORE_V2 ===== */

/* ===== EBS_RUNABLE_MOBILE_PADDING_VAR_V1 ===== */
.runable-landing{ --ebs-pad: 16px; }

@media (max-width: 480px){
  .runable-landing{ --ebs-pad: 8px; } /* попробуем 8px, если надо — сделаем 6px */

  .runable-landing .ebs-hero__inner,
  .runable-landing .ebs-info__inner,
  .runable-landing .ebs-contacts__inner,
  .runable-landing .ebs-brand__inner,
  .runable-landing .ebs-runable-static__inner{
    padding-left: var(--ebs-pad) !important;
    padding-right: var(--ebs-pad) !important;
  }
}
/* ===== /EBS_RUNABLE_MOBILE_PADDING_VAR_V1 ===== */

/* ===== EBS_RUNABLE_MOBILE_PAD_HAS_V1: real mobile paddings for /runable/ (no runable-landing class required) ===== */
@media (max-width: 480px){

  /* 1) убираем “жирные” боковые поля у aspro-контейнеров ТОЛЬКО на странице с .runable-content */
  .page-wrapper:has(.runable-content) .main .container,
  .page-wrapper:has(.runable-content) .main .maxwidth-theme,
  .page-wrapper:has(.runable-content) .main .wrapper_inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2) сам runable-контент тоже без внешних полей */
  .page-wrapper:has(.runable-content) .runable-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* 3) и только внутри наших “inner” задаём нужный отступ */
  .page-wrapper:has(.runable-content) .ebs-hero__inner,
  .page-wrapper:has(.runable-content) .ebs-info__inner,
  .page-wrapper:has(.runable-content) .ebs-contacts__inner,
  .page-wrapper:has(.runable-content) .ebs-brand__inner,
  .page-wrapper:has(.runable-content) .ebs-runable-static__inner{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* ===== /EBS_RUNABLE_MOBILE_PAD_HAS_V1 ===== */


/* ===== EBS_RUNABLE_MOBILE_PAD_BODYHAS_V1: reduce side gaps on mobile ONLY for /runable/ page ===== */
@media (max-width: 480px){

  /* 1) Aspro outer wrappers: kill padding/margins ONLY when runable-content exists */
  body#main:has(.runable-content) .main .maxwidth-theme,
  body#main:has(.runable-content) .main .wrapper_inner,
  body#main:has(.runable-content) .main .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2) Our content wrapper: no side padding */
  body#main:has(.runable-content) .runable-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Set the only desired padding inside our inner blocks */
  body#main:has(.runable-content) .ebs-hero__inner,
  body#main:has(.runable-content) .ebs-info__inner,
  body#main:has(.runable-content) .ebs-contacts__inner,
  body#main:has(.runable-content) .ebs-brand__inner,
  body#main:has(.runable-content) .ebs-runable-static__inner{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* ===== /EBS_RUNABLE_MOBILE_PAD_BODYHAS_V1 ===== */