/* Sendajoy · редактор: панель, слоты с фотографиями, полоса публикации.
   Отдельный файл, чтобы витрина без редактора выглядела ровно так же,
   как выглядит сейчас: этот файл только добавляет, ничего не переопределяя
   у sendajoy.css. */

:root{
  --sj-panel-w: 320px;
}

/* ───── фотография внутри слота ───── */
.slot{position:relative;overflow:hidden}
.slot img.sj-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;display:block}
.slot.is-filled{border-style:solid;border-color:transparent;background:#0b1220}
.slot.is-filled .plus,
.slot.is-filled figcaption{position:relative;z-index:1;color:#fff;
  text-shadow:0 1px 10px #00000099}
.slot.is-filled .plus{display:none}
html.sj-final .slot.is-filled figcaption{display:none}
.slot.sj-hidden{display:none}

/* курсор говорит, что карточка кликается — до всяких подсказок */
html:not(.sj-final) .slot{cursor:pointer;transition:border-color .15s,transform .15s}
html:not(.sj-final) .slot:hover{border-color:var(--coral,#ff6d52);transform:translateY(-2px)}

/* Медальоны витрины — круглые картинки на прозрачном фоне, без
   border-radius. Фотография покупателя прямоугольная, поэтому
   круг ей приходится задавать здесь. */
.hero .medal.sj-own{object-fit:cover;border-radius:50%}

/* секция, где не осталось ни одного кадра */
.sj-nophoto .slots,
.sj-nophoto .slot{display:none}

/* На готовой странице карточек столько, сколько загрузил покупатель.
   Оставлять сетку из пяти колонок нельзя: один кадр в ней выглядит
   маркой на конверте. Число колонок ставит скрипт. */
html.sj-final .slots{grid-template-columns:repeat(var(--sj-cols,5),1fr);
  max-width:calc(var(--sj-cols,5) * 260px);margin-inline:auto}
html.sj-final .slot{min-height:min(46vh,380px)}

/* ───── правка текста ───── */
html.sj-edit-on .sj-edit{outline:1px dashed transparent;border-radius:6px;
  transition:outline-color .15s,background .15s}
html.sj-edit-on .sj-edit:hover{outline-color:#c3d0dd;background:#ffffff70}
html.sj-edit-on .sj-edit:focus{outline:2px solid var(--coral,#ff6d52);background:#fff}

/* ───── боковая панель ───── */
.sj-panel{position:fixed;left:0;top:0;bottom:0;width:var(--sj-panel-w);z-index:60;
  overflow-y:auto;padding:26px 22px 120px;background:#15202b;color:#f6f0e7;
  font:14px/1.5 Manrope,"Noto Sans Thai","Noto Sans SC",Arial,sans-serif}
.sj-panel .lbl{margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.sj-panel h3{margin:6px 0 18px;font:800 21px/1.2 inherit;letter-spacing:-.02em}
.sj-panel .sj-name{display:block;margin-bottom:20px;font-size:12px;opacity:.75}
.sj-panel .sj-name input{display:block;width:100%;margin-top:6px;padding:11px 12px;
  border:1px solid #33465a;border-radius:9px;background:#0e1720;color:#fff;
  font:15px inherit}
.sj-panel .sj-name input:focus{outline:2px solid var(--coral,#ff6d52);border-color:transparent}
.sj-step{margin:22px 0 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}

.sj-row{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid #24323f}
.sj-row .thumb{flex:0 0 46px;height:46px;border-radius:8px;background:#0e1720;
  border:1px dashed #33465a;overflow:hidden;display:grid;place-items:center}
.sj-row .thumb img{width:100%;height:100%;object-fit:cover}
.sj-row .body{min-width:0}
.sj-row i{display:block;font-style:normal;font-size:12px;opacity:.7;margin-bottom:5px}
.sj-row button{margin-right:8px;padding:0;border:0;background:none;cursor:pointer;
  font:600 13px inherit;color:var(--coral,#ff6d52);text-decoration:underline;
  text-underline-offset:3px}
.sj-row button.drop{color:#8fa3b6}

.sj-tip-text{margin:20px 0 0;font-size:12px;line-height:1.55;opacity:.55}
.sj-done{margin-top:20px;width:100%;padding:14px;border:0;border-radius:10px;
  background:#f6f0e7;color:#15202b;font:800 15px inherit;cursor:pointer}
.sj-done:hover{background:#fff}

html.sj-panel-on body{padding-left:var(--sj-panel-w)}
html.sj-final .sj-panel,
html.sj-final .sj-toggle,
html.sj-final.sj-panel-on body{display:revert}
html.sj-final.sj-panel-on body{padding-left:0}
html.sj-final .sj-panel{display:none}

/* ───── предпросмотр ───── */
.sj-preview-bar{display:none;position:fixed;left:0;right:0;top:0;z-index:70;
  align-items:center;justify-content:center;gap:16px;padding:10px 16px;
  background:#15202b;color:#f6f0e7;font:13px Manrope,Arial,sans-serif}
.sj-preview-bar button{border:0;border-radius:7px;padding:8px 12px;cursor:pointer;
  background:var(--coral,#ff6d52);color:#fff;font:700 13px inherit}
html.sj-final .sj-preview-bar{display:flex}
html.sj-final body{padding-top:44px}

/* ───── полоса публикации ───── */
.sj-publish{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:14px 16px 16px;background:#15202bf2;backdrop-filter:blur(6px);
  text-align:center;color:#f6f0e7;font:13px Manrope,Arial,sans-serif}
html.sj-final .sj-publish{display:block}
.sj-publish .go{padding:15px 28px;border:0;border-radius:10px;cursor:pointer;
  background:var(--coral,#ff6d52);color:#fff;font:800 16px inherit}
.sj-publish .go[disabled]{opacity:.6;cursor:default}
.sj-publish .note{margin:9px 0 0;font-size:11.5px;opacity:.6}

/* ───── шторка и подсказка ───── */
.sj-toggle{display:none}
.sj-hint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  padding:10px 16px;border-radius:999px;background:#15202be6;color:#f6f0e7;
  font:12.5px Manrope,"Noto Sans Thai","Noto Sans SC",Arial,sans-serif;
  transition:opacity .6s;pointer-events:none;max-width:90vw;text-align:center}
html.sj-final .sj-hint{display:none}

@media(max-width:980px){
  html.sj-panel-on body{padding-left:0;padding-bottom:70px}
  .sj-panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:74vh;
    border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .25s;
    padding-bottom:26px}
  html.sj-sheet-open .sj-panel{transform:none}
  .sj-toggle{display:block;position:fixed;left:0;right:0;bottom:0;z-index:61;
    border:0;padding:15px;background:#15202b;color:#f6f0e7;cursor:pointer;
    font:700 14px Manrope,"Noto Sans Thai","Noto Sans SC",Arial,sans-serif}
  html.sj-sheet-open .sj-toggle{bottom:auto;top:calc(100vh - 74vh - 48px)}
  html.sj-final .sj-toggle{display:none}
  .sj-hint{bottom:66px}
}

@media print{
  .sj-panel,.sj-toggle,.sj-publish,.sj-preview-bar,.sj-hint{display:none!important}
  html.sj-panel-on body{padding:0}
}

/* ————— три стиля текста: ряд пилюль в панели ————— */
.sj-styles{margin:0 0 20px}
.sj-styles-lbl{display:block;font-size:12px;opacity:.75;margin-bottom:8px}
.sj-pills{display:flex;gap:8px;flex-wrap:wrap}
.sj-pill{padding:8px 14px;border:1px solid #33465a;border-radius:999px;
  background:#0e1720;color:#f6f0e7;font:600 13px inherit;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.sj-pill:hover{border-color:#5a7288}
.sj-pill.on{background:var(--coral,#ff6d52);border-color:transparent;color:#fff}