/* CASESTUDIO V378 — slightly larger, stable navigation controls; responsive vertical heading.
   Dedicated last stylesheet, so old editor/legacy styles remain untouched. */

/* The mobile rails are 50–54 CSS px wide in V372. Keep the face within their padding. */
:root {
  --cs377-face:49px;
  --cs377-arrow-height:51px;
  --cs377-catalog-height:64px;
  --cs377-filter-height:46px;
  --cs377-layer-face:38px;
}
@media (max-width:700px) {
  :root {
    --cs377-face:43px;
    --cs377-arrow-height:48px;
    --cs377-catalog-height:60px;
    --cs377-filter-height:43px;
    --cs377-layer-face:37px;
  }
}
@media (max-width:380px) {
  :root {
    --cs377-face:41px;
    --cs377-arrow-height:46px;
    --cs377-catalog-height:57px;
    --cs377-filter-height:41px;
    --cs377-layer-face:35px;
  }
}
/* Increase icon clarity in the same proportion without shifting the layout. */
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow .nav-arrow-glyph svg {
  width:23px !important; height:23px !important;
}
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core svg {
  width:26px !important; height:26px !important;
}
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus .layer-plus-icon svg {
  width:21px !important; height:21px !important;
}
@media (max-width:380px) {
  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;
  }
}
/* Desktop uses the original horizontal H1: new side label is mobile-only. */
.cs378-vertical-preview-heading { display:none !important; }
@media (max-width:700px) {
  /* Keep the existing semantic heading in the DOM, but hide its old hardcoded
     28px/top offset which was visually detached from the navigation. */
  html body main.main-layout > section.preview-section > .preview-header > h1 {
    clip-path:inset(50%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  /* Anchor the visible heading to the rail's flex box, not the viewport.
     Now it automatically tracks rail height as buttons change size, as
     device width changes, or when more sticker layer buttons are added. */
  html body main.main-layout > section.preview-section > .preview-stage > .case-nav {
    position:relative !important;
    overflow:visible !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .case-nav > .cs378-vertical-preview-heading {
    box-sizing:border-box !important;
    position:absolute !important;
    display:block !important;
    top:50% !important;
    left:calc(100% + 5px) !important;
    right:auto !important;
    width:max-content !important;
    height:max-content !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    transform:translateY(-50%) rotate(180deg) !important;
    transform-origin:center center !important;
    writing-mode:vertical-rl !important;
    text-orientation:mixed !important;
    white-space:nowrap !important;
    font-family:inherit !important;
    font-size:clamp(19px,4.2vw,21px) !important;
    font-weight:800 !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;
    color:var(--text-primary,#edf3ff) !important;
    text-shadow:0 2px 6px rgba(0,0,0,.20) !important;
    pointer-events:none !important;
    user-select:none !important;
    z-index:4 !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;
  }
}
@media (max-width:380px) {
  html body main.main-layout > section.preview-section > .preview-stage > .case-nav > .cs378-vertical-preview-heading {
    left:calc(100% + 3px) !important;
    font-size:19px !important;
  }
}