/* ============================================================
   ВРАЩАЮЩАЯСЯ ВИТРИНА «ХИТЫ» — ЗАДАЁТСЯ ТОЛЬКО ЗДЕСЬ.

   Круглая витрина товаров на главной: рамка секции, сцена, кольцо, карточки
   с фото, названием и ценой, подсказка под витриной, наведение, курсор при
   перетаскивании, тёмная тема, промежуточные ширины и телефон.

   Сведено 2026-08-11 из семи файлов: storefront.v3.css,
   design-lab-dynamic.v1.css, design-lab-flagship.v2.css,
   design-lab-review-fixes.v4.2.css, mobile-layout.v2.css, dark-theme.v1.css,
   ui-tweaks.v1.css. Ни один из них не опустел — в них осталось оформление
   других участков, поэтому число слоёв временно выросло с 20 до 21.

   Сюда НЕ входит и входить не должно:
     • JavaScript вращения и жестов (storefront.v3.js, render3dCarousel):
       он же ставит каждой карточке свой transform и класс .dragging;
     • переменная --motion-speed: она объявлена в :root, задаётся из админки
       и ею пользуется ещё бегущая лента брендов;
     • общие .wrap, .section-sub и h2 без приставки #carousel3d;
     • карточка товара .card, каталог, лента брендов.

   ── Что осталось у прежнего хозяина намеренно ──
   Заголовок #carousel3d h2 упомянут в design-lab-flagship.v2.css внутри двух
   ОБЩИХ правил ритма заголовков разделов — вместе с .section-head, .perks h2
   и #faqSection h2. Оттуда он не взят: это единый визуальный язык всех
   заголовков сайта. Выдернешь оттуда карусель — и следующая правка отступов
   заголовков молча обойдёт её стороной. Тот же случай, что с шестью общими
   правилами карточки товара (см. config/css-layers.json). Поэтому сюда
   переехали только собственные color и font-family заголовка, а
   position:relative и letter-spacing остались общими и продолжают выигрывать.

   ── Что нельзя переставлять местами ──
   В блоке до 680px сначала margin-bottom, потом margin. margin —
   сокращённое и переписывает все стороны; в каскаде оно и стояло последним,
   поэтому нижний отступ секции на телефоне равен 30px, а не 44px. Расчёт
   css-who-wins этого не видит: сокращённые и полные свойства он считает
   разными. Проверено вручную, закреплено тестом.

   Правишь витрину «Хиты» — правь здесь. Что где выигрывает:
   npm run who-wins #carousel3d
   ============================================================ */
#carousel3d{background:radial-gradient(520px 260px at 50% 48%,rgba(23,105,224,.12),transparent 72%),
    linear-gradient(145deg,#edf3fa,#f8fafc);border:1px solid var(--dl-line);border-radius:28px;margin:28px auto 42px;max-width:1224px;overflow:hidden;width:calc(100% - 56px)}
html[data-theme="dark"] #carousel3d{background:linear-gradient(145deg,#102238,#0d1b2d)}
#carousel3d h2{color:var(--ink);font-family:'Unbounded', sans-serif}
#carousel3d .section-sub{color:var(--muted);margin-bottom:2px;max-width:620px}
#carousel3d .c3d-stage{align-items:center;cursor:default;display:flex;justify-content:center;overflow:hidden;padding:0}
#carousel3d .c3d-item{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fff;border:1px solid var(--dl-line);border-radius:20px;box-shadow:0 18px 42px rgba(7,26,49,.13);height:auto;inset:0;padding:12px;position:absolute;transition:opacity var(--fl-fast) linear, box-shadow var(--fl-base) var(--fl-ease);width:auto}
#carousel3d .c3d-item img{border-radius:14px;height:156px}
#carousel3d .c3d-hint{color:var(--muted);display:none !important}
#carousel3d .c3d-ring{-webkit-transform-style:preserve-3d;cursor:grab;display:block;height:286px;padding:0;position:relative;touch-action:pan-y;transform-style:preserve-3d;transition:none !important;width:196px}
#carousel3d .c3d-item:hover{box-shadow:var(--fl-shadow-2)}
#carousel3d .c3d-ring.dragging{cursor:grabbing}
html[data-theme="dark"] #carousel3d .c3d-item{background:var(--card-bg);border-color:var(--dl-line, #26394e)}
.c3d-stage{align-items:center;display:flex;height:380px;justify-content:center;overflow-x:visible;overflow-y:hidden}
.c3d-ring{-webkit-touch-callout:none;-webkit-transform-style:preserve-3d;-webkit-user-select:none;cursor:grab;height:280px;position:relative;touch-action:pan-y;transform-style:preserve-3d;user-select:none;width:190px;will-change:transform}
.c3d-ring.dragging{cursor:grabbing}
.c3d-item{-webkit-backface-visibility:hidden;align-items:center;backface-visibility:hidden;background:var(--card-bg);border:1px solid var(--sky2);border-radius:16px;box-shadow:0 14px 34px rgba(10,87,163,.14);display:flex;flex-direction:column;inset:0;padding:12px;position:absolute;transition:opacity .1s linear}
.c3d-item img{background:#fff;border-radius:10px;height:150px;object-fit:contain;pointer-events:none;width:100%}
.c3d-item .t{color:var(--ink);font-size:12px;font-weight:700;height:32px;line-height:1.3;margin:9px 0 5px;overflow:hidden;text-align:center}
.c3d-item .p{color:var(--night);font-family:'Manrope',sans-serif;font-size:14px;font-variant-numeric:tabular-nums;font-weight:800}
.c3d-item .po{color:var(--muted);font-family:'Manrope',sans-serif;font-size:11px;margin-left:4px;text-decoration:line-through}
html[data-theme="dark"] .c3d-item{background:var(--card-bg, #14202e) !important;border-color:var(--dl-line, #26394e) !important}
html[data-theme="dark"] .c3d-item .t,
html[data-theme="dark"] .c3d-item .p{color:var(--ink, #e6eef7) !important}
.c3d-hint{color:var(--muted);font-size:12.5px;margin-top:6px;text-align:center}
/* Обычные значения — БЕЗ @media, нарочно. Мобильный блок ниже перебивает
   их по порядку: селекторы одинаковой силы, !important у обоих. Обвязывать
   эти два правила в @media(min-width:761px) нельзя: между 760 и 761 есть
   дробные ширины (масштаб, плотность экрана), и там не сработал бы ни один
   блок — высота сцены прыгнула бы на запасные 380px из .c3d-stage. */
#carousel3d > .wrap{padding:22px 36px 18px !important}
#carousel3d .c3d-stage{height:300px !important}
@media(max-width:760px){
  #carousel3d > .wrap{padding:20px 16px 14px !important}
  #carousel3d .c3d-stage{height:280px !important}
}
@media(max-width:680px){
  #carousel3d{border-radius:22px;margin-bottom:44px;margin:20px auto 30px;max-width:100%;width:calc(100% - 24px)}
  #carousel3d > .wrap{max-width:100%}
  #carousel3d .c3d-item{border-radius:17px}
  #carousel3d .c3d-item img{height:128px}
  #carousel3d .c3d-ring{height:250px;width:170px}
  .c3d-stage{height:340px}
}