/* BrickJunkie sitewide viewport lock
 * Prevent page-level horizontal scrolling on all templates and screen sizes.
 * Components that genuinely need overflow keep it inside their own container.
 */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.site,
.site-main,
.bj-container,
.bj-narrow,
.bj-single-layout,
.bj-single-content,
.bj-prose,
.entry-content,
.woocommerce,
.woocommerce-page,
.woocommerce-product-gallery,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-cover,
.wp-block-media-text,
.wp-block-embed,
.wp-block-image,
figure {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

img,
video,
iframe,
embed,
object,
canvas {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.wp-block-table,
.bj-prose table,
.entry-content table,
.bj-prose pre,
.entry-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Third-party bol partner cards use fixed desktop widths by default. */
.bj-prose [id^="PLbol_"],
.entry-content [id^="PLbol_"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@media (max-width: 600px) {
  .bj-prose [id^="PLbol_"],
  .entry-content [id^="PLbol_"] {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
  }

  .bj-prose [id^="PLbol_"] .left-div,
  .entry-content [id^="PLbol_"] .left-div {
    float: none !important;
    flex: 0 0 88px;
    width: 88px !important;
    max-width: 88px !important;
    margin-right: 0 !important;
  }

  .bj-prose [id^="PLbol_"] .right-div-preview,
  .entry-content [id^="PLbol_"] .right-div-preview {
    float: none !important;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .bj-prose [id^="PLbol_"] .right-div-preview > *,
  .entry-content [id^="PLbol_"] .right-div-preview > *,
  .bj-prose [id^="PLbol_"] .product_title,
  .entry-content [id^="PLbol_"] .product_title,
  .bj-prose [id^="PLbol_"] .rating,
  .entry-content [id^="PLbol_"] .rating,
  .bj-prose [id^="PLbol_"] .product-delivery,
  .entry-content [id^="PLbol_"] .product-delivery {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .bj-prose [id^="PLbol_"] .btn--primary,
  .entry-content [id^="PLbol_"] .btn--primary {
    width: auto !important;
    max-width: 100% !important;
  }
}