.design-viewer{position:fixed;inset:0;z-index:1500;background:#000a;display:flex;align-items:center;justify-content:center;padding:12px;overscroll-behavior:contain}.design-viewer-panel{box-sizing:border-box;width:min(760px,100%);height:min(640px,calc(100dvh - 24px),calc(100vw + 140px));max-height:calc(100dvh - 24px);display:grid;grid-template-rows:44px minmax(0,1fr) 48px 20px;gap:8px;padding:12px;border-radius:14px;background:var(--surface,#fff);color:var(--ink,#222);overflow:hidden}.design-viewer-toolbar{display:flex;align-items:center;gap:8px;min-width:0}.design-viewer-toolbar h2{margin:0;min-width:0;flex:1;font-size:18px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-viewer button,.design-viewer a{font:inherit;border:1px solid #958f8466;border-radius:8px;cursor:pointer;background:var(--surface,#fff);color:inherit;text-decoration:none}.design-viewer-toolbar button{width:42px;height:42px;flex:none;font-size:26px;padding:0}.design-viewer button:disabled{opacity:.3;cursor:default}.design-viewer-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;padding:0 44px;overflow:hidden;touch-action:none;direction:ltr}.design-viewer-image{display:block;width:100%;height:100%;min-height:0;object-fit:contain;user-select:none;pointer-events:none;transform-origin:center;filter:none!important}.design-viewer-stage button{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:48px;font-size:34px;line-height:1;padding:0;z-index:2}.design-viewer-prev{left:0}.design-viewer-next{right:0}.design-viewer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}.design-viewer-actions :is(a,button){display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 8px;font-size:14px;line-height:1.15;min-width:0}.design-viewer-actions .design-viewer-share{background:#23814a;color:#fff}.design-viewer-status{margin:0;font-size:12px;line-height:20px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-viewer :focus-visible{outline:3px solid #ba9c5b;outline-offset:-3px}@media(max-width:600px){.design-viewer{padding:8px}.design-viewer-panel{height:min(640px,calc(100dvh - 16px),calc(100vw + 140px));max-height:calc(100dvh - 16px);padding:10px;gap:6px;grid-template-rows:42px minmax(0,1fr) 48px 18px}.design-viewer-toolbar h2{font-size:16px}.design-viewer-stage{padding-inline:36px}.design-viewer-stage button{width:34px;height:44px}.design-viewer-status{font-size:11px;line-height:18px}.design-viewer-actions :is(a,button){font-size:13px}}@media(max-height:420px){.design-viewer-panel{padding:6px;gap:4px;grid-template-rows:36px minmax(0,1fr) 40px 16px}.design-viewer-toolbar button{height:34px;width:36px}.design-viewer-status{line-height:16px}}
.symbol-suggestions{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;border:1px solid #958f8466;border-radius:8px;background:var(--surface);padding:4px}.symbol-suggestions[hidden]{display:none}.symbol-suggestions button{font:inherit;color:inherit;background:none;border:0;text-align:start;padding:8px 10px;min-height:40px;cursor:pointer}.symbol-suggestions button:hover,.symbol-suggestions button:focus{background:var(--paper);outline:2px solid #a58b52}.symbol-name{font-weight:600;font-size:15px}.symbol-card>small{color:var(--muted);font-size:12px}
.symbol-search-field{display:grid;gap:8px;align-content:start}.symbol-search-field label{display:block}.symbol-search-field input{width:100%}.symbol-suggestions{position:relative;z-index:2}.symbol-filters{align-items:start}.symbol-card>span.symbol-name{font-size:15px}
.design-viewer button{min-height:0}.design-viewer p.design-viewer-status{font-size:12px}
/* Compact controls leave the central area to the complete sample. */
.design-viewer-panel{grid-template-rows:24px minmax(0,1fr) 44px;gap:6px}
.design-viewer-toolbar{gap:6px}.design-viewer-toolbar h2{font-size:15px;line-height:24px}.design-viewer-toolbar button{width:26px;height:24px;font-size:20px;padding:0;line-height:1;border-radius:5px}
.design-viewer-actions{display:flex;direction:ltr;justify-content:flex-start;gap:8px;align-items:center}
.design-viewer-actions :is(a,button){box-sizing:border-box;flex:none;width:44px;height:44px;padding:9px;line-height:1;border-radius:50%;background:transparent}
.design-viewer-actions img,.design-viewer-actions svg{display:block;width:24px;height:24px;object-fit:contain;pointer-events:none}
.design-viewer-actions .design-viewer-share{background:transparent;color:#25d366;border-color:#25a25e99}
.design-viewer-actions .design-viewer-call svg{fill:#54b4f4}.design-viewer-actions .design-viewer-copy{color:var(--ink)}
.design-viewer-status{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){.design-viewer-panel{grid-template-rows:24px minmax(0,1fr) 44px}.design-viewer-toolbar h2{font-size:14px}.design-viewer-toolbar button{width:26px;height:24px}}
@media(max-height:420px){.design-viewer-panel{grid-template-rows:24px minmax(0,1fr) 44px}.design-viewer-toolbar button{width:26px;height:24px}}
.design-viewer-fullscreen svg{display:block;width:20px;height:20px;margin:auto;pointer-events:none}
.design-viewer:fullscreen,.design-viewer-expanded{padding:8px;background:var(--surface,#fff)}
.design-viewer:fullscreen .design-viewer-panel,.design-viewer-expanded .design-viewer-panel{width:100%;height:100%;max-height:100%;border-radius:0}
.inquiry-shade{z-index:1600}
@media(max-width:700px),(max-width:1023px) and (pointer:coarse){
 .design-viewer-stage{padding-inline:0}
 .design-viewer-stage .design-viewer-prev,.design-viewer-stage .design-viewer-next{display:none!important}
}
.has-language-menu{position:relative;overflow:visible!important}
.has-language-menu .language-selector[hidden]{display:none!important}
.language-menu-trigger{box-sizing:border-box;font:inherit;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:68px;min-height:44px;height:100%;padding:8px 12px;border:1px solid #958f8466;border-radius:10px;background:var(--surface,#fff);color:var(--ink,#222);cursor:pointer}
.language-menu-trigger span{color:var(--muted,#666)}
.language-menu-list{position:absolute;z-index:1200;top:calc(100% + 6px);right:0;width:160px;max-width:calc(100vw - 24px);padding:5px;border:1px solid #958f8466;border-radius:10px;background:var(--surface,#fff);color:var(--ink,#222);box-shadow:0 6px 22px #0003}
.language-menu-list[hidden]{display:none!important}
.language-menu-list button{position:relative;display:block;box-sizing:border-box;width:100%;min-height:44px;padding:8px 30px 8px 12px;border:0;border-radius:6px;font:inherit;background:transparent;color:inherit;text-align:left;cursor:pointer}
.language-menu-list button[dir=rtl]{text-align:right;padding:8px 12px 8px 30px}
.language-menu-list button.selected:after{content:'✓';position:absolute;right:10px;color:#23814a}
.language-menu-list button.selected[dir=rtl]:after{right:auto;left:10px}
.language-menu-list button:hover,.language-menu-list button:focus-visible{background:var(--paper,#f2f0eb);outline:2px solid #a58b52}
.language-menu-trigger:focus-visible{outline:2px solid #a58b52;outline-offset:2px}
.has-language-menu{position:relative!important}
.has-language-menu .language-menu-trigger{font-size:14px!important;line-height:1.2;color:var(--ink,#222)!important;min-width:0;width:100%}
.white-header .language-switch.has-language-menu{position:relative!important}

/* Adjacent decoded images travel across the entire preview with the active image. */
.design-viewer-neighbor{position:absolute;top:0;left:44px;width:calc(100% - 88px);height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:none!important;will-change:transform}
.design-viewer-image{will-change:transform}
@media(max-width:600px){.design-viewer-neighbor{left:36px;width:calc(100% - 72px)}}
@media(max-width:700px),(max-width:1023px) and (pointer:coarse){.design-viewer-neighbor{left:0;width:100%}}

/* Swipe-only gallery: no visible arrows on any screen. */
.design-viewer-stage{padding-inline:0}
.design-viewer-stage .design-viewer-prev,.design-viewer-stage .design-viewer-next{display:none!important}
.design-viewer-neighbor{left:0;width:100%}

/* Phone previews open directly in the viewport, with only the close control. */
.design-viewer-phone{padding:8px;background:var(--surface,#fff)}
.design-viewer-phone .design-viewer-panel{width:100%;height:100%;max-height:100%;border-radius:0}
.design-viewer-phone .design-viewer-fullscreen{display:none!important}

/* Desktop viewers retain clickable arrows; phone navigation stays swipe-only. */
.design-viewer:not(.design-viewer-phone) .design-viewer-prev,
.design-viewer:not(.design-viewer-phone) .design-viewer-next{display:block!important;box-shadow:0 1px 6px #0002}

/* Light, clickable phone arrows sit on the fitted artwork itself. */
.design-viewer-phone .design-viewer-stage .design-viewer-prev,
.design-viewer-phone .design-viewer-stage .design-viewer-next{display:block!important;width:44px;height:44px;border:0;border-radius:50%;background:#0004;color:#fff;text-shadow:0 1px 3px #000b;font-size:32px;opacity:.7;box-shadow:none;backdrop-filter:blur(1px)}
.design-viewer-phone .design-viewer-stage button:disabled{opacity:.18}
.design-viewer-phone .design-viewer-stage button:not(:disabled):active{opacity:1;background:#0006}

.design-viewer-has-caption .design-viewer-panel{grid-template-rows:24px minmax(0,1fr) auto 44px}
.design-viewer-caption{font-size:14px;line-height:20px;max-height:40px;overflow:hidden;color:var(--ink)}
.design-viewer-caption[hidden]{display:none}

/* Full-width font artwork, with both arrows directly underneath it. */
.font-dialog .design-viewer-stage{padding-inline:0;flex-direction:column;gap:12px}
.font-dialog .design-viewer-artwork{position:relative;inset:auto;width:100%;flex:none;min-height:1px;overflow:hidden}
.font-dialog .design-viewer-navigation{display:flex;flex:0 0 44px;align-items:center;justify-content:center;gap:16px;direction:ltr}
.font-dialog .design-viewer-stage .design-viewer-navigation button{position:static;transform:none;box-sizing:border-box;width:44px;height:44px;border:1px solid #958f8466;border-radius:50%;background:var(--surface,#fff);color:var(--ink,#222);font-size:32px;opacity:1;box-shadow:none;backdrop-filter:none;text-shadow:none}
.font-dialog .design-viewer-stage .design-viewer-navigation button:disabled{opacity:.3}
.font-dialog .design-viewer-image{min-width:0;will-change:auto}
.font-dialog .design-viewer-neighbor{left:0;width:100%}
.font-dialog[data-zoomed="true"] .design-viewer-neighbor{visibility:hidden}
.font-dialog[data-zoomed="true"] .design-viewer-artwork{cursor:grab}
.font-dialog .design-viewer-zoom svg{display:block;width:20px;height:20px;margin:auto;pointer-events:none}