/* CASESTUDIO V377 | Harmonized touch controls | Builds on V376 without altering navigation or product logic.
   Replace cyan neon with saturated indigo / periwinkle / royal blue found elsewhere on site.
   Every size is shared across normal/hover/active/focus states to prevent mobile button jumps. */

/* Icon rail sits inside 50–54px mobile columns; increase button face, not the rail. */
:root {
  --cs377-face:46px;
  --cs377-arrow-height:48px;
  --cs377-catalog-height:60px;
  --cs377-filter-height:43px;
  --cs377-layer-face:36px;
  --cs377-body:linear-gradient(145deg,#5067b0 0%,#475d9d 48%,#394b86 100%);
  --cs377-catalog:linear-gradient(148deg,#8358dc 0%,#6849c7 45%,#4269c1 100%);
  --cs377-ink:#f9faff;
  --cs377-stroke:rgba(204,216,255,.48);
  --cs377-hover-stroke:rgba(229,232,255,.75);
  --cs377-shadow:0 5px 15px rgba(20,27,70,.25),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 5px rgba(28,29,89,.16);
  --cs377-hover-shadow:0 8px 18px rgba(24,31,88,.29),0 1px 5px rgba(108,107,229,.10),inset 0 1px 0 rgba(255,255,255,.30);
  --cs377-pressed-shadow:0 2px 6px rgba(20,27,70,.20),inset 0 3px 8px rgba(24,28,77,.34);
}

/* Shared bright frosted material: no heavy neon ring or diffuse outer glow. */
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow,
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button,
html body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus {
  box-sizing:border-box !important;
  flex-shrink:0 !important;
  background:var(--cs377-body) !important;
  color:var(--cs377-ink) !important;
  border:1px solid var(--cs377-stroke) !important;
  text-shadow:0 1px 2px rgba(23,30,77,.24) !important;
  box-shadow:var(--cs377-shadow) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  filter:none !important;
  transition:transform .115s cubic-bezier(.2,.85,.34,1),border-color .16s ease,background .16s ease,box-shadow .16s ease !important;
}

html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number.active {
  background:var(--cs377-catalog) !important;
}

/* Softer polished surface. Existing RGB neon outline from V376 is replaced. */
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow::after,
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button::after,
html body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger::after,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number::after,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus::after {
  background:linear-gradient(145deg,rgba(255,255,255,.44),rgba(172,187,255,.12) 45%,rgba(232,222,255,.30)) !important;
  opacity:.42 !important;
}
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow::before,
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button::before,
html body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger::before,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number::before,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus::before {
  background:linear-gradient(175deg,rgba(255,255,255,.19),transparent 45%) !important;
}

/* Visual size changes are small and never change on hover/press. */
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow {
  width:var(--cs377-face) !important; min-width:var(--cs377-face) !important; max-width:var(--cs377-face) !important;
  height:var(--cs377-arrow-height) !important; min-height:var(--cs377-arrow-height) !important; max-height:var(--cs377-arrow-height) !important;
  border-radius:16px !important;
  display:grid !important; place-items:center !important; padding:0 !important;
}
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button {
  width:var(--cs377-face) !important; min-width:var(--cs377-face) !important; max-width:var(--cs377-face) !important;
  height:var(--cs377-catalog-height) !important; min-height:var(--cs377-catalog-height) !important; max-height:var(--cs377-catalog-height) !important;
  border-radius:17px !important;
  display:grid !important; place-items:center !important; padding:0 !important;
}
html body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger {
  width:var(--cs377-face) !important; min-width:var(--cs377-face) !important; max-width:var(--cs377-face) !important;
  height:var(--cs377-filter-height) !important; min-height:var(--cs377-filter-height) !important; max-height:var(--cs377-filter-height) !important;
  border-radius:15px !important; padding:0 !important;
}
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus {
  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;
  border-radius:13px !important;
  padding:0 !important;
}
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number.active {
  color:#fff !important;
}
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 {
  min-height:0 !important; width:100% !important; height:100% !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;
}
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus .layer-plus-cap {
  background:#274c9d !important;
  box-shadow:0 1px 3px rgba(15,30,74,.20) !important;
}

/* Avoid pointer-hover simulating sticky pressed/expanded geometry on phones. */
@media (hover:hover) and (pointer:fine) {
  html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow:hover,
  html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button:hover,
  html body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger:hover,
  html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number:hover,
  html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:hover {
    transform:translateY(-1px) !important;
    border-color:var(--cs377-hover-stroke) !important;
    box-shadow:var(--cs377-hover-shadow) !important;
    filter:brightness(1.075) !important;
  }
}

/* Press feedback on both touch and mouse. No scale-induced layout movement. */
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow:active,
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button:active,
html body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger:active,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number:active,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:active,
html body main.main-layout > .preview-section .preview-stage .cs377-press {
  transform:translateY(1px) scale(.968) !important;
  filter:brightness(.95) !important;
  box-shadow:var(--cs377-pressed-shadow) !important;
  border-color:rgba(242,242,255,.66) !important;
}
html body main.main-layout > .preview-section .preview-stage .nav-filter-trigger[aria-expanded="true"]{
  border-color:rgba(239,225,255,.78) !important;
  box-shadow:0 6px 17px rgba(24,31,88,.24),inset 0 1px 0 rgba(255,255,255,.25) !important;
}

html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow:focus-visible,
html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button:focus-visible,
html body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger:focus-visible,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number:focus-visible,
html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:focus-visible{
  outline:2px solid #a5b4fc !important; outline-offset:2px !important;
}

/* Light theme: pastel indigo/blue with similar visual weight, unchanged metrics. */
html[data-theme="light"] {
  --cs377-body:linear-gradient(145deg,#d9e5ff,#c5d7ff 56%,#b8cdf8);
  --cs377-catalog:linear-gradient(140deg,#d7c2fa,#cbb8f9 44%,#b9ccf9);
  --cs377-ink:#253d77;
  --cs377-stroke:rgba(97,115,188,.44);
  --cs377-hover-stroke:rgba(98,98,189,.62);
  --cs377-shadow:0 5px 13px rgba(68,91,164,.13),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 5px rgba(87,111,188,.08);
  --cs377-hover-shadow:0 7px 17px rgba(68,91,164,.19),inset 0 1px 0 rgba(255,255,255,.94);
  --cs377-pressed-shadow:0 2px 6px rgba(68,91,164,.13),inset 0 3px 8px rgba(60,87,155,.18);
}
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus{
  color:var(--cs377-ink) !important;
  background:var(--cs377-body) !important;
  border-color:var(--cs377-stroke) !important;
  box-shadow:var(--cs377-shadow) !important;
  text-shadow:none !important;
}
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number.active{
  background:var(--cs377-catalog) !important;
  color:#293971 !important;
}
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow::after,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button::after,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger::after,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .sticker-layer-number::after,
html[data-theme="light"] body main.main-layout > .preview-section .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus::after{
  opacity:.26 !important;
}

@media(max-width:700px){
  :root { --cs377-face:40px; --cs377-arrow-height:45px; --cs377-catalog-height:56px; --cs377-filter-height:40px; --cs377-layer-face:35px; }
  html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow{border-radius:15px !important}
  html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button{border-radius:15px !important}
  html body main.main-layout > .preview-section .preview-stage > .preview-nav .nav-category-filter > .nav-filter-trigger{border-radius:14px !important}
}
@media(max-width:380px){
  :root { --cs377-face:38px; --cs377-arrow-height:43px; --cs377-catalog-height:53px; --cs377-filter-height:38px; --cs377-layer-face:33px; }
  html body main.main-layout > .preview-section .preview-stage > .preview-nav > .nav-arrow .nav-arrow-glyph svg{width:19px !important;height:19px !important}
  html body main.main-layout > .preview-section .preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core svg{width:22px !important;height:22px !important}
}
@media(prefers-reduced-motion:reduce){
  html body main.main-layout > .preview-section .preview-stage > .preview-nav button,
  html body main.main-layout > .preview-section .preview-stage .sticker-layer-controls button{transition:none !important}
}

/* Legacy V315 has ID-level width/height locks on the two browse buttons.
   Override the exact controls, including all interaction states, so enlarging
   them really takes effect without resurrecting the old tap-resize bug. */
html body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers),
html body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers):is(:hover,:focus,:focus-visible,:active) {
  width:var(--cs377-face) !important;
  min-width:var(--cs377-face) !important;
  max-width:var(--cs377-face) !important;
  height:var(--cs377-catalog-height) !important;
  min-height:var(--cs377-catalog-height) !important;
  max-height:var(--cs377-catalog-height) !important;
  translate:none !important;
  rotate:none !important;
  scale:1 !important;
  padding:0 !important;
  line-height:1 !important;
  border-radius:16px !important;
  background:var(--cs377-catalog) !important;
  color:var(--cs377-ink) !important;
  box-shadow:var(--cs377-shadow) !important;
  border-color:var(--cs377-stroke) !important;
}
/* User editor profile contains rotated filter triggers: 45deg and -45deg.
   Unrotate the button itself (not the dot), matching the new rounded family. */
html body main.main-layout > section.preview-section .preview-stage > .preview-nav > .nav-category-filter > button.nav-filter-trigger,
html body main.main-layout > section.preview-section .preview-stage > .preview-nav > .nav-category-filter > button.nav-filter-trigger:is(:hover,:focus,:focus-visible,:active) {
  rotate:none !important;
  translate:none !important;
  scale:1 !important;
  transform:none !important;
  border-radius:15px !important;
}
html[data-theme="light"] body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers),
html[data-theme="light"] body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers):is(:hover,:focus,:focus-visible,:active) {
  background:var(--cs377-catalog) !important;
  color:var(--cs377-ink) !important;
  border-color:var(--cs377-stroke) !important;
  text-shadow:none !important;
  box-shadow:var(--cs377-shadow) !important;
}
/* Once a filter is expanded the resting shape stays the same. */
html body main.main-layout > section.preview-section .preview-stage > .preview-nav > .nav-category-filter > button.nav-filter-trigger[aria-expanded="true"] {
  rotate:none !important;
  translate:none !important;
  transform:none !important;
  scale:1 !important;
}
/* Keep the soft tactile dip even for ID-locked browse buttons. */
html body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers):is(:active,.cs377-press) {
  transform:translateY(1px) scale(.968) !important;
  filter:brightness(.95) !important;
  box-shadow:var(--cs377-pressed-shadow) !important;
}
@media (hover:hover) and (pointer:fine) {
  html body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers):hover:not(:active) {
    transform:translateY(-1px) !important;
    filter:brightness(1.065) !important;
    box-shadow:var(--cs377-hover-shadow) !important;
  }
}

/* Exported V328 editor rules use ID twice and their filter selector twice.
   Match that specificity at 250..510px, then keep every state dimensionally
   identical. Scoped to the four side controls; desktop remains untouched. */
@media (min-width:250px) and (max-width:510px) {
  html body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers):is(#side-browse-cases,#side-browse-stickers),
  html body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers):is(#side-browse-cases,#side-browse-stickers):is(:hover,:focus,:focus-visible,:active) {
    width:var(--cs377-face) !important;
    min-width:var(--cs377-face) !important;
    max-width:var(--cs377-face) !important;
    height:var(--cs377-catalog-height) !important;
    min-height:var(--cs377-catalog-height) !important;
    max-height:var(--cs377-catalog-height) !important;
    translate:none !important;
  }
  :is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-stage:nth-of-type(4) > div.preview-nav.sticker-nav:nth-of-type(1) > div.nav-category-filter:nth-of-type(1) > button.nav-filter-trigger):is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-stage:nth-of-type(4) > div.preview-nav.sticker-nav:nth-of-type(1) > div.nav-category-filter:nth-of-type(1) > button.nav-filter-trigger),
  :is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-stage:nth-of-type(4) > div.preview-nav.case-nav:nth-of-type(5) > div.nav-category-filter > button.nav-filter-trigger):is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-stage:nth-of-type(4) > div.preview-nav.case-nav:nth-of-type(5) > div.nav-category-filter > button.nav-filter-trigger) {
    rotate:none !important;
    translate:none !important;
    transform:none !important;
    scale:1 !important;
    width:var(--cs377-face) !important;
    min-width:var(--cs377-face) !important;
    max-width:var(--cs377-face) !important;
    height:var(--cs377-filter-height) !important;
    min-height:var(--cs377-filter-height) !important;
    max-height:var(--cs377-filter-height) !important;
    border-radius:15px !important;
  }
}

/* Keep disabled controls visibly disabled during prize mode and at list ends. */
html body main.main-layout > section.preview-section .preview-stage > .preview-nav .nav-arrow:disabled,
html body main.main-layout > section.preview-section .preview-stage > .preview-nav .nav-filter-trigger:disabled,
html body main.main-layout > section.preview-section .preview-stage > .preview-nav > .side-catalog-button:disabled{opacity:.45 !important;filter:saturate(.66) !important;transform:none !important;}
@media (min-width:250px) and (max-width:510px) {
  html[data-theme="light"] body main.main-layout > section.preview-section .preview-stage > .preview-nav > button:is(#side-browse-cases,#side-browse-stickers):is(#side-browse-cases,#side-browse-stickers) {
    color:#293971 !important;
    background:var(--cs377-catalog) !important;
  }
}