:root {
  --uhp: #0b5ed7;
  --uhp-dark: #084298;
  --uhp-soft: #e7f1ff;
  --ink: #0b1220;
  --muted: rgba(11, 18, 32, 0.68);
}

body {
  background: radial-gradient(1200px circle at 10% 0%, rgba(11, 94, 215, 0.20), rgba(255, 255, 255, 0) 55%),
    radial-gradient(1200px circle at 90% 10%, rgba(167, 139, 250, 0.20), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #f3f7ff 0%, #f7fbff 50%, #f7f6ff 100%);
  color: var(--ink);
}

.bg-uhp {
  background: linear-gradient(135deg, var(--uhp-dark), var(--uhp));
}

.btn-uhp {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--uhp);
  --bs-btn-border-color: var(--uhp);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--uhp-dark);
  --bs-btn-hover-border-color: var(--uhp-dark);
  --bs-btn-active-bg: var(--uhp-dark);
  --bs-btn-active-border-color: var(--uhp-dark);
}

.btn-outline-uhp {
  --bs-btn-color: var(--uhp);
  --bs-btn-border-color: var(--uhp);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--uhp);
  --bs-btn-hover-border-color: var(--uhp);
  --bs-btn-active-bg: var(--uhp-dark);
  --bs-btn-active-border-color: var(--uhp-dark);
}

.hero-card {
  background: radial-gradient(1200px circle at 12% 0%, rgba(11, 94, 215, 0.12) 0%, rgba(11, 94, 215, 0.04) 40%, rgba(167, 139, 250, 0.06) 100%);
  border: 1px solid rgba(11, 18, 32, 0.10);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(11, 18, 32, 0.08);
}

.qty-input {
  width: 88px;
}

.payment-card {
  border: 1px solid rgba(11, 18, 32, 0.10);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(11, 94, 215, 0.05), rgba(167, 139, 250, 0.06));
}

.price {
  font-weight: 700;
}

.card-tint {
  border: 1px solid rgba(11, 18, 32, 0.10) !important;
}

.card-tint-1 {
  background: linear-gradient(135deg, #f1f7ff, #dbeaff);
}

.card-tint-2 {
  background: linear-gradient(135deg, #effff8, #d5fff0);
}

.card-tint-3 {
  background: linear-gradient(135deg, #fff6ea, #ffe5c7);
}

.card-tint-4 {
  background: linear-gradient(135deg, #f7efff, #e8d6ff);
}

.card-tint-5 {
  background: linear-gradient(135deg, #fff0f6, #ffd6e7);
}

.card-tint-6 {
  background: linear-gradient(135deg, #eafcff, #c9f6ff);
}

.glass-tile {
  border: 1px solid rgba(11, 18, 32, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}

.feature-icon {
  width: 44px;
  height: 44px;
  display: inline-block;
}

.text-muted {
  color: var(--muted) !important;
}

.product-thumb-wrap {
  position: relative;
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(11, 18, 32, 0.08);
}

.product-thumb {
  width: 100%;
  height: 140px;
  object-fit: contain;
  display: block;
}

.sticker-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(11, 18, 32, 0.18));
}