/* Known-fragrance route: keep search results visible and independently scrollable. */
@media(min-width:981px){
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app[data-mode="known"]:not(.vsf-final-overlay) .vsf-known-flow:not([hidden]){
    grid-template-columns:minmax(0,1fr) minmax(250px,.92fr)!important;
    grid-template-areas:
      "kicker kicker"
      "title title"
      "intro intro"
      "search retrieve"
      "status retrieve"
      "results retrieve"
      "selected selected"
      "actions actions"!important;
    grid-template-rows:auto auto auto auto auto minmax(104px,1fr) auto auto!important;
    overflow:hidden!important;
  }

  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app[data-mode="known"]:not(.vsf-final-overlay) .vsf-known-results:not([hidden]){
    grid-area:results!important;
    display:grid!important;
    min-height:104px!important;
    max-height:clamp(132px,22vh,226px)!important;
    margin-top:6px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    scrollbar-gutter:stable!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(113,64,168,.35) transparent!important;
  }

  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app[data-mode="known"]:not(.vsf-final-overlay) .vsf-profile-retrieve{
    grid-area:retrieve!important;
    max-height:100%!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
  }

  /* The known-perfume route has no progress rail, so the hero can support
     a slightly larger bottle without changing guided-mode geometry. */
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app[data-mode="known"]:not(.vsf-final-overlay) .vsf-bottle{
    scale:1.30!important;
    transform-origin:center center!important;
  }
}

/* High OS scaling can expose a desktop monitor as a sub-981px CSS viewport.
   Preserve the two-column known route in that desktop-only state. */
@media(min-width:700px){
  html.vsf-scaled-desktop
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app[data-mode="known"]:not(.vsf-final-overlay) .vsf-known-flow:not([hidden]){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(240px,.92fr)!important;
    grid-template-areas:
      "kicker kicker"
      "title title"
      "intro intro"
      "search retrieve"
      "status retrieve"
      "results retrieve"
      "selected selected"
      "actions actions"!important;
    grid-template-rows:auto auto auto auto auto minmax(92px,1fr) auto auto!important;
    column-gap:10px!important;
    height:100%!important;
    max-height:100%!important;
    overflow:hidden!important;
  }

  html.vsf-scaled-desktop
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app[data-mode="known"]:not(.vsf-final-overlay) .vsf-known-results:not([hidden]){
    display:grid!important;
    min-height:92px!important;
    max-height:clamp(112px,20vh,190px)!important;
    margin-top:5px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
  }

  html.vsf-scaled-desktop
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app[data-mode="known"]:not(.vsf-final-overlay) .vsf-profile-retrieve{
    max-height:100%!important;
    overflow:auto!important;
  }

  html.vsf-scaled-desktop .vsf-app[data-mode="known"]{
    --vsf-known-bottle-scale:.82;
  }
  html.vsf-scaled-desktop[data-vsf-desktop-density="compact"] .vsf-app[data-mode="known"]{
    --vsf-known-bottle-scale:.76;
  }
  html.vsf-scaled-desktop[data-vsf-desktop-density="tight"] .vsf-app[data-mode="known"]{
    --vsf-known-bottle-scale:.68;
  }
  html.vsf-scaled-desktop
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app[data-mode="known"]:not(.vsf-final-overlay) .vsf-bottle{
    scale:var(--vsf-known-bottle-scale,.82)!important;
  }
}