/* ══ Unified Empty-State ══════════════════════════════════════
   One motion language for every empty view — mini-cart, checkout,
   product filters, empty category, search and wishlist. Theme-token
   driven (dark/light automatic), RTL-safe, reduced-motion aware.
   Shipped on every request: never gated by store mode. */
.yalo-es {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px 44px;
}
.yalo-es--card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 18px;
}
.yalo-es-scene { position: relative; width: 132px; height: 120px; margin-bottom: 22px; }
.yalo-es-icon {
    position: absolute; inset-inline: 0; top: 8px; margin-inline: auto;
    width: 92px; height: 92px; border-radius: 26px;
    background: var(--clr-primary-50); border: 1px solid var(--clr-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; color: var(--clr-primary);
    animation: yaloEsFloat 3.4s ease-in-out infinite;
}
.yalo-es-shadow {
    position: absolute; bottom: 0; inset-inline: 0; margin-inline: auto;
    width: 64px; height: 10px; border-radius: 50%;
    background: var(--clr-text); opacity: .08;
    animation: yaloEsShadow 3.4s ease-in-out infinite;
}
.yalo-es-spark { position: absolute; color: var(--clr-primary); opacity: 0; animation: yaloEsSpark 3.4s ease-in-out infinite; }
.yalo-es-spark.s1 { top: 4px;  inset-inline-start: 8px; font-size: 10px; }
.yalo-es-spark.s2 { top: 30px; inset-inline-end: 2px;  font-size: 6px; animation-delay: 1.1s; }
.yalo-es-spark.s3 { bottom: 26px; inset-inline-start: 0; font-size: 8px; animation-delay: 2.2s; }
.yalo-es-title { font-size: 18px; font-weight: 800; color: var(--clr-text); margin: 0 0 8px; line-height: 1.3; }
.yalo-es-hint  { font-size: 13.5px; line-height: 1.7; color: var(--clr-text-3); max-width: 320px; margin: 0 auto 24px; }
.yalo-es-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
@keyframes yaloEsFloat  { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-3deg); } }
@keyframes yaloEsShadow { 0%,100% { transform: scaleX(1); opacity: .08; } 50% { transform: scaleX(.72); opacity: .04; } }
@keyframes yaloEsSpark  { 0%,100% { opacity: 0; transform: translateY(4px) scale(.6); } 45%,60% { opacity: .9; transform: translateY(-6px) scale(1); } }
@media (max-width: 640px) {
    .yalo-es { padding: 44px 18px 36px; }
    .yalo-es-scene { width: 112px; height: 102px; }
    .yalo-es-icon  { width: 78px; height: 78px; font-size: 32px; border-radius: 22px; }
    .yalo-es-title { font-size: 17px; }
    .yalo-es-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .yalo-es-icon, .yalo-es-shadow, .yalo-es-spark { animation: none; }
    .yalo-es-spark { opacity: .5; }
}
/* Dark mode. --clr-primary-50 is a near-white tint (mix toward #fff at
   95%): correct in light mode, a glaring white tile on a slate surface.
   Dark mode uses rgba(primary,.12) — the same treatment the mega-menu
   and search dropdown already apply. The ground shadow is tinted from
   --clr-text, which inverts to near-white in dark mode and would draw a
   bright blob under the icon, so it is re-anchored to true black. */
body.dark-mode .yalo-es-icon {
    background: rgba(var(--clr-primary-rgb), .12);
    border-color: rgba(255, 255, 255, .10);
}
body.dark-mode .yalo-es-shadow { background: #000; opacity: .35; }
@keyframes yaloEsShadowDark { 0%,100% { transform: scaleX(1); opacity: .35; } 50% { transform: scaleX(.72); opacity: .18; } }
body.dark-mode .yalo-es-shadow { animation-name: yaloEsShadowDark; }