/*
 * Grid Wrapper markup that was pasted as HTML into the product detail rich text
 * (.productdetail) instead of being built with the Grid Wrapper block.
 *
 * The rich text editor drops the empty spacer cells the real block uses
 * (<div class="richtext"></div> with nothing inside), so these grids lose their
 * centering and the gaps between sections. The rules below put that spacing back
 * without touching the content. Everything is scoped to .productdetail, which the
 * real Grid Wrapper block never renders into, so block-built pages are unaffected.
 *
 * The rich text editor rewrites inline styles as "--span-lg: 4; --span-md: 4; ...",
 * which is what the attribute selectors match on.
 */

/* Spacer rows between sections (the real block uses empty full-width cells). */
.productdetail .gridWrapper__grid + .gridWrapper__grid {
    margin-top: 2rem;
}

/* Exactly four 4-wide cards: lay them out 2 + 2 centred, as the real block does
   with a 2-wide spacer cell on each side (tablet too - the real block uses 2/4/4/2
   there as well). The 1st and 3rd card start at column 3;
   the 2nd and 4th follow on automatically. A "card" is a cell that is 4 wide on
   both desktop and tablet. */
@media (min-width: 768px) {
    .productdetail .gridWrapper__grid:has(
            > [style*="--span-lg: 4;"][style*="--span-md: 4;"]
            ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
            ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
            ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
        ):not(:has(
            > [style*="--span-lg: 4;"][style*="--span-md: 4;"]
            ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
            ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
            ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
            ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
        ))
        > [style*="--span-lg: 4;"][style*="--span-md: 4;"]:is(
            /* 1st card: no card before it */
            :not([style*="--span-lg: 4;"][style*="--span-md: 4;"] ~ *),
            /* 3rd card: exactly two cards before it */
            [style*="--span-lg: 4;"][style*="--span-md: 4;"]
                ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
                ~ :not(
                    [style*="--span-lg: 4;"][style*="--span-md: 4;"]
                    ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
                    ~ [style*="--span-lg: 4;"][style*="--span-md: 4;"]
                    ~ *
                )
        ) {
        /* start AND span - setting only the start would drop gridWrapper.css's "span 4" */
        grid-column: 3 / span 4;
    }
}

/* A single narrower-than-full cell on its own: centre it, as the real block does
   with a spacer cell on each side (e.g. 1 + 10 + 1). Desktop only - below 1024px
   these cells are full width anyway. */
@media (min-width: 1024px) {
    .productdetail .gridWrapper__grid:has(> .gridWrapper__cell:not([style*="--span-lg: 12;"])):not(:has(
            > .gridWrapper__cell:not([style*="--span-lg: 12;"])
            ~ .gridWrapper__cell:not([style*="--span-lg: 12;"])
        ))
        > .gridWrapper__cell:not([style*="--span-lg: 12;"]) {
        grid-column: 1 / -1;
        justify-self: center;
        /* N of 12 columns, including the gaps it spans (gap is 1rem in gridWrapper.css) */
        width: calc((100% - 11rem) * var(--span-lg) / 12 + (var(--span-lg) - 1) * 1rem);
    }
}