/* Temporary hot-fix for Page Builder column stacking on mobile
 * Issue: After upgrading PageBuilder (2.4.7+), new wrapper .pagebuilder-column-line
 * sits between column-group and column elements. Existing compiled CSS (viewport.css)
 * in production is outdated and lacks rules for [data-content-type='column-line'].
 * Additionally inline style blocks produced by PageBuilder set explicit width:50%
 * for columns via selectors like:
 *   #html-body [data-pb-style=DR9MRXO]{width:50%;}
 * These override earlier mobile flex rules causing two columns side-by-side on
 * small screens.
 *
 * This file forcefully restores expected mobile behaviour (stacked columns) up to
 * the md breakpoint (799px) using higher specificity + !important where needed.
 * Remove once SCSS source (_pagebuilder.scss) is properly recompiled and deployed
 * so that viewport.css contains the updated rules for column-line & columns.
 */

@media (max-width: 799px) {
  /* Ensure every column-group / column-line at any nesting depth wraps */
  #html-body [data-content-type='column-group'],
  #html-body [data-content-type='column-line'] {
    display: flex;
    flex-wrap: wrap !important;
  }

  /* Explicitly target direct children (columns or nested wrappers) to break to new lines */
  #html-body [data-content-type='column-group'] > *,
  #html-body [data-content-type='column-line'] > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Columns: allow content shrink, avoid horizontal overflow */
  #html-body [data-content-type='column'] {
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* lets large flex children shrink instead of forcing overflow */
    box-sizing: border-box;
  }

  /* Common overflow culprits inside columns */
  #html-body [data-content-type='column'] img,
  #html-body [data-content-type='column'] video,
  #html-body [data-content-type='column'] iframe,
  #html-body [data-content-type='column'] .pagebuilder-video-container,
  #html-body [data-content-type='column'] .pagebuilder-banner-wrapper,
  #html-body [data-content-type='column'] table {
    max-width: 100% !important;
  }

  /* If a nested group got inline flex-basis/width from PB width settings, neutralize it */
  #html-body [data-content-type='column-group'] [data-content-type='column'][style*='width'],
  #html-body [data-content-type='column-line'] [data-content-type='column'][style*='width'] {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

@media (min-width: 800px) {
  /* Preserve existing desktop behaviour */
  #html-body [data-content-type='column-group'],
  #html-body [data-content-type='column-line'] {
    flex-wrap: nowrap;
  }
  #html-body [data-content-type='column'] {
    flex-basis: auto;
    width: auto;
    max-width: none;
  }
}

/* End of temporary fix */

/* ---------------------------------------------------------
 * Bundle scroll horizontal overflow containment
 * Problem: .bundle_scroll-inner uses width:max-content causing very wide
 *          intrinsic width (e.g. >1500px) which some user agents are
 *          letting influence the document scroll width, producing an
 *          unwanted horizontal scrollbar on mobile.
 * Approach: Constrain the scroller wrappers to the viewport, ensure the
 *           scroll happens inside the component (not the body), and avoid
 *           descendants forcing expansion. We retain horizontal scrolling
 *           intent for the bundle items while preventing layout bleed.
 * Notes:    Keep in override until underlying source SCSS (product details
 *           component) is located / refactored. Safe: selectors are specific
 *           to bundle UI.
 * --------------------------------------------------------- */
@media (max-width: 799px) {
  /* Ensure wrapper boxes never exceed viewport width */
  .bundle_scroll-items,
  .bundle_scroll-over {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Provide the actual horizontal scroll container */
  .bundle_scroll-over {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Prevent intrinsic max-content width from influencing body width.
     Allow it to grow for internal scrolling but clamp min-width so flex
     children don't force overflow outside the scrolling context. */
  .bundle_scroll-inner {
    width: max-content; /* keep horizontal layout */
    min-width: 100%;    /* at least fill viewport so first items align */
    box-sizing: border-box;
  }

  /* Defensive: large child elements shouldn't escape their item width */
  .bundle_scroll-inner > .bundle_scroll-item {
    min-width: 140px; /* existing fixed width semantic */
    max-width: 140px; /* prevent unexpected growth */
    box-sizing: border-box;
  }

  /* Hide any accidental negative margin / positional nudge overflow */
  .bundle_scroll-items { overflow: hidden; }
}

/* Desktop: explicitly allow existing behaviour (no change) */
@media (min-width: 800px) {
  .bundle_scroll-over { overflow-x: auto; }
}