/* v3 layer, 1 November 2026: batch card, report stamp, lot lookup, bought-together, and cart page. */
.batchcard { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; display: grid; gap: 10px; background: #fbfbfa; }
.bc-head { display: flex; justify-content: space-between; align-items: center; }
.bc-head b { font-size: 14px; font-weight: 600; }
.bc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bc-grid div { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.bc-grid small { font-size: 10.5px; color: var(--muted); }
.bc-grid b { font-size: 13px; font-weight: 600; }
.bc-foot { display: flex; gap: 16px; flex-wrap: wrap; }
.stamp { font-size: 12.5px; background: #fff7e6; border: 1px dashed #d9b46a; border-radius: 10px; padding: 10px 12px; color: #5b4321; }
.report-modal footer { flex-wrap: wrap; }

.fbt { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 12px; }
.fbt-row { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.fbt-row .plus { align-self: center; color: var(--muted); font-size: 18px; }
.fbt-item { flex: 1 1 120px; display: grid; gap: 4px; justify-items: start; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; position: relative; cursor: pointer; }
.fbt-item input { position: absolute; top: 10px; right: 10px; }
.fbt-item .thumb { width: 44px; height: 52px; border-radius: 9px; background: var(--tint); display: grid; place-items: center; overflow: hidden; }
.fbt-item .bottle.sm { height: 46px; width: auto; }
.fbt-item b { font-size: 13px; font-weight: 500; }
.fbt-item small { font: 500 11px var(--mono); color: var(--muted); }
.fbt-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.fbt-foot .btn { height: 42px; }

.lotform { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; }
.verify-sent summary { cursor: pointer; font-size: 13.5px; font-weight: 500; margin-bottom: 10px; }
.verify-sent .lotform { grid-template-columns: 1fr auto; margin-bottom: 8px; }

.co-box.sticky { position: sticky; top: 96px; }
.co-box .line { border-bottom: 1px solid var(--line-2); }
.dist { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.bump { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #eef6f1; border: 1px solid #cfe4d8; border-radius: 12px; padding: 12px 14px; }
.bump b { font-size: 13.5px; font-weight: 600; display: block; }
.bump small { font-size: 12px; color: var(--ink-2); }


.ta { height: 96px; border-radius: 16px; padding: 12px 18px; resize: vertical; }
.ticks { display: grid; gap: 8px; padding: 0; list-style: none; font-size: 13.5px; }
.ticks li::before { content: "✓ "; color: var(--pine); }

@media (max-width: 680px) {
  .bc-grid { grid-template-columns: 1fr 1fr; }
  .lotform { grid-template-columns: 1fr 1fr; }
  .lotform .btn { grid-column: 1 / -1; }
  .co-box.sticky { position: static; }
}

/* Checkout progress meter ("battery"): vials toward the next discount, then the reward bar */
.progress-block { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #f6efe8; }
.progress-block .rbar { background: #fff; margin: 0; }
.meter { display: grid; gap: 6px; }
.meter-head { font-size: 13px; }
.cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 14px; padding: 3px; border: 1.5px solid #b98672; border-radius: 5px; background: #fff; }
.cells i { border-radius: 2px; background: #efe6dd; }
.cells i.on { background: linear-gradient(180deg, #d9a393, #b98672); }
.meter-stops { position: relative; height: 26px; }
.meter-stops small { position: absolute; transform: translateX(-100%); font-size: 10.5px; line-height: 1.2; color: var(--muted); text-align: right; white-space: nowrap; }
.meter-stops small.hit { color: #7a4a3d; font-weight: 600; }
.fchip:disabled { opacity: .4; cursor: default; }
#popular .fchip { cursor: pointer; }

/* Prepaid supply and PayRam payment (2 November 2026) */
.plan { display: grid; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f6efe8; }
.plan-head { display: grid; gap: 2px; }
.plan-head b { font-size: 14px; font-weight: 600; }
.plan-head small, .plan > small { font-size: 12px; color: var(--ink-2); }
.plan-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.plan-o { position: relative; display: grid; gap: 2px; text-align: left; padding: 12px 10px 9px; border: 1px solid #d9d2c8; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; }
.plan-o b { font-size: 13px; font-weight: 600; }
.plan-o span { font-size: 11.5px; color: #2e6a4c; font-weight: 500; }
.plan-o small { font: 500 11px var(--mono); color: var(--ink-2); }
.plan-o.on { border-color: #3b211a; box-shadow: inset 0 0 0 1px #3b211a; }
.plan-o em { position: absolute; top: -9px; right: 6px; background: var(--rose-2, #d6a08f); color: #3a1d16; font: 600 8.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 999px; font-style: normal; }
.co-box .plan { margin-top: 0; }

.payopts { display: grid; gap: 8px; }
.payopt { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; border: 1px solid #d9d2c8; border-radius: 12px; background: #fff; }
.payopt.on { border-color: #3b211a; box-shadow: inset 0 0 0 1px #3b211a; }
.payopt.later { opacity: .55; }
.payopt input { grid-row: span 2; }
.payopt b { font-size: 14px; font-weight: 600; }
.payopt small { font-size: 12px; color: var(--muted); }
.coins { display: flex; flex-wrap: wrap; gap: 6px; }
.coins button { height: 34px; padding: 0 14px; border: 1px solid #d9d2c8; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.coins button.on { background: #3b211a; border-color: #3b211a; color: #fff; }
.payscreen { display: grid; gap: 12px; padding: 14px; border: 1px dashed #b98672; border-radius: 14px; background: #fbf8f5; }
.payscreen[hidden] { display: none; }
.ps-top { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; }
.qr { width: 112px; height: 112px; border-radius: 10px; background: repeating-linear-gradient(45deg, #efe6dd 0 6px, #fff 6px 12px); border: 1px solid #d9d2c8; display: grid; place-items: center; font: 500 10px var(--mono); color: var(--muted); text-align: center; }
.ps-amt { font-size: 13px; display: grid; gap: 6px; }
.ps-amt b.big { font-size: 20px; font-weight: 600; }
.addr { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.addr code { font: 500 11.5px var(--mono); background: #fff; border: 1px solid #d9d2c8; border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
.ps-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0; margin: 0; list-style: none; counter-reset: s; }
.ps-steps li { font-size: 11.5px; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid #e7ded4; color: var(--muted); }
.ps-steps li.on { border-color: #3b211a; color: var(--ink); font-weight: 500; }
@media (max-width: 560px) { .plan-row { grid-template-columns: 1fr; } .ps-top { grid-template-columns: 1fr; } .ps-steps { grid-template-columns: 1fr; } }