/* Presentation rebuild; shorthand declarations preserved. */
.eyebrow i,
.payment-status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 8px;
  box-shadow: rgba(185, 244, 100, 0.5) 0px 0px 15px;
}

.overlay {
  display: none;
  position: fixed;
  inset: 0px;
  z-index: 50;
  overflow: auto;
  padding: 40px 24px;
  align-items: center;
  justify-content: center;
}

.overlay:target {
  display: flex;
}

.scrim {
  position: fixed;
  inset: 0px;
  background: rgba(0, 0, 0, 0.8);
}

.drawer,
.checkout-panel,
.payment-panel {
  position: relative;
  z-index: 1;
  background: rgb(17, 23, 15);
  border: 1px solid rgb(72, 84, 60);
  border-radius: 16px;
  padding: 40px;
  width: min(950px, 100%);
  box-shadow: rgba(0, 0, 0, 0.533) 0px 30px 100px;
}

.drawer {
  max-width: 470px;
  margin-left: auto;
  min-height: calc(100dvh - 80px);
}

.overlay h2 {
  font-size: 31px;
  margin: 22px 0px 30px;
}

.close {
  position: absolute;
  right: 22px;
  top: 15px;
  font-size: 28px;
  color: var(--muted);
}

.cart-product {
  display: flex;
  gap: 20px;
  padding: 25px 0px 35px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.cart-product .cart-brand-mark {
  width: 56px;
  height: 56px;
  flex: none;
}

.cart-product p,
.cart-product span {
  font-size: 11px;
  color: var(--muted);
}

.total-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0px;
  font-size: 12px;
}

.total {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 25px;
}

.total b {
  color: var(--lime);
  font-size: 18px;
}

.drawer > .button {
  width: 100%;
  margin-top: 20px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.checkout-grid h3 {
  margin-bottom: 22px;
}

.checkout-grid label {
  display: block;
  font-size: 11px;
  color: rgb(194, 206, 186);
  margin-top: 18px;
}

.checkout-grid input:not([type="checkbox"]) {
  width: 100%;
  background: rgb(9, 13, 8);
  border: 1px solid rgb(56, 67, 49);
  border-radius: 6px;
  color: var(--ink);
  padding: 12px;
  margin-top: 8px;
}

.consent {
  gap: 10px;
  align-items: flex-start;
  display: flex !important;
}

.order {
  padding: 25px;
  background: rgb(27, 37, 22);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.order > p {
  font-size: 12px;
}

.order .button {
  width: 100%;
  margin-top: 22px;
}

.payment-method {
  font-size: 12px;
  color: var(--lime);
  border: 1px solid rgb(100, 115, 78);
  padding: 14px;
  border-radius: 7px;
}

.payment-panel {
  max-width: 590px;
  text-align: center;
}

.payment-panel h2 {
  font-size: 28px;
  line-height: 1.4;
}

.payment-panel > p {
  font-size: 12px;
  color: var(--muted);
}

.qr-placeholder {
  width: 220px;
  height: 220px;
  margin: 25px auto;
  background: rgb(243, 246, 238);
  color: rgb(52, 66, 44);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 12px solid white;
  outline: rgb(220, 229, 209) solid 1px;
  border-radius: 10px;
}

.qr-placeholder > span {
  font: 80px / 1 Arial;
  color: rgb(113, 134, 97);
}

.qr-placeholder b {
  font-size: 10px;
  margin-top: 12px;
}

.qr-placeholder small {
  font-size: 8px;
  margin-top: 10px;
}

.payment-amount {
  font-size: 30px;
}

.payment-status {
  color: var(--lime);
  font-size: 11px;
  margin: 20px 0px;
}

.payment-panel .button {
  margin-top: 25px;
}