.inline-editable {
  border-radius: 3px;
  cursor: pointer;
  outline: 1px dashed transparent;
  position: relative;
  transition: outline-color .2s ease, background-color .2s ease;
}

.inline-editable:hover {
  background: rgba(255, 119, 82, .08);
  outline-color: #ff7752;
}

.inline-image-empty {
  align-items: center;
  background: rgba(255, 119, 82, .08);
  border: 1px dashed #ff7752;
  color: #94452f;
  display: flex;
  justify-content: center;
  min-height: 180px;
  padding: 20px;
  text-align: center;
}

.inline-edit-trigger {
  align-items: center;
  background: #ff7752;
  border: 0;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 6px;
  top: 6px;
  transition: opacity .2s ease;
  width: 24px;
  z-index: 2;
}

.inline-editable:hover .inline-edit-trigger,
.inline-edit-trigger:focus { opacity: 1; }

.store-editor-bar {
  align-items: center;
  background: #202020;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  min-height: 42px;
  padding: 9px 20px;
  position: relative;
  z-index: 1030;
}

.store-editor-bar span { color: rgba(255, 255, 255, .72); font-size: .86rem; }
.store-editor-bar a { color: #fff; text-decoration: none; }
.store-editor-bar a:hover, .store-editor-bar a:focus { color: #ff7752; }
.store-editor-bar button { background: transparent; border: 0; color: #fff; padding: 0; }
.store-editor-bar button:hover, .store-editor-bar button:focus { color: #ff7752; }

.inline-editor-modal { align-items: center; background: rgba(15, 15, 15, .54); display: flex; inset: 0; justify-content: center; overflow-y: auto; padding: 20px; position: fixed; z-index: 3000; }
.inline-editor-modal[hidden] { display: none; }
.inline-editor-dialog { background: #fff; border-radius: 8px; box-shadow: 0 18px 60px rgba(0,0,0,.28); box-sizing: border-box; max-height: calc(100vh - 40px); max-width: 760px; overflow-y: auto; padding: 26px; position: relative; width: 100%; }
.inline-editor-close { background: transparent; border: 0; font-size: 1.6rem; position: absolute; right: 14px; top: 8px; }
.inline-editor-title { margin: 0 0 20px; }
.inline-editor-fields label { display: block; font-weight: 600; margin-bottom: 14px; }
.inline-editor-fields input, .inline-editor-fields textarea { border: 1px solid #d8d8d8; border-radius: 5px; display: block; margin-top: 6px; padding: 10px; width: 100%; }
.inline-editor-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.inline-editor-actions button { border: 0; border-radius: 5px; padding: 9px 16px; }
.inline-editor-save { background: #ff7752; color: #fff; }
.inline-social-editable { outline: 2px dashed transparent; outline-offset: 4px; }
.inline-social-editable:hover { outline-color: #ff7752; }
.inline-editor-note { color: #5e5e5e; font-size: .9rem; line-height: 1.5; margin: 0 0 18px; }

.inline-background-slots { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inline-background-slot { border: 1px solid #e7e7e7; border-radius: 6px; box-sizing: border-box; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; padding: 12px; }
.inline-background-slot strong { font-size: .9rem; }
.inline-background-slot > * { box-sizing: border-box; max-width: 100%; min-width: 0; }
.inline-background-slot img,
.inline-background-empty { aspect-ratio: 16 / 8; background: #f3f3f3; border-radius: 4px; display: block; object-fit: cover; width: 100%; }
.inline-background-empty { align-items: center; color: #777; display: flex; font-size: .82rem; justify-content: center; }
.inline-background-slot label { font-size: .78rem; margin: 0; min-width: 0; width: 100%; }
.inline-background-slot input[type="file"] { box-sizing: border-box; font-size: .72rem; max-width: 100%; min-width: 0; width: 100%; }

.inline-faq-list { display: grid; gap: 12px; }
.inline-faq-item { border: 1px solid #e7e7e7; border-radius: 6px; padding: 14px; }
.inline-faq-item-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.inline-faq-remove { align-items: center; background: #fff1f1; border: 1px solid #e45858; color: #c73838; display: inline-flex; height: 30px; justify-content: center; padding: 0; width: 30px; }
.inline-faq-add { background: #202020; color: #fff; margin-top: 14px; padding: 9px 14px; }

@media (max-width: 600px) {
  .inline-editor-modal { align-items: flex-start; padding: 12px; }
  .inline-editor-dialog { max-height: calc(100vh - 24px); padding: 20px; }
  .inline-background-slots { grid-template-columns: 1fr; }
}