/* =========================================================
   EPHARO PRODUCT PREVIEW - 4L AI PANEL
   AWS-ready clean preview styling

   Scope:
   - only #eph-nav-preview / 4L panel
   - does not touch 1L/2L/3L drawer glass background
   ========================================================= */

@media (min-width:1024px){

  #eph-nav-preview{
    position:fixed;
    width:380px;
    max-width:38vw;

    top:var(--eph-nav-offset);
    height:calc(100vh - var(--eph-nav-offset) - 8px);

    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;

    padding:14px 18px 18px;
    overflow:hidden;

    border-radius:24px;
    border:1px solid rgba(20,92,51,.20);
    box-shadow:
      0 22px 55px rgba(15,23,42,.20),
      inset 0 1px 0 rgba(255,255,255,.75);

    background:
      radial-gradient(
        circle at 18% 18%,
        rgba(255,255,255,.98) 0%,
        rgba(248,250,249,.94) 52%,
        rgba(241,247,244,.90) 100%
      );

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    opacity:0;
    pointer-events:none;
    transform:translateX(8px);
    transition:
      opacity .18s ease-out,
      transform .18s ease-out;

    z-index:10050;
  }

  body.eph-preview-no-l3 #eph-nav-preview{
    left:calc(
      var(--eph-nav-w)
      + var(--eph-nav-col2)
      + var(--eph-nav-preview-gap)
    );
  }

  body.eph-preview-has-l3 #eph-nav-preview{
    left:calc(
      var(--eph-nav-w)
      + var(--eph-nav-col2)
      + var(--eph-nav-col3)
      + var(--eph-nav-preview-gap)
    );
  }

  body.eph-preview-open #eph-nav-preview{
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
  }
}

#eph-nav-preview .eph-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 6px 0;
}

#eph-nav-preview [data-preview-close],
#eph-nav-preview [data-preview-close-all]{
  margin:0;
  align-self:auto;
  flex:0 0 auto;
}

#eph-nav-preview .eph-preview-image{
  width:100%;
  height:auto;
  max-height:190px;
  object-fit:contain;
  border-radius:18px;
  display:block;
  margin:0;
  padding:0;
  background:transparent;
}

#eph-nav-preview .eph-preview-title{
  font-size:18px;
  line-height:1.22;
  margin:2px 0 0;
  color:#173b2a;
  font-weight:700;
}

#eph-nav-preview .eph-preview-desc{
  font-size:14px;
  line-height:1.46;
  margin:4px 0 0;
  color:#4a5f52;
}

#eph-nav-preview .eph-preview-maker{
  font-size:13px;
  line-height:1.35;
  margin:4px 0 0;
  color:#4a5f52;
}

#eph-nav-preview .eph-preview-link{
  margin-top:8px;
  align-self:flex-start;
  padding:8px 14px;
  border-radius:999px;
  background:#165c34;
  color:#ffffff;
  font-size:14px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 10px 22px rgba(20,92,51,.18);
}

#eph-nav-preview .eph-preview-link:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

/* 4L Xenyra trigger uses global .xenyra-combo styling */
#eph-nav-preview .eph-xenyra-4l{
  flex:0 0 auto;
}