#virtualTryContainer {
    display: block;
    text-align: center;
    width: 100%;
    padding: 0px;
}

/* Spec 33: #testNowButton also carries the shared .tryon-button class (see
   virtualtryButton.php) — everything visual (colour default, radius, font,
   shadow, mark layout) now lives on that class so both button paths draw
   from one definition. Only this element's own layout property (the 50%
   width) stays here; an ID selector would otherwise out-specificity the
   class's brand radius/shadow rules. */
#testNowButton {
    width: 50%;
}

#testNowButtonLoading {
    display: none;
}

/* Automatic Button Styles */
.tryon-automatic-button {
    display: block;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 10px 0;
}

/* Spec 33 (this repo's version of spec 25 — see specs/33-woo-storefront-
   chrome-brand.md): brand pill radius + type stack + mark/label row,
   using the --vtb-* tokens brand-tokens.css defines (never a raw hex —
   the one exception is each var()'s own fallback, which exists only for
   the theoretical case brand-tokens.css failed to load, and repeats that
   same token's real value so there is nothing to keep in sync). Merchant
   colour (background-color, inline per render site) always wins over
   these defaults — only shape/type/shadow/mark are branded here. */
.tryon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    font-family: var(--vtb-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--vtb-radius-pill, 999px);
    cursor: pointer;
    transition: background-color var(--vtb-transition, .2s ease), box-shadow var(--vtb-transition, .2s ease);
    text-decoration: none;
}

/* Spec 33 task 4: hover colour is a CSS custom property set per render site
   (darken_color() still computes it — see virtualtryButton.php/
   automatic-button.php — but the *assignment* is now a CSS variable, not an
   inline onmouseover handler), falling back to the brand default ink-2 for
   any button that doesn't set one (e.g. if a future path forgets to). This
   replaces the old lift-on-hover + generic drop shadow entirely —
   neither is the brand's signature interaction. */
.tryon-button:hover {
    background-color: var(--tryon-hover-color, var(--vtb-ink-2, #1F1E1B));
}

/* Spec 33 task 1, misuse rule 2 (brand-tokens.css): the signature shadow
   marks ONE primary action, not every button on a view. The shortcode and
   automatic-PDP buttons are each the single try-on CTA on their page
   (mutually exclusive via shortcode_override, per Settings.jsx) — the
   "primary" button spec 25 also gives the shadow to. The archive card
   button renders once per product on a grid (many per view), the same
   shape Shopify's own 'card' variant is in — and spec 25 gives that
   variant no shadow either — so it's excluded here via :not(), not a new
   class, since both non-card paths already share nothing but the plain
   `.tryon-button` + size class. */
/* Spec 35: .tryon-floating-button is excluded here (as well as
   .tryon-button-card) — it carries its own, per-position mirrored shadow
   below, and needs to win by source order without a specificity fight;
   both :not()s keep this and the floating rule at equal (0,2,0)
   specificity, so "declared later wins" applies predictably. */
.tryon-button:not(.tryon-button-card):not(.tryon-floating-button) {
    box-shadow: var(--vtb-shadow-signature, 4px 4px 0 #FF3D00);
}

.tryon-button:not(.tryon-button-card):not(.tryon-floating-button):hover {
    box-shadow: var(--vtb-shadow-signature-hover, 6px 6px 0 #FF3D00);
}

.tryon-button-small {
    padding: 8px 16px;
    font-size: 14px;
}

.tryon-button-medium {
    padding: 10px 20px;
    font-size: 16px;
}

.tryon-button-large {
    padding: 12px 24px;
    font-size: 18px;
}

/* Spec 33: the brand mark + label, laid out as a centred row by .tryon-
   button's flex properties above. The mark's own SVG is emitted server-side
   (Support\BrandMark::svg()) so this class only sizes/positions its
   wrapper span; the accent fill/outline stroke colours live in the SVG
   markup itself, per brand-tokens.css misuse rule 7 (never recolour the
   mark via CSS). */
.tryon-button-mark {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Spec 16: shop/category card buttons — an ordinary flow child appended
   after the card's own markup, not an overlay, so it adds height rather
   than fighting the theme's grid. */
.tryon-archive-button {
    display: block;
    width: 100%;
    margin: 8px 0 0;
}

/* Spec 33 real finding (caught by actually rendering it, per AGENTS.md —
   not assumed): .tryon-button's pill radius is right for the shortcode/
   automatic-PDP buttons (never full-width; a compact inline control, the
   same category spec 25 reserved the pill for on Shopify's floating
   button), but this variant *is* full-width, same as Shopify's own 'card'
   variant — stretching a 999px pill across a 100%-wide bar reads as a
   capsule, exactly the "not on brand" look spec 25's own Decision section
   warned about for a full-width button. Overrides back to the general
   --vtb-radius (14px), matching Shopify's card variant exactly instead of
   inheriting the base's pill. */
.tryon-button-card {
    display: flex;
    width: 100%;
    padding: 8px 14px;
    font-size: 14px;
    margin: 0;
    box-sizing: border-box;
    border-radius: var(--vtb-radius, 14px);
}

/* Spec 35: the store-wide floating button (FloatingButton.php). Fixed pill,
   independent of any add-to-cart layout, at one of spec 18's six positions.
   The colour/shape/mark/hover-darken rules all come from .tryon-button
   above; this class only adds the fixed-position pieces spec 25's
   'floating' variant carries on Shopify (position, z-index, the mirrored
   signature shadow, entrance animation) — see FloatingButton.php's
   floating_signature_shadow() for why the shadow direction is per-position,
   not a single constant. z-index picked to sit above typical theme
   headers/drawers without competing with browser chrome. */
.tryon-floating-button {
    /* Found live by spec 39/35's verification pass: .tryon-button's own
       margin:5px (above) is meant for buttons in document flow — a
       position:fixed element's inset offsets apply to its margin box, so
       without this override the button sat 25px from each edge, not the
       20px spec 18/35 decided on, and Shopify's inline-styled floating
       button carries no margin at all. Reset to 0 so the position rules
       below are the only offset. */
    margin: 0;
    position: fixed;
    z-index: 2147483000;
    border-radius: var(--vtb-radius-pill, 999px);
    box-shadow: var(--tryon-floating-shadow, 4px 4px 0 #FF3D00);
    animation: tryon-floating-enter .25s ease forwards;
}

.tryon-floating-button:hover {
    box-shadow: var(--tryon-floating-shadow-hover, 6px 6px 0 #FF3D00);
}

.tryon-floating-button-bottom_left  { bottom: 20px; left: 20px; }
.tryon-floating-button-bottom_right { bottom: 20px; right: 20px; }
.tryon-floating-button-top_left     { top: 20px; left: 20px; }
.tryon-floating-button-top_right    { top: 20px; right: 20px; }

/* spec 18's two centres: a fixed element centred with `left:50%` needs
   `transform:translateX(-50%)` to actually sit centred (its box is
   left-anchored at the 50% point otherwise). Exposed as a custom property
   (not hard-coded into the keyframes below) so both the resting state and
   every frame of the entrance animation compose it with their own
   translateY — the actual bug spec 18 hit on Shopify was a *later* plain
   `button.style.transform = 'translateY(...)'` write replacing this
   property wholesale (CSS `transform` is one property, not a set); doing
   the composition once, here, via var() means there is no second write to
   clobber it with in the first place — see this spec's Log for why a CSS
   composition sidesteps that class of bug entirely rather than porting
   Shopify's JS floatingCornerBaseTransform()/withBaseTransform() pair. */
.tryon-floating-button-bottom_center,
.tryon-floating-button-top_center {
    left: 50%;
    --tryon-floating-base-transform: translateX(-50%);
}
.tryon-floating-button-bottom_center { bottom: 20px; }
.tryon-floating-button-top_center { top: 20px; }

@keyframes tryon-floating-enter {
    from {
        opacity: 0;
        transform: var(--tryon-floating-base-transform, none) translateY(8px);
    }
    to {
        opacity: 1;
        transform: var(--tryon-floating-base-transform, none) translateY(0);
    }
}

/* Task C: prefers-reduced-motion skips the entrance animation entirely —
   lands directly at its settled, centred state rather than just a 0-duration
   version of the same animation. */
@media (prefers-reduced-motion: reduce) {
    .tryon-floating-button {
        animation: none;
        opacity: 1;
        transform: var(--tryon-floating-base-transform, none);
    }
}

.tryon-loading {
    display: none;
    text-align: center;
    padding: 10px;
}

.tryon-loading .spinner {
    margin: 0 auto;
}

/* Modern Spinner for loading state */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Button loading state */
.tryon-button.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.tryon-button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tryon-button {
        width: 100%;
        max-width: 300px;
    }

    .tryon-automatic-button {
        padding: 5px 0;
    }
}