@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap'); :root{--ink:#24211f;--muted:#827a74;--line:#e7e0da;--paper:#fbfaf8;--accent:#b56c46;--accent-soft:#f7ebe3;--stage:#565553;--stage-line:rgba(255,255,255,.08)} *{box-sizing:border-box}body{margin:0;background:#f1eeea;color:var(--ink);font-family:'DM Sans',sans-serif}.customer-shell{max-width:1480px;margin:auto;padding:34px 4vw 22px}.customer-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}.eyebrow{font:500 10px 'DM Mono',monospace;letter-spacing:.16em;color:var(--muted);margin:0 0 9px}.customer-header h1{font:600 clamp(30px,4vw,52px) 'Playfair Display',serif;line-height:1.03;margin:0}.lede{margin:10px 0 0;color:#716862;font-size:14px}.customer-status{font:11px 'DM Mono',monospace;color:var(--muted);display:flex;align-items:center;gap:8px;padding-top:5px}.status-dot{width:8px;height:8px;border-radius:50%;background:#8da77e;display:inline-block}.status-dot.error{background:#bf6550}.customer-layout{display:grid;grid-template-columns:minmax(260px,300px) minmax(420px,1fr) minmax(245px,280px);gap:16px;align-items:start}.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;min-width:0}.customer-preview{position:sticky;top:18px}.panel-heading,.preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.panel-heading h2,.preview-heading h2{font:600 23px 'Playfair Display',serif;margin:0}.text-button{border:0;background:none;color:var(--accent);font:500 11px 'DM Mono',monospace;cursor:pointer;padding:5px}.panel-note{font-size:11px;line-height:1.5;color:var(--muted);margin:12px 0 16px}.component-pickers{display:grid;gap:14px}.picker-component{border-top:1px solid var(--line);padding-top:14px}.picker-component:first-child{border-top:0;padding-top:2px}.picker-component-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}.picker-component-heading strong{font-size:13px}.picker-component-heading span{font:10px 'DM Mono',monospace;color:var(--muted)}.group-choices{display:grid;gap:6px}.group-choice-item{display:grid;gap:6px}.picker-filter-note{margin:0 0 6px;color:var(--accent);font:9px 'DM Mono',monospace}.picker-empty{padding:10px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:11px}.group-choice{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:9px 10px;text-align:left;cursor:pointer;transition:.18s}.group-choice:hover,.group-choice.is-selected{border-color:var(--accent);background:#fff8f3;box-shadow:0 0 0 2px #b56c4615}.group-choice strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-choice small{font:9px 'DM Mono',monospace;color:var(--muted);white-space:nowrap}.asset-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px}.asset-choice{min-width:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:5px;cursor:pointer;text-align:left}.asset-choice:hover,.asset-choice.is-selected{border-color:var(--accent);background:#fff8f3}.asset-choice img{display:block;width:100%;height:58px;object-fit:contain;background:#f2efeb;border-radius:5px}.asset-choice span{display:block;margin-top:5px;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-choice em{display:block;font:8px 'DM Mono',monospace;color:var(--muted);font-style:normal;margin-top:2px}.preview-badge{font:10px 'DM Mono',monospace;color:var(--accent);background:var(--accent-soft);padding:7px 9px;border-radius:18px;white-space:nowrap}.preview-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 11px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.preview-toolbar button{border:1px solid var(--line);border-radius:7px;background:#fff;padding:6px 8px;color:var(--ink);cursor:pointer;font-size:10px}.preview-toolbar label{display:flex;align-items:center;gap:6px}.preview-toolbar input{width:110px}.toolbar-help{margin-left:auto;font:9px 'DM Mono',monospace}.customer-stage-wrap{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#aaa;border-radius:12px;padding:14px;min-height:0;aspect-ratio:760 / 894}.customer-stage{position:relative;width:760px;height:894px;flex:0 0 760px;overflow:hidden;touch-action:none;background:#b8b8b8;background-image:linear-gradient(var(--stage-line) 1px,transparent 1px),linear-gradient(90deg,var(--stage-line) 1px,transparent 1px);background-size:24px 24px;transform-origin:center center;cursor:grab}.customer-stage.is-dragging{cursor:grabbing}.customer-asset{position:absolute;left:50%;top:50%;width:100%;height:100%;max-width:none;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:center;pointer-events:none}.customer-asset.is-interactive{pointer-events:auto}.preview-note{font:10px 'DM Mono',monospace;color:var(--muted);margin:11px 0 0;min-height:14px}.summary-list{margin-top:14px}.summary-empty{font-size:12px;line-height:1.6;color:var(--muted);padding:16px 0}.summary-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.summary-row strong{font-size:11px}.summary-row small{display:block;font:9px 'DM Mono',monospace;color:var(--muted);margin-top:3px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.summary-row b{font:10px 'DM Mono',monospace;color:var(--accent);font-weight:500;text-align:right}.summary-actions{border-top:1px solid var(--line);padding-top:15px;margin-top:14px}.primary-button,.secondary-button{width:100%;border-radius:9px;padding:10px;cursor:pointer;font:600 10px 'DM Mono',monospace}.primary-button{border:1px solid var(--accent);background:var(--accent);color:#fff}.secondary-button{border:1px solid var(--line);background:#fff;color:var(--ink);margin-top:8px}.action-feedback{min-height:14px;color:var(--accent);font:9px 'DM Mono',monospace;margin:9px 0 0}.loading-card{padding:30px 10px;text-align:center;color:var(--muted);font-size:12px}footer{display:flex;justify-content:space-between;color:var(--muted);font:10px 'DM Mono',monospace;margin-top:14px;padding:0 2px}@media(max-width:1100px){.customer-layout{grid-template-columns:minmax(230px,280px) minmax(390px,1fr)}.customer-summary{grid-column:1/-1}.customer-summary .summary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}.summary-actions{max-width:320px}}@media(max-width:720px){.customer-shell{padding:22px 12px 16px}.customer-header{display:block}.customer-status{margin-top:14px}.customer-layout{display:flex;flex-direction:column}.customer-preview{order:-1;position:static;width:100%}.customer-picker,.customer-summary{width:100%}.customer-stage-wrap{min-height:0;padding:8px}.toolbar-help{width:100%;margin-left:0}.customer-summary .summary-list{display:block}footer{display:block;line-height:2}} .picker-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.skip-component{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--accent);padding:4px 7px;font:9px 'DM Mono',monospace;cursor:pointer}.skip-component:hover,.skip-component.is-skipped{border-color:var(--accent);background:var(--accent-soft)}.picker-component.is-skipped{opacity:.82} .custom-dial-uploader{border:1px solid var(--line);border-radius:11px;background:#fff8f3;padding:12px;margin:0 0 15px}.picker-component>.custom-dial-uploader{margin:10px 0 0}.custom-dial-uploader-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.custom-dial-uploader-heading strong{font-size:13px}.custom-dial-uploader-heading span{font:9px 'DM Mono',monospace;color:var(--accent)}.custom-dial-uploader p{font-size:10px;line-height:1.5;color:var(--muted);margin:6px 0 10px}.custom-dial-file-button{display:inline-block;border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:#fff;padding:7px 10px;font:600 10px 'DM Mono',monospace;cursor:pointer}#custom-dial-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.custom-dial-upload-status{margin-top:8px;font:9px 'DM Mono',monospace;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-dial-remove{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--accent);padding:6px 8px;margin-top:8px;font:9px 'DM Mono',monospace;cursor:pointer}.custom-dial-remove:hover{border-color:var(--accent);background:var(--accent-soft)} /* 部件选择区以图片为主，文字作为辅助信息 */ .picker-component-visual{border:1px solid var(--line);border-radius:11px;background:#f4f1ee;min-height:138px;padding:8px;margin:0 0 9px;display:flex;align-items:center;justify-content:center;overflow:hidden}.picker-component-visual img{display:block;width:100%;height:138px;object-fit:contain}.picker-component-visual.is-fallback{background:#f2efeb}.picker-component-visual figcaption{font:9px 'DM Mono',monospace;color:var(--muted);text-align:center}.picker-component-heading{margin-bottom:6px}.picker-component-heading strong{font-size:12px}.picker-filter-note{margin-bottom:7px} .group-choice{padding:6px;align-items:center}.group-choice-images{display:flex;flex:0 0 58px;width:58px;align-content:center;justify-content:center;gap:3px;flex-wrap:wrap}.group-choice-image{display:block;flex:0 0 58px;width:58px;height:58px;object-fit:contain;border-radius:6px;background:#f2efeb}.group-choice-images .group-choice-image:nth-child(n+2){flex-basis:27px;width:27px;height:27px}.group-choice-image-empty{display:flex!important;align-items:center;justify-content:center;color:var(--muted);font:8px 'DM Mono',monospace}.group-choice-copy{min-width:0;display:flex;flex:1;align-items:flex-start;justify-content:space-between;gap:8px;padding:0 4px}.group-choice-copy strong{display:block}.group-choice-copy small{display:block;text-align:right;white-space:normal;line-height:1.35} .picker-component[data-picker-component="case-body"] .group-choice-images{flex-basis:72px;width:72px}.picker-component[data-picker-component="case-body"] .group-choice-images .group-choice-image{flex-basis:72px;width:72px;height:72px}.asset-color-choices,.asset-compact-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;padding:2px}.asset-color-choice,.asset-compact-choice{display:inline-flex;align-items:center;gap:6px;min-height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:5px 8px;font-size:10px;cursor:pointer;transition:.18s}.asset-color-choice:hover,.asset-color-choice:focus-visible,.asset-compact-choice:hover,.asset-compact-choice:focus-visible{border-color:var(--accent);background:#fff8f3;outline:0}.asset-color-choice.is-selected,.asset-compact-choice.is-selected{border-color:var(--accent);background:#fff8f3;box-shadow:0 0 0 2px #b56c4615}.asset-color-swatch{display:block;width:16px;height:16px;flex:0 0 16px;border-radius:50%;background:var(--asset-color,#b7bcc3);border:1px solid #24211f30;box-shadow:inset 0 1px 1px #ffffff88,0 1px 2px #24211f22}.asset-color-choice b,.asset-compact-choice b{font-size:12px;line-height:1;color:var(--accent)} .composition-choice-list{display:grid;gap:8px;margin-top:7px;padding:8px;border:1px solid #d8e3d5;border-radius:8px;background:#f7fbf5}.composition-choice-row{display:grid;gap:5px}.composition-choice-label{font:10px 'DM Mono',monospace;color:#5d725e}.composition-choice-options{display:flex;flex-wrap:wrap;gap:5px}.composition-choice-options .asset-compact-choice{min-height:29px;padding:4px 7px}.composition-choice-empty{font-size:10px;color:var(--muted)} @media(max-width:720px){.asset-color-choice,.asset-compact-choice{flex:1 1 calc(50% - 6px);justify-content:flex-start}} .customer-confirm{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}.customer-confirm[hidden]{display:none}.customer-confirm-backdrop{position:absolute;inset:0;background:rgba(36,33,31,.38);backdrop-filter:blur(2px)}.customer-confirm-dialog{position:relative;width:min(420px,100%);border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:24px;box-shadow:0 18px 60px rgba(36,33,31,.22)}.customer-confirm-dialog h2{font:600 25px 'Playfair Display',serif;margin:0}.customer-confirm-dialog p:not(.eyebrow){white-space:pre-line;color:var(--muted);font-size:12px;line-height:1.65;margin:12px 0 20px}.customer-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.customer-confirm-actions .primary-button,.customer-confirm-actions .secondary-button{margin:0} .custom-finish-panel{border-top:1px solid var(--line);padding-top:18px;margin-top:18px;display:grid;gap:10px}.custom-finish-panel[hidden]{display:none}.custom-finish-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.custom-finish-heading h2{font:600 22px 'Playfair Display',serif;margin:0}.custom-finish-note{margin:0;color:var(--muted);font-size:10px;line-height:1.55}.custom-finish-card,.custom-finish-preview-card{border:1px solid var(--line);border-radius:11px;background:#fff;padding:11px}.custom-finish-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}.custom-finish-section-title strong{font-size:12px}.custom-finish-section-title small{font:9px 'DM Mono',monospace;color:var(--muted)}.custom-finish-choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.custom-finish-choice{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:8px;text-align:left;cursor:pointer}.custom-finish-choice:hover,.custom-finish-choice.is-selected{border-color:var(--accent);background:#fff8f3;box-shadow:0 0 0 2px #b56c4615}.custom-finish-choice>span:last-child{display:grid;gap:3px;min-width:0}.custom-finish-choice strong{font-size:10px}.custom-finish-choice small{font:8px 'DM Mono',monospace;color:var(--muted);line-height:1.3}.custom-finish-choice-icon{display:block;position:relative;flex:0 0 38px;width:38px;height:38px;border-radius:50%;border:1px solid #b9b2ac;box-shadow:inset 0 2px 5px #fff8,0 2px 4px #24211f18}.glass-icon{background:radial-gradient(circle at 35% 28%,#fff 0 7%,#dff2f0 24%,#b8d8d4 56%,#85aaa7 100%);opacity:.9}.glass-icon:after{content:'';position:absolute;inset:7px;border:1px solid #fff9;border-radius:50%}.metal-icon{background:radial-gradient(circle at 33% 25%,#fff 0 8%,#d7d9da 20%,#92989d 62%,#53585c 100%)}.metal-icon:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:#fff8;font-size:13px}.custom-finish-field{display:grid;gap:5px;color:var(--muted);font:9px 'DM Mono',monospace}.custom-finish-field input[type=text]{width:100%;border:1px solid var(--line);border-radius:7px;padding:8px;color:var(--ink);font:11px 'DM Sans',sans-serif;background:#fff}.custom-finish-upload-row{display:flex;align-items:center;gap:7px;margin-top:9px}.custom-finish-upload-row input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.custom-finish-file-button,.custom-finish-clear{border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:#fff;padding:7px 9px;font:600 9px 'DM Mono',monospace;cursor:pointer}.custom-finish-clear{border-color:var(--line);background:#fff;color:var(--accent)}.custom-finish-clear:hover{border-color:var(--accent);background:var(--accent-soft)}.custom-finish-upload-status{margin:7px 0 0;color:var(--muted);font:8px 'DM Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-finish-preview-card{background:#f7fbf5}.custom-finish-preview{border:1px solid #d8e3d5;border-radius:9px;background:#fff;overflow:hidden}.custom-finish-preview svg{display:block;width:100%;height:auto}.custom-finish-preview-empty{padding:18px;color:var(--muted);font:9px 'DM Mono',monospace;text-align:center}@media(max-width:720px){.custom-finish-choice-list{grid-template-columns:1fr}.custom-finish-panel{width:100%}} /* Dark product studio theme */ .dark-studio-theme{--ink:#f2eee7;--muted:#92949a;--line:#2b2e32;--paper:#151719;--accent:#d2a064;--accent-soft:#2a2118;--stage:#0a0b0d;--stage-line:rgba(255,255,255,.045);background:#0b0c0e;color:var(--ink)} .dark-studio-theme body,.dark-studio-theme button,.dark-studio-theme input,.dark-studio-theme select{font-family:'DM Sans',sans-serif} .dark-studio-theme .customer-shell{max-width:1600px;padding:24px 3vw 34px} .dark-studio-theme .customer-header{align-items:center;margin-bottom:0;padding:0 0 18px;border-bottom:1px solid var(--line)} .dark-studio-theme .customer-header h1{font-size:clamp(28px,3vw,42px);letter-spacing:.02em;color:#faf7f0} .dark-studio-theme .customer-header .eyebrow{color:var(--accent);letter-spacing:.22em} .dark-studio-theme .customer-published-version{display:block;margin-top:7px;color:#81858c;font:9px 'DM Mono',monospace} .dark-studio-theme .customer-brand-lockup{display:grid;justify-items:center;gap:4px;flex:0 0 88px} .dark-studio-theme .customer-brand-symbol{display:block;width:78px;height:78px;object-fit:contain;filter:brightness(0) invert(1)} .dark-studio-theme .customer-brand-name{color:#f4f1eb;font:600 10px 'DM Sans',sans-serif;letter-spacing:.3em;padding-left:.3em;line-height:1} .dark-studio-theme .customer-header-branding{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0} .dark-studio-theme .customer-header-copy{flex:1 1 auto;min-width:0} .dark-studio-theme .customer-header-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end} .dark-studio-theme .customer-page-back{align-self:flex-start;display:grid;place-items:center;width:40px;height:40px;border:1px solid #3a3e43;border-radius:50%;background:#191b1e;color:#d2a064;padding:0;font:500 24px/1 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap} .dark-studio-theme .customer-page-back[hidden]{display:none} .dark-studio-theme .customer-page-back:hover,.dark-studio-theme .customer-page-back:focus-visible{border-color:var(--accent);background:#211e1a;color:#f0d6ac;outline:0} .dark-studio-theme .customer-back-button{border:1px solid #3a3e43;border-radius:999px;background:#191b1e;color:#d2a064;padding:9px 13px;font:500 10px 'DM Mono',monospace;cursor:pointer;white-space:nowrap} .dark-studio-theme .customer-back-button:hover{border-color:var(--accent);background:#211e1a;color:#f0d6ac} .dark-studio-theme .lede{color:#96989d;font-size:12px} .dark-studio-theme .customer-status{color:#8c8f95} .dark-studio-theme .status-dot{background:#c7995d;box-shadow:0 0 0 4px #c7995d18} .dark-studio-theme .studio-progress{display:flex;align-items:center;gap:0;margin:18px auto 16px;max-width:900px} .dark-studio-theme .studio-progress-step{position:relative;display:grid;justify-items:center;gap:5px;min-width:82px;padding:0 10px;border:0;background:transparent;color:#6f7379;cursor:pointer} .dark-studio-theme .studio-progress-step:before{content:'';position:absolute;top:10px;left:0;right:0;height:1px;background:#2b2e32;z-index:0} .dark-studio-theme .studio-progress-step:first-child:before{left:50%} .dark-studio-theme .studio-progress-step:last-child:before{right:50%} .dark-studio-theme .studio-progress-step span{position:relative;z-index:1;display:grid;place-items:center;width:21px;height:21px;border:1px solid #464a50;border-radius:50%;background:#0b0c0e;font:9px 'DM Mono',monospace} .dark-studio-theme .studio-progress-step strong{font:10px 'DM Mono',monospace;font-weight:500;white-space:nowrap} .dark-studio-theme .studio-progress-step.is-complete,.dark-studio-theme .studio-progress-step.is-active{color:var(--accent)} .dark-studio-theme .studio-progress-step.is-complete span,.dark-studio-theme .studio-progress-step.is-active span{border-color:var(--accent)} .dark-studio-theme .studio-progress-step.is-active span{background:var(--accent);color:#18120d;box-shadow:0 0 0 4px #d2a06422} .dark-studio-theme .design-entry-panel{margin-bottom:16px;padding:14px 18px;border-color:var(--line);background:#121416;box-shadow:none} .dark-studio-theme .design-entry-heading h2{font-size:20px;color:#f4f0e9} .dark-studio-theme .design-entry-note{color:#85898f} .dark-studio-theme .design-entry-actions{max-width:650px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .dark-studio-theme .design-entry-card{border-color:#303338;background:#1a1c1f;color:#eee9e1;padding:10px} .dark-studio-theme .design-entry-card:hover{border-color:var(--accent);background:#211d18;box-shadow:none} .dark-studio-theme .design-entry-card strong{font-size:11px} .dark-studio-theme .design-entry-card small{color:#81858b} .dark-studio-theme .design-entry-icon{background:#282522;color:var(--accent)} .dark-studio-theme .custom-entry-icon{background:#242629;color:#b7bbc1} .dark-studio-theme .customer-layout{grid-template-columns:minmax(270px,315px) minmax(500px,1fr) minmax(280px,320px);gap:14px} .dark-studio-theme .panel{border-color:var(--line);border-radius:12px;background:#141619;box-shadow:none} .dark-studio-theme .customer-picker,.dark-studio-theme .customer-summary{background:#121416} .dark-studio-theme .customer-picker{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;scroll-behavior:smooth;scrollbar-color:#4a4e54 #121416;scrollbar-width:thin} .dark-studio-theme .customer-picker::-webkit-scrollbar{width:6px} .dark-studio-theme .customer-picker::-webkit-scrollbar-track{background:#121416} .dark-studio-theme .customer-picker::-webkit-scrollbar-thumb{border-radius:99px;background:#4a4e54} .dark-studio-theme .picker-component{scroll-margin-top:14px} .dark-studio-theme .picker-component.is-auto-focused{animation:picker-focus-pulse 1s ease-out} @keyframes picker-focus-pulse{0%{box-shadow:inset 3px 0 0 var(--accent);background:#211e1a}100%{box-shadow:inset 0 0 0 transparent;background:transparent}} .dark-studio-theme .customer-load-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;margin-bottom:12px;border:1px solid #665038;border-radius:10px;background:#28221b;color:#f2d3a1;font-size:14px;line-height:1.5} .dark-studio-theme .customer-load-status[hidden]{display:none} .dark-studio-theme .customer-load-status button{flex-shrink:0;min-height:44px;padding:8px 12px;border:1px solid #d2a064;border-radius:8px;background:#d2a064;color:#17110a;cursor:pointer} .dark-studio-theme #continue-current-design{margin-bottom:12px} .dark-studio-theme .customer-header #return-to-start-menu{width:auto;min-height:40px;flex-shrink:0} .dark-studio-theme .customer-header>div{min-width:0} .dark-studio-theme button:disabled{cursor:not-allowed} .dark-studio-theme .customer-preview{background:#0d0f11;position:sticky;top:14px} .dark-studio-theme .panel-heading h2,.dark-studio-theme .preview-heading h2,.dark-studio-theme .custom-finish-heading h2{color:#f5f1e9} .dark-studio-theme .eyebrow{color:#7f8389} .dark-studio-theme .text-button{color:var(--accent)} .dark-studio-theme .text-button:hover{color:#efd2a7} .dark-studio-theme .panel-note,.dark-studio-theme .custom-finish-note,.dark-studio-theme .field-help{color:#858990} .dark-studio-theme .picker-component{border-color:#292c30} .dark-studio-theme .picker-component-heading strong{color:#f1ede5} .dark-studio-theme .picker-component-heading span,.dark-studio-theme .picker-filter-note{color:#82868c} .dark-studio-theme .group-choice{border-color:#2d3035;background:#1a1c1f;color:#eeeae2;box-shadow:none} .dark-studio-theme .group-choice:hover,.dark-studio-theme .group-choice.is-selected{border-color:var(--accent);background:#211e1a;box-shadow:0 0 0 1px #d2a06455} .dark-studio-theme .group-choice small,.dark-studio-theme .asset-choice em{color:#858990} .dark-studio-theme .group-choice-image,.dark-studio-theme .asset-choice img,.dark-studio-theme .picker-component-visual{background:#0d0f11;border-color:#2d3035} .dark-studio-theme .asset-color-choice,.dark-studio-theme .asset-compact-choice{border-color:#34373b;background:#1a1c1f;color:#e8e4dc} .dark-studio-theme .asset-color-choice:hover,.dark-studio-theme .asset-color-choice.is-selected,.dark-studio-theme .asset-compact-choice:hover,.dark-studio-theme .asset-compact-choice.is-selected{border-color:var(--accent);background:#211e1a;box-shadow:0 0 0 1px #d2a06455} .dark-studio-theme .composition-choice-list{border-color:#3c382f;background:#1b1a18} .dark-studio-theme .composition-choice-label{color:#c3a878} .dark-studio-theme .custom-dial-uploader,.dark-studio-theme .custom-finish-card,.dark-studio-theme .custom-finish-preview-card{border-color:#2d3035;background:#191b1e} .dark-studio-theme .custom-dial-uploader p,.dark-studio-theme .custom-dial-controls small{color:#858990} .dark-studio-theme .custom-dial-toggle,.dark-studio-theme .custom-dial-remove,.dark-studio-theme .custom-finish-clear{border-color:#40444a;background:#1a1c1f;color:var(--accent)} .dark-studio-theme .custom-dial-file-button,.dark-studio-theme .custom-finish-file-button{border-color:var(--accent);background:var(--accent);color:#17120d} .dark-studio-theme .custom-dial-move-grid button,.dark-studio-theme .custom-dial-fine-row button,.dark-studio-theme .custom-dial-scale-actions button{border-color:#3a3e43;background:#1b1d20;color:#e7e2d9} .dark-studio-theme .custom-dial-scale-label,.dark-studio-theme .custom-dial-tick-label,.dark-studio-theme .custom-finish-field{color:#96999f} .dark-studio-theme input,.dark-studio-theme select{border-color:#34373c;background:#101214;color:#eeeae2} .dark-studio-theme input::placeholder{color:#686d74} .dark-studio-theme .customer-stage-wrap{padding:18px;border:1px solid #25282c;background:#090a0b;border-radius:10px;box-shadow:inset 0 0 80px #0008} .dark-studio-theme .customer-stage{background:#101214;background-image:none;box-shadow:0 24px 80px #0008} .dark-studio-theme .dial-artwork-panel{margin-top:12px;padding:14px;border:1px solid #4a3c2b;border-radius:14px;background:#211e1a;color:#eeeae2} .dark-studio-theme .custom-dial-artwork-panel{margin-top:14px;border-color:#80603b;background:#241d16;box-shadow:0 0 0 2px #d2a0642b} .dark-studio-theme .dial-artwork-panel[hidden]{display:none!important} .dark-studio-theme .dial-artwork-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px} .dark-studio-theme .dial-artwork-heading strong,.dark-studio-theme .dial-artwork-heading small{display:block} .dark-studio-theme .dial-artwork-heading strong{color:#f0d6ac;font-size:14px} .dark-studio-theme .dial-artwork-heading small{margin-top:4px;color:#c3b69f;font:12px/1.5 'DM Sans',sans-serif} .dark-studio-theme .dial-artwork-field{display:grid;gap:5px;margin-top:9px;color:#c7b596;font-size:10px} .dark-studio-theme .dial-artwork-field input,.dark-studio-theme .dial-artwork-field select{width:100%;border:1px solid #41454a;border-radius:8px;background:#181a1d;color:#eeeae2;padding:8px;font-size:11px} .dark-studio-theme .dial-artwork-field input[type=file]{padding:7px} .dark-studio-theme .dial-artwork-style-row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;margin-top:9px} .dark-studio-theme .dial-artwork-style-row label{display:grid;gap:5px;color:#c7b596;font-size:10px} .dark-studio-theme .dial-artwork-style-row input,.dark-studio-theme .dial-artwork-style-row select{width:100%;border:1px solid #41454a;border-radius:8px;background:#181a1d;color:#eeeae2;padding:7px;font-size:10px} .dark-studio-theme .dial-artwork-style-row input[type=color]{height:31px;padding:3px} .dark-studio-theme .dial-artwork-field small{color:#b9bdc4;font:11px/1.4 'DM Sans',sans-serif} .dark-studio-theme .dial-artwork-layer{display:grid;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid #34373b} .dark-studio-theme .dial-artwork-layers{display:grid;gap:8px;margin-top:10px} .dark-studio-theme .dial-artwork-add-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px} .dark-studio-theme .dial-artwork-add{border:1px solid #6e5438;border-radius:8px;background:#2b241d;color:#e3bd80;padding:8px;font:10px 'DM Mono',monospace;cursor:pointer} .dark-studio-theme .dial-artwork-add:hover{border-color:#d2a064;background:#3a2a1b} .dark-studio-theme .dial-artwork-layer-heading{display:flex;align-items:center;justify-content:space-between;gap:8px} .dark-studio-theme .dial-artwork-remove{border:1px solid #80554b;border-radius:6px;background:#271b19;color:#eeab97;min-height:34px;padding:6px 9px;font:11px 'DM Sans',sans-serif;cursor:pointer} .dark-studio-theme .dial-artwork-empty{color:#b9bdc4;font:12px/1.4 'DM Sans',sans-serif} .dark-studio-theme .dial-artwork-layer.is-new-layer{border-color:#d2a064;box-shadow:0 0 0 2px #d2a06455} .dark-studio-theme .dial-artwork-layer>strong{color:#e4cda8;font-size:10px} .dark-studio-theme .dial-artwork-range{display:grid;gap:5px;color:#b9bdc4;font:11px 'DM Mono',monospace} .dark-studio-theme .dial-artwork-range span{display:flex;justify-content:space-between;gap:8px} .dark-studio-theme .dial-artwork-range output{color:#d2a064} .dark-studio-theme .dial-artwork-range input{width:100%;accent-color:#d2a064} .dark-studio-theme .dial-artwork-position{display:grid;gap:6px;margin-top:7px} .dark-studio-theme .dial-artwork-position-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#c7b596;font-size:10px} .dark-studio-theme .dial-artwork-position-heading label{display:flex;align-items:center;gap:6px;color:#b9bdc4;font-size:11px} .dark-studio-theme .dial-artwork-position-heading select{max-width:150px;border:1px solid #41454a;border-radius:7px;background:#181a1d;color:#eeeae2;padding:5px 7px;font-size:10px} .dark-studio-theme .dial-artwork-move-pad{display:grid;grid-template-columns:40px minmax(76px,1fr) 40px;grid-template-rows:34px 44px 34px;gap:4px;max-width:220px;margin:0 auto} .dark-studio-theme .dial-artwork-move-pad button{display:grid;place-items:center;min-width:40px;min-height:34px;border:1px solid #514638;border-radius:8px;background:#29231c;color:#e7c58f;font-size:17px;line-height:1;cursor:pointer;touch-action:manipulation} .dark-studio-theme .dial-artwork-move-pad button:hover{border-color:#d2a064;background:#3a2d20;color:#fff0d0} .dark-studio-theme .dial-artwork-move-pad button:focus-visible{outline:2px solid #d2a064;outline-offset:2px} .dark-studio-theme .dial-artwork-move-up{grid-column:2;grid-row:1} .dark-studio-theme .dial-artwork-move-left{grid-column:1;grid-row:2} .dark-studio-theme .dial-artwork-move-right{grid-column:3;grid-row:2} .dark-studio-theme .dial-artwork-move-down{grid-column:2;grid-row:3} .dark-studio-theme .dial-artwork-position-readout{display:grid;align-content:center;justify-content:center;border:1px solid #35383c;border-radius:8px;background:#191b1e;color:#e4bb80;font:11px/1.5 'DM Mono',monospace;text-align:center;white-space:pre-line} .dark-studio-theme .dial-artwork-clear{margin-top:5px;width:100%;padding:7px;font-size:9px} .dark-studio-theme .dial-artwork-note{margin:10px 0 0;color:#b9bdc4;font:12px/1.5 'DM Sans',sans-serif} .dark-studio-theme .customer-dial-artwork-overlay{position:absolute;left:50%;top:50%;width:100%;height:100%;transform-origin:center;pointer-events:none} .dark-studio-theme .customer-dial-artwork-overlay-custom{left:0;top:0;width:100%;height:100%;transform:none} .dark-studio-theme .customer-dial-artwork-text,.dark-studio-theme .customer-dial-artwork-logo{position:absolute;left:50%;top:50%;transform-origin:center;pointer-events:none} .dark-studio-theme .customer-dial-artwork-text{max-width:42%;color:#efe0bd;font:600 16px/1.1 'DM Sans',sans-serif;letter-spacing:.08em;text-align:center;text-shadow:0 1px 3px #000b;white-space:nowrap} .dark-studio-theme .customer-dial-artwork-logo{width:16%;height:16%;object-fit:contain;filter:drop-shadow(0 1px 2px #0009)} .dark-studio-theme .customer-stage-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:#73777d;text-align:center;pointer-events:none} .dark-studio-theme .customer-stage-empty-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #44484d;border-radius:50%;color:var(--accent);font:26px/1 'DM Sans',sans-serif} .dark-studio-theme .customer-stage-empty strong{color:#b9b5ad;font:500 16px 'Playfair Display',serif} .dark-studio-theme .customer-stage-empty small{max-width:220px;color:#72767c;font:10px 'DM Mono',monospace;line-height:1.5} .dark-studio-theme .preview-toolbar{border-color:#2a2d31;color:#858990} .dark-studio-theme .preview-toolbar button{border-color:#3a3e43;background:#191b1e;color:#e7e2da} .dark-studio-theme .preview-toolbar button:hover{border-color:var(--accent);color:var(--accent)} .dark-studio-theme .preview-note{color:#858990} .dark-studio-theme .preview-badge{border:1px solid #4a3c2b;background:#251e16;color:#d8ad71} .dark-studio-theme .summary-list{margin-top:14px} .dark-studio-theme .summary-row{border-color:#2a2d31;padding:12px 0} .dark-studio-theme .summary-row strong{color:#eeeae2} .dark-studio-theme .summary-row small{color:#858990} .dark-studio-theme .summary-row b{color:var(--accent)} .dark-studio-theme .summary-empty{color:#777c83} .dark-studio-theme .summary-actions{border-color:#2a2d31} .dark-studio-theme .primary-button{border-color:var(--accent);background:var(--accent);color:#17120d} /* 表盘标题处的玻璃类型开关 */ .picker-bubble-toggle{display:flex;align-items:center;gap:7px;width:158px;max-width:158px;min-width:0;padding:5px 8px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;transition:.18s;flex:0 0 auto} .picker-bubble-toggle:hover,.picker-bubble-toggle.is-active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px #b56c4615} .picker-bubble-copy{display:grid;gap:2px;min-width:0} .picker-bubble-copy strong{font-size:10px;line-height:1.2;white-space:nowrap} .picker-bubble-copy small{font:8px 'DM Mono',monospace;color:var(--muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dial-bubble-icon{position:relative;display:block;flex:0 0 34px;width:34px;height:34px;border:1px solid #8e969a;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff 0 8%,#dce9e8 25%,#a9c5c3 60%,#697b7c 100%);box-shadow:inset 0 1px 3px #fff9,0 2px 4px #24211f22} .dial-bubble-icon:after{content:'';position:absolute;inset:7px;border:1px solid #fff9;border-radius:50%} .customer-dial-date-overlay{position:absolute;left:50%;top:50%;width:100%;height:100%;transform-origin:center;pointer-events:none} .customer-dial-date-window{position:absolute;left:78%;top:50%;z-index:2;display:grid;place-items:center;box-sizing:border-box;width:7.5%;aspect-ratio:1.45;overflow:hidden;border:.7px solid #899197;border-radius:.4px;background:#fff;box-shadow:inset 0 .8px 1.2px #0005,0 .4px 0 #ffffff80;color:#202527;font:400 18px/1 Arial,Helvetica,sans-serif;font-variant-numeric:lining-nums tabular-nums;letter-spacing:0;text-shadow:none;transform:translate(-50%,-50%)} .customer-dial-date-number{display:block;max-width:100%;line-height:1;white-space:nowrap} /* Match the applied hour markers: straight polished bevels, dark inner lip, bright upper edge and a darker lower/right facet, rather than a colour wash. */ .customer-dial-date-window.has-metal-frame{overflow:visible;border-color:#30363a;border-radius:0;isolation:isolate;--date-metal-top:#f9fbfc;--date-metal-left:#bfc8ce;--date-metal-bottom:#626c73;--date-metal-right:#7c878e;--date-metal-highlight:#e9eff2} .customer-dial-date-window.has-metal-frame::before{content:"";position:absolute;inset:-2.3px;pointer-events:none;border-radius:0;border:1.8px solid;border-color:var(--date-metal-top) var(--date-metal-right) var(--date-metal-bottom) var(--date-metal-left);box-shadow:inset 0 0 0 .55px #292622,0 0 0 .45px var(--date-metal-highlight),.45px 1px 1.3px #0009} .customer-dial-date-window.has-metal-frame[data-frame-metal="gold"]{--date-metal-top:#fff0af;--date-metal-left:#d6b263;--date-metal-bottom:#76501f;--date-metal-right:#a17630;--date-metal-highlight:#f4d68d} .customer-dial-date-window.has-metal-frame[data-frame-metal="rose-gold"]{--date-metal-top:#ffe3ce;--date-metal-left:#d99770;--date-metal-bottom:#6b3020;--date-metal-right:#955037;--date-metal-highlight:#edb68e} .customer-dial-date-window.is-bubble{border-color:#9ca7ac} .date-color-picker{min-width:0;margin:14px 0 0;padding:12px;border:1px solid #44494e;border-radius:12px} .date-color-picker[hidden]{display:none!important} .date-color-picker legend{padding:0 6px;color:#e1ba7c;font-size:13px;font-weight:700} .date-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .date-color-choice{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:48px;padding:8px 5px;border:1px solid #44494e;border-radius:9px;background:#191d21;color:#edf0f2;font-size:12px;cursor:pointer} .date-color-choice.is-selected{border-color:#d9ac67;background:#34291b;box-shadow:inset 0 0 0 1px #d9ac67} .date-color-choice:focus-visible{outline:2px solid #efc887;outline-offset:2px} .date-color-sample{display:grid;place-items:center;flex:0 0 25px;height:20px;border:1px solid #72787a;border-radius:1px;font:400 16px/1 Arial,sans-serif} @media(max-width:420px){.date-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .customer-dial-date-lens{position:absolute;left:78%;top:50%;z-index:3;box-sizing:border-box;width:10.125%;aspect-ratio:1.45;border:1px solid #e8f1f5cc;border-radius:25%;background:transparent;box-shadow:0 0 0 .6px #243038aa,inset 0 0 0 .6px #ffffff55;pointer-events:none;transform:translate(-50%,-50%)} .customer-dial-date-lens:after{content:'';position:absolute;inset:2px;border:.5px solid #ffffff55;border-radius:inherit;background:transparent;pointer-events:none} .customer-dial-date-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none} .customer-dial-date-window.is-bubble .customer-dial-date-image{width:100%;height:100%} .customer-dial-date-custom-window{z-index:32} .customer-dial-date-custom-window .customer-dial-date-overlay{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible} .dark-studio-theme .picker-bubble-toggle{border-color:#3b3e43;background:#191b1e;color:#f0ede7} .dark-studio-theme .picker-bubble-toggle:hover,.dark-studio-theme .picker-bubble-toggle.is-active{border-color:#d2a064;background:#3a2a1b;box-shadow:0 0 0 1px #d2a06455} .dark-studio-theme .picker-heading-actions .picker-bubble-copy strong{font-size:10px;line-height:1.2} .dark-studio-theme .picker-bubble-copy small{color:#898d93} .dark-studio-theme .primary-button:hover{background:#e0b77f;border-color:#e0b77f} .dark-studio-theme .secondary-button{border-color:#3a3e43;background:#191b1e;color:#e6e1d8} .dark-studio-theme .secondary-button:hover{border-color:var(--accent);color:var(--accent)} .dark-studio-theme .action-feedback{color:var(--accent)} .dark-studio-theme .customer-preset-gallery{border-color:#2a2d31;position:relative} .dark-studio-theme .customer-preset-gallery-heading strong{color:#eeeae2} .dark-studio-theme .customer-preset-gallery-controls{position:absolute;z-index:3;top:50%;left:8px;right:8px;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)}.dark-studio-theme .customer-preset-gallery-controls button{display:grid;place-items:center;width:40px;height:40px;border:1px solid #6b5435;border-radius:50%;background:#151719dd;color:#e0b77f;font-size:22px;line-height:1;cursor:pointer;pointer-events:auto;box-shadow:0 4px 14px #0008}.dark-studio-theme .customer-preset-gallery-controls button:hover{border-color:#f3d29b;background:#3a2a1b;color:#f3d29b;transform:scale(1.06)} .dark-studio-theme .customer-preset-list{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 14px;scroll-snap-type:x mandatory;scrollbar-color:#4a4e54 #121416;scrollbar-width:thin} .dark-studio-theme .customer-preset-list::-webkit-scrollbar{height:6px} .dark-studio-theme .customer-preset-list::-webkit-scrollbar-thumb{border-radius:99px;background:#4a4e54} .dark-studio-theme .customer-preset-card{flex:0 0 calc((100% - 14px)/2);min-width:0;scroll-snap-align:start} .dark-studio-theme .customer-preset-card img,.dark-studio-theme .customer-preset-card-fallback{height:330px} .dark-studio-theme .design-entry-actions{grid-template-columns:1fr} .dark-studio-theme .customer-preset-card{border-color:#2f3237;background:#191b1e} .dark-studio-theme .customer-preset-card img,.dark-studio-theme .customer-preset-card-fallback{background:#0e1012} .dark-studio-theme .customer-preset-card-body strong{color:#eeeae2} .dark-studio-theme .customer-preset-card-body small{color:#858990} .dark-studio-theme .customer-preset-card-body button{border-color:var(--accent);background:var(--accent);color:#17120d} .dark-studio-theme .customer-preset-card-body button:hover{background:#e0b77f} .dark-studio-theme .loading-card,.dark-studio-theme footer{color:#777c83} .dark-studio-theme footer{border-top:1px solid #25282c;padding-top:16px} .dark-studio-theme .customer-confirm-dialog{border-color:#3a3e43;background:#17191c;box-shadow:0 18px 60px #000b} .dark-studio-theme .customer-confirm-backdrop{background:#000a} .dark-studio-theme .customer-confirm-dialog p:not(.eyebrow){color:#94989e} .dark-studio-theme .customer-preset-image-trigger{position:relative;display:block;flex:0 0 auto;width:100%;padding:0;border:0;background:#0e1012;cursor:zoom-in} .dark-studio-theme .customer-preset-image-trigger:focus-visible{outline:2px solid #e0b77f;outline-offset:-3px} .dark-studio-theme .customer-preset-image-hint{position:absolute;right:10px;bottom:10px;padding:5px 8px;border:1px solid #ffffff33;border-radius:999px;background:#111317d9;color:#eeeae2;font:10px/1.2 'DM Sans',sans-serif;pointer-events:none} .dark-studio-theme .preset-image-lightbox{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:20px} .dark-studio-theme .preset-image-lightbox[hidden]{display:none!important} .dark-studio-theme .preset-image-lightbox-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050607ef;backdrop-filter:blur(5px);cursor:zoom-out} .dark-studio-theme .preset-image-lightbox-dialog{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;width:min(1180px,96vw);height:min(900px,94dvh);padding:14px;border:1px solid #44484e;border-radius:16px;background:#151719;box-shadow:0 24px 80px #000b} .dark-studio-theme .preset-image-lightbox-header{position:relative;display:flex;align-items:center;min-height:34px;padding:0 48px 0 4px} .dark-studio-theme .preset-image-lightbox-header h2{margin:0;color:#f1ede5;font:600 17px/1.3 'DM Sans',sans-serif;overflow-wrap:anywhere} .dark-studio-theme .preset-image-lightbox-gallery-counter{margin-left:auto;margin-right:50px;padding:5px 9px;border:1px solid #3b3f45;border-radius:999px;background:#1b1e22;color:#d2a064;font:11px 'DM Mono',monospace} .dark-studio-theme .preset-image-lightbox-gallery-counter[hidden]{display:none!important} .dark-studio-theme .preset-image-lightbox-header .customer-confirm-close{top:0;right:0} .dark-studio-theme .preset-image-lightbox-stage{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border:1px solid #2f3237;border-radius:10px;background:#0b0d0f} .dark-studio-theme .preset-image-lightbox-stage.is-showcase-gallery{touch-action:pan-y} .dark-studio-theme .preset-image-lightbox-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(94dvh - 110px);object-fit:contain;cursor:zoom-in} .dark-studio-theme .preset-image-lightbox-gallery-nav{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:48px;height:64px;padding:0;transform:translateY(-50%);border:1px solid #ffffff30;border-radius:10px;background:#111318d9;color:#f1ede5;font:32px/1 'DM Sans',sans-serif;cursor:pointer;backdrop-filter:blur(5px)} .dark-studio-theme .preset-image-lightbox-gallery-nav:hover{border-color:#d2a064;background:#2a2118;color:#f0c17c} .dark-studio-theme .preset-image-lightbox-gallery-nav:focus-visible{outline:2px solid #d2a064;outline-offset:2px} .dark-studio-theme .preset-image-lightbox-gallery-nav[hidden],.dark-studio-theme .preset-image-lightbox-stage.is-zoomed .preset-image-lightbox-gallery-nav{display:none!important} .dark-studio-theme .preset-image-lightbox-gallery-nav.is-previous{left:12px} .dark-studio-theme .preset-image-lightbox-gallery-nav.is-next{right:12px} .dark-studio-theme .preset-image-lightbox-stage.is-zoomed{display:block;overflow:auto;cursor:zoom-out} .dark-studio-theme .preset-image-lightbox-stage.is-zoomed img{max-width:none;max-height:none;margin:0;cursor:zoom-out} .dark-studio-theme #preset-image-lightbox-hint{margin:0 3px 2px;color:#a8adb4;font:11px/1.4 'DM Sans',sans-serif} .dark-studio-theme.has-preset-image-open{overflow:hidden} .dark-studio-theme.has-custom-dial-editor-open{overflow:hidden} .dark-studio-theme .custom-dial-editor-modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:14px} .dark-studio-theme .custom-dial-editor-modal[hidden]{display:none!important} .dark-studio-theme .custom-dial-editor-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050607ed;backdrop-filter:blur(7px);cursor:default} .dark-studio-theme .custom-dial-editor-dialog{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;width:min(1480px,98vw);height:min(980px,96dvh);min-width:0;min-height:0;padding:20px;border:1px solid #514331;border-radius:18px;background:#151719;box-shadow:0 26px 90px #000d;color:#eeeae2} .dark-studio-theme .custom-dial-editor-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-width:0;padding:0 44px 13px 2px;border-bottom:1px solid #303338} .dark-studio-theme .custom-dial-editor-header .eyebrow{margin:0 0 4px;color:#d2a064} .dark-studio-theme .custom-dial-editor-header h2{margin:0;color:#f3d29b;font:600 clamp(20px,2vw,28px)/1.15 'DM Sans',sans-serif} .dark-studio-theme .custom-dial-editor-header p:last-child{margin:6px 0 0;color:#999da4;font-size:12px;line-height:1.45} .dark-studio-theme .custom-dial-editor-header .customer-confirm-close{top:1px;right:0} .dark-studio-theme .custom-dial-editor-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:20px;min-width:0;min-height:0;overflow:hidden} .dark-studio-theme .custom-dial-editor-preview-column{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;min-width:0;min-height:0} .dark-studio-theme .custom-dial-editor-zoom-tools{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;color:#c7b596} .dark-studio-theme .custom-dial-editor-zoom-tools strong{margin-right:5px;font-size:11px;font-weight:600;white-space:nowrap} .dark-studio-theme .custom-dial-editor-zoom-tools button{display:grid;place-items:center;min-width:32px;height:30px;padding:0 8px;border:1px solid #514638;border-radius:8px;background:#211e1a;color:#e7c58f;font-size:16px;cursor:pointer} .dark-studio-theme .custom-dial-editor-zoom-tools button:hover{border-color:#d2a064;background:#3a2d20;color:#fff0d0} .dark-studio-theme .custom-dial-editor-zoom-tools input{width:clamp(90px,15vw,220px);accent-color:#d2a064} .dark-studio-theme .custom-dial-editor-zoom-tools output{min-width:42px;color:#e2bd80;font:10px 'DM Mono',monospace;text-align:center} .dark-studio-theme .custom-dial-editor-zoom-tools .custom-dial-editor-zoom-reset{min-width:46px;font:10px 'DM Sans',sans-serif} .dark-studio-theme .custom-dial-editor-preview-frame{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border:1px solid #30343a;border-radius:14px;background:radial-gradient(ellipse at 50% 44%,#191c20 0,#0b0d0f 72%)} .dark-studio-theme .custom-dial-editor-preview-stage{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;background:transparent} .dark-studio-theme .custom-dial-editor-preview-stage.is-pan-ready{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none} .dark-studio-theme .custom-dial-editor-preview-stage.is-panning{cursor:grabbing} .dark-studio-theme .custom-dial-editor-preview-stage.is-panning .custom-dial-editor-preview-content{transition:none} .dark-studio-theme .custom-dial-editor-preview-content{position:absolute;left:50%;top:50%;width:760px;height:894px;transform-origin:center;transition:transform .14s ease;pointer-events:none} .dark-studio-theme .custom-dial-editor-preview-status{margin:0;color:#858990;font:10px/1.4 'DM Sans',sans-serif;text-align:center} .dark-studio-theme .custom-dial-editor-empty{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:8px;color:#777c83;text-align:center} .dark-studio-theme .custom-dial-editor-empty>span{display:grid;place-items:center;width:54px;height:54px;border:1px solid #44484d;border-radius:50%;color:#d2a064;font:30px/1 'DM Sans',sans-serif} .dark-studio-theme .custom-dial-editor-empty strong{color:#d5d0c6;font-size:15px;font-weight:500} .dark-studio-theme .custom-dial-editor-empty small{font-size:11px} .dark-studio-theme .custom-dial-editor-controls{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 4px 0;scrollbar-color:#50545a #17191c;scrollbar-width:thin} .dark-studio-theme .custom-dial-editor-controls>*{flex-shrink:0} .dark-studio-theme .custom-dial-editor-tools-column{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-width:0;min-height:0;overflow:hidden} /* The sticky buttons forward to the existing bound layer actions. Expose one set. */ .dark-studio-theme .custom-dial-editor-controls .dial-artwork-add-row{display:none} .dark-studio-theme #custom-dial-file[hidden]{display:none!important} .dark-studio-theme .custom-dial-editor-controls>.dial-artwork-panel{order:1} .dark-studio-theme .custom-dial-editor-controls>.custom-dial-uploader{order:0} .dark-studio-theme .custom-dial-editor-controls>.dial-options-panel{order:3} .dark-studio-theme .custom-dial-editor-controls>.custom-dial-editor-existing-library{order:4} .dark-studio-theme .custom-dial-editor-create-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;margin:0;padding:8px 0;border-bottom:1px solid #34373b;background:#151719} .dark-studio-theme .custom-dial-editor-create-tools>div{display:grid;gap:3px;min-width:0} .dark-studio-theme .custom-dial-editor-create-tools strong{color:#f3d29b;font-size:12px} .dark-studio-theme .custom-dial-editor-create-tools small{color:#b9bdc4;font:11px/1.4 'DM Sans',sans-serif} .dark-studio-theme .custom-dial-editor-create-tools button{min-height:40px;padding:8px 10px;border:1px solid #8e6939;border-radius:8px;background:#34281b;color:#f3d29b;font:600 12px 'DM Sans',sans-serif;white-space:nowrap;cursor:pointer} .dark-studio-theme .custom-dial-editor-create-tools button:hover{border-color:#e0b77f;background:#49351f;color:#fff0d0} .dark-studio-theme .custom-dial-editor-create-tools button:focus-visible,.dark-studio-theme .custom-dial-editor-zoom-tools button:focus-visible{outline:2px solid #d2a064;outline-offset:2px} .dark-studio-theme .custom-dial-editor-existing-library{display:grid;gap:9px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid #34373b} .dark-studio-theme .custom-dial-editor-existing-library[hidden]{display:none!important} .dark-studio-theme .custom-dial-editor-existing-heading{display:grid;gap:4px} .dark-studio-theme .custom-dial-editor-existing-heading strong{color:#f0d6ac;font-size:13px} .dark-studio-theme .custom-dial-editor-existing-heading small{color:#9b9da2;font:10px/1.4 'DM Sans',sans-serif} .dark-studio-theme .custom-dial-editor-existing-choices:empty{display:none} .dark-studio-theme .custom-dial-editor-controls>.custom-dial-uploader{margin:0;padding:0;border:0;background:transparent;box-shadow:none} .dark-studio-theme .custom-dial-editor-controls .custom-dial-uploader-heading{align-items:flex-start;margin:0 0 8px} .dark-studio-theme .custom-dial-editor-controls .custom-dial-uploader-heading strong{color:#f3d29b;font-size:16px} .dark-studio-theme .custom-dial-editor-controls .custom-dial-uploader-heading small{display:block;margin-top:4px;color:#9b9da2;font:11px/1.45 'DM Sans',sans-serif} .dark-studio-theme .custom-dial-editor-controls #custom-dial-uploader-content{display:grid;gap:9px} .dark-studio-theme .custom-dial-editor-controls .custom-dial-image-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px} .dark-studio-theme .custom-dial-editor-controls .custom-dial-image-actions>.custom-dial-file-button,.dark-studio-theme .custom-dial-editor-controls .custom-dial-image-actions>.custom-dial-remove{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;box-sizing:border-box;margin:0;padding:9px 12px;font:600 12px 'DM Sans',sans-serif;text-align:center} .dark-studio-theme .custom-dial-editor-controls .custom-dial-image-actions>.custom-dial-remove{border-color:#80605a;background:#251d1d;color:#f0b9af} .dark-studio-theme .custom-dial-editor-controls .custom-dial-image-actions>.custom-dial-remove:hover:not(:disabled){border-color:#d6a194;background:#392421} .dark-studio-theme .custom-dial-editor-controls .custom-dial-image-actions>.custom-dial-remove:disabled{border-color:#45484d;background:#202327;color:#9b9fa6;cursor:not-allowed} .dark-studio-theme .custom-dial-editor-controls .custom-dial-image-actions>:focus-visible{outline:2px solid #d2a064;outline-offset:2px} .dark-studio-theme .custom-dial-editor-controls #custom-dial-uploader-content>p{margin:0;color:#9b9da2;font-size:11px} .dark-studio-theme .custom-dial-editor-controls .custom-dial-upload-status{font-size:11px} .dark-studio-theme .custom-dial-editor-controls .custom-dial-controls{gap:12px;margin-top:12px;padding-top:13px;border-color:#34373b} .dark-studio-theme .custom-dial-editor-controls .custom-dial-control-title{color:#f0d6ac;font-size:14px} .dark-studio-theme .custom-dial-editor-controls .custom-dial-artwork-panel{margin-top:14px} .dark-studio-theme .custom-dial-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;padding-top:12px;border-top:1px solid #303338} .dark-studio-theme .custom-dial-editor-footer small{color:#999da4;font-size:11px;line-height:1.4} .dark-studio-theme .custom-dial-editor-footer .primary-button{width:auto;min-width:160px;padding:11px 18px;font-size:11px} .dark-studio-theme .custom-dial-editor-launch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:9px 0;padding:13px 15px;border:1px solid #725533;border-radius:12px;background:linear-gradient(120deg,#2b241d,#1d1b18);color:#f3d29b;text-align:left;cursor:pointer;box-shadow:0 0 0 1px #d2a06422} .dark-studio-theme .custom-dial-editor-launch:hover,.dark-studio-theme .custom-dial-editor-launch:focus-visible{border-color:#d2a064;background:#38291b;outline:0;box-shadow:0 0 0 2px #d2a06455} .dark-studio-theme .custom-dial-editor-launch>span{display:grid;gap:4px;min-width:0} .dark-studio-theme .custom-dial-editor-launch strong{font-size:13px} .dark-studio-theme .custom-dial-editor-launch small{color:#b9a785;font:10px/1.4 'DM Sans',sans-serif} .dark-studio-theme .custom-dial-editor-launch>b{flex:0 0 auto;font-size:11px} @media(max-width:850px){ .dark-studio-theme .custom-dial-editor-modal{padding:8px} .dark-studio-theme .custom-dial-editor-dialog{width:100%;height:96dvh;gap:10px;padding:14px;border-radius:14px} .dark-studio-theme .custom-dial-editor-header{padding-right:42px;padding-bottom:9px} .dark-studio-theme .custom-dial-editor-header p:last-child{font-size:11px} .dark-studio-theme .custom-dial-editor-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(220px,36dvh) minmax(0,1fr);gap:10px} .dark-studio-theme .custom-dial-editor-preview-stage{width:min(100%,30dvh,420px)} .dark-studio-theme .custom-dial-editor-controls{padding-right:3px} .dark-studio-theme .custom-dial-editor-zoom-tools{gap:6px} .dark-studio-theme .custom-dial-editor-zoom-tools input{width:clamp(75px,22vw,180px)} } @media(max-width:560px){ .dark-studio-theme .custom-dial-editor-dialog{padding:12px} .dark-studio-theme .custom-dial-editor-header h2{font-size:20px} .dark-studio-theme .custom-dial-editor-footer{align-items:stretch;flex-direction:column;gap:9px;padding-top:9px} .dark-studio-theme .custom-dial-editor-footer .primary-button{width:100%;min-height:42px} .dark-studio-theme .custom-dial-editor-create-tools{grid-template-columns:1fr 1fr;gap:6px} .dark-studio-theme .custom-dial-editor-create-tools>div{grid-column:1/-1} .dark-studio-theme .custom-dial-editor-create-tools button{min-height:40px;padding:8px;font-size:12px} .dark-studio-theme .custom-dial-editor-zoom-tools{gap:4px} .dark-studio-theme .custom-dial-editor-zoom-tools strong{font-size:9px;margin-right:0} .dark-studio-theme .custom-dial-editor-zoom-tools button{min-width:28px;height:28px;padding:0 5px} .dark-studio-theme .custom-dial-editor-zoom-tools input{width:min(24vw,95px)} .dark-studio-theme .custom-dial-editor-zoom-tools output{min-width:36px;font-size:9px} } .dark-studio-theme .custom-finish-preview{border-color:#3a3e43;background:#101214} @media(max-width:1100px){.dark-studio-theme .customer-layout{grid-template-columns:minmax(250px,300px) minmax(0,1fr)}.dark-studio-theme .customer-summary{grid-column:1/-1}.dark-studio-theme .customer-summary .summary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}} @media(max-width:720px){.dark-studio-theme .customer-shell{padding:18px 10px 28px}.dark-studio-theme .customer-header{display:flex;align-items:center;gap:10px}.dark-studio-theme .customer-header-branding{gap:10px}.dark-studio-theme .customer-brand-lockup{flex-basis:76px}.dark-studio-theme .customer-brand-symbol{width:68px;height:68px}.dark-studio-theme .customer-brand-name{font-size:9px}.dark-studio-theme .customer-header-copy .eyebrow{font-size:8px;letter-spacing:.12em}.dark-studio-theme .customer-status{margin-top:12px}.dark-studio-theme .studio-progress{overflow-x:auto;justify-content:flex-start;padding:2px 0 8px}.dark-studio-theme .studio-progress-step{min-width:74px}.dark-studio-theme .customer-layout{display:flex;flex-direction:column}.dark-studio-theme .customer-preview{order:-1;position:static;width:100%}.dark-studio-theme .customer-picker,.dark-studio-theme .customer-summary{width:100%;position:static;max-height:none;overflow:visible}.dark-studio-theme .customer-summary .summary-list{display:block}.dark-studio-theme .design-entry-actions{grid-template-columns:1fr}.dark-studio-theme .customer-stage-wrap{padding:8px}.dark-studio-theme footer{display:block;line-height:2}} /* Reference-inspired studio layout: preview first, current editor below, configuration at right. */ .dark-studio-theme .customer-layout{grid-template-columns:minmax(0,1fr) minmax(270px,320px);grid-template-areas:"preview summary" "picker picker";align-items:start;gap:14px} .dark-studio-theme .customer-preview{grid-area:preview;position:relative;top:auto;padding:18px;background:#0d0f11} .dark-studio-theme .customer-summary{grid-area:summary;position:sticky;top:14px;align-self:start} .dark-studio-theme .customer-picker{grid-area:picker;position:static;max-height:none;overflow:visible;padding:0;border:0;background:transparent} .dark-studio-theme .customer-picker>.panel-heading{padding:0 4px 10px;border-bottom:1px solid #292c30} .dark-studio-theme .customer-picker>.panel-note{margin:10px 4px 14px} .dark-studio-theme .preview-stage-row{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:14px;align-items:center} .dark-studio-theme .customer-stage-wrap{min-height:560px;aspect-ratio:1 / 1.08} .dark-studio-theme .preview-action-rail{display:grid;gap:10px;align-content:center} .dark-studio-theme .preview-action{min-height:70px;border:1px solid #3a3e43;border-radius:18px;background:#17191c;color:#aaaeb4;padding:10px 6px;font:10px 'DM Sans',sans-serif;cursor:pointer;transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease} .dark-studio-theme .preview-action:hover,.dark-studio-theme .preview-action:focus-visible,.dark-studio-theme .preview-action.is-active{border-color:var(--accent);background:#211e1a;color:var(--accent);outline:0;transform:translateY(-2px)} .dark-studio-theme .studio-progress{max-width:none;margin:0 0 16px;padding:0 6px;justify-content:flex-start;overflow-x:auto;border-bottom:1px solid #292c30;scrollbar-width:none} .dark-studio-theme .studio-progress::-webkit-scrollbar{display:none} .dark-studio-theme .studio-progress>i{display:none} .dark-studio-theme .studio-progress-step{min-width:max-content;padding:0 14px 12px;border:0;color:#777c83;display:block} .dark-studio-theme .studio-progress-step:before{display:none} .dark-studio-theme .studio-progress-step span{display:none} .dark-studio-theme .studio-progress-step strong{font:500 14px 'DM Sans',sans-serif} .dark-studio-theme .studio-progress-step.is-locked{color:#4f5359;cursor:not-allowed} .dark-studio-theme .studio-progress-step.is-active{color:var(--accent)} .dark-studio-theme .studio-progress-step.is-active:after{content:'';display:block;height:3px;margin:9px -2px -15px;border-radius:99px;background:var(--accent)} .dark-studio-theme .studio-progress-step>b{margin-left:5px;color:#d2a064;font:700 11px 'DM Sans',sans-serif}.dark-studio-theme .studio-progress-personalize{margin-left:auto}.dark-studio-theme .studio-progress-personalize.is-locked{color:#4f5359;cursor:not-allowed} .dark-studio-theme .component-pickers{padding:22px 24px;border:1px solid #2f3237;border-radius:24px;background:#17191c} .dark-studio-theme .picker-component{padding:0;border:0} .dark-studio-theme .picker-component-heading{align-items:center;margin-bottom:14px} .dark-studio-theme .picker-component-heading strong{font-size:22px;letter-spacing:.01em} .dark-studio-theme .picker-component-heading span{font-size:10px} .dark-studio-theme .group-choices{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px} .dark-studio-theme .group-choice-item{padding:10px;border:1px solid #2f3237;border-radius:16px;background:#1b1d20} .dark-studio-theme .group-choice{display:grid;grid-template-columns:74px minmax(0,1fr);min-height:88px;padding:8px;border:0;background:transparent} .dark-studio-theme .group-choice:hover,.dark-studio-theme .group-choice.is-selected{background:#211e1a;box-shadow:none} .dark-studio-theme .group-choice-images{width:74px;flex-basis:74px} .dark-studio-theme .group-choice-image{width:74px;height:74px;flex-basis:74px} .dark-studio-theme .picker-component[data-picker-component="case-body"] .group-choice-images,.dark-studio-theme .picker-component[data-picker-component="case-body"] .group-choice-image{width:74px;flex-basis:74px;height:74px} .dark-studio-theme .group-choice-copy{display:grid;align-content:center;justify-content:initial;gap:6px;padding:0 8px} .dark-studio-theme .group-choice-copy strong{font-size:12px} .dark-studio-theme .group-choice-copy small{text-align:left;font-size:9px} .dark-studio-theme .asset-color-choices,.dark-studio-theme .asset-compact-choices{margin:6px 2px 2px} .dark-studio-theme .custom-finish-panel{margin-top:14px} .dark-studio-theme .picker-next-button{border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:#17120d;padding:5px 8px;font:600 9px 'DM Mono',monospace;cursor:pointer;white-space:nowrap} .dark-studio-theme .picker-next-button:hover{background:#e0b77f;border-color:#e0b77f} .dark-studio-theme .customer-stage.is-lume{filter:brightness(1.05) saturate(1.28) contrast(1.08)!important} @media(max-width:1100px){.dark-studio-theme .customer-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview" "picker" "summary"}.dark-studio-theme .customer-summary{grid-column:auto;position:static}.dark-studio-theme .customer-summary .summary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}} @media(max-width:720px){.dark-studio-theme .customer-layout{display:grid}.dark-studio-theme .customer-preview{padding:12px}.dark-studio-theme .preview-stage-row{grid-template-columns:minmax(0,1fr) 68px;gap:8px}.dark-studio-theme .customer-stage-wrap{min-height:360px;aspect-ratio:1 / 1.18}.dark-studio-theme .preview-action{min-height:62px;border-radius:15px;padding:8px 4px;font-size:9px}.dark-studio-theme .component-pickers{padding:18px 14px;border-radius:20px}.dark-studio-theme .picker-component-heading strong{font-size:18px}.dark-studio-theme .group-choices{grid-template-columns:1fr}.dark-studio-theme .customer-summary .summary-list{display:block}.dark-studio-theme .design-entry-heading{display:block}.dark-studio-theme .design-entry-heading>.preview-badge{display:inline-flex;margin-top:8px}} /* Interaction correction: keep selection and preview in the same working view. */ .dark-studio-theme .customer-layout{grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(250px,290px);grid-template-areas:"picker preview summary";align-items:start;gap:14px} .dark-studio-theme .customer-picker{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;padding:18px;border:1px solid var(--line);border-radius:12px;background:#121416;scroll-behavior:smooth} .dark-studio-theme .customer-picker>.panel-heading{padding:0 0 10px} .dark-studio-theme .customer-picker>.panel-note{margin-left:0;margin-right:0} .dark-studio-theme .component-pickers{padding:0;border:0;border-radius:0;background:transparent} .dark-studio-theme .preview-stage-row{grid-template-columns:minmax(0,1fr) 78px;gap:12px} .dark-studio-theme .customer-preview{position:sticky;top:14px;z-index:2} .dark-studio-theme .customer-stage-wrap{height:min(68vh,720px);min-height:480px;aspect-ratio:auto} @media(min-width:721px) and (max-width:1100px){.dark-studio-theme .customer-layout{grid-template-columns:minmax(240px,300px) minmax(0,1fr);grid-template-areas:"picker preview" "summary summary"}.dark-studio-theme .customer-summary{position:static;grid-area:2 / 1 / 3 / 3}.dark-studio-theme .customer-stage-wrap{height:min(62vh,600px);min-height:420px}} @media(max-width:720px){.dark-studio-theme .customer-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview" "picker" "summary";display:grid}.dark-studio-theme .customer-preview{position:sticky;top:0;z-index:20;margin:0 -2px;padding:10px;border-color:#35383d;box-shadow:0 12px 28px #0009}.dark-studio-theme .customer-picker{position:static;max-height:none;overflow:visible;padding:14px;margin-top:12px}.dark-studio-theme .preview-stage-row{grid-template-columns:minmax(0,1fr) 58px;width:100%;max-width:100%;min-width:0}.dark-studio-theme .preview-stage-row>*{min-width:0}.dark-studio-theme .customer-stage-wrap{width:100%;min-width:0;height:34vh;min-height:240px;max-height:320px;aspect-ratio:auto}.dark-studio-theme .preview-toolbar{margin:8px 0;border-bottom:0;padding-bottom:0}.dark-studio-theme .toolbar-help{display:none}.dark-studio-theme .preview-action-rail{width:58px;min-width:0;gap:7px}.dark-studio-theme .preview-action{width:100%;min-height:54px;white-space:normal;overflow-wrap:anywhere;line-height:1.35}} /* Accordion picker: keep every component reachable without automatic navigation. */ .dark-studio-theme .studio-progress{display:flex;position:sticky;top:0;z-index:5;align-items:stretch;gap:0;margin:0 0 12px;padding:8px 4px 10px;max-width:none;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;border-bottom:1px solid #292c30;background:#121416;scrollbar-width:none;white-space:nowrap} .dark-studio-theme .component-pickers{display:grid;gap:8px;padding:0;border:0;border-radius:0;background:transparent} .dark-studio-theme .picker-component{padding:0;border:1px solid #2d3035;border-radius:14px;background:#17191c;overflow:hidden} .dark-studio-theme .picker-component.is-locked{opacity:.56} .dark-studio-theme .picker-component-heading{display:flex;align-items:stretch;justify-content:space-between;gap:8px;margin:0;padding:0} .dark-studio-theme .picker-component-toggle{display:grid;align-content:center;justify-items:start;gap:4px;flex:1;min-width:0;border:0;background:transparent;color:#f1ede5;padding:13px 12px;text-align:left;cursor:pointer} .dark-studio-theme .picker-component-toggle:hover,.dark-studio-theme .picker-component-toggle:focus-visible{background:#211e1a;outline:0} .dark-studio-theme .picker-component-toggle:disabled{cursor:not-allowed} .dark-studio-theme .picker-component-toggle strong{font-size:13px;line-height:1.25} .dark-studio-theme .picker-component-toggle small{max-width:100%;overflow:hidden;color:#858990;font:9px 'DM Mono',monospace;text-overflow:ellipsis;white-space:nowrap} .dark-studio-theme .picker-component.is-expanded .picker-component-toggle strong{color:var(--accent)} .dark-studio-theme .picker-heading-actions{align-items:center;padding:0 12px 0 0} .dark-studio-theme .picker-heading-actions>span{font:9px 'DM Mono',monospace;color:#696e75;white-space:nowrap} .dark-studio-theme .picker-component.is-expanded .picker-heading-actions{padding-right:10px} .dark-studio-theme .picker-component.is-expanded>.picker-component-heading{border-bottom:1px solid #2b2e32} .dark-studio-theme .picker-component.is-expanded>.picker-filter-note,.dark-studio-theme .picker-component.is-expanded>.custom-dial-inline-note{margin:12px 14px 7px} .dark-studio-theme .picker-component.is-expanded>.group-choices{padding:12px 14px 14px} .dark-studio-theme .picker-component.is-expanded>.picker-filter-note+.group-choices,.dark-studio-theme .picker-component.is-expanded>.custom-dial-inline-note+.group-choices{padding-top:3px} .dark-studio-theme .picker-collapsed-summary{margin:0;padding:0 14px 13px;color:#777c83;font:9px 'DM Mono',monospace;line-height:1.5} .dark-studio-theme .picker-component.is-expanded .picker-collapsed-summary{display:none} .dark-studio-theme .skip-component{font-size:9px} @media(max-width:720px){.dark-studio-theme .component-pickers{gap:7px}.dark-studio-theme .picker-component-toggle{padding:12px 10px}.dark-studio-theme .picker-heading-actions{padding-right:9px}.dark-studio-theme .picker-heading-actions>span{display:none}.dark-studio-theme .picker-component.is-expanded>.group-choices{padding:10px}.dark-studio-theme .picker-component.is-expanded>.picker-filter-note,.dark-studio-theme .picker-component.is-expanded>.custom-dial-inline-note{margin-left:10px;margin-right:10px}} /* Editing workbench: keep the live canvas and component picker visible together. */ .dark-studio-theme .customer-layout{grid-template-columns:minmax(0,1fr) minmax(340px,420px);grid-template-areas:"preview picker" "summary picker";align-items:start;gap:16px} .dark-studio-theme .customer-preview{position:sticky;top:14px;grid-area:preview;align-self:start} .dark-studio-theme .customer-picker{position:sticky;top:14px;grid-area:picker;max-height:calc(100vh - 28px);overflow-y:auto;padding:18px;border:1px solid var(--line);border-radius:18px;background:#121416;scroll-behavior:smooth;scrollbar-color:#4a4e54 #121416;scrollbar-width:thin} .dark-studio-theme .customer-picker::-webkit-scrollbar{width:6px} .dark-studio-theme .customer-picker::-webkit-scrollbar-track{background:#121416} .dark-studio-theme .customer-picker::-webkit-scrollbar-thumb{border-radius:99px;background:#4a4e54} .dark-studio-theme .customer-summary{position:static;grid-area:summary;width:100%;padding:14px 18px;border-radius:16px;background:#141619} .dark-studio-theme .customer-stage-wrap{height:min(72vh,700px);min-height:500px;aspect-ratio:auto} .dark-studio-theme .summary-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} .dark-studio-theme .summary-toggle{border:1px solid #3a3e43;border-radius:8px;background:#1a1c1f;color:#d2a064;padding:7px 9px;font:9px 'DM Mono',monospace;cursor:pointer} .dark-studio-theme .summary-toggle:hover,.dark-studio-theme .summary-toggle:focus-visible{border-color:var(--accent);background:#211e1a;outline:0} .dark-studio-theme .summary-content{margin-top:12px;padding-top:4px;border-top:1px solid #2a2d31} .dark-studio-theme .summary-content[hidden]{display:none} .dark-studio-theme .customer-summary .summary-actions{margin-top:12px} @media(min-width:721px) and (max-width:1100px){.dark-studio-theme .customer-layout{grid-template-columns:minmax(0,1fr) minmax(300px,360px);grid-template-areas:"preview picker" "summary picker"}.dark-studio-theme .customer-stage-wrap{height:min(64vh,600px);min-height:420px}} @media(max-width:720px){.dark-studio-theme .customer-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview" "picker" "summary";display:grid}.dark-studio-theme .customer-preview{position:relative;top:auto}.dark-studio-theme .customer-picker{position:static;max-height:none;overflow:visible;padding:14px}.dark-studio-theme .customer-stage-wrap{height:min(58vw,420px);min-height:300px;max-height:420px}.dark-studio-theme .customer-summary{padding:12px}.dark-studio-theme .summary-heading-actions{gap:6px}.dark-studio-theme .summary-toggle{padding:6px 8px}} /* Case gate: choose the watch case before opening the accessory editor. */ .dark-studio-theme .preview-heading-badges{align-items:center} .dark-studio-theme .preview-case-button{border:1px solid #4a3c2b;border-radius:8px;background:#1a1c1f;color:#d2a064;padding:7px 9px;font:9px 'DM Mono',monospace;cursor:pointer;white-space:nowrap} .dark-studio-theme .preview-case-button:hover,.dark-studio-theme .preview-case-button:focus-visible{border-color:var(--accent);background:#211e1a;outline:0} .dark-studio-theme .preview-case-button[hidden]{display:none} .dark-studio-theme .case-selector-dialog{width:min(780px,100%);max-height:min(88vh,780px);overflow:auto;padding:24px} .dark-studio-theme .case-selector-dialog>p:not(.eyebrow){margin-bottom:16px} .dark-studio-theme .case-selector-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;max-height:48vh;overflow:auto;padding:2px;margin-bottom:18px} .dark-studio-theme .case-selector-item{min-width:0;border:1px solid #303338;border-radius:14px;background:#1b1d20;padding:8px;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease} .dark-studio-theme .case-selector-item.is-selected{border-color:var(--accent);background:#211e1a;box-shadow:0 0 0 1px #d2a06455} .dark-studio-theme .case-selector-group{width:100%;display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);padding:2px;text-align:left;cursor:pointer} .dark-studio-theme .case-selector-group:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px} .dark-studio-theme .case-selector-preview{display:grid;place-items:center;width:84px;height:84px;border-radius:9px;background:#0e1012;overflow:hidden} .dark-studio-theme .case-selector-image{display:block;width:84px;height:84px;object-fit:contain} .dark-studio-theme .case-selector-image-empty{display:grid;place-items:center;color:#6f747a;font:9px 'DM Mono',monospace} .dark-studio-theme .case-selector-copy{display:grid;align-content:center;gap:6px;min-width:0} .dark-studio-theme .case-selector-copy strong{font-size:12px;line-height:1.35} .dark-studio-theme .case-selector-copy small{color:#858990;font:9px 'DM Mono',monospace;line-height:1.4} .dark-studio-theme .case-selector-colors{display:flex;flex-wrap:wrap;gap:6px;margin:8px 2px 2px;padding-top:8px;border-top:1px solid #2b2e32} .dark-studio-theme .case-selector-colors .asset-color-choice{flex:1 1 calc(50% - 6px);justify-content:flex-start;min-width:0} .dark-studio-theme .case-selector-dialog .customer-confirm-actions{margin-top:2px} .dark-studio-theme .case-selector-presets-link{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:14px;color:#777c83;font:9px 'DM Mono',monospace} .dark-studio-theme .case-selector-presets-link[hidden]{display:none} .dark-studio-theme .case-selector-presets-link .text-button{padding:2px;color:var(--accent)} .dark-studio-theme .case-selector-dialog .primary-button:disabled{border-color:#3b3e42;background:#292c30;color:#777c83;cursor:not-allowed} @media(max-width:720px){ html:has(body.has-mobile-preview-sticky){scroll-padding-top:calc(40dvh + 12px)} .dark-studio-theme .case-selector-dialog{max-height:92vh;padding:18px} .dark-studio-theme .case-selector-list{grid-template-columns:1fr;max-height:54vh} .dark-studio-theme .case-selector-dialog .customer-confirm-actions{grid-template-columns:1fr} } /* The entry gate combines the selected case with the two design paths. */ .dark-studio-theme .case-selector-flow-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px;padding-top:14px;border-top:1px solid #2b2e32} .dark-studio-theme .case-selector-flow{display:grid;gap:5px;min-width:0;border:1px solid #34373b;border-radius:10px;background:#1a1c1f;color:#bfc1c4;padding:11px 12px;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease} .dark-studio-theme .case-selector-flow strong{font-size:11px} .dark-studio-theme .case-selector-flow small{color:#858990;font:9px 'DM Mono',monospace;line-height:1.35} .dark-studio-theme .case-selector-flow.is-selected{border-color:var(--accent);background:#211e1a;color:#f0d6ac;box-shadow:0 0 0 1px #d2a06455} .dark-studio-theme .case-selector-flow.is-selected small{color:#bda77f} .dark-studio-theme .case-selector-flow:disabled{border-color:#292c30;background:#151719;color:#5f646b;cursor:not-allowed;box-shadow:none} .dark-studio-theme .case-selector-flow:disabled small{color:#555a61} .dark-studio-theme .case-selector-preset-area{margin:0 0 16px;padding:12px;border:1px solid #2d3035;border-radius:12px;background:#141619} .dark-studio-theme .case-selector-preset-area[hidden]{display:none} .dark-studio-theme .case-selector-preset-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px} .dark-studio-theme .case-selector-preset-heading strong{font-size:11px;color:#eeeae2} .dark-studio-theme .case-selector-preset-heading small{color:#858990;font:8px 'DM Mono',monospace} .dark-studio-theme .case-selector-preset-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;max-height:34vh;overflow:auto} .dark-studio-theme .case-selector-preset-card{min-width:0;min-height:102px;border:1px solid #303338;border-radius:14px;background:#1b1d20;padding:8px} .dark-studio-theme .case-selector-preset-card.is-selected{border-color:var(--accent);background:#211e1a;box-shadow:0 0 0 1px #d2a06455} .dark-studio-theme .case-selector-preset{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:84px;border:0;background:transparent;color:var(--ink);padding:2px;text-align:left;cursor:pointer} .dark-studio-theme .case-selector-preset:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .dark-studio-theme .case-selector-preset-cover{display:grid;place-items:center;width:84px;height:84px;border-radius:9px;background:#0e1012;overflow:hidden;color:#777c83;font:9px 'DM Mono',monospace} .dark-studio-theme .case-selector-preset-cover img{display:block;width:84px;height:84px;object-fit:contain} .dark-studio-theme .case-selector-preset-copy{display:grid;gap:4px;min-width:0} .dark-studio-theme .case-selector-preset-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px} .dark-studio-theme .case-selector-preset-copy small{overflow:hidden;color:#858990;font:8px 'DM Mono',monospace;line-height:1.3;text-overflow:ellipsis;white-space:nowrap} .dark-studio-theme .case-selector-preset>b{color:var(--accent);font-size:13px} @media(max-width:720px){ .dark-studio-theme .case-selector-flow-choices{grid-template-columns:1fr} .dark-studio-theme .case-selector-preset-list{grid-template-columns:1fr;max-height:25vh} } /* Opening choice cards: custom design and preset design share one visual weight. */ .dark-studio-theme .customer-layout[hidden],.dark-studio-theme .design-entry-panel[hidden]{display:none!important} .dark-studio-theme .design-entry-actions{max-width:920px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .dark-studio-theme .design-entry-card{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;min-height:128px;padding:12px 14px;border-radius:14px} .dark-studio-theme .design-entry-card>span:nth-child(2){gap:6px} .dark-studio-theme .design-entry-card strong{font-size:14px} .dark-studio-theme .design-entry-card small{font-size:9px;line-height:1.45} .dark-studio-theme .design-entry-icon,.dark-studio-theme .design-entry-preset-preview{display:grid;place-items:center;width:84px;height:92px;border-radius:11px} .dark-studio-theme .design-entry-icon{font-size:27px} .dark-studio-theme .design-entry-preset-preview{overflow:hidden;background:#0e1012;color:#777c83;font:9px 'DM Mono',monospace} .dark-studio-theme .design-entry-preset-preview img{display:block;width:84px;height:92px;object-fit:contain} .dark-studio-theme .design-entry-card>b{font-size:18px} @media(max-width:720px){ .dark-studio-theme .design-entry-actions{grid-template-columns:1fr} .dark-studio-theme .design-entry-card{min-height:112px} } /* Configuration details stay out of the workbench until the details action is clicked. */ .dark-studio-theme .customer-summary{display:none} .dark-studio-theme .customer-summary.is-details-modal{position:fixed;left:50%;top:50%;z-index:120;width:min(560px,calc(100% - 32px));height:auto;min-height:0;max-height:min(78dvh,720px);display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transform:translate(-50%,-50%);border:1px solid #4a3c2b;border-radius:18px;background:#151719;box-shadow:0 24px 80px #000c} /* A sibling backdrop cannot enlarge the transformed dialog's scrollable area. */ .dark-studio-theme .customer-summary-backdrop{position:fixed;inset:0;z-index:119;background:#0009;backdrop-filter:blur(3px)} .dark-studio-theme .customer-summary-backdrop[hidden]{display:none} .dark-studio-theme .customer-summary.is-details-modal .summary-content{max-height:none} .dark-studio-theme .customer-summary.is-details-modal>.panel-heading{position:sticky;top:0;z-index:20;min-height:44px;background:#151719;padding:4px 0 10px} .dark-studio-theme .modal-persistent-header{position:sticky;top:0;z-index:20;background:#151719;flex-shrink:0;padding-right:0} .dark-studio-theme .modal-close-header{display:flex;justify-content:flex-end;min-height:36px;margin-bottom:6px} .dark-studio-theme .modal-corner-close{position:static!important;display:grid;place-items:center;flex:0 0 36px;width:36px;min-width:36px;height:36px;margin:0 0 0 auto;padding:0;border:1px solid #484c52;border-radius:50%;background:#1a1d20;color:#e2b375;font:24px/1 sans-serif;cursor:pointer} .dark-studio-theme .modal-corner-close:hover,.dark-studio-theme .modal-corner-close:focus-visible{border-color:#e2b375;outline:2px solid #e2b37566;outline-offset:2px} .dark-studio-theme .modal-corner-close[hidden]{display:none!important} .dark-studio-theme .modal-close-confirm{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:20px;border:1px solid #6b5234;border-radius:16px;background:#151719;color:#f1ede5;overflow:auto;box-shadow:0 24px 80px #000b} .dark-studio-theme .modal-close-confirm::backdrop{background:#0009;backdrop-filter:blur(3px)} .dark-studio-theme .modal-close-confirm header{display:flex;align-items:center;gap:12px} .dark-studio-theme .modal-close-confirm h2{margin:0;font-size:19px} .dark-studio-theme .modal-close-confirm p{font-size:13px;line-height:1.7;color:#c7cbd0} .dark-studio-theme .modal-close-confirm footer{display:flex;justify-content:flex-end;gap:10px;margin:16px 0 0;padding:0} .dark-studio-theme .modal-close-confirm footer button{min-height:40px;padding:8px 14px;border:1px solid #535860;border-radius:8px;background:#25292f;color:#eee;cursor:pointer} .dark-studio-theme .modal-close-confirm [data-confirm-editor-close]{background:#d2a064;color:#17120d;border-color:#d2a064} /* High-contrast selection state shared by every component and asset choice. */ .dark-studio-theme .group-choice{position:relative} .dark-studio-theme .group-choice.is-selected{border:2px solid var(--accent)!important;background:#3a2a1b!important;box-shadow:0 0 0 3px #d2a06466,inset 0 0 0 1px #f3d29b!important} .dark-studio-theme .group-choice.is-selected:after{content:'✓ 已选';position:absolute;top:8px;right:8px;border:1px solid #e7bd78;border-radius:999px;background:#d2a064;color:#17120d;padding:4px 7px;font:700 9px/1 'DM Sans',sans-serif;box-shadow:0 3px 8px #0006} .dark-studio-theme .group-choice.is-selected .group-choice-copy strong{color:#fff3dc} .dark-studio-theme .group-choice.is-selected .group-choice-copy small{color:#e4cda8} .dark-studio-theme .group-choice.is-selected .group-choice-image{outline:2px solid #d2a064;outline-offset:2px} .dark-studio-theme .asset-color-choice.is-selected,.dark-studio-theme .asset-compact-choice.is-selected,.dark-studio-theme .composition-choice-options .asset-compact-choice.is-selected{border:2px solid var(--accent)!important;background:#3a2a1b!important;color:#fff3dc;box-shadow:0 0 0 2px #d2a06466!important} .dark-studio-theme .asset-color-choice.is-selected .asset-color-swatch,.dark-studio-theme .asset-compact-choice.is-selected .asset-color-swatch{outline:2px solid #f3d29b;outline-offset:2px} .dark-studio-theme .case-color-switcher{margin:0 0 12px;padding:12px;border:1px solid #725533;border-radius:14px;background:#241d16;box-shadow:0 0 0 2px #d2a06433} .dark-studio-theme .case-color-switcher-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px} .dark-studio-theme .case-color-switcher-heading strong{color:#f3d29b;font-size:13px} .dark-studio-theme .case-color-switcher-heading small{color:#c0a47b;font:9px 'DM Mono',monospace} .dark-studio-theme .case-color-switcher-options{display:flex;flex-wrap:wrap;gap:7px} .dark-studio-theme .case-color-switcher-options .asset-color-choice{flex:1 1 calc(50% - 7px);background:#191b1e} .dark-studio-theme .strap-metal-color-switcher{margin:0 0 12px;padding:12px;border:1px solid #725533;border-radius:14px;background:#241d16;box-shadow:0 0 0 2px #d2a06433} .dark-studio-theme .strap-metal-color-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px} .dark-studio-theme .strap-metal-color-heading strong{color:#f3d29b;font-size:13px} .dark-studio-theme .strap-metal-color-heading small{color:#c0a47b;font:9px 'DM Mono',monospace} .dark-studio-theme .strap-metal-color-options{display:flex;flex-wrap:wrap;gap:7px} .dark-studio-theme .strap-metal-color-options .asset-compact-choice{flex:1 1 calc(50% - 7px);background:#191b1e} .dark-studio-theme .strap-metal-color-switcher,.dark-studio-theme .case-color-switcher{margin:7px 0 0;padding:8px;border:1px solid #3c382f;border-radius:8px;background:#1b1a18;box-shadow:none} .dark-studio-theme .strap-metal-color-switcher .composition-choice-options,.dark-studio-theme .case-color-switcher .composition-choice-options{display:flex;flex-wrap:wrap;gap:5px} .dark-studio-theme .strap-metal-color-switcher .asset-compact-choice,.dark-studio-theme .case-color-switcher .asset-color-choice{flex:1 1 calc(50% - 5px);min-height:32px;border-radius:8px;background:#1a1c1f} .custom-finish-card[hidden]{display:none!important}.custom-finish-art{margin:0 0 9px;border:1px solid #d8e3d5;border-radius:9px;background:#f7fbf5;overflow:hidden;min-height:88px}.custom-finish-art svg{display:block;width:100%;height:auto;max-height:145px}.custom-finish-art [class^="custom-finish"]{font-family:'DM Sans',sans-serif}.custom-finish-preview{min-height:150px}.dark-studio-theme .custom-finish-art{border-color:#3a3e43;background:#101214}.dark-studio-theme .custom-finish-card[hidden]{display:none!important}.dark-studio-theme .custom-finish-preview-card{background:#191b1e}.dark-studio-theme .custom-finish-preview{border-color:#3a3e43;background:#101214} .dark-studio-theme .custom-finish-choice{border-color:#34373b;background:#1a1c1f;color:#eeeae2}.dark-studio-theme .custom-finish-choice:hover,.dark-studio-theme .custom-finish-choice.is-selected{border-color:var(--accent);background:#3a2a1b;color:#fff3dc;box-shadow:0 0 0 2px #d2a06466,inset 0 0 0 1px #f3d29b}.dark-studio-theme .custom-finish-choice strong{color:#f7f1e7}.dark-studio-theme .custom-finish-choice small{color:#c0a47b}.dark-studio-theme .custom-finish-choice.is-selected strong{color:#fff3dc}.dark-studio-theme .custom-finish-choice.is-selected small{color:#efd2a7} .custom-finish-guide-list{display:grid;gap:9px}.custom-finish-guide{display:flex;align-items:center;gap:14px;width:100%;min-height:92px;padding:13px 16px;border:1px solid var(--line);border-radius:22px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.custom-finish-guide:hover,.custom-finish-guide:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #b56c4626}.custom-finish-guide-icon{display:grid;place-items:center;flex:0 0 68px;width:68px;height:68px;border:1px solid #44464a;border-radius:18px;background:#2a2b2d}.custom-finish-guide-icon svg{width:51px;height:51px;fill:none;stroke:#d2a064;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.custom-finish-guide>span:last-child{display:grid;gap:5px;min-width:0}.custom-finish-guide strong{font-size:19px;line-height:1.1}.custom-finish-guide small{font:14px/1.45 'DM Sans',sans-serif;color:var(--muted)}.dark-studio-theme .custom-finish-guide{border-color:#3b3e43;background:#191b1e;color:#f5f1e9}.dark-studio-theme .custom-finish-guide:hover,.dark-studio-theme .custom-finish-guide:focus-visible{border-color:var(--accent);background:#211e1a;box-shadow:0 0 0 2px #d2a06455}.dark-studio-theme .custom-finish-guide-icon{border-color:#414348;background:#292b2e}.dark-studio-theme .custom-finish-guide-icon svg{stroke:#d2a064}.dark-studio-theme .custom-finish-guide strong{color:#f7f1e7}.dark-studio-theme .custom-finish-guide small{color:#9b9da2}@media(max-width:720px){.custom-finish-guide{min-height:88px;padding:12px 13px}.custom-finish-guide-icon{flex-basis:62px;width:62px;height:62px}.custom-finish-guide small{font-size:12px}} /* Engraving cards: keep the reference guidance and the actual controls in one compact flow. */ .custom-finish-guide-inline{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;margin:-2px 0 10px;padding:0 0 9px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer} .custom-finish-guide-inline .custom-finish-guide-icon{width:42px;height:42px;flex-basis:42px;border-radius:12px} .custom-finish-guide-inline .custom-finish-guide-icon svg{width:31px;height:31px} .custom-finish-guide-inline>span:nth-child(2){display:grid;gap:3px;min-width:0} .custom-finish-guide-inline strong{font-size:15px;line-height:1.15} .custom-finish-guide-inline small{font:9px/1.35 'DM Sans',sans-serif;color:var(--muted)} .custom-finish-guide-inline em{font:8px 'DM Mono',monospace;color:var(--accent);font-style:normal;white-space:nowrap} .custom-finish-guide-inline:hover,.custom-finish-guide-inline:focus-visible{outline:0;color:var(--accent)} .dark-studio-theme .custom-finish-guide-inline{border-color:#34373b;color:#f7f1e7} .dark-studio-theme .custom-finish-guide-inline .custom-finish-guide-icon{border-color:#414348;background:#292b2e} .dark-studio-theme .custom-finish-guide-inline small{color:#9b9da2} .dark-studio-theme .custom-finish-guide-inline:hover,.dark-studio-theme .custom-finish-guide-inline:focus-visible{color:#f3d29b;border-color:#725533} .dark-studio-theme .custom-finish-card{padding:12px} .dark-studio-theme .custom-finish-card .custom-finish-art{margin-top:2px} .dark-studio-theme .custom-finish-preview-card{display:none} .custom-finish-reference{margin:0 0 9px;border:1px solid #3a3e43;border-radius:9px;background:#101214;overflow:hidden} .custom-finish-reference[hidden]{display:none} .custom-finish-reference img{display:block;width:100%;height:clamp(280px,42vw,420px);object-fit:contain;object-position:center;background:#101214} .custom-finish-reference figcaption{padding:7px 9px;color:#9b9da2;font:9px/1.45 'DM Sans',sans-serif} .dark-studio-theme .custom-finish-reference{border-color:#3a3e43;background:#101214} .dark-studio-theme .custom-finish-reference figcaption{color:#b4a58e} .custom-finish-upload-preview{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;margin-top:8px;padding:8px;border:1px solid #3a3e43;border-radius:8px;background:#101214;color:#b4a58e;font:9px 'DM Mono',monospace} .custom-finish-upload-preview[hidden]{display:none} .custom-finish-upload-preview img{display:block;width:58px;height:48px;object-fit:contain;border-radius:5px;background:#fff} .dark-studio-theme .custom-finish-field input[type=text]{color:#111!important;background:#fff!important;caret-color:#111} .dark-studio-theme .custom-finish-field input[type=text]::placeholder{color:#777!important;opacity:1} @media(max-width:720px){.custom-finish-reference img{height:clamp(300px,78vw,420px)}.custom-finish-guide-inline{grid-template-columns:38px minmax(0,1fr) auto}.custom-finish-guide-inline .custom-finish-guide-icon{width:38px;height:38px;flex-basis:38px}.custom-finish-guide-inline .custom-finish-guide-icon svg{width:28px;height:28px}.custom-finish-guide-inline small{font-size:8px}} .custom-finish-warning{margin:8px 0 0;padding:8px 10px;border:1px solid #725533;border-radius:8px;background:#241d16;color:#e6c38f;font:9px/1.45 'DM Sans',sans-serif}.custom-finish-warning[hidden]{display:none} .current-case-color-card{display:grid;gap:10px;margin-top:12px;padding:14px;border:1px solid #725533;border-radius:14px;background:#241d16;box-shadow:0 0 0 2px #d2a06433}.current-case-color-card[hidden]{display:none}.current-case-color-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.current-case-color-heading>div{display:grid;gap:4px;min-width:0}.current-case-color-heading .eyebrow{margin:0;color:#d2a064}.current-case-color-heading strong{color:#f3d29b;font-size:17px}.current-case-color-heading small{color:#c0a47b;font:9px 'DM Mono',monospace}.current-case-color-hint{color:#c0a47b;font:9px 'DM Mono',monospace;text-align:right}.current-case-color-options{display:flex;flex-wrap:wrap;gap:7px}.current-case-color-options .asset-color-choice{flex:1 1 calc(50% - 7px);min-width:100px;background:#191b1e} .dark-studio-theme .picker-component.is-fixed-open>.picker-component-heading .picker-component-toggle{cursor:default}.dark-studio-theme .picker-component.is-fixed-open>.picker-component-heading .picker-component-toggle small{color:#d2a064} .dark-studio-theme .picker-show-options{border:1px solid #725533;border-radius:7px;background:#241d16;color:#d2a064;padding:5px 7px;font:9px 'DM Mono',monospace;cursor:pointer}.dark-studio-theme .picker-show-options:hover{border-color:#d2a064;background:#3a2a1b;color:#f3d29b} .dark-studio-theme .custom-dial-uploader.is-inline{margin:0 10px 10px;padding:14px;border-color:#725533;background:#241d16;box-shadow:0 0 0 2px #d2a06433}.dark-studio-theme .custom-dial-uploader.is-inline .custom-dial-uploader-heading strong{color:#f3d29b;font-size:16px}.dark-studio-theme .custom-dial-uploader.is-inline .custom-dial-toggle{border:1px solid #d2a064;border-radius:7px;background:#d2a064;color:#17120d;padding:6px 10px;font:600 9px 'DM Mono',monospace;cursor:pointer}.dark-studio-theme .custom-dial-uploader.is-inline .custom-dial-toggle:hover{background:#e0b77f} .dark-studio-theme .customer-picker{padding-bottom:120px} .custom-finish-empty-note{margin:0;padding:10px 12px;border:1px solid #8a6335;border-radius:9px;background:#2a2118;color:#f3d29b;font:10px/1.5 'DM Sans',sans-serif}.dark-studio-theme .custom-finish-empty-note{border-color:#a9793e;background:#2a2118;color:#f3d29b} .back-cover-picker-panel{display:grid;gap:12px;margin:0 0 12px;padding:14px;border:1px solid #725533;border-radius:14px;background:#241d16;box-shadow:0 0 0 2px #d2a06433}.back-cover-picker-panel[hidden]{display:none}.back-cover-picker-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.back-cover-picker-heading>div{display:grid;gap:4px}.back-cover-picker-heading strong{color:#f3d29b;font-size:18px}.back-cover-picker-heading small,.back-cover-picker-heading>span{color:#c0a47b;font:9px 'DM Mono',monospace}.back-cover-picker-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.back-cover-picker-choice{display:flex;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid #3b3e43;border-radius:9px;background:#191b1e;color:#eeeae2;text-align:left;cursor:pointer}.back-cover-picker-choice.is-selected{border-color:#d2a064;background:#3a2a1b;box-shadow:0 0 0 2px #d2a06466}.back-cover-picker-choice>span:last-child{display:grid;gap:3px}.back-cover-picker-choice strong{font-size:12px}.back-cover-picker-choice small{color:#c0a47b;font:8px/1.35 'DM Sans',sans-serif}.back-cover-picker-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.back-cover-picker-examples figure{margin:0;border:1px solid #3a3e43;border-radius:8px;background:#101214;overflow:hidden}.back-cover-picker-examples img{display:block;width:100%;height:180px;object-fit:contain;background:#101214}.back-cover-picker-examples figcaption{padding:6px 8px;color:#b4a58e;font:8px/1.4 'DM Sans',sans-serif}.back-cover-picker-note{margin:0;color:#d2a064;font:9px/1.45 'DM Sans',sans-serif} .dark-studio-theme .studio-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;overflow-x:hidden;overflow-y:visible;white-space:normal}.dark-studio-theme .studio-progress-personalize{margin-left:0} .dark-studio-theme .studio-progress-step>b{display:inline-grid;place-items:center;margin-left:5px;width:16px;height:16px;border-radius:50%;background:#6fa47c;color:#101712;font:700 10px 'DM Sans',sans-serif}.dark-studio-theme .studio-progress-step.is-complete{color:#82bb8d}.dark-studio-theme .studio-progress-step.is-complete:after{background:#6fa47c}.dark-studio-theme .studio-progress-personalize{margin-left:auto}.dark-studio-theme .studio-progress-personalize.is-locked{color:#4f5359;cursor:not-allowed}.dark-studio-theme .picker-component.is-collapsed{display:none} .dark-studio-theme .studio-progress-step{display:flex;align-items:center;justify-content:flex-start;gap:7px;width:100%;min-width:0;min-height:44px;margin:0;box-sizing:border-box;padding:8px 10px;border:1px solid #363a40;border-radius:10px;background:#17191c;color:#9da1a8;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease}.dark-studio-theme .studio-progress-step:before{display:none}.dark-studio-theme .studio-progress-step:after{display:none!important}.dark-studio-theme .studio-progress-step strong{flex:0 0 auto;font:500 12px 'DM Sans',sans-serif;white-space:nowrap}.dark-studio-theme .studio-progress-step .studio-progress-status{flex:0 0 auto;margin-left:auto}.dark-studio-theme .studio-progress-step.is-active{position:relative;z-index:2;transform:scale(1.035);border-color:#e3b36e;background:#38291b;color:#ffe0ad;box-shadow:0 0 0 2px #d2a06477,0 7px 18px #0008}.dark-studio-theme .studio-progress-step.is-active .studio-progress-icon{transform:scale(1.08)}.dark-studio-theme .studio-progress-step.is-active .studio-progress-status{border-color:#9b713e;background:#302317;color:#ffe0ad}.dark-studio-theme .studio-progress-step.is-complete{border-color:#6fa47c;background:#17231b;color:#82bb8d}.dark-studio-theme .studio-progress-step.is-complete>b{flex:0 0 16px;margin:0;text-align:center;background:#6fa47c}.dark-studio-theme .studio-progress-step.is-active.is-complete{border-color:#e3b36e;background:#38291b;color:#ffe0ad}.dark-studio-theme .studio-progress-step.is-locked{border-color:#292c30;background:#151719;color:#555b63}.dark-studio-theme .studio-progress-personalize{margin-left:0!important} .dark-studio-theme .studio-progress-status{display:inline-flex;align-items:center;min-height:18px;padding:2px 6px;border:1px solid #424850;border-radius:999px;background:#202328;color:#d6d9de;font:9px/1 'DM Sans',sans-serif;letter-spacing:0} .dark-studio-theme .studio-progress-icon{display:block;flex:0 0 18px;width:18px;height:18px;color:currentColor;opacity:.96} .dark-studio-theme .picker-component .group-choice-images{display:flex;align-items:center;justify-content:center;flex:0 0 72px;width:72px;height:72px;overflow:hidden} .dark-studio-theme .picker-component .group-choice-images .group-choice-image{display:block;flex:0 0 72px;width:72px;height:72px;max-width:72px;max-height:72px;object-fit:contain} .dark-studio-theme .picker-component .group-choice-images .group-choice-image-empty{flex:0 0 72px;width:72px;height:72px} .dark-studio-theme .customer-preset-code{display:block;color:#b6b9bf;font:11px/1.35 'DM Mono',monospace;overflow-wrap:anywhere} .dark-studio-theme #design-entry-panel .customer-preset-card-body small{color:#b5b8be} .dark-studio-theme .case-selector-dialog{display:flex;flex-direction:column;overflow:hidden;max-height:min(88dvh,780px);padding-bottom:0} .dark-studio-theme .case-selector-dialog>.eyebrow,.dark-studio-theme .case-selector-dialog>h2{flex:none} .dark-studio-theme .case-selector-scroll-area{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 4px 14px 0;scrollbar-color:#555a61 #17191c} .dark-studio-theme .case-selector-list,.dark-studio-theme .case-selector-preset-list{max-height:none;overflow:visible} .dark-studio-theme .case-selector-dialog>.customer-confirm-actions{flex:none;position:relative;grid-template-columns:minmax(0,1fr);margin:0 -24px;padding:12px 24px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #3a3e43;background:#17191c;box-shadow:0 -8px 20px #0005} .dark-studio-theme .preview-save-feedback{margin:10px 0 0;padding:9px 11px;border:1px solid #a9793e;border-radius:8px;background:#2a2118;color:#f3d29b;font:12px/1.5 'DM Sans',sans-serif} .dark-studio-theme .preview-save-feedback[hidden]{display:none} .dark-studio-theme .custom-finish-back-cover-status{margin:0 0 10px;padding:9px 11px;border:1px solid #4c4237;border-radius:8px;background:#24211d;color:#ead0a9;font:12px/1.45 'DM Sans',sans-serif} .dark-studio-theme .custom-finish-example{margin-top:12px;border-top:1px solid #383b40;padding-top:9px} .dark-studio-theme .custom-finish-example summary{width:max-content;max-width:100%;color:#e0b77f;font:12px/1.4 'DM Sans',sans-serif;cursor:pointer} .dark-studio-theme .custom-finish-example .custom-finish-reference{margin:9px 0 0} .dark-studio-theme .custom-finish-example .custom-finish-reference img{height:clamp(160px,22vw,230px)} .dark-studio-theme .custom-finish-field,.dark-studio-theme .custom-finish-upload-status,.dark-studio-theme .custom-finish-reference figcaption,.dark-studio-theme .back-cover-picker-choice small,.dark-studio-theme .case-selector-copy small{font-size:11px;line-height:1.45} .dark-studio-theme .custom-finish-guide-inline small,.dark-studio-theme .back-cover-picker-heading small,.dark-studio-theme .back-cover-picker-heading>span{font-size:11px} @media(max-width:720px){ .dark-studio-theme .case-selector-dialog{width:100%;max-height:92dvh;padding:16px 16px 0} .dark-studio-theme .case-selector-dialog>.customer-confirm-actions{grid-template-columns:minmax(0,1fr);margin:0 -16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))} .dark-studio-theme .case-selector-dialog .customer-confirm-actions button{min-height:44px;font-size:12px} .dark-studio-theme .case-selector-list{grid-template-columns:1fr} .dark-studio-theme .customer-preview{padding:10px} .dark-studio-theme .preview-stage-row{grid-template-columns:minmax(0,1fr);gap:7px} .dark-studio-theme .customer-stage-wrap{width:100%;height:clamp(170px,23dvh,210px);min-height:0;max-height:none;padding:8px} .dark-studio-theme .preview-action-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:6px} .dark-studio-theme .preview-action{min-height:40px;font-size:11px;padding:6px 3px;border-radius:9px} .dark-studio-theme .preview-heading h2{font-size:21px} .dark-studio-theme .preview-toolbar{gap:7px} .dark-studio-theme .preview-note{font-size:11px} .dark-studio-theme .custom-finish-example .custom-finish-reference img{height:clamp(160px,55vw,230px)} } .dark-studio-theme .studio-progress-step.is-optional-unselected:not(.is-active){border-color:#424850;background:#1b1e22;color:#e2e4e7} .dark-studio-theme .studio-progress-step.is-optional-unselected:not(.is-active) .studio-progress-status{border-color:#4b535d;background:#24282d;color:#e2e4e7} .dark-studio-theme .studio-progress-step.is-optional-unselected.is-active{border-color:#d2a064;background:#2a2118;color:#f3d29b;box-shadow:0 0 0 2px #d2a06433} .dark-studio-theme .studio-progress-step.is-required-pending:not(.is-active){border-color:#70552f;background:#241e16;color:#f0cc90} .dark-studio-theme .studio-progress-step.is-required-pending:not(.is-active) .studio-progress-status{border-color:#856237;background:#332719;color:#f3d29b} .dark-studio-theme .studio-progress-step.is-complete .studio-progress-status{border-color:#47694f;background:#213126;color:#a4d3aa} .dark-studio-theme .studio-progress-step.is-locked .studio-progress-status{border-color:#34383d;background:#1a1c1f;color:#747982} .dark-studio-theme .studio-progress-bubble{min-width:0} @media(max-width:420px){.dark-studio-theme .studio-progress{gap:6px}.dark-studio-theme .studio-progress-step{gap:5px;padding:7px 8px}.dark-studio-theme .studio-progress-step strong{font-size:11px}.dark-studio-theme .studio-progress-icon{flex-basis:16px;width:16px;height:16px}.dark-studio-theme .studio-progress-status{padding:2px 4px;font-size:8px}.dark-studio-theme .studio-progress-step.is-active{transform:scale(1.02)}.dark-studio-theme .studio-progress-step.is-complete>b{flex-basis:14px;width:14px;height:14px;font-size:9px}} .dark-studio-theme button:focus-visible,.dark-studio-theme input:focus-visible,.dark-studio-theme select:focus-visible{outline:2px solid #e0b77f!important;outline-offset:2px} @media(prefers-reduced-motion:reduce){.dark-studio-theme *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.dark-studio-theme .customer-preset-gallery-list{scroll-behavior:auto!important}} .dark-studio-theme .panel-note,.dark-studio-theme .picker-filter-note,.dark-studio-theme .design-entry-note,.dark-studio-theme .design-entry-card small,.dark-studio-theme .preview-note,.dark-studio-theme .action-feedback,.dark-studio-theme .custom-finish-note,.dark-studio-theme .custom-finish-field,.dark-studio-theme .custom-finish-upload-status,.dark-studio-theme .custom-finish-guide-inline small{color:#a8adb4} .dark-studio-theme .dial-artwork-field small,.dark-studio-theme .dial-artwork-empty,.dark-studio-theme .dial-artwork-note,.dark-studio-theme .picker-collapsed-summary,.dark-studio-theme .case-selector-copy small,.dark-studio-theme .case-selector-flow small,.dark-studio-theme .design-entry-card small,.dark-studio-theme .custom-finish-warning,.dark-studio-theme .back-cover-picker-note{font-size:11px!important} .dark-studio-theme .customer-preset-gallery-heading strong small{margin-left:5px;color:#a8adb4;font:10px 'DM Mono',monospace;font-weight:400} .dark-studio-theme .customer-preset-gallery-controls[hidden]{display:none} .dark-studio-theme .customer-confirm-dialog{position:relative} .dark-studio-theme .customer-confirm-close{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;border:1px solid #3a3e43;border-radius:50%;background:#191b1e;color:#d2a064;font-size:22px;line-height:1} .dark-studio-theme .customer-confirm-close:hover,.dark-studio-theme .customer-confirm-close:focus-visible{border-color:var(--accent);background:#211e1a;color:#f3d29b} .dark-studio-theme .case-selector-step-hint{margin:0 0 14px;padding:8px 10px;border-left:3px solid var(--accent);background:#211e1a;color:#d2a064;font:11px/1.45 'DM Sans',sans-serif} .dark-studio-theme .custom-finish-reference img{height:clamp(180px,26vw,260px)} @media(max-width:720px){.dark-studio-theme .custom-finish-reference img{height:clamp(200px,58vw,300px)}} /* Selected homepage concept: two equal-weight, above-the-fold start paths. */ .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-shell{max-width:1600px;padding:34px clamp(24px,4.6vw,70px) 34px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{margin-bottom:0;padding-bottom:36px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header h1{font-size:clamp(36px,4.3vw,64px);line-height:1.08;letter-spacing:0} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header .lede{margin-top:14px;font-size:15px;line-height:1.5;color:#a8adb4} .dark-studio-theme #design-entry-panel.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"heading heading" "preset custom";align-items:stretch;gap:18px 20px;margin:34px 0 22px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} .dark-studio-theme #design-entry-panel .design-entry-heading{grid-area:heading;display:block;margin:0 0 2px} .dark-studio-theme #design-entry-panel .design-entry-heading .eyebrow,.dark-studio-theme #design-entry-panel .design-entry-heading>.preview-badge,.dark-studio-theme #design-entry-panel .design-entry-note{display:none} .dark-studio-theme #design-entry-panel .design-entry-heading h2{margin:0;color:#f5f1e9;font:600 clamp(34px,3.5vw,48px)/1.12 'Playfair Display',serif;letter-spacing:.01em} .dark-studio-theme #design-entry-panel .customer-preset-gallery{grid-area:preset;display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0;background:transparent} .dark-studio-theme #design-entry-panel .customer-preset-gallery.has-single-preset .customer-preset-gallery-heading{display:none} .dark-studio-theme #design-entry-panel .customer-preset-gallery-heading{margin:0 0 10px;min-height:24px} .dark-studio-theme #design-entry-panel .customer-preset-gallery-heading .eyebrow{margin-bottom:3px;color:#858990} .dark-studio-theme #design-entry-panel .customer-preset-gallery-heading strong{font-size:13px;color:#eeeae2} .dark-studio-theme #design-entry-panel .customer-preset-list{display:flex;flex:1;align-items:stretch;min-width:0;min-height:0;gap:14px;overflow-x:auto;overflow-y:hidden;padding:0;scroll-snap-type:x mandatory} .dark-studio-theme #design-entry-panel .customer-preset-card{display:flex;flex-direction:column;flex:0 0 calc((100% - 14px)/2);min-width:0;height:100%;border:1px solid #2f3237;border-radius:14px;background:#191b1e;overflow:hidden;scroll-snap-align:start} .dark-studio-theme #design-entry-panel .customer-preset-card:only-child{flex-basis:100%} .dark-studio-theme #design-entry-panel .customer-preset-card img,.dark-studio-theme #design-entry-panel .customer-preset-card-fallback{display:block;width:100%;height:clamp(260px,50vh,512px);flex:0 0 auto;object-fit:contain;background:#0e1012} .dark-studio-theme #design-entry-panel .customer-preset-card-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start;gap:8px;min-height:168px;margin-top:auto;padding:16px 20px} .dark-studio-theme #design-entry-panel .customer-preset-card-body strong{grid-column:1;grid-row:1;min-width:0;font-size:22px;line-height:1.25;color:#f1ede5;white-space:normal;overflow-wrap:anywhere} .dark-studio-theme #design-entry-panel .customer-preset-card-body small{grid-column:1;grid-row:2;min-height:0;color:#92949a;font-size:12px;line-height:1.4} .dark-studio-theme #design-entry-panel .customer-preset-gallery.has-single-preset .customer-preset-card-body small{display:none} .dark-studio-theme #design-entry-panel .customer-preset-card-body button{grid-column:1;grid-row:3;align-self:stretch;width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#17120d;font:600 16px 'DM Sans',sans-serif;cursor:pointer} .dark-studio-theme #design-entry-panel .customer-preset-card-body button:hover{background:#e0b77f;border-color:#e0b77f} .dark-studio-theme #design-entry-panel .design-entry-actions{grid-area:custom;display:grid;grid-template-columns:minmax(0,1fr);align-self:stretch;width:100%;max-width:none;min-width:0;gap:0} .dark-studio-theme #design-entry-panel .custom-design-entry{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(260px,50vh,512px) auto auto;align-content:stretch;align-items:stretch;gap:0;min-width:0;min-height:100%;padding:0;border:1px solid #2f3237;border-radius:14px;background:#191b1e;color:#eeeae2;text-align:left;overflow:hidden;cursor:pointer} .dark-studio-theme #design-entry-panel .custom-design-entry:hover,.dark-studio-theme #design-entry-panel .custom-design-entry:focus-visible{border-color:var(--accent);background:#1d1d1d;box-shadow:0 0 0 2px #d2a06455;outline-offset:3px} .dark-studio-theme #design-entry-panel .custom-design-visual{display:block;width:100%;height:100%;min-height:0;overflow:hidden;background:#0e1012} .dark-studio-theme #design-entry-panel .custom-design-visual img{display:block;width:100%;height:100%;object-fit:contain} .dark-studio-theme #design-entry-panel .custom-design-copy{display:grid;align-content:center;gap:6px;min-width:0;padding:16px 20px 8px;text-align:left} .dark-studio-theme #design-entry-panel .custom-design-copy strong{font-size:22px;line-height:1.2;color:#f1ede5} .dark-studio-theme #design-entry-panel .custom-design-copy small{font:14px/1.45 'DM Sans',sans-serif;color:#a8adb4;font-size:14px!important} .dark-studio-theme #design-entry-panel .custom-design-cta{display:grid;place-items:center;min-height:58px;margin:12px 20px 18px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#17120d;font:600 16px 'DM Sans',sans-serif;text-align:center} .dark-studio-theme #design-entry-panel .custom-design-entry:hover .custom-design-cta,.dark-studio-theme #design-entry-panel .custom-design-entry:focus-visible .custom-design-cta{background:#e0b77f;border-color:#e0b77f} @media(max-width:900px){ .dark-studio-theme #design-entry-panel.panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "preset" "custom";gap:16px} .dark-studio-theme #design-entry-panel .customer-preset-card img,.dark-studio-theme #design-entry-panel .customer-preset-card-fallback,.dark-studio-theme #design-entry-panel .custom-design-entry{height:auto} .dark-studio-theme #design-entry-panel .customer-preset-card img,.dark-studio-theme #design-entry-panel .customer-preset-card-fallback,.dark-studio-theme #design-entry-panel .custom-design-visual{height:clamp(250px,42vh,380px)} .dark-studio-theme #design-entry-panel .custom-design-entry{grid-template-rows:clamp(250px,42vh,380px) auto auto} } @media(max-height:900px) and (min-width:901px){ .dark-studio-theme #design-entry-panel .customer-preset-card img,.dark-studio-theme #design-entry-panel .customer-preset-card-fallback{height:clamp(230px,35vh,350px)} .dark-studio-theme #design-entry-panel .customer-preset-card-body{min-height:118px} .dark-studio-theme #design-entry-panel .custom-design-entry{grid-template-rows:clamp(230px,35vh,350px) auto auto} } @media(max-width:600px){ .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-shell{padding:22px 14px 28px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{align-items:flex-start} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header h1{font-size:clamp(32px,9vw,42px)} .dark-studio-theme #design-entry-panel.panel{margin-top:20px;gap:14px} .dark-studio-theme #design-entry-panel .design-entry-heading h2{font-size:34px} .dark-studio-theme #design-entry-panel .customer-preset-card-body{grid-template-columns:minmax(0,1fr);gap:8px;padding:15px} .dark-studio-theme #design-entry-panel .customer-preset-card img,.dark-studio-theme #design-entry-panel .customer-preset-card-fallback{height:190px} .dark-studio-theme #design-entry-panel .customer-preset-card-body{min-height:0;padding:12px 14px} .dark-studio-theme #design-entry-panel .customer-preset-card-body button{grid-column:1;grid-row:auto;min-height:52px} .dark-studio-theme #design-entry-panel .customer-preset-card-body strong,.dark-studio-theme #design-entry-panel .customer-preset-card-body small{grid-column:1;grid-row:auto} .dark-studio-theme #design-entry-panel .custom-design-entry{grid-template-rows:120px auto auto} .dark-studio-theme #design-entry-panel .custom-design-visual{height:120px} .dark-studio-theme #design-entry-panel .custom-design-copy{gap:3px;padding:10px 14px 4px} .dark-studio-theme #design-entry-panel .custom-design-copy strong{font-size:18px} .dark-studio-theme #design-entry-panel .custom-design-copy small{font-size:13px!important} .dark-studio-theme #design-entry-panel .custom-design-cta{margin:8px 14px 12px;min-height:48px;font-size:14px} } @media(max-width:600px){.dark-studio-theme .preset-image-lightbox{padding:8px}.dark-studio-theme .preset-image-lightbox-dialog{width:100%;height:96dvh;padding:10px;border-radius:12px}.dark-studio-theme .preset-image-lightbox-stage img{max-height:calc(96dvh - 100px)}.dark-studio-theme .preset-image-lightbox-gallery-counter{margin-right:46px}.dark-studio-theme .preset-image-lightbox-gallery-nav{width:42px;height:56px;font-size:28px}.dark-studio-theme .preset-image-lightbox-gallery-nav.is-previous{left:7px}.dark-studio-theme .preset-image-lightbox-gallery-nav.is-next{right:7px}} /* Final responsive overrides for the home cards. Keep technical IDs secondary. */ .dark-studio-theme #design-entry-panel .customer-preset-card-body{grid-template-rows:none;align-content:end} .dark-studio-theme #design-entry-panel .customer-preset-card-body strong,.dark-studio-theme #design-entry-panel .customer-preset-card-body small,.dark-studio-theme #design-entry-panel .customer-preset-card-body button{grid-column:1;grid-row:auto} .dark-studio-theme .picker-filter-note,.dark-studio-theme .group-choice small,.dark-studio-theme .case-selector-flow small{color:#b5b8be;font-size:11px} .dark-studio-theme .studio-progress-status{font-size:10px} @media(max-width:600px){ .dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading" "custom" "preset";gap:12px;margin-top:14px} .dark-studio-theme #design-entry-panel .custom-design-entry{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;min-height:148px} .dark-studio-theme #design-entry-panel .custom-design-visual{grid-column:1;grid-row:1 / 3;width:96px;height:100%;min-height:148px} .dark-studio-theme #design-entry-panel .custom-design-copy{grid-column:2;grid-row:1;padding:18px 14px 0} .dark-studio-theme #design-entry-panel .custom-design-cta{grid-column:2;grid-row:2;min-height:40px;margin:8px 14px 14px} .dark-studio-theme #design-entry-panel .customer-preset-card{flex-basis:84%} .dark-studio-theme #design-entry-panel .customer-preset-card-body strong{font-size:18px} .dark-studio-theme #design-entry-panel .customer-preset-card-body small{font-size:12px} .dark-studio-theme #design-entry-panel .customer-preset-gallery-heading .eyebrow{font-size:11px} } @media(max-width:720px){ .dark-studio-theme:has(#customer-layout:not([hidden])) .customer-header{padding-bottom:10px} .dark-studio-theme:has(#customer-layout:not([hidden])) .customer-header .eyebrow{margin-bottom:5px} .dark-studio-theme:has(#customer-layout:not([hidden])) .customer-header h1{font-size:27px} .dark-studio-theme:has(#customer-layout:not([hidden])) .customer-header .lede{display:none} .dark-studio-theme:has(#customer-layout:not([hidden])) .customer-header .customer-status{margin-top:5px} .dark-studio-theme .customer-stage-wrap{height:clamp(165px,22dvh,195px)} } /* Homepage: custom design first, with the same card footprint as every preset. */ .dark-studio-theme #design-entry-panel.panel{--home-card-image-height:clamp(230px,35vh,350px);--home-card-height:calc(var(--home-card-image-height) + 176px);grid-template-columns:minmax(0,calc((100% - 28px) / 3)) minmax(0,1fr);grid-template-areas:"heading heading" "custom preset";column-gap:14px;align-items:stretch} .dark-studio-theme #design-entry-panel:has(.customer-preset-gallery.has-single-preset){grid-template-columns:repeat(2,minmax(0,1fr))} .dark-studio-theme #design-entry-panel .design-entry-actions,.dark-studio-theme #design-entry-panel .customer-preset-gallery{height:var(--home-card-height);min-height:0} .dark-studio-theme #design-entry-panel .customer-preset-gallery{position:relative} .dark-studio-theme #design-entry-panel .customer-preset-gallery-heading{position:absolute;inset:0;z-index:3;height:100%;min-height:0;margin:0;pointer-events:none} .dark-studio-theme #design-entry-panel .customer-preset-gallery-heading>div:first-child{display:none} .dark-studio-theme #design-entry-panel .customer-preset-gallery-controls{top:calc(var(--home-card-image-height) / 2)} .dark-studio-theme #design-entry-panel .customer-preset-list{height:100%;min-height:0;flex:1;align-items:stretch;padding:0;scrollbar-width:none} .dark-studio-theme #design-entry-panel .customer-preset-list::-webkit-scrollbar{display:none} .dark-studio-theme #design-entry-panel .customer-preset-card{height:100%;min-height:0;flex:0 0 calc((100% - 14px) / 2)} .dark-studio-theme #design-entry-panel .customer-preset-card:only-child{flex-basis:100%} .dark-studio-theme #design-entry-panel .customer-preset-card img,.dark-studio-theme #design-entry-panel .customer-preset-card-fallback{height:var(--home-card-image-height)} .dark-studio-theme #design-entry-panel .customer-preset-card-body{display:flex;flex:1;flex-direction:column;align-items:stretch;gap:7px;min-height:0;margin:0;padding:12px 16px} .dark-studio-theme #design-entry-panel .customer-preset-card-body strong{font-size:22px;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} .dark-studio-theme #design-entry-panel .customer-preset-card-body small{display:block!important;font-size:12px;line-height:1.4} .dark-studio-theme #design-entry-panel .customer-preset-card-body button{flex:none;margin-top:auto;min-height:50px} .dark-studio-theme #design-entry-panel .custom-design-entry{height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--home-card-image-height) minmax(0,1fr) auto} .dark-studio-theme #design-entry-panel .custom-design-visual{grid-column:1;grid-row:1;width:100%;height:var(--home-card-image-height);min-height:0} .dark-studio-theme #design-entry-panel .custom-design-copy{grid-column:1;grid-row:2;align-content:start;padding:12px 16px 0} .dark-studio-theme #design-entry-panel .custom-design-copy strong{font-size:22px} .dark-studio-theme #design-entry-panel .custom-design-cta{grid-column:1;grid-row:3;min-height:50px;margin:8px 16px 12px} @media(max-width:900px){ .dark-studio-theme #design-entry-panel.panel,.dark-studio-theme #design-entry-panel:has(.customer-preset-gallery.has-single-preset){--home-card-image-height:clamp(230px,35vh,350px);grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "custom" "preset"} .dark-studio-theme #design-entry-panel .customer-preset-card{flex-basis:100%} } @media(max-width:600px){ .dark-studio-theme #design-entry-panel.panel,.dark-studio-theme #design-entry-panel:has(.customer-preset-gallery.has-single-preset){--home-card-image-height:190px;--home-card-height:calc(var(--home-card-image-height) + 176px)} .dark-studio-theme #design-entry-panel .custom-design-entry{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--home-card-image-height) minmax(0,1fr) auto} .dark-studio-theme #design-entry-panel .custom-design-visual{grid-column:1;grid-row:1;width:100%;height:var(--home-card-image-height);min-height:0} .dark-studio-theme #design-entry-panel .custom-design-copy{grid-column:1;grid-row:2;padding:12px 14px 0} .dark-studio-theme #design-entry-panel .custom-design-copy strong,.dark-studio-theme #design-entry-panel .customer-preset-card-body strong{font-size:20px} .dark-studio-theme #design-entry-panel .custom-design-cta{grid-column:1;grid-row:3;margin:8px 14px 12px;min-height:50px} } /* Remove decorative microcopy while preserving choices, warnings, and upload feedback. */ .dark-studio-theme .eyebrow, .dark-studio-theme .picker-heading-actions>span, .dark-studio-theme .picker-filter-note, .dark-studio-theme .picker-collapsed-summary, .dark-studio-theme .group-choice-copy small, .dark-studio-theme .case-selector-copy small, .dark-studio-theme .current-case-color-hint, .dark-studio-theme .current-case-color-heading small, .dark-studio-theme .custom-finish-note, .dark-studio-theme .custom-finish-guide-inline small, .dark-studio-theme .custom-finish-section-title small, .dark-studio-theme .back-cover-picker-heading>span, .dark-studio-theme .case-selector-preset-heading small, .dark-studio-theme .summary-heading-actions>.preview-badge{display:none!important} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{padding-bottom:20px} .dark-studio-theme #design-entry-panel.panel{margin-top:24px} @media(min-width:721px){.dark-studio-theme .customer-header{justify-content:flex-start;align-items:center;gap:16px}} @media(max-width:720px){ .dark-studio-theme .customer-preview .preview-note:not([hidden]){display:block} } .dark-studio-theme .case-selector-item{position:relative} .dark-studio-theme .case-selector-zoom{position:absolute;z-index:2;top:8px;left:8px;display:grid;place-items:center;width:84px;height:84px;padding:0;border:0;border-radius:9px;background:transparent;color:#fff;cursor:zoom-in} .dark-studio-theme .case-selector-zoom>span{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:27px;height:27px;border:1px solid #d2a064;border-radius:50%;background:#11151bdc;color:#f3d29b;box-shadow:0 2px 8px #0009} .dark-studio-theme .case-selector-zoom svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dark-studio-theme .case-selector-zoom:hover>span,.dark-studio-theme .case-selector-zoom:focus-visible>span{background:#3a2a1b;transform:scale(1.08)} .dark-studio-theme .case-detail-viewer{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;min-width:0;min-height:0;padding:clamp(12px,4vw,40px)} .dark-studio-theme .case-detail-viewer[hidden]{display:none!important} .dark-studio-theme .case-detail-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:#08090bef;backdrop-filter:blur(5px)} .dark-studio-theme .case-detail-dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;width:min(1120px,100%);height:min(88dvh,900px);min-width:0;min-height:0;padding:22px;border:1px solid #4a3c2b;border-radius:17px;background:#151719;box-shadow:0 20px 60px #000b} .dark-studio-theme .case-detail-header{position:relative;display:flex;align-items:center;min-height:36px;padding-right:48px} .dark-studio-theme .case-detail-header h3{margin:0;color:#f3eee6;font:600 22px/1.25 'DM Sans',sans-serif} .dark-studio-theme .case-detail-header .customer-confirm-close{top:0;right:0} .dark-studio-theme .case-detail-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(175px,220px);gap:14px;min-width:0;min-height:0} .dark-studio-theme .case-detail-stage{display:grid;place-items:center;min-width:0;min-height:300px;overflow:hidden;border:1px solid #30343a;border-radius:12px;background:#090b0e} .dark-studio-theme .case-detail-stage img{display:block;width:100%;height:100%;max-width:100%;max-height:min(66dvh,640px);object-fit:contain} .dark-studio-theme .case-detail-colors{display:grid;align-content:start;gap:8px;min-width:0;max-height:100%;overflow:auto;padding:2px} .dark-studio-theme .case-detail-color{display:flex;align-items:center;gap:10px;min-height:46px;width:100%;padding:8px 10px;border:1px solid #353a40;border-radius:10px;background:#1a1d21;color:#eeeae2;text-align:left;cursor:pointer} .dark-studio-theme .case-detail-color.is-selected{border-color:#d2a064;background:#38291b;color:#fff0d6;box-shadow:0 0 0 2px #d2a06455} .dark-studio-theme .case-detail-color .asset-color-swatch{flex:0 0 22px;width:22px;height:22px} .dark-studio-theme .case-detail-color>b{margin-left:auto;color:#e0b77f} .dark-studio-theme .case-detail-single-color{margin:4px 0;color:#c4b18f;font:13px/1.5 'DM Sans',sans-serif} .dark-studio-theme .case-detail-actions{display:flex;justify-content:flex-end;padding-top:10px;border-top:1px solid #30343a} .dark-studio-theme .case-detail-actions .primary-button{width:min(360px,100%);min-height:50px;font:600 14px 'DM Sans',sans-serif} @media(max-width:720px){ .dark-studio-theme .case-detail-viewer{padding:12px} .dark-studio-theme .case-detail-dialog{height:calc(100dvh - 24px);gap:10px;padding:13px} .dark-studio-theme .case-detail-header h3{font-size:18px} .dark-studio-theme .case-detail-content{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px} .dark-studio-theme .case-detail-stage{min-height:0;height:min(48dvh,390px)} .dark-studio-theme .case-detail-stage img{max-height:100%} .dark-studio-theme .case-detail-colors{grid-template-columns:repeat(2,minmax(0,1fr));max-height:30dvh;gap:6px} .dark-studio-theme .case-detail-color{min-height:42px;padding:6px 8px;font-size:12px} .dark-studio-theme .case-detail-actions{padding-top:8px} .dark-studio-theme .case-detail-actions .primary-button{width:100%;min-height:46px} } /* Homepage guide: explain the actual customer flow and saved-file behavior. */ .dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading heading" "custom preset" "guide guide"} .dark-studio-theme #design-entry-panel .customer-howto{grid-area:guide;display:grid;gap:14px;min-width:0;margin-top:8px;padding-top:22px;border-top:1px solid #2f3237} .dark-studio-theme .customer-howto-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .dark-studio-theme .customer-howto-heading h3{margin:0;color:#f1ede5;font:600 21px/1.2 'Playfair Display',serif} .dark-studio-theme .customer-howto-heading>span{color:#a8adb4;font-size:12px} .dark-studio-theme .customer-howto-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none} .dark-studio-theme .customer-howto-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);align-content:start;gap:12px;min-width:0;min-height:116px;padding:16px;border:1px solid #2f3237;border-radius:12px;background:#17191c} .dark-studio-theme .customer-howto-number{display:grid;place-items:center;width:34px;height:34px;border:1px solid #70552f;border-radius:10px;background:#282117;color:#e0b77f;font:500 11px 'DM Mono',monospace} .dark-studio-theme .customer-howto-steps strong{display:block;margin:2px 0 6px;color:#eeeae2;font-size:14px} .dark-studio-theme .customer-howto-steps p{margin:0;color:#a8adb4;font-size:12px;line-height:1.65} @media(max-width:900px){ .dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading" "custom" "preset" "guide"} .dark-studio-theme .customer-howto-steps{grid-template-columns:minmax(0,1fr)} .dark-studio-theme .customer-howto-steps li{min-height:0} } @media(max-width:600px){ .dark-studio-theme #design-entry-panel .customer-howto{gap:11px;margin-top:3px;padding-top:17px} .dark-studio-theme .customer-howto-heading{align-items:flex-start;flex-direction:column;gap:5px} .dark-studio-theme .customer-howto-heading h3{font-size:20px} .dark-studio-theme .customer-howto-steps{gap:8px} .dark-studio-theme .customer-howto-steps li{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:12px} .dark-studio-theme .customer-howto-number{width:30px;height:30px} .dark-studio-theme .customer-howto-steps p{font-size:12px} } .dark-studio-theme.has-save-design-dialog{overflow:hidden} .dark-studio-theme .save-design-dialog{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px} .dark-studio-theme .save-design-quick-panel{padding:12px;border:1px solid #665033;border-radius:10px;background:#26211a;margin:12px 0} .dark-studio-theme .save-design-quick-panel h3{margin:0 0 8px;color:#e5c99f;font-size:13px} .dark-studio-theme .save-design-quick-facts{display:grid;gap:6px;margin:0;font-size:12px;line-height:1.55} .dark-studio-theme .save-design-quick-facts>div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px} .dark-studio-theme .save-design-quick-facts dt{color:#c5b79f} .dark-studio-theme .save-design-quick-facts dd{margin:0;color:#f0ede7;overflow-wrap:anywhere} .strap-clasp-color-notice{padding:10px 12px;margin:12px 0;border:1px solid #665033;border-radius:9px;background:#28231c;color:#e3c597;font-size:12px;line-height:1.6} .strap-clasp-color-notice p{margin:0} .strap-clasp-color-notice button{margin-top:8px;min-height:44px} .dark-studio-theme .save-design-summary-panel{margin:10px 0 16px;padding:12px;border:1px solid #34383e;border-radius:10px;background:#121416} .dark-studio-theme .save-design-summary-panel h3{margin:0 0 4px;color:#e5c99f;font-size:13px} .dark-studio-theme .save-design-summary-panel summary{display:list-item;min-height:24px;line-height:24px;color:#e5c99f;font-size:13px;cursor:pointer} .dark-studio-theme .save-design-summary{max-height:min(32dvh,280px);margin-top:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-color:#4a4e54 #121416;scrollbar-width:thin} .dark-studio-theme .save-design-summary .summary-row{border-color:#30343a;padding:9px 0} .dark-studio-theme .save-design-summary .summary-row:first-child{padding-top:5px} .dark-studio-theme .save-design-summary .summary-row:last-child{padding-bottom:5px} .dark-studio-theme .save-design-summary .summary-empty{padding:10px 0;color:#a8adb4;font-size:12px} .dark-studio-theme .save-design-dialog label{display:block;margin:0 0 7px;color:#d9c8ad;font-size:12px;font-weight:600} .dark-studio-theme .save-design-dialog input{display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid #45494f;border-radius:8px;background:#101214;color:#f1ede5;font:14px 'DM Sans',sans-serif} .dark-studio-theme .save-design-dialog input:focus{border-color:#d2a064;outline:2px solid #d2a06455;outline-offset:1px} .dark-studio-theme .save-design-dialog input::placeholder{color:#737980} .dark-studio-theme .save-design-dialog p.save-design-error{margin:7px 0 0;color:#f0bf8a;font-size:12px} .dark-studio-theme .save-design-dialog p.save-design-error[hidden]{display:none} .dark-studio-theme .save-design-dialog .customer-confirm-actions{margin-top:16px} @media(max-width:600px){ .dark-studio-theme .save-design-dialog{max-height:calc(100dvh - 20px);padding:18px} .dark-studio-theme .save-design-summary-panel{padding:10px} .dark-studio-theme .save-design-summary{max-height:30dvh} } .dark-studio-theme .customer-howto-steps li{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;padding:0;overflow:hidden;align-content:start} .dark-studio-theme .customer-howto-illustration{display:block;width:100%;margin:0;overflow:hidden;background:#101214} .dark-studio-theme .customer-howto-illustration svg{display:block;width:100%;height:auto;aspect-ratio:520/250} .dark-studio-theme .customer-howto-copy{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:11px;padding:15px 16px 17px} .dark-studio-theme .customer-howto-copy .customer-howto-number{margin-top:1px} @media(max-width:600px){ .dark-studio-theme .customer-howto-copy{grid-template-columns:30px minmax(0,1fr);gap:10px;padding:12px 13px 14px} } /* Make high-freedom customization visible before customers start, and again in the editor. */ .dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading heading" "features features" "custom preset" "guide guide"} .dark-studio-theme #design-entry-panel .home-capability-rail{grid-area:features;display:grid;gap:10px;min-width:0;padding:13px 15px;border:1px solid #3b3428;border-radius:13px;background:linear-gradient(110deg,#1e1b17 0%,#151719 74%)} .dark-studio-theme .home-capability-heading{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .dark-studio-theme .home-capability-label{display:inline-flex;align-items:center;margin:0;padding:4px 7px;border:1px solid #70552f;border-radius:999px;background:#282117;color:#e0b77f;font:600 10px/1 'DM Mono',monospace;letter-spacing:.04em} .dark-studio-theme .home-capability-heading>strong{color:#f0e8da;font-size:16px;font-weight:600} .dark-studio-theme .home-capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .dark-studio-theme .home-capability-item{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:10px;min-width:0;min-height:78px;padding:7px;border:1px solid #34373b;border-radius:10px;background:#17191c} .dark-studio-theme .home-capability-item img{display:block;width:82px;height:64px;border-radius:6px;background:#0e1012;object-fit:cover;object-position:center} .dark-studio-theme .home-capability-item:first-child img{object-fit:contain} .dark-studio-theme .home-capability-item>div{display:grid;gap:4px;min-width:0} .dark-studio-theme .home-capability-item strong{color:#eeeae2;font-size:13px;line-height:1.25} .dark-studio-theme .home-capability-item small{color:#b5b8be;font-size:11px;line-height:1.4} .dark-studio-theme #design-entry-panel.panel{row-gap:14px} .dark-studio-theme #design-entry-panel .home-capability-rail{margin-bottom:2px} @media(max-width:900px){ .dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading" "features" "custom" "preset" "guide"} .dark-studio-theme .home-capability-item{grid-template-columns:72px minmax(0,1fr)} .dark-studio-theme .home-capability-item img{width:72px;height:58px} } @media(max-width:600px){ .dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading" "features" "custom" "preset" "guide";row-gap:12px} .dark-studio-theme #design-entry-panel .home-capability-rail{gap:8px;padding:10px} .dark-studio-theme .home-capability-heading{gap:4px 8px} .dark-studio-theme .home-capability-heading>strong{font-size:13px} .dark-studio-theme .home-capability-grid{gap:6px} .dark-studio-theme .home-capability-item{grid-template-columns:minmax(0,1fr);align-content:start;gap:5px;padding:5px} .dark-studio-theme .home-capability-item img{width:100%;height:54px} .dark-studio-theme .home-capability-item>div{gap:2px;padding:0 2px 3px} .dark-studio-theme .home-capability-item strong{font-size:11px} .dark-studio-theme .home-capability-item small{font-size:10px;line-height:1.3} } /* One unified, image-led capability showcase on both entry and editor screens. */ .dark-studio-theme .home-capability-rail{gap:15px;padding:18px 20px;border-color:#5a472e;background:linear-gradient(110deg,#211d18 0%,#151719 76%);box-shadow:0 0 0 2px #d2a06422} .dark-studio-theme .home-capability-heading{gap:12px} .dark-studio-theme .home-capability-heading>strong{font-size:19px} .dark-studio-theme .home-capability-grid{gap:12px} .dark-studio-theme .home-capability-item{grid-template-columns:minmax(0,1fr);align-content:start;gap:0;min-height:0;padding:0;overflow:hidden;border-color:#414047;border-radius:12px;background:#17191c} .dark-studio-theme .home-capability-item img{width:100%;height:clamp(125px,13vw,180px);padding:8px;border-radius:0;background:#0c0e10;object-fit:contain} .dark-studio-theme .home-capability-item>div{gap:5px;padding:12px 14px 14px} .dark-studio-theme .home-capability-item strong{font-size:16px;line-height:1.3} .dark-studio-theme .home-capability-item small{font-size:12px;line-height:1.45} .dark-studio-theme #design-entry-panel .home-capability-rail{margin-bottom:0} @media(max-width:900px){ .dark-studio-theme .home-capability-item img{height:clamp(140px,25vw,210px)} } @media(max-width:600px){ .dark-studio-theme .home-capability-rail{gap:11px;padding:12px} .dark-studio-theme .home-capability-heading{align-items:flex-start;flex-direction:column;gap:7px} .dark-studio-theme .home-capability-heading>strong{font-size:16px} .dark-studio-theme .home-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .dark-studio-theme .home-capability-item img{height:clamp(112px,32vw,145px)} .dark-studio-theme .home-capability-item>div{padding:10px} .dark-studio-theme .home-capability-item strong{font-size:13px} .dark-studio-theme .home-capability-item small{font-size:10px} .dark-studio-theme .home-capability-item:last-child{grid-column:1 / -1;grid-template-columns:132px minmax(0,1fr);align-items:center} .dark-studio-theme .home-capability-item:last-child img{height:104px} } /* Crown engravings join the same zoomable, enlarged showcase. */ .dark-studio-theme .home-capability-heading{position:relative} .dark-studio-theme .home-capability-zoom-note{margin-left:auto;color:#c7a66f;font-size:12px} .dark-studio-theme .home-capability-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .dark-studio-theme .home-capability-item{position:relative} .dark-studio-theme .home-capability-image-trigger{position:relative;display:block;width:100%;height:clamp(125px,13vw,180px);padding:0;border:0;border-radius:0;background:#0c0e10;overflow:hidden;cursor:zoom-in} .dark-studio-theme .home-capability-image-trigger img{display:block;width:100%;height:100%;padding:8px;object-fit:contain;background:#0c0e10} .dark-studio-theme .capability-image-zoom-hint{position:absolute;right:8px;bottom:8px;padding:5px 8px;border:1px solid #ffffff33;border-radius:999px;background:#101214df;color:#eeeae2;font:10px/1.1 'DM Sans',sans-serif;pointer-events:none} @media(max-width:900px){ .dark-studio-theme .home-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){ .dark-studio-theme .home-capability-zoom-note{font-size:10px} .dark-studio-theme .home-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .dark-studio-theme .home-capability-item:last-child{grid-column:auto;grid-template-columns:minmax(0,1fr);align-items:stretch} .dark-studio-theme .home-capability-image-trigger{height:clamp(112px,32vw,145px)} .dark-studio-theme .home-capability-item:last-child .home-capability-image-trigger{height:clamp(112px,32vw,145px)} .dark-studio-theme .home-capability-image-trigger img{height:100%;padding:6px} .dark-studio-theme .home-capability-zoom-note{width:100%;margin-left:0} } /* Keep homepage actions close to their design names instead of filling the card height. */ .dark-studio-theme #design-entry-panel .design-entry-actions, .dark-studio-theme #design-entry-panel .customer-preset-gallery{height:auto;min-height:0;align-self:start} .dark-studio-theme #design-entry-panel .customer-preset-list{height:auto;min-height:0;align-items:flex-start} .dark-studio-theme #design-entry-panel .customer-preset-card{height:auto;min-height:0} .dark-studio-theme #design-entry-panel .customer-preset-card-body{flex:none;min-height:0;justify-content:flex-start} .dark-studio-theme #design-entry-panel .customer-preset-card-body button{margin-top:0} .dark-studio-theme #design-entry-panel .custom-design-entry{height:auto;min-height:0;grid-template-rows:var(--home-card-image-height) auto auto;align-content:start} .dark-studio-theme #design-entry-panel .custom-design-copy{align-content:start} .dark-studio-theme #design-entry-panel .custom-design-copy small, .dark-studio-theme #design-entry-panel .customer-preset-card-body small{display:block;min-height:2.8em;font-size:12px!important;line-height:1.4;color:#a8adb4;overflow-wrap:anywhere} /* File recovery lives in a collapsible editor section, not on the homepage. */ .dark-studio-theme .editor-design-files{margin:0 0 12px;border:1px solid #383d43;border-radius:10px;background:#141619} .dark-studio-theme .editor-design-files>summary{min-height:44px;padding:12px;color:#d9c4a2;font-size:12px;cursor:pointer} .dark-studio-theme .editor-design-files>summary:focus-visible{outline:2px solid #f0c27e;outline-offset:2px} .dark-studio-theme .editor-design-files .customer-design-tools{border:0;border-top:1px solid #383d43;border-radius:0 0 10px 10px} .dark-studio-theme .customer-design-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border:1px solid #383d43;border-radius:10px;background:#141619} .dark-studio-theme .customer-design-tools>span{margin-right:auto;color:#c6cbd2;font-size:12px} .dark-studio-theme .customer-design-tools>small{flex-basis:100%;color:#b9bdc4;font-size:12px;line-height:1.45} .dark-studio-theme .customer-design-tools .secondary-button{width:auto;min-height:42px;margin:0;padding:9px 12px;font-size:12px} .dark-studio-theme .customer-design-tools [hidden]{display:none!important} .dark-studio-theme .customer-design-tools button:focus-visible{outline:2px solid #f0c27e;outline-offset:3px} /* Put the design choices first; move the DIY capability showcase below them. */ .dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading heading" "custom preset" "showcase showcase" "features features" "guide guide"} @media(max-width:900px){ .dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading" "custom" "preset" "showcase" "features" "guide"} } /* Merge back-cover, crown and clasp discovery into one personalization entry. */ .dark-studio-theme .home-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .dark-studio-theme .home-dial-capability>div.home-dial-preview-tools{display:flex;align-items:center;gap:5px;padding:9px 10px;background:#101315;border-bottom:1px solid #34373b} .dark-studio-theme .home-dial-preview-tools>span{margin-right:auto;color:#d9c3a2;font-size:11px} .dark-studio-theme .home-dial-preview-tools button{min-height:32px;padding:5px 8px;border:1px solid #44464b;border-radius:6px;background:#1a1e22;color:#c4c7cd;font-size:11px;cursor:pointer} .dark-studio-theme .home-dial-preview-tools button[aria-pressed="true"]{border-color:#ba925b;background:#34281b;color:#f0d3a8} .dark-studio-theme .home-dial-capability .home-dial-example-preview{height:clamp(185px,20vw,260px)} .dark-studio-theme .home-dial-capability .home-dial-example-preview img{padding:12px} .dark-studio-theme .home-dial-capability .home-dial-example-preview img[hidden]{display:none!important} .dark-studio-theme .case-selector-flow-choices[hidden]{display:none!important} .dark-studio-theme .home-dial-capability>div.home-dial-capability-content{display:grid;gap:10px;padding:12px 14px} .dark-studio-theme .home-dial-capability-content>strong{font-size:16px} .dark-studio-theme #home-dial-example-description{min-height:34px;font-size:12px;line-height:1.45;color:#bcc0c7} .dark-studio-theme .home-dial-example-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .dark-studio-theme .home-dial-example-choices button{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:40px;padding:7px 9px;border:1px solid #3a3f46;border-radius:7px;background:#11161b;color:#e7e5de;text-align:left;cursor:pointer} .dark-studio-theme .home-dial-example-choices button>span{font-size:12px;font-weight:600;white-space:nowrap} .dark-studio-theme .home-dial-example-choices button>small{font-size:10px;color:#9ba3ad} .dark-studio-theme .home-dial-example-choices button[aria-pressed="true"]{border-color:#cf9e5f;background:#30251b;box-shadow:inset 0 0 0 1px #cf9e5f55} .dark-studio-theme .home-dial-example-choices button[aria-pressed="true"]>small{color:#d3b991} .dark-studio-theme .home-dial-capability .home-dial-create-button{min-height:42px;padding:9px 12px;border:1px solid #cf9e5f;border-radius:7px;background:#cf9e5f;color:#1b150f;font-size:13px;font-weight:700;cursor:pointer} .dark-studio-theme .home-dial-capability .home-dial-example-note{font-size:10px;line-height:1.4;color:#9ca3ae} .dark-studio-theme .home-dial-capability button:focus-visible{outline:2px solid #f0c786;outline-offset:-3px} .dark-studio-theme .home-dial-capability button:disabled{opacity:.55;cursor:wait} @media(max-width:720px){ .dark-studio-theme .home-dial-capability .home-dial-example-preview{height:230px} .dark-studio-theme .home-dial-capability>div.home-dial-capability-content{padding:11px;gap:9px} .dark-studio-theme .home-dial-example-choices button{min-height:44px} .dark-studio-theme .home-dial-example-choices button>small{font-size:9px} .dark-studio-theme .home-dial-preview-tools button{min-height:36px} } @media(max-width:600px){ .dark-studio-theme .home-capability-grid{grid-template-columns:minmax(0,1fr)} } /* Four reference finishes, kept separate from the customer's design settings. */ .dark-studio-theme .engraving-example-tools{display:grid;gap:6px;min-width:0;margin-top:9px} .dark-studio-theme .engraving-color-choices{display:flex;flex-wrap:wrap;gap:5px;min-width:0} .dark-studio-theme .engraving-color-choices button{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-height:36px;margin:0;padding:5px 9px;border:1px solid #454a51;border-radius:8px;background:#191c20;color:#e4e6e9;font:12px/1.2 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap} .dark-studio-theme .engraving-color-choices button>span{flex:0 0 13px;width:13px;height:13px;border:1px solid #ffffff55;border-radius:50%;background:var(--engraving-swatch)} .dark-studio-theme .engraving-color-choices button[aria-pressed=true]{border-color:#e0b577;background:#392b1d;color:#ffe3b9;box-shadow:0 0 0 1px #e0b57744} .dark-studio-theme .engraving-color-choices button:focus-visible,.dark-studio-theme .engraving-reference-zoom:focus-visible{outline:2px solid #f0c27e;outline-offset:2px} .dark-studio-theme .engraving-example-tools [data-engraving-note]{display:block;margin:0;color:#b6bec8;font:11px/1.45 'DM Sans',sans-serif;overflow-wrap:anywhere} .dark-studio-theme .engraving-reference-zoom{position:relative;display:block;width:100%;padding:0;border:0;background:#101214;cursor:zoom-in} .dark-studio-theme .engraving-reference-zoom img{width:100%;object-fit:contain} .dark-studio-theme .back-cover-picker-examples [data-engraving-tools]{padding:0 7px 7px} .back-cover-picker-examples figure[hidden]{display:none} .back-cover-picker-choices[hidden]{display:none} .back-cover-picker-examples:has(figure[hidden]){grid-template-columns:minmax(0,1fr)} .back-cover-picker-examples #back-cover-glass-example img{height:clamp(220px,28vw,320px)} .back-cover-picker-examples #back-cover-metal-example img{height:clamp(220px,28vw,320px)} [data-custom-finish-art="back"]>img{display:block;width:100%;height:auto;object-fit:contain;background:#101214} .dark-studio-theme .preset-image-lightbox.is-engraving-example .preset-image-lightbox-dialog{grid-template-rows:auto auto minmax(0,1fr) auto} .dark-studio-theme .engraving-lightbox-colors{margin:0;padding:3px 5px 7px;border-bottom:1px solid #343941} .dark-studio-theme .engraving-lightbox-colors[hidden]{display:none!important} .dark-studio-theme .preset-image-lightbox.is-engraving-example .preset-image-lightbox-stage:not(.is-zoomed) img{position:absolute;inset:0;width:100%;height:100%;max-height:100%;object-fit:contain} @media(max-width:600px){ .dark-studio-theme .engraving-color-choices{gap:4px} .dark-studio-theme .engraving-color-choices button{min-height:38px;padding:5px 7px;font-size:11px} .dark-studio-theme .engraving-color-choices button>span{flex-basis:11px;width:11px;height:11px} } /* Show all three engraving references together, within the large homepage card. */ .dark-studio-theme #home-personalization-capability{grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch} .dark-studio-theme #home-personalization-capability>div.home-engraving-preview-tools{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:51px;padding:9px 10px;background:#101315;border-bottom:1px solid #34373b} .dark-studio-theme .home-engraving-preview-tools>span{color:#d9c3a2;font-size:11px;line-height:1.4} .dark-studio-theme .home-engraving-preview-tools>small{flex-shrink:0;font-size:10px;color:#9ca3ae} .dark-studio-theme #home-personalization-capability>div.home-engraving-previews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;min-height:clamp(185px,20vw,260px);padding:0;background:#34373b} .dark-studio-theme #home-personalization-capability .home-engraving-previews .home-capability-image-trigger{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;height:100%} .dark-studio-theme #home-personalization-capability .home-engraving-previews img{width:100%;height:100%;min-height:0;padding:7px;object-fit:contain} .dark-studio-theme #home-personalization-capability .home-engraving-caption{display:grid;gap:4px;padding:10px 4px;background:#11161b;text-align:center} .dark-studio-theme #home-personalization-capability .home-engraving-caption>strong{font-size:12px} .dark-studio-theme #home-personalization-capability .home-engraving-caption>small{font-size:10px;color:#9ba3ad} .dark-studio-theme #home-personalization-capability .capability-image-zoom-hint{right:5px;bottom:64px;padding:4px 6px} .dark-studio-theme #home-personalization-capability>div.home-engraving-capability-content{display:flex;flex-direction:column;gap:10px;padding:12px 14px} .dark-studio-theme .home-engraving-capability-content>strong{font-size:16px} .dark-studio-theme #home-engraving-example-description{min-height:34px;font-size:12px;line-height:1.45;color:#bcc0c7} .dark-studio-theme #home-personalization-capability .engraving-example-tools{margin-top:auto;gap:10px} .dark-studio-theme #home-personalization-capability .engraving-color-choices button{min-height:40px} .dark-studio-theme #home-personalization-capability button:focus-visible{outline:2px solid #f0c786;outline-offset:-3px} @media(max-width:720px){ .dark-studio-theme #home-personalization-capability>div.home-engraving-previews{height:230px;min-height:230px} .dark-studio-theme #home-personalization-capability>div.home-engraving-preview-tools{min-height:55px} .dark-studio-theme #home-personalization-capability>div.home-engraving-capability-content{padding:11px;gap:9px} .dark-studio-theme #home-personalization-capability .home-engraving-previews img{padding:3px} .dark-studio-theme #home-personalization-capability .home-engraving-caption>strong{font-size:11px} .dark-studio-theme #home-personalization-capability .home-engraving-caption>small{font-size:9px} .dark-studio-theme #home-personalization-capability .engraving-color-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .dark-studio-theme #home-personalization-capability .engraving-color-choices button{min-height:44px} } /* Make the dial source choice explicit: library first, custom upload second. */ .dial-source-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px} .dial-source-choice{min-height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:7px 9px;font:600 10px 'DM Sans',sans-serif;cursor:pointer} .dial-source-choice:hover,.dial-source-choice:focus-visible{border-color:var(--accent);outline:0} .dial-source-choice.is-selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 2px #d2a06433} .dial-source-note{margin:0 0 9px;color:var(--muted);font:10px/1.45 'DM Sans',sans-serif} .dial-source-note[hidden]{display:none!important} .custom-dial-uploader .custom-dial-uploader-heading[hidden]{display:none!important} .dark-studio-theme .dial-source-choice{border-color:#3a3e43;background:#191b1e;color:#d7d9dc} .dark-studio-theme .dial-source-choice:hover,.dark-studio-theme .dial-source-choice:focus-visible{border-color:#d2a064} .dark-studio-theme .dial-source-choice.is-selected{border-color:#d2a064;background:#3a2a1b;color:#f3d29b;box-shadow:0 0 0 1px #d2a06466} .dark-studio-theme .dial-source-note{color:#a8adb4} /* A persistent, context-aware guide for each customer DIY step. */ .customer-step-guide{display:grid;gap:10px;margin:10px 0 14px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)} .customer-step-guide[hidden]{display:none!important} .customer-stage.is-rear-view>:not(.customer-rear-view),.watch-detail-canvas.is-rear-view>:not(.customer-rear-view){visibility:hidden} .customer-rear-view{position:absolute;inset:5%;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#b9bdc4;text-align:center;font-size:16px} .customer-rear-view>img,.customer-rear-view>svg{display:block;width:100%;height:100%;object-fit:contain} .preview-action:disabled{opacity:.45;cursor:not-allowed} .customer-stage.is-side-view>:not(.customer-side-view),.watch-detail-canvas.is-side-view>:not(.customer-side-view){visibility:hidden} .customer-side-view{position:absolute;inset:5%;display:flex;align-items:center;justify-content:center;pointer-events:none} .customer-side-view>svg{display:block;width:100%;height:100%;object-fit:contain} .crown-material-preview{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:12px 0} .crown-material-preview figure{margin:0;padding:12px;background:#101214;border:1px solid #3a3e43;border-radius:10px;min-width:0} .crown-material-preview svg{display:block;width:100%;height:160px} .crown-material-preview figure:nth-child(2) svg{height:220px} .crown-material-preview figcaption{font-size:12px;color:#b9bdc4;text-align:center;margin-top:6px} .dial-creation-entry{padding:14px;margin:10px;border:1px solid #725533;border-radius:12px;background:linear-gradient(140deg,#30261c,#191b1e 80%)} .dial-creation-heading{display:grid;gap:6px;color:#f3d29b} .dial-creation-heading>span{font-size:10px;letter-spacing:.12em;color:#d2a064} .dial-creation-heading>strong{font-size:17px;line-height:1.4} .dial-creation-heading p,.dial-creation-footnote{font-size:12px;line-height:1.6;margin:0;color:#b9bdc4} .dark-studio-theme .dial-creation-entry .dial-creation-upload{background:#d2a064;color:#17120d;border-color:#d2a064;margin:12px 0 8px;flex-wrap:wrap} .dark-studio-theme .dial-creation-upload small{color:#3a3024} .dark-studio-theme .dial-creation-entry .dial-creation-existing{margin:0 0 10px;flex-wrap:wrap} .step-guide-dial-continue{display:flex;justify-content:flex-end} .step-guide-dial-continue button{padding:7px 9px;min-height:36px;border:1px solid #50545a;border-radius:7px;color:#b9bdc4;background:transparent;cursor:pointer;font-size:12px} .step-guide-dial-continue button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .personalization-detail-nav{display:flex;gap:6px;flex-wrap:wrap} .personalization-detail-nav button{flex:1;min-height:40px;padding:7px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-size:12px} .personalization-detail-nav button[aria-pressed=true]{border-color:var(--accent);background:#d2a06422;color:var(--accent)} .step-guide-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font:9px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase} .step-guide-topline strong{color:var(--accent);font-weight:600} .step-guide-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px} .step-guide-navigation{display:flex;flex-direction:column;align-items:stretch;gap:6px} .step-guide-previous{min-height:36px;padding:6px 9px;border:1px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent);font:600 12px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap} .step-guide-previous:hover,.step-guide-previous:focus-visible{outline:0;box-shadow:0 0 0 3px #d2a06433} .step-guide-copy{display:grid;gap:4px;min-width:0} .step-guide-copy strong{font-size:13px;line-height:1.3} .step-guide-copy p{margin:0;color:var(--muted);font:11px/1.5 'DM Sans',sans-serif} .step-guide-next,.step-guide-artwork-actions button{border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:#17120d;padding:8px 10px;font:600 10px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap} .step-guide-next:hover,.step-guide-artwork-actions button:hover,.step-guide-next:focus-visible,.step-guide-artwork-actions button:focus-visible{outline:0;box-shadow:0 0 0 3px #d2a06433} .step-guide-next:disabled{border-color:#3b3e43;background:#222529;color:#777d85;cursor:not-allowed;box-shadow:none} .step-guide-artwork-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line)} .step-guide-artwork-actions>span{margin-right:auto;color:var(--muted);font:9px/1.4 'DM Sans',sans-serif} .step-guide-artwork-actions button{padding:6px 9px;background:#30251a;color:#f3d29b;border-color:#725533} .step-guide-prerequisite{margin:0;padding-top:8px;border-top:1px solid #725533;color:#e4bd82;font:10px/1.45 'DM Sans',sans-serif} .dark-studio-theme .customer-step-guide{border-color:#4b3a27;background:linear-gradient(135deg,#241f19,#191b1e 72%);color:#f1ede5;box-shadow:0 0 0 1px #d2a06412} .dark-studio-theme .step-guide-topline{color:#a8adb4} .dark-studio-theme .step-guide-topline strong{color:#e3b36e} .dark-studio-theme .step-guide-copy strong{color:#f3d29b} .dark-studio-theme .step-guide-copy p,.dark-studio-theme .step-guide-artwork-actions>span{color:#a8adb4} .dark-studio-theme .step-guide-next{background:#d2a064;border-color:#d2a064;color:#17120d} .dark-studio-theme .step-guide-next:disabled{border-color:#3b3e43;background:#222529;color:#777d85} .dark-studio-theme .step-guide-artwork-actions{border-color:#34373b} .dark-studio-theme .step-guide-artwork-actions button{border-color:#725533;background:#30251a;color:#f3d29b} .dark-studio-theme .step-guide-prerequisite{border-color:#725533;color:#e4bd82} @media(max-width:600px){.customer-step-guide{gap:8px;margin:8px 0 12px;padding:11px}.step-guide-main{grid-template-columns:minmax(0,1fr)}.step-guide-next{width:100%;white-space:normal}.step-guide-artwork-actions{gap:6px}.step-guide-artwork-actions>span{flex-basis:100%;margin:0}.step-guide-artwork-actions button{flex:1}} /* Keep the compact step navigation and current-step card together while browsing parts. */ .dark-studio-theme .customer-guidance-sticky{position:sticky;top:0;z-index:30;margin:0 0 8px;padding:6px 0 8px;border-bottom:1px solid #292c30;background:#121416} .dark-studio-theme .customer-guidance-sticky .studio-progress{position:relative;top:auto;z-index:auto;display:flex;align-items:center;gap:4px;min-height:0;margin:0;padding:0 0 6px;border:0;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;white-space:nowrap} .dark-studio-theme .customer-guidance-sticky .studio-progress::-webkit-scrollbar{display:none} .dark-studio-theme .customer-guidance-sticky .studio-progress-step{display:flex;flex:0 0 auto;align-items:center;gap:4px;width:auto;min-width:max-content;min-height:28px;margin:0;padding:4px 7px;border:1px solid #363a40;border-radius:8px;background:#17191c;transform:none;box-shadow:none} .dark-studio-theme .customer-guidance-sticky .studio-progress-step strong{font:500 12px/1.25 'DM Sans',sans-serif} .dark-studio-theme .customer-guidance-sticky .studio-progress-icon,.dark-studio-theme .customer-guidance-sticky .studio-progress-status{display:none} .dark-studio-theme .customer-guidance-sticky .studio-progress-step>b{flex:0 0 16px;width:16px;height:16px;margin:0;font:700 11px/16px 'DM Sans',sans-serif} .dark-studio-theme .customer-guidance-sticky .studio-progress-personalize{margin-left:0!important} .dark-studio-theme .customer-guidance-sticky .customer-step-guide{gap:5px;margin:0;padding:8px 9px;border-radius:9px;box-shadow:none} .dark-studio-theme .customer-guidance-sticky .step-guide-topline{font-size:11px} .dark-studio-theme .customer-guidance-sticky .step-guide-main{grid-template-columns:minmax(0,1fr) auto;gap:8px} .dark-studio-theme .customer-guidance-sticky .step-guide-copy{gap:2px} .dark-studio-theme .customer-guidance-sticky .step-guide-copy strong{font-size:13px;line-height:1.3} .dark-studio-theme .customer-guidance-sticky .step-guide-copy p{color:#b9bdc4;font-size:12px;line-height:1.45} .dark-studio-theme .customer-guidance-sticky .step-guide-next{min-height:36px;padding:6px 9px;font-size:12px} .dark-studio-theme .customer-guidance-sticky .step-guide-artwork-actions{gap:5px;padding-top:5px} .dark-studio-theme .customer-guidance-sticky .step-guide-artwork-actions>span{flex:0 0 auto;margin-right:auto;font-size:11px} .dark-studio-theme .customer-guidance-sticky .step-guide-artwork-actions button{min-height:34px;padding:6px 8px;font-size:11px} .dark-studio-theme .customer-guidance-sticky .step-guide-prerequisite{padding-top:5px;color:#b9bdc4;font-size:11px} @media(max-width:600px){ .dark-studio-theme .customer-guidance-sticky{position:static;top:auto;padding:5px 0 7px} .dark-studio-theme .customer-guidance-sticky .studio-progress{gap:3px;padding-bottom:5px} .dark-studio-theme .customer-guidance-sticky .studio-progress-step{min-height:34px;padding:6px 8px} .dark-studio-theme .customer-guidance-sticky .step-guide-main{grid-template-columns:minmax(0,1fr) auto} .dark-studio-theme .customer-guidance-sticky .step-guide-next{width:auto;white-space:normal} .dark-studio-theme .customer-guidance-sticky .step-guide-artwork-actions{gap:4px} .dark-studio-theme .customer-guidance-sticky .step-guide-artwork-actions>span{flex:0 0 auto;margin-right:auto} .dark-studio-theme .customer-guidance-sticky .step-guide-artwork-actions button{flex:0 0 auto} } /* Visible range control for the horizontally overflowing step navigation. */ .dark-studio-theme .studio-progress-slider-wrap{display:block;height:8px;margin:-1px 2px 4px;padding:0;line-height:0} .dark-studio-theme .studio-progress-slider-wrap[hidden]{display:none!important} .dark-studio-theme #studio-progress-slider{display:block;width:100%;height:8px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize} .dark-studio-theme #studio-progress-slider::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:#383c42} .dark-studio-theme #studio-progress-slider::-webkit-slider-thumb{width:28px;height:8px;margin-top:-2.5px;border:0;border-radius:99px;background:#d2a064;appearance:none;-webkit-appearance:none} .dark-studio-theme #studio-progress-slider::-moz-range-track{height:3px;border-radius:99px;background:#383c42} .dark-studio-theme #studio-progress-slider::-moz-range-thumb{width:28px;height:8px;border:0;border-radius:99px;background:#d2a064} .dark-studio-theme #studio-progress-slider:focus-visible{outline:1px solid #d2a064;outline-offset:2px} /* Dedicated, explicit date-window and bubble-lens choices. */ .dark-studio-theme .dial-options-panel{display:grid;gap:9px;margin:8px 12px 12px;padding:12px;border:1px solid #34383e;border-radius:12px;background:#121416} .dark-studio-theme .dial-options-panel[hidden]{display:none!important} .dark-studio-theme .dial-options-heading strong{display:block;color:#f3d29b;font:600 13px 'DM Sans',sans-serif} .dark-studio-theme .dial-options-heading .eyebrow{margin-bottom:4px;color:#a8adb4} .dark-studio-theme .dial-options-heading small{display:block;margin-top:3px;color:#b9bdc4;font:12px/1.4 'DM Sans',sans-serif} .dark-studio-theme .dial-options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .dark-studio-theme .dial-option-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:52px;padding:8px 9px;border:1px solid #363a40;border-radius:9px;background:#191b1e;color:#d7d9dc;text-align:left;cursor:pointer} .dark-studio-theme .dial-option-toggle:hover,.dark-studio-theme .dial-option-toggle:focus-visible{border-color:#9b713e;outline:0} .dark-studio-theme .dial-option-toggle.is-selected{border-color:#8f6939;background:#2b241b;color:#f3d29b} .dark-studio-theme .dial-option-toggle:disabled{opacity:.48;cursor:not-allowed} .dark-studio-theme .dial-option-copy{display:grid;gap:3px;min-width:0} .dark-studio-theme .dial-option-copy strong{font:600 13px 'DM Sans',sans-serif} .dark-studio-theme .dial-option-copy small{color:#b9bdc4;font:11px/1.35 'DM Sans',sans-serif} .dark-studio-theme .dial-option-switch{position:relative;flex:0 0 29px;width:29px;height:17px;border-radius:99px;background:#454950;transition:background .16s ease} .dark-studio-theme .dial-option-switch:after{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#e4e5e7;transition:transform .16s ease} .dark-studio-theme .dial-option-toggle.is-selected .dial-option-switch{background:#9e7542} .dark-studio-theme .dial-option-toggle.is-selected .dial-option-switch:after{transform:translateX(12px);background:#fff0d6} .dark-studio-theme .dial-options-note{margin:0;color:#b9bdc4;font:12px/1.4 'DM Sans',sans-serif} @media(max-width:600px){.dark-studio-theme .dial-options-panel{margin:7px 8px 10px;padding:10px}.dark-studio-theme .dial-options-grid{gap:5px}.dark-studio-theme .dial-option-toggle{min-height:48px;padding:7px}} /* Full-canvas watch detail viewer with independent manual and wheel zoom. */ .dark-studio-theme .watch-detail-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:14px} .dark-studio-theme .watch-detail-modal[hidden]{display:none!important} .dark-studio-theme .watch-detail-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050607ed;backdrop-filter:blur(7px)} .dark-studio-theme .watch-detail-dialog{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;width:min(1320px,97vw);height:min(960px,96dvh);min-width:0;min-height:0;padding:18px;border:1px solid #514331;border-radius:18px;background:#151719;box-shadow:0 26px 90px #000d;color:#eeeae2} .dark-studio-theme .watch-detail-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:0 46px 10px 2px;border-bottom:1px solid #303338} .dark-studio-theme .watch-detail-header .eyebrow{margin:0 0 4px;color:#d2a064} .dark-studio-theme .watch-detail-header h2{margin:0;color:#f3d29b;font:600 clamp(18px,2vw,25px)/1.2 'DM Sans',sans-serif} .dark-studio-theme .watch-detail-header .customer-confirm-close{top:2px;right:0} .dark-studio-theme .watch-detail-zoom-tools{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0} .dark-studio-theme .watch-detail-zoom-tools button{display:grid;place-items:center;min-width:36px;height:34px;padding:0 9px;border:1px solid #514638;border-radius:8px;background:#211e1a;color:#e7c58f;font-size:17px;cursor:pointer} .dark-studio-theme .watch-detail-zoom-tools button:hover,.dark-studio-theme .watch-detail-zoom-tools button:focus-visible{border-color:#d2a064;background:#3a2d20;color:#fff0d0;outline:0} .dark-studio-theme .watch-detail-zoom-tools input{width:clamp(130px,25vw,320px);accent-color:#d2a064;cursor:ew-resize} .dark-studio-theme .watch-detail-zoom-tools output{min-width:48px;color:#e2bd80;font:11px 'DM Mono',monospace;text-align:center} .dark-studio-theme .watch-detail-zoom-tools .watch-detail-zoom-reset{min-width:76px;font:10px 'DM Sans',sans-serif} .dark-studio-theme .watch-detail-frame{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;border:1px solid #30343a;border-radius:14px;background:radial-gradient(ellipse at 50% 44%,#191c20 0,#090a0b 72%);touch-action:none;cursor:grab} .dark-studio-theme .watch-detail-frame.is-dragging{cursor:grabbing} .dark-studio-theme .watch-detail-canvas{position:absolute;left:50%;top:50%;width:760px;height:894px;margin:-447px 0 0 -380px;flex:0 0 760px;transform-origin:center center;transition:transform .12s ease;pointer-events:none;box-shadow:0 20px 70px #000a} .dark-studio-theme .watch-detail-hint{margin:0;color:#999da4;font:10px/1.45 'DM Sans',sans-serif;text-align:center} .dark-studio-theme.has-watch-detail-open{overflow:hidden} .dark-studio-theme .watch-detail-zoom-tools button:focus-visible,.dark-studio-theme .watch-detail-zoom-tools input:focus-visible{outline:2px solid #d2a064;outline-offset:2px} @media(max-width:600px){ .dark-studio-theme .watch-detail-modal{padding:0} .dark-studio-theme .watch-detail-dialog{width:100%;height:100dvh;gap:9px;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border:0;border-radius:0} .dark-studio-theme .watch-detail-header{padding-bottom:8px} .dark-studio-theme .watch-detail-zoom-tools{gap:6px} .dark-studio-theme .watch-detail-zoom-tools button{min-width:32px;height:32px;padding:0 7px} .dark-studio-theme .watch-detail-zoom-tools input{width:min(34vw,180px)} .dark-studio-theme .watch-detail-zoom-tools output{min-width:40px;font-size:10px} .dark-studio-theme .watch-detail-zoom-tools .watch-detail-zoom-reset{min-width:64px;font-size:9px} .dark-studio-theme .watch-detail-hint{font-size:9px} } /* Keep the redundant inline artwork section out of the picker; its controls live in the dial editor. */ .dark-studio-theme .customer-picker #dial-artwork-panel{display:none!important} /* Keep canvas shortcuts in a separate side rail so they never cover the watch. */ .dark-studio-theme .preview-stage-row{grid-template-columns:minmax(0,1fr) 74px;gap:10px;align-items:stretch} .dark-studio-theme .preview-stage-row>.customer-stage-wrap{min-width:0} .dark-studio-theme .preview-action-rail{position:static;left:auto;top:auto;bottom:auto;transform:none;z-index:auto;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:6px;width:74px;min-width:0} .dark-studio-theme .preview-action{width:100%;min-width:0;min-height:36px;border:1px solid #3a3e43;border-radius:8px;background:#141619;color:#d4d6d9;padding:5px 3px;font-size:10px;line-height:1.15;text-align:center;white-space:nowrap} @media(max-width:720px){ .dark-studio-theme:has(#customer-layout:not([hidden])) .customer-preview:not(.is-mobile-sticky) .customer-stage-wrap{height:clamp(344px,calc(58vw + 44px),464px);min-height:344px;max-height:464px} .dark-studio-theme .preview-stage-row{grid-template-columns:minmax(0,1fr) 58px;gap:6px;align-items:stretch} .dark-studio-theme .preview-action-rail{position:static;gap:4px;width:58px} .dark-studio-theme .preview-action{min-height:44px;border-radius:7px;padding:4px 2px;font-size:11px;line-height:1.1} } /* Keep the live watch preview visible while mobile users browse part choices. */ @media(max-width:720px){ .dark-studio-theme .customer-preview-sticky-spacer{grid-area:preview;min-width:0;visibility:hidden;pointer-events:none} .dark-studio-theme .customer-preview-sticky-spacer[hidden]{display:none!important} .dark-studio-theme .customer-preview.is-mobile-sticky{--sticky-preview-budget:38vh;--sticky-preview-budget:38dvh;position:fixed!important;top:env(safe-area-inset-top,0px)!important;z-index:40;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:5px;margin:0!important;padding:8px;height:var(--sticky-preview-budget);max-height:var(--sticky-preview-budget);min-height:0;overflow:hidden;border-radius:0 0 14px 14px;box-shadow:0 12px 28px #000b} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-heading{display:none} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-toolbar{gap:6px;margin:0;padding:0 0 5px;flex-wrap:nowrap;font-size:11px} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-toolbar button{flex:0 0 auto;min-height:32px;padding:5px 6px;font-size:11px} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-toolbar label{flex:1 1 auto;min-width:0;gap:4px;white-space:nowrap} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-toolbar input{width:clamp(54px,18vw,84px);min-width:0} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-stage-row{min-height:0;grid-template-columns:minmax(0,1fr) 58px;grid-template-rows:minmax(0,1fr);align-items:stretch} .dark-studio-theme .customer-preview.is-mobile-sticky .customer-stage-wrap{height:100%;min-height:0;max-height:100%;aspect-ratio:auto;padding:6px} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-action-rail{position:static;left:auto;top:auto;bottom:auto;transform:none;width:58px;gap:3px;min-height:0;align-content:stretch;grid-template-rows:repeat(5,minmax(0,1fr))} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-action{min-height:40px;padding:4px 2px;font-size:11px;white-space:nowrap} .dark-studio-theme .customer-preview.is-mobile-sticky :is(.preview-note,.preview-save-feedback){min-height:0;margin:0;padding:0;font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dark-studio-theme.has-mobile-preview-sticky .customer-guidance-sticky{top:auto;z-index:30} } @media(max-width:720px) and (max-height:600px){ .dark-studio-theme .customer-preview.is-mobile-sticky .preview-stage-row{grid-template-columns:minmax(0,1fr) 104px} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-action-rail{width:104px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))} } /* Keep dial-library cards identical in the inline picker and the large editor. */ .dark-studio-theme :is(.picker-component[data-picker-component="dial"].is-expanded,.custom-dial-editor-existing-choices)>.group-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .dark-studio-theme :is(.picker-component[data-picker-component="dial"],.custom-dial-editor-existing-choices) .group-choice-item{min-width:0;padding:6px;border-radius:11px} .dark-studio-theme :is(.picker-component[data-picker-component="dial"],.custom-dial-editor-existing-choices) .group-choice{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;justify-content:initial;gap:6px;min-height:60px;padding:5px;border-radius:9px} .dark-studio-theme :is(.picker-component[data-picker-component="dial"],.custom-dial-editor-existing-choices) .group-choice-images{flex:0 0 48px;width:48px;height:48px} .dark-studio-theme :is(.picker-component[data-picker-component="dial"],.custom-dial-editor-existing-choices) .group-choice-images .group-choice-image{flex:0 0 48px;width:48px;height:48px;max-width:48px;max-height:48px} .dark-studio-theme :is(.picker-component[data-picker-component="dial"],.custom-dial-editor-existing-choices) .group-choice-copy{display:grid;align-content:center;justify-content:start;gap:2px;min-width:0;padding:0} .dark-studio-theme :is(.picker-component[data-picker-component="dial"],.custom-dial-editor-existing-choices) .group-choice-copy strong{display:-webkit-box;overflow:hidden;font-size:12px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2} .dark-studio-theme :is(.picker-component[data-picker-component="dial"],.custom-dial-editor-existing-choices) .group-choice-copy small{overflow:hidden;text-align:left;font-size:11px;white-space:nowrap;text-overflow:ellipsis} @media(max-width:359px){.dark-studio-theme :is(.picker-component[data-picker-component="dial"].is-expanded,.custom-dial-editor-existing-choices)>.group-choices{grid-template-columns:minmax(0,1fr)}} /* Keep unprocessed material pixels off the live stage until recolouring finishes. */ .customer-asset.is-tint-pending{visibility:hidden} .dark-studio-theme .customer-picker :is(.group-choice,.asset-color-choice,.asset-compact-choice):focus-visible,.dark-studio-theme .current-case-color-options .asset-color-choice:focus-visible{outline:2px solid #f0c27e;outline-offset:2px;z-index:2} /* Published customer design gallery replaces the former onboarding guide. */ .dark-studio-theme #design-entry-panel .customer-howto[hidden]{display:none!important} .dark-studio-theme #design-entry-panel .customer-design-showcase{grid-area:showcase;display:grid;gap:13px;min-width:0;margin-top:8px;padding-top:20px;border-top:1px solid #2f3237} .dark-studio-theme .customer-design-showcase-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px} .dark-studio-theme .customer-design-showcase-heading>div{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:6px 10px;min-width:0} .dark-studio-theme .customer-design-showcase-heading .home-capability-label{grid-column:1;grid-row:1} .dark-studio-theme .customer-design-showcase-heading .home-capability-label{justify-self:start} .dark-studio-theme .customer-design-showcase-heading h3{grid-column:2;grid-row:1;margin:0;color:#f1ede5;font:600 21px/1.2 'Playfair Display',serif} .dark-studio-theme .customer-design-showcase-heading p{grid-column:2;margin:0;color:#a8adb4;font-size:12px;line-height:1.5} .dark-studio-theme .customer-design-showcase-heading>small{flex:0 0 auto;padding-bottom:2px;color:#d2a064;font:10px 'DM Mono',monospace} .dark-studio-theme .customer-showcase-grid{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/4);grid-template-columns:none;align-items:stretch;gap:12px;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#6c5639 #151719;padding-bottom:6px} .dark-studio-theme .customer-showcase-grid:focus-visible{outline:2px solid #d2a064;outline-offset:3px} .dark-studio-theme .customer-showcase-grid>.customer-showcase-card{scroll-snap-align:start} .dark-studio-theme .customer-showcase-grid:has(.customer-showcase-state){display:block} .dark-studio-theme .customer-design-showcase-heading{flex-wrap:wrap} .dark-studio-theme .customer-design-showcase-heading>div:first-child{flex:1 1 320px} .dark-studio-theme .customer-showcase-rail{position:relative;min-width:0} .dark-studio-theme .customer-showcase-rail-tools{position:absolute;z-index:3;top:50%;left:8px;right:8px;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)} .dark-studio-theme .customer-showcase-rail-tools button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #6b5435;border-radius:50%;background:#151719dd;color:#e0b77f;font-size:22px;line-height:1;cursor:pointer;pointer-events:auto;box-shadow:0 4px 14px #0008} .dark-studio-theme .customer-showcase-rail-tools button:hover{border-color:#f3d29b;background:#3a2a1b;color:#f3d29b;transform:scale(1.06)} .dark-studio-theme .customer-showcase-rail-tools button[hidden]{display:none!important} .dark-studio-theme .customer-showcase-rail-tools button:focus-visible{outline:2px solid #d2a064;outline-offset:2px} .dark-studio-theme .customer-showcase-card{min-width:0;overflow:hidden;border:1px solid #34383e;border-radius:11px;background:#17191c} .dark-studio-theme .customer-showcase-image-trigger{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;padding:0;border:0;border-bottom:1px solid #30343a;background:#0b0d0f;cursor:zoom-in} .dark-studio-theme .customer-showcase-image{display:block;width:100%;height:100%;object-fit:contain;transition:transform .22s ease} .dark-studio-theme .customer-showcase-image-trigger:hover .customer-showcase-image{transform:scale(1.025)} .dark-studio-theme .customer-showcase-gallery-controls{display:flex;align-items:center;justify-content:center;gap:12px;min-height:34px;padding:3px 8px;border-bottom:1px solid #30343a;background:#121416;color:#a8adb4;font:10px 'DM Mono',monospace} .dark-studio-theme .customer-showcase-gallery-controls button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid #42464d;border-radius:7px;background:#1b1e22;color:#d2a064;font-size:18px;line-height:1;cursor:pointer} .dark-studio-theme .customer-showcase-gallery-controls button:hover{border-color:#d2a064;background:#28221b;color:#f1c27d} .dark-studio-theme .customer-showcase-gallery-controls button:focus-visible{outline:2px solid #d2a064;outline-offset:2px} .dark-studio-theme .customer-showcase-zoom-hint{position:absolute;right:8px;bottom:8px;padding:5px 8px;border:1px solid #ffffff40;border-radius:999px;background:#111318d9;color:#eeeae2;font-size:10px} .dark-studio-theme .customer-showcase-image-error{position:absolute;inset:0;display:none;place-items:center;color:#a8adb4;font-size:12px} .dark-studio-theme .customer-showcase-image-trigger.is-image-error .customer-showcase-image-error{display:grid} .dark-studio-theme .customer-showcase-image-trigger.is-image-error .customer-showcase-image{visibility:hidden} .dark-studio-theme .customer-showcase-image-trigger.is-image-error .customer-showcase-zoom-hint{display:none} .dark-studio-theme .customer-showcase-card-copy{display:grid;gap:4px;min-height:54px;padding:10px 11px} .dark-studio-theme .customer-showcase-card-copy strong{display:-webkit-box;overflow:hidden;color:#eeeae2;font-size:13px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2} .dark-studio-theme .customer-showcase-card-copy p{display:-webkit-box;overflow:hidden;margin:0;color:#a8adb4;font-size:10px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2} .dark-studio-theme .customer-showcase-state{grid-column:1/-1;display:grid;place-items:center;min-height:120px;margin:0;padding:22px;border:1px dashed #3b3e42;border-radius:11px;background:#141619;color:#a8adb4;font-size:12px;text-align:center} .dark-studio-theme .homepage-video-showcase[hidden]{display:none!important}.dark-studio-theme .homepage-video-showcase{display:grid;gap:10px;margin-top:7px;padding-top:14px;border-top:1px solid #2f3237}.dark-studio-theme .homepage-video-showcase-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dark-studio-theme .homepage-video-showcase-heading h4{margin:0;color:#f1ede5;font:600 16px/1.2 'Playfair Display',serif}.dark-studio-theme .homepage-video-showcase-heading small{margin-left:auto;color:#d2a064;font:10px 'DM Mono',monospace}.dark-studio-theme .homepage-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.dark-studio-theme .homepage-video-card{min-width:0;overflow:hidden;border:1px solid #34383e;border-radius:11px;background:#17191c}.dark-studio-theme .homepage-video-card video{display:block;width:100%;aspect-ratio:16/9;background:#080a0c;object-fit:contain}.dark-studio-theme .homepage-video-card-copy{display:grid;gap:4px;padding:9px 11px}.dark-studio-theme .homepage-video-card-copy strong{overflow:hidden;color:#eeeae2;font-size:13px;line-height:1.4;text-overflow:ellipsis}.dark-studio-theme .homepage-video-card-copy p{display:-webkit-box;overflow:hidden;margin:0;color:#a8adb4;font-size:10px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2} @media(max-width:1000px){.dark-studio-theme .customer-showcase-grid{grid-auto-columns:calc((100% - 24px)/3)}} @media(max-width:900px){.dark-studio-theme #design-entry-panel.panel{grid-template-areas:"heading" "custom" "preset" "showcase" "features" "guide"}} @media(max-width:600px){ .dark-studio-theme #design-entry-panel .customer-design-showcase{gap:10px;margin-top:3px;padding-top:16px} .dark-studio-theme .customer-design-showcase-heading{align-items:flex-start} .dark-studio-theme .customer-design-showcase-heading>div{grid-template-columns:minmax(0,1fr);gap:5px} .dark-studio-theme .customer-design-showcase-heading .home-capability-label,.dark-studio-theme .customer-design-showcase-heading h3,.dark-studio-theme .customer-design-showcase-heading p{grid-column:1;grid-row:auto} .dark-studio-theme .customer-design-showcase-heading h3{font-size:20px} .dark-studio-theme .customer-showcase-grid{grid-auto-columns:calc((100% - 8px)/2);gap:8px} .dark-studio-theme .homepage-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dark-studio-theme .homepage-video-card-copy{padding:8px} .dark-studio-theme .customer-showcase-card-copy{min-height:48px;padding:8px} .dark-studio-theme .customer-showcase-card-copy strong{font-size:13px} } @media(max-width:359px){.dark-studio-theme .customer-showcase-grid{grid-auto-columns:100%}} /* Short landscape screens reserve room for actual part choices below the preview. */ @media (max-width:720px) and (max-height:420px) and (orientation:landscape){ .dark-studio-theme .customer-preview.is-mobile-sticky .preview-toolbar{gap:4px;padding-bottom:2px} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-toolbar button{min-height:24px;padding:3px 6px} .dark-studio-theme.has-mobile-preview-sticky #customer-step-guide{padding:5px 7px;margin-top:3px} .dark-studio-theme.has-mobile-preview-sticky #customer-step-guide :is(.step-guide-copy p,.step-guide-prerequisite,.step-guide-artwork-actions){display:none} .dark-studio-theme.has-mobile-preview-sticky #customer-step-guide .step-guide-topline{margin-bottom:3px;line-height:1.2} .dark-studio-theme.has-mobile-preview-sticky #customer-step-guide .step-guide-main{gap:6px;grid-template-columns:minmax(0,1fr) auto;align-items:center} .dark-studio-theme.has-mobile-preview-sticky #customer-step-guide .step-guide-next{min-height:28px;padding:4px 7px;font-size:11px} } /* Procurement details stay outside the canvas and use compact disclosures. */ .dark-studio-theme .strap-sizing-note{margin:10px 0;padding:10px 12px;border:1px solid #6b5435;border-radius:9px;background:#262018;color:#d7cec0;font-size:12px;line-height:1.65;white-space:normal;overflow-wrap:anywhere} .dark-studio-theme .strap-sizing-note strong{color:#e5c99f} .dark-studio-theme .wear-material-content .strap-sizing-note{padding:0;border:0;background:none} .dark-studio-theme .wear-material-details { margin: 10px 0; border: 1px solid #45413a; border-radius: 9px; background: #15191e; color: #e4e1db; overflow: hidden; } .dark-studio-theme .wear-material-details > summary { padding: 10px 12px; cursor: pointer; font-size: 12px; line-height: 1.5; font-weight: 600; color: #e5c99f; overflow-wrap: anywhere; } .dark-studio-theme .wear-material-details > summary:focus-visible, .dark-studio-theme .wear-material-guide > summary:focus-visible { outline: 2px solid #d2a064; outline-offset: -2px; } .dark-studio-theme .wear-material-content { padding: 0 12px 12px; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; } .dark-studio-theme .wear-material-content p { color: #bdc2c9; font-size: 12px; line-height: 1.65; margin: 9px 0; white-space: normal; } .dark-studio-theme .wear-material-record { padding: 8px 0; border-top: 1px solid #34383e; } .dark-studio-theme .wear-material-record h4 { font-size: 12px; color: #f0d8b1; margin: 3px 0 8px; } .dark-studio-theme .wear-material-record dl { margin: 0; display: grid; gap: 7px; } .dark-studio-theme .wear-material-record dl > div { display: grid; grid-template-columns: minmax(70px,.75fr) minmax(0,1.5fr); gap: 10px; } .dark-studio-theme .wear-material-record dt { color: #bdc2c9; } .dark-studio-theme .wear-material-record dd { margin: 0; color: #e4e1db; } .dark-studio-theme .wear-material-record dd small { display: block; color: #a9afb8; font-size: 10px; } .dark-studio-theme .wear-material-guide { margin-top: 10px; padding-top: 8px; border-top: 1px solid #34383e; } .dark-studio-theme .wear-material-guide summary { cursor: pointer; color: #e5c99f; } .dark-studio-theme .wear-material-reference { margin-top: 12px; border-top: 1px solid #34383e; padding-top: 8px; } .dark-studio-theme .wear-material-reference h4 { color: #f0d8b1; margin: 4px 0; font-size: 12px; } .dark-studio-theme .wear-material-reference table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; } .dark-studio-theme .wear-material-reference caption { text-align: left; color: #bdc2c9; padding: 5px 0; } .dark-studio-theme .wear-material-reference th, .dark-studio-theme .wear-material-reference td { padding: 8px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid #34383e; overflow-wrap: anywhere; } .dark-studio-theme .wear-material-reference th { width: 34%; font-weight: 500; color: #d7c4a6; } .dark-studio-theme .wear-material-reference td small { display: block; color: #a9afb8; font-size: 11px; margin-top: 3px; } .dark-studio-theme .wear-material-compact > summary { padding: 7px 10px; font-size: 11px; } .dark-studio-theme .wear-material-compact .wear-material-content, .dark-studio-theme .save-design-material-summary .wear-material-content { max-height: 32dvh; overflow-y: auto; overscroll-behavior: contain; } .dark-studio-theme .save-design-material-summary { margin-bottom: 14px; } @media (max-width: 480px) { .dark-studio-theme .wear-material-record dl > div { grid-template-columns: minmax(0,1fr); gap: 2px; } .dark-studio-theme .wear-material-details > summary { min-height: 40px; } } .dark-studio-theme .part-specs-card-note{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0 0;min-width:0} .dark-studio-theme .case-size-choices{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:10px 0;min-width:0} .dark-studio-theme .case-selector-item .case-size-choices{padding:0 10px;flex-wrap:nowrap;gap:6px;overflow-x:auto} .dark-studio-theme .case-size-choices span{color:#cdb58f;font-size:11px;margin-right:3px} .dark-studio-theme .case-size-choices button{min-height:36px;padding:7px 12px;border:1px solid #505763;border-radius:8px;background:#1b222b;color:#f2eee6;font-size:12px;cursor:pointer} .dark-studio-theme .case-size-choices button[aria-pressed="true"]{border-color:#d2a064;background:#33281b;color:#f4d198} .dark-studio-theme .case-size-choices button:focus-visible{outline:2px solid #edc587;outline-offset:3px} @media(max-width:720px){.dark-studio-theme .case-size-choices button{min-height:44px;min-width:70px}} .dark-studio-theme .case-selector-item .case-size-choices span{flex-shrink:0;white-space:nowrap;margin-right:0} .dark-studio-theme .case-selector-item .case-size-choices button{flex:0 0 auto;min-width:0;padding:7px 9px;white-space:nowrap} .dark-studio-theme .case-selector-item .part-specs-card-note{padding:0 12px 10px} .dark-studio-theme .part-specs-card-note small{color:#aeb7c3;font-size:10px;line-height:1.5} .dark-studio-theme .part-specs-card-note button{flex-shrink:0;min-height:32px;padding:4px 7px;border:1px solid #685138;border-radius:7px;background:#292118;color:#e4bb7f;font-size:11px;cursor:pointer} .dark-studio-theme .part-specs-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:20px} .dark-studio-theme .part-specs-modal[hidden]{display:none!important} .dark-studio-theme.has-part-specs-open{overflow:hidden} .dark-studio-theme .part-specs-backdrop{position:absolute;inset:0;border:0;background:#000b;cursor:pointer} .dark-studio-theme .part-specs-dialog{position:relative;display:flex;flex-direction:column;width:min(1040px,100%);max-height:calc(100dvh - 40px);min-width:0;border:1px solid #6b5234;border-radius:18px;background:#14191f;color:#f2eee6;overflow:hidden;box-shadow:0 20px 70px #0009} .dark-studio-theme .part-specs-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 24px;border-bottom:1px solid #343a43} .dark-studio-theme .part-specs-heading h2{margin:3px 0 7px;font-size:23px;line-height:1.35;color:#f4d198} .dark-studio-theme .part-specs-heading p:last-child{margin:0;color:#aeb7c3;font-size:12px;line-height:1.6} .dark-studio-theme .part-specs-heading .customer-confirm-close{position:static;flex-shrink:0} .dark-studio-theme .part-specs-content{overflow:auto;overscroll-behavior:contain;min-height:0;padding:22px 24px} .dark-studio-theme .part-specs-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px} .dark-studio-theme .part-specs-visual{min-width:0} .dark-studio-theme .part-specs-image-wrap{display:grid;place-items:center;aspect-ratio:1;max-height:365px;border:1px solid #303740;border-radius:14px;background:radial-gradient(ellipse at center,#252b33,#0c1015 75%);overflow:hidden} .dark-studio-theme .part-specs-image{display:block;width:88%;height:88%;object-fit:contain} .dark-studio-theme .part-specs-image[hidden]{display:none} .dark-studio-theme .part-specs-image-status{margin:10px 0;color:#e5bd80;font-size:12px;min-height:18px} .dark-studio-theme .part-specs-colors{display:flex;flex-wrap:wrap;gap:7px} .dark-studio-theme .part-specs-colors button{display:flex;align-items:center;gap:6px;min-height:36px;border:1px solid #424b57;border-radius:8px;padding:7px 10px;background:#191f27;color:#e7e9ee;font-size:12px;cursor:pointer} .dark-studio-theme .part-specs-colors button[aria-pressed="true"]{border-color:#d3a261;background:#33281c;box-shadow:inset 0 0 0 1px #d3a261} .dark-studio-theme .part-specs-caption{margin:10px 0 0;color:#aeb7c3;font-size:11px;line-height:1.6} .dark-studio-theme .part-specs-measurements h3,.dark-studio-theme .part-specs-exterior h3{margin:4px 0 14px;font-size:17px;line-height:1.5} .dark-studio-theme .part-specs-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .dark-studio-theme .part-specs-metric{padding:14px;border:1px solid #3b424c;border-radius:11px;background:#1b222b;min-width:0} .dark-studio-theme .part-specs-metric span{color:#e0b878;font-size:12px} .dark-studio-theme .part-specs-metric strong{display:block;margin:9px 0;font-size:21px;line-height:1.3;color:#f3eee5} .dark-studio-theme .part-specs-metric p{margin:0;color:#bbc3ce;font-size:11px;line-height:1.7} .dark-studio-theme .part-specs-pending{margin:12px 0 0;padding:10px 12px;border-left:2px solid #b38c53;background:#252219;color:#d9c8ac;font-size:11px;line-height:1.7} .dark-studio-theme .part-specs-exterior{margin-top:24px;padding-top:20px;border-top:1px solid #353c45} .dark-studio-theme .part-specs-exterior-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .dark-studio-theme .part-specs-exterior-grid article{padding:14px;border:1px solid #353e49;border-radius:10px;background:#171e26} .dark-studio-theme .part-specs-exterior-grid strong{font-size:13px;color:#f1d3a1} .dark-studio-theme .part-specs-exterior-grid p{margin:7px 0 0;color:#b7bfcb;font-size:12px;line-height:1.7} .dark-studio-theme .part-specs-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid #343a43;background:#11161c} .dark-studio-theme .part-specs-footer small{color:#adb6c2;font-size:11px;line-height:1.5} .dark-studio-theme .part-specs-footer button{width:auto;flex:0 0 auto;min-width:140px;min-height:40px;white-space:nowrap} .dark-studio-theme .summary-physical-specs{white-space:normal;color:#d0ad79;line-height:1.6} .dark-studio-theme .part-specs-modal button:focus-visible,.dark-studio-theme [data-part-specs]:focus-visible{outline:2px solid #edc587;outline-offset:3px} @media(max-width:720px){ .dark-studio-theme .part-specs-modal{padding:10px} .dark-studio-theme .part-specs-dialog{max-height:calc(100dvh - 20px);border-radius:14px} .dark-studio-theme .part-specs-heading{padding:14px;gap:8px} .dark-studio-theme .part-specs-heading h2{font-size:19px} .dark-studio-theme .part-specs-content{padding:14px} .dark-studio-theme .part-specs-layout{grid-template-columns:1fr;gap:20px} .dark-studio-theme .part-specs-image-wrap{height:220px;aspect-ratio:auto} .dark-studio-theme .part-specs-metric{padding:11px} .dark-studio-theme .part-specs-exterior-grid{grid-template-columns:1fr} .dark-studio-theme .part-specs-footer{padding:12px 14px} .dark-studio-theme .part-specs-card-note{flex-wrap:wrap;gap:3px} .dark-studio-theme .part-specs-card-note button,.dark-studio-theme .part-specs-colors button,.dark-studio-theme .part-specs-footer button{min-height:44px} } .dark-studio-theme .design-preview-disclaimer{margin:8px 0 0;color:#b8bec6;font-size:11px;line-height:1.55;overflow-wrap:anywhere} .dark-studio-theme .custom-dial-uploader .design-preview-disclaimer{padding:8px 10px;border:1px solid #343b44;border-radius:8px;background:#151c24} .dark-studio-theme .save-design-dialog .design-preview-disclaimer{margin:8px 0 12px} /* Persistent but compact customer contact entry; modal backdrops intentionally sit above it. */ .dark-studio-theme .customer-contact{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:90;display:grid;justify-items:end;gap:10px;font-family:'DM Sans',sans-serif} .dark-studio-theme .customer-contact-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:118px;min-height:44px;padding:0 15px;border:1px solid #efc17e;border-radius:999px;background:#d2a064;color:#17120d;font:700 12px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 6px 20px #0008;transition:background .16s ease,transform .16s ease,box-shadow .16s ease} .dark-studio-theme .customer-contact-toggle:hover{background:#e3b779;transform:translateY(-2px);box-shadow:0 9px 24px #0009} .dark-studio-theme .customer-contact-toggle:focus-visible,.dark-studio-theme .customer-contact button:focus-visible,.dark-studio-theme .customer-contact-channel:focus-visible{outline:2px solid #f4d29c;outline-offset:3px} .dark-studio-theme .customer-contact-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dark-studio-theme .customer-contact-panel{width:min(316px,calc(100vw - 24px));padding:16px;border:1px solid #5b4932;border-radius:16px;background:#17191c;color:#f2eee6;box-shadow:0 18px 54px #000c} .dark-studio-theme .customer-contact-panel[hidden]{display:none!important} .dark-studio-theme .customer-contact-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .dark-studio-theme .customer-contact-heading>div{display:grid;gap:4px} .dark-studio-theme .customer-contact-heading small{color:#d2a064;font:9px 'DM Mono',monospace;letter-spacing:.14em} .dark-studio-theme .customer-contact-heading h2{margin:0;color:#f1d19d;font:600 18px 'DM Sans',sans-serif} .dark-studio-theme .customer-contact-close{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;padding:0;border:1px solid #3a3e43;border-radius:50%;background:#202328;color:#d4d8de;font-size:20px;line-height:1;cursor:pointer} .dark-studio-theme .customer-contact-intro{margin:8px 0 12px;color:#aeb4bc;font-size:11px;line-height:1.5} .dark-studio-theme .customer-contact-channels{display:grid;gap:7px} .dark-studio-theme .customer-contact-channel{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 10px;border:1px solid #34383e;border-radius:11px;background:#1d2024;color:#f0eee9;text-decoration:none;transition:border-color .16s ease,background .16s ease,transform .16s ease} .dark-studio-theme .customer-contact-channel[aria-disabled="true"]{opacity:.62;cursor:default} .dark-studio-theme .customer-contact-channel[aria-disabled="true"] .customer-contact-arrow{visibility:hidden} .dark-studio-theme .customer-contact-channel:not([aria-disabled="true"]){cursor:pointer} .dark-studio-theme .customer-contact-channel:not([aria-disabled="true"]):hover{transform:translateY(-1px);border-color:#c99a5d;background:#28231c} .dark-studio-theme .customer-contact-channel-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid #57452e;border-radius:10px;background:#282117;color:#e3b777;font:700 12px 'DM Sans',sans-serif} .dark-studio-theme .customer-contact-channel-copy{display:grid;gap:3px;min-width:0} .dark-studio-theme .customer-contact-channel-copy strong{font-size:12px;font-weight:600} .dark-studio-theme .customer-contact-channel-copy small{color:#989fa8;font:9px 'DM Mono',monospace} .dark-studio-theme .customer-contact-arrow{margin-left:auto;color:#d2a064;font-size:15px} .dark-studio-theme .customer-contact-note{margin:11px 1px 0;color:#aeb4bc;font-size:10px;line-height:1.6} @media(max-width:720px){.dark-studio-theme .customer-contact{right:max(10px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px))}.dark-studio-theme .customer-contact-toggle{min-width:108px;min-height:44px;padding:0 13px;font-size:11px}.dark-studio-theme .customer-contact-panel{width:min(300px,calc(100vw - 20px));padding:14px}} .dark-studio-theme .customer-design-support-note{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0;padding:12px 14px;border:1px solid #4b3b29;border-radius:12px;background:linear-gradient(110deg,#211c16,#17191c 72%)} .dark-studio-theme .customer-design-support-note>div{min-width:0} .dark-studio-theme .customer-design-support-note strong{color:#f1d19d;font-size:12px} .dark-studio-theme .customer-design-support-note p{margin:4px 0 0;color:#bbc0c7;font-size:11px;line-height:1.55} .dark-studio-theme .customer-design-support-note button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-height:36px;padding:0 12px;border:1px solid #8b673b;border-radius:9px;background:#292117;color:#e7bd80;font:600 11px 'DM Sans',sans-serif;cursor:pointer} .dark-studio-theme .customer-design-support-note button:hover{border-color:#e1b16e;background:#35291b} .dark-studio-theme .customer-design-support-note button:focus-visible{outline:2px solid #f4d29c;outline-offset:3px} .dark-studio-theme .customer-contact-channel-prompt{margin:0 0 9px;color:#d2a064;font-size:10px;font-weight:600} @media(max-width:720px){.dark-studio-theme .customer-design-support-note{align-items:flex-start;gap:9px;padding:11px}.dark-studio-theme .customer-design-support-note strong{font-size:11px}.dark-studio-theme .customer-design-support-note p{font-size:10px}.dark-studio-theme .customer-design-support-note button{min-height:34px;padding:0 9px;font-size:10px}} .packaging-section { margin: 24px 0; padding: 24px; } .packaging-section h2 { margin: 4px 0 10px; } .packaging-section > p, .packaging-section > small { color: #aeb3ba; line-height: 1.6; } .packaging-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .packaging-options button { text-align: left; padding: 16px; border: 1px solid #393f47; border-radius: 12px; background: #171b20; color: #eee; } .packaging-options small { display: block; margin-top: 8px; color: #aeb3ba; } .packaging-section button[aria-pressed="true"] { border-color: #d2a064; background: #30271c; } .packaging-colors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .packaging-colors[hidden] { display: none; } .packaging-colors button { display:inline-flex;align-items:center;gap:8px;min-height:44px;padding: 10px 16px; border: 1px solid #393f47; border-radius: 8px; background: #171b20; color: #eee; } .packaging-color-swatch { display:inline-block;flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--packaging-color);border:1px solid #899098;box-shadow:inset 0 0 0 2px #ffffff12; } .packaging-images { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 12px; margin: 12px 0; scroll-snap-type: x mandatory; } .packaging-images a { flex: 0 0 240px; scroll-snap-align: start; color: #d2a064; text-decoration: none; background: #171b20; border-radius: 10px; overflow: hidden; } .packaging-images img { width: 100%; height: 240px; object-fit: contain; background: #fff; display: block; } .packaging-images span { display: block; padding: 10px; font-size: 12px; } @media (max-width: 600px) { .packaging-section { padding: 16px; } .packaging-options { grid-template-columns: 1fr; } .packaging-images a { flex-basis: 210px; } } .packaging-dialog { width: min(760px, calc(100vw - 32px)); max-height: 85dvh; overflow-y: auto; box-sizing: border-box; padding: 28px; border: 1px solid #8c7049; border-radius: 18px; background: #15181c; color: #eee; } .packaging-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); } .packaging-dialog > .modal-corner-close { position: sticky; top: 0; float: right; z-index: 2; } .packaging-dialog > p, .packaging-dialog > small { color: #aeb3ba; line-height: 1.6; } .packaging-dialog > .primary-button { display: block; margin-top: 20px; width: 100%; } .packaging-dialog > .primary-button:disabled { opacity: .45; cursor: not-allowed; } .packaging-dialog button[aria-pressed="true"] { border-color: #d2a064; background: #30271c; } .packaging-home-row { margin: 24px 0; } .packaging-home-row h3 { font-size: 17px; margin: 0 0 10px; } .packaging-home-row h3 small { font-size: 12px; font-weight: 400; color: #aeb3ba; margin-left: 12px; } .packaging-home-rail { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 10px; } .packaging-home-rail > button { background: #202328; border: 1px solid #454a51; border-radius: 8px; color: #d2a064; min-height: 42px; font-size: 24px; cursor: pointer; } .packaging-home-images { margin: 0; scrollbar-width: thin; } .packaging-home-images a { flex: 0 0 calc((100% - 24px) / 3); min-width: 0; } .packaging-home-images img { height: auto; aspect-ratio: 1; } @media(max-width:600px) { .packaging-home-rail { grid-template-columns: 24px minmax(0,1fr) 24px; gap: 5px; } .packaging-home-row h3 small { display: block; margin: 6px 0 0; } .packaging-home-images { gap: 6px; } .packaging-home-images a { flex-basis: calc((100% - 12px) / 3); } .packaging-home-images span { font-size: 10px; padding: 6px; } } .packaging-image-dialog { position: fixed; padding: 48px 12px 12px; width: min(900px, calc(100vw - 24px)); max-height: 94dvh; box-sizing: border-box; overflow: hidden; border: 1px solid #66543c; border-radius: 14px; background: #101214; } .packaging-image-dialog::backdrop { background: #000d; } .packaging-image-dialog > button { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #66543c; background: #202328; color: #d2a064; font-size: 24px; cursor: pointer; z-index: 2; } .packaging-image-dialog img { display: block; width: 100%; max-height: calc(94dvh - 70px); object-fit: contain; } #packaging-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; } #packaging-images h3 { grid-column: 1 / -1; margin: 12px 0 0; font-size: 15px; } #packaging-images a { min-width: 0; } #packaging-images img { height: auto; aspect-ratio: 1; object-fit: contain; background: #29231d; } @media(max-width:600px) { #packaging-images { grid-template-columns: repeat(2,minmax(0,1fr)); } } dialog#packaging-dialog #packaging-images { display: block; } .packaging-material-gallery { margin: 16px 0; } .packaging-material-row { display: flex; gap: 12px; overflow-x: auto; padding: 10px 0; scroll-snap-type: x mandatory; scrollbar-width: thin; } .packaging-material-row a { flex: 0 0 calc((100% - 24px) / 3); scroll-snap-align: start; } .packaging-material-row a { display: block; } .packaging-material-controls { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 8px; } .packaging-material-controls > button { border: 1px solid #66543c; border-radius: 8px; min-height: 44px; background: #202328; color: #d2a064; font-size: 26px; cursor: pointer; } .packaging-material-controls > button:focus-visible { outline: 2px solid #d2a064; outline-offset: 2px; } @media (max-width: 600px) { .packaging-material-controls { grid-template-columns: 28px minmax(0,1fr) 28px; gap: 5px; } } .home-bespoke-note { margin: 0 0 18px; } .preview-bespoke-link { margin: 8px 0 0; font-size: 12px; color: #aeb3ba; } .preview-bespoke-link button { border: 0; background: transparent; color: #d2a064; padding: 4px 6px; cursor: pointer; } .customer-contact-bespoke { padding: 12px 0; margin: 8px 0 12px; border-top: 1px solid #45403a; border-bottom: 1px solid #45403a; } .customer-contact-bespoke strong { color: #d2a064; font-size: 12px; } .customer-contact-bespoke p { color: #aeb3ba; font-size: 11px; line-height: 1.65; margin-bottom: 0; } .dark-studio-theme .customer-published-version[hidden], .dark-studio-theme .customer-contact-channel[hidden] { display: none !important; } .dark-studio-theme #design-entry-panel > .packaging-section { grid-column: 1 / -1; grid-row: 9; min-width: 0; width: 100%; box-sizing: border-box; } .dark-studio-theme #design-entry-panel > .customer-service-guide { grid-column: 1 / -1; grid-row: 7; min-width: 0; padding: 22px; border: 1px solid #34383e; border-radius: 14px; background: #151719; } .customer-service-guide h2 { margin: 0 0 12px; font-size: 24px; } .customer-service-guide h3 { margin: 22px 0 12px; font-size: 17px; } .customer-service-guide p { color: #aeb3ba; font-size: 13px; line-height: 1.75; } .customer-service-guide ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding-left: 24px; } .customer-service-guide details { border-top: 1px solid #34383e; padding: 14px 0; } .customer-service-guide summary { cursor: pointer; line-height: 1.6; } .customer-service-guide summary:focus-visible { outline: 2px solid #d2a064; outline-offset: 4px; } @media(max-width:900px) { .customer-service-guide ol { grid-template-columns: 1fr; gap: 8px; } .dark-studio-theme #design-entry-panel > .customer-service-guide { grid-row: 8; padding: 16px; } } #design-entry-feedback:not([hidden]) { grid-column: 1 / -1; padding: 12px; border: 1px solid #d2a064; border-radius: 8px; color: #f1ede5; } .dark-studio-theme #design-entry-panel > .home-service-summary { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 16px; border: 1px solid #514331; border-radius: 12px; background: #1b1916; } .dark-studio-theme #design-entry-panel.panel { grid-template-areas: "heading heading" "service service" "custom preset" "showcase showcase" "features features" "guide guide"; } .dark-studio-theme #design-entry-panel > .customer-service-guide { grid-row: 11; } .dark-studio-theme #design-entry-panel > .packaging-section { grid-row: 10; } @media(max-width:900px) { .dark-studio-theme #design-entry-panel.panel { grid-template-areas: "heading" "service" "custom" "preset" "showcase" "features" "guide"; } .dark-studio-theme #design-entry-panel > .customer-service-guide { grid-row: 11; } } .home-service-summary p { margin: 0 0 10px; color: #b9bdc4; font-size: 14px; line-height: 1.65; } .home-service-summary strong { color: #eeeae2; } .home-service-summary nav, .customer-site-footer { display: flex; flex-wrap: wrap; gap: 12px 20px; } .home-service-summary a, .customer-site-footer a, .customer-site-footer button { color: #d2a064; text-underline-offset: 4px; } .customer-site-footer { padding: 20px 0; font-size: 13px; } .customer-site-footer[hidden] { display: none; } .customer-site-footer button { border: 0; background: none; font: inherit; cursor: pointer; } .design-file-help, .summary-advanced p { color: #aeb3ba; font-size: 12px; line-height: 1.6; } .summary-advanced { width: 100%; padding: 12px 0; border-top: 1px solid #34383e; } .summary-advanced summary { cursor: pointer; } dialog#packaging-dialog[open] { display: flex; flex-direction: column; overflow: hidden; padding: 44px 24px 0; } .packaging-dialog-body { min-height: 0; overflow-y: auto; padding-bottom: 16px; overscroll-behavior: contain; } .packaging-dialog-body > h2 { margin-top: 0; } .packaging-dialog-body > p, .packaging-dialog-body > small { color: #aeb3ba; line-height: 1.6; } dialog#packaging-dialog > .modal-corner-close { position: absolute; top: 8px; right: 12px; float: none; } .packaging-confirm-bar { flex: 0 0 auto; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #45403a; background: #15181c; } .packaging-confirm-bar p { margin: 0 0 8px; font-size: 12px; color: #d2a064; } .packaging-confirm-bar button { width: 100%; min-height: 44px; } .packaging-confirm-bar button:disabled { opacity: .45; cursor: not-allowed; } .packaging-image-counter { margin: 4px 0 8px; text-align: center; color: #aeb3ba; font-size: 12px; } :is(.home-service-summary a, .customer-site-footer a, .customer-site-footer button, .summary-advanced summary, .packaging-material-row, .packaging-home-images):focus-visible { outline: 2px solid #f0c27e; outline-offset: 3px; } .design-review-views{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .design-review-views button{min-height:44px} .design-review-views button[aria-pressed="true"]{background:#d0a060;color:#16191c;border-color:#e2b575} .design-review-views button:focus-visible{outline:2px solid #e2b575;outline-offset:3px} .design-save-result{margin:16px 0;padding:18px;border:1px solid #b68b50;border-radius:12px;background:#211d17;color:#e9e5df;line-height:1.65;scroll-margin:20px} .design-save-result[hidden]{display:none!important} .design-save-result:focus{outline:2px solid #d0a060;outline-offset:3px} .design-save-result h3{font-size:19px;margin:0 0 10px} .design-save-result p,.design-save-result li{font-size:13px} .design-save-result ol{padding-left:20px} .design-save-file{display:grid;gap:4px;overflow-wrap:anywhere;padding:10px;border-radius:8px;background:#121416} .design-save-file span,.design-save-result>small{font-size:11px;color:#bfc1c3} .design-save-result-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0} .design-save-result-actions>a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none} .design-save-result-actions>a[hidden]{display:none} .design-save-result-actions>button,.design-save-result-actions>a{min-height:44px;white-space:normal;text-align:center} @media(max-width:720px){.design-save-result{padding:14px;margin-bottom:70px}.design-save-result-actions{display:grid;grid-template-columns:1fr}.design-save-result h3{font-size:17px}} @media(max-width:720px) { .dark-studio-theme .customer-picker.is-packaging-step { min-height: 0; height: auto; align-self: start; } } @media(prefers-reduced-motion:reduce) { html, *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media(max-width:600px) { .packaging-material-row a, .packaging-home-images a { flex-basis: 100%; } .packaging-material-row span, .packaging-home-images span { white-space: nowrap; font-size: 12px; } .packaging-home-rail > button, .packaging-material-controls > button { min-height: 44px; } } /* Independent circular back-cover artwork; physical base images can replace this later. */ .back-engraving-dialog { width: min(1040px, calc(100vw - 32px)); max-height: 90dvh; padding: 0; border: 1px solid #a77c42; border-radius: 18px; color: #f2efea; background: #15191d; } .back-engraving-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); } .back-engraving-dialog header, .back-engraving-dialog footer { padding: 20px 24px; display: flex; justify-content: space-between; gap: 20px; align-items: center; } .back-engraving-dialog h2 { margin: 0 0 8px; font-size: 23px; } .back-engraving-dialog p, .back-engraving-dialog small { color: #b9bdc3; line-height: 1.6; } .back-engraving-dialog header p { margin: 0; } .back-engraving-dialog button, .back-editor-actions label { padding: 10px 14px; border: 1px solid #454a50; border-radius: 9px; background: #22282e; color: #f2efea; cursor: pointer; font: inherit; } .back-engraving-dialog button:disabled { opacity: .45; cursor: not-allowed; } .back-engraving-dialog button:focus-visible, .back-editor-actions label:focus-within, [data-back-canvas]:focus-visible { outline: 2px solid #d4a25f; outline-offset: 3px; } .back-engraving-dialog button[aria-pressed="true"] { border-color: #d4a25f; background: #392e20; } .back-engraving-dialog [data-back-save] { background: #c99a5a; color: #141414; font-weight: 700; } .back-editor-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 24px 20px; } .back-editor-preview { min-width: 0; align-self: start; position: sticky; top: 0; } [data-back-canvas] { background: #0f1215; border-radius: 14px; touch-action: none; } [data-back-canvas] svg { width: 100%; display: block; } [data-back-layer] { cursor: grab; } [data-back-layer].is-selected { filter: none; } .back-editor-tools { min-width: 0; } .back-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .back-editor-actions input[type="file"] { display: block; width: 100%; max-width: 250px; margin-top: 8px; font-size: 12px; } [data-back-layers] { display: grid; gap: 6px; margin: 16px 0; } [data-back-layers] button { text-align: left; overflow-wrap: anywhere; } [data-back-properties] label { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 14px 0; } [data-back-properties] input[type="text"], [data-back-properties] textarea, [data-back-properties] select { width: 100%; box-sizing: border-box; padding: 10px; font: inherit; background: #f7f7f7; color: #17191c; border-radius: 7px; } [data-back-properties] textarea { resize: vertical; min-height: 100px; line-height: 1.5; } [data-back-properties] input[type="range"] { width: 100%; accent-color: #d4a25f; } .back-engraving-dialog footer { position: sticky; bottom: 0; border-top: 1px solid #41454a; background: #15191d; } .back-engraving-dialog footer div { display: flex; gap: 8px; flex-shrink: 0; } #back-engraving-design-preview { max-width: 260px; margin: 12px auto; } #back-engraving-design-preview svg { width: 100%; display: block; } .back-engraving-legacy-fields[hidden] { display: none !important; } [data-custom-finish-guide="back"][hidden] { display: none !important; } @media (max-width: 720px) { .back-engraving-dialog { width: calc(100vw - 16px); max-height: 94dvh; } .back-editor-layout { grid-template-columns: 1fr; padding: 0 16px 16px; gap: 12px; } .back-editor-preview { position: static; } [data-back-canvas] { max-width: 320px; margin: auto; } .back-engraving-dialog header, .back-engraving-dialog footer { padding: 16px; } .back-engraving-dialog footer { flex-direction: column; align-items: stretch; gap: 10px; } .back-engraving-dialog footer div { justify-content: flex-end; } } /* Small-area engraving: one centred mark, separate transactional dialog. */ .dial-editor-tool-tabs, .dial-preview-toggle { display: none; } @media (max-width: 850px) { .dark-studio-theme .custom-dial-editor-header p:last-child { display: none; } .dark-studio-theme .custom-dial-editor-body { grid-template-rows: minmax(145px, 24dvh) minmax(0, 1fr); } .dark-studio-theme .custom-dial-editor-preview-stage { width: 100%; } .dark-studio-theme .custom-dial-editor-preview-column { grid-template-rows: auto minmax(0, 1fr); } .dark-studio-theme .custom-dial-editor-preview-status { display: none; } .dark-studio-theme .dial-preview-toggle { display: inline-block; padding: 7px 10px; min-height: 36px; margin: 5px 0 0; border: 1px solid #8e6939; border-radius: 8px; background: #30271b; color: #f3d29b; } .dark-studio-theme .custom-dial-editor-tools-column { grid-template-rows: auto auto minmax(0, 1fr); } .dark-studio-theme .dial-editor-tool-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .dial-editor-tool-tabs button { min-height: 42px; padding: 5px 2px; border: 1px solid #4c535d; border-radius: 7px; background: #242a31; color: #edf0f2; font: inherit; font-size: 12px; } .dial-editor-tool-tabs button[aria-pressed="true"] { background: #3a2c1c; color: #f5d49f; border-color: #d4a25f; } .dial-editor-tool-tabs button:focus-visible, .dial-preview-toggle:focus-visible { outline: 2px solid #edbd79; outline-offset: 2px; } .dark-studio-theme .custom-dial-editor-create-tools { padding: 0 0 6px; } .dark-studio-theme .custom-dial-editor-create-tools > div { display: none; } .dark-studio-theme .custom-dial-editor-footer small { font-size: 10px; } [data-preview-collapsed="true"] .custom-dial-editor-preview-column { display: none !important; } .dark-studio-theme [data-preview-collapsed="true"] .custom-dial-editor-body { grid-template-rows: minmax(0, 1fr); } #custom-dial-editor-modal:not([data-editor-tool="base"]) .custom-dial-editor-existing-library, #custom-dial-editor-modal:not([data-editor-tool="base"]) .custom-dial-uploader-heading, #custom-dial-editor-modal:not([data-editor-tool="base"]) #custom-dial-uploader-content > :not(#custom-dial-artwork-panel):not(#custom-dial-controls), #custom-dial-editor-modal[data-editor-tool="base"] .dial-artwork-panel, #custom-dial-editor-modal[data-editor-tool="base"] #dial-options-panel, #custom-dial-editor-modal[data-editor-tool="text"] #custom-dial-controls, #custom-dial-editor-modal[data-editor-tool="logo"] #custom-dial-controls, #custom-dial-editor-modal[data-editor-tool="text"] #dial-options-panel, #custom-dial-editor-modal[data-editor-tool="logo"] #dial-options-panel, #custom-dial-editor-modal:not([data-editor-tool="options"]) .dial-artwork-field, #custom-dial-editor-modal[data-editor-tool="options"] #custom-dial-controls > :not(.custom-dial-tick-label):not(.printed-tick-palette):not(.minute-track-background-panel), #custom-dial-editor-modal[data-editor-tool="options"] .dial-artwork-layers, #custom-dial-editor-modal[data-editor-tool="text"] [data-logo-layer-card], #custom-dial-editor-modal[data-editor-tool="logo"] [data-text-layer-card] { display: none !important; } } .small-engraving-dialog { width: min(940px, calc(100vw - 40px)); max-height: 90dvh; padding: 0; color: #edf0f2; background: #171b20; border: 1px solid #b58b53; border-radius: 18px; box-shadow: 0 24px 90px #0009; } .small-engraving-dialog::backdrop { background: #000b; backdrop-filter: blur(4px); } .small-engraving-dialog header { display: flex; justify-content: space-between; gap: 16px; padding: 22px 26px 14px; } .small-engraving-dialog h2 { font-size: 24px; margin: 3px 0 8px; } .small-engraving-dialog p { font-size: 13px; line-height: 1.65; color: #b6bbc2; margin: 8px 0; } .small-engraving-dialog .eyebrow { font-size: 10px; letter-spacing: .15em; color: #d4a25f; } .small-engraving-dialog button, .small-engraving-dialog select, .small-engraving-dialog input[type="text"] { font: inherit; color: #edf0f2; background: #242a31; border: 1px solid #4c535d; border-radius: 9px; padding: 10px 12px; } .small-engraving-dialog button { cursor: pointer; min-height: 44px; } .small-engraving-dialog button:disabled { opacity: .45; cursor: not-allowed; } .small-engraving-dialog :focus-visible { outline: 2px solid #edbd79; outline-offset: 3px; } .small-engraving-dialog [data-small-close] { flex: none; align-self: flex-start; font-size: 20px; } .small-engraving-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 0 26px 22px; } .small-engraving-visuals figure { margin: 0; padding: 12px; border-radius: 12px; background: #101215; } .small-engraving-visuals svg { display: block; width: 100%; max-height: 300px; } .small-engraving-visuals figcaption { text-align: center; color: #b6bbc2; font-size: 11px; margin: 8px 0 2px; } .small-engraving-visuals .small-engraving-overview { margin-top: 12px; } .small-engraving-overview svg { max-height: 120px; } .small-engraving-tools { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .small-engraving-tools fieldset { border: 0; padding: 0; margin: 0; } .small-engraving-tools legend { padding: 0 0 10px; font-size: 14px; } .small-engraving-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .small-engraving-modes label { cursor: pointer; position: relative; } .small-engraving-modes input { position: absolute; opacity: 0; width: 1px; height: 1px; } .small-engraving-modes span { display: grid; place-items: center; min-height: 44px; padding: 5px; font-size: 13px; border: 1px solid #49515b; border-radius: 9px; background: #242a31; } .small-engraving-modes input:checked + span { background: #3a2c1c; border-color: #d4a25f; color: #f5d49f; } [data-small-faces] .small-engraving-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-small-face] { min-height: 44px; border: 1px solid #49515b; border-radius: 9px; background: #242a31; color: inherit; } [data-small-face][aria-pressed="true"] { background: #3a2c1c; border-color: #d4a25f; color: #f5d49f; } [data-small-face]:focus-visible { outline: 2px solid #edbd79; outline-offset: 3px; } .small-engraving-modes input:focus-visible + span { outline: 2px solid #edbd79; outline-offset: 3px; } .small-engraving-tools [hidden] { display: none !important; } .small-engraving-tools label:not(.small-engraving-modes label) { display: block; font-size: 13px; } .small-engraving-tools input[type="text"], .small-engraving-tools select { display: block; width: 100%; box-sizing: border-box; margin: 8px 0 16px; min-height: 44px; } .small-engraving-tools input[type="range"] { display: block; width: 100%; accent-color: #d4a25f; margin: 16px 0; } .small-engraving-tools small { color: #b6bbc2; font-size: 11px; display: block; line-height: 1.7; overflow-wrap: anywhere; } .small-engraving-tools input[type="file"] { display: block; max-width: 100%; margin: 12px 0; font-size: 12px; } .small-engraving-tools output { float: right; color: #e5bc83; } .small-engraving-tools [data-small-center] { width: 100%; margin-bottom: 6px; font-size: 12px; } .small-engraving-tools .small-engraving-warning { border: 1px solid #8d6a38; border-radius: 8px; padding: 10px; color: #edc991; background: #30271b; } .small-engraving-tools [data-small-error] { color: #f0b4a6; } .small-engraving-dialog footer { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; background: #171b20; border-top: 1px solid #3a414b; padding: 14px 26px; } .small-engraving-dialog footer [hidden] { display: none !important; } .small-engraving-dialog [data-small-discard] { width: 100%; text-align: right; } .small-engraving-dialog [data-small-discard] p { color: #edc991; margin: 0 0 10px; } .small-engraving-dialog [data-small-discard-confirm] { margin-left: 8px; } .small-engraving-dialog [data-small-next] { background: #d1a064; color: #20190f; border-color: #d1a064; } .clasp-material-preview { background: #101215; border-radius: 10px; padding: 10px; } .clasp-material-preview svg { width: 100%; max-height: 180px; display: block; } .small-engraving-card-note { font-size: 12px; color: #b6bbc2; line-height: 1.7; } .dark-studio-theme .custom-finish-section-title #crown-engraving-status, .dark-studio-theme .custom-finish-section-title #clasp-engraving-status { display: inline-block !important; color: #edc991; font-size: 11px; } @media (max-width: 680px) { .small-engraving-dialog { width: calc(100vw - 16px); max-height: 94dvh; } .small-engraving-dialog header { padding: 16px; } .small-engraving-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 16px 16px; } .small-engraving-visuals svg { max-height: 220px; } .small-engraving-overview svg { max-height: 90px; } .small-engraving-dialog footer { padding: 12px 16px; } .small-engraving-dialog footer button { flex: 1; } .small-engraving-dialog footer [data-small-next] { flex-basis: 100%; } } /* Independent rotor choice: only enabled for transparent casebacks. */ .rotor-picker{margin-top:16px;padding:14px;border:1px solid #8a693e;border-radius:12px;background:#201d18;display:grid;gap:10px} .rotor-picker[hidden]{display:none} .back-upload-feedback{padding:12px;margin:0 0 12px;border:1px solid #d68a76;border-radius:9px;background:#3a2420;color:#ffe0d4} .back-upload-feedback[data-state="status"]{border-color:#a2814e;background:#29251d;color:#ead2ab} .back-upload-feedback[hidden],.back-upload-help section[hidden]{display:none} .back-upload-feedback p{margin:6px 0;font-size:14px;line-height:1.6} .back-upload-feedback:focus{outline:2px solid #e6b36b;outline-offset:2px} .back-upload-help{padding:10px 0 14px;font-size:12px;line-height:1.7;color:#cbc7bf} .back-upload-help p{margin:0 0 8px} .back-engraving-dialog [data-back-help],.small-engraving-dialog [data-small-help]{background:#e4b878;color:#21170c;border:1px solid #f2cd96;font-weight:700;min-height:44px;padding:11px 16px;cursor:pointer;box-shadow:0 2px 6px #0003;transition:background .15s,box-shadow .15s} .back-engraving-dialog [data-back-help]:hover,.small-engraving-dialog [data-small-help]:hover{background:#f2ce98;box-shadow:0 3px 9px #0004} .back-engraving-dialog [data-back-help]:focus-visible,.small-engraving-dialog [data-small-help]:focus-visible{outline:2px solid #fff0d6;outline-offset:3px} .back-engraving-dialog [data-back-help]:active,.small-engraving-dialog [data-small-help]:active{background:#d7a45e} .back-upload-help section{margin-top:10px;padding:12px;border:1px solid #8a693e;border-radius:8px;background:#24211c} [data-back-help-links]{display:flex;flex-wrap:wrap;gap:10px} [data-back-help-links] a{display:inline-block;padding:8px 12px;border:1px solid #b78c54;border-radius:7px;color:#f2cd96;text-decoration:none} .metal-back-engraving-shortcut{display:grid;gap:10px;padding:14px;margin-top:4px;border:1px solid #8a693e;border-radius:12px;background:#201d18} .metal-back-engraving-shortcut[hidden]{display:none} .metal-back-engraving-shortcut>strong{color:#e2b675} .metal-back-engraving-shortcut p,.metal-back-engraving-shortcut small{margin:0;color:#c8c5be;font-size:12px;line-height:1.6} .metal-back-engraving-shortcut .primary-button,.metal-back-engraving-shortcut .secondary-button{margin:0;min-height:42px;width:100%} .back-cover-picker-examples[hidden]{display:none!important} .rotor-picker>strong{font-weight:700;color:#e2b675} .rotor-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .rotor-picker .rotor-choice-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;padding:9px;border:1px solid #42464b;border-radius:10px;background:#171a1d;color:#f4f1e9;text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s} .rotor-picker .rotor-choice-card:hover{border-color:#bd9157} .rotor-picker .rotor-choice-card.is-selected{border-color:#dda954;background:#352919;box-shadow:0 0 0 2px #b98b4a45} .rotor-picker .rotor-choice-card:focus-visible{outline:2px solid #f2c77f;outline-offset:3px} .rotor-picker .rotor-choice-card:disabled{opacity:.55;cursor:not-allowed} .rotor-choice-thumbnail{display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border-radius:7px;background:#101315;color:#b9b5ad;font-size:11px} .rotor-choice-thumbnail img{display:block;width:100%;height:100%;object-fit:contain;padding:7px} .rotor-choice-card strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere} .rotor-choice-card small{font-size:10px;color:#bfb7a9} .rotor-choice-mark{position:absolute;right:5px;top:5px;padding:3px 6px;border-radius:10px;background:#d5a15f;color:#1b160f;font-size:10px;font-weight:700;visibility:hidden} .rotor-choice-card.is-selected .rotor-choice-mark{visibility:visible} .rotor-colors{margin-top:12px} .rotor-choice-grid>.rotor-colors{grid-column:1/-1;margin-top:0;min-width:0} .rotor-colors[hidden]{display:none!important} .rotor-color-grid{margin-top:8px} .rotor-color-card:not(.is-selected)>b{visibility:hidden} .rotor-picker p{margin:0;color:#c8c5be;font-size:12px;line-height:1.6} .rotor-picker button{min-height:40px;border:1px solid #ba8c4e;border-radius:8px;background:#32291d;color:#f4d6a6} .printed-tick-palette{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border:1px solid #3b414b;border-radius:8px;background:#151b24} .printed-tick-palette[hidden]{display:none!important} .printed-tick-palette label{display:flex;align-items:center;gap:10px;color:#ece6d9;font-size:12px} .printed-tick-palette input[type=color]{width:112px;height:42px;cursor:pointer;border:1px solid #d2a25e;border-radius:7px;padding:3px;background:transparent} .printed-tick-palette>span{font:11px monospace;color:#c9ced5} .printed-tick-palette>small{flex-basis:100%;color:#bfc5ce;font-size:11px} #custom-dial-controls .custom-dial-tick-label{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;font-size:13px;line-height:1.5;margin-top:8px} #custom-dial-controls .custom-dial-tick-label select{width:100%;min-width:0;min-height:46px;margin-left:0;padding:11px 42px 11px 14px;font-size:15px;line-height:1.5;border-radius:8px;border:1px solid #8c704c;background-color:#303b49;color:#fff;box-shadow:inset 0 1px 0 #ffffff12,0 2px 5px #0003;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m4 6 5 5 5-5' fill='none' stroke='%23e9bc79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;cursor:pointer;transition:background-color .15s,border-color .15s} #custom-dial-controls .custom-dial-tick-label select:hover{background-color:#3b495a;border-color:#d2a25e} #custom-dial-controls .custom-dial-tick-label select:disabled{background-color:#242b34;color:#939aa4;border-color:#454d58;cursor:not-allowed;box-shadow:none} #custom-dial-controls .custom-dial-tick-label select option{background:#263140;color:#fff} #custom-dial-controls .custom-dial-tick-label select:focus-visible{outline:2px solid #d2a25e;outline-offset:2px} .dark-studio-theme #custom-dial-editor-modal :is(button,.custom-dial-file-button), .dark-studio-theme #custom-dial-editor-modal #custom-dial-controls .custom-dial-tick-label select{background-color:#34281b;border-color:#8e6939;color:#f3d29b;box-shadow:none} .dark-studio-theme #custom-dial-editor-modal :is(button,.custom-dial-file-button):hover:not(:disabled), .dark-studio-theme #custom-dial-editor-modal #custom-dial-controls .custom-dial-tick-label select:hover:not(:disabled){background-color:#49351f;border-color:#e0b77f;color:#fff0d0} .dark-studio-theme #custom-dial-editor-modal :is(button,.custom-dial-file-button):focus-visible{outline:2px solid #d2a064;outline-offset:2px} .dark-studio-theme #custom-dial-editor-modal button:is(.is-selected,[aria-pressed=true]){background-color:#49351f;border-color:#e0b77f;box-shadow:inset 0 0 0 1px #d2a064} .dark-studio-theme #custom-dial-editor-modal button:disabled, .dark-studio-theme #custom-dial-editor-modal #custom-dial-controls .custom-dial-tick-label select:disabled{background-color:#25211c;border-color:#51483c;color:#8f877c;cursor:not-allowed;box-shadow:none} .dark-studio-theme #custom-dial-editor-modal #custom-dial-remove{color:#f0b3a6} .dark-studio-theme .custom-dial-editor-preview-column{display:flex;flex-direction:column;min-height:0} .dark-studio-theme .custom-dial-editor-preview-frame{flex:1;min-height:200px} .dark-studio-theme .custom-dial-editor-tools-column{display:flex;flex-direction:column;gap:12px} .dark-studio-theme .custom-dial-editor-tools-column>:not(.custom-dial-editor-controls){flex:none} .dark-studio-theme .custom-dial-editor-controls{flex:1;min-height:0} .dial-assistance-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px} .dial-assistance-toolbar button,.dial-layer-alignment button,#dial-design-confirm button{border:1px solid;border-radius:8px;padding:9px 12px;font-size:12px;cursor:pointer;min-height:36px} .dial-guide-note{font-size:11px;color:#b5b8bf;line-height:1.5;margin:0 0 8px} .dial-layer-alignment{display:flex;flex-wrap:wrap;gap:6px;grid-column:1/-1;min-width:0} .dark-studio-theme .dial-artwork-move-pad .dial-layer-alignment{grid-row:4;max-width:none} .dark-studio-theme .dial-artwork-move-pad .dial-layer-alignment button{font-size:11px;min-width:0;flex:1;padding:8px 3px;line-height:1.4} .dial-artwork-move-pad:has(.dial-layer-alignment){grid-template-rows:auto auto auto} .dial-image-clarity{margin:0 0 12px;padding:12px;border:1px solid #5b503c;background:#27231c;color:#ddd2b8;border-radius:10px;font-size:12px;line-height:1.6} .dial-image-clarity[data-level=low]{border-color:#b78049;color:#f4cf9c} .dial-design-guides{position:absolute;pointer-events:none;z-index:999} .dial-design-guides span{position:absolute;display:block;pointer-events:none} .dial-guide-circle{inset:9%;border:1.5px dashed #e9bb75b3;border-radius:50%} .dial-guide-horizontal{left:0;right:0;top:50%;border-top:1px dashed #e9bb7599} .dial-guide-vertical{top:0;bottom:0;left:50%;border-left:1px dashed #e9bb7599} #dial-design-confirm{padding:20px;border:1px solid #8e6939;border-radius:12px;color:#d6c8b5;background:#211b14;line-height:1.7;font-size:13px} #dial-design-confirm h3{margin-top:0;color:#f3d29b} #dial-design-confirm>div{display:flex;gap:12px;flex-wrap:wrap} #custom-dial-editor-modal[data-confirming=true] .custom-dial-editor-tools-column, #custom-dial-editor-modal[data-confirming=true] .custom-dial-editor-footer, #custom-dial-editor-modal[data-confirming=true] .dial-hands-tools, #custom-dial-editor-modal[data-confirming=true] :is(.dial-assistance-toolbar,.dial-guide-note,.custom-dial-editor-zoom-tools,.dial-preview-toggle){display:none!important} #custom-dial-editor-modal[data-confirming=true] .custom-dial-editor-body{grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);grid-template-rows:minmax(0,1fr);min-height:0;flex:1;gap:24px} #custom-dial-editor-modal[data-confirming=true] .custom-dial-editor-preview-column{width:100%;height:100%;min-height:240px} #custom-dial-editor-modal[data-confirming=true] #dial-design-confirm{margin:0;min-height:0;overflow-y:auto;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:26px} #custom-dial-editor-modal[data-confirming=true] #dial-design-confirm>div{margin-top:18px} #custom-dial-editor-modal[data-confirming=true] #dial-design-confirm button{flex:1;min-height:44px} #custom-dial-editor-modal[data-confirming=true] .custom-dial-editor-dialog{grid-template-rows:auto minmax(0,1fr)} @media(max-width:850px){ .dark-studio-theme .custom-dial-editor-body{grid-template-rows:minmax(240px,38dvh) minmax(0,1fr)} .dark-studio-theme .custom-dial-editor-preview-frame{min-height:90px} .dial-assistance-toolbar{gap:6px;margin-bottom:0} .dial-assistance-toolbar button{padding:7px 9px;font-size:11px} .dial-guide-note{font-size:10px;margin:0;line-height:1.3} .dial-layer-alignment button{padding:8px;font-size:11px} #dial-design-confirm{padding:12px;font-size:12px;max-height:36dvh;overflow-y:auto} #custom-dial-editor-modal[data-confirming=true] .custom-dial-editor-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,1fr) minmax(0,auto);gap:10px} #custom-dial-editor-modal[data-confirming=true] #dial-design-confirm{max-height:36dvh;padding:12px;display:block} #custom-dial-editor-modal[data-confirming=true] .custom-dial-editor-preview-column{min-height:0} } /* Dial-only polish: reference warnings never block a customer's design. */ .dial-design-warnings{padding:12px 14px;border:1px solid #a47c45;border-radius:10px;color:#f3d29b;background:#30251a;font-size:12px;line-height:1.6;margin:0 0 10px;overflow-wrap:anywhere} .dial-design-warnings[hidden]{display:none} .dial-image-fit,.dial-hands-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .dial-image-fit small{flex-basis:100%;line-height:1.5} .dial-hands-tools small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .dial-image-fit button,.dial-hands-tools button{min-height:40px;padding:8px 12px;border:1px solid #8e6939;border-radius:8px;cursor:pointer} .dial-hands-tools button[aria-pressed=true]{outline:2px solid #d2a064;outline-offset:1px} .dial-hands-tools button:disabled{opacity:.65;cursor:not-allowed} .dial-typography-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0} .dial-typography-row label{display:grid;gap:6px;font-size:12px;min-width:0} .dial-typography-row :is(input,select){width:100%;min-width:0;min-height:44px;border:1px solid #8e6939;border-radius:8px;padding:8px;color:#f3d29b;background:#34281b} @media(max-width:850px){ .dark-studio-theme .custom-dial-editor-modal{height:var(--dial-editor-viewport-height,100dvh);top:var(--dial-editor-viewport-top,0);bottom:auto;padding:6px} .dark-studio-theme .custom-dial-editor-dialog{height:calc(var(--dial-editor-viewport-height,100dvh) - 12px);max-height:100%;padding:12px;gap:10px} .dark-studio-theme .custom-dial-editor-heading p{font-size:11px;line-height:1.5} .dark-studio-theme .custom-dial-editor-tools-column{overflow-y:auto;overscroll-behavior:contain;scroll-padding:16px;min-width:0} .dark-studio-theme .custom-dial-editor-controls{overflow:visible;flex:none} #custom-dial-editor-modal :is(button,select,input:not([type=range]):not([type=color])){min-height:44px} #custom-dial-editor-modal input:not([type=range]):not([type=color]),#custom-dial-editor-modal select{font-size:16px;max-width:100%} #custom-dial-editor-modal input[type=color]{min-height:44px;min-width:60px} #custom-dial-editor-modal .dial-guide-note{display:none} #custom-dial-editor-modal .dial-assistance-toolbar{flex-wrap:nowrap;overflow-x:auto;flex-shrink:0} #custom-dial-editor-modal .dial-assistance-toolbar button{white-space:nowrap} #custom-dial-editor-modal .dial-hands-tools small{display:none} #custom-dial-editor-modal .dial-hands-tools{flex-shrink:0} #custom-dial-editor-modal .custom-dial-editor-preview-frame{min-height:70px} #custom-dial-editor-modal[data-keyboard-open=true] .custom-dial-editor-body{grid-template-rows:minmax(100px,28%) minmax(0,1fr)} #custom-dial-editor-modal[data-keyboard-open=true] :is(.custom-dial-editor-zoom-tools,.dial-assistance-toolbar,.dial-hands-tools,.custom-dial-editor-preview-status){display:none} } @media(max-width:850px) and (max-height:650px){ #custom-dial-editor-modal:not([data-confirming=true]) .custom-dial-editor-body{grid-template-rows:minmax(110px,35%) minmax(0,1fr)} #custom-dial-editor-modal:not([data-confirming=true]) :is(.custom-dial-editor-zoom-tools,.dial-assistance-toolbar,.custom-dial-editor-preview-status){display:none} } /* Review and details share the same explicit draft / missing-part status. */ .dark-studio-theme .design-review-status{padding:14px;border:1px solid #685039;border-radius:12px;background:#282119;color:#eee6da;margin:12px 0;min-width:0} .dark-studio-theme .design-review-status>strong{display:block;color:#edc18a;font-size:15px;line-height:1.5} .dark-studio-theme .design-review-status p{font-size:13px;line-height:1.65;color:#e0d5c6;margin:8px 0} .dark-studio-theme .design-review-status small{display:block;font-size:12px;line-height:1.6;color:#c9c2b9;white-space:normal} .dark-studio-theme .design-review-status ul{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px} .dark-studio-theme .design-review-status li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;line-height:1.5;padding-top:8px;border-top:1px solid #514333;min-width:0} .dark-studio-theme .design-review-status li span{min-width:0;overflow-wrap:anywhere} .dark-studio-theme .design-review-status button{flex-shrink:0;min-height:44px;max-width:60%;padding:8px 12px;border:1px solid #967145;border-radius:8px;background:#3b2c1c;color:#f2cf9b;font:600 13px/1.5 'DM Sans',sans-serif;cursor:pointer;white-space:normal} .dark-studio-theme .design-review-status button:hover{background:#503b23;border-color:#e2b575} .dark-studio-theme .design-review-status button:focus-visible{outline:2px solid #e2b575;outline-offset:3px} .dark-studio-theme :is(#summary-list,#save-design-summary)>.design-review-status{grid-column:1/-1} .dark-studio-theme :is(#customer-summary,#save-design-summary) .summary-row>div{min-width:0;flex:1} .dark-studio-theme :is(#customer-summary,#save-design-summary) .summary-row strong{font-size:15px;line-height:1.55;color:#f0ede6} .dark-studio-theme :is(#customer-summary,#save-design-summary) .summary-row small{font:400 13px/1.65 'DM Sans',sans-serif;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;color:#c7cbd0;margin-top:5px} .dark-studio-theme :is(#customer-summary,#save-design-summary) .summary-row b{font:600 13px/1.55 'DM Sans',sans-serif;white-space:nowrap;color:#e2b575} .dark-studio-theme #customer-summary :is(.customer-order-policy-note,.design-file-help,.summary-advanced,.summary-advanced p,.summary-advanced summary,.action-feedback){font-size:13px;line-height:1.7;color:#c7cbd0} .dark-studio-theme #customer-summary .summary-actions button{min-height:44px;font-size:14px} @media(max-width:480px){ .dark-studio-theme .design-review-status li{align-items:stretch;flex-direction:column;gap:6px} .dark-studio-theme .design-review-status button{max-width:100%;width:100%} } /* Audit fixes: visible upload feedback and explicit primary entry. */ .dark-studio-theme #design-entry-panel .design-entry-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px} .dark-studio-theme .home-start-design{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:4px 0 18px;padding:12px 24px;border:1px solid #d2a064;border-radius:10px;background:#d2a064;color:#17120d;font:600 16px/1.4 'DM Sans',sans-serif;cursor:pointer} .dark-studio-theme .home-start-design:disabled{opacity:.5;cursor:wait} .dark-studio-theme .home-start-design:focus-visible{outline:2px solid #fff0d0;outline-offset:3px} .dark-studio-theme #custom-dial-file-requirements{font-size:12px;line-height:1.6;color:#bdc3cb} .dark-studio-theme .custom-dial-upload-feedback{padding:10px 12px;border:1px solid #6d6148;border-radius:8px;background:#29251d;color:#f1d7a8;font:13px/1.6 'DM Sans',sans-serif;overflow-wrap:anywhere} .dark-studio-theme .custom-dial-upload-feedback[data-state="error"]{border-color:#be7770;background:#352322;color:#ffd1c8} .dark-studio-theme .custom-dial-upload-feedback[hidden]{display:none!important} @media(max-width:720px){ .dark-studio-theme .home-start-design{width:100%} .dark-studio-theme .preview-action,.dark-studio-theme .customer-preview.is-mobile-sticky .preview-action{min-height:44px} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-action-rail{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(44px,1fr));width:104px;align-content:center} .dark-studio-theme .customer-preview.is-mobile-sticky .preview-stage-row{grid-template-columns:minmax(0,1fr) 104px} .dark-studio-theme .watch-detail-zoom-tools{flex-wrap:wrap} .dark-studio-theme .watch-detail-zoom-tools button{min-width:44px;min-height:44px} .dark-studio-theme .watch-detail-zoom-tools input{min-height:44px} } /* Case capabilities must override the toggle's explicit grid display. */ .dial-option-toggle[hidden] { display: none !important; } .dark-studio-theme .customer-picker, #custom-dial-editor-controls { /* Rebuilt choice rows must not become browser scroll anchors. Explicit step navigation and keyboard focus still scroll normally. */ overflow-anchor: none; } /* Engraving ink is a separate selection from the metal finish. */ .engraving-ink-control { display: grid; gap: 8px; margin: 12px 0; color: #f4dfbb; } .engraving-ink-control[hidden] { display: none; } .engraving-ink-control select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #a57b40; border-radius: 9px; background: #352819; color: #ffe0aa; font: inherit; } .engraving-ink-control small { color: #b6bbc3; line-height: 1.5; } .strap-clasp-picker { margin-top: 20px; padding: 16px; border: 1px solid #806039; border-radius: 12px; background: #191c20; } .strap-clasp-picker h3 { margin: 0 0 8px; color: #efd3a5; } .strap-clasp-picker p, .strap-clasp-picker > small { color: #bfc4cb; line-height: 1.6; } .strap-clasp-style-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; } .strap-clasp-choice { display: grid; justify-items: center; gap: 8px; padding: 10px; border: 1px solid #454950; border-radius: 10px; background: #111417; color: #eee; cursor: pointer; } .strap-clasp-choice.is-selected { border-color: #d5a15f; box-shadow: inset 0 0 0 1px #d5a15f; background: #30271d; } .strap-clasp-choice:focus-visible { outline: 2px solid #f5d29b; outline-offset: 3px; } .strap-clasp-thumbnail { width: 100%; height: 125px; display: grid; place-items: center; } .strap-clasp-thumbnail svg { width: 100%; height: 100%; } .strap-clasp-picker .asset-color-choices { margin-bottom: 12px; } .personalization-other-parts{display:grid;gap:7px}.personalization-part-shortcut{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.personalization-part-shortcut>div{display:grid;flex:1 1 auto;gap:4px;min-width:0}.personalization-part-shortcut strong{font-size:11px}.personalization-part-shortcut small{color:var(--muted);font-size:9px;line-height:1.4;overflow-wrap:anywhere}.personalization-part-shortcut button{flex:0 0 auto;width:auto;padding:7px 9px;border:1px solid var(--accent);border-radius:7px;background:transparent;color:var(--accent);font:600 9px 'DM Mono',monospace;cursor:pointer;white-space:nowrap}.personalization-part-shortcut button:hover{background:var(--accent);color:#fff}.dark-studio-theme .personalization-part-shortcut{border-color:#363a40;background:#191b1e}.dark-studio-theme .personalization-part-shortcut strong{color:#eeeae2}.dark-studio-theme .personalization-part-shortcut small{color:#aeb2b9}.dark-studio-theme .personalization-part-shortcut button{width:auto;border-color:#725533;background:#241d16;color:#e6bd82}.dark-studio-theme .personalization-part-shortcut button:hover{border-color:#d2a064;background:#d2a064;color:#17120d}@media(max-width:720px){.personalization-part-shortcut{align-items:flex-start;flex-wrap:wrap}.personalization-part-shortcut button{margin-left:auto}} .personalization-detail-nav[hidden]{display:none!important} .personalization-part-shortcut{min-height:78px;padding:12px} .personalization-part-thumbnail{display:flex;align-items:center;justify-content:center;flex:0 0 62px;width:62px;height:62px;overflow:hidden;border-radius:8px;background:#101215;color:#aeb2b9;font-size:10px} .personalization-part-thumbnail>svg,.personalization-part-thumbnail>img{display:block;width:100%;height:100%;object-fit:contain} .customer-side-view.customer-engraving-overview{display:flex;flex-direction:column;justify-content:center;gap:24px;color:#eeeae2} .engraving-overview-heading{display:grid;gap:10px;text-align:center}.engraving-overview-heading strong{font-size:28px}.engraving-overview-heading span{font-size:16px;color:#aeb2b9} .engraving-overview-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%} .engraving-overview-part{display:flex;flex-direction:column;margin:0;border:1px solid #363a40;border-radius:16px;overflow:hidden;background:#171a1e} .engraving-overview-part:first-child{grid-column:1/-1} .engraving-overview-art{display:flex;align-items:center;justify-content:center;height:210px;padding:8px;color:#aeb2b9;font-size:16px} .engraving-overview-part:first-child .engraving-overview-art{height:260px} .engraving-overview-art>svg,.engraving-overview-art>img{display:block;width:100%;height:100%;object-fit:contain} .engraving-overview-part figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid #363a40;font-size:18px}.engraving-overview-part figcaption span{font-size:13px;color:#d2a064} @media(max-width:1100px){.personalization-part-shortcut{flex-wrap:wrap}.personalization-part-shortcut button{margin-left:auto!important}.personalization-part-thumbnail{flex-basis:54px;width:54px;height:54px}} .personalization-part-shortcut strong{font-size:13px} .personalization-part-shortcut small{font-size:11px;line-height:1.5} .personalization-part-shortcut button,.dark-studio-theme .personalization-part-shortcut button{width:140px;min-height:40px;margin:0;border-color:#d2a064;background:#d2a064;color:#17120d;font-size:11px} .personalization-part-shortcut button:hover,.dark-studio-theme .personalization-part-shortcut button:hover{background:#e0b77f;border-color:#e0b77f;color:#17120d} .personalization-part-shortcut button:disabled,.dark-studio-theme .personalization-part-shortcut button:disabled{border-color:#41454b;background:#25282d;color:#9da1a8;cursor:not-allowed} .small-engraving-discard-dialog,.dark-studio-theme .small-engraving-discard-dialog{position:fixed;inset:0;margin:auto;height:fit-content;max-width:calc(100vw - 40px);color:var(--ink);box-sizing:border-box} .small-engraving-discard-dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)} .small-engraving-discard-dialog h2{color:var(--accent);font-family:'DM Sans',sans-serif;font-size:23px} .small-engraving-discard-dialog .customer-confirm-actions button{min-height:42px} /* Keep engraving previews visible while only the tools scroll. */ .small-engraving-dialog[open],.back-engraving-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:min(900px,90dvh);overflow:hidden} .small-engraving-dialog>header,.back-engraving-dialog>header{min-height:0} .small-engraving-dialog>footer,.back-engraving-dialog>footer{position:static;min-height:0} .small-engraving-layout,.back-editor-layout{min-height:0;overflow:hidden;align-items:stretch} .small-engraving-tools,.back-editor-tools{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:8px} .small-engraving-visuals{min-height:0;min-width:0;display:grid;gap:10px;grid-template-rows:minmax(0,1.6fr) minmax(0,1fr) auto} .small-engraving-visuals figure{min-height:0;display:flex;flex-direction:column;overflow:hidden} .small-engraving-visuals figure>div{flex:1;min-height:0} .small-engraving-visuals svg{width:100%;height:100%;max-height:none} .small-engraving-visuals .small-engraving-overview{margin-top:0} .small-engraving-visuals figcaption{flex:none} .small-engraving-visuals>p{margin:0;font-size:11px} .back-editor-preview{align-self:stretch;position:static;min-height:0;display:flex;flex-direction:column} .back-editor-preview [data-back-canvas]{flex:1;min-height:0;width:100%;max-width:none;margin:0;display:flex;align-items:center;justify-content:center;container-type:size;overflow:hidden} .back-editor-preview [data-back-canvas] svg{width:min(100cqw,100cqh);height:min(100cqw,100cqh);flex:none} .back-editor-preview>p{flex:none;font-size:11px} @media(max-width:720px){ .small-engraving-dialog[open],.back-engraving-dialog[open]{height:94dvh;max-height:94dvh} .small-engraving-layout,.back-editor-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1.2fr);gap:10px;padding:0 16px 12px} .small-engraving-visuals{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px} .small-engraving-visuals>p{grid-column:1/-1;font-size:10px} .small-engraving-visuals figure{padding:6px} .small-engraving-visuals figcaption{font-size:9px;margin-top:4px} .small-engraving-visuals svg{max-height:none} .small-engraving-tools,.back-editor-tools{padding-right:4px} } /* Homepage only. The configurator keeps its established layout and controls. */ .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-shell{padding-top:16px} .home-brand-title{display:none} body:has(#design-entry-panel:not([hidden])) .home-brand-title{display:inline} body:has(#design-entry-panel:not([hidden])) .editor-brand-title{display:none} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{padding:8px 0;margin-bottom:0;border-bottom:1px solid #303237} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header h1{font:500 19px/1.5 'Songti SC','Noto Serif SC',serif;letter-spacing:.03em} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header .eyebrow{display:none} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-brand-symbol{width:42px;height:42px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-brand-name{font-size:9px;letter-spacing:4px} .dark-studio-theme #design-entry-panel.panel{display:flex;flex-direction:column;gap:0;margin:0;padding:0;border:0;background:none;box-shadow:none} #design-entry-panel[hidden]{display:none!important} #design-entry-panel .home-story-hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:20px;min-height:550px;padding:24px 0 32px} #design-entry-panel .home-kicker{color:#d2a064;font-size:13px;letter-spacing:.08em;margin:0 0 18px} #design-entry-panel .home-story-copy{position:relative;z-index:1} #design-entry-panel .home-mobile-copy{display:none} #design-entry-panel .home-engraving-colors{margin-top:12px;border-top:1px solid #37393d} #design-entry-panel .home-engraving-colors>summary{padding:12px 0;color:#dcb47d;font-size:13px;line-height:1.6;cursor:pointer;min-height:24px} #design-entry-panel .home-story-copy h2{font:600 clamp(30px,3.1vw,48px)/1.45 'Songti SC','Noto Serif SC',serif;letter-spacing:.015em;margin:0 0 24px;color:#f3eee6} #design-entry-panel .home-story-description{max-width:540px;color:#c5c8cc;font-size:16px;line-height:1.85;margin:0 0 25px} #design-entry-panel .home-story-actions{display:flex;flex-wrap:wrap;gap:12px} #design-entry-panel .home-start-design{margin:0;min-height:50px;padding:12px 24px;font-size:15px;border-radius:7px} #design-entry-panel .home-consult-action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;background:transparent;border:1px solid #ac834e;border-radius:7px;color:#e8c18b;font:500 14px/1.5 'DM Sans',sans-serif;cursor:pointer;text-decoration:none;box-sizing:border-box} #design-entry-panel .home-consult-action:hover{background:#282118;border-color:#e2b575} #design-entry-panel .home-story-reassurance{font-size:13px;color:#b4b9c0;margin:14px 0 25px} #design-entry-panel .home-story-price{border-top:1px solid #59452e;padding-top:18px;font-size:13px;line-height:1.75} #design-entry-panel .home-story-price strong{color:#eee7db;font-weight:600} #design-entry-panel .home-story-price p{color:#b3b8bf;margin:7px 0 0;font-size:12px} #design-entry-panel .home-story-visual{position:relative;margin:0;min-width:0} #design-entry-panel .home-story-watch{display:block;width:100%;height:auto;max-height:480px;aspect-ratio:1;object-fit:contain} #design-entry-panel .home-story-source{position:absolute;left:0;top:12%;margin:0;width:24%;max-width:130px} #design-entry-panel .home-story-source img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:51% center;border:1px solid #b18a53;border-radius:7px} #design-entry-panel .home-story-source figcaption{color:#e4d8c6;font-size:11px;line-height:1.6;padding-top:8px} #design-entry-panel .home-story-image-note{color:#b8bdc4;font-size:11px;text-align:left;margin-top:4px} #design-entry-panel .home-section-nav{display:flex;flex-wrap:wrap;gap:12px 28px;padding:18px 0;border-top:1px solid #33353a;border-bottom:1px solid #33353a} #design-entry-panel a{color:#dcb47d;text-underline-offset:4px} #design-entry-panel .home-section-nav a{font-size:13px;min-height:28px;display:inline-flex;align-items:center;text-decoration:none} #design-entry-panel .home-capability-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:36px 0} #design-entry-panel .home-capability-summary>div+div{border-left:1px solid #34363a;padding-left:28px} #design-entry-panel .home-capability-summary span{font-size:12px;color:#d2a064} #design-entry-panel .home-capability-summary h3{font-size:19px;margin:12px 0;color:#eeeae2} #design-entry-panel .home-capability-summary p{font-size:14px;line-height:1.8;color:#bfc4cb;max-width:360px} #design-entry-panel .home-capability-summary a{font-size:13px;display:inline-block;padding:6px 0} #design-entry-panel :is(.home-start-options,.home-detail-examples,.home-package-all){border-top:1px solid #37393d;border-bottom:1px solid #37393d;padding:0;margin:0} #design-entry-panel :is(.home-start-options,.home-detail-examples,.home-package-all)>summary{padding:18px 0;color:#dcb47d;font-size:14px;line-height:1.6;cursor:pointer;min-height:24px} #design-entry-panel .home-start-options[open]{display:block} .dark-studio-theme #design-entry-panel .home-start-options{background:transparent;border-radius:0;box-shadow:none} #design-entry-panel .home-start-options-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:24px;padding:8px 0 28px} .dark-studio-theme #design-entry-panel .home-start-options .design-entry-actions{display:block;min-width:0;grid-area:auto} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-gallery{grid-area:auto;padding:0;margin:0;min-width:0;border:0} .dark-studio-theme #design-entry-panel .home-start-options .custom-design-entry{width:100%} .dark-studio-theme #design-entry-panel .home-start-options :is(.custom-design-entry,.customer-preset-card){border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden} .dark-studio-theme #design-entry-panel .home-start-options :is(.custom-design-entry:hover,.customer-preset-card:hover){background:transparent;box-shadow:none} .dark-studio-theme #design-entry-panel .home-start-options .custom-design-entry{display:grid;grid-template-columns:1fr;grid-template-rows:240px auto auto;height:auto;min-height:0;gap:0;padding:0} .dark-studio-theme #design-entry-panel .home-start-options .custom-design-visual{grid-column:1;grid-row:1;width:100%;height:240px;min-height:0;border-radius:6px;overflow:hidden} .dark-studio-theme #design-entry-panel .home-start-options .custom-design-visual img{width:100%;height:100%;object-fit:cover} .dark-studio-theme #design-entry-panel .home-start-options .custom-design-copy{grid-column:1;grid-row:2;padding:16px 0 0;gap:8px} .dark-studio-theme #design-entry-panel .home-start-options :is(.custom-design-copy strong,.customer-preset-card-body strong){font:600 21px/1.45 'Songti SC',serif;color:#eeeae2} .dark-studio-theme #design-entry-panel .home-start-options :is(.custom-design-copy small,.customer-preset-card-body small){font-size:13px!important;line-height:1.8;min-height:3.6em;color:#bfc4cb} .dark-studio-theme #design-entry-panel .home-start-options .custom-design-cta{grid-column:1;grid-row:3;margin:14px 0 0;padding:10px 16px;min-height:44px;border-radius:6px;font-size:14px;background:#d2a064;color:#17120d;border:1px solid #d2a064} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-gallery{position:relative;align-self:start} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-gallery-heading{position:absolute;inset:0 0 auto;height:240px;margin:0} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-gallery-controls{top:98px} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-list{display:flex;align-items:stretch;height:auto;gap:24px;margin:0;padding:0;min-width:0} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-card{display:flex;flex-direction:column;flex:0 0 calc((100% - 24px)/2);height:auto;min-width:0} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-card:only-child{flex-basis:100%} .dark-studio-theme #design-entry-panel .home-start-options :is(.customer-preset-card img,.customer-preset-card-fallback){display:block;width:100%;height:240px;object-fit:cover;border-radius:6px;background:#111315} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-card-body{display:flex;flex-direction:column;flex:1;align-items:stretch;gap:8px;padding:16px 0 0;min-height:0} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-card-body button{margin:6px 0 0;padding:10px 16px;min-height:44px;border:1px solid #ac834e;border-radius:6px;background:transparent;color:#e8c18b;font-size:14px} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-card-body button:hover{background:#282118;border-color:#e2b575} .dark-studio-theme #design-entry-panel .customer-design-showcase{padding:36px 0;margin:0;border:0} .dark-studio-theme #design-entry-panel .customer-design-showcase-heading h3{font:600 30px/1.4 'Songti SC',serif} .dark-studio-theme #design-entry-panel .customer-design-showcase-heading p{font-size:14px;line-height:1.8;max-width:760px;color:#bfc4cb} .dark-studio-theme #design-entry-panel .home-capability-rail{margin:0 0 20px;background:#141618;border:0;padding:20px} #design-entry-panel .home-studio-section{padding:48px 0;border-bottom:1px solid #34363b} #design-entry-panel .home-studio-heading{max-width:760px} #design-entry-panel :is(.home-studio-heading,.home-closing) h2{font:600 clamp(26px,2.7vw,38px)/1.5 'Songti SC',serif;margin:0 0 16px;color:#f1ece3} #design-entry-panel .home-studio-heading>p:last-child{font-size:15px;line-height:1.9;color:#bfc4cb} #design-entry-panel .home-making-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;padding:0;margin:30px 0} #design-entry-panel .home-making-steps span{color:#d2a064;font-size:14px} #design-entry-panel .home-making-steps h3{font-size:18px;margin:14px 0 10px;color:#eeeae2} #design-entry-panel .home-making-steps p{font-size:14px;color:#bfc4cb;line-height:1.85;margin:0} .dark-studio-theme #design-entry-panel>.home-compact-packaging{padding:36px 0;margin:0;background:none;border:0;border-radius:0} #design-entry-panel .home-compact-packaging h2{font:600 28px/1.5 'Songti SC',serif;margin:0 0 12px} #design-entry-panel .home-compact-packaging>p{font-size:14px;color:#bfc4cb;line-height:1.8} #design-entry-panel .home-package-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:22px 0;overflow:visible} #design-entry-panel .home-package-previews a{display:block;border:0;background:none;text-decoration:none} #design-entry-panel .home-package-previews img{width:100%;height:220px;object-fit:cover;border-radius:8px} #design-entry-panel .home-package-previews span{display:block;padding:12px 0;color:#ddd4c7;font-size:14px} #design-entry-panel .home-compact-packaging>small{display:block;font-size:12px;line-height:1.8;margin-top:16px;color:#b3b8bf} .dark-studio-theme #design-entry-panel>.customer-service-guide{padding:30px 0;background:none;border:0;border-top:1px solid #34363b;border-radius:0} #design-entry-panel .customer-service-guide h2{font:600 28px/1.5 'Songti SC',serif;margin:0 0 20px} #design-entry-panel .customer-service-guide>details{border:0;border-bottom:1px solid #34363b;border-radius:0;background:none;padding:0} #design-entry-panel .customer-service-guide summary{font-size:14px;line-height:1.8;padding:15px 0;cursor:pointer;color:#e0d9cf} #design-entry-panel .customer-service-guide :is(p,li){font-size:14px;line-height:1.9;color:#bcc2ca} #design-entry-panel .home-policy-group>details{padding:0 16px;border:1px solid #383b40;margin-bottom:10px;border-radius:7px} #design-entry-panel .home-closing{padding:36px 0 48px;border-top:1px solid #34363b} #design-entry-panel .home-closing p{font-size:14px;color:#bfc4cb;line-height:1.8} #design-entry-panel .home-closing>div{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} #design-entry-panel .home-featured-stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:12px 0 22px} #design-entry-panel .home-featured-stories article{min-width:0} #design-entry-panel .home-featured-stories button{display:block;position:relative;width:100%;padding:0;border:0;background:#141618;cursor:zoom-in;color:#e9e5dd;text-align:left} #design-entry-panel .home-featured-stories img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px} #design-entry-panel .home-featured-stories button span{display:block;padding:10px 12px;font-size:11px;color:#bdc3cb} #design-entry-panel .home-featured-stories h4{font-size:19px;margin:16px 0 7px;color:#eeeae2} #design-entry-panel .home-featured-stories p{font-size:14px;line-height:1.8;color:#bec4cc;margin:0} #design-entry-panel .home-featured-stories .home-featured-zoom>img{object-fit:contain;background:#111315} .home-featured-gallery{padding:10px 0 0} .home-featured-gallery-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} #design-entry-panel .home-featured-gallery-navigation button{width:auto;min-height:44px;min-width:66px;padding:8px 12px;border:1px solid #6e5638;border-radius:5px;background:transparent;color:#dcb47d;cursor:pointer;text-align:center;font-size:12px} #design-entry-panel .home-featured-gallery-navigation span{padding:0;color:#bec4cc;font-size:12px} .home-featured-thumbnails{display:flex;flex-wrap:wrap;gap:8px} #design-entry-panel .home-featured-thumbnails button{flex:0 0 52px;width:52px;height:52px;border:2px solid transparent;border-radius:5px;padding:2px;background:#141618;cursor:pointer} #design-entry-panel .home-featured-thumbnails button[aria-pressed=true]{border-color:#d2a064} #design-entry-panel .home-featured-thumbnails img{width:100%;height:100%;aspect-ratio:1;object-fit:contain;border-radius:2px} #design-entry-panel .home-featured-gallery button:focus-visible{outline:2px solid #f0d4a6;outline-offset:3px} #design-entry-panel .home-all-stories>summary{font-size:14px;color:#dbb47f;cursor:pointer;padding:14px 0} #design-entry-panel :is(a,button,summary):focus-visible{outline:2px solid #edc58d;outline-offset:4px} @media(max-width:900px){ #design-entry-panel .home-story-hero{grid-template-columns:1fr 1fr;gap:12px;min-height:480px} #design-entry-panel .home-story-copy h2{font-size:clamp(24px,3vw,28px)} #design-entry-panel .home-story-description{font-size:14px} #design-entry-panel .home-story-actions{gap:10px} #design-entry-panel .home-capability-summary{gap:18px} #design-entry-panel .home-capability-summary>div+div{padding-left:18px} #design-entry-panel .home-making-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} } @media(max-width:640px){ .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header h1{font-size:14px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{padding:16px 0} #design-entry-panel .home-story-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:'kicker' 'title' 'description' 'actions' 'reassurance' 'visual' 'price';min-height:0;padding:20px 0 26px;gap:12px} #design-entry-panel .home-story-copy{display:contents} #design-entry-panel .home-desktop-copy{display:none} #design-entry-panel .home-mobile-copy{display:inline} #design-entry-panel .home-story-hero .home-kicker{grid-area:kicker;margin:0;font-size:12px} #design-entry-panel .home-story-copy h2{grid-area:title;font-size:28px;line-height:1.45;margin:0;text-wrap:initial} #design-entry-panel .home-story-description{grid-area:description;font-size:14px;line-height:1.7;margin:0} #design-entry-panel .home-story-actions{grid-area:actions;display:grid;grid-template-columns:1fr 1fr;gap:8px} #design-entry-panel .home-story-actions button{min-width:0;min-height:48px;padding:10px 8px;font-size:13px} #design-entry-panel .home-story-reassurance{grid-area:reassurance;margin:0;font-size:12px} #design-entry-panel .home-story-visual{grid-area:visual;max-width:310px;width:100%;margin:0 auto} #design-entry-panel .home-story-price{grid-area:price;padding-top:14px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-contact-toggle{width:46px;min-width:46px;height:46px;padding:0} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-contact-toggle>span{display:none} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-contact-panel{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain} #design-entry-panel .home-section-nav{gap:6px 22px} #design-entry-panel .home-capability-summary{grid-template-columns:1fr;gap:22px;padding:28px 0} #design-entry-panel .home-capability-summary>div+div{padding:22px 0 0;border-left:0;border-top:1px solid #34363a} #design-entry-panel .home-capability-summary h3{font-size:20px} #design-entry-panel .home-start-options-grid{grid-template-columns:minmax(0,1fr);gap:28px} .dark-studio-theme #design-entry-panel .home-start-options .custom-design-entry{grid-template-rows:220px auto auto} .dark-studio-theme #design-entry-panel .home-start-options .custom-design-visual{height:220px} .dark-studio-theme #design-entry-panel .home-start-options .customer-preset-card{flex-basis:84%} #design-entry-panel .home-featured-stories{grid-template-columns:1fr;gap:26px} #design-entry-panel .home-featured-stories img{aspect-ratio:4/3} #design-entry-panel .home-package-previews{gap:12px} #design-entry-panel .home-package-previews img{height:auto;aspect-ratio:1;object-fit:cover} #design-entry-panel .home-package-previews span{font-size:12px;white-space:normal} #design-entry-panel .home-making-steps{gap:24px 18px} #design-entry-panel .home-studio-section{padding:32px 0} } .dark-studio-theme .dial-logo-upload{display:grid;gap:8px;margin:8px 0;color:#e7c28f;font-size:13px;font-weight:600} .dark-studio-theme .dial-logo-upload input[type=file]{display:block;position:static;width:100%;max-width:100%;height:auto;opacity:1;pointer-events:auto;color:#dce1e7;padding:10px;border:1px solid #83623b;border-radius:8px;background:#14191f;font:12px/1.5 sans-serif} .dial-logo-upload input::file-selector-button{margin-right:10px;padding:9px 13px;border:0;border-radius:6px;background:#d1a064;color:#17120c;font:600 13px sans-serif;cursor:pointer} .dial-logo-upload input:focus-visible{outline:2px solid #edbd79;outline-offset:3px} [data-dial-logo-status][role=alert]{color:#ffb39b!important} .minute-track-background-panel{display:grid;gap:12px;padding:14px;margin:12px 0;border:1px solid #665138;border-radius:9px;background:#1c1c1b;color:#eee5d6} .minute-track-background-panel[hidden]{display:none!important} .minute-track-background-toggle{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer} .minute-track-background-toggle input{width:18px;height:18px;accent-color:#d1a064} .minute-track-background-options{display:flex;flex-wrap:wrap;gap:18px;align-items:center} .minute-track-background-options label{display:flex;align-items:center;gap:9px;font-size:13px} .minute-track-background-options input[type=color]{width:55px;height:38px;cursor:pointer} .minute-track-background-options input[type=range]{width:120px;max-width:100%;accent-color:#d1a064} .minute-track-background-options input:disabled{opacity:.4;cursor:not-allowed} /* A saved design, explained independently of the customer's live editor. */ #design-entry-panel .home-walkthrough{padding:36px 0 24px;border-top:1px solid #37393d;background:#0e1113;scroll-margin-top:24px} .home-walkthrough-intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:20px;padding:0 24px} .home-walkthrough-copy :is(h2,h3) span{display:inline-block} #design-entry-panel .home-walkthrough h2{font:600 clamp(28px,3.8vw,56px)/1.4 'Songti SC','Noto Serif SC',serif;color:#f3eee6;letter-spacing:.015em;margin:0 0 16px} #design-entry-panel .home-walkthrough .home-kicker{font-size:11px;letter-spacing:.23em;margin-bottom:22px} #design-entry-panel .home-walkthrough-lead{font-size:20px;line-height:1.9;color:#c5c8cc;margin:0 0 36px} #design-entry-panel .home-walkthrough h3{font:600 clamp(22px,2.5vw,36px)/1.5 'Songti SC','Noto Serif SC',serif;color:#eeeae2;margin:0 0 12px} .home-walkthrough-copy>p:not(.home-kicker):not(.home-walkthrough-lead){font-size:18px;color:#bfc4cb;line-height:1.9;margin:0 0 28px} #design-entry-panel .home-walkthrough-actions .home-start-design{padding:14px 32px;min-width:240px;font-size:17px} .home-walkthrough-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px} #design-entry-panel .home-walkthrough-link{border:0;border-radius:0;background:none;box-shadow:none;color:#dcb47d;padding:10px 0;min-height:44px;font-size:14px;text-decoration:underline;text-underline-offset:6px;cursor:pointer} .home-walkthrough-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:20px;width:100%;min-width:0} .home-walkthrough-real{margin:0;min-width:0;text-align:center} #design-entry-panel .home-walkthrough-real button{display:block;width:100%;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:zoom-in} .home-walkthrough-real img{display:block;width:100%;height:auto;aspect-ratio:864/1227;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 68% 64% at 50% 55%,#000 35%,#0009 66%,transparent 100%);mask-image:radial-gradient(ellipse 68% 64% at 50% 55%,#000 35%,#0009 66%,transparent 100%)} .home-walkthrough-real figcaption{font-size:11px;color:#dcb47d;line-height:1.8;margin-top:12px} .home-walkthrough-real figcaption span{display:block;color:#aeb5bd;font-size:10px} .home-walkthrough-real button:hover img{-webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 55%,#000 45%,#0009 72%,transparent 100%);mask-image:radial-gradient(ellipse 72% 68% at 50% 55%,#000 45%,#0009 72%,transparent 100%)} .home-walkthrough-chapters{list-style:none!important;padding:20px 0!important;margin:12px 0 0!important;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid #705333;border-bottom:1px solid #34363a} .home-walkthrough-chapters li{min-width:0;padding:0 12px} .home-walkthrough-chapters li+li{border-left:1px solid #292d30} #design-entry-panel .home-walkthrough-chapters button{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#eeeae2;text-align:center;cursor:pointer;font:500 14px/1.5 'DM Sans',sans-serif} .home-walkthrough-chapters img{display:block;width:100%;height:150px;object-fit:contain;margin-bottom:12px} .home-walkthrough-chapters img.home-walkthrough-file{padding:24px;box-sizing:border-box} .home-walkthrough-chapters b{color:#d2a064;font-weight:500;margin-right:6px} #design-entry-panel .home-walkthrough-chapters button:hover{color:#e8c18b} .home-walkthrough button:focus-visible{outline:2px solid #e8c18b;outline-offset:4px} .home-walkthrough-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px 0} .home-walkthrough-footer small{font-size:11px;line-height:1.8;color:#aeb5bd;max-width:390px} .home-walkthrough-footer>div{display:flex;align-items:center;gap:16px} .home-walkthrough-footer p{font-size:12px;line-height:1.8;color:#bfc4cb;margin:0;max-width:260px} .home-walkthrough-footer button{flex-shrink:0} dialog.home-walkthrough-dialog{position:fixed;inset:0;margin:auto;padding:24px;width:min(1000px,calc(100vw - 32px));max-width:none;max-height:90dvh;box-sizing:border-box;overflow:auto;background:#0e1113;color:#eeeae2;border:1px solid #8d6b3d;border-radius:10px;box-shadow:0 24px 90px #0009} .home-walkthrough-dialog::backdrop{background:#000c} .home-walkthrough-dialog[open]{display:flex;flex-direction:column} .home-walkthrough-dialog header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid #34363a} .home-walkthrough-dialog .home-kicker{margin:0;color:#d2a064;font-size:13px} .home-walkthrough-dialog button{min-height:44px;padding:10px 18px;border:1px solid #8d6b3d;border-radius:6px;cursor:pointer;background:transparent;color:#e8c18b;font:500 14px/1.5 'DM Sans',sans-serif} .home-walkthrough-dialog button:hover{background:#282118} .home-walkthrough-dialog button:disabled{opacity:.4;cursor:default} .walkthrough-step-content{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:24px 0;min-height:380px} .walkthrough-step-content figure{margin:0;min-width:0} .walkthrough-step-content figure img{display:block;width:100%;height:340px;object-fit:contain} .walkthrough-step-content figure img[data-file=true]{padding:90px;box-sizing:border-box} .walkthrough-step-content figcaption{font-size:11px;color:#aeb5bd;text-align:center;line-height:1.8;margin-top:12px} .walkthrough-step-copy #walkthrough-step-count{color:#d2a064;font-size:12px;letter-spacing:.12em;margin:0 0 12px} .walkthrough-step-copy h2{font:600 30px/1.5 'Songti SC','Noto Serif SC',serif;margin:0 0 14px;color:#f3eee6} .walkthrough-step-copy>p:not(#walkthrough-step-count){font-size:14px;line-height:1.9;color:#c5c8cc} .walkthrough-step-copy ul{padding-left:20px;font-size:14px;line-height:2;color:#c5c8cc} .walkthrough-step-copy .walkthrough-step-tip{border-top:1px solid #39332a;padding-top:12px;color:#dcb47d!important;font-size:12px!important} .home-walkthrough-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #34363a;padding-top:16px} #walkthrough-progress{font-size:12px;color:#bfc4cb} #walkthrough-finish-actions{display:flex;flex-wrap:wrap;gap:10px} #walkthrough-finish-actions[hidden]{display:none} @media(max-width:900px){ .home-walkthrough-intro{grid-template-columns:1.1fr 1fr;padding:0 16px} .home-walkthrough-comparison{gap:12px} .home-walkthrough-chapters li{padding:0 6px} .home-walkthrough-chapters img{height:100px} #design-entry-panel .home-walkthrough-chapters button{font-size:12px} .home-walkthrough-footer{align-items:flex-start;padding:20px 16px 0} .home-walkthrough-footer>div{flex-direction:column;align-items:flex-start} } @media(max-width:640px){ #design-entry-panel .home-walkthrough{padding:28px 0 20px} .home-walkthrough-intro{grid-template-columns:1fr;gap:12px} #design-entry-panel .home-walkthrough h2{font-size:28px} #home-walkthrough-title span{display:block} #design-entry-panel .home-walkthrough .home-kicker{margin-bottom:16px} #design-entry-panel .home-walkthrough-lead{font-size:14px;margin-bottom:24px} #design-entry-panel .home-walkthrough h3{font-size:22px} .home-walkthrough-copy>p:not(.home-kicker):not(.home-walkthrough-lead){font-size:14px;margin-bottom:20px} .home-walkthrough-actions{gap:10px 18px} .home-walkthrough-comparison{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px} .home-walkthrough-real figcaption{font-size:10px} .home-walkthrough-chapters{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 0} .home-walkthrough-chapters li:nth-child(4){border-left:0} .home-walkthrough-chapters img{height:98px} .home-walkthrough-footer{flex-direction:column;gap:14px} .home-walkthrough-footer>div{gap:12px} .home-walkthrough-footer p{max-width:none} dialog.home-walkthrough-dialog{padding:16px;width:calc(100vw - 20px);max-height:94dvh} .walkthrough-step-content{grid-template-columns:1fr;gap:20px;padding:16px 0;min-height:0} .walkthrough-step-content figure img{height:230px} .walkthrough-step-content figure img[data-file=true]{padding:55px} .walkthrough-step-copy h2{font-size:25px} .home-walkthrough-dialog footer{position:sticky;bottom:-16px;background:#0e1113;padding-bottom:12px} } /* Display photographs complement the custom examples without replacing them. */ #design-entry-panel .home-display-section{padding:42px 0 30px;border-top:1px solid #303438;margin-top:32px} .home-display-heading{margin-bottom:24px} #design-entry-panel .home-display-heading .home-kicker{color:#d2a064;font-size:11px;letter-spacing:.18em;margin:0 0 12px} #design-entry-panel .home-display-heading h2{font:600 clamp(26px,3vw,38px)/1.4 'Songti SC','Noto Serif SC',serif;color:#f3eee6;margin:0 0 10px} #design-entry-panel .home-display-heading>p:last-child{color:#bfc4cb;font-size:15px;line-height:1.8;margin:0} .home-display-gallery{display:grid;grid-template-columns:1.2fr 1fr;gap:24px} .home-display-gallery figure{margin:0;min-width:0} #design-entry-panel .home-display-gallery button{position:relative;display:block;width:100%;padding:0;border:1px solid #343331;border-radius:2px;background:#111;overflow:hidden;cursor:zoom-in;box-shadow:none} .home-display-gallery img{display:block;width:100%;height:440px;object-fit:cover;object-position:50% 70%} .home-display-gallery figure+figure img{object-position:50% 65%} .home-display-gallery button>span{position:absolute;right:12px;bottom:12px;background:#0b0d0fd9;color:#ead1ac;border:1px solid #847051;padding:7px 10px;font-size:12px} .home-display-gallery button:focus-visible{outline:2px solid #d2a064;outline-offset:4px} .home-display-gallery figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px;color:#eeeae2;font-size:15px} .home-display-gallery figcaption span{font-size:12px;color:#adb4bc} #design-entry-panel .home-display-note{font-size:12px;line-height:1.8;color:#aeb4ba;margin:18px 0 0} @media(max-width:900px){.home-display-gallery{gap:16px}.home-display-gallery img{height:360px}.home-display-gallery figcaption{display:block}.home-display-gallery figcaption span{display:block;margin-top:4px}} @media(max-width:640px){#design-entry-panel .home-display-section{padding:28px 0 22px;margin-top:24px}.home-display-gallery{grid-template-columns:1fr;gap:24px}.home-display-gallery img{height:auto;aspect-ratio:4/3}.home-display-gallery figure+figure img{aspect-ratio:1/1}} /* Approved guided homepage, concept 3 — scoped away from the editor. */ .home-header-nav{display:none} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .home-header-nav{display:flex;align-items:center;justify-content:flex-end;gap:28px;margin-left:auto} .home-header-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:#d9d8d4;text-decoration:none;white-space:nowrap} .home-header-nav a:hover{color:#edc891} .home-header-nav button{min-height:44px;padding:10px 26px;background:#d2a064;color:#17120d;border:1px solid #d2a064;border-radius:6px;font-weight:600;cursor:pointer} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{gap:20px;padding:14px 0} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-brand-lockup{flex-basis:62px;width:62px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-brand-symbol{width:50px;height:50px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-brand-name{font-size:9px;letter-spacing:.32em} #design-entry-panel .home-story-hero{grid-template-columns:1fr 1.06fr;gap:36px;min-height:520px;padding:16px 0 30px} #design-entry-panel .home-story-copy h2{font:600 clamp(36px,4vw,54px)/1.4 'Songti SC','Noto Serif SC',serif;letter-spacing:.015em;margin:18px 0 20px} #design-entry-panel .home-story-description{font-size:16px;line-height:1.9;max-width:490px;margin-bottom:28px} #design-entry-panel .home-story-actions{gap:22px} #design-entry-panel .home-story-actions .home-consult-action{border:0;border-radius:0;padding:10px 0;background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:5px;color:#e0b77f} #design-entry-panel .home-story-price{border:0;padding:12px 0 0;margin-top:18px} #design-entry-panel .home-story-reassurance{margin-top:14px} #design-entry-panel .home-story-watch{max-height:520px} #design-entry-panel .home-story-source{left:auto;top:auto;right:0;bottom:6%;width:24%;max-width:135px} #design-entry-panel .home-story-image-note{font-size:12px;text-align:center} #design-entry-panel .home-walkthrough{border-top:1px solid #705333;margin:0;padding:32px 0 22px;background:transparent} .home-walkthrough-intro{grid-template-columns:.95fr 1.12fr;gap:42px;padding:0} #design-entry-panel .home-walkthrough h2{font-size:clamp(30px,3.6vw,44px);line-height:1.4;margin:0 0 14px} #design-entry-panel .home-walkthrough .home-kicker{display:none} #design-entry-panel .home-walkthrough-lead{font-size:16px;line-height:1.8;margin:0 0 20px} .home-walkthrough-benefits{list-style:none;padding:0;margin:0 0 24px;counter-reset:benefits;display:grid;gap:17px} .home-walkthrough-benefits li{counter-increment:benefits;position:relative;padding-left:38px} .home-walkthrough-benefits li::before{content:counter(benefits,decimal-leading-zero);position:absolute;left:0;top:2px;font-size:14px;color:#d2a064} .home-walkthrough-benefits strong{display:block;color:#eeeae2;font-size:17px;font-weight:500;line-height:1.5} .home-walkthrough-benefits span{display:block;color:#bfc4cb;font-size:14px;line-height:1.7;margin-top:3px} .home-walkthrough-comparison{gap:22px;align-self:stretch;align-items:center} .home-walkthrough-real img{aspect-ratio:3/4;object-fit:cover;mask-image:none;-webkit-mask-image:none;border-radius:2px} .home-walkthrough-real button:hover img{mask-image:none;-webkit-mask-image:none} .home-walkthrough-real figcaption{font-size:12px} .home-walkthrough-real figcaption span{font-size:12px} .home-walkthrough-chapters{margin-top:30px!important;padding:22px 0!important} .home-walkthrough-chapters img{height:120px} .home-walkthrough-footer{padding:12px 0 0;gap:16px} .home-walkthrough-footer>div{display:none} .home-walkthrough-footer>small{font-size:12px;line-height:1.7;color:#aeb5bd} #design-entry-panel .home-capability-summary{padding:28px 0;margin:0;border-bottom:1px solid #34363a} #design-entry-panel .home-capability-summary h3{font-size:23px;margin:8px 0} #design-entry-panel .home-capability-summary p{margin:0 0 8px;max-width:310px} #design-entry-panel .customer-design-showcase{padding:32px 0;margin:0} #design-entry-panel .customer-design-showcase-heading h3{font:600 clamp(26px,3vw,38px)/1.4 'Songti SC',serif} #design-entry-panel .home-featured-stories{gap:24px;align-items:start} #design-entry-panel .home-featured-zoom>img{aspect-ratio:4/3;border-radius:2px} #design-entry-panel .home-featured-stories .home-featured-zoom>span{font-size:12px;padding:8px 0;background:#0d0f10} .home-featured-gallery{min-height:118px;box-sizing:border-box} .home-featured-gallery-navigation{margin-bottom:6px} #design-entry-panel .home-featured-gallery-navigation button{border:0;padding:4px 0;min-width:44px;min-height:44px;background:transparent} #design-entry-panel .home-featured-stories h4{margin:12px 0 6px} .home-featured-gallery.is-single{visibility:hidden} .home-header-nav :is(a,button):focus-visible{outline:2px solid #f0d4a6;outline-offset:4px} @media(max-width:900px){ .dark-studio-theme:has(#design-entry-panel:not([hidden])) .home-header-nav{gap:14px} .home-header-nav a{font-size:12px}.home-header-nav button{padding:10px 18px} #design-entry-panel .home-story-hero{gap:20px;min-height:460px} #design-entry-panel .home-story-copy h2{font-size:34px} .home-walkthrough-intro{gap:24px;grid-template-columns:1fr 1fr} .home-walkthrough-comparison{gap:12px} .home-walkthrough-chapters img{height:96px} } @media(max-width:640px){ .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{flex-wrap:wrap;gap:8px;padding:10px 0} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header-branding{width:auto} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .home-header-nav{width:100%;justify-content:space-between;gap:8px;flex-wrap:wrap} .home-header-nav a{font-size:12px}.home-header-nav button{padding:9px 14px;font-size:13px} #design-entry-panel .home-story-hero{grid-template-columns:1fr;min-height:0;padding:22px 0 24px;gap:14px} #design-entry-panel .home-story-copy h2{font-size:32px;margin:0} #design-entry-panel .home-story-description{font-size:15px;line-height:1.8;margin:0} #design-entry-panel .home-story-actions{display:flex;flex-wrap:wrap;gap:12px 20px} #design-entry-panel .home-story-actions button{min-height:48px;padding:12px 16px} #design-entry-panel .home-story-actions .home-consult-action{padding:12px 0} #design-entry-panel .home-story-visual{max-width:400px} #design-entry-panel .home-story-price{margin-top:0;padding-top:14px;border-top:1px solid #59452e} #design-entry-panel .home-story-source{right:0;bottom:7%;width:25%} .home-walkthrough-intro{grid-template-columns:1fr;padding:0;gap:22px} #design-entry-panel .home-walkthrough{padding:26px 0 20px} #design-entry-panel .home-walkthrough h2{font-size:30px} #design-entry-panel .home-walkthrough-actions .home-start-design{min-width:0;width:auto;padding:13px 22px} .home-walkthrough-benefits{gap:12px;margin-bottom:20px} .home-walkthrough-comparison{gap:14px} .home-walkthrough-chapters{gap:20px 0;margin-top:24px!important} .home-walkthrough-chapters img{height:90px} #design-entry-panel .home-capability-summary{padding:24px 0} .home-featured-gallery{min-height:0} .home-featured-gallery.is-single{display:none} #design-entry-panel .home-featured-stories{gap:28px} .home-walkthrough-actions .home-walkthrough-link{font-size:13px} } #design-entry-panel .home-walkthrough-copy h2 span{display:block} @media(max-width:640px){ .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:4px 8px} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header-branding{grid-row:1;grid-column:1/3} .dark-studio-theme:has(#design-entry-panel:not([hidden])) .home-header-nav{display:contents} .home-header-nav button{grid-row:1;grid-column:3/5;justify-self:end} .home-header-nav a{grid-row:2;justify-content:center;font-size:12px} .home-header-nav a:nth-child(1){grid-column:1}.home-header-nav a:nth-child(2){grid-column:2}.home-header-nav a:nth-child(3){grid-column:3}.home-header-nav a:nth-child(4){grid-column:4} } #design-entry-panel .home-featured-stories .home-featured-zoom.is-cover>img{object-fit:cover} /* Final comparison pass: closer headline scale and first-fold proportions. */ @media(min-width:901px){ .dark-studio-theme:has(#design-entry-panel:not([hidden])) .customer-header{padding:8px 0} #design-entry-panel .home-story-hero{min-height:460px;padding:12px 0 24px;gap:30px} #design-entry-panel .home-story-copy h2{font-size:clamp(42px,4.8vw,60px);line-height:1.35} #design-entry-panel .home-story-watch{max-height:450px} .home-walkthrough-intro{grid-template-columns:.85fr 1.2fr;gap:40px} #design-entry-panel .home-walkthrough h2{font-size:48px} .home-walkthrough-benefits strong{font-size:19px} .home-walkthrough-benefits span{font-size:15px} } .wrist-fitting{margin:22px 0;padding:18px;border:1px solid #6d5336;border-radius:8px;background:#1a1815} .wrist-fitting h3{font-size:19px;color:#eee5d6;margin:0 0 8px} .wrist-fitting p{font-size:14px;line-height:1.8;color:#c1c5cb;margin:8px 0 12px} .wrist-fitting label{display:block;font-size:15px;color:#eee5d6;margin:12px 0 8px} .wrist-fitting-input{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .wrist-fitting-input input{box-sizing:border-box;width:150px;max-width:100%;min-height:46px;background:#111315;border:1px solid #9b784a;border-radius:5px;padding:10px 12px;color:#f3eee6;font-size:17px} .wrist-fitting-input input:focus-visible{outline:2px solid #e8bf88;outline-offset:3px} .wrist-fitting-input input[aria-invalid=true]{border-color:#f3a6a0} .wrist-fitting-input>span{color:#d5c3a9;font-size:14px} .wrist-fitting-input button{min-height:44px;padding:8px 14px;border:1px solid #766044;border-radius:5px;background:transparent;color:#e2be8b;cursor:pointer} .wrist-fitting #customer-wrist-status{font-size:13px;color:#e1bc86;margin-bottom:0} @media(max-width:640px){.wrist-fitting{padding:14px}.wrist-fitting-input{gap:10px}.wrist-fitting-input input{width:130px}} .wrist-fitting-entry{display:flex;align-items:center;justify-content:space-between;gap:20px} .wrist-fitting-entry p{margin-bottom:0} .wrist-fitting-entry>button{flex-shrink:0;min-height:46px;padding:12px 16px;border:1px solid #a47d4a;border-radius:5px;background:transparent;color:#e7c18c;font-size:14px;cursor:pointer} .wrist-dialog{box-sizing:border-box;width:min(660px,calc(100vw - 28px));max-height:90dvh;padding:0;border:1px solid #a47d4a;border-radius:10px;background:#131619;color:#eee9df;overflow:auto} .wrist-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)} .wrist-dialog header{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:24px 26px 16px;border-bottom:1px solid #35383b} .wrist-dialog header .home-kicker{font-size:11px;letter-spacing:.14em;color:#d2a064;margin:0 0 8px} .wrist-dialog h2{font-size:25px;line-height:1.4;margin:0} .wrist-dialog header>button{min-width:44px;min-height:44px;border:1px solid #666047;border-radius:6px;background:transparent;color:#e1b87f;font-size:24px;cursor:pointer} .wrist-dialog-body{padding:16px 26px 22px} .wrist-dialog-body>p{font-size:14px;line-height:1.8;color:#c5c9ce;margin:0 0 18px} .wrist-measure-method{padding:16px 0;border-bottom:1px solid #35383b} .wrist-measure-method h3{font-size:17px;color:#e7c18c;margin:0 0 10px} .wrist-measure-method ol{margin:0;padding-left:22px} .wrist-measure-method li{font-size:14px;line-height:1.8;color:#d1d4d9;margin:6px 0} .wrist-dialog-body .wrist-measure-note{padding:14px 0;color:#e7c18c;margin:0} .wrist-dialog label{display:block;margin:4px 0 10px;font-size:16px} .wrist-dialog #customer-wrist-status{font-size:13px;color:#e7c18c;margin:12px 0 0;line-height:1.7} .wrist-dialog footer{display:flex;justify-content:space-between;gap:12px;padding:16px 26px;background:#131619;border-top:1px solid #35383b;position:sticky;bottom:0} .wrist-dialog footer button{min-height:46px;padding:10px 22px;border:1px solid #9d7848;border-radius:5px;background:transparent;color:#e4bf88;cursor:pointer;font-size:14px} .wrist-dialog #customer-wrist-save{background:#d2a064;color:#17120d;border-color:#d2a064;font-weight:600} @media(max-width:640px){.wrist-fitting-entry{align-items:stretch;flex-direction:column;gap:12px}.wrist-dialog header,.wrist-dialog footer{padding:16px}.wrist-dialog-body{padding:12px 16px 18px}.wrist-dialog h2{font-size:23px}} .wrist-dialog[open]{display:flex;flex-direction:column;height:min(820px,90dvh);overflow:hidden} .wrist-dialog header,.wrist-dialog footer{flex-shrink:0} .wrist-dialog-body{overflow:auto;min-height:0;overscroll-behavior:contain} .wrist-dialog footer{position:static} .wrist-method-choices{display:flex;gap:10px;margin:12px 0 4px} .wrist-method-choices button{flex:1;min-height:46px;padding:10px 12px;border:1px solid #756047;border-radius:5px;background:transparent;color:#e2c49c;font-size:14px;cursor:pointer} .wrist-method-choices button[aria-pressed=true]{background:#34291d;border-color:#d2a064;color:#ffe0ad} .wrist-measure-method[hidden]{display:none} .wrist-method-figure{margin:8px 0 14px} .wrist-method-figure a{display:block;text-decoration:none;color:#e5c399} .wrist-method-figure img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;border-radius:5px;background:#111619} .wrist-method-figure a>span{display:block;text-align:right;font-size:12px;padding:8px 0} .wrist-method-figure figcaption{font-size:13px;line-height:1.7;color:#c5c9ce} .wrist-method-choices button:focus-visible,.wrist-method-figure a:focus-visible{outline:2px solid #f0cf9e;outline-offset:3px} .wrist-dialog footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 18px} .wrist-dialog-entry label{font-size:14px;margin:0 0 8px} .wrist-dialog-entry input{width:140px} .wrist-dialog-actions{display:flex;gap:10px} .wrist-dialog footer #customer-wrist-status{grid-column:1/-1;margin:0;font-size:12px;color:#d6bd98;line-height:1.6} @media(max-width:480px){.wrist-dialog footer{grid-template-columns:1fr;gap:12px}.wrist-dialog-entry{display:flex;align-items:center;justify-content:space-between;gap:10px}.wrist-dialog-entry label{margin:0;font-size:13px}.wrist-dialog-entry input{width:115px}.wrist-dialog-actions button{flex:1}.wrist-dialog-entry .wrist-fitting-input{gap:7px}.wrist-dialog-actions{width:100%}} .wrist-dialog-entry label{color:#eee9df} .wrist-dialog-entry input::placeholder{color:#a6abb2;opacity:1}