/* love咪 · 购物应用（首页 / 购物车 / 我的 / 背包 / 结算等） — 由 style.css 分拆，后续闲置出售等样式可继续放此文件 */

#shopping-page {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #f4f4f4;
    position: relative;
    overflow: hidden;
}

#shopping-page.active {
    display: flex;
}

/* 购物：顶栏搜索 + 分类横滑 + 双列线性图卡片 */
.shopping-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 10px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.shopping-toolbar-title .shopping-toolbar-center-title {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #111;
}

.shopping-toolbar-title .shopping-toolbar-spacer {
    width: 40px;
    height: 38px;
    flex-shrink: 0;
}

.shopping-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.shopping-view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.shopping-view.is-active {
    display: flex;
}

.shopping-view-home .shopping-feed {
    padding-bottom: 8px;
}

.shopping-tool-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.shopping-tool-btn:active {
    opacity: 0.85;
}

.shopping-search-wrap {
    flex: 1;
    min-width: 0;
}

.shopping-search-input {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    border: none;
    border-radius: 19px;
    background: #f0f0f0;
    padding: 0 16px;
    font-size: 14px;
    color: #333;
    outline: none;
}

.shopping-search-input::placeholder {
    color: #999;
}

.shopping-category-outer {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 6px;
}

.shopping-category-hint {
    font-size: 10px;
    color: #aaa;
    padding: 4px 12px 2px;
    margin: 0;
    line-height: 1.3;
}

.shopping-category-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    max-width: 100%;
    padding: 6px 12px 8px;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.shopping-category-strip::-webkit-scrollbar {
    display: none;
}

.shopping-category-strip:active {
    cursor: grabbing;
}

.shopping-cat-pill {
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    color: #333;
    background: #f3f3f3;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.shopping-cat-pill.is-active {
    background: linear-gradient(135deg, #ff5000 0%, #ff2d4a 100%);
    color: #fff;
    font-weight: 600;
}

.shopping-order-empty {
    text-align: center;
    color: #888;
    font-size: 14px;
    padding: 24px 12px;
    line-height: 1.6;
}

.shopping-order-card {
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: left;
}

.shopping-order-card-head {
    font-weight: 600;
    font-size: 14px;
    color: #111;
    margin-bottom: 8px;
}

.shopping-order-item {
    font-size: 13px;
    color: #444;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.shopping-order-item:last-child {
    border-bottom: none;
}

.shopping-order-action {
    margin-top: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #ff5000 0%, #ff2d4a 100%);
    color: #fff;
    -webkit-tap-highlight-color: transparent;
}

.shopping-order-action--secondary {
    background: #111;
}

.shopping-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 10px 16px;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shopping-feed::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.shopping-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.shopping-product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease;
}

.shopping-product-card:active {
    opacity: 0.92;
}

.shopping-line-art {
    position: relative;
    width: 100%;
    height: 148px;
    overflow: hidden;
}

.shopping-line-art::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.45;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.15) 0,
        rgba(255, 255, 255, 0.15) 1px,
        transparent 1px,
        transparent 14px
    );
}

.shopping-line-art[data-line="1"] {
    background: linear-gradient(160deg, #fff8f0 0%, #ffd8c8 40%, #ff9a76 100%);
}

.shopping-line-art[data-line="2"] {
    background: linear-gradient(145deg, #f0f7ff 0%, #c8ddff 45%, #6b9fff 100%);
}

.shopping-line-art[data-line="3"] {
    background: linear-gradient(155deg, #f5fff5 0%, #c8f5dd 40%, #3ecf8e 100%);
}

.shopping-line-art[data-line="4"] {
    background: linear-gradient(135deg, #faf5ff 0%, #e0c8ff 45%, #9f7aea 100%);
}

.shopping-line-art[data-line="5"] {
    background: linear-gradient(150deg, #fffef5 0%, #ffe8a8 42%, #f6ad55 100%);
}

.shopping-line-art[data-line="6"] {
    background: linear-gradient(140deg, #f5f8fa 0%, #cbd5e0 50%, #718096 100%);
}

.shopping-line-art::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 22%;
    bottom: 28%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    pointer-events: none;
    transform: rotate(-4deg);
}

.shopping-line-art--thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 8px;
}

.shopping-line-art--thumb::after {
    left: 10%;
    right: 10%;
    top: 18%;
    bottom: 22%;
    border-width: 1.5px;
    transform: rotate(-3deg);
}

.shopping-product-info {
    padding: 10px 10px 12px;
}

.shopping-product-name {
    font-size: 13px;
    line-height: 1.35;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    word-break: break-word;
}

.shopping-product-price {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #ff5000;
}

.shopping-empty-hint {
    display: none;
    text-align: center;
    padding: 48px 24px;
    color: #999;
    font-size: 14px;
}

.shopping-empty-hint p {
    margin: 0 0 8px;
}

.shopping-empty-sub {
    font-size: 12px !important;
    color: #bbb !important;
}

/* 购物车（淘宝式列表 + 底栏结算） */
.shopping-cart-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 10px;
    background: #eceff3;
}

.shopping-cart-store {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.shopping-cart-store-title {
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #2a2a2a;
    border-bottom: 1px solid #eee;
}

.shopping-cart-list {
    padding: 0;
}

.shopping-cart-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.shopping-cart-row:last-child {
    border-bottom: none;
}

.shopping-cart-check {
    flex-shrink: 0;
    margin-top: 30px;
    width: 18px;
    height: 18px;
    accent-color: #ff5000;
}

.shopping-cart-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 4px;
}

.shopping-cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.shopping-cart-thumb--ph {
    font-size: 26px;
    opacity: 0.35;
}

.shopping-cart-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.shopping-cart-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
    padding-top: 2px;
}

.shopping-cart-name {
    font-size: 14px;
    color: #333;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.shopping-cart-meta {
    font-size: 13px;
    color: #8a8a8a;
}

.shopping-cart-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.shopping-cart-unit {
    font-size: 15px;
    font-weight: 700;
    color: #ff5000;
}

.shopping-cart-qty {
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}

.shopping-cart-qty button {
    width: 28px;
    height: 28px;
    border: none;
    background: #fafafa;
    font-size: 18px;
    line-height: 1;
    color: #333;
    cursor: pointer;
    padding: 0;
}

.shopping-cart-qty span {
    min-width: 28px;
    text-align: center;
    font-size: 13px;
    color: #333;
}

.shopping-cart-del {
    margin-top: 4px;
    border: none;
    background: none;
    color: #9a9a9a;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 0;
    align-self: flex-start;
}

.shopping-cart-empty {
    display: none;
    text-align: center;
    padding: 40px 20px 24px;
    background: #fff;
    border-radius: 12px;
    margin: 10px;
}

.shopping-cart-empty.is-visible {
    display: block;
}

.shopping-cart-empty p {
    margin: 0 0 8px;
    color: #888;
    font-size: 14px;
}

.shopping-cart-empty-sub {
    font-size: 12px !important;
    color: #bbb !important;
    margin-bottom: 16px !important;
}

.shopping-cart-gohome-btn {
    border: none;
    background: linear-gradient(135deg, #ff5000 0%, #ff2d4a 100%);
    color: #fff;
    padding: 10px 28px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
}

.shopping-cart-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
}

.shopping-cart-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    flex-shrink: 0;
}

.shopping-cart-select-all input {
    width: 18px;
    height: 18px;
    accent-color: #ff5000;
}

.shopping-cart-total-block {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 13px;
    color: #333;
}

.shopping-cart-total-price {
    font-size: 18px;
    color: #ff5000;
    font-weight: 700;
    margin-left: 4px;
}

.shopping-cart-settle {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #ff5000 0%, #ff2d4a 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.shopping-cart-settle:active {
    opacity: 0.9;
}

/* 购物 · 我的（简约线框图标） */
.shopping-view-profile {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding-bottom: 12px;
}

.shop-profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px 20px;
}

.shop-profile-avatar {
    position: relative;
    overflow: hidden;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shop-profile-avatar-btn {
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.shop-profile-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#shop-profile-avatar-ph {
    position: relative;
    z-index: 1;
}

.shop-profile-nick-btn {
    border: none;
    background: none;
    font-size: 17px;
    font-weight: 700;
    color: #111;
    text-align: left;
    padding: 4px 0;
    cursor: pointer;
}

.shop-profile-divider {
    height: 8px;
    background: #f4f4f4;
    border: none;
    margin: 0;
}

.shop-profile-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px 8px 18px;
    background: #fff;
}

.shop-profile-cell {
    flex: 1;
    max-width: 25%;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 4px;
    -webkit-tap-highlight-color: transparent;
    color: #333;
}

.shop-profile-cell span {
    font-size: 12px;
    color: #555;
    line-height: 1.2;
    text-align: center;
}

.shop-profile-icon {
    width: 36px;
    height: 36px;
    color: #111;
}

.shop-profile-cell:active {
    opacity: 0.75;
}

.shop-profile-cell--order {
    position: relative;
}

.shop-order-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff5000;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    line-height: 1;
}

.shopping-checkout-pay-hint {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: -2px !important;
}

.shopping-checkout-method-list {
    max-height: 260px;
}

.shopping-checkout-ship-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.shopping-checkout-ship-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.shopping-checkout-ship-line {
    margin: 0 0 6px;
    font-size: 12px;
    color: #666;
    line-height: 1.45;
    word-break: break-all;
}

.shopping-profile-edit-body {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.shopping-profile-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 12px 0 6px;
}

.shopping-profile-label:first-child {
    margin-top: 0;
}

.shopping-profile-avatar-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.shopping-profile-preview-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.shopping-profile-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopping-profile-preview-ph {
    font-size: 11px;
    color: #999;
    padding: 4px;
    text-align: center;
    line-height: 1.2;
}

.shopping-profile-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 120px;
}

.shopping-profile-mini-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.shopping-profile-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.shopping-profile-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 72px;
}

.shopping-order-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.shopping-order-list-header h3 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.shopping-order-back-btn {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    padding: 4px 10px 4px 4px;
    cursor: pointer;
    color: #111;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.shopping-order-header-spacer {
    width: 36px;
    flex-shrink: 0;
}

.shopping-order-list-body {
    max-height: min(420px, 72vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.shopping-order-empty {
    text-align: center;
    color: #888;
    padding: 28px 12px;
    font-size: 14px;
}

.shopping-order-card {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: #fafafa;
}

.shopping-order-line {
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.35;
}

.shopping-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
}

.shopping-order-total {
    font-size: 15px;
    font-weight: 600;
    color: #ff5000;
}

.shopping-order-action-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ff5000 0%, #ff2d4a 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.shopping-order-action-btn:active {
    opacity: 0.9;
}

.shopping-backpack-modal-content {
    overflow: hidden;
}

.shopping-backpack-body {
    padding-top: 10px;
}

.shopping-backpack-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 18px 2px;
}

.shopping-backpack-tab {
    border: 1px solid #ececec;
    background: #f7f7f7;
    border-radius: 999px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.shopping-backpack-tab em {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 80, 0, 0.1);
    color: #ff5000;
    font-size: 11px;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.shopping-backpack-tab.is-active {
    border-color: rgba(255, 80, 0, 0.16);
    background: linear-gradient(135deg, rgba(255, 80, 0, 0.12) 0%, rgba(255, 45, 74, 0.1) 100%);
    color: #111;
}

.shopping-backpack-tab:active {
    opacity: 0.92;
}

.shopping-bag-card {
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #fafafa;
    padding: 12px;
    margin-bottom: 12px;
}

.shopping-bag-card-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.shopping-bag-cover {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: #f7f7f5;
    border: 1px solid #ececec;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 4px;
}

.shopping-bag-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.shopping-bag-cover--ph {
    color: #777;
    font-size: 20px;
    font-weight: 700;
}

.shopping-bag-main {
    min-width: 0;
    flex: 1;
}

.shopping-bag-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.shopping-bag-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    line-height: 1.35;
}

.shopping-bag-sub {
    margin-top: 6px;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.shopping-bag-time {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}

.shopping-bag-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f2f2f2;
    color: #555;
    font-size: 11px;
    font-weight: 600;
}

.shopping-bag-tag--accent {
    background: rgba(255, 80, 0, 0.12);
    color: #ff5000;
}

.shopping-bag-tag--done {
    background: rgba(17, 17, 17, 0.08);
    color: #111;
}
/* 购物底栏 */
.shopping-bottom-nav {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom, 0px));
    z-index: 20;
}

.shopping-tab-btn {
    position: relative;
    flex: 1;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    cursor: pointer;
    color: #999;
    font-size: 10px;
    -webkit-tap-highlight-color: transparent;
}

.shopping-tab-btn.is-active {
    color: #ff5000;
}

.shopping-tab-icon {
    width: 24px;
    height: 24px;
}

.shopping-tab-badge {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff5000;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-weight: 600;
}

.shopping-loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    z-index: 80;
    align-items: center;
    justify-content: center;
}

.shopping-loading-overlay.show {
    display: flex;
}

.shopping-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #555;
}

.shopping-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #eee;
    border-top-color: #ff5000;
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}

/* ---------- 深色模式（自 style.css 迁入，与全站 html[data-appearance="dark"] 一致） ---------- */
html[data-appearance="dark"] #shopping-page {
    background: linear-gradient(135deg, #111214 0%, #1c1c1e 100%);
}

html[data-appearance="dark"] .shopping-toolbar {
    background: rgba(28, 28, 30, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .shopping-toolbar-title .shopping-toolbar-center-title {
    color: #f5f5f7;
}

html[data-appearance="dark"] .shopping-product-card {
    background: rgba(44, 44, 46, 0.96);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

html[data-appearance="dark"] .shopping-product-name,
html[data-appearance="dark"] .shopping-cart-name,
html[data-appearance="dark"] .shopping-bag-title,
html[data-appearance="dark"] .shopping-cart-store-title,
html[data-appearance="dark"] .shopping-checkout-ship-title,
html[data-appearance="dark"] .shopping-profile-label,
html[data-appearance="dark"] .shop-profile-nick-btn,
html[data-appearance="dark"] .shop-profile-cell-label {
    color: #f5f5f7;
}

html[data-appearance="dark"] .shopping-product-price,
html[data-appearance="dark"] .shopping-cart-total-price {
    color: #ff9f6b;
}

html[data-appearance="dark"] .shopping-cart-meta,
html[data-appearance="dark"] .shopping-empty-hint,
html[data-appearance="dark"] .shopping-cart-select-all,
html[data-appearance="dark"] .shopping-cart-unit,
html[data-appearance="dark"] .shopping-cart-qty,
html[data-appearance="dark"] .shopping-bag-sub,
html[data-appearance="dark"] .shopping-bag-time,
html[data-appearance="dark"] .shopping-bottom-nav .bottom-tab,
html[data-appearance="dark"] .shopping-bottom-nav .bottom-tab-label {
    color: rgba(235, 235, 245, 0.62);
}

html[data-appearance="dark"] .shop-profile-avatar {
    background: rgba(72, 72, 74, 0.96);
    color: #fff;
}

html[data-appearance="dark"] .shopping-cart-scroll,
html[data-appearance="dark"] .shopping-cart-store,
html[data-appearance="dark"] .shopping-cart-footer,
html[data-appearance="dark"] .shopping-checkout-ship-block,
html[data-appearance="dark"] .shopping-bag-card,
html[data-appearance="dark"] .shopping-profile-edit-body,
html[data-appearance="dark"] .shopping-profile-preview-wrap,
html[data-appearance="dark"] .shopping-bottom-nav,
html[data-appearance="dark"] .shopping-view-profile,
html[data-appearance="dark"] .shop-profile-grid,
html[data-appearance="dark"] .shop-profile-divider,
html[data-appearance="dark"] .shop-profile-card {
    background: rgba(44, 44, 46, 0.94);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f5f5f7;
}

html[data-appearance="dark"] .shopping-cart-row,
html[data-appearance="dark"] .shopping-bag-card-row,
html[data-appearance="dark"] .shopping-order-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .shopping-cart-settle,
html[data-appearance="dark"] .shopping-cart-gohome-btn {
    background: #ff5a36;
    color: #fff;
}

html[data-appearance="dark"] .shopping-product-card:active {
    opacity: 0.96;
}

    border-radius: 999px !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* —— 商品列表封面 / 详情页 / 收藏 —— */
.shopping-view-home {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.shopping-product-cover {
    width: 100%;
    height: 148px;
    overflow: hidden;
    background: #f7f7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 6px;
}

/* 美妆雪碧图：封面容器纯白底（含 padding 区），避免灰底透杂点 */
.shopping-product-cover--cosmetic,
.shopping-cart-thumb--cosmetic,
.shopping-fav-thumb--cosmetic,
.shopping-bag-cover--cosmetic {
    background: #f7f7f5 !important;
}

.shopping-detail-hero--cosmetic {
    background: #f7f7f5 !important;
}

/* 服装雪碧图：封面容器浅灰底，与矢量图标背景统一 */
.shopping-product-cover--clothing,
.shopping-cart-thumb--clothing,
.shopping-fav-thumb--clothing,
.shopping-bag-cover--clothing {
    background: #f7f7f5 !important;
}

.shopping-detail-hero--clothing {
    background: #f7f7f5 !important;
}

.shopping-product-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

/* 高跟鞋 PNG 构图更满，略缩小以与鞋子雪碧图标的留白与体量对齐 */
.shopping-product-cover img.shopping-cover-img--highheel {
    width: 56%;
    height: 56%;
}

.shopping-cart-thumb img.shopping-cover-img--highheel,
.shopping-fav-thumb img.shopping-cover-img--highheel,
.shopping-bag-cover img.shopping-cover-img--highheel {
    width: 56%;
    height: 56%;
}

.shopping-detail-hero img.shopping-cover-img--highheel {
    width: 56%;
    height: 56%;
}

/* assets/shopping PNG 商品图标：直接使用原素材，橱窗内等比缩小并统一为黑/灰/白观感 */
.shopping-product-cover--asset,
.shopping-cart-thumb--asset,
.shopping-fav-thumb--asset,
.shopping-bag-cover--asset {
    background: #f7f7f5 !important;
}

.shopping-detail-hero--asset {
    background: #f7f7f5 !important;
}

.shopping-product-cover img.shopping-cover-img--shopping-asset {
    width: min(82%, 124px);
    height: min(82%, 124px);
    max-width: 124px;
    max-height: 124px;
    object-fit: contain;
    border-radius: 0;
    filter: grayscale(1) saturate(0) contrast(1.18) brightness(0.92);
    mix-blend-mode: multiply;
}

.shopping-cart-thumb img.shopping-cover-img--shopping-asset,
.shopping-fav-thumb img.shopping-cover-img--shopping-asset,
.shopping-bag-cover img.shopping-cover-img--shopping-asset {
    width: 84%;
    height: 84%;
    object-fit: contain;
    border-radius: 0;
    filter: grayscale(1) saturate(0) contrast(1.18) brightness(0.92);
    mix-blend-mode: multiply;
}

.shopping-detail-hero img.shopping-cover-img--shopping-asset {
    width: min(76%, 176px);
    height: min(76%, 176px);
    max-width: 176px;
    max-height: 176px;
    margin: 12px auto;
    object-fit: contain;
    border-radius: 0;
    filter: grayscale(1) saturate(0) contrast(1.18) brightness(0.92);
    mix-blend-mode: multiply;
}

/* .ai 图标包抽出的橱窗图标：统一黑/灰/白比例与留白 */
.shopping-product-cover--ai-icon,
.shopping-cart-thumb--ai-icon,
.shopping-fav-thumb--ai-icon,
.shopping-bag-cover--ai-icon {
    background: #f7f7f5 !important;
}

.shopping-detail-hero--ai-icon {
    background: #f7f7f5 !important;
}

.shopping-cover-ai-icon {
    display: block;
    width: min(78%, 116px);
    height: min(78%, 116px);
    max-width: 116px;
    max-height: 116px;
    color: #20282c;
    overflow: visible;
    flex: 0 0 auto;
}

.shopping-cart-thumb .shopping-cover-ai-icon,
.shopping-fav-thumb .shopping-cover-ai-icon,
.shopping-bag-cover .shopping-cover-ai-icon {
    width: 82%;
    height: 82%;
    max-width: 54px;
    max-height: 54px;
}

.shopping-detail-hero .shopping-cover-ai-icon {
    width: min(74%, 172px);
    height: min(74%, 172px);
    max-width: 172px;
    max-height: 172px;
    margin: 12px auto;
}

/* 鞋子雪碧图：白底 + 细边框，与矢量商品封面统一；提亮滤镜去掉整块深灰感 */
.shopping-cover-sprite {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background-image: url('assets/shopping-shoe-sprites.webp');
    background-repeat: no-repeat;
    background-size: 400% 400%;
    background-position: calc(var(--ssc, 0) * (100% / 3)) calc(var(--ssr, 0) * (100% / 3));
    filter: grayscale(1) brightness(1.42) contrast(1.28);
}

.shopping-cart-thumb .shopping-cover-sprite,
.shopping-fav-thumb .shopping-cover-sprite,
.shopping-bag-cover .shopping-cover-sprite {
    border-radius: 8px;
}

/* 服装 4×4 雪碧图（shopping-clothing-sprites.svg）：与鞋子封面同款百分比切片 */
.shopping-cover-clothing {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #f7f7f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background-image: url('assets/shopping-clothing-sprites.svg?v=2');
    background-repeat: no-repeat;
    background-size: 400% 400%;
    background-position: calc(var(--clc, 0) * (100% / 3)) calc(var(--clr, 0) * (100% / 3));
    filter: none;
    overflow: hidden;
}

/* 列表橱窗为横向矩形时，若直接用 400%×400% 拉伸正方形雪碧图，X/Y 比例不一致会导致切片错位、露出隔壁格 */
.shopping-product-cover .shopping-cover-clothing {
    flex: 0 0 auto;
    align-self: center;
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    max-width: 100%;
    border-radius: 10px;
    min-height: 0;
}

.shopping-product-cover .shopping-cover-sprite {
    flex: 0 0 auto;
    align-self: center;
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    max-width: 100%;
    min-height: 0;
}

.shopping-cart-thumb .shopping-cover-clothing,
.shopping-fav-thumb .shopping-cover-clothing,
.shopping-bag-cover .shopping-cover-clothing {
    border-radius: 8px;
}

.shopping-detail-hero .shopping-cover-clothing {
    width: min(100%, 200px);
    height: auto;
    max-height: 200px;
    aspect-ratio: 1;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
}

.shopping-detail-hero .shopping-cover-sprite {
    width: min(100%, 200px);
    height: auto;
    max-height: 200px;
    aspect-ratio: 1;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
}

/* 美妆 6×4 雪碧图（黑底透明）；图层下衬纯白；弱对比减轻颗粒感；?v=5 PNG 再压噪 */
.shopping-cover-cosmetic {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    background-image: url('assets/shopping-cosmetic-grid-6x4.png?v=7');
    background-repeat: no-repeat;
    background-size: 400% 600%;
    background-position: calc(var(--cc, 0) * (100% / 3)) calc(var(--cr, 0) * (100% / 5));
    filter: none;
    image-rendering: auto;
}

.shopping-product-cover .shopping-cover-cosmetic {
    border-radius: 10px;
    min-height: 120px;
}

.shopping-cart-thumb .shopping-cover-cosmetic,
.shopping-fav-thumb .shopping-cover-cosmetic,
.shopping-bag-cover .shopping-cover-cosmetic {
    border-radius: 8px;
}

.shopping-detail-hero .shopping-cover-cosmetic {
    width: 100%;
    height: 200px;
    border-radius: 12px;
}

.shopping-product-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    border: none;
    font: inherit;
    color: inherit;
    padding: 0;
}

.shopping-product-card .shopping-product-price {
    padding: 0 10px 10px;
    margin-top: auto;
}

.shopping-product-detail-panel {
    position: absolute;
    inset: 0;
    z-index: 30;
    flex-direction: column;
    background: #f6f6f8;
    display: none;
}

.shopping-detail-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 10px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.shopping-detail-toolbar-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.shopping-detail-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 100px;
    scrollbar-width: none;
}

.shopping-detail-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.shopping-detail-hero {
    width: 100%;
    max-height: 220px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    margin-bottom: 14px;
    box-sizing: border-box;
    padding: 10px;
}

.shopping-detail-hero img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}

.shopping-detail-hero--ph {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    opacity: 0.35;
}

.shopping-detail-name {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    line-height: 1.35;
    margin: 0 0 8px;
}

.shopping-detail-price {
    font-size: 22px;
    font-weight: 800;
    color: #ff5000;
    margin-bottom: 14px;
}

.shopping-detail-section {
    margin-bottom: 14px;
}

.shopping-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.shopping-detail-copy {
    font-size: 14px;
    line-height: 1.55;
    color: #333;
    margin: 0;
    white-space: pre-wrap;
}

.shopping-detail-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.shopping-detail-linebtn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1.5px solid #111;
    background: #fff;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.shopping-detail-linebtn .shopping-detail-lineicon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.shopping-detail-linebtn--cart {
    background: linear-gradient(135deg, #ff5000 0%, #ff2d4a 100%);
    border-color: transparent;
    color: #fff;
}

.shopping-detail-linebtn--fav.is-active {
    border-color: #ff5000;
    color: #ff5000;
    background: rgba(255, 80, 0, 0.06);
}

.shopping-detail-linebtn:active {
    opacity: 0.9;
}

.shopping-fav-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
}

.shopping-fav-hit {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}

.shopping-fav-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f7f7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 3px;
}

.shopping-fav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 7px;
    display: block;
}

.shopping-fav-thumb--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    opacity: 0.4;
}

.shopping-fav-meta {
    min-width: 0;
}

.shopping-fav-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
    word-break: break-word;
}

.shopping-fav-price {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #ff5000;
}

.shopping-fav-remove {
    width: 40px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

html[data-appearance="dark"] .shopping-product-cover {
    background: #2c2c2e;
}

html[data-appearance="dark"] .shopping-cover-sprite {
    background-color: #3a3a3c;
    border-color: rgba(255, 255, 255, 0.1);
    filter: grayscale(1) brightness(0.95) contrast(1.12);
}

html[data-appearance="dark"] .shopping-cover-clothing {
    background-color: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.08);
    filter: brightness(0.85) contrast(1.1);
}

html[data-appearance="dark"] .shopping-product-cover--cosmetic,
html[data-appearance="dark"] .shopping-cart-thumb--cosmetic,
html[data-appearance="dark"] .shopping-fav-thumb--cosmetic,
html[data-appearance="dark"] .shopping-bag-cover--cosmetic {
    background: #f7f7f5 !important;
}

html[data-appearance="dark"] .shopping-detail-hero--cosmetic {
    background: #f7f7f5 !important;
}

html[data-appearance="dark"] .shopping-product-cover--clothing,
html[data-appearance="dark"] .shopping-cart-thumb--clothing,
html[data-appearance="dark"] .shopping-fav-thumb--clothing,
html[data-appearance="dark"] .shopping-bag-cover--clothing {
    background: #2c2c2e !important;
}

html[data-appearance="dark"] .shopping-detail-hero--clothing {
    background: #2c2c2e !important;
}

html[data-appearance="dark"] .shopping-product-cover--asset,
html[data-appearance="dark"] .shopping-cart-thumb--asset,
html[data-appearance="dark"] .shopping-fav-thumb--asset,
html[data-appearance="dark"] .shopping-bag-cover--asset,
html[data-appearance="dark"] .shopping-detail-hero--asset {
    background: #f7f7f5 !important;
}

html[data-appearance="dark"] .shopping-cover-cosmetic {
    background-color: transparent;
    filter: none;
}

html[data-appearance="dark"] .shopping-detail-toolbar {
    background: rgba(28, 28, 30, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .shopping-detail-toolbar-title,
html[data-appearance="dark"] .shopping-detail-name {
    color: #f5f5f7;
}

html[data-appearance="dark"] .shopping-product-detail-panel {
    background: #111214;
}

html[data-appearance="dark"] .shopping-detail-copy {
    color: rgba(245, 245, 247, 0.92);
}

html[data-appearance="dark"] .shopping-detail-label {
    color: rgba(235, 235, 245, 0.55);
}

html[data-appearance="dark"] .shopping-detail-hero {
    background: #2c2c2e;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

html[data-appearance="dark"] .shopping-detail-bar {
    background: rgba(28, 28, 30, 0.88);
    border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .shopping-detail-linebtn {
    background: rgba(44, 44, 46, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f5f5f7;
}

html[data-appearance="dark"] .shopping-detail-linebtn--cart {
    background: #ff5a36;
    border-color: transparent;
    color: #fff;
}

html[data-appearance="dark"] .shopping-detail-linebtn--fav.is-active {
    border-color: #ff9f6b;
    color: #ff9f6b;
    background: rgba(255, 90, 54, 0.12);
}

html[data-appearance="dark"] .shopping-fav-hit {
    background: rgba(44, 44, 46, 0.94);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .shopping-fav-title {
    color: #f5f5f7;
}