/**
 * ZxAcc — «محبوب‌ترین محصولات» Spotlight carousel (homepage)
 * ---------------------------------------------------------------------
 * Replaces the old "Latest products" grid (#ps-latest). Rendered by
 * beiten_render_spotlight_section() in functions.php, driven by
 * assets/js/zx-spotlight.js.
 *
 * Every selector is prefixed "zxsp" so nothing here can touch other
 * sections. Class names deliberately avoid "-card" / "-item" because
 * theme-scroll-fx.js auto-animates any element whose class contains
 * those words, which would fight the 3D transforms below.
 */
@property --zxsp-spot { syntax: '<color>'; inherits: true; initial-value: #68abea; }

.zxsp-section { padding-block: 44px; position: relative; }
.zxsp-host { container-type: inline-size; }

.zxsp {
    --zxsp-spot: #68abea; --zxsp-ink: #0f1a2a; --zxsp-mut: #6a788b;
    direction: rtl; color: var(--zxsp-ink); position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage";
    row-gap: 6px; padding: 34px 0 26px; border-radius: 32px; background: #f7f9fc;
    border: 1px solid rgba(15,26,42,.06);
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,26,42,.04), 0 34px 70px -48px rgba(15,26,42,.35);
    transition: --zxsp-spot 1s cubic-bezier(.3,.7,.2,1);
}
.zxsp *, .zxsp *::before, .zxsp *::after { box-sizing: border-box; }

/* ---------- background layers ---------- */
.zxsp-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.zxsp-bg i { position: absolute; display: block; }
.zxsp-wash { inset: 0; background:
    radial-gradient(52% 62% at 50% 62%, color-mix(in srgb, var(--zxsp-spot) 16%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #fbfcfe 0%, color-mix(in srgb, var(--zxsp-spot) 5%, #f4f7fb) 100%); }
.zxsp-beam { left: 50%; top: 0; width: min(640px, 96%); height: 92%; transform: translateX(-50%);
    background: radial-gradient(38% 100% at 50% 0%, color-mix(in srgb, var(--zxsp-spot) 26%, transparent) 0%, color-mix(in srgb, var(--zxsp-spot) 9%, transparent) 55%, transparent 100%); }
.zxsp-floor { left: 50%; bottom: 7%; width: min(760px, 96%); height: 140px; transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--zxsp-spot) 24%, transparent), transparent 70%); }
.zxsp-grain { inset: 0; opacity: .07; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.zxsp-hair { left: 34px; right: 34px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); }

/* ---------- header ---------- */
.zxsp-head { grid-area: head; padding: 0 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.zxsp-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--zxsp-spot) 62%, #0f1a2a); background: color-mix(in srgb, var(--zxsp-spot) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--zxsp-spot) 22%, #fff); box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--zxsp-spot) 90%, transparent); }
.zxsp-chip svg { width: 15px; height: 15px; flex: none; }
.zxsp-title { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 800; letter-spacing: -.018em; color: var(--zxsp-ink); }

/* ---------- stage + track ---------- */
.zxsp-stage { grid-area: stage; position: relative; outline: none; min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.zxsp-stage:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--zxsp-spot) 60%, transparent); border-radius: 20px; }
.zxsp-track { direction: ltr; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 38px 0 58px; margin: 0; cursor: grab; -webkit-user-select: none; user-select: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.zxsp-track::-webkit-scrollbar { display: none; }
.zxsp-track.is-drag, .zxsp-track.is-anim { scroll-snap-type: none; }
.zxsp-track.is-drag { cursor: grabbing; }
.zxsp-track.is-drag a { pointer-events: none; }

/* ---------- product tile ---------- */
.zxsp-tile { flex: 0 0 300px; scroll-snap-align: center; direction: rtl; position: relative; display: block; text-decoration: none !important; color: inherit; padding: 0 4px; -webkit-tap-highlight-color: transparent; outline: none; --ac: #68abea; }
.zxsp-tile img { -webkit-user-drag: none; user-select: none; }
.zxsp-in { display: block; position: relative;
    transform: perspective(1100px) translateX(calc(var(--d, 3) * -17%)) translateZ(calc(var(--s, 3) * -40px)) rotateY(calc(var(--d, 3) * 22deg)) scale(calc(1 - var(--s, 3) * .1)); }
.zxsp-face { display: block; position: relative; border-radius: 28px; background: #fff; padding: 11px 11px 18px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(15,26,42,.05), 0 2px 4px rgba(15,26,42,.04), 0 24px 40px -28px rgba(15,26,42,.45);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .6s; }
.zxsp-ph { position: relative; display: block; aspect-ratio: 1; width: 100%; max-width: 100%; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(15,26,42,.04); }
.zxsp-ph img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; margin: 0; border-radius: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.zxsp-nm { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 15px; text-align: center; }
.zxsp-nm b { font-size: 17px; line-height: 1.35; font-weight: 800; letter-spacing: -.01em; color: var(--zxsp-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zxsp-nm small { font-size: 12.5px; line-height: 1.6; color: var(--zxsp-mut); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.zxsp-ln { display: block; width: 0; height: 2px; border-radius: 2px; margin-top: 9px; background: var(--ac); transition: width .6s cubic-bezier(.2,.8,.2,1) .15s; }
.zxsp-glare { display: block; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), transparent 55%); mix-blend-mode: soft-light; }
.zxsp-sheen { display: block; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.zxsp-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
.zxsp-fog { display: block; position: absolute; inset: 0; border-radius: 28px; background: #f4f7fb; pointer-events: none; opacity: clamp(0, calc(var(--s, 3) * .38), .72); }
.zxsp-shadow { display: block; position: absolute; left: 12%; right: 12%; bottom: -26px; height: 26px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--ac) 40%, rgba(15,26,42,.3)), transparent 72%);
    opacity: clamp(0, calc(1 - var(--s, 3) * .7), 1); transform: scaleX(calc(1 - var(--s, 3) * .2)); }

.zxsp-tile.is-active .zxsp-face { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent), 0 2px 4px rgba(15,26,42,.04), 0 40px 60px -30px color-mix(in srgb, var(--ac) 70%, rgba(15,26,42,.5)); }
.zxsp-tile.is-active .zxsp-ln { width: 28px; }
.zxsp-tile.is-active .zxsp-glare { opacity: 1; }
.zxsp-tile.lit .zxsp-sheen::before { animation: zxsp-sheen 1.1s cubic-bezier(.3,.6,.2,1) .1s; }
@keyframes zxsp-sheen { to { left: 130%; } }
.zxsp-tile:focus-visible .zxsp-face { outline: 3px solid color-mix(in srgb, var(--ac) 70%, #fff); outline-offset: 3px; }
@media (hover: hover) { .zxsp-tile.is-active:hover .zxsp-ph img { transform: scale(1.05); } }

/* ---------- tablet ---------- */
@container (min-width: 640px) and (max-width: 1000px) {
    .zxsp-tile { flex-basis: 250px; }
    .zxsp-title { font-size: 26px; }
}
/* ---------- phone ---------- */
@container (max-width: 640px) {
    .zxsp { padding: 24px 0 8px; border-radius: 26px; row-gap: 0; }
    .zxsp-head { padding: 0 18px; align-items: center; text-align: center; gap: 10px; }
    .zxsp-title { font-size: 22px; }
    .zxsp-chip { height: 28px; font-size: 11.5px; }
    .zxsp-hair { left: 18px; right: 18px; }
    .zxsp-track { padding: 26px 0 44px; }
    .zxsp-stage { -webkit-mask-image: none; mask-image: none; } /* [perf] masks re-raster every scroll frame on phones */
    .zxsp-grain { display: none; }
    .zxsp-glare, .zxsp-sheen { display: none; }
    .zxsp-tile { flex-basis: 60%; padding: 0 3px; }
    .zxsp-in { transform: perspective(800px) translateX(calc(var(--d, 3) * -30%)) translateZ(calc(var(--s, 3) * -30px)) rotateY(calc(var(--d, 3) * 20deg)) scale(calc(1 - var(--s, 3) * .12)); }
    .zxsp-face { border-radius: 24px; padding: 9px 9px 15px; }
    .zxsp-fog { border-radius: 24px; }
    .zxsp-ph { border-radius: 17px; }
    .zxsp-nm { padding-top: 12px; }
    .zxsp-nm b { font-size: 15px; }
    .zxsp-nm small { font-size: 11.5px; }
}
@media (max-width: 480px) { .zxsp-section { padding-block: 28px; } }

/* [zxacc 1.3.1] survive pro.css's global reduced-motion kill-switch */
.zxsp{transition-duration:1s!important}
.zxsp-face{transition-duration:.5s,.6s!important}
.zxsp-ph img{transition-duration:.8s!important}
.zxsp-ln{transition-duration:.6s!important}
.zxsp-glare{transition-duration:.4s!important}
.zxsp-tile.lit .zxsp-sheen::before{animation-duration:1.1s!important}