/**
 * Shared rich HTML from admin HugeRTE (products, collections, storefront pages).
 * Loaded by every storefront theme so forecolor, highlight, inline formatting,
 * and media spacing stay consistent — theme CSS must not collapse margins to zero.
 */

:root {
  --zc-rich-media-gap: 1rem;
}

.product-html-content i,
.product-html-content em {
  font-style: italic;
}

.product-html-content s,
.product-html-content del,
.product-html-content strike {
  text-decoration: line-through;
}

.product-html-content u {
  text-decoration: underline;
}

.product-html-content mark {
  background-color: #fef08a;
  color: inherit;
}

.product-html-content strong,
.product-html-content b {
  font-weight: 700;
}

/* Images, embeds, and video blocks — gap on all sides; stack vertically (no side-by-side stick) */
:is(.product-html-content, .editor--content, .collection-html-content) :is(
    img,
    video,
    iframe,
    figure.image,
    figure.media,
    p.media-embed,
    div[data-oembed-url]
  ) {
  display: block;
  max-width: 100%;
  margin: var(--zc-rich-media-gap);
  box-sizing: border-box;
  clear: both;
}

:is(.product-html-content, .editor--content, .collection-html-content)
  :is(figure.image, figure.media, p.media-embed, div[data-oembed-url])
  :is(img, iframe, video) {
  margin: 0;
}

:is(.product-html-content, .editor--content, .collection-html-content) iframe {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 200px;
  border: 0;
}

:is(.product-html-content, .editor--content, .collection-html-content) video {
  width: 100%;
  max-width: 560px;
  height: auto;
}

/*
 * Product PDP tabs: initProductTabs() moves images/videos/tables out of the
 * Description panel into Photos & Videos / Table. Until that runs, SSR HTML would
 * flash the first embedded image under "Description".
 */
@media (scripting: enabled) {
  .product-tabs-section:not([data-tabs-initialized="1"]) {
    opacity: 0;
    pointer-events: none;
  }

  .product-tabs-section:not([data-tabs-initialized="1"])
    .product-tab-description-body
    :is(img, video, iframe, table, figure.media, p.media-embed) {
    display: none !important;
  }

  .product-tabs-section[data-tabs-initialized="1"] {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .product-tabs-section[data-tabs-initialized="1"] {
    transition: opacity 0.12s ease-out;
  }
}