/* Когда идёт редактирование текста — снимаем user-select блокировку с предков */
[contenteditable="true"] {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
}

/* ===== Базовые переменные (переопределяются через SettingsPanel) ===== */
:root {
  --pb-accent:         #2456c4;
  --pb-accent-hover:   #1a3fa0;
  --pb-accent-light:   rgba(36,86,196,0.08);
  --pb-text-dark:      #111;
  --pb-text-muted:     #777;
  --pb-text-subtle:    #aaa;
  --pb-bg-dark:        #1e2333;
  --pb-bg-darker:      #111827;
  --pb-font-base:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pb-font-size-base: 16px;
  --pb-line-height:    1.65;

  /* Типографика — заголовки */
  --pb-h1-size:   2.5rem;
  --pb-h1-weight: 700;
  --pb-h2-size:   2rem;
  --pb-h2-weight: 700;
  --pb-h3-size:   1.5rem;
  --pb-h3-weight: 600;
  --pb-h4-size:   1.25rem;
  --pb-h4-weight: 600;

  /* Типографика — текст */
  --pb-text-sm-size:   0.875rem;
  --pb-text-base-size: 1rem;
  --pb-text-lg-size:   1.125rem;
  --pb-text-xl-size:   1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--pb-font-size-base); }
body { margin: 0; padding: 0; font-family: var(--pb-font-base); font-size: 1rem; line-height: var(--pb-line-height); color: var(--pb-text-dark); }
/* Явное наследование шрифта — браузерные стили переопределяют font-family у h1-h6, input итд */
h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,select,li,td,th,label,span,div {
  font-family: inherit;
  font-size: inherit;
}
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, figure, figcaption,
blockquote, dl, dd, pre, hr { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ===== Типография ===== */
.pb-h1 { font-size: var(--pb-h1-size); font-weight: var(--pb-h1-weight); line-height: 1.15; }
.pb-h2 { font-size: var(--pb-h2-size); font-weight: var(--pb-h2-weight); line-height: 1.2;  }
.pb-h3 { font-size: var(--pb-h3-size); font-weight: var(--pb-h3-weight); line-height: 1.3;  }
.pb-h4 { font-size: var(--pb-h4-size); font-weight: var(--pb-h4-weight); line-height: 1.35; }

.pb-text-sm   { font-size: var(--pb-text-sm-size);   line-height: 1.5;  }
.pb-text-base { font-size: var(--pb-text-base-size); line-height: 1.65; }
.pb-text-lg   { font-size: var(--pb-text-lg-size);   line-height: 1.6;  }
.pb-text-xl   { font-size: var(--pb-text-xl-size);   line-height: 1.5;  }
.pb-text-xl   { font-size: 1.25rem; line-height: 1.55; }
.pb-text-xxl  { font-size: 1.5rem;  line-height: 1.4; }

.pb-text-center  { text-align: center; }
.pb-text-right   { text-align: right; }
.pb-text-justify { text-align: justify; }

.pb-font-medium { font-weight: 500; }
.pb-font-bold   { font-weight: 700; }

/* ===== Цвета текста ===== */
.pb-text-dark    { color: var(--pb-text-dark); }
.pb-text-light   { color: #fff; }
.pb-text-muted   { color: var(--pb-text-muted); }
.pb-text-subtle  { color: var(--pb-text-subtle); }
.pb-text-accent  { color: var(--pb-accent); }
.pb-text-success { color: #1a7f4b; }
.pb-text-warning { color: #ca8a04; }
.pb-text-danger  { color: #c0392b; }
.pb-text-info    { color: #0e7490; }

/* ===== Фоны ===== */
.pb-bg-white   { background: #fff; }
.pb-bg-light   { background: #f9fafb; }
.pb-bg-gray    { background: #f5f5f5; }
.pb-bg-dark    { background: var(--pb-bg-dark); }
.pb-bg-darker  { background: var(--pb-bg-darker); }
.pb-bg-accent  { background: var(--pb-accent); }
.pb-bg-success { background: #dcfce7; }
.pb-bg-warning { background: #fef08a; }
.pb-bg-danger  { background: #fee2e2; }
.pb-bg-info    { background: #e0f2fe; }

/* ===== Отступы снаружи ===== */
.pb-mt-sm { margin-top: .5rem; }
.pb-mt-md { margin-top: 1.5rem; }
.pb-mt-lg { margin-top: 3rem; }
.pb-mt-xl { margin-top: 5rem; }

.pb-mb-sm { margin-bottom: .5rem; }
.pb-mb-md { margin-bottom: 1.5rem; }
.pb-mb-lg { margin-bottom: 3rem; }
.pb-mb-xl { margin-bottom: 5rem; }

.pb-ml-sm   { margin-left: .5rem; }
.pb-ml-md   { margin-left: 1.5rem; }
.pb-ml-lg   { margin-left: 3rem; }
.pb-ml-auto { margin-left: auto; }

.pb-mr-sm   { margin-right: .5rem; }
.pb-mr-md   { margin-right: 1.5rem; }
.pb-mr-lg   { margin-right: 3rem; }
.pb-mr-auto { margin-right: auto; }

/* ===== Скругления ===== */
.pb-radius-sm   { border-radius: 4px; }
.pb-radius-md   { border-radius: 8px; }
.pb-radius-lg   { border-radius: 16px; }
.pb-radius-full { border-radius: 9999px; }

/* ===== Flex ===== */
.pb-flex        { display: flex; }
.pb-flex-row    { flex-direction: row; }
.pb-flex-col    { flex-direction: column; }
.pb-flex-row-rev{ flex-direction: row-reverse; }
.pb-flex-wrap   { flex-wrap: wrap; }

.pb-justify-start   { justify-content: flex-start; }
.pb-justify-center  { justify-content: center; }
.pb-justify-end     { justify-content: flex-end; }
.pb-justify-between { justify-content: space-between; }
.pb-justify-around  { justify-content: space-around; }

.pb-align-start    { align-items: flex-start; }
.pb-align-center   { align-items: center; }
.pb-align-end      { align-items: flex-end; }
.pb-align-stretch  { align-items: stretch; }
.pb-align-baseline { align-items: baseline; }

/* ===== Grid ===== */
.pb-grid         { display: grid; }
.pb-cols-1       { grid-template-columns: 1fr; }
.pb-cols-2       { grid-template-columns: repeat(2, 1fr); }
.pb-cols-3       { grid-template-columns: repeat(3, 1fr); }
.pb-cols-4       { grid-template-columns: repeat(4, 1fr); }
.pb-cols-auto    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ===== Зазоры ===== */
.pb-gap-sm { gap: .5rem; }
.pb-gap-md { gap: 1rem; }
.pb-gap-lg { gap: 2rem; }

/* ===== Секция / контейнеры ===== */
.pb-section          { width: 100%; }
.pb-container        { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 1rem; }
.pb-container-narrow { max-width: 720px;  margin-left: auto; margin-right: auto; padding: 0 1rem; }

/* ===== Карточка ===== */
.pb-card {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 1.5rem;
  overflow: hidden;
}

/* ===== Кнопки ===== */
.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6em 1.4em;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.pb-btn-sm   { font-size: .85rem;  padding: .4em 1em; }
.pb-btn-lg   { font-size: 1.15rem; padding: .75em 2em; }
.pb-btn-full { width: 100%; }

.pb-btn-primary   { background: var(--pb-accent); color: #fff; }
.pb-btn-primary:hover   { background: var(--pb-accent-hover); }
.pb-btn-secondary { background: #6c757d; color: #fff; }
.pb-btn-secondary:hover { background: #545b62; }
.pb-btn-outline   { background: transparent; border-color: var(--pb-accent); color: var(--pb-accent); }
.pb-btn-outline:hover   { background: var(--pb-accent); color: #fff; }
.pb-btn-outline-light   { background: transparent; border-color: #fff; color: #fff; }
.pb-btn-outline-light:hover { background: rgba(255,255,255,.15); }
.pb-btn-ghost     { background: transparent; color: #444; }
.pb-btn-ghost:hover     { background: #f0f0f0; }
.pb-btn-danger    { background: #e24b4a; color: #fff; }
.pb-btn-danger:hover    { background: #c03232; }

/* ===== Изображение ===== */
.pb-img-fluid   { max-width: 100%; height: auto; display: block; }
.pb-img-half    { width: 50%;  height: auto; }
.pb-img-quarter { width: 25%; height: auto; }
.pb-float-left  { float: left;  margin: 0 1rem 1rem 0; }
.pb-float-right { float: right; margin: 0 0 1rem 1rem; }
.pb-obj-cover   { object-fit: cover; }
.pb-obj-contain { object-fit: contain; }
.pb-obj-fill    { object-fit: fill; }
.pb-obj-none    { object-fit: none; }

/* ===== Разделитель ===== */
.pb-divider { border: none; border-top: 1px solid #e0e0e0; margin: 1.5rem 0; }
.pb-divider-light  { border-top-color: #f0f0f0; }
.pb-divider-dark   { border-top-color: #333; }
.pb-divider-accent { border-top-color: var(--pb-accent); }
.pb-divider-2 { border-top-width: 2px; }
.pb-divider-4 { border-top-width: 4px; }

/* ===== Утилиты отступов (в конце — перебивают всё) ===== */
.pb-p-sm { padding: .5rem; }
.pb-p-md { padding: 1.5rem; }
.pb-p-lg { padding: 3rem; }
.pb-p-xl { padding: 5rem; }

/* ===== Список ===== */
.pb-list         { padding-left: 1.5rem; margin: 0; list-style: disc; }
ol.pb-list       { list-style: decimal; }
.pb-list-none    { list-style: none !important; padding-left: 0; }
.pb-list li      { margin-bottom: .35rem; line-height: 1.6; }
.pb-list li .pb-list-icon { flex-shrink: 0; display: inline-flex; align-items: center; vertical-align: middle; margin-right: .4em; }
.pb-list li a    { color: inherit; }
.pb-list li a:hover { text-decoration: underline; }

/* ===== Иконка ===== */
.pb-icon      { display: inline-flex; align-items: center; justify-content: center; }
.pb-icon-wrap { display: inline-flex; align-items: center; justify-content: center; }

/* ===== Ссылка-контейнер ===== */
.pb-link { display: block; text-decoration: none; color: inherit; }
.pb-link:hover { opacity: .85; }

/* ===== Позиционирование ===== */
.pb-relative { position: relative; }
.pb-absolute { position: absolute; }
.pb-inset-0  { inset: 0; }
.pb-overflow-hidden { overflow: hidden; }
.pb-z-0  { z-index: 0; }
.pb-z-1  { z-index: 1; }
.pb-z-2  { z-index: 2; }
.pb-z-10 { z-index: 10; }

/* ===== Overlay ===== */
.pb-overlay        { position: absolute; inset: 0; }
.pb-overlay-dark   { background: rgba(0,0,0,0.55); }
.pb-overlay-darker { background: rgba(0,0,0,0.72); }
.pb-overlay-light  { background: rgba(255,255,255,0.6); }
.pb-overlay-accent { background: rgba(36,86,196,0.7); }

/* ===== Изображение-обложка ===== */
.pb-img-cover {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.pb-img-cover-w {
  width: 100%; height: auto;
  object-fit: cover; object-position: center;
  display: block;
}

/* ===== Минимальные высоты ===== */
.pb-min-h-sm  { min-height: 320px; }
.pb-min-h-md  { min-height: 480px; }
.pb-min-h-lg  { min-height: 600px; }
.pb-min-h-xl  { min-height: 720px; }
.pb-min-h-screen { min-height: 100vh; }

/* ===== Фиксированные высоты ===== */
.pb-h-sm  { height: 320px; }
.pb-h-md  { height: 480px; }
.pb-h-lg  { height: 600px; }
.pb-h-xl  { height: 720px; }
.pb-h-screen { height: 100vh; }

/* ===== Flex-утилиты (дополнения) ===== */
.pb-justify-center  { justify-content: center; }
.pb-justify-between { justify-content: space-between; }
.pb-justify-end     { justify-content: flex-end; }
.pb-align-start     { align-items: flex-start; }
.pb-align-end       { align-items: flex-end; }
.pb-flex-1          { flex: 1; }
.pb-flex-shrink-0   { flex-shrink: 0; }
.pb-self-center     { align-self: center; }

/* ===== Ширины ===== */
.pb-w-full  { width: 100%; }
.pb-w-half  { width: 50%; }
.pb-w-third { width: 33.333%; }
.pb-w-auto  { width: auto; }
.pb-max-w-xs  { max-width: 480px; }
.pb-max-w-sm  { max-width: 600px; }
.pb-max-w-md  { max-width: 768px; }
.pb-max-w-lg  { max-width: 960px; }

/* ===== Округления ===== */
.pb-rounded-sm { border-radius: 4px; }
.pb-rounded    { border-radius: 8px; }
.pb-rounded-lg { border-radius: 16px; }
.pb-rounded-xl { border-radius: 24px; }
.pb-rounded-full { border-radius: 9999px; }

/* ===== Тени ===== */
.pb-shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,.10); }
.pb-shadow    { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.pb-shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,.15); }
.pb-shadow-xl { box-shadow: 0 16px 48px rgba(0,0,0,.20); }

/* ===== Фоновые утилиты ===== */
.pb-bg-cover   { background-size: cover; background-position: center; background-repeat: no-repeat; }
.pb-bg-center  { background-position: center; }
.pb-bg-no-rep  { background-repeat: no-repeat; }

/* ===== Галерея ===== */
.pb-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}
.pb-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pb-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pb-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pb-gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }

.pb-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: zoom-in;
  background: #f0f0f0;
}
.pb-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.pb-gallery-item:hover img { transform: scale(1.04); }

.pb-gallery-item-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s;
}
.pb-gallery-item:hover .pb-gallery-item-caption { opacity: 1; }

/* Соотношения сторон */
.pb-gallery-ratio-square .pb-gallery-item    { aspect-ratio: 1; }
.pb-gallery-ratio-landscape .pb-gallery-item { aspect-ratio: 4/3; }
.pb-gallery-ratio-portrait .pb-gallery-item  { aspect-ratio: 3/4; }
.pb-gallery-ratio-wide .pb-gallery-item      { aspect-ratio: 16/9; }

@media (max-width: 768px) {
  .pb-gallery      { grid-template-columns: repeat(2, 1fr); }
  .pb-gallery-cols-4,
  .pb-gallery-cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pb-gallery { grid-template-columns: 1fr; }
}

/* ===== Zoomable ===== */
[data-zoomable] { cursor: zoom-in; }