/*
 * 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;
}

/*
 * JavaScript adds this runtime-only wrapper around every description table.
 * The wrapper owns horizontal scrolling and supplies consistent space after
 * the table, regardless of whether a heading, paragraph or list follows.
 */
.product-description .rte-content .asd-responsive-table,
.product-description .rte-content .table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5rem;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.product-description .rte-content .asd-responsive-table:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*
 * Native table layout makes rows and cells consume the entire description
 * width. The runtime wrapper prevents wide tables from enlarging the page.
 */
.product-description .rte-content table {
  display: table !important;
  width: 100% !important;
  min-width: 100%;
  max-width: none !important;
  margin: 0 !important;
  border: 1px solid #8c8c8c !important;
  border-collapse: collapse !important;
  border-spacing: 0;
  table-layout: auto;
  box-sizing: border-box;
}

/* Fallback spacing when JavaScript is unavailable and no wrapper was added. */
.product-description .rte-content table:not(.asd-responsive-table > table):not(.table-responsive > table) {
  margin-bottom: 1.5rem !important;
}

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

/*
 * Values are normal by default, including accidental strong/b markup. Header
 * rules below opt characteristic labels back into bold.
 */
.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 without thead/th: at least three columns means 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 tables normally place characteristic names in the
 * first column and values in the remaining column.
 */
.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;
}

/*
 * Mobile behavior is selected by table structure:
 * - one/two columns: fit the viewport and wrap long text;
 * - three or more columns: preserve compact values and scroll inside wrapper.
 */
@media (max-width: 767.98px) {
  .product-description .rte-content .asd-responsive-table > table:not(:has(tr > :nth-child(3))) {
    width: 100% !important;
    min-width: 100%;
    table-layout: fixed;
  }

  .product-description .rte-content .asd-responsive-table > table:not(:has(tr > :nth-child(3))) th,
  .product-description .rte-content .asd-responsive-table > table:not(:has(tr > :nth-child(3))) td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .product-description .rte-content .asd-responsive-table > table:not(:has(tr > :nth-child(3))) tr > :first-child:not([colspan]) {
    width: 68%;
  }

  .product-description .rte-content .asd-responsive-table > table:not(:has(tr > :nth-child(3))) tr > :last-child:not(:first-child) {
    width: 32%;
  }

  .product-description .rte-content .asd-responsive-table > table:has(tr > :nth-child(3)) {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
  }

  .product-description .rte-content .asd-responsive-table > table:has(tr > :nth-child(3)) th,
  .product-description .rte-content .asd-responsive-table > table:has(tr > :nth-child(3)) td {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  /*
   * CSS-only fallback if the runtime wrapper could not be created.
   */
  .product-description .rte-content table:not(.asd-responsive-table > table):not(.table-responsive > table) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }
}

/*
 * 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;
}