/* Reserve the scrollbar before a growing document would narrow the viewport. */
html { scrollbar-gutter: stable; }
/* The existing AI controller adds the theme toggle after parsing. Reserve all
   three authored icon slots before that enhancement arrives. */
.ng-header .ng-header__actions {
  inline-size: calc(120px + .9rem);
  min-inline-size: calc(120px + .9rem);
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .ng-header .ng-header__actions {
    inline-size: calc(108px + .7rem);
    min-inline-size: calc(108px + .7rem);
  }
}

/* Market gradients are captured once per document, independent of AJAX price
   direction. Product wrappers below retain their existing up/down feedback. */
#market-board.ng-market .ng-market-card .ng-market-table tr[data-ngc-market-direction="up"] {
  --ng-row-tint: var(--ng-up-soft);
  --ng-row-accent: var(--ng-up);
}
#market-board.ng-market .ng-market-card .ng-market-table tr[data-ngc-market-direction="down"] {
  --ng-row-tint: var(--ng-down-soft);
  --ng-row-accent: var(--ng-down);
}
#market-board.ng-market .ng-market-card .ng-market-table tr[data-ngc-market-direction="same"] {
  --ng-row-tint: var(--ng-glass-2);
  --ng-row-accent: var(--ng-border-2);
}
#market-board.ng-market .ng-market-card .ng-market-table .ng-pulse {
  inline-size: 6px;
  block-size: 6px;
  min-inline-size: 6px;
  animation: none;
  transform: none;
  opacity: .75;
  transition: background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
#market-board.ng-market .ng-market-card .ng-market-table tr.ngc-market-state .ng-pulse {
  background: var(--ng-row-accent);
  box-shadow: 0 0 3px var(--ng-row-accent);
}
#market-board.ng-market .ng-market-card .ng-market-table tr.ngc-price-flash .ng-pulse {
  opacity: 1;
  box-shadow: 0 0 5px 2px var(--ng-row-accent), 0 0 11px 3px var(--ng-row-tint);
  animation: ngc-price-light 1200ms ease-out 2;
}
/* Reserve product geometry before the footer script adds feedback state. */
body .ng-page .ng-price-row .wp-block-woocommerce-product-price,
#price-block > .wp-block-woocommerce-product-price {
  --ngc-direction-tint: var(--ng-glass-2);
  --ngc-direction-color: var(--ng-border-2);
  box-sizing: border-box;
  min-block-size: 30px;
  padding: 3px 7px;
  border: 1px solid var(--ngc-direction-color);
  border-radius: 9px;
  background: linear-gradient(100deg, transparent, var(--ngc-direction-tint));
  background-clip: padding-box;
  box-shadow: inset -2px 0 0 var(--ngc-direction-color);
  font-variant-numeric: tabular-nums;
  transition: border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}
body .ng-page .ng-price-row .wp-block-woocommerce-product-price[data-ngc-direction="up"],
#price-block > .wp-block-woocommerce-product-price[data-ngc-direction="up"] {
  --ngc-direction-tint: var(--ng-up-soft);
  --ngc-direction-color: var(--ng-up);
}
body .ng-page .ng-price-row .wp-block-woocommerce-product-price[data-ngc-direction="down"],
#price-block > .wp-block-woocommerce-product-price[data-ngc-direction="down"] {
  --ngc-direction-tint: var(--ng-down-soft);
  --ngc-direction-color: var(--ng-down);
}
body .ng-page .ng-price-row .wp-block-woocommerce-product-price.ngc-price-flash,
#price-block > .wp-block-woocommerce-product-price.ngc-price-flash {
  box-shadow: inset -3px 0 0 var(--ngc-direction-color), 0 0 11px var(--ngc-direction-tint);
}
body .ng-page .ng-price-row .wp-block-woocommerce-product-price .woocommerce-Price-amount,
#price-block > .wp-block-woocommerce-product-price .woocommerce-Price-amount,
#market-board.ng-market .ng-market-main > .ng-ltr,
#market-board.ng-market .ng-market-meta .ng-ltr,
#market-board.ng-market .ng-time time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body .ng-page .ng-price-row .wp-block-woocommerce-product-price .woocommerce-Price-amount {
  display: inline-block;
  min-inline-size: 12ch;
  text-align: center;
}
.ngc-direction-label {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
/* The server already emits this compact slot in the correct hero position.
   Keep paragraph/flow margins from enlarging it and only wrap between date/time. */
#home-hero > .ngc-tehran-clock,
#pl-hero > .ngc-tehran-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  min-block-size: 20px;
  margin: 4px 0 0;
  padding: 0;
  color: var(--ng-muted);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
#pl-hero > .ngc-tehran-clock + p.ng-note {
  margin-block-start: 4px;
}
#home-hero > .ngc-tehran-clock .ngc-tehran-date,
#pl-hero > .ngc-tehran-clock .ngc-tehran-date {
  min-inline-size: 0;
  white-space: nowrap;
}
#home-hero > .ngc-tehran-clock .ngc-tehran-time,
#pl-hero > .ngc-tehran-clock .ngc-tehran-time {
  display: inline-block;
  flex: 0 0 auto;
  min-inline-size: 8ch;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
@keyframes ngc-price-light {
  0%, 100% { opacity: .8; }
  30% { opacity: 1; box-shadow: 0 0 7px 3px var(--ng-row-accent), 0 0 13px 4px var(--ng-row-tint); }
}
@media (prefers-reduced-motion: reduce) {
  #market-board.ng-market .ng-market-card .ng-market-table tr.ngc-market-state,
  #market-board.ng-market .ng-market-card .ng-market-table .ng-pulse,
  #market-board.ng-market .ng-market-card .ng-market-table tr.ngc-price-flash .ng-pulse,
  body .ng-page .ng-price-row .wp-block-woocommerce-product-price.ngc-price-state,
  #price-block > .wp-block-woocommerce-product-price.ngc-price-state {
    transition: none;
    animation: none;
  }
}

/* Gallery grouping is rendered by PHP before paint, independently of JS or
   viewport. Desktop uses the original grid; mobile keeps the existing strip. */
@media (min-width: 768px) {
  .aiss-kind-product .ng-product.ng-page .ng-gallery > .ng-gallery__thumbs {
    display: contents;
  }
  .aiss-kind-product .ng-product.ng-page .ng-gallery > .ng-gallery__thumbs > figure.wp-block-image {
    grid-column: auto;
    min-height: 0;
    aspect-ratio: 1;
  }
  .aiss-kind-product .ng-product.ng-page .ng-gallery > .ng-gallery__thumbs > figure.wp-block-image img {
    max-height: 100%;
  }
}
@media (max-width: 767px) {
  .aiss-kind-product .ng-product.ng-page .ng-gallery > .ng-gallery__thumbs {
    grid-column: 1 / -1;
    display: flex;
    gap: .5rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding-bottom: .25rem;
  }
}

/* Known hero artwork has authored 300 x 289 dimensions. The old pair of auto
   dimensions collapsed its flex item until image decode; reserve its final frame. */
.aiss-kind-home .ng-home #home-hero .home-hero-columns .home-hero-image {
  --ngc-hero-art-height: clamp(180px, 19vw, 270px);
  width: calc(var(--ngc-hero-art-height) * 300 / 289);
  height: var(--ngc-hero-art-height);
  max-width: 100%;
  aspect-ratio: 300 / 289;
  flex: 0 1 auto;
}
.aiss-kind-home .ng-home #home-hero .home-hero-columns .home-hero-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 767px) {
  .aiss-kind-home .ng-home #home-hero .home-hero-columns .home-hero-image {
    --ngc-hero-art-height: 150px;
  }
}
@media (min-width: 768px) {
  /* Preserve the existing 440px image + 18px padding/border ceiling and the
     300px small-column floor, before the main product image has decoded. */
  .aiss-kind-product .ng-product.ng-page .ng-gallery > figure.wp-block-image:first-child {
    box-sizing: border-box;
    width: 100% !important;
    aspect-ratio: 1;
    min-height: 300px;
    max-height: calc(440px + 1rem + 2px);
  }
  /* Native text buttons are 28px tall; reserve that same title height first. */
  #market-board.ng-market .ng-market-card .ng-market-table th {
    min-block-size: 28px;
  }
}
@media (max-width: 767px) {
  /* The gallery frame is square before decode. Give its flex image the same
     final content box so an image without HTML dimensions never starts at 0px. */
  .aiss-kind-product .ng-product.ng-page .ng-gallery > figure.wp-block-image:first-child > img {
    width: 100% !important;
    height: 100% !important;
    flex: 0 0 auto;
    object-fit: contain;
  }
  /* A stacked flex column used intrinsic image sizing for its own height,
     despite the gallery's reserved grid rows. A single grid column measures
     those rows before decode and keeps the existing image/text item order. */
  .aiss-kind-product .ng-product .hero-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
  }
  .aiss-kind-product .ng-product .hero-columns > .wp-block-column {
    min-height: 0;
  }
}

/* The server emits the gallery column first so progressive HTML parsing cannot
   paint the mobile details above it. Named areas reserve both desktop columns
   while the rest of the HTML arrives and retain the authored RTL arrangement. */
.aiss-kind-product .ng-product .hero-columns.ngc-product-hero-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr) !important;
  grid-template-areas: "details gallery";
  gap: 1.25rem;
  align-items: start !important;
}
.aiss-kind-product .ng-product .hero-columns.ngc-product-hero-layout > .ngc-product-details-column {
  grid-area: details;
  order: 1;
  min-width: 0;
}
.aiss-kind-product .ng-product .hero-columns.ngc-product-hero-layout > .ngc-product-gallery-column {
  grid-area: gallery;
  order: 2;
  min-width: 0;
}
@media (max-width: 781px) {
  /* Keep the gallery first throughout WordPress's stacked-column range. */
  .aiss-kind-product .ng-product .hero-columns.ngc-product-hero-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "gallery" "details";
  }
  .aiss-kind-product .ng-product .hero-columns.ngc-product-hero-layout > .ngc-product-gallery-column {
    order: 1;
  }
  .aiss-kind-product .ng-product .hero-columns.ngc-product-hero-layout > .ngc-product-details-column {
    order: 2;
  }
}
@media (max-width: 767px) {
  .aiss-kind-product .ng-product .hero-columns.ngc-product-hero-layout {
    gap: 1rem;
  }
}