/* ==========================================================
   ES CRAFTS DESIGN SPACE PRO
   ========================================================== */

.esdsp-toolbar,
.esdsp-toolbar *,
.esdsp-panel,
.esdsp-panel *,
.esdsp-actions,
.esdsp-actions * {
    box-sizing: border-box;
}


.esdsp-toolbar {

    width: 100%;

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

    gap: 7px;

    padding: 10px 12px;

    margin:
        0
        0
        12px;

    border:
        1px solid
        rgba(46,76,90,.12);

    border-radius: 14px;

    background:
        rgba(255,255,255,.93);

    box-shadow:
        0 9px 26px
        rgba(31,55,68,.07);

}


.esdsp-tool {

    min-height: 38px;

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

    gap: 5px;

    padding:
        7px
        11px;

    border:
        1px solid
        #d8e2e7;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #314a55;

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        .18s ease;

}


.esdsp-tool:hover {

    transform:
        translateY(-1px);

    border-color:
        #9eb6c3;

}


.esdsp-tool.active {

    border-color:
        #416fe5;

    color:
        #fff;

    background:
        #416fe5;

}


.esdsp-spacer {

    flex: 1 1 auto;

}


/* SAFE AREA */

.es-glass-stage {

    position: relative;

}


.esdsp-safe-area {

    position: absolute;

    z-index: 20;

    left: 50%;
    top: 44%;

    width: 38%;
    height: 30%;

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

    border:
        2px dashed
        rgba(
            111,
            205,
            250,
            .78
        );

    border-radius:
        16px;

    background:
        rgba(
            80,
            180,
            230,
            .035
        );

    pointer-events: none;

    opacity: 0;

    transition:
        opacity .2s ease;

}


.esdsp-safe-area.show {

    opacity: 1;

}


.esdsp-safe-area span {

    position: absolute;

    left: 7px;
    top: 7px;

    padding:
        3px
        7px;

    border-radius:
        999px;

    background:
        rgba(
            31,
            52,
            61,
            .86
        );

    color: #fff;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .04em;

}


/* CANVAS TRANSFORM */

#esDesignCanvas {

    transform-origin:
        50%
        55%;

    transition:
        transform
        .16s ease;

}


.esdsp-rotate-mode {

    cursor:
        ew-resize;

}


/* STATUS */

.esdsp-statusbar {

    width: 100%;

    display: grid;

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

    gap: 8px;

    margin-top: 10px;

}


.esdsp-status {

    padding:
        9px
        11px;

    border:
        1px solid
        #dce5e9;

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            .93
        );

    color:
        #597079;

    font-size:
        12px;

}


.esdsp-status strong {

    color:
        #29434e;

}


.esdsp-good {

    color:
        #248259;

}


.esdsp-warning {

    color:
        #be7415;

}


/* MAIN ACTIONS */

.esdsp-actions {

    width: 100%;

    display: grid;

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

    gap: 8px;

    margin-top: 10px;

}


.esdsp-action {

    min-height: 43px;

    padding:
        9px
        12px;

    border: 0;

    border-radius:
        10px;

    background:
        #314b56;

    color: #fff;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform
        .17s ease,
        opacity
        .17s ease;

}


.esdsp-action:hover:not(:disabled) {

    transform:
        translateY(-1px);

}


.esdsp-action.secondary {

    color:
        #324d58;

    background:
        #edf3f6;

}


.esdsp-action:disabled {

    opacity: .45;

    cursor:
        not-allowed;

}


/* SIDE PANEL */

.esdsp-panel {

    position: fixed;

    z-index:
        999999;

    top: 0;
    right: 0;

    width:
        min(
            400px,
            94vw
        );

    height:
        100vh;

    padding:
        22px;

    overflow-y: auto;

    background:
        #fff;

    box-shadow:
        -22px
        0
        60px
        rgba(
            17,
            39,
            50,
            .19
        );

    transform:
        translateX(
            105%
        );

    transition:
        transform
        .27s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}


.esdsp-panel.open {

    transform:
        translateX(0);

}


.esdsp-panel-head {

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

    gap: 15px;

    margin-bottom:
        22px;

}


.esdsp-panel-head h3 {

    margin: 0;

    color:
        #263f4a;

}


.esdsp-close {

    width:
        36px;

    height:
        36px;

    padding: 0;

    border: 0;

    border-radius:
        50%;

    background:
        #edf2f5;

    color:
        #324a55;

    font-size:
        21px;

    cursor:
        pointer;

}


.esdsp-field {

    margin-bottom:
        17px;

}


.esdsp-field > label {

    display: block;

    margin-bottom:
        6px;

    color:
        #405861;

    font-size:
        12px;

    font-weight:
        700;

}


.esdsp-field input[type="text"],
.esdsp-field select,
.esdsp-field textarea {

    width: 100%;

    padding:
        10px
        12px;

    border:
        1px solid
        #d6e1e6;

    border-radius:
        9px;

    background:
        #fff;

    color:
        #263f4a;

    font: inherit;

}


.esdsp-field input[type="range"] {

    width: 100%;

}


/* TEMPLATES */

.esdsp-template-grid {

    display: grid;

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

    gap: 9px;

}


.esdsp-template {

    min-height:
        84px;

    padding:
        12px;

    border:
        1px solid
        #dce5e9;

    border-radius:
        11px;

    background:
        #fafcfd;

    color:
        #3b535e;

    text-align: left;

    cursor:
        pointer;

}


.esdsp-template strong {

    display: block;

    margin-bottom:
        4px;

    color:
        #28424d;

}


/* LAYERS */

.esdsp-layer {

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap: 12px;

    padding:
        12px 0;

    border-bottom:
        1px solid
        #edf1f3;

}


/* BACKDROP */

.esdsp-backdrop {

    position: fixed;

    z-index:
        999998;

    inset: 0;

    background:
        rgba(
            13,
            27,
            34,
            .30
        );

    opacity: 0;

    visibility:
        hidden;

    transition:
        .2s ease;

}


.esdsp-backdrop.show {

    opacity: 1;

    visibility:
        visible;

}


/* TOAST */

.esdsp-toast {

    position: fixed;

    z-index:
        1000000;

    left: 50%;
    bottom: 24px;

    max-width:
        calc(
            100vw -
            30px
        );

    padding:
        11px
        18px;

    border-radius:
        999px;

    background:
        rgba(
            22,
            40,
            48,
            .95
        );

    color: #fff;

    font-size:
        13px;

    font-weight:
        600;

    opacity: 0;

    pointer-events:
        none;

    transform:
        translate(
            -50%,
            20px
        );

    transition:
        .2s ease;

}


.esdsp-toast.show {

    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );

}


/* TRACKER */

.esdsp-tracker {

    margin-top:
        15px;

    padding:
        14px;

    border:
        1px solid
        #dce5e9;

    border-radius:
        12px;

    background:
        #f8fbfc;

}


.esdsp-reference {

    color:
        #274550;

    font-weight:
        800;

}


@media (
    max-width:
    700px
) {

    .esdsp-statusbar,
    .esdsp-actions {

        grid-template-columns:
            1fr;

    }


    .esdsp-toolbar {

        gap: 5px;

    }


    .esdsp-tool {

        padding:
            6px
            8px;

        font-size:
            11px;

    }


    .esdsp-template-grid {

        grid-template-columns:
            1fr;

    }

}


/* Only Design Size remains */
.esdsp-statusbar-single {
    grid-template-columns: 1fr !important;
}

/*
 * Rotation is now rendered internally.
 * Never perspective-skew the complete canvas.
 */
#esDesignCanvas {
    transform-origin: 50% 50% !important;
}


/* ==========================================================
   ES CRAFTS - REMOVE VINYL SUITABILITY DISPLAY
   ========================================================== */

#esdspSuitability,
.esdsp-suitability,
.es-vinyl-suitability,
[data-esdsp="suitability"] {
    display: none !important;
}



/* ==========================================================
   RESTORED PRODUCT GROUPS
   ========================================================== */

.es-product-master-restored {

    width: 100%;

}


.es-product-restored-section {

    margin-bottom:
        12px;

    border:
        1px solid #dbe4eb;

    border-radius:
        13px;

    overflow:
        hidden;

    background:
        #fff;

}


.es-product-restored-heading {

    width:
        100%;

    min-height:
        67px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        13px 15px;

    border:
        0;

    background:
        #f8fafe;

    text-align:
        left;

    cursor:
        pointer;

}


.es-product-restored-heading strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #1237a7;

    font-size:
        15px;

}


.es-product-restored-heading small {

    display:
        block;

    color:
        #71808a;

    font-size:
        10px;

}


.es-product-restored-arrow {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #173eb9;

    color:
        #fff;

    font-size:
        11px;

    transition:
        transform .25s ease;

}


.es-product-restored-heading.is-open
.es-product-restored-arrow {

    transform:
        rotate(180deg);

}


.es-product-restored-content {

    max-height:
        5000px;

    padding:
        12px;

    opacity:
        1;

    overflow:
        hidden;

    transition:
        max-height .35s ease,
        opacity .2s ease,
        padding .25s ease;

}


.es-product-restored-content.is-collapsed {

    max-height:
        0;

    padding-top:
        0;

    padding-bottom:
        0;

    opacity:
        0;

    pointer-events:
        none;

}


.es-restored-clothing-grid {

    display:
        grid;

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

    gap:
        8px;

}


.es-restored-clothing-item {

    min-height:
        96px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        9px;

    border:
        1px solid #d8e1eb;

    border-radius:
        10px;

    background:
        #fafbfe;

    color:
        #1237a7;

    cursor:
        pointer;

}


.es-restored-clothing-item span {

    font-size:
        25px;

}


.es-restored-clothing-item strong {

    font-size:
        10px;

}


.es-restored-clothing-item.active {

    border:
        2px solid #173ec1;

    background:
        #f2f5ff;

}


.es-restored-clothing-controls {

    display:
        grid;

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

    gap:
        9px;

    margin-top:
        12px;

    padding:
        12px;

    border-radius:
        10px;

    background:
        #f5f8fb;

}


.es-restored-clothing-controls label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #405761;

    font-size:
        10px;

    font-weight:
        700;

}


.es-restored-clothing-controls select {

    width:
        100%;

    min-height:
        40px;

    padding:
        7px 9px;

    border:
        1px solid #d5dfe5;

    border-radius:
        7px;

    background:
        #fff;

}


.es-restored-text-colour {

    grid-column:
        1 / -1;

}


@media(max-width:650px) {

    .es-restored-clothing-grid {

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

    }


    .es-restored-clothing-controls {

        grid-template-columns:
            1fr;

    }

}



/* ==========================================================
   CLOTHING MODE - IMAGE UPLOAD DISABLED
   ========================================================== */

.es-upload-area.es-upload-disabled {

    position: relative;

    opacity: .38;

    filter: grayscale(1);

    pointer-events: none;

}


.es-upload-area.es-upload-disabled label {

    cursor: not-allowed !important;

}


.es-upload-disabled-note {

    margin-top: 8px;

    padding:
        7px 9px;

    border-radius:
        7px;

    background:
        rgba(70,80,90,.08);

    color:
        #6e7880;

    font-size:
        10px;

    font-weight:
        600;

}


/* Remove Vinyl suitability completely */
#esdspSuitability,
.esdsp-status:has(#esdspSuitability) {

    display: none !important;

}



/* ==========================================================
   OTHER PERSONALISED ITEMS
   ========================================================== */

.es-other-items-grid {

    display:
        grid;

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

    gap:
        9px;

}


.es-other-item {

    min-height:
        115px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    padding:
        12px 8px;

    border:
        1px solid #d8e1eb;

    border-radius:
        11px;

    background:
        #fafbfe;

    color:
        #1237a7;

    cursor:
        pointer;

    transition:
        transform .17s ease,
        border-color .17s ease,
        background .17s ease;

}


.es-other-item:hover {

    transform:
        translateY(-1px);

    border-color:
        #2749c4;

}


.es-other-item.active {

    border:
        2px solid #173ec1;

    background:
        #f2f5ff;

}


.es-other-item-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    color:
        #44515a;

    font-size:
        27px;

}


.es-slate-icon {

    color:
        #2a2c2e;

}


.es-other-item strong {

    color:
        #1237a7;

    font-size:
        11px;

}


.es-other-item small {

    color:
        #75828a;

    font-size:
        9px;

    text-align:
        center;

}


@media(max-width:600px) {

    .es-other-items-grid {

        grid-template-columns:
            1fr;

    }

}



/* ==========================================================
   ES CRAFTS - BLUE DROPDOWN SHIMMER
   ========================================================== */

/*
 * Main large dropdown headings:
 * keep blue on hover and add moving shimmer.
 */

.es-product-restored-heading,
.es-product-subheading,
.es-safe-product-heading,
.es-product-group-heading-v3 {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #1237a7 0%,
            #173eb9 50%,
            #1237a7 100%
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid
        rgba(255,255,255,.12);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


/*
 * Keep all text white on blue dropdowns.
 */

.es-product-restored-heading strong,
.es-product-restored-heading small,
.es-product-subheading strong,
.es-product-subheading small,
.es-safe-product-heading strong,
.es-safe-product-heading small,
.es-product-group-heading-v3 strong,
.es-product-group-heading-v3 small {

    position: relative;

    z-index: 2;

    color:
        #ffffff !important;

}


.es-product-restored-heading small,
.es-product-subheading small,
.es-safe-product-heading small,
.es-product-group-heading-v3 small {

    color:
        rgba(255,255,255,.78) !important;

}


/*
 * Shimmer layer.
 */

.es-product-restored-heading::before,
.es-product-subheading::before,
.es-safe-product-heading::before,
.es-product-group-heading-v3::before {

    content: "";

    position: absolute;

    z-index: 1;

    top: 0;
    bottom: 0;

    left: -45%;

    width: 34%;

    transform:
        skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(255,255,255,.11),
            rgba(120,180,255,.34),
            rgba(255,255,255,.15),
            rgba(255,255,255,0)
        );

    pointer-events: none;

}


/*
 * Blue shimmer on hover.
 */

.es-product-restored-heading:hover,
.es-product-subheading:hover,
.es-safe-product-heading:hover,
.es-product-group-heading-v3:hover {

    background:
        linear-gradient(
            135deg,
            #0f319d 0%,
            #1949d0 50%,
            #1237a7 100%
        ) !important;

    color:
        #ffffff !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 22px
        rgba(18,55,167,.24);

}


.es-product-restored-heading:hover::before,
.es-product-subheading:hover::before,
.es-safe-product-heading:hover::before,
.es-product-group-heading-v3:hover::before {

    animation:
        esBlueDropdownShimmer
        .85s
        ease-out
        forwards;

}


@keyframes esBlueDropdownShimmer {

    from {
        left: -45%;
    }

    to {
        left: 118%;
    }

}


/*
 * Arrow remains visible and slightly brighter.
 */

.es-product-restored-arrow,
.es-product-subarrow,
.es-safe-product-arrow,
.es-product-group-arrow-v3 {

    position: relative;

    z-index: 3;

    background:
        rgba(255,255,255,.13) !important;

    border:
        1px solid
        rgba(255,255,255,.25);

    color:
        #ffffff !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.04);

}


/*
 * Stop older CSS from making buttons white.
 */

.es-product-restored-heading:hover *,
.es-product-subheading:hover *,
.es-safe-product-heading:hover *,
.es-product-group-heading-v3:hover * {

    color:
        #ffffff !important;

}



/* ==========================================================
   ES CRAFTS - FORCE PRO UI VISIBLE
   ========================================================== */

/*
 * Restore the preview toolbar / tools if an old later rule
 * accidentally hid them.
 */

.esdsp-toolbar,
.esdsp-tools,
.esdsp-actions,
.esdsp-toolbar-row,
.esdsp-tool-row,
.esdsp-preview-tools,
.esdsp-bottom-actions {

    visibility: visible !important;

    opacity: 1 !important;

}


/*
 * Do NOT broadly hide status containers.
 * The Vinyl row will be dealt with separately once the
 * complete editor is confirmed working.
 */



/* ==========================================================
   ES CRAFTS - SURPRISE ME
   ========================================================== */

.es-surprise-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        38px;

    padding:
        8px 13px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(91,55,180,.28);

    border-radius:
        9px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #5638bb,
            #754ee0,
            #4931aa
        );

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 5px 15px
        rgba(77,48,169,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.es-surprise-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(77,48,169,.28);

}


.es-surprise-button::before {

    content:
        "";

    position:
        absolute;

    top:
        -30%;

    bottom:
        -30%;

    left:
        -55%;

    width:
        35%;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

}


.es-surprise-button:hover::before {

    animation:
        esSurpriseShimmer
        .7s ease-out;

}


@keyframes esSurpriseShimmer {

    from {
        left: -55%;
    }

    to {
        left: 125%;
    }

}


.es-surprise-dice {

    font-size:
        16px;

}


/* ==========================================================
   MODAL
   ========================================================== */

.es-surprise-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        2147483000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}


.es-surprise-modal.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


.es-surprise-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(14,19,36,.62);

    backdrop-filter:
        blur(5px);

}


.es-surprise-card {

    position:
        relative;

    z-index:
        2;

    width:
        min(520px, 95vw);

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        28px;

    border:
        1px solid
        rgba(40,64,180,.13);

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.28);

}


.es-surprise-close {

    position:
        absolute;

    right:
        15px;

    top:
        15px;

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        #eef2fb;

    color:
        #314260;

    font-size:
        20px;

    cursor:
        pointer;

}


.es-surprise-title {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.es-surprise-title > span {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #5638bb,
            #7958e3
        );

    font-size:
        24px;

}


.es-surprise-title small {

    display:
        block;

    color:
        #6e7b91;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


.es-surprise-title h2 {

    margin:
        2px 0 0;

    color:
        #1537a6;

    font-size:
        25px;

}


.es-surprise-intro {

    margin:
        17px 0;

    color:
        #667085;

    font-size:
        13px;

    line-height:
        1.55;

}


/* ==========================================================
   TYPE OPTIONS
   ========================================================== */

.es-surprise-types {

    display:
        grid;

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

    gap:
        9px;

}


.es-surprise-types button {

    min-height:
        115px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    padding:
        10px;

    border:
        1px solid
        #dde4ef;

    border-radius:
        13px;

    background:
        #fafbfe;

    color:
        #1738aa;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;

}


.es-surprise-types button:hover {

    transform:
        translateY(-2px);

    border-color:
        #536fd1;

    box-shadow:
        0 7px 19px
        rgba(30,55,150,.10);

}


.es-surprise-types button.active {

    border:
        2px solid
        #5d44ca;

    background:
        #f4f1ff;

}


.es-surprise-types button > span {

    font-size:
        25px;

}


.es-surprise-types strong {

    font-size:
        11px;

}


.es-surprise-types small {

    color:
        #8290a0;

    font-size:
        9px;

}


/* ==========================================================
   RESULT
   ========================================================== */

.es-surprise-result {

    margin-top:
        16px;

    padding:
        18px;

    border:
        1px solid
        #dde4ef;

    border-radius:
        13px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #f8faff,
            #f3f5ff
        );

}


.es-surprise-result small {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #8190a3;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.es-surprise-result strong {

    color:
        #1738aa;

    font-size:
        16px;

    line-height:
        1.4;

}


/* ==========================================================
   AGAIN BUTTON
   ========================================================== */

.es-surprise-again {

    width:
        100%;

    min-height:
        45px;

    margin-top:
        11px;

    border:
        0;

    border-radius:
        11px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #5638bb,
            #7958e3
        );

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

}


.es-surprise-again:disabled {

    opacity:
        .4;

    cursor:
        not-allowed;

}


.es-surprise-tip {

    margin:
        11px 0 0;

    color:
        #8b96a5;

    font-size:
        10px;

    text-align:
        center;

}


@media(max-width:600px) {

    .es-surprise-types {

        grid-template-columns:
            1fr;

    }


    .es-surprise-types button {

        min-height:
            80px;

    }


    .es-surprise-card {

        padding:
            23px 17px;

    }

}



/* ==========================================================
   ES CRAFTS
   REMOVE LEGACY RECTANGULAR SAFE AREA

   The new safe area is drawn directly on the canvas and
   follows the selected product shape.

   This hides ONLY the old Design Space Pro HTML overlay.
   ========================================================== */

.esdsp-safe-area,
.esdsp-safe-area.show,
.esdsp-safe-area[data-product] {

    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

}