/* TS_COMICS_V2 — «هتحبي كمان» comics. Scoped to the related section; decorations never catch clicks. */
[data-tsp-comics] .tsp-comic-stage{position:relative;display:block;isolation:isolate;transform-origin:50% 92%;will-change:transform}
[data-tsp-comics] .tsp-comic-decoration{position:absolute;inset:0;pointer-events:none;user-select:none;opacity:0;visibility:hidden;transition:opacity .2s}
[data-tsp-comics] .tsp-comic-active .tsp-comic-decoration{opacity:1;visibility:visible}

/* the big comic bubble */
[data-tsp-comics] .tsp-comic-bubble{position:absolute;z-index:4;top:8px;left:8px;right:8px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 10px 12px;
  background:#fff;color:#241423;border:3px solid #241423;border-radius:22px 22px 22px 6px;box-shadow:5px 5px 0 #ff5ca4;text-align:center;
  font-family:"Marhey","Readex Pro",Almarai,sans-serif;line-height:1.55;overflow-wrap:anywhere;transform:rotate(var(--tsp-comic-tilt,-3deg)) scale(.3);opacity:0}
[data-tsp-comics] .tsp-comic-bubble::after{content:'';position:absolute;bottom:-12px;left:26%;width:16px;height:16px;background:#fff;border-right:3px solid #241423;border-bottom:3px solid #241423;transform:skewY(30deg) rotate(8deg)}
[data-tsp-comics] .tsp-comic-bubble strong{display:inline-block;color:#fff;background:#ff2e8b;border:3px solid #241423;border-radius:999px;padding:1px 14px 3px;font-size:clamp(17px,1.9vw,26px);font-weight:700;line-height:1.3;
  box-shadow:3px 3px 0 #241423;transform:rotate(-4deg);letter-spacing:.01em}
[data-tsp-comics] .tsp-comic-bubble span{display:block;font-size:clamp(13px,1.25vw,17px);font-weight:600}
[data-tsp-comics] .tsp-comic-active .tsp-comic-bubble{animation:tspc-pop .55s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes tspc-pop{0%{opacity:0;transform:rotate(var(--tsp-comic-tilt,-3deg)) scale(.3)}100%{opacity:1;transform:rotate(var(--tsp-comic-tilt,-3deg)) scale(1)}}

/* cartoon arms */
[data-tsp-comics] .tsp-comic-arm{position:absolute;z-index:3;top:38%;width:clamp(36px,20%,68px);height:auto;transform-origin:85% 90%;filter:drop-shadow(2px 3px 0 #ffb3d5)}
[data-tsp-comics] .tsp-comic-arm svg{display:block;width:100%;height:auto;overflow:visible}
[data-tsp-comics] .tsp-comic-arm--left{left:-4px;transform:rotate(-14deg)}
[data-tsp-comics] .tsp-comic-arm--right{right:-4px;scale:-1 1;transform:rotate(-14deg)}

/* action marks around the product */
[data-tsp-comics] .tsp-comic-fx i{position:absolute;z-index:2;width:22px;height:22px;opacity:0;
  background:#ffd23f;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
[data-tsp-comics] .tsp-comic-fx i:nth-child(1){top:44%;left:6%}[data-tsp-comics] .tsp-comic-fx i:nth-child(2){top:70%;right:8%;width:16px;height:16px;background:#ff5ca4}
[data-tsp-comics] .tsp-comic-fx i:nth-child(3){bottom:8%;left:30%;width:14px;height:14px;background:#7ad7ff}[data-tsp-comics] .tsp-comic-fx i:nth-child(4){top:52%;right:22%;width:12px;height:12px}
[data-tsp-comics] .tsp-comic-active .tsp-comic-fx i{animation:tspc-star 1s ease-in-out infinite}
[data-tsp-comics] .tsp-comic-active .tsp-comic-fx i:nth-child(2){animation-delay:.25s}[data-tsp-comics] .tsp-comic-active .tsp-comic-fx i:nth-child(3){animation-delay:.5s}[data-tsp-comics] .tsp-comic-active .tsp-comic-fx i:nth-child(4){animation-delay:.75s}
@keyframes tspc-star{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(40deg)}}

/* ===== personalities: each product moves its own way ===== */
/* walk: steps left and right, arms swing in turns */
[data-tsp-comics] .tsp-act-walk .tsp-comic-stage{animation:tspc-walk 1.3s ease-in-out 3}
[data-tsp-comics] .tsp-act-walk .tsp-comic-arm{animation:tspc-swing .32s ease-in-out infinite alternate}
[data-tsp-comics] .tsp-act-walk .tsp-comic-arm--right{animation-delay:.32s}
@keyframes tspc-walk{0%,100%{transform:translateX(0) translateY(0) rotate(0)}12.5%{transform:translateX(-10px) translateY(-6px) rotate(-3deg)}25%{transform:translateX(-18px) translateY(0) rotate(0)}
  37.5%{transform:translateX(-10px) translateY(-6px) rotate(3deg)}50%{transform:translateX(0) translateY(0)}62.5%{transform:translateX(10px) translateY(-6px) rotate(3deg)}75%{transform:translateX(18px) translateY(0)}87.5%{transform:translateX(10px) translateY(-6px) rotate(-3deg)}}
@keyframes tspc-swing{from{transform:rotate(-30deg)}to{transform:rotate(18deg)}}
/* jump: crouch, fly, land with a squash */
[data-tsp-comics] .tsp-act-jump .tsp-comic-stage{animation:tspc-jump .9s cubic-bezier(.3,.6,.4,1) 4}
[data-tsp-comics] .tsp-act-jump .tsp-comic-arm{animation:tspc-up .9s ease-in-out 4}
@keyframes tspc-jump{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(4px) scale(1.06,.92)}45%{transform:translateY(-26px) scale(.96,1.05)}75%{transform:translateY(0) scale(1.05,.94)}}
@keyframes tspc-up{0%,100%{transform:rotate(-14deg)}45%{transform:rotate(-60deg) translateY(-6px)}}
/* dance: tilt left/right with a little bounce */
[data-tsp-comics] .tsp-act-dance .tsp-comic-stage{animation:tspc-dance .7s ease-in-out 6}
[data-tsp-comics] .tsp-act-dance .tsp-comic-arm{animation:tspc-swing .35s ease-in-out infinite alternate}
@keyframes tspc-dance{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-7deg) translateY(-6px)}50%{transform:rotate(0) translateY(0)}75%{transform:rotate(7deg) translateY(-6px)}}
/* shy: shrinks, peeks to the side, hands cover */
[data-tsp-comics] .tsp-act-shy .tsp-comic-stage{animation:tspc-shy 2s ease-in-out 2}
[data-tsp-comics] .tsp-act-shy .tsp-comic-arm{top:20%;animation:tspc-cover 2s ease-in-out 2}
@keyframes tspc-shy{0%,100%{transform:scale(1) translateX(0) rotate(0)}30%{transform:scale(.9) translateX(-12px) rotate(-6deg)}60%{transform:scale(.93) translateX(8px) rotate(4deg)}}
@keyframes tspc-cover{0%,100%{transform:rotate(-14deg)}30%,60%{transform:rotate(-70deg) translate(10px,-8px)}}
/* spin: a full turn like a star */
[data-tsp-comics] .tsp-act-spin .tsp-comic-stage{animation:tspc-spin 1.4s cubic-bezier(.6,0,.3,1) 2;perspective:600px}
[data-tsp-comics] .tsp-act-spin .tsp-comic-arm{animation:tspc-up 1.4s ease-in-out 2}
@keyframes tspc-spin{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.06)}100%{transform:rotateY(360deg) scale(1)}}
/* excited: fast shaking and waving */
[data-tsp-comics] .tsp-act-excited .tsp-comic-stage{animation:tspc-shake .14s linear 20}
[data-tsp-comics] .tsp-act-excited .tsp-comic-arm{animation:tspc-wave .2s ease-in-out infinite alternate}
@keyframes tspc-shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-1.5deg)}75%{transform:translate(3px,-1px) rotate(1.5deg)}}
@keyframes tspc-wave{from{transform:rotate(-26deg)}to{transform:rotate(16deg)}}
/* sleepy: slow float and a lazy stretch */
[data-tsp-comics] .tsp-act-sleepy .tsp-comic-stage{animation:tspc-float 2s ease-in-out 2}
[data-tsp-comics] .tsp-act-sleepy .tsp-comic-arm{animation:tspc-stretch 2s ease-in-out 2}
@keyframes tspc-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes tspc-stretch{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-80deg)}}
/* boss: confident zoom pulses */
[data-tsp-comics] .tsp-act-boss .tsp-comic-stage{animation:tspc-boss 1s ease-in-out 4}
[data-tsp-comics] .tsp-act-boss .tsp-comic-arm{animation:tspc-point 1s ease-in-out 4}
@keyframes tspc-boss{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.09) rotate(-2deg)}60%{transform:scale(1.06) rotate(2deg)}}
@keyframes tspc-point{0%,100%{transform:rotate(-14deg)}40%{transform:rotate(-50deg) translateX(-6px)}}

@media(max-width:480px){
  [data-tsp-comics] .tsp-comic-bubble{top:5px;left:4px;right:4px;padding:7px 6px 9px;border-width:2px;box-shadow:3px 3px 0 #ff5ca4}
  [data-tsp-comics] .tsp-comic-bubble strong{font-size:16px;padding:0 10px 2px;border-width:2px}
  [data-tsp-comics] .tsp-comic-bubble span{font-size:12.5px;line-height:1.5}
  [data-tsp-comics] .tsp-comic-arm{top:46%}
}
@media(prefers-reduced-motion:reduce){[data-tsp-comics] .tsp-comic-decoration{display:none!important}[data-tsp-comics] .tsp-comic-stage,[data-tsp-comics] .tsp-comic-arm{animation:none!important}}