*, *::before, *::after {  box-sizing: border-box; margin: 0; padding: 0;  }

html {  -webkit-text-size-adjust: 100%;  }

body {  line-height: 1.6;  }

img {  max-width: 100%; height: auto; display: block;  }

a {  color: inherit; text-decoration: none;  }

ul, ol {  list-style: none;  }

button {  font: inherit; cursor: pointer; border: none; background: none;  }

.bg-product-grid {  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;  }

.bg-product-card {  border: 1px solid var(--bg-gray-200); border-radius: 6px; overflow: hidden; background: #fff; transition: box-shadow .15s;  }

.bg-product-card:hover {  box-shadow: 0 2px 12px rgba(0,0,0,.08);  }

.bg-money {  font-size: 18px; font-weight: 700; color: var(--bg-ink);  }

.bg-money__tax {  font-size: 11px; color: var(--bg-gray-500);  }

.bg-mobile-cart {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--bg-primary); color: #fff; padding: 14px; text-align: center;
    font-weight: 600; box-shadow: 0 -2px 8px rgba(0,0,0,.12);
 }

@media (max-width: 1024px) {
.bg-product-grid {  grid-template-columns: repeat(2, 1fr);  }
}

@media (max-width: 767px) {
.bg-product-grid {  grid-template-columns: repeat(2, 1fr); gap: 12px;  }
.bg-money {  font-size: 16px;  }
.bg-mobile-cart {  display: block;  }
}

.bg-thumb {  display: block; border: 1px solid var(--bg-gray-200); border-radius: 4px; overflow: hidden; transition: border-color .15s; padding: 0;  }

.bg-thumb:hover {  border-color: var(--bg-primary);  }

.bg-thumb img {  width: 80px; height: 80px; object-fit: cover;  }

.bg-product-detail__price {  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--bg-gray-200);  }

.bg-product-detail__price .bg-money {  font-size: 28px;  }

@media (max-width: 767px) {
.bg-product-detail__price .bg-money {  font-size: 24px;  }
}

/* z-index 1080：高于 Bootstrap 全部组件层（sticky header 1020 / offcanvas 1045 / modal 1055 / popover 1070 / tooltip 1080），
   仅低于 pace 进度条 2000（顶栏细进度条，瞬态，高于弹窗可接受）。保证选购弹窗始终在最顶层不被 header/sticky 遮挡。 */
.bg-popup__overlay {
    position: fixed; inset: 0; background: var(--bg-overlay);
    z-index: 1080; opacity: 0; pointer-events: none; transition: opacity .25s ease;
 }

.bg-popup.is-open .bg-popup__overlay,
.bg-product-list.is-filter-open .bg-popup__overlay {  opacity: 1; pointer-events: auto;  }

.bg-popup__panel {  background: #fff; overflow-y: auto;  }

.bg-popup .bg-popup__panel {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px); max-width: 520px;
    max-height: 88vh;
    border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
    /* overflow:hidden：面板自身不滚，由内部主体 div.flex-grow-1.overflow-auto 滚动，
       header/footer flex-shrink-0 固定在顶/底，长内容只中段滚。 */
    z-index: 1085; display: flex; flex-direction: column; overflow: hidden;
 }

.bg-popup__footer {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--bg-gray-100); background: #fff;
    position: sticky; bottom: 0;
 }

.bg-popup__confirm {
    min-width: 88px; padding: 8px 20px; min-height: 36px;
    background: var(--bg-primary); color: #fff; border: none;
    border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
 }

.bg-popup__confirm:hover:not(:disabled) {  background: var(--bg-primary-hover);  }

.bg-popup__confirm:disabled {  background: var(--bg-primary-disabled); cursor: not-allowed;  }

.bg-popup__reset {
    min-width: 88px; padding: 8px 20px; min-height: 36px;
    background: #fff; color: var(--bg-gray-700); border: 1px solid var(--bg-gray-300);
    border-radius: 4px; font-size: 14px; cursor: pointer; transition: border-color .15s, color .15s;
 }

.bg-popup__reset:hover {  border-color: var(--bg-gray-500); color: var(--bg-gray-700);  }

.bg-cart-badge {
    display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--bs-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
    border-radius: 9px; text-align: center; margin-left: 4px; vertical-align: middle;
 }

.bg-cart__item-price {  font-size: 14px; color: var(--bg-gray-500);  }

.bg-cart__item-price .bg-money__tax {  margin-left: 4px;  }

.bg-customer-menu {  display: inline-flex; align-items: center; gap: 12px; font-size: 14px;  }

@media (max-width: 480px) {
.bg-customer-menu {  gap: 8px; flex-wrap: wrap;  }
}

.bg-checkout {  max-width: 720px; margin: 24px auto 40px; padding: 0 16px;  }

.bg-money__tax {  font-size: 11px; color: var(--bg-gray-500); margin-left: 4px; font-weight: 400;  }

@keyframes bg-spin {
to {  transform: rotate(360deg);  }
}

@media (max-width: 480px) {
.bg-checkout {  margin: 16px auto 32px; padding: 0 12px;  }
}

.bg-order__status-value {  display: inline-block; padding: 2px 10px; border-radius: 3px; font-size: 13px; font-weight: 600;  }

/* 订单状态 tint 子系统（Tier 2，2026-08-22 建档）：浅底+深字组合，刻意独立于 Bootstrap
   text-bg-* 语义类（实色，做不了 tint）。色值引 :root token（app.css :root Tier 2）。
   cancelled/refunded 并入中性 ramp（--bg-gray-500 字 + --bg-gray-50 底），不再独写。 */
.bg-order__status--pending {  background: var(--bg-warn-bg); color: var(--bg-warn-text);  }

.bg-order__status--paid {  background: var(--bg-ok-bg); color: var(--bg-ok-text);  }

.bg-order__status--processing {  background: var(--bg-info-bg); color: var(--bg-info-text);  }

.bg-order__status--partially_shipped {  background: var(--bg-info-bg); color: var(--bg-info-text);  }

.bg-order__status--shipped {  background: var(--bg-info-bg); color: var(--bg-info-text);  }

.bg-order__status--delivered {  background: var(--bg-ok-bg); color: var(--bg-ok-text);  }

.bg-order__status--cancelled {  background: var(--bg-gray-50); color: var(--bg-gray-500);  }

.bg-order__status--refunded {  background: var(--bg-gray-50); color: var(--bg-gray-500);  }

.bg-order__shipment-status {  padding: 1px 8px; border-radius: 3px; font-size: 12px; font-weight: 600;  }

.bg-order__shipment-status--pending {  background: var(--bg-warn-bg); color: var(--bg-warn-text);  }

.bg-order__shipment-status--shipped {  background: var(--bg-info-bg); color: var(--bg-info-text);  }

.bg-order__shipment-status--delivered {  background: var(--bg-ok-bg); color: var(--bg-ok-text);  }

.bg-product-list {  max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px;  }

.bg-product-list__sidebar {  position: sticky; top: 16px;  }

.bg-product-list__drawer-head {  display: none;  }

.bg-product-list__overlay {
    display: none; position: fixed; inset: 0; background: var(--bg-overlay);
    z-index: 1075;
 }

@media (max-width: 768px) {
.bg-product-list__sidebar {
        position: fixed; top: 0; bottom: auto; left: 0; right: 0;
        max-height: 88vh; overflow-y: auto;
        background: #fff; border-radius: 0 0 14px 14px;
        box-shadow: 0 8px 32px rgba(0,0,0,.18);
        transform: translateY(-100%); transition: transform .25s ease;
        z-index: 1080; padding: 0 16px 16px;
        display: flex; flex-direction: column;
     }
.bg-product-list.is-filter-open .bg-product-list__sidebar {  transform: translateY(0);  }
.bg-product-list.is-filter-open .bg-product-list__overlay {  display: block;  }
.bg-product-list__drawer-head {
        display: flex; justify-content: space-between; align-items: center;
        position: sticky; top: 0; padding: 14px 0 10px;
        background: #fff; border-bottom: 1px solid var(--bg-gray-100); margin-bottom: 12px;
     }
}