/* Novre — Popup CSS (sitewide) */
.np-popup { position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.np-popup.is-open { pointer-events: all; opacity: 1; }
.np-popup__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); cursor: pointer; }
/* Mobile: bottom sheet */
.np-popup__sheet { position: absolute; bottom: 0; left: 0; right: 0; height: 90vh; height: 90dvh; max-height: 90vh; max-height: 90dvh; background: var(--bg-pure); overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 3px solid var(--blue); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.np-popup.is-open .np-popup__sheet { transform: translateY(0); }
/* Desktop: centered narrow column matching product page width */
@media (min-width: 600px) {
  .np-popup__sheet {
    top: 5vh; left: 50%; right: auto; bottom: auto;
    width: min(560px, 96vw);
    height: 90vh;
	height: 90dvh;
	max-height: 90dvh;
    max-height: 90vh;
    border-top: none;
    border-left: 3px solid var(--blue);
    transform: translateX(-50%);
    border-radius: 2px;
	padding-top: env(safe-area-inset-top, 0);
  	padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .np-popup.is-open .np-popup__sheet { transform: translateX(-50%); }
}
.np-popup__toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--bg-pure); z-index: 3; }
.np-popup__back { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: var(--blue); background: transparent; border: none; cursor: pointer; padding: 6px 0; transition: color 0.2s; }
.np-popup__back:hover { color: var(--blue-dark); }
.np-popup__back i { font-size: 12px; }
.np-popup__close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--rule); color: var(--ink-muted); cursor: pointer; font-size: 15px; transition: all 0.2s; margin-left: auto; }
.np-popup__close:hover { background: var(--ink); color: #fff; }
.np-popup__body { padding: 0; }
.np-popup__loading { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.n-spinner { width: 28px; height: 28px; border: 2px solid var(--rule); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.np-popup__skeleton { display: grid; grid-template-columns: 1fr; min-height: 300px; }
.np-popup__skeleton-img { background: var(--bg); aspect-ratio: 1; width: 100%; }
.np-popup__skeleton-info { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
@keyframes sk-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.np-sk-line { border-radius: 2px; background: linear-gradient(90deg, var(--rule) 25%, var(--bg) 50%, var(--rule) 75%); background-size: 800px 100%; animation: sk-shimmer 1.4s ease infinite; }
.np-sk-line--title  { height: 28px; width: 75%; }
.np-sk-line--short  { height: 14px; width: 50%; }
.np-sk-line--price  { height: 22px; width: 40%; margin-top: 4px; }
.np-sk-line--btn    { height: 44px; width: 100%; margin-top: 8px; background: linear-gradient(90deg, var(--blue-10) 25%, var(--blue-pale) 50%, var(--blue-10) 75%); background-size: 800px 100%; animation: sk-shimmer 1.4s ease infinite; }
/* ── When .sp renders inside the popup, neutralise its breakout rules ── */
.np-popup .sp,
.np-popup .sp__wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.np-popup .sp__gallery {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.np-popup .sp__info {
  padding: 20px 16px 32px !important;
}
.np-popup .sp__thumbs {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* Stop single-product's @media (min-width: 600px) flex+centering from
   triggering when the popup itself happens to be >=600px wide on tablet
   — the popup is its own container, not a viewport-based one */
.np-popup .sp {
  display: block !important;
  background: transparent !important;
}