.bottom-nudge {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1040;
    width: 360px;
    max-width: calc(100vw - 16px);
    pointer-events: none;
}
.bottom-nudge:not(.is-active) { visibility: hidden; }

.bn-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px 9px 10px;
    border: 1px solid var(--b2c-line, #e6e8ec);
    border-radius: 6px;
    background: var(--b2c-surface, #fff);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .12);
    color: var(--b2c-ink, #171a1f);
    pointer-events: auto;
    animation: bn-rise .18s ease-out;
}
.bn-card[hidden] { display: none; }

.bn-icon {
    flex: 0 0 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--b2c-surface-muted, #f6f7f9);
    color: var(--b2c-primary, #1d4ed8);
    font-size: .95rem;
}
.bn-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bn-title { font-size: .82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-sub { font-size: .74rem; color: var(--b2c-steel, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    color: var(--b2c-primary, #1d4ed8);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.bn-link:hover { color: var(--b2c-primary-dark, #1739ab); text-decoration: underline; }
.bn-link i { font-size: .72rem; }
.bn-close {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #9ca3af;
    font-size: .8rem;
}
.bn-close:hover { background: var(--b2c-surface-muted, #f6f7f9); color: var(--b2c-ink, #171a1f); }

.bn-ship { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 8px 9px 10px; }
.bn-ship-row { display: flex; align-items: center; gap: 8px; }
.bn-ship-icon { color: var(--b2c-primary, #1d4ed8); font-size: .9rem; }
.bn-ship-text { flex: 1 1 auto; min-width: 0; font-size: .8rem; line-height: 1.35; }
.bn-ship-text b { font-weight: 700; }
.bn-ship-bar { height: 4px; margin-right: 2px; border-radius: 2px; background: var(--b2c-line-soft, #eef0f3); overflow: hidden; }
.bn-ship-bar[hidden] { display: none; }
.bn-ship-bar i { display: block; width: 0; height: 100%; background: var(--b2c-primary, #1d4ed8); transition: width .3s ease; }
.bn-ship.is-done .bn-ship-icon,
.bn-ship.is-done .bn-ship-text { color: var(--b2c-success, #15803d); font-weight: 600; }

.bn-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(17, 24, 39, .45);
    animation: bn-fade .18s ease-out;
}
.bn-sheet-backdrop[hidden] { display: none; }
.bn-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1071;
    max-height: 86vh;
    overflow-y: auto;
    padding: 0 14px calc(14px + env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
    background: var(--b2c-surface, #fff);
    box-shadow: 0 -8px 24px rgba(17, 24, 39, .14);
    color: var(--b2c-ink, #171a1f);
    animation: bn-sheet-in .22s ease-out;
}
.bn-sheet[hidden] { display: none; }
.bn-sheet.is-dragging { animation: none; }
.bn-grip { display: block; width: 38px; height: 4px; margin: 8px auto 6px; border-radius: 2px; background: var(--b2c-line, #d1d5db); }
.bn-sheet-head { display: flex; align-items: center; gap: 8px; }
.bn-sheet-head > i { color: var(--b2c-success, #15803d); }
.bn-sheet-title { flex: 1 1 auto; margin: 0; font-size: .95rem; font-weight: 700; color: var(--b2c-success, #15803d); outline: none; }

.bn-added { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 8px; border: 1px solid var(--b2c-line, #e6e8ec); border-radius: 4px; }
.bn-added-img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 3px; object-fit: contain; background: var(--b2c-surface-muted, #f6f7f9); }
.bn-added-img[hidden] { display: none; }
.bn-added-info { min-width: 0; }
.bn-added-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; line-height: 1.35; }
.bn-added-price { margin-top: 3px; font-size: .85rem; font-weight: 700; color: var(--product-price-color, var(--b2c-primary, #1d4ed8)); }

.bn-total { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: .82rem; color: var(--b2c-steel, #6b7280); }
.bn-total b { color: var(--b2c-ink, #171a1f); }
.bn-inline-nudge { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 7px 10px; border-radius: 4px; background: var(--b2c-surface-muted, #f6f7f9); font-size: .78rem; }
.bn-inline-nudge[hidden] { display: none; }
.bn-inline-nudge i { color: var(--b2c-primary, #1d4ed8); }
.bn-inline-nudge.is-done { background: var(--b2c-success-soft, #e7f6ec); color: var(--b2c-success, #15803d); font-weight: 600; }
.bn-inline-nudge.is-done i { color: inherit; }

.bn-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bn-actions .btn { min-height: 44px; border-radius: 4px; font-size: .88rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

.bn-recs { margin-top: 14px; }
.bn-recs[hidden] { display: none; }
.bn-recs-title { margin: 0 0 8px; font-size: .85rem; font-weight: 700; }
.bn-recs-track { display: flex; gap: 8px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bn-recs-track::-webkit-scrollbar { display: none; }
.bn-rec {
    position: relative;
    flex: 0 0 112px;
    border: 1px solid var(--b2c-line, #e6e8ec);
    border-radius: 4px;
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--b2c-surface, #fff);
}
.bn-rec a { display: block; color: inherit; text-decoration: none; }
.bn-rec-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 84px; object-fit: contain; background: var(--b2c-surface-muted, #f6f7f9); color: #c4c8cf; }
.bn-rec-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.5em; margin: 6px 7px 0; font-size: .72rem; line-height: 1.25; }
.bn-rec-price { margin: 3px 7px 8px; font-size: .78rem; font-weight: 700; color: var(--product-price-color, var(--b2c-primary, #1d4ed8)); }
.bn-rec-add {
    position: absolute;
    top: 52px;
    right: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--cart-btn-color, var(--b2c-primary, #1d4ed8));
    color: #fff;
    font-size: .8rem;
}
.bn-rec-add:disabled { opacity: .7; }
.bn-rec-add.is-added { background: var(--b2c-success, #15803d); opacity: 1; }

body.bn-sheet-open { overflow: hidden; }

@keyframes bn-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bn-sheet-in { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 767.98px) {
    .bottom-nudge { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
    body:has(.mobile-tabbar) .bottom-nudge { bottom: calc(var(--mt-h, 60px) + 8px + env(safe-area-inset-bottom)); }
    body.has-bottom-nudge .site-toasts { --site-toast-offset: 76px; }
    body:has(.mobile-tabbar).has-bottom-nudge .site-toasts { --site-toast-offset: calc(var(--mt-h) + 76px); }
}

@media (min-width: 768px) {
    .bn-sheet,
    .bn-sheet-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bn-card,
    .bn-sheet,
    .bn-sheet-backdrop { animation: none; }
}

.bn-rec-gain {
    margin: -4px 7px 8px;
    padding: 2px 5px;
    border-radius: 3px;
    background: var(--b2c-success-soft, #e7f6ec);
    color: var(--b2c-success, #15803d);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
}
.bn-rec-gain { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-rec--bundle { flex-basis: 132px; border-color: color-mix(in srgb, var(--b2c-success, #15803d) 35%, var(--b2c-line, #e6e8ec)); }
.bn-rec-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--b2c-success, #15803d);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
}