/* Wolf Volume Pricing — front end */

.wvp-nudge {
  --wvp-blue: var(--blue, #1B4FD8);
  --wvp-navy: var(--navy, #0B2A5B);
  --wvp-line: var(--line, #D5E0EE);
  --wvp-surface: var(--surface, #F4F8FD);
  --wvp-ok: var(--assay, #0B7355);
  background: var(--wvp-surface);
  border: 1px solid var(--wvp-line);
  border-left: 4px solid var(--wvp-blue);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: .94rem;
  color: var(--wvp-navy);
}
.wvp-nudge--max {
  border-left-color: var(--wvp-ok);
  background: rgba(11, 115, 85, .06);
}
.wvp-nudge strong { display: inline; }

.wvp-table-wrap { margin: 0 0 24px; }
.wvp-table { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--line, #D5E0EE); border-radius: 14px; overflow: hidden; }
.wvp-table th, .wvp-table td {
  padding: 13px 16px; text-align: left;
  border-bottom: 1px solid var(--line, #D5E0EE); font-size: .93rem;
}
.wvp-table th {
  background: var(--surface, #F4F8FD);
  font-family: var(--mono, monospace); font-size: .7rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate, #5B6B82);
}
.wvp-table tr:last-child td { border-bottom: 0; }
.wvp-table .wvp-best td { background: rgba(11, 115, 85, .06); }
.wvp-table .wvp-best strong { color: var(--assay, #0B7355); }
.wvp-note { font-size: .82rem; color: var(--slate, #5B6B82); margin-top: 8px; }

/* ---------- product page volume buttons ---------- */
.wvp-buttons {
  --wvp-blue: var(--blue, #1B4FD8); --wvp-hot: var(--blue-hot, #3B74F0);
  --wvp-navy: var(--navy, #0B2A5B); --wvp-line: var(--line, #D5E0EE);
  --wvp-surface: var(--surface, #F4F8FD); --wvp-slate: var(--slate, #5B6B82);
  --wvp-ok: var(--assay, #0B7355);
  margin: 0 0 20px; width: 100%;
}
.wvp-buttons__label {
  font-family: var(--mono, monospace); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wvp-slate); margin: 0 0 10px;
}
.wvp-buttons__row { display: flex; gap: 10px; flex-wrap: wrap; }
.wvp-btn {
  flex: 1 1 130px; min-width: 120px; cursor: pointer; text-align: left;
  background: #fff; border: 1.5px solid var(--wvp-line); border-radius: 14px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 2px;
  font-family: inherit; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wvp-btn:hover { border-color: var(--wvp-hot); transform: translateY(-2px); }
.wvp-btn.is-on {
  border-color: var(--wvp-blue); background: var(--wvp-surface);
  box-shadow: 0 0 0 3px rgba(27, 79, 216, .12);
}
.wvp-btn__qty {
  font-family: var(--display, inherit); font-weight: 700; font-size: 1rem;
  color: var(--wvp-navy); line-height: 1.2;
}
.wvp-btn__pct {
  display: inline-block; align-self: flex-start; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--wvp-ok);
  background: rgba(11, 115, 85, .1); border-radius: 999px; padding: 2px 8px; margin: 3px 0 1px;
}
.wvp-btn__each { font-size: .82rem; color: var(--wvp-slate); }
.wvp-btn__each .amount { color: var(--wvp-slate); }
.wvp-buttons__note { font-size: .84rem; color: var(--wvp-slate); margin: 12px 0 0; }
.wvp-buttons__note strong { color: var(--wvp-navy); }

@media (max-width: 520px) {
  .wvp-btn { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 8px; }
  .wvp-btn__pct { margin: 0; }
}

/* a tier with no discount */
.wvp-btn__pct--none {
  color: var(--wvp-slate, #5B6B82);
  background: var(--wvp-surface, #F4F8FD);
}
.wvp-none { color: var(--slate, #5B6B82); font-size: .88rem; }