/* Shared storefront footer and compact checkout variant. */
.svp-footer {
  --foot-ink: #f4f8ff;
  --foot-link: #c8d8ec;
  --foot-line: #354965;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--foot-ink);
  background: radial-gradient(ellipse at 10% 0%, #203f69 0, transparent 53%), #101f34;
}
[data-theme=dark] .svp-footer { background: radial-gradient(ellipse at 10% 0%, #163151 0, transparent 53%), #0a1626; }
.svp-footer::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 24rem; height: 24rem; inset-inline-start: -14rem; top: -15rem;
  border-radius: 50%; border: 1px solid #ffffff13;
  box-shadow: 0 0 0 22px #ffffff06, 0 0 0 46px #ffffff04;
}
.svp-inner { padding-block: clamp(2rem,4vw,3.5rem) 1rem; }
.svp-columns { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.7fr) minmax(0,1.2fr); gap: clamp(1.5rem,5vw,5rem); }
.svp-footer .svp-kicker { display: flex; align-items: center; gap: .5rem; color: #99c9ff; font-size: .76rem; font-weight: 700; }
.svp-kicker i { width: 18px; height: 2px; background: currentColor; }
.svp-footer a.svp-brand { display: inline-block; margin-top: .55rem; color: var(--foot-ink); font-size: clamp(2rem,3.8vw,3rem); font-weight: 850; line-height: 1; text-decoration: none; }
.svp-brand span { color: #78b8ff; }
.svp-footer .svp-intro p { max-width: 20rem; margin: .8rem 0 1rem; color: var(--foot-link); }
.svp-footer a.svp-help { display: inline-flex; align-items: center; gap: .65rem; padding: .5rem .85rem; min-height: 44px; color: var(--foot-ink); border: 1px solid #6783a7; border-radius: .7rem; font-weight: 650; }
.svp-help svg { width: 19px; height: 19px; color: #94c9ff; }
.svp-footer .svp-links h2,.svp-footer .svp-pay h2 { color: var(--foot-ink); text-transform: none; margin: 0 0 .65rem; font-size: 1rem; font-weight: 700; }
.svp-footer .svp-links a { display: block; width: fit-content; padding: .28rem 0; color: var(--foot-link); font-size: .9rem; line-height: 1.45; }
.svp-footer a:hover { color: white; text-decoration: underline; text-underline-offset: 3px; }
.svp-info { display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 1.25rem; }
.svp-info h2 { grid-column: 1/-1; }
.svp-pay { margin-top: 1.8rem; padding: 1rem 1.1rem; border: 1px solid var(--foot-line); border-radius: .9rem; background: #ffffff07; display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1.2rem; }
.svp-footer .svp-pay h2 { margin: 0; font-size: .9rem; }
.svp-pay ul { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.svp-pay li { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: .2rem .6rem; border-radius: .38rem; background: #f7faff; color: #172942; font-size: .76rem; font-weight: 700; }
.svp-logo { display: block; position: relative; overflow: hidden; width: 30px; height: 17px; background: #fff; }
.svp-logo img { display: block; position: absolute; top: 0; left: var(--logo-x,0); width: 150px; max-width: none; height: 17px; }
.svp-logo-mastercard { --logo-x: -30px; }.svp-logo-google { --logo-x: -60px; }.svp-logo-apple { --logo-x: -90px; }.svp-logo-stripe { --logo-x: -120px; }
.svp-signature { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; border-top: 1px solid var(--foot-line); margin-top: 1.25rem; padding-top: .9rem; color: #b1c4dd; font-size: .78rem; }
.svp-checkout .svp-inner { padding-block: 1.2rem; }
.svp-checkout .sv-checkout-footer { padding: 0; }
.svp-checkout .sv-checkout-footer .svp-brand { margin: 0 auto 0 0; font-size: 1.6rem; }
.svp-checkout .sv-checkout-footer > span { color: var(--foot-link); }
.svp-checkout .sv-checkout-footer > a:not(.svp-brand) { color: #aad1ff; }
.svp-checkout .svp-pay { margin-top: 1rem; }
@media(max-width:800px){
  .svp-columns { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .svp-intro { grid-column: 1/-1; }
  .svp-info { display: block; }
}
@media(max-width:480px){
  .svp-columns { gap: 1.3rem .75rem; }
  .svp-footer .svp-links a { padding-block: .45rem; }
  .svp-pay { padding: .85rem; }
  .svp-pay h2 { flex-basis: 100%; }
  .svp-signature { flex-direction: column; }
}
