/*
 * Seller-authored product description content.
 *
 * The description is whatever HTML the seller saved in their editor, so it has
 * to survive markup the theme's own templates never produce.
 */

/*
 * Editors wrap list item text in a paragraph: <li><p>text</p></li>. The theme's
 * lists render with list-style-position: inside, which puts the marker into the
 * item's own content flow rather than out in the margin - so a block-level first
 * child starts on the line below its own bullet, and every item costs two lines
 * instead of one. Laying that paragraph out inline puts the bullet and the text
 * back on the same line.
 *
 * Restricted to the item's leading paragraph, and only where nothing can run
 * into it: the paragraph is the only element in the item, or the thing after it
 * is a nested list, which is a block and keeps its own line either way. An item
 * built from several paragraphs is left exactly as it renders today rather than
 * having them run together.
 */
.product-description li > p:only-child {
    display: inline;
}

/*
 * Its own rule rather than a third selector on the one above: an unsupported
 * :has() invalidates the whole selector list it appears in, which would take
 * the plain :only-child case down with it on older browsers.
 */
.product-description li > p:first-child:has(+ ul),
.product-description li > p:first-child:has(+ ol) {
    display: inline;
}

/*
 * The paragraph's bottom margin was what separated one item from the next, and
 * an inline box does not apply one, so the gap moves onto the item itself.
 */
.product-description li:has(> p:only-child) + li {
    margin-top: 0.5em;
}