#sil-wrap.shoe-preview #sil-map { visibility: hidden; }
/* The desktop width calculation must use the same ratio as the artwork;
   otherwise the height cap compresses taller print files into a square. */
#sil-wrap.shoe-preview {
    --wrap-ratio: var(--shoe-aspect-ratio, 1);
    aspect-ratio: var(--wrap-ratio);
}
.shoe-design-canvas, .shoe-cut-guide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.shoe-design-canvas { z-index: 450; }
.shoe-cut-guide { z-index: 451; }
.shoe-supplier-guide { overflow: hidden; }
.shoe-supplier-guide img { position: absolute; top: 0; height: 100%; max-width: none; }
.shoe-guide-shade { fill: #ffffff; fill-opacity: .78; }
.shoe-guide-under, .shoe-guide-line { fill: none; stroke-linejoin: round; }
.shoe-guide-under { stroke: white; stroke-width: 3; }
.shoe-guide-line { stroke: #303030; stroke-width: 1.25; }
.shoe-guide-line.shoe-guide-safe { stroke: #b83926; stroke-dasharray: 5 4; }
.shoe-cut-guide text { fill: #222; font-size: 23px; paint-order: stroke; stroke: white; stroke-width: 2px; }
.shoe-guide-note { margin: 0 0 .5rem; font-size: .8rem; line-height: 1.4; text-align: center; }
.shoe-preview-status { z-index: 452; }
.flip-flop-regions { flex: 1 1 100%; min-width: 0; }
.flip-flop-regions-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; min-height: 40px; }
.flip-flop-regions-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--btn-bg); }
.flip-flop-region-fields { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.flip-flop-region-fields fieldset { display: flex; flex-wrap: wrap; gap: 12px 16px; min-width: 0; margin: 0; padding: 0; border: 0; flex: 1 1 200px; }
.flip-flop-region-fields legend { padding: 0 0 8px; font-weight: 500; }
.flip-flop-region-fields [hidden] { display: none; }
.flip-flop-region-fields .control { min-width: 0; max-width: 100%; }
.flip-flop-region-fields select { max-width: 100%; }
.shoe-design-canvas[hidden], .shoe-preview-status[hidden],
#sil-wrap.shoe-preview > .all-over-print-status:not(.shoe-preview-status) { display: none; }

/* Give the cut guide enough room on a phone and let the footer follow it. */
@media (max-width: 900px) {
    #sil-outer:has(#sil-wrap.shoe-preview) {
        height: auto;
        min-height: 0;
        max-height: none;
        grid-template-rows: auto;
        grid-auto-rows: auto;
    }
    #sil-outer #sil-wrap.shoe-preview {
        width: calc(100% - 48px);
        max-width: 380px;
        height: auto;
        max-height: none;
        min-height: 0;
        aspect-ratio: var(--shoe-aspect-ratio, 1);
        margin: 30px auto 8px;
        transform: none;
        transition: none;
    }
}