/**
 * avy-compare-slider.css
 *
 * JOGA-style before/after drag slider for the custom shin guard figures.
 * Layer stack: after image z0 (customized), before image z1 (plain shell,
 * clip-path driven), tags z5, divider z10, icon z12, transparent range z30.
 *
 * Figure modifier overrides live at the bottom at specificity 0,2,1
 * (`.saiwei-page figure.xxx--compare`) so they beat the page-level
 * (0,2,0) rules regardless of load order, including inside media queries.
 */

/* ---- component ---- */

.avy-compare {position:absolute; inset:0; overflow:hidden; background:#0B0D10;}

.avy-compare__img {position:absolute; inset:0; width:100%; height:100%; margin:0; object-fit:cover; display:block;}

.avy-compare__img--after {z-index:0;}

.avy-compare__img--before {z-index:1; will-change:clip-path;}

.avy-compare__tag {position:absolute; top:14px; z-index:5; padding:7px 11px; font-size:.64rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; border-radius:4px; line-height:1;}

.avy-compare__tag--before {left:14px; background:rgba(11,13,16,.82); color:#fff; border:1px solid rgba(255,255,255,.26);}

.avy-compare__tag--after {right:14px; background:#C7FF2E; color:#0B0D10;}

.avy-compare__handle {position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:10; background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(11,13,16,.12), 0 0 18px rgba(0,0,0,.35); pointer-events:none;}

.avy-compare__icon {position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; z-index:12; border-radius:50%; background:rgba(11,13,16,.58); border:1px solid rgba(255,255,255,.55); color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 6px 22px rgba(0,0,0,.35); pointer-events:none;}

.avy-compare__icon svg {width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* range input: full-cover, invisible, native drag/keyboard/touch */
.avy-compare__range {position:absolute; inset:0; z-index:30; width:100%; height:100%; margin:0; opacity:0; cursor:col-resize; background:transparent; -webkit-appearance:none; appearance:none;}

.avy-compare__range::-webkit-slider-thumb {-webkit-appearance:none; appearance:none; width:44px; height:440px;} /* keep thumb hit-friendly */

.avy-compare__range::-moz-range-thumb {width:44px; height:440px; border:0; background:transparent;}

/* focus ring on the icon (the range itself is opacity:0) */
.avy-compare:focus-within .avy-compare__icon {box-shadow:0 0 0 3px #C7FF2E, 0 0 0 5px rgba(11,13,16,.30), 0 6px 22px rgba(0,0,0,.35);}

/* ---- figure modifier overrides (specificity 0,2,1) ---- */

/* design-canvas: kill the decorative gradient + center divider ::before */
.saiwei-page figure.design-canvas--compare::before {display:none;}

/* its figcaption overlays the photo now: lift above layers, keep legible */
.saiwei-page figure.design-canvas--compare figcaption {z-index:6; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.6);}

/* hero-asset / product-window: drop padding (incl. the 620px MQ re-inject),
   let the slider stretch edge to edge; kill product-window corner ticks */
.saiwei-page figure.hero-asset--compare,
.saiwei-page figure.product-window--compare {padding:0; place-items:stretch;}

.saiwei-page figure.product-window--compare::before,
.saiwei-page figure.product-window--compare::after {content:none;}

/* ---- small screens ---- */

@media (max-width:640px) {
  .avy-compare__icon {width:36px; height:36px; margin:-18px 0 0 -18px;}
  .avy-compare__icon svg {width:18px; height:18px;}
  .avy-compare__tag {top:10px; padding:5px 8px; font-size:.56rem;}
  .avy-compare__tag--before {left:10px;}
  .avy-compare__tag--after {right:10px;}
}