/*
 * Hero band — full-bleed product gallery on mobile.
 *
 * Production (measured 2026-08-17 on /downloads/crimson-film/) drops ALL
 * padding from this section's container at `max-width: 1023px`, which is the
 * same breakpoint at which it stacks the two hero columns. The gallery then
 * sits at x=0, full viewport width, 3/2, flush against the header — top, left
 * and right all exactly 0 — and the info column below it keeps a 32px inset of
 * its own. The vertical rhythm from the gallery's bottom edge to the `h1` is
 * 32px.
 *
 * Staging cannot use 1023px, and that is structural rather than a preference.
 * The hero is a `wp:columns`, and core stacks columns at `max-width: 781px`
 * with `flex-basis: 100% !important` — a rule the theme cannot move without an
 * `!important` of its own. Between 782px and 1023px staging is therefore still
 * two columns side by side, and a full-bleed gallery there would run underneath
 * the title column. So full-bleed is tied to staging's OWN stacking breakpoint,
 * 781px, which is the widest point at which it is geometrically valid.
 *
 * Mechanism: `theme.json` sets one `gutter` of root padding with
 * `useRootPaddingAwareAlignments`, so core puts `has-global-padding` on this
 * top-level constrained group and pads it with
 * `var(--wp--style--root--padding-left/right)`. The gallery is nested inside
 * `wp:columns > wp:column`, so core's `alignfull` escape hatch does NOT reach
 * it — that rule is `.has-global-padding > .alignfull`, a child combinator, and
 * `alignfull` is not honoured inside a flex column layout at all. Removing the
 * padding from the band itself is what production does, needs no negative
 * margin, and so cannot introduce horizontal overflow.
 *
 * `padding-top` moved out of the block attributes deliberately: as an inline
 * style no selector could zero it without `!important`. The two-class selector
 * `.single-download-hero.has-global-padding` beats core's single-class
 * `.has-global-padding`, per the specificity landmine in BACKLOG.md.
 *
 * `row-gap: 0` at mobile is not cosmetic: the columns' 24px row gap plus the
 * info column's own 32px top padding measured 56px from gallery to `h1` where
 * production measures 32px. Zeroing the gap lets the column's existing padding
 * supply the whole 32px.
 */
.single-download-hero.has-global-padding {
	padding-top: 32px;
}

@media (max-width: 781px) {
	.single-download-hero.has-global-padding {
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.single-download-hero .wp-block-columns {
		row-gap: 0;
	}
}

/* Thumbnails: remove border gap, use outline for active state, 1.5× size */
.wp-block-sparklestock-product-gallery__thumb {
	border: none;
	width: 96px;   /* 64 × 1.5 */
	height: 72px;  /* 48 × 1.5 */
}
.wp-block-sparklestock-product-gallery__thumb.is-active {
	outline: 2px solid var(--wp--preset--color--accent, #0073aa);
	outline-offset: -2px;
}

/* Hero column order comes from markup (gallery first, info second) so that
   DOM order matches visual order for screen readers and tab order. */

/*
 * There used to be a rule here shrinking `.edd_download_purchase_form
 * .wp-element-button` to font-size small with line-height 1. Its comment said
 * it was letting wp-element-button govern EDD buttons; it was doing the
 * opposite, and it is the whole reason Add to Cart measured 14px/400 and 37px
 * tall against production's 16px/500 and 50px. 37px is exactly what core's
 * `padding: calc(0.667em + 2px)` produces at a 14px font with line-height 1.
 *
 * It is gone. Add to Cart carries `wp-element-button` (appended by
 * `edd_purchase_link_args` in functions.php), so theme.json's
 * `styles.elements.button` now governs it, which is what the old comment
 * claimed to want.
 */