.pk3d-vb-builder {
    --pk3d-border: #dcdcde;
    --pk3d-muted: #646970;
    --pk3d-panel: #f6f7f7;
    box-sizing: border-box;
    max-width: 1280px;
    margin: 24px auto;
    border: 1px solid var(--pk3d-border);
    border-radius: var(--pk3d-radius, 14px);
    overflow: hidden;
    background: var(--pk3d-builder-bg, #fff);
    color: var(--pk3d-text, #1d2327);
    font-family: inherit;
}

.pk3d-vb-builder *, .pk3d-vb-builder *::before, .pk3d-vb-builder *::after { box-sizing: border-box; }
.pk3d-vb-builder__header { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; padding: 24px; border-bottom: 1px solid var(--pk3d-border); background: var(--pk3d-header-bg, #fff); }
.pk3d-vb-builder__header h2 { margin: 2px 0 6px; font-size: clamp(26px, 4vw, 38px); line-height: 1.05; }
.pk3d-vb-builder__header p { margin: 0; color: var(--pk3d-muted); }
.pk3d-vb-builder__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; }
.pk3d-vb-product-picker { width: min(320px, 100%); font-weight: 700; }
.pk3d-vb-product-picker span { display: block; margin-bottom: 7px; }
.pk3d-vb-product-picker select { width: 100%; min-height: 44px; padding: 8px 36px 8px 12px; border: 1px solid #8c8f94; border-radius: 7px; background: var(--pk3d-input-bg, #fff); color: var(--pk3d-input-text, #1d2327); font: inherit; }
.pk3d-vb-builder__workspace { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-height: 540px; }
.pk3d-vb-builder__tools { padding: 24px; border-right: 1px solid var(--pk3d-border); background: var(--pk3d-panel); }
.pk3d-vb-builder__tools h3 { margin: 0 0 8px; font-size: 23px; }
.pk3d-vb-builder__tools > p { margin: 0 0 22px; color: var(--pk3d-muted); }
.pk3d-vb-control { margin-bottom: 18px; }
.pk3d-vb-control label { display: block; margin-bottom: 6px; font-weight: 650; }
.pk3d-vb-control input, .pk3d-vb-control select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #8c8f94; border-radius: 6px; background: #fff; font: inherit; }
.pk3d-vb-control__hint { display: block; margin-top: 5px; color: var(--pk3d-muted); font-size: 12px; }
.pk3d-vb-builder__stage { display: flex; flex-direction: column; min-width: 0; padding: 28px; background: var(--pk3d-stage-bg, #fff); }
.pk3d-vb-canvas-shell { display: grid; place-items: center; flex: 1; min-height: 420px; padding: 28px; border: 1px dashed #c3c4c7; border-radius: 10px; background-image: linear-gradient(45deg, #f7f7f7 25%, transparent 25%), linear-gradient(-45deg, #f7f7f7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f7f7f7 75%), linear-gradient(-45deg, transparent 75%, #f7f7f7 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.pk3d-vb-canvas { display: grid; place-items: center; width: min(82%, 720px); aspect-ratio: 16 / 9; min-height: 220px; padding: 20px; border: 2px solid #8c8f94; border-radius: 5px; background: rgba(255,255,255,.95); color: var(--pk3d-muted); text-align: center; font-weight: 700; transition: width .2s ease, aspect-ratio .2s ease, border-radius .2s ease; }
.pk3d-vb-canvas[data-product="coaster"] { width: min(62%, 440px); aspect-ratio: 1 / 1; border-radius: 50%; }

.pk3d-vb-canvas[data-product="plaque"] { width: min(62%, 440px); aspect-ratio: 1 / 1; border-radius: 50%; }
.pk3d-vb-canvas[data-product="dog-tag"] { width: min(46%, 330px); aspect-ratio: 1.72 / 1; border-radius: 18px; }
.pk3d-vb-canvas[data-product="tumbler"] { width: min(72%, 620px); aspect-ratio: 2.35 / 1; }
.pk3d-vb-builder__status { padding-top: 16px; color: var(--pk3d-muted); }
.pk3d-vb-builder__status strong { color: #1d2327; }

@media (max-width: 800px) {
    .pk3d-vb-builder__header { align-items: stretch; flex-direction: column; }
    .pk3d-vb-product-picker { width: 100%; }
    .pk3d-vb-builder__workspace { grid-template-columns: 1fr; }
    .pk3d-vb-builder__tools { border-right: 0; border-bottom: 1px solid var(--pk3d-border); }
    .pk3d-vb-builder__stage { padding: 18px; }
    .pk3d-vb-canvas-shell { min-height: 320px; padding: 16px; }
}

.pk3d-vb-control--checkbox label { display: flex; gap: 9px; align-items: center; cursor: pointer; }
.pk3d-vb-control--checkbox input { width: 18px; min-height: 18px; margin: 0; }
.pk3d-vb-control--checkbox span { font-weight: 650; }
.pk3d-vb-builder__status { display: grid; gap: 6px; }
.pk3d-vb-builder__validation { font-size: 13px; }
.pk3d-vb-builder__validation.is-valid { font-weight: 650; }
.pk3d-vb-builder__validation.is-error { font-weight: 700; }
.pk3d-vb-builder__validation.is-pending { font-style: italic; }
.pk3d-vb-canvas[data-product="decal"] { transition: width .18s ease, aspect-ratio .18s ease; }
.pk3d-vb-canvas[data-product="decal"][data-decal-color="black"] { box-shadow: inset 0 0 0 5px #1d2327; }
.pk3d-vb-canvas[data-product="decal"][data-decal-color="red"] { box-shadow: inset 0 0 0 5px #b32d2e; }
.pk3d-vb-canvas[data-product="decal"][data-decal-color="blue"] { box-shadow: inset 0 0 0 5px #2271b1; }
.pk3d-vb-canvas[data-product="decal"][data-decal-color="silver"] { box-shadow: inset 0 0 0 5px #8c8f94; }
.pk3d-vb-canvas[data-product="decal"][data-decal-color="gold"] { box-shadow: inset 0 0 0 5px #a67c00; }

/* Alpha5: Decal text design foundation. */
.pk3d-vb-builder__header h2,
.pk3d-vb-builder__tools h3,
.pk3d-vb-text-editor h4 {
    background: transparent !important;
    color: #1d2327 !important;
    padding: 0 !important;
}

.pk3d-vb-canvas {
    position: relative;
    container-type: size;
    overflow: visible;
    touch-action: none;
}

.pk3d-vb-text-editor {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--pk3d-border);
}

.pk3d-vb-text-editor__heading {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.pk3d-vb-text-editor__heading h4 {
    margin: 0;
    font-size: 17px;
}

.pk3d-vb-text-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pk3d-vb-button {
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid #8c8f94;
    border-radius: 5px;
    background: #fff;
    color: #1d2327;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.pk3d-vb-button:hover:not(:disabled) {
    border-color: #2271b1;
}

.pk3d-vb-button:disabled {
    opacity: .45;
    cursor: default;
}

.pk3d-vb-button--primary {
    border-color: #2271b1;
    background: #2271b1;
    color: #fff;
}

.pk3d-vb-text-editor__inspector {
    display: grid;
    gap: 12px;
}

.pk3d-vb-text-editor__empty {
    margin: 0;
    color: var(--pk3d-muted);
    font-size: 13px;
}

.pk3d-vb-text-field {
    display: grid;
    gap: 5px;
}

.pk3d-vb-text-field > span {
    font-size: 12px;
    font-weight: 700;
}

.pk3d-vb-text-field input,
.pk3d-vb-text-field select {
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid #8c8f94;
    border-radius: 5px;
    background: #fff;
    font: inherit;
}

.pk3d-vb-text-toggles {
    display: flex;
    gap: 16px;
    align-items: center;
}

.pk3d-vb-text-toggles label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    font-size: 13px;
    font-weight: 650;
}

.pk3d-vb-text-toggles input {
    width: 16px;
    min-height: 16px;
    margin: 0;
}

.pk3d-vb-text-geometry {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
}

.pk3d-vb-text-geometry span {
    color: var(--pk3d-muted);
}

.pk3d-vb-text-object {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 1em;
    line-height: 1;
    cursor: move;
    user-select: none;
    transform-origin: center center;
    touch-action: none;
}

.pk3d-vb-text-object__text {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: visible;
    pointer-events: none;
}


.pk3d-vb-text-object.is-selected::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px dashed #2271b1;
    pointer-events: none;
}

.pk3d-vb-object-handle {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #2271b1;
    border-radius: 50%;
    background: #fff;
    color: #1d2327;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    touch-action: none;
}

.pk3d-vb-object-handle--rotate {
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
}

.pk3d-vb-object-handle--resize {
    right: -20px;
    bottom: -20px;
    cursor: nwse-resize;
}

.pk3d-vb-object-handle--delete {
    top: -20px;
    right: -20px;
}


/* Alpha5.1: physical scale and zoom correction. */
.pk3d-vb-canvas-shell {
    overflow: auto;
}

.pk3d-vb-canvas[data-product="decal"] {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: 0;
    transition: none;
}

.pk3d-vb-canvas[data-product="decal"] > [data-pk3d-canvas-label] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.pk3d-vb-zoom {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.pk3d-vb-zoom__button {
    min-width: 40px;
}

.pk3d-vb-zoom__actual {
    min-width: 58px;
}

.pk3d-vb-zoom__readout {
    min-width: 46px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.pk3d-vb-zoom__scale {
    color: var(--pk3d-muted);
    font-size: 12px;
}


/* Alpha5.2: artwork-driven decal sizing. A decal has no substrate/background. */
.pk3d-vb-canvas[data-product="decal"] {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    outline: 0;
    transition: width .18s ease, height .18s ease;
}

.pk3d-vb-canvas[data-product="decal"].is-empty {
    width: min(82%, 720px);
    height: 240px;
    outline: 0;
}

.pk3d-vb-canvas[data-product="decal"].is-empty [data-pk3d-canvas-label] {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .82);
    color: var(--pk3d-muted);
    font-size: 13px;
    font-weight: 650;
}

/* Alpha5.3: true artwork measurement, editable finished size, and production origin. */
.pk3d-vb-finished-size {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--pk3d-border);
}

.pk3d-vb-finished-size h4 {
    margin: 0;
    background: transparent !important;
    color: #1d2327 !important;
    font-size: 17px;
}

.pk3d-vb-finished-size__lock {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin: 0;
    font-size: 13px;
    font-weight: 650;
}

.pk3d-vb-finished-size__lock input {
    width: 16px;
    min-height: 16px;
    margin: 0;
}

.pk3d-vb-finished-size__hint {
    margin: 0;
    color: var(--pk3d-muted);
    font-size: 12px;
    line-height: 1.45;
}

.pk3d-vb-text-object {
    justify-content: center;
}

.pk3d-vb-text-object__text {
    width: auto;
    line-height: 1;
    transform-origin: center center;
}


/* Alpha5.4: finished artwork bounds guide. */
.pk3d-vb-artwork-guide {
    position: absolute;
    z-index: 1;
    inset: -7px;
    border: 1px dashed rgba(100, 105, 112, .82);
    pointer-events: none;
}

.pk3d-vb-artwork-guide__label {
    position: absolute;
    left: 0;
    bottom: calc(100% + 5px);
    display: inline-block;
    padding: 3px 6px;
    border: 1px solid rgba(195, 196, 199, .95);
    border-radius: 4px;
    background: rgba(255, 255, 255, .94);
    color: #50575e;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

/* Alpha5.4.1: strict proportion lock and customer-facing artwork scaling status. */
.pk3d-vb-scaling-status {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--pk3d-border);
    border-radius: 6px;
    background: #fff;
}

.pk3d-vb-scaling-status__title {
    color: #1d2327;
    font-size: 12px;
}

.pk3d-vb-scaling-status__label {
    font-size: 13px;
    font-weight: 700;
}

.pk3d-vb-scaling-status__message {
    color: var(--pk3d-muted);
    font-size: 12px;
    line-height: 1.4;
}

.pk3d-vb-scaling-status.is-native .pk3d-vb-scaling-status__label {
    color: #2271b1;
}

.pk3d-vb-scaling-status.is-stretched {
    border-color: #dba617;
    background: #fff8e5;
}

.pk3d-vb-scaling-status.is-stretched .pk3d-vb-scaling-status__label {
    color: #8a5a00;
}

.pk3d-vb-scaling-status.is-empty .pk3d-vb-scaling-status__label {
    color: #646970;
}

/* Alpha5.5: Decal square-inch pricing foundation. */
.pk3d-vb-pricing-summary {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--pk3d-border);
    border-radius: 6px;
    background: #fff;
}

.pk3d-vb-pricing-summary h4 {
    margin: 0 0 2px;
    background: transparent !important;
    color: #1d2327 !important;
    font-size: 17px;
}

.pk3d-vb-pricing-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    font-size: 13px;
}

.pk3d-vb-pricing-summary__row span {
    color: var(--pk3d-muted);
}

.pk3d-vb-pricing-summary__row strong {
    color: #1d2327;
    text-align: right;
}

.pk3d-vb-pricing-summary__row:nth-of-type(4) {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--pk3d-border);
}

.pk3d-vb-pricing-summary__row:nth-of-type(4) strong {
    font-size: 17px;
}

.pk3d-vb-pricing-summary__note {
    margin: 2px 0 0;
    color: var(--pk3d-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Alpha6: Decal artwork upload foundation. */
.pk3d-vb-design-object {
    position: absolute;
    z-index: 2;
    cursor: move;
    user-select: none;
    transform-origin: center center;
    touch-action: none;
}

.pk3d-vb-artwork-object {
    display: block;
}

.pk3d-vb-artwork-object__image {
    display: none;
}

.pk3d-vb-artwork-object__vinyl {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}


.pk3d-vb-artwork-object.is-selected::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px dashed #2271b1;
    pointer-events: none;
}

.pk3d-vb-artwork-upload-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.pk3d-vb-artwork-upload-hint,
.pk3d-vb-artwork-note {
    margin: 8px 0 0;
    color: var(--pk3d-muted);
    font-size: 12px;
    line-height: 1.45;
}

.pk3d-vb-artwork-details {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--pk3d-border);
    border-radius: 6px;
    background: #fff;
}

.pk3d-vb-artwork-details > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: baseline;
    font-size: 12px;
}

.pk3d-vb-artwork-details span {
    color: var(--pk3d-muted);
}

.pk3d-vb-artwork-details strong {
    color: #1d2327;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Alpha6.2: uploaded decal artwork is rendered as one selected vinyl color. */
.pk3d-vb-artwork-object__vinyl {
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
}

.pk3d-vb-raster-extraction {
    margin: 12px 0 16px;
    padding: 12px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
}

.pk3d-vb-raster-extraction .pk3d-vb-text-field {
    position: relative;
}

.pk3d-vb-raster-extraction input[type="range"] {
    width: calc(100% - 42px);
}

.pk3d-vb-raster-extraction__value {
    position: absolute;
    right: 0;
    bottom: 6px;
    min-width: 34px;
    text-align: right;
}

.pk3d-vb-raster-extraction__invert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-weight: 600;
}

.pk3d-vb-raster-extraction__help {
    margin: 8px 0 0;
    color: #646970;
    font-size: 12px;
    line-height: 1.45;
}

/* Alpha6.3: fixed workspace and compact tool panel. */
.pk3d-vb-builder {
    max-width: 1500px;
    margin: 12px auto;
}

.pk3d-vb-builder__header {
    align-items: center;
    padding: 14px 18px;
}

.pk3d-vb-builder__header h2 {
    font-size: clamp(24px, 3vw, 32px);
}

.pk3d-vb-builder__header > div > p:last-child {
    font-size: 13px;
}

.pk3d-vb-product-picker {
    width: min(280px, 100%);
}

.pk3d-vb-builder__workspace {
    grid-template-columns: 330px minmax(0, 1fr);
    height: clamp(620px, 78vh, 860px);
    min-height: 0;
}

.pk3d-vb-builder__tools {
    display: flex;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.pk3d-vb-builder__tools-heading {
    flex: 0 0 auto;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--pk3d-border);
}

.pk3d-vb-builder__tools h3 {
    margin: 0 0 4px;
    font-size: 20px;
}

.pk3d-vb-builder__tools-heading p {
    margin: 0;
    color: var(--pk3d-muted);
    font-size: 12px;
    line-height: 1.4;
}

.pk3d-vb-builder__controls {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.pk3d-vb-tool-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    flex: 0 0 auto;
    border-bottom: 1px solid var(--pk3d-border);
    background: #fff;
}

.pk3d-vb-tool-tab {
    min-width: 0;
    min-height: 42px;
    padding: 7px 4px;
    border: 0;
    border-right: 1px solid var(--pk3d-border);
    border-bottom: 3px solid transparent;
    background: #fff;
    color: #50575e;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.pk3d-vb-tool-tab:last-child {
    border-right: 0;
}

.pk3d-vb-tool-tab:hover,
.pk3d-vb-tool-tab:focus-visible {
    background: #f0f6fc;
    color: #135e96;
}

.pk3d-vb-tool-tab.is-active {
    border-bottom-color: #2271b1;
    background: #f0f6fc;
    color: #135e96;
}

.pk3d-vb-tool-panes {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.pk3d-vb-tool-pane {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 14px 16px 20px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.pk3d-vb-tool-pane[hidden] {
    display: none !important;
}

.pk3d-vb-tool-pane__title {
    margin: 0 0 12px;
    background: transparent !important;
    color: #1d2327 !important;
    font-size: 17px;
}

.pk3d-vb-tool-pane .pk3d-vb-control {
    margin-bottom: 14px;
}

.pk3d-vb-tool-pane .pk3d-vb-finished-size,
.pk3d-vb-tool-pane .pk3d-vb-pricing-summary,
.pk3d-vb-tool-pane .pk3d-vb-text-editor {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pk3d-vb-tool-pane .pk3d-vb-pricing-summary {
    margin-top: 14px;
}

.pk3d-vb-text-editor__heading {
    margin-bottom: 10px;
}

.pk3d-vb-artwork-upload-hint {
    margin-top: 6px;
}

.pk3d-vb-builder__stage {
    min-height: 0;
    padding: 12px 16px 0;
    overflow: hidden;
}

.pk3d-vb-zoom {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.pk3d-vb-canvas-shell {
    min-height: 0;
    padding: 18px;
    overflow: auto;
}

.pk3d-vb-builder__status {
    flex: 0 0 auto;
    margin: 0 -16px;
    padding: 9px 16px 10px;
    border-top: 1px solid var(--pk3d-border);
    background: #fff;
}

.pk3d-vb-builder__status-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto)) 1fr;
    justify-content: start;
    gap: 10px 24px;
    align-items: center;
}

.pk3d-vb-builder__credit {
    justify-self: end;
    color: #9ea4ad;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .02em;
    opacity: .82;
    white-space: nowrap;
}

.pk3d-vb-builder__status-summary > span {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    white-space: nowrap;
}

.pk3d-vb-builder__status-summary small {
    color: var(--pk3d-muted);
    font-size: 11px;
    font-weight: 600;
}

.pk3d-vb-builder__status-summary strong {
    color: #1d2327;
    font-size: 13px;
}

.pk3d-vb-builder__validation {
    margin-top: 4px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .pk3d-vb-builder {
        margin: 12px 0;
    }

    .pk3d-vb-builder__workspace {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .pk3d-vb-builder__tools {
        min-height: 430px;
        max-height: 58vh;
        border-right: 0;
        border-bottom: 1px solid var(--pk3d-border);
    }

    .pk3d-vb-builder__stage {
        min-height: 520px;
        overflow: visible;
    }

    .pk3d-vb-canvas-shell {
        min-height: 420px;
    }

    .pk3d-vb-builder__status-summary {
        grid-template-columns: repeat(2, minmax(0, auto));
    }
}

.pk3d-vb-builder__tools {
    flex-direction: column;
}
/* Alpha6.3.1: improve contrast automatically when White vinyl is selected. */
.pk3d-vb-canvas-shell.pk3d-vb-canvas-shell--white-vinyl {
    border-color: #73777c;
    background-color: #5f646a;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .055) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, .055) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .055) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .055) 75%);
}


/* Alpha6.4: auto-fit preview notice. */
.pk3d-vb-zoom__notice {
    flex: 1 1 320px;
    min-width: 220px;
    color: var(--pk3d-muted);
    font-size: 12px;
    font-weight: 650;
}

/* Alpha6.4.1: keep artwork scaling status visible for the full design session. */
.pk3d-vb-builder__header-session {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 14px;
    min-width: min(620px, 52%);
}

.pk3d-vb-builder__header-session .pk3d-vb-scaling-status {
    width: min(300px, 100%);
    min-width: 240px;
    align-self: stretch;
}

.pk3d-vb-builder__header-session .pk3d-vb-product-picker {
    flex: 0 0 min(280px, 100%);
}

@media (max-width: 980px) {
    .pk3d-vb-builder__header { align-items: stretch; }
    .pk3d-vb-builder__header-session {
        min-width: 0;
        width: min(520px, 100%);
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .pk3d-vb-builder__header-session .pk3d-vb-scaling-status,
    .pk3d-vb-builder__header-session .pk3d-vb-product-picker {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }
}

@media (max-width: 800px) {
    .pk3d-vb-builder__header-session { width: 100%; }
}


/* Alpha6.4.2: restore stretched artwork to native proportions from the persistent status card. */
.pk3d-vb-scaling-status__restore {
    margin-top: 5px;
    padding: 6px 9px;
    border: 1px solid #b77900;
    border-radius: 4px;
    background: #fff;
    color: #6f4700;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.pk3d-vb-scaling-status__restore:hover,
.pk3d-vb-scaling-status__restore:focus {
    background: #fff3c4;
}

/* Alpha7: fixed 4-inch coaster product foundation. */
.pk3d-vb-canvas[data-product="coaster"],
.pk3d-vb-canvas[data-product="plaque"] {
    position: relative;
    width: min(88%, 560px);
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(0, 0, 0, .28);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
    color: #50575e;
    transition: width .18s ease, height .18s ease, border-radius .18s ease, background .18s ease;
}

/* Alpha7.1.14: shared fixed-product production boundary. Decals are intentionally excluded. */
.pk3d-vb-canvas[data-product]:not([data-product="decal"])::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 6.25%;
    border: 2px dashed rgba(214, 54, 56, .88);
    border-radius: inherit;
    pointer-events: none;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="round"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="round"] {
    border-radius: 50%;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="square"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="square"] {
    border-radius: 4px;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="rounded"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rounded"] {
    border-radius: 32px;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="square"]::before,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="square"]::before {
    border-radius: 2px;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="rounded"]::before,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rounded"]::before {
    border-radius: 24px;
}


.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rectangle-horizontal"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rectangle-vertical"] {
    border-radius: 4px;
}

.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rectangle-horizontal"]::before,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rectangle-vertical"]::before {
    border-radius: 2px;
}


.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"][data-plaque-shape="rectangle-horizontal"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"][data-plaque-shape="rectangle-vertical"] {
    background-color: #e1c294 !important;
    background-image: url('../images/plaque-basswood-fixed-scale-tile.webp') !important;
    background-position: center;
    background-repeat: repeat;
    background-size: auto;
    border-color: rgba(126, 88, 49, .42);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        inset 0 0 18px rgba(122,78,33,.10),
        0 9px 21px rgba(79,52,29,.15);
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"],

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"] {
    background-color: #c99a62;
    background-image:
        repeating-linear-gradient(3deg, rgba(91,56,28,.10) 0 1px, transparent 1px 9px),
        linear-gradient(90deg, rgba(255,255,255,.12), rgba(91,56,28,.05));
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="cork"] {
    background-color: #b88a57;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(76,47,25,.22) 0 1px, transparent 1.5px),
        radial-gradient(circle at 65% 70%, rgba(255,255,255,.13) 0 1px, transparent 1.5px),
        radial-gradient(circle at 82% 18%, rgba(76,47,25,.18) 0 1px, transparent 1.5px);
    background-size: 15px 15px, 19px 19px, 23px 23px;
}

/* Alpha7.1.5: realistic coaster material textures. */
.pk3d-vb-canvas[data-product="coaster"],
.pk3d-vb-canvas[data-product="plaque"] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"],

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"] {
    background-color: #e1c294;
    background-image: var(--pk3d-coaster-wood-photo, url('../images/coaster-wood-texture.svg'));
    border-color: rgba(126, 88, 49, .42);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        inset 0 0 18px rgba(122,78,33,.10),
        0 9px 21px rgba(79,52,29,.15);
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="cork"] {
    background-color: #b98a57;
    background-image: var(--pk3d-coaster-cork-photo, url('../images/coaster-cork-texture.svg'));
    border-color: rgba(105, 69, 38, .44);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.13),
        inset 0 0 16px rgba(90,57,30,.12),
        0 8px 19px rgba(78,49,27,.14);
}

.pk3d-vb-canvas[data-product="coaster"] > [data-pk3d-canvas-label],
.pk3d-vb-canvas[data-product="plaque"] > [data-pk3d-canvas-label] {
    position: relative;
    z-index: 2;
    max-width: 70%;
    padding: 8px 10px;
    border-radius: 5px;
    background: rgba(255,255,255,.82);
    color: #2c3338;
    font-size: 13px;
}

.pk3d-vb-canvas[data-product="coaster"] .pk3d-vb-design-object,
.pk3d-vb-canvas[data-product="plaque"] .pk3d-vb-design-object {
    z-index: 3;
}

.pk3d-vb-coaster-note {
    margin: 10px 0 0;
    color: var(--pk3d-muted);
    font-size: 12px;
    line-height: 1.45;
}


.pk3d-vb-plaque-note {
    margin: 10px 0 0;
    color: var(--pk3d-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* Alpha7.1.1: true circular coaster text path and curve reset. */
.pk3d-vb-text-object__text.is-arched {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform: none !important;
}


/* Alpha7.1.1: true circular plaque text path and curve reset. */
.pk3d-vb-text-object__text.is-arched {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform: none !important;
}
.pk3d-vb-arched-character {
    position: absolute;
    display: block;
    line-height: 1;
    transform-origin: center center;
    white-space: pre;
}

.pk3d-vb-reset-curve {
    width: 100%;
    margin-top: 10px;
}

.pk3d-vb-text-object__text.is-arched {
    overflow: visible;
}

/* Alpha7.1.6: photo-based coaster substrate presentation. */
.pk3d-vb-canvas[data-product="coaster"],
.pk3d-vb-canvas[data-product="plaque"] {
    background-position: center center;
    background-size: cover;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"],

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"] {
    background-color: #f0dfc4;
    background-blend-mode: soft-light;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="cork"] {
    background-color: #c89964;
    background-blend-mode: multiply;
}

/* Alpha7.1.7: embedded real-photo coaster substrates. */
.pk3d-vb-canvas[data-product="coaster"],
.pk3d-vb-canvas[data-product="plaque"] {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: normal;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), inset 0 0 24px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.18);
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"],

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"] {
    background-color: #eadabc;
    background-image: url('../images/coaster-wood-photo.webp');
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="cork"] {
    background-color: #c8965f;
    background-image: url('../images/coaster-cork-photo.webp');
}

.pk3d-vb-canvas[data-product="coaster"]::after,
.pk3d-vb-canvas[data-product="plaque"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.16);
    z-index: 0;
}

.pk3d-vb-canvas[data-product="coaster"] > *:not(.pk3d-vb-design-object),
.pk3d-vb-canvas[data-product="plaque"] > *:not(.pk3d-vb-design-object) {
    position: relative;
    z-index: 1;
}

/* Alpha8.9.15.13: design objects must remain absolutely positioned.
 * The older coaster direct-child rule had higher specificity than
 * .pk3d-vb-design-object and forced text/artwork into normal document flow,
 * which placed newly added objects below the visible product. */
.pk3d-vb-canvas[data-product="coaster"] > .pk3d-vb-design-object,
.pk3d-vb-canvas[data-product="plaque"] > .pk3d-vb-design-object {
    position: absolute;
    z-index: 3;
}


/* Alpha7.1.9: complete actual coaster substrates supplied by PK3D Design. */
.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"],
.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"],
.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="cork"] {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"]::after,
.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"]::after,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"]::after,
.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"]::after,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="cork"]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: none;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.20));
    pointer-events: none;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"][data-coaster-shape="round"]::after,

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"][data-coaster-shape="square"]::after,

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"][data-coaster-shape="round"]::after,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"][data-plaque-shape="round"]::after {
    background-image: url('../images/coaster-wood-round-photo.webp');
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"][data-coaster-shape="square"]::after,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"][data-plaque-shape="square"]::after {
    background-image: url('../images/coaster-wood-square-photo.webp');
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"][data-coaster-shape="rounded"]::after,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="wood"][data-plaque-shape="rounded"]::after {
    background-image: url('../images/coaster-wood-rounded-photo.webp');
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"][data-coaster-shape="round"]::after,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="cork"][data-plaque-shape="round"]::after {
    background-image: url('../images/coaster-cork-round-photo.webp');
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"][data-coaster-shape="square"]::after,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="cork"][data-plaque-shape="square"]::after {
    background-image: url('../images/coaster-cork-square-photo.webp');
}


/* Alpha7.1.11: unrestricted coaster editing with production-boundary validation. */
.pk3d-vb-production-preview-toggle {
    width: 100%;
    margin-top: 14px;
}



/* Alpha7.1.11: unrestricted plaque editing with production-boundary validation. */
.pk3d-vb-production-preview-toggle {
    width: 100%;
    margin-top: 14px;
}

.pk3d-vb-canvas[data-product="coaster"],
.pk3d-vb-canvas[data-product="plaque"] {
    overflow: visible;
}

.pk3d-vb-canvas[data-product="coaster"].is-production-preview,
.pk3d-vb-canvas[data-product="plaque"].is-production-preview {
    overflow: hidden !important;
}

.pk3d-vb-builder__validation.is-warning {
    color: #8a4b00;
    background: #fff8e5;
    border: 1px solid #dba617;
    border-radius: 6px;
    padding: 8px 10px;
}

/* Alpha7.1.14: persistent guidance for all fixed-boundary products. */
.pk3d-vb-boundary-guidance {
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(214, 54, 56, .42);
    border-left: 4px solid #d63638;
    border-radius: 6px;
    background: #fff8e5;
    color: #5f3700;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
}

.pk3d-vb-boundary-guidance[hidden] {
    display: none !important;
}

/* Alpha8: universal fixed-product engine. Decals remain artwork-driven. */
.pk3d-vb-canvas[data-product]:not([data-product="decal"]) {
    overflow: visible;
}

.pk3d-vb-canvas[data-product]:not([data-product="decal"]).is-production-preview {
    overflow: hidden !important;
}

.pk3d-vb-canvas[data-product="dog-tag"] {
    min-height: 0;
    padding: 0;
    border: 2px solid #9aa0a6;
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 50%, transparent 0 10px, #c7ccd1 11px 13px, transparent 14px),
        linear-gradient(145deg, #f6f7f8, #c7ccd1 48%, #f4f5f6);
    box-shadow: inset 0 0 18px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.12);
}

/* .15.99: independent Tumbler physical presentation.
   The canvas is the actual 6.89 in × 3.50 in product envelope. The visible
   body tapers to the 2.76 in base, while the red guide is the centered
   5.00 in designable body. This does not share geometry with other products. */
.pk3d-vb-canvas[data-product="tumbler"] {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
    /* .16.01: clip every customer design object to the real tapered physical
       silhouette. This makes the hidden/wrap edge taper with the tumbler
       instead of behaving like a straight-sided cylinder. */
    clip-path: polygon(0 0, 100% 0, calc((100% - var(--pk3d-tumbler-bottom-ratio, 78.8571%)) / 2 + var(--pk3d-tumbler-bottom-ratio, 78.8571%)) 100%, calc((100% - var(--pk3d-tumbler-bottom-ratio, 78.8571%)) / 2) 100%);
}

.pk3d-vb-canvas[data-product="tumbler"]::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, calc((100% - var(--pk3d-tumbler-bottom-ratio, 78.8571%)) / 2 + var(--pk3d-tumbler-bottom-ratio, 78.8571%)) 100%, calc((100% - var(--pk3d-tumbler-bottom-ratio, 78.8571%)) / 2) 100%);
    /* .16.04: the physical tumbler remains silver/gray. Only the centered
       5.00-inch coating/design area receives the selected Tumbler Design Color. */
    background:
        linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.10) 22%, rgba(255,255,255,.30) 48%, rgba(0,0,0,.08) 76%, rgba(0,0,0,.20)),
        linear-gradient(to bottom,
            #d9dde1 0 var(--pk3d-tumbler-design-offset, 13.7155%),
            var(--pk3d-tumbler-design-color, #111111) var(--pk3d-tumbler-design-offset, 13.7155%) calc(100% - var(--pk3d-tumbler-design-offset, 13.7155%)),
            #d9dde1 calc(100% - var(--pk3d-tumbler-design-offset, 13.7155%)) 100%);
    border-radius: 5% 5% 9% 9% / 2% 2% 3% 3%;
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
    pointer-events: none;
}

.pk3d-vb-canvas[data-product="tumbler"]::before {
    /* .16.00: only the top and bottom design limits are shown. The physical
       tapered tumbler edges already define the visible left/right limits. */
    inset: var(--pk3d-tumbler-design-offset, 13.7155%) 3% !important;
    border: 0 !important;
    border-top: 2px dashed #d63638 !important;
    border-bottom: 2px dashed #d63638 !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 89.4286% 100%, 10.5714% 100%);
}

.pk3d-vb-canvas[data-product="tumbler"][data-tumbler-orientation="side"] {
    clip-path: polygon(0 calc((100% - var(--pk3d-tumbler-bottom-ratio, 78.8571%)) / 2), 100% 0, 100% 100%, 0 calc((100% - var(--pk3d-tumbler-bottom-ratio, 78.8571%)) / 2 + var(--pk3d-tumbler-bottom-ratio, 78.8571%)));
}

.pk3d-vb-canvas[data-product="tumbler"][data-tumbler-orientation="side"]::after {
    clip-path: polygon(0 10.5714%, 100% 0, 100% 100%, 0 89.4286%);
    background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.10) 22%, rgba(255,255,255,.30) 48%, rgba(0,0,0,.08) 76%, rgba(0,0,0,.20)),
        linear-gradient(to right,
            #d9dde1 0 var(--pk3d-tumbler-design-offset, 13.7155%),
            var(--pk3d-tumbler-design-color, #111111) var(--pk3d-tumbler-design-offset, 13.7155%) calc(100% - var(--pk3d-tumbler-design-offset, 13.7155%)),
            #d9dde1 calc(100% - var(--pk3d-tumbler-design-offset, 13.7155%)) 100%);
}

.pk3d-vb-canvas[data-product="tumbler"][data-tumbler-orientation="side"]::before {
    inset: 3% var(--pk3d-tumbler-design-offset, 13.7155%) !important;
    border: 0 !important;
    border-left: 2px dashed #d63638 !important;
    border-right: 2px dashed #d63638 !important;
    clip-path: polygon(0 10.5714%, 100% 0, 100% 100%, 0 89.4286%);
}


.pk3d-vb-canvas[data-product]:not([data-product="decal"]) > [data-pk3d-canvas-label] {
    position: relative;
    z-index: 2;
    max-width: 72%;
    padding: 8px 10px;
    border-radius: 5px;
    background: rgba(255,255,255,.86);
    color: #2c3338;
    font-size: 13px;
}


/* Alpha8.4: decal production-width validation. */
.pk3d-vb-production-limit-notice {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #d63638;
    border-radius: 6px;
    background: #fcf0f1;
    color: #8a2424;
    font-size: 12px;
    line-height: 1.4;
}

.pk3d-vb-production-limit-notice[hidden] {
    display: none !important;
}

.pk3d-vb-production-limit-notice strong {
    font-size: 13px;
}

.pk3d-vb-finished-size.has-production-limit-error input[type=number] {
    border-color: #d63638;
}


/* Alpha8.5: administrator-controlled Builder appearance. */
.pk3d-vb-builder__logo { display:block; width:auto; max-width:min(var(--pk3d-logo-width, 180px), 100%); max-height:96px; margin:0 0 12px; object-fit:contain; }
.pk3d-vb-builder__header { background:var(--pk3d-header-bg, #fff); border-color:var(--pk3d-border, #dcdcde); }
.pk3d-vb-builder__tools { background:var(--pk3d-panel, #f6f7f7); border-color:var(--pk3d-border, #dcdcde); }
.pk3d-vb-builder__stage { background:var(--pk3d-stage-bg, #fff); }
.pk3d-vb-builder, .pk3d-vb-builder h2, .pk3d-vb-builder h3, .pk3d-vb-builder h4, .pk3d-vb-builder strong { color:var(--pk3d-text, #1d2327); }
.pk3d-vb-builder p, .pk3d-vb-builder small, .pk3d-vb-control__hint, .pk3d-vb-text-editor__empty, .pk3d-vb-text-geometry span { color:var(--pk3d-muted, #646970); }
.pk3d-vb-builder input:not([type=checkbox]):not([type=radio]):not([type=color]), .pk3d-vb-builder select, .pk3d-vb-builder textarea { background:var(--pk3d-input-bg, #fff); color:var(--pk3d-input-text, #1d2327); border-color:var(--pk3d-border, #8c8f94); }
.pk3d-vb-button { background:var(--pk3d-input-bg, #fff); color:var(--pk3d-input-text, #1d2327); border-color:var(--pk3d-border, #8c8f94); }
.pk3d-vb-button:hover:not(:disabled) { border-color:var(--pk3d-primary-hover, #135e96); }
.pk3d-vb-button--primary { background:var(--pk3d-primary, #2271b1); border-color:var(--pk3d-primary, #2271b1); color:var(--pk3d-primary-text, #fff); }
.pk3d-vb-button--primary:hover:not(:disabled) { background:var(--pk3d-primary-hover, #135e96); border-color:var(--pk3d-primary-hover, #135e96); }
.pk3d-vb-text-object.is-selected::after, .pk3d-vb-artwork-object.is-selected::after, .pk3d-vb-object-handle { border-color:var(--pk3d-selection, #2271b1); }
.pk3d-vb-scaling-status:not(.is-empty), .pk3d-vb-builder__validation.is-valid { accent-color:var(--pk3d-accent, #dba617); }

@media (max-width: 700px) {
    .pk3d-vb-builder__status-summary { grid-template-columns: repeat(2, minmax(0, auto)); }
    .pk3d-vb-builder__credit { grid-column: 1 / -1; justify-self: end; }
}

/* Alpha8.6: granular administrator-controlled appearance areas. */
.pk3d-vb-builder { background:var(--pk3d-builder-bg,#fff); border-color:var(--pk3d-builder-border,#dcdcde); }
.pk3d-vb-builder__header { background:var(--pk3d-header-bg,#fff); border-color:var(--pk3d-header-border,#dcdcde); }
.pk3d-vb-builder__header .pk3d-vb-builder__eyebrow { color:var(--pk3d-header-company,#646970) !important; }
.pk3d-vb-builder__header h2 { color:var(--pk3d-header-title,#1d2327) !important; }
.pk3d-vb-builder__brand > p:not(.pk3d-vb-builder__eyebrow) { color:var(--pk3d-header-description,#646970) !important; }
.pk3d-vb-product-picker > span { color:var(--pk3d-header-label,#1d2327); }
.pk3d-vb-product-picker select { background:var(--pk3d-header-input-bg,#fff) !important; color:var(--pk3d-header-input-text,#1d2327) !important; border-color:var(--pk3d-header-input-border,#8c8f94) !important; }

.pk3d-vb-builder__tools { background:var(--pk3d-tools-bg,#f6f7f7); border-color:var(--pk3d-tools-border,#dcdcde); }
.pk3d-vb-builder__tools-heading { border-color:var(--pk3d-tools-border,#dcdcde); }
.pk3d-vb-builder__tools h3, .pk3d-vb-tool-pane__title, .pk3d-vb-text-editor h4 { color:var(--pk3d-tools-title,#1d2327) !important; }
.pk3d-vb-builder__tools-heading p { color:var(--pk3d-tools-description,#646970) !important; }
.pk3d-vb-tool-tabs { background:var(--pk3d-tabs-bg,#fff); border-color:var(--pk3d-tools-border,#dcdcde); }
.pk3d-vb-tool-tab { background:var(--pk3d-tabs-bg,#fff); color:var(--pk3d-tabs-text,#50575e); border-color:var(--pk3d-tools-border,#dcdcde); }
.pk3d-vb-tool-tab:hover, .pk3d-vb-tool-tab:focus-visible, .pk3d-vb-tool-tab.is-active { background:var(--pk3d-tabs-active-bg,#f0f6fc); color:var(--pk3d-tabs-active-text,#135e96); }
.pk3d-vb-tool-tab.is-active { border-bottom-color:var(--pk3d-tabs-active-border,#2271b1); }
.pk3d-vb-tool-panes, .pk3d-vb-tool-pane { background:var(--pk3d-pane-bg,#f6f7f7); }
.pk3d-vb-tool-pane label, .pk3d-vb-control label, .pk3d-vb-control--checkbox span { color:var(--pk3d-control-label,#1d2327); }
.pk3d-vb-control__hint, .pk3d-vb-artwork-upload-hint, .pk3d-vb-text-editor__empty, .pk3d-vb-text-geometry span { color:var(--pk3d-control-hint,#646970) !important; }
.pk3d-vb-builder__tools input:not([type=checkbox]):not([type=radio]):not([type=color]), .pk3d-vb-builder__tools select, .pk3d-vb-builder__tools textarea { background:var(--pk3d-input-bg,#fff) !important; color:var(--pk3d-input-text,#1d2327) !important; border-color:var(--pk3d-input-border,#8c8f94) !important; }

.pk3d-vb-builder__stage { background:var(--pk3d-stage-bg,#fff); }
.pk3d-vb-canvas-shell { background-color:var(--pk3d-canvas-shell-bg,#fff); border-color:var(--pk3d-canvas-shell-border,#c3c4c7); }
.pk3d-vb-canvas { background-color:var(--pk3d-canvas-bg,#fff); border-color:var(--pk3d-canvas-border,#8c8f94); color:var(--pk3d-canvas-text,#646970); }

.pk3d-vb-button { background:var(--pk3d-button-bg,#fff); color:var(--pk3d-button-text,#1d2327); border-color:var(--pk3d-button-border,#8c8f94); }
.pk3d-vb-button:hover:not(:disabled) { border-color:var(--pk3d-button-hover,#135e96); }
.pk3d-vb-button--primary { background:var(--pk3d-primary,#2271b1); border-color:var(--pk3d-primary,#2271b1); color:var(--pk3d-primary-text,#fff); }
.pk3d-vb-button--primary:hover:not(:disabled) { background:var(--pk3d-primary-hover,#135e96); border-color:var(--pk3d-primary-hover,#135e96); }
.pk3d-vb-text-object.is-selected::after, .pk3d-vb-artwork-object.is-selected::after, .pk3d-vb-object-handle { border-color:var(--pk3d-selection,#2271b1); }

.pk3d-vb-builder__status { background:var(--pk3d-status-bg,#fff); border-color:var(--pk3d-status-border,#dcdcde); }
.pk3d-vb-builder__status-summary small { color:var(--pk3d-status-label,#646970); }
.pk3d-vb-builder__status-summary strong { color:var(--pk3d-status-value,#1d2327); }
.pk3d-vb-builder__validation { color:var(--pk3d-status-message,#646970); }


/* Alpha8.6.2: granular Builder Header artwork-status appearance. */
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status,
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status.is-empty,
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status.is-native,
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status.is-stretched {
    background: var(--pk3d-header-artwork-bg, #ffffff) !important;
    border-color: var(--pk3d-header-artwork-border, #dcdcde) !important;
}
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status__title,
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status__label,
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status.is-empty .pk3d-vb-scaling-status__label,
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status.is-native .pk3d-vb-scaling-status__label,
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status.is-stretched .pk3d-vb-scaling-status__label {
    color: var(--pk3d-header-artwork-primary, #646970) !important;
}
.pk3d-vb-builder__header-session .pk3d-vb-scaling-status__message {
    color: var(--pk3d-header-artwork-secondary, #646970) !important;
}


/* Alpha8.6.3: independent finished-size title and Order summary appearance. */
.pk3d-vb-finished-size h4 { color: var(--pk3d-finished-size-title, #1d2327) !important; }
.pk3d-vb-pricing-summary { background: var(--pk3d-order-summary-bg, #ffffff) !important; border-color: var(--pk3d-order-summary-border, #dcdcde) !important; }
.pk3d-vb-pricing-summary h4 { color: var(--pk3d-order-summary-heading, #1d2327) !important; }
.pk3d-vb-pricing-summary__row span { color: var(--pk3d-order-summary-label, #646970) !important; }
.pk3d-vb-pricing-summary__row strong { color: var(--pk3d-order-summary-value, #1d2327) !important; }
.pk3d-vb-pricing-summary__row:nth-of-type(4) { border-top-color: var(--pk3d-order-summary-divider, #dcdcde) !important; }
.pk3d-vb-pricing-summary__note { color: var(--pk3d-order-summary-notice, #646970) !important; }


/* Alpha8.6.4: adaptive Decal canvas preview background. Display only; never alters artwork or production output. */
.pk3d-vb-preview-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
.pk3d-vb-preview-controls__label {
    color: var(--pk3d-preview-label, #646970);
    font-size: 12px;
    font-weight: 650;
    margin-right: 2px;
}
.pk3d-vb-preview-controls__button {
    padding: 6px 9px;
    border: 1px solid var(--pk3d-preview-button-border, #8c8f94);
    border-radius: 4px;
    background: var(--pk3d-preview-button-bg, #ffffff);
    color: var(--pk3d-preview-button-text, #1d2327);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
}
.pk3d-vb-preview-controls__button.is-active {
    background: var(--pk3d-preview-active-bg, #2271b1);
    color: var(--pk3d-preview-active-text, #ffffff);
    border-color: var(--pk3d-preview-active-border, #2271b1);
}
.pk3d-vb-canvas-shell.pk3d-vb-preview--light {
    background-color: #f2f3f4 !important;
    background-image: none !important;
}
.pk3d-vb-canvas-shell.pk3d-vb-preview--dark {
    background-color: #50555b !important;
    background-image: none !important;
}
.pk3d-vb-canvas-shell.pk3d-vb-preview--transparency {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(45deg, #c7c9cc 25%, transparent 25%),
        linear-gradient(-45deg, #c7c9cc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #c7c9cc 75%),
        linear-gradient(-45deg, transparent 75%, #c7c9cc 75%) !important;
    background-size: 24px 24px !important;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
}
@media (max-width: 900px) {
    .pk3d-vb-preview-controls { flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
}


/* Alpha8.7: secure saved-design foundation. */
.pk3d-vb-save-design {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.pk3d-vb-save-design__result {
    font-size: 13px;
    font-weight: 700;
    color: var(--pk3d-status-value, #1d2327);
}
.pk3d-vb-save-design .pk3d-vb-button[disabled] {
    opacity: .65;
    cursor: wait;
}

/* Alpha8.7.2: make Save Design progress/results unmistakable. */
.pk3d-vb-save-design__result {
    display: block;
    margin-top: 10px;
    min-height: 1.5em;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}


/* Alpha8.8.5: prominent customer Design ID save confirmation. */
.pk3d-vb-save-design__confirmation {
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    margin-top: 4px;
    padding: 14px;
    border: 2px solid var(--pk3d-primary, #2271b1);
    border-radius: 7px;
    background: var(--pk3d-status-bg, #fff);
}
.pk3d-vb-save-design__confirmation[hidden] { display: none !important; }
.pk3d-vb-save-design__confirmation-label { font-size: 12px; font-weight: 700; color: var(--pk3d-status-label, #646970); }
.pk3d-vb-save-design__design-id { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; color: var(--pk3d-status-value, #1d2327); }
.pk3d-vb-save-design__important { grid-column: 1 / -1; display: block; font-size: 14px; line-height: 1.4; color: var(--pk3d-status-value, #1d2327); }
.pk3d-vb-save-design__copy-status { grid-column: 1 / -1; min-height: 1em; font-size: 12px; font-weight: 700; color: var(--pk3d-status-message, #646970); }
@media (max-width: 700px) {
    .pk3d-vb-save-design__confirmation { grid-template-columns: 1fr; }
    .pk3d-vb-save-design__important, .pk3d-vb-save-design__copy-status { grid-column: 1; }
}

/* alpha8.9.13: approved-design WooCommerce handoff. */
.pk3d-vb-approved-cart { grid-column: 1 / -1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; padding-top:12px; border-top:1px solid rgba(127,127,127,.3); }
.pk3d-vb-approved-cart[hidden] { display:none !important; }
.pk3d-vb-approved-cart span { font-size:12px; font-weight:600; }


/* alpha8.9.13.2.3: larger two-line approved-design cart handoff button. */
.pk3d-vb-approved-cart__button {
    min-width: 340px;
    max-width: 100%;
    padding: 14px 24px;
    text-align: center;
    line-height: 1.15;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}
/* alpha8.9.13.2.3.1: force the two labels onto separate centered lines.
   The direct-child selector intentionally outranks the generic approved-cart span rule
   and common theme button-span rules. */
.pk3d-vb-approved-cart__button > .pk3d-vb-approved-cart__button-primary,
.pk3d-vb-approved-cart__button > .pk3d-vb-approved-cart__button-secondary {
    display: block !important;
    width: 100%;
    text-align: center !important;
    font-weight: 900 !important;
    line-height: 1.15;
    flex: 0 0 auto !important;
}
.pk3d-vb-approved-cart__button > .pk3d-vb-approved-cart__button-primary { font-size: 17px !important; }
.pk3d-vb-approved-cart__button > .pk3d-vb-approved-cart__button-secondary { margin-top: 0; font-size: 14px !important; }

/* Alpha8.9.14: expandable Admin-controlled coaster material product images. */
.pk3d-vb-canvas[data-product="coaster"].has-coaster-product-image {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

.pk3d-vb-canvas[data-product="coaster"].has-coaster-product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: var(--pk3d-coaster-product-image) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: none;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.20));
    pointer-events: none;
}

/* Plaque owns its product-image state and CSS variable independently. */
.pk3d-vb-canvas[data-product="plaque"].has-plaque-product-image {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

.pk3d-vb-canvas[data-product="plaque"].has-plaque-product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: var(--pk3d-plaque-product-image) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: none;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.20));
    pointer-events: none;
}


/* Alpha8.9.15.7: Custom Shape authoritative physical-bounds guide. */
.pk3d-vb-coaster-outline-box { margin: 14px 0; padding: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; }



/* Alpha8.9.15.7: Custom Shape authoritative physical-bounds guide. */
.pk3d-vb-plaque-outline-box { margin: 14px 0; padding: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; }
.pk3d-vb-coaster-outline-box p { margin: 7px 0; }

.pk3d-vb-plaque-outline-box p { margin: 7px 0; }
.pk3d-vb-coaster-outline-status { font-weight: 600; }

.pk3d-vb-plaque-outline-status { font-weight: 600; }

/* Blue remains the ordinary editor selection rectangle only. */
.pk3d-vb-artwork-object.is-coaster-outline,
.pk3d-vb-object.is-coaster-outline { outline: 0; box-shadow: none; }


/* Blue remains the ordinary editor selection rectangle only. */
.pk3d-vb-artwork-object.is-plaque-outline,
.pk3d-vb-object.is-plaque-outline { outline: 0; box-shadow: none; }

/* Custom Shape has no generic square product/safe-area overlay. */
.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="custom"]::before { display: none; }


/* Custom Shape has no generic square product/safe-area overlay. */
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="custom"]::before { display: none; }
.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="custom"] { border-radius: 0; }

.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="custom"] { border-radius: 0; }
.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="custom"]::after { display: none; }

.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="custom"]::after { display: none; }

/* Green rectangle = the authoritative processed production bounds.
   Its width/height are generated from coasterOutlineProductionBounds(),
   exactly the same geometry used by the customer-facing finished size. */
.pk3d-vb-custom-coaster-guide {
    position: absolute;
    z-index: 5;
    border: 2px solid #16a34a;
    pointer-events: none;
}


/* Green rectangle = the authoritative processed production bounds.
   Its width/height are generated from plaqueOutlineProductionBounds(),
   exactly the same geometry used by the customer-facing finished size. */
.pk3d-vb-custom-plaque-guide {
    position: absolute;
    z-index: 5;
    border: 2px solid #16a34a;
    pointer-events: none;
}
.pk3d-vb-custom-coaster-guide__label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    padding: 3px 7px;
    border: 1px solid #16a34a;
    border-radius: 4px;
    background: #ecfdf3;
    color: #087a35;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.pk3d-vb-custom-plaque-guide__label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    padding: 3px 7px;
    border: 1px solid #16a34a;
    border-radius: 4px;
    background: #ecfdf3;
    color: #087a35;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* Alpha8.9.15.9: designated Custom Shape artwork is geometry only.
   Its visible face uses the selected Admin-controlled coaster material surface. */
.pk3d-vb-artwork-object.is-coaster-outline .pk3d-vb-artwork-object__vinyl--custom-coaster-surface {
    background-origin: border-box;
    background-clip: border-box;
}


/* Alpha8.9.15.9: designated Custom Shape artwork is geometry only.
   Its visible face uses the selected Admin-controlled plaque material surface. */
.pk3d-vb-artwork-object.is-plaque-outline .pk3d-vb-artwork-object__vinyl--custom-plaque-surface {
    background-origin: border-box;
    background-clip: border-box;
}

/* Alpha8.9.15.10: product-relative placement/alignment controls. */
.pk3d-vb-product-alignment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 14px 0;
}
.pk3d-vb-product-alignment__label {
    grid-column: 1 / -1;
    display: block;
    margin-bottom: 1px;
}
.pk3d-vb-product-alignment__button {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
}

/* Alpha8.9.15.14.3: Reverse Etched keeps the real material photograph.
 * Darken the existing product image/surface instead of covering it with a
 * replacement color so wood grain and other physical texture stay visible.
 * Design objects remain above the darkened surface as the untouched material. */
.pk3d-vb-canvas[data-product="coaster"][data-coaster-engraving="etched"] .pk3d-vb-text-object,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-engraving="etched"] .pk3d-vb-text-object {
    color: var(--pk3d-coaster-engraved-color, #666);
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-engraving="reverse"] .pk3d-vb-artwork-object__vinyl--custom-coaster-surface,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-engraving="reverse"] .pk3d-vb-artwork-object__vinyl--custom-plaque-surface {
    filter: brightness(0.65);
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-engraving="reverse"] > .pk3d-vb-design-object,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-engraving="reverse"] > .pk3d-vb-design-object {
    z-index: 3;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-engraving="reverse"] .pk3d-vb-text-object,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-engraving="reverse"] .pk3d-vb-text-object {
    color: var(--pk3d-coaster-untouched-color, #d0d0d0);
}


/* Alpha8.9.15.15: reusable customer layer manager for fixed products.
 * Product/material backgrounds remain protected outside the customer layer stack. */
.pk3d-vb-layers-panel { display: grid; gap: 10px; }
.pk3d-vb-layers__help { margin: 0; font-size: 12px; line-height: 1.4; }
.pk3d-vb-layers { display: grid; gap: 7px; }
.pk3d-vb-layer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    padding: 7px;
    border: 1px solid var(--pk3d-input-border, #8c8f94);
    border-radius: 5px;
    background: var(--pk3d-input-bg, #fff);
}
.pk3d-vb-layer-row.is-selected { outline: 2px solid var(--pk3d-selection, #2271b1); outline-offset: 1px; }
.pk3d-vb-layer-row__select {
    min-width: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--pk3d-input-text, #1d2327);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.pk3d-vb-layer-row__actions { display: flex; gap: 4px; }
.pk3d-vb-layer-row__move,
.pk3d-vb-layer-row__delete {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--pk3d-button-border, #8c8f94);
    border-radius: 4px;
    background: var(--pk3d-button-bg, #fff);
    color: var(--pk3d-button-text, #1d2327);
    font-weight: 800;
    cursor: pointer;
}
.pk3d-vb-layer-row__move:disabled { opacity: .35; cursor: default; }

/* Plaque rectangles use the exact Square Rounded Corner Basswood product image,
 * displayed at the fixed 4x2 or 2x4 physical aspect ratio. */
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"][data-plaque-shape="rectangle-horizontal"],
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"][data-plaque-shape="rectangle-vertical"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: var(--pk3d-plaque-corner-radius, 18px) !important;
    overflow: visible;
}

.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"][data-plaque-shape="rectangle-horizontal"]::after,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"][data-plaque-shape="rectangle-vertical"]::after {
    background-image: var(--pk3d-plaque-product-image) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.20)) !important;
}

.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rectangle-horizontal"]::before,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rectangle-vertical"]::before {
    border-radius: 24px !important;
}

/* .15.47 Plaque-owned dynamic Basswood substrate for Square Rounded Corner. */
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"][data-plaque-shape="rounded"]:not(.has-plaque-product-image) {
    background-color: #dfbd8a !important;
    background-image: url('../images/plaque-basswood-fixed-scale-tile.webp') !important;
    background-repeat: repeat !important;
    background-position: center !important;
    background-size: var(--pk3d-plaque-basswood-tile-size, 180px) var(--pk3d-plaque-basswood-tile-size, 180px) !important;
    border: 2px solid rgba(78,48,24,.88) !important;
    border-radius: 32px !important;
    box-shadow: none !important;
    overflow: visible;
}
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rounded"]::before {
    border-radius: var(--pk3d-plaque-safe-corner-radius, 14px) !important;
}


/* .15.50: Dynamic Plaque production boundary uses a true physical inset, not percentage sizing. */
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="rounded"]::before {
    left: var(--pk3d-plaque-production-inset, 12px) !important;
    right: var(--pk3d-plaque-production-inset, 12px) !important;
    top: var(--pk3d-plaque-production-inset, 12px) !important;
    bottom: var(--pk3d-plaque-production-inset, 12px) !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}


/* .15.55: Basswood Plaque engraving preview uses a realistic burned-brown appearance. */
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"] .pk3d-vb-object,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"] .pk3d-vb-object-text,
.pk3d-vb-canvas[data-product="plaque"][data-plaque-material="basswood"] .pk3d-vb-text {
    color: #6b3f22 !important;
    fill: #6b3f22 !important;
}

/* .15.67: Coaster-owned fixed physical-scale Basswood surface for Square Rounded Corner.
   Independent from Plaque; source tile represents 4" x 4". */
.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="basswood"][data-coaster-shape="rounded"]:not(.has-coaster-product-image) {
    background-color: #f3ead7 !important;
    background-image: url('../images/coaster-basswood-fixed-scale-tile.webp') !important;
    background-repeat: repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
}

/* .15.68: Coaster-only 1/8-inch production guides for Round and Square Rounded Corner. */
.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="round"]::before,
.pk3d-vb-canvas[data-product="coaster"][data-coaster-shape="rounded"]::before {
    inset: var(--pk3d-coaster-production-inset, 10px) !important;
}
/* .15.68: Square Rounded Corner Basswood Coaster flat edge with burnt-brown perimeter. */
.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="basswood"][data-coaster-shape="rounded"]:not(.has-coaster-product-image) {
    border: 2px solid rgba(78,48,24,.88) !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible;
}

/* .15.71: Round Plaque production guide uses the same physical 1/8-inch inset. */
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="round"]::before {
    inset: var(--pk3d-plaque-production-inset, 10px) !important;
}

/* .15.72: Round / Oval Plaque guide follows the variable ellipse at a 1/8-inch inset. */
.pk3d-vb-canvas[data-product="plaque"][data-plaque-shape="round"]::before {
    border-radius: 50% !important;
}

/* Alpha8.9.15.84: realistic Dog Tag surface rendering. Production geometry is unchanged. */
.pk3d-vb-canvas[data-product="dog-tag"] {
    --pk3d-dog-tag-base: var(--pk3d-dog-tag-color, #d8d8d8);
    background:
        linear-gradient(105deg,
            rgba(255,255,255,.34) 0%,
            rgba(255,255,255,.10) 18%,
            rgba(0,0,0,.055) 43%,
            rgba(255,255,255,.20) 62%,
            rgba(0,0,0,.09) 100%),
        var(--pk3d-dog-tag-base);
    border: 1px solid color-mix(in srgb, var(--pk3d-dog-tag-base) 66%, #20242a 34%);
    border-radius: 24% 17% 17% 24% / 42% 42% 42% 42%;
    overflow: hidden;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,.55),
        inset -2px -2px 3px rgba(0,0,0,.20),
        inset 0 0 9px rgba(0,0,0,.08),
        0 2px 2px rgba(0,0,0,.16),
        0 8px 16px rgba(0,0,0,.16);
}

/* The normal fixed-product guide remains inside the exact tag face. */
.pk3d-vb-canvas[data-product="dog-tag"]::before {
    inset: 8%;
    border-radius: 22% 15% 15% 22% / 40% 40% 40% 40%;
}

/* Punched attachment hole: opening + inner wall + rim highlight. */
.pk3d-vb-canvas[data-product="dog-tag"]::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 5.25%;
    top: 50%;
    width: 8.5%;
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #fafafa 0 54%, #c7c9cc 57% 67%, #555b61 70% 77%, #f4f4f4 80% 100%);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.62),
        inset 1px 1px 2px rgba(0,0,0,.40),
        1px 1px 1px rgba(255,255,255,.34);
    pointer-events: none;
}

/* Metal tags receive a restrained brushed reflection; the selected base color still controls the tag. */
.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-material="stainless-steel"],
.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-material="silver"],
.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-material="gold"] {
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.025) 1px 2px),
        linear-gradient(102deg,
            rgba(255,255,255,.48) 0%,
            rgba(255,255,255,.10) 19%,
            rgba(0,0,0,.10) 40%,
            rgba(255,255,255,.36) 58%,
            rgba(0,0,0,.12) 78%,
            rgba(255,255,255,.20) 100%),
        var(--pk3d-dog-tag-base);
}

/* PETG keeps the same exact geometry but reads as a softer satin plastic instead of metal. */
.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-material="petg"] {
    background:
        radial-gradient(ellipse at 34% 18%, rgba(255,255,255,.32), transparent 44%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(0,0,0,.08)),
        var(--pk3d-dog-tag-base);
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.40),
        inset -2px -2px 4px rgba(0,0,0,.16),
        0 2px 2px rgba(0,0,0,.14),
        0 7px 14px rgba(0,0,0,.14);
}

/* Alpha8.9.15.85: symmetrical Dog Tag contour + hole-aware usable design boundary. */
.pk3d-vb-canvas[data-product="dog-tag"] {
    /* The attachment hole does not distort the physical outside contour. */
    border-radius: 18% / 42%;
}

.pk3d-vb-canvas[data-product="dog-tag"]::before {
    /* .15.87: fixed Dog Tag design box. Do not derive this from the tag contour. */
    inset: auto !important;
    left: 15.5% !important;
    right: 4% !important;
    top: 8% !important;
    bottom: 8% !important;
    /* .15.88: fixed boundary remains static; only the right end is rounded.
       These radii are explicit boundary geometry and do not reference the tag. */
    border-radius: 0 30px 30px 0 !important;
}


/* Alpha8.9.15.91: pristine design preview.
   Preview mode is display-only: hide production guides and editor selection UI
   without changing product geometry, object state, pricing, or production data. */
.pk3d-vb-canvas.is-production-preview::before {
    display: none !important;
}

.pk3d-vb-canvas.is-production-preview .pk3d-vb-text-object.is-selected::after,
.pk3d-vb-canvas.is-production-preview .pk3d-vb-artwork-object.is-selected::after,
.pk3d-vb-canvas.is-production-preview .pk3d-vb-object-handle {
    display: none !important;
}


/* Alpha8.9.15.92: Dog Tag uses the full physical face as its design area.
   No production boundary is shown. Orientation rotates the physical tag,
   while artwork remains in the product coordinate system and is not auto-rotated. */
.pk3d-vb-canvas[data-product="dog-tag"]::before {
    display: none !important;
}

.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-orientation="vertical"] {
    border-radius: 42% / 18%;
}

.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-orientation="vertical"]::after {
    left: 50%;
    top: 5.25%;
    width: 15.45%;
    transform: translateX(-50%);
}

/* Alpha8.9.15.93: Vertical Dog Tag is the actual 1.1 × 2.0 physical tag.
   The canvas dimensions are supplied by JS; these rules rotate the visual surface treatment
   and keep the attachment hole at the physical top end. */
.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-orientation="vertical"] {
    background:
        linear-gradient(15deg,
            rgba(255,255,255,.34) 0%,
            rgba(255,255,255,.10) 18%,
            rgba(0,0,0,.055) 43%,
            rgba(255,255,255,.20) 62%,
            rgba(0,0,0,.09) 100%),
        var(--pk3d-dog-tag-base);
}
.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-orientation="vertical"][data-dog-tag-material="stainless-steel"],
.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-orientation="vertical"][data-dog-tag-material="silver"],
.pk3d-vb-canvas[data-product="dog-tag"][data-dog-tag-orientation="vertical"][data-dog-tag-material="gold"] {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.025) 1px 2px),
        linear-gradient(12deg,
            rgba(255,255,255,.48) 0%,
            rgba(255,255,255,.10) 19%,
            rgba(0,0,0,.10) 40%,
            rgba(255,255,255,.36) 58%,
            rgba(0,0,0,.12) 78%,
            rgba(255,255,255,.20) 100%),
        var(--pk3d-dog-tag-base);
}

/* Alpha8.9.15.95: Dog Tag dual-face canvas. FRONT and BACK are independent
   design surfaces shown together. Existing Dog Tag material/shape rendering is
   moved onto product-owned face elements; other products are untouched. */
.pk3d-vb-canvas[data-product="dog-tag"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.pk3d-vb-canvas[data-product="dog-tag"]::after { display: none !important; }
.pk3d-vb-dog-tag-face {
    --pk3d-dog-tag-base: var(--pk3d-dog-tag-color, #d8d8d8);
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--pk3d-dog-tag-base) 66%, #20242a 34%);
    border-radius: 18% / 42%;
    background:
        linear-gradient(105deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 18%, rgba(0,0,0,.055) 43%, rgba(255,255,255,.20) 62%, rgba(0,0,0,.09) 100%),
        var(--pk3d-dog-tag-base);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), inset -2px -2px 3px rgba(0,0,0,.20), inset 0 0 9px rgba(0,0,0,.08), 0 2px 2px rgba(0,0,0,.16), 0 8px 16px rgba(0,0,0,.16);
    cursor: pointer;
}
.pk3d-vb-dog-tag-face::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 5.25%; top: 50%; width: 8.5%; aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #fafafa 0 54%, #c7c9cc 57% 67%, #555b61 70% 77%, #f4f4f4 80% 100%);
    box-shadow: 0 0 0 1px rgba(0,0,0,.62), inset 1px 1px 2px rgba(0,0,0,.40), 1px 1px 1px rgba(255,255,255,.34);
    pointer-events: none;
}
.pk3d-vb-dog-tag-face[data-dog-tag-material="stainless-steel"],
.pk3d-vb-dog-tag-face[data-dog-tag-material="silver"],
.pk3d-vb-dog-tag-face[data-dog-tag-material="gold"] {
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.025) 1px 2px), linear-gradient(102deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.10) 19%, rgba(0,0,0,.10) 40%, rgba(255,255,255,.36) 58%, rgba(0,0,0,.12) 78%, rgba(255,255,255,.20) 100%), var(--pk3d-dog-tag-base);
}
.pk3d-vb-dog-tag-face[data-dog-tag-material="petg"] {
    background: radial-gradient(ellipse at 34% 18%, rgba(255,255,255,.32), transparent 44%), linear-gradient(145deg, rgba(255,255,255,.12), rgba(0,0,0,.08)), var(--pk3d-dog-tag-base);
}
.pk3d-vb-dog-tag-face[data-dog-tag-orientation="vertical"] { border-radius: 42% / 18%; }
.pk3d-vb-dog-tag-face[data-dog-tag-orientation="vertical"]::after {
    left: 50%; top: 5.25%; width: 15.45%; transform: translateX(-50%);
}
.pk3d-vb-dog-tag-face.is-active { outline: 2px solid rgba(212,175,55,.85); outline-offset: 5px; }
.pk3d-vb-dog-tag-face-label {
    position: absolute; z-index: 20; text-align: center; font-weight: 800; letter-spacing: .12em;
    font-size: 13px; line-height: 20px; color: #fff; pointer-events: none;
}
.pk3d-vb-dog-tag-face-label.is-active { color: #D4AF37; }
.pk3d-vb-canvas[data-product="dog-tag"] [data-pk3d-object] { z-index: 5; }
.pk3d-vb-canvas[data-product="dog-tag"].is-production-preview .pk3d-vb-dog-tag-face.is-active { outline: none; }

/* .16.02: the normal DOM object remains the editing/production source while
   Tumbler-only projection slices provide the visible 360-degree wrapped view. */
.pk3d-vb-canvas[data-product="tumbler"] .pk3d-vb-tumbler-source-object > .pk3d-vb-text-object__text,
.pk3d-vb-canvas[data-product="tumbler"] .pk3d-vb-tumbler-source-object > .pk3d-vb-artwork-object__vinyl {
    visibility: hidden;
}
/* .16.16: generic text objects have min-height: 1em. On Tumbler that floor
   prevented the source/projection box from shrinking below the natural font
   size even though Selected Height had reduced object.height, so the smaller
   projection was clipped against a larger DOM box. Tumbler owns explicit
   production-inch geometry, so allow its text box to honor that height. */
.pk3d-vb-canvas[data-product="tumbler"] .pk3d-vb-text-object {
    min-height: 0;
}

.pk3d-vb-canvas[data-product="tumbler"] .pk3d-vb-tumbler-projection-slice {
    position: absolute;
    z-index: 3;
    overflow: visible;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform-origin: center center;
    will-change: transform, left, top;
}


/* .16.10: Tumbler-only precision controls positioned clear of the product viewport. */
.pk3d-vb-canvas-shell { position: relative; }
.pk3d-vb-tumbler-stage-controls {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 40;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
    width: calc(100% - 24px);
    max-width: none;
}

.pk3d-vb-tumbler-stage-controls__object {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.pk3d-vb-tumbler-stage-controls__group,
.pk3d-vb-tumbler-stage-controls__delete { pointer-events: auto; }
.pk3d-vb-tumbler-stage-controls__group {
    display: grid;
    gap: 3px;
    width: 235px;
    padding: 6px 8px;
    border: 1px solid #c3c4c7;
    border-radius: 7px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.pk3d-vb-tumbler-stage-controls__label { font-size: 11px; font-weight: 700; color: #1d2327; }
.pk3d-vb-tumbler-stage-controls__slider-row {
    display: grid;
    grid-template-columns: auto 28px minmax(70px,1fr) 28px auto 40px;
    gap: 5px;
    align-items: center;
}
.pk3d-vb-tumbler-stage-controls__slider-row input[type="range"] { width: 100%; min-width: 70px; }
.pk3d-vb-tumbler-stage-controls__slider-row small { font-size: 10px; color: #646970; }
.pk3d-vb-tumbler-stage-controls__slider-row strong { font-size: 11px; text-align: right; color: #1d2327; }
.pk3d-vb-tumbler-stage-controls__group.is-object-rotation .pk3d-vb-tumbler-stage-controls__slider-row strong { transform: translateX(-10px); }
.pk3d-vb-tumbler-stage-controls__step {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #2271b1;
    border-radius: 5px;
    background: #fff;
    color: #135e96;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: none;
}
.pk3d-vb-tumbler-stage-controls__step:disabled { opacity: .4; cursor: default; }
.pk3d-vb-tumbler-stage-controls .is-tumbler-rotation {
    width: 270px;
    margin-left: auto;
}
.pk3d-vb-tumbler-stage-controls__delete {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 41;
    min-height: 42px;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #b32d2e;
    border-radius: 7px;
    background: rgba(255,255,255,.97);
    color: #b32d2e;
    font-weight: 700;
    cursor: pointer;
    pointer-events: auto;
}
.pk3d-vb-tumbler-stage-controls__delete:disabled { opacity: .45; cursor: default; }
.pk3d-vb-control[data-control-id="tumbler-rotation"] { display: none; }
@media (max-width: 1100px) {
    .pk3d-vb-tumbler-stage-controls__group { width: 210px; }
    .pk3d-vb-tumbler-stage-controls .is-tumbler-rotation { width: 220px; }
}