/* Minimal product-detail entry point for Sound Studio. */
body.single-product {
    --sound-studio-surface: var(--surface-card);
    --sound-studio-surface-hover: var(--surface-raised);
    --sound-studio-control: var(--surface-control);
    --sound-studio-navigation: var(--surface-navigation);
    --sound-studio-text-strong: var(--text-strong);
    --sound-studio-muted: var(--text-muted);
    --sound-studio-border: var(--border-subtle);
    --sound-studio-accent: var(--theme-accent);
    --sound-studio-on-accent: var(--text-on-accent);
}

body.dark.single-product {
    --sound-studio-surface: var(--product-detail-raised, var(--surface-raised));
    --sound-studio-surface-hover: var(--product-detail-control-hover, var(--surface-control-hover));
    --sound-studio-control: var(--product-detail-surface, var(--surface-control));
    --sound-studio-navigation: var(--product-detail-navigation, var(--surface-navigation));
    --sound-studio-text-strong: var(--product-detail-text-strong, var(--text-strong));
    --sound-studio-muted: var(--product-detail-text-muted, var(--text-muted));
    --sound-studio-border: var(--product-detail-border-strong, var(--border-control));
}

body.single-product .sound-studio-cta {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 32px;
    gap: 10px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--sound-studio-accent) 32%, var(--sound-studio-border));
    border-radius: 12px;
    background: var(--sound-studio-surface);
    color: var(--sound-studio-text-strong);
    text-align: right;
    text-decoration: none;
    box-shadow:
        inset -2px 0 0 var(--sound-studio-accent),
        0 4px 14px color-mix(in srgb, var(--shadow-color) 52%, transparent);
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 150ms var(--theme-motion-ease),
        background-color 150ms var(--theme-motion-ease),
        border-color 150ms var(--theme-motion-ease),
        box-shadow 150ms var(--theme-motion-ease);
}

body.single-product .sound-studio-cta:hover {
    border-color: color-mix(in srgb, var(--sound-studio-accent) 64%, var(--sound-studio-border));
    background: var(--sound-studio-surface-hover);
    color: var(--sound-studio-text-strong);
    box-shadow:
        inset -2px 0 0 var(--sound-studio-accent),
        0 6px 18px color-mix(in srgb, var(--shadow-color) 68%, transparent);
    transform: translateY(-1px);
}

body.single-product .sound-studio-cta:active {
    transform: translateY(0);
}

body.single-product .sound-studio-cta:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

body.single-product .sound-studio-cta__visual {
    display: grid;
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--sound-studio-accent) 46%, var(--sound-studio-navigation));
    border-radius: 11px;
    background: var(--sound-studio-navigation);
    color: var(--sound-studio-accent);
    place-items: center;
}

body.single-product .sound-studio-cta__visual i {
    font-size: 18px;
}

body.single-product .sound-studio-cta__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.4;
}

body.single-product .sound-studio-cta__copy strong,
body.single-product .sound-studio-cta__copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.single-product .sound-studio-cta__copy strong {
    color: var(--sound-studio-text-strong);
    font-size: 13px;
    font-variation-settings: "wght" 600;
}

body.single-product .sound-studio-cta__copy span {
    margin-top: 2px;
    color: var(--sound-studio-muted);
    font-size: 10px;
}

body.single-product .sound-studio-cta__arrow {
    display: grid;
    width: 32px;
    height: 32px;
    border: 1px solid var(--sound-studio-border);
    border-radius: 50%;
    background: var(--sound-studio-control);
    color: var(--sound-studio-accent);
    place-items: center;
    transition:
        background-color 150ms var(--theme-motion-ease),
        border-color 150ms var(--theme-motion-ease),
        color 150ms var(--theme-motion-ease);
}

body.single-product .sound-studio-cta__arrow i {
    font-size: 10px;
}

body.single-product .sound-studio-cta:hover .sound-studio-cta__arrow {
    border-color: var(--sound-studio-accent);
    background: var(--sound-studio-accent);
    color: var(--sound-studio-on-accent);
}

@media (max-width: 767px) {
    body.single-product #site-main .purchase-p .sound-studio-cta {
        min-height: 64px;
        margin-block: 12px 20px;
        padding: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.single-product .sound-studio-cta,
    body.single-product .sound-studio-cta__arrow {
        transition: none;
    }
}