/* ==================================================================
   KHOLENY — стили
   Геометрия взята из макетов (1280 x 832). Всё, что в макете стояло
   чуть мимо центра, выровнено по центру.
   ================================================================== */

:root{
  /* светлая тема */
  --bg:#fff;
  --ink:#000;
  --line:#000;
  --on-ink:#fff;            /* текст на инвертированной плашке */
  --ph:#d9d9d9;             /* плейсхолдер коробки */
  --muted:#9a9a9a;          /* плейсхолдеры полей */
  --dim:#8e8e8e;            /* описание аромата */
  --dim2:#b3b3b3;           /* подпись «АРОМАТИЗАТОР» в корзине */
  --hover:#f2f2f2;          /* подсветка пункта списка */

  /* тайминги: одна кривая на весь сайт — ощущение единого движения */
  --e:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.32s;
  --t-mid:.6s;
  --t-slow:.82s;
  --t-theme:.55s;
}

/* тёмная тема: вместо белого — тёмно-синий, вместо чёрного — бежевый */
body.dark{
  --bg:#0f1a33;
  --ink:#e9dcc3;
  --line:#e9dcc3;
  --on-ink:#0f1a33;
  --ph:#233052;
  --muted:rgba(233,220,195,.42);
  --dim:rgba(233,220,195,.55);
  --dim2:rgba(233,220,195,.45);
  --hover:rgba(233,220,195,.09);
}

/* NAMU Pro — фирменный шрифт (Дмитрий Растворцев). Логотип и подписи под коробками */
@font-face{
  font-family:'NAMU';
  src:url('fonts/NAMU-Pro.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  transition:background-color var(--t-theme) var(--e-soft),
             color var(--t-theme) var(--e-soft);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}

/* ------------------------------ ШАПКА ------------------------------ */
.hdr{
  position:fixed; inset:0 0 auto 0; height:88px; z-index:60;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hdr > *{pointer-events:auto}
/* подложки у шапки нет: значки и логотип лежат прямо поверх контента */

.logo{
  font-family:'NAMU','Inter','Helvetica Neue',Arial,sans-serif;
  font-size:20.5px; font-weight:400; letter-spacing:.005em; line-height:1;
  transform:translateY(3px);
  transition:opacity var(--t-fast) var(--e-soft);
}
.logo:hover{opacity:.55}
/* на экране корзины логотипа в макете нет */
body.is-cart .logo{opacity:0; pointer-events:none}

.hdr-left{position:absolute; left:18px; top:21px; width:26px; height:26px}
.hdr-left .slot{
  position:absolute; left:0; top:0; display:block;
  transition:opacity var(--t-fast) var(--e-soft), transform var(--t-mid) var(--e);
}
.slot-back{
  left:6px; top:-4px; padding:8px; margin:-8px;
  opacity:0; transform:translateX(6px); pointer-events:none;
}
body.is-inner .slot-theme{opacity:0; transform:translateX(-6px); pointer-events:none}
body.is-inner .slot-back{opacity:1; transform:none; pointer-events:auto}
.slot-back:hover{opacity:.5}

/* солнце / луна */
.slot-theme{width:24px; height:25px; padding:9px; margin:-9px; line-height:0}
.slot-theme:hover{opacity:.55}
.slot-theme .ic{
  position:absolute; left:9px; top:9px; display:block;
  transition:opacity .38s var(--e-soft), transform var(--t-mid) var(--e);
}
.ic-moon{opacity:0; transform:rotate(-70deg) scale(.6)}
body.dark .ic-sun{opacity:0; transform:rotate(70deg) scale(.6)}
body.dark .ic-moon{opacity:1; transform:none}

.cart-btn{
  position:absolute; right:24px; top:22px;
  padding:6px; display:block;
  transition:transform var(--t-fast) var(--e-soft), opacity var(--t-fast) var(--e-soft);
}
.cart-btn:hover{opacity:.55}
.cart-btn.bump{animation:bump .62s var(--e)}
@keyframes bump{
  0%{transform:scale(1)} 26%{transform:scale(1.22)}
  55%{transform:scale(.94)} 100%{transform:scale(1)}
}
.cart-badge{
  position:absolute; right:-4px; top:-2px;
  min-width:19px; height:19px; padding:0 5px;
  border-radius:19px; background:var(--ink); color:var(--on-ink);
  font-size:11px; line-height:19px; text-align:center; letter-spacing:.02em;
  opacity:0; transform:scale(.2);
  transition:opacity .3s var(--e-soft), transform .45s var(--e),
             background-color var(--t-theme) var(--e-soft), color var(--t-theme) var(--e-soft);
}
.cart-badge.on{opacity:1; transform:none}
.cart-badge.pop{animation:pop .5s var(--e)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.5)}100%{transform:scale(1)}}

/* --------------------------- ГЛАВНЫЙ ЭКРАН -------------------------- */
.grid-view{
  min-height:100vh; padding:110px 24px 48px;
  display:flex; justify-content:center;
  align-items:center; align-items:safe center;
  transition:opacity var(--t-mid) var(--e-soft);
}
/* ряды по три коробки; неполный последний ряд — по центру */
.grid{
  --cols:3; --col-gap:189px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  column-gap:var(--col-gap);
  row-gap:103px;
  max-width:calc(var(--cols) * 161px + (var(--cols) - 1) * var(--col-gap));
}
.grid > .card{flex:none}

.card{display:flex; flex-direction:column; align-items:center; will-change:transform,opacity}
.card-img{
  width:161px; height:244px; display:block; cursor:pointer;
  transition:opacity var(--t-fast) var(--e-soft);
  overflow:hidden;
}
.card-img img{width:100%; height:100%; object-fit:contain; display:block}
.card-img:hover{opacity:.72}

.card-plus{
  margin-top:23px; padding:8px; line-height:0;
  transition:transform var(--t-fast) var(--e), opacity var(--t-fast) var(--e-soft);
}
/* тип товара под коробкой: как название на экране товара */
.card-name{
  font-family:'NAMU','Inter','Helvetica Neue',Arial,sans-serif;
  /* 10px: вдвое меньше, штрих 1px — вдвое тоньше; прозрачность 50% */
  margin-top:24px; font-size:10px; letter-spacing:.085em; line-height:1;
  opacity:.5;
  cursor:pointer; user-select:none;
}
.card-name + .card-plus{margin-top:12px}
.card-plus:hover{transform:rotate(90deg)}
.card-plus:active{transform:rotate(90deg) scale(.85)}

/* карточки уходят/приходят при переходе на товар */
.card.hide{opacity:0; pointer-events:none}

/* --------------------------- ЭКРАН ТОВАРА --------------------------- */
.product-view{
  position:fixed; inset:0; z-index:40;
  display:flex; justify-content:center;
  align-items:center; align-items:safe center;
  padding:72px 24px 12px;
  overflow-y:auto; overflow-x:hidden;
  opacity:0; visibility:hidden;
}
.product-view.on{opacity:1; visibility:visible}

.product-col{
  display:flex; flex-direction:column; align-items:center; width:100%;
  /* в макете свёрнутая карточка стоит чуть ниже центра, раскрытая — по центру */
  transform:translateY(40px);
  transition:transform var(--t-slow) var(--e);
}
.product-col.expanded{transform:translateY(18px)}   /* чтобы крышка флакона не уходила под шапку */

/* обёртка слота — к ней привязаны стрелки листания */
.p-imgwrap{position:relative; flex:none}
.p-arrow{
  position:absolute; top:calc(50% - 20px); margin:-22px 0 0 -18px;   /* центр кнопки */
  padding:12px; line-height:0; opacity:0;
  transition:opacity var(--t-fast) var(--e-soft);
}
.p-prev{left:calc(50% - 175px)}
.p-next{left:calc(50% + 175px)}
.p-next svg{transform:scaleX(-1)}
.product-view.ready .p-arrow{
  opacity:1;
  transition:opacity .35s var(--e-soft) calc(var(--fx-base, 0s) + .08s);
}
.product-view.ready .p-arrow:hover{opacity:.5; transition-delay:0s}

/* листание вариантов: временный слой на время сдвига + постоянные боковые свечи */
.car{position:absolute; inset:0; pointer-events:none}
.car img,.pi-side{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transform-origin:50% 50%; will-change:transform,opacity;
}
.pi-side{opacity:0; pointer-events:none; cursor:pointer; transition:opacity .3s var(--e-soft)}
.pi-side.on{opacity:1; pointer-events:auto}
.pi-side.on:hover{opacity:.75}

/* слот под макет: высота как в макете (326), ширина с запасом под свечу */
.p-img{
  position:relative; top:-20px;         /* продукт чуть выше, воздух до цены */
  width:240px; height:326px; flex:none;
  will-change:transform;
}
.p-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block}
.pi-mock{opacity:0}

/* размеры в чертёжных линиях */
.dims{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; color:var(--ink);
}
.dims .ln{
  fill:none; stroke:currentColor; stroke-width:1;
  stroke-dasharray:1; stroke-dashoffset:1;           /* линия «прячется» внутрь себя */
  transition:stroke-dashoffset .38s var(--e-soft);
}
.dims text{
  fill:currentColor; font-size:10px; letter-spacing:.09em;
  opacity:0; transition:opacity .2s var(--e-soft);
}
/* показ: сначала выносные, потом размерные от центра к краям, засечки, подписи */
.product-view.dims-on .p-img:hover .dims .ln,
.product-view.dims-show .dims .ln{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .55s var(--e) .12s;
}
.product-view.dims-on .p-img:hover .dims .ext,
.product-view.dims-show .dims .ext{transition-delay:0s}
.product-view.dims-on .p-img:hover .dims .tk,
.product-view.dims-show .dims .tk{transition-delay:.5s; transition-duration:.25s}
.product-view.dims-on .p-img:hover .dims text,
.product-view.dims-show .dims text{opacity:1; transition:opacity .4s var(--e-soft) .45s}

.p-price{margin-top:14px; font-size:24px; letter-spacing:.01em; line-height:1}
.p-plus{margin-top:15px; padding:8px; line-height:0;
  transition:transform var(--t-fast) var(--e)}
.p-plus:hover{transform:rotate(90deg)}
.p-plus:active{transform:rotate(90deg) scale(.85)}

.p-name{margin-top:16px; font-size:20px; letter-spacing:.085em; line-height:1}
.p-chev{margin-top:13px; padding:8px 14px; line-height:0;
  transition:transform var(--t-mid) var(--e), opacity var(--t-fast) var(--e-soft)}
.p-chev:hover{opacity:.5}
.p-chev.up{transform:rotate(180deg)}

/* описание: анимируем height -> колонка сама плавно переезжает вверх,
   потому что она отцентрована во флексе */
.p-desc-wrap{
  width:230px; height:0; overflow:hidden;
  transition:height var(--t-slow) var(--e);
}
.p-desc{
  margin:13px 0 0;
  font-size:11px; line-height:16.5px; letter-spacing:.055em;
  text-align:justify; color:var(--dim);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--e-soft) .1s, transform .6s var(--e) .1s;
}
.p-desc-wrap.open .p-desc{opacity:1; transform:none}

.p-kind{margin-top:21px; font-size:20px; letter-spacing:.085em; line-height:1}

/* появление подписей на экране товара */
.fx{opacity:0; transform:translateY(14px)}
/* подписи: полностью проявляются за 0.63 с — карточка товара готова к 0.8 с после клика */
.product-view.ready .fx{
  opacity:1; transform:none;
  transition:opacity .35s var(--e-soft), transform .45s var(--e);
}
/* --fx-base — общий сдвиг старта (для сцены с коробкой), задаётся из app.js */
.product-view.ready #pPrice{transition-delay:calc(var(--fx-base, 0s) + .02s)}
.product-view.ready #pPlus {transition-delay:calc(var(--fx-base, 0s) + .06s)}
.product-view.ready #pName {transition-delay:calc(var(--fx-base, 0s) + .10s)}
.product-view.ready #pChev {transition-delay:calc(var(--fx-base, 0s) + .14s)}
.product-view.ready #pKind {transition-delay:calc(var(--fx-base, 0s) + .18s)}

/* ---------------------------- КОРЗИНА (4) --------------------------- */
.cart-view{
  position:fixed; inset:0; z-index:50; background:var(--bg);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-mid) var(--e-soft), visibility var(--t-mid),
             background-color var(--t-theme) var(--e-soft);
}
.cart-view.on{opacity:1; visibility:visible}

.cart-scroll{flex:1; overflow-y:auto; overflow-x:hidden; padding:75px 0 24px}
.cart-inner{
  width:1214px; max-width:calc(100% - 66px); margin:0 auto;
  display:grid; grid-template-columns:481px 1fr; column-gap:59px;
  align-items:start;
}

/* поля */
.fld{display:block; margin-bottom:56px}
.fld:last-child{margin-bottom:0}
.fld-l{display:block; font-size:20px; letter-spacing:.03em; margin-bottom:11px}
.fld-b{
  display:flex; align-items:center;
  width:100%; height:61px; border:2px solid var(--line); padding:0 22px;
  transition:border-color var(--t-theme) var(--e-soft);
}
.fld-b input{
  width:100%; height:100%; border:0; outline:none; background:none;
  font:inherit; font-size:18px; letter-spacing:.03em;
}
.fld-b input::placeholder{color:var(--muted); text-transform:uppercase}
.fld-b:focus-within{border-color:#000}
.fld-b:has(input:focus){box-shadow:inset 0 0 0 1px var(--line)}

/* появление полей корзины */
.cart-view .fld,
.cart-view .cart-side > *{opacity:0; transform:translateY(18px)}
.cart-view.ready .fld,
.cart-view.ready .cart-side > *{
  opacity:1; transform:none;
  transition:opacity .5s var(--e-soft), transform .7s var(--e);
}

/* селект доставки */
.sel{position:relative}
.sel-btn{justify-content:space-between; cursor:pointer; text-align:left}
.sel-val{font-size:18px; letter-spacing:.03em; color:var(--muted)}
.sel-val.chosen{color:var(--ink)}
.sel-arrow{line-height:0; transition:transform var(--t-mid) var(--e)}
.sel.open .sel-arrow{transform:rotate(180deg)}
.sel-list{
  position:absolute; left:0; right:0; top:calc(100% - 2px); z-index:5;
  background:var(--bg); border:2px solid var(--line);
  overflow:hidden; max-height:0; opacity:0; pointer-events:none;
  transition:max-height var(--t-mid) var(--e), opacity .25s var(--e-soft),
             background-color var(--t-theme) var(--e-soft), border-color var(--t-theme) var(--e-soft);
}
.sel.open .sel-list{opacity:1; pointer-events:auto}
.sel-list li{
  padding:17px 22px; font-size:18px; letter-spacing:.03em; cursor:pointer;
  transition:background var(--t-fast) var(--e-soft);
}
.sel-list li:hover,.sel-list li[aria-selected="true"]{background:var(--hover)}

/* доп. поля доставки */
.extra{overflow:hidden; height:0; transition:height var(--t-slow) var(--e)}
.extra-in{padding-top:56px}
.extra-in .fld:last-child{margin-bottom:0}
.extra .fld{opacity:0; transform:translateY(14px)}
.extra.show .fld{opacity:1; transform:none;
  transition:opacity .45s var(--e-soft), transform .6s var(--e)}
.extra.show .fld:nth-child(1){transition-delay:.06s}
.extra.show .fld:nth-child(2){transition-delay:.12s}
.extra.show .fld:nth-child(3){transition-delay:.18s}
.extra.show .fld:nth-child(4){transition-delay:.24s}

/* правая колонка */
.cart-side{position:sticky; top:0}
.cart-items{display:flex; flex-direction:column; gap:72px}
.cart-item{display:grid; grid-template-columns:90px 1fr; column-gap:27px; align-items:start}
.cart-item.leaving{overflow:hidden}
.ci-img{width:90px; height:136px}
.ci-img img{width:100%; height:100%; object-fit:contain; display:block}
.ci-name{font-size:20px; letter-spacing:.085em; line-height:1}
.ci-kind{margin-top:14px; font-size:18px; letter-spacing:.06em; color:var(--dim2); line-height:1}

.qty{display:flex; align-items:center; gap:16px; margin-top:20px}
.qty button{
  width:22px; height:22px; line-height:0; display:grid; place-items:center;
  transition:transform var(--t-fast) var(--e), opacity var(--t-fast) var(--e-soft);
}
.qty button:hover{transform:scale(1.18)}
.qty button:active{transform:scale(.86)}
.qty-n{min-width:22px; text-align:center; font-size:18px; letter-spacing:.03em}
.qty-n.tick{animation:tick .4s var(--e)}
@keyframes tick{0%{transform:translateY(0)}40%{transform:translateY(-4px);opacity:.4}100%{transform:translateY(0)}}

.cart-empty{
  margin:0; font-size:18px; letter-spacing:.06em; color:var(--muted);
  display:none;
}
.cart-side.empty .cart-empty{display:block}

.cart-sum{margin-top:71px; display:flex; align-items:baseline; gap:18px}
.sum-l{font-size:20px; letter-spacing:.03em}
.sum-v{font-size:20px; letter-spacing:.03em}

.agree{
  margin-top:64px; display:grid; grid-template-columns:19px 1fr;
  column-gap:14px; align-items:start; cursor:pointer;
}
.agree input{position:absolute; opacity:0; width:0; height:0}
.agree .box{
  width:19px; height:19px; border:2px solid var(--line); margin-top:2px;
  position:relative; flex:none;
  transition:border-color var(--t-theme) var(--e-soft);
}
.agree .box::after{
  content:''; position:absolute; inset:3px; background:var(--ink);
  opacity:0; transform:scale(.4);
  transition:opacity .2s var(--e-soft), transform .35s var(--e);
}
.agree input:checked + .box::after{opacity:1; transform:none}
.agree-t{font-size:14px; line-height:1.55; letter-spacing:.05em; color:var(--muted)}
.agree-t a{color:var(--ink); text-decoration:none}
.agree.shake{animation:shake .4s var(--e-soft)}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

.pay{
  flex:none; width:100%; height:58px; background:var(--ink); color:var(--on-ink);
  font-size:16px; letter-spacing:.09em;
  transition:opacity var(--t-fast) var(--e-soft), transform var(--t-mid) var(--e),
             background-color var(--t-theme) var(--e-soft), color var(--t-theme) var(--e-soft);
  transform:translateY(100%);
}
.cart-view.ready .pay{transform:none; transition-delay:.18s}
.pay:hover{opacity:.85}
.pay:disabled{opacity:.35; cursor:default}

/* --------------------------- ЛЕТЯЩИЙ КЛОН --------------------------- */


/* ------------------------------ АДАПТИВ ----------------------------- */
@media (max-width:1180px){
  .grid{--col-gap:110px; row-gap:88px}
  .cart-inner{grid-template-columns:1fr; row-gap:64px; max-width:calc(100% - 48px)}
  .cart-inner .cart-form{max-width:481px}
}
@media (max-width:840px){
  .grid-view{padding-top:132px}
  .grid{--cols:2; --col-gap:64px; row-gap:64px}
  .logo{font-size:16px}
}
@media (max-width:560px){
  /* телефон: одна коробка в строку, примерно 43% ширины экрана */
  .grid-view{padding-top:104px}
  .grid{--box:min(43vw, 182px); --cols:1; max-width:var(--box); row-gap:48px}
  .card-img{width:var(--box); height:calc(var(--box) * 244 / 161)}
  .card-name{margin-top:20px; font-size:11px}
  .logo{font-size:13px}
  .cart-scroll{padding-top:80px}
}
/* тач-экраны: наведения нет — затемнение и поворот плюса не должны «залипать» после нажатия */
@media (hover:none){
  .card-img:hover{opacity:1}
  .card-plus:hover{transform:none}
  .card-plus:active{transform:scale(.85)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ------------------------------ ЗАКАЗ ------------------------------ */
.fld-l[data-err]::after{content:' — ' attr(data-err); color:var(--muted)}
.form-err{
  margin:0; padding:10px 33px; font-size:13px; letter-spacing:.05em;
  text-align:center; color:var(--ink); border-top:1px solid var(--line);
}
.cart-done{margin:0; font-size:18px; line-height:1.5; letter-spacing:.06em; max-width:520px}
.cart-side.empty .cart-done:not([hidden]) ~ .cart-sum,
.cart-side:has(.cart-done:not([hidden])) .cart-empty{display:none}
.grid-err{flex:1 0 100%; font-size:14px; letter-spacing:.06em; color:var(--muted)}

/* ------------------------- ОТКРЫТИЕ КОРОБКИ ------------------------- */
.stage{position:fixed; inset:0; z-index:45; pointer-events:none}
.bx{position:absolute; will-change:transform}
.bx > *{position:absolute}
.bx-front,.bx-obj{display:block; object-fit:contain; will-change:transform,opacity}
.bx-front{inset:0; width:100%; height:100%}
.bx-obj{transform-origin:50% 100%}
/* набор: бомбочка со сменой поз; позы стоят на нижнем крае, фронт — как в карточке */
.bx-item{transform-origin:50% 100%; will-change:transform}
.bx .bx-pose{position:absolute; bottom:0; display:block; will-change:opacity}
.bx .bx-pose.is-front{left:0; width:100%; height:100%; object-fit:contain}
/* внутренность коробки: светлый картон, у переднего края тень */
.bx-in{left:0; top:0; width:100%;
  background:linear-gradient(to bottom, #f1eee9 0%, #ddd8d0 60%, #b9b2a8 100%)}
.bx-lidwrap{inset:0}
.bx-lid{position:absolute; left:0; width:100%; transform-origin:50% 100%; transform-style:preserve-3d; opacity:0}
.lid-face{position:absolute; inset:0}
/* изнанка крышки — белый картон, как на референсе; сверху кромка цвета принта */
.lid-in{
  background:linear-gradient(to bottom, #fbfaf8 0%, #f0ede8 55%, #dcd6ce 100%);
  border-top:3px solid #d8d2cc;
  box-shadow:inset 1px 0 0 rgba(0,0,0,.07), inset -1px 0 0 rgba(0,0,0,.07);
}
/* принт крышки: полоса с фото, растянутая на глубину. Перевёрнута по вертикали:
   задний край полосы на фото = шарнир внизу крышки */
.lid-out{transform:scaleY(-1); background-repeat:no-repeat; background-position:50% 0}
.done-act{
  margin-top:18px; padding:12px 22px; background:var(--ink); color:var(--on-ink);
  font-size:14px; letter-spacing:.09em; transition:opacity var(--t-fast) var(--e-soft);
}
.done-act:hover{opacity:.85}

/* ------------------------------ НАБОР ------------------------------ */
/* три места столбиком в слоте макета; у каждого свои стрелки и соседи */
.p-img.is-set{height:400px}                   /* набор: бомбочки крупнее и с зазором */
.pi-set{position:absolute; inset:0; display:grid; grid-template-rows:repeat(3, 1fr)}
.pi-set .slot{position:relative}
.p-img .pi-set .slot img{inset:10px 0; height:calc(100% - 20px); transform-origin:50% 50%; will-change:transform,opacity}
/* нижняя бомбочка — картинка с тенью (app.js, buildShadowed): бомбочка в тех же пикселях,
   тень справа-снизу. Бомбочка стоит там же, где обычная, масштабируется вокруг своего центра */
.pi-set{--bh:calc(400px / 3 - 20px)}
.p-img .pi-set .slot img.with-shadow{
  --bw:calc(var(--bh) * var(--ar));
  left:calc(50% - var(--bw) / 2); right:auto; top:10px;
  width:calc(var(--bw) * var(--rw)); height:calc(var(--bh) * var(--rh)); object-fit:fill;
  transform-origin:calc(var(--bw) / 2) calc(var(--bh) / 2);
}
.slot-side{opacity:0; pointer-events:none; cursor:pointer; transition:opacity .3s var(--e-soft)}
.slot.on .slot-side{opacity:1; pointer-events:auto}
.slot.on .slot-side:hover{opacity:.75}
.slot.spinning .slot-main,.slot.spinning .slot-side{opacity:0; transition:none}
.slot-car{position:absolute; inset:0; pointer-events:none}
.slot-arrow{
  position:absolute; top:50%; margin:-22px 0 0 -18px; padding:12px; line-height:0; z-index:4;
  opacity:0; transition:opacity var(--t-fast) var(--e-soft);
}
.slot-prev{left:calc(50% - 96px)}
.slot-next{left:calc(50% + 96px)}
.slot-next svg{transform:scaleX(-1)}
.product-view.ready .slot-arrow{opacity:1; transition:opacity .35s var(--e-soft) calc(var(--fx-base, 0s) + .08s)}
.product-view.ready .slot-arrow:hover{opacity:.5; transition-delay:0s}

/* набор в корзине: состав столбиком */
.ci-set{display:grid; grid-template-rows:repeat(3, 1fr); width:100%; height:100%}
.ci-img .ci-set img{position:static; width:100%; height:100%; object-fit:contain; min-height:0}

/* телефон: товар в карточке на 30% меньше. Стоит в конце файла, чтобы перебить
   правила набора выше; позиции соседей при листании — в app.js (K) */
@media (max-width:560px){
  .p-img{width:168px; height:228px}
  .p-img.is-set{height:280px}
  .pi-set{--bh:calc(280px / 3 - 20px)}
  .p-prev{left:calc(50% - 122px)}
  .p-next{left:calc(50% + 122px)}
  .slot-prev{left:calc(50% - 68px)}
  .slot-next{left:calc(50% + 68px)}
}