/* Karly Hero360 v5 — liquid-glass backdrop + floating product cluster. All selectors prefixed kh360-.
   Tweak look via the variables below. */
.kh360-root{--kh360-bg:#eceef1;--kh360-glass-tint:rgba(255,255,255,.22);--kh360-glass-blur:22px;--kh360-blob1:#b9cbe6;--kh360-blob2:#efcfc8;--kh360-blob3:#d6e2d2;--kh360-sheen-speed:9s;--kh360-ink:#1c1c1c;--kh360-muted:#b9b7b2;--kh360-h:min(420px,52vh);
  --kh360-item-w:clamp(170px,22vw,300px);--kh360-spread:.62;--kh360-depth:1.1;--kh360-persp:1600px;
  --kh360-shadow:rgba(30,35,50,.22);--kh360-front-scale:1.12;
  position:relative;overflow:hidden;background:var(--kh360-bg);color:var(--kh360-ink);padding:28px 0 22px;
  font-family:inherit;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.kh360-root>*{position:relative;z-index:1}
.kh360-root>.kh360-glass{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kh360-blob{position:absolute;border-radius:50%;filter:blur(30px);opacity:1;will-change:transform}
.kh360-b1{width:55%;height:70%;left:-8%;top:-12%;background:radial-gradient(closest-side,var(--kh360-blob1),transparent);animation:kh360-drift 22s ease-in-out infinite alternate}
.kh360-b2{width:50%;height:65%;right:-10%;top:18%;background:radial-gradient(closest-side,var(--kh360-blob2),transparent);animation:kh360-drift 26s ease-in-out -8s infinite alternate-reverse}
.kh360-b3{width:60%;height:55%;left:22%;bottom:-22%;background:radial-gradient(closest-side,var(--kh360-blob3),transparent);animation:kh360-drift 30s ease-in-out -4s infinite alternate}
.kh360-pane{position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.55),var(--kh360-glass-tint) 45%,rgba(255,255,255,.18));
  -webkit-backdrop-filter:blur(var(--kh360-glass-blur)) saturate(140%);backdrop-filter:blur(var(--kh360-glass-blur)) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(0,0,0,.04)}
.kh360-pane::after{content:"";position:absolute;inset:0;opacity:.05;background-image:radial-gradient(rgba(0,0,0,.6) .5px,transparent .6px);background-size:3px 3px}
.kh360-slab{position:absolute;left:50%;top:50%;width:min(78%,880px);height:72%;transform:translate(-50%,-54%);border-radius:36px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 40%,rgba(255,255,255,.28));
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -12px 30px rgba(255,255,255,.25),0 20px 60px rgba(40,50,70,.08)}
.kh360-slab::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.65),transparent 55%)}
@media (max-width:560px){.kh360-slab{width:90%;height:62%;transform:translate(-50%,-58%);border-radius:26px}}
.kh360-sheen{position:absolute;top:-20%;bottom:-20%;left:0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42) 45%,rgba(255,255,255,.12) 55%,transparent);
  transform:translateX(-120%) skewX(-12deg);animation:kh360-sheen var(--kh360-sheen-speed) ease-in-out infinite}
@keyframes kh360-sheen{0%,20%{transform:translateX(-130%) skewX(-12deg)}70%,100%{transform:translateX(320%) skewX(-12deg)}}
@keyframes kh360-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6%,4%) scale(1.08)}}
.kh360-bump .kh360-img{animation:kh360-bump .38s ease}
@keyframes kh360-bump{40%{transform:translateY(-8px)}}
.kh360-nolink{cursor:inherit}
.kh360-eyebrow{text-align:center;margin:0;font-size:11px;letter-spacing:.18em;color:#8d8a84}
.kh360-stage{position:relative;height:var(--kh360-h);perspective:var(--kh360-persp);perspective-origin:50% 40%;cursor:grab;outline:none}
.kh360-stage.kh360-drag{cursor:grabbing}
.kh360-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.kh360-item{position:absolute;left:calc(var(--kh360-item-w)/-2);top:calc(var(--kh360-item-w)*-.72);width:var(--kh360-item-w);
  display:block;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;outline:none;will-change:transform}
.kh360-item:focus-visible{outline:2px solid var(--kh360-ink);outline-offset:4px;border-radius:6px}
.kh360-img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;opacity:0;transition:opacity .45s;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.10)) drop-shadow(0 2px 3px rgba(0,0,0,.08));-webkit-user-drag:none;pointer-events:none}
.kh360-img.kh360-loaded{opacity:1}
.kh360-blend .kh360-img{mix-blend-mode:multiply;filter:none}
.kh360-floor{position:absolute;left:50%;top:calc(50% + var(--kh360-item-w)*.66);width:calc(var(--kh360-item-w)*2.4);height:46px;
  transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--kh360-shadow),transparent);filter:blur(6px);pointer-events:none}
.kh360-ph{position:absolute;top:6px;inset-inline-start:6px;font:10px/1 monospace;background:#ffeb3b;color:#000;padding:3px 5px;border-radius:3px}
.kh360-cap{text-align:center;min-height:1.6em;margin:-6px 16px 0;direction:ltr}
.kh360-cap-in{display:inline-flex;align-items:baseline;gap:.45em;font-size:clamp(24px,3.6vw,44px);font-weight:300;color:var(--kh360-muted);
  letter-spacing:-.01em;transition:opacity .25s,transform .25s;text-decoration:none}
.kh360-cap-in.kh360-swap{opacity:0;transform:translateY(6px)}
.kh360-cap-name{direction:rtl;color:var(--kh360-ink);opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(70vw,640px)}
.kh360-cap-sep{opacity:.6}.kh360-cap-num{font-variant-numeric:tabular-nums}
.kh360-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;direction:ltr}
.kh360-btn{width:34px;height:34px;border:0;background:none;color:var(--kh360-ink);opacity:.55;cursor:pointer;font-size:18px;border-radius:50%}
.kh360-btn:hover,.kh360-btn:focus-visible{opacity:1;background:rgba(0,0,0,.05)}
.kh360-bar{position:relative;width:120px;height:2px;background:rgba(0,0,0,.12);border-radius:2px;overflow:hidden}
.kh360-bar i{position:absolute;top:0;bottom:0;left:0;background:var(--kh360-ink);border-radius:2px}
.kh360-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){.kh360-root{--kh360-item-w:clamp(160px,30vw,260px);--kh360-h:min(360px,48vh)}}
@media (max-width:560px){.kh360-root{--kh360-item-w:46vw;--kh360-h:min(300px,46vh);--kh360-spread:.55;--kh360-persp:1000px;padding-top:20px}
  .kh360-cap-in{font-size:22px}}
/* reduced motion / no 3D: static row */
.kh360-flat .kh360-stage{height:auto;perspective:none;cursor:auto}
.kh360-flat .kh360-ring{position:static;width:auto;height:auto;display:flex;gap:4px;overflow-x:auto;padding:16px;scroll-snap-type:x mandatory}
.kh360-flat .kh360-item{position:relative;left:auto;top:auto;flex:0 0 var(--kh360-item-w);transform:none!important;scroll-snap-align:center}
.kh360-flat .kh360-slab{height:calc(100% - 40px);top:20px;transform:translateX(-50%)}
.kh360-flat .kh360-floor,.kh360-flat .kh360-nav{display:none}
.kh360-flat .kh360-cap{display:none}
.kh360-flat .kh360-fname{display:block;text-align:center;font-size:14px;margin-top:4px}
.kh360-fname{display:none}
@media (prefers-reduced-motion:reduce){.kh360-img,.kh360-cap-in{transition:none}.kh360-blob,.kh360-sheen,.kh360-bump .kh360-img{animation:none}.kh360-sheen{display:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.kh360-pane{background:rgba(255,255,255,.5)}}

/* ---- 621232 premium polish (live) ---- */
.kh360-root{--kh360-bg:#f1f1ef;--kh360-ink:#141414;--kh360-muted:#9b9893;padding:44px 0 30px}
.kh360-slab{width:min(84%,1180px);height:76%;border-radius:28px;border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(20,20,30,.04),0 30px 80px -30px rgba(30,40,60,.18)}
.kh360-slab::before{background:radial-gradient(90% 50% at 50% 0%,rgba(255,255,255,.7),transparent 60%)}
.kh360-sheen{opacity:.55}
.kh360-img{filter:drop-shadow(0 22px 22px rgba(20,20,30,.13)) drop-shadow(0 3px 4px rgba(20,20,30,.08));transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.kh360-floor{height:38px;filter:blur(10px);opacity:.8}
.kh360-eyebrow{position:relative;z-index:2;font-size:12px;font-weight:600;letter-spacing:.32em;color:#6f6c66;margin:0 0 4px}
.kh360-cap{margin-top:-2px}
.kh360-cap-in{font-size:clamp(18px,2vw,26px);font-weight:300;letter-spacing:.06em;color:var(--kh360-muted)}
.kh360-cap-num{color:var(--kh360-ink)}
.kh360-nav{margin-top:14px;gap:18px}
.kh360-btn{width:40px;height:40px;opacity:.7;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.6);transition:all .25s cubic-bezier(.22,1,.36,1)}
.kh360-btn:hover,.kh360-btn:focus-visible{opacity:1;background:#fff;box-shadow:0 6px 18px -6px rgba(0,0,0,.25)}
.kh360-bar{width:140px;height:2px}
.kh360-bar i{transition:left .5s cubic-bezier(.22,1,.36,1),width .5s}
@media (max-width:560px){.kh360-root{padding:26px 0 18px}.kh360-slab{width:92%;height:66%;border-radius:22px}
  .kh360-eyebrow{font-size:10.5px;letter-spacing:.26em}.kh360-cap-in{font-size:17px}}
.kh360-eyebrow,.kh360-eyebrow bdi{letter-spacing:0;font-size:13px;font-weight:500;color:#5f5c57}
@media (min-width:901px){.kh360-root{--kh360-item-w:clamp(220px,23vw,330px)}}
@media (max-width:560px){.kh360-eyebrow{font-size:12px}}

/* fix-viewport-20261103 — keep 360 stage inside monitor without forced page scroll */
.kh360-root{--kh360-h:min(420px,52vh);padding:18px 0 14px!important}
.kh360-slab{width:min(78%,920px)!important;height:68%!important}
@media (min-width:901px){.kh360-root{--kh360-item-w:clamp(160px,18vw,240px)!important}}
@media (max-width:900px){.kh360-root{--kh360-h:min(340px,46vh)!important;--kh360-item-w:clamp(140px,28vw,210px)!important}}
@media (max-width:560px){.kh360-root{--kh360-h:min(280px,42vh)!important;--kh360-item-w:42vw!important;padding:14px 0 10px!important}.kh360-slab{height:60%!important}}

/* 20261106: لباس داخل کادر بماند و کادر به عرض صفحه بخورد */
.kh360-root{--kh360-h:min(500px,60vh)!important;--kh360-item-w:clamp(140px,13vw,200px)!important;--kh360-front-scale:1!important}
.kh360-slab{width:min(1180px,calc(100% - 28px))!important;height:90%!important;top:52%!important;transform:translate(-50%,-50%)!important}
.kh360-item{top:calc(var(--kh360-item-w) * -0.55)!important}
.kh360-img{object-fit:contain!important;max-height:min(360px,48vh)!important;height:auto!important}
@media (min-width:901px){.kh360-root{--kh360-item-w:clamp(150px,14vw,210px)!important}}