/* «Коробка-набор» — команда Мил под отрасль · 17.10.2026 · tools/korobki.py · токены milagpt.io */
.kb{--d:38px;--c1:#0d9488;--c2:#0f766e;--c3:#fff;--acc:#ffd36e;--liner:#f0fdfa;
 position:relative;width:100%;max-width:340px;margin:0 auto;padding:calc(var(--d) * .6) calc(var(--d) * .6) 6px 2px;
 perspective:1100px;perspective-origin:50% 30%;container-type:inline-size;-webkit-tap-highlight-color:transparent;cursor:pointer}
.kb-teal{--c1:#0d9488;--c2:#0b6f66;--c3:#fff;--acc:#ffd36e;--liner:#e6fbf7}
.kb-ink{--c1:#16302d;--c2:#0b1d1b;--c3:#f9f1e7;--acc:#d4a574;--liner:#eef4f3}
.kb-gold{--c1:#d4a574;--c2:#b8845a;--c3:#16302d;--acc:#134e4a;--liner:#fbf4ea}
.kb-cream{--c1:#f9f1e7;--c2:#e3cfb5;--c3:#134e4a;--acc:#0d9488;--liner:#fff}
.kb-hero{max-width:460px;--d:50px}
.kb-box{position:relative;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(8deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.kb:hover .kb-box,.kb.is-tilt .kb-box{transform:rotateY(-10deg) rotateX(4deg) translateY(-4px)}
/* боковина и крышка — толщина коробки */
.kb-side{position:absolute;top:0;left:100%;width:var(--d);height:100%;transform-origin:left center;transform:rotateY(90deg);
 background:linear-gradient(90deg,var(--c2),color-mix(in srgb,var(--c2) 78%,#000));border-radius:0 6px 6px 0;
 display:flex;align-items:center;justify-content:center;overflow:hidden}
.kb-side span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--c3);opacity:.85;white-space:nowrap}
.kb-top{position:absolute;left:0;bottom:100%;width:100%;height:var(--d);transform-origin:bottom center;transform:rotateX(90deg);
 background:linear-gradient(0deg,color-mix(in srgb,var(--c1) 82%,#fff),var(--c2));border-radius:6px 6px 0 0}
/* лицевая сторона */
.kb-front{position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 88%,#fff) 0%,var(--c1) 45%,color-mix(in srgb,var(--c1) 86%,#000) 100%);
 border-radius:6px;padding:12px 12px 10px;color:var(--c3);box-shadow:0 26px 40px -18px rgba(19,78,74,.45),inset 0 0 0 1px rgba(255,255,255,.18);
 transform:translateZ(.1px)}
.kb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:clamp(10px,3.4cqw,12.5px)}
.kb-brand{font-weight:900;letter-spacing:.08em;font-size:1.25em}
.kb-brand b{color:var(--acc);font-weight:900}
.kb-ser{font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-size:.85em}
.kb-front .kb-title{margin:4px 0 9px;font-size:clamp(15px,6cqw,22px);line-height:1.1;font-weight:850;letter-spacing:-.01em;color:var(--c3);min-height:2.2em;display:flex;align-items:flex-end}
/* окно-витрина */
.kb-win{position:relative;border-radius:6px;padding:12px 7px 6px;background:linear-gradient(180deg,var(--liner),color-mix(in srgb,var(--liner) 80%,var(--c1)));
 box-shadow:inset 0 10px 18px -8px rgba(0,0,0,.28),inset 0 0 0 3px color-mix(in srgb,var(--c1) 70%,#000);overflow:hidden}
.kb-figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kb-fig{display:flex;flex-direction:column;align-items:center;min-width:0}
.kb-cell{position:relative;display:block;width:100%;aspect-ratio:300/485;border-radius:6px 6px 3px 3px;overflow:hidden;
 box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c1) 55%,#000)}
.kb-cell img{width:100%;height:100%;object-fit:cover}
.kb-cell::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 10px rgba(0,0,0,.25);pointer-events:none}
/* подставка-табличка с ролью */
.kb-role{position:relative;display:block;width:118%;letter-spacing:-.015em;margin-top:-2px;padding:3px 2px 4px;text-align:center;font-size:clamp(8.5px,3.3cqw,12px);font-weight:800;line-height:1.15;
 color:var(--c3);background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 92%,#fff),color-mix(in srgb,var(--c1) 80%,#000));border-radius:3px 3px 6px 6px;
 box-shadow:0 3px 0 color-mix(in srgb,var(--c2) 70%,#000),0 6px 8px -4px rgba(0,0,0,.35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* стекло */
.kb-glass{position:absolute;inset:0;border-radius:6px;pointer-events:none;border:1.5px solid rgba(255,255,255,.55);
 background:linear-gradient(115deg,rgba(255,255,255,.38) 0 7%,rgba(255,255,255,0) 20% 58%,rgba(255,255,255,.2) 63%,rgba(255,255,255,0) 70%);
 background-size:220% 100%;background-position:100% 0;transition:background-position 1s cubic-bezier(.2,.8,.2,1)}
.kb:hover .kb-glass,.kb.is-tilt .kb-glass{background-position:0 0}
.kb-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;font-size:clamp(11px,3.8cqw,14px);font-weight:800}
.kb-n{background:var(--acc);color:var(--c1);border-radius:999px;padding:3px 10px}
.kb-cream .kb-n,.kb-gold .kb-n{color:#fff}
.kb-ic{font-size:1.35em;line-height:1}
/* живость: фигурки подпрыгивают по очереди */
@keyframes kb-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-11px) rotate(-2deg)}55%{transform:translateY(0)}70%{transform:translateY(-4px) rotate(1deg)}}
.kb.is-on .kb-fig{animation:kb-hop .75s cubic-bezier(.3,.7,.3,1) both}
.kb.is-on .kb-fig:nth-child(2){animation-delay:.16s}
.kb.is-on .kb-fig:nth-child(3){animation-delay:.32s}
/* карточка каталога */
.kb-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));gap:22px;margin-top:30px;align-items:stretch}
.kb-card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid rgba(153,246,228,.7);border-radius:20px;padding:14px 16px 18px;
 box-shadow:0 14px 34px -18px rgba(19,78,74,.28);min-width:0}
.kb-card .kb{max-width:300px}
.kb-deals{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px;line-height:1.35;color:#16302d}
.kb-deals li{display:flex;gap:8px;align-items:flex-start}
.kb-deals i{font-style:normal;flex:none;width:1.4em;text-align:center}
.kb-price{margin:2px 0 0;font-weight:800;color:#0f766e;font-size:14.5px}
.kb-open{margin-top:auto;align-self:stretch;justify-content:center}
@media(max-width:700px){
 .kb-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:24px -16px 0;padding:4px 16px 14px;scroll-padding:0 16px;overscroll-behavior-x:contain;scrollbar-width:thin}
 .kb-card{flex:0 0 84%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
 .kb-box,.kb-glass{transition:none}
 .kb:hover .kb-box,.kb.is-tilt .kb-box{transform:rotateY(-24deg) rotateX(8deg)}
 .kb.is-on .kb-fig{animation:none}
}