:root {
    --vvw-green: #0d3b2e;
    --vvw-green-2: #0a2e24;
    --vvw-neon: #38f5a6;
    --vvw-blue: #007bff;
    --vvw-red: #fd5555;
    --vvw-price: #ef4f4f;
    --vvw-accent: #e73d4a;
    --vvw-text: #333;
    --vvw-gray: #888;
    --vvw-line: #eee;
    --vvw-bottom-h: 52px;
}

/* ============================================================
 * 数量 / 表单 / 券 / 支付（购买抽屉共用）
 * ============================================================ */
.detail-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--vvw-line);
    flex-wrap: wrap;
}
.detail-qty-label { font-size: 13px; color: #555; }
.detail-qty-wrap { display: flex; align-items: center; gap: 10px; }
.detail-qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}
.detail-qty-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: #f7f7f7;
    color: #333;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.detail-qty-btn:active { background: #eee; }
.detail-qty-input {
    width: 52px;
    height: 32px;
    border: 0;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
    outline: none;
    -moz-appearance: textfield;
}
.detail-qty-input::-webkit-outer-spin-button,
.detail-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.detail-stock-info { font-size: 12px; color: #999; }
.detail-stock-info__empty { color: var(--vvw-red); }
.detail-min-buy { font-size: 12px; color: #e0731a; width: 100%; }

.vvw-drawer-qty { font-size: 13px; color: #666; }
.vvw-drawer-qty b { color: var(--vvw-price); font-size: 15px; }

.vvw-form-section {
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
}
.vvw-form-section__title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}
.detail-form-field { margin-bottom: 10px; }
.detail-form-field-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}
.detail-form-field__req { color: var(--vvw-red); margin-left: 2px; }
.detail-form-field-input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #fff;
}
.detail-form-field-input:focus { border-color: var(--vvw-blue); }

.vvw-address-hint {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #eef6ff;
    color: #3a7bd5;
    font-size: 12px;
}

.detail-coupon { margin-top: 12px; }
.detail-coupon-title { font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.detail-coupon-input-row { display: flex; gap: 8px; }
.detail-coupon-input {
    flex: 1;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}
.detail-coupon-btn {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: #f0f0f0;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.detail-coupon-btn--primary { background: var(--vvw-red); color: #fff; }
.detail-coupon-guest-tip { margin-top: 6px; font-size: 12px; color: #999; }
.detail-coupon-guest-tip a { color: var(--vvw-blue); }
.detail-coupon-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.detail-coupon-choose {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    border: 1px dashed #ffb3b3;
    border-radius: 6px;
    background: #fff7f7;
    color: var(--vvw-red);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.detail-coupon-applied {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f2fbf5;
    color: #28a745;
    font-size: 12px;
}

.detail-payment-section { margin-top: 12px; }
.detail-payment-title { font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.detail-payment-list { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-payment-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    font-family: inherit;
}
.detail-payment-item img { width: 18px; height: 18px; object-fit: contain; }
.detail-payment-item.active { border-color: var(--vvw-red); background: #fff7f7; color: var(--vvw-red); }
.detail-payment-item.is-disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
 * 购买抽屉
 * ============================================================ */
.yj-buy-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
}
.yj-buy-drawer.is-open { display: block; }
.yj-buy-drawer__mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}
.yj-buy-drawer__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    animation: vvwDrawerUp .22s ease;
}
@keyframes vvwDrawerUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.yj-buy-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--vvw-line);
}
.yj-buy-drawer__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.yj-buy-drawer__icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #fff0f0;
    color: var(--vvw-red);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 30px;
}
.yj-buy-drawer__titletext { min-width: 0; }
.yj-buy-drawer__titletext strong { display: block; font-size: 14px; color: #222; }
.yj-buy-drawer__titletext small {
    display: block;
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.yj-buy-drawer__close {
    width: 30px; height: 30px;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 16px;
    cursor: pointer;
}
.yj-buy-drawer__body {
    padding: 12px 14px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.yj-buy-drawer__foot {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--vvw-line);
    background: #fff;
}
.yj-buy-submit {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 6px;
    background: var(--vvw-red);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.yj-buy-submit:active { filter: brightness(.95); }
.yj-buy-submit.is-disabled,
.yj-buy-submit[disabled] { background: #ccc; cursor: not-allowed; }
.yj-buy-drawer__hint {
    display: block;
    margin-top: 6px;
    text-align: center;
    font-size: 11px;
    color: #bbb;
}

/* 抽屉里的规格按钮 */
.spec-section { margin-bottom: 6px; }
.spec-group { margin-bottom: 12px; }
.spec-group-label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}
.spec-group-options { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-item { text-align: center; }
.spec-item-tags { display: flex; gap: 4px; justify-content: center; margin-bottom: 3px; }
.spec-tag {
    padding: 0 4px;
    border-radius: 3px;
    background: #fff0f0;
    color: var(--vvw-red);
    font-size: 10px;
}
.spec-btn {
    min-width: 64px;
    padding: 7px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all .18s ease;
}
.spec-btn.active { border-color: var(--vvw-red); background: #fff7f7; color: var(--vvw-red); }
.spec-btn.disabled,
.spec-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* 价格汇总 */
.yj-price-summary {
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
    background: #fafafa;
}
.yj-price-summary__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #777;
}
.yj-price-summary__line + .yj-price-summary__line { margin-top: 6px; }
.yj-price-summary b { color: #333; }
.yj-price-summary__save { color: #e0731a; }
.yj-price-summary__final b { color: var(--vvw-price); font-size: 16px; }