/* Tap-to-edit (tap-edit.js): the hint on the preview, the dotted outlines, the legend of parts and the editor under the preview. Uses the page's own tokens. */
.tapedit-hint { position: absolute; left: 10px; top: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px; border-radius: 999px;
  border: 1px solid var(--color-border, #cfcfcb); background: var(--color-surface, #fff); color: var(--color-text-secondary, #555); font: 600 11.5px/1 var(--font-sans, sans-serif); cursor: pointer; opacity: 0.85; box-shadow: 0 1px 6px rgba(0,0,0,0.08); transition: opacity 0.15s, background 0.15s, color 0.15s; }
.tapedit-hint:hover, .tapedit-hint:focus-visible { opacity: 1; color: var(--color-text-primary, #0a0a0a); }
.tapedit-hint-icon { display: inline-flex; }
.tapedit-hint:not(.is-quiet):not(.is-editing):not(.is-armed) .tapedit-hint-icon { animation: tapedit-nudge 2.4s ease-in-out infinite; }
.tapedit-hint.is-editing, .tapedit-hint.is-armed { opacity: 1; background: var(--color-text-primary, #0a0a0a); color: var(--color-surface, #fff); border-color: var(--color-text-primary, #0a0a0a); }
.tapedit-hint.is-armed { background: var(--color-accent, #A6685A); border-color: var(--color-accent, #A6685A); }
@keyframes tapedit-nudge { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .tapedit-hint .tapedit-hint-icon { animation: none !important; } }

.tapedit-sides { position: absolute; right: 10px; top: 10px; z-index: 3; display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid var(--color-border, #cfcfcb); background: var(--color-surface, #fff); box-shadow: 0 1px 6px rgba(0,0,0,0.08); }
.tapedit-sides[hidden], .tapedit-pop[hidden] { display: none; }
.tapedit-side { height: 22px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-secondary, #555); font: 600 11.5px/1 var(--font-sans, sans-serif); cursor: pointer; }
.tapedit-side[aria-pressed="true"] { background: var(--color-text-primary, #0a0a0a); color: var(--color-surface, #fff); }

model-viewer.is-over-part { cursor: pointer; }
model-viewer.is-armed { cursor: crosshair; }
.tapedit-outlines { position: absolute; z-index: 2; pointer-events: none; overflow: visible; }
.tapedit-outline { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tapedit-outline.is-selected { stroke: var(--color-accent, #A6685A); stroke-dasharray: 6 5; animation: tapedit-march 1.2s linear infinite; }
.tapedit-outline.is-hover { stroke: var(--color-text-primary, #0a0a0a); stroke-opacity: 0.35; stroke-dasharray: 3 4; }
@keyframes tapedit-march { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .tapedit-outline.is-selected { animation: none; } }

.tapedit-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.tapedit-legend:empty { display: none; }
.tapedit-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--color-border, #cfcfcb); background: transparent; color: var(--color-text-primary, #0a0a0a); font: 500 12.5px/1 var(--font-sans, sans-serif); cursor: pointer; }
.tapedit-chip:hover { border-color: var(--color-text-secondary, #555); }
.tapedit-chip[aria-pressed="true"] { border-color: var(--color-accent, #A6685A); box-shadow: 0 0 0 1px var(--color-accent, #A6685A); }

/* focus: the stage fills the viewport, the chips ride its bottom edge, the editor floats beside the tapped part */
.tapedit-focus { position: fixed !important; inset: 0 !important; z-index: 1200; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: var(--color-bg, #f7f7f5); overflow: hidden; }
.tapedit-focus > model-viewer, .tapedit-focus > #model-viewer { position: absolute !important; inset: 0 !important; border-radius: 0 !important; }
.tapedit-focus > *:not(model-viewer):not(#model-viewer):not(.tapedit-hint):not(.tapedit-sides):not(.tapedit-outlines):not(.tapedit-legend):not(.tapedit-pop):not(.lp-toast):not(.tess) { display: none !important; }
body.tapedit-focus-on .vc-wrap { display: none !important; }   /* only in the fixed overlay; in studio the cube stays and can turn the locked view */
.tapedit-focus .lp-toast { bottom: 76px; }
.tapedit-focus .tapedit-hint { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); height: 32px; font-size: 13px; padding: 0 12px 0 9px; }
.tapedit-focus .tapedit-sides { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.tapedit-focus .tapedit-legend { position: absolute; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; z-index: 3; }
.tapedit-focus .tapedit-legend::-webkit-scrollbar { display: none; }
.tapedit-focus .tapedit-chip { flex: none; background: var(--color-surface, #fff); box-shadow: 0 1px 6px rgba(0,0,0,0.08); }
.tapedit-focus .tapedit-pop { position: absolute; z-index: 4; width: 280px; max-height: calc(100% - 90px); overflow: auto; margin: 0; box-shadow: 0 12px 34px rgba(0,0,0,0.18); }
.tapedit-focus .tapedit-pop.is-sheet { left: 8px; right: 8px; top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 48px); width: auto; max-height: 55%; }
body.tapedit-focus-on { overflow: hidden; }
/* the stage owns the screen: the site's own bars step aside (they are sticky/fixed in their own stacking contexts) */
body.tapedit-focus-on .sn-bar, body.tapedit-focus-on .sn-tabbar, body.tapedit-focus-on .sn-mobile-tabs, body.tapedit-focus-on .aw-cart-pill, body.tapedit-focus-on .lp-status { visibility: hidden !important; pointer-events: none !important; }

.tapedit-pop { width: auto; margin: 8px 0 4px; padding: 12px 12px 10px; border-radius: 12px; border: 1px solid var(--color-border, #cfcfcb); background: var(--color-surface, #fff); color: var(--color-text-primary, #0a0a0a); font-family: var(--font-sans, sans-serif); }
.tapedit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tapedit-title { font: 600 14px/1.2 var(--font-sans, sans-serif); }
.tapedit-tools { display: inline-flex; gap: 6px; }
.tapedit-undo { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--color-border, #cfcfcb); background: transparent; color: inherit; font: 500 12px/1 var(--font-sans, sans-serif); cursor: pointer; }
.tapedit-undo:disabled { opacity: 0.4; cursor: default; }
.tapedit-done { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--color-text-primary, #0a0a0a); background: var(--color-text-primary, #0a0a0a); color: var(--color-surface, #fff); font: 600 12px/1 var(--font-sans, sans-serif); cursor: pointer; }
.tapedit-note { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--color-text-secondary, #555); }
.tapedit-colour { display: grid; gap: 4px; margin-bottom: 6px; }
.tapedit-colour-name { font-size: 12px; color: var(--color-text-secondary, #555); }
.tapedit-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.tapedit-swatch { display: inline-flex; padding: 2px; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; }
.tapedit-swatch[aria-checked="true"] { border-color: var(--color-text-primary, #0a0a0a); box-shadow: 0 0 0 1px var(--color-text-primary, #0a0a0a); }
.tapedit-dot { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); }
.tapedit-swatch.is-named { border-radius: 999px; border-color: var(--color-border, #cfcfcb); padding: 3px 9px; font: 500 12px/1 var(--font-sans, sans-serif); color: inherit; }
.tapedit-option { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin: 4px 0; }
.tapedit-option-label { flex: none; padding-top: 4px; }
.tapedit-option-label { font-size: 12.5px; color: var(--color-text-secondary, #555); }
.tapedit-radios { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tapedit-radio { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--color-border, #cfcfcb); background: transparent; color: inherit; font: 500 12px/1 var(--font-sans, sans-serif); cursor: pointer; }
.tapedit-radio[aria-checked="true"] { border-color: var(--color-text-primary, #0a0a0a); box-shadow: 0 0 0 1px var(--color-text-primary, #0a0a0a); }
.tapedit-fields { display: grid; gap: 8px; margin: 6px 0 4px; }
.tapedit-field { display: grid; gap: 3px; font-size: 12.5px; }
.tapedit-field.is-check { display: flex; align-items: center; gap: 8px; }
.tapedit-field-label { color: var(--color-text-secondary, #555); }
.tapedit-field input[type="text"], .tapedit-field input[type="number"] { width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--color-border, #cfcfcb); background: var(--color-bg, #f7f7f5); color: inherit; font: 13px/1.3 var(--font-sans, sans-serif); }
.tapedit-apply, .tapedit-action { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-border, #cfcfcb); background: transparent; color: inherit; font: 600 12.5px/1 var(--font-sans, sans-serif); cursor: pointer; }
.tapedit-apply, .tapedit-action.is-primary { background: var(--color-text-primary, #0a0a0a); color: var(--color-surface, #fff); border-color: var(--color-text-primary, #0a0a0a); }
.tapedit-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tapedit-status { margin: 6px 0 0; min-height: 14px; font-size: 12px; color: var(--color-text-tertiary, #737373); }
.tapedit-status.is-error { color: var(--color-error, #c9432f); }
.tapedit-pop.is-busy .tapedit-radio, .tapedit-pop.is-busy .tapedit-action, .tapedit-pop.is-busy .tapedit-apply { opacity: 0.6; pointer-events: none; }

/* studio: the preview is the first screen; the chips are a rail beside it; the form waits below as "All options" */
body.tapedit-studio .ph-editor { display: block; }
body.tapedit-studio .ph-editor > #result-panel { position: relative; height: calc(100vh - 160px); margin: 0 0 20px; padding: 0; border-radius: 12px; overflow: hidden; top: auto; }
body.tapedit-studio .masthead { margin-bottom: 10px; }
body.tapedit-studio .masthead h1 { font-size: 26px; margin: 4px 0 6px; }
body.tapedit-studio .masthead .kicker { display: none; }
body.tapedit-studio .tapedit-intro { max-width: 720px; margin: 0 0 22px; color: var(--color-text-secondary, #555); }
body.tapedit-studio .tapedit-intro .dek { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
body.tapedit-studio .tapedit-intro .ph-example, body.tapedit-studio .tapedit-intro .ph-caption { margin: 0; font-size: 13px; }
body.tapedit-studio .masthead .crumbs, body.tapedit-studio .sn-crumbs { margin-bottom: 6px; }
body.tapedit-studio .ph-editor > #result-panel > :not(.lp-stage) { display: none; }
body.tapedit-studio .ph-editor > #result-panel { background: var(--color-bg, #f7f7f5); }
body.tapedit-studio .lp-stage { position: absolute; inset: 0; }
body.tapedit-studio .lp-stage > model-viewer, body.tapedit-studio .lp-stage > #model-viewer { position: absolute !important; inset: 0 !important; height: 100% !important; width: 100% !important; max-height: none !important; border-radius: 0 !important; }
body.tapedit-studio .lp-stage > .ep-card { display: none; }
body.tapedit-studio .tapedit-legend { position: absolute; z-index: 3; right: 14px; top: 122px; bottom: auto; left: auto; width: 168px; flex-direction: column; flex-wrap: nowrap; gap: 6px; max-height: calc(100% - 214px); overflow-y: auto; scrollbar-width: none; margin: 0; padding: 2px; }
body.tapedit-studio .tapedit-legend::-webkit-scrollbar { display: none; }
body.tapedit-studio .tapedit-chip { width: 100%; text-align: left; background: var(--color-surface, #fff); box-shadow: 0 1px 6px rgba(0,0,0,0.08); padding: 8px 12px; }
body.tapedit-studio .tapedit-cta { position: absolute; z-index: 3; right: 14px; bottom: 14px; width: 168px; display: flex; flex-direction: column; gap: 6px; }
.tapedit-buy { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--color-text-primary, #0a0a0a); background: var(--color-text-primary, #0a0a0a); color: var(--color-surface, #fff); font: 700 13px/1 var(--font-sans, sans-serif); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.14); }
.tapedit-buy:disabled { opacity: 0.5; cursor: default; }
.tapedit-all { display: block; text-align: center; font: 500 12px/1 var(--font-sans, sans-serif); color: var(--color-text-secondary, #555); text-decoration: underline; }
body.tapedit-studio .tapedit-sides { right: auto; left: 50%; transform: translateX(-50%); }
body.tapedit-studio .lp-toast { bottom: 18px; }
body.tapedit-studio .tapedit-pop { position: absolute; z-index: 4; width: 280px; max-height: calc(100% - 40px); overflow: auto; margin: 0; box-shadow: 0 12px 34px rgba(0,0,0,0.18); }
body.tapedit-studio .tapedit-pop.is-sheet { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 60%; }
.tapedit-all-options { margin: 0 0 12px; font: 700 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary, #555); }
@media (max-width: 899px) {
  body.tapedit-studio .ph-editor > #result-panel { border-radius: 0; margin: 0 -12px 16px; }
  body.tapedit-studio .masthead h1 { font-size: 22px; }
  body.tapedit-studio .tapedit-legend { top: auto; bottom: 62px; left: 10px; right: 10px; width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; }
  body.tapedit-studio .tapedit-chip { width: auto; flex: none; }
  body.tapedit-studio .tapedit-cta { left: 10px; right: 10px; bottom: 10px; width: auto; flex-direction: row; align-items: center; }
  body.tapedit-studio .tapedit-buy { flex: 1 1 auto; }
  body.tapedit-studio .tapedit-all { flex: none; padding: 0 8px; }
  body.tapedit-studio .tapedit-pop.is-sheet { bottom: 104px; }
  body.tapedit-studio .lp-toast { bottom: 110px; }
}

/* docked editing in studio: the editor beside the model, never over it */
body.tapedit-studio .tapedit-docked .tapedit-pop, body.tapedit-studio .tapedit-docked .tapedit-pop.is-sheet { position: absolute; left: auto; right: 14px; top: 14px; bottom: auto; width: 300px; max-height: 60%; overflow: auto; box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
body.tapedit-studio .tapedit-docked .tapedit-legend { width: 300px; }
body.tapedit-studio .tapedit-docked .tapedit-cta { width: 300px; }
body.tapedit-studio .tapedit-docked .tapedit-sides { left: calc((100% - 330px) / 2); transform: translateX(-50%); right: auto; }
@media (max-width: 899px) {
  .tapedit-docked .tapedit-pop, .tapedit-docked .tapedit-pop.is-sheet, body.tapedit-studio .tapedit-docked .tapedit-pop, body.tapedit-studio .tapedit-docked .tapedit-pop.is-sheet { left: 8px; right: 8px; top: auto; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: 62%; }
  .tapedit-docked .tapedit-legend, body.tapedit-studio .tapedit-docked .tapedit-legend { width: auto; left: 10px; right: 10px; top: auto; flex-direction: row; overflow-x: auto; }
  body.tapedit-studio .tapedit-docked .tapedit-cta { display: none; }
  .tapedit-docked .tapedit-sides, body.tapedit-studio .tapedit-docked .tapedit-sides { right: auto; left: 50%; transform: translateX(-50%); }
  .tapedit-focus .tapedit-hint { height: 30px; }
}

/* on a phone the chips are the editor sheet's own tab row: they can never be covered by it */
.tapedit-legend.is-tabs, .tapedit-focus .tapedit-legend.is-tabs, body.tapedit-studio .tapedit-legend.is-tabs, body.tapedit-studio .tapedit-docked .tapedit-legend.is-tabs { position: static !important; display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; margin: -4px -4px 10px; padding: 4px 4px 8px; border-bottom: 1px solid var(--color-border, #cfcfcb); scrollbar-width: none; width: auto !important; max-height: none !important; left: auto; right: auto; top: auto; bottom: auto; }
.tapedit-legend.is-tabs::-webkit-scrollbar { display: none; }
.tapedit-legend.is-tabs .tapedit-chip { flex: none; box-shadow: none; width: auto; }