/* Finish the original DEMI studio without changing the 3D editor. */
html:has(body.customizer-v5) { height: auto; overflow: auto; scroll-padding-top: 24px; }
html:has(body.customizer-v5 .design-dialog[open]) { overflow: hidden; }
body.customizer-wrapper.customizer-v5 {
  --blue: #2563eb; --workspace-blue: #2563eb; --workspace-cyan: #2563eb;
  --ink: #172b49; --muted: #60718a; --line: #e2e8f0;
  height: auto; min-height: 100dvh; overflow: visible;
  background: #f7f9fc; color: var(--ink); -webkit-font-smoothing: antialiased;
}
.customizer-v5 .customizer-shell { height: auto; min-height: 100dvh; overflow: visible; align-items: flex-start; }
.customizer-v5 .customizer-sidebar { width: 208px; height: 100dvh; position: sticky; top: 0; padding: 24px 12px; background: #fff; }
.customizer-v5 .customizer-main { display: block; height: auto; min-height: 100dvh; overflow: visible; padding: 32px clamp(20px, 2.8vw, 44px) 48px; }
.customizer-v5 .customizer-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr); gap: 24px; align-items: start; overflow: visible; flex: none; }
.customizer-v5 .head { align-items: flex-start; margin-bottom: 24px; gap: 16px; }
.customizer-v5 .head .eyebrow { font-size: 10px; letter-spacing: .12em; color: #2563eb; }
.customizer-v5 .head h1 { font-size: clamp(25px, 2.6vw, 34px); font-weight: 750; letter-spacing: -.045em; margin: 7px 0; text-wrap: balance; }
.customizer-v5 .head p { color: #60718a; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.customizer-v5 .head .pill { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; margin-top: 6px; padding: 6px 11px; background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; font-size: 11px; }
.customizer-v5 .head .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2563eb; }
.customizer-v5 .brand { padding-bottom: 22px; }
.customizer-v5 .brand img { width: 45px; height: 45px; border-radius: 11px; }
.customizer-v5 .brand strong { font-size: 18px; }
.customizer-v5 .brand small { font-size: 7px; letter-spacing: .09em; color: #64748b; }
.customizer-v5 .side .section { color: #718096; font-size: 9px; padding-top: 22px; }
.customizer-v5 .side .nav { min-height: 46px; padding: 10px; font-size: 12px; gap: 8px; }
.customizer-v5 .side .nav:hover:not(.active) { background: #f1f5f9; }
.customizer-v5 .side .nav.active { color: #1d4ed8; border-color: #dbeafe; background: #eff6ff; box-shadow: none; }
.customizer-v5 .side .nav.active i { background: #2563eb; box-shadow: none; }
.customizer-v5 .foot { color: #475569; background: #f8fafc; font-size: 11px; }
.customizer-v5 .studio-home-link, .customizer-v5 .studio-mobile-nav { display: none; }
.customizer-v5 .studio-skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; transform: translateY(-160%); padding: 12px 18px; color: #fff; background: #2563eb; border-radius: 10px; font-weight: 650; text-decoration: none; }
.customizer-v5 .studio-skip-link:focus { transform: translateY(0); }
.customizer-v5 :is(.customizer-main, .panel):focus:not(:focus-visible) { outline: none; }
.customizer-v5 .card { border: 1px solid #e2e8f0; background: #fff; border-radius: 20px; box-shadow: 0 2px 4px #0f172a03, 0 12px 32px -20px #0f172a24; }
.customizer-v5 .preview-panel { position: sticky; top: 24px; height: auto; min-height: 0; padding: 18px; display: flex; flex-direction: column; }
.customizer-v5 .preview-header { align-items: flex-start; margin: 2px 0 15px; }
.customizer-v5 .preview-header-meta { min-width: 0; }
.customizer-v5 .preview-header-meta h2 { font-size: 16px; font-weight: 700; color: #172b49; }
.customizer-v5 .preview-header-meta p { font-size: 12px; line-height: 1.6; color: #60718a; max-width: 37ch; text-wrap: pretty; }
.customizer-v5 .studio-model-status { min-height: 27px; padding: 5px 9px; font-size: 10px; background: #eaf8f1; color: #18734a; }
.customizer-v5 .studio-model-status[data-status="loading"] { background: #eff6ff; color: #1d4ed8; }
.customizer-v5 .studio-model-status[data-status="loading"]::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 1.5px solid #bfdbfe; border-top-color: #2563eb; border-radius: 50%; animation: studio-progress .8s linear infinite; }
.customizer-v5 .preview-3d-wrap { flex: none; height: clamp(320px, 59dvh, 620px); min-height: 0; border: 1px solid #e9eef5; border-radius: 13px; background: #f8faff; }
.customizer-v5 .stage .stage-tag { top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 7px 10px; border-color: #e2e8f0; color: #486183; font-size: 10px; font-weight: 600; }
.customizer-v5 .stage .zoom { right: 12px; bottom: 12px; gap: 6px; }
.customizer-v5 .iconbtn { width: 44px; height: 44px; border-color: #dbe4ef; color: #2563eb; background: #fffffff2; font-size: 19px; box-shadow: 0 2px 5px #0f172a08; }
.customizer-v5 .decal-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; gap: 6px; margin: 14px 0 0; padding: 0; }
.customizer-v5 .decal-btn { min-height: 42px; flex: 1 1 auto; padding: 9px 10px; border-color: #e2e8f0; border-radius: 9px; color: #475569; background: #fff; font-size: 11px; font-weight: 650; }
.customizer-v5 .decal-btn.active { color: #1d4ed8; border-color: #93b4f6; background: #eff6ff; }
.customizer-v5 #studioResetView { border-left-color: #cbd5e1; }
.customizer-v5 .preview-hint { margin: 12px 0 0; color: #60718a; font-size: 11px; line-height: 1.65; text-wrap: pretty; }
.customizer-v5 .decal-popover { width: 320px; max-width: calc(100% - 24px); bottom: 12px; padding: 12px 16px 16px; border-color: #dbe4ef; border-radius: 13px; box-shadow: 0 8px 32px #0f172a1c; }
.customizer-v5 .decal-popover-header { min-height: 44px; margin-bottom: 12px; }
.customizer-v5 .decal-popover-close { width: 40px; height: 40px; border-radius: 8px; }
.customizer-v5 .decal-step-btn { min-width: 42px; min-height: 42px; border-color: #dbe4ef; color: #1d4ed8; }
.customizer-v5 .workspace-panel { height: auto; overflow: visible; overscroll-behavior: auto; padding: 0; }
.customizer-v5 #designForm { gap: 20px; }
.customizer-v5 .panel { padding: 23px; scroll-margin-top: 24px; }
.customizer-v5 .panel h2 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.customizer-v5 .panel .sub { margin: 5px 0 18px; color: #60718a; font-size: 12px; line-height: 1.6; text-wrap: pretty; }
.customizer-v5 .workspace-group { margin: 16px 0; }
.customizer-v5 .workspace-group > label { margin-bottom: 8px; color: #334155; font-weight: 650; font-size: 12px; }
.customizer-v5 .workspace-group input[type="text"], .customizer-v5 .workspace-group select { height: 46px; padding: 11px 12px; border-color: #dbe4ef; border-radius: 10px; color: #172b49; font-size: 14px; box-shadow: 0 1px 2px #0f172a03; }
.customizer-v5 .workspace-group input::placeholder { color: #8895a7; opacity: 1; }
.customizer-v5 .workspace-group input[type="file"] { padding: 10px; border-style: dashed; border-color: #b9cbe4; background: #f8fbff; color: #60718a; min-height: 54px; }
.customizer-v5 input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 10px; border: 0; border-radius: 6px; color: #1d4ed8; background: #eaf2ff; font: 650 12px Inter, sans-serif; cursor: pointer; }
.customizer-v5 .workspace-group input[type="range"], .customizer-v5 .decal-popover input[type="range"] { height: 40px; margin: 0; accent-color: #2563eb; }
.customizer-v5 .workspace-group-dual { gap: 14px; margin-bottom: 10px; }
.customizer-v5 .workspace-scale-value, .customizer-v5 .slider-badge, .customizer-v5 output, .customizer-v5 #selectedProductPrice { font-variant-numeric: tabular-nums; }
.customizer-v5 .workspace-scale-value { color: #475569; }
.customizer-v5 .field-hint { color: #60718a; font-size: 11px; line-height: 1.65; text-wrap: pretty; }
.customizer-v5 .studio-product-picker { margin-bottom: 16px; border: 1px solid #dbe4ef; border-radius: 12px; overflow: clip; background: #fff; }
.customizer-v5 .studio-product-picker > summary { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 11px 13px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 650; color: #172b49; }
.customizer-v5 .studio-product-picker > summary::-webkit-details-marker { display: none; }
.customizer-v5 .studio-product-picker > summary::after { content: '⌄'; margin-left: auto; font-size: 19px; color: #64748b; transition: transform 160ms ease; }
.customizer-v5 .studio-product-picker[open] > summary::after { transform: rotate(180deg); }
.customizer-v5 .studio-product-picker[open] > summary { border-bottom: 1px solid #e2e8f0; }
.customizer-v5 .studio-picker-photo { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; border-radius: 7px; background: #f8fafc; }
.customizer-v5 #studioPickerLabel { display: grid; gap: 2px; }
.customizer-v5 #studioPickerLabel small { font-size: 10px; font-weight: 500; color: #64748b; }
.customizer-v5 .product-tabs { padding: 10px; gap: 8px; }
.customizer-v5 .product-tab { min-height: 68px; padding: 9px; border-color: #e2e8f0; color: #475569; border-radius: 10px; }
.customizer-v5 .product-tab span { font-size: 11px; font-weight: 600; }
.customizer-v5 .product-tab.active { background: #eff6ff; border-color: #8eb0f5; color: #1d4ed8; box-shadow: inset 0 0 0 1px #2563eb26; }
.customizer-v5 .studio-product-photo { width: 34px; height: 34px; flex-basis: 34px; outline: 1px solid #0f172a08; outline-offset: -1px; }
.customizer-v5 .color-swatch, .customizer-v5 .color-swatch-split { width: 44px; height: 44px; margin: 0; border-width: 5px; box-shadow: 0 0 0 1px #cbd5e1; }
.customizer-v5 .color-swatch.selected, .customizer-v5 .color-swatch-split.selected { box-shadow: 0 0 0 2px #2563eb; }
.customizer-v5 .color-swatch-row, .customizer-v5 .color-combo-grid { gap: 4px; }
.customizer-v5 .combo-subtitle { display: none; }
.customizer-v5 .color-group-label, .customizer-v5 .combo-title { font-size: 12px; color: #475569; }
.customizer-v5 .tabs { gap: 4px; padding: 4px; border-radius: 11px; background: #f1f5f9; }
.customizer-v5 .tab { min-height: 44px; font-size: 12px; color: #475569; }
.customizer-v5 .tab.active { color: #1d4ed8; box-shadow: 0 1px 4px #0f172a12; }
.customizer-v5 .artwork-card { min-height: 48px; padding: 12px; border-radius: 10px; border-color: #e2e8f0; }
.customizer-v5 .artwork-card span { font-size: 12px; color: #475569; }
.customizer-v5 .pen-set-targets button, .customizer-v5 .pen-set-open, .customizer-v5 .mirror-view-actions button, .customizer-v5 #restoreOriginalArtwork { min-height: 44px; }
.customizer-v5 .notice { padding: 13px 14px; border: 1px solid #e2ebfa; border-radius: 10px; color: #536881; background: #f5f8fd; font-size: 12px; line-height: 1.65; text-wrap: pretty; }
.customizer-v5 .studio-summary-row { padding: 12px 0; font-size: 12px; gap: 14px; }
.customizer-v5 .studio-summary-row span { color: #64748b; }
.customizer-v5 .studio-submit-actions { margin-top: 18px; gap: 10px; }
.customizer-v5 .studio-submit-actions .secondary, .customizer-v5 .submit-design-btn { min-height: 48px; padding: 12px 15px; font-size: 12px; font-weight: 700; }
.customizer-v5 .submit-design-btn { color: #fff; background: #2563eb; box-shadow: 0 4px 10px #2563eb20; }
.customizer-v5 #studioResetDesign { color: #536881; border-color: #e2e8f0; background: #fff; }
.customizer-v5 #studioFeedback { color: #365c80; font-size: 12px; line-height: 1.6; }
.customizer-v5 #studioFeedback:empty { display: none; }
.customizer-v5 .image-edit-note, .customizer-v5 .image-edit-state { font-size: 12px; color: #60718a; }
.customizer-v5 .image-edit-actions button { min-height: 44px; font-size: 11px; }
.customizer-v5 [data-image-action="remove"], .customizer-v5 [data-image-action="removed"], .customizer-v5 .image-edit-metrics { display: none; }
.customizer-v5 .artwork-handle { width: 40px; height: 40px; line-height: 36px; }
.customizer-v5 :is(button, a, summary, input, select):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.customizer-v5 :is(button, a, summary) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.customizer-v5 :is(button, .design-button) { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease; }
.customizer-v5 button:active:not(:disabled), .customizer-v5 .design-button:active { transform: translateY(1px); }
.customizer-v5 button:disabled { opacity: .45; cursor: not-allowed; }
.customizer-v5 .design-dialog { border-radius: 22px; max-height: calc(100dvh - 40px); width: min(1100px, calc(100vw - 40px)); }
.customizer-v5 .design-dialog-panel { max-height: calc(100dvh - 42px); }
.customizer-v5 .design-dialog-header { padding: 23px 26px; background: #fff; }
.customizer-v5 .design-dialog-header h2 { font-size: 25px; letter-spacing: -.04em; }
.customizer-v5 .design-dialog-header p:last-child { max-width: 57ch; font-size: 12px; line-height: 1.6; color: #60718a; }
.customizer-v5 .design-dialog-close { width: 44px; height: 44px; flex-basis: 44px; color: #475569; border-color: #e2e8f0; }
.customizer-v5 .design-dialog-content { gap: 20px; padding: 22px 26px; background: #f8fafc; }
.customizer-v5 .design-visual, .customizer-v5 .design-details { border-color: #e2e8f0; background: #fff; border-radius: 15px; box-shadow: none; }
.customizer-v5 .design-image-frame { border-color: #edf1f5; border-radius: 9px; }
.customizer-v5 .design-views { gap: 8px; margin-top: 12px; }
.customizer-v5 .design-views button { width: auto; min-width: 88px; min-height: 64px; padding: 7px 10px; border-color: #dbe4ef; border-radius: 9px; color: #475569; font-size: 10px; }
.customizer-v5 .design-views button[aria-pressed="true"] { color: #1d4ed8; border-color: #2563eb; background: #eff6ff; }
.customizer-v5 .design-views img { width: 56px; height: 35px; }
.customizer-v5 .studio-export-hint { color: #60718a; font-size: 11px; line-height: 1.6; margin-top: 12px; }
.customizer-v5 .design-details h3 { font-size: 20px; letter-spacing: -.025em; line-height: 1.3; }
.customizer-v5 .design-details dt, .customizer-v5 .design-details dd { font-size: 12px; line-height: 1.6; }
.customizer-v5 .design-details dl div { padding: 9px 0; }
.customizer-v5 .design-details dt { flex: 0 1 40%; }
.customizer-v5 .design-details dd { flex: 1 1 60%; }
.customizer-v5 .design-feedback { padding-top: 12px; color: #60718a; font-size: 12px; line-height: 1.6; }
.customizer-v5 .design-dialog-footer { padding: 16px 26px; gap: 10px; }
.customizer-v5 .design-button { min-height: 44px; border-color: #dbe4ef; border-radius: 10px; }
.customizer-v5 #designDialogDownload { color: #fff; background: #2563eb; border-color: #2563eb; font-weight: 700; }
.customizer-v5 .design-live-tools .design-button { min-height: 42px; }
.customizer-v5 .design-dialog[aria-busy="true"] #designDialogDownload { pointer-events: none; opacity: .5; }
@media (hover: hover) {
  .customizer-v5 :is(.product-tab, .artwork-card, .decal-btn, .secondary, .design-button):hover:not(:disabled) { border-color: #afc6e8; background: #f5f9ff; }
  .customizer-v5 .submit-design-btn:hover:not(:disabled), .customizer-v5 #designDialogDownload:hover { color: #fff; background: #1d4ed8; border-color: #1d4ed8; }
}
@media (min-width: 1700px) { .customizer-v5 .customizer-main { max-width: 1540px; margin-inline: auto; } }
@media (max-width: 1100px) {
  .customizer-v5 .customizer-shell { display: block; }
  .customizer-v5 .customizer-sidebar { position: static; width: 100%; height: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 13px 24px; border-right: 0; border-bottom: 1px solid #e2e8f0; overflow: visible; }
  .customizer-v5 .customizer-sidebar > :not(.brand):not(.studio-home-link) { display: none; }
  .customizer-v5 .customizer-sidebar .brand { padding: 0; border: 0; }
  .customizer-v5 .studio-home-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 10px; color: #475569; font-size: 12px; text-decoration: none; }
  .customizer-v5 .customizer-main { min-height: 0; padding: 28px 24px 40px; }
  .customizer-v5 .customizer-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 20px; }
  .customizer-v5 .preview-panel { top: 20px; }
  .customizer-v5 .preview-3d-wrap { height: clamp(340px, 56dvh, 580px); }
  .customizer-v5 .panel { padding: 20px; }
}
@media (max-width: 800px) {
  .customizer-v5 .customizer-layout { grid-template-columns: minmax(0, 1fr); }
  .customizer-v5 .preview-panel { position: relative; top: auto; }
  .customizer-v5 .preview-3d-wrap { height: clamp(280px, 48dvh, 430px); }
  .customizer-v5 .studio-mobile-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 20px; }
  .customizer-v5 .studio-mobile-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 13px; border: 1px solid #dce5f2; border-radius: 9px; background: #fff; color: #496185; text-decoration: none; font-size: 12px; font-weight: 600; }
  .customizer-v5 .product-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customizer-v5 .design-dialog-content { grid-template-columns: minmax(0, 1fr); }
  .customizer-v5 .design-image-frame { height: clamp(230px, 35dvh, 340px); }
}
@media (max-width: 520px) {
  .customizer-v5 .customizer-sidebar { padding: 12px 16px; }
  .customizer-v5 .brand img { width: 39px; height: 39px; padding: 6px; border-radius: 10px; }
  .customizer-v5 .brand strong { font-size: 17px; }
  .customizer-v5 .brand small { font-size: 7px; }
  .customizer-v5 .studio-home-link { padding: 8px 10px; font-size: 11px; }
  .customizer-v5 .customizer-main { padding: 24px 16px 32px; }
  .customizer-v5 .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 22px; }
  .customizer-v5 .head .eyebrow { font-size: 8px; letter-spacing: .1em; }
  .customizer-v5 .head h1 { font-size: 24px; line-height: 1.2; }
  .customizer-v5 .head p { font-size: 12px; }
  .customizer-v5 .head .pill { min-height: 29px; padding: 5px 8px; font-size: 9px; margin-top: 23px; }
  .customizer-v5 .studio-mobile-nav { gap: 6px; }
  .customizer-v5 .studio-mobile-nav a { flex: 1; padding-inline: 8px; min-height: 44px; font-size: 11px; }
  .customizer-v5 .preview-panel { padding: 14px; border-radius: 18px; }
  .customizer-v5 .preview-header { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .customizer-v5 .preview-header-meta { flex: 1 1 160px; }
  .customizer-v5 .preview-header-meta h2 { font-size: 15px; }
  .customizer-v5 .preview-header-meta p { font-size: 11px; max-width: 29ch; }
  .customizer-v5 .preview-3d-wrap { height: clamp(260px, 42dvh, 340px); border-radius: 10px; }
  .customizer-v5 .stage .stage-tag { top: 9px; left: 9px; max-width: calc(100% - 18px); padding: 6px 8px; font-size: 9px; }
  .customizer-v5 .decal-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customizer-v5 .decal-btn { min-height: 44px; padding: 9px 6px; font-size: 11px; }
  .customizer-v5 .decal-btn:nth-last-child(2) { grid-column: span 1; }
  .customizer-v5 #studioResetView { grid-column: span 2; }
  .customizer-v5 .panel { padding: 19px 17px; border-radius: 18px; }
  .customizer-v5 .panel h2 { font-size: 16px; }
  .customizer-v5 .panel .sub { font-size: 12px; margin-bottom: 16px; }
  .customizer-v5 .product-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customizer-v5 .workspace-group input[type="text"], .customizer-v5 .workspace-group select { font-size: 16px; }
  .customizer-v5 .workspace-group-dual { flex-wrap: wrap; gap: 8px 12px; }
  .customizer-v5 .workspace-year-field { width: 87px; }
  .customizer-v5 .workspace-scale-field { width: 100%; }
  .customizer-v5 .studio-submit-actions { flex-direction: column-reverse; }
  .customizer-v5 .studio-submit-actions > * { width: 100%; flex: auto; }
  .customizer-v5 .design-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .customizer-v5 .design-dialog-panel { max-height: calc(100dvh - 18px); }
  .customizer-v5 .design-dialog-header { padding: 17px 16px; gap: 10px; }
  .customizer-v5 .design-dialog-header h2 { font-size: 22px; }
  .customizer-v5 .design-dialog-content { padding: 12px; gap: 12px; }
  .customizer-v5 .design-visual, .customizer-v5 .design-details { padding: 12px; border-radius: 13px; }
  .customizer-v5 .design-image-frame { height: clamp(200px, 32dvh, 300px); }
  .customizer-v5 .design-dialog-footer { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; padding: 12px; gap: 8px; position: static; }
  .customizer-v5 .design-dialog-footer > :not([hidden]) { width: 100%; min-height: 46px; }
  .customizer-v5 .design-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .customizer-v5 .design-views button { min-width: 0; width: 100%; padding: 7px 4px; font-size: 9px; }
}
@media (max-height: 680px) and (min-width: 801px) {
  .customizer-v5 .preview-panel { position: relative; top: auto; }
  .customizer-v5 .preview-3d-wrap { height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.customizer-v5) { scroll-behavior: auto; }
  .customizer-v5 *, .customizer-v5 *::before { animation: none !important; transition: none !important; }
}
@keyframes studio-progress { to { transform: rotate(360deg); } }
.customizer-v5 .shape-card-note { color: #52647c; font-size: 11px; }