.pro-container,
.pc-block {
    width: 100% !important;
}

.pc-block table {
    width: 100% !important;
}

/* Same table-layout squeeze bug as .iflo/.meibovue in product.css: this
   template's main content table uses table-layout:auto (default), so the
   browser's column-width algorithm defers to images'/videos' native pixel
   size instead of the declared column width, squeezing the empty spacer
   <td> (2nd column, no content) down to a few px once the image/text
   columns claim more space than their share - happens at PC widths too,
   not just mobile. Scoped to the direct-child table only (not
   .summary-section table, which needs its own table-layout:auto for the
   summary grid to size correctly). */
.tincymce-content > table {
    table-layout: fixed !important;
}
/* min-width alone is not reliably honored on table cells once
   table-layout:fixed is in effect (Chromium computes fixed-layout column
   widths straight from the declared width, ignoring min/max-width on
   individual cells) - some pages' spacer column is only 5px in the raw
   content, so min-width alone still rendered at ~9px. An explicit width
   is what the fixed-layout algorithm actually respects. */
.tincymce-content > table td:nth-of-type(2) {
    width: 30px !important;
    min-width: 30px !important;
}

/* Same as .product-content iframe in product.css: an iframe's own width
   attribute can exceed its now-fixed-width column and bleed into the
   spacer/next column. Cap width only, not height - forcing height:auto on
   an iframe collapses it to the ~150px UA default since iframe has no
   intrinsic aspect ratio (see the mobile min-height rule further below for
   the video-height-specific fix). */
.tincymce-content > table iframe {
    max-width: 100% !important;
}

/* Positioning context for social media icons: show_solution-list.html only loads
   product-0206.css / product-mobile-0206.css, neither of which defines
   .site-main-content.features { position: relative } (that rule lives in product.css,
   which this template does not load). Without it, the icons fall back to the
   document root as containing block and land at the wrong vertical position. */
.site-main-content.features {
    position: relative !important;
}

.site-main-content.features .flex-row-center.col-gap-10 {
    position: absolute !important;
    right: 30px !important;
    bottom: 10px !important;
    z-index: 999 !important;
}

/* .pc-block/.mobile-block actually switch at max-width:1200px (index.css),
   not 768px. Both rules below must match that breakpoint or there's a
   769px-1200px gap where .mobile-block is showing with no image/iframe
   size constraint applied, causing horizontal overflow. */

/* product-mobile-0206.css applies height:auto to both img and iframe.
   That collapses YouTube <iframe height="308"> embeds (iframe has no intrinsic
   aspect ratio, so height:auto resolves to the UA default ~150px instead of
   scaling with width). Revert height for iframe only so its HTML height
   attribute governs again; img keeps height:auto from the shared rule. */
@media (max-width: 1200px) {
    iframe {
        height: revert !important;
    }
}

/* YouTube embeds get rewritten at runtime (something on the page appends
   enablejsapi=1 to the src and swaps in style="width:100%;height:100%" plus
   a malformed height="400px" attribute, in the mobile_content copy of this
   iframe). Because that inline height:100% has no definite parent height to
   resolve against, it collapses to a thin strip instead of the intended
   400px. Force the actual pixel height back to what was configured. This
   only needs to apply where .mobile-block is shown (<=1200px) - the
   .pc-block copy of this iframe already renders correctly at its own
   500x400 size and must not be stretched to 100% width. */
@media (max-width: 1200px) {
    iframe[src*="youtube.com"] {
        min-height: 400px !important;
        width: 100% !important;
    }
}

/* Images inside the CMS content must scale with their column, not overflow
   at their original pixel size. Scoped to .tincymce-content so it only
   affects Solutions-page content, not header/footer/logo images. Applies at
   all widths, not just mobile - table-layout:fixed above makes columns a
   strict width at every viewport, so an image wider than its column (e.g.
   a raw width="500" attribute) can overflow at PC widths too.
   Deliberately NOT setting width:auto here - some images' actual files are
   much higher resolution than their intended display size, and the author
   downsizes them intentionally via the HTML width/height attributes (e.g.
   width="800" on a file that's really 1408px natively). width:auto would
   discard that attribute and render the image at full native resolution
   instead of the intended smaller size. max-width:100% alone already caps
   it when the column is narrower than the declared width, without losing
   the author's intended size when the column has room for it. */
.tincymce-content img {
    max-width: 100% !important;
    height: auto !important;
}