/* ScreenX white/orange product surfaces. Canvas pixels, swatches and artwork
   colors are deliberately outside this stylesheet's theme rules. */
:root {
    color-scheme: light;
    --bg: #fff;
    --bg2: #f6f6f3;
    --panel: #fff;
    --panel2: #f8f8f6;
    --elev: #fff;
    --line: #eae9e4;
    --line2: #dad8d1;
    --text: #272723;
    --muted: #76766e;
    --muted2: #74746b;
    --orange: #ff6a00;
    --orange2: #c44808;
    --orange-deep: #ce4700;
    --orange-soft: #fff1e7;
    --line-orange: #ffd2b6;
    --glow: 0 5px 16px rgba(206, 71, 0, .08);
    --soft-shadow: 0 8px 24px rgba(39, 39, 35, .045);
    --sx-bg: #fff;
    --sx-bg-soft: #f8f8f6;
    --sx-panel: #fff;
    --sx-panel-strong: #f8f8f6;
    --sx-elev: #fff;
    --sx-line: #eae9e4;
    --sx-line-strong: #dad8d1;
    --sx-text: #272723;
    --sx-muted: #76766e;
    --sx-muted-dark: #74746b;
    --sx-orange: #ff6a00;
    --sx-orange-light: #c44808;
    --sx-orange-deep: #ce4700;
    --sx-orange-soft: #fff1e7;
    --sx-cyan: #23777a;
    --sx-green: #28734c;
    --sx-shadow: 0 8px 28px rgba(39, 39, 35, .045);
}

body.sx-product-ui {
    background: #fff;
    color: #272723;
    -webkit-font-smoothing: antialiased;
}

.sx-product-ui ::-webkit-scrollbar-thumb { background: #d9d8d2; }
.sx-product-ui :is(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid #ce4700;
    outline-offset: 3px;
}
.sx-product-ui :is(.topbar, .site-header) {
    background: rgba(255, 255, 255, .97);
    border-bottom-color: #eae9e4;
    box-shadow: none;
}
.sx-product-ui .topbar::after { background: none; }
.sx-product-ui :is(.logo, .brand-mark) {
    background: #ff6a00;
    color: #fff;
    box-shadow: none;
}
.sx-product-ui :is(.tb-title, .brand) { letter-spacing: -.4px; }
.sx-product-ui :is(.tb-title span, .brand b) { color: #ff6a00; }
.sx-product-ui :is(.icon-x, .header-back, .header-icon, .button-quiet) { color: #62625a; }
.sx-product-ui :is(.icon-x, .header-back, .header-icon):hover {
    color: #c44808;
    background: #fff1e7;
    border-color: #ffd2b6;
}
.sx-product-ui :is(.inp, .txt, .sel, textarea) { color: #272723; }
.sx-product-ui :is(input, textarea)::placeholder { color: #88877e; opacity: 1; }

/* Studio retains its existing desktop panels and six-column mobile tools. */
.sx-studio-page .panel { background: #fff; }
.sx-studio-page .stage { background: #f4f4f0; }
.sx-studio-page .toolbar { background: #fff; }
.sx-studio-page .print-info { background: #fafaf8; }
.sx-studio-page .sec-h { letter-spacing: .2px; color: #65655d; }
.sx-studio-page :is(.tb-btn, .tool, .font-opt, .style-btn) { background: #fff; }
.sx-studio-page :is(.tb-btn, .tool, .layer .lact button):hover:not(:disabled) {
    background: #fff1e7;
    color: #c44808;
    border-color: #ffd2b6;
}
.sx-studio-page :is(.tb-btn.primary, .tool.accent, .price-chip.on, .btn-anyway, .draft-banner .gobtn) {
    background: #ce4700;
    color: #fff;
    box-shadow: 0 4px 12px rgba(206, 71, 0, .09);
}
.sx-studio-page :is(.tb-btn.primary, .tool.accent):hover:not(:disabled) {
    background: #b93e00;
    color: #fff;
}
.sx-studio-page :is(.opt.on, .tool.on, .font-opt.on, .style-btn.on, .layer.sel) {
    background: #fff1e7;
    color: #c44808;
    border-color: #ffba8e;
    box-shadow: none;
}
.sx-studio-page .swatch { border-color: #cecdc6; }
.sx-studio-page .canvas-shell {
    box-shadow: 0 10px 32px rgba(39, 39, 35, .08), 0 0 0 1px #e7e6e0;
}
.sx-studio-page .canvas-shell::before { background: none; }
.sx-studio-page .zoom-bar {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 6px 22px rgba(39, 39, 35, .08);
}
.sx-studio-page .zoom-bar button:hover { background: #fff1e7; color: #c44808; }
.sx-studio-page .layer .thumb,
.sx-studio-page .preview-img,
.sx-studio-page .thumbs img {
    background: repeating-conic-gradient(#f0f0ec 0% 25%, #fff 0% 50%) 0 0 / 14px 14px;
}
.sx-studio-page .code { background: #f8f8f6; color: #476350; }
.sx-studio-page :is(.modal-mask, .confirm-mask, .loading-mask) {
    background: rgba(40, 38, 34, .32);
    backdrop-filter: blur(5px);
}
.sx-studio-page :is(.modal-card, .confirm-card, .loading-card) {
    box-shadow: 0 24px 80px rgba(39, 39, 35, .14);
}
.sx-studio-page .draft-banner { box-shadow: 0 8px 30px rgba(39, 39, 35, .12); }
.sx-studio-page .toast {
    color: #272723;
    box-shadow: 0 8px 30px rgba(39, 39, 35, .12);
}
.sx-studio-page .switch .track { background: #dfdfd8; }
.sx-studio-page .switch .knob { background: #fff; box-shadow: 0 1px 3px rgba(39, 39, 35, .15); }
.sx-studio-page .switch input:checked + .track { background: #ce4700; box-shadow: none; }
.sx-studio-page .dpi-good { background: #edf7ef; color: #28734c; border-color: #bcd9c4; }
.sx-studio-page .dpi-mid { background: #fff6df; color: #8e6209; border-color: #e9d59e; }
.sx-studio-page .dpi-bad { background: #fff0ee; color: #b23629; border-color: #efbeb7; }
.sx-studio-page .confirm-card .warn-ic { background: #fff6df; color: #946509; border-color: #e9d59e; }
.sx-studio-page .tool.danger { color: #b23629; background: #fff8f7; border-color: #efbeb7; }
.sx-studio-page .validation-alert .va-icon { color: #28734c !important; }
.sx-studio-page .validation-alert:not([style]) .va-icon { color: #c44808 !important; }

/* Product detail uses the same paper-like cards as the discovery feed. */
.sx-detail-page::before { background: none; }
.sx-detail-page :is(.gallery-card, .purchase-panel, .detail-card, .reviews-section) {
    background: #fff;
    border-radius: 20px;
}
.sx-detail-page .gallery-stage { background: #f5f5f1; padding: 20px; }
.sx-detail-page .gallery-stage::before { background: none; }
.sx-detail-page .gallery-stage img {
    position: absolute;
    inset: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    object-fit: contain;
    filter: none;
}
.sx-detail-page :is(.gallery-badge, .gallery-count, .gallery-zoom-hint) {
    background: rgba(255, 255, 255, .94);
    color: #62625a;
    border-color: #e7e6e0;
}
.sx-detail-page .gallery-thumb { background: #f8f8f6; }
.sx-detail-page .gallery-thumb img { object-fit: contain; }
.sx-detail-page .gallery-thumb.active { background: #fff1e7; box-shadow: none; }
.sx-detail-page :is(.gallery-caption strong, .product-name, .price, .total-price, .spec-value, .reviewer-name) {
    color: #272723;
}
.sx-detail-page .product-name { line-height: 1.4; letter-spacing: -.65px; }
.sx-detail-page .price-symbol { color: #272723; }
.sx-detail-page .product-status::before { box-shadow: none; }
.sx-detail-page .header-cart-badge { background: #ce4700; color: #fff; }
.sx-detail-page :is(.meta-chip, .creator-card, .review-card, .trust-item, .process-item, .social-action) {
    background: #fafaf8;
}
.sx-detail-page :is(.meta-chip, .follow-button.is-following, .fabric-option, .size-option) { color: #505049; }
.sx-detail-page .creator-avatar {
    background: #fff1e7;
    color: #c44808;
    border-radius: 50%;
    box-shadow: none;
}
.sx-detail-page .purchase-options { background: #fff9f4; border-color: #f7dcc9; }
.sx-detail-page :is(.fabric-option, .size-option, .quantity-stepper) { background: #fff; }
.sx-detail-page :is(.fabric-option.active, .size-option.active) {
    background: #fff0e5;
    color: #b94106;
    border-color: #f18442;
    box-shadow: none;
}
.sx-detail-page :is(.fabric-option.active small, .size-option.active small) { color: #94654c; }
.sx-detail-page .fabric-fixed { background: #f3f6ef; border-color: #dce5d5; }
.sx-detail-page .fabric-fixed i { background: #e6eedd; color: #547442; }
.sx-detail-page .quantity-stepper button { color: #62625a; }
.sx-detail-page .quantity-stepper button:hover { background: #fff1e7; color: #c44808; }
.sx-detail-page :is(.checkout-button, .mobile-buy-button, .button-orange) {
    color: #fff;
    background: #ce4700;
    box-shadow: 0 5px 14px rgba(206, 71, 0, .08);
}
.sx-detail-page :is(.checkout-button, .mobile-buy-button, .button-orange):hover { background: #b93e00; }
.sx-detail-page :is(.add-cart-button, .tag, .reviews-summary strong, .rating-stars, .review-rating) { color: #b94106; }
.sx-detail-page :is(.description, .review-text) { color: #62625a; }
.sx-detail-page .description { font-size: 14px; }
.sx-detail-page :is(.trust-item span, .utility-button, .reviews-page-link) { color: #707068; }
.sx-detail-page :is(.social-action, .utility-button, .reviews-page-link):hover {
    color: #c44808;
    background: #fff1e7;
    border-color: #ffd2b6;
}
.sx-detail-page .tag:hover { color: #9c3500; background: #ffe7d6; }
.sx-detail-page .review-rating .empty { color: #d8d6cc; }
.sx-detail-page .reviews-heading h2 i { color: #c44808; }
.sx-detail-page .reviewer-avatar { color: #c44808; }
.sx-detail-page .modal-layer { background: rgba(40, 38, 34, .35); backdrop-filter: blur(5px); }
.sx-detail-page .repost-dialog { background: #fff; box-shadow: 0 24px 80px rgba(39, 39, 35, .14); }
.sx-detail-page .repost-dialog textarea { background: #fafaf8; color: #272723; }
.sx-detail-page .mobile-buy-bar { background: rgba(255, 255, 255, .98); }
.sx-detail-page .cart-toast {
    color: #28734c;
    background: #f2faf4;
    border-color: #c2dec9;
    box-shadow: 0 8px 30px rgba(39, 39, 35, .08);
}
.sx-detail-page .cart-toast.error { background: #fff3f1; border-color: #efbeb7; color: #b23629; }
.sx-detail-page .image-viewer { background: rgba(247, 247, 243, .98); }
.sx-detail-page .image-viewer-toolbar { background: #fff; }
.sx-detail-page .image-viewer-stage { background: #f0f0ec; }
.sx-detail-page .image-viewer-stage img { filter: none; }
.sx-detail-page .viewer-button { background: #fff; color: #62625a; }

/* Owner metadata and mockup completion keep every existing option/action. */
.sx-edit-page .page { max-width: 720px; padding-top: 34px; }
.sx-edit-page .img-preview { background: #f5f5f1; }
.sx-edit-page #editForm { padding: 24px; border: 1px solid #eae9e4; border-radius: 18px; }
.sx-edit-page .btn-primary { background: #ce4700; color: #fff; box-shadow: 0 4px 12px rgba(206, 71, 0, .08); }
.sx-edit-page a.btn-primary { height: auto; min-height: 48px; padding: 12px 16px; line-height: 1.6; }
.sx-edit-page .error-msg { background: #fff3f1; color: #b23629; border-color: #efbeb7; }
.sx-mockup-page .page { padding-top: 30px; }
.sx-mockup-page .page-title { font-size: 26px; letter-spacing: -.5px; }
.sx-mockup-page :is(.preview-box, .picker) { border-radius: 18px; box-shadow: 0 8px 24px rgba(39, 39, 35, .035); }
.sx-mockup-page :is(.preview-head, .picker-head, .segment-tabs) { background: #fafaf8; }
.sx-mockup-page .preview-canvas { background: #f5f5f1; }
.sx-mockup-page :is(.thumb-card, .studio-card img) { background: #f1f1ed; }
.sx-mockup-page .thumb-card .mini-meta { background: rgba(255, 255, 255, .92); color: #505049; }
.sx-mockup-page .segment-tab { background: #fff; }
.sx-mockup-page .segment-tab.active { background: #fff1e7; color: #c44808; }
.sx-mockup-page :is(.save-btn, .sx-confirm) { background: #ce4700; color: #fff; }
.sx-mockup-page .sx-cancel { background: #f8f8f6; }
.sx-mockup-page .sx-modal { background: rgba(40, 38, 34, .35); backdrop-filter: blur(5px); }
.sx-mockup-page .sx-card { box-shadow: 0 24px 80px rgba(39, 39, 35, .14); }
.sx-mockup-page .save-row { background: #fff; box-shadow: none; }
.sx-mockup-page .save-error { color: #b23629; }
.sx-saved-page .page { max-width: 980px; padding-top: 32px; }
.sx-saved-page .caption { color: #62625a; }
.sx-saved-page .hero-img { background: #f5f5f1; }
.sx-saved-page .empty-state { background: #fafaf8; border: 1px dashed #deddd5; border-radius: 18px; }
.sx-saved-page .empty-state a { color: #c44808; }

@media (max-width: 1024px) {
    .sx-studio-page .tb-right { background: #fff; box-shadow: 0 -4px 16px rgba(39, 39, 35, .04); }
    .sx-studio-page .tb-right .icon-x { color: #62625a; background: #fafaf8; }
    .sx-studio-page .studio-tabs { background: #fff; }
}

@media (max-width: 620px) {
    .sx-edit-page #editForm { padding: 18px 14px; }
    .sx-mockup-page .page { padding-top: 20px; }
    .sx-mockup-page .page-title { font-size: 23px; }
    .sx-mockup-page .save-row { box-shadow: 0 -4px 18px rgba(39, 39, 35, .045); }
    .sx-saved-page .page { padding: 20px 12px 60px; }
    .sx-detail-page :is(.fabric-option, .size-option, .follow-button, .utility-button) { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .sx-product-ui *, .sx-product-ui *::before, .sx-product-ui *::after { scroll-behavior: auto; transition: none; }
}