/* =========================================================
   sasangraphic — independent before/after comparison gallery
   (گالری مقایسه قبل و بعد)
   Two completely separate systems: the WooCommerce product gallery keeps
   the normal product images ONLY (untouched); this file styles the
   independent ACF comparison gallery (the
   woocommerce_before_single_product_summary hook in
   inc/product-compare.php — a SIBLING of the WooCommerce gallery in the
   same hero grid cell) + the mode switcher pill that sits DIRECTLY BELOW
   the galleries, in its own switcher grid row. Reuses the front-page
   design system tokens (style.css + the
   .sg-product scope): --accent/--surface/--border/--radius-* /
   --dur-fast and the 980px/600px breakpoints.
   RTL-first: the comparison progresses in the reading direction — the
   «قبل» (before) image is the base layer (fully visible at the start)
   and the «بعد» (after) image is the overlay that wipes in FROM THE
   RIGHT EDGE, moving right-to-left as the handle is dragged
   right-to-left. The drag is deterministic pointer handling
   (--sg-compare-pos = the divider position from the LEFT edge — the
   pointer's x); the invisible full-size range input stays as the
   keyboard surface (arrow keys — the locale's reading direction decides
   which arrow is "forward"). ALL the pairs' sliders render stacked —
   each pair with its own comparison bar and labels.
   ========================================================= */

/* ----- gallery mode switcher (a standalone pill above the hero) -----
   Hidden until JavaScript adds .is-ready — nothing appears without JS
   (the same philosophy as the sticky purchase bar) */
.sg-product .sg-compare-toggle {
  display: none;
}
.sg-product .sg-compare-toggle.is-ready {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  max-width: 100%;
  grid-area: switcher;  /* the grid row directly below the gallery column */
  justify-self: center; /* centered within the gallery column */
  width: max-content;
}
.sg-product .sg-compare-toggle-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  transition:
    color var(--dur-fast),
    background-color var(--dur-fast);
}
.sg-product .sg-compare-toggle-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sg-product .sg-compare-toggle-btn:hover {
  color: var(--text);
}
.sg-product .sg-compare-toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sg-product .sg-compare-toggle-btn.is-active {
  background: var(--accent);
  color: var(--on-accent);
}
.sg-product .sg-compare-toggle-btn.is-active:hover {
  color: var(--on-accent);
}

/* ----- the independent comparison gallery (the comparison mode panel) -----
   A SIBLING of the WooCommerce gallery in the same hero grid cell
   (grid-area: gallery): hidden in the normal mode; the .sg-compare-mode
   class on the product wrapper (added by compare-slider.js) swaps the two
   galleries in place — no page refresh, no duplicated images, no leftover
   state */
.sg-product .sg-compare-gallery {
  display: none;
  margin: 0;
  grid-area: gallery;
  min-width: 0;
}
.sg-product .sg-compare-mode .sg-compare-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* the comparison mode hides the WooCommerce product gallery completely
   (the sale flash badge with it — it is part of the WooCommerce gallery
   UI). The mode class (sg-compare-mode) lands on the .product element
   (compare-slider.js's closest('.product')), but the gallery and the sale
   flash are the grid items ONE LEVEL DEEPER — the hero grid wrapper
   (Blocksy's product-entry-wrapper buffer echoes them as
   .product > .product-entry-wrapper > …), so BOTH structural positions
   are covered: the direct children of .product (the no-Blocksy :has()
   fallback, where the canonical gallery renders straight inside the
   product wrapper) and the direct children of .product-entry-wrapper
   (Blocksy). The child combinator keeps the related products untouched */
.sg-product .sg-compare-mode > .woocommerce-product-gallery,
.sg-product .sg-compare-mode > .product-entry-wrapper > .woocommerce-product-gallery,
.sg-product .sg-compare-mode > .onsale,
.sg-product .sg-compare-mode > .product-entry-wrapper > .onsale {
  display: none;
}

/* ----- isolation: the comparison gallery is fully self-contained — the
   structural separation (a sibling of the WooCommerce gallery, never
   inside the gallery wrapper) keeps WooCommerce's gallery CSS out, and
   this scoped reset neutralizes any generic theme img rule (sizing,
   max-width, transforms, filters) that could leak in ----- */
.sg-compare-gallery,
.sg-compare-gallery * {
  box-sizing: border-box;
}
.sg-compare-gallery img {
  display: block;
  max-width: 100%;
  margin: 0;
  border: none;
  background: none;
  transform: none;
  filter: none;
  opacity: 1;
}

/* ----- the slider frame -----
   The SAME frame as the Normal View's main image container: the shared
   aspect ratio comes from the Normal View's main image (an inline
   aspect-ratio from inc/product-compare.php), so both modes' containers
   are exactly the same width, height and aspect ratio — the 1/1 fallback
   below only applies when that ratio is unavailable. The divider position
   (--sg-compare-pos) is measured from the LEFT edge and follows the
   pointer 1:1 (deterministic — no native mirroring) */
.sg-product .sg-compare__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: ew-resize;
  touch-action: pan-y; /* vertical page scroll passes through, horizontal drags adjust the slider */
  aspect-ratio: 1 / 1; /* the fallback — the Normal View's ratio overrides it inline */
  --sg-compare-pos: 50%; /* the divider position from the LEFT edge */
}
.sg-product .sg-compare__frame:focus-within {
  box-shadow: 0 0 0 2px var(--accent);
}
.sg-product .sg-compare__img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* the before image is the BASE layer — BOTH layers are absolutely
   positioned with the exact same box (the shared gallery frame), so they
   occupy identical container dimensions and the frame's height comes only
   from the shared aspect ratio, never from the images themselves */
.sg-product .sg-compare__img--before {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  z-index: 1;
}
/* the after image overlays the frame and is clipped at the divider — it
   wipes in FROM THE RIGHT EDGE, moving right-to-left as the handle is
   dragged right-to-left (the RTL reading direction). object-fit: contain
   keeps the whole image visible (no crop/"zoom") whatever the two
   images' aspect ratios are — same-ratio pairs render pixel-aligned */
.sg-product .sg-compare__img--after {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  clip-path: inset(0 0 0 var(--sg-compare-pos));
  z-index: 2; /* the upper layer — the comparison effect is the clip, never a transform/scale */
}

/* ----- the divider + the handle (visual only — pointer-transparent,
   the frame's own pointer handling moves them; both are SIBLINGS of the
   images, positioned by the same --sg-compare-pos from the LEFT edge, so
   they always sit exactly on the boundary in both directions) ----- */
.sg-product .sg-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sg-compare-pos);
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(15, 15, 20, 0.4),
    0 0 10px rgba(15, 15, 20, 0.35),
    0 6px 18px rgba(15, 15, 20, 0.3);
  pointer-events: none;
  z-index: 3;
}
/* the handle is a SIBLING of the divider (not nested inside it) and is
   positioned by the same --sg-compare-pos with a physical translate — the
   logical inset + physical translate combination it used before
   mis-centered it by half the handle's width in RTL */
.sg-product .sg-compare__handle {
  position: absolute;
  top: 50%;
  left: var(--sg-compare-pos);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow:
    0 0 0 1px rgba(15, 15, 20, 0.12),
    0 8px 24px rgba(15, 15, 20, 0.28);
  z-index: 5;
}
.sg-product .sg-compare__handle svg {
  width: 20px;
  height: 20px;
}

/* ----- the corner labels (قبل / بعد) — each on its own image's side
   (قبل the base on the left, بعد the overlay on the right) ----- */
.sg-product .sg-compare__label {
  position: absolute;
  top: 0.8rem;
  z-index: 6; /* above the images, the divider and the handle — never hidden */
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(15, 15, 20, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.6;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.sg-product .sg-compare__label--before {
  left: 0.8rem;
}
.sg-product .sg-compare__label--after {
  right: 0.8rem;
}

/* ----- the invisible range input (the keyboard surface) -----
   Full-size over the frame but pointer-transparent — the frame's own
   pointer handling drags the divider; the range stays focusable for the
   keyboard (arrow keys — the locale's reading direction decides which
   arrow is "forward") and announces the position to screen readers */
.sg-product .sg-compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
}
.sg-product .sg-compare__range:focus {
  outline: none; /* the frame's focus-within ring takes over */
}

/* ----- the pair items: ONE Before/After pair is visible at a time (all
   the pairs render, so switching is instant; lazy images in hidden pairs
   don't load until their pair is shown) — the ‹ previous / counter /
   next › navigation below moves between them ----- */
.sg-product .sg-compare-gallery .sg-compare__item {
  display: none;
  min-width: 0;
}
.sg-product .sg-compare-gallery .sg-compare__item.is-active {
  display: block;
}

/* ----- the pair navigation (‹ previous / the counter / next ›) — the
   counter updates dynamically with Persian digits; the buttons are
   touch-friendly round targets ----- */
.sg-product .sg-compare__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.sg-product .sg-compare__nav-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color var(--dur-fast),
    border-color var(--dur-fast),
    background-color var(--dur-fast);
}
.sg-product .sg-compare__nav-btn svg {
  width: 18px;
  height: 18px;
}
.sg-product .sg-compare__nav-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.sg-product .sg-compare__nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sg-product .sg-compare__count {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 4rem;
  text-align: center;
}

/* ----- the switcher's grid row: an extra row under the gallery column —
   the hierarchy is the gallery, then the switcher, then the product
   information. Scoped with :has() so products without the compare
   feature keep the exact original grid (no empty row, no extra gap) ----- */
.sg-product .product-entry-wrapper:has(> .sg-compare-toggle),
.sg-product .product:has(> .sg-compare-toggle) {
  grid-template-areas:
    "info gallery"
    "info switcher";
}

@media (max-width: 980px) {
  .sg-product .product-entry-wrapper:has(> .sg-compare-toggle),
  .sg-product .product:has(> .sg-compare-toggle) {
    grid-template-areas:
      "gallery"
      "switcher"
      "info";
  }
}