/* ============================================================
   IME — Quick View (eye icon + modal)
   Uses the tokens from mystyle.css:
   --ime-ink, --ime-ink-soft, --ime-muted, --ime-paper, --ime-paper-alt,
   --ime-line, --ime-red, --ime-red-dark, --ime-red-tint, --ime-radius
   ============================================================ */

/* ---------- Eye button on the product card ---------- */
/* keep the eye's z-index inside its own card so it never overlaps the sticky header */
.ime-best-card{ isolation:isolate; }
.ime-qv-btn{
  position:absolute; top:10px; right:10px; z-index:1;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ime-red);
  border:1px solid var(--ime-line);
  box-shadow:0 4px 12px rgba(20,22,27,.14);
  font-size:15px; cursor:pointer; padding:0;
  opacity:0; transform:translateY(-6px) scale(.9);
  transition:opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.ime-best-card:hover .ime-qv-btn,
.ime-qv-btn:focus-visible{ opacity:1; transform:none; }
.ime-qv-btn:hover{ background:var(--ime-red); color:#fff; border-color:var(--ime-red); }

/* dark tooltip, like the reference site */
.ime-qv-btn::after{
  content:"Quick View";
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--ime-ink); color:#fff;
  font-size:11.5px; font-weight:600; line-height:1;
  padding:7px 10px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transform:translateY(-3px);
  transition:opacity .15s ease, transform .15s ease;
}
.ime-qv-btn:hover::after{ opacity:1; transform:none; }

/* touch devices have no hover -> always show the eye */
@media (hover:none){
  .ime-qv-btn{ opacity:1; transform:none; width:34px; height:34px; font-size:14px; }
  .ime-qv-btn::after{ display:none; }
}

/* ---------- Modal shell ---------- */
html.ime-qv-lock, html.ime-qv-lock body{ overflow:hidden; }

.ime-qv{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:24px; visibility:hidden; pointer-events:none;
}
.ime-qv.is-open{ visibility:visible; pointer-events:auto; }

.ime-qv__backdrop{
  position:absolute; inset:0;
  background:rgba(20,22,27,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.ime-qv.is-open .ime-qv__backdrop{ opacity:1; }

.ime-qv__dialog{
  position:relative; width:100%; max-width:980px; max-height:calc(100vh - 48px);
  background:var(--ime-paper); border-radius:20px; outline:none;
  box-shadow:0 30px 80px rgba(20,22,27,.35);
  overflow:hidden; display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.ime-qv.is-open .ime-qv__dialog{ opacity:1; transform:none; }

.ime-qv__close{
  position:absolute; top:14px; right:14px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--ime-line); color:var(--ime-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; padding:0; transition:all .2s ease;
}
.ime-qv__close:hover{ background:var(--ime-red); border-color:var(--ime-red); color:#fff; transform:rotate(90deg); }

/* ---------- Body layout ---------- */
.ime-qv__body{ display:grid; grid-template-columns:42% 58%; min-height:0; flex:1; }

.ime-qv__media{
  background:var(--ime-paper-alt);
  border-right:1px solid var(--ime-line);
  padding:28px 24px; display:flex; flex-direction:column; gap:16px;
}
.ime-qv__stage{
  flex:1; min-height:260px; background:#fff; border:1px solid var(--ime-line);
  border-radius:var(--ime-radius); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ime-qv__stage img{ max-width:100%; max-height:340px; object-fit:contain; transition:opacity .25s ease; }

.ime-qv__thumbs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ime-qv__thumb{
  width:58px; height:58px; padding:4px; background:#fff; cursor:pointer;
  border:2px solid var(--ime-line); border-radius:10px; transition:border-color .2s ease, transform .2s ease;
}
.ime-qv__thumb img{ width:100%; height:100%; object-fit:contain; }
.ime-qv__thumb:hover{ transform:translateY(-2px); }
.ime-qv__thumb.is-active{ border-color:var(--ime-red); }

.ime-qv__info{ padding:30px 32px 24px; display:flex; flex-direction:column; min-width:0; min-height:0; max-height:calc(100vh - 48px); }

.ime-qv__chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; padding-right:44px; }
.ime-qv__chip{
  background:var(--ime-red-tint); color:var(--ime-red);
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; line-height:1.2;
}
.ime-qv__chip--muted{ background:var(--ime-paper-alt); color:var(--ime-ink-soft); }
.ime-qv__chip[hidden]{ display:none; }
.ime-qv__stock{ margin-left:auto; color:#1E8E3E; font-size:12px; font-weight:700; }
.ime-qv__stock i{ font-size:11px; margin-right:3px; }

.ime-qv__title{ font-size:24px; font-weight:800; line-height:1.25; color:var(--ime-ink); margin:0 0 8px; }

.ime-qv__rating{ display:flex; align-items:center; gap:2px; color:#f5a623; font-size:13px; margin-bottom:10px; }
.ime-qv__rating[hidden]{ display:none; }
.ime-qv__rating .ime-qv__star-off{ color:#d8dbe0; }
.ime-qv__rating span{ color:var(--ime-muted); font-size:12.5px; font-weight:600; margin-left:7px; }

.ime-qv__desc{ font-size:14px; line-height:1.65; color:var(--ime-ink-soft); margin:0 0 14px; }
.ime-qv__desc[hidden]{ display:none; }

/* scrolling area (keeps the buttons pinned) */
.ime-qv__scroll{
  flex:1; min-height:0; overflow-y:auto; padding-right:6px; margin-right:-6px;
  border-top:1px solid var(--ime-line); padding-top:16px;
}
.ime-qv__scroll::-webkit-scrollbar{ width:6px; }
.ime-qv__scroll::-webkit-scrollbar-thumb{ background:#d5d7dd; border-radius:6px; }

.ime-qv__section[hidden]{ display:none; }
.ime-qv__section:not([hidden]) ~ .ime-qv__section:not([hidden]){ margin-top:20px; }
.ime-qv__section h4{
  font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ime-ink); margin:0 0 12px; display:flex; align-items:center; gap:10px;
}
.ime-qv__section h4::before{ content:""; width:4px; height:15px; background:var(--ime-red); border-radius:2px; }

.ime-qv__feats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.ime-qv__feats li{ display:flex; gap:9px; font-size:13.5px; line-height:1.5; color:var(--ime-ink-soft); }
.ime-qv__feats li i{ color:var(--ime-red); font-size:13px; margin-top:3px; flex-shrink:0; }
.ime-qv__feats strong{ color:var(--ime-ink); font-weight:700; }

.ime-qv__specs{ margin:0; border:1px solid var(--ime-line); border-radius:12px; overflow:hidden; }
.ime-qv__spec{ display:grid; grid-template-columns:38% 62%; font-size:13.5px; }
.ime-qv__spec:nth-child(odd){ background:var(--ime-paper-alt); }
.ime-qv__spec dt{ font-weight:700; color:var(--ime-ink); padding:10px 14px; margin:0; }
.ime-qv__spec dd{ margin:0; padding:10px 14px; color:var(--ime-ink-soft); line-height:1.5; word-break:break-word; }

.ime-qv__more{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:13px; font-weight:700; color:var(--ime-red); text-decoration:none!important; }
.ime-qv__more[hidden]{ display:none; }
.ime-qv__more i{ font-size:11px; transition:transform .2s ease; }
.ime-qv__more:hover{ color:var(--ime-red-dark); }
.ime-qv__more:hover i{ transform:translateX(3px); }

/* ---------- Action buttons ---------- */
.ime-qv__actions{ display:flex; gap:12px; padding-top:18px; margin-top:16px; border-top:1px solid var(--ime-line); }
.ime-qv__btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:700; line-height:1; padding:14px 18px;
  border-radius:10px; cursor:pointer; text-decoration:none!important;
  transition:all .2s ease; border:1px solid transparent;
}
.ime-qv__btn--primary{ background:var(--ime-red); color:#fff!important; box-shadow:var(--ime-shadow-red); }
.ime-qv__btn--primary:hover{ background:var(--ime-red-dark); transform:translateY(-1px); }
.ime-qv__btn--primary.is-done{ background:#1E8E3E; box-shadow:none; }
.ime-qv__btn--ghost{ background:#fff; color:var(--ime-ink)!important; border-color:var(--ime-line); }
.ime-qv__btn--ghost:hover{ border-color:var(--ime-ink); background:var(--ime-ink); color:#fff!important; }
.ime-qv__btn--ghost i{ font-size:12px; }

/* ---------- Loading + error ---------- */
.ime-qv__state{ min-height:420px; }
.ime-qv__loading{ display:grid; grid-template-columns:42% 58%; gap:28px; padding:28px; }
.ime-qv__loading[hidden], .ime-qv__error[hidden], .ime-qv__body[hidden]{ display:none!important; }
.ime-qv__skel-col{ display:flex; flex-direction:column; gap:14px; padding-top:30px; }
.ime-qv__skel{
  border-radius:10px;
  background:linear-gradient(90deg,#f0f0f3 25%,#e4e4e9 37%,#f0f0f3 63%); background-size:400% 100%;
  animation:imeQvShimmer 1.3s ease infinite;
}
.ime-qv__skel--img{ min-height:340px; }
.ime-qv__skel--s{ height:18px; width:30%; }
.ime-qv__skel--l{ height:30px; width:85%; }
.ime-qv__skel--m{ height:16px; width:100%; }
@keyframes imeQvShimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

.ime-qv__error{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:40px; }
.ime-qv__error i{ font-size:38px; color:var(--ime-red); }
.ime-qv__error p{ margin:0; color:var(--ime-ink-soft); }
.ime-qv__error .ime-qv__btn{ flex:none; }

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .ime-qv__title{ font-size:21px; }
  .ime-qv__info{ padding:26px 24px 20px; }
}
@media (max-width:767px){
  .ime-qv{ padding:0; align-items:flex-end; }
  .ime-qv__dialog{ max-width:100%; max-height:92vh; border-radius:20px 20px 0 0; transform:translateY(40px); overflow-y:auto; }
  .ime-qv.is-open .ime-qv__dialog{ transform:none; }
  .ime-qv__body, .ime-qv__loading{ grid-template-columns:1fr; }
  .ime-qv__media{ border-right:0; border-bottom:1px solid var(--ime-line); padding:20px 18px 14px; }
  .ime-qv__stage{ min-height:200px; }
  .ime-qv__stage img{ max-height:220px; }
  .ime-qv__info{ max-height:none; padding:20px 18px 22px; }
  .ime-qv__dialog > *{ flex-shrink:0; }
  .ime-qv__body{ flex:none; min-height:auto; }
  .ime-qv__info{ flex:none; min-height:auto; }
  .ime-qv__scroll{ flex:none!important; min-height:auto!important; overflow:visible!important; padding-right:0; margin-right:0; }
  .ime-qv__feats{ grid-template-columns:1fr; }
  .ime-qv__spec{ grid-template-columns:42% 58%; }
  .ime-qv__actions{ position:static!important; bottom:auto!important; background:transparent!important; flex-direction:column; }
  .ime-qv__info{ padding-bottom:88px; } /* clears the floating chat button */
  /* close button stays visible while the sheet scrolls */
  .ime-qv__close{
    position:sticky; top:10px; right:auto;
    align-self:flex-end; flex-shrink:0;
    margin:10px 12px -48px 0; /* negative bottom margin = floats over content, takes no space */
    z-index:10; box-shadow:0 4px 14px rgba(20,22,27,.22);
  }
}
@media (prefers-reduced-motion:reduce){
  .ime-qv__dialog,.ime-qv__backdrop,.ime-qv-btn,.ime-qv__skel{ transition:none; animation:none; }
}

/* ---------- Empty state (product has no specs / highlights yet) ---------- */
.ime-qv__empty{ display:flex; align-items:center; gap:14px; padding:18px; background:var(--ime-paper-alt); border:1px dashed var(--ime-line); border-radius:12px; }
.ime-qv__empty[hidden]{ display:none; }
.ime-qv__empty i{ font-size:22px; color:var(--ime-red); }
.ime-qv__empty p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ime-ink-soft); }