/* =========================
   BAR С ТАБАМИ И ГОРОДОМ
   ========================= */
.items-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  width: 100%;
  margin-top: 0px;
  padding-bottom: 0;

  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* =========================
   ТАБЫ
   ========================= */
.items-tabs {
  display: flex;
  gap: 24px;
  padding-bottom: 0px;
}

.items-tabs .item-tab {
  position: relative;
  background: none;
  border: 0;
  padding: 16px 0;

  font: inherit;
  color: #000;
  cursor: pointer;
  opacity: 0.3;

  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Подчёркивающая полоска */
.items-tabs .item-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 2px;

  background: #000;
  opacity: 0;
  transform: scaleX(0.8);

  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Ховер и активное состояние */
.items-tabs .item-tab:hover,
.items-tabs .item-tab.is-active {
  opacity: 1;
}

.items-tabs .item-tab:hover::after,
.items-tabs .item-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Панели вкладок (переключаем видимость) */
.tab-panel[hidden] {
  display: none !important;
}

/* Плавное появление ТОЛЬКО контента вкладок (без items-bar)
   На первом рендере контент показываем сразу (без долгого фейда),
   чтобы убрать дёргание layout. При переключении вкладок
   можно управлять анимацией через JS при желании. */
.tab-panel .fade-target {
  opacity: 1;
  transition: none;
}

/* =========================
   ВЫБОР ГОРОДА
   ========================= */
.city-dropdown {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 0px;
}

.city-dropdown__name {
  opacity: 0.7;
}

/* =========================
   ЗАГОЛОВОК «ПОД ЗАКАЗ»
   (липкий только сам header)
   ========================= */
.preorder-header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;

  padding: 18px 0 0;
}

.preorder-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

.preorder-line {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

/* Текст под заголовком «Под заказ» — НЕ sticky */
.preorder-text {
  width: 300px;
  line-height: 1.4;

  margin-top: -20px;       /* 24px от линии над текстом */
  padding-bottom: 0px;   /* немного воздуха снизу */
  margin-bottom: 0;       /* нулевой внешний отступ снизу */
}

/* =========================
   ОБЛАСТИ КОНТЕНТА
   ========================= */
.stock-section {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.in-stock-content {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  gap: 40px;
}

/* Убираем зазор между панелью табов и контентом вкладок */
.rooma-cart .items-bar {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.rooma-cart .tab-panel {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ==========================================================
   ROOMA Cart: City dropdown (как мини-виджет "Санкт-Петербург >")
   ========================================================== */

/* выравниваем бар */
.rooma-cart .items-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* сам контейнер справа */
.rooma-cart .city-dropdown{
  margin-left:auto;
}

/* кнопка = текст города + стрелка (как мини-виджет) */
.rooma-cart .city-dropdown__button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0px 0px;           /* визуально как у мини-виджета */
  background:transparent;
  border:0;
  outline:0;
  cursor:pointer;
  color:#000;
  font-size:14px;
  line-height:1;
  letter-spacing:0;
  
  text-transform:none;
  -webkit-appearance:none;
  appearance:none;
}

/* подпись города (сам текст) */
.rooma-cart .city-dropdown__content{
  display:inline-block;
  white-space:nowrap;
  max-width:40vw;
  overflow:hidden;
  text-overflow:ellipsis;
   margin: 0px;
}

/* стрелка ">" как в мини-виджете */
.rooma-cart .city-dropdown__icon{
  width:10px;
  height:10px;
  display:inline-block;
  flex:0 0 auto;
  
}

/* ховер/фокус – лёгкое тускнение, как у остальных компактных контролов */
.rooma-cart .city-dropdown__button:hover .city-dropdown__content,
.rooma-cart .city-dropdown__button:hover .city-dropdown__icon{
  opacity:.6;
}
.rooma-cart .city-dropdown__button:focus-visible{
  outline:1px solid rgba(0,0,0,.2);
  outline-offset:2px;
}

/* мобильная подгонка */
@media (max-width: 763px){
  .rooma-cart .city-dropdown__button{
    padding:10px 12px;
    font-size:14px;
    gap:8px;
  }
  .rooma-cart .city-dropdown__icon{
    width:9px; height:9px;
  }
}

/* ===== Mobile: city first (full width), tabs 50/50 ===== */
@media (max-width: 764px) {
    
    .in-stock-content {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  gap: 40px;
}
  /* сам бар — в колонку */
  .items-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;              /* убран отступ между городом и табами */
    margin-top: 0;       /* убран верхний отступ */
    padding-bottom: 0;
  }

  /* РЯД 1: кнопка города — поднять выше табов и растянуть */
  .items-bar .city-dropdown{
    order: -1;          /* показать выше табов */
    width: 100%;
    padding-bottom: 0;
  }
  .items-bar .city-dropdown__button{
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    width: 100%;
    background: #F6F6F6;
    color: #161616; 
    padding: 24px 24px;
    border-radius: 6px;   /* как в макете */
    margin-bottom: 8px;
  }
  .items-bar .city-dropdown__content{ max-width: none; }
    .items-bar .city-dropdown__icon {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;

    /* делаем стрелку светлой */
    filter: brightness(0) saturate(100%);
  }

  /* РЯД 2: табы на всю ширину, по 50% каждый */
  .items-bar .items-tabs{
    order: 0;
    width: 100%;
    gap: 0;                 /* без зазора между кнопками */
    padding-bottom: 0;
    border-bottom: 0px solid rgba(0,0,0,0.12); /* линия под табами */
  }
  
    .rooma-cart .items-bar {
    gap: 0 !important;       /* убираем 20px между городом и табами */
    margin-top: 0 !important; /* убираем верхний отступ */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .items-bar .items-tabs .item-tab{
    margin-top: 0px;
    flex: 1 0 50%;
    text-align: center;
    padding: 20px 0;
    opacity: .5;
  }
  .items-bar .items-tabs .item-tab.is-active{ opacity: 1; }

  /* подчёркивающая полоска у активного таба остаётся */
  .items-bar .items-tabs .item-tab::after{
    bottom: -1px;           /* чтобы сойтись с border-bottom контейнера */
  }
  
}

/* ДОБАВИТЬ в конец файла */
.rooma-cart .items-bar{
  /* оставляем position: sticky как есть (top задаётся выше) */
  will-change: transform;
  transform: translate3d(0, var(--bar-clamp, 0px), 0);
}

/* по умолчанию видно */
.rooma-cart .items-bar .city-dropdown__button {
  transition: transform 0.22s ease, opacity 0.22s ease;
}

/* когда прячем на мобилке */
.rooma-cart.rooma-cart--city-hidden .items-bar .city-dropdown__button {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@media (max-width: 764px) {

  /* Плавное появление/исчезновение контейнера города */
  .items-bar .city-dropdown {
    overflow: hidden;
    transition:
      max-height 0.42s cubic-bezier(.25, .46, .24, 1),
      opacity 0.42s cubic-bezier(.25, .46, .24, 1),
      padding-top 0.42s cubic-bezier(.25, .46, .24, 1),
      padding-bottom 0.42s cubic-bezier(.25, .46, .24, 1),
      margin-top 0.42s cubic-bezier(.25, .46, .24, 1),
      margin-bottom 0.42s cubic-bezier(.25, .46, .24, 1);
    max-height: 160px; /* чуть больше запаса, без скачков */
  }

  /* Когда скрываем */
  .rooma-cart.rooma-cart--city-hidden .items-bar .city-dropdown {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}

.js-cart-alert-delay {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease;
}

.js-cart-alert-delay.is-visible {
  max-height: 200px; /* подстрой под реальную высоту */
  opacity: 1;
}