/* Base */
.shopfront { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* Hero */
.sf-hero { padding-top: 15px; padding-bottom: 15px; }
.sf-hero__banner {
  border-radius: 16px;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  padding: 32px;
  min-height: 420px;
  position: relative;
}
.sf-hero__badge { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: auto; display: inline-block; }
.sf-hero__banner h1 { font-size: 44px; line-height: 48px; margin: 8px 0; }
.sf-hero__banner h1 span { color: #a7f3d0; }
.sf-hero__banner p { font-size: 16px; margin: 0 0 12px 0; }
.sf-btn { display: inline-block; background: #10b981; color: #ffffff; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.sf-hero__arrows { position: absolute; bottom: 16px; right: 16px; display: flex; gap: 8px; }
.sf-circle { border: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); color: #ffffff; cursor: pointer; }

/* Promos (stack inside right column) */
.sf-hero__promos { display: grid; grid-auto-rows: 1fr; gap: 16px; }
.sf-promo {
  display: block; border-radius: 16px; background-position: center; background-size: cover;
  min-height: 100px; position: relative; overflow: hidden; color: #ffffff; text-decoration: none;
}
.sf-promo__body {
  padding: 16px; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
}
.sf-promo__body h3 { font-size: 20px; margin: 4px 0; }
.sf-promo__body p { font-size: 14px; margin: 0; }
.sf-chip { display: inline-block; background: #ffffff; color: #000000; border-radius: 999px; padding: 4px 10px; font-size: 12px; margin-top: 8px; }

/* Badges */
.sf-badges { margin-top: 20px; }
.sf-badge {
  display: flex; gap: 10px; align-items: center; background: #ffffff; border: 1px solid #e5e7eb;
  border-radius: 16px; padding: 14px; height: 100%;
}
.sf-badge svg { width: 24px; height: 24px; fill: #10b981; }
.sf-badge strong { display: block; font-size: 16px; line-height: 20px; }
.sf-badge small { display: block; font-size: 13px; color: #64748b; }

/* Popular categories */
.sf-popcats { padding-top: 40px; padding-bottom: 40px; }
.sf-section-head { margin-bottom: 16px; background: #ffffff; }
.sf-section-head h2 { font-size: 24px; margin: 0; }
.sf-link { text-decoration: none; font-size: 14px; }
.sf-catcard { display: block; text-decoration: none; color: #111111; text-align: center; }
.sf-catcard__img {
  display: block; width: 80px; height: 80px; margin: 0 auto 8px auto; border-radius: 50%;
  background-position: center; background-size: cover;
}
.sf-catcard__label { display: block; font-size: 14px; }

/* Product rails */
.sf-products { padding-top: 40px; padding-bottom: 40px; }
.sf-rail { font-size: 24px; margin-bottom: 20px; }
.sf-products--alt { background: #f8fafc; }

/* Small helpers for spacing on Bootstrap rows that hold custom cards */
.g-3 { --bs-gutter-x: 24px; --bs-gutter-y: 24px; } /* optional: tighten/loosen Bootstrap gutters */

/* --- Buttons --- */
.sf-btn {
  display: inline-block;
  background: #10b981;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.sf-btn:hover { background: #0ea371; color: #ffffff; }

.sf-btn--small {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  margin-top: 8px;
}

/* --- Promo cards --- */
.sf-promo__body h3 { font-size: 18px; margin: 4px 0; }
.sf-promo__body p  { font-size: 14px; margin: 0; }

/* --- Support / Donations section --- */
.sf-products--alt {
  background: #f9fafb;
}
.sf-products--alt h2 {
  font-size: 24px;
}
.sf-products--alt p {
  font-size: 14px;
  color: #475569;
  margin-bottom: 20px;
}