.wccm-personalizer{margin:18px 0}
.wccm-launch-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid #dcdcde;border-radius:8px;background:#fff}
.wccm-launch-copy{display:flex;flex-direction:column;gap:3px}
.wccm-launch-title{font-size:1rem}
.wccm-launch-status{font-size:.92rem;color:#646970}
.wccm-open-editor{white-space:nowrap}

.wccm-modal[hidden]{display:none!important}
.wccm-modal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:24px}
.wccm-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.wccm-modal-dialog{position:relative;z-index:1;width:min(1180px,96vw);max-height:94vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden}
.wccm-modal-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:20px 22px 16px;border-bottom:1px solid #e2e4e7}
.wccm-modal-title{margin:0;font-size:1.55rem;line-height:1.2}
.wccm-modal-subtitle{margin:6px 0 0;color:#646970}
.wccm-modal-close{border:0;background:transparent;font-size:34px;line-height:1;padding:0 2px;cursor:pointer;color:#3c434a}
.wccm-modal-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0;overflow:auto}
.wccm-editor-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:#f6f7f7;min-width:0}
.wccm-stage-wrap{width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}
.wccm-stage{position:relative;flex:0 0 auto;max-width:100%;overflow:hidden}
.wccm-template{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;z-index:1;pointer-events:none}
.wccm-photo-window{position:absolute;z-index:2;overflow:hidden;touch-action:none;background:transparent}
.wccm-photo{position:absolute;left:50%;top:50%;max-width:none!important;display:none;user-select:none;-webkit-user-drag:none;transform-origin:center center}
.wccm-editor-sidebar{padding:22px;border-left:1px solid #e2e4e7;background:#fff}
.wccm-editor-section+.wccm-editor-section{margin-top:24px;padding-top:20px;border-top:1px solid #e2e4e7}
.wccm-editor-section h3{margin:0 0 12px;font-size:1rem}
.wccm-upload-label{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:5px;background:#2271b1;color:#fff;font-weight:600;cursor:pointer}
.wccm-photo-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.wccm-file-name{margin:10px 0 0;font-size:.9rem;color:#646970;word-break:break-word}
.wccm-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wccm-controls .button{min-width:42px;min-height:38px}
.wccm-zoom-label{display:inline-flex;min-width:54px;justify-content:center;font-weight:600}
.wccm-drag-help{margin:10px 0 0;font-size:.9rem;color:#646970}
.wccm-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid #e2e4e7;background:#fff}
html.wccm-modal-open,body.wccm-modal-open{overflow:hidden!important}

@media (max-width: 782px){
  .wccm-launch-panel{align-items:stretch;flex-direction:column}
  .wccm-open-editor{width:100%}
  .wccm-modal{padding:0;align-items:stretch}
  .wccm-modal-dialog{width:100vw;height:100dvh;max-height:none;border-radius:0}
  .wccm-modal-header{padding:14px 16px 12px}
  .wccm-modal-title{font-size:1.25rem}
  .wccm-modal-subtitle{font-size:.9rem}
  .wccm-modal-body{grid-template-columns:1fr;display:block;overflow:auto}
  .wccm-editor-preview{padding:12px;min-height:42vh}
  .wccm-editor-sidebar{border-left:0;border-top:1px solid #e2e4e7;padding:16px}
  .wccm-modal-footer{position:sticky;bottom:0;padding:12px 16px;z-index:3}
  .wccm-modal-footer .button{min-height:46px}
  .wccm-save-editor{flex:1}
  .wccm-cancel-editor{min-width:88px}
  .wccm-upload-label{width:100%;box-sizing:border-box}
  .wccm-controls{gap:10px}
  .wccm-controls .button{min-height:44px;min-width:48px}
}

/* v2.0.1: keep desktop editor fully visible and place the customer photo above the mockup */
@media (min-width:783px){
  .wccm-modal-dialog{
    height:min(900px,94vh);
    max-height:94vh;
  }
  .wccm-modal-body{
    flex:1 1 auto;
    overflow:hidden;
  }
  .wccm-editor-preview{
    min-height:0;
    overflow:hidden;
  }
  .wccm-editor-sidebar{
    overflow:auto;
  }
  .wccm-stage-wrap{
    max-height:100%;
  }
}

/* v2.1 cart personalization UI */
.wccm-cart-personalize{margin:.55em 0 0}
.wccm-cart-personalize-button{font-size:.85em!important;padding:.45em .8em!important;line-height:1.2!important}
.wccm-cart-preview{object-fit:cover}

/* v2.2.0: automatic frame fit + resolution warning */
.wccm-resolution-warning{
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid #d63638;
  border-radius:5px;
  background:#fcf0f1;
  color:#8a2424;
  font-size:.92rem;
  line-height:1.4;
}
.wccm-resolution-warning[hidden]{display:none!important}

/* v3.0 tabs + text personalization */
.wccm-side-tabs{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid #e2e4e7;background:#fff}
.wccm-side-tab{appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;padding:13px 18px;font-weight:600;cursor:pointer}
.wccm-side-tab.is-active{border-bottom-color:#2271b1;color:#2271b1}
.wccm-side-stage-wrap,.wccm-side-controls{display:none}.wccm-side-stage-wrap.is-active,.wccm-side-controls.is-active{display:block}
.wccm-side-stage-wrap{width:100%}.wccm-live-text{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;overflow:hidden;padding:6px;box-sizing:border-box;color:#111;line-height:1.25;pointer-events:none}
.wccm-choice-row{display:flex;gap:18px;flex-wrap:wrap}.wccm-choice-row label{display:flex;align-items:center;gap:6px;font-weight:600}.wccm-delivery-error{color:#b32d2e;font-weight:600;margin:8px 0 0}.wccm-paid-addon{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}.wccm-text-input{width:100%;min-height:110px;box-sizing:border-box}.wccm-text-input:disabled{opacity:.55}.wccm-addon-help{font-size:.88rem;color:#646970;margin:8px 0 0}
@media(max-width:782px){.wccm-side-tabs{padding:0 10px;overflow-x:auto}.wccm-side-tab{flex:1;min-width:90px;padding:11px 10px}.wccm-live-text{padding:3px}}

/* v3.1.0 repeatable live text preview */
.wccm-repeat-text-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.wccm-repeat-text-preview{position:absolute;display:flex;align-items:center;justify-content:center;white-space:pre-wrap;overflow:hidden;line-height:1.1;color:#111;font-family:inherit;box-sizing:border-box;padding:2px}
.wccm-text-inputs{display:grid;gap:12px;margin-top:16px}
.wccm-customer-text-field label{display:grid;gap:6px}
.wccm-customer-text-field input{width:100%;box-sizing:border-box}

/* v3.1.1 multiple text fields */
.wccm-customer-text-fields{display:grid;gap:12px}
.wccm-customer-text-field{display:grid;gap:6px}
.wccm-customer-text-field>span{font-weight:600}
.wccm-customer-text-field input{width:100%;box-sizing:border-box}
.wccm-repeat-text-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.wccm-repeat-text-preview{position:absolute;display:flex;align-items:center;white-space:normal;overflow:hidden;line-height:1.08;color:#111;box-sizing:border-box;padding:2px}


/* v3.1.3 — true Width × Height text boundaries with auto-fit */
.wccm-repeat-text-preview{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:2px;
    overflow:hidden;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.08;
    color:#111;
    pointer-events:none;
}

.wccm-repeat-text-preview.wccm-text-overflow{
    outline:1px dashed currentColor;
}

.wccm-text-too-long-warning{
    margin-top:6px;
    font-size:.9em;
    line-height:1.35;
    font-weight:600;
}

.wccm-text-too-long-warning[hidden]{
    display:none !important;
}


/* v3.1.4 — customer text fields use multi-line textareas */
.wccm-customer-text-field textarea.wccm-repeat-text-input{
    width:100%;
    min-height:120px;
    box-sizing:border-box;
    resize:vertical;
    line-height:1.45;
    padding:10px 12px;
    font:inherit;
}

/* v3.2.0 Customer Inputs */
.wccm-customer-input-fields{display:grid;gap:12px}
.wccm-customer-input-field{display:grid;gap:6px}
.wccm-customer-input-label{font-weight:600}
.wccm-customer-input-field input[type="text"],
.wccm-customer-input-field textarea,
.wccm-customer-input-field select{width:100%;box-sizing:border-box}
.wccm-customer-radio-options{display:grid;gap:6px}
.wccm-inline-check{display:flex!important;align-items:center;gap:8px}
.wccm-customer-input-preview-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.wccm-customer-input-preview{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:2px;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.08;color:#111}


/* v3.2.1 — desktop personalization layout */
@media (min-width:783px){
    .wccm-modal-dialog{
        width:min(1320px,96vw);
    }

    .wccm-modal-body{
        display:grid;
        grid-template-columns:minmax(420px,460px) minmax(0,1fr);
        grid-template-areas:"controls preview";
    }

    .wccm-editor-sidebar{
        grid-area:controls;
        width:auto;
        min-width:0;
        padding:26px 28px;
        border-left:0;
        border-right:1px solid #e2e4e7;
        overflow:auto;
    }

    .wccm-editor-preview{
        grid-area:preview;
        min-width:0;
        min-height:0;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:24px;
        overflow:hidden;
    }

    .wccm-side-stage-wrap{
        width:100%;
        height:100%;
    }

    .wccm-side-stage-wrap.is-active{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .wccm-stage{
        margin:auto;
    }
}

/* Keep the mobile editor stacked and touch-friendly. */
@media (max-width:782px){
    .wccm-editor-sidebar{
        border-right:0;
    }
}


/* v3.2.18 — WooCommerce variation selectors inside personalization card */
.wccm-variation-options{
    width:100%;
    margin:0 0 18px;
    padding:0 0 18px;
    border-bottom:1px solid #e5e5e5;
}

.wccm-variation-options-title{
    margin:0 0 12px;
    font-weight:600;
    font-size:1em;
}

.wccm-variation-options table.variations{
    width:100%;
    margin:0;
    border:0;
}

.wccm-variation-options table.variations tbody,
.wccm-variation-options table.variations tr{
    display:block;
    width:100%;
}

.wccm-variation-options table.variations tr{
    margin:0 0 14px;
}

.wccm-variation-options table.variations th,
.wccm-variation-options table.variations td{
    display:block;
    width:100%;
    padding:0;
    border:0;
    text-align:left;
}

.wccm-variation-options table.variations th.label{
    margin:0 0 7px;
    font-weight:600;
}

.wccm-variation-options table.variations select{
    width:100%;
    max-width:100%;
    min-height:44px;
    box-sizing:border-box;
}

.wccm-variation-options .reset_variations{
    display:inline-block;
    margin-top:2px;
}

@media(max-width:782px){
    .wccm-variation-options{
        margin-bottom:14px;
        padding-bottom:14px;
    }
}


/* v3.2.19 — native WooCommerce variation selectors inside Personalize your card */
.wccm-launch-panel.wccm-has-variations{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
        "variations variations"
        "copy button";
    align-items:center;
    gap:16px;
}

.wccm-launch-panel.wccm-has-variations .wccm-variation-options{
    grid-area:variations;
    width:100%;
    margin:0;
    padding:0 0 16px;
    border-bottom:1px solid #e2e4e7;
    box-sizing:border-box;
}

.wccm-launch-panel.wccm-has-variations .wccm-launch-copy{
    grid-area:copy;
}

.wccm-launch-panel.wccm-has-variations .wccm-open-editor{
    grid-area:button;
}

.wccm-launch-panel .wccm-variation-options-title{
    margin:0 0 12px;
    font-weight:600;
}

.wccm-launch-panel .wccm-variation-options table.variations{
    width:100%;
    margin:0;
    border:0;
}

.wccm-launch-panel .wccm-variation-options table.variations tr{
    display:block;
    margin:0 0 12px;
}

.wccm-launch-panel .wccm-variation-options table.variations tr:last-child{
    margin-bottom:0;
}

.wccm-launch-panel .wccm-variation-options table.variations th,
.wccm-launch-panel .wccm-variation-options table.variations td{
    display:block;
    width:100%;
    padding:0;
    border:0;
    text-align:left;
}

.wccm-launch-panel .wccm-variation-options table.variations th.label{
    margin:0 0 6px;
    font-weight:600;
}

.wccm-launch-panel .wccm-variation-options table.variations select{
    display:block;
    width:100%;
    max-width:100%;
    min-height:44px;
    box-sizing:border-box;
}

.wccm-launch-panel .wccm-variation-options .reset_variations{
    display:inline-block;
    margin-top:5px;
}

@media(max-width:600px){
    .wccm-launch-panel.wccm-has-variations{
        grid-template-columns:1fr;
        grid-template-areas:
            "variations"
            "copy"
            "button";
    }

    .wccm-launch-panel.wccm-has-variations .wccm-open-editor{
        width:100%;
    }
}


/* v3.2.20 — variation attributes inside personalization modal sidebar */
.wccm-modal-variation-options{
    width:100%;
    box-sizing:border-box;
}

.wccm-modal-variation-options h3{
    margin-top:0;
}

.wccm-modal-variation-options table.variations{
    width:100%;
    margin:0;
    border:0;
}

.wccm-modal-variation-options table.variations tbody,
.wccm-modal-variation-options table.variations tr{
    display:block;
    width:100%;
}

.wccm-modal-variation-options table.variations tr{
    margin:0 0 14px;
}

.wccm-modal-variation-options table.variations tr:last-child{
    margin-bottom:0;
}

.wccm-modal-variation-options table.variations th,
.wccm-modal-variation-options table.variations td{
    display:block;
    width:100%;
    padding:0;
    border:0;
    text-align:left;
}

.wccm-modal-variation-options table.variations th.label{
    margin:0 0 6px;
    font-weight:600;
}

.wccm-modal-variation-options table.variations select{
    display:block;
    width:100%;
    max-width:100%;
    min-height:44px;
    box-sizing:border-box;
}

.wccm-modal-variation-options .reset_variations{
    display:inline-block;
    margin-top:4px;
}

.wccm-modal-variation-summary{
    margin-top:10px;
}

.wccm-modal-variation-price{
    font-weight:600;
}

.wccm-modal-variation-availability{
    margin-top:4px;
}

/* The options are common to the whole product, not a specific Front/Inside/etc tab. */
.wccm-editor-sidebar > .wccm-modal-variation-options{
    flex:0 0 auto;
    border-bottom:1px solid #e2e4e7;
    padding-bottom:18px;
    margin-bottom:18px;
}

.wccm-product-custom-options{margin:0 0 18px;display:grid;gap:12px}
.wccm-product-custom-option{display:grid;gap:6px;font-weight:600}
.wccm-product-custom-option input{width:100%;box-sizing:border-box}
.wccm-page-option-preview-layer{position:absolute;inset:0;pointer-events:none;z-index:6}
.wccm-page-option-preview-text{position:absolute;display:flex;flex-direction:column;justify-content:center;white-space:pre-wrap;overflow:hidden;line-height:1.15;box-sizing:border-box}

/* v3.2.24 — modal Custom Options */
.wccm-modal-custom-option-fields{display:grid;gap:14px}
.wccm-modal-custom-option{display:grid;gap:6px;font-weight:600}
.wccm-modal-custom-option input{width:100%;box-sizing:border-box}


/* v1.2.4 — keep the active customer mockup truly centered vertically. */
@media (min-width:783px){
  .wccm-modal-body{height:100%;}
  .wccm-editor-preview{height:100%;box-sizing:border-box;}
  .wccm-side-stage-wrap{min-height:100%;}
  .wccm-side-stage-wrap.is-active{display:flex!important;align-items:center!important;justify-content:center!important;}
  .wccm-side-stage-wrap.is-active .wccm-stage{margin:auto!important;}
}