/* Meta Customizer layout controls
   Adjust these first:
   - --logo-icon-size: size of the large selectable logo icons.
   - --toolbar-lift: more negative pulls logo icons closer to the cap canvas.
   - --view-icon-size: size of the smaller 1/2/3 view selector thumbnails.
*/
html.meta-customizer-page-lock,
body.meta-customizer-page-lock{
  overflow:hidden !important;
  height:100% !important;
  overscroll-behavior:none;
  touch-action:none;
}
body.meta-customizer-page-lock .meta-customizer-wrap,
body.meta-customizer-page-lock .meta-customizer-wrap *{
  touch-action:manipulation;
}
.meta-customizer-wrap{
  --logo-icon-size:150px;
  --logo-icon-gap:16px;
  --toolbar-lift:-75px;
  --view-icon-size:72px;
  --view-icon-gap:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  margin:0 auto;
  padding:8px 16px 12px;
  max-width:920px;
  height:100vh;
  box-sizing:border-box;
  overflow:hidden;
}
.meta-canvas-shell{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  flex:0 0 auto;
}
canvas.metaCustomizerCanvas,
.meta-customizer-wrap .canvas-container,
.meta-customizer-wrap .upper-canvas,
.meta-customizer-wrap .lower-canvas{
  touch-action:none !important;
}
canvas.metaCustomizerCanvas{
  display:block;
  outline:none;
  max-width:100%;
  height:auto;
}
.meta-toolbar{
  display:flex;
  gap:var(--logo-icon-gap);
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-end;
  margin-top:var(--toolbar-lift);
  margin-bottom:32px;
  position:relative;
  z-index:5;
  width:100%;
  flex:0 0 auto;
}
.meta-icon,
.meta-view-icon{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  border-radius:8px;
  flex:0 1 auto;
}
.meta-icon img{
  display:block;
  width:var(--logo-icon-size);
  height:var(--logo-icon-size);
  object-fit:contain;
}
.meta-viewbar{
  display:flex;
  gap:var(--view-icon-gap);
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  margin-top:0;
  position:relative;
  z-index:6;
  width:100%;
  flex:0 0 auto;
}
.meta-view-icon{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.18);
  padding:4px;
  position:relative;
}
.meta-view-icon img{
  display:block;
  width:var(--view-icon-size);
  height:calc(var(--view-icon-size) * .72);
  object-fit:cover;
  border-radius:5px;
}
.meta-view-icon span{
  display:block;
  font:600 12px/1.2 Arial, sans-serif;
  color:#111;
  margin-top:3px;
  text-align:center;
}
.meta-icon.is-active,
.meta-view-icon.is-active{
  outline:3px solid #111;
  outline-offset:2px;
}
.meta-icon:focus,
.meta-view-icon:focus{
  outline:2px solid #000;
  outline-offset:2px;
}
@media (max-width:760px){
  .meta-customizer-wrap{
    padding:6px 12px 10px;
    --logo-icon-size:min(22vw,150px);
    --logo-icon-gap:12px;
    --toolbar-lift:-75px;
    --view-icon-size:min(14vw,64px);
    --view-icon-gap:10px;
  }
}