.renderer-page main.shell{width:min(1320px,calc(100% - 64px));max-width:1320px;margin:0 auto;padding:24px 0 0;min-width:0}.renderer-page .hero{min-height:0;padding:18px 0 24px;gap:20px}.renderer-page .hero h1{font-size:clamp(32px,3.4vw,48px)}.renderer-page .hero .lead{color:var(--lime)}.renderer-page .template-description p{width:calc(100% - 24px);max-width:none}.renderer-page .workspace{padding-top:15px}.renderer-page .renderer-connection{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin:0}.renderer-connection span{width:5px;height:5px;border-radius:50%;background:#9b896f}.renderer-connection b{font-weight:400}.renderer-page .site-header{position:sticky}.renderer-page .shell footer{font-size:12px}.renderer-page .category-sidebar{font-size:15px}.renderer-page .site-header .icon-button{display:grid}.renderer-page .hero .template-name{font-size:28px}.renderer-page .hero .template-name select{max-width:100%}.renderer-page .scene-carousel{min-width:0}.renderer-page .results{padding-top:40px}
@container gallery (max-width:850px){.renderer-page .workspace{grid-template-columns:1fr}.renderer-page .control-panel{height:auto;max-height:none}.renderer-page .slots-container{max-height:none}.renderer-page .hero{grid-template-columns:1fr}.renderer-page .template-name{justify-self:start}.renderer-page .video-panel{flex-wrap:wrap}.renderer-page .video-action{width:100%;min-width:0}}
@media(max-width:650px){.renderer-page main.shell{width:calc(100% - 32px);padding-inline:0}.renderer-page .hero h1{font-size:32px}.renderer-page .panel{padding:16px}.renderer-page .workspace{grid-template-columns:1fr}}
.renderer-page #rendererState[hidden] { display: none !important; }
.renderer-back { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding: 0; color: var(--muted); font-size: 16px; line-height: 1.5; text-decoration: none; }
.renderer-back svg { width: 28px; height: 28px; margin-left: -6px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.renderer-back:hover { color: var(--ink); }
.renderer-back:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

/* Product-first artwork editor. The surrounding renderer keeps its existing Shopify-aligned shell. */
.renderer-page .control-heading { display: none; }
.renderer-page .slots-container { margin-top: 0; margin-bottom: 16px; padding-right: 5px; display: block; }
.product-editor-body { min-height: 100%; }
.product-editor-title { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.product-editor-title h2 { margin: 0; font-family: var(--font-display); font-size: 23px; line-height: 1.25; font-weight: 400; letter-spacing: -.025em; }
.product-editor-title > span { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.product-editor-intro, .product-mode-help { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.product-editor-list { display: grid; gap: 9px; margin-top: 22px; }
.product-editor-card { width: 100%; min-height: 78px; padding: 11px 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px 14px; align-items: center; gap: 12px; color: var(--text); background: #fff; border: 1px solid var(--line); text-align: left; }
.product-editor-card:hover { color: var(--text); background: #faf9f6; border-color: #c6baaa; }
.product-editor-card > span:nth-child(2), .product-editor-selector > span:nth-child(2), .product-editor-menu button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.product-editor-card strong, .product-editor-selector strong, .product-editor-menu strong { overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.35; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.product-editor-card small, .product-editor-selector small, .product-editor-menu small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.product-editor-card > i { width: 17px; height: 17px; display: grid; place-items: center; color: #667059; background: #eef0e9; border: 1px solid #d8dccf; border-radius: 50%; font-size: 9px; font-style: normal; }
.product-editor-card > i:empty { background: #fff; border-color: #dddcd6; }
.product-editor-card > b { color: #99978e; font-size: 20px; line-height: 1; font-weight: 400; }
.product-editor-thumb { position: relative; width: 42px; height: 54px; display: block; overflow: hidden; flex: none; background: #f3f0e9; border: 1px solid #e9e4dc; }
.product-editor-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-editor-thumb--empty { background: linear-gradient(135deg, #eee9e0, #dad2c5); }
.product-editor-back { min-height: 26px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.product-editor-back button { padding: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); background: transparent; border: 0; font-size: 12px; }
.product-editor-back button:hover { color: var(--text); }
.product-editor-back small { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.product-editor-selector-wrap { position: relative; }
.product-editor-selector { width: 100%; min-height: 72px; padding: 11px 12px; display: grid; grid-template-columns: 37px minmax(0, 1fr) 18px; align-items: center; gap: 12px; color: var(--text); background: #fff; border: 1px solid var(--line); text-align: left; }
.product-editor-selector .product-editor-thumb { width: 37px; height: 47px; }
.product-editor-selector strong { font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.product-editor-selector > b { color: var(--muted); font-size: 17px; font-weight: 400; }
.product-editor-menu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; left: 0; max-height: 340px; padding: 5px; overflow-y: auto; background: #fff; border: 1px solid #d9d5cd; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.product-editor-menu button { width: 100%; padding: 8px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 10px; color: var(--text); background: #fff; border: 0; text-align: left; }
.product-editor-menu button:hover, .product-editor-menu button[aria-current="true"] { background: #f4f1ea; }
.product-editor-menu .product-editor-thumb { width: 30px; height: 38px; }
.product-editor-step { margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; color: #817c73; font-size: 10px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.product-editor-step span { color: #b9b0a3; letter-spacing: 0; }
.product-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.product-mode-tabs button { min-height: 42px; padding: 8px; color: var(--text); background: #fff; border: 0; font-size: 12px; }
.product-mode-tabs button[aria-pressed="true"] { color: #fff; background: var(--ink); }
.product-editor-surface-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-editor-surface-heading small { color: var(--muted); font-size: 10px; }
.product-surface-list { display: grid; gap: 9px; }
.product-surface-row { min-height: 82px; padding: 11px 12px; display: grid; grid-template-columns: minmax(148px, 1.25fr) 94px 42px minmax(132px, 1fr); align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); }
.product-surface-name { min-width: 0; display: flex; align-items: center; gap: 9px; }
.product-surface-name > span { width: 26px; height: 27px; display: grid; place-items: center; flex: none; color: #938c80; border: 1px solid #d9d6cf; font-size: 10px; }
.product-surface-name > .product-surface-thumb { position: relative; width: 34px; height: 44px; overflow: hidden; background: #f7f5f1; border-color: #ddd8cf; }
.product-surface-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 49%, #e7e2d9 50%, transparent 51%); opacity: .8; }
.product-surface-thumb.has-artwork::before { display: none; }
.product-surface-thumb img { position: relative; width: 100%; height: 100%; display: block; object-fit: contain; background: repeating-conic-gradient(#f2f0eb 0 25%, #fff 0 50%) 50% / 8px 8px; }
.product-surface-name > div, .product-surface-resolution { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.product-surface-name strong { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.product-surface-name small, .product-surface-resolution small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-surface-resolution strong { color: var(--text); font-size: 10px; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.product-surface-guide { color: var(--text); font-size: 10px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.product-surface-guide.is-disabled { color: #b2aea6; text-decoration: none; }
.renderer-page .product-surface-upload { min-height: 56px; padding: 7px 8px; display: flex; align-items: center; gap: 8px; border: 1px dashed #d2cdc3; background: #fcfcfa; }
.renderer-page .product-surface-upload input[type="file"] { inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: auto; cursor: pointer; }
.renderer-page .product-surface-upload:hover, .renderer-page .product-surface-upload.is-drag-over { background: #f4f1ea; border-color: #9c896f; outline: 0; }
.product-surface-upload > svg, .full-texture-upload > svg { width: 21px; height: 21px; flex: none; fill: none; color: #777269; stroke: currentColor; stroke-width: 1.25; }
.product-surface-upload > span, .full-texture-upload > span { min-width: 0; display: flex; flex-direction: column; }
.product-surface-upload strong, .full-texture-upload strong { color: var(--text); font-size: 10px; line-height: 1.35; font-weight: 500; }
.product-surface-upload small, .full-texture-upload small { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.full-texture-guide { width: 100%; min-height: 66px; margin-top: 4px; padding: 11px 12px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 11px; color: var(--text); background: #fafaf8; border: 1px solid var(--line); text-decoration: none; }
.full-texture-guide:hover { color: var(--text); background: #f5f2ec; border-color: #c9bfaf; }
.full-texture-guide > svg { width: 36px; height: 36px; fill: none; color: #a0927c; stroke: currentColor; }
.full-texture-guide > span { min-width: 0; display: flex; flex-direction: column; }
.full-texture-guide strong { color: var(--text); font-size: 12px; font-weight: 500; }
.full-texture-guide small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.full-texture-guide > b { color: #6f685d; font-size: 18px; font-weight: 400; }
.renderer-page .full-texture-upload { min-height: 112px; margin-top: 11px; padding: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px dashed #d2cdc3; background: #fcfcfa; text-align: left; }
.renderer-page .full-texture-upload:hover, .renderer-page .full-texture-upload.is-drag-over { background: #f4f1ea; border-color: #9c896f; outline: 0; }
.product-color-section { margin-top: 22px; border-top: 1px solid var(--line); }
.product-color-section .product-editor-step { margin-top: 17px; }
.product-color-row { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.product-color-row > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.product-color-row strong { color: var(--text); font-size: 12px; font-weight: 500; }
.product-color-row small { color: var(--muted); font-size: 9px; }
.product-color-control { display: flex; align-items: center; gap: 8px; }
.product-color-control b { color: var(--muted); font-size: 9px; font-weight: 400; text-transform: uppercase; }
.product-color-control input[type="color"] { width: 25px; height: 25px; padding: 2px; background: #fff; border: 1px solid #d0ccc2; cursor: pointer; }
.product-color-control input[type="color"]:disabled { cursor: not-allowed; opacity: .42; }
.product-color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.product-color-control input[type="color"]::-webkit-color-swatch { border: 0; }
.product-color-enable { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; white-space: nowrap; cursor: pointer; }
.product-color-enable input { width: 13px; height: 13px; margin: 0; accent-color: #302c27; }

@container slot-panel (max-width: 520px) {
  .product-surface-row { grid-template-columns: minmax(140px, 1.2fr) 88px 40px minmax(120px, 1fr); gap: 7px; padding: 10px; }
  .product-surface-name { gap: 7px; }
  .product-surface-name > span { width: 24px; }
  .product-surface-name > .product-surface-thumb { width: 31px; height: 40px; }
  .product-surface-upload { padding-inline: 6px; }
  .product-surface-upload small { font-size: 7px; }
}
@container slot-panel (max-width: 410px) {
  .product-surface-row { grid-template-columns: minmax(150px, 1fr) minmax(130px, 1fr); }
  .product-surface-name { grid-column: 1; grid-row: 1; }
  .product-surface-resolution { grid-column: 2; grid-row: 1; }
  .product-surface-guide { grid-column: 1; grid-row: 2; }
  .renderer-page .product-surface-upload { grid-column: 2; grid-row: 2; }
}