/* PetLoft — Page Builder block styles (frontend rendering)
   These classes are emitted by assets/js/page-builder.js when a page's
   builder_json is converted to HTML. Keep this file loaded on any page
   that can render builder content (custom /page/{slug} pages, previews). */

.pb-block { position: relative; }

.pb-hero {
  background-size: cover;
  background-position: center;
  padding: 64px 24px;
  text-align: center;
  color: #fff;
  background-color: var(--primary, #c0673f);
}
.pb-hero-inner { max-width: 720px; margin: 0 auto; }
.pb-hero h1 { font-family: var(--font-head, serif); font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 12px; }
.pb-hero p { font-size: 1.05rem; opacity: .92; margin: 0 0 20px; }

.pb-banner {
  padding: 14px 20px;
  text-align: center;
  font-weight: 600;
  border-radius: 8px;
}

.pb-text { line-height: 1.7; }
.pb-text p { margin: 0 0 12px; }

.pb-heading { font-family: var(--font-head, serif); margin: 0 0 12px; }

.pb-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--primary, #c0673f);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity .15s;
}
.pb-btn:hover { opacity: .88; }
.pb-button-wrap { padding: 8px 0; }

.pb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.pb-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }

.pb-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.pb-slider img { flex: 0 0 280px; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; scroll-snap-align: start; }

.pb-image-wrap img { max-width: 100%; border-radius: 10px; }
.pb-image-placeholder, .pb-video-placeholder, .pb-map-placeholder {
  padding: 40px; text-align: center; color: #999; background: #f2efe9; border-radius: 10px;
}

.pb-video video { width: 100%; border-radius: 10px; }

.pb-products-block, .pb-categories-block, .pb-reviews-block {
  padding: 20px; text-align: center; color: #999; background: #f2efe9; border-radius: 10px;
}

.pb-faq-item { border-bottom: 1px solid #e7ddce; padding: 12px 0; }
.pb-faq-item summary { font-weight: 600; cursor: pointer; }
.pb-faq-item p { margin: 8px 0 0; color: #6b5f53; }

.pb-contacts { display: flex; flex-direction: column; gap: 8px; }
.pb-contacts a { color: inherit; }

.pb-divider { border: none; border-top: 1px solid #e7ddce; margin: 24px 0; }
.pb-divider-space { border: none; height: 32px; }

.pb-grid {
  display: grid;
  grid-template-columns: repeat(var(--pb-cols, 3), 1fr);
  gap: 16px;
}
.pb-columns {
  display: grid;
  grid-template-columns: repeat(var(--pb-col-count, 2), 1fr);
  gap: 16px;
}
.pb-container { padding: 8px; }

@media (max-width: 700px) {
  .pb-grid, .pb-columns { grid-template-columns: 1fr; }
}