/*
 * Front-office layout for long product descriptions.
 *
 * Only media elements are centered. Titles, paragraphs, lists and table text
 * 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 images.
 */
.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;
}

/*
 * Every table fills the description column. Display:block allows the table
 * itself to provide controlled horizontal scrolling when its natural content
 * is wider than the mobile viewport.
 */
.product-description .rte-content table {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.product-description .rte-content .table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-description .rte-content table th,
.product-description .rte-content table td {
  box-sizing: border-box;
  padding: 0.65rem 0.75rem !important;
  vertical-align: middle;
  overflow-wrap: break-word;
}

/*
 * Values are normal by default, including any accidental strong/b markup
 * returned by AI. The more specific header rules below opt labels back into
 * bold only where the table structure identifies them as characteristics.
 */
.product-description .rte-content table td,
.product-description .rte-content table td * {
  font-weight: 400 !important;
}

/* Semantic column/row headers always win. */
.product-description .rte-content table th,
.product-description .rte-content table th *,
.product-description .rte-content table thead td,
.product-description .rte-content table thead td * {
  font-weight: 700 !important;
}

/*
 * Legacy horizontal tables often have no thead/th. When at least three
 * columns exist, the first row is treated as the horizontal header.
 */
.product-description .rte-content table:not(:has(thead)):has(tr > :nth-child(3)) tbody:first-of-type > tr:first-child > td,
.product-description .rte-content table:not(:has(thead)):has(tr > :nth-child(3)) tbody:first-of-type > tr:first-child > td * {
  font-weight: 700 !important;
}

/*
 * Legacy one/two-column technical tables normally use the first column for
 * characteristic names and the remaining column for values.
 */
.product-description .rte-content table:not(:has(thead)):not(:has(tr > :nth-child(3))) tr > td:first-child,
.product-description .rte-content table:not(:has(thead)):not(:has(tr > :nth-child(3))) tr > td:first-child * {
  font-weight: 700 !important;
}

/*
 * The active shop theme gives both the table and the following heading a
 * top/bottom margin of zero. Add space only for this exact adjacency.
 */
.product-description .rte-content table + h2,
.product-description .rte-content table + h3,
.product-description .rte-content table + h4,
.product-description .rte-content .table-responsive + h2,
.product-description .rte-content .table-responsive + h3,
.product-description .rte-content .table-responsive + h4 {
  margin-top: 1.5rem !important;
}

/*
 * On narrow screens, preserve compact technical values on one line and let
 * the table scroll internally instead of widening the entire product page.
 */
@media (max-width: 767.98px) {
  .product-description .rte-content table th,
  .product-description .rte-content table td {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/*
 * Responsive centered YouTube layout.
 */
.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;
}