/* Shared interaction finish. Load after page styles on .sc-controls layouts.
   Colors, sizing, layout and compact/icon control shapes remain page-owned. */
body.sc-controls {
    --control-radius:7px;
    --control-duration:140ms;
}

/* Form controls resolve focus and file colors from the active palette. */
body.sc-controls :is(.si-form-panel,.co-card,.co-error-summary,.co-notice,.co-payment-detail,.hp-product-card,main.sp-page,.cr-page,.oc-card,.oc-lookup-panel),
body.sc-controls.sc-install-page {
    --control-focus:var(--sc-gold,#865c29);
    --control-file-bg:var(--sc-raised,#eee9de);
    --control-file-border:var(--sc-line,#c7cec3);
}
body.sc-controls :is(.co-summary,.cr-summary),
body.sc-controls .cr-page .cr-aside {
    --control-focus:#e4be73;
    --control-file-bg:#19343a;
    --control-file-border:#365057;
}

/* A stable focus outline works even when a page removes the field shadow.
   Resolve --sc-gold on the focused element so local light surfaces are respected. */
html body.sc-controls :is(a[href],button,input:not([type="hidden"]),select,textarea,summary,[tabindex],[role="button"]):focus-visible {
    outline:2px solid var(--control-focus,var(--sc-gold,var(--color-accent,#e4be73))) !important;
    outline-offset:3px !important;
}

/* Keep rings inside clipped, compact quantity groups. */
html body.sc-controls :is(.cr-quantity,.pd-quantity,.qty-stepper,.quantity-selector) :is(button,input):focus-visible {
    outline-offset:-3px !important;
}

html body.sc-controls :is(
    .button,.primary-button,.secondary-button,.sc-button,.pw-button,
    .portal-btn,.settings-btn,.rl-button,.db-button,.cpr-button,
    .od-button,.cat-button,.sp-button,.pe-button,.cp-button,
    .ord-button,.cust-button,.ce-button,.mord-button,.btn-action,
    .btn-update,.btn-delete,.btn-filter,.btn-view-store,.btn-place,
    .btn-buy,.btn-cart,.btn-wa,.btn-wa-checkout,.btn-checkout-primary,
    .btn-mobile-checkout,.btn-apply-coupon,.btn-act-primary,.btn-act-secondary,.btn-write-review,
    .btn-submit,.auth-submit,.si-submit,.home-btn,.hp-button,
    .hp-business-button,.about-button,.ct2-button,.ct2-submit,.cat-btn-primary,
    .cat-btn-secondary,.sc-btn-glow,.sc-btn-category,.sc-btn-cart,.sc-btn-details,
    .sc-drawer-btn,.store-cta-btn,.customer-auth__button,.oc-btn,.cr-primary,
    .cr-checkout,.cr-product-link,.pd-contact-action,.sc-artwork-choose,.whatsapp-form-button,
    .faq-btn-wa,.fq2-wa-btn,.fq2-en-btn,.logos-submit-whatsapp,.logos-sticky-btn,
    .nbc-sticky-btn,.qs-sticky-btn,.sc-sticky-btn,.save-bar-btn,input[type="submit"],
    input[type="reset"],#co-submit,button[type="submit"],button[type="reset"],.sp-card-actions button,
    .cr-input-action button,.cr-product button,.pd-actions button,.pd-delivery button,.pd-review-dialog form>button,
    .hp-search button,.co-promo button,.auth-secondary-button,.sc-install-page button
) {
    border-radius:var(--control-radius) !important;
    box-shadow:none !important;
    text-decoration:none;
    transition:background-color var(--control-duration) ease,border-color var(--control-duration) ease,
        color var(--control-duration) ease,filter var(--control-duration) ease,box-shadow var(--control-duration) ease !important;
}

/* Feedback never changes a control's position or its action/status color. */
@media (hover:hover) {
    html body.sc-controls :is(
    .button,.primary-button,.secondary-button,.sc-button,.pw-button,
    .portal-btn,.settings-btn,.rl-button,.db-button,.cpr-button,
    .od-button,.cat-button,.sp-button,.pe-button,.cp-button,
    .ord-button,.cust-button,.ce-button,.mord-button,.btn-action,
    .btn-update,.btn-delete,.btn-filter,.btn-view-store,.btn-place,
    .btn-buy,.btn-cart,.btn-wa,.btn-wa-checkout,.btn-checkout-primary,
    .btn-mobile-checkout,.btn-apply-coupon,.btn-act-primary,.btn-act-secondary,.btn-write-review,
    .btn-submit,.auth-submit,.si-submit,.home-btn,.hp-button,
    .hp-business-button,.about-button,.ct2-button,.ct2-submit,.cat-btn-primary,
    .cat-btn-secondary,.sc-btn-glow,.sc-btn-category,.sc-btn-cart,.sc-btn-details,
    .sc-drawer-btn,.store-cta-btn,.customer-auth__button,.oc-btn,.cr-primary,
    .cr-checkout,.cr-product-link,.pd-contact-action,.sc-artwork-choose,.whatsapp-form-button,
    .faq-btn-wa,.fq2-wa-btn,.fq2-en-btn,.logos-submit-whatsapp,.logos-sticky-btn,
    .nbc-sticky-btn,.qs-sticky-btn,.sc-sticky-btn,.save-bar-btn,input[type="submit"],
    input[type="reset"],#co-submit,button[type="submit"],button[type="reset"],.sp-card-actions button,
    .cr-input-action button,.cr-product button,.pd-actions button,.pd-delivery button,.pd-review-dialog form>button,
    .hp-search button,.co-promo button,.auth-secondary-button,.sc-install-page button
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
        filter:brightness(1.06) !important;
        transform:none !important;
        box-shadow:inset 0 0 0 1px rgba(127,127,127,.2) !important;
        box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent) !important;
    }
}

html body.sc-controls :is(
    .button,.primary-button,.secondary-button,.sc-button,.pw-button,
    .portal-btn,.settings-btn,.rl-button,.db-button,.cpr-button,
    .od-button,.cat-button,.sp-button,.pe-button,.cp-button,
    .ord-button,.cust-button,.ce-button,.mord-button,.btn-action,
    .btn-update,.btn-delete,.btn-filter,.btn-view-store,.btn-place,
    .btn-buy,.btn-cart,.btn-wa,.btn-wa-checkout,.btn-checkout-primary,
    .btn-mobile-checkout,.btn-apply-coupon,.btn-act-primary,.btn-act-secondary,.btn-write-review,
    .btn-submit,.auth-submit,.si-submit,.home-btn,.hp-button,
    .hp-business-button,.about-button,.ct2-button,.ct2-submit,.cat-btn-primary,
    .cat-btn-secondary,.sc-btn-glow,.sc-btn-category,.sc-btn-cart,.sc-btn-details,
    .sc-drawer-btn,.store-cta-btn,.customer-auth__button,.oc-btn,.cr-primary,
    .cr-checkout,.cr-product-link,.pd-contact-action,.sc-artwork-choose,.whatsapp-form-button,
    .faq-btn-wa,.fq2-wa-btn,.fq2-en-btn,.logos-submit-whatsapp,.logos-sticky-btn,
    .nbc-sticky-btn,.qs-sticky-btn,.sc-sticky-btn,.save-bar-btn,input[type="submit"],
    input[type="reset"],#co-submit,button[type="submit"],button[type="reset"],.sp-card-actions button,
    .cr-input-action button,.cr-product button,.pd-actions button,.pd-delivery button,.pd-review-dialog form>button,
    .hp-search button,.co-promo button,.auth-secondary-button,.sc-install-page button
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
    filter:brightness(.96) !important;
    transform:none !important;
    box-shadow:inset 0 2px 3px rgba(0,0,0,.16) !important;
}

/* Keep controls reachable for explanation when disabled via ARIA. Native disabled
   controls remain disabled; no pointer-events or display changes are applied. */
html body.sc-controls :is(button,input[type="submit"],input[type="reset"],a[aria-disabled="true"],[role="button"]):is(:disabled,[aria-disabled="true"]) {
    cursor:not-allowed;
    opacity:.55;
    filter:none !important;
    transform:none !important;
    box-shadow:none !important;
}

/* Let forms retain their own loading indicators and busy cursor. */
html body.sc-controls :is(button,input[type="submit"],[role="button"])[aria-busy="true"] {
    cursor:progress;
    filter:none !important;
    transform:none !important;
    box-shadow:none !important;
}

html body.sc-controls .sp-card-actions button:disabled {cursor:progress}

/* Native fields gain a consistent border response without changing their size,
   appearance, padding or error text. Checkbox/radio/switch geometry is untouched. */
html body.sc-controls :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="reset"]):not([type="button"]),select,textarea) {
    transition:border-color var(--control-duration) ease,box-shadow var(--control-duration) ease;
}
html body.sc-controls :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="reset"]):not([type="button"]),select,textarea):not([aria-invalid="true"]):focus {
    border-color:var(--control-focus,var(--sc-gold,var(--color-accent,#e4be73))) !important;
}
html body.sc-controls :is(input,select,textarea):disabled {
    cursor:not-allowed;
}
html body.sc-controls :is(input[type="checkbox"],input[type="radio"]) {
    accent-color:var(--control-focus,var(--sc-gold,var(--color-accent,#e4be73)));
    cursor:pointer;
}
html body.sc-controls :is(input[type="checkbox"],input[type="radio"]):disabled {
    cursor:not-allowed;
}

/* Some existing switches and choice chips hide the native input visually. */
html body.sc-controls :is(.product-switch-label,.product-chip-picker) input:focus-visible + :is(.product-switch,span) {
    outline:2px solid var(--control-focus,var(--sc-gold,var(--color-accent,#e4be73)));
    outline-offset:3px;
}
html body.sc-controls :is(.pe-file-button,.sc-artwork-choose,.product-drop-zone,.product-cover-upload,.store-social-image):has(input:focus-visible) {
    outline:2px solid var(--control-focus,var(--sc-gold,var(--color-accent,#e4be73))) !important;
    outline-offset:3px !important;
}

/* Native file pickers use the surrounding field palette, including light panels. */
html body.sc-controls input[type="file"]::file-selector-button {
    margin-inline-end:12px;
    padding:8px 12px;
    border:1px solid var(--control-file-border,var(--sc-line,var(--border-strong,#365057)));
    border-radius:var(--control-radius);
    background:var(--control-file-bg,var(--sc-panel,var(--surface-card,#19343a)));
    color:inherit;
    font:inherit;
    font-weight:600;
    cursor:pointer;
    transition:filter var(--control-duration) ease;
}
@media (hover:hover) {
    html body.sc-controls input[type="file"]:not(:disabled)::file-selector-button:hover {filter:brightness(1.08)}
}
html body.sc-controls input[type="file"]:disabled::file-selector-button {cursor:not-allowed;opacity:.55}

@media (prefers-reduced-motion:reduce) {
    html body.sc-controls :is(a,button,input,select,textarea,summary,[role="button"]),
    html body.sc-controls input[type="file"]::file-selector-button {
        transition:none !important;
        animation:none !important;
    }
}

@media (forced-colors:active) {
    html body.sc-controls :is(a[href],button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible,
    html body.sc-controls :is(.product-switch-label,.product-chip-picker) input:focus-visible + :is(.product-switch,span),
    html body.sc-controls :is(.pe-file-button,.sc-artwork-choose,.product-drop-zone,.product-cover-upload,.store-social-image):has(input:focus-visible) {
        outline-color:Highlight !important;
    }
    html body.sc-controls :is(button,input[type="submit"],input[type="reset"],a[aria-disabled="true"],[role="button"]):is(:disabled,[aria-disabled="true"]) {
        color:GrayText !important;
        opacity:1;
    }
    html body.sc-controls :is(button,a,input[type="submit"],input[type="reset"]):is(:hover,:active) {
        filter:none !important;
        box-shadow:none !important;
    }
    html body.sc-controls :is(input,select,textarea):disabled {color:GrayText !important}
    html body.sc-controls .store-toggle {border:1px solid ButtonText !important;background:Canvas !important}
    html body.sc-controls .store-toggle:checked {border-color:Highlight !important;background:Highlight !important}
    html body.sc-controls .store-toggle::after {background:ButtonText}
    html body.sc-controls .store-toggle:checked::after {background:HighlightText}
    html body.sc-controls .product-switch {outline:1px solid ButtonText;background:Canvas}
    html body.sc-controls .product-switch::after {background:ButtonText}
    html body.sc-controls .product-switch-label input:checked + .product-switch {background:Highlight}
    html body.sc-controls .product-switch-label input:checked + .product-switch::after {background:HighlightText}
    html body.sc-controls .product-chip-picker input:checked + span {background:Highlight;color:HighlightText}
    html body.sc-controls input[type="file"]:disabled::file-selector-button {color:GrayText;opacity:1}
    html body.sc-controls input[type="file"]::file-selector-button {
        border-color:ButtonText;
        background:ButtonFace;
        color:ButtonText;
        filter:none;
    }
}

/* Legacy account shells use light Tailwind panels. */
body.sc-controls > .bg-gray-100 {--control-focus:#865c29}

/* Distinct field edges in light mode; invalid fields retain their error state. */
html[data-theme="light"] body.sc-controls :is(.admin-shell,.portal-content,.si-form-panel,main,.main-wrapper) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea):not([aria-invalid="true"]):not(.is-invalid):not(:user-invalid) {border-color:var(--border-strong,#81968a)!important}
html[data-theme="light"] body.sc-controls :is(input,select,textarea):focus-visible {border-color:var(--sc-gold)!important}