/* CASESTUDIO V379 — MOBILE: label above the case control column;
   align sticker layers with the arrows. DESKTOP: restore V377 dimensions. */

/* V378 enlarged the variables and SVGs globally. Only phones should keep
   those V378 sizes. At desktop widths restore the previous V377 values. */
@media (min-width:701px) {
  :root {
    --cs377-face:46px;
    --cs377-arrow-height:48px;
    --cs377-catalog-height:60px;
    --cs377-filter-height:43px;
    --cs377-layer-face:36px;
  }
  html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow .nav-arrow-glyph svg {
    width:21px !important;
    height:21px !important;
  }
  html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core svg {
    width:24px !important;
    height:24px !important;
  }
  html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus .layer-plus-icon svg {
    width:19px !important;
    height:19px !important;
  }
}

@media (max-width:700px) {
  /* The mobile heading is the first item ABOVE the filter and arrow buttons,
     NOT an absolutely placed label to the side. It follows the column's
     real height instead of assuming a particular device width. */
  html body main.main-layout > section.preview-section > .preview-stage > .case-nav {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .case-nav > .cs378-vertical-preview-heading {
    display:block !important;
    position:relative !important;
    flex:0 0 auto !important;
    align-self:center !important;
    order:-1 !important;
    inset:auto !important;
    width:max-content !important;
    max-width:100% !important;
    height:max-content !important;
    margin:0 auto clamp(8px,2vw,12px) !important;
    padding:0 !important;
    writing-mode:vertical-rl !important;
    text-orientation:mixed !important;
    rotate:180deg !important;
    translate:none !important;
    transform:none !important;
    transform-origin:center center !important;
    font-size:clamp(17px,4.15vw,21px) !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    color:var(--text-primary,#edf3ff) !important;
    text-align:center !important;
    pointer-events:none !important;
    user-select:none !important;
    white-space:nowrap !important;
  }
  html[data-theme="light"] body main.main-layout > section.preview-section > .preview-stage > .case-nav > .cs378-vertical-preview-heading {
    color:#283a65 !important;
    text-shadow:none !important;
  }

  /* The sticker layer column was shifted 1px to one side by the old mobile
     design-editor export. Every layer and + button should share the EXACT
     same horizontal center as both navigation arrows. */
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-nav {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-nav > #sticker-layer-controls {
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:clamp(4px,1vw,6px) auto 0 !important;
    padding:0 !important;
    translate:none !important;
    transform:none !important;
    left:auto !important;
    right:auto !important;
    gap:clamp(5px,1vw,8px) !important;
    overflow:visible !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-nav #sticker-layer-controls > .sticker-layer-item {
    position:relative !important;
    align-self:center !important;
    box-sizing:border-box !important;
    width:var(--cs377-layer-face) !important;
    min-width:var(--cs377-layer-face) !important;
    max-width:var(--cs377-layer-face) !important;
    height:var(--cs377-layer-face) !important;
    min-height:var(--cs377-layer-face) !important;
    flex:0 0 var(--cs377-layer-face) !important;
    margin:0 auto !important;
    padding:0 !important;
    translate:none !important;
    transform:none !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-nav #sticker-layer-controls .sticker-layer-number,
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-nav #sticker-layer-controls > #add-sticker-layer {
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    box-sizing:border-box !important;
    width:var(--cs377-layer-face) !important;
    min-width:var(--cs377-layer-face) !important;
    max-width:var(--cs377-layer-face) !important;
    height:var(--cs377-layer-face) !important;
    min-height:var(--cs377-layer-face) !important;
    max-height:var(--cs377-layer-face) !important;
    flex:0 0 var(--cs377-layer-face) !important;
    align-self:center !important;
    margin:0 auto !important;
    padding:0 !important;
    translate:none !important;
    left:auto !important;
    right:auto !important;
  }
  /* Removal badges keep their anchored position on each layer, with the
     exported cross-axis translation removed so they never shift alignment. */
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-nav #sticker-layer-controls .sticker-layer-remove {
    translate:none !important;
  }
}