/**
 * BOOM Variation Form — Styles
 *
 * Reveal animations, form resets, builder preview compatibility.
 */

/* Form margin reset — !important needed to override WC .cart margin */
form.boom-variation-form {
    margin: 0 !important;
    /* This custom Cornerstone element renders a bare <form>; without an explicit
       layout it defaults to display:block, so child elements that expect a flex
       parent overlap. Behave like a Cornerstone container. */
    display: flex;
    flex-direction: column;
}

/* ── Builder preview compatibility ──────────────────────────────────────── */
/* Cornerstone adds .tco-element-preview to element wrappers inside the   */
/* builder. When that class is on the parent, :not() doesn't match, so    */
/* elements are hidden on frontend. In builder, parent HAS the class, so  */
/* :not() doesn't match and elements stay visible for editing.             */

:not(.tco-element-preview) > .hide-until-price-loaded {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1), opacity 750ms ease;
}

/* Visible from the first paint (2026-09-25, performance plan B1). The server already renders
   packshot, blurred background and sale badge for the product, and the badge value matched the
   JS-selected variation on every product checked; hiding them until the variation JS was ready
   kept the hero empty for ~1.4 s. The transition stays for real variation switches. Price and
   add-to-cart (.hide-until-price-loaded) still wait: the server shows a price range there. */
:not(.tco-element-preview) > .fade-until-variation-loaded {
    transition: opacity 750ms ease;
}

/* ── Ready state — MUST come AFTER builder rules to win specificity ───── */
/* body.boom-vf-ready gives 0-2-1 specificity, beating :not() rules at 0-2-0 */

body.boom-vf-ready .hide-until-price-loaded {
    transform: scaleY(1);
    opacity: 1;
}

body.boom-vf-ready .fade-until-variation-loaded {
    opacity: 1;
}

/* ── Display-based FOUC guard (for stacked audio frames: reserves NO space) ─ */
/* Gated on body:not(.boom-vf-ready) so once ready the element keeps its natural   */
/* display (no reveal rule that would force block over flex). .tco-element-preview */
/* keeps it visible in the builder for editing. Pairs with .boom-audio-frame.       */
body:not(.boom-vf-ready) :not(.tco-element-preview) > .hide-until-ready {
    display: none;
}

/* ── Audio demo tracks — same scaleY animation as price area ────────────── */

.boom-vf-audio-tracks {
    transform-origin: top;
    transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1), opacity 750ms ease;
}

/* ── WCSATT subscription options — hidden, our scheme buttons replace them ── */

.boom-variation-form .wcsatt-options-wrapper {
    display: none !important;
}

/* ── Strikethrough price ────────────────────────────────────────────────── */
/* Hidden by default, JS shows via slideDown when variation is on sale.    */
/* Stays visible in Cornerstone builder thanks to :not(.tco-element-preview). */

:not(.tco-element-preview) > .boom-vf-regular-price {
    display: none;
}