/* What the product page's designer relies on, whatever a site's design looks like: one tool panel
   open at a time, the canvas drawn at its own proportions, and the buttons the script hides staying
   hidden. This file always loads before the product stylesheet, so a site that replaces that
   stylesheet with its own (public/theme/product.css) keeps all of it. */

.design-panel { display: none; }
.design-panel.is-current { display: block; }
.design-actions .text-button[hidden] { display: none; }

.designer-canvas-wrap { position: relative; aspect-ratio: 1024 / 1200; }
.designer-canvas-wrap canvas { display: block; width: 100%; height: auto; touch-action: pan-y; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The design checks: hidden lines stay hidden, and the warnings dialog sits above the page. */
.design-messages[hidden], .design-messages li[hidden] { display: none; }
.design-warnings:not([open]) { display: none; }
[data-designer-panel][hidden] { display: none; }
.font-picker{position:relative}.font-picker-current{display:flex;align-items:center;width:100%;min-height:40px;padding:0 10px;border:1px solid #ddd;background:#fff;text-align:left}.font-picker-current img,.font-picker-list img{display:block;height:28px;width:auto;max-width:100%}.font-picker-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;margin:0;padding:4px 0;list-style:none;background:#fff;border:1px solid #ddd;box-shadow:0 8px 24px #0002}.font-picker-list li{padding:6px 10px;cursor:pointer}.font-picker-list li:hover,.font-picker-list li:focus,.font-picker-list li.is-active{background:#f2f2f2}