/* v11.1.0 - desktop stage polish: remove black scroll bands + premium bottom navigation */
@media (min-width: 769px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 52% 34%, rgba(242,211,135,.28), transparent 42%),
      linear-gradient(90deg,#d6c696 0%, #efe0ad 18%, #f7ecc5 48%, #ead7a0 78%, #c0ad79 100%)!important;
  }

  body[data-theme="dark"]{
    background:
      radial-gradient(circle at 52% 34%, rgba(242,211,135,.24), transparent 42%),
      linear-gradient(90deg,#cdbb86 0%, #efe0ad 18%, #f7ecc5 48%, #ead7a0 78%, #c0ad79 100%)!important;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
      radial-gradient(circle at 26% 62%, rgba(0,0,0,.10), transparent 32%),
      radial-gradient(circle at 88% 44%, rgba(0,0,0,.08), transparent 30%),
      repeating-linear-gradient(0deg, rgba(55,39,12,.035) 0 1px, transparent 1px 44px),
      repeating-linear-gradient(90deg, rgba(55,39,12,.025) 0 1px, transparent 1px 44px);
  }

  .topbar,
  .controls{
    width:100vw!important;
    max-width:100vw!important;
    left:0!important;
    right:0!important;
  }

  .stage{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    overflow-x:clip!important;
    overflow-y:visible!important;
    background:
      linear-gradient(180deg, rgba(255,246,212,.78), rgba(237,218,163,.92) 48%, rgba(213,190,126,.88)),
      radial-gradient(circle at 50% 30%, rgba(255,255,255,.35), transparent 45%),
      repeating-linear-gradient(0deg, rgba(54,37,12,.035) 0 1px, transparent 1px 46px),
      repeating-linear-gradient(90deg, rgba(54,37,12,.026) 0 1px, transparent 1px 46px)!important;
    box-shadow:inset 0 28px 70px rgba(0,0,0,.20), inset 0 -30px 80px rgba(0,0,0,.16);
  }

  .stage::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(circle at 16% 14%, rgba(0,0,0,.10), transparent 24%),
      radial-gradient(circle at 82% 76%, rgba(0,0,0,.08), transparent 28%),
      repeating-linear-gradient(-8deg, transparent 0 82px, rgba(0,0,0,.035) 82px 84px, transparent 84px 164px);
    opacity:.72;
  }
  .stage > *{position:relative;z-index:1;}

  .controls{
    height:102px!important;
    padding:14px 28px 16px!important;
    grid-template-columns:minmax(170px,230px) minmax(240px,1fr) auto minmax(190px,260px)!important;
    gap:18px!important;
    background:
      linear-gradient(180deg, rgba(15,12,7,.78), rgba(0,0,0,.94)),
      radial-gradient(circle at 50% 0%, rgba(214,169,40,.18), transparent 55%)!important;
    border-top:1px solid rgba(244,203,83,.42)!important;
    box-shadow:0 -18px 44px rgba(0,0,0,.45), inset 0 1px rgba(255,235,170,.16)!important;
    backdrop-filter:blur(18px) saturate(135%);
  }

  .ctrl-btn{
    height:58px!important;
    border-radius:18px!important;
    border:1px solid rgba(236,194,64,.42)!important;
    background:linear-gradient(180deg, rgba(255,239,185,.13), rgba(255,223,128,.06))!important;
    color:#f8e7b3!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.24)!important;
    letter-spacing:.01em;
    transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
  .ctrl-btn:hover:not(:disabled){
    transform:translateY(-2px);
    border-color:rgba(255,215,86,.72)!important;
    background:linear-gradient(180deg, rgba(255,229,145,.22), rgba(201,154,19,.14))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.18), 0 16px 34px rgba(0,0,0,.34)!important;
  }
  .ctrl-next{
    color:#1d1305!important;
    border-color:rgba(255,231,130,.70)!important;
    background:linear-gradient(180deg,#fff0b8 0%, #f3ca54 52%, #bd8c13 100%)!important;
    box-shadow:0 16px 38px rgba(214,169,40,.25), inset 0 1px rgba(255,255,255,.55)!important;
  }

  .pager{
    align-self:center;
    padding:0 12px;
  }
  #pageCount{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:110px;
    height:32px;
    margin:0 auto 9px;
    padding:0 18px;
    border-radius:999px;
    color:#ffe9a2;
    background:rgba(255,221,112,.08);
    border:1px solid rgba(255,221,112,.18);
    box-shadow:inset 0 1px rgba(255,255,255,.08);
    font-size:14px;
    letter-spacing:.08em;
  }
  .range{
    height:5px!important;
    overflow:visible;
    background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(244,203,83,.28), rgba(255,255,255,.10))!important;
    box-shadow:0 1px 0 rgba(255,255,255,.08), inset 0 1px 3px rgba(0,0,0,.55);
  }
  .range i{
    width:26px!important;
    height:26px!important;
    background:linear-gradient(180deg,#ffe27b,#d8a617 55%,#8f6207)!important;
    border:1px solid rgba(255,244,182,.7);
    box-shadow:0 8px 18px rgba(0,0,0,.45), 0 0 0 7px rgba(214,169,40,.08)!important;
  }

  .view-buttons{
    background:rgba(255,238,175,.06);
    border:1px solid rgba(244,203,83,.18);
    border-radius:18px;
    padding:7px;
    box-shadow:inset 0 1px rgba(255,255,255,.08);
  }
  .view-btn{
    width:48px!important;
    height:46px!important;
    border-radius:13px!important;
    border:1px solid rgba(244,203,83,.26)!important;
    background:rgba(255,237,173,.08)!important;
    color:#ffe9a2!important;
    transition:transform .2s ease, background .2s ease;
  }
  .view-btn:hover{transform:translateY(-1px);background:rgba(255,237,173,.16)!important;}
  .view-btn.is-active{
    color:#1b1205!important;
    background:linear-gradient(180deg,#ffe47f,#c99719)!important;
    border-color:rgba(255,236,153,.72)!important;
    box-shadow:0 10px 20px rgba(214,169,40,.20), inset 0 1px rgba(255,255,255,.52)!important;
  }

  body.op-catalog-fullscreen .controls{display:none!important;}
  body.op-catalog-fullscreen .stage{
    min-height:100vh!important;
    padding-bottom:10px!important;
  }
}