.nc-creator { border-bottom: 1px solid var(--nc-line,#cadcda); scroll-margin-top: 90px; }
.nc-creator-heading,.nc-creator-caption { padding: 12px clamp(16px,3vw,48px); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nc-creator-heading { flex-wrap:wrap; }
.nc-creator-title { display:flex; gap:16px; align-items:baseline; min-width:0; }
.nc-creator-tools { display:flex; align-items:center; gap:20px; margin-left:auto; }
.nc-creator-tools .nc-icon-rail { margin:0; gap:3px; justify-content:flex-end; }
.nc-creator-tools .nc-icon-chip { width:28px; height:28px; padding:2px; }
.nc-creator-heading span,.nc-creator-caption { font-size:12px; opacity:.8; }
.nc-creator-heading strong { font-size:14px; }
.nc-creator-heading a { white-space:nowrap; font-size:13px; color:inherit; }
.nc-creator-surface { position:relative; background:#f5f8fa; }
.nc-creator #shoptefyDesign { border-radius:0; }
/* Keep native idle/quantity states distinct while improving white-text contrast. */
.nc-creator .stf-wrapper #shoptefyDesign .stf-CTA .stf-top-button:not(.stf-disabled) { background:#176c74!important; color:#fff; }
.nc-creator .stf-wrapper #shoptefyDesign .stf-CTA .stf-top-button:not(.stf-disabled):hover { background:#145f66!important; }
.nc-creator .stf-wrapper #shoptefyDesign .stf-CTA .stf-top-button:not(.stf-disabled) :is(.stf-action-text,.shoptefy-product-price,.shoptefy-product-price-with-quantity,.stf-price-desc) { color:#fff; }
.nc-creator .stf-wrapper #shoptefyDesign .shoptefy-cart-field-quantity:not(.stf-qty-disabled) [data-action1="plus"]:not(.stf-disabled) { background:#176c74!important; }
/* Native quantity inputs set the plus background; cart readiness has its own ARIA state. */
.nc-creator .stf-wrapper #shoptefyDesign .stf-product-price-section .stf-CTA .stf-button[aria-disabled="false"]:not(.stf-disabled),
.nc-creator .stf-wrapper #shoptefyDesign .shoptefy-cart-field-quantity:not(.stf-qty-disabled) [data-action1="plus"]:not(.stf-disabled):is([style*="rgb(255, 153, 2)"],[style*="#ff9902"]) { background:#b45300!important; border-color:#d98339; }
.nc-creator .stf-wrapper #shoptefyDesign .stf-product-price-section .stf-CTA .stf-button[aria-disabled="false"]:not(.stf-disabled) { box-shadow:0 8px 20px #b4530026; }
.nc-creator .stf-wrapper #shoptefyDesign .stf-product-price-section .stf-CTA .stf-button[aria-disabled="false"]:not(.stf-disabled):hover,
.nc-creator .stf-wrapper #shoptefyDesign .shoptefy-cart-field-quantity:not(.stf-qty-disabled) [data-action1="plus"]:not(.stf-disabled):is([style*="rgb(255, 153, 2)"],[style*="#ff9902"]):hover { background:#924300!important; }
.nc-creator-notice { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:100000; background:#153f44; color:white; padding:12px 18px; border-radius:12px; max-width:90%; font-size:12px; }
.nc-editor-in-view .nc-product-actions { visibility:hidden; pointer-events:none; }
.nc-creator-loading { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; background:linear-gradient(145deg,#f5f8fa,#deecec); color:#153f44; }
.nc-creator-loading[hidden] { display:none; }
html[data-commerce-theme="night"] .nc-creator-surface { background:#384344; }
html[data-commerce-theme="night"] .nc-creator-loading { background:linear-gradient(145deg,#202829,#384344); color:#f1f7f6; }
.nc-creator-loading p { margin:0; font-size:13px; }
.nc-creator-orbit { width:50px; height:50px; border:2px solid #9ac1c3; border-top-color:#176c74; border-radius:50%; animation:nc-creator-spin 1s linear infinite; }
@keyframes nc-creator-spin { to { transform:rotate(360deg); } }
@media(max-width:640px) { .nc-creator-title { display:block;flex:1;min-width:0; }.nc-creator-title>span { display:none; }.nc-creator-heading { gap:8px;padding:10px 16px;flex-wrap:nowrap; }.nc-creator-heading strong { display:block;font-size:12px;line-height:1.5; }.nc-creator-tools { flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:44%; }.nc-creator-tools>a { font-size:11px; }.nc-creator-tools .nc-icon-rail { gap:1px; }.nc-creator-tools .nc-icon-chip { width:24px;height:24px; }.nc-creator-caption { font-size:10px;gap:8px; } }
@media(prefers-reduced-motion:reduce) { .nc-creator-orbit { animation:none; } }

/* Native artwork dialogs are mounted on body, outside the themed Creator wrapper. */
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > :is(.stf-halftone-dialog, .stf-artwork-request) {
    --stf-dark-bg: #202829;
    --stf-dark-surface: #2a3435;
    --stf-dark-surface-raised: #343f40;
    --stf-dark-surface-soft: #3d494a;
    --stf-dark-border: #536364;
    --stf-dark-text: #f1f7f6;
    --stf-dark-text-muted: #bdc9c7;
    --stf-dark-accent-hover: #35b7b0;
    --stf-dark-danger: #ff7895;
    --100: var(--stf-dark-text);
    --Stroke: var(--stf-dark-border);
    --stf-halftone-accent: var(--stf-dark-accent-hover);
    color-scheme: dark;
    border-color: var(--stf-dark-border);
    background: var(--stf-dark-bg);
    color: var(--stf-dark-text);
    box-shadow: 0 28px 90px rgba(2, 7, 8, .5);
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > :is(.stf-halftone-dialog, .stf-artwork-request)::backdrop {
    background: rgba(7, 13, 14, .8);
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > :is(.stf-halftone-dialog, .stf-artwork-request) :where(
    .stf-round, .stf-halftone-close, .stf-artwork-request-actions button
) {
    border-color: var(--stf-dark-border);
    background: var(--stf-dark-surface-raised);
    color: var(--stf-dark-text);
    box-shadow: none;
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > :is(.stf-halftone-dialog, .stf-artwork-request) :where(
    .stf-round, .stf-halftone-close, .stf-artwork-request-actions button
):not(:disabled):hover {
    border-color: var(--stf-dark-accent-hover);
    background: var(--stf-dark-surface-soft);
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > .stf-halftone-dialog :where(
    .stf-halftone-header p, .stf-halftone-auto-note, .stf-halftone-meta,
    .stf-halftone-details, .stf-halftone-footer p
) {
    color: var(--stf-dark-text-muted);
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > :is(.stf-halftone-dialog, .stf-artwork-request) :where(
    .stf-halftone-screen-controls, .stf-halftone-card, .stf-halftone-help-body,
    .stf-halftone-saving-card, .stf-artwork-help-body, .stf-halftone-fabric input
) {
    border-color: var(--stf-dark-border);
    background: var(--stf-dark-surface);
    color: var(--stf-dark-text);
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > :is(.stf-halftone-dialog, .stf-artwork-request) .stf-artwork-professional textarea {
    border-color: var(--stf-dark-border);
    background: var(--stf-dark-surface);
    color: var(--stf-dark-text);
    caret-color: var(--stf-dark-accent-hover);
    box-shadow: none;
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > .stf-halftone-dialog .stf-halftone-card:last-child h3 {
    background: var(--stf-dark-surface-raised);
    color: var(--stf-dark-accent-hover);
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > :is(.stf-halftone-dialog, .stf-artwork-request) :where(
    .stf-artwork-price, .stf-artwork-help summary, .stf-artwork-request-status,
    .stf-halftone-saving-note
) {
    color: var(--stf-dark-accent-hover);
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > .stf-halftone-dialog .stf-halftone-status.stf-halftone-error {
    color: var(--stf-dark-danger);
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > .stf-halftone-dialog .stf-round[aria-pressed="true"],
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > .stf-halftone-dialog .stf-halftone-use,
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > .stf-artwork-request .stf-artwork-request-use {
    border-color: var(--stf-dark-accent-hover);
    background: #176f78;
    color: #fff;
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > .stf-halftone-dialog .stf-halftone-pro[aria-pressed="false"],
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign .stf-vector-controls .stf-vectorize-professional {
    border-color: #bd6100;
    background: #bd6100;
    color: #fff;
}
body:has(.nc-creator .stf-wrapper.stf-theme-dark) > :is(.stf-halftone-dialog, .stf-artwork-request) :where(
    button, input, textarea, summary
):focus-visible {
    outline: 3px solid var(--stf-dark-accent-hover);
    outline-offset: 3px;
}

/* Theme only the vector editor chrome, never the SVG artwork, swatches or fabric. */
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign :where(
    .stf-vector-controls, .stf-vector-controls label, .stf-svg-navigation output
) {
    color: var(--stf-dark-text);
}
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign :where(
    .stf-vector-hint, .stf-vector-controls small, .stf-svg-layer-count
) {
    color: var(--stf-dark-text-muted);
}
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign :where(
    .stf-vector-status, .stf-vector-controls output, .stf-vector-controls .stf-artwork-price
) {
    color: var(--stf-dark-accent-hover);
}
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign :where(
    .stf-vector-loader, .stf-svg-layer-tabs, .stf-svg-navigation, .stf-svg-selection-tools
) {
    border-color: var(--stf-dark-border);
    background: var(--stf-dark-surface);
    color: var(--stf-dark-text);
}
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign .stf-vector-controls select,
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign :where(
    .stf-svg-layer-select, .stf-svg-layer-expand, .stf-svg-layer-action
) {
    border-color: var(--stf-dark-border);
    background: var(--stf-dark-surface-raised);
    color: var(--stf-dark-text);
}
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign :is(
    .stf-vector-controls .stf-button[aria-pressed="true"],
    .stf-svg-layer-tabs [aria-selected="true"],
    .stf-svg-navigation .stf-button[aria-pressed="true"]
) {
    border-color: var(--stf-dark-accent-hover);
    background: #176f78;
    color: #fff;
}
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign .stf-svg-layer-select[aria-pressed="true"],
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign .stf-svg-layer-action:not(:disabled):hover {
    border-color: var(--stf-dark-accent-hover);
    background: var(--stf-dark-accent-soft);
    color: var(--stf-dark-text);
}
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign .stf-svg-layer-action[data-stf-layer-action="delete"]:not(:disabled):hover {
    border-color: var(--stf-dark-danger);
    background: rgba(255, 120, 149, .12);
    color: var(--stf-dark-danger);
}
.nc-creator .stf-wrapper.stf-theme-dark #shoptefyDesign .stf-svg-layer-action[aria-pressed="true"]::after {
    box-shadow: 0 1px var(--stf-dark-surface);
}