/* The Design page on phones (Dean, through Karo, 2 Nov 2026). In the page the designer is a short preview under a clear
   layer, so a drag on it scrolls the page instead of turning the door. Open, the same element fills the screen. The frame
   is never moved in the page and never reloaded, so the customer's design stays. design.js holds the same query as PHONE.
   The frame's box never changes either: it loads at its open size, the preview is a window clipped over it, and opening
   changes only the container. In WebKit any change to the designer's window loses the door for good (the 2 Nov rollback). */
.designer-open,.designer-note{display:none}

/* Open: also where a computer's browser has no requestFullscreen, so this sits outside the query. */
html.designer-page-locked body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.shop-designer-frame.is-open{position:fixed;top:0;left:0;right:0;z-index:2147483000;display:block;height:100vh;height:100dvh;margin:0;border:0;border-radius:0;background:#fff;overflow:hidden}
.shop-designer-frame.is-open .designer-collapse{position:absolute;top:0;left:0;z-index:2;display:block;width:100%;height:48px;border:0;background:#352882;color:#fff;font:600 16px/1.2 'Open Sans',Arial,sans-serif;cursor:pointer}
/* It stands over the frame, because taking room from the frame would change its box. */
.shop-designer-frame.is-open .designer-note:not([hidden]){position:absolute;top:48px;left:0;right:0;z-index:2;display:block;margin:0;padding:10px 16px;background:#efede7;color:#17152b;font-size:15px;line-height:1.4;pointer-events:none}
.shop-designer-frame.is-open iframe{position:absolute;top:48px;left:0;width:100%;height:calc(100% - 48px)}

@media (max-width:900px),(pointer:coarse) and (max-height:600px){
  /* svh, never dvh, for the frame: Safari's collapsing toolbars change dvh while it is open. With them collapsed the container
     runs on past the frame's foot on its white ground. Only turning the phone changes svh and vw, and that resizes any page. */
  .shop-designer-frame{--designer-preview:clamp(240px,52vh,460px);--designer-height:calc(100vh - 48px)}
  @supports (height:1svh){.shop-designer-frame{--designer-preview:clamp(240px,52svh,460px);--designer-height:calc(100svh - 48px)}}
  .shop-designer-frame:not(.is-open){height:var(--designer-preview)}
  /* The same box open and in the page, gutters or none: the width of the screen, centred on the container. */
  .shop-designer-frame.is-open iframe,.shop-designer-frame:not(.is-open) iframe{position:absolute;left:50%;width:100vw;max-width:none;height:var(--designer-height);margin-left:-50vw}
  /* The window sits on the middle of the door. It stays clear of the designer's own bottom bar, 64px, so the preview has one
     action, Open the designer; that matters on a phone held sideways, where the frame is little taller than the window. */
  .shop-designer-frame:not(.is-open) iframe{top:min(0px,max(calc((var(--designer-preview) - var(--designer-height))/2),calc(var(--designer-preview) - var(--designer-height) + 64px)))}
  .designer-open{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;width:100%;margin:0;padding:0 16px 16px;border:0;background:transparent;cursor:pointer;touch-action:pan-y pinch-zoom}
  .designer-open:focus-visible{outline:3px solid #332483;outline-offset:-3px}
  .shop-designer-frame.is-open .designer-open{display:none}
  .designer-note:not([hidden]){position:absolute;top:0;left:0;right:0;z-index:3;display:block;margin:0;padding:10px 16px;background:#efede7;color:#17152b;font-size:15px;line-height:1.4;pointer-events:none}
  [data-designer-fullscreen]{display:none}
}
/* The designer needs 320px, and the page's gutters would leave a 320px phone with 280px. */
@media (max-width:760px){
  .shop-designer-frame:not(.is-open){margin-inline:-20px;border-inline:0;border-radius:0}
}