/* Nopixan Product Media Stack v1.34.30
 * Intrinsic, no-CLS media frames for App Shell product routes.
 */
.nxms{
  --p1:var(--nxwa-p1,var(--nxapp-p1,#ccd5ae));
  --p2:var(--nxwa-p2,var(--nxapp-p2,#e9edc9));
  --p3:var(--nxwa-p3,var(--nxapp-p3,#fefae0));
  --p4:var(--nxwa-p4,var(--nxapp-p4,#faedcd));
  --p5:var(--nxwa-p5,var(--nxapp-p5,#d4a373));
  --nxms-line:color-mix(in srgb,var(--p5) 13%,rgba(15,23,42,.09));
  --nxms-surface:#fff;
  --nxms-radius:22px;
  --nxms-gap:12px;
  width:100%;
  min-width:0;
  direction:rtl;
  text-align:right;
  font-family:var(--nxapp-font-family,"NXVazir","Vazir-Variable","Vazir","Vazirmatn",Tahoma,Arial,sans-serif)!important;
  box-sizing:border-box;
}
.nxms,.nxms *,.nxms *::before,.nxms *::after{box-sizing:border-box;}
.nxms-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:var(--nxms-gap);
  width:100%;
  min-width:0;
}

/* The aspect ratio is emitted by PHP from the actual WordPress attachment metadata.
   This reserves the final height before the image request finishes. */
.nxms-item{
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
  min-height:1px;
  aspect-ratio:var(--nxms-aspect,1/1);
  overflow:hidden;
  border:1px solid var(--nxms-line);
  border-radius:var(--nxms-radius);
  background:var(--nxms-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
  contain:layout paint;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.nxms-media-frame{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 18%,color-mix(in srgb,var(--p5) 8%,transparent),transparent 34%),
    radial-gradient(circle at 76% 76%,color-mix(in srgb,var(--p1) 12%,transparent),transparent 38%),
    linear-gradient(105deg,#f5f5f4 18%,#fff 42%,#f3f4f6 64%);
  background-size:auto,auto,260% 100%;
  animation:nxmsFrameShimmer 1.15s ease-in-out infinite;
}
.nxms-item.is-ready .nxms-media-frame{
  animation:none;
  background:var(--nxms-surface);
}
.nxms-item.is-error .nxms-media-frame{
  animation:none;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--p5) 10%,transparent),transparent 34%),
    color-mix(in srgb,var(--p3) 24%,#fff 76%);
}
.nxms-img,.nxms-video{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent;
  border:0;
  border-radius:inherit;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  -webkit-user-drag:none;
  user-select:none;
}
.nxms-img.is-loaded,.nxms-video.is-loaded{animation:nxmsMediaReveal .18s ease-out both;}

/* App Shell must not keep its old generic 720px reservation once the intrinsic stack exists.
   This stylesheet is only registered for product media, so the direct selector is safe and
   prevents even the first pre-JS paint from reserving the old generic height. */
.nxapp-product-media,
.nxapp-product-media:has(.nxms[data-nxms-intrinsic-layout="1"]),
.nxapp-product-media.nxms-layout-ready,
.nxapp-product-media-real:has(.nxms[data-nxms-intrinsic-layout="1"]){
  min-height:0!important;
  height:auto!important;
}
.nxapp-product-media.nxms-layout-ready .nxapp-product-media-real{
  min-height:0!important;
  height:auto!important;
  opacity:1!important;
  visibility:visible!important;
}
.nxapp-product .nxms--app .nxms-grid,
.nxapp-product-layer .nxms--app .nxms-grid,
.nxgc-single .nxms-grid{
  grid-template-columns:minmax(0,1fr)!important;
}

@media (max-width:767px){
  .nxms{--nxms-radius:22px;--nxms-gap:12px;}
  .nxms-item{border-width:1px;}
  .nxms[data-nxms-mobile-media-order="gallery_first"] .nxms-item[data-nxms-role="video"]{order:0;}
  .nxms[data-nxms-mobile-media-order="gallery_first"] .nxms-item[data-nxms-role="gallery"]{order:1;}
  .nxms[data-nxms-mobile-media-order="gallery_first"] .nxms-item[data-nxms-role="featured"]{order:2;}
}

@media (min-width:768px){
  .nxms{--nxms-radius:26px;--nxms-gap:16px;}
}

@media (min-width:980px){
  /* Standalone shortcode keeps its old two-column option; App product stays vertical. */
  .nxms:not(.nxms--app) .nxms-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nxms--app .nxms-grid,.nxgc-single .nxms-grid{grid-template-columns:minmax(0,1fr)!important;}
}

@media (min-width:1024px){
  .nxms{--nxms-radius:28px;--nxms-gap:18px;}
  .nxapp-product .nxms-item,
  .nxapp-product-layer .nxms-item,
  .nxgc-single .nxms-item{border-radius:28px!important;}
}

/* Dark mode follows the single theme source from Admin Panel/App Shell. */
:is(html[data-nxapp-theme="dark"],html[data-nxadm-theme="dark"],html.nxapp-theme-dark,body.nxapp-theme-dark,body.nxapp-dark) .nxms,
.nxms.nxms-theme-dark{
  --nxms-surface:color-mix(in srgb,var(--nxapp-dark-bg,var(--nx-dark-bg,#101624)) 90%,#fff 5%);
  --nxms-line:color-mix(in srgb,var(--p5) 22%,rgba(255,255,255,.11));
  color-scheme:dark;
}
:is(html[data-nxapp-theme="dark"],html[data-nxadm-theme="dark"],html.nxapp-theme-dark,body.nxapp-theme-dark,body.nxapp-dark) .nxms-media-frame,
.nxms.nxms-theme-dark .nxms-media-frame{
  background:
    radial-gradient(circle at 22% 18%,color-mix(in srgb,var(--p5) 12%,transparent),transparent 34%),
    radial-gradient(circle at 76% 76%,color-mix(in srgb,var(--p1) 8%,transparent),transparent 38%),
    linear-gradient(105deg,color-mix(in srgb,var(--nxapp-dark-bg,#101624) 84%,#fff 5%) 18%,color-mix(in srgb,var(--nxapp-dark-bg,#101624) 72%,#fff 11%) 42%,color-mix(in srgb,var(--nxapp-dark-bg,#101624) 86%,#fff 4%) 64%);
  background-size:auto,auto,260% 100%;
}
:is(html[data-nxapp-theme="dark"],html[data-nxadm-theme="dark"],html.nxapp-theme-dark,body.nxapp-theme-dark,body.nxapp-dark) .nxms-item.is-ready .nxms-media-frame,
.nxms.nxms-theme-dark .nxms-item.is-ready .nxms-media-frame{background:var(--nxms-surface);}

@keyframes nxmsFrameShimmer{0%{background-position:0 0,0 0,100% 0}100%{background-position:0 0,0 0,-100% 0}}
@keyframes nxmsMediaReveal{from{opacity:.82}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.nxms-media-frame,.nxms-img.is-loaded,.nxms-video.is-loaded{animation:none!important;}}