/* Shared responsive + overflow fixes for all PicPick business themes */

.pp-site,
.wb-canvas,
body[class*="pp-theme-"] {
  overflow-x: clip;
  max-width: 100%;
}

.pp-site *,
.wb-canvas .pp-block,
.wb-canvas .pp-column,
.wb-canvas .wb-block-theme-preview {
  min-width: 0;
}

.pp-hero-content,
.pp-column,
.pp-section-title,
.pp-block h1,
.pp-block h2,
.pp-block h3,
.pp-block p,
.pp-block .pp-btn,
.wb-canvas .pp-section-title,
.wb-canvas h1,
.wb-canvas h2,
.wb-canvas h3 {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.pp-column .wb-block-theme-preview,
.pp-column .wb-sortable-block,
.pp-column .pp-block {
  max-width: 100% !important;
  min-width: 0 !important;
}

.pp-column .wb-selectable-el:not(.is-sized) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.pp-column .wb-selectable-el.is-sized {
  max-width: 100% !important;
  min-width: 0 !important;
}

.pp-column .pp-section {
  padding-left: 0;
  padding-right: 0;
}

.pp-gallery-grid {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .pp-columns {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pp-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .pp-gallery-masonry {
    column-count: 2 !important;
    column-gap: 12px !important;
  }

  .pp-gallery-justified-item {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0;
  }

  .pp-hero {
    min-height: auto !important;
    padding: 48px 16px !important;
  }

  .pp-hero h1,
  .pp-section-title,
  .pp-block h1,
  .pp-block h2 {
    font-size: clamp(1.35rem, 7vw, 2.25rem) !important;
    letter-spacing: normal !important;
    line-height: 1.15 !important;
  }

  .pp-hero p,
  .pp-block p {
    font-size: clamp(0.95rem, 3.5vw, 1.05rem) !important;
  }

  .pp-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pp-btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  img,
  video,
  iframe,
  .pp-gallery-grid-img {
    max-width: 100%;
    height: auto;
  }
}