body.site-index {
    --index-text: #142132;
    --index-muted: rgba(20, 33, 50, 0.64);
    --index-border: rgba(220, 228, 239, 0.92);
    --index-panel: rgba(255, 255, 255, 0.78);
    --index-panel-strong: rgba(255, 255, 255, 0.92);
    --index-chip: rgba(248, 250, 252, 0.96);
    --index-shadow: 0 20px 48px rgba(15, 23, 42, 0.10);
    color: var(--index-text) !important;
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 86% 18%, rgba(199, 210, 254, 0.18) 0, rgba(199, 210, 254, 0) 24%),
        linear-gradient(180deg, #f7f5f2 0%, #eff4f9 48%, #f7f2ea 100%) !important;
    background-size: 100% 100%, 100% 100%, 240% 240% !important;
    animation: homepageGradientFlow 30s ease-in-out infinite !important;
}

@keyframes homepageGradientFlow {
    0% { background-position: 0% 50%, 100% 18%, 0% 50%; }
    25% { background-position: 14% 36%, 84% 10%, 100% 50%; }
    50% { background-position: 100% 50%, 0% 84%, 100% 100%; }
    75% { background-position: 82% 18%, 100% 24%, 0% 100%; }
    100% { background-position: 0% 50%, 100% 18%, 0% 50%; }
}

@keyframes homepageAuraFlow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .68; }
    50% { transform: translate3d(0, -12px, 0) scale(1.06); opacity: .88; }
}

@keyframes homepageAuraSweep {
    0%, 100% { transform: translate3d(-3%, 0, 0) scale(1); opacity: .42; }
    35% { transform: translate3d(4%, -3%, 0) scale(1.04); opacity: .58; }
    70% { transform: translate3d(-1%, 4%, 0) scale(1.08); opacity: .5; }
}

@keyframes heroChromaticFlow {
    0% { background-position: 0% 42%, 100% 16%, 0% 50%; }
    50% { background-position: 100% 58%, 0% 84%, 100% 50%; }
    100% { background-position: 0% 42%, 100% 16%, 0% 50%; }
}

@keyframes heroBlobPulse {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .42; }
    50% { transform: translate3d(5%, -6%, 0) scale(1.12); opacity: .62; }
}

body.site-main.site-index {
    --index-accent: #5f7188;
    --index-accent-strong: #314459;
    --index-accent-soft: rgba(207, 161, 175, 0.18);
}

body.site-subsite.site-index {
    --index-accent: #2486cc;
    --index-accent-strong: #0f5f9e;
    --index-accent-soft: rgba(125, 211, 252, 0.22);
    background:
        radial-gradient(circle at 12% 6%, rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 85% 14%, rgba(125, 211, 252, 0.24) 0, rgba(125, 211, 252, 0) 26%),
        linear-gradient(180deg, #f4fbff 0%, #eaf5fd 50%, #f7fbff 100%) !important;
    background-size: 100% 100%, 100% 100%, 240% 240% !important;
}

body.site-subsite.site-index[class*="palette-"] {
    --index-accent: var(--site-accent) !important;
    --index-accent-strong: var(--site-accent-strong) !important;
    --index-accent-soft: rgba(var(--site-accent-rgb), .22) !important;
}

body.site-index::before {
    background:
        radial-gradient(circle at 16% 14%, rgba(255,255,255,0.34) 0, rgba(255,255,255,0) 18%),
        radial-gradient(circle at 78% 20%, var(--index-accent-soft) 0, rgba(255,255,255,0) 24%);
    opacity: 1 !important;
}

body.site-index::after {
    background:
        radial-gradient(circle at 24% 28%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 14%),
        radial-gradient(circle at 70% 72%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0) 14%);
}

body.site-index .app-container.ins-shell {
    max-width: 1040px !important;
    padding: 14px 12px 30px !important;
    position: relative !important;
    isolation: isolate !important;
}

body.site-index .app-container.ins-shell::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    height: min(34vh, 300px);
    border-radius: 38px;
    background:
        linear-gradient(120deg, rgba(242, 196, 214, 0.44) 0%, rgba(198, 221, 255, 0.46) 28%, rgba(203, 243, 229, 0.44) 58%, rgba(255, 224, 188, 0.42) 100%);
    background-size: 220% 220%;
    filter: blur(42px);
    opacity: .72;
    pointer-events: none;
    z-index: -1;
    animation: homepageGradientFlow 12s ease-in-out infinite, homepageAuraFlow 9s ease-in-out infinite;
}

body.site-subsite.site-index .app-container.ins-shell::before {
    background:
        linear-gradient(120deg, rgba(190, 233, 255, 0.42) 0%, rgba(214, 244, 255, 0.48) 36%, rgba(208, 249, 255, 0.42) 72%, rgba(233, 248, 255, 0.36) 100%);
}

body.site-index .app-container.ins-shell::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 6%;
    top: 120px;
    height: min(42vh, 360px);
    border-radius: 44px;
    background:
        linear-gradient(135deg, rgba(255, 206, 228, 0.26) 0%, rgba(198, 230, 255, 0.32) 34%, rgba(208, 248, 232, 0.28) 68%, rgba(255, 232, 201, 0.22) 100%);
    background-size: 260% 260%;
    filter: blur(56px);
    opacity: .48;
    pointer-events: none;
    z-index: -1;
    animation: homepageGradientFlow 14s ease-in-out infinite reverse, homepageAuraSweep 11s ease-in-out infinite;
}

body.site-subsite.site-index .app-container.ins-shell::after {
    background:
        linear-gradient(135deg, rgba(190, 233, 255, 0.28) 0%, rgba(214, 244, 255, 0.34) 38%, rgba(210, 250, 255, 0.28) 100%);
}

body.site-index .ins-hero {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 196px !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin: 0 0 10px !important;
}

body.site-index .ins-panel,
body.site-index .ins-side,
body.site-index .ins-toolbar,
body.site-index .ins-help,
body.site-index .ins-alert,
body.site-index .ins-empty {
    background: linear-gradient(180deg, var(--index-panel-strong), var(--index-panel)) !important;
    border: 1px solid var(--index-border) !important;
    box-shadow: var(--index-shadow) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

body.site-index .ins-panel,
body.site-index .ins-side {
    border-radius: 20px !important;
}

body.site-index .ins-panel {
    min-height: auto !important;
    padding: 16px !important;
}

body.site-index .ins-side {
    min-height: auto !important;
    padding: 9px !important;
}

body.site-index .ins-panel::before,
body.site-index .ins-side::before,
body.site-main.site-index .ins-section::before,
body.site-subsite.site-index .ins-section::before,
body.site-index .ins-section::before {
    display: none !important;
}

body.site-index .ins-hero .ins-panel {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 12% 28%, rgba(255, 184, 218, 0.46) 0, rgba(255, 184, 218, 0) 30%),
        radial-gradient(circle at 84% 22%, rgba(171, 222, 255, 0.52) 0, rgba(171, 222, 255, 0) 34%),
        linear-gradient(118deg, rgba(255,255,255,0.92) 0%, rgba(240,247,255,0.84) 24%, rgba(236,243,255,0.82) 54%, rgba(246,240,255,0.82) 76%, rgba(255,246,238,0.86) 100%) !important;
    background-size: 180% 180%, 220% 220%, 320% 320% !important;
    animation: heroChromaticFlow 4.8s ease-in-out infinite !important;
}

body.site-subsite.site-index .ins-hero .ins-panel {
    background:
        radial-gradient(circle at 16% 28%, rgba(191, 235, 255, 0.48) 0, rgba(191, 235, 255, 0) 30%),
        radial-gradient(circle at 84% 22%, rgba(124, 211, 252, 0.42) 0, rgba(124, 211, 252, 0) 34%),
        linear-gradient(118deg, rgba(255,255,255,0.92) 0%, rgba(240,250,255,0.86) 36%, rgba(232,246,255,0.84) 100%) !important;
}

body.site-index .ins-hero .ins-panel > * {
    position: relative !important;
    z-index: 1 !important;
}

body.site-index .ins-hero .ins-panel::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -16% !important;
    top: -12% !important;
    width: 62% !important;
    height: 56% !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 34% 42%, rgba(255, 146, 197, 0.88) 0, rgba(255, 146, 197, 0.56) 22%, rgba(255,146,197,0) 66%),
        radial-gradient(circle at 74% 38%, rgba(157, 214, 255, 0.82) 0, rgba(157, 214, 255, 0.38) 20%, rgba(157,214,255,0) 68%) !important;
    filter: blur(30px) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: heroBlobDriftA 4.6s ease-in-out infinite alternate !important;
}

body.site-subsite.site-index .ins-hero .ins-panel::before {
    background:
        radial-gradient(circle at 36% 42%, rgba(132, 219, 255, 0.90) 0, rgba(132, 219, 255, 0.56) 22%, rgba(132,219,255,0) 66%),
        radial-gradient(circle at 76% 38%, rgba(194, 242, 255, 0.78) 0, rgba(194, 242, 255, 0.34) 20%, rgba(194,242,255,0) 68%) !important;
}

body.site-index .ins-hero .ins-panel::after {
    content: "" !important;
    position: absolute !important;
    right: -12% !important;
    bottom: -14% !important;
    width: 58% !important;
    height: 56% !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 40% 42%, rgba(255, 208, 164, 0.82) 0, rgba(255, 208, 164, 0.40) 24%, rgba(255,208,164,0) 70%),
        radial-gradient(circle at 68% 38%, rgba(176, 235, 255, 0.76) 0, rgba(176, 235, 255, 0.32) 20%, rgba(176,235,255,0) 68%) !important;
    filter: blur(28px) !important;
    opacity: .96 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: heroBlobDriftB 4.8s ease-in-out infinite alternate !important;
}

body.site-index .ins-topbar {
    margin-bottom: 12px !important;
    align-items: flex-start !important;
}

body.site-index .ins-brand {
    color: var(--index-muted) !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
}

body.site-index .ins-brand i,
body.site-index .ins-action.primary,
body.site-index .ins-tab.is-special,
body.site-index .ins-card-icon,
body.site-index .ins-card-arrow,
body.site-index .n-btn,
body.site-index .btn-golden {
    background: linear-gradient(135deg, var(--index-accent), var(--index-accent-strong)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(49, 68, 89, 0.18) !important;
}

body.site-subsite.site-index .ins-brand i,
body.site-subsite.site-index .ins-action.primary,
body.site-subsite.site-index .ins-tab.is-special,
body.site-subsite.site-index .ins-card-icon,
body.site-subsite.site-index .ins-card-arrow,
body.site-subsite.site-index .n-btn,
body.site-subsite.site-index .btn-golden {
    box-shadow: 0 12px 26px rgba(36, 134, 204, 0.20) !important;
}

body.site-index .ins-actions {
    justify-content: flex-end !important;
}

body.site-index .ins-action,
body.site-index .ins-tab,
body.site-index .ins-feed-card,
body.site-index .ins-stat {
    background: var(--index-chip) !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    color: var(--index-text) !important;
    box-shadow: none !important;
    writing-mode: horizontal-tb !important;
}

body.site-index .ins-action,
body.site-index .ins-tab {
    min-height: 34px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
}

body.site-index .ins-action span,
body.site-index .ins-tab span,
body.site-index .ins-section-meta,
body.site-index .ins-card-action {
    white-space: nowrap !important;
}

body.site-index .ins-title {
    color: var(--index-text) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-size: clamp(28px, 3.6vw, 42px) !important;
    letter-spacing: -.05em !important;
}

body.site-index .ins-subtitle {
    max-width: 500px !important;
    color: var(--index-muted) !important;
    font-size: 11px !important;
    line-height: 1.48 !important;
}

body.site-index .ins-statline {
    margin-top: 12px !important;
    gap: 6px !important;
}

body.site-index .ins-stat {
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}

body.site-index .ins-stat span,
body.site-index .ins-feed-card span,
body.site-index .ins-section-meta,
body.site-index .p-tip,
body.site-index .footer-section {
    color: var(--index-muted) !important;
}

body.site-index .ins-stat strong,
body.site-index .ins-feed-card strong,
body.site-index .ins-card .p-price {
    color: var(--index-accent-strong) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

body.site-index .ins-phone {
    min-height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,248,252,0.92)) !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
}

body.site-index .ins-phone-feed {
    width: 100% !important;
    gap: 6px !important;
    align-content: start !important;
}

body.site-index .ins-feed-card {
    border-radius: 12px !important;
    padding: 7px 9px !important;
}

body.site-index .ins-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 8px !important;
    margin: 0 0 8px !important;
    border-radius: 14px !important;
}

body.site-index .ins-tabs {
    flex: 1 1 480px !important;
    min-width: 0 !important;
    gap: 5px !important;
}

body.site-index .ins-toolbar > .ins-action {
    flex: 0 0 auto !important;
    min-width: 88px !important;
    justify-content: center !important;
}

body.site-main.site-index .ins-section,
body.site-subsite.site-index .ins-section,
body.site-index .ins-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
}

body.site-index .ins-section-head {
    margin: 0 0 8px !important;
    padding: 0 0 6px !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.72) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    text-align: left !important;
    gap: 5px !important;
}

body.site-index .ins-section-title {
    font-size: 15px !important;
    color: var(--index-text) !important;
}

body.site-index .ins-section-meta {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    font-size: 8px !important;
}

body.site-index .ins-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(156px, 156px)) !important;
    gap: 8px !important;
    align-items: start !important;
    justify-content: start !important;
}

body.site-index .ins-grid.ins-grid-sparse {
    justify-content: start !important;
    margin: 0 !important;
}

body.site-index .ins-card {
    width: auto !important;
    max-width: none !important;
    min-height: 148px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,251,0.94)) !important;
    border: 1px solid rgba(226, 232, 240, 0.96) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.site-index .ins-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.82) 0, rgba(255,255,255,0) 42%),
        radial-gradient(circle at 100% 0, var(--index-accent-soft) 0, rgba(255,255,255,0) 42%) !important;
}

body.site-index .ins-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(191, 219, 254, 0.96) !important;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12) !important;
}

body.site-index .ins-card-top {
    padding: 10px 10px 0 !important;
}

body.site-index .ins-card-body {
    padding: 7px 10px 0 !important;
}

body.site-index .ins-card-foot {
    padding: 7px 10px 10px !important;
}

body.site-index .ins-card .p-name {
    min-height: 26px !important;
    color: var(--index-text) !important;
    font-size: 10px !important;
    line-height: 1.24 !important;
}

body.site-index .ins-card .p-price {
    margin: 6px 0 4px !important;
    font-size: 18px !important;
}

body.site-index .ins-card-meta {
    gap: 8px !important;
}

body.site-index .ins-card-meta .p-daily,
body.site-index .ins-card-meta .p-stock {
    background: rgba(248, 250, 252, 0.96) !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    color: var(--index-muted) !important;
}

body.site-index .p-tip {
    margin-top: 6px !important;
    font-size: 10px !important;
    line-height: 1.32 !important;
}

body.site-index .ins-card-action {
    color: rgba(20, 33, 50, 0.82) !important;
    font-size: 12px !important;
}

body.site-index .ins-help,
body.site-index .ins-alert {
    border-radius: 14px !important;
    padding: 9px 11px !important;
    margin: 0 0 8px !important;
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.42 !important;
}

body.site-index .footer-section {
    padding: 16px 8px 6px !important;
}

body.site-index .pop-mask.active#noticeBox {
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 18px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

body.site-index .pop-mask.active#noticeBox .notice-card {
    width: min(320px, 100%) !important;
    max-height: min(64vh, 500px) !important;
    margin: 0 !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14) !important;
    pointer-events: auto !important;
}

body.site-index .pop-mask.active#noticeBox .notice-card.notice-card-html {
    width: min(340px, 100%) !important;
    padding: 14px 14px 16px !important;
    border-radius: 24px !important;
}

body.site-index .pop-mask.active#noticeBox .notice-body {
    overflow: auto !important;
}

body.site-index .notice-frame {
    display: block !important;
    width: 100% !important;
    min-height: 240px !important;
    height: min(46vh, 360px) !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    overflow: hidden !important;
}

@media (max-width: 1080px) {
    body.site-index .ins-hero {
        grid-template-columns: 1fr !important;
    }

    body.site-index .ins-side {
        order: -1 !important;
    }

    body.site-index .ins-phone-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body.site-index .app-container.ins-shell {
        padding: 12px 10px 26px !important;
    }

    body.site-index .ins-hero {
        gap: 8px !important;
        margin: 0 0 10px !important;
    }

    body.site-index .ins-side {
        order: 0 !important;
        padding: 10px !important;
        background: linear-gradient(180deg, var(--index-panel-strong), var(--index-panel)) !important;
        border: 1px solid var(--index-border) !important;
        box-shadow: var(--index-shadow) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    body.site-index .ins-panel,
    body.site-index .ins-side,
    body.site-index .ins-toolbar,
    body.site-index .ins-help,
    body.site-index .ins-alert {
        border-radius: 16px !important;
    }

    body.site-index .ins-panel {
        padding: 14px !important;
    }

    body.site-index .ins-topbar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    body.site-index .ins-brand {
        font-size: 10px !important;
        letter-spacing: .14em !important;
    }

    body.site-index .ins-actions {
        width: auto !important;
        justify-content: flex-end !important;
        display: flex !important;
        gap: 6px !important;
    }

    body.site-index .ins-action {
        justify-content: center !important;
        min-height: 34px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    body.site-index .ins-action span {
        font-size: 10px !important;
    }

    body.site-index .ins-title {
        font-size: 28px !important;
        line-height: 1.02 !important;
    }

    body.site-index .ins-subtitle {
        max-width: none !important;
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    body.site-index .ins-statline {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 12px !important;
    }

    body.site-index .ins-stat {
        padding: 8px 7px !important;
        border-radius: 13px !important;
    }

    body.site-index .ins-stat span {
        font-size: 9px !important;
    }

    body.site-index .ins-stat strong {
        font-size: 15px !important;
    }

    body.site-index .ins-phone {
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.site-index .ins-phone-feed {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.site-index .ins-feed-card {
        min-height: 0 !important;
        padding: 8px 8px 10px !important;
        border-radius: 13px !important;
    }

    body.site-index .ins-feed-card span {
        font-size: 8px !important;
    }

    body.site-index .ins-feed-card strong {
        font-size: 12px !important;
        line-height: 1.28 !important;
    }

    body.site-index .ins-toolbar {
        padding: 8px !important;
        margin: 0 0 10px !important;
        border-radius: 16px !important;
        gap: 6px !important;
    }

    body.site-index .ins-tabs {
        flex: 1 1 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding-bottom: 0 !important;
        scroll-snap-type: none !important;
        scrollbar-width: none !important;
    }

    body.site-index .ins-tab {
        flex: 0 0 auto !important;
    }

    body.site-index .ins-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        scroll-snap-type: none !important;
    }

    body.site-index .ins-grid.ins-grid-sparse {
        margin: 0 !important;
        padding: 0 !important;
        justify-content: stretch !important;
    }

    body.site-index .ins-grid.ins-grid-sparse[data-count],
    body.site-index .ins-grid.ins-grid-sparse[data-count="1"],
    body.site-index .ins-grid.ins-grid-sparse[data-count="2"],
    body.site-index .ins-grid.ins-grid-sparse[data-count="3"],
    body.site-index .ins-grid.ins-grid-sparse[data-count="4"] {
        max-width: none !important;
        margin: 0 !important;
    }

    body.site-index .ins-section {
        margin: 0 0 14px !important;
    }

    body.site-index .ins-section-head {
        margin: 0 0 8px !important;
        padding: 0 0 6px !important;
        gap: 8px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        flex-wrap: wrap !important;
    }

    body.site-index .ins-section-title {
        font-size: 16px !important;
    }

    body.site-index .ins-section-meta {
        min-height: 22px !important;
        font-size: 10px !important;
    }

    body.site-index .ins-card {
        width: auto !important;
        max-width: none !important;
        min-height: 164px !important;
        border-radius: 16px !important;
    }

    body.site-index .ins-grid.ins-grid-sparse .ins-card {
        width: auto !important;
        max-width: none !important;
    }

    body.site-index .ins-grid.ins-grid-sparse[data-count="1"] .ins-card {
        width: auto !important;
        max-width: none !important;
    }

    body.site-index .ins-card-top {
        padding: 12px 12px 0 !important;
    }

    body.site-index .ins-card-body {
        padding: 10px 12px 0 !important;
    }

    body.site-index .ins-card-foot {
        padding: 10px 12px 12px !important;
    }

    body.site-index .ins-card .p-name {
        min-height: 34px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    body.site-index .ins-card .p-price {
        margin: 8px 0 6px !important;
        font-size: 20px !important;
    }

    body.site-index .ins-help,
    body.site-index .ins-alert {
        padding: 10px 12px !important;
        margin: 0 0 10px !important;
        border-radius: 16px !important;
        font-size: 11px !important;
        line-height: 1.52 !important;
    }

    body.site-index .pop-mask.active#noticeBox {
        justify-content: center !important;
        align-items: center !important;
        padding: 14px !important;
        background: rgba(237, 242, 247, 0.5) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        pointer-events: auto !important;
    }

    body.site-index .pop-mask.active#noticeBox .notice-card {
        width: 100% !important;
        max-width: 304px !important;
        max-height: 70vh !important;
        border-radius: 20px !important;
        padding: 16px 14px !important;
    }

    body.site-index .pop-mask.active#noticeBox .notice-card.notice-card-html {
        max-width: 324px !important;
        padding: 12px 12px 14px !important;
        border-radius: 22px !important;
    }

    body.site-index .notice-frame {
        height: min(44vh, 360px) !important;
        min-height: 220px !important;
        border-radius: 16px !important;
    }
}

@media (max-width: 720px) {
    body.site-index {
        background:
            linear-gradient(135deg, #eef7ff 0%, #f1f3ff 34%, #f7f2ff 66%, #fff6ef 100%) !important;
        background-size: 320% 320% !important;
        animation: homepageGradientFlow 8s ease-in-out infinite !important;
    }

    body.site-index::before,
    body.site-index::after {
        content: none !important;
        display: none !important;
    }

    body.site-index .app-container.ins-shell::before {
        left: 0 !important;
        right: 0 !important;
        top: 12px !important;
        height: 240px !important;
        border-radius: 30px !important;
        filter: blur(34px) !important;
        opacity: .92 !important;
        background:
            linear-gradient(120deg, rgba(255, 190, 221, 0.44) 0%, rgba(172, 221, 255, 0.48) 30%, rgba(190, 255, 221, 0.42) 64%, rgba(255, 222, 186, 0.38) 100%) !important;
        background-size: 240% 240% !important;
        animation: homepageGradientFlow 6s ease-in-out infinite, homepageAuraFlow 6s ease-in-out infinite !important;
    }

    body.site-subsite.site-index .app-container.ins-shell::before {
        background:
            linear-gradient(120deg, rgba(170, 230, 255, 0.46) 0%, rgba(206, 244, 255, 0.50) 40%, rgba(210, 252, 255, 0.42) 100%) !important;
    }

    body.site-index .app-container.ins-shell::after {
        left: 6% !important;
        right: 4% !important;
        top: 104px !important;
        height: 220px !important;
        border-radius: 32px !important;
        filter: blur(38px) !important;
        opacity: .62 !important;
        background:
            linear-gradient(135deg, rgba(255, 208, 234, 0.32) 0%, rgba(197, 225, 255, 0.36) 36%, rgba(210, 255, 228, 0.28) 68%, rgba(255, 230, 200, 0.24) 100%) !important;
        background-size: 260% 260% !important;
        animation: homepageGradientFlow 7s ease-in-out infinite reverse, homepageAuraSweep 6s ease-in-out infinite !important;
    }

    body.site-subsite.site-index .app-container.ins-shell::after {
        background:
            linear-gradient(135deg, rgba(184, 233, 255, 0.34) 0%, rgba(214, 244, 255, 0.38) 100%) !important;
    }

    body.site-index .ins-hero .ins-panel {
        background-size: 160% 160%, 180% 180%, 260% 260% !important;
        animation: heroChromaticFlow 5.5s ease-in-out infinite !important;
    }

    body.site-index .ins-hero .ins-panel::before {
        inset: -14% -10% 48% -10% !important;
        opacity: .94 !important;
        filter: blur(18px) !important;
        animation: homepageGradientFlow 5.5s ease-in-out infinite !important;
    }

    body.site-index .ins-hero .ins-panel::after {
        right: -16% !important;
        bottom: -14% !important;
        width: 62% !important;
        height: 46% !important;
        opacity: .84 !important;
        animation: heroBlobPulse 5s ease-in-out infinite !important;
    }

    body.site-index .ins-panel,
    body.site-index .ins-side,
    body.site-index .ins-toolbar,
    body.site-index .ins-help,
    body.site-index .ins-alert,
    body.site-index .ins-feed-card,
    body.site-index .ins-stat,
    body.site-index .ins-card,
    body.site-index .ins-card-meta .p-daily,
    body.site-index .ins-card-meta .p-stock {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 10px 22px rgba(106, 124, 184, 0.12) !important;
    }

    body.site-index .ins-panel,
    body.site-index .ins-side,
    body.site-index .ins-toolbar,
    body.site-index .ins-help,
    body.site-index .ins-alert,
    body.site-index .ins-feed-card,
    body.site-index .ins-stat,
    body.site-index .ins-card {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 249, 255, 0.96) 100%) !important;
        border-color: rgba(218, 226, 240, 0.96) !important;
    }

    body.site-index .ins-card,
    body.site-index .ins-feed-card,
    body.site-index .ins-stat {
        transform: translateZ(0);
    }

    body.site-index .ins-help,
    body.site-index .ins-alert {
        background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,246,255,.96)) !important;
    }
}

/* Final homepage motion pass: obvious whole-page flow, not just the first card */
@keyframes codexHomeStream {
    0% { background-position: 0% 48%, 100% 18%, 0% 50%; }
    25% { background-position: 22% 38%, 80% 12%, 100% 52%; }
    50% { background-position: 100% 54%, 6% 88%, 100% 100%; }
    75% { background-position: 78% 18%, 100% 26%, 0% 100%; }
    100% { background-position: 0% 48%, 100% 18%, 0% 50%; }
}

@keyframes codexHomeBlobA {
    0% { transform: translate3d(-4%, -2%, 0) scale(1); opacity: .78; }
    50% { transform: translate3d(8%, 2%, 0) scale(1.14); opacity: .98; }
    100% { transform: translate3d(2%, -6%, 0) scale(1.06); opacity: .84; }
}

@keyframes codexHomeBlobB {
    0% { transform: translate3d(3%, 0, 0) scale(1); opacity: .58; }
    50% { transform: translate3d(-9%, -4%, 0) scale(1.16); opacity: .84; }
    100% { transform: translate3d(-3%, 7%, 0) scale(1.08); opacity: .66; }
}

body.site-index {
    background:
        radial-gradient(circle at 8% 8%, rgba(255,255,255,0.96) 0, rgba(255,255,255,0) 24%),
        radial-gradient(circle at 90% 16%, rgba(189, 224, 255, 0.30) 0, rgba(189, 224, 255, 0) 28%),
        linear-gradient(125deg, #ffe2f0 0%, #edf3ff 26%, #e8fbff 48%, #edfbe9 68%, #fff0db 100%) !important;
    background-size: 100% 100%, 100% 100%, 360% 360% !important;
    animation: codexHomeStream 6.5s ease-in-out infinite !important;
}

body.site-subsite.site-index {
    background:
        radial-gradient(circle at 10% 8%, rgba(255,255,255,0.98) 0, rgba(255,255,255,0) 24%),
        radial-gradient(circle at 88% 16%, rgba(139, 223, 255, 0.30) 0, rgba(139, 223, 255, 0) 28%),
        linear-gradient(125deg, #daf4ff 0%, #e6f8ff 30%, #eefcff 62%, #f4fdff 100%) !important;
    background-size: 100% 100%, 100% 100%, 320% 320% !important;
}

body.site-index .app-container.ins-shell::before {
    inset: 26px -22px 24px -22px !important;
    height: auto !important;
    border-radius: 52px !important;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 148, 200, 0.76) 0, rgba(255, 148, 200, 0.28) 16%, rgba(255,148,200,0) 48%),
        radial-gradient(circle at 84% 18%, rgba(136, 216, 255, 0.72) 0, rgba(136, 216, 255, 0.24) 18%, rgba(136,216,255,0) 52%),
        radial-gradient(circle at 46% 56%, rgba(200, 250, 230, 0.56) 0, rgba(200, 250, 230, 0.18) 18%, rgba(200,250,230,0) 48%),
        linear-gradient(130deg, rgba(255, 220, 233, 0.24) 0%, rgba(219, 232, 255, 0.22) 34%, rgba(215, 252, 238, 0.20) 68%, rgba(255, 234, 202, 0.18) 100%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 300% 300% !important;
    filter: blur(42px) saturate(1.15) !important;
    opacity: .86 !important;
    animation: codexHomeStream 5.8s ease-in-out infinite, codexHomeBlobA 5.4s ease-in-out infinite alternate !important;
}

body.site-subsite.site-index .app-container.ins-shell::before {
    background:
        radial-gradient(circle at 16% 12%, rgba(110, 219, 255, 0.74) 0, rgba(110, 219, 255, 0.26) 16%, rgba(110,219,255,0) 48%),
        radial-gradient(circle at 84% 18%, rgba(177, 239, 255, 0.70) 0, rgba(177, 239, 255, 0.24) 18%, rgba(177,239,255,0) 52%),
        radial-gradient(circle at 46% 56%, rgba(217, 250, 255, 0.52) 0, rgba(217, 250, 255, 0.18) 18%, rgba(217,250,255,0) 48%),
        linear-gradient(130deg, rgba(219, 244, 255, 0.22) 0%, rgba(208, 241, 255, 0.20) 48%, rgba(240, 253, 255, 0.18) 100%) !important;
}

body.site-index .app-container.ins-shell::after {
    inset: 120px -18px 80px -18px !important;
    height: auto !important;
    border-radius: 48px !important;
    background:
        radial-gradient(circle at 24% 10%, rgba(255, 205, 172, 0.56) 0, rgba(255,205,172,0.20) 16%, rgba(255,205,172,0) 48%),
        radial-gradient(circle at 78% 26%, rgba(174, 232, 255, 0.58) 0, rgba(174,232,255,0.20) 18%, rgba(174,232,255,0) 48%),
        radial-gradient(circle at 54% 76%, rgba(255, 195, 225, 0.44) 0, rgba(255,195,225,0.18) 18%, rgba(255,195,225,0) 48%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
    filter: blur(58px) !important;
    opacity: .7 !important;
    animation: codexHomeBlobB 6.2s ease-in-out infinite alternate !important;
}

body.site-subsite.site-index .app-container.ins-shell::after {
    background:
        radial-gradient(circle at 24% 10%, rgba(189, 241, 255, 0.52) 0, rgba(189,241,255,0.18) 16%, rgba(189,241,255,0) 48%),
        radial-gradient(circle at 78% 26%, rgba(136, 217, 255, 0.54) 0, rgba(136,217,255,0.18) 18%, rgba(136,217,255,0) 48%),
        radial-gradient(circle at 54% 76%, rgba(210, 248, 255, 0.40) 0, rgba(210,248,255,0.16) 18%, rgba(210,248,255,0) 48%) !important;
}

body.site-index .ins-hero .ins-panel {
    background:
        linear-gradient(140deg, rgba(255,255,255,0.94) 0%, rgba(243,248,255,0.88) 34%, rgba(240,246,255,0.84) 62%, rgba(249,245,255,0.82) 84%, rgba(255,248,241,0.88) 100%) !important;
    background-size: 320% 320% !important;
    animation: codexHomeStream 5.2s ease-in-out infinite !important;
}

@media (max-width: 720px) {
    body.site-index {
        background-size: 420% 420% !important;
        animation: codexHomeStream 4.8s ease-in-out infinite !important;
    }

    body.site-index .app-container.ins-shell::before {
        inset: 14px -12px 18px -12px !important;
        filter: blur(34px) !important;
        opacity: .96 !important;
        animation: codexHomeStream 4.2s ease-in-out infinite, codexHomeBlobA 4s ease-in-out infinite alternate !important;
    }

    body.site-index .app-container.ins-shell::after {
        inset: 100px -10px 64px -10px !important;
        filter: blur(42px) !important;
        opacity: .8 !important;
        animation: codexHomeBlobB 4.4s ease-in-out infinite alternate !important;
    }

    body.site-index .ins-hero .ins-panel {
        background-size: 360% 360% !important;
        animation: codexHomeStream 3.8s ease-in-out infinite !important;
    }
}

/* Render stability patch: keep the original gradient look, remove high-risk motion. */
body.site-index .app-container.ins-shell::before,
body.site-index .app-container.ins-shell::after,
body.site-index .ins-hero .ins-panel::before,
body.site-index .ins-hero .ins-panel::after {
    animation: none !important;
}

body.site-index .ins-card,
body.site-index .product-card,
body.site-index .ins-feed-card,
body.site-index .ins-stat {
    transform: none !important;
    will-change: auto !important;
}

body.site-index .product-card,
body.site-index .ins-card {
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
    body.site-index {
        background-size: 100% 100%, 100% 100%, 180% 180% !important;
        animation: homepageGradientFlow 26s linear infinite !important;
    }

    body.site-index::before,
    body.site-index::after {
        opacity: .34 !important;
        mix-blend-mode: normal !important;
    }

    body.site-index .app-container.ins-shell::before,
    body.site-index .app-container.ins-shell::after,
    body.site-index .ins-hero .ins-panel::before,
    body.site-index .ins-hero .ins-panel::after {
        display: none !important;
    }

    body.site-index .ins-panel,
    body.site-index .ins-side,
    body.site-index .ins-toolbar,
    body.site-index .ins-help,
    body.site-index .ins-alert,
    body.site-index .ins-empty,
    body.site-index .ins-card,
    body.site-index .ins-feed-card,
    body.site-index .ins-stat,
    body.site-index .ins-action,
    body.site-index .ins-tab,
    body.site-index .p-daily,
    body.site-index .p-stock,
    body.site-index .notice-card,
    body.site-index .confirm-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.site-index .ins-hero .ins-panel {
        animation: heroChromaticFlow 18s linear infinite !important;
        background-size: 160% 160%, 180% 180%, 220% 220% !important;
    }

    body.site-index .product-card:active,
    body.site-index .ins-card:active,
    body.site-index .ins-card:hover,
    body.site-index .product-card:hover {
        transform: none !important;
    }

    body.site-index .ins-grid {
        gap: 12px !important;
    }
}

@media (max-width: 720px) {
    body.site-index .ins-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.site-index .ins-card {
        min-height: 164px !important;
    }

    body.site-index .ins-phone-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Codex mobile render fix: stable card paint + slow chromatic background. */
@keyframes codexSlowColorDrift {
    0% { background-position: 0% 48%, 100% 16%, 0% 50%; }
    30% { background-position: 18% 36%, 82% 20%, 74% 42%; }
    60% { background-position: 88% 58%, 12% 80%, 100% 78%; }
    100% { background-position: 0% 48%, 100% 16%, 0% 50%; }
}

body.site-index,
body.site-subsite.site-index {
    background:
        radial-gradient(circle at 10% 8%, rgba(255,255,255,0.98) 0, rgba(255,255,255,0) 25%),
        radial-gradient(circle at 88% 16%, rgba(150, 220, 255, 0.28) 0, rgba(150,220,255,0) 30%),
        linear-gradient(125deg, #e0f6ff 0%, #edf4ff 22%, #f5edff 42%, #eafff3 64%, #fff2df 82%, #e8f8ff 100%) !important;
    background-size: 100% 100%, 100% 100%, 360% 360% !important;
    animation: codexSlowColorDrift 20s ease-in-out infinite !important;
}

body.site-index .ins-card,
body.site-index .product-card {
    position: relative !important;
    isolation: isolate !important;
    contain: layout paint !important;
    overflow: hidden !important;
}

body.site-index .ins-card::before,
body.site-index .product-card::before {
    content: none !important;
    display: none !important;
}

body.site-index .ins-card-top,
body.site-index .ins-card-body,
body.site-index .ins-card-foot,
body.site-index .ins-card-code,
body.site-index .ins-card-icon,
body.site-index .ins-card-arrow,
body.site-index .ins-card-action,
body.site-index .ins-card .p-name,
body.site-index .ins-card .p-price,
body.site-index .ins-card .p-price small,
body.site-index .ins-card-meta,
body.site-index .ins-card-meta .p-daily,
body.site-index .ins-card-meta .p-stock,
body.site-index .p-tip {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
    body.site-index,
    body.site-subsite.site-index {
        background:
            radial-gradient(circle at 8% 6%, rgba(255,255,255,0.98) 0, rgba(255,255,255,0) 24%),
            radial-gradient(circle at 90% 14%, rgba(142, 225, 255, 0.26) 0, rgba(142,225,255,0) 30%),
            linear-gradient(125deg, #dff6ff 0%, #edf4ff 24%, #f6edff 46%, #eafff2 68%, #fff0dc 100%) !important;
        background-size: 100% 100%, 100% 100%, 320% 320% !important;
        animation: codexSlowColorDrift 20s ease-in-out infinite !important;
    }

    body.site-index .app-container.ins-shell::before,
    body.site-index .app-container.ins-shell::after,
    body.site-index .ins-hero .ins-panel::before,
    body.site-index .ins-hero .ins-panel::after,
    body.site-index .ins-card::before,
    body.site-index .product-card::before {
        content: none !important;
        display: none !important;
    }

    body.site-index .ins-card,
    body.site-index .product-card {
        transform: none !important;
        transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
        will-change: auto !important;
        filter: none !important;
        contain: layout paint !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(246,249,255,0.97) 100%) !important;
    }

    body.site-index .ins-card-top,
    body.site-index .ins-card-body,
    body.site-index .ins-card-foot {
        transform: translateZ(0) !important;
        min-width: 0 !important;
    }

    body.site-index .ins-card .p-name,
    body.site-index .ins-card .p-price,
    body.site-index .ins-card-meta,
    body.site-index .ins-card-action {
        transform: translateZ(0) !important;
    }
}

/* Codex final visual split: main shop gets color flow, subsites stay blue-white. */
@keyframes codexMainShopColorFlow {
    0% { background-position: 0% 48%, 100% 16%, 0% 50%; }
    25% { background-position: 18% 34%, 78% 22%, 72% 42%; }
    55% { background-position: 86% 62%, 12% 82%, 100% 74%; }
    100% { background-position: 0% 48%, 100% 16%, 0% 50%; }
}

body.site-main.site-index,
body.site-index:not(.site-subsite) {
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,0.98) 0, rgba(255,255,255,0) 24%),
        radial-gradient(circle at 88% 14%, rgba(117, 209, 255, 0.34) 0, rgba(117,209,255,0) 31%),
        linear-gradient(125deg, #d8f7ff 0%, #e8ecff 18%, #ffe4f0 36%, #e2fff1 58%, #fff0cf 78%, #dff8ff 100%) !important;
    background-size: 100% 100%, 100% 100%, 360% 360% !important;
    animation: codexMainShopColorFlow 20s ease-in-out infinite !important;
}

body.site-main.site-index .ins-hero .ins-panel,
body.site-index:not(.site-subsite) .ins-hero .ins-panel {
    background:
        radial-gradient(circle at 12% 28%, rgba(255, 193, 224, 0.46) 0, rgba(255,193,224,0) 32%),
        radial-gradient(circle at 86% 24%, rgba(155, 225, 255, 0.48) 0, rgba(155,225,255,0) 34%),
        linear-gradient(122deg, rgba(255,255,255,0.92) 0%, rgba(236,247,255,0.80) 28%, rgba(255,238,247,0.76) 54%, rgba(236,255,245,0.78) 76%, rgba(255,246,226,0.86) 100%) !important;
    background-size: 180% 180%, 220% 220%, 320% 320% !important;
    animation: codexMainShopColorFlow 20s ease-in-out infinite !important;
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
    body.site-main.site-index,
    body.site-index:not(.site-subsite) {
        background:
            radial-gradient(circle at 10% 8%, rgba(255,255,255,0.98) 0, rgba(255,255,255,0) 24%),
            radial-gradient(circle at 90% 16%, rgba(135, 221, 255, 0.30) 0, rgba(135,221,255,0) 30%),
            linear-gradient(125deg, #d9f7ff 0%, #e9edff 20%, #ffe5f1 40%, #e3fff2 62%, #fff0d2 82%, #e0f8ff 100%) !important;
        background-size: 100% 100%, 100% 100%, 340% 340% !important;
        animation: codexMainShopColorFlow 20s ease-in-out infinite !important;
    }

    body.site-main.site-index .ins-hero .ins-panel,
    body.site-index:not(.site-subsite) .ins-hero .ins-panel {
        background:
            radial-gradient(circle at 14% 24%, rgba(255, 196, 226, 0.42) 0, rgba(255,196,226,0) 32%),
            radial-gradient(circle at 86% 26%, rgba(152, 226, 255, 0.46) 0, rgba(152,226,255,0) 34%),
            linear-gradient(122deg, rgba(255,255,255,0.92) 0%, rgba(236,247,255,0.82) 30%, rgba(255,238,247,0.76) 58%, rgba(240,255,246,0.82) 100%) !important;
        background-size: 180% 180%, 220% 220%, 300% 300% !important;
        animation: codexMainShopColorFlow 20s ease-in-out infinite !important;
    }
}

body.site-subsite.site-index {
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,0.98) 0, rgba(255,255,255,0) 26%),
        radial-gradient(circle at 86% 14%, rgba(125, 211, 252, 0.24) 0, rgba(125,211,252,0) 28%),
        linear-gradient(180deg, #f4fbff 0%, #eaf5fd 52%, #f7fbff 100%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
    animation: none !important;
}

body.site-subsite.site-index .ins-hero .ins-panel {
    background:
        radial-gradient(circle at 16% 28%, rgba(191, 235, 255, 0.42) 0, rgba(191,235,255,0) 30%),
        radial-gradient(circle at 84% 22%, rgba(124, 211, 252, 0.32) 0, rgba(124,211,252,0) 34%),
        linear-gradient(118deg, rgba(255,255,255,0.94) 0%, rgba(240,250,255,0.88) 36%, rgba(232,246,255,0.86) 100%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
    animation: none !important;
}

/* Codex main shop compact pass: stronger color flow, colored actions, smaller cards. */
@keyframes codexMainShopColorFlowV2 {
    0% { background-position: 0% 50%; }
    18% { background-position: 34% 42%; }
    42% { background-position: 82% 58%; }
    68% { background-position: 52% 86%; }
    100% { background-position: 0% 50%; }
}

body.site-main.site-index,
body.site-index:not(.site-subsite) {
    background:
        linear-gradient(125deg, #baf3ff 0%, #dfe9ff 18%, #ffd5e8 36%, #d7ffe8 57%, #ffecb8 76%, #c9f1ff 100%) !important;
    background-size: 360% 360% !important;
    animation: codexMainShopColorFlowV2 20s ease-in-out infinite !important;
}

body.site-main.site-index .ins-hero .ins-panel,
body.site-index:not(.site-subsite) .ins-hero .ins-panel {
    background:
        linear-gradient(122deg, rgba(255,255,255,0.86) 0%, rgba(220,246,255,0.72) 24%, rgba(255,220,236,0.68) 48%, rgba(222,255,235,0.70) 72%, rgba(255,240,196,0.78) 100%) !important;
    background-size: 340% 340% !important;
    animation: codexMainShopColorFlowV2 20s ease-in-out infinite !important;
}

body.site-main.site-index .ins-action.primary,
body.site-main.site-index .ins-toolbar > .ins-action,
body.site-main.site-index .ins-tab.is-special,
body.site-index:not(.site-subsite) .ins-action.primary,
body.site-index:not(.site-subsite) .ins-toolbar > .ins-action,
body.site-index:not(.site-subsite) .ins-tab.is-special {
    background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 52%, #f59e0b 100%) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.58) !important;
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.22) !important;
}

body.site-main.site-index .ins-grid,
body.site-index:not(.site-subsite) .ins-grid {
    grid-template-columns: repeat(auto-fill, minmax(142px, 142px)) !important;
    gap: 10px !important;
}

body.site-main.site-index .ins-card,
body.site-index:not(.site-subsite) .ins-card {
    min-height: 126px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.94)) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
}

body.site-main.site-index .ins-card-top,
body.site-index:not(.site-subsite) .ins-card-top {
    padding: 9px 10px 0 !important;
}

body.site-main.site-index .ins-card-body,
body.site-index:not(.site-subsite) .ins-card-body {
    padding: 8px 10px 0 !important;
}

body.site-main.site-index .ins-card-foot,
body.site-index:not(.site-subsite) .ins-card-foot {
    padding: 8px 10px 10px !important;
}

body.site-main.site-index .ins-card-icon,
body.site-main.site-index .ins-card-arrow,
body.site-index:not(.site-subsite) .ins-card-icon,
body.site-index:not(.site-subsite) .ins-card-arrow {
    display: none !important;
}

body.site-main.site-index .ins-card-code,
body.site-index:not(.site-subsite) .ins-card-code {
    font-size: 12px !important;
    letter-spacing: .08em !important;
}

body.site-main.site-index .ins-card .p-name,
body.site-index:not(.site-subsite) .ins-card .p-name {
    min-height: 30px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.34 !important;
    font-weight: 800 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body.site-main.site-index .ins-card .p-price,
body.site-index:not(.site-subsite) .ins-card .p-price {
    margin: 5px 0 4px !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    color: #0f5f9e !important;
}

body.site-main.site-index .ins-card .p-price small,
body.site-index:not(.site-subsite) .ins-card .p-price small {
    font-size: 11px !important;
}

body.site-main.site-index .ins-card-meta,
body.site-index:not(.site-subsite) .ins-card-meta {
    gap: 5px !important;
    min-height: 22px !important;
}

body.site-main.site-index .ins-card-meta .p-daily,
body.site-main.site-index .p-tip,
body.site-index:not(.site-subsite) .ins-card-meta .p-daily,
body.site-index:not(.site-subsite) .p-tip {
    display: none !important;
}

body.site-main.site-index .ins-card-meta .p-stock,
body.site-index:not(.site-subsite) .ins-card-meta .p-stock {
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    background: rgba(14, 165, 233, 0.10) !important;
    color: #0f5f9e !important;
    border-color: rgba(14, 165, 233, 0.18) !important;
}

body.site-main.site-index .ins-card-action,
body.site-index:not(.site-subsite) .ins-card-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 56%, #f59e0b 100%) !important;
    box-shadow: 0 8px 16px rgba(14, 165, 233, 0.20) !important;
    color: #fff !important;
    font-size: 0 !important;
    font-weight: 800 !important;
}

body.site-main.site-index .ins-card-action::after,
body.site-index:not(.site-subsite) .ins-card-action::after {
    content: "\8d2d\4e70";
    font-size: 11px !important;
    line-height: 1 !important;
}

@media (max-width: 720px) {
    body.site-main.site-index .ins-grid,
    body.site-index:not(.site-subsite) .ins-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.site-main.site-index .ins-card,
    body.site-index:not(.site-subsite) .ins-card {
        min-height: 118px !important;
        border-radius: 13px !important;
    }

    body.site-main.site-index .ins-card-top,
    body.site-index:not(.site-subsite) .ins-card-top {
        padding: 8px 9px 0 !important;
    }

    body.site-main.site-index .ins-card-body,
    body.site-index:not(.site-subsite) .ins-card-body {
        padding: 7px 9px 0 !important;
    }

    body.site-main.site-index .ins-card-foot,
    body.site-index:not(.site-subsite) .ins-card-foot {
        padding: 7px 9px 9px !important;
    }

    body.site-main.site-index .ins-card .p-name,
    body.site-index:not(.site-subsite) .ins-card .p-name {
        min-height: 28px !important;
        font-size: 11px !important;
        line-height: 1.28 !important;
    }

    body.site-main.site-index .ins-card .p-price,
    body.site-index:not(.site-subsite) .ins-card .p-price {
        font-size: 17px !important;
    }
}

/* Codex main shop visual restore pass: animated pastel glass + cleaner actions. */
@keyframes codexMainShopAuroraFlowV3 {
    0% { background-position: 0% 48%, 100% 16%, 0% 50%; }
    24% { background-position: 18% 34%, 84% 18%, 72% 40%; }
    52% { background-position: 86% 60%, 12% 84%, 100% 74%; }
    78% { background-position: 48% 88%, 78% 26%, 34% 100%; }
    100% { background-position: 0% 48%, 100% 16%, 0% 50%; }
}

body.site-main.site-index,
body.site-index:not(.site-subsite) {
    --index-accent: #6f86ff;
    --index-accent-strong: #ff7faa;
    --index-accent-soft: rgba(255, 186, 221, 0.28);
    --index-shadow: 0 22px 52px rgba(94, 102, 146, 0.14);
    background:
        radial-gradient(circle at 10% 8%, rgba(255,255,255,0.98) 0, rgba(255,255,255,0) 24%),
        radial-gradient(circle at 90% 14%, rgba(171, 220, 255, 0.28) 0, rgba(171,220,255,0) 28%),
        linear-gradient(125deg, #ffd8eb 0%, #eef1ff 24%, #e7fbff 46%, #effbe8 68%, #fff0dc 100%) !important;
    background-size: 100% 100%, 100% 100%, 360% 360% !important;
    animation: codexMainShopAuroraFlowV3 22s ease-in-out infinite !important;
}

body.site-main.site-index .app-container.ins-shell::before,
body.site-index:not(.site-subsite) .app-container.ins-shell::before {
    content: "" !important;
    display: block !important;
    background:
        linear-gradient(120deg, rgba(255, 194, 226, 0.48) 0%, rgba(199, 222, 255, 0.50) 30%, rgba(198, 246, 231, 0.46) 62%, rgba(255, 228, 185, 0.44) 100%) !important;
    background-size: 240% 240% !important;
    filter: blur(46px) !important;
    opacity: .84 !important;
    animation: homepageGradientFlow 13s ease-in-out infinite, homepageAuraFlow 10s ease-in-out infinite !important;
}

body.site-main.site-index .app-container.ins-shell::after,
body.site-index:not(.site-subsite) .app-container.ins-shell::after {
    content: "" !important;
    display: block !important;
    background:
        linear-gradient(135deg, rgba(255, 208, 228, 0.30) 0%, rgba(196, 230, 255, 0.34) 34%, rgba(207, 249, 235, 0.28) 72%, rgba(255, 234, 203, 0.24) 100%) !important;
    background-size: 260% 260% !important;
    filter: blur(58px) !important;
    opacity: .58 !important;
    animation: homepageGradientFlow 16s ease-in-out infinite reverse, homepageAuraSweep 12s ease-in-out infinite !important;
}

body.site-main.site-index .ins-hero .ins-panel,
body.site-index:not(.site-subsite) .ins-hero .ins-panel {
    background:
        radial-gradient(circle at 12% 26%, rgba(255, 188, 221, 0.50) 0, rgba(255,188,221,0) 32%),
        radial-gradient(circle at 86% 22%, rgba(176, 225, 255, 0.52) 0, rgba(176,225,255,0) 34%),
        linear-gradient(118deg, rgba(255,255,255,0.82) 0%, rgba(247,250,255,0.64) 24%, rgba(241,245,255,0.60) 52%, rgba(246,255,250,0.58) 76%, rgba(255,246,235,0.66) 100%) !important;
    background-size: 180% 180%, 220% 220%, 320% 320% !important;
    animation: codexMainShopAuroraFlowV3 19s ease-in-out infinite !important;
    border: 1px solid rgba(255,255,255,0.48) !important;
    box-shadow: 0 22px 48px rgba(92, 105, 150, 0.14) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

body.site-main.site-index .ins-hero .ins-panel::before,
body.site-index:not(.site-subsite) .ins-hero .ins-panel::before {
    content: "" !important;
    display: block !important;
    background:
        radial-gradient(circle at 36% 42%, rgba(255, 154, 201, 0.90) 0, rgba(255,154,201,0.58) 24%, rgba(255,154,201,0) 66%),
        radial-gradient(circle at 74% 38%, rgba(160, 216, 255, 0.82) 0, rgba(160,216,255,0.38) 20%, rgba(160,216,255,0) 68%) !important;
    filter: blur(28px) !important;
    opacity: .92 !important;
    animation: heroBlobDriftA 7.6s ease-in-out infinite alternate !important;
}

body.site-main.site-index .ins-hero .ins-panel::after,
body.site-index:not(.site-subsite) .ins-hero .ins-panel::after {
    content: "" !important;
    display: block !important;
    background:
        radial-gradient(circle at 40% 42%, rgba(255, 214, 170, 0.82) 0, rgba(255,214,170,0.42) 24%, rgba(255,214,170,0) 70%),
        radial-gradient(circle at 68% 38%, rgba(177, 234, 255, 0.76) 0, rgba(177,234,255,0.32) 20%, rgba(177,234,255,0) 68%) !important;
    filter: blur(28px) !important;
    opacity: .88 !important;
    animation: heroBlobDriftB 8.2s ease-in-out infinite alternate !important;
}

body.site-main.site-index .ins-action,
body.site-main.site-index .ins-tab,
body.site-index:not(.site-subsite) .ins-action,
body.site-index:not(.site-subsite) .ins-tab {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.54)) !important;
    color: #22324a !important;
    border: 1px solid rgba(255,255,255,0.58) !important;
    box-shadow: 0 10px 24px rgba(101, 113, 160, 0.10) !important;
    backdrop-filter: blur(15px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(145%) !important;
}

body.site-main.site-index .ins-action.primary,
body.site-main.site-index .ins-tab.is-special,
body.site-main.site-index .n-btn,
body.site-main.site-index .btn-golden,
body.site-index:not(.site-subsite) .ins-action.primary,
body.site-index:not(.site-subsite) .ins-tab.is-special,
body.site-index:not(.site-subsite) .n-btn,
body.site-index:not(.site-subsite) .btn-golden {
    background: linear-gradient(135deg, #ff8db8 0%, #879cff 54%, #79ddd2 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.68) !important;
    box-shadow: 0 14px 30px rgba(128, 140, 218, 0.24) !important;
}

body.site-main.site-index .ins-toolbar > .ins-action,
body.site-index:not(.site-subsite) .ins-toolbar > .ins-action {
    background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.50)) !important;
    color: #24334a !important;
    border: 1px solid rgba(255,255,255,0.56) !important;
    box-shadow: 0 10px 24px rgba(101, 113, 160, 0.10) !important;
}

body.site-main.site-index .ins-grid,
body.site-index:not(.site-subsite) .ins-grid {
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)) !important;
    gap: 14px !important;
}

body.site-main.site-index .ins-card,
body.site-main.site-index .product-card,
body.site-index:not(.site-subsite) .ins-card,
body.site-index:not(.site-subsite) .product-card {
    min-height: 154px !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.34)) !important;
    border: 1px solid rgba(255,255,255,0.48) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 36px rgba(94, 104, 146, 0.14) !important;
    backdrop-filter: blur(18px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
}

body.site-main.site-index .ins-card::before,
body.site-main.site-index .product-card::before,
body.site-index:not(.site-subsite) .ins-card::before,
body.site-index:not(.site-subsite) .product-card::before {
    content: "" !important;
    display: block !important;
    background:
        linear-gradient(140deg, rgba(255,255,255,0.58) 0, rgba(255,255,255,0) 36%),
        radial-gradient(circle at 92% 10%, rgba(168, 217, 255, 0.24) 0, rgba(168,217,255,0) 34%),
        radial-gradient(circle at 8% 92%, rgba(255, 194, 223, 0.22) 0, rgba(255,194,223,0) 32%) !important;
    opacity: .95 !important;
}

body.site-main.site-index .ins-card:hover,
body.site-main.site-index .product-card:hover,
body.site-index:not(.site-subsite) .ins-card:hover,
body.site-index:not(.site-subsite) .product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 24px 48px rgba(98, 108, 152, 0.18) !important;
    border-color: rgba(255,255,255,0.62) !important;
}

body.site-main.site-index .ins-card-top,
body.site-index:not(.site-subsite) .ins-card-top {
    padding: 11px 12px 0 !important;
}

body.site-main.site-index .ins-card-body,
body.site-index:not(.site-subsite) .ins-card-body {
    padding: 9px 12px 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
}

body.site-main.site-index .ins-card-foot,
body.site-index:not(.site-subsite) .ins-card-foot {
    margin-top: auto !important;
    padding: 9px 12px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.site-main.site-index .ins-card .p-name,
body.site-index:not(.site-subsite) .ins-card .p-name {
    min-height: 34px !important;
    font-size: 12px !important;
    line-height: 1.36 !important;
}

body.site-main.site-index .ins-card .p-price,
body.site-index:not(.site-subsite) .ins-card .p-price {
    margin: 8px 0 6px !important;
    font-size: 19px !important;
    color: #2c5f9f !important;
}

body.site-main.site-index .ins-card .p-price small,
body.site-index:not(.site-subsite) .ins-card .p-price small {
    font-size: 11px !important;
}

body.site-main.site-index .ins-card-meta,
body.site-index:not(.site-subsite) .ins-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 28px !important;
    margin-top: 3px !important;
}

body.site-main.site-index .ins-card-meta .p-stock,
body.site-index:not(.site-subsite) .ins-card-meta .p-stock {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    margin-top: 2px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.12 !important;
    color: #3667a5 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(242,247,255,0.52)) !important;
    border: 1px solid rgba(147, 188, 255, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.54) !important;
    backdrop-filter: blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(145%) !important;
}

body.site-main.site-index .ins-card-action,
body.site-index:not(.site-subsite) .ins-card-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.66) !important;
    background: linear-gradient(135deg, #ff93bc 0%, #8a9dff 52%, #7edfd3 100%) !important;
    box-shadow: 0 12px 24px rgba(126, 138, 212, 0.22) !important;
    color: #fff !important;
    font-size: 0 !important;
    font-weight: 800 !important;
}

body.site-main.site-index .ins-card-action::after,
body.site-index:not(.site-subsite) .ins-card-action::after {
    content: "\8d2d\4e70";
    font-size: 12px !important;
    line-height: 1 !important;
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
    body.site-main.site-index,
    body.site-index:not(.site-subsite) {
        background-size: 100% 100%, 100% 100%, 320% 320% !important;
        animation: codexMainShopAuroraFlowV3 20s ease-in-out infinite !important;
    }

    body.site-main.site-index .app-container.ins-shell::before,
    body.site-index:not(.site-subsite) .app-container.ins-shell::before,
    body.site-main.site-index .app-container.ins-shell::after,
    body.site-index:not(.site-subsite) .app-container.ins-shell::after,
    body.site-main.site-index .ins-hero .ins-panel::before,
    body.site-index:not(.site-subsite) .ins-hero .ins-panel::before,
    body.site-main.site-index .ins-hero .ins-panel::after,
    body.site-index:not(.site-subsite) .ins-hero .ins-panel::after {
        content: "" !important;
        display: block !important;
    }

    body.site-main.site-index .ins-panel,
    body.site-main.site-index .ins-side,
    body.site-main.site-index .ins-toolbar,
    body.site-main.site-index .ins-help,
    body.site-main.site-index .ins-alert,
    body.site-main.site-index .ins-empty,
    body.site-main.site-index .ins-card,
    body.site-main.site-index .ins-feed-card,
    body.site-main.site-index .ins-stat,
    body.site-main.site-index .ins-action,
    body.site-main.site-index .ins-tab,
    body.site-main.site-index .p-stock,
    body.site-index:not(.site-subsite) .ins-panel,
    body.site-index:not(.site-subsite) .ins-side,
    body.site-index:not(.site-subsite) .ins-toolbar,
    body.site-index:not(.site-subsite) .ins-help,
    body.site-index:not(.site-subsite) .ins-alert,
    body.site-index:not(.site-subsite) .ins-empty,
    body.site-index:not(.site-subsite) .ins-card,
    body.site-index:not(.site-subsite) .ins-feed-card,
    body.site-index:not(.site-subsite) .ins-stat,
    body.site-index:not(.site-subsite) .ins-action,
    body.site-index:not(.site-subsite) .ins-tab,
    body.site-index:not(.site-subsite) .p-stock {
        backdrop-filter: blur(14px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
    }

    body.site-main.site-index .ins-grid,
    body.site-index:not(.site-subsite) .ins-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.site-main.site-index .ins-card,
    body.site-main.site-index .product-card,
    body.site-index:not(.site-subsite) .ins-card,
    body.site-index:not(.site-subsite) .product-card {
        min-height: 166px !important;
        border-radius: 17px !important;
    }

    body.site-main.site-index .ins-card-top,
    body.site-index:not(.site-subsite) .ins-card-top {
        padding: 11px 11px 0 !important;
    }

    body.site-main.site-index .ins-card-body,
    body.site-index:not(.site-subsite) .ins-card-body {
        padding: 9px 11px 0 !important;
    }

    body.site-main.site-index .ins-card-foot,
    body.site-index:not(.site-subsite) .ins-card-foot {
        padding: 9px 11px 11px !important;
    }

    body.site-main.site-index .ins-card .p-name,
    body.site-index:not(.site-subsite) .ins-card .p-name {
        min-height: 32px !important;
        font-size: 11px !important;
        line-height: 1.32 !important;
    }

    body.site-main.site-index .ins-card .p-price,
    body.site-index:not(.site-subsite) .ins-card .p-price {
        font-size: 18px !important;
    }
}

/* Codex main shop aurora visibility tune: slower and more obvious motion. */
body.site-main.site-index,
body.site-index:not(.site-subsite) {
    background-size: 100% 100%, 100% 100%, 420% 420% !important;
    animation: codexMainShopAuroraFlowV3 28s ease-in-out infinite !important;
}

body.site-main.site-index .app-container.ins-shell::before,
body.site-index:not(.site-subsite) .app-container.ins-shell::before {
    opacity: .92 !important;
    animation: homepageGradientFlow 16s ease-in-out infinite, homepageAuraFlow 12s ease-in-out infinite !important;
}

body.site-main.site-index .app-container.ins-shell::after,
body.site-index:not(.site-subsite) .app-container.ins-shell::after {
    opacity: .64 !important;
    animation: homepageGradientFlow 18s ease-in-out infinite reverse, homepageAuraSweep 14s ease-in-out infinite !important;
}

body.site-main.site-index .ins-hero .ins-panel,
body.site-index:not(.site-subsite) .ins-hero .ins-panel {
    animation: codexMainShopAuroraFlowV3 24s ease-in-out infinite !important;
}

/* Codex mobile card compositor guard: keep card text and faux-glass stable on rapid scroll. */
@media (hover: none), (pointer: coarse), (max-width: 820px) {
    body.site-main.site-index .ins-card,
    body.site-main.site-index .product-card,
    body.site-index:not(.site-subsite) .ins-card,
    body.site-index:not(.site-subsite) .product-card {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.82), rgba(247,250,255,0.62)) !important;
        border: 1px solid rgba(255,255,255,0.58) !important;
        box-shadow:
            0 16px 30px rgba(101, 112, 156, 0.14),
            inset 0 1px 0 rgba(255,255,255,0.74) !important;
        backdrop-filter: blur(8px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(118%) !important;
        contain: layout paint !important;
        isolation: isolate !important;
        overflow: hidden !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        will-change: transform !important;
    }

    body.site-main.site-index .ins-card::before,
    body.site-main.site-index .product-card::before,
    body.site-index:not(.site-subsite) .ins-card::before,
    body.site-index:not(.site-subsite) .product-card::before {
        content: "" !important;
        display: block !important;
        opacity: .92 !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        background:
            linear-gradient(142deg, rgba(255,255,255,0.56) 0, rgba(255,255,255,0) 38%),
            radial-gradient(circle at 90% 10%, rgba(173, 221, 255, 0.18) 0, rgba(173,221,255,0) 30%),
            radial-gradient(circle at 10% 90%, rgba(255, 193, 222, 0.18) 0, rgba(255,193,222,0) 28%) !important;
    }

    body.site-main.site-index .ins-card-top,
    body.site-main.site-index .ins-card-body,
    body.site-main.site-index .ins-card-foot,
    body.site-main.site-index .ins-card-code,
    body.site-main.site-index .ins-card-action,
    body.site-main.site-index .ins-card .p-name,
    body.site-main.site-index .ins-card .p-price,
    body.site-main.site-index .ins-card .p-price small,
    body.site-main.site-index .ins-card-meta,
    body.site-main.site-index .ins-card-meta .p-stock,
    body.site-index:not(.site-subsite) .ins-card-top,
    body.site-index:not(.site-subsite) .ins-card-body,
    body.site-index:not(.site-subsite) .ins-card-foot,
    body.site-index:not(.site-subsite) .ins-card-code,
    body.site-index:not(.site-subsite) .ins-card-action,
    body.site-index:not(.site-subsite) .ins-card .p-name,
    body.site-index:not(.site-subsite) .ins-card .p-price,
    body.site-index:not(.site-subsite) .ins-card .p-price small,
    body.site-index:not(.site-subsite) .ins-card-meta,
    body.site-index:not(.site-subsite) .ins-card-meta .p-stock {
        position: relative !important;
        z-index: 3 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        -webkit-text-fill-color: currentColor !important;
    }

    body.site-main.site-index .ins-card-meta .p-stock,
    body.site-index:not(.site-subsite) .ins-card-meta .p-stock {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(243,247,255,0.72)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
    }

    body.site-main.site-index .ins-card-action,
    body.site-index:not(.site-subsite) .ins-card-action {
        min-width: 64px !important;
        min-height: 32px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        color: #fff !important;
    }

    body.site-main.site-index .ins-card-action::after,
    body.site-index:not(.site-subsite) .ins-card-action::after {
        content: none !important;
        display: none !important;
    }

    body.site-main.site-index .ins-card:hover,
    body.site-main.site-index .product-card:hover,
    body.site-index:not(.site-subsite) .ins-card:hover,
    body.site-index:not(.site-subsite) .product-card:hover {
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Codex mobile WebView fallback: faux-glass cards, no risky blur compositing on product tiles. */
@media (hover: none), (pointer: coarse), (max-width: 820px) {
    body.site-main.site-index .ins-grid,
    body.site-index:not(.site-subsite) .ins-grid {
        transform: none !important;
        will-change: auto !important;
    }

    body.site-main.site-index .ins-card,
    body.site-main.site-index .product-card,
    body.site-index:not(.site-subsite) .ins-card,
    body.site-index:not(.site-subsite) .product-card {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,250,255,0.88)) !important;
        border: 1px solid rgba(255,255,255,0.74) !important;
        box-shadow:
            0 14px 28px rgba(101, 112, 156, 0.12),
            inset 0 1px 0 rgba(255,255,255,0.82) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        contain: none !important;
        isolation: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
    }

    body.site-main.site-index .ins-card::before,
    body.site-main.site-index .product-card::before,
    body.site-index:not(.site-subsite) .ins-card::before,
    body.site-index:not(.site-subsite) .product-card::before {
        content: "" !important;
        display: block !important;
        opacity: .92 !important;
        transform: none !important;
        -webkit-transform: none !important;
        background:
            linear-gradient(144deg, rgba(255,255,255,0.54) 0, rgba(255,255,255,0) 42%),
            radial-gradient(circle at 90% 8%, rgba(172, 221, 255, 0.16) 0, rgba(172,221,255,0) 28%),
            radial-gradient(circle at 12% 92%, rgba(255, 194, 221, 0.14) 0, rgba(255,194,221,0) 24%) !important;
    }

    body.site-main.site-index .ins-card-top,
    body.site-main.site-index .ins-card-body,
    body.site-main.site-index .ins-card-foot,
    body.site-main.site-index .ins-card-code,
    body.site-main.site-index .ins-card-action,
    body.site-main.site-index .ins-card .p-name,
    body.site-main.site-index .ins-card .p-price,
    body.site-main.site-index .ins-card .p-price small,
    body.site-main.site-index .ins-card-meta,
    body.site-main.site-index .ins-card-meta .p-stock,
    body.site-index:not(.site-subsite) .ins-card-top,
    body.site-index:not(.site-subsite) .ins-card-body,
    body.site-index:not(.site-subsite) .ins-card-foot,
    body.site-index:not(.site-subsite) .ins-card-code,
    body.site-index:not(.site-subsite) .ins-card-action,
    body.site-index:not(.site-subsite) .ins-card .p-name,
    body.site-index:not(.site-subsite) .ins-card .p-price,
    body.site-index:not(.site-subsite) .ins-card .p-price small,
    body.site-index:not(.site-subsite) .ins-card-meta,
    body.site-index:not(.site-subsite) .ins-card-meta .p-stock {
        position: relative !important;
        z-index: 2 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        -webkit-text-fill-color: currentColor !important;
        text-shadow: none !important;
    }

    body.site-main.site-index .ins-card-meta .p-stock,
    body.site-index:not(.site-subsite) .ins-card-meta .p-stock {
        background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(243,247,255,0.82)) !important;
        border-color: rgba(150, 190, 255, 0.32) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.78) !important;
    }

    body.site-main.site-index .ins-card-action,
    body.site-index:not(.site-subsite) .ins-card-action {
        min-width: 64px !important;
        min-height: 32px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        background: linear-gradient(135deg, #ff93bc 0%, #8a9dff 52%, #7edfd3 100%) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(126, 138, 212, 0.18) !important;
    }

    body.site-main.site-index .ins-card-action::after,
    body.site-index:not(.site-subsite) .ins-card-action::after {
        content: none !important;
        display: none !important;
    }

    body.site-main.site-index .ins-card:hover,
    body.site-main.site-index .product-card:hover,
    body.site-index:not(.site-subsite) .ins-card:hover,
    body.site-index:not(.site-subsite) .product-card:hover {
        transform: none !important;
        box-shadow:
            0 14px 28px rgba(101, 112, 156, 0.12),
            inset 0 1px 0 rgba(255,255,255,0.82) !important;
    }
}

/* Codex in-app-browser safe mode: disable fragile card compositing for WeChat/QQ webviews. */
@media (hover: none), (pointer: coarse), (max-width: 820px) {
    body.site-main.site-index.site-safe-cards .ins-card,
    body.site-main.site-index.site-safe-cards .product-card,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card,
    body.site-index.site-safe-cards:not(.site-subsite) .product-card {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.94)) !important;
        border: 1px solid rgba(234, 240, 255, 0.96) !important;
        box-shadow:
            0 12px 22px rgba(101, 112, 156, 0.10),
            inset 0 1px 0 rgba(255,255,255,0.88) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        contain: none !important;
        isolation: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
    }

    body.site-main.site-index.site-safe-cards .ins-card::before,
    body.site-main.site-index.site-safe-cards .product-card::before,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card::before,
    body.site-index.site-safe-cards:not(.site-subsite) .product-card::before {
        content: none !important;
        display: none !important;
    }

    body.site-main.site-index.site-safe-cards .ins-card-top,
    body.site-main.site-index.site-safe-cards .ins-card-body,
    body.site-main.site-index.site-safe-cards .ins-card-foot,
    body.site-main.site-index.site-safe-cards .ins-card-code,
    body.site-main.site-index.site-safe-cards .ins-card-action,
    body.site-main.site-index.site-safe-cards .ins-card .p-name,
    body.site-main.site-index.site-safe-cards .ins-card .p-price,
    body.site-main.site-index.site-safe-cards .ins-card .p-price small,
    body.site-main.site-index.site-safe-cards .ins-card-meta,
    body.site-main.site-index.site-safe-cards .ins-card-meta .p-stock,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-top,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-body,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-foot,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-code,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-action,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card .p-name,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card .p-price,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card .p-price small,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-meta,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-meta .p-stock {
        position: relative !important;
        z-index: 2 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        -webkit-text-fill-color: currentColor !important;
    }

    body.site-main.site-index.site-safe-cards .ins-card .p-name,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card .p-name {
        display: block !important;
        min-height: auto !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
        white-space: normal !important;
    }

    body.site-main.site-index.site-safe-cards .ins-card .p-price,
    body.site-main.site-index.site-safe-cards .ins-card .p-price small,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card .p-price,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card .p-price small {
        background: none !important;
        -webkit-text-fill-color: currentColor !important;
    }

    body.site-main.site-index.site-safe-cards .ins-card-meta .p-stock,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-meta .p-stock {
        background: #f6f9ff !important;
        border-color: rgba(150, 190, 255, 0.28) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.site-main.site-index.site-safe-cards .ins-card-action,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-action {
        min-width: 64px !important;
        min-height: 32px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        color: #fff !important;
        background: linear-gradient(135deg, #ff93bc 0%, #8a9dff 52%, #7edfd3 100%) !important;
    }

    body.site-main.site-index.site-safe-cards .ins-card-action::after,
    body.site-index.site-safe-cards:not(.site-subsite) .ins-card-action::after {
        content: none !important;
        display: none !important;
    }
}

body.site-subsite.site-index.palette-red {
    --index-accent: #ef4444;
    --index-accent-strong: #b91c1c;
    --index-accent-soft: rgba(239, 68, 68, 0.22);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 26%),
        radial-gradient(circle at 86% 14%, rgba(248,113,113,.24) 0, rgba(248,113,113,0) 28%),
        linear-gradient(180deg, #fff5f5 0%, #fee2e2 52%, #fffafa 100%) !important;
}

body.site-subsite.site-index.palette-orange {
    --index-accent: #f97316;
    --index-accent-strong: #c2410c;
    --index-accent-soft: rgba(249, 115, 22, 0.22);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 26%),
        radial-gradient(circle at 86% 14%, rgba(251,146,60,.24) 0, rgba(251,146,60,0) 28%),
        linear-gradient(180deg, #fff7ed 0%, #ffedd5 52%, #fffaf4 100%) !important;
}

body.site-subsite.site-index.palette-yellow {
    --index-accent: #eab308;
    --index-accent-strong: #a16207;
    --index-accent-soft: rgba(234, 179, 8, 0.22);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 26%),
        radial-gradient(circle at 86% 14%, rgba(250,204,21,.26) 0, rgba(250,204,21,0) 28%),
        linear-gradient(180deg, #fefce8 0%, #fef3c7 52%, #fffef4 100%) !important;
}

body.site-subsite.site-index.palette-green {
    --index-accent: #22c55e;
    --index-accent-strong: #15803d;
    --index-accent-soft: rgba(34, 197, 94, 0.22);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 26%),
        radial-gradient(circle at 86% 14%, rgba(74,222,128,.24) 0, rgba(74,222,128,0) 28%),
        linear-gradient(180deg, #f0fdf4 0%, #dcfce7 52%, #f8fff9 100%) !important;
}

body.site-subsite.site-index.palette-cyan {
    --index-accent: #06b6d4;
    --index-accent-strong: #0e7490;
    --index-accent-soft: rgba(6, 182, 212, 0.22);
}

body.site-subsite.site-index.palette-blue {
    --index-accent: #2563eb;
    --index-accent-strong: #1d4ed8;
    --index-accent-soft: rgba(37, 99, 235, 0.22);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 26%),
        radial-gradient(circle at 86% 14%, rgba(96,165,250,.24) 0, rgba(96,165,250,0) 28%),
        linear-gradient(180deg, #eff6ff 0%, #dbeafe 52%, #f8fbff 100%) !important;
}

body.site-subsite.site-index.palette-purple {
    --index-accent: #8b5cf6;
    --index-accent-strong: #6d28d9;
    --index-accent-soft: rgba(139, 92, 246, 0.22);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 26%),
        radial-gradient(circle at 86% 14%, rgba(167,139,250,.24) 0, rgba(167,139,250,0) 28%),
        linear-gradient(180deg, #f5f3ff 0%, #ede9fe 52%, #fbfaff 100%) !important;
}

body.site-subsite.site-index.palette-white {
    --index-accent: #111827;
    --index-accent-strong: #020617;
    --index-accent-soft: rgba(100, 116, 139, 0.18);
    --index-text: #111827;
    --index-muted: rgba(31, 41, 55, .68);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 26%),
        radial-gradient(circle at 86% 14%, rgba(148,163,184,.16) 0, rgba(148,163,184,0) 28%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 52%, #f8fafc 100%) !important;
}

body.site-subsite.site-index[class*="palette-"] .app-container.ins-shell::before {
    background:
        linear-gradient(120deg, var(--index-accent-soft) 0%, rgba(255,255,255,.64) 48%, var(--index-accent-soft) 100%) !important;
}

body.site-subsite.site-index[class*="palette-"] {
    --liquid-accent: var(--index-accent);
    --liquid-accent-soft: var(--index-accent-soft);
    --liquid-accent-line: color-mix(in srgb, var(--index-accent) 22%, #e2e8f0);
}

body.site-subsite.site-index[class*="palette-"] .ins-hero .ins-panel {
    background:
        radial-gradient(circle at 16% 28%, var(--index-accent-soft) 0, rgba(255,255,255,0) 30%),
        radial-gradient(circle at 84% 22%, rgba(255,255,255,.54) 0, rgba(255,255,255,0) 34%),
        linear-gradient(118deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.84) 52%, var(--index-accent-soft) 100%) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-action.primary,
body.site-subsite.site-index[class*="palette-"] .ins-toolbar > .ins-action,
body.site-subsite.site-index[class*="palette-"] .ins-tab.is-special,
body.site-subsite.site-index[class*="palette-"] .n-btn,
body.site-subsite.site-index[class*="palette-"] .btn-golden {
    background: linear-gradient(135deg, var(--index-accent), var(--index-accent-strong)) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.58) !important;
    box-shadow: 0 10px 22px var(--index-accent-soft) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-tab.active,
body.site-subsite.site-index[class*="palette-"] .ins-tab:hover,
body.site-subsite.site-index[class*="palette-"] .ins-brand i,
body.site-subsite.site-index[class*="palette-"] .ins-card-icon,
body.site-subsite.site-index[class*="palette-"] .ins-card-arrow,
body.site-subsite.site-index[class*="palette-"] .p-price {
    color: var(--index-accent) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card {
    border-color: color-mix(in srgb, var(--index-accent) 18%, #e2e8f0) !important;
}

body.site-subsite.site-index[class*="palette-"] .p-stock {
    background: color-mix(in srgb, var(--index-accent) 9%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--index-accent) 18%, #e2e8f0) !important;
}

/* Clean subsite homepage palettes: color the UI without placing a translucent layer over it. */
body.site-subsite.site-index[class*="palette-"] {
    --index-accent: var(--subsite-accent);
    --index-accent-strong: var(--subsite-accent-strong);
    --index-accent-soft: var(--subsite-accent-soft);
    --index-accent-line: var(--subsite-accent-line);
    --index-text: #0f172a;
    --index-muted: #64748b;
    background: linear-gradient(180deg, var(--subsite-page-bg) 0%, #ffffff 46%, #f8fafc 100%) !important;
}

body.site-subsite.site-index[class*="palette-"] .app-container.ins-shell::before,
body.site-subsite.site-index[class*="palette-"] .app-container.ins-shell::after,
body.site-subsite.site-index[class*="palette-"] .ins-hero .ins-panel::before,
body.site-subsite.site-index[class*="palette-"] .ins-hero .ins-panel::after,
body.site-subsite.site-index[class*="palette-"] .ins-card::before,
body.site-subsite.site-index[class*="palette-"] .product-card::before,
body.site-subsite.site-index[class*="palette-"] .ins-tabs::before,
body.site-subsite.site-index[class*="palette-"] .ins-toolbar::before {
    content: none !important;
    display: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-hero .ins-panel,
body.site-subsite.site-index[class*="palette-"] .ins-tabs,
body.site-subsite.site-index[class*="palette-"] .ins-toolbar,
body.site-subsite.site-index[class*="palette-"] .ins-card,
body.site-subsite.site-index[class*="palette-"] .product-card,
body.site-subsite.site-index[class*="palette-"] .ins-empty {
    background: #ffffff !important;
    border-color: rgba(226, 232, 240, 0.96) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-hero .ins-panel {
    border-top: 4px solid var(--index-accent) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-brand i,
body.site-subsite.site-index[class*="palette-"] .ins-card-icon,
body.site-subsite.site-index[class*="palette-"] .ins-card-arrow,
body.site-subsite.site-index[class*="palette-"] .p-price,
body.site-subsite.site-index[class*="palette-"] .p-price small,
body.site-subsite.site-index[class*="palette-"] .ins-tab:hover {
    color: var(--index-accent-strong) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-action.primary,
body.site-subsite.site-index[class*="palette-"] .ins-toolbar > .ins-action,
body.site-subsite.site-index[class*="palette-"] .ins-tab.is-special,
body.site-subsite.site-index[class*="palette-"] .n-btn,
body.site-subsite.site-index[class*="palette-"] .btn-golden,
body.site-subsite.site-index[class*="palette-"] .ins-card-action {
    background: var(--index-accent) !important;
    border-color: var(--index-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-action,
body.site-subsite.site-index[class*="palette-"] .ins-tab,
body.site-subsite.site-index[class*="palette-"] .p-stock {
    background: var(--index-accent-soft) !important;
    border-color: var(--index-accent-line) !important;
    color: var(--index-accent-strong) !important;
    box-shadow: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-tab.active {
    background: var(--index-accent) !important;
    border-color: var(--index-accent) !important;
    color: #ffffff !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card:hover,
body.site-subsite.site-index[class*="palette-"] .product-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card .p-name,
body.site-subsite.site-index[class*="palette-"] .product-card .p-name,
body.site-subsite.site-index[class*="palette-"] .ins-card-meta {
    color: #0f172a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Polished subsite storefront pass. Keep it compact, clear, and less blocky. */
body.site-subsite.site-index[class*="palette-"] {
    background: #f6f8fb !important;
}

body.site-subsite.site-index[class*="palette-"] .app-container.ins-shell {
    width: min(100% - 20px, 1120px) !important;
    padding-top: 10px !important;
    padding-bottom: 82px !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-hero {
    display: block !important;
    margin: 0 0 12px !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-side {
    display: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-hero .ins-panel {
    border-radius: 18px !important;
    padding: 15px !important;
    border-top: 0 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-topbar {
    margin-bottom: 14px !important;
    gap: 10px !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-brand {
    gap: 8px !important;
    min-width: 0 !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-brand i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: var(--index-accent) !important;
    box-shadow: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-brand span,
body.site-subsite.site-index[class*="palette-"] .ins-kicker {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-brand span {
    max-width: 116px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    color: #475569 !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-actions {
    gap: 7px !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-action {
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-kicker {
    display: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-title {
    margin: 2px 0 8px !important;
    font-size: clamp(25px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    color: #0f172a !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-subtitle {
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-statline {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 13px !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-stat {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    box-shadow: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-stat span {
    font-size: 11px !important;
    color: #64748b !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-stat strong {
    margin-top: 4px !important;
    font-size: 18px !important;
    color: var(--index-accent-strong) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-toolbar {
    display: block !important;
    margin: 10px 0 13px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-tabs {
    display: flex !important;
    gap: 7px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-tabs::-webkit-scrollbar {
    display: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-tab {
    flex: 0 0 auto !important;
    max-width: 78vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-toolbar > .ins-action {
    display: inline-flex !important;
    margin-top: 8px !important;
    min-height: 32px !important;
    background: #fff !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-toolbar {
    overflow: hidden !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-toolbar .ins-action i,
body.site-subsite.site-index[class*="palette-"] .ins-toolbar .ins-action span {
    line-height: 1 !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-section {
    margin-top: 14px !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-section-head {
    margin: 0 0 9px !important;
    align-items: center !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-section-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    color: #0f172a !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-section-meta {
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    font-size: 12px !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-grid.ins-grid-sparse {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card,
body.site-subsite.site-index[class*="palette-"] .product-card {
    min-height: 138px !important;
    border-radius: 16px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card-top,
body.site-subsite.site-index[class*="palette-"] .ins-card-icon,
body.site-subsite.site-index[class*="palette-"] .ins-card-code,
body.site-subsite.site-index[class*="palette-"] .p-daily,
body.site-subsite.site-index[class*="palette-"] .p-tip {
    display: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card-body {
    padding: 0 !important;
    min-height: 0 !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card .p-name {
    min-height: 36px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card .p-price {
    margin: 9px 0 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: var(--index-accent-strong) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card .p-price small {
    font-size: 13px !important;
    color: var(--index-accent-strong) !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card-meta,
body.site-subsite.site-index[class*="palette-"] .ins-card-footline {
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

body.site-subsite.site-index[class*="palette-"] .p-stock {
    min-height: 25px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 25px !important;
    white-space: nowrap !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card-foot {
    margin-top: 10px !important;
    min-height: 30px !important;
    padding: 0 !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card-action {
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

body.site-subsite.site-index[class*="palette-"] .ins-card-arrow {
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: var(--index-accent-soft) !important;
    color: var(--index-accent-strong) !important;
}

body.site-subsite.site-index[class*="palette-"] .lottery-float {
    right: 14px !important;
    bottom: 16px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18) !important;
}

body.site-subsite.site-index[class*="palette-"] .lottery-float span {
    display: none !important;
}

@media (min-width: 768px) {
    body.site-subsite.site-index[class*="palette-"] .ins-grid,
    body.site-subsite.site-index[class*="palette-"] .ins-grid.ins-grid-sparse {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card,
    body.site-subsite.site-index[class*="palette-"] .product-card {
        min-height: 158px !important;
    }
}

/* Desktop subsite storefront restore. The compact palette pass is for mobile; wide screens need a real desktop composition. */
body.site-subsite.site-index.palette-red { --index-accent-rgb: 239, 68, 68; }
body.site-subsite.site-index.palette-orange { --index-accent-rgb: 249, 115, 22; }
body.site-subsite.site-index.palette-yellow { --index-accent-rgb: 202, 138, 4; }
body.site-subsite.site-index.palette-green { --index-accent-rgb: 22, 163, 74; }
body.site-subsite.site-index.palette-cyan { --index-accent-rgb: 8, 145, 178; }
body.site-subsite.site-index.palette-blue { --index-accent-rgb: 37, 99, 235; }
body.site-subsite.site-index.palette-purple { --index-accent-rgb: 124, 58, 237; }
body.site-subsite.site-index.palette-white { --index-accent-rgb: 15, 23, 42; }

@media (min-width: 900px) {
    body.site-subsite.site-index[class*="palette-"] {
        background:
            radial-gradient(circle at 10% 0%, rgba(var(--index-accent-rgb), 0.10) 0, rgba(var(--index-accent-rgb), 0) 28%),
            linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .app-container.ins-shell {
        width: min(100% - 56px, 1180px) !important;
        padding-top: 24px !important;
        padding-bottom: 96px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 320px !important;
        align-items: stretch !important;
        gap: 18px !important;
        margin: 0 0 18px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-side {
        display: block !important;
        min-height: 100% !important;
        padding: 14px !important;
        border-radius: 24px !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-phone {
        min-height: 100% !important;
        padding: 12px !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
        border: 1px solid #e2e8f0 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-phone-feed {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-content: start !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-feed-card {
        min-height: 76px !important;
        padding: 13px 14px !important;
        border-radius: 16px !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-feed-card span {
        font-size: 11px !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
        color: #94a3b8 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-feed-card strong {
        margin-top: 8px !important;
        font-size: 20px !important;
        color: var(--index-accent-strong) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-hero .ins-panel {
        min-height: 318px !important;
        padding: 30px !important;
        border-radius: 24px !important;
        background:
            radial-gradient(circle at 8% 8%, rgba(var(--index-accent-rgb), 0.13) 0, rgba(var(--index-accent-rgb), 0) 34%),
            linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-topbar {
        align-items: center !important;
        margin-bottom: 34px !important;
        gap: 14px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-brand i {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 24px rgba(var(--index-accent-rgb), 0.18) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-brand span {
        max-width: none !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
        color: #64748b !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-actions {
        gap: 9px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-action {
        min-height: 38px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-kicker {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        margin-bottom: 10px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
        color: var(--index-accent-strong) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-title {
        max-width: 720px !important;
        margin: 0 0 14px !important;
        font-size: 64px !important;
        line-height: .98 !important;
        font-weight: 950 !important;
        color: #0f172a !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-subtitle {
        max-width: 640px !important;
        font-size: 14px !important;
        line-height: 1.75 !important;
        color: #475569 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-statline {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 26px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-stat {
        min-height: 74px !important;
        padding: 13px 14px !important;
        border-radius: 17px !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-stat span {
        font-size: 12px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-stat strong {
        font-size: 22px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 0 0 20px !important;
        padding: 12px !important;
        border-radius: 20px !important;
        overflow: visible !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-tabs {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 8px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-tab {
        max-width: none !important;
        min-height: 36px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-toolbar > .ins-action {
        margin-top: 0 !important;
        min-height: 36px !important;
        padding: 0 14px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-section {
        margin-top: 22px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-section-head {
        margin: 0 0 12px !important;
        padding-bottom: 8px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-section-meta {
        min-height: 26px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-grid,
    body.site-subsite.site-index[class*="palette-"] .ins-grid.ins-grid-sparse {
        grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)) !important;
        gap: 14px !important;
        justify-content: stretch !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-grid.ins-grid-sparse[data-count="1"],
    body.site-subsite.site-index[class*="palette-"] .ins-grid.ins-grid-sparse[data-count="2"],
    body.site-subsite.site-index[class*="palette-"] .ins-grid.ins-grid-sparse[data-count="3"] {
        grid-template-columns: repeat(auto-fit, minmax(218px, 280px)) !important;
        justify-content: start !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card,
    body.site-subsite.site-index[class*="palette-"] .product-card {
        min-height: 184px !important;
        padding: 0 !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.065) !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 14px 0 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card-icon {
        display: inline-flex !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 12px !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--index-accent) !important;
        color: #fff !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card-code {
        display: inline-flex !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        color: #94a3b8 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card-body {
        padding: 12px 14px 0 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card .p-name {
        min-height: 40px !important;
        font-size: 14px !important;
        line-height: 1.42 !important;
        font-weight: 850 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card .p-price {
        margin: 8px 0 0 !important;
        font-size: 25px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card .p-price small {
        font-size: 13px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card-meta {
        margin-top: 10px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .p-daily {
        display: inline-flex !important;
        min-height: 24px !important;
        align-items: center !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        background: var(--index-accent-soft) !important;
        color: var(--index-accent-strong) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    body.site-subsite.site-index[class*="palette-"] .p-tip {
        display: block !important;
        margin-top: 8px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        color: #64748b !important;
    }

    body.site-subsite.site-index[class*="palette-"] .p-stock {
        min-height: 24px !important;
        line-height: 24px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card-foot {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: auto !important;
        padding: 12px 14px 14px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card-action {
        min-height: 32px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 32px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .ins-card-arrow {
        display: inline-flex !important;
        width: 32px !important;
        height: 32px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .lottery-float {
        right: 28px !important;
        bottom: 28px !important;
        width: auto !important;
        min-width: 94px !important;
        height: 46px !important;
        padding: 0 15px !important;
        border-radius: 999px !important;
        gap: 8px !important;
    }

    body.site-subsite.site-index[class*="palette-"] .lottery-float span {
        display: inline !important;
    }
}