/* Compact illustrations within reading sections. */
main {
  --reading-image-width: min(34%, 13rem);
  --reading-image-height: 14rem;
  --reading-image-gap: clamp(.75rem, 2vw, 1.5rem);
}

@media (max-width: 650px) {
  main {
    --reading-image-width: min(34%, 6.75rem);
    --reading-image-height: 9rem;
  }
}

main :is(.prose, .skin-care-panel, .article-body, .story-body):has(
  > img, > a > img, > p img, a.article-product-illustration, figure.application-illustration
) {
  display: flow-root;
}

/* The anchor floats as a whole when it only contains an illustration. */
html body #main :is(.prose, .skin-care-panel, .article-body, .story-body) :is(
  a.article-product-illustration:not(.mol-inline-product a),
  figure.application-illustration
) {
  float: left;
  clear: left;
  display: block !important;
  width: var(--reading-image-width) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: .25rem var(--reading-image-gap) .75rem 0 !important;
  padding: 0 !important;
}

main :is(
  :is(.prose, .skin-care-panel, .article-body, .story-body) > img,
  :is(.prose, .skin-care-panel, .article-body, .story-body) > a > img,
  :is(.prose, .skin-care-panel, .article-body, .story-body) > p img
):not(:is(.article-product-illustration img, .application-illustration img,
          .antiparasitic-inline-image, img[src*="/reviews-"], img[src*="/avatars/"])) {
  float: left;
  clear: left;
  display: block !important;
  width: auto !important;
  max-width: var(--reading-image-width) !important;
  height: auto !important;
  max-height: var(--reading-image-height) !important;
  margin: .25rem var(--reading-image-gap) .75rem 0 !important;
  object-fit: contain;
}

main .prose p:has(> a.article-product-illustration) {
  clear: left;
}

html body #main .legacy-article > a.article-product-illustration:only-of-type:not(.mol-inline-product a) {
  display: block !important;
  margin: .25rem var(--reading-image-gap) .75rem 0 !important;
}

html body #main :is(.prose, .skin-care-panel, .article-body, .story-body)
  :is(a.article-product-illustration, figure.application-illustration) > img,
html body #main .legacy-article .mol-inline-product .article-product-illustration > img {
  display: block !important;
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: var(--reading-image-height) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

html body #main .legacy-article .mol-inline-product {
  float: left;
  clear: left;
  width: min(42%, 13rem);
  margin: .25rem var(--reading-image-gap) .75rem 0;
}

html body #main .legacy-article .mol-inline-product .article-product-illustration {
  height: auto !important;
}

html body #main .legacy-article .mol-inline-product figcaption {
  overflow-wrap: anywhere;
}

/* The introduction flows beside the lead illustration on indication pages. */
html body #main :is(.indication-product, .product-detail:has(> .indication-product-image)),
html body[data-page-id="application-golden-pleasures"] #main .product-detail,
html:has(head link[rel="canonical"][href$="/colloids/golden-pleasures.html"]) body #main .full-product,
html body[data-section="applications"][data-application-version] #main article.content-shell .acne-intro:has(> a.product-visual) {
  display: flow-root !important;
}

html body #main :is(.indication-product, .product-detail:has(> .indication-product-image)) > :is(.product-visual, .indication-product-image),
html body[data-page-id="application-golden-pleasures"] #main .product-detail > .product-detail-visual,
html:has(head link[rel="canonical"][href$="/colloids/golden-pleasures.html"]) body #main .full-product > .product-visual,
html body[data-section="applications"][data-application-version] #main article.content-shell .acne-intro:has(> a.product-visual) > a.product-visual[href] {
  float: left;
  display: block !important;
  box-sizing: border-box !important;
  width: var(--reading-image-width) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: .25rem var(--reading-image-gap) .75rem 0 !important;
  padding: .5rem !important;
}

html body #main :is(.indication-product, .product-detail:has(> .indication-product-image)) > .product-visual,
html:has(head link[rel="canonical"][href$="/colloids/golden-pleasures.html"]) body #main .full-product > .product-visual {
  padding: .65rem .5rem .5rem !important;
}

html body #main .indication-product > .product-visual > .visual-label,
html:has(head link[rel="canonical"][href$="/colloids/golden-pleasures.html"]) body #main .full-product > .product-visual > .visual-label {
  position: static;
  display: block;
  margin: 0 0 .35rem;
  text-align: center;
  overflow-wrap: anywhere;
}

html body #main .indication-product > .product-visual > .zoom-link,
html:has(head link[rel="canonical"][href$="/colloids/golden-pleasures.html"]) body #main .full-product > .product-visual > .zoom-link {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

html body #main :is(.indication-product, .product-detail:has(> .indication-product-image)) > :is(.product-visual, .indication-product-image) img,
html body[data-page-id="application-golden-pleasures"] #main .product-detail > .product-detail-visual img,
html:has(head link[rel="canonical"][href$="/colloids/golden-pleasures.html"]) body #main .full-product > .product-visual img,
html body[data-section="applications"][data-application-version] #main article.content-shell .acne-intro:has(> a.product-visual) > a.product-visual[href] > img {
  display: block !important;
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: var(--reading-image-height) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
}

html body #main :is(.indication-product, .product-detail:has(> .indication-product-image)) > :is(.product-summary, .product-detail-copy),
html body[data-page-id="application-golden-pleasures"] #main .product-detail > .product-detail-copy,
html:has(head link[rel="canonical"][href$="/colloids/golden-pleasures.html"]) body #main .full-product > .product-summary,
html body[data-section="applications"][data-application-version] #main article.content-shell .acne-intro:has(> a.product-visual) > div {
  display: block;
  width: auto;
  min-width: 0;
}

html body #main :is(.indication-product, .product-detail:has(> .indication-product-image)) > .product-description-content,
html body[data-page-id="application-golden-pleasures"] #main .product-detail > .product-description-content,
html body[data-page-id="application-golden-pleasures"] #main .product-detail #purchase,
html:has(head link[rel="canonical"][href$="/colloids/golden-pleasures.html"]) body #main .full-product #purchase {
  clear: left;
}

/* Chapter photos keep their captions together when they move next to the prose. */
html body #main .history-with-floating-photo,
html body #main .history-with-floating-photo > :is(.history-chapter-text, .history-early-text, .history-founder-copy, .founder-profile-copy) {
  display: flow-root;
}

html body #main .history-with-floating-photo figure:is(.history-photo, .history-early-photo) {
  float: left;
  width: var(--reading-image-width);
  margin: .25rem var(--reading-image-gap) .75rem 0;
}

html body #main .history-with-floating-photo figure:is(.history-photo, .history-early-photo) > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--reading-image-height);
  min-height: 0;
  margin: 0 auto;
  object-fit: contain;
}