.flashdraw-native-pricing-hidden,
.flashdraw-native-detail-pricing-hidden {
  display: none !important;
}

.flashdraw-enhanced-card {
  position: relative !important;
  overflow: visible !important;
}

.flashdraw-discount-ribbon {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: 12px;
  padding: 5px 10px;
  border-radius: 0 0 7px 7px;
  color: #fff;
  background: linear-gradient(135deg, #ff5b57, #ef2929);
  box-shadow: 0 5px 12px rgb(239 41 41 / 24%);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.flashdraw-discount-ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  border-style: solid;
  border-width: 0 0 5px 5px;
  border-color: transparent transparent #a91e1e transparent;
}

.flashdraw-card-pricing {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.flashdraw-price-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 10px;
  font-weight: 650;
}

.flashdraw-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 53px 24px;
  gap: 5px;
  align-items: baseline;
  min-height: 22px;
  font-size: 11px;
}

.flashdraw-price-label {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, currentColor 66%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flashdraw-price-original {
  color: color-mix(in srgb, currentColor 44%, transparent);
  text-align: right;
  text-decoration: line-through;
  white-space: nowrap;
}

.flashdraw-price-sale {
  color: #ef2929;
  text-align: right;
  white-space: nowrap;
}

.flashdraw-price-unit {
  color: color-mix(in srgb, currentColor 42%, transparent);
  font-size: 9px;
  white-space: nowrap;
}

.flashdraw-detail-pricing {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, currentColor 2.5%, transparent);
  box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.flashdraw-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.flashdraw-detail-kicker {
  color: color-mix(in srgb, currentColor 52%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.flashdraw-detail-heading h2 {
  margin: 3px 0 0;
  font-size: 17px;
  font-weight: 750;
}

.flashdraw-detail-discount {
  flex: none;
  padding: 5px 10px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #ff5b57, #ef2929);
  font-size: 12px;
  font-weight: 750;
}

.flashdraw-detail-table {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 10px;
}

.flashdraw-detail-table-head,
.flashdraw-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 100px;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
}

.flashdraw-detail-table-head {
  color: color-mix(in srgb, currentColor 54%, transparent);
  background: color-mix(in srgb, currentColor 3.5%, transparent);
  font-size: 10px;
  font-weight: 700;
}

.flashdraw-detail-table-head span:not(:first-child) {
  text-align: right;
}

.flashdraw-detail-row {
  border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  font-size: 12px;
}

.flashdraw-detail-note {
  margin: 10px 2px 0;
  color: color-mix(in srgb, currentColor 52%, transparent);
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .flashdraw-detail-pricing { padding: 13px; }
  .flashdraw-detail-table-head,
  .flashdraw-detail-row {
    grid-template-columns: minmax(0, 1fr) 65px 65px;
    gap: 7px;
    padding: 10px 9px;
  }
}
