/* =========================================================
   CME PRODUCT PROOF VIEWER
   ========================================================= */

body.cme-proof-viewer-open {
    overflow: hidden;
}

body.single-product .cme-proof-viewer {
    position: fixed;
    z-index: 999999;

    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;

    box-sizing: border-box;
}

body.single-product .cme-proof-viewer.is-open {
    display: flex;
}


/* Backdrop */

body.single-product .cme-proof-viewer-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(20, 24, 28, 0.78);
}


/* Dialog */

body.single-product .cme-proof-viewer-dialog {
    position: relative;
    

    display: flex;
    flex-direction: column;

    /*
     * Use most of the available screen on larger monitors.
     */
    width: min(1600px, calc(100vw - 48px));
    max-width: 1600px;

    

    overflow: hidden;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.35);

    box-sizing: border-box;
}


/* Header */

body.single-product .cme-proof-viewer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    padding: 20px 24px;

    border-bottom: 1px solid #d9dedd;
}

body.single-product .cme-proof-viewer-header h2 {
    margin: 0 0 4px;

    color: #15191a;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
}

body.single-product .cme-proof-viewer-subtitle {
    margin: 0;

    color: #626b70;

    font-size: 13px;
    line-height: 1.4;
}

body.single-product .cme-proof-viewer-close {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 1px solid #cbd1d0;
    border-radius: 50%;

    background: #ffffff;
    color: #202627;

    font-size: 27px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}


/* Main body */

body.single-product .cme-proof-viewer-body {
    display: grid;
    

    

    
}


/* Preview column */

body.single-product
.cme-proof-viewer-preview-column {
    min-width: 0;

    

    background: #edf0f2;
}

body.single-product .cme-proof-viewer-canvas {
    
    align-items: center;
    justify-content: center;

    

    

    

    background:
        linear-gradient(45deg, #e0e3e5 25%, transparent 25%),
        linear-gradient(-45deg, #e0e3e5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e0e3e5 75%),
        linear-gradient(-45deg, transparent 75%, #e0e3e5 75%);

    background-position:
        0 0,
        0 10px,
        10px -10px,
        -10px 0;

    background-size: 20px 20px;

    
}

body.single-product .cme-proof-viewer-image-stage {
    

    
    align-items: center;
    justify-content: center;

    
    
    

    

    

    box-sizing: border-box;
}



/* =========================================================
   PROOF ARTWORK AND OVERLAY — LOCKED TOGETHER
   ========================================================= */

body.single-product
.cme-proof-viewer-proof-layer {
    

    

    

    

    
}

body.single-product
.cme-proof-viewer-proof-layer[hidden] {
    display: none !important;
}









/* PDF placeholder */

body.single-product
.cme-proof-viewer-file-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    max-width: 390px;

    padding: 34px;

    border-radius: 12px;

    background: #ffffff;

    color: #333b3d;

    text-align: center;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

body.single-product
.cme-proof-viewer-file-placeholder[hidden] {
    display: none !important;
}

body.single-product .cme-proof-viewer-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin: 0 0 16px;

    border-radius: 12px;

    background: #fff0ee;
    color: #b42318;

    font-size: 20px;
    font-weight: 800;
}

body.single-product
.cme-proof-viewer-file-placeholder strong {
    display: block;

    margin: 0 0 7px;

    font-size: 16px;
}

body.single-product
.cme-proof-viewer-file-placeholder p {
    margin: 0;

    color: #687176;

    font-size: 12px;
    line-height: 1.45;
}


/* Overlay note */

body.single-product .cme-proof-viewer-overlay-note {
    margin: 12px 0 0;

    color: #596266;

    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}


/* Details column */

body.single-product .cme-proof-viewer-details {
    

    

    
    

    

    
}

body.single-product .cme-proof-viewer-detail-group {
    
    

    
}

body.single-product .cme-proof-viewer-detail-label {
    display: block;

    margin: 0 0 5px;

    

    
    
    line-height: 1.3;
    text-transform: uppercase;
    
}

body.single-product .cme-proof-viewer-filename,
body.single-product .cme-proof-viewer-page-order {
    display: block;

    

    
    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* Status */

body.single-product .cme-proof-viewer-status {
    display: inline-flex;

    

    

    
    
    line-height: 1.2;
}

body.single-product
.cme-proof-viewer-status--pending {
    
    
}

body.single-product
.cme-proof-viewer-status--approved {
    
    
}

body.single-product
.cme-proof-viewer-status--approved-warning {
    
    
}

body.single-product
.cme-proof-viewer-status--rejected,
body.single-product
.cme-proof-viewer-status--critical {
    
    
}


/* Proof checks */

body.single-product .cme-proof-viewer-checks {
    
}

body.single-product .cme-proof-viewer-checks h3 {
    

    

    
    
}

body.single-product .cme-proof-viewer-check {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;

    
    

    

    font-size: 12px;
    line-height: 1.4;
}

body.single-product
.cme-proof-viewer-check--neutral {
    background: #f0f2f4;
    color: #485154;
}

body.single-product .cme-proof-viewer-check strong {
    display: block;

    margin: 0 0 2px;

    
}

body.single-product .cme-proof-viewer-check p {
    margin: 0;
}




/* Confirmation */

body.single-product
.cme-proof-viewer-confirmation {
    

    
    

    

    box-sizing: border-box;
}


/*
 * The real checkbox stores the confirmation state but is not
 * the visible control.
 */
body.single-product
.cme-proof-viewer-confirm-checkbox[hidden] {
    display: none !important;
}


/*
 * Visible confirmation button.
 */
body.single-product
.cme-proof-viewer-confirm-toggle {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    

    width: 100%;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    

    font: inherit;
    
    
    text-align: left;

    cursor: pointer;

    box-shadow: none;
}


/*
 * Draw the visible checkbox.
 */
body.single-product
.cme-proof-viewer-confirm-box {
    position: relative;

    display: block;

    
    

    margin-top: 1px;

    
    

    background: #ffffff;

    box-sizing: border-box;
}


/*
 * Checked state.
 */
body.single-product
.cme-proof-viewer-confirm-toggle.is-checked
.cme-proof-viewer-confirm-box {
    
    
}

body.single-product
.cme-proof-viewer-confirm-toggle.is-checked
.cme-proof-viewer-confirm-box::after {
    content: "";

    position: absolute;

    top: 2px;
    left: 6px;

    width: 5px;
    height: 9px;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    transform: rotate(45deg);
}

body.single-product
.cme-proof-viewer-confirm-toggle:hover,
body.single-product
.cme-proof-viewer-confirm-toggle:focus {
    background: transparent;
    color: #303638;

    outline: none;
}

body.single-product
.cme-proof-viewer-confirm-toggle:focus-visible
.cme-proof-viewer-confirm-box {
    outline: 2px solid #6775da;
    outline-offset: 2px;
}






/* Footer */

body.single-product .cme-proof-viewer-footer {
    
    

    
    

    

    

    
}

body.single-product .cme-proof-viewer-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

body.single-product .cme-proof-viewer-position {
    min-width: 54px;

    color: #5d666a;

    font-size: 11px;
    font-weight: 700;
    text-align: center;
}


/* Buttons */

body.single-product .cme-proof-viewer-button {
    min-height: 36px;

    padding: 8px 13px;

    border: 0;
    border-radius: 6px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;
}

body.single-product
.cme-proof-viewer-button--approve {
    justify-self: end;

    min-width: 125px;

    background: #16855b;
    color: #ffffff;
}

body.single-product
.cme-proof-viewer-button--reject {
    justify-self: start;

    min-width: 110px;

    background: #b42318;
    color: #ffffff;
}

body.single-product
.cme-proof-viewer-button--secondary {
    min-width: 70px;

    border: 1px solid #bfc6c4;

    background: #ffffff;
    color: #222829;
}

body.single-product
.cme-proof-viewer-button:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


/* Responsive */

@media screen and (max-width: 900px) {

    body.single-product .cme-proof-viewer {
        padding: 12px;
    }

    body.single-product .cme-proof-viewer-dialog {
        max-height: calc(100vh - 24px);
    }

    body.single-product .cme-proof-viewer-body {
        
    }

    body.single-product .cme-proof-viewer-details {
        
        
    }

    body.single-product .cme-proof-viewer-canvas {
        min-height: 400px;
    }

    body.single-product
    .cme-proof-viewer-image-stage {
        min-height: 360px;
    }
}

@media screen and (max-width: 650px) {

    body.single-product .cme-proof-viewer-header {
        padding: 16px;
    }

    body.single-product
    .cme-proof-viewer-preview-column,
    body.single-product
    .cme-proof-viewer-details {
        padding: 15px;
    }

    body.single-product .cme-proof-viewer-footer {
        grid-template-columns: 1fr;
    }

    body.single-product
    .cme-proof-viewer-navigation {
        order: 1;
    }

    body.single-product
    .cme-proof-viewer-button--reject {
        order: 2;
        justify-self: stretch;
    }

    body.single-product
    .cme-proof-viewer-button--approve {
        order: 3;
        justify-self: stretch;
    }

    body.single-product .cme-proof-viewer-button {
        width: 100%;
    }

    body.single-product .cme-proof-viewer-canvas {
        
        padding: 10px;
    }

    body.single-product
    .cme-proof-viewer-image-stage {
        min-height: 290px;
    }
}

/* =========================================================
   PROOF VIEWER CLICK AND STACKING FIXES
   ========================================================= */

body.single-product .cme-proof-viewer-dialog {
    isolation: isolate;
}

body.single-product
.cme-proof-viewer-preview-column {
    position: relative;
    z-index: 1;
}

body.single-product
.cme-proof-viewer-details {
    position: relative;
    z-index: 5;

    pointer-events: auto;
}

body.single-product
.cme-proof-viewer-confirmation,
body.single-product
.cme-proof-viewer-confirmation label,
body.single-product
.cme-proof-viewer-confirm-checkbox {
    position: relative;
    z-index: 6;

    pointer-events: auto !important;
}

body.single-product .cme-proof-viewer-footer {
    display: grid;
    grid-template-columns:
        minmax(115px, 1fr)
        auto
        minmax(115px, 1fr);

    align-items: center;
    gap: 12px;

    min-height: 0;
    margin: 0;
    padding: 10px 18px;

    border-top: 1px solid #d9dedd;

    background: #ffffff;
    color: #222829;

    box-sizing: border-box;
}

body.single-product
.cme-proof-viewer-backdrop {
    z-index: 0;
}

body.single-product
.cme-proof-viewer-dialog {
    z-index: 2;
}

/* =========================================================
   PROOF VIEWER ZOOM TOOLBAR
   ========================================================= */

body.single-product .cme-proof-viewer-toolbar {
    
    
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;

    
}

body.single-product
.cme-proof-viewer-tool-button {
    

    

    
    

    
    

    
    
    

    
}

body.single-product
.cme-proof-viewer-tool-button:hover,
body.single-product
.cme-proof-viewer-tool-button:focus {
    
    
}

body.single-product .cme-proof-zoom-level {
    

    

    
    
    text-align: center;
}


/* =========================================================
   PROOF VIEWPORT AND CLICK-AND-DRAG PANNING
   ========================================================= */

body.single-product .cme-proof-viewer-canvas {
    

    

    
    
    

    

    

    

    
    

    
}

body.single-product
.cme-proof-viewer-canvas--dragging {
    

    
}

body.single-product
.cme-proof-viewer-image-stage {
    

    

    

    
    
    
    

    

    
}

body.single-product
.cme-proof-viewer-proof-layer {
    

    
    

    

    

    

    

    

    

    
}


















/* =========================================================
   FINAL PROOF VIEWER — ZOOM AND ART ADJUST MODES
   ========================================================= */

/*
 * Keep the popup body fixed.
 * Only the right details panel may scroll.
 */
body.single-product .cme-proof-viewer-body {
    
}

body.single-product .cme-proof-viewer-details {
    

    
    overflow-x: hidden;
}


/*
 * Fixed proof viewport.
 */
body.single-product .cme-proof-viewer-canvas {
    position: relative;

    display: block;

    width: 100%;
    
    

    padding: 0;

    overflow: hidden;

    cursor: grab;

    overscroll-behavior: contain;
    touch-action: none;

    box-sizing: border-box;
}

body.single-product
.cme-proof-viewer-canvas--dragging {
    

    user-select: none;
}


/*
 * The stage is the fixed visible viewport.
 */
body.single-product
.cme-proof-viewer-image-stage {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    padding: 0;

    overflow: hidden;
}


/*
 * Whole proof group.
 *
 * Viewer zoom and viewer dragging transform this element.
 */
body.single-product
.cme-proof-viewer-proof-layer {
    position: absolute;

    top: 50%;
    left: 50%;

    flex: none;

    margin: 0;

    

    transform:
        translate(-50%, -50%)
        translate(0, 0)
        scale(1);

    transform-origin: center center;

    will-change: transform;

    box-sizing: border-box;
}


/*
 * Customer artwork is positioned independently inside
 * the proof surface.
 */
body.single-product
.cme-proof-viewer-artwork {
    position: absolute;

    z-index: 1;

    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;

    display: block;

    width: auto;
    height: auto;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: fill;

    transform:
        translate(-50%, -50%)
        translate(0, 0)
        scale(1);

    transform-origin: center center;

    will-change:
        width,
        height,
        transform;
}


/*
 * Overlay defines the fixed print surface.
 *
 * It is never independently moved or scaled.
 * It only follows the outer proof layer during viewer zoom.
 */
body.single-product
.cme-proof-viewer-overlay {
    position: absolute;

    z-index: 2;

    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: fill;
    object-position: center;

    transform: none !important;

    pointer-events: none;

    opacity: 0.82;
}


/* Mode toolbar */

body.single-product
.cme-proof-viewer-toolbar {
    
    
    

    
    

    

    
}

body.single-product
.cme-proof-viewer-mode-switch {
    

    

    

    
    

    
}

body.single-product
.cme-proof-viewer-mode-button {
    

    

    
    

    
    

    
    
    

    
}

body.single-product
.cme-proof-viewer-mode-button.is-active {
    
    

    
}

body.single-product
.cme-proof-viewer-zoom-controls {
    

    
    
    
    

    
}

body.single-product
.cme-proof-viewer-mode-help {
    

    

    

    
    
    
}


/*
 * Ensure proof controls remain clickable.
 */
body.single-product
.cme-proof-viewer-details,
body.single-product
.cme-proof-viewer-confirmation,
body.single-product
.cme-proof-viewer-footer {
    position: relative;
    z-index: 20;

    pointer-events: auto;
}

body.single-product
.cme-proof-viewer-confirm-checkbox,
body.single-product
.cme-proof-viewer-footer button {
    pointer-events: auto !important;
}


@media screen and (max-width: 650px) {

    body.single-product
    .cme-proof-viewer-toolbar {
        grid-template-columns: 1fr;
    }

    body.single-product
    .cme-proof-viewer-mode-switch,
    body.single-product
    .cme-proof-viewer-zoom-controls {
        justify-self: center;
    }

    body.single-product
    .cme-proof-viewer-mode-help {
        grid-column: 1;
    }

    body.single-product
    .cme-proof-viewer-canvas {
        height: 48vh;
        min-height: 300px;
    }
}













/* =========================================================
   PROOF VIEWER HEIGHT CORRECTION
   ========================================================= */

body.single-product .cme-proof-viewer-dialog {
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
}

body.single-product .cme-proof-viewer-header,
body.single-product .cme-proof-viewer-footer {
    flex: 0 0 auto;
}

body.single-product .cme-proof-viewer-body {
    

    min-height: 0;
    overflow: hidden;
}

body.single-product
.cme-proof-viewer-preview-column {
    display: flex;
    flex-direction: column;

    min-height: 0;
    
}

body.single-product
.cme-proof-viewer-toolbar {
    flex: 0 0 auto;
}

body.single-product
.cme-proof-viewer-canvas {
    flex: 1 1 auto;

    height: auto;
    min-height: 0;
}

body.single-product
.cme-proof-viewer-overlay-note {
    flex: 0 0 auto;
}

body.single-product
.cme-proof-viewer-details {
    height: 100%;
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;
}

body.single-product
.cme-proof-viewer-confirmation {
    
}










/* =========================================================
   NEEDS CHANGES DIALOG
   ========================================================= */

body.single-product
.cme-proof-needs-changes-dialog {
    position: fixed;
    z-index: 1000001;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

body.single-product
.cme-proof-needs-changes-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(20, 25, 28, 0.72);
}

body.single-product
.cme-proof-needs-changes-window {
    position: relative;
    z-index: 1;

    width: min(100%, 520px);

    padding: 24px;

    border-radius: 12px;

    background: #ffffff;
    color: #303638;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.32);
}

body.single-product
.cme-proof-needs-changes-window h3 {
    margin: 0 0 14px;

    font-size: 22px;
}

body.single-product
.cme-proof-needs-changes-filename {
    padding: 10px 12px;

    border-radius: 7px;

    background: #f2f4f5;

    font-weight: 700;
    overflow-wrap: anywhere;
}

body.single-product
.cme-proof-needs-changes-options {
    display: grid;
    gap: 10px;

    margin: 18px 0;
}

body.single-product
.cme-proof-continue-editing,
body.single-product
.cme-proof-remove-from-order {
    display: grid;
    gap: 4px;

    width: 100%;

    padding: 14px 16px;

    border-radius: 9px;

    text-align: left;
    cursor: pointer;
}

body.single-product
.cme-proof-continue-editing {
    border: 1px solid #6775da;

    background: #f1f3ff;
    color: #303638;
}

body.single-product
.cme-proof-remove-from-order {
    border: 1px solid #b42318;

    background: #b42318;
    color: #ffffff;
}

body.single-product
.cme-proof-continue-editing span,
body.single-product
.cme-proof-remove-from-order span {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

body.single-product
.cme-proof-needs-changes-cancel {
    padding: 9px 15px;

    border: 1px solid #cbd1d4;
    border-radius: 7px;

    background: #ffffff;
    color: #303638;

    cursor: pointer;
}













/* =========================================================
   ARTWORK QUALITY / EFFECTIVE PPI
   ========================================================= */

body.single-product
.cme-proof-viewer-quality {
    

    border: 1px solid #d5dadd;
    
    

    background: #f8f9fa;

    box-sizing: border-box;
}

body.single-product
.cme-proof-viewer-quality h3 {
    

    

    
    line-height: 1.3;
}

body.single-product
.cme-proof-viewer-quality-result {
    display: grid;
    gap: 5px;
}

body.single-product
.cme-proof-viewer-ppi-value {
    display: block;

    
    line-height: 1.3;
}

body.single-product
.cme-proof-viewer-ppi-message {
    margin: 0;

    color: #4f585c;

    
    
}


/* Neutral / PDF */

body.single-product
.cme-proof-viewer-quality--neutral {
    border-left-color: #687277;
    background: #f4f6f7;
}

body.single-product
.cme-proof-viewer-quality--neutral
.cme-proof-viewer-ppi-value {
    color: #4f585c;
}


/* Excellent: 300+ PPI */

body.single-product
.cme-proof-viewer-quality--excellent {
    
    
}

body.single-product
.cme-proof-viewer-quality--excellent
.cme-proof-viewer-ppi-value {
    color: #176b29;
}


/* Acceptable: 200–299 PPI */

body.single-product
.cme-proof-viewer-quality--acceptable {
    
    
}

body.single-product
.cme-proof-viewer-quality--acceptable
.cme-proof-viewer-ppi-value {
    color: #4d59b8;
}


/* Warning: 150–199 PPI */

body.single-product
.cme-proof-viewer-quality--warning {
    
    
}

body.single-product
.cme-proof-viewer-quality--warning
.cme-proof-viewer-ppi-value {
    color: #9b6100;
}


/* Critical: below 150 PPI */

body.single-product
.cme-proof-viewer-quality--critical {
    
    
}

body.single-product
.cme-proof-viewer-quality--critical
.cme-proof-viewer-ppi-value {
    color: #9c1c14;
}
















/* =========================================================
   ARTWORK TRANSFORM BOX AND RESIZE HANDLES
   ========================================================= */

body.single-product
.cme-proof-artwork-transform-box {
    position: absolute;
    z-index: 4;

    top: 50%;
    left: 50%;

    border: 3px solid #6775da;

    box-sizing: border-box;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        translate(0, 0);

    transform-origin: center;

    will-change:
        width,
        height,
        transform;
}

body.single-product
.cme-proof-artwork-transform-box[hidden] {
    display: none !important;
}

body.single-product
.cme-proof-resize-handle {
    position: absolute;
    z-index: 50;

    width: 10px;
    height: 10px;

    margin: 0;
    padding: 0;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #6775da;

    box-shadow:
        0 3px 12px rgba(0,0,0,.35);

    pointer-events: auto;
    touch-action: none;

    cursor: pointer;
}

body.single-product
.cme-proof-resize-handle:hover,
body.single-product
.cme-proof-resize-handle:focus-visible,
body.single-product
.cme-proof-resize-handle.is-resizing {
    width: 13px;
    height: 13px;

    background: #4e5bc5;

    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 1px;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.45);
}


/* Corners */

body.single-product
.cme-proof-resize-handle--north-west {
    top: 0;
    left: 0;

    cursor: nwse-resize;

    transform: translate(-50%, -50%);
}

body.single-product
.cme-proof-resize-handle--north-east {
    top: 0;
    right: 0;

    cursor: nesw-resize;

    transform: translate(50%, -50%);
}

body.single-product
.cme-proof-resize-handle--south-east {
    right: 0;
    bottom: 0;

    cursor: nwse-resize;

    transform: translate(50%, 50%);
}

body.single-product
.cme-proof-resize-handle--south-west {
    bottom: 0;
    left: 0;

    cursor: nesw-resize;

    transform: translate(-50%, 50%);
}


/* Edges */

body.single-product
.cme-proof-resize-handle--north {
    top: 0;
    left: 50%;

    cursor: ns-resize;

    transform: translate(-50%, -50%);
}

body.single-product
.cme-proof-resize-handle--east {
    top: 50%;
    right: 0;

    cursor: ew-resize;

    transform: translate(50%, -50%);
}

body.single-product
.cme-proof-resize-handle--south {
    bottom: 0;
    left: 50%;

    cursor: ns-resize;

    transform: translate(-50%, 50%);
}

body.single-product
.cme-proof-resize-handle--west {
    top: 50%;
    left: 0;

    cursor: ew-resize;

    transform: translate(-50%, -50%);
}

body.single-product
.cme-proof-artwork-transform-box::before {
    content: "Drag handles to resize";

    position: absolute;

    left: 50%;
    bottom: calc(100% + 12px);

    transform: translateX(-50%);

    padding: 5px 9px;

    border-radius: 5px;

    background: #303638;
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    pointer-events: none;
}

.cme-proof-viewer-size-warning {
    margin-top: 0;
    padding: 16px;
    border: 1px solid #dcdcde;
    border-left: 5px solid #dba617;
    border-radius: 8px;
    background: #fff8df;
}

.cme-proof-viewer-size-warning[hidden] {
    display: none !important;
}

.cme-proof-viewer-size-warning h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.cme-proof-viewer-size-warning-value {
    display: block;
    margin-bottom: 5px;
    color: #8a6100;
}

.cme-proof-viewer-size-warning-message {
    margin: 0;
}

.cme-proof-viewer-size-warning--critical {
    border-left-color: #c62828;
    background: #fff0f0;
}

.cme-proof-viewer-size-warning--critical
.cme-proof-viewer-size-warning-value {
    color: #b42318;
}






/*
 * Keep the existing Bleed/Safe Area row in its normal
 * two-column bullet + content layout, while allowing
 * additional proof checks underneath it.
 */
.cme-proof-viewer-check--combined {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
}


/*
 * Artwork Size occupies a complete second row of the
 * same gray Proof Checks card.
 */
.cme-proof-viewer-check--combined
.cme-proof-viewer-artwork-size {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;

    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid #d7dadd;
}


/*
 * Prevent inherited margins from creating a large gap.
 */
.cme-proof-viewer-artwork-size strong {
    display: block;
    margin: 0 0 3px;
}


.cme-proof-viewer-artwork-size-details {
    margin: 0;
    line-height: 1.4;
}








.cme-proof-viewer-color-mode {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;

    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid #d7dadd;
}

.cme-proof-viewer-color-mode-value {
    margin-top: 3px;
}

.cme-proof-viewer-color-mode-message {
    margin-top: 3px;
    line-height: 1.4;
}




/* RGB warning state */
.cme-proof-viewer-color-mode--warning {
    position: relative;
    padding: 12px 12px 12px 44px;
    background: #fff1f0;
    border: 1px solid #e53935;
    border-left: 5px solid #e53935;
    border-radius: 7px;
}

/* Warning triangle */
.cme-proof-viewer-color-mode--warning::before {
    content: "⚠";
    position: absolute;
    left: 13px;
    top: 12px;
    font-size: 22px;
    line-height: 1;
    color: #d32f2f;
}

/* RGB detected headline */
.cme-proof-viewer-color-mode--warning
.cme-proof-viewer-color-mode-value {
    font-weight: 700;
    color: #c62828;
}

/* RGB explanation */
.cme-proof-viewer-color-mode--warning
.cme-proof-viewer-color-mode-message {
    margin-top: 3px;
    font-weight: 500;
    color: #b71c1c;
}

/* =========================================================
   FONT CHECK
   ========================================================= */

.cme-proof-viewer-check--combined
.cme-proof-viewer-font-check {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;

    width: 100%;
    min-width: 0;

    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid #d7dadd;

    box-sizing: border-box;
}


/*
 * Allow the text portion of the Fonts row
 * to use the full available width.
 */
.cme-proof-viewer-font-check > div {
    min-width: 0;
    width: 100%;
}


.cme-proof-viewer-font-check strong {
    display: block;
    margin: 0 0 3px;
}


.cme-proof-viewer-font-value {
    margin-top: 3px;
}


.cme-proof-viewer-font-message {
    margin-top: 3px;

    width: 100%;

    line-height: 1.4;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}


/* Missing/unembedded font warning */
.cme-proof-viewer-font-check--warning {
    position: relative;

    padding: 12px 12px 12px 44px;

    background: #fff1f0;

    border: 1px solid #e53935;
    border-left: 5px solid #e53935;

    border-radius: 7px;
}


/* Warning triangle */
.cme-proof-viewer-font-check--warning::before {
    content: "⚠";

    position: absolute;

    left: 13px;
    top: 12px;

    font-size: 22px;
    line-height: 1;

    color: #d32f2f;
}


.cme-proof-viewer-font-check--warning
.cme-proof-viewer-font-value {
    font-weight: 700;
    color: #c62828;
}


.cme-proof-viewer-font-check--warning
.cme-proof-viewer-font-message {
    color: #b71c1c;
}











/* =========================================================
   SPOT COLORS
   ========================================================= */

.cme-proof-viewer-check--combined
.cme-proof-viewer-spot-colors {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;

    width: 100%;
    min-width: 0;

    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid #d7dadd;

    box-sizing: border-box;
}


.cme-proof-viewer-spot-colors > div {
    min-width: 0;
    width: 100%;
}


.cme-proof-viewer-spot-colors strong {
    display: block;
    margin: 0 0 3px;
}


.cme-proof-viewer-spot-colors-value {
    display: grid;
    gap: 3px;

    width: 100%;
    min-width: 0;

    margin-top: 3px;
}


.cme-proof-viewer-spot-colors-value > div {
    width: 100%;

    line-height: 1.4;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}


.cme-proof-viewer-spot-colors-message {
    display: none;
}

/* =========================================================
   SPOT COLOR SWATCHES
   ========================================================= */

.cme-proof-viewer-spot-color-row {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    min-width: 0;

    line-height: 1.4;
}


.cme-proof-viewer-spot-color-swatch {
    display: inline-block;
    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    border: 1px solid #777;
    border-radius: 3px;

    background-color: #ffffff;

    box-sizing: border-box;
}


.cme-proof-viewer-spot-color-name {
    display: inline-block;
    min-width: 0;
}






/* =========================================================
   ALLOW ARTWORK CONTROLS OUTSIDE PRINT AREA
   ========================================================= */

body.single-product
.cme-proof-viewer-proof-layer {
    overflow: visible !important;
}












/* =========================================================
   ARTWORK ORIENTATION CONTROLS
   ========================================================= */

/* =========================================================
   ARTWORK FLIP HANDLES
   ========================================================= */

body.single-product
.cme-proof-flip-handle {
    position: absolute;
    z-index: 60;

    top: -55px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    margin: 0;
    padding: 0;

    border: 4px solid #ffffff;
    border-radius: 50%;

    background: #6775da;
    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
    line-height: 1;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.45);

    cursor: pointer;

    pointer-events: auto;
    touch-action: none;

    transform: translateX(-50%);
}


/* Flip Horizontal — left of rotate */

body.single-product
.cme-proof-flip-handle--horizontal {
    left: calc(50% - 150px);
    padding-bottom: 3px;
}


/* Flip Vertical — right of rotate */

body.single-product
.cme-proof-flip-handle--vertical {
    left: calc(50% + 150px);
}


body.single-product
.cme-proof-flip-handle:hover,
body.single-product
.cme-proof-flip-handle:focus-visible {
    background: #4e5bc5;

    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 2px;
}



/* Rotate handles */

body.single-product
.cme-proof-rotate-handle {
    position: absolute;
    z-index: 60;

    top: -55px;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    margin: 0;
    padding: 0;

    border: 4px solid #ffffff;
    border-radius: 50%;

    background: #6775da;
    color: #ffffff;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.45);

    cursor: grab;

    pointer-events: auto;
    touch-action: none;

    transform:
        translateX(-50%);
}


body.single-product
.cme-proof-rotate-handle::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 100%;

    width: 3px;
    height: 28px;

    background: #6775da;

    transform:
        translateX(-50%);

    pointer-events: none;
}


body.single-product
.cme-proof-rotate-handle:hover,
body.single-product
.cme-proof-rotate-handle:focus-visible,
body.single-product
.cme-proof-rotate-handle.is-rotating {
    background: #4e5bc5;

    cursor: grabbing;

    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 2px;
}


body.single-product
.cme-proof-rotate-handle::after {
    content: "↻";

    display: block;

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    transform: translateY(-1px);

    pointer-events: none;
}






body.single-product
.cme-proof-rotation-angle {
    position: absolute;
    z-index: 80;

    top: -160px;
    left: 50.4%;

    min-width: 34px;

    padding: 5px 6px 3px;

    border-radius: 7px;

    background: #303638;
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    text-align: center;
    white-space: nowrap;

    pointer-events: none;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.28);
    
        transform: translateX(-50%);
}


/* =========================================================
   KEEP ARTWORK EDITING CONTROLS CONSTANT SCREEN SIZE
   ========================================================= */

body.single-product
.cme-proof-resize-handle,
body.single-product
.cme-proof-rotate-handle,
body.single-product
.cme-proof-flip-handle,
body.single-product
.cme-proof-rotation-angle {
    scale: var(--cme-control-scale, 1);

    transform-origin: center center;
}















/* =========================================================
   ADVANCED DESIGN — LAYERS PANEL
   ========================================================= */

body.single-product
.cme-proof-layers-panel {
    margin: 0 0 18px;
    padding: 0 0 16px;

    border-bottom: 1px solid #e1e5e4;

    box-sizing: border-box;
}


/* Section heading */

body.single-product
.cme-proof-layers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin: 0 0 7px;
}

body.single-product
.cme-proof-layers-header strong {
    display: block;

    color: #697277;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: 0.055em;
}

/* Add Artwork button */

body.single-product
.cme-proof-add-artwork {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    flex: 0 0 auto;

    min-height: 26px;

    margin: 0;
    padding: 4px 10px;

    border: 1px solid #cbd1d3;
    border-radius: 5px;

    background: #ffffff;
    color: #343b3e;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    box-shadow: none;

    cursor: pointer;
}

body.single-product
.cme-proof-add-artwork-plus {
    font-size: 15px;
    font-weight: 500;
    line-height: 0.8;
}

body.single-product
.cme-proof-add-artwork:hover {
    border-color: #6775da;

    background: #f1f3ff;
    color: #3f4cad;
}

body.single-product
.cme-proof-add-artwork:focus-visible {
    outline: 2px solid #6775da;
    outline-offset: 2px;
}


/* =========================================================
   LAYER LIST
   ========================================================= */

body.single-product
.cme-proof-layers-list {
    display: grid;
    gap: 5px;

    width: 100%;
    min-width: 0;
}


/*
 * One editable design layer.
 *
 * Layout:
 *
 * LOCK | EYE | NAME | UP / DOWN
 */
body.single-product
.cme-proof-layer-row {
    display: grid;

    grid-template-columns:
        32px
        32px
        minmax(0, 1fr)
        54px;

    align-items: stretch;

    width: 100%;
    min-width: 0;
    min-height: 38px;

    border: 1px solid #d3d8d7;
    border-radius: 6px;

    background: #ffffff;
    color: #252b2d;

    overflow: hidden;

    box-sizing: border-box;
}


/* Selected artwork layer */

body.single-product
.cme-proof-layer-row.is-selected {
    border-color: #6775da;

    background: #f1f3ff;

    box-shadow:
        inset 3px 0 0 #6775da;
}


/*
 * Hidden artwork layer.
 *
 * Keep controls usable, but visually indicate that
 * the artwork itself is currently not being shown.
 */
body.single-product
.cme-proof-layer-row.is-hidden {
    background: #f4f5f6;
}

body.single-product
.cme-proof-layer-row.is-hidden
.cme-proof-layer-select {
    color: #8a9194;
}


/* =========================================================
   SHARED LAYER BUTTON RESET
   ========================================================= */

body.single-product
.cme-proof-layer-lock,
body.single-product
.cme-proof-layer-visibility,
body.single-product
.cme-proof-template-visibility,
body.single-product
.cme-proof-layer-up,
body.single-product
.cme-proof-layer-down,
body.single-product
.cme-proof-layer-select {
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: #4d565a;

    font: inherit;

    box-shadow: none;

    cursor: pointer;

    box-sizing: border-box;
}


/* =========================================================
   LOCK
   ========================================================= */

body.single-product
.cme-proof-layer-lock {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    min-width: 32px;

    border-right: 1px solid #e1e5e4;
}

body.single-product
.cme-proof-layer-lock svg {
    display: block;

    width: 16px;
    height: 16px;
}


/* User-locked artwork = obvious red lock */

body.single-product
.cme-proof-layer-lock.is-locked {
    color: #b42318 !important;
    background: #fff0ee !important;
}

body.single-product
.cme-proof-layer-lock.is-locked svg {
    color: #b42318 !important;
}

body.single-product
.cme-proof-layer-lock.is-locked svg path,
body.single-product
.cme-proof-layer-lock.is-locked svg rect {
    stroke: #b42318 !important;
}

body.single-product
.cme-proof-layer-row--template
.cme-proof-layer-lock--fixed.is-locked {
    color: #687176 !important;
    background: transparent !important;
}

body.single-product
.cme-proof-layer-row--template
.cme-proof-layer-lock--fixed.is-locked svg path,
body.single-product
.cme-proof-layer-row--template
.cme-proof-layer-lock--fixed.is-locked svg rect {
    stroke: #687176 !important;
}


/* Hover only on editable lock */

body.single-product
.cme-proof-layer-lock.is-locked:hover {
    background: #ffe0dc !important;
}


/* Locked artwork hover remains red-tinted */

body.single-product
.cme-proof-layer-row.is-locked
.cme-proof-layer-lock:hover {
    background: #ffe0dc;
}



/* =========================================================
   VISIBILITY / EYE
   ========================================================= */

body.single-product
.cme-proof-layer-visibility,
body.single-product
.cme-proof-template-visibility {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    min-width: 32px;

    border-right: 1px solid #e1e5e4;
}

body.single-product
.cme-proof-layer-visibility svg,
body.single-product
.cme-proof-template-visibility svg {
    display: block;

    width: 17px;
    height: 17px;
}

body.single-product
.cme-proof-layer-visibility:hover,
body.single-product
.cme-proof-template-visibility:hover {
    background: #f0f2f4;

    color: #252b2d;
}


/* Closed-eye state */

body.single-product
.cme-proof-layer-row.is-hidden
.cme-proof-layer-visibility,
body.single-product
.cme-proof-template-visibility.is-hidden {
    color: #8a9194;

    background: #f4f5f6;
}


/* =========================================================
   LAYER NAME / SELECTION
   ========================================================= */

body.single-product
.cme-proof-layer-select {
    display: block;

    width: 100%;
    min-width: 0;

    padding: 7px 8px;

    color: #252b2d;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;

    text-align: left;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.single-product
.cme-proof-layer-select:hover {
    background: rgba(103, 117, 218, 0.06);
}

body.single-product
.cme-proof-layer-row.is-selected
.cme-proof-layer-select {
    color: #3f4cad;

    font-weight: 700;
}


/* =========================================================
   STACK ORDER
   ========================================================= */

body.single-product
.cme-proof-layer-order {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 54px;
    min-width: 54px;

    border-left: 1px solid #e1e5e4;
}

body.single-product
.cme-proof-layer-up,
body.single-product
.cme-proof-layer-down {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 36px;

    color: #4d565a;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

body.single-product
.cme-proof-layer-up {
    border-right: 1px solid #e1e5e4;
}

body.single-product
.cme-proof-layer-up:hover:not(:disabled),
body.single-product
.cme-proof-layer-down:hover:not(:disabled) {
    background: #f0f2f4;

    color: #3f4cad;
}

body.single-product
.cme-proof-layer-up:disabled,
body.single-product
.cme-proof-layer-down:disabled {
    color: #b8bec1;

    background: #f8f9fa;

    cursor: not-allowed;
}


/* =========================================================
   PRINT TEMPLATE ROW
   ========================================================= */

body.single-product
.cme-proof-layer-row--template {
    grid-template-columns:
        32px
        32px
        minmax(0, 1fr);

    min-height: 34px;

    margin-top: 5px;

    border-color: #e1e5e4;

    background: #f8f9fa;

    color: #687176;
}


/*
 * Template lock is permanently locked, so keep it
 * neutral instead of using the red editable-layer lock.
 */
body.single-product
.cme-proof-layer-row--template
.cme-proof-layer-lock--fixed {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    min-width: 32px;

    border-right: 1px solid #e1e5e4;

    color: #687176;

    cursor: default;
}

body.single-product
.cme-proof-layer-row--template
.cme-proof-layer-lock--fixed svg {
    display: block;

    width: 16px;
    height: 16px;
}


body.single-product
.cme-proof-layer-row--template
.cme-proof-layer-name {
    display: flex;
    align-items: center;

    min-width: 0;

    padding: 7px 8px;

    color: #596266;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

body.single-product
.cme-proof-layer-lock:focus-visible,
body.single-product
.cme-proof-layer-visibility:focus-visible,
body.single-product
.cme-proof-template-visibility:focus-visible,
body.single-product
.cme-proof-layer-select:focus-visible,
body.single-product
.cme-proof-layer-up:focus-visible,
body.single-product
.cme-proof-layer-down:focus-visible {
    position: relative;
    z-index: 2;

    outline: 2px solid #6775da;
    outline-offset: -2px;
}
\






/* =========================================================
   ADVANCED DESIGN — ADD ARTWORK DIALOG
   ========================================================= */

body.single-product
.cme-proof-add-artwork-dialog {
    position: fixed;
    z-index: 2147483000;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    box-sizing: border-box;
}


body.single-product
.cme-proof-add-artwork-backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;

    background: rgba(20, 24, 28, 0.72);
}


body.single-product
.cme-proof-add-artwork-window {
    position: relative;
    z-index: 2;

    width: min(100%, 480px);

    padding: 22px;

    border-radius: 12px;

    background: #ffffff;
    color: #303638;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.32);

    box-sizing: border-box;
}


/* Header */

body.single-product
.cme-proof-add-artwork-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin: 0 0 20px;
}


body.single-product
.cme-proof-add-artwork-dialog-header h3 {
    margin: 0;

    color: #202627;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}


body.single-product
.cme-proof-add-artwork-close {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    margin: 0;
    padding: 0;

    border: 1px solid #cbd1d0;
    border-radius: 50%;

    background: #ffffff;
    color: #303638;

    font-size: 21px;
    line-height: 1;

    cursor: pointer;
}


/* Existing artwork button */

body.single-product
.cme-proof-choose-existing-artwork {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 42px;

    margin: 0;
    padding: 9px 14px;

    border: 1px solid #6775da;
    border-radius: 7px;

    background: #f1f3ff;
    color: #3f4cad;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-sizing: border-box;
}


body.single-product
.cme-proof-choose-existing-artwork:hover {
    background: #e7eaff;
}


/* OR divider */

body.single-product
.cme-proof-add-artwork-divider {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 18px 0;

    color: #81898d;

    font-size: 10px;
    font-weight: 700;
}


body.single-product
.cme-proof-add-artwork-divider::before,
body.single-product
.cme-proof-add-artwork-divider::after {
    content: "";

    flex: 1 1 auto;

    height: 1px;

    background: #d9dedd;
}


/* Dropzone */

body.single-product
.cme-proof-add-artwork-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 100%;
    min-height: 170px;

    margin: 0;
    padding: 22px;

    border: 2px dashed #bfc6c8;
    border-radius: 9px;

    background: #f8f9fa;
    color: #303638;

    text-align: center;

    cursor: pointer;

    box-sizing: border-box;
}


body.single-product
.cme-proof-add-artwork-dropzone:hover,
body.single-product
.cme-proof-add-artwork-dropzone.is-dragging {
    border-color: #6775da;

    background: #f1f3ff;
}


body.single-product
.cme-proof-add-artwork-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-bottom: 4px;

    border-radius: 50%;

    background: #6775da;
    color: #ffffff;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}


body.single-product
.cme-proof-add-artwork-dropzone strong {
    display: block;

    font-size: 13px;
    font-weight: 700;
}


body.single-product
.cme-proof-add-artwork-dropzone > span:not(
    .cme-proof-add-artwork-upload-icon
) {
    color: #626b70;

    font-size: 11px;
}


body.single-product
.cme-proof-add-artwork-dropzone small {
    display: block;

    margin-top: 6px;

    color: #858d91;

    font-size: 10px;
}


/* Footer */

body.single-product
.cme-proof-add-artwork-footer {
    display: flex;
    justify-content: flex-end;

    margin-top: 18px;
}


body.single-product
.cme-proof-add-artwork-cancel {
    min-height: 34px;

    padding: 7px 13px;

    border: 1px solid #cbd1d0;
    border-radius: 6px;

    background: #ffffff;
    color: #303638;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


/* Focus */

body.single-product
.cme-proof-add-artwork-close:focus-visible,
body.single-product
.cme-proof-choose-existing-artwork:focus-visible,
body.single-product
.cme-proof-add-artwork-dropzone:focus-visible,
body.single-product
.cme-proof-add-artwork-cancel:focus-visible {
    outline: 2px solid #6775da;
    outline-offset: 2px;
}











/* =========================================================
   ADD ARTWORK — EXISTING ARTWORK BROWSER
   ========================================================= */

body.single-product
.cme-proof-artwork-browser-back {
    margin: 0 0 5px;
    padding: 0;

    border: 0;

    background: transparent;
    color: #5664cd;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

body.single-product
.cme-proof-add-artwork-dialog-header > div h3 {
    margin: 0;
}


body.single-product
.cme-proof-existing-artwork-help,
body.single-product
.cme-proof-pdf-picker-filename {
    margin: -6px 0 16px;

    color: #626b70;

    font-size: 11px;
    line-height: 1.4;
}


/* Uploaded source files */

body.single-product
.cme-proof-existing-artwork-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    max-height: 430px;

    overflow-y: auto;
}


body.single-product
.cme-proof-existing-artwork-item {
    display: flex;
    flex-direction: column;

    min-width: 0;

    margin: 0;
    padding: 8px;

    border: 1px solid #d3d8d7;
    border-radius: 8px;

    background: #ffffff;
    color: #303638;

    text-align: left;

    cursor: pointer;

    overflow: hidden;
}


body.single-product
.cme-proof-existing-artwork-item:hover {
    border-color: #6775da;

    background: #f1f3ff;
}


body.single-product
.cme-proof-existing-artwork-thumbnail {
    display: block;

    width: 100%;
    height: 115px;

    margin: 0 0 7px;

    border-radius: 5px;

    background: #eef1f2;

    object-fit: contain;
}


body.single-product
.cme-proof-existing-artwork-info {
    display: block;

    min-width: 0;
}


body.single-product
.cme-proof-existing-artwork-info strong {
    display: block;

    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #252b2d;

    font-size: 11px;
}


body.single-product
.cme-proof-existing-artwork-info small {
    display: block;

    margin-top: 3px;

    color: #7b8387;

    font-size: 10px;
}


/* =========================================================
   PDF PAGE PICKER
   ========================================================= */

body.single-product
.cme-proof-pdf-page-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    max-height: 450px;

    overflow-y: auto;
}


body.single-product
.cme-proof-pdf-page-item {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 0;
    padding: 7px;

    border: 1px solid #d3d8d7;
    border-radius: 7px;

    background: #ffffff;
    color: #303638;

    cursor: pointer;
}


body.single-product
.cme-proof-pdf-page-item:hover {
    border-color: #6775da;

    background: #f1f3ff;
}


body.single-product
.cme-proof-pdf-page-item img {
    display: block;

    width: 100%;
    height: 120px;

    background: #eef1f2;

    object-fit: contain;
}


body.single-product
.cme-proof-pdf-page-item span {
    display: block;

    color: #303638;

    font-size: 10px;
    font-weight: 700;

    text-align: center;
}


body.single-product
.cme-proof-existing-artwork-empty {
    grid-column: 1 / -1;

    margin: 0;
    padding: 22px;

    border-radius: 7px;

    background: #f4f6f7;
    color: #626b70;

    font-size: 12px;
    text-align: center;
}









.cme-proof-pdf-loading {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 30px;
}

.cme-proof-pdf-loading strong {
    font-size: 16px;
}

.cme-proof-pdf-loading p {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.cme-proof-pdf-loading small {
    opacity: 0.7;
}

.cme-proof-pdf-loading-spinner {
    width: 34px;
    height: 34px;
    border: 4px solid rgba(0, 0, 0, 0.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation:
        cme-proof-pdf-spinner
        0.8s linear infinite;
}

@keyframes cme-proof-pdf-spinner {
    to {
        transform: rotate(360deg);
    }
}

















/* =========================================================
   MODERN PROOF VIEWER — RIGHT SIDEBAR
   ========================================================= */


/* Slightly more breathing room for the information panel */
body.single-product
.cme-proof-viewer-body {
    grid-template-columns:
        minmax(0, 1fr)
        350px;
}


/* Main sidebar surface */
body.single-product
.cme-proof-viewer-details {
    padding: 18px;

    background: #f7f8fa;

    border-left: 1px solid #dde1e4;

    scrollbar-gutter: stable;
}


/* =========================================================
   GENERAL SIDEBAR SECTION SPACING
   ========================================================= */

body.single-product
.cme-proof-viewer-detail-group {
    margin: 0 0 14px;
    padding: 0 0 14px;

    border-bottom: 1px solid #e3e6e8;
}


/* Cleaner uppercase metadata labels */
body.single-product
.cme-proof-viewer-detail-label {
    margin-bottom: 6px;

    color: #7b8387;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.08em;
}


/* Slightly stronger filename / page values */
body.single-product
.cme-proof-viewer-filename,
body.single-product
.cme-proof-viewer-page-order {
    color: #202528;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   STATUS PILL
   ========================================================= */

body.single-product
.cme-proof-viewer-status {
    padding: 6px 10px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.01em;
}


/* Pending */

body.single-product
.cme-proof-viewer-status--pending {
    border-color: #ecd28c;

    background: #fff8df;
    color: #805d00;
}


/* Approved */

body.single-product
.cme-proof-viewer-status--approved {
    border-color: #addbc5;

    background: #eaf7f0;
    color: #17623f;
}


/* Approved with warning */

body.single-product
.cme-proof-viewer-status--approved-warning {
    border-color: #edcf8a;

    background: #fff7df;
    color: #805400;
}


/* Rejected / critical */

body.single-product
.cme-proof-viewer-status--rejected,
body.single-product
.cme-proof-viewer-status--critical {
    border-color: #efb2ac;

    background: #fff0ee;
    color: #9d2018;
}


/* =========================================================
   PROOF CHECKS SECTION
   ========================================================= */

body.single-product
.cme-proof-viewer-checks {
    margin: 18px 0;
}


body.single-product
.cme-proof-viewer-checks h3 {
    margin: 0 0 10px;

    color: #202528;

    font-size: 14px;
    font-weight: 800;
}


/*
 * Turn the gray Proof Checks block into a cleaner white card.
 */
body.single-product
.cme-proof-viewer-check {
    margin: 0;

    padding: 13px 14px;

    border: 1px solid #dde2e5;
    border-radius: 10px;

    background: #ffffff !important;
    color: #515a5e;

    box-shadow:
        0 1px 2px
        rgba(20, 25, 28, 0.04);
}


/*
 * Base Proof Check text.
 */
body.single-product
.cme-proof-viewer-check strong {
    margin-bottom: 2px;

    color: #252a2d;

    font-size: 11px;
    font-weight: 750;
}


body.single-product
.cme-proof-viewer-check p {
    color: #616a6e;

    font-size: 10px;
    line-height: 1.45;
}


/* =========================================================
   CHECK ROW ICONS
   ========================================================= */

/*
 * Existing rows use a small circle character.
 * Turn it into a pass indicator.
 */
body.single-product
.cme-proof-viewer-check--combined
> span:first-child,
body.single-product
.cme-proof-viewer-artwork-size
> span:first-child,
body.single-product
.cme-proof-viewer-color-mode
> span:first-child,
body.single-product
.cme-proof-viewer-font-check
> span:first-child,
body.single-product
.cme-proof-viewer-spot-colors
> span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: #e9f6ef;
    color: #197044;

    font-size: 0;
    font-weight: 800;
}


/*
 * Green checkmark.
 */
body.single-product
.cme-proof-viewer-check--combined
> span:first-child::after,
body.single-product
.cme-proof-viewer-artwork-size
> span:first-child::after,
body.single-product
.cme-proof-viewer-color-mode
> span:first-child::after,
body.single-product
.cme-proof-viewer-font-check
> span:first-child::after,
body.single-product
.cme-proof-viewer-spot-colors
> span:first-child::after {
    content: "\2713";

    font-size: 10px;
    line-height: 1;
}


/* =========================================================
   PROOF CHECK ROWS
   ========================================================= */

body.single-product
.cme-proof-viewer-check--combined {
    grid-template-columns:
        18px
        minmax(0, 1fr);

    column-gap: 10px;
}


/*
 * All secondary check rows use the same spacing.
 */
body.single-product
.cme-proof-viewer-check--combined
.cme-proof-viewer-artwork-size,

body.single-product
.cme-proof-viewer-check--combined
.cme-proof-viewer-color-mode,

body.single-product
.cme-proof-viewer-check--combined
.cme-proof-viewer-font-check,

body.single-product
.cme-proof-viewer-check--combined
.cme-proof-viewer-spot-colors {
    grid-column: 1 / -1;

    margin-top: 11px;
    padding-top: 11px;

    border-top: 1px solid #edf0f2;
}


/* Compact successful-value text */
body.single-product
.cme-proof-viewer-artwork-size-details,
body.single-product
.cme-proof-viewer-color-mode-value,
body.single-product
.cme-proof-viewer-font-value,
body.single-product
.cme-proof-viewer-spot-colors-value {
    margin-top: 2px;

    color: #667075;

    font-size: 10px;
    line-height: 1.45;
}


/* Secondary explanatory text */
body.single-product
.cme-proof-viewer-color-mode-message,
body.single-product
.cme-proof-viewer-font-message {
    margin-top: 3px;

    color: #6c7579;

    font-size: 10px;
    line-height: 1.45;
}


/* =========================================================
   WARNINGS
   =========================================================
   These are approvable warnings, so use amber rather than
   making them look like a fatal red error.
   ========================================================= */


/* RGB warning */
body.single-product
.cme-proof-viewer-color-mode--warning {
    

    margin-top: 12px;
    

    
    
    

    

    box-shadow: none;
}


/*
 * Hide the normal pass icon because the warning gets
 * its own larger warning icon.
 */
body.single-product
.cme-proof-viewer-color-mode--warning
> span:first-child {
    display: none;
}


body.single-product
.cme-proof-viewer-color-mode--warning::before {
    

    left: 13px;
    top: 13px;

    color: #b87500;

    font-size: 18px;
}


body.single-product
.cme-proof-viewer-color-mode--warning
strong {
    
}


body.single-product
.cme-proof-viewer-color-mode--warning
.cme-proof-viewer-color-mode-value {
    margin-top: 3px;

    

    font-size: 10px;
    
}


body.single-product
.cme-proof-viewer-color-mode--warning
.cme-proof-viewer-color-mode-message {
    

    font-size: 10px;
    
}


/* Font warning */
body.single-product
.cme-proof-viewer-font-check--warning {
    

    margin-top: 12px;
    

    
    
    

    

    box-shadow: none;
}


body.single-product
.cme-proof-viewer-font-check--warning
> span:first-child {
    display: none;
}


body.single-product
.cme-proof-viewer-font-check--warning::before {
    left: 13px;
    top: 13px;

    color: #b87500;

    font-size: 18px;
}


body.single-product
.cme-proof-viewer-font-check--warning
.cme-proof-viewer-font-value {
    color: #875c00;

    font-size: 10px;
    font-weight: 800;
}


body.single-product
.cme-proof-viewer-font-check--warning
.cme-proof-viewer-font-message {
    color: #785f25;

    font-size: 10px;
}


/* =========================================================
   ARTWORK QUALITY
   ========================================================= */

body.single-product
.cme-proof-viewer-quality {
    margin: 14px 0;

    padding: 13px 14px;

    border-width: 1px;
    border-left-width: 4px;
    border-radius: 10px;

    box-shadow:
        0 1px 2px
        rgba(20, 25, 28, 0.04);
}


body.single-product
.cme-proof-viewer-quality h3 {
    

    color: #252a2d;

    
    
}


body.single-product
.cme-proof-viewer-ppi-value {
    font-size: 12px;
    font-weight: 800;
}


body.single-product
.cme-proof-viewer-ppi-message {
    margin-top: 2px;

    font-size: 10px;
    line-height: 1.45;
}


/* Excellent */
body.single-product
.cme-proof-viewer-quality--excellent {
    border-color: #b9ddc8;
    border-left-color: #269454;

    background: #f0faf4;
}


/* Acceptable */
body.single-product
.cme-proof-viewer-quality--acceptable {
    border-color: #cdd3f5;
    border-left-color: #6775da;

    background: #f5f6ff;
}


/* Warning */
body.single-product
.cme-proof-viewer-quality--warning {
    border-color: #ead08d;
    border-left-color: #d79400;

    background: #fff9e9;
}


/* Critical */
body.single-product
.cme-proof-viewer-quality--critical {
    border-color: #efb8b2;
    border-left-color: #b42318;

    background: #fff3f1;
}


/* =========================================================
   APPROVAL CONFIRMATION
   ========================================================= */

body.single-product
.cme-proof-viewer-confirmation {
    margin-top: 14px;
    margin-bottom: 2px;

    padding: 13px;

    border: 1px solid #dce1e4;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 1px 2px
        rgba(20, 25, 28, 0.04);
}


body.single-product
.cme-proof-viewer-confirm-toggle {
    gap: 10px;

    color: #3f474b;

    
    font-weight: 600;
    
}


body.single-product
.cme-proof-viewer-confirm-box {
    width: 19px;
    height: 19px;

    border: 1.5px solid #9ca5a9;
    border-radius: 5px;
}


/* Checked approval state */
body.single-product
.cme-proof-viewer-confirm-toggle.is-checked
.cme-proof-viewer-confirm-box {
    border-color: #16855b;

    background: #16855b;
}


/* Keyboard focus */
body.single-product
.cme-proof-viewer-confirm-toggle:focus-visible
.cme-proof-viewer-confirm-box {
    outline-color: #16855b;
}


/* =========================================================
   SIDEBAR SCROLLBAR
   ========================================================= */

body.single-product
.cme-proof-viewer-details::-webkit-scrollbar {
    width: 8px;
}


body.single-product
.cme-proof-viewer-details::-webkit-scrollbar-track {
    background: transparent;
}


body.single-product
.cme-proof-viewer-details::-webkit-scrollbar-thumb {
    border: 2px solid #f7f8fa;
    border-radius: 999px;

    background: #c2c8cb;
}


/* =========================================================
   RESPONSIVE SIDEBAR
   ========================================================= */

@media screen and (max-width: 900px) {

    body.single-product
    .cme-proof-viewer-body {
        grid-template-columns: 1fr;
    }


    body.single-product
    .cme-proof-viewer-details {
        background: #f7f8fa;

        border-top: 1px solid #dde1e4;
        border-left: 0;
    }
}
















/* =========================================================
   MODERN PROOF CHECK ACCORDIONS
   ========================================================= */


/* Main Proof Checks card */
body.single-product
.cme-proof-viewer-check--combined {
    display: block !important;

    padding: 0;

    overflow: hidden;

    border: 1px solid #dce1e4;
    border-radius: 10px;

    background: #ffffff !important;

    box-shadow:
        0 1px 2px
        rgba(20, 25, 28, 0.04);
}


/* =========================================================
   SHARED ACCORDION ROW
   ========================================================= */

body.single-product
.cme-proof-accordion-row {
    position: relative;

    display: grid !important;
    grid-template-columns:
        20px
        minmax(0, 1fr)
        20px;

    align-items: start;
    column-gap: 9px;

    width: 100%;

    margin: 0 !important;
    padding: 11px 12px !important;

    border: 0 !important;
    border-radius: 0 !important;
    border-bottom:
        1px solid #edf0f2 !important;

    background: #ffffff;

    color: #4f585c;

    cursor: pointer;

    box-shadow: none !important;

    box-sizing: border-box;
}


/*
 * Last row in Proof Checks doesn't need a divider.
 */
body.single-product
.cme-proof-viewer-check--combined
.cme-proof-accordion-row:last-child {
    border-bottom: 0 !important;
}


/* Hover makes clickability more obvious */
body.single-product
.cme-proof-viewer-check--combined
.cme-proof-accordion-row:hover {
    background: #f8fafb;
}


/* Keyboard */
body.single-product
.cme-proof-accordion-row:focus-visible {
    position: relative;
    z-index: 3;

    outline: 2px solid #6775da;
    outline-offset: -2px;
}


/* =========================================================
   BLEED ROW
   ========================================================= */

body.single-product
.cme-proof-viewer-bleed-safe-area {
    grid-template-columns:
        20px
        minmax(0, 1fr)
        20px;
}


/* =========================================================
   STANDARD ROW RESET
   ========================================================= */

body.single-product
.cme-proof-viewer-artwork-size,

body.single-product
.cme-proof-viewer-color-mode,

body.single-product
.cme-proof-viewer-font-check,

body.single-product
.cme-proof-viewer-spot-colors {
    grid-column: auto;

    margin: 0 !important;
    padding-top: 11px !important;

    border-top: 0 !important;
}


/* =========================================================
   PASS ICON
   ========================================================= */

body.single-product
.cme-proof-accordion-row
> span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    margin-top: 1px;

    border-radius: 50%;

    background: #e6f5ec;
    color: #197047;

    font-size: 0;
    line-height: 1;
}


/* Check */
body.single-product
.cme-proof-accordion-row
> span:first-child::after {
    content: "✓";

    font-size: 10px;
    font-weight: 900;
}

/* =========================================================
   ARTWORK SIZE — INFORMATIONAL, NOT PASS / FAIL
   ========================================================= */

body.single-product
.cme-proof-viewer-artwork-size.cme-proof-accordion-row
> span:first-child,
body.single-product
.cme-proof-viewer-spot-colors.cme-proof-accordion-row
> span:first-child {
    border: 1px solid #8190df;

    background: #ffffff;
    color: #6574d7;
}

body.single-product
.cme-proof-viewer-artwork-size.cme-proof-accordion-row
> span:first-child::after,
body.single-product
.cme-proof-viewer-spot-colors.cme-proof-accordion-row
> span:first-child::after {
    content: "i";

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}


/* =========================================================
   TITLES
   ========================================================= */

body.single-product
.cme-proof-accordion-row
strong {
    display: block;

    margin: 1px 0 0;

    color: #252b2d;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}


/* =========================================================
   CHEVRON
   ========================================================= */

body.single-product
.cme-proof-accordion-chevron {
    grid-column: 3;
    grid-row: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin: 0 !important;

    background: transparent !important;
    color: #8a9296 !important;

    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1;

    transition:
        transform 0.18s ease;
}


/*
 * Do not turn the chevron into a green check.
 */
body.single-product
.cme-proof-accordion-chevron::after {
    content: none !important;
}


/* Open points downward */
body.single-product
.cme-proof-accordion-row.is-open
.cme-proof-accordion-chevron {
    transform: rotate(90deg);
}


/* =========================================================
   COLLAPSED DETAILS
   ========================================================= */

/*
 * Bleed/Safe Area:
 * keep its title, hide explanatory paragraph.
 */
body.single-product
.cme-proof-viewer-bleed-safe-area:not(.is-open)
p {
    display: none;
}


/*
 * Artwork size values.
 */
body.single-product
.cme-proof-viewer-artwork-size:not(.is-open)
.cme-proof-viewer-artwork-size-details {
    display: none;
}


/*
 * Color Mode.
 */
body.single-product
.cme-proof-viewer-color-mode:not(.is-open)
.cme-proof-viewer-color-mode-value,

body.single-product
.cme-proof-viewer-color-mode:not(.is-open)
.cme-proof-viewer-color-mode-message {
    display: none;
}


/*
 * Fonts.
 */
body.single-product
.cme-proof-viewer-font-check:not(.is-open)
.cme-proof-viewer-font-value,

body.single-product
.cme-proof-viewer-font-check:not(.is-open)
.cme-proof-viewer-font-message {
    display: none;
}


/*
 * Spot Colors.
 */
body.single-product
.cme-proof-viewer-spot-colors:not(.is-open)
.cme-proof-viewer-spot-colors-value,

body.single-product
.cme-proof-viewer-spot-colors:not(.is-open)
.cme-proof-viewer-spot-colors-message {
    display: none;
}


/* =========================================================
   OPEN DETAILS
   ========================================================= */

body.single-product
.cme-proof-accordion-row.is-open
.cme-proof-viewer-artwork-size-details,

body.single-product
.cme-proof-accordion-row.is-open
.cme-proof-viewer-color-mode-value,

body.single-product
.cme-proof-accordion-row.is-open
.cme-proof-viewer-color-mode-message,

body.single-product
.cme-proof-accordion-row.is-open
.cme-proof-viewer-font-value,

body.single-product
.cme-proof-accordion-row.is-open
.cme-proof-viewer-font-message,

body.single-product
.cme-proof-accordion-row.is-open
.cme-proof-viewer-spot-colors-value {
    margin-top: 5px;

    color: #626b70;

    font-size: 10px;
    line-height: 1.45;
}


/* =========================================================
   COLOR MODE WARNING
   ========================================================= */

body.single-product
.cme-proof-viewer-color-mode--warning {
    grid-template-columns:
        20px
        minmax(0, 1fr)
        20px !important;

    padding:
        11px 12px !important;

    border:
        0 !important;

    border-left:
        4px solid #d99800 !important;

    border-bottom:
        1px solid #efdba8 !important;

    border-radius:
        0 !important;

    background:
        #fff9e9 !important;
}


/* Remove old absolutely-positioned warning triangle */
body.single-product
.cme-proof-viewer-color-mode--warning::before {
    content: none;
}


/* Warning icon */
body.single-product
.cme-proof-viewer-color-mode--warning
> span:first-child {
    background: #fff0c2;
    color: #a86e00;
}


body.single-product
.cme-proof-viewer-color-mode--warning
> span:first-child::after {
    content: "!";
}


/* Warning title */
body.single-product
.cme-proof-viewer-color-mode--warning
strong {
    color: #6f4b00;
}


/* Warning details */
body.single-product
.cme-proof-viewer-color-mode--warning
.cme-proof-viewer-color-mode-value {
    color: #875b00;

    font-weight: 700;
}


body.single-product
.cme-proof-viewer-color-mode--warning
.cme-proof-viewer-color-mode-message {
    color: #735d28;

    font-weight: 400;
}


/* =========================================================
   FONT WARNING
   ========================================================= */

body.single-product
.cme-proof-viewer-font-check--warning {
    grid-template-columns:
        20px
        minmax(0, 1fr)
        20px !important;

    padding:
        11px 12px !important;

    border:
        0 !important;

    border-left:
        4px solid #d99800 !important;

    border-bottom:
        1px solid #efdba8 !important;

    border-radius:
        0 !important;

    background:
        #fff9e9 !important;
}


body.single-product
.cme-proof-viewer-font-check--warning::before {
    content: none;
}


body.single-product
.cme-proof-viewer-font-check--warning
> span:first-child {
    background: #fff0c2;
    color: #a86e00;
}


body.single-product
.cme-proof-viewer-font-check--warning
> span:first-child::after {
    content: "!";
}


body.single-product
.cme-proof-viewer-font-check--warning
strong {
    color: #6f4b00;
}


/* =========================================================
   ARTWORK QUALITY ACCORDION
   ========================================================= */

body.single-product
.cme-proof-viewer-quality.cme-proof-accordion-row {
    display: grid !important;

    grid-template-columns:
        20px
        minmax(0, 1fr)
        20px;

    margin: 14px 0;

    padding: 11px 12px !important;

    border-width: 1px !important;
    border-left-width: 4px !important;
    border-radius: 10px !important;

    cursor: pointer;

    overflow: hidden;
}


/*
 * Quality title/result occupy middle column.
 */
body.single-product
.cme-proof-viewer-quality
h3 {
    grid-column: 2;

    margin: 1px 0 0;

    font-size: 11px;
    font-weight: 700;
}


body.single-product
.cme-proof-viewer-quality-result {
    grid-column: 2;
}


/*
 * Good quality is compact.
 */
body.single-product
.cme-proof-viewer-quality:not(.is-open)
.cme-proof-viewer-quality-result {
    display: none;
}


/* Open detail */
body.single-product
.cme-proof-viewer-quality.is-open
.cme-proof-viewer-quality-result {
    display: grid;

    gap: 3px;

    margin-top: 5px;
}


/*
 * Quality has no original leading icon, so generate one.
 */
body.single-product
.cme-proof-viewer-quality::before {
    content: "✓";

    grid-column: 1;
    grid-row: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: #e6f5ec;
    color: #197047;

    font-size: 10px;
    font-weight: 900;
}


/* Don't use the shared first-span rule on the chevron */
body.single-product
.cme-proof-viewer-quality
.cme-proof-accordion-chevron {
    grid-column: 3;
    grid-row: 1;
}


/* Warning quality icon */
body.single-product
.cme-proof-viewer-quality--warning::before {
    content: "!";

    background: #fff0c2;
    color: #a86e00;
}


/* Critical quality icon */
body.single-product
.cme-proof-viewer-quality--critical::before {
    content: "!";

    background: #ffe2df;
    color: #a72218;
}


/* =========================================================
   OPEN ROW SPACING
   ========================================================= */

body.single-product
.cme-proof-accordion-row.is-open {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


/*
 * Keep compact rows noticeably shorter.
 */
body.single-product
.cme-proof-accordion-row:not(.is-open) {
    min-height: 39px;
}





















/* =========================================================
   SIDEBAR PAGE NAVIGATION
   ========================================================= */

body.single-product
.cme-proof-viewer-sidebar-navigation {
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;
    gap: 8px;

    margin-top: 4px;
}


body.single-product
.cme-proof-viewer-sidebar-navigation
.cme-proof-viewer-position {
    min-width: 48px;

    color: #697277;

    font-size: 10px;
    font-weight: 700;

    text-align: center;
}


/*
 * Make Previous / Next fit naturally in the sidebar.
 */
body.single-product
.cme-proof-viewer-sidebar-navigation
.cme-proof-viewer-button {
    width: 100%;
    min-width: 0;
    min-height: 30px;

    padding: 6px 8px;

    font-size: 10px;
}


/* =========================================================
   SIDEBAR APPROVE / REJECT ACTIONS
   ========================================================= */

body.single-product
.cme-proof-viewer-sidebar-actions {
    display: grid;
    grid-template-columns:
        1fr
        1.35fr;

    gap: 9px;

    margin-top: 12px;
}


body.single-product
.cme-proof-viewer-sidebar-actions
.cme-proof-viewer-button {
    width: 100%;
    min-width: 0;
    min-height: 38px;

    padding: 8px 10px;

    justify-self: stretch;

    font-size: 10px;
}


/*
 * Reject remains secondary visually to approval,
 * but still clearly destructive.
 */
body.single-product
.cme-proof-viewer-sidebar-actions
.cme-proof-viewer-button--reject {
    justify-self: stretch;

    border: 1px solid #d8aaa6;

    background: #ffffff;
    color: #a3261e;
}


body.single-product
.cme-proof-viewer-sidebar-actions
.cme-proof-viewer-button--reject:hover {
    background: #fff2f0;
}


/*
 * Approval remains the primary action.
 */
body.single-product
.cme-proof-viewer-sidebar-actions
.cme-proof-viewer-button--approve {
    justify-self: stretch;
}


/* =========================================================
   REMOVE OLD FOOTER SPACE
   ========================================================= */

body.single-product
.cme-proof-viewer-footer[hidden] {
    display: none !important;
}



























/* =========================================================
   MODERN PROOF VIEWER — TOP TOOLBAR
   ========================================================= */

body.single-product
.cme-proof-viewer-preview-column {
    padding:
        14px 16px
        12px;
}


/* =========================================================
   TOOLBAR SURFACE
   ========================================================= */

body.single-product
.cme-proof-viewer-toolbar {
    display: grid;

    grid-template-columns:
        auto
        minmax(20px, 1fr)
        auto;

    grid-template-rows:
        auto
        auto;

    align-items: center;

    column-gap: 12px;
    row-gap: 6px;

    width: 100%;

    margin: 0 0 10px;

    border: 1px solid #d8dddf;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 1px 2px
        rgba(20, 25, 28, 0.05);

    box-sizing: border-box;
}


/* =========================================================
   MODE SWITCH
   ========================================================= */

body.single-product
.cme-proof-viewer-mode-switch {
    display: inline-flex;

    width: max-content;

    margin: 0;
    padding: 3px;

    border: 0;
    border-radius: 7px;

    background: #edf0f2;
}


/* Normal mode button */
body.single-product
.cme-proof-viewer-mode-button {
    min-height: 30px;

    padding: 6px 11px;

    border: 0;
    border-radius: 5px;

    background: transparent;
    color: #515a5e;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    box-shadow: none;

    cursor: pointer;
}


/* Hover */
body.single-product
.cme-proof-viewer-mode-button:hover:not(.is-active) {
    background: rgba(
        255,
        255,
        255,
        0.7
    );

    color: #2d3437;
}


/* Active mode */
body.single-product
.cme-proof-viewer-mode-button.is-active {
    background: #6775da;
    color: #ffffff;

    box-shadow:
        0 1px 3px
        rgba(30, 35, 60, 0.18);
}


/* =========================================================
   RIGHT-SIDE VIEW CONTROLS
   ========================================================= */

body.single-product
.cme-proof-viewer-zoom-controls {
    grid-column: 3;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;

    justify-self: end;
}


/* 100% indicator */
body.single-product
.cme-proof-zoom-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 45px;
    

    padding: 0 7px;

    border-radius: 6px;

    background: #f2f4f5;
    color: #596266;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    box-sizing: border-box;
}


/* Toolbar action buttons */
body.single-product
.cme-proof-viewer-tool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;

    padding: 6px 10px;

    border: 1px solid #d2d7d9;
    border-radius: 6px;

    background: #ffffff;
    color: #30373a;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    box-shadow: none;

    cursor: pointer;
}


/* Hover / focus */
body.single-product
.cme-proof-viewer-tool-button:hover,
body.single-product
.cme-proof-viewer-tool-button:focus {
    border-color: #9da7dd;

    background: #f5f6ff;
    color: #4854b4;
}


/*
 * Reset should read as slightly less prominent than
 * Fit / Center Template.
 */
body.single-product
.cme-proof-reset {
    color: #666f73;

    background: #f8f9fa;
}


/* =========================================================
   MODE HELP
   ========================================================= */

body.single-product
.cme-proof-viewer-mode-help {
    

    

    

    border-top:
        1px solid #e6e9eb;

    

    
    

    
    

    
}


/*
 * Tone down the explicit line break spacing in the help copy.
 */
body.single-product
.cme-proof-viewer-mode-help br {
    line-height: 1;
}


/* =========================================================
   CANVAS SEPARATION
   ========================================================= */

/*
 * The toolbar now has its own white surface, so give the canvas
 * a little separation underneath it.
 */
body.single-product
.cme-proof-viewer-canvas {
    border: 1px solid #dde2e4;
    border-radius: 9px;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.25);
}


/* =========================================================
   SMALLER VIEWPORTS
   ========================================================= */

@media screen and (max-width: 850px) {

    body.single-product
    .cme-proof-viewer-toolbar {
        grid-template-columns: 1fr;

        row-gap: 7px;
    }


    body.single-product
    .cme-proof-viewer-mode-switch {
        justify-self: center;
    }


    body.single-product
    .cme-proof-viewer-zoom-controls {
        grid-column: 1;

        justify-self: center;
    }


    body.single-product
    .cme-proof-viewer-mode-help {
        grid-column: 1;

        margin-top: 0;
    }
}














/* =========================================================
   RESPECT TOOLBAR HIDDEN STATE
   ========================================================= */

body.single-product
.cme-proof-viewer-tool-button[hidden],
body.single-product
.cme-proof-fit-template[hidden] {
    display: none !important;
}














/* =========================================================
   MOVE VIEWER HEADING INTO RIGHT SIDEBAR
   ========================================================= */


/*
 * Original header now only holds the floating close button
 * and takes up no vertical layout space.
 */
body.single-product
.cme-proof-viewer-header.cme-proof-viewer-header--floating {
    position: absolute;
    z-index: 100;

    top: 0;
    right: 0;

    width: 0;
    height: 0;

    margin: 0;
    padding: 0;

    border: 0;

    overflow: visible;

    pointer-events: none;
}


/*
 * Keep the X fully usable.
 */
body.single-product
.cme-proof-viewer-header--floating
.cme-proof-viewer-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    pointer-events: auto;

    background: #ffffff;

    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.10);
}


/* =========================================================
   SIDEBAR HEADING
   ========================================================= */

body.single-product
.cme-proof-viewer-sidebar-heading {
    margin:
        0 0 16px;

    padding:
        0 44px 14px 0;

    border-bottom:
        1px solid #e1e5e7;
}


body.single-product
.cme-proof-viewer-sidebar-heading h2 {
    margin:
        0 0 4px;

    color: #1d2326;

    font-size: 18px;
    font-weight: 750;
    line-height: 1.2;
}


body.single-product
.cme-proof-viewer-sidebar-heading
.cme-proof-viewer-subtitle {
    margin: 0;

    color: #697277;

    
    
}


/*
 * The body now gets the entire modal height between
 * the outer edges instead of starting beneath a header.
 */
body.single-product
.cme-proof-viewer-body {
    flex: 1 1 100%;

    height: 100%;
}


/*
 * Allow the preview column to benefit from the reclaimed
 * vertical space.
 */
body.single-product
.cme-proof-viewer-preview-column {
    height: 100%;
}












/* =========================================================
   COMPACT INLINE MODE HELP
   ========================================================= */

/*
 * Use the empty middle column of the toolbar for the
 * mode-specific instructions instead of giving them
 * a complete second row.
 */
body.single-product
.cme-proof-viewer-mode-help {
    position: relative;

    grid-column: 1 / -1;
    grid-row: 2;

    align-self: stretch;
    justify-self: stretch;

    width: 100%;

    margin: 0;
    padding: 6px 10px 6px 32px;

    border: 1px solid #dce1e4;
    border-radius: 7px;

    background: #f8fafb;
    color: #687176;

    text-align: left;

    box-sizing: border-box;
}


/*
 * Circled information icon.
 */
body.single-product
.cme-proof-viewer-mode-help::before {
    content: "i";

    position: absolute;

    top: 50%;
    left: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    border: 1.5px solid #6775da;
    border-radius: 50%;

    color: #5664cd;

    font-size: 10px;
    font-weight: 800;
    font-style: normal;
    line-height: 1;

    transform: translateY(-50%);
}


/*
 * The help strings currently contain <br> tags.
 * Make them behave like normal spaces so the message
 * can occupy one compact toolbar row.
 */
body.single-product
.cme-proof-viewer-mode-help br {
    display: none;
}


/*
 * Add a little separation where the hidden line break was.
 */
body.single-product
.cme-proof-viewer-mode-help br::after {
    content: " ";
}


/* =========================================================
   TIGHTEN TOOLBAR HEIGHT
   ========================================================= */

body.single-product
.cme-proof-viewer-toolbar {
    row-gap: 0;

    margin-bottom: 7px;
    padding: 6px 7px;
}


/*
 * Slightly reduce the vertical footprint of the controls.
 */
body.single-product
.cme-proof-viewer-mode-button,
body.single-product
.cme-proof-viewer-tool-button {
    min-height: 29px;
}


body.single-product
.cme-proof-zoom-level {
    min-height: 29px;
}




/* =========================================================
   VIEW ZOOM — SLIDER + EDITABLE %
   ========================================================= */

body.single-product
.cme-proof-view-zoom-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    flex: 0 0 auto;
}


/* Slider */

body.single-product
.cme-proof-view-zoom-slider {
    width: 105px;
    height: 18px;

    margin: 0;
    padding: 0;

    cursor: pointer;

    accent-color: #6775da;
}


/* Percentage field */

body.single-product
.cme-proof-view-zoom-input-wrap {
    position: relative;

    display: inline-flex;
    align-items: center;

    width: 56px;
    min-width: 56px;
}


/*
 * Override the old static zoom-level styling.
 */
body.single-product
.cme-proof-view-zoom-input {
    width: 100%;
    min-width: 0;
    height: 30px;

    margin: 0;
    padding:
        4px 18px
        4px 6px;

    border:
        1px solid #d2d7d9;
    border-radius: 6px;

    background: #ffffff;
    color: #30373a;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    text-align: right;

    outline: none;

    box-sizing: border-box;
}


/* Remove browser number arrows */

body.single-product
.cme-proof-view-zoom-input::-webkit-inner-spin-button,
body.single-product
.cme-proof-view-zoom-input::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


body.single-product
.cme-proof-view-zoom-input {
    -moz-appearance: textfield;
}


/* % suffix */

body.single-product
.cme-proof-view-zoom-percent {
    position: absolute;

    right: 7px;

    top: 50%;

    color: #697277;

    font-size: 9px;
    font-weight: 700;

    pointer-events: none;

    transform:
        translateY(-50%);
}


/* Focus */

body.single-product
.cme-proof-view-zoom-input:focus {
    border-color: #6775da;

    box-shadow:
        0 0 0 2px
        rgba(103, 117, 218, 0.12);
}


/* Middle mouse pan cursor */

body.single-product
.cme-proof-viewer-canvas--dragging {
    cursor: grabbing;
}











/* =========================================================
   BLEED / SAFE AREA — CUSTOMER VISUAL REVIEW
   ========================================================= */

body.single-product
.cme-proof-viewer-bleed-safe-area.cme-proof-viewer-visual-review {
    position: relative;

    display: grid !important;

    grid-template-columns:
        22px
        minmax(0, 1fr);

    column-gap: 9px;

    width: 100%;

    margin: 0 !important;
    padding: 12px !important;

    border: 0 !important;
    border-bottom:
        1px solid #edf0f2 !important;

    background: #f7f9ff;

    box-sizing: border-box;

    cursor: default;
}


/*
 * Existing first symbol is NOT a pass indicator.
 */
body.single-product
.cme-proof-viewer-bleed-safe-area.cme-proof-viewer-visual-review
> span:first-child {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin-top: 1px;

    border: 1px solid #8190df;
    border-radius: 50%;

    background: #ffffff;
    color: #6574d7;

    font-size: 0;
}


/* Neutral information icon */
body.single-product
.cme-proof-viewer-bleed-safe-area.cme-proof-viewer-visual-review
> span:first-child::after {
    content: "i";

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}


/* Always show the explanatory text */
body.single-product
.cme-proof-viewer-bleed-safe-area.cme-proof-viewer-visual-review
p {
    display: block !important;

    margin-top: 4px;

    color: #687176;

    
    
}


/* No accordion arrow */
body.single-product
.cme-proof-viewer-bleed-safe-area.cme-proof-viewer-visual-review
.cme-proof-accordion-chevron {
    display: none !important;
}


/* =========================================================
   PROOF VIEWER — READABILITY PASS
   Increase supporting text without increasing panel bulk.
   ========================================================= */


/* Toolbar information */
body.single-product
.cme-proof-viewer-mode-help {
    font-size: 10.5px;
    line-height: 1.35;
}


/* Sidebar subtitle */
body.single-product
.cme-proof-viewer-sidebar-heading
.cme-proof-viewer-subtitle {
    font-size: 11px;
    line-height: 1.4;
}


/* Visual-review explanation */
body.single-product
.cme-proof-viewer-bleed-safe-area.cme-proof-viewer-visual-review
p {
    font-size: 11px;
    line-height: 1.4;
}


/* Expanded proof-check details */
body.single-product
.cme-proof-viewer-artwork-size-details,
body.single-product
.cme-proof-viewer-color-mode-value,
body.single-product
.cme-proof-viewer-color-mode-message,
body.single-product
.cme-proof-viewer-font-value,
body.single-product
.cme-proof-viewer-font-message,
body.single-product
.cme-proof-viewer-spot-colors-value,
body.single-product
.cme-proof-viewer-spot-colors-message {
    font-size: 11px;
    line-height: 1.4;
}


/* Artwork Quality expanded details */
body.single-product
.cme-proof-viewer-ppi-value,
body.single-product
.cme-proof-viewer-ppi-message {
    font-size: 11px;
    line-height: 1.4;
}


/* Approval statement */
body.single-product
.cme-proof-viewer-confirm-toggle {
    font-size: 11px;
    line-height: 1.4;
}










body.single-product
.cme-proof-viewer-bleed-coverage-value,
body.single-product
.cme-proof-viewer-bleed-coverage-message {
    font-size: 11px;
    line-height: 1.4;
}

body.single-product
.cme-proof-viewer-bleed-coverage--warning {
    background: #fff8e6;
    border-left-color: #e2a400;
}

body.single-product
.cme-proof-viewer-bleed-coverage--warning
> span:first-child {
    
}







/* Hide Bleed Coverage details when its accordion row is collapsed */
body.single-product
.cme-proof-viewer-bleed-coverage.cme-proof-accordion-row:not(.is-open)
.cme-proof-viewer-bleed-coverage-value,

body.single-product
.cme-proof-viewer-bleed-coverage.cme-proof-accordion-row:not(.is-open)
.cme-proof-viewer-bleed-coverage-message {
    display: none !important;
}



/* =========================================================
   BLEED COVERAGE STATUS ICON
   ========================================================= */

/*
 * Passing bleed coverage.
 */
body.single-product
.cme-proof-viewer-bleed-coverage:not(
    .cme-proof-viewer-bleed-coverage--warning
)
> span:first-child {
    color: #16855b;
}


/*
 * Failed / questionable bleed coverage.
 *
 * Do not show the normal green check.
 */
body.single-product
.cme-proof-viewer-bleed-coverage--warning
> span:first-child {
    position: relative;
    color: transparent !important;
}


/*
 * Replace it with the same warning-style exclamation
 * used conceptually by the other warning checks.
 */
body.single-product
.cme-proof-viewer-bleed-coverage--warning
> span:first-child::after {
    content: "!";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #9a6700;
    font-weight: 800;
}











































/* =========================================================
   FINAL MOBILE PROOF VIEWER
   Toolbar -> Proof -> Details / Proof Checks
   ========================================================= */

@media screen and (max-width: 900px) {

    /* Full-screen scrolling viewer */
    body.single-product .cme-proof-viewer {
        padding: 0 !important;

        align-items: flex-start;
        justify-content: flex-start;

        overflow: hidden;
    }

    body.single-product .cme-proof-viewer.is-open {
        display: block;
    }


    /* The dialog itself is the mobile scroll container */
    body.single-product .cme-proof-viewer-dialog {
        display: block;

        width: 100%;
        max-width: none;

        height: 100dvh;
        max-height: 100dvh;

        margin: 0;

        border-radius: 0;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        box-sizing: border-box;
    }


    /* Desktop grid becomes a normal vertical document */
    body.single-product .cme-proof-viewer-body {
        display: block !important;

        width: 100%;

        height: auto !important;
        min-height: 0;

        overflow: visible !important;
    }


    /* =====================================================
       TOP: TOOLBAR + PROOF
       ===================================================== */

    body.single-product
    .cme-proof-viewer-preview-column {
        display: flex !important;
        flex-direction: column;

        width: 100%;

        /*
         * IMPORTANT:
         * override the desktop height:100%.
         */
        height: auto !important;
        min-height: 0 !important;

        padding: 10px;

        background: #edf0f2;

        box-sizing: border-box;
    }


    /* Toolbar */
    body.single-product
    .cme-proof-viewer-toolbar {
        position: relative;

        display: flex !important;
        flex-direction: column;
        align-items: stretch;

        flex: 0 0 auto;

        width: 100%;

        gap: 7px;

        margin: 0 0 10px;
        padding: 8px;

        box-sizing: border-box;
    }


    /* Art Adjust / Advanced Design */
    body.single-product
    .cme-proof-viewer-mode-switch {
        display: grid;

        grid-template-columns: 1fr 1fr;

        width: 100%;
    }

    body.single-product
    .cme-proof-viewer-mode-button {
        width: 100%;
        min-height: 36px;

        font-size: 11px;
    }


    /* Help box */
    body.single-product
    .cme-proof-viewer-mode-help {
        position: relative;

        display: block;

        width: 100%;
        max-width: none;

        margin: 0;

        padding: 8px 9px 8px 32px;

        font-size: 10.5px;
        line-height: 1.35;

        box-sizing: border-box;
    }


    /* Zoom / Fit controls */
    body.single-product
    .cme-proof-viewer-zoom-controls {
        display: flex;

        flex-wrap: wrap;

        align-items: center;
        justify-content: center;

        width: 100%;

        gap: 6px;
    }


    body.single-product
    .cme-proof-view-zoom-control {
        display: flex;

        flex: 1 1 100%;

        align-items: center;
        justify-content: center;

        width: 100%;
    }


    body.single-product
    .cme-proof-view-zoom-slider {
        flex: 1 1 auto;

        width: auto;
        max-width: 220px;
    }


    body.single-product
    .cme-proof-viewer-tool-button {
        flex: 1 1 auto;

        min-height: 34px;

        padding: 7px 9px;

        font-size: 10px;
    }


    /* =====================================================
       PROOF
       This MUST remain a real flex item.
       ===================================================== */

    body.single-product
    .cme-proof-viewer-canvas {
        position: relative !important;

        display: block !important;

        flex: 0 0 460px !important;

        width: 100% !important;
        height: 460px !important;
        min-height: 460px !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden;

        border: 1px solid #dde2e4;
        border-radius: 8px;

        box-sizing: border-box;
    }


    /*
     * Stage fills the explicit 460px canvas.
     */
    body.single-product
    .cme-proof-viewer-image-stage {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        padding: 0 !important;

        overflow: hidden;
    }


    /*
     * Do NOT change proof-layer positioning.
     * Existing JS controls its dimensions/transform.
     */
    body.single-product
    .cme-proof-viewer-proof-layer {
        display: block;
    }


    /* Guide note directly beneath proof */
    body.single-product
    .cme-proof-viewer-overlay-note {
        display: block;

        flex: 0 0 auto;

        margin: 8px 4px 2px;

        font-size: 10px;
        line-height: 1.35;
    }


    /* =====================================================
       BOTTOM: DETAILS / PROOF CHECKS
       ===================================================== */

    body.single-product
    .cme-proof-viewer-details {
        position: relative;

        display: block;

        width: 100%;

        height: auto !important;
        min-height: 0 !important;

        padding: 16px;

        /*
         * Desktop sidebar scroll MUST be disabled.
         * The entire dialog scrolls instead.
         */
        overflow: visible !important;

        border-top: 1px solid #d9dedd;
        border-left: 0;

        background: #f7f8fa;

        box-sizing: border-box;
    }


    body.single-product
    .cme-proof-viewer-sidebar-heading {
        margin-bottom: 14px;

        padding-right: 44px;
    }


    body.single-product
    .cme-proof-viewer-sidebar-heading h2 {
        font-size: 20px;
    }


    /* Page navigation */
    body.single-product
    .cme-proof-viewer-sidebar-navigation {
        grid-template-columns:
            1fr
            auto
            1fr;

        gap: 8px;
    }


    body.single-product
    .cme-proof-viewer-sidebar-navigation
    .cme-proof-viewer-button {
        width: 100%;

        min-height: 36px;
    }


    /* Proof checks */
    body.single-product
    .cme-proof-viewer-checks {
        margin: 18px 0;
    }


    body.single-product
    .cme-proof-viewer-checks h3 {
        font-size: 17px;
    }


    body.single-product
    .cme-proof-accordion-row strong {
        font-size: 12px;
    }


    body.single-product
    .cme-proof-viewer-artwork-size-details,
    body.single-product
    .cme-proof-viewer-color-mode-value,
    body.single-product
    .cme-proof-viewer-color-mode-message,
    body.single-product
    .cme-proof-viewer-font-value,
    body.single-product
    .cme-proof-viewer-font-message,
    body.single-product
    .cme-proof-viewer-spot-colors-value,
    body.single-product
    .cme-proof-viewer-spot-colors-message,
    body.single-product
    .cme-proof-viewer-bleed-coverage-value,
    body.single-product
    .cme-proof-viewer-bleed-coverage-message,
    body.single-product
    .cme-proof-viewer-ppi-value,
    body.single-product
    .cme-proof-viewer-ppi-message {
        font-size: 12px;

        line-height: 1.45;
    }


    body.single-product
    .cme-proof-viewer-bleed-safe-area.cme-proof-viewer-visual-review
    p {
        font-size: 12px;

        line-height: 1.45;
    }


    /* Approval */
    body.single-product
    .cme-proof-viewer-confirm-toggle {
        font-size: 12px;

        line-height: 1.45;
    }


    body.single-product
    .cme-proof-viewer-sidebar-actions {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    body.single-product
    .cme-proof-viewer-sidebar-actions
    .cme-proof-viewer-button {
        width: 100%;

        min-height: 42px;

        font-size: 12px;
    }


    /* Keep close button visible */
    body.single-product
    .cme-proof-viewer-header.cme-proof-viewer-header--floating {
        position: fixed;

        top: 0;
        right: 0;

        z-index: 1000;
    }


    body.single-product
    .cme-proof-viewer-header--floating
    .cme-proof-viewer-close {
        top: 10px;
        right: 10px;

        width: 38px;
        height: 38px;
    }
}





















/* =========================================================
   LAYERS PANEL — DRAG REORDER
   ========================================================= */

body.single-product
.cme-proof-layer-select {
    cursor: grab;
}

body.single-product
.cme-proof-layer-row.is-layer-dragging {
    opacity: 0.5;
}

body.single-product
.cme-proof-layer-row.is-layer-drop-before,
body.single-product
.cme-proof-layer-row.is-layer-drop-after {
    position: relative;
}

body.single-product
.cme-proof-layer-row.is-layer-drop-before::before {
    content: "";
    position: absolute;
    z-index: 20;
    top: -3px;
    left: 5px;
    right: 5px;
    height: 3px;
    border-radius: 3px;
    background: #6775da;
    pointer-events: none;
}

body.single-product
.cme-proof-layer-row.is-layer-drop-after::after {
    content: "";
    position: absolute;
    z-index: 20;
    bottom: -3px;
    left: 5px;
    right: 5px;
    height: 3px;
    border-radius: 3px;
    background: #6775da;
    pointer-events: none;
}

/* =========================================================
   LAYERS PANEL — DRAG REORDER
   ========================================================= */

body.single-product
.cme-proof-layer-select[draggable="true"] {
    cursor: grab;
    -webkit-user-drag: element;
    user-select: none;
}

body.single-product
.cme-proof-layer-select[draggable="true"]:active {
    cursor: grabbing;
}


/* Layer currently being dragged */
body.single-product
.cme-proof-layer-row.is-layer-dragging {
    opacity: 0.45;
}


/*
 * The target row needs to establish the positioning
 * context for the blue insertion line.
 */
body.single-product
.cme-proof-layer-row.is-layer-drop-before,
body.single-product
.cme-proof-layer-row.is-layer-drop-after {
    position: relative;
}


/* Drop ABOVE this layer */
body.single-product
.cme-proof-layer-row.is-layer-drop-before::before {
    content: "";

    position: absolute;
    z-index: 999;

    left: 4px;
    right: 4px;
    top: -3px;

    height: 8px;

    background: #2271b1;
    border-radius: 4px;

    pointer-events: none;
}


/* Drop BELOW this layer */
body.single-product
.cme-proof-layer-row.is-layer-drop-after::after {
    content: "";

    position: absolute;
    z-index: 999;

    left: 4px;
    right: 4px;
    bottom: -3px;

    height: 8px;

    background: #2271b1;
    border-radius: 4px;

    pointer-events: none;
}


.cme-proof-fit-screen:disabled,
.cme-proof-fit-template:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* Help link beside the proof viewer close button */
.cme-proof-viewer-help {
    position: absolute;
    top: 20px;
    right: 64px;
    z-index: 9999;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cme-proof-viewer-help:hover {
    text-decoration: underline;
}