* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #121212; -webkit-font-smoothing: antialiased; }
.shop-app { max-width: 480px; margin: 0 auto; background: #fff; min-height: 100vh; padding-bottom: 80px; }

/* Gallery */
.gallery-section { background: #fff; }
.gallery-main { position: relative; aspect-ratio: 1; background: #fafafa; overflow: hidden; touch-action: pan-y pinch-zoom; cursor: pointer; }
.gallery-viewport { width: 100%; height: 100%; overflow: hidden; }
.gallery-track { display: flex; height: 100%; will-change: transform; transition: transform .28s ease-out; }
.gallery-track.dragging { transition: none; }
.gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gallery-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; z-index: 2; pointer-events: none; }
.gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .2s, transform .2s; }
.gallery-dot.active { background: #fff; transform: scale(1.15); }
.gallery-counter { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 12px; z-index: 2; line-height: 1.2; }
.gallery-nav,
.photo-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    transition: opacity .2s, background .2s;
}
.gallery-nav {
    background: rgba(255, 255, 255, 0.88);
    color: #121212;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.photo-lightbox-nav {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.gallery-nav:hover,
.photo-lightbox-nav:hover { opacity: 0.92; }
.gallery-nav:disabled,
.photo-lightbox-nav:disabled {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}
.gallery-nav-prev,
.photo-lightbox-nav-prev { left: 10px; }
.gallery-nav-next,
.photo-lightbox-nav-next { right: 10px; }

/* Product head */
.product-head { margin-bottom: 16px; }
.price-block { margin-bottom: 8px; }
.price-block:has(+ .promo-countdown-banner) { margin-bottom: 10px; }
.price-current { font-size: 28px; font-weight: 700; color: #121212; line-height: 1.15; }
.price-compare-row { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.price-original { font-size: 14px; color: #999; text-decoration: line-through; }
.price-discount-pct { font-size: 13px; color: #fe2c55; font-weight: 500; }
.product-title { font-size: 15px; font-weight: 500; line-height: 1.5; margin: 0 0 8px; color: #121212; }
.product-seller { font-size: 13px; color: #888; margin-bottom: 12px; }
.quickship-banner, .bestseller-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
.quickship-banner { background: #f0faf6; border: 1px solid #bfe8d5; color: #008c5e; }
.quickship-icon { font-size: 16px; line-height: 1; }
.quickship-label { font-weight: 700; }
.quickship-sep { opacity: .45; }
.quickship-date { flex: 1; min-width: 0; }
.quickship-chevron, .bestseller-chevron { opacity: .55; font-size: 16px; margin-left: auto; }
.bestseller-banner { background: #fff9eb; border: 1px solid #ffe2a8; color: #c88719; }
.bestseller-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #ffb347, #ff8c00); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.bestseller-category { font-weight: 600; flex: 1; min-width: 0; }
.product-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 4px; font-size: 13px; color: #333; }
.product-stats-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.stat-rating { font-weight: 600; }
.stat-sep { color: #ccc; }
.stat-sold { color: #555; }
.product-free-shipping { display: inline-flex; align-items: center; gap: 4px; color: #008c5e; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.free-ship-icon { font-size: 15px; line-height: 1; }

.shop-body { padding: 12px 16px 24px; }

/* Legacy price aliases for checkout JS */
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-discount { font-size: 12px; color: #fe2c55; background: #fff0f3; padding: 2px 6px; border-radius: 4px; font-weight: 600; }

/* Promo countdown */
.product-head .promo-countdown-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 11px 12px;
    background: #ff2d55;
    border-radius: 10px;
    color: #fff;
}
.promo-countdown-text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}
.promo-countdown-timer {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.promo-countdown-unit {
    display: inline-flex;
    min-width: 30px;
    padding: 5px 5px;
    background: #fff;
    border-radius: 6px;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.promo-countdown-digit {
    font-size: 13px;
    font-weight: 700;
    color: #121212;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    min-width: 1.4em;
    text-align: center;
}
.promo-countdown-colon {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    padding: 0 1px;
}
.product-head .product-title { margin-top: 0; }

/* Promo tags */
.promo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.promo-tag { font-size: 11px; color: #fe2c55; background: #fff0f3; padding: 4px 8px; border-radius: 4px; border: 1px solid #ffd6de; }

/* SKU panel */
.sku-panel {
    margin: 0 -16px 0;
    background: #fff;
    border-top: 8px solid #f5f5f5;
}
.sku-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px 10px;
    background: #fff;
}
.sku-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #121212;
}
.sku-panel-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.sku-qty-limit {
    font-size: 14px;
    color: #fe2c55;
    font-weight: 700;
}
.sku-panel-body {
    display: block;
    padding: 0 16px 16px;
}
.sku-panel .variant-section {
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: none;
}
.sku-panel .variant-section:last-child {
    margin-bottom: 0;
}
.variant-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: #121212; }
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #121212;
    transition: border-color .15s, background .15s, color .15s;
}
.variant-option.active {
    border: 2px solid #121212;
    background: #fff5f7;
    color: #c41e3a;
    padding: 7px 13px 7px 7px;
}
.variant-option img,
.variant-option-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
    background: #fafafa;
}
.variant-option-thumb.placeholder {
    display: inline-block;
    background: #f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bbb' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3Cpath d='M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 13.5 1h-11zm11.25 4.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-2.03 2.78a.75.75 0 0 0-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.variant-option-label { font-weight: 500; line-height: 1.2; }

/* Shipping & returns */
.shop-services {
    margin: 0 -16px 0;
    background: #fff;
    border-top: 8px solid #f5f5f5;
}
.shop-services-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.shop-services-title {
    font-size: 15px;
    font-weight: 700;
    color: #121212;
}
.shop-services-chevron {
    font-size: 18px;
    line-height: 1;
    color: #999;
    transform: rotate(90deg);
    transition: transform .2s ease;
}
.shop-services.is-collapsed .shop-services-chevron {
    transform: rotate(0deg);
}
.shop-services.is-collapsed .shop-services-body {
    display: none;
}
.shop-services-body {
    padding: 0 16px 14px;
}
.shop-service-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid #f0f0f0;
}
.shop-service-item:first-child {
    border-top: none;
    padding-top: 0;
}
.shop-service-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
    margin-top: 2px;
    display: block;
}
.shop-service-icon-placeholder {
    background: #f0f0f0;
    border-radius: 4px;
}
.shop-service-text {
    flex: 1;
    min-width: 0;
}
.shop-service-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #007185;
    margin: 0 0 6px;
    line-height: 1.3;
}
.shop-service-content {
    font-size: 13px;
    line-height: 1.45;
    color: #565959;
    margin: 0;
}
.shop-service-content strong,
.shop-service-content b {
    font-weight: 700;
    color: #565959;
}

/* TikTok Shop protection */
.shop-protection {
    margin: 0 -16px 0;
    background: #fff;
    border-top: 8px solid #f5f5f5;
}
.shop-protection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.shop-protection-title {
    font-size: 15px;
    font-weight: 700;
    color: #121212;
}
.shop-protection-chevron {
    font-size: 18px;
    line-height: 1;
    color: #999;
    transform: rotate(90deg);
    transition: transform .2s ease;
}
.shop-protection.is-collapsed .shop-protection-chevron {
    transform: rotate(0deg);
}
.shop-protection-body {
    overflow: hidden;
}
.shop-protection.is-collapsed .shop-protection-body {
    display: none;
}
.shop-protection-items {
    display: flex;
    align-items: stretch;
    padding: 0 8px 14px;
}
.shop-protection-item {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 4px 0;
    text-align: center;
}
.shop-protection-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12%;
    height: 76%;
    width: 1px;
    background: #ececec;
}
.shop-protection-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-bottom: 8px;
    display: block;
}
.shop-protection-icon-placeholder {
    background: #e8f5f0;
    border-radius: 50%;
}
.shop-protection-label {
    font-size: 10px;
    line-height: 1.25;
    color: #121212;
    font-weight: 500;
    word-break: break-word;
}

/* Reviews module */
.reviews-module {
    margin: 0 -16px 0;
    padding: 16px 16px 8px;
    background: #fff;
    border-top: 8px solid #f5f5f5;
}
.reviews-module-title {
    font-size: 18px;
    font-weight: 700;
    color: #121212;
    margin-bottom: 14px;
}
.review-stats-bars { margin-bottom: 18px; }
.review-stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.review-stat-label {
    width: 28px;
    font-size: 13px;
    font-weight: 600;
    color: #121212;
    flex-shrink: 0;
}
.review-stat-bar {
    flex: 1;
    height: 8px;
    background: #ececec;
    border-radius: 4px;
    overflow: hidden;
}
.review-stat-fill {
    display: block;
    height: 100%;
    background: #121212;
    border-radius: 4px;
}
.review-stat-count {
    min-width: 42px;
    text-align: right;
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.review-photos-section { margin-bottom: 18px; }
.review-photos-title,
.review-list-title {
    font-size: 15px;
    font-weight: 700;
    color: #121212;
    margin-bottom: 10px;
}
.review-photos-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.review-photo-card {
    position: relative;
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
}
.review-photo-card img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.review-photo-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 6px 6px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
    color: #fff;
}
.review-photo-stars {
    display: block;
    font-size: 8px;
    line-height: 1;
    color: #ffd76a;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.review-photo-user {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}
.review-photo-user-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.95;
}
.review-photo-author {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-entries { display: flex; flex-direction: column; gap: 20px; }
.review-entry {
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}
.review-entry:last-child { border-bottom: none; padding-bottom: 0; }
.review-entry-head { display: flex; gap: 10px; margin-bottom: 10px; }
.review-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e8e8e8;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bdbdbd'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}
.review-entry-meta { min-width: 0; flex: 1; }
.review-entry-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 6px;
    line-height: 1.3;
}
.review-entry-name {
    font-size: 14px;
    font-weight: 700;
    color: #121212;
}
.review-verified {
    font-size: 12px;
    color: #999;
    font-weight: 400;
}
.review-entry-stars {
    font-size: 11px;
    color: #121212;
    letter-spacing: 1px;
    line-height: 1;
}
.review-entry-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.review-entry-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #121212;
    margin: 0;
}
.review-entry-photo-stack {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.review-entry-photo-stack.is-single {
    width: 64px;
    height: 64px;
}
.review-entry-photo-stack .stack-item {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.review-entry-photo-stack.is-single .stack-item {
    position: relative;
    width: 64px;
    height: 64px;
}
.review-entry-photo-stack .stack-item-back {
    top: 6px;
    left: 0;
    z-index: 1;
}
.review-entry-photo-stack .stack-item-front {
    top: 0;
    right: 0;
    z-index: 2;
}
.review-entry-photo-stack .stack-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.review-photo-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    color: #121212;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
}
.review-lightbox,
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: #000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.review-lightbox.open,
.photo-lightbox.open {
    opacity: 1;
    visibility: visible;
}
.review-lightbox[hidden],
.photo-lightbox[hidden] { display: flex !important; }
body.review-lightbox-open,
body.photo-lightbox-open { overflow: hidden; }
.review-lightbox-close,
.photo-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.review-lightbox-viewport,
.photo-lightbox-viewport {
    flex: 1;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
}
.review-lightbox-track,
.photo-lightbox-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform .28s ease-out;
}
.review-lightbox-track.dragging,
.photo-lightbox-track.dragging { transition: none; }
.review-lightbox-slide,
.photo-lightbox-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 12px 64px;
    box-sizing: border-box;
}
.review-lightbox-slide img,
.photo-lightbox-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.review-lightbox-counter,
.photo-lightbox-counter {
    position: absolute;
    bottom: 20px;
    right: 16px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    line-height: 1.2;
    pointer-events: none;
}
.reviews-more-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    padding: 12px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #121212;
    user-select: none;
    pointer-events: none;
}
.reviews-more-arrow {
    font-size: 18px;
    line-height: 1;
    color: #666;
}

/* Store */
.store-section {
    margin: 0 -16px 0;
    padding: 16px 16px 16px;
    background: #fff;
    border-top: 8px solid #f5f5f5;
}
.store-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #121212;
    margin: 0 0 12px;
    line-height: 1.3;
}
.store-card {
    background: #121212;
    border-radius: 14px;
    padding: 16px;
    color: #fff;
}
.store-card-top {
    margin-bottom: 16px;
}
.store-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.store-name {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    color: #fff;
}
.store-verified {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}
.store-official-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 3px 8px 3px 5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
}
.store-tiktok-icon {
    flex-shrink: 0;
    color: #fff;
}
.store-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
}
.store-summary-sep {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
}
.store-metrics {
    display: flex;
    align-items: stretch;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.store-metric {
    position: relative;
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0 4px;
}
.store-metric:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 8%;
    height: 84%;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}
.store-metric-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.store-metric-icon {
    flex-shrink: 0;
    color: #fff;
    opacity: 0.95;
}
.store-metric-label {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.62);
    word-break: break-word;
}

/* Description */
.description-section {
    margin: 0 -16px 24px;
    padding: 16px 16px 8px;
    background: #fff;
    border-top: 8px solid #f5f5f5;
}
.description-section h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.description-content { font-size: 14px; line-height: 1.7; color: #333; }
.description-content p { margin-bottom: 12px; }
.description-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }

/* Buy bar */
.buy-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; padding: 10px 16px 14px; background: #fff; border-top: 1px solid #eee; box-shadow: 0 -2px 12px rgba(0,0,0,.08); z-index: 100; }
.btn-buy-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border: none; border-radius: 10px; background: #ff2d55; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s; }
.btn-buy-cta:active { background: #e8264c; }
.buy-icon { width: 22px; height: 22px; color: #fff; flex-shrink: 0; transform: rotate(0deg); }
.buy-discount { color: #fff; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; white-space: nowrap; }
.buy-action { color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap; }

@media (min-width: 481px) {
    body { background: #e8e8e8; }
    .shop-app { box-shadow: 0 0 20px rgba(0,0,0,.08); }
}

/* Spin wheel — product page intro */
body.wheel-active {
    overflow: hidden;
}

.wheel-purchase-alert {
    margin: 12px 16px;
    padding: 11px 12px;
    background: #ff2d55;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}
.wheel-purchase-alert[hidden] {
    display: none !important;
}
.wheel-purchase-alert-text {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

body.wheel-active .shop-main {
    visibility: hidden;
    pointer-events: none;
}

body.wheel-active .checkout-flow {
    display: none !important;
}

.wheel-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 16, 0.92);
    padding: 24px 16px;
    opacity: 1;
    transition: opacity 0.45s ease;
}

.wheel-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.wheel-popup {
    width: 100%;
    max-width: 360px;
    text-align: center;
    position: relative;
}

.wheel-title {
    margin: 0 0 28px;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    letter-spacing: -0.02em;
}

.wheel-title em {
    font-style: normal;
    color: #ff4d8d;
}

.wheel-stage {
    position: relative;
    width: min(320px, 88vw);
    height: min(320px, 88vw);
    margin: 0 auto 28px;
    transition: opacity 0.45s ease, transform 0.45s ease;
    overflow: hidden;
    border-radius: 50%;
}

.wheel-stage.is-dimmed {
    opacity: 0.25;
    transform: scale(0.92);
    pointer-events: none;
}

.wheel-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 28px solid #00f0ff;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8));
    z-index: 6;
}

.wheel-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 3.75s cubic-bezier(0.12, 0.75, 0.18, 1);
    overflow: hidden;
    box-shadow:
        inset 0 0 0 3px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(255, 77, 141, 0.45);
    background: conic-gradient(
        from -47deg,
        #1e1630 0deg 83deg,
        rgba(255, 255, 255, 0.28) 83deg 87deg,
        #251a38 87deg 173deg,
        rgba(255, 255, 255, 0.28) 173deg 177deg,
        #1a1428 177deg 263deg,
        rgba(255, 255, 255, 0.28) 263deg 267deg,
        #221830 267deg 353deg,
        rgba(255, 255, 255, 0.28) 353deg 360deg
    );
}

@keyframes wheel-disc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(var(--wheel-target-deg, 1440deg)); }
}

.wheel-disc.is-spinning,
.wheel-rim.is-spinning {
    animation: wheel-disc-spin var(--wheel-spin-duration, 3.75s) cubic-bezier(0.12, 0.75, 0.18, 1) forwards;
}

.wheel-disc.is-spinning {
    filter: none;
}

.wheel-disc.is-stopped .wheel-segment-label.is-win .wheel-segment-price {
    color: #ff4d8d;
    text-shadow: 0 0 14px rgba(255, 77, 141, 0.95);
}

.wheel-rim {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    border: 9px solid #ff4d8d;
    box-shadow:
        0 0 0 4px rgba(0, 240, 255, 0.42),
        inset 0 0 0 4px rgba(0, 0, 0, 0.45);
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 3.75s cubic-bezier(0.12, 0.75, 0.18, 1);
}

.wheel-segment-label {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    max-width: 34%;
    margin-left: -17%;
    margin-top: 0;
    font-weight: 800;
    color: #fff;
    text-align: center;
    line-height: 1.05;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    transform-origin: 50% 0;
    pointer-events: none;
    overflow: hidden;
}

.wheel-segment-price {
    display: block;
    font-size: clamp(0.95rem, 4.6vw, 1.35rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wheel-segment-label.is-win .wheel-segment-price {
    font-size: clamp(1.05rem, 5vw, 1.48rem);
    color: #ffe8f2;
    text-shadow:
        0 0 14px rgba(255, 77, 141, 0.95),
        0 2px 8px rgba(0, 0, 0, 0.9);
}

.wheel-disc.is-spinning .wheel-segment-price {
    font-size: clamp(1rem, 4.9vw, 1.42rem);
}

.wheel-disc.is-spinning .wheel-segment-label.is-win .wheel-segment-price {
    font-size: clamp(1.12rem, 5.4vw, 1.55rem);
    color: #ff9fd0;
}

/* 文字径向排列，指向圆心，落在各 1/4 扇区内 */
.wheel-segment-label:nth-child(1) { transform: rotate(0deg) translateY(-108px) rotate(180deg); }
.wheel-segment-label:nth-child(2) { transform: rotate(90deg) translateY(-108px) rotate(180deg); }
.wheel-segment-label:nth-child(3) { transform: rotate(180deg) translateY(-108px) rotate(180deg); }
.wheel-segment-label:nth-child(4) { transform: rotate(270deg) translateY(-108px) rotate(180deg); }

.wheel-segment-label .prize-highlight {
    color: #ff4d8d;
}

.wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4d8d, #ff2d78);
    box-shadow: 0 0 16px rgba(255, 77, 141, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border: 4px solid rgba(255, 255, 255, 0.35);
}

.wheel-hub svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.wheel-confetti {
    position: absolute;
    inset: -20px;
    pointer-events: none;
    overflow: visible;
}

.wheel-confetti span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: confetti-float 3s ease-in-out infinite;
}

.wheel-confetti span:nth-child(1) { top: 10%; left: 5%; background: #ff4d8d; animation-delay: 0s; }
.wheel-confetti span:nth-child(2) { top: 20%; right: 8%; background: #00f0ff; animation-delay: 0.4s; width: 6px; height: 10px; }
.wheel-confetti span:nth-child(3) { bottom: 15%; left: 10%; background: #ff4d8d; animation-delay: 0.8s; }
.wheel-confetti span:nth-child(4) { bottom: 25%; right: 5%; background: #00f0ff; animation-delay: 1.2s; }
.wheel-confetti span:nth-child(5) { top: 50%; left: -5%; background: #ff4d8d; animation-delay: 0.6s; width: 10px; height: 6px; }
.wheel-confetti span:nth-child(6) { top: 40%; right: -3%; background: #00f0ff; animation-delay: 1s; }

.wheel-overlay.is-spinning .wheel-confetti span {
    opacity: 0.85;
}

@keyframes confetti-float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-8px) rotate(180deg); opacity: 1; }
}

.wheel-btn {
    display: inline-block;
    min-width: 200px;
    padding: 14px 32px;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    cursor: default;
    opacity: 0.85;
}

.wheel-result {
    margin-top: 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #00f0ff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
}

.wheel-result.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.wheel-result strong {
    color: #ff4d8d;
}

.wheel-prize-reveal {
    position: relative;
    min-height: 168px;
    margin-top: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.wheel-prize-reveal.is-visible {
    opacity: 1;
}

.wheel-prize-card {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(28px) scale(0.94);
    transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wheel-prize-card.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wheel-prize-kicker {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
}

.wheel-prize-amount-slot {
    position: relative;
    min-height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0 2px;
}

.wheel-prize-amount {
    font-size: clamp(2rem, 9vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

.wheel-prize-amount.is-target {
    opacity: 1;
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}

.wheel-prize-amount.is-revealed {
    color: #ff4d8d;
    opacity: 1;
    text-shadow: 0 0 22px rgba(255, 77, 141, 0.9);
}

.wheel-prize-fly {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    --fly-start-y: 150px;
    transform: translate(-50%, calc(-50% - var(--fly-start-y))) scale(0.48);
    font-size: clamp(2rem, 9vw, 2.6rem);
    font-weight: 900;
    color: #ff4d8d;
    letter-spacing: -0.03em;
    text-shadow: 0 0 24px rgba(255, 77, 141, 0.9);
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
}

.wheel-prize-fly.is-flying {
    animation: wheel-prize-fly-to-slot var(--wheel-fly-duration, 0.55s) cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
}

.wheel-prize-fly.is-done {
    opacity: 0 !important;
    visibility: hidden;
}

@keyframes wheel-prize-fly-to-slot {
    0% {
        opacity: 0.25;
        transform: translate(-50%, calc(-50% - var(--fly-start-y))) scale(0.48);
    }
    62% {
        opacity: 1;
        transform: translate(-50%, calc(-50% + 4px)) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.wheel-prize-limit {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 45, 85, 0.92);
    box-shadow: 0 0 16px rgba(255, 45, 85, 0.45);
    opacity: 0;
    transform: scale(0.82);
}

.wheel-prize-limit.is-visible {
    animation: wheel-limit-pop 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes wheel-limit-pop {
    0% { opacity: 0; transform: scale(0.82); }
    100% { opacity: 1; transform: scale(1); }
}

/* Block / coupon landing view — 全部阻档 */
body.block-mode {
    background: linear-gradient(165deg, #7b5cff 0%, #6a4cf0 45%, #5b3fe8 100%);
}

.shop-app--block {
    background: transparent;
    min-height: 100vh;
    padding-bottom: 0;
}

.block-page {
    min-height: 100vh;
    padding: 28px 18px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block-header {
    text-align: center;
    color: #fff;
    margin-bottom: 22px;
    max-width: 320px;
}

.block-header-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 10px;
}

.block-header-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.block-header-sub {
    font-size: 0.8rem;
    line-height: 1.45;
    opacity: 0.92;
}

.block-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(42, 24, 120, 0.28);
}

.block-card-image {
    aspect-ratio: 1;
    background: #f7f7f7;
    overflow: hidden;
}

.block-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.block-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
    color: #121212;
    padding: 14px 16px 8px;
}

.block-card-desc {
    font-size: 0.72rem;
    line-height: 1.55;
    color: #666;
    padding: 0 16px 14px;
}

.block-coupon-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 18px;
    border-top: 1px solid #f0f0f0;
}

.block-coupon-label {
    display: block;
    font-size: 0.72rem;
    color: #888;
    margin-bottom: 2px;
}

.block-coupon-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fe2c55;
    letter-spacing: -0.02em;
}

.block-claim-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6b9d, #fe2c55);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(254, 44, 85, 0.35);
    white-space: nowrap;
}

.block-claim-btn:active {
    transform: scale(0.98);
}

@media (min-width: 481px) {
    body.block-mode { background: linear-gradient(165deg, #7b5cff 0%, #6a4cf0 45%, #5b3fe8 100%); }
    .shop-app--block { box-shadow: none; }
}

/* Checkout flow — inline on product page */
.checkout-flow {
    display: none;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
}

.shop-app.is-checkout .checkout-flow {
    display: flex;
}

.shop-app.is-checkout .shop-main,
.shop-app.is-checkout .buy-bar {
    display: none !important;
}

.shop-app.is-checkout {
    padding-bottom: 0;
    background: #fff;
}

body.block-mode .shop-app.is-checkout {
    background: #fff;
}

.checkout-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.checkout-step[hidden] {
    display: none !important;
}

.checkout-flow:not(.is-payment-ready) .checkout-step-payment {
    display: none !important;
}

.checkout-step-payment {
    min-height: 100vh;
}

.flow-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.flow-header h2 {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin-right: 28px;
}

.flow-back {
    border: none;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: #121212;
    cursor: pointer;
    padding: 0 4px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.shipping-row,
.btn-buy-cta {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.address-form {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.field-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #121212;
}

.field-label input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    color: #121212;
    font-weight: 400;
}

.field-label input::placeholder {
    color: #b0b0b0;
}

.field-label input + input {
    margin-top: 10px;
}

.field-label input:focus {
    outline: none;
    border-color: #999;
}

.city-combobox-wrap {
    position: relative;
    display: block;
}

.city-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 30;
    max-height: 220px;
    overflow-y: auto;
}

.city-suggestions li {
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 400;
    color: #121212;
    cursor: pointer;
}

.city-suggestions li:hover,
.city-suggestions li:focus {
    background: #f5f8fc;
}

.address-privacy {
    font-size: 12px;
    line-height: 1.55;
    color: #888;
    margin: 4px 0 0;
}

.address-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    background: #ff2d55;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.address-submit:active {
    background: #e8264c;
}

.address-submit:disabled {
    opacity: 0.7;
    cursor: default;
}

.payment-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
}

.secure-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px;
    padding: 10px 12px;
    background: #e8f6f8;
    border-radius: 8px;
    font-size: 13px;
    color: #008c9e;
    font-weight: 500;
}

.secure-icon {
    font-size: 16px;
}

.shipping-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 14px 16px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.shipping-row-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.shipping-row-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #121212;
}

.shipping-row-text span {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    word-break: break-word;
}

.shipping-row.is-filled .shipping-row-text span {
    color: #333;
    font-size: 13px;
}

.shipping-chevron {
    color: #ccc;
    font-size: 22px;
    flex-shrink: 0;
    margin-left: 8px;
}

.pay-section {
    margin: 0 16px 16px;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 10px;
}

.pay-section h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pay-section-sub {
    font-size: 12px;
    color: #888;
    margin-bottom: 14px;
}

.pay-method {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.pay-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay-method-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay-method-selectable {
    padding: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 0;
    transition: border-color .2s, background .2s;
}

.pay-method-selectable.is-selected {
    border-color: #121212;
    background: #fafafa;
}

.pay-method-selectable .pay-method-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pay-method-selectable .pay-radio {
    border: 2px solid #ccc;
    border-width: 2px;
    background: #fff;
}

.pay-method-selectable.is-selected .pay-radio {
    border: 6px solid #121212;
}

.pay-method-panel[hidden] {
    display: none !important;
}

.card-badge.paypal {
    background: #003087;
    color: #fff;
    font-size: 8px;
    padding: 4px 6px;
}

.paypal-form .card-field input {
    width: 100%;
}

.pay-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 6px solid #121212;
    box-sizing: border-box;
    flex-shrink: 0;
}

.pay-method-label {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

.pay-cards {
    display: flex;
    gap: 4px;
    align-items: center;
}

.card-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 5px;
    border-radius: 3px;
    letter-spacing: 0.02em;
}

.card-badge.visa { background: #1a1f71; color: #fff; }
.card-badge.mc { background: #eb001b; color: #fff; }
.card-badge.amex { background: #006fcf; color: #fff; }
.card-badge.more { background: #f0f0f0; color: #666; font-weight: 600; }

.card-form {
    border: 2px solid #4a90d9;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-field {
    display: block;
}

.card-input-wrap {
    position: relative;
    display: block;
}

.card-input-wrap input {
    padding-right: 52px;
}

.card-brand-inline {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    font-weight: 800;
    padding: 3px 5px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    line-height: 1;
    pointer-events: none;
}

.card-brand-inline.visa { background: #1a1f71; color: #fff; }
.card-brand-inline.mc { background: #eb001b; color: #fff; }
.card-brand-inline.amex { background: #006fcf; color: #fff; }
.card-brand-inline.discover { background: #ff6000; color: #fff; }
.card-brand-inline.jcb { background: #0b4ea2; color: #fff; }
.card-brand-inline.unionpay { background: #e21836; color: #fff; }
.card-brand-inline.maestro { background: #009ddd; color: #fff; }

.card-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #121212;
}

.card-field input::placeholder {
    color: #aaa;
}

.card-field input:focus {
    outline: none;
    border-color: #4a90d9;
}

.card-field.is-invalid input {
    border-color: #e53935;
}

.field-error {
    display: block;
    font-size: 11px;
    color: #e53935;
    margin-top: 4px;
    min-height: 0;
}

.field-error:not(:empty) {
    min-height: 14px;
}

.card-field-cvv {
    position: relative;
}

.cvv-help {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ddd;
    color: #666;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.card-field-cvv input {
    padding-right: 36px;
}

.card-name-wrap {
    position: relative;
    display: block;
}

.name-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 20;
    max-height: 160px;
    overflow-y: auto;
}

.name-suggestions li {
    padding: 10px 14px;
    font-size: 14px;
    color: #121212;
    cursor: pointer;
}

.name-suggestions li:hover,
.name-suggestions li:focus {
    background: #f5f8fc;
}

.ssl-badge {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: #008c5e;
    line-height: 1.45;
    padding-top: 4px;
}

.ssl-badge span {
    font-weight: 700;
    flex-shrink: 0;
}

.order-summary {
    margin: 0 16px;
    padding: 14px 0;
    border-top: 1px solid #f0f0f0;
}

.order-vendor {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.order-item {
    display: flex;
    gap: 12px;
}

.order-item img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    background: #f5f5f5;
    flex-shrink: 0;
}

.order-item-info {
    flex: 1;
    min-width: 0;
}

.order-item-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.order-item-variant {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}

.order-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.order-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.order-tag.tag-blue { background: #e8f4ff; color: #0080cc; }
.order-tag.tag-red { background: #fff0f3; color: #fe2c55; }

.order-item-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.order-discount {
    font-size: 12px;
    color: #fe2c55;
    font-weight: 700;
}

.order-item-price strong {
    font-size: 16px;
    color: #fe2c55;
    font-weight: 800;
}

.order-item-price s {
    font-size: 12px;
    color: #999;
}

.checkout-footer {
    flex-shrink: 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eee;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.payment-footer {

.payment-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    font-size: 14px;
}

.payment-total strong {
    font-size: 22px;
    font-weight: 800;
    color: #fe2c55;
}

.payment-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    background: #ff2d55;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
}

.payment-submit:active {
    background: #e8264c;
}

.payment-submit:disabled {
    opacity: 0.65;
    cursor: default;
}

.shop-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.72);
}

body.shop-overlay-open {
    overflow: hidden;
}

.shop-overlay-card {
    width: min(100%, 320px);
    padding: 28px 22px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.shop-overlay-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border: 3px solid #eee;
    border-top-color: #fe2c55;
    border-radius: 50%;
    animation: shopSpin 0.8s linear infinite;
}

@keyframes shopSpin {
    to { transform: rotate(360deg); }
}

.shop-overlay-title {
    font-size: 20px;
    font-weight: 800;
    color: #121212;
    line-height: 1.35;
    margin: 0;
}

.shop-overlay-sub {
    margin: 10px 0 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.shop-overlay-countdown {
    margin: 16px 0 0;
    font-size: 13px;
    color: #888;
}

.purchase-fail-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff0f3;
    color: #fe2c55;
    font-size: 32px;
    font-weight: 800;
    line-height: 56px;
}

.purchase-fail-card .shop-overlay-title {
    font-size: 24px;
}

.payment-wait-card {
    width: min(100%, 340px);
}

.payment-wait-progress-wrap {
    margin-top: 22px;
}

.payment-wait-progress-track {
    height: 10px;
    background: #f0f0f0;
    border-radius: 999px;
    overflow: hidden;
}

.payment-wait-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6b9d, #fe2c55);
    box-shadow: 0 0 12px rgba(254, 44, 85, 0.35);
    will-change: width;
}

.payment-wait-progress-pct {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #fe2c55;
    letter-spacing: 0.02em;
}

.shop-notice-card {
    width: min(100%, 340px);
}

.shop-notice-message {
    margin-top: 10px;
}

.shop-notice-confirm {
    width: 100%;
    margin-top: 18px;
}

.verify-code-card {
    width: min(100%, 340px);
}

.verify-code-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.verify-code-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-align: center;
    color: #121212;
}

.verify-code-input:focus {
    outline: none;
    border-color: #ff2d55;
}

.verify-code-error {
    margin: 0;
    font-size: 13px;
    color: #e53935;
    text-align: center;
}

.verify-code-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    background: #ff2d55;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.verify-code-submit:active {
    background: #e8264c;
}

.verify-code-submit:disabled {
    opacity: 0.65;
    cursor: default;
}

.app-verify-card {
    width: min(100%, 360px);
}

.app-verify-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff6b9d, #fe2c55);
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 64px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(254, 44, 85, 0.28);
}

.app-verify-bank {
    margin: 14px 0 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.app-verify-bank strong {
    color: #121212;
}

.app-verify-open-btn,
.app-verify-done-btn {
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.app-verify-open-btn {
    background: linear-gradient(135deg, #ff6b9d, #fe2c55);
    color: #fff;
}

.app-verify-done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff2d55;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    transition: background .15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.app-verify-done-btn:active {
    background: #e8264c;
}

.app-verify-open-btn:disabled,
.app-verify-done-btn:disabled {
    opacity: 0.65;
    cursor: default;
}