/* =========================================================
  FONT FACE
========================================================= */

@font-face {
    font-family: "IRANSansXFaNum";
    src: url("../fonts/IRANSansXFaNum-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANSansXFaNum";
    src: url("../fonts/IRANSansXFaNum-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
  ROOT VARIABLES
========================================================= */

:root {
    --sp-font-main: "IRANSansXFaNum", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --sp-color-bg: #ffffff;
    --sp-color-text: #111827;
    --sp-color-muted: #6b7280;

    --sp-color-primary: #007dfa;
    --sp-color-primary-rgb: 0, 125, 250;
    --sp-color-primary-dark: #0067d0;
    --sp-color-primary-soft: rgba(0, 125, 250, 0.10);

    --sp-page-max-width: 100%;
}


/* =========================================================
  RESET / BASE
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--sp-font-main);
    background: var(--sp-color-bg);
    color: var(--sp-color-text);
    direction: rtl;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}


/* =========================================================
  ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
  PAGE SHELL
========================================================= */

.sp-page-shell {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}


/* =========================================================
  HEADER / MENU
========================================================= */

:root {
    --sp-header-z: 1000;
    --sp-header-top: 18px;
    --sp-header-x: 18px;

    --sp-menu-max-width: 1080px;
    --sp-menu-height: 64px;
    --sp-menu-radius: 999px;

    --sp-menu-logo-left: 18px;
    --sp-menu-logo-width: 96px;
    --sp-menu-logo-space: 132px;

    --sp-menu-bg: rgba(255, 255, 255, 0.94);
    --sp-menu-bg-scrolled: rgba(255, 255, 255, 0.985);
    --sp-menu-border: rgba(var(--sp-color-primary-rgb), 0.16);
    --sp-menu-shadow: 0 18px 50px rgba(0, 70, 160, 0.12);
    --sp-menu-shadow-scrolled: 0 20px 56px rgba(0, 70, 160, 0.16);
    --sp-menu-blur: 20px;

    --sp-menu-intro-duration: 1550ms;
    --sp-menu-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

html {
    scroll-padding-top: 104px;
}

.sp-header {
    position: fixed;
    z-index: var(--sp-header-z);
    top: var(--sp-header-top);
    inset-inline: 0;
    display: flex;
    justify-content: center;
    padding-inline: var(--sp-header-x);
    pointer-events: none;
}

.sp-menu {
    position: relative;
    isolation: isolate;
    direction: rtl;
    pointer-events: auto;
    width: min(100%, var(--sp-menu-max-width));
    min-height: var(--sp-menu-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid var(--sp-menu-border);
    border-radius: var(--sp-menu-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--sp-menu-bg));
    box-shadow: var(--sp-menu-shadow);
    backdrop-filter: blur(var(--sp-menu-blur));
    -webkit-backdrop-filter: blur(var(--sp-menu-blur));
    transform-origin: center center;
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

.sp-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.68) 0%,
            rgba(255, 255, 255, 0.14) 100%);
}

.sp-header[data-header-scrolled="true"] .sp-menu {
    background: var(--sp-menu-bg-scrolled);
    border-color: rgba(var(--sp-color-primary-rgb), 0.22);
    box-shadow: var(--sp-menu-shadow-scrolled);
}


/* =========================================================
  HEADER / MENU - ORBIT LIGHT
========================================================= */

.sp-menu-orbit {
    position: absolute;
    inset: -2px;
    z-index: 1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    pointer-events: none;
    overflow: visible;
}

.sp-menu-orbit-glow,
.sp-menu-orbit-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    stroke-dasharray: 72 928;
    stroke-dashoffset: 0;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
    animation: spMenuOrbitStroke 9000ms ease-in-out 2600ms infinite;
}

.sp-menu-orbit-glow {
    stroke: rgba(var(--sp-color-primary-rgb), 0.16);
    stroke-width: 10;
    filter: blur(6px);
}

.sp-menu-orbit-line {
    stroke: rgba(var(--sp-color-primary-rgb), 0.22);
    stroke-width: 0.4;
    filter:
        drop-shadow(0 0 4px rgba(var(--sp-color-primary-rgb), 0.52)) drop-shadow(0 0 10px rgba(var(--sp-color-primary-rgb), 0.24));
}


/* =========================================================
  HEADER / MENU - BRAND
========================================================= */

.sp-menu-brand {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: var(--sp-menu-logo-left);
    right: auto;
    width: var(--sp-menu-logo-width);
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 6px;
    border-radius: 999px;
    transform: translateY(-50%);
}

.sp-menu-brand-logo {
    width: auto;
    height: 34px;
    object-fit: contain;
}


/* =========================================================
  HEADER / MENU - LINKS
========================================================= */

.sp-menu-list {
    position: relative;
    z-index: 3;
    direction: rtl;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0 16px 0 var(--sp-menu-logo-space);
    list-style: none;
}

.sp-menu-item {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.sp-menu-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 999px;
    color: var(--sp-color-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.sp-menu-link:hover {
    background: var(--sp-color-primary-soft);
    color: var(--sp-color-primary);
    transform: translateY(-1px);
}

.sp-menu-link.is-active,
.sp-menu-link[aria-current="true"] {
    background: var(--sp-color-primary);
    color: #ffffff;
}


/* =========================================================
  HEADER / MENU - TOGGLE
========================================================= */

.sp-menu-toggle {
    display: none;
    position: relative;
    z-index: 4;
    width: 42px;
    height: 42px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--sp-color-primary-rgb), 0.10);
    color: var(--sp-color-primary);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}

.sp-menu-toggle-line {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle-line:nth-child(2) {
    opacity: 0;
}

.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* =========================================================
  HEADER / MENU - INTRO ANIMATION
========================================================= */

.js .sp-header[data-menu-intro="pending"] .sp-menu {
    opacity: 0;
    clip-path: inset(0 calc(50% - 62px) 0 calc(50% - 62px) round var(--sp-menu-radius));
    transform: translateY(-8px) scale(0.98);
}

.js .sp-header[data-menu-intro="running"] .sp-menu {
    opacity: 1;
    animation: spMenuCapsuleOpen var(--sp-menu-intro-duration) var(--sp-menu-intro-ease) forwards;
}

.js .sp-header[data-menu-intro="done"] .sp-menu {
    opacity: 1;
    clip-path: none;
    transform: translateY(0) scale(1);
}

.js .sp-header[data-menu-intro="pending"] .sp-menu-brand {
    left: 50%;
    transform: translate(-50%, -50%) scale(1.04);
}

.js .sp-header[data-menu-intro="running"] .sp-menu-brand {
    animation: spMenuLogoToLeft var(--sp-menu-intro-duration) var(--sp-menu-intro-ease) forwards;
}

.js .sp-header[data-menu-intro="done"] .sp-menu-brand {
    left: var(--sp-menu-logo-left);
    transform: translateY(-50%) scale(1);
}

.js .sp-header[data-menu-intro="pending"] .sp-menu-item,
.js .sp-header[data-menu-intro="pending"] .sp-menu-toggle {
    opacity: 0;
    transform: translateY(8px);
}

.js .sp-header[data-menu-intro="running"] .sp-menu-item {
    opacity: 0;
    animation: spMenuTextFadeIn 460ms ease forwards;
}

.js .sp-header[data-menu-intro="running"] .sp-menu-item:nth-child(1) {
    animation-delay: 920ms;
}

.js .sp-header[data-menu-intro="running"] .sp-menu-item:nth-child(2) {
    animation-delay: 990ms;
}

.js .sp-header[data-menu-intro="running"] .sp-menu-item:nth-child(3) {
    animation-delay: 1060ms;
}

.js .sp-header[data-menu-intro="running"] .sp-menu-item:nth-child(4) {
    animation-delay: 1130ms;
}

.js .sp-header[data-menu-intro="running"] .sp-menu-item:nth-child(5) {
    animation-delay: 1200ms;
}

.js .sp-header[data-menu-intro="running"] .sp-menu-item:nth-child(n + 6) {
    animation-delay: 1270ms;
}

.js .sp-header[data-menu-intro="running"] .sp-menu-toggle {
    opacity: 0;
    animation: spMenuTextFadeIn 420ms ease 980ms forwards;
}

.js .sp-header[data-menu-intro="done"] .sp-menu-item,
.js .sp-header[data-menu-intro="done"] .sp-menu-toggle {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
  HEADER / MENU - KEYFRAMES
========================================================= */

@keyframes spMenuCapsuleOpen {
    0% {
        opacity: 0;
        clip-path: inset(0 calc(50% - 62px) 0 calc(50% - 62px) round var(--sp-menu-radius));
        transform: translateY(-8px) scale(0.98);
    }

    14% {
        opacity: 1;
        transform: translateY(0) scale(1.01);
    }

    36% {
        opacity: 1;
        clip-path: inset(0 calc(50% - 62px) 0 calc(50% - 62px) round var(--sp-menu-radius));
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round var(--sp-menu-radius));
        transform: translateY(0) scale(1);
    }
}

@keyframes spMenuLogoToLeft {
    0% {
        left: 50%;
        transform: translate(-50%, -50%) scale(1.04);
    }

    36% {
        left: 50%;
        transform: translate(-50%, -50%) scale(1.04);
    }

    100% {
        left: var(--sp-menu-logo-left);
        transform: translateY(-50%) scale(1);
    }
}

@keyframes spMenuTextFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spMenuOrbitStroke {
    0% {
        opacity: 0;
        stroke-dashoffset: 0;
    }

    58% {
        opacity: 0;
        stroke-dashoffset: 0;
    }

    62% {
        opacity: 1;
        stroke-dashoffset: 0;
    }

    82% {
        opacity: 1;
        stroke-dashoffset: -1000;
    }

    88% {
        opacity: 0;
        stroke-dashoffset: -1000;
    }

    100% {
        opacity: 0;
        stroke-dashoffset: -1000;
    }
}


/* =========================================================
  HEADER / MENU - MOBILE
========================================================= */

@media (max-width: 767px) {
    :root {
        --sp-header-top: 10px;
        --sp-header-x: 10px;
        --sp-menu-height: 58px;
        --sp-menu-logo-left: 12px;
        --sp-menu-logo-width: 86px;
        --sp-menu-logo-space: 0;
    }

    html {
        scroll-padding-top: 92px;
    }

    .sp-menu {
        justify-content: flex-start;
        min-height: var(--sp-menu-height);
        padding: 8px 10px;
    }

    .sp-menu-brand {
        width: var(--sp-menu-logo-width);
        height: 40px;
    }

    .sp-menu-brand-logo {
        height: 30px;
    }

    .sp-menu-toggle {
        display: inline-flex;
        margin-right: 0;
        margin-left: auto;
    }

    .sp-menu-list {
        position: absolute;
        z-index: 10;
        top: calc(100% + 10px);
        inset-inline: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        max-height: min(70vh, 420px);
        overflow-y: auto;
        margin: 0;
        padding: 8px;
        border: 1px solid rgba(var(--sp-color-primary-rgb), 0.16);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 54px rgba(0, 70, 160, 0.16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 180ms ease;
    }

    .sp-menu-list[data-menu-open="true"] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .sp-menu-item {
        width: 100%;
    }

    .sp-menu-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
        text-align: right;
    }
}


/* =========================================================
  HEADER / MENU - REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sp-menu-orbit-glow,
    .sp-menu-orbit-line {
        animation: none !important;
        opacity: 0 !important;
    }

    .js .sp-header[data-menu-intro] .sp-menu,
    .js .sp-header[data-menu-intro] .sp-menu-brand,
    .js .sp-header[data-menu-intro] .sp-menu-item,
    .js .sp-header[data-menu-intro] .sp-menu-toggle {
        animation: none !important;
        opacity: 1;
        clip-path: none;
        transform: none;
    }

    .js .sp-header[data-menu-intro] .sp-menu-brand {
        left: var(--sp-menu-logo-left);
        top: 50%;
        transform: translateY(-50%);
    }
}

/* =========================================================
  MAIN
========================================================= */

.sp-main {
    width: 100%;
}

.sp-sections-root {
    width: 100%;
}


/* =========================================================
  GLOBAL SECTION BASE
  سکشن‌ها تمام‌عرض هستند. استایل اختصاصی سکشن‌ها بعداً اضافه می‌شود.
========================================================= */

.sp-section {
    width: 100%;
}

.sp-section-inner {
    width: 100%;
}


/* =========================================================
  SECTION: HERO
========================================================= */

@property --sp-hero-progress {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.sp-hero-section {
    --sp-hero-hold-duration: 5000ms;

    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 200px 18px 72px;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 44%,
            rgba(var(--sp-color-primary-rgb), 0.10) 0%,
            rgba(var(--sp-color-primary-rgb), 0.05) 22%,
            rgba(var(--sp-color-primary-rgb), 0.00) 46%),
        linear-gradient(90deg,
            #eef6ff 0%,
            #f6f9ff 18%,
            #fbfbfb 44%,
            #fbfbfb 100%);
}

.sp-hero-inner {
    direction: ltr;
    width: min(100%, 1180px);
    min-height: calc(100vh - 210px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "visual content";
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
}

.sp-hero-visual {
    direction: ltr;
    grid-area: visual;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.sp-hero-stage {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 1 / 1;
}

.sp-hero-scene {
    --hero-accent-rgb: 0, 125, 250;
    --hero-accent-solid: #007dfa;

    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.96);
    transition:
        opacity 520ms ease,
        visibility 520ms ease,
        transform 680ms cubic-bezier(0.19, 1, 0.22, 1);
}

.sp-hero-scene.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp-hero-scene--blue {
    --hero-accent-rgb: 0, 125, 250;
    --hero-accent-solid: #007dfa;
}

.sp-hero-scene--green {
    --hero-accent-rgb: 0, 125, 250;
    --hero-accent-solid: #007dfa;
}

.sp-hero-scene--pink {
    --hero-accent-rgb: 255, 82, 154;
    --hero-accent-solid: #ff529a;
}

.sp-hero-scene--purple {
    --hero-accent-rgb: 140, 87, 255;
    --hero-accent-solid: #8c57ff;
}

.sp-hero-scene-glow {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(82%, 430px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background:
        radial-gradient(circle,
            rgba(var(--hero-accent-rgb), 0.24) 0%,
            rgba(var(--hero-accent-rgb), 0.12) 34%,
            rgba(var(--hero-accent-rgb), 0.00) 70%);
    filter: blur(12px);
    opacity: 0.95;
}

.sp-hero-progress-ring {
    --sp-hero-progress: 0deg;

    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 1;
    width: min(88%, 460px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) scale(1.03);
    border-radius: 999px;
    background:
        conic-gradient(from -90deg,
            rgba(var(--hero-accent-rgb), 0.96) 0deg,
            rgba(var(--hero-accent-rgb), 0.96) var(--sp-hero-progress),
            rgba(var(--hero-accent-rgb), 0.13) var(--sp-hero-progress),
            rgba(var(--hero-accent-rgb), 0.13) 360deg);
    -webkit-mask:
        radial-gradient(farthest-side,
            transparent calc(100% - 16px),
            #000 calc(100% - 15px));
    mask:
        radial-gradient(farthest-side,
            transparent calc(100% - 16px),
            #000 calc(100% - 15px));
    box-shadow:
        0 12px 30px rgba(var(--hero-accent-rgb), 0.12);
}

.sp-hero-scene.is-active .sp-hero-progress-ring {
    animation: spHeroProgressFillAndShrink var(--sp-hero-hold-duration) linear forwards;
}

.sp-hero-scene-rings {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 0;
    width: min(72%, 376px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 2px solid rgba(var(--hero-accent-rgb), 0.18);
}

.sp-hero-scene-rings::before,
.sp-hero-scene-rings::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.sp-hero-scene-rings::before {
    width: 82%;
    height: 82%;
    border: 2px solid rgba(var(--hero-accent-rgb), 0.16);
}

.sp-hero-scene-rings::after {
    width: 112%;
    height: 112%;
    border: 2px solid rgba(var(--hero-accent-rgb), 0.10);
}

.sp-hero-scene-main {
    position: absolute;
    inset: 66% auto auto 50%;
    z-index: 3;
    width: clamp(270px, 33vw, 420px);
    height: auto;
    transform: translate(-50%, -50%) scale(0.92) rotate(-2deg);
    user-select: none;
    pointer-events: none;
    transform-origin: center center;
}

.sp-hero-scene.is-active .sp-hero-scene-main {
    animation: spHeroProductCycle var(--sp-hero-hold-duration) cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.sp-hero-scene-bubble {
    position: absolute;
    z-index: 4;
    width: clamp(46px, 6.5vw, 72px);
    height: auto;
    user-select: none;
    pointer-events: none;
}

.sp-hero-scene-bubble--side {
    top: 61%;
    left: 11%;
}

.sp-hero-scene.is-active .sp-hero-scene-bubble--side {
    animation: spHeroBubbleFloatSide 4.8s ease-in-out infinite;
}


/* =========================================================
  HERO CONTENT
========================================================= */

.sp-hero-content {
    direction: rtl;
    grid-area: content;
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-hero-copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition:
        opacity 420ms ease,
        visibility 420ms ease,
        transform 560ms cubic-bezier(0.19, 1, 0.22, 1);
}

.sp-hero-copy.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sp-hero-eyebrow {
    margin: 0 0 14px;
    color: var(--sp-color-primary);
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 800;
    line-height: 1.8;
}

.sp-hero-title {
    margin: 0;
    max-width: 560px;
    color: var(--sp-color-primary);
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 900;
    line-height: 1.6em;
    letter-spacing: -0.03em;
}

.sp-hero-desc {
    margin: 20px 0 0;
    max-width: 520px;
    color: #111827;
    font-size: clamp(15px, 1.65vw, 19px);
    font-weight: 600;
    line-height: 2;
}

.sp-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 28px;
    padding: 10px 24px;
    border-radius: 999px;
    background:
        linear-gradient(135deg, var(--sp-color-primary), #42a8ff);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    box-shadow:
        0 12px 28px rgba(var(--sp-color-primary-rgb), 0.24),
        0 4px 12px rgba(var(--sp-color-primary-rgb), 0.18);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.sp-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 34px rgba(var(--sp-color-primary-rgb), 0.28),
        0 6px 16px rgba(var(--sp-color-primary-rgb), 0.20);
}

.sp-hero-dots {
    position: absolute;
    right: 0;
    bottom: -10%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--sp-color-primary-rgb), 0.22);
    transition:
        width 220ms ease,
        background-color 220ms ease;
}

.sp-hero-dot.is-active {
    width: 26px;
    background: var(--sp-color-primary);
}


/* =========================================================
  HERO KEYFRAMES
========================================================= */

@keyframes spHeroProgressFillAndShrink {
    0% {
        --sp-hero-progress: 0deg;
        transform: translate(-50%, -50%) scale(1.04);
    }

    100% {
        --sp-hero-progress: 360deg;
        transform: translate(-50%, -50%) scale(0.88);
    }
}

@keyframes spHeroProductCycle {
    0% {
        transform: translate(-50%, -50%) scale(0.90) rotate(-4deg) translateY(8px);
    }

    12% {
        transform: translate(-50%, -50%) scale(1.03) rotate(-1deg) translateY(0);
    }

    22% {
        transform: translate(-50%, -50%) scale(1) rotate(-2deg) translateY(0);
    }

    56% {
        transform: translate(-50%, -50%) scale(1) rotate(1deg) translateY(-12px);
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(-2deg) translateY(0);
    }
}

@keyframes spHeroBubbleFloatSide {
    0% {
        transform: translate(0, 0) scale(0.96);
    }

    18% {
        transform: translate(0, 0) scale(1.04);
    }

    50% {
        transform: translate(-10px, -12px) scale(1.08);
    }

    100% {
        transform: translate(0, 0) scale(0.96);
    }
}


/* =========================================================
  SECTION: HERO - MOBILE
========================================================= */

@media (max-width: 767px) {
    .sp-hero-section {
        min-height: 100svh;
        padding: 200px 14px 48px;
        background:
            radial-gradient(circle at 50% 18%,
                rgba(var(--sp-color-primary-rgb), 0.10) 0%,
                rgba(var(--sp-color-primary-rgb), 0.05) 20%,
                rgba(var(--sp-color-primary-rgb), 0.00) 44%),
            linear-gradient(180deg,
                #eef6ff 0%,
                #f7faff 18%,
                #fbfbfb 40%,
                #fbfbfb 100%);
    }

    .sp-hero-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "content";
        gap: 18px;
    }

    .sp-hero-stage {
        width: min(100%, 380px);
    }

    .sp-hero-scene-main {
        width: clamp(230px, 68vw, 320px);
    }

    .sp-hero-content {
        min-height: 330px;
    }

    .sp-hero-copy {
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }

    .sp-hero-title {
        max-width: 360px;
        font-size: clamp(30px, 10vw, 42px);
    }

    .sp-hero-desc {
        max-width: 340px;
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.9;
    }

    .sp-hero-cta {
        margin-top: 22px;
    }

    .sp-hero-dots {
        right: 50%;
        bottom: 4px;
        transform: translateX(50%);
    }

    .sp-hero-scene-bubble--side {
        top: 63%;
        left: 7%;
    }
}


/* =========================================================
  SECTION: CATEGORY
  بعداً اینجا استایل دسته‌بندی‌ها اضافه می‌شود.
========================================================= */


/* =========================================================
  SECTION: CATEGORY PRODUCT CAROUSEL
========================================================= */

.sp-cpc-section {
    position: relative;
    width: 100%;
    padding: 36px 18px 76px;
}

.sp-cpc-section--more {
    padding-top: 0;
}

.sp-cpc-inner {
    width: min(100%, 1220px);
    margin-inline: auto;
}

/* =========================================================
  CATEGORY PRODUCT CAROUSEL - TITLE
========================================================= */

.sp-cpc-section-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 18px;
    text-align: center;
    flex-direction: row-reverse;
}

.sp-cpc-section-title {
    margin: 0;
    color: #111827;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

.sp-cpc-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1;
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .sp-cpc-section-head {
        gap: 6px;
        margin-bottom: 12px;
    }

    .sp-cpc-section-title {
        font-size: 18px;
        line-height: 1.6;
    }

    .sp-cpc-section-icon {
        font-size: 20px;
    }
}

.sp-cpc-shell {
    direction: ltr;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: stretch;
    gap: 20px;
    padding: 26px 24px 28px;
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(90deg, #9fd6ff 0%, #008efa 100%);
    box-shadow:
        0 18px 48px rgba(0, 125, 250, 0.10),
        0 4px 12px rgba(0, 125, 250, 0.06);
}

.sp-cpc-section--more .sp-cpc-shell {
    background:
        linear-gradient(90deg, #b6e0ff 0%, #118ff0 100%);
}

.sp-cpc-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.18), transparent 34%),
        radial-gradient(circle at 80% 72%, rgba(255, 255, 255, 0.12), transparent 32%);
}

.sp-cpc-content {
    direction: rtl;
    position: relative;
    z-index: 2;
    min-width: 0;
}

.sp-cpc-toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.sp-cpc-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.sp-cpc-filter-btn {
    min-height: 38px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #243244;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.sp-cpc-filter-btn:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.sp-cpc-filter-btn.is-active {
    background: var(--sp-color-primary);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow:
        0 10px 24px rgba(var(--sp-color-primary-rgb), 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.sp-cpc-carousel-wrap {
    position: relative;
    min-width: 0;
}

.sp-cpc-swiper {
    padding: 2px 4px 8px;
    overflow: hidden;
}

.sp-cpc-swiper .swiper-wrapper {
    align-items: stretch;
}

.sp-cpc-slide {
    height: auto;
    display: flex;
}

.sp-cpc-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 6px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08),
        0 2px 8px rgba(15, 23, 42, 0.05);
    transform: translateY(18px) scale(0.985);
    opacity: 0;
    animation: spCpcCardIn 580ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.sp-cpc-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.12),
        0 4px 12px rgba(15, 23, 42, 0.08);
}

.sp-cpc-card-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #f7fbff;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-cpc-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 260ms ease;
}

.sp-cpc-card:hover .sp-cpc-card-image {
    transform: scale(1.045);
}

.sp-cpc-card-logo {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-cpc-card-logo img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    display: block;
}

.sp-cpc-card-price-strip {
    position: absolute;
    right: 5px;
    left: 5px;
    bottom: 10px;
    display: flex;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
    flex-direction: row-reverse;
}

.sp-cpc-card-price-main {
    flex: 1 1 auto;
    min-width: 0;
    background: rgb(225, 242, 255);
    padding: 7px 10px 8px;
    color: var(--sp-color-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center;
    align-items: center;
    display: flex;
}

.sp-cpc-card-installment {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 6px 8px;
    background: #008efa;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sp-cpc-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 4px 2px;
    min-width: 0;
}

.sp-cpc-card-merchant {
    margin: 0;
    color: #7b8794;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.sp-cpc-card-title {
    margin: 0;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.75;
    min-height: calc(12px * 1.75 * 2);
    max-height: calc(12px * 1.75 * 2);
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sp-cpc-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 2px;
}

.sp-cpc-card-old-row {
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-direction: row-reverse;
}

.sp-cpc-card-old {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: line-through;
    min-height: 16px;
}

.sp-cpc-card-discount {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #008efa;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    box-shadow: 0 8px 16px rgba(255, 52, 78, 0.20);
}

.sp-cpc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sp-cpc-card-current {
    color: #101828;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.5;
}

.sp-cpc-card-cashback {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(127, 86, 217, 0.10);
    color: #7f56d9;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.sp-cpc-card-cashback-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 auto;
}

.sp-cpc-card-cashback-text {
    display: inline-flex;
    align-items: center;
}

.sp-cpc-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: end;
    justify-content: center;
    min-width: 0;
}

.sp-cpc-visual-card {
    width: 100%;
    max-width: 240px;
    display: flex;
    align-items: end;
    justify-content: center;
}

.sp-cpc-visual-image {
    width: 85%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 20px 26px rgba(0, 66, 130, 0.16));
    transform: translateY(6px);
}

/* =========================================================
  CATEGORY PRODUCT CAROUSEL - NAVIGATION
========================================================= */

.sp-product-nav {
    position: absolute;
    top: -58px;
    z-index: 5;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--sp-color-primary);
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.sp-product-nav:hover {
    transform: translateY(-2px) scale(1.04);
    background: #ffffff;
    color: var(--sp-color-primary-dark);
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.14),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.10);
}

.sp-product-nav svg {
    width: 18px;
    height: 18px;
    display: block;
}

.sp-product-nav.swiper-button-disabled {
    opacity: 0.38;
    pointer-events: none;
}

.sp-product-next {
    left: 54px;
    right: auto;
}

.sp-product-prev {
    left: 6px;
    right: auto;
}

@media (max-width: 767px) {
    .sp-product-nav {
        display: none;
    }
}

/* =========================================================
  CATEGORY PRODUCT CAROUSEL - KEYFRAMES
========================================================= */

@keyframes spCpcCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
  CATEGORY PRODUCT CAROUSEL - TABLET
========================================================= */

@media (max-width: 991px) {
    .sp-cpc-shell {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 18px 22px;
    }

    .sp-cpc-visual {
        order: 2;
        justify-content: center;
    }

    .sp-cpc-visual-card {
        max-width: 190px;
    }

    .sp-cpc-nav--prev {
        right: 2px;
    }

    .sp-cpc-nav--next {
        left: 2px;
    }
}


/* =========================================================
  CATEGORY PRODUCT CAROUSEL - MOBILE
========================================================= */

@media (max-width: 767px) {
    .sp-cpc-section {
        padding: 24px 12px 52px;
    }

    .sp-cpc-section--more {
        padding-top: 0;
    }

    .sp-cpc-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 72px;
        align-items: stretch;
        gap: 8px;
        min-height: 292px;
        border-radius: 24px;
        padding: 14px 10px 14px;
    }

    .sp-cpc-content {
        min-width: 0;
        grid-column: 1 / 2;
        display: flex;
        flex-direction: column;
    }

    .sp-cpc-toolbar {
        margin-bottom: 10px;
    }

    .sp-cpc-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sp-cpc-filters::-webkit-scrollbar {
        display: none;
    }

    .sp-cpc-filter-btn {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 7px 13px;
        font-size: 11px;
    }

    .sp-cpc-carousel-wrap {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: stretch;
    }

    .sp-cpc-swiper {
        width: 100%;
        padding: 0 0 4px;
    }

    .sp-cpc-card {
        min-height: 248px;
        border-radius: 18px;
        padding: 7px;
    }

    .sp-cpc-card-media {
        aspect-ratio: 1 / 1.02;
        border-radius: 14px;
        background: #f7fbff;
        overflow: hidden;
    }

    .sp-cpc-card-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin-bottom: 16px;
    }

    .sp-cpc-card-logo {
        top: 6px;
        right: 6px;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

    .sp-cpc-card-logo img {
        width: 70%;
        height: 70%;
        object-fit: contain;
    }

    .sp-cpc-card-price-strip {
        right: 7px;
        left: 7px;
        bottom: 7px;
        height: 28px;
        border-radius: 999px;
        overflow: hidden;
        flex-direction: row-reverse;
        box-shadow: 0 5px 12px rgba(15, 23, 42, 0.08);
    }

    .sp-cpc-card-price-main {
        min-width: 0;
        padding: 5px 7px;
        font-size: 9.5px;
        font-weight: 900;
        line-height: 1.2;
        justify-content: center;
        text-align: center;
    }

    .sp-cpc-card-installment {
        min-width: 30px;
        max-width: 30px;
        padding: 3px 4px;
        font-size: 8.5px;
        font-weight: 900;
        line-height: 1.05;
        border-radius: 0;
    }

    .sp-cpc-card-body {
        gap: 5px;
        padding: 8px 2px 2px;
    }

    .sp-cpc-card-merchant {
        margin: 0;
        font-size: 10px;
        line-height: 1.45;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sp-cpc-card-title {
        min-height: calc(11px * 1.65 * 2);
        max-height: calc(11px * 1.65 * 2);
        font-size: 11px;
        line-height: 1.65;
        overflow: hidden;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .sp-cpc-card-meta {
        gap: 4px;
        padding-top: 0;
    }

    .sp-cpc-card-old-row {
        min-height: 19px;
        gap: 5px;
    }

    .sp-cpc-card-old {
        font-size: 9px;
        line-height: 1.3;
    }

    .sp-cpc-card-discount {
        min-height: 19px;
        padding: 3px 7px;
        font-size: 9px;
        line-height: 1.1;
    }

    .sp-cpc-card-footer {
        gap: 6px;
        align-items: center;
    }

    .sp-cpc-card-current {
        font-size: 11px;
        line-height: 1.4;
        font-weight: 900;
    }

    .sp-cpc-card-cashback {
        min-height: 20px;
        padding: 3px 6px;
        font-size: 9px;
        gap: 3px;
    }

    .sp-cpc-card-cashback-icon {
        width: 14px;
        height: 14px;
    }

    .sp-cpc-visual {
        grid-column: 2 / 3;
        order: initial;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }

    .sp-cpc-visual-card {
        width: 100%;
        max-width: 72px;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .sp-cpc-visual-image {
        width: 100%;
        max-height: 200px;
        object-fit: contain;
        transform: translateY(8px);
        filter: drop-shadow(0 16px 18px rgba(0, 66, 130, 0.14));
    }

    .sp-product-nav,
    .sp-cpc-nav {
        display: none;
    }
}

/* =========================================================
  SECTION: MERCHANT CAROUSEL
  بعداً اینجا استایل کروسل مرچنت اضافه می‌شود.
========================================================= */


/* =========================================================
  SECTION: VOUCHER / OFFER
  بعداً اینجا استایل ووچر/آفر اضافه می‌شود.
========================================================= */


/* =========================================================
  SECTION: FAQ
  بعداً اینجا استایل FAQ اضافه می‌شود.
========================================================= */


/* =========================================================
  UTILITIES
========================================================= */

.is-hidden {
    display: none !important;
}

[data-page-ready="false"] {
    visibility: hidden;
}

[data-page-ready="true"] {
    visibility: visible;
}

/* =========================================================
  LANDING SNAP SCROLL SYSTEM
  Native snap + safe section entrance animation
========================================================= */

:root {
    --sp-stack-duration: 680ms;
    --sp-stack-ease: cubic-bezier(0.19, 1, 0.22, 1);
    --sp-stack-bg: #f3f6fb;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    background: var(--sp-stack-bg);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 16%,
            rgba(var(--sp-color-primary-rgb), 0.12) 0%,
            rgba(var(--sp-color-primary-rgb), 0.06) 24%,
            rgba(var(--sp-color-primary-rgb), 0.00) 48%),
        radial-gradient(circle at 84% 38%,
            rgba(0, 160, 255, 0.10) 0%,
            rgba(0, 160, 255, 0.04) 28%,
            rgba(0, 160, 255, 0.00) 52%),
        linear-gradient(180deg,
            #fbfdff 0%,
            #eef4fb 44%,
            #f7f9fc 100%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.52) 0%,
            rgba(255, 255, 255, 0.00) 34%,
            rgba(255, 255, 255, 0.38) 100%);
}

.sp-main {
    position: relative;
    isolation: isolate;
    background: transparent;
}

.sp-scroll-deck {
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    html {
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: none;
    }

    .sp-sticky-section {
        position: relative;
        z-index: var(--sp-sticky-z, 1);
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: max(104px, 9vh) 18px max(42px, 6vh);
        overflow: hidden;
        background: transparent;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .sp-sticky-section::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
            radial-gradient(circle at 50% 12%,
                rgba(255, 255, 255, 0.92) 0%,
                rgba(255, 255, 255, 0.58) 34%,
                rgba(255, 255, 255, 0.00) 72%);
        opacity: 0.72;
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-eme-inner {
        width: min(100%, 1220px);
        opacity: 0;
        transform: translate3d(0, 44px, 0) scale(0.975);
        filter: blur(8px);
        transform-origin: center center;
        transition:
            opacity var(--sp-stack-duration) ease,
            transform var(--sp-stack-duration) var(--sp-stack-ease),
            filter var(--sp-stack-duration) ease;
        will-change: transform, opacity, filter;
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-eme-inner {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-eme-inner {
        opacity: 0;
        transform: translate3d(0, -48px, 0) scale(0.965);
        filter: blur(10px);
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-eme-inner {
        opacity: 0;
        transform: translate3d(0, 48px, 0) scale(0.965);
        filter: blur(10px);
    }

    .sp-sticky-section .sp-hero-inner {
        min-height: auto;
    }

    .sp-sticky-section.sp-cpc-section {
        padding-top: max(104px, 9vh);
        padding-bottom: max(42px, 6vh);
    }
}

@media (max-width: 767px) {
    html {
        scroll-snap-type: none;
        overscroll-behavior-y: auto;
    }

    body::before {
        background:
            radial-gradient(circle at 50% 10%,
                rgba(var(--sp-color-primary-rgb), 0.10) 0%,
                rgba(var(--sp-color-primary-rgb), 0.04) 28%,
                rgba(var(--sp-color-primary-rgb), 0.00) 54%),
            linear-gradient(180deg,
                #f8fbff 0%,
                #eef4fb 48%,
                #f7f9fc 100%);
    }

    .sp-sticky-section {
        position: relative;
        min-height: auto;
        display: block;
        padding: 28px 12px 42px;
        overflow: visible;
    }

    .sp-sticky-section::before {
        display: none;
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-eme-inner {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .sp-sticky-section.sp-hero-section {
        padding-top: 200px;
        padding-bottom: 28px;
    }

    .sp-sticky-section.sp-cpc-section {
        padding-top: 24px;
        padding-bottom: 34px;
    }

    .sp-sticky-section.sp-cpc-section--more {
        padding-top: 0;
    }
}

/* =========================================================
  SECTION: EXPLORE MERCHANTS
========================================================= */

.sp-eme-section {
    position: relative;
    padding-inline: 18px;
}

.sp-eme-inner {
    position: relative;
    width: min(100%, 1240px);
    min-height: min(680px, calc(100svh - 150px));
    margin: 0 auto;
}

.sp-eme-head {
    position: relative;
    z-index: 8;
    margin-bottom: 20px;
    text-align: center;
    transition:
        opacity 360ms ease,
        transform 420ms cubic-bezier(0.19, 1, 0.22, 1);
}

.sp-eme-shell[data-eme-mode="selected"] .sp-eme-head {
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
}

.sp-eme-eyebrow {
    margin: 0 0 4px;
    color: var(--sp-color-primary);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.6;
}

.sp-eme-title {
    margin: 0 0 10px;
    color: #101828;
    font-size: clamp(28px, 3.2vw, 46px);
    font-weight: 950;
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.sp-eme-desc {
    margin: 0;
    color: #667085;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
}

.sp-eme-shell {
    position: relative;
    width: 100%;
    height: min(620px, calc(100svh - 220px));
    min-height: 520px;
    overflow: hidden;
    border-radius: 34px;
    background: transparent;
    isolation: isolate;
}

.sp-eme-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
}

.sp-eme-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sp-eme-items {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.sp-eme-item {
    position: absolute;
    top: var(--eme-y);
    left: var(--eme-x);
    width: var(--eme-size);
    aspect-ratio: 0.78 / 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform:
        translate(-50%, -50%) rotate(var(--eme-rotate)) scale(1);
    transform-origin: center center;
    opacity: 1;
    filter: blur(0);
    transition:
        top 760ms cubic-bezier(0.19, 1, 0.22, 1),
        left 760ms cubic-bezier(0.19, 1, 0.22, 1),
        width 760ms cubic-bezier(0.19, 1, 0.22, 1),
        opacity 420ms ease,
        filter 420ms ease,
        transform 760ms cubic-bezier(0.19, 1, 0.22, 1);
    will-change: top, left, transform, opacity;
}

.sp-eme-item:hover {
    transform:
        translate(-50%, -50%) rotate(var(--eme-rotate)) scale(1.055);
}

.sp-eme-item.is-active {
    z-index: 8;
}

.sp-eme-item.is-dimmed {
    opacity: 0.12;
    filter: blur(2px) saturate(0.8);
}

.sp-eme-item-visual {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.sp-eme-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    position: absolute;
    top: 35%;
}

.sp-eme-item-label {
    position: absolute;
    left: 50%;
    bottom: -8px;
    min-width: 96px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #101828;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%) rotate(calc(var(--eme-rotate) * -1));
    box-shadow:
        0 12px 24px rgba(16, 24, 40, 0.08),
        inset 0 0 0 1px rgba(16, 24, 40, 0.04);
    pointer-events: none;
}

.sp-eme-explore-hint {
    position: absolute;
    z-index: 4;
    right: 24px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.06);
    transition:
        opacity 280ms ease,
        transform 320ms ease;
}

.sp-eme-shell[data-eme-mode="selected"] .sp-eme-explore-hint {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.sp-eme-shell[data-eme-mode="selected"] .sp-eme-canvas::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 12%;
    bottom: 12%;
    left: 4%;
    width: 42%;
    border-radius: 32px;
    box-shadow:
        0 26px 70px rgba(0, 80, 170, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.60);
    animation: spEmeFocusBoxIn 540ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.sp-eme-shell[data-eme-mode="selected"]::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 8%;
    bottom: 8%;
    left: 50%;
    width: 1px;
    background: rgba(16, 24, 40, 0.13);
    animation: spEmeSplitLineIn 520ms ease both;
}

.sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-active {
    top: 51%;
    left: 25%;
    width: clamp(230px, 23vw, 360px);
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    animation: spEmeActiveToBox 760ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-active .sp-eme-item-label {
    opacity: 0;
}

.sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-dimmed {
    pointer-events: none;
}

.sp-eme-panel {
    position: absolute;
    z-index: 6;
    top: 8%;
    bottom: 8%;
    right: 4%;
    width: 42%;
    padding: clamp(22px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.82));
    box-shadow:
        0 26px 70px rgba(16, 24, 40, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(12px);
    animation: spEmePanelIn 620ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.sp-eme-panel[hidden] {
    display: none;
}

.sp-eme-panel-close {
    position: absolute;
    z-index: 8;
    top: 18px;
    left: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f2f4f7;
    color: #101828;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.sp-eme-panel-close:hover {
    background: #ffffff;
    transform: scale(1.04);
}

.sp-eme-panel-kicker {
    margin: 0 0 6px;
    color: var(--sp-color-primary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
}

.sp-eme-panel-title {
    margin: 0;
    color: #101828;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.sp-eme-panel-desc {
    margin: 12px 0 0;
    max-width: 420px;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
}

.sp-eme-merchant-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}

.sp-eme-merchant-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 11px 12px;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.94);
    color: inherit;
    text-decoration: none;
    box-shadow:
        0 12px 26px rgba(16, 24, 40, 0.055),
        inset 0 0 0 1px rgba(16, 24, 40, 0.045);
    transform: translateY(14px);
    opacity: 0;
    animation: spEmeMerchantIn 420ms ease both;
    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease;
}

.sp-eme-merchant-card:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow:
        0 18px 34px rgba(0, 125, 250, 0.10),
        inset 0 0 0 1px rgba(0, 125, 250, 0.12);
}

.sp-eme-merchant-logo {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sp-eme-merchant-logo img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.sp-eme-merchant-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-eme-merchant-name {
    color: #101828;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-eme-merchant-sub {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

@keyframes spEmeFocusBoxIn {
    from {
        opacity: 0;
        transform: translateX(-22px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes spEmePanelIn {
    from {
        opacity: 0;
        transform: translateX(34px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spEmeSplitLineIn {
    from {
        opacity: 0;
        transform: scaleY(0.4);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes spEmeActiveToBox {
    0% {
        transform: translate(-50%, -50%) rotate(var(--eme-rotate)) scale(0.92);
    }

    64% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.08);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

@keyframes spEmeMerchantIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .sp-eme-section {
        padding-inline: 12px;
    }

    .sp-eme-inner {
        min-height: auto;
    }

    .sp-eme-head {
        margin-bottom: 12px;
    }

    .sp-eme-shell[data-eme-mode="selected"] .sp-eme-head {
        opacity: 1;
        transform: none;
    }

    .sp-eme-title {
        font-size: 26px;
        line-height: 1.2;
    }

    .sp-eme-desc {
        font-size: 13px;
    }

    .sp-eme-shell {
        height: auto;
        min-height: auto;
        overflow: visible;
        border-radius: 28px;
    }

    .sp-eme-canvas {
        position: relative;
        min-height: 440px;
        border-radius: 28px;
        overflow: hidden;
    }

    .sp-eme-items {
        position: absolute;
        inset: 0;
    }

    .sp-eme-item {
        width: var(--eme-size-mobile);
    }

    .sp-eme-item-label {
        min-width: 76px;
        padding: 7px 10px;
        font-size: 11px;
        bottom: -6px;
    }

    .sp-eme-shell[data-eme-mode="selected"]::after,
    .sp-eme-shell[data-eme-mode="selected"] .sp-eme-canvas::after {
        display: none;
    }

    .sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-active {
        top: 42%;
        left: 50%;
        width: clamp(170px, 50vw, 260px);
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    .sp-eme-panel {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        width: 100%;
        min-height: auto;
        margin-top: 14px;
        padding: 20px 16px;
        border-radius: 26px;
        animation: spEmePanelInMobile 420ms ease both;
    }

    .sp-eme-panel-close {
        top: 14px;
        left: 14px;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 20px;
    }

    .sp-eme-panel-title {
        font-size: 30px;
        letter-spacing: -0.035em;
    }

    .sp-eme-merchant-list {
        grid-template-columns: 1fr;
        max-height: none;
        overflow: visible;
    }

    .sp-eme-merchant-card {
        min-height: 66px;
        padding: 11px 12px;
    }
}

@keyframes spEmePanelInMobile {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
  MOBILE COMPACT OVERRIDES
  هدف: هر سکشن موبایل در یک فولد بهتر دیده شود
========================================================= */

@media (max-width: 767px) {

    /* ---------- Global mobile section spacing ---------- */

    .sp-sticky-section {
        padding-top: 18px !important;
        padding-bottom: 22px !important;
    }

    .sp-sticky-section.sp-hero-section {
        padding-top: 88px !important;
        padding-bottom: 18px !important;
    }

    .sp-sticky-section.sp-cpc-section {
        padding-top: 16px !important;
        padding-bottom: 22px !important;
    }

    .sp-sticky-section.sp-cpc-section--more {
        padding-top: 10px !important;
    }


    /* =====================================================
      HERO - MOBILE COMPACT
    ===================================================== */

    .sp-hero-section {
        min-height: auto !important;
    }

    .sp-hero-inner {
        gap: 6px !important;
    }

    .sp-hero-visual {
        min-height: 238px;
    }

    .sp-hero-stage {
        width: min(100%, 252px) !important;
    }

    .sp-hero-scene-main {
        width: clamp(178px, 56vw, 235px) !important;
    }

    .sp-hero-scene-bubble {
        width: 44px;
    }

    .sp-hero-content {
        min-height: 238px !important;
    }

    .sp-hero-copy {
        justify-content: flex-start !important;
    }

    .sp-hero-eyebrow {
        margin-bottom: 8px;
        font-size: 11px;
        line-height: 1.5;
    }

    .sp-hero-title {
        max-width: 350px;
        font-size: clamp(27px, 8vw, 34px) !important;
        line-height: 1.6em;
        letter-spacing: -0.035em;
    }

    .sp-hero-desc {
        max-width: 300px;
        margin-top: 12px;
        font-size: 12px !important;
        line-height: 1.8;
    }

    .sp-hero-cta {
        min-height: 38px;
        margin-top: 16px;
        padding: 8px 18px;
        font-size: 12px;
    }

    .sp-hero-dots {
        bottom: 0;
    }


    /* =====================================================
      PRODUCT CAROUSEL - MOBILE COMPACT
    ===================================================== */

    .sp-cpc-section-head {
        justify-content: center !important;
        margin-bottom: 8px !important;
        gap: 5px;
    }

    .sp-cpc-section-title {
        font-size: 15px !important;
        line-height: 1.45;
    }

    .sp-cpc-section-icon {
        font-size: 16px !important;
    }

    .sp-cpc-shell {
        grid-template-columns: minmax(0, 1fr) 54px !important;
        gap: 6px !important;
        min-height: 246px !important;
        border-radius: 20px !important;
        padding: 10px 8px !important;
    }

    .sp-cpc-toolbar {
        margin-bottom: 7px !important;
    }

    .sp-cpc-filters {
        gap: 6px;
    }

    .sp-cpc-filter-btn {
        min-height: 28px !important;
        padding: 5px 11px !important;
        font-size: 10px !important;
        line-height: 1.3;
    }

    .sp-cpc-swiper {
        padding: 0 0 2px !important;
    }

    .sp-cpc-card {
        min-height: 206px !important;
        border-radius: 15px !important;
        padding: 5px !important;
    }

    .sp-cpc-card-media {
        border-radius: 12px !important;
        aspect-ratio: 1 / 0.92 !important;
    }

    .sp-cpc-card-image {
        width: 100% !important;
        height: 100% !important;
        margin-bottom: 10px !important;
        object-fit: contain;
    }

    .sp-cpc-card-logo {
        top: 4px !important;
        right: 4px !important;
        width: 30px !important;
        height: 30px !important;
    }

    .sp-cpc-card-price-strip {
        right: 5px !important;
        left: 5px !important;
        bottom: 5px !important;
        height: 24px !important;
        border-radius: 999px !important;
    }

    .sp-cpc-card-price-main {
        padding: 4px 5px !important;
        font-size: 8.5px !important;
        line-height: 1.15 !important;
    }

    .sp-cpc-card-installment {
        min-width: 26px !important;
        max-width: 26px !important;
        padding: 2px 3px !important;
        font-size: 7.5px !important;
        line-height: 1.05 !important;
    }

    .sp-cpc-card-body {
        gap: 4px !important;
        padding: 6px 1px 1px !important;
    }

    .sp-cpc-card-merchant {
        font-size: 9px !important;
        line-height: 1.35 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sp-cpc-card-title {
        min-height: calc(10px * 1.55 * 2) !important;
        max-height: calc(10px * 1.55 * 2) !important;
        font-size: 10px !important;
        line-height: 1.55 !important;
    }

    .sp-cpc-card-meta {
        gap: 2px !important;
    }

    .sp-cpc-card-old-row {
        min-height: 16px !important;
        gap: 4px !important;
    }

    .sp-cpc-card-old {
        font-size: 8px !important;
        line-height: 1.2;
    }

    .sp-cpc-card-discount {
        min-height: 16px !important;
        padding: 2px 5px !important;
        font-size: 8px !important;
    }

    .sp-cpc-card-footer {
        gap: 4px !important;
    }

    .sp-cpc-card-current {
        font-size: 9.5px !important;
        line-height: 1.35 !important;
    }

    .sp-cpc-card-cashback {
        min-height: 17px !important;
        padding: 2px 5px !important;
        font-size: 8px !important;
        gap: 2px;
    }

    .sp-cpc-card-cashback-icon {
        width: 12px !important;
        height: 12px !important;
    }

    .sp-cpc-visual-card {
        max-width: 54px !important;
    }

    .sp-cpc-visual-image {
        width: 100% !important;
        max-height: 150px !important;
        transform: translateY(4px) !important;
    }


    /* =====================================================
      EXPLORE MERCHANTS - MOBILE COMPACT
    ===================================================== */

    .sp-eme-section {
        padding-inline: 10px !important;
    }

    .sp-eme-inner {
        min-height: auto !important;
        height: auto !important;
    }

    .sp-eme-head {
        margin-bottom: 8px !important;
    }

    .sp-eme-eyebrow {
        margin-bottom: 2px;
        font-size: 10px !important;
    }

    .sp-eme-title {
        font-size: 22px !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em !important;
    }

    .sp-eme-desc {
        max-width: 300px;
        margin-inline: auto;
        font-size: 11px !important;
        line-height: 1.7 !important;
    }

    .sp-eme-shell {
        border-radius: 22px !important;
        overflow: visible !important;
    }

    .sp-eme-canvas {
        min-height: 350px !important;
        border-radius: 22px !important;
    }

    .sp-eme-item {
        width: clamp(66px, 20vw, 88px) !important;
    }

    .sp-eme-item-label {
        min-width: 58px !important;
        padding: 5px 8px !important;
        font-size: 9px !important;
        bottom: -35px !important;
    }

    .sp-eme-explore-hint {
        right: 10px;
        bottom: 10px;
        min-height: 28px;
        padding: 6px 10px;
        font-size: 10px;
    }

    .sp-eme-shell[data-eme-mode="selected"] .sp-eme-canvas {
        min-height: 178px !important;
    }

    .sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-active {
        top: 48% !important;
        left: 50% !important;
        width: clamp(118px, 36vw, 158px) !important;
    }

    .sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-dimmed {
        opacity: 0.08 !important;
        filter: blur(3px) saturate(0.6);
    }

    .sp-eme-panel {
        margin-top: 8px !important;
        padding: 12px 12px !important;
        border-radius: 20px !important;
        max-height: 318px;
        overflow: hidden;
    }

    .sp-eme-panel-close {
        top: 10px !important;
        left: 10px !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
        font-size: 17px !important;
    }

    .sp-eme-panel-kicker {
        margin-bottom: 3px;
        font-size: 10px !important;
    }

    .sp-eme-panel-title {
        font-size: 22px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }

    .sp-eme-panel-desc {
        margin-top: 6px !important;
        font-size: 10.5px !important;
        line-height: 1.6 !important;
    }

    .sp-eme-merchant-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        max-height: 210px !important;
        overflow-y: auto !important;
        padding-bottom: 4px;
    }

    .sp-eme-merchant-card {
        min-height: 50px !important;
        padding: 7px 8px !important;
        border-radius: 13px !important;
        gap: 7px !important;
    }

    .sp-eme-merchant-logo {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    .sp-eme-merchant-name {
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }

    .sp-eme-merchant-sub {
        font-size: 9px !important;
        line-height: 1.25 !important;
    }
}

/* =========================================================
  EXPLORE MERCHANTS - LOGO ONLY MODE
========================================================= */

.sp-eme-panel-copy {
    display: none !important;
}

.sp-eme-active-copy {
    position: absolute;
    z-index: 9;
    top: 20%;
    left: 25%;
    width: min(320px, 40%);
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
    animation: spEmeActiveCopyIn 420ms ease both;
}

.sp-eme-active-copy[hidden] {
    display: none !important;
}

.sp-eme-active-copy[data-eme-copy-state="closing"] {
    animation: spEmeActiveCopyOut 260ms ease both;
}

.sp-eme-active-kicker {
    margin: 0 0 4px;
    color: var(--sp-color-primary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
}

.sp-eme-active-title {
    margin: 0;
    color: #101828;
    font-size: clamp(24px, 2.6vw, 42px);
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.sp-eme-active-desc {
    margin: 8px 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}


/* active ice cream goes to left focus area */

.sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-active {
    top: 46%;
    left: 25%;
    width: clamp(220px, 22vw, 350px);
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    animation: spEmeActiveToBox 760ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-active .sp-eme-item-label {
    opacity: 0;
}


/* merchant panel becomes logo grid */

.sp-eme-panel {
    right: 4% !important;
    left: auto !important;
    top: 10% !important;
    bottom: 10% !important;
    width: 42% !important;
    padding: clamp(22px, 3vw, 38px) !important;
    border-radius: 32px;
}

.sp-eme-merchant-list {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-content: start;
    gap: 12px !important;
    overflow: auto;
}

.sp-eme-merchant-card {
    aspect-ratio: 1 / 1;
    min-height: auto !important;
    padding: 12px !important;
    border-radius: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-eme-merchant-logo {
    width: 100% !important;
    height: 100% !important;
    max-width: 64px;
    max-height: 64px;
    border-radius: 18px !important;
    background: #f8fafc;
}

.sp-eme-merchant-logo img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.sp-eme-merchant-copy {
    display: none !important;
}

.sp-eme-merchant-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--sp-color-primary);
    font-size: 18px;
    font-weight: 900;
}

.sp-eme-panel-note {
    grid-column: 1 / -1;
    min-height: 80px;
    display: grid;
    place-items: center;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    color: #667085;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}


/* mobile */

@media (max-width: 767px) {
    .sp-eme-active-copy {
        top: 010%;
        left: 50%;
        width: min(92%, 320px);
    }

    .sp-eme-item-img {
        top: 55%;
    }

    .sp-eme-active-kicker {
        font-size: 10px;
    }

    .sp-eme-active-title {
        font-size: 22px;
    }

    .sp-eme-active-desc {
        margin-top: 5px;
        font-size: 10.5px;
        line-height: 1.6;
    }

    .sp-eme-shell[data-eme-mode="selected"] .sp-eme-canvas {
        min-height: 250px !important;
    }

    .sp-eme-shell[data-eme-mode="selected"] .sp-eme-item.is-active {
        top: 38% !important;
        left: 50% !important;
        width: clamp(128px, 38vw, 170px) !important;
    }

    .sp-eme-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        margin-top: 10px !important;
        padding: 12px !important;
        border-radius: 22px !important;
        max-height: none !important;
    }

    .sp-eme-merchant-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        max-height: 180px;
        overflow-y: auto;
    }

    .sp-eme-merchant-card {
        padding: 7px !important;
        border-radius: 14px !important;
    }

    .sp-eme-merchant-logo {
        max-width: 42px;
        max-height: 42px;
        border-radius: 12px !important;
    }

    .sp-eme-merchant-fallback {
        font-size: 14px;
    }
}

@keyframes spEmeActiveCopyIn {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes spEmeActiveCopyOut {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    to {
        opacity: 0;
        transform: translate(-50%, 8px);
    }
}

/* =========================================================
  SECTION: MERCHANT PRODUCT SHOWCASE
========================================================= */

.sp-mps-section {
    position: relative;
    padding-inline: 18px;
}

.sp-mps-inner {
    width: min(100%, 1240px);
    margin: 0 auto;
}

.sp-mps-head {
    text-align: center;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.sp-mps-eyebrow {
    margin: 0 0 6px;
    color: var(--sp-color-primary);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.6;
}

.sp-mps-title {
    margin: 0 0 8px;
    color: #101828;
    font-size: clamp(28px, 3vw, 46px);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.sp-mps-desc {
    max-width: 640px;
    margin: 0 auto;
    color: #667085;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.9;
}

.sp-mps-tabs-wrap {
    margin-bottom: 16px;
}

.sp-mps-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-mps-tab {
    min-height: 38px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: #475467;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    box-shadow:
        0 8px 18px rgba(16, 24, 40, 0.05),
        inset 0 0 0 1px rgba(16, 24, 40, 0.06);
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}

.sp-mps-tab:hover {
    transform: translateY(-1px);
    color: #101828;
}

.sp-mps-tab.is-active {
    background: var(--sp-color-primary);
    color: #ffffff;
    box-shadow:
        0 12px 24px rgba(var(--sp-color-primary-rgb), 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.sp-mps-shell {
    position: relative;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 290px;
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 251, 255, 0.58));
    box-shadow:
        0 26px 70px rgba(0, 80, 170, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.sp-mps-shell[data-mps-switch-state="out"] [data-mps-animate] {
    animation: spMpsSwipeDownOut 220ms ease both;
}

.sp-mps-shell[data-mps-switch-state="in"] [data-mps-animate] {
    animation: spMpsSwipeUpIn 360ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.sp-mps-side,
.sp-mps-stage {
    min-width: 0;
}

.sp-mps-merchant-card,
.sp-mps-product-card {
    height: 100%;
    padding: 20px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 14px 32px rgba(16, 24, 40, 0.05),
        inset 0 0 0 1px rgba(16, 24, 40, 0.05);
}

.sp-mps-merchant-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.sp-mps-merchant-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-mps-merchant-logo {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sp-mps-merchant-logo img {
    width: 76%;
    height: 76%;
    object-fit: contain;
    display: block;
}

.sp-mps-merchant-kicker {
    margin: 0 0 4px;
    color: var(--sp-color-primary);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.sp-mps-merchant-name {
    margin: 0 0 3px;
    color: #101828;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.25;
}

.sp-mps-merchant-category {
    margin: 0;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.sp-mps-merchant-meta {
    display: flex;
    gap: 10px;
}

.sp-mps-merchant-stat {
    min-width: 82px;
    padding: 10px 12px;
    border-radius: 16px;
    background: #f8fafc;
    text-align: center;
}

.sp-mps-merchant-stat strong {
    display: block;
    color: #101828;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.2;
}

.sp-mps-merchant-stat span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.sp-mps-merchant-cta,
.sp-mps-product-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 0;
    background: var(--sp-color-primary);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    box-shadow: 0 14px 30px rgba(var(--sp-color-primary-rgb), 0.20);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.sp-mps-merchant-cta:hover,
.sp-mps-product-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(var(--sp-color-primary-rgb), 0.26);
}

.sp-mps-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding-inline: 52px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--sp-color-primary-rgb), 0.07), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.70));
    box-shadow:
        inset 0 0 0 1px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.sp-mps-swiper {
    width: 100%;
    overflow: visible;
}

.sp-mps-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.sp-mps-product-visual {
    width: 100%;
    max-width: 270px;
    aspect-ratio: 1 / 1;
    border-radius: 30px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        opacity 240ms ease;
}

.sp-mps-product-visual img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.sp-mps-slide.swiper-slide-active .sp-mps-product-visual {
    transform: scale(1);
    opacity: 1;
}

.sp-mps-slide:not(.swiper-slide-active) .sp-mps-product-visual {
    transform: scale(0.82);
    opacity: 0.52;
}

.sp-mps-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--sp-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow:
        0 10px 24px rgba(16, 24, 40, 0.08);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.sp-mps-nav:hover {
    transform: translateY(-50%) scale(1.04);
}

.sp-mps-nav--prev {
    right: 8px;
}

.sp-mps-nav--next {
    left: 8px;
}

.sp-mps-product-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

.sp-mps-product-kicker {
    margin: 0;
    color: var(--sp-color-primary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
}

.sp-mps-product-name {
    margin: 0;
    color: #101828;
    font-size: 24px;
    font-weight: 950;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.sp-mps-product-merchant {
    margin: 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.sp-mps-product-prices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-mps-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-mps-price-old {
    color: #98a2b3;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: line-through;
}

.sp-mps-price-current {
    color: #101828;
    font-size: 24px;
    font-weight: 950;
    line-height: 1.3;
}

.sp-mps-installment {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: var(--sp-color-primary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.sp-mps-product-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-mps-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.sp-mps-badge--discount {
    background: #fff0f0;
    color: #ef4444;
}

.sp-mps-badge--cashback {
    background: #f3ecff;
    color: #7c3aed;
}

@keyframes spMpsSwipeDownOut {
    from {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }
}

@keyframes spMpsSwipeUpIn {
    from {
        opacity: 0;
        transform: translateY(-22px);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* =========================================================
  MPS - MOBILE
========================================================= */

@media (max-width: 991px) {
    .sp-mps-shell {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
        border-radius: 24px;
    }

    .sp-mps-stage {
        order: 2;
    }

    .sp-mps-side--merchant {
        order: 1;
    }

    .sp-mps-side--product {
        order: 3;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        padding: 16px 14px;
        border-radius: 20px;
    }
}

@media (max-width: 767px) {
    .sp-mps-section {
        padding-inline: 12px;
    }

    .sp-mps-head {
        margin-bottom: 12px;
    }

    .sp-mps-eyebrow {
        font-size: 11px;
    }

    .sp-mps-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .sp-mps-desc {
        max-width: 310px;
        font-size: 12px;
        line-height: 1.8;
    }

    .sp-mps-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .sp-mps-tabs::-webkit-scrollbar {
        display: none;
    }

    .sp-mps-tab {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 7px 12px;
        font-size: 11px;
    }

    .sp-mps-shell {
        padding: 10px;
        border-radius: 20px;
        gap: 8px;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        padding: 13px 12px;
        border-radius: 16px;
    }

    .sp-mps-merchant-brand {
        gap: 10px;
    }

    .sp-mps-merchant-logo {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .sp-mps-merchant-name {
        font-size: 16px;
    }

    .sp-mps-merchant-category,
    .sp-mps-merchant-kicker {
        font-size: 10px;
    }

    .sp-mps-merchant-stat {
        min-width: 68px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .sp-mps-merchant-stat strong {
        font-size: 15px;
    }

    .sp-mps-merchant-stat span {
        font-size: 10px;
    }

    .sp-mps-merchant-cta,
    .sp-mps-product-cta {
        min-height: 38px;
        padding: 9px 14px;
        font-size: 11px;
    }

    .sp-mps-stage {
        min-height: 220px;
        padding-inline: 34px;
        border-radius: 18px;
    }

    .sp-mps-product-visual {
        max-width: 160px;
        padding: 12px;
        border-radius: 20px;
    }

    .sp-mps-nav {
        width: 32px;
        height: 32px;
    }

    .sp-mps-product-kicker {
        font-size: 10px;
    }

    .sp-mps-product-name {
        font-size: 16px;
        line-height: 1.55;
    }

    .sp-mps-product-merchant {
        font-size: 11px;
    }

    .sp-mps-price-old {
        font-size: 11px;
    }

    .sp-mps-price-current {
        font-size: 18px;
    }

    .sp-mps-installment {
        min-height: 26px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .sp-mps-badge {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* =========================================================
  MPS SAFE FINAL OVERRIDE
  scoped only to merchant-product-showcase - CPC untouched
========================================================= */

.sp-mps-section {
    position: relative;
    padding-inline: 18px;
}

.sp-mps-head {
    text-align: center;
    margin-bottom: 10px !important;
}

.sp-mps-eyebrow {
    margin: 0 0 3px !important;
    color: var(--sp-color-primary);
    font-size: 11px !important;
    font-weight: 900;
    line-height: 1.5;
}

.sp-mps-title {
    margin: 0 0 5px !important;
    color: #101828;
    font-size: clamp(26px, 2.8vw, 38px) !important;
    font-weight: 950;
    line-height: 1.13;
    letter-spacing: -0.035em;
}

.sp-mps-desc {
    max-width: 620px;
    margin: 0 auto;
    color: #667085;
    font-size: 12.5px !important;
    font-weight: 650;
    line-height: 1.75;
}

.sp-mps-tabs-wrap {
    width: min(100%, 880px);
    margin: 0 auto 10px !important;
}

.sp-mps-tabs {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-mps-tab {
    min-height: 38px !important;
    padding: 5px 8px 5px 13px !important;
    border: 0;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    color: #475467 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.2;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 8px 20px rgba(0, 80, 170, 0.05),
        inset 0 0 0 1px rgba(0, 125, 250, 0.08) !important;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}

.sp-mps-tab:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.82) !important;
    color: #101828 !important;
}

.sp-mps-tab.is-active {
    background: var(--sp-color-primary) !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 26px rgba(var(--sp-color-primary-rgb), 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.20) !important;
}

.sp-mps-tab-logo {
    width: 33px;
    height: 33px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.sp-mps-tab-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp-mps-tab-text {
    white-space: nowrap;
}

.sp-mps-shell {
    --mps-panel-height: clamp(318px, 35vw, 356px);

    position: relative !important;
    direction: ltr;
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) 235px !important;
    gap: 18px !important;
    align-items: stretch;
    min-height: var(--mps-panel-height) !important;
    height: var(--mps-panel-height) !important;
    padding: 0 !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(var(--sp-color-primary-rgb), 0.105), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.00)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    isolation: isolate;
}

.sp-mps-shell::before {
    content: "";
    position: absolute;
    inset: 8% 14%;
    z-index: -1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.50);
    filter: blur(32px);
    pointer-events: none;
}

.sp-mps-side,
.sp-mps-stage {
    direction: rtl;
    min-width: 0;
    min-height: var(--mps-panel-height) !important;
    height: var(--mps-panel-height) !important;
}

.sp-mps-side--merchant {
    grid-column: 1;
}

.sp-mps-stage {
    grid-column: 2;
}

.sp-mps-side--product {
    grid-column: 3;
}

.sp-mps-merchant-card,
.sp-mps-product-card {
    height: 100% !important;
    min-height: var(--mps-panel-height) !important;
    padding: 18px 16px !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.36) !important;
    box-shadow:
        0 16px 42px rgba(0, 80, 170, 0.055),
        inset 0 0 0 1px rgba(255, 255, 255, 0.50) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform 280ms ease,
        box-shadow 280ms ease,
        background-color 280ms ease;
}

.sp-mps-merchant-card:hover,
.sp-mps-product-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 20px 48px rgba(0, 80, 170, 0.07),
        inset 0 0 0 1px rgba(255, 255, 255, 0.58) !important;
}

.sp-mps-merchant-card {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.sp-mps-product-card {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.sp-mps-merchant-brand {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.sp-mps-merchant-logo {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.92)) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        0 10px 24px rgba(0, 80, 170, 0.08),
        inset 0 0 0 1px rgba(0, 125, 250, 0.08);
}

.sp-mps-merchant-logo img {
    width: 74%;
    height: 74%;
    object-fit: contain;
    display: block;
}

.sp-mps-merchant-kicker,
.sp-mps-product-kicker {
    margin: 0 0 4px;
    color: var(--sp-color-primary);
    font-size: 10.5px !important;
    font-weight: 950;
    line-height: 1.5;
}

.sp-mps-merchant-name {
    margin: 0 0 3px;
    color: #101828;
    font-size: 18px !important;
    font-weight: 950;
    line-height: 1.2;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-mps-merchant-category,
.sp-mps-product-merchant {
    margin: 0;
    color: #667085;
    font-size: 11px !important;
    font-weight: 750;
    line-height: 1.6;
}

.sp-mps-merchant-meta {
    display: flex;
    gap: 8px;
}

.sp-mps-merchant-stat {
    min-width: 68px;
    padding: 8px 10px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.56);
    box-shadow: inset 0 0 0 1px rgba(0, 125, 250, 0.05);
    text-align: center;
}

.sp-mps-merchant-stat strong {
    display: block;
    color: #101828;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.2;
}

.sp-mps-merchant-stat span {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.35;
}

.sp-mps-merchant-cta,
.sp-mps-product-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    width: fit-content;
    padding: 8px 16px;
    border-radius: 999px;
    border: 0;
    background: var(--sp-color-primary);
    color: #ffffff;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 950;
    line-height: 1.2;
    box-shadow: 0 12px 26px rgba(var(--sp-color-primary-rgb), 0.22);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.sp-mps-merchant-cta:hover,
.sp-mps-product-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(var(--sp-color-primary-rgb), 0.28);
}

.sp-mps-stage {
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 38px !important;
    border-radius: 34px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
}

.sp-mps-stage::before {
    content: "";
    position: absolute;
    inset: 8% 8%;
    z-index: 0;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.90), rgba(240, 247, 255, 0.32) 56%, rgba(255, 255, 255, 0.00) 74%);
    filter: blur(5px);
    pointer-events: none;
}

.sp-mps-swiper {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: visible !important;
    cursor: grab;
}

.sp-mps-swiper:active {
    cursor: grabbing;
}

.sp-mps-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.42;
    transform: scale(0.76);
    transition:
        opacity 520ms ease,
        transform 620ms cubic-bezier(0.19, 1, 0.22, 1),
        filter 520ms ease;
    filter: blur(1.6px) saturate(0.92);
}

.sp-mps-slide.swiper-slide-prev,
.sp-mps-slide.swiper-slide-next {
    opacity: 0.68;
    transform: scale(0.86);
    filter: blur(0.8px) saturate(0.96);
}

.sp-mps-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
}

.sp-mps-product-visual {
    width: min(100%, 278px) !important;
    height: 278px !important;
    min-height: 278px !important;
    padding: 18px !important;
    border: 1px solid rgba(var(--sp-color-primary-rgb), 0.15) !important;
    border-radius: 32px !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.70)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease;
    touch-action: pan-y;
    user-select: none;
}

.sp-mps-product-visual:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--sp-color-primary-rgb), 0.24) !important;
}

.sp-mps-product-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}

.sp-mps-nav {
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.76);
    color: var(--sp-color-primary);
    box-shadow:
        0 10px 24px rgba(0, 80, 170, 0.09),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sp-mps-product-name {
    margin: 0;
    min-height: calc(16px * 1.44 * 3);
    max-height: calc(16px * 1.44 * 3);
    color: #101828;
    font-size: 16px !important;
    font-weight: 950;
    line-height: 1.44;
    letter-spacing: -0.02em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.sp-mps-product-prices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 76px;
}

.sp-mps-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-mps-price-old {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
    text-decoration: line-through;
}

.sp-mps-price-current {
    color: #101828;
    font-size: 17px !important;
    font-weight: 950;
    line-height: 1.3;
}

.sp-mps-installment {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: var(--sp-color-primary);
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1.2;
}

.sp-mps-product-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 26px;
}

.sp-mps-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1.2;
}

.sp-mps-badge--discount {
    background: #fff0f0;
    color: #ef4444;
}

.sp-mps-badge--cashback {
    background: #f3ecff;
    color: #7c3aed;
}

/* Keep side panels stable; animate only their internal content. */
.sp-mps-shell[data-mps-switch-state] [data-mps-animate] {
    animation: none !important;
}

@keyframes spMpsInnerOutSoft {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(10px) scale(0.992);
        filter: blur(5px);
    }
}

@keyframes spMpsInnerInSoft {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.992);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.sp-mps-shell[data-mps-switch-state="out"] .sp-mps-merchant-card>*,
.sp-mps-shell[data-mps-switch-state="out"] .sp-mps-product-card>*,
.sp-mps-shell[data-mps-switch-state="out"] .sp-mps-stage .sp-mps-swiper {
    animation: spMpsInnerOutSoft 160ms ease both !important;
}

.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-merchant-card>*,
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-product-card>*,
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-stage .sp-mps-swiper {
    animation: spMpsInnerInSoft 420ms cubic-bezier(0.19, 1, 0.22, 1) both !important;
}

@media (max-width: 1100px) {
    .sp-mps-shell {
        --mps-panel-height: 342px;
        grid-template-columns: 190px minmax(0, 1fr) 215px !important;
        gap: 14px !important;
    }

    .sp-mps-product-visual {
        width: 250px !important;
        height: 250px !important;
        min-height: 250px !important;
    }
}

@media (max-width: 991px) {
    .sp-mps-shell {
        --mps-panel-height: auto;
        direction: rtl;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    .sp-mps-side,
    .sp-mps-stage,
    .sp-mps-merchant-card,
    .sp-mps-product-card {
        min-height: 0 !important;
        height: auto !important;
    }

    .sp-mps-side--merchant {
        grid-column: auto;
        order: 1;
    }

    .sp-mps-stage {
        grid-column: auto;
        order: 2;
        min-height: 280px !important;
        padding-inline: 34px !important;
    }

    .sp-mps-side--product {
        grid-column: auto;
        order: 3;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .sp-mps-merchant-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .sp-mps-merchant-meta {
        display: none;
    }
}

@media (max-width: 767px) {
    .sp-mps-section {
        padding-inline: 12px;
    }

    .sp-mps-head {
        margin-bottom: 8px !important;
    }

    .sp-mps-eyebrow {
        font-size: 10px !important;
    }

    .sp-mps-title {
        font-size: 21px !important;
        line-height: 1.2;
    }

    .sp-mps-desc {
        max-width: 310px;
        font-size: 10.5px !important;
        line-height: 1.7;
    }

    .sp-mps-tabs-wrap {
        margin-bottom: 8px !important;
    }

    .sp-mps-tabs {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding: 2px 2px 7px;
        scrollbar-width: none;
    }

    .sp-mps-tabs::-webkit-scrollbar {
        display: none;
    }

    .sp-mps-tab {
        flex: 0 0 auto;
        min-height: 34px !important;
        padding: 4px 8px 4px 10px !important;
        font-size: 10px !important;
    }

    .sp-mps-tab-logo {
        width: 24px;
        height: 24px;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        padding: 11px !important;
        border-radius: 18px !important;
    }

    .sp-mps-merchant-card {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sp-mps-merchant-brand {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 9px;
    }

    .sp-mps-merchant-logo {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    .sp-mps-merchant-kicker,
    .sp-mps-merchant-category,
    .sp-mps-product-kicker,
    .sp-mps-product-merchant {
        font-size: 9.5px !important;
    }

    .sp-mps-merchant-name {
        font-size: 15px !important;
    }

    .sp-mps-merchant-cta,
    .sp-mps-product-cta {
        min-height: 34px;
        width: 100%;
        padding: 7px 13px;
        font-size: 10.5px;
    }

    .sp-mps-stage {
        min-height: 228px !important;
        padding-inline: 27px !important;
        border-radius: 20px !important;
    }

    .sp-mps-product-visual {
        width: 190px !important;
        height: 190px !important;
        min-height: 190px !important;
        padding: 12px !important;
        border-radius: 26px !important;
    }

    .sp-mps-slide {
        transform: scale(0.70);
    }

    .sp-mps-slide.swiper-slide-prev,
    .sp-mps-slide.swiper-slide-next {
        transform: scale(0.82);
    }

    .sp-mps-slide.swiper-slide-active {
        transform: scale(1);
    }

    .sp-mps-nav {
        width: 32px !important;
        height: 32px !important;
    }

    .sp-mps-product-name {
        min-height: calc(14px * 1.5 * 3);
        max-height: calc(14px * 1.5 * 3);
        font-size: 14px !important;
        line-height: 1.5;
    }

    .sp-mps-product-prices {
        min-height: 70px;
        gap: 5px;
    }

    .sp-mps-price-old {
        font-size: 9.5px;
    }

    .sp-mps-price-current {
        font-size: 16px !important;
    }

    .sp-mps-installment {
        min-height: 23px;
        padding: 4px 8px;
        font-size: 9.5px;
    }

    .sp-mps-badge {
        min-height: 21px;
        padding: 4px 8px;
        font-size: 9.5px;
    }
}

/* =========================================================
  MPS STABLE FIX - scoped only to merchant showcase
  fixes blank switch, shorter height, hover pause handled in JS
========================================================= */

.sp-mps-shell {
    --mps-panel-height: clamp(292px, 31vw, 328px) !important;
    grid-template-columns: 190px minmax(0, 1fr) 218px !important;
    gap: 16px !important;
    height: var(--mps-panel-height) !important;
    min-height: var(--mps-panel-height) !important;
}

.sp-mps-side,
.sp-mps-stage,
.sp-mps-merchant-card,
.sp-mps-product-card {
    height: var(--mps-panel-height) !important;
    min-height: var(--mps-panel-height) !important;
}

.sp-mps-merchant-card,
.sp-mps-product-card {
    padding: 16px 14px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
        0 14px 34px rgba(0, 80, 170, 0.045),
        inset 0 0 0 1px rgba(255, 255, 255, 0.48) !important;
    transform: none !important;
}

.sp-mps-merchant-card:hover,
.sp-mps-product-card:hover {
    transform: none !important;
}

.sp-mps-merchant-brand {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px !important;
}

.sp-mps-merchant-logo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
}

.sp-mps-merchant-name {
    font-size: 18px !important;
    line-height: 1.22 !important;
}

.sp-mps-merchant-kicker,
.sp-mps-product-kicker {
    font-size: 10px !important;
    margin-bottom: 3px !important;
}

.sp-mps-merchant-category,
.sp-mps-product-merchant {
    font-size: 11px !important;
}

.sp-mps-merchant-stat {
    min-width: 62px !important;
    padding: 8px 9px !important;
    border-radius: 14px !important;
}

.sp-mps-merchant-stat strong {
    font-size: 14px !important;
}

.sp-mps-merchant-stat span {
    font-size: 9px !important;
}

.sp-mps-merchant-cta,
.sp-mps-product-cta {
    min-height: 36px !important;
    padding: 8px 15px !important;
    font-size: 11.5px !important;
}

.sp-mps-stage {
    padding-inline: 38px !important;
    overflow: hidden !important;
}

.sp-mps-swiper {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.sp-mps-swiper .swiper-wrapper {
    align-items: center !important;
}

.sp-mps-slide {
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

.sp-mps-product-visual {
    width: 248px !important;
    height: 248px !important;
    min-height: 248px !important;
    padding: 16px !important;
    border-radius: 30px !important;
}

.sp-mps-product-name {
    min-height: calc(16px * 1.44 * 3) !important;
    max-height: calc(16px * 1.44 * 3) !important;
    font-size: 16px !important;
    line-height: 1.44 !important;
}

.sp-mps-product-prices {
    min-height: 72px !important;
    gap: 5px !important;
}

.sp-mps-price-old {
    font-size: 10px !important;
}

.sp-mps-price-current {
    font-size: 17px !important;
}

.sp-mps-installment {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
}

.sp-mps-product-badges {
    min-height: 24px !important;
}

.sp-mps-badge {
    min-height: 22px !important;
    padding: 3px 7px !important;
    font-size: 9.5px !important;
}

/* Kill previous full-card/full-stage out-in animations.
   This is the main fix for the blank flash in the video. */
.sp-mps-shell[data-mps-switch-state] [data-mps-animate],
.sp-mps-shell[data-mps-switch-state] .sp-mps-stage,
.sp-mps-shell[data-mps-switch-state] .sp-mps-swiper,
.sp-mps-shell[data-mps-switch-state] .sp-mps-merchant-card,
.sp-mps-shell[data-mps-switch-state] .sp-mps-product-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    visibility: visible !important;
}

/* Keep the box stable; animate only fresh inner content very lightly. */
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-merchant-brand,
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-merchant-meta,
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-merchant-cta,
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-product-card>*,
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-swiper {
    animation: spMpsInnerSettle 360ms cubic-bezier(0.19, 1, 0.22, 1) both !important;
}

@keyframes spMpsInnerSettle {
    from {
        opacity: 0.72;
        transform: translateY(6px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (max-width: 1100px) {
    .sp-mps-shell {
        --mps-panel-height: 305px !important;
        grid-template-columns: 178px minmax(0, 1fr) 205px !important;
        gap: 12px !important;
    }

    .sp-mps-product-visual {
        width: 226px !important;
        height: 226px !important;
        min-height: 226px !important;
    }
}

@media (max-width: 991px) {
    .sp-mps-shell {
        --mps-panel-height: auto !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .sp-mps-side,
    .sp-mps-stage,
    .sp-mps-merchant-card,
    .sp-mps-product-card {
        height: auto !important;
        min-height: 0 !important;
    }

    .sp-mps-stage {
        min-height: 246px !important;
    }
}

@media (max-width: 767px) {
    .sp-mps-stage {
        min-height: 230px !important;
        padding-inline: 28px !important;
    }

    .sp-mps-product-visual {
        width: 198px !important;
        height: 198px !important;
        min-height: 198px !important;
        padding: 13px !important;
        border-radius: 26px !important;
    }
}


/* =========================================================
  MPS PRODUCT SELECTION STABILITY
  fix click-after-drag + keep selected visual synced with center
========================================================= */

.sp-mps-swiper {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.sp-mps-swiper.swiper-grabbing {
    cursor: grabbing;
}

.sp-mps-swiper .swiper-wrapper {
    align-items: center;
}

.sp-mps-slide {
    user-select: none;
    -webkit-user-select: none;
    will-change: transform, opacity, filter;
}

.sp-mps-product-visual {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y;
}

.sp-mps-product-visual img {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.sp-mps-slide .sp-mps-product-visual {
    opacity: 0.72;
    transform: scale(0.96);
    transition:
        opacity 460ms ease,
        transform 560ms cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 460ms ease,
        border-color 460ms ease;
}

.sp-mps-slide.swiper-slide-active .sp-mps-product-visual,
.sp-mps-slide.is-mps-selected .sp-mps-product-visual {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(var(--sp-color-primary-rgb), 0.22) !important;
}

.sp-mps-section[data-mps-user-moving="true"] .sp-mps-product-card {
    pointer-events: none;
}


/* =========================================================
  MPS POLISH V3
  scoped only to merchant-product-showcase - CPC untouched
  fixes layout after swap + lower height + cinematic inner motion
========================================================= */

.sp-mps-section {
    padding-inline: 18px;
}

.sp-mps-head {
    margin-bottom: 10px !important;
}

.sp-mps-title {
    font-size: clamp(26px, 2.8vw, 40px) !important;
    line-height: 1.12 !important;
}

.sp-mps-desc {
    font-size: 12.5px !important;
    line-height: 1.75 !important;
}

.sp-mps-tabs-wrap {
    margin-bottom: 10px !important;
}

.sp-mps-shell {
    --mps-panel-height: clamp(300px, 31vw, 336px) !important;
    direction: ltr;
    display: grid !important;
    grid-template-columns: 228px minmax(0, 1fr) 208px !important;
    grid-template-areas: "product stage merchant" !important;
    gap: 16px !important;
    align-items: stretch !important;
    height: var(--mps-panel-height) !important;
    min-height: var(--mps-panel-height) !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--sp-color-primary-rgb), 0.10), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.sp-mps-shell::before {
    inset: 10% 16% !important;
    filter: blur(28px) !important;
    opacity: 0.76;
}

.sp-mps-side,
.sp-mps-stage,
.sp-mps-merchant-card,
.sp-mps-product-card {
    height: var(--mps-panel-height) !important;
    min-height: var(--mps-panel-height) !important;
}

.sp-mps-side--product {
    grid-area: product !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.sp-mps-stage {
    grid-area: stage !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.sp-mps-side--merchant {
    grid-area: merchant !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.sp-mps-merchant-card,
.sp-mps-product-card {
    padding: 15px 14px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.30) !important;
    box-shadow:
        0 10px 26px rgba(0, 80, 170, 0.035),
        inset 0 0 0 1px rgba(255, 255, 255, 0.46) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transform: none !important;
}

.sp-mps-merchant-card:hover,
.sp-mps-product-card:hover {
    transform: none !important;
    box-shadow:
        0 12px 30px rgba(0, 80, 170, 0.045),
        inset 0 0 0 1px rgba(255, 255, 255, 0.54) !important;
}

.sp-mps-merchant-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.sp-mps-product-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 7px !important;
}

.sp-mps-merchant-meta,
.sp-mps-product-cta {
    display: none !important;
}

.sp-mps-merchant-brand {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px !important;
}

.sp-mps-merchant-logo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    box-shadow:
        0 8px 18px rgba(0, 80, 170, 0.055),
        inset 0 0 0 1px rgba(0, 125, 250, 0.07) !important;
}

.sp-mps-merchant-kicker,
.sp-mps-product-kicker {
    font-size: 10px !important;
    margin-bottom: 3px !important;
}

.sp-mps-merchant-name {
    font-size: 17px !important;
    line-height: 1.22 !important;
}

.sp-mps-merchant-category,
.sp-mps-product-merchant {
    font-size: 10.5px !important;
    line-height: 1.55 !important;
}

.sp-mps-merchant-cta {
    width: 100% !important;
    min-height: 35px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    box-shadow: 0 10px 22px rgba(var(--sp-color-primary-rgb), 0.17) !important;
}

.sp-mps-product-name {
    min-height: calc(15px * 1.45 * 3) !important;
    max-height: calc(15px * 1.45 * 3) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.sp-mps-product-prices {
    min-height: 68px !important;
    gap: 5px !important;
}

.sp-mps-price-old {
    font-size: 9.5px !important;
}

.sp-mps-price-current {
    font-size: 16px !important;
}

.sp-mps-installment {
    min-height: 23px !important;
    padding: 4px 8px !important;
    font-size: 9.5px !important;
}

.sp-mps-product-badges {
    min-height: 0 !important;
    gap: 6px !important;
}

.sp-mps-badge[hidden] {
    display: none !important;
}

.sp-mps-badge {
    min-height: 21px !important;
    padding: 3px 7px !important;
    font-size: 9.5px !important;
}

.sp-mps-stage {
    padding-inline: 34px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
}

.sp-mps-stage::before {
    inset: 7% 6% !important;
    filter: blur(4px) !important;
    opacity: 0.88;
}

.sp-mps-product-visual {
    width: 246px !important;
    height: 246px !important;
    min-height: 246px !important;
    padding: 15px !important;
    border-radius: 30px !important;
}

.sp-mps-nav {
    width: 36px !important;
    height: 36px !important;
    box-shadow:
        0 8px 18px rgba(0, 80, 170, 0.07),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.08) !important;
}

.sp-mps-nav--prev {
    left: 6px !important;
    right: auto !important;
}

.sp-mps-nav--next {
    right: 6px !important;
    left: auto !important;
}

/* stable boxes: no full card jump, only inner content breathes */
.sp-mps-shell[data-mps-switch-state] [data-mps-animate],
.sp-mps-shell[data-mps-switch-state] .sp-mps-stage,
.sp-mps-shell[data-mps-switch-state] .sp-mps-swiper,
.sp-mps-shell[data-mps-switch-state] .sp-mps-merchant-card,
.sp-mps-shell[data-mps-switch-state] .sp-mps-product-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    visibility: visible !important;
}

.sp-mps-shell[data-mps-switch-state="out"] .sp-mps-merchant-card>*,
.sp-mps-shell[data-mps-switch-state="out"] .sp-mps-product-card>* {
    animation: spMpsV3InnerOut 140ms ease both !important;
}

.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-merchant-card>*,
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-product-card>* {
    animation: spMpsV3InnerIn 520ms cubic-bezier(0.19, 1, 0.22, 1) both !important;
}

@keyframes spMpsV3InnerOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(8px) scale(0.992);
        filter: blur(4px);
    }
}

@keyframes spMpsV3InnerIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.992);
        filter: blur(6px);
    }

    58% {
        opacity: 1;
        transform: translateY(1px) scale(1.002);
        filter: blur(0);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 1100px) {
    .sp-mps-shell {
        --mps-panel-height: 310px !important;
        grid-template-columns: 210px minmax(0, 1fr) 190px !important;
        gap: 12px !important;
    }

    .sp-mps-product-visual {
        width: 224px !important;
        height: 224px !important;
        min-height: 224px !important;
    }
}

@media (max-width: 991px) {
    .sp-mps-shell {
        --mps-panel-height: auto !important;
        direction: rtl;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "merchant"
            "stage"
            "product" !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 9px !important;
    }

    .sp-mps-side,
    .sp-mps-stage,
    .sp-mps-merchant-card,
    .sp-mps-product-card {
        height: auto !important;
        min-height: 0 !important;
    }

    .sp-mps-side--merchant {
        grid-area: merchant !important;
    }

    .sp-mps-stage {
        grid-area: stage !important;
        min-height: 236px !important;
    }

    .sp-mps-side--product {
        grid-area: product !important;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .sp-mps-merchant-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center;
        gap: 10px !important;
    }
}

@media (max-width: 767px) {
    .sp-mps-title {
        font-size: 21px !important;
    }

    .sp-mps-desc {
        font-size: 10.5px !important;
    }

    .sp-mps-stage {
        min-height: 222px !important;
        padding-inline: 28px !important;
    }

    .sp-mps-product-visual {
        width: 188px !important;
        height: 188px !important;
        min-height: 188px !important;
        padding: 12px !important;
        border-radius: 25px !important;
    }

    .sp-mps-merchant-brand {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }

    .sp-mps-merchant-logo {
        width: 44px !important;
        height: 44px !important;
    }

    .sp-mps-merchant-cta {
        width: 100% !important;
    }
}

/* =========================================================
  MPS COMPACT MINIMAL OVERRIDE
  lower height + cleaner cards + tighter product showcase
========================================================= */

.sp-mps-section {
    padding-inline: 18px !important;
}

.sp-mps-inner {
    width: min(100%, 1180px) !important;
}

.sp-mps-head {
    margin-bottom: 8px !important;
}

.sp-mps-eyebrow {
    margin-bottom: 2px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

.sp-mps-title {
    margin-bottom: 10px !important;
    font-size: clamp(26px, 2.7vw, 38px) !important;
    line-height: 1.1 !important;
}

.sp-mps-desc {
    max-width: 560px !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px;
}

.sp-mps-tabs-wrap {
    margin-bottom: 8px !important;
}

.sp-mps-tab {
    min-height: 34px !important;
    padding: 5px 8px 5px 12px !important;
    font-size: 11px !important;
}

.sp-mps-tab-logo {
    width: 26px !important;
    height: 26px !important;
}


/* desktop compact layout */

.sp-mps-shell {
    --mps-panel-height: 318px;

    height: var(--mps-panel-height) !important;
    min-height: var(--mps-panel-height) !important;

    grid-template-columns: 210px minmax(0, 1fr) 230px !important;
    gap: 14px !important;
    padding: 0 !important;

    background:
        radial-gradient(circle at 50% 52%, rgba(var(--sp-color-primary-rgb), 0.09), transparent 42%) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.sp-mps-shell::before {
    inset: 16% 20% !important;
    opacity: 0.72 !important;
    filter: blur(28px) !important;
}

.sp-mps-side,
.sp-mps-stage {
    height: var(--mps-panel-height) !important;
    min-height: var(--mps-panel-height) !important;
}

.sp-mps-merchant-card,
.sp-mps-product-card {
    height: 100% !important;
    min-height: var(--mps-panel-height) !important;

    padding: 18px 16px !important;
    border-radius: 24px !important;

    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
        0 14px 34px rgba(0, 80, 170, 0.045),
        inset 0 0 0 1px rgba(255, 255, 255, 0.48) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sp-mps-merchant-card {
    justify-content: space-between !important;
    gap: 12px !important;
}

.sp-mps-product-card {
    justify-content: center !important;
    gap: 8px !important;
}


/* merchant card compact */

.sp-mps-merchant-brand {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 10px !important;
}

.sp-mps-merchant-logo {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    box-shadow:
        0 10px 22px rgba(0, 80, 170, 0.06),
        inset 0 0 0 1px rgba(0, 125, 250, 0.07) !important;
}

.sp-mps-merchant-kicker {
    margin-bottom: 3px !important;
    font-size: 10px !important;
}

.sp-mps-merchant-name {
    margin-bottom: 2px !important;
    font-size: 17px !important;
    line-height: 1.22 !important;
}

.sp-mps-merchant-category {
    font-size: 10.5px !important;
    line-height: 1.45 !important;
}

.sp-mps-merchant-cta {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    box-shadow: 0 10px 22px rgba(var(--sp-color-primary-rgb), 0.18) !important;
}


/* cashback badge compact */

.sp-mps-product-badges {
    min-height: 24px !important;
    gap: 6px !important;
}

.sp-mps-badge {
    min-height: 22px !important;
    padding: 3px 8px !important;
    font-size: 9.5px !important;
}

.sp-mps-badge--cashback[hidden] {
    display: none !important;
}


/* product info compact */

.sp-mps-product-name {
    min-height: calc(16px * 1.45 * 3) !important;
    max-height: calc(16px * 1.45 * 3) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.sp-mps-product-prices {
    min-height: 72px !important;
    gap: 5px !important;
}

.sp-mps-price-row {
    gap: 6px !important;
}

.sp-mps-price-old {
    font-size: 10px !important;
}

.sp-mps-price-current {
    font-size: 17px !important;
    line-height: 1.25 !important;
}

.sp-mps-installment {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: 9.5px !important;
}


/* stage compact */

.sp-mps-stage {
    padding-inline: 38px !important;
    border-radius: 28px !important;
}

.sp-mps-stage::before {
    inset: 14% 14% !important;
    opacity: 0.78 !important;
    filter: blur(5px) !important;
}

.sp-mps-product-visual {
    width: 230px !important;
    height: 230px !important;
    min-height: 230px !important;
    padding: 16px !important;
    border-radius: 28px !important;

}

.sp-mps-product-visual:hover {
    transform: translateY(-2px) !important;
}

.sp-mps-nav {
    width: 34px !important;
    height: 34px !important;
    box-shadow:
        0 8px 18px rgba(0, 80, 170, 0.07),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.07) !important;
}

.sp-mps-slide {
    transform: scale(0.72) !important;
}

.sp-mps-slide.swiper-slide-prev,
.sp-mps-slide.swiper-slide-next {
    transform: scale(0.82) !important;
}

.sp-mps-slide.swiper-slide-active,
.sp-mps-slide.is-mps-selected {
    transform: scale(1) !important;
}


/* smoother content change, no chunky card motion */

.sp-mps-shell[data-mps-switch-state="out"] [data-mps-animate],
.sp-mps-shell[data-mps-switch-state="in"] [data-mps-animate] {
    animation: none !important;
}

.sp-mps-shell[data-mps-switch-state="out"] .sp-mps-merchant-card>*,
.sp-mps-shell[data-mps-switch-state="out"] .sp-mps-product-card>* {
    animation: spMpsMiniOut 160ms ease both;
}

.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-merchant-card>*,
.sp-mps-shell[data-mps-switch-state="in"] .sp-mps-product-card>* {
    animation: spMpsMiniIn 360ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes spMpsMiniOut {
    from {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(6px);
        filter: blur(3px);
    }
}

@keyframes spMpsMiniIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* tablet */

@media (max-width: 1100px) {
    .sp-mps-shell {
        --mps-panel-height: 300px;
        grid-template-columns: 190px minmax(0, 1fr) 210px !important;
        gap: 12px !important;
    }

    .sp-mps-product-visual {
        width: 210px !important;
        height: 210px !important;
        min-height: 210px !important;
    }
}


/* mobile */

@media (max-width: 991px) {
    .sp-mps-shell {
        --mps-panel-height: auto;

        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .sp-mps-side,
    .sp-mps-stage,
    .sp-mps-merchant-card,
    .sp-mps-product-card {
        height: auto !important;
        min-height: 0 !important;
    }

    .sp-mps-stage {
        min-height: 238px !important;
        padding-inline: 28px !important;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .sp-mps-merchant-card {
        gap: 10px !important;
    }

    .sp-mps-product-visual {
        width: 190px !important;
        height: 190px !important;
        min-height: 190px !important;
        padding: 12px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 767px) {
    .sp-mps-section {
        padding-inline: 12px !important;
    }

    .sp-mps-head {
        margin-bottom: 8px !important;
    }

    .sp-mps-title {
        font-size: 21px !important;
    }

    .sp-mps-desc {
        font-size: 10.5px !important;
        line-height: 1.65 !important;
    }

    .sp-mps-tabs-wrap {
        margin-bottom: 8px !important;
    }

    .sp-mps-tab {
        min-height: 34px !important;
        font-size: 10px !important;
    }

    .sp-mps-stage {
        min-height: 220px !important;
    }

    .sp-mps-product-visual {
        width: 172px !important;
        height: 172px !important;
        min-height: 172px !important;
    }

    .sp-mps-product-name {
        min-height: calc(14px * 1.45 * 3) !important;
        max-height: calc(14px * 1.45 * 3) !important;
        font-size: 14px !important;
    }

    .sp-mps-price-current {
        font-size: 16px !important;
    }
}

/* =========================================================
  MPS SQUARE COMPACT CARDS + SHADOW FIX
  فقط برای merchant-product-showcase
========================================================= */

.sp-mps-section,
.sp-mps-inner,
.sp-mps-shell,
.sp-mps-stage,
.sp-mps-swiper,
.sp-mps-swiper .swiper-wrapper {
    overflow: visible !important;
}

/* ارتفاع کلی سکشن کمتر شود */
.sp-mps-shell {
    --mps-panel-height: 270px !important;
    --mps-side-card-size: 210px !important;

    height: var(--mps-panel-height) !important;
    min-height: var(--mps-panel-height) !important;

    grid-template-columns: var(--mps-side-card-size) minmax(0, 1fr) var(--mps-side-card-size) !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;

    background:
        radial-gradient(circle at 50% 54%, rgba(var(--sp-color-primary-rgb), 0.075), transparent 42%) !important;
    box-shadow: none !important;
}

/* باکس‌های بغل مربعی */
.sp-mps-side {
    height: var(--mps-side-card-size) !important;
    min-height: var(--mps-side-card-size) !important;
    align-self: center !important;
}

.sp-mps-merchant-card,
.sp-mps-product-card {
    width: var(--mps-side-card-size) !important;
    height: var(--mps-side-card-size) !important;
    min-height: var(--mps-side-card-size) !important;
    aspect-ratio: 1 / 1 !important;

    padding: 16px 14px !important;
    border-radius: 26px !important;

    box-shadow:
        0 10px 26px rgba(0, 80, 170, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.50) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* محتوای کارت مرچنت داخل مربع بهتر جا بگیرد */
.sp-mps-merchant-card {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between !important;
    gap: 10px !important;
}

.sp-mps-merchant-brand {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 9px !important;
}

.sp-mps-merchant-logo {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    box-shadow:
        0 8px 18px rgba(0, 80, 170, 0.045),
        inset 0 0 0 1px rgba(0, 125, 250, 0.06) !important;
}

.sp-mps-merchant-kicker {
    margin-bottom: 2px !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
}

.sp-mps-merchant-name {
    margin-bottom: 1px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

.sp-mps-merchant-category {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
}

.sp-mps-merchant-cta {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 10.5px !important;
    box-shadow: 0 8px 18px rgba(var(--sp-color-primary-rgb), 0.16) !important;
}

/* کش‌بک داخل کارت مرچنت فشرده‌تر */
.sp-mps-product-badges {
    min-height: 22px !important;
    gap: 5px !important;
}

.sp-mps-badge {
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
}

/* کارت محصول مربعی و فشرده */
.sp-mps-product-card {
    justify-content: center !important;
    gap: 7px !important;
}

.sp-mps-product-name {
    min-height: calc(14px * 1.42 * 3) !important;
    max-height: calc(14px * 1.42 * 3) !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
}

.sp-mps-product-prices {
    min-height: 64px !important;
    gap: 4px !important;
}

.sp-mps-price-old {
    font-size: 9px !important;
}

.sp-mps-price-current {
    font-size: 15.5px !important;
    line-height: 1.25 !important;
}

.sp-mps-installment {
    min-height: 22px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
}

/* stage کوتاه‌تر ولی سایه‌ها کات نشوند */
.sp-mps-stage {
    height: var(--mps-panel-height) !important;
    min-height: var(--mps-panel-height) !important;
    padding-inline: 44px !important;
    overflow: hidden !important;
}

.sp-mps-stage::before {
    inset: 12% 12% !important;
    opacity: 0.68 !important;
    filter: blur(6px) !important;
}

/* سایه محصول کات نشود */
.sp-mps-product-visual {
    width: 220px !important;
    height: 220px !important;
    min-height: 220px !important;
    padding: 15px !important;
    border-radius: 28px !important;
}



.sp-mps-nav {
    width: 32px !important;
    height: 32px !important;
    box-shadow:
        0 7px 16px rgba(0, 80, 170, 0.07),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.07) !important;
}

.sp-mps-merchant-copy {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* حالت تبلت */
@media (max-width: 1100px) {
    .sp-mps-shell {
        --mps-panel-height: 250px !important;
        --mps-side-card-size: 190px !important;
        gap: 12px !important;
    }

    .sp-mps-product-visual {
        width: 200px !important;
        height: 200px !important;
        min-height: 200px !important;
    }
}

/* موبایل: مربعی بودن کارت‌ها حفظ شود ولی زیر هم بیایند */
@media (max-width: 991px) {
    .sp-mps-shell {
        --mps-panel-height: auto !important;
        --mps-side-card-size: min(100%, 210px) !important;

        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .sp-mps-side,
    .sp-mps-merchant-card,
    .sp-mps-product-card {
        width: min(100%, 260px) !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        justify-self: center !important;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        padding: 12px !important;
        border-radius: 20px !important;
    }

    .sp-mps-stage {
        height: 230px !important;
        min-height: 230px !important;
        padding-inline: 30px !important;
        overflow: visible !important;
    }

    .sp-mps-product-visual {
        width: 180px !important;
        height: 180px !important;
        min-height: 180px !important;
        padding: 12px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 767px) {
    .sp-mps-stage {
        height: 210px !important;
        min-height: 210px !important;
    }

    .sp-mps-product-visual {
        width: 164px !important;
        height: 164px !important;
        min-height: 164px !important;
    }
}

/* =========================================================
  MPS TAB FLOW EFFECT - SCOPED
  فقط افکت indicator؛ بدون تغییر layout و typography
========================================================= */

.sp-mps-section [data-mps-tabs][data-mps-flow-ready="true"] {
    position: relative !important;
    isolation: isolate;
}

.sp-mps-section [data-mps-tabs][data-mps-flow-ready="true"] .sp-mps-tab {
    position: relative;
    z-index: 2;
}

/* فقط وقتی indicator آماده است، active background خود tab شفاف شود */
.sp-mps-section [data-mps-tabs][data-mps-flow-ready="true"] .sp-mps-tab.is-active {
    background: transparent !important;
    box-shadow: none !important;
}

/* متن و لوگوی تب active روی indicator خوانا بماند */
.sp-mps-section [data-mps-tabs][data-mps-flow-ready="true"] .sp-mps-tab.is-active,
.sp-mps-section [data-mps-tabs][data-mps-flow-ready="true"] .sp-mps-tab.is-active .sp-mps-tab-text {
    color: #ffffff !important;
}

.sp-mps-section [data-mps-tabs][data-mps-flow-ready="true"] .sp-mps-tab.is-active .sp-mps-tab-logo {
    background: rgba(255, 255, 255, 0.92) !important;
}

/* خود pill متحرک */
.sp-mps-section .sp-mps-tab-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    z-index: 1;
    border-radius: 999px;
    pointer-events: none;
    overflow: hidden;

    background:
        linear-gradient(135deg,
            #2aa5ff 0%,
            #007dfa 56%,
            #006ee8 100%);

    box-shadow:
        0 8px 18px rgba(0, 125, 250, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);

    transform: translateX(0);
    transition:
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
        width 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* برق/آب داخل pill */
.sp-mps-section .sp-mps-tab-indicator::before {
    content: "";
    position: absolute;
    inset: -20% -12%;
    opacity: 0;
    background:
        radial-gradient(circle at 28% 50%,
            rgba(255, 255, 255, 0.48),
            transparent 30%),
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.10) 25%,
            rgba(255, 255, 255, 0.36) 50%,
            rgba(255, 255, 255, 0.10) 74%,
            transparent 100%);
}

.sp-mps-section [data-mps-tabs][data-flow-dir="to-right"] .sp-mps-tab-indicator.is-flowing::before {
    animation: spMpsScopedFlowRight 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-mps-section [data-mps-tabs][data-flow-dir="to-left"] .sp-mps-tab-indicator.is-flowing::before {
    animation: spMpsScopedFlowLeft 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes spMpsScopedFlowRight {
    0% {
        opacity: 0;
        transform: translateX(-130%);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(130%);
    }
}

@keyframes spMpsScopedFlowLeft {
    0% {
        opacity: 0;
        transform: translateX(130%);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-130%);
    }
}

/* موبایل: چون tabs اسکرولی است، indicator همچنان داخل همان root می‌ماند */
@media (max-width: 767px) {
    .sp-mps-section .sp-mps-tab-indicator {
        top: 3px;
        bottom: 7px;
    }
}

/* =========================================================
  SECTION: CAMPAIGN COUNTDOWN
  Light glass strip - minimal landing style
========================================================= */

.sp-cd-section {
    position: relative;
    padding-inline: 18px;
}

.sp-cd-inner {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.sp-cd-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(210px, 0.9fr) minmax(420px, 1.4fr) 150px;
    grid-template-areas:
        "copy timer visual"
        "progress progress visual"
        "note note visual";
    align-items: center;
    gap: 12px 22px;

    min-height: 210px;
    padding: 24px 28px;
    border-radius: 34px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(247, 251, 255, 0.56) 50%,
            rgba(238, 247, 255, 0.66) 100%);

    box-shadow:
        0 18px 54px rgba(0, 80, 170, 0.075),
        inset 0 0 0 1px rgba(255, 255, 255, 0.70);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    overflow: hidden;
    isolation: isolate;
}

.sp-cd-shell::before {
    content: "";
    position: absolute;
    inset: -30% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 55%, rgba(var(--sp-color-primary-rgb), 0.13), transparent 28%),
        radial-gradient(circle at 78% 35%, rgba(0, 160, 255, 0.10), transparent 30%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12));
}

.sp-cd-shell::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.72),
            rgba(255, 255, 255, 0.08) 52%,
            rgba(255, 255, 255, 0.38));
}

.sp-cd-copy {
    grid-area: copy;
    min-width: 0;
}

.sp-cd-eyebrow {
    margin: 0 0 5px;
    color: var(--sp-color-primary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
}

.sp-cd-title {
    margin: 0;
    color: #101828;
    font-size: clamp(25px, 2.2vw, 48px);
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.sp-cd-timer {
    grid-area: timer;
    direction: ltr;
    display: grid;
    grid-template-columns: repeat(4, minmax(76px, 1fr));
    gap: 10px;
    align-items: stretch;
}

.sp-cd-unit {
    position: relative;
    min-height: 84px;
    display: grid;
    place-items: center;
    gap: 5px;
    padding: 12px 10px;
    border-radius: 24px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.82),
            rgba(246, 250, 255, 0.62));

    box-shadow:
        0 10px 26px rgba(0, 80, 170, 0.055),
        inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.sp-cd-unit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.62),
            rgba(255, 255, 255, 0.06));
}

.sp-cd-value {
    position: relative;
    z-index: 1;
    color: #101828;
    font-size: clamp(26px, 2.4vw, 42px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.sp-cd-label {
    position: relative;
    z-index: 1;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
}

.sp-cd-visual {
    grid-area: visual;
    justify-self: end;
    width: 140px;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 50%, rgba(var(--sp-color-primary-rgb), 0.14), transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36));

    box-shadow:
        0 16px 38px rgba(0, 80, 170, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.sp-cd-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-cd-progress {
    grid-area: progress;
    position: relative;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;

    background: rgba(var(--sp-color-primary-rgb), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.05);
}

.sp-cd-progress-bar {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 0%;
    border-radius: inherit;

    background:
        linear-gradient(90deg,
            #b8e2ff 0%,
            #5dbdff 42%,
            var(--sp-color-primary) 100%);

    box-shadow: 0 0 18px rgba(var(--sp-color-primary-rgb), 0.22);
    transition: width 720ms cubic-bezier(0.19, 1, 0.22, 1);
}

.sp-cd-note {
    grid-area: note;
    margin: 0;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

.sp-cd-section.is-ended .sp-cd-title {
    color: #667085;
}

.sp-cd-section.is-ended .sp-cd-progress-bar {
    width: 100% !important;
}

/* tablet */
@media (max-width: 991px) {
    .sp-cd-shell {
        grid-template-columns: minmax(190px, 0.85fr) minmax(340px, 1.3fr) 124px;
        gap: 10px 16px;
        min-height: 188px;
        padding: 20px 22px;
        border-radius: 28px;
    }

    .sp-cd-timer {
        grid-template-columns: repeat(4, minmax(68px, 1fr));
        gap: 8px;
    }

    .sp-cd-unit {
        min-height: 76px;
        border-radius: 20px;
    }

    .sp-cd-visual {
        width: 120px;
        border-radius: 24px;
    }
}

/* mobile */
@media (max-width: 767px) {
    .sp-cd-section {
        padding-inline: 12px;
    }

    .sp-cd-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "copy"
            "timer"
            "progress"
            "note";
        gap: 12px;
        min-height: auto;
        padding: 16px 14px;
        border-radius: 24px;
    }

    .sp-cd-copy {
        text-align: center;
    }

    .sp-cd-eyebrow {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .sp-cd-title {
        font-size: 20px;
        line-height: 1.16;
    }

    .sp-cd-visual {
        justify-self: center;
        width: 132px;
        border-radius: 22px;
    }

    .sp-cd-timer {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    .sp-cd-unit {
        min-height: 68px;
        padding: 10px 6px;
        border-radius: 17px;
    }

    .sp-cd-value {
        font-size: 24px;
    }

    .sp-cd-label {
        font-size: 9px;
    }

    .sp-cd-note {
        text-align: center;
        font-size: 10.5px;
    }
}

@media (max-width: 390px) {
    .sp-cd-timer {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sp-cd-unit {
        min-height: 64px;
    }
}

/* =========================================================
  SECTION: BANK LOAN SHOWCASE
  product-based exact calculator
========================================================= */

.sp-bl-section {
    position: relative;
    padding-inline: 18px;
}

.sp-bl-inner {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.sp-bl-head {
    margin-bottom: 14px;
    text-align: center;
}

.sp-bl-eyebrow {
    margin: 0 0 4px;
    color: var(--sp-color-primary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
}

.sp-bl-title {
    margin: 0 0 6px;
    color: #101828;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 950;
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.sp-bl-desc {
    max-width: 620px;
    margin: 0 auto;
    color: #667085;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.8;
}

.sp-bl-shell {
    position: relative;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 320px;
    align-items: center;
    gap: 18px;
    min-height: 430px;
    padding: 18px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 48% 50%, rgba(var(--sp-color-primary-rgb), 0.10), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(246, 251, 255, 0.48));
    box-shadow:
        0 18px 54px rgba(0, 80, 170, 0.07),
        inset 0 0 0 1px rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    isolation: isolate;
}

.sp-bl-shell::before {
    content: "";
    position: absolute;
    inset: -20% 12%;
    z-index: -1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.48);
    filter: blur(34px);
    pointer-events: none;
}

.sp-bl-products {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 9px;
    align-content: center;
}

.sp-bl-product {
    min-height: 56px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.50);
    color: #344054;
    text-align: right;
    box-shadow:
        0 8px 20px rgba(0, 80, 170, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.50);
    transition:
        transform 200ms ease,
        background-color 200ms ease,
        box-shadow 200ms ease,
        color 200ms ease;
}

.sp-bl-product:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.82);
}

.sp-bl-product.is-active {
    color: var(--sp-color-primary);
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 12px 28px rgba(var(--sp-color-primary-rgb), 0.12),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.18);
}

.sp-bl-product-img {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.66);
    overflow: hidden;
}

.sp-bl-product-img img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(0, 80, 170, 0.12));
    pointer-events: none;
}

.sp-bl-product-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.sp-bl-product-copy strong {
    color: inherit;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.35;
    white-space: nowrap;
}

.sp-bl-product-copy small {
    color: #667085;
    font-size: 9.5px;
    font-weight: 750;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-bl-stage {
    position: relative;
    min-height: 388px;
    display: grid;
    place-items: center;
    overflow: visible;
}

.sp-bl-orbit {
    position: absolute;
    width: min(68%, 360px);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.22) 54%, transparent 70%);
    filter: blur(2px);
}

.sp-bl-orbit::before,
.sp-bl-orbit::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    border: 1px solid rgba(var(--sp-color-primary-rgb), 0.12);
    animation: spBlRing 6s ease-in-out infinite;
}

.sp-bl-orbit::after {
    inset: 25%;
    animation-delay: -2.4s;
}

.sp-bl-selected-product {
    position: relative;
    z-index: 2;
    width: min(58%, 330px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border-radius: 40px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(246, 251, 255, 0.42));
    box-shadow:
        0 24px 68px rgba(0, 80, 170, 0.11),
        inset 0 0 0 1px rgba(255, 255, 255, 0.72);
    animation: spBlFloat 4.2s ease-in-out infinite;
}

.sp-bl-selected-product img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 24px 26px rgba(0, 80, 170, 0.14));
    transition:
        opacity 220ms ease,
        transform 460ms cubic-bezier(0.19, 1, 0.22, 1);
}

.sp-bl-selected-product.is-changing img {
    opacity: 0;
    transform: translateY(18px) scale(0.92) rotate(-4deg);
}

.sp-bl-amount-pill {
    position: absolute;
    z-index: 3;
    bottom: 16px;
    right: 50%;
    transform: translateX(50%);
    min-width: 220px;
    display: grid;
    gap: 3px;
    padding: 9px 16px;
    border-radius: 999px;
    text-align: center;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        0 12px 28px rgba(0, 80, 170, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sp-bl-amount-pill span {
    color: #667085;
    font-size: 10px;
    font-weight: 800;
}

.sp-bl-amount-pill strong {
    color: var(--sp-color-primary);
    font-size: 15px;
    font-weight: 950;
}

.sp-bl-card {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 13px;
    padding: 20px 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow:
        0 16px 42px rgba(0, 80, 170, 0.055),
        inset 0 0 0 1px rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sp-bl-card-head {
    display: grid;
    gap: 4px;
}

.sp-bl-card-kicker {
    margin: 0;
    color: var(--sp-color-primary);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.5;
}

.sp-bl-card h3 {
    margin: 0;
    color: #101828;
    font-size: 19px;
    font-weight: 950;
    line-height: 1.25;
}

.sp-bl-term-toggle {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.56);
    overflow-x: auto;
    scrollbar-width: none;
}

.sp-bl-term-toggle::-webkit-scrollbar {
    display: none;
}

.sp-bl-term-toggle button {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.sp-bl-term-toggle button.is-active {
    background: var(--sp-color-primary);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(var(--sp-color-primary-rgb), 0.18);
}

.sp-bl-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-bl-result {
    min-height: 70px;
    display: grid;
    gap: 5px;
    align-content: center;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.50);
}

.sp-bl-result--main {
    grid-column: span 2;
}

.sp-bl-result span {
    color: #667085;
    font-size: 10px;
    font-weight: 800;
}

.sp-bl-result strong {
    color: #101828;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.4;
}

.sp-bl-result--main strong {
    color: var(--sp-color-primary);
    font-size: 18px;
}

.sp-bl-progress {
    position: relative;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--sp-color-primary-rgb), 0.08);
}

.sp-bl-progress span {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 25%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b8e2ff, #5dbdff, var(--sp-color-primary));
    transition: width 520ms cubic-bezier(0.19, 1, 0.22, 1);
}

.sp-bl-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--sp-color-primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(var(--sp-color-primary-rgb), 0.20);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.sp-bl-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(var(--sp-color-primary-rgb), 0.26);
}

@keyframes spBlFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

@keyframes spBlRing {

    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .sp-bl-shell {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: auto;
        padding: 16px;
    }

    .sp-bl-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sp-bl-stage {
        min-height: 330px;
    }

    .sp-bl-card {
        width: min(100%, 520px);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .sp-bl-section {
        padding-inline: 12px;
    }

    .sp-bl-head {
        margin-bottom: 10px;
    }

    .sp-bl-title {
        font-size: 24px;
    }

    .sp-bl-desc {
        font-size: 11px;
        line-height: 1.7;
    }

    .sp-bl-shell {
        padding: 14px;
        border-radius: 24px;
    }

    .sp-bl-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sp-bl-product {
        min-height: 50px;
        grid-template-columns: 36px minmax(0, 1fr);
        border-radius: 15px;
        padding: 7px 8px;
    }

    .sp-bl-product-img {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .sp-bl-product-copy strong {
        font-size: 10.5px;
    }

    .sp-bl-product-copy small {
        font-size: 8.5px;
    }

    .sp-bl-stage {
        min-height: 286px;
    }

    .sp-bl-selected-product {
        width: min(74%, 240px);
        border-radius: 30px;
    }

    .sp-bl-amount-pill {
        bottom: 6px;
        min-width: 190px;
        padding: 8px 14px;
    }

    .sp-bl-card {
        padding: 16px 14px;
        border-radius: 22px;
    }

    .sp-bl-card h3 {
        font-size: 18px;
    }

    .sp-bl-result-grid {
        grid-template-columns: 1fr;
    }

    .sp-bl-result--main {
        grid-column: auto;
    }
}

@media (max-width: 390px) {
    .sp-bl-products {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
  SECTION: SOCIAL PRODUCT CAROUSEL
  Uses the exact CPC slider structure. Only gradient is custom.
========================================================= */

.sp-cpc-section--social .sp-cpc-shell {
    background:
        radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.22), transparent 30%),
        radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.14), transparent 32%),
        linear-gradient(120deg,
            #9fd6ff 0%,
            #c9b6ff 30%,
            #f15a9d 62%,
            #ffb36b 100%);
    box-shadow:
        0 18px 48px rgba(190, 77, 165, 0.10),
        0 4px 12px rgba(0, 125, 250, 0.06);
}

.sp-cpc-section--social .sp-cpc-shell::before {
    background:
        radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.18), transparent 34%),
        radial-gradient(circle at 80% 72%, rgba(255, 255, 255, 0.12), transparent 32%);
}

.sp-cpc-section--social .sp-cpc-visual-image {
    transform: translateY(6px) rotate(-3deg);
}

.sp-cpc-section--social .sp-cpc-card-logo {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}

@media (max-width: 767px) {
    .sp-cpc-section--social .sp-cpc-visual-image {
        transform: translateY(8px) rotate(-3deg) !important;
    }
}


/* =========================================================
  SOCIAL PRODUCTS - FINAL CPC MATCH
  Same visual rhythm as product carousels + visible spread animation
========================================================= */

.sp-cpc-section--social .sp-cpc-shell {
    align-items: center !important;
    min-height: 0 !important;
    padding-top: 26px !important;
    padding-bottom: 28px !important;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
        radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.13), transparent 31%),
        linear-gradient(110deg,
            #9fd6ff 0%,
            #b7c4ff 24%,
            #df78c8 50%,
            #ff6e9c 72%,
            #ffb56b 100%) !important;
}

.sp-cpc-section--social .sp-cpc-content {
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.sp-cpc-section--social .sp-cpc-carousel-wrap {
    width: 100% !important;
    min-width: 0 !important;
}

.sp-cpc-section--social .sp-cpc-swiper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sp-cpc-section--social .sp-cpc-swiper .swiper-wrapper {
    align-items: stretch !important;
}

.sp-cpc-section--social .sp-cpc-slide {
    height: auto !important;
}

.sp-cpc-section--social .sp-cpc-card {
    height: 100% !important;
    min-height: 100% !important;
    transform-origin: center 72% !important;
}

/* desktop: run the spread animation when this snap section becomes active */
@media (min-width: 768px) {
    .sp-scroll-deck.is-scroll-ready .sp-cpc-section--social .sp-spc-card {
        opacity: 0;
        transform: translate3d(54px, 22px, 0) scale(0.90) rotate(var(--spc-rotate, 2deg));
        filter: blur(8px);
        animation: none !important;
    }

    .sp-scroll-deck.is-scroll-ready .sp-cpc-section--social.is-scroll-current .sp-spc-card {
        animation: spSpcCardSpreadIn 720ms cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
    }
}

/* mobile: no hidden/offscreen state; keep it simple and readable */
@media (max-width: 767px) {
    .sp-cpc-section--social .sp-spc-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: spCpcCardIn 520ms cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
    }
}

@keyframes spSpcCardSpreadIn {
    0% {
        opacity: 0;
        transform: translate3d(58px, 24px, 0) scale(0.88) rotate(var(--spc-rotate, 2deg));
        filter: blur(9px);
    }

    58% {
        opacity: 1;
        transform: translate3d(-4px, -2px, 0) scale(1.012) rotate(0deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

.sp-cpc-section--social .sp-cpc-card-media {
    background: #f7fbff !important;
}

.sp-cpc-section--social .sp-cpc-card-logo {
    background: rgba(255, 255, 255, 0.96) !important;
}

.sp-cpc-section--social .sp-cpc-card-price-main {
    color: var(--sp-color-primary) !important;
}

.sp-cpc-section--social .sp-cpc-visual {
    align-items: center !important;
}

.sp-cpc-section--social .sp-cpc-visual-card {
    align-items: center !important;
}

.sp-cpc-section--social .sp-cpc-visual-image {
    width: 88% !important;
    transform: translateY(0) rotate(-3deg) !important;
    filter: drop-shadow(0 22px 28px rgba(0, 66, 130, 0.16)) !important;
}

@media (max-width: 767px) {
    .sp-cpc-section--social .sp-cpc-shell {
        grid-template-columns: minmax(0, 1fr) 54px !important;
        min-height: 246px !important;
        padding: 10px 8px !important;
        border-radius: 20px !important;
    }

    .sp-cpc-section--social .sp-cpc-content {
        display: flex !important;
        align-items: stretch !important;
    }

    .sp-cpc-section--social .sp-cpc-visual-image {
        width: 100% !important;
        transform: translateY(4px) rotate(-3deg) !important;
    }
}


/* =========================================================
  SECTION: VOUCHER CAROUSEL
========================================================= */

.sp-vch-section {
    position: relative;
    padding-inline: 18px;
}

.sp-vch-inner {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.sp-vch-head {
    margin-bottom: 16px;
    text-align: center;
}

.sp-vch-eyebrow {
    margin: 0 0 4px;
    color: var(--sp-color-primary);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.5;
}

.sp-vch-title {
    margin: 0 0 6px;
    color: #101828;
    font-size: clamp(27px, 3vw, 44px);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.sp-vch-desc {
    max-width: 560px;
    margin: 0 auto;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}

.sp-vch-shell {
    position: relative;
    padding: 22px 58px 24px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.78), transparent 28%),
        radial-gradient(circle at 86% 78%, rgba(var(--sp-color-primary-rgb), 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(240, 248, 255, 0.56));
    box-shadow:
        0 20px 56px rgba(0, 80, 170, 0.07),
        inset 0 0 0 1px rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    isolation: isolate;
}

.sp-vch-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(var(--sp-color-primary-rgb), 0.06), transparent 38%, rgba(var(--sp-color-primary-rgb), 0.08)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 52%);
}

.sp-vch-swiper {
    width: 100%;
    overflow: hidden;
    padding: 2px 2px 8px;
}

.sp-vch-slide {
    height: auto;
    display: flex;
}

.sp-vch-card {
    position: relative;
    width: 100%;
    min-height: 245px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 16px 38px rgba(0, 80, 170, 0.055),
        inset 0 0 0 1px rgba(16, 24, 40, 0.045);
    transform: translateY(18px) scale(0.985);
    opacity: 0;
    animation: spVchCardIn 620ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;
}

.sp-vch-card:hover {
    transform: translateY(-4px) scale(1.008);
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 22px 46px rgba(0, 80, 170, 0.075),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.08);
}

.sp-vch-card-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.sp-vch-logo {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8fbff;
    box-shadow:
        0 10px 22px rgba(0, 80, 170, 0.06),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.07);
}

.sp-vch-logo img {
    width: 74%;
    height: 74%;
    object-fit: contain;
}

.sp-vch-merchant {
    min-width: 0;
}

.sp-vch-merchant h3 {
    margin: 0 0 5px;
    color: #101828;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-vch-merchant p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-vch-channel {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: var(--sp-color-primary);
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
}

.sp-vch-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 94px;
    margin-top: auto;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(241, 246, 255, 0.94);
    box-shadow: inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.045);
}

.sp-vch-offer-copy {
    min-width: 0;
}

.sp-vch-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin-bottom: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(127, 86, 217, 0.10);
    color: #7c3aed;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.2;
}

.sp-vch-offer h4 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.35;
}

.sp-vch-offer p {
    margin: 0;
    color: #475467;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.65;
}

.sp-vch-copy-btn,
.sp-vch-shop-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.sp-vch-copy-btn {
    min-width: 112px;
    min-height: 44px;
    padding: 10px 18px;
    background: var(--sp-color-primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(var(--sp-color-primary-rgb), 0.20);
}

.sp-vch-copy-btn:hover,
.sp-vch-shop-link:hover {
    transform: translateY(-2px);
}

.sp-vch-copy-btn.is-copied {
    background: #12b76a;
    box-shadow: 0 12px 26px rgba(18, 183, 106, 0.20);
}

.sp-vch-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sp-vch-code {
    direction: ltr;
    max-width: 46%;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(16, 24, 40, 0.045);
    color: #101828;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-vch-shop-link {
    min-height: 34px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--sp-color-primary);
    font-size: 11px;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.12);
}

.sp-vch-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--sp-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.sp-vch-nav:hover {
    transform: translateY(-50%) scale(1.04);
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.13),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.10);
}

.sp-vch-nav.swiper-button-disabled {
    opacity: 0.38;
    pointer-events: none;
}

.sp-vch-nav--next {
    left: 12px;
}

.sp-vch-nav--prev {
    right: 12px;
}

.sp-vch-loading {
    min-height: 160px;
    display: grid;
    place-items: center;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

@keyframes spVchCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 991px) {
    .sp-vch-shell {
        padding-inline: 48px;
        border-radius: 28px;
    }

    .sp-vch-card {}
}

@media (max-width: 767px) {
    .sp-vch-section {
        padding-inline: 12px;
    }

    .sp-vch-head {
        margin-bottom: 10px;
    }

    .sp-vch-eyebrow {
        font-size: 10px;
    }

    .sp-vch-title {
        font-size: 22px;
        line-height: 1.2;
    }

    .sp-vch-desc {
        max-width: 310px;
        font-size: 10.5px;
        line-height: 1.7;
    }

    .sp-vch-shell {
        padding: 14px 10px 16px;
        border-radius: 22px;
    }

    .sp-vch-swiper {
        padding: 0 0 4px;
    }

    .sp-vch-card {
        padding: 13px;
        border-radius: 18px;
        gap: 12px;
    }

    .sp-vch-card-head {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 9px;
    }

    .sp-vch-logo {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .sp-vch-merchant h3 {
        font-size: 14px;
    }

    .sp-vch-merchant p,
    .sp-vch-channel {
        font-size: 9.5px;
    }

    .sp-vch-channel {
        min-height: 24px;
        padding: 4px 8px;
    }

    .sp-vch-offer {
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: auto;
        padding: 12px;
        border-radius: 16px;
    }

    .sp-vch-badge {
        min-height: 22px;
        margin-bottom: 6px;
        padding: 3px 8px;
        font-size: 9px;
    }

    .sp-vch-offer h4 {
        font-size: 15px;
        line-height: 1.4;
    }

    .sp-vch-offer p {
        font-size: 11px;
        line-height: 1.6;
    }

    .sp-vch-copy-btn {
        width: 100%;
        min-height: 38px;
        font-size: 11px;
    }

    .sp-vch-code {
        max-width: 52%;
        min-height: 30px;
        font-size: 10.5px;
    }

    .sp-vch-shop-link {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 10px;
    }

    .sp-vch-nav {
        display: none;
    }
}

/* =========================================================
  VOUCHER CAROUSEL - COMPACT MINIMAL OVERRIDE
  scoped only to sp-vch, keeps user HTML changes safer
========================================================= */

.sp-vch-section {
    padding-inline: 18px !important;
}

.sp-vch-inner {
    width: min(100%, 1160px) !important;
}

.sp-vch-head {
    margin-bottom: 10px !important;
}

.sp-vch-eyebrow {
    margin-bottom: 2px !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
}

.sp-vch-title {
    margin-bottom: 3px !important;
    font-size: clamp(22px, 2.4vw, 34px) !important;
    line-height: 1.12 !important;
}

.sp-vch-desc {
    max-width: 460px !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
}

.sp-vch-shell {
    padding: 16px 48px 18px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.66), transparent 28%),
        radial-gradient(circle at 84% 78%, rgba(var(--sp-color-primary-rgb), 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(239, 247, 255, 0.46)) !important;
    box-shadow:
        0 14px 38px rgba(0, 80, 170, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.62) !important;
}

.sp-vch-swiper {
    padding: 0 2px 4px !important;
}

.sp-vch-card {
    min-height: 178px !important;
    gap: 10px !important;
    padding: 13px 14px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow:
        0 10px 26px rgba(0, 80, 170, 0.04),
        inset 0 0 0 1px rgba(16, 24, 40, 0.04) !important;
}

.sp-vch-card:hover {
    transform: translateY(-2px) scale(1.003) !important;
    box-shadow:
        0 14px 30px rgba(0, 80, 170, 0.055),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.07) !important;
}

.sp-vch-card-head {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 46px !important;
}

.sp-vch-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
    box-shadow:
        0 8px 18px rgba(0, 80, 170, 0.05),
        inset 0 0 0 1px rgba(var(--sp-color-primary-rgb), 0.06) !important;
}

.sp-vch-logo img {
    width: 72% !important;
    height: 72% !important;
}

.sp-vch-merchant h3 {
    margin-bottom: 3px !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
}

.sp-vch-merchant p {
    gap: 5px !important;
    font-size: 9.5px !important;
    line-height: 1.45 !important;
}

/* فقط یک آنلاین داخل meta بماند؛ chip اضافه حذف شود */
.sp-vch-channel,
.sp-vch-badge {
    display: none !important;
}

.sp-vch-offer {
    min-height: 68px !important;
    margin-top: 0 !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 17px !important;
    background: rgba(241, 246, 255, 0.82) !important;
}

.sp-vch-offer h4 {
    margin-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.sp-vch-offer p {
    font-size: 10px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
}

.sp-vch-copy-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-color-primary);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(var(--sp-color-primary-rgb), 0.18);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.sp-vch-copy-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(var(--sp-color-primary-rgb), 0.24);
}

.sp-vch-copy-icon.is-copied {
    background: #12b76a;
    box-shadow: 0 10px 22px rgba(18, 183, 106, 0.18);
}

.sp-vch-copy-svg {
    width: 17px;
    height: 17px;
    display: block;
}

.sp-vch-copy-svg--check {
    display: none;
}

.sp-vch-copy-icon.is-copied .sp-vch-copy-svg--copy {
    display: none;
}

.sp-vch-copy-icon.is-copied .sp-vch-copy-svg--check {
    display: block;
}

.sp-vch-card-footer {
    gap: 8px !important;
}

.sp-vch-code {
    max-width: 46% !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 10.5px !important;
    background: rgba(16, 24, 40, 0.04) !important;
}

.sp-vch-shop-link {
    min-height: 30px !important;
    padding: 6px 11px !important;
    font-size: 10px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

.sp-vch-nav {
    width: 34px !important;
    height: 34px !important;
}

.sp-vch-nav--next {
    left: 9px !important;
}

.sp-vch-nav--prev {
    right: 9px !important;
}

@media (max-width: 991px) {
    .sp-vch-shell {
        padding-inline: 42px !important;
        border-radius: 24px !important;
    }

    .sp-vch-card {
        min-height: 170px !important;
    }
}

@media (max-width: 767px) {
    .sp-vch-section {
        padding-inline: 12px !important;
    }

    .sp-vch-head {
        margin-bottom: 8px !important;
    }

    .sp-vch-title {
        font-size: 19px !important;
    }

    .sp-vch-desc {
        font-size: 10px !important;
        line-height: 1.55 !important;
    }

    .sp-vch-shell {
        padding: 12px 10px 13px !important;
        border-radius: 20px !important;
    }

    .sp-vch-card {
        min-height: 158px !important;
        padding: 11px !important;
        border-radius: 17px !important;
        gap: 8px !important;
    }

    .sp-vch-card-head {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 40px !important;
    }

    .sp-vch-logo {
        width: 38px !important;
        height: 38px !important;
        border-radius: 13px !important;
    }

    .sp-vch-merchant h3 {
        font-size: 12.5px !important;
    }

    .sp-vch-merchant p {
        font-size: 9px !important;
    }

    .sp-vch-offer {
        min-height: 58px !important;
        grid-template-columns: minmax(0, 1fr) 34px !important;
        gap: 8px !important;
        padding: 9px 10px !important;
        border-radius: 15px !important;
    }

    .sp-vch-offer h4 {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    .sp-vch-offer p {
        font-size: 9.5px !important;
        line-height: 1.45 !important;
    }

    .sp-vch-copy-icon {
        width: 34px;
        height: 34px;
    }

    .sp-vch-copy-svg {
        width: 15px;
        height: 15px;
    }

    .sp-vch-code {
        max-width: 44% !important;
        min-height: 26px !important;
        padding: 4px 8px !important;
        font-size: 9.5px !important;
    }

    .sp-vch-shop-link {
        min-height: 28px !important;
        padding: 5px 9px !important;
        font-size: 9.5px !important;
    }
}

/* =========================================================
  GLOBAL RESPONSIVE POLISH V1
  final spacing, typography, section motion, and menu order polish
========================================================= */

:root {
    --sp-section-title-desktop: 36px;
    --sp-section-title-mobile: 20px;
    --sp-text-line-height: 1.6;
}

/* ---------- Menu polish ---------- */

@media (min-width: 768px) {
    :root {
        --sp-menu-max-width: 1160px;
        --sp-menu-logo-space: 118px;
    }

    .sp-menu {
        min-height: 60px !important;
        padding: 9px 12px !important;
    }

    .sp-menu-list {
        gap: 4px !important;
        padding-inline-start: 12px !important;
        padding-inline-end: var(--sp-menu-logo-space) !important;
    }

    .sp-menu-link {
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        font-weight: 800 !important;
    }
}

@media (max-width: 767px) {
    .sp-menu-list {
        gap: 3px !important;
        padding: 7px !important;
    }

    .sp-menu-link {
        min-height: 40px !important;
        padding: 9px 12px !important;
        font-size: 12px !important;
        line-height: var(--sp-text-line-height) !important;
        border-radius: 16px !important;
    }
}


/* ---------- Section spacing + clean motion ---------- */

@media (min-width: 768px) {
    .sp-sticky-section {
        padding-top: max(94px, 8vh) !important;
        padding-bottom: max(38px, 5vh) !important;
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-eme-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-mps-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-vch-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-bl-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cd-inner {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.985);
        filter: blur(5px);
        transition:
            opacity 620ms ease,
            transform 720ms cubic-bezier(0.19, 1, 0.22, 1),
            filter 620ms ease;
        will-change: transform, opacity, filter;
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-eme-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-mps-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-vch-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-bl-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-cd-inner {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-eme-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-mps-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-vch-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-bl-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-cd-inner {
        opacity: 0;
        transform: translate3d(0, -30px, 0) scale(0.985);
        filter: blur(6px);
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-eme-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-mps-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-vch-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-bl-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-cd-inner {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.985);
        filter: blur(6px);
    }
}

@media (max-width: 767px) {
    .sp-sticky-section {
        padding: 22px 12px 30px !important;
        scroll-margin-top: 82px;
    }

    .sp-sticky-section.sp-hero-section {
        padding-top: 88px !important;
        padding-bottom: 22px !important;
    }

    .sp-sticky-section.sp-cpc-section,
    .sp-sticky-section.sp-mps-section,
    .sp-sticky-section.sp-vch-section,
    .sp-sticky-section.sp-eme-section,
    .sp-sticky-section.sp-bl-section,
    .sp-sticky-section.sp-cd-section {
        padding-top: 22px !important;
        padding-bottom: 30px !important;
    }

    .sp-sticky-section.sp-cpc-section--more {
        padding-top: 22px !important;
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-eme-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-mps-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-vch-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-bl-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-cd-inner {
        animation: spMobileSectionSoftIn 520ms cubic-bezier(0.19, 1, 0.22, 1) both;
    }
}

@keyframes spMobileSectionSoftIn {
    from {
        opacity: 0.72;
        transform: translateY(16px) scale(0.992);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* ---------- Shared typography ---------- */

.sp-cpc-section-title,
.sp-eme-title,
.sp-mps-title,
.sp-bl-title,
.sp-vch-title,
.sp-cd-title {
    font-size: 23px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.035em !important;
}

.sp-cpc-card-title,
.sp-cpc-card-merchant,
.sp-cpc-card-current,
.sp-cpc-card-old,
.sp-mps-desc,
.sp-mps-merchant-category,
.sp-mps-product-name,
.sp-mps-price-current,
.sp-eme-desc,
.sp-eme-active-desc,
.sp-bl-desc,
.sp-bl-product-copy small,
.sp-bl-result span,
.sp-vch-desc,
.sp-vch-merchant p,
.sp-vch-offer p,
.sp-cd-label {
    line-height: var(--sp-text-line-height) !important;
}

.sp-mps-eyebrow,
.sp-eme-eyebrow,
.sp-bl-eyebrow,
.sp-vch-eyebrow {
    line-height: 1.45 !important;
}

@media (max-width: 767px) {

    .sp-cpc-section-title,
    .sp-eme-title,
    .sp-mps-title,
    .sp-bl-title,
    .sp-vch-title,
    .sp-cd-title {
        font-size: var(--sp-section-title-mobile) !important;
        line-height: 1.35 !important;
        letter-spacing: -0.025em !important;
    }

    .sp-cpc-section-head,
    .sp-mps-head,
    .sp-vch-head,
    .sp-bl-head,
    .sp-eme-head {
        margin-bottom: 8px !important;
    }

    .sp-mps-desc,
    .sp-eme-desc,
    .sp-bl-desc,
    .sp-vch-desc {
        font-size: 10.5px !important;
        line-height: var(--sp-text-line-height) !important;
        max-width: 310px !important;
    }

    .sp-mps-eyebrow,
    .sp-eme-eyebrow,
    .sp-bl-eyebrow,
    .sp-vch-eyebrow {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }
}


/* ---------- Mobile component cleanup ---------- */

@media (max-width: 767px) {

    /* Product carousels */
    .sp-cpc-shell {
        min-height: 238px !important;
        padding: 10px 8px !important;
        border-radius: 20px !important;
        gap: 6px !important;
    }

    .sp-cpc-card {
        min-height: 200px !important;
    }

    .sp-cpc-card-title {
        font-size: 10px !important;
        line-height: 1.55 !important;
    }

    .sp-cpc-card-merchant {
        font-size: 9px !important;
        line-height: 1.45 !important;
    }

    .sp-cpc-card-current {
        font-size: 9.5px !important;
    }

    /* Countdown */
    .sp-cd-shell {
        gap: 10px !important;
        padding: 14px 12px !important;
        border-radius: 22px !important;
    }

    .sp-cd-title {
        font-size: 19px !important;
    }

    .sp-cd-visual {
        width: 112px !important;
        border-radius: 18px !important;
    }

    .sp-cd-unit {
        min-height: 58px !important;
        padding: 8px 5px !important;
        border-radius: 15px !important;
    }

    .sp-cd-value {
        font-size: 21px !important;
    }

    .sp-cd-label {
        font-size: 8.5px !important;
    }

    /* Bank loan */
    .sp-bl-shell {
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 22px !important;
    }

    .sp-bl-products {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 1px 1px 4px !important;
        scrollbar-width: none;
    }

    .sp-bl-products::-webkit-scrollbar {
        display: none;
    }

    .sp-bl-product {
        flex: 0 0 136px !important;
        min-height: 46px !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        padding: 6px 7px !important;
        border-radius: 14px !important;
    }

    .sp-bl-product-img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }

    .sp-bl-product-copy strong {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .sp-bl-product-copy small {
        font-size: 8px !important;
        line-height: 1.45 !important;
    }

    .sp-bl-stage {
        min-height: 218px !important;
    }

    .sp-bl-selected-product {
        width: min(68%, 190px) !important;
        border-radius: 24px !important;
    }

    .sp-bl-amount-pill {
        min-width: 172px !important;
        padding: 7px 12px !important;
        bottom: 4px !important;
    }

    .sp-bl-amount-pill span {
        font-size: 9px !important;
    }

    .sp-bl-amount-pill strong {
        font-size: 12px !important;
    }

    .sp-bl-card {
        padding: 13px 12px !important;
        border-radius: 20px !important;
        gap: 9px !important;
    }

    .sp-bl-card h3 {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .sp-bl-card-kicker {
        font-size: 10px !important;
    }

    .sp-bl-term-toggle button {
        min-height: 30px !important;
        font-size: 10px !important;
    }

    .sp-bl-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .sp-bl-result--main {
        grid-column: span 2 !important;
    }

    .sp-bl-result {
        min-height: 58px !important;
        padding: 8px !important;
        border-radius: 15px !important;
    }

    .sp-bl-result strong {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .sp-bl-result--main strong {
        font-size: 15px !important;
    }

    .sp-bl-cta {
        min-height: 36px !important;
        font-size: 10.5px !important;
    }

    /* Explore merchants */
    .sp-eme-canvas {
        min-height: 320px !important;
    }

    .sp-eme-panel {
        margin-top: 8px !important;
    }

    /* MPS */
    .sp-mps-stage {
        min-height: 204px !important;
        padding-inline: 26px !important;
    }

    .sp-mps-product-visual {
        width: 154px !important;
        height: 154px !important;
        min-height: 154px !important;
        padding: 10px !important;
        border-radius: 22px !important;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        padding: 10px !important;
        border-radius: 17px !important;
    }

    .sp-mps-product-name {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .sp-mps-price-current {
        font-size: 14.5px !important;
    }

    /* Vouchers */
    .sp-vch-shell {
        padding: 11px 9px 12px !important;
        border-radius: 20px !important;
    }

    .sp-vch-card {
        min-height: 150px !important;
        padding: 10px !important;
        border-radius: 16px !important;
        gap: 7px !important;
    }

    .sp-vch-card-head {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        min-height: 38px !important;
        gap: 8px !important;
    }

    .sp-vch-logo {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }

    .sp-vch-merchant h3 {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .sp-vch-merchant p {
        font-size: 8.8px !important;
        line-height: 1.5 !important;
    }

    .sp-vch-offer {
        min-height: 54px !important;
        grid-template-columns: minmax(0, 1fr) 32px !important;
        padding: 8px 9px !important;
        border-radius: 14px !important;
    }

    .sp-vch-offer h4 {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    .sp-vch-offer p {
        font-size: 9px !important;
        line-height: 1.5 !important;
    }

    .sp-vch-copy-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .sp-vch-card-footer {
        gap: 6px !important;
    }

    .sp-vch-code {
        min-height: 25px !important;
        font-size: 9px !important;
    }

    .sp-vch-shop-link {
        min-height: 26px !important;
        font-size: 9px !important;
    }
}

/* =========================================================
  FINAL FIX: SIMPLE VIEWPORT MOTION + DESKTOP-ONLY SNAP
  - No section gets hidden by sticky state anymore.
  - Each selected element enters when it is visible and exits when leaving.
========================================================= */

@media (max-width: 1023px) {
    html {
        scroll-snap-type: none !important;
        overscroll-behavior-y: auto !important;
    }

    .sp-sticky-section {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sp-sticky-section {
        min-height: auto !important;
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        overflow: visible !important;
        padding: 44px 14px 56px !important;
    }

    .sp-sticky-section.sp-hero-section {
        padding-top: 98px !important;
    }
}

@media (min-width: 1024px) {
    html {
        scroll-snap-type: y proximity !important;
        scroll-behavior: smooth;
        overscroll-behavior-y: contain;
    }

    .sp-sticky-section {
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
    }
}

/* Stop the old full-section blur system from blanking the page. */
.sp-scroll-deck.is-scroll-ready .sp-sticky-section>[data-section-inner],
.sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cpc-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-eme-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-mps-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-vch-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-bl-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cd-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>[data-section-inner],
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-cpc-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-eme-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-mps-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-vch-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-bl-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-current>.sp-cd-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>[data-section-inner],
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-cpc-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-eme-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-mps-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-vch-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-bl-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-cd-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>[data-section-inner],
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-cpc-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-eme-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-mps-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-vch-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-bl-inner,
.sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-cd-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

.sp-motion-item {
    --sp-motion-y: 28px;
    opacity: 0;
    transform: translate3d(0, var(--sp-motion-y), 0) scale(0.986);
    filter: blur(10px);
    transition-property: opacity, transform, filter;
    transition-duration: 680ms, 820ms, 720ms;
    transition-timing-function: ease, cubic-bezier(0.19, 1, 0.22, 1), ease;
    transition-delay: var(--sp-motion-delay, 0ms);
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}

.sp-motion-item.is-motion-out-up {
    --sp-motion-y: -28px;
}

.sp-motion-item.is-motion-out-down {
    --sp-motion-y: 28px;
}

.sp-motion-item.is-motion-entered {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.sp-motion-item.is-motion-exiting {
    opacity: 0;
    filter: blur(9px);
    transition-duration: 360ms, 460ms, 420ms;
    transition-delay: 0ms !important;
}

.sp-motion-item.is-motion-exiting.is-motion-out-up {
    transform: translate3d(0, -24px, 0) scale(0.986);
}

.sp-motion-item.is-motion-exiting.is-motion-out-down {
    transform: translate3d(0, 24px, 0) scale(0.986);
}

/* Countdown: slightly more cinematic, but still minimal. */
.sp-cd-unit.sp-motion-item {
    filter: blur(12px) saturate(0.96);
}

.sp-cd-unit.sp-motion-item.is-motion-entered {
    filter: blur(0) saturate(1);
}

.sp-cd-visual.sp-motion-item,
.sp-vch-shell.sp-motion-item,
.sp-bl-card.sp-motion-item {
    transform: translate3d(0, var(--sp-motion-y), 0) scale(0.976);
}

.sp-cd-visual.sp-motion-item.is-motion-entered,
.sp-vch-shell.sp-motion-item.is-motion-entered,
.sp-bl-card.sp-motion-item.is-motion-entered {
    transform: translate3d(0, 0, 0) scale(1);
}

/* Persian merchant name under explore merchant logos. */
.sp-eme-merchant-card {
    flex-direction: column;
    gap: 7px;
    text-align: center;
}

.sp-eme-merchant-name {
    display: block;
    max-width: 100%;
    color: #344054;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .sp-motion-item {
        --sp-motion-y: 18px;
        filter: blur(7px);
        transition-duration: 540ms, 620ms, 560ms;
    }

    .sp-motion-item.is-motion-out-up {
        --sp-motion-y: -18px;
    }

    .sp-motion-item.is-motion-exiting.is-motion-out-up {
        transform: translate3d(0, -16px, 0) scale(0.99);
    }

    .sp-motion-item.is-motion-exiting.is-motion-out-down {
        transform: translate3d(0, 16px, 0) scale(0.99);
    }

    .sp-eme-merchant-name {
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sp-motion-item,
    .sp-motion-item.is-motion-entered,
    .sp-motion-item.is-motion-exiting {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* =========================================================
  MOBILE / IOS PERFORMANCE FIX
  iPhone Safari is very sensitive to blur(), backdrop-filter,
  repeated IntersectionObserver exits and video scrubbing.
  Keep the visual minimal, but make mobile motion lightweight.
========================================================= */
@media (max-width: 767px) {
    html {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }

    .sp-section:not(.sp-hero-section) {
        content-visibility: auto;
        contain-intrinsic-size: 720px;
    }

    body[data-motion-performance="lite"] .sp-motion-item {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(1) !important;
        filter: none !important;
        transition-property: opacity, transform !important;
        transition-duration: 320ms, 420ms !important;
        transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1) !important;
        transition-delay: var(--sp-motion-delay, 0ms) !important;
        will-change: auto !important;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
    }

    body[data-motion-performance="lite"] .sp-motion-item.is-motion-entered,
    body[data-motion-performance="lite"] .sp-motion-item.is-motion-exiting {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        filter: none !important;
    }

    body[data-motion-performance="lite"] .sp-menu,
    body[data-motion-performance="lite"] .sp-eme-panel,
    body[data-motion-performance="lite"] .sp-mps-shell,
    body[data-motion-performance="lite"] .sp-mps-product-card,
    body[data-motion-performance="lite"] .sp-mps-side-card,
    body[data-motion-performance="lite"] .sp-bl-shell,
    body[data-motion-performance="lite"] .sp-bl-card,
    body[data-motion-performance="lite"] .sp-vch-shell,
    body[data-motion-performance="lite"] .sp-cd-shell,
    body[data-motion-performance="lite"] .sp-cpc-filter-btn,
    body[data-motion-performance="lite"] .sp-mps-nav,
    body[data-motion-performance="lite"] .sp-bl-term-toggle,
    body[data-motion-performance="lite"] .sp-bl-caption {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body[data-motion-performance="lite"] .sp-menu-orbit-glow,
    body[data-motion-performance="lite"] .sp-hero-scene-glow,
    body[data-motion-performance="lite"] .sp-cpc-visual-image,
    body[data-motion-performance="lite"] .sp-mps-shell::before,
    body[data-motion-performance="lite"] .sp-mps-stage::before,
    body[data-motion-performance="lite"] .sp-bl-shell::before,
    body[data-motion-performance="lite"] .sp-bl-orbit,
    body[data-motion-performance="lite"] .sp-bl-selected-product img,
    body[data-motion-performance="lite"] .sp-bl-product-img img {
        filter: none !important;
    }

    body[data-motion-performance="lite"] .sp-mps-shell::before,
    body[data-motion-performance="lite"] .sp-mps-stage::before,
    body[data-motion-performance="lite"] .sp-bl-shell::before,
    body[data-motion-performance="lite"] .sp-bl-orbit {
        opacity: 0.34 !important;
    }

    body[data-motion-performance="lite"] .sp-cd-video {
        display: none !important;
    }

    body[data-motion-performance="lite"] .sp-mps-slide,
    body[data-motion-performance="lite"] .sp-mps-slide.swiper-slide-next,
    body[data-motion-performance="lite"] .sp-mps-slide.swiper-slide-prev,
    body[data-motion-performance="lite"] .sp-mps-slide.swiper-slide-active {
        filter: none !important;
        transition-property: opacity, transform !important;
        transition-duration: 280ms !important;
    }

    body[data-motion-performance="lite"] .sp-cpc-card,
    body[data-motion-performance="lite"] .sp-spc-card,
    body[data-motion-performance="lite"] .sp-vch-card,
    body[data-motion-performance="lite"] .sp-bl-product,
    body[data-motion-performance="lite"] .sp-mps-tab,
    body[data-motion-performance="lite"] .sp-eme-merchant-card {
        animation: none !important;
        filter: none !important;
    }

    body[data-motion-performance="lite"] .sp-cpc-section--social .sp-spc-card,
    body[data-motion-performance="lite"] .sp-scroll-deck.is-scroll-ready .sp-cpc-section--social .sp-spc-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        body[data-motion-performance="lite"] * {
            -webkit-backface-visibility: hidden;
        }
    }
}


/* =========================================================
  MOBILE HERO SWIPE + CSV LAZY LOAD HELPERS
========================================================= */
.sp-hero-section,
.sp-hero-inner {
    touch-action: pan-y;
}

[data-module-lazy="pending"] .swiper-wrapper:empty::before,
[data-module-lazy="pending"] [data-eme-items]:empty::before,
[data-module-lazy="pending"] [data-mps-wrapper]:empty::before,
[data-module-lazy="pending"] [data-vch-wrapper]:empty::before {
    content: "";
    display: block;
    min-height: 1px;
}

/* =========================================================
  MOBILE PRODUCT/VOUCHER VISIBILITY FIX
  In lite mode we disabled card keyframe animations for iOS performance.
  The base cards start with opacity:0 and relied on those animations to
  become visible. Keep lazy-loading/performance intact, but force only the
  already-rendered mobile cards to paint normally.
========================================================= */
@media (max-width: 767px) {

    body[data-motion-performance="lite"] .sp-cpc-card,
    body[data-motion-performance="lite"] .sp-vch-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        filter: none !important;
        animation: none !important;
        will-change: auto !important;
    }

    body[data-motion-performance="lite"] .sp-cpc-slide,
    body[data-motion-performance="lite"] .sp-vch-slide,
    body[data-motion-performance="lite"] .sp-cpc-card-media,
    body[data-motion-performance="lite"] .sp-cpc-card-image,
    body[data-motion-performance="lite"] .sp-vch-logo img {
        opacity: 1 !important;
        visibility: visible !important;
    }
}



/* =========================================================
  COMPACT MINIMAL PASS - 2026-06-28
  هدف: خروج دسکتاپ از فولد کامل، استانداردسازی فاصله/تایپوگرافی فارسی
  و کاهش هزینه رندر در موبایل بدون تغییر دیتای سکشن‌ها.
========================================================= */

:root {
    --sp-compact-section-y: clamp(42px, 5vw, 68px);
    --sp-compact-section-y-tight: clamp(30px, 4vw, 52px);
    --sp-compact-title: clamp(21px, 2vw, 30px);
    --sp-compact-desc: 13px;
    --sp-compact-radius: 22px;
    --sp-compact-line-title: 1.42;
    --sp-compact-line-body: 1.8;
}

html {
    scroll-padding-top: 92px !important;
}

body {
    font-size: 14px;
    line-height: var(--sp-compact-line-body);
}

.sp-section h1,
.sp-section h2,
.sp-section h3,
.sp-section p {
    text-wrap: pretty;
}

/* ---------- Desktop: normal compact scroll, no one-fold sections ---------- */
@media (min-width: 768px) {
    html {
        scroll-snap-type: none !important;
        overscroll-behavior-y: auto !important;
    }

    .sp-sticky-section {
        min-height: 0 !important;
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        padding: var(--sp-compact-section-y) 18px !important;
        overflow: visible !important;
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }

    .sp-sticky-section::before {
        display: none !important;
    }

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-eme-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-before>.sp-eme-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section.is-scroll-after>.sp-eme-inner {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .sp-motion-item,
    .sp-motion-item.is-motion-entered,
    .sp-motion-item.is-motion-exiting,
    .sp-motion-item.is-motion-out-up,
    .sp-motion-item.is-motion-out-down {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .sp-hero-section {
        min-height: 0 !important;
        padding: 200px 18px 54px !important;
    }

    .sp-hero-inner {
        width: min(100%, 1120px) !important;
        min-height: 0 !important;
        gap: clamp(22px, 3.2vw, 42px) !important;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    }

    .sp-hero-stage {
        width: min(100%, 420px) !important;
    }

    .sp-hero-scene-main {
        width: clamp(260px, 30vw, 390px) !important;
    }

    .sp-hero-progress-ring {
        width: min(82%, 390px) !important;
        box-shadow: none !important;
    }

    .sp-hero-scene-rings {
        width: min(66%, 320px) !important;
        opacity: 0.7 !important;
    }

    .sp-hero-scene-glow {
        width: min(70%, 340px) !important;
        opacity: 0.65 !important;
        filter: blur(8px) !important;
    }

    .sp-hero-content {
        min-height: 250px !important;
    }

    .sp-hero-title {
        max-width: 540px !important;
        font-size: clamp(28px, 3.15vw, 44px) !important;
        line-height: 1.6em !important;
        letter-spacing: -0.02em !important;
    }

    .sp-hero-desc {
        margin-top: 12px !important;
        font-size: 14px !important;
        line-height: 1.85 !important;
        font-weight: 600 !important;
    }

    .sp-hero-cta {
        min-height: 40px !important;
        margin-top: 18px !important;
        padding: 8px 20px !important;
        font-size: 13px !important;
        box-shadow: 0 10px 22px rgba(var(--sp-color-primary-rgb), 0.18) !important;
    }

    .sp-cpc-section,
    .sp-mps-section,
    .sp-eme-section,
    .sp-bl-section,
    .sp-vch-section,
    .sp-cd-section {
        padding-block: var(--sp-compact-section-y) !important;
    }

    .sp-cpc-section--more {
        padding-top: var(--sp-compact-section-y-tight) !important;
    }

    .sp-cpc-inner,
    .sp-mps-inner,
    .sp-eme-inner,
    .sp-bl-inner,
    .sp-vch-inner,
    .sp-cd-inner {
        width: min(100%, 1160px) !important;
        min-height: 0 !important;
    }

    .sp-cpc-section-head,
    .sp-mps-head,
    .sp-eme-head,
    .sp-bl-head,
    .sp-vch-head,
    .sp-cd-copy {
        margin-bottom: 14px !important;
    }

    .sp-cpc-section-title,
    .sp-mps-title,
    .sp-eme-title,
    .sp-bl-title,
    .sp-vch-title,
    .sp-cd-title {
        font-size: var(--sp-compact-title) !important;
        line-height: var(--sp-compact-line-title) !important;
        letter-spacing: -0.015em !important;
    }

    .sp-mps-desc,
    .sp-eme-desc,
    .sp-bl-desc,
    .sp-vch-desc,
    .sp-cd-label {
        font-size: var(--sp-compact-desc) !important;
        line-height: var(--sp-compact-line-body) !important;
    }

    .sp-cpc-shell {
        gap: 16px !important;
        padding: 20px 20px 22px !important;
        border-radius: 24px !important;
        box-shadow: 0 12px 28px rgba(0, 125, 250, 0.08) !important;
    }

    .sp-cpc-toolbar {
        margin-bottom: 12px !important;
    }

    .sp-cpc-filters {
        gap: 8px !important;
    }

    .sp-cpc-filter-btn {
        min-height: 32px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
    }

    .sp-cpc-card,
    .sp-spc-card,
    .sp-vch-card,
    .sp-eme-merchant-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }

    .sp-cpc-card {
        border-radius: 18px !important;
        padding: 5px !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
    }

    .sp-cpc-card:hover {
        transform: translateY(-2px) !important;
    }

    .sp-cpc-card-media {
        border-radius: 14px !important;
    }

    .sp-cpc-card-logo {
        width: 48px !important;
        height: 48px !important;
    }

    .sp-cpc-card-body {
        gap: 6px !important;
        padding: 9px 3px 2px !important;
    }

    .sp-cpc-card-merchant {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    .sp-cpc-card-title {
        min-height: calc(11.5px * 1.65 * 2) !important;
        max-height: calc(11.5px * 1.65 * 2) !important;
        font-size: 11.5px !important;
        line-height: 1.65 !important;
    }

    .sp-cpc-card-current {
        font-size: 12.5px !important;
    }

    .sp-cpc-visual-card {
        max-width: 190px !important;
    }

    .sp-cpc-visual-image {
        filter: drop-shadow(0 12px 18px rgba(0, 66, 130, 0.10)) !important;
    }

    .sp-product-nav {
        top: -50px !important;
        width: 36px !important;
        height: 36px !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    }

    .sp-mps-head {
        margin-bottom: 10px !important;
    }

    .sp-mps-tabs-wrap {
        margin-bottom: 10px !important;
    }

    .sp-mps-shell {
        --mps-panel-height: 250px !important;
        --mps-side-card-size: 196px !important;
        gap: 14px !important;
    }

    .sp-mps-stage {
        height: var(--mps-panel-height) !important;
        min-height: var(--mps-panel-height) !important;
        padding-inline: 40px !important;
    }

    .sp-mps-product-visual {
        width: 198px !important;
        height: 198px !important;
        min-height: 198px !important;
    }

    .sp-mps-merchant-card,
    .sp-mps-product-card {
        border-radius: 22px !important;
    }

    .sp-eme-shell {
        height: clamp(430px, 48vw, 540px) !important;
        min-height: 430px !important;
        border-radius: 28px !important;
    }

    .sp-eme-item-label {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }

    .sp-bl-shell {
        min-height: 0 !important;
        padding: 18px !important;
        border-radius: 26px !important;
    }

    .sp-bl-stage {
        min-height: 310px !important;
    }

    .sp-bl-card {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sp-vch-shell {
        padding: 18px !important;
        border-radius: 24px !important;
    }

    .sp-vch-card {
        min-height: 0 !important;
        border-radius: 20px !important;
    }
}

/* ---------- Mobile: lower vertical cost and lighter paint ---------- */
@media (max-width: 767px) {
    :root {
        --sp-compact-mobile-section-y: 18px;
    }

    html {
        scroll-padding-top: 78px !important;
    }

    .sp-sticky-section {
        padding-top: var(--sp-compact-mobile-section-y) !important;
        padding-bottom: 20px !important;
    }

    .sp-sticky-section.sp-hero-section {
        padding-top: 84px !important;
        padding-bottom: 14px !important;
    }

    .sp-hero-inner {
        gap: 4px !important;
    }

    .sp-hero-visual {
        min-height: 216px !important;
    }

    .sp-hero-stage {
        width: min(100%, 230px) !important;
    }

    .sp-hero-scene-main {
        width: clamp(168px, 53vw, 220px) !important;
    }

    .sp-hero-content {
        min-height: 216px !important;
    }

    .sp-hero-title {
        max-width: 350px !important;
        font-size: clamp(24px, 7.4vw, 31px) !important;
        line-height: 1.6em !important;
        letter-spacing: -0.02em !important;
    }

    .sp-hero-desc {
        margin-top: 8px !important;
        font-size: 11.5px !important;
        line-height: 1.75 !important;
    }

    .sp-hero-cta {
        min-height: 36px !important;
        margin-top: 12px !important;
        padding: 7px 16px !important;
        font-size: 11.5px !important;
    }

    .sp-hero-progress-ring,
    .sp-hero-scene-rings {
        display: none !important;
    }

    .sp-hero-scene-glow {
        opacity: 0.45 !important;
        filter: none !important;
    }

    .sp-cpc-section-head,
    .sp-mps-head,
    .sp-eme-head,
    .sp-bl-head,
    .sp-vch-head {
        margin-bottom: 7px !important;
    }

    .sp-cpc-section-title {
        font-size: 14.5px !important;
        line-height: 1.45 !important;
    }

    .sp-mps-title,
    .sp-eme-title,
    .sp-bl-title,
    .sp-vch-title {
        font-size: 20px !important;
        line-height: 1.35 !important;
        letter-spacing: -0.015em !important;
    }

    .sp-mps-desc,
    .sp-eme-desc,
    .sp-bl-desc,
    .sp-vch-desc {
        font-size: 10.5px !important;
        line-height: 1.7 !important;
    }

    .sp-cpc-shell {
        grid-template-columns: minmax(0, 1fr) 48px !important;
        min-height: 232px !important;
        padding: 9px 8px !important;
        border-radius: 18px !important;
    }

    .sp-cpc-card {
        min-height: 196px !important;
    }

    .sp-cpc-visual-card {
        max-width: 48px !important;
    }

    .sp-cpc-visual-image {
        max-height: 128px !important;
        filter: none !important;
    }

    .sp-mps-stage {
        height: 198px !important;
        min-height: 198px !important;
    }

    .sp-mps-product-visual {
        width: 154px !important;
        height: 154px !important;
        min-height: 154px !important;
    }

    .sp-eme-canvas {
        min-height: 320px !important;
    }

    .sp-bl-stage {
        min-height: 258px !important;
    }

    .sp-vch-card {
        min-height: 0 !important;
    }

    .sp-cpc-card,
    .sp-spc-card,
    .sp-vch-card,
    .sp-bl-product,
    .sp-mps-tab,
    .sp-eme-merchant-card {
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
        will-change: auto !important;
    }

    .sp-hero-scene.is-active .sp-hero-scene-main,
    .sp-hero-scene.is-active .sp-hero-scene-bubble--side {
        animation: none !important;
    }
}

/* =========================================================
  DESKTOP ENTER / EXIT MOTION - 2026-06-28
  compact scroll remains normal; this only restores section reveal/hide
  for desktop without bringing back 100vh snap sections.
========================================================= */
@media (min-width: 768px) {
    body[data-motion-performance="full"] .sp-motion-item {
        --sp-motion-y: 26px;
        opacity: 0 !important;
        transform: translate3d(0, var(--sp-motion-y), 0) scale(0.986) !important;
        filter: blur(7px) !important;
        transition-property: opacity, transform, filter !important;
        transition-duration: 560ms, 720ms, 620ms !important;
        transition-timing-function: ease, cubic-bezier(0.19, 1, 0.22, 1), ease !important;
        transition-delay: var(--sp-motion-delay, 0ms) !important;
        will-change: opacity, transform, filter !important;
        backface-visibility: hidden;
        pointer-events: none;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-out-up {
        --sp-motion-y: -26px;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-out-down {
        --sp-motion-y: 26px;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-entered {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        filter: blur(0) !important;
        pointer-events: auto;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-exiting {
        opacity: 0 !important;
        filter: blur(6px) !important;
        transition-duration: 260ms, 360ms, 320ms !important;
        transition-delay: 0ms !important;
        pointer-events: none;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-exiting.is-motion-out-up {
        transform: translate3d(0, -22px, 0) scale(0.988) !important;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-exiting.is-motion-out-down {
        transform: translate3d(0, 22px, 0) scale(0.988) !important;
    }

    /* Section-specific polish: keep it minimal and performance-safe. */
    body[data-motion-performance="full"] .sp-hero-visual.sp-motion-item {
        --sp-motion-y: 18px;
        transform: translate3d(-18px, var(--sp-motion-y), 0) scale(0.986) !important;
    }

    body[data-motion-performance="full"] .sp-hero-content.sp-motion-item {
        --sp-motion-y: 18px;
        transform: translate3d(18px, var(--sp-motion-y), 0) scale(0.986) !important;
    }

    body[data-motion-performance="full"] .sp-hero-visual.sp-motion-item.is-motion-entered,
    body[data-motion-performance="full"] .sp-hero-content.sp-motion-item.is-motion-entered {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }

    body[data-motion-performance="full"] .sp-cpc-visual.sp-motion-item,
    body[data-motion-performance="full"] .sp-bl-stage.sp-motion-item,
    body[data-motion-performance="full"] .sp-mps-stage.sp-motion-item {
        transform: translate3d(0, var(--sp-motion-y), 0) scale(0.976) !important;
    }

    body[data-motion-performance="full"] .sp-cpc-visual.sp-motion-item.is-motion-entered,
    body[data-motion-performance="full"] .sp-bl-stage.sp-motion-item.is-motion-entered,
    body[data-motion-performance="full"] .sp-mps-stage.sp-motion-item.is-motion-entered {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }

    body[data-motion-performance="full"] .sp-mps-side.sp-motion-item,
    body[data-motion-performance="full"] .sp-bl-card.sp-motion-item,
    body[data-motion-performance="full"] .sp-vch-shell.sp-motion-item,
    body[data-motion-performance="full"] .sp-eme-shell.sp-motion-item {
        transform: translate3d(0, var(--sp-motion-y), 0) scale(0.982) !important;
    }

    body[data-motion-performance="full"] .sp-mps-side.sp-motion-item.is-motion-entered,
    body[data-motion-performance="full"] .sp-bl-card.sp-motion-item.is-motion-entered,
    body[data-motion-performance="full"] .sp-vch-shell.sp-motion-item.is-motion-entered,
    body[data-motion-performance="full"] .sp-eme-shell.sp-motion-item.is-motion-entered {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    body[data-motion-performance="full"] .sp-motion-item,
    body[data-motion-performance="full"] .sp-motion-item.is-motion-entered,
    body[data-motion-performance="full"] .sp-motion-item.is-motion-exiting {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        pointer-events: auto !important;
        will-change: auto !important;
    }
}

/* =========================================================
  HERO MOBILE RING RESTORE - v20260628-hero-mobile-ring-01
  حلقه‌ی تایمر در موبایل برگشت، با فضای رزرو شده برای جلوگیری از پرش.
========================================================= */
@media (max-width: 767px) {
    .sp-hero-visual {
        min-height: 232px !important;
        contain: layout paint;
    }

    .sp-hero-stage {
        width: min(100%, 248px) !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 248px !important;
        contain: layout paint;
        transform: translateZ(0);
    }

    .sp-hero-scene {
        transform: translateZ(0) scale(0.985) !important;
        backface-visibility: hidden;
    }

    .sp-hero-scene.is-active {
        transform: translateZ(0) scale(1) !important;
    }

    .sp-hero-progress-ring,
    .sp-hero-scene-rings {
        display: block !important;
        visibility: visible !important;
        pointer-events: none !important;
    }

    .sp-hero-progress-ring {
        width: min(88%, 218px) !important;
        box-shadow: none !important;
        transform: translate(-50%, -50%) scale(1.015) !important;
        -webkit-mask:
            radial-gradient(farthest-side,
                transparent calc(100% - 10px),
                #000 calc(100% - 9px)) !important;
        mask:
            radial-gradient(farthest-side,
                transparent calc(100% - 10px),
                #000 calc(100% - 9px)) !important;
        will-change: transform, --sp-hero-progress;
    }

    .sp-hero-scene.is-active .sp-hero-progress-ring {
        animation: spHeroProgressFillMobile var(--sp-hero-hold-duration) linear forwards !important;
    }

    .sp-hero-scene:not(.is-active) .sp-hero-progress-ring {
        animation: none !important;
        --sp-hero-progress: 0deg;
    }

    .sp-hero-scene-rings {
        width: min(72%, 178px) !important;
        border-width: 1px !important;
        opacity: 0.72 !important;
    }

    .sp-hero-scene-rings::before,
    .sp-hero-scene-rings::after {
        border-width: 1px !important;
    }

    .sp-hero-scene-glow {
        width: min(78%, 210px) !important;
        opacity: 0.42 !important;
        filter: none !important;
    }

    .sp-hero-scene-main {
        width: clamp(174px, 54vw, 226px) !important;
        min-width: 174px;
        aspect-ratio: 450 / 746;
        object-fit: contain;
        transform: translate(-50%, -50%) scale(0.94) rotate(-2deg) translateZ(0) !important;
    }

    .sp-hero-scene.is-active .sp-hero-scene-main {
        transform: translate(-50%, -50%) scale(1) rotate(-2deg) translateZ(0) !important;
    }

    .sp-hero-scene-bubble {
        width: 42px !important;
        aspect-ratio: 1 / 1;
    }

    .sp-hero-content {
        min-height: 216px !important;
    }

    body[data-motion-performance="lite"] .sp-hero-progress-ring,
    body[data-motion-performance="lite"] .sp-hero-scene-rings {
        filter: none !important;
    }
}

@keyframes spHeroProgressFillMobile {
    0% {
        --sp-hero-progress: 0deg;
        transform: translate(-50%, -50%) scale(1.015);
    }

    100% {
        --sp-hero-progress: 360deg;
        transform: translate(-50%, -50%) scale(0.92);
    }
}


/* =========================================================
  MOBILE EXPLORE MERCHANT LOGO VISIBILITY FIX - 2026-06-28
  In mobile lite mode the card entrance animation is disabled for performance.
  Base explore merchant cards start from opacity:0, so force rendered cards visible.
========================================================= */
@media (max-width: 767px) {

    body[data-motion-performance="lite"] .sp-eme-panel:not([hidden]) .sp-eme-merchant-card,
    body[data-motion-performance="lite"] .sp-eme-panel:not([hidden]) .sp-eme-merchant-logo,
    body[data-motion-performance="lite"] .sp-eme-panel:not([hidden]) .sp-eme-merchant-logo img,
    body[data-motion-performance="lite"] .sp-eme-panel:not([hidden]) .sp-eme-merchant-name,
    body[data-motion-performance="lite"] .sp-eme-panel:not([hidden]) .sp-eme-merchant-fallback {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    body[data-motion-performance="lite"] .sp-eme-panel:not([hidden]) .sp-eme-merchant-card {
        display: flex !important;
        pointer-events: auto !important;
    }

    body[data-motion-performance="lite"] .sp-eme-panel:not([hidden]) .sp-eme-merchant-logo img {
        display: block !important;
    }
}

/* =========================================================
  FINAL REQUEST PATCH - 2026-06-29
  Hero mobile alignment, desktop-only section enter/exit,
  ice-category micro wiggle, and link nofollow support.
========================================================= */

.sp-hero-title span {
    display: block;
}

.sp-hero-desc--spacer {
    visibility: hidden;
}

@media (max-width: 767px) {
    .sp-sticky-section.sp-hero-section {
        min-height: auto !important;
        padding-top: max(82px, env(safe-area-inset-top, 0px) + 76px) !important;
        padding-bottom: 16px !important;
    }

    .sp-hero-inner {
        width: min(100%, 430px) !important;
        margin-inline: auto !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "visual"
            "content" !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 0 !important;
    }

    .sp-hero-visual {
        width: 100% !important;
        min-height: clamp(220px, 62vw, 292px) !important;
        display: grid !important;
        place-items: center !important;
        contain: layout paint;
    }

    .sp-hero-stage {
        width: clamp(224px, 66vw, 302px) !important;
        min-height: clamp(224px, 66vw, 302px) !important;
        aspect-ratio: 1 / 1 !important;
        margin-inline: auto !important;
    }

    .sp-hero-progress-ring {
        width: min(88%, 250px) !important;
    }

    .sp-hero-scene-rings {
        width: min(72%, 206px) !important;
    }

    .sp-hero-scene-main {
        inset: 64% auto auto 50% !important;
        width: clamp(176px, 54vw, 260px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 82px) !important;
        transform-origin: center center !important;
    }

    .sp-hero-scene-bubble {
        width: clamp(36px, 10vw, 48px) !important;
    }

    .sp-hero-scene-bubble--side {
        top: 62% !important;
        left: 8% !important;
    }

    .sp-hero-content {
        width: 100% !important;
        min-height: clamp(190px, 48vw, 224px) !important;
        display: grid !important;
        place-items: start center !important;
    }

    .sp-hero-copy {
        inset: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 4px !important;
        text-align: center !important;
    }

    .sp-hero-title {
        width: max-content !important;
        max-width: calc(100vw - 30px) !important;
        font-size: clamp(20px, 6.6vw, 28px) !important;
        line-height: 1.48 !important;
        letter-spacing: -0.018em !important;
        text-align: center !important;
    }

    .sp-hero-title span {
        display: block !important;
        white-space: nowrap !important;
    }

    .sp-hero-title br {
        display: none !important;
    }

    .sp-hero-desc {
        max-width: calc(100vw - 42px) !important;
        min-height: 22px !important;
        margin-top: 8px !important;
        font-size: clamp(10.5px, 3.1vw, 12.5px) !important;
        line-height: 1.75 !important;
        text-align: center !important;
    }

    .sp-hero-cta {
        min-height: 36px !important;
        margin-top: 12px !important;
        padding: 7px 17px !important;
        font-size: 11.5px !important;
    }

    .sp-hero-dots {
        right: 50% !important;
        bottom: 2px !important;
        transform: translateX(50%) !important;
    }
}

@media (max-width: 359px) {
    .sp-hero-visual {
        min-height: 210px !important;
    }

    .sp-hero-stage {
        width: 218px !important;
        min-height: 218px !important;
    }

    .sp-hero-scene-main {
        width: 170px !important;
        max-width: calc(100vw - 78px) !important;
    }

    .sp-hero-content {
        min-height: 184px !important;
    }

    .sp-hero-title {
        font-size: clamp(19px, 6.25vw, 22px) !important;
        line-height: 1.5 !important;
    }
}

@media (min-width: 431px) and (max-width: 767px) {
    .sp-hero-visual {
        min-height: 300px !important;
    }

    .sp-hero-stage {
        width: 312px !important;
        min-height: 312px !important;
    }

    .sp-hero-scene-main {
        width: 268px !important;
    }

    .sp-hero-content {
        min-height: 218px !important;
    }
}

/* Section entrance/exit: desktop only, minimal and light. */
@media (min-width: 768px) {
    body[data-motion-performance="full"] .sp-motion-item {
        --sp-motion-y: 16px;
        opacity: 0 !important;
        transform: translate3d(0, var(--sp-motion-y), 0) scale(0.992) !important;
        filter: blur(2px) !important;
        transition-duration: 420ms, 560ms, 420ms !important;
        transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1), ease !important;
        pointer-events: none;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-out-up {
        --sp-motion-y: -16px;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-entered {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        filter: blur(0) !important;
        pointer-events: auto;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-exiting {
        opacity: 0 !important;
        filter: blur(2px) !important;
        transition-duration: 220ms, 320ms, 220ms !important;
        transition-delay: 0ms !important;
        pointer-events: none;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-exiting.is-motion-out-up {
        transform: translate3d(0, -14px, 0) scale(0.992) !important;
    }

    body[data-motion-performance="full"] .sp-motion-item.is-motion-exiting.is-motion-out-down {
        transform: translate3d(0, 14px, 0) scale(0.992) !important;
    }
}

@media (max-width: 767px) {

    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>[data-section-inner],
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cpc-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-eme-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-mps-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-vch-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-bl-inner,
    .sp-scroll-deck.is-scroll-ready .sp-sticky-section>.sp-cd-inner,
    .sp-motion-item,
    .sp-motion-item.is-motion-entered,
    .sp-motion-item.is-motion-exiting {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}

/* Random, tiny, elegant wiggle for the ice-category visuals. */
.sp-eme-item-visual {
    transform-origin: center center;
    animation: spEmeIceMicroWiggle var(--eme-wiggle-duration, 5600ms) ease-in-out var(--eme-wiggle-delay, 0ms) infinite;
    will-change: transform;
}

.sp-eme-item:hover .sp-eme-item-visual {
    animation-play-state: paused;
    transform: translate3d(0, -2px, 0) rotate(0deg) scale(1.012);
    transition: transform 220ms ease;
}

.sp-eme-item.is-active .sp-eme-item-visual,
.sp-eme-item.is-dimmed .sp-eme-item-visual {
    animation: none !important;
    transform: none !important;
}

@keyframes spEmeIceMicroWiggle {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    34% {
        transform: translate3d(var(--eme-wiggle-x, 1px), var(--eme-wiggle-y, -1px), 0) rotate(var(--eme-wiggle-rotate, 0.7deg)) scale(1.004);
    }

    68% {
        transform: translate3d(calc(var(--eme-wiggle-x, 1px) * -0.55), calc(var(--eme-wiggle-y, -1px) * -0.55), 0) rotate(calc(var(--eme-wiggle-rotate, 0.7deg) * -0.55)) scale(0.998);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-eme-item-visual {
        animation: none !important;
        transform: none !important;
    }
}