/* =========================================================================
   StrazBerry · плитка категории (общий компонент витрины и админки)
   -------------------------------------------------------------------------
   Один и тот же HTML и один и тот же CSS рисуют плитку на витрине, в списке
   категорий и в окне редактирования. Разметку выдаёт category-tile.js.

   Плитка — квадрат 1000 × 1000 условных единиц (u). Все размеры заданы через
   --cqw (1% ширины плитки = 10u: это CSS-единица cqw, а в браузерах без неё —
   пиксели, которые выставляет category-tile.js), поэтому плитка одинаково выглядит и в
   170 px на телефоне, и в 400 px на компьютере, и в превью админки.

   Стиль повторяет готовые баннеры магазина (assets/categories/*.webp):
   чёрный фон, неоновая рамка с «раскалённой» жилкой и свечением, золотой
   логотип StrazBerry поверх верхней грани рамки, розовый кристалл-значок,
   золотой двухуровневый заголовок между неоновыми линейками, искры по углам.

   Геометрия (проценты плитки):
     рамка   x 5.6 … 94.4,  y 15.8 … 89.8
     лого    y 4.6 … 18.2   (прорезает верхнюю грань рамки)
     заголовок  x 29.4 … 92.4, y 19.2 … 37.2   (630u × 180u — см. VARIANTS.std в JS)
     фото    y 35.8 … 89.4  (внутри рамки, верх плавно уходит в чёрный)
   ========================================================================= */

@font-face {
  font-family: 'SB Heading';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/category-tile/fonts/philosopher-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'SB Heading';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/category-tile/fonts/philosopher-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Угол «кометы», бегущей по неоновой рамке при наведении. */
@property --ct-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.ct {
  --ct-font: 'SB Heading', 'Philosopher', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ct-pink: #f5269f;          /* тело неоновой трубки (замерено по баннерам) */
  --ct-pink-2: #ff6cc0;
  --ct-hot: #ee1296;           /* насыщенный малиновый — кристалл-значок */
  --ct-core: #ffc6f5;          /* «раскалённая» жилка */
  --ct-g1: #fdf1c3;            /* золото заголовка: верх → низ, как на баннерах */
  --ct-g2: #f7e08f;
  --ct-g3: #efc96a;
  --ct-g4: #e0a73f;
  --cqw: 1cqw;                 /* 1% ширины плитки; в старых браузерах без cqw подменяется скриптом в пикселях */
  --ct-bw: max(1.5px, calc(.44*var(--cqw))); /* толщина неоновой трубки */
  --ct-cw: max(.8px, calc(.14*var(--cqw)));  /* «раскалённая» жилка внутри трубки */
  --ct-r: calc(3.6*var(--cqw));              /* радиус углов рамки */

  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: #000;
  color: #f3cd6a;
  font-family: var(--ct-font);
  font-kerning: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ct *,
.ct *::before,
.ct *::after { box-sizing: border-box; }
.ct > * { position: absolute; display: block; }

/* ---------- искры и пыль по углам (растр на чёрном — как на баннерах) ---------- */
.ct__sparkles {
  inset: 0;
  /* Выше фото (z-index 2), но ниже рамки (в разметке идёт перед .ct__frame): вспышки всегда поверх картинки.
     sparkles.webp — без прозрачности (искры на чёрном), поэтому режим screen: чёрное «пропадает»,
     а искры накладываются поверх фото как свечение. Чёрный фон плитки задан в .ct. */
  z-index: 3;
  pointer-events: none;
  background: url('/assets/category-tile/sparkles.webp') center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  transition: opacity .5s ease, transform .6s ease;
}

/* ---------- фото ---------- */
/* Поле фото — это ровно внутренность неоновой рамки: левый, правый и нижний края проходят по оси трубки
   (под самой трубкой, она рисуется поверх), а нижние углы закруглены тем же радиусом, что и рамка.
   Поэтому фото всегда упирается именно в рамку: ни зазора, ни тёмных «клиньев» в углах.
   Сверху поле начинается под заголовком (y 35.8 %) и плавно уходит в чёрный. */
.ct__photo {
  z-index: 2;
  left: calc(5.5% + var(--ct-bw) * .5);
  right: calc(5.5% + var(--ct-bw) * .5);
  top: 35.8%;
  bottom: calc(10.2% + var(--ct-bw) * .5);
  overflow: hidden;
  border-radius: 0 0 calc(var(--ct-r) - var(--ct-bw) * .5) calc(var(--ct-r) - var(--ct-bw) * .5);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%);
}
/* Размер и положение фото задаются явно (а не transform), чтобы масштаб никогда не менял границы поля:
     --iwr, --ihr — размер фото при масштабе 1× в долях поля (скрипт считает их по пропорциям снимка;
                    пока не посчитаны — 1, и фото просто заполняет поле, как object-fit: cover);
     --z          — масштаб: 1 = фото заполняет поле, меньше 1 — фото уменьшается и видно целиком,
                    больше 1 — приближается;
     --fx, --fy   — положение: 0 = фото прижато к левому/верхнему краю рамки, 1 = к правому/нижнему
                    (если фото больше поля — рамка стоит у края фото, если меньше — фото у края рамки).
   Селектор `.ct .ct__img` нарочно сильнее общих правил `img { … }` витрины и админки. */
.ct .ct__img {
  --iw: calc(var(--iwr, 1) * var(--z, 1));
  --ih: calc(var(--ihr, 1) * var(--z, 1));
  position: absolute;
  display: block;
  width: calc(var(--iw) * 100%);
  height: calc(var(--ih) * 100%);
  left: calc((1 - var(--iw)) * var(--fx, .5) * 100%);
  top: calc((1 - var(--ih)) * var(--fy, .5) * 100%);
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%);
  transform-origin: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  -webkit-user-drag: none;
}

/* Плитка без фото: неоновый кристалл в пунктирной рамке. */
.ct__ph {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 14%;
  bottom: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2.4*var(--cqw));
  color: var(--ct-pink-2);
  text-align: center;
  border: max(1px, calc(.3*var(--cqw))) dashed rgba(255, 108, 192, .5);
  border-radius: calc(3.2*var(--cqw));
}
.ct__ph-gem {
  position: relative;
  width: calc(21*var(--cqw));
  aspect-ratio: 460 / 351;
  background-image: url('/assets/category-tile/emblem-gem.webp');
}
.ct__ph b {
  display: none;
  font: 700 calc(3.5*var(--cqw))/1.25 var(--ct-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 190, 228, .9);
}
.ct__ph small {
  display: none;
  font: 500 calc(2.7*var(--cqw))/1.3 'Manrope', system-ui, sans-serif;
  color: rgba(255, 190, 228, .6);
}
.ct--quiet-ph .ct__ph { border-color: transparent; }

/* ---------- неоновая рамка (тонкая трубка, как на готовых баннерах) ---------- */
.ct__frame {
  z-index: 3;
  left: 5.5%;
  right: 5.5%;
  top: 15.8%;
  bottom: 10.2%;
  pointer-events: none;
  border: var(--ct-bw) solid var(--ct-pink);
  border-radius: var(--ct-r);
  box-shadow:
    0 0 calc(.45*var(--cqw)) rgba(255, 30, 135, 1),
    0 0 calc(1.3*var(--cqw)) rgba(255, 12, 118, .92),
    0 0 calc(3.2*var(--cqw)) rgba(255, 0, 100, .52),
    inset 0 0 calc(.6*var(--cqw)) rgba(255, 30, 135, .9),
    inset 0 0 calc(2*var(--cqw)) rgba(255, 12, 118, .38);
  transition: box-shadow .35s ease, border-color .35s ease;
}
/* «раскалённая» жилка точно по центру неоновой трубки */
.ct__frame::after {
  content: "";
  position: absolute;
  inset: calc(var(--ct-bw) * -.5 - var(--ct-cw) * .5);
  border: var(--ct-cw) solid var(--ct-core);
  border-radius: inherit;
  opacity: .96;
  filter: drop-shadow(0 0 calc(.2*var(--cqw)) rgba(255, 170, 225, .95));
}
/* «комета» по рамке — только при наведении */
.ct__frame::before {
  --ct-ring: max(1.4px, calc(.34*var(--cqw)));
  content: "";
  position: absolute;
  inset: calc(var(--ct-bw) * -.5 - var(--ct-ring) * .5);
  border-radius: inherit;
  padding: var(--ct-ring);
  background: conic-gradient(from var(--ct-a), transparent 0 78%, rgba(255, 255, 255, 0) 80%, rgba(255, 244, 252, .98) 92%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .ct__frame::before {
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .ct__frame::before { display: none; }
}

/* ---------- логотип поверх верхней грани рамки ---------- */
.ct__plate {
  z-index: 4;
  left: 22%;
  right: 21.4%;
  top: 12.6%;
  height: 6.4%;
  pointer-events: none;
  background: #000;
  border-radius: calc(3*var(--cqw));
  box-shadow: 0 0 calc(2.2*var(--cqw)) calc(1.5*var(--cqw)) #000;
}
/* золотой логотип StrazBerry в шапке — ваш чистый файл strazberry-lockup-v2.webp (при замене дайте файлу новое имя: картинки кешируются на 7 дней) */
.ct__brand {
  z-index: 5;
  left: 21.6%;
  top: .1%;
  width: 57.9%;
  aspect-ratio: 463 / 151;
  pointer-events: none;
  background: url('/assets/category-tile/strazberry-lockup-v2.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 calc(.7*var(--cqw)) rgba(255, 170, 60, .3));
}

/* яркие «бусины» там, где дуга угла переходит в прямую грань рамки */
.ct__beads {
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: url('/assets/category-tile/beads.svg') center / 100% 100% no-repeat;
  transition: opacity .35s ease, transform .6s ease;
}

/* ---------- малиновый кристалл и разделитель слева от заголовка ---------- */
.ct__emblem {
  z-index: 5;
  left: 8.7%;
  top: 19.3%;
  width: 14.5%;
  aspect-ratio: 1158 / 1096;
  pointer-events: none;
  transition: opacity .3s ease;
}
/* алмаз и звёзды — отдельные чёткие картинки; положение — проценты от рамки значка (по исходному рисунку) */
.ct__gem,
.ct__star,
.ct__ph-gem {
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.ct__gem,
.ct__star { position: absolute; }
.ct__gem {
  left: 20.466%; top: 35.949%; width: 79.534%; height: 64.051%;
  background-image: url('/assets/category-tile/emblem-gem.webp');
}
.ct__star { transform-origin: 50% 50%; }
.ct__star--1 { left: 35.233%; top: 0;        width: 27.634%; height: 30.839%; background-image: url('/assets/category-tile/emblem-star-1.webp'); }
.ct__star--2 { left: 16.926%; top: 15.967%;  width: 17.617%; height: 19.708%; background-image: url('/assets/category-tile/emblem-star-2.webp'); }
.ct__star--3 { left: 0;       top: 56.569%;  width: 27.807%; height: 32.482%; background-image: url('/assets/category-tile/emblem-star-3.webp'); }
.ct__star--4 { left: 23.661%; top: 82.482%;  width: 13.817%; height: 15.876%; background-image: url('/assets/category-tile/emblem-star-4.webp'); }
.ct__divider {
  z-index: 5;
  left: 25.2%;
  top: 20.8%;
  height: 14%;
  width: max(1.5px, calc(.34*var(--cqw)));
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 140, 215, 0), #ff9ee0 12%, #ffbaf4 30%, #fff0ff 50%, #ffbaf4 70%, #ff9ee0 88%, rgba(255, 140, 215, 0));
  box-shadow: 0 0 calc(.5*var(--cqw)) rgba(255, 40, 160, 1), 0 0 calc(1.5*var(--cqw)) rgba(255, 20, 130, .75);
  transition: opacity .3s ease;
}
/* яркая точка в середине разделителя */
.ct__divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1.5*var(--cqw));
  height: calc(1.5*var(--cqw));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, rgba(255, 200, 244, .85) 42%, rgba(255, 47, 165, 0) 74%);
}

/* ---------- заголовок ---------- */
.ct__title {
  z-index: 6;
  left: 29.4%;
  right: 7.6%;
  top: 19.2%;
  height: 18%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  opacity: 1;
  transition: opacity .25s ease, left .3s ease, right .3s ease;
}
.ct__title[data-pending] { opacity: 0; }
.ct__title[data-pending] .ct__line { --s: 70; }

/* Заголовок «во всю ширину»: когда название длинное, значок и разделитель
   уступают место тексту (решает движок раскладки). */
.ct--wide .ct__title { left: 9.4%; right: 9.4%; }
.ct--wide .ct__emblem,
.ct--wide .ct__divider { opacity: 0; }

.ct__line {
  --s: 80;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .34em;
  /* высота строки = высота прописных (0.66 em); --g — промежуток над строкой (задаёт движок раскладки) */
  height: calc(var(--s) * calc(.066*var(--cqw)));
  margin-top: calc(var(--g, 0) * calc(.1*var(--cqw)));
  font-size: calc(var(--s) * calc(.1*var(--cqw)));
  white-space: nowrap;
}
/* Буквы собираются из трёх слоёв — как объёмные золотые буквы на баннерах:
     1) сам .t        — тёмная «толщина» (выдавка вниз-вправо) и мягкая тень на подложку;
     2) ::before      — светлая кромка на верхне-левой грани (сдвинута вверх-влево);
     3) ::after       — золотая заливка (градиент), строго по контуру букв.
   Никаких blur-свечений и filter: контур остаётся чётким на любом размере, а текст не
   перерисовывается заново при наведении. Копия текста лежит в data-t. */
.ct__line .t {
  --ct-x: max(.45px, .012em);  /* «глубина» букв: не тоньше 0,45 px, чтобы объём читался и на маленьких плитках */
  position: relative;
  flex: none;
  display: block;
  padding-left: .025em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6b3a0e;
  -webkit-text-stroke: .03em #6b3a0e;
  text-shadow:
    var(--ct-x) var(--ct-x) 0 #85511a,
    calc(var(--ct-x) * 2) calc(var(--ct-x) * 2) 0 #65360c,
    calc(var(--ct-x) * 2.6) calc(var(--ct-x) * 3.4) calc(var(--ct-x) * 2) rgba(0, 0, 0, .6);
}
.ct__line .t::before,
.ct__line .t::after {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  padding-left: .025em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: none;
  -webkit-text-stroke: .02em transparent; /* лёгкий «жирный» штрих — как плотные буквы на баннерах */
}
.ct__line .t::before {
  color: #fff3c2;
  -webkit-text-fill-color: #fff3c2;
  -webkit-text-stroke-color: #fff3c2;
  transform: translate(calc(var(--ct-x) * -.8), calc(var(--ct-x) * -.8));
}
.ct__line .t::after {
  background: linear-gradient(180deg, #fbe7a4 4%, #f6d57e 24%, #f0c567 48%, #e5ac4c 76%, #d4963b 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* неоновые линейки по бокам короткой строки */
.ct__line[data-rules]::before,
.ct__line[data-rules]::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  height: max(1px, .05em);
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 47, 165, 0), var(--ct-pink) 42%, var(--ct-pink-2));
  box-shadow: 0 0 .26em var(--ct-pink), 0 0 .8em rgba(255, 47, 165, .55);
}
.ct__line[data-rules]::after { background: linear-gradient(270deg, rgba(255, 47, 165, 0), var(--ct-pink) 42%, var(--ct-pink-2)); }

/* до загрузки шрифта (и без JS) — одна строка обычным текстом */
.ct__title > .ct__fallback {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: calc(7.4*var(--cqw));
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #f3cd6a;
  text-wrap: balance;
}

/* ---------- наведение (витрина) ---------- */
.cat-card:hover .ct .ct__img,
.cat-card:focus-visible .ct .ct__img { transform: scale(1.035); }
.cat-card:hover .ct__frame,
.cat-card:focus-visible .ct__frame {
  border-color: #ff4fb4;
  box-shadow:
    0 0 calc(.4*var(--cqw)) rgba(255, 79, 180, 1),
    0 0 calc(1.3*var(--cqw)) rgba(255, 47, 165, .95),
    0 0 calc(3.6*var(--cqw)) rgba(255, 20, 140, .62),
    inset 0 0 calc(.7*var(--cqw)) rgba(255, 79, 180, .95),
    inset 0 0 calc(2.6*var(--cqw)) rgba(255, 20, 140, .42);
}
.cat-card:hover .ct__beads,
.cat-card:focus-visible .ct__beads { transform: scale(1.012); }
.cat-card:hover .ct__frame::before,
.cat-card:focus-visible .ct__frame::before {
  opacity: 1;
  animation: ct-orbit 2.6s linear infinite;
}
.cat-card:hover .ct__sparkles,
.cat-card:focus-visible .ct__sparkles { animation: ct-twinkle 2.4s ease-in-out infinite; }
/* Значок при наведении — спокойный «дорогой» блеск вместо дёрганья:
     • алмаз: раз в несколько секунд по контуру скользит узкий светлый блик (маска — сам алмаз), остальное время пауза;
     • звёзды: без поворотов и скачков — плавно притухают и разгораются, по очереди и с разным периодом.
   Анимируются только opacity / transform / background-position у маленьких отдельных слоёв —
   надпись и фото при этом не перерисовываются. */
.ct__star--1 { --st: 4.6s; --sd: 0s; }
.ct__star--2 { --st: 3.8s; --sd: .9s; }
.ct__star--3 { --st: 5.2s; --sd: 1.7s; }
.ct__star--4 { --st: 4.2s; --sd: .4s; }
.cat-card:hover .ct__star,
.cat-card:focus-visible .ct__star,
.ct--editable:hover .ct__star {
  animation: ct-star var(--st, 4.4s) ease-in-out var(--sd, 0s) infinite;
  will-change: transform, opacity;
}
/* блик на алмазе: полоска света, обрезанная по форме алмаза */
.ct__gem::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 41%, rgba(255, 214, 244, .5) 46%, rgba(255, 250, 254, .98) 50%, rgba(255, 214, 244, .5) 54%, transparent 59%) 100% 0 / 240% 100% no-repeat;
  -webkit-mask: url('/assets/category-tile/emblem-gem.webp') center / 100% 100% no-repeat;
  mask: url('/assets/category-tile/emblem-gem.webp') center / 100% 100% no-repeat;
}
.cat-card:hover .ct__gem::after,
.cat-card:focus-visible .ct__gem::after,
.ct--editable:hover .ct__gem::after {
  animation: ct-gem-glint 5.4s cubic-bezier(.4, 0, .3, 1) .3s infinite;
  will-change: background-position;
}
/* звезда: мягкое «дыхание» — притухает, затем разгорается чуть ярче обычного; без вращения */
@keyframes ct-star {
  0%, 100% { opacity: 1;   transform: scale(1);    filter: brightness(1); }
  38%      { opacity: .38; transform: scale(.9);   filter: brightness(1); }
  66%      { opacity: 1;   transform: scale(1.06); filter: brightness(1.25); }
}
/* блик проходит слева направо за ~1.3 с и пропадает до следующего цикла */
@keyframes ct-gem-glint {
  0%       { background-position: 100% 0; }
  24%, 100% { background-position: 0% 0; }
}
@keyframes ct-orbit { to { --ct-a: 360deg; } }
@keyframes ct-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .72; transform: scale(1.012); }
}

/* ---------- правка прямо на плитке (только админка) ---------- */
.ct--editable .ct__title { cursor: text; }
.ct--editable .ct__title:focus-visible { outline: none; }
.ct--editable .ct__title:hover,
.ct--editable .ct__title:focus-visible {
  outline: max(1px, calc(.26*var(--cqw))) dashed rgba(255, 255, 255, .55);
  outline-offset: calc(.9*var(--cqw));
  border-radius: calc(1.2*var(--cqw));
}
.ct--editable .ct__title::after {
  content: "";
  position: absolute;
  right: calc(-2.2*var(--cqw));
  top: calc(-3.2*var(--cqw));
  width: calc(6*var(--cqw));
  height: calc(6*var(--cqw));
  border-radius: 50%;
  background: var(--ct-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4Z'/%3E%3C/svg%3E") center / 56% no-repeat;
  box-shadow: 0 0 calc(1.6*var(--cqw)) rgba(255, 47, 165, .85);
  opacity: 0;
  transform: scale(.55);
  transition: opacity .18s ease, transform .2s cubic-bezier(.3, 1.5, .5, 1);
  pointer-events: none;
}
.ct--editable .ct__title:hover::after,
.ct--editable .ct__title:focus-visible::after { opacity: 1; transform: none; }
.ct--editable .ct__title.is-editing { outline: none; cursor: text; }
.ct--editable .ct__title.is-editing::after { display: none; }
.ct--editable .ct__title.is-editing > .ct__line { visibility: hidden; }
.ct--editable .ct__title.is-ghost .ct__line { opacity: .42; }

.ct__editor {
  --s1: 90;
  --s2: 60;
  position: absolute;
  left: -1.6%;
  right: -1.6%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: calc(.9*var(--cqw)) calc(1.2*var(--cqw));
  min-height: 1.3em;
  text-align: center;
  white-space: pre;
  overflow: visible;
  outline: none;
  font: 700 calc(var(--s2) * calc(.1*var(--cqw))) / 1.12 var(--ct-font);
  letter-spacing: .025em;
  text-transform: uppercase;
  color: #ffe9a6;
  caret-color: #fff;
  background: rgba(8, 0, 6, .82);
  border-radius: calc(1.6*var(--cqw));
  box-shadow: 0 0 0 max(1px, calc(.3*var(--cqw))) rgba(255, 108, 192, .95), 0 0 calc(3*var(--cqw)) rgba(255, 47, 165, .55);
  -webkit-user-select: text;
  user-select: text;
  text-shadow: 0 0 calc(.5*var(--cqw)) rgba(255, 190, 70, .5);
}
.ct__editor::first-line { font-size: calc(var(--s1) * calc(.1*var(--cqw))); }
.ct__editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 233, 166, .4);
}

.ct--editable .ct__photo { cursor: grab; touch-action: none; }
.ct--editable .ct__photo.is-dragging { cursor: grabbing; }
.ct--editable .ct__photo.is-dragging .ct__img { transition: none; }
/* Кольцо фокуса с клавиатуры: белая линия в тёмной окантовке — видна и на светлых, и на тёмных фото */
.ct--editable .ct__photo:focus-visible { outline: none; }
.ct--editable .ct__photo:focus-visible::before {
  content: "";
  position: absolute;
  inset: calc(1.6*var(--cqw)) calc(1.6*var(--cqw)) calc(1.6*var(--cqw));
  z-index: 3;
  border: calc(.5*var(--cqw)) solid #fff;
  border-radius: calc(2.4*var(--cqw));
  pointer-events: none;
  box-shadow: 0 0 0 calc(.4*var(--cqw)) rgba(0, 0, 0, .6), inset 0 0 0 calc(.4*var(--cqw)) rgba(0, 0, 0, .6);
}
.ct--editable.ct--no-photo .ct__photo { cursor: pointer; touch-action: auto; }
.ct--editable .ct__ph b,
.ct--editable .ct__ph small { display: block; }
.ct--editable.ct--no-photo .ct__ph:hover { border-color: rgba(255, 140, 210, .95); color: #fff; }
.ct--editable .ct__photo.is-uploading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55) radial-gradient(circle at 50% 50%, transparent 0 calc(5*var(--cqw)), transparent calc(5*var(--cqw)));
}

.ct.is-drop .ct__frame {
  border-color: #fff;
  box-shadow: 0 0 calc(1*var(--cqw)) #fff, 0 0 calc(3*var(--cqw)) var(--ct-pink), 0 0 calc(7*var(--cqw)) var(--ct-pink), inset 0 0 calc(4*var(--cqw)) rgba(255, 47, 165, .7);
}
.ct.is-drop .ct__photo { background: rgba(255, 47, 165, .22); }

@media (prefers-reduced-motion: reduce) {
  .ct__img,
  .ct__frame,
  .ct__title,
  .ct__sparkles,
  .ct__emblem,
  .ct__divider { transition: none !important; animation: none !important; }
  .ct__star, .ct__gem, .ct__gem::after { animation: none !important; will-change: auto !important; }
  .cat-card:hover .ct__frame::before,
  .cat-card:focus-visible .ct__frame::before { animation: none !important; opacity: 0; }
}