/* =====================================================================
   جستجوی سراسری سایت (آیتم «جستجو» در منوی صفحه‌ی اصلی)
   - دسکتاپ: فیلد داخل منو + کادری که زیرش باز می‌شود (SiteSearchBox)
   - موبایل (تا ۷۶۸px): دکمه‌ی جستجو در هدر + مودال از بالا (SiteSearchModal)
   همه‌ی قواعد به .app-shell محدود شده‌اند (هم‌خوان با تم app.css) و برای لینک‌ها
   خط زیرین سراسری (a::after) خنثی می‌شود.
   ===================================================================== */

.app-shell {
    --ss-ink: #1e1b4b;
    --ss-muted: #6b7280;
    --ss-soft: #8b8aa8;
    --ss-line: #e8e5fb;
    --ss-ease: cubic-bezier(.22, 1, .36, 1);
    --ss-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------------------------------------------------------------
   فیلد جستجو (مشترک بین دسکتاپ و مودال)
   --------------------------------------------------------------------- */
.app-shell .ss-desktop {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.app-shell .ss-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 220px;
    height: 42px;
    box-sizing: border-box;
    padding-inline: 14px 10px;
    border-radius: 999px;
    color: var(--color-primary-dark, #4338ca);
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(99, 102, 241, .25);
    box-shadow: 0 2px 10px rgba(99, 102, 241, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: background .25s, border-color .25s, box-shadow .3s var(--ss-ease);
}

.app-shell .ss-field:hover {
    border-color: rgba(99, 102, 241, .5);
    box-shadow: 0 6px 18px rgba(99, 102, 241, .20);
}

.app-shell .ss-desktop.is-open .ss-field,
.app-shell .ss-field:focus-within {
    background: #fff;
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(99, 102, 241, .28);
}

/* حلقه‌ی گرادیانیِ جاری دور فیلد هنگام فوکوس */
.app-shell .ss-field::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(110deg, #6366f1, #22d3ee, #a78bfa, #6366f1);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    animation: ss-flow 3.5s linear infinite;
}

.app-shell .ss-desktop.is-open .ss-field::before,
.app-shell .ss-field:focus-within::before {
    opacity: 1;
}

.app-shell .ss-field-icon {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform .4s var(--ss-spring), color .2s;
}

.app-shell .ss-field:focus-within .ss-field-icon,
.app-shell .ss-desktop.is-open .ss-field-icon {
    color: #7c3aed;
    transform: scale(1.14) rotate(-10deg);
}

.app-shell .ss-field .ss-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 14px;
    color: var(--ss-ink);
    text-align: start;
}

.app-shell .ss-field .ss-input::placeholder {
    color: var(--ss-soft);
    opacity: 1;
    transition: opacity .2s;
}

.app-shell .ss-field:focus-within .ss-input::placeholder {
    opacity: .55;
}

.app-shell .ss-clear {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #4338ca;
    background: rgba(99, 102, 241, .12);
    cursor: pointer;
    transition: background .2s, transform .3s var(--ss-spring);
}

.app-shell .ss-clear:hover {
    background: rgba(99, 102, 241, .24);
    transform: rotate(90deg);
}

.app-shell .ss-clear svg {
    width: 14px;
    height: 14px;
}

.app-shell .ss-spinner {
    flex: none;
    width: 18px;
    height: 18px;
    margin-inline: 4px;
    border-radius: 50%;
    border: 2.5px solid rgba(99, 102, 241, .2);
    border-top-color: #6366f1;
    animation: ss-spin .7s linear infinite;
}

/* ---------------------------------------------------------------------
   کادر نتایج زیر فیلد (دسکتاپ)
   --------------------------------------------------------------------- */
.app-shell .ss-panel {
    position: absolute;
    top: calc(100% + 26px);
    left: 50%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    width: min(500px, calc(100vw - 24px));
    max-height: min(72vh, 580px);
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, .985);
    border: 1px solid var(--color-border-light, #ddd6fe);
    box-shadow: 0 28px 70px rgba(49, 46, 129, .30), 0 6px 18px rgba(99, 102, 241, .16);
    color: var(--ss-ink);
    transform-origin: top center;
    transform: translateX(-50%) translateY(-10px) scale(.97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .34s var(--ss-spring), visibility 0s linear .34s;
}

.app-shell .ss-desktop.is-open .ss-panel {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.app-shell .ss-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, .35) transparent;
}

.app-shell .ss-progress {
    position: relative;
    flex: none;
    height: 3px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s;
}

.app-shell .ss-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, #6366f1, #22d3ee, transparent);
    animation: ss-slide 1.1s ease-in-out infinite;
}

.app-shell .ss-progress.is-active {
    opacity: 1;
}

.app-shell .ss-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 8px 12px;
    font-size: 11.5px;
    color: var(--ss-muted);
    background: linear-gradient(180deg, #faf9ff, #f5f3ff);
    border-top: 1px solid #eeecfb;
}

.app-shell .ss-foot kbd {
    display: inline-block;
    margin-inline-end: 3px;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid #ddd6fe;
    border-bottom-width: 2px;
    background: #fff;
    color: #4338ca;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    direction: ltr;
}

/* پوشش کم‌رنگ پشت کادر (دسکتاپ)؛ بیرون از header قرار دارد تا backdrop-filter کار کند */
.app-shell .ss-overlay {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: rgba(30, 27, 75, .30);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
}

.app-shell .ss-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* ---------------------------------------------------------------------
   گروه‌ها و ردیف‌های نتیجه
   --------------------------------------------------------------------- */
.app-shell .ss-groups {
    transition: opacity .2s, filter .2s;
}

.app-shell .ss-groups.is-stale {
    opacity: .55;
    filter: saturate(.7);
}

.app-shell .ss-group + .ss-group {
    margin-top: 8px;
}

.app-shell .ss-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 8px 4px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ss-muted);
}

.app-shell .ss-group-ico {
    flex: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
}

.app-shell .ss-ico-product {
    --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22m7.5%204.27%209%205.15%22/%3E%3Cpath%20d=%22M21%208a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016Z%22/%3E%3Cpath%20d=%22m3.3%207%208.7%205%208.7-5%22/%3E%3Cpath%20d=%22M12%2022V12%22/%3E%3C/svg%3E");
}

.app-shell .ss-ico-article {
    --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%203v5h5%22/%3E%3Cpath%20d=%22M9%2013h6%22/%3E%3Cpath%20d=%22M9%2017h6%22/%3E%3C/svg%3E");
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.app-shell .ss-count {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    margin-inline-start: auto;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #4338ca;
    background: rgba(99, 102, 241, .12);
}

.app-shell a.ss-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 16px;
    border: 1px solid transparent;
    color: var(--ss-ink);
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(8px);
    animation: ss-rise .38s var(--ss-ease) forwards;
    animation-delay: calc(var(--i, 0) * 32ms);
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.app-shell a.ss-item::after {
    content: none;
}

.app-shell a.ss-item:hover,
.app-shell a.ss-item:focus-visible,
.app-shell a.ss-item.is-active {
    color: var(--ss-ink);
    text-shadow: none;
    outline: none;
    background: linear-gradient(135deg, rgba(99, 102, 241, .10), rgba(139, 92, 246, .06) 60%, rgba(34, 211, 238, .08));
    border-color: rgba(99, 102, 241, .22);
    box-shadow: 0 6px 16px rgba(99, 102, 241, .12);
}

.app-shell a.ss-item.is-active::before {
    content: "";
    position: absolute;
    inset-block: 12px;
    inset-inline-start: -1px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(#6366f1, #22d3ee);
}

.app-shell .ss-thumb {
    position: relative;
    flex: none;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    box-shadow: 0 4px 10px rgba(99, 102, 241, .18);
}

.app-shell .ss-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s var(--ss-ease);
}

.app-shell a.ss-item:hover .ss-thumb img,
.app-shell a.ss-item.is-active .ss-thumb img {
    transform: scale(1.12);
}

.app-shell .ss-badge {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 1px 0 2px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, rgba(245, 158, 11, .95), rgba(249, 115, 22, .95));
}

.app-shell .ss-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-shell .ss-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.app-shell .ss-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 1.8;
    color: var(--ss-muted);
}

.app-shell .ss-meta {
    font-size: 11.5px;
    color: var(--ss-soft);
}

.app-shell .ss-body .shop-price {
    margin-top: 2px;
    gap: 2px 8px;
}

.app-shell .ss-body .shop-price-now {
    font-size: 13.5px;
}

.app-shell .ss-body .shop-price-old {
    font-size: 11.5px;
}

.app-shell .ss-body .shop-price-off {
    padding: 0 6px;
    font-size: 10.5px;
}

.app-shell .ss-item mark {
    padding: 0 1px;
    border-radius: 3px;
    color: inherit;
    font-weight: 800;
    background: linear-gradient(transparent 58%, rgba(250, 204, 21, .60) 58%);
}

.app-shell .ss-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #6366f1;
    background: rgba(99, 102, 241, .10);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s, transform .3s var(--ss-ease);
}

.app-shell[dir="ltr"] .ss-go {
    transform: translateX(-8px);
}

.app-shell[dir="ltr"] .ss-go svg {
    transform: scaleX(-1);
}

.app-shell .ss-go svg {
    width: 16px;
    height: 16px;
}

.app-shell a.ss-item:hover .ss-go,
.app-shell a.ss-item.is-active .ss-go {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------------
   حالت‌های خالی / شروع / بارگذاری
   --------------------------------------------------------------------- */
.app-shell .ss-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 20px 22px;
    text-align: center;
}

.app-shell .ss-state-art {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 6px;
    border-radius: 24px;
    color: #6366f1;
    background: radial-gradient(circle at 30% 25%, #fff, #e0e7ff 55%, #ddd6fe);
    box-shadow: 0 10px 26px rgba(99, 102, 241, .25), inset 0 1px 0 #fff;
    animation: ss-float 3.2s ease-in-out infinite;
}

.app-shell .ss-state-art svg {
    width: 38px;
    height: 38px;
}

.app-shell .ss-state-empty .ss-state-art {
    color: #f59e0b;
    background: radial-gradient(circle at 30% 25%, #fff, #fef3c7 55%, #fde68a);
    box-shadow: 0 10px 26px rgba(245, 158, 11, .28), inset 0 1px 0 #fff;
}

.app-shell .ss-state-title {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ss-ink);
}

.app-shell .ss-state-text {
    max-width: 300px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--ss-muted);
}

.app-shell .ss-skeletons {
    display: grid;
    gap: 6px;
}

.app-shell .ss-skel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    opacity: 0;
    animation: ss-rise .35s var(--ss-ease) forwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}

.app-shell .ss-skel-thumb {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 14px;
}

.app-shell .ss-skel-lines {
    flex: 1 1 auto;
    display: grid;
    gap: 8px;
}

.app-shell .ss-skel-line {
    display: block;
    height: 10px;
    border-radius: 6px;
}

.app-shell .ss-w60 { width: 60%; }
.app-shell .ss-w90 { width: 90%; }
.app-shell .ss-w35 { width: 35%; }

.app-shell .ss-skel-thumb,
.app-shell .ss-skel-line {
    background: linear-gradient(100deg, #eceafc 30%, #f8f7ff 50%, #eceafc 70%);
    background-size: 200% 100%;
    animation: ss-shimmer 1.3s linear infinite;
}

/* ---------------------------------------------------------------------
   دکمه‌ی جستجو در هدر موبایل
   --------------------------------------------------------------------- */
.app-shell .ss-mobile-btn {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    background: var(--gradient-button, linear-gradient(135deg, #6366f1, #8b5cf6));
    box-shadow: 0 6px 16px rgba(99, 102, 241, .40);
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s var(--ss-spring), box-shadow .2s;
}

.app-shell .ss-mobile-btn:active {
    transform: scale(.9);
    box-shadow: 0 3px 8px rgba(99, 102, 241, .35);
}

.app-shell .ss-mobile-btn svg {
    width: 20px;
    height: 20px;
}

/* برق ملایمی که هر چند ثانیه از روی دکمه رد می‌شود */
.app-shell .ss-mobile-btn::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: 40%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    animation: ss-shine 4.5s ease-in-out 1.5s infinite;
}

/* ---------------------------------------------------------------------
   مودال جستجو (موبایل)
   --------------------------------------------------------------------- */
.app-shell .ss-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .42s;
}

.app-shell .ss-modal.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.app-shell .ss-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .35s ease;
}

.app-shell .ss-modal.is-open .ss-modal-backdrop {
    opacity: 1;
}

.app-shell .ss-modal-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    border-radius: 0 0 28px 28px;
    background: linear-gradient(180deg, #fff 0%, #f8f7ff 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .45);
    transform: translateY(-110%);
    transition: transform .42s var(--ss-ease), max-height .45s var(--ss-ease);
}

/* وقتی عبارت نوشته شد، مودال تا پایین صفحه بزرگ می‌شود */
.app-shell .ss-modal.has-term .ss-modal-sheet {
    max-height: 100vh;
    max-height: 100dvh;
}

.app-shell .ss-modal.is-open .ss-modal-sheet {
    transform: none;
}

.app-shell .ss-modal-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
}

.app-shell .ss-field-lg {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 48px;
    background: #fff;
    border-color: rgba(99, 102, 241, .35);
}

/* ۱۶ پیکسل: جلوی بزرگ‌نمایی خودکار iOS هنگام فوکوس را می‌گیرد */
.app-shell .ss-field-lg .ss-input {
    font-size: 16px;
}

.app-shell .ss-modal-cancel {
    flex: none;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: #4338ca;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.app-shell .ss-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* قفل اسکرول صفحه‌ی پشت مودال */
body:has(.ss-modal.is-open) {
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   ریسپانسیو
   --------------------------------------------------------------------- */
@media (min-width: 1201px) and (max-width: 1400px) {
    .app-shell .ss-field {
        width: 168px;
    }
}

@media (min-width: 1201px) {
    .app-shell .ss-modal {
        display: none;
    }
}

/* همان آستانه‌ی منوی همبرگری در MainLayout: کادر جستجوی دسکتاپ پنهان و دکمه‌ی جستجوی موبایل دیده می‌شود */
@media (max-width: 1200px) {
    .app-shell .ss-desktop,
    .app-shell .ss-overlay {
        display: none;
    }

    .app-shell .ss-mobile-btn {
        display: inline-flex;
    }
}

@media (max-width: 768px) {
    .app-shell .ss-thumb {
        width: 64px;
        height: 64px;
    }

    .app-shell a.ss-item {
        padding: 10px;
    }

    .app-shell .ss-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .app-shell .ss-body .shop-price-now {
        font-size: 14.5px;
    }
}

/* دستگاه لمسی: فلش «رفتن» همیشه دیده شود */
@media (hover: none) {
    .app-shell .ss-go {
        opacity: .75;
        transform: none;
    }
}

/* ---------------------------------------------------------------------
   انیمیشن‌ها
   --------------------------------------------------------------------- */
@keyframes ss-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes ss-flow {
    from { background-position: 0% 50%; }
    to { background-position: 300% 50%; }
}

@keyframes ss-spin {
    to { transform: rotate(360deg); }
}

@keyframes ss-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(260%); }
}

@keyframes ss-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes ss-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes ss-shine {
    0%, 60% { left: -60%; }
    100% { left: 140%; }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .ss-field::before,
    .app-shell .ss-spinner,
    .app-shell .ss-progress::before,
    .app-shell .ss-state-art,
    .app-shell .ss-skel-thumb,
    .app-shell .ss-skel-line,
    .app-shell .ss-mobile-btn::after {
        animation: none;
    }

    .app-shell a.ss-item,
    .app-shell .ss-skel {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .app-shell .ss-panel,
    .app-shell .ss-modal-sheet,
    .app-shell .ss-modal-backdrop,
    .app-shell .ss-overlay {
        transition-duration: .01ms;
    }
}