body.dp-fullwidth #primary, body.dp-fullwidth .ast-container,
    body.dp-fullwidth #content, body.dp-fullwidth .site-content,
    body.dp-fullwidth .entry-content, body.dp-fullwidth #main,
    body.dp-fullwidth .ast-article-single, body.dp-fullwidth .ast-article-post,
    body.dp-fullwidth .content-area {
        max-width: 100% !important; width: 100% !important;
        padding: 0 !important; margin: 0 !important;
    }
    body.dp-fullwidth #main { overflow-x: hidden; }
    body.dp-fullwidth header.entry-header > *:not(:last-child),
    body.dp-fullwidth header.entry-header,
    body.dp-fullwidth .woocommerce-breadcrumb,
    body.dp-fullwidth .product_title, body.dp-fullwidth .single-product .product .entry-title,
    body.dp-fullwidth .woocommerce-product-details__short-description,
    body.dp-fullwidth .woocommerce-tabs, body.dp-fullwidth .related.products,
    body.dp-fullwidth .upsells.products, body.dp-fullwidth .product-meta,
    body.dp-fullwidth .ast-single-related-posts-container {
        display: none !important;
    }
    body.dp-fullwidth .dp-main-product .uni-module-file_upload,
    body.dp-fullwidth .dp-main-product [class*="file_upload"],
    body.dp-fullwidth .dp-main-product [class*="max_file_upload"] {
        display: none !important;
    }

    /* Bumper sticker custom-size input layout fix (admin grid is squeezed) */
    body.dp-bumper-sticker .dp-main-product .uni-module-text_input {
        display: block !important;
        padding: 4px 0;
    }
    body.dp-bumper-sticker .dp-main-product .uni-row-content,
    body.dp-bumper-sticker .dp-main-product .uni-row-content-block {
        display: block !important;
    }
    body.dp-bumper-sticker .dp-main-product .uni-col-content,
    body.dp-bumper-sticker .dp-main-product .uni-col-content-block {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.dp-bumper-sticker .dp-main-product .uni-module-text_input input[type="text"],
    body.dp-bumper-sticker .dp-main-product .uni-module-text_input input[type="number"],
    body.dp-bumper-sticker .dp-main-product input[name^="uni_cpo_"][name*="width"]:not([name*="max_file"]),
    body.dp-bumper-sticker .dp-main-product input[name^="uni_cpo_"][name*="height"]:not([name*="max_file"]) {
        min-width: 100px !important;
        width: 100% !important;
        padding: 8px 10px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        background: #fff !important;
        font-size: 14px !important;
        height: auto !important;
        display: block !important;
        box-sizing: border-box !important;
        grid-area: auto !important;
    }
    /* Hide width/height wrappers when NOT custom (bumper sticker only) */
    body.dp-bumper-sticker.dp-not-custom .dp-main-product .uni-module-text_input:has(input[name*="width"]:not([name*="max_file"])),
    body.dp-bumper-sticker.dp-not-custom .dp-main-product .uni-module-text_input:has(input[name*="height"]:not([name*="max_file"])) {
        display: none !important;
    }

    /* Universal: width/height inputs full width within their column (sign products)
       Override admin's narrow column 2, but keep wrapper's admin display logic
       Floor/Vinyl/Bumper sticker overrides below take precedence */
    body.dp-fullwidth .dp-main-product .uni-module-text_input {
        grid-template-columns: 1fr !important;
    }
    body.dp-fullwidth .dp-main-product input[name^="uni_cpo_"][name*="width"]:not([name*="max_file"]),
    body.dp-fullwidth .dp-main-product input[name^="uni_cpo_"][name*="height"]:not([name*="max_file"]) {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        height: 40px !important;
        padding: 8px 10px !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        background: #fff !important;
        font-size: 14px !important;
        grid-area: auto !important;
    }

    /* Sticker sheet — hide INTEGER input + custom-qty-input by default
       (Wrapper .uni-module-text_input is NOT hidden because it contains the dropdown UI) */
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product input[name="uni_cpo_sticker_quantity"][type="number"],
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product input[name="uni_cpo_sticker_quantity"][type="text"],
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .custom-qty-dropdown input.custom-qty-input,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product input.custom-qty-input {
        display: none !important;
    }
    /* Sticker sheet — quantity dropdown layout: chevron on top, custom input below */
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .custom-qty-dropdown {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .custom-qty-dropdown .custom-uni-select-selected,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .custom-qty-dropdown > div:first-child {
        order: 1 !important;
    }
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .custom-qty-dropdown .custom-uni-list {
        order: 2 !important;
    }
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .custom-qty-dropdown input.custom-qty-input {
        order: 3 !important;
    }

    /* Sticker sheet — step-and-repeat stickers inside the sheet box */
    .dp-sticker-cell {
        position: absolute;
        background: #f9f9f9; border: 1px dashed #aaa;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden; box-sizing: border-box;
    }
    .dp-sticker-cell.shape-rectangle { border-radius: 0; }
    .dp-sticker-cell.shape-round { border-radius: 50%; }
    .dp-sticker-cell.shape-custom_cut {
        /* Custom cut: no visual line — same as rectangle (customer provides cut file PDF) */
        border-radius: 0;
    }
    .dp-sticker-cell.has-image {
        background: transparent; border-color: #888;
    }
    .dp-sticker-cell.has-image img {
        width: 100%; height: 100%; object-fit: contain; display: block;
    }
    /* Sticker sheet: "fit" button → stretch (fill cell, ignore aspect ratio) */
    body.dp-sticker-sheet .dp-sticker-cell.has-image.fit-stretch img {
        object-fit: fill !important;
    }
    /* Sticker sheet: "center" mode → preserve aspect ratio (default contain) */
    body.dp-sticker-sheet .dp-sticker-cell.has-image:not(.fit-stretch) img {
        object-fit: contain !important;
    }
    .dp-sticker-cell.shape-round.has-image img {
        object-fit: cover;
    }
    /* Sticker sheet round shape — fit mode also stretches inside square cell */
    body.dp-sticker-sheet .dp-sticker-cell.shape-round.has-image.fit-stretch img {
        object-fit: fill !important;
    }

    /* Sticker sheet — unify all right-panel form boxes (input + select) */
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-row-content,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-row-content-block {
        display: block !important;
    }
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-col-content,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-col-content-block {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-module-text_input,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-module-select {
        display: block !important;
        width: 100% !important;
    }
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-module-text_input input[type="text"],
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-module-text_input input[type="number"],
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product input[name^="uni_cpo_"]:not([type="file"]):not([name*="max_file"]) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        padding: 8px 10px !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        background: #fff !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        grid-area: auto !important;
        display: block !important;
    }
    /* Select: width only — DO NOT force display (lets Uni CPO custom UI hide native select) */
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-module-select select,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product select[name^="uni_cpo_"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        box-sizing: border-box !important;
    }
    /* Uni CPO custom select UI - force full width too */
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-cpo-select-block,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .custom-select,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-cpo-selectbox-block,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .uni-cpo-select-selected,
    body.dp-fullwidth.dp-sticker-sheet .dp-main-product .selectboxit-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        box-sizing: border-box !important;
    }

    /* Paper products: make the quantity dropdown fill its grid column so it
       matches the width of Size/Folding/Paper Type — WITHOUT collapsing the
       label|field 2-column layout (don't push the field to its own row). */
    body.dp-fullwidth.dp-paper .dp-main-product .custom-uni-dropdown,
    body.dp-fullwidth.dp-paper .dp-main-product .custom-qty-dropdown,
    body.dp-fullwidth.dp-paper .dp-main-product .custom-uni-selected,
    body.dp-fullwidth.dp-paper .dp-main-product .custom-uni-list,
    body.dp-fullwidth.dp-paper .dp-main-product .uni-module-select,
    body.dp-fullwidth.dp-paper .dp-main-product .uni-cpo-select-block,
    body.dp-fullwidth.dp-paper .dp-main-product .custom-select,
    body.dp-fullwidth.dp-paper .dp-main-product .selectboxit-container,
    body.dp-fullwidth.dp-paper .dp-main-product .uni-module-select select,
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .custom-uni-dropdown,
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .custom-qty-dropdown,
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .custom-uni-selected,
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .custom-uni-list,
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .custom-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* v27: widen the FIELD column itself (user direction) — the module rows are
       label|field grids; a compact fixed label (119px) hands the rest of the
       summary width to the field, so the closed select AND its dropdown list
       are wide enough for the paper cards without popping out of the panel
       (the v26 leftward pop-out got clipped by the summary's overflow). */
    body.dp-fullwidth .dp-main-product .summary .uni-module-select,
    body.dp-fullwidth .dp-main-product .entry-summary .uni-module-select,
    body.dp-fullwidth .dp-main-product .summary .uni-module-text_input:not(.uni-module-file_upload),
    body.dp-fullwidth .dp-main-product .entry-summary .uni-module-text_input:not(.uni-module-file_upload) {
        grid-template-columns: 119px 1fr !important;
        column-gap: 10px !important;
        align-items: center;
    }
    /* v36: quantity row correct from FIRST PAINT — the v28 fix was JS-only
       (800ms interval), so the row visibly jumped into place on load. */
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) .uni-module:has(.custom-qty-dropdown),
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) .uni-module:has(.custom-uni-dropdown) {
        grid-template-columns: 119px 1fr !important;
    }
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) :is(.custom-qty-dropdown, .custom-uni-dropdown) {
        grid-column: 2 / -1 !important;
        justify-self: stretch !important;
        width: 100% !important;
    }
    /* v38: the swap itself was the remaining flash — the Custom Dropdown UI
       snippet builds the qty dropdown AFTER load, and until then the NATIVE
       quantity input showed at its narrow default width. Style the native
       input (and its module row) identically to the finished dropdown from
       first paint, so the swap is imperceptible. */
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) .uni-module:has(input[name*="quantity"]) {
        grid-template-columns: 119px 1fr !important;
    }
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) .uni-module input[name*="quantity"]:not([type="hidden"]) {
        grid-column: 2 / -1 !important;
        width: 100% !important; min-width: 0 !important; max-width: none !important;
        height: 34px !important; line-height: 32px !important;
        padding: 0 10px !important; box-sizing: border-box !important;
        border: 1px solid #ccc !important; background: #fff !important;
        font-size: 14px !important;
    }
    /* the list opens at the (now wider) field width, above later rows */
    body.dp-fullwidth .dp-main-product .summary .custom-uni-list,
    body.dp-fullwidth .dp-main-product .entry-summary .custom-uni-list {
        width: 100% !important; min-width: 0 !important;
        left: 0 !important; right: auto !important;
        z-index: 120 !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
    }
    /* The dropdown lives in column 2 of the wrapper grid. The wrapper's columns
       are (label ~262px | field ~50px) — label hogs the row. Rebalance so the
       field column gets the space, like the other options. */
    body.dp-fullwidth.dp-paper .dp-main-product .uni-module-text_input:has(.custom-qty-dropdown),
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .uni-module-text_input:has(.custom-qty-dropdown) {
        grid-template-columns: 160px 1fr !important;
    }
    body.dp-fullwidth.dp-paper .dp-main-product .custom-qty-dropdown,
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .custom-qty-dropdown {
        grid-column: 2 / -1 !important;
        justify-self: stretch !important;
    }
    /* Cut-to-Size / Roll Labels: the Quantity field stays a native <select>.
       Make ONLY that select full-width to match the other custom dropdowns,
       without touching the small Size (width/height) selects. */
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product select[name="uni_cpo_cts_quantity"],
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product select[name="uni_cpo_roll_quantity"],
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product select[name$="_quantity"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        box-sizing: border-box !important;
        padding: 0 12px !important;
        border: 1px solid #d4d4d8 !important;
        border-radius: 8px !important;
        background-color: #fff !important;
        font-size: 14px !important;
    }
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .uni-module-select:has(select[name$="_quantity"]),
    body.dp-fullwidth.dp-adhesive-roll .dp-main-product .uni-module-text_input:has(select[name$="_quantity"]) {
        grid-template-columns: 160px 1fr !important;
    }

    body.dp-fullwidth.dp-floor-sticker .dp-main-product .uni-module-select select,
    body.dp-fullwidth.dp-vinyl-sticker .dp-main-product .uni-module-select select {
        width: 110px !important;
        margin-left: auto !important;
        padding: 8px 10px !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        background: #fff !important;
        font-size: 14px !important;
        height: 40px !important;
        box-sizing: border-box !important;
    }
    body.dp-fullwidth.dp-floor-sticker .dp-main-product .uni-module-text_input,
    body.dp-fullwidth.dp-vinyl-sticker .dp-main-product .uni-module-text_input {
        display: block !important;
        padding: 4px 0 !important;
    }
    body.dp-fullwidth.dp-floor-sticker .dp-main-product .uni-module-text_input label,
    body.dp-fullwidth.dp-vinyl-sticker .dp-main-product .uni-module-text_input label {
        display: block !important;
        margin-bottom: 6px !important;
    }
    body.dp-fullwidth.dp-floor-sticker .dp-main-product .uni-module-text_input input[type="text"],
    body.dp-fullwidth.dp-floor-sticker .dp-main-product .uni-module-text_input input[type="number"],
    body.dp-fullwidth.dp-floor-sticker .dp-main-product input[name^="uni_cpo_"][name*="width"]:not([name*="max_file"]),
    body.dp-fullwidth.dp-floor-sticker .dp-main-product input[name^="uni_cpo_"][name*="height"]:not([name*="max_file"]),
    body.dp-fullwidth.dp-vinyl-sticker .dp-main-product .uni-module-text_input input[type="text"],
    body.dp-fullwidth.dp-vinyl-sticker .dp-main-product .uni-module-text_input input[type="number"],
    body.dp-fullwidth.dp-vinyl-sticker .dp-main-product input[name^="uni_cpo_"][name*="width"]:not([name*="max_file"]),
    body.dp-fullwidth.dp-vinyl-sticker .dp-main-product input[name^="uni_cpo_"][name*="height"]:not([name*="max_file"]) {
        display: block !important;
        width: 110px !important;
        min-width: 0 !important;
        max-width: 110px !important;
        padding: 8px 10px !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        background: #fff !important;
        font-size: 14px !important;
        height: 40px !important;
        box-sizing: border-box !important;
        grid-area: auto !important;
    }

    .dp-main-product, body.dp-fullwidth .dp-main-product,
    body.dp-fullwidth .single-product .product.dp-main-product,
    body.dp-fullwidth.single-product div.product.dp-main-product {
        display: grid !important;
        grid-template-columns: 290px 1fr 360px !important;
        gap: 15px !important;
        padding: 15px !important;
        align-items: stretch !important;
        max-width: 100% !important; width: 100% !important;
        background: #e8eaed !important;
        height: calc(100vh - 70px) !important;
        max-height: calc(100vh - 70px) !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    .dp-main-product .woocommerce-product-gallery { display: none !important; }
    .dp-main-product .summary, .dp-main-product .entry-summary {
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important; padding: 12px 14px 22px !important;   /* v35: tighter */
        background: #fff; border-radius: 4px;
        grid-column: 3 / 4; order: 3; float: none !important;
        max-height: 100% !important; overflow-y: auto !important;
    }
    /* v30/v35: compact the option rows so options + price + ATC + delivery
       line all fit one viewport without scrolling. */
    body.dp-fullwidth .dp-main-product .summary .uni-module,
    body.dp-fullwidth .dp-main-product .entry-summary .uni-module {
        margin-bottom: 6px !important;
        padding-top: 0 !important; padding-bottom: 0 !important;
    }
    body.dp-fullwidth .dp-main-product .summary .entry-title,
    body.dp-fullwidth .dp-main-product .entry-summary .entry-title { margin: 0 0 6px !important; font-size: 24px !important; }
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) :is(.posted_in, .product_meta) { margin: 0 0 4px !important; }
    body.dp-fullwidth #moved-price { margin-top: 6px !important; }
    /* v35: shorter fields + labels sit tighter */
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) :is(.custom-uni-select-selected, select.js-uni-cpo-field, .uni-module-select select, .uni-module input[type="text"], .uni-module input[type="number"]) {
        height: 34px !important; line-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important;
    }
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) .uni-module label {
        margin-bottom: 0 !important; line-height: 1.2 !important;
    }
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) form.cart { margin-bottom: 0 !important; }
    body.dp-fullwidth .dp-main-product :is(.summary, .entry-summary) .single_add_to_cart_button { margin-top: 8px !important; padding-top: 11px !important; padding-bottom: 11px !important; }

    /* SIDE PANEL */
    #dp-side-panel {
        grid-column: 1 / 2; order: 1;
        background: #fff; border: 1px solid #ddd;
        border-radius: 4px; padding: 12px;
        display: flex; flex-direction: column; gap: 10px;
        max-height: 100%; overflow-y: auto;
    }

    #dp-items-container {
        display: flex; flex-direction: column; gap: 12px;
    }

    /* ITEM — no box, just spacing */
    .dp-item {
        display: flex; flex-direction: column; gap: 8px;
        padding: 8px;
        margin: 0 -8px;
        border-radius: 0;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    .dp-item.dp-item-active {
        background: #fde8ef;
    }
    .dp-item.dp-item-ok.dp-item-active {
        background: #e8f5e9;
    }
    .dp-item + .dp-item {
        padding-top: 12px;
        margin-top: 8px;
        border-top: 1px dashed #ddd;
    }

    .dp-item-header {
        display: flex; align-items: center; gap: 6px;
        font-size: 14px; font-weight: 700; color: #c2185b;
        line-height: 1.2; letter-spacing: 0.3px;
    }
    .dp-item.dp-item-ok .dp-item-header { color: #2e7d32; }
    .dp-item-num { font-weight: 700; }
    .dp-item-status { flex: 1; font-weight: 700; }
    .dp-item-delete {
        background: #fff; border: 1px solid #ccc;
        color: #999; font-size: 14px;
        width: 22px; height: 22px;
        line-height: 18px; padding: 0;
        cursor: pointer; border-radius: 50%;
        font-weight: 600;
    }
    .dp-item-delete:hover {
        background: #ffebee; border-color: #c62828; color: #c62828;
    }
    .dp-item-size {
        font-size: 13px; color: #555;
        display: flex; gap: 10px; align-items: center;
        flex-wrap: nowrap;
    }
    .dp-size-group {
        display: inline-flex; align-items: center; gap: 3px;
        white-space: nowrap; color: #777;
    }
    .dp-size-group input[readonly] {
        width: 24px; padding: 0;
        border: none; background: transparent;
        font-size: 13px; text-align: left;
        color: #2c3e50; font-weight: 600;
        cursor: default; outline: none;
    }
    #dp-side-panel .dp-qty-input {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        border: 1px solid #ccc;
        background: #fff;
        font-size: 13px;
        text-align: center;
        border-radius: 2px;
        box-sizing: border-box !important;
        transition: width 0.2s ease;
        -moz-appearance: textfield;
        font-weight: 600;
        color: #2c3e50;
    }
    #dp-side-panel .dp-qty-input::-webkit-inner-spin-button,
    #dp-side-panel .dp-qty-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    #dp-side-panel .dp-qty-input:focus {
        width: 60px !important;
        outline: none;
        border-color: #1976d2;
        box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
    }
    .dp-item-thumbs {
        display: flex; gap: 10px; justify-content: center;
    }
    .dp-thumb {
        display: flex; flex-direction: column; gap: 4px; align-items: center;
    }
    /* Thumb back to v16 size */
    .dp-thumb-box {
        width: 126px; height: 93px;
        background: #fff; border: 1px solid #d1a0b5;
        cursor: pointer; position: relative;
        overflow: hidden; display: flex; align-items: center; justify-content: center;
        border-radius: 2px; transition: border-color 0.2s;
    }
    .dp-item.dp-item-ok .dp-thumb-box { border-color: #81c784; }
    .dp-thumb-box:hover { border-color: #c2185b; }
    .dp-item.dp-item-ok .dp-thumb-box:hover { border-color: #2e7d32; }
    .dp-thumb-box img {
        width: 100%; height: 100%;
        object-fit: contain; display: block;
    }
    .dp-thumb-actual.dp-lowres { color: #c0392b; font-weight: 700; }
    .dp-thumb-empty {
        font-size: 11px; color: #aaa; text-align: center; padding: 4px;
        line-height: 1.3; pointer-events: none;
    }
    .dp-thumb-empty strong {
        display: block; color: #999; font-size: 10px;
        letter-spacing: 0.5px; margin-bottom: 3px;
    }
    .dp-thumb-actual {
        font-size: 11px; color: #777; letter-spacing: 0.3px;
        text-align: center; max-width: 126px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dp-copy-from-front {
        position: absolute; bottom: 0; left: 0; right: 0;
        background: #6b6b6b; color: #fff;
        padding: 4px 4px;
        font-size: 9px;
        text-align: center; cursor: pointer; font-weight: 700;
        z-index: 10; letter-spacing: 0.4px;
        display: none;
        text-transform: uppercase;
        box-shadow: 0 -1px 2px rgba(0,0,0,0.18);
        border-top: 1px solid #555;
    }
    .dp-thumb-box:hover .dp-copy-from-front {
        display: block;
    }
    .dp-copy-from-front:hover { background: #555; }
    .dp-fit-center { display: flex; gap: 4px; }
    .dp-fit-center button {
        background: #eee; border: 1px solid #ccc; color: #888;
        font-size: 12px; padding: 3px 14px; cursor: not-allowed;
        border-radius: 2px; min-width: 50px; transition: all 0.15s;
    }
    .dp-fit-center button:not(:disabled) { background: #fff; color: #333; cursor: pointer; }
    .dp-fit-center button.dp-active {
        background: #fff; color: #d32f2f; border-color: #d32f2f; font-weight: 600;
    }
    .dp-item.dp-item-ok .dp-fit-center button.dp-active { color: #2e7d32; border-color: #2e7d32; }

    .dp-add-sign {
        background: #fff; border: 2px dashed #ccc;
        color: #888; font-size: 12px;
        padding: 10px; text-align: center;
        cursor: pointer; border-radius: 4px;
        font-weight: 600; letter-spacing: 0.5px;
    }
    .dp-add-sign:hover { border-color: #1976d2; color: #1976d2; }

    .dp-total-info {
        font-size: 12px; color: #2c3e50; font-weight: 600;
        padding: 6px 8px; background: #fafafa;
        border: 1px solid #ddd; border-radius: 3px;
        text-align: center;
    }
    .dp-total-info strong { color: #1976d2; font-size: 14px; }

    .dp-actions { display: flex; gap: 4px; align-items: center; font-size: 12px; }
    /* Presentation Folder: no multi-sign items and no custom cutting */
    body.dp-pf .dp-add-sign, body.dp-pf .dp-custom-cut { display: none !important; }
    /* v54.12: 키체인 — 단일 디자인 제품이라 ADD SIGN·custom cut 버튼 숨김 */
    body.dp-keychain .dp-add-sign, body.dp-keychain .dp-custom-cut { display: none !important; }
    /* v54.23: 커버·스로우 — 단일 디자인 제품이라 ADD SIGN·custom cut 숨김 */
    body.dp-tblart .dp-add-sign, body.dp-tblart .dp-custom-cut { display: none !important; }
    /* v54.27: 스탬프 2종 — 단일 디자인 제품이라 ADD SIGN·custom cut 숨김 */
    body.dp-stamp .dp-add-sign, body.dp-stamp .dp-custom-cut { display: none !important; }
    body.dp-promo .dp-add-sign, body.dp-promo .dp-custom-cut { display: none !important; }
    .dp-actions .dp-custom-cut {
        background: #fff; border: 1px solid #ccc; color: #333;
        font-size: 12px; padding: 5px 12px; cursor: pointer;
        border-radius: 3px; display: inline-flex; align-items: center;
        gap: 4px; transition: all 0.15s; flex: 1; justify-content: center;
    }
    .dp-actions .dp-custom-cut:hover:not(:disabled):not(.dp-disabled) { background: #f5f5f5; border-color: #999; }
    .dp-actions .dp-custom-cut.dp-has-file { background: #e3f2fd; border-color: #1976d2; color: #1976d2; font-weight: 600; }
    .dp-actions .dp-custom-cut:disabled,
    .dp-actions .dp-custom-cut.dp-disabled {
        background: #eee !important; color: #999 !important;
        border-color: #ccc !important; cursor: not-allowed !important;
    }
    .dp-actions .dp-info-icon {
        width: 14px; height: 14px; border-radius: 50%;
        background: #bbb; color: #fff; display: inline-flex;
        align-items: center; justify-content: center;
        font-size: 9px; font-weight: 700;
    }
    .dp-panel-warning {
        font-size: 11px; color: #c62828; line-height: 1.4;
        padding-top: 6px; border-top: 1px dashed #ddd; margin-top: 2px;
    }

    /* v54.11: 선빌드(prewarm)된 테이크오버 UI는 body.dp-fullwidth가 붙기 전까지 숨김 */
    body:not(.dp-fullwidth) #dp-side-panel,
    body:not(.dp-fullwidth) #dp-canvas-wrap,
    body:not(.dp-fullwidth) .dp-mobile-options-toggle,
    body:not(.dp-fullwidth) .dp-mobile-upload-toggle,
    body:not(.dp-fullwidth) .dp-upload-backdrop { display: none !important; }

    /* CANVAS WRAP */
    #dp-canvas-wrap {
        grid-column: 2 / 3; order: 2;
        display: flex; flex-direction: column; gap: 12px;
        height: 100%; min-height: 0; overflow: hidden;
    }
    #dp-product-info {
        display: grid; grid-template-columns: 1fr auto;
        gap: 0px; padding: 12px 20px;
        background: #fff; border-radius: 4px; align-items: center;
        flex-shrink: 0;
    }
    .dp-product-name { font-size: 22px; font-weight: 700; color: #2c3e50; letter-spacing: 0.5px; line-height: 1.2; }
    .dp-product-sub { font-size: 12px; color: #888; margin-top: 4px; }
    .dp-total-price { text-align: right; }
    .dp-total-price-value { display: none !important; }
    .dp-total-price-sub { font-size: 11px; color: #888; margin-top: 4px; }

    #design-preview-wrap {
        position: relative; width: 100%; flex: 1; min-height: 0;
        background-color: #f5f5f5;
        background-image: linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
        background-size: 24px 24px;
        overflow: hidden; border-radius: 4px;
    }
	#dp-pvc-min-badge {
        grid-column: 1 / -1;
        margin-top: 8px;
        background: #fff3e0;
        border: 1px solid #ffb74d;
        color: #e65100;
        font-size: 12px;
        font-weight: 700;
        padding: 1px 2px;
        text-align: center;
        letter-spacing: 0.3px;
    }
    @media (max-width: 1100px) {
        #dp-pvc-min-badge { font-size: 13px; }
    }
    /* v54.21: 커버·스로우 아트워크 편집 */
    .dp-art-stage { position: absolute; inset: 0; overflow: hidden; }
    .dp-art-img { position: absolute; left: 50%; top: 50%; transform-origin: center center;
        cursor: move; user-select: none; -webkit-user-drag: none; touch-action: none; }
    #dp-art-tools { position: absolute; top: 34px; right: 14px; z-index: 6; display: none;
        align-items: center; gap: 6px; background: rgba(255,255,255,0.95); border: 1px solid #d5d9de;
        border-radius: 8px; padding: 6px 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
    #dp-art-tools button { border: 1px solid #c9cdd3; background: #fff; color: #444;
        border-radius: 6px; padding: 5px 10px; font: 600 11px/1 Arial, sans-serif; cursor: pointer; }
    #dp-art-tools button:hover { border-color: #1976d2; color: #1976d2; }
    #dp-art-tools button.on { background: #333; color: #fff; border-color: #333; }
    #dp-art-tools label { font: 600 11px/1 Arial, sans-serif; color: #666; display: inline-flex; align-items: center; gap: 5px; }
    #dp-art-tools input[type="range"] { width: 100px; }
    #dp-art-tools .dp-art-sep { width: 1px; height: 18px; background: #dfe3e8; }
    #dp-art-tools .dp-art-al, #dp-art-tools .dp-art-rot { padding: 5px 7px; display: inline-flex; align-items: center; }

    .dp-assistance {
        position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
        font-size: 12px; color: #888; font-style: italic;
        white-space: nowrap; z-index: 4;
    }
    #design-preview-inner {
        position: absolute; top: 120px; left: 50%;
        transform: translateX(-50%); visibility: hidden;
    }
    #design-preview-inner.dp-ready { visibility: visible; }
    #design-preview-box {
        border: 1.5px solid #1a1a1a; background: #fff;
        position: relative; box-shadow: 0 4px 24px rgba(0,0,0,0.14);
        display: flex; align-items: center; justify-content: center;
    }
    #design-preview-inner.dp-ready #design-preview-box {
        transition: width 0.3s ease, height 0.3s ease;
    }
    #design-preview-box.has-image { overflow: hidden; }
    #design-preview-box img {
        width: 100%; height: 100%; object-fit: cover;
        object-position: center; display: block;
    }
    .dp-safety-line {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #9aa0a6;
        pointer-events: none; z-index: 2; background: transparent;
    }
    /* Trim/cut line: sits 0.125" inside the bleed box edge. Dashed = cut/perforation look. */
    .dp-trim-line {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        border: 2px dashed #3ba9d6;
        pointer-events: none; z-index: 2; background: transparent;
    }
    /* Standoff metal posts at 4 corners */
    .dp-standoff {
        position: absolute;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #e8e8e8, #999 70%, #555 100%);
        box-shadow: 0 1px 3px rgba(0,0,0,0.45), inset -1px -1px 2px rgba(0,0,0,0.35);
        z-index: 6;
        pointer-events: none;
    }
    /* Grommet metallic rings (hollow) at 4 corners */
    .dp-grommet {
        position: absolute;
        width: 16px; height: 16px;
        border-radius: 50%;
        background:
            radial-gradient(circle at center,
                #f5f5f5 0%, #f5f5f5 28%,
                #5a5a5a 30%, #888 50%, #5a5a5a 70%, #333 100%);
        box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 1px rgba(0,0,0,0.6);
        z-index: 6;
        pointer-events: none;
    }
    .dp-bottom-row {
        position: absolute; top: calc(100% + 45px);
        left: 0; right: 0;
        display: flex; justify-content: center; align-items: center;
        gap: 60px; z-index: 5; font-size: 13px;
    }
    .dp-flip-over {
        display: none; color: #888; cursor: pointer; user-select: none;
        align-items: center; gap: 4px;
    }
    .dp-flip-over:hover { color: #333; }
    .dp-flip-over .dp-flip-icon { font-size: 14px; line-height: 1; }
    .dp-side-label { color: #555; font-weight: 500; white-space: nowrap; }
    .dp-placeholder {
        position: absolute; top: calc(100% + 75px); left: 50%;
        transform: translateX(-50%);
        color: #888; font-size: 12px; white-space: nowrap;
        font-style: italic; z-index: 5;
    }
    .dp-top-label {
        position: absolute; top: -85px; left: 50%;
        transform: translateX(-50%);
        font-size: 13px; color: #333; letter-spacing: 1px;
        white-space: nowrap; font-weight: 600;
        z-index: 5; background: #f5f5f5; padding: 2px 10px;
    }
    .dp-top-label::before { content: "˅ "; color: #888; }
    .dp-top-label::after { content: " ˅"; color: #888; }
    .dp-width-label-top, .dp-width-label-bottom {
        position: absolute; left: 50%; transform: translateX(-50%);
        background: #f5f5f5; padding: 0 10px;
        text-align: center; font-size: 14px; color: #333;
        font-weight: 600; z-index: 4; white-space: nowrap;
    }
    .dp-width-label-top { top: -30px; }
    .dp-width-label-bottom { bottom: -32px; }
    .dp-height-label-left, .dp-height-label-right {
        position: absolute; top: 50%;
        font-size: 14px; color: #333; font-weight: 600;
        white-space: nowrap; z-index: 4;
        background: #f5f5f5; padding: 0 10px;
    }
    .dp-height-label-left { left: -55px; transform: translateY(-50%) rotate(-90deg); }
    .dp-height-label-right { right: -55px; transform: translateY(-50%) rotate(90deg); }
    .dp-guide-top, .dp-guide-bottom {
        position: absolute; left: 0; right: 0; height: 0;
        border-top: 1px solid #aaa; z-index: 2;
    }
    .dp-guide-top { top: -24px; }
    .dp-guide-bottom { bottom: -24px; }
    .dp-guide-top::before, .dp-guide-bottom::before {
        content: ""; position: absolute; left: -1px; top: -4px;
        width: 0; height: 0;
        border-top: 4px solid transparent; border-bottom: 4px solid transparent;
        border-right: 7px solid #aaa;
    }
    .dp-guide-top::after, .dp-guide-bottom::after {
        content: ""; position: absolute; right: -1px; top: -4px;
        width: 0; height: 0;
        border-top: 4px solid transparent; border-bottom: 4px solid transparent;
        border-left: 7px solid #aaa;
    }
    .dp-guide-left, .dp-guide-right {
        position: absolute; top: 0; bottom: 0; width: 0;
        border-left: 1px solid #aaa; z-index: 2;
    }
    .dp-guide-left { left: -24px; }
    .dp-guide-right { right: -24px; }
    .dp-guide-left::before, .dp-guide-right::before {
        content: ""; position: absolute; top: -1px; left: -4px;
        width: 0; height: 0;
        border-left: 4px solid transparent; border-right: 4px solid transparent;
        border-bottom: 7px solid #aaa;
    }
    .dp-guide-left::after, .dp-guide-right::after {
        content: ""; position: absolute; bottom: -1px; left: -4px;
        width: 0; height: 0;
        border-left: 4px solid transparent; border-right: 4px solid transparent;
        border-top: 7px solid #aaa;
    }

    /* MODAL */
    #dp-custom-cut-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; }
    #dp-custom-cut-modal.dp-open { display: flex; }
    .dp-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
    .dp-modal-content { position: relative; background: #fff; width: 90%; max-width: 520px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); overflow: hidden; }
    .dp-modal-header { padding: 18px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
    .dp-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #2c3e50; }
    .dp-modal-close { border: none; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #999; padding: 0; width: 28px; height: 28px; }
    .dp-modal-close:hover { color: #333; }
    .dp-modal-body { padding: 20px 24px 24px; }
    .dp-modal-warning { background: #fff8e1; border: 1px solid #ffd54f; border-radius: 4px; padding: 12px; margin-bottom: 16px; font-size: 12px; color: #5d4037; line-height: 1.55; }
    .dp-modal-warning strong { color: #e65100; }
    .dp-modal-warning ul { margin: 6px 0 0 16px; padding: 0; }
    .dp-modal-warning li { margin: 2px 0; }
    .dp-modal-upload-zone { border: 2px dashed #ccc; border-radius: 6px; padding: 32px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: #fafafa; }
    .dp-modal-upload-zone:hover { border-color: #1976d2; background: #f5fbff; }
    .dp-modal-upload-zone-text { font-size: 12px; color: #777; margin-top: 8px; }
    .dp-modal-upload-btn { background: #1976d2; color: #fff; border: none; padding: 8px 24px; border-radius: 4px; font-size: 13px; cursor: pointer; font-weight: 500; }
    .dp-modal-upload-btn:hover { background: #1565c0; }
    .dp-modal-current-file { margin-top: 12px; padding: 10px; background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 4px; font-size: 12px; color: #2e7d32; display: none; }
    .dp-modal-current-file.dp-show { display: block; }
    .dp-modal-error { margin-top: 12px; padding: 10px; background: #ffebee; border: 1px solid #ef9a9a; border-radius: 4px; font-size: 12px; color: #c62828; display: none; }
    .dp-modal-error.dp-show { display: block; }
    .dp-modal-checking { margin-top: 12px; padding: 10px; background: #e3f2fd; border-radius: 4px; font-size: 12px; color: #1565c0; display: none; text-align: center; }
    .dp-modal-checking.dp-show { display: block; }
    .dp-modal-input-hidden { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

    /* === Custom cut overlay: red ↔ white flashing === */
    @keyframes dp-cut-flash-red {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0; }
    }
    @keyframes dp-cut-flash-white {
        0%, 100% { opacity: 0; }
        50%      { opacity: 1; }
    }
    .dp-cut-overlay-red {
        animation: dp-cut-flash-red 3.5s ease-in-out infinite;
    }
    .dp-cut-overlay-white {
        animation: dp-cut-flash-white 3.5s ease-in-out infinite;
    }

    /* === Hide WC default "added to cart" message (we use custom popup) === */
    .woocommerce-message.dp-hide,
    .woocommerce-notices-wrapper .woocommerce-message {
        display: none !important;
    }

    /* === Added-to-Cart Modal (Signs365 style) === */
    #dp-atc-modal {
        position: fixed; inset: 0; z-index: 100000; display: none;
        align-items: center; justify-content: center;
    }
    #dp-atc-modal.dp-open { display: flex; }
    .dp-atc-overlay {
        position: absolute; inset: 0;
        background: rgba(0,0,0,0.55);
    }
    .dp-atc-content {
        position: relative;
        width: 90%; max-width: 540px;
        background: #fff;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    }
    .dp-atc-header {
        background: #2c3e50;
        color: #fff;
        padding: 16px 20px;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        position: relative;
    }
    .dp-atc-close {
        position: absolute;
        top: 10px; right: 14px;
        background: none; border: none;
        color: #fff; font-size: 22px;
        cursor: pointer; padding: 0;
        width: 28px; height: 28px;
        line-height: 1;
    }
    .dp-atc-close:hover { opacity: 0.7; }
    .dp-atc-body {
        padding: 36px 28px 32px;
        text-align: center;
    }
    .dp-atc-icon {
        width: 80px; height: 80px;
        margin: 0 auto 18px;
        display: flex; align-items: center; justify-content: center;
    }
    .dp-atc-icon svg { width: 100%; height: 100%; }
    .dp-atc-body p {
        font-size: 15px;
        color: #444;
        margin: 0 0 26px;
        line-height: 1.5;
    }
    .dp-atc-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .dp-atc-btn {
        padding: 12px 22px;
        border: none;
        background: #e0e0e0;
        color: #333;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.8px;
        cursor: pointer;
        border-radius: 2px;
        text-decoration: none;
        display: inline-block;
        text-transform: uppercase;
        transition: background 0.15s;
    }
    .dp-atc-btn:hover { background: #cdcdcd; color: #333; }
    .dp-atc-checkout {
        background: #fdd835;
        color: #2c3e50;
    }
    .dp-atc-checkout:hover {
        background: #fbc02d;
        color: #2c3e50;
    }

    @media (max-width: 480px) {
        .dp-atc-content { width: 94%; max-width: none; }
        .dp-atc-body { padding: 28px 18px 24px; }
        .dp-atc-icon { width: 64px; height: 64px; margin-bottom: 14px; }
        .dp-atc-body p { font-size: 14px; margin-bottom: 20px; }
        .dp-atc-buttons { flex-direction: column; }
        .dp-atc-btn { width: 100%; padding: 14px; font-size: 13px; }
    }

    /* Mobile toggles + popup (hidden on desktop) */
    .dp-mobile-options-toggle,
    .dp-mobile-upload-toggle,
    .dp-upload-backdrop,
    .dp-popup-close-mobile {
        display: none;
    }

    @media (max-width: 1100px) {
        .dp-main-product, body.dp-fullwidth .dp-main-product,
        body.dp-fullwidth .single-product .product.dp-main-product,
        body.dp-fullwidth.single-product div.product.dp-main-product {
            grid-template-columns: 1fr !important;
            padding: 12px !important;
            gap: 10px !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
        }
        .dp-main-product .summary, .dp-main-product .entry-summary,
        #dp-canvas-wrap {
            grid-column: 1 / -1 !important;
            max-height: none !important;
            overflow: visible !important;
        }
        /* Mobile stacking order */
        #dp-canvas-wrap { order: 1 !important; height: auto !important; }
        .dp-mobile-options-toggle { order: 2 !important; }
        .dp-main-product .summary, .dp-main-product .entry-summary { order: 3 !important; }
        .dp-mobile-upload-toggle { order: 4 !important; }

        /* Options hide/show is now controlled by JS inline styles
           (CSS-based hide had cascade conflicts). */
        /* But add CSS-based fallback for safety */
        body.dp-fullwidth .dp-main-product:not(.dp-options-open) > .summary,
        body.dp-fullwidth .dp-main-product:not(.dp-options-open) > .entry-summary,
        body.dp-fullwidth div.product.dp-main-product:not(.dp-options-open) .summary.entry-summary {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            max-height: 0 !important;
            min-height: 0 !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
            opacity: 0 !important;
        }

        /* Options toggle button */
        .dp-mobile-options-toggle {
            display: block !important;
            grid-column: 1 / -1 !important;
            background: #fff;
            border: 2px solid #4caf50;
            color: #4caf50;
            padding: 12px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            width: 100%;
        }
        .dp-main-product.dp-options-open .dp-mobile-options-toggle {
            background: #4caf50; color: #fff;
        }

        /* Upload toggle button */
        .dp-mobile-upload-toggle {
            display: block !important;
            grid-column: 1 / -1 !important;
            background: #fff;
            border: 2px solid #1976d2;
            color: #1976d2;
            padding: 12px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            width: 100%;
        }

        /* Side panel as bottom-sheet popup */
        #dp-side-panel {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important; 
            top: auto !important;
            z-index: 99998 !important;
            max-height: 88vh !important;
            border-radius: 14px 14px 0 0 !important;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.25) !important;
            transform: translateY(100%) !important;
            transition: transform 0.3s ease !important;
            margin: 0 !important;
            background: #fff !important;
            padding: 40px 14px 24px !important;
            overflow-y: auto !important;
            grid-column: unset !important;
            order: unset !important;
            display: flex !important;
            flex-direction: column;
            width: auto !important;
        }
        #dp-side-panel.dp-popup-visible {
            transform: translateY(0) !important;
        }

        /* Backdrop */
        .dp-upload-backdrop {
            position: fixed !important; inset: 0 !important;
            background: rgba(0,0,0,0.5) !important;
            z-index: 99997 !important;
            display: none;
        }
        .dp-upload-backdrop.dp-backdrop-visible {
            display: block !important;
        }

        /* Close button inside popup */
        .dp-popup-close-mobile {
            display: block !important;
            position: absolute !important;
            top: 8px !important; right: 12px !important;
            font-size: 28px !important;
            line-height: 1 !important;
            cursor: pointer;
            border: none !important; background: none !important;
            color: #888;
            padding: 4px 10px !important;
            z-index: 10;
        }

        /* Canvas labels / assistance: avoid overlap */
        .dp-assistance { display: none !important; }
        .dp-top-label {
            top: -42px; font-size: 11px; padding: 2px 8px;
        }
        .dp-width-label-top { top: -22px; font-size: 12px; padding: 0 8px; }
        .dp-width-label-bottom { bottom: -24px; font-size: 12px; padding: 0 8px; }
        .dp-height-label-left { left: -42px; font-size: 12px; padding: 0 8px; }
        .dp-height-label-right { right: -42px; font-size: 12px; padding: 0 8px; }
        .dp-guide-top { top: -16px; }
        .dp-guide-bottom { bottom: -16px; }
        .dp-guide-left { left: -16px; }
        .dp-guide-right { right: -16px; }

        #dp-product-info {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 0px;
            padding: 10px 14px;
        }
        .dp-product-name { font-size: 20px; }
        .dp-total-price { text-align: center; }
        .dp-total-price-value { font-size: 26px; }

        #design-preview-wrap {
            height: 55vh;
            min-height: 400px;
            max-height: 650px;
            flex: none;
        }
        #design-preview-inner { top: 80px; }

        .dp-item-size {
            flex-wrap: wrap;
            gap: 10px;
        }
        .dp-thumb-box {
            width: 130px; height: 97px;
        }
        .dp-thumb-actual { max-width: 130px; }

        #dp-side-panel .dp-qty-input {
            width: 32px !important;
            height: 32px !important;
            font-size: 14px;
        }
        #dp-side-panel .dp-qty-input:focus {
            width: 72px !important;
        }
    }

    @media (max-width: 480px) {
        .dp-main-product, body.dp-fullwidth .dp-main-product,
        body.dp-fullwidth .single-product .product.dp-main-product {
            padding: 10px !important;
            gap: 8px !important;
        }
        .dp-thumb-box {
            width: 110px; height: 82px;
        }
        .dp-thumb-actual { max-width: 110px; }
        .dp-product-name { font-size: 16px; }
        .dp-total-price-value { font-size: 22px; }
        #design-preview-wrap {
            height: 50vh; min-height: 340px;
        }
        .dp-fit-center button {
            font-size: 11px; min-width: 44px; padding: 3px 10px;
        }
        .dp-mobile-options-toggle, .dp-mobile-upload-toggle {
            font-size: 13px; padding: 10px;
        }
    }
    /* ===== Inline entry buttons (Browse templates / Upload your design) ===== */
    #dp-inline-buttons { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
    #dp-inline-buttons #dp-browse-btn {
        display: flex; align-items: center; justify-content: center; gap: 4px;
        width: 100%; padding: 16px 28px;
        background: #4dbbe8; color: #ffffff; border: 0; border-radius: 0;
        font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: .2px;
        line-height: 1.2; cursor: pointer; transition: background .15s; text-align: center;
    }
    #dp-inline-buttons #dp-browse-btn:hover { background: #3aa9d6; }
    #dp-inline-buttons #dp-upload-btn {
        display: flex; align-items: center; justify-content: center; gap: 4px;
        width: 100%; padding: 14px 28px;
        background: #fff; color: #16325c; border: 2px solid #16325c; border-radius: 0;
        font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: .2px;
        line-height: 1.2; cursor: pointer; transition: all .12s; text-align: center;
    }
    #dp-inline-buttons #dp-upload-btn:hover { background: #16325c; color: #fff; }
    #dp-inline-buttons svg { flex: 0 0 auto; }

    /* === v21: Raised Spot UV mask section === */
    #dp-mask-section { display:none; margin:10px 0 4px; padding:10px; border:1px solid #e0e0e0; background:#fafafa; border-radius:4px; }
    #dp-mask-section.dp-mask-on { display:block; }
    .dp-mask-title { font-size:12px; font-weight:700; letter-spacing:.03em; color:#2c3e50; margin-bottom:4px; }
    .dp-mask-note { font-size:10.5px; line-height:1.45; color:#777; margin-bottom:8px; }
    .dp-mask-slots { display:flex; gap:8px; }
    .dp-mask-slot { flex:1; border:2px dashed #c9cfd6; border-radius:6px; background:#fff; text-align:center; padding:8px 6px; cursor:pointer; position:relative; min-height:74px; }
    .dp-mask-slot:hover { border-color:#1976d2; }
    .dp-mask-slot.dp-mask-done { border-style:solid; border-color:#2eb62c; }
    .dp-mask-slot.dp-mask-missing { border-color:#d9534f; background:#fff6f6; }
    .dp-mask-slot .dp-mask-label { font-size:10px; font-weight:700; color:#2c3e50; letter-spacing:.02em; }
    .dp-mask-slot .dp-mask-empty { font-size:9.5px; color:#999; margin-top:4px; }
    .dp-mask-slot img { max-width:100%; max-height:56px; display:block; margin:4px auto 2px;
        background:repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0/12px 12px; border:1px solid #e3e6ea; }
    .dp-mask-slot .dp-mask-fname { font-size:9px; color:#2eb62c; word-break:break-all; margin-top:2px; }
    .dp-mask-slot .dp-mask-x {
        position:absolute !important; top:3px !important; right:3px !important;
        width:18px !important; height:18px !important;
        min-width:0 !important; min-height:0 !important; max-width:none !important;
        padding:0 !important; margin:0 !important;
        display:flex !important; align-items:center !important; justify-content:center !important;
        line-height:1 !important; font-size:12px !important; font-weight:400 !important;
        border:1px solid #c9cfd6 !important; border-radius:50% !important;
        background:#fff !important; color:#666 !important;
        box-shadow:none !important; text-shadow:none !important; box-sizing:border-box !important;
        cursor:pointer;
    }
    .dp-mask-slot .dp-mask-x:hover { background:#f3f5f7 !important; color:#333 !important; }
    #dp-mask-warn { display:none; margin-top:8px; padding:7px 9px; background:#fff3cd; border:1px solid #ffe08a; color:#7a5b00; font-size:10.5px; line-height:1.4; border-radius:4px; }
    /* v31: 푸터는 유지하되 DP 페이지에선 컴팩트하게 (v29 숨김 철회) */
    body.dp-fullwidth #colophon [class*="ast-builder-grid-row"],
    body.dp-fullwidth .site-footer [class*="ast-builder-grid-row"] {
        padding-top: 12px !important; padding-bottom: 12px !important;
        row-gap: 8px !important;
    }
    body.dp-fullwidth #colophon .widget,
    body.dp-fullwidth .site-footer .widget { margin-bottom: 6px !important; }
    body.dp-fullwidth #colophon .ast-builder-layout-element,
    body.dp-fullwidth .site-footer .ast-builder-layout-element { min-height: 0 !important; }
    body.dp-fullwidth #colophon { margin-top: 0 !important; }

    /* v24/v25: raised-UV overlay on the main preview (v25: red outline) */
    #dp-raise-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; }