/*
 * Storefront skin v15 (2026-09-24 design pass over v14, single consolidated layer).
 * Replaces storefront-v14.css. Keeps the v14 iOS palette, navigation (phone chips
 * wrap, never scroll), first-visit gate and reduced-motion layers; the home page
 * body is rebuilt: [公告 | 售后与帮助] hero -> [分类 + 合作与优惠 | 搜索栏 + 商品] catalog.
 * Structured notice markup: store-notice-template.html (.notice-v2).
 */
:root {
    --store-blue: #007aff;
    --store-blue-deep: #0066d6;
    --store-green: #34c759;
    --store-green-deep: #248a3d;
    --store-pink: #ff2d55;
    --store-pink-deep: #e0203f;
    --store-orange: #ff9500;
    --store-orange-deep: #c76a00;
    --store-purple: #af52de;
    --store-red: #ff3b30;
    --store-teal: #30b0c7;
    --store-label: #1c1c1e;
    --store-label-2: rgba(60, 60, 67, .6);
    --store-label-3: rgba(60, 60, 67, .3);
    --store-separator: rgba(60, 60, 67, .18);
    --store-fill: rgba(120, 120, 128, .12);
    --store-fill-2: rgba(120, 120, 128, .08);
    --store-fill-3: rgba(120, 120, 128, .18);
    --store-material: rgba(255, 255, 255, .8);
    --store-material-border: rgba(255, 255, 255, .7);
    --store-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(15, 40, 60, .1);
    --store-radius: 22px;
    --store-radius-sm: 18px;
    --store-ease-out: cubic-bezier(.22, 1, .36, 1);
    --store-ease-spring: cubic-bezier(.34, 1.45, .64, 1);
    --store-ease-ios: cubic-bezier(.25, .1, .25, 1);
    --store-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------- Page background ---------- */
html {
    background: #4caed0;
}

body.storefront-body {
    min-height: 100vh;
    margin: 0;
    background-color: #4caed0;
    background-image: linear-gradient(rgba(236, 247, 242, .15), rgba(45, 151, 187, .19)), var(--store-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    color: var(--store-label);
    font-family: var(--store-font);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Motion vocabulary ---------- */
@keyframes store-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes store-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes store-rise-sm {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes store-row-in {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes store-sheen {
    0% {
        transform: translateX(-180%) skewX(-18deg);
    }

    38%, 100% {
        transform: translateX(460%) skewX(-18deg);
    }
}

@keyframes store-float {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-2px) rotate(-8deg);
    }
}

@keyframes store-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes store-hint-bob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* ---------- Top navigation (iOS nav bar: frosted, hairline, tinted items) ---------- */
body.storefront-body .navbar-acg {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 .5px 0 rgba(60, 60, 67, .26);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

body.storefront-body .store-nav,
body.storefront-body .store-page {
    max-width: 1176px;
}

body.storefront-body .store-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 10px;
    min-height: 54px;
}

body.storefront-body .navbar-brand {
    display: flex;
    align-items: center;
    order: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body.storefront-body .brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef3f6;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 3px 8px rgba(0, 0, 0, .1);
    transition: transform .35s var(--store-ease-spring);
}

body.storefront-body .navbar-brand:hover .brand-logo {
    transform: rotate(-10deg) scale(1.08);
}

body.storefront-body .store-brand-name {
    overflow: hidden;
    color: var(--store-label);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.storefront-body .navbar-toggler {
    display: none !important;
}

body.storefront-body .user-login-box,
body.storefront-body .user-info-box {
    order: 1;
    flex: 0 0 auto;
    margin: 0 !important;
}

body.storefront-body .navbar-collapse,
body.storefront-body .navbar-collapse.collapse {
    display: flex !important;
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
}

body.storefront-body .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0 0 0 auto !important;
    padding: 0;
    list-style: none;
}

body.storefront-body .navbar-nav .nav-item {
    min-width: 0;
}

body.storefront-body .navbar-acg .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--store-label);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.1px;
    line-height: 1;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, transform .2s var(--store-ease-out);
}

body.storefront-body .navbar-acg .nav-link .nav-icon {
    margin: 0;
    font-size: 14px;
    transition: transform .3s var(--store-ease-spring);
}

body.storefront-body .navbar-acg .nav-link:hover .nav-icon {
    transform: translateY(-1px) scale(1.1);
}

body.storefront-body .navbar-acg .nav-link:hover,
body.storefront-body .navbar-acg .nav-link:focus-visible {
    background: var(--store-fill);
    color: var(--store-label);
}

body.storefront-body .navbar-acg .nav-link:active {
    transform: scale(.96);
}

body.storefront-body .navbar-acg .nav-link.active {
    background: rgba(0, 122, 255, .12);
    color: var(--store-blue);
    font-weight: 600;
}

body.storefront-body .navbar-acg .nav-link.is-orange {
    color: var(--store-orange-deep);
}

body.storefront-body .navbar-acg .nav-link.is-blue {
    color: var(--store-blue);
}

body.storefront-body .navbar-acg .nav-link.is-purple {
    color: var(--store-purple);
}

body.storefront-body .navbar-acg .nav-link.is-orange:hover,
body.storefront-body .navbar-acg .nav-link.is-orange.active {
    background: rgba(255, 149, 0, .14);
    color: var(--store-orange-deep);
}

body.storefront-body .navbar-acg .nav-link.is-blue:hover,
body.storefront-body .navbar-acg .nav-link.is-blue.active {
    background: rgba(0, 122, 255, .12);
    color: var(--store-blue);
}

body.storefront-body .navbar-acg .nav-link.is-purple:hover,
body.storefront-body .navbar-acg .nav-link.is-purple.active {
    background: rgba(175, 82, 222, .13);
    color: var(--store-purple);
}

/* Login button (guest): iOS filled capsule */
body.storefront-body .user-login-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.storefront-body .store-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: var(--store-green);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(52, 199, 89, .35);
    transition: transform .2s var(--store-ease-out), box-shadow .2s ease, opacity .2s ease;
}

body.storefront-body .store-login-btn:hover,
body.storefront-body .store-login-btn:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(52, 199, 89, .4);
}

body.storefront-body .store-login-btn:active {
    transform: scale(.96);
    opacity: .85;
}

body.storefront-body .store-login-btn .nav-icon {
    margin: 0;
    font-size: 12px;
}

/* Account dropdown (signed in) */
body.storefront-body .user-info-box .dropdown > button {
    padding: 3px 8px;
    border-radius: 12px;
    transition: background-color .2s ease;
}

body.storefront-body .user-info-box .dropdown > button:hover {
    background: var(--store-fill);
}

body.storefront-body .user-info-box #user-avatar {
    width: 30px !important;
    height: 30px !important;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 3px 8px rgba(0, 0, 0, .12);
}

body.storefront-body .user-info-box #username {
    color: var(--store-label) !important;
    font-size: 14px !important;
}

body.storefront-body .user-info-box #user-balance {
    font-size: 11px !important;
}

body.storefront-body .user-info-box .dropdown-menu {
    min-width: 180px;
    padding: 6px;
    border: .5px solid rgba(255, 255, 255, .8);
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
    font-size: 14px;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

body.storefront-body .user-info-box .dropdown-menu.show {
    animation: store-rise-sm .28s var(--store-ease-out) both;
}

body.storefront-body .user-info-box .dropdown-item {
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--store-label);
    transition: background-color .15s ease;
}

body.storefront-body .user-info-box .dropdown-item:hover {
    background: var(--store-fill);
}

body.storefront-body .user-info-box .dropdown-divider {
    margin: 4px 8px;
    border-color: var(--store-separator);
}


/* v15 design tokens (added on top of the v14 iOS palette) */
:root {
    --v15-text: #1c1c1e;
    --v15-text-2: #5b5b63;          /* secondary text: >= 5:1 on the white cards */
    --v15-blue: #007aff;            /* fills only */
    --v15-blue-text: #0064d1;       /* blue text on light backgrounds: >= 5:1 */
    --v15-blue-tint: rgba(0, 122, 255, .1);
    --v15-red: #d92d20;             /* price: 4.8:1 on white (iOS #ff3b30 is only 3.6:1) */
    --v15-green-text: #1a7f37;
    --v15-green-tint: rgba(52, 199, 89, .15);
    --v15-amber-text: #945400;
    --v15-amber-tint: rgba(255, 149, 0, .16);
    --v15-card: rgba(255, 255, 255, .86);
    --v15-card-border: rgba(255, 255, 255, .72);
    --v15-hairline: rgba(60, 60, 67, .16);
    --v15-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px rgba(16, 40, 64, .1);
    --v15-radius: 20px;
    --v15-gap: 16px;

    /* Lucide icons as CSS masks (the notice HTML cannot carry SVG through the WAF) */
    --v15-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --v15-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --v15-icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
    --v15-icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");
    --v15-icon-package: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E");
    --v15-icon-handshake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
}

/* ==========================================================================
 * v15 home page components (assembled into storefront-v15.css between the
 * v14 navigation layer and the v14 first-visit gate layer).
 *
 * Layout: [公告 | 售后与帮助] hero row -> slim search toolbar -> [分类 | 商品].
 * One accent colour (iOS blue) for interaction; red = price, green = stock,
 * amber = low stock / warnings. Text colours are darkened so small text meets
 * 4.5:1 on the frosted white cards.
 * ========================================================================== */

/* ---------- Page shell ---------- */
body.storefront-body .store-page {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
}

body.storefront-body .store-card,
body.storefront-body .store-toolbar {
    position: relative;
    min-width: 0;
    border: 1px solid var(--v15-card-border);
    border-radius: var(--v15-radius);
    background: var(--v15-card);
    box-shadow: var(--v15-shadow);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
}

/* Staggered entrance; `backwards` keeps hover transforms working afterwards */
body.storefront-body .store-notice {
    animation: store-rise .6s var(--store-ease-out) backwards;
}

body.storefront-body .store-assist {
    animation: store-rise .6s var(--store-ease-out) .06s backwards;
}

body.storefront-body .store-toolbar {
    animation: store-rise .6s var(--store-ease-out) .12s backwards;
}

body.storefront-body .store-categories {
    animation: store-rise .6s var(--store-ease-out) .18s backwards;
}

body.storefront-body .store-products {
    animation: store-rise .6s var(--store-ease-out) .24s backwards;
}

/* ---------- Card header: Settings-style icon tile + title ---------- */
body.storefront-body .store-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 32px;
}

body.storefront-body .store-card__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: #fff;
    font-size: 14px;
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28), 0 2px 6px rgba(15, 30, 50, .14);
}

body.storefront-body .store-card__icon.is-red {
    background: linear-gradient(180deg, #ff6a60, #ff3b30);
}

body.storefront-body .store-card__icon.is-blue {
    background: linear-gradient(180deg, #3d9bff, #007aff);
}

body.storefront-body .store-card__icon.is-pink {
    background: linear-gradient(180deg, #ff6189, #ff2d55);
}

body.storefront-body .store-card__title {
    margin: 0;
    color: var(--v15-text);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.2px;
    line-height: 1.3;
    white-space: nowrap;
}

body.storefront-body .store-card__tag {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 59, 48, .1);
    color: #c4271c;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
}

/* ---------- Hero row: notice + help ---------- */
body.storefront-body .store-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    align-items: stretch;
    gap: var(--v15-gap);
}

body.storefront-body .store-hero--solo {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------- Notice card ---------- */
body.storefront-body .store-notice {
    padding: 18px 22px 20px;
}

body.storefront-body .store-notice__body {
    position: relative;
    margin-top: 14px;
}

body.storefront-body .store-notice__content {
    color: #3a3a3c;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

body.storefront-body .store-notice__content p {
    margin: 0 0 10px;
}

body.storefront-body .store-notice__content p:last-child {
    margin-bottom: 0;
}

body.storefront-body .store-notice__content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

body.storefront-body .store-notice__content a {
    color: var(--v15-blue-text);
    font-weight: 600;
    text-decoration: none;
}

body.storefront-body .store-notice__content a:hover {
    text-decoration: underline;
}

/* Phone: long notices fold to a fixed height with a fade and a "展开" button */
body.storefront-body .store-notice.is-folded .store-notice__body {
    max-height: var(--notice-fold-height, 236px);
    overflow: hidden;
}

body.storefront-body .store-notice.is-folded .store-notice__body::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 76px;
    background: linear-gradient(rgba(250, 251, 252, 0), rgba(250, 251, 252, .97));
    pointer-events: none;
}

body.storefront-body .store-notice__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 42px;
    margin-top: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--v15-blue-tint);
    color: var(--v15-blue-text);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s var(--store-ease-out);
}

body.storefront-body .store-notice__more:hover {
    background: rgba(0, 122, 255, .16);
}

body.storefront-body .store-notice__more:active {
    transform: scale(.98);
}

body.storefront-body .store-notice__more i {
    font-size: 12px;
    transition: transform .3s var(--store-ease-out);
}

body.storefront-body .store-notice__more[aria-expanded="true"] i {
    transform: rotate(180deg);
}

body.storefront-body .store-notice__more:focus-visible,
body.storefront-body .store-assist__item:focus-visible,
body.storefront-body .item-search-button:focus-visible {
    outline: 3px solid rgba(0, 122, 255, .35);
    outline-offset: 2px;
}

/* ---------- Structured notice (store-notice-template.html v2) ----------
 * Plain tags + classes only: the WAF (HTMLPurifier) strips SVG and data-*,
 * so the icons are drawn here with CSS masks. Works in the page card and in
 * the first-visit gate. */
.notice-v2 {
    display: grid;
    gap: 10px;
    color: #3a3a3c;
    font-size: 14px;
    line-height: 1.65;
}

/* Avoid orphaned last characters (e.g. a lone "~" or "续费。") in the notice blocks */
.notice-v2 .notice-alert,
.notice-v2 .notice-key,
.notice-v2 .notice-point {
    text-wrap: balance;
}

.notice-v2 .notice-offer {
    text-wrap: pretty;
}

.notice-v2 .notice-alert,
.notice-v2 .notice-key,
.notice-v2 .notice-points,
.notice-v2 .notice-offers,
.notice-v2 .notice-offer,
.notice-v2 .notice-point {
    margin: 0;
}

.notice-v2 .notice-alert {
    position: relative;
    padding: 9px 14px 9px 40px;
    border: 1px solid rgba(255, 149, 0, .38);
    border-radius: 12px;
    background: #fff8ec;
    color: #6f4400;
    font-size: 13px;
    line-height: 1.6;
}

.notice-v2 .notice-alert::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 14px;
    width: 17px;
    height: 17px;
    background: #e8830c;
    -webkit-mask: var(--v15-icon-alert) center / contain no-repeat;
    mask: var(--v15-icon-alert) center / contain no-repeat;
}

.notice-v2 .notice-alert strong {
    margin-right: 6px;
    color: #b54708;
    font-weight: 700;
}

.notice-v2 .notice-key {
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 59, 48, .07);
    box-shadow: inset 3px 0 0 #ff3b30;
    color: #b42318;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.6;
}

.notice-v2 .notice-points {
    display: grid;
    gap: 6px;
    padding: 2px 0 0;
    list-style: none;
}

.notice-v2 .notice-point {
    position: relative;
    min-height: 24px;
    padding-left: 34px;
    color: #3a3a3c;
}

.notice-v2 .notice-point::before,
.notice-v2 .notice-offer::before {
    content: "";
    position: absolute;
    left: 0;
    border-radius: 7px;
    background: var(--nt-tile, rgba(0, 122, 255, .12));
}

.notice-v2 .notice-point::after,
.notice-v2 .notice-offer::after {
    content: "";
    position: absolute;
    background: var(--nt-glyph, #0064d1);
    -webkit-mask: var(--nt-icon) center / contain no-repeat;
    mask: var(--nt-icon) center / contain no-repeat;
}

.notice-v2 .notice-point::before {
    top: 0;
    width: 23px;
    height: 23px;
}

.notice-v2 .notice-point::after {
    top: 4px;
    left: 4px;
    width: 15px;
    height: 15px;
}

.notice-v2 .notice-point--key {
    --nt-tile: rgba(52, 199, 89, .16);
    --nt-glyph: #1f8a3b;
    --nt-icon: var(--v15-icon-shield);
}

.notice-v2 .notice-point--wallet {
    --nt-tile: rgba(255, 149, 0, .16);
    --nt-glyph: #b25e00;
    --nt-icon: var(--v15-icon-wallet);
}

.notice-v2 .notice-point--chat {
    --nt-tile: rgba(0, 136, 204, .14);
    --nt-glyph: #0a73b8;
    --nt-icon: var(--v15-icon-send);
}

.notice-v2 .notice-point a {
    color: var(--v15-blue-text);
    font-weight: 650;
    text-decoration: none;
}

.notice-v2 .notice-offers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.notice-v2 .notice-offer {
    position: relative;
    padding: 11px 14px 11px 54px;
    border: 1px solid var(--nt-line, rgba(0, 122, 255, .16));
    border-radius: 14px;
    background: var(--nt-wash, linear-gradient(135deg, rgba(0, 122, 255, .09), rgba(0, 122, 255, .02)));
    color: var(--v15-text-2);
    font-size: 13px;
    line-height: 1.55;
}

.notice-v2 .notice-offer strong {
    display: block;
    margin-bottom: 1px;
    color: var(--v15-text);
    font-size: 14.5px;
    font-weight: 650;
}

.notice-v2 .notice-offer::before {
    top: 50%;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    transform: translateY(-50%);
}

.notice-v2 .notice-offer::after {
    top: 50%;
    left: 19px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
}

.notice-v2 .notice-offer--bulk {
    --nt-tile: rgba(0, 122, 255, .14);
    --nt-glyph: #0064d1;
    --nt-icon: var(--v15-icon-package);
}

.notice-v2 .notice-offer--partner {
    --nt-line: rgba(175, 82, 222, .2);
    --nt-wash: linear-gradient(135deg, rgba(175, 82, 222, .1), rgba(175, 82, 222, .02));
    --nt-tile: rgba(175, 82, 222, .15);
    --nt-glyph: #8a35b8;
    --nt-icon: var(--v15-icon-handshake);
}

/* ---------- Help card ---------- */
body.storefront-body .store-assist {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
}

body.storefront-body .store-assist .store-card__head {
    padding: 0 6px;
}

body.storefront-body .store-assist__list {
    display: grid;
    align-content: start;
    gap: 10px;
    margin-top: 14px;
}

body.storefront-body .store-assist__item {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(60, 60, 67, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .74);
    color: var(--v15-text);
    text-decoration: none;
    transition: background-color .2s ease, box-shadow .25s ease, transform .25s var(--store-ease-out);
}

body.storefront-body .store-assist__item:hover {
    background: #fff;
    color: var(--v15-text);
    box-shadow: 0 8px 22px rgba(16, 40, 64, .1);
    transform: translateY(-1px);
}

body.storefront-body .store-assist__item:active {
    transform: scale(.985);
}

body.storefront-body .store-assist__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 122, 255, .12);
    color: var(--v15-blue-text);
    font-size: 17px;
}

body.storefront-body .store-assist__icon.is-teal {
    background: rgba(48, 176, 199, .15);
    color: #127083;
}

body.storefront-body .store-assist__icon.is-purple {
    background: rgba(175, 82, 222, .13);
    color: #8a35b8;
}

body.storefront-body .store-assist__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.storefront-body .store-assist__text b {
    overflow: hidden;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.storefront-body .store-assist__text small {
    overflow: hidden;
    color: var(--v15-text-2);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.storefront-body .store-assist__chevron {
    color: #a1a1aa;
    font-size: 13px;
    transition: transform .25s var(--store-ease-out), color .2s ease;
}

body.storefront-body .store-assist__item:hover .store-assist__chevron {
    color: var(--v15-blue-text);
    transform: translateX(2px);
}

/* Primary row = the old "售后政策/登录教程" ribbon, now a filled button */
body.storefront-body .store-assist__item.is-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #1f8fff, #0062db);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 98, 219, .3);
}

body.storefront-body .store-assist__item.is-primary::before {
    content: "";
    position: absolute;
    top: -20%;
    left: 0;
    width: 32%;
    height: 140%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
    transform: translateX(-180%) skewX(-18deg);
    animation: store-sheen 4.2s ease-in-out 1.2s infinite;
    pointer-events: none;
}

body.storefront-body .store-assist__item.is-primary:hover {
    background: linear-gradient(135deg, #3399ff, #0a6cf0);
    color: #fff;
    box-shadow: 0 14px 30px rgba(0, 98, 219, .36);
}

body.storefront-body .store-assist__item.is-primary .store-assist__icon {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

body.storefront-body .store-assist__item.is-primary small,
body.storefront-body .store-assist__item.is-primary .store-assist__chevron,
body.storefront-body .store-assist__item.is-primary:hover .store-assist__chevron {
    color: rgba(255, 255, 255, .88);
}

/* Without a notice the help card spans the row: tiles side by side */
body.storefront-body .store-hero--solo .store-assist__list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ---------- "合作与优惠" card (sidebar, under the categories) ---------- */
body.storefront-body .store-offers {
    grid-area: offers;
    padding: 16px 10px 10px;
}

body.storefront-body .store-offers .store-card__head {
    padding: 0 8px;
}

body.storefront-body .store-offers__list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

body.storefront-body .store-card__icon.is-orange {
    background: linear-gradient(180deg, #ffb340, #ff9500);
}

body.storefront-body .store-assist__item.is-offer {
    grid-template-columns: 34px minmax(0, 1fr) 14px;
    align-items: start;
    min-height: 0;
    padding: 10px 12px;
    border-color: transparent;
    background: rgba(118, 118, 128, .07);
}

body.storefront-body .store-assist__item.is-offer:hover {
    background: #fff;
}

body.storefront-body .store-assist__item.is-offer .store-assist__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 14px;
}

body.storefront-body .store-assist__item.is-offer .store-assist__chevron {
    align-self: center;
}

body.storefront-body .store-assist__item.is-offer b {
    font-size: 14px;
}

body.storefront-body .store-assist__item.is-offer small {
    font-size: 12.5px;
    line-height: 1.5;
    white-space: normal;
    text-wrap: pretty;
}

body.storefront-body .store-assist__icon.is-orange {
    background: rgba(255, 149, 0, .16);
    color: #a35a00;
}

/* ---------- Search toolbar (inside the catalog grid, above the product card) ---------- */
body.storefront-body .store-toolbar {
    display: grid;
    grid-area: bar;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
}

body.storefront-body .store-toolbar .store-search__box {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(118, 118, 128, .1);
    cursor: text;
    transition: background-color .2s ease, box-shadow .2s ease;
}

body.storefront-body .store-toolbar .store-search__box:hover {
    background: rgba(118, 118, 128, .14);
}

body.storefront-body .store-toolbar .store-search__box:focus-within {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, .2), inset 0 0 0 1px rgba(0, 122, 255, .55);
}

body.storefront-body .store-toolbar .store-search__box > i {
    color: #8e8e93;
    font-size: 15px;
}

body.storefront-body .store-toolbar input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--v15-text);
    font-size: 15px;
}

body.storefront-body .store-toolbar input::placeholder {
    color: #8a8a92;
}

body.storefront-body .store-toolbar .item-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #2b8cff, #0070f0);
    color: #fff;
    font-size: 15px;
    font-weight: 650;
    box-shadow: 0 6px 16px rgba(0, 112, 240, .3);
    cursor: pointer;
    transition: filter .2s ease, box-shadow .2s ease, transform .15s ease;
}

body.storefront-body .store-toolbar .item-search-button i {
    font-size: 13px;
}

body.storefront-body .store-toolbar .item-search-button:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 22px rgba(0, 112, 240, .36);
}

body.storefront-body .store-toolbar .item-search-button:active {
    transform: scale(.97);
}

/* ---------- Catalog layout ----------
 * Desktop/tablet:  [分类    ] [搜索栏]      Phone: [搜索栏]
 *                  [分类    ] [商品  ]             [分类  ]
 *                  [合作优惠] [商品  ]             [商品  ]
 *                                                  [合作优惠] */
body.storefront-body .store-catalog {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "cats bar"
        "cats prods"
        "offers prods";
    align-items: start;
    gap: var(--v15-gap);
    margin-top: var(--v15-gap);
}

body.storefront-body .store-categories,
body.storefront-body .store-products {
    min-width: 0;
    overflow: hidden;
}

body.storefront-body .store-categories {
    grid-area: cats;
    padding: 16px 10px 10px;
}

body.storefront-body .store-categories .store-card__head {
    padding: 0 8px 10px;
}

body.storefront-body .store-products {
    grid-area: prods;
    padding: 16px 12px 10px;
}

body.storefront-body .store-products__title {
    padding: 0 8px 12px;
}

body.storefront-body .store-products__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.storefront-body .store-current {
    min-width: 0;
    overflow: hidden;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--v15-blue-tint);
    color: var(--v15-blue-text);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.storefront-body .store-current:empty,
body.storefront-body .store-result-count:empty {
    display: none;
}

body.storefront-body .store-result-count {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(118, 118, 128, .12);
    color: var(--v15-text-2);
    font-size: 12px;
    font-weight: 650;
    animation: store-rise-sm .3s var(--store-ease-out) both;
}

/* ---------- Scrollable lists + "下滑查看更多" hint ---------- */
body.storefront-body .store-scroll {
    position: relative;
}

body.storefront-body .store-scroll-hint {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 5px 9px;
    border: .5px solid rgba(0, 122, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--v15-blue-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    opacity: 0;
    visibility: hidden;
    transform: translate(8px, -50%);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s var(--store-ease-out), visibility 0s linear .3s;
}

body.storefront-body .store-scroll-hint.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
    transition: opacity .3s ease, transform .4s var(--store-ease-out), visibility 0s;
}

body.storefront-body .store-scroll-hint span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 3px;
}

body.storefront-body .store-scroll-hint i {
    font-size: 11px;
    animation: store-hint-bob 1.4s ease-in-out infinite;
}

body.storefront-body .store-scroll.is-scrollable > .store-scroll__body {
    padding-right: 36px;
}

/* ---------- Categories ---------- */
body.storefront-body .store-category-list {
    display: grid;
    gap: 2px;
}

body.storefront-body .store-category-group {
    min-width: 0;
}

body.storefront-body .store-category {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 10px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 12px;
    color: var(--v15-text);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

body.storefront-body .store-category-group > .store-category-parent {
    grid-template-columns: 28px minmax(0, 1fr) auto 14px;
    cursor: pointer;
}

body.storefront-body .store-category:hover {
    background: rgba(118, 118, 128, .08);
    color: var(--v15-text);
}

body.storefront-body .store-category:active {
    background: rgba(118, 118, 128, .14);
}

body.storefront-body .store-category.is-primary,
body.storefront-body .store-category.is-primary:hover {
    background: var(--v15-blue-tint);
    color: var(--v15-blue-text);
    font-weight: 650;
}

body.storefront-body .store-category:focus-visible,
body.storefront-body .store-product:focus-visible {
    outline: 3px solid rgba(0, 122, 255, .35);
    outline-offset: 1px;
}

body.storefront-body .store-category__icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e8eef4 center / cover no-repeat;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 1px 3px rgba(0, 0, 0, .12);
}

body.storefront-body .store-category__name {
    min-width: 0;
    overflow: hidden;
    font-size: 14.5px;
    letter-spacing: -.1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.storefront-body .store-category__count {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: rgba(118, 118, 128, .12);
    color: var(--v15-text-2);
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease;
}

body.storefront-body .store-category.is-primary .store-category__count {
    background: var(--v15-blue);
    color: #fff;
}

body.storefront-body .store-category__chevron {
    width: 14px;
    color: #a1a1aa;
    font-size: 13px;
    text-align: center;
    transition: transform .3s var(--store-ease-out), color .2s ease;
}

body.storefront-body .store-category-group.is-open > .store-category .store-category__chevron {
    color: var(--v15-blue-text);
    transform: rotate(90deg);
}

/* Child categories slide open: outer grid animates 0fr -> 1fr, inner clips */
body.storefront-body .store-category-children {
    position: relative;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .34s var(--store-ease-out), visibility 0s linear .34s;
}

body.storefront-body .store-category-group.is-open > .store-category-children {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .34s var(--store-ease-out), visibility 0s;
}

body.storefront-body .store-category-children__inner {
    display: grid;
    gap: 2px;
    min-height: 0;
    margin-left: 22px;
    padding-left: 10px;
    overflow: hidden;
    border-left: 1px solid rgba(60, 60, 67, .12);
}

body.storefront-body .store-category-children .store-category {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    min-height: 40px;
    padding: 5px 10px 5px 8px;
    opacity: 0;
    transition: background-color .18s ease, color .18s ease, opacity .2s ease;
}

body.storefront-body .store-category-group.is-open > .store-category-children .store-category {
    opacity: 1;
    transition: background-color .18s ease, color .18s ease, opacity .3s ease .1s;
}

body.storefront-body .store-category-child .store-category__icon {
    width: 20px;
    height: 20px;
}

body.storefront-body .store-category-child .store-category__name {
    font-size: 14px;
}

/* ---------- Products ---------- */
body.storefront-body .store-product-head,
body.storefront-body .store-product,
body.storefront-body .store-skeleton__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 112px 92px;
    align-items: center;
    gap: 16px;
}

body.storefront-body .store-product-head {
    min-height: 34px;
    margin: 0 4px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(118, 118, 128, .07);
    color: var(--v15-text-2);
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .3px;
}

/* price, stock and action columns are centred so each reads as its own column */
body.storefront-body .store-product-head span:not(:first-child) {
    justify-self: center;
}

body.storefront-body .store-product-list {
    margin-top: 4px;
}

body.storefront-body .store-product,
body.storefront-body .store-skeleton__row {
    position: relative;
    min-height: 58px;
    padding: 8px 14px;
    border-radius: 12px;
}

body.storefront-body .store-product {
    color: var(--v15-text);
    text-decoration: none;
    transition: background-color .18s ease;
    animation: store-row-in .45s var(--store-ease-out) backwards;
    animation-delay: calc(min(var(--i, 0), 14) * 30ms);
}

body.storefront-body .store-product::after,
body.storefront-body .store-skeleton__row::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 58px;
    height: 1px;
    background: var(--v15-hairline);
    transform: scaleY(.5);
    transform-origin: bottom;
}

body.storefront-body .store-product:last-child::after,
body.storefront-body .store-skeleton__row:last-child::after {
    display: none;
}

body.storefront-body .store-product:hover {
    background: rgba(0, 122, 255, .05);
    color: var(--v15-text);
}

body.storefront-body .store-product:active {
    background: rgba(0, 122, 255, .09);
}

body.storefront-body .store-product__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body.storefront-body .store-product__main img {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #e8eef4;
    box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, .14);
}

body.storefront-body .store-product__name {
    min-width: 0;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -.1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .18s ease;
}

body.storefront-body .store-product:hover .store-product__name {
    color: var(--v15-blue-text);
}

body.storefront-body .store-product__price {
    justify-self: center;
    color: var(--v15-red);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
    white-space: nowrap;
}

body.storefront-body .store-product__price b {
    margin-right: 1px;
    font-size: 12px;
    font-weight: 700;
}

body.storefront-body .store-product__stock {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--v15-green-tint);
    color: var(--v15-green-text);
    font-size: 12.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.storefront-body .store-product__stock i {
    font-size: 11px;
}

body.storefront-body .store-product__stock.is-low {
    background: var(--v15-amber-tint);
    color: var(--v15-amber-text);
}

body.storefront-body .store-product__stock.is-empty {
    background: rgba(118, 118, 128, .14);
    color: #5f5f68;
}

/* App Store "GET" capsule: tinted at rest, filled on hover */
body.storefront-body .store-product__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 5px;
    min-width: 76px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--v15-blue-tint);
    color: var(--v15-blue-text);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s var(--store-ease-out);
}

body.storefront-body .store-product__action i {
    font-size: 12px;
}

body.storefront-body .store-product:hover .store-product__action {
    background: var(--v15-blue);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 122, 255, .3);
}

body.storefront-body .store-product:active .store-product__action {
    transform: scale(.95);
}

body.storefront-body .store-product.is-soldout {
    cursor: default;
    opacity: .58;
}

body.storefront-body .store-product.is-soldout:hover,
body.storefront-body .store-product.is-soldout:active {
    background: none;
}

body.storefront-body .store-product.is-soldout:hover .store-product__name {
    color: var(--v15-text);
}

body.storefront-body .store-product.is-soldout .store-product__action,
body.storefront-body .store-product.is-soldout:hover .store-product__action {
    background: rgba(118, 118, 128, .14);
    color: #5f5f68;
    box-shadow: none;
    transform: none;
}

body.storefront-body .store-product-list .item-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 200px;
    margin: 0;
    color: var(--v15-text-2);
    font-size: 14px;
    animation: store-rise-sm .35s var(--store-ease-out) both;
}

body.storefront-body .store-product-list .item-message i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(118, 118, 128, .12);
    color: #8e8e93;
    font-size: 18px;
}

/* ---------- Skeleton rows while the list loads ---------- */
body.storefront-body .store-skeleton {
    display: block;
}

body.storefront-body .store-skeleton__row {
    animation: store-row-in .35s var(--store-ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}

body.storefront-body .store-skeleton__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body.storefront-body .store-skeleton__price,
body.storefront-body .store-skeleton__stock {
    justify-self: center;
}

body.storefront-body .store-skeleton__avatar,
body.storefront-body .store-skeleton__bar,
body.storefront-body .store-skeleton__btn {
    display: block;
    background: linear-gradient(90deg, rgba(120, 120, 128, .1) 25%, rgba(120, 120, 128, .2) 37%, rgba(120, 120, 128, .1) 63%);
    background-size: 400% 100%;
    animation: store-shimmer 1.4s ease-in-out infinite;
}

body.storefront-body .store-skeleton__avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

body.storefront-body .store-skeleton__bar {
    width: var(--w, 60%);
    max-width: 100%;
    height: 12px;
    border-radius: 6px;
}

body.storefront-body .store-skeleton__stock .store-skeleton__bar {
    height: 24px;
    border-radius: 12px;
}

body.storefront-body .store-skeleton__btn {
    justify-self: center;
    width: 76px;
    height: 32px;
    border-radius: 16px;
}

/* ==========================================================================
 * Responsive
 * ========================================================================== */
@media (min-width: 768px) {
    body.storefront-body .navbar-acg {
        position: sticky;
        top: 0;
        z-index: 999999;
    }
}

@media (max-width: 1199.98px) {
    body.storefront-body .store-hero {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    body.storefront-body .store-catalog {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    body.storefront-body .store-product-head,
    body.storefront-body .store-product,
    body.storefront-body .store-skeleton__row {
        grid-template-columns: minmax(0, 1fr) 88px 104px 84px;
        gap: 10px;
    }

    body.storefront-body .store-product__action,
    body.storefront-body .store-skeleton__btn {
        min-width: 0;
        width: 100%;
        padding: 0 8px;
    }
}

@media (max-width: 991.98px) {
    /* Navigation: links wrap onto their own row (v14 behaviour) */
    body.storefront-body .store-nav {
        flex-wrap: wrap;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    body.storefront-body .navbar-collapse,
    body.storefront-body .navbar-collapse.collapse {
        order: 3;
        flex-basis: 100%;
    }

    body.storefront-body .navbar-nav {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        margin: 2px 0 0 !important;
    }

    body.storefront-body .navbar-acg .nav-link {
        height: 32px;
        padding: 0 11px;
        font-size: 14px;
    }

    /* Hero stacks; help tiles sit side by side under the notice */
    body.storefront-body .store-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    body.storefront-body .store-assist__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* the primary "售后政策 / 登录教程" button gets its own full row so it never truncates */
    body.storefront-body .store-assist__item.is-primary {
        grid-column: 1 / -1;
    }

    /* narrow sidebar / product column: wrap instead of cutting names off,
       balanced so no single character is left alone on the last line */
    body.storefront-body .store-category__name {
        line-height: 1.3;
        white-space: normal;
        text-wrap: balance;
    }

    body.storefront-body .store-product__name {
        display: -webkit-box;
        line-height: 1.4;
        white-space: normal;
        text-wrap: pretty;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.storefront-body .store-catalog {
        grid-template-columns: 236px minmax(0, 1fr);
        gap: 14px;
    }

    body.storefront-body .store-products {
        padding: 14px 10px 10px;
    }

    body.storefront-body .store-product-head,
    body.storefront-body .store-product,
    body.storefront-body .store-skeleton__row {
        grid-template-columns: minmax(0, 1fr) 76px 92px 72px;
        gap: 8px;
        padding-right: 10px;
        padding-left: 10px;
    }

    body.storefront-body .store-product::after,
    body.storefront-body .store-skeleton__row::after {
        right: 10px;
        left: 54px;
    }

    body.storefront-body .store-product__action {
        font-size: 13px;
    }

    body.storefront-body .store-product__action i {
        display: none;
    }
}

@media (max-width: 767.98px) {
    body.storefront-body {
        background-attachment: scroll;
    }

    /* Navigation: brand + account on one row, wrapping chip rows below
       (all links stay visible, never a horizontally scrolling strip). */
    body.storefront-body .navbar-acg {
        padding: 6px 0 6px;
    }

    body.storefront-body .store-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 8px;
        min-height: 0;
        padding-right: 10px;
        padding-left: 10px;
    }

    body.storefront-body .navbar-brand {
        grid-column: 1;
    }

    body.storefront-body .brand-logo {
        width: 28px;
        height: 28px;
    }

    body.storefront-body .store-brand-name {
        font-size: 16px;
    }

    body.storefront-body .user-login-box,
    body.storefront-body .user-info-box {
        position: static !important;
        grid-column: 2;
    }

    body.storefront-body .store-login-btn {
        height: 30px;
        padding: 0 13px;
        font-size: 13px;
    }

    body.storefront-body .user-info-box .dropdown > button {
        max-width: 164px;
        padding: 2px 4px;
    }

    body.storefront-body .user-info-box #user-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    body.storefront-body .navbar-collapse,
    body.storefront-body .navbar-collapse.collapse {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
    }

    body.storefront-body .navbar-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        margin: 0 !important;
        padding: 1px 0 3px;
    }

    body.storefront-body .navbar-nav .nav-item {
        flex: 1 1 auto;
    }

    body.storefront-body .navbar-acg .nav-link {
        justify-content: center;
        gap: 3px;
        height: 32px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--store-fill);
        color: var(--store-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0;
    }

    body.storefront-body .navbar-acg .nav-link .nav-icon {
        font-size: 11px;
    }

    body.storefront-body .navbar-acg .nav-link.active,
    body.storefront-body .navbar-acg .nav-link.is-orange.active,
    body.storefront-body .navbar-acg .nav-link.is-blue.active,
    body.storefront-body .navbar-acg .nav-link.is-purple.active {
        background: var(--store-blue);
        color: #fff;
        box-shadow: 0 4px 12px rgba(0, 122, 255, .3);
    }

    /* Page */
    body.storefront-body .store-page {
        padding-top: 10px !important;
        padding-right: 12px;
        padding-bottom: 28px !important;
        padding-left: 12px;
    }

    body.storefront-body .store-card,
    body.storefront-body .store-toolbar {
        border-radius: 18px;
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
    }

    body.storefront-body .store-hero,
    body.storefront-body .store-catalog {
        gap: 12px;
    }

    body.storefront-body .store-card__title {
        font-size: 16px;
    }

    body.storefront-body .store-card__icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 13px;
    }

    body.storefront-body .store-notice {
        --notice-fold-height: 290px; /* keeps 温馨提示 + the red key rule fully visible when folded */
        padding: 14px 14px 16px;
    }

    body.storefront-body .store-notice__body {
        margin-top: 12px;
    }

    body.storefront-body .store-notice__content {
        font-size: 13.5px;
        line-height: 1.65;
    }

    .notice-v2 {
        gap: 10px;
        font-size: 13.5px;
    }

    .notice-v2 .notice-key {
        padding: 10px 12px;
        font-size: 14.5px;
    }

    .notice-v2 .notice-offers {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    /* Phone: the help card is a compact button group (it replaces the old
       56px ribbon, so it must stay short): primary full width, the other two
       side by side, no card title, secondary captions hidden. */
    body.storefront-body .store-assist {
        padding: 10px;
    }

    body.storefront-body .store-assist .store-card__head {
        display: none;
    }

    body.storefront-body .store-assist__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
    }

    body.storefront-body .store-offers {
        padding: 14px 8px 8px;
    }

    body.storefront-body .store-assist__item {
        grid-template-columns: 30px minmax(0, 1fr) 12px;
        gap: 10px;
        min-height: 0;
        padding: 10px 12px;
        border-radius: 12px;
    }

    body.storefront-body .store-assist__item.is-primary {
        grid-column: 1 / -1;
    }

    body.storefront-body .store-assist__icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 13px;
    }

    body.storefront-body .store-assist__text b {
        font-size: 14px;
    }

    body.storefront-body .store-assist__item:not(.is-primary):not(.is-offer) small {
        display: none;
    }

    /* half-width tiles: drop the chevron so "2FA 验证工具" fits on a 360-375px phone */
    body.storefront-body .store-assist__item:not(.is-primary):not(.is-offer) {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
    }

    body.storefront-body .store-assist__item:not(.is-primary):not(.is-offer) .store-assist__chevron {
        display: none;
    }

    /* offer rows (sidebar card at the end of the page) keep their own sizing */
    body.storefront-body .store-assist__item.is-offer {
        grid-template-columns: 34px minmax(0, 1fr) 14px;
        padding: 10px 12px;
    }

    body.storefront-body .store-assist__item.is-offer .store-assist__icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    body.storefront-body .store-toolbar {
        padding: 8px;
        gap: 8px;
        border-radius: 16px;
    }

    body.storefront-body .store-toolbar .store-search__box,
    body.storefront-body .store-toolbar .item-search-button {
        height: 42px;
    }

    body.storefront-body .store-toolbar .item-search-button {
        padding: 0 16px;
    }

    body.storefront-body .store-toolbar input {
        font-size: 16px; /* 16px prevents iOS zoom-on-focus */
    }

    /* Catalog: search first, then stacked cards; each list scrolls on its own */
    body.storefront-body .store-catalog {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "bar"
            "cats"
            "prods"
            "offers";
        margin-top: 12px;
    }

    body.storefront-body .store-categories {
        padding: 14px 8px 8px;
    }

    body.storefront-body .store-products {
        padding: 14px 8px 8px;
    }

    body.storefront-body .store-category-list,
    body.storefront-body .store-product-list {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(120, 120, 128, .35) transparent;
    }

    body.storefront-body .store-category-list {
        max-height: min(38vh, 300px);
        padding-right: 3px;
        scrollbar-color: rgba(0, 122, 255, .55) rgba(0, 122, 255, .12);
    }

    body.storefront-body .store-product-list {
        max-height: min(62vh, 540px);
        padding-right: 3px;
    }

    body.storefront-body .store-category-list::-webkit-scrollbar,
    body.storefront-body .store-product-list::-webkit-scrollbar {
        width: 4px;
    }

    body.storefront-body .store-category-list::-webkit-scrollbar-track {
        border-radius: 4px;
        background: rgba(0, 122, 255, .12);
    }

    body.storefront-body .store-category-list::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: rgba(0, 122, 255, .6);
    }

    body.storefront-body .store-product-list::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: rgba(120, 120, 128, .35);
    }

    body.storefront-body .store-scroll-hint {
        right: 9px;
    }

    body.storefront-body .store-category {
        padding: 6px 8px;
    }

    body.storefront-body .store-category:hover {
        background: none;
    }

    body.storefront-body .store-category.is-primary,
    body.storefront-body .store-category.is-primary:hover {
        background: var(--v15-blue-tint);
    }

    body.storefront-body .store-category__name {
        line-height: 1.3;
        white-space: normal;
    }

    /* Product rows: name on top, price right; stock under the name, buy right */
    body.storefront-body .store-product-head {
        display: none;
    }

    body.storefront-body .store-product,
    body.storefront-body .store-skeleton__row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main price"
            "stock action";
        gap: 6px 10px;
        min-height: 72px;
        padding: 10px 8px;
    }

    body.storefront-body .store-product::after,
    body.storefront-body .store-skeleton__row::after {
        right: 8px;
        left: 52px;
    }

    body.storefront-body .store-product:hover {
        background: none;
    }

    body.storefront-body .store-product:hover .store-product__name {
        color: var(--v15-text);
    }

    body.storefront-body .store-product:active {
        background: rgba(0, 122, 255, .08);
    }

    body.storefront-body .store-product:hover .store-product__action {
        background: var(--v15-blue-tint);
        color: var(--v15-blue-text);
        box-shadow: none;
    }

    body.storefront-body .store-product__main,
    body.storefront-body .store-skeleton__main {
        grid-area: main;
        align-items: flex-start;
    }

    body.storefront-body .store-product__name {
        display: -webkit-box;
        line-height: 1.4;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.storefront-body .store-product__price,
    body.storefront-body .store-skeleton__price {
        grid-area: price;
        align-self: start;
        justify-self: end;
        font-size: 16px;
    }

    body.storefront-body .store-product__stock,
    body.storefront-body .store-skeleton__stock {
        grid-area: stock;
        justify-self: start;
        height: 22px;
        margin-left: 44px;
        padding: 0 9px;
        font-size: 12px;
    }

    body.storefront-body .store-product__action,
    body.storefront-body .store-skeleton__btn {
        grid-area: action;
        justify-self: end;
        width: auto;
        min-width: 68px;
        height: 30px;
        padding: 0 14px;
        font-size: 13px;
    }

    body.storefront-body .store-product__action i {
        display: inline-block;
    }

    body.storefront-body .store-skeleton__stock .store-skeleton__bar {
        height: 18px;
    }

    body.storefront-body .store-skeleton__price .store-skeleton__bar {
        width: 40px;
    }
}

@media (max-width: 380px) {
    body.storefront-body .store-card__tag {
        display: none;
    }

    body.storefront-body .store-toolbar .item-search-button span {
        display: none;
    }

    body.storefront-body .store-toolbar .item-search-button {
        padding: 0 14px;
    }
}

/* ---------- Gate: the v2 notice inside the first-visit panel (a touch larger, it is the modal's main content) ---------- */
.store-gate__content .notice-v2 {
    font-size: 14.5px;
}

.store-gate__content .notice-v2 .notice-alert {
    font-size: 14px;
}

.store-gate__content .notice-v2 .notice-key {
    font-size: 16px;
}

/* ---------- Reduced motion for the v15 components ---------- */
@media (prefers-reduced-motion: reduce) {
    body.storefront-body .store-assist,
    body.storefront-body .store-toolbar,
    body.storefront-body .store-result-count {
        animation-name: store-fade;
        animation-duration: .35s;
        animation-timing-function: ease;
    }

    body.storefront-body .store-assist__item.is-primary::before {
        animation: none;
        display: none;
    }

    body.storefront-body .store-assist__item,
    body.storefront-body .store-assist__item:hover {
        transform: none;
    }
}


/* ---------- First-visit announcement gate ---------- */
body.store-gate-open {
    overflow: hidden;
}

.store-gate {
    position: fixed;
    z-index: 1000000;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px 28px;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: pointer;
    font-family: var(--store-font);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.store-gate[hidden] {
    display: none !important;
}

.store-gate__scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    animation: store-gate-scrim-in .45s ease both;
}

.store-gate__panel {
    position: relative;
    z-index: 1;
    width: min(1156px, 100%);
    margin: 0 auto;
    padding: 32px 26px 24px;
    border: .5px solid rgba(255, 255, 255, .85);
    border-radius: 24px;
    outline: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    animation: store-gate-in .6s var(--store-ease-spring) both;
}

/* Soft colour wash: warm behind the badge, cool in the far corner */
.store-gate__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(560px 190px at 6% 0%, rgba(255, 59, 48, .1), rgba(255, 59, 48, 0) 65%),
    radial-gradient(420px 220px at 100% 100%, rgba(0, 122, 255, .08), rgba(0, 122, 255, 0) 60%);
    pointer-events: none;
}

.store-gate__badge {
    position: absolute;
    top: -18px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 11px;
    background: var(--store-red);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.1px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(255, 59, 48, .4);
    transform-origin: 18% 100%;
    animation: store-badge-pop .6s var(--store-ease-spring) .25s both, store-badge-wiggle .7s ease-in-out 1.15s 2;
}

.store-gate__badge::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 17px;
    border-top: 8px solid var(--store-red);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.store-gate__content {
    position: relative;
    color: #3a3a3c;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* Notice blocks fade up one after another (flat list of paragraphs, or a
   single wrapper div holding them). */
.store-gate__content > *,
.store-gate__content > div > * {
    animation: store-rise-sm .5s var(--store-ease-out) .2s both;
}

.store-gate__content > div > :nth-child(1) {
    animation-delay: .24s;
}

.store-gate__content > div > :nth-child(2) {
    animation-delay: .3s;
}

.store-gate__content > div > :nth-child(3) {
    animation-delay: .36s;
}

.store-gate__content > div > :nth-child(4) {
    animation-delay: .42s;
}

.store-gate__content > div > :nth-child(5) {
    animation-delay: .48s;
}

.store-gate__content > div > :nth-child(6) {
    animation-delay: .54s;
}

.store-gate__content > div > :nth-child(7) {
    animation-delay: .6s;
}

.store-gate__content > div > :nth-child(n+8) {
    animation-delay: .66s;
}

.store-gate__content p {
    margin: 0 0 11px;
}

.store-gate__content p:last-child {
    margin-bottom: 0;
}

.store-gate__content img {
    max-width: 100%;
    height: auto;
}

.store-gate__content a {
    color: var(--store-blue);
}

/* Actions: big iOS filled button + small caption */
.store-gate__actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    box-shadow: 0 -.5px 0 var(--store-separator);
    animation: store-rise-sm .5s var(--store-ease-out) .7s both;
}

.store-gate__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(360px, 100%);
    height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: var(--store-blue);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 122, 255, .32);
    transition: transform .2s var(--store-ease-out), box-shadow .2s ease, opacity .2s ease, background-color .2s ease;
}

.store-gate__button:hover,
.store-gate__button:focus-visible {
    background: #1a86ff;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 122, 255, .38);
    outline: 0;
}

.store-gate__button:active {
    transform: scale(.97);
    opacity: .85;
}

.store-gate__button i {
    font-size: 15px;
}

.store-gate__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8e8e93;
    font-size: 12px;
    font-weight: 500;
    animation: store-gate-pulse 1.8s ease-in-out infinite;
}

.store-gate__hint i {
    color: var(--store-blue);
    font-size: 13px;
    animation: store-hint-bob 1.4s ease-in-out infinite;
}

.store-gate.is-closing {
    pointer-events: none;
}

.store-gate.is-closing .store-gate__panel {
    animation: store-gate-panel-out .28s ease-in both;
}

.store-gate.is-closing .store-gate__scrim {
    animation: store-gate-scrim-out .32s ease both;
}

@keyframes store-gate-scrim-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes store-gate-scrim-out {
    to {
        opacity: 0;
    }
}

@keyframes store-gate-in {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes store-gate-panel-out {
    to {
        opacity: 0;
        transform: translateY(12px) scale(.975);
    }
}

@keyframes store-sheet-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: none;
    }
}

@keyframes store-sheet-out {
    to {
        transform: translateY(100%);
    }
}

@keyframes store-badge-pop {
    from {
        opacity: 0;
        transform: scale(.5) rotate(-10deg);
    }

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

@keyframes store-badge-wiggle {
    0%, 100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(3deg);
    }
}

@keyframes store-gate-pulse {
    0%, 100% {
        opacity: .62;
    }

    50% {
        opacity: 1;
    }
}

/* Phone: the announcement becomes an iOS bottom sheet with a grabber */
@media (max-width: 767.98px) {
    .store-gate {
        justify-content: flex-end;
        padding: 0;
        overflow: hidden;
    }

    .store-gate__scrim {
        background: rgba(0, 0, 0, .38);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .store-gate__panel {
        width: 100%;
        max-height: 90vh;
        max-height: 90dvh;
        margin: 0;
        padding: 22px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .22);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        animation: store-sheet-in .55s cubic-bezier(.2, .9, .3, 1) both;
    }

    .store-gate__panel::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 36px;
        height: 5px;
        margin-left: -18px;
        border-radius: 3px;
        background: rgba(60, 60, 67, .3);
    }

    .store-gate__badge {
        position: static;
        margin: 6px 0 14px;
        height: 32px;
        padding: 0 13px;
        font-size: 14px;
    }

    .store-gate__content {
        font-size: 13px;
        line-height: 1.65;
    }

    .store-gate__actions {
        margin-top: 16px;
        padding-top: 14px;
        gap: 8px;
    }

    .store-gate__button {
        width: 100%;
        height: 48px;
        font-size: 16px;
    }

    .store-gate__hint {
        font-size: 11px;
    }

    .store-gate.is-closing .store-gate__panel {
        animation: store-sheet-out .32s ease-in both;
    }
}

@media (max-width: 420px) {
    body.storefront-body .store-brand-name {
        font-size: 15px;
    }
}

/* ---------- Reduced motion: keep soft fades, drop movement and loops ---------- */
@media (prefers-reduced-motion: reduce) {
    body.storefront-body .store-notice,
    body.storefront-body .store-ribbon,
    body.storefront-body .store-search,
    body.storefront-body .store-categories,
    body.storefront-body .store-products,
    body.storefront-body .store-product,
    body.storefront-body .store-skeleton__row,
    body.storefront-body .store-products__title small,
    body.storefront-body .store-product-list .item-message,
    body.storefront-body .user-info-box .dropdown-menu.show,
    .store-gate__panel,
    .store-gate__content > *,
    .store-gate__content > div > *,
    .store-gate__actions {
        animation-name: store-fade;
        animation-duration: .35s;
        animation-timing-function: ease;
    }

    .store-gate__badge {
        animation: store-fade .35s ease .15s both;
    }

    body.storefront-body .store-ribbon::before,
    body.storefront-body .store-ribbon i:first-child,
    body.storefront-body .store-skeleton__avatar,
    body.storefront-body .store-skeleton__bar,
    body.storefront-body .store-skeleton__btn,
    body.storefront-body .store-scroll-hint i,
    .store-gate__hint,
    .store-gate__hint i {
        animation: none;
    }

    .store-gate.is-closing .store-gate__panel,
    .store-gate.is-closing .store-gate__scrim {
        animation-name: store-gate-scrim-out;
        animation-duration: .2s;
    }
}

/* ---------- Phone background (v15.1) ----------
   On phones the page is ~2000px tall, so `cover` on <body> blew the 16:9 artwork
   up about 5x and a blurry fragment sat behind every card. Instead, paint the
   artwork on a fixed, screen-sized layer (iOS ignores background-attachment:
   fixed) with a light veil, so it stays at screen scale while the page scrolls. */
@media (max-width: 767.98px) {
    html {
        background: #e8f3f8;
    }

    body.storefront-body {
        background: transparent;
    }

    body.storefront-body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        height: 100lvh;
        z-index: -1;
        pointer-events: none;
        background-color: #e8f3f8;
        background-image:
            linear-gradient(180deg, rgba(232, 243, 248, .30) 0%, rgba(232, 243, 248, .12) 40%, rgba(214, 234, 244, .55) 100%),
            var(--store-bg);
        background-repeat: no-repeat;
        background-size: cover, auto 100%;
        background-position: center, 57% 0;
    }
}

/* v15-2（2026-09-26，升级 3.7.9 后）：官方把 .panel 的毛玻璃挪到了 ::before 并设 z-index:-1，
   但 .panel 没有层叠上下文，模糊层会沉到背景插画下面失效，商品详情/查单页面板变得发白透底。
   isolation:isolate 让模糊层留在面板内部。 */
.panel { isolation: isolate; }