/* Native ordered steps. Only the title reserves room for the number badge. */
.pp-howto-steps,
.pp-single-post .entry-content > ol.pp-howto-steps {
    margin: 0 0 1.5em;
    padding: 0;
    list-style: none;
    counter-reset: pp-howto;
}
.pp-howto-steps > .pp-howto-step,
.pp-single-post .entry-content > ol.pp-howto-steps > .pp-howto-step {
    display: list-item;
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0;
    counter-increment: pp-howto;
}
.pp-howto-steps > .pp-howto-step + .pp-howto-step,
.pp-single-post .entry-content > ol.pp-howto-steps > .pp-howto-step + .pp-howto-step {
    margin-top: 2em;
}
.pp-howto-steps > .pp-howto-step::marker { content: ''; }
.pp-howto-steps > .pp-howto-step::before,
.pp-single-post .entry-content > ol.pp-howto-steps > .pp-howto-step::before {
    content: none;
}
.pp-howto-step > .pp-howto-step__title {
    position: relative;
    box-sizing: border-box;
    min-height: 28px;
    margin: 0 0 1em;
    padding: 0 0 0 42px;
    font-family: var(--pp-font-body, inherit);
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    color: inherit;
}
.pp-howto-step > .pp-howto-step__title::before {
    content: counter(pp-howto) / '';
    position: absolute;
    inset-inline-start: 0;
    top: .22em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FCCAB7;
    color: #191816;
    font-family: var(--pp-font-body, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}
.pp-howto-step > :where(p, figure, .wp-block-image, .wp-block-gallery, .wp-block-group, .wp-block-columns) {
    box-sizing: border-box;
    max-width: 100%;
    margin-inline: 0;
}
.pp-howto-step > :where(figure.wp-block-image, .wp-block-image, .wp-block-gallery) {
    width: 100%;
    margin-block: 0 1.25em;
}
.pp-howto-step :where(.wp-block-image img, figure > img) {
    max-width: 100%;
    height: auto;
}
/* Standalone process photos fill the step width without changing gallery cells. */
.pp-howto-step .wp-block-image:not(.wp-block-gallery .wp-block-image) {
    width: 100%;
}
.pp-howto-step .wp-block-image:not(.wp-block-gallery .wp-block-image) img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.pp-howto-step > :last-child { margin-bottom: 0; }
/* Gutenberg's nested-block wrappers retain the same title-only indentation. */
.editor-styles-wrapper .pp-howto-steps > .block-editor-block-list__block.pp-howto-step { padding: 0; }
@media (max-width: 767px) {
    .pp-howto-steps > .pp-howto-step + .pp-howto-step,
    .pp-single-post .entry-content > ol.pp-howto-steps > .pp-howto-step + .pp-howto-step { margin-top: 1.75em; }
}