/* ===== HERO (Bootstrap Carousel), строго в пределах .container ===== */
.tef-hero-carousel .carousel-inner {
  border-radius: .75rem;
  overflow: hidden;
}
.tef-hero-frame {
  position: relative;
  height: clamp(260px, 42vh, 520px);
}
.tef-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tef-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}
.tef-hero-caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.tef-hero-indicators { margin-bottom: .25rem; }
.tef-hero-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* === HERO на мобилке: во всю ширину, без отступов и скруглений === */
@media (max-width: 991.98px){
  .tef-hero .container{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .tef-hero-carousel .carousel-inner,
  .tef-hero-frame{
    border-radius:0 !important;
  }
  .tef-hero .carousel-control-prev,
  .tef-hero .carousel-control-next{
    width:18%;
  }
}

/* ===== CATEGORIES: без плагинов, scroll-snap ===== */
.tef-cats {
  background:#f8f9fa;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  position: relative;
  z-index: 1;
}
@media (max-width: 991.98px){
  .tef-cats .container{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* горизонтальная лента — фиксируем высоту и геометрию */
.tef-cats-scroller{
  display:flex;
  flex-wrap: nowrap !important;
  align-items:stretch;
  gap:12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:8px 36px;
  min-height:96px;
  scrollbar-width:none;
}
.tef-cats-scroller::-webkit-scrollbar{ display:none; }

.tef-cat{
  width:125px;
  flex: 0 0 auto !important; 
  scroll-snap-align:start;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding: 0px 10px 0px !important;
}
.tef-cat-ico{
  width:80px;
  height:80px;
  border-radius:50%;
  background:#fff url('/files/categories/placeholder.png') center/80px 80px no-repeat;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  flex:0 0 auto;
}
.tef-cat-tx{
  font-size:12px;
  line-height:1.2;
  text-align:center;
  max-width:96px;
}

/* кнопки прокрутки */
.tef-cats-nav{
  position:absolute;
  top:63%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  z-index:2;
}
.tef-cats-prev{ left:6px; }
.tef-cats-next{ right:6px; }

@media (max-width: 575.98px){
  .tef-cats-scroller{
    padding-left:28px;
    padding-right:28px;
  }
  .tef-cats-prev{ left:2px; }
  .tef-cats-next{ right:2px; }
}

/* ===== Небольшая защита от конфликтов ===== */
.tef-hero,
.tef-cats {
  isolation: isolate;
}
/* 1) На главной не нужен верхний отступ под шапку */
body.page-create main#content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2) В hero на мобилке прячем стрелки Bootstrap-карусели */
@media (max-width: 991.98px){
  .tef-hero .carousel-control-prev,
  .tef-hero .carousel-control-next{
    display: none !important;
  }
}

/* 3) Tabs "Mens / Womens" над лентой категорий */
.tef-cat-tabs{
  display:flex; gap:12px; padding:4px 12px 8px; align-items:center;
}
.tef-cat-tabs .nav-link{
  padding:.25rem .5rem; border:0; background:transparent; color:#6c757d;
}
.tef-cat-tabs .nav-link.active{
  color:#0d6efd; font-weight:400; position:relative;
}
.tef-cat-tabs .nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#0d6efd; border-radius:2px;
}

/* 4) Переключатель "buyers / sellers" поверх hero */
.tef-hero-tabs{
  display:flex; justify-content:center; gap:24px; margin-bottom:8px;
}
.tef-hero-tabs button{
  background:transparent; border:0; color:#e9ecef; opacity:.85; font-weight:600;
  text-transform: lowercase; letter-spacing:.3px; position:relative;
}
.tef-hero-tabs button.active,
.tef-hero-tabs button:focus{ opacity:1; color:#fff; }
.tef-hero-tabs button.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#fff; border-radius:2px;
}

/* 5) Стрелки у ленты категорий — скрыть на мобилке */
@media (max-width: 991.98px){
  .tef-cats-nav{ display:none !important; }
}

/* 6) Мобильные края у hero и категорий — без боковых полей, как просил */
@media (max-width: 991.98px){
  .tef-hero .container,
  .tef-cats .container{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .tef-hero-carousel .carousel-inner,
  .tef-hero-frame{ border-radius:0 !important; }
}
/* === 1) HERO во весь экран по ширине на всех разрешениях === */
.tef-hero .container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.tef-hero-carousel .carousel-inner,
.tef-hero-frame{
  border-radius:0 !important; /* без скруглений, чтобы прилегал к краям */
}

/* стрелки Bootstrap-карусели скрываем на мобиле */
@media (max-width: 991.98px){
  .tef-hero .carousel-control-prev,
  .tef-hero .carousel-control-next{ display:none !important; }
}

/* === 2) TAB'ы над лентой: синяя линия + серый треугольник === */
.tef-cats .container{ overflow: visible; } /* чтобы треугольник не обрезался */
.tef-cat-tabs{
  display:flex; gap:24px; padding:8px 16px 12px;
  align-items:center; position:relative; z-index:3;
  background:#fff; /* как на примере */
}
.tef-cat-tabs .nav-link{
  padding:.25rem 0; border:0; background:transparent;
  color:#868e96; font-weight:600; font-size:clamp(16px,2.2vw,20px);
  position:relative;
}
.tef-cat-tabs .nav-link.active{
  color:#212529;
}
/* синяя линия над активной вкладкой */
.tef-cat-tabs .nav-link.active::before{
  content:"";
  position:absolute; left:0; right:0; top:-8px;
  height:4px; border-radius:2px; background:#2196F3; /* синий как у образца */
}

/* ─── УДАЛЁН нижний треугольник (вниз) чтобы не было дубля ───
.tef-cat-tabs .nav-link.active::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px;
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:8px solid #d9d9d9;
  z-index:2;
}
*/

/* === 3) Серая подложка ленты категорий, чтобы треугольник "висел" над ней === */
.tef-cats{
  background:#f0f0f0; /* чуть темнее для читаемости, как на tefact.app */
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5;
  position:relative;
  z-index:1;
}

/* мобильные края ленты — также в край экрана */
@media (max-width: 991.98px){
  .tef-cats .container{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* подстройка расстояний у ленты, чтобы треугольник не перекрывал элементы */
.tef-cats-scroller{
  padding-top:18px;           /* даём место под треугольник */
  padding-bottom:12px;
}
/* hero без вертикальных паддингов, даже если висит .py-3 */
section.tef-hero,
section.tef-hero.py-3{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === PATCH (append-only) ===================================== */
/* 0) Главная без «отступа от шапки» */
body.page-create main#content{ margin-top:0 !important; padding-top:0 !important; }

/* 1) HERO — без вертикальных паддингов и во всю ширину (десктоп+мобайл) */
section.tef-hero, section.tef-hero.py-3{ padding-top:0 !important; padding-bottom:0 !important; }
.tef-hero .container{ max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }
.tef-hero-carousel .carousel-inner, .tef-hero-frame{ border-radius:0 !important; }

/* 2) Стрелки у слайдера скрыть на мобилке (оставляем точки) */
@media (max-width:991.98px){
  .tef-hero .carousel-control-prev,
  .tef-hero .carousel-control-next{ display:none !important; }
}

/* 3) Tabs над лентой: синяя линия сверху у активной + серый треугольник ВВЕРХ */
.tef-cats .container{ overflow:visible; } /* чтобы треугольник не обрезался */
.tef-cat-tabs{ display:flex; gap:24px; padding:7px 50px 8px; align-items:center; position:relative; z-index:3; background:#fff; }
.tef-cat-tabs .nav-link{ padding:.25rem 0; border:0; background:transparent; color:#868e96; font-weight:400; font-size:clamp(16px,2.2vw,20px); position:relative; }
.tef-cat-tabs .nav-link.active{ color:#212529; }
/* синяя линия */
.tef-cat-tabs .nav-link.active::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:4px; border-radius:2px; background:#2196F3; }
/* серый треугольник — апекс ВВЕРХ, фон прозрачный */
.tef-cat-tabs .nav-link.active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:calc(100% - 8px); width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #d9d9d9; background:transparent; z-index:2;
}

/* 4) Серая подложка и запас сверху под треугольник */
.tef-cats{ background:#f0f0f0; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; position:relative; z-index:1; }
.tef-cats-scroller{ padding-top:18px; padding-bottom:12px; }

/* 5) Края ленты на мобилке — тоже в край экрана */
@media (max-width:991.98px){
  .tef-cats .container{ max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }
}
/* ==== PATCH: tabs/triangle + прилегание к слайдеру =================== */

/* 0) Слайдер + точки без нижнего зазора; секции вплотную */
.tef-hero-indicators{ margin-bottom:0 !important; }
section.tef-hero, section.tef-hero.py-3{ padding-bottom:0 !important; margin-bottom:0 !important; }
.tef-cats{ margin-top:0 !important; }

/* 1) Синяя линия над активной вкладкой — БЕЗ скруглений */
.tef-cat-tabs .nav-link.active::before{
  content:"";
  position:absolute; left:0; right:0; top:-8px;
  height:4px; background:#2196F3; border-radius:0 !important;
}

/* 2) Треугольник: один, остриём ВВЕРХ, фон прозрачный.
      Сразу прижат к серой подложке (top:100%). */
.tef-cat-tabs .nav-link.active::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:100%;                   /* вплотную к следующему блоку */
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #d9d9d9;  /* апекс вверх */
  background:transparent;
  z-index:2;
}

/* 3) Серой подложке ленты даём минимальный отступ сверху, чтобы
      треугольник «врезался» без щели. Если был больше — перекрываем. */
.tef-cats-scroller{
  padding-top:8px !important;   /* раньше было больше — убираем зазор */
}

/* 4) На всякий случай убираем возможный внешний промежуток
      между табами и подложкой (если где-то задан margin). */
.tef-cat-tabs{ margin-bottom:0 !important; }
/* === PATCH 1: убрать верхний .py-2 у секции категорий ================== */
section.tef-cats.py-2 { padding-top: 0 !important; }

/* === PATCH 2: контейнер категорий — в край (как у слайдера), без паддингов */
.tef-cats .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative; /* сохранить твоё position-relative поведение */
  overflow: visible;  /* чтобы треугольник не обрезался */
}

/* === PATCH 3: треугольник = цвет подложки кружков ====================== */
/* задаём переменную цвета подложки у блока категорий (совпадает с фоном) */
.tef-cats { --cats-bg: inherit; }               /* по умолчанию */
.tef-cats { background: #f0f0f0; --cats-bg:#f0f0f0; }  /* если уже был #f0f0f0, переиспользуем */

/* сам треугольник — остриём вверх, фон прозрачный, цвет = подложка */
.tef-cat-tabs .nav-link.active::after {
  border-bottom-color: var(--cats-bg) !important;
  top: 100%; /* вплотную к подложке, без зазора */
}

/* на всякий случай убираем любой возможный зазор между табами и лентой */
.tef-cat-tabs { margin-bottom: 0 !important; }
.tef-cats-scroller { padding-top: 20px !important; }

/* Мобилка: табы «Одежда / Хобби и отдых / Электроника» без отступов и с горизонтальным скроллом */
@media (max-width: 575.98px) {
  .tef-cats .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .tef-cat-tabs {
    display: flex;
    flex-wrap: nowrap;           /* не переносим */
    overflow-x: auto;            /* горизонтальная прокрутка */
    white-space: nowrap;         /* страхуем от переноса */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox: прячем скроллбар */
  }
  .tef-cat-tabs::-webkit-scrollbar { display: none; } /* Safari/Chrome */
  .tef-cat-tabs .nav-item { flex: 0 0 auto; }
  .tef-cat-tabs .nav-link { flex: 0 0 auto; }
}
/* XS–SM: правим только мобилку */
@media (max-width: 575.98px) {
  /* убираем боковые отступы контейнера именно в секции категорий */
  .tef-cats > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* у самих табов делаем более узкие отступы */
  .tef-cats .tef-cat-tabs {
    padding: 7px 10px 8px !important; /* было 7px 50px 8px */
    gap: 16px;                        /* можно сузить, опционально */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tef-cats .tef-cat-tabs::-webkit-scrollbar { display: none; }
  .tef-cats .tef-cat-tabs .nav-item,
  .tef-cats .tef-cat-tabs .nav-link { flex: 0 0 auto; }
}

.tef-cat-tabs{
  display:flex;
  gap:24px;
  padding:7px 50px 8px;
  align-items:center;
  position:relative;
  z-index:3;
  background:#fff;

  /* ↓ добавь эти 4 строки */
  flex-wrap: nowrap;              /* запрет переноса */
  overflow-x: auto;               /* горизонтальная прокрутка */
  white-space: nowrap;            /* подстраховка */
  -webkit-overflow-scrolling: touch;
}
.tef-cat-tabs .nav-item,
.tef-cat-tabs .nav-link{ flex: 0 0 auto; }   /* не даём ужиматься */
.tef-cat-tabs::-webkit-scrollbar{ display:none; } /* можно скрыть скроллбар */