/**
 * Product page layer — only what style.css has no class for: disabled and toggled pills, gallery thumb state.
 */
@layer components {
    .mj-opt.is-disabled,
    .mj-opt:has(input:disabled) {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .variation-toggle-btn.is-on {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    [data-mj-photo][aria-current="true"] {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .mj-field__input[rows] {
        min-block-size: calc(var(--size-action-lg) * 1.5);
        resize: vertical;
    }
}