/* ==========================================================================
   Бонбонери — стили Telegram Mini App (без сборки, чистый CSS)
   ========================================================================== */

/* Manrope — фирменный шрифт: bold для заголовков, light для описаний.
   Файл лежит локально, чтобы приложение не зависело от внешних CDN. */
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope-variable.ttf') format('truetype-variations'),
      url('../fonts/manrope-variable.ttf') format('truetype');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Фирменная палитра: розовый #D4507A, золото #C9A87C, графит #2D2D2D. */
  --bb-rose:#D4507A;
  --bb-gold:#C9A87C;
  --bb-dark:#2D2D2D;
  --bb-cream:#FBF4F6;
  --bb-surface:#FFFFFF;
  --bb-milk:#F6E7EE;
  --bb-choco:#2D2D2D;
  --bb-cocoa:#5A3A49;
  --bb-muted:#A48795;
  --bb-caramel:#C9A87C;
  --bb-rose-soft:#FADCE7;
  --bb-line:#F0DFE7;
  --bb-success:#3E9B6E;
  --bb-danger:#C33A5B;
  --bb-warning:#CE8A3C;
  --bb-radius:18px;
  --bb-radius-sm:12px;
  --bb-shadow:0 8px 24px rgba(45,45,45,.10);
  --bb-shadow-lg:0 18px 48px rgba(212,80,122,.18);
  --bb-font:'Manrope','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --bb-font-display:'Manrope','Segoe UI',system-ui,sans-serif;
}

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body.bb-body{
  margin:0;
  padding:0;
  min-height:100vh;
  /* Фирменный фон приложения. */
  background:#E71F63;
  color:var(--bb-choco);
  font-family:var(--bb-font);
  font-size:16px;
  /* Обычный текст — Manrope Light. */
  font-weight:300;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

body.bb-body--center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}

h1,h2,h3,h4,.bb-font-display{
  font-family:var(--bb-font-display);
  /* Заголовки — Manrope Bold. */
  font-weight:800;
  letter-spacing:.2px;
  margin:0;
  color:var(--bb-choco);
}

p{margin:0;}

button{font-family:inherit;color:inherit;}

a{color:var(--bb-cocoa);}

img{max-width:100%;display:block;}

[hidden]{display:none !important;}

.bb-skip{
  position:absolute;
  left:-9999px;
  top:0;
}
.bb-skip:focus{
  left:8px;
  top:8px;
  z-index:50;
  background:var(--bb-surface);
  padding:10px 14px;
  border-radius:var(--bb-radius-sm);
}

.bb-noscript{
  margin:24px auto;
  max-width:480px;
  padding:16px;
  background:var(--bb-rose-soft);
  border-radius:var(--bb-radius);
  color:var(--bb-choco);
}

/* --------------------------------------------------------------------------
   Каркас
   -------------------------------------------------------------------------- */
.bb-shell{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}

.bb-main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:0 14px 18px;
}

.bb-view{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  animation:bb-fade .18s ease-out;
}

@keyframes bb-fade{
  from{opacity:.4;transform:translateY(4px);}
  to{opacity:1;transform:none;}
}

@media (prefers-reduced-motion:reduce){
  .bb-view{animation:none;}
}

.bb-h2{
  font-size:24px;
  font-weight:800;
  margin:14px 2px 12px;
  /* Заголовок экрана лежит прямо на фирменном фоне. */
  color:#fff;
}

.bb-h3{
  font-size:18px;
  margin:0 0 10px;
}

.bb-h2row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.bb-block{
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-radius);
  box-shadow:var(--bb-shadow);
  padding:14px;
  margin:0 0 14px;
}

.bb-block--muted{
  background:var(--bb-milk);
  border-style:dashed;
  box-shadow:none;
}

.bb-block__title{
  margin:0 0 10px;
  font-family:var(--bb-font-display,inherit);
  font-size:16px;
  font-weight:700;
  color:var(--bb-cocoa);
}

.bb-block code{
  background:var(--bb-milk);
  border:1px solid var(--bb-line);
  border-radius:6px;
  padding:1px 5px;
  font-size:12px;
}

.bb-hint{
  margin:8px 0 0;
  font-size:13px;
  color:var(--bb-muted);
}

.bb-hint--ok{color:var(--bb-success);}

.bb-hint--warn{color:var(--bb-warning);}

/* Блок успешного оформления заказа */
.bb-success{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 14px;
  padding:14px;
  border-radius:var(--bb-radius);
  background:linear-gradient(135deg,#EFF7EC,#F7FBF4);
  border:1px solid #D9E7D2;
  box-shadow:var(--bb-shadow);
}

.bb-success__emoji{font-size:24px;line-height:1.1;}

.bb-success__body{min-width:0;}

.bb-success__title{
  font-family:var(--bb-font-display);
  font-size:17px;
  font-weight:700;
  color:#2F5A2C;
}

.bb-success__text{
  margin-top:3px;
  font-size:13.5px;
  color:var(--bb-cocoa);
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.bb-btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid transparent;
  background:var(--bb-milk);
  color:var(--bb-choco);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease,box-shadow .16s ease,background .16s ease,opacity .16s ease;
  touch-action:manipulation;
}

.bb-btn:active{transform:scale(.98);}

.bb-btn--primary{
  background:linear-gradient(135deg,var(--bb-gold),var(--bb-rose));
  color:#fff;
  box-shadow:0 10px 22px rgba(212,80,122,.28);
}

.bb-btn--primary:hover{box-shadow:var(--bb-shadow-lg);}

.bb-btn--ghost{
  background:var(--bb-surface);
  border-color:var(--bb-line);
  color:var(--bb-cocoa);
}

.bb-btn--wide{
  width:100%;
  margin-top:10px;
}

.bb-btn[disabled],
.bb-btn.is-disabled{
  cursor:not-allowed;
  opacity:.65;
  background:var(--bb-milk);
  color:var(--bb-muted);
  border-color:var(--bb-line);
  box-shadow:none;
  transform:none;
  white-space:normal;
  text-align:center;
}

.bb-iconbtn{
  -webkit-appearance:none;
  appearance:none;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--bb-line);
  background:var(--bb-surface);
  color:var(--bb-cocoa);
  font-size:18px;
  cursor:pointer;
  box-shadow:var(--bb-shadow);
}

.bb-iconbtn:active{transform:scale(.95);}

/* --------------------------------------------------------------------------
   Шапка магазина
   -------------------------------------------------------------------------- */
/* Шапка кондитерской: белым по фирменному фону, без карточки. */
.bb-shophead{
  margin:14px 16px 0;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  color:#fff;
}

.bb-shophead__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

/* Кнопка обновления не должна наезжать на логотип. */
.bb-shophead__top .bb-iconbtn{
  flex:0 0 auto;
  align-self:flex-start;
  width:34px;
  height:34px;
  min-height:34px;
  margin-top:-4px;
  background:transparent;
  border:none;
  box-shadow:none;
  color:rgba(255,255,255,.85);
  font-size:18px;
}

.bb-brand{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
}

/* Белый логотип уже содержит знак, название и подпись. */
.bb-brand__logo{
  display:block;
  width:228px;
  max-width:72%;
  height:auto;
}

.bb-brand__text{display:none;}

.bb-shophead__about{
  margin:12px 0 0;
  font-size:12.5px;
  font-weight:300;
  line-height:1.4;
  color:#fff;
}

.bb-shophead__contacts{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:12px 0 0;
}

/* Телефон и адрес — белые поля с тёмным текстом, как в макете. */
.bb-contact{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border-radius:10px;
  background:#fff;
  border:none;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
}

.bb-contact__label{
  font-size:12.5px;
  font-weight:300;
  color:var(--bb-dark);
}

.bb-contact__value{
  font-size:12.5px;
  font-weight:600;
  color:var(--bb-dark);
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   Баннеры и предупреждения
   -------------------------------------------------------------------------- */
/* Статус магазина — белая плашка с тёмным текстом. */
.bb-banner{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin:12px 0 0;
  padding:11px 12px;
  border-radius:10px;
  border:none;
  background:#fff;
  text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
}

.bb-banner--warn,
.bb-banner--ok{
  background:#fff;
  border:none;
}

.bb-banner__icon{display:none;}

.bb-banner__body{min-width:0;}

.bb-banner__title{
  font-family:var(--bb-font);
  font-size:12.5px;
  font-weight:700;
  color:var(--bb-dark);
}

.bb-banner__text{
  margin-top:3px;
  font-size:11.5px;
  font-weight:300;
  line-height:1.35;
  color:var(--bb-cocoa);
}

.bb-warnings{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:var(--bb-radius);
  background:#FFF6E6;
  border:1px dashed #EBCFA4;
  color:#7A5322;
  font-size:13.5px;
}

.bb-warnings ul{
  margin:0;
  padding-left:18px;
}

.bb-warnings li + li{margin-top:4px;}

.bb-issues{
  margin:0 0 6px;
  padding:12px 14px;
  border-radius:var(--bb-radius);
  background:#FBEDEB;
  border:1px solid #EFC9C3;
  color:#8C2F26;
  font-size:14px;
}

.bb-issues ul{
  margin:6px 0 0;
  padding-left:18px;
}

/* --------------------------------------------------------------------------
   Главная: герой и плитки разделов
   -------------------------------------------------------------------------- */
.bb-homehero{
  padding:16px 2px 12px;
}

/* В макете над заголовком никакой надписи нет. */
.bb-homehero__kicker{display:none;}

.bb-homehero__title{
  margin:0 0 6px;
  font-family:var(--bb-font);
  font-size:19px;
  line-height:1.2;
  font-weight:800;
  color:#fff;
}

.bb-homehero__text{
  margin:0;
  font-size:11.5px;
  font-weight:300;
  line-height:1.4;
  color:rgba(255,255,255,.93);
}

/* Плашка «Вы за столиком» — в том же стиле, что поля и плитки. */
.bb-homehero__table{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 0;
  padding:9px 12px;
  border-radius:10px;
  background:#fff;
  color:var(--bb-dark);
  font-size:12.5px;
  font-weight:600;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
}

.bb-homehero__tabletext{
  flex:1 1 auto;
  min-width:0;
}

.bb-homehero__tableclose{
  -webkit-appearance:none;
  appearance:none;
  flex:0 0 auto;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--bb-rose-soft);
  color:var(--bb-rose);
  font-size:13px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

.bb-homehero__tableclose:active{background:var(--bb-rose);color:#fff;}

.bb-tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  /* Плитки тянутся по высоте — пустого места над нижним меню не остаётся. */
  flex:1 1 auto;
  grid-auto-rows:minmax(74px,1fr);
}

.bb-tile{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  min-height:74px;
  padding:11px 12px;
  border:none;
  border-radius:12px;
  background:#fff;
  color:var(--bb-dark);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .16s ease,box-shadow .16s ease;
}

.bb-tile:active{
  transform:scale(.98);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}

.bb-tile--wide{grid-column:1 / -1;}

/* «Заказать к столику» — тёмная плитка во всю ширину с QR-кодом. */
.bb-tile--qr{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:center;
  gap:12px;
  min-height:68px;
  padding:11px 12px;
  border-radius:12px;
  background:#1E1E1E;
  color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}

.bb-tile__qr{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:8px;
  background:#fff;
  padding:2px;
}

.bb-tile__icon{
  font-size:22px;
  line-height:1;
}

.bb-tile__body{
  display:flex;
  flex-direction:column;
  gap:3px;
  position:relative;
  z-index:1;
}

.bb-tile__title{
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

.bb-tile__text{
  font-size:11px;
  font-weight:300;
  color:var(--bb-muted);
  line-height:1.3;
}

.bb-tile--qr .bb-tile__title{font-size:13px;}

.bb-tile--qr .bb-tile__text{color:rgba(255,255,255,.7);}

/* Плитки с фотографией: картинка целиком, по центру правого края. */
.bb-tile--photo .bb-tile__body{max-width:58%;}

.bb-tile--photo .bb-tile__photo{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:56%;
  max-width:150px;
  height:auto;
  pointer-events:none;
}

.bb-tile--wide.bb-tile--photo{
  min-height:82px;
  justify-content:center;
}

.bb-tile--wide.bb-tile--photo .bb-tile__body{max-width:58%;}

.bb-tile--wide.bb-tile--photo .bb-tile__photo{
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:36%;
  max-width:180px;
}

/* Счётчик заказов, статус которых изменился с прошлого визита. */
.bb-tile__badge{
  position:absolute;
  top:10px;
  right:10px;
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 6px;
  border-radius:999px;
  background:var(--bb-rose);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
}

/* Режим «за столиком»: заказ приносят к столу в кондитерской. */
.bb-block--table{
  background:linear-gradient(135deg,#FDF1E4,#FBE1EA);
  border-color:#F0C7D6;
}

.bb-tablemode{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.bb-tablemode__icon{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  font-size:24px;
  border-radius:14px;
  background:var(--bb-surface);
}

.bb-tablemode__title{
  margin:0 0 4px;
  font-size:16px;
  font-weight:700;
  color:var(--bb-rose);
}

.bb-tablemode .bb-hint{margin:0;}

/* Строка «заказ из кондитерской …» в корзине со ссылкой на смену. */
.bb-hint--link{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.bb-linkbtn{
  -webkit-appearance:none;
  appearance:none;
  padding:0;
  border:none;
  background:none;
  color:var(--bb-rose);
  font:inherit;
  font-weight:600;
  text-decoration:underline;
  cursor:pointer;
}

/* Превью фотографий-референсов в заявке на заказ. */
.bb-customphotos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.bb-customphoto{
  position:relative;
  width:84px;
  height:84px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--bb-line);
}

.bb-customphoto img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bb-customphoto__remove{
  position:absolute;
  top:4px;
  right:4px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:none;
  border-radius:50%;
  background:rgba(45,45,45,.72);
  color:#fff;
  font-size:12px;
  line-height:1;
  cursor:pointer;
}

/* --------------------------------------------------------------------------
   Категории (чипсы)
   -------------------------------------------------------------------------- */
.bb-cats{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 2px 10px;
  margin:0 -14px 4px;
  padding-left:14px;
  padding-right:14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.bb-cats::-webkit-scrollbar{display:none;}

.bb-chip{
  -webkit-appearance:none;
  appearance:none;
  flex:0 0 auto;
  min-height:40px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--bb-line);
  background:var(--bb-surface);
  color:var(--bb-cocoa);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}

.bb-chip.is-active{
  background:linear-gradient(135deg,var(--bb-gold),var(--bb-rose));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px rgba(212,80,122,.28);
}

/* Вторая строка — подкатегории выбранной категории. */
.bb-cats--sub{
  padding-top:0;
  padding-bottom:12px;
  margin-top:-4px;
}

.bb-chip--sub{
  min-height:34px;
  padding:6px 13px;
  font-size:13px;
  font-weight:500;
  background:var(--bb-cream,#FFF9F3);
  border-style:dashed;
}

.bb-chip--sub.is-active{
  background:var(--bb-surface);
  border-style:solid;
  border-color:var(--bb-caramel);
  color:var(--bb-caramel);
  box-shadow:none;
}

/* --------------------------------------------------------------------------
   Список товаров
   -------------------------------------------------------------------------- */
.bb-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bb-card{
  display:flex;
  gap:12px;
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-radius);
  box-shadow:var(--bb-shadow);
  padding:12px;
}

.bb-card--disabled{background:#FFFDFB;}

.bb-card__media{
  flex:0 0 auto;
  width:86px;
  height:86px;
  border-radius:var(--bb-radius-sm);
  overflow:hidden;
  background:linear-gradient(135deg,var(--bb-milk),var(--bb-rose-soft));
  display:grid;
  place-items:center;
  border:1px solid var(--bb-line);
}

/* Фото в карточке заполняет ячейку целиком, без полей. */
.bb-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  padding:0;
}

.bb-card__fallback{font-size:34px;}

.bb-card__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.bb-card__head{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

/* Тап по карточке открывает окно товара с полной информацией. */
.bb-card{cursor:pointer;}

.bb-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.bb-card__tags .bb-tag{margin-left:0;}

.bb-card__emoji{
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-size:24px;
  border-radius:12px;
  background:var(--bb-rose-soft);
}

.bb-card--location,
.bb-card--gift{
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}

.bb-card--location .bb-card__head,
.bb-card--gift .bb-card__head{
  align-items:center;
}

.bb-card__title{
  font-size:16.5px;
  line-height:1.25;
  flex:1 1 auto;
  overflow-wrap:anywhere;
}

.bb-card__desc{
  font-size:13.5px;
  color:var(--bb-cocoa);
}

/* В свёрнутой карточке описание занимает не больше двух строк. */
.bb-card__desc--clamp{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.bb-card__notice{
  font-size:12.5px;
  color:var(--bb-warning);
  background:#FFF6E6;
  border-radius:10px;
  padding:6px 9px;
}

.bb-card__nutri{
  font-size:12.5px;
  color:var(--bb-muted);
}

.bb-card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  flex-wrap:wrap;
}

.bb-card__price{
  font-family:var(--bb-font-display);
  font-size:17px;
  font-weight:700;
}

.bb-card__action{
  flex:0 1 auto;
  min-width:132px;
  white-space:normal;
  text-align:center;
}

.bb-tag{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:700;
  padding:4px 9px;
  border-radius:999px;
  background:var(--bb-rose-soft);
  color:#9C4A52;
  white-space:nowrap;
}

.bb-tag--morning{background:#FFF3DA;color:#8A6512;}

.bb-tag--variants{background:#EFE7FB;color:#5C4A8A;}

.bb-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:5px 11px;
  border-radius:999px;
  background:var(--bb-milk);
  color:var(--bb-cocoa);
}

.bb-badge--mock{background:#FFF3DA;color:#8A6512;}

/* --------------------------------------------------------------------------
   Пустые состояния
   -------------------------------------------------------------------------- */
.bb-empty{
  text-align:center;
  padding:32px 18px;
  background:var(--bb-surface);
  border:1px dashed var(--bb-line);
  border-radius:var(--bb-radius);
  box-shadow:var(--bb-shadow);
}

.bb-empty__emoji{
  font-size:38px;
  display:block;
  margin-bottom:8px;
}

.bb-empty__title{
  font-family:var(--bb-font-display);
  font-size:19px;
  font-weight:700;
}

.bb-empty__text{
  margin:6px 0 14px;
  font-size:14px;
  color:var(--bb-muted);
}

/* --------------------------------------------------------------------------
   Корзина
   -------------------------------------------------------------------------- */
.bb-cartlines{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}

.bb-cartline{
  display:flex;
  gap:10px;
  align-items:center;
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-radius);
  box-shadow:var(--bb-shadow);
  padding:12px;
}

.bb-cartline--stale{
  background:#FFFDF7;
  border-style:dashed;
}

/* Миниатюра позиции: квадрат 56×56 слева от названия. */
.bb-cartline__media{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:var(--bb-radius-sm);
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--bb-milk),var(--bb-rose-soft));
  border:1px solid var(--bb-line);
}

.bb-cartline__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bb-cartline__fallback{font-size:26px;line-height:1;}

.bb-cartline__info{
  flex:1 1 auto;
  min-width:0;
}

.bb-cartline__title{
  font-size:15px;
  font-weight:600;
  overflow-wrap:anywhere;
}

.bb-cartline__meta{
  margin-top:2px;
  font-size:12.5px;
  color:var(--bb-muted);
}

.bb-cartline__variant{
  margin-top:2px;
  font-size:12.5px;
  font-weight:600;
  color:var(--bb-cocoa);
  overflow-wrap:anywhere;
}

.bb-cartline__meta--warn{color:var(--bb-warning);}

.bb-cartline__controls{
  flex:0 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.bb-qty{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:var(--bb-cream);
  border:1px solid var(--bb-line);
  border-radius:999px;
  padding:2px;
}

.bb-qty__btn{
  -webkit-appearance:none;
  appearance:none;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:none;
  border-radius:50%;
  background:var(--bb-surface);
  color:var(--bb-choco);
  font-size:19px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(59,38,33,.08);
}

.bb-qty__btn:active{transform:scale(.94);}

.bb-qty__value{
  min-width:30px;
  text-align:center;
  font-weight:700;
  font-size:15px;
}

.bb-cartline__total{
  font-family:var(--bb-font-display);
  font-weight:700;
  font-size:15.5px;
  white-space:nowrap;
}

.bb-linkbtn{
  -webkit-appearance:none;
  appearance:none;
  border:none;
  background:none;
  color:var(--bb-danger);
  font-size:13px;
  font-weight:600;
  padding:6px 4px;
  min-height:32px;
  cursor:pointer;
  text-decoration:underline;
}

/* Переключатель способа получения */
.bb-switch{
  display:flex;
  gap:6px;
  padding:5px;
  background:var(--bb-cream);
  border:1px solid var(--bb-line);
  border-radius:999px;
}

.bb-switch__btn{
  -webkit-appearance:none;
  appearance:none;
  flex:1 1 0;
  min-height:44px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--bb-cocoa);
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}

.bb-switch__btn.is-active{
  background:var(--bb-surface);
  color:var(--bb-choco);
  box-shadow:var(--bb-shadow);
}

.bb-switch__btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
}

/* Поля */
.bb-field{
  display:block;
  margin-bottom:12px;
}

.bb-field:last-of-type{margin-bottom:4px;}

.bb-field__label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--bb-cocoa);
  margin-bottom:6px;
}

.bb-field__label em{
  color:var(--bb-danger);
  font-style:normal;
}

.bb-input{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-height:46px;
  padding:12px 14px;
  border-radius:var(--bb-radius-sm);
  border:1px solid var(--bb-line);
  background:var(--bb-cream);
  color:var(--bb-choco);
  font-family:var(--bb-font);
  font-size:16px;
  resize:vertical;
}

.bb-input:focus{
  outline:none;
  border-color:var(--bb-caramel);
  background:var(--bb-surface);
  box-shadow:0 0 0 3px rgba(201,138,91,.16);
}

textarea.bb-input{line-height:1.4;}

/* Дата и время получения */
/* Клиент сам ставит дату в календаре: поле на всю ширину, ничего не вылезает. */
.bb-input--date{
  /* Возвращаем родной вид: в WebKit сброс appearance убирает календарь. */
  -webkit-appearance:auto;
  appearance:auto;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:48px;
  padding:12px;
  font-weight:600;
  cursor:pointer;
}

.bb-input--date::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.7;
}

.bb-input--time{
  max-width:190px;
  font-weight:600;
  font-size:18px;
}

.bb-input[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Точки самовывоза */
.bb-points{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.bb-point{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  text-align:left;
  padding:12px 14px;
  border-radius:var(--bb-radius-sm);
  border:1px solid var(--bb-line);
  background:var(--bb-surface);
  color:var(--bb-choco);
  font-family:var(--bb-font);
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease;
}

.bb-point.is-active{
  border-color:var(--bb-caramel);
  box-shadow:0 0 0 3px rgba(201,138,91,.16);
}

.bb-point__title{
  display:block;
  font-size:14.5px;
  font-weight:700;
  margin-bottom:2px;
}

.bb-point.is-active .bb-point__title{color:var(--bb-caramel);}

.bb-point__address{
  display:block;
  font-size:13px;
  color:var(--bb-muted);
}

/* Итоги */
.bb-summary{
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-radius);
  box-shadow:var(--bb-shadow);
  padding:14px;
  margin:0 0 12px;
}

.bb-summary__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:14.5px;
  color:var(--bb-cocoa);
  padding:5px 0;
}

.bb-summary__row--total{
  border-top:1px dashed var(--bb-line);
  margin-top:6px;
  padding-top:10px;
  font-family:var(--bb-font-display);
  font-size:19px;
  font-weight:700;
  color:var(--bb-choco);
}

/* --------------------------------------------------------------------------
   Мои заказы
   -------------------------------------------------------------------------- */
.bb-order{
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-radius);
  box-shadow:var(--bb-shadow);
  overflow:hidden;
}

.bb-order--rejected{border-color:#EFC9C3;}

.bb-order__head{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.bb-order__headmain{
  flex:1 1 auto;
  min-width:0;
}

.bb-order__number{
  font-family:var(--bb-font-display);
  font-size:17px;
  font-weight:700;
}

.bb-order__when{
  margin-top:2px;
  font-size:12.5px;
  color:var(--bb-muted);
}

.bb-order__headright{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.bb-order__total{
  font-family:var(--bb-font-display);
  font-size:16px;
  font-weight:700;
}

.bb-order__chev{
  font-size:12px;
  color:var(--bb-muted);
}

.bb-status{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:var(--bb-milk);
  color:var(--bb-cocoa);
  white-space:nowrap;
}

.bb-status--awaiting_admin{background:#FFF3DA;color:#8A6512;}
.bb-status--awaiting_payment{background:#FDF0DC;color:#95631A;}
.bb-status--paid{background:#E7F2E3;color:#3C6B39;}
.bb-status--completed{background:#E7F2E3;color:#3C6B39;}
.bb-status--payment_failed{background:#FBEDEB;color:#8C2F26;}
.bb-status--rejected{background:#FBEDEB;color:#8C2F26;}
.bb-status--expired{background:#F1ECE8;color:#7A6558;}
.bb-status--cancelled{background:#F1ECE8;color:#7A6558;}
.bb-status--pos_failed{background:#FFF3DA;color:#95631A;}

.bb-order__body{
  padding:0 14px 14px;
  border-top:1px dashed var(--bb-line);
}

.bb-order__rows{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 0;
}

.bb-order__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  font-size:13.5px;
}

.bb-order__row > span:first-child{color:var(--bb-muted);}

.bb-order__row > span:last-child{
  text-align:right;
  font-weight:600;
  overflow-wrap:anywhere;
}

.bb-order__items{
  list-style:none;
  margin:0 0 12px;
  padding:12px 0 0;
  border-top:1px dashed var(--bb-line);
  font-size:13.5px;
}

.bb-order__items li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:4px 0;
}

.bb-order__items li span:last-child{
  white-space:nowrap;
  font-weight:600;
}

.bb-order__itemnote{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--bb-muted);
}

.bb-order__reject{
  margin:0 0 12px;
  padding:12px;
  border-radius:var(--bb-radius-sm);
  background:#FBEDEB;
  border:1px solid #EFC9C3;
  color:#8C2F26;
  font-size:13.5px;
}

.bb-order__reject strong{font-family:var(--bb-font-display);}

.bb-order__events{
  margin:0 0 12px;
  padding:12px 0 0;
  border-top:1px dashed var(--bb-line);
  font-size:12.5px;
  color:var(--bb-muted);
}

.bb-order__events ul{
  margin:6px 0 0;
  padding-left:18px;
}

.bb-order__events li + li{margin-top:4px;}

.bb-order__actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* --------------------------------------------------------------------------
   Нижняя навигация
   -------------------------------------------------------------------------- */
.bb-nav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:480px;
  display:flex;
  gap:4px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--bb-line);
  z-index:20;
}

.bb-nav__btn{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  flex:1 1 0;
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:none;
  border-radius:var(--bb-radius-sm);
  background:transparent;
  color:var(--bb-muted);
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}

.bb-nav__btn.is-active{
  background:var(--bb-rose-soft);
  color:var(--bb-rose);
  box-shadow:none;
}

.bb-nav__icon{font-size:20px;line-height:1;}

.bb-nav__badge{
  position:absolute;
  top:6px;
  right:calc(50% - 26px);
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:var(--bb-danger);
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:grid;
  place-items:center;
}

/* --------------------------------------------------------------------------
   Уведомления
   -------------------------------------------------------------------------- */
.bb-toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(88px + env(safe-area-inset-bottom));
  z-index:30;
  max-width:min(440px,calc(100vw - 32px));
  padding:12px 18px;
  border-radius:999px;
  background:var(--bb-choco);
  color:var(--bb-cream);
  font-size:14px;
  font-weight:600;
  box-shadow:var(--bb-shadow-lg);
  animation:bb-toast-in .2s ease-out;
}

.bb-toast--danger{background:var(--bb-danger);}
.bb-toast--success{background:var(--bb-success);}

@keyframes bb-toast-in{
  from{opacity:0;transform:translate(-50%,8px);}
  to{opacity:1;transform:translate(-50%,0);}
}

@media (prefers-reduced-motion:reduce){
  .bb-toast{animation:none;}
}

.bb-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:40px 16px;
  color:var(--bb-muted);
  font-size:14px;
}

.bb-spinner{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid var(--bb-line);
  border-top-color:var(--bb-caramel);
  animation:bb-spin .8s linear infinite;
}

@keyframes bb-spin{to{transform:rotate(360deg);}}

/* --------------------------------------------------------------------------
   Страницы оплаты
   -------------------------------------------------------------------------- */
.bb-result{
  width:100%;
  max-width:440px;
}

.bb-result__card,
.bb-pay{
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:26px;
  box-shadow:var(--bb-shadow-lg);
  padding:26px 20px;
  text-align:center;
}

.bb-result__card--ok{border-color:#D9E7D2;}
.bb-result__card--fail{border-color:#EFC9C3;}

.bb-result__emoji{
  font-size:52px;
  line-height:1;
  margin-bottom:10px;
}

.bb-result__title{
  font-size:24px;
  line-height:1.2;
}

.bb-result__text{
  margin:10px 0 16px;
  font-size:14.5px;
  color:var(--bb-cocoa);
}

.bb-result__actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.bb-result__note{
  margin-top:18px;
  font-size:12.5px;
  color:var(--bb-muted);
}

.bb-pay{text-align:left;}

.bb-pay__head{
  text-align:center;
  margin-bottom:16px;
}

.bb-pay__brand{
  font-family:var(--bb-font-display);
  font-size:15px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--bb-caramel);
}

.bb-pay__title{
  font-size:26px;
  margin:4px 0 10px;
}

.bb-pay__card{
  background:var(--bb-cream);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-radius);
  padding:14px;
  margin-bottom:12px;
  text-align:left;
}

.bb-pay__subtitle{
  font-size:16px;
  margin-bottom:8px;
}

.bb-pay__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  font-size:13.5px;
  padding:4px 0;
}

.bb-pay__key{color:var(--bb-muted);}

.bb-pay__val{
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere;
}

.bb-pay__items{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13.5px;
}

.bb-pay__item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:5px 0;
  border-bottom:1px dashed var(--bb-line);
}

.bb-pay__item:last-child{border-bottom:none;}

.bb-pay__morning{
  display:inline-block;
  font-size:11px;
  color:#8A6512;
  background:#FFF3DA;
  border-radius:999px;
  padding:2px 8px;
  margin-left:4px;
}

.bb-pay__item-price{
  white-space:nowrap;
  font-weight:600;
}

.bb-pay__total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 4px;
  font-size:14px;
  color:var(--bb-cocoa);
}

.bb-pay__total strong{
  font-family:var(--bb-font-display);
  font-size:22px;
  color:var(--bb-choco);
}

.bb-pay__actions{margin-bottom:8px;}

/* --------------------------------------------------------------------------
   Нижний лист: выбор варианта и вкусов
   -------------------------------------------------------------------------- */
body.bb-body--sheet{overflow:hidden;}

.bb-sheet{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.bb-sheet__backdrop{
  position:absolute;
  inset:0;
  background:rgba(59,38,33,.44);
  animation:bb-fade .18s ease-out;
}

.bb-sheet__panel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:480px;
  max-height:min(92vh,780px);
  background:var(--bb-surface);
  border-radius:22px 22px 0 0;
  box-shadow:var(--bb-shadow-lg);
  animation:bb-sheet-in .22s ease-out;
}

@keyframes bb-sheet-in{
  from{opacity:.5;transform:translateY(26px);}
  to{opacity:1;transform:none;}
}

.bb-sheet__close{
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--bb-line);
  background:rgba(255,255,255,.92);
  color:var(--bb-cocoa);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--bb-shadow);
}

.bb-sheet__close:active{transform:scale(.95);}

.bb-sheet__scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:16px 16px 10px;
}

.bb-sheet__media{
  width:100%;
  height:auto;
  margin-bottom:12px;
  border-radius:var(--bb-radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--bb-milk),var(--bb-rose-soft));
  border:1px solid var(--bb-line);
}

/* Фото товара целиком и крупно: высота по пропорциям картинки. */
.bb-sheet__media img{
  display:block;
  width:100%;
  height:auto;
  max-height:320px;
  object-fit:contain;
}

.bb-sheet__emoji{font-size:56px;line-height:1;}

.bb-sheet__title{
  font-size:21px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.bb-sheet__desc{
  margin-top:6px;
  font-size:14px;
  color:var(--bb-cocoa);
}

.bb-sheet__composition{
  margin-top:4px;
  font-size:13px;
  color:var(--bb-muted);
}

.bb-sheet__nutri{
  margin-top:8px;
  padding:8px 10px;
  border-radius:var(--bb-radius-sm);
  border:1px dashed var(--bb-line);
  background:var(--bb-cream);
  font-size:13px;
  color:var(--bb-cocoa);
}

.bb-sheet__group{margin-top:16px;}

.bb-sheet__label{
  display:block;
  margin-bottom:8px;
  font-size:12.5px;
  font-weight:700;
  color:var(--bb-cocoa);
  text-transform:uppercase;
  letter-spacing:.6px;
}

.bb-sheet__variants{
  display:flex;
  gap:8px;
}

.bb-sheet__variant{
  -webkit-appearance:none;
  appearance:none;
  flex:1 1 0;
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px 10px;
  border-radius:var(--bb-radius-sm);
  border:1px solid var(--bb-line);
  background:var(--bb-cream);
  color:var(--bb-cocoa);
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}

.bb-sheet__variant.is-active{
  background:linear-gradient(135deg,var(--bb-caramel),var(--bb-rose));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px rgba(201,138,91,.28);
}

.bb-sheet__variant-title{font-size:14.5px;font-weight:700;}

.bb-sheet__variant-price{font-size:13px;font-weight:600;opacity:.92;}

.bb-sheet__qtyrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.bb-sheet__qtyrow .bb-sheet__label{margin-bottom:0;}

.bb-sheet__flavors{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.bb-flavor{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--bb-line);
  background:var(--bb-surface);
  color:var(--bb-cocoa);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}

.bb-flavor.is-active{
  background:var(--bb-rose-soft);
  border-color:var(--bb-rose);
  color:#8E3D46;
}

.bb-flavor__mark{font-size:13px;line-height:1;}

.bb-flavor__price{
  font-size:12.5px;
  font-weight:600;
  color:var(--bb-muted);
}

.bb-flavor.is-active .bb-flavor__price{color:#8E3D46;}

.bb-sheet__sum{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:16px;
  padding:10px 12px;
  border-radius:var(--bb-radius-sm);
  border:1px solid var(--bb-line);
  background:var(--bb-cream);
  font-family:var(--bb-font-display);
  font-size:18px;
  font-weight:700;
}

.bb-sheet__sum-note{
  margin-top:4px;
  font-size:12.5px;
  color:var(--bb-muted);
  text-align:right;
}

.bb-sheet__footer{
  flex:0 0 auto;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--bb-line);
  background:var(--bb-surface);
}

.bb-sheet__submit{white-space:normal;text-align:center;}

@media (prefers-reduced-motion:reduce){
  .bb-sheet__panel,.bb-sheet__backdrop{animation:none;}
}

/* --------------------------------------------------------------------------
   Мелкие экраны
   -------------------------------------------------------------------------- */
@media (max-width:360px){
  .bb-brand__title{font-size:26px;}
  .bb-card{flex-direction:column;}
  .bb-card__media{width:100%;height:132px;}
  .bb-card__action{min-width:0;width:100%;}
  /* Миниатюра остаётся рядом с названием, а счётчик уходит на вторую строку. */
  .bb-cartline{flex-wrap:wrap;}
  .bb-cartline__info{flex:1 1 calc(100% - 66px);}
  .bb-cartline__controls{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }
  .bb-nav__label{font-size:10.5px;}
  .bb-sheet__panel{max-height:94vh;}
  .bb-sheet__media{height:140px;}
  .bb-sheet__variants{flex-direction:column;}
}

/* --------------------------------------------------------------------------
   Адрес доставки по отдельным полям
   -------------------------------------------------------------------------- */
.bb-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 10px;
  min-width:0;
}

.bb-field-row > .bb-field{min-width:0;}

.bb-field--suggest{position:relative;}

.bb-input--invalid{
  border-color:var(--bb-danger);
  background:#FFF6F4;
  box-shadow:0 0 0 3px rgba(192,69,58,.14);
}

/* Подсказки улиц */
.bb-suggest{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:20;
  margin-top:4px;
  max-height:224px;
  overflow-y:auto;
  padding:6px;
  border-radius:var(--bb-radius-sm);
  border:1px solid var(--bb-line);
  background:var(--bb-surface);
  box-shadow:var(--bb-shadow-lg);
}

.bb-suggest__item{
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--bb-choco);
  font-family:var(--bb-font);
  font-size:15px;
  text-align:left;
  cursor:pointer;
}

.bb-suggest__item.is-active,
.bb-suggest__item:hover{background:var(--bb-rose-soft);}

.bb-suggest__house{
  flex:0 0 auto;
  font-size:12.5px;
  font-weight:600;
  color:var(--bb-muted);
}

/* Фильтры истории заказов */
.bb-cats--filters{padding-bottom:8px;}

.bb-chip__count{
  display:inline-block;
  min-width:20px;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--bb-milk);
  color:var(--bb-cocoa);
  font-size:12px;
  font-weight:700;
}

.bb-chip.is-active .bb-chip__count{
  background:rgba(255,255,255,.3);
  color:#fff;
}

/* Вход через Яндекс и ВКонтакте */
.bb-auth{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.bb-auth .bb-btn--wide{margin-top:0;}

.bb-auth__link{width:100%;}

/* ==========================================================================
   Единый стиль внутренних экранов под главную:
   белые карточки без рамок, радиус 12 px, мягкая тень, Manrope.
   ========================================================================== */
.bb-block,
.bb-card,
.bb-empty{
  border:none;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.bb-block{padding:14px;}

.bb-h3{
  font-family:var(--bb-font);
  font-size:16px;
  font-weight:700;
  color:var(--bb-dark);
  margin:0 0 10px;
}

.bb-h2row .bb-h3{margin:0;}

.bb-field__label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--bb-cocoa);
}

/* Поля ввода — как поля телефона и адреса на главной. */
.bb-input,
.bb-field input,
.bb-field textarea,
.bb-field select,
.bb-textarea{
  background:#fff;
  border:1px solid var(--bb-line);
  border-radius:10px;
  font-family:var(--bb-font);
  font-weight:400;
}

.bb-input:focus,
.bb-field input:focus,
.bb-field textarea:focus,
.bb-field select:focus{
  border-color:var(--bb-rose);
  outline:none;
}

/* Чипы категорий — белые плашки с тенью, активный — фирменный розовый. */
.bb-chip{
  border:none;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
  font-family:var(--bb-font);
  font-weight:600;
}

.bb-chip.is-active{
  background:var(--bb-rose);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}

/* Точки самовывоза и прочие карточки-кнопки. */
.bb-point{
  border:none;
  border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}

/* Главная кнопка — чистый фирменный розовый, как акценты на главной. */
.bb-btn--primary{
  background:var(--bb-rose);
  box-shadow:0 6px 16px rgba(212,80,122,.30);
}

.bb-point.is-active{
  box-shadow:0 0 0 2px var(--bb-rose) inset, 0 3px 10px rgba(0,0,0,.16);
}

.bb-btn{border-radius:10px;}

/* Нижняя навигация — белая, активная вкладка розовая. */
.bb-nav__btn.is-active{
  background:var(--bb-rose-soft);
  color:var(--bb-rose);
}

@media (max-width:360px){
  .bb-field-row{grid-template-columns:1fr;}
}

/* --------------------------------------------------------------------------
   Сканер QR-кода со столика (камера телефона)
   -------------------------------------------------------------------------- */
.bb-scanner{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,8,11,.94);
}

.bb-scanner__panel{
  position:relative;
  width:100%;
  max-width:420px;
  padding:18px 16px 16px;
  border-radius:16px;
  background:#1E1E1E;
  color:#fff;
  text-align:center;
}

.bb-scanner__close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.bb-scanner__title{
  margin:0 0 12px;
  font-family:var(--bb-font);
  font-size:15px;
  font-weight:700;
}

.bb-scanner__frame{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  max-height:58vh;
  border-radius:12px;
  overflow:hidden;
  background:#000;
}

.bb-scanner__frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.bb-scanner__sight{
  position:absolute;
  inset:16%;
  border:2px solid #fff;
  border-radius:10px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.28);
  pointer-events:none;
}

.bb-scanner__hint{
  margin:12px 0;
  font-size:12.5px;
  line-height:1.4;
  color:rgba(255,255,255,.78);
}

.bb-scanner .bb-btn--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.42);
  background:transparent;
}

/* --------------------------------------------------------------------------
   Конструктор торта на заказ
   -------------------------------------------------------------------------- */
/* Подсказки прямо на фирменном фоне должны быть светлыми. */
.bb-view > .bb-hint{
  color:rgba(255,255,255,.88);
  font-weight:300;
}

.bb-cake{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:14px;
}

.bb-cake__step{
  position:relative;
  padding:14px 14px 12px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.bb-cake__num{
  position:absolute;
  top:12px;
  right:14px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--bb-rose-soft);
  color:var(--bb-rose);
  font-size:11px;
  font-weight:700;
  margin:0;
}

.bb-cake__label{
  margin:0 0 10px;
  font-family:var(--bb-font);
  font-size:15px;
  font-weight:700;
  color:var(--bb-dark);
}

.bb-cake__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.bb-cake__chips--grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.bb-cake__chip{
  -webkit-appearance:none;
  appearance:none;
  padding:9px 14px;
  border:1px solid var(--bb-line);
  border-radius:999px;
  background:#fff;
  color:var(--bb-dark);
  font-family:var(--bb-font);
  font-size:12.5px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}

.bb-cake__chip.is-active{
  background:var(--bb-rose);
  border-color:var(--bb-rose);
  color:#fff;
}

.bb-cake__chip--big{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:10px 12px;
  border-radius:12px;
  text-align:left;
}

.bb-cake__chip--big b{font-size:14px;}

.bb-cake__chip--big span{
  font-size:11px;
  font-weight:300;
  color:var(--bb-muted);
}

.bb-cake__chip--big.is-active span{color:rgba(255,255,255,.88);}

/* Свой вес */
.bb-cake__ownweight{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.bb-cake__ownweight .bb-input{flex:1 1 auto;}

.bb-cake__ownhint{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:300;
  color:var(--bb-muted);
}

/* Итог конструктора */
.bb-cake__summary{
  margin-bottom:14px;
  padding:14px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.bb-cake__sumtitle{
  margin:0 0 8px;
  font-family:var(--bb-font);
  font-size:15px;
  font-weight:700;
  color:var(--bb-dark);
}

.bb-cake__sumrow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:0 0 5px;
  font-size:12.5px;
  font-weight:300;
  color:var(--bb-cocoa);
}

.bb-cake__sumrow b{font-weight:700;color:var(--bb-dark);}

.bb-cake__sumnote{
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px dashed var(--bb-line);
  font-size:12.5px;
  font-weight:600;
  color:var(--bb-rose);
}

/* Вход по телефону */
.bb-phoneauth{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--bb-line);
}

.bb-phoneauth__label{
  margin:0 0 8px;
  font-size:13px;
  font-weight:700;
  color:var(--bb-dark);
}

.bb-phoneauth__row{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}

.bb-phoneauth__row .bb-input{flex:1 1 auto;min-width:0;}

.bb-phoneauth__row .bb-btn{
  flex:0 0 auto;
  padding:0 14px;
  white-space:nowrap;
  font-size:13px;
}

.bb-phoneauth__hint{
  margin:0 0 8px;
  font-size:12px;
  color:var(--bb-cocoa);
}

.bb-phoneauth__hint.is-error{color:var(--bb-danger);}

/* Предпросмотр торта в конструкторе */
.bb-cakepreview{
  margin:0 0 14px;
  padding:12px 14px 6px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  text-align:center;
}

.bb-cakepreview__label{
  margin:0 0 6px;
  font-family:var(--bb-font);
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--bb-rose);
}

.bb-cakepreview__stage{display:block;}

.bb-cakepreview__stage svg{display:block;margin:0 auto;}

/* Аллергены */
.bb-cats--allergens{margin-top:-4px;}

.bb-sheet__allergens{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:8px 0 0;
  font-size:12px;
  font-weight:600;
  color:var(--bb-cocoa);
}

.bb-allergen{
  padding:3px 9px;
  border-radius:999px;
  background:#FBEDEB;
  color:#9B3A3A;
  font-size:11.5px;
  font-weight:700;
}

/* Свой вариант начинки и оформления */
.bb-cake__custom{
  margin-top:10px;
  font-size:13px;
}

/* Объём и блик у предпросмотра торта */
.bb-cakepreview{
  position:relative;
  overflow:hidden;
}

.bb-cakepreview__stage{
  perspective:700px;
}

.bb-cakepreview__stage svg{
  transform-origin:50% 82%;
  animation:bb-cake-sway 7s ease-in-out infinite;
  will-change:transform;
}

@keyframes bb-cake-sway{
  0%,100%{transform:rotateX(6deg) rotateY(-9deg) translateY(0);}
  50%{transform:rotateX(2deg) rotateY(9deg) translateY(-3px);}
}

/* Блик, скользящий по крему */
.bb-cakepreview__stage::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 58%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  animation:bb-cake-shine 5.5s linear infinite;
}

@keyframes bb-cake-shine{
  from{background-position:160% 0;}
  to{background-position:-60% 0;}
}

/* Объёмный торт из сегментов (CSS 3D) */
.bb-cake3d{
  display:grid;
  place-items:center;
  height:215px;
  perspective:900px;
}

.bb-cake3d__tilt{
  position:relative;
  width:240px;
  height:190px;
  transform-style:preserve-3d;
  transform:rotateX(-14deg);
}

.bb-cake3d__spin{
  position:absolute;
  left:50%;
  bottom:38px;
  width:0;
  height:0;
  transform-style:preserve-3d;
  animation:bb-cake-spin 20s linear infinite;
}

.bb-cake3d__tier{
  position:absolute;
  left:0;
  width:0;
  transform-style:preserve-3d;
}

.bb-cake3d__seg{
  position:absolute;
  left:0;
  top:0;
  display:block;
  backface-visibility:hidden;
}

.bb-cake3d__top{
  position:absolute;
  left:0;
  top:0;
  display:block;
  border-radius:50%;
  -webkit-transform:rotateX(90deg);
  transform:rotateX(90deg);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

.bb-cake3d__plate{
  position:absolute;
  left:0;
  bottom:0;
  width:236px;
  height:236px;
  margin-left:-118px;
  margin-bottom:-118px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#ffffff 55%,#efe2e8 100%);
  box-shadow:0 10px 24px rgba(80,30,50,.16);
  transform:rotateX(90deg);
}

.bb-cake3d__berry{
  position:absolute;
  display:block;
  border-radius:50%;
}

.bb-cake3d__caption{
  margin:6px 0 0;
  font-family:var(--bb-font);
  font-size:12px;
  font-weight:700;
  color:var(--bb-rose);
  text-align:center;
}

/* Надпись на верхушке объёмного торта */
.bb-cake3d__label{
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  transform:translateY(-50%);
  text-align:center;
  font-family:var(--bb-font);
  font-size:12px;
  font-weight:800;
  color:#8A4A5E;
  text-shadow:0 0 3px rgba(255,255,255,.9);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 10px;
  box-sizing:border-box;
}

/* Шрифт и цвет надписи */
.bb-cake__sublabel{
  margin:12px 0 6px;
  font-size:12px;
  font-weight:700;
  color:var(--bb-cocoa);
}

.bb-cake__chip--color{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.bb-cake__chip--color i{
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  display:inline-block;
}

/* Мобильный Safari: без префиксов 3D-анимация не запускается */
.bb-cake3d{-webkit-perspective:900px;}

.bb-cake3d__tilt{
  -webkit-transform-style:preserve-3d;
  -webkit-transform:rotateX(-14deg);
}

.bb-cake3d__spin{
  -webkit-transform-style:preserve-3d;
  -webkit-animation:bb-cake-spin 20s linear infinite;
  animation:bb-cake-spin 20s linear infinite;
  will-change:transform;
}

.bb-cake3d__tier,
.bb-cake3d__top{
  -webkit-transform-style:preserve-3d;
}

@-webkit-keyframes bb-cake-spin{
  from{-webkit-transform:rotateY(0deg);}
  to{-webkit-transform:rotateY(360deg);}
}

.bb-cake3d__label{
  white-space:normal;
  word-break:break-word;
  line-height:1.05;
  padding:0 8px;
}

/* Фигурки по фото: медальоны на верхушке торта */
.bb-cake3d__fig{
  position:absolute;
  width:26px;
  height:26px;
  display:block;
  border-radius:50%;
  border:2px solid #ffffff;
  background-size:cover;
  background-position:center;
  box-shadow:0 2px 4px rgba(80,30,50,.28);
  box-sizing:border-box;
}

/* Сердечки на бенто-торте */
.bb-cake3d__heart{
  position:absolute;
  font-size:13px;
  line-height:1;
  color:#D6384A;
  font-weight:400;
  text-shadow:0 1px 1px rgba(120,20,40,.25);
}

.bb-cake__chip.is-active .bb-cake3d__heart{color:#fff;}

/* Персонажи-фигурки на торте */
.bb-cake3d__char{
  position:absolute;
  width:26px;
  height:29px;
  display:block;
  filter:drop-shadow(0 3px 3px rgba(80,30,50,.25));
}

.bb-cake3d__char svg{
  width:100%;
  height:100%;
  display:block;
}

/* Блок персонажей отделяем от оформления */
#cakeCharChips{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed var(--bb-line);
}

#cakeCharChips::before{
  content:'Персонаж';
  display:block;
  width:100%;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:var(--bb-cocoa);
}

/* Заготовка под свой персонаж, пока фото не загружено */
.bb-cake3d__fig--empty{
  background:repeating-linear-gradient(45deg,#FBEDF1,#FBEDF1 4px,#F3D9E2 4px,#F3D9E2 8px);
  border:2px dashed #E0A9BC;
  box-shadow:none;
}

/* Вступление к конструктору торта */
.bb-custom__intro{
  margin:0 0 22px;
  line-height:1.45;
}

/* Кнопки на отменённом заказе */
.bb-order__actions--stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Таймер столика */
.bb-tablemode__timer{
  margin:4px 0 0;
  font-size:12.5px;
  font-weight:700;
  color:var(--bb-rose);
}

/* Электронный сертификат */
.bb-giftcard{
  padding:16px;
  border-radius:14px;
  background:linear-gradient(135deg,#E71F63,#B3164B);
  color:#fff;
  box-shadow:0 8px 20px rgba(180,20,80,.28);
}

.bb-giftcard__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:10px;
}

.bb-giftcard__brand{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  opacity:.85;
}

.bb-giftcard__sum{
  font-size:22px;
  font-weight:800;
}

.bb-giftcard__code{
  margin:0;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
}

.bb-giftcard__msg{
  margin:8px 0 0;
  font-size:13px;
  font-style:italic;
  opacity:.92;
}

.bb-giftcard__meta{
  margin:8px 0 0;
  font-size:11.5px;
  opacity:.8;
}

/* Переподарить сертификат */
.bb-giftcard__regift{
  margin-top:10px;
  background:rgba(255,255,255,.2);
  color:#fff;
  border:none;
}

/* Поиск по меню */
.bb-search{
  position:relative;
  margin:0 0 12px;
}

.bb-search__input{
  padding-right:38px;
}

.bb-search__clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  font-size:15px;
  color:var(--bb-rose);
  cursor:pointer;
}

/* Сердечко на карточке */
.bb-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.bb-card__fav{
  flex:0 0 auto;
  border:none;
  background:transparent;
  font-size:19px;
  line-height:1;
  padding:0 2px;
  color:#D9B9C6;
  cursor:pointer;
}

.bb-card__fav.is-active{color:var(--bb-rose);}

/* Поиск: дышим вокруг блока */
.bb-search{
  margin:16px 0 16px;
}

.bb-search__input{
  background:#fff;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 3px 10px rgba(120,20,60,.12);
}

.bb-search + .bb-cats,
.bb-cats + .bb-search{
  margin-top:16px;
}

/* Кнопка избранного */
#favoritesChips{
  margin:0 0 12px;
}

#favoritesToggle{
  background:#fff;
  color:var(--bb-rose);
  font-weight:700;
}

#favoritesToggle.is-active{
  background:var(--bb-rose);
  color:#fff;
}

/* Заголовок «Мои сертификаты» — на розовом фоне, белым */
#view-giftcards > .bb-h3{
  color:#FFFFFF;
  margin-top:20px;
}

#view-giftcards .bb-hint{
  color:rgba(255,255,255,.9);
}

/* Убираем встроенный крестик браузера — у нас свой */
.bb-search__input::-webkit-search-cancel-button,
.bb-search__input::-webkit-search-decoration,
.bb-search__input::-ms-clear{
  display:none;
  -webkit-appearance:none;
  appearance:none;
}

/* Крестик очистки — аккуратная кнопка */
.bb-search__clear{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(231,31,99,.1);
  font-size:12px;
  line-height:1;
}

/* Переключатель «по коду» / «по паролю» */
.bb-authmode{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

.bb-authmode__tab{
  flex:1 1 0;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--bb-line);
  background:#fff;
  font-family:var(--bb-font);
  font-size:13px;
  font-weight:700;
  color:var(--bb-cocoa);
  cursor:pointer;
}

.bb-authmode__tab.is-active{
  background:var(--bb-rose);
  border-color:var(--bb-rose);
  color:#fff;
}

.bb-link{
  display:block;
  margin:10px auto 0;
  border:none;
  background:transparent;
  font-family:var(--bb-font);
  font-size:12.5px;
  font-weight:600;
  color:var(--bb-rose);
  text-decoration:underline;
  cursor:pointer;
}

/* Окно «Войдите, чтобы оформить заказ» */
.bb-authprompt{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:end center;
}

.bb-authprompt__backdrop{
  position:absolute;
  inset:0;
  background:rgba(45,20,35,.5);
  backdrop-filter:blur(2px);
}

.bb-authprompt__card{
  position:relative;
  width:100%;
  box-sizing:border-box;
  padding:22px 18px 26px;
  border-radius:20px 20px 0 0;
  background:#fff;
  box-shadow:0 -10px 30px rgba(60,15,40,.28);
  animation:bb-authprompt-in .22s ease-out;
}

@keyframes bb-authprompt-in{
  from{transform:translateY(30px);opacity:.5;}
  to{transform:translateY(0);opacity:1;}
}

.bb-authprompt__emoji{
  display:block;
  font-size:30px;
  text-align:center;
  margin-bottom:6px;
}

.bb-authprompt__title{
  margin:0 0 8px;
  font-family:var(--bb-font);
  font-size:19px;
  font-weight:800;
  text-align:center;
  color:var(--bb-dark);
}

.bb-authprompt__text{
  margin:0 0 16px;
  font-size:13.5px;
  line-height:1.45;
  text-align:center;
  color:var(--bb-cocoa);
}

.bb-authprompt__card .bb-btn{
  margin-bottom:8px;
}