/* =========================================================
   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;
}
/* EPHARO canonical Xenyra identity */
#eph-nav-preview .xenyra-orb {
  overflow: hidden !important;
}

#eph-nav-preview .xenyra-orb .xenyra-logo {
  display: block !important;
  width: 72% !important;
  height: 72% !important;
  margin: auto !important;
  object-fit: contain !important;
  
  
}

/* =========================================================
   EPHARO AWS — STABLE PRODUCT DRAWER GEOMETRY
   No runtime positioning, no width changes during hover.
   ========================================================= */

@media (min-width: 1024px) {
  #eph-nav-drawer .eph-nav-children,
  #eph-nav-drawer .eph-nav-children-2 {
    width: 324px !important;
    min-width: 324px !important;
    max-width: 324px !important;
    box-sizing: border-box !important;
  }

  #eph-nav-preview {
    width: 386px !important;
    min-width: 386px !important;
    max-width: 386px !important;
    box-sizing: border-box !important;
  }

  #eph-nav-drawer .eph-nav-children,
  #eph-nav-drawer .eph-nav-children-2,
  #eph-nav-preview {
    transform: none !important;
    transition:
      opacity 120ms linear,
      visibility 120ms linear !important;
  }
}

/* Originálny obrázok Xenyra namiesto textového X */
#eph-nav-preview .xenyra-orb {
  overflow: hidden;
}

#eph-nav-preview .xenyra-logo {
  display: block;
  width: 56%;
  height: 56%;
  margin: auto;
  object-fit: contain;
  transform-origin: center;
}


/* EPHARO AI 2060 FOURTH COLUMN CLOSE */
#eph-nav-preview .eph-mega-close{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  flex:0 0 38px;
  width:38px;
  height:38px;
  margin:0;
  padding:0;
  border:1px solid rgba(18,108,61,.14);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#174f30;
  box-shadow:0 6px 20px rgba(17,69,42,.08);
  cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease,border-color .16s ease;
}

#eph-nav-preview .eph-mega-close span{
  position:absolute;
  inset:0;
  display:block;
}

#eph-nav-preview .eph-mega-close span::before,
#eph-nav-preview .eph-mega-close span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:2.5px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
}

#eph-nav-preview .eph-mega-close span::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

#eph-nav-preview .eph-mega-close span::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

#eph-nav-preview .eph-mega-close:hover,
#eph-nav-preview .eph-mega-close:focus-visible{
  transform:scale(1.06);
  background:#e4f4ea;
  border-color:rgba(18,108,61,.3);
  box-shadow:0 9px 24px rgba(17,98,54,.16);
  outline:none;
}