.giving-section .page-heading h2{font-size:clamp(32px,4vw,48px)}.giving-section .donation-switch{display:flex;gap:6px;padding:5px;background:#e8e3d6;border-radius:15px;max-width:480px;margin:24px 0}.donation-switch button{flex:1;font:600 15px Manrope,sans-serif;min-height:48px;border:0;border-radius:11px;background:transparent;color:#40594d;cursor:pointer}.donation-switch button[aria-pressed=true]{background:#faf7ed;color:#164d3c}.donation-embedded{border:1px solid var(--line);border-radius:18px;overflow:hidden}.donation-embedded-heading{padding:22px;background:#eeeadd;display:flex;align-items:center;justify-content:space-between;gap:15px}.donation-embedded-heading h2{font-size:25px;margin:8px 0}.donation-embedded-heading .tag{font-size:10px;letter-spacing:1.5px}.donation-embedded-heading a{font-size:13px}.donation-frame{width:100%;height:1000px;border:0;display:block;background:#f3f6f4;color-scheme:light}.donation-frame[hidden]{display:none}.giving-section .fine{font-size:13px;color:var(--muted);line-height:1.7}.giving-section .zelle{margin-top:30px}@media(max-width:600px){.donation-frame{height:1100px}.donation-embedded-heading{align-items:flex-start;flex-direction:column}}html[data-theme=dark] .giving-section .donation-switch{background:#294331}html[data-theme=dark] .donation-switch button{color:#c6d0bd}html[data-theme=dark] .donation-switch button[aria-pressed=true]{background:#c1d4ad;color:#153a29}html[data-theme=dark] .donation-embedded-heading{background:#1c382c;color:#eee9db}
/* Compact phone giving: keep the provider checkout intact and remove duplicate chrome. */
@media(max-width:600px){
 .donation-embedded-heading{padding:8px 12px;flex-direction:row;justify-content:flex-end;gap:0;min-height:44px}
 .donation-embedded-heading>div{display:none}
 .donation-embedded-heading a{display:inline-flex;align-items:center;min-height:28px;font-size:12px;margin:0}
 .donation-switch button{min-height:44px;padding:8px 12px;font-size:14px}
 .donation-embedded{border-radius:14px}
}

@media(max-width:600px){
 .giving-section.section{padding-top:28px;padding-bottom:28px}
 .giving-section .page-heading h2{font-size:28px;margin:0;line-height:1.2}
 .giving-section .page-heading .eyebrow,.giving-section .page-heading p{display:none}
 .giving-section .page-heading{margin:0 0 12px}
 .giving-section .donation-switch{margin:0 0 12px;padding:4px;gap:4px}
}

/* The homepage keeps natural page scrolling; no fixed checkout or clipped fields. */
@media(max-width:780px){
 body.checkout-keyboard>header{visibility:hidden;pointer-events:none}
 body.checkout-keyboard .giving-section{scroll-margin-top:12px;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
 body.checkout-keyboard .donation-embedded{scroll-margin-block:16px}
 body.checkout-keyboard .donation-frame{scroll-margin-bottom:24px}
}
/* Match the app's giving colors in desktop navigation, the mobile drawer and checkout choices. */
html body .header-menu nav a.button[href="#give"],
html .giving-section .donation-switch button[data-donation-choice="masjid"]{background:#165445;color:#fffaf0;border:1px solid #165445}
html body .header-menu nav a.button[href="#zakat"],
html .giving-section .donation-switch button[data-donation-choice="zakat"]{background:#d9bc72;color:#173e32;border:1px solid #9a7b36}
html[data-theme=dark] body .header-menu nav a.button[href="#give"],
html[data-theme=dark] .giving-section .donation-switch button[data-donation-choice="masjid"]{background:#b9d7b9;color:#102b24;border-color:#b9d7b9}
html[data-theme=dark] body .header-menu nav a.button[href="#zakat"],
html[data-theme=dark] .giving-section .donation-switch button[data-donation-choice="zakat"]{background:#d9bc72;color:#173e32;border-color:#d9bc72}
.giving-section .donation-switch{gap:10px;padding:7px}
.giving-section .donation-switch button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px;text-decoration:underline;text-underline-offset:4px}
.header-menu nav a.button:is([href="#give"],[href="#zakat"]):focus-visible,
.giving-section .donation-switch button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(hover:hover){.header-menu nav a.button:is([href="#give"],[href="#zakat"]):hover,.giving-section .donation-switch button:hover{box-shadow:inset 0 0 0 2px currentColor}}
@media(forced-colors:active){html body .header-menu nav a.button:is([href="#give"],[href="#zakat"]),html .giving-section .donation-switch button[data-donation-choice]{background:ButtonFace;color:ButtonText;border:2px solid ButtonText}}