.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: 14px;
    overflow: hidden;
    background: #fff;
    color: #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: #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: #fff; 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: #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="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-canvas[data-product="plaque"] { width: min(76%, 650px); aspect-ratio: 2 / 1; border-width: 6px; }
.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));
    justify-content: start;
    gap: 10px 24px;
    align-items: center;
}

.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"] {
    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"] {
    border-radius: 50%;
}

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

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

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

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

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"] {
    background-color: #34383c;
    background-image:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.07) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 66%, rgba(255,255,255,.05) 0 1px, transparent 2px),
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.12));
    background-size: 23px 23px, 31px 31px, 100% 100%;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-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"] {
    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"] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"] {
    background-color: #303438;
    background-image: var(--pk3d-coaster-slate-photo, url('../images/coaster-slate-texture.svg'));
    border-color: rgba(11, 14, 16, .72);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset 0 0 24px rgba(0,0,0,.28),
        0 10px 24px rgba(0,0,0,.18);
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-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"] {
    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] {
    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 {
    z-index: 3;
}

.pk3d-vb-coaster-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;
}
.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"] {
    background-position: center center;
    background-size: cover;
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="slate"] {
    background-color: #262a2d;
    background-blend-mode: multiply;
}

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

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

/* Alpha7.1.7: embedded real-photo coaster substrates. */
.pk3d-vb-canvas[data-product="coaster"] {
    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"] {
    background-color: #25292c;
    background-image: url('../images/coaster-slate-photo.webp');
}

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

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

.pk3d-vb-canvas[data-product="coaster"]::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"] > * {
    position: relative;
    z-index: 1;
}


/* 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="coaster"][data-coaster-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="coaster"][data-coaster-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 {
    background-image: url('../images/coaster-slate-round-photo.webp');
}

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

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"][data-coaster-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 {
    background-image: url('../images/coaster-wood-square-photo.webp');
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="wood"][data-coaster-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 {
    background-image: url('../images/coaster-cork-round-photo.webp');
}

.pk3d-vb-canvas[data-product="coaster"][data-coaster-material="cork"][data-coaster-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;
}

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

.pk3d-vb-canvas[data-product="coaster"].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);
}

.pk3d-vb-canvas[data-product="tumbler"] {
    min-height: 0;
    padding: 0;
    border: 2px solid #b7bcc2;
    border-radius: 14px;
    background: linear-gradient(90deg, #f8f9fa, #dde1e5 18%, #ffffff 48%, #d9dde1 82%, #f6f7f8);
    box-shadow: inset 0 0 18px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.10);
}

.pk3d-vb-canvas[data-product="plaque"] {
    min-height: 0;
    padding: 0;
    border: 6px solid #7b5a36;
    border-radius: 8px;
    background: linear-gradient(145deg, #c8a16b, #8a633c 52%, #b78b56);
    box-shadow: inset 0 0 22px rgba(0,0,0,.15), 0 9px 22px rgba(0,0,0,.14);
}

.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;
}