/* shadcn/ui aesthetic for product detail page only.
   Scoped under .detail-wrap to avoid bleeding into other pages. */

.detail-wrap {
  --sc-bg: #ffffff;
  --sc-fg: #0a0a0a;
  --sc-card: #ffffff;
  --sc-muted: #f5f5f5;
  --sc-muted-fg: #737373;
  --sc-border: #e5e5e5;
  --sc-input: #e5e5e5;
  --sc-ring: #a3a3a3;
  --sc-primary: #18181b;
  --sc-primary-fg: #fafafa;
  --sc-radius: 10px;
  --sc-radius-sm: 6px;
  --sc-radius-md: 8px;
  --sc-radius-pill: 12px;
  --sc-shadow-xs: 0 1px 2px 0 rgba(0,0,0,.05);
  --sc-shadow-sm: 0 1px 3px 0 rgba(0,0,0,.06), 0 1px 2px -1px rgba(0,0,0,.06);
  --sc-font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  background: var(--sc-bg) !important;
  color: var(--sc-fg) !important;
  font-family: var(--sc-font) !important;
  padding-bottom: 64px !important;
}

html body .detail-wrap,
html body .detail-wrap * {
  font-family: var(--sc-font) !important;
}

html body .detail-wrap .detail {
  width: min(1200px, calc(100% - 32px)) !important;
  margin: 28px auto 0 !important;
}

html body .detail-wrap .detail__back {
  background: transparent !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-fg) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: var(--sc-radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}
html body .detail-wrap .detail__back:hover {
  background: var(--sc-muted) !important;
  color: var(--sc-fg) !important;
}

html body .detail-wrap .detail__grid {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 48px !important;
  margin-top: 24px !important;
  align-items: start !important;
}

/* Image card */
html body .detail-wrap .detail__image {
  background: #fafafa !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  box-shadow: none !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .detail-wrap .detail__image-bg {
  background: #fafafa !important;
  background-image:
    linear-gradient(180deg, #fbfbfb 0%, #f6f6f6 100%) !important;
  opacity: 1 !important;
}
html body .detail-wrap .detail__image-vial {
  filter: none !important;
}
html body .detail-wrap .detail__catalog-id {
  background: var(--sc-muted) !important;
  color: var(--sc-muted-fg) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  padding: 4px 8px !important;
  text-transform: none !important;
  box-shadow: none !important;
}
html body .detail-wrap .detail__sale-badge {
  background: var(--sc-fg) !important;
  color: var(--sc-primary-fg) !important;
  border: none !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
}

/* Info column */
html body .detail-wrap .detail__info {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
html body .detail-wrap .detail__name {
  font-family: var(--sc-font) !important;
  font-weight: 600 !important;
  font-size: 36px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: var(--sc-fg) !important;
  margin: 0 !important;
}
html body .detail-wrap .detail__fullname {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-muted-fg) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
html body .detail-wrap .detail__price-row {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
html body .detail-wrap .detail__price-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}
html body .detail-wrap .detail__price {
  font-family: var(--sc-font) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--sc-fg) !important;
  line-height: 1 !important;
  transition: color .2s ease !important;
}
html body .detail-wrap .detail__price.detail__price--discount {
  color: #15803d !important;
}
html body .detail-wrap .detail__compare-price {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--sc-muted-fg) !important;
  text-decoration: line-through !important;
}
html body .detail-wrap .detail__short-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--sc-muted-fg) !important;
  margin: 4px 0 8px !important;
}

/* Toggle group (Single/Bundles, sizes, etc.) — shadcn ToggleGroup pattern */
html body .detail-wrap .detail__segment,
html body .detail-wrap .detail__size-options {
  display: inline-flex !important;
  background: var(--sc-muted) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-md) !important;
  padding: 4px !important;
  gap: 2px !important;
  width: fit-content !important;
  box-shadow: none !important;
}
html body .detail-wrap .detail__size-options {
  flex-wrap: wrap !important;
}
html body .detail-wrap .detail__seg-btn,
html body .detail-wrap .detail__size-btn {
  background: transparent !important;
  color: var(--sc-fg) !important;
  border: none !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease !important;
  min-width: 0 !important;
}
html body .detail-wrap .detail__seg-btn:hover,
html body .detail-wrap .detail__size-btn:hover {
  background: rgba(0,0,0,.04) !important;
  color: var(--sc-fg) !important;
}
html body .detail-wrap .detail__seg-btn--active,
html body .detail-wrap .detail__size-btn--active {
  background: var(--sc-card) !important;
  color: var(--sc-fg) !important;
  box-shadow: var(--sc-shadow-xs) !important;
}
html body .detail-wrap .detail__mode-toggle {
  margin: 4px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Size label */
html body .detail-wrap .detail__size-selector {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 4px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
html body .detail-wrap .detail__size-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-fg) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Actions row: qty, add, COA */
html body .detail-wrap .detail__actions {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 8px !important;
}
html body .detail-wrap .detail__qty {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--sc-card) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  height: 40px !important;
  box-shadow: var(--sc-shadow-xs) !important;
  overflow: hidden !important;
}
html body .detail-wrap .detail__qty-btn {
  background: transparent !important;
  border: none !important;
  color: var(--sc-fg) !important;
  width: 36px !important;
  height: 100% !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body .detail-wrap .detail__qty-btn:hover {
  background: var(--sc-muted) !important;
  color: var(--sc-fg) !important;
}
html body .detail-wrap .detail__qty-val {
  min-width: 28px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sc-fg) !important;
}

/* Primary button */
html body .detail-wrap .detail__add-btn {
  background: var(--sc-primary) !important;
  color: var(--sc-primary-fg) !important;
  border: 1px solid var(--sc-primary) !important;
  border-radius: var(--sc-radius-sm) !important;
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: var(--sc-shadow-xs) !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color .15s ease, opacity .15s ease !important;
}
html body .detail-wrap .detail__add-btn:hover {
  background: #27272a !important;
  border-color: #27272a !important;
  opacity: 1 !important;
}

/* Outline button (View COA) */
html body .detail-wrap .detail__coa-btn {
  background: var(--sc-card) !important;
  color: var(--sc-fg) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: var(--sc-shadow-xs) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .detail-wrap .detail__coa-btn:hover {
  background: var(--sc-muted) !important;
  color: var(--sc-fg) !important;
}

/* Trust / payment row */
html body .detail-wrap .detail__payment-trust {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--sc-border) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
html body .detail-wrap .detail__shipping-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  font-size: 10.5px !important;
  color: var(--sc-muted-fg) !important;
}
html body .detail-wrap .detail__shipping-row span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body .detail-wrap .detail__shipping-row strong {
  font-weight: 500 !important;
  color: var(--sc-fg) !important;
}
html body .detail-wrap .detail__shipping-row svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  stroke-width: 2 !important;
  filter: none !important;
}
html body .detail-wrap .detail__shipping-row span:nth-child(1) { color: #8aa3d4 !important; }
html body .detail-wrap .detail__shipping-row span:nth-child(1) strong { color: #8aa3d4 !important; }
html body .detail-wrap .detail__shipping-row span:nth-child(1) svg * {
  fill: none !important;
  stroke: #8aa3d4 !important;
}
html body .detail-wrap .detail__shipping-row span:nth-child(2) { color: #8cb8a3 !important; }
html body .detail-wrap .detail__shipping-row span:nth-child(2) strong { color: #8cb8a3 !important; }
html body .detail-wrap .detail__shipping-row span:nth-child(2) svg * {
  fill: none !important;
  stroke: #8cb8a3 !important;
}
html body .detail-wrap .detail__shipping-row span:nth-child(3) { color: #d9b079 !important; }
html body .detail-wrap .detail__shipping-row span:nth-child(3) strong { color: #d9b079 !important; }
html body .detail-wrap .detail__shipping-row span:nth-child(3) svg * {
  fill: #d9b079 !important;
  stroke: #d9b079 !important;
}
html body .detail-wrap .detail__accept-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body .detail-wrap .detail__accept-label {
  font-size: 12px !important;
  color: var(--sc-muted-fg) !important;
  font-weight: 500 !important;
}

/* Bundle option list — JS controls display via inline style, only style layout */
html body .detail-wrap .detail__bundle-list {
  flex-direction: column !important;
  gap: 8px !important;
}
html body .detail-wrap .detail__bundle-option {
  background: var(--sc-card) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-md) !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
html body .detail-wrap .detail__bundle-option:hover {
  background: var(--sc-muted) !important;
  border-color: #d4d4d4 !important;
}
html body .detail-wrap .detail__bundle-option-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sc-fg) !important;
}
html body .detail-wrap .detail__bundle-option-items {
  font-size: 12px !important;
  color: var(--sc-muted-fg) !important;
}
html body .detail-wrap .detail__bundle-option-save {
  background: var(--sc-fg) !important;
  color: var(--sc-primary-fg) !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  margin-left: auto !important;
}

/* Below-the-fold sections */
html body .detail-wrap .detail__page-sections {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 48px !important;
  background: transparent !important;
}
html body .detail-wrap .detail__section {
  background: var(--sc-card) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  padding: 24px !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html body .detail-wrap .detail__section--storage,
html body .detail-wrap .detail__section--refs {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html body .detail-wrap .detail__section h2 {
  font-family: var(--sc-font) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--sc-fg) !important;
  margin: 4px 0 12px !important;
  line-height: 1.2 !important;
}
html body .detail-wrap .detail__section p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--sc-muted-fg) !important;
  margin: 0 0 8px !important;
}
html body .detail-wrap .detail__section-kicker {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--sc-muted-fg) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* COA pair */
html body .detail-wrap .detail__coa-pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 8px !important;
}
html body .detail-wrap .detail__coa-card {
  background: var(--sc-card) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-md) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-shadow: none !important;
}
html body .detail-wrap .detail__coa-card-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--sc-muted-fg) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
html body .detail-wrap .detail__coa-card-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--sc-fg) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  font-family: var(--sc-font) !important;
}
html body .detail-wrap .detail__coa-card-unit {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--sc-muted-fg) !important;
  margin-left: 2px !important;
}
html body .detail-wrap .detail__coa-card-meta {
  font-size: 12px !important;
  color: var(--sc-muted-fg) !important;
  font-weight: 400 !important;
}
html body .detail-wrap .detail__coa-card-link {
  margin-top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-fg) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  width: fit-content !important;
  box-shadow: none !important;
}
html body .detail-wrap .detail__coa-card-link:hover {
  color: var(--sc-fg) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Molecular profile (definition list) */
html body .detail-wrap .detail__info-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
html body .detail-wrap .detail__info-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  padding: 10px 0 !important;
  border-top: 1px solid var(--sc-border) !important;
  margin: 0 !important;
}
html body .detail-wrap .detail__info-row:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}
html body .detail-wrap .detail__info-row dt {
  font-size: 13px !important;
  color: var(--sc-muted-fg) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
html body .detail-wrap .detail__info-row dd {
  font-size: 13px !important;
  color: var(--sc-fg) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-align: right !important;
}

/* Storage list */
html body .detail-wrap .detail__storage-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
html body .detail-wrap .detail__storage-row {
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--sc-border) !important;
  align-items: start !important;
}
html body .detail-wrap .detail__storage-row:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}
html body .detail-wrap .detail__storage-icon {
  font-size: 14px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
}
html body .detail-wrap .detail__storage-row:nth-child(1) .detail__storage-icon,
html body .detail-wrap .detail__storage-row:nth-child(2) .detail__storage-icon,
html body .detail-wrap .detail__storage-row:nth-child(3) .detail__storage-icon {
  background: transparent !important;
  border-color: transparent !important;
}
html body .detail-wrap .detail__storage-row strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sc-fg) !important;
  margin-bottom: 2px !important;
}
html body .detail-wrap .detail__storage-row span {
  font-size: 13px !important;
  color: var(--sc-muted-fg) !important;
  line-height: 1.55 !important;
}

/* References list */
html body .detail-wrap .detail__refs-list {
  margin: 8px 0 0 !important;
  padding: 0 0 0 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
html body .detail-wrap .detail__refs-list li {
  font-size: 13px !important;
  color: var(--sc-muted-fg) !important;
  line-height: 1.55 !important;
}
html body .detail-wrap .detail__refs-list li strong,
html body .detail-wrap .detail__refs-list li em {
  color: var(--sc-fg) !important;
  font-weight: 500 !important;
}
html body .detail-wrap .detail__refs-list a,
html body .detail-wrap .detail__refs-list .view-source {
  color: var(--sc-fg) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
html body .detail-wrap .detail__refs-list a:hover,
html body .detail-wrap .detail__refs-list .view-source:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Compliance callout (disclaimer) */
html body .detail-wrap .detail__section--compliance {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
html body .detail-wrap .detail__compliance-callout {
  background: var(--sc-muted) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-md) !important;
  padding: 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  box-shadow: none !important;
}
html body .detail-wrap .detail__compliance-callout strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sc-fg) !important;
  margin-bottom: 4px !important;
}
html body .detail-wrap .detail__compliance-callout p {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--sc-muted-fg) !important;
  margin: 0 !important;
}
html body .detail-wrap .detail__compliance-icon {
  font-size: 14px !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(220, 38, 38, 0.10) !important;
  border: 1px solid rgba(220, 38, 38, 0.22) !important;
}

/* Frequently bought together */
html body .detail-wrap .detail__pairings {
  margin-top: 48px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
html body .detail-wrap .detail__pairings-title {
  font-family: var(--sc-font) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  color: var(--sc-fg) !important;
  margin: 0 0 16px !important;
  line-height: 1.2 !important;
}

/* Mobile */
@media (max-width: 880px) {
  html body .detail-wrap .detail__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  html body .detail-wrap .detail__name {
    font-size: 28px !important;
  }
  html body .detail-wrap .detail__price {
    font-size: 26px !important;
  }
  html body .detail-wrap .detail__actions {
    grid-template-columns: auto 1fr !important;
    gap: 8px !important;
  }
  html body .detail-wrap .detail__coa-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  html body .detail-wrap .detail__coa-pair {
    grid-template-columns: 1fr !important;
  }
  html body .detail-wrap .detail__section {
    padding: 18px !important;
  }
}

/* ============================================================
   Bundle detail page (.detail-wrap--bundle inherits the base)
   ============================================================ */

html body .detail-wrap--bundle .detail__image--bundle {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html body .detail-wrap--bundle .card__bundle-image--detail {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  filter: none !important;
}
html body .detail-wrap--bundle .card__bundle-products--detail {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 100% !important;
}
html body .detail-wrap--bundle .card__bundle-vial--detail {
  max-height: 70% !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
}
html body .detail-wrap--bundle .card__bundle-badge {
  background: var(--sc-fg) !important;
  color: var(--sc-primary-fg) !important;
  border: none !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
}

/* Savings + tier note */
html body .detail-wrap--bundle .bundle-detail__savings {
  display: inline-block !important;
  margin-top: 6px !important;
  background: var(--sc-muted) !important;
  color: var(--sc-muted-fg) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 4px 10px !important;
  box-shadow: none !important;
}
html body .detail-wrap--bundle .bundle-detail__tier-note {
  font-size: 12px !important;
  color: var(--sc-muted-fg) !important;
  font-weight: 400 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Buy panel — outer card containing config */
html body .detail-wrap--bundle .bundle-detail__buy-panel {
  background: var(--sc-card) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  padding: 20px !important;
  margin-top: 8px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
html body .detail-wrap--bundle .bundle-detail__products-heading {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--sc-muted-fg) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}

/* Includes pills */
html body .detail-wrap--bundle .card__bundle-includes--detail {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
html body .detail-wrap--bundle .card__bundle-pill--detail {
  background: var(--sc-muted) !important;
  color: var(--sc-fg) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 3px 8px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* Product config rows */
html body .detail-wrap--bundle .bundle-detail__product-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
html body .detail-wrap--bundle .bundle-detail__product {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--sc-border) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .detail-wrap--bundle .bundle-detail__product:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}
html body .detail-wrap--bundle .bundle-detail__product-img,
html body .detail-wrap--bundle .bundle-detail__product-img-placeholder {
  width: 48px !important;
  height: 48px !important;
  background: var(--sc-muted) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  object-fit: contain !important;
  padding: 4px !important;
  filter: none !important;
}
html body .detail-wrap--bundle .bundle-detail__product-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html body .detail-wrap--bundle .bundle-detail__product-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sc-fg) !important;
  letter-spacing: 0 !important;
}
html body .detail-wrap--bundle .bundle-detail__product-price {
  font-size: 13px !important;
  color: var(--sc-muted-fg) !important;
  font-weight: 500 !important;
}
html body .detail-wrap--bundle .bundle-detail__more-info {
  font-size: 12px !important;
  color: var(--sc-muted-fg) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  width: fit-content !important;
}
html body .detail-wrap--bundle .bundle-detail__more-info:hover {
  color: var(--sc-fg) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Size + MT toggle groups (shadcn ToggleGroup) */
html body .detail-wrap--bundle .bundle-detail__size-toggle,
html body .detail-wrap--bundle .bundle-detail__mt-swap-toggle {
  display: inline-flex !important;
  background: var(--sc-muted) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-md) !important;
  padding: 4px !important;
  gap: 2px !important;
  width: fit-content !important;
  box-shadow: none !important;
}
html body .detail-wrap--bundle .bundle-detail__size-btn,
html body .detail-wrap--bundle .bundle-detail__mt-swap-btn {
  background: transparent !important;
  color: var(--sc-muted-fg) !important;
  border: 1px solid transparent !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
html body .detail-wrap--bundle .bundle-detail__size-btn:hover,
html body .detail-wrap--bundle .bundle-detail__mt-swap-btn:hover {
  background: rgba(0,0,0,.04) !important;
  color: var(--sc-fg) !important;
}
html body .detail-wrap--bundle .bundle-detail__size-btn--active,
html body .detail-wrap--bundle .bundle-detail__mt-swap-btn--active,
html body .detail-wrap--bundle .bundle-detail__size-btn--active:hover,
html body .detail-wrap--bundle .bundle-detail__mt-swap-btn--active:hover {
  background: #101418 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-color: #101418 !important;
  box-shadow: 0 1px 2px 0 rgba(16,20,24,.18), 0 2px 6px 0 rgba(16,20,24,.10) !important;
}

/* Native select fallback */
html body .detail-wrap--bundle .bundle-detail__size-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--sc-card) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-fg) !important;
  height: 32px !important;
  padding: 0 28px 0 10px !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  width: fit-content !important;
  box-shadow: var(--sc-shadow-xs) !important;
  cursor: pointer !important;
}

/* Bac-water qty controls */
html body .detail-wrap--bundle .bundle-detail__bac-qty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
html body .detail-wrap--bundle .bundle-detail__bac-qty-btn {
  background: var(--sc-card) !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-fg) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--sc-radius-sm) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: var(--sc-shadow-xs) !important;
}
html body .detail-wrap--bundle .bundle-detail__bac-qty-btn:hover {
  background: var(--sc-muted) !important;
}
html body .detail-wrap--bundle .bundle-detail__bac-qty-val {
  min-width: 24px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-fg) !important;
}
html body .detail-wrap--bundle .bundle-detail__bac-qty-note {
  font-size: 11px !important;
  color: var(--sc-muted-fg) !important;
}

/* Add-bundle CTA + qty variant */
html body .detail-wrap--bundle .detail__actions--bundle {
  display: block !important;
}
html body .detail-wrap--bundle .detail__add-btn--bundle {
  background: var(--sc-primary) !important;
  color: var(--sc-primary-fg) !important;
  border: 1px solid var(--sc-primary) !important;
  border-radius: var(--sc-radius-sm) !important;
  height: 44px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: var(--sc-shadow-xs) !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .detail-wrap--bundle .detail__add-btn--bundle:hover {
  background: #27272a !important;
  border-color: #27272a !important;
}
html body .detail-wrap--bundle .detail__add-btn--qty {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--sc-card) !important;
  color: var(--sc-fg) !important;
  border: 1px solid var(--sc-border) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html body .detail-wrap--bundle .detail__add-qty-btn {
  background: transparent !important;
  border: none !important;
  color: var(--sc-fg) !important;
  width: 44px !important;
  height: 100% !important;
  font-size: 16px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
html body .detail-wrap--bundle .detail__add-qty-btn:hover {
  background: var(--sc-muted) !important;
}
html body .detail-wrap--bundle .detail__add-qty-val {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sc-fg) !important;
}

/* Compounds list (below the fold) */
html body .detail-wrap--bundle .bundle-detail__compounds {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 8px !important;
}
html body .detail-wrap--bundle .bundle-detail__compound {
  padding: 16px 0 !important;
  border-top: 1px solid var(--sc-border) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .detail-wrap--bundle .bundle-detail__compound:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}
html body .detail-wrap--bundle .bundle-detail__compound-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  flex-wrap: wrap !important;
}
html body .detail-wrap--bundle .bundle-detail__compound-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sc-fg) !important;
  letter-spacing: -0.01em !important;
}
html body .detail-wrap--bundle .bundle-detail__compound-fullname {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--sc-muted-fg) !important;
}
html body .detail-wrap--bundle .bundle-detail__compound-desc {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--sc-muted-fg) !important;
  margin: 0 0 6px !important;
}
html body .detail-wrap--bundle .bundle-detail__compound-meta {
  font-size: 12px !important;
  color: var(--sc-muted-fg) !important;
  font-weight: 500 !important;
}
html body .detail-wrap--bundle .bundle-detail__compound-meta strong {
  color: var(--sc-fg) !important;
}

/* ============================================================
   Compact + pill-shaped buttons (singles + bundles)
   ============================================================ */

html body .detail-wrap .detail__info,
html body .detail-wrap .detail__info--bundle {
  gap: 10px !important;
}
html body .detail-wrap .detail__name {
  font-size: 30px !important;
}
html body .detail-wrap .detail__price {
  font-size: 26px !important;
}
html body .detail-wrap .detail__compare-price {
  font-size: 14px !important;
}
html body .detail-wrap .detail__short-desc {
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 2px 0 4px !important;
}
html body .detail-wrap .detail__size-selector {
  gap: 6px !important;
  margin: 2px 0 !important;
}
html body .detail-wrap .detail__mode-toggle {
  margin: 2px 0 !important;
}
html body .detail-wrap .detail__size-options,
html body .detail-wrap .detail__segment {
  padding: 5px !important;
}
html body .detail-wrap .detail__segment {
  display: flex !important;
  width: 100% !important;
}
html body .detail-wrap .detail__seg-btn {
  flex: 1 1 0 !important;
}
html body .detail-wrap .detail__seg-btn,
html body .detail-wrap .detail__size-btn {
  padding: 9px 18px !important;
  font-size: 14px !important;
}
html body .detail-wrap .detail__actions {
  margin-top: 6px !important;
  gap: 8px !important;
}
html body .detail-wrap .detail__qty {
  height: 48px !important;
}
html body .detail-wrap .detail__qty-btn {
  width: 40px !important;
  font-size: 18px !important;
}
html body .detail-wrap .detail__qty-val {
  font-size: 15px !important;
}
html body .detail-wrap .detail__add-btn,
html body .detail-wrap .detail__coa-btn {
  height: 48px !important;
  font-size: 15px !important;
  padding: 0 22px !important;
  font-weight: 600 !important;
}
html body .detail-wrap .detail__payment-trust {
  margin-top: 10px !important;
  padding-top: 10px !important;
  gap: 8px !important;
}

/* Pill-shape every button + toggle container */
html body .detail-wrap .detail__back,
html body .detail-wrap .detail__catalog-id,
html body .detail-wrap .detail__sale-badge,
html body .detail-wrap .detail__segment,
html body .detail-wrap .detail__size-options,
html body .detail-wrap .detail__seg-btn,
html body .detail-wrap .detail__size-btn,
html body .detail-wrap .detail__qty,
html body .detail-wrap .detail__qty-btn,
html body .detail-wrap .detail__add-btn,
html body .detail-wrap .detail__coa-btn,
html body .detail-wrap .detail__coa-card-link,
html body .detail-wrap--bundle .bundle-detail__savings,
html body .detail-wrap--bundle .card__bundle-pill--detail,
html body .detail-wrap--bundle .bundle-detail__size-toggle,
html body .detail-wrap--bundle .bundle-detail__mt-swap-toggle,
html body .detail-wrap--bundle .bundle-detail__size-btn,
html body .detail-wrap--bundle .bundle-detail__mt-swap-btn,
html body .detail-wrap--bundle .bundle-detail__size-select,
html body .detail-wrap--bundle .bundle-detail__bac-qty-btn,
html body .detail-wrap--bundle .detail__add-btn--bundle,
html body .detail-wrap--bundle .detail__add-btn--qty,
html body .detail-wrap--bundle .detail__add-qty-btn,
html body .detail-wrap--bundle .card__bundle-badge {
  border-radius: var(--sc-radius-pill) !important;
}

/* qty container is pill but inner buttons stay flat-radius inside */
html body .detail-wrap .detail__qty-btn,
html body .detail-wrap--bundle .detail__add-qty-btn {
  border-radius: 0 !important;
}

/* Compact bundle buy-panel internals */
html body .detail-wrap--bundle .bundle-detail__buy-panel {
  padding: 16px !important;
  gap: 12px !important;
}
html body .detail-wrap--bundle .bundle-detail__product {
  padding: 10px 0 !important;
}
html body .detail-wrap--bundle .bundle-detail__size-toggle,
html body .detail-wrap--bundle .bundle-detail__mt-swap-toggle {
  padding: 4px !important;
}
html body .detail-wrap--bundle .bundle-detail__size-btn,
html body .detail-wrap--bundle .bundle-detail__mt-swap-btn {
  padding: 7px 14px !important;
  font-size: 13px !important;
}
html body .detail-wrap--bundle .detail__add-btn--bundle {
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
html body .detail-wrap--bundle .bundle-detail__bac-qty-btn {
  width: 32px !important;
  height: 32px !important;
  font-size: 15px !important;
}

/* ============================================================
   Bundle & Save tier cards (.detail__buy-cards)
   ============================================================ */
html body .detail-wrap .detail__buy-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 2px 0 !important;
}
html body .detail-wrap .detail__buy-cards-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--sc-muted-fg) !important;
}
html body .detail-wrap .detail__buy-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
html body .detail-wrap .detail__buy-card {
  position: relative !important;
  background: var(--sc-card) !important;
  border: 1.5px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-pill) !important;
  padding: 16px 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease !important;
  font-family: var(--sc-font) !important;
  text-align: center !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 132px !important;
}
html body .detail-wrap .detail__buy-card:hover {
  border-color: #b4b4b4 !important;
  background: var(--sc-card) !important;
}
html body .detail-wrap .detail__buy-card--active {
  border-color: var(--sc-fg) !important;
  background: var(--sc-bg) !important;
  box-shadow: 0 0 0 1px var(--sc-fg) inset !important;
}
html body .detail-wrap .detail__buy-card-imgs {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 56px !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .detail-wrap .detail__buy-card-imgs .detail__buy-card-vial + .detail__buy-card-vial {
  margin-left: -10px !important;
}
html body .detail-wrap .detail__buy-card-vial,
html body .detail-wrap .detail__buy-card-imgs,
html body .detail-wrap .detail__buy-card-info,
html body .detail-wrap .detail__buy-card-qty,
html body .detail-wrap .detail__buy-card-off,
html body .detail .detail__buy-card-vial,
html body .detail .detail__buy-card-imgs,
html body .detail .detail__buy-card-info,
html body .detail .detail__buy-card-qty,
html body .detail .detail__buy-card-off {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .detail-wrap .detail__buy-card-vial {
  width: auto !important;
  height: 48px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: none !important;
  display: block !important;
}
html body .detail-wrap .detail__buy-card-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
}
html body .detail-wrap .detail__buy-card-qty {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sc-fg) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
html body .detail-wrap .detail__buy-card-off {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #15803d !important;
  letter-spacing: 0 !important;
}
html body .detail-wrap .detail__buy-card-badge {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  border-radius: var(--sc-radius-pill) !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  text-transform: uppercase !important;
}
html body .detail-wrap .detail__buy-card-badge--popular {
  background: #15803d !important;
  color: #ffffff !important;
}
html body .detail-wrap .detail__buy-card-badge--best {
  background: #d97706 !important;
  color: #ffffff !important;
}

html body .ck-payment .ck-pay-method .ck-pay-method__icon.ck-pay-method__icon--card,
html body .ck-pay-dropdown .ck-pay-dropdown__selected .ck-pay-method__icon.ck-pay-method__icon--card {
  background: linear-gradient(135deg, #111827, #374151) !important;
  color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}

html body .ck-payment .ck-pay-method .ck-pay-method__icon.ck-pay-method__icon--card svg,
html body .ck-payment .ck-pay-method .ck-pay-method__icon.ck-pay-method__icon--card svg *,
html body .ck-pay-dropdown .ck-pay-dropdown__selected .ck-pay-method__icon.ck-pay-method__icon--card svg,
html body .ck-pay-dropdown .ck-pay-dropdown__selected .ck-pay-method__icon.ck-pay-method__icon--card svg * {
  fill: none !important;
  stroke: #ffffff !important;
}

html body .checkout .ck-pay-info__memo svg,
html body .checkout .ck-pay-info__memo svg *,
html body .checkout .ck-card-disclaimer svg,
html body .checkout .ck-card-disclaimer svg *,
html body .checkout .ck-shipping-disclaimer svg,
html body .checkout .ck-shipping-disclaimer svg *,
html body .checkout .ck-submit__lock svg,
html body .checkout .ck-submit__lock svg *,
html body .checkout .ck-badge svg,
html body .checkout .ck-badge svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .checkout .ck-pay-info__memo svg {
  color: #4f46e5 !important;
}

html body .checkout .ck-card-disclaimer svg {
  color: #64748b !important;
}

html body .checkout .ck-shipping-disclaimer svg {
  color: #4f46e5 !important;
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2 !important;
}

html body .checkout .ck-submit__lock {
  color: #ffffff !important;
  opacity: 1 !important;
}

html body .checkout .ck-confirm-check__box {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #ffffff !important;
}

html body .checkout .ck-confirm-check__box svg,
html body .checkout .ck-confirm-check__box svg * {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .checkout .ck-confirm-check__input:checked ~ .ck-confirm-check__box {
  background: #101418 !important;
  border-color: #101418 !important;
}

html body .checkout .ck-badge {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #111827 !important;
  gap: 4px !important;
  padding: 6px 2px !important;
  font-size: 0.56rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

html body .checkout .ck-badge svg {
  color: #111827 !important;
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2 !important;
}

html body .checkout .ck-summary__badges {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
}

html body .order-confirmation .oc-hero__ring,
html body .order-confirmation .oc-hero__ring-svg,
html body .order-confirmation .oc-hero__check-wrap {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .order-confirmation .oc-hero__ring-svg circle,
html body .order-confirmation .oc-hero__check,
html body .order-confirmation .oc-hero__check *,
html body .order-confirmation .oc-status-card__icon svg,
html body .order-confirmation .oc-status-card__icon svg *,
html body .order-confirmation .oc-details-card__chevron,
html body .order-confirmation .oc-details-card__chevron *,
html body .order-confirmation .oc-trust .ck-badge svg,
html body .order-confirmation .oc-trust .ck-badge svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .order-confirmation .oc-hero__ring-bg {
  color: #e5e7eb !important;
  stroke: #e5e7eb !important;
}

html body .order-confirmation .oc-hero__ring-fill,
html body .order-confirmation .oc-hero__check {
  color: #059669 !important;
  stroke: #059669 !important;
}

html body .order-confirmation .oc-status-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

html body .order-confirmation .oc-status-card__row,
html body .order-confirmation .oc-status-card__row > div,
html body .order-confirmation .oc-status-card__heading,
html body .order-confirmation .oc-status-card__text {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .order-confirmation .oc-status-card__icon {
  color: #111827 !important;
  width: 18px !important;
  height: 18px !important;
}

html body .order-confirmation .oc-status-card__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
}

html body .order-confirmation .oc-trust {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 10px !important;
}

html body .order-confirmation .oc-trust .ck-badge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
  font-size: 0.58rem !important;
}

html body .order-confirmation .oc-trust .ck-badge svg {
  width: 14px !important;
  height: 14px !important;
  color: #111827 !important;
}

@media (max-width: 640px) {
  html body .checkout .ck-payment .ck-summary__badges {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-top: 10px !important;
    margin-bottom: 60px !important;
    padding-top: 10px !important;
  }

  html body .checkout .ck-payment .ck-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 4px 1px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0.5rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  html body .checkout .ck-payment .ck-badge svg {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
  }
}

@media (max-width: 880px) {
  html body .detail-wrap .detail__buy-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html body .detail-wrap .detail__buy-card {
    min-height: 110px !important;
    padding: 10px 6px !important;
  }
}