/* WM Product Labels — חזית */

/* גדלים רספונסיביים (משתני CSS שמוזרקים בתווית) */
@media (max-width: 1024px) {
    .awl-product-label.awl-type-label {
        font-size: var(--awl-font-size-tablet) !important;
    }
    .awl-label-wrap.awl-image-label-wrap {
        width: var(--awl-label-size-tablet) !important;
    }
}
@media (max-width: 767px) {
    .awl-product-label.awl-type-label {
        font-size: var(--awl-font-size-phone) !important;
    }
    .awl-label-wrap.awl-image-label-wrap {
        width: var(--awl-label-size-phone) !important;
    }
}

/* ------------------------------------------------------------------
   אנימציות — מימוש עצמאי, שמות תואמים לערכים השמורים בתוויות קיימות
   ------------------------------------------------------------------ */

@keyframes awl-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes awl-bounce-in {
    0% { transform: scale(0); opacity: 0; }
    55% { transform: scale(1.15); opacity: 1; }
    75% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes awl-flicker {
    0%, 100% { opacity: 1; }
    10% { opacity: 0.4; }
    20% { opacity: 1; }
    35% { opacity: 0.2; }
    45% { opacity: 1; }
    60% { opacity: 0.6; }
    75% { opacity: 1; }
}

@keyframes awl-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.18); }
    28% { transform: scale(1); }
    42% { transform: scale(1.18); }
    70% { transform: scale(1); }
}

@keyframes awl-pulsate {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes awl-rotate-x {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(360deg); }
}

@keyframes awl-rotate-y {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes awl-rotate-z {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

@keyframes awl-shake-horizontal {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70% { transform: translateX(-6px); }
    20%, 40%, 60% { transform: translateX(6px); }
    80% { transform: translateX(4px); }
    90% { transform: translateX(-4px); }
}

@keyframes awl-shake-vertical {
    0%, 100% { transform: translateY(0); }
    10%, 30%, 50%, 70% { transform: translateY(-5px); }
    20%, 40%, 60% { transform: translateY(5px); }
    80% { transform: translateY(4px); }
    90% { transform: translateY(-4px); }
}

@keyframes awl-shake-sides {
    0%, 100% { transform: rotate(0deg); transform-origin: 50% 100%; }
    10% { transform: rotate(2deg); }
    20%, 40%, 60% { transform: rotate(-4deg); }
    30%, 50%, 70% { transform: rotate(4deg); }
    80% { transform: rotate(-2deg); }
    90% { transform: rotate(2deg); }
}

@keyframes awl-slide-in {
    0% { transform: translateX(30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes awl-slide-out {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(30px); opacity: 0; }
}

@keyframes awl-squeezing {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(1.2, 0.8); }
    60% { transform: scale(0.85, 1.15); }
    80% { transform: scale(1.05, 0.95); }
}

@keyframes awl-vibration {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, -1px); }
    80% { transform: translate(1px, 1px); }
}