/* ============================================================
   ОБЩИЕ СТИЛИ САЙТА «KOSMOS CAKE»
   палитра и шрифты те же, что в калькуляторе
   ============================================================ */
@font-face{
  font-family:'ALS Beast';
  src: local('ALS Beast'), local('ALS Beast Ultra'),
       url('assets/ALS_Beast_Ultra.otf') format('opentype');
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Golos Text';
  src: local('Golos Text'),
       url('assets/GolosText-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --bg:#cfcfcf;
  --red:#D2363C;
  --pink:#F16471;
  --rose:#E55264;
  --kitchen-blue:#5E8AB4;
  --display:'ALS Beast', system-ui, sans-serif;
  --text:'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;height:100%;width:100%;
  background:var(--bg);
  color:#1a1a1a;font-family:var(--text);
  overflow-x:hidden;
}
/* каталог: статичная сетка, прокрутка страницы (без барабана) */
html.catalog-page,
body.catalog-page{
  height:auto !important;min-height:100%;
  overflow-x:hidden !important;overflow-y:auto !important;
  touch-action:pan-y;
}
.catalog-scroll-viewport{
  position:relative;
  width:100%;
  height:auto;
  max-height:none;
  overflow:visible;
}
body.kosmos-cake-open .catalog-scroll-viewport{
  overflow:visible !important;
  pointer-events:auto;
}
.kosmos-catalog-embed .catalog-scroll-viewport{
  position:relative;
  inset:auto;
  height:auto;
  max-height:none;
}
body.catalog-page .cover-grid,
html:has(.cover-grid) .cover-grid{
  min-height:0;
}
/* Tilda: без этого каталог «заморожен» — #allrecords по умолчанию overflow:hidden */
#allrecords{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  height:auto !important;
  min-height:100% !important;
}
html:has(.cover-grid) #allrecords,
html:has(.kosmos-catalog-embed) #allrecords{
  overflow-y:auto !important;
}
.kosmos-catalog-embed,
.kosmos-catalog-embed .cover-grid{
  overflow:visible !important;
  height:auto !important;
  max-height:none !important;
}

/* глобально прячем скроллбары — скролл работает, но полосок не видно */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
a{color:inherit}
img{display:block;max-width:100%}

/* ============ МЕНЮ-ТОРТИК ============ */
.menu-btn{
  position:fixed;top:18px;left:22px;z-index:70;
  background:none;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:46px;height:auto;
}
.menu-btn svg{display:block;width:46px;height:55px}
.menu-btn svg path{fill:#fff;transition:fill .15s ease}
.menu-btn:hover svg path,.menu-btn:focus svg path{fill:#F16471}
.menu-label{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:14px;line-height:1;letter-spacing:.4px;text-transform:lowercase;
}
.menu-btn:hover .menu-label{color:var(--pink)}
.menu-list{
  position:fixed;left:96px;bottom:0;z-index:60;
  width:min(340px, 88vw);
  min-height:448px;height:auto;max-height:min(92vh, 580px);
  list-style:none;margin:0;
  padding:18px 26px 22px;padding-top:56px;
  display:flex;flex-direction:column;align-items:center;
  color:#fff;text-align:center;
  background:rgba(207,207,207,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:22px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  overflow:visible;
  transform:translateY(115%) rotate(-1.2deg);
  transform-origin:50% 100%;
  opacity:0;
  pointer-events:none;
  transition:transform .52s cubic-bezier(.18,.9,.22,1), opacity .24s ease;
}
.menu-list.is-open{
  transform:translateY(0) rotate(-1.2deg);
  opacity:1;
  pointer-events:auto;
}
.menu-cake-shell{
  position:absolute;left:50%;top:6px;
  transform:translateX(-50%);
  width:118%;max-width:400px;height:268px;
  margin:0;padding:0;list-style:none;
  pointer-events:none;z-index:0;
}
.menu-cake-stack{
  position:relative;width:100%;height:100%;
  pointer-events:none;
}
.menu-cake-stack img{
  display:block;max-width:none;
  pointer-events:none;
}
.menu-cake-tier{
  position:absolute;left:50%;
  transform:translateX(-50%);
}
.menu-cake-tier--bottom{
  bottom:0;width:122%;height:auto;
}
.menu-cake-tier--top{
  bottom:86px;width:90%;height:auto;
}
.menu-cake-k{
  position:absolute;left:50%;top:10px;
  transform:translateX(-50%);
  width:36px;height:auto;z-index:5;
  filter:hue-rotate(-6deg) saturate(1.12) brightness(.94);
}
.menu-cake-bow{
  position:absolute;width:42px;height:auto;z-index:4;
  opacity:.96;pointer-events:none;transform-origin:50% 50%;
  animation:menuBowFloat 2.6s ease-in-out infinite;
}
.menu-cake-bow--1{left:4%;top:36%;animation-delay:0s}
.menu-cake-bow--2{
  right:2%;top:30%;width:38px;animation-delay:.35s;
  animation-name:menuBowFloatMirrored;
}
.menu-cake-bow--3{left:20%;bottom:26%;width:34px;animation-delay:.7s}
@keyframes menuBowFloat{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-5px) rotate(1deg)}
}
@keyframes menuBowFloatMirrored{
  0%,100%{transform:scaleX(-1) translateY(0) rotate(1.5deg)}
  50%{transform:scaleX(-1) translateY(-5px) rotate(-1deg)}
}
.menu-cake-cherry{
  position:absolute;width:11px;height:11px;border-radius:50%;z-index:5;
  background:radial-gradient(circle at 32% 28%, #fff 0 17%, #c41e2a 18% 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  animation:menuCherry 2.35s ease-in-out infinite;
}
.menu-cake-cherry::before{
  content:'';position:absolute;left:50%;bottom:92%;
  width:2px;height:7px;margin-left:-1px;background:#2a2a2a;
  border-radius:1px;transform-origin:bottom center;transform:rotate(16deg);
}
.menu-cake-cherry--1{left:10%;top:20%;animation-delay:0s}
.menu-cake-cherry--2{left:34%;top:15%;animation-delay:.15s}
.menu-cake-cherry--3{left:56%;top:17%;animation-delay:.3s}
.menu-cake-cherry--4{left:80%;top:22%;animation-delay:.45s}
.menu-cake-cherry--5{left:18%;bottom:11%;animation-delay:.2s}
.menu-cake-cherry--6{left:74%;bottom:13%;animation-delay:.5s}
@keyframes menuCherry{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.06)}
}
.menu-list > li:not(.menu-cake-shell){
  position:relative;z-index:8;margin:0;
}
.menu-list > li:nth-child(2){margin-top:118px}
.menu-list > li:nth-child(5){margin-bottom:auto}
.menu-list a{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:24px;line-height:.9;text-transform:lowercase;text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,.22);
}
.menu-list a:hover{color:var(--pink)}
.menu-note{
  max-width:170px;margin-top:24px;
  font-family:var(--text);font-size:10px;line-height:1.2;color:var(--red);
}
.menu-telegram{margin-top:12px}
.menu-telegram a{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--bg);font-size:0;text-shadow:none;
}
.menu-telegram a::before{
  content:'';display:block;width:0;height:0;margin-left:-2px;
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:15px solid var(--bg);
  transform:rotate(-18deg);
}
.menu-phone{margin-top:16px}
.menu-phone a{font-size:23px;line-height:1;color:#fff}
.menu-close-item{margin-top:16px}
.menu-close{
  border:0;background:none;padding:0;width:40px;height:40px;
  position:relative;color:var(--red);
}
.menu-close::before,
.menu-close::after{
  content:'';position:absolute;left:50%;top:50%;
  width:34px;height:8px;border-radius:999px;background:currentColor;
}
.menu-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.menu-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.menu-list.is-open li:nth-child(2),
.menu-list.is-open li:nth-child(3),
.menu-list.is-open li:nth-child(4){animation:menuWiggle .8s ease both}
.menu-list.is-open li:nth-child(3){animation-delay:.06s}
.menu-list.is-open li:nth-child(4){animation-delay:.12s}
@keyframes menuWiggle{
  0%{transform:translateY(14px);opacity:0}
  65%{transform:translateY(-3px) rotate(-1deg);opacity:1}
  100%{transform:translateY(0);opacity:1}
}

/* ============ ГЛАВНАЯ — ГРИД ОБЛОЖЕК ============
   Сетка без зазоров: фото вплотную от верха. Мобильная — 2 в ряд, десктоп — 3.
   full-bleed: если каталог встроен в узкий блок (Tilda), растягиваем на всю ширину окна. */
.cover-grid{
  --cover-cols:3;
  box-sizing:border-box;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  display:grid;
  grid-template-columns:repeat(var(--cover-cols), minmax(0, 1fr));
  gap:0;
}
.cover{
  position:relative;display:block;
  min-width:0;width:100%;
  aspect-ratio:1/1.25;overflow:hidden;
  background:#222;text-decoration:none;
}
.cover img{
  width:100%;height:112%;object-fit:cover;object-position:center top;
  display:block;max-width:none;
  animation:coverPan 16s ease-in-out infinite alternate;
  will-change:transform;
}
.cover:nth-child(3n+2) img{animation-delay:-5s}
.cover:nth-child(3n) img{animation-delay:-10s}
body.catalog-page .cover img,
.kosmos-catalog-embed .cover img{
  height:100%;
  animation:none;
  transform:none;
  will-change:auto;
}
@keyframes coverPan{
  from{transform:translateY(0)}
  to{transform:translateY(-10%)}
}
@media (prefers-reduced-motion:reduce){
  .cover img{height:100%;animation:none;transform:none}
}
.cover .cover-name{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 14px 18px;
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:clamp(18px, 1.6vw, 32px);line-height:.95;letter-spacing:.2px;
  text-transform:lowercase;
  pointer-events:none;
  opacity:0;transition:opacity .2s ease;
}
.cover:hover .cover-name,
.cover:focus-within .cover-name{opacity:1}

@media (max-width:900px){
  .cover-grid{--cover-cols:2}
  .cover .cover-name{opacity:1;font-size:18px;padding:0 12px 14px}
}

/* Сенсорные экраны — название всегда видно (hover на таче нет). */
@media (hover:none){
  .cover .cover-name{opacity:1}
}

/* ============ СТРАНИЦА «О НАС» ============ */
body.about-page{
  height:100vh;min-height:100%;overflow:hidden;background:var(--bg);
}
.about-main{
  height:100vh;min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.about-panel{
  position:relative;
  min-height:0;height:100vh;
  padding:96px clamp(28px, 5vw, 72px) 90px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.about-cake-panel{
  background:var(--bg);
  color:var(--pink);
}
.about-kitchen-panel{
  background:var(--kitchen-blue);
  color:#fff;
}
.about-k-mark{
  position:absolute;top:24px;left:28px;
  width:58px;height:auto;
  filter:brightness(0) invert(1);
}
.about-logo{
  width:min(620px, 92%);
  height:auto;
  margin:8px auto 28px;
  pointer-events:none;
}
.about-logo-cake{
  width:min(760px, 122%);
  max-width:none;
  margin:28px -16% 0;
}
.about-logo-kitchen{
  width:min(360px, 72%);
}
.about-copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:28px;
  max-width:420px;
}
.about-copy p,
.about-kitchen-lead,
.about-addresses p,
.about-link{
  font-family:var(--display);font-weight:900;
  line-height:.95;text-transform:lowercase;
  margin:0;
}
.about-copy p{
  font-size:clamp(26px, 3vw, 42px);
}
.about-kitchen-lead{
  max-width:460px;
  font-size:clamp(19px, 2vw, 30px);
}
.about-star{
  width:26px;height:26px;position:relative;flex:none;
}
.about-star::before{
  content:'';position:absolute;inset:0;background:currentColor;
  clip-path:polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
}
.about-star::after{
  content:'';position:absolute;inset:36%;background:currentColor;
  transform:rotate(45deg);
}
.about-addresses{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  margin-top:8px;
}
.about-addresses p{
  font-size:clamp(19px, 1.7vw, 27px);
}
.about-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;margin-top:26px;padding:14px 26px 12px;
  border:2px solid #fff;border-radius:999px;
  color:#fff;text-decoration:none;font-size:22px;
  transition:background-color .15s ease,color .15s ease,transform .12s ease;
}
.about-link:hover{
  background:#fff;color:var(--kitchen-blue);transform:translateY(-2px);
}
.about-clouds{
  position:absolute;left:0;right:0;bottom:-2px;z-index:1;
  width:100%;height:auto;pointer-events:none;
}
.about-mobile-only{display:none}

/* ============ СТРАНИЦА ТОРТА — ТРИ КОЛОНКИ ============ */
.cake-page{
  position:fixed;inset:0;
  width:100vw;max-width:100vw;
  height:100dvh;max-height:100dvh;
  display:grid;
  /* Три равные трети на всю ширину окна (в т.ч. 2K+). */
  grid-template-columns:repeat(3, minmax(0, 1fr));
  background:var(--bg);
}
@media (min-width:901px){
  .cake-page{
    grid-template-rows:minmax(0,1fr);
  }
  .cake-col{min-height:0}
}
.cake-col{
  position:relative;height:100%;
  overflow-y:auto;
}

/* ----- колонка 1: фото торта (плотно, без зазоров — фото с самого верха) ----- */
.col-photo{background:var(--bg);padding:0}
.col-photo .photo{
  display:block;width:100%;height:auto;object-fit:cover;
  margin:0;
}
@media (min-width:901px){
  .cake-col.col-photo{overflow:hidden}
  .col-photo.cake-col{
    overflow:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  #cake-photos.cake-photos{
    display:block;
    flex:1 1 auto;
    min-height:0;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  #cake-photos.cake-photos.k-loop-auto{scroll-snap-type:none}
  #fillings-col.col-fillings{
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  #fillings-col.col-fillings.k-loop-auto{scroll-snap-type:none}
  .col-photo,
  #cake-photos.cake-photos,
  .col-third .col-fillings,
  #fillings-col.col-fillings,
  .col-fillings--photos{
    cursor:grab;
    touch-action:pan-y;
  }
  .col-photo.k-loop-dragging,
  #cake-photos.k-loop-dragging,
  .col-third .col-fillings.k-loop-dragging,
  #fillings-col.k-loop-dragging,
  .col-fillings--photos.k-loop-dragging{
    cursor:grabbing;
    user-select:none;
  }
  .col-photo .photo,
  .col-fillings .slice,
  .col-fillings--photos img{
    -webkit-user-drag:none;
    user-drag:none;
  }
}

/* ----- колонка 2: описание + калькулятор -----
   Заголовок «прибит» к верху (sticky). Калькулятор имеет фикс высоту,
   чтобы колонка целиком скроллилась как один блок и контент уезжал
   ПОД заголовок. Под заголовком — тонкая «дымка» (полупрозрачный
   градиент + backdrop-blur), через которую содержимое плавно
   уходит и размывается при скролле. */
.col-info{
  padding:0 22px 40px;display:flex;flex-direction:column;align-items:center;gap:0;
  min-height:0;overflow-y:auto;overflow-x:hidden;
  /* Прячем системный скроллбар: иначе он занимает ~15px справа,
     визуально сдвигая весь калькулятор от центра колонки. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.col-info::-webkit-scrollbar{display:none;width:0;height:0}
.col-info .cake-title{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  font-family:var(--display);font-weight:900;color:var(--pink);
  font-size:56px;line-height:.7;letter-spacing:-1px;
  padding:18px 0px 14px;
  width: 100%;
  text-align:center;
}
/* каждое слово на отдельной строке. JS подбирает font-size так, чтобы
   оно занимало почти всю ширину. line-height:.7 — строки максимально
   плотные, контент при скролле резко уезжает под огромный заголовок. */
.cake-title .word{
  display:block;line-height:.7;white-space:nowrap;letter-spacing:-1px;
  padding-bottom:.05em;
}
.col-info .cake-desc{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:20px;line-height:1;text-align:center;
  margin:10px 0 0;max-width:380px;
}
.col-info .cake-sub{
  font-family:var(--text);font-weight:400;
  font-size:15px;line-height:1.2;color:var(--red);text-align:center;
  margin:8px 0 6px;max-width:420px;
}

.cake-details{
    color: var(--red);
    text-align: center;
}
.col-info .calc-frame{
  /* Inline-калькулятор: высота по контенту. */
  width:96%;max-width:440px;flex:none;
  height:auto;min-height:0;
  border:0;background:transparent;display:block;
  margin:8px auto 32px;
  pointer-events:auto;overflow:visible;
}

/* Стрелка «назад в каталог» — фиксированная, в левом нижнем углу страницы торта.
   Стилизована единообразно с .delivery-back из третьей колонки. */
.back-to-catalog{
  position:fixed;left:18px;bottom:58px;z-index:1000;
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  text-decoration:none;color:var(--pink);
  pointer-events:auto;touch-action:manipulation;
}
.back-to-catalog svg{
  width:42px;height:42px;fill:var(--pink);
}
.back-to-catalog:hover svg{fill:var(--rose)}

/* ----- колонка 3: «колбаса» начинок + оверлей доставки -----
   Контейнер col-third содержит два слоя: длинную колонку срезов и
   блок доставки, который выезжает поверх начинок по нажатию «далее».
*/
.col-third{
  position:relative;overflow:hidden;background:var(--bg);
}
.col-third .col-fillings,
.col-third .col-delivery{
  position:absolute;inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* блок доставки: без анимации — мгновенно подменяет колонку начинок. */
.col-third .col-delivery{
  display: none;
  z-index:2;background:var(--bg);
  flex-direction:column;
}
.cake-page.is-delivery .col-third .col-delivery{display:flex}
.cake-page.is-delivery .col-third .col-fillings{display:none}

/* «назад к начинкам» — белая стрелка влево в нижнем левом углу
   (визуально как на макете) */
/* Закрыть доставку — красный крестик в правом нижнем углу третьей колонки.
   Тот же визуал, что у .filling-bubble .close (см. CLOSE_X SVG в build). */
.delivery-back{
  position:absolute;right:18px;bottom:18px;z-index:3;
  width:36px;height:36px;border:0;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
  transition:transform .12s ease, color .15s ease;
}

@media (max-width: 960px){
  .delivery-back{
    display: none;
  }

  .col-third .col-delivery{
    display: flex !important;
  }
}

.delivery-back:hover{color:var(--rose)}
.delivery-back:active{transform:scale(.9)}
.delivery-back svg{width:100%;height:100%;display:block;overflow:visible}
.delivery-back svg path{fill:currentColor}

.col-delivery .delivery-inline{
  flex:1 1 auto;width:100%;min-height:0;
  border:0;background:transparent;display:block;
}

.col-fillings{padding:0;background:var(--bg)}

/* Третья колонка как 2×2 сетка фото (используется для тирамису:
   у него только одна начинка, вместо «колбасы» начинок — четыре фото). */
/* Тирамису (и любые «фото-only» торты): третья колонка отдаёт всю свою высоту
   под полноразмерные фото, такая же логика как у левой колонки .col-photo. */
.col-fillings--photos{
  display:block;height:100%;overflow-y:auto;background:var(--bg);padding:0;
}
.col-fillings--photos img{
  display:block;width:100%;height:auto;object-fit:cover;margin:0;
}

/* Мобильный аналог для тирамису: вертикальный стек больших фото на всю ширину
   экрана — вместо горизонтальной карусели начинок. */
.mob-photos-grid{
  display:block;width:100%;padding:0;background:var(--bg);
}
.mob-photos-grid img{
  display:block;width:100%;height:auto;object-fit:cover;margin:0;
}

/* ============ УНИВЕРСАЛЬНЫЙ СРЕЗ НАЧИНКИ (.slice-wrap) ============
   Используется и в вертикальной «колбасе» десктопа (.col-fillings),
   и в горизонтальной карусели мобилки (.mob-fillings). */
.slice-wrap{
  position:relative;width:100%;aspect-ratio:1/1;
  overflow:hidden;margin:0;
}
.slice-wrap .slice{
  display:block;width:100%;height:100%;object-fit:cover;
}

/* кружок-подсказка: маленький серый кружок с красной искрой */
.slice-wrap .info-dot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:32px;height:32px;border-radius:50%;
  background:var(--bg);border:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:transform .15s ease, background-color .15s ease;
  z-index:2;
}
.slice-wrap .info-dot:hover{
  transform:translate(-50%,-50%) scale(1.08);
  background:#fff;
}
.slice-wrap .info-dot svg{width:14px;height:14px;color:var(--red)}
.slice-wrap .info-dot svg path{fill:currentColor}
.slice-wrap.is-open .info-dot{display:none}

/* ============ ПУЗЫРЁК НАЧИНКИ ВНУТРИ КВАДРАТНОГО СРЕЗА ============
   попап встаёт строго в границы своего .slice-wrap, без затемнения,
   каждый независимый — можно открыть несколько одновременно (FIFO=3). */
.slice-wrap .filling-bubble{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--red);
  /* симметричные паддинги: контент центрируется в круге, низ оставлен под крестик */
  padding:16% 14% 22%;
  gap:6px;
  z-index:3;
  pointer-events:none;
}
.slice-wrap .filling-bubble > *:not(.close){
  pointer-events:none;
}
.slice-wrap.is-open .filling-bubble{display:flex}

.slice-wrap .filling-bubble::before{
  content:'';position:absolute;inset:11%;border-radius:50%;
  background:var(--bg);border:1px solid var(--red);
  box-shadow:0 6px 22px rgba(0,0,0,.18);z-index:-1;
}
.slice-wrap .filling-bubble h3{
  font-family:var(--display);font-weight:900;color:var(--pink);
  font-size:clamp(16px, 2.4vw, 28px);line-height:.95;letter-spacing:.2px;
  text-transform:lowercase;margin:0;
}
.slice-wrap .filling-bubble p.desc{
  font-family:var(--text);font-weight:400;color:var(--red);
  font-size:12px;line-height:1.05;margin:0;max-width:88%;
  margin-bottom: 50px;
}
.slice-wrap .filling-bubble .bb-class{
  display:block;margin:0 auto;
  width:32%;max-width:120px;height:auto;
}
.slice-wrap .filling-bubble .bb-price{
  font-family:var(--text);font-weight:400;color:var(--red);
  font-size:12px;line-height:1;margin:0;
}
/* маленький красный «X» внутри круга снизу — закрывает попап.
   Прибит к низу круга, не зависит от высоты содержимого. */
.slice-wrap .filling-bubble .close{
  position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
  width:6%;height:6%;min-width:16px;min-height:16px;max-width:22px;max-height:22px;
  border:0;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--red);z-index:4;
  pointer-events:auto;cursor:pointer;touch-action:manipulation;
  transition:color .15s ease, transform .08s ease;
}
.slice-wrap .filling-bubble .close:hover{color:var(--rose)}
.slice-wrap .filling-bubble .close:active{transform:translateX(-50%) scale(.9)}
.slice-wrap .filling-bubble .close svg{width:100%;height:100%;display:block;overflow:visible}
.slice-wrap .filling-bubble .close svg path{fill:currentColor}

.slice-wrap .filling-bubble .spark{
  position:absolute;top:50%;transform:translateY(-50%);
  width:18%;height:18%;pointer-events:none;
}
.slice-wrap .filling-bubble .spark.left { left:0  }
.slice-wrap .filling-bubble .spark.right{ right:0 }
.slice-wrap .filling-bubble .spark svg{width:100%;height:100%;display:block;overflow:visible}
.slice-wrap .filling-bubble .spark svg path{
  fill:#fff;stroke:var(--red);stroke-width:1.4;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}

/* ============ АДАПТИВНАЯ СТРАНИЦА ТОРТА (site/cakes/*.html) ============
   Один .cake-page: ≥901px — три колонки, ≤900px — вертикальный стек. */
body.cake-page-body{
  height:auto;min-height:100%;
  overflow-x:hidden;
  padding-bottom:max(28px, env(safe-area-inset-bottom, 0px));
}
@media (max-width:900px){
  html:has(body.cake-page-body),
  body.cake-page-body{
    height:auto !important;min-height:100vh;
    overflow-y:auto !important;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
}
@media (min-width:901px){
  body.cake-page-body{height:100%;overflow:hidden;padding-bottom:0}
}

/* «Что внутри?» — только на узком экране */
.cake-fill-head{display:none}
.cake-photo-dots,.cake-fillings-dots{display:none}

/* Лента фото: на мобилке — горизонтальная карусель */
.cake-photos{display:block}
.cake-photos .photo{display:block;width:100%;height:auto;object-fit:cover;margin:0}

@media (max-width:900px){
  .cake-fill-head{display:block}
  .cake-photo-dots{display:flex}
  .cake-fillings-dots{display:flex}
  .col-photo{width:100%;max-width:100%;padding:0;overflow:hidden}
  .cake-photos,
  #fillings-col.col-fillings{
    display:flex;width:100%;max-width:100%;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scroll-padding:0;
    touch-action:manipulation;
    overscroll-behavior-x:contain;
  }
  .cake-photos.k-loop-auto,
  #fillings-col.col-fillings.k-loop-auto{
    scroll-snap-type:none;
    -webkit-overflow-scrolling:auto;
  }
  .cake-photos .photo,
  #fillings-col.col-fillings--photos .photo,
  #fillings-col.col-fillings:not(.col-fillings--photos) .slice-wrap{
    flex:none;width:100%;min-width:100%;max-width:100%;
    scroll-snap-align:start;
    box-sizing:border-box;
  }
  .cake-photos .photo,
  #fillings-col.col-fillings--photos .photo{
    aspect-ratio:1/1.25;object-fit:cover;
  }
}

/* iOS Safari: proximity часто не докручивает — mandatory только там */
@supports (-webkit-touch-callout: none){
  @media (max-width:900px){
    .cake-photos,
    #fillings-col.col-fillings{
      scroll-snap-type:x mandatory;
    }
  }
}

/* ============ МОБИЛЬНАЯ СТРАНИЦА ТОРТА (legacy mob-page) ============ */
body.mob-page{height:auto;min-height:100%;overflow-x:hidden;padding-bottom:max(28px, env(safe-area-inset-bottom, 0px))}
body.about-page.mob-page{height:100vh;overflow:hidden}
body.mob-page .menu-btn{top:14px;left:14px}
body.mob-page .menu-list{top:80px;left:14px}

/* (1) карусель фото — на всю ширину, листается свайпом.
   Снизу мелким красным Golos — подсказка про свайп. */
.mob-photos-wrap{position:relative;width:100vw}
.mob-photos{
  display:flex;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  cursor:grab;
  touch-action:manipulation;
  overscroll-behavior-x:contain;
}
.mob-photos.k-loop-dragging{cursor:grabbing;user-select:none}
.mob-photos::after{
  content:'';flex:0 0 28px;width:28px;scroll-snap-align:end;
}
.mob-photos img{
  flex:0 0 100%;width:100%;min-width:100%;
  aspect-ratio:1/1.25;object-fit:cover;
  scroll-snap-align:start;display:block;
}
.mob-swipe-hint{display:none}

/* Точки-индикаторы под мобильными каруселями (фото и начинки).
   Количество точек = количеству исходных слайдов (без клонов цикла).
   Активная точка — текущая. */
.mob-dots{
  display:flex;justify-content:center;align-items:center;gap:7px;
  padding:10px 0 6px;width:100%;
  pointer-events:none;
}
.mob-dots .dot{
  width:9px;height:9px;border-radius:50%;
  border:0;outline:0;box-shadow:none;
  appearance:none;-webkit-appearance:none;
  padding:0;
  background:rgba(210,54,60,.28);
  transition:background-color .2s ease, transform .2s ease, width .2s ease, height .2s ease;
}
.mob-dots .dot.active{
  background:var(--red);
  width:11px;height:11px;
}
.mob-dots:empty{display:none}
/* Под начинками точки чуть меньше фото-точек, но достаточно крупные
   для тач-таргета (8/10px) — пользователь жмёт на конкретную начинку. */
.mob-dots--small{gap:9px;padding:12px 0 8px}
.mob-dots--small .dot{
  width:8px;height:8px;
  pointer-events:auto;cursor:pointer;
}
.mob-dots--small .dot.active{width:10px;height:10px}

/* (2) шапка торта */
.mob-head{padding:22px 18px 4px;text-align:center}
.mob-head .cake-title{
  font-family:var(--display);font-weight:900;color:var(--pink);
  font-size:64px;line-height:.7;letter-spacing:-1px;
  margin:0;width:100%;
  padding-bottom:.05em;
}
.mob-head .cake-desc{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:20px;line-height:1;text-align:center;
  margin:10px auto 0;max-width:300px;
}
.mob-head .cake-sub{
  font-family:var(--text);font-weight:400;
  font-size:14px;line-height:1.25;color:var(--red);text-align:center;
  margin:8px auto 0;max-width:320px;
}

/* (3) «что внутри?» + хинт */
.mob-fill-head{padding:22px 18px 10px;text-align:center}
/* «Что внутри?» — белым + рядом маленькая вишенка из assets/cherry.svg.
   Вишенка идёт инлайном после текста, в один ряд (display:inline-flex),
   чтобы не ломать центрирование заголовка. */
.mob-section-title{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:30px;line-height:1;text-transform:lowercase;margin:0;
  display:inline-flex;align-items:center;gap:8px;
}
.mob-section-cherry{
  display:inline-block;width:34px;height:auto;flex:0 0 auto;
  transform:translateY(2px);
}
.mob-section-title::first-letter{text-transform:uppercase}
.mob-section-hint{
  font-family:var(--text);font-weight:400;color:var(--red);
  font-size:11px;line-height:1.05;margin:4px 0 0;
}

/* (4) карусель начинок — квадратный блок, листается горизонтально.
   Каждый слайс на всю ширину, попап остаётся в границах. */
.mob-fillings{
  position:relative;width:100%;max-width:100%;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  cursor:grab;
  touch-action:manipulation;
  overscroll-behavior-x:contain;
}
.mob-fillings.k-loop-dragging{cursor:grabbing;user-select:none}
.mob-fillings::after{
  content:'';flex:0 0 28px;width:28px;scroll-snap-align:end;
}
.mob-fillings .slice-wrap{
  flex:0 0 100%;width:100%;min-width:100%;
  scroll-snap-align:start;
}

@media (max-width:900px){
  .mob-page .menu-btn{top:14px;left:14px}
  .mob-page .menu-list,
  .menu-list{
    left:50%;top:50%;bottom:auto;
    width:min(340px, 86vw);
    min-height:456px;height:auto;max-height:min(90vh, 580px);
    transform:translate(-50%, 110vh) rotate(-1.2deg);
  }
  .mob-page .menu-list.is-open,
  .menu-list.is-open{
    transform:translate(-50%, -50%) rotate(-1.2deg);
  }

  .about-main{
    display:grid;height:100vh;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0, .92fr) minmax(0, 1.08fr);
    overflow:hidden;
  }
  .about-panel{
    min-height:0;height:auto;
    padding:58px 18px 34px;
  }
  .about-logo-cake{
    width:114vw;margin:10px -18vw 0;
  }
  .about-logo-kitchen{width:min(245px, 68vw);margin:6px auto 10px}
  .about-copy{gap:11px;max-width:330px}
  .about-copy p{font-size:20px}
  .about-kitchen-lead{font-size:14px;max-width:320px}
  .about-star{width:16px;height:16px}
  .about-addresses{gap:7px;margin-top:0}
  .about-addresses p{font-size:13px}
  .about-link{min-height:34px;margin-top:10px;font-size:13px;padding:8px 16px 7px}
  .about-k-mark{width:42px;top:12px;left:14px}
  .about-clouds{bottom:-18px}
  .about-mobile-only{display:none}

  .cake-page{
    position:relative;inset:auto;
    width:100%;max-width:100%;
    height:auto;max-height:none;min-height:0;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:0;
  }
  .cake-col{height:auto;min-height:0;overflow:visible}
  .col-info{
    padding:24px 18px 40px;
    overflow:visible;height:auto;max-height:none;
  }
  .col-info .cake-title{
    position:relative;top:auto;
    font-size:48px;
  }
  .col-info .calc-frame{width:100%;max-width:100%;margin:8px 0 0}

  /* третья «колонка» в мобиле — обычный стек, без оверлей-анимации:
     по «далее» просто прячем начинки и показываем доставку, кнопка «назад»
     возвращает обратно. */
  .col-third{overflow:visible;height:auto}
  .col-third .col-fillings,
  .col-third .col-delivery{
    position:relative;inset:auto;transform:none;transition:none;opacity:1;
    height:auto;
  }
  .col-third .col-delivery{overflow:visible}
  #fillings-col.col-fillings--photos{
    width:100%;max-width:100%;height:auto;
  }
  .col-third .col-delivery{display:none;min-height:80vh}
  .cake-page.is-delivery .col-third .col-fillings{display:none}
  .cake-page.is-delivery .col-third .col-delivery{display:flex}
  .delivery-back{position:fixed;right:14px;bottom:14px;left:auto;width:30px;height:30px}
  .delivery-back svg{width:100%;height:100%}

  .col-delivery,.col-delivery .delivery-inline{
    max-width:100%;overflow-x:hidden;box-sizing:border-box;
  }
  /* На экране доставки мешает кнопке «назад» у панели и контенту */
  .cake-page.is-delivery .back-to-catalog{display:none}
}

@media (max-width: 960px){
  .calc-scroll{
    max-width: 380px;
    width: 100% !important;
  }

  .cake-fill-head{
    padding-left: 20px;
    margin-bottom: 20px;
  }


  .cover[data-cake='fairy cake']{
    order: 0;
  }
  .cover[data-cake='тирамису']{
    order: 1;
  }
  .cover[data-cake='келли']{
    order: 2;
  }
  .cover[data-cake='люмьер']{
    order: 3;
  }
  .cover[data-cake='вавилон']{
    order: 4;
  }
  .cover[data-cake='аполлон']{
    order: 5;
  }
  .cover[data-cake='любовное настроение']{
    order: 6;
  }
  .cover[data-cake='белль']{
    order: 7;
  }
  .cover[data-cake='dancing queen']{
    order: 8;
  }
  .cover[data-cake='лебединое озеро']{
    order: 9;
  }
  .cover[data-cake='ягодные поля навсегда']{
    order: 10;
  }
  .cover[data-cake='богемская рапсодия']{
    order: 11;
  }
  .cover[data-cake='big cherry fairy cake']{
    order: 12;
  }
  .cover[data-cake='вишневый сад']{
    order: 13;
  }
  .cover[data-cake='вам письмо']{
    order: 14;
  }
  .cover[data-cake='shine bright']{
    order: 15;
  }
  .cover[data-cake='blueberry hill']{
    order: 16;
  }
  .cover[data-cake='тоторо']{
    order: 17;
  }
  .cover[data-cake='sailor moon']{
    order: 18;
  }
  .cover[data-cake='дарси']{
    order: 19;
  }
  .cover[data-cake='орфей']{
    order: 20;
  }
  .cover[data-cake='шапито']{
    order: 21;
  }
  .cover[data-cake='la la land']{
    order: 22;
  }
  .cover[data-cake='элизабет']{
    order: 23;
  }
  .cover[data-cake='secret garden']{
    order: 24;
  }
  .cover[data-cake='анна']{
    order: 25;
  }
  .cover[data-cake='green day']{
    order: 26;
  }
  .cover[data-cake='фаберже']{
    order: 27;
  }
  .cover[data-cake='fuji']{
    order: 28;
  }  
  .cover[data-cake='куинджи']{
    order: 29;
  }

  /* Клоны барабана — после всех оригиналов; иначе совпадает data-cake/order → в ряду 2 одинаковых */
  .cover.k-loop-clone{
    order:1000 !important;
  }

}