/* Checkout app — minimal overrides loaded after main site CSS */

.site-botanical-bg::before {
  background-image:
    radial-gradient(at 15% 20%, rgba(156, 175, 136, 0.35) 0, transparent 45%),
    radial-gradient(at 85% 15%, rgba(196, 181, 212, 0.3) 0, transparent 42%),
    radial-gradient(at 50% 80%, rgba(245, 240, 232, 0.9) 0, transparent 50%);
}

body.fleura-checkout-body {
  padding-top: 72px;
  background: transparent !important;
}

body.fleura-checkout-body main {
  position: relative;
  z-index: 1;
  background: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.w-full { width: 100%; }
.block { display: block; }
.text-center { text-align: center; }

.animate-spin {
  animation: checkout-spin 1s linear infinite;
}

@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}

/* Tailwind utility shims used in hero */
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.object-cover { object-fit: cover; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.opacity-15 { opacity: 0.15; }
.from-ivory\/90 { /* gradient handled inline in component */ }
.max-w-xl { max-width: 36rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.text-sm { font-size: 0.875rem; }
.text-5xl { font-size: 3rem; }
.font-light { font-weight: 300; }
.font-serif { font-family: var(--ff-heading); }
.font-sans { font-family: var(--ff-body); }
.text-charcoal { color: var(--clr-charcoal); }
.text-charcoal\/60 { color: rgba(92, 83, 76, 0.6); }
.text-charcoal\/70 { color: rgba(92, 83, 76, 0.7); }
.from-sage\/30 { }
.via-lilac-light\/25 { }
.to-ivory { }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, rgba(156,175,136,0.3), rgba(232,224,240,0.25), #faf8f5)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops, rgba(250,248,245,0.9), transparent)); }
@media (min-width: 768px) {
  .md\:text-7xl { font-size: 4.5rem; }
}