.scrollarea { height: 100vh; background: #f4f6f8; color: #152019; }
.page { min-height: 100%; padding: 36rpx 28rpx 180rpx; box-sizing: border-box; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28rpx; }
.eyebrow { color: #6a776f; font-size: 22rpx; letter-spacing: 2rpx; }
.title { margin-top: 8rpx; font-size: 46rpx; line-height: 1.2; font-weight: 750; }
.hero-store { padding: 10rpx 16rpx; border-radius: 999rpx; background: #e4ebe7; color: #506158; font-size: 22rpx; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8rpx; margin-bottom: 24rpx; padding: 8rpx; border-radius: 22rpx; background: #e7ece9; }
.tab { padding: 18rpx 8rpx; border-radius: 16rpx; color: #647168; font-size: 26rpx; text-align: center; }
.tab.active { background: #fff; color: #16794b; font-weight: 700; box-shadow: 0 6rpx 20rpx rgba(22, 60, 40, .08); }
.notice, .error, .empty { margin: 20rpx 0; padding: 28rpx; border-radius: 20rpx; background: #fff; color: #6a756e; text-align: center; }
.notice.warning { background: #fff6dd; color: #865b00; }
.error { background: #fff0ee; color: #b53b31; text-align: left; }
.section-title { margin: 34rpx 4rpx 18rpx; font-size: 30rpx; font-weight: 750; }
.section-title.small { margin-top: 36rpx; font-size: 26rpx; }
.product-card, .business-card, .storage-detail, .credential-card { margin-bottom: 20rpx; overflow: hidden; border: 1rpx solid #e4e9e6; border-radius: 24rpx; background: #fff; box-shadow: 0 10rpx 30rpx rgba(38, 57, 46, .05); }
.product-cover { display: block; width: 100%; height: 280rpx; background: #e6ebe8; }
.product-main, .business-card, .storage-detail, .credential-card { padding: 26rpx; }
.product-head, .card-head, .summary-row, .storage-item { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; }
.product-name, .card-title { font-size: 30rpx; font-weight: 750; }
.meta, .description { margin-top: 8rpx; color: #748077; font-size: 23rpx; line-height: 1.5; }
.description { margin: 20rpx 0 4rpx; }
.chip, .status { flex: 0 0 auto; padding: 8rpx 14rpx; border-radius: 999rpx; background: #e4f3eb; color: #17794c; font-size: 21rpx; }
.sku-row { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-top: 22rpx; padding-top: 22rpx; border-top: 1rpx solid #edf0ee; }
.sku-name { font-size: 26rpx; font-weight: 650; }
.price { margin-top: 6rpx; color: #d45d32; font-size: 28rpx; font-weight: 750; }
.quantity-control { display: flex; align-items: center; gap: 18rpx; }
.quantity-button { width: 58rpx; min-width: 58rpx; height: 58rpx; padding: 0; border: 0; border-radius: 18rpx; background: #eef2ef; color: #486052; font-size: 34rpx; line-height: 58rpx; }
.quantity-button::after, .button::after { border: 0; }
.quantity-button.plus { background: #16794b; color: #fff; }
.summary-row { margin-top: 26rpx; padding-top: 22rpx; border-top: 1rpx solid #edf0ee; color: #657269; font-size: 25rpx; }
.summary-row strong { color: #18251d; font-size: 28rpx; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14rpx; margin-top: 22rpx; }
.button { margin: 0; border-radius: 16rpx; font-size: 25rpx; font-weight: 650; }
.button.compact { min-width: 150rpx; padding: 0 24rpx; line-height: 70rpx; }
.button.primary { background: #16794b; color: #fff; }
.button.ghost { background: #edf2ef; color: #315442; }
.button.danger { background: #fff0ee; color: #b23f37; }
.detail-link, .back { margin-top: 22rpx; color: #16794b; font-size: 24rpx; }
.tappable:active { transform: scale(.992); }
.credential-card { border-color: #f2d783; background: #fffbeb; }
.credential-title { color: #765100; font-size: 28rpx; font-weight: 750; }
.credential-warning { margin-top: 10rpx; color: #8b6b1d; font-size: 23rpx; line-height: 1.5; }
.credential-value { margin-top: 20rpx; padding: 20rpx; border-radius: 16rpx; background: #fff; font-family: monospace; font-size: 25rpx; line-height: 1.5; word-break: break-all; user-select: all; }
.storage-item { margin-top: 22rpx; padding-top: 22rpx; border-top: 1rpx solid #edf0ee; }
.detail-actions { justify-content: flex-start; }
.movement-row { display: grid; gap: 8rpx; padding: 18rpx 0; border-top: 1rpx solid #edf0ee; color: #6b786f; font-size: 22rpx; }
.movement-row strong { color: #27362d; font-size: 24rpx; }
.empty.inline { margin: 0; padding: 20rpx; background: #f7f9f8; }
.cart-bar { position: fixed; right: 24rpx; bottom: calc(24rpx + env(safe-area-inset-bottom)); left: 24rpx; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 22rpx 24rpx; border-radius: 24rpx; background: #13291e; color: #fff; box-shadow: 0 18rpx 50rpx rgba(14, 42, 27, .25); }
.cart-count { color: #b8c8bf; font-size: 22rpx; }
.cart-total { margin-top: 4rpx; font-size: 32rpx; font-weight: 750; }
.cart-submit { min-width: 210rpx; }