/*
 * Front-office layout for protected media in the long product description.
 *
 * Only media elements are centered. Titles, paragraphs, lists, tables and
 * every other textual element keep the alignment supplied by the shop theme.
 * The saved HTML, media URLs and original attributes remain unchanged.
 */

/*
 * Neutralize legacy float:left/float:right declarations and center the image.
 * Once the image is no longer floated, its parent gets a real height and the
 * following text cannot slide beside or above it.
 */
.product-description .rte-content img {
  clear: both !important;
  float: none !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 1.25rem auto 2rem !important;
}

/*
 * Responsive centered YouTube layout.
 *
 * Fixed iframe width/height attributes are overridden only visually; the
 * original protected iframe markup and URL are not changed.
 */
.youtube-container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 0 !important;
  margin: 1.5rem auto;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.youtube-container > iframe,
.youtube-container iframe.youtube-video {
  position: absolute !important;
  inset: 0;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  border: 0;
}